123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280 |
- const colors = require('tailwindcss/colors')
- const plugin = require('tailwindcss/plugin')
- const radix = require('@radix-ui/colors')
- const accent = {
- 'DEFAULT': 'hsl(var(--accent))',
- 'base': 'hsl(var(--accent))',
- 'foreground': 'hsl(var(--accent-foreground))',
- '01': 'var(--lx-accent-01, --rx-gray-01)',
- '02': 'var(--lx-accent-02, hsl(var(--accent)/.1))',
- '03': 'var(--lx-accent-03, hsl(var(--accent)/.15))',
- '04': 'var(--lx-accent-04, hsl(var(--accent)/.2))',
- '05': 'var(--lx-accent-05, hsl(var(--accent)/.3))',
- '06': 'var(--lx-accent-06, hsl(var(--accent)/.4))',
- '07': 'var(--lx-accent-07, hsl(var(--accent)/.5))',
- '08': 'var(--lx-accent-08, hsl(var(--accent)/.6))',
- '09': 'var(--lx-accent-09, hsl(var(--accent)/.7))',
- '10': 'var(--lx-accent-10, hsl(var(--accent)/.8))',
- '11': 'var(--lx-accent-11, hsl(var(--accent)/.9))',
- '12': 'var(--lx-accent-12, --rx-gray-12)',
- '01-alpha': 'var(--lx-accent-01-alpha)',
- '02-alpha': 'var(--lx-accent-02-alpha)',
- '03-alpha': 'var(--lx-accent-03-alpha)',
- '04-alpha': 'var(--lx-accent-04-alpha)',
- '05-alpha': 'var(--lx-accent-05-alpha)',
- '06-alpha': 'var(--lx-accent-06-alpha)',
- '07-alpha': 'var(--lx-accent-07-alpha)',
- '08-alpha': 'var(--lx-accent-08-alpha)',
- '09-alpha': 'var(--lx-accent-09-alpha)',
- '10-alpha': 'var(--lx-accent-10-alpha)',
- '11-alpha': 'var(--lx-accent-11-alpha)',
- '12-alpha': 'var(--lx-accent-12-alpha)',
- }
- const gray = {
- ...colors.gray,
- '01': 'var(--lx-gray-01, var(--ls-primary-background-color, var(--rx-gray-01)))',
- '02': 'var(--lx-gray-02, var(--ls-secondary-background-color, var(--rx-gray-02)))',
- '03': 'var(--lx-gray-03, var(--ls-tertiary-background-color, var(--rx-gray-03)))',
- '04': 'var(--lx-gray-04, var(--ls-quaternary-background-color, var(--rx-gray-04)))',
- '05': 'var(--lx-gray-05, var(--ls-quaternary-background-color, var(--rx-gray-05)))',
- '06': 'var(--lx-gray-06, var(--ls-quaternary-background-color, var(--rx-gray-06)))',
- '07': 'var(--lx-gray-07, var(--ls-quaternary-background-color, var(--rx-gray-07)))',
- '08': 'var(--lx-gray-08, var(--rx-gray-08))',
- '09': 'var(--lx-gray-09, var(--rx-gray-09))',
- '10': 'var(--lx-gray-10, var(--rx-gray-10))',
- '11': 'var(--lx-gray-11, var(--rx-gray-11))',
- '12': 'var(--lx-gray-12, var(--rx-gray-12))',
- '01-alpha': 'var(--lx-gray-01-alpha, var(--rx-gray-01-alpha))',
- '02-alpha': 'var(--lx-gray-02-alpha, var(--rx-gray-02-alpha))',
- '03-alpha': 'var(--lx-gray-03-alpha, var(--rx-gray-03-alpha))',
- '04-alpha': 'var(--lx-gray-04-alpha, var(--rx-gray-04-alpha))',
- '05-alpha': 'var(--lx-gray-05-alpha, var(--rx-gray-05-alpha))',
- '06-alpha': 'var(--lx-gray-06-alpha, var(--rx-gray-06-alpha))',
- '07-alpha': 'var(--lx-gray-07-alpha, var(--rx-gray-07-alpha))',
- '08-alpha': 'var(--lx-gray-08-alpha, var(--rx-gray-08-alpha))',
- '09-alpha': 'var(--lx-gray-09-alpha, var(--rx-gray-09-alpha))',
- '10-alpha': 'var(--lx-gray-10-alpha, var(--rx-gray-10-alpha))',
- '11-alpha': 'var(--lx-gray-11-alpha, var(--rx-gray-11-alpha))',
- '12-alpha': 'var(--lx-gray-12-alpha, var(--rx-gray-12-alpha))',
- }
- function exposeColorsToCssVars ({ addBase, theme }) {
- function extractColorVars (colorObj, colorGroup = '') {
- return Object.keys(colorObj).reduce((vars, colorKey) => {
- const value = colorObj[colorKey]
- const newVars =
- typeof value === 'string'
- ? { [`--color${colorGroup}-${colorKey}`]: value }
- : extractColorVars(value, `-${colorKey}`)
- return { ...vars, ...newVars }
- }, {})
- }
- addBase({
- ':root': extractColorVars(theme('colors')),
- })
- }
- 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})` }
- }
- }
- }, {
- values: {}
- })
- })
- 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 = {}
- 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 colors
- }
- module.exports = {
- darkMode: 'class',
- content: [
- './src/**/*.js',
- './src/**/*.cljs',
- './resources/**/*.html',
- './deps/shui/src/**/*.cljs',
- './deps/shui/src/**/*.cljc',
- './packages/ui/@/components/**/*.{ts,tsx}'
- ],
- safelist: [
- 'bg-black', 'bg-white', 'capitalize-first',
- { pattern: /bg-(gray|red|yellow|green|blue|orange|indigo|rose|purple|pink)-(100|200|300|400|500|600|700|800|900)/ },
- { pattern: /text-(gray|red|yellow|green|blue|orange|indigo|rose|purple|pink)-(100|200|300|400|500|600|700|800|900)/ },
- { pattern: /columns-([1-9]|1[0-2])|(auto|3xs|2xs|xs|sm|md|lg|xl)|([2-7]xl)/ },
- ],
- plugins: [
- require('@tailwindcss/forms'),
- require('@tailwindcss/typography'),
- require('@tailwindcss/aspect-ratio'),
- require('tailwind-capitalize-first-letter'),
- require('tailwindcss-animate'),
- exposeColorsToCssVars
- ],
- theme: {
- extend: {
- backgroundImage: {
- 'gradient-conic': 'conic-gradient(var(--tw-gradient-stops))',
- 'gradient-conic-bounce': 'conic-gradient(var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to), var(--tw-gradient-via), var(--tw-gradient-from))',
- 'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
- },
- fontSize: {
- '2xs': ['0.625rem', '0.875rem']
- },
- 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',
- '144': '36rem'
- },
- scale: {
- '200': '2',
- '250': '2.5',
- '300': '3',
- '400': '4',
- },
- width: {
- 'lsm': '600px',
- 'lmd': '728px',
- 'llg': '960px'
- },
- // backgroundColor: {
- // ...lx('--lx-bg-override'),
- // },
- // textColor: {
- // ...lx('--lx-text-override'),
- // },
- // 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))',
- },
- popovelx: {
- DEFAULT: 'var(--lx-gray-03, hsl(var(--popover)))',
- },
- card: {
- DEFAULT: 'hsl(var(--card))',
- foreground: 'hsl(var(--card-foreground))',
- },
- // Tailwind colors
- gray: gray,
- accent: accent,
- 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
- }
- }
|