@lemoncat7/dsh-theme-xiaohei 0.3.0-alpha.22

package/lib/chrome/sidebar.js

@@ -0,0 +1,305 @@
+/** One glass surface over DSH's native sidebar geometry and controls. */
+export const XIAOHEI_SIDEBAR_CSS = `
+/* The layout column and SidebarRoot both consume the native sidebar fill.
+ * The theme token makes those surfaces transparent; this stable slot
+ * relationship removes the layout column's remaining straight divider. */
+#root :has(> [data-slot='sidebar']) {
+  background: transparent !important;
+  border-right-color: transparent !important;
+}
+
+#root [data-slot='sidebar'] {
+  position: relative;
+}
+
+/* The host shell remains paint- and filter-free because Settings is a fixed
+ * descendant. The glass itself lives outside #root in the scene layer. */
+#root [data-slot='sidebar'] > div {
+  position: relative;
+  background: transparent !important;
+  border-right: 0;
+  box-shadow: none;
+}
+
+#dsh-theme-xiaohei\\/sidebar-glass {
+  position: absolute;
+  box-sizing: border-box;
+  left: var(--xiaohei-sidebar-glass-left, 7px);
+  top: var(--xiaohei-sidebar-glass-top, 8px);
+  width: var(--xiaohei-sidebar-glass-width, 0px);
+  height: var(--xiaohei-sidebar-glass-height, 0px);
+  pointer-events: none;
+  overflow: hidden;
+  border: 1px solid var(--xiaohei-sidebar-glass-edge);
+  border-radius: var(--xiaohei-radius-panel);
+  background:
+    radial-gradient(96% 16% at 14% 0%, var(--xiaohei-sidebar-glass-highlight), transparent 64%),
+    linear-gradient(
+      90deg,
+      var(--xiaohei-sidebar-glass-refraction),
+      transparent 6%,
+      transparent 95%,
+      var(--xiaohei-sidebar-glass-inner-edge)
+    ),
+    linear-gradient(
+      180deg,
+      var(--xiaohei-sidebar-glass-refraction),
+      transparent 9%,
+      transparent 88%,
+      var(--xiaohei-sidebar-glass-inner-edge)
+    ),
+    var(--xiaohei-sidebar-glass-fill);
+  box-shadow:
+    0 0 0 1px var(--xiaohei-sidebar-glass-outline),
+    inset 0 1px 0 var(--xiaohei-sidebar-glass-highlight),
+    inset 1px 0 0 var(--xiaohei-sidebar-glass-refraction),
+    inset -1px 0 0 var(--xiaohei-sidebar-glass-inner-edge),
+    inset 0 -1px 0 var(--xiaohei-sidebar-glass-inner-edge),
+    0 1px 1px rgb(255 255 255 / 4%),
+    10px 0 30px -22px var(--xiaohei-sidebar-shadow),
+    0 24px 52px -30px var(--xiaohei-sidebar-shadow);
+  -webkit-backdrop-filter:
+    blur(28px)
+    saturate(var(--xiaohei-sidebar-glass-saturation))
+    brightness(var(--xiaohei-sidebar-glass-brightness));
+  backdrop-filter:
+    blur(28px)
+    saturate(var(--xiaohei-sidebar-glass-saturation))
+    brightness(var(--xiaohei-sidebar-glass-brightness));
+}
+
+/* Specular light and the inner lens rim are independent from the tint. This
+ * keeps the surface recognisably glass without reducing control contrast. */
+#dsh-theme-xiaohei\\/sidebar-glass::before,
+#dsh-theme-xiaohei\\/sidebar-glass::after {
+  content: '';
+  position: absolute;
+  pointer-events: none;
+}
+
+#dsh-theme-xiaohei\\/sidebar-glass::before {
+  inset: 0;
+  border-radius: inherit;
+  background:
+    linear-gradient(
+      112deg,
+      var(--xiaohei-sidebar-glass-specular),
+      transparent 14%,
+      transparent 78%,
+      var(--xiaohei-sidebar-glass-refraction)
+    );
+  opacity: .72;
+  -webkit-mask-image: linear-gradient(180deg, black, rgb(0 0 0 / 18%) 26%, transparent 58%);
+  mask-image: linear-gradient(180deg, black, rgb(0 0 0 / 18%) 26%, transparent 58%);
+}
+
+#dsh-theme-xiaohei\\/sidebar-glass::after {
+  inset: 1px;
+  border-radius: calc(var(--xiaohei-radius-panel) - 1px);
+  box-shadow:
+    inset 0 0 0 1px var(--xiaohei-sidebar-glass-refraction),
+    inset 0 18px 24px -28px var(--xiaohei-sidebar-glass-highlight),
+    inset 0 -20px 30px -30px var(--xiaohei-sidebar-shadow);
+}
+
+/* Generated ink-space artwork supplies the complex Xiaohei identity. It is a
+ * paint-only layer inside the glass and never participates in host layout. */
+#dsh-theme-xiaohei\\/sidebar-glass > .xiaohei-sidebar-atmosphere {
+  position: absolute;
+  z-index: 0;
+  inset: 0;
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: left bottom;
+  pointer-events: none;
+  user-select: none;
+  opacity: var(--xiaohei-sidebar-atmosphere-opacity);
+  mix-blend-mode: screen;
+}
+
+html[data-xiaohei-appearance='light']
+  #dsh-theme-xiaohei\\/sidebar-glass > .xiaohei-sidebar-atmosphere {
+  mix-blend-mode: multiply;
+}
+
+/* Header toggle and the primary action keep the host's dimensions. */
+#root [data-slot='sidebar'] > div:not([class*='_collapsed']) > div:first-child button:last-child,
+#root [data-slot='sidebar'] > div:not([class*='_collapsed']) > button[aria-label='新建会话'],
+#root [data-slot='sidebar'] > div:not([class*='_collapsed']) > button[aria-label='New session'] {
+  color: var(--xiaohei-sidebar-icon);
+  transition:
+    color var(--xiaohei-motion-fast) ease,
+    background-color var(--xiaohei-motion-base) ease,
+    border-color var(--xiaohei-motion-base) ease;
+}
+
+#root [data-slot='sidebar'] > div:not([class*='_collapsed']) > div:first-child button:last-child:hover {
+  color: var(--xiaohei-sidebar-emphasis);
+  background: var(--xiaohei-sidebar-hover);
+}
+
+#root [data-slot='sidebar'] > div:not([class*='_collapsed']) > button[aria-label='新建会话'],
+#root [data-slot='sidebar'] > div:not([class*='_collapsed']) > button[aria-label='New session'] {
+  position: relative;
+  isolation: isolate;
+  overflow: hidden;
+  border-color: transparent;
+  background: transparent !important;
+  box-shadow: none;
+  justify-content: flex-start;
+  gap: 8px;
+  padding-inline: 12px;
+  text-align: start;
+}
+
+/* One quiet horizontal ink stroke replaces the generic button card. The
+ * brush is paint-only; the native button, label and focus target stay intact. */
+#root [data-slot='sidebar'] > div:not([class*='_collapsed']) > button[aria-label='新建会话']::before,
+#root [data-slot='sidebar'] > div:not([class*='_collapsed']) > button[aria-label='New session']::before {
+  content: '';
+  position: absolute;
+  z-index: -1;
+  inset: 3px 7px 3px 5px;
+  border-radius: 42% 9% 37% 12% / 28% 46% 36% 58%;
+  background: linear-gradient(
+    94deg,
+    transparent 0%,
+    var(--xiaohei-sidebar-brush-ink) 5%,
+    var(--xiaohei-sidebar-brush-ink) 72%,
+    transparent 100%
+  );
+  -webkit-mask-image:
+    radial-gradient(ellipse 12px 70% at 5% 48%, black 44%, transparent 76%),
+    linear-gradient(90deg, black 5%, black 76%, transparent 100%);
+  mask-image:
+    radial-gradient(ellipse 12px 70% at 5% 48%, black 44%, transparent 76%),
+    linear-gradient(90deg, black 5%, black 76%, transparent 100%);
+  -webkit-mask-composite: source-over;
+  mask-composite: add;
+  opacity: .9;
+  transform: scaleX(.985);
+  transform-origin: left center;
+  transition:
+    background-color var(--xiaohei-motion-base) ease,
+    opacity var(--xiaohei-motion-fast) ease,
+    transform var(--xiaohei-motion-base) var(--xiaohei-motion-curve);
+}
+
+#root [data-slot='sidebar'] > div:not([class*='_collapsed']) > button[aria-label='新建会话']:hover,
+#root [data-slot='sidebar'] > div:not([class*='_collapsed']) > button[aria-label='New session']:hover {
+  color: var(--xiaohei-sidebar-emphasis);
+  border-color: transparent;
+  background: transparent !important;
+}
+
+#root [data-slot='sidebar'] > div:not([class*='_collapsed']) > button[aria-label='新建会话']:hover::before,
+#root [data-slot='sidebar'] > div:not([class*='_collapsed']) > button[aria-label='New session']:hover::before {
+  background: linear-gradient(
+    94deg,
+    transparent 0%,
+    var(--xiaohei-sidebar-brush-ink-hover) 5%,
+    var(--xiaohei-sidebar-brush-ink-hover) 72%,
+    transparent 100%
+  );
+  opacity: 1;
+  transform: scaleX(1);
+}
+
+/* Footer occupants keep their native layout. Only their interaction surface
+ * is shaded, avoiding a second card inside the sidebar glass. */
+#root [data-slot='sidebar'] > div:not([class*='_collapsed'])
+  > :has(> div > [data-slot='sidebar.footer.action']) {
+  box-sizing: border-box;
+  gap: 2px;
+  margin: 8px 2px 4px;
+  padding: 4px;
+  border: 1px solid var(--xiaohei-sidebar-control-edge);
+  border-radius: calc(var(--xiaohei-radius-control) + 2px);
+  background: color-mix(in srgb, var(--xiaohei-sidebar-control) 76%, transparent);
+  box-shadow: inset 0 1px 0 var(--xiaohei-sidebar-control-highlight);
+}
+
+#root [data-slot='sidebar.footer.action'] > button,
+#root [data-slot='sidebar.settings'] > button {
+  color: var(--dsw-alias-label-secondary);
+  border-radius: var(--xiaohei-radius-small) !important;
+  transition:
+    color var(--xiaohei-motion-fast) ease,
+    background-color var(--xiaohei-motion-fast) ease,
+    transform var(--xiaohei-motion-fast) var(--xiaohei-motion-curve);
+}
+
+#root [data-slot='sidebar.footer.action'] > button:hover,
+#root [data-slot='sidebar.settings'] > button:hover,
+#root [data-slot='sidebar.footer.action'] > button[aria-expanded='true'],
+#root [data-slot='sidebar.settings'] > button[aria-expanded='true'] {
+  color: var(--xiaohei-sidebar-emphasis);
+  background: var(--xiaohei-sidebar-hover);
+}
+
+#root [data-slot='sidebar.footer.action'] > button:active,
+#root [data-slot='sidebar.settings'] > button:active {
+  transform: translateY(1px);
+}
+
+#root [data-slot='sidebar'] button:focus-visible {
+  outline: 2px solid var(--xiaohei-sidebar-emphasis);
+  outline-offset: 2px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  #root [data-slot='sidebar'] button {
+    transition-duration: 0ms !important;
+  }
+
+  #root [data-slot='sidebar'] > div:not([class*='_collapsed']) > button[aria-label='新建会话']::before,
+  #root [data-slot='sidebar'] > div:not([class*='_collapsed']) > button[aria-label='New session']::before {
+    transition-duration: 0ms !important;
+  }
+}
+
+@media (prefers-reduced-transparency: reduce) {
+  #dsh-theme-xiaohei\\/sidebar-glass {
+    background: var(--xiaohei-sidebar-glass-solid);
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+  }
+
+  #dsh-theme-xiaohei\\/sidebar-glass > .xiaohei-sidebar-atmosphere {
+    opacity: var(--xiaohei-sidebar-atmosphere-solid-opacity);
+  }
+}
+
+@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+  #dsh-theme-xiaohei\\/sidebar-glass {
+    background: var(--xiaohei-sidebar-glass-solid);
+  }
+}
+
+@media (forced-colors: active) {
+  #dsh-theme-xiaohei\\/sidebar-glass {
+    border-color: CanvasText;
+    background: Canvas;
+    box-shadow: none;
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+  }
+
+  #dsh-theme-xiaohei\\/sidebar-glass > .xiaohei-sidebar-atmosphere {
+    display: none;
+  }
+
+  #root [data-slot='sidebar'] > div:not([class*='_collapsed']) > button[aria-label='新建会话'],
+  #root [data-slot='sidebar'] > div:not([class*='_collapsed']) > button[aria-label='New session'] {
+    border-color: ButtonText;
+  }
+
+  #root [data-slot='sidebar'] > div:not([class*='_collapsed']) > button[aria-label='新建会话']::before,
+  #root [data-slot='sidebar'] > div:not([class*='_collapsed']) > button[aria-label='New session']::before {
+    display: none;
+  }
+}
+`;
+//# sourceMappingURL=sidebar.js.map

