fix: featured and alternative colors fixed and new colors added (#277)

Trendyol · Oct 13, 2022 · 084b3bb · 084b3bb
1 parent 52e6b0c
commit 084b3bb
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 6 deletions.
diff --git a/docs/design-system/colors.stories.mdx b/docs/design-system/colors.stories.mdx
@@ -55,6 +55,8 @@ Baklava uses a list of defined color with some default values.
         '--secondary': '#6E7787',
         '--tertiary': '#95A1B5',
         '--passive': '#AFBBCA',
+        '--primary-contrast' : '#FFF',
+        '--hover' : '#F27A1A'
     }}
   />
 </ColorPalette>
diff --git a/src/components/button/bl-button.css b/src/components/button/bl-button.css
@@ -8,7 +8,7 @@
   --main-color: var(--bl-color-primary);
   --main-hover-color: var(--bl-color-primary-hover);
   --text-hover-color: var(--bl-color-secondary-background);
-  --content-color: var(--bl-color-primary-background);
+  --content-color: var(--bl-color-content-primary-contrast);
   --bg-color: var(--main-color);
   --border-color: var(--main-color);
   --padding-vertical: var(--bl-size-2xs);
@@ -122,7 +122,7 @@
 }
 
 :host([variant='secondary']:hover:not([disabled])) .button {
-  --content-color: var(--bl-color-primary-background);
+  --content-color: var(--bl-color-content-primary-contrast);
   --bg-color: var(--main-hover-color);
 }
 

diff --git a/src/components/checkbox/bl-checkbox.css b/src/components/checkbox/bl-checkbox.css
@@ -27,7 +27,7 @@ input {
   height: var(--bl-size-m);
   border: 1px solid var(--bl-color-border);
   border-radius: var(--bl-border-radius-xs);
-  color: var(--bl-color-primary-background);
+  color: var(--bl-color-content-primary-contrast);
   font-size: var(--bl-font-size-2xs);
 }
 

diff --git a/src/components/tooltip/bl-tooltip.css b/src/components/tooltip/bl-tooltip.css
@@ -12,7 +12,7 @@
   box-sizing: border-box;
   border: none;
   background-color: var(--bl-color-secondary);
-  color: var(--bl-color-primary-background);
+  color: var(--bl-color-content-primary-contrast);
   border-radius: var(--bl-size-3xs);
   pointer-events: none;
   font: var(--bl-font-title-3-regular);

diff --git a/src/themes/default.css b/src/themes/default.css
@@ -15,9 +15,9 @@
   --bl-color-warning: #ffb600;
   --bl-color-warning-hover: #ff9800;
   --bl-color-alternative: #5794ff;
-  --bl-color-alternative-hover: #3469ff;
+  --bl-color-alternative-hover: #457eff;
   --bl-color-featured: #8c4eff;
-  --bl-color-featured-hover: #5e2eff;
+  --bl-color-featured-hover: #753eff;
 
   /* Background Colors */
   --bl-color-primary-background: #fff;
@@ -35,6 +35,8 @@
   --bl-color-content-secondary: #6e7787;
   --bl-color-content-tertiary: #95a1b5;
   --bl-color-content-passive: #afbbca;
+  --bl-color-content-primary-contrast: #fff;
+  --bl-color-content-hover: #f27a1a;
   --bl-color-border: #d5d9e1;
 
   /* Size and Spacing */