@tacc/core-styles 2.31.0 → 2.32.0

package/src/lib/_imports/settings/color--docs.css

@@ -1,7 +1,5 @@
-/* Load accent colors without scope */
-@import url("../settings/color.accent--purple.css");
+@import url("../settings/color.accent.css");
 
 /* Set scope for accent colors */
-/* Override accent colors from base */
 @custom-selector :--light-context-safe
   :root;

package/src/lib/_imports/settings/color--portal.css

@@ -1,16 +1,18 @@
-/* Load accent colors without scope */
-@import url("../settings/color.accent--purple.css");
+@import url("../settings/color.accent.css");
+
+@design-tokens url('../../tokens/v2.json') format('style-dictionary3');
 
 /* Set scope for accent colors */
-/* Override accent colors from base */
 @custom-selector :--light-context-safe
   :root;
 
 /* Override other colors from base */
 /* FAQ: Updating portal colors was delayed (to reduce complexity of TUP redesign) */
 :root {
-  /* TODO: Update clients to use --global-color-accent--xx-light instead */
-  --global-color-accent--alt: #d2cce7;
-  /* TODO: Update clients to use --global-color-accent--x-light instead */
-  --global-color-accent--weak: #6039cc40; /* similar to #E3D7FD on #f4f4f4 */
+  /* DEPRECATED */
+  --global-color-accent--alt: var(--global-color-accent--xx-light);
+  --global-color-accent--weak: var(--global-color-accent--x-light);
+  --global-color-success--weak: rgb( from design-token('color.success.medium') r g b / 0.5);
+  --global-color-warning--weak: rgb( from design-token('color.warning.medium') r g b / 0.5);
+  --global-color-danger--weak: rgb( from design-token('color.danger.medium') r g b / 0.5);
 }

package/src/lib/_imports/settings/color.accent.css

@@ -0,0 +1,25 @@
+@design-tokens url('../../tokens/v2.json') format('style-dictionary3');
+
+/* Accent */
+:--dark-context-safe {
+  --global-color-accent--xxx-light: #ffffff; /* DEPRECATED */
+  --global-color-accent--xx-light: #dfeafe;
+  --global-color-accent--x-light: design-token('color.v2.blue.light-2x');
+  --global-color-accent--light: design-token('color.v2.blue.light-x');
+  --global-color-accent--normal: design-token('color.v2.blue.light');
+  --global-color-accent--dark: design-token('color.v2.blue.medium');
+  --global-color-accent--x-dark: design-token('color.v2.blue.dark');
+  --global-color-accent--xx-dark: design-token('color.v2.blue.dark-x');
+  --global-color-accent--xxx-dark: design-token('color.v2.blue.dark-2x');
+}
+:--light-context-safe {
+  --global-color-accent--xxx-light: #dfeafe; /* DEPRECATED */
+  --global-color-accent--xx-light: design-token('color.v2.blue.light-2x');
+  --global-color-accent--x-light: design-token('color.v2.blue.light-x');
+  --global-color-accent--light: design-token('color.v2.blue.light');
+  --global-color-accent--normal: design-token('color.v2.blue.medium');
+  --global-color-accent--dark: design-token('color.v2.blue.dark');
+  --global-color-accent--x-dark: design-token('color.v2.blue.dark-x');
+  --global-color-accent--xx-dark: design-token('color.v2.blue.dark-2x');
+  --global-color-accent--xxx-dark: #000a22;
+}

package/src/lib/_imports/settings/color.accent.v3.css

@@ -0,0 +1,25 @@
+@design-tokens url('../../tokens/v3.json') format('style-dictionary3');
+
+/* Accent */
+:--dark-context-safe {
+  --global-color-accent--xxx-light: #ffffff; /* DEPRECATED */
+  --global-color-accent--xx-light: #ffffff;
+  --global-color-accent--x-light: design-token('colors.accent.1.light-2x');
+  --global-color-accent--light: design-token('colors.accent.1.light-x');
+  --global-color-accent--normal: design-token('colors.accent.1.light');
+  --global-color-accent--dark: design-token('colors.accent.1.medium');
+  --global-color-accent--x-dark: design-token('colors.accent.1.dark');
+  --global-color-accent--xx-dark: design-token('colors.accent.1.dark-x');
+  --global-color-accent--xxx-dark: design-token('colors.accent.1.dark-2x');
+}
+:--light-context-safe {
+  --global-color-accent--xxx-light: #ffffff; /* DEPRECATED */
+  --global-color-accent--xx-light: design-token('colors.accent.1.light-2x');
+  --global-color-accent--x-light: design-token('colors.accent.1.light-x');
+  --global-color-accent--light: design-token('colors.accent.1.light');
+  --global-color-accent--normal: design-token('colors.accent.1.medium');
+  --global-color-accent--dark: design-token('colors.accent.1.dark');
+  --global-color-accent--x-dark: design-token('colors.accent.1.dark-x');
+  --global-color-accent--xx-dark: design-token('colors.accent.1.dark-2x');
+  --global-color-accent--xxx-dark: #000000;
+}

package/src/lib/_imports/settings/color.css

@@ -1,3 +1,5 @@
+@design-tokens url('../../tokens/v2.json') format('style-dictionary3');
+
 /* SETTINGS: Color */
 
 /* Usage: `var(--global-color-primary--normal)` */
@@ -9,9 +11,7 @@
     --weak:     transparent instance
     --(…)light: lighter value
     --(…)dark:  darker value
-    --(…)rgb:   "R, G, B" value partial (ex. usage: `rgba(var(--...-rgb), 0.5)`)
 */
-/* SEE: https://huetone.ardov.me/?palette=N4IgdghgtgpiBcIAqBBAwmkAaEALArjAM4IDaoksCIADgPYBOALhADYC02IAxna4yXikQAYgBmEMQBYxYruICMMAEZiAJvJgBmNQHZ18tQFZVs%2BRC0AOXTA04RuyzJiX5ANgAMWgJzdu8nQVLb2V5ACZLBQ83N3klD24pfwBdAF8sCmg4RAg-GDAmThxefgZBYXEtMX04ezUxGEla0W4INXrmkQhc-Tl7SzcIGDN7Dy8fb3kxsLCYqY8FBS0tKbCFMK0PeY8IGZA0jPAs6iIYXjA1CAYATyKePgEyUUsPF5f5N9et%2BzFuMTczpojHpuN9RMZlEZdP5%2BrpdFIjCt7EYFFItBEAujuAo%2Bs8vu9%2BvitgdMlREEwYMwAJZXW5cEqPIR4z4fImafQ4sEiZQKNQKbidbxhPzcIzuBQWXzyKTRNRuVz2JTLLQKVkswksklHMkgKlgMR0O4MspPESfAnMr5qq0-GR2wy6PR6eS6Dyu13Spxe8IzX3Wi1mtlayjZECXMAAc0pRoeJqZgfVloD5q5vxgUjUoR%2BrTE3lV9lsSUW8m4GwgXnk3nRymi-q5Kf26VJoYA7lcwHqIzHSuUk-W2RqbaJ1GIPGokcPbJYA2Iwsp0boS2pvLp%2BZXvG5RxA6zvg8dEER8HkiERu4yKg3B8mB6JlJJLGoYaIq-9uHZRFFqhBJvYdAKheE8qWEYuIJkOYHvHuOowAAHkwDAQGecYXjeEH9om4geP8IwtGEmYSAEYjAdI4RGCYPJxPC34-n2u6pMkOBMHQYDEE8UAQDB7CsFSEa4EwXAwYJXE8XxAmcdxvH8Tg4kiVJIASaJOBgIw7GsFwlwMAA1gJ7Aadp0mcXpYmGVc2lpEAA */
 
 :root {
 
@@ -19,109 +19,94 @@
   /* FAQ: Primary colors of an app (neutral text, borders, backgrounds) */
   /* IDEA: Rename these from `primary` to `neutral` */
 
-  --global-color-primary--xx-light: #FFFFFF;
-    --global-color-primary--xx-light-rgb: 255, 255, 255;
-  --global-color-primary--x-light: #F4F4F4;
-    --global-color-primary--x-light-rgb: 244, 244, 244;
-  --global-color-primary--light: #D7D7D7;
-    --global-color-primary--light-rgb: 198, 198, 198;
-  --global-color-primary--normal: #AFAFAF;
-    --global-color-primary--normal-rgb: 175, 175, 175;
-  --global-color-primary--dark: #707070;
-    --global-color-primary--dark-rgb: 112, 112, 112;
-  --global-color-primary--x-dark: #484848;
-    --global-color-primary--x-dark-rgb: 72, 72, 72;
-  --global-color-primary--xx-dark: #222222;
-    --global-color-primary--xx-dark-rgb: 34, 34, 34;
+  --global-color-primary--xx-light: design-token('color.gray.light-2x');
+  --global-color-primary--x-light: design-token('color.gray.light-x');
+  --global-color-primary--light: design-token('color.gray.light');
+  --global-color-primary--normal: design-token('color.gray.medium');
+  --global-color-primary--dark: design-token('color.gray.dark');
+  --global-color-primary--x-dark: design-token('color.gray.dark-x');
+  --global-color-primary--xx-dark: design-token('color.gray.dark-2x');
   --global-color-primary--xxx-dark: #000000;
-    --global-color-primary--xxx-dark-rgb: 0, 0, 0;
 
 
 
   /* Accent */
 
-  --global-color-accent--xxx-light: #dfeafe;
-  --global-color-accent--xx-light: #caddfe;
-  --global-color-accent--x-light: #AAC7FF;
-  --global-color-accent--light: #86aeff;
-  --global-color-accent--normal: #003399;
-  --global-color-accent--dark: #002266;
-  --global-color-accent--x-dark: #001133;
-  --global-color-accent--xx-dark: #021230;
-  --global-color-accent--xxx-dark: #000a22;
+  --global-color-accent--xxx-light: #dfeafe; /* DEPRECATED */
+  --global-color-accent--xx-light: design-token('color.v2.blue.light-2x');
+  --global-color-accent--x-light: design-token('color.v2.blue.light-x');
+  --global-color-accent--light: design-token('color.v2.blue.light');
+  --global-color-accent--normal: design-token('color.v2.blue.medium');
+  --global-color-accent--dark: design-token('color.v2.blue.dark');
+  --global-color-accent--x-dark: design-token('color.v2.blue.dark-x');
+  --global-color-accent--xx-dark: design-token('color.v2.blue.dark-2x');
+  --global-color-accent--xxx-dark: #000a22; /* DEPRECATED */
+
+  --global-color-secondary--xx-light: design-token('color.v2.gold.light-2x');
+  --global-color-secondary--x-light: design-token('color.v2.gold.light-x');
+  --global-color-secondary--light: design-token('color.v2.gold.light');
+  --global-color-secondary--normal: design-token('color.v2.gold.medium');
+  --global-color-secondary--dark: design-token('color.v2.gold.dark');
+  --global-color-secondary--x-dark: design-token('color.v2.gold.dark-x');
+  --global-color-secondary--xx-dark: design-token('color.v2.gold.dark-2x');
+
+  --global-color-tertiary--xx-light: design-token('color.v2.teal.light-2x');
+  --global-color-tertiary--x-light: design-token('color.v2.teal.light-x');
+  --global-color-tertiary--light: design-token('color.v2.teal.light');
+  --global-color-tertiary--normal: design-token('color.v2.teal.medium');
+  --global-color-tertiary--dark: design-token('color.v2.teal.dark');
+  --global-color-tertiary--x-dark: design-token('color.v2.teal.dark-x');
+  --global-color-tertiary--xx-dark: design-token('color.v2.teal.dark-2x');
 
   /* DEPRECATED */
-  /* TODO: Do not use these in TUP CMS (Snippet) CSS */
   --global-color-accent--secondary: var(--global-color-secondary--normal);
   --global-color-accent--tertiary: var(--global-color-tertiary--normal);
 
-  --global-color-secondary--xx-light: #fcf6ec;
-  --global-color-secondary--x-light: #e5d7c0;
-  --global-color-secondary--light: #d5b57c; /* from designer */
-  --global-color-secondary--normal: #877453; /* from designer */
-  --global-color-secondary--dark: #514328;
-  --global-color-secondary--x-dark: #332C1F; /* from designer */
-  /* HELP: Where is this used? Not Core-Styles nor TACC CMS global snippets… */
-  --global-color-secondary--xxx-dark: var(--global-color-secondary--x-dark);
-
-  --global-color-tertiary--xx-light: #e7f1f0; /* from designer */
-  --global-color-tertiary--x-light: #b1d1ce;
-  --global-color-tertiary--light: #92ccc5;
-  --global-color-tertiary--normal: #61A39C; /* from designer */
-  --global-color-tertiary--dark: #406d68;
-  --global-color-tertiary--x-dark: #1E3331; /* from designer */
-  /* HELP: Where is this used? Not Core-Styles nor TACC CMS global snippets… */
-  --global-color-tertiary--xxx-dark: var(--global-color-tertiary--x-dark);
 
+  /* State */
 
+  --global-color-info--x-light: design-token('color.info.light-x');
+  --global-color-info--light: design-token('color.info.light');
+  --global-color-info--normal: design-token('color.info.medium');
+  --global-color-info--dark: design-token('color.info.dark');
+  --global-color-info--x-dark: design-token('color.info.dark-x');
+
+  --global-color-danger--x-light: design-token('color.danger.light-x');
+  --global-color-danger--light: design-token('color.danger.light');
+  --global-color-danger--normal: design-token('color.danger.medium');
+  --global-color-danger--dark: design-token('color.danger.dark');
+  --global-color-danger--x-dark: design-token('color.danger.dark-x');
+
+  --global-color-warning--x-light: design-token('color.warning.light-x');
+  --global-color-warning--light: design-token('color.warning.light');
+  --global-color-warning--normal: design-token('color.warning.medium');
+  --global-color-warning--dark: design-token('color.warning.dark');
+  --global-color-warning--x-dark: design-token('color.warning.dark-x');
+
+  --global-color-success--x-light: design-token('color.success.light-x');
+  --global-color-success--light: design-token('color.success.light');
+  --global-color-success--normal: design-token('color.success.medium');
+  --global-color-success--dark: design-token('color.success.dark');
+  --global-color-success--x-dark: design-token('color.success.dark-x');
+
+  --global-color-extra--x-light: design-token('color.extra.light-x');
+  --global-color-extra--light: design-token('color.extra.light');
+  --global-color-extra--normal: design-token('color.extra.medium');
+  --global-color-extra--dark: design-token('color.extra.dark');
+  --global-color-extra--x-dark: design-token('color.extra.dark-x');
 
-  /* State */
+  /* DEPRECATED */
+  --global-color-info--weak: rgb( from design-token('color.info.medium') r g b / 0.125 );
+  --global-color-danger--weak: rgb( from design-token('color.danger.medium') r g b / 0.125 );
+  --global-color-warning--weak: rgb( from design-token('color.warning.medium') r g b / 0.125 );
+  --global-color-success--weak: rgb( from design-token('color.success.medium') r g b / 0.125 );
+  --global-color-extra--weak: rgb( from design-token('color.extra.medium') r g b / 0.125 );
 
-  --global-color-info--x-light: var(--global-color-primary--x-light);
-  --global-color-info--light: var(--global-color-primary--light);
-  --global-color-info--normal: var(--global-color-primary--dark);
-    --global-color-info--normal-rgb: var(--global-color-primary--dark-rgb);
-  --global-color-info--dark: var(--global-color-primary--x-dark);
-  --global-color-info--x-dark: var(--global-color-primary--xx-dark);
-
-  --global-color-danger--x-light: #fce4db; /* from designer */
-  --global-color-danger--light: #fcaf91;
-  --global-color-danger--normal: #ed4c11; /* from designer */
-    --global-color-danger--normal-rgb: 237, 76, 17;
-  --global-color-danger--dark: #c23a03;
-  --global-color-danger--x-dark: #932b06;
-
-  --global-color-warning--x-light: #FDF0D3; /* from designer */
-  --global-color-warning--light: #fed880;
-  --global-color-warning--normal: #F2B327; /* from designer */
-    --global-color-warning--normal-rgb: 242, 179, 39;
-  --global-color-warning--dark: #cd971c;
-  --global-color-warning--x-dark: #996f0a;
-
-  --global-color-success--x-light: #baf8dc; /* from designer */
-  --global-color-success--light: #93f6cd;
-  --global-color-success--normal: #10f7a9; /* from designer */
-    --global-color-success--normal-rgb: 16, 247, 169;
-  --global-color-success--dark: #3dce92;
-  --global-color-success--x-dark: #26885f;
-
-  --global-color-extra--x-light: #f0f6ff; /* from designer */
-  --global-color-extra--light: #b4d0f9;
-  --global-color-extra--normal: #3f85f4; /* from designer */
-    --global-color-extra--normal-rgb: 63, 133, 244;
-  --global-color-extra--dark: #255bb1;
-  --global-color-extra--x-dark: #174a99;
-
-  --global-color-info--weak: rgba( var(--global-color-info--normal-rgb), 0.125 );
-  --global-color-danger--weak: rgba( var(--global-color-danger--normal-rgb), 0.125 );
-  --global-color-warning--weak: rgba( var(--global-color-warning--normal-rgb), 0.125 );
-  --global-color-success--weak: rgba( var(--global-color-success--normal-rgb), 0.125 );
-  --global-color-extra--weak: rgba( var(--global-color-extra--normal-rgb), 0.125 );
 
 
   /* Generic */
 
-  --global-color-background--app: var(--global-color-primary--xx-light);
+  --global-color-background--app: design-token('color.gray.light-2x');
 
 
 

package/src/lib/_imports/settings/color.v3.css

@@ -0,0 +1,118 @@
+@design-tokens url('../../tokens/v3.json') format('style-dictionary3');
+
+/* SETTINGS: Color */
+
+/* Usage: `var(--global-color-primary--normal)` */
+/* SEE: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties */
+
+/* Modifers
+    --normal:   standard color
+    --alt:      alternate color
+    --weak:     transparent instance
+    --(…)light: lighter value
+    --(…)dark:  darker value
+*/
+
+:root {
+
+  /* Neutral */
+  /* FAQ: Primary colors of an app (neutral text, borders, backgrounds) */
+  /* IDEA: Rename these from `primary` to `neutral` */
+
+  --global-color-primary--xx-light: design-token('color.gray.light-2x');
+  --global-color-primary--x-light: design-token('color.gray.light-x');
+  --global-color-primary--light: design-token('color.gray.light');
+  --global-color-primary--normal: design-token('color.gray.medium');
+  --global-color-primary--dark: design-token('color.gray.dark');
+  --global-color-primary--x-dark: design-token('color.gray.dark-x');
+  --global-color-primary--xx-dark: design-token('color.gray.dark-2x');
+  --global-color-primary--xxx-dark: #000000;
+
+
+
+  /* Accent */
+
+  --global-color-accent--xxx-light: #ffffff; /* DEPRECATED */
+  --global-color-accent--xx-light: design-token('colors.accent.1.light-2x');
+  --global-color-accent--x-light: design-token('colors.accent.1.light-x');
+  --global-color-accent--light: design-token('colors.accent.1.light');
+  --global-color-accent--normal: design-token('colors.accent.1.medium');
+  --global-color-accent--dark: design-token('colors.accent.1.dark');
+  --global-color-accent--x-dark: design-token('colors.accent.1.dark-x');
+  --global-color-accent--xx-dark: design-token('colors.accent.1.dark-2x');
+  --global-color-accent--xxx-dark: #000000; /* DEPRECATED */
+
+  --global-color-secondary--xx-light: design-token('colors.accent.2.light-2x');
+  --global-color-secondary--x-light: design-token('colors.accent.2.light-x');
+  --global-color-secondary--light: design-token('colors.accent.2.light');
+  --global-color-secondary--normal: design-token('colors.accent.2.medium');
+  --global-color-secondary--dark: design-token('colors.accent.2.dark');
+  --global-color-secondary--x-dark: design-token('colors.accent.2.dark-x');
+  --global-color-secondary--xx-dark: design-token('colors.accent.2.dark-2x');
+  --global-color-tertiary--xx-light: design-token('colors.accent.3.light-2x');
+
+  --global-color-tertiary--x-light: design-token('colors.accent.3.light-x');
+  --global-color-tertiary--light: design-token('colors.accent.3.light');
+  --global-color-tertiary--normal: design-token('colors.accent.3.medium');
+  --global-color-tertiary--dark: design-token('colors.accent.3.dark');
+  --global-color-tertiary--x-dark: design-token('colors.accent.3.dark-x');
+  --global-color-tertiary--xx-dark: design-token('colors.accent.3.dark-2x');
+
+  /* DEPRECATED */
+  --global-color-accent--secondary: var(--global-color-secondary--normal);
+  --global-color-accent--tertiary: var(--global-color-tertiary--normal);
+
+  /* State */
+
+  --global-color-info--x-light: design-token('color.info.light-x');
+  --global-color-info--light: design-token('color.info.light');
+  --global-color-info--normal: design-token('color.info.medium');
+  --global-color-info--dark: design-token('color.info.dark');
+  --global-color-info--x-dark: design-token('color.info.dark-x');
+
+  --global-color-danger--x-light: design-token('color.danger.light-x');
+  --global-color-danger--light: design-token('color.danger.light');
+  --global-color-danger--normal: design-token('color.danger.medium');
+  --global-color-danger--dark: design-token('color.danger.dark');
+  --global-color-danger--x-dark: design-token('color.danger.dark-x');
+
+  --global-color-warning--x-light: design-token('color.warning.light-x');
+  --global-color-warning--light: design-token('color.warning.light');
+  --global-color-warning--normal: design-token('color.warning.medium');
+  --global-color-warning--dark: design-token('color.warning.dark');
+  --global-color-warning--x-dark: design-token('color.warning.dark-x');
+
+  --global-color-success--x-light: design-token('color.success.light-x');
+  --global-color-success--light: design-token('color.success.light');
+  --global-color-success--normal: design-token('color.success.medium');
+  --global-color-success--dark: design-token('color.success.dark');
+  --global-color-success--x-dark: design-token('color.success.dark-x');
+
+  --global-color-extra--x-light: design-token('color.extra.light-x');
+  --global-color-extra--light: design-token('color.extra.light');
+  --global-color-extra--normal: design-token('color.extra.medium');
+  --global-color-extra--dark: design-token('color.extra.dark');
+  --global-color-extra--x-dark: design-token('color.extra.dark-x');
+
+  /* DEPRECATED */
+  --global-color-info--weak: rgb( from design-token('color.info.medium') r g b / 0.125 );
+  --global-color-danger--weak: rgb( from design-token('color.danger.medium') r g b / 0.125 );
+  --global-color-warning--weak: rgb( from design-token('color.warning.medium') r g b / 0.125 );
+  --global-color-success--weak: rgb( from design-token('color.success.medium') r g b / 0.125 );
+  --global-color-extra--weak: rgb( from design-token('color.extra.medium') r g b / 0.125 );
+
+
+
+  /* Generic */
+
+  --global-color-background--app: design-token('color.gray.light-2x');
+
+
+
+  /* Link */
+  /* DEPRECATED */
+  /* TODO: Rely on :--light-context and :--dark-context instead */
+
+  --global-color-link-on-light--normal: design-token('colors.accent.1.light-2x');
+  --global-color-link-on-dark--normal: design-token('colors.accent.1.light-2x');
+}

package/src/lib/_imports/settings/font/_font--weight.hbs

@@ -1,8 +1,7 @@
 <dt>{{ name }}</dt>
 <dd>
   <p>
-    <kbd>var(--{{ modifier }})</kbd> or
-    <kbd>var(--global-font-weight--{{ modifier }})</kbd>
+    <kbd>var(--{{ modifier }})</kbd>
   </p>
   <article class="demo-weight--{{ modifier }}  demo-grid demo-grid--square demo-grid--boxes">
     <figure class="demo-family--sans">

package/src/lib/_imports/settings/font.css

@@ -31,13 +31,27 @@ Styleguide Settings.CustomProperties.Font
   --icon: "Hiragino Sans", monospace;
 
   /* Weight */
-  /* https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight */
+  /* https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight#common_weight_name_mapping */
+  --thin: 100;
+  --hairline: 100;
+  --extra-light: 200;
+  --ultra-light: 200;
+  --light: 300;
+  --normal: 400;
   --regular: 400;
   --medium: 500;
+  --semi-bold: 600;
+  --demi-bold: 600;
   --bold: 700;
-  --black: 800;
+  --extra-bold: 800;
+  --ultra-bold: 800;
+  --black: 900;
+  --heavy: 900;
+  --extra-black: 950;
+  --ultra-black: 950;
 }
 
+/* DEPRECATED */
 /* For backwards-compatibility with v0, v1, v2.23 */
 :root {
   --global-font-family--sans--cms: var(--sans--cms);

package/src/lib/_imports/tools/x-breadcrumbs.css

@@ -41,7 +41,7 @@ Styleguide Tools.Mixins.Breadcrumbs
   margin-top: unset;
 }
 @define-mixin x-breadcrumbs-major--list {
-  font-weight: var(--global-font-weight--medium, 500);
+  font-weight: var(--medium, 500);
 }
 
 @define-mixin x-breadcrumbs__list {
@@ -60,7 +60,7 @@ Styleguide Tools.Mixins.Breadcrumbs
 }
 @define-mixin x-breadcrumbs-major__list-item {
   &:last-child {
-    font-weight: var(--global-font-weight--bold, 700);
+    font-weight: var(--bold, 700);
   }
 }
 

package/src/lib/_imports/tools/x-overlay.css

@@ -8,21 +8,15 @@ Colored boxes that appear atop a large image (like a banner).
 
 Styleguide Tools.Mixins.Overlay
 */
+@design-tokens url('../../tokens/v2.json') format('style-dictionary3');
 
 %x-overlay--curtain {
-  --color-text: inherit;
-  --color-bkgd-rgb: var(--global-color-primary--normal);
-
-  color: var(--color-text);
-  background-color: rgba(var(--color-bkgd-rgb), 0.65);
+  color: inherit;
+  background-color: rgb( from design-token('color.gray.medium') r g b / 0.65 );
   backdrop-filter: blur(6px);
-  -webkit-backdrop-filter: blur(6px);
 }
 
 %x-overlay--callout {
-  --color-text: inherit;
-  --color-bkgd-rgb: var(--global-color-primary--normal);
-
-  color: var(--color-text);
-  background-color: rgba(var(--color-bkgd-rgb), 0.90);
+  color: inherit;
+  background-color: rgb( from design-token('color.gray.medium') r g b / 0.90 );
 }

