chore: publish to lib/tokens

BREAKING CHANGE: removes color-font tokens

.eslintrc

@@ -73,7 +73,7 @@
       }
     },
     {
-      "files": ["packages/components/src/**/*.stories.{ts,tsx}"],
+      "files": ["src/components/src/**/*.stories.{ts,tsx}"],
       "rules": {
         "no-restricted-imports": [
           "error", {

.gitignore

@@ -73,8 +73,8 @@ typings/
 .vsls.json
 
 # lib folders (allowing built tokens)
-packages/*/lib/
-!packages/tokens/lib/
+lib/*
+!lib/tokens/
 storybook-static/
 
 # Yarn 2 files

.stylelintrc

@@ -21,8 +21,5 @@
     "selector-nested-pattern": "^(&(:[\\w-]+|\\.state(Hover|Focus|FocusWithin|Active)),?\\s*)+$",
     "max-nesting-depth": 1,
     "selector-class-pattern": null
-  },
-  "ignoreFiles": [
-    "packages/tokens/lib/**"
-  ]
+  }
 }

lib/tokens/css/variables.css

@@ -0,0 +1,104 @@
+:root {
+  --eds-color-neutral-100: #f3f3f3;
+  --eds-color-neutral-200: #e8e8e9;
+  --eds-color-neutral-300: #cad1d8;
+  --eds-color-neutral-400: #838c95;
+  --eds-color-neutral-500: #58636f;
+  --eds-color-neutral-600: #3c444c;
+  --eds-color-neutral-700: #21272d;
+  --eds-color-white: #fff;
+  --eds-color-black: #21272d;
+  --eds-color-alert-100: #ffebf0;
+  --eds-color-alert-200: #ffccd8;
+  --eds-color-alert-300: #fb90b0;
+  --eds-color-alert-400: #f76c96;
+  --eds-color-alert-500: #f1497c;
+  --eds-color-alert-600: #d41e52;
+  --eds-color-alert-700: #bd0044;
+  --eds-color-alert-800: #8f0134;
+  --eds-color-success-100: #ecfff5;
+  --eds-color-success-200: #b7e9ce;
+  --eds-color-success-300: #8fdcb3;
+  --eds-color-success-400: #59c88c;
+  --eds-color-success-500: #00a66a;
+  --eds-color-success-600: #008756;
+  --eds-color-success-700: #007349;
+  --eds-color-success-800: #005939;
+  --eds-color-info-100: #f1f9ff;
+  --eds-color-info-200: #b0d5ff;
+  --eds-color-info-300: #7fb9fd;
+  --eds-color-info-400: #5ca7ff;
+  --eds-color-info-500: #328efb;
+  --eds-color-info-600: #1977cd;
+  --eds-color-info-700: #0563b8;
+  --eds-color-warning-100: #fff1e9;
+  --eds-color-warning-200: #ffcba6;
+  --eds-color-warning-300: #ffb077;
+  --eds-color-warning-400: #f6924a;
+  --eds-color-warning-500: #e06c00;
+  --eds-color-warning-600: #c64600;
+  --eds-color-warning-700: #ac3400;
+  --eds-color-warning-800: #852800;
+  --eds-color-brand-100: #f7f1ff;
+  --eds-color-brand-200: #c3c0fe;
+  --eds-color-brand-300: #a7a2fe;
+  --eds-color-brand-400: #928cff;
+  --eds-color-brand-500: #766ffd;
+  --eds-color-brand-600: #574eff;
+  --eds-color-brand-700: #433bde;
+  --eds-color-brand-800: #312b9e;
+  --eds-color-yellow-100: #fdf1d0;
+  --eds-color-yellow-500: #f79d2d;
+  --eds-color-highlight-100: #ff9fec;
+  --eds-color-highlight-200: #ffbeaa;
+  --eds-color-highlight-300: #fcff00;
+  --eds-color-highlight-400: #9dffa4;
+  --eds-color-highlight-500: #00f1ff;
+  --eds-color-highlight-600: #cfc9ff;
+  --eds-size-font-h1: 3rem; /* Font size for Heading 1 sized text */
+  --eds-size-font-h2: 2.5rem; /* Font size for Heading 2 sized text */
+  --eds-size-font-h3: 2rem; /* Font size for Heading 3 sized text */
+  --eds-size-font-h4: 1.5rem; /* Font size for Heading 4 sized text */
+  --eds-size-font-h5: 1.125rem; /* Font size for Heading 5 sized text */
+  --eds-size-font-base: 16px; /* Base font size for design system in px */
+  --eds-size-font-body: 1rem; /* Default font size for body text */
+  --eds-size-font-sm: 0.875rem; /* Font size for small body text */
+  --eds-size-font-xs: 0.75rem; /* Font size for xsmall body text */
+  --eds-size-line-height-h1: 4rem; /* Line height for Heading 1 sized text */
+  --eds-size-line-height-h2: 3.5rem; /* Line height for Heading 2 sized text */
+  --eds-size-line-height-h3: 2.5rem; /* Line height for Heading 3 sized text */
+  --eds-size-line-height-h4: 2rem; /* Line height for Heading 4 sized text */
+  --eds-size-line-height-h5: 1.5rem; /* Font size for Heading 5 sized text */
+  --eds-size-line-height-body: 1.5rem; /* Default line height for body text */
+  --eds-size-line-height-sm: 1.25rem; /* Line height for small body text */
+  --eds-size-line-height-xs: 1rem; /* Line height for xsmall body text */
+  --legacy-color-gray-50: #f8f9fc;
+  --legacy-color-gray-100: #ebebec;
+  --legacy-color-gray-200: #d8d8d9;
+  --legacy-color-gray-300: #c5c5c6;
+  --legacy-color-gray-500: #9f9fa0;
+  --legacy-color-gray-700: #78797a;
+  --legacy-color-gray-1000: #3f4041;
+  --legacy-color-black: #2c2d2e;
+  --legacy-color-red-100: #f7dddd;
+  --legacy-color-red-200: #f25252;
+  --legacy-color-green-100: #e1f0e7;
+  --legacy-color-green-200: #6cc188;
+  --legacy-color-green-300: #457b57;
+  --legacy-color-yellow-200: #ffc55b;
+  --legacy-color-yellow-300: #a46900;
+  --legacy-color-yellow-400: #644c1f;
+  --legacy-color-purple-200: #7686d3;
+  --legacy-color-purple-300: #5761ba;
+  --legacy-color-purple-400: #32417c;
+  --legacy-size-font-h1: 1.5rem; /* Font size for Heading 1 sized text */
+  --legacy-size-font-h2: 1.125rem; /* Font size for Heading 2 sized text */
+  --legacy-size-font-base: 16px; /* Base font size for design system in px */
+  --legacy-size-font-body: 1rem; /* Default font size for body text */
+  --legacy-size-font-sm: 0.875rem; /* Font size for small body text */
+  --legacy-size-font-xs: 0.75rem; /* Font size for xsmall body text */
+  --legacy-size-line-height-h1: 2rem; /* Line height for Heading 1 sized text */
+  --legacy-size-line-height-body: 1.5rem; /* Default line height for body text */
+  --legacy-size-line-height-sm: 1.25rem; /* Line height for small body text */
+  --legacy-size-line-height-xs: 1rem; /* Line height for xsmall body text */
+}

lib/tokens/json/css-variables-nested.json

@@ -0,0 +1,150 @@
+{
+  "eds": {
+    "color": {
+      "neutral": {
+        "100": "var(--eds-color-neutral-100)",
+        "200": "var(--eds-color-neutral-200)",
+        "300": "var(--eds-color-neutral-300)",
+        "400": "var(--eds-color-neutral-400)",
+        "500": "var(--eds-color-neutral-500)",
+        "600": "var(--eds-color-neutral-600)",
+        "700": "var(--eds-color-neutral-700)"
+      },
+      "white": "var(--eds-color-white)",
+      "black": "var(--eds-color-black)",
+      "alert": {
+        "100": "var(--eds-color-alert-100)",
+        "200": "var(--eds-color-alert-200)",
+        "300": "var(--eds-color-alert-300)",
+        "400": "var(--eds-color-alert-400)",
+        "500": "var(--eds-color-alert-500)",
+        "600": "var(--eds-color-alert-600)",
+        "700": "var(--eds-color-alert-700)",
+        "800": "var(--eds-color-alert-800)"
+      },
+      "success": {
+        "100": "var(--eds-color-success-100)",
+        "200": "var(--eds-color-success-200)",
+        "300": "var(--eds-color-success-300)",
+        "400": "var(--eds-color-success-400)",
+        "500": "var(--eds-color-success-500)",
+        "600": "var(--eds-color-success-600)",
+        "700": "var(--eds-color-success-700)",
+        "800": "var(--eds-color-success-800)"
+      },
+      "info": {
+        "100": "var(--eds-color-info-100)",
+        "200": "var(--eds-color-info-200)",
+        "300": "var(--eds-color-info-300)",
+        "400": "var(--eds-color-info-400)",
+        "500": "var(--eds-color-info-500)",
+        "600": "var(--eds-color-info-600)",
+        "700": "var(--eds-color-info-700)"
+      },
+      "warning": {
+        "100": "var(--eds-color-warning-100)",
+        "200": "var(--eds-color-warning-200)",
+        "300": "var(--eds-color-warning-300)",
+        "400": "var(--eds-color-warning-400)",
+        "500": "var(--eds-color-warning-500)",
+        "600": "var(--eds-color-warning-600)",
+        "700": "var(--eds-color-warning-700)",
+        "800": "var(--eds-color-warning-800)"
+      },
+      "brand": {
+        "100": "var(--eds-color-brand-100)",
+        "200": "var(--eds-color-brand-200)",
+        "300": "var(--eds-color-brand-300)",
+        "400": "var(--eds-color-brand-400)",
+        "500": "var(--eds-color-brand-500)",
+        "600": "var(--eds-color-brand-600)",
+        "700": "var(--eds-color-brand-700)",
+        "800": "var(--eds-color-brand-800)"
+      },
+      "yellow": {
+        "100": "var(--eds-color-yellow-100)",
+        "500": "var(--eds-color-yellow-500)"
+      },
+      "highlight": {
+        "100": "var(--eds-color-highlight-100)",
+        "200": "var(--eds-color-highlight-200)",
+        "300": "var(--eds-color-highlight-300)",
+        "400": "var(--eds-color-highlight-400)",
+        "500": "var(--eds-color-highlight-500)",
+        "600": "var(--eds-color-highlight-600)"
+      }
+    },
+    "size": {
+      "font": {
+        "h1": "var(--eds-size-font-h1)",
+        "h2": "var(--eds-size-font-h2)",
+        "h3": "var(--eds-size-font-h3)",
+        "h4": "var(--eds-size-font-h4)",
+        "h5": "var(--eds-size-font-h5)",
+        "base": "var(--eds-size-font-base)",
+        "body": "var(--eds-size-font-body)",
+        "sm": "var(--eds-size-font-sm)",
+        "xs": "var(--eds-size-font-xs)"
+      },
+      "line-height": {
+        "h1": "var(--eds-size-line-height-h1)",
+        "h2": "var(--eds-size-line-height-h2)",
+        "h3": "var(--eds-size-line-height-h3)",
+        "h4": "var(--eds-size-line-height-h4)",
+        "h5": "var(--eds-size-line-height-h5)",
+        "body": "var(--eds-size-line-height-body)",
+        "sm": "var(--eds-size-line-height-sm)",
+        "xs": "var(--eds-size-line-height-xs)"
+      }
+    }
+  },
+  "legacy": {
+    "color": {
+      "gray": {
+        "50": "var(--legacy-color-gray-50)",
+        "100": "var(--legacy-color-gray-100)",
+        "200": "var(--legacy-color-gray-200)",
+        "300": "var(--legacy-color-gray-300)",
+        "500": "var(--legacy-color-gray-500)",
+        "700": "var(--legacy-color-gray-700)",
+        "1000": "var(--legacy-color-gray-1000)"
+      },
+      "black": "var(--legacy-color-black)",
+      "red": {
+        "100": "var(--legacy-color-red-100)",
+        "200": "var(--legacy-color-red-200)"
+      },
+      "green": {
+        "100": "var(--legacy-color-green-100)",
+        "200": "var(--legacy-color-green-200)",
+        "300": "var(--legacy-color-green-300)"
+      },
+      "yellow": {
+        "200": "var(--legacy-color-yellow-200)",
+        "300": "var(--legacy-color-yellow-300)",
+        "400": "var(--legacy-color-yellow-400)"
+      },
+      "purple": {
+        "200": "var(--legacy-color-purple-200)",
+        "300": "var(--legacy-color-purple-300)",
+        "400": "var(--legacy-color-purple-400)"
+      }
+    },
+    "size": {
+      "font": {
+        "h1": "var(--legacy-size-font-h1)",
+        "h2": "var(--legacy-size-font-h2)",
+        "base": "var(--legacy-size-font-base)",
+        "body": "var(--legacy-size-font-body)",
+        "sm": "var(--legacy-size-font-sm)",
+        "xs": "var(--legacy-size-font-xs)"
+      },
+      "line-height": {
+        "h1": "var(--legacy-size-line-height-h1)",
+        "body": "var(--legacy-size-line-height-body)",
+        "sm": "var(--legacy-size-line-height-sm)",
+        "xs": "var(--legacy-size-line-height-xs)"
+      }
+    }
+  }
+}