@react-native-rethemed/radix-ui-tokens 0.1.0 → 0.1.2

package/README.md

@@ -1,5 +1,7 @@
 # @react-native-rethemed/radix-ui-tokens
 
+[![npm](https://img.shields.io/npm/v/@react-native-rethemed/radix-ui-tokens.svg)](https://www.npmjs.com/package/@react-native-rethemed/radix-ui-tokens)
+
 Radix UI Themes tokens (Radix Colors scales, typography, radii, shadows) for React Native, ready for [react-native-rethemed](https://github.com/manakuro/react-native-rethemed).
 
 Radix Themes configured like `<Theme>`: accent / gray scales (12 steps + alpha) for light and dark, panel colors, space, radius, the Text / Heading presets and shadows.

package/dist/index.cjs

@@ -0,0 +1,8 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_tokens_gen = require("./tokens.gen.cjs");
+const require_theme = require("./theme.cjs");
+exports.createRadixUiTheme = require_theme.createRadixUiTheme;
+exports.fontWeights = require_tokens_gen.fontWeights;
+exports.getMatchingGrayColor = require_theme.getMatchingGrayColor;
+exports.radixUiTheme = require_theme.radixUiTheme;
+exports.scales = require_tokens_gen.scales;

package/dist/index.d.cts

@@ -0,0 +1,3 @@
+import { fontWeights, scales } from "./tokens.gen.cjs";
+import { AccentColor, GrayColor, Radius, RadixUiThemeOptions, ScaleName, Scaling, createRadixUiTheme, getMatchingGrayColor, radixUiTheme } from "./theme.cjs";
+export { type AccentColor, type GrayColor, type Radius, type RadixUiThemeOptions, type ScaleName, type Scaling, createRadixUiTheme, fontWeights, getMatchingGrayColor, radixUiTheme, scales };

package/dist/index.d.mts

@@ -0,0 +1,3 @@
+import { fontWeights, scales } from "./tokens.gen.mjs";
+import { AccentColor, GrayColor, Radius, RadixUiThemeOptions, ScaleName, Scaling, createRadixUiTheme, getMatchingGrayColor, radixUiTheme } from "./theme.mjs";
+export { type AccentColor, type GrayColor, type Radius, type RadixUiThemeOptions, type ScaleName, type Scaling, createRadixUiTheme, fontWeights, getMatchingGrayColor, radixUiTheme, scales };

package/dist/index.mjs

@@ -0,0 +1,3 @@
+import { fontWeights, scales } from "./tokens.gen.mjs";
+import { createRadixUiTheme, getMatchingGrayColor, radixUiTheme } from "./theme.mjs";
+export { createRadixUiTheme, fontWeights, getMatchingGrayColor, radixUiTheme, scales };

package/dist/theme.cjs

@@ -0,0 +1,148 @@
+const require_tokens_gen = require("./tokens.gen.cjs");
+let _react_native_rethemed_core_config = require("@react-native-rethemed/core/config");
+//#region src/theme.ts
+/**
+* The gray `grayColor: 'auto'` picks for an accent, as Radix Themes'
+* `getMatchingGrayColor` does.
+*/
+function getMatchingGrayColor(accentColor) {
+	switch (accentColor) {
+		case "tomato":
+		case "red":
+		case "ruby":
+		case "crimson":
+		case "pink":
+		case "plum":
+		case "purple":
+		case "violet": return "mauve";
+		case "iris":
+		case "indigo":
+		case "blue":
+		case "sky":
+		case "cyan": return "slate";
+		case "teal":
+		case "jade":
+		case "mint":
+		case "green": return "sage";
+		case "grass":
+		case "lime": return "olive";
+		case "yellow":
+		case "amber":
+		case "orange":
+		case "brown":
+		case "gold":
+		case "bronze": return "sand";
+		case "gray": return "gray";
+	}
+}
+const round = (n, digits = 2) => {
+	const factor = 10 ** digits;
+	return Math.round(n * factor) / factor;
+};
+const scaled = (table, factor) => Object.fromEntries(Object.entries(table).map(([key, value]) => [key, round(value * factor)]));
+/** `'gray.a2'` → that step of the theme's gray in `scheme`; hex as-is. */
+function grayRef(value, gray, scheme) {
+	return value.startsWith("gray.") ? gray[value.slice(5)][scheme] : value;
+}
+/** `#rrggbbaa` → `{ color: '#rrggbb', opacity }`. */
+function splitAlpha(hex) {
+	if (hex.length !== 9) return {
+		color: hex,
+		opacity: 1
+	};
+	return {
+		color: hex.slice(0, 7),
+		opacity: round(Number.parseInt(hex.slice(7), 16) / 255, 3)
+	};
+}
+/** Android elevation per shadow level; CSS has none, so picked by hand. */
+const SHADOW_ELEVATIONS = {
+	2: 2,
+	3: 4,
+	4: 8,
+	5: 12,
+	6: 16
+};
+/**
+* A Radix Themes theme, configured like `<Theme>`:
+*
+* ```ts
+* createRadixUiTheme({ accentColor: 'blue', radius: 'large', colors: ['red'] })
+* ```
+*
+* - `semanticTokens.colors`: `accent` and `gray` (each `1`–`12`, `a1`–`a12`,
+*   `contrast`, `surface`, `indicator`, `track`), `color` (`background`,
+*   `panel-solid`, `panel-translucent`, `surface`, `overlay`), plus the
+*   scales in `colors`. Every one switches with light/dark.
+* - `spacing` (`1`–`9`), `fontSizes` (`1`–`9`) and `radii` (`1`–`6`,
+*   `full`) follow `scaling` and `radius`.
+* - Text presets: `themed.text.text[3]()` is `<Text size="3">` and
+*   `themed.text.heading[3]()` is `<Heading size="3">` (bold, tighter line
+*   height), both with Radix's letter spacing.
+* - `shadows` `2`–`6`: one layer each, light-mode values; `1` is inset and
+*   left out.
+*/
+function createRadixUiTheme(options = {}) {
+	const { accentColor = "indigo", grayColor = "auto", radius = "medium", scaling = "100%", colors = [] } = options;
+	const factor = require_tokens_gen.scalings[scaling];
+	const gray = require_tokens_gen.scales[grayColor === "auto" ? getMatchingGrayColor(accentColor) : grayColor];
+	const sizes = require_tokens_gen.fontSizes;
+	const spacingsEm = require_tokens_gen.letterSpacings;
+	const preset = (size, lineHeight, extraEm = 0) => {
+		const fontSize = round(sizes[size] * factor);
+		return {
+			fontSize,
+			lineHeight: round(lineHeight * factor),
+			letterSpacing: round((spacingsEm[size] + extraEm) * fontSize, 3)
+		};
+	};
+	return (0, _react_native_rethemed_core_config.defineTheme)({
+		tokens: {
+			spacing: scaled(require_tokens_gen.space, factor),
+			radii: {
+				...scaled(require_tokens_gen.radii, factor * require_tokens_gen.radiusFactors[radius]),
+				full: require_tokens_gen.radiusFull[radius]
+			},
+			fontSizes: scaled(require_tokens_gen.fontSizes, factor),
+			fontWeights: require_tokens_gen.fontWeights,
+			shadows: Object.fromEntries(Object.entries(require_tokens_gen.shadows).map(([key, layer]) => {
+				const { color, opacity } = splitAlpha(grayRef(layer.color, gray, "light"));
+				return [key, {
+					shadowColor: color,
+					shadowOffset: {
+						width: layer.x,
+						height: layer.y
+					},
+					shadowOpacity: opacity,
+					shadowRadius: layer.blur / 2,
+					elevation: SHADOW_ELEVATIONS[key]
+				}];
+			}))
+		},
+		semanticTokens: {
+			colors: {
+				accent: require_tokens_gen.scales[accentColor],
+				gray,
+				color: Object.fromEntries(Object.entries(require_tokens_gen.backgroundColors).map(([key, value]) => [key, {
+					light: grayRef(value.light, gray, "light"),
+					dark: grayRef(value.dark, gray, "dark")
+				}])),
+				...Object.fromEntries(colors.map((name) => [name, require_tokens_gen.scales[name]]))
+			},
+			text: {
+				text: Object.fromEntries(Object.entries(require_tokens_gen.lineHeights).map(([size, lineHeight]) => [size, preset(size, lineHeight)])),
+				heading: Object.fromEntries(Object.entries(require_tokens_gen.headingLineHeights).map(([size, lineHeight]) => [size, {
+					...preset(size, lineHeight, 0),
+					fontWeight: "bold"
+				}]))
+			}
+		},
+		defaults: { fontSize: "3" }
+	});
+}
+/** Radix Themes' defaults: `indigo` accent, `slate` gray, `medium` radius, `100%` scaling. */
+const radixUiTheme = createRadixUiTheme();
+//#endregion
+exports.createRadixUiTheme = createRadixUiTheme;
+exports.getMatchingGrayColor = getMatchingGrayColor;
+exports.radixUiTheme = radixUiTheme;

package/dist/{esm/theme.d.ts → theme.d.cts}

@@ -1,5 +1,6 @@
-import { type ThemeConfig } from '@react-native-rethemed/core/config';
-import { radiusFactors, scales, scalings } from './tokens.gen.js';
+import { radiusFactors, scales, scalings } from "./tokens.gen.cjs";
+import { ThemeConfig } from "@react-native-rethemed/core/config";
+//#region src/theme.d.ts
 /** Every Radix color scale. */
 export type ScaleName = keyof typeof scales;
 /** `<Theme accentColor>`: every scale except the five tinted grays. */
@@ -9,20 +10,20 @@ export type GrayColor = 'auto' | Extract<ScaleName, 'gray' | 'mauve' | 'slate' |
 export type Radius = keyof typeof radiusFactors;
 export type Scaling = keyof typeof scalings;
 export type RadixUiThemeOptions = {
-    /** Default `indigo`. */
-    accentColor?: AccentColor;
-    /** Default `auto`. */
-    grayColor?: GrayColor;
-    /** Default `medium`. */
-    radius?: Radius;
-    /** Default `100%`. */
-    scaling?: Scaling;
-    /**
-     * More scales to use by name (`'red.9'`, `'green.a3'`), e.g. for status
-     * colors. `accent`, `gray` and `color` are always included; every scale
-     * would add ~870 colors to the generated types, so pick what you use.
-     */
-    colors?: Exclude<ScaleName, 'gray'>[];
+  /** Default `indigo`. */
+  accentColor?: AccentColor;
+  /** Default `auto`. */
+  grayColor?: GrayColor;
+  /** Default `medium`. */
+  radius?: Radius;
+  /** Default `100%`. */
+  scaling?: Scaling;
+  /**
+   * More scales to use by name (`'red.9'`, `'green.a3'`), e.g. for status
+   * colors. `accent`, `gray` and `color` are always included; every scale
+   * would add ~870 colors to the generated types, so pick what you use.
+   */
+  colors?: Exclude<ScaleName, 'gray'>[];
 };
 /**
  * The gray `grayColor: 'auto'` picks for an accent, as Radix Themes'
@@ -51,3 +52,4 @@ export declare function getMatchingGrayColor(accentColor: AccentColor): Exclude<
 export declare function createRadixUiTheme(options?: RadixUiThemeOptions): ThemeConfig;
 /** Radix Themes' defaults: `indigo` accent, `slate` gray, `medium` radius, `100%` scaling. */
 export declare const radixUiTheme: ThemeConfig;
+//#endregion

package/dist/{cjs/theme.d.ts → theme.d.mts}

@@ -1,5 +1,6 @@
-import { type ThemeConfig } from '@react-native-rethemed/core/config';
-import { radiusFactors, scales, scalings } from './tokens.gen';
+import { radiusFactors, scales, scalings } from "./tokens.gen.mjs";
+import { ThemeConfig } from "@react-native-rethemed/core/config";
+//#region src/theme.d.ts
 /** Every Radix color scale. */
 export type ScaleName = keyof typeof scales;
 /** `<Theme accentColor>`: every scale except the five tinted grays. */
@@ -9,20 +10,20 @@ export type GrayColor = 'auto' | Extract<ScaleName, 'gray' | 'mauve' | 'slate' |
 export type Radius = keyof typeof radiusFactors;
 export type Scaling = keyof typeof scalings;
 export type RadixUiThemeOptions = {
-    /** Default `indigo`. */
-    accentColor?: AccentColor;
-    /** Default `auto`. */
-    grayColor?: GrayColor;
-    /** Default `medium`. */
-    radius?: Radius;
-    /** Default `100%`. */
-    scaling?: Scaling;
-    /**
-     * More scales to use by name (`'red.9'`, `'green.a3'`), e.g. for status
-     * colors. `accent`, `gray` and `color` are always included; every scale
-     * would add ~870 colors to the generated types, so pick what you use.
-     */
-    colors?: Exclude<ScaleName, 'gray'>[];
+  /** Default `indigo`. */
+  accentColor?: AccentColor;
+  /** Default `auto`. */
+  grayColor?: GrayColor;
+  /** Default `medium`. */
+  radius?: Radius;
+  /** Default `100%`. */
+  scaling?: Scaling;
+  /**
+   * More scales to use by name (`'red.9'`, `'green.a3'`), e.g. for status
+   * colors. `accent`, `gray` and `color` are always included; every scale
+   * would add ~870 colors to the generated types, so pick what you use.
+   */
+  colors?: Exclude<ScaleName, 'gray'>[];
 };
 /**
  * The gray `grayColor: 'auto'` picks for an accent, as Radix Themes'
@@ -51,3 +52,4 @@ export declare function getMatchingGrayColor(accentColor: AccentColor): Exclude<
 export declare function createRadixUiTheme(options?: RadixUiThemeOptions): ThemeConfig;
 /** Radix Themes' defaults: `indigo` accent, `slate` gray, `medium` radius, `100%` scaling. */
 export declare const radixUiTheme: ThemeConfig;
+//#endregion

package/dist/theme.mjs

@@ -0,0 +1,146 @@
+import { backgroundColors, fontSizes, fontWeights, headingLineHeights, letterSpacings, lineHeights, radii, radiusFactors, radiusFull, scales, scalings, shadows, space } from "./tokens.gen.mjs";
+import { defineTheme } from "@react-native-rethemed/core/config";
+//#region src/theme.ts
+/**
+* The gray `grayColor: 'auto'` picks for an accent, as Radix Themes'
+* `getMatchingGrayColor` does.
+*/
+function getMatchingGrayColor(accentColor) {
+	switch (accentColor) {
+		case "tomato":
+		case "red":
+		case "ruby":
+		case "crimson":
+		case "pink":
+		case "plum":
+		case "purple":
+		case "violet": return "mauve";
+		case "iris":
+		case "indigo":
+		case "blue":
+		case "sky":
+		case "cyan": return "slate";
+		case "teal":
+		case "jade":
+		case "mint":
+		case "green": return "sage";
+		case "grass":
+		case "lime": return "olive";
+		case "yellow":
+		case "amber":
+		case "orange":
+		case "brown":
+		case "gold":
+		case "bronze": return "sand";
+		case "gray": return "gray";
+	}
+}
+const round = (n, digits = 2) => {
+	const factor = 10 ** digits;
+	return Math.round(n * factor) / factor;
+};
+const scaled = (table, factor) => Object.fromEntries(Object.entries(table).map(([key, value]) => [key, round(value * factor)]));
+/** `'gray.a2'` → that step of the theme's gray in `scheme`; hex as-is. */
+function grayRef(value, gray, scheme) {
+	return value.startsWith("gray.") ? gray[value.slice(5)][scheme] : value;
+}
+/** `#rrggbbaa` → `{ color: '#rrggbb', opacity }`. */
+function splitAlpha(hex) {
+	if (hex.length !== 9) return {
+		color: hex,
+		opacity: 1
+	};
+	return {
+		color: hex.slice(0, 7),
+		opacity: round(Number.parseInt(hex.slice(7), 16) / 255, 3)
+	};
+}
+/** Android elevation per shadow level; CSS has none, so picked by hand. */
+const SHADOW_ELEVATIONS = {
+	2: 2,
+	3: 4,
+	4: 8,
+	5: 12,
+	6: 16
+};
+/**
+* A Radix Themes theme, configured like `<Theme>`:
+*
+* ```ts
+* createRadixUiTheme({ accentColor: 'blue', radius: 'large', colors: ['red'] })
+* ```
+*
+* - `semanticTokens.colors`: `accent` and `gray` (each `1`–`12`, `a1`–`a12`,
+*   `contrast`, `surface`, `indicator`, `track`), `color` (`background`,
+*   `panel-solid`, `panel-translucent`, `surface`, `overlay`), plus the
+*   scales in `colors`. Every one switches with light/dark.
+* - `spacing` (`1`–`9`), `fontSizes` (`1`–`9`) and `radii` (`1`–`6`,
+*   `full`) follow `scaling` and `radius`.
+* - Text presets: `themed.text.text[3]()` is `<Text size="3">` and
+*   `themed.text.heading[3]()` is `<Heading size="3">` (bold, tighter line
+*   height), both with Radix's letter spacing.
+* - `shadows` `2`–`6`: one layer each, light-mode values; `1` is inset and
+*   left out.
+*/
+function createRadixUiTheme(options = {}) {
+	const { accentColor = "indigo", grayColor = "auto", radius = "medium", scaling = "100%", colors = [] } = options;
+	const factor = scalings[scaling];
+	const gray = scales[grayColor === "auto" ? getMatchingGrayColor(accentColor) : grayColor];
+	const sizes = fontSizes;
+	const spacingsEm = letterSpacings;
+	const preset = (size, lineHeight, extraEm = 0) => {
+		const fontSize = round(sizes[size] * factor);
+		return {
+			fontSize,
+			lineHeight: round(lineHeight * factor),
+			letterSpacing: round((spacingsEm[size] + extraEm) * fontSize, 3)
+		};
+	};
+	return defineTheme({
+		tokens: {
+			spacing: scaled(space, factor),
+			radii: {
+				...scaled(radii, factor * radiusFactors[radius]),
+				full: radiusFull[radius]
+			},
+			fontSizes: scaled(fontSizes, factor),
+			fontWeights,
+			shadows: Object.fromEntries(Object.entries(shadows).map(([key, layer]) => {
+				const { color, opacity } = splitAlpha(grayRef(layer.color, gray, "light"));
+				return [key, {
+					shadowColor: color,
+					shadowOffset: {
+						width: layer.x,
+						height: layer.y
+					},
+					shadowOpacity: opacity,
+					shadowRadius: layer.blur / 2,
+					elevation: SHADOW_ELEVATIONS[key]
+				}];
+			}))
+		},
+		semanticTokens: {
+			colors: {
+				accent: scales[accentColor],
+				gray,
+				color: Object.fromEntries(Object.entries(backgroundColors).map(([key, value]) => [key, {
+					light: grayRef(value.light, gray, "light"),
+					dark: grayRef(value.dark, gray, "dark")
+				}])),
+				...Object.fromEntries(colors.map((name) => [name, scales[name]]))
+			},
+			text: {
+				text: Object.fromEntries(Object.entries(lineHeights).map(([size, lineHeight]) => [size, preset(size, lineHeight)])),
+				heading: Object.fromEntries(Object.entries(headingLineHeights).map(([size, lineHeight]) => [size, {
+					...preset(size, lineHeight, 0),
+					fontWeight: "bold"
+				}]))
+			}
+		},
+		defaults: { fontSize: "3" }
+	});
+}
+/** Radix Themes' defaults: `indigo` accent, `slate` gray, `medium` radius, `100%` scaling. */
+const radixUiTheme = createRadixUiTheme();
+//#endregion
+export { createRadixUiTheme, getMatchingGrayColor, radixUiTheme };