@mineui/tokens 0.0.7 → 0.0.8

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.
Files changed (2) hide show
  1. package/README.md +273 -111
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -8,7 +8,7 @@
8
8
  </div>
9
9
 
10
10
  <div align="center">
11
- <img src="https://img.shields.io/badge/v-0.0.7-black"/>
11
+ <img src="https://img.shields.io/badge/v-0.0.8-black"/>
12
12
  <a href="https://github.com/mineui-org"><img src="https://img.shields.io/badge/🔥-@mineui-black"/></a>
13
13
  <br>
14
14
  <img src="https://img.shields.io/github/issues/mineui-org/tokens?style=flat" alt="Github Repo Issues" />
@@ -50,7 +50,6 @@
50
50
  <div align="center"> <img src="./assets/img/line.png" alt="line" style="display: block; margin-top:20px;margin-bottom:20px;width:500px;"/> </div>
51
51
  <br>
52
52
 
53
-
54
53
  - ### Colors
55
54
 
56
55
  ```scss
@@ -77,157 +76,320 @@
77
76
 
78
77
  - ## Documentation 📑
79
78
 
80
-
81
79
  - ### API ⛓️
82
80
 
83
81
  - #### Colors
84
- > 11 color palettes × 11 shades each. HSL format for easy manipulation.
85
-
86
- ```scss
87
- // Gray scale (12 shades)
88
- $gray-0 to $gray-11
89
-
90
- // Brand colors (11 shades each)
91
- $blue-1 to $blue-11
92
- $green-1 to $green-11
93
- $red-1 to $red-11
94
- $amber-1 to $amber-11
95
- $orange-1 to $orange-11
96
- $purple-1 to $purple-11
97
- $pink-1 to $pink-11
98
- $cyan-1 to $cyan-11
99
- $teal-1 to $teal-11
100
- $indigo-1 to $indigo-11
101
- ```
102
82
 
103
- - #### Spacing
83
+ > 12 color palettes × 11 shades each. HSL format for easy manipulation.
84
+
85
+ | Palette | Shade 1 | Shade 2 | Shade 3 | Shade 4 | Shade 5 | Shade 6 | Shade 7 | Shade 8 | Shade 9 | Shade 10 | Shade 11 |
86
+ | ---------- | ----------- | ----------- | ----------- | ----------- | ----------- | ----------- | ----------- | ----------- | ----------- | ------------ | ------------ |
87
+ | **Gray** | `$gray-0` | `$gray-1` | `$gray-2` | `$gray-3` | `$gray-4` | `$gray-5` | `$gray-6` | `$gray-7` | `$gray-8` | `$gray-9` | `$gray-10` |
88
+ | **Blue** | `$blue-1` | `$blue-2` | `$blue-3` | `$blue-4` | `$blue-5` | `$blue-6` | `$blue-7` | `$blue-8` | `$blue-9` | `$blue-10` | `$blue-11` |
89
+ | **Green** | `$green-1` | `$green-2` | `$green-3` | `$green-4` | `$green-5` | `$green-6` | `$green-7` | `$green-8` | `$green-9` | `$green-10` | `$green-11` |
90
+ | **Red** | `$red-1` | `$red-2` | `$red-3` | `$red-4` | `$red-5` | `$red-6` | `$red-7` | `$red-8` | `$red-9` | `$red-10` | `$red-11` |
91
+ | **Amber** | `$amber-1` | `$amber-2` | `$amber-3` | `$amber-4` | `$amber-5` | `$amber-6` | `$amber-7` | `$amber-8` | `$amber-9` | `$amber-10` | `$amber-11` |
92
+ | **Orange** | `$orange-1` | `$orange-2` | `$orange-3` | `$orange-4` | `$orange-5` | `$orange-6` | `$orange-7` | `$orange-8` | `$orange-9` | `$orange-10` | `$orange-11` |
93
+ | **Purple** | `$purple-1` | `$purple-2` | `$purple-3` | `$purple-4` | `$purple-5` | `$purple-6` | `$purple-7` | `$purple-8` | `$purple-9` | `$purple-10` | `$purple-11` |
94
+ | **Pink** | `$pink-1` | `$pink-2` | `$pink-3` | `$pink-4` | `$pink-5` | `$pink-6` | `$pink-7` | `$pink-8` | `$pink-9` | `$pink-10` | `$pink-11` |
95
+ | **Cyan** | `$cyan-1` | `$cyan-2` | `$cyan-3` | `$cyan-4` | `$cyan-5` | `$cyan-6` | `$cyan-7` | `$cyan-8` | `$cyan-9` | `$cyan-10` | `$cyan-11` |
96
+ | **Teal** | `$teal-1` | `$teal-2` | `$teal-3` | `$teal-4` | `$teal-5` | `$teal-6` | `$teal-7` | `$teal-8` | `$teal-9` | `$teal-10` | `$teal-11` |
97
+ | **Indigo** | `$indigo-1` | `$indigo-2` | `$indigo-3` | `$indigo-4` | `$indigo-5` | `$indigo-6` | `$indigo-7` | `$indigo-8` | `$indigo-9` | `$indigo-10` | `$indigo-11` |
104
98
 
105
- > Perfect scale from 0 to 64 (0px to 256px).
99
+ - #### Spacing
106
100
 
107
- ```scss
108
- $sp-0, $sp-1, $sp-2, $sp-3, $sp-4, $sp-5, $sp-6,
109
- $sp-7, $sp-8, $sp-9, $sp-10, $sp-12, $sp-14, $sp-16,
110
- $sp-20, $sp-24, $sp-28, $sp-32, $sp-36, $sp-40,
111
- $sp-44, $sp-48, $sp-52, $sp-56, $sp-60, $sp-64
112
- ```
101
+ > Perfect scale from 0 to 64 (0–256px). Rem-based for responsive scaling.
102
+
103
+ | Token | Value | Pixels |
104
+ | -------- | ------- | ------ |
105
+ | `$sp-0` | 0 | 0px |
106
+ | `$sp-1` | 0.25rem | 4px |
107
+ | `$sp-2` | 0.5rem | 8px |
108
+ | `$sp-3` | 0.75rem | 12px |
109
+ | `$sp-4` | 1rem | 16px |
110
+ | `$sp-5` | 1.25rem | 20px |
111
+ | `$sp-6` | 1.5rem | 24px |
112
+ | `$sp-7` | 1.75rem | 28px |
113
+ | `$sp-8` | 2rem | 32px |
114
+ | `$sp-9` | 2.25rem | 36px |
115
+ | `$sp-10` | 2.5rem | 40px |
116
+ | `$sp-12` | 3rem | 48px |
117
+ | `$sp-14` | 3.5rem | 56px |
118
+ | `$sp-16` | 4rem | 64px |
119
+ | `$sp-20` | 5rem | 80px |
120
+ | `$sp-24` | 6rem | 96px |
121
+ | `$sp-28` | 7rem | 112px |
122
+ | `$sp-32` | 8rem | 128px |
123
+ | `$sp-36` | 9rem | 144px |
124
+ | `$sp-40` | 10rem | 160px |
125
+ | `$sp-44` | 11rem | 176px |
126
+ | `$sp-48` | 12rem | 192px |
127
+ | `$sp-52` | 13rem | 208px |
128
+ | `$sp-56` | 14rem | 224px |
129
+ | `$sp-60` | 15rem | 240px |
130
+ | `$sp-64` | 16rem | 256px |
113
131
 
114
132
  - #### Typography
115
133
 
116
- > Font families, sizes, weights, line heights, letter spacing.
117
-
118
- ```scss
119
- // Families
120
- $font-sans, $font-serif, $font-mono, $font-arabic
121
-
122
- // Sizes
123
- $fs-xs to $fs-9xl
124
-
125
- // Weights
126
- $fw-thin to $fw-black
127
-
128
- // Line heights
129
- $lh-none to $lh-loose
130
-
131
- // Letter spacing
132
- $ls-tighter to $ls-widest
133
- ```
134
+ > System fonts, scales, weights, line heights, and letter spacing.
135
+
136
+ **Font Families:**
137
+
138
+ | Variable | Font Stack |
139
+ | -------------- | ----------------------------------------- |
140
+ | `$font-sans` | System default (SF Pro, Segoe UI, Roboto) |
141
+ | `$font-serif` | Georgia, Cambria, Times New Roman |
142
+ | `$font-mono` | SFMono, Menlo, Monaco, Consolas |
143
+ | `$font-arabic` | Cairo, Noto Sans Arabic |
144
+
145
+ **Font Sizes:**
146
+
147
+ | Token | Value | Pixels |
148
+ | ---------- | --------- | ------ |
149
+ | `$fs-xs` | 0.75rem | 12px |
150
+ | `$fs-sm` | 0.875rem | 14px |
151
+ | `$fs-base` | 1rem | 16px |
152
+ | `$fs-md` | 1.0625rem | 17px |
153
+ | `$fs-lg` | 1.125rem | 18px |
154
+ | `$fs-xl` | 1.25rem | 20px |
155
+ | `$fs-2xl` | 1.5rem | 24px |
156
+ | `$fs-3xl` | 1.875rem | 30px |
157
+ | `$fs-4xl` | 2.25rem | 36px |
158
+ | `$fs-5xl` | 3rem | 48px |
159
+ | `$fs-6xl` | 3.75rem | 60px |
160
+ | `$fs-7xl` | 4.5rem | 72px |
161
+ | `$fs-8xl` | 6rem | 96px |
162
+ | `$fs-9xl` | 8rem | 128px |
163
+
164
+ **Font Weights:**
165
+
166
+ | Token | Value |
167
+ | ---------------- | ----- |
168
+ | `$fw-thin` | 100 |
169
+ | `$fw-extralight` | 200 |
170
+ | `$fw-light` | 300 |
171
+ | `$fw-normal` | 400 |
172
+ | `$fw-medium` | 500 |
173
+ | `$fw-semibold` | 600 |
174
+ | `$fw-bold` | 700 |
175
+ | `$fw-extrabold` | 800 |
176
+ | `$fw-black` | 900 |
177
+
178
+ **Line Heights:**
179
+
180
+ | Token | Value |
181
+ | ------------- | ----- |
182
+ | `$lh-none` | 1 |
183
+ | `$lh-tight` | 1.25 |
184
+ | `$lh-snug` | 1.375 |
185
+ | `$lh-normal` | 1.5 |
186
+ | `$lh-relaxed` | 1.625 |
187
+ | `$lh-loose` | 2 |
188
+
189
+ **Letter Spacing:**
190
+
191
+ | Token | Value |
192
+ | ------------- | -------- |
193
+ | `$ls-tighter` | -0.05em |
194
+ | `$ls-tight` | -0.025em |
195
+ | `$ls-normal` | 0 |
196
+ | `$ls-wide` | 0.025em |
197
+ | `$ls-wider` | 0.05em |
198
+ | `$ls-widest` | 0.1em |
134
199
 
135
200
  - #### Borders
136
201
 
137
- > Widths and radius values.
138
-
139
- ```scss
140
- // Widths
141
- $bw-0 to $bw-8
142
-
143
- // Radius
144
- $br-none to $br-3xl, $br-full
145
- ```
202
+ > Precise widths and radius values for consistent borders and shapes.
203
+
204
+ **Border Widths:**
205
+
206
+ | Token | Value |
207
+ | ------- | ----- |
208
+ | `$bw-0` | 0 |
209
+ | `$bw-1` | 1px |
210
+ | `$bw-2` | 2px |
211
+ | `$bw-3` | 3px |
212
+ | `$bw-4` | 4px |
213
+ | `$bw-6` | 6px |
214
+ | `$bw-8` | 8px |
215
+
216
+ **Border Radius:**
217
+
218
+ | Token | Value | Pixels |
219
+ | ---------- | -------- | ------ |
220
+ | `$br-none` | 0 | 0px |
221
+ | `$br-sm` | 0.125rem | 2px |
222
+ | `$br-base` | 0.25rem | 4px |
223
+ | `$br-md` | 0.375rem | 6px |
224
+ | `$br-lg` | 0.5rem | 8px |
225
+ | `$br-xl` | 0.75rem | 12px |
226
+ | `$br-2xl` | 1rem | 16px |
227
+ | `$br-3xl` | 1.5rem | 24px |
228
+ | `$br-full` | 9999px | 100% |
146
229
 
147
230
  - #### Shadows
148
231
 
149
- > Realistic shadows for light and dark modes.
150
-
151
- ```scss
152
- // Light mode
153
- $shadow-xs, $shadow-sm, $shadow-base, $shadow-md,
154
- $shadow-lg, $shadow-xl, $shadow-2xl, $shadow-inner
155
-
156
- // Dark mode
157
- $shadow-xs-dark to $shadow-2xl-dark
158
- ```
232
+ > Realistic and beautiful shadows for light and dark modes.
233
+
234
+ **Light Mode Shadows:**
235
+
236
+ | Token | Description |
237
+ | --------------- | -------------------------------------- |
238
+ | `$shadow-xs` | Subtle (1px offset, 5% opacity) |
239
+ | `$shadow-sm` | Small (1px offset, 10% opacity) |
240
+ | `$shadow-base` | Base (1px offset, 10% opacity) |
241
+ | `$shadow-md` | Medium (4px offset, 10% opacity) |
242
+ | `$shadow-lg` | Large (10px offset, 10% opacity) |
243
+ | `$shadow-xl` | Extra Large (20px offset, 10% opacity) |
244
+ | `$shadow-2xl` | 2X Large (25px offset, 25% opacity) |
245
+ | `$shadow-inner` | Inset (internal shadow) |
246
+ | `$shadow-none` | No shadow |
247
+
248
+ **Dark Mode Shadows:**
249
+
250
+ | Token | Opacity |
251
+ | ------------------- | ------- |
252
+ | `$shadow-xs-dark` | 30% |
253
+ | `$shadow-sm-dark` | 40% |
254
+ | `$shadow-base-dark` | 40% |
255
+ | `$shadow-md-dark` | 40% |
256
+ | `$shadow-lg-dark` | 40% |
257
+ | `$shadow-xl-dark` | 50% |
258
+ | `$shadow-2xl-dark` | 60% |
159
259
 
160
260
  - #### Z-Index
161
261
 
162
- > Layering system with semantic names.
163
-
164
- ```scss
165
- $z-0 to $z-50
166
- $z-dropdown, $z-sticky, $z-fixed, $z-backdrop,
167
- $z-modal, $z-popover, $z-tooltip, $z-notification
168
- ```
262
+ > Layering system with numeric and semantic values.
263
+
264
+ **Numeric Scale:**
265
+
266
+ | Token | Value |
267
+ | --------- | ----- |
268
+ | `$z-0` | 0 |
269
+ | `$z-1` | 1 |
270
+ | `$z-10` | 10 |
271
+ | `$z-20` | 20 |
272
+ | `$z-30` | 30 |
273
+ | `$z-40` | 40 |
274
+ | `$z-50` | 50 |
275
+ | `$z-auto` | auto |
276
+
277
+ **Semantic Values:**
278
+
279
+ | Token | Value | Use Case |
280
+ | ----------------- | ----- | ----------------- |
281
+ | `$z-dropdown` | 1000 | Dropdowns |
282
+ | `$z-sticky` | 1020 | Sticky elements |
283
+ | `$z-fixed` | 1030 | Fixed positioning |
284
+ | `$z-backdrop` | 1040 | Modal backdrops |
285
+ | `$z-modal` | 1050 | Modal dialogs |
286
+ | `$z-popover` | 1060 | Popovers |
287
+ | `$z-tooltip` | 1070 | Tooltips |
288
+ | `$z-notification` | 1080 | Notifications |
169
289
 
170
290
  - #### Transitions
171
291
 
172
- > Durations and easing functions.
292
+ > Durations and easing functions for smooth animations.
173
293
 
174
- ```scss
175
- // Durations
176
- $dur-instant to $dur-slowest
294
+ **Durations:**
177
295
 
