@mineui/tokens 0.0.6 → 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 -112
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -8,10 +8,9 @@
8
8
  </div>
9
9
 
10
10
  <div align="center">
11
- <img src="https://img.shields.io/badge/v-0.0.6-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
- <img src="https://img.shields.io/badge/coverage-~%25-brightgreen" alt="Test Coverage" />
15
14
  <img src="https://img.shields.io/github/issues/mineui-org/tokens?style=flat" alt="Github Repo Issues" />
16
15
  <img src="https://img.shields.io/github/stars/mineui-org/tokens?style=social" alt="GitHub Repo stars" />
17
16
  </div>
@@ -51,7 +50,6 @@
51
50
  <div align="center"> <img src="./assets/img/line.png" alt="line" style="display: block; margin-top:20px;margin-bottom:20px;width:500px;"/> </div>
52
51
  <br>
53
52
 
54
-
55
53
  - ### Colors
56
54
 
57
55
  ```scss
@@ -78,157 +76,320 @@
78
76
 
79
77
  - ## Documentation 📑
80
78
 
81
-
82
79
  - ### API ⛓️
83
80
 
84
81
  - #### Colors
85
- > 11 color palettes × 11 shades each. HSL format for easy manipulation.
86
-
87
- ```scss
88
- // Gray scale (12 shades)
89
- $gray-0 to $gray-11
90
-
91
- // Brand colors (11 shades each)
92
- $blue-1 to $blue-11
93
- $green-1 to $green-11
94
- $red-1 to $red-11
95
- $amber-1 to $amber-11
96
- $orange-1 to $orange-11
97
- $purple-1 to $purple-11
98
- $pink-1 to $pink-11
99
- $cyan-1 to $cyan-11
100
- $teal-1 to $teal-11
101
- $indigo-1 to $indigo-11
102
- ```
103
82
 
104
- - #### 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` |
105
98
 
106
- > Perfect scale from 0 to 64 (0px to 256px).
99
+ - #### Spacing
107
100
 
108
- ```scss
109
- $sp-0, $sp-1, $sp-2, $sp-3, $sp-4, $sp-5, $sp-6,
110
- $sp-7, $sp-8, $sp-9, $sp-10, $sp-12, $sp-14, $sp-16,
111
- $sp-20, $sp-24, $sp-28, $sp-32, $sp-36, $sp-40,
112
- $sp-44, $sp-48, $sp-52, $sp-56, $sp-60, $sp-64
113
- ```
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 |
114
131
 
115
132
  - #### Typography
116
133
 
117
- > Font families, sizes, weights, line heights, letter spacing.
118
-
119
- ```scss
120
- // Families
121
- $font-sans, $font-serif, $font-mono, $font-arabic
122
-
123
- // Sizes
124
- $fs-xs to $fs-9xl
125
-
126
- // Weights
127
- $fw-thin to $fw-black
128
-
129
- // Line heights
130
- $lh-none to $lh-loose
131
-
132
- // Letter spacing
133
- $ls-tighter to $ls-widest
134
- ```
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 |
135
199
 
136
200
  - #### Borders
137
201
 
138
- > Widths and radius values.
139
-
140
- ```scss
141
- // Widths
142
- $bw-0 to $bw-8
143
-
144
- // Radius
145
- $br-none to $br-3xl, $br-full
146
- ```
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% |
147
229
 
148
230
  - #### Shadows
149
231
 
150
- > Realistic shadows for light and dark modes.
151
-
152
- ```scss
153
- // Light mode
154
- $shadow-xs, $shadow-sm, $shadow-base, $shadow-md,
155
- $shadow-lg, $shadow-xl, $shadow-2xl, $shadow-inner
156
-
157
- // Dark mode
158
- $shadow-xs-dark to $shadow-2xl-dark
159
- ```
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% |
160
259
 
161
260
  - #### Z-Index
162
261
 
163
- > Layering system with semantic names.
164
-
165
- ```scss
166
- $z-0 to $z-50
167
- $z-dropdown, $z-sticky, $z-fixed, $z-backdrop,
168
- $z-modal, $z-popover, $z-tooltip, $z-notification
169
- ```
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 |
170
289
 
171
290
  - #### Transitions
172
291
 
173
- > Durations and easing functions.
292
+ > Durations and easing functions for smooth animations.
174
293
 
175
- ```scss
176
- // Durations
177
- $dur-instant to $dur-slowest
294
+ **Durations:**
178
295
 
179
- // Easings
180
- $ease-linear, $ease-in, $ease-out, $ease-in-out,
181
- $ease-bounce, $ease-elastic
182
- ```
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 |
183
305
 
184
- - #### Opacity
306
+ **Easing Functions:**
185
307
 
186
- > 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
187
318
 
188
- ```scss
189
- $opacity-0, $opacity-5, $opacity-10, $opacity-20,
190
- $opacity-25, $opacity-30, $opacity-40, $opacity-50,
191
- $opacity-60, $opacity-70, $opacity-75, $opacity-80,
192
- $opacity-90, $opacity-95, $opacity-100
193
- ```
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% |
194
338
 
195
339
  - #### Breakpoints
196
340
 
197
- > Responsive design breakpoints.
341
+ > Mobile-first responsive design breakpoints.
198
342
 
199
- ```scss
200
- $bp-xs : 0
201
- $bp-sm : 640px
202
- $bp-md : 768px
203
- $bp-lg : 1024px
204
- $bp-xl : 1280px
205
- $bp-2xl : 1536px
206
- ```
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 |
207
351
 
208
352
  - #### Sizes
209
353
 
210
- > Common component sizes.
354
+ > Common component sizes for icons, buttons, and more.
211
355
 
212
- ```scss
213
- $size-xs to $size-2xl
214
- ```
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 |
215
365
 
216
366
  - #### Blur
217
367
 
218
- > Backdrop and effect blur values.
368
+ > Backdrop blur and visual effect values.
219
369
 
220
- ```scss
221
- $blur-none to $blur-3xl
222
- ```
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 |
223
380
 
224
381
  - #### Aspect Ratios
225
382
 
226
- > Common aspect ratios.
383
+ > Common aspect ratios for responsive images and layouts.
227
384
 
228
- ```scss
229
- $aspect-square, $aspect-video, $aspect-4-3,
230
- $aspect-21-9, $aspect-portrait, $aspect-auto
231
- ```
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 |
232
393
 
233
394
  <div align="center"> <img src="./assets/img/line.png" alt="line" style="display: block; margin-top:20px;margin-bottom:20px;width:500px;"/> </div>
234
395
  <br>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mineui/tokens",
3
- "version": "0.0.6",
3
+ "version": "0.0.8",
4
4
  "description": "Design tokens used by utilities",
5
5
  "keywords": ["mine", "ui", "tokens"],
6
6
  "license": "MIT",