refactor: archive GUI clients; keep minimal TUI with hooks/API
Move Qt/Tauri/full Web SPA under archive/, ship hermit as CLI/TUI plus libcstcore and cst-webui/1 HTTP+SSE (turn lifecycle hooks, capabilities). Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
WHC
@@ -0,0 +1,39 @@
|
||||
/* Base variables referenced by the token sheets and component CSS but defined
|
||||
* upstream (deepsuite theme/global.css) — supplied here so the composite
|
||||
* --dsw-font-* variables resolve and motion rides the upstream curve. Code
|
||||
* font stack deliberately omits a bare `monospace` tail (Windows CJK falls
|
||||
* back to SimSun otherwise). */
|
||||
:root {
|
||||
--dsh-font-family-text-default: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
|
||||
'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
--dsw-font-family: var(--dsh-font-family-text-default);
|
||||
--dsw-font-family-brand: 'Montserrat', var(--dsh-font-family-text-default);
|
||||
--dsh-font-family-code-default: 'SF Mono', 'JetBrains Mono', 'Fira Code', Consolas,
|
||||
'Liberation Mono', Menlo, Courier, 'PingFang SC', 'Microsoft YaHei';
|
||||
--ds-font-family-code: var(--dsh-font-family-code-default);
|
||||
--ds-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--ds-transition-duration: 0.2s;
|
||||
--ds-transition-duration-fast: 0.1s;
|
||||
--ds-transition-duration-slow: 0.3s;
|
||||
--dsw-radius-xs: 4px;
|
||||
--dsw-radius-sm: 8px;
|
||||
--dsw-radius-md: 12px;
|
||||
--dsw-radius-lg: 16px;
|
||||
--dsw-radius-xl: 20px;
|
||||
--dsw-radius-panel: 28px;
|
||||
}
|
||||
|
||||
/* User font lists (--dsh-font-family-text/-code, written on body by the theme
|
||||
* boot script and ThemePresenter) lead the built-in stacks. An unset list
|
||||
* falls back to the built-in stack itself; the repeated families are inert. */
|
||||
body {
|
||||
--dsw-font-family: var(--dsh-font-family-text, var(--dsh-font-family-text-default)), var(--dsh-font-family-text-default);
|
||||
--ds-font-family-code: var(--dsh-font-family-code, var(--dsh-font-family-code-default)), var(--dsh-font-family-code-default);
|
||||
--dsw-alias-settings-card-fill: var(--dsw-alias-bg-layer-2);
|
||||
--dsw-alias-settings-card-stroke: var(--dsw-alias-border-l4);
|
||||
}
|
||||
|
||||
[data-dsh-automatic-focus]:focus,
|
||||
[data-dsh-automatic-focus]:focus:focus-visible {
|
||||
outline: none;
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
/* Smooth corner curvature for every rounded surface. Inside the support
|
||||
* guard, all corners curve along superellipse(1.5) — between a circular arc
|
||||
* (round = superellipse(1)) and a squircle (superellipse(2)) — instead of the
|
||||
* default arc; engines without corner-shape keep circular corners because the
|
||||
* token and the rule exist only inside the guard.
|
||||
*
|
||||
* corner-shape does not inherit, so the universal selector applies the token
|
||||
* to elements and their ::before/::after; other pseudo-elements (for example
|
||||
* the ::-webkit-scrollbar parts) stay circular.
|
||||
*
|
||||
* Full-round shapes opt out where they are declared: a superellipse deforms a
|
||||
* circle into a squircle and squares off capsule ends, so every effectively
|
||||
* uncapped radius (50%, 100%, or a pill radius far above the box size) pairs
|
||||
* `corner-shape: round` with its `border-radius` in the owning component
|
||||
* sheet. The corner-shape stylesheet spec enforces that pairing. */
|
||||
@supports (corner-shape: superellipse(1.5)) {
|
||||
:root {
|
||||
--dsw-corner-shape: superellipse(1.5);
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
corner-shape: var(--dsw-corner-shape);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,430 @@
|
||||
/* Figma font-weight 510 (an SF Pro variable-font weight) always renders as
|
||||
font-weight: 500 in this UI — non-variable webfonts snap intermediate
|
||||
weights unpredictably across platforms. */
|
||||
body {
|
||||
--dsw-static-amber-100: rgb(254, 245, 231);
|
||||
--dsw-static-amber-400: rgb(247, 173, 49);
|
||||
--dsw-static-amber-500: rgb(245, 158, 11);
|
||||
--dsw-static-amber-600: rgb(221, 134, 41);
|
||||
--dsw-static-amber-900: rgb(39, 36, 31);
|
||||
--dsw-static-blue-100: rgb(219, 234, 254);
|
||||
--dsw-static-blue-300: rgb(147, 197, 253);
|
||||
--dsw-static-blue-400: rgb(96, 165, 250);
|
||||
--dsw-static-blue-450: rgb(77, 147, 248);
|
||||
--dsw-static-blue-500: rgb(59, 130, 246);
|
||||
--dsw-static-blue-50: rgb(239, 246, 255);
|
||||
--dsw-static-blue-50p: rgb(234, 243, 255);
|
||||
--dsw-static-blue-600: rgb(37, 99, 235);
|
||||
--dsw-static-blue-75: rgb(229, 240, 255);
|
||||
--dsw-static-blue-800: rgb(30, 64, 175);
|
||||
--dsw-static-blue-900: rgb(14, 48, 116);
|
||||
--dsw-static-blue-950: rgb(23, 37, 84);
|
||||
--dsw-static-deepseek-100: rgb(228, 237, 253);
|
||||
--dsw-static-deepseek-200: rgb(211, 226, 255);
|
||||
--dsw-static-deepseek-300: rgb(183, 200, 254);
|
||||
/* Brightened from the platform rgb(103, 158, 254) at the designer's request: legibility on the dark toast surface. */
|
||||
--dsw-static-deepseek-400: rgb(122, 170, 255);
|
||||
--dsw-static-deepseek-450: rgb(86, 134, 254);
|
||||
--dsw-static-deepseek-500: rgb(65, 118, 230);
|
||||
--dsw-static-deepseek-50: rgb(237, 243, 254);
|
||||
--dsw-static-deepseek-600: rgb(72, 104, 178);
|
||||
--dsw-static-deepseek-700-delete: rgb(47, 76, 143);
|
||||
--dsw-static-deepseek-800: rgb(52, 65, 91);
|
||||
--dsw-static-deepseek-900: rgb(40, 49, 66);
|
||||
--dsw-static-green-100: rgb(230, 250, 237);
|
||||
--dsw-static-green-400: rgb(78, 209, 126);
|
||||
--dsw-static-green-500: rgb(34, 197, 94);
|
||||
--dsw-static-green-500-a08: rgb(34 197 94 / 8%);
|
||||
--dsw-static-green-500-a12: rgb(34 197 94 / 12%);
|
||||
--dsw-static-green-900: rgb(35, 60, 44);
|
||||
--dsw-static-neutral-00: rgb(255, 255, 255);
|
||||
--dsw-static-neutral-1000: rgb(0, 0, 0);
|
||||
--dsw-static-neutral-100: rgb(245, 245, 245);
|
||||
--dsw-static-neutral-150: rgb(237, 237, 237);
|
||||
--dsw-static-neutral-200: rgb(229, 229, 229);
|
||||
--dsw-static-neutral-250: rgb(220, 220, 220);
|
||||
--dsw-static-neutral-300: rgb(212, 212, 212);
|
||||
--dsw-static-neutral-400: rgb(162, 164, 166);
|
||||
--dsw-static-neutral-500: rgb(127, 130, 135);
|
||||
--dsw-static-neutral-50: rgb(250, 250, 250);
|
||||
--dsw-static-neutral-550: rgb(101, 103, 107);
|
||||
--dsw-static-neutral-600: rgb(84, 85, 87);
|
||||
--dsw-static-neutral-700: rgb(60, 60, 61);
|
||||
--dsw-static-neutral-800: rgb(41, 41, 41);
|
||||
--dsw-static-neutral-850: rgb(33, 33, 35);
|
||||
--dsw-static-neutral-900: rgb(15, 15, 15);
|
||||
--dsw-static-neutral-bluish-00: rgb(255, 255, 255);
|
||||
--dsw-static-neutral-bluish-1000: rgb(15, 17, 21);
|
||||
--dsw-static-neutral-bluish-100: rgb(235, 238, 242);
|
||||
--dsw-static-neutral-bluish-150: rgb(233, 236, 242);
|
||||
--dsw-static-neutral-bluish-200: rgb(225, 229, 238);
|
||||
--dsw-static-neutral-bluish-300: rgb(207, 211, 214);
|
||||
--dsw-static-neutral-bluish-310: rgb(202, 210, 219);
|
||||
--dsw-static-neutral-bluish-400: rgb(173, 178, 184);
|
||||
--dsw-static-neutral-bluish-500: rgb(151, 157, 166);
|
||||
--dsw-static-neutral-bluish-50: rgb(249, 250, 251);
|
||||
--dsw-static-neutral-bluish-55: rgb(245, 247, 250);
|
||||
--dsw-static-neutral-bluish-600: rgb(129, 133, 140);
|
||||
--dsw-static-neutral-bluish-60: rgb(245, 246, 247);
|
||||
--dsw-static-neutral-bluish-700: rgb(97, 102, 107);
|
||||
--dsw-static-neutral-bluish-750: rgb(67, 69, 74);
|
||||
--dsw-static-neutral-bluish-75: rgb(241, 243, 245);
|
||||
--dsw-static-neutral-bluish-800: rgb(53, 54, 56);
|
||||
--dsw-static-neutral-bluish-850: rgb(44, 44, 46);
|
||||
--dsw-static-neutral-bluish-875: rgb(35, 35, 36);
|
||||
--dsw-static-neutral-bluish-900: rgb(27, 27, 28);
|
||||
--dsw-static-neutral-bluish-90: rgb(237, 240, 244);
|
||||
--dsw-static-neutral-bluish-950: rgb(21, 21, 23);
|
||||
--dsw-static-red-100: rgb(254, 226, 226);
|
||||
--dsw-static-red-400: rgb(242, 90, 90);
|
||||
--dsw-static-red-400-a12: rgb(242 90 90 / 12%);
|
||||
--dsw-static-red-500: rgb(239, 68, 68);
|
||||
--dsw-static-red-50: rgb(254, 242, 242);
|
||||
--dsw-static-red-600: rgb(236, 19, 19);
|
||||
--dsw-static-red-600-a08: rgb(236 19 19 / 8%);
|
||||
--dsw-static-red-900: rgb(87, 12, 12);
|
||||
--dsw-static-violet-400: rgb(167, 139, 250);
|
||||
--dsw-static-violet-600: rgb(124, 58, 237);
|
||||
}
|
||||
|
||||
body[data-ds-dark-theme] {
|
||||
--dsw-static-amber-100: rgb(254, 245, 231);
|
||||
--dsw-static-amber-400: rgb(247, 173, 49);
|
||||
--dsw-static-amber-500: rgb(245, 158, 11);
|
||||
--dsw-static-amber-600: rgb(221, 134, 41);
|
||||
--dsw-static-amber-900: rgb(39, 36, 31);
|
||||
--dsw-static-blue-100: rgb(219, 234, 254);
|
||||
--dsw-static-blue-300: rgb(147, 197, 253);
|
||||
--dsw-static-blue-400: rgb(96, 165, 250);
|
||||
--dsw-static-blue-450: rgb(77, 147, 248);
|
||||
--dsw-static-blue-500: rgb(59, 130, 246);
|
||||
--dsw-static-blue-50: rgb(239, 246, 255);
|
||||
--dsw-static-blue-50p: rgb(234, 243, 255);
|
||||
--dsw-static-blue-600: rgb(37, 99, 235);
|
||||
--dsw-static-blue-75: rgb(229, 240, 255);
|
||||
--dsw-static-blue-800: rgb(30, 64, 175);
|
||||
--dsw-static-blue-900: rgb(14, 48, 116);
|
||||
--dsw-static-blue-950: rgb(23, 37, 84);
|
||||
--dsw-static-deepseek-100: rgb(228, 237, 253);
|
||||
--dsw-static-deepseek-200: rgb(211, 226, 255);
|
||||
--dsw-static-deepseek-300: rgb(183, 200, 254);
|
||||
/* Brightened from the platform rgb(103, 158, 254) at the designer's request: legibility on the dark toast surface. */
|
||||
--dsw-static-deepseek-400: rgb(122, 170, 255);
|
||||
--dsw-static-deepseek-450: rgb(86, 134, 254);
|
||||
--dsw-static-deepseek-500: rgb(65, 118, 230);
|
||||
--dsw-static-deepseek-50: rgb(237, 243, 254);
|
||||
--dsw-static-deepseek-600: rgb(72, 104, 178);
|
||||
--dsw-static-deepseek-700-delete: rgb(47, 76, 143);
|
||||
--dsw-static-deepseek-800: rgb(52, 65, 91);
|
||||
--dsw-static-deepseek-900: rgb(40, 49, 66);
|
||||
--dsw-static-green-100: rgb(230, 250, 237);
|
||||
--dsw-static-green-400: rgb(78, 209, 126);
|
||||
--dsw-static-green-500: rgb(34, 197, 94);
|
||||
--dsw-static-green-500-a08: rgb(34 197 94 / 8%);
|
||||
--dsw-static-green-500-a12: rgb(34 197 94 / 12%);
|
||||
--dsw-static-green-900: rgb(35, 60, 44);
|
||||
--dsw-static-neutral-00: rgb(255, 255, 255);
|
||||
--dsw-static-neutral-1000: rgb(0, 0, 0);
|
||||
--dsw-static-neutral-100: rgb(245, 245, 245);
|
||||
--dsw-static-neutral-150: rgb(237, 237, 237);
|
||||
--dsw-static-neutral-200: rgb(229, 229, 229);
|
||||
--dsw-static-neutral-250: rgb(220, 220, 220);
|
||||
--dsw-static-neutral-300: rgb(212, 212, 212);
|
||||
--dsw-static-neutral-400: rgb(162, 164, 166);
|
||||
--dsw-static-neutral-500: rgb(127, 130, 135);
|
||||
--dsw-static-neutral-50: rgb(250, 250, 250);
|
||||
--dsw-static-neutral-550: rgb(101, 103, 107);
|
||||
--dsw-static-neutral-600: rgb(84, 85, 87);
|
||||
--dsw-static-neutral-700: rgb(60, 60, 61);
|
||||
--dsw-static-neutral-800: rgb(41, 41, 41);
|
||||
--dsw-static-neutral-850: rgb(33, 33, 35);
|
||||
--dsw-static-neutral-900: rgb(15, 15, 15);
|
||||
--dsw-static-neutral-bluish-00: rgb(255, 255, 255);
|
||||
--dsw-static-neutral-bluish-1000: rgb(15, 17, 21);
|
||||
--dsw-static-neutral-bluish-100: rgb(235, 238, 242);
|
||||
--dsw-static-neutral-bluish-150: rgb(233, 236, 242);
|
||||
--dsw-static-neutral-bluish-200: rgb(225, 229, 238);
|
||||
--dsw-static-neutral-bluish-300: rgb(207, 211, 214);
|
||||
--dsw-static-neutral-bluish-310: rgb(202, 210, 219);
|
||||
--dsw-static-neutral-bluish-400: rgb(173, 178, 184);
|
||||
--dsw-static-neutral-bluish-500: rgb(151, 157, 166);
|
||||
--dsw-static-neutral-bluish-50: rgb(249, 250, 251);
|
||||
--dsw-static-neutral-bluish-55: rgb(245, 247, 250);
|
||||
--dsw-static-neutral-bluish-600: rgb(129, 133, 140);
|
||||
--dsw-static-neutral-bluish-60: rgb(249, 250, 251);
|
||||
--dsw-static-neutral-bluish-700: rgb(97, 102, 107);
|
||||
--dsw-static-neutral-bluish-750: rgb(67, 69, 74);
|
||||
--dsw-static-neutral-bluish-75: rgb(241, 243, 245);
|
||||
--dsw-static-neutral-bluish-800: rgb(53, 54, 56);
|
||||
--dsw-static-neutral-bluish-850: rgb(44, 44, 46);
|
||||
--dsw-static-neutral-bluish-875: rgb(35, 35, 36);
|
||||
--dsw-static-neutral-bluish-900: rgb(27, 27, 28);
|
||||
--dsw-static-neutral-bluish-90: rgb(237, 240, 244);
|
||||
--dsw-static-neutral-bluish-950: rgb(21, 21, 23);
|
||||
--dsw-static-red-100: rgb(254, 226, 226);
|
||||
--dsw-static-red-400: rgb(242, 90, 90);
|
||||
--dsw-static-red-400-a12: rgb(242 90 90 / 12%);
|
||||
--dsw-static-red-500: rgb(239, 68, 68);
|
||||
--dsw-static-red-50: rgb(254, 242, 242);
|
||||
--dsw-static-red-600: rgb(236, 19, 19);
|
||||
--dsw-static-red-600-a08: rgb(236 19 19 / 8%);
|
||||
--dsw-static-red-900: rgb(87, 12, 12);
|
||||
--dsw-static-violet-400: rgb(167, 139, 250);
|
||||
--dsw-static-violet-600: rgb(124, 58, 237);
|
||||
}
|
||||
|
||||
body {
|
||||
--dsw-alias-bg-base: var(--dsw-static-neutral-bluish-00);
|
||||
--dsw-alias-bg-document-preview: var(--dsw-static-neutral-bluish-100);
|
||||
--dsw-alias-bg-document-selection: color-mix(in srgb, var(--dsw-static-blue-500) 40%, transparent);
|
||||
--dsw-alias-label-document-preview: var(--dsw-static-neutral-bluish-700);
|
||||
--dsw-alias-bg-layer-1: var(--dsw-static-neutral-bluish-00);
|
||||
--dsw-alias-bg-layer-2: var(--dsw-static-neutral-bluish-00);
|
||||
--dsw-alias-bg-layer-3: var(--dsw-static-neutral-bluish-00);
|
||||
--dsw-alias-bg-mask-1: rgba(0, 0, 0, 0.24);
|
||||
--dsw-alias-bg-mask-2: rgba(0, 0, 0, 0.12);
|
||||
--dsw-alias-bg-mask-3: rgba(0, 0, 0, 0.48);
|
||||
--dsw-alias-bg-mask-photo: rgba(0, 0, 0, 0.88);
|
||||
--dsw-alias-bg-mask-drop: rgba(255, 255, 255, 0.7);
|
||||
--dsw-alias-bg-module-platform: var(--dsw-static-neutral-bluish-60);
|
||||
--dsw-alias-bg-multi-select: var(--dsw-static-neutral-bluish-60);
|
||||
--dsw-alias-bg-overlay: var(--dsw-static-neutral-bluish-150);
|
||||
--dsw-alias-bg-skeleton: rgba(0, 0, 0, 0.04);
|
||||
--dsw-alias-border-inverted2: rgba(0, 0, 0, 0);
|
||||
--dsw-alias-border-inverted: rgba(0, 0, 0, 0);
|
||||
--dsw-alias-border-l1: rgba(0, 0, 0, 0.04);
|
||||
--dsw-alias-border-l2-darkmode-thin: rgba(0, 0, 0, 0.1);
|
||||
--dsw-alias-border-l2: rgba(0, 0, 0, 0.1);
|
||||
--dsw-alias-border-l3: rgba(0, 0, 0, 0.12);
|
||||
--dsw-alias-border-l4: rgba(0, 0, 0, 0.16);
|
||||
--dsw-alias-brand-primary-invert: var(--dsw-static-neutral-bluish-1000);
|
||||
--dsw-alias-brand-primary-new-colorprimary-new-color: rgb(65, 118, 230);
|
||||
--dsw-alias-brand-primary: var(--dsw-static-neutral-bluish-1000);
|
||||
--dsw-alias-brand-text: var(--dsw-static-neutral-bluish-1000);
|
||||
--dsw-alias-button-contrast-fill: var(--dsw-static-neutral-bluish-700);
|
||||
--dsw-alias-button-elevated-fill: var(--dsw-static-neutral-bluish-00);
|
||||
--dsw-alias-button-floating-fill: var(--dsw-static-neutral-bluish-00);
|
||||
--dsw-alias-button-floating-hover: var(--dsw-static-neutral-bluish-75);
|
||||
--dsw-alias-button-ghost-active-border: var(--dsw-static-neutral-bluish-500);
|
||||
--dsw-alias-button-ghost-active-fill: var(--dsw-static-neutral-bluish-100);
|
||||
--dsw-alias-button-ghost-active-hover: var(--dsw-static-neutral-bluish-150);
|
||||
--dsw-alias-button-info-fill: var(--dsw-static-deepseek-500);
|
||||
--dsw-alias-button-info-hover: var(--dsw-static-deepseek-400);
|
||||
--dsw-alias-button-primary-dimmed: var(--dsw-static-neutral-bluish-100);
|
||||
--dsw-alias-button-primary-fill: var(--dsw-alias-brand-primary);
|
||||
--dsw-alias-button-primary-hover: var(--dsw-static-neutral-bluish-750);
|
||||
--dsw-alias-button-tool-bar-fill-invisible: rgba(31, 31, 31, 0.36);
|
||||
--dsw-alias-button-tool-bar-fill: rgba(84, 85, 87, 0.5);
|
||||
--dsw-alias-button-tool-bar-hover: rgba(84, 85, 87, 0.6);
|
||||
--dsw-alias-illustration-background: var(--dsw-static-neutral-bluish-55);
|
||||
--dsw-alias-illustration-backing: var(--dsw-static-neutral-bluish-310);
|
||||
--dsw-alias-illustration-detail: var(--dsw-static-neutral-bluish-310);
|
||||
--dsw-alias-illustration-inset: var(--dsw-alias-illustration-surface);
|
||||
--dsw-alias-illustration-shadow: var(--dsw-alias-illustration-surface);
|
||||
--dsw-alias-illustration-surface: var(--dsw-static-neutral-bluish-90);
|
||||
--dsw-alias-interactive-bg-active: rgba(38, 49, 72, 0.1);
|
||||
--dsw-alias-interactive-bg-hover-accent: rgba(38, 49, 72, 0.14);
|
||||
--dsw-alias-interactive-bg-hover-danger: rgba(236, 19, 19, 0.05);
|
||||
--dsw-alias-interactive-bg-hover-solid: var(--dsw-static-neutral-bluish-75);
|
||||
--dsw-alias-interactive-bg-hover: rgba(38, 49, 72, 0.06);
|
||||
--dsw-alias-label-caption: var(--dsw-static-neutral-bluish-400);
|
||||
--dsw-alias-label-deep-diving: color-mix(in srgb, var(--dsw-static-deepseek-500) 70%, var(--dsw-static-blue-950));
|
||||
--dsw-alias-label-deep-diving-shimmer: color-mix(in srgb, var(--dsw-static-deepseek-500) 30%, var(--dsw-static-blue-950));
|
||||
--dsw-alias-label-dimmed: var(--dsw-static-neutral-bluish-200);
|
||||
--dsw-alias-label-primary-bluish: var(--dsw-static-blue-900);
|
||||
--dsw-alias-label-primary-dimmed: var(--dsw-static-neutral-bluish-950);
|
||||
--dsw-alias-label-primary-foreground: var(--dsw-static-neutral-bluish-00);
|
||||
--dsw-alias-label-primary-inverted: var(--dsw-static-neutral-bluish-00);
|
||||
--dsw-alias-label-primary: var(--dsw-static-neutral-bluish-1000);
|
||||
--dsw-alias-label-secondary: var(--dsw-static-neutral-bluish-700);
|
||||
--dsw-alias-label-shimmer: color-mix(in srgb, var(--dsw-static-neutral-1000) 30%, transparent);
|
||||
--dsw-alias-label-tertiary: var(--dsw-static-neutral-bluish-600);
|
||||
--dsw-alias-menu-icon: var(--dsw-static-neutral-bluish-800);
|
||||
--dsw-alias-link: var(--dsw-static-deepseek-500);
|
||||
--dsw-alias-markdown-citation: var(--dsw-static-neutral-bluish-100);
|
||||
--dsw-alias-markdown-code-block-banner: var(--dsw-static-neutral-bluish-50);
|
||||
--dsw-alias-markdown-code-block: var(--dsw-static-neutral-bluish-50);
|
||||
--dsw-alias-markdown-code-segment-selected: var(--dsw-static-neutral-bluish-00);
|
||||
--dsw-alias-markdown-code-segment-unselected: var(--dsw-static-neutral-bluish-75);
|
||||
--dsw-alias-markdown-inline-code: var(--dsw-static-neutral-50);
|
||||
--dsw-alias-markdown-placeholder: var(--dsw-static-neutral-bluish-60);
|
||||
--dsw-alias-markdown-tag: var(--dsw-static-neutral-bluish-75);
|
||||
--dsw-alias-scrollbar-bg-l1: var(--dsw-static-neutral-200);
|
||||
--dsw-alias-scrollbar-bg-l2: var(--dsw-static-neutral-200);
|
||||
--dsw-alias-scrollbar-hover-l1: var(--dsw-static-neutral-300);
|
||||
--dsw-alias-scrollbar-hover-l2: var(--dsw-static-neutral-300);
|
||||
--dsw-alias-state-business-primary: var(--dsw-static-deepseek-500);
|
||||
--dsw-alias-state-business-tertiary: var(--dsw-static-deepseek-100);
|
||||
--dsw-alias-code-diff-added: var(--dsw-static-green-500-a08);
|
||||
--dsw-alias-code-diff-deleted: var(--dsw-static-red-600-a08);
|
||||
--dsw-alias-file-diff-added-bg: rgb(230, 244, 231);
|
||||
--dsw-alias-file-diff-added-gutter: rgb(237, 247, 237);
|
||||
--dsw-alias-file-diff-added-marker: rgb(1, 162, 65);
|
||||
--dsw-alias-file-diff-deleted-bg: rgb(252, 230, 226);
|
||||
--dsw-alias-file-diff-deleted-gutter: rgb(253, 236, 233);
|
||||
--dsw-alias-file-diff-deleted-marker: rgb(186, 39, 35);
|
||||
--dsw-alias-state-done-primary: var(--dsw-static-violet-600);
|
||||
--dsw-alias-state-error-primary: var(--dsw-static-red-600);
|
||||
--dsw-alias-state-error-secondary: var(--dsw-static-red-400);
|
||||
--dsw-alias-state-idle-primary: var(--dsw-static-neutral-300);
|
||||
--dsw-alias-state-success-primary: var(--dsw-static-green-500);
|
||||
--dsw-alias-state-success-secondary: var(--dsw-static-green-400);
|
||||
--dsw-alias-state-success-tertiary: var(--dsw-static-green-100);
|
||||
--dsw-alias-state-warn-label: var(--dsw-static-amber-600);
|
||||
--dsw-alias-state-warn-primary: var(--dsw-static-amber-500);
|
||||
--dsw-alias-state-warn-secondary: var(--dsw-static-amber-400);
|
||||
--dsw-alias-state-warn-tertiary: var(--dsw-static-amber-100);
|
||||
--dsw-alias-switch-thumb: var(--dsw-static-neutral-bluish-00);
|
||||
--dsw-alias-toast-bg: var(--dsw-static-neutral-bluish-800);
|
||||
--dsw-alias-toast-label: var(--dsw-static-neutral-bluish-00);
|
||||
--dsw-alias-tooltip-bg: var(--dsw-static-neutral-bluish-850);
|
||||
--dsw-alias-tooltip-key-bg: color-mix(in srgb, var(--dsw-alias-tooltip-bg), white 18%);
|
||||
--dsw-alias-turn-trigger-bg: var(--dsw-alias-markdown-code-block);
|
||||
--dsw-alias-turn-trigger-bg-hover: var(--dsw-alias-interactive-bg-hover);
|
||||
--dsw-specific-bubble-highlight: var(--dsw-static-deepseek-200);
|
||||
--dsw-specific-bubble: var(--dsw-static-deepseek-50);
|
||||
--dsw-specific-input-major: var(--dsw-static-neutral-bluish-00);
|
||||
--dsw-specific-login-input: var(--dsw-static-neutral-bluish-50);
|
||||
--dsw-menu-surface-fill: rgba(252, 253, 254, 0.7);
|
||||
--dsw-alias-menu-group-header-fill: rgba(248, 249, 250, 0.94);
|
||||
--dsw-specific-menu: var(--dsw-menu-surface-fill);
|
||||
--dsw-specific-selector: var(--dsw-static-neutral-bluish-60);
|
||||
--dsw-specific-sidebar-fill: var(--dsw-static-neutral-bluish-50);
|
||||
--dsw-specific-sidebar-nav-item-active-accent: var(--dsw-static-deepseek-100);
|
||||
--dsw-specific-sidebar-nav-item-active: var(--dsw-static-neutral-bluish-100);
|
||||
--dsw-specific-tip: var(--dsw-static-neutral-bluish-60);
|
||||
|
||||
background-color: var(--dsw-alias-bg-base);
|
||||
}
|
||||
|
||||
body[data-ds-dark-theme] {
|
||||
--dsw-alias-bg-base: var(--dsw-static-neutral-bluish-950);
|
||||
--dsw-alias-bg-document-preview: var(--dsw-static-neutral-bluish-950);
|
||||
--dsw-alias-bg-document-selection: color-mix(in srgb, var(--dsw-static-blue-500) 40%, transparent);
|
||||
--dsw-alias-label-document-preview: var(--dsw-static-neutral-bluish-300);
|
||||
--dsw-alias-bg-layer-1: var(--dsw-static-neutral-bluish-875);
|
||||
--dsw-alias-bg-layer-2: var(--dsw-static-neutral-bluish-850);
|
||||
--dsw-alias-bg-layer-3: var(--dsw-static-neutral-bluish-800);
|
||||
--dsw-alias-bg-mask-1: rgba(0, 0, 0, 0.5);
|
||||
--dsw-alias-bg-mask-2: rgba(0, 0, 0, 0.2);
|
||||
--dsw-alias-bg-mask-3: rgba(0, 0, 0, 0.48);
|
||||
--dsw-alias-bg-mask-photo: rgba(0, 0, 0, 0.88);
|
||||
--dsw-alias-bg-mask-drop: rgba(39, 39, 48, 0.7);
|
||||
--dsw-alias-bg-module-platform: var(--dsw-static-neutral-bluish-800);
|
||||
--dsw-alias-bg-multi-select: var(--dsw-static-neutral-850);
|
||||
--dsw-alias-bg-overlay: var(--dsw-static-neutral-bluish-700);
|
||||
--dsw-alias-bg-skeleton: rgba(255, 255, 255, 0.08);
|
||||
--dsw-alias-border-inverted2: rgba(255, 255, 255, 0.08);
|
||||
--dsw-alias-border-inverted: rgba(255, 255, 255, 0.06);
|
||||
--dsw-alias-border-l1: rgba(255, 255, 255, 0.06);
|
||||
--dsw-alias-border-l2-darkmode-thin: rgba(255, 255, 255, 0.06);
|
||||
--dsw-alias-border-l2: rgba(255, 255, 255, 0.12);
|
||||
--dsw-alias-border-l3: rgba(255, 255, 255, 0.16);
|
||||
--dsw-alias-border-l4: rgba(255, 255, 255, 0.2);
|
||||
--dsw-alias-brand-primary-invert: var(--dsw-static-neutral-bluish-50);
|
||||
--dsw-alias-brand-primary-new-colorprimary-new-color: var(--dsw-static-deepseek-450);
|
||||
--dsw-alias-brand-primary: var(--dsw-static-neutral-bluish-50);
|
||||
--dsw-alias-brand-text: var(--dsw-static-neutral-bluish-50);
|
||||
--dsw-alias-button-contrast-fill: var(--dsw-static-neutral-bluish-50);
|
||||
--dsw-alias-button-elevated-fill: var(--dsw-static-neutral-bluish-750);
|
||||
--dsw-alias-button-floating-fill: var(--dsw-static-neutral-bluish-850);
|
||||
--dsw-alias-button-floating-hover: var(--dsw-static-neutral-bluish-800);
|
||||
--dsw-alias-button-ghost-active-border: var(--dsw-static-neutral-bluish-600);
|
||||
--dsw-alias-button-ghost-active-fill: var(--dsw-static-neutral-bluish-750);
|
||||
--dsw-alias-button-ghost-active-hover: var(--dsw-static-neutral-bluish-700);
|
||||
--dsw-alias-button-info-fill: var(--dsw-static-deepseek-400);
|
||||
--dsw-alias-button-info-hover: var(--dsw-static-deepseek-500);
|
||||
--dsw-alias-button-primary-dimmed: var(--dsw-static-neutral-bluish-750);
|
||||
--dsw-alias-button-primary-fill: var(--dsw-alias-brand-primary);
|
||||
--dsw-alias-button-primary-hover: var(--dsw-static-neutral-bluish-100);
|
||||
--dsw-alias-button-tool-bar-fill-invisible: rgba(31, 31, 31, 0.36);
|
||||
--dsw-alias-button-tool-bar-fill: rgba(84, 85, 87, 0.5);
|
||||
--dsw-alias-button-tool-bar-hover: rgba(84, 85, 87, 0.6);
|
||||
--dsw-alias-illustration-background: var(--dsw-static-neutral-bluish-850);
|
||||
--dsw-alias-illustration-backing: var(--dsw-static-neutral-bluish-750);
|
||||
--dsw-alias-illustration-detail: var(--dsw-static-neutral-bluish-600);
|
||||
--dsw-alias-illustration-inset: var(--dsw-alias-illustration-backing);
|
||||
--dsw-alias-illustration-shadow: var(--dsw-alias-illustration-backing);
|
||||
--dsw-alias-illustration-surface: var(--dsw-static-neutral-bluish-700);
|
||||
--dsw-alias-interactive-bg-active: rgba(255, 255, 255, 0.14);
|
||||
--dsw-alias-interactive-bg-hover-accent: rgba(255, 255, 255, 0.24);
|
||||
--dsw-alias-interactive-bg-hover-danger: rgba(242, 90, 90, 0.15);
|
||||
--dsw-alias-interactive-bg-hover-solid: var(--dsw-static-neutral-bluish-800);
|
||||
--dsw-alias-interactive-bg-hover: rgba(255, 255, 255, 0.08);
|
||||
--dsw-alias-label-caption: var(--dsw-static-neutral-bluish-600);
|
||||
--dsw-alias-label-deep-diving: color-mix(in srgb, var(--dsw-static-deepseek-450) 55%, var(--dsw-static-neutral-bluish-400));
|
||||
--dsw-alias-label-deep-diving-shimmer: color-mix(in srgb, var(--dsw-static-blue-300) 65%, var(--dsw-static-deepseek-400));
|
||||
--dsw-alias-label-dimmed: var(--dsw-static-neutral-bluish-750);
|
||||
--dsw-alias-label-primary-bluish: var(--dsw-static-neutral-bluish-50);
|
||||
--dsw-alias-label-primary-dimmed: var(--dsw-static-neutral-bluish-100);
|
||||
--dsw-alias-label-primary-foreground: var(--dsw-static-neutral-bluish-1000);
|
||||
--dsw-alias-label-primary-inverted: var(--dsw-static-neutral-bluish-800);
|
||||
--dsw-alias-label-primary: var(--dsw-static-neutral-bluish-50);
|
||||
--dsw-alias-label-secondary: var(--dsw-static-neutral-bluish-300);
|
||||
--dsw-alias-label-shimmer: color-mix(in srgb, var(--dsw-static-neutral-00) 45%, transparent);
|
||||
--dsw-alias-label-tertiary: var(--dsw-static-neutral-bluish-400);
|
||||
--dsw-alias-menu-icon: var(--dsw-alias-label-primary-dimmed);
|
||||
--dsw-alias-link: var(--dsw-static-deepseek-400);
|
||||
--dsw-alias-markdown-citation: var(--dsw-static-neutral-bluish-800);
|
||||
--dsw-alias-markdown-code-block-banner: var(--dsw-static-neutral-bluish-850);
|
||||
--dsw-alias-markdown-code-block: var(--dsw-static-neutral-bluish-900);
|
||||
--dsw-alias-markdown-code-segment-selected: var(--dsw-static-neutral-bluish-800);
|
||||
--dsw-alias-markdown-code-segment-unselected: var(--dsw-static-neutral-bluish-900);
|
||||
--dsw-alias-markdown-inline-code: var(--dsw-static-neutral-800);
|
||||
--dsw-alias-markdown-placeholder: var(--dsw-static-neutral-bluish-850);
|
||||
--dsw-alias-markdown-tag: var(--dsw-static-neutral-bluish-850);
|
||||
--dsw-alias-scrollbar-bg-l1: var(--dsw-static-neutral-700);
|
||||
--dsw-alias-scrollbar-bg-l2: var(--dsw-static-neutral-600);
|
||||
--dsw-alias-scrollbar-hover-l1: var(--dsw-static-neutral-600);
|
||||
--dsw-alias-scrollbar-hover-l2: var(--dsw-static-neutral-550);
|
||||
--dsw-alias-state-business-primary: var(--dsw-static-deepseek-400);
|
||||
--dsw-alias-state-business-tertiary: var(--dsw-static-deepseek-800);
|
||||
--dsw-alias-code-diff-added: var(--dsw-static-green-500-a12);
|
||||
--dsw-alias-code-diff-deleted: var(--dsw-static-red-400-a12);
|
||||
--dsw-alias-file-diff-added-bg: rgb(31, 49, 36);
|
||||
--dsw-alias-file-diff-added-gutter: rgb(19, 32, 22);
|
||||
--dsw-alias-file-diff-added-marker: rgb(65, 201, 119);
|
||||
--dsw-alias-file-diff-deleted-bg: rgb(60, 31, 27);
|
||||
--dsw-alias-file-diff-deleted-gutter: rgb(40, 19, 14);
|
||||
--dsw-alias-file-diff-deleted-marker: rgb(250, 66, 62);
|
||||
--dsw-alias-state-done-primary: var(--dsw-static-violet-400);
|
||||
--dsw-alias-state-error-primary: var(--dsw-static-red-400);
|
||||
--dsw-alias-state-error-secondary: var(--dsw-static-red-400);
|
||||
--dsw-alias-state-idle-primary: var(--dsw-static-neutral-600);
|
||||
--dsw-alias-state-success-primary: var(--dsw-static-green-500);
|
||||
--dsw-alias-state-success-secondary: var(--dsw-static-green-400);
|
||||
--dsw-alias-state-success-tertiary: var(--dsw-static-green-900);
|
||||
--dsw-alias-state-warn-label: var(--dsw-static-amber-600);
|
||||
--dsw-alias-state-warn-primary: var(--dsw-static-amber-500);
|
||||
--dsw-alias-state-warn-secondary: var(--dsw-static-amber-400);
|
||||
--dsw-alias-state-warn-tertiary: var(--dsw-static-amber-900);
|
||||
--dsw-alias-switch-thumb: var(--dsw-static-neutral-bluish-400);
|
||||
--dsw-alias-toast-bg: var(--dsw-static-neutral-bluish-750);
|
||||
--dsw-alias-toast-label: var(--dsw-static-neutral-bluish-00);
|
||||
--dsw-alias-turn-trigger-bg: var(--dsw-alias-interactive-bg-hover);
|
||||
--dsw-alias-turn-trigger-bg-hover: var(--dsw-alias-interactive-bg-active);
|
||||
--dsw-alias-tooltip-bg: var(--dsw-static-neutral-bluish-750);
|
||||
--dsw-alias-tooltip-key-bg: color-mix(in srgb, var(--dsw-alias-tooltip-bg), white 18%);
|
||||
--dsw-specific-bubble-highlight: var(--dsw-static-neutral-bluish-750);
|
||||
--dsw-specific-bubble: var(--dsw-static-neutral-bluish-850);
|
||||
--dsw-specific-input-major: var(--dsw-static-neutral-bluish-850);
|
||||
--dsw-specific-login-input: var(--dsw-static-neutral-bluish-900);
|
||||
--dsw-menu-surface-fill: rgba(48, 49, 54, 0.64);
|
||||
--dsw-alias-menu-group-header-fill: rgba(48, 49, 54, 0.94);
|
||||
--dsw-specific-menu: var(--dsw-menu-surface-fill);
|
||||
--dsw-specific-selector: var(--dsw-static-neutral-bluish-800);
|
||||
--dsw-specific-sidebar-fill: var(--dsw-static-neutral-bluish-900);
|
||||
--dsw-specific-sidebar-nav-item-active-accent: var(--dsw-static-neutral-bluish-800);
|
||||
--dsw-specific-sidebar-nav-item-active: var(--dsw-static-neutral-bluish-750);
|
||||
--dsw-specific-tip: var(--dsw-static-neutral-bluish-800);
|
||||
}
|
||||
|
||||
/* Overlays without MenuSurface's opaque backing cannot blur page content over
|
||||
* native vibrancy reliably, so their fill stays nearly opaque on macOS. */
|
||||
html[data-platform='darwin'] body {
|
||||
--dsw-specific-menu: rgba(248, 249, 250, 0.94);
|
||||
}
|
||||
|
||||
html[data-platform='darwin'] body[data-ds-dark-theme] {
|
||||
--dsw-specific-menu: rgba(48, 49, 54, 0.94);
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
/* Components own offsets; dense tables and toolbars may keep a 1px ring. */
|
||||
:root {
|
||||
--dsw-focus-ring-width: 2px;
|
||||
}
|
||||
|
||||
/* The fallback names the colour and the standard width, never the style: a control that
|
||||
* disables its outline keeps `none` and paints nothing. Without the width, Chromium's
|
||||
* unnamed ring stayed at `auto 1px` while every declared ring used the standard geometry.
|
||||
* Declared rings also read this color, including rings on descendants and pseudo-elements. */
|
||||
:focus-visible {
|
||||
outline-color: var(--dsw-focus-ring-color, var(--dsw-alias-state-business-primary));
|
||||
outline-width: var(--dsw-focus-ring-width);
|
||||
}
|
||||
|
||||
/* ui-primitives/input-modality publishes the attribute. Editable controls keep
|
||||
* their focus feedback on click; other controls reveal rings on keyboard
|
||||
* navigation. Only ring paint is suppressed, not elevation or selected borders. */
|
||||
html[data-input-modality='pointer'] body :focus-visible:not(:read-write) {
|
||||
--dsw-focus-ring-color: transparent;
|
||||
outline-color: transparent;
|
||||
}
|
||||
@@ -0,0 +1,275 @@
|
||||
body {
|
||||
--dsw-linear-gradient-think: linear-gradient(180deg, #fff 20.19%, rgba(255, 255, 255, 0) 100%);
|
||||
--dsw-linear-think-select: linear-gradient(180deg, #f5f6f7 20.19%, rgba(245, 246, 247, 0) 100%);
|
||||
/* 阴影 */
|
||||
--dsw-shadow-lv1: 0 2px 4px 0 rgba(0, 0, 0, 0.05);
|
||||
--dsw-shadow-lv1-blur: 0 4px 12px 0 rgba(0, 0, 0, 0.02);
|
||||
--dsw-shadow-lv2: 0 4px 12px 0 rgba(0, 0, 0, 0.02), 0 2px 8px 0 rgba(0, 0, 0, 0.04);
|
||||
--dsw-shadow-lv3:
|
||||
0 0 1px 0 rgba(0, 0, 0, 0.2), 0 0 4px 0 rgba(0, 0, 0, 0.02), 0 12px 32px 0 rgba(0, 0, 0, 0.08);
|
||||
/* Elevation：浮层/面板/面型按钮的描边+投影三件套。0.5px 发丝描边画在
|
||||
box-shadow 里（组件配 border: 0，不占布局），叠两层极淡柔光；深色主题下
|
||||
柔光几乎不可见，由描边承担分离。描边颜色经 --dsw-elevation-stroke-color
|
||||
间接，组件可重绑（菜单面重绑最浅的 l1、输入框重绑 l2，输入框的
|
||||
workspace-trigger 态置 transparent 只保留柔光）。soft 供输入框：更大
|
||||
模糊、更低透明度的柔光。默认色只声明在 body 上，让表面的重绑沿继承
|
||||
传给真正消费投影的后代。 */
|
||||
--dsw-elevation-stroke-color: var(--dsw-alias-border-l4);
|
||||
/* Blocking masks dim the page; menu backgrounds retain their blur. */
|
||||
--dsw-mask-blur: none;
|
||||
--dsw-menu-backdrop-filter: blur(40px) saturate(150%);
|
||||
}
|
||||
|
||||
body[data-ds-dark-theme] [data-menu-material] {
|
||||
--dsw-elevation-stroke-color: var(--dsw-alias-border-l3);
|
||||
}
|
||||
|
||||
/* 派生 elevation 值逐元素声明而非从 body 继承：继承传下来的是在 body 上就
|
||||
已替换完 var() 的值，组件重绑 --dsw-elevation-stroke-color 将无法进入
|
||||
var(--dsw-elevation-*)；逐元素声明让每个元素按自己看到的描边色重新替换
|
||||
（同 scrollbar.css 对 --dsh-scrollbar-thumb 的处理）。 */
|
||||
body,
|
||||
body * {
|
||||
--dsw-elevation-stroke: 0 0 0 0.5px var(--dsw-elevation-stroke-color);
|
||||
--dsw-elevation-panel:
|
||||
var(--dsw-elevation-stroke), 0 3px 8px 0 rgba(0, 0, 0, 0.03), 0 0 16px 0 rgba(0, 0, 0, 0.02);
|
||||
--dsw-elevation-prominent:
|
||||
var(--dsw-elevation-stroke), 0 3px 8px 0 rgba(0, 0, 0, 0.04), 0 0 20px 0 rgba(0, 0, 0, 0.05);
|
||||
--dsw-elevation-soft:
|
||||
var(--dsw-elevation-stroke), 0 4px 16px 0 rgba(0, 0, 0, 0.03), 0 0 24px 0 rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
|
||||
body[data-ds-dark-theme] {
|
||||
--dsw-linear-gradient-think: linear-gradient(180deg, #151517 20.19%, rgba(21, 21, 23, 0) 100%);
|
||||
--dsw-linear-think-select: linear-gradient(180deg, #232325 20.19%, rgba(35, 35, 37, 0) 100%);
|
||||
}
|
||||
|
||||
/* ---------- 字体 ---------- */
|
||||
/* 由 @deepseek-figma-plugin/custom-variable-name 插件导出 */
|
||||
/* Markdown 阶梯整体按 0.875（正文 16 → 14）等比缩放，四舍五入到整数像素；
|
||||
重新从 Figma 导出时需要保留这一缩放。 */
|
||||
/* Bootstrap and ThemePresenter set the integer content size on body (10–22px,
|
||||
default 14px). Headings and body variants share its pixel delta. Secondary
|
||||
text uses size − 1 through 14px, then size − 2: 10→9, 14→13, 15→13, 22→20.
|
||||
max(13px, ...) selects the delta, not a font-size floor. Small typography keeps a
|
||||
fixed size; code typography follows the separate code size setting. */
|
||||
body {
|
||||
--dsh-content-font-delta: calc(var(--dsh-content-font-size, 14px) - 14px);
|
||||
--dsh-content-font-size-secondary: min(calc(var(--dsh-content-font-size, 14px) - 1px), max(13px, calc(var(--dsh-content-font-size, 14px) - 2px)));
|
||||
--dsh-content-font-delta-secondary: calc(var(--dsh-content-font-size-secondary) - 13px);
|
||||
/* Code size setting (--dsh-code-font-size, integer px 10–16, default 11)
|
||||
is the code-block size; inline code and the small tool variant move by
|
||||
the same increment. */
|
||||
--dsh-code-font-delta: calc(var(--dsh-code-font-size, 11px) - 11px);
|
||||
|
||||
--dsw-font-markdown-h1: 700 calc(21px + var(--dsh-content-font-delta)) / calc(30px + var(--dsh-content-font-delta)) var(--dsw-font-family);
|
||||
--dsw-font-markdown-h1-font-family: var(--dsw-font-family);
|
||||
--dsw-font-markdown-h1-font-weight: 700;
|
||||
--dsw-font-markdown-h1-line-height: calc(30px + var(--dsh-content-font-delta));
|
||||
--dsw-font-markdown-h1-font-size: calc(21px + var(--dsh-content-font-delta));
|
||||
--dsw-font-markdown-h1-font-style: normal;
|
||||
|
||||
--dsw-font-markdown-h2: 700 calc(19px + var(--dsh-content-font-delta)) / calc(28px + var(--dsh-content-font-delta)) var(--dsw-font-family);
|
||||
--dsw-font-markdown-h2-font-family: var(--dsw-font-family);
|
||||
--dsw-font-markdown-h2-font-weight: 700;
|
||||
--dsw-font-markdown-h2-line-height: calc(28px + var(--dsh-content-font-delta));
|
||||
--dsw-font-markdown-h2-font-size: calc(19px + var(--dsh-content-font-delta));
|
||||
--dsw-font-markdown-h2-font-style: normal;
|
||||
|
||||
--dsw-font-markdown-h3: 700 calc(18px + var(--dsh-content-font-delta)) / calc(26px + var(--dsh-content-font-delta)) var(--dsw-font-family);
|
||||
--dsw-font-markdown-h3-font-family: var(--dsw-font-family);
|
||||
--dsw-font-markdown-h3-font-weight: 700;
|
||||
--dsw-font-markdown-h3-line-height: calc(26px + var(--dsh-content-font-delta));
|
||||
--dsw-font-markdown-h3-font-size: calc(18px + var(--dsh-content-font-delta));
|
||||
--dsw-font-markdown-h3-font-style: normal;
|
||||
|
||||
--dsw-font-markdown-h4: 600 var(--dsh-content-font-size, 14px) / calc(24px + var(--dsh-content-font-delta)) var(--dsw-font-family);
|
||||
--dsw-font-markdown-h4-font-family: var(--dsw-font-family);
|
||||
--dsw-font-markdown-h4-font-weight: 600;
|
||||
--dsw-font-markdown-h4-line-height: calc(24px + var(--dsh-content-font-delta));
|
||||
--dsw-font-markdown-h4-font-size: var(--dsh-content-font-size, 14px);
|
||||
--dsw-font-markdown-h4-font-style: normal;
|
||||
|
||||
--dsw-font-markdown-base: var(--dsh-content-font-size, 14px) / calc(24px + var(--dsh-content-font-delta)) var(--dsw-font-family);
|
||||
--dsw-font-markdown-base-font-family: var(--dsw-font-family);
|
||||
--dsw-font-markdown-base-font-weight: 400;
|
||||
--dsw-font-markdown-base-line-height: calc(24px + var(--dsh-content-font-delta));
|
||||
--dsw-font-markdown-base-font-size: var(--dsh-content-font-size, 14px);
|
||||
--dsw-font-markdown-base-font-style: normal;
|
||||
|
||||
--dsw-font-markdown-base-strong: 600 var(--dsh-content-font-size, 14px) / calc(24px + var(--dsh-content-font-delta)) var(--dsw-font-family);
|
||||
--dsw-font-markdown-base-strong-font-family: var(--dsw-font-family);
|
||||
--dsw-font-markdown-base-strong-font-weight: 600;
|
||||
--dsw-font-markdown-base-strong-line-height: calc(24px + var(--dsh-content-font-delta));
|
||||
--dsw-font-markdown-base-strong-font-size: var(--dsh-content-font-size, 14px);
|
||||
--dsw-font-markdown-base-strong-font-style: normal;
|
||||
|
||||
--dsw-font-markdown-base-italic: italic var(--dsh-content-font-size, 14px) / calc(24px + var(--dsh-content-font-delta)) var(--dsw-font-family);
|
||||
--dsw-font-markdown-base-italic-font-family: var(--dsw-font-family);
|
||||
--dsw-font-markdown-base-italic-font-weight: 400;
|
||||
--dsw-font-markdown-base-italic-line-height: calc(24px + var(--dsh-content-font-delta));
|
||||
--dsw-font-markdown-base-italic-font-size: var(--dsh-content-font-size, 14px);
|
||||
--dsw-font-markdown-base-italic-font-style: italic;
|
||||
|
||||
--dsw-font-markdown-base-strong-italic: italic 600 var(--dsh-content-font-size, 14px) / calc(24px + var(--dsh-content-font-delta)) var(--dsw-font-family);
|
||||
--dsw-font-markdown-base-strong-italic-font-family: var(--dsw-font-family);
|
||||
--dsw-font-markdown-base-strong-italic-font-weight: 600;
|
||||
--dsw-font-markdown-base-strong-italic-line-height: calc(24px + var(--dsh-content-font-delta));
|
||||
--dsw-font-markdown-base-strong-italic-font-size: var(--dsh-content-font-size, 14px);
|
||||
--dsw-font-markdown-base-strong-italic-font-style: italic;
|
||||
|
||||
--dsw-font-markdown-table: var(--dsh-content-font-size-secondary, 13px)/calc(22px + var(--dsh-content-font-delta-secondary, 0px)) var(--dsw-font-family);
|
||||
--dsw-font-markdown-table-font-family: var(--dsw-font-family);
|
||||
--dsw-font-markdown-table-font-weight: 400;
|
||||
--dsw-font-markdown-table-line-height: calc(22px + var(--dsh-content-font-delta-secondary, 0px));
|
||||
--dsw-font-markdown-table-font-size: var(--dsh-content-font-size-secondary, 13px);
|
||||
--dsw-font-markdown-table-font-style: normal;
|
||||
|
||||
--dsw-font-markdown-table-head: 500 var(--dsh-content-font-size-secondary, 13px)/calc(22px + var(--dsh-content-font-delta-secondary, 0px)) var(--dsw-font-family);
|
||||
--dsw-font-markdown-table-head-font-family: var(--dsw-font-family);
|
||||
--dsw-font-markdown-table-head-font-weight: 500;
|
||||
--dsw-font-markdown-table-head-line-height: calc(22px + var(--dsh-content-font-delta-secondary, 0px));
|
||||
--dsw-font-markdown-table-head-font-size: var(--dsh-content-font-size-secondary, 13px);
|
||||
--dsw-font-markdown-table-head-font-style: normal;
|
||||
|
||||
--dsw-font-markdown-small: 12px/20px var(--dsw-font-family);
|
||||
--dsw-font-markdown-small-font-family: var(--dsw-font-family);
|
||||
--dsw-font-markdown-small-font-weight: 400;
|
||||
--dsw-font-markdown-small-line-height: 20px;
|
||||
--dsw-font-markdown-small-font-size: 12px;
|
||||
--dsw-font-markdown-small-font-style: normal;
|
||||
|
||||
--dsw-font-markdown-small-strong: 600 12px/20px var(--dsw-font-family);
|
||||
--dsw-font-markdown-small-strong-font-family: var(--dsw-font-family);
|
||||
--dsw-font-markdown-small-strong-font-weight: 600;
|
||||
--dsw-font-markdown-small-strong-line-height: 20px;
|
||||
--dsw-font-markdown-small-strong-font-size: 12px;
|
||||
--dsw-font-markdown-small-strong-font-style: normal;
|
||||
|
||||
--dsw-font-markdown-small-italic: italic 12px/20px var(--dsw-font-family);
|
||||
--dsw-font-markdown-small-italic-font-family: var(--dsw-font-family);
|
||||
--dsw-font-markdown-small-italic-font-weight: 400;
|
||||
--dsw-font-markdown-small-italic-line-height: 20px;
|
||||
--dsw-font-markdown-small-italic-font-size: 12px;
|
||||
--dsw-font-markdown-small-italic-font-style: italic;
|
||||
|
||||
--dsw-font-markdown-small-strong-italic: italic 600 12px/20px var(--dsw-font-family);
|
||||
--dsw-font-markdown-small-strong-italic-font-family: var(--dsw-font-family);
|
||||
--dsw-font-markdown-small-strong-italic-font-weight: 600;
|
||||
--dsw-font-markdown-small-strong-italic-line-height: 20px;
|
||||
--dsw-font-markdown-small-strong-italic-font-size: 12px;
|
||||
--dsw-font-markdown-small-strong-italic-font-style: italic;
|
||||
|
||||
--dsw-font-markdown-code: calc(12px + var(--dsh-code-font-delta)) / calc(19px + var(--dsh-code-font-delta)) var(--ds-font-family-code);
|
||||
--dsw-font-markdown-code-font-family: var(--ds-font-family-code);
|
||||
--dsw-font-markdown-code-font-weight: 400;
|
||||
--dsw-font-markdown-code-line-height: calc(19px + var(--dsh-code-font-delta));
|
||||
--dsw-font-markdown-code-font-size: calc(12px + var(--dsh-code-font-delta));
|
||||
--dsw-font-markdown-code-font-style: normal;
|
||||
|
||||
--dsw-font-markdown-code-block: var(--dsh-code-font-size, 11px) / calc(19px + var(--dsh-code-font-delta)) var(--ds-font-family-code);
|
||||
--dsw-font-markdown-code-block-font-family: var(--ds-font-family-code);
|
||||
--dsw-font-markdown-code-block-font-weight: 400;
|
||||
--dsw-font-markdown-code-block-line-height: calc(19px + var(--dsh-code-font-delta));
|
||||
--dsw-font-markdown-code-block-font-size: var(--dsh-code-font-size, 11px);
|
||||
--dsw-font-markdown-code-block-font-style: normal;
|
||||
|
||||
/* 手工补充（非插件导出）：tool row 展开卡片内的小号 code 字体。 */
|
||||
--dsw-font-markdown-code-block-small: var(--dsh-code-font-size, 11px) / calc(16px + var(--dsh-code-font-delta)) var(--ds-font-family-code);
|
||||
--dsw-font-markdown-code-block-small-font-family: var(--ds-font-family-code);
|
||||
--dsw-font-markdown-code-block-small-font-weight: 400;
|
||||
--dsw-font-markdown-code-block-small-line-height: calc(16px + var(--dsh-code-font-delta));
|
||||
--dsw-font-markdown-code-block-small-font-size: var(--dsh-code-font-size, 11px);
|
||||
--dsw-font-markdown-code-block-small-font-style: normal;
|
||||
|
||||
--dsw-font-xl-24: 600 24px/32px var(--dsw-font-family);
|
||||
--dsw-font-xl-24-font-family: var(--dsw-font-family);
|
||||
--dsw-font-xl-24-font-weight: 600;
|
||||
--dsw-font-xl-24-line-height: 32px;
|
||||
--dsw-font-xl-24-font-size: 24px;
|
||||
--dsw-font-xl-24-font-style: normal;
|
||||
|
||||
--dsw-font-l-20: 500 20px/28px var(--dsw-font-family);
|
||||
--dsw-font-l-20-font-family: var(--dsw-font-family);
|
||||
--dsw-font-l-20-font-weight: 500;
|
||||
--dsw-font-l-20-line-height: 28px;
|
||||
--dsw-font-l-20-font-size: 20px;
|
||||
--dsw-font-l-20-font-style: normal;
|
||||
|
||||
--dsw-font-m-18: 500 16px/28px var(--dsw-font-family);
|
||||
--dsw-font-m-18-font-family: var(--dsw-font-family);
|
||||
--dsw-font-m-18-font-weight: 500;
|
||||
--dsw-font-m-18-line-height: 28px;
|
||||
--dsw-font-m-18-font-size: 16px;
|
||||
--dsw-font-m-18-font-style: normal;
|
||||
|
||||
--dsw-font-base-16: 16px/24px var(--dsw-font-family);
|
||||
--dsw-font-base-16-font-family: var(--dsw-font-family);
|
||||
--dsw-font-base-16-font-weight: 400;
|
||||
--dsw-font-base-16-line-height: 24px;
|
||||
--dsw-font-base-16-font-size: 16px;
|
||||
--dsw-font-base-16-font-style: normal;
|
||||
|
||||
--dsw-font-base-strong-16: 500 16px/24px var(--dsw-font-family);
|
||||
--dsw-font-base-strong-16-font-family: var(--dsw-font-family);
|
||||
--dsw-font-base-strong-16-font-weight: 500;
|
||||
--dsw-font-base-strong-16-line-height: 24px;
|
||||
--dsw-font-base-strong-16-font-size: 16px;
|
||||
--dsw-font-base-strong-16-font-style: normal;
|
||||
|
||||
--dsw-font-s-14: 14px/22px var(--dsw-font-family);
|
||||
--dsw-font-s-14-font-family: var(--dsw-font-family);
|
||||
--dsw-font-s-14-font-weight: 400;
|
||||
--dsw-font-s-14-line-height: 22px;
|
||||
--dsw-font-s-14-font-size: 14px;
|
||||
--dsw-font-s-14-font-style: normal;
|
||||
|
||||
--dsw-font-s-strong-14: 500 14px/22px var(--dsw-font-family);
|
||||
--dsw-font-s-strong-14-font-family: var(--dsw-font-family);
|
||||
--dsw-font-s-strong-14-font-weight: 500;
|
||||
--dsw-font-s-strong-14-line-height: 22px;
|
||||
--dsw-font-s-strong-14-font-size: 14px;
|
||||
--dsw-font-s-strong-14-font-style: normal;
|
||||
|
||||
--dsw-font-xs-13: 13px/20px var(--dsw-font-family);
|
||||
--dsw-font-xs-13-font-family: var(--dsw-font-family);
|
||||
--dsw-font-xs-13-font-weight: 400;
|
||||
--dsw-font-xs-13-line-height: 20px;
|
||||
--dsw-font-xs-13-font-size: 13px;
|
||||
--dsw-font-xs-13-font-style: normal;
|
||||
|
||||
--dsw-font-xs-strong-13: 500 13px/20px var(--dsw-font-family);
|
||||
--dsw-font-xs-strong-13-font-family: var(--dsw-font-family);
|
||||
--dsw-font-xs-strong-13-font-weight: 500;
|
||||
--dsw-font-xs-strong-13-line-height: 20px;
|
||||
--dsw-font-xs-strong-13-font-size: 13px;
|
||||
--dsw-font-xs-strong-13-font-style: normal;
|
||||
|
||||
--dsw-font-xxs-12: 12px/18px var(--dsw-font-family);
|
||||
--dsw-font-xxs-12-font-family: var(--dsw-font-family);
|
||||
--dsw-font-xxs-12-font-weight: 400;
|
||||
--dsw-font-xxs-12-line-height: 18px;
|
||||
--dsw-font-xxs-12-font-size: 12px;
|
||||
--dsw-font-xxs-12-font-style: normal;
|
||||
|
||||
--dsw-font-xxs-strong-12: 500 12px/18px var(--dsw-font-family);
|
||||
--dsw-font-xxs-strong-12-font-family: var(--dsw-font-family);
|
||||
--dsw-font-xxs-strong-12-font-weight: 500;
|
||||
--dsw-font-xxs-strong-12-line-height: 18px;
|
||||
--dsw-font-xxs-strong-12-font-size: 12px;
|
||||
--dsw-font-xxs-strong-12-font-style: normal;
|
||||
|
||||
--dsw-font-xxxs-11: 11px/14px var(--dsw-font-family);
|
||||
--dsw-font-xxxs-11-font-family: var(--dsw-font-family);
|
||||
--dsw-font-xxxs-11-font-weight: 400;
|
||||
--dsw-font-xxxs-11-line-height: 14px;
|
||||
--dsw-font-xxxs-11-font-size: 11px;
|
||||
--dsw-font-xxxs-11-font-style: normal;
|
||||
|
||||
--dsw-font-xxxs-strong-11: 500 11px/14px var(--dsw-font-family);
|
||||
--dsw-font-xxxs-strong-11-font-family: var(--dsw-font-family);
|
||||
--dsw-font-xxxs-strong-11-font-weight: 500;
|
||||
--dsw-font-xxxs-strong-11-line-height: 14px;
|
||||
--dsw-font-xxxs-strong-11-font-size: 11px;
|
||||
--dsw-font-xxxs-strong-11-font-style: normal;
|
||||
}
|
||||
@@ -0,0 +1,97 @@
|
||||
/* Scrollbar skin: the sole consumer of the four --dsw-alias-scrollbar-*
|
||||
* tokens. Without it every scrolling region renders the UA scrollbar, which
|
||||
* ignores the theme — a light native bar over the dark palette.
|
||||
*
|
||||
* The rules sit on `body`, not `html`: design-platform.css declares the
|
||||
* --dsw-alias-* tokens on `body` (and the dark overrides on
|
||||
* `body[data-ds-dark-theme]`), and custom properties only inherit downward,
|
||||
* so an `html` rule resolves them to the guaranteed-invalid value and
|
||||
* `scrollbar-color` falls back to `auto`.
|
||||
*
|
||||
* Surfaces pick their elevation by rebinding --dsh-scrollbar-thumb{,-hover}:
|
||||
* the l1 pair here is the base-surface default, and an elevated surface
|
||||
* (menu, popover, dialog) rebinds to the l2 pair on its own container. A
|
||||
* scroll container may also rebind the three geometry variables below. */
|
||||
|
||||
body {
|
||||
--dsh-scrollbar-thumb: var(--dsw-alias-scrollbar-bg-l1);
|
||||
--dsh-scrollbar-thumb-hover: var(--dsw-alias-scrollbar-hover-l1);
|
||||
--dsh-scrollbar-thumb-border: 0px;
|
||||
--dsh-scrollbar-track-margin: 0px;
|
||||
/* The WebKit bar's layout width, mirrored by the ::-webkit-scrollbar rule
|
||||
below. A surface that must align itself beside a space-consuming bar
|
||||
(ConversationRoot's overlay composer seat) reads this instead of
|
||||
hardcoding the number. */
|
||||
--dsh-scrollbar-width: 5px;
|
||||
}
|
||||
|
||||
/* The two paths are mutually exclusive, and the gate is load-bearing rather
|
||||
than defensive. A non-`auto` `scrollbar-width` or `scrollbar-color` makes
|
||||
Chromium and Safari drop every `::-webkit-scrollbar*` rule for that
|
||||
element, including `::-webkit-scrollbar-thumb:hover` — measured in chromium
|
||||
as a `::-webkit-scrollbar` width taking effect on its own and being
|
||||
ignored as soon as `scrollbar-width: thin` is added. Declaring both
|
||||
unconditionally therefore leaves the hover tokens with no rendering at all,
|
||||
because the engines that implement the hover pseudo-element are exactly the
|
||||
ones the standard properties silence, and Firefox has no hover
|
||||
pseudo-element to fall back on.
|
||||
|
||||
`not selector(::-webkit-scrollbar)` is true only where the pseudo-element
|
||||
is unimplemented, so Firefox takes the standard path and WebKit-based
|
||||
engines take the pseudo-element path. An engine too old for the
|
||||
`selector()` function makes the condition invalid, which evaluates false
|
||||
and selects the pseudo-element path — the correct side for the pre-16.4
|
||||
Safari that is the realistic case. */
|
||||
@supports not selector(::-webkit-scrollbar) {
|
||||
/* Declared on every element rather than inherited from `body`. Inheriting
|
||||
would pass down the COLOUR already substituted at `body`, so a descendant
|
||||
rebinding --dsh-scrollbar-thumb could not change it; re-declaring makes
|
||||
each element substitute the variable as it sees it, which is what gives
|
||||
an elevated surface a working rebind. `scrollbar-width` is not an
|
||||
inherited property at all, so it needs the per-element declaration
|
||||
regardless.
|
||||
|
||||
No hover counterpart exists on this path: `scrollbar-color` states one
|
||||
thumb colour and the engine derives its own hover treatment. */
|
||||
body,
|
||||
body * {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--dsh-scrollbar-thumb) transparent;
|
||||
}
|
||||
}
|
||||
|
||||
/* Not gated in turn: an engine that does not implement these pseudo-elements
|
||||
drops the rules as unknown selectors, so the gate would only restate what
|
||||
selector matching already does. Not inherited either, hence the unscoped
|
||||
selectors. */
|
||||
::-webkit-scrollbar {
|
||||
width: var(--dsh-scrollbar-width);
|
||||
height: var(--dsh-scrollbar-width);
|
||||
}
|
||||
|
||||
/* Track stays transparent so the thumb reads against whatever surface scrolls
|
||||
under it; only the thumb carries a token colour. */
|
||||
::-webkit-scrollbar-track {
|
||||
margin-block: var(--dsh-scrollbar-track-margin);
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
border: var(--dsh-scrollbar-thumb-border) solid transparent;
|
||||
border-radius: 999px;
|
||||
corner-shape: round;
|
||||
background: var(--dsh-scrollbar-thumb);
|
||||
background-clip: content-box;
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background-color: var(--dsh-scrollbar-thumb-hover);
|
||||
}
|
||||
}
|
||||
|
||||
/* Both scrollbars meeting in a corner: no separate token, so the corner
|
||||
matches the transparent track rather than the UA's opaque default. */
|
||||
::-webkit-scrollbar-corner {
|
||||
background: transparent;
|
||||
}
|
||||
Reference in New Issue
Block a user