diff --git a/CHANGELOG.md b/CHANGELOG.md index 532c3d0d4..faeebe2c9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,7 +8,8 @@ ### 📈 Features/Enhancements -- Add bookOpen, compass, dashboard, functionAdd, lineChart, pulse, radar, and rocket icons +- Add bookOpen, compass, dashboard, functionAdd, lineChart, pulse, radar, and rocket icons ([#1443](https://github.com/opensearch-project/oui/pull/1443)) +- Update v9 theme colors ([#](https://github.com/opensearch-project/oui/pull/)) ### 🐛 Bug Fixes diff --git a/src/themes/v9/global_styling/variables/_buttons.scss b/src/themes/v9/global_styling/variables/_buttons.scss index 9bff6c3ca..6cf717bc9 100644 --- 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, #444444) !default; +$ouiButtonColorDisabled: lightOrDarkTheme(#C7CACF, $ouiColorMediumShade) !default; // Only increase the contrast of background color to text to 2.0 for disabled -$ouiButtonColorDisabledText: lightOrDarkTheme(#8E8E8E, #585858) !default; +$ouiButtonColorDisabledText: lightOrDarkTheme($ouiTextSubduedColor, #B7BCC1) !default; // sass-lint:disable no-color-literals -$ouiButtonColorGhostDisabled: lightOrDarkTheme(#707070, #353535) !default; +$ouiButtonColorGhostDisabled: lightOrDarkTheme($ouiColorDarkShade, $ouiColorMediumShade) !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 886005e92..ea7d1fd12 100644 --- 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: #FFFFFF !default; -$ouiColorInk: #001522 !default; +$ouiColorGhost: #E3E5E9 !default; +$ouiColorInk: #02020E !default; // Core -$ouiColorPrimary: #006EDB !default; -$ouiColorSecondary: #107F6B !default; -$ouiColorAccent: #9E4DC0 !default; +$ouiColorPrimary: #0268BC !default; +$ouiColorSecondary: #0F7B68 !default; +$ouiColorAccent: #9C47BF !default; // Status $ouiColorSuccess: $ouiColorSecondary !default; -$ouiColorWarning: #F25F25 !default; -$ouiColorDanger: #BD271E !default; +$ouiColorWarning: #E95C24 !default; +$ouiColorDanger: #C43D35 !default; // Grays -$ouiColorEmptyShade: #FFFFFF !default; -$ouiColorLightestShade: #F5F5F5 !default; -$ouiColorLightShade: #E5E5E5 !default; -$ouiColorMediumShade: #A5A5A5 !default; -$ouiColorDarkShade: #585858 !default; -$ouiColorDarkestShade: #262626 !default; -$ouiColorFullShade: #131313 !default; +$ouiColorEmptyShade: #FCFEFF !default; +$ouiColorLightestShade: #E3E5E9 !default; +$ouiColorLightShade: #D7D9DD !default; +$ouiColorMediumShade: #A8ADB3 !default; +$ouiColorDarkShade: #5F6872 !default; +$ouiColorDarkestShade: #18212A !default; +$ouiColorFullShade: #02020E !default; // Backgrounds -$ouiPageBackgroundColor: #F7F4F2 !default; -$ouiColorHighlight: #FFF3E1 !default; +$ouiPageBackgroundColor: #F0F2F4 !default; +$ouiColorHighlight: #FFE1B0 !default; // Every color below must be based mathematically on the set above and in a particular order. -$ouiTextColor: #042839 !default; -$ouiTitleColor: #002E48 !default; -$ouiTextSubduedColor: makeHighContrastColor($ouiColorMediumShade) !default; -$ouiColorDisabled: #707070 !default; +$ouiTextColor: #2A3541 !default; +$ouiTitleColor: $ouiColorDarkestShade !default; +$ouiTextSubduedColor: #4D5762 !default; +$ouiColorDisabled: $ouiColorLightShade !default; // Contrasty text variants $ouiColorPrimaryText: makeHighContrastColor($ouiColorPrimary) !default; @@ -51,7 +51,7 @@ $ouiColorSecondaryText: makeHighContrastColor($ouiColorSecondary) !default; $ouiColorAccentText: makeHighContrastColor($ouiColorAccent) !default; $ouiColorWarningText: makeHighContrastColor($ouiColorWarning) !default; $ouiColorDangerText: makeHighContrastColor($ouiColorDanger) !default; -$ouiColorDisabledText: makeDisabledContrastColor($ouiColorDisabled) !default; +$ouiColorDisabledText: #656E78 !default; $ouiColorSuccessText: $ouiColorSecondaryText !default; $ouiLinkColor: $ouiColorPrimaryText !default; @@ -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 66de9613f..d2e68ee30 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: tintOrShade($ouiColorLightestShade, 60%, 40%) !default; -$ouiFormBackgroundDisabledColor: darken($ouiColorLightestShade, 2%) !default; -$ouiFormBackgroundReadOnlyColor: transparentize(lightOrDarkTheme($ouiColorLightShade, $ouiColorInk), .95) !default; +$ouiFormBackgroundColor: $ouiColorEmptyShade !default; +$ouiFormBackgroundDisabledColor: lightOrDarkTheme($ouiColorLightShade, $ouiColorLightestShade) !default; +$ouiFormBackgroundReadOnlyColor: $ouiColorEmptyShade !default; $ouiFormBorderOpaqueColor: shadeOrTint(desaturate(adjust-hue($ouiColorPrimary, 22), 22.95), 26%, 100%) !default; -$ouiFormBorderColor: transparentize($ouiFormBorderOpaqueColor, .9) !default; -$ouiFormBorderDisabledColor: transparentize($ouiFormBorderOpaqueColor, .9) !default; +$ouiFormBorderColor: $ouiColorLightShade !default; +$ouiFormBorderDisabledColor: lightOrDarkTheme($ouiColorLightShade, $ouiColorLightestShade) !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/_shadows.scss b/src/themes/v9/global_styling/variables/_shadows.scss index bc5bdbcac..4939c638b 100644 --- a/src/themes/v9/global_styling/variables/_shadows.scss +++ b/src/themes/v9/global_styling/variables/_shadows.scss @@ -12,7 +12,7 @@ // Shadows // Transparency only affects the use of variable this outside of the shadow mixins (borders) $ouiShadowColor: $ouiColorMediumShade !default; -$ouiShadowColorLarge: #585858 !default; +$ouiShadowColorLarge: $ouiColorMediumShade !default; /* OUI -> EUI Aliases */ diff --git a/src/themes/v9/global_styling/variables/_side_nav.scss b/src/themes/v9/global_styling/variables/_side_nav.scss index d52bfbfc5..c15642799 100644 --- a/src/themes/v9/global_styling/variables/_side_nav.scss +++ b/src/themes/v9/global_styling/variables/_side_nav.scss @@ -10,7 +10,7 @@ */ // Value not currently consumed by Side nav component -$ouiSideNavBackgroundColor: lightOrDarkTheme(#EFE9E5, #001C28) !default; // sass-lint:disable-line no-color-literals +$ouiSideNavBackgroundColor: $ouiColorEmptyShade !default; // sass-lint:disable-line no-color-literals $ouiSideNavEmphasizedBackgroundColor: transparentize($ouiColorPrimary, .8) !default; diff --git a/src/themes/v9/global_styling/variables/_tool_tip.scss b/src/themes/v9/global_styling/variables/_tool_tip.scss index 3211324fd..48f3bbf30 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, #293847) !default; // sass-lint:disable-line no-color-literals +$ouiTooltipBackgroundColor: lightOrDarkTheme($ouiColorDarkestShade, $ouiColorLightestShade) !default; // sass-lint:disable-line no-color-literals $ouiTooltipAnimations: ( top: ouiToolTipTop, diff --git a/src/themes/v9/v9_colors_dark.scss b/src/themes/v9/v9_colors_dark.scss index b5fb62e13..8d337cbfe 100644 --- a/src/themes/v9/v9_colors_dark.scss +++ b/src/themes/v9/v9_colors_dark.scss @@ -12,39 +12,39 @@ @import 'global_styling/functions/index'; // These colors stay the same no matter the theme -$ouiColorGhost: #FFFFFF; -$ouiColorInk: #000F15; +$ouiColorGhost: #E3E5E9; +$ouiColorInk: #02020E; // Core -$ouiColorPrimary: #0082B4; -$ouiColorSecondary: #118973; -$ouiColorAccent: #A55AC3; +$ouiColorPrimary: #0097D1; +$ouiColorSecondary: #129079; +$ouiColorAccent: #AA63C4; // Status $ouiColorSuccess: $ouiColorSecondary; -$ouiColorWarning: #FFCA75; -$ouiColorDanger: #CC5A53; +$ouiColorWarning: #F47544; +$ouiColorDanger: #CD5D56; // Grays -$ouiColorEmptyShade: #001822; -$ouiColorLightestShade: #1A1A1A; -$ouiColorLightShade: #222222; -$ouiColorMediumShade: #333333; -$ouiColorDarkShade: #CCCCCC; -$ouiColorDarkestShade: #E5E5E5; -$ouiColorFullShade: #F5F5F5; +$ouiColorEmptyShade: #0F171F; +$ouiColorLightestShade: #19222B; +$ouiColorLightShade: #2A3540; +$ouiColorMediumShade: #5C666F; +$ouiColorDarkShade: #959BA2; +$ouiColorDarkestShade: #E3E5E9; +$ouiColorFullShade: #FCFEFF; // Backgrounds -$ouiPageBackgroundColor: #000F15; -$ouiColorHighlight: #261C08; +$ouiPageBackgroundColor: #02020E; +$ouiColorHighlight: #3D2C0D; // Variations from core -$ouiTextColor: $ouiColorFullShade; -$ouiTitleColor: $ouiColorFullShade; +$ouiTextColor: $ouiColorDarkestShade; +$ouiTitleColor: $ouiColorDarkestShade; // Ensure contrast between subdued text and the page background // Should not be shaded as much as $ouiColorDisabled -$ouiTextSubduedColor: makeHighContrastColor($ouiColorMediumShade); -$ouiColorDisabled: tint($ouiTextColor, 70%) !default; +$ouiTextSubduedColor: $ouiColorDarkShade; +$ouiColorDisabled: $ouiColorLightestShade !default; // Contrasty text variants $ouiColorPrimaryText: makeHighContrastColor($ouiColorPrimary) !default; @@ -52,7 +52,7 @@ $ouiColorSecondaryText: makeHighContrastColor($ouiColorSecondary) !default; $ouiColorAccentText: makeHighContrastColor($ouiColorAccent) !default; $ouiColorWarningText: makeHighContrastColor($ouiColorWarning) !default; $ouiColorDangerText: makeHighContrastColor($ouiColorDanger) !default; -$ouiColorDisabledText: makeDisabledContrastColor($ouiColorDisabled) !default; +$ouiColorDisabledText: #798189 !default; $ouiColorSuccessText: $ouiColorSecondaryText !default; $ouiLinkColor: $ouiColorPrimaryText !default; @@ -60,6 +60,9 @@ $ouiLinkColor: $ouiColorPrimaryText !default; $ouiColorChartLines: $ouiColorLightShade; $ouiColorChartBand: tint($ouiColorLightestShade, 2.5%); +// Code +$ouiCodeBlockBackgroundColor: $ouiColorLightestShade; + // Shadows $ouiShadowColor: #000; $ouiShadowColorLarge: #000; @@ -97,6 +100,7 @@ $euiColorSuccessText: $ouiColorSuccessText; $euiLinkColor: $ouiLinkColor; $euiColorChartLines: $ouiColorChartLines; $euiColorChartBand: $ouiColorChartBand; +$euiCodeBlockBackgroundColor: $ouiCodeBlockBackgroundColor; $euiShadowColor: $ouiShadowColor; $euiShadowColorLarge: $ouiShadowColorLarge; /* End of Aliases */