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

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,74 +8,259 @@ const childSelector = plugin(function ({ addVariant }) {
   addVariant('child-focus-within', '& > *:focus-within');
 });
 
-const _colors = {
-  ghost: 'rgba(var(--ax-color-ghost), <alpha-value>)',
-  'ghost-fore': 'rgba(var(--ax-color-ghost-fore), <alpha-value>)',
-
-  surface: 'rgba(var(--ax-color-surface), <alpha-value>)',
-  'surface-fore': 'rgba(var(--ax-color-surface-fore), <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>)',
+  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>)',
+};
 
-  'on-surface': 'rgba(var(--ax-color-on-surface), <alpha-value>)',
-  'on-surface-fore': 'rgba(var(--ax-color-on-surface-fore), <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>)',
+  },
+};
 
-  'input-surface': 'rgba(var(--ax-color-input-surface), <alpha-value>)',
-  'input-surface-fore': 'rgba(var(--ax-color-input-surface-fore), <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>)',
+  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 UTILITY_CLASSES = {
+  '.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',
+  },
+};
 const createPalete = function (colorName) {
   return {
-    DEFAULT: `rgba(var(--ax-color-${colorName}-500), <alpha-value>)`,
-    fore: `rgba(var(--ax-color-${colorName}-fore), <alpha-value>)`,
-    'fore-tint': `rgba(var(--ax-color-${colorName}-fore-tint), <alpha-value>)`,
-    50: `rgba(var(--ax-color-${colorName}-50), <alpha-value>)`,
-    100: `rgba(var(--ax-color-${colorName}-100), <alpha-value>)`,
-    200: `rgba(var(--ax-color-${colorName}-200), <alpha-value>)`,
-    300: `rgba(var(--ax-color-${colorName}-300), <alpha-value>)`,
-    400: `rgba(var(--ax-color-${colorName}-400), <alpha-value>)`,
-    500: `rgba(var(--ax-color-${colorName}-500), <alpha-value>)`,
-    600: `rgba(var(--ax-color-${colorName}-600), <alpha-value>)`,
-    700: `rgba(var(--ax-color-${colorName}-700), <alpha-value>)`,
-    800: `rgba(var(--ax-color-${colorName}-800), <alpha-value>)`,
-    900: `rgba(var(--ax-color-${colorName}-900), <alpha-value>)`,
-    950: `rgba(var(--ax-color-${colorName}-950), <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>)`,
+    300: `rgba(var(--ax-sys-color-${colorName}-300), <alpha-value>)`,
+    400: `rgba(var(--ax-sys-color-${colorName}-400), <alpha-value>)`,
+    500: `rgba(var(--ax-sys-color-${colorName}-500), <alpha-value>)`,
+    600: `rgba(var(--ax-sys-color-${colorName}-600), <alpha-value>)`,
+    700: `rgba(var(--ax-sys-color-${colorName}-700), <alpha-value>)`,
+    800: `rgba(var(--ax-sys-color-${colorName}-800), <alpha-value>)`,
+    900: `rgba(var(--ax-sys-color-${colorName}-900), <alpha-value>)`,
+    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'),
-        neutral: createPalete('neutral'),
-        ..._colors,
+        ghost: createPalete('ghost'),
       },
       textColor: {
-        DEFAULT: withOpacityValue('--ax-color-text-default'),
-        default: withOpacityValue('--ax-color-text-default'),
-        ..._colors,
+        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: {
-        default: 'rgba(var(--ax-color-background-default), <alpha-value>)',
-        'border-default': 'rgba(var(--ax-color-border-default), <alpha-value>)',
+        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-color-border-default), <alpha-value>)',
-        default: 'rgba(var(--ax-color-border-default), <alpha-value>)',
-        input: 'rgba(var(--ax-color-input-border), <alpha-value>)',
-        ..._colors,
+        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',
       },
       borderRadius: {
-        default: 'var(--ax-rounded-border-default)',
+        default: 'var(--ax-sys-border-radius)',
       },
       lineHeight: {
         11: '2.5rem',
@@ -95,138 +271,35 @@ module.exports = withAnimations({
         20: '5rem',
       },
       spacing: {
-        default: 'var(--ax-size-default)',
+        default: 'var(--ax-sys-size-base)',
       },
       minWidth: {
-        default: 'var(--ax-size-default)',
+        default: 'var(--ax-sys-size-base)',
       },
       width: {
-        default: 'var(--ax-size-default)',
+        default: 'var(--ax-sys-size-base)',
       },
       maxHeight: {
-        default: 'var(--ax-size-default)',
+        default: 'var(--ax-sys-size-base)',
       },
       minHeight: {
-        default: 'var(--ax-size-default)',
+        default: 'var(--ax-sys-size-base)',
       },
       height: {
-        default: 'var(--ax-size-default)',
+        default: 'var(--ax-sys-size-base)',
       },
       maxHeight: {
-        default: 'var(--ax-size-default)',
+        default: 'var(--ax-sys-size-base)',
       },
     },
   },
   corePlugins: {
     preflight: false,
   },
