@mineui/tokens 0.0.7 → 0.0.9
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 +273 -111
- package/dist/scss/_aspect.scss +15 -0
- package/dist/scss/{breakpoints.scss → _breakpoints.scss} +2 -2
- package/dist/scss/index.scss +12 -12
- package/package.json +1 -1
- package/dist/scss/aspect.scss +0 -15
- /package/dist/scss/{blur.scss → _blur.scss} +0 -0
- /package/dist/scss/{borders.scss → _borders.scss} +0 -0
- /package/dist/scss/{colors.scss → _colors.scss} +0 -0
- /package/dist/scss/{opacity.scss → _opacity.scss} +0 -0
- /package/dist/scss/{shadows.scss → _shadows.scss} +0 -0
- /package/dist/scss/{sizes.scss → _sizes.scss} +0 -0
- /package/dist/scss/{spaces.scss → _spaces.scss} +0 -0
- /package/dist/scss/{transitions.scss → _transitions.scss} +0 -0
- /package/dist/scss/{typography.scss → _typography.scss} +0 -0
- /package/dist/scss/{z-index.scss → _z-index.scss} +0 -0
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.
|
|
11
|
+
<img src="https://img.shields.io/badge/v-0.0.9-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
|
-
|
|
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
|
-
|
|
99
|
+
- #### Spacing
|
|
106
100
|
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
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
|
-
>
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
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
|
-
>
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
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
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
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
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
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
|
-
|
|
175
|
-
// Durations
|
|
176
|
-
$dur-instant to $dur-slowest
|
|
294
|
+
**Durations:**
|
|
177
295
|
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
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
|
-
|
|
306
|
+
**Easing Functions:**
|
|
184
307
|
|
|
185
|
-
|
|
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
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
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
|
-
>
|
|
341
|
+
> Mobile-first responsive design breakpoints.
|
|
197
342
|
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
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
|
-
|
|
212
|
-
|
|
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
|
|
368
|
+
> Backdrop blur and visual effect values.
|
|
218
369
|
|
|
219
|
-
|
|
220
|
-
|
|
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
|
-
|
|
228
|
-
|
|
229
|
-
|
|
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>
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
// aspect.scss
|
|
2
|
+
//
|
|
3
|
+
// Made with ❤️ by Maysara.
|
|
4
|
+
|
|
5
|
+
@use 'sass:math';
|
|
6
|
+
|
|
7
|
+
// ----------------------------------------------------------------------------
|
|
8
|
+
// ASPECT RATIOS
|
|
9
|
+
// ----------------------------------------------------------------------------
|
|
10
|
+
$aspect-square: math.div(1, 1);
|
|
11
|
+
$aspect-video: math.div(16, 9);
|
|
12
|
+
$aspect-4-3: math.div(4, 3);
|
|
13
|
+
$aspect-21-9: math.div(21, 9);
|
|
14
|
+
$aspect-portrait: math.div(3, 4);
|
|
15
|
+
$aspect-auto: auto;
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
$bp-md: 768px;
|
|
13
13
|
$bp-lg: 1024px;
|
|
14
14
|
$bp-xl: 1280px;
|
|
15
|
-
$bp-
|
|
15
|
+
$bp-xxl: 1536px;
|
|
16
16
|
|
|
17
17
|
// Map for easy iteration
|
|
18
18
|
$breakpoints: (
|
|
@@ -21,6 +21,6 @@
|
|
|
21
21
|
'md': $bp-md,
|
|
22
22
|
'lg': $bp-lg,
|
|
23
23
|
'xl': $bp-xl,
|
|
24
|
-
'
|
|
24
|
+
'xxl': $bp-xxl,
|
|
25
25
|
);
|
|
26
26
|
|
package/dist/scss/index.scss
CHANGED
|
@@ -7,15 +7,15 @@
|
|
|
7
7
|
// ----------------------------------------------------------------------------
|
|
8
8
|
// PACK
|
|
9
9
|
// ----------------------------------------------------------------------------
|
|
10
|
-
@
|
|
11
|
-
@
|
|
12
|
-
@
|
|
13
|
-
@
|
|
14
|
-
@
|
|
15
|
-
@
|
|
16
|
-
@
|
|
17
|
-
@
|
|
18
|
-
@
|
|
19
|
-
@
|
|
20
|
-
@
|
|
21
|
-
@
|
|
10
|
+
@forward './colors.scss';
|
|
11
|
+
@forward './spaces.scss';
|
|
12
|
+
@forward './typography.scss';
|
|
13
|
+
@forward './borders.scss';
|
|
14
|
+
@forward './shadows.scss';
|
|
15
|
+
@forward './z-index.scss';
|
|
16
|
+
@forward './transitions.scss';
|
|
17
|
+
@forward './opacity.scss';
|
|
18
|
+
@forward './blur.scss';
|
|
19
|
+
@forward './aspect.scss';
|
|
20
|
+
@forward './sizes.scss';
|
|
21
|
+
@forward './breakpoints.scss';
|
package/package.json
CHANGED
package/dist/scss/aspect.scss
DELETED
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
// aspect.scss
|
|
2
|
-
//
|
|
3
|
-
// Made with ❤️ by Maysara.
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
// ----------------------------------------------------------------------------
|
|
8
|
-
// ASPECT RATIOS
|
|
9
|
-
// ----------------------------------------------------------------------------
|
|
10
|
-
$aspect-square: 1 / 1;
|
|
11
|
-
$aspect-video: 16 / 9;
|
|
12
|
-
$aspect-4-3: 4 / 3;
|
|
13
|
-
$aspect-21-9: 21 / 9;
|
|
14
|
-
$aspect-portrait: 3 / 4;
|
|
15
|
-
$aspect-auto: auto;
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|