@rogieking/figui3 11.6.8 → 11.6.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/CHANGELOG.md +11 -0
- package/components.css +44 -1
- package/dist/components.css +1 -1
- package/dist/fig.css +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,17 @@
|
|
|
2
2
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
|
|
5
|
+
## [11.6.9]
|
|
6
|
+
|
|
7
|
+
### Added
|
|
8
|
+
|
|
9
|
+
- Added a native `<meter>` playground example.
|
|
10
|
+
- Added token-driven native `<meter>` styling with customizable `--meter-color`.
|
|
11
|
+
|
|
12
|
+
### Changed
|
|
13
|
+
|
|
14
|
+
- Vertically centered native meters inside `fig-field`, matching progress elements.
|
|
15
|
+
|
|
5
16
|
## [11.6.8]
|
|
6
17
|
|
|
7
18
|
### Added
|
package/components.css
CHANGED
|
@@ -666,6 +666,49 @@ progress {
|
|
|
666
666
|
}
|
|
667
667
|
}
|
|
668
668
|
|
|
669
|
+
meter {
|
|
670
|
+
--meter-height: 0.375rem;
|
|
671
|
+
--meter-radius: calc(var(--meter-height) / 2);
|
|
672
|
+
--meter-color: var(--figma-color-bg-brand);
|
|
673
|
+
|
|
674
|
+
display: block;
|
|
675
|
+
width: 100%;
|
|
676
|
+
min-width: 0;
|
|
677
|
+
height: var(--meter-height);
|
|
678
|
+
margin: 0;
|
|
679
|
+
padding: 0;
|
|
680
|
+
border: 0;
|
|
681
|
+
appearance: none;
|
|
682
|
+
-webkit-appearance: none;
|
|
683
|
+
overflow: hidden;
|
|
684
|
+
background: var(--figma-color-bg-secondary);
|
|
685
|
+
border-radius: var(--meter-radius);
|
|
686
|
+
|
|
687
|
+
&::-webkit-meter-bar {
|
|
688
|
+
height: var(--meter-height);
|
|
689
|
+
border: 0;
|
|
690
|
+
background: var(--figma-color-bg-secondary);
|
|
691
|
+
border-radius: var(--meter-radius);
|
|
692
|
+
box-shadow: none;
|
|
693
|
+
}
|
|
694
|
+
|
|
695
|
+
&::-webkit-meter-optimum-value,
|
|
696
|
+
&::-webkit-meter-suboptimum-value,
|
|
697
|
+
&::-webkit-meter-even-less-good-value {
|
|
698
|
+
background: var(--meter-color);
|
|
699
|
+
border-radius: var(--meter-radius);
|
|
700
|
+
box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
|
|
701
|
+
min-width: var(--meter-height);
|
|
702
|
+
}
|
|
703
|
+
|
|
704
|
+
&::-moz-meter-bar {
|
|
705
|
+
background: var(--meter-color);
|
|
706
|
+
border-radius: var(--meter-radius);
|
|
707
|
+
box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
|
|
708
|
+
min-width: var(--meter-height);
|
|
709
|
+
}
|
|
710
|
+
}
|
|
711
|
+
|
|
669
712
|
fig-input-number .fig-steppers {
|
|
670
713
|
order: 3;
|
|
671
714
|
display: flex;
|
|
@@ -5068,7 +5111,7 @@ fig-field {
|
|
|
5068
5111
|
}
|
|
5069
5112
|
}
|
|
5070
5113
|
|
|
5071
|
-
& > progress {
|
|
5114
|
+
& > :is(progress, meter) {
|
|
5072
5115
|
align-self: center;
|
|
5073
5116
|
}
|
|
5074
5117
|
|