@bug-on/md3-tokens 3.0.0 → 3.0.3

package/src/shape.ts

@@ -0,0 +1,162 @@
+/**
+ * MD3 Expressive Shape Tokens
+ *
+ * TypeScript counterpart to `shape.css`. Provides numeric corner radius values,
+ * CSS custom property names, and asymmetric corner helpers.
+ *
+ * Updated for M3 Expressive (May 2025): 10-level corner radius scale.
+ *
+ * @see https://m3.material.io/styles/shape/corner-radius-scale
+ */
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Corner radius scale — numeric values in pixels
+// ─────────────────────────────────────────────────────────────────────────────
+
+/**
+ * Numeric corner radius values (px) for all 10 shape scale levels.
+ * Map directly to `--md-sys-shape-corner-*` CSS custom properties.
+ *
+ * @example
+ * ```ts
+ * element.style.borderRadius = `${cornerRadius.medium}px`; // 12px
+ * ```
+ */
+export const cornerRadius = {
+	none: 0,
+	extraSmall: 4,
+	small: 8,
+	medium: 12,
+	large: 16,
+	/** New in M3 Expressive (May 2025) */
+	largeIncreased: 20,
+	extraLarge: 28,
+	/** New in M3 Expressive (May 2025) */
+	extraLargeIncreased: 32,
+	/** New in M3 Expressive (May 2025) */
+	extraExtraLarge: 48,
+	full: 9999,
+} as const;
+
+export type CornerRadiusKey = keyof typeof cornerRadius;
+
+// ─────────────────────────────────────────────────────────────────────────────
+// CSS custom property names
+// ─────────────────────────────────────────────────────────────────────────────
+
+/**
+ * Maps each corner radius key to its CSS custom property name.
+ *
+ * @example
+ * ```ts
+ * const cssVar = cornerCssVar.medium; // "--md-sys-shape-corner-medium"
+ * element.style.borderRadius = `var(${cssVar})`;
+ * ```
+ */
+export const cornerCssVar: Record<CornerRadiusKey, string> = {
+	none: "--md-sys-shape-corner-none",
+	extraSmall: "--md-sys-shape-corner-extra-small",
+	small: "--md-sys-shape-corner-small",
+	medium: "--md-sys-shape-corner-medium",
+	large: "--md-sys-shape-corner-large",
+	largeIncreased: "--md-sys-shape-corner-large-increased",
+	extraLarge: "--md-sys-shape-corner-extra-large",
+	extraLargeIncreased: "--md-sys-shape-corner-extra-large-increased",
+	extraExtraLarge: "--md-sys-shape-corner-extra-extra-large",
+	full: "--md-sys-shape-corner-full",
+};
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Asymmetric corner helpers
+// Used for inner-corner components (menus, split buttons, grouped items).
+// ─────────────────────────────────────────────────────────────────────────────
+
+/**
+ * Describes per-corner rounding for asymmetric shapes.
+ * Follows CSS `border-radius` shorthand order:
+ * top-left, top-right, bottom-right, bottom-left.
+ */
+export interface AsymmetricCorners {
+	topLeft: number;
+	topRight: number;
+	bottomRight: number;
+	bottomLeft: number;
+}
+
+/** Shorthand presets for common asymmetric corner patterns. */
+export const asymmetricCorners = {
+	/** Fully rounded top, square bottom — e.g. menu at top of screen. */
+	topFull: (r = cornerRadius.extraLarge): AsymmetricCorners => ({
+		topLeft: r,
+		topRight: r,
+		bottomRight: 0,
+		bottomLeft: 0,
+	}),
+	/** Square top, fully rounded bottom — e.g. menu at bottom of screen. */
+	bottomFull: (r = cornerRadius.extraLarge): AsymmetricCorners => ({
+		topLeft: 0,
+		topRight: 0,
+		bottomRight: r,
+		bottomLeft: r,
+	}),
+	/** Rounded start edge only — e.g. left item in a grouped set. */
+	startFull: (r = cornerRadius.full): AsymmetricCorners => ({
+		topLeft: r,
+		topRight: 0,
+		bottomRight: 0,
+		bottomLeft: r,
+	}),
+	/** Rounded end edge only — e.g. right item in a grouped set. */
+	endFull: (r = cornerRadius.full): AsymmetricCorners => ({
+		topLeft: 0,
+		topRight: r,
+		bottomRight: r,
+		bottomLeft: 0,
+	}),
+} as const;
+
+/**
+ * Converts an `AsymmetricCorners` object to a CSS `border-radius` string.
+ *
+ * @example
+ * ```ts
+ * element.style.borderRadius = toCSS(asymmetricCorners.topFull());
+ * // "28px 28px 0px 0px"
+ * ```
+ */
+export function asymmetricCornersToCSS(corners: AsymmetricCorners): string {
+	return `${corners.topLeft}px ${corners.topRight}px ${corners.bottomRight}px ${corners.bottomLeft}px`;
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Optical roundness helper
+// When nesting rounded objects: inner radius = outer radius - padding
+// ─────────────────────────────────────────────────────────────────────────────
+
+/**
+ * Calculates the inner border-radius that maintains optical roundness
+ * when nesting one rounded container inside another.
+ *
+ * Formula: `inner = outer - padding`
+ *
+ * @see https://m3.material.io/styles/shape/corner-radius-scale#adjust-for-optical-roundness
+ *
+ * @example
+ * ```ts
+ * // Container has extraExtraLarge (48px), padding is 14px
+ * const inner = opticalRadius(cornerRadius.extraExtraLarge, 14); // 34
+ * ```
+ */
+export function opticalRadius(outerRadius: number, padding: number): number {
+	return Math.max(0, outerRadius - padding);
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Aggregate export
+// ─────────────────────────────────────────────────────────────────────────────
+
+export const shapeTokens = {
+	cornerRadius,
+	cornerCssVar,
+	asymmetricCorners,
+} as const;

package/tsup.config.ts

@@ -6,5 +6,4 @@ export default defineConfig({
 	dts: true,
 	sourcemap: true,
 	clean: true,
-	onSuccess: "node scripts/copy-css.js",
 });