Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 4 commits into from
Aug 27, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
5d5a9b0
fix: Updates to v9 colors, button/input styles, and typography
virajsanghvi Aug 25, 2024
311e743
update changelog
virajsanghvi Aug 25, 2024
79a6aea
update colors
virajsanghvi Aug 26, 2024
0a6d2b4
fix alias
virajsanghvi Aug 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
### 🐛 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 Down
17 changes: 14 additions & 3 deletions src/components/button/_button.scss
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
2 changes: 1 addition & 1 deletion src/components/date_picker/super_date_picker/_super_date_picker.scss
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
Loading