package/src/lib/_imports/trumps/s-header.bootstrap.css

@@ -8,6 +8,7 @@ Markup: s-header.html
 
 Styleguide Trumps.Scopes.Header.Bootstrap
 */
+@design-tokens url('../../tokens/v2.json') format('style-dictionary3');
 
 .s-header .dropdown-item {
   color: #212529;
@@ -16,7 +17,7 @@ Styleguide Trumps.Scopes.Header.Bootstrap
 .s-header .dropdown-item:hover {
   color: #16181b;
   text-decoration: none;
-  background-color: rgba(var(--global-color-primary--light-rgb), 0.3);
+  background-color: rgb( from design-token('color.gray.light') r g b / 0.3 );
 }
 .s-header .dropdown-item.active,
 .s-header .dropdown-item:active {

package/src/lib/_imports/trumps/s-hero-banner.css

@@ -1,4 +1,5 @@
 @import url("../tools/media-queries.css");
+@design-tokens url('../../tokens/v2.json') format('style-dictionary3');
 
 /* Banner */
 /* Banner: Container */
@@ -37,7 +38,7 @@
 
 .s-home-banner article {
   color: var(--global-color-primary--xx-dark);
-  background-color: rgba(var(--global-color-primary--xx-light-rgb), 0.9);
+  background-color: rgb( from design-token('color.gray.light-2x') r g b / 0.9 );
   z-index: 2;
   padding: 24px 84px 36px 48px;
   font-weight: bold;

package/src/lib/_imports/trumps/s-system-specs.css

@@ -16,7 +16,7 @@ Styleguide Trumps.Scopes.SystemSpecs
 
 .s-system-specs {
   font-size: var(--global-font-size--small);
-  font-weight: var(--global-font-weight--medium);
+  font-weight: var(--medium);
 }
 
 

package/src/lib/tokens/ds.json

@@ -0,0 +1 @@
+{"colors":{"neutral":{"light-2x":{"value":"#ffffff","type":"color"},"light-x":{"value":"#f4f4f4","type":"color"},"light":{"value":"#d7d7d7","type":"color"},"medium":{"value":"#afafaf","type":"color"},"dark":{"value":"#707070","type":"color"},"dark-x":{"value":"#484848","type":"color"},"dark-2x":{"value":"#222222","type":"color"}},"accent":{"1":{"light-2x":{"value":"#afd9ee","type":"color"},"light-x":{"value":"#84c9f2","type":"color"},"light":{"value":"#5aace4","type":"color"},"medium":{"value":"#337ab7","type":"color"},"dark":{"value":"#286090","type":"color"},"dark-x":{"value":"#204d74","type":"color"},"dark-2x":{"value":"#122b40","type":"color"}},"2":{"light-2x":{"value":"#cdf9f4","type":"color"},"light-x":{"value":"#a5e4dd","type":"color"},"light":{"value":"#84cec6","type":"color"},"medium":{"value":"#58a19b","type":"color"},"dark":{"value":"#37817b","type":"color"},"dark-x":{"value":"#2d4f4c","type":"color"},"dark-2x":{"value":"#ffffff","type":"color"}},"3":{"light-2x":{"value":"#ece4bf","type":"color"},"light-x":{"value":"#e7d897","type":"color"},"light":{"value":"#d4c16f","type":"color"},"medium":{"value":"#a89a5b","type":"color"},"dark":{"value":"#807649","type":"color"},"dark-x":{"value":"#554f32","type":"color"},"dark-2x":{"value":"#ffffff","type":"color"}},"4":{"light-2x":{"value":"#ffffff","type":"color"},"light-x":{"value":"#addba3","type":"color"},"light":{"value":"#74b566","type":"color"},"medium":{"value":"#449d44","type":"color"},"dark":{"value":"#398439","type":"color"},"dark-x":{"value":"#255625","type":"color"},"dark-2x":{"value":"#ffffff","type":"color"}}},"traffic":{"bad":{"light-x":{"value":"#ffffff","type":"color"},"light":{"value":"#ffffff","type":"color"},"medium":{"value":"#ffffff","type":"color"},"dark":{"value":"#ffffff","type":"color"},"dark-x":{"value":"#ffffff","type":"color"}},"warn":{"light-x":{"value":"{colors.accent.3.light-2x}","type":"color"},"light":{"value":"{colors.accent.3.light-x}","type":"color"},"medium":{"value":"{colors.accent.3.medium}","type":"color"},"dark":{"value":"{colors.accent.3.dark}","type":"color"},"dark-x":{"value":"{colors.accent.3.dark-x}","type":"color"}},"good":{"light-x":{"value":"{colors.accent.4.light-x}","type":"color"},"light":{"value":"{colors.accent.4.light}","type":"color"},"medium":{"value":"{colors.accent.4.medium}","type":"color"},"dark":{"value":"{colors.accent.4.dark}","type":"color"},"dark-x":{"value":"{colors.accent.4.dark-x}","type":"color"}},"other":{"light-x":{"value":"#ffffff","type":"color"},"light":{"value":"#ffffff","type":"color"},"medium":{"value":"#ffffff","type":"color"},"dark":{"value":"#ffffff","type":"color"},"dark-x":{"value":"#ffffff","type":"color"}}}},"spacing":{"1":{"value":8,"type":"number"},"2":{"value":16,"type":"number"},"3":{"value":24,"type":"number"},"4":{"value":32,"type":"number"},"5":{"value":40,"type":"number"},"6":{"value":48,"type":"number"},"7":{"value":56,"type":"number"},"8":{"value":64,"type":"number"},"9":{"value":72,"type":"number"},"10":{"value":80,"type":"number"},"11":{"value":88,"type":"number"},"12":{"value":96,"type":"number"},"13":{"value":104,"type":"number"},"fourth":{"value":2,"type":"number"},"half":{"value":4,"type":"number"}},"font-weight":{"100":{"value":100,"type":"number"},"200":{"value":200,"type":"number"},"300":{"value":300,"type":"number"},"400":{"value":400,"type":"number"},"500":{"value":500,"type":"number"},"600":{"value":600,"type":"number"},"700":{"value":700,"type":"number"},"800":{"value":800,"type":"number"},"900":{"value":900,"type":"number"}},"color":{"gray":{"light-2x":{"value":"{colors.neutral.light-2x}","type":"color"},"light-x":{"value":"{colors.neutral.light-x}","type":"color"},"light":{"value":"{colors.neutral.light}","type":"color"},"medium":{"value":"{colors.neutral.medium}","type":"color"},"dark":{"value":"{colors.neutral.dark}","type":"color"},"dark-x":{"value":"{colors.neutral.dark-x}","type":"color"},"dark-2x":{"value":"{colors.neutral.dark-2x}","type":"color"}},"info":{"light-x":{"value":"{colors.neutral.light-x}","type":"color"},"light":{"value":"{colors.neutral.light}","type":"color"},"medium":{"value":"{colors.neutral.dark}","type":"color"},"dark":{"value":"{colors.neutral.dark-x}","type":"color"},"dark-x":{"value":"{colors.neutral.dark-2x}","type":"color"}},"danger":{"light-x":{"value":"{colors.traffic.bad.light-x}","type":"color"},"light":{"value":"{colors.traffic.bad.light}","type":"color"},"medium":{"value":"{colors.traffic.bad.medium}","type":"color"},"dark":{"value":"{colors.traffic.bad.dark}","type":"color"},"dark-x":{"value":"{colors.traffic.bad.dark-x}","type":"color"}},"warning":{"light-x":{"value":"{colors.traffic.warn.light-x}","type":"color"},"light":{"value":"{colors.traffic.warn.light}","type":"color"},"medium":{"value":"{colors.traffic.warn.medium}","type":"color"},"dark":{"value":"{colors.traffic.warn.dark}","type":"color"},"dark-x":{"value":"{colors.traffic.warn.dark-x}","type":"color"}},"success":{"light-x":{"value":"{colors.traffic.good.light-x}","type":"color"},"light":{"value":"{colors.traffic.good.light}","type":"color"},"medium":{"value":"{colors.traffic.good.medium}","type":"color"},"dark":{"value":"{colors.traffic.good.dark}","type":"color"},"dark-x":{"value":"{colors.traffic.good.dark-x}","type":"color"}},"extra":{"light-x":{"value":"{colors.traffic.other.light-x}","type":"color"},"light":{"value":"{colors.traffic.other.light}","type":"color"},"medium":{"value":"{colors.traffic.other.medium}","type":"color"},"dark":{"value":"{colors.traffic.other.dark}","type":"color"},"dark-x":{"value":"{colors.traffic.other.dark-x}","type":"color"}},"ds":{"blue":{"light-2x":{"value":"{colors.accent.1.light-2x}","type":"color"},"light-x":{"value":"{colors.accent.1.light-x}","type":"color"},"light":{"value":"{colors.accent.1.light}","type":"color"},"medium":{"value":"{colors.accent.1.medium}","type":"color"},"dark":{"value":"{colors.accent.1.dark}","type":"color"},"dark-x":{"value":"{colors.accent.1.dark-x}","type":"color"},"dark-2x":{"value":"{colors.accent.1.dark-2x}","type":"color"}},"teal":{"light-2x":{"value":"{colors.accent.2.light-2x}","type":"color"},"light-x":{"value":"{colors.accent.2.light-x}","type":"color"},"light":{"value":"{colors.accent.2.light}","type":"color"},"medium":{"value":"{colors.accent.2.medium}","type":"color"},"dark":{"value":"{colors.accent.2.dark}","type":"color"},"dark-x":{"value":"{colors.accent.2.dark-x}","type":"color"},"dark-2x":{"value":"{colors.accent.2.dark-2x}","type":"color"}},"yellow":{"light-2x":{"value":"{colors.accent.3.light-2x}","type":"color"},"light-x":{"value":"{colors.accent.3.light-x}","type":"color"},"light":{"value":"{colors.accent.3.light}","type":"color"},"medium":{"value":"{colors.accent.3.medium}","type":"color"},"dark":{"value":"{colors.accent.3.dark}","type":"color"},"dark-x":{"value":"{colors.accent.3.dark-x}","type":"color"},"dark-2x":{"value":"{colors.accent.3.dark-2x}","type":"color"}}}},"space":{"small-2x":{"value":"{spacing.fourth}","type":"number"},"small-x":{"value":"{spacing.half}","type":"number"},"small":{"value":"{spacing.1}","type":"number"},"medium":{"value":"{spacing.2}","type":"number"},"large":{"value":"{spacing.3}","type":"number"},"large-x":{"value":"{spacing.4}","type":"number"},"large-2x":{"value":"{spacing.5}","type":"number"}},"weight":{"light":{"value":"{font-weight.300}","type":"number"},"bold":{"value":"{font-weight.700}","type":"number"},"medium":{"value":"{font-weight.500}","type":"number"},"regular":{"value":"{font-weight.400}","type":"number"},"semibold":{"value":"{font-weight.600}","type":"number"},"thin":{"value":"{font-weight.100}","type":"number"},"extralight":{"value":"{font-weight.200}","type":"number"},"extrabold":{"value":"{font-weight.800}","type":"number"},"black":{"value":"{font-weight.900}","type":"number"},"light-x":{"value":"{weight.extralight}","type":"number"},"bold-x":{"value":"{weight.extrabold}","type":"number"}}}

package/src/lib/tokens/v1.json

@@ -0,0 +1 @@
+{"colors":{"neutral":{"light-2x":{"value":"#ffffff","type":"color"},"light-x":{"value":"#f4f4f4","type":"color"},"light":{"value":"#d7d7d7","type":"color"},"medium":{"value":"#afafaf","type":"color"},"dark":{"value":"#707070","type":"color"},"dark-x":{"value":"#484848","type":"color"},"dark-2x":{"value":"#222222","type":"color"}},"accent":{"1":{"light-2x":{"value":"#e3d7fd","type":"color"},"light-x":{"value":"#d5bfff","type":"color"},"light":{"value":"#a387ed","type":"color"},"medium":{"value":"#784fe8","type":"color"},"dark":{"value":"#6039cc","type":"color"},"dark-x":{"value":"#3d189b","type":"color"},"dark-2x":{"value":"#281066","type":"color"}},"2":{"light-2x":{"value":"#ffffff","type":"color"},"light-x":{"value":"#ffffff","type":"color"},"light":{"value":"#ffffff","type":"color"},"medium":{"value":"#ffffff","type":"color"},"dark":{"value":"#ffffff","type":"color"},"dark-x":{"value":"#ffffff","type":"color"},"dark-2x":{"value":"#ffffff","type":"color"}},"3":{"light-2x":{"value":"#ffffff","type":"color"},"light-x":{"value":"#ffffff","type":"color"},"light":{"value":"#ffffff","type":"color"},"medium":{"value":"#ffffff","type":"color"},"dark":{"value":"#ffffff","type":"color"},"dark-x":{"value":"#ffffff","type":"color"},"dark-2x":{"value":"#ffffff","type":"color"}},"4":{"light-2x":{"value":"#ffffff","type":"color"},"light-x":{"value":"#ffffff","type":"color"},"light":{"value":"#ffffff","type":"color"},"medium":{"value":"#ffffff","type":"color"},"dark":{"value":"#ffffff","type":"color"},"dark-x":{"value":"#ffffff","type":"color"},"dark-2x":{"value":"#ffffff","type":"color"}}},"traffic":{"bad":{"light-x":{"value":"#fdf1f1","type":"color"},"light":{"value":"#f8c9c9","type":"color"},"medium":{"value":"#f09393","type":"color"},"dark":{"value":"#af1818","type":"color"},"dark-x":{"value":"#3c3030","type":"color"}},"warn":{"light-x":{"value":"#fdfdea","type":"color"},"light":{"value":"#f2f06f","type":"color"},"medium":{"value":"#e9e000","type":"color"},"dark":{"value":"#735911","type":"color"},"dark-x":{"value":"#3a3320","type":"color"}},"good":{"light-x":{"value":"#e7f9e5","type":"color"},"light":{"value":"#afeca7","type":"color"},"medium":{"value":"#43d130","type":"color"},"dark":{"value":"#237119","type":"color"},"dark-x":{"value":"#263824","type":"color"}},"other":{"light-x":{"value":"#f0f6ff","type":"color"},"light":{"value":"#b4d0f9","type":"color"},"medium":{"value":"#3f85f4","type":"color"},"dark":{"value":"#255bb1","type":"color"},"dark-x":{"value":"#174a99","type":"color"}}}},"spacing":{"1":{"value":8,"type":"number"},"2":{"value":16,"type":"number"},"3":{"value":24,"type":"number"},"4":{"value":32,"type":"number"},"5":{"value":40,"type":"number"},"6":{"value":48,"type":"number"},"7":{"value":56,"type":"number"},"8":{"value":64,"type":"number"},"9":{"value":72,"type":"number"},"10":{"value":80,"type":"number"},"11":{"value":88,"type":"number"},"12":{"value":96,"type":"number"},"13":{"value":104,"type":"number"},"fourth":{"value":2,"type":"number"},"half":{"value":4,"type":"number"}},"font-weight":{"100":{"value":100,"type":"number"},"200":{"value":200,"type":"number"},"300":{"value":300,"type":"number"},"400":{"value":400,"type":"number"},"500":{"value":500,"type":"number"},"600":{"value":600,"type":"number"},"700":{"value":700,"type":"number"},"800":{"value":800,"type":"number"},"900":{"value":900,"type":"number"}},"color":{"gray":{"light-2x":{"value":"{colors.neutral.light-2x}","type":"color"},"light-x":{"value":"{colors.neutral.light-x}","type":"color"},"light":{"value":"{colors.neutral.light}","type":"color"},"medium":{"value":"{colors.neutral.medium}","type":"color"},"dark":{"value":"{colors.neutral.dark}","type":"color"},"dark-x":{"value":"{colors.neutral.dark-x}","type":"color"},"dark-2x":{"value":"{colors.neutral.dark-2x}","type":"color"}},"v1":{"purple":{"light-2x":{"value":"{colors.accent.1.light-2x}","type":"color"},"light-x":{"value":"{colors.accent.1.light-x}","type":"color"},"light":{"value":"{colors.accent.1.light}","type":"color"},"medium":{"value":"{colors.accent.1.medium}","type":"color"},"dark":{"value":"{colors.accent.1.dark}","type":"color"},"dark-x":{"value":"{colors.accent.1.dark-x}","type":"color"},"dark-2x":{"value":"{colors.accent.1.dark-2x}","type":"color"}}},"info":{"light-x":{"value":"{colors.neutral.light-x}","type":"color"},"light":{"value":"{colors.neutral.light}","type":"color"},"medium":{"value":"{colors.neutral.dark}","type":"color"},"dark":{"value":"{colors.neutral.dark-x}","type":"color"},"dark-x":{"value":"{colors.neutral.dark-2x}","type":"color"}},"danger":{"light-x":{"value":"{colors.traffic.bad.light-x}","type":"color"},"light":{"value":"{colors.traffic.bad.light}","type":"color"},"medium":{"value":"{colors.traffic.bad.medium}","type":"color"},"dark":{"value":"{colors.traffic.bad.dark}","type":"color"},"dark-x":{"value":"{colors.traffic.bad.dark-x}","type":"color"}},"warning":{"light-x":{"value":"{colors.traffic.warn.light-x}","type":"color"},"light":{"value":"{colors.traffic.warn.light}","type":"color"},"medium":{"value":"{colors.traffic.warn.medium}","type":"color"},"dark":{"value":"{colors.traffic.warn.dark}","type":"color"},"dark-x":{"value":"{colors.traffic.warn.dark-x}","type":"color"}},"success":{"light-x":{"value":"{colors.traffic.good.light-x}","type":"color"},"light":{"value":"{colors.traffic.good.light}","type":"color"},"medium":{"value":"{colors.traffic.good.medium}","type":"color"},"dark":{"value":"{colors.traffic.good.dark}","type":"color"},"dark-x":{"value":"{colors.traffic.good.dark-x}","type":"color"}},"extra":{"light-x":{"value":"{colors.traffic.other.light-x}","type":"color"},"light":{"value":"{colors.traffic.other.light}","type":"color"},"medium":{"value":"{colors.traffic.other.medium}","type":"color"},"dark":{"value":"{colors.traffic.other.dark}","type":"color"},"dark-x":{"value":"{colors.traffic.other.dark-x}","type":"color"}}},"space":{"small-2x":{"value":"{spacing.fourth}","type":"number"},"small-x":{"value":"{spacing.half}","type":"number"},"small":{"value":"{spacing.1}","type":"number"},"medium":{"value":"{spacing.2}","type":"number"},"large":{"value":"{spacing.3}","type":"number"},"large-x":{"value":"{spacing.4}","type":"number"},"large-2x":{"value":"{spacing.5}","type":"number"}},"weight":{"light":{"value":"{font-weight.300}","type":"number"},"bold":{"value":"{font-weight.700}","type":"number"},"medium":{"value":"{font-weight.500}","type":"number"},"regular":{"value":"{font-weight.400}","type":"number"},"semibold":{"value":"{font-weight.600}","type":"number"},"thin":{"value":"{font-weight.100}","type":"number"},"extralight":{"value":"{font-weight.200}","type":"number"},"extrabold":{"value":"{font-weight.800}","type":"number"},"black":{"value":"{font-weight.900}","type":"number"},"light-x":{"value":"{weight.extralight}","type":"number"},"bold-x":{"value":"{weight.extrabold}","type":"number"}}}

package/src/lib/tokens/v2.json

@@ -0,0 +1 @@
+{"colors":{"neutral":{"light-2x":{"value":"#ffffff","type":"color"},"light-x":{"value":"#f4f4f4","type":"color"},"light":{"value":"#d7d7d7","type":"color"},"medium":{"value":"#afafaf","type":"color"},"dark":{"value":"#707070","type":"color"},"dark-x":{"value":"#484848","type":"color"},"dark-2x":{"value":"#222222","type":"color"}},"accent":{"1":{"light-2x":{"value":"#caddfe","type":"color"},"light-x":{"value":"#aac7ff","type":"color"},"light":{"value":"#3d6acc","type":"color"},"medium":{"value":"#003399","type":"color"},"dark":{"value":"#002266","type":"color"},"dark-x":{"value":"#001133","type":"color"},"dark-2x":{"value":"#021230","type":"color"}},"2":{"light-2x":{"value":"#fcf6ec","type":"color"},"light-x":{"value":"#e5d7c0","type":"color"},"light":{"value":"#d5b57c","type":"color"},"medium":{"value":"#877453","type":"color"},"dark":{"value":"#514328","type":"color"},"dark-x":{"value":"#332c1f","type":"color"},"dark-2x":{"value":"#ffffff","type":"color"}},"3":{"light-2x":{"value":"#e7f1f0","type":"color"},"light-x":{"value":"#b1d1ce","type":"color"},"light":{"value":"#92ccc5","type":"color"},"medium":{"value":"#61a39c","type":"color"},"dark":{"value":"#406d68","type":"color"},"dark-x":{"value":"#1e3331","type":"color"},"dark-2x":{"value":"#ffffff","type":"color"}},"4":{"light-2x":{"value":"#ffffff","type":"color"},"light-x":{"value":"#ffffff","type":"color"},"light":{"value":"#ffffff","type":"color"},"medium":{"value":"#ffffff","type":"color"},"dark":{"value":"#ffffff","type":"color"},"dark-x":{"value":"#ffffff","type":"color"},"dark-2x":{"value":"#ffffff","type":"color"}}},"traffic":{"bad":{"light-x":{"value":"#fce4db","type":"color"},"light":{"value":"#fcaf91","type":"color"},"medium":{"value":"#ed4c11","type":"color"},"dark":{"value":"#c23a03","type":"color"},"dark-x":{"value":"#932b06","type":"color"}},"warn":{"light-x":{"value":"#fdf0d3","type":"color"},"light":{"value":"#fed880","type":"color"},"medium":{"value":"#f2b327","type":"color"},"dark":{"value":"#cd971c","type":"color"},"dark-x":{"value":"#996f0a","type":"color"}},"good":{"light-x":{"value":"#baf8dc","type":"color"},"light":{"value":"#93f6cd","type":"color"},"medium":{"value":"#10f7a9","type":"color"},"dark":{"value":"#3dce92","type":"color"},"dark-x":{"value":"#26885f","type":"color"}},"other":{"light-x":{"value":"#f0f6ff","type":"color"},"light":{"value":"#b4d0f9","type":"color"},"medium":{"value":"#3f85f4","type":"color"},"dark":{"value":"#255bb1","type":"color"},"dark-x":{"value":"#174a99","type":"color"}}}},"spacing":{"1":{"value":8,"type":"number"},"2":{"value":16,"type":"number"},"3":{"value":24,"type":"number"},"4":{"value":32,"type":"number"},"5":{"value":40,"type":"number"},"6":{"value":48,"type":"number"},"7":{"value":56,"type":"number"},"8":{"value":64,"type":"number"},"9":{"value":72,"type":"number"},"10":{"value":80,"type":"number"},"11":{"value":88,"type":"number"},"12":{"value":96,"type":"number"},"13":{"value":104,"type":"number"},"fourth":{"value":2,"type":"number"},"half":{"value":4,"type":"number"}},"font-weight":{"100":{"value":100,"type":"number"},"200":{"value":200,"type":"number"},"300":{"value":300,"type":"number"},"400":{"value":400,"type":"number"},"500":{"value":500,"type":"number"},"600":{"value":600,"type":"number"},"700":{"value":700,"type":"number"},"800":{"value":800,"type":"number"},"900":{"value":900,"type":"number"}},"color":{"gray":{"light-2x":{"value":"{colors.neutral.light-2x}","type":"color"},"light-x":{"value":"{colors.neutral.light-x}","type":"color"},"light":{"value":"{colors.neutral.light}","type":"color"},"medium":{"value":"{colors.neutral.medium}","type":"color"},"dark":{"value":"{colors.neutral.dark}","type":"color"},"dark-x":{"value":"{colors.neutral.dark-x}","type":"color"},"dark-2x":{"value":"{colors.neutral.dark-2x}","type":"color"}},"v2":{"blue":{"light-x":{"value":"{colors.accent.1.light-x}","type":"color"},"light":{"value":"{colors.accent.1.light}","type":"color"},"medium":{"value":"{colors.accent.1.medium}","type":"color"},"dark":{"value":"{colors.accent.1.dark}","type":"color"},"dark-x":{"value":"{colors.accent.1.dark-x}","type":"color"},"light-2x":{"value":"{colors.accent.1.light-2x}","type":"color"},"dark-2x":{"value":"{colors.accent.1.dark-2x}","type":"color"}},"gold":{"light-2x":{"value":"{colors.accent.2.light-2x}","type":"color"},"light-x":{"value":"{colors.accent.2.light-x}","type":"color"},"light":{"value":"{colors.accent.2.light}","type":"color"},"medium":{"value":"{colors.accent.2.medium}","type":"color"},"dark":{"value":"{colors.accent.2.dark}","type":"color"},"dark-x":{"value":"{colors.accent.2.dark-x}","type":"color"},"dark-2x":{"value":"{colors.accent.2.dark-2x}","type":"color"}},"teal":{"light-2x":{"value":"{colors.accent.3.light-2x}","type":"color"},"light-x":{"value":"{colors.accent.3.light-x}","type":"color"},"light":{"value":"{colors.accent.3.light}","type":"color"},"medium":{"value":"{colors.accent.3.medium}","type":"color"},"dark":{"value":"{colors.accent.3.dark}","type":"color"},"dark-x":{"value":"{colors.accent.3.dark-x}","type":"color"},"dark-2x":{"value":"{colors.accent.3.dark-2x}","type":"color"}}},"info":{"light-x":{"value":"{colors.neutral.light-x}","type":"color"},"light":{"value":"{colors.neutral.light}","type":"color"},"medium":{"value":"{colors.neutral.dark}","type":"color"},"dark":{"value":"{colors.neutral.dark-x}","type":"color"},"dark-x":{"value":"{colors.neutral.dark-2x}","type":"color"}},"danger":{"light-x":{"value":"{colors.traffic.bad.light-x}","type":"color"},"light":{"value":"{colors.traffic.bad.light}","type":"color"},"medium":{"value":"{colors.traffic.bad.medium}","type":"color"},"dark":{"value":"{colors.traffic.bad.dark}","type":"color"},"dark-x":{"value":"{colors.traffic.bad.dark-x}","type":"color"}},"warning":{"light-x":{"value":"{colors.traffic.warn.light-x}","type":"color"},"light":{"value":"{colors.traffic.warn.light}","type":"color"},"medium":{"value":"{colors.traffic.warn.medium}","type":"color"},"dark":{"value":"{colors.traffic.warn.dark}","type":"color"},"dark-x":{"value":"{colors.traffic.warn.dark-x}","type":"color"}},"success":{"light-x":{"value":"{colors.traffic.good.light-x}","type":"color"},"light":{"value":"{colors.traffic.good.light}","type":"color"},"medium":{"value":"{colors.traffic.good.medium}","type":"color"},"dark":{"value":"{colors.traffic.good.dark}","type":"color"},"dark-x":{"value":"{colors.traffic.good.dark-x}","type":"color"}},"extra":{"light-x":{"value":"{colors.traffic.other.light-x}","type":"color"},"light":{"value":"{colors.traffic.other.light}","type":"color"},"medium":{"value":"{colors.traffic.other.medium}","type":"color"},"dark":{"value":"{colors.traffic.other.dark}","type":"color"},"dark-x":{"value":"{colors.traffic.other.dark-x}","type":"color"}}},"space":{"small-2x":{"value":"{spacing.fourth}","type":"number"},"small-x":{"value":"{spacing.half}","type":"number"},"small":{"value":"{spacing.1}","type":"number"},"medium":{"value":"{spacing.2}","type":"number"},"large":{"value":"{spacing.3}","type":"number"},"large-x":{"value":"{spacing.4}","type":"number"},"large-2x":{"value":"{spacing.5}","type":"number"}},"weight":{"light":{"value":"{font-weight.300}","type":"number"},"bold":{"value":"{font-weight.700}","type":"number"},"medium":{"value":"{font-weight.500}","type":"number"},"regular":{"value":"{font-weight.400}","type":"number"},"semibold":{"value":"{font-weight.600}","type":"number"},"thin":{"value":"{font-weight.100}","type":"number"},"extralight":{"value":"{font-weight.200}","type":"number"},"extrabold":{"value":"{font-weight.800}","type":"number"},"black":{"value":"{font-weight.900}","type":"number"},"light-x":{"value":"{weight.extralight}","type":"number"},"bold-x":{"value":"{weight.extrabold}","type":"number"}}}