From e6a2842c333613dbcb0237c13a0a4844f5fe8ce2 Mon Sep 17 00:00:00 2001
From: "opensearch-trigger-bot[bot]"
 <98922864+opensearch-trigger-bot[bot]@users.noreply.github.com>
Date: Tue, 20 Jun 2023 14:28:11 -0700
Subject: [PATCH] [New Theme] Rename to `Next` (#835) (#837)

Also:
* Show the Next theme in the docsite


(cherry picked from commit 0365b429fd7935ef8b8e5b31f232c4e6a73c67e1)

Signed-off-by: Miki <miki@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>
---
 scripts/compile-scss.js                       |  6 ++---
 scripts/postinstall.js                        |  4 +--
 src-docs/src/components/codesandbox/link.js   |  8 +++---
 src-docs/src/index.js                         |  8 +++---
 ...ascadia_dark.scss => theme_next_dark.scss} |  4 +--
 ...cadia_light.scss => theme_next_light.scss} |  4 +--
 .../src/views/guidelines/_get_sass_vars.js    | 12 ++++-----
 src-docs/src/views/panel/panel_example.js     |  6 ++---
 src-docs/src/views/panel/panel_shadow.js      | 16 +-----------
 .../datagrid/_data_grid_data_row.scss         |  7 ++++-
 .../header_section/header_section_item.tsx    |  1 -
 src/components/link/_link.scss                |  2 +-
 src/components/page/_restrict_width.ts        |  2 +-
 src/components/panel/panel.tsx                |  6 ++++-
 src/components/steps/step_horizontal.tsx      |  2 --
 src/components/steps/step_number.tsx          |  1 -
 src/components/tree_view/tree_view.scss       |  2 +-
 src/global_styling/mixins/_form.scss          | 26 +++----------------
 src/global_styling/mixins/_states.scss        |  4 +--
 ...ascadia_dark.scss => theme_next_dark.scss} |  4 +--
 ...cadia_light.scss => theme_next_light.scss} |  4 +--
 .../global_styling/css_variables/_fonts.scss  |  0
 .../global_styling/css_variables/_index.scss  |  0
 .../global_styling/functions/_colors.scss     |  0
 .../global_styling/functions/_index.scss      |  0
 .../global_styling/functions/_math.scss       |  0
 .../global_styling/index.scss                 |  0
 .../global_styling/mixins/_beta_badge.scss    |  0
 .../global_styling/mixins/_button.scss        |  0
 .../global_styling/mixins/_form.scss          | 26 +++----------------
 .../global_styling/mixins/_header.scss        |  0
 .../global_styling/mixins/_helpers.scss       |  0
 .../global_styling/mixins/_icons.scss         |  0
 .../global_styling/mixins/_index.scss         |  0
 .../global_styling/mixins/_loading.scss       |  0
 .../global_styling/mixins/_panel.scss         |  0
 .../global_styling/mixins/_popover.scss       |  0
 .../global_styling/mixins/_range.scss         |  0
 .../global_styling/mixins/_responsive.scss    |  0
 .../global_styling/mixins/_shadow.scss        |  0
 .../global_styling/mixins/_size.scss          |  0
 .../global_styling/mixins/_states.scss        |  4 +--
 .../global_styling/mixins/_tool_tip.scss      |  0
 .../global_styling/mixins/_typography.scss    |  0
 .../global_styling/reset/_hacks.scss          |  0
 .../global_styling/reset/_index.scss          |  0
 .../global_styling/reset/_reset.scss          |  0
 .../global_styling/reset/_scrollbar.scss      |  0
 .../global_styling/utility/_animations.scss   |  0
 .../global_styling/utility/_index.scss        |  0
 .../global_styling/utility/_utility.scss      |  0
 .../global_styling/variables/_animations.scss |  0
 .../global_styling/variables/_borders.scss    |  0
 .../global_styling/variables/_buttons.scss    |  0
 .../global_styling/variables/_colors.scss     |  0
 .../global_styling/variables/_form.scss       |  0
 .../global_styling/variables/_header.scss     |  0
 .../global_styling/variables/_index.scss      |  0
 .../global_styling/variables/_page.scss       |  0
 .../global_styling/variables/_panel.scss      |  0
 .../global_styling/variables/_responsive.scss |  0
 .../global_styling/variables/_shadows.scss    |  0
 .../global_styling/variables/_size.scss       |  0
 .../global_styling/variables/_states.scss     |  0
 .../global_styling/variables/_tool_tip.scss   |  0
 .../global_styling/variables/_typography.scss |  0
 .../global_styling/variables/_z_index.scss    |  0
 .../oui_next_colors_dark.scss}                |  0
 .../oui_next_colors_light.scss}               |  0
 .../oui_next_globals.scss}                    |  2 +-
 src/themes/themes.ts                          |  8 ++++++
 wiki/consuming.md                             | 17 ++++++------
 wiki/theming.md                               |  4 +--
 73 files changed, 76 insertions(+), 114 deletions(-)
 rename src-docs/src/{theme_cascadia_dark.scss => theme_next_dark.scss} (70%)
 rename src-docs/src/{theme_cascadia_light.scss => theme_next_light.scss} (70%)
 rename src/{theme_cascadia_dark.scss => theme_next_dark.scss} (80%)
 rename src/{theme_cascadia_light.scss => theme_next_light.scss} (79%)
 rename src/themes/{oui-cascadia => oui-next}/global_styling/css_variables/_fonts.scss (100%)
 rename src/themes/{oui-cascadia => oui-next}/global_styling/css_variables/_index.scss (100%)
 rename src/themes/{oui-cascadia => oui-next}/global_styling/functions/_colors.scss (100%)
 rename src/themes/{oui-cascadia => oui-next}/global_styling/functions/_index.scss (100%)
 rename src/themes/{oui-cascadia => oui-next}/global_styling/functions/_math.scss (100%)
 rename src/themes/{oui-cascadia => oui-next}/global_styling/index.scss (100%)
 rename src/themes/{oui-cascadia => oui-next}/global_styling/mixins/_beta_badge.scss (100%)
 rename src/themes/{oui-cascadia => oui-next}/global_styling/mixins/_button.scss (100%)
 rename src/themes/{oui-cascadia => oui-next}/global_styling/mixins/_form.scss (94%)
 rename src/themes/{oui-cascadia => oui-next}/global_styling/mixins/_header.scss (100%)
 rename src/themes/{oui-cascadia => oui-next}/global_styling/mixins/_helpers.scss (100%)
 rename src/themes/{oui-cascadia => oui-next}/global_styling/mixins/_icons.scss (100%)
 rename src/themes/{oui-cascadia => oui-next}/global_styling/mixins/_index.scss (100%)
 rename src/themes/{oui-cascadia => oui-next}/global_styling/mixins/_loading.scss (100%)
 rename src/themes/{oui-cascadia => oui-next}/global_styling/mixins/_panel.scss (100%)
 rename src/themes/{oui-cascadia => oui-next}/global_styling/mixins/_popover.scss (100%)
 rename src/themes/{oui-cascadia => oui-next}/global_styling/mixins/_range.scss (100%)
 rename src/themes/{oui-cascadia => oui-next}/global_styling/mixins/_responsive.scss (100%)
 rename src/themes/{oui-cascadia => oui-next}/global_styling/mixins/_shadow.scss (100%)
 rename src/themes/{oui-cascadia => oui-next}/global_styling/mixins/_size.scss (100%)
 rename src/themes/{oui-cascadia => oui-next}/global_styling/mixins/_states.scss (92%)
 rename src/themes/{oui-cascadia => oui-next}/global_styling/mixins/_tool_tip.scss (100%)
 rename src/themes/{oui-cascadia => oui-next}/global_styling/mixins/_typography.scss (100%)
 rename src/themes/{oui-cascadia => oui-next}/global_styling/reset/_hacks.scss (100%)
 rename src/themes/{oui-cascadia => oui-next}/global_styling/reset/_index.scss (100%)
 rename src/themes/{oui-cascadia => oui-next}/global_styling/reset/_reset.scss (100%)
 rename src/themes/{oui-cascadia => oui-next}/global_styling/reset/_scrollbar.scss (100%)
 rename src/themes/{oui-cascadia => oui-next}/global_styling/utility/_animations.scss (100%)
 rename src/themes/{oui-cascadia => oui-next}/global_styling/utility/_index.scss (100%)
 rename src/themes/{oui-cascadia => oui-next}/global_styling/utility/_utility.scss (100%)
 rename src/themes/{oui-cascadia => oui-next}/global_styling/variables/_animations.scss (100%)
 rename src/themes/{oui-cascadia => oui-next}/global_styling/variables/_borders.scss (100%)
 rename src/themes/{oui-cascadia => oui-next}/global_styling/variables/_buttons.scss (100%)
 rename src/themes/{oui-cascadia => oui-next}/global_styling/variables/_colors.scss (100%)
 rename src/themes/{oui-cascadia => oui-next}/global_styling/variables/_form.scss (100%)
 rename src/themes/{oui-cascadia => oui-next}/global_styling/variables/_header.scss (100%)
 rename src/themes/{oui-cascadia => oui-next}/global_styling/variables/_index.scss (100%)
 rename src/themes/{oui-cascadia => oui-next}/global_styling/variables/_page.scss (100%)
 rename src/themes/{oui-cascadia => oui-next}/global_styling/variables/_panel.scss (100%)
 rename src/themes/{oui-cascadia => oui-next}/global_styling/variables/_responsive.scss (100%)
 rename src/themes/{oui-cascadia => oui-next}/global_styling/variables/_shadows.scss (100%)
 rename src/themes/{oui-cascadia => oui-next}/global_styling/variables/_size.scss (100%)
 rename src/themes/{oui-cascadia => oui-next}/global_styling/variables/_states.scss (100%)
 rename src/themes/{oui-cascadia => oui-next}/global_styling/variables/_tool_tip.scss (100%)
 rename src/themes/{oui-cascadia => oui-next}/global_styling/variables/_typography.scss (100%)
 rename src/themes/{oui-cascadia => oui-next}/global_styling/variables/_z_index.scss (100%)
 rename src/themes/{oui-cascadia/oui_cascadia_colors_dark.scss => oui-next/oui_next_colors_dark.scss} (100%)
 rename src/themes/{oui-cascadia/oui_cascadia_colors_light.scss => oui-next/oui_next_colors_light.scss} (100%)
 rename src/themes/{oui-cascadia/oui_cascadia_globals.scss => oui-next/oui_next_globals.scss} (90%)

