97 lines
2.5 KiB
TypeScript
97 lines
2.5 KiB
TypeScript
// Design-Tokens: einzige Quelle für Farbe, Abstand, Typografie im gesamten Frontend-Verbund.
|
|
// Modul-Frontends importieren diese Tokens, überschreiben sie nicht lokal (SHL-01 Akzeptanzkriterium 3).
|
|
// Kontrastwerte sind gegen WCAG 2.1 AA geprüft (Akzeptanzkriterium 1/4): mindestens 4.5:1 für Fließtext.
|
|
|
|
export type ColorScheme = "light" | "dark";
|
|
|
|
export interface ColorTokens {
|
|
background: string;
|
|
surface: string;
|
|
surfaceRaised: string;
|
|
border: string;
|
|
textPrimary: string;
|
|
textSecondary: string;
|
|
accent: string;
|
|
accentContrast: string;
|
|
danger: string;
|
|
dangerContrast: string;
|
|
success: string;
|
|
warning: string;
|
|
focusRing: string;
|
|
}
|
|
|
|
// Kontrastwerte geprüft: textPrimary auf background/surface >= 7:1, textSecondary >= 4.5:1,
|
|
// accentContrast auf accent >= 4.5:1 (WCAG AA, siehe SHL-01 Prüfung 3).
|
|
export const colorTokens: Record<ColorScheme, ColorTokens> = {
|
|
light: {
|
|
background: "#FFFFFF",
|
|
surface: "#F5F6F8",
|
|
surfaceRaised: "#FFFFFF",
|
|
border: "#D7DBE0",
|
|
textPrimary: "#14181F",
|
|
textSecondary: "#4B5563",
|
|
accent: "#1D4ED8",
|
|
accentContrast: "#FFFFFF",
|
|
danger: "#B91C1C",
|
|
dangerContrast: "#FFFFFF",
|
|
success: "#15803D",
|
|
warning: "#B45309",
|
|
focusRing: "#1D4ED8",
|
|
},
|
|
dark: {
|
|
background: "#0F1115",
|
|
surface: "#181B21",
|
|
surfaceRaised: "#20242C",
|
|
border: "#333944",
|
|
textPrimary: "#F2F4F7",
|
|
textSecondary: "#B4BAC4",
|
|
accent: "#5B8DEF",
|
|
accentContrast: "#0F1115",
|
|
danger: "#F87171",
|
|
dangerContrast: "#0F1115",
|
|
success: "#4ADE80",
|
|
warning: "#FBBF24",
|
|
focusRing: "#5B8DEF",
|
|
},
|
|
};
|
|
|
|
export const spacing = {
|
|
xs: "4px",
|
|
sm: "8px",
|
|
md: "16px",
|
|
lg: "24px",
|
|
xl: "32px",
|
|
xxl: "48px",
|
|
} as const;
|
|
|
|
export const breakpoints = {
|
|
mobile: "0px",
|
|
tablet: "768px",
|
|
desktop: "1200px",
|
|
} as const;
|
|
|
|
export const typography = {
|
|
fontFamily: "'Inter', 'Segoe UI', system-ui, sans-serif",
|
|
fontFamilyMono: "'JetBrains Mono', ui-monospace, monospace",
|
|
sizeSm: "13px",
|
|
sizeMd: "15px",
|
|
sizeLg: "18px",
|
|
sizeXl: "24px",
|
|
lineHeight: 1.5,
|
|
weightRegular: 400,
|
|
weightMedium: 500,
|
|
weightBold: 600,
|
|
} as const;
|
|
|
|
export function cssVariables(scheme: ColorScheme): Record<string, string> {
|
|
const c = colorTokens[scheme];
|
|
const vars: Record<string, string> = {};
|
|
for (const [key, value] of Object.entries(c)) {
|
|
vars[`--shl-color-${key.replace(/([A-Z])/g, "-$1").toLowerCase()}`] = value;
|
|
}
|
|
for (const [key, value] of Object.entries(spacing)) {
|
|
vars[`--shl-spacing-${key}`] = value;
|
|
}
|
|
return vars;
|
|
}
|