design tokens updated

ollionorg · Oct 28, 2022 · d47c4c1 · d47c4c1
1 parent bb04339
commit d47c4c1
Show file tree

Hide file tree

Showing 12 changed files with 2,819 additions and 801 deletions.
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -1,10 +1,8 @@
 const litcss = require("rollup-plugin-postcss-lit");
 const path = require("path");
+
 module.exports = {
-  stories: [
-    "../stories/**/*.stories.mdx",
-    "../stories/**/*.stories.@(js|jsx|ts|tsx)",
-  ],
+  stories: ["../stories/**/*.stories.mdx", "../stories/**/*.stories.@(js|jsx|ts|tsx)"],
   addons: [
     "@storybook/addon-links",
     "@storybook/addon-essentials",
@@ -35,11 +33,7 @@ module.exports = {
       ...(config.optimizeDeps?.include ?? []),
       "@storybook/web-components",
     ];
-    config.optimizeDeps.exclude = [
-      ...(config.optimizeDeps?.exclude ?? []),
-      "lit",
-      "lit-html",
-    ];
+    config.optimizeDeps.exclude = [...(config.optimizeDeps?.exclude ?? []), "lit", "lit-html"];
     config.plugins = [
       ...config.plugins,
       {

diff --git a/.storybook/manager-head.html b/.storybook/manager-head.html
@@ -102,6 +102,7 @@
     box-shadow: unset;
     border: 1px solid #304055;
   }
+
   /* .search-result-item--label span {
 	  color: #7b93b2 !important;
 	} */

diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -6,10 +6,7 @@ import AwsIconPack from "@cldcvr/flow-aws-icon/dist/types/icon-pack";
 
 import { ConfigUtil } from "@cldcvr/flow-core/src/modules/config";
 import "@cldcvr/flow-core/src";
-import {
-  setCustomElementsManifest,
-  setCustomElements,
-} from "@storybook/web-components";
+import { setCustomElementsManifest, setCustomElements } from "@storybook/web-components";
 import "./storybook.css";
 
 export const parameters = {
@@ -36,15 +33,7 @@ export const parameters = {
         ["Introduction", "Design tokens", ["Overview"]],
         ["Overview", "Color", "Font", "Icon"],
         "Components",
-        [
-          "f-div",
-          "f-divider",
-          "f-spacer",
-          "f-button",
-          "f-icon",
-          "f-text",
-          "f-pictogram",
-        ],
+        ["f-div", "f-divider", "f-spacer", "f-button", "f-icon", "f-text", "f-pictogram"],
       ],
     },
   },
@@ -84,9 +73,7 @@ export const decorators = [
 
 async function run() {
   const customElements = await (
-    await fetch(
-      new URL("../packages/flow-core/custom-elements.json", import.meta.url)
-    )
+    await fetch(new URL("../packages/flow-core/custom-elements.json", import.meta.url))
   ).json();
 
   setCustomElementsManifest(customElements);

diff --git a/.storybook/storybook.css b/.storybook/storybook.css
@@ -1,15 +1,14 @@
+@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&family=Open+Sans:wght@300&family=Roboto:wght@100;300;400;500;700&display=swap");
 
- @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&family=Open+Sans:wght@300&family=Roboto:wght@100;300;400;500;700&display=swap");
-
- body *,body p {
-   font-family: "Montserrat", sans-serif !important;
- }
+body *,
+body p {
+  font-family: "Montserrat", sans-serif !important;
+}
 /* .sbdocs.sbdocs-preview div[id^="story--"][id*="popover"] > div,
 .sbdocs.sbdocs-preview div[id^="story--"][id*="inline"] > div {
   min-height: 600px !important;
 } */
 
-
 span.token.tag {
   font-family: var(--flow-code-font);
 }
@@ -39,9 +38,9 @@ span.token.tag {
 .docs-story {
   background-color: #131920 !important;
 }
-.docs-story .css-11xgcgt{
-	background:transparent;
-} 
+.docs-story .css-11xgcgt {
+  background: transparent;
+}
 .sbdocs-preview {
   background-color: var(--color-border-default) !important;
 }
@@ -170,17 +169,17 @@ body {
 }
 
 code {
-    background-color: var(--color-neutral-default) !important;
-    color: var(--color-surface-default) !important;
-    border: none !important;
-    font-weight: 500 !important;
-    border-radius: 4px;
-    font-size: 14px !important;
-    padding: 4px 8px;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    font-family: var(--flow-code-font) !important;
+  background-color: var(--color-neutral-default) !important;
+  color: var(--color-surface-default) !important;
+  border: none !important;
+  font-weight: 500 !important;
+  border-radius: 4px;
+  font-size: 14px !important;
+  padding: 4px 8px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--flow-code-font) !important;
 }
 
 .custom-table {
@@ -323,3 +322,6 @@ code {
   margin-left: 10px !important;
 }
 
+.width-set {
+  width: 50px !important;
+}