@weni/unnnic-system 3.1.4 → 3.2.0

package/dist/utils/colorTokens.d.ts

@@ -1,3 +1,3 @@
-import { default as colors } from '../assets/scss/colors.scss?inline';
+import { default as colors } from '../assets/scss/deprecated/colors.scss?inline';
 export default colors;
 //# sourceMappingURL=colorTokens.d.ts.map

package/dist/utils/colorTokens.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"colorTokens.d.ts","sourceRoot":"","sources":["../../src/utils/colorTokens.js"],"names":[],"mappings":";mBAAmB,kCAAkC"}
+{"version":3,"file":"colorTokens.d.ts","sourceRoot":"","sources":["../../src/utils/colorTokens.js"],"names":[],"mappings":";mBAAmB,6CAA6C"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weni/unnnic-system",
-  "version": "3.1.4",
+  "version": "3.2.0",
   "type": "commonjs",
   "files": [
     "dist",
@@ -37,7 +37,8 @@
     "build-storybook": "storybook build",
     "test": "vitest",
     "test:ui": "vitest --ui",
-    "coverage": "vitest --coverage"
+    "coverage": "vitest --coverage",
+    "style-dictionary:generate": "style-dictionary build --config styleDictionary.config.js"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -91,6 +92,7 @@
     "react-dom": "^18.2.0",
     "sass": "^1.63.0",
     "storybook": "^8.0.10",
+    "style-dictionary": "^5.0.1",
     "typescript": "^5.9.2",
     "vite": "4.3.5",
     "vite-plugin-dts": "^4.5.4",

package/src/assets/scss/colors.scss

@@ -1,3 +1,19 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$unnnic-color-white: #FFFFFF;
+$unnnic-color-black: #000000;
+$unnnic-color-gray-50: #F6F7F9;
+$unnnic-color-gray-100: #ECEEF2;
+$unnnic-color-gray-200: #D6D9E1;
+$unnnic-color-gray-300: #B2B9C7;
+$unnnic-color-gray-400: #8893A8;
+$unnnic-color-gray-500: #67738B;
+$unnnic-color-gray-600: #545E75;
+$unnnic-color-gray-700: #454D5F;
+$unnnic-color-gray-800: #3B4151;
+$unnnic-color-gray-900: #353945;
+$unnnic-color-gray-950: #23262E;
 $unnnic-color-teal-50: #EFFEFC;
 $unnnic-color-teal-100: #C7FFF7;
 $unnnic-color-teal-200: #90FFEF;
@@ -9,420 +25,95 @@ $unnnic-color-teal-700: #05807D;
 $unnnic-color-teal-800: #0A6564;
 $unnnic-color-teal-900: #0D5453;
 $unnnic-color-teal-950: #003133;
-
-$unnnic-color-gray-950: #23262E;
-$unnnic-color-gray-900: #353945;
-$unnnic-color-gray-800: #3B4151;
-$unnnic-color-gray-700: #454D5F;
-$unnnic-color-gray-600: #545E75;
-$unnnic-color-gray-500: #67738B;
-$unnnic-color-gray-400: #8893A8;
-$unnnic-color-gray-300: #B2B9C7;
-$unnnic-color-gray-200: #D6D9E1;
-$unnnic-color-gray-100: #ECEEF2;
-$unnnic-color-gray-50: #F6F7F9;
-
-$unnnic-color-white: #FFFFFF;
-
-$unnnic-color-weni-50: $unnnic-color-teal-50;
-$unnnic-color-weni-100: $unnnic-color-teal-100;
-$unnnic-color-weni-200: $unnnic-color-teal-200;
-$unnnic-color-weni-300: $unnnic-color-teal-300;
-$unnnic-color-weni-400: $unnnic-color-teal-400;
-$unnnic-color-weni-500: $unnnic-color-teal-500;
-$unnnic-color-weni-600: $unnnic-color-teal-600;
-$unnnic-color-weni-700: $unnnic-color-teal-700;
-$unnnic-color-weni-800: $unnnic-color-teal-800;
-$unnnic-color-weni-900: $unnnic-color-teal-900;
-$unnnic-color-weni-950: $unnnic-color-teal-950;
-
-$unnnic-color-neutral-black: $unnnic-color-gray-900;
-$unnnic-color-neutral-darkest: $unnnic-color-gray-800;
-$unnnic-color-neutral-dark: $unnnic-color-gray-700;
-$unnnic-color-neutral-cloudy: $unnnic-color-gray-500;
-$unnnic-color-neutral-clean: $unnnic-color-gray-300;
-$unnnic-color-neutral-cleanest: $unnnic-color-gray-200;
-$unnnic-color-neutral-soft: $unnnic-color-gray-100;
-$unnnic-color-neutral-light: $unnnic-color-gray-50;
-$unnnic-color-neutral-lightest: $unnnic-color-gray-50;
-$unnnic-color-neutral-white: $unnnic-color-white;
-
-$unnnic-color-background-solo: $unnnic-color-teal-50;
-$unnnic-color-background-sky: $unnnic-color-gray-50;
-$unnnic-color-background-grass: $unnnic-color-gray-50;
-$unnnic-color-background-lightest: $unnnic-color-gray-50;
-$unnnic-color-background-white: $unnnic-color-white;
-$unnnic-color-background-soft: #1A1A1A;
-
-$unnnic-color-aux-green-50: #F0F9F3;
-$unnnic-color-aux-green-100: #DAF1E0;
-$unnnic-color-aux-green-200: #B7E3C6;
-$unnnic-color-aux-green-300: #88CDA4;
-$unnnic-color-aux-green-400: #56B17E;
-$unnnic-color-aux-green-500: #38A169;
-$unnnic-color-aux-green-600: #24774C;
-$unnnic-color-aux-green-700: #1D5F3F;
-$unnnic-color-aux-green-800: #194C34;
-$unnnic-color-aux-green-900: #153F2C;
-$unnnic-color-aux-green-950: #0B2318;
-
-$unnnic-color-aux-blue-50: #F2F7FD;
-$unnnic-color-aux-blue-100: #E5EEF9;
-$unnnic-color-aux-blue-200: #C4DBF3;
-$unnnic-color-aux-blue-300: #90BDE9;
-$unnnic-color-aux-blue-400: #559BDB;
-$unnnic-color-aux-blue-500: #3182CE;
-$unnnic-color-aux-blue-600: #3182CE;
-$unnnic-color-aux-blue-700: #1B4F89;
-$unnnic-color-aux-blue-800: #1A4472;
-$unnnic-color-aux-blue-900: #1B3A5F;
-$unnnic-color-aux-blue-950: #12253F;
-
-$unnnic-color-aux-purple-50: #F6F5FD;
-$unnnic-color-aux-purple-100: #EEECFB;
-$unnnic-color-aux-purple-200: #DFDCF8;
-$unnnic-color-aux-purple-300: #C7BFF3;
-$unnnic-color-aux-purple-400: #AA9BEA;
-$unnnic-color-aux-purple-500: #8D72E0;
-$unnnic-color-aux-purple-600: #805AD5;
-$unnnic-color-aux-purple-700: #6B41C0;
-$unnnic-color-aux-purple-800: #5A36A1;
-$unnnic-color-aux-purple-900: #4B2E84;
-$unnnic-color-aux-purple-950: #2E1C59;
-
-$unnnic-color-aux-red-50: #FDF3F3;
-$unnnic-color-aux-red-100: #FDE3E3;
-$unnnic-color-aux-red-200: #FCCCCC;
-$unnnic-color-aux-red-300: #F8A9A9;
-$unnnic-color-aux-red-400: #F27777;
-$unnnic-color-aux-red-500: #E53E3E;
-$unnnic-color-aux-red-600: #D32F2F;
-$unnnic-color-aux-red-700: #B22323;
-$unnnic-color-aux-red-800: #932121;
-$unnnic-color-aux-red-900: #7A2222;
-$unnnic-color-aux-red-950: #420D0D;
-
-$unnnic-color-aux-orange-50: #FDF8EF;
-$unnnic-color-aux-orange-100: #FBEED9;
-$unnnic-color-aux-orange-200: #F7DAB1;
-$unnnic-color-aux-orange-300: #F1C080;
-$unnnic-color-aux-orange-400: #EB9D4C;
-$unnnic-color-aux-orange-500: #E5812A;
-$unnnic-color-aux-orange-600: #DD6B20;
-$unnnic-color-aux-orange-700: #B2501C;
-$unnnic-color-aux-orange-800: #8E401E;
-$unnnic-color-aux-orange-900: #73361B;
-$unnnic-color-aux-orange-950: #3E1A0C;
-
-$unnnic-color-aux-yellow-50: #FBF7EB;
-$unnnic-color-aux-yellow-100: #F5EDCC;
-$unnnic-color-aux-yellow-200: #EDD89B;
-$unnnic-color-aux-yellow-300: #E2BC62;
-$unnnic-color-aux-yellow-400: #D69E2E;
-$unnnic-color-aux-yellow-500: #C88D2A;
-$unnnic-color-aux-yellow-600: #AC6E22;
-$unnnic-color-aux-yellow-700: #8A501E;
-$unnnic-color-aux-yellow-800: #734120;
-$unnnic-color-aux-yellow-900: #633720;
-$unnnic-color-aux-yellow-950: #391B0F;
-
-$unnnic-color-floweditor-blue: #0080A3;
-$unnnic-color-floweditor-purple: #7A00A3;
-$unnnic-color-floweditor-wine: #A3006A;
-$unnnic-color-floweditor-orange: #F99707;
-$unnnic-color-floweditor-pink: #DE16BA;
-$unnnic-color-floweditor-turquoise: $unnnic-color-teal-500;
-$unnnic-color-floweditor-green: #00A339;
-
-/* Background */
-$unnnic-color-background-carpet: $unnnic-color-neutral-lightest;
-$unnnic-color-background-snow: $unnnic-color-neutral-white;
-
-/* Neutral */
-$unnnic-color-neutral-snow: $unnnic-color-neutral-white;
-
-/* Feedback colors */
-$unnnic-color-feedback-red: #FF4545;
-$unnnic-color-feedback-green: #47D66F;
-$unnnic-color-feedback-yellow: #FDBA38;
-$unnnic-color-feedback-blue: #2856FC;
-$unnnic-color-feedback-grey: #ECECEC;
-
-/* Auxiliary colors */
-$unnnic-color-aux-blue: #00DED3;
-$unnnic-color-aux-purple: #8416DE;
-$unnnic-color-aux-orange: #F4691F;
-$unnnic-color-aux-lemon: #CCDE0B;
-$unnnic-color-aux-pink: #DE16BA;
-
-$unnnic-color-aux-baby-blue: #8EDEF5;
-$unnnic-color-aux-baby-yellow: #FBF391;
-$unnnic-color-aux-baby-red: #F48E8E;
-$unnnic-color-aux-baby-green: #B2FCA6;
-$unnnic-color-aux-baby-pink: #FFCBF6;
-
-/* Brand */
-$unnnic-color-brand-weni: $unnnic-color-teal-600;
-$unnnic-color-brand-weni-dark: $unnnic-color-teal-800;
-$unnnic-color-brand-weni-soft: $unnnic-color-teal-600; 
-$unnnic-color-brand-sec-dark: $unnnic-color-neutral-black;
-$unnnic-color-brand-sec-soft: $unnnic-color-neutral-dark;
-$unnnic-color-brand-sec: $unnnic-color-neutral-cleanest;
-
-/* Semantic Background Colors */
-$unnnic-color-bg-base: $unnnic-color-white;
-$unnnic-color-bg-soft: $unnnic-color-gray-50;
-$unnnic-color-bg-muted: $unnnic-color-gray-100;
-$unnnic-color-bg-active: $unnnic-color-teal-600;
-$unnnic-color-bg-info: $unnnic-color-aux-blue-100;
-$unnnic-color-bg-success: $unnnic-color-aux-green-100;
-$unnnic-color-bg-warning: $unnnic-color-aux-yellow-50;
-$unnnic-color-bg-critical: $unnnic-color-aux-red-50;
-
-/* Semantic Text Colors */
-$unnnic-color-fg-base: $unnnic-color-gray-500;
-$unnnic-color-fg-muted: $unnnic-color-gray-300;
-$unnnic-color-fg-emphasized: $unnnic-color-gray-900;
-$unnnic-color-fg-inverted: $unnnic-color-white;
-$unnnic-color-fg-active: $unnnic-color-teal-600;
-$unnnic-color-fg-info: $unnnic-color-aux-blue-500;
-$unnnic-color-fg-success: $unnnic-color-aux-green-500;
-$unnnic-color-fg-warning: $unnnic-color-aux-yellow-500;
-$unnnic-color-fg-critical: $unnnic-color-aux-red-500;
-
-/* Semantic Border Colors */
-$unnnic-color-border-base: $unnnic-color-gray-200;
-$unnnic-color-border-soft: $unnnic-color-gray-100;
-$unnnic-color-border-muted: $unnnic-color-gray-200;
-$unnnic-color-border-emphasized: $unnnic-color-gray-400;
-$unnnic-color-border-active: $unnnic-color-teal-600;
-$unnnic-color-border-info: $unnnic-color-aux-blue-300;
-$unnnic-color-border-success: $unnnic-color-aux-green-300;
-$unnnic-color-border-warning: $unnnic-color-aux-yellow-300;
-$unnnic-color-border-critical: $unnnic-color-aux-red-300;
-
-:export{
-    unnnicColorBackgroundSolo: $unnnic-color-background-solo;
-}
-
-$scheme-colors:
-  "background-solo" $unnnic-color-background-solo,
-  "background-sky" $unnnic-color-background-sky,
-  "background-grass" $unnnic-color-background-grass,
-  "background-carpet" $unnnic-color-background-carpet,
-  "background-snow" $unnnic-color-background-snow,
-  "background-lightest" $unnnic-color-background-lightest,
-  "background-white" $unnnic-color-background-white,
-
-  /* Neutral */
-  "neutral-black" $unnnic-color-neutral-black,
-  "neutral-darkest" $unnnic-color-neutral-darkest,
-  "neutral-dark" $unnnic-color-neutral-dark,
-  "neutral-cloudy" $unnnic-color-neutral-cloudy,
-  "neutral-cleanest" $unnnic-color-neutral-cleanest,
-  "neutral-clean" $unnnic-color-neutral-clean,
-  "neutral-soft" $unnnic-color-neutral-soft,
-  "neutral-lightest" $unnnic-color-neutral-lightest,
-  "neutral-light" $unnnic-color-neutral-light,
-  "neutral-white" $unnnic-color-neutral-white,
-  "neutral-snow" $unnnic-color-neutral-snow,
-
-  /* Feedback colors */
-  "feedback-red" $unnnic-color-feedback-red,
-  "feedback-green" $unnnic-color-feedback-green,
-  "feedback-yellow" $unnnic-color-feedback-yellow,
-  "feedback-blue" $unnnic-color-feedback-blue,
-  "feedback-grey" $unnnic-color-feedback-grey,
-
-  /* Auxiliary colors */
-  "aux-blue" $unnnic-color-aux-blue,
-  "aux-purple" $unnnic-color-aux-purple,
-  "aux-orange" $unnnic-color-aux-orange,
-  "aux-lemon" $unnnic-color-aux-lemon,
-  "aux-pink" $unnnic-color-aux-pink,
-
-  "aux-baby-blue" $unnnic-color-aux-baby-blue,
-  "aux-baby-yellow" $unnnic-color-aux-baby-yellow,
-  "aux-baby-red" $unnnic-color-aux-baby-red,
-  "aux-baby-green" $unnnic-color-aux-baby-green,
-  "aux-baby-pink" $unnnic-color-aux-baby-pink,
-
-  "aux-green-50" $unnnic-color-aux-green-50,
-  "aux-green-100" $unnnic-color-aux-green-100,
-  "aux-green-200" $unnnic-color-aux-green-200,
-  "aux-green-300" $unnnic-color-aux-green-300,
-  "aux-green-400" $unnnic-color-aux-green-400,
-  "aux-green-500" $unnnic-color-aux-green-500,
-  "aux-green-600" $unnnic-color-aux-green-600,
-  "aux-green-700" $unnnic-color-aux-green-700,
-  "aux-green-800" $unnnic-color-aux-green-800,
-  "aux-green-900" $unnnic-color-aux-green-900,
-  "aux-green-950" $unnnic-color-aux-green-950,
-
-  "aux-blue-50" $unnnic-color-aux-blue-50,
-  "aux-blue-100" $unnnic-color-aux-blue-100,
-  "aux-blue-200" $unnnic-color-aux-blue-200,
-  "aux-blue-300" $unnnic-color-aux-blue-300,
-  "aux-blue-400" $unnnic-color-aux-blue-400,
-  "aux-blue-500" $unnnic-color-aux-blue-500,
-  "aux-blue-600" $unnnic-color-aux-blue-600,
-  "aux-blue-700" $unnnic-color-aux-blue-700,
-  "aux-blue-800" $unnnic-color-aux-blue-800,
-  "aux-blue-900" $unnnic-color-aux-blue-900,
-  "aux-blue-950" $unnnic-color-aux-blue-950,
-
-  "aux-purple-50" $unnnic-color-aux-purple-50,
-  "aux-purple-100" $unnnic-color-aux-purple-100,
-  "aux-purple-200" $unnnic-color-aux-purple-200,
-  "aux-purple-300" $unnnic-color-aux-purple-300,
-  "aux-purple-400" $unnnic-color-aux-purple-400,
-  "aux-purple-500" $unnnic-color-aux-purple-500,
-  "aux-purple-600" $unnnic-color-aux-purple-600,
-  "aux-purple-700" $unnnic-color-aux-purple-700,
-  "aux-purple-800" $unnnic-color-aux-purple-800,
-  "aux-purple-900" $unnnic-color-aux-purple-900,
-  "aux-purple-950" $unnnic-color-aux-purple-950,
-
-  "aux-red-50" $unnnic-color-aux-red-50,
-  "aux-red-100" $unnnic-color-aux-red-100,
-  "aux-red-200" $unnnic-color-aux-red-200,
-  "aux-red-300" $unnnic-color-aux-red-300,
-  "aux-red-400" $unnnic-color-aux-red-400,
-  "aux-red-500" $unnnic-color-aux-red-500,
-  "aux-red-600" $unnnic-color-aux-red-600,
-  "aux-red-700" $unnnic-color-aux-red-700,
-  "aux-red-800" $unnnic-color-aux-red-800,
-  "aux-red-900" $unnnic-color-aux-red-900,
-  "aux-red-950" $unnnic-color-aux-red-950,
-
-  "aux-orange-50" $unnnic-color-aux-orange-50,
-  "aux-orange-100" $unnnic-color-aux-orange-100,
-  "aux-orange-200" $unnnic-color-aux-orange-200,
-  "aux-orange-300" $unnnic-color-aux-orange-300,
-  "aux-orange-400" $unnnic-color-aux-orange-400,
-  "aux-orange-500" $unnnic-color-aux-orange-500,
-  "aux-orange-600" $unnnic-color-aux-orange-600,
-  "aux-orange-700" $unnnic-color-aux-orange-700,
-  "aux-orange-800" $unnnic-color-aux-orange-800,
-  "aux-orange-900" $unnnic-color-aux-orange-900,
-  "aux-orange-950" $unnnic-color-aux-orange-950,
-
-  "aux-yellow-50" $unnnic-color-aux-yellow-50,
-  "aux-yellow-100" $unnnic-color-aux-yellow-100,
-  "aux-yellow-200" $unnnic-color-aux-yellow-200,
-  "aux-yellow-300" $unnnic-color-aux-yellow-300,
-  "aux-yellow-400" $unnnic-color-aux-yellow-400,
-  "aux-yellow-500" $unnnic-color-aux-yellow-500,
-  "aux-yellow-600" $unnnic-color-aux-yellow-600,
-  "aux-yellow-700" $unnnic-color-aux-yellow-700,
-  "aux-yellow-800" $unnnic-color-aux-yellow-800,
-  "aux-yellow-900" $unnnic-color-aux-yellow-900,
-  "aux-yellow-950" $unnnic-color-aux-yellow-950,
-
-  "floweditor-blue" $unnnic-color-floweditor-blue,
-  "floweditor-purple" $unnnic-color-floweditor-purple,
-  "floweditor-wine" $unnnic-color-floweditor-wine,
-  "floweditor-orange" $unnnic-color-floweditor-orange,
-  "floweditor-pink" $unnnic-color-floweditor-pink,
-  "floweditor-turquoise" $unnnic-color-floweditor-turquoise,
-  "floweditor-green" $unnnic-color-floweditor-green,
-
-  /* Brand */
-  "weni-50" $unnnic-color-weni-50,
-  "weni-100" $unnnic-color-weni-100,
-  "weni-200" $unnnic-color-weni-200,
-  "weni-300" $unnnic-color-weni-300,
-  "weni-400" $unnnic-color-weni-400,
-  "weni-500" $unnnic-color-weni-500,
-  "weni-600" $unnnic-color-weni-600,
-  "weni-700" $unnnic-color-weni-700,
-  "weni-800" $unnnic-color-weni-800,
-  "weni-900" $unnnic-color-weni-900,
-  "weni-950" $unnnic-color-weni-950,
-
-  "teal-50" $unnnic-color-teal-50,
-  "teal-100" $unnnic-color-teal-100,
-  "teal-200" $unnnic-color-teal-200,
-  "teal-300" $unnnic-color-teal-300,
-  "teal-400" $unnnic-color-teal-400,
-  "teal-500" $unnnic-color-teal-500,
-  "teal-600" $unnnic-color-teal-600,
-  "teal-700" $unnnic-color-teal-700,
-  "teal-800" $unnnic-color-teal-800,
-  "teal-900" $unnnic-color-teal-900,
-  "teal-950" $unnnic-color-teal-950,
-  
-  "gray-50" $unnnic-color-gray-50,
-  "gray-100" $unnnic-color-gray-100,
-  "gray-200" $unnnic-color-gray-200,
-  "gray-300" $unnnic-color-gray-300,
-  "gray-400" $unnnic-color-gray-400,
-  "gray-500" $unnnic-color-gray-500,
-  "gray-600" $unnnic-color-gray-600,
-  "gray-700" $unnnic-color-gray-700,
-  "gray-800" $unnnic-color-gray-800,
-  "gray-900" $unnnic-color-gray-900,
-  "gray-950" $unnnic-color-gray-950,
-
-  "brand-weni" $unnnic-color-brand-weni,
-  "brand-weni-dark" $unnnic-color-brand-weni-dark,
-  "brand-weni-soft" $unnnic-color-brand-weni-soft,
-  "brand-sec-dark" $unnnic-color-brand-sec-dark,
-  "brand-sec-soft" $unnnic-color-brand-sec-soft,
-  "brand-sec" $unnnic-color-brand-sec,
-  
-  // Background semantic colors
-  "bg-base" $unnnic-color-bg-base,
-  "bg-soft" $unnnic-color-bg-soft,
-  "bg-muted" $unnnic-color-bg-muted,
-  "bg-active" $unnnic-color-bg-active,
-  "bg-info" $unnnic-color-bg-info,
-  "bg-success" $unnnic-color-bg-success,
-  "bg-warning" $unnnic-color-bg-warning,
-  "bg-critical" $unnnic-color-bg-critical,
-  
-  // Text semantic colors
-  "fg-base" $unnnic-color-fg-base,
-  "fg-muted" $unnnic-color-fg-muted,
-  "fg-emphasized" $unnnic-color-fg-emphasized,
-  "fg-inverted" $unnnic-color-fg-inverted,
-  "fg-active" $unnnic-color-fg-active,
-  "fg-info" $unnnic-color-fg-info,
-  "fg-success" $unnnic-color-fg-success,
-  "fg-warning" $unnnic-color-fg-warning,
-  "fg-critical" $unnnic-color-fg-critical,
-  
-  // Border semantic colors
-  "border-base" $unnnic-color-border-base,
-  "border-soft" $unnnic-color-border-soft,
-  "border-muted" $unnnic-color-border-muted,
-  "border-emphasized" $unnnic-color-border-emphasized,
-  "border-active" $unnnic-color-border-active,
-  "border-info" $unnnic-color-border-info,
-  "border-success" $unnnic-color-border-success,
-  "border-warning" $unnnic-color-border-warning,
-  "border-critical" $unnnic-color-border-critical;
-
-
-@each $name, $color in $scheme-colors {
-  .color-#{$name} {
-    color: $color;
-  }
-
-  .bg-#{$name} {
-    background-color: $color;
-  }
-}
-
-
-.u {
-  @each $name, $color in $scheme-colors {
-    &.color-#{$name} {
-      color: $color;
-    }
-  
-    &.bg-#{$name} {
-      background-color: $color;
-    }
-  }
-}
+$unnnic-color-green-50: #F0F9F3;
+$unnnic-color-green-100: #DAF1E0;
+$unnnic-color-green-200: #B7E3C6;
+$unnnic-color-green-300: #88CDA4;
+$unnnic-color-green-400: #56B17E;
+$unnnic-color-green-500: #38A169;
+$unnnic-color-green-600: #24774C;
+$unnnic-color-green-700: #1D5F3F;
+$unnnic-color-green-800: #194C34;
+$unnnic-color-green-900: #153F2C;
+$unnnic-color-green-950: #0B2318;
+$unnnic-color-blue-50: #F2F7FD;
+$unnnic-color-blue-100: #E5EEF9;
+$unnnic-color-blue-200: #C4DBF3;
+$unnnic-color-blue-300: #90BDE9;
+$unnnic-color-blue-400: #559BDB;
+$unnnic-color-blue-500: #3182CE;
+$unnnic-color-blue-600: #2062A9;
+$unnnic-color-blue-700: #1B4F89;
+$unnnic-color-blue-800: #1A4472;
+$unnnic-color-blue-900: #1B3A5F;
+$unnnic-color-blue-950: #12253F;
+$unnnic-color-purple-50: #F6F5FD;
+$unnnic-color-purple-100: #EEECFB;
+$unnnic-color-purple-200: #DFDCF8;
+$unnnic-color-purple-300: #C7BFF3;
+$unnnic-color-purple-400: #AA9BEA;
+$unnnic-color-purple-500: #8D72E0;
+$unnnic-color-purple-600: #805AD5;
+$unnnic-color-purple-700: #6B41C0;
+$unnnic-color-purple-800: #5A36A1;
+$unnnic-color-purple-900: #4B2E84;
+$unnnic-color-purple-950: #2E1C59;
+$unnnic-color-red-50: #FDF3F3;
+$unnnic-color-red-100: #FDE3E3;
+$unnnic-color-red-200: #FCCCCC;
+$unnnic-color-red-300: #F8A9A9;
+$unnnic-color-red-400: #F27777;
+$unnnic-color-red-500: #E53E3E;
+$unnnic-color-red-600: #D32F2F;
+$unnnic-color-red-700: #B22323;
+$unnnic-color-red-800: #932121;
+$unnnic-color-red-900: #7A2222;
+$unnnic-color-red-950: #420D0D;
+$unnnic-color-orange-50: #FDF8EF;
+$unnnic-color-orange-100: #FBEED9;
+$unnnic-color-orange-200: #F7DAB1;
+$unnnic-color-orange-300: #F1C080;
+$unnnic-color-orange-400: #EB9D4C;
+$unnnic-color-orange-500: #E5812A;
+$unnnic-color-orange-600: #DD6B20;
+$unnnic-color-orange-700: #B2501C;
+$unnnic-color-orange-800: #8E401E;
+$unnnic-color-orange-900: #73361B;
+$unnnic-color-orange-950: #3E1A0C;
+$unnnic-color-yellow-50: #FBF7EB;
+$unnnic-color-yellow-100: #F5EDCC;
+$unnnic-color-yellow-200: #EDD89B;
+$unnnic-color-yellow-300: #E2BC62;
+$unnnic-color-yellow-400: #D69E2E;
+$unnnic-color-yellow-500: #C88D2A;
+$unnnic-color-yellow-600: #AC6E22;
+$unnnic-color-yellow-700: #8A501E;
+$unnnic-color-yellow-800: #734120;
+$unnnic-color-yellow-900: #633720;
+$unnnic-color-yellow-950: #391B0F;
+$unnnic-color-bg-base: #FFFFFF;
+$unnnic-color-bg-soft: #F6F7F9;
+$unnnic-color-bg-muted: #ECEEF2;
+$unnnic-color-bg-active: #00A49F;
+$unnnic-color-bg-info: #E5EEF9;
+$unnnic-color-bg-success: #DAF1E0;
+$unnnic-color-bg-warning: #FBF7EB;
+$unnnic-color-bg-critical: #FDF3F3;
+$unnnic-color-fg-base: #67738B;
+$unnnic-color-fg-muted: #B2B9C7;
+$unnnic-color-fg-emphasized: #353945;
+$unnnic-color-fg-inverted: #FFFFFF;
+$unnnic-color-fg-active: #00A49F;
+$unnnic-color-fg-info: #3182CE;
+$unnnic-color-fg-success: #38A169;
+$unnnic-color-fg-warning: #C88D2A;
+$unnnic-color-fg-critical: #E53E3E;
+$unnnic-color-border-base: #D6D9E1;
+$unnnic-color-border-soft: #ECEEF2;
+$unnnic-color-border-muted: #D6D9E1;
+$unnnic-color-border-emphasized: #8893A8;
+$unnnic-color-border-active: #00A49F;
+$unnnic-color-border-info: #90BDE9;
+$unnnic-color-border-success: #88CDA4;
+$unnnic-color-border-warning: #E2BC62;
+$unnnic-color-border-critical: #F8A9A9;