@rio-m3e/tokens 0.1.0 → 0.2.0

package/dist/index.d.ts

@@ -40,6 +40,12 @@ export declare const MOTION_TOKENS: readonly ["fast-spatial", "default-spatial",
  * Effects tokens change color and opacity and never overshoot.
  */
 type MotionToken = (typeof MOTION_TOKENS)[number];
+/**
+ * The spatial tokens. Their springs are also available in the standard scheme whatever the
+ * theme's scheme, for motion the spec pins to it, such as the split button's menu icon.
+ */
+export declare const SPATIAL_MOTION_TOKENS: readonly ["fast-spatial", "default-spatial", "slow-spatial"];
+type SpatialMotionToken = (typeof SPATIAL_MOTION_TOKENS)[number];
 interface MotionSpring {
   /** 1 settles without overshoot; lower values bounce. */
   dampingRatio: number;
@@ -57,7 +63,13 @@ export declare function getMotionSpring(scheme: MotionScheme, token: MotionToken
 export declare function getMotionCurve(scheme: MotionScheme, token: MotionToken): MotionCurve;
 /** `duration` and `easing` describe the curve; `damping` and `stiffness` the raw spring. */
 type MotionVarPart = 'duration' | 'easing' | 'damping' | 'stiffness';
-type MotionVar = `${typeof TOKEN_PREFIX}-motion-${MotionToken}` | `${typeof TOKEN_PREFIX}-motion-${MotionToken}-${MotionVarPart}`;
+type MotionVar = `${typeof TOKEN_PREFIX}-motion-${MotionToken}` | `${typeof TOKEN_PREFIX}-motion-${MotionToken}-${MotionVarPart}` | StandardSpringVar;
+type StandardSpringVar = `${typeof TOKEN_PREFIX}-motion-standard-${SpatialMotionToken}-${'damping' | 'stiffness'}`;
+/**
+ * CSS variable for a spatial token's spring in the standard scheme, set whatever the theme's
+ * scheme is. In `@rio-m3e/core`, `readSpringParams(element, 'standard-fast-spatial')` reads it.
+ */
+export declare function standardSpringVar(token: SpatialMotionToken, part: 'damping' | 'stiffness'): StandardSpringVar;
 /**
  * CSS variable name for a token. Without `part`, the variable holds `<duration> <easing>`
  * and fits straight into `transition` or `animation`:
@@ -67,7 +79,8 @@ export declare function motionVar(token: MotionToken, part?: MotionVarPart): Mot
 /**
  * CSS variables for one scheme: the curve for CSS transitions, and the raw spring for the spring
  * solver in `@rio-m3e/core`, which reads them from the element it animates. The names don't
- * include the scheme.
+ * include the scheme. The standard scheme's spatial springs are added under their own names
+ * (`standardSpringVar`) whatever the scheme.
  */
 export declare function createMotionVariables(scheme?: MotionScheme): Record<MotionVar, string>;
 export declare const SHAPE_CORNERS: readonly ["none", "extra-small", "small", "medium", "large", "large-increased", "extra-large", "extra-large-increased", "extra-extra-large", "full"];
@@ -168,4 +181,4 @@ export declare function createThemeCss(options: ThemeOptions & {
  * It doesn't touch `color-scheme`; set that yourself.
  */
 export declare function applyTheme(target: HTMLElement, options: ThemeOptions): void;
-export type { ColorRole, ColorScheme, ColorSchemeOptions, ColorVar, CustomizableShapeCorner, ElevationLevel, ElevationVar, FocusIndicatorPart, MotionCurve, MotionScheme, MotionSpring, MotionToken, MotionVar, MotionVarPart, SchemeVariant, ShapeCorner, ShapeOverrides, ShapeVar, StateLayerState, StateVar, ThemeOptions, ThemeVar, TypeStyle, TypeStyleOptions, TypeStyleSpec, Typeface, TypefaceOverrides, TypefaceVar, TypescalePart, TypescaleVar, TypographyVar };
+export type { ColorRole, ColorScheme, ColorSchemeOptions, ColorVar, CustomizableShapeCorner, ElevationLevel, ElevationVar, FocusIndicatorPart, MotionCurve, MotionScheme, MotionSpring, MotionToken, MotionVar, MotionVarPart, SchemeVariant, ShapeCorner, ShapeOverrides, ShapeVar, SpatialMotionToken, StandardSpringVar, StateLayerState, StateVar, ThemeOptions, ThemeVar, TypeStyle, TypeStyleOptions, TypeStyleSpec, Typeface, TypefaceOverrides, TypefaceVar, TypescalePart, TypescaleVar, TypographyVar };

package/dist/index.js

@@ -5684,6 +5684,15 @@ const MOTION_TOKENS = [
 	"slow-effects"
 ];
 /**
+* The spatial tokens. Their springs are also available in the standard scheme whatever the
+* theme's scheme, for motion the spec pins to it, such as the split button's menu icon.
+*/
+const SPATIAL_MOTION_TOKENS = [
+	"fast-spatial",
+	"default-spatial",
+	"slow-spatial"
+];
+/**
 * Jetpack Compose Material3 `ExpressiveMotionTokens` and `StandardMotionTokens`
 * (token version v0_14_0, androidx 079e2e3). Pairs are [dampingRatio, stiffness].
 */
@@ -5816,6 +5825,13 @@ function getMotionCurve(scheme, token) {
 	};
 }
 /**
+* CSS variable for a spatial token's spring in the standard scheme, set whatever the theme's
+* scheme is. In `@rio-m3e/core`, `readSpringParams(element, 'standard-fast-spatial')` reads it.
+*/
+function standardSpringVar(token, part) {
+	return `${TOKEN_PREFIX}-motion-standard-${token}-${part}`;
+}
+/**
 * CSS variable name for a token. Without `part`, the variable holds `<duration> <easing>`
 * and fits straight into `transition` or `animation`:
 * `transition: transform var(--rio-motion-fast-spatial)`.
@@ -5826,7 +5842,8 @@ function motionVar(token, part) {
 /**
 * CSS variables for one scheme: the curve for CSS transitions, and the raw spring for the spring
 * solver in `@rio-m3e/core`, which reads them from the element it animates. The names don't
-* include the scheme.
+* include the scheme. The standard scheme's spatial springs are added under their own names
+* (`standardSpringVar`) whatever the scheme.
 */
 function createMotionVariables(scheme = "expressive") {
 	const vars = {};
@@ -5839,6 +5856,11 @@ function createMotionVariables(scheme = "expressive") {
 		vars[motionVar(token, "damping")] = String(dampingRatio);
 		vars[motionVar(token, "stiffness")] = String(stiffness);
 	}
+	for (const token of SPATIAL_MOTION_TOKENS) {
+		const { dampingRatio, stiffness } = getMotionSpring("standard", token);
+		vars[standardSpringVar(token, "damping")] = String(dampingRatio);
+		vars[standardSpringVar(token, "stiffness")] = String(stiffness);
+	}
 	return vars;
 }
 // src/shape/shape.ts
@@ -6253,4 +6275,4 @@ function createThemeCss(options) {
 function applyTheme(target, options) {
 	for (const [k, v] of Object.entries(createThemeVariables(options))) target.style.setProperty(k, v);
 }
-export { COLOR_ROLES, ELEVATION_LEVELS, FOCUS_INDICATOR_PARTS, MOTION_SCHEMES, MOTION_TOKENS, SHAPE_CORNERS, STATE_LAYER_STATES, TOKEN_PREFIX, TYPE_STYLES, applyTheme, colorVar, createColorScheme, createElevationVariables, createMotionVariables, createShapeVariables, createStateVariables, createThemeCss, createThemeVariables, createTypographyVariables, elevationVar, focusIndicatorVar, getMotionCurve, getMotionSpring, getTypeStyle, motionVar, shapeVar, stateLayerOpacityVar, typefaceVar, typescaleVar };
+export { COLOR_ROLES, ELEVATION_LEVELS, FOCUS_INDICATOR_PARTS, MOTION_SCHEMES, MOTION_TOKENS, SHAPE_CORNERS, SPATIAL_MOTION_TOKENS, STATE_LAYER_STATES, TOKEN_PREFIX, TYPE_STYLES, applyTheme, colorVar, createColorScheme, createElevationVariables, createMotionVariables, createShapeVariables, createStateVariables, createThemeCss, createThemeVariables, createTypographyVariables, elevationVar, focusIndicatorVar, getMotionCurve, getMotionSpring, getTypeStyle, motionVar, shapeVar, standardSpringVar, stateLayerOpacityVar, typefaceVar, typescaleVar };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rio-m3e/tokens",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Design tokens and dynamic color for Rio",
   "license": "Apache-2.0",
   "author": "LegenLee",