claude-harness/skills/aura-design/kit/styles/tokens.css

/* Токены AURA (tokens.json 29.09.2026 + расширения): единственное место с литералами цвета — это проверяет
   tokens.test.ts. Светлая тема по умолчанию; тёмная — по системе (prefers-color-scheme), если пользователь не выбрал
   светлую, или по data-theme="dark" на <html>. Тёмный блок продублирован намеренно: так он работает и при системной,
   и при выбранной вручную теме. Новый цветовой токен добавляется во все три блока — иначе тест паритета упадёт. */
:root {
  color-scheme: light;
  --color-bg-canvas: #f8f8f6;
  --color-bg-surface: #fdfdfc;
  --color-bg-subtle: #fafaf8;
  --color-bg-selected: #f4faf5;
  --color-bg-hover: #f2f2f0;
  --color-bg-track: #eeeeeb;
  --color-text-primary: #17171a;
  --color-text-secondary: #818190;
  --color-text-placeholder: #5c6260;
  --color-text-disabled: #737d76;
  --color-text-on-primary: #ffffff;
  --color-border-default: #e5e5e0;
  --color-border-strong: #cfcfc8;
  --color-border-selected: #568d32;
  --color-action-primary: #568d32;
  --color-action-primary-hover: #477729;
  --color-action-danger: #b42318;
  --color-action-danger-hover: #8e1b13;
  --color-status-success: #568d32;
  --color-status-success-bg: #f4faf5;
  --color-status-error: #b42318;
  --color-status-error-bg: #fff1f0;
  --color-status-warning: #d89614;
  --color-status-warning-bg: #fffbe6;
  --color-status-warning-border: #ffe58f;
  --color-focus-ring: rgb(42 122 70 / 35%);
  --color-overlay: rgb(0 0 0 / 45%);
  --shadow-popover: 0 10px 28px rgb(0 0 0 / 18%);
  --shadow-dialog: 0 24px 72px rgb(28 47 36 / 12%);
  /* палитра категорий (метки, виды, серии): различима между собой и с зелёным действием */
  --color-cat-1: #b4542a;
  --color-cat-2: #8a6d1f;
  --color-cat-3: #1f6f8b;
  --color-cat-4: #5b4b9a;
  --color-cat-5: #a63d78;
  --color-cat-6: #7a766e;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px;
  --radius-xs: 4px; --radius-sm: 8px; --radius-md: 10px; --radius-lg: 12px;
  --radius-xl: 16px; --radius-2xl: 20px; --radius-round: 999px;
  --font-ui: "Mulish", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --fs-caption: 12px; --fs-body: 14px; --fs-lg: 16px; --fs-section: 20px;
  --lh-caption: 16px; --lh-body: 20px; --lh-lg: 24px; --lh-section: 28px;
  --control-h: 32px; --control-h-lg: 40px; --control-radius: 10px;
  --motion: 180ms ease;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-bg-canvas: #181818;
    --color-bg-surface: #1f1f1f;
    --color-bg-subtle: #272727;
    --color-bg-selected: #272727;
    --color-bg-hover: #272727;
    --color-bg-track: #272727;
    --color-text-primary: #f2f4f2;
    --color-text-secondary: #d6dcd7;
    --color-text-placeholder: #aab2ac;
    --color-text-disabled: #aab2ac;
    --color-text-on-primary: #112016;
    --color-border-default: rgb(232 238 233 / 10%);
    --color-border-strong: rgb(232 238 233 / 17%);
    --color-border-selected: #69a93d;
    --color-action-primary: #69a93d;
    --color-action-primary-hover: #83c657;
    --color-action-danger: #ffaea5;
    --color-action-danger-hover: #ffcbc5;
    --color-status-success: #69a93d;
    --color-status-success-bg: #272727;
    --color-status-error: #e26c67;
    --color-status-error-bg: #402725;
    --color-status-warning: #e8c17a;
    --color-status-warning-bg: #382f20;
    --color-status-warning-border: #8a6d1d;
    --color-focus-ring: rgb(116 184 255 / 55%);
    --color-overlay: rgb(0 0 0 / 45%);
    --shadow-popover: 0 10px 28px rgb(0 0 0 / 55%);
    --shadow-dialog: 0 24px 72px rgb(0 0 0 / 60%);
    --color-cat-1: #e08a5a;
    --color-cat-2: #d4b35a;
    --color-cat-3: #6fb3cc;
    --color-cat-4: #a493d8;
    --color-cat-5: #e07fb0;
    --color-cat-6: #aab2ac;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg-canvas: #181818;
  --color-bg-surface: #1f1f1f;
  --color-bg-subtle: #272727;
  --color-bg-selected: #272727;
  --color-bg-hover: #272727;
  --color-bg-track: #272727;
  --color-text-primary: #f2f4f2;
  --color-text-secondary: #d6dcd7;
  --color-text-placeholder: #aab2ac;
  --color-text-disabled: #aab2ac;
  --color-text-on-primary: #112016;
  --color-border-default: rgb(232 238 233 / 10%);
  --color-border-strong: rgb(232 238 233 / 17%);
  --color-border-selected: #69a93d;
  --color-action-primary: #69a93d;
  --color-action-primary-hover: #83c657;
  --color-action-danger: #ffaea5;
  --color-action-danger-hover: #ffcbc5;
  --color-status-success: #69a93d;
  --color-status-success-bg: #272727;
  --color-status-error: #e26c67;
  --color-status-error-bg: #402725;
  --color-status-warning: #e8c17a;
  --color-status-warning-bg: #382f20;
  --color-status-warning-border: #8a6d1d;
  --color-focus-ring: rgb(116 184 255 / 55%);
  --color-overlay: rgb(0 0 0 / 45%);
  --shadow-popover: 0 10px 28px rgb(0 0 0 / 55%);
  --shadow-dialog: 0 24px 72px rgb(0 0 0 / 60%);
  --color-cat-1: #e08a5a;
  --color-cat-2: #d4b35a;
  --color-cat-3: #6fb3cc;
  --color-cat-4: #a493d8;
  --color-cat-5: #e07fb0;
  --color-cat-6: #aab2ac;
}