From a45811b8ad2100e67a1b1a456402c32634370534 Mon Sep 17 00:00:00 2001 From: Viraj Sanghvi Date: Thu, 15 Aug 2024 21:25:24 -0700 Subject: [PATCH] feat: Add V9 Theme (#1344) * feat: Add V9 Theme Signed-off-by: Viraj Sanghvi * update changelog Signed-off-by: Viraj Sanghvi * update colors and typography Signed-off-by: Viraj Sanghvi --------- Signed-off-by: Viraj Sanghvi --- CHANGELOG.md | 1 + src-docs/src/index.js | 4 + src-docs/src/theme_v9_dark.scss | 21 + src-docs/src/theme_v9_light.scss | 21 + src/components/button/_button.scss | 2 +- .../button/button_group/_button_group.scss | 2 +- .../button_group/_button_group_button.scss | 6 +- .../button/button_icon/_button_icon.scss | 2 +- .../split_button/_split_button_control.scss | 2 +- src/global_styling/variables/_buttons.scss | 3 + src/theme_v9_dark.scss | 22 + src/theme_v9_light.scss | 22 + src/themes/charts/themes.ts | 41 ++ .../global_styling/variables/_buttons.scss | 3 + src/themes/themes.ts | 8 + .../global_styling/css_variables/_fonts.scss | 9 + .../global_styling/css_variables/_index.scss | 6 + .../v9/global_styling/functions/_colors.scss | 156 +++++++ .../v9/global_styling/functions/_index.scss | 16 + .../v9/global_styling/functions/_math.scss | 74 ++++ src/themes/v9/global_styling/index.scss | 30 ++ .../v9/global_styling/mixins/_beta_badge.scss | 71 +++ .../v9/global_styling/mixins/_button.scss | 131 ++++++ .../v9/global_styling/mixins/_form.scss | 414 ++++++++++++++++++ .../v9/global_styling/mixins/_header.scss | 62 +++ .../v9/global_styling/mixins/_helpers.scss | 160 +++++++ .../v9/global_styling/mixins/_icons.scss | 33 ++ .../v9/global_styling/mixins/_index.scss | 28 ++ .../v9/global_styling/mixins/_loading.scss | 27 ++ .../v9/global_styling/mixins/_panel.scss | 74 ++++ .../v9/global_styling/mixins/_popover.scss | 36 ++ .../v9/global_styling/mixins/_range.scss | 56 +++ .../v9/global_styling/mixins/_responsive.scss | 69 +++ .../v9/global_styling/mixins/_shadow.scss | 153 +++++++ .../v9/global_styling/mixins/_size.scss | 15 + .../v9/global_styling/mixins/_states.scss | 71 +++ .../v9/global_styling/mixins/_tool_tip.scss | 46 ++ .../v9/global_styling/mixins/_typography.scss | 168 +++++++ .../v9/global_styling/reset/_hacks.scss | 16 + .../v9/global_styling/reset/_index.scss | 14 + .../v9/global_styling/reset/_reset.scss | 165 +++++++ .../v9/global_styling/reset/_scrollbar.scss | 19 + .../global_styling/utility/_animations.scss | 66 +++ .../v9/global_styling/utility/_index.scss | 13 + .../v9/global_styling/utility/_utility.scss | 161 +++++++ .../global_styling/variables/_animations.scss | 35 ++ .../v9/global_styling/variables/_borders.scss | 34 ++ .../v9/global_styling/variables/_buttons.scss | 46 ++ .../variables/_collapsible_nav.scss | 36 ++ .../v9/global_styling/variables/_colors.scss | 277 ++++++++++++ .../v9/global_styling/variables/_form.scss | 143 ++++++ .../v9/global_styling/variables/_header.scss | 35 ++ .../v9/global_styling/variables/_index.scss | 37 ++ .../v9/global_styling/variables/_page.scss | 19 + .../v9/global_styling/variables/_panel.scss | 39 ++ .../global_styling/variables/_responsive.scss | 26 ++ .../v9/global_styling/variables/_shadows.scss | 21 + .../v9/global_styling/variables/_size.scss | 38 ++ .../v9/global_styling/variables/_states.scss | 36 ++ .../global_styling/variables/_tool_tip.scss | 25 ++ .../global_styling/variables/_typography.scss | 138 ++++++ .../v9/global_styling/variables/_z_index.scss | 68 +++ src/themes/v9/v9_colors_dark.scss | 102 +++++ src/themes/v9/v9_colors_light.scss | 13 + src/themes/v9/v9_globals.scss | 22 + wiki/consuming.md | 7 + 66 files changed, 3709 insertions(+), 7 deletions(-) create mode 100644 src-docs/src/theme_v9_dark.scss create mode 100644 src-docs/src/theme_v9_light.scss create mode 100644 src/theme_v9_dark.scss create mode 100644 src/theme_v9_light.scss create mode 100644 src/themes/v9/global_styling/css_variables/_fonts.scss create mode 100644 src/themes/v9/global_styling/css_variables/_index.scss create mode 100644 src/themes/v9/global_styling/functions/_colors.scss create mode 100644 src/themes/v9/global_styling/functions/_index.scss create mode 100644 src/themes/v9/global_styling/functions/_math.scss create mode 100644 src/themes/v9/global_styling/index.scss create mode 100644 src/themes/v9/global_styling/mixins/_beta_badge.scss create mode 100644 src/themes/v9/global_styling/mixins/_button.scss create mode 100644 src/themes/v9/global_styling/mixins/_form.scss create mode 100644 src/themes/v9/global_styling/mixins/_header.scss create mode 100644 src/themes/v9/global_styling/mixins/_helpers.scss create mode 100644 src/themes/v9/global_styling/mixins/_icons.scss create mode 100644 src/themes/v9/global_styling/mixins/_index.scss create mode 100644 src/themes/v9/global_styling/mixins/_loading.scss create mode 100644 src/themes/v9/global_styling/mixins/_panel.scss create mode 100644 src/themes/v9/global_styling/mixins/_popover.scss create mode 100644 src/themes/v9/global_styling/mixins/_range.scss create mode 100644 src/themes/v9/global_styling/mixins/_responsive.scss create mode 100644 src/themes/v9/global_styling/mixins/_shadow.scss create mode 100644 src/themes/v9/global_styling/mixins/_size.scss create mode 100644 src/themes/v9/global_styling/mixins/_states.scss create mode 100644 src/themes/v9/global_styling/mixins/_tool_tip.scss create mode 100644 src/themes/v9/global_styling/mixins/_typography.scss create mode 100644 src/themes/v9/global_styling/reset/_hacks.scss create mode 100644 src/themes/v9/global_styling/reset/_index.scss create mode 100644 src/themes/v9/global_styling/reset/_reset.scss create mode 100644 src/themes/v9/global_styling/reset/_scrollbar.scss create mode 100644 src/themes/v9/global_styling/utility/_animations.scss create mode 100644 src/themes/v9/global_styling/utility/_index.scss create mode 100644 src/themes/v9/global_styling/utility/_utility.scss create mode 100644 src/themes/v9/global_styling/variables/_animations.scss create mode 100644 src/themes/v9/global_styling/variables/_borders.scss create mode 100644 src/themes/v9/global_styling/variables/_buttons.scss create mode 100644 src/themes/v9/global_styling/variables/_collapsible_nav.scss create mode 100644 src/themes/v9/global_styling/variables/_colors.scss create mode 100644 src/themes/v9/global_styling/variables/_form.scss create mode 100644 src/themes/v9/global_styling/variables/_header.scss create mode 100644 src/themes/v9/global_styling/variables/_index.scss create mode 100644 src/themes/v9/global_styling/variables/_page.scss create mode 100644 src/themes/v9/global_styling/variables/_panel.scss create mode 100644 src/themes/v9/global_styling/variables/_responsive.scss create mode 100644 src/themes/v9/global_styling/variables/_shadows.scss create mode 100644 src/themes/v9/global_styling/variables/_size.scss create mode 100644 src/themes/v9/global_styling/variables/_states.scss create mode 100644 src/themes/v9/global_styling/variables/_tool_tip.scss create mode 100644 src/themes/v9/global_styling/variables/_typography.scss create mode 100644 src/themes/v9/global_styling/variables/_z_index.scss create mode 100644 src/themes/v9/v9_colors_dark.scss create mode 100644 src/themes/v9/v9_colors_light.scss create mode 100644 src/themes/v9/v9_globals.scss diff --git a/CHANGELOG.md b/CHANGELOG.md index e6a846d8f6..0ea6dd7669 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,7 @@ ### 🛡 Security ### 📈 Features/Enhancements +- Add V9 Theme ([#1344](https://github.com/opensearch-project/oui/pull/1344)) ### 🐛 Bug Fixes diff --git a/src-docs/src/index.js b/src-docs/src/index.js index 1efd1cbfec..f6edffe74a 100644 --- a/src-docs/src/index.js +++ b/src-docs/src/index.js @@ -26,6 +26,8 @@ import themeLight from './theme_light.scss'; import themeDark from './theme_dark.scss'; import themeNextLight from './theme_next_light.scss'; import themeNextDark from './theme_next_dark.scss'; +import themeV9Light from './theme_v9_light.scss'; +import themeV9Dark from './theme_v9_dark.scss'; import { ThemeProvider } from './components/with_theme/theme_context'; import ScrollToHash from './components/scroll_to_hash'; import { LinkWrapper } from './views/link_wrapper'; @@ -34,6 +36,8 @@ registerTheme('light', [themeLight]); registerTheme('dark', [themeDark]); registerTheme('next-light', [themeNextLight]); registerTheme('next-dark', [themeNextDark]); +registerTheme('v9-light', [themeV9Light]); +registerTheme('v9-dark', [themeV9Dark]); // Set up app diff --git a/src-docs/src/theme_v9_dark.scss b/src-docs/src/theme_v9_dark.scss new file mode 100644 index 0000000000..1c10ce0671 --- /dev/null +++ b/src-docs/src/theme_v9_dark.scss @@ -0,0 +1,21 @@ +/*! + * SPDX-License-Identifier: Apache-2.0 + * + * The OpenSearch Contributors require contributions made to + * this file be licensed under the Apache-2.0 license or a + * compatible open source license. + * + * Modifications Copyright OpenSearch Contributors. See + * GitHub history for details. + */ + +// sass-lint:disable no-url-domains, no-url-protocols +@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap'); + +@import '../../src/theme_v9_dark'; +@import './components/guide_components'; +@import './services/playground/index'; +@import './views/suggest/global_filter_group'; + +// Elastic charts +@import '../../src/themes/charts/theme'; diff --git a/src-docs/src/theme_v9_light.scss b/src-docs/src/theme_v9_light.scss new file mode 100644 index 0000000000..f073ed3054 --- /dev/null +++ b/src-docs/src/theme_v9_light.scss @@ -0,0 +1,21 @@ +/*! + * SPDX-License-Identifier: Apache-2.0 + * + * The OpenSearch Contributors require contributions made to + * this file be licensed under the Apache-2.0 license or a + * compatible open source license. + * + * Modifications Copyright OpenSearch Contributors. See + * GitHub history for details. + */ + +// sass-lint:disable no-url-domains, no-url-protocols +@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap'); + +@import '../../src/theme_v9_light'; +@import './components/guide_components'; +@import './services/playground/index'; +@import './views/suggest/global_filter_group'; + +// Elastic charts +@import '../../src/themes/charts/theme'; diff --git a/src/components/button/_button.scss b/src/components/button/_button.scss index 0632440c5a..96c3da0468 100644 --- a/src/components/button/_button.scss +++ b/src/components/button/_button.scss @@ -17,7 +17,7 @@ @include ouiButton; @include ouiSlightShadow; - border-radius: $ouiBorderRadius; + border-radius: $ouiButtonBorderRadius; min-width: $ouiButtonMinWidth; .ouiButton__content { diff --git a/src/components/button/button_group/_button_group.scss b/src/components/button/button_group/_button_group.scss index 38c166f296..525eaf0a62 100644 --- a/src/components/button/button_group/_button_group.scss +++ b/src/components/button/button_group/_button_group.scss @@ -29,7 +29,7 @@ .ouiButtonGroup__buttons { @include ouiSlightShadow; - border-radius: $ouiBorderRadius + 1px; // Simply for the box-shadow + border-radius: $ouiButtonBorderRadius + 1px; // Simply for the box-shadow max-width: 100%; display: flex; overflow: hidden; diff --git a/src/components/button/button_group/_button_group_button.scss b/src/components/button/button_group/_button_group_button.scss index e6ad2ca675..06ae9172dc 100644 --- a/src/components/button/button_group/_button_group_button.scss +++ b/src/components/button/button_group/_button_group_button.scss @@ -129,11 +129,11 @@ } &:first-child { - border-radius: $ouiBorderRadius 0 0 $ouiBorderRadius; + border-radius: $ouiButtonBorderRadius 0 0 $ouiButtonBorderRadius; } &:last-child { - border-radius: 0 $ouiBorderRadius $ouiBorderRadius 0; + border-radius: 0 $ouiButtonBorderRadius $ouiButtonBorderRadius 0; } } @@ -174,7 +174,7 @@ height: $ouiFormControlCompressedHeight - 2px; line-height: $ouiFormControlCompressedHeight - 2px; // prevents descenders from getting cut off font-size: $ouiFontSizeS; - border-radius: $ouiBorderRadius; + border-radius: $ouiButtonBorderRadius; // Offset the background color from the border by 2px // by clipping background to before the padding starts padding: 2px; diff --git a/src/components/button/button_icon/_button_icon.scss b/src/components/button/button_icon/_button_icon.scss index f09e15bd21..1dcda94516 100644 --- a/src/components/button/button_icon/_button_icon.scss +++ b/src/components/button/button_icon/_button_icon.scss @@ -16,7 +16,7 @@ @include ouiButton; @include ouiSlightShadow; - border-radius: $ouiBorderRadius; + border-radius: $ouiButtonBorderRadius; width: $ouiButtonHeight; // Ensures center alignment of any sized icon inside buttons and anchors diff --git a/src/components/split_button/_split_button_control.scss b/src/components/split_button/_split_button_control.scss index 22c26ac82a..1889d942a9 100644 --- a/src/components/split_button/_split_button_control.scss +++ b/src/components/split_button/_split_button_control.scss @@ -46,7 +46,7 @@ $splitButtonSeparatorColor: shade($ouiColorPrimary, 50%); .ouiSplitButtonControl { border: $ouiBorderWidthThick solid $ouiBorderColor; - border-radius: $ouiBorderRadius; + border-radius: $ouiButtonBorderRadius; } // Create button modifiers based upon the map. diff --git a/src/global_styling/variables/_buttons.scss b/src/global_styling/variables/_buttons.scss index 22cda2773b..0830c0fdf2 100644 --- a/src/global_styling/variables/_buttons.scss +++ b/src/global_styling/variables/_buttons.scss @@ -18,6 +18,8 @@ $ouiButtonColorDisabled: tintOrShade($ouiTextColor, 70%, 70%) !default; $ouiButtonColorDisabledText: makeDisabledContrastColor($ouiButtonColorDisabled) !default; $ouiButtonColorGhostDisabled: lightOrDarkTheme($ouiColorDarkShade, $ouiColorLightShade) !default; +$ouiButtonBorderRadius: $ouiBorderRadius !default; + // Modifier naming and colors. $ouiButtonTypes: ( primary: $ouiColorPrimary, @@ -39,5 +41,6 @@ $euiButtonHeightXSmall: $ouiButtonHeightXSmall; $euiButtonColorDisabled: $ouiButtonColorDisabled; $euiButtonColorDisabledText: $ouiButtonColorDisabledText; $euiButtonColorGhostDisabled: $ouiButtonColorGhostDisabled; +$euiButtonBorderRadius: $ouiButtonBorderRadius; $euiButtonTypes: $ouiButtonTypes; /* End of Aliases */ diff --git a/src/theme_v9_dark.scss b/src/theme_v9_dark.scss new file mode 100644 index 0000000000..ca0b1e7c70 --- /dev/null +++ b/src/theme_v9_dark.scss @@ -0,0 +1,22 @@ +/*! + * SPDX-License-Identifier: Apache-2.0 + * + * The OpenSearch Contributors require contributions made to + * this file be licensed under the Apache-2.0 license or a + * compatible open source license. + * + * Modifications Copyright OpenSearch Contributors. See + * GitHub history for details. + */ + +// These are variable overwrites used only for this theme. +@import 'themes/v9/v9_colors_dark'; + +// Global styling +@import 'themes/v9/global_styling/index'; + +// Components +@import 'components/index'; + +// Packages +@import '../packages/index'; diff --git a/src/theme_v9_light.scss b/src/theme_v9_light.scss new file mode 100644 index 0000000000..5e263fcaf4 --- /dev/null +++ b/src/theme_v9_light.scss @@ -0,0 +1,22 @@ +/*! + * SPDX-License-Identifier: Apache-2.0 + * + * The OpenSearch Contributors require contributions made to + * this file be licensed under the Apache-2.0 license or a + * compatible open source license. + * + * Modifications Copyright OpenSearch Contributors. See + * GitHub history for details. + */ + +// This is the default theme. +@import 'themes/v9/v9_colors_light'; + +// Global styling +@import 'themes/v9/global_styling/index'; + +// Components +@import 'components/index'; + +// Packages +@import '../packages/index'; diff --git a/src/themes/charts/themes.ts b/src/themes/charts/themes.ts index afdf8cf73a..7f6cc6ee5f 100644 --- a/src/themes/charts/themes.ts +++ b/src/themes/charts/themes.ts @@ -84,6 +84,29 @@ import { const ouiNextFontFamily = "'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'"; +// @ts-ignore typescript doesn't understand the babel preprocessor +import { + ouiColorChartBand as ouiV9ColorChartBand, + ouiColorChartLines as ouiV9ColorChartLines, + ouiColorDarkShade as ouiV9ColorDarkShade, + ouiColorDarkestShade as ouiV9ColorDarkestShade, + ouiColorEmptyShade as ouiV9ColorEmptyShade, + // @ts-ignore typescript doesn't understand the babel preprocessor +} from '!!variables-from-scss!!../v9/global_styling/variables/_colors.scss'; + +// @ts-ignore typescript doesn't understand the babel preprocessor +import { + ouiColorChartBand as ouiV9ColorChartBandDark, + ouiColorChartLines as ouiV9ColorChartLinesDark, + ouiColorDarkShade as ouiV9ColorDarkShadeDark, + ouiColorDarkestShade as ouiV9ColorDarkestShadeDark, + ouiColorEmptyShade as ouiV9ColorEmptyShadeDark, + // @ts-ignore typescript doesn't understand the babel preprocessor +} from '!!variables-from-scss!!../v9/v9_colors_dark.scss'; + +const ouiV9FontFamily = + "'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'"; + export interface OuiChartThemeType { lineAnnotation: LineAnnotationStyle; theme: PartialTheme; @@ -269,6 +292,22 @@ export const OUI_CHARTS_NEXT_THEME_DARK: OuiChartThemeType = createTheme({ ouiColorEmptyShade: ouiNextColorEmptyShadeDark, ouiFontFamily: ouiNextFontFamily, }); +export const OUI_CHARTS_V9_THEME_LIGHT: OuiChartThemeType = createTheme({ + ouiColorChartBand: ouiV9ColorChartBand, + ouiColorChartLines: ouiV9ColorChartLines, + ouiColorDarkShade: ouiV9ColorDarkShade, + ouiColorDarkestShade: ouiV9ColorDarkestShade, + ouiColorEmptyShade: ouiV9ColorEmptyShade, + ouiFontFamily: ouiV9FontFamily, +}); +export const OUI_CHARTS_V9_THEME_DARK: OuiChartThemeType = createTheme({ + ouiColorChartBand: ouiV9ColorChartBandDark, + ouiColorChartLines: ouiV9ColorChartLinesDark, + ouiColorDarkShade: ouiV9ColorDarkShadeDark, + ouiColorDarkestShade: ouiV9ColorDarkestShadeDark, + ouiColorEmptyShade: ouiV9ColorEmptyShadeDark, + ouiFontFamily: ouiV9FontFamily, +}); export const OUI_SPARKLINE_THEME_PARTIAL: PartialTheme = { lineSeriesStyle: { @@ -293,5 +332,7 @@ export const EUI_CHARTS_THEME_LIGHT = OUI_CHARTS_THEME_LIGHT; export const EUI_CHARTS_THEME_DARK = OUI_CHARTS_THEME_DARK; export const EUI_CHARTS_NEXT_THEME_LIGHT = OUI_CHARTS_NEXT_THEME_LIGHT; export const EUI_CHARTS_NEXT_THEME_DARK = OUI_CHARTS_NEXT_THEME_DARK; +export const EUI_CHARTS_V9_THEME_LIGHT = OUI_CHARTS_V9_THEME_LIGHT; +export const EUI_CHARTS_V9_THEME_DARK = OUI_CHARTS_V9_THEME_DARK; export const EUI_SPARKLINE_THEME_PARTIAL = OUI_SPARKLINE_THEME_PARTIAL; /* End of Aliases */ diff --git a/src/themes/oui-next/global_styling/variables/_buttons.scss b/src/themes/oui-next/global_styling/variables/_buttons.scss index 22cda2773b..0830c0fdf2 100644 --- a/src/themes/oui-next/global_styling/variables/_buttons.scss +++ b/src/themes/oui-next/global_styling/variables/_buttons.scss @@ -18,6 +18,8 @@ $ouiButtonColorDisabled: tintOrShade($ouiTextColor, 70%, 70%) !default; $ouiButtonColorDisabledText: makeDisabledContrastColor($ouiButtonColorDisabled) !default; $ouiButtonColorGhostDisabled: lightOrDarkTheme($ouiColorDarkShade, $ouiColorLightShade) !default; +$ouiButtonBorderRadius: $ouiBorderRadius !default; + // Modifier naming and colors. $ouiButtonTypes: ( primary: $ouiColorPrimary, @@ -39,5 +41,6 @@ $euiButtonHeightXSmall: $ouiButtonHeightXSmall; $euiButtonColorDisabled: $ouiButtonColorDisabled; $euiButtonColorDisabledText: $ouiButtonColorDisabledText; $euiButtonColorGhostDisabled: $ouiButtonColorGhostDisabled; +$euiButtonBorderRadius: $ouiButtonBorderRadius; $euiButtonTypes: $ouiButtonTypes; /* End of Aliases */ diff --git a/src/themes/themes.ts b/src/themes/themes.ts index 6de0e1a922..9b973ff37c 100644 --- a/src/themes/themes.ts +++ b/src/themes/themes.ts @@ -50,6 +50,14 @@ export const OUI_THEMES: OUI_THEME[] = [ text: 'Next Dark', value: 'next-dark', }, + { + text: 'v9 Light', + value: 'v9-light', + }, + { + text: 'v9 Dark', + value: 'v9-dark', + }, ]; /* OUI -> EUI Aliases */ diff --git a/src/themes/v9/global_styling/css_variables/_fonts.scss b/src/themes/v9/global_styling/css_variables/_fonts.scss new file mode 100644 index 0000000000..4699a9bac2 --- /dev/null +++ b/src/themes/v9/global_styling/css_variables/_fonts.scss @@ -0,0 +1,9 @@ +/*! + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +:root { + --oui-font-family: #{$ouiFontFamily}; + --oui-code-font-family: #{$ouiCodeFontFamily}; +} diff --git a/src/themes/v9/global_styling/css_variables/_index.scss b/src/themes/v9/global_styling/css_variables/_index.scss new file mode 100644 index 0000000000..d9d76577cf --- /dev/null +++ b/src/themes/v9/global_styling/css_variables/_index.scss @@ -0,0 +1,6 @@ +/*! + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +@import 'fonts'; diff --git a/src/themes/v9/global_styling/functions/_colors.scss b/src/themes/v9/global_styling/functions/_colors.scss new file mode 100644 index 0000000000..57acc7f8fa --- /dev/null +++ b/src/themes/v9/global_styling/functions/_colors.scss @@ -0,0 +1,156 @@ +/*! + * SPDX-License-Identifier: Apache-2.0 + * + * The OpenSearch Contributors require contributions made to + * this file be licensed under the Apache-2.0 license or a + * compatible open source license. + * + * Modifications Copyright OpenSearch Contributors. See + * GitHub history for details. + */ + +// Converting a normal hex color to RBG +@function hexToRGB($color) { + @return 'rgb%28#{round(red($color))}, #{round(green($color))}, #{round(blue($color))}%29'; +} + +// Mixes a provided color with white. +@function tint($color, $percent) { + @return mix($ouiColorGhost, $color, $percent); +} + +// Mixes a provided color with black. +@function shade($color, $percent) { + @return mix($ouiColorInk, $color, $percent); +} + +// For theming. Checks the text color and tells us whether it's light or dark. +// Based on that we either tint (add white) or shade (add black). +@function tintOrShade($color, $tint, $shade) { + @if (lightness($ouiTextColor) > 50) { + @return shade($color, $shade); + } @else { + @return tint($color, $tint); + } +} + +// The reverse of the above +@function shadeOrTint($color, $shade, $tint) { + @if (lightness($ouiTextColor) < 50) { + @return shade($color, $shade); + } @else { + @return tint($color, $tint); + } +} + +// Similar to above, but uses the light or dark color based +// on whether it's the light or dark theme +@function lightOrDarkTheme($lightColor, $darkColor) { + @if (lightness($ouiTextColor) < 50) { + @return $lightColor; + } @else { + @return $darkColor; + } +} + +// Calculates luminance, which is better than brightness for checking colors +// pow, nth functions come from the _math.scss functions +@function luminance($color) { + // Formula: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef + $rgba: red($color), green($color), blue($color); + $rgba2: (); + + @for $i from 1 through 3 { + $rgb: nth($rgba, $i); + $rgb: calc($rgb / 255); + + $rgb: if($rgb < .03928, calc($rgb / 12.92), pow(calc(($rgb + .055) / 1.055), 2.4)); + + $rgba2: append($rgba2, $rgb); + } + + @return .2126 * nth($rgba2, 1) + .7152 * nth($rgba2, 2) + .0722 * nth($rgba2, 3); +} + +// Calculate contrast +@function contrastRatio($background, $foreground) { + $backgroundLum: luminance($background) + .05; + $foregroundLum: luminance($foreground) + .05; + + @return calc(max($backgroundLum, $foregroundLum) / min($backgroundLum, $foregroundLum)); +} + +// Given $color, decide whether $lightText or $darkText should be used as the text color +// ex: chooseLightOrDarkText(#EEE, #FFF, #000) would return #000 because it has +// a higher contrast than #FFF against a #EEE background. +@function chooseLightOrDarkText($background, $lightText, $darkText) { + $lightContrast: contrastRatio($background, $lightText); + $darkContrast: contrastRatio($background, $darkText); + + @if ($lightContrast > $darkContrast) { + @return $lightText; + } @else { + @return $darkText; + } +} + +// Given a $foreground and a $background, make the $foreground AA accessibility by slightly +// adjusting it till the contrast is high enough +// By default it will compare against the page background color + +// ex: makeContrastColor($lightPink, #FFF) would continually shade the pink until +// it had higher than 4.5 contrast on a white background. +$ouiContrastRatioText: 4.5; +@function makeHighContrastColor($foreground, $background: $ouiPageBackgroundColor, $ratio: $ouiContrastRatioText) { + $contrast: contrastRatio($foreground, $background); + + // Determine the lightness factor of the background color first to + // determine whether to shade or tint the foreground. + $brightness: lightness($background); + + $highContrastTextColor: $foreground; + + @while ($contrast < $ratio) { + @if ($brightness > 50) { + $highContrastTextColor: shade($highContrastTextColor, 5%); + } @else { + $highContrastTextColor: tint($highContrastTextColor, 5%); + } + + $contrast: contrastRatio($highContrastTextColor, $background); + + @if (lightness($highContrastTextColor) < 5) { + @warn 'High enough contrast could not be determined. Most likely your background color does not adjust for light mode.'; + @return $highContrastTextColor; + } + + @if (lightness($highContrastTextColor) > 95) { + @warn 'High enough contrast could not be determined. Most likely your background color does not adjust for dark mode.'; + @return $highContrastTextColor; + } + } + + @return $highContrastTextColor; +} + +// Graphics such as stand alone icons and pieces of a graph only need a minimum ratio of 3:1 with its background. +// Therefore, we can reuse the `makeHighContrastColor()` function but only attain a min contrast of 3.0. +// It is still recommended to use `makeHighContrastColor()` to attain a 4.5:1 ratio if the graphic is small or thinly stroked. +// https://www.w3.org/WAI/GL/low-vision-a11y-tf/wiki/Informational_Graphic_Contrast_(Minimum) +$ouiContrastRatioGraphic: 3; +@function makeGraphicContrastColor($color, $background: $ouiPageBackgroundColor) { + @return makeHighContrastColor($color, $background, $ouiContrastRatioGraphic); +} + +// Disabled content only needs a contrast of at least 2 because there is no interaction available +$ouiContrastRatioDisabled: 2; +@function makeDisabledContrastColor($color, $background: $ouiPageBackgroundColor) { + @return makeHighContrastColor($color, $background, $ouiContrastRatioDisabled); +} + + +/* OUI -> EUI Aliases */ +$euiContrastRatioText: $ouiContrastRatioText; +$euiContrastRatioGraphic: $ouiContrastRatioGraphic; +$euiContrastRatioDisabled: $ouiContrastRatioDisabled; +/* End of Aliases */ diff --git a/src/themes/v9/global_styling/functions/_index.scss b/src/themes/v9/global_styling/functions/_index.scss new file mode 100644 index 0000000000..214ff981ef --- /dev/null +++ b/src/themes/v9/global_styling/functions/_index.scss @@ -0,0 +1,16 @@ +/*! + * SPDX-License-Identifier: Apache-2.0 + * + * The OpenSearch Contributors require contributions made to + * this file be licensed under the Apache-2.0 license or a + * compatible open source license. + * + * Modifications Copyright OpenSearch Contributors. See + * GitHub history for details. + */ + +// Math needs to be first in the load order +@import 'math'; + +// Using math, we have functions to manipulate contrast / luminosity for accessibility +@import 'colors'; diff --git a/src/themes/v9/global_styling/functions/_math.scss b/src/themes/v9/global_styling/functions/_math.scss new file mode 100644 index 0000000000..0079e79eb2 --- /dev/null +++ b/src/themes/v9/global_styling/functions/_math.scss @@ -0,0 +1,74 @@ +/*! + * SPDX-License-Identifier: Apache-2.0 + * + * The OpenSearch Contributors require contributions made to + * this file be licensed under the Apache-2.0 license or a + * compatible open source license. + * + * Modifications Copyright OpenSearch Contributors. See + * GitHub history for details. + */ + +//https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/pow +@function pow($number, $power) { + @if ($power != $power or ($power != 0 and $power == calc($power / 2))) { + @return $power; + } + @if ($power == 1) { + @return $number; + } + @if ($power == 0) { + @return 1; + } + @if ($power < 0) { + @return 1 / pow($number, -$power); + } + @if (0 < $power and $power < 2) { + $hasLeadingOne: false; + @if (floor($power) == 1) { + $power: $power - 1; + $hasLeadingOne: true; + } @else { + $hasLeadingOne: false; + } + $doublePower: pow($number, $power * 2); + $fullPower: nthRoot($doublePower, 2); + @if ($hasLeadingOne) { + $fullPower: $fullPower * $number; + } + @return $fullPower; + } @else if (getDecimal($power) != 0) { + $wholePower: floor($power); + $decimalPower: getDecimal($power); + @return pow($number, $wholePower) * pow($number, $decimalPower); + } @else { + $hasTrailingOne: $power % 2 == 1; + @if ($hasTrailingOne) { + $power: $power - 1; + } + $halfPower: pow($number, floor(calc($power / 2))); + $fullPower: $halfPower * $halfPower; + @if ($hasTrailingOne) { + $fullPower: $fullPower * $number; + } + @return $fullPower; + } +} + +@function getDecimal($number) { + @if ($number < 0) { + $number: -$number; + } + @return $number % 1; +} + +// From: http://rosettacode.org/wiki/Nth_root#JavaScript +@function nthRoot($num, $n: 2, $prec: 12) { + $x: 1; + + @for $i from 0 through $prec { + $x: calc(1 / $n) * (($n - 1) * $x + calc($num / pow($x, $n - 1))); + } + + @return $x; +} diff --git a/src/themes/v9/global_styling/index.scss b/src/themes/v9/global_styling/index.scss new file mode 100644 index 0000000000..c4311847f7 --- /dev/null +++ b/src/themes/v9/global_styling/index.scss @@ -0,0 +1,30 @@ +/*! + * SPDX-License-Identifier: Apache-2.0 + * + * The OpenSearch Contributors require contributions made to + * this file be licensed under the Apache-2.0 license or a + * compatible open source license. + * + * Modifications Copyright OpenSearch Contributors. See + * GitHub history for details. + */ + +// Core + +// Functions need to be first, since we use them in our variables and mixin definitions +@import 'functions/index'; + +// Variables come next, and are used in some mixins +@import 'variables/index'; + +// Mixins provide generic code expansion through helpers +@import 'mixins/index'; + +// Utility classes provide one-off selectors for common css problems +@import 'utility/index'; + +// CSS variables of SCSS variables +@import 'css_variables/index'; + +// The reset file makes use of variables and mixins +@import 'reset/index'; diff --git a/src/themes/v9/global_styling/mixins/_beta_badge.scss b/src/themes/v9/global_styling/mixins/_beta_badge.scss new file mode 100644 index 0000000000..eb19151ee3 --- /dev/null +++ b/src/themes/v9/global_styling/mixins/_beta_badge.scss @@ -0,0 +1,71 @@ +/*! + * SPDX-License-Identifier: Apache-2.0 + * + * The OpenSearch Contributors require contributions made to + * this file be licensed under the Apache-2.0 license or a + * compatible open source license. + * + * Modifications Copyright OpenSearch Contributors. See + * GitHub history for details. + */ + + +// 1. Extend beta badges to at least 30% of the container's width +// 2. Fix for IE to ensure badges are visible outside of a +// 1. Apply margin to all but last item in the flex. +// 2. Margin gets flipped because of the row-reverse. +@mixin ouiButtonContent($isReverse: false) { + height: 100%; + width: 100%; + vertical-align: middle; + + .ouiButtonContent__icon, + .ouiButtonContent__spinner { + flex-shrink: 0; // Ensures the icons/spinner don't scale down below their intended size + } + + @if ($isReverse) { + flex-direction: row-reverse; + + > * + * { + margin-inline-start: 0; // 1, 2 + margin-inline-end: $ouiSizeS; // 1, 2 + } + } @else { + display: flex; + justify-content: center; + align-items: center; + + > * + * { + margin-inline-start: $ouiSizeS; // 1 + } + } +} + +@mixin ouiButtonContentDisabled { + pointer-events: auto; + cursor: not-allowed; + + .ouiButtonContent__icon { + fill: currentColor; + } + + .ouiButtonContent__spinner { + border-color: ouiLoadingSpinnerBorderColors(currentColor); + } +} + +// Keyframe animation declarations can be found in +// utility/animations.scss + + +/* OUI -> EUI Aliases */ +@mixin euiButtonBase { @include ouiButtonBase; } +@mixin euiButtonFocus { @include ouiButtonFocus; } +@mixin euiButton { @include ouiButton; } +@mixin euiButtonContent($isReverse: false) { + @include ouiButtonContent($isReverse); + + .euiButtonContent__icon, + .euiButtonContent__spinner { + flex-shrink: 0; // Ensures the icons/spinner don't scale down below their intended size + } +} +@mixin euiButtonContentDisabled { + @include ouiButtonContentDisabled; + + .euiButtonContent__icon { + fill: currentColor; + } + + .euiButtonContent__spinner { + border-color: ouiLoadingSpinnerBorderColors(currentColor); + } +} +/* End of Aliases */ diff --git a/src/themes/v9/global_styling/mixins/_form.scss b/src/themes/v9/global_styling/mixins/_form.scss new file mode 100644 index 0000000000..1369ea9fcb --- /dev/null +++ b/src/themes/v9/global_styling/mixins/_form.scss @@ -0,0 +1,414 @@ +/*! + * SPDX-License-Identifier: Apache-2.0 + * + * The OpenSearch Contributors require contributions made to + * this file be licensed under the Apache-2.0 license or a + * compatible open source license. + * + * Modifications Copyright OpenSearch Contributors. See + * GitHub history for details. + */ + +// Labels +@mixin ouiFormLabel { + @include ouiFontSizeXS; + color: $ouiTitleColor; + font-weight: $ouiFontWeightSemiBold; +} + +@mixin ouiFormControlLayoutPadding($numOfIcons, $side: 'right', $compressed: false) { + $iconSize: $ouiSize; + $iconPadding: $ouiFormControlPadding; + $marginBetweenIcons: calc($ouiFormControlPadding / 2); + @if ($compressed) { + $iconPadding: $ouiFormControlCompressedPadding; + } + + @if variable-exists(numOfIcons) == false { + @error '$numOfIcons:integer (1-3) must be provided to @mixin ouiFormControlLayoutPadding().'; + } @else if $numOfIcons == 1 { + padding-#{$side}: $iconPadding + $iconSize + $iconPadding; + } @else if $numOfIcons == 2 { + padding-#{$side}: $iconPadding + $iconSize + $marginBetweenIcons + $iconSize + $iconPadding; + } @else if $numOfIcons == 3 { + padding-#{$side}: $iconPadding + $iconSize + $marginBetweenIcons + $iconSize + $marginBetweenIcons + $iconSize + $iconPadding; + } +} + +@mixin ouiFormControlLayoutClearIcon($iconClass, $size: 'm') { + $clearSize: $ouiSize; + $clearIconStroke: 2px; + + @if ($size == 's') { + $clearSize: $ouiSizeM; + $clearIconStroke: $ouiSizeXS; + } + + @include size($clearSize); + pointer-events: all; + background-color: lightOrDarkTheme($ouiColorMediumShade, $ouiColorDarkShade); + border-radius: $clearSize; + line-height: 0; // ensures the icon stays vertically centered + + &:focus { + @include ouiFocusRing; + } + + #{$iconClass} { + @include size(calc($clearSize / 2)); + fill: $ouiColorEmptyShade; + // increase thickness of icon at such a small size + stroke: $ouiColorEmptyShade; + stroke-width: $clearIconStroke; + } +} + +@mixin ouiPlaceholderPerBrowser { + // sass-lint:disable-block no-vendor-prefixes + // Each prefix must be its own content block + &::-webkit-input-placeholder { @content; opacity: 1; } + &::-moz-placeholder { @content; opacity: 1; } + &:-ms-input-placeholder { @content; opacity: 1; } + &:-moz-placeholder { @content; opacity: 1; } + &::placeholder { @content; opacity: 1; } +} + +@function ouiFormControlGradient($color: $ouiColorPrimary) { + @return linear-gradient(to top, + $color, + $color 2px, + transparent 2px, + transparent 100% + ); +} + +@mixin ouiFormControlText { + @include ouiFont; + font-size: $ouiFontSizeS; + color: $ouiTextColor; + + @include internetExplorerOnly { + line-height: 1em; // fixes text alignment in IE + } + + // sass-lint:disable-block mixins-before-declarations + @include ouiPlaceholderPerBrowser { + color: $ouiFormControlPlaceholderText; + } +} + +@mixin ouiFormControlSize( + $height: $ouiFormControlHeight, + $includeAlternates: false +) { + // Default + max-width: $ouiFormMaxWidth; + width: 100%; + height: $height; + + @if ($includeAlternates) { + &--fullWidth { + max-width: 100%; + } + + &--compressed { + height: $ouiFormControlCompressedHeight; + } + + &--inGroup { + height: 100%; + } + } +} + +@mixin ouiFormControlWithIcon($isIconOptional: false, $side: 'left', $compressed: false) { + @if ($isIconOptional) { + @at-root { + #{&}--withIcon { + @include ouiFormControlLayoutPadding(1, $side, $compressed); + } + } + } @else { + @include ouiFormControlLayoutPadding(1, $side, $compressed); + } +} + +@mixin ouiFormControlIsLoading($isNextToIcon: false) { + @at-root { + #{&}-isLoading { + @if ($isNextToIcon) { + @include ouiFormControlLayoutPadding(2); + } @else { + @include ouiFormControlLayoutPadding(1); + } + } + + #{&}-isLoading#{&}--compressed { + @if ($isNextToIcon) { + @include ouiFormControlLayoutPadding(2, $compressed: true); + } @else { + @include ouiFormControlLayoutPadding(1, $compressed: true); + } + } + } +} + +// 1. Must supply both values to background-size or some browsers apply the single value to both directions + +@mixin ouiFormControlDefaultShadow($borderOnly: false) { + // 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; + } @else { + box-shadow: + #{$ouiFormControlBoxShadow}, + inset 0 0 0 1px $ouiFormBorderColor; + } + + transition: + box-shadow $ouiAnimSpeedFast ease-in, + background-image $ouiAnimSpeedFast ease-in, + background-size $ouiAnimSpeedFast ease-in, + background-color $ouiAnimSpeedFast ease-in; + + // Fixes bug in Firefox where adding a transition to the background-color + // caused a flash of differently styled dropdown. + @supports (-moz-appearance: none) { // sass-lint:disable-line no-vendor-prefixes + // List *must* be in the same order as the above. + transition-property: box-shadow, background-image, background-size; + } +} + +@mixin ouiFormControlFocusStyle($borderOnly: false) { + // sass-lint:disable-block indentation, empty-args + background-color: tintOrShade($ouiColorEmptyShade, 0%, 40%); + background-image: ouiFormControlGradient(); + background-size: 100% 100%; // 1 + + @if ($borderOnly) { + box-shadow: inset 0 0 0 1px $ouiFormBorderColor; + } @else { + box-shadow: + 0 1px 1px -1px transparentize($ouiShadowColor, .8), + 0 4px 4px -2px transparentize($ouiShadowColor, .8), + inset 0 0 0 1px $ouiFormBorderColor; + } +} + +@mixin ouiFormControlInvalidStyle { + background-image: ouiFormControlGradient($ouiColorDanger); + background-size: 100%; +} + +@mixin ouiFormControlDisabledTextStyle { + // sass-lint:disable-block no-vendor-prefixes + color: $ouiFormControlDisabledColor; + -webkit-text-fill-color: $ouiFormControlDisabledColor; // Required for Safari +} + +@mixin ouiFormControlDisabledStyle { + @include ouiFormControlDisabledTextStyle; + cursor: not-allowed; + background: $ouiFormBackgroundDisabledColor; + box-shadow: inset 0 0 0 1px $ouiFormBorderDisabledColor; + + // sass-lint:disable-block mixins-before-declarations + @include ouiPlaceholderPerBrowser { + color: $ouiFormControlDisabledColor; + } +} + +@mixin ouiFormControlReadOnlyStyle { + cursor: default; + // Use transparency since there is no border and in case form is on a non-white background + background: $ouiFormBackgroundReadOnlyColor; + border-color: transparent; + box-shadow: inset 0 0 0 1px $ouiFormBorderDisabledColor; +} + + +// 2. Override invalid state with focus state. + +@mixin ouiFormControlStyle($borderOnly: false, $includeStates: true, $includeSizes: true) { + @include ouiFormControlSize($includeAlternates: $includeSizes); + @include ouiFormControlDefaultShadow; + @include ouiFormControlText; + + border: none; + border-radius: $ouiFormControlBorderRadius; + padding: $ouiFormControlPadding; + + @if ($includeStates) { + &:invalid { // 2 + @include ouiFormControlInvalidStyle; + } + + &:focus { // 2 + @include ouiFormControlFocusStyle; + } + + &:disabled { + @include ouiFormControlDisabledStyle; + } + + &[readOnly] { + @include ouiFormControlReadOnlyStyle; + } + + // Needs to be set for autofill + // sass-lint:disable-block no-vendor-prefixes + &:-webkit-autofill, + &:autofill { + /* Many browsers use `!important` in their built-in `:-webkit-autofill` style declarations, + * making their colors non-overridable. `-webkit-text-fill-color` is able to overwrite the + * appearance of texts and is used here as a workaround. + */ + -webkit-text-fill-color: $ouiTextColor; + + ~ .ouiFormControlLayoutIcons { + color: $ouiTextColor; + } + + /* OUI -> EUI Aliases */ + ~ .euiFormControlLayoutIcons { + color: $ouiTextColor; + } + /* End of Aliases */ + } + + } + + @if ($includeSizes) { + &--compressed { + @include ouiFormControlStyleCompressed($borderOnly, $includeStates); + } + + &--inGroup { + // sass-lint:disable-block no-important + box-shadow: none !important; + border-radius: 0; + } + } +} + +@mixin ouiFormControlStyleCompressed($borderOnly: false, $includeStates: true) { + @include ouiFormControlDefaultShadow($borderOnly: false); + padding: $ouiFormControlCompressedPadding; + border-radius: $ouiFormControlCompressedBorderRadius; + + @if ($includeStates) { + &:invalid { // 2 + @include ouiFormControlInvalidStyle; + } + + &:focus { // 2 + @include ouiFormControlFocusStyle($borderOnly: true); + } + + &:disabled { + @include ouiFormControlDisabledStyle; + } + + &[readOnly] { + @include ouiFormControlReadOnlyStyle; + } + } +} + +// Custom styles and states for checkboxes and radios + +@mixin ouiCustomControl($type: null, $size: $ouiSize) { + @include ouiSlightShadow; + + @if $size { + $size: $size - 2px; // subtract 2px from size to account for border size + padding: calc($size / 2); + } + + border: 1px solid $ouiFormCustomControlBorderColor; + background: $ouiColorEmptyShade no-repeat center; + + @if $type == 'round' { + border-radius: $size; + } @else if $type == 'square' { + border-radius: $ouiCheckboxBorderRadius; + } + // sass-lint:disable-block indentation + transition: background-color $ouiAnimSpeedFast ease-in, + border-color $ouiAnimSpeedFast ease-in; +} + +@mixin ouiCustomControlSelected($type: null) { + border-color: $ouiColorPrimary; + background-color: $ouiColorPrimary; + + @if $type != null { + @include ouiIconBackground($type, $ouiColorEmptyShade); + } +} + +@mixin ouiCustomControlDisabled($type: null) { + border-color: $ouiColorLightShade; + background-color: $ouiColorLightShade; + box-shadow: none; + @if $type != null { + @include ouiIconBackground($type, $ouiFormCustomControlDisabledIconColor); + } +} + +@mixin ouiCustomControlFocused { + @include ouiFocusRing('small'); + border-color: $ouiColorPrimary; +} + +@mixin ouiHiddenSelectableInput { + position: absolute; + // sass-lint:disable no-important + opacity: 0 !important; // Make sure it's still hidden when :disabled + width: 100%; + height: 100%; + cursor: pointer; +} + + + +/* OUI -> EUI Aliases */ +@mixin euiFormLabel { @include ouiFormLabel; } +@mixin euiFormControlLayoutPadding($numOfIcons, $side: 'right', $compressed: false) { @include ouiFormControlLayoutPadding($numOfIcons, $side, $compressed); } +@mixin euiFormControlLayoutClearIcon($iconClass, $size: 'm') { @include ouiFormControlLayoutClearIcon($iconClass, $size); } +@mixin euiPlaceholderPerBrowser { + @include ouiPlaceholderPerBrowser { + @content; + } +} +@function euiFormControlGradient($color: $ouiColorPrimary) { @return ouiFormControlGradient($color); } +@mixin euiFormControlText { @include ouiFormControlText; } +@mixin euiFormControlSize( + $height: $ouiFormControlHeight, + $includeAlternates: false +) { + @include ouiFormControlSize( + $height, + $includeAlternates + ); +} +@mixin euiFormControlWithIcon($isIconOptional: false, $side: 'left', $compressed: false) { @include ouiFormControlWithIcon($isIconOptional, $side, $compressed); } +@mixin euiFormControlIsLoading($isNextToIcon: false) { @include ouiFormControlIsLoading($isNextToIcon); } +@mixin euiFormControlDefaultShadow($borderOnly: false) { @include ouiFormControlDefaultShadow($borderOnly); } +@mixin euiFormControlFocusStyle($borderOnly: false) { @include ouiFormControlFocusStyle($borderOnly); } +@mixin euiFormControlInvalidStyle { @include ouiFormControlInvalidStyle; } +@mixin euiFormControlDisabledTextStyle { @include ouiFormControlDisabledTextStyle; } +@mixin euiFormControlDisabledStyle { @include ouiFormControlDisabledStyle; } +@mixin euiFormControlReadOnlyStyle { @include ouiFormControlReadOnlyStyle; } +@mixin euiFormControlStyle($borderOnly: false, $includeStates: true, $includeSizes: true) { @include ouiFormControlStyle($borderOnly, $includeStates, $includeSizes); } +@mixin euiFormControlStyleCompressed($borderOnly: false, $includeStates: true) { @include ouiFormControlStyleCompressed($borderOnly, $includeStates); } +@mixin euiCustomControl($type: null, $size: $ouiSize) { @include ouiCustomControl($type, $size); } +@mixin euiCustomControlSelected($type: null) { @include ouiCustomControlSelected($type); } +@mixin euiCustomControlDisabled($type: null) { @include ouiCustomControlDisabled($type); } +@mixin euiCustomControlFocused { @include ouiCustomControlFocused; } +@mixin euiHiddenSelectableInput { @include ouiHiddenSelectableInput; } +/* End of Aliases */ diff --git a/src/themes/v9/global_styling/mixins/_header.scss b/src/themes/v9/global_styling/mixins/_header.scss new file mode 100644 index 0000000000..2dd794c2c8 --- /dev/null +++ b/src/themes/v9/global_styling/mixins/_header.scss @@ -0,0 +1,62 @@ +/*! + * SPDX-License-Identifier: Apache-2.0 + * + * The OpenSearch Contributors require contributions made to + * this file be licensed under the Apache-2.0 license or a + * compatible open source license. + * + * Modifications Copyright OpenSearch Contributors. See + * GitHub history for details. + */ + +@import '../variables/header'; + +@mixin ouiHeaderAffordForFixed($headerHeight: $ouiHeaderHeightCompensation) { + &.ouiBody--headerIsFixed { + padding-top: $headerHeight; + + // When the OuiHeader is fixed, we need to account for it in the position of the flyout + .ouiFlyout, + .ouiCollapsibleNav { + top: $headerHeight; + height: calc(100% - #{$headerHeight}); + } + + @include ouiBreakpoint('m', 'l', 'xl') { + .ouiPageSideBar--sticky { + max-height: calc(100vh - #{$headerHeight}); + top: #{$headerHeight}; + } + } + + .ouiOverlayMask--belowHeader { + top: #{$headerHeight}; + } + } +} + + +/* OUI -> EUI Aliases */ +@mixin euiHeaderAffordForFixed($headerHeight: $ouiHeaderHeightCompensation) { + &.euiBody--headerIsFixed { + padding-top: $headerHeight; + + .euiFlyout, + .euiCollapsibleNav { + top: $headerHeight; + height: calc(100% - #{$headerHeight}); + } + + @include euiBreakpoint('m', 'l', 'xl') { + .euiPageSideBar--sticky { + max-height: calc(100vh - #{$headerHeight}); + top: #{$headerHeight}; + } + } + + .euiOverlayMask--belowHeader { + top: #{$headerHeight}; + } + } +} +/* End of Aliases */ diff --git a/src/themes/v9/global_styling/mixins/_helpers.scss b/src/themes/v9/global_styling/mixins/_helpers.scss new file mode 100644 index 0000000000..c1c2bcbf94 --- /dev/null +++ b/src/themes/v9/global_styling/mixins/_helpers.scss @@ -0,0 +1,160 @@ +/*! + * SPDX-License-Identifier: Apache-2.0 + * + * The OpenSearch Contributors require contributions made to + * this file be licensed under the Apache-2.0 license or a + * compatible open source license. + * + * Modifications Copyright OpenSearch Contributors. See + * GitHub history for details. + */ + +// Helper mixins + +// Useful border shade when dealing with images of unknown color. +@mixin innerBorder($type: 'dark', $borderRadius: 0, $alpha: .1) { + $color: rgba($ouiColorDarkestShade, $alpha); + + @if $type == 'light' { + $color: rgba($ouiColorEmptyShade, $alpha); + } + + position: relative; + + &:after { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + border-radius: $borderRadius; + content: ''; + pointer-events: none; + border: 1px solid $color; + } +} + +// Set scroll bar appearance on Chrome (and firefox). +@mixin ouiScrollBar($thumbColor: $ouiColorDarkShade, $trackBackgroundColor: transparent) { + // Firefox's scrollbar coloring cascades, but the sizing does not, + // so it's being added to this mixin for allowing support wherever custom scrollbars are + // sass-lint:disable-block no-misspelled-properties + scrollbar-width: thin; + + // sass-lint:disable-block no-vendor-prefixes + &::-webkit-scrollbar { + width: $ouiScrollBar; + height: $ouiScrollBar; + } + + &::-webkit-scrollbar-thumb { + background-color: transparentize($thumbColor, .5); + border: $ouiScrollBarCorner solid $trackBackgroundColor; + background-clip: content-box; + } + + &::-webkit-scrollbar-corner, + &::-webkit-scrollbar-track { + background-color: $trackBackgroundColor; + } +} + +/** + * 1. Focus rings shouldn't be visible on scrollable regions, but a11y requires them to be focusable. + * Browser's supporting `:focus-visible` will still show outline on keyboard focus only. + * Others like Safari, won't show anything at all. + * 2. Force the `:focus-visible` when the `tabindex=0` (is tabbable) + */ + +// Just overflow and scrollbars +@mixin ouiYScroll { + @include ouiScrollBar; + height: 100%; + overflow-y: auto; + overflow-x: hidden; + + &:focus { + outline: none; /* 1 */ + } + + &[tabindex='0']:focus:focus-visible { + outline-style: auto; /* 2 */ + } +} + +@mixin ouiXScroll { + @include ouiScrollBar; + overflow-x: auto; + + &:focus { + outline: none; /* 1 */ + } + + &[tabindex='0']:focus:focus-visible { + outline-style: auto; /* 2 */ + } +} + +// The full overflow with shadow +@mixin ouiYScrollWithShadows { + @include ouiYScroll; + @include ouiOverflowShadow('y'); +} + +@mixin ouiXScrollWithShadows { + @include ouiXScroll; + @include ouiOverflowShadow('x'); +} + +// Hiding elements offscreen to only be read by screen reader +@mixin ouiScreenReaderOnly { + position: absolute; + left: -10000px; + top: auto; + width: 1px; + height: 1px; + overflow: hidden; + user-select: none; +} + +// Specifically target IE11, but not Edge. +@mixin internetExplorerOnly { + // sass-lint:disable-block no-vendor-prefixes + @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { + @content; + } +} + +// Doesn't have reduced motion turned on +@mixin ouiCanAnimate { + @media screen and (prefers-reduced-motion: no-preference) { + @content; + } +} + +// Does have reduced motion turned on +@mixin ouiCantAnimate { + @media screen and (prefers-reduced-motion: reduce) { + @content; + } +} + + +/* OUI -> EUI Aliases */ +@mixin euiScrollBar($thumbColor: $ouiColorDarkShade, $trackBackgroundColor: transparent) { @include ouiScrollBar($thumbColor, $trackBackgroundColor); } +@mixin euiYScroll { @include ouiYScroll; } +@mixin euiXScroll { @include ouiXScroll; } +@mixin euiYScrollWithShadows { @include ouiYScrollWithShadows; } +@mixin euiXScrollWithShadows { @include ouiXScrollWithShadows; } +@mixin euiScreenReaderOnly { @include ouiScreenReaderOnly; } +@mixin euiCanAnimate { + @include ouiCanAnimate { + @content; + } +} +@mixin euiCantAnimate { + @include ouiCantAnimate { + @content; + } +} +/* End of Aliases */ diff --git a/src/themes/v9/global_styling/mixins/_icons.scss b/src/themes/v9/global_styling/mixins/_icons.scss new file mode 100644 index 0000000000..581e49218e --- /dev/null +++ b/src/themes/v9/global_styling/mixins/_icons.scss @@ -0,0 +1,33 @@ +/*! + * SPDX-License-Identifier: Apache-2.0 + * + * The OpenSearch Contributors require contributions made to + * this file be licensed under the Apache-2.0 license or a + * compatible open source license. + * + * Modifications Copyright OpenSearch Contributors. See + * GitHub history for details. + */ + +// For using icons as background images (data-uri) +@mixin ouiIconBackground($type, $color: $ouiColorEmptyShade) { + // sass-lint:disable-block quotes + @if variable-exists(type) == false { + @error 'A $type:string must be provided to @mixin ouiIconBackground().'; + } @else if type-of($color) != color { + @warn "The second parameter must be a valid color type -- got $color:#{type-of($color)} = #{$color}."; + } @else if $type == 'check' { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8'%3E%3Cpath d='M.375 2.625L3.375 5.625M3.375 5.625L8.625.375' fill='none' fill-rule='evenodd' stroke='#{hexToRGB($color)}' stroke-linecap='round' stroke-width='1.5' transform='translate(.5 1)'/%3E%3C/svg%3E"); + } @else if $type == 'dot' { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' viewBox='0 0 6 6'%3E%3Ccircle cx='8' cy='11' r='3' fill='#{hexToRGB($color)}' fill-rule='evenodd' transform='translate(-5 -8)'/%3E%3C/svg%3E"); + } @else if $type == 'square' { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' viewBox='0 0 6 6'%3E%3Crect width='6' height='6' fill='#{hexToRGB($color)}' fill-rule='evenodd'/%3E%3C/svg%3E"); + } @else { + @error "The $type of #{$type} cannot be found."; + } +} + + +/* OUI -> EUI Aliases */ +@mixin euiIconBackground($type, $color: $ouiColorEmptyShade) { @include ouiIconBackground($type, $color); } +/* End of Aliases */ diff --git a/src/themes/v9/global_styling/mixins/_index.scss b/src/themes/v9/global_styling/mixins/_index.scss new file mode 100644 index 0000000000..66051f0728 --- /dev/null +++ b/src/themes/v9/global_styling/mixins/_index.scss @@ -0,0 +1,28 @@ +/*! + * SPDX-License-Identifier: Apache-2.0 + * + * The OpenSearch Contributors require contributions made to + * this file be licensed under the Apache-2.0 license or a + * compatible open source license. + * + * Modifications Copyright OpenSearch Contributors. See + * GitHub history for details. + */ + +@import 'responsive'; +@import 'shadow'; +@import 'size'; +@import 'typography'; +@import 'helpers'; +@import 'states'; +@import 'icons'; + +@import 'beta_badge'; +@import 'button'; +@import 'form'; +@import 'header'; +@import 'loading'; +@import 'panel'; +@import 'popover'; +@import 'range'; +@import 'tool_tip'; diff --git a/src/themes/v9/global_styling/mixins/_loading.scss b/src/themes/v9/global_styling/mixins/_loading.scss new file mode 100644 index 0000000000..dccfe2993e --- /dev/null +++ b/src/themes/v9/global_styling/mixins/_loading.scss @@ -0,0 +1,27 @@ +/*! + * SPDX-License-Identifier: Apache-2.0 + * + * The OpenSearch Contributors require contributions made to + * this file be licensed under the Apache-2.0 license or a + * compatible open source license. + * + * Modifications Copyright OpenSearch Contributors. See + * GitHub history for details. + */ + +@function ouiLoadingSpinnerBorderColors( + $main: $ouiColorLightShade, + $highlight: $ouiColorPrimary +) { + @return $highlight $main $main $main; +} + + +/* OUI -> EUI Aliases */ +@function euiLoadingSpinnerBorderColors( + $main: $ouiColorLightShade, + $highlight: $ouiColorPrimary +) { + @return ouiLoadingSpinnerBorderColors($main, $highlight); +} +/* End of Aliases */ diff --git a/src/themes/v9/global_styling/mixins/_panel.scss b/src/themes/v9/global_styling/mixins/_panel.scss new file mode 100644 index 0000000000..b727d2b476 --- /dev/null +++ b/src/themes/v9/global_styling/mixins/_panel.scss @@ -0,0 +1,74 @@ +/*! + * SPDX-License-Identifier: Apache-2.0 + * + * The OpenSearch Contributors require contributions made to + * this file be licensed under the Apache-2.0 license or a + * compatible open source license. + * + * Modifications Copyright OpenSearch Contributors. See + * GitHub history for details. + */ + +@mixin ouiPanel($selector) { + @if variable-exists(selector) == false { + @error 'A $selector must be provided to @mixin ouiPanel().'; + } @else { + #{$selector} { + background-color: $ouiColorEmptyShade; + border: $ouiBorderThin; + border-radius: $ouiBorderRadius; + flex-grow: 1; + + &#{$selector}--flexGrowZero { + flex-grow: 0; + } + + &#{$selector}--noBorder { + border: none; + } + + &#{$selector}--hasShadow { + @include ouiBottomShadowSmall; + border: $ouiBorderThin; + } + + &#{$selector}--isClickable { + // transition the shadow + transition: all $ouiAnimSpeedFast $ouiAnimSlightResistance; + + &:enabled { // This is a good selector for buttons since it doesn't exist on divs + // in case of button wrapper which inherently is inline-block and no width + display: block; + width: 100%; + text-align: left; + } + + &:hover, + &:focus { + @include ouiSlightShadowHover; + transform: translateY(-2px); + cursor: pointer; + } + } + + // Border Radius + @each $modifier, $amount in $ouiPanelBorderRadiusModifiers { + &#{$selector}--#{$modifier} { + border-radius: $amount; + } + } + + // Background colors + @each $modifier, $color in $ouiPanelBackgroundColorModifiers { + &#{$selector}--#{$modifier} { + background-color: $color; + } + } + } + } +} + + +/* OUI -> EUI Aliases */ +@mixin euiPanel($selector) { @include ouiPanel($selector); } +/* End of Aliases */ diff --git a/src/themes/v9/global_styling/mixins/_popover.scss b/src/themes/v9/global_styling/mixins/_popover.scss new file mode 100644 index 0000000000..fa893823a3 --- /dev/null +++ b/src/themes/v9/global_styling/mixins/_popover.scss @@ -0,0 +1,36 @@ +/*! + * SPDX-License-Identifier: Apache-2.0 + * + * The OpenSearch Contributors require contributions made to + * this file be licensed under the Apache-2.0 license or a + * compatible open source license. + * + * Modifications Copyright OpenSearch Contributors. See + * GitHub history for details. + */ + +@mixin ouiPopoverTitle($size: 'm') { + @if ($size == 's') { + @include ouiTitle('xxxs'); + } @else if ($size == 'm') { + @include ouiTitle('xxs'); + } @else { + @warn 'ouiPopoverTitle only accepts "s" or "m" sizes'; + } + + padding: $ouiSizeM; + text-transform: none; + border-bottom: $ouiBorderThin; +} + +@mixin ouiPopoverFooter { + @include ouiFontSizeS; + padding: $ouiSizeM; + border-top: $ouiBorderThin; +} + + +/* OUI -> EUI Aliases */ +@mixin euiPopoverTitle($size: 'm') { @include ouiPopoverTitle($size); } +@mixin euiPopoverFooter { @include ouiPopoverFooter; } +/* End of Aliases */ diff --git a/src/themes/v9/global_styling/mixins/_range.scss b/src/themes/v9/global_styling/mixins/_range.scss new file mode 100644 index 0000000000..c579a20b60 --- /dev/null +++ b/src/themes/v9/global_styling/mixins/_range.scss @@ -0,0 +1,56 @@ +/*! + * SPDX-License-Identifier: Apache-2.0 + * + * The OpenSearch Contributors require contributions made to + * this file be licensed under the Apache-2.0 license or a + * compatible open source license. + * + * Modifications Copyright OpenSearch Contributors. See + * GitHub history for details. + */ + +// Prefixes are unique in this file +// sass-lint:disable no-vendor-prefixes + +@mixin ouiRangeTrackSize { + height: $ouiRangeTrackHeight; + transition: all $ouiAnimSpeedNormal ease-in; + width: $ouiRangeTrackWidth; +} + +@mixin ouiRangeTrackPerBrowser { + &::-webkit-slider-runnable-track { @content; } + &::-moz-range-track { @content; } + &::-ms-fill-lower { @content; } + &::-ms-fill-upper { @content; } +} + +@mixin ouiRangeThumbStyle { + cursor: pointer; + border-color: $ouiRangeThumbBorderColor; + padding: 0; + height: $ouiRangeThumbHeight; + width: $ouiRangeThumbWidth; +} + +@mixin ouiRangeThumbPerBrowser { + &::-webkit-slider-thumb { @content; } + &::-moz-range-thumb { @content; } + &::-ms-thumb { @content; } +} + + +/* OUI -> EUI Aliases */ +@mixin euiRangeTrackSize { @include ouiRangeTrackSize; } +@mixin euiRangeTrackPerBrowser { + @include ouiRangeTrackPerBrowser { + @content; + } +} +@mixin euiRangeThumbStyle { @include ouiRangeThumbStyle; } +@mixin euiRangeThumbPerBrowser { + @include ouiRangeThumbPerBrowser { + @content; + } +} +/* End of Aliases */ diff --git a/src/themes/v9/global_styling/mixins/_responsive.scss b/src/themes/v9/global_styling/mixins/_responsive.scss new file mode 100644 index 0000000000..ea69a35e83 --- /dev/null +++ b/src/themes/v9/global_styling/mixins/_responsive.scss @@ -0,0 +1,69 @@ +/*! + * SPDX-License-Identifier: Apache-2.0 + * + * The OpenSearch Contributors require contributions made to + * this file be licensed under the Apache-2.0 license or a + * compatible open source license. + * + * Modifications Copyright OpenSearch Contributors. See + * GitHub history for details. + */ + +// This file makes use of double quotes to format errors with nested single quotes +// The indentation linting freaks out on comments above else statements and is disabled. + +// sass-lint:disable quotes, no-warn, indentation + +// A sem-complicated mixin for breakpoints, that takes any number of +// named breakpoints that exists in $ouiBreakpoints. + +@mixin ouiBreakpoint($sizes...) { + // Loop through each size parameter + @each $size in $sizes { + // Store the location of the size in the list to check against + $index: index($ouiBreakpointKeys, $size); + + // Check to make sure it exists in the allowed breakpoint names + @if ( $index ) { + + // Set the min size to the value of the size + $minSize: map-get($ouiBreakpoints, $size); + + // If it is the last item, don't give it a max-width + @if ( $index == length($ouiBreakpointKeys) ) { + @media only screen and (min-width: $minSize) { + @content; + } + // If it's not the last item, add a max-width + } @else { + + // Set the max size to the value of the next size (-1px as to not overlap) + $maxSize: map-get($ouiBreakpoints, nth($ouiBreakpointKeys, $index + 1)) - 1px; + + // If it's the the first item, don't set a min-width + @if ( $index == 1 ) { + @media only screen and (max-width: $maxSize) { + @content; + } + // Otherwise it should have a min and max width + } @else { + @media only screen and (min-width: $minSize) and (max-width: $maxSize) { + @content; + } + } + } + // If it's not a known breakpoint, throw a warning + } @else { + @warn "ouiBreakpoint(): '#{$size}' is not a valid size in $ouiBreakpoints. Accepted values are '#{$ouiBreakpointKeys}'"; + } + } +} + + +/* OUI -> EUI Aliases */ +@mixin euiBreakpoint($sizes...) { + @include ouiBreakpoint($sizes...) { + @content; + } +} +/* End of Aliases */ diff --git a/src/themes/v9/global_styling/mixins/_shadow.scss b/src/themes/v9/global_styling/mixins/_shadow.scss new file mode 100644 index 0000000000..3fc60fa09a --- /dev/null +++ b/src/themes/v9/global_styling/mixins/_shadow.scss @@ -0,0 +1,153 @@ +/*! + * SPDX-License-Identifier: Apache-2.0 + * + * The OpenSearch Contributors require contributions made to + * this file be licensed under the Apache-2.0 license or a + * compatible open source license. + * + * Modifications Copyright OpenSearch Contributors. See + * GitHub history for details. + */ + +// This file uses RGBA literal values responsibly +// This file uses off-pattern indentation to be more readable + +// sass-lint:disable no-color-literals, no-color-keywords, indentation, quotes + +@mixin ouiSlightShadow($color: $ouiShadowColor, $opacity: .3) { + box-shadow: 0 2px 2px -1px rgba($color, $opacity); +} + +@mixin ouiBottomShadowSmall($color: $ouiShadowColor, $opacity: .3) { + box-shadow: + 0 2px 2px -1px rgba($color, $opacity), + 0 1px 5px -2px rgba($color, $opacity); +} + +@mixin ouiBottomShadowMedium($color: $ouiShadowColor, $opacity: .2) { + box-shadow: + 0 6px 12px -1px rgba($color, $opacity), + 0 4px 4px -1px rgba($color, $opacity), + 0 2px 2px 0 rgba($color, $opacity); +} + +// Similar to shadow medium but without the bottom depth. Useful for popovers +// that drop UP rather than DOWN. +@mixin ouiBottomShadowFlat($color: $ouiShadowColor, $opacity: .2) { + box-shadow: + 0 0 12px -1px rgba($color, $opacity), + 0 0 4px -1px rgba($color, $opacity), + 0 0 2px 0 rgba($color, $opacity); +} + +// adjustBorder allows the border color to match the drop shadow better so that there's better +// distinction between element bounds and the shadow (crisper borders) +@mixin ouiBottomShadow($color: $ouiShadowColorLarge, $opacity: .1, $adjustBorders: false) { + box-shadow: + 0 12px 24px 0 rgba($color, $opacity), + 0 6px 12px 0 rgba($color, $opacity), + 0 4px 4px 0 rgba($color, $opacity), + 0 2px 2px 0 rgba($color, $opacity); + + // Never adjust borders if the border color is already on the dark side (dark theme) + @if ($adjustBorders and not (lightness($ouiBorderColor) < 50)) { + border-color: tint($color, 75%); + border-top-color: tint($color, 80%); + border-bottom-color: tint($color, 55%); + } +} + +@mixin ouiBottomShadowLarge( + $color: $ouiShadowColorLarge, + $opacity: .1, + $adjustBorders: false, + $reverse: false +) { + @if ($reverse) { + box-shadow: + 0 -40px 64px 0 rgba($color, $opacity), + 0 -24px 32px 0 rgba($color, $opacity), + 0 -16px 16px 0 rgba($color, $opacity), + 0 -8px 8px 0 rgba($color, $opacity); + } @else { + box-shadow: + 0 40px 64px 0 rgba($color, $opacity), + 0 24px 32px 0 rgba($color, $opacity), + 0 16px 16px 0 rgba($color, $opacity), + 0 8px 8px 0 rgba($color, $opacity), + 0 4px 4px 0 rgba($color, $opacity), + 0 2px 2px 0 rgba($color, $opacity); + } + + // Never adjust borders if the border color is already on the dark side (dark theme) + @if ($adjustBorders and not (lightness($ouiBorderColor) < 50)) { + border-color: tint($color, 70%); + border-top-color: tint($color, 85%); + border-bottom-color: tint($color, 55%); + } +} + +@mixin ouiSlightShadowHover($color: $ouiShadowColor, $opacity: .3) { + box-shadow: + 0 4px 8px 0 rgba($color, calc($opacity/2)), + 0 2px 2px -1px rgba($color, $opacity); +} + +@mixin ouiSlightShadowActive($color: $ouiShadowColor, $opacity: .15) { + box-shadow: inset 1px 2px 8px rgba($color, $opacity); +} + +@mixin ouiOverflowShadow($direction: 'y', $side: 'both') { + $hideHeight: $ouiScrollBarCorner * 1.25; + $gradient: null; + $gradientStart: + transparentize(red, .9) 0%, + transparentize(red, 0) $hideHeight; + $gradientEnd: + transparentize(red, 0) calc(100% - #{$hideHeight}), + transparentize(red, .9) 100%; + @if ($side == 'both' or $side == 'start' or $side == 'end') { + @if ($side == 'both') { + $gradient: $gradientStart, $gradientEnd; + } @else if ($side == 'start') { + $gradient: $gradientStart; + } @else { + $gradient: $gradientEnd; + } + } @else { + @warn "ouiOverflowShadow() expects side to be 'both', 'start' or 'end' but got '#{$side}'"; + } + + @if ($direction == 'y') { + mask-image: linear-gradient(to bottom, #{$gradient}); + } @else if ($direction == 'x') { + mask-image: linear-gradient(to right, #{$gradient}); + } @else { + @warn "ouiOverflowShadow() expects direction to be 'y' or 'x' but got '#{$direction}'"; + } +} + + +/* OUI -> EUI Aliases */ +@mixin euiSlightShadow($color: $ouiShadowColor, $opacity: .3) { @include ouiSlightShadow($color, $opacity); } +@mixin euiBottomShadowSmall($color: $ouiShadowColor, $opacity: .3) { @include ouiBottomShadowSmall($color, $opacity); } +@mixin euiBottomShadowMedium($color: $ouiShadowColor, $opacity: .2) { @include ouiBottomShadowMedium($color, $opacity); } +@mixin euiBottomShadowFlat($color: $ouiShadowColor, $opacity: .2) { @include ouiBottomShadowFlat($color, $opacity); } +@mixin euiBottomShadow($color: $ouiShadowColorLarge, $opacity: .1, $adjustBorders: false) { @include ouiBottomShadow($color, $opacity, $adjustBorders); } +@mixin euiBottomShadowLarge( + $color: $ouiShadowColorLarge, + $opacity: .1, + $adjustBorders: false, + $reverse: false +) { + @include ouiBottomShadowLarge( + $color, + $opacity, + $adjustBorders, + $reverse + ); +} +@mixin euiSlightShadowHover($color: $ouiShadowColor, $opacity: .3) { @include ouiSlightShadowHover($color, $opacity); } +@mixin euiSlightShadowActive($color: $ouiShadowColor, $opacity: .3) { @include ouiSlightShadowActive($color, $opacity); } +@mixin euiOverflowShadow($direction: 'y', $side: 'both') { @include ouiOverflowShadow($direction, $side); } +/* End of Aliases */ diff --git a/src/themes/v9/global_styling/mixins/_size.scss b/src/themes/v9/global_styling/mixins/_size.scss new file mode 100644 index 0000000000..56922d7537 --- /dev/null +++ b/src/themes/v9/global_styling/mixins/_size.scss @@ -0,0 +1,15 @@ +/*! + * SPDX-License-Identifier: Apache-2.0 + * + * The OpenSearch Contributors require contributions made to + * this file be licensed under the Apache-2.0 license or a + * compatible open source license. + * + * Modifications Copyright OpenSearch Contributors. See + * GitHub history for details. + */ + +@mixin size($size) { + width: $size; + height: $size; +} diff --git a/src/themes/v9/global_styling/mixins/_states.scss b/src/themes/v9/global_styling/mixins/_states.scss new file mode 100644 index 0000000000..e4c31a8626 --- /dev/null +++ b/src/themes/v9/global_styling/mixins/_states.scss @@ -0,0 +1,71 @@ +/*! + * SPDX-License-Identifier: Apache-2.0 + * + * The OpenSearch Contributors require contributions made to + * this file be licensed under the Apache-2.0 license or a + * compatible open source license. + * + * Modifications Copyright OpenSearch Contributors. See + * GitHub history for details. + */ + +@mixin ouiFocusRing($size: 'small') { + @if $size == 'large' { + // It's always OK to use the focus animation. This will take precedence over times we turn it off individually like OuiButtonEmpty + // sass-lint:disable-block no-important + animation: $ouiAnimSpeedSlow $ouiAnimSlightResistance 1 normal forwards focusRingAnimateLarge !important; + } @else { + // sass-lint:disable-block no-important + animation: $ouiAnimSpeedSlow $ouiAnimSlightResistance 1 normal forwards focusRingAnimate !important; + } +} + +// Keyframe animation declarations can be found in +// utility/animations.scss + +@mixin ouiFocusBackground($color: $ouiColorPrimary) { + background-color: tintOrShade($color, $ouiFocusChangePercent, $ouiFocusChangePercent); +} + +@mixin ouiHoverState { + cursor: pointer; + text-decoration: underline; +} + +@mixin ouiFocusState($color: $ouiColorPrimary) { + @include ouiHoverState; + @include ouiFocusBackground($color); +} + +@mixin ouiDisabledState($color: $ouiButtonColorDisabledText) { + cursor: not-allowed; + text-decoration: none; + + @if ($color) { + color: $color; + } +} + +@mixin ouiInteractiveStates($focusColor: $ouiColorPrimary, $disabledColor: $ouiButtonColorDisabledText) { + &:hover { + @include ouiHoverState; + } + + &:focus { + @include ouiFocusState($focusColor); + } + + &:disabled { + @include ouiDisabledState($disabledColor); + } +} + + +/* OUI -> EUI Aliases */ +@mixin euiFocusRing($size: 'small') { @include ouiFocusRing($size); } +@mixin euiFocusBackground($color: $ouiColorPrimary) { @include ouiFocusBackground($color); } +@mixin euiHoverState { @include ouiHoverState; } +@mixin euiFocusState($color: $ouiColorPrimary) { @include ouiFocusState($color); } +@mixin euiDisabledState($color: $ouiButtonColorDisabledText) { @include ouiDisabledState($color); } +@mixin euiInteractiveStates($focusColor: $ouiColorPrimary, $disabledColor: $ouiButtonColorDisabledText) { @include ouiInteractiveStates($focusColor, $disabledColor); } +/* End of Aliases */ diff --git a/src/themes/v9/global_styling/mixins/_tool_tip.scss b/src/themes/v9/global_styling/mixins/_tool_tip.scss new file mode 100644 index 0000000000..d1310dc8c2 --- /dev/null +++ b/src/themes/v9/global_styling/mixins/_tool_tip.scss @@ -0,0 +1,46 @@ +/*! + * SPDX-License-Identifier: Apache-2.0 + * + * The OpenSearch Contributors require contributions made to + * this file be licensed under the Apache-2.0 license or a + * compatible open source license. + * + * Modifications Copyright OpenSearch Contributors. See + * GitHub history for details. + */ + +@mixin ouiToolTipStyle($size: null) { + @include ouiBottomShadow($color: $ouiColorInk); + border-radius: $ouiBorderRadius; + background-color: $ouiTooltipBackgroundColor; + color: $ouiColorGhost; + z-index: $ouiZLevel9; + max-width: 256px; + overflow-wrap: break-word; + + @if ($size == 's') { + @include ouiFontSizeXS; + padding: $ouiSizeS; + } @else { + @include ouiFontSizeS; + padding: $ouiSizeM; + } +} + +@mixin ouiToolTipTitle { + font-weight: $ouiFontWeightBold; + border-bottom: solid 1px tintOrShade($ouiColorFullShade, 35%, 80%); + padding-bottom: $ouiSizeXS; + margin-bottom: $ouiSizeXS; +} + +@mixin ouiToolTipAnimation($side: 'top') { + animation: #{map-get($ouiTooltipAnimations, $side)} $ouiAnimSpeedExtraFast ease-out 0s forwards; +} + + +/* OUI -> EUI Aliases */ +@mixin euiToolTipStyle($size: null) { @include ouiToolTipStyle($size); } +@mixin euiToolTipTitle { @include ouiToolTipTitle; } +@mixin euiToolTipAnimation($side: 'top') { @include ouiToolTipAnimation($side); } +/* End of Aliases */ diff --git a/src/themes/v9/global_styling/mixins/_typography.scss b/src/themes/v9/global_styling/mixins/_typography.scss new file mode 100644 index 0000000000..2780a0f72b --- /dev/null +++ b/src/themes/v9/global_styling/mixins/_typography.scss @@ -0,0 +1,168 @@ +/*! + * SPDX-License-Identifier: Apache-2.0 + * + * The OpenSearch Contributors require contributions made to + * this file be licensed under the Apache-2.0 license or a + * compatible open source license. + * + * Modifications Copyright OpenSearch Contributors. See + * GitHub history for details. + */ + +// sass-lint:disable no-vendor-prefixes +// sass-lint:disable no-important + +// Our base fonts + +@mixin ouiFont { + font-family: var(--oui-font-family); + font-weight: $ouiFontWeightRegular; + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; + font-kerning: normal; +} + +@mixin ouiCodeFont { + font-family: var(--oui-code-font-family); + letter-spacing: normal; + line-height: 1.5; +} + +@mixin ouiText { + color: $ouiTextColor; + font-weight: $ouiFontWeightRegular; +} + +@mixin ouiTitle($size: 'm') { + color: $ouiTitleColor; + + @if (map-has-key($ouiTitles, $size)) { + @each $property, $value in map-get($ouiTitles, $size) { + @if ($property == 'font-size') { + @include fontSize($value); + } @else { + #{$property}: $value; + } + } + } @else { + @include fontSize($size); + @include lineHeightFromBaseline(3); + } +} + +// Font sizing extends, using rem mixin + +@mixin ouiFontSizeXS { + @include fontSize($ouiFontSizeXS); + line-height: $ouiLineHeight; +} + +@mixin ouiFontSizeS { + @include fontSize($ouiFontSizeS); + line-height: $ouiLineHeight; +} + +@mixin ouiFontSize { + @include fontSize($ouiFontSize); + line-height: $ouiLineHeight; +} + +@mixin ouiFontSizeM { + @include fontSize($ouiFontSizeM); + line-height: $ouiLineHeight; +} + +@mixin ouiFontSizeL { + @include fontSize($ouiFontSizeL); + line-height: $ouiLineHeight; +} + +@mixin ouiFontSizeXL { + @each $property, $value in map-get($ouiTitles, 'm') { + @if ($property == 'font-size') { + @include fontSize($value); + } @else { + #{$property}: $value; + } + } + line-height: 1.111111; +} + +@mixin ouiFontSizeXXL { + @each $property, $value in map-get($ouiTitles, 'l') { + @if ($property == 'font-size') { + @include fontSize($value); + } @else { + #{$property}: $value; + } + } + line-height: 1.111111; +} + +@mixin ouiTextBreakWord { + // https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/ + overflow-wrap: break-word !important; // makes sure the long string will wrap and not bust out of the container + word-wrap: break-word !important; // spec says, they are literally just alternate names for each other but some browsers support one and not the other + word-break: break-word; // IE doesn't understand but that's ok +} + +// Text truncation +// +// Prevent text from wrapping onto multiple lines, and truncate with an +// ellipsis. +// +// 1. Ensure that the node has a maximum width after which truncation can +// occur. +// 2. Fix for IE 8/9 if `word-wrap: break-word` is in effect on ancestor +// nodes. + +@mixin ouiTextTruncate { + // sass-lint:disable-block no-important + max-width: 100%; // 1 + overflow: hidden !important; + text-overflow: ellipsis !important; + white-space: nowrap !important; + word-wrap: normal !important; // 2 +} + +@mixin ouiNumberFormat { + font-feature-settings: $ouiFontFeatureSettings, 'tnum' 1; // Fixed-width numbers for tabular data +} + + +// Text weight shifting +// +// When changing the font-weight based the state of the component +// this mixin will ensure that the sizing is dependent on the boldest +// weight so it doesn't shifter sibling content. + +@mixin ouiTextShift($fontWeight: $ouiFontWeightBold, $attr: 'data-text') { + &::after { + display: block; + content: attr(#{$attr}); + font-weight: $fontWeight; + height: 0; + overflow: hidden; + visibility: hidden; + } +} + + + +/* OUI -> EUI Aliases */ +@mixin euiFont { @include ouiFont; } +@mixin euiCodeFont { @include ouiCodeFont; } +@mixin euiText { @include ouiText; } +@mixin euiTitle($size: 'm') { @include ouiTitle($size); } +@mixin euiFontSizeXS { @include ouiFontSizeXS; } +@mixin euiFontSizeS { @include ouiFontSizeS; } +@mixin euiFontSize { @include ouiFontSize; } +@mixin euiFontSizeM { @include ouiFontSizeM; } +@mixin euiFontSizeL { @include ouiFontSizeL; } +@mixin euiFontSizeXL { @include ouiFontSizeXL; } +@mixin euiFontSizeXXL { @include ouiFontSizeXXL; } +@mixin euiTextBreakWord { @include ouiTextBreakWord; } +@mixin euiTextTruncate { @include ouiTextTruncate; } +@mixin euiNumberFormat { @include ouiNumberFormat; } +@mixin euiTextShift($fontWeight: $ouiFontWeightBold, $attr: 'data-text') { @include ouiTextShift($fontWeight, $attr); } +/* End of Aliases */ diff --git a/src/themes/v9/global_styling/reset/_hacks.scss b/src/themes/v9/global_styling/reset/_hacks.scss new file mode 100644 index 0000000000..cd76fab92f --- /dev/null +++ b/src/themes/v9/global_styling/reset/_hacks.scss @@ -0,0 +1,16 @@ +/*! + * SPDX-License-Identifier: Apache-2.0 + * + * The OpenSearch Contributors require contributions made to + * this file be licensed under the Apache-2.0 license or a + * compatible open source license. + * + * Modifications Copyright OpenSearch Contributors. See + * GitHub history for details. + */ + +// Chrome has an issue around RTL languages in SVGs when letter-spacing is negative +// https://bugs.chromium.org/p/chromium/issues/detail?id=966480 +svg text { + letter-spacing: normal !important; // sass-lint:disable-line no-important +} diff --git a/src/themes/v9/global_styling/reset/_index.scss b/src/themes/v9/global_styling/reset/_index.scss new file mode 100644 index 0000000000..51482aab36 --- /dev/null +++ b/src/themes/v9/global_styling/reset/_index.scss @@ -0,0 +1,14 @@ +/*! + * SPDX-License-Identifier: Apache-2.0 + * + * The OpenSearch Contributors require contributions made to + * this file be licensed under the Apache-2.0 license or a + * compatible open source license. + * + * Modifications Copyright OpenSearch Contributors. See + * GitHub history for details. + */ + +@import 'reset'; +@import 'hacks'; +@import 'scrollbar'; diff --git a/src/themes/v9/global_styling/reset/_reset.scss b/src/themes/v9/global_styling/reset/_reset.scss new file mode 100644 index 0000000000..131ec4a0a3 --- /dev/null +++ b/src/themes/v9/global_styling/reset/_reset.scss @@ -0,0 +1,165 @@ +/*! + * SPDX-License-Identifier: Apache-2.0 + * + * The OpenSearch Contributors require contributions made to + * this file be licensed under the Apache-2.0 license or a + * compatible open source license. + * + * Modifications Copyright OpenSearch Contributors. See + * GitHub history for details. + */ + +// This file allows multi-line selectors to make it more readable +// sass-lint:disable single-line-per-selector + +/** + * Adapted from Eric Meyer's reset (http://meyerweb.com/eric/tools/css/reset/, v2.0 | 20110126). + * + */ + +*, *:before, *:after { + box-sizing: border-box; +} + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: none; + vertical-align: baseline; +} + +code, pre, kbd, samp { + font-family: var(--oui-code-font-family); + line-height: 1.5; +} + +h1, h2, h3, h4, h5, h6, p { + font-family: inherit; + font-weight: inherit; + font-size: inherit; +} + +input, textarea, select, button { + font-family: var(--oui-font-family); +} + +em { + font-style: italic; +} + +strong { + font-weight: $ouiFontWeightBold; +} + +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} + +html { + @include ouiFont; + font-size: $ouiFontSize; + color: $ouiTextColor; + height: 100%; + background-color: $ouiPageBackgroundColor; +} + +body { + line-height: $ouiBodyLineHeight; +} + +*:focus { + outline: none; + + // sass-lint:disable no-vendor-prefixes + // Disables border that shows up when tabbing in Firefox. + &::-moz-focus-inner { + border: none; + } + + &:-moz-focusring { + outline: none; + } +} + +a { + text-decoration: none; + color: $ouiColorPrimary; + + &:hover { + text-decoration: none; + } + + &:focus { + text-decoration: none; + outline: none; + } +} + +a:hover, button, [role='button'] { + cursor: pointer; +} + +input { + margin: 0; + padding: 0; + + &:disabled { + opacity: 1; /* required on iOS */ + } +} + +button { + background: none; + border: none; + padding: 0; + margin: 0; + outline: none; + font-size: inherit; + color: inherit; + border-radius: 0; + + &:hover { + cursor: pointer; + } +} + +ol, ul { + list-style: none; +} + +blockquote, q { + quotes: none; +} + +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; // sass-lint:disable-line no-duplicate-properties +} + +table { + border-collapse: collapse; + border-spacing: 0; +} + +hr { + margin: 0; +} + +fieldset { + min-inline-size: auto; +} diff --git a/src/themes/v9/global_styling/reset/_scrollbar.scss b/src/themes/v9/global_styling/reset/_scrollbar.scss new file mode 100644 index 0000000000..6ebbbd28b0 --- /dev/null +++ b/src/themes/v9/global_styling/reset/_scrollbar.scss @@ -0,0 +1,19 @@ +/*! + * SPDX-License-Identifier: Apache-2.0 + * + * The OpenSearch Contributors require contributions made to + * this file be licensed under the Apache-2.0 license or a + * compatible open source license. + * + * Modifications Copyright OpenSearch Contributors. See + * GitHub history for details. + */ + +// Firefox's scrollbar coloring cascades throughout which is why it's set at the html level +// However, the width sizing is not, but this has been added to the ouiScrollBar mixin as well + +html { + // sass-lint:disable-block no-misspelled-properties + scrollbar-width: thin; + scrollbar-color: transparentize($ouiColorDarkShade, .5) transparent; // Firefox support +} diff --git a/src/themes/v9/global_styling/utility/_animations.scss b/src/themes/v9/global_styling/utility/_animations.scss new file mode 100644 index 0000000000..f575554669 --- /dev/null +++ b/src/themes/v9/global_styling/utility/_animations.scss @@ -0,0 +1,66 @@ +/*! + * SPDX-License-Identifier: Apache-2.0 + * + * The OpenSearch Contributors require contributions made to + * this file be licensed under the Apache-2.0 license or a + * compatible open source license. + * + * Modifications Copyright OpenSearch Contributors. See + * GitHub history for details. + */ + +// Animations as utility so they don't get duplicated in compiled CSS + +@keyframes ouiAnimFadeIn { + 0% { + opacity: 0; + } + + 100% { + opacity: 1; + } +} + +@keyframes ouiGrow { + 0% { + opacity: 0; + } + + 1% { + opacity: 0; + transform: scale(0); + } + + 100% { + opacity: 1; + transform: scale(1); + } +} + +@keyframes focusRingAnimate { + 0% { + box-shadow: 0 0 0 $ouiFocusRingAnimStartSize $ouiFocusRingAnimStartColor; + } + + 100% { + box-shadow: 0 0 0 $ouiFocusRingSize $ouiFocusRingColor; + } +} + +@keyframes focusRingAnimateLarge { + 0% { + box-shadow: 0 0 0 $ouiFocusRingAnimStartSizeLarge $ouiFocusRingAnimStartColor; + } + + 100% { + box-shadow: 0 0 0 $ouiFocusRingSizeLarge $ouiFocusRingColor; + } +} + +// Component specific + +@keyframes ouiButtonActive { + 50% { + transform: translateY(1px); + } +} diff --git a/src/themes/v9/global_styling/utility/_index.scss b/src/themes/v9/global_styling/utility/_index.scss new file mode 100644 index 0000000000..02a09239d3 --- /dev/null +++ b/src/themes/v9/global_styling/utility/_index.scss @@ -0,0 +1,13 @@ +/*! + * SPDX-License-Identifier: Apache-2.0 + * + * The OpenSearch Contributors require contributions made to + * this file be licensed under the Apache-2.0 license or a + * compatible open source license. + * + * Modifications Copyright OpenSearch Contributors. See + * GitHub history for details. + */ + +@import 'animations'; +@import 'utility'; diff --git a/src/themes/v9/global_styling/utility/_utility.scss b/src/themes/v9/global_styling/utility/_utility.scss new file mode 100644 index 0000000000..b2c4a0100c --- /dev/null +++ b/src/themes/v9/global_styling/utility/_utility.scss @@ -0,0 +1,161 @@ +/*! + * SPDX-License-Identifier: Apache-2.0 + * + * The OpenSearch Contributors require contributions made to + * this file be licensed under the Apache-2.0 license or a + * compatible open source license. + * + * Modifications Copyright OpenSearch Contributors. See + * GitHub history for details. + */ + +// This file utilizes !importants on purpose +// sass-lint:disable no-important + +// Vertical alignment +.oui-alignBaseline { vertical-align: baseline !important; } +.oui-alignBottom { vertical-align: bottom !important; } +.oui-alignMiddle { vertical-align: middle !important; } +.oui-alignTop { vertical-align: top !important; } + +// Display +.oui-displayBlock {display: block !important;} +.oui-displayInline {display: inline !important;} +.oui-displayInlineBlock {display: inline-block !important;} +.oui-displayNone {display: none !important;} + +.oui-fullWidth { + display: block !important; + width: 100% !important; +} + +// Text +.oui-textCenter {text-align: center !important;} +.oui-textLeft {text-align: left !important;} +.oui-textRight {text-align: right !important;} +.oui-textNoWrap {white-space: nowrap !important;} +.oui-textInheritColor {color: inherit !important;} + +.oui-textBreakWord { + @include ouiTextBreakWord; +} + +.oui-textBreakAll { + overflow-wrap: break-word !important; // Fixes FF when dashes are involved #2288 + word-break: break-all !important; +} + +.oui-textBreakNormal { + overflow-wrap: normal !important; + word-wrap: normal !important; + word-break: normal !important; +} + +// TODO: 7/23 DEPRECATE in favor of .oui-textBreakWord now that it's working as intended +.oui-textOverflowWrap { + @include internetExplorerOnly { + word-break: break-all !important; + } + overflow-wrap: break-word !important; +} + +.oui-textTruncate { + @include ouiTextTruncate; +} + +/** + * Responsive + * + * 1. Be sure to hide the element initially + */ + +[class*='oui-showFor'] { + display: none !important; /* 1 */ +} + +@each $size in $ouiBreakpointKeys { + .oui-hideFor--#{$size} { + @include ouiBreakpoint($size) { display: none !important; } + } + + .oui-showFor--#{$size} { + @include ouiBreakpoint($size) { display: inline !important; } + } + + .oui-showFor--#{$size}--block { + @include ouiBreakpoint($size) { display: block !important; } + } + + .oui-showFor--#{$size}--inlineBlock { + @include ouiBreakpoint($size) { display: inline-block !important; } + } + + .oui-showFor--#{$size}--flex { + @include ouiBreakpoint($size) { display: flex !important; } + } +} + +/** + * IE doesn't properly wrap groups if it is within a flex-item of a flex-group. + * Adding the following styles to the flex-item that contains the wrapping group, will fix IE. + * https://github.com/philipwalton/flexbugs/issues/104 + */ +.ouiIEFlexWrapFix { + @include internetExplorerOnly { + flex-grow: 1; + flex-shrink: 1; + flex-basis: 0%; + } +} + +/** + * Overflow scrolling + */ +.oui-yScroll { + @include ouiYScroll; +} + +.oui-xScroll { + @include ouiXScroll; +} + +/** + * Overflow scrolling with shadows + */ +.oui-yScrollWithShadows { + @include ouiYScrollWithShadows; +} + +.oui-xScrollWithShadows { + @include ouiXScrollWithShadows; +} + +// TODO: 10/22 DEPRECATE in favor of the correctly formatted class .oui-yScrollWithShadows +.ouiYScrollWithShadows { + @include ouiYScrollWithShadows; +} + +/** + * Forcing focus ring on non-OUI elements + */ +.oui-isFocusable:focus { + @include ouiFocusRing('large'); +} + +/** + * For quickly applying a full-height element whether using flex or not + */ +@mixin ouiFullHeight { + height: 100%; + flex: 1 1 auto; + overflow: hidden; +} + +.oui-fullHeight { + @include ouiFullHeight; +} + + +/* OUI -> EUI Aliases */ +@mixin euiFullHeight { @include ouiFullHeight; } +/* End of Aliases */ diff --git a/src/themes/v9/global_styling/variables/_animations.scss b/src/themes/v9/global_styling/variables/_animations.scss new file mode 100644 index 0000000000..0cf4acb967 --- /dev/null +++ b/src/themes/v9/global_styling/variables/_animations.scss @@ -0,0 +1,35 @@ +/*! + * SPDX-License-Identifier: Apache-2.0 + * + * The OpenSearch Contributors require contributions made to + * this file be licensed under the Apache-2.0 license or a + * compatible open source license. + * + * Modifications Copyright OpenSearch Contributors. See + * GitHub history for details. + */ + +// Animations + +$ouiAnimSlightBounce: cubic-bezier(.34, 1.61, .7, 1) !default; +$ouiAnimSlightResistance: cubic-bezier(.694, .0482, .335, 1) !default; + +$ouiAnimSpeedExtraFast: 90ms !default; +$ouiAnimSpeedFast: 150ms !default; +$ouiAnimSpeedNormal: 250ms !default; +$ouiAnimSpeedSlow: 350ms !default; +$ouiAnimSpeedExtraSlow: 500ms !default; + +// Keyframe animation declarations can be found in +// utility/animations.scss + + +/* OUI -> EUI Aliases */ +$euiAnimSlightBounce: $ouiAnimSlightBounce; +$euiAnimSlightResistance: $ouiAnimSlightResistance; +$euiAnimSpeedExtraFast: $ouiAnimSpeedExtraFast; +$euiAnimSpeedFast: $ouiAnimSpeedFast; +$euiAnimSpeedNormal: $ouiAnimSpeedNormal; +$euiAnimSpeedSlow: $ouiAnimSpeedSlow; +$euiAnimSpeedExtraSlow: $ouiAnimSpeedExtraSlow; +/* End of Aliases */ diff --git a/src/themes/v9/global_styling/variables/_borders.scss b/src/themes/v9/global_styling/variables/_borders.scss new file mode 100644 index 0000000000..240de21514 --- /dev/null +++ b/src/themes/v9/global_styling/variables/_borders.scss @@ -0,0 +1,34 @@ +/*! + * SPDX-License-Identifier: Apache-2.0 + * + * The OpenSearch Contributors require contributions made to + * this file be licensed under the Apache-2.0 license or a + * compatible open source license. + * + * Modifications Copyright OpenSearch Contributors. See + * GitHub history for details. + */ + +// Borders + +$ouiBorderWidthThin: 1px !default; +$ouiBorderWidthThick: 2px !default; + +$ouiBorderColor: $ouiColorLightShade !default; +$ouiBorderRadius: 4px !default; +$ouiBorderRadiusSmall: calc($ouiBorderRadius / 2) !default; +$ouiBorderThick: $ouiBorderWidthThick solid $ouiBorderColor !default; +$ouiBorderThin: $ouiBorderWidthThin solid $ouiBorderColor !default; +$ouiBorderEditable: $ouiBorderWidthThick dotted $ouiBorderColor !default; + + +/* OUI -> EUI Aliases */ +$euiBorderWidthThin: $ouiBorderWidthThin; +$euiBorderWidthThick: $ouiBorderWidthThick; +$euiBorderColor: $ouiBorderColor; +$euiBorderRadius: $ouiBorderRadius; +$euiBorderRadiusSmall: $ouiBorderRadiusSmall; +$euiBorderThick: $ouiBorderThick; +$euiBorderThin: $ouiBorderThin; +$euiBorderEditable: $ouiBorderEditable; +/* End of Aliases */ diff --git a/src/themes/v9/global_styling/variables/_buttons.scss b/src/themes/v9/global_styling/variables/_buttons.scss new file mode 100644 index 0000000000..2dea3434d5 --- /dev/null +++ b/src/themes/v9/global_styling/variables/_buttons.scss @@ -0,0 +1,46 @@ +/*! + * SPDX-License-Identifier: Apache-2.0 + * + * The OpenSearch Contributors require contributions made to + * this file be licensed under the Apache-2.0 license or a + * compatible open source license. + * + * Modifications Copyright OpenSearch Contributors. See + * GitHub history for details. + */ + +$ouiButtonHeight: $ouiSizeXXL !default; +$ouiButtonHeightSmall: $ouiSizeXL !default; +$ouiButtonHeightXSmall: $ouiSizeL !default; + +$ouiButtonColorDisabled: #AFAFAF !default; +// Only increase the contrast of background color to text to 2.0 for disabled +$ouiButtonColorDisabledText: #8E8E8E !default; +$ouiButtonColorGhostDisabled: lightOrDarkTheme($ouiColorDarkShade, $ouiColorDarkShade) !default; + +$ouiButtonBorderRadius: 0 !default; + +// Modifier naming and colors. +$ouiButtonTypes: ( + primary: $ouiColorPrimary, + accent: $ouiColorAccent, + secondary: $ouiColorSecondary, + success: $ouiColorSuccess, + warning: $ouiColorWarning, + danger: $ouiColorDanger, + subdued: $ouiTextSubduedColor, // Should get deprecated in favor of `text` + ghost: $ouiColorGhost, // Ghost is special, and does not care about theming. + text: $ouiColorDarkShade, // Reserved for special use cases +) !default; + + +/* OUI -> EUI Aliases */ +$euiButtonHeight: $ouiButtonHeight; +$euiButtonHeightSmall: $ouiButtonHeightSmall; +$euiButtonHeightXSmall: $ouiButtonHeightXSmall; +$euiButtonColorDisabled: $ouiButtonColorDisabled; +$euiButtonColorDisabledText: $ouiButtonColorDisabledText; +$euiButtonColorGhostDisabled: $ouiButtonColorGhostDisabled; +$euiButtonBorderRadius: $ouiButtonBorderRadius; +$euiButtonTypes: $ouiButtonTypes; +/* End of Aliases */ diff --git a/src/themes/v9/global_styling/variables/_collapsible_nav.scss b/src/themes/v9/global_styling/variables/_collapsible_nav.scss new file mode 100644 index 0000000000..81fe4f3f10 --- /dev/null +++ b/src/themes/v9/global_styling/variables/_collapsible_nav.scss @@ -0,0 +1,36 @@ +/*! + * SPDX-License-Identifier: Apache-2.0 + * + * The OpenSearch Contributors require contributions made to + * this file be licensed under the Apache-2.0 license or a + * compatible open source license. + * + * Modifications Copyright OpenSearch Contributors. See + * GitHub history for details. + */ + +// Override OuiFlyout background +$ouiCollapsibleNavBackgroundColor: $ouiPageBackgroundColor !default; + +// No distinction between none and light backgrounds in this theme +$ouiCollapsibleNavGroupNoneBackgroundColor: $ouiPageBackgroundColor !default; +$ouiCollapsibleNavGroupLightBackgroundColor: $ouiPageBackgroundColor !default; + +$ouiCollapsibleNavGroupDarkBackgroundColor: lightOrDarkTheme( + shade($ouiColorDarkestShade, 20%), + shade($ouiColorLightestShade, 50%), +) !default; + +$ouiCollapsibleNavGroupDarkHighContrastColor: makeGraphicContrastColor( + $ouiColorPrimary, + $ouiCollapsibleNavGroupDarkBackgroundColor +) !default; + + +/* OUI -> EUI Aliases */ +$euiCollapsibleNavBackgroundColor: $ouiCollapsibleNavBackgroundColor; +$euiCollapsibleNavGroupNoneBackgroundColor: $ouiCollapsibleNavGroupNoneBackgroundColor; +$euiCollapsibleNavGroupLightBackgroundColor: $ouiCollapsibleNavGroupLightBackgroundColor; +$euiCollapsibleNavGroupDarkBackgroundColor: $ouiCollapsibleNavGroupDarkBackgroundColor; +$euiCollapsibleNavGroupDarkHighContrastColor: $ouiCollapsibleNavGroupDarkHighContrastColor; +/* End of Aliases */ diff --git a/src/themes/v9/global_styling/variables/_colors.scss b/src/themes/v9/global_styling/variables/_colors.scss new file mode 100644 index 0000000000..93069c02b2 --- /dev/null +++ b/src/themes/v9/global_styling/variables/_colors.scss @@ -0,0 +1,277 @@ +/*! + * SPDX-License-Identifier: Apache-2.0 + * + * The OpenSearch Contributors require contributions made to + * this file be licensed under the Apache-2.0 license or a + * compatible open source license. + * + * Modifications Copyright OpenSearch Contributors. See + * GitHub history for details. + */ + +// This extra import allows any variables that are created via functions to work when loaded into JS +@import '../functions/index'; + +// These colors stay the same no matter the theme +$ouiColorGhost: #FFFFFF !default; +$ouiColorInk: #131313 !default; + +// Core +$ouiColorPrimary: #003B5C !default; +$ouiColorSecondary: #0249D8 !default; +$ouiColorAccent: #B92FC5 !default; + +// Status +$ouiColorSuccess: #117F6A !default; +$ouiColorWarning: #ED9F00 !default; +$ouiColorDanger: #C84133 !default; + +// Grays +$ouiColorEmptyShade: #FFFFFF !default; +$ouiColorLightestShade: #E5E5E5 !default; +$ouiColorLightShade: #CDCDCD !default; +$ouiColorMediumShade: #AFAFAF !default; +$ouiColorDarkShade: #585858 !default; +$ouiColorDarkestShade: #2A2A2A !default; +$ouiColorFullShade: #131313 !default; + +// Backgrounds +$ouiPageBackgroundColor: #F5F5F5 !default; +$ouiColorHighlight: #FEF4E0 !default; + +// Every color below must be based mathematically on the set above and in a particular order. +$ouiTextColor: $ouiColorFullShade !default; +$ouiTitleColor: $ouiColorFullShade !default; +$ouiTextSubduedColor: #707070 !default; +$ouiColorDisabled: #CDCDCD !default; + +// Contrasty text variants +$ouiColorPrimaryText: #0249D8 !default; +$ouiColorSecondaryText: #117F6A !default; +$ouiColorAccentText: #B92FC5 !default; +$ouiColorWarningText: #986600 !default; +$ouiColorDangerText: #973A2E !default; +$ouiColorDisabledText: #AFAFAF !default; +$ouiColorSuccessText: #0D6453 !default; +$ouiLinkColor: #2452AD !default; + +// Visualization colors + +// Maps allow for easier JSON usage +// Use map_merge($ouiColorVisColors, $yourMap) to change individual colors after importing ths file +// The `behindText` variant is a direct copy of the hex output by the JS ouiPaletteColorBlindBehindText() function +$ouiPaletteColorBlind: ( + ouiColorVis0: ( + graphic: #54B399, + behindText: #6DCCB1, + ), + ouiColorVis1: ( + graphic: #6092C0, + behindText: #79AAD9, + ), + ouiColorVis2: ( + graphic: #D36086, + behindText: #EE789D, + ), + ouiColorVis3: ( + graphic: #9170B8, + behindText: #A987D1, + ), + ouiColorVis4: ( + graphic: #CA8EAE, + behindText: #E4A6C7, + ), + ouiColorVis5: ( + graphic: #D6BF57, + behindText: #F1D86F, + ), + ouiColorVis6: ( + graphic: #B9A888, + behindText: #D2C0A0, + ), + ouiColorVis7: ( + graphic: #DA8B45, + behindText: #F5A35C, + ), + ouiColorVis8: ( + graphic: #AA6556, + behindText: #C47C6C, + ), + ouiColorVis9: ( + graphic: #E7664C, + behindText: #FF7E62, + ) +) !default; + +$ouiPaletteColorBlindKeys: map-keys($ouiPaletteColorBlind); + +$ouiColorVis0: map-get(map-get($ouiPaletteColorBlind, 'ouiColorVis0'), 'graphic') !default; +$ouiColorVis1: map-get(map-get($ouiPaletteColorBlind, 'ouiColorVis1'), 'graphic') !default; +$ouiColorVis2: map-get(map-get($ouiPaletteColorBlind, 'ouiColorVis2'), 'graphic') !default; +$ouiColorVis3: map-get(map-get($ouiPaletteColorBlind, 'ouiColorVis3'), 'graphic') !default; +$ouiColorVis4: map-get(map-get($ouiPaletteColorBlind, 'ouiColorVis4'), 'graphic') !default; +$ouiColorVis5: map-get(map-get($ouiPaletteColorBlind, 'ouiColorVis5'), 'graphic') !default; +$ouiColorVis6: map-get(map-get($ouiPaletteColorBlind, 'ouiColorVis6'), 'graphic') !default; +$ouiColorVis7: map-get(map-get($ouiPaletteColorBlind, 'ouiColorVis7'), 'graphic') !default; +$ouiColorVis8: map-get(map-get($ouiPaletteColorBlind, 'ouiColorVis8'), 'graphic') !default; +$ouiColorVis9: map-get(map-get($ouiPaletteColorBlind, 'ouiColorVis9'), 'graphic') !default; + +// sass-lint:disable-block variable-name-format +$ouiColorVis0_behindText: map-get(map-get($ouiPaletteColorBlind, 'ouiColorVis0'), 'behindText') !default; +$ouiColorVis1_behindText: map-get(map-get($ouiPaletteColorBlind, 'ouiColorVis1'), 'behindText') !default; +$ouiColorVis2_behindText: map-get(map-get($ouiPaletteColorBlind, 'ouiColorVis2'), 'behindText') !default; +$ouiColorVis3_behindText: map-get(map-get($ouiPaletteColorBlind, 'ouiColorVis3'), 'behindText') !default; +$ouiColorVis4_behindText: map-get(map-get($ouiPaletteColorBlind, 'ouiColorVis4'), 'behindText') !default; +$ouiColorVis5_behindText: map-get(map-get($ouiPaletteColorBlind, 'ouiColorVis5'), 'behindText') !default; +$ouiColorVis6_behindText: map-get(map-get($ouiPaletteColorBlind, 'ouiColorVis6'), 'behindText') !default; +$ouiColorVis7_behindText: map-get(map-get($ouiPaletteColorBlind, 'ouiColorVis7'), 'behindText') !default; +$ouiColorVis8_behindText: map-get(map-get($ouiPaletteColorBlind, 'ouiColorVis8'), 'behindText') !default; +$ouiColorVis9_behindText: map-get(map-get($ouiPaletteColorBlind, 'ouiColorVis9'), 'behindText') !default; + +// Charts +$ouiColorChartLines: shade($ouiColorLightestShade, 3%) !default; +$ouiColorChartBand: $ouiColorLightestShade !default; + +// Code +$ouiCodeBlockBackgroundColor: $ouiColorLightestShade !default; +$ouiCodeBlockColor: makeHighContrastColor($ouiTextColor, $ouiCodeBlockBackgroundColor) !default; +$ouiCodeBlockSelectedBackgroundColor: inherit !default; +$ouiCodeBlockCommentColor: makeHighContrastColor($ouiTextSubduedColor, $ouiCodeBlockBackgroundColor) !default; +$ouiCodeBlockSelectorTagColor: inherit !default; +$ouiCodeBlockStringColor: makeHighContrastColor($ouiColorVis2, $ouiCodeBlockBackgroundColor) !default; +$ouiCodeBlockTagColor: makeHighContrastColor($ouiColorVis1, $ouiCodeBlockBackgroundColor) !default; +$ouiCodeBlockNameColor: makeHighContrastColor($ouiColorVis1, $ouiCodeBlockBackgroundColor) !default; +$ouiCodeBlockNumberColor: makeHighContrastColor($ouiColorVis0, $ouiCodeBlockBackgroundColor) !default; +$ouiCodeBlockKeywordColor: makeHighContrastColor($ouiColorVis3, $ouiCodeBlockBackgroundColor) !default; +$ouiCodeBlockFunctionTitleColor: inherit !default; +$ouiCodeBlockTypeColor: makeHighContrastColor($ouiColorVis1, $ouiCodeBlockBackgroundColor) !default; +$ouiCodeBlockAttributeColor: inherit !default; +$ouiCodeBlockSymbolColor: makeHighContrastColor($ouiColorVis9, $ouiCodeBlockBackgroundColor) !default; +$ouiCodeBlockParamsColor: inherit !default; +$ouiCodeBlockMetaColor: makeHighContrastColor($ouiTextSubduedColor, $ouiCodeBlockBackgroundColor) !default; +$ouiCodeBlockTitleColor: makeHighContrastColor($ouiColorVis7, $ouiCodeBlockBackgroundColor) !default; +$ouiCodeBlockSectionColor: makeHighContrastColor($ouiColorVis9, $ouiCodeBlockBackgroundColor) !default; +$ouiCodeBlockAdditionColor: makeHighContrastColor($ouiColorVis0, $ouiCodeBlockBackgroundColor) !default; +$ouiCodeBlockDeletionColor: makeHighContrastColor($ouiColorDanger, $ouiCodeBlockBackgroundColor) !default; +$ouiCodeBlockSelectorClassColor: inherit !default; +$ouiCodeBlockSelectorIdColor: inherit !default; + + +/* OUI -> EUI Aliases */ +$euiColorGhost: $ouiColorGhost; +$euiColorInk: $ouiColorInk; +$euiColorPrimary: $ouiColorPrimary; +$euiColorSecondary: $ouiColorSecondary; +$euiColorAccent: $ouiColorAccent; +$euiColorSuccess: $ouiColorSuccess; +$euiColorWarning: $ouiColorWarning; +$euiColorDanger: $ouiColorDanger; +$euiColorEmptyShade: $ouiColorEmptyShade; +$euiColorLightestShade: $ouiColorLightestShade; +$euiColorLightShade: $ouiColorLightShade; +$euiColorMediumShade: $ouiColorMediumShade; +$euiColorDarkShade: $ouiColorDarkShade; +$euiColorDarkestShade: $ouiColorDarkestShade; +$euiColorFullShade: $ouiColorFullShade; +$euiPageBackgroundColor: $ouiPageBackgroundColor; +$euiColorHighlight: $ouiColorHighlight; +$euiTextColor: $ouiTextColor; +$euiTitleColor: $ouiTitleColor; +$euiTextSubduedColor: $ouiTextSubduedColor; +$euiColorDisabled: $ouiColorDisabled; +$euiColorPrimaryText: $ouiColorPrimaryText; +$euiColorSecondaryText: $ouiColorSecondaryText; +$euiColorAccentText: $ouiColorAccentText; +$euiColorWarningText: $ouiColorWarningText; +$euiColorDangerText: $ouiColorDangerText; +$euiColorDisabledText: $ouiColorDisabledText; +$euiColorSuccessText: $ouiColorSuccessText; +$euiLinkColor: $ouiLinkColor; +$euiPaletteColorBlind: ( + euiColorVis0: ( + graphic: #54B399, + behindText: #6DCCB1, + ), + euiColorVis1: ( + graphic: #6092C0, + behindText: #79AAD9, + ), + euiColorVis2: ( + graphic: #D36086, + behindText: #EE789D, + ), + euiColorVis3: ( + graphic: #9170B8, + behindText: #A987D1, + ), + euiColorVis4: ( + graphic: #CA8EAE, + behindText: #E4A6C7, + ), + euiColorVis5: ( + graphic: #D6BF57, + behindText: #F1D86F, + ), + euiColorVis6: ( + graphic: #B9A888, + behindText: #D2C0A0, + ), + euiColorVis7: ( + graphic: #DA8B45, + behindText: #F5A35C, + ), + euiColorVis8: ( + graphic: #AA6556, + behindText: #C47C6C, + ), + euiColorVis9: ( + graphic: #E7664C, + behindText: #FF7E62, + ) +) !default; +$euiPaletteColorBlindKeys: map-keys($euiPaletteColorBlind); +$euiColorVis0: $ouiColorVis0; +$euiColorVis1: $ouiColorVis1; +$euiColorVis2: $ouiColorVis2; +$euiColorVis3: $ouiColorVis3; +$euiColorVis4: $ouiColorVis4; +$euiColorVis5: $ouiColorVis5; +$euiColorVis6: $ouiColorVis6; +$euiColorVis7: $ouiColorVis7; +$euiColorVis8: $ouiColorVis8; +$euiColorVis9: $ouiColorVis9; +$euiColorVis0_behindText: $ouiColorVis0_behindText; +$euiColorVis1_behindText: $ouiColorVis1_behindText; +$euiColorVis2_behindText: $ouiColorVis2_behindText; +$euiColorVis3_behindText: $ouiColorVis3_behindText; +$euiColorVis4_behindText: $ouiColorVis4_behindText; +$euiColorVis5_behindText: $ouiColorVis5_behindText; +$euiColorVis6_behindText: $ouiColorVis6_behindText; +$euiColorVis7_behindText: $ouiColorVis7_behindText; +$euiColorVis8_behindText: $ouiColorVis8_behindText; +$euiColorVis9_behindText: $ouiColorVis9_behindText; +$euiColorChartLines: $ouiColorChartLines; +$euiColorChartBand: $ouiColorChartBand; +$euiCodeBlockBackgroundColor: $ouiCodeBlockBackgroundColor; +$euiCodeBlockColor: $ouiCodeBlockColor; +$euiCodeBlockSelectedBackgroundColor: $ouiCodeBlockSelectedBackgroundColor; +$euiCodeBlockCommentColor: $ouiCodeBlockCommentColor; +$euiCodeBlockSelectorTagColor: $ouiCodeBlockSelectorTagColor; +$euiCodeBlockStringColor: $ouiCodeBlockStringColor; +$euiCodeBlockTagColor: $ouiCodeBlockTagColor; +$euiCodeBlockNameColor: $ouiCodeBlockNameColor; +$euiCodeBlockNumberColor: $ouiCodeBlockNumberColor; +$euiCodeBlockKeywordColor: $ouiCodeBlockKeywordColor; +$euiCodeBlockFunctionTitleColor: $ouiCodeBlockFunctionTitleColor; +$euiCodeBlockTypeColor: $ouiCodeBlockTypeColor; +$euiCodeBlockAttributeColor: $ouiCodeBlockAttributeColor; +$euiCodeBlockSymbolColor: $ouiCodeBlockSymbolColor; +$euiCodeBlockParamsColor: $ouiCodeBlockParamsColor; +$euiCodeBlockMetaColor: $ouiCodeBlockMetaColor; +$euiCodeBlockTitleColor: $ouiCodeBlockTitleColor; +$euiCodeBlockSectionColor: $ouiCodeBlockSectionColor; +$euiCodeBlockAdditionColor: $ouiCodeBlockAdditionColor; +$euiCodeBlockDeletionColor: $ouiCodeBlockDeletionColor; +$euiCodeBlockSelectorClassColor: $ouiCodeBlockSelectorClassColor; +$euiCodeBlockSelectorIdColor: $ouiCodeBlockSelectorIdColor; +/* End of Aliases */ diff --git a/src/themes/v9/global_styling/variables/_form.scss b/src/themes/v9/global_styling/variables/_form.scss new file mode 100644 index 0000000000..99a62bbfb3 --- /dev/null +++ b/src/themes/v9/global_styling/variables/_form.scss @@ -0,0 +1,143 @@ +/*! + * SPDX-License-Identifier: Apache-2.0 + * + * The OpenSearch Contributors require contributions made to + * this file be licensed under the Apache-2.0 license or a + * compatible open source license. + * + * Modifications Copyright OpenSearch Contributors. See + * GitHub history for details. + */ + +// Sizing +$ouiFormMaxWidth: $ouiSizeXXL * 10 !default; +$ouiFormControlHeight: $ouiSizeXXL !default; +$ouiFormControlCompressedHeight: $ouiSizeXL !default; +$ouiFormControlPadding: $ouiSizeM !default; +$ouiFormControlCompressedPadding: $ouiSizeS !default; +$ouiFormControlBorderRadius: 0 !default; +$ouiFormControlCompressedBorderRadius: $ouiBorderRadiusSmall !default; + +$ouiRadioSize: $ouiSize !default; +$ouiCheckBoxSize: $ouiSize !default; +$ouiCheckboxBorderRadius: $ouiBorderRadius !default; + +// Switch +$ouiSwitchHeight: $ouiSize * 1.25 !default; +$ouiSwitchWidth: ($ouiSize * 2.5) + $ouiSizeXS !default; +$ouiSwitchThumbSize: $ouiSwitchHeight !default; +$ouiSwitchIconHeight: $ouiSize !default; + +$ouiSwitchHeightCompressed: $ouiSize !default; +$ouiSwitchWidthCompressed: $ouiSize * 1.75 !default; +$ouiSwitchThumbSizeCompressed: $ouiSwitchHeightCompressed !default; + +$ouiSwitchHeightMini: $ouiSwitchHeight * .5 !default; +$ouiSwitchWidthMini: $ouiSwitchWidth * .5 !default; +$ouiSwitchThumbSizeMini: $ouiSwitchHeightMini !default; + +// Modifier naming and colors. +$ouiSwitchColors: ( + primary: $ouiColorPrimary, + accent: $ouiColorAccent, + secondary: $ouiColorSecondary, + success: $ouiColorSuccess, + warning: $ouiColorWarning, + danger: $ouiColorDanger, + subdued: $ouiTextSubduedColor, // Should get deprecated in favor of `text` + ghost: $ouiColorGhost, // Ghost is special, and does not care about theming. + text: $ouiColorDarkShade, // Reserved for special use cases +) !default; + +// Coloring +$ouiFormBackgroundColor: tintOrShade($ouiColorLightestShade, 60%, 40%) !default; +$ouiFormBackgroundDisabledColor: darken($ouiColorLightestShade, 2%) !default; +$ouiFormBackgroundReadOnlyColor: transparentize(lightOrDarkTheme($ouiColorLightShade, $ouiColorInk), .95) !default; +$ouiFormBorderOpaqueColor: shadeOrTint(desaturate(adjust-hue($ouiColorPrimary, 22), 22.95), 26%, 100%) !default; +$ouiFormBorderColor: transparentize($ouiFormBorderOpaqueColor, .9) !default; +$ouiFormBorderDisabledColor: transparentize($ouiFormBorderOpaqueColor, .9) !default; +$ouiFormCustomControlDisabledIconColor: shadeOrTint($ouiColorMediumShade, 38%, 48.5%) !default; // exact 508c foreground for $ouiColorLightShade +$ouiFormCustomControlBorderColor: shadeOrTint($ouiColorLightestShade, 18%, 30%) !default; +$ouiFormControlDisabledColor: $ouiColorMediumShade !default; +$ouiFormControlBoxShadow: 0 1px 1px -1px transparentize($ouiShadowColor, .8), 0 3px 2px -2px transparentize($ouiShadowColor, .8) !default; +$ouiFormControlPlaceholderText: makeHighContrastColor($ouiTextSubduedColor, $ouiFormBackgroundColor) !default; +$_ouiFormInputGroupLabelDarkBackgroundColor: #293847 !default; +$ouiFormInputGroupLabelBackground: lightOrDarkTheme(tint($ouiColorLightShade, 50%), $_ouiFormInputGroupLabelDarkBackgroundColor) !default; +$ouiFormInputGroupBorder: 1px solid shadeOrTint($ouiFormInputGroupLabelBackground, 2%, 4%) !default; +$ouiSwitchOffColor: lightOrDarkTheme(transparentize($ouiColorMediumShade, .8), transparentize($ouiColorMediumShade, .3)) !default; + +// Control Layout +$ouiFormControlLayoutGroupInputHeight: $ouiFormControlHeight - 2px !default; +$ouiFormControlLayoutGroupInputCompressedHeight: $ouiFormControlCompressedHeight - 2px !default; +$ouiFormControlLayoutGroupInputCompressedBorderRadius: calc($ouiFormControlCompressedBorderRadius / 2) !default; + +// Range +$ouiRangeTrackColor: $ouiColorDarkShade !default; + +$ouiRangeThumbRadius: 50% !default; +$ouiRangeThumbHeight: $ouiSize !default; +$ouiRangeThumbWidth: $ouiSize !default; +$ouiRangeThumbBorderColor: $ouiRangeTrackColor !default; + +$ouiRangeTrackWidth: 100% !default; +$ouiRangeTrackHeight: 2px !default; +$ouiRangeTrackBorderWidth: 0px !default; +$ouiRangeTrackBorderColor: $ouiRangeTrackColor !default; +$ouiRangeTrackRadius: $ouiBorderRadius !default; + +$ouiRangeDisabledOpacity: .25 !default; + +$ouiRangeHighlightHeight: $ouiSizeXS !default; + + +/* OUI -> EUI Aliases */ +$euiFormMaxWidth: $ouiFormMaxWidth; +$euiFormControlHeight: $ouiFormControlHeight; +$euiFormControlCompressedHeight: $ouiFormControlCompressedHeight; +$euiFormControlPadding: $ouiFormControlPadding; +$euiFormControlCompressedPadding: $ouiFormControlCompressedPadding; +$euiFormControlBorderRadius: $ouiFormControlBorderRadius; +$euiFormControlCompressedBorderRadius: $ouiFormControlCompressedBorderRadius; +$euiRadioSize: $ouiRadioSize; +$euiCheckBoxSize: $ouiCheckBoxSize; +$euiCheckboxBorderRadius: $ouiCheckboxBorderRadius; +$euiSwitchHeight: $ouiSwitchHeight; +$euiSwitchWidth: $ouiSwitchWidth; +$euiSwitchThumbSize: $ouiSwitchThumbSize; +$euiSwitchIconHeight: $ouiSwitchIconHeight; +$euiSwitchHeightCompressed: $ouiSwitchHeightCompressed; +$euiSwitchWidthCompressed: $ouiSwitchWidthCompressed; +$euiSwitchThumbSizeCompressed: $ouiSwitchThumbSizeCompressed; +$euiSwitchHeightMini: $ouiSwitchHeightMini; +$euiSwitchWidthMini: $ouiSwitchWidthMini; +$euiSwitchThumbSizeMini: $ouiSwitchThumbSizeMini; +$euiFormBackgroundColor: $ouiFormBackgroundColor; +$euiFormBackgroundDisabledColor: $ouiFormBackgroundDisabledColor; +$euiFormBackgroundReadOnlyColor: $ouiFormBackgroundReadOnlyColor; +$euiFormBorderOpaqueColor: $ouiFormBorderOpaqueColor; +$euiFormBorderColor: $ouiFormBorderColor; +$euiFormBorderDisabledColor: $ouiFormBorderDisabledColor; +$euiFormCustomControlDisabledIconColor: $ouiFormCustomControlDisabledIconColor; +$euiFormCustomControlBorderColor: $ouiFormCustomControlBorderColor; +$euiFormControlDisabledColor: $ouiFormControlDisabledColor; +$euiFormControlBoxShadow: $ouiFormControlBoxShadow; +$euiFormControlPlaceholderText: $ouiFormControlPlaceholderText; +$euiFormInputGroupLabelBackground: $ouiFormInputGroupLabelBackground; +$euiFormInputGroupBorder: $ouiFormInputGroupBorder; +$euiSwitchOffColor: $ouiSwitchOffColor; +$euiFormControlLayoutGroupInputHeight: $ouiFormControlLayoutGroupInputHeight; +$euiFormControlLayoutGroupInputCompressedHeight: $ouiFormControlLayoutGroupInputCompressedHeight; +$euiFormControlLayoutGroupInputCompressedBorderRadius: $ouiFormControlLayoutGroupInputCompressedBorderRadius; +$euiRangeTrackColor: $ouiRangeTrackColor; +$euiRangeThumbRadius: $ouiRangeThumbRadius; +$euiRangeThumbHeight: $ouiRangeThumbHeight; +$euiRangeThumbWidth: $ouiRangeThumbWidth; +$euiRangeThumbBorderColor: $ouiRangeThumbBorderColor; +$euiRangeTrackWidth: $ouiRangeTrackWidth; +$euiRangeTrackHeight: $ouiRangeTrackHeight; +$euiRangeTrackBorderWidth: $ouiRangeTrackBorderWidth; +$euiRangeTrackBorderColor: $ouiRangeTrackBorderColor; +$euiRangeTrackRadius: $ouiRangeTrackRadius; +$euiRangeDisabledOpacity: $ouiRangeDisabledOpacity; +$euiRangeHighlightHeight: $ouiRangeHighlightHeight; +/* End of Aliases */ diff --git a/src/themes/v9/global_styling/variables/_header.scss b/src/themes/v9/global_styling/variables/_header.scss new file mode 100644 index 0000000000..e5f7abb3dd --- /dev/null +++ b/src/themes/v9/global_styling/variables/_header.scss @@ -0,0 +1,35 @@ +/*! + * SPDX-License-Identifier: Apache-2.0 + * + * The OpenSearch Contributors require contributions made to + * this file be licensed under the Apache-2.0 license or a + * compatible open source license. + * + * Modifications Copyright OpenSearch Contributors. See + * GitHub history for details. + */ + +// Themeable colors +$ouiHeaderBackgroundColor: $ouiPageBackgroundColor !default; +// Always use the dark theme value of $ouiPageBackgroundColor for the dark header background +$ouiHeaderDarkBackgroundColor: #172430 !default; +$ouiHeaderBorderColor: $ouiBorderColor !default; +$ouiHeaderBreadcrumbColor: $ouiColorDarkestShade !default; + +// Layout vars +$ouiHeaderHeight: $ouiSizeXXL + $ouiSizeS !default; +$ouiHeaderChildSize: $ouiHeaderHeight !default; + +// Use the following variable in other components to afford for the fixed header +$ouiHeaderHeightCompensation: $ouiHeaderHeight + 1px !default; + + +/* OUI -> EUI Aliases */ +$euiHeaderBackgroundColor: $ouiHeaderBackgroundColor; +$euiHeaderDarkBackgroundColor: $ouiHeaderDarkBackgroundColor; +$euiHeaderBorderColor: $ouiHeaderBorderColor; +$euiHeaderBreadcrumbColor: $ouiHeaderBreadcrumbColor; +$euiHeaderHeight: $ouiHeaderHeight; +$euiHeaderChildSize: $ouiHeaderChildSize; +$euiHeaderHeightCompensation: $ouiHeaderHeightCompensation; +/* End of Aliases */ diff --git a/src/themes/v9/global_styling/variables/_index.scss b/src/themes/v9/global_styling/variables/_index.scss new file mode 100644 index 0000000000..ae6c1944be --- /dev/null +++ b/src/themes/v9/global_styling/variables/_index.scss @@ -0,0 +1,37 @@ +/*! + * SPDX-License-Identifier: Apache-2.0 + * + * The OpenSearch Contributors require contributions made to + * this file be licensed under the Apache-2.0 license or a + * compatible open source license. + * + * Modifications Copyright OpenSearch Contributors. See + * GitHub history for details. + */ + +// -------------------------------------------------------------------------------------- +// OUI global variables +// -------------------------------------------------------------------------------------- +// This module contains all global variables available within OUI. Every variable in this +// document should be prefixed with $oui. This lets us know where the variable is +// coming from when looking inside the individual component files. Any component local +// variables should be declared at the top of those documents prefixed with $componentName. + +// Import order is important. Size, color, ...etc are used in other variables. +@import 'size'; +@import 'colors'; +@import 'animations'; +@import 'typography'; +@import 'borders'; +@import 'responsive'; +@import 'shadows'; +@import 'states'; +@import 'z_index'; + +@import 'buttons'; +@import 'form'; +@import 'header'; +@import 'page'; +@import 'panel'; +@import 'tool_tip'; +@import 'collapsible_nav'; diff --git a/src/themes/v9/global_styling/variables/_page.scss b/src/themes/v9/global_styling/variables/_page.scss new file mode 100644 index 0000000000..0b996c7199 --- /dev/null +++ b/src/themes/v9/global_styling/variables/_page.scss @@ -0,0 +1,19 @@ +/*! + * SPDX-License-Identifier: Apache-2.0 + * + * The OpenSearch Contributors require contributions made to + * this file be licensed under the Apache-2.0 license or a + * compatible open source license. + * + * Modifications Copyright OpenSearch Contributors. See + * GitHub history for details. + */ + +$ouiPageDefaultMaxWidth: 1000px !default; +$ouiPageSidebarMinWidth: $ouiSizeL * 8 !default; + + +/* OUI -> EUI Aliases */ +$euiPageDefaultMaxWidth: $ouiPageDefaultMaxWidth; +$euiPageSidebarMinWidth: $ouiPageSidebarMinWidth; +/* End of Aliases */ diff --git a/src/themes/v9/global_styling/variables/_panel.scss b/src/themes/v9/global_styling/variables/_panel.scss new file mode 100644 index 0000000000..6edb023b3e --- /dev/null +++ b/src/themes/v9/global_styling/variables/_panel.scss @@ -0,0 +1,39 @@ +/*! + * SPDX-License-Identifier: Apache-2.0 + * + * The OpenSearch Contributors require contributions made to + * this file be licensed under the Apache-2.0 license or a + * compatible open source license. + * + * Modifications Copyright OpenSearch Contributors. See + * GitHub history for details. + */ + +$ouiPanelPaddingModifiers: ( + 'paddingSmall': $ouiSizeS, + 'paddingMedium': $ouiSize, + 'paddingLarge': $ouiSizeL +) !default; + +$ouiPanelBorderRadiusModifiers: ( + 'borderRadiusNone': 0, + 'borderRadiusMedium': $ouiBorderRadius, +) !default; + +$ouiPanelBackgroundColorModifiers: ( + 'transparent': transparent, + 'plain': $ouiColorEmptyShade, + 'subdued': $ouiPageBackgroundColor, + 'accent': tintOrShade($ouiColorAccent, 90%, 70%), + 'primary': tintOrShade($ouiColorPrimary, 90%, 70%), + 'success': tintOrShade($ouiColorSuccess, 90%, 70%), + 'warning': tintOrShade($ouiColorWarning, 90%, 70%), + 'danger': tintOrShade($ouiColorDanger, 90%, 70%), +) !default; + + +/* OUI -> EUI Aliases */ +$euiPanelPaddingModifiers: $ouiPanelPaddingModifiers; +$euiPanelBorderRadiusModifiers: $ouiPanelBorderRadiusModifiers; +$euiPanelBackgroundColorModifiers: $ouiPanelBackgroundColorModifiers; +/* End of Aliases */ diff --git a/src/themes/v9/global_styling/variables/_responsive.scss b/src/themes/v9/global_styling/variables/_responsive.scss new file mode 100644 index 0000000000..f6f6a34139 --- /dev/null +++ b/src/themes/v9/global_styling/variables/_responsive.scss @@ -0,0 +1,26 @@ +/*! + * SPDX-License-Identifier: Apache-2.0 + * + * The OpenSearch Contributors require contributions made to + * this file be licensed under the Apache-2.0 license or a + * compatible open source license. + * + * Modifications Copyright OpenSearch Contributors. See + * GitHub history for details. + */ + +$ouiBreakpoints: ( + 'xs': 0, + 's': 575px, + 'm': 768px, + 'l': 992px, + 'xl': 1200px +) !default; + +$ouiBreakpointKeys: map-keys($ouiBreakpoints); + + +/* OUI -> EUI Aliases */ +$euiBreakpoints: $ouiBreakpoints; +$euiBreakpointKeys: $ouiBreakpointKeys; +/* End of Aliases */ diff --git a/src/themes/v9/global_styling/variables/_shadows.scss b/src/themes/v9/global_styling/variables/_shadows.scss new file mode 100644 index 0000000000..bc5bdbcac7 --- /dev/null +++ b/src/themes/v9/global_styling/variables/_shadows.scss @@ -0,0 +1,21 @@ +/*! + * SPDX-License-Identifier: Apache-2.0 + * + * The OpenSearch Contributors require contributions made to + * this file be licensed under the Apache-2.0 license or a + * compatible open source license. + * + * Modifications Copyright OpenSearch Contributors. See + * GitHub history for details. + */ + +// Shadows +// Transparency only affects the use of variable this outside of the shadow mixins (borders) +$ouiShadowColor: $ouiColorMediumShade !default; +$ouiShadowColorLarge: #585858 !default; + + +/* OUI -> EUI Aliases */ +$euiShadowColor: $ouiShadowColor; +$euiShadowColorLarge: $ouiShadowColorLarge; +/* End of Aliases */ diff --git a/src/themes/v9/global_styling/variables/_size.scss b/src/themes/v9/global_styling/variables/_size.scss new file mode 100644 index 0000000000..12cd4115fd --- /dev/null +++ b/src/themes/v9/global_styling/variables/_size.scss @@ -0,0 +1,38 @@ +/*! + * SPDX-License-Identifier: Apache-2.0 + * + * The OpenSearch Contributors require contributions made to + * this file be licensed under the Apache-2.0 license or a + * compatible open source license. + * + * Modifications Copyright OpenSearch Contributors. See + * GitHub history for details. + */ + +$ouiSize: 16px !default; + +$ouiSizeXS: $ouiSize * .25 !default; +$ouiSizeS: $ouiSize * .5 !default; +$ouiSizeM: $ouiSize * .75 !default; +$ouiSizeL: $ouiSize * 1.5 !default; +$ouiSizeXL: $ouiSize * 2 !default; +$ouiSizeXXL: $ouiSize * 2.5 !default; + +$ouiButtonMinWidth: $ouiSize * 7 !default; + +$ouiScrollBar: $ouiSize !default; +$ouiScrollBarCorner: $ouiSizeS * .75 !default; + + +/* OUI -> EUI Aliases */ +$euiSize: $ouiSize; +$euiSizeXS: $ouiSizeXS; +$euiSizeS: $ouiSizeS; +$euiSizeM: $ouiSizeM; +$euiSizeL: $ouiSizeL; +$euiSizeXL: $ouiSizeXL; +$euiSizeXXL: $ouiSizeXXL; +$euiButtonMinWidth: $ouiButtonMinWidth; +$euiScrollBar: $ouiScrollBar; +$euiScrollBarCorner: $ouiScrollBarCorner; +/* End of Aliases */ diff --git a/src/themes/v9/global_styling/variables/_states.scss b/src/themes/v9/global_styling/variables/_states.scss new file mode 100644 index 0000000000..7b6be093b7 --- /dev/null +++ b/src/themes/v9/global_styling/variables/_states.scss @@ -0,0 +1,36 @@ +/*! + * SPDX-License-Identifier: Apache-2.0 + * + * The OpenSearch Contributors require contributions made to + * this file be licensed under the Apache-2.0 license or a + * compatible open source license. + * + * Modifications Copyright OpenSearch Contributors. See + * GitHub history for details. + */ + +// Colors +$ouiFocusRingColor: rgba($ouiColorPrimary, .3) !default; +$ouiFocusRingAnimStartColor: rgba($ouiColorPrimary, 0) !default; +$ouiFocusRingAnimStartSize: 6px !default; +$ouiFocusRingAnimStartSizeLarge: 10px !default; + +// Sizing +$ouiFocusRingSizeLarge: $ouiSizeXS !default; +$ouiFocusRingSize: $ouiFocusRingSizeLarge * .75 !default; + +// Transparency +$ouiFocusChangePercent: lightOrDarkTheme(90%, 65%) !default; +$ouiFocusBackgroundColor: tintOrShade($ouiColorPrimary, $ouiFocusChangePercent, $ouiFocusChangePercent) !default; + + +/* OUI -> EUI Aliases */ +$euiFocusRingColor: $ouiFocusRingColor; +$euiFocusRingAnimStartColor: $ouiFocusRingAnimStartColor; +$euiFocusRingAnimStartSize: $ouiFocusRingAnimStartSize; +$euiFocusRingAnimStartSizeLarge: $ouiFocusRingAnimStartSizeLarge; +$euiFocusRingSizeLarge: $ouiFocusRingSizeLarge; +$euiFocusRingSize: $ouiFocusRingSize; +$euiFocusChangePercent: $ouiFocusChangePercent; +$euiFocusBackgroundColor: $ouiFocusBackgroundColor; +/* End of Aliases */ diff --git a/src/themes/v9/global_styling/variables/_tool_tip.scss b/src/themes/v9/global_styling/variables/_tool_tip.scss new file mode 100644 index 0000000000..a1b41f7bae --- /dev/null +++ b/src/themes/v9/global_styling/variables/_tool_tip.scss @@ -0,0 +1,25 @@ +/*! + * SPDX-License-Identifier: Apache-2.0 + * + * The OpenSearch Contributors require contributions made to + * this file be licensed under the Apache-2.0 license or a + * compatible open source license. + * + * Modifications Copyright OpenSearch Contributors. See + * GitHub history for details. + */ + +$ouiTooltipBackgroundColor: #293847 !default; + +$ouiTooltipAnimations: ( + top: ouiToolTipTop, + left: ouiToolTipBottom, + bottom: ouiToolTipLeft, + right: ouiToolTipRight, +) !default; + + +/* OUI -> EUI Aliases */ +$euiTooltipBackgroundColor: $ouiTooltipBackgroundColor; +$euiTooltipAnimations: $ouiTooltipAnimations; +/* End of Aliases */ diff --git a/src/themes/v9/global_styling/variables/_typography.scss b/src/themes/v9/global_styling/variables/_typography.scss new file mode 100644 index 0000000000..05c657fa1f --- /dev/null +++ b/src/themes/v9/global_styling/variables/_typography.scss @@ -0,0 +1,138 @@ +/*! + * SPDX-License-Identifier: Apache-2.0 + * + * The OpenSearch Contributors require contributions made to + * this file be licensed under the Apache-2.0 license or a + * compatible open source license. + * + * Modifications Copyright OpenSearch Contributors. See + * GitHub history for details. + */ + +// Some mixins that help us deal with browser scaling of text more consistently. +// Essentially, fonts across oui should scale against the root html element, not +// against parent inheritance. + +// Typography mixins + +@function convertToRem($size) { + @return #{calc($size / $ouiFontSize)}rem; +} + +// Spit out rem and px +@mixin fontSize($size: $ouiFontSize) { + font-size: $size; + font-size: convertToRem($size); +} + +// Our base gridline is at 1/2 the font-size, ensure line-heights stay on that gridline. +// EX: A proper line-height for text is 1.5 times the font-size. +// If our base font size (ouiFontSize) is 16, our baseline is 8 (16*1.5 / 3). To ensure the +// text stays on the baseline, we pass a multiplier to calculate a line-height in rems. +// To maintain v7 line-heights, $ouiFontSize is replaced with 16px +@function lineHeightFromBaseline($multiplier: 3) { + //@return convertToRem(calc(16px/2)*$multiplier); + @return convertToRem(calc($ouiFontSize/2)*$multiplier); +} +@mixin lineHeightFromBaseline($multiplier: 3) { + line-height: lineHeightFromBaseline($multiplier); +} + +// sass-lint:disable quotes +$ouiFontFamily: #{"'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'"} !default; +$ouiCodeFontFamily: #{"'Fira Code', Consolas, Menlo, Courier, monospace"} !default; +// sass-lint:enable quotes + +// Careful using ligatures. Code editors like ACE will often error because of width calculations +$ouiFontFeatureSettings: 'calt' 1, 'kern' 1, 'liga' 1 !default; + +// Font sizes -- scale is loosely based on Major Third (1.250) +$ouiTextScale: 2, 1.7143, 1.2857, 1.125, 1, .875, .75 !default; + +$ouiFontSize: 16px !default; // 5th position in scale +$ouiFontSizeXS: $ouiFontSize * nth($ouiTextScale, 7) !default; // 12px +$ouiFontSizeS: $ouiFontSize * nth($ouiTextScale, 6) !default; // 14px +$ouiFontSizeM: $ouiFontSize * nth($ouiTextScale, 4) !default; // 18px +$ouiFontSizeL: $ouiFontSize * nth($ouiTextScale, 3) !default; // 20px +$ouiFontSizeXL: $ouiFontSize * nth($ouiTextScale, 2) !default; // 28px +$ouiFontSizeXXL: $ouiFontSize * nth($ouiTextScale, 1) !default; // 36px + +// Line height +$ouiLineHeight: 1.5 !default; +$ouiBodyLineHeight: 1 !default; + +// Font weights +$ouiFontWeightLight: 200 !default; +$ouiFontWeightRegular: 300 !default; +$ouiFontWeightMedium: 400 !default; +$ouiFontWeightSemiBold: 500 !default; +$ouiFontWeightBold: 600 !default; +$ouiCodeFontWeightRegular: 400 !default; +$ouiCodeFontWeightBold: 700 !default; + +// Titles map +// Lists all the properties per OuiTitle size that then gets looped through to create the selectors. +// The map allows for tokenization and easier customization per theme, otherwise you'd have to override the selectors themselves +$ouiTitles: ( + 'xxxs': ( + 'font-size': $ouiFontSizeXS, + 'line-height': lineHeightFromBaseline(3), + 'font-weight': $ouiFontWeightBold, + 'letter-spacing': -.005em, + ), + 'xxs': ( + 'font-size': $ouiFontSizeS, + 'line-height': lineHeightFromBaseline(3), + 'font-weight': $ouiFontWeightSemiBold, + 'letter-spacing': -.005em, + ), + 'xs': ( + 'font-size': $ouiFontSize, + 'line-height': lineHeightFromBaseline(3), + 'font-weight': $ouiFontWeightSemiBold, + 'letter-spacing': -.02em, + ), + 's': ( + 'font-size': $ouiFontSizeL, + 'line-height': lineHeightFromBaseline(4), + 'font-weight': $ouiFontWeightMedium, + 'letter-spacing': -.025em, + ), + 'm': ( + 'font-size': $ouiFontSizeXL, + 'line-height': lineHeightFromBaseline(5), + 'font-weight': $ouiFontWeightRegular, + 'letter-spacing': -.04em, + ), + 'l': ( + 'font-size': $ouiFontSizeXXL, + 'line-height': lineHeightFromBaseline(6), + 'font-weight': $ouiFontWeightRegular, + 'letter-spacing': -.03em, + ), +) !default; + + +/* OUI -> EUI Aliases */ +$euiFontFamily: $ouiFontFamily; +$euiCodeFontFamily: $ouiCodeFontFamily; +$euiFontFeatureSettings: $ouiFontFeatureSettings; +$euiTextScale: $ouiTextScale; +$euiFontSize: $ouiFontSize; +$euiFontSizeXS: $ouiFontSizeXS; +$euiFontSizeS: $ouiFontSizeS; +$euiFontSizeM: $ouiFontSizeM; +$euiFontSizeL: $ouiFontSizeL; +$euiFontSizeXL: $ouiFontSizeXL; +$euiFontSizeXXL: $ouiFontSizeXXL; +$euiLineHeight: $ouiLineHeight; +$euiBodyLineHeight: $ouiBodyLineHeight; +$euiFontWeightLight: $ouiFontWeightLight; +$euiFontWeightRegular: $ouiFontWeightRegular; +$euiFontWeightMedium: $ouiFontWeightMedium; +$euiFontWeightSemiBold: $ouiFontWeightSemiBold; +$euiFontWeightBold: $ouiFontWeightBold; +$euiCodeFontWeightRegular: $ouiCodeFontWeightRegular; +$euiCodeFontWeightBold: $ouiCodeFontWeightBold; +$euiTitles: $ouiTitles; +/* End of Aliases */ diff --git a/src/themes/v9/global_styling/variables/_z_index.scss b/src/themes/v9/global_styling/variables/_z_index.scss new file mode 100644 index 0000000000..b4c55856ef --- /dev/null +++ b/src/themes/v9/global_styling/variables/_z_index.scss @@ -0,0 +1,68 @@ +/*! + * SPDX-License-Identifier: Apache-2.0 + * + * The OpenSearch Contributors require contributions made to + * this file be licensed under the Apache-2.0 license or a + * compatible open source license. + * + * Modifications Copyright OpenSearch Contributors. See + * GitHub history for details. + */ + +// Z-Index + +// Remember that z-index is relative to parent and based on the stacking context. +// z-indexes only compete against other z-indexes when they exist as children of +// that shared parent. + +// That means a popover with a settings of 2, will still show above a modal +// with a setting of 100, if it is within that modal and not besides it. + +// Generally that means it's a good idea to consider things added to this file +// as competitive only as siblings. + +// https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context + +$ouiZLevel0: 0; +$ouiZLevel1: 1000; +$ouiZLevel2: 2000; +$ouiZLevel3: 3000; +$ouiZLevel4: 4000; +$ouiZLevel5: 5000; +$ouiZLevel6: 6000; +$ouiZLevel7: 7000; +$ouiZLevel8: 8000; +$ouiZLevel9: 9000; + +$ouiZToastList: $ouiZLevel9; +$ouiZModal: $ouiZLevel8; +$ouiZMask: $ouiZLevel6; +$ouiZNavigation: $ouiZLevel6; +$ouiZContentMenu: $ouiZLevel2; +$ouiZHeader: $ouiZLevel1; +$ouiZFlyout: $ouiZHeader; +$ouiZMaskBelowHeader: $ouiZHeader; +$ouiZContent: $ouiZLevel0; + + +/* OUI -> EUI Aliases */ +$euiZLevel0: $ouiZLevel0; +$euiZLevel1: $ouiZLevel1; +$euiZLevel2: $ouiZLevel2; +$euiZLevel3: $ouiZLevel3; +$euiZLevel4: $ouiZLevel4; +$euiZLevel5: $ouiZLevel5; +$euiZLevel6: $ouiZLevel6; +$euiZLevel7: $ouiZLevel7; +$euiZLevel8: $ouiZLevel8; +$euiZLevel9: $ouiZLevel9; +$euiZToastList: $ouiZToastList; +$euiZModal: $ouiZModal; +$euiZMask: $ouiZMask; +$euiZNavigation: $ouiZNavigation; +$euiZContentMenu: $ouiZContentMenu; +$euiZHeader: $ouiZHeader; +$euiZFlyout: $ouiZFlyout; +$euiZMaskBelowHeader: $ouiZMaskBelowHeader; +$euiZContent: $ouiZContent; +/* End of Aliases */ diff --git a/src/themes/v9/v9_colors_dark.scss b/src/themes/v9/v9_colors_dark.scss new file mode 100644 index 0000000000..6186b6f3dc --- /dev/null +++ b/src/themes/v9/v9_colors_dark.scss @@ -0,0 +1,102 @@ +/*! + * SPDX-License-Identifier: Apache-2.0 + * + * The OpenSearch Contributors require contributions made to + * this file be licensed under the Apache-2.0 license or a + * compatible open source license. + * + * Modifications Copyright OpenSearch Contributors. See + * GitHub history for details. + */ + +@import 'global_styling/functions/index'; + +// These colors stay the same no matter the theme +$ouiColorGhost: #FCFEFF; +$ouiColorInk: #0A121A; + +// Core +$ouiColorPrimary: #FFC0CB; +$ouiColorSecondary: #FFC0CB; +$ouiColorAccent: #FFC0CB; + +// Status +$ouiColorSuccess: $ouiColorSecondary; +$ouiColorWarning: #FFCE7A; +$ouiColorDanger: #FF6666; + +// Grays +$ouiColorEmptyShade: #0A121A; +$ouiColorLightestShade: #101B25; +$ouiColorLightShade: #293847; +$ouiColorMediumShade: #5B6875; +$ouiColorDarkShade: #8D98A3; +$ouiColorDarkestShade: #DFE3E8; +$ouiColorFullShade: #FCFEFF; + +// Backgrounds +$ouiPageBackgroundColor: #172430; +$ouiColorHighlight: #2E2D25; + +// Variations from core +$ouiTextColor: #DFE5EF; +$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%); + +// Contrasty text variants +$ouiColorPrimaryText: makeHighContrastColor($ouiColorPrimary); +$ouiColorSecondaryText: makeHighContrastColor($ouiColorSecondary); +$ouiColorAccentText: makeHighContrastColor($ouiColorAccent); +$ouiColorWarningText: makeHighContrastColor($ouiColorWarning); +$ouiColorDangerText: makeHighContrastColor($ouiColorDanger); +$ouiColorDisabledText: makeDisabledContrastColor($ouiColorDisabled); +$ouiColorSuccessText: $ouiColorSecondaryText; +$ouiLinkColor: $ouiColorPrimaryText; + +// Charts +$ouiColorChartLines: $ouiColorLightShade; +$ouiColorChartBand: tint($ouiColorLightestShade, 2.5%); + +// Shadows +$ouiShadowColor: #000; +$ouiShadowColorLarge: #000; + + +/* OUI -> EUI Aliases */ +$euiColorGhost: $ouiColorGhost; +$euiColorInk: $ouiColorInk; +$euiColorPrimary: $ouiColorPrimary; +$euiColorSecondary: $ouiColorSecondary; +$euiColorAccent: $ouiColorAccent; +$euiColorSuccess: $ouiColorSuccess; +$euiColorWarning: $ouiColorWarning; +$euiColorDanger: $ouiColorDanger; +$euiColorEmptyShade: $ouiColorEmptyShade; +$euiColorLightestShade: $ouiColorLightestShade; +$euiColorLightShade: $ouiColorLightShade; +$euiColorMediumShade: $ouiColorMediumShade; +$euiColorDarkShade: $ouiColorDarkShade; +$euiColorDarkestShade: $ouiColorDarkestShade; +$euiColorFullShade: $ouiColorFullShade; +$euiPageBackgroundColor: $ouiPageBackgroundColor; +$euiColorHighlight: $ouiColorHighlight; +$euiTextColor: $ouiTextColor; +$euiTitleColor: $ouiTitleColor; +$euiTextSubduedColor: $ouiTextSubduedColor; +$euiColorDisabled: $ouiColorDisabled; +$euiColorPrimaryText: $ouiColorPrimaryText; +$euiColorSecondaryText: $ouiColorSecondaryText; +$euiColorAccentText: $ouiColorAccentText; +$euiColorWarningText: $ouiColorWarningText; +$euiColorDangerText: $ouiColorDangerText; +$euiColorDisabledText: $ouiColorDisabledText; +$euiColorSuccessText: $ouiColorSuccessText; +$euiLinkColor: $ouiLinkColor; +$euiColorChartLines: $ouiColorChartLines; +$euiColorChartBand: $ouiColorChartBand; +$euiShadowColor: $ouiShadowColor; +$euiShadowColorLarge: $ouiShadowColorLarge; +/* End of Aliases */ diff --git a/src/themes/v9/v9_colors_light.scss b/src/themes/v9/v9_colors_light.scss new file mode 100644 index 0000000000..cfe9d5c6bb --- /dev/null +++ b/src/themes/v9/v9_colors_light.scss @@ -0,0 +1,13 @@ +/*! + * SPDX-License-Identifier: Apache-2.0 + * + * The OpenSearch Contributors require contributions made to + * this file be licensed under the Apache-2.0 license or a + * compatible open source license. + * + * Modifications Copyright OpenSearch Contributors. See + * GitHub history for details. + */ + +// This file contains no overwrites because OUI by default is light. +// The file exists in case you ever need to write logic to flip imports in a build process. diff --git a/src/themes/v9/v9_globals.scss b/src/themes/v9/v9_globals.scss new file mode 100644 index 0000000000..54b95d2b43 --- /dev/null +++ b/src/themes/v9/v9_globals.scss @@ -0,0 +1,22 @@ +/*! + * SPDX-License-Identifier: Apache-2.0 + * + * The OpenSearch Contributors require contributions made to + * this file be licensed under the Apache-2.0 license or a + * compatible open source license. + * + * Modifications Copyright OpenSearch Contributors. See + * GitHub history for details. + */ + +// Helper file for supplying OUI Next globals (invisibles only) +// Must be imported AFTER a colors modifier file + +// Functions need to be first, since we use them in our variables and mixin definitions +@import 'global_styling/functions/index'; + +// Variables come next, and are used in some mixins +@import 'global_styling/variables/index'; + +// Mixins provide generic code expansion through helpers +@import 'global_styling/mixins/index'; diff --git a/wiki/consuming.md b/wiki/consuming.md index 22d2dfbe84..9c220eef58 100644 --- a/wiki/consuming.md +++ b/wiki/consuming.md @@ -122,6 +122,13 @@ The Next theme uses the [Source Sans 3](https://github.com/adobe-fonts/source-sa @import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&family=Source+Sans+3:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap'); ``` +// TODO update weights +The v9 theme uses the [Rubik](https://fonts.google.com/specimen/Rubik) and [Fira code](https://fonts.google.com/specimen/Fira+Code) fonts: + ```scss +// index.scss +@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap'); +``` + ### Reusing the variables in JavaScript The Sass variables are also made available for consumption as json files. This enables reuse of values in css-in-js systems like [styled-components](https://www.styled-components.com). As the following example shows, it can also make the downstream components theme-aware without much extra effort: