Merge branch 'master' into feat/db

tailwind.config.js

@@ -54,6 +54,9 @@ const lx = override => ({
 })
 
 const accent = {
+  'DEFAULT': 'hsl(var(--accent))',
+  'base': 'hsl(var(--accent))',
+  'foreground': 'hsl(var(--accent-foreground))',
   '01': 'var(--lx-accent-01)',
   '02': 'var(--lx-accent-02)',
   '03': 'var(--lx-accent-03)',
@@ -127,75 +130,46 @@ function exposeColorsToCssVars ({ addBase, theme }) {
   })
 }
 
-const withOverride = plugin(function({ matchUtilities }) {
+const withOverride = plugin(function ({ matchUtilities }) {
   matchUtilities({
     'or': (value, b) => {
-        // check if the value starts with "bg-"
-        if (value.startsWith('bg-')) {
-          return { [`--lx-bg-override`]: `var(--lx-${value})` }
-        }
-        // check if the value starts with "text-"
-        if (value.startsWith('text-')) {
-          return { [`--lx-text-override`]: `var(--lx-${value})` }
-        }
-        // check if the value starts with "border-"
-        if (value.startsWith('border-')) {
-          return { [`--lx-border-override`]: `var(--lx-${value})` }
-        }
+      // check if the value starts with "bg-"
+      if (value.startsWith('bg-')) {
+        return { [`--lx-bg-override`]: `var(--lx-${value})` }
+      }
+      // check if the value starts with "text-"
+      if (value.startsWith('text-')) {
+        return { [`--lx-text-override`]: `var(--lx-${value})` }
+      }
+      // check if the value starts with "border-"
+      if (value.startsWith('border-')) {
+        return { [`--lx-border-override`]: `var(--lx-${value})` }
+      }
     }
   }, {
     values: {}
   })
 })
 
-function buildColor(color, custom) {
-  const base = custom || colors[color] || {}
+function mapRadixColorToTailwind (color) {
+  const radixColor = radix[color]
+  if (!radixColor) throw new Error(`[radix color] not exist for ${color}`)
+  const twSteps = [10, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950]
+  const rxSteps = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
+  const colors = {}
 
-  for (const [xName, xValue] of Object.entries(radix[color] || {})) {
-    const regexResult = xName.match(/\d+$/)
-    if (!regexResult) { continue; }
-    const xStep = regexResult[0]
-    base[xStep] = xValue
-  }
+  twSteps.forEach((twStep, index) => {
+    const rxStep = rxSteps[index]
+    // base color
+    colors[twStep] = radixColor[`${color}${rxStep}`]
+    // theme vars color
+    const rxStepName = `${(rxStep < 10) ? '0' : ''}${rxStep}`
+    const rxVarName = `--rx-${color}-${rxStepName}`
+    colors[`rx-${rxStepName}`] = `var(${rxVarName})`
+    colors[`rx-${rxStepName}-alpha`] = `var(${rxVarName}-alpha)`
+  })
 
-  return base
-}
-
-function getDarkSelector(config) {
-  const darkMode = config("darkMode");
-  const prefix = config("prefix");
-
-  if (Array.isArray(darkMode)) {
-    if (darkMode.length < 2) {
-      throw new Error(
-        "To customize the dark mode selector, `darkMode` should contain two items. Documentation: https://tailwindcss.com/docs/dark-mode#customizing-the-class-name"
-      );
-    }
-
-    if (darkMode[0] !== "class") {
-      throw new Error(
-        'To customize the dark mode selector, `darkMode` should have "class" as its first item. Documentation: https://tailwindcss.com/docs/dark-mode#customizing-the-class-name'
-      );
-    }
-
-    return darkMode[1] + " &";
-  }
-
-  if (darkMode === "media") {
-    return "@media (prefers-color-scheme: dark)";
-  }
-
-  if (darkMode !== "class") {
-    throw new Error(
-      "Invalid `darkMode`. Documentation: https://tailwindcss.com/docs/dark-mode"
-    );
-  }
-
-  if (prefix) {
-    return `[class~="${prefix}dark"] &`;
-  }
-
-  return '[class~="dark"] &';
+  return colors
 }
 
 module.exports = {
@@ -205,6 +179,7 @@ module.exports = {
     './src/**/*.cljs',
     './resources/**/*.html',
     './deps/shui/src/**/*.cljs',
+    './packages/ui/@/components/**/*.{ts,tsx}'
   ],
   safelist: [
     'bg-black', 'bg-white', 'capitalize-first',
@@ -217,6 +192,7 @@ module.exports = {
     require('@tailwindcss/typography'),
     require('@tailwindcss/aspect-ratio'),
     require('tailwind-capitalize-first-letter'),
+    require('tailwindcss-animate'),
     exposeColorsToCssVars,
     withOverride,
   ],
@@ -232,6 +208,8 @@ module.exports = {
       },
       animation: {
         'spin-reverse': 'spin 2s linear infinite reverse',
+        'accordion-down': 'accordion-down 0.2s ease-out',
+        'accordion-up': 'accordion-up 0.2s ease-out',
       },
       spacing: {
         '128': '32rem',
@@ -257,25 +235,94 @@ module.exports = {
       borderColor: {
         ...lx('--lx-border-override'),
       },
+      borderRadius: {
+        lg: 'var(--radius)',
+        md: 'calc(var(--radius) - 2px)',
+        sm: 'calc(var(--radius) - 4px)',
+      },
+      keyframes: {
+        'accordion-down': {
+          from: { height: 0 },
+          to: { height: 'var(--radix-accordion-content-height)' },
+        },
+        'accordion-up': {
+          from: { height: 'var(--radix-accordion-content-height)' },
+          to: { height: 0 },
+        },
+      },
     },
     colors: {
+      // Theme basic
+      border: 'hsl(var(--border))',
+      input: 'hsl(var(--input))',
+      ring: 'hsl(var(--ring))',
+      background: 'hsl(var(--background))',
+      foreground: 'hsl(var(--foreground))',
+      primary: {
+        DEFAULT: 'hsl(var(--primary))',
+        foreground: 'hsl(var(--primary-foreground))',
+      },
+      secondary: {
+        DEFAULT: 'hsl(var(--secondary))',
+        foreground: 'hsl(var(--secondary-foreground))',
+      },
+      destructive: {
+        DEFAULT: 'hsl(var(--destructive))',
+        foreground: 'hsl(var(--destructive-foreground))',
+      },
+      muted: {
+        DEFAULT: 'hsl(var(--muted))',
+        foreground: 'hsl(var(--muted-foreground))',
+      },
+      popover: {
+        DEFAULT: 'hsl(var(--popover))',
+        foreground: 'hsl(var(--popover-foreground))',
+      },
+      card: {
+        DEFAULT: 'hsl(var(--card))',
+        foreground: 'hsl(var(--card-foreground))',
+      },
+
       // Tailwind colors
       gray: gray,
       accent: accent,
-      red: colors.red,
-      green: colors.green,
-      blue: colors.blue,
-      black: colors.black,
-      orange: colors.orange,
-      indigo: colors.indigo,
-      rose: colors.rose,
-      purple: colors.purple,
-      pink: colors.pink,
-      yellow: colors.yellow,
-
       current: 'currentColor',
       transparent: 'transparent',
+      black: colors.black,
       white: colors.white,
+
+      red: mapRadixColorToTailwind('red'),
+      pink: mapRadixColorToTailwind('pink'),
+      orange: mapRadixColorToTailwind('orange'),
+      yellow: mapRadixColorToTailwind('yellow'),
+      green: mapRadixColorToTailwind('green'),
+      blue: mapRadixColorToTailwind('blue'),
+      indigo: mapRadixColorToTailwind('indigo'),
+      purple: mapRadixColorToTailwind('purple'),
+
+      rose: mapRadixColorToTailwind('red'),
+      amber: mapRadixColorToTailwind('amber'),
+      bronze: mapRadixColorToTailwind('bronze'),
+      brown: mapRadixColorToTailwind('brown'),
+      crimson: mapRadixColorToTailwind('crimson'),
+      cyan: mapRadixColorToTailwind('cyan'),
+      gold: mapRadixColorToTailwind('gold'),
+      grass: mapRadixColorToTailwind('grass'),
+      lime: mapRadixColorToTailwind('lime'),
+      mauve: mapRadixColorToTailwind('mauve'),
+      mint: mapRadixColorToTailwind('mint'),
+      olive: mapRadixColorToTailwind('olive'),
+      plum: mapRadixColorToTailwind('plum'),
+      sage: mapRadixColorToTailwind('sage'),
+      sand: mapRadixColorToTailwind('sand'),
+      sky: mapRadixColorToTailwind('sky'),
+      slate: mapRadixColorToTailwind('slate'),
+      teal: mapRadixColorToTailwind('teal'),
+      tomato: mapRadixColorToTailwind('tomato'),
+      violet: mapRadixColorToTailwind('violet'),
     }
+  },
+  corePlugins: {
+    preflight: true
   }
 }