From 75c4f4ee23e5f9d753a9fe19323652d9e36a591d Mon Sep 17 00:00:00 2001
From: Urs Keller <urs.keller@lightspeedhq.com>
Date: Fri, 21 Nov 2025 15:38:34 +0100
Subject: [PATCH 1/3] LSPAY-34879: helios theme

---
 .github/workflows/chromatic-label.yml         |   2 +
 .github/workflows/chromatic.yml               |   2 +
 .github/workflows/publish-lerna.yml           |   6 +-
 .github/workflows/publish-mainline.yml        |   6 +-
 .github/workflows/test.yml                    |   2 +
 .npmrc                                        |   3 +-
 .storybook/addons/theme-switcher/register.js  |  12 ++
 .yarnrc.yml                                   |   5 +
 lerna.json                                    |   2 +-
 packages/flame/package.json                   |   1 +
 packages/flame/scripts/build-themes.ts        |   5 +
 .../__snapshots__/Checkbox.test.tsx.snap      |  14 +-
 packages/flame/src/Core/index.tsx             |   4 +
 .../Radio/__snapshots__/Radio.test.tsx.snap   |   8 +-
 packages/flame/src/Toaster/Toaster.tsx        |   7 +-
 packages/flame/themes/helios/colors.ts        |  90 ++++++++
 .../flame/themes/helios/components/alert.ts   |  69 ++++++
 .../flame/themes/helios/components/badge.ts   |  74 +++++++
 .../flame/themes/helios/components/bone.ts    |  10 +
 .../flame/themes/helios/components/button.ts  | 196 ++++++++++++++++++
 .../flame/themes/helios/components/card.ts    |  29 +++
 .../themes/helios/components/checkbox.ts      |  37 ++++
 .../flame/themes/helios/components/divider.ts |  10 +
 .../flame/themes/helios/components/group.ts   |  11 +
 .../flame/themes/helios/components/input.ts   |  88 ++++++++
 .../flame/themes/helios/components/logo.ts    |  46 ++++
 .../flame/themes/helios/components/modal.ts   |  23 ++
 .../flame/themes/helios/components/nps.ts     |   9 +
 .../flame/themes/helios/components/popover.ts |  16 ++
 .../themes/helios/components/progress.ts      |  26 +++
 .../flame/themes/helios/components/radio.ts   |  26 +++
 .../flame/themes/helios/components/select.ts  |  15 ++
 .../flame/themes/helios/components/sidebar.ts |  37 ++++
 .../flame/themes/helios/components/switch.ts  |  32 +++
 .../flame/themes/helios/components/table.ts   |  44 ++++
 .../flame/themes/helios/components/tag.ts     |  38 ++++
 .../flame/themes/helios/components/text.ts    |  11 +
 .../flame/themes/helios/components/toaster.ts |  53 +++++
 .../flame/themes/helios/components/tooltip.ts |  19 ++
 .../themes/helios/components/wordmark.ts      |  13 ++
 packages/flame/themes/helios/index.ts         |  67 ++++++
 packages/flame/themes/helios/shadows.ts       |   6 +
 yarn.lock                                     |   5 +
 43 files changed, 1157 insertions(+), 22 deletions(-)
 create mode 100644 packages/flame/themes/helios/colors.ts
 create mode 100644 packages/flame/themes/helios/components/alert.ts
 create mode 100644 packages/flame/themes/helios/components/badge.ts
 create mode 100644 packages/flame/themes/helios/components/bone.ts
 create mode 100644 packages/flame/themes/helios/components/button.ts
 create mode 100644 packages/flame/themes/helios/components/card.ts
 create mode 100644 packages/flame/themes/helios/components/checkbox.ts
 create mode 100644 packages/flame/themes/helios/components/divider.ts
 create mode 100644 packages/flame/themes/helios/components/group.ts
 create mode 100644 packages/flame/themes/helios/components/input.ts
 create mode 100644 packages/flame/themes/helios/components/logo.ts
 create mode 100644 packages/flame/themes/helios/components/modal.ts
 create mode 100644 packages/flame/themes/helios/components/nps.ts
 create mode 100644 packages/flame/themes/helios/components/popover.ts
 create mode 100644 packages/flame/themes/helios/components/progress.ts
 create mode 100644 packages/flame/themes/helios/components/radio.ts
 create mode 100644 packages/flame/themes/helios/components/select.ts
 create mode 100644 packages/flame/themes/helios/components/sidebar.ts
 create mode 100644 packages/flame/themes/helios/components/switch.ts
 create mode 100644 packages/flame/themes/helios/components/table.ts
 create mode 100644 packages/flame/themes/helios/components/tag.ts
 create mode 100644 packages/flame/themes/helios/components/text.ts
 create mode 100644 packages/flame/themes/helios/components/toaster.ts
 create mode 100644 packages/flame/themes/helios/components/tooltip.ts
 create mode 100644 packages/flame/themes/helios/components/wordmark.ts
 create mode 100644 packages/flame/themes/helios/index.ts
 create mode 100644 packages/flame/themes/helios/shadows.ts

diff --git a/.github/workflows/chromatic-label.yml b/.github/workflows/chromatic-label.yml
index b6e00c88..48d6ad24 100644
--- a/.github/workflows/chromatic-label.yml
+++ b/.github/workflows/chromatic-label.yml
@@ -6,6 +6,8 @@ jobs:
     name: Run visual regression tests with chromatic (label triggered)
     if: ${{ contains(github.event.pull_request.labels.*.name, 'snapshot') }}
     runs-on: ubuntu-latest
+    env:
+      GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
     steps:
       - uses: actions/checkout@v2
         with:
diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml
index d869756c..86b0ca53 100644
--- a/.github/workflows/chromatic.yml
+++ b/.github/workflows/chromatic.yml
@@ -10,6 +10,8 @@ jobs:
   snapshot:
     name: Run visual regression tests with chromatic
     runs-on: ubuntu-latest
+    env:
+      GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
     steps:
       - uses: actions/checkout@v2
         with:
diff --git a/.github/workflows/publish-lerna.yml b/.github/workflows/publish-lerna.yml
index 5d635e5e..d39118c0 100644
--- a/.github/workflows/publish-lerna.yml
+++ b/.github/workflows/publish-lerna.yml
@@ -9,6 +9,8 @@ jobs:
   publish:
     name: Publish
     runs-on: ubuntu-latest
+    env:
+      GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
     steps:
       - uses: actions/checkout@v1
       - name: Dump GitHub context
@@ -22,7 +24,7 @@ jobs:
         uses: actions/setup-node@v2
         with:
           node-version: "${{ steps.nvm.outputs.nvmrc }}"
-          registry-url: https://registry.npmjs.org/
+          registry-url: https://npm.pkg.github.com
       - uses: actions/cache@v4
         with:
           path: ~/.cache/yarn
@@ -35,5 +37,3 @@ jobs:
         run: yarn bootstrap
       - name: Publish
         run: yarn lerna:publish
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}
diff --git a/.github/workflows/publish-mainline.yml b/.github/workflows/publish-mainline.yml
index cee8c913..307600ed 100644
--- a/.github/workflows/publish-mainline.yml
+++ b/.github/workflows/publish-mainline.yml
@@ -9,6 +9,8 @@ jobs:
   publish:
     name: Publish
     runs-on: ubuntu-latest
+    env:
+      GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
     steps:
       - uses: actions/checkout@v1
       - name: Dump GitHub context
@@ -22,7 +24,7 @@ jobs:
         uses: actions/setup-node@v2
         with:
           node-version: "${{ steps.nvm.outputs.nvmrc }}"
-          registry-url: https://registry.npmjs.org/
+          registry-url: https://npm.pkg.github.com
       - uses: actions/cache@v4
         with:
           path: ~/.cache/yarn
@@ -37,5 +39,3 @@ jobs:
         run: |
           cd packages/flame
           node ./scripts/check-changed.js && yarn build && yarn build:docgen && npm publish ./dist --quiet || exit 0
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index 0ff6d655..b08d0033 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -10,6 +10,8 @@ jobs:
   build:
     name: Test, lint, typecheck
     runs-on: ubuntu-latest
+    env:
+      GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
     steps:
       - uses: actions/checkout@master
       - name: Read .nvmrc
diff --git a/.npmrc b/.npmrc
index 6f73a690..4589833c 100644
--- a/.npmrc
+++ b/.npmrc
@@ -1,3 +1,4 @@
 init-author-name=Lightspeed
 init-author-url=https://lightspeedhq.com
-registry=https://registry.npmjs.org/
+@lightspeed:registry=https://npm.pkg.github.com
+//npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}
diff --git a/.storybook/addons/theme-switcher/register.js b/.storybook/addons/theme-switcher/register.js
index c5e4dc27..21c42238 100644
--- a/.storybook/addons/theme-switcher/register.js
+++ b/.storybook/addons/theme-switcher/register.js
@@ -44,6 +44,18 @@ const ThemeSwitcher = () => {
           />
           Lightspeed (Old theme)
         </label>
+        <br />
+        <label htmlFor="helioscolors">
+          <input
+            type="radio"
+            value="helios"
+            id="helioscolors"
+            name="flame-theme"
+            onChange={() => onChange('helios')}
+            checked={state.selectedTheme === 'helios'}
+          />
+          Helios
+        </label>
       </fieldset>
     </div>
   );
diff --git a/.yarnrc.yml b/.yarnrc.yml
index 3186f3f0..ca218b88 100644
--- a/.yarnrc.yml
+++ b/.yarnrc.yml
@@ -1 +1,6 @@
 nodeLinker: node-modules
