240 lines
11 KiB
CSS
240 lines
11 KiB
CSS
/* Generated from themes/default.json + scripts/theme-templates/default.css. Do not edit. */
|
|
@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: var(--hm-color-surface-content);
|
|
--hm-sem-bg-surface: var(--hm-color-surface-default);
|
|
--hm-sem-fg-primary: var(--hm-color-text-primary);
|
|
--hm-sem-fg-secondary: var(--hm-color-text-secondary);
|
|
--hm-sem-fg-placeholder: var(--hm-color-text-placeholder);
|
|
--hm-sem-action-primary: var(--hm-color-primary);
|
|
--hm-sem-action-cancel: var(--hm-color-action-cancel);
|
|
--hm-sem-action-destructive: var(--hm-color-action-destructive);
|
|
/* Provisional generic status role, independent of component error/destructive aliases. */
|
|
--hm-sem-status-error: #b3261e;
|
|
--hm-sem-stroke-default: var(--hm-color-border-default);
|
|
--hm-sem-stroke-input-default: var(--hm-color-border-control);
|
|
--hm-sem-stroke-input-focus: var(--hm-color-border-focus);
|
|
--hm-sem-on-action-primary: 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: var(--hm-sem-palette-green-light-2);
|
|
--hm-sem-on-state-active: var(--hm-color-text-inverse);
|
|
/* Public gradient stop groups; geometry remains internal. */
|
|
--hm-sem-brand-bg-stop-0: var(--hm-sem-palette-green-dark-1);
|
|
--hm-sem-brand-bg-stop-12: var(--hm-sem-palette-green-dark-2);
|
|
--hm-sem-brand-bg-stop-42: var(--hm-sem-palette-green-default);
|
|
--hm-sem-brand-bg-stop-78: var(--hm-sem-palette-green-light-2);
|
|
--hm-sem-brand-bg-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%);
|
|
|
|
/* Independent common backgrounds; Button and Dashboard mappings stay unchanged. */
|
|
--hm-sem-brown-bg-stop-0: var(--hm-sem-palette-brown-dark-1);
|
|
--hm-sem-brown-bg-stop-12: var(--hm-sem-palette-brown-dark-2);
|
|
--hm-sem-brown-bg-stop-42: var(--hm-sem-palette-brown-default);
|
|
--hm-sem-brown-bg-stop-78: var(--hm-sem-palette-brown-light-2);
|
|
--hm-sem-brown-bg-stop-100: var(--hm-sem-palette-brown-light-1);
|
|
--hm-sem-bg-brown: linear-gradient(to bottom,
|
|
var(--hm-sem-brown-bg-stop-0) 0%, var(--hm-sem-brown-bg-stop-12) 12%,
|
|
var(--hm-sem-brown-bg-stop-42) 42%, var(--hm-sem-brown-bg-stop-78) 78%,
|
|
var(--hm-sem-brown-bg-stop-100) 100%);
|
|
--hm-sem-orange-bg-stop-0: var(--hm-sem-palette-orange-dark-1);
|
|
--hm-sem-orange-bg-stop-12: var(--hm-sem-palette-orange-dark-2);
|
|
--hm-sem-orange-bg-stop-42: var(--hm-sem-palette-orange-default);
|
|
--hm-sem-orange-bg-stop-78: var(--hm-sem-palette-orange-light-2);
|
|
--hm-sem-orange-bg-stop-100: var(--hm-sem-palette-orange-light-1);
|
|
--hm-sem-bg-orange: linear-gradient(to bottom,
|
|
var(--hm-sem-orange-bg-stop-0) 0%, var(--hm-sem-orange-bg-stop-12) 12%,
|
|
var(--hm-sem-orange-bg-stop-42) 42%, var(--hm-sem-orange-bg-stop-78) 78%,
|
|
var(--hm-sem-orange-bg-stop-100) 100%);
|
|
|
|
--hm-sem-action-surface-stop-0: var(--hm-sem-palette-green-tone-1);
|
|
--hm-sem-action-surface-stop-30: var(--hm-sem-palette-green-tone-2);
|
|
--hm-sem-action-surface-stop-65: var(--hm-sem-palette-green-tone-3);
|
|
--hm-sem-action-surface-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: var(--hm-sem-palette-green-dark-1);
|
|
--hm-sem-action-border-stop-50: var(--hm-sem-palette-green-light-4);
|
|
--hm-sem-action-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: var(--hm-color-surface-subtle);
|
|
|
|
--hm-sem-accent: var(--hm-sem-palette-green-tint);
|
|
|
|
--hm-sem-on-accent: #123328;
|
|
|
|
--hm-sem-palette-green-light-4: var(--hm-green-light-4);
|
|
|
|
--hm-sem-palette-green-light-3: var(--hm-green-light-3);
|
|
|
|
--hm-sem-palette-green-light-2: var(--hm-green-light-2);
|
|
|
|
--hm-sem-palette-green-light-1: var(--hm-green-light-1);
|
|
|
|
--hm-sem-palette-green-default: var(--hm-green-default);
|
|
|
|
--hm-sem-palette-green-dark-1: var(--hm-green-dark-1);
|
|
|
|
--hm-sem-palette-green-dark-2: var(--hm-green-dark-2);
|
|
|
|
--hm-sem-palette-brown-light-2: var(--hm-brown-light-2);
|
|
|
|
--hm-sem-palette-brown-light-1: var(--hm-brown-light-1);
|
|
|
|
--hm-sem-palette-brown-default: var(--hm-brown-default);
|
|
|
|
--hm-sem-palette-brown-dark-1: var(--hm-brown-dark-1);
|
|
|
|
--hm-sem-palette-brown-light-4: var(--hm-brown-light-4);
|
|
|
|
--hm-sem-palette-orange-light-4: var(--hm-orange-light-4);
|
|
|
|
--hm-sem-palette-orange-default: var(--hm-orange-default);
|
|
|
|
--hm-sem-palette-warm-neutral-light: var(--hm-warm-neutral-light);
|
|
|
|
--hm-sem-palette-warm-neutral-mid: var(--hm-warm-neutral-mid);
|
|
|
|
--hm-sem-palette-warm-neutral-dark: var(--hm-warm-neutral-dark);
|
|
|
|
--hm-sem-palette-beige-light: var(--hm-beige-light);
|
|
|
|
--hm-sem-palette-red-danger: var(--hm-red-danger);
|
|
|
|
--hm-sem-palette-white: var(--hm-white);
|
|
|
|
--hm-sem-palette-black: var(--hm-black);
|
|
|
|
--hm-sem-palette-neutral-gray-500: var(--hm-neutral-gray-500);
|
|
|
|
--hm-sem-palette-green-tone-1: var(--hm-green-tone-1);
|
|
|
|
--hm-sem-palette-green-tone-2: var(--hm-green-tone-2);
|
|
|
|
--hm-sem-palette-green-tone-3: var(--hm-green-tone-3);
|
|
|
|
--hm-sem-palette-green-tone-4: var(--hm-green-tone-4);
|
|
|
|
--hm-sem-palette-warm-neutral-pale: var(--hm-warm-neutral-pale);
|
|
|
|
--hm-sem-palette-warm-neutral-secondary: var(--hm-warm-neutral-secondary);
|
|
|
|
--hm-sem-palette-warm-neutral-muted: var(--hm-warm-neutral-muted);
|
|
|
|
--hm-sem-palette-green-tint: var(--hm-green-tint);
|
|
|
|
--hm-sem-palette-yellow-accent: var(--hm-yellow-accent);
|
|
|
|
--hm-sem-palette-brown-deep: #221d13;
|
|
|
|
--hm-sem-palette-brown-highlight: #a98d53;
|
|
|
|
--hm-sem-palette-orange-light: #d35a00;
|
|
|
|
--hm-sem-palette-orange-mid: #ce5600;
|
|
|
|
--hm-sem-palette-orange-dark: #b44b00;
|
|
|
|
--hm-sem-palette-orange-deep: #783402;
|
|
|
|
--hm-sem-palette-orange-border: #bc4c00;
|
|
|
|
--hm-sem-palette-orange-border-deep: #5e2902;
|
|
|
|
--hm-sem-palette-gray: #767676;
|
|
|
|
--hm-sem-palette-gray-dark: #5a5a5a;
|
|
|
|
--hm-sem-palette-indicator: #2d2d2d;
|
|
|
|
--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);
|
|
}
|
|
|
|
/* Additive brand palette; does not change existing component aliases. */
|
|
:root, [data-hm-theme] {
|
|
--hm-sem-palette-green-dark-3: var(--hm-green-dark-3);
|
|
--hm-sem-palette-brown-light-3: var(--hm-brown-light-3);
|
|
--hm-sem-palette-brown-dark-2: var(--hm-brown-dark-2);
|
|
--hm-sem-palette-brown-dark-3: var(--hm-brown-dark-3);
|
|
--hm-sem-palette-orange-light-3: var(--hm-orange-light-3);
|
|
--hm-sem-palette-orange-light-2: var(--hm-orange-light-2);
|
|
--hm-sem-palette-orange-light-1: var(--hm-orange-light-1);
|
|
--hm-sem-palette-orange-dark-1: var(--hm-orange-dark-1);
|
|
--hm-sem-palette-orange-dark-2: var(--hm-orange-dark-2);
|
|
--hm-sem-palette-orange-dark-3: var(--hm-orange-dark-3);
|
|
}
|