Shared UI kit

tokens.css 81 lines

:root {
  font-family: "Inter Variable", Inter, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: var(--text-primary);
  background: var(--page);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  --page: #f7f8fa;
  --surface: #fff;
  --surface-secondary: #f2f4f7;
  --surface-hover: #f8f9fc;
  --border: #e6e8ec;
  --text-primary: #202632;
  --text-secondary: #596373;
  --text-muted: #727b8c;
  --accent: #4f46e5;
  --accent-soft: #eeedff;
  --accent-hover: #4338ca;
  --success: #087f5b;
  --success-bg: #ecf8f2;
  --warning: #9d620b;
  --warning-bg: #fff8ea;
  --warning-border: #efd6a6;
  --danger: #be3453;
  --danger-bg: #fff0f3;
  --edge: #858bae;
  --shadow: 0 1px 2px rgb(0 0 0 / 0.04);
  --scrim: rgb(30 35 50 / 0.18);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --page: #101217;
    --surface: #191c23;
    --surface-secondary: #222630;
    --surface-hover: #20242e;
    --border: #2c303b;
    --text-primary: #edf0f7;
    --text-secondary: #a9b1c1;
    --text-muted: #8f99ad;
    --accent: #818cf8;
    --accent-soft: #262944;
    --accent-hover: #a5b4fc;
    --success: #6ad5ad;
    --success-bg: #192e2a;
    --warning: #e8b463;
    --warning-bg: #2a251c;
    --warning-border: #5c482a;
    --danger: #fb91a7;
    --danger-bg: #35212b;
    --edge: #8b93bb;
    --shadow: 0 1px 2px rgb(0 0 0 / 0.12);
    --scrim: rgb(0 0 0 / 0.4);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #101217;
  --surface: #191c23;
  --surface-secondary: #222630;
  --surface-hover: #20242e;
  --border: #2c303b;
  --text-primary: #edf0f7;
  --text-secondary: #a9b1c1;
  --text-muted: #8f99ad;
  --accent: #818cf8;
  --accent-soft: #262944;
  --accent-hover: #a5b4fc;
  --success: #6ad5ad;
  --success-bg: #192e2a;
  --warning: #e8b463;
  --warning-bg: #2a251c;
  --warning-border: #5c482a;
  --danger: #fb91a7;
  --danger-bg: #35212b;
  --edge: #8b93bb;
  --shadow: 0 1px 2px rgb(0 0 0 / 0.12);
  --scrim: rgb(0 0 0 / 0.4);
}