@react-native-rethemed/chakra-ui-tokens 0.1.0 → 0.1.1
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/colors.cjs +603 -0
- package/dist/colors.d.cts +601 -0
- package/dist/colors.d.mts +601 -0
- package/dist/colors.mjs +602 -0
- package/dist/index.cjs +31 -0
- package/dist/{esm/index.d.ts → index.d.cts} +5 -3
- package/dist/{cjs/index.d.ts → index.d.mts} +5 -3
- package/dist/index.mjs +21 -0
- package/dist/scales.cjs +213 -0
- package/dist/scales.d.cts +197 -0
- package/dist/scales.d.mts +197 -0
- package/dist/scales.mjs +206 -0
- package/package.json +13 -15
- package/dist/cjs/colors.d.ts +0 -599
- package/dist/cjs/colors.js +0 -386
- package/dist/cjs/index.js +0 -37
- package/dist/cjs/package.json +0 -1
- package/dist/cjs/scales.d.ts +0 -195
- package/dist/cjs/scales.js +0 -188
- package/dist/esm/colors.d.ts +0 -599
- package/dist/esm/colors.js +0 -383
- package/dist/esm/index.js +0 -25
- package/dist/esm/package.json +0 -1
- package/dist/esm/scales.d.ts +0 -195
- package/dist/esm/scales.js +0 -185
package/dist/esm/scales.js
DELETED
|
@@ -1,185 +0,0 @@
|
|
|
1
|
-
import { colors } from './colors.js';
|
|
2
|
-
/**
|
|
3
|
-
* Radius scale, aligned with Chakra UI's radii tokens.
|
|
4
|
-
* https://www.chakra-ui.com/docs/theming/radii
|
|
5
|
-
*/
|
|
6
|
-
export const radii = {
|
|
7
|
-
none: 0,
|
|
8
|
-
'2xs': 1,
|
|
9
|
-
xs: 2,
|
|
10
|
-
sm: 4,
|
|
11
|
-
md: 6,
|
|
12
|
-
lg: 8,
|
|
13
|
-
xl: 12,
|
|
14
|
-
'2xl': 16,
|
|
15
|
-
'3xl': 24,
|
|
16
|
-
'4xl': 32,
|
|
17
|
-
full: 9999,
|
|
18
|
-
};
|
|
19
|
-
/**
|
|
20
|
-
* Spacing scale, aligned with Chakra UI's spacing tokens. 1 unit = 4px,
|
|
21
|
-
* matching Chakra/Tailwind's proportional scale.
|
|
22
|
-
* https://www.chakra-ui.com/docs/theming/spacing
|
|
23
|
-
*/
|
|
24
|
-
export const spacing = {
|
|
25
|
-
px: 1,
|
|
26
|
-
0: 0,
|
|
27
|
-
0.5: 2,
|
|
28
|
-
1: 4,
|
|
29
|
-
1.5: 6,
|
|
30
|
-
2: 8,
|
|
31
|
-
2.5: 10,
|
|
32
|
-
3: 12,
|
|
33
|
-
3.5: 14,
|
|
34
|
-
4: 16,
|
|
35
|
-
5: 20,
|
|
36
|
-
6: 24,
|
|
37
|
-
7: 28,
|
|
38
|
-
8: 32,
|
|
39
|
-
9: 36,
|
|
40
|
-
10: 40,
|
|
41
|
-
11: 44,
|
|
42
|
-
12: 48,
|
|
43
|
-
14: 56,
|
|
44
|
-
16: 64,
|
|
45
|
-
20: 80,
|
|
46
|
-
24: 96,
|
|
47
|
-
28: 112,
|
|
48
|
-
32: 128,
|
|
49
|
-
36: 144,
|
|
50
|
-
40: 160,
|
|
51
|
-
44: 176,
|
|
52
|
-
48: 192,
|
|
53
|
-
52: 208,
|
|
54
|
-
56: 224,
|
|
55
|
-
60: 240,
|
|
56
|
-
64: 256,
|
|
57
|
-
72: 288,
|
|
58
|
-
80: 320,
|
|
59
|
-
96: 384,
|
|
60
|
-
};
|
|
61
|
-
/**
|
|
62
|
-
* Font size scale, aligned with Chakra UI's fontSizes tokens.
|
|
63
|
-
* https://www.chakra-ui.com/docs/theming/typography
|
|
64
|
-
*/
|
|
65
|
-
export const fontSizes = {
|
|
66
|
-
'2xs': 10,
|
|
67
|
-
xs: 12,
|
|
68
|
-
sm: 14,
|
|
69
|
-
md: 16,
|
|
70
|
-
lg: 18,
|
|
71
|
-
xl: 20,
|
|
72
|
-
'2xl': 24,
|
|
73
|
-
'3xl': 30,
|
|
74
|
-
'4xl': 36,
|
|
75
|
-
'5xl': 48,
|
|
76
|
-
'6xl': 60,
|
|
77
|
-
'7xl': 72,
|
|
78
|
-
'8xl': 96,
|
|
79
|
-
'9xl': 128,
|
|
80
|
-
};
|
|
81
|
-
/** Font weight scale — the standard 9-step CSS scale (thin..black). */
|
|
82
|
-
export const fontWeights = {
|
|
83
|
-
thin: '100',
|
|
84
|
-
extralight: '200',
|
|
85
|
-
light: '300',
|
|
86
|
-
normal: '400',
|
|
87
|
-
medium: '500',
|
|
88
|
-
semibold: '600',
|
|
89
|
-
bold: '700',
|
|
90
|
-
extrabold: '800',
|
|
91
|
-
black: '900',
|
|
92
|
-
};
|
|
93
|
-
/**
|
|
94
|
-
* Line height scale, aligned with Chakra UI's lineHeights tokens: unitless
|
|
95
|
-
* ratios, as Chakra defines them. `themed` resolves a token to
|
|
96
|
-
* `fontSize × ratio` (see `defaults.fontSize` for styles without a fontSize).
|
|
97
|
-
*/
|
|
98
|
-
export const lineHeights = {
|
|
99
|
-
shorter: 1.25,
|
|
100
|
-
short: 1.375,
|
|
101
|
-
moderate: 1.5,
|
|
102
|
-
tall: 1.625,
|
|
103
|
-
taller: 2,
|
|
104
|
-
};
|
|
105
|
-
/**
|
|
106
|
-
* Letter spacing scale. Chakra's tokens are em-based; these are the
|
|
107
|
-
* approximate px equivalents at a 16px base font size.
|
|
108
|
-
*/
|
|
109
|
-
export const letterSpacings = {
|
|
110
|
-
tighter: -0.8,
|
|
111
|
-
tight: -0.4,
|
|
112
|
-
wide: 0.4,
|
|
113
|
-
wider: 0.8,
|
|
114
|
-
widest: 1.6,
|
|
115
|
-
};
|
|
116
|
-
/**
|
|
117
|
-
* z-index scale, aligned with Chakra UI's zIndices tokens.
|
|
118
|
-
* https://www.chakra-ui.com/docs/theming/z-index
|
|
119
|
-
*/
|
|
120
|
-
export const zIndices = {
|
|
121
|
-
hide: -1,
|
|
122
|
-
base: 0,
|
|
123
|
-
docked: 10,
|
|
124
|
-
dropdown: 1000,
|
|
125
|
-
sticky: 1100,
|
|
126
|
-
banner: 1200,
|
|
127
|
-
overlay: 1300,
|
|
128
|
-
modal: 1400,
|
|
129
|
-
popover: 1500,
|
|
130
|
-
skipNav: 1600,
|
|
131
|
-
toast: 1700,
|
|
132
|
-
tooltip: 1800,
|
|
133
|
-
max: 2147483647,
|
|
134
|
-
};
|
|
135
|
-
/**
|
|
136
|
-
* Chakra's `xs`/`sm`/`md`/`lg`/`xl`/`2xl` box-shadow scale, approximated as
|
|
137
|
-
* single-layer RN shadow objects since RN doesn't support multi-layer
|
|
138
|
-
* shadows the way CSS `box-shadow` does. Chakra's `inner` (inset) shadow
|
|
139
|
-
* isn't included — not representable with RN's native shadow props.
|
|
140
|
-
*/
|
|
141
|
-
const shadowColor = colors.black;
|
|
142
|
-
export const shadows = {
|
|
143
|
-
xs: {
|
|
144
|
-
shadowColor,
|
|
145
|
-
shadowOffset: { width: 0, height: 1 },
|
|
146
|
-
shadowOpacity: 0.05,
|
|
147
|
-
shadowRadius: 1,
|
|
148
|
-
elevation: 1,
|
|
149
|
-
},
|
|
150
|
-
sm: {
|
|
151
|
-
shadowColor,
|
|
152
|
-
shadowOffset: { width: 0, height: 1 },
|
|
153
|
-
shadowOpacity: 0.1,
|
|
154
|
-
shadowRadius: 2,
|
|
155
|
-
elevation: 2,
|
|
156
|
-
},
|
|
157
|
-
md: {
|
|
158
|
-
shadowColor,
|
|
159
|
-
shadowOffset: { width: 0, height: 2 },
|
|
160
|
-
shadowOpacity: 0.12,
|
|
161
|
-
shadowRadius: 6,
|
|
162
|
-
elevation: 4,
|
|
163
|
-
},
|
|
164
|
-
lg: {
|
|
165
|
-
shadowColor,
|
|
166
|
-
shadowOffset: { width: 0, height: 4 },
|
|
167
|
-
shadowOpacity: 0.14,
|
|
168
|
-
shadowRadius: 10,
|
|
169
|
-
elevation: 8,
|
|
170
|
-
},
|
|
171
|
-
xl: {
|
|
172
|
-
shadowColor,
|
|
173
|
-
shadowOffset: { width: 0, height: 8 },
|
|
174
|
-
shadowOpacity: 0.16,
|
|
175
|
-
shadowRadius: 16,
|
|
176
|
-
elevation: 12,
|
|
177
|
-
},
|
|
178
|
-
'2xl': {
|
|
179
|
-
shadowColor,
|
|
180
|
-
shadowOffset: { width: 0, height: 12 },
|
|
181
|
-
shadowOpacity: 0.2,
|
|
182
|
-
shadowRadius: 24,
|
|
183
|
-
elevation: 16,
|
|
184
|
-
},
|
|
185
|
-
};
|