@acorex/styles 7.11.5 → 7.12.0

package/tailwind-base.js

@@ -17,183 +17,72 @@ const childSelector = plugin(function ({ addVariant }) {
   addVariant('child-focus-within', '& > *:focus-within');
 });
 
-const _color = {
-  surface: withOpacityValue('--ax-color-surface'),
-  'surface-fore': withOpacityValue('--ax-color-surface-fore'),
+const _colors = {
+  ghost: 'rgba(var(--ax-color-ghost), <alpha-value>)',
+  'ghost-fore': 'rgba(var(--ax-color-ghost-fore), <alpha-value>)',
 
-  'on-surface': withOpacityValue('--ax-color-on-surface'),
-  'on-surface-fore': withOpacityValue('--ax-color-on-surface-fore'),
+  surface: 'rgba(var(--ax-color-surface), <alpha-value>)',
+  'surface-fore': 'rgba(var(--ax-color-surface-fore), <alpha-value>)',
 
-  'input-surface': withOpacityValue('--ax-color-input-surface'),
-  'input-surface-fore': withOpacityValue('--ax-color-input-surface-fore'),
+  'on-surface': 'rgba(var(--ax-color-on-surface), <alpha-value>)',
+  'on-surface-fore': 'rgba(var(--ax-color-on-surface-fore), <alpha-value>)',
 
-  'primary-fore': withOpacityValue('--ax-color-primary-fore'),
-  'primary-fore-lighten': withOpacityValue('--ax-color-primary-fore-lighten'),
-
-  'secondary-fore': withOpacityValue('--ax-color-secondary-fore'),
-  'secondary-fore-lighten': withOpacityValue('--ax-color-secondary-fore-lighten'),
-
-  'success-fore': withOpacityValue('--ax-color-success-fore'),
-  'success-fore-lighten': withOpacityValue('--ax-color-success-fore-lighten'),
-
-  'warning-fore': withOpacityValue('--ax-color-warning-fore'),
-  'warning-fore-lighten': withOpacityValue('--ax-color-warning-fore-lighten'),
-
-  'danger-fore': withOpacityValue('--ax-color-danger-fore'),
-  'danger-fore-lighten': withOpacityValue('--ax-color-danger-fore-lighten'),
-
-  'info-fore': withOpacityValue('--ax-color-info-fore'),
-  'info-fore-lighten': withOpacityValue('--ax-color-info-fore-lighten'),
+  'input-surface': 'rgba(var(--ax-color-input-surface), <alpha-value>)',
+  'input-surface-fore': 'rgba(var(--ax-color-input-surface-fore), <alpha-value>)',
+};
 
-  'neutral-fore': withOpacityValue('--ax-color-neutral-fore'),
-  'neutral-fore-lighten': withOpacityValue('--ax-color-neutral-fore-lighten'),
+const createPalete = function (colorName) {
+  return {
+    DEFAULT: `rgba(var(--ax-color-${colorName}), <alpha-value>)`,
+    fore: `rgba(var(--ax-color-${colorName}-fore), <alpha-value>)`,
+    'fore-tint': `color-mix(in srgb, rgba(var(--ax-color-${colorName}), <alpha-value>), black 30%)`,
+    50: `color-mix(in srgb, rgba(var(--ax-color-${colorName}), <alpha-value>) 5%, white)`,
+    100: `color-mix(in srgb, rgba(var(--ax-color-${colorName}), <alpha-value>) 10%, white)`,
+    200: `color-mix(in srgb, rgba(var(--ax-color-${colorName}), <alpha-value>) 30%, white)`,
+    300: `color-mix(in srgb, rgba(var(--ax-color-${colorName}), <alpha-value>) 50%, white)`,
+    400: `color-mix(in srgb, rgba(var(--ax-color-${colorName}), <alpha-value>) 70%, white)`,
+    500: `rgba(var(--ax-color-${colorName}), <alpha-value>)`,
+    600: `color-mix(in srgb, rgba(var(--ax-color-${colorName}), <alpha-value>), black 10%)`,
+    700: `color-mix(in srgb, rgba(var(--ax-color-${colorName}), <alpha-value>), black 30%)`,
+    800: `color-mix(in srgb, rgba(var(--ax-color-${colorName}), <alpha-value>), black 50%)`,
+    900: `color-mix(in srgb, rgba(var(--ax-color-${colorName}), <alpha-value>), black 70%)`,
+    950: `color-mix(in srgb, rgba(var(--ax-color-${colorName}), <alpha-value>), black 90%)`,
+  };
 };
 
 module.exports = withAnimations({
   prefix: 'ax-',
-  corePlugins: {
-    preflight: false,
-  },
+  // corePlugins: {
+  //   preflight: false,
+  // },
   content: ['./src/**/*.{html,ts,scss}', './projects/**/*.{html,ts,scss}'],
+
   darkMode: 'class',
   theme: {
     extend: {
       colors: {
-        primary: {
-          DEFAULT: withOpacityValue('--ax-color-primary-500'),
-          fore: withOpacityValue('--ax-color-primary-fore'),
-          foreLighten: withOpacityValue('--ax-color-primary-lighten'),
-          50: withOpacityValue('--ax-color-primary-50'),
-          100: withOpacityValue('--ax-color-primary-100'),
-          200: withOpacityValue('--ax-color-primary-200'),
-          300: withOpacityValue('--ax-color-primary-300'),
-          400: withOpacityValue('--ax-color-primary-400'),
-          500: withOpacityValue('--ax-color-primary-500'),
-          600: withOpacityValue('--ax-color-primary-600'),
-          700: withOpacityValue('--ax-color-primary-700'),
-          800: withOpacityValue('--ax-color-primary-800'),
-          900: withOpacityValue('--ax-color-primary-900'),
-          950: withOpacityValue('--ax-color-primary-950'),
-        },
-        secondary: {
-          DEFAULT: withOpacityValue('--ax-color-secondary-500'),
-          fore: withOpacityValue('--ax-color-secondary-fore'),
-          foreLighten: withOpacityValue('--ax-color-secondary-lighten'),
-          50: withOpacityValue('--ax-color-secondary-50'),
-          100: withOpacityValue('--ax-color-secondary-100'),
-          200: withOpacityValue('--ax-color-secondary-200'),
-          300: withOpacityValue('--ax-color-secondary-300'),
-          400: withOpacityValue('--ax-color-secondary-400'),
-          500: withOpacityValue('--ax-color-secondary-500'),
-          600: withOpacityValue('--ax-color-secondary-600'),
-          700: withOpacityValue('--ax-color-secondary-700'),
-          800: withOpacityValue('--ax-color-secondary-800'),
-          900: withOpacityValue('--ax-color-secondary-900'),
-          950: withOpacityValue('--ax-color-secondary-950'),
-        },
-        success: {
-          DEFAULT: withOpacityValue('--ax-color-success-500'),
-          fore: withOpacityValue('--ax-color-success-fore'),
-          foreLighten: withOpacityValue('--ax-color-success-lighten'),
-          50: withOpacityValue('--ax-color-success-50'),
-          100: withOpacityValue('--ax-color-success-100'),
-          200: withOpacityValue('--ax-color-success-200'),
-          300: withOpacityValue('--ax-color-success-300'),
-          400: withOpacityValue('--ax-color-success-400'),
-          500: withOpacityValue('--ax-color-success-500'),
-          600: withOpacityValue('--ax-color-success-600'),
-          700: withOpacityValue('--ax-color-success-700'),
-          800: withOpacityValue('--ax-color-success-800'),
-          900: withOpacityValue('--ax-color-success-900'),
-          950: withOpacityValue('--ax-color-success-950'),
-        },
-        danger: {
-          DEFAULT: withOpacityValue('--ax-color-danger-500'),
-          fore: withOpacityValue('--ax-color-danger-fore'),
-          foreLighten: withOpacityValue('--ax-color-danger-lighten'),
-          50: withOpacityValue('--ax-color-danger-50'),
-          100: withOpacityValue('--ax-color-danger-100'),
-          200: withOpacityValue('--ax-color-danger-200'),
-          300: withOpacityValue('--ax-color-danger-300'),
-          400: withOpacityValue('--ax-color-danger-400'),
-          500: withOpacityValue('--ax-color-danger-500'),
-          600: withOpacityValue('--ax-color-danger-600'),
-          700: withOpacityValue('--ax-color-danger-700'),
-          800: withOpacityValue('--ax-color-danger-800'),
-          900: withOpacityValue('--ax-color-danger-900'),
-          950: withOpacityValue('--ax-color-danger-950'),
-        },
-        warning: {
-          DEFAULT: withOpacityValue('--ax-color-warning-500'),
-          fore: withOpacityValue('--ax-color-warning-fore'),
-          foreLighten: withOpacityValue('--ax-color-warning-lighten'),
-          50: withOpacityValue('--ax-color-warning-50'),
-          100: withOpacityValue('--ax-color-warning-100'),
-          200: withOpacityValue('--ax-color-warning-200'),
-          300: withOpacityValue('--ax-color-warning-300'),
-          400: withOpacityValue('--ax-color-warning-400'),
-          500: withOpacityValue('--ax-color-warning-500'),
-          600: withOpacityValue('--ax-color-warning-600'),
-          700: withOpacityValue('--ax-color-warning-700'),
-          800: withOpacityValue('--ax-color-warning-800'),
-          900: withOpacityValue('--ax-color-warning-900'),
-          950: withOpacityValue('--ax-color-warning-950'),
-        },
-        info: {
-          DEFAULT: withOpacityValue('--ax-color-info-500'),
-          fore: withOpacityValue('--ax-color-info-fore'),
-          foreLighten: withOpacityValue('--ax-color-info-lighten'),
-          50: withOpacityValue('--ax-color-info-50'),
-          100: withOpacityValue('--ax-color-info-100'),
-          200: withOpacityValue('--ax-color-info-200'),
-          300: withOpacityValue('--ax-color-info-300'),
-          400: withOpacityValue('--ax-color-info-400'),
-          500: withOpacityValue('--ax-color-info-500'),
-          600: withOpacityValue('--ax-color-info-600'),
-          700: withOpacityValue('--ax-color-info-700'),
-          800: withOpacityValue('--ax-color-info-800'),
-          900: withOpacityValue('--ax-color-info-900'),
-          950: withOpacityValue('--ax-color-info-950'),
-        },
-        neutral: {
-          DEFAULT: withOpacityValue('--ax-color-neutral-500'),
-          fore: withOpacityValue('--ax-color-neutral-fore'),
-          foreLighten: withOpacityValue('--ax-color-neutral-lighten'),
-          50: withOpacityValue('--ax-color-neutral-50'),
-          100: withOpacityValue('--ax-color-neutral-100'),
-          200: withOpacityValue('--ax-color-neutral-200'),
-          300: withOpacityValue('--ax-color-neutral-300'),
-          400: withOpacityValue('--ax-color-neutral-400'),
-          500: withOpacityValue('--ax-color-neutral-500'),
-          600: withOpacityValue('--ax-color-neutral-600'),
-          700: withOpacityValue('--ax-color-neutral-700'),
-          800: withOpacityValue('--ax-color-neutral-800'),
-          900: withOpacityValue('--ax-color-neutral-900'),
-          950: withOpacityValue('--ax-color-neutral-950'),
-        },
+        primary: createPalete('primary'),
+        secondary: createPalete('secondary'),
+        success: createPalete('success'),
+        danger: createPalete('danger'),
+        warning: createPalete('warning'),
+        info: createPalete('info'),
+        neutral: createPalete('neutral'),
+        ..._colors,
       },
       textColor: {
         DEFAULT: withOpacityValue('--ax-color-text-default'),
         default: withOpacityValue('--ax-color-text-default'),
-        ..._color,
+        ..._colors,
       },
-      fill: {
-        ..._color,
-      },
-      stroke: {
-        ..._color,
-      },
-
       backgroundColor: {
-        default: withOpacityValue('--ax-color-background-default'),
-        surface: withOpacityValue('--ax-color-surface'),
-        'on-surface': withOpacityValue('--ax-color-on-surface'),
-        'input-surface': withOpacityValue('--ax-color-input-surface'),
+        default: 'rgba(var(--ax-color-background-default), <alpha-value>)',
       },
+
       borderColor: {
         DEFAULT: 'rgba(var(--ax-color-border-default))',
         default: 'rgba(var(--ax-color-border-default))',
-        ..._color,
+        ..._colors,
       },
       maxWidth: {
         '8xl': '90rem',
@@ -209,6 +98,27 @@ module.exports = withAnimations({
         16: '4rem',
         20: '5rem',
       },
+      spacing: {
+        default: 'var(--ax-size-default)',
+      },
+      minWidth: {
+        default: 'var(--ax-size-default)',
+      },
+      width: {
+        default: 'var(--ax-size-default)',
+      },
+      maxHeight: {
+        default: 'var(--ax-size-default)',
+      },
+      minHeight: {
+        default: 'var(--ax-size-default)',
+      },
+      height: {
+        default: 'var(--ax-size-default)',
+      },
+      maxHeight: {
+        default: 'var(--ax-size-default)',
+      },
     },
   },
 
@@ -281,12 +191,24 @@ module.exports = withAnimations({
         '.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',

package/src/animations/index.scss

@@ -1,88 +0,0 @@
-.ax-animate-fadeIn {
-  animation-name: ax-fadeIn;
-  animation-duration: 1s;
-  animation-duration: 1000ms;
-}
-.ax-animate-bounceIn {
-  animation: 0.75s cubic-bezier(0.215, 0.61, 0.355, 1) both ax-bounceIn;
-}
-.ax-animate-faster {
-  animation-duration: 0.5s;
-  animation-duration: 500ms;
-}
-
-.ax-animate-zoomIn {
-  animation-name: ax-zoomIn;
-}
-.ax-animate-slideInUp {
-  animation-name: ax-slideInUp;
-}
-@keyframes ax-slideInUp {
-  from {
-    transform: translate3d(0, 100%, 0);
-    visibility: visible;
-  }
-
-  to {
-    transform: translate3d(0, 0, 0);
-  }
-}
-
-@keyframes ax-zoomIn {
-  from {
-    opacity: 0;
-    transform: scale3d(0.3, 0.3, 0.3);
-  }
-
-  50% {
-    opacity: 1;
-  }
-}
-
-@keyframes ax-fadeIn {
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes ax-bounceIn {
-  from,
-  20%,
-  40%,
-  60%,
-  80%,
-  to {
-    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-  }
-
-  0% {
-    opacity: 0;
-    transform: scale3d(0.3, 0.3, 0.3);
-  }
-
-  20% {
-    transform: scale3d(1.1, 1.1, 1.1);
-  }
-
-  40% {
-    transform: scale3d(0.9, 0.9, 0.9);
-  }
-
-  60% {
-    opacity: 1;
-    transform: scale3d(1.03, 1.03, 1.03);
-  }
-
-  80% {
-    transform: scale3d(0.97, 0.97, 0.97);
-  }
-
-  to {
-    opacity: 1;
-    transform: scale3d(1, 1, 1);
-  }
-}