feat: CMD-182 design tokens core-v3 concept

src/lib/_imports/settings/color--cms.css

@@ -1,2 +1,21 @@
-/* Support the default accent color in all the scopes */
-@import url("./color--demo.css");
+@import url("../settings/color.accent.css");
+@import url("../objects/o-section.selectors.css");
+@import url("../components/c-card.selectors.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 *));

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");

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;

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/Tokens.core-v2.Light.tokens.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--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);
 }