@rogieking/figui3 11.6.4 → 11.6.6

package/CHANGELOG.md

@@ -2,6 +2,33 @@
 
 All notable changes to this project will be documented in this file.
 
+## [11.6.6]
+
+### Added
+
+- Added playground navigation search with filtered examples and groups.
+
+### Changed
+
+- Remapped logical color tokens to selected-state equivalents within selected components.
+- Stretched choices across vertical chooser layouts.
+
+### Fixed
+
+- Preserved specialized selected colors for tabs and segmented controls.
+
+## [11.6.5]
+
+### Changed
+
+- Replaced selected color-tip outlines with brand backgrounds in both color modes.
+- Updated the playground color-tip example to demonstrate translucent color.
+
+### Fixed
+
+- Hid percentage tooltips while dragging persistent gradient color tips.
+- Kept the fill-picker input mode selector aligned to the eyedropper width.
+
 ## [11.6.4]
 
 ### Fixed

package/components.css

@@ -499,6 +499,30 @@
   }
 }
 
+[selected]:not([selected="false"]):not(fig-tabs):not(fig-tab):not(fig-segmented-control):not(fig-segment) {
+  --figma-color-bg: var(--figma-color-bg-selected);
+  --figma-color-bg-hover: var(--figma-color-bg-selected-hover);
+  --figma-color-bg-active: var(--figma-color-bg-selected-pressed);
+  --figma-color-bg-pressed: var(--figma-color-bg-selected-pressed);
+  --figma-color-bg-secondary: var(--figma-color-bg-selected-secondary);
+  --figma-color-bg-tertiary: var(--figma-color-bg-selected-tertiary);
+  --figma-color-border: var(--figma-color-border-onselected);
+  --figma-color-border-strong: var(--figma-color-border-onselected-strong);
+  --figma-color-icon: var(--figma-color-icon-onselected);
+  --figma-color-icon-hover: var(--figma-color-icon-onselected);
+  --figma-color-icon-pressed: var(--figma-color-icon-onselected);
+  --figma-color-icon-secondary: var(--figma-color-icon-onselected-secondary);
+  --figma-color-icon-secondary-hover: var(--figma-color-icon-onselected);
+  --figma-color-icon-tertiary: var(--figma-color-icon-onselected-tertiary);
+  --figma-color-icon-tertiary-hover: var(--figma-color-icon-onselected);
+  --figma-color-text: var(--figma-color-text-onselected);
+  --figma-color-text-hover: var(--figma-color-text-onselected);
+  --figma-color-text-secondary: var(--figma-color-text-onselected-secondary);
+  --figma-color-text-secondary-hover: var(--figma-color-text-onselected);
+  --figma-color-text-tertiary: var(--figma-color-text-onselected-tertiary);
+  --figma-color-text-tertiary-hover: var(--figma-color-text-onselected);
+}
+
 
 button,
 select,
@@ -6772,6 +6796,12 @@ fig-chooser {
       }
     }
   }
+  &:not([layout]),
+  &[layout=""],
+  &[layout="vertical"] {
+    align-items: stretch;
+  }
+
   &:not([layout]),
   &[layout=""],
   &[layout="vertical"], 
@@ -7283,8 +7313,9 @@ fig-color-tip {
   }
 
   &[selected]:not([selected="false"]){
+    background-color: var(--figma-color-bg-brand);
     outline: var(--tip-selection-width) solid
-      var(--figma-focus-outline-color);
+      transparent;
     outline-offset: 0px;
     &:after {
       top: calc(
@@ -7293,7 +7324,7 @@ fig-color-tip {
     }
     &:before {
       content: "";
-      background: var(--figma-focus-outline-color);
+      background: transparent;
       clip-path: var(--tip-pointer);
       width: 1rem;
       height: 6px;