LSPAY-34879: helios theme

.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:

.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:

.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 }}

.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 }}

.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

.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}

.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>
   );

.yarnrc.yml

@@ -1 +1,6 @@
 nodeLinker: node-modules
+
+npmScopes:
+  lightspeed:
+    npmAuthToken: '${GITHUB_TOKEN}'
+    npmRegistryServer: 'https://npm.pkg.github.com'

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",

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

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",

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

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",
@@ -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",
@@ -51,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",

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

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"

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,

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"

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>