@phreshos/react-ui 0.1.23 → 0.1.24

package/dist/button.js

@@ -19,7 +19,7 @@ export const Button = forwardRef(function Button({ children, color, disabled = f
 });
 function buttonStyle({ theme, disabled, isFocusVisible, isHovered, isPressed, pending, size, style }) {
     const fontSize = controlFontSizes[size];
-    const { spacing, foreground } = theme;
+    const { spacing, focusColor } = theme;
     const height = Math.max(24, 24 + spacing);
     const interactive = !disabled && !pending;
     const paint = buttonPaint(theme, interactive, isHovered, isPressed);
@@ -40,8 +40,8 @@ function buttonStyle({ theme, disabled, isFocusVisible, isHovered, isPressed, pe
         gap: Math.max(4, spacing / 2),
         border: "none",
         borderRadius: theme.radius,
-        outline: isFocusVisible ? `2px solid ${foreground}` : "none",
-        outlineOffset: 2,
+        outline: isFocusVisible ? `1px solid ${focusColor}` : "none",
+        outlineOffset: 1,
         ...paint,
         opacity: disabled ? 0.46 : pending ? 0.68 : 1,
         cursor: disabled ? "not-allowed" : pending ? "progress" : "pointer",

package/dist/control.d.ts

@@ -30,6 +30,7 @@ export interface ControlTheme {
     readonly foreground: string;
     readonly background: string;
     readonly tint: string;
+    readonly focusColor: string;
     readonly danger: string;
     readonly paints: {
         readonly palette: SolidColors;

package/dist/control.js

@@ -4,7 +4,7 @@ import { FieldError, Label, Text } from "react-aria-components";
 import { useAppearance, useThemedValue } from "./appearance-provider.js";
 import { resolveRadius } from "./radius.js";
 import { scale } from "./scale.js";
-import { solidColors } from "./color.js";
+import { colorOpacity, solidColors } from "./color.js";
 import { useResolveSolidColor } from "./color.js";
 import { useVisualTransition } from "./motion-style.js";
 export const controlFontSizes = Object.freeze({
@@ -23,6 +23,7 @@ export function useControlTheme({ size = "medium", color, radius = "medium" }) {
     const background = colors.background;
     const tint = useResolveSolidColor(color ?? "default:base");
     const neutral = useResolveSolidColor("default:base");
+    const focus = useResolveSolidColor("warning:base");
     const danger = useResolveSolidColor("danger:base");
     const paints = useMemo(() => ({
         palette: solidColors(tint, background, foreground),
@@ -35,6 +36,7 @@ export function useControlTheme({ size = "medium", color, radius = "medium" }) {
         foreground,
         background,
         tint,
+        focusColor: colorOpacity(focus, 0.2),
         danger,
         paints,
         radius: resolveRadius(radius, appearance),
@@ -74,8 +76,8 @@ export function controlStyle(theme, focused, invalid, hovered = false, focusVisi
         paddingInline: Math.max(8, theme.spacing),
         border: 0,
         borderRadius: theme.radius,
-        outline: focusVisible ? `2px solid ${theme.foreground}` : "none",
-        outlineOffset: 2,
+        outline: focusVisible ? `1px solid ${theme.focusColor}` : "none",
+        outlineOffset: 1,
         ...paint,
         caretColor: paint.color,
         font: "inherit",

package/dist/select.js

@@ -21,7 +21,7 @@ export const Select = forwardRef(function Select({ label, description, errorMess
                                         display: "flex", alignItems: "center", justifyContent: "space-between", gap: theme.gap,
                                         minHeight: theme.height, paddingInline: Math.max(8, theme.spacing), boxSizing: "border-box",
                                         borderRadius: theme.radius,
-                                        outline: item.isFocused && !item.isSelected ? `2px solid ${theme.foreground}` : "none", outlineOffset: -2,
+                                        outline: item.isFocused && !item.isSelected ? `1px solid ${theme.focusColor}` : "none", outlineOffset: 1,
                                         cursor: item.isDisabled ? "not-allowed" : "pointer",
                                         opacity: item.isDisabled ? 0.46 : 1,
                                         ...(item.isSelected ? item.isFocused ? theme.paints.palette.hover : theme.paints.palette.rest

package/dist/slider.js

@@ -29,7 +29,7 @@ export const Slider = forwardRef(function Slider({ label, description, name, dis
                         } }), _jsx(SliderThumb, { name: name, style: state => ({
                             width: diameter, height: diameter, borderRadius: "50%", boxSizing: "border-box",
                             ...(vertical ? { left: "50%" } : { top: "50%" }),
-                            outline: state.isFocusVisible ? `2px solid ${theme.foreground}` : "none", outlineOffset: 2,
+                            outline: state.isFocusVisible ? `1px solid ${theme.focusColor}` : "none", outlineOffset: 1,
                             cursor: state.isDisabled ? "not-allowed" : state.isDragging ? "grabbing" : "grab"
                         }), children: state => _jsx(motion.span, { "aria-hidden": "true", initial: false, animate: { scale: !animations || state.isDisabled ? 1 : state.isDragging ? 0.92 : state.isHovered ? 1.08 : 1 }, transition: transition, style: { ...theme.transition, position: "absolute", inset: 0, borderRadius: "inherit", pointerEvents: "none",
                                 background: (state.isDragging ? theme.paints.palette.pressed : state.isHovered ? theme.paints.palette.hover : theme.paints.palette.rest).color,

package/dist/toggle-indicator.js

@@ -29,8 +29,8 @@ export function ToggleIndicator({ kind, selected, indeterminate = false, focused
             height: diameter,
             borderRadius: radius,
             border: "none",
-            outline: focused ? `2px solid ${theme.foreground}` : "none",
-            outlineOffset: 2,
+            outline: focused ? `1px solid ${theme.focusColor}` : "none",
+            outlineOffset: 1,
         }, children: switching ? _jsx(motion.span, { initial: false, animate: { width: thumbWidth, x: (selected ? travel : -travel) * (direction === "rtl" ? -1 : 1) }, transition: transition, style: {
                 ...theme.transition,
                 height: diameter - 6, borderRadius: diameter,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phreshos/react-ui",
-  "version": "0.1.23",
+  "version": "0.1.24",
   "description": "React components for coherent PhreshOS Program interfaces.",
   "type": "module",
   "sideEffects": false,
@@ -56,7 +56,7 @@
   },
   "dependencies": {
     "@base-ui/react": "^1.7.0",
-    "@phreshos/core": "^0.1.49",
+    "@phreshos/core": "^0.1.51",
     "colorjs.io": "^0.7.1",
     "motion": "^13.2.0",
     "react-aria-components": "^1.20.0"