@acorex/styles 19.10.0-next.0 → 19.10.0-next.2

package/base/index.scss

@@ -0,0 +1,22 @@
+@use './preflight' as *;
+:root {
+  --ax-overlay-full-width: 93;
+  --ax-sys-transition-duration: 150ms;
+  --ax-sys-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+html {
+  background-color: rgba(var(--ax-sys-color-surface-lightest));
+  color: rgba(var(--ax-sys-color-on-surface-lightest));
+}
+
+* {
+  border-color: rgba(var(--ax-sys-color-border-surface-lightest));
+}
+html.ax-dark * {
+  border-color: rgba(var(--ax-sys-color-border-surface-darkest));
+}
+
+html.ax-dark {
+  background-color: rgba(var(--ax-sys-color-surface-darkest));
+  color: rgba(var(--ax-sys-color-on-surface-darkest));
+}

package/{src/shared → components}/_drop-down.scss

@@ -26,8 +26,8 @@
   height: fit-content;
   overflow: hidden;
   border-width: 1px;
-  border-color: rgba(var(--ax-sys-border-color));
-  background-color: rgba(var(--ax-sys-color-surface-lowest));
+  border-color: rgba(var(--ax-sys-color-border-surface-lightest));
+  background-color: rgba(var(--ax-sys-color-surface-lightest));
   --ax-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
   --ax-shadow-colored: 0 4px 6px -1px var(--ax-shadow-color), 0 2px 4px -2px var(--ax-shadow-color);
   box-shadow: var(--ax-ring-offset-shadow, 0 0 #0000), var(--ax-ring-shadow, 0 0 #0000), var(--ax-shadow);

package/{src/shared → components}/_editor-container.scss

@@ -1,5 +1,5 @@
-@use '../mixins/look';
-@use '../mixins/util';
+@use '../mixins/look' as look;
+@use '../mixins/util' as util;
 
 :root {
   --ax-editor-font-size: 1rem;
@@ -233,19 +233,3 @@
     }
   }
 }
-
-// Created new ripple.scss files intead
-
-// .ax-ripple {
-//   transform: scale(0);
-//   animation: ripple 500ms linear;
-//   position: absolute;
-//   border-radius: 9999rem !important;
-
-//   @keyframes ripple {
-//     to {
-//       transform: scale(4);
-//       opacity: 0;
-//     }
-//   }
-// }

package/{src/shared/_utils.scss → components/_uploader.scss}

@@ -1,45 +1,4 @@
-@use '../variables/index.scss';
-@use '../mixins/util';
-
-[class*=' ax-icon-'],
-[class^='ax-icon-'] {
-  vertical-align: middle;
-}
-
-.ax-bold {
-  font-weight: bold !important;
-}
-
-.ax-fieldset {
-  border-radius: var(--ax-sys-border-radius);
-  border-width: 1px;
-  border-color: rgba(var(--ax-sys-color-input-surface-border));
-  padding: 0.75rem /* 12px */;
-
-  legend {
-    padding-left: 0.25rem /* 4px */;
-    padding-right: 0.25rem /* 4px */;
-    font-size: 0.875rem /* 14px */;
-    line-height: 1.25rem /* 20px */;
-  }
-}
-
-.ax-card {
-  border-radius: var(--ax-sys-border-radius);
-  border-width: 1px;
-  border-color: rgba(var(--ax-sys-color-input-surface-border));
-  background-color: rgba(var(--ax-sys-color-surface));
-}
-
-.ax-drop-zone {
-  > input {
-    position: absolute;
-    height: 100%;
-    width: 100%;
-    cursor: pointer;
-    opacity: 0;
-  }
-}
+@use '../mixins/index.scss' as mixin;
 .ax-uploader-overlay-state {
   border-radius: inherit;
   pointer-events: none;
@@ -66,11 +25,17 @@
   transition-duration: 150ms;
 }
 
