Feature/default-theme-tokens

.storybook/main.js

@@ -1,3 +1,3 @@
 module.exports = {
-  stories: ['../packages/library/components/**/story.@(js|jsx|ts|tsx)'],
+  stories: ['../packages/library/components/**/story.@(js|jsx|ts|tsx)', '../packages/library/storybook/tokens/*.@(js|jsx|ts|tsx)']
 };

.storybook/preview-head.html

@@ -0,0 +1 @@
+<link type="text/css" rel="stylesheet" href="../dist/muon.min.css" />

.storybook/preview.js

@@ -1,5 +1,4 @@
 import { setCustomElements } from '@web/storybook-prebuilt/web-components';
-import '../dist/muon.min.css';
 
 const customElements = await (
   await fetch(new URL('../dist/custom-elements.json', import.meta.url))

package.json

@@ -7,6 +7,7 @@
   "description": "",
   "main": "index.js",
   "scripts": {
+    "styles": "muon-build-styles",
     "test": "muon-build-styles && npm run test --workspace=@muons/library",
     "test:watch": "muon-build-styles && npm run test --workspace=@muons/library -- --watch",
     "test:snapshots": "muon-build-styles && npm run test --workspace=@muons/library -- --update-snapshots",
@@ -28,8 +29,8 @@
     "@commitlint/config-conventional": "^12.1.4",
     "@web/dev-server": "^0.1.14",
     "@web/dev-server-rollup": "^0.3.3",
-    "@web/dev-server-storybook": "^0.3.5",
-    "@web/storybook-prebuilt": "^0.1.20",
+    "@web/dev-server-storybook": "^0.4.1",
+    "@web/storybook-prebuilt": "^0.1.32",
     "eslint": "^7.28.0",
     "husky": "^6.0.0",
     "npm-run-all": "^4.1.5",

packages/library/components/cta/src/token.json

@@ -20,12 +20,12 @@
       },
       "background": {
         "color": {
-          "value": "{ colour.black.value }"
+          "value": "{ theme.color.darkest.value}"
         }
       },
       "border": {
         "color": {
-          "value": "{ colour.black.value }"
+          "value": "{ cta.loading.background.color.value }"
         }
       }
     },
@@ -44,64 +44,64 @@
     "font": {
       "family": {
         "description": "Write description.",
-        "value": "{ asset.font.bold.name.value }"
+        "value": "{ theme.font.family.default.value }"
       }
     },
     "default": {
       "color": {
-        "value": "{ colour.white.value }"
+        "value": "{ theme.color.lightest.value }"
       },
       "background": {
         "color": {
-          "value": "{ colour.grey.darkest.value }"
+          "value": "{ theme.color.darkest.value }"
         }
       },
       "border": {
         "color": {
-          "value": "{ colour.grey.darkest.value }"
+          "value": "{ cta.default.background.color.value }"
         }
       }
     },
     "hover": {
       "background": {
         "color": {
-          "value": "{ colour.black.value }"
+          "value": "{ theme.color.darkest.value}"
         }
       },
       "border": {
         "color": {
-          "value": "{ colour.black.value }"
+          "value": "{ cta.hover.background.color.value }"
         }
       }
     },
     "focus": {
       "outline": {
         "color": {
-          "value": "{ colour.focus.value }"
+          "value": "{ theme.color.focus.value }"
         }
       }
     },
     "active": {
       "background": {
         "color": {
-          "value": "{ colour.primary.value }"
+          "value": "{ theme.color.primary.value }"
         }
       },
       "border": {
         "color": {
-          "value": "{ colour.primary.value }"
+          "value": "{ cta.active.background.color.value }"
         }
       }
     },
     "disabled": {
       "background": {
         "color": {
-          "value": "{ colour.grey.light.value }"
+          "value": "{ theme.color.disabled.value }"
         }
       },
       "border": {
         "color": {
-          "value": "{ colour.grey.light.value }"
+          "value": "{ cta.disabled.background.color.value }"
         }
       }
 

packages/library/components/detail/src/token.json

@@ -13,36 +13,36 @@
     },
     "default": {
       "color": {
-        "value": "{ colour.grey.darkest.value }"
+        "value": "{ theme.color.neutral.dark.200.value }"
       },
       "background": {
         "color": {
-          "value": "{ colour.white.value }"
+          "value": "{ theme.color.base.background.value }"
         }
       }
     },
     "hover": {
       "color": {
-        "value": "{ colour.black.value }"
+        "value": "{ theme.color.darkest.value }"
       },
       "background": {
         "color": {
-          "value": "{ colour.white.value }"
+          "value": "{ detail.default.background.color.value }"
         }
       }
     },
     "focus": {
       "color": {
-        "value": "{ colour.black.value }"
+        "value": "{ detail.hover.color.value }"
       },
       "background": {
         "color": {
-          "value": "{ colour.white.value }"
+          "value": "{ detail.default.background.color.value }"
         }
       },
       "outline": {
         "color": {
-          "value": "{ colour.focus.value }"
+          "value": "{ theme.color.focus.value }"
         }
       }
     }

