@vinaverse/tokens 0.1.0-alpha.2 → 0.1.0-alpha.21

package/dist/index.d.cts

@@ -25,6 +25,10 @@ var color = {
 			$type: "color",
 			$value: "#545B67"
 		},
+		textSecondary: {
+			$type: "color",
+			$value: "#454B55"
+		},
 		primary: {
 			$type: "color",
 			$value: "#2B57CF"
@@ -84,6 +88,14 @@ var color = {
 		focus: {
 			$type: "color",
 			$value: "#2B57CF"
+		},
+		primarySubtle: {
+			$type: "color",
+			$value: "#F5F6F8"
+		},
+		rating: {
+			$type: "color",
+			$value: "#7A4F00"
 		}
 	},
 	dark: {
@@ -111,6 +123,10 @@ var color = {
 			$type: "color",
 			$value: "#A6ADBA"
 		},
+		textSecondary: {
+			$type: "color",
+			$value: "#BEC4CF"
+		},
 		primary: {
 			$type: "color",
 			$value: "#8DB0FF"
@@ -170,6 +186,14 @@ var color = {
 		focus: {
 			$type: "color",
 			$value: "#8DB0FF"
+		},
+		primarySubtle: {
+			$type: "color",
+			$value: "#181B21"
+		},
+		rating: {
+			$type: "color",
+			$value: "#E6B85C"
 		}
 	}
 };
@@ -260,9 +284,13 @@ var radius$1 = {
 	}
 };
 var motion$1 = {
+	instant: {
+		$type: "duration",
+		$value: 80
+	},
 	fast: {
 		$type: "duration",
-		$value: 120
+		$value: 140
 	},
 	normal: {
 		$type: "duration",
@@ -272,6 +300,26 @@ var motion$1 = {
 		$type: "duration",
 		$value: 600,
 		$description: "how long a connecting banner waits before it shows, so a quick connection never flashes one"
+	},
+	base: {
+		$type: "duration",
+		$value: 220
+	},
+	slow: {
+		$type: "duration",
+		$value: 320
+	},
+	stagger: {
+		$type: "duration",
+		$value: 30
+	},
+	rise: {
+		$type: "dimension",
+		$value: 8
+	},
+	pressScale: {
+		$type: "number",
+		$value: 0.97
 	}
 };
 var size$1 = {
@@ -289,6 +337,333 @@ var size$1 = {
 		$description: "the AI disclosure is never drawn smaller"
 	}
 };
+var chat$1 = {
+	$description: "The chat shell (spec 00), kit defaults a tenant overrides (ThemeOverrides.chat): elevation draws in light only.",
+	gutter: {
+		$type: "dimension",
+		$value: 16
+	},
+	gap: {
+		sameAuthor: {
+			$type: "dimension",
+			$value: 4
+		},
+		authorChange: {
+			$type: "dimension",
+			$value: 12
+		},
+		block: {
+			$type: "dimension",
+			$value: 8
+		}
+	},
+	bubble: {
+		padX: {
+			$type: "dimension",
+			$value: 14
+		},
+		padY: {
+			$type: "dimension",
+			$value: 10
+		},
+		maxWidth: {
+			$type: "number",
+			$value: 0.82
+		}
+	},
+	card: {
+		pad: {
+			$type: "dimension",
+			$value: 14
+		},
+		gap: {
+			$type: "dimension",
+			$value: 8
+		},
+		carouselGap: {
+			$type: "dimension",
+			$value: 10
+		},
+		carouselWidth: {
+			$type: "dimension",
+			$value: 214
+		}
+	},
+	chip: {
+		height: {
+			$type: "dimension",
+			$value: 38
+		},
+		gap: {
+			$type: "dimension",
+			$value: 8
+		}
+	},
+	header: {
+		height: {
+			$type: "dimension",
+			$value: 56
+		}
+	},
+	composer: {
+		minHeight: {
+			$type: "dimension",
+			$value: 48
+		}
+	},
+	input: {
+		gap: {
+			$type: "dimension",
+			$value: 12
+		}
+	},
+	radius: {
+		bubble: {
+			$type: "dimension",
+			$value: 20
+		},
+		bubbleTail: {
+			$type: "dimension",
+			$value: 6
+		},
+		card: {
+			$type: "dimension",
+			$value: 16
+		},
+		cardMedia: {
+			$type: "dimension",
+			$value: 12
+		},
+		chip: {
+			$type: "dimension",
+			$value: 999
+		},
+		slot: {
+			$type: "dimension",
+			$value: 12
+		},
+		field: {
+			$type: "dimension",
+			$value: 12
+		},
+		composer: {
+			$type: "dimension",
+			$value: 24
+		},
+		sheet: {
+			$type: "dimension",
+			$value: 28
+		}
+	},
+	elevation: {
+		card: {
+			$type: "shadow",
+			$value: {
+				offsetY: 1,
+				blur: 3,
+				opacity: 0.08
+			}
+		},
+		raised: {
+			$type: "shadow",
+			$value: {
+				offsetY: 4,
+				blur: 12,
+				opacity: 0.08
+			}
+		},
+		overlay: {
+			$type: "shadow",
+			$value: {
+				offsetY: 12,
+				blur: 28,
+				opacity: 0.12
+			}
+		},
+		sheet: {
+			$type: "shadow",
+			$value: {
+				offsetY: -4,
+				blur: 16,
+				opacity: 0.08
+			}
+		}
+	},
+	type: {
+		bubble: {
+			size: {
+				$type: "dimension",
+				$value: 16
+			},
+			line: {
+				$type: "dimension",
+				$value: 22
+			},
+			weight: {
+				$type: "fontWeight",
+				$value: 400
+			}
+		},
+		meta: {
+			size: {
+				$type: "dimension",
+				$value: 12
+			},
+			line: {
+				$type: "dimension",
+				$value: 16
+			},
+			weight: {
+				$type: "fontWeight",
+				$value: 400
+			}
+		},
+		cardTitle: {
+			size: {
+				$type: "dimension",
+				$value: 15
+			},
+			line: {
+				$type: "dimension",
+				$value: 20
+			},
+			weight: {
+				$type: "fontWeight",
+				$value: 600
+			}
+		},
+		cardBody: {
+			size: {
+				$type: "dimension",
+				$value: 13
+			},
+			line: {
+				$type: "dimension",
+				$value: 18
+			},
+			weight: {
+				$type: "fontWeight",
+				$value: 400
+			}
+		},
+		cardPrice: {
+			size: {
+				$type: "dimension",
+				$value: 15
+			},
+			line: {
+				$type: "dimension",
+				$value: 20
+			},
+			weight: {
+				$type: "fontWeight",
+				$value: 600
+			}
+		},
+		chip: {
+			size: {
+				$type: "dimension",
+				$value: 14
+			},
+			line: {
+				$type: "dimension",
+				$value: 20
+			},
+			weight: {
+				$type: "fontWeight",
+				$value: 500
+			}
+		},
+		working: {
+			size: {
+				$type: "dimension",
+				$value: 14
+			},
+			line: {
+				$type: "dimension",
+				$value: 19
+			},
+			weight: {
+				$type: "fontWeight",
+				$value: 400
+			}
+		}
+	},
+	thinking: {
+		dotSize: {
+			$type: "dimension",
+			$value: 6
+		},
+		dotGap: {
+			$type: "dimension",
+			$value: 4
+		},
+		rise: {
+			$type: "dimension",
+			$value: 3
+		},
+		cycle: {
+			$type: "duration",
+			$value: 900
+		},
+		delay: {
+			$type: "duration",
+			$value: 300
+		},
+		dotDelay: {
+			$type: "duration",
+			$value: 150
+		}
+	},
+	working: {
+		minStep: {
+			$type: "duration",
+			$value: 600
+		},
+		iconSize: {
+			$type: "dimension",
+			$value: 14
+		},
+		fontSize: {
+			$type: "dimension",
+			$value: 14
+		},
+		lineHeight: {
+			$type: "dimension",
+			$value: 19
+		}
+	},
+	caret: {
+		width: {
+			$type: "dimension",
+			$value: 2
+		},
+		height: {
+			$type: "dimension",
+			$value: 18
+		},
+		cycle: {
+			$type: "duration",
+			$value: 1000
+		}
+	},
+	stream: {
+		flush: {
+			$type: "duration",
+			$value: 50
+		}
+	},
+	skeleton: {
+		pulse: {
+			$type: "duration",
+			$value: 1200
+		},
+		minOpacity: {
+			$type: "number",
+			$value: 0.55
+		}
+	}
+};
 var contrast = {
 	$description: "The text and control pairs a theme must keep legible, in every mode: WCAG 2 ratio of fg on bg at least min (4.5 for text, 3 for controls and borders). divider is decorative and has none.",
 	pairs: [
@@ -312,6 +687,21 @@ var contrast = {
 			bg: "color.surface",
 			min: 4.5
 		},
+		{
+			fg: "color.textSecondary",
+			bg: "color.background",
+			min: 4.5
+		},
+		{
+			fg: "color.textSecondary",
+			bg: "color.surface",
+			min: 4.5
+		},
+		{
+			fg: "color.textSecondary",
+			bg: "color.agentBubble",
+			min: 4.5
+		},
 		{
 			fg: "color.agentText",
 			bg: "color.agentBubble",
@@ -357,6 +747,11 @@ var contrast = {
 			bg: "color.background",
 			min: 4.5
 		},
+		{
+			fg: "color.warning",
+			bg: "color.surface",
+			min: 4.5
+		},
 		{
 			fg: "color.success",
 			bg: "color.background",
@@ -371,9 +766,44 @@ var contrast = {
 			fg: "color.focus",
 			bg: "color.background",
 			min: 3
+		},
+		{
+			fg: "color.primary",
+			bg: "color.primarySubtle",
+			min: 4.5
 		}
 	]
 };
+var ease$1 = {
+	$description: "cubic-bezier control points: standard for what moves and stays, out for what enters, in for what leaves",
+	standard: {
+		$type: "cubicBezier",
+		$value: [
+			0.2,
+			0,
+			0,
+			1
+		]
+	},
+	out: {
+		$type: "cubicBezier",
+		$value: [
+			0.16,
+			1,
+			0.3,
+			1
+		]
+	},
+	"in": {
+		$type: "cubicBezier",
+		$value: [
+			0.4,
+			0,
+			1,
+			1
+		]
+	}
+};
 var json = {
 	$description: $description,
 	color: color,
@@ -382,7 +812,9 @@ var json = {
 	radius: radius$1,
 	motion: motion$1,
 	size: size$1,
-	contrast: contrast
+	chat: chat$1,
+	contrast: contrast,
+	ease: ease$1
 };
 
 type ColorScheme = 'light' | 'dark';
@@ -398,8 +830,149 @@ declare const font: {
 };
 declare const space: Readonly<Record<"xs" | "sm" | "md" | "lg" | "xl" | "xxs", number>>;
 declare const radius: Readonly<Record<"sm" | "md" | "lg" | "pill", number>>;
-declare const motion: Readonly<Record<"fast" | "normal" | "bannerDelay", number>>;
+declare const motion: Readonly<Record<"instant" | "fast" | "normal" | "bannerDelay" | "base" | "slow" | "stagger" | "rise" | "pressScale", number>>;
 declare const size: Readonly<Record<"touchTarget" | "avatar" | "disclosureFontMin", number>>;
+/** Easing curves as cubic-bezier control points: `standard` moves, `out` enters, `in` leaves. */
+declare const ease: Readonly<Record<"standard" | "out" | "in", number[]>>;
+/** A token group's values, nested as in the JSON, `$` keys dropped. */
+type TokenTree<T> = T extends {
+    readonly $value: infer V;
+} ? V : {
+    readonly [K in keyof T as K extends `$${string}` ? never : K]: TokenTree<T[K]>;
+};
+/**
+ * The chat shell (spec 00): spacing, radii, elevation (light only), type and the agent's state indicators, as a tenant
+ * overrides them through the theme (`ThemeOverrides.chat`).
+ */
+declare const chat: {
+    readonly gutter: number;
+    readonly gap: {
+        readonly sameAuthor: number;
+        readonly authorChange: number;
+        readonly block: number;
+    };
+    readonly bubble: {
+        readonly padX: number;
+        readonly padY: number;
+        readonly maxWidth: number;
+    };
+    readonly card: {
+        readonly pad: number;
+        readonly gap: number;
+        readonly carouselGap: number;
+        readonly carouselWidth: number;
+    };
+    readonly chip: {
+        readonly height: number;
+        readonly gap: number;
+    };
+    readonly header: {
+        readonly height: number;
+    };
+    readonly composer: {
+        readonly minHeight: number;
+    };
+    readonly input: {
+        readonly gap: number;
+    };
+    readonly radius: {
+        readonly bubble: number;
+        readonly bubbleTail: number;
+        readonly card: number;
+        readonly cardMedia: number;
+        readonly chip: number;
+        readonly slot: number;
+        readonly field: number;
+        readonly composer: number;
+        readonly sheet: number;
+    };
+    readonly elevation: {
+        readonly card: {
+            offsetY: number;
+            blur: number;
+            opacity: number;
+        };
+        readonly raised: {
+            offsetY: number;
+            blur: number;
+            opacity: number;
+        };
+        readonly overlay: {
+            offsetY: number;
+            blur: number;
+            opacity: number;
+        };
+        readonly sheet: {
+            offsetY: number;
+            blur: number;
+            opacity: number;
+        };
+    };
+    readonly type: {
+        readonly bubble: {
+            readonly size: number;
+            readonly line: number;
+            readonly weight: number;
+        };
+        readonly meta: {
+            readonly size: number;
+            readonly line: number;
+            readonly weight: number;
+        };
+        readonly cardTitle: {
+            readonly size: number;
+            readonly line: number;
+            readonly weight: number;
+        };
+        readonly cardBody: {
+            readonly size: number;
+            readonly line: number;
+            readonly weight: number;
+        };
+        readonly cardPrice: {
+            readonly size: number;
+            readonly line: number;
+            readonly weight: number;
+        };
+        readonly chip: {
+            readonly size: number;
+            readonly line: number;
+            readonly weight: number;
+        };
+        readonly working: {
+            readonly size: number;
+            readonly line: number;
+            readonly weight: number;
+        };
+    };
+    readonly thinking: {
+        readonly dotSize: number;
+        readonly dotGap: number;
+        readonly rise: number;
+        readonly cycle: number;
+        readonly delay: number;
+        readonly dotDelay: number;
+    };
+    readonly working: {
+        readonly minStep: number;
+        readonly iconSize: number;
+        readonly fontSize: number;
+        readonly lineHeight: number;
+    };
+    readonly caret: {
+        readonly width: number;
+        readonly height: number;
+        readonly cycle: number;
+    };
+    readonly stream: {
+        readonly flush: number;
+    };
+    readonly skeleton: {
+        readonly pulse: number;
+        readonly minOpacity: number;
+    };
+};
+type ChatTokens = typeof chat;
 /** The text and control pairs a theme must keep legible: [foreground, background, minimum WCAG contrast], from the JSON. */
 declare const CONTRAST_PAIRS: readonly (readonly [
     ColorName,
@@ -422,4 +995,4 @@ declare function contrastProblems(palette: Colors): {
     minimum: number;
 }[];
 
-export { CONTRAST_PAIRS, type ColorName, type ColorScheme, type Colors, colors, contrastProblems, contrastRatio, cssVariable, font, motion, radius, size, space, tokenPaths };
+export { CONTRAST_PAIRS, type ChatTokens, type ColorName, type ColorScheme, type Colors, type TokenTree, chat, colors, contrastProblems, contrastRatio, cssVariable, ease, font, motion, radius, size, space, tokenPaths };