+
   plugins: [
     plugin(function ({ addUtilities }) {
-      const acorexClasses = {
-        '.h1': {
-          'font-size': '3rem',
-          'font-weight': '700',
-          'line-height': '3rem',
-        },
-        '.h2': {
-          'font-size': '2.5rem',
-          'font-weight': '700',
-          'line-height': '2.5rem',
-        },
-        '.h3': {
-          'font-size': '1.875rem',
-          'font-weight': '700',
-          'line-height': '1.875rem',
-        },
-        '.h4': {
-          'font-size': '1.5rem',
-          'font-weight': '700',
-          'line-height': '1.5rem',
-        },
-        '.h5': {
-          'font-size': '1.25rem',
-          'font-weight': '700',
-          'line-height': '1.25rem',
-        },
-        '.h6': {
-          'font-size': '1.125rem',
-          'font-weight': '700',
-          'line-height': '1.125rem',
-        },
-        '.heading': {
-          width: '100%',
-          'border-bottom': '1px solid',
-          'border-color': 'rgba(var(--ax-color-border-default))',
-          'line-height': '0.1em',
-          margin: '1rem auto',
-        },
-        '.heading > span': {
-          background: 'rgba(var(--ax-color-surface))',
-          padding: '0 0.75rem',
-        },
-        '.heading-start': {
-          'text-align': 'start',
-        },
-        '.heading-center': {
-          'text-align': 'center',
-        },
-        '.heading-end': {
-          'text-align': 'end',
-        },
-        '.link': {
-          color: 'rgba(var(--ax-color-primary-500))',
-          cursor: 'pointer',
-        },
-        '.link:hover': {
-          'text-decoration': 'underline',
-        },
-        '.link:visited': {
-          color: 'rgba(var(--ax-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-color-border-default))',
-          borderRadius: 'var(--ax-rounded-border-default)',
-        },
-        '.tabs-fit': {
-          width: '100%',
-        },
-        '.xs': {
-          '--ax-size-default': '2rem',
-        },
-        '.sm': {
-          '--ax-size-default': '2.25rem',
-        },
-        '.md': {
-          '--ax-size-default': '2.5rem',
-        },
-        '.lg': {
-          '--ax-size-default': '3rem',
-        },
-        '.xl': {
-          '--ax-size-default': '3.5rem',
-        },
-      };
-      addUtilities(acorexClasses, ['responsive', 'hover', 'focus']);
+      UTILITY_CLASSES, addUtilities(UTILITY_CLASSES, ['responsive', 'hover', 'focus']);
     }),
     childSelector,
   ],

package/themes/default.scss

