94 lines
2.6 KiB
JavaScript
94 lines
2.6 KiB
JavaScript
function withOpacity(variableName) {
|
|
return ({ opacityValue }) => {
|
|
if (opacityValue !== undefined) {
|
|
return `rgba(var(${variableName}), ${opacityValue})`;
|
|
}
|
|
return `rgb(var(${variableName}))`;
|
|
};
|
|
}
|
|
|
|
/** @type {import('tailwindcss').Config} */
|
|
module.exports = {
|
|
content: [
|
|
"./src/**/*.{html,ts}"
|
|
],
|
|
safelist: [
|
|
'datatable-row',
|
|
'datatable-header',
|
|
'datatable-footer'
|
|
],
|
|
plugins: [
|
|
require("flowbite/plugin")({
|
|
charts: true,
|
|
})
|
|
],
|
|
theme: {
|
|
extend: {
|
|
spacing: {
|
|
'128': '32rem',
|
|
},
|
|
|
|
// "foregrounds"
|
|
textColor: {
|
|
skin: {
|
|
primary: withOpacity("--color-text-primary"),
|
|
"primary-muted": withOpacity("--color-text-primary-muted"),
|
|
secondary: withOpacity("--color-text-secondary"),
|
|
"secondary-muted": withOpacity("--color-text-secondary-muted"),
|
|
accent: withOpacity("--color-text-accent"),
|
|
"accent-muted": withOpacity("--color-text-accent-muted"),
|
|
},
|
|
},
|
|
fill: {
|
|
skin: {
|
|
primary: withOpacity("--color-text-primary"),
|
|
"primary-muted": withOpacity("--color-text-primary-muted"),
|
|
secondary: withOpacity("--color-text-secondary"),
|
|
"secondary-muted": withOpacity("--color-text-secondary-muted"),
|
|
accent: withOpacity("--color-text-accent"),
|
|
"accent-muted": withOpacity("--color-text-accent-muted"),
|
|
},
|
|
},
|
|
|
|
// "backgrounds"
|
|
backgroundColor: {
|
|
skin: {
|
|
primary: withOpacity("--color-background-primary"),
|
|
"primary-muted": withOpacity("--color-background-primary-muted"),
|
|
"primary-inverted": withOpacity("--color-text-primary"),
|
|
secondary: withOpacity("--color-background-secondary"),
|
|
"secondary-muted": withOpacity("--color-background-secondary-muted"),
|
|
accent: withOpacity("--color-background-accent"),
|
|
"accent-muted": withOpacity("--color-background-accent-muted"),
|
|
},
|
|
},
|
|
|
|
// "shadow"
|
|
boxShadowColor: {
|
|
skin: {
|
|
primary: withOpacity("--color-shadow"),
|
|
},
|
|
},
|
|
|
|
// "border"
|
|
ringColor: {
|
|
skin: {
|
|
primary: withOpacity("--color-border"),
|
|
accent: withOpacity("--color-text-accent-muted"),
|
|
},
|
|
},
|
|
divideColor: {
|
|
skin: {
|
|
primary: withOpacity("--color-border"),
|
|
},
|
|
},
|
|
borderColor: {
|
|
skin: {
|
|
primary: withOpacity("--color-border"),
|
|
accent: withOpacity("--color-text-accent-muted"),
|
|
},
|
|
},
|
|
},
|
|
},
|
|
};
|