fix: Updates to v9 colors, button/input styles, and typography (opens…

…earch-project#1373) * fix: Updates to v9 colors, button/input styles, and typography --------- Signed-off-by: Viraj Sanghvi <[email protected]> (cherry picked from commit 1e69cc8)
virajsanghvi · Aug 27, 2024 · 54170af · 54170af
1 parent 74a6aa2
commit 54170af
Show file tree

Hide file tree

Showing 16 changed files with 125 additions and 51 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -8,10 +8,9 @@
 
 ### 📈 Features/Enhancements
 
-- Add new icons for workspaces ([#1365](https://github.com/opensearch-project/oui/pull/1365))
-- Add a property to control the gap between an icon and the content of OuiButton and OuiButtonEmpty ([#1367](https://github.com/opensearch-project/oui/pull/1367))
-
 ### 🐛 Bug Fixes
+- Fix combobox appearance when compressed and in-group ([#1371](https://github.com/opensearch-project/oui/pull/1371))
+- Updates to v9 colors, button/input styles, and typography ([#1373](https://github.com/opensearch-project/oui/pull/1373))
 
 ### 🚞 Infrastructure
 
@@ -22,8 +21,15 @@
 ### 🪛 Refactoring
 
 ### 🔩 Tests
+
+## [`1.11.0`](https://github.com/opensearch-project/oui/tree/1.11)
+
+### 📈 Features/Enhancements
+
+- Add new icons for workspaces ([#1365](https://github.com/opensearch-project/oui/pull/1365))
+- Add a property to control the gap between an icon and the content of OuiButton and OuiButtonEmpty ([#1367](https://github.com/opensearch-project/oui/pull/1367))
 
-## [Unreleased `1.10.0`](https://github.com/opensearch-project/oui/tree/1.10)
+## [`1.10.0`](https://github.com/opensearch-project/oui/tree/1.10)
 
 ### 📈 Features/Enhancements
 

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
  "name": "@opensearch-project/oui",
  "description": "OpenSearch UI Component Library",
- "version": "1.11.0",
+ "version": "1.12.0",
  "license": "Apache-2.0",
  "main": "lib",
  "module": "es",

diff --git a/src/components/button/_button.scss b/src/components/button/_button.scss
@@ -15,7 +15,9 @@
 // Our base button
 .ouiButton {
  @include ouiButton;
- @include ouiSlightShadow;
+ @include ouiUseDefaultButtonShadows {
+ @include ouiSlightShadow;
+ }
 
  border-radius: $ouiButtonBorderRadius;
  min-width: $ouiButtonMinWidth;
@@ -123,7 +125,9 @@
  $shadowColor: desaturate($color, 60%);
  }
 
- @include ouiSlightShadow($shadowColor);
+ @include ouiUseDefaultButtonShadows {
+ @include ouiSlightShadow($shadowColor);
+ }
 
  &:hover,
  &:focus,
@@ -141,7 +145,14 @@
 
 // Fix ghost/disabled look specifically
 .ouiButton.ouiButton-isDisabled.ouiButton--ghost {
- &,
+ & {
+ @include ouiUseDefaultButtonShadows {
+ @include ouiSlightShadow($ouiColorInk);
+ }
+ color: $ouiButtonColorGhostDisabled;
+ border-color: $ouiButtonColorGhostDisabled;
+ }
+
  &:hover,
  &:focus,
  &:focus-within {

diff --git a/src/components/button/button_group/_button_group.scss b/src/components/button/button_group/_button_group.scss
@@ -28,7 +28,9 @@
 }
 
 .ouiButtonGroup__buttons {
- @include ouiSlightShadow;
+ @include ouiUseDefaultButtonShadows {
+ @include ouiSlightShadow;
+ }
  border-radius: $ouiButtonBorderRadius + 1px; // Simply for the box-shadow
  max-width: 100%;
  display: flex;

diff --git a/src/components/button/button_icon/_button_icon.scss b/src/components/button/button_icon/_button_icon.scss
@@ -14,7 +14,9 @@
 
 .ouiButtonIcon {
  @include ouiButton;
- @include ouiSlightShadow;
+ @include ouiUseDefaultButtonShadows {
+ @include ouiSlightShadow;
+ }
 
  border-radius: $ouiButtonBorderRadius;
  width: $ouiButtonHeight;
@@ -121,7 +123,9 @@
  $shadowColor: desaturate($color, 60%);
  }
 
- @include ouiSlightShadow($shadowColor);
+ @include ouiUseDefaultButtonShadows {
+ @include ouiSlightShadow($shadowColor);
+ }
 
  &:hover,
  &:focus,
@@ -139,7 +143,14 @@
 
 // Fix ghost/disabled look specifically
 .ouiButtonIcon.ouiButtonIcon-isDisabled.ouiButtonIcon--ghost {
- &,
+ & {
+ @include ouiUseDefaultButtonShadows {
+ @include ouiSlightShadow($ouiColorInk);
+ }
+ color: $ouiButtonColorGhostDisabled;
+ border-color: $ouiButtonColorGhostDisabled;
+ }
+
  &:hover,
  &:focus,
  &:focus-within {

diff --git a/src/components/date_picker/super_date_picker/_super_date_picker.scss b/src/components/date_picker/super_date_picker/_super_date_picker.scss
@@ -82,7 +82,7 @@
 }
 
 .ouiSuperDatePicker__prettyFormatLink {
- color: $ouiLinkColor;
+ color: $ouiColorPrimaryText;
  padding-left: $ouiSizeXS; // Adds some separation between date text and link
  flex-shrink: 0;
 }

diff --git a/src/components/form/switch/_switch.scss b/src/components/form/switch/_switch.scss
@@ -257,7 +257,9 @@
 @each $name, $color in $ouiSwitchColors {
  .ouiSwitch--#{$name} {
  &.ouiSwitch--base {
- @include ouiSlightShadow;
+ @include ouiUseDefaultButtonShadows {
+ @include ouiSlightShadow;
+ }
  @include ouiButtonFocus;
 
  border-color: $color;
@@ -282,7 +284,9 @@
  $shadowColor: desaturate($color, 60%);
  }
 
- @include ouiSlightShadow($shadowColor);
+ @include ouiUseDefaultButtonShadows {
+ @include ouiSlightShadow($shadowColor);
+ }
 
  &:hover,
  &:focus,

diff --git a/src/components/split_button/_split_button_control.scss b/src/components/split_button/_split_button_control.scss
@@ -111,7 +111,9 @@ $splitButtonSeparatorColor: shade($ouiColorPrimary, 50%);
  $shadowColor: desaturate($color, 60%);
  }
 
- @include ouiSlightShadow($shadowColor);
+ @include ouiUseDefaultButtonShadows {
+ @include ouiSlightShadow($shadowColor);
+ }
 
  &:hover,
  &:focus,
@@ -125,7 +127,14 @@ $splitButtonSeparatorColor: shade($ouiColorPrimary, 50%);
 
  // Fix ghost/disabled look specifically
  .ouiSplitButtonColor.ouiSplitButtonColor-isDisabled.ouiSplitButtonColor--ghost {
- &,
+ & {
+ @include ouiUseDefaultButtonShadows {
+ @include ouiSlightShadow($ouiColorInk);
+ }
+ color: $ouiButtonColorGhostDisabled;
+ border-color: $ouiButtonColorGhostDisabled;
+ }
+
  &:hover,
  &:focus,
  &:focus-within {

diff --git a/src/global_styling/mixins/_button.scss b/src/global_styling/mixins/_button.scss
@@ -121,6 +121,12 @@
 // Keyframe animation declarations can be found in
 // utility/animations.scss
 
+// Helper to contextually turn off button shadows in default states
+@mixin ouiUseDefaultButtonShadows($useShadows: true) {
+ @if ($useShadows) {
+ @content;
+ }
+}
 
 /* OUI -> EUI Aliases */
 @mixin euiButtonBase { @include ouiButtonBase; }
@@ -145,4 +151,5 @@
  border-color: ouiLoadingSpinnerBorderColors(currentColor);
  }
 }
+@mixin euiUseDefaultButtonShadows($useShadows: true) { @include ouiUseDefaultButtonShadows($useShadows); }
 /* End of Aliases */
diff --git a/src/themes/oui-next/global_styling/mixins/_button.scss b/src/themes/oui-next/global_styling/mixins/_button.scss
@@ -122,6 +122,12 @@
 // Keyframe animation declarations can be found in
 // utility/animations.scss
 
+// Helper to contextually turn off button shadows in default states
+@mixin ouiUseDefaultButtonShadows($useShadows: true) {
+ @if ($useShadows) {
+ @content;
+ }
+}
 
 /* OUI -> EUI Aliases */
 @mixin euiButtonBase { @include ouiButtonBase; }
@@ -146,4 +152,5 @@
  border-color: ouiLoadingSpinnerBorderColors(currentColor);
  }
 }
+@mixin euiUseDefaultButtonShadows($useShadows: true) { @include ouiUseDefaultButtonShadows($useShadows); }
 /* End of Aliases */
diff --git a/src/themes/v9/global_styling/mixins/_button.scss b/src/themes/v9/global_styling/mixins/_button.scss
@@ -122,6 +122,12 @@
 // Keyframe animation declarations can be found in
 // utility/animations.scss
 
+// Helper to contextually turn off button shadows in default states
+@mixin ouiUseDefaultButtonShadows($useShadows: false) {
+ @if ($useShadows) {
+ @content;
+ }
+}
 
 /* OUI -> EUI Aliases */
 @mixin euiButtonBase { @include ouiButtonBase; }
@@ -146,4 +152,5 @@
  border-color: ouiLoadingSpinnerBorderColors(currentColor);
  }
 }
+@mixin euiUseDefaultButtonShadows($useShadows: false) { @include ouiUseDefaultButtonShadows($useShadows); }
 /* End of Aliases */
diff --git a/src/themes/v9/global_styling/mixins/_form.scss b/src/themes/v9/global_styling/mixins/_form.scss
@@ -155,14 +155,22 @@
 
 // 1. Must supply both values to background-size or some browsers apply the single value to both directions
 
-@mixin ouiFormControlDefaultShadow($borderOnly: false) {
+@mixin ouiFormControlDefaultShadow($borderOnly: true) {
  // sass-lint:disable-block indentation
  background-color: tintOrShade($ouiColorEmptyShade, 0%, 40%);
  background-repeat: no-repeat;
  background-size: 0% 100%; // 1
 
  @if ($borderOnly) {
  box-shadow: inset 0 0 0 1px $ouiFormBorderColor;
+
+ // show shadow on hover/focus in this mode
+ &:hover,
+ &:focus {
+ box-shadow:
+ #{$ouiFormControlBoxShadow},
+ inset 0 0 0 1px $ouiFormBorderColor;
+ }
  } @else {
  box-shadow:
  #{$ouiFormControlBoxShadow},
@@ -296,7 +304,7 @@
 }
 
 @mixin ouiFormControlStyleCompressed($borderOnly: false, $includeStates: true) {
- @include ouiFormControlDefaultShadow($borderOnly: false);
+ @include ouiFormControlDefaultShadow($borderOnly: true);
  padding: $ouiFormControlCompressedPadding;
  border-radius: $ouiFormControlCompressedBorderRadius;
 

diff --git a/src/themes/v9/global_styling/reset/_reset.scss b/src/themes/v9/global_styling/reset/_reset.scss
@@ -59,7 +59,7 @@ em {
  font-style: italic;
 }
 
-strong {
+b, strong {
  font-weight: $ouiFontWeightBold;
 }
 

diff --git a/src/themes/v9/global_styling/variables/_buttons.scss b/src/themes/v9/global_styling/variables/_buttons.scss
@@ -13,10 +13,12 @@ $ouiButtonHeight: $ouiSizeXXL !default;
 $ouiButtonHeightSmall: $ouiSizeXL !default;
 $ouiButtonHeightXSmall: $ouiSizeL !default;
 
-$ouiButtonColorDisabled: #AFAFAF !default;
+// sass-lint:disable no-color-literals
+$ouiButtonColorDisabled: lightOrDarkTheme(#AFAFAF, #595F64) !default;
 // Only increase the contrast of background color to text to 2.0 for disabled
 $ouiButtonColorDisabledText: #8E8E8E !default;
-$ouiButtonColorGhostDisabled: lightOrDarkTheme($ouiColorDarkShade, $ouiColorDarkShade) !default;
+// sass-lint:disable no-color-literals
+$ouiButtonColorGhostDisabled: lightOrDarkTheme($ouiColorDarkShade, #585858) !default;
 
 $ouiButtonBorderRadius: 0 !default;
 

diff --git a/src/themes/v9/global_styling/variables/_colors.scss b/src/themes/v9/global_styling/variables/_colors.scss
@@ -18,7 +18,7 @@ $ouiColorInk: #131313 !default;
 
 // Core
 $ouiColorPrimary: #003B5C !default;
-$ouiColorSecondary: #0249D8 !default;
+$ouiColorSecondary: #199863 !default;
 $ouiColorAccent: #B92FC5 !default;
 
 // Status
@@ -46,14 +46,14 @@ $ouiTextSubduedColor: #707070 !default;
 $ouiColorDisabled: #CDCDCD !default;
 
 // Contrasty text variants
-$ouiColorPrimaryText: #0249D8 !default;
+$ouiColorPrimaryText: $ouiColorPrimary !default;
 $ouiColorSecondaryText: #117F6A !default;
 $ouiColorAccentText: #B92FC5 !default;
-$ouiColorWarningText: #986600 !default;
-$ouiColorDangerText: #973A2E !default;
+$ouiColorWarningText: #C48600 !default;
+$ouiColorDangerText: #C84133 !default;
 $ouiColorDisabledText: #AFAFAF !default;
 $ouiColorSuccessText: #0D6453 !default;
-$ouiLinkColor: #2452AD !default;
+$ouiLinkColor: $ouiColorPrimaryText !default;
 
 // Visualization colors
 

diff --git a/src/themes/v9/v9_colors_dark.scss b/src/themes/v9/v9_colors_dark.scss
@@ -16,43 +16,43 @@ $ouiColorGhost: #FCFEFF;
 $ouiColorInk: #0A121A;
 
 // Core
-$ouiColorPrimary: #FFC0CB;
-$ouiColorSecondary: #FFC0CB;
-$ouiColorAccent: #FFC0CB;
+$ouiColorPrimary: #005EB8;
+$ouiColorSecondary: #199863;
+$ouiColorAccent: #B92FC5;
 
 // Status
-$ouiColorSuccess: $ouiColorSecondary;
-$ouiColorWarning: #FFCE7A;
-$ouiColorDanger: #FF6666;
+$ouiColorSuccess: #117F6A !default;
+$ouiColorWarning: #ED9F00 !default;
+$ouiColorDanger: #E42C19 !default;
 
 // Grays
-$ouiColorEmptyShade: #0A121A;
-$ouiColorLightestShade: #101B25;
-$ouiColorLightShade: #293847;
-$ouiColorMediumShade: #5B6875;
-$ouiColorDarkShade: #8D98A3;
-$ouiColorDarkestShade: #DFE3E8;
-$ouiColorFullShade: #FCFEFF;
+$ouiColorEmptyShade: #212324;
+$ouiColorLightestShade: #303234;
+$ouiColorLightShade: #4B4E51;
+$ouiColorMediumShade: #616C72;
+$ouiColorDarkShade: #778388;
+$ouiColorDarkestShade: #8C9BA2;
+$ouiColorFullShade: #F3F8FF;
 
 // Backgrounds
-$ouiPageBackgroundColor: #172430;
-$ouiColorHighlight: #2E2D25;
+$ouiPageBackgroundColor: #131313;
+$ouiColorHighlight: #494735;
 
 // Variations from core
-$ouiTextColor: #DFE5EF;
+$ouiTextColor: #F3F8FF;
 $ouiTitleColor: $ouiTextColor;
 // Ensure contrast between subdued text and the page background
 // Should not be shaded as much as $ouiColorDisabled
-$ouiTextSubduedColor: makeHighContrastColor(shade($ouiTextColor, 30%), $ouiPageBackgroundColor);
-$ouiColorDisabled: shade($ouiTextColor, 70%);
+$ouiTextSubduedColor: #A0A9B5;
+$ouiColorDisabled: #AFAFAF;
 
 // Contrasty text variants
-$ouiColorPrimaryText: makeHighContrastColor($ouiColorPrimary);
-$ouiColorSecondaryText: makeHighContrastColor($ouiColorSecondary);
-$ouiColorAccentText: makeHighContrastColor($ouiColorAccent);
-$ouiColorWarningText: makeHighContrastColor($ouiColorWarning);
-$ouiColorDangerText: makeHighContrastColor($ouiColorDanger);
-$ouiColorDisabledText: makeDisabledContrastColor($ouiColorDisabled);
+$ouiColorPrimaryText: #005EB8;
+$ouiColorSecondaryText: #117F6A;
+$ouiColorAccentText: #B92FC5;
+$ouiColorWarningText: #C48600;
+$ouiColorDangerText: #C84133;
+$ouiColorDisabledText: #60656B;
 $ouiColorSuccessText: $ouiColorSecondaryText;
 $ouiLinkColor: $ouiColorPrimaryText;