@tacc/core-styles 2.30.1 → 2.32.0

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

@@ -1,28 +1 @@
-@import url("../objects/o-section.selectors.css");
-@import url("../components/c-card.selectors.css");
-
-
-
-/* Load accent colors without scope */
-
-@import url("../settings/color.accent--blue.css");
-
-
-
-/* Set scope for accent colors */
-
-@custom-selector :--light-context
-  .c-recognition--style-light,
-  :--o-section--muted,
-  :--o-section--light,
-  :--c-card--standard,
-  :--c-card--standard-N,
-  :--c-card--plain;
-@custom-selector :--dark-context
-  .c-recognition--style-dark,
-  :--o-section--dark;
-
-@custom-selector :--light-context-safe
-  :where(:--dark-context :--light-context);
-@custom-selector :--dark-context-safe
-  :where(:--dark-context:not(:--light-context *));
+@import url("./color--cms.css");

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,40 +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 */
-
-  --global-color-success--x-light: #E7F9E5;
-  --global-color-success--light: #AFECA7;
-  --global-color-success--normal: #43d130;
-  --global-color-success--dark: #237119;
-  --global-color-success--x-dark: #263824;
-
-  --global-color-success--weak: #43d13020;
-
-  --global-color-warning--x-light: #FDFDEA;
-  --global-color-warning--light: #F2F06F;
-  --global-color-warning--normal: #E9E000;
-  --global-color-warning--dark: #735911;
-  --global-color-warning--x-dark: #3A3320;
-
-  --global-color-warning--weak: #DFA70C20;
-
-  --global-color-danger--x-light: #FDF1F1;
-  --global-color-danger--light: #F8C9C9;
-  --global-color-danger--normal: #F09393;
-  --global-color-danger--dark: #AF1818;
-  --global-color-danger--x-dark: #3C3030;
-
-  --global-color-danger--weak: #F0939320;
+  /* 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

@@ -28,15 +28,30 @@ Styleguide Settings.CustomProperties.Font
   --sans--portal: "Roboto", sans-serif;
   --serif: sans-serif;
   --mono: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
+  --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-drop-cap/config.yml

@@ -0,0 +1,4 @@
+status: ready
+context:
+  supportStyles:
+    - ../../assets/tools/x-drop-cap.demo.css

package/src/lib/_imports/tools/x-drop-cap/readme.md

@@ -0,0 +1,3 @@
+Create a "drop-cap", [a type of an initial](https://en.wikipedia.org/wiki/Initial#Types_of_initial), a letter at the beginning of a word, a chapter, or a paragraph that is larger than the rest of the text.
+
+<script src="{{path '/assets/_utils/js/open-ext-links-in-new-window.js'}}" />

package/src/lib/_imports/tools/x-drop-cap/x-drop-cap.hbs

@@ -0,0 +1,4 @@
+<dl>
+  <dt>Via (<code>-webkit</code>)<code>initial-letter</code></dt>
+  <dd><p class="x-drop-cap">The first letter of this sentence will be a drop-cap on modern updated browsers. {{> @text-of-one-paragraph-short }}</p></dd>
+</dl>

package/src/lib/_imports/tools/x-drop-cap.css

@@ -0,0 +1,11 @@
+@define-mixin drop-cap {
+  @supports (initial-letter: 3) {
+    padding-right: 1em;
+    initial-letter: 3;
+  }
+  @supports (-webkit-initial-letter: 3) {
+    padding-right: 1em;
+    -webkit-initial-letter: 3;
+    font-family: Arial;
+  }
+}

package/src/lib/_imports/tools/x-drop-cap.demo.css

@@ -0,0 +1,9 @@
+@import url("./x-drop-cap.css");
+
+/* FAQ: Wrapped to deter clients from using `.x-message` */
+/* HACK: Not in `x-message/demo.css` because it is not processed */
+#demo {
+  .x-drop-cap::first-letter {
+    @mixin drop-cap;
+  }
+}

package/src/lib/_imports/tools/x-message/_x-message--single.hbs

@@ -3,6 +3,7 @@
     type=this.type
     scope=this.scope
     title=this.title
+    needs=this.needs
     content=this.content
     extra_content='<a href="#">Sample link.</a> And a <button class="c-button c-button--as-link">sample button as link</button>.'
 }}

package/src/lib/_imports/tools/x-message/config.yml

@@ -1,12 +1,12 @@
-status: wip
+status: ready
 context:
   supportStyles:
     - ../../assets/tools/x-message.demo.css
   types:
-    - name: success
-      content: Notify user of a successful event.
     - name: info
       content: Notify user of any details that are <strong>not</strong> a problem.
+    - name: success
+      content: Notify user of a successful event.
     - name: warning
       content: Notify user of an <strong>un</strong>successful event that <em>could prevent</em> functionality.
     - name: error
@@ -25,31 +25,7 @@ variants:
     hidden: true
   - name: type
     label: by Type
-    status: prototype
-  - name: type-portal
-    label: by Type (Portal)
-    status: ready
-    view: 'x-message--type.hbs'
-    context:
-      shouldLoadPortal: true
-  - name: type-cms
-    label: by Type (CMS)
     status: ready
-    view: 'x-message--type.hbs'
-    context:
-      shouldLoadCMS: true
   - name: scope
     label: by Scope
-    status: prototype
-  - name: scope-portal
-    label: by Scope (Portal)
-    status: ready
-    view: 'x-message--scope.hbs'
-    context:
-      shouldLoadPortal: true
-  - name: scope-cms
-    label: by Scope (CMS)
     status: ready
-    view: 'x-message--scope.hbs'
-    context:
-      shouldLoadCMS: true

package/src/lib/_imports/tools/x-message/x-message--scope.hbs

@@ -2,14 +2,26 @@
   {{#each scopes}}
   <dt>Scope <strong>{{ this.name }}</strong></dt>
   <dd>
-    {{> @x-message--single scope=this.name
-        type="success" title="Success" content=this.content}}
     {{> @x-message--single scope=this.name
         type="info" title="Info" content=this.content}}
+    {{> @x-message--single scope=this.name
+        type="success" title="Success" content=this.content}}
     {{> @x-message--single scope=this.name
         type="warning" title="Warning" content=this.content}}
     {{> @x-message--single scope=this.name
         type="error" title="Error" content=this.content}}
   </dd>
+  {{#if (eq this.name "section")}}
+  <dd>
+    {{> @x-message--single scope=this.name
+        type="info" title="Info" needs="icon" content=this.content}}
+    {{> @x-message--single scope=this.name
+        type="success" title="Success" needs="icon" content=this.content}}
+    {{> @x-message--single scope=this.name
+        type="warning" title="Warning" needs="icon" content=this.content}}
+    {{> @x-message--single scope=this.name
+        type="error" title="Error" needs="icon" content=this.content}}
+  </dd>
+  {{/if}}
   {{/each}}
 </dl>

package/src/lib/_imports/tools/x-message/x-message--type.hbs

@@ -6,8 +6,8 @@
         scope="inline" title="Inline" content=this.content}}
     {{> @x-message--single type=this.name
         scope="section" title="Section" content=this.content}}
-    <!--{{> @x-message--single type=this.name
-        scope="app" title="App" content=this.content}}-->
+    {{> @x-message--single type=this.name
+        scope="section" title="Section" needs="icon" content=this.content}}
     {{> @x-message--single type=this.name
         scope="global" title="Global" content=this.content}}
   </dd>