@@ -1,145 +1,32 @@
+@use '../utils/index.scss' as *;
+
+$theme-colors: (
+  'primary': #2563eb,
+  'secondary': #e84f88,
+  'success': #10b981,
+  'warning': #ffca28,
+  'danger': #ff2056,
+  'ghost': #71717a,
+) !default;
+
+$theme-surfaces: (
+  'light-start': #ffffff,
+  'light-end': #dee2e6,
+  'dark-start': #13161b,
+  'dark-end': #0c0e12,
+) !default;
+
+@forward '../variables/index.scss';
+
 :root,
 .ax-light {
-  --ax-size-base: 2.5rem;
-  --ax-size-default: var(--ax-size-base);
-  --ax-icon-weight: 400;
-  --ax-icon-size: 100%;
-
-  --ax-rounded-border-default: 0.5rem;
-
-  --ax-color-border-default: 233, 234, 235;
-
-  --ax-color-background-default: 249, 250, 251;
-  --ax-color-text-default: 22, 22, 22;
-
-  --ax-color-surface: 255, 255, 255;
-  --ax-color-surface-fore: 22, 22, 22;
-
-  --ax-color-on-surface: 250, 250, 250;
-  --ax-color-on-surface-fore: 22, 22, 22;
-
-  --ax-color-input-surface: 255, 255, 255;
-  --ax-color-input-surface-fore: 22, 22, 22;
-  --ax-color-input-border: 213, 215, 218;
-
-  --ax-color-ghost: 255, 255, 255;
-  --ax-color-ghost-fore: 22, 22, 22;
-
-  --ax-color-primary-fore: 255, 255, 255;
-  --ax-color-primary-fore-tint: 11, 30, 71;
-  --ax-color-primary-50: 244, 247, 254;
-  --ax-color-primary-100: 233, 239, 253;
-  --ax-color-primary-200: 190, 208, 249;
-  --ax-color-primary-300: 146, 177, 245;
-  --ax-color-primary-400: 102, 146, 241;
-  --ax-color-primary-500: 37, 99, 235;
-  --ax-color-primary-600: 33, 89, 212;
-  --ax-color-primary-700: 26, 69, 165;
-  --ax-color-primary-800: 19, 50, 118;
-  --ax-color-primary-900: 11, 30, 71;
-  --ax-color-primary-950: 4, 10, 23;
-
-  --ax-color-secondary-fore: 255, 255, 255;
-  --ax-color-secondary-fore-tint: 9, 12, 18;
-  --ax-color-secondary-50: 244, 244, 245;
-  --ax-color-secondary-100: 233, 234, 235;
-  --ax-color-secondary-200: 188, 191, 196;
-  --ax-color-secondary-300: 143, 148, 157;
-  --ax-color-secondary-400: 98, 105, 118;
-  --ax-color-secondary-500: 30, 41, 59;
-  --ax-color-secondary-600: 27, 37, 53;
-  --ax-color-secondary-700: 21, 29, 41;
-  --ax-color-secondary-800: 15, 21, 30;
-  --ax-color-secondary-900: 9, 12, 18;
-  --ax-color-secondary-950: 3, 4, 6;
+  --ax-sys-body-font-size: 1rem;
+  --ax-sys-size-base: 2.5rem;
 
-  --ax-color-success-fore: 255, 255, 255;
-  --ax-color-success-fore-tint: 6, 78, 59;
-  --ax-color-success-50: 236, 253, 245;
-  --ax-color-success-100: 209, 250, 229;
-  --ax-color-success-200: 167, 243, 208;
-  --ax-color-success-300: 110, 231, 183;
-  --ax-color-success-400: 52, 211, 153;
-  --ax-color-success-500: 16, 185, 129;
-  --ax-color-success-600: 5, 150, 105;
-  --ax-color-success-700: 4, 120, 87;
-  --ax-color-success-800: 6, 95, 70;
-  --ax-color-success-900: 6, 78, 59;
-  --ax-color-success-950: 2, 44, 34;
+  --ax-sys-border-radius: 0.5rem;
 
-  --ax-color-warning-fore: 48, 26, 10;
-  --ax-color-warning-fore-tint: 255, 111, 0;
-  --ax-color-warning-50: 255, 248, 225;
-  --ax-color-warning-100: 255, 236, 179;
-  --ax-color-warning-200: 255, 224, 130;
-  --ax-color-warning-300: 255, 213, 79;
-  --ax-color-warning-400: 255, 202, 40;
-  --ax-color-warning-500: 255, 193, 7;
-  --ax-color-warning-600: 255, 179, 0;
-  --ax-color-warning-700: 255, 160, 0;
-  --ax-color-warning-800: 255, 143, 0;
-  --ax-color-warning-900: 255, 111, 0;
-  --ax-color-warning-950: 72, 40, 15;
-
-  --ax-color-danger-fore: 255, 255, 255;
-  --ax-color-danger-fore-tint: 127, 29, 29;
-  --ax-color-danger-50: 254, 242, 242;
-  --ax-color-danger-100: 254, 226, 226;
-  --ax-color-danger-200: 254, 202, 202;
-  --ax-color-danger-300: 252, 165, 165;
-  --ax-color-danger-400: 248, 113, 113;
-  --ax-color-danger-500: 239, 68, 68;
-  --ax-color-danger-600: 220, 38, 38;
-  --ax-color-danger-700: 185, 28, 28;
-  --ax-color-danger-800: 153, 27, 27;
-  --ax-color-danger-900: 127, 29, 29;
-  --ax-color-danger-950: 69, 10, 10;
-
-  --ax-color-info-fore: 255, 255, 255;
-  --ax-color-info-fore-tint: 49, 46, 129;
-  --ax-color-info-50: 238, 242, 255;
-  --ax-color-info-100: 224, 231, 255;
-  --ax-color-info-200: 199, 210, 254;
-  --ax-color-info-300: 165, 180, 252;
-  --ax-color-info-400: 129, 140, 248;
-  --ax-color-info-500: 99, 102, 241;
-  --ax-color-info-600: 79, 70, 229;
-  --ax-color-info-700: 67, 56, 202;
-  --ax-color-info-800: 55, 48, 163;
-  --ax-color-info-900: 49, 46, 129;
-  --ax-color-info-950: 30, 27, 75;
-
-  --ax-color-neutral-fore: 255, 255, 255;
-  --ax-color-neutral-fore-tint: 17, 24, 39;
-  --ax-color-neutral-50: 249, 250, 251;
-  --ax-color-neutral-100: 243, 244, 246;
-  --ax-color-neutral-200: 229, 231, 235;
-  --ax-color-neutral-300: 209, 213, 219;
-  --ax-color-neutral-400: 156, 163, 175;
-  --ax-color-neutral-500: 107, 114, 128;
-  --ax-color-neutral-600: 75, 85, 99;
-  --ax-color-neutral-700: 55, 65, 81;
-  --ax-color-neutral-800: 31, 41, 55;
-  --ax-color-neutral-900: 17, 24, 39;
-  --ax-color-neutral-950: 3, 7, 18;
+  // --ax-sys-body-bg-color: var(--ax-sys-color-surface-lowest);
+  // --ax-sys-body-text-color: var(--ax-sys-color-surface-lowest-border);
 }
 
-.ax-dark {
-  --ax-color-border-default: 34, 38, 47;
-
-  --ax-color-background-default: 12, 14, 18;
-  --ax-color-text-default: 255, 255, 255;
-
-  --ax-color-surface: 19, 22, 27;
-  --ax-color-surface-fore: 255, 255, 255;
-
-  --ax-color-on-surface: 34, 38, 47;
-  --ax-color-on-surface-fore: 255, 255, 255;
-
-  --ax-color-input-surface: 12, 14, 18;
-  --ax-color-input-surface-fore: 224, 224, 224;
-  --ax-color-input-border: 55, 58, 65;
-
-  --ax-color-ghost: 77, 91, 113;
-  --ax-color-ghost-fore: 255, 255, 255;
-}
+@include generate-pallete-variables($theme-colors, $theme-surfaces, true);