avo 2.43.0 → 3.0.2

data/tailwind.custom.js

@@ -0,0 +1,47 @@
+const primary = {
+  50: 'rgb(var(--color-primary-50))',
+  100: 'rgb(var(--color-primary-100))',
+  150: 'rgb(var(--color-primary-150))',
+  200: 'rgb(var(--color-primary-200))',
+  300: 'rgb(var(--color-primary-300))',
+  400: 'rgb(var(--color-primary-400))',
+  500: 'rgb(var(--color-primary-500))',
+  600: 'rgb(var(--color-primary-600))',
+  700: 'rgb(var(--color-primary-700))',
+  800: 'rgb(var(--color-primary-800))',
+  850: 'rgb(var(--color-primary-850))',
+  900: 'rgb(var(--color-primary-900))',
+}
+
+const blue = {
+  50: '#E6F3FC',
+  100: '#CEE7F8',
+  150: '#B5DBF5',
+  200: '#9CCFF2',
+  300: '#6BB6EB',
+  400: '#399EE5',
+  500: '#0886DE',
+  600: '#066BB2',
+  700: '#055085',
+  800: '#033659',
+  850: '#022843',
+  900: '#021B2C',
+}
+
+const gray = {
+  25: '#F6F6F7',
+  50: '#F1F2F3',
+  100: '#E3E5E8',
+  150: '#D6D8DC',
+  200: '#C8CBD0',
+  300: '#ACB1B9',
+  400: '#9197A1',
+  500: '#757D8A',
+  600: '#5E646E',
+  700: '#464B53',
+  800: '#2F3237',
+  850: '#232629',
+  900: '#17191C',
+}
+
+module.exports = { primary, blue, gray }

data/tailwind.preset.js

@@ -0,0 +1,152 @@
+const plugin = require('tailwindcss/plugin')
+const colors = require('tailwindcss/colors')
+const defaultTheme = require('tailwindcss/defaultTheme')
+
+const { primary, blue, gray } = require('./tailwind.custom')
+const avoPath = require('child_process').execSync('bundle show avo', { encoding: 'utf-8' }).trim()
+
+function contentPaths(basePath) {
+  return [
+    `${basePath}/safelist.txt`,
+    `${basePath}/lib/avo/**/*.rb`,
+    `${basePath}/app/helpers/**/*.rb`,
+    `${basePath}/app/views/**/*.erb`,
+    `${basePath}/app/javascript/**/*.js`,
+    `${basePath}/app/components/**/*.{html.erb,rb}`,
+    `${basePath}/app/controllers/**/*.rb`,
+    `${basePath}/lib/**/*.rb`,
+    `${basePath}/public/**/*.{js,css}`,
+  ]
+}
+
+module.exports = {
+  content: [
+    ...contentPaths('./tmp/avo/packages/*'),
+    ...contentPaths(avoPath),
+  ],
+  theme: {
+    extend: {
+      colors: {
+        blue,
+        gray,
+        primary,
+        sky: colors.sky,
+        teal: colors.teal,
+        slate: colors.slate,
+        indigo: colors.indigo,
+        application: 'rgb(var(--color-application-background))',
+      },
+      fontFamily: {
+        // eslint-disable-next-line max-len
+        sans: '"Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",  "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
+      },
+      inset: {
+        '1/2': '50%',
+        full: '100%',
+      },
+      borderRadius: {
+        xl: '1rem',
+      },
+      boxShadow: {
+        row: '0 0 15px -5px rgba(0, 0, 0, 0.25)',
+        context: '0 20px 25px -5px rgba(0, 0, 0, 0.25), 0 0 25px -5px rgba(0, 0, 0, 0.1)',
+        panel: '0px 4px 8px rgba(0, 0, 0, 0.04), 0px 0px 2px rgba(0, 0, 0, 0.06), 0px 0px 1px rgba(0, 0, 0, 0.04)',
+        modal: ' 0px 24px 32px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04), 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.04)',
+        stripe: '0 15px 35px #31315d1a, 0 5px 15px #00000014',
+      },
+      minWidth: {
+        '1/2': '50%',
+        '1/3': '33.333333%',
+        '2/3': '66.666667%',
+        '1/4': '25%',
+        '2/4': '50%',
+        '3/4': '75%',
+        '1/5': '20%',
+        '2/5': '40%',
+        '3/5': '60%',
+        '4/5': '80%',
+      },
+      maxWidth: {
+        168: '42rem',
+      },
+      minHeight: {
+        inherit: 'inherit',
+        16: '4rem',
+        24: '6rem',
+        48: '12rem',
+        '1/2': '50%',
+        '1/3': '33.333333%',
+        '2/3': '66.666667%',
+        '1/4': '25%',
+        '2/4': '50%',
+        '3/4': '75%',
+        '1/5': '20%',
+        '2/5': '40%',
+        '3/5': '60%',
+        '4/5': '80%',
+      },
+      spacing: {
+        full: '100%',
+        72: '18rem',
+        80: '20rem',
+        88: '22rem',
+        96: '24rem',
+        '1/2': '50%',
+        '1/3': '33.333333%',
+        '2/3': '66.666667%',
+        '1/4': '25%',
+        '2/4': '50%',
+        '3/4': '75%',
+        '1/5': '20%',
+        '2/5': '40%',
+        '3/5': '60%',
+        '4/5': '80%',
+        '1/6': '16.666667%',
+        '2/6': '33.333333%',
+        '3/6': '50%',
+        '4/6': '66.666667%',
+        '5/6': '83.333333%',
+        '1/12': '8.333333%',
+        '2/12': '16.666667%',
+        '3/12': '25%',
+        '4/12': '33.333333%',
+        '5/12': '41.666667%',
+        '6/12': '50%',
+        '7/12': '58.333333%',
+        '8/12': '66.666667%',
+        '9/12': '75%',
+        '10/12': '83.333333%',
+        '11/12': '91.666667%',
+      },
+      transitionTimingFunction: {
+        pop: 'cubic-bezier(.23,2,.73,.55)',
+      },
+    },
+    screens: {
+      xs: '495px',
+      ...defaultTheme.screens,
+    },
+  },
+  variants: {
+    display: ['responsive', 'hover', 'focus', 'group-hover', 'checked'],
+    padding: ['responsive', 'group-hover'],
+    borderColor: ['responsive', 'hover', 'focus', 'disabled'],
+    backgroundColor: ['responsive', 'hover', 'focus', 'disabled'],
+    textColor: ['responsive', 'hover', 'focus', 'disabled'],
+    translate: ['responsive', 'hover', 'focus', 'active'],
+    cursor: ['responsive', 'disabled'],
+  },
+  plugins: [
+    require('@tailwindcss/forms'),
+    require('@tailwindcss/typography'),
+    plugin(({ addUtilities }) => {
+      const newUtilities = {
+        '.backface-hidden': {
+          backfaceVisibility: 'hidden',
+        },
+      }
+
+      addUtilities(newUtilities, ['group-hover'])
+    }),
+  ],
+}