Merge pull request #66 from oramasearch/feature/orm-1899

feature: change the use of primary colors in elements to use semantic…
oramasearch · Dec 16, 2024 · b11da19 · b11da19
2 parents 4e5cb96 + 11e5523
commit b11da19
Showing 1 changed file with 27 additions and 31 deletions.
diff --git a/packages/ui-stencil/src/styles/_colors.scss b/packages/ui-stencil/src/styles/_colors.scss
@@ -50,19 +50,20 @@ $semanticColors: (
     tertiary: $purple200,
     fourth: $gray100,
     reverse: black,
+    accent: $purple700,
   ),
   border: (
     primary: $gray200,
     secondary: $gray100,
     tertiary: $gray900,
-    accent: $purple300,
+    accent: $purple700,
   ),
   icon: (
     primary: $gray900,
     secondary: $gray200,
     tertiary: $gray600,
     inactive: $gray500,
-    accent: $purple500,
+    reverse: $gray50,
   ),
   shadow: (
     primary: white,
@@ -71,37 +72,31 @@ $semanticColors: (
 
 $elementColors: (
   'button-text': (
-    // TODO: example of how to use the color functions with semantic colors
-    // primary: color.adjust(text-color('primary', $semanticColors), $lightness: 10%),
-    primary: $purple100,
+    primary: icon-color('reverse', $semanticColors),
     secondary: text-color('secondary', $semanticColors),
-    inactive: $gray500,
-    // todo: value to check with Angela
   ),
   'button-background': (
-    primary: $purple500,
+    primary: background-color('accent', $semanticColors),
     secondary: background-color('secondary', $semanticColors),
     'secondary-hover': background-color('tertiary', $semanticColors),
-    inactive: $gray100,
-    // todo: value to check with Angela
   ),
   'button-border': (
     secondary: border-color('primary', $semanticColors),
   ),
   'backdrop-background': (
-    primary: rgba(black, 0.7),
+    primary: color.adjust(background-color('primary', $semanticColors), $alpha: -0.3),
   ),
   'chat-button-border': (
-    gradientOne: $purple200,
-    gradientTwo: $purple200,
-    gradientThree: $purple300,
-    gradientFour: $purple300,
-    gradientFive: $purple200,
-    gradientSix: $purple200,
+    gradientOne: transparent,
+    gradientTwo: transparent,
+    gradientThree: border-color('accent', $semanticColors),
+    gradientFour: border-color('accent', $semanticColors),
+    gradientFive: transparent,
+    gradientSix: transparent,
   ),
   'chat-button-background': (
-    gradientOne: $purple300,
-    gradientTwo: rgba(255, 255, 255, 0),
+    gradientOne: background-color('accent', $semanticColors),
+    gradientTwo: transparent,
   ),
 );
 
@@ -123,6 +118,7 @@ $semanticColorsDark: (
     tertiary: $gray800,
     fourth: $gray700,
     reverse: white,
+    accent: $purple500,
   ),
   border: (
     primary: $gray700,
@@ -135,7 +131,7 @@ $semanticColorsDark: (
     secondary: $gray200,
     tertiary: $gray600,
     inactive: $gray500,
-    accent: $purple500,
+    reverse: $gray950,
   ),
   shadow: (
     primary: black,
@@ -144,31 +140,31 @@ $semanticColorsDark: (
 
 $elementColorsDark: (
   'button-text': (
-    primary: $gray100,
+    primary: icon-color('primary', $semanticColorsDark),
     secondary: text-color('inactive', $semanticColorsDark),
   ),
   'button-background': (
-    primary: $purple700,
+    primary: background-color('accent', $semanticColorsDark),
     secondary: background-color('secondary', $semanticColorsDark),
     'secondary-hover': background-color('tertiary', $semanticColorsDark),
   ),
   'button-border': (
     secondary: border-color('primary', $semanticColorsDark),
   ),
   'backdrop-background': (
-    primary: rgba(black, 0.7),
+    primary: color.adjust(background-color('primary', $semanticColorsDark), $alpha: -0.3),
   ),
   'chat-button-border': (
-    gradientOne: $gray800,
-    gradientTwo: $gray800,
-    gradientThree: $purple300,
-    gradientFour: $purple500,
-    gradientFive: $gray800,
-    gradientSix: $gray800,
+    gradientOne: transparent,
+    gradientTwo: transparent,
+    gradientThree: border-color('accent', $semanticColorsDark),
+    gradientFour: border-color('accent', $semanticColorsDark),
+    gradientFive: transparent,
+    gradientSix: transparent,
   ),
   'chat-button-background': (
-    gradientOne: $purple600,
-    gradientTwo: rgba(106, 75, 178, 0),
+    gradientOne: background-color('accent', $semanticColorsDark),
+    gradientTwo: transparent,
   ),
 );