Merge pull request #2463 from tuva-odegard/fork-new-branch

Figma API variables
SpareBank1 · Jan 17, 2025 · 606c28b · 606c28b
2 parents bf02808 + 3e92a38
commit 606c28b
Show file tree

Hide file tree

Showing 27 changed files with 17,176 additions and 44 deletions.
diff --git a/.github/workflows/sync-figma-to-tokens.yml b/.github/workflows/sync-figma-to-tokens.yml
@@ -0,0 +1,43 @@
+name: Sync Figma variables to tokens
+on:
+    workflow_dispatch:
+        inputs:
+            file_key:
+                description: 'The file key of the Figma file to be updated'
+                required: true
+
+jobs:
+    sync-figma-to-tokens:
+        runs-on: ubuntu-latest
+        permissions:
+            # Need to be able to create new branches and commits
+            contents: write
+            pull-requests: write
+        steps:
+            - name: Install Node.js
+              uses: actions/setup-node@v3
+              with:
+                  node-version: '18.16.0'
+
+            - name: Set NPM version
+              run: npm install -g [email protected]
+
+            - name: Clone repo
+              uses: actions/checkout@v3
+
+            - name: Install dependencies
+              run: npm install
+
+            - name: Sync variables in Figma file to tokens
+              run: npm run sync-figma-to-tokens -- --output tokens
+              env:
+                  FILE_KEY: ${{ github.event.inputs.file_key }}
+                  PERSONAL_ACCESS_TOKEN: ${{ secrets.GH_ACTION_VARIABLES_SYNC_FIGMA_TOKEN }}
+
+            - name: Create Pull Request
+              uses: peter-evans/create-pull-request@v5
+              with:
+                  commit-message: 'chore: Update tokens from Figma'
+                  title: 'chore: Update tokens from Figma'
+                  body: 'Update tokens from Figma from file: https://www.figma.com/file/${{ github.event.inputs.file_key }}'
+                  branch: update-tokens
diff --git a/.github/workflows/sync-tokens-to-figma.yml b/.github/workflows/sync-tokens-to-figma.yml
@@ -0,0 +1,31 @@
+name: Sync tokens to Figma
+on:
+    workflow_dispatch:
+        inputs:
+            file_key:
+                description: 'The file key of the Figma file to be updated'
+                required: true
+
+jobs:
+    sync-tokens-to-figma:
+        runs-on: ubuntu-latest
+        steps:
+            - name: Install Node.js
+              uses: actions/setup-node@v3
+              with:
+                  node-version: '18.16.0'
+
+            - name: Set NPM version
+              run: npm install -g [email protected]
+
+            - name: Clone repo
+              uses: actions/checkout@v3
+
+            - name: Install dependencies
+              run: npm install
+
+            - name: Sync tokens to Figma file
+              run: npm run sync-tokens-to-figma
+              env:
+                  FILE_KEY: ${{ github.event.inputs.file_key }}
+                  PERSONAL_ACCESS_TOKEN: ${{ secrets.GH_ACTION_VARIABLES_SYNC_FIGMA_TOKEN }}
diff --git a/.gitignore b/.gitignore
@@ -26,3 +26,6 @@ types/
 
 storybook-static
 *storybook.log
+
+#Figma API Variable files
+.env
diff --git a/.storybook/main.less b/.storybook/main.less
@@ -23,6 +23,7 @@
         format('woff2');
 }
 
+@import '../packages/ffe-core/less/colors-semantic-storybook';
 @import '../packages/ffe-core/less/ffe';
 @import '../packages/ffe-accordion/less/ffe-accordion';
 @import '../packages/ffe-account-selector-react/less/ffe-account-selector';

diff --git a/.storybook/preview.less b/.storybook/preview.less
@@ -1,13 +1,4 @@
-@import '@sb1/ffe-core/css/spacing.css';
-@import '@sb1/ffe-core/css/colors.css';
-
 .ffe-docs-content-container {
     padding: var(--ffe-spacing-sm);
-}
-
-.ffe-docs-content-container {
-    background: var(--ffe-farge-hvit);
-    &--dark-mode {
-        background: var(--ffe-farge-svart);
-    }
+    background: var(--ffe-color-background-default);
 }
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -1,20 +1,20 @@
-import React from 'react';
-import './main.less';
-import './preview.less';
-import type { Preview } from '@storybook/react';
 import {
-    Paragraph,
+    EmphasizedText,
     Heading1,
     Heading2,
     Heading3,
     Heading4,
     Heading5,
     Heading6,
     LinkText,
+    Paragraph,
     StrongText,
-    EmphasizedText,
 } from '@sb1/ffe-core-react';
 import { BulletList, BulletListItem } from '@sb1/ffe-lists-react';
+import type { Preview } from '@storybook/react';
+import React from 'react';
+import './main.less';
+import './preview.less';
 
 type Props = Record<string, unknown>;
 