diff --git a/scripts/compile-scss.js b/scripts/compile-scss.js
index 6e1342ab16..ef36b3386a 100755
--- a/scripts/compile-scss.js
+++ b/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
         );
diff --git a/scripts/postinstall.js b/scripts/postinstall.js
index d9aed75256..e5f4a2bf5b 100644
--- a/scripts/postinstall.js
+++ b/scripts/postinstall.js
@@ -36,7 +36,7 @@ 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);
@@ -44,6 +44,6 @@ if (!INIT_CWD?.startsWith?.(PWD)) {
   };
 
   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 */
diff --git a/src-docs/src/components/codesandbox/link.js b/src-docs/src/components/codesandbox/link.js
index f0f7920605..6c2ef46f21 100644
--- a/src-docs/src/components/codesandbox/link.js
+++ b/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';
diff --git a/src-docs/src/index.js b/src-docs/src/index.js
index f308ca577e..1efd1cbfec 100644
--- a/src-docs/src/index.js
+++ b/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
 
diff --git a/src-docs/src/theme_cascadia_dark.scss b/src-docs/src/theme_next_dark.scss
similarity index 70%
rename from src-docs/src/theme_cascadia_dark.scss
rename to src-docs/src/theme_next_dark.scss
index 4ade42cd98..cab47044b0 100644
--- a/src-docs/src/theme_cascadia_dark.scss
+++ b/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';
diff --git a/src-docs/src/theme_cascadia_light.scss b/src-docs/src/theme_next_light.scss
similarity index 70%
rename from src-docs/src/theme_cascadia_light.scss
rename to src-docs/src/theme_next_light.scss
index fbe33f98da..4ce311637c 100644
--- a/src-docs/src/theme_cascadia_light.scss
+++ b/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';
diff --git a/src-docs/src/views/guidelines/_get_sass_vars.js b/src-docs/src/views/guidelines/_get_sass_vars.js
index b47218d2cd..8edec1c515 100644
--- a/src-docs/src/views/guidelines/_get_sass_vars.js
+++ b/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;
diff --git a/src-docs/src/views/panel/panel_example.js b/src-docs/src/views/panel/panel_example.js
index 40b47fe7c2..a23015d405 100644
--- a/src-docs/src/views/panel/panel_example.js
+++ b/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>
diff --git a/src-docs/src/views/panel/panel_shadow.js b/src-docs/src/views/panel/panel_shadow.js
index 26b49a51c2..2508dc47d4 100644
--- a/src-docs/src/views/panel/panel_shadow.js
+++ b/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>
diff --git a/src/components/datagrid/_data_grid_data_row.scss b/src/components/datagrid/_data_grid_data_row.scss
index 1c20e78ee1..480477c43c 100644
--- a/src/components/datagrid/_data_grid_data_row.scss
+++ b/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 {
diff --git a/src/components/header/header_section/header_section_item.tsx b/src/components/header/header_section/header_section_item.tsx
index 48021581b7..62524c3b9d 100644
--- a/src/components/header/header_section/header_section_item.tsx
+++ b/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;
   /**
diff --git a/src/components/link/_link.scss b/src/components/link/_link.scss
index cf9a157408..3754212d6a 100644
--- a/src/components/link/_link.scss
+++ b/src/components/link/_link.scss
@@ -46,7 +46,7 @@ $ouiLinkColors: (
 
       &:focus {
         @include ouiFocusBackground($color);
-        @include ouiFocusRing(null, 0);
+        @include ouiFocusRing(null);
       }
     }
   }
diff --git a/src/components/page/_restrict_width.ts b/src/components/page/_restrict_width.ts
index 85d307b4fa..449f7fe7a1 100644
--- a/src/components/page/_restrict_width.ts
+++ b/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.
diff --git a/src/components/panel/panel.tsx b/src/components/panel/panel.tsx
index 9d8a9d22e0..062f570dab 100644
--- a/src/components/panel/panel.tsx
+++ b/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,
diff --git a/src/components/steps/step_horizontal.tsx b/src/components/steps/step_horizontal.tsx
index aecf6958fe..4c0d82831c 100644
--- a/src/components/steps/step_horizontal.tsx
+++ b/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;
diff --git a/src/components/steps/step_number.tsx b/src/components/steps/step_number.tsx
index 15c62ffbab..bab3b3fac9 100644
--- a/src/components/steps/step_number.tsx
+++ b/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;
diff --git a/src/components/tree_view/tree_view.scss b/src/components/tree_view/tree_view.scss
index 049104c3a3..71ace7da98 100644
--- a/src/components/tree_view/tree_view.scss
+++ b/src/components/tree_view/tree_view.scss
@@ -40,7 +40,7 @@
   text-align-last: left;
 
   &:focus {
-    @include ouiFocusRing('small', 'inner');
+    @include ouiFocusRing('small');
   }
 
   &:hover,
diff --git a/src/global_styling/mixins/_form.scss b/src/global_styling/mixins/_form.scss
index b8600482fc..0f61e5bd21 100644
--- a/src/global_styling/mixins/_form.scss
+++ b/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 */
diff --git a/src/global_styling/mixins/_states.scss b/src/global_styling/mixins/_states.scss
index 8aa848bbe0..6f3d8b46d9 100644
--- a/src/global_styling/mixins/_states.scss
+++ b/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); }
diff --git a/src/theme_cascadia_dark.scss b/src/theme_next_dark.scss
similarity index 80%
rename from src/theme_cascadia_dark.scss
rename to src/theme_next_dark.scss
index b7aaa93671..189d02a640 100644
--- a/src/theme_cascadia_dark.scss
+++ b/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';
diff --git a/src/theme_cascadia_light.scss b/src/theme_next_light.scss
similarity index 79%
rename from src/theme_cascadia_light.scss
rename to src/theme_next_light.scss
index 14a66c62c9..064d8ada9e 100644
--- a/src/theme_cascadia_light.scss
+++ b/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';
diff --git a/src/themes/oui-cascadia/global_styling/css_variables/_fonts.scss b/src/themes/oui-next/global_styling/css_variables/_fonts.scss
similarity index 100%
rename from src/themes/oui-cascadia/global_styling/css_variables/_fonts.scss
rename to src/themes/oui-next/global_styling/css_variables/_fonts.scss
diff --git a/src/themes/oui-cascadia/global_styling/css_variables/_index.scss b/src/themes/oui-next/global_styling/css_variables/_index.scss
similarity index 100%
rename from src/themes/oui-cascadia/global_styling/css_variables/_index.scss
rename to src/themes/oui-next/global_styling/css_variables/_index.scss
diff --git a/src/themes/oui-cascadia/global_styling/functions/_colors.scss b/src/themes/oui-next/global_styling/functions/_colors.scss
similarity index 100%
rename from src/themes/oui-cascadia/global_styling/functions/_colors.scss
rename to src/themes/oui-next/global_styling/functions/_colors.scss
diff --git a/src/themes/oui-cascadia/global_styling/functions/_index.scss b/src/themes/oui-next/global_styling/functions/_index.scss
similarity index 100%
rename from src/themes/oui-cascadia/global_styling/functions/_index.scss
rename to src/themes/oui-next/global_styling/functions/_index.scss
diff --git a/src/themes/oui-cascadia/global_styling/functions/_math.scss b/src/themes/oui-next/global_styling/functions/_math.scss
similarity index 100%
rename from src/themes/oui-cascadia/global_styling/functions/_math.scss
rename to src/themes/oui-next/global_styling/functions/_math.scss
diff --git a/src/themes/oui-cascadia/global_styling/index.scss b/src/themes/oui-next/global_styling/index.scss
similarity index 100%
rename from src/themes/oui-cascadia/global_styling/index.scss
rename to src/themes/oui-next/global_styling/index.scss
diff --git a/src/themes/oui-cascadia/global_styling/mixins/_beta_badge.scss b/src/themes/oui-next/global_styling/mixins/_beta_badge.scss
similarity index 100%
rename from src/themes/oui-cascadia/global_styling/mixins/_beta_badge.scss
rename to src/themes/oui-next/global_styling/mixins/_beta_badge.scss
diff --git a/src/themes/oui-cascadia/global_styling/mixins/_button.scss b/src/themes/oui-next/global_styling/mixins/_button.scss
similarity index 100%
rename from src/themes/oui-cascadia/global_styling/mixins/_button.scss
rename to src/themes/oui-next/global_styling/mixins/_button.scss
diff --git a/src/themes/oui-cascadia/global_styling/mixins/_form.scss b/src/themes/oui-next/global_styling/mixins/_form.scss
similarity index 94%
rename from src/themes/oui-cascadia/global_styling/mixins/_form.scss
rename to src/themes/oui-next/global_styling/mixins/_form.scss
index b8600482fc..0f61e5bd21 100644
--- a/src/themes/oui-cascadia/global_styling/mixins/_form.scss
+++ b/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 */
diff --git a/src/themes/oui-cascadia/global_styling/mixins/_header.scss b/src/themes/oui-next/global_styling/mixins/_header.scss
similarity index 100%
rename from src/themes/oui-cascadia/global_styling/mixins/_header.scss
rename to src/themes/oui-next/global_styling/mixins/_header.scss
diff --git a/src/themes/oui-cascadia/global_styling/mixins/_helpers.scss b/src/themes/oui-next/global_styling/mixins/_helpers.scss
similarity index 100%
rename from src/themes/oui-cascadia/global_styling/mixins/_helpers.scss
rename to src/themes/oui-next/global_styling/mixins/_helpers.scss
diff --git a/src/themes/oui-cascadia/global_styling/mixins/_icons.scss b/src/themes/oui-next/global_styling/mixins/_icons.scss
similarity index 100%
rename from src/themes/oui-cascadia/global_styling/mixins/_icons.scss
rename to src/themes/oui-next/global_styling/mixins/_icons.scss
diff --git a/src/themes/oui-cascadia/global_styling/mixins/_index.scss b/src/themes/oui-next/global_styling/mixins/_index.scss
similarity index 100%
rename from src/themes/oui-cascadia/global_styling/mixins/_index.scss
rename to src/themes/oui-next/global_styling/mixins/_index.scss
diff --git a/src/themes/oui-cascadia/global_styling/mixins/_loading.scss b/src/themes/oui-next/global_styling/mixins/_loading.scss
similarity index 100%
rename from src/themes/oui-cascadia/global_styling/mixins/_loading.scss
rename to src/themes/oui-next/global_styling/mixins/_loading.scss
diff --git a/src/themes/oui-cascadia/global_styling/mixins/_panel.scss b/src/themes/oui-next/global_styling/mixins/_panel.scss
similarity index 100%
rename from src/themes/oui-cascadia/global_styling/mixins/_panel.scss
rename to src/themes/oui-next/global_styling/mixins/_panel.scss
diff --git a/src/themes/oui-cascadia/global_styling/mixins/_popover.scss b/src/themes/oui-next/global_styling/mixins/_popover.scss
similarity index 100%
rename from src/themes/oui-cascadia/global_styling/mixins/_popover.scss
rename to src/themes/oui-next/global_styling/mixins/_popover.scss
diff --git a/src/themes/oui-cascadia/global_styling/mixins/_range.scss b/src/themes/oui-next/global_styling/mixins/_range.scss
similarity index 100%
rename from src/themes/oui-cascadia/global_styling/mixins/_range.scss
rename to src/themes/oui-next/global_styling/mixins/_range.scss
diff --git a/src/themes/oui-cascadia/global_styling/mixins/_responsive.scss b/src/themes/oui-next/global_styling/mixins/_responsive.scss
similarity index 100%
rename from src/themes/oui-cascadia/global_styling/mixins/_responsive.scss
rename to src/themes/oui-next/global_styling/mixins/_responsive.scss
diff --git a/src/themes/oui-cascadia/global_styling/mixins/_shadow.scss b/src/themes/oui-next/global_styling/mixins/_shadow.scss
similarity index 100%
rename from src/themes/oui-cascadia/global_styling/mixins/_shadow.scss
rename to src/themes/oui-next/global_styling/mixins/_shadow.scss
diff --git a/src/themes/oui-cascadia/global_styling/mixins/_size.scss b/src/themes/oui-next/global_styling/mixins/_size.scss
similarity index 100%
rename from src/themes/oui-cascadia/global_styling/mixins/_size.scss
rename to src/themes/oui-next/global_styling/mixins/_size.scss
diff --git a/src/themes/oui-cascadia/global_styling/mixins/_states.scss b/src/themes/oui-next/global_styling/mixins/_states.scss
similarity index 92%
rename from src/themes/oui-cascadia/global_styling/mixins/_states.scss
rename to src/themes/oui-next/global_styling/mixins/_states.scss
index 8aa848bbe0..6f3d8b46d9 100644
--- a/src/themes/oui-cascadia/global_styling/mixins/_states.scss
+++ b/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); }
diff --git a/src/themes/oui-cascadia/global_styling/mixins/_tool_tip.scss b/src/themes/oui-next/global_styling/mixins/_tool_tip.scss
similarity index 100%
rename from src/themes/oui-cascadia/global_styling/mixins/_tool_tip.scss
rename to src/themes/oui-next/global_styling/mixins/_tool_tip.scss
diff --git a/src/themes/oui-cascadia/global_styling/mixins/_typography.scss b/src/themes/oui-next/global_styling/mixins/_typography.scss
similarity index 100%
rename from src/themes/oui-cascadia/global_styling/mixins/_typography.scss
rename to src/themes/oui-next/global_styling/mixins/_typography.scss
diff --git a/src/themes/oui-cascadia/global_styling/reset/_hacks.scss b/src/themes/oui-next/global_styling/reset/_hacks.scss
similarity index 100%
rename from src/themes/oui-cascadia/global_styling/reset/_hacks.scss
rename to src/themes/oui-next/global_styling/reset/_hacks.scss
diff --git a/src/themes/oui-cascadia/global_styling/reset/_index.scss b/src/themes/oui-next/global_styling/reset/_index.scss
similarity index 100%
rename from src/themes/oui-cascadia/global_styling/reset/_index.scss
rename to src/themes/oui-next/global_styling/reset/_index.scss
diff --git a/src/themes/oui-cascadia/global_styling/reset/_reset.scss b/src/themes/oui-next/global_styling/reset/_reset.scss
similarity index 100%
rename from src/themes/oui-cascadia/global_styling/reset/_reset.scss
rename to src/themes/oui-next/global_styling/reset/_reset.scss
diff --git a/src/themes/oui-cascadia/global_styling/reset/_scrollbar.scss b/src/themes/oui-next/global_styling/reset/_scrollbar.scss
similarity index 100%
rename from src/themes/oui-cascadia/global_styling/reset/_scrollbar.scss
rename to src/themes/oui-next/global_styling/reset/_scrollbar.scss
diff --git a/src/themes/oui-cascadia/global_styling/utility/_animations.scss b/src/themes/oui-next/global_styling/utility/_animations.scss
similarity index 100%
rename from src/themes/oui-cascadia/global_styling/utility/_animations.scss
rename to src/themes/oui-next/global_styling/utility/_animations.scss
diff --git a/src/themes/oui-cascadia/global_styling/utility/_index.scss b/src/themes/oui-next/global_styling/utility/_index.scss
similarity index 100%
rename from src/themes/oui-cascadia/global_styling/utility/_index.scss
rename to src/themes/oui-next/global_styling/utility/_index.scss
diff --git a/src/themes/oui-cascadia/global_styling/utility/_utility.scss b/src/themes/oui-next/global_styling/utility/_utility.scss
similarity index 100%
rename from src/themes/oui-cascadia/global_styling/utility/_utility.scss
rename to src/themes/oui-next/global_styling/utility/_utility.scss
diff --git a/src/themes/oui-cascadia/global_styling/variables/_animations.scss b/src/themes/oui-next/global_styling/variables/_animations.scss
similarity index 100%
rename from src/themes/oui-cascadia/global_styling/variables/_animations.scss
rename to src/themes/oui-next/global_styling/variables/_animations.scss
diff --git a/src/themes/oui-cascadia/global_styling/variables/_borders.scss b/src/themes/oui-next/global_styling/variables/_borders.scss
similarity index 100%
rename from src/themes/oui-cascadia/global_styling/variables/_borders.scss
rename to src/themes/oui-next/global_styling/variables/_borders.scss
diff --git a/src/themes/oui-cascadia/global_styling/variables/_buttons.scss b/src/themes/oui-next/global_styling/variables/_buttons.scss
similarity index 100%
rename from src/themes/oui-cascadia/global_styling/variables/_buttons.scss
rename to src/themes/oui-next/global_styling/variables/_buttons.scss
diff --git a/src/themes/oui-cascadia/global_styling/variables/_colors.scss b/src/themes/oui-next/global_styling/variables/_colors.scss
similarity index 100%
rename from src/themes/oui-cascadia/global_styling/variables/_colors.scss
rename to src/themes/oui-next/global_styling/variables/_colors.scss
diff --git a/src/themes/oui-cascadia/global_styling/variables/_form.scss b/src/themes/oui-next/global_styling/variables/_form.scss
similarity index 100%
rename from src/themes/oui-cascadia/global_styling/variables/_form.scss
rename to src/themes/oui-next/global_styling/variables/_form.scss
diff --git a/src/themes/oui-cascadia/global_styling/variables/_header.scss b/src/themes/oui-next/global_styling/variables/_header.scss
similarity index 100%
rename from src/themes/oui-cascadia/global_styling/variables/_header.scss
rename to src/themes/oui-next/global_styling/variables/_header.scss
diff --git a/src/themes/oui-cascadia/global_styling/variables/_index.scss b/src/themes/oui-next/global_styling/variables/_index.scss
similarity index 100%
rename from src/themes/oui-cascadia/global_styling/variables/_index.scss
rename to src/themes/oui-next/global_styling/variables/_index.scss
diff --git a/src/themes/oui-cascadia/global_styling/variables/_page.scss b/src/themes/oui-next/global_styling/variables/_page.scss
similarity index 100%
rename from src/themes/oui-cascadia/global_styling/variables/_page.scss
rename to src/themes/oui-next/global_styling/variables/_page.scss
diff --git a/src/themes/oui-cascadia/global_styling/variables/_panel.scss b/src/themes/oui-next/global_styling/variables/_panel.scss
similarity index 100%
rename from src/themes/oui-cascadia/global_styling/variables/_panel.scss
rename to src/themes/oui-next/global_styling/variables/_panel.scss
diff --git a/src/themes/oui-cascadia/global_styling/variables/_responsive.scss b/src/themes/oui-next/global_styling/variables/_responsive.scss
similarity index 100%
rename from src/themes/oui-cascadia/global_styling/variables/_responsive.scss
rename to src/themes/oui-next/global_styling/variables/_responsive.scss
diff --git a/src/themes/oui-cascadia/global_styling/variables/_shadows.scss b/src/themes/oui-next/global_styling/variables/_shadows.scss
similarity index 100%
rename from src/themes/oui-cascadia/global_styling/variables/_shadows.scss
rename to src/themes/oui-next/global_styling/variables/_shadows.scss
diff --git a/src/themes/oui-cascadia/global_styling/variables/_size.scss b/src/themes/oui-next/global_styling/variables/_size.scss
similarity index 100%
rename from src/themes/oui-cascadia/global_styling/variables/_size.scss
rename to src/themes/oui-next/global_styling/variables/_size.scss
diff --git a/src/themes/oui-cascadia/global_styling/variables/_states.scss b/src/themes/oui-next/global_styling/variables/_states.scss
similarity index 100%
rename from src/themes/oui-cascadia/global_styling/variables/_states.scss
rename to src/themes/oui-next/global_styling/variables/_states.scss
diff --git a/src/themes/oui-cascadia/global_styling/variables/_tool_tip.scss b/src/themes/oui-next/global_styling/variables/_tool_tip.scss
similarity index 100%
rename from src/themes/oui-cascadia/global_styling/variables/_tool_tip.scss
rename to src/themes/oui-next/global_styling/variables/_tool_tip.scss
diff --git a/src/themes/oui-cascadia/global_styling/variables/_typography.scss b/src/themes/oui-next/global_styling/variables/_typography.scss
similarity index 100%
rename from src/themes/oui-cascadia/global_styling/variables/_typography.scss
rename to src/themes/oui-next/global_styling/variables/_typography.scss
diff --git a/src/themes/oui-cascadia/global_styling/variables/_z_index.scss b/src/themes/oui-next/global_styling/variables/_z_index.scss
similarity index 100%
rename from src/themes/oui-cascadia/global_styling/variables/_z_index.scss
rename to src/themes/oui-next/global_styling/variables/_z_index.scss
diff --git a/src/themes/oui-cascadia/oui_cascadia_colors_dark.scss b/src/themes/oui-next/oui_next_colors_dark.scss
similarity index 100%
rename from src/themes/oui-cascadia/oui_cascadia_colors_dark.scss
rename to src/themes/oui-next/oui_next_colors_dark.scss
diff --git a/src/themes/oui-cascadia/oui_cascadia_colors_light.scss b/src/themes/oui-next/oui_next_colors_light.scss
similarity index 100%
rename from src/themes/oui-cascadia/oui_cascadia_colors_light.scss
rename to src/themes/oui-next/oui_next_colors_light.scss
diff --git a/src/themes/oui-cascadia/oui_cascadia_globals.scss b/src/themes/oui-next/oui_next_globals.scss
similarity index 90%
rename from src/themes/oui-cascadia/oui_cascadia_globals.scss
rename to src/themes/oui-next/oui_next_globals.scss
index 44e3be6322..54b95d2b43 100644
--- a/src/themes/oui-cascadia/oui_cascadia_globals.scss
+++ b/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
diff --git a/src/themes/themes.ts b/src/themes/themes.ts
index 94b1bd5172..6de0e1a922 100644
--- a/src/themes/themes.ts
+++ b/src/themes/themes.ts
@@ -42,6 +42,14 @@ export const OUI_THEMES: OUI_THEME[] = [
     text: 'Dark',
     value: 'dark',
   },
