@deernova/style 0.2.0 → 0.3.0

package/skill/assets/tokens.css

@@ -0,0 +1,533 @@
+/* Generated from tokens.json by `npm run tokens`. Do not edit by hand.
+ *
+ * 主题：浅色是默认值；系统切到深色时自动换成深色。在 <html> 或任何元素上设置
+ *   data-theme="light" / "dark" 可以强制指定，去掉属性就跟随系统。
+ * 密度：默认 desktop（Web 应用）；触屏设备（pointer: coarse）自动换成 touch。在 <html> 或任何元素上设置
+ *   data-density="desktop" / "touch" / "comfortable" 可以强制指定。
+ */
+
+:root,
+[data-theme="light"] {
+  color-scheme: light;
+  --canvas: #f5f5f5;
+  --surface: #fafafa;
+  --surface-raised: #ffffff;
+  --surface-sunken: #ebebeb;
+  --ink: #171717;
+  --ink-secondary: #525252;
+  --ink-tertiary: #666666;
+  --line: #e3e3e3;
+  --line-control: #8a8a8a;
+  --accent: var(--ink);
+  --accent-soft: #e8e8e8;
+  --on-accent: #ffffff;
+  --focus-ring: var(--accent);
+  --success: #1f6b66;
+  --success-soft: #ddeeec;
+  --warning: #8a5a0b;
+  --warning-soft: #f5ead3;
+  --danger: #b0283f;
+  --danger-soft: #f7e1e4;
+  --info: #2c5f86;
+  --info-soft: #e1ebf3;
+  --fill-hover: #0000000a;
+  --fill-selected: #00000017;
+  --knob: #ffffff;
+  --scrim: #00000052;
+  --glass-fill: #ffffffa6;
+  --glass-stroke: #ffffffcc;
+  --shadow-control: 0 1px 1px rgba(0, 0, 0, 0.05);
+  --shadow-float: 0 1px 2px rgba(0, 0, 0, 0.05), 0 6px 20px rgba(0, 0, 0, 0.08);
+  --shadow-glass: 0 4px 14px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.70);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    color-scheme: dark;
+    --canvas: #171717;
+    --surface: #1c1c1c;
+    --surface-raised: #252525;
+    --surface-sunken: #111111;
+    --ink: #ededed;
+    --ink-secondary: #a3a3a3;
+    --ink-tertiary: #8c8c8c;
+    --line: #2f2f2f;
+    --line-control: #737373;
+    --accent: var(--ink);
+    --accent-soft: #2f2f2f;
+    --on-accent: #171717;
+    --focus-ring: var(--accent);
+    --success: #6cc3b4;
+    --success-soft: #183230;
+    --warning: #e2b054;
+    --warning-soft: #3a2e17;
+    --danger: #f07a8a;
+    --danger-soft: #3d2027;
+    --info: #82b4dc;
+    --info-soft: #1d2c3a;
+    --fill-hover: #ffffff0f;
+    --fill-selected: #ffffff26;
+    --knob: #ffffff;
+    --scrim: #00000080;
+    --glass-fill: #2a2a2aa6;
+    --glass-stroke: #ffffff24;
+    --shadow-control: 0 1px 1px rgba(0, 0, 0, 0.30);
+    --shadow-float: 0 1px 2px rgba(0, 0, 0, 0.40), 0 6px 20px rgba(0, 0, 0, 0.45);
+    --shadow-glass: 0 4px 14px rgba(0, 0, 0, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.10);
+  }
+}
+
+[data-theme="dark"] {
+  color-scheme: dark;
+  --canvas: #171717;
+  --surface: #1c1c1c;
+  --surface-raised: #252525;
+  --surface-sunken: #111111;
+  --ink: #ededed;
+  --ink-secondary: #a3a3a3;
+  --ink-tertiary: #8c8c8c;
+  --line: #2f2f2f;
+  --line-control: #737373;
+  --accent: var(--ink);
+  --accent-soft: #2f2f2f;
+  --on-accent: #171717;
+  --focus-ring: var(--accent);
+  --success: #6cc3b4;
+  --success-soft: #183230;
+  --warning: #e2b054;
+  --warning-soft: #3a2e17;
+  --danger: #f07a8a;
+  --danger-soft: #3d2027;
+  --info: #82b4dc;
+  --info-soft: #1d2c3a;
+  --fill-hover: #ffffff0f;
+  --fill-selected: #ffffff26;
+  --knob: #ffffff;
+  --scrim: #00000080;
+  --glass-fill: #2a2a2aa6;
+  --glass-stroke: #ffffff24;
+  --shadow-control: 0 1px 1px rgba(0, 0, 0, 0.30);
+  --shadow-float: 0 1px 2px rgba(0, 0, 0, 0.40), 0 6px 20px rgba(0, 0, 0, 0.45);
+  --shadow-glass: 0 4px 14px rgba(0, 0, 0, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.10);
+}
+
+:root {
+  --font-serif: ui-serif, "New York", "Iowan Old Style", Georgia, "PingFang SC", serif;
+  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Hiragino Sans GB", system-ui, sans-serif;
+  --font-mono: ui-monospace, "SF Mono", Menlo, "PingFang SC", monospace;
+  --weight-regular: 400;
+  --weight-medium: 500;
+  --weight-semibold: 600;
+  --type-display-tracking: -0.01em;
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 20px;
+  --space-6: 24px;
+  --space-8: 32px;
+  --space-10: 40px;
+  --space-12: 48px;
+  --space-16: 64px;
+  --radius-xs: 4px;
+  --radius-sm: 6px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --radius-xl: 24px;
+  --radius-full: 999px;
+  --stroke-line: 1px;
+  --stroke-control: 1px;
+  --stroke-focus: 2px;
+  --focus-offset: 2px;
+  --line-style-divider: solid;
+  --line-style-dropzone: dashed;
+  --line-dash: 4 4;
+  --line-cap: round;
+  --line-join: round;
+  --z-sticky: 10;
+  --z-dropdown: 100;
+  --z-overlay: 1000;
+  --z-toast: 1100;
+  --duration-instant: 120ms;
+  --duration-base: 200ms;
+  --duration-slow: 320ms;
+  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
+  --opacity-disabled: 0.35;
+  --opacity-solid-hover: 0.88;
+  --glass-blur: 16px;
+  --glass-saturate: 1.4;
+  --content-max: 680px;
+  --icon-stroke: 1.75px;
+}
+
+:root,
+[data-density="desktop"] {
+  --type-display-size: 26px;
+  --type-display-line: 32px;
+  --type-display: 600 26px/32px var(--font-serif);
+  --type-title-size: 18px;
+  --type-title-line: 24px;
+  --type-title: 600 18px/24px var(--font-serif);
+  --type-headline-size: 15px;
+  --type-headline-line: 22px;
+  --type-headline: 600 15px/22px var(--font-sans);
+  --type-body-size: 15px;
+  --type-body-line: 24px;
+  --type-body: 400 15px/24px var(--font-sans);
+  --type-prose-size: 16px;
+  --type-prose-line: 26px;
+  --type-prose: 400 16px/26px var(--font-serif);
+  --type-callout-size: 14px;
+  --type-callout-line: 20px;
+  --type-callout: 400 14px/20px var(--font-sans);
+  --type-footnote-size: 13px;
+  --type-footnote-line: 18px;
+  --type-footnote: 400 13px/18px var(--font-sans);
+  --type-caption-size: 12px;
+  --type-caption-line: 16px;
+  --type-caption: 400 12px/16px var(--font-sans);
+  --type-code-size: 13px;
+  --type-code-line: 20px;
+  --type-code: 400 13px/20px var(--font-mono);
+  --gap-inline: 6px;
+  --gap-stack: 8px;
+  --gap-group: 24px;
+  --page-margin: 32px;
+  --hit-min: 24px;
+  --sidebar-width: 288px;
+  --toolbar-height: 44px;
+  --button-height-sm: 24px;
+  --button-height-md: 28px;
+  --button-height-lg: 32px;
+  --button-padding-x-sm: 8px;
+  --button-padding-x-md: 12px;
+  --button-padding-x-lg: 16px;
+  --button-font-size-sm: 12px;
+  --button-font-size-md: 14px;
+  --button-font-size-lg: 14px;
+  --button-font-weight: 500;
+  --button-radius: 6px;
+  --button-radius-sm: 4px;
+  --toolbar-title-size: 15px;
+  --panel-tab-height: 28px;
+  --glass-button-size: 34px;
+  --segmented-height: 24px;
+  --segmented-padding: 2px;
+  --segmented-padding-x: 12px;
+  --segmented-font-size: 13px;
+  --segmented-radius: 6px;
+  --field-height: 28px;
+  --field-padding-x: 10px;
+  --field-font-size: 14px;
+  --field-radius: 6px;
+  --composer-radius: 14px;
+  --composer-min-height: 44px;
+  --row-height: 32px;
+  --row-padding-x: 10px;
+  --row-radius: 8px;
+  --row-gap: 2px;
+  --row-icon-size: 20px;
+  --switch-width: 36px;
+  --switch-height: 20px;
+  --card-padding-x: 16px;
+  --card-padding-y: 12px;
+  --card-radius: 12px;
+  --card-gap: 12px;
+  --tag-height: 20px;
+  --tag-padding-x: 6px;
+  --tag-font-size: 12px;
+  --tag-radius: 4px;
+  --code-header-height: 32px;
+  --task-row-height: 28px;
+  --task-glyph-size: 16px;
+  --empty-title-size: 24px;
+  --empty-icon-size: 32px;
+  --toast-height: 36px;
+  --banner-radius: 10px;
+  --sheet-radius: 12px;
+  --menu-radius: 8px;
+  --message-font-size: 15px;
+  --message-action-size: 24px;
+  --icon-size-sm: 14px;
+  --icon-size-md: 16px;
+  --icon-size-lg: 20px;
+}
+
+@media (pointer: coarse) {
+  :root:not([data-density]) {
+    --type-display-size: 30px;
+    --type-display-line: 36px;
+    --type-display: 600 30px/36px var(--font-serif);
+    --type-title-size: 20px;
+    --type-title-line: 25px;
+    --type-title: 600 20px/25px var(--font-serif);
+    --type-headline-size: 17px;
+    --type-headline-line: 22px;
+    --type-headline: 600 17px/22px var(--font-sans);
+    --type-body-size: 17px;
+    --type-body-line: 23px;
+    --type-body: 400 17px/23px var(--font-sans);
+    --type-prose-size: 17px;
+    --type-prose-line: 26px;
+    --type-prose: 400 17px/26px var(--font-serif);
+    --type-callout-size: 15px;
+    --type-callout-line: 20px;
+    --type-callout: 400 15px/20px var(--font-sans);
+    --type-footnote-size: 13px;
+    --type-footnote-line: 17px;
+    --type-footnote: 400 13px/17px var(--font-sans);
+    --type-caption-size: 12px;
+    --type-caption-line: 15px;
+    --type-caption: 400 12px/15px var(--font-sans);
+    --type-code-size: 13px;
+    --type-code-line: 18px;
+    --type-code: 400 13px/18px var(--font-mono);
+    --gap-inline: 6px;
+    --gap-stack: 8px;
+    --gap-group: 20px;
+    --page-margin: 16px;
+    --hit-min: 44px;
+    --sidebar-width: 320px;
+    --toolbar-height: 44px;
+    --button-height-sm: 30px;
+    --button-height-md: 36px;
+    --button-height-lg: 46px;
+    --button-padding-x-sm: 12px;
+    --button-padding-x-md: 16px;
+    --button-padding-x-lg: 20px;
+    --button-font-size-sm: 13px;
+    --button-font-size-md: 15px;
+    --button-font-size-lg: 16px;
+    --button-font-weight: 600;
+    --button-radius: 999px;
+    --button-radius-sm: 999px;
+    --toolbar-title-size: 17px;
+    --panel-tab-height: 36px;
+    --glass-button-size: 44px;
+    --segmented-height: 28px;
+    --segmented-padding: 2px;
+    --segmented-padding-x: 16px;
+    --segmented-font-size: 14px;
+    --segmented-radius: 999px;
+    --field-height: 44px;
+    --field-padding-x: 12px;
+    --field-font-size: 17px;
+    --field-radius: 8px;
+    --composer-radius: 24px;
+    --composer-min-height: 44px;
+    --row-height: 44px;
+    --row-padding-x: 16px;
+    --row-radius: 10px;
+    --row-gap: 0px;
+    --row-icon-size: 28px;
+    --switch-width: 51px;
+    --switch-height: 31px;
+    --card-padding-x: 16px;
+    --card-padding-y: 14px;
+    --card-radius: 12px;
+    --card-gap: 12px;
+    --tag-height: 22px;
+    --tag-padding-x: 8px;
+    --tag-font-size: 12px;
+    --tag-radius: 999px;
+    --code-header-height: 36px;
+    --task-row-height: 44px;
+    --task-glyph-size: 20px;
+    --empty-title-size: 20px;
+    --empty-icon-size: 36px;
+    --toast-height: 40px;
+    --banner-radius: 12px;
+    --sheet-radius: 24px;
+    --menu-radius: 12px;
+    --message-font-size: 15px;
+    --message-action-size: 32px;
+    --icon-size-sm: 17px;
+    --icon-size-md: 20px;
+    --icon-size-lg: 24px;
+  }
+}
+
+[data-density="touch"] {
+  --type-display-size: 30px;
+  --type-display-line: 36px;
+  --type-display: 600 30px/36px var(--font-serif);
+  --type-title-size: 20px;
+  --type-title-line: 25px;
+  --type-title: 600 20px/25px var(--font-serif);
+  --type-headline-size: 17px;
+  --type-headline-line: 22px;
+  --type-headline: 600 17px/22px var(--font-sans);
+  --type-body-size: 17px;
+  --type-body-line: 23px;
+  --type-body: 400 17px/23px var(--font-sans);
+  --type-prose-size: 17px;
+  --type-prose-line: 26px;
+  --type-prose: 400 17px/26px var(--font-serif);
+  --type-callout-size: 15px;
+  --type-callout-line: 20px;
+  --type-callout: 400 15px/20px var(--font-sans);
+  --type-footnote-size: 13px;
+  --type-footnote-line: 17px;
+  --type-footnote: 400 13px/17px var(--font-sans);
+  --type-caption-size: 12px;
+  --type-caption-line: 15px;
+  --type-caption: 400 12px/15px var(--font-sans);
+  --type-code-size: 13px;
+  --type-code-line: 18px;
+  --type-code: 400 13px/18px var(--font-mono);
+  --gap-inline: 6px;
+  --gap-stack: 8px;
+  --gap-group: 20px;
+  --page-margin: 16px;
+  --hit-min: 44px;
+  --sidebar-width: 320px;
+  --toolbar-height: 44px;
+  --button-height-sm: 30px;
+  --button-height-md: 36px;
+  --button-height-lg: 46px;
+  --button-padding-x-sm: 12px;
+  --button-padding-x-md: 16px;
+  --button-padding-x-lg: 20px;
+  --button-font-size-sm: 13px;
+  --button-font-size-md: 15px;
+  --button-font-size-lg: 16px;
+  --button-font-weight: 600;
+  --button-radius: 999px;
+  --button-radius-sm: 999px;
+  --toolbar-title-size: 17px;
+  --panel-tab-height: 36px;
+  --glass-button-size: 44px;
+  --segmented-height: 28px;
+  --segmented-padding: 2px;
+  --segmented-padding-x: 16px;
+  --segmented-font-size: 14px;
+  --segmented-radius: 999px;
+  --field-height: 44px;
+  --field-padding-x: 12px;
+  --field-font-size: 17px;
+  --field-radius: 8px;
+  --composer-radius: 24px;
+  --composer-min-height: 44px;
+  --row-height: 44px;
+  --row-padding-x: 16px;
+  --row-radius: 10px;
+  --row-gap: 0px;
+  --row-icon-size: 28px;
+  --switch-width: 51px;
+  --switch-height: 31px;
+  --card-padding-x: 16px;
+  --card-padding-y: 14px;
+  --card-radius: 12px;
+  --card-gap: 12px;
+  --tag-height: 22px;
+  --tag-padding-x: 8px;
+  --tag-font-size: 12px;
+  --tag-radius: 999px;
+  --code-header-height: 36px;
+  --task-row-height: 44px;
+  --task-glyph-size: 20px;
+  --empty-title-size: 20px;
+  --empty-icon-size: 36px;
+  --toast-height: 40px;
+  --banner-radius: 12px;
+  --sheet-radius: 24px;
+  --menu-radius: 12px;
+  --message-font-size: 15px;
+  --message-action-size: 32px;
+  --icon-size-sm: 17px;
+  --icon-size-md: 20px;
+  --icon-size-lg: 24px;
+}
+
+[data-density="comfortable"] {
+  --type-display-size: 44px;
+  --type-display-line: 52px;
+  --type-display: 600 44px/52px var(--font-serif);
+  --type-title-size: 24px;
+  --type-title-line: 32px;
+  --type-title: 600 24px/32px var(--font-serif);
+  --type-headline-size: 16px;
+  --type-headline-line: 24px;
+  --type-headline: 600 16px/24px var(--font-sans);
+  --type-body-size: 15px;
+  --type-body-line: 24px;
+  --type-body: 400 15px/24px var(--font-sans);
+  --type-prose-size: 17px;
+  --type-prose-line: 28px;
+  --type-prose: 400 17px/28px var(--font-serif);
+  --type-callout-size: 14px;
+  --type-callout-line: 22px;
+  --type-callout: 400 14px/22px var(--font-sans);
+  --type-footnote-size: 13px;
+  --type-footnote-line: 20px;
+  --type-footnote: 400 13px/20px var(--font-sans);
+  --type-caption-size: 12px;
+  --type-caption-line: 16px;
+  --type-caption: 400 12px/16px var(--font-sans);
+  --type-code-size: 13px;
+  --type-code-line: 20px;
+  --type-code: 400 13px/20px var(--font-mono);
+  --gap-inline: 8px;
+  --gap-stack: 12px;
+  --gap-group: 48px;
+  --page-margin: 32px;
+  --hit-min: 24px;
+  --sidebar-width: 260px;
+  --toolbar-height: 52px;
+  --button-height-sm: 32px;
+  --button-height-md: 36px;
+  --button-height-lg: 44px;
+  --button-padding-x-sm: 14px;
+  --button-padding-x-md: 18px;
+  --button-padding-x-lg: 24px;
+  --button-font-size-sm: 13px;
+  --button-font-size-md: 14px;
+  --button-font-size-lg: 15px;
+  --button-font-weight: 500;
+  --button-radius: 999px;
+  --button-radius-sm: 999px;
+  --toolbar-title-size: 15px;
+  --panel-tab-height: 32px;
+  --glass-button-size: 36px;
+  --segmented-height: 28px;
+  --segmented-padding: 2px;
+  --segmented-padding-x: 16px;
+  --segmented-font-size: 14px;
+  --segmented-radius: 999px;
+  --field-height: 40px;
+  --field-padding-x: 14px;
+  --field-font-size: 15px;
+  --field-radius: 8px;
+  --composer-radius: 16px;
+  --composer-min-height: 48px;
+  --row-height: 40px;
+  --row-padding-x: 12px;
+  --row-radius: 8px;
+  --row-gap: 2px;
+  --row-icon-size: 24px;
+  --switch-width: 44px;
+  --switch-height: 24px;
+  --card-padding-x: 24px;
+  --card-padding-y: 24px;
+  --card-radius: 12px;
+  --card-gap: 16px;
+  --tag-height: 24px;
+  --tag-padding-x: 10px;
+  --tag-font-size: 12px;
+  --tag-radius: 999px;
+  --code-header-height: 36px;
+  --task-row-height: 32px;
+  --task-glyph-size: 18px;
+  --empty-title-size: 32px;
+  --empty-icon-size: 40px;
+  --toast-height: 40px;
+  --banner-radius: 12px;
+  --sheet-radius: 16px;
+  --menu-radius: 12px;
+  --message-font-size: 15px;
+  --message-action-size: 28px;
+  --icon-size-sm: 16px;
+  --icon-size-md: 18px;
+  --icon-size-lg: 24px;
+}
+