@acorex/styles 18.12.28 → 18.12.29

package/tailwind-base.js

@@ -1,234 +1,234 @@
-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');
-  addVariant('child-focus', '& > *:focus');
-  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>)',
-
-  'on-surface': 'rgba(var(--ax-color-on-surface), <alpha-value>)',
-  'on-surface-fore': 'rgba(var(--ax-color-on-surface-fore), <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 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>)`,
-  };
-};
-
-module.exports = withAnimations({
-  prefix: 'ax-',
-  content: ['./src/**/*.{html,ts,scss}', './projects/**/*.{html,ts,scss}'],
-  darkMode: 'class',
-  theme: {
-    extend: {
-      colors: {
-        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'),
-        ..._colors,
-      },
-      backgroundColor: {
-        default: 'rgba(var(--ax-color-background-default), <alpha-value>)',
-        'border-default': 'rgba(var(--ax-color-border-default), <alpha-value>)',
-      },
-
-      borderColor: {
-        DEFAULT: 'rgba(var(--ax-color-border-default), <alpha-value>)',
-        default: 'rgba(var(--ax-color-border-default), <alpha-value>)',
-        ..._colors,
-      },
-      maxWidth: {
-        '8xl': '90rem',
-      },
-      borderRadius: {
-        default: 'var(--ax-rounded-border-default)',
-      },
-      lineHeight: {
-        11: '2.5rem',
-        12: '3rem',
-        12: '3rem',
-        14: '3.5rem',
-        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)',
-      },
-    },
-  },
-  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']);
-    }),
-    childSelector,
-  ],
-});
+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');
+  addVariant('child-focus', '& > *:focus');
+  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>)',
+
+  'on-surface': 'rgba(var(--ax-color-on-surface), <alpha-value>)',
+  'on-surface-fore': 'rgba(var(--ax-color-on-surface-fore), <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 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>)`,
+  };
+};
+
+module.exports = withAnimations({
+  prefix: 'ax-',
+  content: ['./src/**/*.{html,ts,scss}', './projects/**/*.{html,ts,scss}'],
+  darkMode: 'class',
+  theme: {
+    extend: {
+      colors: {
+        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'),
+        ..._colors,
+      },
+      backgroundColor: {
+        default: 'rgba(var(--ax-color-background-default), <alpha-value>)',
+        'border-default': 'rgba(var(--ax-color-border-default), <alpha-value>)',
+      },
+
+      borderColor: {
+        DEFAULT: 'rgba(var(--ax-color-border-default), <alpha-value>)',
+        default: 'rgba(var(--ax-color-border-default), <alpha-value>)',
+        ..._colors,
+      },
+      maxWidth: {
+        '8xl': '90rem',
+      },
+      borderRadius: {
+        default: 'var(--ax-rounded-border-default)',
+      },
+      lineHeight: {
+        11: '2.5rem',
+        12: '3rem',
+        12: '3rem',
+        14: '3.5rem',
+        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)',
+      },
+    },
+  },
+  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']);
+    }),
+    childSelector,
+  ],
+});