@react-native-rethemed/shadcn-ui-tokens 0.1.0 → 0.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -0
- package/dist/index.cjs +35 -0
- package/dist/index.d.cts +153 -0
- package/dist/index.d.mts +153 -0
- package/dist/index.mjs +31 -0
- package/dist/tokens.gen.cjs +899 -0
- package/dist/tokens.gen.d.cts +897 -0
- package/dist/tokens.gen.d.mts +897 -0
- package/dist/tokens.gen.mjs +898 -0
- package/package.json +14 -16
- package/dist/cjs/index.d.ts +0 -151
- package/dist/cjs/index.js +0 -33
- package/dist/cjs/package.json +0 -1
- package/dist/cjs/tokens.gen.d.ts +0 -895
- package/dist/cjs/tokens.gen.js +0 -249
- package/dist/esm/index.d.ts +0 -151
- package/dist/esm/index.js +0 -29
- package/dist/esm/package.json +0 -1
- package/dist/esm/tokens.gen.d.ts +0 -895
- package/dist/esm/tokens.gen.js +0 -246
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@react-native-rethemed/shadcn-ui-tokens",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.2",
|
|
4
4
|
"description": "shadcn/ui's theme (semantic colors, radii, all base colors) for React Native, ready for react-native-rethemed.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react-native",
|
|
@@ -21,18 +21,11 @@
|
|
|
21
21
|
"directory": "packages/react-native-rethemed/shadcn-ui"
|
|
22
22
|
},
|
|
23
23
|
"sideEffects": false,
|
|
24
|
-
"
|
|
25
|
-
"types": "./dist/cjs/index.d.ts",
|
|
24
|
+
"types": "./dist/index.d.cts",
|
|
26
25
|
"exports": {
|
|
27
26
|
".": {
|
|
28
|
-
"import":
|
|
29
|
-
|
|
30
|
-
"default": "./dist/esm/index.js"
|
|
31
|
-
},
|
|
32
|
-
"require": {
|
|
33
|
-
"types": "./dist/cjs/index.d.ts",
|
|
34
|
-
"default": "./dist/cjs/index.js"
|
|
35
|
-
}
|
|
27
|
+
"import": "./dist/index.mjs",
|
|
28
|
+
"require": "./dist/index.cjs"
|
|
36
29
|
},
|
|
37
30
|
"./package.json": "./package.json"
|
|
38
31
|
},
|
|
@@ -43,25 +36,29 @@
|
|
|
43
36
|
"access": "public"
|
|
44
37
|
},
|
|
45
38
|
"dependencies": {
|
|
46
|
-
"@react-native-rethemed/core": "^0.1.
|
|
47
|
-
"@react-native-rethemed/tailwind-css-tokens": "^0.1.
|
|
39
|
+
"@react-native-rethemed/core": "^0.1.2",
|
|
40
|
+
"@react-native-rethemed/tailwind-css-tokens": "^0.1.2"
|
|
48
41
|
},
|
|
49
42
|
"devDependencies": {
|
|
43
|
+
"@arethetypeswrong/core": "0.18.5",
|
|
50
44
|
"@biomejs/biome": "2.5.4",
|
|
51
|
-
"@react-native-rethemed/cli": "0.1.
|
|
45
|
+
"@react-native-rethemed/cli": "0.1.2",
|
|
52
46
|
"@types/culori": "4.0.1",
|
|
53
47
|
"@types/node": "24.10.4",
|
|
54
48
|
"@types/react": "19.2.17",
|
|
55
49
|
"biome-config": "0.0.0",
|
|
56
50
|
"culori": "4.0.2",
|
|
57
51
|
"jiti": "2.7.0",
|
|
52
|
+
"publint": "0.3.25",
|
|
58
53
|
"react": "19.2.3",
|
|
59
54
|
"react-native": "0.86.2",
|
|
55
|
+
"tsdown": "0.23.0",
|
|
56
|
+
"tsdown-config": "0.0.0",
|
|
60
57
|
"typescript": "6.0.3",
|
|
61
58
|
"vitest": "4.1.10"
|
|
62
59
|
},
|
|
63
60
|
"scripts": {
|
|
64
|
-
"build": "
|
|
61
|
+
"build": "tsdown",
|
|
65
62
|
"sync": "jiti scripts/sync.ts",
|
|
66
63
|
"generate": "jiti scripts/generate.ts",
|
|
67
64
|
"example:codegen": "react-native-rethemed codegen example/theme.ts --docs example/themed.md",
|
|
@@ -70,5 +67,6 @@
|
|
|
70
67
|
"tsc": "tsc --noEmit",
|
|
71
68
|
"test": "vitest",
|
|
72
69
|
"test:ci": "vitest run"
|
|
73
|
-
}
|
|
70
|
+
},
|
|
71
|
+
"main": "./dist/index.cjs"
|
|
74
72
|
}
|
package/dist/cjs/index.d.ts
DELETED
|
@@ -1,151 +0,0 @@
|
|
|
1
|
-
import { baseColors, radii } from './tokens.gen';
|
|
2
|
-
/** A shadcn/ui base color: `neutral` (the default), `stone`, `zinc`, … */
|
|
3
|
-
export type BaseColor = keyof typeof baseColors;
|
|
4
|
-
/** The default base color's semantic colors (`neutral`). */
|
|
5
|
-
export declare const semanticColors: {
|
|
6
|
-
readonly background: {
|
|
7
|
-
readonly light: "#ffffff";
|
|
8
|
-
readonly dark: "#0a0a0a";
|
|
9
|
-
};
|
|
10
|
-
readonly foreground: {
|
|
11
|
-
readonly light: "#0a0a0a";
|
|
12
|
-
readonly dark: "#fafafa";
|
|
13
|
-
};
|
|
14
|
-
readonly card: {
|
|
15
|
-
readonly light: "#ffffff";
|
|
16
|
-
readonly dark: "#171717";
|
|
17
|
-
};
|
|
18
|
-
readonly 'card-foreground': {
|
|
19
|
-
readonly light: "#0a0a0a";
|
|
20
|
-
readonly dark: "#fafafa";
|
|
21
|
-
};
|
|
22
|
-
readonly popover: {
|
|
23
|
-
readonly light: "#ffffff";
|
|
24
|
-
readonly dark: "#171717";
|
|
25
|
-
};
|
|
26
|
-
readonly 'popover-foreground': {
|
|
27
|
-
readonly light: "#0a0a0a";
|
|
28
|
-
readonly dark: "#fafafa";
|
|
29
|
-
};
|
|
30
|
-
readonly primary: {
|
|
31
|
-
readonly light: "#171717";
|
|
32
|
-
readonly dark: "#e5e5e5";
|
|
33
|
-
};
|
|
34
|
-
readonly 'primary-foreground': {
|
|
35
|
-
readonly light: "#fafafa";
|
|
36
|
-
readonly dark: "#171717";
|
|
37
|
-
};
|
|
38
|
-
readonly secondary: {
|
|
39
|
-
readonly light: "#f5f5f5";
|
|
40
|
-
readonly dark: "#262626";
|
|
41
|
-
};
|
|
42
|
-
readonly 'secondary-foreground': {
|
|
43
|
-
readonly light: "#171717";
|
|
44
|
-
readonly dark: "#fafafa";
|
|
45
|
-
};
|
|
46
|
-
readonly muted: {
|
|
47
|
-
readonly light: "#f5f5f5";
|
|
48
|
-
readonly dark: "#262626";
|
|
49
|
-
};
|
|
50
|
-
readonly 'muted-foreground': {
|
|
51
|
-
readonly light: "#737373";
|
|
52
|
-
readonly dark: "#a1a1a1";
|
|
53
|
-
};
|
|
54
|
-
readonly accent: {
|
|
55
|
-
readonly light: "#f5f5f5";
|
|
56
|
-
readonly dark: "#262626";
|
|
57
|
-
};
|
|
58
|
-
readonly 'accent-foreground': {
|
|
59
|
-
readonly light: "#171717";
|
|
60
|
-
readonly dark: "#fafafa";
|
|
61
|
-
};
|
|
62
|
-
readonly destructive: {
|
|
63
|
-
readonly light: "#e7000b";
|
|
64
|
-
readonly dark: "#ff6467";
|
|
65
|
-
};
|
|
66
|
-
readonly border: {
|
|
67
|
-
readonly light: "#e5e5e5";
|
|
68
|
-
readonly dark: "#ffffff1a";
|
|
69
|
-
};
|
|
70
|
-
readonly input: {
|
|
71
|
-
readonly light: "#e5e5e5";
|
|
72
|
-
readonly dark: "#ffffff26";
|
|
73
|
-
};
|
|
74
|
-
readonly ring: {
|
|
75
|
-
readonly light: "#a1a1a1";
|
|
76
|
-
readonly dark: "#737373";
|
|
77
|
-
};
|
|
78
|
-
readonly 'chart-1': {
|
|
79
|
-
readonly light: "#d4d4d4";
|
|
80
|
-
readonly dark: "#d4d4d4";
|
|
81
|
-
};
|
|
82
|
-
readonly 'chart-2': {
|
|
83
|
-
readonly light: "#737373";
|
|
84
|
-
readonly dark: "#737373";
|
|
85
|
-
};
|
|
86
|
-
readonly 'chart-3': {
|
|
87
|
-
readonly light: "#525252";
|
|
88
|
-
readonly dark: "#525252";
|
|
89
|
-
};
|
|
90
|
-
readonly 'chart-4': {
|
|
91
|
-
readonly light: "#404040";
|
|
92
|
-
readonly dark: "#404040";
|
|
93
|
-
};
|
|
94
|
-
readonly 'chart-5': {
|
|
95
|
-
readonly light: "#262626";
|
|
96
|
-
readonly dark: "#262626";
|
|
97
|
-
};
|
|
98
|
-
readonly sidebar: {
|
|
99
|
-
readonly light: "#fafafa";
|
|
100
|
-
readonly dark: "#171717";
|
|
101
|
-
};
|
|
102
|
-
readonly 'sidebar-foreground': {
|
|
103
|
-
readonly light: "#0a0a0a";
|
|
104
|
-
readonly dark: "#fafafa";
|
|
105
|
-
};
|
|
106
|
-
readonly 'sidebar-primary': {
|
|
107
|
-
readonly light: "#171717";
|
|
108
|
-
readonly dark: "#1447e6";
|
|
109
|
-
};
|
|
110
|
-
readonly 'sidebar-primary-foreground': {
|
|
111
|
-
readonly light: "#fafafa";
|
|
112
|
-
readonly dark: "#fafafa";
|
|
113
|
-
};
|
|
114
|
-
readonly 'sidebar-accent': {
|
|
115
|
-
readonly light: "#f5f5f5";
|
|
116
|
-
readonly dark: "#262626";
|
|
117
|
-
};
|
|
118
|
-
readonly 'sidebar-accent-foreground': {
|
|
119
|
-
readonly light: "#171717";
|
|
120
|
-
readonly dark: "#fafafa";
|
|
121
|
-
};
|
|
122
|
-
readonly 'sidebar-border': {
|
|
123
|
-
readonly light: "#e5e5e5";
|
|
124
|
-
readonly dark: "#ffffff1a";
|
|
125
|
-
};
|
|
126
|
-
readonly 'sidebar-ring': {
|
|
127
|
-
readonly light: "#a1a1a1";
|
|
128
|
-
readonly dark: "#737373";
|
|
129
|
-
};
|
|
130
|
-
};
|
|
131
|
-
/**
|
|
132
|
-
* shadcn/ui's default theme (base color `neutral`), converted for React
|
|
133
|
-
* Native. shadcn/ui is Tailwind CSS plus CSS variables, so this is
|
|
134
|
-
* `tailwindCssTheme` (spacing, typography, shadows, the color palette) with
|
|
135
|
-
* shadcn/ui's colors and radii on top, the same layering as a shadcn/ui
|
|
136
|
-
* project's `globals.css`.
|
|
137
|
-
*
|
|
138
|
-
* - Semantic colors use shadcn/ui's names as top-level colors, so styles
|
|
139
|
-
* read like the class names: `bg-primary text-primary-foreground` is
|
|
140
|
-
* `themed.view({ backgroundColor: 'primary' })` /
|
|
141
|
-
* `themed.text({ color: 'primary-foreground' })`. oklch is converted to
|
|
142
|
-
* hex; translucent dark-mode borders become 8-digit hex.
|
|
143
|
-
* - `radii`: `--radius` (10) and the `radius-sm`…`radius-4xl` scale derived
|
|
144
|
-
* from it replace Tailwind's, like shadcn/ui's `@theme inline`.
|
|
145
|
-
* - Other base colors: `baseColors.zinc`, … — switch with
|
|
146
|
-
* `extendTheme(shadcnUiTheme, { semanticTokens: { colors: baseColors.zinc } })`.
|
|
147
|
-
* - Values come from the shadcn/ui registry snapshot in `scripts/registry/`
|
|
148
|
-
* (`pnpm sync`), converted by `scripts/generate.ts`.
|
|
149
|
-
*/
|
|
150
|
-
export declare const shadcnUiTheme: import("@react-native-rethemed/core/config").ThemeConfig;
|
|
151
|
-
export { baseColors, radii };
|
package/dist/cjs/index.js
DELETED
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.radii = exports.baseColors = exports.shadcnUiTheme = exports.semanticColors = void 0;
|
|
4
|
-
const config_1 = require("@react-native-rethemed/core/config");
|
|
5
|
-
const tailwind_css_tokens_1 = require("@react-native-rethemed/tailwind-css-tokens");
|
|
6
|
-
const tokens_gen_1 = require("./tokens.gen");
|
|
7
|
-
Object.defineProperty(exports, "baseColors", { enumerable: true, get: function () { return tokens_gen_1.baseColors; } });
|
|
8
|
-
Object.defineProperty(exports, "radii", { enumerable: true, get: function () { return tokens_gen_1.radii; } });
|
|
9
|
-
/** The default base color's semantic colors (`neutral`). */
|
|
10
|
-
exports.semanticColors = tokens_gen_1.baseColors.neutral;
|
|
11
|
-
/**
|
|
12
|
-
* shadcn/ui's default theme (base color `neutral`), converted for React
|
|
13
|
-
* Native. shadcn/ui is Tailwind CSS plus CSS variables, so this is
|
|
14
|
-
* `tailwindCssTheme` (spacing, typography, shadows, the color palette) with
|
|
15
|
-
* shadcn/ui's colors and radii on top, the same layering as a shadcn/ui
|
|
16
|
-
* project's `globals.css`.
|
|
17
|
-
*
|
|
18
|
-
* - Semantic colors use shadcn/ui's names as top-level colors, so styles
|
|
19
|
-
* read like the class names: `bg-primary text-primary-foreground` is
|
|
20
|
-
* `themed.view({ backgroundColor: 'primary' })` /
|
|
21
|
-
* `themed.text({ color: 'primary-foreground' })`. oklch is converted to
|
|
22
|
-
* hex; translucent dark-mode borders become 8-digit hex.
|
|
23
|
-
* - `radii`: `--radius` (10) and the `radius-sm`…`radius-4xl` scale derived
|
|
24
|
-
* from it replace Tailwind's, like shadcn/ui's `@theme inline`.
|
|
25
|
-
* - Other base colors: `baseColors.zinc`, … — switch with
|
|
26
|
-
* `extendTheme(shadcnUiTheme, { semanticTokens: { colors: baseColors.zinc } })`.
|
|
27
|
-
* - Values come from the shadcn/ui registry snapshot in `scripts/registry/`
|
|
28
|
-
* (`pnpm sync`), converted by `scripts/generate.ts`.
|
|
29
|
-
*/
|
|
30
|
-
exports.shadcnUiTheme = (0, config_1.extendTheme)(tailwind_css_tokens_1.tailwindCssTheme, {
|
|
31
|
-
tokens: { radii: tokens_gen_1.radii },
|
|
32
|
-
semanticTokens: { colors: exports.semanticColors },
|
|
33
|
-
});
|
package/dist/cjs/package.json
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"type":"commonjs"}
|