package/lib/chrome/sidebar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar.js","sourceRoot":"","sources":["../../src/chrome/sidebar.ts"],"names":[],"mappings":"AAAA,yEAAyE;AACzE,MAAM,CAAC,MAAM,mBAAmB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8SlC,CAAA"}

package/lib/chrome/tokens.d.ts

@@ -0,0 +1,3 @@
+/** Semantic Xiaohei identity tokens shared by every themed component layer. */
+export declare const XIAOHEI_CHROME_TOKENS_CSS = "\nhtml {\n  --xiaohei-ink: #0E1517;\n  --xiaohei-ink-soft: rgb(14 21 23 / 74%);\n  --xiaohei-spirit: #69B6BA;\n  --xiaohei-spirit-strong: #8ACED0;\n  --xiaohei-spirit-soft: rgb(105 182 186 / 12%);\n  --xiaohei-spirit-faint: rgb(105 182 186 / 6%);\n  --xiaohei-edge: rgb(124 189 192 / 15%);\n  --xiaohei-edge-strong: rgb(138 206 208 / 30%);\n  --xiaohei-surface: rgb(22 29 31 / 94%);\n  --xiaohei-surface-raised: rgb(29 37 39 / 97%);\n  --xiaohei-surface-muted: rgb(15 21 23 / 68%);\n  --xiaohei-sidebar-emphasis: #E1E6E7;\n  --xiaohei-sidebar-icon: rgb(220 227 229 / 70%);\n  --xiaohei-sidebar-hover: rgb(231 238 240 / 6.5%);\n  --xiaohei-sidebar-glass-fill: rgb(21 25 27 / 62%);\n  --xiaohei-sidebar-glass-solid: #1B2325;\n  --xiaohei-sidebar-glass-edge: rgb(238 247 249 / 18%);\n  --xiaohei-sidebar-glass-outline: rgb(0 0 0 / 30%);\n  --xiaohei-sidebar-glass-inner-edge: rgb(0 0 0 / 18%);\n  --xiaohei-sidebar-glass-highlight: rgb(255 255 255 / 16%);\n  --xiaohei-sidebar-glass-refraction: rgb(255 255 255 / 9%);\n  --xiaohei-sidebar-glass-specular: rgb(255 255 255 / 13%);\n  --xiaohei-sidebar-glass-saturation: 90%;\n  --xiaohei-sidebar-glass-brightness: 92%;\n  --xiaohei-sidebar-atmosphere-opacity: 0.36;\n  --xiaohei-sidebar-atmosphere-solid-opacity: 0.22;\n  --xiaohei-sidebar-control: rgb(231 238 240 / 4.5%);\n  --xiaohei-sidebar-control-edge: rgb(231 238 240 / 8%);\n  --xiaohei-sidebar-control-edge-hover: rgb(231 238 240 / 13%);\n  --xiaohei-sidebar-control-highlight: rgb(255 255 255 / 5%);\n  --xiaohei-sidebar-brush-ink: rgb(231 238 240 / 8%);\n  --xiaohei-sidebar-brush-ink-hover: rgb(231 238 240 / 13%);\n  --xiaohei-sidebar-shadow: rgb(0 0 0 / 24%);\n  --xiaohei-workspace-label: rgb(220 227 229 / 78%);\n  --xiaohei-space-frame-edge: rgb(231 238 240 / 8%);\n  --xiaohei-space-frame-highlight: rgb(255 255 255 / 4%);\n  --xiaohei-workspace-control-edge: rgb(231 238 240 / 8%);\n  --xiaohei-workspace-path: rgb(200 211 213 / 8%);\n  --xiaohei-workspace-path-active: rgb(105 182 186 / 20%);\n  --xiaohei-workspace-folder-open: rgb(105 182 186 / 7%);\n  --xiaohei-workspace-folder-edge: rgb(105 182 186 / 7%);\n  --xiaohei-workspace-folder-shadow: rgb(0 0 0 / 2.4%);\n  --xiaohei-workspace-row-hover: rgb(231 238 240 / 5.5%);\n  --xiaohei-workspace-row-active: rgb(231 238 240 / 7.5%);\n  --xiaohei-workspace-row-active-edge: rgb(231 238 240 / 5%);\n  --xiaohei-workspace-action-hover: rgb(231 238 240 / 7%);\n  --xiaohei-workspace-active-line: #69B6BA;\n  --xiaohei-workspace-active-line-glow: rgb(105 182 186 / 20%);\n  --xiaohei-workspace-rift-glow: rgb(105 182 186 / 12%);\n  --xiaohei-frame-line: rgb(138 206 208 / 21%);\n  --xiaohei-frame-line-strong: rgb(151 216 218 / 40%);\n  --xiaohei-frame-fill: rgb(15 21 23 / 54%);\n  --xiaohei-frame-fill-raised: rgb(24 32 34 / 78%);\n  --xiaohei-frame-inner: rgb(231 252 252 / 6%);\n  --xiaohei-frame-plaque: #182122;\n  --xiaohei-frame-label: #B9E5E7;\n  --xiaohei-frame-ink: #081011;\n  --xiaohei-layer-panel: rgb(20 27 29 / 76%);\n  --xiaohei-layer-panel-edge: rgb(124 189 192 / 12%);\n  --xiaohei-layer-panel-shadow: rgb(0 5 8 / 26%);\n  --xiaohei-conversation-text: #E0E6E4;\n  --xiaohei-conversation-meta: rgb(195 205 204 / 58%);\n  --xiaohei-conversation-user: rgb(117 158 154 / 13%);\n  --xiaohei-conversation-user-edge: rgb(143 177 173 / 12%);\n  --xiaohei-layer-content: rgb(27 35 37 / 92%);\n  --xiaohei-layer-content-edge: rgb(124 189 192 / 20%);\n  --xiaohei-layer-content-highlight: rgb(239 255 255 / 4%);\n  --xiaohei-shadow: rgb(0 5 7 / 30%);\n  --xiaohei-focus-shadow: rgb(105 182 186 / 14%);\n  --xiaohei-overlay-fill: rgb(22 29 31 / 88%);\n  --xiaohei-overlay-blur: 18px;\n  --xiaohei-overlay-saturation: 108%;\n  --xiaohei-plugin-workspace-fill: rgb(20 27 29 / 62%);\n  --xiaohei-plugin-pane-fill: rgb(27 35 37 / 46%);\n  --xiaohei-plugin-raised-fill: rgb(29 37 39 / 72%);\n  --xiaohei-plugin-control-fill: rgb(33 42 44 / 86%);\n  --xiaohei-plugin-surface-blur: 32px;\n  --xiaohei-plugin-surface-saturation: 112%;\n  --xiaohei-radius-panel: 16px;\n  --xiaohei-radius-control: 10px;\n  --xiaohei-radius-small: 8px;\n  --xiaohei-motion-fast: 140ms;\n  --xiaohei-motion-base: 190ms;\n  --xiaohei-motion-curve: cubic-bezier(0.16, 1, 0.3, 1);\n}\n\nhtml[data-xiaohei-appearance='light'] {\n  --xiaohei-ink: #252C35;\n  --xiaohei-ink-soft: rgb(37 44 53 / 72%);\n  --xiaohei-spirit: #547D78;\n  --xiaohei-spirit-strong: #426A65;\n  --xiaohei-spirit-soft: rgb(84 125 120 / 10%);\n  --xiaohei-spirit-faint: rgb(84 125 120 / 5%);\n  --xiaohei-edge: rgb(84 125 120 / 19%);\n  --xiaohei-edge-strong: rgb(84 125 120 / 38%);\n  --xiaohei-surface: rgb(232 237 243 / 94%);\n  --xiaohei-surface-raised: rgb(241 244 248 / 97%);\n  --xiaohei-surface-muted: rgb(220 227 234 / 78%);\n  --xiaohei-sidebar-emphasis: #3F454C;\n  --xiaohei-sidebar-icon: rgb(48 54 61 / 68%);\n  --xiaohei-sidebar-hover: rgb(48 54 61 / 6%);\n  --xiaohei-sidebar-glass-fill: rgb(215 220 223 / 62%);\n  --xiaohei-sidebar-glass-solid: #E8EDEF;\n  --xiaohei-sidebar-glass-edge: rgb(255 255 255 / 88%);\n  --xiaohei-sidebar-glass-outline: rgb(42 50 56 / 14%);\n  --xiaohei-sidebar-glass-inner-edge: rgb(43 51 56 / 11%);\n  --xiaohei-sidebar-glass-highlight: rgb(255 255 255 / 88%);\n  --xiaohei-sidebar-glass-refraction: rgb(255 255 255 / 42%);\n  --xiaohei-sidebar-glass-specular: rgb(255 255 255 / 72%);\n  --xiaohei-sidebar-glass-saturation: 76%;\n  --xiaohei-sidebar-glass-brightness: 104%;\n  --xiaohei-sidebar-atmosphere-opacity: 0.28;\n  --xiaohei-sidebar-atmosphere-solid-opacity: 0.16;\n  --xiaohei-sidebar-control: rgb(255 255 255 / 26%);\n  --xiaohei-sidebar-control-edge: rgb(46 51 58 / 8%);\n  --xiaohei-sidebar-control-edge-hover: rgb(46 51 58 / 13%);\n  --xiaohei-sidebar-control-highlight: rgb(255 255 255 / 48%);\n  --xiaohei-sidebar-brush-ink: rgb(38 47 49 / 9%);\n  --xiaohei-sidebar-brush-ink-hover: rgb(38 47 49 / 14%);\n  --xiaohei-sidebar-shadow: rgb(23 30 34 / 14%);\n  --xiaohei-workspace-label: rgb(48 54 61 / 76%);\n  --xiaohei-space-frame-edge: rgb(46 51 58 / 8%);\n  --xiaohei-space-frame-highlight: rgb(255 255 255 / 32%);\n  --xiaohei-workspace-control-edge: rgb(46 51 58 / 9%);\n  --xiaohei-workspace-path: rgb(45 56 57 / 9%);\n  --xiaohei-workspace-path-active: rgb(84 125 120 / 22%);\n  --xiaohei-workspace-folder-open: rgb(84 125 120 / 6.5%);\n  --xiaohei-workspace-folder-edge: rgb(61 99 84 / 5.5%);\n  --xiaohei-workspace-folder-shadow: rgb(30 50 42 / 1.8%);\n  --xiaohei-workspace-row-hover: rgb(48 54 61 / 5%);\n  --xiaohei-workspace-row-active: rgb(48 54 61 / 7.5%);\n  --xiaohei-workspace-row-active-edge: rgb(46 51 58 / 5%);\n  --xiaohei-workspace-action-hover: rgb(48 54 61 / 7%);\n  --xiaohei-workspace-active-line: #547D78;\n  --xiaohei-workspace-active-line-glow: rgb(84 125 120 / 20%);\n  --xiaohei-workspace-rift-glow: rgb(84 125 120 / 8%);\n  --xiaohei-frame-line: rgb(84 125 120 / 22%);\n  --xiaohei-frame-line-strong: rgb(84 125 120 / 43%);\n  --xiaohei-frame-fill: rgb(224 231 238 / 58%);\n  --xiaohei-frame-fill-raised: rgb(238 242 247 / 88%);\n  --xiaohei-frame-inner: rgb(255 255 255 / 72%);\n  --xiaohei-frame-plaque: rgb(235 241 240 / 94%);\n  --xiaohei-frame-label: #294A46;\n  --xiaohei-frame-ink: #243633;\n  --xiaohei-layer-panel: rgb(226 232 239 / 78%);\n  --xiaohei-layer-panel-edge: rgb(84 125 120 / 11%);\n  --xiaohei-layer-panel-shadow: rgb(43 55 51 / 8%);\n  --xiaohei-conversation-text: #303842;\n  --xiaohei-conversation-meta: rgb(76 87 99 / 56%);\n  --xiaohei-conversation-user: rgb(84 125 120 / 10%);\n  --xiaohei-conversation-user-edge: rgb(84 125 120 / 10%);\n  --xiaohei-layer-content: rgb(238 242 247 / 94%);\n  --xiaohei-layer-content-edge: rgb(84 125 120 / 20%);\n  --xiaohei-layer-content-highlight: rgb(255 255 255 / 62%);\n  --xiaohei-shadow: rgb(43 55 51 / 11%);\n  --xiaohei-focus-shadow: rgb(84 125 120 / 13%);\n  --xiaohei-overlay-fill: rgb(232 237 243 / 90%);\n  --xiaohei-overlay-blur: 18px;\n  --xiaohei-overlay-saturation: 106%;\n  --xiaohei-plugin-workspace-fill: rgb(232 237 243 / 64%);\n  --xiaohei-plugin-pane-fill: rgb(238 242 247 / 46%);\n  --xiaohei-plugin-raised-fill: rgb(244 247 250 / 72%);\n  --xiaohei-plugin-control-fill: rgb(248 250 252 / 86%);\n  --xiaohei-plugin-surface-blur: 32px;\n  --xiaohei-plugin-surface-saturation: 106%;\n}\n";
+//# sourceMappingURL=tokens.d.ts.map

