@rogieking/figui3 4.4.4 → 4.5.3
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 +1 -0
- package/components.css +10 -12
- package/dist/base.css +1 -1
- package/dist/components.css +1 -1
- package/dist/fig.css +1 -1
- package/dist/fig.js +39 -35
- package/fig.js +85 -18
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -307,6 +307,7 @@ Wraps a `<fig-field>` and `<fig-slider>` into a single labeled control. All slid
|
|
|
307
307
|
| `max` | number | — | Maximum |
|
|
308
308
|
| `step` | number | — | Step increment |
|
|
309
309
|
| `units` | string | — | Unit string (e.g. `"px"`, `"%"`) |
|
|
310
|
+
| `units-disallow` | string | `"px"` | Comma-separated unit disallow list (e.g. `"px,rem"`) |
|
|
310
311
|
| `unit-position` | string | `"suffix"` | `"suffix"` or `"prefix"` |
|
|
311
312
|
| `transform` | number | — | Display multiplier |
|
|
312
313
|
| `steppers` | boolean | `false` | Show spin buttons |
|
package/components.css
CHANGED
|
@@ -428,7 +428,7 @@ fig-input-number .fig-steppers {
|
|
|
428
428
|
border-radius: 0 var(--radius-medium) var(--radius-medium) 0;
|
|
429
429
|
overflow: hidden;
|
|
430
430
|
|
|
431
|
-
|
|
431
|
+
button {
|
|
432
432
|
display: block;
|
|
433
433
|
appearance: none;
|
|
434
434
|
border: 0;
|
|
@@ -437,16 +437,13 @@ fig-input-number .fig-steppers {
|
|
|
437
437
|
width: 1.5rem;
|
|
438
438
|
flex: 1;
|
|
439
439
|
background-color: var(--figma-color-text-secondary);
|
|
440
|
-
cursor: pointer;
|
|
441
440
|
mask-size: 1rem;
|
|
442
441
|
mask-repeat: no-repeat;
|
|
443
442
|
mask-position: center -3.5px;
|
|
444
443
|
|
|
445
|
-
&:hover
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
&:active {
|
|
449
|
-
background-color: var(--figma-color-text-tertiary);
|
|
444
|
+
&:hover,
|
|
445
|
+
&:active{
|
|
446
|
+
background-color: var(--figma-color-text) !important;
|
|
450
447
|
}
|
|
451
448
|
}
|
|
452
449
|
|
|
@@ -458,9 +455,15 @@ fig-input-number .fig-steppers {
|
|
|
458
455
|
& .fig-stepper-up {
|
|
459
456
|
mask-image: var(--icon-chevron);
|
|
460
457
|
rotate: 180deg;
|
|
458
|
+
&:active{
|
|
459
|
+
transform: translateY(1px);
|
|
460
|
+
}
|
|
461
461
|
}
|
|
462
462
|
& .fig-stepper-down {
|
|
463
463
|
mask-image: var(--icon-chevron);
|
|
464
|
+
&:active{
|
|
465
|
+
transform: translateY(1px);
|
|
466
|
+
}
|
|
464
467
|
}
|
|
465
468
|
}
|
|
466
469
|
|
|
@@ -3377,11 +3380,6 @@ fig-input-palette {
|
|
|
3377
3380
|
min-width: 0;
|
|
3378
3381
|
border-radius: var(--radius-medium);
|
|
3379
3382
|
|
|
3380
|
-
&:focus {
|
|
3381
|
-
outline: 1px solid var(--figma-color-border-selected) !important;
|
|
3382
|
-
outline-offset: -1px !important;
|
|
3383
|
-
}
|
|
3384
|
-
|
|
3385
3383
|
.palette-colors {
|
|
3386
3384
|
display: flex;
|
|
3387
3385
|
flex-wrap: nowrap;
|
package/dist/base.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
html,:host{
|
|
1
|
+
html,:host{color:var(--figma-color-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:var(--font-family);font-size:16px;font-weight:var(--body-medium-fontWeight);letter-spacing:var(--body-letter-spacing);background-color:var(--figma-color-bg);width:100%;height:100%;margin:0;padding:0}body,:host{font-size:var(--body-medium-fontSize);letter-spacing:var(--body-letter-spacing)}h1,h2{font-weight:var(--body-large-strong-fontWeight);font-size:var(--body-large-fontSize)}h3{font-weight:var(--body-medium-strong-fontWeight);font-size:var(--body-medium-fontSize)}hr{background-color:var(--figma-color-border);margin:var(--spacer-2)0;border:none;width:100%;height:1px}hr[vertical]{margin:0 var(--spacer-2);width:1px;height:100%}*,*:before,*:after{box-sizing:border-box}::selection{background-color:var(--figma-color-text-selection)}::selection{background-color:var(--figma-color-text-selection)}::-webkit-scrollbar{width:var(--spacer-1);height:var(--spacer-1)}::-webkit-scrollbar-thumb{background-color:var(--figma-color-bg-tertiary);border-radius:calc(var(--spacer-1)/2)}::-webkit-scrollbar-thumb:hover{background-color:var(--figma-color-bg-secondary)}*{scrollbar-width:thin;scrollbar-color:var(--figma-color-bg-tertiary)var(--figma-color-bg-secondary)}.subtle{color:var(--figma-color-text-tertiary)}p{margin:var(--spacer-2)0;color:var(--figma-color-text-secondary);line-height:1rem}label{color:var(--figma-color-text-secondary)}h2{font-weight:var(--body-medium-strong-fontWeight);margin:var(--spacer-2)0}
|