Skip to content

Commit

Permalink
fix: Updates to v9 colors, button/input styles, and typography (#1373) (
Browse files Browse the repository at this point in the history
#1377)

* fix: Updates to v9 colors, button/input styles, and typography

---------

Signed-off-by: Viraj Sanghvi <[email protected]>
(cherry picked from commit 1e69cc8)
  • Loading branch information
virajsanghvi authored Aug 27, 2024
1 parent 74a6aa2 commit dbab519
Show file tree
Hide file tree
Showing 16 changed files with 125 additions and 51 deletions.
14 changes: 10 additions & 4 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -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

Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -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",
Expand Down
17 changes: 14 additions & 3 deletions src/components/button/_button.scss
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,9 @@
// Our base button
.ouiButton {
@include ouiButton;
@include ouiSlightShadow;
@include ouiUseDefaultButtonShadows {
@include ouiSlightShadow;
}

border-radius: $ouiButtonBorderRadius;
min-width: $ouiButtonMinWidth;
Expand Down Expand Up @@ -123,7 +125,9 @@
$shadowColor: desaturate($color, 60%);
}

@include ouiSlightShadow($shadowColor);
@include ouiUseDefaultButtonShadows {
@include ouiSlightShadow($shadowColor);
}

&:hover,
&:focus,
Expand All @@ -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 {
Expand Down
4 changes: 3 additions & 1 deletion src/components/button/button_group/_button_group.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
17 changes: 14 additions & 3 deletions src/components/button/button_icon/_button_icon.scss
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,9 @@

.ouiButtonIcon {
@include ouiButton;
@include ouiSlightShadow;
@include ouiUseDefaultButtonShadows {
@include ouiSlightShadow;
}

border-radius: $ouiButtonBorderRadius;
width: $ouiButtonHeight;
Expand Down Expand Up @@ -121,7 +123,9 @@
$shadowColor: desaturate($color, 60%);
}

@include ouiSlightShadow($shadowColor);
@include ouiUseDefaultButtonShadows {
@include ouiSlightShadow($shadowColor);
}

&:hover,
&:focus,
Expand All @@ -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 {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@
}

.ouiSuperDatePicker__prettyFormatLink {
color: $ouiLinkColor;
color: $ouiColorPrimaryText;
padding-left: $ouiSizeXS; // Adds some separation between date text and link
flex-shrink: 0;
}
Expand Down
8 changes: 6 additions & 2 deletions src/components/form/switch/_switch.scss
Original file line number Diff line number Diff line change
Expand Up @@ -257,7 +257,9 @@
@each $name, $color in $ouiSwitchColors {
.ouiSwitch--#{$name} {
&.ouiSwitch--base {
@include ouiSlightShadow;
@include ouiUseDefaultButtonShadows {
@include ouiSlightShadow;
}
@include ouiButtonFocus;

border-color: $color;
Expand All @@ -282,7 +284,9 @@
$shadowColor: desaturate($color, 60%);
}

@include ouiSlightShadow($shadowColor);
@include ouiUseDefaultButtonShadows {
@include ouiSlightShadow($shadowColor);
}

&:hover,
&:focus,
Expand Down
13 changes: 11 additions & 2 deletions src/components/split_button/_split_button_control.scss
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,9 @@ $splitButtonSeparatorColor: shade($ouiColorPrimary, 50%);
$shadowColor: desaturate($color, 60%);
}

@include ouiSlightShadow($shadowColor);
@include ouiUseDefaultButtonShadows {
@include ouiSlightShadow($shadowColor);
}

&:hover,
&:focus,
Expand All @@ -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 {
Expand Down
7 changes: 7 additions & 0 deletions src/global_styling/mixins/_button.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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; }
Expand All @@ -145,4 +151,5 @@
border-color: ouiLoadingSpinnerBorderColors(currentColor);
}
}
@mixin euiUseDefaultButtonShadows($useShadows: true) { @include ouiUseDefaultButtonShadows($useShadows); }
/* End of Aliases */
7 changes: 7 additions & 0 deletions src/themes/oui-next/global_styling/mixins/_button.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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; }
Expand All @@ -146,4 +152,5 @@
border-color: ouiLoadingSpinnerBorderColors(currentColor);
}
}
@mixin euiUseDefaultButtonShadows($useShadows: true) { @include ouiUseDefaultButtonShadows($useShadows); }
/* End of Aliases */
7 changes: 7 additions & 0 deletions src/themes/v9/global_styling/mixins/_button.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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; }
Expand All @@ -146,4 +152,5 @@
border-color: ouiLoadingSpinnerBorderColors(currentColor);
}
}
@mixin euiUseDefaultButtonShadows($useShadows: false) { @include ouiUseDefaultButtonShadows($useShadows); }
/* End of Aliases */
12 changes: 10 additions & 2 deletions src/themes/v9/global_styling/mixins/_form.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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},
Expand Down Expand Up @@ -296,7 +304,7 @@
}

@mixin ouiFormControlStyleCompressed($borderOnly: false, $includeStates: true) {
@include ouiFormControlDefaultShadow($borderOnly: false);
@include ouiFormControlDefaultShadow($borderOnly: true);
padding: $ouiFormControlCompressedPadding;
border-radius: $ouiFormControlCompressedBorderRadius;

Expand Down
2 changes: 1 addition & 1 deletion src/themes/v9/global_styling/reset/_reset.scss
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ em {
font-style: italic;
}

strong {
b, strong {
font-weight: $ouiFontWeightBold;
}

Expand Down
6 changes: 4 additions & 2 deletions src/themes/v9/global_styling/variables/_buttons.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down
10 changes: 5 additions & 5 deletions src/themes/v9/global_styling/variables/_colors.scss
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ $ouiColorInk: #131313 !default;

// Core
$ouiColorPrimary: #003B5C !default;
$ouiColorSecondary: #0249D8 !default;
$ouiColorSecondary: #199863 !default;
$ouiColorAccent: #B92FC5 !default;

// Status
Expand Down Expand Up @@ -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

Expand Down
48 changes: 24 additions & 24 deletions src/themes/v9/v9_colors_dark.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down

0 comments on commit dbab519

Please sign in to comment.