-.ax-select-none,
-.ax-select-none * {
-  user-select: none !important;
+.ax-drop-zone {
+  > input {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    cursor: pointer;
+    opacity: 0;
+  }
 }
-@include util.darkMode() {
+
+@include mixin.darkMode() {
   .ax-uploader-overlay-state {
     background-color: rgba(var(--ax-sys-color-primary-800), 0.75);
     color: rgba(var(--ax-sys-color-on-primary));

package/{src/shared → components}/index.scss

@@ -2,13 +2,10 @@
 @forward './actionsheet';
 @forward './check-box';
 @forward './drop-down';
-// @forward './editor-container';
+@forward './editor-container';
 @forward './general-button';
-@forward './inputs';
 @forward './list';
 @forward './radio';
-@forward './table';
-@forward './utils';
-
-// new //
 @forward './ripple';
+@forward './table';
+@forward './uploader';

package/index.scss

@@ -1,9 +1,7 @@
-@forward './src/base/preflight';
-@forward './src/variables/colors';
-
-@forward './src/base/index.scss';
-@forward './src/mixins/index.scss';
-@forward './src/shared/index.scss';
-@forward './src/utility/index.scss';
+@forward './base/index.scss';
+@forward './components/index.scss';
+@forward './mixins/index.scss';
+@forward './utils/index.scss';
+@forward './variables/index.scss';
 
 @import '@angular/cdk/overlay-prebuilt.css';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@acorex/styles",
-  "version": "19.10.0-next.0",
+  "version": "19.10.0-next.2",
   "main": "index.js",
   "author": "Ali Safari",
   "license": "ISC",

package/tailwind-base.js

@@ -1,15 +1,6 @@
 const plugin = require('tailwindcss/plugin');
 const { withAnimations } = require('animated-tailwindcss');
 
-function withOpacityValue(variable) {
-  return ({ opacityValue }) => {
-    if (opacityValue === undefined) {
-      return `rgb(var(${variable}))`;
-    }
-    return `rgb(var(${variable}) ,${opacityValue})`;
-  };
-}
-
 const childSelector = plugin(function ({ addVariant }) {
   addVariant('child', '& > *');
   addVariant('child-hover', '& > *:hover');
@@ -17,76 +8,147 @@ const childSelector = plugin(function ({ addVariant }) {
   addVariant('child-focus-within', '& > *:focus-within');
 });
 
-const _onColors = {
-  'on-surface-light': 'rgba(var(--ax-sys-color-on-surface-light), <alpha-value>)',
-  'on-surface-lowest': 'rgba(var(--ax-sys-color-on-surface-lowest), <alpha-value>)',
-  'on-surface-low': 'rgba(var(--ax-sys-color-on-surface-low), <alpha-value>)',
-  'on-surface': 'rgba(var(--ax-sys-color-on-surface), <alpha-value>)',
-  'on-surface-high': 'rgba(var(--ax-sys-color-on-surface-high), <alpha-value>)',
-  'on-surface-highest': 'rgba(var(--ax-sys-color-on-surface-highest), <alpha-value>)',
-  'on-surface-dark': 'rgba(var(--ax-sys-color-on-surface-dark), <alpha-value>)',
-};
-
-const _bgColors = {
-  default: 'rgba(var( --ax-sys-body-bg-color), <alpha-value>)',
-  'surface-light': 'rgba(var(--ax-sys-color-surface-light), <alpha-value>)',
-  'surface-lowest': 'rgba(var(--ax-sys-color-surface-lowest), <alpha-value>)',
-  'surface-low': 'rgba(var(--ax-sys-color-surface-low), <alpha-value>)',
+const SURFACE_BG = {
+  default: 'rgba(var(--ax-sys-color-surface-lightest), <alpha-value>)',
+  lightest: 'rgba(var(--ax-sys-color-surface-lightest), <alpha-value>)',
+  lighter: 'rgba(var(--ax-sys-color-surface-lighter), <alpha-value>)',
+  light: 'rgba(var(--ax-sys-color-surface-light), <alpha-value>)',
   surface: 'rgba(var(--ax-sys-color-surface), <alpha-value>)',
-  'surface-high': 'rgba(var(--ax-sys-color-surface-high), <alpha-value>)',
-  'surface-highest': 'rgba(var(--ax-sys-color-surface-highest), <alpha-value>)',
-  'surface-dark': 'rgba(var(--ax-sys-color-surface-dark), <alpha-value>)',
-  'surface-input': 'rgba(var(--ax-sys-color-input-surface), <alpha-value>)',
-  ..._onColors,
+  dark: 'rgba(var(--ax-sys-color-surface-dark), <alpha-value>)',
+  darker: 'rgba(var(--ax-sys-color-surface-darker), <alpha-value>)',
+  darkest: 'rgba(var(--ax-sys-color-surface-darkest), <alpha-value>)',
 };
 
-const _textColors = {
-  DEFAULT: withOpacityValue('--ax-sys-body-text-color'),
-  default: withOpacityValue('--ax-sys-body-text-color'),
-  'surface-light': 'rgba(var(--ax-sys-color-on-surface-light), <alpha-value>)',
-  'surface-lowest': 'rgba(var(--ax-sys-color-on-surface-lowest), <alpha-value>)',
-  'surface-low': 'rgba(var(--ax-sys-color-on-surface-low), <alpha-value>)',
-  surface: 'rgba(var(--ax-sys-color-on-surface), <alpha-value>)',
-  'surface-high': 'rgba(var(--ax-sys-color-on-surface-high), <alpha-value>)',
-  'surface-dark': 'rgba(var(--ax-sys-color-on-surface-dark), <alpha-value>)',
-  'surface-highest': 'rgba(var(--ax-sys-color-on-surface-highest), <alpha-value>)',
+const SURFACES_ON = {
+  on: {
+    lightest: 'rgba(var(--ax-sys-color-on-surface-lightest), <alpha-value>)',
+    lighter: 'rgba(var(--ax-sys-color-on-surface-lighter), <alpha-value>)',
+    light: 'rgba(var(--ax-sys-color-on-surface-light), <alpha-value>)',
+    DEFAULT: 'rgba(var(--ax-sys-color-on-surface), <alpha-value>)',
+    surface: 'rgba(var(--ax-sys-color-on-surface), <alpha-value>)',
+    dark: 'rgba(var(--ax-sys-color-on-surface-dark), <alpha-value>)',
+    darker: 'rgba(var(--ax-sys-color-on-surface-darker), <alpha-value>)',
+    darkest: 'rgba(var(--ax-sys-color-on-surface-darkest), <alpha-value>)',
+  },
 };
 
-const _borderColors = {
-  'surface-light': 'rgba(var(--ax-sys-color-border-surface-light), <alpha-value>)',
-  'surface-lowest': 'rgba(var(--ax-sys-color-border-surface-lowest), <alpha-value>)',
-  'surface-low': 'rgba(var(--ax-sys-color-border-surface-low), <alpha-value>)',
+const SURFACE_BORDER = {
+  lightest: 'rgba(var(--ax-sys-color-border-surface-lightest), <alpha-value>)',
+  lighter: 'rgba(var(--ax-sys-color-border-surface-lighter), <alpha-value>)',
+  light: 'rgba(var(--ax-sys-color-border-surface-light), <alpha-value>)',
+  DEFAULT: 'rgba(var(--ax-sys-color-border-surface), <alpha-value>)',
   surface: 'rgba(var(--ax-sys-color-border-surface), <alpha-value>)',
-  'surface-high': 'rgba(var(--ax-sys-color-border-surface-high), <alpha-value>)',
-  'surface-dark': 'rgba(var(--ax-sys-color-border-surface-dark), <alpha-value>)',
-  'surface-highest': 'rgba(var(--ax-sys-color-border-surface-highest), <alpha-value>)',
+  dark: 'rgba(var(--ax-sys-color-border-surface-dark), <alpha-value>)',
+  darker: 'rgba(var(--ax-sys-color-border-surface-darker), <alpha-value>)',
+  darkest: 'rgba(var(--ax-sys-color-border-surface-darkest), <alpha-value>)',
 };
 
-const _onColor = {
-  on: {
-    primary: 'rgba(var(--ax-sys-color-on-primary), <alpha-value>)',
-    secondary: 'rgba(var(--ax-sys-color-on-secondary), <alpha-value>)',
-    success: 'rgba(var(--ax-sys-color-on-success), <alpha-value>)',
-    warning: 'rgba(var(--ax-sys-color-on-warning), <alpha-value>)',
-    danger: 'rgba(var(--ax-sys-color-on-danger), <alpha-value>)',
-    ghost: 'rgba(var(--ax-sys-color-on-ghost), <alpha-value>)',
+const UTILITY_CLASSES = {
+  '.h1': {
+    'font-size': '2.5rem',
+    'font-weight': '500',
+    'line-height': '2.5rem',
   },
-};
-
-const _onContrastColor = {
-  'on-contrast': {
-    primary: 'rgba(var(--ax-sys-color-on-contrast-primary), <alpha-value>)',
-    secondary: 'rgba(var(--ax-sys-color-on-contrast-secondary), <alpha-value>)',
-    success: 'rgba(var(--ax-sys-color-on-contrast-success), <alpha-value>)',
-    warning: 'rgba(var(--ax-sys-color-on-contrast-warning), <alpha-value>)',
-    danger: 'rgba(var(--ax-sys-color-on-contrast-danger), <alpha-value>)',
-    ghost: 'rgba(var(--ax-sys-color-on-contrast-ghost), <alpha-value>)',
+  '.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-border-color))',
+    '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',
+  },
+  '.links': {
+    color: 'rgba(var(--ax-sys-color-primary-500))',
+    cursor: 'pointer',
+  },
+  '.links:hover': {
+    'text-decoration': 'underline',
+  },
+  '.links:visited': {
+    color: 'rgba(var(--ax-sys-color-primary-700))',
+  },
+  '.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-color-surface))',
+    border: '1px solid',
+    borderColor: 'rgb(var(--ax-sys-border-color))',
+    borderRadius: 'var(--ax-sys-border-radius)',
+  },
+  '.tabs-fit': {
+    width: '100%',
+  },
+  '.xs': {
+    '--ax-sys-size-base': '2rem',
+  },
+  '.sm': {
+    '--ax-sys-size-base': '2.25rem',
+  },
+  '.md': {
+    '--ax-sys-size-base': '2.5rem',
+  },
+  '.lg': {
+    '--ax-sys-size-base': '3rem',
+  },
+  '.xl': {
+    '--ax-sys-size-base': '3.5rem',
   },
 };
-
 const createPalete = function (colorName) {
   return {
-    DEFAULT: 'rgba(var(--ax-sys-color-${colorName}-500), <alpha-value>)',
     50: `rgba(var(--ax-sys-color-${colorName}-50), <alpha-value>)`,
     100: `rgba(var(--ax-sys-color-${colorName}-100), <alpha-value>)`,
     200: `rgba(var(--ax-sys-color-${colorName}-200), <alpha-value>)`,
@@ -100,35 +162,99 @@ const createPalete = function (colorName) {
     950: `rgba(var(--ax-sys-color-${colorName}-950), <alpha-value>)`,
   };
 };
+const createBackgroundPalete = function (colorName) {
+  return {
+    lightest: `rgba(var(--ax-sys-color-${colorName}-lightest-surface), <alpha-value>)`,
+    lighter: `rgba(var(--ax-sys-color-${colorName}-lighter-surface), <alpha-value>)`,
+    light: `rgba(var(--ax-sys-color-${colorName}-light-surface), <alpha-value>)`,
+    surface: `rgba(var(--ax-sys-color-${colorName}-surface), <alpha-value>)`,
+    dark: `rgba(var(--ax-sys-color-${colorName}-dark-surface), <alpha-value>)`,
+    darker: `rgba(var(--ax-sys-color-${colorName}-darker-surface), <alpha-value>)`,
+    darkest: `rgba(var(--ax-sys-color-${colorName}-darkest-surface), <alpha-value>)`,
+    on: `rgba(var(--ax-sys-color-on-${colorName}), <alpha-value>)`,
+  };
+};
 
+const createOnPalete = function (colorName) {
+  return {
+    'on-lightest': `rgba(var(--ax-sys-color-on-${colorName}-lightest-surface), <alpha-value>)`,
+    'on-lighter': `rgba(var(--ax-sys-color-on-${colorName}-lighter-surface), <alpha-value>)`,
+    'on-light': `rgba(var(--ax-sys-color-on-${colorName}-light-surface), <alpha-value>)`,
+    'on-surface': `rgba(var(--ax-sys-color-on-${colorName}-surface), <alpha-value>)`,
+    'on-dark': `rgba(var(--ax-sys-color-on-${colorName}-dark-surface), <alpha-value>)`,
+    'on-darker': `rgba(var(--ax-sys-color-on-${colorName}-darker-surface), <alpha-value>)`,
+    'on-darkest': `rgba(var(--ax-sys-color-on-${colorName}-darkest-surface), <alpha-value>)`,
+    'on-contrast': `rgba(var(--ax-sys-color-on-contrast-${colorName}), <alpha-value>)`,
+  };
+};
+const createBorderPalete = function (colorName) {
+  return {
+    lightest: `rgba(var(--ax-sys-color-border-${colorName}-lightest-surface), <alpha-value>)`,
+    lighter: `rgba(var(--ax-sys-color-border-${colorName}-lighter-surface), <alpha-value>)`,
+    light: `rgba(var(--ax-sys-color-border-${colorName}-light-surface), <alpha-value>)`,
+    surface: `rgba(var(--ax-sys-color-border-${colorName}-surface), <alpha-value>)`,
+    dark: `rgba(var(--ax-sys-color-border-${colorName}-dark-surface), <alpha-value>)`,
+    darker: `rgba(var(--ax-sys-color-border-${colorName}-darker-surface), <alpha-value>)`,
+    darkest: `rgba(var(--ax-sys-color-border-${colorName}-darkest-surface), <alpha-value>)`,
+  };
+};
 module.exports = withAnimations({
   prefix: 'ax-',
   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|ghost))?-(?:50|100|200|300|400|500|600|700|800|900|950)/,
+    },
+  ],
   theme: {
     extend: {
       colors: {
+        ...SURFACE_BG,
+        ...SURFACES_ON,
         primary: createPalete('primary'),
         secondary: createPalete('secondary'),
         success: createPalete('success'),
         danger: createPalete('danger'),
         warning: createPalete('warning'),
         ghost: createPalete('ghost'),
-        ..._onColor,
-        ..._onContrastColor,
       },
       textColor: {
-        ..._textColors,
+        DEFAULT: 'rgba(var(--ax-sys-color-on-surface-lightest), <alpha-value>)',
+        default: 'rgba(var(--ax-sys-color-on-surface-lightest), <alpha-value>)',
+        primary: createOnPalete('primary'),
+        secondary: createOnPalete('secondary'),
+        success: createOnPalete('success'),
+        danger: createOnPalete('danger'),
+        warning: createOnPalete('warning'),
+        ghost: createOnPalete('ghost'),
+        ...SURFACES_ON,
       },
       backgroundColor: {
-        ..._bgColors,
+        DEFAULT: 'rgba(var(--ax-sys-color-surface-lightest), <alpha-value>)',
+        default: 'rgba(var(--ax-sys-color-surface-lightest), <alpha-value>)',
+        primary: createBackgroundPalete('primary'),
+        secondary: createBackgroundPalete('secondary'),
+        success: createBackgroundPalete('success'),
+        danger: createBackgroundPalete('danger'),
+        warning: createBackgroundPalete('warning'),
+        ghost: createBackgroundPalete('ghost'),
+        ...SURFACE_BG,
+        ...SURFACES_ON,
       },
       borderColor: {
-        DEFAULT: 'rgba(var(--ax-sys-border-color), <alpha-value>)',
-        default: 'rgba(var(--ax-sys-border-color), <alpha-value>)',
-        input: 'rgba(var(--ax-sys-color-input-surface-border), <alpha-value>)',
-        'border-default': 'rgba(var(--ax-sys-border-color), <alpha-value>)',
-        ..._borderColors,
+        DEFAULT: 'rgba(var(--ax-sys-color-border-surface-lightest), <alpha-value>)',
+        default: 'rgba(var(--ax-sys-color-border-surface-lightest), <alpha-value>)',
+        primary: createBorderPalete('primary'),
+        secondary: createBorderPalete('secondary'),
+        success: createBorderPalete('success'),
+        danger: createBorderPalete('danger'),
+        warning: createBorderPalete('warning'),
+        ghost: createBorderPalete('ghost'),
+        ...SURFACE_BORDER,
       },
       maxWidth: {
         '8xl': '90rem',
@@ -170,113 +296,10 @@ module.exports = withAnimations({
   corePlugins: {
     preflight: false,
   },
+
   plugins: [
     plugin(function ({ addUtilities }) {
-      const acorexClasses = {
-        '.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-border-color))',
-          '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',
-        },
-        '.links': {
-          color: 'rgba(var(--ax-sys-color-primary-500))',
-          cursor: 'pointer',
-        },
-        '.links:hover': {
-          'text-decoration': 'underline',
-        },
-        '.links:visited': {
-          color: 'rgba(var(--ax-sys-color-primary-700))',
-        },
-        '.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-color-surface))',
-          border: '1px solid',
-          borderColor: 'rgb(var(--ax-sys-border-color))',
-          borderRadius: 'var(--ax-sys-border-radius)',
-        },
-        '.tabs-fit': {
-          width: '100%',
-        },
-        '.xs': {
-          '--ax-sys-size-base': '2rem',
-        },
-        '.sm': {
-          '--ax-sys-size-base': '2.25rem',
-        },
-        '.md': {
-          '--ax-sys-size-base': '2.5rem',
-        },
-        '.lg': {
-          '--ax-sys-size-base': '3rem',
-        },
-        '.xl': {
-          '--ax-sys-size-base': '3.5rem',
-        },
-      };
-      addUtilities(acorexClasses, ['responsive', 'hover', 'focus']);
+      UTILITY_CLASSES, addUtilities(UTILITY_CLASSES, ['responsive', 'hover', 'focus']);
     }),
     childSelector,
   ],