102 lines
2.1 KiB
TypeScript
102 lines
2.1 KiB
TypeScript
|
// Design tokens for <PROJECT NAME>.
|
||
|
|
// Generated by Composer's ui-system phase.
|
||
|
|
// Single source of truth for colors, type, spacing, radii, shadows, motion.
|
||
|
|
// Import this in mocks and (eventually) in real UI code; do not hardcode.
|
||
|
|
|
||
|
|
export const color = {
|
||
|
|
brand: {
|
||
|
|
primary: "<TBD: #hex>",
|
||
|
|
// secondary: "<TBD>",
|
||
|
|
},
|
||
|
|
neutral: {
|
||
|
|
50: "<TBD>",
|
||
|
|
100: "<TBD>",
|
||
|
|
200: "<TBD>",
|
||
|
|
300: "<TBD>",
|
||
|
|
400: "<TBD>",
|
||
|
|
500: "<TBD>",
|
||
|
|
600: "<TBD>",
|
||
|
|
700: "<TBD>",
|
||
|
|
800: "<TBD>",
|
||
|
|
900: "<TBD>",
|
||
|
|
950: "<TBD>",
|
||
|
|
},
|
||
|
|
semantic: {
|
||
|
|
success: "<TBD>",
|
||
|
|
warning: "<TBD>",
|
||
|
|
error: "<TBD>",
|
||
|
|
info: "<TBD>",
|
||
|
|
},
|
||
|
|
// dark mode tokens (if applicable):
|
||
|
|
// dark: { ... }
|
||
|
|
} as const;
|
||
|
|
|
||
|
|
export const fontFamily = {
|
||
|
|
display: "<TBD: name>, system-ui, sans-serif",
|
||
|
|
body: "<TBD: name>, system-ui, sans-serif",
|
||
|
|
mono: "ui-monospace, SFMono-Regular, monospace",
|
||
|
|
} as const;
|
||
|
|
|
||
|
|
export const fontSize = {
|
||
|
|
xs: "12px",
|
||
|
|
sm: "14px",
|
||
|
|
base:"16px",
|
||
|
|
lg: "18px",
|
||
|
|
xl: "20px",
|
||
|
|
"2xl":"24px",
|
||
|
|
"3xl":"30px",
|
||
|
|
"4xl":"36px",
|
||
|
|
} as const;
|
||
|
|
|
||
|
|
export const lineHeight = {
|
||
|
|
tight: 1.2,
|
||
|
|
normal: 1.5,
|
||
|
|
relaxed: 1.7,
|
||
|
|
} as const;
|
||
|
|
|
||
|
|
// Spacing scale in base units. Multiply by base (4 or 8) for px.
|
||
|
|
export const spacingBase = 4; // <TBD: 4 or 8>
|
||
|
|
export const spacing = {
|
||
|
|
0: 0,
|
||
|
|
0.5: 0.5 * spacingBase,
|
||
|
|
1: 1 * spacingBase,
|
||
|
|
1.5: 1.5 * spacingBase,
|
||
|
|
2: 2 * spacingBase,
|
||
|
|
3: 3 * spacingBase,
|
||
|
|
4: 4 * spacingBase,
|
||
|
|
6: 6 * spacingBase,
|
||
|
|
8: 8 * spacingBase,
|
||
|
|
12: 12 * spacingBase,
|
||
|
|
16: 16 * spacingBase,
|
||
|
|
24: 24 * spacingBase,
|
||
|
|
} as const;
|
||
|
|
|
||
|
|
export const radius = {
|
||
|
|
sm: "<TBD: px>",
|
||
|
|
md: "<TBD: px>",
|
||
|
|
lg: "<TBD: px>",
|
||
|
|
pill: "9999px",
|
||
|
|
full: "9999px",
|
||
|
|
} as const;
|
||
|
|
|
||
|
|
export const shadow = {
|
||
|
|
xs: "<TBD>",
|
||
|
|
sm: "<TBD>",
|
||
|
|
md: "<TBD>",
|
||
|
|
lg: "<TBD>",
|
||
|
|
xl: "<TBD>",
|
||
|
|
} as const;
|
||
|
|
|
||
|
|
export const motion = {
|
||
|
|
duration: {
|
||
|
|
fast: 150,
|
||
|
|
default: 250,
|
||
|
|
slow: 400,
|
||
|
|
},
|
||
|
|
easing: {
|
||
|
|
standard: "cubic-bezier(0.2, 0, 0, 1)",
|
||
|
|
accel: "cubic-bezier(0.4, 0, 1, 1)",
|
||
|
|
decel: "cubic-bezier(0, 0, 0.2, 1)",
|
||
|
|
},
|
||
|
|
} as const;
|