mesurer 0.0.4 → 0.0.6
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/CHANGELOG.md +8 -1
- package/README.md +19 -20
- package/dist/index.cjs +224 -185
- package/dist/index.d.cts +2 -1
- package/dist/index.d.ts +2 -1
- package/dist/index.js +224 -185
- package/dist/styles.css +160 -213
- package/package.json +11 -12
package/dist/styles.css
CHANGED
|
@@ -3,24 +3,23 @@
|
|
|
3
3
|
@layer theme, base, components, utilities;
|
|
4
4
|
@layer theme {
|
|
5
5
|
:root, :host {
|
|
6
|
-
--font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
|
|
6
|
+
--msr-font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
|
|
7
7
|
"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
|
8
|
-
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
|
|
8
|
+
--msr-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
|
|
9
9
|
"Courier New", monospace;
|
|
10
|
-
--color-black: #000;
|
|
11
|
-
--color-white: #fff;
|
|
12
|
-
--spacing: 0.25rem;
|
|
13
|
-
--radius-md: 0.375rem;
|
|
14
|
-
--radius-lg: 0.5rem;
|
|
15
|
-
--default-transition-duration: 150ms;
|
|
16
|
-
--default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
17
|
-
--default-font-family: var(--font-sans);
|
|
18
|
-
--default-mono-font-family: var(--font-mono);
|
|
19
|
-
--color-ink-50: var(--color-ink-50);
|
|
20
|
-
--color-ink-200: var(--color-ink-200);
|
|
21
|
-
--color-ink-
|
|
22
|
-
--color-ink-
|
|
23
|
-
--color-ink-900: var(--color-ink-900);
|
|
10
|
+
--msr-color-black: #000;
|
|
11
|
+
--msr-color-white: #fff;
|
|
12
|
+
--msr-spacing: 0.25rem;
|
|
13
|
+
--msr-radius-md: 0.375rem;
|
|
14
|
+
--msr-radius-lg: 0.5rem;
|
|
15
|
+
--msr-default-transition-duration: 150ms;
|
|
16
|
+
--msr-default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
17
|
+
--msr-default-font-family: var(--msr-font-sans);
|
|
18
|
+
--msr-default-mono-font-family: var(--msr-font-mono);
|
|
19
|
+
--msr-color-ink-50: var(--color-ink-50);
|
|
20
|
+
--msr-color-ink-200: var(--color-ink-200);
|
|
21
|
+
--msr-color-ink-700: var(--color-ink-700);
|
|
22
|
+
--msr-color-ink-900: var(--color-ink-900);
|
|
24
23
|
}
|
|
25
24
|
}
|
|
26
25
|
@layer base {
|
|
@@ -34,9 +33,9 @@
|
|
|
34
33
|
line-height: 1.5;
|
|
35
34
|
-webkit-text-size-adjust: 100%;
|
|
36
35
|
tab-size: 4;
|
|
37
|
-
font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
|
|
38
|
-
font-feature-settings: var(--default-font-feature-settings, normal);
|
|
39
|
-
font-variation-settings: var(--default-font-variation-settings, normal);
|
|
36
|
+
font-family: var(--msr-default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
|
|
37
|
+
font-feature-settings: var(--msr-default-font-feature-settings, normal);
|
|
38
|
+
font-variation-settings: var(--msr-default-font-variation-settings, normal);
|
|
40
39
|
-webkit-tap-highlight-color: transparent;
|
|
41
40
|
}
|
|
42
41
|
hr {
|
|
@@ -61,9 +60,9 @@
|
|
|
61
60
|
font-weight: bolder;
|
|
62
61
|
}
|
|
63
62
|
code, kbd, samp, pre {
|
|
64
|
-
font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
|
|
65
|
-
font-feature-settings: var(--default-mono-font-feature-settings, normal);
|
|
66
|
-
font-variation-settings: var(--default-mono-font-variation-settings, normal);
|
|
63
|
+
font-family: var(--msr-default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
|
|
64
|
+
font-feature-settings: var(--msr-default-mono-font-feature-settings, normal);
|
|
65
|
+
font-variation-settings: var(--msr-default-mono-font-variation-settings, normal);
|
|
67
66
|
font-size: 1em;
|
|
68
67
|
}
|
|
69
68
|
small {
|
|
@@ -172,395 +171,343 @@
|
|
|
172
171
|
}
|
|
173
172
|
}
|
|
174
173
|
@layer utilities {
|
|
175
|
-
.pointer-events-auto {
|
|
174
|
+
.msr\:pointer-events-auto {
|
|
176
175
|
pointer-events: auto;
|
|
177
176
|
}
|
|
178
|
-
.pointer-events-none {
|
|
177
|
+
.msr\:pointer-events-none {
|
|
179
178
|
pointer-events: none;
|
|
180
179
|
}
|
|
181
|
-
.absolute {
|
|
180
|
+
.msr\:absolute {
|
|
182
181
|
position: absolute;
|
|
183
182
|
}
|
|
184
|
-
.fixed {
|
|
183
|
+
.msr\:fixed {
|
|
185
184
|
position: fixed;
|
|
186
185
|
}
|
|
187
|
-
.relative {
|
|
186
|
+
.msr\:relative {
|
|
188
187
|
position: relative;
|
|
189
188
|
}
|
|
190
|
-
.inset-0 {
|
|
191
|
-
inset: calc(var(--spacing) * 0);
|
|
189
|
+
.msr\:inset-0 {
|
|
190
|
+
inset: calc(var(--msr-spacing) * 0);
|
|
192
191
|
}
|
|
193
|
-
.
|
|
194
|
-
|
|
192
|
+
.msr\:top-0 {
|
|
193
|
+
top: calc(var(--msr-spacing) * 0);
|
|
195
194
|
}
|
|
196
|
-
.
|
|
197
|
-
inset-inline-end: var(--spacing);
|
|
198
|
-
}
|
|
199
|
-
.top-0 {
|
|
200
|
-
top: calc(var(--spacing) * 0);
|
|
201
|
-
}
|
|
202
|
-
.top-full {
|
|
195
|
+
.msr\:top-full {
|
|
203
196
|
top: 100%;
|
|
204
197
|
}
|
|
205
|
-
.right-0 {
|
|
206
|
-
right: calc(var(--spacing) * 0);
|
|
198
|
+
.msr\:right-0 {
|
|
199
|
+
right: calc(var(--msr-spacing) * 0);
|
|
207
200
|
}
|
|
208
|
-
.bottom-0 {
|
|
209
|
-
bottom: calc(var(--spacing) * 0);
|
|
201
|
+
.msr\:bottom-0 {
|
|
202
|
+
bottom: calc(var(--msr-spacing) * 0);
|
|
210
203
|
}
|
|
211
|
-
.bottom-full {
|
|
204
|
+
.msr\:bottom-full {
|
|
212
205
|
bottom: 100%;
|
|
213
206
|
}
|
|
214
|
-
.left-0 {
|
|
215
|
-
left: calc(var(--spacing) * 0);
|
|
216
|
-
}
|
|
217
|
-
.left-1 {
|
|
218
|
-
left: calc(var(--spacing) * 1);
|
|
207
|
+
.msr\:left-0 {
|
|
208
|
+
left: calc(var(--msr-spacing) * 0);
|
|
219
209
|
}
|
|
220
|
-
.left-1\/2 {
|
|
210
|
+
.msr\:left-1\/2 {
|
|
221
211
|
left: calc(1 / 2 * 100%);
|
|
222
212
|
}
|
|
223
|
-
.z-50 {
|
|
213
|
+
.msr\:z-50 {
|
|
224
214
|
z-index: 50;
|
|
225
215
|
}
|
|
226
|
-
.z-\[70\] {
|
|
216
|
+
.msr\:z-\[70\] {
|
|
227
217
|
z-index: 70;
|
|
228
218
|
}
|
|
229
|
-
.z-\[90\] {
|
|
219
|
+
.msr\:z-\[90\] {
|
|
230
220
|
z-index: 90;
|
|
231
221
|
}
|
|
232
|
-
.mt-2 {
|
|
233
|
-
margin-top: calc(var(--spacing) * 2);
|
|
222
|
+
.msr\:mt-2 {
|
|
223
|
+
margin-top: calc(var(--msr-spacing) * 2);
|
|
234
224
|
}
|
|
235
|
-
.mb-2 {
|
|
236
|
-
margin-bottom: calc(var(--spacing) * 2);
|
|
225
|
+
.msr\:mb-2 {
|
|
226
|
+
margin-bottom: calc(var(--msr-spacing) * 2);
|
|
237
227
|
}
|
|
238
|
-
|
|
239
|
-
margin-left: calc(var(--spacing) * -1);
|
|
228
|
+
.msr\:-ml-1 {
|
|
229
|
+
margin-left: calc(var(--msr-spacing) * -1);
|
|
240
230
|
}
|
|
241
|
-
.flex {
|
|
231
|
+
.msr\:flex {
|
|
242
232
|
display: flex;
|
|
243
233
|
}
|
|
244
|
-
.
|
|
245
|
-
|
|
234
|
+
.msr\:size-8 {
|
|
235
|
+
width: calc(var(--msr-spacing) * 8);
|
|
236
|
+
height: calc(var(--msr-spacing) * 8);
|
|
246
237
|
}
|
|
247
|
-
.
|
|
248
|
-
|
|
249
|
-
height: calc(var(--spacing) * 8);
|
|
238
|
+
.msr\:h-8 {
|
|
239
|
+
height: calc(var(--msr-spacing) * 8);
|
|
250
240
|
}
|
|
251
|
-
.h-
|
|
252
|
-
height: calc(var(--spacing) * 8);
|
|
253
|
-
}
|
|
254
|
-
.h-full {
|
|
241
|
+
.msr\:h-full {
|
|
255
242
|
height: 100%;
|
|
256
243
|
}
|
|
257
|
-
.h-px {
|
|
244
|
+
.msr\:h-px {
|
|
258
245
|
height: 1px;
|
|
259
246
|
}
|
|
260
|
-
.w-4 {
|
|
261
|
-
width: calc(var(--spacing) * 4);
|
|
247
|
+
.msr\:w-4 {
|
|
248
|
+
width: calc(var(--msr-spacing) * 4);
|
|
262
249
|
}
|
|
263
|
-
.w-44 {
|
|
264
|
-
width: calc(var(--spacing) * 44);
|
|
250
|
+
.msr\:w-44 {
|
|
251
|
+
width: calc(var(--msr-spacing) * 44);
|
|
265
252
|
}
|
|
266
|
-
.w-full {
|
|
253
|
+
.msr\:w-full {
|
|
267
254
|
width: 100%;
|
|
268
255
|
}
|
|
269
|
-
.w-px {
|
|
256
|
+
.msr\:w-px {
|
|
270
257
|
width: 1px;
|
|
271
258
|
}
|
|
272
|
-
.flex-1 {
|
|
259
|
+
.msr\:flex-1 {
|
|
273
260
|
flex: 1;
|
|
274
261
|
}
|
|
275
|
-
.
|
|
276
|
-
border-collapse: collapse;
|
|
277
|
-
}
|
|
278
|
-
.-translate-x-1 {
|
|
279
|
-
--tw-translate-x: calc(var(--spacing) * -1);
|
|
280
|
-
translate: var(--tw-translate-x) var(--tw-translate-y);
|
|
281
|
-
}
|
|
282
|
-
.-translate-x-1\/2 {
|
|
262
|
+
.msr\:-translate-x-1\/2 {
|
|
283
263
|
--tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
|
|
284
264
|
translate: var(--tw-translate-x) var(--tw-translate-y);
|
|
285
265
|
}
|
|
286
|
-
|
|
287
|
-
--tw-translate-y: calc(var(--spacing) * -1);
|
|
288
|
-
translate: var(--tw-translate-x) var(--tw-translate-y);
|
|
289
|
-
}
|
|
290
|
-
.-translate-y-1\/2 {
|
|
266
|
+
.msr\:-translate-y-1\/2 {
|
|
291
267
|
--tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
|
|
292
268
|
translate: var(--tw-translate-x) var(--tw-translate-y);
|
|
293
269
|
}
|
|
294
|
-
.rotate-90 {
|
|
270
|
+
.msr\:rotate-90 {
|
|
295
271
|
rotate: 90deg;
|
|
296
272
|
}
|
|
297
|
-
.rotate-\[45deg\] {
|
|
273
|
+
.msr\:rotate-\[45deg\] {
|
|
298
274
|
rotate: 45deg;
|
|
299
275
|
}
|
|
300
|
-
.rotate-\[135deg\] {
|
|
276
|
+
.msr\:rotate-\[135deg\] {
|
|
301
277
|
rotate: 135deg;
|
|
302
278
|
}
|
|
303
|
-
.cursor-crosshair {
|
|
279
|
+
.msr\:cursor-crosshair {
|
|
304
280
|
cursor: crosshair;
|
|
305
281
|
}
|
|
306
|
-
.cursor-default {
|
|
282
|
+
.msr\:cursor-default {
|
|
307
283
|
cursor: default;
|
|
308
284
|
}
|
|
309
|
-
.
|
|
310
|
-
cursor: grab;
|
|
311
|
-
}
|
|
312
|
-
.cursor-grabbing {
|
|
313
|
-
cursor: grabbing;
|
|
314
|
-
}
|
|
315
|
-
.cursor-pointer {
|
|
316
|
-
cursor: pointer;
|
|
317
|
-
}
|
|
318
|
-
.resize {
|
|
319
|
-
resize: both;
|
|
320
|
-
}
|
|
321
|
-
.flex-col {
|
|
285
|
+
.msr\:flex-col {
|
|
322
286
|
flex-direction: column;
|
|
323
287
|
}
|
|
324
|
-
.items-center {
|
|
288
|
+
.msr\:items-center {
|
|
325
289
|
align-items: center;
|
|
326
290
|
}
|
|
327
|
-
.items-stretch {
|
|
291
|
+
.msr\:items-stretch {
|
|
328
292
|
align-items: stretch;
|
|
329
293
|
}
|
|
330
|
-
.justify-center {
|
|
294
|
+
.msr\:justify-center {
|
|
331
295
|
justify-content: center;
|
|
332
296
|
}
|
|
333
|
-
.gap-1 {
|
|
334
|
-
gap: calc(var(--spacing) * 1);
|
|
297
|
+
.msr\:gap-1 {
|
|
298
|
+
gap: calc(var(--msr-spacing) * 1);
|
|
335
299
|
}
|
|
336
|
-
.gap-2 {
|
|
337
|
-
gap: calc(var(--spacing) * 2);
|
|
300
|
+
.msr\:gap-2 {
|
|
301
|
+
gap: calc(var(--msr-spacing) * 2);
|
|
338
302
|
}
|
|
339
|
-
.gap-px {
|
|
303
|
+
.msr\:gap-px {
|
|
340
304
|
gap: 1px;
|
|
341
305
|
}
|
|
342
|
-
.rounded {
|
|
306
|
+
.msr\:rounded {
|
|
343
307
|
border-radius: 0.25rem;
|
|
344
308
|
}
|
|
345
|
-
.rounded-\[6px\] {
|
|
309
|
+
.msr\:rounded-\[6px\] {
|
|
346
310
|
border-radius: 6px;
|
|
347
311
|
}
|
|
348
|
-
.rounded-\[8px\] {
|
|
312
|
+
.msr\:rounded-\[8px\] {
|
|
349
313
|
border-radius: 8px;
|
|
350
314
|
}
|
|
351
|
-
.rounded-\[12px\] {
|
|
315
|
+
.msr\:rounded-\[12px\] {
|
|
352
316
|
border-radius: 12px;
|
|
353
317
|
}
|
|
354
|
-
.rounded-lg {
|
|
355
|
-
border-radius: var(--radius-lg);
|
|
318
|
+
.msr\:rounded-lg {
|
|
319
|
+
border-radius: var(--msr-radius-lg);
|
|
356
320
|
}
|
|
357
|
-
.rounded-md {
|
|
358
|
-
border-radius: var(--radius-md);
|
|
321
|
+
.msr\:rounded-md {
|
|
322
|
+
border-radius: var(--msr-radius-md);
|
|
359
323
|
}
|
|
360
|
-
.border {
|
|
324
|
+
.msr\:border {
|
|
361
325
|
border-style: var(--tw-border-style);
|
|
362
326
|
border-width: 1px;
|
|
363
327
|
}
|
|
364
|
-
.border-t {
|
|
328
|
+
.msr\:border-t {
|
|
365
329
|
border-top-style: var(--tw-border-style);
|
|
366
330
|
border-top-width: 1px;
|
|
367
331
|
}
|
|
368
|
-
.border-l {
|
|
332
|
+
.msr\:border-l {
|
|
369
333
|
border-left-style: var(--tw-border-style);
|
|
370
334
|
border-left-width: 1px;
|
|
371
335
|
}
|
|
372
|
-
.border-dashed {
|
|
336
|
+
.msr\:border-dashed {
|
|
373
337
|
--tw-border-style: dashed;
|
|
374
338
|
border-style: dashed;
|
|
375
339
|
}
|
|
376
|
-
.border-\[\#2563eb\]\/70 {
|
|
340
|
+
.msr\:border-\[\#2563eb\]\/70 {
|
|
377
341
|
border-color: color-mix(in oklab, #2563eb 70%, transparent);
|
|
378
342
|
}
|
|
379
|
-
.border-ink-200 {
|
|
380
|
-
border-color: var(--color-ink-200);
|
|
343
|
+
.msr\:border-ink-200 {
|
|
344
|
+
border-color: var(--msr-color-ink-200);
|
|
381
345
|
}
|
|
382
|
-
.bg-\[\#0d99ff\] {
|
|
346
|
+
.msr\:bg-\[\#0d99ff\] {
|
|
383
347
|
background-color: #0d99ff;
|
|
384
348
|
}
|
|
385
|
-
.bg-\[\#2563eb\] {
|
|
349
|
+
.msr\:bg-\[\#2563eb\] {
|
|
386
350
|
background-color: #2563eb;
|
|
387
351
|
}
|
|
388
|
-
.bg-\[\#fff\] {
|
|
352
|
+
.msr\:bg-\[\#fff\] {
|
|
389
353
|
background-color: #fff;
|
|
390
354
|
}
|
|
391
|
-
.bg-black {
|
|
392
|
-
background-color: var(--color-black);
|
|
355
|
+
.msr\:bg-black {
|
|
356
|
+
background-color: var(--msr-color-black);
|
|
393
357
|
}
|
|
394
|
-
.bg-black\/10 {
|
|
395
|
-
background-color: color-
|
|
358
|
+
.msr\:bg-black\/10 {
|
|
359
|
+
background-color: var(--msr-color-black);
|
|
396
360
|
@supports (color: color-mix(in lab, red, red)) {
|
|
397
|
-
background-color: color-mix(in oklab, var(--color-black) 10%, transparent);
|
|
361
|
+
background-color: color-mix(in oklab, var(--msr-color-black) 10%, transparent);
|
|
398
362
|
}
|
|
399
363
|
}
|
|
400
|
-
.bg-ink-900 {
|
|
401
|
-
background-color: var(--color-ink-900);
|
|
402
|
-
}
|
|
403
|
-
.bg-ink-900\/90 {
|
|
404
|
-
background-color: var(--color-ink-900);
|
|
364
|
+
.msr\:bg-ink-900\/90 {
|
|
365
|
+
background-color: var(--msr-color-ink-900);
|
|
405
366
|
@supports (color: color-mix(in lab, red, red)) {
|
|
406
|
-
background-color: color-mix(in oklab, var(--color-ink-900) 90%, transparent);
|
|
367
|
+
background-color: color-mix(in oklab, var(--msr-color-ink-900) 90%, transparent);
|
|
407
368
|
}
|
|
408
369
|
}
|
|
409
|
-
.bg-transparent {
|
|
370
|
+
.msr\:bg-transparent {
|
|
410
371
|
background-color: transparent;
|
|
411
372
|
}
|
|
412
|
-
.bg-white {
|
|
413
|
-
background-color: var(--color-white);
|
|
373
|
+
.msr\:bg-white {
|
|
374
|
+
background-color: var(--msr-color-white);
|
|
414
375
|
}
|
|
415
|
-
.p-1 {
|
|
416
|
-
padding: calc(var(--spacing) * 1);
|
|
376
|
+
.msr\:p-1 {
|
|
377
|
+
padding: calc(var(--msr-spacing) * 1);
|
|
417
378
|
}
|
|
418
|
-
.px-1 {
|
|
419
|
-
padding-inline: calc(var(--spacing) * 1);
|
|
379
|
+
.msr\:px-1 {
|
|
380
|
+
padding-inline: calc(var(--msr-spacing) * 1);
|
|
420
381
|
}
|
|
421
|
-
.px-2 {
|
|
422
|
-
padding-inline: calc(var(--spacing) * 2);
|
|
382
|
+
.msr\:px-2 {
|
|
383
|
+
padding-inline: calc(var(--msr-spacing) * 2);
|
|
423
384
|
}
|
|
424
|
-
.py-0 {
|
|
425
|
-
padding-block: calc(var(--spacing) * 0);
|
|
385
|
+
.msr\:py-0\.5 {
|
|
386
|
+
padding-block: calc(var(--msr-spacing) * 0.5);
|
|
426
387
|
}
|
|
427
|
-
.py-
|
|
428
|
-
padding-block: calc(var(--spacing) *
|
|
388
|
+
.msr\:py-1 {
|
|
389
|
+
padding-block: calc(var(--msr-spacing) * 1);
|
|
429
390
|
}
|
|
430
|
-
.py-1 {
|
|
431
|
-
padding-block: calc(var(--spacing) * 1);
|
|
391
|
+
.msr\:py-1\.5 {
|
|
392
|
+
padding-block: calc(var(--msr-spacing) * 1.5);
|
|
432
393
|
}
|
|
433
|
-
.
|
|
434
|
-
padding-block: calc(var(--spacing) * 1.5);
|
|
435
|
-
}
|
|
436
|
-
.text-left {
|
|
394
|
+
.msr\:text-left {
|
|
437
395
|
text-align: left;
|
|
438
396
|
}
|
|
439
|
-
.text-\[10px\] {
|
|
397
|
+
.msr\:text-\[10px\] {
|
|
440
398
|
font-size: 10px;
|
|
441
399
|
}
|
|
442
|
-
.text-\[11px\] {
|
|
400
|
+
.msr\:text-\[11px\] {
|
|
443
401
|
font-size: 11px;
|
|
444
402
|
}
|
|
445
|
-
.text-\[12px\] {
|
|
403
|
+
.msr\:text-\[12px\] {
|
|
446
404
|
font-size: 12px;
|
|
447
405
|
}
|
|
448
|
-
.whitespace-nowrap {
|
|
406
|
+
.msr\:whitespace-nowrap {
|
|
449
407
|
white-space: nowrap;
|
|
450
408
|
}
|
|
451
|
-
.text-black {
|
|
452
|
-
color: var(--color-black);
|
|
453
|
-
}
|
|
454
|
-
.text-ink-50 {
|
|
455
|
-
color: var(--color-ink-50);
|
|
409
|
+
.msr\:text-black {
|
|
410
|
+
color: var(--msr-color-black);
|
|
456
411
|
}
|
|
457
|
-
.text-ink-
|
|
458
|
-
color: var(--color-ink-
|
|
412
|
+
.msr\:text-ink-50 {
|
|
413
|
+
color: var(--msr-color-ink-50);
|
|
459
414
|
}
|
|
460
|
-
.text-ink-700 {
|
|
461
|
-
color: var(--color-ink-700);
|
|
415
|
+
.msr\:text-ink-700 {
|
|
416
|
+
color: var(--msr-color-ink-700);
|
|
462
417
|
}
|
|
463
|
-
.text-white {
|
|
464
|
-
color: var(--color-white);
|
|
418
|
+
.msr\:text-white {
|
|
419
|
+
color: var(--msr-color-white);
|
|
465
420
|
}
|
|
466
|
-
.text-white\/60 {
|
|
467
|
-
color: color-
|
|
421
|
+
.msr\:text-white\/60 {
|
|
422
|
+
color: var(--msr-color-white);
|
|
468
423
|
@supports (color: color-mix(in lab, red, red)) {
|
|
469
|
-
color: color-mix(in oklab, var(--color-white) 60%, transparent);
|
|
424
|
+
color: color-mix(in oklab, var(--msr-color-white) 60%, transparent);
|
|
470
425
|
}
|
|
471
426
|
}
|
|
472
|
-
.tabular-nums {
|
|
427
|
+
.msr\:tabular-nums {
|
|
473
428
|
--tw-numeric-spacing: tabular-nums;
|
|
474
429
|
font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
|
|
475
430
|
}
|
|
476
|
-
.
|
|
477
|
-
text-decoration-line: underline;
|
|
478
|
-
}
|
|
479
|
-
.opacity-0 {
|
|
431
|
+
.msr\:opacity-0 {
|
|
480
432
|
opacity: 0%;
|
|
481
433
|
}
|
|
482
|
-
.opacity-100 {
|
|
434
|
+
.msr\:opacity-100 {
|
|
483
435
|
opacity: 100%;
|
|
484
436
|
}
|
|
485
|
-
.shadow-\[0px_0px_\.5px_rgba\(0\,0\,0\,\.18\)\,0px_3px_8px_rgba\(0\,0\,0\,\.1\)\,0px_1px_3px_rgba\(0\,0\,0\,\.1\)\] {
|
|
437
|
+
.msr\:shadow-\[0px_0px_\.5px_rgba\(0\,0\,0\,\.18\)\,0px_3px_8px_rgba\(0\,0\,0\,\.1\)\,0px_1px_3px_rgba\(0\,0\,0\,\.1\)\] {
|
|
486
438
|
--tw-shadow: 0px 0px .5px var(--tw-shadow-color, rgba(0,0,0,.18)), 0px 3px 8px var(--tw-shadow-color, rgba(0,0,0,.1)), 0px 1px 3px var(--tw-shadow-color, rgba(0,0,0,.1));
|
|
487
439
|
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
|
488
440
|
}
|
|
489
|
-
.shadow-\[0px_10px_30px_rgba\(0\,0\,0\,0\.08\)\] {
|
|
441
|
+
.msr\:shadow-\[0px_10px_30px_rgba\(0\,0\,0\,0\.08\)\] {
|
|
490
442
|
--tw-shadow: 0px 10px 30px var(--tw-shadow-color, rgba(0,0,0,0.08));
|
|
491
443
|
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
|
492
444
|
}
|
|
493
|
-
.outline {
|
|
445
|
+
.msr\:outline {
|
|
494
446
|
outline-style: var(--tw-outline-style);
|
|
495
447
|
outline-width: 1px;
|
|
496
448
|
}
|
|
497
|
-
.outline-transparent {
|
|
449
|
+
.msr\:outline-transparent {
|
|
498
450
|
outline-color: transparent;
|
|
499
451
|
}
|
|
500
|
-
.transition {
|
|
501
|
-
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
|
|
502
|
-
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
|
|
503
|
-
transition-duration: var(--tw-duration, var(--default-transition-duration));
|
|
504
|
-
}
|
|
505
|
-
.transition-opacity {
|
|
452
|
+
.msr\:transition-opacity {
|
|
506
453
|
transition-property: opacity;
|
|
507
|
-
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
|
|
508
|
-
transition-duration: var(--tw-duration, var(--default-transition-duration));
|
|
454
|
+
transition-timing-function: var(--tw-ease, var(--msr-default-transition-timing-function));
|
|
455
|
+
transition-duration: var(--tw-duration, var(--msr-default-transition-duration));
|
|
509
456
|
}
|
|
510
|
-
.duration-150 {
|
|
457
|
+
.msr\:duration-150 {
|
|
511
458
|
--tw-duration: 150ms;
|
|
512
459
|
transition-duration: 150ms;
|
|
513
460
|
}
|
|
514
|
-
.outline-none {
|
|
461
|
+
.msr\:outline-none {
|
|
515
462
|
--tw-outline-style: none;
|
|
516
463
|
outline-style: none;
|
|
517
464
|
}
|
|
518
|
-
.select-none {
|
|
465
|
+
.msr\:select-none {
|
|
519
466
|
-webkit-user-select: none;
|
|
520
467
|
user-select: none;
|
|
521
468
|
}
|
|
522
|
-
.hover\:bg-\[\#0d99ff\] {
|
|
469
|
+
.msr\:hover\:bg-\[\#0d99ff\] {
|
|
523
470
|
&:hover {
|
|
524
471
|
@media (hover: hover) {
|
|
525
472
|
background-color: #0d99ff;
|
|
526
473
|
}
|
|
527
474
|
}
|
|
528
475
|
}
|
|
529
|
-
.hover\:bg-black\/4 {
|
|
476
|
+
.msr\:hover\:bg-black\/4 {
|
|
530
477
|
&:hover {
|
|
531
478
|
@media (hover: hover) {
|
|
532
|
-
background-color: color-
|
|
479
|
+
background-color: var(--msr-color-black);
|
|
533
480
|
@supports (color: color-mix(in lab, red, red)) {
|
|
534
|
-
background-color: color-mix(in oklab, var(--color-black) 4%, transparent);
|
|
481
|
+
background-color: color-mix(in oklab, var(--msr-color-black) 4%, transparent);
|
|
535
482
|
}
|
|
536
483
|
}
|
|
537
484
|
}
|
|
538
485
|
}
|
|
539
|
-
.hover\:bg-black\/10 {
|
|
486
|
+
.msr\:hover\:bg-black\/10 {
|
|
540
487
|
&:hover {
|
|
541
488
|
@media (hover: hover) {
|
|
542
|
-
background-color: color-
|
|
489
|
+
background-color: var(--msr-color-black);
|
|
543
490
|
@supports (color: color-mix(in lab, red, red)) {
|
|
544
|
-
background-color: color-mix(in oklab, var(--color-black) 10%, transparent);
|
|
491
|
+
background-color: color-mix(in oklab, var(--msr-color-black) 10%, transparent);
|
|
545
492
|
}
|
|
546
493
|
}
|
|
547
494
|
}
|
|
548
495
|
}
|
|
549
|
-
.hover\:text-white {
|
|
496
|
+
.msr\:hover\:text-white {
|
|
550
497
|
&:hover {
|
|
551
498
|
@media (hover: hover) {
|
|
552
|
-
color: var(--color-white);
|
|
499
|
+
color: var(--msr-color-white);
|
|
553
500
|
}
|
|
554
501
|
}
|
|
555
502
|
}
|
|
556
|
-
.focus\:outline-none {
|
|
503
|
+
.msr\:focus\:outline-none {
|
|
557
504
|
&:focus {
|
|
558
505
|
--tw-outline-style: none;
|
|
559
506
|
outline-style: none;
|
|
560
507
|
}
|
|
561
508
|
}
|
|
562
509
|
}
|
|
563
|
-
:root {
|
|
510
|
+
:root, :host {
|
|
564
511
|
--color-ink-50: #f8fafc;
|
|
565
512
|
--color-ink-200: #e2e8f0;
|
|
566
513
|
--color-ink-500: #64748b;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "mesurer",
|
|
3
|
-
"version": "0.0.
|
|
4
|
-
"description": "Measure and align
|
|
3
|
+
"version": "0.0.6",
|
|
4
|
+
"description": "Measure and align elements on any website.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "Julien Thibeaut",
|
|
7
7
|
"type": "module",
|
|
@@ -24,9 +24,7 @@
|
|
|
24
24
|
"README.md",
|
|
25
25
|
"LICENSE"
|
|
26
26
|
],
|
|
27
|
-
"sideEffects": [
|
|
28
|
-
"*.css"
|
|
29
|
-
],
|
|
27
|
+
"sideEffects": ["*.css"],
|
|
30
28
|
"publishConfig": {
|
|
31
29
|
"access": "public"
|
|
32
30
|
},
|
|
@@ -38,6 +36,12 @@
|
|
|
38
36
|
"bugs": {
|
|
39
37
|
"url": "https://github.com/ibelick/mesurer/issues"
|
|
40
38
|
},
|
|
39
|
+
"scripts": {
|
|
40
|
+
"build": "pnpm exec tailwindcss -i styles.css -o styles.generated.css && node scripts/generate-styles.mjs && tsup && pnpm exec tailwindcss -i styles.css -o dist/styles.css",
|
|
41
|
+
"dev": "tsup --watch",
|
|
42
|
+
"typecheck": "tsc --noEmit",
|
|
43
|
+
"prepublishOnly": "npm run typecheck && npm run build"
|
|
44
|
+
},
|
|
41
45
|
"peerDependencies": {
|
|
42
46
|
"react": ">=18.0.0",
|
|
43
47
|
"react-dom": ">=18.0.0"
|
|
@@ -55,10 +59,5 @@
|
|
|
55
59
|
"keywords": [
|
|
56
60
|
"measurement",
|
|
57
61
|
"alignment"
|
|
58
|
-
]
|
|
59
|
-
|
|
60
|
-
"build": "pnpm exec tailwindcss -i styles.css -o styles.generated.css && node scripts/generate-styles.mjs && tsup && pnpm exec tailwindcss -i styles.css -o dist/styles.css",
|
|
61
|
-
"dev": "tsup --watch",
|
|
62
|
-
"typecheck": "tsc --noEmit"
|
|
63
|
-
}
|
|
64
|
-
}
|
|
62
|
+
]
|
|
63
|
+
}
|