@firecms/ui 3.3.0 → 3.4.0-canary.f6a889a

package/src/components/InputLabel.tsx

@@ -10,7 +10,7 @@ export type InputLabelProps = {
 } & React.LabelHTMLAttributes<HTMLLabelElement>;
 
 const defaultClasses = {
-    root: "origin-left transition-transform block whitespace-nowrap overflow-hidden text-overflow-ellipsis max-w-full",
+    root: "origin-left transition-transform block whitespace-nowrap overflow-hidden text-ellipsis max-w-full",
     shrink: "transform translate-y-[2px] scale-75 translate-x-[12px]",
     expanded: "translate-x-[16px] top-0 transform translate-y-[16px] scale-100"
 };
@@ -30,7 +30,7 @@ export const InputLabel = React.forwardRef<HTMLLabelElement, InputLabelProps>(fu
 
     return (
         <label
-            className={cls("text-sm font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+            className={cls("text-sm font-medium peer-disabled:cursor-not-allowed",
                 defaultBorderMixin, computedClassName)}
             data-shrink={shrink}
             ref={ref}

package/src/components/Label.tsx

@@ -20,7 +20,7 @@ const Label = React.forwardRef<
     <LabelPrimitive.Root
         ref={ref}
         onClick={onClick}
-        className={cls("text-sm font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+        className={cls("text-sm font-medium peer-disabled:cursor-not-allowed",
             border && "border border-surface-300 dark:border-surface-700 rounded-md px-3 py-1.5",
             onClick && "hover:cursor-pointer hover:bg-surface-200 dark:hover:bg-surface-800",
             defaultBorderMixin, className)}

package/src/components/LoadingButton.tsx

@@ -19,7 +19,7 @@ export function LoadingButton<P extends React.ElementType = "button">({
         <Button
             disabled={loading || disabled}
             onClick={onClick}
-            component={props.component as any}
+            component={props.component as React.ElementType}
             {...props}
         >
             {loading && (

package/src/components/Menu.tsx

@@ -102,3 +102,5 @@ export const MenuItem = React.memo(({
         </DropdownMenu.Item>
     );
 });
+
+MenuItem.displayName = "MenuItem";

package/src/components/Popover.tsx

@@ -27,6 +27,8 @@ export interface PopoverProps {
     modal?: boolean;
     className?: string;
     portalContainer?: HTMLElement | null;
+    onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;
+    onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;
 }
 
 export function Popover({
@@ -45,7 +47,9 @@ export function Popover({
                             enabled = true,
                             modal = false,
                             portalContainer,
-                            className
+                            className,
+                            onMouseEnter,
+                            onMouseLeave
                         }: PopoverProps) {
 
     useInjectStyles("Popover", popoverStyles);
@@ -78,10 +82,12 @@ export function Popover({
                 arrowPadding={arrowPadding}
                 sticky={sticky}
                 hideWhenDetached={hideWhenDetached}
-                avoidCollisions={avoidCollisions}>
+                avoidCollisions={avoidCollisions}
+                onMouseEnter={onMouseEnter}
+                onMouseLeave={onMouseLeave}>
 
                 {children}
-                <PopoverPrimitive.Arrow className="fill-white dark:fill-surface-accent-950"/>
+                <PopoverPrimitive.Arrow className="fill-white dark:fill-surface-800"/>
             </PopoverPrimitive.Content>
         </PopoverPrimitive.Portal>
     </PopoverPrimitive.Root>;

package/src/components/RadioGroup.tsx

@@ -58,7 +58,7 @@ const RadioGroupItem = React.forwardRef<
         <RadioGroupPrimitive.Item
             ref={ref}
             className={cls(
-                "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+                "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
                 className
             )}
             {...props}

package/src/components/Select.tsx

@@ -36,7 +36,7 @@ export type SelectProps<T extends SelectValue = string> = {
     error?: boolean,
     position?: "item-aligned" | "popper",
     endAdornment?: React.ReactNode,
-    inputRef?: React.RefObject<HTMLButtonElement | null>,
+    inputRef?: React.Ref<HTMLButtonElement>,
     padding?: boolean,
     invisible?: boolean,
     children?: React.ReactNode;
@@ -136,7 +136,7 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>(({
             {...props}>
             {typeof label === "string" ? <SelectInputLabel error={error}>{label}</SelectInputLabel> : label}
             <div className={cls(
-                "select-none rounded-md text-sm",
+                "select-none rounded-lg text-sm",
                 invisible ? fieldBackgroundInvisibleMixin : fieldBackgroundMixin,
                 disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin,
                 "relative flex items-center",
@@ -155,6 +155,8 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>(({
                     id={id}
                     asChild={false}
                     type="button"
+                    aria-label={typeof label === "string" ? label : (typeof renderValue === "string" ? renderValue : "Select an option")}
+                    aria-invalid={error || undefined}
                     className={cls(
                         "h-full",
                         padding ? {
@@ -164,7 +166,7 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>(({
                         } : "",
                         "outline-hidden focus:outline-hidden",
                         "outline-none focus:outline-none",
-                        "select-none rounded-md text-sm",
+                        "select-none rounded-lg text-sm",
                         error ? "text-red-500 dark:text-red-600" : "focus:text-text-primary dark:focus:text-text-primary-dark",
                         error ? "border border-red-500 dark:border-red-600" : "",
                         disabled ? "text-surface-accent-600 dark:text-surface-accent-400" : "text-surface-accent-800 dark:text-white",
@@ -232,7 +234,7 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>(({
             {/* Pass the calculated finalContainer */}
             <SelectPrimitive.Portal container={finalContainer}>
                 <SelectPrimitive.Content position={position}
-                    className={cls(focusedDisabled, "z-50 relative overflow-hidden border bg-white dark:bg-surface-900 p-2 rounded-lg", defaultBorderMixin)}>
+                    className={cls(focusedDisabled, "z-50 relative overflow-hidden border bg-white dark:bg-surface-800 p-2 rounded-lg shadow-lg", defaultBorderMixin)}>
                     <SelectPrimitive.Viewport className={cls("p-1", viewportClassName)}
                         style={{ maxHeight: "var(--radix-select-content-available-height)" }}>
                         {children}
@@ -270,8 +272,8 @@ export const SelectItem = React.memo(function SelectItem<T extends SelectValue =
             "w-full",
             "relative flex items-center p-2 rounded-md text-sm text-surface-accent-700 dark:text-surface-accent-300",
             "focus:z-10",
-            "data-[state=checked]:bg-surface-accent-100 data-[state=checked]:dark:bg-surface-accent-800 focus:bg-surface-accent-100 dark:focus:bg-surface-950",
-            "data-[state=checked]:focus:bg-surface-accent-200 data-[state=checked]:dark:focus:bg-surface-950",
+            "data-[state=checked]:bg-surface-accent-100 data-[state=checked]:dark:bg-surface-accent-800 focus:bg-surface-accent-100 dark:focus:bg-surface-900",
+            "data-[state=checked]:focus:bg-surface-accent-200 data-[state=checked]:dark:focus:bg-surface-900",
             disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer",
             "[&>*]:w-full",
             "overflow-visible",

package/src/components/Separator.tsx

@@ -15,12 +15,12 @@ export function Separator({
             <SeparatorPrimitive.Root
                 decorative={decorative}
                 orientation="horizontal"
-                className={cls("dark:bg-opacity-80 dark:bg-surface-800 dark:bg-surface-800/80 bg-surface-100 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px my-4", className)}/>
+                className={cls("dark:bg-surface-700 bg-surface-200 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px my-4", className)}/>
         );
     else
         return (
             <SeparatorPrimitive.Root
-                className={cls("dark:bg-opacity-80 dark:bg-surface-800 dark:bg-surface-800/80 bg-surface-100 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px mx-4", className)}
+                className={cls("dark:bg-surface-700 bg-surface-200 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px mx-4", className)}
                 decorative={decorative}
                 orientation="vertical"
             />

package/src/components/Skeleton.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { cls } from "../util";
+import { useInjectStyles } from "../hooks";
 
 export type SkeletonProps = {
     width?: number;
@@ -7,24 +8,40 @@ export type SkeletonProps = {
     className?: string;
 }
 
+const styles = `
+@keyframes shimmer {
+  0% {
+    transform: translateX(-150%);
+  }
+  100% {
+    transform: translateX(150%);
+  }
+}
+`;
+
 export function Skeleton({
                              width,
                              height,
                              className
                          }: SkeletonProps) {
+
+    useInjectStyles("Skeleton", styles);
+
     return <span
         style={{
-            width: width !== undefined ? `${width}px` : undefined,
-            height: height !== undefined ? `${height}px` : undefined
+            width: width ? `${width}px` : "100%",
+            height: height ? `${height}px` : "12px"
         }}
         className={
         cls(
-            "block",
-            "bg-surface-accent-200 dark:bg-surface-accent-800 rounded-md",
-            "animate-pulse",
+            "block relative overflow-hidden",
+            "bg-surface-accent-50 dark:bg-surface-accent-800 rounded-md",
             "max-w-full max-h-full",
-            width === undefined ? "w-full" : "",
-            height === undefined ? "h-3" : "",
             className)
-    }/>;
+    }>
+        <span
+            className="absolute inset-0 bg-gradient-to-r from-transparent via-white/50 dark:via-white/8 to-transparent"
+            style={{ animation: "shimmer 1.8s ease-in-out infinite" }}
+        />
+    </span>;
 }

package/src/components/TextField.tsx

@@ -1,12 +1,12 @@
 "use client";
-import React, { ForwardedRef, forwardRef, useEffect, useRef } from "react";
+import React, { ForwardedRef, forwardRef, useEffect, useId, useRef } from "react";
 
 import {
     fieldBackgroundDisabledMixin,
     fieldBackgroundHoverMixin,
     fieldBackgroundInvisibleMixin,
     fieldBackgroundMixin,
-    focusedInvisibleMixin,
+    focusedInvisibleMixin
 } from "../styles";
 import { InputLabel } from "./InputLabel";
 import { cls } from "../util";
@@ -53,7 +53,7 @@ export type TextFieldProps<T extends string | number> = {
      * @default 1
      */
     minRows?: number | string;
-} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "value">;
 
 export const TextField = forwardRef<HTMLDivElement, TextFieldProps<string | number>>(
     <T extends string | number>(
@@ -82,14 +82,18 @@ export const TextField = forwardRef<HTMLDivElement, TextFieldProps<string | numb
         ref: ForwardedRef<HTMLDivElement>
     ) => {
 
-        const inputRef = inputRefProp ?? useRef(null);
+        const fallbackRef = useRef(null);
+        const inputRef = inputRefProp ?? fallbackRef;
+        const autoId = useId();
+        const inputId = inputProps.id ?? autoId;
+        const labelId = `${inputId}-label`;
 
         const [focused, setFocused] = React.useState(false);
         const hasValue = value !== undefined && value !== null && value !== "";
 
         useEffect(() => {
-            // @ts-ignore
-            if (inputRef.current && document.activeElement === inputRef.current) {
+            const element = inputRef && "current" in inputRef ? inputRef.current : null;
+            if (element && document.activeElement === element) {
                 setFocused(true);
             }
         }, []);
@@ -111,8 +115,12 @@ export const TextField = forwardRef<HTMLDivElement, TextFieldProps<string | numb
 
         const input = multiline ? (
             <textarea
-                {...(inputProps as any)}
+                {...(inputProps as React.TextareaHTMLAttributes<HTMLTextAreaElement>)}
                 ref={inputRef}
+                id={inputId}
+                aria-labelledby={label ? labelId : undefined}
+                aria-invalid={error || undefined}
+                aria-disabled={disabled || undefined}
                 placeholder={focused || hasValue || !label ? placeholder : undefined}
                 autoFocus={autoFocus}
                 rows={typeof minRows === "string" ? parseInt(minRows) : (minRows ?? 3)}
@@ -123,7 +131,7 @@ export const TextField = forwardRef<HTMLDivElement, TextFieldProps<string | numb
                 style={inputStyle}
                 className={cls(
                     invisible ? focusedInvisibleMixin : "",
-                    "rounded-md resize-none w-full outline-none text-base bg-transparent min-h-[64px] px-3",
+                    "rounded-lg resize-none w-full outline-none text-base bg-transparent min-h-[64px] px-3",
                     label ? "pt-8 pb-2" : "py-2",
                     disabled && "outline-none opacity-50 text-surface-accent-600 dark:text-surface-accent-500",
                     inputClassName
@@ -133,11 +141,15 @@ export const TextField = forwardRef<HTMLDivElement, TextFieldProps<string | numb
             <input
                 {...inputProps}
                 ref={inputRef}
+                id={inputId}
+                aria-labelledby={label ? labelId : undefined}
+                aria-invalid={error || undefined}
+                aria-disabled={disabled || undefined}
                 disabled={disabled}
                 style={inputStyle}
                 className={cls(
                     "w-full outline-none bg-transparent leading-normal px-3",
-                    "rounded-md",
+                    "rounded-lg",
                     "focused:text-text-primary focused:dark:text-text-primary-dark",
                     invisible ? focusedInvisibleMixin : "",
                     disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin,
@@ -145,7 +157,7 @@ export const TextField = forwardRef<HTMLDivElement, TextFieldProps<string | numb
                         "min-h-[28px]": size === "smallest",
                         "min-h-[32px]": size === "small",
                         "min-h-[44px]": size === "medium",
-                        "min-h-[64px]": size === "large",
+                        "min-h-[64px]": size === "large"
                     },
                     label
                         ? size === "large"
@@ -175,7 +187,7 @@ export const TextField = forwardRef<HTMLDivElement, TextFieldProps<string | numb
             <div
                 ref={ref}
                 className={cls(
-                    "rounded-md relative max-w-full",
+                    "rounded-lg relative max-w-full",
                     invisible ? fieldBackgroundInvisibleMixin : fieldBackgroundMixin,
                     disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin,
                     error ? "border border-red-500 dark:border-red-600" : "",
@@ -183,7 +195,7 @@ export const TextField = forwardRef<HTMLDivElement, TextFieldProps<string | numb
                         "min-h-[28px]": size === "smallest",
                         "min-h-[32px]": size === "small",
                         "min-h-[44px]": size === "medium",
-                        "min-h-[64px]": size === "large",
+                        "min-h-[64px]": size === "large"
                     },
                     className
                 )}
@@ -191,6 +203,8 @@ export const TextField = forwardRef<HTMLDivElement, TextFieldProps<string | numb
             >
                 {label && (
                     <InputLabel
+                        id={labelId}
+                        htmlFor={inputId}
                         className={cls(
                             "pointer-events-none absolute",
                             size === "large" ? "top-1" : "top-[-1px]",
@@ -216,7 +230,7 @@ export const TextField = forwardRef<HTMLDivElement, TextFieldProps<string | numb
                             {
                                 "mr-4": size === "large",
                                 "mr-3": size === "medium",
-                                "mr-2": size === "small" || size === "smallest",
+                                "mr-2": size === "small" || size === "smallest"
                             }
                         )}
                     >

package/src/components/ToggleButtonGroup.tsx

@@ -38,11 +38,13 @@ export function ToggleButtonGroup<T extends string = string>({
     className
 }: ToggleButtonGroupProps<T>) {
     return (
-        <div className={cls("inline-flex flex-row bg-surface-100 dark:bg-surface-800 rounded-lg p-1 gap-1", className)}>
+        <div role="group" aria-label="Toggle options" className={cls("inline-flex flex-row bg-surface-100 dark:bg-surface-900 rounded-lg p-1 gap-1", className)}>
             {options.map((option) => (
                 <button
                     key={option.value}
                     type="button"
+                    aria-pressed={value === option.value}
+                    aria-disabled={option.disabled || undefined}
                     onClick={(e) => {
                         e.stopPropagation();
                         if (!option.disabled) {
@@ -53,7 +55,7 @@ export function ToggleButtonGroup<T extends string = string>({
                     className={cls(
                         "flex flex-row items-center justify-center gap-2 py-3 px-4 rounded-md transition-colors",
                         value === option.value
-                            ? "bg-white dark:bg-surface-950 text-primary dark:text-primary-300"
+                            ? "bg-white dark:bg-surface-900 text-primary dark:text-primary-300 shadow-sm"
                             : "text-surface-500 dark:text-surface-400 hover:bg-surface-100 dark:hover:bg-surface-700",
                         option.disabled && "opacity-50 cursor-not-allowed"
                     )}

package/src/components/index.tsx

@@ -11,6 +11,7 @@ export * from "./Collapse";
 export * from "./CircularProgress";
 export * from "./Checkbox";
 export * from "./Chip";
+export * from "./FilterChip";
 export * from "./ColorPicker";
 export * from "./DateTimeField";
 export * from "./Dialog";

package/src/hooks/index.ts

@@ -1,5 +1,6 @@
 export * from "./useInjectStyles";
 export * from "./useOutsideAlerter";
 export * from "./useDebounceValue";
+export * from "./useDebounceCallback";
 export * from "./useIconStyles";
 export * from "./PortalContainerContext";

package/src/hooks/useDebounceCallback.tsx

@@ -0,0 +1,47 @@
+import { useCallback, useEffect, useRef } from "react";
+
+/**
+ * Returns a debounced version of the provided callback. The returned function
+ * keeps the same signature as the input callback; each invocation resets the
+ * timer, so the wrapped callback only runs once calls stop for `delay` ms.
+ *
+ * Unlike {@link useDebounceValue}, which debounces a *value*, this debounces a
+ * *function call* — useful for search inputs, autosave, resize handlers, etc.
+ *
+ * @param callback the function to debounce. May be undefined.
+ * @param delay debounce delay in milliseconds. Defaults to 200ms.
+ * @group Hooks
+ */
+export function useDebounceCallback<T extends (...args: any[]) => unknown>(
+    callback?: T,
+    delay?: number
+): T {
+    const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+    // Keep the latest callback without recreating the debounced function.
+    const callbackRef = useRef(callback);
+    useEffect(() => {
+        callbackRef.current = callback;
+    }, [callback]);
+
+    // Clear any pending timer on unmount.
+    useEffect(() => {
+        return () => {
+            if (timeoutRef.current !== null) {
+                clearTimeout(timeoutRef.current);
+            }
+        };
+    }, []);
+
+    const debouncedCallback = useCallback((...args: Parameters<T>) => {
+        if (timeoutRef.current !== null) {
+            clearTimeout(timeoutRef.current);
+        }
+
+        timeoutRef.current = setTimeout(() => {
+            callbackRef.current?.(...args);
+        }, delay ?? 200);
+    }, [delay]);
+
+    return debouncedCallback as T;
+}

package/src/index.css

@@ -19,26 +19,26 @@
     --color-field-disabled: rgb(224 224 226);
     --color-field-disabled-dark: rgb(35 35 37);
 
-    /* Text Colors */
-    --color-text-primary: rgba(0, 0, 0, 0.87);
-    --color-text-secondary: rgba(0, 0, 0, 0.52);
-    --color-text-disabled: rgba(0, 0, 0, 0.38);
+    /* Text Colors — using opaque values so icon strokes render solidly */
+    --color-text-primary: #212121;
+    --color-text-secondary: #757575;
+    --color-text-disabled: #9e9e9e;
     --color-text-primary-dark: #ffffff;
-    --color-text-secondary-dark: rgba(255, 255, 255, 0.6);
-    --color-text-disabled-dark: rgba(255, 255, 255, 0.48);
+    --color-text-secondary-dark: #a0a0a9;
+    --color-text-disabled-dark: #757580;
 
     /* Surface Colors */
-    --color-surface-50: #f8f8fc;
-    --color-surface-100: #e7e7eb;
-    --color-surface-200: #cfcfd6;
-    --color-surface-300: #b7b7bf;
-    --color-surface-400: #a0a0a9;
-    --color-surface-500: #87878f;
-    --color-surface-600: #6b6b74;
-    --color-surface-700: #454552;
-    --color-surface-800: #292934;
-    --color-surface-900: #18181c;
-    --color-surface-950: #101013;
+    --color-surface-50: #fafafa;
+    --color-surface-100: #f5f5f5;
+    --color-surface-200: #e5e5e5;
+    --color-surface-300: #d4d4d4;
+    --color-surface-400: #a3a3a3;
+    --color-surface-500: #737373;
+    --color-surface-600: #404040;
+    --color-surface-700: #2e2e33;
+    --color-surface-800: #1f1f23;
+    --color-surface-900: #131316;
+    --color-surface-950: #0d0d0f;
 
     /* Surface Accent Colors */
     --color-surface-accent-50: #f8fafc;
@@ -50,8 +50,18 @@
     --color-surface-accent-600: #475569;
     --color-surface-accent-700: #334155;
     --color-surface-accent-800: #1e293b;
-    --color-surface-accent-900: #0f172a;
-    --color-surface-accent-950: #020617;
+    --color-surface-accent-900: #172033;
+    --color-surface-accent-950: #0f172a;
+}
+
+/* Native UI (scrollbars, form controls) must follow the active theme,
+   otherwise Chrome renders light scrollbars in dark mode */
+html {
+    color-scheme: light;
+}
+
+html.dark {
+    color-scheme: dark;
 }
 
 /* Chrome, Safari and Opera */
@@ -65,50 +75,51 @@
 }
 
 .typography-h1 {
-    @apply text-6xl font-headers font-light tracking-tight;
+    @apply text-4xl font-headers font-semibold tracking-tight;
 }
 
 .typography-h2 {
-    @apply text-5xl font-headers font-light tracking-tight;
+    @apply text-3xl font-headers font-semibold tracking-tight;
 }
 
 .typography-h3 {
-    @apply text-4xl font-headers font-normal tracking-tight;
+    @apply text-2xl font-headers font-semibold tracking-tight;
 }
 
 .typography-h4 {
-    @apply text-3xl font-headers font-normal tracking-tight;
+    @apply text-xl font-headers font-semibold tracking-[-0.01em];
 }
 
 .typography-h5 {
-    @apply text-2xl font-headers font-normal;
+    @apply text-lg font-headers font-semibold tracking-[-0.01em];
 }
 
 .typography-h6 {
-    @apply text-xl font-headers font-medium;
+    @apply text-base font-headers font-semibold tracking-[-0.01em];
 }
 
 .typography-subtitle1 {
-    @apply text-lg font-headers font-medium;
+    @apply text-sm font-headers font-semibold tracking-[-0.01em];
 }
 
 .typography-subtitle2 {
-    @apply text-base font-headers font-medium;
+    @apply text-sm font-headers font-medium;
 }
 
 .typography-body1 {
+    @apply text-sm;
 }
 
 .typography-body2 {
-    @apply text-sm;
+    @apply text-xs;
 }
 
 .typography-caption {
-    @apply text-xs;
+    @apply text-[11px] leading-[1.4];
 }
 
 .typography-label {
-    @apply text-sm font-medium;
+    @apply text-xs font-medium tracking-wide;
 }
 
 .typography-inherit {
@@ -116,10 +127,10 @@
 }
 
 .typography-button {
-    @apply text-sm font-semibold uppercase;
+    @apply text-sm font-semibold tracking-wide;
 }
 
 :focus-visible {
-    @apply outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-transparent
+    @apply outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-0 focus-visible:ring-offset-transparent
 }
 

package/src/styles.ts

@@ -1,7 +1,7 @@
 export const focusedDisabled = "focus-visible:ring-0 focus-visible:ring-offset-0";
 export const focusedInvisibleMixin = "focus:bg-opacity-70 focus:bg-surface-accent-100 focus:dark:bg-surface-800 focus:dark:bg-opacity-60 focus:bg-surface-accent-100/70 dark:focus:bg-surface-800/60";
 export const focusedClasses = "z-30 outline-hidden outline-none ring-2 ring-primary ring-opacity-75 ring-primary/75 ring-offset-2 ring-offset-transparent ";
-export const fieldBackgroundMixin = "bg-opacity-50 bg-surface-accent-200 bg-surface-accent-200/50 dark:bg-surface-800 dark:bg-opacity-60 dark:bg-surface-800/60";
+export const fieldBackgroundMixin = "bg-opacity-50 bg-surface-accent-200 bg-surface-accent-200/50 dark:bg-surface-800 dark:bg-opacity-90 dark:bg-surface-800/90";
 export const fieldBackgroundInvisibleMixin = "bg-opacity-0 bg-surface-accent-100 dark:bg-surface-800 dark:bg-opacity-0 bg-surface-accent-200/0 dark:bg-surface-800/0";
 export const fieldBackgroundDisabledMixin = "dark:bg-surface-800 bg-opacity-50 dark:bg-opacity-90 bg-surface-accent-200/50 dark:bg-surface-800/90";
 export const fieldBackgroundHoverMixin = "hover:bg-opacity-70 dark:hover:bg-surface-700 dark:hover:bg-opacity-40 hover:bg-surface-accent-200/70 hover:dark:bg-surface-700/40";