Update v9 theme colors and revert background button colors (opensearc…

…h-project#1430) Signed-off-by: Viraj Sanghvi <[email protected]>
virajsanghvi · Oct 3, 2024 · ed8dbe5 · ed8dbe5
1 parent 078a904
commit ed8dbe5
Show file tree

Hide file tree

Showing 15 changed files with 42 additions and 49 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -12,10 +12,12 @@
 ### 📈 Features/Enhancements
 
 - Reduce the gap between the elements of a compressed OuiSearchBar ([#1426](https://github.com/opensearch-project/oui/pull/1426))
+- Update colors for v9 theme ([#1430](https://github.com/opensearch-project/oui/pull/1430)) 
 
 ### 🐛 Bug Fixes
 
 - Fix naming conventions in OuiSearchBar code and docs ([#1426](https://github.com/opensearch-project/oui/pull/1426))
+- Revert button background color configurability ([#1430](https://github.com/opensearch-project/oui/pull/1430)) 
 
 ### 🚞 Infrastructure
 

diff --git a/src/components/button/_button.scss b/src/components/button/_button.scss
@@ -20,7 +20,6 @@
   }
 
   border-radius: $ouiButtonBorderRadius;
-  background-color: $ouiButtonBackgroundColor;
   min-width: $ouiButtonMinWidth;
 
   .ouiButton__content {
@@ -84,7 +83,6 @@
     @if ($name == 'ghost') {
       // Ghost is unique and ALWAYS sits against a dark background.
       color: $color;
-      background-color: transparent;
     } @else if ($name == 'text') {
       // The default color is lighter than the normal text color, make the it the text color
       color: $ouiTextColor;

diff --git a/src/components/button/button_group/_button_group.scss b/src/components/button/button_group/_button_group.scss
@@ -32,7 +32,6 @@
     @include ouiSlightShadow;
   }
   border-radius: $ouiButtonBorderRadius + 1px; // Simply for the box-shadow
-  background-color: $ouiButtonBackgroundColor;
   max-width: 100%;
   display: flex;
   overflow: hidden;

diff --git a/src/components/split_button/_split_button_control.scss b/src/components/split_button/_split_button_control.scss
@@ -24,10 +24,6 @@ $splitButtonSeparatorColor: shade($ouiColorPrimary, 50%);
     border-bottom-right-radius: 0px;
     border-bottom-left-radius: 0px;
 
-    &:not(.ouiButton--fill) {
-      background: transparent;
-    }
-
     &:hover,
     &:active,
     &:focus {
@@ -40,10 +36,6 @@ $splitButtonSeparatorColor: shade($ouiColorPrimary, 50%);
     border-width: 0px;
     border-radius: 0px;
 
-    &:not(.ouiButtonIcon--fill) {
-      background: transparent;
-    }
-
     &:hover,
     &:active,
     &:focus {
@@ -55,10 +47,6 @@ $splitButtonSeparatorColor: shade($ouiColorPrimary, 50%);
   .ouiSplitButtonControl {
     border: $ouiBorderWidthThick solid $ouiBorderColor;
     border-radius: $ouiButtonBorderRadius;
-
-    &:not(.ouiButton) {
-      background: $ouiButtonBackgroundColor;
-    }
   }
 
   // Create button modifiers based upon the map.

diff --git a/src/global_styling/variables/_buttons.scss b/src/global_styling/variables/_buttons.scss
@@ -19,7 +19,6 @@ $ouiButtonColorDisabledText: makeDisabledContrastColor($ouiButtonColorDisabled)
 $ouiButtonColorGhostDisabled: lightOrDarkTheme($ouiColorDarkShade, $ouiColorLightShade) !default;
 
 $ouiButtonBorderRadius: $ouiBorderRadius !default;
-$ouiButtonBackgroundColor: transparent;
 
 // Modifier naming and colors.
 $ouiButtonTypes: (
@@ -43,6 +42,5 @@ $euiButtonColorDisabled: $ouiButtonColorDisabled;
 $euiButtonColorDisabledText: $ouiButtonColorDisabledText;
 $euiButtonColorGhostDisabled: $ouiButtonColorGhostDisabled;
 $euiButtonBorderRadius: $ouiButtonBorderRadius;
-$euiButtonBackgroundColor: $ouiButtonBackgroundColor;
 $euiButtonTypes: $ouiButtonTypes;
 /* End of Aliases */
diff --git a/src/global_styling/variables/_side_nav.scss b/src/global_styling/variables/_side_nav.scss
@@ -9,6 +9,9 @@
  * GitHub history for details.
  */
 
+// Value not currently consumed by Side nav component
+$ouiSideNavBackgroundColor: $ouiPageBackgroundColor !default;
+
 $ouiSideNavEmphasizedBackgroundColor: transparentize($ouiColorLightShade, .7) !default;
 
 // Simulates the transparent backround on top of the page background to get an opaque color
@@ -27,6 +30,7 @@ $ouiSideNavDisabledTextcolor: ouiSideNavEmphasizedContrast($ouiButtonColorDisabl
 
 
 /* OUI -> EUI Aliases */
+$euiSideNavBackgroundColor: $ouiSideNavBackgroundColor;
 $euiSideNavEmphasizedBackgroundColor: $ouiSideNavEmphasizedBackgroundColor;
 $euiSideNavRootTextcolor: $ouiSideNavRootTextcolor;
 $euiSideNavBranchTextcolor: $ouiSideNavBranchTextcolor;

diff --git a/src/themes/oui-next/global_styling/variables/_buttons.scss b/src/themes/oui-next/global_styling/variables/_buttons.scss
@@ -19,7 +19,6 @@ $ouiButtonColorDisabledText: makeDisabledContrastColor($ouiButtonColorDisabled)
 $ouiButtonColorGhostDisabled: lightOrDarkTheme($ouiColorDarkShade, $ouiColorLightShade) !default;
 
 $ouiButtonBorderRadius: $ouiBorderRadius !default;
-$ouiButtonBackgroundColor: transparent;
 
 // Modifier naming and colors.
 $ouiButtonTypes: (
@@ -43,6 +42,5 @@ $euiButtonColorDisabled: $ouiButtonColorDisabled;
 $euiButtonColorDisabledText: $ouiButtonColorDisabledText;
 $euiButtonColorGhostDisabled: $ouiButtonColorGhostDisabled;
 $euiButtonBorderRadius: $ouiButtonBorderRadius;
-$euiButtonBackgroundColor: $ouiButtonBackgroundColor;
 $euiButtonTypes: $ouiButtonTypes;
 /* End of Aliases */
diff --git a/src/themes/oui-next/global_styling/variables/_side_nav.scss b/src/themes/oui-next/global_styling/variables/_side_nav.scss
@@ -9,6 +9,9 @@
  * GitHub history for details.
  */
 
+// Value not currently consumed by Side nav component
+$ouiSideNavBackgroundColor: $ouiPageBackgroundColor !default;
+
 $ouiSideNavEmphasizedBackgroundColor: transparentize($ouiColorLightShade, .7) !default;
 
 // Simulates the transparent backround on top of the page background to get an opaque color
@@ -27,6 +30,7 @@ $ouiSideNavDisabledTextcolor: ouiSideNavEmphasizedContrast($ouiButtonColorDisabl
 
 
 /* OUI -> EUI Aliases */
+$euiSideNavBackgroundColor: $ouiSideNavBackgroundColor;
 $euiSideNavEmphasizedBackgroundColor: $ouiSideNavEmphasizedBackgroundColor;
 $euiSideNavRootTextcolor: $ouiSideNavRootTextcolor;
 $euiSideNavBranchTextcolor: $ouiSideNavBranchTextcolor;

diff --git a/src/themes/v9/global_styling/variables/_buttons.scss b/src/themes/v9/global_styling/variables/_buttons.scss
@@ -14,14 +14,13 @@ $ouiButtonHeightSmall: $ouiSizeXL !default;
 $ouiButtonHeightXSmall: $ouiSizeL !default;
 
 // sass-lint:disable no-color-literals
-$ouiButtonColorDisabled: lightOrDarkTheme(#444444, #AFAFAF) !default;
+$ouiButtonColorDisabled: lightOrDarkTheme(#AFAFAF, #444444) !default;
 // Only increase the contrast of background color to text to 2.0 for disabled
-$ouiButtonColorDisabledText: lightOrDarkTheme(#585858, #8E8E8E) !default;
+$ouiButtonColorDisabledText: lightOrDarkTheme(#8E8E8E, #585858) !default;
 // sass-lint:disable no-color-literals
-$ouiButtonColorGhostDisabled: lightOrDarkTheme(#353535, #585858) !default;
+$ouiButtonColorGhostDisabled: lightOrDarkTheme(#707070, #353535) !default;
 
 $ouiButtonBorderRadius: $ouiBorderRadius !default;
-$ouiButtonBackgroundColor: $ouiColorEmptyShade;
 
 // Modifier naming and colors.
 $ouiButtonTypes: (
@@ -45,6 +44,5 @@ $euiButtonColorDisabled: $ouiButtonColorDisabled;
 $euiButtonColorDisabledText: $ouiButtonColorDisabledText;
 $euiButtonColorGhostDisabled: $ouiButtonColorGhostDisabled;
 $euiButtonBorderRadius: $ouiButtonBorderRadius;
-$euiButtonBackgroundColor: $ouiButtonBackgroundColor;
 $euiButtonTypes: $ouiButtonTypes;
 /* End of Aliases */
diff --git a/src/themes/v9/global_styling/variables/_colors.scss b/src/themes/v9/global_styling/variables/_colors.scss
@@ -13,37 +13,37 @@
 @import '../functions/index';
 
 // These colors stay the same no matter the theme
-$ouiColorGhost: #F7F4F2 !default;
-$ouiColorInk: #262626 !default;
+$ouiColorGhost: #FFFFFF !default;
+$ouiColorInk: #001522 !default;
 
 // Core
-$ouiColorPrimary: #0974BE !default;
+$ouiColorPrimary: #006EDB !default;
 $ouiColorSecondary: #107F6B !default;
-$ouiColorAccent: #7F389D !default;
+$ouiColorAccent: #9E4DC0 !default;
 
 // Status
 $ouiColorSuccess: $ouiColorSecondary !default;
-$ouiColorWarning: #FFC460 !default;
-$ouiColorDanger: #C84233 !default;
+$ouiColorWarning: #F25F25 !default;
+$ouiColorDanger: #BD271E !default;
 
 // Grays
 $ouiColorEmptyShade: #FFFFFF !default;
-$ouiColorLightestShade: #F7F4F2 !default;
-$ouiColorLightShade: #EBE4DF !default;
-$ouiColorMediumShade: #D8CBC1 !default;
+$ouiColorLightestShade: #F5F5F5 !default;
+$ouiColorLightShade: #E5E5E5 !default;
+$ouiColorMediumShade: #A5A5A5 !default;
 $ouiColorDarkShade: #585858 !default;
 $ouiColorDarkestShade: #262626 !default;
 $ouiColorFullShade: #131313 !default;
 
 // Backgrounds
-$ouiPageBackgroundColor: #F3EFEC !default;
+$ouiPageBackgroundColor: #F7F4F2 !default;
 $ouiColorHighlight: #FFF3E1 !default;
 
 // Every color below must be based mathematically on the set above and in a particular order.
-$ouiTextColor: $ouiColorDarkestShade !default;
-$ouiTitleColor: shade($ouiTextColor, 50%) !default;
+$ouiTextColor: #042839 !default;
+$ouiTitleColor: #002E48 !default;
 $ouiTextSubduedColor: makeHighContrastColor($ouiColorMediumShade) !default;
-$ouiColorDisabled: tint($ouiTextColor, 70%) !default;
+$ouiColorDisabled: #707070 !default;
 
 // Contrasty text variants
 $ouiColorPrimaryText: makeHighContrastColor($ouiColorPrimary) !default;
@@ -133,7 +133,7 @@ $ouiColorChartLines: shade($ouiColorLightestShade, 3%) !default;
 $ouiColorChartBand: $ouiColorLightestShade !default;
 
 // Code
-$ouiCodeBlockBackgroundColor: $ouiColorLightestShade !default;
+$ouiCodeBlockBackgroundColor: $ouiColorLightShade !default;
 $ouiCodeBlockColor: makeHighContrastColor($ouiTextColor, $ouiCodeBlockBackgroundColor) !default;
 $ouiCodeBlockSelectedBackgroundColor: inherit !default;
 $ouiCodeBlockCommentColor: makeHighContrastColor($ouiTextSubduedColor, $ouiCodeBlockBackgroundColor) !default;

diff --git a/src/themes/v9/global_styling/variables/_header.scss b/src/themes/v9/global_styling/variables/_header.scss
@@ -12,7 +12,7 @@
 // Themeable colors
 $ouiHeaderBackgroundColor: $ouiPageBackgroundColor !default;
 // Always use the dark theme value of $ouiPageBackgroundColor for the dark header background
-$ouiHeaderDarkBackgroundColor: #172430 !default;
+$ouiHeaderDarkBackgroundColor: #001522 !default;
 $ouiHeaderBorderColor: $ouiBorderColor !default;
 $ouiHeaderBreadcrumbColor: $ouiColorDarkestShade !default;
 

diff --git a/src/themes/v9/global_styling/variables/_panel.scss b/src/themes/v9/global_styling/variables/_panel.scss
@@ -25,7 +25,7 @@ $ouiPanelBorderRadiusModifiers: (
 $ouiPanelBackgroundColorModifiers: (
   'transparent': transparent,
   'plain': $ouiColorEmptyShade,
-  'subdued': $ouiPageBackgroundColor,
+  'subdued': $ouiColorLightestShade,
   'accent':  tintOrShade($ouiColorAccent, 90%, 70%),
   'primary': tintOrShade($ouiColorPrimary, 90%, 70%),
   'success': tintOrShade($ouiColorSuccess, 90%, 70%),

diff --git a/src/themes/v9/global_styling/variables/_side_nav.scss b/src/themes/v9/global_styling/variables/_side_nav.scss
@@ -9,7 +9,10 @@
  * GitHub history for details.
  */
 
-$ouiSideNavEmphasizedBackgroundColor: lightOrDarkTheme(transparentize($ouiColorPrimary, .7), transparentize($ouiColorPrimary, .1)) !default;
+// Value not currently consumed by Side nav component
+$ouiSideNavBackgroundColor: lightOrDarkTheme(#EBE4DF, #001C28) !default; // sass-lint:disable-line no-color-literals
+
+$ouiSideNavEmphasizedBackgroundColor: transparentize($ouiColorPrimary, .8) !default;
 
 // Simulates the transparent backround on top of the page background to get an opaque color
 // in order to get the right contrast for text
@@ -27,6 +30,7 @@ $ouiSideNavDisabledTextcolor: ouiSideNavEmphasizedContrast($ouiButtonColorDisabl
 
 
 /* OUI -> EUI Aliases */
+$euiSideNavBackgroundColor: $ouiSideNavBackgroundColor;
 $euiSideNavEmphasizedBackgroundColor: $ouiSideNavEmphasizedBackgroundColor;
 $euiSideNavRootTextcolor: $ouiSideNavRootTextcolor;
 $euiSideNavBranchTextcolor: $ouiSideNavBranchTextcolor;

diff --git a/src/themes/v9/global_styling/variables/_tool_tip.scss b/src/themes/v9/global_styling/variables/_tool_tip.scss
@@ -9,7 +9,7 @@
  * GitHub history for details.
  */
 
-$ouiTooltipBackgroundColor: #293847 !default;
+$ouiTooltipBackgroundColor: $ouiColorDarkestShade !default;
 
 $ouiTooltipAnimations: (
   top: ouiToolTipTop,

diff --git a/src/themes/v9/v9_colors_dark.scss b/src/themes/v9/v9_colors_dark.scss
@@ -13,7 +13,7 @@
 
 // These colors stay the same no matter the theme
 $ouiColorGhost: #FFFFFF;
-$ouiColorInk: #000304;
+$ouiColorInk: #000F15;
 
 // Core
 $ouiColorPrimary: #0082B4;
@@ -23,19 +23,19 @@ $ouiColorAccent: #A55AC3;
 // Status
 $ouiColorSuccess: $ouiColorSecondary;
 $ouiColorWarning: #FFCA75;
-$ouiColorDanger: #EC6F62;
+$ouiColorDanger: #CC5A53;
 
 // Grays
-$ouiColorEmptyShade: #000304;
-$ouiColorLightestShade: #000F15;
-$ouiColorLightShade: #001720;
-$ouiColorMediumShade: #00202D;
+$ouiColorEmptyShade: #001822;
+$ouiColorLightestShade: #1A1A1A;
+$ouiColorLightShade: #222222;
+$ouiColorMediumShade: #333333;
 $ouiColorDarkShade: #CCCCCC;
 $ouiColorDarkestShade: #E5E5E5;
 $ouiColorFullShade: #F5F5F5;
 
 // Backgrounds
-$ouiPageBackgroundColor: #04090B;
+$ouiPageBackgroundColor: #000F15;
 $ouiColorHighlight: #261C08;
 
 // Variations from core