@@ -48,36 +48,40 @@ const preview: Preview = {
         options: {
             storySort: {
                 method: 'alphabetical',
-              },
+            },
         },
     },
     decorators: [
         (Story, context) => {
-            const { scheme } = context.globals;
-            if (scheme === 'both') {
-                return (
-                    <>
-                        <div className="ffe-docs-content-container">
-                            <Story />
-                        </div>
-                        <div className="ffe-docs-content-container ffe-docs-content-container--dark-mode regard-color-scheme-preference">
-                            <Story />
-                        </div>
-                    </>
-                );
-            }
-            if (scheme === 'dark') {
-                return (
-                    <div className="ffe-docs-content-container ffe-docs-content-container--dark-mode regard-color-scheme-preference">
-                        <Story />
-                    </div>
-                );
-            }
+            const { scheme, accent } = context.globals;
 
             return (
-                <div className="ffe-docs-content-container">
-                    <Story />
-                </div>
+                <>
+                    {(scheme === 'both' || scheme === 'light') &&
+                        (accent === 'both' || accent === 'default') && (
+                            <div className="ffe-docs-content-container ">
+                                <Story />
+                            </div>
+                        )}
+                    {(scheme === 'both' || scheme === 'light') &&
+                        (accent === 'both' || accent === 'accent') && (
+                            <div className="ffe-docs-content-container accent">
+                                <Story />
+                            </div>
+                        )}
+                    {(scheme === 'both' || scheme === 'dark') &&
+                        (accent === 'both' || accent === 'default') && (
+                            <div className="ffe-docs-content-container dark-mode regard-color-scheme-preference">
+                                <Story />
+                            </div>
+                        )}
+                    {(scheme === 'both' || scheme === 'dark') &&
+                        (accent === 'both' || accent === 'accent') && (
+                            <div className="ffe-docs-content-container dark-mode regard-color-scheme-preference accent">
+                                <Story />
+                            </div>
+                        )}
+                </>
             );
         },
     ],
@@ -90,9 +94,35 @@ const preview: Preview = {
                     detail: 'light',
                 },
             },
+            defaultValue: 'light',
+            toolbar: {
+                items: [
+                    { icon: 'sun', value: 'light', title: 'Light' },
+                    { icon: 'moon', value: 'dark', title: 'Dark' },
+                    { icon: 'stacked', value: 'both', title: 'Both modes' },
+                ],
+                dynamicTitle: true,
+            },
+        },
+        accent: {
+            name: 'Accent',
+            description: 'Select accent [WIP]',
+            table: {
+                defaultValue: {
+                    detail: 'default',
+                },
+            },
+            defaultValue: 'default',
             toolbar: {
-                icon: 'mirror',
-                items: ['light', 'dark', 'both'],
+                items: [
+                    {
+                        icon: 'lightningoff',
+                        value: 'default',
+                        title: 'Default',
+                    },
+                    { icon: 'lightning', value: 'accent', title: 'Accent' },
+                    { icon: 'stacked', value: 'both', title: 'Both accents' },
+                ],
                 dynamicTitle: true,
             },
         },

diff --git a/package.json b/package.json
@@ -29,7 +29,9 @@
     "lerna": "lerna",
     "prepare": "husky",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "sync-tokens-to-figma": "ts-node packages/ffe-core/scripts/figma-api/sync_tokens_to_figma.ts",
+    "sync-figma-to-tokens": "ts-node packages/ffe-core/scripts/figma-api/sync_figma_to_tokens.ts"
   },
   "lint-staged": {
     "{packages,buildtool,component-overview,linting,test,.storybook}/**/*.{js,jsx,ts,tsx,json,css,less,md}": [
@@ -47,6 +49,7 @@
     "@axe-core/playwright": "^4.9.0",
     "@commitlint/cli": "^19.3.0",
     "@commitlint/config-conventional": "^19.2.2",
+    "@figma/rest-api-spec": "^0.10.0",
     "@playwright/test": "^1.43.1",
     "@storybook/addon-essentials": "^8.2.7",
     "@storybook/addon-interactions": "^8.2.7",
@@ -82,6 +85,7 @@
     "react-dom": "^18.2.0",
     "rimraf": "^6.0.1",
     "storybook": "^8.2.7",
+    "ts-node": "^10.9.2",
     "typescript": "^5.7.2"
   },
   "eslintConfig": {

diff --git a/packages/ffe-core/.gitignore b/packages/ffe-core/.gitignore
@@ -1,2 +1,4 @@
 css/
 gen-src/
+less/colors-semantic.less
+less/colors-semantic-storybook.less
diff --git a/packages/ffe-core/less/ffe.less b/packages/ffe-core/less/ffe.less
@@ -4,6 +4,7 @@
 // less variables
 @import 'breakpoints';
 @import 'colors';
+@import 'colors-semantic';
 @import 'dimensions';
 @import 'motion';
 @import 'spacing';

diff --git a/packages/ffe-core/package.json b/packages/ffe-core/package.json
@@ -23,7 +23,8 @@
         "lint": "ffe-buildtool stylelint less/*.less",
         "test": "npm run lint",
         "clean": "rm -rf css/ gen-src/ lib/",
-        "build": "./scripts/build.js tokens.config.js && ./scripts/build-custom-mq.js less/breakpoints.less css/custom-media-queries.css && ffe-buildtool tsc && lessc less/ffe.less css/ffe.css --autoprefix"
+        "generate-semantic-colors": "./scripts/generate-semantic-colors.js", 
+        "build": "npm run generate-semantic-colors && ./scripts/build.js tokens.config.js && ./scripts/build-custom-mq.js less/breakpoints.less css/custom-media-queries.css && ffe-buildtool tsc && lessc less/ffe.less css/ffe.css --autoprefix"
     },
     "devDependencies": {
         "@sb1/ffe-buildtool": "^0.9.0",