package/lib/chrome/tokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../src/chrome/tokens.ts"],"names":[],"mappings":"AAAA,+EAA+E;AAC/E,eAAO,MAAM,yBAAyB,slQAwKrC,CAAA"}

package/lib/chrome/tokens.js

@@ -0,0 +1,171 @@
+/** Semantic Xiaohei identity tokens shared by every themed component layer. */
+export const XIAOHEI_CHROME_TOKENS_CSS = `
+html {
+  --xiaohei-ink: #0E1517;
+  --xiaohei-ink-soft: rgb(14 21 23 / 74%);
+  --xiaohei-spirit: #69B6BA;
+  --xiaohei-spirit-strong: #8ACED0;
+  --xiaohei-spirit-soft: rgb(105 182 186 / 12%);
+  --xiaohei-spirit-faint: rgb(105 182 186 / 6%);
+  --xiaohei-edge: rgb(124 189 192 / 15%);
+  --xiaohei-edge-strong: rgb(138 206 208 / 30%);
+  --xiaohei-surface: rgb(22 29 31 / 94%);
+  --xiaohei-surface-raised: rgb(29 37 39 / 97%);
+  --xiaohei-surface-muted: rgb(15 21 23 / 68%);
+  --xiaohei-sidebar-emphasis: #E1E6E7;
+  --xiaohei-sidebar-icon: rgb(220 227 229 / 70%);
+  --xiaohei-sidebar-hover: rgb(231 238 240 / 6.5%);
+  --xiaohei-sidebar-glass-fill: rgb(21 25 27 / 62%);
+  --xiaohei-sidebar-glass-solid: #1B2325;
+  --xiaohei-sidebar-glass-edge: rgb(238 247 249 / 18%);
+  --xiaohei-sidebar-glass-outline: rgb(0 0 0 / 30%);
+  --xiaohei-sidebar-glass-inner-edge: rgb(0 0 0 / 18%);
+  --xiaohei-sidebar-glass-highlight: rgb(255 255 255 / 16%);
+  --xiaohei-sidebar-glass-refraction: rgb(255 255 255 / 9%);
+  --xiaohei-sidebar-glass-specular: rgb(255 255 255 / 13%);
+  --xiaohei-sidebar-glass-saturation: 90%;
+  --xiaohei-sidebar-glass-brightness: 92%;
+  --xiaohei-sidebar-atmosphere-opacity: 0.36;
+  --xiaohei-sidebar-atmosphere-solid-opacity: 0.22;
+  --xiaohei-sidebar-control: rgb(231 238 240 / 4.5%);
+  --xiaohei-sidebar-control-edge: rgb(231 238 240 / 8%);
+  --xiaohei-sidebar-control-edge-hover: rgb(231 238 240 / 13%);
+  --xiaohei-sidebar-control-highlight: rgb(255 255 255 / 5%);
+  --xiaohei-sidebar-brush-ink: rgb(231 238 240 / 8%);
+  --xiaohei-sidebar-brush-ink-hover: rgb(231 238 240 / 13%);
+  --xiaohei-sidebar-shadow: rgb(0 0 0 / 24%);
+  --xiaohei-workspace-label: rgb(220 227 229 / 78%);
+  --xiaohei-space-frame-edge: rgb(231 238 240 / 8%);
+  --xiaohei-space-frame-highlight: rgb(255 255 255 / 4%);
+  --xiaohei-workspace-control-edge: rgb(231 238 240 / 8%);
+  --xiaohei-workspace-path: rgb(200 211 213 / 8%);
+  --xiaohei-workspace-path-active: rgb(105 182 186 / 20%);
+  --xiaohei-workspace-folder-open: rgb(105 182 186 / 7%);
+  --xiaohei-workspace-folder-edge: rgb(105 182 186 / 7%);
+  --xiaohei-workspace-folder-shadow: rgb(0 0 0 / 2.4%);
+  --xiaohei-workspace-row-hover: rgb(231 238 240 / 5.5%);
+  --xiaohei-workspace-row-active: rgb(231 238 240 / 7.5%);
+  --xiaohei-workspace-row-active-edge: rgb(231 238 240 / 5%);
+  --xiaohei-workspace-action-hover: rgb(231 238 240 / 7%);
+  --xiaohei-workspace-active-line: #69B6BA;
+  --xiaohei-workspace-active-line-glow: rgb(105 182 186 / 20%);
+  --xiaohei-workspace-rift-glow: rgb(105 182 186 / 12%);
+  --xiaohei-frame-line: rgb(138 206 208 / 21%);
+  --xiaohei-frame-line-strong: rgb(151 216 218 / 40%);
+  --xiaohei-frame-fill: rgb(15 21 23 / 54%);
+  --xiaohei-frame-fill-raised: rgb(24 32 34 / 78%);
+  --xiaohei-frame-inner: rgb(231 252 252 / 6%);
+  --xiaohei-frame-plaque: #182122;
+  --xiaohei-frame-label: #B9E5E7;
+  --xiaohei-frame-ink: #081011;
+  --xiaohei-layer-panel: rgb(20 27 29 / 76%);
+  --xiaohei-layer-panel-edge: rgb(124 189 192 / 12%);
+  --xiaohei-layer-panel-shadow: rgb(0 5 8 / 26%);
+  --xiaohei-conversation-text: #E0E6E4;
+  --xiaohei-conversation-meta: rgb(195 205 204 / 58%);
+  --xiaohei-conversation-user: rgb(117 158 154 / 13%);
+  --xiaohei-conversation-user-edge: rgb(143 177 173 / 12%);
+  --xiaohei-layer-content: rgb(27 35 37 / 92%);
+  --xiaohei-layer-content-edge: rgb(124 189 192 / 20%);
+  --xiaohei-layer-content-highlight: rgb(239 255 255 / 4%);
+  --xiaohei-shadow: rgb(0 5 7 / 30%);
+  --xiaohei-focus-shadow: rgb(105 182 186 / 14%);
+  --xiaohei-overlay-fill: rgb(22 29 31 / 88%);
+  --xiaohei-overlay-blur: 18px;
+  --xiaohei-overlay-saturation: 108%;
+  --xiaohei-plugin-workspace-fill: rgb(20 27 29 / 62%);
+  --xiaohei-plugin-pane-fill: rgb(27 35 37 / 46%);
+  --xiaohei-plugin-raised-fill: rgb(29 37 39 / 72%);
+  --xiaohei-plugin-control-fill: rgb(33 42 44 / 86%);
+  --xiaohei-plugin-surface-blur: 32px;
+  --xiaohei-plugin-surface-saturation: 112%;
+  --xiaohei-radius-panel: 16px;
+  --xiaohei-radius-control: 10px;
+  --xiaohei-radius-small: 8px;
+  --xiaohei-motion-fast: 140ms;
+  --xiaohei-motion-base: 190ms;
+  --xiaohei-motion-curve: cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+html[data-xiaohei-appearance='light'] {
+  --xiaohei-ink: #252C35;
+  --xiaohei-ink-soft: rgb(37 44 53 / 72%);
+  --xiaohei-spirit: #547D78;
+  --xiaohei-spirit-strong: #426A65;
+  --xiaohei-spirit-soft: rgb(84 125 120 / 10%);
+  --xiaohei-spirit-faint: rgb(84 125 120 / 5%);
+  --xiaohei-edge: rgb(84 125 120 / 19%);
+  --xiaohei-edge-strong: rgb(84 125 120 / 38%);
+  --xiaohei-surface: rgb(232 237 243 / 94%);
+  --xiaohei-surface-raised: rgb(241 244 248 / 97%);
+  --xiaohei-surface-muted: rgb(220 227 234 / 78%);
+  --xiaohei-sidebar-emphasis: #3F454C;
+  --xiaohei-sidebar-icon: rgb(48 54 61 / 68%);
+  --xiaohei-sidebar-hover: rgb(48 54 61 / 6%);
+  --xiaohei-sidebar-glass-fill: rgb(215 220 223 / 62%);
+  --xiaohei-sidebar-glass-solid: #E8EDEF;
+  --xiaohei-sidebar-glass-edge: rgb(255 255 255 / 88%);
+  --xiaohei-sidebar-glass-outline: rgb(42 50 56 / 14%);
+  --xiaohei-sidebar-glass-inner-edge: rgb(43 51 56 / 11%);
+  --xiaohei-sidebar-glass-highlight: rgb(255 255 255 / 88%);
+  --xiaohei-sidebar-glass-refraction: rgb(255 255 255 / 42%);
+  --xiaohei-sidebar-glass-specular: rgb(255 255 255 / 72%);
+  --xiaohei-sidebar-glass-saturation: 76%;
+  --xiaohei-sidebar-glass-brightness: 104%;
+  --xiaohei-sidebar-atmosphere-opacity: 0.28;
+  --xiaohei-sidebar-atmosphere-solid-opacity: 0.16;
+  --xiaohei-sidebar-control: rgb(255 255 255 / 26%);
+  --xiaohei-sidebar-control-edge: rgb(46 51 58 / 8%);
+  --xiaohei-sidebar-control-edge-hover: rgb(46 51 58 / 13%);
+  --xiaohei-sidebar-control-highlight: rgb(255 255 255 / 48%);
+  --xiaohei-sidebar-brush-ink: rgb(38 47 49 / 9%);
+  --xiaohei-sidebar-brush-ink-hover: rgb(38 47 49 / 14%);
+  --xiaohei-sidebar-shadow: rgb(23 30 34 / 14%);
+  --xiaohei-workspace-label: rgb(48 54 61 / 76%);
+  --xiaohei-space-frame-edge: rgb(46 51 58 / 8%);
+  --xiaohei-space-frame-highlight: rgb(255 255 255 / 32%);
+  --xiaohei-workspace-control-edge: rgb(46 51 58 / 9%);
+  --xiaohei-workspace-path: rgb(45 56 57 / 9%);
+  --xiaohei-workspace-path-active: rgb(84 125 120 / 22%);
+  --xiaohei-workspace-folder-open: rgb(84 125 120 / 6.5%);
+  --xiaohei-workspace-folder-edge: rgb(61 99 84 / 5.5%);
+  --xiaohei-workspace-folder-shadow: rgb(30 50 42 / 1.8%);
+  --xiaohei-workspace-row-hover: rgb(48 54 61 / 5%);
+  --xiaohei-workspace-row-active: rgb(48 54 61 / 7.5%);
+  --xiaohei-workspace-row-active-edge: rgb(46 51 58 / 5%);
+  --xiaohei-workspace-action-hover: rgb(48 54 61 / 7%);
+  --xiaohei-workspace-active-line: #547D78;
+  --xiaohei-workspace-active-line-glow: rgb(84 125 120 / 20%);
+  --xiaohei-workspace-rift-glow: rgb(84 125 120 / 8%);
+  --xiaohei-frame-line: rgb(84 125 120 / 22%);
+  --xiaohei-frame-line-strong: rgb(84 125 120 / 43%);
+  --xiaohei-frame-fill: rgb(224 231 238 / 58%);
+  --xiaohei-frame-fill-raised: rgb(238 242 247 / 88%);
+  --xiaohei-frame-inner: rgb(255 255 255 / 72%);
+  --xiaohei-frame-plaque: rgb(235 241 240 / 94%);
+  --xiaohei-frame-label: #294A46;
+  --xiaohei-frame-ink: #243633;
+  --xiaohei-layer-panel: rgb(226 232 239 / 78%);
+  --xiaohei-layer-panel-edge: rgb(84 125 120 / 11%);
+  --xiaohei-layer-panel-shadow: rgb(43 55 51 / 8%);
+  --xiaohei-conversation-text: #303842;
+  --xiaohei-conversation-meta: rgb(76 87 99 / 56%);
+  --xiaohei-conversation-user: rgb(84 125 120 / 10%);
+  --xiaohei-conversation-user-edge: rgb(84 125 120 / 10%);
+  --xiaohei-layer-content: rgb(238 242 247 / 94%);
+  --xiaohei-layer-content-edge: rgb(84 125 120 / 20%);
+  --xiaohei-layer-content-highlight: rgb(255 255 255 / 62%);
+  --xiaohei-shadow: rgb(43 55 51 / 11%);
+  --xiaohei-focus-shadow: rgb(84 125 120 / 13%);
+  --xiaohei-overlay-fill: rgb(232 237 243 / 90%);
+  --xiaohei-overlay-blur: 18px;
+  --xiaohei-overlay-saturation: 106%;
+  --xiaohei-plugin-workspace-fill: rgb(232 237 243 / 64%);
+  --xiaohei-plugin-pane-fill: rgb(238 242 247 / 46%);
+  --xiaohei-plugin-raised-fill: rgb(244 247 250 / 72%);
+  --xiaohei-plugin-control-fill: rgb(248 250 252 / 86%);
+  --xiaohei-plugin-surface-blur: 32px;
+  --xiaohei-plugin-surface-saturation: 106%;
+}
+`;
+//# sourceMappingURL=tokens.js.map

package/lib/chrome/tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.js","sourceRoot":"","sources":["../../src/chrome/tokens.ts"],"names":[],"mappings":"AAAA,+EAA+E;AAC/E,MAAM,CAAC,MAAM,yBAAyB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwKxC,CAAA"}

package/lib/chrome/workspace.d.ts

@@ -0,0 +1,3 @@
+/** Visual hierarchy for DSH's native workspace tree. No behaviour is replaced. */
+export declare const XIAOHEI_WORKSPACE_CSS: string;
+//# sourceMappingURL=workspace.d.ts.map

package/lib/chrome/workspace.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"workspace.d.ts","sourceRoot":"","sources":["../../src/chrome/workspace.ts"],"names":[],"mappings":"AAEA,kFAAkF;AAClF,eAAO,MAAM,qBAAqB,QAqTjC,CAAA"}