APJ-2908 upgrade atlaskit tokens

spartez · Nov 24, 2023 · 775a139 · 775a139
1 parent fef35d4
commit 775a139
Showing 22 changed files with 328 additions and 589 deletions.
diff --git a/.storybook/config.js b/.storybook/config.js
@@ -1,8 +1,4 @@
-import '@atlaskit/css-reset/dist/bundle.css';
-import '@atlaskit/tokens/css/atlassian-dark.css'
-import '@atlaskit/tokens/css/atlassian-light.css'
-import '@atlaskit/tokens/css/atlassian-spacing.css'
-import '@atlaskit/tokens/css/atlassian-typography.css'
+import { getGlobalTheme, setGlobalTheme } from '@atlaskit/tokens';
 import './style.css';
 
 import { storiesOf, configure } from '@storybook/vue';
@@ -30,10 +26,10 @@ const registerStory = (filename) => {
         .addParameters({
             rootAttributes: [{
                 root: 'html',
-                attribute: 'data-theme',
+                attribute: 'theme',
                 defaultState: {
                     name: "Light",
-                    value: null
+                    value: "light"
                 },
                 states: [
                     {
@@ -42,13 +38,14 @@ const registerStory = (filename) => {
                     }
                 ]
             }]
-        }).addDecorator(withRootAttribute)
+        })
+        .addDecorator(withRootAttribute)
         .addParameters({
             rootAttribute: {
-                attribute: 'data-theme',
+                attribute: 'theme',
                 defaultState: {
                     name: "Light",
-                    value: null
+                    value: "light"
                 },
                 states: [
                     {
@@ -61,6 +58,20 @@ const registerStory = (filename) => {
         .add(name, () => ({
             name: 'StoryWrapper',
             components: component.components,
+            mounted() {
+                const targetNode = document.querySelector("html");
+                const config = { attributes: true };
+                const callback = function (mutationsList) {
+                    for (let mutation of mutationsList) {
+                        const currentTheme = mutation.target.getAttribute("theme");
+                        if (mutation.type === 'attributes' && currentTheme && currentTheme !== getGlobalTheme().colorMode) {
+                            void setGlobalTheme({ colorMode: mutation.target.getAttribute('theme') })
+                        }
+                    }
+                };
+                const observer = new MutationObserver(callback);
+                observer.observe(targetNode, config);
+            },
             render(h) {
                 return h(component, { style: { padding: '20px' } });
             }

diff --git a/.storybook/style.css b/.storybook/style.css
@@ -2,6 +2,16 @@ html,
 body,
 #app {
     height: 100%;
+    background-color: var(--ds-surface, #fff);
+    color: var(--ds-text, #172B4D);
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 1.42857142857143;
+    -ms-overflow-style: -ms-autohiding-scrollbar;
+    -webkit-text-decoration-skip: ink;
+    text-decoration-skip-ink: auto;
 }
 
 

diff --git a/babel.config.js b/babel.config.js
@@ -1,5 +1,8 @@
 /* eslint-env node */
 module.exports = {
+    plugins: [
+        "@atlaskit/tokens/babel-plugin"
+    ],
     presets: [
         [
             '@babel/preset-env',

diff --git a/docs/favicon.ico b/docs/favicon.ico
diff --git a/docs/iframe.html b/docs/iframe.html
diff --git a/docs/index.html b/docs/index.html
diff --git a/docs/main.00d2a1d12d30d5ba79bb.bundle.js b/docs/main.00d2a1d12d30d5ba79bb.bundle.js
diff --git a/docs/main.cefdfccade8f06570bba.bundle.js b/docs/main.cefdfccade8f06570bba.bundle.js
diff --git a/docs/main.cefdfccade8f06570bba.bundle.js.LICENSE.txt b/docs/main.cefdfccade8f06570bba.bundle.js.LICENSE.txt
diff --git a/docs/main.cefdfccade8f06570bba.bundle.js.map b/docs/main.cefdfccade8f06570bba.bundle.js.map
diff --git a/docs/runtime~main.cefdfccade8f06570bba.bundle.js b/docs/runtime~main.cefdfccade8f06570bba.bundle.js
diff --git a/docs/runtime~main.cefdfccade8f06570bba.bundle.js.map b/docs/runtime~main.cefdfccade8f06570bba.bundle.js.map
diff --git a/docs/runtime~main.f6145a39c2e3eb089a89.bundle.js b/docs/runtime~main.f6145a39c2e3eb089a89.bundle.js
diff --git a/docs/sb_dll/storybook_ui-manifest.json b/docs/sb_dll/storybook_ui-manifest.json
diff --git a/docs/sb_dll/storybook_ui_dll.LICENCE b/docs/sb_dll/storybook_ui_dll.LICENCE
diff --git a/docs/sb_dll/storybook_ui_dll.js b/docs/sb_dll/storybook_ui_dll.js
diff --git a/docs/vendors~main.28c73344df1b9891621a.bundle.js b/docs/vendors~main.28c73344df1b9891621a.bundle.js
diff --git a/docs/vendors~main.cefdfccade8f06570bba.bundle.js b/docs/vendors~main.cefdfccade8f06570bba.bundle.js