2023-01-19 18:40:04 +00:00
const plugin = require ( 'tailwindcss/plugin' )
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' )
const gradientColors = {
tomato : [ "amber" , "orange" , "tomato" , "red" , "crimson" ] ,
red : [ "orange" , "tomato" , "red" , "crimson" , "pink" ] ,
crimson : [ "tomato" , "red" , "crimson" , "pink" , "plum" ] ,
pink : [ "red" , "crimson" , "pink" , "plum" , "purple" ] ,
plum : [ "crimson" , "pink" , "plum" , "purple" , "violet" ] ,
purple : [ "pink" , "plum" , "purple" , "violet" , "indigo" ] ,
violet : [ "plum" , "purple" , "violet" , "indigo" , "blue" ] ,
indigo : [ "purple" , "violet" , "indigo" , "blue" , "cyan" ] ,
blue : [ "violet" , "indigo" , "blue" , "cyan" , "teal" ] ,
// sky: ["indigo", "blue", "sky", "cyan", "teal"],
cyan : [ "indigo" , "blue" , "cyan" , "teal" , "green" ] ,
teal : [ "blue" , "cyan" , "teal" , "green" , "grass" ] ,
// mint: ["cyan", "teal", "mint", "green", "grass"],
green : [ "cyan" , "teal" , "green" , "grass" , "amber" ] ,
grass : [ "teal" , "green" , "grass" , "amber" , "orange" ] ,
// lime: ["green", "grass", "lime", "yellow", "amber"],
// yellow: ["grass", "lime", "yellow", "amber", "orange"],
amber : [ "green" , "grass" , "amber" , "orange" , "tomato" ] ,
orange : [ "grass" , "amber" , "orange" , "tomato" , "red" ] ,
// brown: ["green", "grass", "brown", "tomato", "red"],
}
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-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
}
// this will allow us to use gradient color functions in the ui:
// grad-bg-tomato-3 OR grad-bg-tomato-3-alpha
// it will also loop through all 5 color stops, unless the stops are specified
// grad-bg-stops-3
// this will have a default repeating gradient at a step that can be configured with
// grad-bg-cycle-32
const addGradientColors = plugin ( ( { addBase , addComponents , addUtilities , config , _ _ _theme } ) => {
const dark = getDarkSelector ( config )
addUtilities ( {
[ '.grad-bg-stops-3' ] : {
'--grad-bg-stops' : "var(--grad-bg-stop-b), var(--grad-bg-stop-c), var(--grad-bg-stop-d)" ,
} ,
[ '.grad-bg-stops-5' ] : {
'--grad-bg-stops' : "var(--grad-bg-stop-a), var(--grad-bg-stop-b), var(--grad-bg-stop-c), var(--grad-bg-stop-d), var(--grad-bg-stop-e)" ,
} ,
[ '.grad-bg-cycle-12' ] : {
'background-image' : 'repeatint-linear-gradient(to right, var(--grad-bg-stops))' ,
} ,
} )
Object . values ( gradientColors ) . forEach ( ( stops , _ _ _index ) => {
const baseColor = stops [ 2 ]
const color = ( scale , stopIndex = 2 , suffix = "" ) => ` --color- ${ stops [ stopIndex ] } ${ suffix } - ${ scale } `
addComponents ( {
// tailwind componnent for .grad-bg-COLOR-9
[ ` .grad-bg- ${ baseColor } -9 ` ] : {
"--grad-bg-stop-a" : ` var( ${ color ( 9 , 0 ) } ) ` ,
"--grad-bg-stop-b" : ` var( ${ color ( 9 , 1 ) } ) ` ,
"--grad-bg-stop-c" : ` var( ${ color ( 9 , 2 ) } ) ` ,
"--grad-bg-stop-d" : ` var( ${ color ( 9 , 3 ) } ) ` ,
"--grad-bg-stop-e" : ` var( ${ color ( 9 , 4 ) } ) ` ,
"--grad-bg-stops-default" : ` var(--grad-bg-stop-b), var(--grad-bg-stop-c), var(--grad-bg-stop-d) ` ,
"background-image" : ` linear-gradient(var(--grad-bg-direction, to right), var(--grad-bg-stops, var(--grad-bg-stops-default))) ` ,
[ dark ] : {
"--grad-bg-stop-a" : ` var( ${ color ( 9 , 0 , "dark" ) } ) ` ,
"--grad-bg-stop-b" : ` var( ${ color ( 9 , 1 , "dark" ) } ) ` ,
"--grad-bg-stop-c" : ` var( ${ color ( 9 , 2 , "dark" ) } ) ` ,
"--grad-bg-stop-d" : ` var( ${ color ( 9 , 3 , "dark" ) } ) ` ,
"--grad-bg-stop-e" : ` var( ${ color ( 9 , 4 , "dark" ) } ) ` ,
}
} ,
// tailwind component for .grad-bg-COLOR-9-alpha
[ ` .grad-bg- ${ baseColor } -9-alpha ` ] : {
"--grad-bg-stop-a" : ` var( ${ color ( 9 , 0 ) } ) ` ,
"--grad-bg-stop-b" : ` var( ${ color ( 9 , 1 ) } ) ` ,
"--grad-bg-stop-c" : ` var( ${ color ( 9 , 2 ) } ) ` ,
"--grad-bg-stop-d" : ` var( ${ color ( 9 , 3 ) } ) ` ,
"--grad-bg-stop-e" : ` var( ${ color ( 9 , 4 ) } ) ` ,
"--grad-bg-stops-default" : ` var(--grad-bg-stop-b), var(--grad-bg-stop-c), var(--grad-bg-stop-d) ` ,
"background-image" : ` linear-gradient(var(--grad-bg-direction, to right), var(--grad-bg-stops, var(--grad-bg-stops-default))) ` ,
[ dark ] : {
"--grad-bg-stop-a" : ` var( ${ color ( 9 , 0 , "dark" ) } ) ` ,
"--grad-bg-stop-b" : ` var( ${ color ( 9 , 1 , "dark" ) } ) ` ,
"--grad-bg-stop-c" : ` var( ${ color ( 9 , 2 , "dark" ) } ) ` ,
"--grad-bg-stop-d" : ` var( ${ color ( 9 , 3 , "dark" ) } ) ` ,
"--grad-bg-stop-e" : ` var( ${ color ( 9 , 4 , "dark" ) } ) ` ,
}
} ,
} )
} )
} )
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)/ } ,
{ pattern : /bg-(mauve|slate|sage|olive|sand|tomato|red|crimson|pink|plum|purple|violet|indigo|blue|sky|cyan|teal|mint|green|grass|lime|yellow|amber|orange|brown)(dark)?-(1|2|3|4|5|6|7|8|9|10|11|12)/ } ,
{ pattern : /shadow-(mauve|slate|sage|olive|sand|tomato|red|crimson|pink|plum|purple|violet|indigo|blue|sky|cyan|teal|mint|green|grass|lime|yellow|amber|orange|brown)(dark)?-(1|2|3|4|5|6|7|8|9|10|11|12)/ } ,
{ pattern : /text-(mauve|slate|sage|olive|sand|tomato|red|crimson|pink|plum|purple|violet|indigo|blue|sky|cyan|teal|mint|green|grass|lime|yellow|amber|orange|brown)(dark)?-(1|2|3|4|5|6|7|8|9|10|11|12)/ } ,
{ pattern : /ring-(mauve|slate|sage|olive|sand|tomato|red|crimson|pink|plum|purple|violet|indigo|blue|sky|cyan|teal|mint|green|grass|lime|yellow|amber|orange|brown)(dark)?-(1|2|3|4|5|6|7|8|9|10|11|12)/ } ,
{ pattern : /from-(mauve|slate|sage|olive|sand|tomato|red|crimson|pink|plum|purple|violet|indigo|blue|sky|cyan|teal|mint|green|grass|lime|yellow|amber|orange|brown)(dark)?-(1|2|3|4|5|6|7|8|9|10|11|12)/ } ,
{ pattern : /via-(mauve|slate|sage|olive|sand|tomato|red|crimson|pink|plum|purple|violet|indigo|blue|sky|cyan|teal|mint|green|grass|lime|yellow|amber|orange|brown)(dark)?-(1|2|3|4|5|6|7|8|9|10|11|12)/ } ,
{ pattern : /to-(mauve|slate|sage|olive|sand|tomato|red|crimson|pink|plum|purple|violet|indigo|blue|sky|cyan|teal|mint|green|grass|lime|yellow|amber|orange|brown)(dark)?-(1|2|3|4|5|6|7|8|9|10|11|12)/ } ,
{ pattern : /border-(mauve|slate|sage|olive|sand|tomato|red|crimson|pink|plum|purple|violet|indigo|blue|sky|cyan|teal|mint|green|grass|lime|yellow|amber|orange|brown)(dark)?-(4|5|6|7|8)/ } ,
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' ) ,
addGradientColors ,
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-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
2021-02-26 11:57:44 +00:00
black : colors . black ,
2023-01-19 18:40:04 +00:00
current : 'currentColor' ,
rose : colors . rose ,
transparent : 'transparent' ,
2021-02-26 11:57:44 +00:00
white : colors . white ,
2023-01-19 18:40:04 +00:00
// Radix colors
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" ) ,
// Custom colors
gray : buildColor ( "gray" , colors . neutral ) ,
yellow : buildColor ( "yellow" , colors . amber ) ,
indigo : buildColor ( "indigo" , {
2021-02-26 11:57:44 +00:00
50 : '#f0f9ff' ,
100 : '#e0f2fe' ,
200 : '#bae6fd' ,
300 : '#7dd3fc' ,
400 : '#38bdf8' ,
500 : '#0ea5e9' ,
600 : '#0284c7' ,
700 : '#005b8a' ,
800 : '#075985' ,
900 : '#0c4a6e' ,
2023-01-19 18:40:04 +00:00
} ) ,
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
}