yaoyao/src/client/styles/tokens.css

:root {
  color-scheme: light;
  --font-ui: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-code: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --canvas: #ffffff;
  --conversation-canvas: #ffffff;
  --message-file-surface: #f1f1f1;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-soft: #f2f2ef;
  --surface-hover: #ecece8;
  --settings-panel: #f2f2f4;
  --settings-sidebar: #fafafa;
  --settings-selected: #eaeaed;
  --rail-bg: #151515;
  --rail-text: rgba(255, 255, 255, .58);
  --rail-active: #ffffff;
  --text-primary: #1f1f1d;
  --text-secondary: #656560;
  --text-muted: #6f6f69;
  --text-on-solid: #ffffff;
  --line: rgba(25, 25, 22, .105);
  --line-strong: rgba(25, 25, 22, .19);
  --accent: #20201e;
  --accent-rgb: 32, 32, 30;
  --workflow-accent: #2868d7;
  --delivery-accent: #245fc5;
  --workflow-on-accent: #ffffff;
  --danger: #b33d33;
  --success: #377a54;
  --warning: #9b6b1f;
  --focus-ring: rgba(31, 31, 29, .16);
  --chat-composer-bg: #ffffff;
  --input-border-color: rgba(31, 31, 29, .12);
  --input-border-hover-color: rgba(31, 31, 29, .24);
  --input-border-focus-color: rgba(31, 31, 29, .44);
  --input-placeholder-color: #72726c;
  --scrim: rgba(18, 18, 17, .32);
  --shadow-float: 0 18px 55px rgba(20, 20, 18, .13);
  --radius-sm: 9px;
  --radius-md: 13px;
  --radius-lg: 18px;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
}

:root.dark {
  color-scheme: dark;
  --canvas: #181817;
  --conversation-canvas: #171a20;
  --message-file-surface: #262626;
  --surface: #1d1d1c;
  --surface-raised: #242423;
  --surface-soft: #282827;
  --surface-hover: #30302e;
  --settings-panel: #2b2b2e;
  --settings-sidebar: #202022;
  --settings-selected: #353538;
  --rail-bg: #0d0d0d;
  --rail-text: rgba(255, 255, 255, .54);
  --rail-active: #ffffff;
  --text-primary: #efefec;
  --text-secondary: #b2b2ad;
  --text-muted: #a0a09a;
  --text-on-solid: #151514;
  --line: rgba(255, 255, 250, .09);
  --line-strong: rgba(255, 255, 250, .17);
  --accent: #efefec;
  --accent-rgb: 239, 239, 236;
  --workflow-accent: #78a9ff;
  --delivery-accent: #78a9ff;
  --workflow-on-accent: #101b2f;
  --danger: #ed786f;
  --success: #77b88e;
  --warning: #d9ab60;
  --focus-ring: rgba(255, 255, 255, .12);
  --chat-composer-bg: #242423;
  --input-border-color: rgba(255, 255, 250, .1);
  --input-border-hover-color: rgba(255, 255, 250, .2);
  --input-border-focus-color: rgba(255, 255, 250, .38);
  --input-placeholder-color: #a0a09a;
  --scrim: rgba(0, 0, 0, .56);
  --shadow-float: 0 18px 55px rgba(0, 0, 0, .34);
}