@nuvoui/core 1.2.6 → 1.2.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuvoui/core",
-  "version": "1.2.6",
+  "version": "1.2.7",
   "description": "NuvoUI is a human-friendly SCSS framework designed for simplicity, and modern responsive designs.",
   "author": {
     "name": "AALA IT Solutions",
@@ -41,7 +41,7 @@
     "prebuild": "npm run clean",
     "build": "npm run build:scss && npm run build:minify",
     "dev": "sass src/styles/index.scss:dist/nuvoui.css --watch",
-    "prepublishOnly": "npm run format && npm run build"
+    "prepublishOnly": "npm run build"
   },
   "repository": {
     "type": "git",

package/src/styles/abstracts/_config.scss

@@ -1,5 +1,6 @@
 @use "sass:map";
 @use "sass:math";
+@use "sass:list";
 
 // Framework Configuration Options
 $generate-utility-classes: true !default;
@@ -13,7 +14,7 @@ $enable-container-queries: false !default; // todo: pending
 $default-unit: px !default;
 
 // Text
-$base-size: 16 !default;
+$base-size: 16px !default;
 $font-family:
   system-ui,
   -apple-system,
@@ -49,28 +50,60 @@ $color-primitives: (
   "pink": #ec4899,
 ) !default;
 
-// Add item here to include in the theme
-$theme-tokens: ("background", "foreground", "surface", "border", "text-default", "text-muted") !default;
-
 // Default theme config (can be overridden)
 $light-theme: (
-  "background": #fafafa,
-  "foreground": #1a1a1a,
-  "surface": #fff,
-  "border": #e5e7eb,
-  "text-default": #1a1a1a,
-  "text-muted": #4b5563,
+  "bg-base": #fbfafc,
+  "bg-alternate": #1a1a1a,
+  "bg-surface": #fff,
+  "border-base": #e5e7eb,
+  "text-color": #1a1a1a,
+  "text-muted": #1a1a1a8a,
+  "text-subtle": #1a1a1a50,
+  "text-inverted": #f1f1f1,
 ) !default;
 
+// Extract theme tokens from light theme keys
+// Users can still override this if they want to use only a subset
+$theme-tokens: map.keys($light-theme) !default;
+
 $dark-theme: (
-  "background": #1a1a1a,
-  "foreground": #f1f1f1,
-  "surface": #2e2e2e,
-  "border": #2e2e2e,
-  "text-default": #f1f1f1,
-  "text-muted": #a3a3a3,
+  "bg-base": #1a1a1a,
+  "bg-alternate": #f1f1f1,
+  "bg-surface": #2e2e2e,
+  "border-base": #2e2e2e,
+  "text-color": #f1f1f1,
+  "text-muted": #f1f1f18a,
+  "text-subtle": #f1f1f150,
+  "text-inverted": #1a1a1a,
 ) !default;
 
+$basic-colors: (
+  "black": #000,
+  "white": #fff,
+  "transparent": transparent,
+) !default;
+
+@function validate-theme-tokens($theme-map, $required-tokens) {
+  $missing-tokens: ();
+
+  @each $token in $required-tokens {
+    @if not map.has-key($theme-map, $token) {
+      $missing-tokens: list.append($missing-tokens, $token, comma);
+    }
+  }
+
+  @if list.length($missing-tokens) > 0 {
+    @error "Theme is missing required tokens: #{$missing-tokens}";
+  }
+
+  @return list.length($missing-tokens) == 0;
+}
+
+// Validate both themes
+@debug validate-theme-tokens($light-theme, $theme-tokens);
+
+@debug validate-theme-tokens($dark-theme, $theme-tokens);
+
 $shadow-colors: (
   "default": rgb(0 0 0 / 10%),
   "dark": rgb(0 0 0 / 20%),
@@ -103,6 +136,7 @@ $font-sizes: (
   "sm": 0.875rem,
   // 14px
   "md": 1rem,
+  "base": 1rem,
   // 16px
   "lg": 1.25rem,
   // 20px

package/src/styles/layouts/_grid.scss

@@ -216,27 +216,27 @@ $alignments: (
     }
 
     @each $name, $value in $alignments {
-      & .justify-#{$name} {
+      &.justify-#{$name} {
         @include justify($value);
       }
 
-      & .align-#{$name} {
+      &.align-#{$name} {
         @include align($value);
       }
 
-      & .place-#{$name} {
+      &.place-#{$name} {
         @include place($value);
       }
 
       @each $breakpoint, $width in VAR.$breakpoints {
         @media (min-width: #{$width}) {
-          & .justify-#{$name}\@#{$breakpoint} {
+          &.justify-#{$name}\@#{$breakpoint} {
             @include justify($value);
           }
-          & .align-#{$name}\@#{$breakpoint} {
+          &.align-#{$name}\@#{$breakpoint} {
             @include align($value);
           }
-          & .place-#{$name}\@#{$breakpoint} {
+          &.place-#{$name}\@#{$breakpoint} {
             @include place($value);
           }
         }

