@acorex/styles 21.0.3-next.36 → 21.0.3-next.38

package/package.json

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

package/themes/default.css

@@ -52,19 +52,23 @@ html.ax-dark {
   --ax-sys-theme-isDark: 0;
   --ax-sys-icon-size: 100%;
   --ax-sys-icon-weight: 400;
-  /* Immutable md control height — size utilities derive --ax-sys-size-base from this */
-  --ax-sys-size-md: 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;
@@ -3209,7 +3213,7 @@ html.ax-dark {
 }
 
 @utility ax-focus-ring {
-  @apply outline-none 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))];
+  @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 {
@@ -3562,64 +3566,68 @@ html.ax-dark {
 
 @utility ax-xs {
   --ax-sys-size: ax-xs;
-  /* Control height — 1.5rem at default md of 2.5rem */
-  --ax-sys-size-base: calc(var(--ax-sys-size-md) * 0.6);
+  /* Control height — 24px (md − 16px) */
+  --ax-sys-size-base: calc(var(--ax-sys-size-md) - 2 * var(--ax-sys-size-step));
 
-  /* Spacing */
-  --spacing: calc(var(--ax-sys-spacing-base) * 0.5);
-  --ax-sys-border-radius: calc(var(--ax-sys-border-radius-base) * 0.5);
+  /* 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 */
-  --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);
+  /* 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 {
   --ax-sys-size: ax-sm;
-  /* Control height — 2rem at default md of 2.5rem */
-  --ax-sys-size-base: calc(var(--ax-sys-size-md) * 0.8);
+  /* Control height — 32px (md − 8px) */
+  --ax-sys-size-base: calc(var(--ax-sys-size-md) - var(--ax-sys-size-step));
 
-  /* Spacing */
-  --spacing: calc(var(--ax-sys-spacing-base) * 0.75);
-  --ax-sys-border-radius: calc(var(--ax-sys-border-radius-base) * 0.75);
+  /* 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 {
   --ax-sys-size: ax-md;
+  /* Control height — 40px */
   --ax-sys-size-base: var(--ax-sys-size-md);
 
-  /* Tailwind Default Scale */
+  /* 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);
@@ -3630,46 +3638,48 @@ html.ax-dark {
 
 @utility ax-lg {
   --ax-sys-size: ax-lg;
-  /* Control height — 3.375rem at default md of 2.5rem */
-  --ax-sys-size-base: calc(var(--ax-sys-size-md) * 1.35);
+  /* Control height — 48px (md + 8px) */
+  --ax-sys-size-base: calc(var(--ax-sys-size-md) + var(--ax-sys-size-step));
 
-  /* Spacing */
-  --spacing: calc(var(--ax-sys-spacing-base) * 1.25);
-  --ax-sys-border-radius: calc(var(--ax-sys-border-radius-base) * 1.25);
+  /* 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 {
   --ax-sys-size: ax-xl;
-  /* Control height — 4rem at default md of 2.5rem */
-  --ax-sys-size-base: calc(var(--ax-sys-size-md) * 1.6);
+  /* Control height — 56px (md + 16px) */
+  --ax-sys-size-base: calc(var(--ax-sys-size-md) + 2 * var(--ax-sys-size-step));
 
-  /* Spacing */
-  --spacing: calc(var(--ax-sys-spacing-base) * 1.5);
-  --ax-sys-border-radius: calc(var(--ax-sys-border-radius-base) * 1.5);
+  /* 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,
-  ],
-});