[New Theme] Rename to Next (#835) (#837)

Also:
* Show the Next theme in the docsite


(cherry picked from commit 0365b42)

Signed-off-by: Miki <[email protected]>
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>

scripts/compile-scss.js

@@ -82,9 +82,9 @@ async function compileScssFiles(
         const { name } = path.parse(inputFilename);
         const outputFilenames = await compileScssFile(
           inputFilename,
-          path.join(destinationDirectory, `eui_${name.replace('cascadia', 'amsterdam')}.css`),
-          path.join(destinationDirectory, `eui_${name.replace('cascadia', 'amsterdam')}.json`),
-          path.join(destinationDirectory, `eui_${name.replace('cascadia', 'amsterdam')}.json.d.ts`),
+          path.join(destinationDirectory, `eui_${name.replace('next', 'amsterdam')}.css`),
+          path.join(destinationDirectory, `eui_${name.replace('next', 'amsterdam')}.json`),
+          path.join(destinationDirectory, `eui_${name.replace('next', 'amsterdam')}.json.d.ts`),
           packageName,
           true
         );

scripts/postinstall.js

@@ -36,14 +36,14 @@ if (!INIT_CWD?.startsWith?.(PWD)) {
       const destItem = path
         .join(dest, entry.name)
         .replace('oui', 'eui')
-        .replace('cascadia', 'amsterdam');
+        .replace('next', 'amsterdam');
 
       if (entry.isDirectory()) copyDirectory(srcItem, destItem);
       else fs.copyFileSync(srcItem, destItem);
     }
   };
 
   copyDirectory('src/themes/oui', 'src/themes/eui');
-  copyDirectory('src/themes/oui-cascadia', 'src/themes/eui-amsterdam');
+  copyDirectory('src/themes/oui-next', 'src/themes/eui-amsterdam');
 }
 /* End of Aliases */

src-docs/src/components/codesandbox/link.js