178
- // Easings
179
- $ease-linear, $ease-in, $ease-out, $ease-in-out,
180
- $ease-bounce, $ease-elastic
181
- ```
296
+ | Token | Value |
297
+ | --------------- | ----- |
298
+ | `$dur-instant` | 50ms |
299
+ | `$dur-fast` | 100ms |
300
+ | `$dur-normal` | 150ms |
301
+ | `$dur-moderate` | 200ms |
302
+ | `$dur-slow` | 300ms |
303
+ | `$dur-slower` | 500ms |
304
+ | `$dur-slowest` | 700ms |
182
305
 
183
- - #### Opacity
306
+ **Easing Functions:**
184
307
 
185
- > 0% to 100% in useful increments.
308
+ | Token | Curve |
309
+ | --------------- | ----------- |
310
+ | `$ease-linear` | Linear |
311
+ | `$ease-in` | Ease In |
312
+ | `$ease-out` | Ease Out |
313
+ | `$ease-in-out` | Ease In-Out |
314
+ | `$ease-bounce` | Bounce |
315
+ | `$ease-elastic` | Elastic |
316
+
317
+ - #### Opacity
186
318
 
187
- ```scss
188
- $opacity-0, $opacity-5, $opacity-10, $opacity-20,
189
- $opacity-25, $opacity-30, $opacity-40, $opacity-50,
190
- $opacity-60, $opacity-70, $opacity-75, $opacity-80,
191
- $opacity-90, $opacity-95, $opacity-100
192
- ```
319
+ > Transparency levels from 0% to 100%.
320
+
321
+ | Token | Value | Percentage |
322
+ | -------------- | ----- | ---------- |
323
+ | `$opacity-0` | 0 | 0% |
324
+ | `$opacity-5` | 0.05 | 5% |
325
+ | `$opacity-10` | 0.1 | 10% |
326
+ | `$opacity-20` | 0.2 | 20% |
327
+ | `$opacity-25` | 0.25 | 25% |
328
+ | `$opacity-30` | 0.3 | 30% |
329
+ | `$opacity-40` | 0.4 | 40% |
330
+ | `$opacity-50` | 0.5 | 50% |
331
+ | `$opacity-60` | 0.6 | 60% |
332
+ | `$opacity-70` | 0.7 | 70% |
333
+ | `$opacity-75` | 0.75 | 75% |
334
+ | `$opacity-80` | 0.8 | 80% |
335
+ | `$opacity-90` | 0.9 | 90% |
336
+ | `$opacity-95` | 0.95 | 95% |
337
+ | `$opacity-100` | 1 | 100% |
193
338
 
194
339
  - #### Breakpoints
195
340
 
196
- > Responsive design breakpoints.
341
+ > Mobile-first responsive design breakpoints.
197
342
 
198
- ```scss
199
- $bp-xs : 0
200
- $bp-sm : 640px
201
- $bp-md : 768px
202
- $bp-lg : 1024px
203
- $bp-xl : 1280px
204
- $bp-2xl : 1536px
205
- ```
343
+ | Token | Value | Device |
344
+ | --------- | ------ | ----------- |
345
+ | `$bp-xs` | 0 | Extra Small |
346
+ | `$bp-sm` | 640px | Small |
347
+ | `$bp-md` | 768px | Medium |
348
+ | `$bp-lg` | 1024px | Large |
349
+ | `$bp-xl` | 1280px | Extra Large |
350
+ | `$bp-2xl` | 1536px | 2X Large |
206
351
 
207
352
  - #### Sizes
208
353
 
209
- > Common component sizes.
354
+ > Common component sizes for icons, buttons, and more.
210
355
 
211
- ```scss
212
- $size-xs to $size-2xl
213
- ```
356
+ | Token | Value | Pixels |
357
+ | ------------ | ------ | ------ |
358
+ | `$size-xs` | 1.5rem | 24px |
359
+ | `$size-sm` | 2rem | 32px |
360
+ | `$size-base` | 2.5rem | 40px |
361
+ | `$size-md` | 3rem | 48px |
362
+ | `$size-lg` | 3.5rem | 56px |
363
+ | `$size-xl` | 4rem | 64px |
364
+ | `$size-2xl` | 5rem | 80px |
214
365
 
215
366
  - #### Blur
216
367
 
217
- > Backdrop and effect blur values.
368
+ > Backdrop blur and visual effect values.
218
369
 
219
- ```scss
220
- $blur-none to $blur-3xl
221
- ```
370
+ | Token | Value |
371
+ | ------------ | ----- |
372
+ | `$blur-none` | 0 |
373
+ | `$blur-sm` | 4px |
374
+ | `$blur-base` | 8px |
375
+ | `$blur-md` | 12px |
376
+ | `$blur-lg` | 16px |
377
+ | `$blur-xl` | 24px |
378
+ | `$blur-2xl` | 40px |
379
+ | `$blur-3xl` | 64px |
222
380
 
223
381
  - #### Aspect Ratios
224
382
 
225
- > Common aspect ratios.
383
+ > Common aspect ratios for responsive images and layouts.
226
384
 
227
- ```scss
228
- $aspect-square, $aspect-video, $aspect-4-3,
229
- $aspect-21-9, $aspect-portrait, $aspect-auto
230
- ```
385
+ | Token | Ratio | Use Case |
386
+ | ------------------ | ----- | ---------------- |
387
+ | `$aspect-square` | 1:1 | Square content |
388
+ | `$aspect-video` | 16:9 | Video/YouTube |
389
+ | `$aspect-4-3` | 4:3 | Standard display |
390
+ | `$aspect-21-9` | 21:9 | Ultrawide |
391
+ | `$aspect-portrait` | 3:4 | Portrait images |
392
+ | `$aspect-auto` | auto | Intrinsic ratio |
231
393
 
232
394
  <div align="center"> <img src="./assets/img/line.png" alt="line" style="display: block; margin-top:20px;margin-bottom:20px;width:500px;"/> </div>
233
395
  <br>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mineui/tokens",
3
- "version": "0.0.7",
3
+ "version": "0.0.8",
4
4
  "description": "Design tokens used by utilities",
5
5
  "keywords": ["mine", "ui", "tokens"],
6
6
  "license": "MIT",