packages/library/components/icon/src/token.json

@@ -26,7 +26,7 @@
     },
     "fill": {
       "description": "CSS fill value for the icon SVG",
-      "value": "currentColor"
+      "value": "{ theme.color.current.value }"
     }
   }
 }

packages/library/components/inputter/src/token.json

@@ -22,7 +22,7 @@
           "value": "exclamation-triangle"
         },
         "colour": {
-          "value": "{ colour.focus.value }"
+          "value": "{ theme.color.focus.value }"
         }
       }
     }

packages/library/css/default.css

@@ -1,7 +1,7 @@
 @import 'accessibility.css';
 
 :host {
-  font-family: $FONT_FAMILY_REGULAR;
+  font-family: $THEME_FONT_FAMILY_DEFAULT;
 }
 
 :host([hidden]) {

packages/library/css/global.css

@@ -1,12 +1,8 @@
-@import '@muons/library/build/tokens/css/mn-fonts.css';
-
 body {
   margin: 0;
-  font-family: var(--mn-font-family-regular);
+  font-family: $THEME_FONT_FAMILY_DEFAULT;
   font-size: 16px;
   overflow-x: hidden;
   line-height: 1.5;
   min-height: 100vh;
-
-  /* background: yellow; */
 }

packages/library/package.json

@@ -21,8 +21,8 @@
     "@rollup/plugin-replace": "^3.0.0",
     "@web/dev-server": "^0.1.16",
     "@web/dev-server-rollup": "^0.3.3",
-    "@web/dev-server-storybook": "^0.3.5",
-    "@web/storybook-prebuilt": "^0.1.20",
+    "@web/dev-server-storybook": "^0.4.1",
+    "@web/storybook-prebuilt": "^0.1.32",
     "autoprefixer": "^10.4.0",
     "chokidar": "^3.5.1",
     "chroma-js": "^2.1.1",

packages/library/scripts/rollup-plugins.mjs

@@ -11,26 +11,27 @@ import * as variables from '../build/tokens/es6/muon-tokens.mjs';
 const styles = fromRollup(stylesPlugin);
 const replace = fromRollup(replacePlugin);
 const litcss = fromRollup(litcssPlugin);
+export const postcssPlugins = [
+  postcssVariables({
+    variables,
+    unknown(node) {
+      node.remove(); // removing unknown or unset tokens
+    }
+  }),
+  postcssImport(),
+  postcssPreset({
+    stage: 0,
+    features: {
+      'logical-properties-and-values': false /* allowing start end values */
+    }
+  }),
+  autoprefixer({ grid: true })
+];
 
 const styleConfig = {
   mode: 'emit',
   minimize: true,
-  plugins: [
-    postcssVariables({
-      variables,
-      unknown(node) {
-        node.remove(); // removing unknown or unset tokens
-      }
-    }),
-    postcssImport(),
-    postcssPreset({
-      stage: 0,
-      features: {
-        'logical-properties-and-values': false /* allowing start end values */
-      }
-    }),
-    autoprefixer({ grid: true })
-  ]
+  plugins: postcssPlugins
 };
 
 const replaceConfig = {
@@ -43,11 +44,11 @@ const replaceConfig = {
 export const serverPlugins = [
   replace(replaceConfig),
   styles(styleConfig),
-  litcss()
+  litcss({ exclude: ['**/css/*.css', '**/dist/*.css', 'muon.min.css'] })
 ];
 
 export const rollupPlugins = [
   replacePlugin(replaceConfig),
   stylesPlugin(styleConfig),
-  litcssPlugin()
+  litcssPlugin({ exclude: ['**/css/*.css', '**/dist/*.css', 'muon.min.css'] })
 ];

packages/library/scripts/run-serve.mjs

@@ -9,11 +9,10 @@ import commandLineArgs from 'command-line-args';
 import StorybookConfig from '../storybook/server.config.mjs';
 import { getConfig } from './get-config.mjs';
 import { createComponentElementsJson, filterPathToCustomElements } from './custom-elements-json.mjs';
+import { createTokens } from './style-dictionary-create.mjs';
 
 import postcss from 'postcss';
-import autoprefixer from 'autoprefixer';
-import postcssPreset from 'postcss-preset-env';
-import postcssImport from 'postcss-import';
+import { postcssPlugins } from './rollup-plugins.mjs';
 
 import { fileURLToPath } from 'url';
 const __filename = fileURLToPath(import.meta.url);
@@ -42,13 +41,9 @@ const copyDir = async (src, dest) => {
 const createGlobalCSS = async (destination) => {
   const globalCSSDest = path.join(destination, 'muon.min.css');
   const globalCSS = await fs.readFileSync(globalCSSUrl);
-  const processedCSS = await postcss([
-    postcssImport(),
-    postcssPreset({ stage: 0 }),
-    autoprefixer({ grid: true, overrideBrowserslist: ['last 2 versions'] })
-  ]).process(globalCSS, { from: globalCSSUrl, to: globalCSSDest });
+  const processedCSS = await postcss(postcssPlugins).process(globalCSS, { from: globalCSSUrl, to: globalCSSDest });
 
-  fs.writeFileSync(globalCSSDest, processedCSS.css);
+  fs.writeFileSync(globalCSSDest, processedCSS.css, 'utf8');
 };
 
 const myConfig = commandLineArgs(myServerDefinitions, { partial: true });
@@ -59,6 +54,11 @@ const createStyleTokens = async (destination) => {
   copyDir(path.join(__filename, '..', '..', 'build'), destination);
 };
 
+const updateStyleTokens = async (destination) => {
+  await createTokens();
+  await createStyleTokens(destination);
+};
+
 const main = async () => {
   const config = await getConfig();
   const destination = config?.destination || 'dist';
@@ -75,26 +75,29 @@ const main = async () => {
   });
 
   await createStyleTokens(destination);
-
   await createComponentElementsJson();
 
-  chokidar.watch('components/**/*-component.js', { ignoreInitial: true }).on('all', async (event, path) => {
+  chokidar.watch('components/**/*-component.js', { ignoreInitial: true }).on('all', async () => {
     await createComponentElementsJson();
   });
 
   /* Internal dev mode */
   chokidar.watch(globalCSSUrl, { ignoreInitial: true }).on('all', async () => {
     await createGlobalCSS(destination);
   });
-  chokidar.watch(path.join(__filename, '..', '..', 'tokens'), { ignoreInitial: true }).on('all', createStyleTokens);
-  chokidar.watch('tokens', { ignoreInitial: true }).on('all', createStyleTokens);
+  chokidar.watch(path.join(__filename, '..', '..', 'tokens'), { ignoreInitial: true }).on('all', () => updateStyleTokens(destination));
+  chokidar.watch('tokens', { ignoreInitial: true }).on('all', () => updateStyleTokens(destination));
 
   await startDevServer({
     argv: myConfig._unknown,
     config: {
       ...StorybookConfig,
       open: !myConfig['no-open'],
-      watch: !myConfig['no-watch']
+      watch: !myConfig['no-watch'],
+      mimeTypes: {
+        '**/muon.min.css': 'text/css', // @TODO: pass global style file name from config
+        ...StorybookConfig.mimeTypes
+      }
     }
   });
 };

packages/library/scripts/style-dictionary-create.mjs

@@ -1,4 +1,5 @@
 import StyleDictionary from 'style-dictionary';
+import formatHelpers from 'style-dictionary/lib/common/formatHelpers/index.js';
 import _ from 'lodash';
 import path from 'path';
 import fs from 'fs';
@@ -30,6 +31,15 @@ const styleDictionary = async () => {
     formatter: cssFontTemplate
   });
 
+  styleDict.registerFormat({
+    name: 'es6/module',
+    formatter: function ({ dictionary, file }) {
+      return formatHelpers.fileHeader({ file }) +
+        'export default ' +
+        JSON.stringify(dictionary.tokens, null, 2) + ';';
+    }
+  });
+
   styleDict.registerTransform(stringTransform);
   styleDict.registerTransform(colorTransform);