diff --git a/CHANGELOG.md b/CHANGELOG.md index a44467d68..997a6a7a9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,7 @@ ### 📈 Features/Enhancements - Add vertical oriented button group ([#755](https://github.com/opensearch-project/oui/pull/755)) - Add sparkleFilled icon ([#1452](https://github.com/opensearch-project/oui/pull/1452)) +- Update colors v9 theme ([#1460](https://github.com/opensearch-project/oui/pull/1460)) ### 🐛 Bug Fixes @@ -29,6 +30,7 @@ ### 🔩 Tests + ## [`1.17.0`](https://github.com/opensearch-project/oui/tree/1.17) ### 📈 Features/Enhancements diff --git a/src/themes/v9/global_styling/variables/_buttons.scss b/src/themes/v9/global_styling/variables/_buttons.scss index c83fb9a26..267a037fe 100644 --- a/src/themes/v9/global_styling/variables/_buttons.scss +++ b/src/themes/v9/global_styling/variables/_buttons.scss @@ -13,11 +13,10 @@ $ouiButtonHeight: $ouiSizeXXL !default; $ouiButtonHeightSmall: $ouiSizeXL !default; $ouiButtonHeightXSmall: $ouiSizeL !default; -// sass-lint:disable no-color-literals -$ouiButtonColorDisabled: lightOrDarkTheme(#D7D9DD, $ouiColorLightShade) !default; + +$ouiButtonColorDisabled: tintOrShade($ouiTextColor, 70%, 70%) !default; // Only increase the contrast of background color to text to 2.0 for disabled -$ouiButtonColorDisabledText: lightOrDarkTheme($ouiColorDarkShade, #7F878F) !default; -// sass-lint:disable no-color-literals +$ouiButtonColorDisabledText: makeDisabledContrastColor($ouiButtonColorDisabled) !default; $ouiButtonColorGhostDisabled: lightOrDarkTheme($ouiColorDarkShade, $ouiColorLightShade) !default; $ouiButtonBorderRadius: $ouiBorderRadius !default; diff --git a/src/themes/v9/global_styling/variables/_colors.scss b/src/themes/v9/global_styling/variables/_colors.scss index c4f480fac..c1d971b4a 100644 --- a/src/themes/v9/global_styling/variables/_colors.scss +++ b/src/themes/v9/global_styling/variables/_colors.scss @@ -28,21 +28,21 @@ $ouiColorDanger: #C43D35 !default; // Grays $ouiColorEmptyShade: #FCFEFF !default; -$ouiColorLightestShade: #EAECEE !default; -$ouiColorLightShade: #D7D9DD !default; -$ouiColorMediumShade: #A8ADB3 !default; -$ouiColorDarkShade: #5F6872 !default; -$ouiColorDarkestShade: #18212A !default; -$ouiColorFullShade: #02020E !default; +$ouiColorLightestShade: #E3E5E8 !default; +$ouiColorLightShade: #D6D9DD !default; +$ouiColorMediumShade: #ADB4BA !default; +$ouiColorDarkShade: #5A6875 !default; +$ouiColorDarkestShade: #2A3947 !default; +$ouiColorFullShade: #0A1219 !default; // Backgrounds $ouiPageBackgroundColor: #F0F2F4 !default; $ouiColorHighlight: #FFE1B0 !default; // Every color below must be based mathematically on the set above and in a particular order. -$ouiTextColor: #2A3947 !default; -$ouiTitleColor: #1A2631 !default; -$ouiTextSubduedColor: #676E75 !default; +$ouiTextColor: $ouiColorDarkestShade !default; +$ouiTitleColor: shade($ouiTextColor, 50%) !default; +$ouiTextSubduedColor: makeHighContrastColor($ouiColorMediumShade) !default; $ouiColorDisabled: tint($ouiTextColor, 70%) !default; // Contrasty text variants @@ -133,7 +133,7 @@ $ouiColorChartLines: shade($ouiColorLightestShade, 3%) !default; $ouiColorChartBand: $ouiColorLightestShade !default; // Code -$ouiCodeBlockBackgroundColor: $ouiColorLightShade !default; +$ouiCodeBlockBackgroundColor: $ouiColorLightestShade !default; $ouiCodeBlockColor: makeHighContrastColor($ouiTextColor, $ouiCodeBlockBackgroundColor) !default; $ouiCodeBlockSelectedBackgroundColor: inherit !default; $ouiCodeBlockCommentColor: makeHighContrastColor($ouiTextSubduedColor, $ouiCodeBlockBackgroundColor) !default; diff --git a/src/themes/v9/global_styling/variables/_form.scss b/src/themes/v9/global_styling/variables/_form.scss index cba04a4d5..66de9613f 100644 --- a/src/themes/v9/global_styling/variables/_form.scss +++ b/src/themes/v9/global_styling/variables/_form.scss @@ -50,12 +50,12 @@ $ouiSwitchColors: ( ) !default; // Coloring -$ouiFormBackgroundColor: $ouiColorEmptyShade !default; -$ouiFormBackgroundDisabledColor: $ouiColorLightestShade !default; -$ouiFormBackgroundReadOnlyColor: $ouiColorEmptyShade !default; +$ouiFormBackgroundColor: tintOrShade($ouiColorLightestShade, 60%, 40%) !default; +$ouiFormBackgroundDisabledColor: darken($ouiColorLightestShade, 2%) !default; +$ouiFormBackgroundReadOnlyColor: transparentize(lightOrDarkTheme($ouiColorLightShade, $ouiColorInk), .95) !default; $ouiFormBorderOpaqueColor: shadeOrTint(desaturate(adjust-hue($ouiColorPrimary, 22), 22.95), 26%, 100%) !default; -$ouiFormBorderColor: lightOrDarkTheme(transparentize($ouiFormBorderOpaqueColor, .9), $ouiColorLightShade) !default; -$ouiFormBorderDisabledColor: lightOrDarkTheme(transparentize($ouiFormBorderOpaqueColor, .9), $ouiColorLightestShade) !default; +$ouiFormBorderColor: transparentize($ouiFormBorderOpaqueColor, .9) !default; +$ouiFormBorderDisabledColor: transparentize($ouiFormBorderOpaqueColor, .9) !default; $ouiFormCustomControlDisabledIconColor: shadeOrTint($ouiColorMediumShade, 38%, 48.5%) !default; // exact 508c foreground for $ouiColorLightShade $ouiFormCustomControlBorderColor: shadeOrTint($ouiColorLightestShade, 18%, 30%) !default; $ouiFormControlDisabledColor: $ouiColorMediumShade !default; diff --git a/src/themes/v9/global_styling/variables/_panel.scss b/src/themes/v9/global_styling/variables/_panel.scss index e7ce1f87e..21b5cc4e6 100644 --- 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': $ouiColorLightestShade, + 'subdued': $ouiPageBackgroundColor, 'accent': tintOrShade($ouiColorAccent, 90%, 70%), 'primary': tintOrShade($ouiColorPrimary, 90%, 70%), 'success': tintOrShade($ouiColorSuccess, 90%, 70%), diff --git a/src/themes/v9/global_styling/variables/_shadows.scss b/src/themes/v9/global_styling/variables/_shadows.scss index 02f7fce39..9dae493ce 100644 --- a/src/themes/v9/global_styling/variables/_shadows.scss +++ b/src/themes/v9/global_styling/variables/_shadows.scss @@ -11,8 +11,8 @@ // Shadows // Transparency only affects the use of variable this outside of the shadow mixins (borders) -$ouiShadowColor: #ADB2B8 !default; -$ouiShadowColorLarge: $ouiShadowColor !default; +$ouiShadowColor: $ouiColorMediumShade !default; +$ouiShadowColorLarge: shade(saturate($ouiColorMediumShade, 25%), 50%) !default; /* OUI -> EUI Aliases */ diff --git a/src/themes/v9/global_styling/variables/_tool_tip.scss b/src/themes/v9/global_styling/variables/_tool_tip.scss index 48f3bbf30..5ea6b5e9e 100644 --- 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: lightOrDarkTheme($ouiColorDarkestShade, $ouiColorLightestShade) !default; // sass-lint:disable-line no-color-literals +$ouiTooltipBackgroundColor: lightOrDarkTheme($ouiColorDarkestShade, $ouiColorLightestShade) !default; $ouiTooltipAnimations: ( top: ouiToolTipTop,