From 54170af1875b3884af50d4573d2f741c055163ef Mon Sep 17 00:00:00 2001 From: Viraj Sanghvi Date: Mon, 26 Aug 2024 19:31:14 -0700 Subject: [PATCH] fix: Updates to v9 colors, button/input styles, and typography (#1373) * fix: Updates to v9 colors, button/input styles, and typography --------- Signed-off-by: Viraj Sanghvi (cherry picked from commit 1e69cc865f98972bdf852008fd4ef51c2e1a6a64) --- CHANGELOG.md | 14 ++++-- package.json | 2 +- src/components/button/_button.scss | 17 +++++-- .../button/button_group/_button_group.scss | 4 +- .../button/button_icon/_button_icon.scss | 17 +++++-- .../super_date_picker/_super_date_picker.scss | 2 +- src/components/form/switch/_switch.scss | 8 +++- .../split_button/_split_button_control.scss | 13 ++++- src/global_styling/mixins/_button.scss | 7 +++ .../global_styling/mixins/_button.scss | 7 +++ .../v9/global_styling/mixins/_button.scss | 7 +++ .../v9/global_styling/mixins/_form.scss | 12 ++++- .../v9/global_styling/reset/_reset.scss | 2 +- .../v9/global_styling/variables/_buttons.scss | 6 ++- .../v9/global_styling/variables/_colors.scss | 10 ++-- src/themes/v9/v9_colors_dark.scss | 48 +++++++++---------- 16 files changed, 125 insertions(+), 51 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 9e186b0ac..aaab5e69d 100644 --- 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 index 75a9a0d56..9240d0e61 100644 --- 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 index 96c3da046..5f1cdd68d 100644 --- 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 index 525eaf0a6..5ee8a0b48 100644 --- 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 index 1dcda9451..2025979e2 100644 --- 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 index 79aad0a7e..a2b7fc4a6 100644 --- 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 index 4a2a9ab76..cfb521871 100644 --- 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 index 1889d942a..563fe5b1d 100644 --- 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 index 2d5aec705..e2eaded95 100644 --- 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 index 47de31500..38ff3f997 100644 --- 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 index 493ea25bc..931f59df6 100644 --- 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 index 1369ea9fc..fd4c7fa6b 100644 --- a/src/themes/v9/global_styling/mixins/_form.scss +++ b/src/themes/v9/global_styling/mixins/_form.scss @@ -155,7 +155,7 @@ // 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; @@ -163,6 +163,14 @@ @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 index 131ec4a0a..547bbb205 100644 --- 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 index 2dea3434d..7a56793ed 100644 --- 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 index 93069c02b..0e3865be5 100644 --- 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 index 6186b6f3d..ee03eaddd 100644 --- 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;