2021-02-26 11:57:44 +00:00
const colors = require ( 'tailwindcss/colors' )
2023-01-19 18:40:04 +00:00
const radix = require ( '@radix-ui/colors' )
2023-09-15 11:30:51 +00:00
const lx = {
'accent-01' : 'var(--lx-accent-01)' ,
'accent-02' : 'var(--lx-accent-02)' ,
'accent-03' : 'var(--lx-accent-03)' ,
'accent-04' : 'var(--lx-accent-04)' ,
'accent-05' : 'var(--lx-accent-05)' ,
'accent-06' : 'var(--lx-accent-06)' ,
'accent-07' : 'var(--lx-accent-07)' ,
'accent-08' : 'var(--lx-accent-08)' ,
'accent-09' : 'var(--lx-accent-09)' ,
'accent-10' : 'var(--lx-accent-10)' ,
'accent-11' : 'var(--lx-accent-11)' ,
'accent-12' : 'var(--lx-accent-12)' ,
'accent-01-alpha' : 'var(--lx-accent-01-alpha)' ,
'accent-02-alpha' : 'var(--lx-accent-02-alpha)' ,
'accent-03-alpha' : 'var(--lx-accent-03-alpha)' ,
'accent-04-alpha' : 'var(--lx-accent-04-alpha)' ,
'accent-05-alpha' : 'var(--lx-accent-05-alpha)' ,
'accent-06-alpha' : 'var(--lx-accent-06-alpha)' ,
'accent-07-alpha' : 'var(--lx-accent-07-alpha)' ,
'accent-08-alpha' : 'var(--lx-accent-08-alpha)' ,
'accent-09-alpha' : 'var(--lx-accent-09-alpha)' ,
'accent-10-alpha' : 'var(--lx-accent-10-alpha)' ,
'accent-11-alpha' : 'var(--lx-accent-11-alpha)' ,
'accent-12-alpha' : 'var(--lx-accent-12-alpha)' ,
'gray-01' : 'var(--lx-gray-01)' ,
'gray-02' : 'var(--lx-gray-02)' ,
'gray-03' : 'var(--lx-gray-03)' ,
'gray-04' : 'var(--lx-gray-04)' ,
'gray-05' : 'var(--lx-gray-05)' ,
'gray-06' : 'var(--lx-gray-06)' ,
'gray-07' : 'var(--lx-gray-07)' ,
'gray-08' : 'var(--lx-gray-08)' ,
'gray-09' : 'var(--lx-gray-09)' ,
'gray-10' : 'var(--lx-gray-10)' ,
'gray-11' : 'var(--lx-gray-11)' ,
'gray-12' : 'var(--lx-gray-12)' ,
'gray-01-alpha' : 'var(--lx-gray-01-alpha)' ,
'gray-02-alpha' : 'var(--lx-gray-02-alpha)' ,
'gray-03-alpha' : 'var(--lx-gray-03-alpha)' ,
'gray-04-alpha' : 'var(--lx-gray-04-alpha)' ,
'gray-05-alpha' : 'var(--lx-gray-05-alpha)' ,
'gray-06-alpha' : 'var(--lx-gray-06-alpha)' ,
'gray-07-alpha' : 'var(--lx-gray-07-alpha)' ,
'gray-08-alpha' : 'var(--lx-gray-08-alpha)' ,
'gray-09-alpha' : 'var(--lx-gray-09-alpha)' ,
'gray-10-alpha' : 'var(--lx-gray-10-alpha)' ,
'gray-11-alpha' : 'var(--lx-gray-11-alpha)' ,
'gray-12-alpha' : 'var(--lx-gray-12-alpha)' ,
}
2023-10-16 18:39:04 +00:00
const accent = {
'01' : 'var(--lx-accent-01)' ,
'02' : 'var(--lx-accent-02)' ,
'03' : 'var(--lx-accent-03)' ,
'04' : 'var(--lx-accent-04)' ,
'05' : 'var(--lx-accent-05)' ,
'06' : 'var(--lx-accent-06)' ,
'07' : 'var(--lx-accent-07)' ,
'08' : 'var(--lx-accent-08)' ,
'09' : 'var(--lx-accent-09)' ,
'10' : 'var(--lx-accent-10)' ,
'11' : 'var(--lx-accent-11)' ,
'12' : 'var(--lx-accent-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)' ,
'02' : 'var(--lx-gray-02)' ,
'03' : 'var(--lx-gray-03)' ,
'04' : 'var(--lx-gray-04)' ,
'05' : 'var(--lx-gray-05)' ,
'06' : 'var(--lx-gray-06)' ,
'07' : 'var(--lx-gray-07)' ,
'08' : 'var(--lx-gray-08)' ,
'09' : 'var(--lx-gray-09)' ,
'10' : 'var(--lx-gray-10)' ,
'11' : 'var(--lx-gray-11)' ,
'12' : 'var(--lx-gray-12)' ,
'01-alpha' : 'var(--lx-gray-01-alpha)' ,
'02-alpha' : 'var(--lx-gray-02-alpha)' ,
'03-alpha' : 'var(--lx-gray-03-alpha)' ,
'04-alpha' : 'var(--lx-gray-04-alpha)' ,
'05-alpha' : 'var(--lx-gray-05-alpha)' ,
'06-alpha' : 'var(--lx-gray-06-alpha)' ,
'07-alpha' : 'var(--lx-gray-07-alpha)' ,
'08-alpha' : 'var(--lx-gray-08-alpha)' ,
'09-alpha' : 'var(--lx-gray-09-alpha)' ,
'10-alpha' : 'var(--lx-gray-10-alpha)' ,
'11-alpha' : 'var(--lx-gray-11-alpha)' ,
'12-alpha' : 'var(--lx-gray-12-alpha)' ,
}
2022-10-12 02:54:11 +00:00
function exposeColorsToCssVars ( { addBase , theme } ) {
function extractColorVars ( colorObj , colorGroup = '' ) {
2022-10-07 03:54:06 +00:00
return Object . keys ( colorObj ) . reduce ( ( vars , colorKey ) => {
2022-10-10 04:18:53 +00:00
const value = colorObj [ colorKey ]
2022-10-07 03:54:06 +00:00
const newVars =
typeof value === 'string'
? { [ ` --color ${ colorGroup } - ${ colorKey } ` ] : value }
2022-10-10 04:18:53 +00:00
: extractColorVars ( value , ` - ${ colorKey } ` )
2022-10-07 03:54:06 +00:00
2022-10-10 04:18:53 +00:00
return { ... vars , ... newVars }
} , { } )
2022-10-07 03:54:06 +00:00
}
addBase ( {
':root' : extractColorVars ( theme ( 'colors' ) ) ,
2022-10-10 04:18:53 +00:00
} )
2022-10-07 03:54:06 +00:00
}
2023-01-19 18:40:04 +00:00
function buildColor ( color , custom ) {
const base = custom || colors [ color ] || { }
for ( const [ xName , xValue ] of Object . entries ( radix [ color ] || { } ) ) {
const regexResult = xName . match ( /\d+$/ )
if ( ! regexResult ) { continue ; }
const xStep = regexResult [ 0 ]
base [ xStep ] = xValue
}
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"] &' ;
}
2020-04-17 07:12:26 +00:00
module . exports = {
2020-12-13 04:43:36 +00:00
darkMode : 'class' ,
2022-10-10 04:18:53 +00:00
content : [
'./src/**/*.js' ,
'./src/**/*.cljs' ,
2023-01-19 18:40:04 +00:00
'./resources/**/*.html' ,
'./deps/shui/src/**/*.cljs' ,
2022-10-10 04:18:53 +00:00
] ,
safelist : [
2023-01-19 18:40:04 +00:00
'bg-black' , 'bg-white' , 'capitalize-first' ,
2022-10-12 03:14:31 +00:00
{ pattern : /bg-(gray|red|yellow|green|blue|orange|indigo|rose|purple|pink)-(100|200|300|400|500|600|700|800|900)/ } ,
2022-10-12 16:56:54 +00:00
{ pattern : /text-(gray|red|yellow|green|blue|orange|indigo|rose|purple|pink)-(100|200|300|400|500|600|700|800|900)/ } ,
2023-01-19 18:40:04 +00:00
{ pattern : /columns-([1-9]|1[0-2])|(auto|3xs|2xs|xs|sm|md|lg|xl)|([2-7]xl)/ } ,
2022-10-10 04:18:53 +00:00
] ,
plugins : [
require ( '@tailwindcss/forms' ) ,
require ( '@tailwindcss/typography' ) ,
require ( '@tailwindcss/aspect-ratio' ) ,
2022-10-12 03:24:02 +00:00
require ( '@tailwindcss/line-clamp' ) ,
2023-01-19 18:40:04 +00:00
require ( 'tailwind-capitalize-first-letter' ) ,
2022-10-10 04:18:53 +00:00
exposeColorsToCssVars
] ,
2021-02-26 11:57:44 +00:00
theme : {
2021-07-12 13:57:53 +00:00
extend : {
2023-10-16 18:39:04 +00:00
// backgroundColor: {
// ...lx,
// },
// borderColor: {
// ...lx,
// },
// outlineColor: {
// ...lx,
// },
// textColor: {
// ...lx,
// },
2023-01-19 18:40:04 +00:00
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))' ,
} ,
2022-10-07 03:54:06 +00:00
fontSize : {
'2xs' : [ '0.625rem' , '0.875rem' ]
} ,
2021-09-13 11:49:51 +00:00
animation : {
'spin-reverse' : 'spin 2s linear infinite reverse' ,
} ,
2021-07-12 13:57:53 +00:00
spacing : {
'128' : '32rem' ,
2021-07-15 07:29:44 +00:00
'144' : '36rem'
2021-09-13 11:49:51 +00:00
} ,
scale : {
'200' : '2' ,
'250' : '2.5' ,
'300' : '3' ,
'400' : '4' ,
2023-05-05 08:31:34 +00:00
} ,
width : {
'lsm' : '600px' ,
'lmd' : '728px' ,
'llg' : '960px'
2021-07-12 13:57:53 +00:00
}
} ,
2021-02-26 11:57:44 +00:00
colors : {
2023-01-19 18:40:04 +00:00
// Tailwind colors
2023-10-16 18:39:04 +00:00
gray : gray ,
accent : accent ,
2023-09-15 11:30:51 +00:00
red : colors . red ,
green : colors . green ,
blue : colors . blue ,
2021-02-26 11:57:44 +00:00
black : colors . black ,
2023-09-15 11:30:51 +00:00
orange : colors . orange ,
indigo : colors . indigo ,
2023-01-19 18:40:04 +00:00
rose : colors . rose ,
2023-09-15 11:30:51 +00:00
purple : colors . purple ,
pink : colors . pink ,
yellow : colors . yellow ,
current : 'currentColor' ,
2023-01-19 18:40:04 +00:00
transparent : 'transparent' ,
2021-02-26 11:57:44 +00:00
white : colors . white ,
2023-01-19 18:40:04 +00:00
// Radix colors
2023-09-15 11:30:51 +00:00
// amber: buildColor("amber"),
// blue: buildColor("blue"),
// bronze: buildColor("bronze"),
// brown: buildColor("brown"),
// crimson: buildColor("crimson"),
// cyan: buildColor("cyan"),
// gold: buildColor("gold"),
// grass: buildColor("grass"),
// green: buildColor("green"),
// lime: buildColor("lime"),
// mauve: buildColor("mauve"),
// mint: buildColor("mint"),
// olive: buildColor("olive"),
// orange: buildColor("orange"),
// pink: buildColor("pink"),
// plum: buildColor("plum"),
// purple: buildColor("purple"),
// red: buildColor("red"),
// sage: buildColor("sage"),
// sand: buildColor("sand"),
// sky: buildColor("sky"),
// slate: buildColor("slate"),
// teal: buildColor("teal"),
// tomato: buildColor("tomato"),
// violet: buildColor("violet"),
2023-01-19 18:40:04 +00:00
// Custom colors
2023-09-15 11:30:51 +00:00
// gray: buildColor("gray", colors.neutral),
// yellow: buildColor("yellow", colors.amber),
// indigo: buildColor("indigo", {
// 50: '#f0f9ff',
// 100: '#e0f2fe',
// 200: '#bae6fd',
// 300: '#7dd3fc',
// 400: '#38bdf8',
// 500: '#0ea5e9',
// 600: '#0284c7',
// 700: '#005b8a',
// 800: '#075985',
// 900: '#0c4a6e',
// }),
// tomatodark: buildColor("tomatoDark"),
// reddark: buildColor("redDark"),
// crimsondark: buildColor("crimsonDark"),
// pinkdark: buildColor("pinkDark"),
// plumdark: buildColor("plumDark"),
// purpledark: buildColor("purpleDark"),
// violetdark: buildColor("violetDark"),
// skydark: buildColor("skyDark"),
// indigodark: buildColor("indigoDark"),
// bluedark: buildColor("blueDark"),
// cyandark: buildColor("cyanDark"),
// mintdark: buildColor("mintDark"),
// tealdark: buildColor("tealDark"),
// greendark: buildColor("greenDark"),
// limedark: buildColor("limeDark"),
// grassdark: buildColor("grassDark"),
// yellowdark: buildColor("yellowDark"),
// amberdark: buildColor("amberDark"),
// orangedark: buildColor("orangeDark"),
// browndark: buildColor("brownDark"),
// graydark: buildColor("grayDark"),
// mauvedark: buildColor("mauveDark"),
// slatedark: buildColor("slateDark"),
// sagedark: buildColor("sageDark"),
// olivedark: buildColor("oliveDark"),
// sanddark: buildColor("sandDark"),
// golddark: buildColor("goldDark"),
// bronzedark: buildColor("bronzeDark"),
2021-02-26 11:57:44 +00:00
}
}
2020-12-13 04:43:36 +00:00
}