@weni/unnnic-system 3.25.6 → 3.26.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weni/unnnic-system",
-  "version": "3.25.6",
+  "version": "3.26.0",
   "type": "commonjs",
   "files": [
     "dist",
@@ -99,6 +99,7 @@
   },
   "devDependencies": {
     "@storybook/addon-docs": "^10.2.10",
+    "@storybook/addon-themes": "10.2.10",
     "@storybook/vue3": "10.2.10",
     "@storybook/vue3-vite": "10.2.10",
     "@types/lodash": "^4.17.20",

package/src/assets/scss/colors-hsl.scss

@@ -157,10 +157,12 @@ $unnnic-color-bg-purple-plain-hsl: 270 94% 93%; /* #EDDCFE */
 $unnnic-color-bg-purple-strong-hsl: 267 91% 71%; /* #AD71F8 */
 $unnnic-color-bg-pink-plain-hsl: 338 100% 94%; /* #FFDFEB */
 $unnnic-color-bg-pink-strong-hsl: 335 82% 64%; /* #EF5997 */
+$unnnic-color-bg-inverted-hsl: 0 0% 12%; /* #1F1F1F */
 $unnnic-color-fg-base-hsl: 0 0% 24%; /* #3D3D3D */
 $unnnic-color-fg-emphasized-hsl: 0 0% 12%; /* #1F1F1F */
 $unnnic-color-fg-muted-hsl: 0 0% 44%; /* #707070 */
 $unnnic-color-fg-inverted-hsl: 0 0% 100%; /* #FFFFFF */
+$unnnic-color-fg-on-primary-hsl: 0 0% 100%; /* #FFFFFF */
 $unnnic-color-fg-accent-hsl: 177 99% 32%; /* #01A29B */
 $unnnic-color-fg-info-hsl: 213 91% 52%; /* #157BF4 */
 $unnnic-color-fg-success-hsl: 127 99% 29%; /* #019213 */

package/src/assets/scss/colors.scss

@@ -132,46 +132,3 @@ $unnnic-color-pink-10: #CA226A;
 $unnnic-color-pink-11: #AF0956;
 $unnnic-color-pink-12: #8F0246;
 $unnnic-color-pink-13: #74043B;
-$unnnic-color-bg-base: #FFFFFF;
-$unnnic-color-bg-base-soft: #F5F5F5;
-$unnnic-color-bg-muted: #EBEBEB;
-$unnnic-color-bg-accent-plain: #CFF8F4;
-$unnnic-color-bg-accent-strong: #01A29B;
-$unnnic-color-bg-info: #F1F8FD;
-$unnnic-color-bg-success: #E9FCE3;
-$unnnic-color-bg-warning: #FBF7D4;
-$unnnic-color-bg-critical: #FDF6F5;
-$unnnic-color-bg-red-plain: #FFDFD9;
-$unnnic-color-bg-red-strong: #EC3727;
-$unnnic-color-bg-orange-plain: #FFE0AE;
-$unnnic-color-bg-orange-strong: #E57001;
-$unnnic-color-bg-yellow-plain: #FDF5AD;
-$unnnic-color-bg-yellow-strong: #B18D01;
-$unnnic-color-bg-green-plain: #AFF79E;
-$unnnic-color-bg-green-strong: #08A822;
-$unnnic-color-bg-teal-plain: #ABF2EB;
-$unnnic-color-bg-teal-strong: #01A29B;
-$unnnic-color-bg-blue-plain: #CBE9FF;
-$unnnic-color-bg-blue-strong: #3993F4;
-$unnnic-color-bg-purple-plain: #EDDCFE;
-$unnnic-color-bg-purple-strong: #AD71F8;
-$unnnic-color-bg-pink-plain: #FFDFEB;
-$unnnic-color-bg-pink-strong: #EF5997;
-$unnnic-color-fg-base: #3D3D3D;
-$unnnic-color-fg-emphasized: #1F1F1F;
-$unnnic-color-fg-muted: #707070;
-$unnnic-color-fg-inverted: #FFFFFF;
-$unnnic-color-fg-accent: #01A29B;
-$unnnic-color-fg-info: #157BF4;
-$unnnic-color-fg-success: #019213;
-$unnnic-color-fg-warning: #9C7901;
-$unnnic-color-fg-critical: #EC3727;
-$unnnic-color-border-base: #E0E0E0;
-$unnnic-color-border-muted: #EBEBEB;
-$unnnic-color-border-emphasized: #999999;
-$unnnic-color-border-accent-plain: #66DBD3;
-$unnnic-color-border-accent-strong: #01A29B;
-$unnnic-color-border-info: #97CFFE;
-$unnnic-color-border-success: #74E26C;
-$unnnic-color-border-warning: #E9C701;
-$unnnic-color-border-critical: #FF9E8B;

package/src/assets/scss/deprecated/colors.scss

@@ -1,4 +1,5 @@
 @use '../colors' as *;
+@use '../semantic-colors' as *;
 
 // ============================================================
 // Old primitive tokens (50-950 scale) mapped to new Shoreline (1-13)

package/src/assets/scss/scheme-colors.scss

@@ -1,5 +1,6 @@
 @use './colors' as *;
 @use './deprecated/colors' as *;
+@use './semantic-colors' as *;
 
 // Global scheme colors mapping for all components
 
@@ -176,11 +177,13 @@ $unnnic-scheme-colors:
   'bg-purple-strong' $unnnic-color-bg-purple-strong,
   'bg-pink-plain' $unnnic-color-bg-pink-plain,
   'bg-pink-strong' $unnnic-color-bg-pink-strong,
+  'bg-inverted' $unnnic-color-bg-inverted,
 
   'fg-base' $unnnic-color-fg-base,
   'fg-emphasized' $unnnic-color-fg-emphasized,
   'fg-muted' $unnnic-color-fg-muted,
   'fg-inverted' $unnnic-color-fg-inverted,
+  'fg-on-primary' $unnnic-color-fg-on-primary,
   'fg-accent' $unnnic-color-fg-accent,
   'fg-info' $unnnic-color-fg-info,
   'fg-success' $unnnic-color-fg-success,

package/src/assets/scss/semantic-colors.scss

@@ -0,0 +1,48 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$unnnic-color-bg-base: var(--unnnic-color-bg-base);
+$unnnic-color-bg-base-soft: var(--unnnic-color-bg-base-soft);
+$unnnic-color-bg-muted: var(--unnnic-color-bg-muted);
+$unnnic-color-bg-accent-plain: var(--unnnic-color-bg-accent-plain);
+$unnnic-color-bg-accent-strong: var(--unnnic-color-bg-accent-strong);
+$unnnic-color-bg-info: var(--unnnic-color-bg-info);
+$unnnic-color-bg-success: var(--unnnic-color-bg-success);
+$unnnic-color-bg-warning: var(--unnnic-color-bg-warning);
+$unnnic-color-bg-critical: var(--unnnic-color-bg-critical);
+$unnnic-color-bg-red-plain: var(--unnnic-color-bg-red-plain);
+$unnnic-color-bg-red-strong: var(--unnnic-color-bg-red-strong);
+$unnnic-color-bg-orange-plain: var(--unnnic-color-bg-orange-plain);
+$unnnic-color-bg-orange-strong: var(--unnnic-color-bg-orange-strong);
+$unnnic-color-bg-yellow-plain: var(--unnnic-color-bg-yellow-plain);
+$unnnic-color-bg-yellow-strong: var(--unnnic-color-bg-yellow-strong);
+$unnnic-color-bg-green-plain: var(--unnnic-color-bg-green-plain);
+$unnnic-color-bg-green-strong: var(--unnnic-color-bg-green-strong);
+$unnnic-color-bg-teal-plain: var(--unnnic-color-bg-teal-plain);
+$unnnic-color-bg-teal-strong: var(--unnnic-color-bg-teal-strong);
+$unnnic-color-bg-blue-plain: var(--unnnic-color-bg-blue-plain);
+$unnnic-color-bg-blue-strong: var(--unnnic-color-bg-blue-strong);
+$unnnic-color-bg-purple-plain: var(--unnnic-color-bg-purple-plain);
+$unnnic-color-bg-purple-strong: var(--unnnic-color-bg-purple-strong);
+$unnnic-color-bg-pink-plain: var(--unnnic-color-bg-pink-plain);
+$unnnic-color-bg-pink-strong: var(--unnnic-color-bg-pink-strong);
+$unnnic-color-bg-inverted: var(--unnnic-color-bg-inverted);
+$unnnic-color-fg-base: var(--unnnic-color-fg-base);
+$unnnic-color-fg-emphasized: var(--unnnic-color-fg-emphasized);
+$unnnic-color-fg-muted: var(--unnnic-color-fg-muted);
+$unnnic-color-fg-inverted: var(--unnnic-color-fg-inverted);
+$unnnic-color-fg-on-primary: var(--unnnic-color-fg-on-primary);
+$unnnic-color-fg-accent: var(--unnnic-color-fg-accent);
+$unnnic-color-fg-info: var(--unnnic-color-fg-info);
+$unnnic-color-fg-success: var(--unnnic-color-fg-success);
+$unnnic-color-fg-warning: var(--unnnic-color-fg-warning);
+$unnnic-color-fg-critical: var(--unnnic-color-fg-critical);
+$unnnic-color-border-base: var(--unnnic-color-border-base);
+$unnnic-color-border-muted: var(--unnnic-color-border-muted);
+$unnnic-color-border-emphasized: var(--unnnic-color-border-emphasized);
+$unnnic-color-border-accent-plain: var(--unnnic-color-border-accent-plain);
+$unnnic-color-border-accent-strong: var(--unnnic-color-border-accent-strong);
+$unnnic-color-border-info: var(--unnnic-color-border-info);
+$unnnic-color-border-success: var(--unnnic-color-border-success);
+$unnnic-color-border-warning: var(--unnnic-color-border-warning);
+$unnnic-color-border-critical: var(--unnnic-color-border-critical);

package/src/assets/scss/semantic-text-utilities.scss

@@ -1,4 +1,13 @@
 @use './colors' as *;
+@use './semantic-colors' as *;
+
+a {
+  color: $unnnic-color-fg-base;
+
+  &:hover {
+    color: $unnnic-color-fg-emphasized;
+  }
+}
 
 .color-fg-base {
   color: $unnnic-color-fg-base;

package/src/assets/scss/tailwind.scss

@@ -22,7 +22,7 @@
 
     /* Primary colors */
     --primary: #{$unnnic-color-teal-8-hsl};
-    --primary-foreground: #{$unnnic-color-fg-inverted-hsl};
+    --primary-foreground: #{$unnnic-color-fg-on-primary-hsl};
 
     /* Secondary colors */
     --secondary: #{$unnnic-color-gray-2-hsl};

package/src/assets/scss/theme.scss

@@ -0,0 +1,98 @@
+
+// Do not edit directly, this file was auto-generated.
+
+:root {
+  --unnnic-color-bg-base: #FFFFFF;
+  --unnnic-color-bg-base-soft: #F5F5F5;
+  --unnnic-color-bg-muted: #EBEBEB;
+  --unnnic-color-bg-accent-plain: #CFF8F4;
+  --unnnic-color-bg-accent-strong: #01A29B;
+  --unnnic-color-bg-info: #F1F8FD;
+  --unnnic-color-bg-success: #E9FCE3;
+  --unnnic-color-bg-warning: #FBF7D4;
+  --unnnic-color-bg-critical: #FDF6F5;
+  --unnnic-color-bg-red-plain: #FFDFD9;
+  --unnnic-color-bg-red-strong: #EC3727;
+  --unnnic-color-bg-orange-plain: #FFE0AE;
+  --unnnic-color-bg-orange-strong: #E57001;
+  --unnnic-color-bg-yellow-plain: #FDF5AD;
+  --unnnic-color-bg-yellow-strong: #B18D01;
+  --unnnic-color-bg-green-plain: #AFF79E;
+  --unnnic-color-bg-green-strong: #08A822;
+  --unnnic-color-bg-teal-plain: #ABF2EB;
+  --unnnic-color-bg-teal-strong: #01A29B;
+  --unnnic-color-bg-blue-plain: #CBE9FF;
+  --unnnic-color-bg-blue-strong: #3993F4;
+  --unnnic-color-bg-purple-plain: #EDDCFE;
+  --unnnic-color-bg-purple-strong: #AD71F8;
+  --unnnic-color-bg-pink-plain: #FFDFEB;
+  --unnnic-color-bg-pink-strong: #EF5997;
+  --unnnic-color-bg-inverted: #1F1F1F;
+  --unnnic-color-fg-base: #3D3D3D;
+  --unnnic-color-fg-emphasized: #1F1F1F;
+  --unnnic-color-fg-muted: #707070;
+  --unnnic-color-fg-inverted: #FFFFFF;
+  --unnnic-color-fg-on-primary: #FFFFFF;
+  --unnnic-color-fg-accent: #01A29B;
+  --unnnic-color-fg-info: #157BF4;
+  --unnnic-color-fg-success: #019213;
+  --unnnic-color-fg-warning: #9C7901;
+  --unnnic-color-fg-critical: #EC3727;
+  --unnnic-color-border-base: #E0E0E0;
+  --unnnic-color-border-muted: #EBEBEB;
+  --unnnic-color-border-emphasized: #999999;
+  --unnnic-color-border-accent-plain: #66DBD3;
+  --unnnic-color-border-accent-strong: #01A29B;
+  --unnnic-color-border-info: #97CFFE;
+  --unnnic-color-border-success: #74E26C;
+  --unnnic-color-border-warning: #E9C701;
+  --unnnic-color-border-critical: #FF9E8B;
+}
+
+.dark {
+  --unnnic-color-bg-base: #1F1F1F;
+  --unnnic-color-bg-base-soft: rgba(255, 255, 255, 0.05);
+  --unnnic-color-bg-muted: rgba(255, 255, 255, 0.10);
+  --unnnic-color-bg-accent-plain: rgba(1, 162, 155, 0.18);
+  --unnnic-color-bg-accent-strong: #01A29B;
+  --unnnic-color-bg-info: rgba(21, 123, 244, 0.18);
+  --unnnic-color-bg-success: rgba(1, 146, 19, 0.18);
+  --unnnic-color-bg-warning: rgba(156, 121, 1, 0.18);
+  --unnnic-color-bg-critical: rgba(236, 55, 39, 0.18);
+  --unnnic-color-bg-red-plain: rgba(236, 55, 39, 0.20);
+  --unnnic-color-bg-red-strong: #EC3727;
+  --unnnic-color-bg-orange-plain: rgba(229, 112, 1, 0.20);
+  --unnnic-color-bg-orange-strong: #E57001;
+  --unnnic-color-bg-yellow-plain: rgba(156, 121, 1, 0.20);
+  --unnnic-color-bg-yellow-strong: #B18D01;
+  --unnnic-color-bg-green-plain: rgba(1, 146, 19, 0.20);
+  --unnnic-color-bg-green-strong: #08A822;
+  --unnnic-color-bg-teal-plain: rgba(1, 162, 155, 0.18);
+  --unnnic-color-bg-teal-strong: #01A29B;
+  --unnnic-color-bg-blue-plain: rgba(21, 123, 244, 0.20);
+  --unnnic-color-bg-blue-strong: #3993F4;
+  --unnnic-color-bg-purple-plain: rgba(156, 86, 243, 0.20);
+  --unnnic-color-bg-purple-strong: #AD71F8;
+  --unnnic-color-bg-pink-plain: rgba(222, 56, 127, 0.20);
+  --unnnic-color-bg-pink-strong: #EF5997;
+  --unnnic-color-bg-inverted: #FFFFFF;
+  --unnnic-color-fg-base: #D6D6D6;
+  --unnnic-color-fg-emphasized: #FFFFFF;
+  --unnnic-color-fg-muted: #999999;
+  --unnnic-color-fg-inverted: #1F1F1F;
+  --unnnic-color-fg-on-primary: #FFFFFF;
+  --unnnic-color-fg-accent: #10B6AF;
+  --unnnic-color-fg-info: #5AA8F7;
+  --unnnic-color-fg-success: #28BC37;
+  --unnnic-color-fg-warning: #C5A001;
+  --unnnic-color-fg-critical: #FF7F68;
+  --unnnic-color-border-base: rgba(255, 255, 255, 0.16);
+  --unnnic-color-border-muted: rgba(255, 255, 255, 0.10);
+  --unnnic-color-border-emphasized: rgba(255, 255, 255, 0.24);
+  --unnnic-color-border-accent-plain: rgba(141, 234, 227, 0.24);
+  --unnnic-color-border-accent-strong: #01A29B;
+  --unnnic-color-border-info: rgba(182, 223, 255, 0.24);
+  --unnnic-color-border-success: rgba(151, 239, 134, 0.24);
+  --unnnic-color-border-warning: rgba(250, 222, 30, 0.24);
+  --unnnic-color-border-critical: rgba(255, 208, 199, 0.24);
+}

package/src/assets/scss/unnnic.scss

@@ -1,4 +1,6 @@
 @forward './colors';
+@forward './theme';
+@forward './semantic-colors';
 @forward './semantic-text-utilities';
 @forward './deprecated/colors';
 @forward './deprecated/fonts';

package/src/assets/tokens/colors-primitives.json

@@ -0,0 +1,155 @@
+{
+  "color": {
+    "gray": {
+      "0": { "value": "#FFFFFF" },
+      "1": { "value": "#F5F5F5" },
+      "2": { "value": "#EBEBEB" },
+      "3": { "value": "#E0E0E0" },
+      "4": { "value": "#D6D6D6" },
+      "5": { "value": "#C2C2C2" },
+      "6": { "value": "#ADADAD" },
+      "7": { "value": "#999999" },
+      "8": { "value": "#858585" },
+      "9": { "value": "#707070" },
+      "10": { "value": "#5C5C5C" },
+      "11": { "value": "#3D3D3D" },
+      "12": { "value": "#1F1F1F" },
+      "13": { "value": "#000000" }
+    },
+    "teal": {
+      "1": { "value": "#E9FAF8" },
+      "2": { "value": "#CFF8F4" },
+      "3": { "value": "#ABF2EB" },
+      "4": { "value": "#8DEAE3" },
+      "5": { "value": "#66DBD3" },
+      "6": { "value": "#40CAC2" },
+      "7": { "value": "#10B6AF" },
+      "8": { "value": "#01A29B" },
+      "9": { "value": "#018D88" },
+      "10": { "value": "#017873" },
+      "11": { "value": "#016460" },
+      "12": { "value": "#0D504D" },
+      "13": { "value": "#133D3B" }
+    },
+    "green": {
+      "1": { "value": "#E9FCE3" },
+      "2": { "value": "#CEFDC0" },
+      "3": { "value": "#AFF79E" },
+      "4": { "value": "#97EF86" },
+      "5": { "value": "#74E26C" },
+      "6": { "value": "#4FD051" },
+      "7": { "value": "#28BC37" },
+      "8": { "value": "#08A822" },
+      "9": { "value": "#019213" },
+      "10": { "value": "#017D10" },
+      "11": { "value": "#016810" },
+      "12": { "value": "#01540E" },
+      "13": { "value": "#01410B" }
+    },
+    "blue": {
+      "1": { "value": "#F1F8FD" },
+      "2": { "value": "#E1F3FF" },
+      "3": { "value": "#CBE9FF" },
+      "4": { "value": "#B6DFFF" },
+      "5": { "value": "#97CFFE" },
+      "6": { "value": "#79BCFB" },
+      "7": { "value": "#5AA8F7" },
+      "8": { "value": "#3993F4" },
+      "9": { "value": "#157BF4" },
+      "10": { "value": "#0366DD" },
+      "11": { "value": "#0155B7" },
+      "12": { "value": "#014592" },
+      "13": { "value": "#013672" }
+    },
+    "purple": {
+      "1": { "value": "#F9F5FD" },
+      "2": { "value": "#F5EAFE" },
+      "3": { "value": "#EDDCFE" },
+      "4": { "value": "#E5CFFE" },
+      "5": { "value": "#DABAFD" },
+      "6": { "value": "#CBA3FC" },
+      "7": { "value": "#BC8AFB" },
+      "8": { "value": "#AD71F8" },
+      "9": { "value": "#9C56F3" },
+      "10": { "value": "#883CE6" },
+      "11": { "value": "#7225D2" },
+      "12": { "value": "#5C12B6" },
+      "13": { "value": "#460B93" }
+    },
+    "red": {
+      "1": { "value": "#FDF6F5" },
+      "2": { "value": "#FFEDEA" },
+      "3": { "value": "#FFDFD9" },
+      "4": { "value": "#FFD0C7" },
+      "5": { "value": "#FFBBAD" },
+      "6": { "value": "#FF9E8B" },
+      "7": { "value": "#FF7F68" },
+      "8": { "value": "#F95D47" },
+      "9": { "value": "#EC3727" },
+      "10": { "value": "#D31A15" },
+      "11": { "value": "#B40202" },
+      "12": { "value": "#940303" },
+      "13": { "value": "#720000" }
+    },
+    "orange": {
+      "1": { "value": "#FDF5E9" },
+      "2": { "value": "#FFEDCD" },
+      "3": { "value": "#FFE0AE" },
+      "4": { "value": "#FED392" },
+      "5": { "value": "#FEBC64" },
+      "6": { "value": "#FFA138" },
+      "7": { "value": "#F78612" },
+      "8": { "value": "#E57001" },
+      "9": { "value": "#CC5E01" },
+      "10": { "value": "#B24D01" },
+      "11": { "value": "#963E01" },
+      "12": { "value": "#7B3001" },
+      "13": { "value": "#622401" }
+    },
+    "yellow": {
+      "1": { "value": "#FBF7D4" },
+      "2": { "value": "#FDF5AD" },
+      "3": { "value": "#FAEC6D" },
+      "4": { "value": "#FADE1E" },
+      "5": { "value": "#E9C701" },
+      "6": { "value": "#D8B401" },
+      "7": { "value": "#C5A001" },
+      "8": { "value": "#B18D01" },
+      "9": { "value": "#9C7901" },
+      "10": { "value": "#866701" },
+      "11": { "value": "#715401" },
+      "12": { "value": "#5C4401" },
+      "13": { "value": "#493401" }
+    },
+    "cyan": {
+      "1": { "value": "#E6FAFD" },
+      "2": { "value": "#C6F9FF" },
+      "3": { "value": "#A5F1FF" },
+      "4": { "value": "#89E8FB" },
+      "5": { "value": "#61D9F4" },
+      "6": { "value": "#34C6E9" },
+      "7": { "value": "#13B1DB" },
+      "8": { "value": "#029DC9" },
+      "9": { "value": "#0187B5" },
+      "10": { "value": "#0172A0" },
+      "11": { "value": "#015E8A" },
+      "12": { "value": "#014B74" },
+      "13": { "value": "#013A5E" }
+    },
+    "pink": {
+      "1": { "value": "#FDF5F7" },
+      "2": { "value": "#FFEBF2" },
+      "3": { "value": "#FFDFEB" },
+      "4": { "value": "#FFC8DC" },
+      "5": { "value": "#FEB2CD" },
+      "6": { "value": "#FF98BF" },
+      "7": { "value": "#FE78AC" },
+      "8": { "value": "#EF5997" },
+      "9": { "value": "#DE387F" },
+      "10": { "value": "#CA226A" },
+      "11": { "value": "#AF0956" },
+      "12": { "value": "#8F0246" },
+      "13": { "value": "#74043B" }
+    }
+  }
+}

package/src/assets/tokens/colors-semantic-dark.json

@@ -0,0 +1,55 @@
+{
+  "colorDark": {
+    "bg": {
+      "base": { "value": "{color.gray.12}" },
+      "base-soft": { "value": "rgba(255, 255, 255, 0.05)" },
+      "muted": { "value": "rgba(255, 255, 255, 0.10)" },
+      "accent-plain": { "value": "rgba(1, 162, 155, 0.18)" },
+      "accent-strong": { "value": "{color.teal.8}" },
+      "info": { "value": "rgba(21, 123, 244, 0.18)" },
+      "success": { "value": "rgba(1, 146, 19, 0.18)" },
+      "warning": { "value": "rgba(156, 121, 1, 0.18)" },
+      "critical": { "value": "rgba(236, 55, 39, 0.18)" },
+      "red-plain": { "value": "rgba(236, 55, 39, 0.20)" },
+      "red-strong": { "value": "{color.red.9}" },
+      "orange-plain": { "value": "rgba(229, 112, 1, 0.20)" },
+      "orange-strong": { "value": "{color.orange.8}" },
+      "yellow-plain": { "value": "rgba(156, 121, 1, 0.20)" },
+      "yellow-strong": { "value": "{color.yellow.8}" },
+      "green-plain": { "value": "rgba(1, 146, 19, 0.20)" },
+      "green-strong": { "value": "{color.green.8}" },
+      "teal-plain": { "value": "rgba(1, 162, 155, 0.18)" },
+      "teal-strong": { "value": "{color.teal.8}" },
+      "blue-plain": { "value": "rgba(21, 123, 244, 0.20)" },
+      "blue-strong": { "value": "{color.blue.8}" },
+      "purple-plain": { "value": "rgba(156, 86, 243, 0.20)" },
+      "purple-strong": { "value": "{color.purple.8}" },
+      "pink-plain": { "value": "rgba(222, 56, 127, 0.20)" },
+      "pink-strong": { "value": "{color.pink.8}" },
+      "inverted": { "value": "{color.gray.0}" }
+    },
+    "fg": {
+      "base": { "value": "{color.gray.4}" },
+      "emphasized": { "value": "{color.gray.0}" },
+      "muted": { "value": "{color.gray.7}" },
+      "inverted": { "value": "{color.gray.12}" },
+      "on-primary": { "value": "{color.gray.0}" },
+      "accent": { "value": "{color.teal.7}" },
+      "info": { "value": "{color.blue.7}" },
+      "success": { "value": "{color.green.7}" },
+      "warning": { "value": "{color.yellow.7}" },
+      "critical": { "value": "{color.red.7}" }
+    },
+    "border": {
+      "base": { "value": "rgba(255, 255, 255, 0.16)" },
+      "muted": { "value": "rgba(255, 255, 255, 0.10)" },
+      "emphasized": { "value": "rgba(255, 255, 255, 0.24)" },
+      "accent-plain": { "value": "rgba(141, 234, 227, 0.24)" },
+      "accent-strong": { "value": "{color.teal.8}" },
+      "info": { "value": "rgba(182, 223, 255, 0.24)" },
+      "success": { "value": "rgba(151, 239, 134, 0.24)" },
+      "warning": { "value": "rgba(250, 222, 30, 0.24)" },
+      "critical": { "value": "rgba(255, 208, 199, 0.24)" }
+    }
+  }
+}

package/src/assets/tokens/colors-semantic.json

@@ -0,0 +1,55 @@
+{
+  "color": {
+    "bg": {
+      "base": { "value": "{color.gray.0}" },
+      "base-soft": { "value": "{color.gray.1}" },
+      "muted": { "value": "{color.gray.2}" },
+      "accent-plain": { "value": "{color.teal.2}" },
+      "accent-strong": { "value": "{color.teal.8}" },
+      "info": { "value": "{color.blue.1}" },
+      "success": { "value": "{color.green.1}" },
+      "warning": { "value": "{color.yellow.1}" },
+      "critical": { "value": "{color.red.1}" },
+      "red-plain": { "value": "{color.red.3}" },
+      "red-strong": { "value": "{color.red.9}" },
+      "orange-plain": { "value": "{color.orange.3}" },
+      "orange-strong": { "value": "{color.orange.8}" },
+      "yellow-plain": { "value": "{color.yellow.2}" },
+      "yellow-strong": { "value": "{color.yellow.8}" },
+      "green-plain": { "value": "{color.green.3}" },
+      "green-strong": { "value": "{color.green.8}" },
+      "teal-plain": { "value": "{color.teal.3}" },
+      "teal-strong": { "value": "{color.teal.8}" },
+      "blue-plain": { "value": "{color.blue.3}" },
+      "blue-strong": { "value": "{color.blue.8}" },
+      "purple-plain": { "value": "{color.purple.3}" },
+      "purple-strong": { "value": "{color.purple.8}" },
+      "pink-plain": { "value": "{color.pink.3}" },
+      "pink-strong": { "value": "{color.pink.8}" },
+      "inverted": { "value": "{color.gray.12}" }
+    },
+    "fg": {
+      "base": { "value": "{color.gray.11}" },
+      "emphasized": { "value": "{color.gray.12}" },
+      "muted": { "value": "{color.gray.9}" },
+      "inverted": { "value": "{color.gray.0}" },
+      "on-primary": { "value": "{color.gray.0}" },
+      "accent": { "value": "{color.teal.8}" },
+      "info": { "value": "{color.blue.9}" },
+      "success": { "value": "{color.green.9}" },
+      "warning": { "value": "{color.yellow.9}" },
+      "critical": { "value": "{color.red.9}" }
+    },
+    "border": {
+      "base": { "value": "{color.gray.3}" },
+      "muted": { "value": "{color.gray.2}" },
+      "emphasized": { "value": "{color.gray.7}" },
+      "accent-plain": { "value": "{color.teal.5}" },
+      "accent-strong": { "value": "{color.teal.8}" },
+      "info": { "value": "{color.blue.5}" },
+      "success": { "value": "{color.green.5}" },
+      "warning": { "value": "{color.yellow.5}" },
+      "critical": { "value": "{color.red.6}" }
+    }
+  }
+}

package/src/components/Alert/__tests__/__snapshots__/Alert.spec.js.snap

@@ -4,7 +4,7 @@ exports[`UnnnicAlert.vue > matches the snapshot 1`] = `
 "<transition-stub data-v-c3231c18="" name="toast-slide" appear="true" persisted="false" css="true" data-testid="toast-transition">
   <aside data-v-c3231c18="" class="unnnic-toast unnnic-toast--success" role="status" aria-live="polite" data-testid="toast" style="z-index: 1005;">
     <section data-v-c3231c18="" class="unnnic-toast__content" data-testid="toast-content">
-      <header data-v-c3231c18="" class="unnnic-toast__header" data-testid="toast-header"><span data-v-26446d8e="" data-v-c3231c18="" class="unnnic-icon material-symbols-rounded unnnic-icon-scheme--green-500 unnnic-icon-size--ant unnnic-icon__size--ant" data-testid="toast-type-icon" translate="no">check_circle</span>
+      <header data-v-c3231c18="" class="unnnic-toast__header" data-testid="toast-header"><span data-v-26446d8e="" data-v-c3231c18="" class="unnnic-icon material-symbols-rounded unnnic-icon-scheme--fg-success unnnic-icon-size--ant unnnic-icon__size--ant" data-testid="toast-type-icon" translate="no">check_circle</span>
         <h3 data-v-c3231c18="" class="unnnic-toast__title" data-testid="toast-title">Test Alert</h3><span data-v-26446d8e="" data-v-c3231c18="" class="unnnic-icon material-symbols-rounded unnnic-icon-scheme--fg-base unnnic-icon-size--ant unnnic-icon__size--ant unnnic--clickable unnnic-toast__close" data-testid="toast-close-icon" translate="no">close</span>
       </header>
       <!--v-if-->

package/src/components/AudioRecorder/AudioTranscriptionButton.vue

@@ -19,7 +19,9 @@
           class="audio-player__icon-transcription"
           clickable
           icon="material-symbols:subject-rounded"
-          :scheme="!props.enableGenerateTranscription ? 'gray-300' : 'gray-900'"
+          :scheme="
+            !props.enableGenerateTranscription ? 'fg-muted' : 'fg-emphasized'
+          "
           size="ant"
           @click="emit('click')"
         />