@weni/unnnic-system 3.3.3 → 3.4.1-alpha.0

package/dist/utils/call.d.ts

@@ -3,9 +3,10 @@ declare namespace _default {
     export { callModal };
 }
 export default _default;
-export function callAlert({ props, containerRef }: {
+export function callAlert({ props, containerRef, seconds }: {
     props: any;
     containerRef: any;
+    seconds: any;
 }): void;
 export function callModal({ props }: {
     props: any;

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

@@ -1 +1 @@
-{"version":3,"file":"call.d.ts","sourceRoot":"","sources":["../../src/utils/call.js"],"names":[],"mappings":";;;;;AAOA;;;SAqBC;AAED;;SAeC"}
+{"version":3,"file":"call.d.ts","sourceRoot":"","sources":["../../src/utils/call.js"],"names":[],"mappings":";;;;;AAOA;;;;SAiDC;AAED;;SAeC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weni/unnnic-system",
-  "version": "3.3.3",
+  "version": "3.4.1-alpha.0",
   "type": "commonjs",
   "files": [
     "dist",
@@ -52,12 +52,16 @@
   },
   "dependencies": {
     "@vueuse/components": "^10.4.1",
+    "@vueuse/core": "^14.0.0",
     "emoji-mart-vue-fast": "^15.0.5",
     "lodash": "^4.17.21",
+    "lucide-vue-next": "^0.546.0",
     "mime": "^4.0.1",
     "mitt": "^3.0.1",
     "moment": "^2.30.1",
+    "reka-ui": "^2.6.0",
     "remark-gfm": "^4.0.0",
+    "tw-animate-css": "^1.4.0",
     "vue": "^3.4.8",
     "vue-i18n": "9",
     "vue-the-mask": "^0.11.1"
@@ -84,16 +88,24 @@
     "@vue/eslint-config-typescript": "^14.6.0",
     "@vue/test-utils": "^2.4.6",
     "@weni/eslint-config": "^2.0.0",
+    "ajv": "^8.17.1",
+    "autoprefixer": "^10.4.21",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
     "eslint": "^9.37.0",
     "eslint-plugin-storybook": "^0.8.0",
     "eslint-plugin-vue": "10.4.0",
     "jsdom": "^24.1.1",
+    "postcss": "^8.5.6",
     "prettier": "3.6.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sass": "^1.63.0",
     "storybook": "^8.0.10",
     "style-dictionary": "^5.0.1",
+    "tailwind-merge": "^3.3.1",
+    "tailwindcss": "^3.4.18",
+    "tailwindcss-animate": "^1.0.7",
     "typescript": "^5.9.2",
     "vite": "4.3.5",
     "vite-plugin-dts": "^4.5.4",
@@ -101,4 +113,4 @@
     "vue-eslint-parser": "^9.4.2",
     "vue-tsc": "^3.0.5"
   }
-}
+}

package/src/assets/icons/radio-checked.svg

@@ -0,0 +1,3 @@
+<svg width="9" height="9" viewBox="0 0 9 9" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="4.5" cy="4.5" r="4" fill="white"/>
+</svg>

package/src/assets/icons/switch-checked-disabled.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect y="0.5" width="16" height="16" rx="8" fill="#D6D9E1"/>
+</svg>

package/src/assets/icons/switch-checked.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect y="0.5" width="16" height="16" rx="8" fill="white"/>
+</svg>

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

@@ -0,0 +1,119 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$unnnic-color-white-hsl: 0 0% 100%; /* #FFFFFF */
+$unnnic-color-black-hsl: 0 0% 0%; /* #000000 */
+$unnnic-color-gray-50-hsl: 220 20% 97%; /* #F6F7F9 */
+$unnnic-color-gray-100-hsl: 220 19% 94%; /* #ECEEF2 */
+$unnnic-color-gray-200-hsl: 224 15% 86%; /* #D6D9E1 */
+$unnnic-color-gray-300-hsl: 220 16% 74%; /* #B2B9C7 */
+$unnnic-color-gray-400-hsl: 219 16% 60%; /* #8893A8 */
+$unnnic-color-gray-500-hsl: 220 15% 47%; /* #67738B */
+$unnnic-color-gray-600-hsl: 222 16% 39%; /* #545E75 */
+$unnnic-color-gray-700-hsl: 222 16% 32%; /* #454D5F */
+$unnnic-color-gray-800-hsl: 224 16% 27%; /* #3B4151 */
+$unnnic-color-gray-900-hsl: 225 13% 24%; /* #353945 */
+$unnnic-color-gray-950-hsl: 224 14% 16%; /* #23262E */
+$unnnic-color-teal-50-hsl: 172 88% 97%; /* #EFFEFC */
+$unnnic-color-teal-100-hsl: 171 100% 89%; /* #C7FFF7 */
+$unnnic-color-teal-200-hsl: 171 100% 78%; /* #90FFEF */
+$unnnic-color-teal-300-hsl: 174 91% 64%; /* #51F7E7 */
+$unnnic-color-teal-400-hsl: 176 79% 50%; /* #1DE4D7 */
+$unnnic-color-teal-500-hsl: 177 96% 40%; /* #04C8BD */
+$unnnic-color-teal-600-hsl: 178 100% 32%; /* #00A49F */
+$unnnic-color-teal-700-hsl: 179 92% 26%; /* #05807D */
+$unnnic-color-teal-800-hsl: 179 82% 22%; /* #0A6564 */
+$unnnic-color-teal-900-hsl: 179 73% 19%; /* #0D5453 */
+$unnnic-color-teal-950-hsl: 182 100% 10%; /* #003133 */
+$unnnic-color-green-50-hsl: 140 43% 96%; /* #F0F9F3 */
+$unnnic-color-green-100-hsl: 136 45% 90%; /* #DAF1E0 */
+$unnnic-color-green-200-hsl: 140 44% 80%; /* #B7E3C6 */
+$unnnic-color-green-300-hsl: 144 41% 67%; /* #88CDA4 */
+$unnnic-color-green-400-hsl: 146 37% 52%; /* #56B17E */
+$unnnic-color-green-500-hsl: 148 48% 43%; /* #38A169 */
+$unnnic-color-green-600-hsl: 149 54% 30%; /* #24774C */
+$unnnic-color-green-700-hsl: 151 53% 24%; /* #1D5F3F */
+$unnnic-color-green-800-hsl: 152 50% 20%; /* #194C34 */
+$unnnic-color-green-900-hsl: 153 50% 16%; /* #153F2C */
+$unnnic-color-green-950-hsl: 153 52% 9%; /* #0B2318 */
+$unnnic-color-blue-50-hsl: 213 73% 97%; /* #F2F7FD */
+$unnnic-color-blue-100-hsl: 213 63% 94%; /* #E5EEF9 */
+$unnnic-color-blue-200-hsl: 211 66% 86%; /* #C4DBF3 */
+$unnnic-color-blue-300-hsl: 210 67% 74%; /* #90BDE9 */
+$unnnic-color-blue-400-hsl: 209 65% 60%; /* #559BDB */
+$unnnic-color-blue-500-hsl: 209 62% 50%; /* #3182CE */
+$unnnic-color-blue-600-hsl: 211 68% 39%; /* #2062A9 */
+$unnnic-color-blue-700-hsl: 212 67% 32%; /* #1B4F89 */
+$unnnic-color-blue-800-hsl: 211 63% 27%; /* #1A4472 */
+$unnnic-color-blue-900-hsl: 213 56% 24%; /* #1B3A5F */
+$unnnic-color-blue-950-hsl: 215 56% 16%; /* #12253F */
+$unnnic-color-purple-50-hsl: 248 67% 98%; /* #F6F5FD */
+$unnnic-color-purple-100-hsl: 248 65% 95%; /* #EEECFB */
+$unnnic-color-purple-200-hsl: 246 67% 92%; /* #DFDCF8 */
+$unnnic-color-purple-300-hsl: 249 68% 85%; /* #C7BFF3 */
+$unnnic-color-purple-400-hsl: 251 65% 76%; /* #AA9BEA */
+$unnnic-color-purple-500-hsl: 255 64% 66%; /* #8D72E0 */
+$unnnic-color-purple-600-hsl: 259 59% 59%; /* #805AD5 */
+$unnnic-color-purple-700-hsl: 260 50% 50%; /* #6B41C0 */
+$unnnic-color-purple-800-hsl: 260 50% 42%; /* #5A36A1 */
+$unnnic-color-purple-900-hsl: 260 48% 35%; /* #4B2E84 */
+$unnnic-color-purple-950-hsl: 258 52% 23%; /* #2E1C59 */
+$unnnic-color-red-50-hsl: 0 71% 97%; /* #FDF3F3 */
+$unnnic-color-red-100-hsl: 0 87% 94%; /* #FDE3E3 */
+$unnnic-color-red-200-hsl: 0 89% 89%; /* #FCCCCC */
+$unnnic-color-red-300-hsl: 0 85% 82%; /* #F8A9A9 */
+$unnnic-color-red-400-hsl: 0 83% 71%; /* #F27777 */
+$unnnic-color-red-500-hsl: 0 76% 57%; /* #E53E3E */
+$unnnic-color-red-600-hsl: 0 65% 51%; /* #D32F2F */
+$unnnic-color-red-700-hsl: 0 67% 42%; /* #B22323 */
+$unnnic-color-red-800-hsl: 0 63% 35%; /* #932121 */
+$unnnic-color-red-900-hsl: 0 56% 31%; /* #7A2222 */
+$unnnic-color-red-950-hsl: 0 67% 15%; /* #420D0D */
+$unnnic-color-orange-50-hsl: 39 78% 96%; /* #FDF8EF */
+$unnnic-color-orange-100-hsl: 37 81% 92%; /* #FBEED9 */
+$unnnic-color-orange-200-hsl: 35 81% 83%; /* #F7DAB1 */
+$unnnic-color-orange-300-hsl: 34 80% 72%; /* #F1C080 */
+$unnnic-color-orange-400-hsl: 31 80% 61%; /* #EB9D4C */
+$unnnic-color-orange-500-hsl: 28 78% 53%; /* #E5812A */
+$unnnic-color-orange-600-hsl: 24 75% 50%; /* #DD6B20 */
+$unnnic-color-orange-700-hsl: 21 73% 40%; /* #B2501C */
+$unnnic-color-orange-800-hsl: 18 65% 34%; /* #8E401E */
+$unnnic-color-orange-900-hsl: 18 62% 28%; /* #73361B */
+$unnnic-color-orange-950-hsl: 17 68% 15%; /* #3E1A0C */
+$unnnic-color-yellow-50-hsl: 45 67% 95%; /* #FBF7EB */
+$unnnic-color-yellow-100-hsl: 48 67% 88%; /* #F5EDCC */
+$unnnic-color-yellow-200-hsl: 45 69% 77%; /* #EDD89B */
+$unnnic-color-yellow-300-hsl: 42 69% 64%; /* #E2BC62 */
+$unnnic-color-yellow-400-hsl: 40 67% 51%; /* #D69E2E */
+$unnnic-color-yellow-500-hsl: 38 65% 47%; /* #C88D2A */
+$unnnic-color-yellow-600-hsl: 33 67% 40%; /* #AC6E22 */
+$unnnic-color-yellow-700-hsl: 28 64% 33%; /* #8A501E */
+$unnnic-color-yellow-800-hsl: 24 56% 29%; /* #734120 */
+$unnnic-color-yellow-900-hsl: 21 51% 26%; /* #633720 */
+$unnnic-color-yellow-950-hsl: 17 58% 14%; /* #391B0F */
+$unnnic-color-bg-base-hsl: 0 0% 100%; /* #FFFFFF */
+$unnnic-color-bg-soft-hsl: 220 20% 97%; /* #F6F7F9 */
+$unnnic-color-bg-muted-hsl: 220 19% 94%; /* #ECEEF2 */
+$unnnic-color-bg-active-hsl: 178 100% 32%; /* #00A49F */
+$unnnic-color-bg-info-hsl: 213 73% 97%; /* #F2F7FD */
+$unnnic-color-bg-success-hsl: 140 43% 96%; /* #F0F9F3 */
+$unnnic-color-bg-warning-hsl: 45 67% 95%; /* #FBF7EB */
+$unnnic-color-bg-critical-hsl: 0 71% 97%; /* #FDF3F3 */
+$unnnic-color-fg-base-hsl: 220 15% 47%; /* #67738B */
+$unnnic-color-fg-muted-hsl: 220 16% 74%; /* #B2B9C7 */
+$unnnic-color-fg-emphasized-hsl: 225 13% 24%; /* #353945 */
+$unnnic-color-fg-inverted-hsl: 0 0% 100%; /* #FFFFFF */
+$unnnic-color-fg-active-hsl: 178 100% 32%; /* #00A49F */
+$unnnic-color-fg-info-hsl: 209 62% 50%; /* #3182CE */
+$unnnic-color-fg-success-hsl: 148 48% 43%; /* #38A169 */
+$unnnic-color-fg-warning-hsl: 38 65% 47%; /* #C88D2A */
+$unnnic-color-fg-critical-hsl: 0 76% 57%; /* #E53E3E */
+$unnnic-color-border-base-hsl: 224 15% 86%; /* #D6D9E1 */
+$unnnic-color-border-soft-hsl: 220 19% 94%; /* #ECEEF2 */
+$unnnic-color-border-muted-hsl: 224 15% 86%; /* #D6D9E1 */
+$unnnic-color-border-emphasized-hsl: 219 16% 60%; /* #8893A8 */
+$unnnic-color-border-active-hsl: 178 100% 32%; /* #00A49F */
+$unnnic-color-border-info-hsl: 210 67% 74%; /* #90BDE9 */
+$unnnic-color-border-success-hsl: 144 41% 67%; /* #88CDA4 */
+$unnnic-color-border-warning-hsl: 42 69% 64%; /* #E2BC62 */
+$unnnic-color-border-critical-hsl: 0 85% 82%; /* #F8A9A9 */

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

@@ -3,242 +3,118 @@
 
 // Global scheme colors mapping for all components
 
-$unnnic-scheme-colors:
-  'white' $unnnic-color-white,
-
-  'black' $unnnic-color-black,
-
-  '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,
-
-  '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,
-
-  'green-50' $unnnic-color-green-50,
-  'green-100' $unnnic-color-green-100,
-  'green-200' $unnnic-color-green-200,
-  'green-300' $unnnic-color-green-300,
-  'green-400' $unnnic-color-green-400,
-  'green-500' $unnnic-color-green-500,
-  'green-600' $unnnic-color-green-600,
-  'green-700' $unnnic-color-green-700,
-  'green-800' $unnnic-color-green-800,
-  'green-900' $unnnic-color-green-900,
-  'green-950' $unnnic-color-green-950,
-
-  'blue-50' $unnnic-color-blue-50,
-  'blue-100' $unnnic-color-blue-100,
-  'blue-200' $unnnic-color-blue-200,
-  'blue-300' $unnnic-color-blue-300,
-  'blue-400' $unnnic-color-blue-400,
-  'blue-500' $unnnic-color-blue-500,
-  'blue-600' $unnnic-color-blue-600,
-  'blue-700' $unnnic-color-blue-700,
-  'blue-800' $unnnic-color-blue-800,
-  'blue-900' $unnnic-color-blue-900,
-  'blue-950' $unnnic-color-blue-950,
-
-  'purple-50' $unnnic-color-purple-50,
-  'purple-100' $unnnic-color-purple-100,
-  'purple-200' $unnnic-color-purple-200,
-  'purple-300' $unnnic-color-purple-300,
-  'purple-400' $unnnic-color-purple-400,
-  'purple-500' $unnnic-color-purple-500,
-  'purple-600' $unnnic-color-purple-600,
-  'purple-700' $unnnic-color-purple-700,
-  'purple-800' $unnnic-color-purple-800,
-  'purple-900' $unnnic-color-purple-900,
-  'purple-950' $unnnic-color-purple-950,
-
-  'red-50' $unnnic-color-red-50,
-  'red-100' $unnnic-color-red-100,
-  'red-200' $unnnic-color-red-200,
-  'red-300' $unnnic-color-red-300,
-  'red-400' $unnnic-color-red-400,
-  'red-500' $unnnic-color-red-500,
-  'red-600' $unnnic-color-red-600,
-  'red-700' $unnnic-color-red-700,
-  'red-800' $unnnic-color-red-800,
-  'red-900' $unnnic-color-red-900,
-  'red-950' $unnnic-color-red-950,
-
-  'orange-50' $unnnic-color-orange-50,
-  'orange-100' $unnnic-color-orange-100,
-  'orange-200' $unnnic-color-orange-200,
-  'orange-300' $unnnic-color-orange-300,
-  'orange-400' $unnnic-color-orange-400,
-  'orange-500' $unnnic-color-orange-500,
-  'orange-600' $unnnic-color-orange-600,
-  'orange-700' $unnnic-color-orange-700,
-  'orange-800' $unnnic-color-orange-800,
-  'orange-900' $unnnic-color-orange-900,
-  'orange-950' $unnnic-color-orange-950,
-
-  'yellow-50' $unnnic-color-yellow-50,
-  'yellow-100' $unnnic-color-yellow-100,
-  'yellow-200' $unnnic-color-yellow-200,
-  'yellow-300' $unnnic-color-yellow-300,
-  'yellow-400' $unnnic-color-yellow-400,
-  'yellow-500' $unnnic-color-yellow-500,
-  'yellow-600' $unnnic-color-yellow-600,
-  'yellow-700' $unnnic-color-yellow-700,
-  'yellow-800' $unnnic-color-yellow-800,
-  'yellow-900' $unnnic-color-yellow-900,
-  'yellow-950' $unnnic-color-yellow-950,
-
-  '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,
-
-  '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-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,
-
-  // Deprecated
-  'background-solo' $unnnic-color-teal-50,
-  'background-sky' $unnnic-color-gray-50,
-  'background-grass' $unnnic-color-green-50,
-  'background-carpet' $unnnic-color-gray-50,
-  'background-snow' $unnnic-color-white,
-  'background-lightest' $unnnic-color-gray-50,
-  'background-white' $unnnic-color-white,
-  
-  'neutral-black' $unnnic-color-gray-900,
-  'neutral-darkest' $unnnic-color-gray-800,
-  'neutral-dark' $unnnic-color-gray-700,
-  'neutral-cloudy' $unnnic-color-gray-500,
-  'neutral-cleanest' $unnnic-color-gray-200,
-  'neutral-clean' $unnnic-color-gray-300,
-  'neutral-soft' $unnnic-color-gray-100,
-  'neutral-lightest' $unnnic-color-gray-50,
-  'neutral-light' $unnnic-color-gray-50,
-  'neutral-white' $unnnic-color-white,
-  'neutral-snow' $unnnic-color-white,
-  
-  'feedback-red' $unnnic-color-red-500,
-  'feedback-green' $unnnic-color-green-500,
-  'feedback-yellow' $unnnic-color-yellow-500,
-  'feedback-blue' $unnnic-color-blue-500,
-  'feedback-grey' $unnnic-color-gray-500,
-  
-  'aux-blue' $unnnic-color-blue-500,
-  'aux-purple' $unnnic-color-purple-500,
-  'aux-orange' $unnnic-color-orange-500,
-  'aux-lemon' $unnnic-color-yellow-400,
-  'aux-pink' $unnnic-color-red-300,
-  'aux-baby-blue' $unnnic-color-blue-200,
-  'aux-baby-yellow' $unnnic-color-yellow-200,
-  'aux-baby-red' $unnnic-color-red-200,
-  'aux-baby-green' $unnnic-color-green-200,
-  'aux-baby-pink' $unnnic-color-red-100,
-  
-  'aux-green-100' $unnnic-color-green-100,
-  'aux-green-300' $unnnic-color-green-300,
-  'aux-green-500' $unnnic-color-green-500,
-  'aux-green-700' $unnnic-color-green-700,
-  'aux-green-900' $unnnic-color-green-900,
-  'aux-blue-100' $unnnic-color-blue-100,
-  'aux-blue-300' $unnnic-color-blue-300,
-  'aux-blue-500' $unnnic-color-blue-500,
-  'aux-blue-700' $unnnic-color-blue-700,
-  'aux-blue-900' $unnnic-color-blue-900,
-  'aux-purple-100' $unnnic-color-purple-100,
-  'aux-purple-300' $unnnic-color-purple-300,
-  'aux-purple-500' $unnnic-color-purple-500,
-  'aux-purple-700' $unnnic-color-purple-700,
-  'aux-purple-900' $unnnic-color-purple-900,
-  'aux-red-100' $unnnic-color-red-100,
-  'aux-red-300' $unnnic-color-red-300,
-  'aux-red-500' $unnnic-color-red-500,
-  'aux-red-700' $unnnic-color-red-700,
-  'aux-red-900' $unnnic-color-red-900,
-  'aux-orange-100' $unnnic-color-orange-100,
-  'aux-orange-300' $unnnic-color-orange-300,
-  'aux-orange-500' $unnnic-color-orange-500,
-  'aux-orange-700' $unnnic-color-orange-700,
-  'aux-orange-900' $unnnic-color-orange-900,
-  'aux-yellow-100' $unnnic-color-yellow-100,
-  'aux-yellow-300' $unnnic-color-yellow-300,
-  'aux-yellow-500' $unnnic-color-yellow-500,
-  'aux-yellow-700' $unnnic-color-yellow-700,
-  'aux-yellow-900' $unnnic-color-yellow-900,
-  
-  'floweditor-blue' $unnnic-color-blue-600,
-  'floweditor-purple' $unnnic-color-purple-600,
-  'floweditor-wine' $unnnic-color-red-800,
-  'floweditor-orange' $unnnic-color-orange-600,
-  'floweditor-pink' $unnnic-color-red-400,
-  'floweditor-turquoise' $unnnic-color-teal-500,
-  'floweditor-green' $unnnic-color-green-600,
-  
-  'weni-50' $unnnic-color-teal-50,
-  'weni-100' $unnnic-color-teal-100,
-  'weni-200' $unnnic-color-teal-200,
-  'weni-300' $unnnic-color-teal-300,
-  'weni-400' $unnnic-color-teal-400,
-  'weni-500' $unnnic-color-teal-500,
-  'weni-600' $unnnic-color-teal-600,
-  'weni-700' $unnnic-color-teal-700,
-  'weni-800' $unnnic-color-teal-800,
-  'weni-900' $unnnic-color-teal-900,
-  'weni-950' $unnnic-color-teal-950,
-  'brand-weni' $unnnic-color-teal-600,
-  'brand-weni-dark' $unnnic-color-teal-800,
-  'brand-weni-soft' $unnnic-color-teal-100,
-  'brand-sec-dark' $unnnic-color-blue-800,
-  'brand-sec-soft' $unnnic-color-blue-100,
-  'brand-sec' $unnnic-color-blue-600,
-
-  '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;
+$unnnic-scheme-colors: 'background-solo'$unnnic-color-teal-50,
+  'background-sky'$unnnic-color-gray-50,
+  'background-grass'$unnnic-color-green-50,
+  'background-carpet'$unnnic-color-gray-50,
+  'background-snow'$unnnic-color-white,
+  'background-lightest'$unnnic-color-gray-50,
+  'background-white'$unnnic-color-white,
+
+  'neutral-black'$unnnic-color-gray-900,
+  'neutral-darkest'$unnnic-color-gray-800,
+  'neutral-dark'$unnnic-color-gray-700,
+  'neutral-cloudy'$unnnic-color-gray-500,
+  'neutral-cleanest'$unnnic-color-gray-200,
+  'neutral-clean'$unnnic-color-gray-300,
+  'neutral-soft'$unnnic-color-gray-100,
+  'neutral-lightest'$unnnic-color-gray-50,
+  'neutral-light'$unnnic-color-gray-50,
+  'neutral-white'$unnnic-color-white,
+  'neutral-snow'$unnnic-color-white,
+
+  'feedback-red'$unnnic-color-red-500,
+  'feedback-green'$unnnic-color-green-500,
+  'feedback-yellow'$unnnic-color-yellow-500,
+  'feedback-blue'$unnnic-color-blue-500,
+  'feedback-grey'$unnnic-color-gray-500,
+
+  'aux-blue'$unnnic-color-blue-500,
+  'aux-purple'$unnnic-color-purple-500,
+  'aux-orange'$unnnic-color-orange-500,
+  'aux-lemon'$unnnic-color-yellow-400,
+  'aux-pink'$unnnic-color-red-300,
+  'aux-baby-blue'$unnnic-color-blue-200,
+  'aux-baby-yellow'$unnnic-color-yellow-200,
+  'aux-baby-red'$unnnic-color-red-200,
+  'aux-baby-green'$unnnic-color-green-200,
+  'aux-baby-pink'$unnnic-color-red-100,
+
+  'aux-green-100'$unnnic-color-green-100,
+  'aux-green-300'$unnnic-color-green-300,
+  'aux-green-500'$unnnic-color-green-500,
+  'aux-green-700'$unnnic-color-green-700,
+  'aux-green-900'$unnnic-color-green-900,
+  'aux-blue-100'$unnnic-color-blue-100,
+  'aux-blue-300'$unnnic-color-blue-300,
+  'aux-blue-500'$unnnic-color-blue-500,
+  'aux-blue-700'$unnnic-color-blue-700,
+  'aux-blue-900'$unnnic-color-blue-900,
+  'aux-purple-100'$unnnic-color-purple-100,
+  'aux-purple-300'$unnnic-color-purple-300,
+  'aux-purple-500'$unnnic-color-purple-500,
+  'aux-purple-700'$unnnic-color-purple-700,
+  'aux-purple-900'$unnnic-color-purple-900,
+  'aux-red-100'$unnnic-color-red-100,
+  'aux-red-300'$unnnic-color-red-300,
+  'aux-red-500'$unnnic-color-red-500,
+  'aux-red-700'$unnnic-color-red-700,
+  'aux-red-900'$unnnic-color-red-900,
+  'aux-orange-100'$unnnic-color-orange-100,
+  'aux-orange-300'$unnnic-color-orange-300,
+  'aux-orange-500'$unnnic-color-orange-500,
+  'aux-orange-700'$unnnic-color-orange-700,
+  'aux-orange-900'$unnnic-color-orange-900,
+  'aux-yellow-100'$unnnic-color-yellow-100,
+  'aux-yellow-300'$unnnic-color-yellow-300,
+  'aux-yellow-500'$unnnic-color-yellow-500,
+  'aux-yellow-700'$unnnic-color-yellow-700,
+  'aux-yellow-900'$unnnic-color-yellow-900,
+
+  "fg-critical"$unnnic-color-fg-critical,
+  "fg-muted"$unnnic-color-fg-muted,
+  "fg-base"$unnnic-color-fg-base,
+
+  'floweditor-blue'$unnnic-color-blue-600,
+  'floweditor-purple'$unnnic-color-purple-600,
+  'floweditor-wine'$unnnic-color-red-800,
+  'floweditor-orange'$unnnic-color-orange-600,
+  'floweditor-pink'$unnnic-color-red-400,
+  'floweditor-turquoise'$unnnic-color-teal-500,
+  'floweditor-green'$unnnic-color-green-600,
+
+  'weni-50'$unnnic-color-teal-50,
+  'weni-100'$unnnic-color-teal-100,
+  'weni-200'$unnnic-color-teal-200,
+  'weni-300'$unnnic-color-teal-300,
+  'weni-400'$unnnic-color-teal-400,
+  'weni-500'$unnnic-color-teal-500,
+  'weni-600'$unnnic-color-teal-600,
+  'weni-700'$unnnic-color-teal-700,
+  'weni-800'$unnnic-color-teal-800,
+  'weni-900'$unnnic-color-teal-900,
+  'weni-950'$unnnic-color-teal-950,
+  'brand-weni'$unnnic-color-teal-600,
+  'brand-weni-dark'$unnnic-color-teal-800,
+  'brand-weni-soft'$unnnic-color-teal-100,
+  'brand-sec-dark'$unnnic-color-blue-800,
+  'brand-sec-soft'$unnnic-color-blue-100,
+  'brand-sec'$unnnic-color-blue-600,
+
+  'bg-base'$unnnic-color-bg-base,
+  'bg-soft'$unnnic-color-bg-soft,
+
+  '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;
 
 @mixin generate-scheme-classes($component-name, $property: 'background-color') {
   @each $name, $color in $unnnic-scheme-colors {
@@ -250,10 +126,11 @@ $unnnic-scheme-colors:
 
 @function get-scheme-color($name) {
   @each $scheme-name, $color in $unnnic-scheme-colors {
-    @if $scheme-name == $name {
+    @if $scheme-name ==$name {
       @return $color;
     }
   }
+
   @warn "Scheme color '#{$name}' not found in $unnnic-scheme-colors";
   @return null;
-}
+}