From c4d31183281d074a891aa66d7029a2c12a963913 Mon Sep 17 00:00:00 2001
From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com>
Date: Tue, 30 Jan 2024 16:30:49 -0500
Subject: [PATCH] feat(Theme): add component tokens (#710)

---
 packages/react/.eslintrc.js                   |   2 +-
 .../components/accordion/accordion-item.tsx   |   8 +-
 .../react/src/components/avatar/avatar.tsx    |   4 +-
 packages/react/src/components/bar/bar.tsx     |   4 +-
 .../bento-menu-button.test.tsx.snap           |  15 +-
 .../components/buttons/abstract-button.tsx    | 169 ++-------
 .../src/components/buttons/button.test.tsx    |   2 +-
 .../components/buttons/button.test.tsx.snap   | 115 ++++---
 .../react/src/components/buttons/button.tsx   |   4 +-
 .../buttons/icon-button.test.tsx.snap         |  18 +-
 .../src/components/buttons/icon-button.tsx    |   4 +-
 .../src/components/buttons/search-button.tsx  |  16 +-
 .../chooser-button/styles/choose.ts           |   4 +-
 .../date-picker/date-picker.test.tsx.snap     |   2 +
 .../components/date-picker/date-picker.tsx    |   8 +-
 .../device-context-provider.test.tsx          |   2 +-
 .../device-context-provider.tsx               |   2 +-
 .../dropdown-list/dropdown-list.tsx           |   6 +-
 .../dropdown-menu-button.test.tsx.snap        |   8 +-
 .../dropdown-navigation.test.tsx.snap         |  12 +-
 .../dropdown-navigation.tsx                   |   2 +-
 .../field-container/field-container.tsx       |   4 +-
 .../global-banner/global-banner.test.tsx.snap | 112 +++---
 .../global-navigation.test.tsx.snap           |   2 +
 .../components/heading/heading.test.tsx.snap  |   5 +
 .../react/src/components/heading/heading.tsx  |   6 +-
 packages/react/src/components/label/label.tsx |   2 +-
 .../react/src/components/lozenge/lozenge.tsx  |   4 +-
 .../components/menu-button/menu-button.tsx    |   2 +-
 .../modal/modal-dialog.test.tsx.snap          |  31 ++
 .../src/components/modal/modal.test.tsx.snap  |   6 +
 .../numeric-input/numeric-input.tsx           |   4 +-
 .../password-input.test.tsx.snap              |   6 +
 .../progress-circle/progress-circle.tsx       |   4 +-
 .../progress-indicator/progress-indicator.tsx |   4 +-
 .../radio-button-group/radio-button-group.tsx |   4 +-
 .../radio-card-group/styled-components.ts     |   8 +-
 .../src/components/search/search-input.tsx    |   6 +-
 .../sectional-banner/sectional-banner.tsx     |   8 +-
 .../react/src/components/status/status.tsx    |   4 +-
 .../stepper-input/stepper-input.tsx           |   4 +-
 .../table/sort-button-icon.test.tsx           |   3 +-
 .../react/src/components/table/table-row.tsx  |   8 +-
 packages/react/src/components/table/table.tsx |   4 +-
 packages/react/src/components/tag/tag.tsx     |   4 +-
 .../src/components/text-area/text-area.tsx    |   4 +-
 .../components/text-input/styles/inputs.tsx   |   8 +-
 .../theme-wrapper/theme-wrapper.test.tsx      |  36 +-
 .../theme-wrapper/theme-wrapper.test.tsx.snap |  40 ++-
 .../theme-wrapper/theme-wrapper.tsx           |  15 +-
 .../toast/toast-container.test.tsx.snap       |   8 +
 .../src/components/toast/toast-container.tsx  |  14 +-
 .../src/components/toast/toasts-container.tsx |   4 +-
 .../toggle-switch/toggle-switch.tsx           |   8 +-
 .../toggletip/toggletip.test.tsx.snap         |   8 +
 .../react/src/components/tooltip/tooltip.tsx  |   2 +-
 .../user-profile/user-profile.test.tsx.snap   |  16 +-
 packages/react/src/hooks/use-theme.ts         |   4 +-
 packages/react/src/index.ts                   |   3 +-
 .../breakpoints.ts                            |   0
 .../menuDimensions.ts                         |   0
 .../react/src/styled-components-theme.d.ts    |   4 +-
 packages/react/src/theme.ts                   |   2 +-
 packages/react/src/themes/default-theme.ts    |   8 +
 packages/react/src/themes/equisoft.ts         |  16 +-
 packages/react/src/themes/greys.ts            |  12 -
 packages/react/src/themes/index.ts            |   2 +-
 packages/react/src/themes/main.ts             |  13 -
 packages/react/src/themes/merge-theme.test.ts | 186 ++++++++++
 packages/react/src/themes/merge-theme.ts      |  80 +++++
 packages/react/src/themes/notifications.ts    |  16 -
 packages/react/src/themes/test-theme.ts       |  21 --
 packages/react/src/themes/theme.ts            |  24 +-
 packages/react/src/themes/tokens.ts           |  12 -
 .../react/src/themes/tokens/alias-tokens.ts   |  15 +
 .../src/themes/tokens/component-tokens.ts     |  31 ++
 .../themes/tokens/component/button-tokens.ts  | 322 ++++++++++++++++++
 .../themes/tokens/component/focus-tokens.ts   |  27 ++
 .../themes/tokens/component/heading-tokens.ts |  17 +
 .../themes/tokens/component/label-tokens.ts   |  15 +
 packages/react/src/themes/tokens/index.ts     |   3 +
 .../react/src/themes/tokens/legacy-tokens.ts  |  49 +++
 .../react/src/themes/tokens/ref-tokens.ts     |  23 ++
 .../themes/tokens/ref/color-utility-tokens.ts |  30 ++
 .../src/themes/tokens/ref/palette-tokens.ts   |  96 ++++++
 .../tokens/ref/text-attributes-tokens.ts      |  12 +
 packages/react/src/utility-types.ts           |   1 +
 packages/react/src/utils/css-state.ts         |  36 +-
 .../storybook/stories/0-intro.stories.tsx     | 183 +++++++++-
 89 files changed, 1570 insertions(+), 508 deletions(-)
 rename packages/react/src/{tokens => legacy-constants}/breakpoints.ts (100%)
 rename packages/react/src/{tokens => legacy-constants}/menuDimensions.ts (100%)
 create mode 100644 packages/react/src/themes/default-theme.ts
 delete mode 100644 packages/react/src/themes/greys.ts
 delete mode 100644 packages/react/src/themes/main.ts
 create mode 100644 packages/react/src/themes/merge-theme.test.ts
 create mode 100644 packages/react/src/themes/merge-theme.ts
 delete mode 100644 packages/react/src/themes/notifications.ts
 delete mode 100644 packages/react/src/themes/test-theme.ts
 delete mode 100644 packages/react/src/themes/tokens.ts
 create mode 100644 packages/react/src/themes/tokens/alias-tokens.ts
 create mode 100644 packages/react/src/themes/tokens/component-tokens.ts
 create mode 100644 packages/react/src/themes/tokens/component/button-tokens.ts
 create mode 100644 packages/react/src/themes/tokens/component/focus-tokens.ts
 create mode 100644 packages/react/src/themes/tokens/component/heading-tokens.ts
 create mode 100644 packages/react/src/themes/tokens/component/label-tokens.ts
 create mode 100644 packages/react/src/themes/tokens/index.ts
 create mode 100644 packages/react/src/themes/tokens/legacy-tokens.ts
 create mode 100644 packages/react/src/themes/tokens/ref-tokens.ts
 create mode 100644 packages/react/src/themes/tokens/ref/color-utility-tokens.ts
 create mode 100644 packages/react/src/themes/tokens/ref/palette-tokens.ts
 create mode 100644 packages/react/src/themes/tokens/ref/text-attributes-tokens.ts
 create mode 100644 packages/react/src/utility-types.ts

diff --git a/packages/react/.eslintrc.js b/packages/react/.eslintrc.js
index 525af404c6..30a4f9cea3 100644
--- a/packages/react/.eslintrc.js
+++ b/packages/react/.eslintrc.js
@@ -11,5 +11,5 @@ module.exports = {
         'react/jsx-no-bind': 'off',
         'react/jsx-uses-react': 'off',
         'react/react-in-jsx-scope': 'off',
-    }
+    },
 };
diff --git a/packages/react/src/components/accordion/accordion-item.tsx b/packages/react/src/components/accordion/accordion-item.tsx
index 46e94b97c4..3631b5e0b1 100644
--- a/packages/react/src/components/accordion/accordion-item.tsx
+++ b/packages/react/src/components/accordion/accordion-item.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
-import { Theme } from '../../themes';
+import { ResolvedTheme } from '../../themes/theme';
 import { Button } from '../buttons/button';
 import { Icon } from '../icon/icon';
 import { Heading, Type, Tag } from '../heading/heading';
@@ -18,7 +18,7 @@ export interface AccordionItemProps {
     buttonRef?: React.RefObject<HTMLButtonElement> | undefined;
 }
 
-const AccordionSection = styled.section<{ theme: Theme }>`
+const AccordionSection = styled.section<{ theme: ResolvedTheme }>`
     background: ${({ theme }) => theme.greys['colored-white']};
     border-color: ${({ theme }) => theme.greys.grey};
     border-radius: 0 0 var(--border-radius-2x) var(--border-radius-2x);
@@ -38,7 +38,7 @@ const AccordionSection = styled.section<{ theme: Theme }>`
     }
 `;
 
-const AccordionBody = styled.div<{ theme: Theme }>`
+const AccordionBody = styled.div<{ theme: ResolvedTheme }>`
     background: ${({ theme }) => theme.greys['colored-white']};
     color: ${({ theme }) => theme.greys['neutral-90']};
     font-size: 0.75rem;
@@ -60,7 +60,7 @@ const HeadingStyled = styled(Heading)`
     position: relative;
 `;
 
-const ButtonStyled = styled(Button)<{ theme: Theme }>`
+const ButtonStyled = styled(Button)<{ theme: ResolvedTheme }>`
     align-items: flex-start;
     border: 1px solid ${({ theme }) => theme.greys.grey};
     border-radius: var(--border-radius-2x);
diff --git a/packages/react/src/components/avatar/avatar.tsx b/packages/react/src/components/avatar/avatar.tsx
index b8b8024127..09e642cc88 100644
--- a/packages/react/src/components/avatar/avatar.tsx
+++ b/packages/react/src/components/avatar/avatar.tsx
@@ -1,7 +1,7 @@
 import { useMemo, VoidFunctionComponent } from 'react';
 import styled, { css, FlattenInterpolation, ThemeProps } from 'styled-components';
 import { useTranslation } from '../../i18n/use-translation';
-import { Theme } from '../../themes';
+import { ResolvedTheme } from '../../themes/theme';
 import { getInitialsFromUsername } from '../../utils/user';
 import { useDeviceContext } from '../device-context-provider/device-context-provider';
 import { Icon } from '../icon/icon';
@@ -21,7 +21,7 @@ interface SizeStyleProps {
     isMobile: boolean;
 }
 