package/src/styles/mixins-map.json

@@ -0,0 +1,482 @@
+{
+  "^container-base$": "() => mixin.name",
+  "^container-padding-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^container-padding-full$": "() => `${mixin.name}(full)`",
+  "^container-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^container-full$": "() => `${mixin.name}(full)`",
+  "^flex$": "() => mixin.name",
+  "^flex-inline$": "() => mixin.name",
+  "^row$": "() => mixin.name",
+  "^row-reverse$": "() => mixin.name",
+  "^col$": "() => mixin.name",
+  "^col-reverse$": "() => mixin.name",
+  "^wrap$": "() => mixin.name",
+  "^nowrap$": "() => mixin.name",
+  "^wrap-reverse$": "() => mixin.name",
+  "^start$": "() => mixin.name",
+  "^end$": "() => mixin.name",
+  "^center$": "() => mixin.name",
+  "^stretch$": "() => mixin.name",
+  "^between$": "() => mixin.name",
+  "^around$": "() => mixin.name",
+  "^evenly$": "() => mixin.name",
+  "^x-start$": "() => mixin.name",
+  "^x-end$": "() => mixin.name",
+  "^x-center$": "() => mixin.name",
+  "^x-stretch$": "() => mixin.name",
+  "^x-baseline$": "() => mixin.name",
+  "^x-content-start$": "() => mixin.name",
+  "^x-content-end$": "() => mixin.name",
+  "^x-content-center$": "() => mixin.name",
+  "^x-content-between$": "() => mixin.name",
+  "^x-content-around$": "() => mixin.name",
+  "^x-content-evenly$": "() => mixin.name",
+  "^x-content-stretch$": "() => mixin.name",
+  "^self-auto$": "() => mixin.name",
+  "^self-start$": "() => mixin.name",
+  "^self-end$": "() => mixin.name",
+  "^self-center$": "() => mixin.name",
+  "^self-stretch$": "() => mixin.name",
+  "^self-baseline$": "() => mixin.name",
+  "^shrink$": "() => mixin.name",
+  "^no-shrink$": "() => mixin.name",
+  "^shrink-twice$": "() => mixin.name",
+  "^fill-full$": "() => `${mixin.name}(full)`",
+  "^fill-auto$": "() => mixin.name",
+  "^grow$": "() => mixin.name",
+  "^no-grow$": "() => mixin.name",
+  "^grow-only$": "() => mixin.name",
+  "^fill-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^grid$": "() => mixin.name",
+  "^grid-inline$": "() => mixin.name",
+  "^cols-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^cols-full$": "() => `${mixin.name}(full)`",
+  "^rows-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^rows-full$": "() => `${mixin.name}(full)`",
+  "^cols-custom-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^cols-custom-full$": "() => `${mixin.name}(full)`",
+  "^auto-fit-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^auto-fit-full$": "() => `${mixin.name}(full)`",
+  "^auto-fill-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^auto-fill-full$": "() => `${mixin.name}(full)`",
+  "^flow-in-row$": "() => mixin.name",
+  "^flow-in-col$": "() => mixin.name",
+  "^flow-dense-items$": "() => mixin.name",
+  "^justify-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^justify-full$": "() => `${mixin.name}(full)`",
+  "^align-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^align-full$": "() => `${mixin.name}(full)`",
+  "^place-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^place-full$": "() => `${mixin.name}(full)`",
+  "^col-span-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^col-span-full$": "() => `${mixin.name}(full)`",
+  "^row-span-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^row-span-full$": "() => `${mixin.name}(full)`",
+  "^col-start-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^col-start-full$": "() => `${mixin.name}(full)`",
+  "^col-end-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^col-end-full$": "() => `${mixin.name}(full)`",
+  "^row-start-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^row-start-full$": "() => `${mixin.name}(full)`",
+  "^row-end-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^row-end-full$": "() => `${mixin.name}(full)`",
+  "^grid-position-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^grid-position-(\\w+)-(\\w+)$": "(match) => `${mixin.name}(match[1], match[2])`",
+  "^grid-position-full$": "() => `${mixin.name}(full)`",
+  "^position-col-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^position-col-full$": "() => `${mixin.name}(full)`",
+  "^position-row-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^position-row-full$": "() => `${mixin.name}(full)`",
+  "^align-baseline$": "() => mixin.name",
+  "^align-top$": "() => mixin.name",
+  "^align-middle$": "() => mixin.name",
+  "^align-bottom$": "() => mixin.name",
+  "^ensure-keyframes-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^ensure-keyframes-full$": "() => `${mixin.name}(full)`",
+  "^animate-bounce-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^animate-bounce-full$": "() => `${mixin.name}(full)`",
+  "^animate-pulse-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^animate-pulse-full$": "() => `${mixin.name}(full)`",
+  "^animate-spin-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^animate-spin-full$": "() => `${mixin.name}(full)`",
+  "^animate-ping-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^animate-ping-full$": "() => `${mixin.name}(full)`",
+  "^animate-fade-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^animate-fade-full$": "() => `${mixin.name}(full)`",
+  "^animate-shake-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^animate-shake-full$": "() => `${mixin.name}(full)`",
+  "^backdrop-filter-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^backdrop-filter-full$": "() => `${mixin.name}(full)`",
+  "^backdrop-layer$": "() => mixin.name",
+  "^backdrop-blur-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^backdrop-blur-full$": "() => `${mixin.name}(full)`",
+  "^backdrop-brightness-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^backdrop-brightness-full$": "() => `${mixin.name}(full)`",
+  "^backdrop-contrast-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^backdrop-contrast-full$": "() => `${mixin.name}(full)`",
+  "^backdrop-grayscale-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^backdrop-grayscale-full$": "() => `${mixin.name}(full)`",
+  "^backdrop-hue-rotate-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^backdrop-hue-rotate-full$": "() => `${mixin.name}(full)`",
+  "^backdrop-invert-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^backdrop-invert-full$": "() => `${mixin.name}(full)`",
+  "^backdrop-saturate-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^backdrop-saturate-full$": "() => `${mixin.name}(full)`",
+  "^backdrop-sepia-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^backdrop-sepia-full$": "() => `${mixin.name}(full)`",
+  "^backdrop-frosted$": "() => mixin.name",
+  "^backdrop-glass$": "() => mixin.name",
+  "^backdrop-dark-glass$": "() => mixin.name",
+  "^backdrop-crystal$": "() => mixin.name",
+  "^backdrop-matte$": "() => mixin.name",
+  "^backdrop-none$": "() => mixin.name",
+  "^generate-backdrop-filter-utilities-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^generate-backdrop-filter-utilities-full$": "() => `${mixin.name}(full)`",
+  "^border-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^border-(\\w+)-(\\w+)$": "(match) => `${mixin.name}(match[1], match[2])`",
+  "^border-(\\w+)-(\\w+)-(\\w+)$": "(match) => `${mixin.name}(match[1], match[2], match[3])`",
+  "^border-full$": "() => `${mixin.name}(full)`",
+  "^border-top-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^border-top-full$": "() => `${mixin.name}(full)`",
+  "^border-right-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^border-right-full$": "() => `${mixin.name}(full)`",
+  "^border-bottom-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^border-bottom-full$": "() => `${mixin.name}(full)`",
+  "^border-left-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^border-left-full$": "() => `${mixin.name}(full)`",
+  "^rounded-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^rounded-full$": "() => `${mixin.name}(full)`",
+  "^rounded-t-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^rounded-t-full$": "() => `${mixin.name}(full)`",
+  "^rounded-r-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^rounded-r-full$": "() => `${mixin.name}(full)`",
+  "^rounded-b-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^rounded-b-full$": "() => `${mixin.name}(full)`",
+  "^rounded-l-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^rounded-l-full$": "() => `${mixin.name}(full)`",
+  "^rounded-tl-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^rounded-tl-full$": "() => `${mixin.name}(full)`",
+  "^rounded-tr-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^rounded-tr-full$": "() => `${mixin.name}(full)`",
+  "^rounded-br-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^rounded-br-full$": "() => `${mixin.name}(full)`",
+  "^rounded-bl-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^rounded-bl-full$": "() => `${mixin.name}(full)`",
+  "^border-style-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^border-style-full$": "() => `${mixin.name}(full)`",
+  "^border-color-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^border-color-full$": "() => `${mixin.name}(full)`",
+  "^border-all-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^border-all-(\\w+)-(\\w+)$": "(match) => `${mixin.name}(match[1], match[2])`",
+  "^border-all-(\\w+)-(\\w+)-(\\w+)$": "(match) => `${mixin.name}(match[1], match[2], match[3])`",
+  "^border-all-full$": "() => `${mixin.name}(full)`",
+  "^pill$": "() => mixin.name",
+  "^adaptive-contrast-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^adaptive-contrast-full$": "() => `${mixin.name}(full)`",
+  "^bg-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^bg-full$": "() => `${mixin.name}(full)`",
+  "^color-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^color-full$": "() => `${mixin.name}(full)`",
+  "^gradient-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^gradient-(\\w+)-(\\w+)$": "(match) => `${mixin.name}(match[1], match[2])`",
+  "^gradient-full$": "() => `${mixin.name}(full)`",
+  "^container-up-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^container-up-(\\w+)-(\\w+)$": "(match) => `${mixin.name}(match[1], match[2])`",
+  "^container-up-full$": "() => `${mixin.name}(full)`",
+  "^container-down-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^container-down-(\\w+)-(\\w+)$": "(match) => `${mixin.name}(match[1], match[2])`",
+  "^container-down-full$": "() => `${mixin.name}(full)`",
+  "^container-between-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^container-between-(\\w+)-(\\w+)$": "(match) => `${mixin.name}(match[1], match[2])`",
+  "^container-between-(\\w+)-(\\w+)-(\\w+)$": "(match) => `${mixin.name}(match[1], match[2], match[3])`",
+  "^container-between-full$": "() => `${mixin.name}(full)`",
+  "^container-only-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^container-only-(\\w+)-(\\w+)$": "(match) => `${mixin.name}(match[1], match[2])`",
+  "^container-only-full$": "() => `${mixin.name}(full)`",
+  "^container-query-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^container-query-(\\w+)-(\\w+)$": "(match) => `${mixin.name}(match[1], match[2])`",
+  "^container-query-full$": "() => `${mixin.name}(full)`",
+  "^container-type-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^container-type-full$": "() => `${mixin.name}(full)`",
+  "^container-name-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^container-name-full$": "() => `${mixin.name}(full)`",
+  "^cursor-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^cursor-full$": "() => `${mixin.name}(full)`",
+  "^hide$": "() => mixin.name",
+  "^block$": "() => mixin.name",
+  "^inline$": "() => mixin.name",
+  "^show$": "() => mixin.name",
+  "^d-tbl$": "() => mixin.name",
+  "^d-tbl-row$": "() => mixin.name",
+  "^d-tbl-cell$": "() => mixin.name",
+  "^visible$": "() => mixin.name",
+  "^invisible$": "() => mixin.name",
+  "^collapse$": "() => mixin.name",
+  "^contents$": "() => mixin.name",
+  "^overflow-hidden$": "() => mixin.name",
+  "^overflow-visible$": "() => mixin.name",
+  "^overflow-scroll$": "() => mixin.name",
+  "^overflow-auto$": "() => mixin.name",
+  "^overflow-x-hidden$": "() => mixin.name",
+  "^overflow-y-hidden$": "() => mixin.name",
+  "^overflow-x-scroll$": "() => mixin.name",
+  "^overflow-y-scroll$": "() => mixin.name",
+  "^overflow-x-auto$": "() => mixin.name",
+  "^overflow-y-auto$": "() => mixin.name",
+  "^media-up-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^media-up-(\\w+)-(\\w+)$": "(match) => `${mixin.name}(match[1], match[2])`",
+  "^media-up-full$": "() => `${mixin.name}(full)`",
+  "^media-down-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^media-down-full$": "() => `${mixin.name}(full)`",
+  "^media-between-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^media-between-(\\w+)-(\\w+)$": "(match) => `${mixin.name}(match[1], match[2])`",
+  "^media-between-full$": "() => `${mixin.name}(full)`",
+  "^media-only-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^media-only-full$": "() => `${mixin.name}(full)`",
+  "^touch$": "() => mixin.name",
+  "^print$": "() => mixin.name",
+  "^supports-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^supports-full$": "() => `${mixin.name}(full)`",
+  "^prefers-dark$": "() => mixin.name",
+  "^dark-mode$": "() => mixin.name",
+  "^landscape$": "() => mixin.name",
+  "^portrait$": "() => mixin.name",
+  "^aspect-ratio-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^aspect-ratio-full$": "() => `${mixin.name}(full)`",
+  "^dvh$": "() => mixin.name",
+  "^safe-area-inset-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^safe-area-inset-(\\w+)-(\\w+)$": "(match) => `${mixin.name}(match[1], match[2])`",
+  "^safe-area-inset-full$": "() => `${mixin.name}(full)`",
+  "^reduced-motion$": "() => mixin.name",
+  "^fine-pointer$": "() => mixin.name",
+  "^display-mode-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^display-mode-full$": "() => `${mixin.name}(full)`",
+  "^high-contrast$": "() => mixin.name",
+  "^opacity-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^opacity-full$": "() => `${mixin.name}(full)`",
+  "^static$": "() => mixin.name",
+  "^fixed$": "() => mixin.name",
+  "^sticky$": "() => mixin.name",
+  "^top-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^top-full$": "() => `${mixin.name}(full)`",
+  "^right-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^right-full$": "() => `${mixin.name}(full)`",
+  "^bottom-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^bottom-full$": "() => `${mixin.name}(full)`",
+  "^left-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^left-full$": "() => `${mixin.name}(full)`",
+  "^absolute-center$": "() => mixin.name",
+  "^shadow-base-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^shadow-base-(\\w+)-(\\w+)$": "(match) => `${mixin.name}(match[1], match[2])`",
+  "^shadow-base-(\\w+)-(\\w+)-(\\w+)$": "(match) => `${mixin.name}(match[1], match[2], match[3])`",
+  "^shadow-base-(\\w+)-(\\w+)-(\\w+)-(\\w+)$": "(match) => `${mixin.name}(match[1], match[2], match[3], match[4])`",
+  "^shadow-base-(\\w+)-(\\w+)-(\\w+)-(\\w+)-(\\w+)$": "(match) => `${mixin.name}(match[1], match[2], match[3], match[4], match[5])`",
+  "^shadow-base-full$": "() => `${mixin.name}(full)`",
+  "^shadow-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^shadow-(\\w+)-(\\w+)$": "(match) => `${mixin.name}(match[1], match[2])`",
+  "^shadow-full$": "() => `${mixin.name}(full)`",
+  "^shadow-inset-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^shadow-inset-(\\w+)-(\\w+)$": "(match) => `${mixin.name}(match[1], match[2])`",
+  "^shadow-inset-full$": "() => `${mixin.name}(full)`",
+  "^elevation-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^elevation-full$": "() => `${mixin.name}(full)`",
+  "^width-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^width-full$": "() => `${mixin.name}(full)`",
+  "^height-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^height-full$": "() => `${mixin.name}(full)`",
+  "^min-width-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^min-width-full$": "() => `${mixin.name}(full)`",
+  "^min-height-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^min-height-full$": "() => `${mixin.name}(full)`",
+  "^max-width-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^max-width-full$": "() => `${mixin.name}(full)`",
+  "^max-height-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^max-height-full$": "() => `${mixin.name}(full)`",
+  "^width-percent-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^width-percent-full$": "() => `${mixin.name}(full)`",
+  "^height-percent-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^height-percent-full$": "() => `${mixin.name}(full)`",
+  "^min-width-percent-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^min-width-percent-full$": "() => `${mixin.name}(full)`",
+  "^min-height-percent-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^min-height-percent-full$": "() => `${mixin.name}(full)`",
+  "^max-width-percent-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^max-width-percent-full$": "() => `${mixin.name}(full)`",
+  "^max-height-percent-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^max-height-percent-full$": "() => `${mixin.name}(full)`",
+  "^w-auto$": "() => mixin.name",
+  "^w-full$": "() => mixin.name",
+  "^h-auto$": "() => mixin.name",
+  "^h-full$": "() => mixin.name",
+  "^w-max$": "() => mixin.name",
+  "^h-max$": "() => mixin.name",
+  "^w-min$": "() => mixin.name",
+  "^h-min$": "() => mixin.name",
+  "^w-fit$": "() => mixin.name",
+  "^h-fit$": "() => mixin.name",
+  "^min-w-full$": "() => mixin.name",
+  "^max-w-full$": "() => mixin.name",
+  "^min-h-full$": "() => mixin.name",
+  "^max-h-full$": "() => mixin.name",
+  "^w-screen$": "() => mixin.name",
+  "^h-screen$": "() => mixin.name",
+  "^p-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^p-full$": "() => `${mixin.name}(full)`",
+  "^px-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^px-full$": "() => `${mixin.name}(full)`",
+  "^py-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^py-full$": "() => `${mixin.name}(full)`",
+  "^pt-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^pt-full$": "() => `${mixin.name}(full)`",
+  "^pr-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^pr-full$": "() => `${mixin.name}(full)`",
+  "^pb-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^pb-full$": "() => `${mixin.name}(full)`",
+  "^pl-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^pl-full$": "() => `${mixin.name}(full)`",
+  "^m-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^m-full$": "() => `${mixin.name}(full)`",
+  "^mx-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^mx-full$": "() => `${mixin.name}(full)`",
+  "^my-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^my-full$": "() => `${mixin.name}(full)`",
+  "^mt-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^mt-full$": "() => `${mixin.name}(full)`",
+  "^mr-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^mr-full$": "() => `${mixin.name}(full)`",
+  "^mb-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^mb-full$": "() => `${mixin.name}(full)`",
+  "^ml-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^ml-full$": "() => `${mixin.name}(full)`",
+  "^ml-auto$": "() => mixin.name",
+  "^mr-auto$": "() => mixin.name",
+  "^mx-auto$": "() => mixin.name",
+  "^inset-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^inset-full$": "() => `${mixin.name}(full)`",
+  "^inset-x-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^inset-x-full$": "() => `${mixin.name}(full)`",
+  "^inset-y-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^inset-y-full$": "() => `${mixin.name}(full)`",
+  "^inset-auto$": "() => mixin.name",
+  "^inset-x-auto$": "() => mixin.name",
+  "^inset-y-auto$": "() => mixin.name",
+  "^space-y-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^space-y-full$": "() => `${mixin.name}(full)`",
+  "^space-x-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^space-x-full$": "() => `${mixin.name}(full)`",
+  "^gap-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^gap-full$": "() => `${mixin.name}(full)`",
+  "^gap-x-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^gap-x-full$": "() => `${mixin.name}(full)`",
+  "^gap-y-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^gap-y-full$": "() => `${mixin.name}(full)`",
+  "^tooltip-variables$": "() => mixin.name",
+  "^apply-transform$": "() => mixin.name",
+  "^translate-x-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^translate-x-full$": "() => `${mixin.name}(full)`",
+  "^translate-y-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^translate-y-full$": "() => `${mixin.name}(full)`",
+  "^translate-z-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^translate-z-full$": "() => `${mixin.name}(full)`",
+  "^translate-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^translate-(\\w+)-(\\w+)$": "(match) => `${mixin.name}(match[1], match[2])`",
+  "^translate-full$": "() => `${mixin.name}(full)`",
+  "^scale-x-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^scale-x-full$": "() => `${mixin.name}(full)`",
+  "^scale-y-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^scale-y-full$": "() => `${mixin.name}(full)`",
+  "^scale-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^scale-full$": "() => `${mixin.name}(full)`",
+  "^rotate-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^rotate-full$": "() => `${mixin.name}(full)`",
+  "^skew-x-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^skew-x-full$": "() => `${mixin.name}(full)`",
+  "^skew-y-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^skew-y-full$": "() => `${mixin.name}(full)`",
+  "^origin-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^origin-full$": "() => `${mixin.name}(full)`",
+  "^transition-none$": "() => mixin.name",
+  "^transition$": "() => mixin.name",
+  "^transition-colors$": "() => mixin.name",
+  "^transition-opacity$": "() => mixin.name",
+  "^transition-shadow$": "() => mixin.name",
+  "^transition-transform$": "() => mixin.name",
+  "^duration-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^duration-full$": "() => `${mixin.name}(full)`",
+  "^ease-linear$": "() => mixin.name",
+  "^ease-in$": "() => mixin.name",
+  "^ease-out$": "() => mixin.name",
+  "^ease-in-out$": "() => mixin.name",
+  "^delay-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^delay-full$": "() => `${mixin.name}(full)`",
+  "^text-size-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^text-size-full$": "() => `${mixin.name}(full)`",
+  "^font-thin$": "() => mixin.name",
+  "^font-extralight$": "() => mixin.name",
+  "^font-light$": "() => mixin.name",
+  "^font-normal$": "() => mixin.name",
+  "^font-medium$": "() => mixin.name",
+  "^font-semibold$": "() => mixin.name",
+  "^font-bold$": "() => mixin.name",
+  "^font-extrabold$": "() => mixin.name",
+  "^font-black$": "() => mixin.name",
+  "^leading-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^leading-full$": "() => `${mixin.name}(full)`",
+  "^leading-none$": "() => mixin.name",
+  "^leading-tight$": "() => mixin.name",
+  "^leading-snug$": "() => mixin.name",
+  "^leading-normal$": "() => mixin.name",
+  "^leading-relaxed$": "() => mixin.name",
+  "^leading-loose$": "() => mixin.name",
+  "^text-left$": "() => mixin.name",
+  "^text-right$": "() => mixin.name",
+  "^text-justify$": "() => mixin.name",
+  "^uppercase$": "() => mixin.name",
+  "^lowercase$": "() => mixin.name",
+  "^capitalize$": "() => mixin.name",
+  "^normal-case$": "() => mixin.name",
+  "^italic$": "() => mixin.name",
+  "^not-italic$": "() => mixin.name",
+  "^underline$": "() => mixin.name",
+  "^line-through$": "() => mixin.name",
+  "^no-underline$": "() => mixin.name",
+  "^truncate$": "() => mixin.name",
+  "^overflow-label$": "() => mixin.name",
+  "^truncate-lines-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^truncate-lines-full$": "() => `${mixin.name}(full)`",
+  "^break-normal$": "() => mixin.name",
+  "^break-words$": "() => mixin.name",
+  "^break-all$": "() => mixin.name",
+  "^whitespace-normal$": "() => mixin.name",
+  "^whitespace-nowrap$": "() => mixin.name",
+  "^whitespace-pre$": "() => mixin.name",
+  "^whitespace-pre-line$": "() => mixin.name",
+  "^whitespace-pre-wrap$": "() => mixin.name",
+  "^tracking-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^tracking-full$": "() => `${mixin.name}(full)`",
+  "^tracking-tighter$": "() => mixin.name",
+  "^tracking-tight$": "() => mixin.name",
+  "^tracking-normal$": "() => mixin.name",
+  "^tracking-wide$": "() => mixin.name",
+  "^tracking-wider$": "() => mixin.name",
+  "^tracking-widest$": "() => mixin.name",
+  "^responsive-typography-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^responsive-typography-full$": "() => `${mixin.name}(full)`",
+  "^z-index-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^z-index-full$": "() => `${mixin.name}(full)`",
+  "^z-index-utilities-(\\w+)$": "(match) => `${mixin.name}(${match[1]})`",
+  "^z-index-utilities-full$": "() => `${mixin.name}(full)`",
+  "^z-base$": "() => mixin.name",
+  "^z-hover$": "() => mixin.name",
+  "^z-dropdown$": "() => mixin.name",
+  "^z-sticky$": "() => mixin.name",
+  "^z-fixed$": "() => mixin.name",
+  "^z-drawer$": "() => mixin.name",
+  "^z-modal$": "() => mixin.name",
+  "^z-popover$": "() => mixin.name",
+  "^z-tooltip$": "() => mixin.name",
+  "^z-overlay$": "() => mixin.name",
+  "^z-toast$": "() => mixin.name",
+  "^z-max$": "() => mixin.name",
+  "^z-auto$": "() => mixin.name"
+}