Justin Visser
ae2ca8f149
- complete tokenized theme preset system and admin style guide visibility - refine dashboard layout/scroll behavior and shared async/request UI states - add user nav-visibility settings across API, migration, and frontend stores - harden security headers/CSP handling and related test coverage - enforce CI repository hygiene + frontend contract/theme/build quality gates - update docs/env references and make migration smoke test head-aware
120 lines
4.3 KiB
JavaScript
120 lines
4.3 KiB
JavaScript
const COLOR_SCALE_STEPS = ["50", "100", "200", "300", "400", "500", "600", "700", "800", "900", "950"];
|
|
|
|
function cssColorScale(token) {
|
|
return Object.fromEntries(
|
|
COLOR_SCALE_STEPS.map((step) => [step, `rgb(var(--color-${token}-${step}) / <alpha-value>)`]),
|
|
);
|
|
}
|
|
|
|
function cssToken(token) {
|
|
return `rgb(var(--theme-${token}) / <alpha-value>)`;
|
|
}
|
|
|
|
/** @type {import('tailwindcss').Config} */
|
|
export default {
|
|
darkMode: "class",
|
|
content: ["./index.html", "./src/**/*.{vue,ts,tsx,js,jsx}"],
|
|
theme: {
|
|
extend: {
|
|
fontFamily: {
|
|
sans: ["Manrope", "ui-sans-serif", "system-ui", "sans-serif"],
|
|
display: ["Space Grotesk", "Manrope", "ui-sans-serif", "system-ui", "sans-serif"],
|
|
},
|
|
boxShadow: {
|
|
panel: "0 10px 30px -20px rgba(8, 15, 30, 0.45)",
|
|
},
|
|
colors: {
|
|
brand: cssColorScale("brand"),
|
|
info: cssColorScale("info"),
|
|
success: cssColorScale("success"),
|
|
warning: cssColorScale("warning"),
|
|
danger: cssColorScale("danger"),
|
|
surface: {
|
|
app: cssToken("surface-app"),
|
|
nav: cssToken("surface-nav"),
|
|
"nav-active": cssToken("surface-nav-active"),
|
|
card: cssToken("surface-card"),
|
|
"card-muted": cssToken("surface-card-muted"),
|
|
table: cssToken("surface-table"),
|
|
"table-header": cssToken("surface-table-header"),
|
|
input: cssToken("surface-input"),
|
|
overlay: cssToken("surface-overlay"),
|
|
},
|
|
ink: {
|
|
primary: cssToken("text-primary"),
|
|
secondary: cssToken("text-secondary"),
|
|
muted: cssToken("text-muted"),
|
|
inverse: cssToken("text-inverse"),
|
|
link: cssToken("text-link"),
|
|
},
|
|
stroke: {
|
|
default: cssToken("border-default"),
|
|
strong: cssToken("border-strong"),
|
|
subtle: cssToken("border-subtle"),
|
|
interactive: cssToken("border-interactive"),
|
|
},
|
|
focus: {
|
|
ring: cssToken("focus-ring"),
|
|
offset: cssToken("focus-ring-offset"),
|
|
},
|
|
action: {
|
|
primary: {
|
|
bg: cssToken("action-primary-bg"),
|
|
border: cssToken("action-primary-border"),
|
|
text: cssToken("action-primary-text"),
|
|
"hover-bg": cssToken("action-primary-hover-bg"),
|
|
"hover-border": cssToken("action-primary-hover-border"),
|
|
"hover-text": cssToken("action-primary-hover-text"),
|
|
},
|
|
secondary: {
|
|
bg: cssToken("action-secondary-bg"),
|
|
border: cssToken("action-secondary-border"),
|
|
text: cssToken("action-secondary-text"),
|
|
"hover-bg": cssToken("action-secondary-hover-bg"),
|
|
"hover-border": cssToken("action-secondary-hover-border"),
|
|
"hover-text": cssToken("action-secondary-hover-text"),
|
|
},
|
|
ghost: {
|
|
bg: cssToken("action-ghost-bg"),
|
|
border: cssToken("action-ghost-border"),
|
|
text: cssToken("action-ghost-text"),
|
|
"hover-bg": cssToken("action-ghost-hover-bg"),
|
|
"hover-border": cssToken("action-ghost-hover-border"),
|
|
"hover-text": cssToken("action-ghost-hover-text"),
|
|
},
|
|
danger: {
|
|
bg: cssToken("action-danger-bg"),
|
|
border: cssToken("action-danger-border"),
|
|
text: cssToken("action-danger-text"),
|
|
"hover-bg": cssToken("action-danger-hover-bg"),
|
|
"hover-border": cssToken("action-danger-hover-border"),
|
|
"hover-text": cssToken("action-danger-hover-text"),
|
|
},
|
|
},
|
|
state: {
|
|
info: {
|
|
bg: cssToken("state-info-bg"),
|
|
border: cssToken("state-info-border"),
|
|
text: cssToken("state-info-text"),
|
|
},
|
|
success: {
|
|
bg: cssToken("state-success-bg"),
|
|
border: cssToken("state-success-border"),
|
|
text: cssToken("state-success-text"),
|
|
},
|
|
warning: {
|
|
bg: cssToken("state-warning-bg"),
|
|
border: cssToken("state-warning-border"),
|
|
text: cssToken("state-warning-text"),
|
|
},
|
|
danger: {
|
|
bg: cssToken("state-danger-bg"),
|
|
border: cssToken("state-danger-border"),
|
|
text: cssToken("state-danger-text"),
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
plugins: [],
|
|
};
|