feat: Add V9 Theme (#1344) (#1347)

* feat: Add V9 Theme



* update changelog



* update colors and typography



---------


(cherry picked from commit a45811b)

Signed-off-by: Viraj Sanghvi <virajs@amazon.com>
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

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
 

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';

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';

src/components/button/_button.scss

@@ -17,7 +17,7 @@
   @include ouiButton;
   @include ouiSlightShadow;
 
-  border-radius: $ouiBorderRadius;
+  border-radius: $ouiButtonBorderRadius;
   min-width: $ouiButtonMinWidth;
 
   .ouiButton__content {

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;

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;

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

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.

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 */

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';

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';

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 */

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 */

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 */

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};
+}

src/themes/v9/global_styling/css_variables/_index.scss

@@ -0,0 +1,6 @@
+/*!
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+@import 'fonts';