@@ -59,11 +59,11 @@ export const CodeSandboxLinkComponent = ({
 }) => {
   let cssFile;
   switch (context.theme) {
-    case 'cascadia-light':
-      cssFile = '@opensearch-project/oui/dist/oui_theme_cascadia_light.css';
+    case 'next-light':
+      cssFile = '@opensearch-project/oui/dist/oui_theme_next_light.css';
       break;
-    case 'cascadia-dark':
-      cssFile = '@opensearch-project/oui/dist/oui_theme_cascadia_dark.css';
+    case 'next-dark':
+      cssFile = '@opensearch-project/oui/dist/oui_theme_next_dark.css';
       break;
     case 'dark':
       cssFile = '@opensearch-project/oui/dist/oui_theme_dark.css';

src-docs/src/index.js

@@ -24,16 +24,16 @@ import { registerTheme, ExampleContext } from './services';
 import Routes from './routes';
 import themeLight from './theme_light.scss';
 import themeDark from './theme_dark.scss';
-import themeCascadiaLight from './theme_cascadia_light.scss';
-import themeCascadiaDark from './theme_cascadia_dark.scss';
+import themeNextLight from './theme_next_light.scss';
+import themeNextDark from './theme_next_dark.scss';
 import { ThemeProvider } from './components/with_theme/theme_context';
 import ScrollToHash from './components/scroll_to_hash';
 import { LinkWrapper } from './views/link_wrapper';
 
 registerTheme('light', [themeLight]);
 registerTheme('dark', [themeDark]);
-registerTheme('cascadia-light', [themeCascadiaLight]);
-registerTheme('cascadia-dark', [themeCascadiaDark]);
+registerTheme('next-light', [themeNextLight]);
+registerTheme('next-dark', [themeNextDark]);
 
 // Set up app
 

src-docs/src/theme_cascadia_dark.scss → src-docs/src/theme_next_dark.scss

@@ -10,9 +10,9 @@
  */
 
 // sass-lint:disable no-url-domains, no-url-protocols
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Roboto+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');
+@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');
 
-@import '../../src/theme_cascadia_dark';
+@import '../../src/theme_next_dark';
 @import './components/guide_components';
 @import './services/playground/index';
 @import './views/suggest/global_filter_group';

src-docs/src/theme_cascadia_light.scss → src-docs/src/theme_next_light.scss

@@ -10,9 +10,9 @@
  */
 
 // sass-lint:disable no-url-domains, no-url-protocols
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Roboto+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');
+@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');
 
-@import '../../src/theme_cascadia_light';
+@import '../../src/theme_next_light';
 @import './components/guide_components';
 @import './services/playground/index';
 @import './views/suggest/global_filter_group';

src-docs/src/views/guidelines/_get_sass_vars.js

@@ -11,17 +11,17 @@
 
 import lightColors from '!!sass-vars-to-js-loader!../../../../src/global_styling/variables/_colors.scss';
 import darkColors from '!!sass-vars-to-js-loader!../../../../src/themes/oui/oui_colors_dark.scss';
-import lightCascadiaColors from '!!sass-vars-to-js-loader!../../../../src/themes/oui-cascadia/oui_cascadia_colors_light.scss';
-import darkCascadiaColors from '!!sass-vars-to-js-loader!../../../../src/themes/oui-cascadia/oui_cascadia_colors_dark.scss';
+import lightNextColors from '!!sass-vars-to-js-loader!../../../../src/themes/oui-next/oui_next_colors_light.scss';
+import darkNextColors from '!!sass-vars-to-js-loader!../../../../src/themes/oui-next/oui_next_colors_dark.scss';
 
 export const getSassVars = (theme) => {
   let palette;
   switch (theme) {
-    case 'cascadia-dark':
-      palette = { ...darkColors, ...darkCascadiaColors };
+    case 'next-dark':
+      palette = { ...darkColors, ...darkNextColors };
       break;
-    case 'cascadia-light':
-      palette = { ...lightColors, ...lightCascadiaColors };
+    case 'next-light':
+      palette = { ...lightColors, ...lightNextColors };
       break;
     case 'dark':
       palette = darkColors;

src-docs/src/views/panel/panel_example.js

@@ -168,10 +168,8 @@ export const PanelExample = {
             title="Certain allowed combinations of shadow, border, and color depend on the current theme.">
             <p>
               For instance, only plain or transparent panels can have a border
-              and/or shadow. The Cascadia theme doesn&apos;t allow combining the{' '}
-              <OuiCode>hasBorder</OuiCode> option with{' '}
-              <OuiCode>hasShadow</OuiCode>. The default theme only allows
-              removing the border if both <OuiCode>hasShadow</OuiCode> and{' '}
+              and/or shadow. The default theme only allows removing the border
+              if both <OuiCode>hasShadow</OuiCode> and{' '}
               <OuiCode>hasBorder</OuiCode> are set to <OuiCode>false</OuiCode>.
             </p>
           </OuiCallOut>

src-docs/src/views/panel/panel_shadow.js

@@ -9,15 +9,11 @@
  * GitHub history for details.
  */
 
-import React, { useContext } from 'react';
+import React from 'react';
 
 import { OuiPanel, OuiCode, OuiSpacer } from '../../../../src/components';
-import { ThemeContext } from '../../components';
 
 export default () => {
-  const themeContext = useContext(ThemeContext);
-  const isCascadiaTheme = themeContext.theme.includes('cascadia');
-
   return (
     <div>
       <OuiPanel hasShadow={false}>
@@ -26,16 +22,6 @@ export default () => {
 
       <OuiSpacer />
 
-      {/* This example only works for the Cascadia theme. The default theme has `hasBorder={true}` by default. */}
-      {isCascadiaTheme && (
-        <>
-          <OuiPanel hasBorder={true}>
-            <OuiCode>{'hasBorder={true}'}</OuiCode>
-          </OuiPanel>
-          <OuiSpacer />
-        </>
-      )}
-
       <OuiPanel hasShadow={false} hasBorder={false}>
         <OuiCode>{'hasShadow={false} hasBorder={false}'}</OuiCode>
       </OuiPanel>

src/components/datagrid/_data_grid_data_row.scss

@@ -177,8 +177,13 @@
   overflow: hidden;
   transition: none; // Have to take out the generic transition so it is instaneous on focus
   box-shadow: none !important; // sass-lint:disable-line no-important
+
+  /* ToDo: Remove unnecessary logic: the old beta theme has
+   * evolved and the statement below about the `Next` theme
+   * is not valid.
+   */
   // Remove default .ouiButtonIcon--fill border
-  // This way we don't need to animate the border that is inexistent in Cascadia and unnecessary for a fill button
+  // This way we don't need to animate the border that is inexistent in Next and unnecessary for a fill button
   border: none;
 
   &-isActive {

src/components/header/header_section/header_section_item.tsx

@@ -44,7 +44,6 @@ const borderToClassNameMap: { [border in Border]: string | undefined } = {
 export type OuiHeaderSectionItemProps = CommonProps & {
   /**
    * Side to display a short border on.
-   * Not supported in Cascadia theme.
    */
   border?: Border;
   /**

src/components/link/_link.scss

@@ -46,7 +46,7 @@ $ouiLinkColors: (
 
       &:focus {
         @include ouiFocusBackground($color);
-        @include ouiFocusRing(null, 0);
+        @include ouiFocusRing(null);
       }
     }
   }

src/components/page/_restrict_width.ts

@@ -44,7 +44,7 @@ import { CSSProperties } from 'react';
 export type _OuiPageRestrictWidth = {
   /**
    * Sets the max-width of the page,
-   * set to `true` to use the default size of `1000px (1200 for Cascadia)`,
+   * set to `true` to use the default size of `1000px`,
    * set to `false` to not restrict the width,
    * set to a number for a custom width in px,
    * set to a string for a custom width in custom measurement.

src/components/panel/panel.tsx

@@ -148,8 +148,12 @@ export const OuiPanel: FunctionComponent<OuiPanelProps> = ({
     borderRadiusToClassNameMap[borderRadius],
     `ouiPanel--${color}`,
     {
+      /* ToDo: Remove unnecessary logic: the old beta theme has
+       * evolved and the statement below about the `Next` theme
+       * is not valid.
+       */
       // The `no` classes turn off the option for default theme
-      // While the `has` classes turn it on for Cascadia
+      // While the `has` classes turn it on for Next
       'ouiPanel--hasShadow': canHaveShadow && hasShadow === true,
       'ouiPanel--noShadow': !canHaveShadow || hasShadow === false,
       'ouiPanel--hasBorder': canHaveBorder && hasBorder === true,

src/components/steps/step_horizontal.tsx

@@ -49,12 +49,10 @@ export interface OuiStepHorizontalProps
   extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'>,
     CommonProps {
   /**
-   * **DEPRECATED IN CASCADIA**
    * Adds to the line before the indicator for showing current progress
    */
   isSelected?: boolean;
   /**
-   * **DEPRECATED IN CASCADIA**
    * Adds to the line after the indicator for showing current progress
    */
   isComplete?: boolean;

src/components/steps/step_number.tsx

@@ -66,7 +66,6 @@ export interface OuiStepNumberProps
   status?: OuiStepStatus;
   number?: number;
   /**
-   * **DEPRECATED IN CASCADIA**
    * Uses a border and removes the step number.
    */
   isHollow?: boolean;

src/components/tree_view/tree_view.scss

@@ -40,7 +40,7 @@
   text-align-last: left;
 
   &:focus {
-    @include ouiFocusRing('small', 'inner');
+    @include ouiFocusRing('small');
   }
 
   &:hover,

src/global_styling/mixins/_form.scss

@@ -356,27 +356,9 @@
   }
 }
 
-@mixin ouiCustomControlFocused($cascadiaSelector: null) {
-  // Requires a selector to work with the Cascadia outline styles
-  @if ($cascadiaSelector) {
-    + #{$cascadiaSelector} {
-      outline: $ouiFocusRingSize solid currentColor;
-    }
-
-    // Chrome
-    &:focus-visible + #{$cascadiaSelector} {
-      outline-style: auto;
-      outline-offset: 3px;
-    }
-
-    &:not(:focus-visible) + #{$cascadiaSelector} {
-      outline: none;
-    }
-  } @else {
-    // Default theme
-    @include ouiFocusRing('small', 'outer');
-    border-color: $ouiColorPrimary;
-  }
+@mixin ouiCustomControlFocused {
+  @include ouiFocusRing('small');
+  border-color: $ouiColorPrimary;
 }
 
 @mixin ouiHiddenSelectableInput {
@@ -423,6 +405,6 @@
 @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($cascadiaSelector: null) { @include ouiCustomControlFocused($cascadiaSelector); }
+@mixin euiCustomControlFocused { @include ouiCustomControlFocused; }
 @mixin euiHiddenSelectableInput { @include ouiHiddenSelectableInput; }
 /* End of Aliases */

src/global_styling/mixins/_states.scss

@@ -9,7 +9,7 @@
  * GitHub history for details.
  */
 
-@mixin ouiFocusRing($size: 'small', $cascadiaOnlyProp: null) {
+@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
@@ -62,7 +62,7 @@
 
 
 /* OUI -> EUI Aliases */
-@mixin euiFocusRing($size: 'small', $cascadiaOnlyProp: null) { @include ouiFocusRing($size, $cascadiaOnlyProp); }
+@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); }

src/theme_cascadia_dark.scss → src/theme_next_dark.scss

@@ -10,10 +10,10 @@
  */
 
 // These are variable overwrites used only for this theme.
-@import 'themes/oui-cascadia/oui_cascadia_colors_dark';
+@import 'themes/oui-next/oui_next_colors_dark';
 
 // Global styling
-@import 'themes/oui-cascadia/global_styling/index';
+@import 'themes/oui-next/global_styling/index';
 
 // Components
 @import 'components/index';

src/theme_cascadia_light.scss → src/theme_next_light.scss

@@ -10,10 +10,10 @@
  */
 
 // This is the default theme.
-@import 'themes/oui-cascadia/oui_cascadia_colors_light';
+@import 'themes/oui-next/oui_next_colors_light';
 
 // Global styling
-@import 'themes/oui-cascadia/global_styling/index';
+@import 'themes/oui-next/global_styling/index';
 
 // Components
 @import 'components/index';

src/themes/oui-cascadia/global_styling/mixins/_form.scss → src/themes/oui-next/global_styling/mixins/_form.scss

@@ -356,27 +356,9 @@
   }
 }
 
-@mixin ouiCustomControlFocused($cascadiaSelector: null) {
-  // Requires a selector to work with the Cascadia outline styles
-  @if ($cascadiaSelector) {
-    + #{$cascadiaSelector} {
-      outline: $ouiFocusRingSize solid currentColor;
-    }
-
-    // Chrome
-    &:focus-visible + #{$cascadiaSelector} {
-      outline-style: auto;
-      outline-offset: 3px;
-    }
-
-    &:not(:focus-visible) + #{$cascadiaSelector} {
-      outline: none;
-    }
-  } @else {
-    // Default theme
-    @include ouiFocusRing('small', 'outer');
-    border-color: $ouiColorPrimary;
-  }
+@mixin ouiCustomControlFocused {
+  @include ouiFocusRing('small');
+  border-color: $ouiColorPrimary;
 }
 
 @mixin ouiHiddenSelectableInput {
@@ -423,6 +405,6 @@
 @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($cascadiaSelector: null) { @include ouiCustomControlFocused($cascadiaSelector); }
+@mixin euiCustomControlFocused { @include ouiCustomControlFocused; }
 @mixin euiHiddenSelectableInput { @include ouiHiddenSelectableInput; }
 /* End of Aliases */

src/themes/oui-cascadia/global_styling/mixins/_states.scss → src/themes/oui-next/global_styling/mixins/_states.scss

@@ -9,7 +9,7 @@
  * GitHub history for details.
  */
 
-@mixin ouiFocusRing($size: 'small', $cascadiaOnlyProp: null) {
+@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
@@ -62,7 +62,7 @@
 
 
 /* OUI -> EUI Aliases */
-@mixin euiFocusRing($size: 'small', $cascadiaOnlyProp: null) { @include ouiFocusRing($size, $cascadiaOnlyProp); }
+@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); }

src/themes/oui-cascadia/oui_cascadia_globals.scss → src/themes/oui-next/oui_next_globals.scss

@@ -9,7 +9,7 @@
  * GitHub history for details.
  */
 
-// Helper file for supplying OUI Cascadia globals (invisibles only)
+// 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