Merge pull request #81 from spartez/dark-mode-support

dark mode support
spartez · Jan 5, 2023 · e0dcd6a · e0dcd6a
2 parents c849f5b + cc99652
commit e0dcd6a
Show file tree

Hide file tree

Showing 135 changed files with 36,363 additions and 25,507 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -1,6 +1,6 @@
 /* eslint-env node */
 module.exports = {
-    extends: ['@spartez/eslint-config-vue'],
+    extends: ['plugin:vue/recommended'],
     rules: {
         'max-len': [
             'warn',

diff --git a/.storybook/addons.js b/.storybook/addons.js
@@ -1 +1,2 @@
 import 'storybook-addon-vue-info/lib/register'
+import "storybook-addon-root-attribute/register";
diff --git a/.storybook/config.js b/.storybook/config.js
@@ -1,8 +1,13 @@
 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 './style.css';
 
 import { storiesOf, configure } from '@storybook/vue';
 import { withInfo } from 'storybook-addon-vue-info';
+import { withRootAttribute } from "storybook-addon-root-attribute";
 
 const req = require.context('../stories', true, /\.story\.vue$/);
 
@@ -21,6 +26,38 @@ const registerStory = (filename) => {
 
     storiesOf(group, module)
         .addDecorator(withInfo)
+        .addDecorator(withRootAttribute)
+        .addParameters({
+            rootAttributes: [{
+                root: 'html',
+                attribute: 'data-theme',
+                defaultState: {
+                    name: "Light",
+                    value: null
+                },
+                states: [
+                    {
+                        name: "dark",
+                        value: "dark"
+                    }
+                ]
+            }]
+        }).addDecorator(withRootAttribute)
+        .addParameters({
+            rootAttribute: {
+                attribute: 'data-theme',
+                defaultState: {
+                    name: "Light",
+                    value: null
+                },
+                states: [
+                    {
+                        name: "Dark",
+                        value: "dark"
+                    }
+                ]
+            }
+        })
         .add(name, () => ({
             name: 'StoryWrapper',
             components: component.components,