+  {
+    text: 'Next Light',
+    value: 'next-light',
+  },
+  {
+    text: 'Next Dark',
+    value: 'next-dark',
+  },
 ];
 
 /* OUI -> EUI Aliases */
diff --git a/wiki/consuming.md b/wiki/consuming.md
index d4bb7da711..94b3138f80 100644
--- a/wiki/consuming.md
+++ b/wiki/consuming.md
@@ -58,10 +58,10 @@ Other compiled themes include:
 import '@opensearch-project/oui/dist/oui_theme_dark.css';
 ```
 ```js
-import '@opensearch-project/oui/dist/oui_theme_cascadia_light.css';
+import '@opensearch-project/oui/dist/oui_theme_next_light.css';
 ```
 ```js
-import '@opensearch-project/oui/dist/oui_theme_cascadia_dark.css';
+import '@opensearch-project/oui/dist/oui_theme_next_dark.css';
 ```
 
 ### Using our Sass variables on top of compiled CSS
@@ -82,11 +82,11 @@ For the dark theme, swap the first import for the dark colors file.
 @import '@opensearch-project/oui/src/themes/oui/oui_globals.scss';
 ```
 
-If you want to use the new, but in progress Cascadia theme, you can import it similarly.
+If you want to use the new, but in progress Next theme, you can import it similarly.
 
 ```scss
-@import '@opensearch-project/oui/src/themes/oui-cascadia/oui_cascadia_colors_light.scss';
-@import '@opensearch-project/oui/src/themes/oui-cascadia/oui_cascadia_globals.scss';
+@import '@opensearch-project/oui/src/themes/oui-next/oui_next_colors_light.scss';
+@import '@opensearch-project/oui/src/themes/oui-next/oui_next_globals.scss';
 ```
 
 ### Using Sass to customize OUI
