LSPAY-34879: helios theme

Author: ls-urs-keller

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

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

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