2021-02-26 11:57:44 +00:00
const colors = require ( 'tailwindcss/colors' )
2023-11-06 16:08:57 +00:00
const plugin = require ( 'tailwindcss/plugin' )
2023-01-19 18:40:04 +00:00
const radix = require ( '@radix-ui/colors' )
2023-11-06 16:08:57 +00:00
const lx = override => ( {
2023-11-07 13:52:12 +00:00
'accent-01' : 'or(' + override + ', --lx-accent-01, --ls-page-properties-background-color)' ,
'accent-02' : 'or(' + override + ', --lx-accent-02, --ls-page-properties-background-color)' ,
'accent-03' : 'or(' + override + ', --lx-accent-03, --ls-page-properties-background-color)' ,
'accent-04' : 'or(' + override + ', --lx-accent-04, --ls-page-properties-background-color)' ,
'accent-05' : 'or(' + override + ', --lx-accent-05, --color-blue-900)' ,
'accent-06' : 'or(' + override + ', --lx-accent-06, --color-blue-800)' ,
'accent-07' : 'or(' + override + ', --lx-accent-07, --color-blue-700)' ,
'accent-08' : 'or(' + override + ', --lx-accent-08, --color-blue-600)' ,
'accent-09' : 'or(' + override + ', --lx-accent-09, --color-blue-500)' ,
'accent-10' : 'or(' + override + ', --lx-accent-10, --color-blue-400)' ,
'accent-11' : 'or(' + override + ', --lx-accent-11, --color-blue-200)' ,
'accent-12' : 'or(' + override + ', --lx-accent-12, --color-blue-50)' ,
'accent-01-alpha' : 'or(' + override + ', --lx-accent-01-alpha, --ls-page-properties-background-color)' ,
'accent-02-alpha' : 'or(' + override + ', --lx-accent-02-alpha, --ls-page-properties-background-color)' ,
'accent-03-alpha' : 'or(' + override + ', --lx-accent-03-alpha, --ls-page-properties-background-color)' ,
'accent-04-alpha' : 'or(' + override + ', --lx-accent-04-alpha, --ls-page-properties-background-color)' ,
'accent-05-alpha' : 'or(' + override + ', --lx-accent-05-alpha, --color-blue-900)' ,
'accent-06-alpha' : 'or(' + override + ', --lx-accent-06-alpha, --color-blue-800)' ,
'accent-07-alpha' : 'or(' + override + ', --lx-accent-07-alpha, --color-blue-700)' ,
'accent-08-alpha' : 'or(' + override + ', --lx-accent-08-alpha, --color-blue-600)' ,
'accent-09-alpha' : 'or(' + override + ', --lx-accent-09-alpha, --color-blue-500)' ,
'accent-10-alpha' : 'or(' + override + ', --lx-accent-10-alpha, --color-blue-400)' ,
'accent-11-alpha' : 'or(' + override + ', --lx-accent-11-alpha, --color-blue-200)' ,
'accent-12-alpha' : 'or(' + override + ', --lx-accent-12-alpha, --color-blue-50)' ,
'gray-01' : 'or(' + override + ', --lx-gray-01, --ls-primary-background-color)' ,
'gray-02' : 'or(' + override + ', --lx-gray-02, --ls-secondary-background-color)' ,
'gray-03' : 'or(' + override + ', --lx-gray-03, --ls-tertiary-background-color)' ,
'gray-04' : 'or(' + override + ', --lx-gray-04, --ls-quaternary-background-color)' ,
'gray-05' : 'or(' + override + ', --lx-gray-05, --color-level-4)' ,
'gray-06' : 'or(' + override + ', --lx-gray-06, --ls-block-bullet-border-color)' ,
'gray-07' : 'or(' + override + ', --lx-gray-07, --ls-border-color)' ,
'gray-08' : 'or(' + override + ', --lx-gray-08, --ls-secondary-border-color)' ,
'gray-09' : 'or(' + override + ', --lx-gray-09, --color-level-5)' ,
2023-11-07 15:39:04 +00:00
'gray-10' : 'or(' + override + ', --lx-gray-10, --ls-title-text-color)' ,
2023-11-07 13:52:12 +00:00
'gray-11' : 'or(' + override + ', --lx-gray-11, --ls-primary-text-color)' ,
'gray-12' : 'or(' + override + ', --lx-gray-12, --ls-secondary-text-color)' ,
'gray-01-alpha' : 'or(' + override + ', --lx-gray-01-alpha, --ls-primary-background-color)' ,
'gray-02-alpha' : 'or(' + override + ', --lx-gray-02-alpha, --ls-secondary-background-color)' ,
'gray-03-alpha' : 'or(' + override + ', --lx-gray-03-alpha, --ls-tertiary-background-color)' ,
'gray-04-alpha' : 'or(' + override + ', --lx-gray-04-alpha, --ls-quaternary-background-color)' ,
'gray-05-alpha' : 'or(' + override + ', --lx-gray-05-alpha, --color-level-4)' ,
'gray-06-alpha' : 'or(' + override + ', --lx-gray-06-alpha, --ls-block-bullet-color)' ,
'gray-07-alpha' : 'or(' + override + ', --lx-gray-07-alpha, --ls-border-color)' ,
'gray-08-alpha' : 'or(' + override + ', --lx-gray-08-alpha, --ls-secondary-border-color)' ,
'gray-09-alpha' : 'or(' + override + ', --lx-gray-09-alpha, --color-level-5)' ,
'gray-10-alpha' : 'or(' + override + ', --lx-gray-10-alpha, --color-level-6)' ,
'gray-11-alpha' : 'or(' + override + ', --lx-gray-11-alpha, --ls-primary-text-color)' ,
'gray-12-alpha' : 'or(' + override + ', --lx-gray-12-alpha, --ls-secondary-text-color)' ,
2023-11-06 16:08:57 +00:00
} )
2023-09-15 11:30:51 +00:00
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 = {
2023-11-14 12:40:36 +00:00
... colors . gray ,
2023-10-16 18:39:04 +00:00
'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)' ,
2023-01-19 18:40:04 +00:00
}
2021-02-26 11:57:44 +00:00
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-11-06 16:08:57 +00:00
const withOverride = plugin ( function ( { matchUtilities } ) {
matchUtilities ( {
'or' : ( value , b ) => {
2023-11-14 12:40:36 +00:00
// check if the value starts with "bg-"
2023-11-06 16:08:57 +00:00
if ( value . startsWith ( 'bg-' ) ) {
return { [ ` --lx-bg-override ` ] : ` var(--lx- ${ value } ) ` }
2023-11-14 12:40:36 +00:00
}
2023-11-06 16:08:57 +00:00
// check if the value starts with "text-"
if ( value . startsWith ( 'text-' ) ) {
return { [ ` --lx-text-override ` ] : ` var(--lx- ${ value } ) ` }
2023-11-14 12:40:36 +00:00
}
2023-11-06 16:08:57 +00:00
// check if the value starts with "border-"
if ( value . startsWith ( 'border-' ) ) {
return { [ ` --lx-border-override ` ] : ` var(--lx- ${ value } ) ` }
}
}
2023-11-14 12:40:36 +00:00
} , {
values : { }
2023-11-06 16:08:57 +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 ] || { } ) ) {
2023-11-14 12:40:36 +00:00
const regexResult = xName . match ( /\d+$/ )
if ( ! regexResult ) { continue ; }
2023-01-19 18:40:04 +00:00
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' ) ,
2023-01-19 18:40:04 +00:00
require ( 'tailwind-capitalize-first-letter' ) ,
2023-11-06 16:08:57 +00:00
exposeColorsToCssVars ,
withOverride ,
2022-10-10 04:18:53 +00:00
] ,
2021-02-26 11:57:44 +00:00
theme : {
2021-07-12 13:57:53 +00:00
extend : {
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'
2023-11-06 16:08:57 +00:00
} ,
backgroundColor : {
... lx ( '--lx-bg-override' ) ,
} ,
textColor : {
... lx ( '--lx-text-override' ) ,
} ,
borderColor : {
... lx ( '--lx-border-override' ) ,
} ,
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 ,
}
}
2020-12-13 04:43:36 +00:00
}