@octohirono/stitch-design-system 0.3.0 → 0.4.0

package/dist/components/BarChart/BarChart.js

@@ -1,31 +1,32 @@
 import { catColor as e } from "../_internal/dataviz/chartColors.js";
 import { ChartFrame as t } from "../_internal/dataviz/ChartFrame.js";
 import { ChartTooltip as n } from "../_internal/dataviz/ChartTooltip.js";
-import r from "./bar-chart.module.js";
+import { renderLegendLabel as r } from "../_internal/dataviz/ChartLegendLabel.js";
+import i from "./bar-chart.module.js";
 import "react";
-import i from "clsx";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
-import { Bar as s, BarChart as c, CartesianGrid as l, Legend as u, Tooltip as d, XAxis as f, YAxis as p } from "recharts";
+import a from "clsx";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { Bar as c, BarChart as l, CartesianGrid as u, Legend as d, Tooltip as f, XAxis as p, YAxis as m } from "recharts";
 //#region packages/react/src/components/BarChart/BarChart.tsx
-var m = ({ data: m, xField: h, series: g, stack: _ = !1, height: v = 300, valueFormatter: y, ariaLabel: b, className: x }) => {
-	let S = { fill: "var(--stitch-text-secondary)" }, C = y ? (e) => y(e) : void 0, w = (e) => {
-		let { active: t, label: r, payload: i } = e, o = i?.map((e) => ({
+var h = ({ data: h, xField: g, series: _, stack: v = !1, height: y = 300, valueFormatter: b, ariaLabel: x, className: S }) => {
+	let C = { fill: "var(--stitch-text-secondary)" }, w = b ? (e) => b(e) : void 0, T = (e) => {
+		let { active: t, label: r, payload: i } = e, a = i?.map((e) => ({
 			name: e.name,
-			value: y && typeof e.value == "number" ? y(e.value) : e.value,
+			value: b && typeof e.value == "number" ? b(e.value) : e.value,
 			color: e.color
 		}));
-		return /* @__PURE__ */ a(n, {
+		return /* @__PURE__ */ o(n, {
 			active: t,
 			label: r,
-			payload: o
+			payload: a
 		});
-	}, T = _ ? "stack" : void 0, E = g.length > 1;
-	return /* @__PURE__ */ a(t, {
-		ariaLabel: b,
-		height: v,
-		className: i(r.chart, x),
-		children: /* @__PURE__ */ o(c, {
-			data: m,
+	}, E = v ? "stack" : void 0, D = _.length > 1;
+	return /* @__PURE__ */ o(t, {
+		ariaLabel: x,
+		height: y,
+		className: a(i.chart, S),
+		children: /* @__PURE__ */ s(l, {
+			data: h,
 			margin: {
 				top: 8,
 				right: 8,
@@ -33,32 +34,32 @@ var m = ({ data: m, xField: h, series: g, stack: _ = !1, height: v = 300, valueF
 				left: 4
 			},
 			children: [
-				/* @__PURE__ */ a(l, {
+				/* @__PURE__ */ o(u, {
 					stroke: "var(--stitch-border)",
 					vertical: !1
 				}),
-				/* @__PURE__ */ a(f, {
-					dataKey: h,
+				/* @__PURE__ */ o(p, {
+					dataKey: g,
 					stroke: "var(--stitch-border)",
-					tick: S,
+					tick: C,
 					tickLine: !1
 				}),
-				/* @__PURE__ */ a(p, {
+				/* @__PURE__ */ o(m, {
 					stroke: "var(--stitch-border)",
-					tick: S,
+					tick: C,
 					tickLine: !1,
-					tickFormatter: C
+					tickFormatter: w
 				}),
-				/* @__PURE__ */ a(d, {
-					content: w,
+				/* @__PURE__ */ o(f, {
+					content: T,
 					cursor: { fill: "color-mix(in srgb, var(--stitch-text-primary), transparent 92%)" }
 				}),
-				E && /* @__PURE__ */ a(u, { wrapperStyle: { color: "var(--stitch-text-primary)" } }),
-				g.map((t, n) => /* @__PURE__ */ a(s, {
+				D && /* @__PURE__ */ o(d, { formatter: r }),
+				_.map((t, n) => /* @__PURE__ */ o(c, {
 					dataKey: t.dataKey,
 					name: t.name ?? t.dataKey,
 					fill: e(n),
-					stackId: T,
+					stackId: E,
 					radius: 0,
 					isAnimationActive: !1
 				}, t.dataKey))
@@ -66,6 +67,6 @@ var m = ({ data: m, xField: h, series: g, stack: _ = !1, height: v = 300, valueF
 		})
 	});
 };
-m.displayName = "BarChart";
+h.displayName = "BarChart";
 //#endregion
-export { m as BarChart };
+export { h as BarChart };

package/dist/components/ChatMessage/chat-message.module.js

@@ -1,21 +1,21 @@
 //#region packages/react/src/components/ChatMessage/chat-message.module.less
-var e = "_message_di477_1", t = "_body_di477_30", n = "_bubble_di477_39", r = "_emoji_di477_63", i = "_system_di477_67", a = "_meta_di477_75", o = "_time_di477_94", s = "_ticks_di477_97", c = "_tick_di477_97", l = {
+var e = "_message_dvybo_1", t = "_body_dvybo_30", n = "_bubble_dvybo_39", r = "_emoji_dvybo_64", i = "_system_dvybo_68", a = "_meta_dvybo_76", o = "_time_dvybo_95", s = "_ticks_dvybo_98", c = "_tick_dvybo_98", l = {
 	message: e,
-	"variant-received": "_variant-received_di477_10",
-	"variant-sent": "_variant-sent_di477_14",
-	"variant-system": "_variant-system_di477_18",
-	"avatar-slot": "_avatar-slot_di477_24",
+	"variant-received": "_variant-received_dvybo_10",
+	"variant-sent": "_variant-sent_dvybo_14",
+	"variant-system": "_variant-system_dvybo_18",
+	"avatar-slot": "_avatar-slot_dvybo_24",
 	body: t,
 	bubble: n,
 	emoji: r,
 	system: i,
 	meta: a,
-	"meta-below": "_meta-below_di477_76",
+	"meta-below": "_meta-below_dvybo_77",
 	time: o,
 	ticks: s,
 	tick: c,
-	"ticks-read": "_ticks-read_di477_105",
-	"is-grouped": "_is-grouped_di477_108"
+	"ticks-read": "_ticks-read_dvybo_106",
+	"is-grouped": "_is-grouped_dvybo_109"
 };
 //#endregion
 export { t as body, n as bubble, l as default, r as emoji, e as message, a as meta, i as system, c as tick, s as ticks, o as time };

package/dist/components/Collapse/collapse.module.js

@@ -1,5 +1,5 @@
 //#region packages/react/src/components/Collapse/collapse.module.less
-var e = "_collapse_xqb89_1", t = "_disabled_xqb89_11", n = "_header_xqb89_14", r = "_indicator_xqb89_34", i = "_expanded_xqb89_40", a = "_text_xqb89_43", o = "_panel_xqb89_50", s = "_content_xqb89_58", c = {
+var e = "_collapse_1t4ba_1", t = "_disabled_1t4ba_11", n = "_header_1t4ba_14", r = "_indicator_1t4ba_34", i = "_expanded_1t4ba_40", a = "_text_1t4ba_43", o = "_panel_1t4ba_50", s = "_content_1t4ba_58", c = {
 	collapse: e,
 	disabled: t,
 	header: n,

package/dist/components/NavigationMenu/NavigationMenu.d.ts

@@ -12,7 +12,7 @@ export interface NavItem {
     href?: string;
     /** 展开面板内容：给了即渲染为可展开项（`Trigger` + `Content`），内容自由 ReactNode */
     content?: React.ReactNode;
-    /** 标记为当前项：底层挂 `data-active` + `aria-current="page"`，皮上走激活态（`--stitch-accent`） */
+    /** 标记为当前项：底层挂 `data-active` + `aria-current="page"`，皮上走品牌前景强调（`--stitch-brand`） */
     active?: boolean;
 }
 /**

package/dist/components/NavigationMenu/navigation-menu.module.js

@@ -1,5 +1,5 @@
 //#region packages/react/src/components/NavigationMenu/navigation-menu.module.less
-var e = "_root_phcem_1", t = "_list_phcem_8", n = "_item_phcem_16", r = "_link_phcem_19", i = "_trigger_phcem_20", a = "_caret_phcem_52", o = "_viewportWrapper_phcem_60", s = "_viewport_phcem_60", c = "_content_phcem_85", l = {
+var e = "_root_i0lyd_1", t = "_list_i0lyd_8", n = "_item_i0lyd_16", r = "_link_i0lyd_19", i = "_trigger_i0lyd_20", a = "_caret_i0lyd_52", o = "_viewportWrapper_i0lyd_60", s = "_viewport_i0lyd_60", c = "_content_i0lyd_85", l = {
 	root: e,
 	list: t,
 	item: n,
@@ -8,8 +8,8 @@ var e = "_root_phcem_1", t = "_list_phcem_8", n = "_item_phcem_16", r = "_link_p
 	caret: a,
 	viewportWrapper: o,
 	viewport: s,
-	"stitch-navigation-menu-in": "_stitch-navigation-menu-in_phcem_1",
-	"stitch-navigation-menu-out": "_stitch-navigation-menu-out_phcem_1",
+	"stitch-navigation-menu-in": "_stitch-navigation-menu-in_i0lyd_1",
+	"stitch-navigation-menu-out": "_stitch-navigation-menu-out_i0lyd_1",
 	content: c
 };
 //#endregion

package/dist/components/PieChart/PieChart.js

@@ -1,29 +1,30 @@
 import { catColor as e } from "../_internal/dataviz/chartColors.js";
 import { ChartFrame as t } from "../_internal/dataviz/ChartFrame.js";
 import { ChartTooltip as n } from "../_internal/dataviz/ChartTooltip.js";
-import r from "./pie-chart.module.js";
+import { renderLegendLabel as r } from "../_internal/dataviz/ChartLegendLabel.js";
+import i from "./pie-chart.module.js";
 import "react";
-import i from "clsx";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
-import { Cell as s, Label as c, Legend as l, Pie as u, PieChart as d, Tooltip as f } from "recharts";
+import a from "clsx";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { Cell as c, Label as l, Legend as u, Pie as d, PieChart as f, Tooltip as p } from "recharts";
 //#region packages/react/src/components/PieChart/PieChart.tsx
-var p = ({ data: p, angleField: m, colorField: h, innerRadius: g = 0, centerLabel: _, legend: v = !0, height: y = 300, valueFormatter: b, ariaLabel: x, className: S }) => {
-	let C = (e) => {
+var m = ({ data: m, angleField: h, colorField: g, innerRadius: _ = 0, centerLabel: v, legend: y = !0, height: b = 300, valueFormatter: x, ariaLabel: S, className: C }) => {
+	let w = (e) => {
 		let { active: t, payload: r } = e, i = r?.map((e) => ({
 			name: e.name,
-			value: b && typeof e.value == "number" ? b(e.value) : e.value,
+			value: x && typeof e.value == "number" ? x(e.value) : e.value,
 			color: e.color
 		}));
-		return /* @__PURE__ */ a(n, {
+		return /* @__PURE__ */ o(n, {
 			active: t,
 			payload: i
 		});
-	}, w = `${Math.max(0, Math.min(1, g)) * 100}%`, T = g > 0 && _ != null && _ !== "";
-	return /* @__PURE__ */ a(t, {
-		ariaLabel: x,
-		height: y,
-		className: i(r.chart, S),
-		children: /* @__PURE__ */ o(d, {
+	}, T = `${Math.max(0, Math.min(1, _)) * 100}%`, E = _ > 0 && v != null && v !== "";
+	return /* @__PURE__ */ o(t, {
+		ariaLabel: S,
+		height: b,
+		className: a(i.chart, C),
+		children: /* @__PURE__ */ s(f, {
 			margin: {
 				top: 8,
 				right: 8,
@@ -31,26 +32,26 @@ var p = ({ data: p, angleField: m, colorField: h, innerRadius: g = 0, centerLabe
 				left: 4
 			},
 			children: [
-				/* @__PURE__ */ a(f, { content: C }),
-				v && /* @__PURE__ */ a(l, { wrapperStyle: { color: "var(--stitch-text-primary)" } }),
-				/* @__PURE__ */ o(u, {
-					data: p,
-					dataKey: m,
-					nameKey: h,
-					innerRadius: w,
+				/* @__PURE__ */ o(p, { content: w }),
+				y && /* @__PURE__ */ o(u, { formatter: r }),
+				/* @__PURE__ */ s(d, {
+					data: m,
+					dataKey: h,
+					nameKey: g,
+					innerRadius: T,
 					outerRadius: "80%",
 					stroke: "var(--stitch-bg-elevated)",
 					isAnimationActive: !1,
-					children: [p.map((t, n) => /* @__PURE__ */ a(s, { fill: e(n) }, n)), T && /* @__PURE__ */ a(c, {
+					children: [m.map((t, n) => /* @__PURE__ */ o(c, { fill: e(n) }, n)), E && /* @__PURE__ */ o(l, {
 						position: "center",
-						value: _,
-						className: r.center
+						value: v,
+						className: i.center
 					})]
 				})
 			]
 		})
 	});
 };
-p.displayName = "PieChart";
+m.displayName = "PieChart";
 //#endregion
-export { p as PieChart };
+export { m as PieChart };

package/dist/components/Select/Select.d.ts

@@ -23,7 +23,7 @@ export interface SelectOption {
  *   wrap），Home/End 跳首尾启用项，Enter/Space 选中当前高亮，Esc 关闭并把焦点还给 trigger；
  *   trigger `:focus-visible` 焦点环走 `--stitch-focus-ring`。
  * - **图标走 `<Icon>` 非裸 `<svg>`**：箭头 `<Icon name="chevron-down">`（`size="1em"` 跟随字号，
- *   展开 `rotate(180deg)` + 转 accent 色），选中项尾随 `<Icon name="check">`。
+ *   展开 `rotate(180deg)` + 转品牌前景强调 brand 色），选中项尾随 `<Icon name="check">`。
  * - **标准正下方展开**：浮层在 trigger 正下方展开（`top:100%`，`max-height` + 滚动），非侧向弹出/
  *   视口翻转定位——这是标准化取舍，保证可预期的下拉手感。
  */

package/dist/components/Select/select.module.js

@@ -1,5 +1,5 @@
 //#region packages/react/src/components/Select/select.module.less
-var e = "_wrapper_i7k60_1", t = "_trigger_i7k60_8", n = "_open_i7k60_30", r = "_small_i7k60_33", i = "_middle_i7k60_38", a = "_large_i7k60_43", o = "_value_i7k60_48", s = "_placeholder_i7k60_55", c = "_arrow_i7k60_62", l = "_arrowOpen_i7k60_67", u = "_dropdown_i7k60_71", d = "_dropdownFadeIn_i7k60_1", f = "_dropdownScroll_i7k60_86", p = "_option_i7k60_102", m = "_optionLabel_i7k60_115", h = "_optionActive_i7k60_119", g = "_optionSelected_i7k60_122", _ = "_checkMark_i7k60_126", v = "_optionDisabled_i7k60_130", y = "_disabled_i7k60_137", b = {
+var e = "_wrapper_158od_1", t = "_trigger_158od_8", n = "_open_158od_30", r = "_small_158od_33", i = "_middle_158od_38", a = "_large_158od_43", o = "_value_158od_48", s = "_placeholder_158od_55", c = "_arrow_158od_62", l = "_arrowOpen_158od_67", u = "_dropdown_158od_71", d = "_dropdownFadeIn_158od_1", f = "_dropdownScroll_158od_86", p = "_option_158od_102", m = "_optionLabel_158od_115", h = "_optionActive_158od_119", g = "_optionSelected_158od_122", _ = "_checkMark_158od_126", v = "_optionDisabled_158od_130", y = "_disabled_158od_137", b = {
 	wrapper: e,
 	trigger: t,
 	open: n,

package/dist/components/_internal/dataviz/ChartLegendLabel.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+/**
+ * recharts `<Legend formatter>` 用的标签渲染器：把图例**文字**裹成中性墨色
+ * `var(--stitch-text-primary)`，不吃系列色（色卡色另由 recharts 默认承载，不在此）。
+ */
+export declare const renderLegendLabel: (value: React.ReactNode) => React.ReactElement;

package/dist/components/_internal/dataviz/ChartLegendLabel.js

@@ -0,0 +1,9 @@
+import "react";
+import { jsx as e } from "react/jsx-runtime";
+//#region packages/react/src/components/_internal/dataviz/ChartLegendLabel.tsx
+var t = (t) => /* @__PURE__ */ e("span", {
+	style: { color: "var(--stitch-text-primary)" },
+	children: t
+});
+//#endregion
+export { t as renderLegendLabel };

package/dist/components/_internal/dataviz/index.d.ts

@@ -3,3 +3,4 @@ export { ChartFrame } from './ChartFrame';
 export type { ChartFrameProps } from './ChartFrame';
 export { ChartTooltip } from './ChartTooltip';
 export type { ChartTooltipProps, ChartTooltipEntry } from './ChartTooltip';
+export { renderLegendLabel } from './ChartLegendLabel';

package/dist/style.css

@@ -15,6 +15,7 @@
   --stitch-accent-hover: color-mix(in srgb, var(--stitch-accent), black 12%);
   --stitch-accent-active: color-mix(in srgb, var(--stitch-accent), black 22%);
   --stitch-accent-text: #0c0a09;
+  --stitch-brand: var(--stitch-accent);
   --stitch-link: #3398e1;
   --stitch-cat-1: #3ba6f1;
   --stitch-cat-2: #78716c;
@@ -62,11 +63,11 @@
   --stitch-text-disabled: color-mix(in srgb, var(--stitch-text-muted), var(--stitch-bg-canvas) 45%);
   --stitch-bg-disabled: #f0f0f0;
   --stitch-focus-ring: var(--stitch-accent);
-  --stitch-spacing-xs: 4px;
-  --stitch-spacing-sm: 8px;
-  --stitch-spacing-md: 12px;
-  --stitch-spacing-lg: 16px;
-  --stitch-spacing-xl: 24px;
+  --stitch-spacing-xs: var(--stitch-space-4, 4px);
+  --stitch-spacing-sm: var(--stitch-space-8, 8px);
+  --stitch-spacing-md: var(--stitch-space-12, 12px);
+  --stitch-spacing-lg: var(--stitch-space-16, 16px);
+  --stitch-spacing-xl: var(--stitch-space-24, 24px);
   --stitch-mask-bg: rgba(0,0,0,.45);
   --stitch-height-sm: 32px;
   --stitch-height-base: 40px;
@@ -74,6 +75,37 @@
   --stitch-motion-duration-fast: 120ms;
   --stitch-motion-duration-base: 200ms;
   --stitch-motion-ease: cubic-bezier(.4,0,.2,1);
+  --stitch-text-caption: 10px;
+  --stitch-leading-caption: 2.3;
+  --stitch-text-body-lg: 16px;
+  --stitch-leading-body-lg: 1.69;
+  --stitch-tracking-body-lg: 0.048px;
+  --stitch-text-subheading: 20px;
+  --stitch-leading-subheading: 1.2;
+  --stitch-tracking-subheading: -0.1px;
+  --stitch-text-heading-sm: 32px;
+  --stitch-leading-heading-sm: 1.25;
+  --stitch-tracking-heading-sm: -0.8px;
+  --stitch-text-display: 52px;
+  --stitch-leading-display: 1.12;
+  --stitch-tracking-display: -1.092px;
+  --stitch-space-unit: 4px;
+  --stitch-space-4: 4px;
+  --stitch-space-8: 8px;
+  --stitch-space-12: 12px;
+  --stitch-space-16: 16px;
+  --stitch-space-24: 24px;
+  --stitch-space-32: 32px;
+  --stitch-space-40: 40px;
+  --stitch-space-48: 48px;
+  --stitch-space-64: 64px;
+  --stitch-space-80: 80px;
+  --stitch-space-96: 96px;
+  --stitch-space-160: 160px;
+  --stitch-page-max-width: 1200px;
+  --stitch-section-gap: 96px;
+  --stitch-card-padding: 24px;
+  --stitch-element-gap: 8px;
 }
 ._btn_18xhb_1 {
   position: relative;
@@ -681,7 +713,7 @@
   font-weight: var(--stitch-font-weight-normal);
   font-size: var(--stitch-font-size-sm);
 }
-._collapse_xqb89_1 {
+._collapse_1t4ba_1 {
   box-sizing: border-box;
   position: relative;
   background: var(--stitch-bg-elevated);
@@ -691,10 +723,10 @@
   font-family: var(--stitch-font-body);
   transition: border-color var(--stitch-motion-duration-base) var(--stitch-motion-ease);
 }
-._collapse_xqb89_1._disabled_xqb89_11 {
+._collapse_1t4ba_1._disabled_1t4ba_11 {
   opacity: 0.6;
 }
-._header_xqb89_14 {
+._header_1t4ba_14 {
   display: flex;
   align-items: center;
   gap: var(--stitch-spacing-md);
@@ -707,38 +739,38 @@
   font-family: inherit;
   color: var(--stitch-text-primary);
 }
-._header_xqb89_14:focus-visible {
+._header_1t4ba_14:focus-visible {
   outline: 2px solid var(--stitch-focus-ring);
   outline-offset: -2px;
 }
-._header_xqb89_14:disabled {
+._header_1t4ba_14:disabled {
   cursor: not-allowed;
 }
-._indicator_xqb89_34 {
+._indicator_1t4ba_34 {
   display: flex;
   flex-shrink: 0;
   color: var(--stitch-text-secondary);
   transition: transform var(--stitch-motion-duration-base) var(--stitch-motion-ease);
 }
-._expanded_xqb89_40 ._indicator_xqb89_34 {
+._expanded_1t4ba_40 ._indicator_1t4ba_34 {
   transform: rotate(180deg);
 }
-._text_xqb89_43 {
+._text_1t4ba_43 {
   flex: 1;
   font-size: var(--stitch-font-size-lg);
   font-weight: var(--stitch-font-weight-medium);
   color: var(--stitch-text-primary);
   line-height: var(--stitch-line-height-base);
 }
-._panel_xqb89_50 {
+._panel_1t4ba_50 {
   display: grid;
   grid-template-rows: 0fr;
   transition: grid-template-rows var(--stitch-motion-duration-base) var(--stitch-motion-ease);
 }
-._expanded_xqb89_40 ._panel_xqb89_50 {
+._expanded_1t4ba_40 ._panel_1t4ba_50 {
   grid-template-rows: 1fr;
 }
-._content_xqb89_58 {
+._content_1t4ba_58 {
   overflow: hidden;
   padding: 0 var(--stitch-spacing-xl);
   color: var(--stitch-text-secondary);
@@ -746,30 +778,30 @@
   line-height: var(--stitch-line-height-base);
   transition: padding var(--stitch-motion-duration-base) var(--stitch-motion-ease);
 }
-._expanded_xqb89_40 ._content_xqb89_58 {
+._expanded_1t4ba_40 ._content_1t4ba_58 {
   padding-bottom: var(--stitch-spacing-xl);
 }
-._content_xqb89_58 a {
-  color: var(--stitch-accent);
+._content_1t4ba_58 a {
+  color: var(--stitch-link);
   text-decoration: none;
   font-weight: var(--stitch-font-weight-medium);
   transition: color var(--stitch-motion-duration-fast) var(--stitch-motion-ease);
 }
-._content_xqb89_58 a:hover {
-  color: var(--stitch-accent-hover);
+._content_1t4ba_58 a:hover {
+  color: color-mix(in srgb, var(--stitch-link), black 12%);
   text-decoration: underline;
 }
-._content_xqb89_58 p {
+._content_1t4ba_58 p {
   margin: 0 0 var(--stitch-spacing-sm) 0;
 }
-._content_xqb89_58 p:last-child {
+._content_1t4ba_58 p:last-child {
   margin-bottom: 0;
 }
-._content_xqb89_58 ul {
+._content_1t4ba_58 ul {
   margin: var(--stitch-spacing-sm) 0;
   padding-left: var(--stitch-spacing-xl);
 }
-._content_xqb89_58 li {
+._content_1t4ba_58 li {
   margin-bottom: var(--stitch-spacing-xs);
 }
 ._tabs_oy7wm_1 {
@@ -1551,14 +1583,14 @@
   --sa-size: 10px;
   --sa-track-pad: 2px;
 }
-._wrapper_i7k60_1 {
+._wrapper_158od_1 {
   position: relative;
   display: inline-block;
   min-width: 160px;
   font-family: var(--stitch-font-body);
   user-select: none;
 }
-._trigger_i7k60_8 {
+._trigger_158od_8 {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -1572,56 +1604,56 @@
   cursor: pointer;
   transition: border-color var(--stitch-motion-duration-base) var(--stitch-motion-ease), box-shadow var(--stitch-motion-duration-base) var(--stitch-motion-ease);
 }
-._trigger_i7k60_8:hover {
+._trigger_158od_8:hover {
   border-color: var(--stitch-border-strong);
 }
-._trigger_i7k60_8:focus-visible {
+._trigger_158od_8:focus-visible {
   outline: none;
   border-color: var(--stitch-accent);
   box-shadow: 0 0 0 2px var(--stitch-focus-ring);
 }
-._trigger_i7k60_8._open_i7k60_30 {
+._trigger_158od_8._open_158od_30 {
   border-color: var(--stitch-accent);
 }
-._small_i7k60_33 {
+._small_158od_33 {
   height: var(--stitch-height-sm);
   padding: 0 var(--stitch-spacing-md);
   font-size: var(--stitch-font-size-sm);
 }
-._middle_i7k60_38 {
+._middle_158od_38 {
   height: var(--stitch-height-base);
   padding: 0 var(--stitch-spacing-lg);
   font-size: var(--stitch-font-size-base);
 }
-._large_i7k60_43 {
+._large_158od_43 {
   height: var(--stitch-height-lg);
   padding: 0 var(--stitch-spacing-xl);
   font-size: var(--stitch-font-size-lg);
 }
-._value_i7k60_48 {
+._value_158od_48 {
   color: var(--stitch-text-primary);
   font-weight: var(--stitch-font-weight-medium);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-._placeholder_i7k60_55 {
+._placeholder_158od_55 {
   color: var(--stitch-text-muted);
   font-weight: var(--stitch-font-weight-normal);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-._arrow_i7k60_62 {
+._arrow_158od_62 {
   flex-shrink: 0;
   color: var(--stitch-text-secondary);
   transition: transform var(--stitch-motion-duration-base) var(--stitch-motion-ease);
 }
-._arrowOpen_i7k60_67 {
+._arrowOpen_158od_67 {
   transform: rotate(180deg);
-  color: var(--stitch-accent);
+  color: var(--stitch-brand);
 }
-._dropdown_i7k60_71 {
+._dropdown_158od_71 {
   position: absolute;
   left: 0;
   top: calc(100% + var(--stitch-spacing-xs));
@@ -1633,16 +1665,16 @@
   border-radius: var(--stitch-radius-card);
   box-shadow: var(--stitch-shadow-base);
   opacity: 0;
-  animation: _dropdownFadeIn_i7k60_1 var(--stitch-motion-duration-base) var(--stitch-motion-ease) forwards;
+  animation: _dropdownFadeIn_158od_1 var(--stitch-motion-duration-base) var(--stitch-motion-ease) forwards;
   overflow: hidden;
 }
-._dropdownScroll_i7k60_86 {
+._dropdownScroll_158od_86 {
   padding: var(--stitch-spacing-xs);
 }
-._dropdownScroll_i7k60_86 [data-radix-scroll-area-viewport] {
+._dropdownScroll_158od_86 [data-radix-scroll-area-viewport] {
   max-height: 280px;
 }
-@keyframes _dropdownFadeIn_i7k60_1 {
+@keyframes _dropdownFadeIn_158od_1 {
   from {
     opacity: 0;
     transform: translateY(-4px);
@@ -1652,7 +1684,7 @@
     transform: translateY(0);
   }
 }
-._option_i7k60_102 {
+._option_158od_102 {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -1665,38 +1697,38 @@
   white-space: nowrap;
   transition: background var(--stitch-motion-duration-fast) var(--stitch-motion-ease);
 }
-._optionLabel_i7k60_115 {
+._optionLabel_158od_115 {
   overflow: hidden;
   text-overflow: ellipsis;
 }
-._optionActive_i7k60_119 {
+._optionActive_158od_119 {
   background: var(--stitch-bg-section);
 }
-._optionSelected_i7k60_122 {
-  color: var(--stitch-accent);
+._optionSelected_158od_122 {
+  color: var(--stitch-brand);
   font-weight: var(--stitch-font-weight-medium);
 }
-._checkMark_i7k60_126 {
+._checkMark_158od_126 {
   flex-shrink: 0;
-  color: var(--stitch-accent);
+  color: var(--stitch-brand);
 }
-._optionDisabled_i7k60_130 {
+._optionDisabled_158od_130 {
   color: var(--stitch-text-disabled);
   cursor: not-allowed;
 }
-._optionDisabled_i7k60_130._optionActive_i7k60_119 {
+._optionDisabled_158od_130._optionActive_158od_119 {
   background: transparent;
 }
-._disabled_i7k60_137 ._trigger_i7k60_8 {
+._disabled_158od_137 ._trigger_158od_8 {
   background: var(--stitch-bg-disabled);
   color: var(--stitch-text-disabled);
   cursor: not-allowed;
   opacity: 0.6;
 }
-._disabled_i7k60_137 ._trigger_i7k60_8:hover {
+._disabled_158od_137 ._trigger_158od_8:hover {
   border-color: var(--stitch-border);
 }
-._disabled_i7k60_137 ._value_i7k60_48 {
+._disabled_158od_137 ._value_158od_48 {
   color: var(--stitch-text-disabled);
 }
 ._root_de6fy_1 {
@@ -2445,7 +2477,7 @@
 ._tok-jsx_zsyzk_49 {
   color: var(--stitch-cat-3);
 }
-._message_di477_1 {
+._message_dvybo_1 {
   box-sizing: border-box;
   display: flex;
   gap: var(--stitch-spacing-sm);
@@ -2454,64 +2486,65 @@
   font-size: var(--stitch-font-size-base);
   line-height: var(--stitch-line-height-base);
 }
-._variant-received_di477_10 {
+._variant-received_dvybo_10 {
   flex-direction: row;
   justify-content: flex-start;
 }
-._variant-sent_di477_14 {
+._variant-sent_dvybo_14 {
   flex-direction: row-reverse;
   justify-content: flex-start;
 }
-._variant-system_di477_18 {
+._variant-system_dvybo_18 {
   flex-direction: column;
   align-items: center;
   gap: var(--stitch-spacing-xs);
   text-align: center;
 }
-._avatar-slot_di477_24 {
+._avatar-slot_dvybo_24 {
   flex: none;
   width: 40px;
   display: flex;
   align-items: flex-end;
 }
-._body_di477_30 {
+._body_dvybo_30 {
   display: flex;
   flex-direction: column;
   max-width: 72%;
   min-width: 0;
 }
-._variant-sent_di477_14 ._body_di477_30 {
+._variant-sent_dvybo_14 ._body_dvybo_30 {
   align-items: flex-end;
 }
-._bubble_di477_39 {
+._bubble_dvybo_39 {
   padding: var(--stitch-spacing-sm) var(--stitch-spacing-md);
   border-radius: var(--stitch-radius-card);
   word-break: break-word;
   white-space: pre-wrap;
+  box-shadow: var(--stitch-shadow-base);
 }
-._variant-received_di477_10 ._bubble_di477_39 {
+._variant-received_dvybo_10 ._bubble_dvybo_39 {
   background: var(--stitch-bg-card);
   color: var(--stitch-text-primary);
 }
-._variant-sent_di477_14 ._bubble_di477_39 {
+._variant-sent_dvybo_14 ._bubble_dvybo_39 {
   background: color-mix(in srgb, var(--stitch-cat-1), var(--stitch-bg-canvas) 88%);
   color: color-mix(in srgb, var(--stitch-cat-1), var(--stitch-text-primary) 68%);
 }
-._bubble_di477_39 a {
-  color: var(--stitch-accent);
+._bubble_dvybo_39 a {
+  color: var(--stitch-link);
   text-decoration: none;
   font-weight: var(--stitch-font-weight-medium);
   transition: color var(--stitch-motion-duration-fast) var(--stitch-motion-ease);
 }
-._bubble_di477_39 a:hover {
-  color: var(--stitch-accent-hover);
+._bubble_dvybo_39 a:hover {
+  color: color-mix(in srgb, var(--stitch-link), black 12%);
   text-decoration: underline;
 }
-._emoji_di477_63 {
+._emoji_dvybo_64 {
   font-size: calc(var(--stitch-font-size-display) * 0.75);
   line-height: 1.1;
 }
-._system_di477_67 {
+._system_dvybo_68 {
   display: inline-block;
   padding: var(--stitch-spacing-xs) var(--stitch-spacing-md);
   border-radius: var(--stitch-radius-card);
@@ -2519,40 +2552,40 @@
   color: var(--stitch-text-muted);
   font-size: var(--stitch-font-size-sm);
 }
-._meta_di477_75,
-._meta-below_di477_76 {
+._meta_dvybo_76,
+._meta-below_dvybo_77 {
   font-size: calc(var(--stitch-font-size-sm) * 0.8);
   line-height: 1;
   color: var(--stitch-text-muted);
 }
-._meta_di477_75 {
+._meta_dvybo_76 {
   display: inline-flex;
   align-items: center;
   vertical-align: text-bottom;
   gap: var(--stitch-spacing-xs);
   margin-left: var(--stitch-spacing-sm);
 }
-._meta-below_di477_76 {
+._meta-below_dvybo_77 {
   display: flex;
   align-items: center;
   gap: var(--stitch-spacing-xs);
   margin-top: var(--stitch-spacing-xs);
 }
-._time_di477_94 {
+._time_dvybo_95 {
   color: var(--stitch-text-muted);
 }
-._ticks_di477_97 {
+._ticks_dvybo_98 {
   display: inline-flex;
   align-items: center;
   color: var(--stitch-text-muted);
 }
-._ticks_di477_97 ._tick_di477_97 + ._tick_di477_97 {
+._ticks_dvybo_98 ._tick_dvybo_98 + ._tick_dvybo_98 {
   margin-left: -0.55em;
 }
-._ticks-read_di477_105 {
+._ticks-read_dvybo_106 {
   color: var(--stitch-info);
 }
-._is-grouped_di477_108 {
+._is-grouped_dvybo_109 {
   margin-bottom: var(--stitch-spacing-xs);
 }
 ._content_6jxoc_1 {
@@ -4440,14 +4473,14 @@ button._trigger_1tjaq_8:focus-visible {
   cursor: not-allowed;
   pointer-events: none;
 }
-._root_phcem_1 {
+._root_i0lyd_1 {
   position: relative;
   display: flex;
   font-family: var(--stitch-font-body);
   font-size: var(--stitch-font-size-sm);
   line-height: var(--stitch-line-height-base);
 }
-._list_phcem_8 {
+._list_i0lyd_8 {
   display: flex;
   align-items: center;
   gap: var(--stitch-spacing-xs);
@@ -4455,11 +4488,11 @@ button._trigger_1tjaq_8:focus-visible {
   padding: 0;
   list-style: none;
 }
-._item_phcem_16 {
+._item_i0lyd_16 {
   position: relative;
 }
-._link_phcem_19,
-._trigger_phcem_20 {
+._link_i0lyd_19,
+._trigger_i0lyd_20 {
   display: inline-flex;
   align-items: center;
   gap: var(--stitch-spacing-xs);
@@ -4476,30 +4509,30 @@ button._trigger_1tjaq_8:focus-visible {
   outline: none;
   transition: color var(--stitch-motion-duration-fast) var(--stitch-motion-ease);
 }
-._link_phcem_19:hover,
-._trigger_phcem_20:hover {
+._link_i0lyd_19:hover,
+._trigger_i0lyd_20:hover {
   color: var(--stitch-text-primary);
 }
-._link_phcem_19:focus-visible,
-._trigger_phcem_20:focus-visible {
+._link_i0lyd_19:focus-visible,
+._trigger_i0lyd_20:focus-visible {
   outline: 2px solid var(--stitch-focus-ring);
   outline-offset: 2px;
 }
-._link_phcem_19[data-active] {
-  color: var(--stitch-accent);
+._link_i0lyd_19[data-active] {
+  color: var(--stitch-brand);
 }
-._trigger_phcem_20[data-state='open'] {
+._trigger_i0lyd_20[data-state='open'] {
   color: var(--stitch-text-primary);
 }
-._caret_phcem_52 {
+._caret_i0lyd_52 {
   flex-shrink: 0;
   color: var(--stitch-text-muted);
   transition: transform var(--stitch-motion-duration-fast) var(--stitch-motion-ease);
 }
-._trigger_phcem_20[data-state='open'] ._caret_phcem_52 {
+._trigger_i0lyd_20[data-state='open'] ._caret_i0lyd_52 {
   transform: rotate(180deg);
 }
-._viewportWrapper_phcem_60 {
+._viewportWrapper_i0lyd_60 {
   position: absolute;
   top: 100%;
   left: 0;
@@ -4507,7 +4540,7 @@ button._trigger_1tjaq_8:focus-visible {
   justify-content: flex-start;
   z-index: 100;
 }
-._viewport_phcem_60 {
+._viewport_i0lyd_60 {
   position: relative;
   margin-top: var(--stitch-spacing-sm);
   width: max-content;
@@ -4518,16 +4551,16 @@ button._trigger_1tjaq_8:focus-visible {
   box-shadow: var(--stitch-shadow-base);
   color: var(--stitch-text-primary);
 }
-._viewport_phcem_60[data-state='open'] {
-  animation: _stitch-navigation-menu-in_phcem_1 var(--stitch-motion-duration-base) var(--stitch-motion-ease);
+._viewport_i0lyd_60[data-state='open'] {
+  animation: _stitch-navigation-menu-in_i0lyd_1 var(--stitch-motion-duration-base) var(--stitch-motion-ease);
 }
-._viewport_phcem_60[data-state='closed'] {
-  animation: _stitch-navigation-menu-out_phcem_1 var(--stitch-motion-duration-fast) var(--stitch-motion-ease);
+._viewport_i0lyd_60[data-state='closed'] {
+  animation: _stitch-navigation-menu-out_i0lyd_1 var(--stitch-motion-duration-fast) var(--stitch-motion-ease);
 }
-._content_phcem_85 {
+._content_i0lyd_85 {
   padding: var(--stitch-spacing-lg);
 }
-@keyframes _stitch-navigation-menu-in_phcem_1 {
+@keyframes _stitch-navigation-menu-in_i0lyd_1 {
   from {
     opacity: 0;
     transform: translateY(-6px);
@@ -4537,7 +4570,7 @@ button._trigger_1tjaq_8:focus-visible {
     transform: translateY(0);
   }
 }
-@keyframes _stitch-navigation-menu-out_phcem_1 {
+@keyframes _stitch-navigation-menu-out_i0lyd_1 {
   from {
     opacity: 1;
     transform: translateY(0);

package/dist/themes/phantom.css

@@ -0,0 +1,75 @@
+/* site theme: phantom. per-site values only; constants/derived follow from :root. DO NOT EDIT. */
+[data-site="phantom"] {
+  --stitch-text-caption: 13px;
+  --stitch-leading-caption: 1.35;
+  --stitch-text-body-sm: 15px;
+  --stitch-leading-body-sm: 1.4;
+  --stitch-tracking-body-sm: -0.375px;
+  --stitch-text-subheading: 20px;
+  --stitch-leading-subheading: 1.35;
+  --stitch-tracking-subheading: -0.5px;
+  --stitch-text-heading-sm: 24px;
+  --stitch-leading-heading-sm: 1.25;
+  --stitch-tracking-heading-sm: -0.6px;
+  --stitch-text-heading: 30px;
+  --stitch-leading-heading: 1.21;
+  --stitch-tracking-heading: -0.75px;
+  --stitch-text-heading-lg: 64px;
+  --stitch-leading-heading-lg: 1.1;
+  --stitch-tracking-heading-lg: -1.6px;
+  --stitch-text-display: 96px;
+  --stitch-leading-display: 1;
+  --stitch-tracking-display: -2.4px;
+  --stitch-space-unit: 4px;
+  --stitch-space-4: 4px;
+  --stitch-space-8: 8px;
+  --stitch-space-12: 12px;
+  --stitch-space-16: 16px;
+  --stitch-space-20: 20px;
+  --stitch-space-24: 24px;
+  --stitch-space-32: 32px;
+  --stitch-space-48: 48px;
+  --stitch-space-64: 64px;
+  --stitch-space-96: 96px;
+  --stitch-space-128: 128px;
+  --stitch-page-max-width: 1200px;
+  --stitch-section-gap: 64px;
+  --stitch-card-padding: 48px;
+  --stitch-element-gap: 8px;
+  --stitch-bg-canvas: #fdfcfe;
+  --stitch-bg-section: #f4f2f4;
+  --stitch-bg-card: #fdfcfe;
+  --stitch-bg-elevated: #fdfcfe;
+  --stitch-bg-accent: #e2dffe;
+  --stitch-bg-inverted: #3c315b;
+  --stitch-text-primary: #1c1c1c;
+  --stitch-text-secondary: #86848d;
+  --stitch-text-muted: color-mix(in srgb, #86848d, #fdfcfe 40%);
+  --stitch-text-on-accent: #3c315b;
+  --stitch-text-on-dark: #fdfcfe;
+  --stitch-accent: #e2dffe;
+  --stitch-accent-text: #3c315b;
+  --stitch-brand: #3c315b;
+  --stitch-link: #3c315b;
+  --stitch-cat-1: #ab9ff2;
+  --stitch-cat-2: #4a87f2;
+  --stitch-cat-3: #ffffc4;
+  --stitch-cat-4: #ffdadc;
+  --stitch-cat-5: #3c315b;
+  --stitch-cat-6: #2ec08b;
+  --stitch-font-display: 'Phantom', 'Inter', 'DM Sans', ui-sans-serif, system-ui, sans-serif;
+  --stitch-font-body: 'Phantom', 'Inter', 'DM Sans', ui-sans-serif, system-ui, sans-serif;
+  --stitch-font-weight-normal: 350;
+  --stitch-font-weight-medium: 350;
+  --stitch-radius-button: 100px;
+  --stitch-radius-card: 24px;
+  --stitch-radius-input: 100px;
+  --stitch-radius-image: 24px;
+  --stitch-border: #e9e8ea;
+  --stitch-border-strong: #3c315b;
+  --stitch-icon-stroke-width: 1.5;
+  --stitch-shadow-sm: rgb(226, 223, 254) 0px 0px 4px 0px;
+  --stitch-shadow-base: rgb(226, 223, 254) 0px 0px 4px 0px;
+  --stitch-shadow-lg: rgb(226, 223, 254) 0px 0px 8px 0px;
+  --stitch-font-size-display: 96px;
+}

package/dist/themes/seline.css

@@ -1,5 +1,36 @@
 /* site theme: seline. per-site values only; constants/derived follow from :root. DO NOT EDIT. */
 [data-site="seline"] {
+  --stitch-text-caption: 10px;
+  --stitch-leading-caption: 2.3;
+  --stitch-text-body-lg: 16px;
+  --stitch-leading-body-lg: 1.69;
+  --stitch-tracking-body-lg: 0.048px;
+  --stitch-text-subheading: 20px;
+  --stitch-leading-subheading: 1.2;
+  --stitch-tracking-subheading: -0.1px;
+  --stitch-text-heading-sm: 32px;
+  --stitch-leading-heading-sm: 1.25;
+  --stitch-tracking-heading-sm: -0.8px;
+  --stitch-text-display: 52px;
+  --stitch-leading-display: 1.12;
+  --stitch-tracking-display: -1.092px;
+  --stitch-space-unit: 4px;
+  --stitch-space-4: 4px;
+  --stitch-space-8: 8px;
+  --stitch-space-12: 12px;
+  --stitch-space-16: 16px;
+  --stitch-space-24: 24px;
+  --stitch-space-32: 32px;
+  --stitch-space-40: 40px;
+  --stitch-space-48: 48px;
+  --stitch-space-64: 64px;
+  --stitch-space-80: 80px;
+  --stitch-space-96: 96px;
+  --stitch-space-160: 160px;
+  --stitch-page-max-width: 1200px;
+  --stitch-section-gap: 96px;
+  --stitch-card-padding: 24px;
+  --stitch-element-gap: 8px;
   --stitch-bg-canvas: #fafaf9;
   --stitch-bg-section: #fafaf9;
   --stitch-bg-card: #ffffff;

package/dist/themes/steep.css

@@ -1,5 +1,45 @@
 /* site theme: steep. per-site values only; constants/derived follow from :root. DO NOT EDIT. */
 [data-site="steep"] {
+  --stitch-text-caption: 15px;
+  --stitch-leading-caption: 1.5;
+  --stitch-text-body: 17px;
+  --stitch-leading-body: 1.35;
+  --stitch-text-body-lg: 20px;
+  --stitch-leading-body-lg: 1.35;
+  --stitch-text-subheading: 22px;
+  --stitch-leading-subheading: 1.5;
+  --stitch-text-heading-sm: 26px;
+  --stitch-leading-heading-sm: 1.18;
+  --stitch-tracking-heading-sm: -0.23px;
+  --stitch-text-heading: 44px;
+  --stitch-leading-heading: 1.3;
+  --stitch-tracking-heading: -0.66px;
+  --stitch-text-heading-lg: 64px;
+  --stitch-leading-heading-lg: 1.3;
+  --stitch-tracking-heading-lg: -0.96px;
+  --stitch-text-display: 90px;
+  --stitch-leading-display: 1.3;
+  --stitch-tracking-display: -2.25px;
+  --stitch-space-unit: 4px;
+  --stitch-space-4: 4px;
+  --stitch-space-8: 8px;
+  --stitch-space-12: 12px;
+  --stitch-space-16: 16px;
+  --stitch-space-20: 20px;
+  --stitch-space-24: 24px;
+  --stitch-space-28: 28px;
+  --stitch-space-32: 32px;
+  --stitch-space-40: 40px;
+  --stitch-space-64: 64px;
+  --stitch-space-80: 80px;
+  --stitch-space-96: 96px;
+  --stitch-space-124: 124px;
+  --stitch-space-128: 128px;
+  --stitch-space-160: 160px;
+  --stitch-page-max-width: 1200px;
+  --stitch-section-gap: 80px;
+  --stitch-card-padding: 20px;
+  --stitch-element-gap: 8px;
   --stitch-bg-canvas: #ffffff;
   --stitch-bg-section: #fafafb;
   --stitch-bg-card: #f2f2f3;
@@ -8,11 +48,11 @@
   --stitch-bg-inverted: #17191c;
   --stitch-text-primary: #17191c;
   --stitch-text-secondary: #777b86;
-  --stitch-text-muted: #979799;
+  --stitch-text-muted: #a3a6af;
   --stitch-text-on-accent: #5d2a1a;
   --stitch-accent: #17191c;
   --stitch-accent-text: #ffffff;
-  --stitch-link: #777b86;
+  --stitch-link: #17191c;
   --stitch-cat-1: #fbe1d1;
   --stitch-cat-2: #5d2a1a;
   --stitch-cat-3: #777b86;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@octohirono/stitch-design-system",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "type": "module",
   "scripts": {
     "prepublishOnly": "npm --prefix ../.. run ci",