fix: updates to v9 theme colors (#1402)

* fix: updates to v9 theme colors Signed-off-by: Viraj Sanghvi <[email protected]> * Use tokens for button colors Co-authored-by: Miki <[email protected]> Signed-off-by: Viraj Sanghvi <[email protected]> --------- Signed-off-by: Viraj Sanghvi <[email protected]> Co-authored-by: Miki <[email protected]>
opensearch-project · Sep 16, 2024 · 8cd96ea · 8cd96ea
1 parent 2e42a25
commit 8cd96ea
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 43 deletions.
diff --git a/src/themes/v9/global_styling/variables/_buttons.scss b/src/themes/v9/global_styling/variables/_buttons.scss
@@ -14,11 +14,11 @@ $ouiButtonHeightSmall: $ouiSizeXL !default;
 $ouiButtonHeightXSmall: $ouiSizeL !default;
 
 // sass-lint:disable no-color-literals
-$ouiButtonColorDisabled: lightOrDarkTheme(#AFAFAF, #595F64) !default;
+$ouiButtonColorDisabled: lightOrDarkTheme($ouiColorMediumShade, $ouiColorLightShade) !default;
 // Only increase the contrast of background color to text to 2.0 for disabled
-$ouiButtonColorDisabledText: #8E8E8E !default;
+$ouiButtonColorDisabledText: lightOrDarkTheme(#8E8E8E, #585858) !default;
 // sass-lint:disable no-color-literals
-$ouiButtonColorGhostDisabled: lightOrDarkTheme($ouiColorDarkShade, #585858) !default;
+$ouiButtonColorGhostDisabled: lightOrDarkTheme(#585858, #353535) !default;
 
 $ouiButtonBorderRadius: 0 !default;
 

diff --git a/src/themes/v9/global_styling/variables/_colors.scss b/src/themes/v9/global_styling/variables/_colors.scss
@@ -17,14 +17,14 @@ $ouiColorGhost: #FFFFFF !default;
 $ouiColorInk: #131313 !default;
 
 // Core
-$ouiColorPrimary: #1D70C0 !default;
-$ouiColorSecondary: #199863 !default;
-$ouiColorAccent: #B92FC5 !default;
+$ouiColorPrimary: #0974BE !default;
+$ouiColorSecondary: #0F7F6B !default;
+$ouiColorAccent: #9E4DC0 !default;
 
 // Status
-$ouiColorSuccess: #117F6A !default;
-$ouiColorWarning: #ED9F00 !default;
-$ouiColorDanger: #C84133 !default;
+$ouiColorSuccess: $ouiColorSecondary !default;
+$ouiColorWarning: #E4A330 !default;
+$ouiColorDanger: #C84233 !default;
 
 // Grays
 $ouiColorEmptyShade: #FFFFFF !default;
@@ -36,8 +36,8 @@ $ouiColorDarkestShade: #2A2A2A !default;
 $ouiColorFullShade: #131313 !default;
 
 // Backgrounds
-$ouiPageBackgroundColor: #F5F5F5 !default;
-$ouiColorHighlight: #FEF4E0 !default;
+$ouiPageBackgroundColor: #F9F9F9 !default;
+$ouiColorHighlight: #FFF3E1 !default;
 
 // Every color below must be based mathematically on the set above and in a particular order.
 $ouiTextColor: $ouiColorFullShade !default;
@@ -47,12 +47,12 @@ $ouiColorDisabled: #CDCDCD !default;
 
 // Contrasty text variants
 $ouiColorPrimaryText: $ouiColorPrimary !default;
-$ouiColorSecondaryText: #117F6A !default;
-$ouiColorAccentText: #B92FC5 !default;
-$ouiColorWarningText: #C48600 !default;
-$ouiColorDangerText: #C84133 !default;
-$ouiColorDisabledText: #AFAFAF !default;
-$ouiColorSuccessText: #117F6A !default;
+$ouiColorSecondaryText: $ouiColorSecondary !default;
+$ouiColorAccentText: $ouiColorAccent !default;
+$ouiColorWarningText: #91691F !default;
+$ouiColorDangerText: $ouiColorDanger !default;
+$ouiColorDisabledText: #8E8E8E !default;
+$ouiColorSuccessText: $ouiColorSuccess !default;
 $ouiLinkColor: $ouiColorPrimaryText !default;
 
 // Visualization colors

diff --git a/src/themes/v9/v9_colors_dark.scss b/src/themes/v9/v9_colors_dark.scss
@@ -12,48 +12,48 @@
 @import 'global_styling/functions/index';
 
 // These colors stay the same no matter the theme
-$ouiColorGhost: #FCFEFF;
-$ouiColorInk: #0A121A;
+$ouiColorGhost: #FFFFFF;
+$ouiColorInk: #131313;
 
 // Core
-$ouiColorPrimary: #005EB8;
-$ouiColorSecondary: #199863;
-$ouiColorAccent: #B92FC5;
+$ouiColorPrimary: #009DD9;
+$ouiColorSecondary: #A9DFCB;
+$ouiColorAccent: #CCA1DA;
 
 // Status
-$ouiColorSuccess: #117F6A !default;
-$ouiColorWarning: #ED9F00 !default;
-$ouiColorDanger: #E42C19 !default;
+$ouiColorSuccess: $ouiColorSecondary !default;
+$ouiColorWarning: #FFCB78 !default;
+$ouiColorDanger: #EB6C5F !default;
 
 // Grays
-$ouiColorEmptyShade: #212324;
-$ouiColorLightestShade: #303234;
-$ouiColorLightShade: #4B4E51;
-$ouiColorMediumShade: #616C72;
-$ouiColorDarkShade: #778388;
-$ouiColorDarkestShade: #8C9BA2;
-$ouiColorFullShade: #F3F8FF;
+$ouiColorEmptyShade: #131313;
+$ouiColorLightestShade: #2C2C2C;
+$ouiColorLightShade: #444444;
+$ouiColorMediumShade: #757575;
+$ouiColorDarkShade: #AFAFAF;
+$ouiColorDarkestShade: #D3D3D3;
+$ouiColorFullShade: #F5F5F5;
 
 // Backgrounds
 $ouiPageBackgroundColor: #131313;
-$ouiColorHighlight: #494735;
+$ouiColorHighlight: #39290C;
 
 // Variations from core
-$ouiTextColor: #F3F8FF;
-$ouiTitleColor: $ouiTextColor;
+$ouiTextColor: $ouiColorFullShade;
+$ouiTitleColor: $ouiColorFullShade;
 // Ensure contrast between subdued text and the page background
 // Should not be shaded as much as $ouiColorDisabled
-$ouiTextSubduedColor: #A0A9B5;
-$ouiColorDisabled: #AFAFAF;
+$ouiTextSubduedColor: #AFAFAF;
+$ouiColorDisabled: #585858;
 
 // Contrasty text variants
 $ouiColorPrimaryText: $ouiColorPrimary;
-$ouiColorSecondaryText: #117F6A;
-$ouiColorAccentText: #B92FC5;
-$ouiColorWarningText: #C48600;
-$ouiColorDangerText: #C84133;
-$ouiColorDisabledText: #60656B;
-$ouiColorSuccessText: $ouiColorSecondaryText;
+$ouiColorSecondaryText: $ouiColorSecondary;
+$ouiColorAccentText: $ouiColorAccent;
+$ouiColorWarningText: $ouiColorWarning;
+$ouiColorDangerText: $ouiColorDanger;
+$ouiColorDisabledText: $ouiColorDisabled;
+$ouiColorSuccessText: $ouiColorSuccess;
 $ouiLinkColor: $ouiColorPrimaryText;
 
 // Charts