@@ -106,19 +106,20 @@ $ouiColorPrimary: #7B61FF;
 
 ### Fonts
 
-By default, OUI ships with a font stack that includes some outside, open source fonts. If your system is internet available you can include these by adding the following imports to your SCSS/CSS files, otherwise you'll need to bundle the physical fonts in your build. OUI will drop to System Fonts (which you may prefer) in their absence.
+By default, OUI ships with a font stack that includes some external open source fonts. If your system is connected to the internet, you can include these by adding the following imports to your SCSS/CSS files, otherwise you'll need to bundle the physical fonts in your build. OUI will drop to System Fonts (which you may prefer) in their absence.
 
+The default theme uses the [Inter UI](https://github.com/rsms/inter) and [Roboto Mono](https://fonts.google.com/specimen/Roboto+Mono) fonts:
 ```scss
 // index.scss
 @import url('https://fonts.googleapis.com/css?family=Roboto+Mono:400,400i,700,700i');
 @import url('https://rsms.me/inter/inter-ui.css');
 ```
 
-The Cascadia theme uses the latest version of Inter that can be grabbed from Google Fonts as well.
+The Next theme uses the [Source Sans 3](https://github.com/adobe-fonts/source-sans) and [Source Code Pro](https://github.com/adobe-fonts/source-code-pro) fonts:
 
 ```scss
 // index.scss
-@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');
 ```
 
 ### Reusing the variables in JavaScript
diff --git a/wiki/theming.md b/wiki/theming.md
index c89ad18eeb..ad6e7386c4 100644
--- a/wiki/theming.md
+++ b/wiki/theming.md
@@ -5,8 +5,8 @@ variables. Currently we maintain the following themes:
 
 * theme_light (the default OUI theme)
 * theme_dark (the same theme in dark)
-* theme_cascadia_light (the next iteration of the OUI light theme)
-* theme_cascadia_dark (the next iteration of the OUI dark theme)
+* theme_next_light (the next iteration of the OUI light theme)
+* theme_next_dark (the next iteration of the OUI dark theme)
 
 Each of these themes include variables,
 mixins, functions and other overwrites that adjust colors and sizing to fit the