@tarsis/toolkit 0.6.5 → 0.7.0

package/dist/tokens-DlMougUi.cjs

@@ -0,0 +1,469 @@
+//#region src/tokens/tokens.ts
+/**
+* Extract the CSS custom property name from a var() reference.
+* `'var(--space-4)'` -> `'--space-4'`
+*/
+var getVarName = (token) => {
+	const match = token.match(/^var\(([^,)]+)\)$/);
+	return match ? match[1].trim() : token;
+};
+/**
+* Compose an alpha-adjusted color from a channel token.
+* `opacity(Token.colorChannel.accent, 0.5)` -> `rgb(var(--color-channel-accent) / 0.5)`
+*/
+var opacity = (channel, value) => `rgb(${channel} / ${value})`;
+/**
+* Resolve the computed value of a CSS variable token at runtime.
+* Checks `document.body` first so semantic theme tokens resolve from the
+* same element they are defined on, then falls back to `document.documentElement`.
+*/
+var resolveToken = (token, element) => {
+	const varName = getVarName(token);
+	if (element) return getComputedStyle(element).getPropertyValue(varName).trim();
+	const bodyValue = document.body ? getComputedStyle(document.body).getPropertyValue(varName).trim() : "";
+	if (bodyValue) return bodyValue;
+	return getComputedStyle(document.documentElement).getPropertyValue(varName).trim();
+};
+var Token = {
+	color: {
+		black: "var(--color-black)",
+		white: "var(--color-white)",
+		accent1: "var(--color-accent1)",
+		accent2: "var(--color-accent2)",
+		accent3: "var(--color-accent3)",
+		accentGreen: "var(--color-accent-green)",
+		accentGreen1: "var(--color-accent-green1)",
+		surfaceCanvas: "var(--color-surface-canvas)",
+		surfaceRaised: "var(--color-surface-raised)",
+		surfaceElevated: "var(--color-surface-elevated)",
+		surfaceOverlay: "var(--color-surface-overlay)",
+		surfaceInverse: "var(--color-surface-inverse)",
+		surfaceDisabled: "var(--color-surface-disabled)",
+		textPrimary: "var(--color-text-primary)",
+		textSecondary: "var(--color-text-secondary)",
+		textTertiary: "var(--color-text-tertiary)",
+		textInverse: "var(--color-text-inverse)",
+		textDisabled: "var(--color-text-disabled)",
+		borderMuted: "var(--color-border-muted)",
+		borderSubtle: "var(--color-border-subtle)",
+		borderStrong: "var(--color-border-strong)",
+		accentPrimary: "var(--color-accent-primary)",
+		accentPrimaryMuted: "var(--color-accent-primary-muted)",
+		accentPrimaryEmphasis: "var(--color-accent-primary-emphasis)",
+		accentSuccess: "var(--color-accent-success)",
+		accentSuccessEmphasis: "var(--color-accent-success-emphasis)",
+		accentWarning: "var(--color-accent-warning)",
+		accentWarningEmphasis: "var(--color-accent-warning-emphasis)",
+		accentDanger: "var(--color-accent-danger)",
+		accentDangerEmphasis: "var(--color-accent-danger-emphasis)",
+		accentHighlight: "var(--color-accent-highlight)",
+		accentHighlightEmphasis: "var(--color-accent-highlight-emphasis)",
+		focusRing: "var(--color-focus-ring)",
+		bg: "var(--color-bg)",
+		gray1: "var(--color-gray1)",
+		gray2: "var(--color-gray2)",
+		gray3: "var(--color-gray3)",
+		gray4: "var(--color-gray4)",
+		gray5: "var(--color-gray5)",
+		gray6: "var(--color-gray6)",
+		gray7: "var(--color-gray7)",
+		gray8: "var(--color-gray8)",
+		gray9: "var(--color-gray9)",
+		gray10: "var(--color-gray10)",
+		gray11: "var(--color-gray11)",
+		gray12: "var(--color-gray12)",
+		grayA1: "var(--color-grayA1)",
+		grayA2: "var(--color-grayA2)",
+		grayA3: "var(--color-grayA3)",
+		grayA4: "var(--color-grayA4)",
+		grayA5: "var(--color-grayA5)",
+		grayA6: "var(--color-grayA6)",
+		grayA7: "var(--color-grayA7)",
+		grayA8: "var(--color-grayA8)",
+		grayA9: "var(--color-grayA9)",
+		grayA10: "var(--color-grayA10)",
+		grayA11: "var(--color-grayA11)",
+		grayA12: "var(--color-grayA12)",
+		blue1: "var(--color-blue1)",
+		blue2: "var(--color-blue2)",
+		blue3: "var(--color-blue3)",
+		blue4: "var(--color-blue4)",
+		blue5: "var(--color-blue5)",
+		blue6: "var(--color-blue6)",
+		blue7: "var(--color-blue7)",
+		blue8: "var(--color-blue8)",
+		blue9: "var(--color-blue9)",
+		blue10: "var(--color-blue10)",
+		blue11: "var(--color-blue11)",
+		blue12: "var(--color-blue12)",
+		green1: "var(--color-green1)",
+		green2: "var(--color-green2)",
+		green3: "var(--color-green3)",
+		green4: "var(--color-green4)",
+		green5: "var(--color-green5)",
+		green6: "var(--color-green6)",
+		green7: "var(--color-green7)",
+		green8: "var(--color-green8)",
+		green9: "var(--color-green9)",
+		green10: "var(--color-green10)",
+		green11: "var(--color-green11)",
+		green12: "var(--color-green12)",
+		amber1: "var(--color-amber1)",
+		amber2: "var(--color-amber2)",
+		amber3: "var(--color-amber3)",
+		amber4: "var(--color-amber4)",
+		amber5: "var(--color-amber5)",
+		amber6: "var(--color-amber6)",
+		amber7: "var(--color-amber7)",
+		amber8: "var(--color-amber8)",
+		amber9: "var(--color-amber9)",
+		amber10: "var(--color-amber10)",
+		amber11: "var(--color-amber11)",
+		amber12: "var(--color-amber12)",
+		purple1: "var(--color-purple1)",
+		purple2: "var(--color-purple2)",
+		purple3: "var(--color-purple3)",
+		purple4: "var(--color-purple4)",
+		purple5: "var(--color-purple5)",
+		purple6: "var(--color-purple6)",
+		purple7: "var(--color-purple7)",
+		purple8: "var(--color-purple8)",
+		purple9: "var(--color-purple9)",
+		purple10: "var(--color-purple10)",
+		purple11: "var(--color-purple11)",
+		purple12: "var(--color-purple12)",
+		red1: "var(--color-red1)",
+		red2: "var(--color-red2)",
+		red3: "var(--color-red3)",
+		red4: "var(--color-red4)",
+		red5: "var(--color-red5)",
+		red6: "var(--color-red6)",
+		red7: "var(--color-red7)",
+		red8: "var(--color-red8)",
+		red9: "var(--color-red9)",
+		red10: "var(--color-red10)",
+		red11: "var(--color-red11)",
+		red12: "var(--color-red12)"
+	},
+	space: {
+		s1: "var(--space-1)",
+		s2: "var(--space-2)",
+		s3: "var(--space-3)",
+		s4: "var(--space-4)",
+		s5: "var(--space-5)",
+		s6: "var(--space-6)",
+		s7: "var(--space-7)",
+		s8: "var(--space-8)",
+		s9: "var(--space-9)",
+		s10: "var(--space-10)",
+		s11: "var(--space-11)",
+		s12: "var(--space-12)",
+		s13: "var(--space-13)",
+		s14: "var(--space-14)",
+		s15: "var(--space-15)",
+		xs: "var(--space-xs)",
+		sm: "var(--space-sm)",
+		md: "var(--space-md)",
+		lg: "var(--space-lg)",
+		xl: "var(--space-xl)",
+		"2xl": "var(--space-2xl)",
+		"3xl": "var(--space-3xl)"
+	},
+	radius: {
+		r1: "var(--radius-1)",
+		r2: "var(--radius-2)",
+		r3: "var(--radius-3)",
+		r4: "var(--radius-4)",
+		r5: "var(--radius-5)",
+		r6: "var(--radius-6)",
+		r7: "var(--radius-7)",
+		xs: "var(--radius-xs)",
+		sm: "var(--radius-sm)",
+		md: "var(--radius-md)",
+		lg: "var(--radius-lg)",
+		xl: "var(--radius-xl)",
+		round: "var(--radius-round)",
+		pill: "var(--radius-pill)"
+	},
+	shadow: {
+		sm: "var(--shadow-sm)",
+		md: "var(--shadow-md)",
+		lg: "var(--shadow-lg)",
+		raised: "var(--shadow-raised)",
+		overlay: "var(--shadow-overlay)"
+	},
+	font: {
+		fancy: "var(--font-fancy)",
+		body: "var(--font-body)",
+		numeric: "var(--font-numeric)"
+	},
+	fontSize: {
+		f1: "var(--font-size-1)",
+		f2: "var(--font-size-2)",
+		f3: "var(--font-size-3)",
+		f4: "var(--font-size-4)",
+		f5: "var(--font-size-5)",
+		f6: "var(--font-size-6)",
+		f7: "var(--font-size-7)"
+	},
+	fontWeight: {
+		regular: "var(--font-weight-regular)",
+		medium: "var(--font-weight-medium)",
+		semibold: "var(--font-weight-semibold)",
+		bold: "var(--font-weight-bold)"
+	},
+	lineHeight: {
+		tight: "var(--line-height-tight)",
+		snug: "var(--line-height-snug)",
+		body: "var(--line-height-body)",
+		loose: "var(--line-height-loose)"
+	},
+	letterSpacing: {
+		tight: "var(--letter-spacing-tight)",
+		normal: "var(--letter-spacing-normal)",
+		wide: "var(--letter-spacing-wide)"
+	},
+	duration: {
+		fastest: "var(--duration-fastest)",
+		fast: "var(--duration-fast)",
+		normal: "var(--duration-normal)",
+		slow: "var(--duration-slow)",
+		slowest: "var(--duration-slowest)"
+	},
+	easing: {
+		snappy: "var(--easing-snappy)",
+		inQuad: "var(--ease-in-quad)",
+		inCubic: "var(--ease-in-cubic)",
+		inQuart: "var(--ease-in-quart)",
+		inQuint: "var(--ease-in-quint)",
+		inExpo: "var(--ease-in-expo)",
+		inCirc: "var(--ease-in-circ)",
+		outQuad: "var(--ease-out-quad)",
+		outCubic: "var(--ease-out-cubic)",
+		outQuart: "var(--ease-out-quart)",
+		outQuint: "var(--ease-out-quint)",
+		outExpo: "var(--ease-out-expo)",
+		outCirc: "var(--ease-out-circ)",
+		inOutQuad: "var(--ease-in-out-quad)",
+		inOutCubic: "var(--ease-in-out-cubic)",
+		inOutQuart: "var(--ease-in-out-quart)",
+		inOutQuint: "var(--ease-in-out-quint)",
+		inOutExpo: "var(--ease-in-out-expo)",
+		inOutCirc: "var(--ease-in-out-circ)"
+	},
+	transition: {
+		all: "var(--transition-all)",
+		shadow: "var(--transition-shadow)",
+		colors: "var(--transition-colors)",
+		background: "var(--transition-background)",
+		border: "var(--transition-border)",
+		opacity: "var(--transition-opacity)",
+		transform: "var(--transition-transform)"
+	},
+	colorChannel: {
+		accent: "var(--color-channel-accent)",
+		success: "var(--color-channel-success)",
+		danger: "var(--color-channel-danger)",
+		warning: "var(--color-channel-warning)",
+		highlight: "var(--color-channel-highlight)",
+		white: "var(--color-channel-white)",
+		black: "var(--color-channel-black)"
+	},
+	effectChannel: {
+		accent: "var(--effect-channel-accent)",
+		danger: "var(--effect-channel-danger)",
+		focusOutline: "var(--effect-channel-focus-outline)",
+		glass: "var(--effect-channel-glass)",
+		highlight: "var(--effect-channel-highlight)",
+		shadow: "var(--effect-channel-shadow)"
+	},
+	effect: {
+		accentRingSoft: "var(--effect-accent-ring-soft)",
+		focusOutline: "var(--effect-focus-outline)",
+		focusOutlineHighlight: "var(--effect-focus-outline-highlight)",
+		focusShadowAccent: "var(--effect-focus-shadow-accent)",
+		focusShadowHighlight: "var(--effect-focus-shadow-highlight)",
+		glassBorder: "var(--effect-glass-border)",
+		glassBorderSoft: "var(--effect-glass-border-soft)",
+		glassRing: "var(--effect-glass-ring)",
+		glassShadowDepth: "var(--effect-glass-shadow-depth)",
+		glassShadowSoft: "var(--effect-glass-shadow-soft)",
+		glassShell: "var(--effect-glass-shell)",
+		glassSurface: "var(--effect-glass-surface)",
+		glowBorder: "var(--effect-glow-border)",
+		glowCool: "var(--effect-glow-cool)",
+		glowOutline: "var(--effect-glow-outline)",
+		glowSheenEnd: "var(--effect-glow-sheen-end)",
+		glowSheenStart: "var(--effect-glow-sheen-start)",
+		glowVeil: "var(--effect-glow-veil)",
+		glowWarm: "var(--effect-glow-warm)",
+		glossLineFaint: "var(--effect-gloss-line-faint)",
+		glossLineMedium: "var(--effect-gloss-line-medium)",
+		glossLineSoft: "var(--effect-gloss-line-soft)",
+		glossLineStrong: "var(--effect-gloss-line-strong)",
+		highlightTrail: "var(--effect-highlight-trail)",
+		overlayScrim: "var(--effect-overlay-scrim)",
+		selectionAccent: "var(--effect-selection-accent)",
+		shadowFaint: "var(--effect-shadow-faint)",
+		shadowInteractive: "var(--effect-shadow-interactive)",
+		shadowMuted: "var(--effect-shadow-muted)",
+		shadowSoft: "var(--effect-shadow-soft)",
+		shadowStrong: "var(--effect-shadow-strong)",
+		thumbShadow: "var(--effect-thumb-shadow)",
+		tooltipSurface: "var(--effect-tooltip-surface)"
+	},
+	utils: { opacity },
+	textStyle: {
+		heading1: "var(--text-heading-1)",
+		heading2: "var(--text-heading-2)",
+		heading3: "var(--text-heading-3)",
+		body: "var(--text-body)",
+		bodyEmphasis: "var(--text-body-emphasis)",
+		small: "var(--text-small)",
+		caption: "var(--text-caption)"
+	},
+	zIndex: {
+		n1: "var(--z-index-n1)",
+		z0: "var(--z-index-0)",
+		z1: "var(--z-index-1)",
+		z2: "var(--z-index-2)",
+		z3: "var(--z-index-3)",
+		z4: "var(--z-index-4)",
+		z5: "var(--z-index-5)",
+		max: "var(--z-index-max)"
+	},
+	breakpoint: {
+		sm: "var(--breakpoint-sm)",
+		md: "var(--breakpoint-md)",
+		lg: "var(--breakpoint-lg)",
+		xl: "var(--breakpoint-xl)"
+	},
+	focusRingWidth: "var(--focus-ring-width)"
+};
+//#endregion
+//#region src/tokens/spring.ts
+/**
+* Standardised spring presets for framer-motion / react-spring.
+* Usage: <motion.div transition={springPreset.bouncy} />
+*/
+var springPreset = {
+	stiff: {
+		type: "spring",
+		stiffness: 400,
+		damping: 30,
+		mass: 1
+	},
+	bouncy: {
+		type: "spring",
+		stiffness: 300,
+		damping: 15,
+		mass: 1
+	},
+	gentle: {
+		type: "spring",
+		stiffness: 150,
+		damping: 20,
+		mass: 1
+	},
+	snappy: {
+		type: "spring",
+		stiffness: 500,
+		damping: 35,
+		mass: .8
+	},
+	slow: {
+		type: "spring",
+		stiffness: 100,
+		damping: 20,
+		mass: 1.5
+	}
+};
+//#endregion
+//#region src/tokens/colorValidation.ts
+/**
+* All semantic CSS custom property names that must be defined per theme.
+* Used for CI/test validation to assert theme completeness.
+*/
+var REQUIRED_SEMANTIC_VARS = [
+	"--color-surface-canvas",
+	"--color-surface-raised",
+	"--color-surface-elevated",
+	"--color-surface-overlay",
+	"--color-surface-inverse",
+	"--color-surface-disabled",
+	"--color-text-primary",
+	"--color-text-secondary",
+	"--color-text-tertiary",
+	"--color-text-inverse",
+	"--color-text-disabled",
+	"--color-border-muted",
+	"--color-border-subtle",
+	"--color-border-strong",
+	"--color-accent-primary",
+	"--color-accent-primary-muted",
+	"--color-accent-primary-emphasis",
+	"--color-accent-success",
+	"--color-accent-success-emphasis",
+	"--color-accent-warning",
+	"--color-accent-warning-emphasis",
+	"--color-accent-danger",
+	"--color-accent-danger-emphasis",
+	"--color-accent-highlight",
+	"--color-accent-highlight-emphasis",
+	"--color-focus-ring",
+	"--color-bg"
+];
+/**
+* Validate that all required semantic CSS variables are defined
+* on the given element (defaults to `document.body`).
+*/
+var validateColorScheme = (element) => {
+	const el = element ?? document.body;
+	const computed = getComputedStyle(el);
+	const missing = [];
+	const present = [];
+	for (const varName of REQUIRED_SEMANTIC_VARS) if (computed.getPropertyValue(varName).trim()) present.push(varName);
+	else missing.push(varName);
+	return {
+		valid: missing.length === 0,
+		missing,
+		present
+	};
+};
+//#endregion
+Object.defineProperty(exports, "REQUIRED_SEMANTIC_VARS", {
+	enumerable: true,
+	get: function() {
+		return REQUIRED_SEMANTIC_VARS;
+	}
+});
+Object.defineProperty(exports, "Token", {
+	enumerable: true,
+	get: function() {
+		return Token;
+	}
+});
+Object.defineProperty(exports, "getVarName", {
+	enumerable: true,
+	get: function() {
+		return getVarName;
+	}
+});
+Object.defineProperty(exports, "resolveToken", {
+	enumerable: true,
+	get: function() {
+		return resolveToken;
+	}
+});
+Object.defineProperty(exports, "springPreset", {
+	enumerable: true,
+	get: function() {
+		return springPreset;
+	}
+});
+Object.defineProperty(exports, "validateColorScheme", {
+	enumerable: true,
+	get: function() {
+		return validateColorScheme;
+	}
+});

package/dist/tokens.cjs

@@ -0,0 +1,12 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_animation = require("./animation-BauloIgQ.cjs");
+const require_tokens = require("./tokens-DlMougUi.cjs");
+exports.REQUIRED_SEMANTIC_VARS = require_tokens.REQUIRED_SEMANTIC_VARS;
+exports.Token = require_tokens.Token;
+exports.animationDuration = require_animation.animationDuration;
+exports.easing = require_animation.easing;
+exports.getVarName = require_tokens.getVarName;
+exports.resolveToken = require_tokens.resolveToken;
+exports.springPreset = require_tokens.springPreset;
+exports.staggerDelay = require_animation.staggerDelay;
+exports.validateColorScheme = require_tokens.validateColorScheme;