timka123
77b26757bf
- Refactored TimerPage component to improve layout and user experience. - Updated theme configuration to utilize design tokens for better maintainability. - Introduced new tokens for colors and typography to align with design principles. - Simplified state management and improved timer functionality. - Enhanced accessibility and responsiveness of UI elements.
68 lines
1.8 KiB
TypeScript
68 lines
1.8 KiB
TypeScript
/**
|
|
* The design tokens, in one place.
|
|
*
|
|
* Kadence is meant to read like a well-set page rather than a dashboard: warm
|
|
* paper, ink-black type, hairline rules instead of boxes and shadows, one warm
|
|
* accent. The desktop app's QML `Theme` singleton carries the same values, so
|
|
* the two clients are the same product.
|
|
*
|
|
* Chart colours are deliberately *not* the brand accent: they come from the
|
|
* validated data palette (see `viz.ts`), because a chart has to stay readable
|
|
* for colour-blind readers in both themes.
|
|
*/
|
|
|
|
export interface Tokens {
|
|
paper: string;
|
|
surface: string;
|
|
surfaceSunken: string;
|
|
ink: string;
|
|
inkMuted: string;
|
|
inkFaint: string;
|
|
rule: string;
|
|
ruleStrong: string;
|
|
ember: string;
|
|
emberSoft: string;
|
|
pine: string;
|
|
amber: string;
|
|
clay: string;
|
|
}
|
|
|
|
export const light: Tokens = {
|
|
paper: "#FAF7F2",
|
|
surface: "#FFFFFF",
|
|
surfaceSunken: "#F3EFE8",
|
|
ink: "#17150F",
|
|
inkMuted: "#6E675B",
|
|
inkFaint: "#9A9388",
|
|
rule: "rgba(23, 21, 15, 0.12)",
|
|
ruleStrong: "rgba(23, 21, 15, 0.26)",
|
|
ember: "#B4441E",
|
|
emberSoft: "rgba(180, 68, 30, 0.10)",
|
|
pine: "#2F6B55",
|
|
amber: "#8A6200",
|
|
clay: "#A33A2E",
|
|
};
|
|
|
|
export const dark: Tokens = {
|
|
paper: "#121110",
|
|
surface: "#1A1917",
|
|
surfaceSunken: "#201E1B",
|
|
ink: "#F4F1EA",
|
|
inkMuted: "#A79F93",
|
|
inkFaint: "#776F64",
|
|
rule: "rgba(244, 241, 234, 0.14)",
|
|
ruleStrong: "rgba(244, 241, 234, 0.30)",
|
|
ember: "#E0724A",
|
|
emberSoft: "rgba(224, 114, 74, 0.14)",
|
|
pine: "#6FB394",
|
|
amber: "#D9A441",
|
|
clay: "#E07A6E",
|
|
};
|
|
|
|
export const DISPLAY_FONT = '"Fraunces", "Iowan Old Style", Georgia, serif';
|
|
export const SANS_FONT = '"Inter", system-ui, -apple-system, "Segoe UI", sans-serif';
|
|
|
|
export function tokensFor(mode: "light" | "dark"): Tokens {
|
|
return mode === "dark" ? dark : light;
|
|
}
|