203 lines
11 KiB
CSS
203 lines
11 KiB
CSS
@import "./primitives.css";
|
|
|
|
/* Derived aliases and geometry. Values are generated from themes/default.json. */
|
|
:root, [data-hm-theme] {
|
|
--hm-color-primary: var(--hm-sem-palette-green-default);
|
|
--hm-color-primary-hover: color-mix(in srgb, var(--hm-sem-action-primary) 85%, var(--hm-sem-palette-black));
|
|
--hm-color-primary-active: color-mix(in srgb, var(--hm-sem-action-primary) 70%, var(--hm-sem-palette-black));
|
|
--hm-color-surface-default: var(--hm-sem-palette-white);
|
|
--hm-color-surface-content: var(--hm-sem-palette-beige-light);
|
|
--hm-color-surface-subtle: var(--hm-sem-palette-warm-neutral-muted);
|
|
--hm-color-text-primary: var(--hm-sem-palette-green-dark-1);
|
|
--hm-color-text-secondary: var(--hm-sem-palette-warm-neutral-dark);
|
|
--hm-color-text-inverse: var(--hm-sem-palette-white);
|
|
--hm-color-text-placeholder: var(--hm-sem-palette-neutral-gray-500);
|
|
--hm-color-border-default: var(--hm-sem-palette-warm-neutral-mid);
|
|
--hm-color-border-control: var(--hm-sem-palette-warm-neutral-pale);
|
|
/* Common Focus color. Trial value: Light 2 (#266651), pending user confirmation. Was --hm-color-primary. */
|
|
--hm-color-border-focus: var(--hm-sem-palette-green-light-2);
|
|
--hm-color-action-cancel: var(--hm-sem-palette-warm-neutral-dark);
|
|
--hm-color-action-destructive: var(--hm-sem-palette-red-danger);
|
|
--hm-color-action-destructive-hover: color-mix(in srgb, var(--hm-sem-action-destructive) 8%, var(--hm-sem-bg-surface));
|
|
--hm-color-action-overlay-hover: color-mix(in srgb, var(--hm-sem-palette-black) 20%, transparent);
|
|
--hm-color-action-overlay-active: color-mix(in srgb, var(--hm-sem-palette-black) 30%, transparent);
|
|
--hm-color-action-shadow-light: color-mix(in srgb, var(--hm-sem-palette-white) 10%, transparent);
|
|
--hm-color-action-shadow-dark: color-mix(in srgb, var(--hm-sem-palette-black) 25%, transparent);
|
|
|
|
--hm-radius-control-md: 4px;
|
|
--hm-control-height-md: 34px;
|
|
--hm-font-family-base: "Noto Sans KR", "Malgun Gothic", sans-serif;
|
|
--hm-font-size-button-md: 13px;
|
|
--hm-font-weight-medium: 500;
|
|
--hm-font-weight-bold: 700;
|
|
|
|
/* Existing semantic names remain the shadcn and preview adapter. */
|
|
--hm-sem-bg-content: {{color.bg.content|var(--hm-color-surface-content)}};
|
|
--hm-sem-bg-surface: {{color.bg.surface|var(--hm-color-surface-default)}};
|
|
--hm-sem-fg-primary: {{color.fg.primary|var(--hm-color-text-primary)}};
|
|
--hm-sem-fg-secondary: {{color.fg.secondary|var(--hm-color-text-secondary)}};
|
|
--hm-sem-fg-placeholder: {{color.fg.placeholder|var(--hm-color-text-placeholder)}};
|
|
--hm-sem-action-primary: {{color.action.primary|var(--hm-color-primary)}};
|
|
--hm-sem-action-cancel: {{color.action.cancel|var(--hm-color-action-cancel)}};
|
|
--hm-sem-action-destructive: {{color.action.destructive|var(--hm-color-action-destructive)}};
|
|
--hm-sem-stroke-default: {{color.stroke.default|var(--hm-color-border-default)}};
|
|
--hm-sem-stroke-input-default: {{color.stroke.input.default|var(--hm-color-border-control)}};
|
|
--hm-sem-stroke-input-focus: {{color.stroke.input.focus|var(--hm-color-border-focus)}};
|
|
--hm-sem-on-action-primary: {{color.fg.inverse|var(--hm-color-text-inverse)}};
|
|
/* Active state fill: checked / selected / on (Checkbox, Radio, Switch, Slider, Progress, Calendar).
|
|
Sibling of the Focus chain (--hm-color-border-focus): same Light 2 today, but neither references the other. */
|
|
--hm-sem-state-active: {{color.state.active|var(--hm-sem-palette-green-light-2)}};
|
|
--hm-sem-on-state-active: {{color.on.state.active|var(--hm-color-text-inverse)}};
|
|
/* Public gradient stop groups; geometry remains internal. */
|
|
--hm-sem-brand-bg-stop-0: {{color.bg.brand.stop.0|var(--hm-sem-palette-green-dark-1)}};
|
|
--hm-sem-brand-bg-stop-12: {{color.bg.brand.stop.12|var(--hm-sem-palette-green-dark-2)}};
|
|
--hm-sem-brand-bg-stop-42: {{color.bg.brand.stop.42|var(--hm-sem-palette-green-default)}};
|
|
--hm-sem-brand-bg-stop-78: {{color.bg.brand.stop.78|var(--hm-sem-palette-green-light-2)}};
|
|
--hm-sem-brand-bg-stop-100: {{color.bg.brand.stop.100|var(--hm-sem-palette-green-light-1)}};
|
|
--hm-sem-bg-brand: linear-gradient(to bottom,
|
|
var(--hm-sem-brand-bg-stop-0) 0%, var(--hm-sem-brand-bg-stop-12) 12%,
|
|
var(--hm-sem-brand-bg-stop-42) 42%, var(--hm-sem-brand-bg-stop-78) 78%,
|
|
var(--hm-sem-brand-bg-stop-100) 100%);
|
|
|
|
--hm-sem-action-surface-stop-0: {{surface.action.primary.stop.0|var(--hm-sem-palette-green-tone-1)}};
|
|
--hm-sem-action-surface-stop-30: {{surface.action.primary.stop.30|var(--hm-sem-palette-green-tone-2)}};
|
|
--hm-sem-action-surface-stop-65: {{surface.action.primary.stop.65|var(--hm-sem-palette-green-tone-3)}};
|
|
--hm-sem-action-surface-stop-100: {{surface.action.primary.stop.100|var(--hm-sem-palette-green-tone-4)}};
|
|
--hm-sem-surface-action-primary: linear-gradient(180deg,
|
|
var(--hm-sem-action-surface-stop-0) 0%, var(--hm-sem-action-surface-stop-30) 30%,
|
|
var(--hm-sem-action-surface-stop-65) 65%, var(--hm-sem-action-surface-stop-100) 100%);
|
|
--hm-sem-action-border-stop-0: {{surface.action.primary.border.stop.0|var(--hm-sem-palette-green-dark-1)}};
|
|
--hm-sem-action-border-stop-50: {{surface.action.primary.border.stop.50|var(--hm-sem-palette-green-light-4)}};
|
|
--hm-sem-action-border-stop-100: {{surface.action.primary.border.stop.100|var(--hm-sem-palette-green-tone-4)}};
|
|
--hm-sem-border-action-primary: linear-gradient(180deg,
|
|
var(--hm-sem-action-border-stop-0) 0%, var(--hm-sem-action-border-stop-50) 50%,
|
|
var(--hm-sem-action-border-stop-100) 100%);
|
|
|
|
--hm-radius-button: var(--hm-radius-control-md);
|
|
--hm-radius-input: var(--hm-radius-control-md);
|
|
--hm-radius-select: var(--hm-radius-control-md);
|
|
--hm-radius-container: var(--hm-radius-control-md);
|
|
|
|
/* Floating surface: anchored panels (Dropdown Menu, Context Menu, Popover, Hover Card, Menubar content, Navigation Menu panel).
|
|
Not Tooltip (inverse face), Select, Card or the modal surfaces. Component tokens keep their own names and point here. */
|
|
--hm-sem-floating-background: var(--hm-sem-bg-surface);
|
|
--hm-sem-floating-border-width: 1px;
|
|
--hm-sem-floating-border-color: var(--hm-sem-stroke-input-default);
|
|
--hm-sem-floating-radius: var(--hm-radius-container);
|
|
--hm-sem-floating-shadow: 0 0 12px color-mix(in srgb, var(--hm-sem-palette-black) 20%, transparent);
|
|
|
|
--hm-sem-bg-subtle: {{color.bg.subtle|var(--hm-color-surface-subtle)}};
|
|
|
|
--hm-sem-accent: {{color.accent|var(--hm-sem-palette-green-tint)}};
|
|
|
|
--hm-sem-on-accent: {{color.on.accent}};
|
|
|
|
--hm-sem-palette-green-light-4: {{color.palette.green-light-4|var(--hm-green-light-4)}};
|
|
|
|
--hm-sem-palette-green-light-3: {{color.palette.green-light-3|var(--hm-green-light-3)}};
|
|
|
|
--hm-sem-palette-green-light-2: {{color.palette.green-light-2|var(--hm-green-light-2)}};
|
|
|
|
--hm-sem-palette-green-light-1: {{color.palette.green-light-1|var(--hm-green-light-1)}};
|
|
|
|
--hm-sem-palette-green-default: {{color.palette.green-default|var(--hm-green-default)}};
|
|
|
|
--hm-sem-palette-green-dark-1: {{color.palette.green-dark-1|var(--hm-green-dark-1)}};
|
|
|
|
--hm-sem-palette-green-dark-2: {{color.palette.green-dark-2|var(--hm-green-dark-2)}};
|
|
|
|
--hm-sem-palette-brown-light-2: {{color.palette.brown-light-2|var(--hm-brown-light-2)}};
|
|
|
|
--hm-sem-palette-brown-light-1: {{color.palette.brown-light-1|var(--hm-brown-light-1)}};
|
|
|
|
--hm-sem-palette-brown-default: {{color.palette.brown-default|var(--hm-brown-default)}};
|
|
|
|
--hm-sem-palette-brown-dark-1: {{color.palette.brown-dark-1|var(--hm-brown-dark-1)}};
|
|
|
|
--hm-sem-palette-brown-light-4: {{color.palette.brown-light-4|var(--hm-brown-light-4)}};
|
|
|
|
--hm-sem-palette-orange-light-4: {{color.palette.orange-light-4|var(--hm-orange-light-4)}};
|
|
|
|
--hm-sem-palette-orange-default: {{color.palette.orange-default|var(--hm-orange-default)}};
|
|
|
|
--hm-sem-palette-warm-neutral-light: {{color.palette.warm-neutral-light|var(--hm-warm-neutral-light)}};
|
|
|
|
--hm-sem-palette-warm-neutral-mid: {{color.palette.warm-neutral-mid|var(--hm-warm-neutral-mid)}};
|
|
|
|
--hm-sem-palette-warm-neutral-dark: {{color.palette.warm-neutral-dark|var(--hm-warm-neutral-dark)}};
|
|
|
|
--hm-sem-palette-beige-light: {{color.palette.beige-light|var(--hm-beige-light)}};
|
|
|
|
--hm-sem-palette-red-danger: {{color.palette.red-danger|var(--hm-red-danger)}};
|
|
|
|
--hm-sem-palette-white: {{color.palette.white|var(--hm-white)}};
|
|
|
|
--hm-sem-palette-black: {{color.palette.black|var(--hm-black)}};
|
|
|
|
--hm-sem-palette-neutral-gray-500: {{color.palette.neutral-gray-500|var(--hm-neutral-gray-500)}};
|
|
|
|
--hm-sem-palette-green-tone-1: {{color.palette.green-tone-1|var(--hm-green-tone-1)}};
|
|
|
|
--hm-sem-palette-green-tone-2: {{color.palette.green-tone-2|var(--hm-green-tone-2)}};
|
|
|
|
--hm-sem-palette-green-tone-3: {{color.palette.green-tone-3|var(--hm-green-tone-3)}};
|
|
|
|
--hm-sem-palette-green-tone-4: {{color.palette.green-tone-4|var(--hm-green-tone-4)}};
|
|
|
|
--hm-sem-palette-warm-neutral-pale: {{color.palette.warm-neutral-pale|var(--hm-warm-neutral-pale)}};
|
|
|
|
--hm-sem-palette-warm-neutral-secondary: {{color.palette.warm-neutral-secondary|var(--hm-warm-neutral-secondary)}};
|
|
|
|
--hm-sem-palette-warm-neutral-muted: {{color.palette.warm-neutral-muted|var(--hm-warm-neutral-muted)}};
|
|
|
|
--hm-sem-palette-green-tint: {{color.palette.green-tint|var(--hm-green-tint)}};
|
|
|
|
--hm-sem-palette-yellow-accent: {{color.palette.yellow-accent|var(--hm-yellow-accent)}};
|
|
|
|
--hm-sem-palette-brown-deep: {{color.palette.brown-deep}};
|
|
|
|
--hm-sem-palette-brown-highlight: {{color.palette.brown-highlight}};
|
|
|
|
--hm-sem-palette-orange-light: {{color.palette.orange-light}};
|
|
|
|
--hm-sem-palette-orange-mid: {{color.palette.orange-mid}};
|
|
|
|
--hm-sem-palette-orange-dark: {{color.palette.orange-dark}};
|
|
|
|
--hm-sem-palette-orange-deep: {{color.palette.orange-deep}};
|
|
|
|
--hm-sem-palette-orange-border: {{color.palette.orange-border}};
|
|
|
|
--hm-sem-palette-orange-border-deep: {{color.palette.orange-border-deep}};
|
|
|
|
--hm-sem-palette-gray: {{color.palette.gray}};
|
|
|
|
--hm-sem-palette-gray-dark: {{color.palette.gray-dark}};
|
|
|
|
--hm-sem-palette-indicator: {{color.palette.indicator}};
|
|
|
|
--hm-sem-overlay-background: color-mix(in srgb, var(--hm-sem-palette-black) 10%, transparent);
|
|
--hm-sem-surface-highlight: color-mix(in srgb, var(--hm-sem-accent) 45%, transparent);
|
|
|
|
/* Adapter for shadcn/Tailwind. The public contract.ts allowlist limits runtime overrides. */
|
|
--background: var(--hm-sem-bg-content);
|
|
--foreground: var(--hm-sem-fg-primary);
|
|
--card: var(--hm-sem-bg-surface);
|
|
--card-foreground: var(--hm-sem-fg-primary);
|
|
--popover: var(--hm-sem-bg-surface);
|
|
--popover-foreground: var(--hm-sem-fg-primary);
|
|
--primary: var(--hm-sem-action-primary);
|
|
--primary-foreground: var(--hm-sem-on-action-primary);
|
|
--secondary: var(--hm-sem-palette-warm-neutral-secondary);
|
|
--secondary-foreground: var(--hm-sem-palette-brown-default);
|
|
--muted: var(--hm-sem-bg-subtle);
|
|
--muted-foreground: var(--hm-sem-fg-secondary);
|
|
--accent: var(--hm-sem-accent);
|
|
--accent-foreground: var(--hm-sem-on-accent);
|
|
--destructive: var(--hm-sem-action-destructive);
|
|
--border: var(--hm-sem-stroke-default);
|
|
--input: var(--hm-sem-stroke-input-default);
|
|
--ring: var(--hm-sem-stroke-input-focus);
|
|
--radius: var(--hm-radius-container);
|
|
}
|