@treeseed/core 0.8.7 → 0.8.9

package/dist/styles/theme.css

@@ -0,0 +1,177 @@
+html {
+	font-family: var(--font-sans);
+	font-feature-settings: "ss01" 1, "cv05" 1;
+	text-rendering: optimizeLegibility;
+}
+
+body {
+	font-family: var(--font-sans);
+}
+
+.ts-theme-selector {
+	display: grid;
+	gap: var(--ts-space-2);
+	color: var(--ts-color-text);
+}
+
+.ts-theme-menu {
+	position: relative;
+}
+
+.ts-theme-menu__trigger {
+	align-items: center;
+	background: var(--ts-color-surface);
+	border: 1px solid var(--ts-color-border);
+	border-radius: var(--ts-radius-md);
+	color: var(--ts-color-text-muted);
+	cursor: pointer;
+	display: inline-flex;
+	height: 2rem;
+	justify-content: center;
+	list-style: none;
+	padding: 0;
+	transition:
+		background-color 140ms ease,
+		border-color 140ms ease,
+		color 140ms ease;
+	width: 2rem;
+}
+
+.ts-theme-menu__trigger::-webkit-details-marker {
+	display: none;
+}
+
+.ts-theme-menu__trigger:hover,
+.ts-theme-menu[open] .ts-theme-menu__trigger {
+	background: var(--ts-color-surface-muted);
+	border-color: var(--ts-color-border-strong);
+	color: var(--ts-color-text);
+}
+
+.ts-theme-menu__trigger:focus-visible {
+	outline: 3px solid var(--ts-color-focus);
+	outline-offset: 2px;
+}
+
+.ts-theme-menu__trigger svg {
+	display: block;
+	fill: currentColor;
+	height: 1rem;
+	width: 1rem;
+}
+
+.ts-theme-menu__panel {
+	background: var(--ts-color-surface);
+	border: 1px solid var(--ts-color-border);
+	border-radius: var(--ts-radius-lg);
+	box-shadow: var(--ts-color-shadow);
+	inline-size: min(21rem, calc(100vw - 2rem));
+	inset-block-start: calc(100% + var(--ts-space-2));
+	inset-inline-end: 0;
+	padding: var(--ts-space-3);
+	position: absolute;
+	z-index: 80;
+}
+
+.ts-theme-selector--compact {
+	align-items: center;
+	grid-template-columns: auto minmax(0, 1fr);
+}
+
+.ts-theme-selector__summary {
+	display: inline-flex;
+	align-items: center;
+	gap: var(--ts-space-2);
+	min-width: 0;
+}
+
+.ts-theme-selector__label {
+	color: var(--ts-color-text-muted);
+	display: grid;
+	font-size: 0.82rem;
+	font-weight: 700;
+	gap: 0.08rem;
+	line-height: 1.2;
+	white-space: nowrap;
+}
+
+.ts-theme-selector__label small {
+	color: var(--ts-color-text-subtle);
+	font-size: 0.72rem;
+	font-weight: 600;
+	text-transform: capitalize;
+}
+
+.ts-theme-selector__controls {
+	display: grid;
+	grid-template-columns: minmax(8.5rem, 1fr) minmax(6.5rem, 0.75fr);
+	gap: var(--ts-space-2);
+	min-width: min(100%, 17rem);
+}
+
+.ts-theme-selector__field {
+	display: grid;
+	gap: 0.25rem;
+	min-width: 0;
+	color: var(--ts-color-text-subtle);
+	font-size: 0.75rem;
+	font-weight: 700;
+}
+
+.ts-theme-selector__field select {
+	width: 100%;
+	min-height: 2.25rem;
+	border: 1px solid var(--ts-color-border-strong);
+	border-radius: var(--ts-radius-sm);
+	background: var(--ts-color-surface);
+	color: var(--ts-color-text);
+	font: inherit;
+	font-size: 0.86rem;
+	font-weight: 700;
+	padding: 0.42rem 1.75rem 0.42rem 0.62rem;
+}
+
+.ts-theme-selector__field select:focus-visible {
+	border-color: var(--ts-color-focus);
+	outline: 2px solid var(--ts-color-focus);
+	outline-offset: 2px;
+}
+
+.ts-theme-swatch {
+	display: inline-grid;
+	grid-template-columns: repeat(4, 0.85rem);
+	gap: 0.16rem;
+	align-items: center;
+	flex: 0 0 auto;
+}
+
+.ts-theme-swatch__dot {
+	display: block;
+	width: 0.85rem;
+	height: 0.85rem;
+	border: 1px solid var(--ts-color-border);
+	border-radius: 999px;
+	background: var(--ts-preview-swatch-1, var(--ts-color-accent));
+}
+
+.ts-theme-swatch__dot[data-swatch-index="2"] {
+	background: var(--ts-preview-swatch-2, var(--ts-color-accent-hover));
+}
+
+.ts-theme-swatch__dot[data-swatch-index="3"] {
+	background: var(--ts-preview-swatch-3, var(--ts-color-surface));
+}
+
+.ts-theme-swatch__dot[data-swatch-index="4"] {
+	background: var(--ts-preview-swatch-4, var(--ts-color-text));
+}
+
+@media (max-width: 640px) {
+	.ts-theme-selector--compact {
+		grid-template-columns: 1fr;
+	}
+
+	.ts-theme-selector__controls {
+		grid-template-columns: 1fr;
+	}
+}

