@rogieking/figui3 11.6.5 → 11.6.7
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 +26 -0
- package/components.css +37 -3
- package/dist/components.css +1 -1
- package/dist/fig.css +1 -1
- package/dist/fig.js +4 -4
- package/fig.js +102 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,32 @@
|
|
|
2
2
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
|
|
5
|
+
## [11.6.7]
|
|
6
|
+
|
|
7
|
+
### Changed
|
|
8
|
+
|
|
9
|
+
- Applied selected text styling while preserving specialized tab, segment, menu-item, and select-option states.
|
|
10
|
+
- Preserved dropdown background colors when rendering native chevron images.
|
|
11
|
+
|
|
12
|
+
### Fixed
|
|
13
|
+
|
|
14
|
+
- Marked native dropdown selects and wrapping select buttons as selected only while their picker is open.
|
|
15
|
+
|
|
16
|
+
## [11.6.6]
|
|
17
|
+
|
|
18
|
+
### Added
|
|
19
|
+
|
|
20
|
+
- Added playground navigation search with filtered examples and groups.
|
|
21
|
+
|
|
22
|
+
### Changed
|
|
23
|
+
|
|
24
|
+
- Remapped logical color tokens to selected-state equivalents within selected components.
|
|
25
|
+
- Stretched choices across vertical chooser layouts.
|
|
26
|
+
|
|
27
|
+
### Fixed
|
|
28
|
+
|
|
29
|
+
- Preserved specialized selected colors for tabs and segmented controls.
|
|
30
|
+
|
|
5
31
|
## [11.6.5]
|
|
6
32
|
|
|
7
33
|
### Changed
|
package/components.css
CHANGED
|
@@ -499,6 +499,32 @@
|
|
|
499
499
|
}
|
|
500
500
|
}
|
|
501
501
|
|
|
502
|
+
[selected]:not([selected="false"]):not(:is(fig-tabs, fig-tab, fig-segmented-control, fig-segment, fig-select-option, fig-menu-item)) {
|
|
503
|
+
--figma-color-bg: var(--figma-color-bg-selected);
|
|
504
|
+
--figma-color-bg-hover: var(--figma-color-bg-selected-hover);
|
|
505
|
+
--figma-color-bg-active: var(--figma-color-bg-selected-pressed);
|
|
506
|
+
--figma-color-bg-pressed: var(--figma-color-bg-selected-pressed);
|
|
507
|
+
--figma-color-bg-secondary: var(--figma-color-bg-selected-secondary);
|
|
508
|
+
--figma-color-bg-tertiary: var(--figma-color-bg-selected-tertiary);
|
|
509
|
+
--figma-color-border: var(--figma-color-border-onselected);
|
|
510
|
+
--figma-color-border-strong: var(--figma-color-border-onselected-strong);
|
|
511
|
+
--figma-color-icon: var(--figma-color-icon-onselected);
|
|
512
|
+
--figma-color-icon-hover: var(--figma-color-icon-onselected);
|
|
513
|
+
--figma-color-icon-pressed: var(--figma-color-icon-onselected);
|
|
514
|
+
--figma-color-icon-secondary: var(--figma-color-icon-onselected-secondary);
|
|
515
|
+
--figma-color-icon-secondary-hover: var(--figma-color-icon-onselected);
|
|
516
|
+
--figma-color-icon-tertiary: var(--figma-color-icon-onselected-tertiary);
|
|
517
|
+
--figma-color-icon-tertiary-hover: var(--figma-color-icon-onselected);
|
|
518
|
+
--figma-color-text: var(--figma-color-text-onselected);
|
|
519
|
+
--figma-color-text-hover: var(--figma-color-text-onselected);
|
|
520
|
+
--figma-color-text-secondary: var(--figma-color-text-onselected-secondary);
|
|
521
|
+
--figma-color-text-secondary-hover: var(--figma-color-text-onselected);
|
|
522
|
+
--figma-color-text-tertiary: var(--figma-color-text-onselected-tertiary);
|
|
523
|
+
--figma-color-text-tertiary-hover: var(--figma-color-text-onselected);
|
|
524
|
+
|
|
525
|
+
color: var(--figma-color-text-selected);
|
|
526
|
+
}
|
|
527
|
+
|
|
502
528
|
|
|
503
529
|
button,
|
|
504
530
|
select,
|
|
@@ -704,14 +730,16 @@ textarea {
|
|
|
704
730
|
select,
|
|
705
731
|
input[type="text"][list] {
|
|
706
732
|
padding: var(--spacer-2);
|
|
707
|
-
background-color: var(--figma-color-bg);
|
|
708
733
|
|
|
709
734
|
|
|
710
735
|
&:not([multiple]) {
|
|
711
736
|
height: var(--fig-dropdown-height, var(--spacer-4));
|
|
712
737
|
padding: 0 var(--spacer-4) 0 var(--spacer-2);
|
|
713
|
-
background:
|
|
714
|
-
var(--icon-16-chevron);
|
|
738
|
+
background-color: var(--figma-color-bg);
|
|
739
|
+
background-image: var(--icon-16-chevron);
|
|
740
|
+
background-position: calc(100% - var(--spacer-1)) 50%;
|
|
741
|
+
background-size: 1rem;
|
|
742
|
+
background-repeat: no-repeat;
|
|
715
743
|
}
|
|
716
744
|
&[multiple] {
|
|
717
745
|
overflow: auto;
|
|
@@ -6772,6 +6800,12 @@ fig-chooser {
|
|
|
6772
6800
|
}
|
|
6773
6801
|
}
|
|
6774
6802
|
}
|
|
6803
|
+
&:not([layout]),
|
|
6804
|
+
&[layout=""],
|
|
6805
|
+
&[layout="vertical"] {
|
|
6806
|
+
align-items: stretch;
|
|
6807
|
+
}
|
|
6808
|
+
|
|
6775
6809
|
&:not([layout]),
|
|
6776
6810
|
&[layout=""],
|
|
6777
6811
|
&[layout="vertical"],
|