✨ sync all tokens with figma variables and create new tokens in code

packages/eds-tokens-build/src/index.ts

@@ -386,6 +386,7 @@ const includeTokenFilter = (
 }
 
 const COLOR_PRIMITIVE_SOURCE = `./${TOKENS_DIR}/${FILE_KEY_PRIMITIVES}/🎨 Color.Color.json`
+const COLOR_SIMPLE_SEMANTIC_SOURCE = `./${TOKENS_DIR}/${FILE_KEY_COLORS}/🗣️ Simple semantic.Mode 1.json`
 const SPACING_PRIMITIVE_SOURCE = `./${TOKENS_DIR}/${FILE_KEY_SPACING}/👾 Primitives.Value.json`
 const COLOR_LIGHT_SOURCE = `./${TOKENS_DIR}/${FILE_KEY_COLORS}/${lightColorSchemeCollectionFile}`
 const COLOR_DARK_SOURCE = `./${TOKENS_DIR}/${FILE_KEY_COLORS}/${darkColorSchemeCollectionFile}`
@@ -410,8 +411,17 @@ export function run({ outputReferences } = { outputReferences: true }) {
     outputReferences: false, // The primitives should not reference other tokens. This can always be false.
   })
 
+  const simpleSemantic = _extend({
+    source: [COLOR_PRIMITIVE_SOURCE, COLOR_SIMPLE_SEMANTIC_SOURCE],
+    filter: (token) => includeTokenFilter(token, ['Simple semantic']),
+    buildPath: colorBuildPath,
+    prefix,
+    fileName: 'simple-semantic',
+    outputReferences,
+  })
+
   const lightMode = _extend({
-    include: [COLOR_PRIMITIVE_SOURCE],
+    include: [COLOR_PRIMITIVE_SOURCE, COLOR_SIMPLE_SEMANTIC_SOURCE],
     source: [COLOR_LIGHT_SOURCE],
     filter: (token) => includeTokenFilter(token, ['Light']),
     buildPath: colorBuildPath,
@@ -422,7 +432,7 @@ export function run({ outputReferences } = { outputReferences: true }) {
   })
 
   const darkMode = _extend({
-    include: [COLOR_PRIMITIVE_SOURCE],
+    include: [COLOR_PRIMITIVE_SOURCE, COLOR_SIMPLE_SEMANTIC_SOURCE],
     source: [COLOR_DARK_SOURCE],
     filter: (token) => includeTokenFilter(token, ['Dark']),
     buildPath: colorBuildPath,
@@ -577,7 +587,7 @@ export function run({ outputReferences } = { outputReferences: true }) {
   })
 
   const lightDarkColorsVerbose = StyleDictionary.extend({
-    include: [COLOR_PRIMITIVE_SOURCE],
+    include: [COLOR_PRIMITIVE_SOURCE, COLOR_SIMPLE_SEMANTIC_SOURCE],
     source: [COLOR_LIGHT_SOURCE],
     platforms: {
       css: {
@@ -601,7 +611,7 @@ export function run({ outputReferences } = { outputReferences: true }) {
   })
 
   const lightDarkColorsTrimmed = StyleDictionary.extend({
-    include: [COLOR_PRIMITIVE_SOURCE],
+    include: [COLOR_PRIMITIVE_SOURCE, COLOR_SIMPLE_SEMANTIC_SOURCE],
     source: [COLOR_LIGHT_SOURCE],
     platforms: {
       css: {
@@ -625,6 +635,7 @@ export function run({ outputReferences } = { outputReferences: true }) {
   })
 
   primitives.buildAllPlatforms()
+  simpleSemantic.buildAllPlatforms()
   lightMode.buildAllPlatforms()
   darkMode.buildAllPlatforms()
   lightDarkColorsVerbose.buildAllPlatforms()

packages/eds-tokens/build/css/color/simple-semantic-verbose.css

@@ -0,0 +1,58 @@
+/**
+ * Do not edit directly
+ */
+
+:root {
+  --eds-color-surface-inverted-on-dark: #dcf2fff2;
+  --eds-color-surface-inverted-on-light: #000000cc;
+  --eds-color-surface-none: #ffffff00;
+  --eds-color-border-inverted-on-dark: #dcf2fff2;
+  --eds-color-border-inverted-on-light: #000000cc;
+  --eds-color-border-maximal-on-dark: #ffffff80;
+  --eds-color-border-quaternary-on-dark: #ffffff66;
+  --eds-color-border-tertiary-on-dark: #ffffff4d;
+  --eds-color-border-secondary-on-dark: #ffffff33;
+  --eds-color-border-primary-on-dark: #ffffff29;
+  --eds-color-border-none: #ffffff00;
+  --eds-color-surface-on-level-3-on-dark: var(--eds-color-slate-blue-1300);
+  --eds-color-surface-on-level-3-on-light: var(--eds-color-neutral-0);
+  --eds-color-surface-on-level-2-on-dark: var(--eds-color-slate-blue-1350);
+  --eds-color-surface-on-level-2-on-light: var(--eds-color-neutral-0);
+  --eds-color-surface-on-level-1-on-dark: var(--eds-color-slate-blue-1400);
+  --eds-color-surface-on-level-1-on-light: var(--eds-color-neutral-100);
+  --eds-color-border-disabled-on-dark: var(--eds-color-slate-grey-1100);
+  --eds-color-border-disabled-on-light: var(--eds-color-neutral-300);
+  --eds-color-border-maximal-on-light: var(--eds-color-neutral-1400);
+  --eds-color-border-quaternary-on-light: var(--eds-color-neutral-900);
+  --eds-color-border-tertiary-on-light: var(--eds-color-neutral-700);
+  --eds-color-border-secondary-on-light: var(--eds-color-neutral-500);
+  --eds-color-border-primary-on-light: var(--eds-color-neutral-300);
+  --eds-color-icon-inverted-on-dark: var(--eds-color-neutral-1500);
+  --eds-color-icon-inverted-on-light: var(--eds-color-neutral-0);
+  --eds-color-icon-disabled-on-dark: var(--eds-color-slate-grey-1000);
+  --eds-color-icon-disabled-on-light: var(--eds-color-neutral-500);
+  --eds-color-icon-maximal-on-dark: var(--eds-color-neutral-0);
+  --eds-color-icon-maximal-on-light: var(--eds-color-neutral-1300);
+  --eds-color-icon-quaternary-on-dark: var(--eds-color-slate-grey-900);
+  --eds-color-icon-quaternary-on-light: var(--eds-color-neutral-700);
+  --eds-color-icon-tertiary-on-dark: var(--eds-color-slate-grey-600);
+  --eds-color-icon-tertiary-on-light: var(--eds-color-neutral-900);
+  --eds-color-icon-secondary-on-dark: var(--eds-color-slate-grey-500);
+  --eds-color-icon-secondary-on-light: var(--eds-color-neutral-1100);
+  --eds-color-icon-primary-on-dark: var(--eds-color-slate-grey-400);
+  --eds-color-icon-primary-on-light: var(--eds-color-neutral-1300);
+  --eds-color-text-inverted-on-dark: var(--eds-color-neutral-1500);
+  --eds-color-text-inverted-on-light: var(--eds-color-neutral-0);
+  --eds-color-text-disabled-on-dark: var(--eds-color-slate-grey-1000);
+  --eds-color-text-disabled-on-light: var(--eds-color-neutral-500);
+  --eds-color-text-maximal-on-dark: var(--eds-color-neutral-0);
+  --eds-color-text-maximal-on-light: var(--eds-color-neutral-1300);
+  --eds-color-text-quaternary-on-dark: var(--eds-color-slate-grey-900);
+  --eds-color-text-quaternary-on-light: var(--eds-color-neutral-700);
+  --eds-color-text-tertiary-on-dark: var(--eds-color-slate-grey-600);
+  --eds-color-text-tertiary-on-light: var(--eds-color-neutral-900);
+  --eds-color-text-secondary-on-dark: var(--eds-color-slate-grey-500);
+  --eds-color-text-secondary-on-light: var(--eds-color-neutral-1100);
+  --eds-color-text-primary-on-dark: var(--eds-color-slate-grey-400);
+  --eds-color-text-primary-on-light: var(--eds-color-neutral-1300);
+}

packages/eds-tokens/build/css/index-verbose.css

@@ -1,6 +1,7 @@
 @import 'color/primitives-trimmed.css';
 @import 'color-setup.css';
+@import 'color/simple-semantic-verbose.css';
 @import 'color/colors-verbose.css';
 @import 'spacing-setup.css';
 @import 'spacing/primitives-trimmed.css';
-@import 'spacing/spacing-verbose.css';
+@import 'spacing/spacing-verbose.css';