package/dist/styles/tokens.css

@@ -1,24 +1,64 @@
 :root {
-	--site-bg: #f4ede0;
-	--site-bg-elevated: #ede4d2;
-	--site-bg-soft: #f8f3e9;
-	--site-panel: rgba(244, 237, 224, 0.86);
-	--site-panel-strong: #e7dcc8;
-	--site-border: rgba(88, 77, 61, 0.16);
-	--site-border-strong: rgba(104, 132, 98, 0.34);
-	--site-grid: rgba(132, 154, 132, 0.14);
-	--site-text: #2e261c;
-	--site-text-muted: #4d4638;
-	--site-text-soft: #6b665b;
-	--site-accent: #c7dbc4;
-	--site-accent-strong: #5f7c5f;
-	--site-accent-soft: #e9f0e5;
-	--site-blue: #86aac0;
-	--site-blue-strong: #456679;
-	--site-blue-soft: #e4eef3;
-	--site-warm: #d7b07b;
-	--site-warm-strong: #7c5a2d;
-	--site-shadow: 0 24px 56px rgba(75, 60, 32, 0.08);
-	--site-radius: 0.65rem;
-	--site-max: 76rem;
+	--font-sans: "Aptos", "SF Pro Text", "Segoe UI Variable", "Segoe UI", "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
+	--font-serif: "Source Serif 4", "Iowan Old Style", "Palatino Linotype", ui-serif, Georgia, serif;
+	--font-mono: "JetBrains Mono", "SF Mono", "Cascadia Mono", "IBM Plex Mono", ui-monospace, monospace;
+
+	--ts-color-canvas: #f3f7ef;
+	--ts-color-canvas-subtle: #e8efe1;
+	--ts-color-surface: #ffffff;
+	--ts-color-surface-muted: #e8efe1;
+	--ts-color-surface-raised: #fafcf7;
+	--ts-color-surface-overlay: rgba(255, 255, 255, 0.88);
+
+	--ts-color-text: #1f2a20;
+	--ts-color-text-muted: #51604d;
+	--ts-color-text-subtle: #51604d;
+	--ts-color-text-inverse: #ffffff;
+	--ts-color-link: #3a6f75;
+	--ts-color-link-hover: #3f6f3f;
+
+	--ts-color-border: #cdd8c6;
+	--ts-color-border-muted: #cdd8c6;
+	--ts-color-border-strong: #aebca6;
+	--ts-color-focus: #3a6f75;
+
+	--ts-color-accent: #4f7d4e;
+	--ts-color-accent-hover: #3f6f3f;
+	--ts-color-accent-strong: #2f5a35;
+	--ts-color-accent-soft: #dcebd6;
+	--ts-color-accent-text: #ffffff;
+
+	--ts-color-info: #3a6f75;
+	--ts-color-info-soft: color-mix(in srgb, #3a6f75 18%, #ffffff);
+	--ts-color-info-text: #3a6f75;
+	--ts-color-info-border: color-mix(in srgb, #3a6f75 42%, #cdd8c6);
+
+	--ts-color-success: #287243;
+	--ts-color-success-soft: color-mix(in srgb, #287243 18%, #ffffff);
+	--ts-color-success-text: #287243;
+	--ts-color-success-border: color-mix(in srgb, #287243 42%, #cdd8c6);
+
+	--ts-color-warning: #8a6a1f;
+	--ts-color-warning-soft: color-mix(in srgb, #8a6a1f 18%, #ffffff);
+	--ts-color-warning-text: #8a6a1f;
+	--ts-color-warning-border: color-mix(in srgb, #8a6a1f 42%, #cdd8c6);
+
+	--ts-color-danger: #a23e35;
+	--ts-color-danger-soft: color-mix(in srgb, #a23e35 16%, #ffffff);
+	--ts-color-danger-text: #a23e35;
+	--ts-color-danger-border: color-mix(in srgb, #a23e35 42%, #cdd8c6);
+
+	--ts-color-shadow: 0 1px 2px rgba(31, 35, 40, 0.08);
+	--ts-color-grid: rgba(80, 100, 74, 0.12);
+
+	--ts-radius-sm: 0.375rem;
+	--ts-radius-md: 0.5rem;
+	--ts-radius-lg: 0.75rem;
+	--ts-space-1: 0.25rem;
+	--ts-space-2: 0.5rem;
+	--ts-space-3: 0.75rem;
+	--ts-space-4: 1rem;
+	--ts-content-width: 76rem;
+	--ts-reading-width: 78ch;
+	--ts-shell-width: 1200px;
 }