@acorex/styles 21.0.3-next.35 → 21.0.3-next.37

package/components/_editor-container.css

@@ -2,14 +2,11 @@
 
 @layer base {
   .ax-editor-container {
-    @apply h-9 min-h-9 px-3 py-3 text-sm;
+    @apply rounded-default relative flex h-default min-h-default items-center justify-between overflow-hidden px-3 py-3 text-sm leading-5;
+
     .ax-content {
       @apply text-sm;
     }
-  }
-
-  .ax-editor-container {
-    @apply rounded-default relative flex h-9 min-h-9 items-center justify-between overflow-hidden px-3 py-3 text-sm leading-5;
 
     .ax-editor-container {
       @apply p-0;
@@ -30,40 +27,65 @@
     }
 
     &.ax-state-error {
-      @apply border-danger-600! focus-within:ring-danger-600/30!;
+      @apply border-danger-600!;
+      &:focus-within {
+        @apply outline-2 outline-offset-0 outline-danger-light;
+      }
     }
 
-    &:has(.ax-general-button-control, .ax-general-button-icon) {
+    /* Keep end padding for spin/clear controls, but not when a suffix button is attached */
+    &:has(.ax-general-button-control, .ax-general-button-icon):not(:has(ax-suffix > ax-button)) {
       @apply pe-2;
     }
 
-    &:has(ax-prefix ax-button) {
-      @apply ps-0;
+    ax-suffix > ax-icon,
+    ax-prefix > ax-icon {
+      @apply text-muted;
     }
 
-    &:has(ax-suffix ax-button) {
-      @apply pe-0;
+    ax-prefix,
+    ax-suffix {
+      @apply flex items-center self-stretch gap-2;
     }
 
-    ax-prefix > ax-button {
-      @apply rounded-e-none!;
+    ax-prefix:has(> ax-button),
+    ax-suffix:has(> ax-button) {
+      @apply items-stretch;
     }
 
-    ax-suffix > ax-button {
-      @apply rounded-s-none!;
+    ax-prefix {
+      @apply pe-2;
     }
+  }
+}
 
-    ax-suffix > ax-icon,
-    ax-prefix > ax-icon {
-      @apply text-muted;
+/* Components layer so these beat button size utilities and spin-button pe-2 */
+@layer components {
+  .ax-editor-container {
+    &:has(ax-prefix > ax-button),
+    &:has(ax-suffix > ax-button) {
+      @apply py-0;
     }
 
-    ax-prefix,
-    ax-suffix {
-      @apply flex items-center gap-2;
+    &:has(ax-prefix > ax-button) {
+      @apply ps-0!;
     }
-    ax-prefix {
-      @apply pe-2;
+
+    &:has(ax-suffix > ax-button) {
+      @apply pe-0!;
+    }
+
+    ax-prefix > ax-button,
+    ax-suffix > ax-button {
+      @apply self-stretch shrink-0 rounded-none!;
+
+      > button {
+        @apply h-full min-h-0 rounded-[inherit]!;
+      }
+
+      &.ax-button-icon > button {
+        @apply aspect-square size-auto! h-full w-auto!;
+      }
     }
   }
 }

package/components/_general-button.css

@@ -7,7 +7,9 @@
     @apply disabled:cursor-not-allowed disabled:opacity-50;
     @apply text-text-default/50 hover:text-text-default/70;
     @apply hover:bg-bg-default/10;
-    @apply focus-visible:ring-primary/30 focus-visible:ring-3 focus-visible:outline-none;
+    &:focus-visible {
+      @apply ax-focus-ring;
+    }
     * {
       @apply cursor-[inherit];
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@acorex/styles",
-  "version": "21.0.3-next.35",
+  "version": "21.0.3-next.37",
   "main": "index.css",
   "author": "Ali Safari",
   "license": "ISC",

package/themes/default.css

@@ -48,37 +48,27 @@ html.ax-dark {
   color: rgba(var(--ax-sys-color-on-darkest-surface));
 }
 
-.ax-xs {
-  --ax-sys-size: ax-xs;
-}
-.ax-sm {
-  --ax-sys-size: ax-sm;
-}
-.ax-md {
-  --ax-sys-size: ax-md;
-}
-.ax-lg {
-  --ax-sys-size: ax-lg;
-}
-.ax-xl {
-  --ax-sys-size: ax-xl;
-}
-
 :root {
   --ax-sys-theme-isDark: 0;
   --ax-sys-icon-size: 100%;
   --ax-sys-icon-weight: 400;
-  --ax-sys-size-base: 2.5rem;
+  /* Immutable md control height (40px) — size utilities step ±8px from this */
+  --ax-sys-size-md: 2.5rem; /* 40px */
+  --ax-sys-size-step: 0.5rem; /* 8px */
+  /* Padding / spacing scale steps ±4px from md */
+  --ax-sys-padding-step: 0.25rem; /* 4px */
+  /* Default matches ax-md */
+  --ax-sys-size-base: var(--ax-sys-size-md);
   --ax-overlay-full-width: 93;
   --ax-sys-icon-width: inherit;
   --ax-sys-icon-height: inherit;
-  --ax-sys-body-font-size: 1rem;
+  --ax-sys-body-font-size: 0.875rem; /* 14px — matches ax-md */
   --ax-sys-border-radius-base: 0.5rem;
   --ax-sys-spacing-base: 0.25rem;
-  --ax-sys-text-xs-base: 0.75rem;
-  --ax-sys-text-sm-base: 0.875rem;
-  --ax-sys-text-lg-base: 1.125rem;
-  --ax-sys-text-xl-base: 1.25rem;
+  --ax-sys-text-xs-base: 0.75rem; /* 12px */
+  --ax-sys-text-sm-base: 0.875rem; /* 14px */
+  --ax-sys-text-lg-base: 0.875rem; /* 14px */
+  --ax-sys-text-xl-base: 1rem; /* 16px */
   --ax-sys-leading-3-base: 0.75rem;
   --ax-sys-leading-4-base: 1rem;
   --ax-sys-leading-5-base: 1.25rem;
@@ -1776,6 +1766,9 @@ html.ax-dark {
   --color-text-default: rgba(var(--ax-sys-color-text-default));
   --color-border-default: rgba(var(--ax-sys-color-border-default));
   --radius-default: var(--ax-sys-border-radius);
+  --spacing-default: var(--ax-sys-size-base);
+  --height-default: var(--ax-sys-size-base);
+  --min-height-default: var(--ax-sys-size-base);
   --breakpoint-3xl: 1920px;
   --breakpoint-4xl: 2560px;
   /* Surface Surfaces */
@@ -2245,17 +2238,12 @@ html.ax-dark {
   --color-on-accent6-darkest: rgba(var(--ax-sys-color-on-accent6-darkest-surface));
   --color-border-accent6-darkest: rgba(var(--ax-sys-color-border-accent6-darkest-surface));
 
-  /* Default scale (matches ax-md) — wired to base tokens so all utilities respond to theme changes */
-  --spacing: var(--ax-sys-spacing-base);
-  --text-xs: var(--ax-sys-text-xs-base);
-  --text-sm: var(--ax-sys-text-sm-base);
-  --text-base: var(--ax-sys-body-font-size);
-  --text-lg: var(--ax-sys-text-lg-base);
-  --text-xl: var(--ax-sys-text-xl-base);
-  --leading-3: var(--ax-sys-leading-3-base);
-  --leading-4: var(--ax-sys-leading-4-base);
-  --leading-5: var(--ax-sys-leading-5-base);
-  --leading-6: var(--ax-sys-leading-6-base);
+  /*
+   * Do NOT put --spacing / --text-* / --leading-* in @theme inline.
+   * inline would bake var(--ax-sys-*-base) into utilities (e.g. p-3 → calc(var(--ax-sys-spacing-base) * 3)),
+   * so ax-sm/ax-lg overrides of --spacing would never take effect.
+   * Those tokens live on :root (and size utilities) so utilities keep referencing var(--spacing) etc.
+   */
 }
 
 @utility text-muted {
@@ -3224,6 +3212,14 @@ html.ax-dark {
   @apply cursor-text opacity-70 *:cursor-text;
 }
 
+@utility ax-focus-ring {
+  @apply shadow-[0_0_0_1px_var(--ax-comp-text,var(--color-on-primary)),0_0_0_3px_var(--ax-comp-bg-light,var(--color-primary-light))] outline-none;
+}
+
+@utility ax-focus-ring-editor {
+  @apply outline-2 outline-offset-0 outline-(--ax-comp-bg-light,var(--color-primary-light));
+}
+
 @utility ax-fill {
   @apply bg-(--ax-comp-bg-lightest,var(--color-lighter)) text-(--ax-comp-text-lightest,var(--color-on-lighter)) dark:bg-(--ax-comp-bg-lightest,var(--color-darker)) dark:text-(--ax-comp-text-lightest,var(--color-on-darker));
   &.ax-default {
@@ -3233,7 +3229,9 @@ html.ax-dark {
     @apply bg-(--ax-comp-bg-lighter,var(--color-light)) text-(--ax-comp-text-lighter,var(--color-on-light)) dark:bg-(--ax-comp-bg-lighter,var(--color-dark)) dark:text-(--ax-comp-text-lighter,var(--color-on-dark));
   }
   &.ax-editor-container {
-    @apply focus-within:ring-primary/30 focus-within:border-primary focus-within:ring-3;
+    &:focus-within {
+      @apply ax-focus-ring-editor;
+    }
   }
 }
 
@@ -3257,7 +3255,7 @@ html.ax-dark {
     }
     &:focus-visible,
     &.ax-state-focus {
-      @apply ring-primary/30 ring-3;
+      @apply ax-focus-ring;
     }
   }
   &:not(.ax-state-disabled, .ax-state-loading, .ax-state-selected):active {
@@ -3275,7 +3273,9 @@ html.ax-dark {
     @apply border-(--ax-comp-bg-darker,var(--color-border-light)) text-(--ax-comp-bg-darker,var(--color-on-light));
   }
   &.ax-editor-container {
-    @apply focus-within:border-primary!;
+    &:focus-within {
+      border-color: var(--ax-comp-bg, var(--color-primary)) !important;
+    }
   }
 }
 
@@ -3295,7 +3295,7 @@ html.ax-dark {
     }
     &:focus-visible,
     &.ax-state-focus {
-      @apply ring-primary/30 ring-3;
+      @apply ax-focus-ring;
     }
   }
   &:not(.ax-state-disabled, .ax-state-loading, .ax-state-selected):active {
@@ -3313,7 +3313,9 @@ html.ax-dark {
     @apply bg-(--ax-comp-bg-darker,var(--color-light)) text-(--ax-comp-text-darker,var(--color-on-light)) dark:bg-(--ax-comp-bg-darker,var(--color-dark)) dark:text-(--ax-comp-text-darker,var(--color-on-dark));
   }
   &.ax-editor-container {
-    @apply focus-within:ring-primary/30 focus-within:border-primary focus-within:ring-3;
+    &:focus-within {
+      @apply ax-focus-ring-editor;
+    }
   }
 }
 
@@ -3337,7 +3339,7 @@ html.ax-dark {
     }
     &:focus-visible,
     &.ax-state-focus {
-      @apply ring-primary/30 ring-3;
+      @apply ax-focus-ring;
     }
   }
   &:not(.ax-state-disabled, .ax-state-loading, .ax-state-selected):active {
@@ -3361,7 +3363,9 @@ html.ax-dark {
     @apply border-(--ax-comp-bg-darker,var(--color-border-light)) text-(--ax-comp-bg-darker,var(--color-on-light));
   }
   &.ax-editor-container {
-    @apply focus-within:ring-primary/30 focus-within:border-primary focus-within:ring-3;
+    &:focus-within {
+      @apply ax-focus-ring-editor;
+    }
   }
 }
 
@@ -3381,7 +3385,7 @@ html.ax-dark {
     }
     &:focus-visible,
     &.ax-state-focus {
-      @apply ring-primary/30 ring-3;
+      @apply ax-focus-ring;
     }
   }
   &:not(.ax-state-disabled, .ax-state-loading, .ax-state-selected):active {
@@ -3417,7 +3421,7 @@ html.ax-dark {
     }
     &:focus-visible,
     &.ax-state-focus {
-      @apply ring-primary/30 ring-3;
+      @apply ax-focus-ring;
     }
   }
   &:not(.ax-state-disabled, .ax-state-loading, .ax-state-selected):active {
@@ -3453,7 +3457,7 @@ html.ax-dark {
     }
     &:focus-visible,
     &.ax-state-focus {
-      @apply ring-primary/30 ring-3;
+      @apply ax-focus-ring;
     }
   }
   &:not(.ax-state-disabled, .ax-state-loading, .ax-state-selected):active {
@@ -3484,7 +3488,7 @@ html.ax-dark {
     }
     &:focus-visible,
     &.ax-state-focus {
-      @apply ring-primary/30 ring-3;
+      @apply ax-focus-ring;
     }
   }
   &:not(.ax-state-disabled, .ax-state-loading, .ax-state-selected):active {
@@ -3561,54 +3565,69 @@ html.ax-dark {
 }
 
 @utility ax-xs {
-  /* Spacing */
-  --spacing: calc(var(--ax-sys-spacing-base) * 0.5);
-  --ax-sys-border-radius: calc(var(--ax-sys-border-radius-base) * 0.5);
+  --ax-sys-size: ax-xs;
+  /* Control height — 24px (md − 16px) */
+  --ax-sys-size-base: calc(var(--ax-sys-size-md) - 2 * var(--ax-sys-size-step));
 
-  /* Typography */
-  --text-xs: calc(var(--ax-sys-text-xs-base) * 5 / 6);
-  --text-sm: calc(var(--ax-sys-text-sm-base) * 11 / 14);
-  --text-base: calc(var(--ax-sys-body-font-size) * 0.75);
-  --text-lg: calc(var(--ax-sys-text-lg-base) * 7 / 9);
-  --text-xl: calc(var(--ax-sys-text-xl-base) * 0.8);
+  /* Spacing — unit 2px (md − 2×4px on the 4px base unit scale via half step) */
+  --spacing: calc(var(--ax-sys-spacing-base) - 0.5 * var(--ax-sys-padding-step));
+  /* Border radius — 4px */
+  --ax-sys-border-radius: calc(var(--ax-sys-border-radius-base) - var(--ax-sys-padding-step));
+
+  /* Typography — 12px */
+  --text-xs: 0.75rem;
+  --text-sm: 0.75rem;
+  --text-base: 0.75rem;
+  --text-lg: 0.75rem;
+  --text-xl: 0.75rem;
 
   /* Line Heights */
   --leading-3: var(--ax-sys-leading-3-base);
-  --leading-4: calc(var(--ax-sys-leading-4-base) * 0.875);
-  --leading-5: calc(var(--ax-sys-leading-5-base) * 0.8);
-  --leading-6: calc(var(--ax-sys-leading-6-base) * 5 / 6);
+  --leading-4: var(--ax-sys-leading-4-base);
+  --leading-5: var(--ax-sys-leading-5-base);
+  --leading-6: var(--ax-sys-leading-6-base);
 }
 
 @utility ax-sm {
-  /* Spacing */
-  --spacing: calc(var(--ax-sys-spacing-base) * 0.75);
-  --ax-sys-border-radius: calc(var(--ax-sys-border-radius-base) * 0.75);
+  --ax-sys-size: ax-sm;
+  /* Control height — 32px (md − 8px) */
+  --ax-sys-size-base: calc(var(--ax-sys-size-md) - var(--ax-sys-size-step));
+
+  /* Spacing — unit 3px */
+  --spacing: calc(var(--ax-sys-spacing-base) - 0.25 * var(--ax-sys-padding-step));
+  /* Border radius — 4px */
+  --ax-sys-border-radius: calc(var(--ax-sys-border-radius-base) - var(--ax-sys-padding-step));
 
-  /* Typography */
-  --text-xs: calc(var(--ax-sys-text-xs-base) * 11 / 12);
-  --text-sm: calc(var(--ax-sys-text-sm-base) * 6 / 7);
-  --text-base: calc(var(--ax-sys-body-font-size) * 0.875);
-  --text-lg: calc(var(--ax-sys-text-lg-base) * 8 / 9);
-  --text-xl: calc(var(--ax-sys-text-xl-base) * 0.9);
+  /* Typography — 14px */
+  --text-xs: 0.875rem;
+  --text-sm: 0.875rem;
+  --text-base: 0.875rem;
+  --text-lg: 0.875rem;
+  --text-xl: 0.875rem;
 
   /* Line Heights */
-  --leading-3: calc(var(--ax-sys-leading-3-base) * 7 / 6);
+  --leading-3: var(--ax-sys-leading-3-base);
   --leading-4: var(--ax-sys-leading-4-base);
-  --leading-5: calc(var(--ax-sys-leading-5-base) * 0.9);
-  --leading-6: calc(var(--ax-sys-leading-6-base) * 11 / 12);
+  --leading-5: var(--ax-sys-leading-5-base);
+  --leading-6: var(--ax-sys-leading-6-base);
 }
 
 @utility ax-md {
-  /* Tailwind Default Scale */
+  --ax-sys-size: ax-md;
+  /* Control height — 40px */
+  --ax-sys-size-base: var(--ax-sys-size-md);
+
+  /* Tailwind Default Scale — spacing unit 4px */
   --spacing: var(--ax-sys-spacing-base);
+  /* Border radius — 8px */
   --ax-sys-border-radius: var(--ax-sys-border-radius-base);
 
-  /* Typography */
-  --text-xs: var(--ax-sys-text-xs-base);
-  --text-sm: var(--ax-sys-text-sm-base);
-  --text-base: var(--ax-sys-body-font-size);
-  --text-lg: var(--ax-sys-text-lg-base);
-  --text-xl: var(--ax-sys-text-xl-base);
+  /* Typography — 14px */
+  --text-xs: 0.875rem;
+  --text-sm: 0.875rem;
+  --text-base: 0.875rem;
+  --text-lg: 0.875rem;
+  --text-xl: 0.875rem;
 
   /* Line Heights */
   --leading-3: var(--ax-sys-leading-3-base);
@@ -3618,39 +3637,49 @@ html.ax-dark {
 }
 
 @utility ax-lg {
-  /* Spacing */
-  --spacing: calc(var(--ax-sys-spacing-base) * 1.25);
-  --ax-sys-border-radius: calc(var(--ax-sys-border-radius-base) * 1.25);
+  --ax-sys-size: ax-lg;
+  /* Control height — 48px (md + 8px) */
+  --ax-sys-size-base: calc(var(--ax-sys-size-md) + var(--ax-sys-size-step));
+
+  /* Spacing — unit 5px */
+  --spacing: calc(var(--ax-sys-spacing-base) + 0.25 * var(--ax-sys-padding-step));
+  /* Border radius — 8px (same as md) */
+  --ax-sys-border-radius: var(--ax-sys-border-radius-base);
 
-  /* Typography */
-  --text-xs: calc(var(--ax-sys-text-xs-base) * 13 / 12);
-  --text-sm: calc(var(--ax-sys-text-sm-base) * 15 / 14);
-  --text-base: calc(var(--ax-sys-body-font-size) * 17 / 16);
-  --text-lg: calc(var(--ax-sys-text-lg-base) * 10 / 9);
-  --text-xl: calc(var(--ax-sys-text-xl-base) * 1.1);
+  /* Typography — 14px */
+  --text-xs: 0.875rem;
+  --text-sm: 0.875rem;
+  --text-base: 0.875rem;
+  --text-lg: 0.875rem;
+  --text-xl: 0.875rem;
 
   /* Line Heights */
-  --leading-3: calc(var(--ax-sys-leading-3-base) * 4 / 3);
-  --leading-4: calc(var(--ax-sys-leading-4-base) * 1.125);
-  --leading-5: calc(var(--ax-sys-leading-5-base) * 1.1);
-  --leading-6: calc(var(--ax-sys-leading-6-base) * 13 / 12);
+  --leading-3: var(--ax-sys-leading-3-base);
+  --leading-4: var(--ax-sys-leading-4-base);
+  --leading-5: var(--ax-sys-leading-5-base);
+  --leading-6: var(--ax-sys-leading-6-base);
 }
 
 @utility ax-xl {
-  /* Spacing */
-  --spacing: calc(var(--ax-sys-spacing-base) * 1.5);
-  --ax-sys-border-radius: calc(var(--ax-sys-border-radius-base) * 1.5);
+  --ax-sys-size: ax-xl;
+  /* Control height — 56px (md + 16px) */
+  --ax-sys-size-base: calc(var(--ax-sys-size-md) + 2 * var(--ax-sys-size-step));
+
+  /* Spacing — unit 6px */
+  --spacing: calc(var(--ax-sys-spacing-base) + 0.5 * var(--ax-sys-padding-step));
+  /* Border radius — 8px (same as md) */
+  --ax-sys-border-radius: var(--ax-sys-border-radius-base);
 
-  /* Typography */
-  --text-xs: calc(var(--ax-sys-text-xs-base) * 7 / 6);
-  --text-sm: calc(var(--ax-sys-text-sm-base) * 8 / 7);
-  --text-base: calc(var(--ax-sys-body-font-size) * 1.125);
-  --text-lg: calc(var(--ax-sys-text-lg-base) * 11 / 9);
-  --text-xl: calc(var(--ax-sys-text-xl-base) * 1.2);
+  /* Typography — 16px */
+  --text-xs: 1rem;
+  --text-sm: 1rem;
+  --text-base: 1rem;
+  --text-lg: 1rem;
+  --text-xl: 1rem;
 
   /* Line Heights */
-  --leading-3: calc(var(--ax-sys-leading-3-base) * 1.5);
-  --leading-4: calc(var(--ax-sys-leading-4-base) * 1.25);
-  --leading-5: calc(var(--ax-sys-leading-5-base) * 1.2);
-  --leading-6: calc(var(--ax-sys-leading-6-base) * 7 / 6);
+  --leading-3: var(--ax-sys-leading-3-base);
+  --leading-4: var(--ax-sys-leading-4-base);
+  --leading-5: var(--ax-sys-leading-5-base);
+  --leading-6: var(--ax-sys-leading-6-base);
 }

package/tailwind-base.js

@@ -1,324 +0,0 @@
-const plugin = require('tailwindcss/plugin');
-const { withAnimations } = require('animated-tailwindcss');
-const {
-  createBorderSurfaces,
-  createOnSurfaces,
-  createPalette,
-  createSurfaces,
-  createColorSurfaces,
-  createColoredSurfaces,
-} = require('./generators/index');
-
-const childSelector = plugin(function ({ addVariant }) {
-  addVariant('child', '& > *');
-  addVariant('child-hover', '& > *:hover');
-  addVariant('child-focus', '& > *:focus');
-  addVariant('child-focus-within', '& > *:focus-within');
-});
-
-const SURFACE_BG = {
-  DEFAULT: 'rgba(var(--ax-sys-color-lightest-surface), <alpha-value>)',
-  default: 'rgba(var(--ax-sys-color-lightest-surface), <alpha-value>)',
-
-  lightest: 'rgba(var(--ax-sys-color-lightest-surface), <alpha-value>)',
-  lighter: 'rgba(var(--ax-sys-color-lighter-surface), <alpha-value>)',
-  light: 'rgba(var(--ax-sys-color-light-surface), <alpha-value>)',
-
-  surface: 'rgba(var(--ax-sys-color-surface), <alpha-value>)',
-
-  dark: 'rgba(var(--ax-sys-color-dark-surface), <alpha-value>)',
-  darker: 'rgba(var(--ax-sys-color-darker-surface), <alpha-value>)',
-  darkest: 'rgba(var(--ax-sys-color-darkest-surface), <alpha-value>)',
-};
-
-const SURFACES_ON = {
-  on: {
-    DEFAULT: 'rgba(var(--ax-sys-color-on-lightest-surface), <alpha-value>)',
-    default: 'rgba(var(--ax-sys-color-on-lightest-surface), <alpha-value>)',
-
-    lightest: 'rgba(var(--ax-sys-color-on-lightest-surface), <alpha-value>)',
-    lighter: 'rgba(var(--ax-sys-color-on-lighter-surface), <alpha-value>)',
-    light: 'rgba(var(--ax-sys-color-on-light-surface), <alpha-value>)',
-
-    surface: 'rgba(var(--ax-sys-color-on-surface), <alpha-value>)',
-
-    dark: 'rgba(var(--ax-sys-color-on-dark-surface), <alpha-value>)',
-    darker: 'rgba(var(--ax-sys-color-on-darker-surface), <alpha-value>)',
-    darkest: 'rgba(var(--ax-sys-color-on-darkest-surface), <alpha-value>)',
-  },
-};
-
-const SURFACE_BORDER = {
-  DEFAULT: 'rgba(var(--ax-sys-color-border-lightest-surface), <alpha-value>)',
-  default: 'rgba(var(--ax-sys-color-border-lightest-surface), <alpha-value>)',
-
-  lightest: 'rgba(var(--ax-sys-color-border-lightest-surface), <alpha-value>)',
-  lighter: 'rgba(var(--ax-sys-color-border-lighter-surface), <alpha-value>)',
-  light: 'rgba(var(--ax-sys-color-border-light-surface), <alpha-value>)',
-
-  surface: 'rgba(var(--ax-sys-color-border-surface), <alpha-value>)',
-
-  dark: 'rgba(var(--ax-sys-color-border-dark-surface), <alpha-value>)',
-  darker: 'rgba(var(--ax-sys-color-border-darker-surface), <alpha-value>)',
-  darkest: 'rgba(var(--ax-sys-color-border-darkest-surface), <alpha-value>)',
-};
-
-const dynamicSurfaceClasses = {
-  ...createColoredSurfaces('primary'),
-  ...createColoredSurfaces('secondary'),
-  ...createColoredSurfaces('success'),
-  ...createColoredSurfaces('warning'),
-  ...createColoredSurfaces('danger'),
-};
-
-const UTILITY_CLASSES = {
-  ...dynamicSurfaceClasses,
-  '.h1': {
-    'font-size': '2.5rem',
-    'font-weight': '500',
-    'line-height': '2.5rem',
-  },
-  '.h2': {
-    'font-size': '2rem',
-    'font-weight': '500',
-    'line-height': '2rem',
-  },
-  '.h3': {
-    'font-size': '1.75rem',
-    'font-weight': '500',
-    'line-height': '1.75rem',
-  },
-  '.h4': {
-    'font-size': '1.5rem',
-    'font-weight': '500',
-    'line-height': '1.5rem',
-  },
-  '.h5': {
-    'font-size': '1.125rem',
-    'font-weight': '500',
-    'line-height': '1.125rem',
-  },
-  '.h6': {
-    'font-size': '1rem',
-    'font-weight': '500',
-    'line-height': '1rem',
-  },
-  '.heading': {
-    width: '100%',
-    'border-bottom': '1px solid',
-    'border-color': 'rgba(var(--ax-sys-color-border-lightest-surface))',
-    'line-height': '0.1em',
-    margin: '1rem auto',
-  },
-  '.heading > span': {
-    background: 'rgba(var(--ax-sys-color-surface))',
-    padding: '0 0.75rem',
-  },
-  '.heading-start': {
-    'text-align': 'start',
-  },
-  '.heading-center': {
-    'text-align': 'center',
-  },
-  '.heading-end': {
-    'text-align': 'end',
-  },
-  '.subtitle': {
-    opacity: '74%',
-    display: 'block',
-    'font-size': '1rem',
-    'font-weight': '400',
-    'line-height': '1.625rem',
-  },
-  '.links': {
-    color: 'rgba(var(--ax-sys-color-primary-surface))',
-    cursor: 'pointer',
-  },
-  '.links:hover': {
-    'text-decoration': 'underline',
-  },
-  '.links:visited': {
-    color: 'rgba(var(--ax-sys-color-primary-darker))',
-  },
-  '.animate-slow': {
-    animationDuration: '2s',
-  },
-  '.animate-slower': {
-    animationDuration: '3s',
-  },
-  '.animate-2xslower': {
-    animationDuration: '5s',
-  },
-  '.animate-fast': {
-    animationDuration: '800ms',
-  },
-  '.animate-faster': {
-    animationDuration: '500ms',
-  },
-  '.animate-2xfaster': {
-    animationDuration: '250ms',
-  },
-  '.card': {
-    backgroundColor: 'rgb(var(--ax-sys-color-surface))',
-    border: '1px solid',
-    borderColor: 'rgb(var(--ax-sys-color-border-lightest-surface))',
-    borderRadius: 'var(--ax-sys-border-radius)',
-  },
-  '.tabs-fit': {
-    width: '100%',
-  },
-  '.xs': {
-    '--ax-sys-size-base': '1.5rem',
-  },
-  '.sm': {
-    '--ax-sys-size-base': '2rem',
-  },
-  '.md': {
-    '--ax-sys-size-base': '2.5rem',
-  },
-  '.lg': {
-    '--ax-sys-size-base': '3.375rem',
-  },
-  '.xl': {
-    '--ax-sys-size-base': '4rem',
-  },
-  '.surface': {
-    backgroundColor: 'rgb(var(--ax-sys-color-surface))',
-    color: 'rgb(var(--ax-sys-color-on-surface))',
-    borderColor: 'rgb(var(--ax-sys-color-border-surface))',
-  },
-  '.lightest-surface': {
-    backgroundColor: 'rgb(var(--ax-sys-color-lightest-surface))',
-    color: 'rgb(var(--ax-sys-color-on-lightest-surface))',
-    borderColor: 'rgb(var(--ax-sys-color-border-lightest-surface))',
-  },
-  '.lighter-surface': {
-    backgroundColor: 'rgb(var(--ax-sys-color-lighter-surface))',
-    color: 'rgb(var(--ax-sys-color-on-lighter-surface))',
-    borderColor: 'rgb(var(--ax-sys-color-border-lighter-surface))',
-  },
-  '.light-surface': {
-    backgroundColor: 'rgb(var(--ax-sys-color-light-surface))',
-    color: 'rgb(var(--ax-sys-color-on-light-surface))',
-    borderColor: 'rgb(var(--ax-sys-color-border-light-surface))',
-  },
-  '.dark-surface': {
-    backgroundColor: 'rgb(var(--ax-sys-color-dark-surface))',
-    color: 'rgb(var(--ax-sys-color-on-dark-surface))',
-    borderColor: 'rgb(var(--ax-sys-color-border-dark-surface))',
-  },
-  '.darker-surface': {
-    backgroundColor: 'rgb(var(--ax-sys-color-darker-surface))',
-    color: 'rgb(var(--ax-sys-color-on-darker-surface))',
-    borderColor: 'rgb(var(--ax-sys-color-border-darker-surface))',
-  },
-  '.darkest-surface': {
-    backgroundColor: 'rgb(var(--ax-sys-color-darkest-surface))',
-    color: 'rgb(var(--ax-sys-color-on-darkest-surface))',
-    borderColor: 'rgb(var(--ax-sys-color-border-darkest-surface))',
-  },
-};
-
-module.exports = withAnimations({
-  content: ['./src/**/*.{html,ts,scss}', './projects/**/*.{html,ts,scss}'],
-  darkMode: 'class',
-  safelist: [
-    {
-      pattern: /(?:(?:on|border)-)?(?:lightest|lighter|light|surface|dark|darker|darkest)/,
-    },
-    {
-      pattern:
-        /(?:bg|text)(?:-(?:primary|secondary|danger|success|warning))?-(?:50|100|200|300|400|500|600|700|800|900|950)/,
-    },
-  ],
-  theme: {
-    extend: {
-      colors: {
-        ...SURFACE_BG,
-        ...SURFACES_ON,
-        primary: createPalette('primary'),
-        secondary: createPalette('secondary'),
-        success: createPalette('success'),
-        danger: createPalette('danger'),
-        warning: createPalette('warning'),
-      },
-      textColor: {
-        DEFAULT: 'rgba(var(--ax-sys-color-on-lightest-surface), <alpha-value>)',
-        default: 'rgba(var(--ax-sys-color-on-lightest-surface), <alpha-value>)',
-        primary: createOnSurfaces('primary'),
-        secondary: createOnSurfaces('secondary'),
-        success: createOnSurfaces('success'),
-        danger: createOnSurfaces('danger'),
-        warning: createOnSurfaces('warning'),
-        ...SURFACES_ON,
-      },
-      backgroundColor: {
-        primary: createSurfaces('primary'),
-        secondary: createSurfaces('secondary'),
-        success: createSurfaces('success'),
-        danger: createSurfaces('danger'),
-        warning: createSurfaces('warning'),
-        ...SURFACE_BG,
-        ...SURFACES_ON,
-      },
-      borderColor: {
-        primary: createBorderSurfaces('primary'),
-        secondary: createBorderSurfaces('secondary'),
-        success: createBorderSurfaces('success'),
-        danger: createBorderSurfaces('danger'),
-        warning: createBorderSurfaces('warning'),
-        ...SURFACE_BORDER,
-      },
-      maxWidth: {
-        '8xl': '90rem',
-        '9xl': '100rem',
-      },
-      borderRadius: {
-        default: 'var(--ax-sys-border-radius)',
-      },
-      lineHeight: {
-        11: '2.5rem',
-        12: '3rem',
-        12: '3rem',
-        14: '3.5rem',
-        16: '4rem',
-        20: '5rem',
-      },
-      spacing: {
-        default: 'var(--ax-sys-size-base)',
-      },
-      minWidth: {
-        default: 'var(--ax-sys-size-base)',
-      },
-      width: {
-        default: 'var(--ax-sys-size-base)',
-      },
-      minHeight: {
-        default: 'var(--ax-sys-size-base)',
-      },
-      height: {
-        default: 'var(--ax-sys-size-base)',
-      },
-      maxHeight: {
-        default: 'var(--ax-sys-size-base)',
-      },
-      keyframes: {
-        floating: {
-          '0%': { transform: 'translatey(0px)' },
-          '50%': { transform: 'translatey(-20px)' },
-          '100%': { transform: 'translatey(0px)' },
-        },
-      },
-      animation: {
-        floating: 'floating 6s ease-in-out infinite',
-      },
-    },
-  },
-
-  plugins: [
-    plugin(function ({ addUtilities }) {
-      addUtilities(UTILITY_CLASSES, ['responsive', 'hover', 'focus']);
-    }),
-    childSelector,
-  ],
-});