feat(colors): add color extended bright

takenet · May 24, 2024 · 76034fa · 76034fa
1 parent 93b2145
commit 76034fa
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 8 deletions.
diff --git a/src/components/theme-provider/theme-provider.scss b/src/components/theme-provider/theme-provider.scss
@@ -34,13 +34,21 @@
   --color-error: #{$color-light-error};
   --color-delete: #{$color-light-delete};
   --color-extended-blue: #{$color-light-extended-blue};
+  --color-extended-blue-bright: #{$color-light-extended-blue-bright};
   --color-extended-ocean: #{$color-light-extended-ocean};
+  --color-extended-ocean-bright: #{$color-light-extended-ocean-bright};
   --color-extended-green: #{$color-light-extended-green};
+  --color-extended-green-bright: #{$color-light-extended-green-bright};
   --color-extended-yellow: #{$color-light-extended-yellow};
+  --color-extended-yellow-bright: #{$color-light-extended-yellow-bright};
   --color-extended-orange: #{$color-light-extended-orange};
+  --color-extended-orange-bright: #{$color-light-extended-orange-bright};
   --color-extended-red: #{$color-light-extended-red};
+  --color-extended-red-bright: #{$color-light-extended-red-bright};
   --color-extended-pink: #{$color-light-extended-pink};
+  --color-extended-pink-bright: #{$color-light-extended-pink-bright};
   --color-extended-gray: #{$color-light-extended-gray};
+  --color-extended-gray-bright: #{$color-light-extended-gray-bright};
   --color-hover: #{$color-light-hover};
   --color-pressed: #{$color-light-pressed};
   --color-shadow-0: rgba(0, 0, 0, 0.04);
@@ -80,13 +88,21 @@
   --color-error: #{$color-dark-error};
   --color-delete: #{$color-dark-delete};
   --color-extended-blue: #{$color-dark-extended-blue};
+  --color-extended-blue-bright: #{$color-dark-extended-blue-bright};
   --color-extended-ocean: #{$color-dark-extended-ocean};
+  --color-extended-ocean-bright: #{$color-dark-extended-ocean-bright};
   --color-extended-green: #{$color-dark-extended-green};
+  --color-extended-green-bright: #{$color-dark-extended-green-bright};
   --color-extended-yellow: #{$color-dark-extended-yellow};
+  --color-extended-yellow-bright: #{$color-dark-extended-yellow-bright};
   --color-extended-orange: #{$color-dark-extended-orange};
+  --color-extended-orange-bright: #{$color-dark-extended-orange-bright};
   --color-extended-red: #{$color-dark-extended-red};
+  --color-extended-red-bright: #{$color-dark-extended-red-bright};
   --color-extended-pink: #{$color-dark-extended-pink};
+  --color-extended-pink-bright: #{$color-dark-extended-pink-bright};
   --color-extended-gray: #{$color-dark-extended-gray};
+  --color-extended-gray-bright: #{$color-dark-extended-gray-bright};
   --color-hover: #{$color-dark-hover};
   --color-pressed: #{$color-dark-pressed};
   --color-shadow-0: #{$color-shadow-0};

diff --git a/src/globals/_colors.scss b/src/globals/_colors.scss
@@ -39,13 +39,21 @@ $color-negative: var(--color-negative, #e60f0f);
 
 //Extended
 $color-extended-blue: var(--color-extended-blue, $color-light-extended-blue);
+$color-extended-blue-bright: var(--color-extended-blue-bright, $color-light-extended-blue-bright);
 $color-extended-ocean: var(--color-extended-ocean, $color-light-extended-ocean);
+$color-extended-ocean-bright: var(--color-extended-ocean-bright, $color-light-extended-ocean-bright);
 $color-extended-green: var(--color-extended-green, $color-light-extended-green);
+$color-extended-green-bright: var(--color-extended-green-bright, $color-light-extended-green-bright);
 $color-extended-yellow: var(--color-extended-yellow, $color-light-extended-yellow);
+$color-extended-yellow-bright: var(--color-extended-yellow-bright, $color-light-extended-yellow-bright);
 $color-extended-orange: var(--color-extended-orange, $color-light-extended-orange);
+$color-extended-orange-bright: var(--color-extended-orange-bright, $color-light-extended-orange-bright);
 $color-extended-red: var(--color-extended-red, $color-light-extended-red);
+$color-extended-red-bright: var(--color-extended-red-bright, $color-light-extended-red-bright);
 $color-extended-pink: var(--color-extended-pink, $color-light-extended-pink);
+$color-extended-pink-bright: var(--color-extended-pink-bright, $color-light-extended-pink-bright);
 $color-extended-gray: var(--color-extended-gray, $color-light-extended-gray);
+$color-extended-gray-bright: var(--color-extended-gray-bright, $color-light-extended-gray-bright);
 
 // Shadows
 $shadow-drop: 0 2px 8px $color-shadow-1;

diff --git a/src/globals/theme/theme-dark.scss b/src/globals/theme/theme-dark.scss
@@ -28,14 +28,22 @@ $color-dark-error: #7b3d3d;
 $color-dark-delete: #b60c0c;
 
 //Extended
-$color-dark-extended-blue: #b2dffd;
-$color-dark-extended-ocean: #80e3eb;
-$color-dark-extended-green: #84ebbc;
-$color-dark-extended-yellow: #fde99b;
-$color-dark-extended-orange: #fcaa73;
-$color-dark-extended-red: #f99f9f;
-$color-dark-extended-pink: #fd9bdc;
-$color-dark-extended-gray: #c7c7c7;
+$color-dark-extended-blue: #1968f0;
+$color-dark-extended-blue-bright: #b2dffd;
+$color-dark-extended-ocean: #00d3e4;
+$color-dark-extended-ocean-bright: #80e3eb;
+$color-dark-extended-green: #35de90;
+$color-dark-extended-green-bright: #84ebbc;
+$color-dark-extended-yellow: #fbcf23;
+$color-dark-extended-yellow-bright: #fde99b;
+$color-dark-extended-orange: #f06305;
+$color-dark-extended-orange-bright: #fcaa73;
+$color-dark-extended-red: #e60f0f;
+$color-dark-extended-red-bright: #f99f9f;
+$color-dark-extended-pink: #fb4bc1;
+$color-dark-extended-pink-bright: #fd9bdc;
+$color-dark-extended-gray: #666666;
+$color-dark-extended-gray-bright: #c7c7c7;
 
 //Actions
 $color-dark-hover: rgba(255, 255, 255, 0.16);

diff --git a/src/globals/theme/theme-light.scss b/src/globals/theme/theme-light.scss
@@ -29,13 +29,21 @@ $color-light-delete: #e60f0f;
 
 //Extended
 $color-light-extended-blue: #1968f0;
+$color-light-extended-blue-bright: #b2dffd;
 $color-light-extended-ocean: #00d3e4;
+$color-light-extended-ocean-bright: #80e3eb;
 $color-light-extended-green: #35de90;
+$color-light-extended-green-bright: #84ebbc;
 $color-light-extended-yellow: #fbcf23;
+$color-light-extended-yellow-bright: #fde99b;
 $color-light-extended-orange: #f06305;
+$color-light-extended-orange-bright: #fcaa73;
 $color-light-extended-red: #e60f0f;
+$color-light-extended-red-bright: #f99f9f;
 $color-light-extended-pink: #fb4bc1;
+$color-light-extended-pink-bright: #fd9bdc;
 $color-light-extended-gray: #666666;
+$color-light-extended-gray-bright: #c7c7c7;
 
 //Actions
 $color-light-hover: rgba(0, 0, 0, 0.08);