+
+npmScopes:
+  lightspeed:
+    npmAuthToken: '${GITHUB_TOKEN}'
+    npmRegistryServer: 'https://npm.pkg.github.com'
diff --git a/lerna.json b/lerna.json
index c304ff32..806a6172 100644
--- a/lerna.json
+++ b/lerna.json
@@ -4,7 +4,7 @@
   "version": "independent",
   "command": {
     "publish": {
-      "allowBranch": ["master", "next", "LSPAY-33449"],
+      "allowBranch": ["master", "next", "LSPAY-34879"],
       "ignoreChanges": [
         "**/story.js",
         "**/story.tsx",
diff --git a/packages/flame/package.json b/packages/flame/package.json
index c7e8a236..30a7d8b6 100644
--- a/packages/flame/package.json
+++ b/packages/flame/package.json
@@ -37,6 +37,7 @@
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
   "dependencies": {
+    "@lightspeed/unified-tokens": "^3.3.0",
     "@popperjs/core": "^2.11.8",
     "@styled-system/css": "^5.1.5",
     "@styled-system/theme-get": "5.0.16",
diff --git a/packages/flame/scripts/build-themes.ts b/packages/flame/scripts/build-themes.ts
index b1473358..f3d327a3 100644
--- a/packages/flame/scripts/build-themes.ts
+++ b/packages/flame/scripts/build-themes.ts
@@ -1,6 +1,7 @@
 import { theme as flameTheme, themeUI as flameThemeUI } from '../themes/flame';
 import { theme as oldSkoolTheme } from '../themes/oldskool';
 import { theme as darkTheme } from '../themes/dark';
+import { theme as heliosTheme } from '../themes/helios';
 
 // @ts-ignore
 const fs = require('fs');
@@ -97,6 +98,10 @@ const themeList: ThemeList = [
     filename: 'dark',
     themeObject: darkTheme,
   },
+  {
+    filename: 'helios',
+    themeObject: heliosTheme,
+  },
 ];
 
 // @ts-ignore
diff --git a/packages/flame/src/Checkbox/__snapshots__/Checkbox.test.tsx.snap b/packages/flame/src/Checkbox/__snapshots__/Checkbox.test.tsx.snap
index 26bb7b7d..5580351e 100644
--- a/packages/flame/src/Checkbox/__snapshots__/Checkbox.test.tsx.snap
+++ b/packages/flame/src/Checkbox/__snapshots__/Checkbox.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`<Checkbox /> Snapshots when all props and label/description with html should render correctly 1`] = `
 <div
-  className="css-qpvxlq-Box e1rqh3k81"
+  className="css-ik298q-Box e1rqh3k81"
 >
   <label
     className="css-1s6q0wc-BaseLabel-Text-BaseLabel ev4kwu51"
@@ -58,7 +58,7 @@ exports[`<Checkbox /> Snapshots when all props and label/description with html s
 
 exports[`<Checkbox /> Snapshots when all props should render correctly 1`] = `
 <div
-  className="css-qpvxlq-Box e1rqh3k81"
+  className="css-ik298q-Box e1rqh3k81"
 >
   <label
     className="css-1s6q0wc-BaseLabel-Text-BaseLabel ev4kwu51"
@@ -110,7 +110,7 @@ exports[`<Checkbox /> Snapshots when all props should render correctly 1`] = `
 
 exports[`<Checkbox /> Snapshots when checked should render correctly 1`] = `
 <div
-  className="css-qpvxlq-Box e1rqh3k81"
+  className="css-ik298q-Box e1rqh3k81"
 >
   <label
     className="css-1s6q0wc-BaseLabel-Text-BaseLabel ev4kwu51"
@@ -154,7 +154,7 @@ exports[`<Checkbox /> Snapshots when checked should render correctly 1`] = `
 
 exports[`<Checkbox /> Snapshots when disabled should render correctly 1`] = `
 <div
-  className="css-qpvxlq-Box e1rqh3k81"
+  className="css-ik298q-Box e1rqh3k81"
 >
   <label
     className="css-17miwjw-BaseLabel-Text-BaseLabel ev4kwu51"
@@ -197,7 +197,7 @@ exports[`<Checkbox /> Snapshots when disabled should render correctly 1`] = `
 
 exports[`<Checkbox /> Snapshots when empty props should render correctly 1`] = `
 <div
-  className="css-qpvxlq-Box e1rqh3k81"
+  className="css-ik298q-Box e1rqh3k81"
 >
   <label
     className="css-1s6q0wc-BaseLabel-Text-BaseLabel ev4kwu51"
@@ -239,7 +239,7 @@ exports[`<Checkbox /> Snapshots when empty props should render correctly 1`] = `
 
 exports[`<Checkbox /> Snapshots when indeterminate should render correctly 1`] = `
 <div
-  className="css-qpvxlq-Box e1rqh3k81"
+  className="css-ik298q-Box e1rqh3k81"
 >
   <label
     className="css-1s6q0wc-BaseLabel-Text-BaseLabel ev4kwu51"
@@ -284,7 +284,7 @@ exports[`<Checkbox /> Snapshots when indeterminate should render correctly 1`] =
 
 exports[`<Checkbox /> Snapshots when not checked should render correctly 1`] = `
 <div
-  className="css-qpvxlq-Box e1rqh3k81"
+  className="css-ik298q-Box e1rqh3k81"
 >
   <label
     className="css-1s6q0wc-BaseLabel-Text-BaseLabel ev4kwu51"
diff --git a/packages/flame/src/Core/index.tsx b/packages/flame/src/Core/index.tsx
index 74149a19..0035d91a 100644
--- a/packages/flame/src/Core/index.tsx
+++ b/packages/flame/src/Core/index.tsx
@@ -24,6 +24,7 @@ import { themeGet, flameTheme as ThemeUIFlame } from './theme-get';
 import { theme as lightTheme } from './themes/oldskool';
 import { theme as flameTheme } from './themes/flame';
 import { theme as darkTheme } from './themes/dark';
+import { theme as heliosTheme } from './themes/helios';
 
 export interface BorderProps extends StyledSystemBorderProps {
   borderTopLeftRadius?: string | number;
@@ -73,6 +74,8 @@ export const themePicker = (themeName?: string) => {
   switch (themeName) {
     case 'experimentaldark':
       return darkTheme;
+    case 'helios':
+      return heliosTheme;
     case 'oldskool':
     case 'light':
       return lightTheme;
@@ -138,6 +141,7 @@ const FlameGlobalStyles: React.FunctionComponent<{ themeName?: string }> = ({ th
 export {
   lightTheme,
   flameTheme,
+  heliosTheme,
   FlameFonts,
   FlameTheme,
   FlameGlobalStyles,
diff --git a/packages/flame/src/Radio/__snapshots__/Radio.test.tsx.snap b/packages/flame/src/Radio/__snapshots__/Radio.test.tsx.snap
index d025506f..0bfe1c97 100644
--- a/packages/flame/src/Radio/__snapshots__/Radio.test.tsx.snap
+++ b/packages/flame/src/Radio/__snapshots__/Radio.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`<Radio /> Snapshots renders a Radio with a label and description correctly 1`] = `
 <div
-  className="css-qpvxlq-Box e1rqh3k81"
+  className="css-ik298q-Box e1rqh3k81"
 >
   <label
     className="css-1s6q0wc-BaseLabel-Text-BaseLabel ev4kwu51"
@@ -44,7 +44,7 @@ exports[`<Radio /> Snapshots renders a Radio with a label and description correc
 
 exports[`<Radio /> Snapshots renders a checked Radio correctly 1`] = `
 <div
-  className="css-qpvxlq-Box e1rqh3k81"
+  className="css-ik298q-Box e1rqh3k81"
 >
   <label
     className="css-1s6q0wc-BaseLabel-Text-BaseLabel ev4kwu51"
@@ -79,7 +79,7 @@ exports[`<Radio /> Snapshots renders a checked Radio correctly 1`] = `
 
 exports[`<Radio /> Snapshots renders a disabled Radio correctly 1`] = `
 <div
-  className="css-qpvxlq-Box e1rqh3k81"
+  className="css-ik298q-Box e1rqh3k81"
 >
   <label
     className="css-17miwjw-BaseLabel-Text-BaseLabel ev4kwu51"
@@ -115,7 +115,7 @@ exports[`<Radio /> Snapshots renders a disabled Radio correctly 1`] = `
 
 exports[`<Radio /> Snapshots renders a simple Radio correctly 1`] = `
 <div
-  className="css-qpvxlq-Box e1rqh3k81"
+  className="css-ik298q-Box e1rqh3k81"
 >
   <label
     className="css-1s6q0wc-BaseLabel-Text-BaseLabel ev4kwu51"
diff --git a/packages/flame/src/Toaster/Toaster.tsx b/packages/flame/src/Toaster/Toaster.tsx
index 0dea2fb4..66b3f726 100644
--- a/packages/flame/src/Toaster/Toaster.tsx
+++ b/packages/flame/src/Toaster/Toaster.tsx
@@ -127,10 +127,11 @@ const Toaster: React.FC<ToastProps> = ({
           </Box>
           <Flex
             flex="1"
-            fontWeight="bold"
+            fontWeight="normal"
+            lineHeight="1.25rem"
             ml={2}
             justifyContent="space-between"
-            fontSize={['text', 'text']}
+            fontSize={['text-s', 'text-s']}
             width="100%"
             className="fl-toaster__content"
             // Needs to be visually centered with icons
@@ -158,7 +159,7 @@ const Toaster: React.FC<ToastProps> = ({
             })}
             onClick={() => onDismiss()}
           >
-            <IconMathMultiply size="24px" aria-hidden="true" />
+            <IconMathMultiply size="20px" aria-hidden="true" />
           </button>
         </Flex>
       </div>
diff --git a/packages/flame/themes/helios/colors.ts b/packages/flame/themes/helios/colors.ts
new file mode 100644
index 00000000..a5c02869
--- /dev/null
+++ b/packages/flame/themes/helios/colors.ts
@@ -0,0 +1,90 @@
+import { lightspeedTheme } from '@lightspeed/flame-tokens';
+// @ts-ignore - unified-tokens types may not be fully resolved in this context
+import { lsColorLightTheme } from '@lightspeed/unified-tokens/helios';
+
+const themeColors = lightspeedTheme.colors;
+
+// Helper to remove alpha channel from token values (FF suffix)
+const getColorValue = (tokenValue: string): string => {
+  return tokenValue.replace(/FF$/, '');
+};
+
+// Helios 2.0 Color System - Using tokens from @lightspeed/unified-tokens/helios
+// Maps unified-tokens names to Flame theme color names
+const tokenMapping: Record<string, keyof typeof lsColorLightTheme> = {
+  'helios-go-default': 'bgGoDefault',
+  'helios-go-soft': 'bgGoSoft',
+  'helios-go-strong': 'bgGoStrong',
+  'helios-no-default': 'bgNoDefault',
+  'helios-no-soft': 'bgNoSoft',
+  'helios-no-strong': 'bgNoStrong',
+  'helios-success-default': 'bgSuccessDefault',
+  'helios-success-soft': 'bgSuccessSoft',
+  'helios-success-strong': 'bgSuccessStrong',
+  'helios-warning-default': 'bgWarningDefault',
+  'helios-warning-soft': 'bgWarningSoft',
+  'helios-warning-strong': 'bgWarningStrong',
+  'helios-supplementary-default': 'bgSupplementaryDefault',
+  'helios-supplementary-soft': 'bgSupplementarySoft',
+  'helios-supplementary-strong': 'bgSupplementaryStrong',
+  'helios-neutral-dark': 'fgNeutralDefault',
+  'helios-neutral-soft': 'fgNeutralSoft',
+  'helios-neutral-inert': 'fgNeutralInertDefault',
+  'helios-neutral-edge': 'bgNeutralEdge',
+  'helios-neutral-backdrop': 'bgNeutralBackdrop',
+  'helios-neutral-ondark-default': 'fgNeutralOndarkDefault',
+  // Highlight colors for badges and alerts
+  'helios-overlay-neutral-soft': 'overlayNeutralSoft',
+  'helios-overlay-neutral-strong': 'overlayNeutralStrong',
+  'helios-go-highlight-strong': 'bgGoHighlightStrong',
+  'helios-go-strong-fg': 'fgGoStrong',
+  'helios-success-highlight-strong': 'bgSuccessHighlightStrong',
+  'helios-success-strong-fg': 'fgSuccessStrong',
+  'helios-warning-highlight-strong': 'bgWarningHighlightStrong',
+  'helios-warning-strong-fg': 'fgWarningStrong',
+  'helios-no-highlight-strong': 'bgNoHighlightStrong',
+  'helios-no-strong-fg': 'fgNoStrong',
+  // Border colors
+  'helios-border-neutral-soft': 'borderNeutralSoft',
+  'helios-border-neutral-strong': 'borderNeutralStrong',
+  'helios-border-go-default': 'borderGoDefault',
+  'helios-border-success-default': 'borderSuccessDefault',
+  'helios-border-no-default': 'borderNoDefault',
+  'helios-border-warning-default': 'borderWarningDefault',
+  // Foreground colors
+  'helios-fg-go-default': 'fgGoDefault',
+  'helios-fg-success-default': 'fgSuccessDefault',
+  'helios-fg-no-default': 'fgNoDefault',
+  'helios-fg-warning-default': 'fgWarningDefault',
+  'helios-fg-supplementary-default': 'fgSupplementaryDefault',
+  // Background colors
+  'helios-bg-neutral-inert-softer': 'bgNeutralInertSofter',
+  'helios-bg-neutral-inverted-top': 'bgNeutralInvertedTop',
+};
+
+const heliosColors = Object.keys(tokenMapping).reduce((acc, flameName) => {
+  acc[flameName] = getColorValue(lsColorLightTheme[tokenMapping[flameName]]);
+  return acc;
+}, {} as Record<string, string>);
+
+const aliases: ColorAliases = {
+  primary: heliosColors['helios-go-default'], // Helios "Go" color
+  secondary: heliosColors['helios-supplementary-default'], // Helios "Supplementary" color
+  danger: heliosColors['helios-no-default'], // Helios "No" color
+  warning: heliosColors['helios-warning-default'],
+  white: themeColors.white,
+  textBody: heliosColors['helios-neutral-dark'], // Helios neutral dark
+  textHeading: themeColors['gray-1000'],
+  textDimmed: heliosColors['helios-neutral-soft'],
+  dimmed: heliosColors['helios-neutral-edge'],
+  disabled: heliosColors['helios-neutral-inert'],
+  bodyBg: themeColors.white, // Clean white background
+};
+
+const colors = {
+  ...themeColors,
+  ...heliosColors,
+  ...aliases,
+};
+
+export { colors };
diff --git a/packages/flame/themes/helios/components/alert.ts b/packages/flame/themes/helios/components/alert.ts
new file mode 100644
index 00000000..4b4c1528
--- /dev/null
+++ b/packages/flame/themes/helios/components/alert.ts
@@ -0,0 +1,69 @@
+import { colors } from '../colors';
+
+// Helios 2.0 Alert Styles - Light, subtle backgrounds with colored borders
+// Using tokens from @lightspeed/unified-tokens/helios via colors object
+// Alerts use highlight backgrounds (16% opacity) with semantic border colors
+const alertVariants: AlertVariants = {
+  success: {
+    background: (colors as Record<string, string>)['helios-success-highlight-strong'],
+    borderColor: (colors as Record<string, string>)['helios-border-success-default'],
+    '.fl-alert__icon svg': {
+      fill: (colors as Record<string, string>)['helios-fg-success-default'],
+    },
+  },
+  info: {
+    background: (colors as Record<string, string>)['helios-go-highlight-strong'],
+    borderColor: (colors as Record<string, string>)['helios-border-go-default'],
+    '.fl-alert__icon svg': {
+      fill: (colors as Record<string, string>)['helios-fg-go-default'],
+    },
+  },
+  danger: {
+    background: (colors as Record<string, string>)['helios-no-highlight-strong'],
+    borderColor: (colors as Record<string, string>)['helios-border-no-default'],
+    '.fl-alert__icon svg': {
+      fill: (colors as Record<string, string>)['helios-fg-no-default'],
+    },
+  },
+  warning: {
+    background: (colors as Record<string, string>)['helios-warning-highlight-strong'],
+    borderColor: (colors as Record<string, string>)['helios-border-warning-default'],
+    '.fl-alert__icon svg': {
+      fill: (colors as Record<string, string>)['helios-fg-warning-default'],
+    },
+  },
+};
+
+// AlertInCard variants - using slightly less opacity for in-card context
+const alertInCardVariants = {
+  success: {
+    bg: (colors as Record<string, string>)['helios-success-highlight-strong'],
+    borderColor: (colors as Record<string, string>)['helios-success-highlight-strong'],
+    '.fl-alert__icon svg': {
+      fill: (colors as Record<string, string>)['helios-success-strong'],
+    },
+  },
+  info: {
+    bg: (colors as Record<string, string>)['helios-go-highlight-strong'],
+    borderColor: (colors as Record<string, string>)['helios-go-highlight-strong'],
+    '.fl-alert__icon svg': {
+      fill: (colors as Record<string, string>)['helios-go-strong'],
+    },
+  },
+  danger: {
+    bg: (colors as Record<string, string>)['helios-no-highlight-strong'],
+    borderColor: (colors as Record<string, string>)['helios-no-highlight-strong'],
+    '.fl-alert__icon svg': {
+      fill: (colors as Record<string, string>)['helios-no-strong'],
+    },
+  },
+  warning: {
+    bg: (colors as Record<string, string>)['helios-warning-highlight-strong'],
+    borderColor: (colors as Record<string, string>)['helios-warning-highlight-strong'],
+    '.fl-alert__icon svg': {
+      fill: (colors as Record<string, string>)['helios-warning-strong'],
+    },
+  },
+};
+
+export { alertVariants, alertInCardVariants };
diff --git a/packages/flame/themes/helios/components/badge.ts b/packages/flame/themes/helios/components/badge.ts
new file mode 100644
index 00000000..1a2d7183
--- /dev/null
+++ b/packages/flame/themes/helios/components/badge.ts
@@ -0,0 +1,74 @@
+import { colors } from '../colors';
+
+// Helios 2.0 Badge Styles - Exact match with unified-components
+// Using tokens from @lightspeed/unified-tokens/helios via colors object
+// These use transparent backgrounds with alpha channel for subtle appearance
+const badgeVariants: BadgeVariants = {
+  default: {
+    // bg-overlay-neutral-soft + text-neutral-default
+    backgroundColor: (colors as Record<string, string>)['helios-overlay-neutral-soft'],
+    color: (colors as Record<string, string>)['helios-neutral-dark'],
+  },
+  success: {
+    // bg-success-highlight-strong + text-success-strong
+    backgroundColor: (colors as Record<string, string>)['helios-success-highlight-strong'],
+    color: (colors as Record<string, string>)['helios-success-strong-fg'],
+  },
+  warning: {
+    // bg-warning-highlight-strong + text-warning-strong
+    backgroundColor: (colors as Record<string, string>)['helios-warning-highlight-strong'],
+    color: (colors as Record<string, string>)['helios-warning-strong-fg'],
+  },
+  danger: {
+    // bg-no-highlight-strong + text-no-strong
+    backgroundColor: (colors as Record<string, string>)['helios-no-highlight-strong'],
+    color: (colors as Record<string, string>)['helios-no-strong-fg'],
+  },
+  info: {
+    // bg-go-highlight-strong + text-go-strong
+    backgroundColor: (colors as Record<string, string>)['helios-go-highlight-strong'],
+    color: (colors as Record<string, string>)['helios-go-strong-fg'],
+  },
+  important: {
+    // Same as info in Helios
+    backgroundColor: (colors as Record<string, string>)['helios-go-highlight-strong'],
+    color: (colors as Record<string, string>)['helios-go-strong-fg'],
+  },
+};
+
+// Next badge variants - matching Helios 2.0 (no borders, just backgrounds)
+// Helios uses shadow-transparent instead of borders, so we set border to 0
+const nextBadgeVariants = {
+  danger: {
+    bg: (colors as Record<string, string>)['helios-no-highlight-strong'],
+    borderWidth: '0',
+    border: '0',
+    color: (colors as Record<string, string>)['helios-no-strong-fg'],
+  },
+  default: {
+    bg: (colors as Record<string, string>)['helios-overlay-neutral-soft'],
+    borderWidth: '0',
+    border: '0',
+    color: (colors as Record<string, string>)['helios-neutral-dark'],
+  },
+  primary: {
+    bg: (colors as Record<string, string>)['helios-go-highlight-strong'],
+    borderWidth: '0',
+    border: '0',
+    color: (colors as Record<string, string>)['helios-go-strong-fg'],
+  },
+  success: {
+    bg: (colors as Record<string, string>)['helios-success-highlight-strong'],
+    borderWidth: '0',
+    border: '0',
+    color: (colors as Record<string, string>)['helios-success-strong-fg'],
+  },
+  warning: {
+    bg: (colors as Record<string, string>)['helios-warning-highlight-strong'],
+    borderWidth: '0',
+    border: '0',
+    color: (colors as Record<string, string>)['helios-warning-strong-fg'],
+  },
+};
+
+export { badgeVariants, nextBadgeVariants };
diff --git a/packages/flame/themes/helios/components/bone.ts b/packages/flame/themes/helios/components/bone.ts
new file mode 100644
index 00000000..a3e2db61
--- /dev/null
+++ b/packages/flame/themes/helios/components/bone.ts
@@ -0,0 +1,10 @@
+// Helios 2.0 Bone (Skeleton) Styles - Exact match with unified-components
+// Using tokens from @lightspeed/unified-tokens/helios via colors object
+// Skeleton components use 10% opacity of bg-neutral-inverted-top
+const boneStyles: BoneStyles = {
+  // Note: bg-neutral-inverted-top is #242427, 10% opacity = #2424271A
+  // This is a derived value, keeping as-is for now since unified-tokens doesn't export this specific variant
+  background: '#2424271A', // rgba(36, 36, 39, 0.1) - 10% opacity of bg-neutral-inverted-top
+};
+
+export { boneStyles };
diff --git a/packages/flame/themes/helios/components/button.ts b/packages/flame/themes/helios/components/button.ts
new file mode 100644
index 00000000..e9734365
--- /dev/null
+++ b/packages/flame/themes/helios/components/button.ts
@@ -0,0 +1,196 @@
+import { colors } from '../colors';
+
+// Helper to access colors with proper typing
+const getColor = (key: string): string => (colors as Record<string, string>)[key];
+
+// Helios 2.0 Button Styles - Exact match with unified-components
+// Key features: flat colors (no gradients), no borders (border-none, shadow-transparent)
+// Using tokens from @lightspeed/unified-tokens/helios via colors object
+const buttonVariants: ButtonVariants = {
+  fill: {
+    primary: {
+      backgroundImage: 'none',
+      backgroundColor: getColor('helios-go-default'), // #3A1AFE (bgGoDefault)
+      borderColor: getColor('helios-go-default'), // Match bg for seamless look
+      color: colors.white,
+      '&:hover': {
+        color: colors.white,
+        backgroundColor: getColor('helios-go-soft'), // #4E58FD (bgGoSoft)
+        backgroundImage: 'none',
+        borderColor: getColor('helios-go-soft'),
+      },
+      '&:active': {
+        backgroundColor: getColor('helios-go-strong'), // #2B13C7 (bgGoStrong)
+        borderColor: getColor('helios-go-strong'),
+        boxShadow: 'none',
+      },
+    },
+    secondary: {
+      backgroundImage: 'none',
+      backgroundColor: getColor('helios-supplementary-default'), // #365B85 (bgSupplementaryDefault)
+      borderColor: getColor('helios-supplementary-default'),
+      color: colors.white,
+      '&:hover': {
+        color: colors.white,
+        backgroundColor: getColor('helios-supplementary-soft'), // #5177A2 (bgSupplementarySoft)
+        backgroundImage: 'none',
+        borderColor: getColor('helios-supplementary-soft'),
+      },
+      '&:active': {
+        backgroundColor: getColor('helios-supplementary-strong'), // #193F66 (bgSupplementaryStrong)
+        borderColor: getColor('helios-supplementary-strong'),
+        boxShadow: 'none',
+      },
+    },
+    danger: {
+      backgroundImage: 'none',
+      backgroundColor: getColor('helios-no-default'), // #AA2128 (bgNoDefault)
+      borderColor: getColor('helios-no-default'),
+      color: colors.white,
+      '&:hover': {
+        color: colors.white,
+        backgroundColor: getColor('helios-no-soft'), // #D3202F (bgNoSoft)
+        backgroundImage: 'none',
+        borderColor: getColor('helios-no-soft'),
+      },
+      '&:active': {
+        backgroundColor: getColor('helios-no-strong'), // #801617 (bgNoStrong)
+        borderColor: getColor('helios-no-strong'),
+        boxShadow: 'none',
+      },
+    },
+    neutral: {
+      backgroundImage: 'none',
+      backgroundColor: colors.white,
+      borderColor: getColor('helios-neutral-edge'),
+      color: colors.textBody,
+      '&:hover': {
+        color: colors.textBody,
+        backgroundColor: getColor('helios-neutral-backdrop'), // #F1F2F7
+        backgroundImage: 'none',
+        borderColor: getColor('helios-neutral-edge'),
+      },
+      '&:active': {
+        backgroundColor: getColor('helios-neutral-edge'), // #E3E4E9
+        borderColor: getColor('helios-neutral-edge'),
+        boxShadow: 'none',
+      },
+    },
+  },
+  // Outline variants styled as "ghost" buttons (Helios 2.0 ghost-primary/ghost-danger/ghost-secondary)
+  // Ghost buttons: transparent bg initially, colored text, fill on hover with white text
+  outline: {
+    primary: {
+      color: getColor('helios-go-default'), // Colored text initially
+      backgroundColor: 'transparent',
+      borderColor: 'transparent',
+      backgroundImage: 'none',
+      '&:hover': {
+        backgroundColor: getColor('helios-go-default'), // Fill with color on hover
+        color: colors.white, // Text becomes white
+        boxShadow: 'none',
+        backgroundImage: 'none',
+      },
+      '&:active': {
+        backgroundColor: getColor('helios-go-strong'), // Darker on active
+        color: colors.white,
+        backgroundImage: 'none',
+        boxShadow: 'none',
+      },
+    },
+    secondary: {
+      color: getColor('helios-supplementary-default'),
+      backgroundColor: 'transparent',
+      borderColor: 'transparent',
+      backgroundImage: 'none',
+      '&:hover': {
+        backgroundColor: getColor('helios-supplementary-default'),
+        color: colors.white,
+        boxShadow: 'none',
+        backgroundImage: 'none',
+      },
+      '&:active': {
+        backgroundColor: getColor('helios-supplementary-strong'),
+        color: colors.white,
+        backgroundImage: 'none',
+        boxShadow: 'none',
+      },
+    },
+    danger: {
+      color: getColor('helios-no-default'),
+      backgroundColor: 'transparent',
+      borderColor: 'transparent',
+      backgroundImage: 'none',
+      '&:hover': {
+        backgroundColor: getColor('helios-no-default'),
+        color: colors.white,
+        boxShadow: 'none',
+        backgroundImage: 'none',
+      },
+      '&:active': {
+        backgroundColor: getColor('helios-no-strong'),
+        color: colors.white,
+        backgroundImage: 'none',
+        boxShadow: 'none',
+      },
+    },
+  },
+};
+
+// Button icon colors - white on filled buttons, colored on ghost/outline buttons
+const buttonIconVariants: ButtonIconVariants = {
+  fill: {
+    primary: {
+      fill: colors.white, // White icons on filled buttons
+      color: colors.white,
+      '.cr-icon__details-2': {
+        color: colors.white,
+        fill: colors.white,
+      },
+    },
+    secondary: {
+      fill: colors.white,
+      color: colors.white,
+      '.cr-icon__details-2': {
+        color: colors.white,
+        fill: colors.white,
+      },
+    },
+    danger: {
+      fill: colors.white,
+      color: colors.white,
+      '.cr-icon__details-2': {
+        color: colors.white,
+        fill: colors.white,
+      },
+    },
+    neutral: {
+      fill: colors.textBody, // Dark icons on neutral (white bg)
+      color: colors.textBody,
+      '.cr-icon__details-2': {
+        color: colors.textBody,
+        fill: colors.textBody,
+      },
+    },
+  },
+  outline: {
+    primary: {
+      fill: getColor('helios-go-default'), // Colored icons on ghost/outline buttons
+      color: getColor('helios-go-default'),
+    },
+    secondary: {
+      fill: getColor('helios-supplementary-default'),
+      color: getColor('helios-supplementary-default'),
+    },
+    danger: {
+      fill: getColor('helios-no-default'),
+      color: getColor('helios-no-default'),
+    },
+    neutral: {
+      fill: colors.textBody,
+      color: colors.textBody,
+    },
+  },
+};
+
+export { buttonVariants, buttonIconVariants };
diff --git a/packages/flame/themes/helios/components/card.ts b/packages/flame/themes/helios/components/card.ts
new file mode 100644
index 00000000..8dcbd112
--- /dev/null
+++ b/packages/flame/themes/helios/components/card.ts
@@ -0,0 +1,29 @@
+import { colors } from '../colors';
+
+// Helios 2.0 Card Styles - Exact match with unified-components
+// Using exact color values from @lightspeed/unified-tokens/helios
+const cardStyles: CardStyles = {
+  background: colors.white, // #FFFFFF (bg-neutral-top)
+  header: {
+    border: (colors as Record<string, string>)['helios-border-neutral-soft'],
+  },
+  footer: {
+    border: (colors as Record<string, string>)['helios-border-neutral-soft'],
+  },
+};
+
+// Card variants use subtle shadows matching Helios design
+const cardVariants: CardVariants = {
+  neutral: {
+    // Neutral card with subtle border shadow
+    boxShadow:
+      '0 0 0 1px rgba(0, 0, 0, 0.06), 0 3px 6px 0 rgba(0, 0, 0, 0.03), 0 1px 2px 0 rgba(0, 0, 0, 0.1)',
+  },
+  top: {
+    // Floating card with more prominent shadow (appearance="floating")
+    boxShadow:
+      '0 0 0 1px rgba(0, 0, 0, 0.06), 0 6px 12px 0 rgba(0, 0, 0, 0.03), 0 4px 8px 0 rgba(0, 0, 0, 0.08)',
+  },
+};
+
+export { cardStyles, cardVariants };
diff --git a/packages/flame/themes/helios/components/checkbox.ts b/packages/flame/themes/helios/components/checkbox.ts
new file mode 100644
index 00000000..df215498
--- /dev/null
+++ b/packages/flame/themes/helios/components/checkbox.ts
@@ -0,0 +1,37 @@
+import { colors } from '../colors';
+
+// Helios 2.0 Checkbox Styles - Exact match with unified-components
+// Using exact color values from @lightspeed/unified-tokens/helios
+// Key features: border-none when checked, hover states, clean focus outline
+const checkboxStyles: CheckboxStyles = {
+  background: colors.white, // White background when unchecked
+  borderColor: (colors as Record<string, string>)['helios-border-neutral-strong'],
+  color: '',
+  focus: {
+    // Focus outline uses go-default color
+    boxShadow: `0 0 0 1px ${colors.white}, 0 0 0 3px ${
+      (colors as Record<string, string>)['helios-go-default']
+    }`,
+  },
+  indeterminate: {
+    // Indeterminate: In Helios 2.0, this should be fully filled like checked state
+    // NOTE: Flame's component limitation - only border changes, not wrapper background
+    // Using go-default for both border and dash to maintain Helios color consistency
+    border: (colors as Record<string, string>)['helios-go-default'], // #3A1AFE (border accent)
+    background: (colors as Record<string, string>)['helios-go-default'], // #3A1AFE (dash color, same as border)
+  },
+  checked: {
+    // Checked state: filled with go-default color, white checkmark, no border
+    background: (colors as Record<string, string>)['helios-go-default'], // #3A1AFE (bg-go-default)
+    border: 'transparent', // border-none when checked
+    color: colors.white, // #FFFFFF (text-neutral-ondark-default)
+  },
+  label: {
+    color: colors.textBody, // #1E1E21 (text-neutral-default)
+  },
+  description: {
+    color: colors.textBody, // #1E1E21 (text-neutral-default)
+  },
+};
+
+export { checkboxStyles };
diff --git a/packages/flame/themes/helios/components/divider.ts b/packages/flame/themes/helios/components/divider.ts
new file mode 100644
index 00000000..c0b6fd47
--- /dev/null
+++ b/packages/flame/themes/helios/components/divider.ts
@@ -0,0 +1,10 @@
+import { colors } from '../colors';
+
+// Helios 2.0 Divider Styles - Exact match with Helios design
+// Using tokens from @lightspeed/unified-tokens/helios via colors object
+const dividerStyles: DividerStyles = {
+  color: (colors as Record<string, string>)['helios-border-neutral-soft'],
+  cardColor: (colors as Record<string, string>)['helios-border-neutral-soft'],
+};
+
+export { dividerStyles };
diff --git a/packages/flame/themes/helios/components/group.ts b/packages/flame/themes/helios/components/group.ts
new file mode 100644
index 00000000..4fd8983b
--- /dev/null
+++ b/packages/flame/themes/helios/components/group.ts
@@ -0,0 +1,11 @@
+import { colors } from '../colors';
+
+// Helios 2 Group Styles
+const groupStyles: GroupStyles = {
+  addon: {
+    background: (colors as Record<string, string>)['helios-neutral-backdrop'],
+    borderColor: (colors as Record<string, string>)['helios-neutral-edge'],
+  },
+};
+
+export { groupStyles };
diff --git a/packages/flame/themes/helios/components/input.ts b/packages/flame/themes/helios/components/input.ts
new file mode 100644
index 00000000..45fd34bc
--- /dev/null
+++ b/packages/flame/themes/helios/components/input.ts
@@ -0,0 +1,88 @@
+import { shadows } from '../shadows';
+import { colors } from '../colors';
+
+// Helper to access colors with proper typing
+const getColor = (key: string): string => (colors as Record<string, string>)[key];
+
+// Helios 2.0 Input Styles - Exact match with unified-components
+// Using tokens from @lightspeed/unified-tokens/helios via colors object
+const inputStyles: InputStyles = {
+  background: colors.white, // #FFFFFF (bg-neutral-top)
+  color: colors.textBody, // #1E1E21 (text-neutral-default)
+  border: (colors as Record<string, string>)['helios-border-neutral-soft'],
+  // @ts-ignore
+  boxShadow: shadows.inner['inner-shadow-1'],
+  placeholder: {
+    color: (colors as Record<string, string>)['helios-fg-supplementary-default'],
+  },
+  hover: {
+    border: getColor('helios-neutral-soft'), // #69696D
+  },
+  active: {
+    border: getColor('helios-go-default'), // #3A1AFE (border-go-default)
+  },
+  disabled: {
+    color: getColor('helios-neutral-inert'),
+    background: getColor('helios-bg-neutral-inert-softer'),
+  },
+  focus: {
+    border: getColor('helios-go-default'), // #3A1AFE (border-go-default)
+  },
+  helper: {
+    background: getColor('helios-neutral-dark'),
+  },
+  warning: {
+    color: getColor('helios-warning-default'),
+  },
+  error: {
+    border: (colors as Record<string, string>)['helios-border-no-default'],
+    color: (colors as Record<string, string>)['helios-fg-no-default'],
+  },
+  valid: {
+    color: (colors as Record<string, string>)['helios-fg-success-default'],
+  },
+  readonly: {
+    color: colors.textBody, // #1E1E21
+    background: (colors as Record<string, string>)['helios-bg-neutral-inert-softer'],
+  },
+  label: {
+    color: colors.textBody,
+  },
+  autofilled: {
+    background: colors.white,
+    color: colors.textBody,
+  },
+  autocomplete: {
+    border: getColor('helios-neutral-edge'),
+    controlDropdownIndicator: {
+      color: getColor('helios-neutral-backdrop'),
+    },
+    controlHover: {
+      border: getColor('helios-neutral-soft'),
+    },
+    indicator: {
+      color: getColor('helios-neutral-edge'),
+    },
+    optionSelected: {
+      background: getColor('helios-neutral-backdrop'),
+      color: colors.textBody,
+    },
+    multiValue: {
+      color: colors.textBody,
+      background: colors.white,
+      backgroundDisabled: colors.white,
+      border: getColor('helios-neutral-edge'),
+      borderDisabled: getColor('helios-neutral-edge'),
+    },
+    multiValueLabel: {
+      color: colors.textBody,
+      colorDisabled: getColor('helios-neutral-dark'),
+    },
+    multiValueRemove: {
+      color: '',
+      colorDisabled: colors.textHeading,
+    },
+  },
+};
+
+export { inputStyles };
diff --git a/packages/flame/themes/helios/components/logo.ts b/packages/flame/themes/helios/components/logo.ts
new file mode 100644
index 00000000..1bfe9397
--- /dev/null
+++ b/packages/flame/themes/helios/components/logo.ts
@@ -0,0 +1,46 @@
+import { colors } from '../colors';
+
+const logoVariants: LogoVariants = {
+  flame: {
+    default: {
+      fill: colors['maple-400'],
+    },
+    'red-white': {
+      fill: colors['maple-400'],
+    },
+    dive: {
+      fill: colors['gray-900'],
+    },
+    night: {
+      fill: colors['gray-1000'],
+    },
+    snow: {
+      fill: colors.white,
+    },
+    maple: {
+      fill: colors['maple-400'],
+    },
+  },
+  word: {
+    default: {
+      fill: colors['gray-1000'],
+    },
+    'red-white': {
+      fill: colors.white,
+    },
+    dive: {
+      fill: colors['gray-900'],
+    },
+    night: {
+      fill: colors['gray-1000'],
+    },
+    snow: {
+      fill: colors.white,
+    },
+    maple: {
+      fill: colors['maple-400'],
+    },
+  },
+};
+
+export { logoVariants };
diff --git a/packages/flame/themes/helios/components/modal.ts b/packages/flame/themes/helios/components/modal.ts
new file mode 100644
index 00000000..f759791c
--- /dev/null
+++ b/packages/flame/themes/helios/components/modal.ts
@@ -0,0 +1,23 @@
+import { colors } from '../colors';
+
+// Helios 2.0 Modal Styles - Exact match with unified-components Dialog
+// Using tokens from @lightspeed/unified-tokens/helios via colors object
+const modalStyles: ModalStyles = {
+  overlay: {
+    background: (colors as Record<string, string>)['helios-overlay-neutral-strong'],
+  },
+  modal: {
+    background: colors.white, // #FFFFFF (bg-neutral-top)
+    color: colors.textBody, // #1E1E21 (text-neutral-default)
+  },
+  header: {
+    border: (colors as Record<string, string>)['helios-border-neutral-soft'],
+    color: colors.textBody, // #1E1E21 (text-neutral-default)
+  },
+  footer: {
+    background: (colors as Record<string, string>)['helios-neutral-backdrop'],
+    border: (colors as Record<string, string>)['helios-border-neutral-soft'],
+  },
+};
+
+export { modalStyles };
diff --git a/packages/flame/themes/helios/components/nps.ts b/packages/flame/themes/helios/components/nps.ts
new file mode 100644
index 00000000..742e7860
--- /dev/null
+++ b/packages/flame/themes/helios/components/nps.ts
@@ -0,0 +1,9 @@
+import { colors } from '../colors';
+
+const npsStyles: NpsStyles = {
+  text: {
+    dimmed: colors['gray-300'],
+  },
+};
+
+export { npsStyles };
diff --git a/packages/flame/themes/helios/components/popover.ts b/packages/flame/themes/helios/components/popover.ts
new file mode 100644
index 00000000..6888edab
--- /dev/null
+++ b/packages/flame/themes/helios/components/popover.ts
@@ -0,0 +1,16 @@
+import { colors } from '../colors';
+
+// Helios 2.0 Popover Styles - Exact match with unified-components
+// Using tokens from @lightspeed/unified-tokens/helios via colors object
+const popoverStyles: PopoverStyles = {
+  boxShadow: '0 0 0 0.0625rem rgba(12, 13, 13, 0.15), 0 0.1875rem 0.375rem rgba(12, 13, 13, 0.15)',
+  arrowColor: colors.white, // #FFFFFF (bg-neutral-top for arrow)
+  light: {
+    background: colors.white, // #FFFFFF (bg-neutral-top)
+  },
+  dark: {
+    background: (colors as Record<string, string>)['helios-neutral-backdrop'],
+  },
+};
+
+export { popoverStyles };
diff --git a/packages/flame/themes/helios/components/progress.ts b/packages/flame/themes/helios/components/progress.ts
new file mode 100644
index 00000000..85da066d
--- /dev/null
+++ b/packages/flame/themes/helios/components/progress.ts
@@ -0,0 +1,26 @@
+import { colors } from '../colors';
+
+// Helper to access colors with proper typing
+const getColor = (key: string): string => (colors as Record<string, string>)[key];
+
+// Helios 2 Progress Styles
+const progressStyles: ProgressStyles = {
+  background: getColor('helios-neutral-edge'),
+  progressBar: {
+    background: `${getColor('helios-neutral-edge')} 
+linear-gradient(
+  45deg,
+  ${getColor('helios-go-default')} 0%,
+  ${getColor('helios-go-soft')} 25%,
+  ${getColor('helios-go-default')} 75%,
+  ${getColor('helios-go-soft')} 100%
+)
+`,
+    backgroundSize: '400% 400%',
+  },
+  progressBarStatic: {
+    background: getColor('helios-go-default'),
+  },
+};
+
+export { progressStyles };
diff --git a/packages/flame/themes/helios/components/radio.ts b/packages/flame/themes/helios/components/radio.ts
new file mode 100644
index 00000000..935d94dd
--- /dev/null
+++ b/packages/flame/themes/helios/components/radio.ts
@@ -0,0 +1,26 @@
+import { colors } from '../colors';
+
+// Helios 2.0 Radio Styles - Exact match with unified-components
+// Using exact color values from @lightspeed/unified-tokens/helios
+const radioStyles: RadioStyles = {
+  background: colors.white, // #FFFFFF (bg-neutral-top)
+  border: (colors as Record<string, string>)['helios-border-neutral-strong'],
+  color: colors.white, // #FFFFFF (inner dot color)
+  focus: {
+    boxShadow: `${colors.white} 0px 0px 0px 1px, ${
+      (colors as Record<string, string>)['helios-go-default']
+    } 0px 0px 0px 3px`,
+  },
+  checked: {
+    background: (colors as Record<string, string>)['helios-go-default'], // #3A1AFE (bg-go-default)
+    border: 'transparent', // border-none when checked
+  },
+  description: {
+    color: colors.textBody, // #1E1E21 (text-neutral-default)
+  },
+  label: {
+    color: colors.textBody, // #1E1E21 (text-neutral-default)
+  },
+};
+
+export { radioStyles };
diff --git a/packages/flame/themes/helios/components/select.ts b/packages/flame/themes/helios/components/select.ts
new file mode 100644
index 00000000..33f4b4e1
--- /dev/null
+++ b/packages/flame/themes/helios/components/select.ts
@@ -0,0 +1,15 @@
+import { colors } from '../colors';
+
+// Helios 2.0 Select Styles - Exact match with unified-components
+// Using exact color values from @lightspeed/unified-tokens/helios
+const selectStyles: SelectStyles = {
+  backgroundColor: '',
+  background: colors.white, // #FFFFFF (bg-neutral-top)
+  border: (colors as Record<string, string>)['helios-border-neutral-soft'],
+  color: colors.textBody, // #1E1E21 (text-neutral-default)
+  focusBorder: (colors as Record<string, string>)['helios-go-default'], // #3A1AFE (border-go-default)
+  disabledColor: (colors as Record<string, string>)['helios-neutral-inert'],
+  disabledBackground: (colors as Record<string, string>)['helios-bg-neutral-inert-softer'],
+};
+
+export { selectStyles };
diff --git a/packages/flame/themes/helios/components/sidebar.ts b/packages/flame/themes/helios/components/sidebar.ts
new file mode 100644
index 00000000..f2b942fc
--- /dev/null
+++ b/packages/flame/themes/helios/components/sidebar.ts
@@ -0,0 +1,37 @@
+import { colors } from '../colors';
+
+const sidebarStyles: SidebarStyles = {
+  background: colors['gray-900'],
+  borderColor: colors['gray-700'],
+  iconDetails: colors['gray-900'],
+  sidebarLink: {
+    focus: {
+      background: colors['gray-800'],
+    },
+    active: {
+      background: colors['blue-500'],
+    },
+  },
+  menulink: {
+    normal: {
+      color: colors['blue-500'],
+    },
+    danger: {
+      color: colors['maple-600'],
+    },
+  },
+  shopButton: {
+    background: colors['gray-800'],
+    active: {
+      background: colors['gray-700'],
+    },
+    hover: {
+      background: colors['gray-700'],
+    },
+  },
+  lockButton: {
+    borderColor: colors['gray-500'],
+  },
+};
+
+export { sidebarStyles };
diff --git a/packages/flame/themes/helios/components/switch.ts b/packages/flame/themes/helios/components/switch.ts
new file mode 100644
index 00000000..90f7567d
--- /dev/null
+++ b/packages/flame/themes/helios/components/switch.ts
@@ -0,0 +1,32 @@
+import { colors } from '../colors';
+
+// Helper to access colors with proper typing
+const getColor = (key: string): string => (colors as Record<string, string>)[key];
+
+// Helios 2 Switch Styles - Using Helios semantic colors
+const switchStyles: SwitchStyles = {
+  on: {
+    background: getColor('helios-go-default'),
+    border: getColor('helios-go-default'),
+    color: colors.white,
+    focusBorder: getColor('helios-go-default'),
+    errorBorder: getColor('helios-no-default'),
+    checkedBorder: getColor('helios-go-default'),
+  },
+  off: {
+    background: colors.white,
+    border: getColor('helios-neutral-edge'),
+    color: getColor('helios-neutral-soft'),
+  },
+  slider: {
+    border: getColor('helios-neutral-edge'),
+    background: colors.white,
+    shadow: '0 0.125rem 0.25rem rgba(12, 13, 13, 0.15)',
+  },
+  icons: {
+    checkmarkBackground: colors.white,
+    crossBackground: getColor('helios-neutral-soft'),
+  },
+};
+
+export { switchStyles };
diff --git a/packages/flame/themes/helios/components/table.ts b/packages/flame/themes/helios/components/table.ts
new file mode 100644
index 00000000..f347aeb9
--- /dev/null
+++ b/packages/flame/themes/helios/components/table.ts
@@ -0,0 +1,44 @@
+import { darken, saturate, rgba } from 'polished';
+import { colors } from '../colors';
+
+// Helper to access colors with proper typing
+const getColor = (key: string): string => (colors as Record<string, string>)[key];
+
+// Helios 2.0 Table Styles - Exact match with unified-components
+// Using tokens from @lightspeed/unified-tokens/helios via colors object
+const blue = getColor('helios-go-default'); // #3A1AFE
+const lightBlue = darken(0.1, saturate(0.2, '#869DFF29')); // Derived from go-highlight
+const sortableButtonColor = rgba(getColor('helios-go-default'), 0.1);
+const progressBackground = `linear-gradient(
+  45deg,
+  ${blue} 0%,
+  ${lightBlue} 25%,
+  ${blue} 75%,
+  ${lightBlue} 100%
+)`;
+
+const tableStyles: TableStyles = {
+  progress: {
+    background: progressBackground,
+    backgroundSize: '400% 400%',
+    loadingBackground: getColor('helios-neutral-backdrop'),
+  },
+  tr: {
+    hover: {
+      background: getColor('helios-go-highlight-strong'),
+    },
+    borderColor: getColor('helios-border-neutral-soft'),
+  },
+  dropdown: {
+    hover: {
+      background: getColor('helios-neutral-backdrop'),
+    },
+  },
+  sortable: {
+    button: {
+      background: sortableButtonColor,
+    },
+  },
+};
+
+export { tableStyles };
diff --git a/packages/flame/themes/helios/components/tag.ts b/packages/flame/themes/helios/components/tag.ts
new file mode 100644
index 00000000..6c1c4291
--- /dev/null
+++ b/packages/flame/themes/helios/components/tag.ts
@@ -0,0 +1,38 @@
+import { rgba } from 'polished';
+import { colors } from '../colors';
+import { shadows } from '../shadows';
+
+// Helper to access colors with proper typing
+const getColor = (key: string): string => (colors as Record<string, string>)[key];
+
+// Helios 2 Tag Styles - Using Helios Go colors
+const tagStyles: TagStyles = {
+  main: {
+    background: getColor('helios-go-default'),
+    hoverBackground: getColor('helios-go-soft'),
+    activeBackground: getColor('helios-go-strong'),
+    focusBorder: getColor('helios-go-default'),
+    color: colors.white,
+    boxShadow: `0 0 0 0.0625rem ${colors.white}, 0 0 0 0.1875rem ${getColor(
+      'helios-go-default',
+    )}, ${
+      // @ts-ignore
+      shadows.inner['inner-shadow-2']
+    }`,
+  },
+  remove: {
+    background: getColor('helios-go-default'),
+    hoverBackground: getColor('helios-go-soft'),
+    activeBackground: getColor('helios-go-strong'),
+    icon: {
+      background: rgba(getColor('helios-neutral-dark'), 0.4),
+      details: colors.white,
+      hoverBackground: '',
+      focusBackground: '',
+      focusBoxShadow: `0 0 0 0.0625rem transparent, 0 0 0 0.125rem ${colors.white}`,
+      activeBackground: '',
+    },
+  },
+};
+
+export { tagStyles };
diff --git a/packages/flame/themes/helios/components/text.ts b/packages/flame/themes/helios/components/text.ts
new file mode 100644
index 00000000..a4d29ef9
--- /dev/null
+++ b/packages/flame/themes/helios/components/text.ts
@@ -0,0 +1,11 @@
+import { colors } from '../colors';
+
+// Helios 2 Text Styles
+const textStyles: TextStyles = {
+  color: colors.textBody,
+  link: {
+    color: (colors as Record<string, string>)['helios-go-default'],
+  },
+};
+
+export { textStyles };
diff --git a/packages/flame/themes/helios/components/toaster.ts b/packages/flame/themes/helios/components/toaster.ts
new file mode 100644
index 00000000..c6545f90
--- /dev/null
+++ b/packages/flame/themes/helios/components/toaster.ts
@@ -0,0 +1,53 @@
+// Helios 2.0 Toaster Styles - Aligned with Toasts (unified-components)
+// Toasts use filled backgrounds: bg-success-default, bg-no-default
+// ALL text and icons are white (text-neutral-ondark-default)
+// Using token names from the Helios theme colors object
+import { colors } from '../colors';
+
+// Helper to access colors with proper typing
+const getColor = (key: string): string => (colors as Record<string, string>)[key];
+
+const toasterVariants = {
+  success: {
+    '.fl-toaster__container': {
+      bg: getColor('helios-success-default'),
+    },
+    '.fl-toaster__countdown': {
+      bg: getColor('helios-success-strong'), // darker green for countdown bar
+    },
+    '.fl-toaster__icon svg': {
+      fill: getColor('helios-neutral-ondark-default'), // icon color
+    },
+    '.fl-toaster__content': {
+      color: getColor('helios-neutral-ondark-default'), // text color
+    },
+    '.fl-toaster__dismiss-btn svg': {
+      fill: getColor('helios-neutral-ondark-default'), // close button
+    },
+    '.fl-toast__action-btn': {
+      color: getColor('helios-neutral-ondark-default'), // action button
+    },
+  },
+  error: {
+    '.fl-toaster__container': {
+      bg: getColor('helios-no-default'),
+    },
+    '.fl-toaster__countdown': {
+      bg: getColor('helios-no-strong'), // darker red for countdown bar
+    },
+    '.fl-toaster__icon svg': {
+      fill: getColor('helios-neutral-ondark-default'), // icon color
+    },
+    '.fl-toaster__content': {
+      color: getColor('helios-neutral-ondark-default'), // text color
+    },
+    '.fl-toaster__dismiss-btn svg': {
+      fill: getColor('helios-neutral-ondark-default'), // close button
+    },
+    '.fl-toast__action-btn': {
+      color: getColor('helios-neutral-ondark-default'), // action button
+    },
+  },
+};
+
+export { toasterVariants };
diff --git a/packages/flame/themes/helios/components/tooltip.ts b/packages/flame/themes/helios/components/tooltip.ts
new file mode 100644
index 00000000..f26a4788
--- /dev/null
+++ b/packages/flame/themes/helios/components/tooltip.ts
@@ -0,0 +1,19 @@
+import { colors } from '../colors';
+
+// Helios 2.0 Tooltip Styles - Exact match with unified-components
+// Using tokens from @lightspeed/unified-tokens/helios via colors object
+const tooltipStyles: TooltipStyles = {
+  light: {
+    background: (colors as Record<string, string>)['helios-neutral-backdrop'],
+    border: (colors as Record<string, string>)['helios-border-neutral-soft'],
+    color: colors.textBody, // #1E1E21 (text-neutral-default)
+  },
+  dark: {
+    // Default Helios tooltip uses inverted dark background
+    background: (colors as Record<string, string>)['helios-bg-neutral-inverted-top'],
+    border: (colors as Record<string, string>)['helios-bg-neutral-inverted-top'],
+    color: colors.white, // #FFFFFF (text-neutral-inverted-default)
+  },
+};
+
+export { tooltipStyles };
diff --git a/packages/flame/themes/helios/components/wordmark.ts b/packages/flame/themes/helios/components/wordmark.ts
new file mode 100644
index 00000000..d8e63e05
--- /dev/null
+++ b/packages/flame/themes/helios/components/wordmark.ts
@@ -0,0 +1,13 @@
+import { colors } from '../colors';
+
+const wordmarkStyles: WordmarkStyles = {
+  border: colors['maple-400'],
+  light: {
+    color: colors.white,
+  },
+  dark: {
+    color: colors['gray-1000'],
+  },
+};
+
+export { wordmarkStyles };
diff --git a/packages/flame/themes/helios/index.ts b/packages/flame/themes/helios/index.ts
new file mode 100644
index 00000000..276d7487
--- /dev/null
+++ b/packages/flame/themes/helios/index.ts
@@ -0,0 +1,67 @@
+import { lightspeedTheme } from '@lightspeed/flame-tokens';
+
+import { colors } from './colors';
+
+import { alertVariants, alertInCardVariants } from './components/alert';
+import { badgeVariants, nextBadgeVariants } from './components/badge';
+import { buttonVariants, buttonIconVariants } from './components/button';
+import { cardStyles, cardVariants } from './components/card';
+import { checkboxStyles } from './components/checkbox';
+import { dividerStyles } from './components/divider';
+import { inputStyles } from './components/input';
+import { logoVariants } from './components/logo';
+import { radioStyles } from './components/radio';
+import { selectStyles } from './components/select';
+import { switchStyles } from './components/switch';
+import { tagStyles } from './components/tag';
+import { tooltipStyles } from './components/tooltip';
+import { modalStyles } from './components/modal';
+import { progressStyles } from './components/progress';
+import { popoverStyles } from './components/popover';
+import { textStyles } from './components/text';
+import { boneStyles } from './components/bone';
+import { groupStyles } from './components/group';
+import { wordmarkStyles } from './components/wordmark';
+import { tableStyles } from './components/table';
+import { sidebarStyles } from './components/sidebar';
+import { npsStyles } from './components/nps';
+import { toasterVariants } from './components/toaster';
+
+const themeUI = {
+  ...lightspeedTheme,
+  colors,
+};
+
+const theme: FlameUI = {
+  ...themeUI,
+  alertVariants,
+  alertInCardVariants,
+  badgeVariants,
+  nextBadgeVariants,
+  buttonVariants,
+  buttonIconVariants,
+  cardStyles,
+  cardVariants,
+  checkboxStyles,
+  dividerStyles,
+  inputStyles,
+  logoVariants,
+  radioStyles,
+  selectStyles,
+  switchStyles,
+  tagStyles,
+  tooltipStyles,
+  modalStyles,
+  progressStyles,
+  popoverStyles,
+  textStyles,
+  boneStyles,
+  groupStyles,
+  wordmarkStyles,
+  tableStyles,
+  sidebarStyles,
+  npsStyles,
+  toasterVariants,
+};
+
+export { themeUI, theme };
diff --git a/packages/flame/themes/helios/shadows.ts b/packages/flame/themes/helios/shadows.ts
new file mode 100644
index 00000000..d41b6974
--- /dev/null
+++ b/packages/flame/themes/helios/shadows.ts
@@ -0,0 +1,6 @@
+import { shadows } from '@lightspeed/flame-tokens';
+
+// You can override shadows here if needed
+// const customShadows = ['0 1px 2px rgba(0,0,0,0.1)', ...];
+
+export { shadows };
diff --git a/yarn.lock b/yarn.lock
index 037bc9d9..5f1e7c43 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2558,6 +2558,11 @@
     eslint-plugin-react "^7.12.4"
     eslint-plugin-react-hooks "^1.6.0"
 
+"@lightspeed/unified-tokens@^3.3.0":
+  version "3.4.0"
+  resolved "https://npm.pkg.github.com/download/@lightspeed/unified-tokens/3.4.0/c1abddccc8b9bd8a414ad0319a9039cb42676fd4#c1abddccc8b9bd8a414ad0319a9039cb42676fd4"
+  integrity sha512-7CSKcOyaOV2NUAb0uV9vlATBwS3FH17u4tynregHraU2Cpc/+djgzPB4rn/nceUv10+VwdAcIv9SM0y0xIBoIA==
+
 "@mdx-js/mdx@^1.6.22":
   version "1.6.22"
   resolved "https://registry.yarnpkg.com/@mdx-js/mdx/-/mdx-1.6.22.tgz#8a723157bf90e78f17dc0f27995398e6c731f1ba"

From cc3391f0e65fcc298aee874972272f28182d9952 Mon Sep 17 00:00:00 2001
From: Urs Keller <urs.keller@lightspeedhq.com>
Date: Mon, 24 Nov 2025 16:28:20 +0100
Subject: [PATCH 2/3] Publish

 - @lightspeed/flame-tokens@2.0.0-helios.1
 - @lightspeed/flame@3.0.0-helios.1
---
 packages/flame-tokens/CHANGELOG.md | 4 ++++
 packages/flame-tokens/package.json | 2 +-
 packages/flame/CHANGELOG.md        | 4 ++++
 packages/flame/package.json        | 4 ++--
 4 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/packages/flame-tokens/CHANGELOG.md b/packages/flame-tokens/CHANGELOG.md
index 975a6d03..93860657 100644
--- a/packages/flame-tokens/CHANGELOG.md
+++ b/packages/flame-tokens/CHANGELOG.md
@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 Refer to the [CONTRIBUTING guide](https://github.com/lightspeed/flame/blob/master/.github/CONTRIBUTING.md) for more info.
 
+## 2.0.0-helios.1 - 2025-11-24
+
+- Version bump because lerna
+
 ## 2.0.0-alpha.10 - 2025-10-29
 
 - Version bump because lerna
diff --git a/packages/flame-tokens/package.json b/packages/flame-tokens/package.json
index 626a02f2..2aa0553d 100644
--- a/packages/flame-tokens/package.json
+++ b/packages/flame-tokens/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@lightspeed/flame-tokens",
-  "version": "2.0.0-alpha.10",
+  "version": "2.0.0-helios.1",
   "description": "Design tokens for Lightspeed's Flame design system",
   "main": "dist/index.js",
   "module": "dist/esm/index.js",
diff --git a/packages/flame/CHANGELOG.md b/packages/flame/CHANGELOG.md
index e20e259c..f536d435 100644
--- a/packages/flame/CHANGELOG.md
+++ b/packages/flame/CHANGELOG.md
@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 Refer to the [CONTRIBUTING guide](https://github.com/lightspeed/flame/blob/master/.github/CONTRIBUTING.md) for more info.
 
+## 3.0.0-helios.1 - 2025-11-24
+
+- Version bump because lerna
+
 ## 3.0.0-alpha.10 - 2025-10-29
 
 - Version bump because lerna
diff --git a/packages/flame/package.json b/packages/flame/package.json
index 30a7d8b6..c9b13680 100644
--- a/packages/flame/package.json
+++ b/packages/flame/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@lightspeed/flame",
-  "version": "3.0.0-alpha.10",
+  "version": "3.0.0-helios.1",
   "private": true,
   "description": "Lightspeed's React UI components library",
   "author": "Lightspeed",
@@ -52,7 +52,7 @@
     "type-fest": "^0.3.0"
   },
   "devDependencies": {
-    "@lightspeed/flame-tokens": "^2.0.0-alpha.10",
+    "@lightspeed/flame-tokens": "^2.0.0-helios.1",
     "@types/lodash": "^4.14.123",
     "@types/react-modal": "^3.8.1",
     "@types/react-select": "^2.0.15",

From 48593911cda227f389ff8796608c26987cafa05f Mon Sep 17 00:00:00 2001
From: Urs Keller <urs.keller@lightspeedhq.com>
Date: Mon, 24 Nov 2025 17:59:16 +0100
Subject: [PATCH 3/3] LSPAY-34879: Automatically map the colours

---
 packages/flame/themes/helios/colors.ts | 56 ++++++++++++++++++++++++++
 1 file changed, 56 insertions(+)

diff --git a/packages/flame/themes/helios/colors.ts b/packages/flame/themes/helios/colors.ts
index a5c02869..64f1896c 100644
--- a/packages/flame/themes/helios/colors.ts
+++ b/packages/flame/themes/helios/colors.ts
@@ -67,6 +67,61 @@ const heliosColors = Object.keys(tokenMapping).reduce((acc, flameName) => {
   return acc;
 }, {} as Record<string, string>);
 
+// Mapping from flame-tokens color names to Helios equivalents
+// This provides backward compatibility for components using the old color names
+const flameTokensToHeliosMapping: Record<string, string> = {
+  // Maple (red/danger) → Helios "No" colors
+  maple: heliosColors['helios-no-default'],
+  'maple-100': heliosColors['helios-no-soft'],
+  'maple-200': heliosColors['helios-no-default'],
+  'maple-300': heliosColors['helios-no-strong'],
+  // Blue (primary) → Helios "Go" colors (primary action)
+  blue: heliosColors['helios-go-default'],
+  'blue-100': heliosColors['helios-go-soft'],
+  'blue-200': heliosColors['helios-go-default'],
+  'blue-300': heliosColors['helios-go-strong'],
+  // Green (success) → Helios "Success" colors
+  green: heliosColors['helios-success-default'],
+  'green-100': heliosColors['helios-success-soft'],
+  'green-200': heliosColors['helios-success-default'],
+  'green-300': heliosColors['helios-success-strong'],
+  // Orange (warning) → Helios "Warning" colors
+  orange: heliosColors['helios-warning-default'],
+  'orange-100': heliosColors['helios-warning-soft'],
+  'orange-200': heliosColors['helios-warning-default'],
+  'orange-300': heliosColors['helios-warning-strong'],
+  // Yellow (warning/attention) → Helios "Warning" colors
+  yellow: heliosColors['helios-warning-default'],
+  'yellow-100': heliosColors['helios-warning-soft'],
+  'yellow-200': heliosColors['helios-warning-default'],
+  'yellow-300': heliosColors['helios-warning-strong'],
+  // Gray (neutral) → Helios neutral colors
+  gray: heliosColors['helios-neutral-dark'],
+  'gray-100': heliosColors['helios-neutral-soft'],
+  'gray-200': heliosColors['helios-neutral-inert'],
+  'gray-300': heliosColors['helios-neutral-edge'],
+  // Seal (darker gray) → Helios neutral colors
+  seal: heliosColors['helios-neutral-dark'],
+  'seal-100': heliosColors['helios-neutral-soft'],
+  'seal-200': heliosColors['helios-neutral-inert'],
+  'seal-300': heliosColors['helios-neutral-edge'],
+  // Dive (dark blue) → Helios "Supplementary" colors
+  dive: heliosColors['helios-supplementary-default'],
+  'dive-100': heliosColors['helios-supplementary-soft'],
+  'dive-200': heliosColors['helios-supplementary-default'],
+  'dive-300': heliosColors['helios-supplementary-strong'],
+  // Night (very dark/black) → Helios neutral dark
+  night: heliosColors['helios-neutral-dark'],
+  'night-100': heliosColors['helios-neutral-soft'],
+  'night-200': heliosColors['helios-neutral-dark'],
+  'night-300': heliosColors['helios-neutral-ondark-default'],
+  // Snow (white) → white
+  snow: themeColors.white,
+  'snow-100': themeColors.white,
+  'snow-200': heliosColors['helios-neutral-backdrop'],
+  'snow-300': heliosColors['helios-neutral-edge'],
+};
+
 const aliases: ColorAliases = {
   primary: heliosColors['helios-go-default'], // Helios "Go" color
   secondary: heliosColors['helios-supplementary-default'], // Helios "Supplementary" color
@@ -84,6 +139,7 @@ const aliases: ColorAliases = {
 const colors = {
   ...themeColors,
   ...heliosColors,
+  ...flameTokensToHeliosMapping,
   ...aliases,
 };