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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-native-rethemed/radix-ui-tokens",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Radix UI Themes tokens (Radix Colors scales, typography, radii, shadows) for React Native, ready for react-native-rethemed.",
   "keywords": [
     "react-native",
@@ -21,18 +21,11 @@
     "directory": "packages/react-native-rethemed/radix-ui"
   },
   "sideEffects": false,
-  "main": "./dist/cjs/index.js",
-  "types": "./dist/cjs/index.d.ts",
+  "types": "./dist/index.d.cts",
   "exports": {
     ".": {
-      "import": {
-        "types": "./dist/esm/index.d.ts",
-        "default": "./dist/esm/index.js"
-      },
-      "require": {
-        "types": "./dist/cjs/index.d.ts",
-        "default": "./dist/cjs/index.js"
-      }
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
     },
     "./package.json": "./package.json"
   },
@@ -43,26 +36,30 @@
     "access": "public"
   },
   "dependencies": {
-    "@react-native-rethemed/core": "^0.1.0"
+    "@react-native-rethemed/core": "^0.1.1"
   },
   "devDependencies": {
+    "@arethetypeswrong/core": "0.18.5",
     "@biomejs/biome": "2.5.4",
     "@radix-ui/themes": "3.3.0",
-    "@react-native-rethemed/cli": "0.1.0",
+    "@react-native-rethemed/cli": "0.1.1",
     "@types/culori": "4.0.1",
     "@types/node": "24.10.4",
     "@types/react": "19.2.17",
     "biome-config": "0.0.0",
     "culori": "4.0.2",
     "jiti": "2.7.0",
+    "publint": "0.3.25",
     "react": "19.2.3",
     "react-dom": "19.2.3",
     "react-native": "0.86.2",
+    "tsdown": "0.23.0",
+    "tsdown-config": "0.0.0",
     "typescript": "6.0.3",
     "vitest": "4.1.10"
   },
   "scripts": {
-    "build": "node ../../../scripts/build-package.mjs",
+    "build": "tsdown",
     "generate": "jiti scripts/generate.ts",
     "example:codegen": "react-native-rethemed codegen example/theme.ts --docs example/themed.md",
     "lint": "biome check src scripts example",
@@ -70,5 +67,6 @@
     "tsc": "tsc --noEmit",
     "test": "vitest",
     "test:ci": "vitest run"
-  }
+  },
+  "main": "./dist/index.cjs"
 }

package/dist/cjs/index.d.ts

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

package/dist/cjs/index.js

@@ -1,10 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.scales = exports.fontWeights = exports.radixUiTheme = exports.getMatchingGrayColor = exports.createRadixUiTheme = void 0;
-var theme_1 = require("./theme");
-Object.defineProperty(exports, "createRadixUiTheme", { enumerable: true, get: function () { return theme_1.createRadixUiTheme; } });
-Object.defineProperty(exports, "getMatchingGrayColor", { enumerable: true, get: function () { return theme_1.getMatchingGrayColor; } });
-Object.defineProperty(exports, "radixUiTheme", { enumerable: true, get: function () { return theme_1.radixUiTheme; } });
-var tokens_gen_1 = require("./tokens.gen");
-Object.defineProperty(exports, "fontWeights", { enumerable: true, get: function () { return tokens_gen_1.fontWeights; } });
-Object.defineProperty(exports, "scales", { enumerable: true, get: function () { return tokens_gen_1.scales; } });

package/dist/cjs/package.json

@@ -1 +0,0 @@
-{"type":"commonjs"}

package/dist/cjs/theme.js

@@ -1,161 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.radixUiTheme = void 0;
-exports.getMatchingGrayColor = getMatchingGrayColor;
-exports.createRadixUiTheme = createRadixUiTheme;
-const config_1 = require("@react-native-rethemed/core/config");
-const tokens_gen_1 = require("./tokens.gen");
-/**
- * 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 = tokens_gen_1.scalings[scaling];
-    const gray = tokens_gen_1.scales[grayColor === 'auto' ? getMatchingGrayColor(accentColor) : grayColor];
-    const sizes = tokens_gen_1.fontSizes;
-    const spacingsEm = tokens_gen_1.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, config_1.defineTheme)({
-        tokens: {
-            spacing: scaled(tokens_gen_1.space, factor),
-            radii: {
-                ...scaled(tokens_gen_1.radii, factor * tokens_gen_1.radiusFactors[radius]),
-                full: tokens_gen_1.radiusFull[radius],
-            },
-            fontSizes: scaled(tokens_gen_1.fontSizes, factor),
-            fontWeights: tokens_gen_1.fontWeights,
-            shadows: Object.fromEntries(Object.entries(tokens_gen_1.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: tokens_gen_1.scales[accentColor],
-                gray,
-                color: Object.fromEntries(Object.entries(tokens_gen_1.backgroundColors).map(([key, value]) => [
-                    key,
-                    {
-                        light: grayRef(value.light, gray, 'light'),
-                        dark: grayRef(value.dark, gray, 'dark'),
-                    },
-                ])),
-                ...Object.fromEntries(colors.map((name) => [name, tokens_gen_1.scales[name]])),
-            },
-            text: {
-                text: Object.fromEntries(Object.entries(tokens_gen_1.lineHeights).map(([size, lineHeight]) => [
-                    size,
-                    preset(size, lineHeight),
-                ])),
-                heading: Object.fromEntries(Object.entries(tokens_gen_1.headingLineHeights).map(([size, lineHeight]) => [
-                    size,
-                    {
-                        ...preset(size, lineHeight, tokens_gen_1.headingLetterSpacing),
-                        fontWeight: 'bold',
-                    },
-                ])),
-            },
-        },
-        defaults: { fontSize: '3' },
-    });
-}
-/** Radix Themes' defaults: `indigo` accent, `slate` gray, `medium` radius, `100%` scaling. */
-exports.radixUiTheme = createRadixUiTheme();