-function getSpecificSizeStyle({ size, isMobile }: SizeStyleProps): FlattenInterpolation<ThemeProps<Theme>> {
+function getSpecificSizeStyle({ size, isMobile }: SizeStyleProps): FlattenInterpolation<ThemeProps<ResolvedTheme>> {
     switch (size) {
         case 'xsmall':
             return css`
diff --git a/packages/react/src/components/bar/bar.tsx b/packages/react/src/components/bar/bar.tsx
index 296c711b5b..9e9268320f 100644
--- a/packages/react/src/components/bar/bar.tsx
+++ b/packages/react/src/components/bar/bar.tsx
@@ -1,10 +1,10 @@
 import { ReactText, VoidFunctionComponent } from 'react';
 import styled from 'styled-components';
-import { Theme } from '../../themes';
+import { ResolvedTheme } from '../../themes/theme';
 
 const Container = styled.div`
     p {
-        color: ${(props: { theme: Theme }) => props.theme.greys.black};
+        color: ${(props: { theme: ResolvedTheme }) => props.theme.greys.black};
         letter-spacing: 0.02875rem;
         line-height: 1.5rem;
         margin: 0;
diff --git a/packages/react/src/components/bento-menu-button/bento-menu-button.test.tsx.snap b/packages/react/src/components/bento-menu-button/bento-menu-button.test.tsx.snap
index d541e44686..6e5921b0dc 100644
--- a/packages/react/src/components/bento-menu-button/bento-menu-button.test.tsx.snap
+++ b/packages/react/src/components/bento-menu-button/bento-menu-button.test.tsx.snap
@@ -78,12 +78,14 @@ exports[`BentoMenuButton Matches Snapshot (productGroups and externalLinks) 1`]
 .c3:hover,
 .c3[aria-expanded='true'] {
   background-color: #003A5A;
+  border-color: transparent;
   color: #FFFFFF;
 }
 
 .c3:disabled {
   background-color: transparent;
-  color: #003A5A;
+  border-color: transparent;
+  color: #006296;
 }
 
 .c3 > svg {
@@ -287,6 +289,7 @@ exports[`BentoMenuButton Matches Snapshot (productGroups and externalLinks) 1`]
 }
 
 .c7 {
+  color: #000000;
   font-size: 1rem;
   font-weight: var(--font-semi-bold);
   line-height: 1.5rem;
@@ -906,12 +909,14 @@ exports[`BentoMenuButton Matches Snapshot (productLinks and externalLinks) 1`] =
 .c3:hover,
 .c3[aria-expanded='true'] {
   background-color: #003A5A;
+  border-color: transparent;
   color: #FFFFFF;
 }
 
 .c3:disabled {
   background-color: transparent;
-  color: #003A5A;
+  border-color: transparent;
+  color: #006296;
 }
 
 .c3 > svg {
@@ -1115,6 +1120,7 @@ exports[`BentoMenuButton Matches Snapshot (productLinks and externalLinks) 1`] =
 }
 
 .c7 {
+  color: #000000;
   font-size: 1rem;
   font-weight: var(--font-semi-bold);
   line-height: 1.5rem;
@@ -1646,12 +1652,14 @@ exports[`BentoMenuButton Matches Snapshot (tag="nav") 1`] = `
 .c3:hover,
 .c3[aria-expanded='true'] {
   background-color: #003A5A;
+  border-color: transparent;
   color: #FFFFFF;
 }
 
 .c3:disabled {
   background-color: transparent;
-  color: #003A5A;
+  border-color: transparent;
+  color: #006296;
 }
 
 .c3 > svg {
@@ -1855,6 +1863,7 @@ exports[`BentoMenuButton Matches Snapshot (tag="nav") 1`] = `
 }
 
 .c7 {
+  color: #000000;
   font-size: 1rem;
   font-weight: var(--font-semi-bold);
   line-height: 1.5rem;
diff --git a/packages/react/src/components/buttons/abstract-button.tsx b/packages/react/src/components/buttons/abstract-button.tsx
index d759abd2a7..ca2e798724 100755
--- a/packages/react/src/components/buttons/abstract-button.tsx
+++ b/packages/react/src/components/buttons/abstract-button.tsx
@@ -1,6 +1,6 @@
 import { ButtonHTMLAttributes, forwardRef, PropsWithChildren, Ref } from 'react';
 import styled, { css, FlattenInterpolation, ThemeProps } from 'styled-components';
-import { Theme } from '../../themes';
+import { ResolvedTheme } from '../../themes/theme';
 import { focus } from '../../utils/css-state';
 
 type Size = 'small' | 'medium';
@@ -80,149 +80,46 @@ export type ButtonType = 'primary' | 'secondary' | 'tertiary' | 'destructive' |
 export interface ButtonTypeStyles {
     buttonType: ButtonType;
     inverted?: boolean;
-    theme: Theme;
+    theme: ResolvedTheme;
 }
 
-const getPrimaryButtonStyles: (props: ButtonTypeStyles) => FlattenInterpolation<ThemeProps<Theme>> = ({
+const getButtonStyles: (props: ButtonTypeStyles) => FlattenInterpolation<ThemeProps<ResolvedTheme>> = ({
     inverted,
+    buttonType,
     theme,
-}) => css`
-    background-color: ${inverted ? theme.greys.white : theme.main['primary-1.1']};
-    border-color: ${inverted ? theme.greys.white : theme.main['primary-1.1']};
-    color: ${inverted ? theme.main['primary-1.1'] : theme.greys.white};
-
-    &:hover,
-    &[aria-expanded='true'] {
-        background-color: ${inverted ? theme.greys.white : theme.main['primary-1.3']};
-        border-color: ${inverted ? theme.greys.white : theme.main['primary-1.3']};
-        ${inverted && `color: ${theme.main['primary-1.3']}`}
-    }
-
-    &:disabled {
-        background-color: ${inverted ? theme.greys.white : theme.main['primary-1.2']};
-        border-color: ${inverted ? theme.greys.white : theme.main['primary-1.2']};
-        ${inverted && `color: ${theme.main['primary-1.2']}`}
-    }
-`;
-
-const getSecondaryButtonStyles: (props: ButtonTypeStyles) => FlattenInterpolation<ThemeProps<Theme>> = ({
-    inverted,
-    theme,
-}) => css`
-    background-color: ${inverted ? 'transparent' : theme.greys.white};
-    border-color: ${inverted ? theme.greys.white : theme.main['primary-1.1']};
-    color: ${inverted ? theme.greys.white : theme.main['primary-1.1']};
-
-    &:hover,
-    &[aria-expanded='true'] {
-        border-color: ${inverted ? theme.main['primary-1.2'] : theme.main['primary-1.3']};
-        color: ${inverted ? theme.main['primary-1.2'] : theme.main['primary-1.3']};
-    }
-
-    &:disabled {
-        border-color: ${inverted ? theme.main['primary-1.3'] : theme.main['primary-1.2']};
-        color: ${inverted ? theme.main['primary-1.3'] : theme.main['primary-1.2']};
-    }
-
-    ${inverted && `&:focus {
-        background-color: ${theme.main['primary-2']};
-        border-color: ${theme.main['primary-1.1']}
-        color: ${theme.greys.white};
-    }`}
-`;
-
-const getTertiaryButtonStyles: (props: ButtonTypeStyles) => FlattenInterpolation<ThemeProps<Theme>> = ({
-    inverted,
-    theme,
-}) => css`
-    background-color: transparent;
-    border-color: transparent;
-    color: ${inverted ? theme.greys.white : theme.greys['dark-grey']};
-
-    &:hover,
-    &[aria-expanded='true'] {
-        background-color: ${inverted ? theme.main['primary-1.3'] : theme.greys.grey};
-        color: ${inverted ? theme.greys.white : theme.greys['neutral-90']};
-    }
-
-    &:disabled {
-        background-color: transparent;
-        color: ${inverted ? theme.main['primary-1.3'] : theme.greys['mid-grey']};
-    }
-`;
-
-const getDestructiveButtonStyles: (props: ButtonTypeStyles) => FlattenInterpolation<ThemeProps<Theme>> = ({
-    inverted,
-    theme,
-}) => css`
-    background-color: ${inverted ? theme.greys.white : theme.notifications['alert-2.1']};
-    border-color: ${inverted ? theme.greys.white : theme.notifications['alert-2.1']};
-    color: ${inverted ? theme.notifications['alert-2.1'] : theme.greys.white};
-
-    &:hover,
-    &[aria-expanded='true'] {
-        /* TODO change colors when updating thematization */
-        background-color: ${inverted ? theme.greys.white : '#7B1A15'};
-        border-color: ${inverted ? theme.greys.white : '#7B1A15'};
-        color: ${inverted ? '#7B1A15' : theme.greys.white};
-    }
-
-    &:disabled {
-        &,
-        &:focus,
-        &:hover {
-            /* TODO change colors when updating thematization */
-            background-color: ${inverted ? theme.greys.white : '#F99D99'};
-            border-color: ${inverted ? theme.greys.white : '#F99D99'};
-            color: ${inverted ? '#F99D99' : theme.greys.white};
+}) => {
+    const inversionSuffix = inverted ? '-inverted' : '';
+
+    return css`
+        background-color: ${theme.component[`button-${buttonType}${inversionSuffix}-background-color`]};
+        border-color: ${theme.component[`button-${buttonType}${inversionSuffix}-border-color`]};
+        color: ${theme.component[`button-${buttonType}${inversionSuffix}-text-color`]};
+
+        &:hover,
+        &[aria-expanded='true'] {
+            background-color: ${theme.component[`button-${buttonType}${inversionSuffix}-hover-background-color`]};
+            border-color: ${theme.component[`button-${buttonType}${inversionSuffix}-hover-border-color`]};
+            color: ${theme.component[`button-${buttonType}${inversionSuffix}-hover-text-color`]};
         }
-    }
-`;
 
-const getDestructiveSecondaryButtonStyles: (props: ButtonTypeStyles) => FlattenInterpolation<ThemeProps<Theme>> = ({
-    inverted,
-    theme,
-}) => css`
-    background-color: ${inverted ? 'transparent' : theme.greys.white};
-    border-color: ${inverted ? theme.greys.white : theme.notifications['alert-2.1']};
-    color: ${inverted ? theme.greys.white : theme.notifications['alert-2.1']};
-
-    &:hover,
-    &[aria-expanded='true'] {
-        /* TODO change colors when updating thematization */
-        background-color: ${inverted ? '#7B1A15' : theme.greys.white};
-        border-color: ${inverted ? theme.greys.white : '#7B1A15'};
-        color: ${inverted ? theme.greys.white : '#7B1A15'};
-    }
-
-    &:disabled {
-        color: ${inverted ? theme.greys.white : '#F99D99'};
-
-        &,
-        &:focus,
-        &:hover {
-            /* TODO change colors when updating thematization */
-            background-color: ${inverted ? '#F99D99' : theme.greys.white};
-            border-color: ${inverted ? theme.greys.white : '#F99D99'};
-            color: ${inverted ? theme.greys.white : '#F99D99'};
+        &:disabled {
+            background-color: ${theme.component[`button-${buttonType}${inversionSuffix}-disabled-background-color`]};
+            border-color: ${theme.component[`button-${buttonType}${inversionSuffix}-disabled-border-color`]};
+            color: ${theme.component[`button-${buttonType}${inversionSuffix}-disabled-text-color`]};
+            ${buttonType === 'destructive' ? css`
+                &,
+                &:focus,
+                &:hover {
+                    background-color: ${theme.component[`button-${buttonType}${inversionSuffix}-disabled-background-color`]};
+                    border-color: ${theme.component[`button-${buttonType}${inversionSuffix}-disabled-border-color`]};
+                    color: ${theme.component[`button-${buttonType}${inversionSuffix}-disabled-text-color`]};
+                }
+` : ''}
         }
-    }
 `;
+};
 
-export const getButtonTypeStyles: (props: ButtonTypeStyles) => FlattenInterpolation<ThemeProps<Theme>> = (props) => css`
+export const getButtonTypeStyles: (props: ButtonTypeStyles) => FlattenInterpolation<ThemeProps<ResolvedTheme>> = (props) => css`
     ${focus(props, true)};
-    ${() => {
-        switch (props.buttonType) {
-            case 'primary':
-                return getPrimaryButtonStyles(props);
-            case 'secondary':
-                return getSecondaryButtonStyles(props);
-            case 'tertiary':
-                return getTertiaryButtonStyles(props);
-            case 'destructive':
-                return getDestructiveButtonStyles(props);
-            case 'destructive-secondary':
-                return getDestructiveSecondaryButtonStyles(props);
-        }
-    }}
+    ${getButtonStyles(props)};
 `;
diff --git a/packages/react/src/components/buttons/button.test.tsx b/packages/react/src/components/buttons/button.test.tsx
index d055d88a2d..1a733dff85 100644
--- a/packages/react/src/components/buttons/button.test.tsx
+++ b/packages/react/src/components/buttons/button.test.tsx
@@ -28,7 +28,7 @@ describe('Button', () => {
         expect(callback).toHaveBeenCalledTimes(0);
     });
 
-    test('has disabled styles', () => {
+    test('has primary disabled styles', () => {
         const tree = renderWithProviders(
             <Button onClick={doNothing} buttonType="primary" disabled label="Primary Button" />,
         );
diff --git a/packages/react/src/components/buttons/button.test.tsx.snap b/packages/react/src/components/buttons/button.test.tsx.snap
index d1bf04984e..39515f3f5b 100644
--- a/packages/react/src/components/buttons/button.test.tsx.snap
+++ b/packages/react/src/components/buttons/button.test.tsx.snap
@@ -80,6 +80,12 @@ exports[`Button has destructive styles (inverted) 1`] = `
   color: #7B1A15;
 }
 
+.c1:disabled {
+  background-color: #FFFFFF;
+  border-color: #FFFFFF;
+  color: #F99D99;
+}
+
 .c1:disabled,
 .c1:disabled:focus,
 .c1:disabled:hover {
@@ -176,6 +182,12 @@ exports[`Button has destructive styles 1`] = `
   color: #FFFFFF;
 }
 
+.c1:disabled {
+  background-color: #F99D99;
+  border-color: #F99D99;
+  color: #FFFFFF;
+}
+
 .c1:disabled,
 .c1:disabled:focus,
 .c1:disabled:hover {
@@ -251,8 +263,8 @@ exports[`Button has destructive-secondary styles (inverted) 1`] = `
 
 .c1 {
   background-color: transparent;
-  border-color: #FFFFFF;
-  color: #FFFFFF;
+  border-color: #CD2C23;
+  color: #CD2C23;
 }
 
 .c1:focus {
@@ -267,21 +279,15 @@ exports[`Button has destructive-secondary styles (inverted) 1`] = `
 
 .c1:hover,
 .c1[aria-expanded='true'] {
-  background-color: #7B1A15;
-  border-color: #FFFFFF;
-  color: #FFFFFF;
+  background-color: transparent;
+  border-color: #7B1A15;
+  color: #7B1A15;
 }
 
 .c1:disabled {
-  color: #FFFFFF;
-}
-
-.c1:disabled,
-.c1:disabled:focus,
-.c1:disabled:hover {
-  background-color: #F99D99;
-  border-color: #FFFFFF;
-  color: #FFFFFF;
+  background-color: transparent;
+  border-color: #7B1A15;
+  color: #7B1A15;
 }
 
 <button
@@ -372,6 +378,12 @@ exports[`Button has destructive-secondary styles 1`] = `
   color: #FFFFFF;
 }
 
+.c1:disabled {
+  background-color: #F99D99;
+  border-color: #F99D99;
+  color: #FFFFFF;
+}
+
 .c1:disabled,
 .c1:disabled:focus,
 .c1:disabled:hover {
@@ -388,7 +400,7 @@ exports[`Button has destructive-secondary styles 1`] = `
 </button>
 `;
 
-exports[`Button has disabled styles 1`] = `
+exports[`Button has mobile styles 1`] = `
 .c0 {
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -407,21 +419,21 @@ exports[`Button has disabled styles 1`] = `
   display: -ms-inline-flexbox;
   display: inline-flex;
   font-family: inherit;
-  font-size: 0.75rem;
+  font-size: 0.875rem;
   font-weight: var(--font-bold);
   -webkit-box-pack: center;
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  -webkit-letter-spacing: 0.025rem;
-  -moz-letter-spacing: 0.025rem;
-  -ms-letter-spacing: 0.025rem;
-  letter-spacing: 0.025rem;
-  line-height: 1rem;
-  min-height: var(--size-2x);
+  -webkit-letter-spacing: 0.033125rem;
+  -moz-letter-spacing: 0.033125rem;
+  -ms-letter-spacing: 0.033125rem;
+  letter-spacing: 0.033125rem;
+  line-height: 1.5rem;
+  min-height: var(--size-3x);
   min-width: 2rem;
   outline: none;
-  padding: 0 var(--spacing-2x);
+  padding: 0 var(--spacing-3x);
   text-transform: uppercase;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -441,8 +453,8 @@ exports[`Button has disabled styles 1`] = `
 
 .c0 > svg {
   color: inherit;
-  height: var(--size-1x);
-  width: var(--size-1x);
+  height: var(--size-1halfx);
+  width: var(--size-1halfx);
 }
 
 .c1 {
@@ -465,23 +477,24 @@ exports[`Button has disabled styles 1`] = `
 .c1[aria-expanded='true'] {
   background-color: #003A5A;
   border-color: #003A5A;
+  color: #FFFFFF;
 }
 
 .c1:disabled {
   background-color: #84C6EA;
   border-color: #84C6EA;
+  color: #FFFFFF;
 }
 
 <button
   class="c0 c1"
-  disabled=""
   type="button"
 >
   Primary Button
 </button>
 `;
 
-exports[`Button has mobile styles 1`] = `
+exports[`Button has primary disabled styles 1`] = `
 .c0 {
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -500,21 +513,21 @@ exports[`Button has mobile styles 1`] = `
   display: -ms-inline-flexbox;
   display: inline-flex;
   font-family: inherit;
-  font-size: 0.875rem;
+  font-size: 0.75rem;
   font-weight: var(--font-bold);
   -webkit-box-pack: center;
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  -webkit-letter-spacing: 0.033125rem;
-  -moz-letter-spacing: 0.033125rem;
-  -ms-letter-spacing: 0.033125rem;
-  letter-spacing: 0.033125rem;
-  line-height: 1.5rem;
-  min-height: var(--size-3x);
+  -webkit-letter-spacing: 0.025rem;
+  -moz-letter-spacing: 0.025rem;
+  -ms-letter-spacing: 0.025rem;
+  letter-spacing: 0.025rem;
+  line-height: 1rem;
+  min-height: var(--size-2x);
   min-width: 2rem;
   outline: none;
-  padding: 0 var(--spacing-3x);
+  padding: 0 var(--spacing-2x);
   text-transform: uppercase;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -534,8 +547,8 @@ exports[`Button has mobile styles 1`] = `
 
 .c0 > svg {
   color: inherit;
-  height: var(--size-1halfx);
-  width: var(--size-1halfx);
+  height: var(--size-1x);
+  width: var(--size-1x);
 }
 
 .c1 {
@@ -558,15 +571,18 @@ exports[`Button has mobile styles 1`] = `
 .c1[aria-expanded='true'] {
   background-color: #003A5A;
   border-color: #003A5A;
+  color: #FFFFFF;
 }
 
 .c1:disabled {
   background-color: #84C6EA;
   border-color: #84C6EA;
+  color: #FFFFFF;
 }
 
 <button
   class="c0 c1"
+  disabled=""
   type="button"
 >
   Primary Button
@@ -744,11 +760,13 @@ exports[`Button has primary styles 1`] = `
 .c1[aria-expanded='true'] {
   background-color: #003A5A;
   border-color: #003A5A;
+  color: #FFFFFF;
 }
 
 .c1:disabled {
   background-color: #84C6EA;
   border-color: #84C6EA;
+  color: #FFFFFF;
 }
 
 <button
@@ -834,18 +852,15 @@ exports[`Button has secondary styles (inverted) 1`] = `
 
 .c1:hover,
 .c1[aria-expanded='true'] {
+  background-color: transparent;
   border-color: #84C6EA;
   color: #84C6EA;
 }
 
 .c1:disabled {
-  border-color: #003A5A;
-  color: #003A5A;
-}
-
-.c1:focus {
-  background-color: #012639;
-  border-color: #006296 color:#FFFFFF;
+  background-color: transparent;
+  border-color: #006296;
+  color: #006296;
 }
 
 <button
@@ -931,11 +946,13 @@ exports[`Button has secondary styles 1`] = `
 
 .c1:hover,
 .c1[aria-expanded='true'] {
+  background-color: #FFFFFF;
   border-color: #003A5A;
   color: #003A5A;
 }
 
 .c1:disabled {
+  background-color: #FFFFFF;
   border-color: #84C6EA;
   color: #84C6EA;
 }
@@ -1025,11 +1042,13 @@ exports[`Button has small styles 1`] = `
 .c1[aria-expanded='true'] {
   background-color: #003A5A;
   border-color: #003A5A;
+  color: #FFFFFF;
 }
 
 .c1:disabled {
   background-color: #84C6EA;
   border-color: #84C6EA;
+  color: #FFFFFF;
 }
 
 <button
@@ -1117,11 +1136,13 @@ exports[`Button has small styles on mobile 1`] = `
 .c1[aria-expanded='true'] {
   background-color: #003A5A;
   border-color: #003A5A;
+  color: #FFFFFF;
 }
 
 .c1:disabled {
   background-color: #84C6EA;
   border-color: #84C6EA;
+  color: #FFFFFF;
 }
 
 <button
@@ -1208,12 +1229,14 @@ exports[`Button has tertiary styles (inverted) 1`] = `
 .c1:hover,
 .c1[aria-expanded='true'] {
   background-color: #003A5A;
+  border-color: transparent;
   color: #FFFFFF;
 }
 
 .c1:disabled {
   background-color: transparent;
-  color: #003A5A;
+  border-color: transparent;
+  color: #006296;
 }
 
 <button
@@ -1300,11 +1323,13 @@ exports[`Button has tertiary styles 1`] = `
 .c1:hover,
 .c1[aria-expanded='true'] {
   background-color: #DBDEE1;
+  border-color: transparent;
   color: #1B1C1E;
 }
 
 .c1:disabled {
   background-color: transparent;
+  border-color: transparent;
   color: #B7BBC2;
 }
 
diff --git a/packages/react/src/components/buttons/button.tsx b/packages/react/src/components/buttons/button.tsx
index 3d93b7e880..d3be5367bc 100644
--- a/packages/react/src/components/buttons/button.tsx
+++ b/packages/react/src/components/buttons/button.tsx
@@ -1,6 +1,6 @@
 import { forwardRef, KeyboardEvent, MouseEvent, PropsWithChildren, ReactElement, Ref } from 'react';
 import styled from 'styled-components';
-import { Theme } from '../../themes';
+import { ResolvedTheme } from '../../themes/theme';
 import { useDeviceContext } from '../device-context-provider/device-context-provider';
 import { AbstractButton, ButtonType, getButtonTypeStyles } from './abstract-button';
 
@@ -33,7 +33,7 @@ interface ButtonProps {
     onKeyDown?(event: KeyboardEvent<HTMLButtonElement>): void;
 }
 
-const StyledButton = styled(AbstractButton)<{ theme: Theme } & ButtonProps>`
+const StyledButton = styled(AbstractButton)<{ theme: ResolvedTheme } & ButtonProps>`
     ${getButtonTypeStyles}
 `;
 
diff --git a/packages/react/src/components/buttons/icon-button.test.tsx.snap b/packages/react/src/components/buttons/icon-button.test.tsx.snap
index fb26e01a60..22aac6acba 100644
--- a/packages/react/src/components/buttons/icon-button.test.tsx.snap
+++ b/packages/react/src/components/buttons/icon-button.test.tsx.snap
@@ -83,12 +83,6 @@ exports[`Icon Button Has destructive-secondary styles 1`] = `
 }
 
 .c1:disabled {
-  color: #F99D99;
-}
-
-.c1:disabled,
-.c1:disabled:focus,
-.c1:disabled:hover {
   background-color: #FFFFFF;
   border-color: #F99D99;
   color: #F99D99;
@@ -193,11 +187,13 @@ exports[`Icon Button Has disabled styles 1`] = `
 .c1[aria-expanded='true'] {
   background-color: #003A5A;
   border-color: #003A5A;
+  color: #FFFFFF;
 }
 
 .c1:disabled {
   background-color: #84C6EA;
   border-color: #84C6EA;
+  color: #FFFFFF;
 }
 
 .c1 > svg {
@@ -300,11 +296,13 @@ exports[`Icon Button Has mobile styles 1`] = `
 .c1[aria-expanded='true'] {
   background-color: #003A5A;
   border-color: #003A5A;
+  color: #FFFFFF;
 }
 
 .c1:disabled {
   background-color: #84C6EA;
   border-color: #84C6EA;
+  color: #FFFFFF;
 }
 
 .c1 > svg {
@@ -406,11 +404,13 @@ exports[`Icon Button Has primary styles 1`] = `
 .c1[aria-expanded='true'] {
   background-color: #003A5A;
   border-color: #003A5A;
+  color: #FFFFFF;
 }
 
 .c1:disabled {
   background-color: #84C6EA;
   border-color: #84C6EA;
+  color: #FFFFFF;
 }
 
 .c1 > svg {
@@ -510,11 +510,13 @@ exports[`Icon Button Has secondary styles 1`] = `
 
 .c1:hover,
 .c1[aria-expanded='true'] {
+  background-color: #FFFFFF;
   border-color: #003A5A;
   color: #003A5A;
 }
 
 .c1:disabled {
+  background-color: #FFFFFF;
   border-color: #84C6EA;
   color: #84C6EA;
 }
@@ -616,11 +618,13 @@ exports[`Icon Button Has small styles 1`] = `
 .c1[aria-expanded='true'] {
   background-color: #003A5A;
   border-color: #003A5A;
+  color: #FFFFFF;
 }
 
 .c1:disabled {
   background-color: #84C6EA;
   border-color: #84C6EA;
+  color: #FFFFFF;
 }
 
 <button
@@ -709,11 +713,13 @@ exports[`Icon Button Has tertiary styles 1`] = `
 .c1:hover,
 .c1[aria-expanded='true'] {
   background-color: #DBDEE1;
+  border-color: transparent;
   color: #1B1C1E;
 }
 
 .c1:disabled {
   background-color: transparent;
+  border-color: transparent;
   color: #B7BBC2;
 }
 
diff --git a/packages/react/src/components/buttons/icon-button.tsx b/packages/react/src/components/buttons/icon-button.tsx
index 90817e39cb..dffab96b5a 100644
--- a/packages/react/src/components/buttons/icon-button.tsx
+++ b/packages/react/src/components/buttons/icon-button.tsx
@@ -1,6 +1,6 @@
 import { forwardRef, KeyboardEvent, MouseEvent, ReactElement, Ref } from 'react';
 import styled, { css, FlattenInterpolation, ThemeProps } from 'styled-components';
-import { Theme } from '../../themes';
+import { ResolvedTheme } from '../../themes/theme';
 import { AvatarProps } from '../avatar/avatar';
 import { useDeviceContext } from '../device-context-provider/device-context-provider';
 import { Icon, IconName, IconProps } from '../icon/icon';
@@ -44,7 +44,7 @@ export interface IconButtonProps {
 
 const getButtonSizeStyles = (
     { isMobile, size }: { isMobile: boolean, size?: Size },
-): FlattenInterpolation<ThemeProps<Theme>> => {
+): FlattenInterpolation<ThemeProps<ResolvedTheme>> => {
     switch (size) {
         case 'small':
             return css`
diff --git a/packages/react/src/components/buttons/search-button.tsx b/packages/react/src/components/buttons/search-button.tsx
index 3c1ec55835..ee3204af9d 100644
--- a/packages/react/src/components/buttons/search-button.tsx
+++ b/packages/react/src/components/buttons/search-button.tsx
@@ -11,25 +11,25 @@ interface ButtonProps {
 }
 
 const StyledButton = styled(AbstractButton)`
-    background: ${({ theme }) => theme.greys.white};
-    border-color: ${({ theme }) => theme.greys['dark-grey']};
-    color: ${({ theme }) => theme.greys['dark-grey']};
+    background: ${({ theme }) => theme.component['button-search-background-color']};
+    border-color: ${({ theme }) => theme.component['button-search-border-color']};
+    color: ${({ theme }) => theme.component['button-search-text-color']};
     height: 2rem;
     padding: 0 var(--spacing-1x);
     width: 2rem;
 
     &:hover {
-        background-color: ${({ theme }) => theme.greys.grey};
-        color: ${({ theme }) => theme.greys.black};
+        background-color: ${({ theme }) => theme.component['button-search-hover-background-color']};
+        color: ${({ theme }) => theme.component['button-search-hover-text-color']};
     }
 
     &:disabled {
         &,
         &:focus,
         &:hover {
-            background-color: ${({ theme }) => theme.greys['light-grey']};
-            border-color: ${({ theme }) => theme.greys.grey};
-            color: ${({ theme }) => theme.greys['mid-grey']};
+            background-color: ${({ theme }) => theme.component['button-search-disabled-background-color']};
+            border-color: ${({ theme }) => theme.component['button-search-disabled-border-color']};
+            color: ${({ theme }) => theme.component['button-search-disabled-text-color']};
         }
     }
 `;
diff --git a/packages/react/src/components/chooser-button/styles/choose.ts b/packages/react/src/components/chooser-button/styles/choose.ts
index 83e2640e22..e8aa2148be 100644
--- a/packages/react/src/components/chooser-button/styles/choose.ts
+++ b/packages/react/src/components/chooser-button/styles/choose.ts
@@ -1,9 +1,9 @@
 import styled from 'styled-components';
-import { Theme } from '../../../themes';
+import { ResolvedTheme } from '../../../themes/theme';
 import { focus } from '../../../utils/css-state';
 
 export const Label = styled.label`
-    ${({ theme }: { theme: Theme }) => `
+    ${({ theme }: { theme: ResolvedTheme }) => `
             --border-radius: 8px;
 
             align-items: center;
diff --git a/packages/react/src/components/date-picker/date-picker.test.tsx.snap b/packages/react/src/components/date-picker/date-picker.test.tsx.snap
index d1599a6903..4611652f8d 100644
--- a/packages/react/src/components/date-picker/date-picker.test.tsx.snap
+++ b/packages/react/src/components/date-picker/date-picker.test.tsx.snap
@@ -3050,11 +3050,13 @@ exports[`Datepicker matches snapshot (open, hasTodayButton) 1`] = `
 
 .c17:hover,
 .c17[aria-expanded='true'] {
+  background-color: #FFFFFF;
   border-color: #003A5A;
   color: #003A5A;
 }
 
 .c17:disabled {
+  background-color: #FFFFFF;
   border-color: #84C6EA;
   color: #84C6EA;
 }
diff --git a/packages/react/src/components/date-picker/date-picker.tsx b/packages/react/src/components/date-picker/date-picker.tsx
index c8cc9058f0..045d2b5913 100644
--- a/packages/react/src/components/date-picker/date-picker.tsx
+++ b/packages/react/src/components/date-picker/date-picker.tsx
@@ -19,7 +19,7 @@ import DatePicker, { ReactDatePickerProps, registerLocale } from 'react-datepick
 import datepickerCss from 'react-datepicker/dist/react-datepicker.min.css';
 import styled, { createGlobalStyle, css } from 'styled-components';
 import { useTranslation } from '../../i18n/use-translation';
-import { Theme } from '../../themes';
+import { ResolvedTheme } from '../../themes/theme';
 import { eventIsInside } from '../../utils/events';
 import { v4 as uuid } from '../../utils/uuid';
 import { Button } from '../buttons/button';
@@ -42,17 +42,17 @@ import {
 
 interface StyledDatePickerProps extends ReactDatePickerProps {
     isMobile: boolean;
-    theme: Theme;
+    theme: ResolvedTheme;
     valid?: boolean;
 }
 
 interface CalendarButtonProps {
     disabled?: boolean;
-    theme: Theme;
+    theme: ResolvedTheme;
     isMobile?: boolean;
 }
 
-const Container = styled.div<{ isMobile: boolean, theme: Theme }>`
+const Container = styled.div<{ isMobile: boolean, theme: ResolvedTheme }>`
     display: flex;
 
     .popper {
diff --git a/packages/react/src/components/device-context-provider/device-context-provider.test.tsx b/packages/react/src/components/device-context-provider/device-context-provider.test.tsx
index af2ce1da01..7d2d6d9708 100644
--- a/packages/react/src/components/device-context-provider/device-context-provider.test.tsx
+++ b/packages/react/src/components/device-context-provider/device-context-provider.test.tsx
@@ -1,6 +1,6 @@
 import { mount, ReactWrapper } from 'enzyme';
 import { ReactElement } from 'react';
-import { breakpoints } from '../../tokens/breakpoints';
+import { breakpoints } from '../../legacy-constants/breakpoints';
 import { DeviceContextProps, DeviceContextProvider, DeviceType, useDeviceContext } from './device-context-provider';
 
 const TestComponent = (): ReactElement => {
diff --git a/packages/react/src/components/device-context-provider/device-context-provider.tsx b/packages/react/src/components/device-context-provider/device-context-provider.tsx
index 81757593ad..8eb340456f 100644
--- a/packages/react/src/components/device-context-provider/device-context-provider.tsx
+++ b/packages/react/src/components/device-context-provider/device-context-provider.tsx
@@ -1,5 +1,5 @@
 import { createContext, FunctionComponent, PropsWithChildren, useContext, useEffect, useState } from 'react';
-import { breakpoints, Breakpoints } from '../../tokens/breakpoints';
+import { breakpoints, Breakpoints } from '../../legacy-constants/breakpoints';
 
 export type DeviceType = 'desktop' | 'tablet' | 'mobile';
 
diff --git a/packages/react/src/components/dropdown-list/dropdown-list.tsx b/packages/react/src/components/dropdown-list/dropdown-list.tsx
index d48862a11d..1e8921c6c1 100644
--- a/packages/react/src/components/dropdown-list/dropdown-list.tsx
+++ b/packages/react/src/components/dropdown-list/dropdown-list.tsx
@@ -9,7 +9,7 @@ import {
 import styled from 'styled-components';
 import { useDataAttributes } from '../../hooks/use-data-attributes';
 import { useTranslation } from '../../i18n/use-translation';
-import { Theme } from '../../themes';
+import { ResolvedTheme } from '../../themes/theme';
 import { focus } from '../../utils/css-state';
 import { isLetterOrNumber } from '../../utils/regex';
 import { useDeviceContext } from '../device-context-provider/device-context-provider';
@@ -26,7 +26,7 @@ import { useListSearch } from '../../hooks/use-list-search';
 interface TextboxProps {
     $disabled?: boolean;
     $isMobile: boolean;
-    theme: Theme;
+    theme: ResolvedTheme;
     $valid: boolean;
     value: string;
 }
@@ -69,7 +69,7 @@ const Textbox = styled.div<TextboxProps>`
     text-wrap: none;
     user-select: none;
     width: 100%;
-    
+
     ${({ theme }) => focus({ theme }, true)};
 `;
 
diff --git a/packages/react/src/components/dropdown-menu-button/dropdown-menu-button.test.tsx.snap b/packages/react/src/components/dropdown-menu-button/dropdown-menu-button.test.tsx.snap
index 5c03e7733c..855898f051 100644
--- a/packages/react/src/components/dropdown-menu-button/dropdown-menu-button.test.tsx.snap
+++ b/packages/react/src/components/dropdown-menu-button/dropdown-menu-button.test.tsx.snap
@@ -383,12 +383,14 @@ exports[`DropdownMenuButton Matches Snapshot (defaultOpen) 1`] = `
 .c2:hover,
 .c2[aria-expanded='true'] {
   background-color: #003A5A;
+  border-color: transparent;
   color: #FFFFFF;
 }
 
 .c2:disabled {
   background-color: transparent;
-  color: #003A5A;
+  border-color: transparent;
+  color: #006296;
 }
 
 .c5 {
@@ -1055,12 +1057,14 @@ exports[`DropdownMenuButton Matches Snapshot 1`] = `
 .c2:hover,
 .c2[aria-expanded='true'] {
   background-color: #003A5A;
+  border-color: transparent;
   color: #FFFFFF;
 }
 
 .c2:disabled {
   background-color: transparent;
-  color: #003A5A;
+  border-color: transparent;
+  color: #006296;
 }
 
 .c5 {
diff --git a/packages/react/src/components/dropdown-navigation/dropdown-navigation.test.tsx.snap b/packages/react/src/components/dropdown-navigation/dropdown-navigation.test.tsx.snap
index 09eed6952b..9c974280cb 100644
--- a/packages/react/src/components/dropdown-navigation/dropdown-navigation.test.tsx.snap
+++ b/packages/react/src/components/dropdown-navigation/dropdown-navigation.test.tsx.snap
@@ -76,12 +76,14 @@ exports[`DropdownNavigation Matches Snapshot (defaultOpen) 1`] = `
 .c2:hover,
 .c2[aria-expanded='true'] {
   background-color: #003A5A;
+  border-color: transparent;
   color: #FFFFFF;
 }
 
 .c2:disabled {
   background-color: transparent;
-  color: #003A5A;
+  border-color: transparent;
+  color: #006296;
 }
 
 .c8 {
@@ -332,12 +334,14 @@ exports[`DropdownNavigation Matches Snapshot (tag="nav") 1`] = `
 .c2:hover,
 .c2[aria-expanded='true'] {
   background-color: #003A5A;
+  border-color: transparent;
   color: #FFFFFF;
 }
 
 .c2:disabled {
   background-color: transparent;
-  color: #003A5A;
+  border-color: transparent;
+  color: #006296;
 }
 
 .c8 {
@@ -589,12 +593,14 @@ exports[`DropdownNavigation Matches Snapshot 1`] = `
 .c2:hover,
 .c2[aria-expanded='true'] {
   background-color: #003A5A;
+  border-color: transparent;
   color: #FFFFFF;
 }
 
 .c2:disabled {
   background-color: transparent;
-  color: #003A5A;
+  border-color: transparent;
+  color: #006296;
 }
 
 .c8 {
diff --git a/packages/react/src/components/dropdown-navigation/dropdown-navigation.tsx b/packages/react/src/components/dropdown-navigation/dropdown-navigation.tsx
index a836c667ef..4cf5b0b901 100644
--- a/packages/react/src/components/dropdown-navigation/dropdown-navigation.tsx
+++ b/packages/react/src/components/dropdown-navigation/dropdown-navigation.tsx
@@ -12,7 +12,7 @@ import {
 import styled from 'styled-components';
 import { useDataAttributes } from '../../hooks/use-data-attributes';
 import { useTranslation } from '../../i18n/use-translation';
-import { menuDimensions } from '../../tokens/menuDimensions';
+import { menuDimensions } from '../../legacy-constants/menuDimensions';
 import { getRootDocument } from '../../utils/dom';
 import { eventIsInside } from '../../utils/events';
 import { v4 as uuid } from '../../utils/uuid';
diff --git a/packages/react/src/components/field-container/field-container.tsx b/packages/react/src/components/field-container/field-container.tsx
index da7a064470..1320994bd1 100644
--- a/packages/react/src/components/field-container/field-container.tsx
+++ b/packages/react/src/components/field-container/field-container.tsx
@@ -1,13 +1,13 @@
 import { FunctionComponent, PropsWithChildren } from 'react';
 import styled from 'styled-components';
-import { Theme } from '../../themes';
+import { ResolvedTheme } from '../../themes/theme';
 import { useDeviceContext } from '../device-context-provider/device-context-provider';
 import { InvalidField } from '../feedbacks/invalid-field';
 import { Label } from '../label/label';
 import { TooltipProps } from '../tooltip/tooltip';
 
 interface StyledDivProps {
-    theme: Theme;
+    theme: ResolvedTheme;
     hasLabel: boolean;
     hasHint: boolean;
     valid: boolean;
diff --git a/packages/react/src/components/global-banner/global-banner.test.tsx.snap b/packages/react/src/components/global-banner/global-banner.test.tsx.snap
index 8237371133..1668e60f5b 100644
--- a/packages/react/src/components/global-banner/global-banner.test.tsx.snap
+++ b/packages/react/src/components/global-banner/global-banner.test.tsx.snap
@@ -75,18 +75,15 @@ exports[`GlobalBanner matches snapshot (desktop, alert) 1`] = `
 
 .c8:hover,
 .c8[aria-expanded='true'] {
+  background-color: transparent;
   border-color: #84C6EA;
   color: #84C6EA;
 }
 
 .c8:disabled {
-  border-color: #003A5A;
-  color: #003A5A;
-}
-
-.c8:focus {
-  background-color: #012639;
-  border-color: #006296 color:#FFFFFF;
+  background-color: transparent;
+  border-color: #006296;
+  color: #006296;
 }
 
 .c4 {
@@ -314,18 +311,15 @@ exports[`GlobalBanner matches snapshot (desktop, default) 1`] = `
 
 .c8:hover,
 .c8[aria-expanded='true'] {
+  background-color: transparent;
   border-color: #84C6EA;
   color: #84C6EA;
 }
 
 .c8:disabled {
-  border-color: #003A5A;
-  color: #003A5A;
-}
-
-.c8:focus {
-  background-color: #012639;
-  border-color: #006296 color:#FFFFFF;
+  background-color: transparent;
+  border-color: #006296;
+  color: #006296;
 }
 
 .c10 {
@@ -347,12 +341,14 @@ exports[`GlobalBanner matches snapshot (desktop, default) 1`] = `
 .c10:hover,
 .c10[aria-expanded='true'] {
   background-color: #003A5A;
+  border-color: transparent;
   color: #FFFFFF;
 }
 
 .c10:disabled {
   background-color: transparent;
-  color: #003A5A;
+  border-color: transparent;
+  color: #006296;
 }
 
 .c4 {
@@ -595,18 +591,15 @@ exports[`GlobalBanner matches snapshot (desktop, info) 1`] = `
 
 .c8:hover,
 .c8[aria-expanded='true'] {
+  background-color: transparent;
   border-color: #84C6EA;
   color: #84C6EA;
 }
 
 .c8:disabled {
-  border-color: #003A5A;
-  color: #003A5A;
-}
-
-.c8:focus {
-  background-color: #012639;
-  border-color: #006296 color:#FFFFFF;
+  background-color: transparent;
+  border-color: #006296;
+  color: #006296;
 }
 
 .c10 {
@@ -628,12 +621,14 @@ exports[`GlobalBanner matches snapshot (desktop, info) 1`] = `
 .c10:hover,
 .c10[aria-expanded='true'] {
   background-color: #003A5A;
+  border-color: transparent;
   color: #FFFFFF;
 }
 
 .c10:disabled {
   background-color: transparent;
-  color: #003A5A;
+  border-color: transparent;
+  color: #006296;
 }
 
 .c4 {
@@ -876,18 +871,15 @@ exports[`GlobalBanner matches snapshot (desktop, warning) 1`] = `
 
 .c8:hover,
 .c8[aria-expanded='true'] {
+  background-color: transparent;
   border-color: #84C6EA;
   color: #84C6EA;
 }
 
 .c8:disabled {
-  border-color: #003A5A;
-  color: #003A5A;
-}
-
-.c8:focus {
-  background-color: #012639;
-  border-color: #006296 color:#FFFFFF;
+  background-color: transparent;
+  border-color: #006296;
+  color: #006296;
 }
 
 .c10 {
@@ -909,12 +901,14 @@ exports[`GlobalBanner matches snapshot (desktop, warning) 1`] = `
 .c10:hover,
 .c10[aria-expanded='true'] {
   background-color: #003A5A;
+  border-color: transparent;
   color: #FFFFFF;
 }
 
 .c10:disabled {
   background-color: transparent;
-  color: #003A5A;
+  border-color: transparent;
+  color: #006296;
 }
 
 .c4 {
@@ -1169,18 +1163,15 @@ exports[`GlobalBanner matches snapshot (mobile, alert) 1`] = `
 
 .c8:hover,
 .c8[aria-expanded='true'] {
+  background-color: transparent;
   border-color: #84C6EA;
   color: #84C6EA;
 }
 
 .c8:disabled {
-  border-color: #003A5A;
-  color: #003A5A;
-}
-
-.c8:focus {
-  background-color: #012639;
-  border-color: #006296 color:#FFFFFF;
+  background-color: transparent;
+  border-color: #006296;
+  color: #006296;
 }
 
 .c4 {
@@ -1411,18 +1402,15 @@ exports[`GlobalBanner matches snapshot (mobile, default) 1`] = `
 
 .c8:hover,
 .c8[aria-expanded='true'] {
+  background-color: transparent;
   border-color: #84C6EA;
   color: #84C6EA;
 }
 
 .c8:disabled {
-  border-color: #003A5A;
-  color: #003A5A;
-}
-
-.c8:focus {
-  background-color: #012639;
-  border-color: #006296 color:#FFFFFF;
+  background-color: transparent;
+  border-color: #006296;
+  color: #006296;
 }
 
 .c10 {
@@ -1444,12 +1432,14 @@ exports[`GlobalBanner matches snapshot (mobile, default) 1`] = `
 .c10:hover,
 .c10[aria-expanded='true'] {
   background-color: #003A5A;
+  border-color: transparent;
   color: #FFFFFF;
 }
 
 .c10:disabled {
   background-color: transparent;
-  color: #003A5A;
+  border-color: transparent;
+  color: #006296;
 }
 
 .c4 {
@@ -1695,18 +1685,15 @@ exports[`GlobalBanner matches snapshot (mobile, info) 1`] = `
 
 .c8:hover,
 .c8[aria-expanded='true'] {
+  background-color: transparent;
   border-color: #84C6EA;
   color: #84C6EA;
 }
 
 .c8:disabled {
-  border-color: #003A5A;
-  color: #003A5A;
-}
-
-.c8:focus {
-  background-color: #012639;
-  border-color: #006296 color:#FFFFFF;
+  background-color: transparent;
+  border-color: #006296;
+  color: #006296;
 }
 
 .c10 {
@@ -1728,12 +1715,14 @@ exports[`GlobalBanner matches snapshot (mobile, info) 1`] = `
 .c10:hover,
 .c10[aria-expanded='true'] {
   background-color: #003A5A;
+  border-color: transparent;
   color: #FFFFFF;
 }
 
 .c10:disabled {
   background-color: transparent;
-  color: #003A5A;
+  border-color: transparent;
+  color: #006296;
 }
 
 .c4 {
@@ -1979,18 +1968,15 @@ exports[`GlobalBanner matches snapshot (mobile, warning) 1`] = `
 
 .c8:hover,
 .c8[aria-expanded='true'] {
+  background-color: transparent;
   border-color: #84C6EA;
   color: #84C6EA;
 }
 
 .c8:disabled {
-  border-color: #003A5A;
-  color: #003A5A;
-}
-
-.c8:focus {
-  background-color: #012639;
-  border-color: #006296 color:#FFFFFF;
+  background-color: transparent;
+  border-color: #006296;
+  color: #006296;
 }
 
 .c10 {
@@ -2012,12 +1998,14 @@ exports[`GlobalBanner matches snapshot (mobile, warning) 1`] = `
 .c10:hover,
 .c10[aria-expanded='true'] {
   background-color: #003A5A;
+  border-color: transparent;
   color: #FFFFFF;
 }
 
 .c10:disabled {
   background-color: transparent;
-  color: #003A5A;
+  border-color: transparent;
+  color: #006296;
 }
 
 .c4 {
diff --git a/packages/react/src/components/global-navigation/global-navigation.test.tsx.snap b/packages/react/src/components/global-navigation/global-navigation.test.tsx.snap
index 9804ef9c8d..2c08f01846 100644
--- a/packages/react/src/components/global-navigation/global-navigation.test.tsx.snap
+++ b/packages/react/src/components/global-navigation/global-navigation.test.tsx.snap
@@ -79,11 +79,13 @@ exports[`Global Navigation matches snapshot 1`] = `
 .c3[aria-expanded='true'] {
   background-color: #003A5A;
   border-color: #003A5A;
+  color: #FFFFFF;
 }
 
 .c3:disabled {
   background-color: #84C6EA;
   border-color: #84C6EA;
+  color: #FFFFFF;
 }
 
 .c3 > svg {
diff --git a/packages/react/src/components/heading/heading.test.tsx.snap b/packages/react/src/components/heading/heading.test.tsx.snap
index 320a698556..02e87dc0fa 100644
--- a/packages/react/src/components/heading/heading.test.tsx.snap
+++ b/packages/react/src/components/heading/heading.test.tsx.snap
@@ -2,6 +2,7 @@
 
 exports[`Heading matches snapshot (large) 1`] = `
 .c0 {
+  color: #000000;
   font-size: 1.5rem;
   font-weight: var(--font-normal);
   line-height: 2.25rem;
@@ -23,6 +24,7 @@ exports[`Heading matches snapshot (large) 1`] = `
 
 exports[`Heading matches snapshot (medium) 1`] = `
 .c0 {
+  color: #000000;
   font-size: 1.25rem;
   font-weight: var(--font-normal);
   line-height: 2rem;
@@ -44,6 +46,7 @@ exports[`Heading matches snapshot (medium) 1`] = `
 
 exports[`Heading matches snapshot (no margin) 1`] = `
 .c0 {
+  color: #000000;
   font-size: 1.25rem;
   font-weight: var(--font-normal);
   line-height: 2rem;
@@ -68,6 +71,7 @@ exports[`Heading matches snapshot (no margin) 1`] = `
 
 exports[`Heading matches snapshot (small) 1`] = `
 .c0 {
+  color: #000000;
   font-size: 1rem;
   font-weight: var(--font-normal);
   line-height: 1.5rem;
@@ -111,6 +115,7 @@ exports[`Heading matches snapshot (subtitle) 1`] = `
 
 exports[`Heading matches snapshot (xlarge) 1`] = `
 .c0 {
+  color: #000000;
   font-size: 2rem;
   font-weight: var(--font-normal);
   line-height: 3rem;
diff --git a/packages/react/src/components/heading/heading.tsx b/packages/react/src/components/heading/heading.tsx
index d0862b25d0..e0e1fbcdd7 100644
--- a/packages/react/src/components/heading/heading.tsx
+++ b/packages/react/src/components/heading/heading.tsx
@@ -20,6 +20,7 @@ interface StyledHeadingProps {
 }
 
 const HeadingXlarge = styled.h1<StyledHeadingProps>`
+    color: ${({ theme }) => theme.component['heading-text-color']};
     font-size: 2rem;
     font-weight: var(--font-normal);
     line-height: 3rem;
@@ -27,6 +28,7 @@ const HeadingXlarge = styled.h1<StyledHeadingProps>`
 `;
 
 const HeadingLarge = styled.h2<StyledHeadingProps>`
+    color: ${({ theme }) => theme.component['heading-text-color']};
     font-size: 1.5rem;
     font-weight: ${({ bold }) => (bold ? 'var(--font-semi-bold)' : 'var(--font-normal)')};
     line-height: 2.25rem;
@@ -34,6 +36,7 @@ const HeadingLarge = styled.h2<StyledHeadingProps>`
 `;
 
 const HeadingMedium = styled.h3<StyledHeadingProps>`
+    color: ${({ theme }) => theme.component['heading-text-color']};
     font-size: 1.25rem;
     font-weight: ${({ bold }) => (bold ? 'var(--font-semi-bold)' : 'var(--font-normal)')};
     line-height: 2rem;
@@ -41,6 +44,7 @@ const HeadingMedium = styled.h3<StyledHeadingProps>`
 `;
 
 const HeadingSmall = styled.h4<StyledHeadingProps>`
+    color: ${({ theme }) => theme.component['heading-text-color']};
     font-size: 1rem;
     font-weight: ${({ bold }) => (bold ? 'var(--font-semi-bold)' : 'var(--font-normal)')};
     line-height: 1.5rem;
@@ -48,7 +52,7 @@ const HeadingSmall = styled.h4<StyledHeadingProps>`
 `;
 
 const HeadingSubtitle = styled.h2<StyledHeadingProps>`
-    color: ${({ theme }) => theme.greys['dark-grey']};
+    color: ${({ theme }) => theme.component['heading-subtitle-text-color']};
     font-size: 1rem;
     font-weight: ${({ bold }) => (bold ? 'var(--font-semi-bold)' : 'var(--font-normal)')};
     line-height: 1.5rem;
diff --git a/packages/react/src/components/label/label.tsx b/packages/react/src/components/label/label.tsx
index 2e21066c89..d97404eaa4 100644
--- a/packages/react/src/components/label/label.tsx
+++ b/packages/react/src/components/label/label.tsx
@@ -10,7 +10,7 @@ const StyledDiv = styled.div`
 `;
 
 const StyledLabel = styled.label<{isMobile: boolean}>`
-    color: ${(props) => props.theme.greys.black};
+    color: ${(props) => props.theme.component['label-text-color']};
     display: block;
     font-size: ${({ isMobile }) => (isMobile ? '0.875rem' : '0.75rem')};
     font-weight: var(--font-normal);
diff --git a/packages/react/src/components/lozenge/lozenge.tsx b/packages/react/src/components/lozenge/lozenge.tsx
index a9c0f4f3a8..9bce87be9a 100644
--- a/packages/react/src/components/lozenge/lozenge.tsx
+++ b/packages/react/src/components/lozenge/lozenge.tsx
@@ -1,6 +1,6 @@
 import { FunctionComponent, PropsWithChildren } from 'react';
 import styled from 'styled-components';
-import { Theme } from '../../themes';
+import { ResolvedTheme } from '../../themes/theme';
 import { useDeviceContext } from '../device-context-provider/device-context-provider';
 import { Icon, IconName } from '../icon/icon';
 
@@ -11,7 +11,7 @@ export type LozengeType = 'default' | 'success' | 'alert' | 'warning' | 'info' |
 interface StyledLozengeProps {
     $isMobile: boolean;
     $type?: LozengeType;
-    theme: Theme;
+    theme: ResolvedTheme;
 }
 
 function getLozengeBackgroundColor({ $type, theme }: StyledLozengeProps): string {
diff --git a/packages/react/src/components/menu-button/menu-button.tsx b/packages/react/src/components/menu-button/menu-button.tsx
index 3528bde231..1e221126eb 100644
--- a/packages/react/src/components/menu-button/menu-button.tsx
+++ b/packages/react/src/components/menu-button/menu-button.tsx
@@ -1,6 +1,6 @@
 import React, { FunctionComponent, PropsWithChildren, useState, useEffect, useRef, useCallback } from 'react';
 import styled from 'styled-components';
-import { menuDimensions } from '../../tokens/menuDimensions';
+import { menuDimensions } from '../../legacy-constants/menuDimensions';
 import { ButtonType } from '../buttons/abstract-button';
 import { Button } from '../buttons/button';
 import { IconButton } from '../buttons/icon-button';
diff --git a/packages/react/src/components/modal/modal-dialog.test.tsx.snap b/packages/react/src/components/modal/modal-dialog.test.tsx.snap
index 6d21b43f05..8404613a8e 100644
--- a/packages/react/src/components/modal/modal-dialog.test.tsx.snap
+++ b/packages/react/src/components/modal/modal-dialog.test.tsx.snap
@@ -159,11 +159,13 @@ exports[`Modal-Dialog Matches snapshot (custom button labels) 1`] = `
 .c14:hover,
 .c14[aria-expanded='true'] {
   background-color: #DBDEE1;
+  border-color: transparent;
   color: #1B1C1E;
 }
 
 .c14:disabled {
   background-color: transparent;
+  border-color: transparent;
   color: #B7BBC2;
 }
 
@@ -199,11 +201,13 @@ exports[`Modal-Dialog Matches snapshot (custom button labels) 1`] = `
 .c10:hover,
 .c10[aria-expanded='true'] {
   background-color: #DBDEE1;
+  border-color: transparent;
   color: #1B1C1E;
 }
 
 .c10:disabled {
   background-color: transparent;
+  border-color: transparent;
   color: #B7BBC2;
 }
 
@@ -227,14 +231,17 @@ exports[`Modal-Dialog Matches snapshot (custom button labels) 1`] = `
 .c11[aria-expanded='true'] {
   background-color: #003A5A;
   border-color: #003A5A;
+  color: #FFFFFF;
 }
 
 .c11:disabled {
   background-color: #84C6EA;
   border-color: #84C6EA;
+  color: #FFFFFF;
 }
 
 .c3 {
+  color: #000000;
   font-size: 1.25rem;
   font-weight: var(--font-normal);
   line-height: 2rem;
@@ -504,11 +511,13 @@ exports[`Modal-Dialog Matches snapshot (custom footer content) 1`] = `
 .c8:hover,
 .c8[aria-expanded='true'] {
   background-color: #DBDEE1;
+  border-color: transparent;
   color: #1B1C1E;
 }
 
 .c8:disabled {
   background-color: transparent;
+  border-color: transparent;
   color: #B7BBC2;
 }
 
@@ -526,6 +535,7 @@ exports[`Modal-Dialog Matches snapshot (custom footer content) 1`] = `
 }
 
 .c3 {
+  color: #000000;
   font-size: 1.25rem;
   font-weight: var(--font-normal);
   line-height: 2rem;
@@ -805,11 +815,13 @@ exports[`Modal-Dialog Matches snapshot (only subtitle) 1`] = `
 .c14:hover,
 .c14[aria-expanded='true'] {
   background-color: #DBDEE1;
+  border-color: transparent;
   color: #1B1C1E;
 }
 
 .c14:disabled {
   background-color: transparent;
+  border-color: transparent;
   color: #B7BBC2;
 }
 
@@ -845,11 +857,13 @@ exports[`Modal-Dialog Matches snapshot (only subtitle) 1`] = `
 .c10:hover,
 .c10[aria-expanded='true'] {
   background-color: #DBDEE1;
+  border-color: transparent;
   color: #1B1C1E;
 }
 
 .c10:disabled {
   background-color: transparent;
+  border-color: transparent;
   color: #B7BBC2;
 }
 
@@ -873,14 +887,17 @@ exports[`Modal-Dialog Matches snapshot (only subtitle) 1`] = `
 .c11[aria-expanded='true'] {
   background-color: #003A5A;
   border-color: #003A5A;
+  color: #FFFFFF;
 }
 
 .c11:disabled {
   background-color: #84C6EA;
   border-color: #84C6EA;
+  color: #FFFFFF;
 }
 
 .c3 {
+  color: #000000;
   font-size: 1.25rem;
   font-weight: var(--font-normal);
   line-height: 2rem;
@@ -1206,11 +1223,13 @@ exports[`Modal-Dialog Matches snapshot (opened, desktop) 1`] = `
 .c14:hover,
 .c14[aria-expanded='true'] {
   background-color: #DBDEE1;
+  border-color: transparent;
   color: #1B1C1E;
 }
 
 .c14:disabled {
   background-color: transparent;
+  border-color: transparent;
   color: #B7BBC2;
 }
 
@@ -1246,11 +1265,13 @@ exports[`Modal-Dialog Matches snapshot (opened, desktop) 1`] = `
 .c10:hover,
 .c10[aria-expanded='true'] {
   background-color: #DBDEE1;
+  border-color: transparent;
   color: #1B1C1E;
 }
 
 .c10:disabled {
   background-color: transparent;
+  border-color: transparent;
   color: #B7BBC2;
 }
 
@@ -1274,14 +1295,17 @@ exports[`Modal-Dialog Matches snapshot (opened, desktop) 1`] = `
 .c11[aria-expanded='true'] {
   background-color: #003A5A;
   border-color: #003A5A;
+  color: #FFFFFF;
 }
 
 .c11:disabled {
   background-color: #84C6EA;
   border-color: #84C6EA;
+  color: #FFFFFF;
 }
 
 .c3 {
+  color: #000000;
   font-size: 1.25rem;
   font-weight: var(--font-normal);
   line-height: 2rem;
@@ -1550,11 +1574,13 @@ exports[`Modal-Dialog Matches snapshot (opened, mobile) 1`] = `
 .c13:hover,
 .c13[aria-expanded='true'] {
   background-color: #DBDEE1;
+  border-color: transparent;
   color: #1B1C1E;
 }
 
 .c13:disabled {
   background-color: transparent;
+  border-color: transparent;
   color: #B7BBC2;
 }
 
@@ -1590,11 +1616,13 @@ exports[`Modal-Dialog Matches snapshot (opened, mobile) 1`] = `
 .c10:hover,
 .c10[aria-expanded='true'] {
   background-color: #DBDEE1;
+  border-color: transparent;
   color: #1B1C1E;
 }
 
 .c10:disabled {
   background-color: transparent;
+  border-color: transparent;
   color: #B7BBC2;
 }
 
@@ -1618,14 +1646,17 @@ exports[`Modal-Dialog Matches snapshot (opened, mobile) 1`] = `
 .c11[aria-expanded='true'] {
   background-color: #003A5A;
   border-color: #003A5A;
+  color: #FFFFFF;
 }
 
 .c11:disabled {
   background-color: #84C6EA;
   border-color: #84C6EA;
+  color: #FFFFFF;
 }
 
 .c3 {
+  color: #000000;
   font-size: 1.25rem;
   font-weight: var(--font-normal);
   line-height: 2rem;
diff --git a/packages/react/src/components/modal/modal.test.tsx.snap b/packages/react/src/components/modal/modal.test.tsx.snap
index 58df8166db..04de0a1d41 100644
--- a/packages/react/src/components/modal/modal.test.tsx.snap
+++ b/packages/react/src/components/modal/modal.test.tsx.snap
@@ -295,11 +295,13 @@ exports[`Modal Matches snapshot (noPadding) 1`] = `
 .c4:hover,
 .c4[aria-expanded='true'] {
   background-color: #DBDEE1;
+  border-color: transparent;
   color: #1B1C1E;
 }
 
 .c4:disabled {
   background-color: transparent;
+  border-color: transparent;
   color: #B7BBC2;
 }
 
@@ -502,11 +504,13 @@ exports[`Modal Matches snapshot (opened, desktop) 1`] = `
 .c4:hover,
 .c4[aria-expanded='true'] {
   background-color: #DBDEE1;
+  border-color: transparent;
   color: #1B1C1E;
 }
 
 .c4:disabled {
   background-color: transparent;
+  border-color: transparent;
   color: #B7BBC2;
 }
 
@@ -708,11 +712,13 @@ exports[`Modal Matches snapshot (opened, mobile) 1`] = `
 .c4:hover,
 .c4[aria-expanded='true'] {
   background-color: #DBDEE1;
+  border-color: transparent;
   color: #1B1C1E;
 }
 
 .c4:disabled {
   background-color: transparent;
+  border-color: transparent;
   color: #B7BBC2;
 }
 
diff --git a/packages/react/src/components/numeric-input/numeric-input.tsx b/packages/react/src/components/numeric-input/numeric-input.tsx
index 23f3f68ab7..592640685f 100644
--- a/packages/react/src/components/numeric-input/numeric-input.tsx
+++ b/packages/react/src/components/numeric-input/numeric-input.tsx
@@ -8,7 +8,7 @@ import {
 import styled, { css } from 'styled-components';
 import { useId } from '../../hooks/use-id';
 import { focus } from '../../utils/css-state';
-import { Theme } from '../../themes';
+import { ResolvedTheme } from '../../themes/theme';
 import { DeviceContextProps, useDeviceContext } from '../device-context-provider/device-context-provider';
 import { FieldContainer } from '../field-container/field-container';
 import { inputsStyle } from '../text-input/styles/inputs';
@@ -17,7 +17,7 @@ import { useNumericInput, UseNumericInputParams } from './use-numeric-input';
 
 interface StyledInputProps {
     device: DeviceContextProps;
-    theme: Theme;
+    theme: ResolvedTheme;
     $textAlign: 'left' | 'right';
 }
 
diff --git a/packages/react/src/components/password-input/password-input.test.tsx.snap b/packages/react/src/components/password-input/password-input.test.tsx.snap
index b7407a55ca..2500cb0efd 100644
--- a/packages/react/src/components/password-input/password-input.test.tsx.snap
+++ b/packages/react/src/components/password-input/password-input.test.tsx.snap
@@ -261,11 +261,13 @@ exports[`PasswordInput matches the snapshot (Disabled) 1`] = `
 .c6:hover,
 .c6[aria-expanded='true'] {
   background-color: #DBDEE1;
+  border-color: transparent;
   color: #1B1C1E;
 }
 
 .c6:disabled {
   background-color: transparent;
+  border-color: transparent;
   color: #B7BBC2;
 }
 
@@ -775,11 +777,13 @@ exports[`PasswordInput matches the snapshot (Invalid) 1`] = `
 .c9:hover,
 .c9[aria-expanded='true'] {
   background-color: #DBDEE1;
+  border-color: transparent;
   color: #1B1C1E;
 }
 
 .c9:disabled {
   background-color: transparent;
+  border-color: transparent;
   color: #B7BBC2;
 }
 
@@ -1260,11 +1264,13 @@ exports[`PasswordInput matches the snapshot (Normal) 1`] = `
 .c6:hover,
 .c6[aria-expanded='true'] {
   background-color: #DBDEE1;
+  border-color: transparent;
   color: #1B1C1E;
 }
 
 .c6:disabled {
   background-color: transparent;
+  border-color: transparent;
   color: #B7BBC2;
 }
 
diff --git a/packages/react/src/components/progress-circle/progress-circle.tsx b/packages/react/src/components/progress-circle/progress-circle.tsx
index 8b38c5fa30..69ac93eb37 100644
--- a/packages/react/src/components/progress-circle/progress-circle.tsx
+++ b/packages/react/src/components/progress-circle/progress-circle.tsx
@@ -1,13 +1,13 @@
 import { VoidFunctionComponent } from 'react';
 import styled from 'styled-components';
-import { Theme } from '../../themes';
+import { ResolvedTheme } from '../../themes/theme';
 import { Circle } from '../circle/circle';
 
 const RADIUS = 62;
 const STROKE = 8;
 
 interface ResultProps {
-    theme: Theme;
+    theme: ResolvedTheme;
     secondary?: boolean;
 }
 
diff --git a/packages/react/src/components/progress-indicator/progress-indicator.tsx b/packages/react/src/components/progress-indicator/progress-indicator.tsx
index 2647f7c35e..9d76cfe1cb 100644
--- a/packages/react/src/components/progress-indicator/progress-indicator.tsx
+++ b/packages/react/src/components/progress-indicator/progress-indicator.tsx
@@ -1,10 +1,10 @@
 import { ReactText, VoidFunctionComponent } from 'react';
 import styled from 'styled-components';
-import { Theme } from '../../themes';
+import { ResolvedTheme } from '../../themes/theme';
 import { Bar } from '../bar/bar';
 
 const Label = styled.label`
-    color: ${(props: { theme: Theme }) => props.theme.greys.black};
+    color: ${(props: { theme: ResolvedTheme }) => props.theme.greys.black};
     display: block;
     font-size: 0.875rem;
     letter-spacing: 0.02875rem;
diff --git a/packages/react/src/components/radio-button-group/radio-button-group.tsx b/packages/react/src/components/radio-button-group/radio-button-group.tsx
index a761a36773..08e5e3a35a 100644
--- a/packages/react/src/components/radio-button-group/radio-button-group.tsx
+++ b/packages/react/src/components/radio-button-group/radio-button-group.tsx
@@ -1,7 +1,7 @@
 import { ChangeEvent, useCallback, useEffect, useState, VoidFunctionComponent } from 'react';
 import styled from 'styled-components';
 import { useDataAttributes } from '../../hooks/use-data-attributes';
-import { Theme } from '../../themes';
+import { ResolvedTheme } from '../../themes/theme';
 import { focus } from '../../utils/css-state';
 import { Tooltip, TooltipProps } from '../tooltip/tooltip';
 import { useDeviceContext } from '../device-context-provider/device-context-provider';
@@ -31,7 +31,7 @@ const StyledTooltip = styled(Tooltip)`
 const RadioWrapper = styled.div``;
 
 const StyledLabel = styled.label`
-    ${(props: { theme: Theme, disabled?: boolean }) => `
+    ${(props: { theme: ResolvedTheme, disabled?: boolean }) => `
             align-items: center;
             display: flex;
             font-size: 0.875rem;
diff --git a/packages/react/src/components/radio-card-group/styled-components.ts b/packages/react/src/components/radio-card-group/styled-components.ts
index b5a8afcbb0..c3191df33d 100644
--- a/packages/react/src/components/radio-card-group/styled-components.ts
+++ b/packages/react/src/components/radio-card-group/styled-components.ts
@@ -1,26 +1,26 @@
 import styled from 'styled-components';
-import { Theme } from '../../themes';
+import { ResolvedTheme } from '../../themes/theme';
 import { focus } from '../../utils/css-state';
 
 interface InputContainerProps {
     disabled?: boolean;
     isMobile: boolean;
     isChecked?: boolean;
-    theme: Theme;
+    theme: ResolvedTheme;
 }
 
 interface DescriptionProps {
     disabled?: boolean;
     isMobile: boolean;
     isChecked?: boolean;
-    theme: Theme;
+    theme: ResolvedTheme;
 }
 
 interface CardProps {
     disabled?: boolean;
     isMobile: boolean;
     isChecked?: boolean;
-    theme: Theme;
+    theme: ResolvedTheme;
 }
 
 export const RadioInput = styled.span<CardProps>`
diff --git a/packages/react/src/components/search/search-input.tsx b/packages/react/src/components/search/search-input.tsx
index ddfe01647e..c19bac0b0e 100644
--- a/packages/react/src/components/search/search-input.tsx
+++ b/packages/react/src/components/search/search-input.tsx
@@ -3,7 +3,7 @@ import XIcon from 'feather-icons/dist/icons/x.svg';
 import { ChangeEvent, FocusEvent, KeyboardEvent, useCallback, useMemo, useRef, VoidFunctionComponent } from 'react';
 import styled from 'styled-components';
 import { useTranslation } from '../../i18n/use-translation';
-import { Theme } from '../../themes';
+import { ResolvedTheme } from '../../themes/theme';
 import { focus } from '../../utils/css-state';
 import { v4 as uuid } from '../../utils/uuid';
 import { SearchButton } from '../buttons/search-button';
@@ -33,7 +33,7 @@ const InnerWrapper = styled.div`
     z-index: 1;
 `;
 
-function iconColor(props: { theme: Theme, disabled?: boolean }): string {
+function iconColor(props: { theme: ResolvedTheme, disabled?: boolean }): string {
     if (props.disabled) {
         return props.theme.greys['mid-grey'];
     }
@@ -55,7 +55,7 @@ const IcoReset = styled(XIcon)`
 `;
 
 interface InputProps {
-    theme: Theme;
+    theme: ResolvedTheme;
     hasButton: boolean;
     hasIcon: boolean;
     hasReset: boolean;
diff --git a/packages/react/src/components/sectional-banner/sectional-banner.tsx b/packages/react/src/components/sectional-banner/sectional-banner.tsx
index 466cb50e99..e26f8ae168 100644
--- a/packages/react/src/components/sectional-banner/sectional-banner.tsx
+++ b/packages/react/src/components/sectional-banner/sectional-banner.tsx
@@ -10,7 +10,7 @@ import {
 import styled, { css, ThemedCssFunction } from 'styled-components';
 import { useId } from '../../hooks/use-id';
 import { useTranslation } from '../../i18n/use-translation';
-import { Theme } from '../../themes';
+import { ResolvedTheme } from '../../themes/theme';
 import { Button } from '../buttons/button';
 import { IconButton } from '../buttons/icon-button';
 import { DeviceContextProps, useDeviceContext } from '../device-context-provider/device-context-provider';
@@ -38,7 +38,7 @@ const BannerIcon = styled(Icon) <ComponentProps<typeof Icon> & { isMobile: boole
     margin-top: ${({ isMobile }) => (isMobile ? 'var(--spacing-1x)' : 'var(--spacing-half)')};
 `;
 
-function getLayout({ isMobile }: AbstractContainerProps): ReturnType<ThemedCssFunction<Theme>> {
+function getLayout({ isMobile }: AbstractContainerProps): ReturnType<ThemedCssFunction<ResolvedTheme>> {
     if (isMobile) {
         return css`
             display: grid;
@@ -55,8 +55,8 @@ function getLayout({ isMobile }: AbstractContainerProps): ReturnType<ThemedCssFu
 
 function abstractContainer(
     bgColor: string,
-    color?: keyof Theme['notifications'],
-    iconColor: keyof Theme['notifications'] | undefined = color,
+    color?: keyof ResolvedTheme['notifications'],
+    iconColor: keyof ResolvedTheme['notifications'] | undefined = color,
 ): FunctionComponent<PropsWithChildren<AbstractContainerProps>> {
     return styled.section<AbstractContainerProps>`
         background-color: ${bgColor};
diff --git a/packages/react/src/components/status/status.tsx b/packages/react/src/components/status/status.tsx
index 502b459648..f484a2f7bd 100644
--- a/packages/react/src/components/status/status.tsx
+++ b/packages/react/src/components/status/status.tsx
@@ -1,10 +1,10 @@
 import { VoidFunctionComponent } from 'react';
 import styled from 'styled-components';
-import { Theme } from '../../themes';
+import { ResolvedTheme } from '../../themes/theme';
 
 export type StatusType = 'enabled' | 'disabled' | 'blocked';
 
-function getBackgroundColor(type: StatusType, theme: Theme): string {
+function getBackgroundColor(type: StatusType, theme: ResolvedTheme): string {
     switch (type) {
         case 'enabled':
             return theme.notifications['success-1.1'];
diff --git a/packages/react/src/components/stepper-input/stepper-input.tsx b/packages/react/src/components/stepper-input/stepper-input.tsx
index da4375ef8b..41bf948e75 100644
--- a/packages/react/src/components/stepper-input/stepper-input.tsx
+++ b/packages/react/src/components/stepper-input/stepper-input.tsx
@@ -9,7 +9,7 @@ import {
 } from 'react';
 import styled from 'styled-components';
 import { useTranslation } from '../../i18n/use-translation';
-import { Theme } from '../../themes';
+import { ResolvedTheme } from '../../themes/theme';
 import { v4 as uuid } from '../../utils/uuid';
 import { DeviceContextProps, useDeviceContext } from '../device-context-provider/device-context-provider';
 import { FieldContainer } from '../field-container/field-container';
@@ -24,7 +24,7 @@ const Wrapper = styled.div`
 
 interface StyledInputProps {
     device: DeviceContextProps;
-    theme: Theme;
+    theme: ResolvedTheme;
 }
 
 const StyledInput = styled.input<StyledInputProps>`
diff --git a/packages/react/src/components/table/sort-button-icon.test.tsx b/packages/react/src/components/table/sort-button-icon.test.tsx
index 1cf2db2e07..1be36f52b1 100644
--- a/packages/react/src/components/table/sort-button-icon.test.tsx
+++ b/packages/react/src/components/table/sort-button-icon.test.tsx
@@ -1,13 +1,14 @@
 import { shallow } from 'enzyme';
 import { useTheme } from '../../hooks/use-theme';
 import { equisoftTheme } from '../../themes';
+import { mergeTheme } from '../../themes/merge-theme';
 import { SortButtonIcon } from './sort-button-icon';
 
 jest.mock('../../hooks/use-theme');
 
 describe('SortButtonIcon', () => {
     beforeEach(() => {
-        jest.mocked(useTheme).mockReturnValue(equisoftTheme);
+        jest.mocked(useTheme).mockReturnValue(mergeTheme(equisoftTheme));
     });
 
     it('should display arrow up when sort is ascending', () => {
diff --git a/packages/react/src/components/table/table-row.tsx b/packages/react/src/components/table/table-row.tsx
index cd1644d309..e936e802d1 100644
--- a/packages/react/src/components/table/table-row.tsx
+++ b/packages/react/src/components/table/table-row.tsx
@@ -1,7 +1,7 @@
 import { CSSProperties, ReactElement } from 'react';
 import { Row } from 'react-table';
 import styled, { css, FlattenInterpolation, ThemedStyledProps, ThemeProps } from 'styled-components';
-import { Theme } from '../../themes';
+import { ResolvedTheme } from '../../themes/theme';
 
 interface StyledTableRowProps {
     clickable: boolean;
@@ -12,7 +12,7 @@ interface StyledTableRowProps {
 
 function getRowBackgroundColor({
     selected, error,
-}: ThemedStyledProps<StyledTableRowProps, Theme>): FlattenInterpolation<ThemeProps<Theme>> {
+}: ThemedStyledProps<StyledTableRowProps, ResolvedTheme>): FlattenInterpolation<ThemeProps<ResolvedTheme>> {
     if (selected) {
         return css`
             /* TODO fix with next thematization */
@@ -32,7 +32,7 @@ function getRowBackgroundColor({
 
 function getCellBackgroundCss({
     theme, clickable,
-}: ThemedStyledProps<StyledTableRowProps, Theme>): FlattenInterpolation<ThemeProps<Theme>> {
+}: ThemedStyledProps<StyledTableRowProps, ResolvedTheme>): FlattenInterpolation<ThemeProps<ResolvedTheme>> {
     if (!clickable) {
         return css`
             td {
@@ -52,7 +52,7 @@ function getCellBackgroundCss({
     `;
 }
 
-const StyledTableRow = styled.tr<StyledTableRowProps & { theme: Theme }>`
+const StyledTableRow = styled.tr<StyledTableRowProps & { theme: ResolvedTheme }>`
     &:not(:first-child) {
         border-top: 1px solid ${({ theme }) => theme.greys.grey};
     }
diff --git a/packages/react/src/components/table/table.tsx b/packages/react/src/components/table/table.tsx
index 1d3ed5872f..b5ed199b46 100644
--- a/packages/react/src/components/table/table.tsx
+++ b/packages/react/src/components/table/table.tsx
@@ -12,7 +12,7 @@ import {
     useTable,
 } from 'react-table';
 import styled, { css } from 'styled-components';
-import { Theme } from '../../themes';
+import { ResolvedTheme } from '../../themes/theme';
 import { Checkbox } from '../checkbox/checkbox';
 import { DeviceType, useDeviceContext } from '../device-context-provider/device-context-provider';
 import { SortableColumnHeading } from './sortable-column-heading';
@@ -27,7 +27,7 @@ interface StyledTableProps {
     clickableRows: boolean;
     device: DeviceType;
     striped: boolean;
-    theme: Theme;
+    theme: ResolvedTheme;
     rowSize?: RowSize;
 }
 
diff --git a/packages/react/src/components/tag/tag.tsx b/packages/react/src/components/tag/tag.tsx
index 5a4c370104..a875c9e7a1 100644
--- a/packages/react/src/components/tag/tag.tsx
+++ b/packages/react/src/components/tag/tag.tsx
@@ -9,7 +9,7 @@ import {
 } from 'react';
 import styled, { css, FlattenInterpolation, ThemeProps } from 'styled-components';
 import { useTranslation } from '../../i18n/use-translation';
-import { Theme } from '../../themes';
+import { ResolvedTheme } from '../../themes/theme';
 import { focus } from '../../utils/css-state';
 import { useDeviceContext } from '../device-context-provider/device-context-provider';
 import { Icon, IconName } from '../icon/icon';
@@ -106,7 +106,7 @@ const DeleteIcon = styled(Icon).attrs({
     color: '#60666e',
 })``;
 
-function getClickableStyle({ $clickable }: ContainerProps): FlattenInterpolation<ThemeProps<Theme>> | false {
+function getClickableStyle({ $clickable }: ContainerProps): FlattenInterpolation<ThemeProps<ResolvedTheme>> | false {
     return $clickable && css`
         &:hover {
             /* TODO fix with next thematization gray65 */
diff --git a/packages/react/src/components/text-area/text-area.tsx b/packages/react/src/components/text-area/text-area.tsx
index 219c735732..39f25e5fef 100644
--- a/packages/react/src/components/text-area/text-area.tsx
+++ b/packages/react/src/components/text-area/text-area.tsx
@@ -2,7 +2,7 @@ import { ChangeEvent, FocusEvent, useMemo, useState, VoidFunctionComponent } fro
 import styled from 'styled-components';
 import { useDataAttributes } from '../../hooks/use-data-attributes';
 import { useTranslation } from '../../i18n/use-translation';
-import { Theme } from '../../themes';
+import { ResolvedTheme } from '../../themes/theme';
 import { v4 as uuid } from '../../utils/uuid';
 import { FieldContainer } from '../field-container/field-container';
 import { inputsStyle } from '../text-input/styles/inputs';
@@ -20,7 +20,7 @@ const StyledTextArea = styled.textarea`
     resize: vertical;
 `;
 
-const Counter = styled.div<{ valid: boolean, theme: Theme }>`
+const Counter = styled.div<{ valid: boolean, theme: ResolvedTheme }>`
     color: ${({ valid, theme }) => (valid ? `${theme.greys['dark-grey']}` : `${theme.notifications['alert-2.1']}`)};
     font-size: 0.75rem;
     letter-spacing: 0.02rem;
diff --git a/packages/react/src/components/text-input/styles/inputs.tsx b/packages/react/src/components/text-input/styles/inputs.tsx
index 632fc15095..575b468e71 100644
--- a/packages/react/src/components/text-input/styles/inputs.tsx
+++ b/packages/react/src/components/text-input/styles/inputs.tsx
@@ -1,10 +1,10 @@
 import { css, FlattenSimpleInterpolation } from 'styled-components';
-import { Theme } from '../../../themes';
+import { ResolvedTheme } from '../../../themes/theme';
 import { focus } from '../../../utils/css-state';
 import { DeviceContextProps } from '../../device-context-provider/device-context-provider';
 
-export const inputsStyle: (theme: Theme, isMobile?: boolean) => FlattenSimpleInterpolation = (
-    theme: Theme,
+export const inputsStyle: (theme: ResolvedTheme, isMobile?: boolean) => FlattenSimpleInterpolation = (
+    theme: ResolvedTheme,
     isMobile = false,
 ) => css`
     background: ${theme.greys.white};
@@ -40,7 +40,7 @@ export const inputsStyle: (theme: Theme, isMobile?: boolean) => FlattenSimpleInt
 `;
 
 interface ResponsiveInputsStyles {
-    theme: Theme;
+    theme: ResolvedTheme;
     device: DeviceContextProps;
 }
 
diff --git a/packages/react/src/components/theme-wrapper/theme-wrapper.test.tsx b/packages/react/src/components/theme-wrapper/theme-wrapper.test.tsx
index ed0a9ce16d..ac2ac090a1 100644
--- a/packages/react/src/components/theme-wrapper/theme-wrapper.test.tsx
+++ b/packages/react/src/components/theme-wrapper/theme-wrapper.test.tsx
@@ -1,7 +1,33 @@
 import { render, shallow } from 'enzyme';
-import { Button, testTheme } from '../..';
+import { Button } from '../..';
 import { ShadowWrapper } from '../shadow-wrapper/shadow-wrapper';
 import { ThemeWrapper } from './theme-wrapper';
+import { ThemeCustomization } from '../../themes/theme';
+
+const ThemeCustomization: ThemeCustomization = {
+    ref: {
+        'color-brand-50': '#00874E',
+        'color-brand-20': '#9EDBC1',
+        'color-brand-70': '#0B5E37',
+        'color-brand-05': '#E5F3ED',
+        'color-brand-80': '#00874E',
+        'color-accent-50': '#00874E',
+        'color-accent-20': '#CC9B0B',
+        'color-accent-70': '#3F474C',
+    },
+    alias: {
+        'default-text-color': 'color-brand-05',
+        'alternate-text-color': 'color-brand-20',
+    },
+    component: {
+        'button-primary-background-color': 'color-brand-50',
+        'button-primary-inverted-background-color': 'color-white',
+        'button-primary-border-color': 'color-brand-50',
+        'button-primary-inverted-border-color': 'color-white',
+        'button-primary-text-color': 'color-white',
+        'button-primary-inverted-text-color': 'color-brand-50',
+    },
+};
 
 describe('Theme Wrapper', () => {
     test('Returns component with default theme', () => {
@@ -14,14 +40,14 @@ describe('Theme Wrapper', () => {
         expect(tree).toMatchSnapshot();
     });
 
-    test('Returns component with test theme', () => {
-        const tree = render(
-            <ThemeWrapper theme={testTheme}>
+    test('Returns component with custom theme', () => {
+        const tree1 = render(
+            <ThemeWrapper theme={ThemeCustomization}>
                 <Button buttonType="primary" />
             </ThemeWrapper>,
         );
 
-        expect(tree).toMatchSnapshot();
+        expect(tree1).toMatchSnapshot();
     });
 
     test('should not use ShadowWrapper by default', () => {
diff --git a/packages/react/src/components/theme-wrapper/theme-wrapper.test.tsx.snap b/packages/react/src/components/theme-wrapper/theme-wrapper.test.tsx.snap
index 6c72df60b6..facac724e6 100644
--- a/packages/react/src/components/theme-wrapper/theme-wrapper.test.tsx.snap
+++ b/packages/react/src/components/theme-wrapper/theme-wrapper.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Theme Wrapper Returns component with default theme 1`] = `
+exports[`Theme Wrapper Returns component with custom theme 1`] = `
 .c0 {
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -47,8 +47,8 @@ exports[`Theme Wrapper Returns component with default theme 1`] = `
 
 .c0:focus {
   outline: none;
-  border-color: #006296;
-  box-shadow: 0 0 0 2px #84C6EA;
+  border-color: #00874E;
+  box-shadow: 0 0 0 2px #9EDBC1;
 }
 
 .c0 > svg {
@@ -58,8 +58,8 @@ exports[`Theme Wrapper Returns component with default theme 1`] = `
 }
 
 .c1 {
-  background-color: #006296;
-  border-color: #006296;
+  background-color: #00874E;
+  border-color: #00874E;
   color: #FFFFFF;
 }
 
@@ -69,19 +69,21 @@ exports[`Theme Wrapper Returns component with default theme 1`] = `
 
 .c1:focus {
   outline: none;
-  border-color: #006296;
-  box-shadow: 0 0 0 2px #84C6EA;
+  border-color: #00874E;
+  box-shadow: 0 0 0 2px #9EDBC1;
 }
 
 .c1:hover,
 .c1[aria-expanded='true'] {
-  background-color: #003A5A;
-  border-color: #003A5A;
+  background-color: #0B5E37;
+  border-color: #0B5E37;
+  color: #FFFFFF;
 }
 
 .c1:disabled {
-  background-color: #84C6EA;
-  border-color: #84C6EA;
+  background-color: #9EDBC1;
+  border-color: #9EDBC1;
+  color: #FFFFFF;
 }
 
 <button
@@ -90,7 +92,7 @@ exports[`Theme Wrapper Returns component with default theme 1`] = `
 />
 `;
 
-exports[`Theme Wrapper Returns component with test theme 1`] = `
+exports[`Theme Wrapper Returns component with default theme 1`] = `
 .c0 {
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -148,8 +150,8 @@ exports[`Theme Wrapper Returns component with test theme 1`] = `
 }
 
 .c1 {
-  background-color: #9EB3FF;
-  border-color: #9EB3FF;
+  background-color: #006296;
+  border-color: #006296;
   color: #FFFFFF;
 }
 
@@ -165,13 +167,15 @@ exports[`Theme Wrapper Returns component with test theme 1`] = `
 
 .c1:hover,
 .c1[aria-expanded='true'] {
-  background-color: #8984E8;
-  border-color: #8984E8;
+  background-color: #003A5A;
+  border-color: #003A5A;
+  color: #FFFFFF;
 }
 
 .c1:disabled {
-  background-color: #84B4E8;
-  border-color: #84B4E8;
+  background-color: #84C6EA;
+  border-color: #84C6EA;
+  color: #FFFFFF;
 }
 
 <button
diff --git a/packages/react/src/components/theme-wrapper/theme-wrapper.tsx b/packages/react/src/components/theme-wrapper/theme-wrapper.tsx
index 3abfc4538d..72c5fa0aa5 100644
--- a/packages/react/src/components/theme-wrapper/theme-wrapper.tsx
+++ b/packages/react/src/components/theme-wrapper/theme-wrapper.tsx
@@ -1,7 +1,9 @@
 import { FunctionComponent, PropsWithChildren, ReactNode } from 'react';
 import { ThemeProvider } from 'styled-components';
 import { useStyle } from '../../styles';
-import { equisoftTheme, Theme } from '../../themes';
+import { equisoftTheme } from '../../themes';
+import { mergeTheme } from '../../themes/merge-theme';
+import { ThemeCustomization } from '../../themes/theme';
 import { ShadowWrapper } from '../shadow-wrapper/shadow-wrapper';
 
 export interface ThemeWrapperProps {
@@ -10,7 +12,7 @@ export interface ThemeWrapperProps {
      * @default false
      */
     isolateStyles?: boolean;
-    theme?: Theme;
+    theme?: ThemeCustomization;
 }
 
 /**
@@ -21,14 +23,7 @@ export const ThemeWrapper: FunctionComponent<PropsWithChildren<ThemeWrapperProps
     isolateStyles = false,
     theme,
 }) => {
-    let selectedTheme = theme;
-    if (selectedTheme) {
-        if (Object.entries(selectedTheme).length === 0 && selectedTheme.constructor === Object) {
-            selectedTheme = equisoftTheme;
-        }
-    } else {
-        selectedTheme = equisoftTheme;
-    }
+    const selectedTheme = mergeTheme(theme || equisoftTheme);
 
     let content: ReactNode;
     if (isolateStyles) {
diff --git a/packages/react/src/components/toast/toast-container.test.tsx.snap b/packages/react/src/components/toast/toast-container.test.tsx.snap
index 2219c2a88b..eb92ccc158 100644
--- a/packages/react/src/components/toast/toast-container.test.tsx.snap
+++ b/packages/react/src/components/toast/toast-container.test.tsx.snap
@@ -78,11 +78,13 @@ exports[`ToastContainer should match snapshot (error) 1`] = `
 .c4:hover,
 .c4[aria-expanded='true'] {
   background-color: #DBDEE1;
+  border-color: transparent;
   color: #1B1C1E;
 }
 
 .c4:disabled {
   background-color: transparent;
+  border-color: transparent;
   color: #B7BBC2;
 }
 
@@ -363,11 +365,13 @@ exports[`ToastContainer should match snapshot (information) 1`] = `
 .c4:hover,
 .c4[aria-expanded='true'] {
   background-color: #DBDEE1;
+  border-color: transparent;
   color: #1B1C1E;
 }
 
 .c4:disabled {
   background-color: transparent;
+  border-color: transparent;
   color: #B7BBC2;
 }
 
@@ -648,11 +652,13 @@ exports[`ToastContainer should match snapshot (success) 1`] = `
 .c4:hover,
 .c4[aria-expanded='true'] {
   background-color: #DBDEE1;
+  border-color: transparent;
   color: #1B1C1E;
 }
 
 .c4:disabled {
   background-color: transparent;
+  border-color: transparent;
   color: #B7BBC2;
 }
 
@@ -933,11 +939,13 @@ exports[`ToastContainer should match snapshot (warning) 1`] = `
 .c4:hover,
 .c4[aria-expanded='true'] {
   background-color: #DBDEE1;
+  border-color: transparent;
   color: #1B1C1E;
 }
 
 .c4:disabled {
   background-color: transparent;
+  border-color: transparent;
   color: #B7BBC2;
 }
 
diff --git a/packages/react/src/components/toast/toast-container.tsx b/packages/react/src/components/toast/toast-container.tsx
index a52ca5141a..c3ddc54892 100644
--- a/packages/react/src/components/toast/toast-container.tsx
+++ b/packages/react/src/components/toast/toast-container.tsx
@@ -10,7 +10,7 @@ import styled, {
 import { useTheme } from '../../hooks/use-theme';
 import { useToasts } from '../../hooks/use-toasts';
 import { useTranslation } from '../../i18n/use-translation';
-import { Theme } from '../../themes';
+import { ResolvedTheme } from '../../themes/theme';
 import { IconButton, IconButtonProps } from '../buttons/icon-button';
 import { DeviceContextProps, useDeviceContext } from '../device-context-provider/device-context-provider';
 import { Icon, IconName, IconProps } from '../icon/icon';
@@ -20,11 +20,13 @@ import { ToastType } from './toast-type';
 interface ToastWrapperProps {
     isMobile: boolean;
     position: ToastPosition;
-    theme: Theme;
+    theme: ResolvedTheme;
     type: ToastType;
 }
 
-function getToastContainerBackground({ theme, type }: ToastWrapperProps): FlattenInterpolation<ThemeProps<Theme>> {
+function getToastContainerBackground(
+    { theme, type }: ToastWrapperProps,
+): FlattenInterpolation<ThemeProps<ResolvedTheme>> {
     switch (type) {
         case 'information':
             return css`
@@ -65,7 +67,7 @@ const toastInRight = keyframes` /* stylelint-disable-line keyframes-name-pattern
     }
 `;
 
-function getToastPosition({ position }: ToastWrapperProps): FlattenInterpolation<ThemeProps<Theme>> {
+function getToastPosition({ position }: ToastWrapperProps): FlattenInterpolation<ThemeProps<ResolvedTheme>> {
     switch (position) {
         case 'top-right':
             return css`
@@ -108,7 +110,7 @@ const StyledMessage = styled.p<{ color: string, $isMobile: boolean }>`
     margin: 0 var(--spacing-1halfx);
 `;
 
-type DismissIconProps = ThemedStyledProps<Pick<IconButtonProps, 'label' | 'onClick'>, Theme> & {
+type DismissIconProps = ThemedStyledProps<Pick<IconButtonProps, 'label' | 'onClick'>, ResolvedTheme> & {
     $color: string;
     $isMobile: boolean;
     $type: ToastType;
@@ -197,7 +199,7 @@ function getToastIconName(type: ToastType): IconName {
     }
 }
 
-function getToastTextColor(type: ToastType, theme: Theme): string {
+function getToastTextColor(type: ToastType, theme: ResolvedTheme): string {
     return type === 'warning' ? theme.greys.black : theme.greys.white;
 }
 
diff --git a/packages/react/src/components/toast/toasts-container.tsx b/packages/react/src/components/toast/toasts-container.tsx
index dbbbdd8976..653f177e5c 100644
--- a/packages/react/src/components/toast/toasts-container.tsx
+++ b/packages/react/src/components/toast/toasts-container.tsx
@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom';
 import { useShadowRoot } from 'react-shadow';
 import styled, { css, FlattenInterpolation, ThemeProps } from 'styled-components';
 import { useToasts } from '../../hooks/use-toasts';
-import { Theme } from '../../themes';
+import { ResolvedTheme } from '../../themes/theme';
 import { DeviceContextProps, useDeviceContext } from '../device-context-provider/device-context-provider';
 import { ToastContainer } from './toast-container';
 import { ToastPosition } from './toast-position';
@@ -18,7 +18,7 @@ type ContainerProps = ToastProps & MobileDeviceContextProps;
 function getToastPosition({
     isMobile,
     position,
-}: ContainerProps): FlattenInterpolation<ThemeProps<Theme>> {
+}: ContainerProps): FlattenInterpolation<ThemeProps<ResolvedTheme>> {
     const lateralPosition = isMobile ? '0' : 'var(--spacing-2x)';
     switch (position) {
         case 'top-right':
diff --git a/packages/react/src/components/toggle-switch/toggle-switch.tsx b/packages/react/src/components/toggle-switch/toggle-switch.tsx
index 6f36e1ddb8..710d5df421 100644
--- a/packages/react/src/components/toggle-switch/toggle-switch.tsx
+++ b/packages/react/src/components/toggle-switch/toggle-switch.tsx
@@ -1,13 +1,13 @@
 import { useMemo, VoidFunctionComponent } from 'react';
 import styled from 'styled-components';
 import { useDataAttributes } from '../../hooks/use-data-attributes';
-import { Theme } from '../../themes';
+import { ResolvedTheme } from '../../themes/theme';
 import { focus } from '../../utils/css-state';
 import { v4 as uuid } from '../../utils/uuid';
 import { useDeviceContext } from '../device-context-provider/device-context-provider';
 
 interface StyledLabelProps {
-    theme: Theme;
+    theme: ResolvedTheme;
     isMobile: boolean;
     disabled: boolean;
 }
@@ -20,7 +20,7 @@ const StyledLabel = styled.label<StyledLabelProps>`
 `;
 
 interface StyledButtonSpanProps {
-    theme: Theme;
+    theme: ResolvedTheme;
     isMobile: boolean;
 }
 
@@ -37,7 +37,7 @@ const StyledButtonSpan = styled.span<StyledButtonSpanProps>`
 `;
 
 interface StyledButtonProps {
-    theme: Theme;
+    theme: ResolvedTheme;
     isMobile: boolean
 }
 
diff --git a/packages/react/src/components/toggletip/toggletip.test.tsx.snap b/packages/react/src/components/toggletip/toggletip.test.tsx.snap
index 642b235bc6..5efff38a3d 100644
--- a/packages/react/src/components/toggletip/toggletip.test.tsx.snap
+++ b/packages/react/src/components/toggletip/toggletip.test.tsx.snap
@@ -78,11 +78,13 @@ exports[`Toggletip Has default desktop styles (defaultOpen) 1`] = `
 .c0:hover,
 .c0[aria-expanded='true'] {
   background-color: #DBDEE1;
+  border-color: transparent;
   color: #1B1C1E;
 }
 
 .c0:disabled {
   background-color: transparent;
+  border-color: transparent;
   color: #B7BBC2;
 }
 
@@ -428,11 +430,13 @@ exports[`Toggletip Has default desktop styles 1`] = `
 .c0:hover,
 .c0[aria-expanded='true'] {
   background-color: #DBDEE1;
+  border-color: transparent;
   color: #1B1C1E;
 }
 
 .c0:disabled {
   background-color: transparent;
+  border-color: transparent;
   color: #B7BBC2;
 }
 
@@ -597,11 +601,13 @@ exports[`Toggletip Has mobile styles (defaultOpen) 1`] = `
 .c0:hover,
 .c0[aria-expanded='true'] {
   background-color: #DBDEE1;
+  border-color: transparent;
   color: #1B1C1E;
 }
 
 .c0:disabled {
   background-color: transparent;
+  border-color: transparent;
   color: #B7BBC2;
 }
 
@@ -947,11 +953,13 @@ exports[`Toggletip Has mobile styles 1`] = `
 .c0:hover,
 .c0[aria-expanded='true'] {
   background-color: #DBDEE1;
+  border-color: transparent;
   color: #1B1C1E;
 }
 
 .c0:disabled {
   background-color: transparent;
+  border-color: transparent;
   color: #B7BBC2;
 }
 
diff --git a/packages/react/src/components/tooltip/tooltip.tsx b/packages/react/src/components/tooltip/tooltip.tsx
index 50f8924037..5ae6d3720e 100644
--- a/packages/react/src/components/tooltip/tooltip.tsx
+++ b/packages/react/src/components/tooltip/tooltip.tsx
@@ -11,7 +11,7 @@ import {
 import { PopperOptions, TriggerType, usePopperTooltip } from 'react-popper-tooltip';
 import styled, { css } from 'styled-components';
 import { useTheme } from '../../hooks/use-theme';
-import { Theme as ThemeType } from '../../themes';
+import { ResolvedTheme as ThemeType } from '../../themes/theme';
 import { focus } from '../../utils/css-state';
 import { v4 as uuid } from '../../utils/uuid';
 import { useDeviceContext } from '../device-context-provider/device-context-provider';
diff --git a/packages/react/src/components/user-profile/user-profile.test.tsx.snap b/packages/react/src/components/user-profile/user-profile.test.tsx.snap
index 1e4ed0fe40..3dd0439186 100644
--- a/packages/react/src/components/user-profile/user-profile.test.tsx.snap
+++ b/packages/react/src/components/user-profile/user-profile.test.tsx.snap
@@ -103,12 +103,14 @@ exports[`UserProfile Matches Snapshot (defaultOpen) 1`] = `
 .c2:hover,
 .c2[aria-expanded='true'] {
   background-color: #003A5A;
+  border-color: transparent;
   color: #FFFFFF;
 }
 
 .c2:disabled {
   background-color: transparent;
-  color: #003A5A;
+  border-color: transparent;
+  color: #006296;
 }
 
 .c7 {
@@ -795,12 +797,14 @@ exports[`UserProfile Matches Snapshot (desktop) 1`] = `
 .c2:hover,
 .c2[aria-expanded='true'] {
   background-color: #003A5A;
+  border-color: transparent;
   color: #FFFFFF;
 }
 
 .c2:disabled {
   background-color: transparent;
-  color: #003A5A;
+  border-color: transparent;
+  color: #006296;
 }
 
 .c7 {
@@ -1463,12 +1467,14 @@ exports[`UserProfile Matches Snapshot (mobile) 1`] = `
 .c3:hover,
 .c3[aria-expanded='true'] {
   background-color: #003A5A;
+  border-color: transparent;
   color: #FFFFFF;
 }
 
 .c3:disabled {
   background-color: transparent;
-  color: #003A5A;
+  border-color: transparent;
+  color: #006296;
 }
 
 .c3 > svg {
@@ -2176,12 +2182,14 @@ exports[`UserProfile Matches Snapshot (tag="nav") 1`] = `
 .c2:hover,
 .c2[aria-expanded='true'] {
   background-color: #003A5A;
+  border-color: transparent;
   color: #FFFFFF;
 }
 
 .c2:disabled {
   background-color: transparent;
-  color: #003A5A;
+  border-color: transparent;
+  color: #006296;
 }
 
 .c7 {
diff --git a/packages/react/src/hooks/use-theme.ts b/packages/react/src/hooks/use-theme.ts
index f3a5634b1e..a405c6995d 100644
--- a/packages/react/src/hooks/use-theme.ts
+++ b/packages/react/src/hooks/use-theme.ts
@@ -1,7 +1,7 @@
 import { useContext } from 'react';
 import { ThemeContext } from 'styled-components';
-import { Theme } from '../themes';
+import { ResolvedTheme } from '../themes/theme';
 
-export function useTheme(): Theme {
+export function useTheme(): ResolvedTheme {
     return useContext(ThemeContext);
 }
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index 5689bb772f..55ba45a44a 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -90,9 +90,8 @@ export { Pagination } from './components/pagination/pagination';
 
 // Themes
 export { equisoftTheme } from './themes/equisoft';
-export { testTheme } from './themes/test-theme';
 export { injectMainCss } from './styles';
-export { Theme } from './themes/theme';
+export { ResolvedTheme, ThemeCustomization, ThemeCustomization as Theme } from './themes/theme';
 
 // Hooks
 export { useTheme } from './hooks/use-theme';
diff --git a/packages/react/src/tokens/breakpoints.ts b/packages/react/src/legacy-constants/breakpoints.ts
similarity index 100%
rename from packages/react/src/tokens/breakpoints.ts
rename to packages/react/src/legacy-constants/breakpoints.ts
diff --git a/packages/react/src/tokens/menuDimensions.ts b/packages/react/src/legacy-constants/menuDimensions.ts
similarity index 100%
rename from packages/react/src/tokens/menuDimensions.ts
rename to packages/react/src/legacy-constants/menuDimensions.ts
diff --git a/packages/react/src/styled-components-theme.d.ts b/packages/react/src/styled-components-theme.d.ts
index bfd6494aaa..f7d9d92a3e 100644
--- a/packages/react/src/styled-components-theme.d.ts
+++ b/packages/react/src/styled-components-theme.d.ts
@@ -1,7 +1,7 @@
-import { Theme } from './themes';
+import { ResolvedTheme } from './themes/theme';
 
 declare module 'styled-components' {
     // eslint-disable-next-line @typescript-eslint/no-empty-interface
-    interface DefaultTheme extends Theme {
+    interface DefaultTheme extends ResolvedTheme {
     }
 }
diff --git a/packages/react/src/theme.ts b/packages/react/src/theme.ts
index 54115e84f3..082e44d6d3 100644
--- a/packages/react/src/theme.ts
+++ b/packages/react/src/theme.ts
@@ -1,2 +1,2 @@
 export { equisoftTheme } from './themes/equisoft';
-export { Theme } from './themes/theme';
+export { ResolvedTheme } from './themes/theme';
diff --git a/packages/react/src/themes/default-theme.ts b/packages/react/src/themes/default-theme.ts
new file mode 100644
index 0000000000..df0a401320
--- /dev/null
+++ b/packages/react/src/themes/default-theme.ts
@@ -0,0 +1,8 @@
+import { defaultComponentTokens, defaultAliasTokens, defaultRefTokens } from './tokens';
+import { ThemeCustomization } from './theme';
+
+export const defaultTheme: ThemeCustomization = {
+    ref: defaultRefTokens,
+    alias: defaultAliasTokens,
+    component: defaultComponentTokens,
+};
diff --git a/packages/react/src/themes/equisoft.ts b/packages/react/src/themes/equisoft.ts
index 9f07100794..aaea040316 100644
--- a/packages/react/src/themes/equisoft.ts
+++ b/packages/react/src/themes/equisoft.ts
@@ -1,12 +1,8 @@
-import { greys } from './greys';
-import { main } from './main';
-import { notifications } from './notifications';
-import { Theme } from './theme';
-import { tokens } from './tokens';
+import { ThemeCustomization } from './theme';
+import { defaultRefTokens, defaultComponentTokens, defaultAliasTokens } from './tokens';
 
-export const equisoftTheme: Theme = {
-    main,
-    greys,
-    notifications,
-    tokens,
+export const equisoftTheme: ThemeCustomization = {
+    ref: defaultRefTokens,
+    alias: defaultAliasTokens,
+    component: defaultComponentTokens,
 };
diff --git a/packages/react/src/themes/greys.ts b/packages/react/src/themes/greys.ts
deleted file mode 100644
index c360914c4f..0000000000
--- a/packages/react/src/themes/greys.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Theme } from './theme';
-
-export const greys: Theme['greys'] = {
-    white: '#FFFFFF',
-    'neutral-90': '#1B1C1E',
-    'colored-white': '#FAFAFA',
-    'light-grey': '#F1F2F2',
-    grey: '#DBDEE1',
-    'mid-grey': '#B7BBC2',
-    'dark-grey': '#60666E',
-    black: '#000000',
-};
diff --git a/packages/react/src/themes/index.ts b/packages/react/src/themes/index.ts
index 6d9063b896..19c7cfe853 100644
--- a/packages/react/src/themes/index.ts
+++ b/packages/react/src/themes/index.ts
@@ -1,2 +1,2 @@
 export * from './equisoft';
-export * from './theme';
+export * from './tokens';
diff --git a/packages/react/src/themes/main.ts b/packages/react/src/themes/main.ts
deleted file mode 100644
index cd01eaade9..0000000000
--- a/packages/react/src/themes/main.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Theme } from './theme';
-
-export const main: Theme['main'] = {
-    'primary-1.1': '#006296',
-    'primary-1.2': '#84C6EA',
-    'primary-1.3': '#003A5A',
-    'primary-1.4': '#E0F0F9',
-    'primary-2': '#012639',
-    'primary-3': '#004E78',
-    'secondary-4.1': '#EF483E',
-    'secondary-4.2': '#F9B6B2',
-    'secondary-4.3': '#D41F14',
-};
diff --git a/packages/react/src/themes/merge-theme.test.ts b/packages/react/src/themes/merge-theme.test.ts
new file mode 100644
index 0000000000..05a4d74fa0
--- /dev/null
+++ b/packages/react/src/themes/merge-theme.test.ts
@@ -0,0 +1,186 @@
+import {
+    defaultMain,
+    defaultGreys,
+    defaultNotifications,
+    defaultTokens,
+} from './tokens/legacy-tokens';
+import { mergeTheme } from './merge-theme';
+import { ThemeCustomization } from './theme';
+import { defaultRefTokens, defaultComponentTokens, defaultAliasTokens } from './tokens';
+
+const legacyThemeCustomization: ThemeCustomization = {
+    main: {
+        'primary-1.1': '#013F78',
+        'primary-1.2': '#D5E8FA',
+        'primary-1.3': '#2D3145',
+        'primary-1.4': '#E4ECF4',
+        'primary-2': '#013F78',
+        'secondary-4.1': '#CBA239',
+        'secondary-4.2': '#8D6705',
+        'secondary-4.3': '#3F474C',
+    },
+    greys: {
+        white: '#FFF',
+        'colored-white': '#FAFAFA',
+        'light-grey': '#F1F2F2',
+        grey: '#D9DDE2',
+        'mid-grey': '#9CA7B4',
+        'dark-grey': '#57666E',
+        black: '#000',
+    },
+};
+
+const expectedLegacyTheme = {
+    main: {
+        ...defaultMain,
+        'primary-1.1': '#013F78',
+        'primary-1.2': '#D5E8FA',
+        'primary-1.3': '#2D3145',
+        'primary-1.4': '#E4ECF4',
+        'primary-2': '#013F78',
+        'secondary-4.1': '#CBA239',
+        'secondary-4.2': '#8D6705',
+        'secondary-4.3': '#3F474C',
+    },
+    greys: {
+        ...defaultGreys,
+        white: '#FFF',
+        'colored-white': '#FAFAFA',
+        'light-grey': '#F1F2F2',
+        grey: '#D9DDE2',
+        'mid-grey': '#9CA7B4',
+        'dark-grey': '#57666E',
+        black: '#000',
+    },
+    notifications: defaultNotifications,
+    tokens: defaultTokens,
+    ref: defaultRefTokens,
+    alias: defaultAliasTokens,
+    component: defaultComponentTokens,
+};
+
+const customization : ThemeCustomization = {
+    ref: {
+        'color-brand-05': 'red',
+        'color-brand-20': 'green',
+        'color-neutral-02': 'blue',
+    },
+    alias: {
+        'default-text-color': 'color-brand-05',
+        'alternate-text-color': 'color-brand-20',
+    },
+    component: {
+        'button-primary-background-color': 'color-neutral-02',
+        'button-primary-inverted-background-color': 'color-brand-20',
+        'focus-border-color': 'alternate-text-color',
+    },
+};
+
+const expectedTheme = {
+    main: defaultMain,
+    greys: defaultGreys,
+    notifications: defaultNotifications,
+    tokens: defaultTokens,
+    ref: {
+        ...defaultRefTokens,
+        'color-brand-05': 'red',
+        'color-brand-20': 'green',
+        'color-neutral-02': 'blue',
+    },
+    alias: {
+        ...defaultAliasTokens,
+        'default-text-color': 'color-brand-05',
+        'alternate-text-color': 'color-brand-20',
+    },
+    component: {
+        'button-primary-background-color': 'blue',
+        'button-primary-inverted-background-color': 'green',
+        'button-focus-border': 'red',
+        'button-primary-border-color': '#006296',
+    },
+};
+
+describe('mergeTheme', () => {
+    it('should merge the defaultRefTokens theme with the customization provided', () => {
+        const mergedTheme = mergeTheme(customization);
+
+        expect(mergedTheme.ref).toEqual(expectedTheme.ref);
+    });
+    it('should merge the defaultAliasTokens theme with the customization provided', () => {
+        const mergedTheme = mergeTheme(customization);
+
+        expect(mergedTheme.alias).toEqual(expectedTheme.alias);
+    });
+    it('should merge the defaultComponentTokens with a customization of a ComponentToken as an AliasToken', () => {
+        const mergedTheme = mergeTheme(customization);
+
+        expect(
+            mergedTheme.component['button-primary-background-color'],
+        ).toEqual(
+            expectedTheme.component['button-primary-background-color'],
+        );
+    });
+    it('should merge the defaultComponentTokens with a customization of a ComponentToken as a RefToken', () => {
+        const mergedTheme = mergeTheme(customization);
+
+        expect(
+            mergedTheme.component['button-primary-inverted-background-color'],
+        ).toEqual(
+            expectedTheme.component['button-primary-inverted-background-color'],
+        );
+    });
+    it('should merge the defaultComponentTokens with a partial customization', () => {
+        const mergedTheme = mergeTheme(customization);
+
+        expect(
+            mergedTheme.component['button-primary-border-color'],
+        ).toEqual(
+            expectedTheme.component['button-primary-border-color'],
+        );
+    });
+    it('should merge the default legacy theme with a legacy customization provided', () => {
+        const mergedTheme = mergeTheme(legacyThemeCustomization);
+
+        expect(mergedTheme.main).toEqual(expectedLegacyTheme.main);
+        expect(mergedTheme.greys).toEqual(expectedLegacyTheme.greys);
+        expect(mergedTheme.notifications).toEqual(expectedLegacyTheme.notifications);
+        expect(mergedTheme.tokens).toEqual(expectedLegacyTheme.tokens);
+    });
+    it('should log an error for for an unresolved token', () => {
+        const consoleSpy = jest.spyOn(console, 'error');
+        consoleSpy.mockImplementation(() => {});
+
+        const token = 'invalid-token';
+        const invalidCustomizationWithUnresolvedToken : ThemeCustomization = {
+            component: {
+                // @ts-ignore-unresolved-token-test-purpose
+                'button-primary-background-color': 'invalid-token',
+            },
+        };
+
+        mergeTheme(invalidCustomizationWithUnresolvedToken);
+
+        expect(consoleSpy).toHaveBeenCalledWith(`Token '${token}' not found in RefTokens or AliasTokens`);
+        consoleSpy.mockRestore();
+    });
+    it('should log an error for self-referencing AliasToken', () => {
+        const consoleSpy = jest.spyOn(console, 'error');
+        consoleSpy.mockImplementation(() => {});
+
+        const token = 'default-text-color';
+        const invalidCustomizationWithSelfReferenced : ThemeCustomization = {
+            alias: {
+                // @ts-ignore-self-referenced-token-test-purpose
+                'default-text-color': 'default-text-color',
+            },
+            component: {
+                'button-primary-background-color': 'default-text-color',
+            },
+        };
+
+        mergeTheme(invalidCustomizationWithSelfReferenced);
+
+        expect(consoleSpy).toHaveBeenCalledWith(`Self-referencing AliasToken detected: '${token}'`);
+        consoleSpy.mockRestore();
+    });
+});
diff --git a/packages/react/src/themes/merge-theme.ts b/packages/react/src/themes/merge-theme.ts
new file mode 100644
index 0000000000..e4b3e6e479
--- /dev/null
+++ b/packages/react/src/themes/merge-theme.ts
@@ -0,0 +1,80 @@
+import { defaultTheme } from './default-theme';
+import {
+    AliasTokenMap,
+    AliasTokens,
+    ComponentTokens,
+    ResolvedComponentTokens,
+    RefTokenMap,
+    RefTokens,
+    RefTokenValue,
+} from './tokens';
+import { LegacyTheme, ResolvedTheme, ThemeCustomization } from './theme';
+import { defaultGreys, defaultMain, defaultNotifications, defaultTokens } from './tokens/legacy-tokens';
+
+export function mergeTheme(customization: ThemeCustomization): ResolvedTheme {
+    // Merge the default theme with the customization provided
+    const mergedTheme: ThemeCustomization = {
+        main: { ...defaultMain, ...customization.main },
+        greys: { ...defaultGreys, ...customization.greys },
+        notifications: { ...defaultNotifications, ...customization.notifications },
+        tokens: { ...defaultTokens, ...customization.tokens },
+        ref: { ...defaultTheme.ref, ...customization.ref },
+        alias: { ...defaultTheme.alias, ...customization.alias },
+        component: { ...defaultTheme.component, ...customization.component },
+    };
+
+    function isRefToken(token: string): token is RefTokens {
+        return mergedTheme.ref ? token in mergedTheme.ref : false;
+    }
+
+    function isAliasToken(token: string): token is AliasTokens {
+        return mergedTheme.alias ? token in mergedTheme.alias : false;
+    }
+
+    // Resolve references within the theme
+    function resolveToken(token: AliasTokens | RefTokens | undefined): RefTokenValue {
+        if (token && isRefToken(token)) {
+            return mergedTheme.ref![token] as RefTokenValue;
+        }
+
+        if (token && isAliasToken(token)) {
+            const aliasToken = mergedTheme.alias![token];
+
+            if (aliasToken === token) {
+                // eslint-disable-next-line no-console
+                console.error(`Self-referencing AliasToken detected: '${token}'`);
+                return '';
+            }
+
+            return resolveToken(aliasToken);
+        }
+
+        // Fallback in case of unresolved token
+        // eslint-disable-next-line no-console
+        console.error(`Token '${token}' not found in RefTokens or AliasTokens`);
+        return '';
+    }
+
+    // Final theme with resolved values
+    const finalTheme: ResolvedTheme = {
+        main: mergedTheme.main as LegacyTheme['main'],
+        greys: mergedTheme.greys as LegacyTheme['greys'],
+        notifications: mergedTheme.notifications as LegacyTheme['notifications'],
+        tokens: mergedTheme.tokens as LegacyTheme['tokens'],
+        ref: mergedTheme.ref as RefTokenMap,
+        alias: mergedTheme.alias as AliasTokenMap,
+        component: {} as ResolvedComponentTokens,
+    };
+
+    // Resolve component tokens
+    if (mergedTheme.component) {
+        Object.keys(mergedTheme.component).forEach((token) => {
+            if (Object.prototype.hasOwnProperty.call(mergedTheme.component, token)) {
+                const tokenToResolve = mergedTheme.component![token as ComponentTokens];
+                finalTheme.component[token as ComponentTokens] = resolveToken(tokenToResolve);
+            }
+        });
+    }
+
+    return finalTheme;
+}
diff --git a/packages/react/src/themes/notifications.ts b/packages/react/src/themes/notifications.ts
deleted file mode 100644
index a4b4cb2e6f..0000000000
--- a/packages/react/src/themes/notifications.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Theme } from './theme';
-
-export const notifications: Theme['notifications'] = {
-    'info-1.1': '#006296',
-    'discovery-1.1': '#602FA0',
-    'neutral-1.1': '#878F9A',
-    'success-1.1': '#008533',
-    'success-1.2': '#F6FCF8',
-    'success-1.3': '#8ADDA9',
-    'alert-2.1': '#CD2C23',
-    'alert-2.2': '#FFFAFB',
-    'warning-3.1': '#F5A200',
-    'warning-3.2': '#FFF9F5',
-    'warning-3.3': '#FFB302',
-    'warning-3.4': '#A36D00',
-};
diff --git a/packages/react/src/themes/test-theme.ts b/packages/react/src/themes/test-theme.ts
deleted file mode 100644
index 5398349324..0000000000
--- a/packages/react/src/themes/test-theme.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { greys } from './greys';
-import { notifications } from './notifications';
-import { Theme } from './theme';
-import { tokens } from './tokens';
-
-export const testTheme: Theme = {
-    main: {
-        'primary-1.1': '#9EB3FF',
-        'primary-1.2': '#84B4E8',
-        'primary-1.3': '#8984E8',
-        'primary-2': '#282D40',
-        'primary-3': '#8EA1E6',
-        'primary-1.4': '#E0F0F9',
-        'secondary-4.1': '#B3974B',
-        'secondary-4.2': '#736130',
-        'secondary-4.3': '#FFD86B',
-    },
-    greys,
-    notifications,
-    tokens,
-};
diff --git a/packages/react/src/themes/theme.ts b/packages/react/src/themes/theme.ts
index 623fc05c36..e3136a6f5b 100644
--- a/packages/react/src/themes/theme.ts
+++ b/packages/react/src/themes/theme.ts
@@ -1,4 +1,6 @@
-export interface Theme {
+import { AliasTokenMap, RefTokenMap, ComponentTokenMap, ResolvedComponentTokens } from './tokens';
+
+export interface LegacyTheme {
     main: {
         'primary-1.1': string;
         'primary-1.2': string;
@@ -44,3 +46,23 @@ export interface Theme {
         'overlay-box-shadow': string;
     };
 }
+
+export interface ThemeCustomization {
+    main?: Partial<LegacyTheme['main']>;
+    greys?: Partial<LegacyTheme['greys']>;
+    notifications?: Partial<LegacyTheme['notifications']>;
+    tokens?: Partial<LegacyTheme['tokens']>;
+    ref?: Partial<RefTokenMap>;
+    alias?: Partial<AliasTokenMap>;
+    component?: Partial<ComponentTokenMap>;
+}
+
+export interface ResolvedTheme {
+    main: LegacyTheme['main'];
+    greys: LegacyTheme['greys'];
+    notifications: LegacyTheme['notifications'];
+    tokens: LegacyTheme['tokens'];
+    ref: RefTokenMap;
+    alias: AliasTokenMap;
+    component: ResolvedComponentTokens;
+}
diff --git a/packages/react/src/themes/tokens.ts b/packages/react/src/themes/tokens.ts
deleted file mode 100644
index a785904f3a..0000000000
--- a/packages/react/src/themes/tokens.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { main } from './main';
-import { Theme } from './theme';
-
-export const tokens: Theme['tokens'] = {
-    'focus-box-shadow': `0 0 0 2px ${main['primary-1.2']}`,
-    'focus-box-shadow-inset': `inset 0 0 0 2px ${main['primary-1.2']}`,
-    'focus-border-box-shadow': ` 0 0 0 1px ${main['primary-1.1']}, 0 0 0 3px ${main['primary-1.2']}`,
-    'focus-border-box-shadow-inset': `inset 0 0 0 2px ${main['primary-1.2']}, inset 0 0 0 3px ${main['primary-1.1']}`,
-    'focus-border': `${main['primary-1.1']}`,
-    'modal-overlay-background-color': 'rgba(0, 0, 0, 0.75)',
-    'overlay-box-shadow': '0 10px 20px 0 rgba(0, 0, 0, 0.19)',
-};
diff --git a/packages/react/src/themes/tokens/alias-tokens.ts b/packages/react/src/themes/tokens/alias-tokens.ts
new file mode 100644
index 0000000000..6983a83a48
--- /dev/null
+++ b/packages/react/src/themes/tokens/alias-tokens.ts
@@ -0,0 +1,15 @@
+import { NoSelfReference } from '../../utility-types';
+import { RefTokens } from './ref-tokens';
+
+export type AliasTokens =
+    | 'default-text-color'
+    | 'alternate-text-color';
+
+export type AliasTokenMap = {
+    [Token in AliasTokens]: NoSelfReference<RefTokens | AliasTokens, Token>;
+}
+
+export const defaultAliasTokens: AliasTokenMap = {
+    'default-text-color': 'color-black',
+    'alternate-text-color': 'color-neutral-65',
+};
diff --git a/packages/react/src/themes/tokens/component-tokens.ts b/packages/react/src/themes/tokens/component-tokens.ts
new file mode 100644
index 0000000000..9310a99777
--- /dev/null
+++ b/packages/react/src/themes/tokens/component-tokens.ts
@@ -0,0 +1,31 @@
+import { AliasTokens } from './alias-tokens';
+import { ButtonTokens, defaultButtonTokens } from './component/button-tokens';
+import { defaultFocusTokens, FocusTokens } from './component/focus-tokens';
+import { defaultHeadingTokens, HeadingTokens } from './component/heading-tokens';
+import { defaultLabelTokens, LabelTokens } from './component/label-tokens';
+import { RefTokens, RefTokenValue } from './ref-tokens';
+
+export type ComponentTokens =
+    | ButtonTokens
+    | HeadingTokens
+    | LabelTokens
+    | FocusTokens;
+
+export type ComponentTokenValue = AliasTokens | RefTokens;
+
+export type ComponentTokenMap = {
+    [Token in ComponentTokens]: ComponentTokenValue;
+}
+
+export const defaultComponentTokens: ComponentTokenMap = {
+    ...defaultButtonTokens,
+    ...defaultHeadingTokens,
+    ...defaultLabelTokens,
+    ...defaultFocusTokens,
+};
+
+export type ResolvedComponentTokenValue = RefTokenValue;
+
+export type ResolvedComponentTokens = {
+    [Token in ComponentTokens]: ResolvedComponentTokenValue;
+}
diff --git a/packages/react/src/themes/tokens/component/button-tokens.ts b/packages/react/src/themes/tokens/component/button-tokens.ts
new file mode 100644
index 0000000000..241bfbe504
--- /dev/null
+++ b/packages/react/src/themes/tokens/component/button-tokens.ts
@@ -0,0 +1,322 @@
+import { AliasTokens } from '../alias-tokens';
+import { RefTokens } from '../ref-tokens';
+
+export type ButtonTokens =
+    | 'button-primary-background-color'
+    | 'button-primary-border-color'
+    | 'button-primary-text-color'
+    | 'button-primary-hover-background-color'
+    | 'button-primary-hover-border-color'
+    | 'button-primary-hover-text-color'
+    | 'button-primary-disabled-background-color'
+    | 'button-primary-disabled-border-color'
+    | 'button-primary-disabled-text-color'
+    | 'button-primary-focus-background-color'
+    | 'button-primary-focus-border-color'
+    | 'button-primary-focus-text-color'
+    | 'button-primary-inverted-background-color'
+    | 'button-primary-inverted-border-color'
+    | 'button-primary-inverted-text-color'
+    | 'button-primary-inverted-hover-background-color'
+    | 'button-primary-inverted-hover-border-color'
+    | 'button-primary-inverted-hover-text-color'
+    | 'button-primary-inverted-focus-background-color'
+    | 'button-primary-inverted-focus-border-color'
+    | 'button-primary-inverted-focus-text-color'
+    | 'button-primary-inverted-disabled-background-color'
+    | 'button-primary-inverted-disabled-border-color'
+    | 'button-primary-inverted-disabled-text-color'
+    | 'button-secondary-background-color'
+    | 'button-secondary-border-color'
+    | 'button-secondary-text-color'
+    | 'button-secondary-hover-background-color'
+    | 'button-secondary-hover-border-color'
+    | 'button-secondary-hover-text-color'
+    | 'button-secondary-disabled-background-color'
+    | 'button-secondary-disabled-border-color'
+    | 'button-secondary-disabled-text-color'
+    | 'button-secondary-focus-background-color'
+    | 'button-secondary-focus-border-color'
+    | 'button-secondary-focus-text-color'
+    | 'button-secondary-inverted-background-color'
+    | 'button-secondary-inverted-border-color'
+    | 'button-secondary-inverted-text-color'
+    | 'button-secondary-inverted-hover-background-color'
+    | 'button-secondary-inverted-hover-border-color'
+    | 'button-secondary-inverted-hover-text-color'
+    | 'button-secondary-inverted-focus-background-color'
+    | 'button-secondary-inverted-focus-border-color'
+    | 'button-secondary-inverted-focus-text-color'
+    | 'button-secondary-inverted-disabled-background-color'
+    | 'button-secondary-inverted-disabled-border-color'
+    | 'button-secondary-inverted-disabled-text-color'
+    | 'button-tertiary-background-color'
+    | 'button-tertiary-border-color'
+    | 'button-tertiary-text-color'
+    | 'button-tertiary-hover-background-color'
+    | 'button-tertiary-hover-border-color'
+    | 'button-tertiary-hover-text-color'
+    | 'button-tertiary-disabled-background-color'
+    | 'button-tertiary-disabled-border-color'
+    | 'button-tertiary-disabled-text-color'
+    | 'button-tertiary-focus-background-color'
+    | 'button-tertiary-focus-border-color'
+    | 'button-tertiary-focus-text-color'
+    | 'button-tertiary-inverted-background-color'
+    | 'button-tertiary-inverted-border-color'
+    | 'button-tertiary-inverted-text-color'
+    | 'button-tertiary-inverted-hover-background-color'
+    | 'button-tertiary-inverted-hover-border-color'
+    | 'button-tertiary-inverted-hover-text-color'
+    | 'button-tertiary-inverted-focus-background-color'
+    | 'button-tertiary-inverted-focus-border-color'
+    | 'button-tertiary-inverted-focus-text-color'
+    | 'button-tertiary-inverted-disabled-background-color'
+    | 'button-tertiary-inverted-disabled-border-color'
+    | 'button-tertiary-inverted-disabled-text-color'
+    | 'button-destructive-background-color'
+    | 'button-destructive-border-color'
+    | 'button-destructive-text-color'
+    | 'button-destructive-hover-background-color'
+    | 'button-destructive-hover-border-color'
+    | 'button-destructive-hover-text-color'
+    | 'button-destructive-disabled-background-color'
+    | 'button-destructive-disabled-border-color'
+    | 'button-destructive-disabled-text-color'
+    | 'button-destructive-focus-background-color'
+    | 'button-destructive-focus-border-color'
+    | 'button-destructive-focus-text-color'
+    | 'button-destructive-inverted-background-color'
+    | 'button-destructive-inverted-border-color'
+    | 'button-destructive-inverted-text-color'
+    | 'button-destructive-inverted-hover-background-color'
+    | 'button-destructive-inverted-hover-border-color'
+    | 'button-destructive-inverted-hover-text-color'
+    | 'button-destructive-inverted-focus-background-color'
+    | 'button-destructive-inverted-focus-border-color'
+    | 'button-destructive-inverted-focus-text-color'
+    | 'button-destructive-inverted-disabled-background-color'
+    | 'button-destructive-inverted-disabled-border-color'
+    | 'button-destructive-inverted-disabled-text-color'
+    | 'button-destructive-secondary-background-color'
+    | 'button-destructive-secondary-border-color'
+    | 'button-destructive-secondary-text-color'
+    | 'button-destructive-secondary-hover-background-color'
+    | 'button-destructive-secondary-hover-border-color'
+    | 'button-destructive-secondary-hover-text-color'
+    | 'button-destructive-secondary-disabled-background-color'
+    | 'button-destructive-secondary-disabled-border-color'
+    | 'button-destructive-secondary-disabled-text-color'
+    | 'button-destructive-secondary-focus-background-color'
+    | 'button-destructive-secondary-focus-border-color'
+    | 'button-destructive-secondary-focus-text-color'
+    | 'button-destructive-secondary-inverted-background-color'
+    | 'button-destructive-secondary-inverted-border-color'
+    | 'button-destructive-secondary-inverted-text-color'
+    | 'button-destructive-secondary-inverted-hover-background-color'
+    | 'button-destructive-secondary-inverted-hover-border-color'
+    | 'button-destructive-secondary-inverted-hover-text-color'
+    | 'button-destructive-secondary-inverted-focus-background-color'
+    | 'button-destructive-secondary-inverted-focus-border-color'
+    | 'button-destructive-secondary-inverted-focus-text-color'
+    | 'button-destructive-secondary-inverted-disabled-background-color'
+    | 'button-destructive-secondary-inverted-disabled-border-color'
+    | 'button-destructive-secondary-inverted-disabled-text-color'
+    | 'button-search-background-color'
+    | 'button-search-border-color'
+    | 'button-search-text-color'
+    | 'button-search-hover-background-color'
+    | 'button-search-hover-text-color'
+    | 'button-search-disabled-background-color'
+    | 'button-search-disabled-border-color'
+    | 'button-search-disabled-text-color';
+
+export type ButtonTokenValue = AliasTokens | RefTokens;
+
+export type ButtonTokenMap = {
+    [Token in ButtonTokens]: ButtonTokenValue;
+};
+
+export const defaultButtonTokens: ButtonTokenMap = {
+
+    // Primary
+    'button-primary-background-color': 'color-brand-50',
+    'button-primary-border-color': 'color-brand-50',
+    'button-primary-text-color': 'color-white',
+    // Primary hover
+    'button-primary-hover-background-color': 'color-brand-70',
+    'button-primary-hover-border-color': 'color-brand-70',
+    'button-primary-hover-text-color': 'color-white',
+    // Primary focus
+    'button-primary-focus-background-color': 'color-brand-50',
+    'button-primary-focus-border-color': 'color-brand-50',
+    'button-primary-focus-text-color': 'color-white',
+    // Primary disabled
+    'button-primary-disabled-background-color': 'color-brand-20',
+    'button-primary-disabled-border-color': 'color-brand-20',
+    'button-primary-disabled-text-color': 'color-white',
+
+    // Primary inverted
+    'button-primary-inverted-background-color': 'color-white',
+    'button-primary-inverted-border-color': 'color-white',
+    'button-primary-inverted-text-color': 'color-brand-50',
+    // Primary inverted hover
+    'button-primary-inverted-hover-background-color': 'color-white',
+    'button-primary-inverted-hover-border-color': 'color-white',
+    'button-primary-inverted-hover-text-color': 'color-brand-70',
+    // Primary inverted focus
+    'button-primary-inverted-focus-background-color': 'color-white',
+    'button-primary-inverted-focus-border-color': 'color-white',
+    'button-primary-inverted-focus-text-color': 'color-brand-50',
+    // Primary inverted disabled
+    'button-primary-inverted-disabled-background-color': 'color-white',
+    'button-primary-inverted-disabled-border-color': 'color-white',
+    'button-primary-inverted-disabled-text-color': 'color-brand-20',
+
+    // Secondary
+    'button-secondary-background-color': 'color-white',
+    'button-secondary-border-color': 'color-brand-50',
+    'button-secondary-text-color': 'color-brand-50',
+    // Secondary hover
+    'button-secondary-hover-background-color': 'color-white',
+    'button-secondary-hover-border-color': 'color-brand-70',
+    'button-secondary-hover-text-color': 'color-brand-70',
+    // Secondary focus
+    'button-secondary-focus-background-color': 'color-white',
+    'button-secondary-focus-border-color': 'color-brand-50',
+    'button-secondary-focus-text-color': 'color-brand-50',
+    // Secondary disabled
+    'button-secondary-disabled-background-color': 'color-white',
+    'button-secondary-disabled-border-color': 'color-brand-20',
+    'button-secondary-disabled-text-color': 'color-brand-20',
+    // Secondary inverted
+    'button-secondary-inverted-background-color': 'transparent-100',
+    'button-secondary-inverted-border-color': 'color-white',
+    'button-secondary-inverted-text-color': 'color-white',
+    // Secondary inverted hover
+    'button-secondary-inverted-hover-background-color': 'transparent-100',
+    'button-secondary-inverted-hover-border-color': 'color-brand-20',
+    'button-secondary-inverted-hover-text-color': 'color-brand-20',
+    // Secondary inverted focus
+    'button-secondary-inverted-focus-background-color': 'color-brand-80',
+    'button-secondary-inverted-focus-border-color': 'color-brand-50',
+    'button-secondary-inverted-focus-text-color': 'color-white',
+    // Secondary inverted disabled
+    'button-secondary-inverted-disabled-background-color': 'transparent-100',
+    'button-secondary-inverted-disabled-border-color': 'color-brand-50',
+    'button-secondary-inverted-disabled-text-color': 'color-brand-50',
+
+    // Tertiary
+    'button-tertiary-background-color': 'transparent-100',
+    'button-tertiary-border-color': 'transparent-100',
+    'button-tertiary-text-color': 'color-neutral-65',
+    // Tertiary hover
+    'button-tertiary-hover-background-color': 'color-neutral-15',
+    'button-tertiary-hover-border-color': 'transparent-100',
+    'button-tertiary-hover-text-color': 'color-neutral-90',
+    // Tertiary focus
+    'button-tertiary-focus-background-color': 'color-white',
+    'button-tertiary-focus-border-color': 'color-brand-50',
+    'button-tertiary-focus-text-color': 'color-neutral-65',
+    // Tertiary disabled
+    'button-tertiary-disabled-background-color': 'transparent-100',
+    'button-tertiary-disabled-border-color': 'transparent-100',
+    'button-tertiary-disabled-text-color': 'color-neutral-30',
+
+    // Tertiary inverted
+    'button-tertiary-inverted-background-color': 'transparent-100',
+    'button-tertiary-inverted-border-color': 'transparent-100',
+    'button-tertiary-inverted-text-color': 'color-white',
+    // Tertiary inverted hover
+    'button-tertiary-inverted-hover-background-color': 'color-brand-70',
+    'button-tertiary-inverted-hover-border-color': 'transparent-100',
+    'button-tertiary-inverted-hover-text-color': 'color-white',
+    // Tertiary inverted focus
+    'button-tertiary-inverted-focus-background-color': 'color-brand-80',
+    'button-tertiary-inverted-focus-border-color': 'color-brand-50',
+    'button-tertiary-inverted-focus-text-color': 'color-white',
+    // Tertiary inverted disabled
+    'button-tertiary-inverted-disabled-background-color': 'transparent-100',
+    'button-tertiary-inverted-disabled-border-color': 'transparent-100',
+    'button-tertiary-inverted-disabled-text-color': 'color-brand-50',
+
+    // Destructive
+    'button-destructive-background-color': 'color-alert-50',
+    'button-destructive-border-color': 'color-alert-50',
+    'button-destructive-text-color': 'color-white',
+    // Destructive hover
+    'button-destructive-hover-background-color': 'color-alert-70',
+    'button-destructive-hover-border-color': 'color-alert-70',
+    'button-destructive-hover-text-color': 'color-white',
+    // Destructive focus
+    'button-destructive-focus-background-color': 'color-alert-50',
+    'button-destructive-focus-border-color': 'color-alert-20',
+    'button-destructive-focus-text-color': 'color-white',
+    // Destructive disabled
+    'button-destructive-disabled-background-color': 'color-alert-20',
+    'button-destructive-disabled-border-color': 'color-alert-20',
+    'button-destructive-disabled-text-color': 'color-white',
+
+    // Destructive inverted
+    'button-destructive-inverted-background-color': 'color-white',
+    'button-destructive-inverted-border-color': 'color-white',
+    'button-destructive-inverted-text-color': 'color-alert-50',
+    // Destructive inverted hover
+    'button-destructive-inverted-hover-background-color': 'color-white',
+    'button-destructive-inverted-hover-border-color': 'color-white',
+    'button-destructive-inverted-hover-text-color': 'color-alert-70',
+    // Destructive inverted focus
+    'button-destructive-inverted-focus-background-color': 'color-white',
+    'button-destructive-inverted-focus-border-color': 'color-white',
+    'button-destructive-inverted-focus-text-color': 'color-alert-20',
+    // Destructive inverted disabled
+    'button-destructive-inverted-disabled-background-color': 'color-white',
+    'button-destructive-inverted-disabled-border-color': 'color-white',
+    'button-destructive-inverted-disabled-text-color': 'color-alert-20',
+
+    // Secondary destructive
+    'button-destructive-secondary-background-color': 'color-white',
+    'button-destructive-secondary-border-color': 'color-alert-50',
+    'button-destructive-secondary-text-color': 'color-alert-50',
+    // Secondary destructive hover
+    'button-destructive-secondary-hover-background-color': 'color-white',
+    'button-destructive-secondary-hover-border-color': 'color-alert-70',
+    'button-destructive-secondary-hover-text-color': 'color-alert-70',
+    // Secondary destructive focus
+    'button-destructive-secondary-focus-background-color': 'color-white',
+    'button-destructive-secondary-focus-border-color': 'color-alert-50',
+    'button-destructive-secondary-focus-text-color': 'color-alert-50',
+    // Secondary destructive disabled
+    'button-destructive-secondary-disabled-background-color': 'color-white',
+    'button-destructive-secondary-disabled-border-color': 'color-alert-20',
+    'button-destructive-secondary-disabled-text-color': 'color-alert-20',
+
+    // Secondary destructive inverted
+    'button-destructive-secondary-inverted-background-color': 'transparent-100',
+    'button-destructive-secondary-inverted-border-color': 'color-alert-50',
+    'button-destructive-secondary-inverted-text-color': 'color-alert-50',
+    // Secondary destructive inverted hover
+    'button-destructive-secondary-inverted-hover-background-color': 'transparent-100',
+    'button-destructive-secondary-inverted-hover-border-color': 'color-alert-70',
+    'button-destructive-secondary-inverted-hover-text-color': 'color-alert-70',
+    // Secondary destructive inverted focus
+    'button-destructive-secondary-inverted-focus-background-color': 'color-white',
+    'button-destructive-secondary-inverted-focus-border-color': 'color-white',
+    'button-destructive-secondary-inverted-focus-text-color': 'color-alert-20',
+    // Secondary destructive inverted disabled
+    'button-destructive-secondary-inverted-disabled-background-color': 'transparent-100',
+    'button-destructive-secondary-inverted-disabled-border-color': 'color-alert-70',
+    'button-destructive-secondary-inverted-disabled-text-color': 'color-alert-70',
+
+    // Search button
+    'button-search-background-color': 'color-white',
+    'button-search-border-color': 'color-neutral-65',
+    'button-search-text-color': 'color-neutral-65',
+    // Search button hover
+    'button-search-hover-background-color': 'color-neutral-15',
+    'button-search-hover-text-color': 'color-black',
+    // Search button disabled
+    'button-search-disabled-background-color': 'color-neutral-05',
+    'button-search-disabled-border-color': 'color-neutral-15',
+    'button-search-disabled-text-color': 'color-neutral-30',
+};
diff --git a/packages/react/src/themes/tokens/component/focus-tokens.ts b/packages/react/src/themes/tokens/component/focus-tokens.ts
new file mode 100644
index 0000000000..2c0b35ada4
--- /dev/null
+++ b/packages/react/src/themes/tokens/component/focus-tokens.ts
@@ -0,0 +1,27 @@
+import { AliasTokens } from '../alias-tokens';
+import { RefTokens } from '../ref-tokens';
+
+export type FocusTokens =
+    | 'focus-border-color'
+    | 'focus-box-shadow-color'
+    | 'focus-box-shadow-inset-color'
+    | 'focus-border-box-shadow-color-1'
+    | 'focus-border-box-shadow-color-2'
+    | 'focus-border-box-shadow-inset-color-1'
+    | 'focus-border-box-shadow-inset-color-2';
+
+export type FocusTokenValue = AliasTokens | RefTokens;
+
+export type FocusTokenMap = {
+    [Token in FocusTokens]: FocusTokenValue;
+};
+
+export const defaultFocusTokens: FocusTokenMap = {
+    'focus-border-color': 'color-brand-50',
+    'focus-box-shadow-color': 'color-brand-20',
+    'focus-box-shadow-inset-color': 'color-brand-20',
+    'focus-border-box-shadow-color-1': 'color-brand-50',
+    'focus-border-box-shadow-color-2': 'color-brand-20',
+    'focus-border-box-shadow-inset-color-1': 'color-brand-20',
+    'focus-border-box-shadow-inset-color-2': 'color-brand-50',
+};
diff --git a/packages/react/src/themes/tokens/component/heading-tokens.ts b/packages/react/src/themes/tokens/component/heading-tokens.ts
new file mode 100644
index 0000000000..1862e5340c
--- /dev/null
+++ b/packages/react/src/themes/tokens/component/heading-tokens.ts
@@ -0,0 +1,17 @@
+import { AliasTokens } from '../alias-tokens';
+import { RefTokens } from '../ref-tokens';
+
+export type HeadingTokens =
+    | 'heading-text-color'
+    | 'heading-subtitle-text-color';
+
+export type HeadingTokenValue = AliasTokens | RefTokens;
+
+export type HeadingTokenMap = {
+    [Token in HeadingTokens]: HeadingTokenValue;
+};
+
+export const defaultHeadingTokens: HeadingTokenMap = {
+    'heading-text-color': 'default-text-color',
+    'heading-subtitle-text-color': 'alternate-text-color',
+};
diff --git a/packages/react/src/themes/tokens/component/label-tokens.ts b/packages/react/src/themes/tokens/component/label-tokens.ts
new file mode 100644
index 0000000000..3468c1fdbd
--- /dev/null
+++ b/packages/react/src/themes/tokens/component/label-tokens.ts
@@ -0,0 +1,15 @@
+import { AliasTokens } from '../alias-tokens';
+import { RefTokens } from '../ref-tokens';
+
+export type LabelTokens =
+    | 'label-text-color';
+
+export type LabelTokenValue = AliasTokens | RefTokens;
+
+export type LabelTokenMap = {
+    [Token in LabelTokens]: LabelTokenValue;
+};
+
+export const defaultLabelTokens: LabelTokenMap = {
+    'label-text-color': 'default-text-color',
+};
diff --git a/packages/react/src/themes/tokens/index.ts b/packages/react/src/themes/tokens/index.ts
new file mode 100644
index 0000000000..f086e6d778
--- /dev/null
+++ b/packages/react/src/themes/tokens/index.ts
@@ -0,0 +1,3 @@
+export * from './ref-tokens';
+export * from './alias-tokens';
+export * from './component-tokens';
diff --git a/packages/react/src/themes/tokens/legacy-tokens.ts b/packages/react/src/themes/tokens/legacy-tokens.ts
new file mode 100644
index 0000000000..c1a3bb5073
--- /dev/null
+++ b/packages/react/src/themes/tokens/legacy-tokens.ts
@@ -0,0 +1,49 @@
+import { ResolvedTheme } from '../theme';
+
+export const defaultMain: ResolvedTheme['main'] = {
+    'primary-1.1': '#006296',
+    'primary-1.2': '#84C6EA',
+    'primary-1.3': '#003A5A',
+    'primary-1.4': '#E0F0F9',
+    'primary-2': '#012639',
+    'primary-3': '#004E78',
+    'secondary-4.1': '#EF483E',
+    'secondary-4.2': '#F9B6B2',
+    'secondary-4.3': '#D41F14',
+};
+
+export const defaultGreys: ResolvedTheme['greys'] = {
+    white: '#FFFFFF',
+    'neutral-90': '#1B1C1E',
+    'colored-white': '#FAFAFA',
+    'light-grey': '#F1F2F2',
+    grey: '#DBDEE1',
+    'mid-grey': '#B7BBC2',
+    'dark-grey': '#60666E',
+    black: '#000000',
+};
+
+export const defaultNotifications: ResolvedTheme['notifications'] = {
+    'info-1.1': '#006296',
+    'discovery-1.1': '#602FA0',
+    'neutral-1.1': '#878F9A',
+    'success-1.1': '#008533',
+    'success-1.2': '#F6FCF8',
+    'success-1.3': '#8ADDA9',
+    'alert-2.1': '#CD2C23',
+    'alert-2.2': '#FFFAFB',
+    'warning-3.1': '#F5A200',
+    'warning-3.2': '#FFF9F5',
+    'warning-3.3': '#FFB302',
+    'warning-3.4': '#A36D00',
+};
+
+export const defaultTokens: ResolvedTheme['tokens'] = {
+    'focus-box-shadow': `0 0 0 2px ${defaultMain['primary-1.2']}`,
+    'focus-box-shadow-inset': `inset 0 0 0 2px ${defaultMain['primary-1.2']}`,
+    'focus-border-box-shadow': ` 0 0 0 1px ${defaultMain['primary-1.1']}, 0 0 0 3px ${defaultMain['primary-1.2']}`,
+    'focus-border-box-shadow-inset': `inset 0 0 0 2px ${defaultMain['primary-1.2']}, inset 0 0 0 3px ${defaultMain['primary-1.1']}`,
+    'focus-border': `${defaultMain['primary-1.1']}`,
+    'modal-overlay-background-color': 'rgba(0, 0, 0, 0.75)',
+    'overlay-box-shadow': '0 10px 20px 0 rgba(0, 0, 0, 0.19)',
+};
diff --git a/packages/react/src/themes/tokens/ref-tokens.ts b/packages/react/src/themes/tokens/ref-tokens.ts
new file mode 100644
index 0000000000..1d710e8808
--- /dev/null
+++ b/packages/react/src/themes/tokens/ref-tokens.ts
@@ -0,0 +1,23 @@
+import { ColorUtilityTokens, ColorUtilityValue, defaultColorUtilityTokens } from './ref/color-utility-tokens';
+import { defaultPaletteTokens, PaletteTokens, PaletteValue } from './ref/palette-tokens';
+import { defaultTextAttributeTokens, TextAttributeTokens, TextAttributeValue } from './ref/text-attributes-tokens';
+
+export type RefTokenValue =
+    | PaletteValue
+    | TextAttributeValue
+    | ColorUtilityValue;
+
+export type RefTokens =
+    | PaletteTokens
+    | TextAttributeTokens
+    | ColorUtilityTokens;
+
+export type RefTokenMap = {
+    [Token in RefTokens]: RefTokenValue;
+}
+
+export const defaultRefTokens: RefTokenMap = {
+    ...defaultPaletteTokens,
+    ...defaultColorUtilityTokens,
+    ...defaultTextAttributeTokens,
+};
diff --git a/packages/react/src/themes/tokens/ref/color-utility-tokens.ts b/packages/react/src/themes/tokens/ref/color-utility-tokens.ts
new file mode 100644
index 0000000000..e48ca1ff06
--- /dev/null
+++ b/packages/react/src/themes/tokens/ref/color-utility-tokens.ts
@@ -0,0 +1,30 @@
+export type ColorUtilityTokens =
+    | 'transparent-10'
+    | 'transparent-20'
+    | 'transparent-30'
+    | 'transparent-40'
+    | 'transparent-50'
+    | 'transparent-60'
+    | 'transparent-70'
+    | 'transparent-80'
+    | 'transparent-90'
+    | 'transparent-100';
+
+export type ColorUtilityValue = string;
+
+export type ColorUtilityTokenMap = {
+    [Token in ColorUtilityTokens]: ColorUtilityValue;
+};
+
+export const defaultColorUtilityTokens: ColorUtilityTokenMap = {
+    'transparent-10': 'rgba(0, 0, 0, 0.1)',
+    'transparent-20': 'rgba(0, 0, 0, 0.2)',
+    'transparent-30': 'rgba(0, 0, 0, 0.3)',
+    'transparent-40': 'rgba(0, 0, 0, 0.4)',
+    'transparent-50': 'rgba(0, 0, 0, 0.5)',
+    'transparent-60': 'rgba(0, 0, 0, 0.6)',
+    'transparent-70': 'rgba(0, 0, 0, 0.7)',
+    'transparent-80': 'rgba(0, 0, 0, 0.8)',
+    'transparent-90': 'rgba(0, 0, 0, 0.9)',
+    'transparent-100': 'transparent',
+};
diff --git a/packages/react/src/themes/tokens/ref/palette-tokens.ts b/packages/react/src/themes/tokens/ref/palette-tokens.ts
new file mode 100644
index 0000000000..6dc002ce54
--- /dev/null
+++ b/packages/react/src/themes/tokens/ref/palette-tokens.ts
@@ -0,0 +1,96 @@
+export type PaletteTokens =
+    | 'color-brand-05'
+    | 'color-brand-20'
+    | 'color-brand-50'
+    | 'color-brand-70'
+    | 'color-brand-80'
+    | 'color-accent-20'
+    | 'color-accent-50'
+    | 'color-accent-70'
+    | 'color-white'
+    | 'color-black'
+    | 'color-neutral-02'
+    | 'color-neutral-05'
+    | 'color-neutral-15'
+    | 'color-neutral-30'
+    | 'color-neutral-50'
+    | 'color-neutral-65'
+    | 'color-neutral-90'
+    | 'color-alert-02'
+    | 'color-alert-05'
+    | 'color-alert-20'
+    | 'color-alert-50'
+    | 'color-alert-70'
+    | 'color-informative-02'
+    | 'color-informative-05'
+    | 'color-informative-20'
+    | 'color-informative-50'
+    | 'color-informative-70'
+    | 'color-success-02'
+    | 'color-success-05'
+    | 'color-success-20'
+    | 'color-success-50'
+    | 'color-success-70'
+    | 'color-warning-02'
+    | 'color-warning-05'
+    | 'color-warning-20'
+    | 'color-warning-50'
+    | 'color-warning-70'
+    | 'color-warning-80'
+    | 'color-discovery-02'
+    | 'color-discovery-05'
+    | 'color-discovery-20'
+    | 'color-discovery-50'
+    | 'color-discovery-70';
+
+export type PaletteValue = string;
+
+export type PaletteTokenMap = {
+    [Token in PaletteTokens]: PaletteValue;
+};
+
+export const defaultPaletteTokens: PaletteTokenMap = {
+    'color-brand-05': '#E0F0F9',
+    'color-brand-20': '#84C6EA',
+    'color-brand-50': '#006296',
+    'color-brand-70': '#003A5A',
+    'color-brand-80': '#012639',
+    'color-accent-20': '#F9B6B2',
+    'color-accent-50': '#EF483E',
+    'color-accent-70': '#D41F14',
+    'color-white': '#FFFFFF',
+    'color-black': '#000000',
+    'color-neutral-02': '#FAFAFA',
+    'color-neutral-05': '#F1F2F2',
+    'color-neutral-15': '#DBDEE1',
+    'color-neutral-30': '#B7BBC2',
+    'color-neutral-50': '#878F9A',
+    'color-neutral-65': '#60666E',
+    'color-neutral-90': '#1B1C1E',
+    'color-alert-02': '#FDF7F6',
+    'color-alert-05': '#FAEAE9',
+    'color-alert-20': '#F99D99',
+    'color-alert-50': '#CD2C23',
+    'color-alert-70': '#7B1A15',
+    'color-informative-02': '#F9F7FB',
+    'color-informative-05': '#E0F0F9',
+    'color-informative-20': '#84C6EA',
+    'color-informative-50': '#006296',
+    'color-informative-70': '#003A5A',
+    'color-success-02': '#F6FCF8',
+    'color-success-05': '#E1F7EA',
+    'color-success-20': '#8ADDA9',
+    'color-success-50': '#008533',
+    'color-success-70': '#004F1E',
+    'color-warning-02': '#FFFBF5',
+    'color-warning-05': '#FFF7E5',
+    'color-warning-20': '#FFDD99',
+    'color-warning-50': '#F5A200',
+    'color-warning-70': '#9E6900',
+    'color-warning-80': '#664400',
+    'color-discovery-02': '#F9F7FB',
+    'color-discovery-05': '#EFEAF6',
+    'color-discovery-20': '#CFC1E3',
+    'color-discovery-50': '#602FA0',
+    'color-discovery-70': '#3A1C60',
+};
diff --git a/packages/react/src/themes/tokens/ref/text-attributes-tokens.ts b/packages/react/src/themes/tokens/ref/text-attributes-tokens.ts
new file mode 100644
index 0000000000..89d3add854
--- /dev/null
+++ b/packages/react/src/themes/tokens/ref/text-attributes-tokens.ts
@@ -0,0 +1,12 @@
+export type TextAttributeTokens =
+    | 'font-weight-bold';
+
+export type TextAttributeValue = string;
+
+export type TextAttributeTokenMap = {
+    [Token in TextAttributeTokens]: TextAttributeValue;
+};
+
+export const defaultTextAttributeTokens: TextAttributeTokenMap = {
+    'font-weight-bold': 'bold',
+};
diff --git a/packages/react/src/utility-types.ts b/packages/react/src/utility-types.ts
new file mode 100644
index 0000000000..73b1be54fd
--- /dev/null
+++ b/packages/react/src/utility-types.ts
@@ -0,0 +1 @@
+export type NoSelfReference<T, U extends string> = T extends U ? never : T;
diff --git a/packages/react/src/utils/css-state.ts b/packages/react/src/utils/css-state.ts
index afdc1b5ad5..d1e0009bf0 100644
--- a/packages/react/src/utils/css-state.ts
+++ b/packages/react/src/utils/css-state.ts
@@ -1,20 +1,32 @@
 import { css, FlattenInterpolation, ThemeProps } from 'styled-components';
-import { Theme } from '../themes';
+import { ResolvedTheme } from '../themes/theme';
 
-export const focus = ({ theme }: { theme: Theme }, hasBorder = false, selector: string | undefined = undefined, inset = false): string => `
-    ${selector === undefined ? '&:focus { outline: none; }' : ''}
-    ${selector === undefined ? '&:focus' : `${selector}`} {
-        outline: none;
-        ${hasBorder ? `border-color: ${theme.tokens['focus-border']};` : ''}
-        box-shadow: ${theme.tokens['focus-box-shadow']};
-        ${!hasBorder ? `box-shadow: ${inset ? theme.tokens['focus-border-box-shadow-inset'] : theme.tokens['focus-border-box-shadow']};` : ''}
-    }
-`;
+export const focus = (
+    { theme }: { theme: ResolvedTheme },
+    hasBorder = false,
+    selector: string | undefined = undefined,
+    inset = false,
+): string => {
+    const focusBorder = `${theme.component['focus-border-color']}`;
+    const focusBoxShadow = `0 0 0 2px ${theme.component['focus-box-shadow-color']}`;
+    const focusBorderBoxShadow = `0 0 0 1px ${theme.component['focus-border-box-shadow-color-1']}, 0 0 0 3px ${theme.component['focus-border-box-shadow-color-2']}`;
+    const focusBorderBoxShadowInset = `inset 0 0 0 2px ${theme.component['focus-border-box-shadow-inset-color-1']}, inset 0 0 0 3px ${theme.component['focus-border-box-shadow-inset-color-2']}`;
+
+    return `
+        ${selector === undefined ? '&:focus { outline: none; }' : ''}
+        ${selector === undefined ? '&:focus' : `${selector}`} {
+            outline: none;
+            ${hasBorder ? `border-color: ${focusBorder};` : ''}
+            box-shadow: ${focusBoxShadow};
+            ${!hasBorder ? `box-shadow: ${inset ? focusBorderBoxShadowInset : focusBorderBoxShadow};` : ''}
+        }
+    `;
+};
 
 export const focusVisibleReset = (
-    _props: { theme: Theme },
+    _props: { theme: ResolvedTheme },
     hasBorder = false,
-): FlattenInterpolation<ThemeProps<Theme>> => css`
+): FlattenInterpolation<ThemeProps<ResolvedTheme>> => css`
     &:focus:not(:focus-visible) {
         ${hasBorder && 'border-color: inherit;'}
 
diff --git a/packages/storybook/stories/0-intro.stories.tsx b/packages/storybook/stories/0-intro.stories.tsx
index 45dd578f27..2497a88c7b 100644
--- a/packages/storybook/stories/0-intro.stories.tsx
+++ b/packages/storybook/stories/0-intro.stories.tsx
@@ -1,5 +1,14 @@
-import { Button, DesignSystem, SectionalBanner, testTheme } from '@equisoft/design-elements-react';
+import {
+    Button,
+    DesignSystem,
+    SectionalBanner,
+    DropdownList,
+    equisoftTheme,
+    DropdownListOption,
+    ThemeCustomization,
+} from '@equisoft/design-elements-react';
 import { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
 
 const meta: Meta = {
     title: 'Introduction',
@@ -10,27 +19,167 @@ export default meta;
 
 type Story = StoryObj<typeof DesignSystem>;
 
+const ThemeCustomization1: ThemeCustomization = {
+    ref: {
+        'color-brand-50': '#00874E',
+        'color-brand-20': '#9EDBC1',
+        'color-brand-70': '#0B5E37',
+        'color-brand-05': '#E5F3ED',
+        'color-brand-80': '#00874E',
+        'color-accent-50': '#00874E',
+        'color-accent-20': '#CC9B0B',
+        'color-accent-70': '#3F474C',
+    },
+    alias: {
+        'default-text-color': 'color-brand-05',
+        'alternate-text-color': 'color-brand-20',
+    },
+    component: {
+        'button-primary-background-color': 'color-brand-50',
+        'button-primary-inverted-background-color': 'color-white',
+        'button-primary-border-color': 'color-brand-50',
+        'button-primary-inverted-border-color': 'color-white',
+        'button-primary-text-color': 'color-white',
+        'button-primary-inverted-text-color': 'color-brand-50',
+    },
+};
+
+const ThemeCustomization2: ThemeCustomization = {
+    ref: {
+        'color-brand-05': '#e9e0f9',
+        'color-brand-20': '#ad84ea',
+        'color-brand-50': '#710096',
+        'color-brand-70': '#36005a',
+        'color-brand-80': '#230139',
+        'color-accent-20': '#f9f5b2',
+        'color-accent-50': '#efbd3e',
+        'color-accent-70': '#d4a714',
+        'color-white': '#FFFFFF',
+        'color-black': '#000000',
+        'color-neutral-02': '#FAFAFA',
+        'color-neutral-05': '#F1F2F2',
+        'color-neutral-15': '#DBDEE1',
+        'color-neutral-30': '#B7BBC2',
+        'color-neutral-50': '#878F9A',
+        'color-neutral-65': '#60666E',
+        'color-neutral-90': '#1B1C1E',
+        'color-alert-02': '#fdfcf6',
+        'color-alert-05': '#faf6e9',
+        'color-alert-20': '#f9e399',
+        'color-alert-50': '#cd9d23',
+        'color-alert-70': '#7b6315',
+        'color-informative-02': '#F9F7FB',
+        'color-informative-05': '#E0F0F9',
+        'color-informative-20': '#84C6EA',
+        'color-informative-50': '#006296',
+        'color-informative-70': '#003A5A',
+        'color-success-02': '#F6FCF8',
+        'color-success-05': '#E1F7EA',
+        'color-success-20': '#8ADDA9',
+        'color-success-50': '#008533',
+        'color-success-70': '#004F1E',
+        'color-warning-02': '#FFFBF5',
+        'color-warning-05': '#FFF7E5',
+        'color-warning-20': '#FFDD99',
+        'color-warning-50': '#F5A200',
+        'color-warning-70': '#9E6900',
+        'color-warning-80': '#664400',
+        'color-discovery-02': '#F9F7FB',
+        'color-discovery-05': '#EFEAF6',
+        'color-discovery-20': '#CFC1E3',
+        'color-discovery-50': '#602FA0',
+        'color-discovery-70': '#3A1C60',
+    },
+};
+
 export const Theming: Story = {
     render() {
+        const [theme, setTheme] = useState(equisoftTheme);
+        const [label, setLabel] = useState('Default Equisoft Theme');
+
+        function setCustomTheme(newSelectedTheme: DropdownListOption): void {
+            setLabel(newSelectedTheme.label);
+            switch (newSelectedTheme.value) {
+                case 'customTheme1':
+                    setTheme(ThemeCustomization1);
+                    break;
+                case 'customTheme2':
+                    setTheme(ThemeCustomization2);
+                    break;
+                case 'equisoftTheme':
+                    setTheme(equisoftTheme);
+                    break;
+                default:
+                    setTheme(equisoftTheme);
+            }
+        }
+
         return (
-            <>
-                <DesignSystem theme={testTheme}>
-                    <div>
-                        <h3>Custom theme</h3>
-                        <Button label="Primary" buttonType="primary" />
-                        <Button label="Secondary" buttonType="secondary" />
-                        <Button label="Tertiary" buttonType="tertiary" />
+            <DesignSystem theme={theme}>
+                <div>
+                    <div style={{ display: 'box', alignItems: 'center', gap: '2rem' }}>
+                        <h3>{label}</h3>
+                        <div style={{ width: '200px' }}>
+                            <DropdownList
+                                onChange={(option) => setCustomTheme(option)}
+                                defaultValue="equisoftTheme"
+                                options={[
+                                    {
+                                        label: 'Default Equisoft Theme',
+                                        value: 'equisoftTheme',
+                                    },
+                                    {
+                                        label: 'Custom theme 1',
+                                        value: 'customTheme1',
+                                    },
+                                    {
+                                        label: 'Custom Theme 2',
+                                        value: 'customTheme2',
+                                    },
+                                ]}
+                            />
+                        </div>
                     </div>
-                </DesignSystem>
-                <DesignSystem>
-                    <div>
-                        <h3>Default Equisoft theme</h3>
-                        <Button label="Primary" buttonType="primary" />
-                        <Button label="Secondary" buttonType="secondary" />
-                        <Button label="Tertiary" buttonType="tertiary" />
+                    <div style={{
+                        display: 'table-row', alignItems: 'center',
+                    }}
+                    >
+                        <div style={{ padding: '1rem' }}>
+                            <Button label="Primary" buttonType="primary" />
+                            <Button label="Secondary" buttonType="secondary" />
+                            <Button label="Tertiary" buttonType="tertiary" />
+                            <Button label="Destructive" buttonType="destructive" />
+                            <Button label="Destructive Secondary" buttonType="destructive-secondary" />
+                        </div>
+                        <div style={{ padding: '1rem' }}>
+                            <Button label="Primary" buttonType="primary" disabled />
+                            <Button label="Secondary" buttonType="secondary" disabled />
+                            <Button label="Tertiary" buttonType="tertiary" disabled />
+                            <Button label="Destructive" buttonType="destructive" disabled />
+                            <Button label="Destructive Secondary" buttonType="destructive-secondary" disabled />
+                        </div>
+                        <div style={{ backgroundColor: '#012639', padding: '1rem' }}>
+                            <Button label="Primary" buttonType="primary" inverted />
+                            <Button label="Secondary" buttonType="secondary" inverted />
+                            <Button label="Tertiary" buttonType="tertiary" inverted />
+                            <Button label="Destructive" buttonType="destructive" inverted />
+                            <Button label="Destructive Secondary" buttonType="destructive-secondary" inverted />
+                        </div>
+                        <div style={{ backgroundColor: '#012639', padding: '1rem' }}>
+                            <Button label="Primary" buttonType="primary" inverted disabled />
+                            <Button label="Secondary" buttonType="secondary" inverted disabled />
+                            <Button label="Tertiary" buttonType="tertiary" inverted disabled />
+                            <Button label="Destructive" buttonType="destructive" inverted disabled />
+                            <Button
+                                label="Destructive Secondary"
+                                buttonType="destructive-secondary"
+                                inverted
+                                disabled
+                            />
+                        </div>
                     </div>
-                </DesignSystem>
-            </>
+                </div>
+            </DesignSystem>
         );
     },
 };