@fragments-sdk/ui 0.16.1 → 0.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fragments-sdk/ui",
-  "version": "0.16.1",
+  "version": "0.17.0",
   "license": "MIT",
   "description": "Customizable UI components built on Base UI headless primitives",
   "author": "Conan McNicholl",

package/src/components/Alert/Alert.module.scss

@@ -14,26 +14,26 @@
 
 // Severity variants
 .info {
-  background-color: var(--fui-color-info-bg, $fui-color-info-bg);
-  border: 1px solid var(--fui-color-info, $fui-color-info);
+  background: color-mix(in srgb, var(--fui-color-info, #{$fui-color-info}) 15%, var(--fui-bg-elevated, #{$fui-bg-elevated}));
+  border: 1px solid color-mix(in srgb, var(--fui-color-info, #{$fui-color-info}) 40%, transparent);
   color: var(--fui-color-info-text, $fui-color-info-text);
 }
 
 .success {
-  background-color: var(--fui-color-success-bg, $fui-color-success-bg);
-  border: 1px solid var(--fui-color-success, $fui-color-success);
+  background: color-mix(in srgb, var(--fui-color-success, #{$fui-color-success}) 15%, var(--fui-bg-elevated, #{$fui-bg-elevated}));
+  border: 1px solid color-mix(in srgb, var(--fui-color-success, #{$fui-color-success}) 40%, transparent);
   color: var(--fui-color-success-text, $fui-color-success-text);
 }
 
 .warning {
-  background-color: var(--fui-color-warning-bg, $fui-color-warning-bg);
-  border: 1px solid var(--fui-color-warning, $fui-color-warning);
+  background: color-mix(in srgb, var(--fui-color-warning, #{$fui-color-warning}) 15%, var(--fui-bg-elevated, #{$fui-bg-elevated}));
+  border: 1px solid color-mix(in srgb, var(--fui-color-warning, #{$fui-color-warning}) 40%, transparent);
   color: var(--fui-color-warning-text, $fui-color-warning-text);
 }
 
 .error {
-  background-color: var(--fui-color-danger-bg, $fui-color-danger-bg);
-  border: 1px solid var(--fui-color-danger, $fui-color-danger);
+  background: color-mix(in srgb, var(--fui-color-danger, #{$fui-color-danger}) 15%, var(--fui-bg-elevated, #{$fui-bg-elevated}));
+  border: 1px solid color-mix(in srgb, var(--fui-color-danger, #{$fui-color-danger}) 40%, transparent);
   color: var(--fui-color-danger-text, $fui-color-danger-text);
 }
 

package/src/components/Alert/index.tsx

@@ -117,6 +117,7 @@ function AlertRoot({
   const classes = [styles.alert, styles[severity], className]
     .filter(Boolean)
     .join(' ');
+  const role = severity === 'warning' || severity === 'error' ? 'alert' : 'status';
 
   const contextValue: AlertContextValue = {
     severity,
@@ -129,7 +130,7 @@ function AlertRoot({
     <AlertContext.Provider value={contextValue}>
       <div
         {...htmlProps}
-        role="alert"
+        role={role}
         aria-labelledby={titleId}
         aria-describedby={descId}
         className={classes}

package/src/components/Avatar/index.tsx

@@ -243,8 +243,12 @@ function AvatarGroup({
         return child;
       })}
       {overflowCount > 0 && (
-        <div className={[styles.avatar, styles[size], styles.overflow].join(' ')}>
-          <span className={styles.initials}>+{overflowCount}</span>
+        <div
+          className={[styles.avatar, styles[size], styles.overflow].join(' ')}
+          role="img"
+          aria-label={`${overflowCount} more ${overflowCount === 1 ? 'person' : 'people'}`}
+        >
+          <span className={styles.initials} aria-hidden="true">+{overflowCount}</span>
         </div>
       )}
     </div>

package/src/components/Badge/Badge.module.scss

@@ -36,22 +36,26 @@
 }
 
 .success {
-  background-color: var(--fui-color-success-bg, $fui-color-success-bg);
+  background: color-mix(in srgb, var(--fui-color-success, #{$fui-color-success}) 15%, var(--fui-bg-elevated, #{$fui-bg-elevated}));
+  border: 1px solid color-mix(in srgb, var(--fui-color-success, #{$fui-color-success}) 40%, transparent);
   color: var(--fui-color-success-text, $fui-color-success-text);
 }
 
 .warning {
-  background-color: var(--fui-color-warning-bg, $fui-color-warning-bg);
+  background: color-mix(in srgb, var(--fui-color-warning, #{$fui-color-warning}) 15%, var(--fui-bg-elevated, #{$fui-bg-elevated}));
+  border: 1px solid color-mix(in srgb, var(--fui-color-warning, #{$fui-color-warning}) 40%, transparent);
   color: var(--fui-color-warning-text, $fui-color-warning-text);
 }
 
 .error {
-  background-color: var(--fui-color-danger-bg, $fui-color-danger-bg);
+  background: color-mix(in srgb, var(--fui-color-danger, #{$fui-color-danger}) 15%, var(--fui-bg-elevated, #{$fui-bg-elevated}));
+  border: 1px solid color-mix(in srgb, var(--fui-color-danger, #{$fui-color-danger}) 40%, transparent);
   color: var(--fui-color-danger-text, $fui-color-danger-text);
 }
 
 .info {
-  background-color: var(--fui-color-info-bg, $fui-color-info-bg);
+  background: color-mix(in srgb, var(--fui-color-info, #{$fui-color-info}) 15%, var(--fui-bg-elevated, #{$fui-bg-elevated}));
+  border: 1px solid color-mix(in srgb, var(--fui-color-info, #{$fui-color-info}) 40%, transparent);
   color: var(--fui-color-info-text, $fui-color-info-text);
 }
 
@@ -78,21 +82,23 @@
   align-items: center;
 }
 
+// Asymmetric padding when removable — tighter on right side near the × button
+.badge:has(.remove) {
+  padding: var(--fui-space-0-5, $fui-space-0-5) var(--fui-space-1, $fui-space-1) var(--fui-space-0-5, $fui-space-0-5) var(--fui-space-2, $fui-space-2);
+}
+
 .remove {
   @include button-reset;
   @include interactive-base;
   @include touch-target;
 
-  padding: 0 var(--fui-space-0-5, $fui-space-0-5);
-  font-size: var(--fui-font-size-sm, $fui-font-size-sm);
+  margin-left: calc(-1 * var(--fui-space-0-5, $fui-space-0-5));
+  padding: 0;
+  font-size: inherit;
   color: inherit;
   opacity: 0.6;
   line-height: 1;
-  border-radius: var(--fui-space-0-5, $fui-space-0-5);
-
-  .sm & {
-    font-size: var(--fui-font-size-xs, $fui-font-size-xs);
-  }
+  border-radius: var(--fui-radius-full, $fui-radius-full);
 
   &:hover {
     opacity: 1;

package/src/components/Button/Button.module.scss

@@ -86,17 +86,18 @@
 }
 
 .danger {
-  background-color: var(--fui-color-danger, $fui-color-danger);
-  color: var(--fui-text-inverse, $fui-text-inverse);
-  border: 1px solid transparent;
+  background-color: var(--fui-color-danger-bg, $fui-color-danger-bg);
+  color: var(--fui-color-danger-text, $fui-color-danger-text);
+  border: 1px solid color-mix(in srgb, var(--fui-color-danger, #{$fui-color-danger}) 40%, transparent);
 
   &:hover:not(:disabled) {
-    background-color: var(--fui-color-danger-hover, $fui-color-danger-hover);
+    background-color: color-mix(in srgb, var(--fui-color-danger, #{$fui-color-danger}) 22%, transparent);
+    border-color: color-mix(in srgb, var(--fui-color-danger, #{$fui-color-danger}) 55%, transparent);
   }
 
   &:active:not(:disabled),
   &[data-pressed] {
-    background-color: var(--fui-color-danger-hover, $fui-color-danger-hover);
+    background-color: color-mix(in srgb, var(--fui-color-danger, #{$fui-color-danger}) 28%, transparent);
   }
 }
 

package/src/components/Button/index.tsx

@@ -4,6 +4,18 @@ import * as React from 'react';
 import { Button as BaseButton } from '@base-ui/react/button';
 import styles from './Button.module.scss';
 
+function composeEventHandlers<T extends (...args: any[]) => void>(
+  childHandler: T | undefined,
+  parentHandler: T | undefined
+) {
+  if (!childHandler) return parentHandler;
+  if (!parentHandler) return childHandler;
+  return ((...args: Parameters<T>) => {
+    childHandler(...args);
+    parentHandler(...args);
+  }) as T;
+}
+
 /**
  * Button props.
  * @see https://usefragments.com/components/button
@@ -82,12 +94,56 @@ const ButtonRoot = React.forwardRef<
 
   // asChild: merge button styling onto child element (e.g. Next.js Link)
   if (asChild && React.isValidElement(children)) {
-    const { as: _as, ...childProps } = rest as ButtonProps & { as?: 'a' | 'button' };
-    return React.cloneElement(children as React.ReactElement<Record<string, unknown>>, {
+    const {
+      as: _as,
+      disabled,
+      style,
+      onClick,
+      onKeyDown,
+      ...childProps
+    } = rest as React.ButtonHTMLAttributes<HTMLButtonElement>
+      & React.AnchorHTMLAttributes<HTMLAnchorElement>
+      & { as?: 'a' | 'button'; disabled?: boolean };
+    const childElement = children as React.ReactElement<Record<string, unknown>>;
+    const childElementProps = childElement.props as Record<string, unknown>;
+    const isIntrinsicButton = typeof childElement.type === 'string' && childElement.type === 'button';
+    const isDisabled = Boolean(disabled);
+
+    const mergedProps: Record<string, unknown> = {
       ...childProps,
-      className: [classNames, (children.props as Record<string, unknown>).className].filter(Boolean).join(' '),
+      className: [classNames, childElementProps.className].filter(Boolean).join(' '),
+      style: { ...(style as React.CSSProperties | undefined), ...(childElementProps.style as React.CSSProperties | undefined) },
       ref,
-    });
+    };
+
+    if (isIntrinsicButton) {
+      mergedProps.disabled = isDisabled;
+    } else if (isDisabled) {
+      mergedProps['aria-disabled'] = true;
+      mergedProps['data-disabled'] = '';
+      mergedProps.tabIndex = -1;
+      mergedProps.onClick = (event: React.MouseEvent<HTMLElement>) => {
+        event.preventDefault();
+        event.stopPropagation();
+      };
+      mergedProps.onKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {
+        if (event.key === 'Enter' || event.key === ' ') {
+          event.preventDefault();
+          event.stopPropagation();
+        }
+      };
+    } else {
+      mergedProps.onClick = composeEventHandlers(
+        childElementProps.onClick as ((event: React.MouseEvent<HTMLElement>) => void) | undefined,
+        onClick as ((event: React.MouseEvent<HTMLElement>) => void) | undefined
+      );
+      mergedProps.onKeyDown = composeEventHandlers(
+        childElementProps.onKeyDown as ((event: React.KeyboardEvent<HTMLElement>) => void) | undefined,
+        onKeyDown as ((event: React.KeyboardEvent<HTMLElement>) => void) | undefined
+      );
+    }
+
+    return React.cloneElement(childElement, mergedProps);
   }
 
   // Render as anchor

package/src/components/Card/index.tsx

@@ -68,6 +68,17 @@ const paddingMap = {
   lg: styles.paddingLg,
 };
 
+function composeEventHandlers<E extends { defaultPrevented: boolean }>(
+  userHandler: ((event: E) => void) | undefined,
+  internalHandler: (event: E) => void
+) {
+  return (event: E) => {
+    userHandler?.(event);
+    if (event.defaultPrevented) return;
+    internalHandler(event);
+  };
+}
+
 // ============================================
 // Components
 // ============================================
@@ -83,8 +94,17 @@ function CardRoot({
 }: CardProps) {
   // Resolve alias: "outline" → "outlined"
   const variant = variantProp === 'outline' ? 'outlined' : variantProp;
-
-  const isInteractive = typeof htmlProps.onClick === 'function';
+  const {
+    onKeyDown,
+    onKeyUp,
+    role,
+    tabIndex,
+    ...elementProps
+  } = htmlProps;
+
+  const isInteractive = typeof elementProps.onClick === 'function';
+  const resolvedRole = isInteractive ? role ?? 'button' : role;
+  const resolvedTabIndex = isInteractive ? tabIndex ?? 0 : tabIndex;
 
   const classes = [
     styles.card,
@@ -105,7 +125,32 @@ function CardRoot({
   return (
     <CardContext.Provider value={contextValue}>
       <Component
-        {...htmlProps}
+        {...elementProps}
+        role={resolvedRole}
+        tabIndex={resolvedTabIndex}
+        onKeyDown={
+          isInteractive && resolvedRole === 'button'
+            ? composeEventHandlers(onKeyDown, (event: React.KeyboardEvent<HTMLElement>) => {
+                if (event.key === 'Enter') {
+                  event.preventDefault();
+                  event.currentTarget.click();
+                }
+                if (event.key === ' ') {
+                  event.preventDefault();
+                }
+              })
+            : onKeyDown
+        }
+        onKeyUp={
+          isInteractive && resolvedRole === 'button'
+            ? composeEventHandlers(onKeyUp, (event: React.KeyboardEvent<HTMLElement>) => {
+                if (event.key === ' ') {
+                  event.preventDefault();
+                  event.currentTarget.click();
+                }
+              })
+            : onKeyUp
+        }
         className={classes}
         style={style}
       >

package/src/components/Checkbox/Checkbox.module.scss

@@ -29,25 +29,26 @@
   width: 1rem;
   height: 1rem;
   margin-top: 0;
-  background-color: var(--fui-bg-elevated, $fui-bg-elevated);
-  border: 1px solid var(--fui-border-strong, $fui-border-strong);
+  background-color: var(--fui-field-bg, $fui-bg-elevated);
+  border: 1px solid var(--fui-field-border, $fui-border-strong);
   border-radius: var(--fui-radius-sm, $fui-radius-sm);
   cursor: inherit;
 
   &:hover:not([data-disabled]) {
-    border-color: var(--fui-text-tertiary, $fui-text-tertiary);
+    border-color: var(--fui-field-border-hover, $fui-text-tertiary);
   }
 
   &[data-checked],
   &[data-indeterminate] {
-    background-color: var(--fui-color-accent, $fui-color-accent);
-    border-color: var(--fui-color-accent, $fui-color-accent);
+    background-color: var(--fui-field-selection-bg, $fui-bg-hover);
+    border-color: var(--fui-field-selection-border, $fui-color-accent);
+    box-shadow: inset 0 0 0 1px var(--fui-field-selection-border, $fui-color-accent);
   }
 
   &[data-checked]:hover:not([data-disabled]),
   &[data-indeterminate]:hover:not([data-disabled]) {
-    background-color: var(--fui-color-accent-hover, $fui-color-accent-hover);
-    border-color: var(--fui-color-accent-hover, $fui-color-accent-hover);
+    background-color: var(--fui-field-selection-bg-hover, $fui-bg-hover);
+    border-color: var(--fui-field-selection-border, $fui-color-accent);
   }
 
   &[data-invalid] {
@@ -56,8 +57,9 @@
 
   &[data-invalid][data-checked],
   &[data-invalid][data-indeterminate] {
-    background-color: var(--fui-color-danger, $fui-color-danger);
+    background-color: var(--fui-color-danger-bg, $fui-color-danger-bg);
     border-color: var(--fui-color-danger, $fui-color-danger);
+    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fui-color-danger, $fui-color-danger) 35%, transparent);
   }
 }
 
@@ -82,7 +84,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--fui-text-inverse, $fui-text-inverse);
+  color: var(--fui-color-accent, $fui-color-accent);
 
   svg {
     width: 0.75rem;
@@ -101,6 +103,11 @@
     opacity: 1;
     transform: scale(1);
   }
+
+  [data-invalid][data-checked] > &,
+  [data-invalid][data-indeterminate] > & {
+    color: var(--fui-color-danger, $fui-color-danger);
+  }
 }
 
 // Size variant indicators

package/src/components/ColorPicker/ColorPicker.module.scss

@@ -58,20 +58,12 @@
   @include button-reset;
   @include interactive-base;
   @include min-target-size;
+  @include field-shell;
+
   width: var(--fui-input-height, $fui-input-height);
   height: var(--fui-input-height, $fui-input-height);
-  border: 1px solid var(--fui-border, $fui-border);
-  border-radius: var(--fui-radius-sm, $fui-radius-sm);
   flex-shrink: 0;
 
-  &:hover:not(:disabled) {
-    border-color: var(--fui-border-strong, $fui-border-strong);
-  }
-
-  &:focus-visible {
-    @include focus-ring;
-  }
-
   &:disabled {
     opacity: 0.5;
     cursor: not-allowed;
@@ -96,10 +88,10 @@
 }
 
 .popup {
-  background-color: var(--fui-bg-elevated, $fui-bg-elevated);
-  border: 1px solid var(--fui-border, $fui-border);
+  @include surface-elevated;
+
+  border-color: var(--fui-form-group-border, $fui-border);
   border-radius: var(--fui-radius-lg, $fui-radius-lg);
-  box-shadow: var(--fui-shadow-md, $fui-shadow-md);
   padding: var(--fui-space-2, $fui-space-2);
 
   // react-colorful styling overrides

package/src/components/Combobox/Combobox.module.scss

@@ -8,6 +8,10 @@
 // Size variants for input wrapper
 .inputWrapperSm {
   min-height: var(--fui-input-height-sm, $fui-input-height-sm);
+
+  .trigger {
+    width: calc(var(--fui-input-height-sm, $fui-input-height-sm) - var(--fui-space-1, $fui-space-1));
+  }
 }
 
 .inputWrapperMd {
@@ -16,10 +20,16 @@
 
 .inputWrapperLg {
   min-height: var(--fui-input-height-lg, $fui-input-height-lg);
+
+  .trigger {
+    width: calc(var(--fui-input-height-lg, $fui-input-height-lg) - var(--fui-space-1, $fui-space-1));
+  }
 }
 
 // Input + trigger wrapper
 .inputWrapper {
+  @include field-shell;
+
   display: inline-flex;
   align-items: center;
   flex-wrap: wrap;
@@ -27,26 +37,15 @@
   width: 100%;
   min-width: 10rem;
   min-height: var(--fui-input-height, $fui-input-height);
-  padding: var(--fui-space-1, $fui-space-1);
-  padding-right: 0;
-  background-color: var(--fui-bg-elevated, $fui-bg-elevated);
-  border: 1px solid var(--fui-border-strong, $fui-border-strong);
-  border-radius: var(--fui-radius-md, $fui-radius-md);
-  transition:
-    border-color var(--fui-transition-fast, $fui-transition-fast),
-    box-shadow var(--fui-transition-fast, $fui-transition-fast);
-
-  &:hover:not(:has([data-disabled])) {
-    border-color: var(--fui-text-tertiary, $fui-text-tertiary);
-  }
+  padding: calc(var(--fui-space-px, $fui-space-px) * 2);
+  padding-right: var(--fui-space-1, $fui-space-1);
 
   &:focus-within {
-    @include focus-ring;
-    border-color: var(--fui-color-accent, $fui-color-accent);
+    @include field-shell-focus;
   }
 
   &:has([data-disabled]) {
-    background-color: var(--fui-bg-tertiary, $fui-bg-tertiary);
+    background-color: var(--fui-field-bg-disabled, $fui-bg-tertiary);
     color: var(--fui-text-tertiary, $fui-text-tertiary);
   }
 }
@@ -98,11 +97,12 @@
   gap: var(--fui-space-0-5, $fui-space-0-5);
   height: var(--fui-target-size-min, $fui-target-size-min);
   padding: 0 var(--fui-space-2, $fui-space-2);
-  background-color: transparent;
-  border: 1px solid var(--fui-border, $fui-border);
+  background-color: var(--fui-bg-secondary, $fui-bg-secondary);
+  border: 1px solid var(--fui-form-group-border, $fui-border);
   border-radius: var(--fui-radius-full, $fui-radius-full);
   font-size: var(--fui-font-size-2xs, $fui-font-size-2xs);
   line-height: 1;
+  color: var(--fui-text-secondary, $fui-text-secondary);
   white-space: nowrap;
   max-width: 12rem;
 }
@@ -140,22 +140,25 @@
 // Chevron trigger button
 .trigger {
   @include button-reset;
+  @include touch-target;
 
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
-  align-self: stretch;
-  width: 2rem;
+  width: calc(var(--fui-input-height, $fui-input-height) - var(--fui-space-1, $fui-space-1));
   margin-left: auto;
   color: var(--fui-text-secondary, $fui-text-secondary);
   cursor: pointer;
-  border-radius: 0 var(--fui-radius-md, $fui-radius-md) var(--fui-radius-md, $fui-radius-md) 0;
-  transition: color var(--fui-transition-fast, $fui-transition-fast);
-  margin-inline-end: var(--fui-space-2, $fui-space-2);
+  border-radius: calc(var(--fui-radius-md, $fui-radius-md) - 2px);
+  transition:
+    color var(--fui-transition-fast, $fui-transition-fast),
+    background-color var(--fui-transition-fast, $fui-transition-fast);
+  margin-inline-end: calc(var(--fui-space-px, $fui-space-px) * 2);
 
   &:hover {
     color: var(--fui-text-primary, $fui-text-primary);
+    background-color: var(--fui-bg-hover, $fui-bg-hover);
   }
 
   &[data-disabled] {
@@ -185,6 +188,8 @@
   @include surface-elevated;
   @include popup-container;
 
+  border-color: var(--fui-form-group-border, $fui-border);
+
   // Item height derived from text-base font + vertical padding
   --_item-h: calc(
     var(--fui-font-size-sm, #{$fui-font-size-sm}) *
@@ -230,12 +235,11 @@
   }
 
   &[data-selected] {
-    background-color: var(--fui-color-accent, $fui-color-accent);
-    color: var(--fui-text-inverse, $fui-text-inverse);
+    @include popup-item-selected;
 
     &[data-highlighted],
     &:hover:not([data-disabled]) {
-      background-color: var(--fui-color-accent-hover, $fui-color-accent-hover);
+      background-color: var(--fui-field-selection-bg-hover, $fui-bg-hover);
     }
   }
 
@@ -253,6 +257,7 @@
   width: 1rem;
   height: 1rem;
   margin-left: auto;
+  color: var(--fui-color-accent, $fui-color-accent);
 
   svg {
     width: 0.875rem;

package/src/components/DatePicker/DatePicker.module.scss

@@ -12,30 +12,18 @@
   @include button-reset;
   @include interactive-base;
   @include text-base;
+  @include field-shell;
+  @include control-size('md', 'input');
 
   display: inline-flex;
   align-items: center;
   gap: var(--fui-space-2, $fui-space-2);
   width: 100%;
   min-width: 10rem;
-  height: var(--fui-input-height, $fui-input-height);
-  padding: 0 var(--fui-space-3, $fui-space-3);
-  background-color: var(--fui-bg-elevated, $fui-bg-elevated);
-  border: 1px solid var(--fui-border-strong, $fui-border-strong);
-  border-radius: var(--fui-radius-md, $fui-radius-md);
   text-align: left;
 
-  &:hover:not([data-disabled]) {
-    border-color: var(--fui-text-tertiary, $fui-text-tertiary);
-  }
-
   &[data-popup-open] {
-    border-color: var(--fui-color-accent, $fui-color-accent);
-  }
-
-  &[data-disabled] {
-    background-color: var(--fui-bg-tertiary, $fui-bg-tertiary);
-    color: var(--fui-text-tertiary, $fui-text-tertiary);
+    border-color: var(--fui-field-border-focus, $fui-color-accent);
   }
 }
 
@@ -80,6 +68,7 @@
 .popup {
   @include surface-elevated;
 
+  border-color: var(--fui-form-group-border, $fui-border);
   padding: var(--fui-space-3, $fui-space-3);
   box-shadow: var(--fui-shadow-md, $fui-shadow-md);
 
@@ -250,15 +239,16 @@
 // ============================================
 
 .today > .dayButton {
-  border: 1px solid var(--fui-border-strong, $fui-border-strong);
+  box-shadow: inset 0 0 0 1px var(--fui-field-border, $fui-border-strong);
+  background-color: color-mix(in srgb, var(--fui-bg-hover, $fui-bg-hover) 55%, transparent);
 }
 
 .selected > .dayButton {
-  background-color: var(--fui-color-accent, $fui-color-accent);
-  color: var(--fui-text-inverse, $fui-text-inverse);
+  @include popup-item-selected;
+  font-weight: var(--fui-font-weight-medium, $fui-font-weight-medium);
 
   &:hover {
-    background-color: var(--fui-color-accent-hover, $fui-color-accent-hover);
+    background-color: var(--fui-field-selection-bg-hover, $fui-bg-hover);
   }
 }
 
@@ -292,7 +282,7 @@
     content: '';
     position: absolute;
     inset: 2px 0;
-    background-color: var(--fui-bg-hover, $fui-bg-hover);
+    background-color: color-mix(in srgb, var(--fui-color-accent, $fui-color-accent) 10%, transparent);
     z-index: 0;
   }
 
@@ -309,18 +299,18 @@
     content: '';
     position: absolute;
     inset: 2px 0 2px 50%;
-    background-color: var(--fui-bg-hover, $fui-bg-hover);
+    background-color: color-mix(in srgb, var(--fui-color-accent, $fui-color-accent) 10%, transparent);
     z-index: 0;
   }
 
   > .dayButton {
     position: relative;
     z-index: 1;
-    background-color: var(--fui-color-accent, $fui-color-accent);
-    color: var(--fui-text-inverse, $fui-text-inverse);
+    @include popup-item-selected;
+    font-weight: var(--fui-font-weight-medium, $fui-font-weight-medium);
 
     &:hover {
-      background-color: var(--fui-color-accent-hover, $fui-color-accent-hover);
+      background-color: var(--fui-field-selection-bg-hover, $fui-bg-hover);
     }
   }
 
@@ -335,18 +325,18 @@
     content: '';
     position: absolute;
     inset: 2px 50% 2px 0;
-    background-color: var(--fui-bg-hover, $fui-bg-hover);
+    background-color: color-mix(in srgb, var(--fui-color-accent, $fui-color-accent) 10%, transparent);
     z-index: 0;
   }
 
   > .dayButton {
     position: relative;
     z-index: 1;
-    background-color: var(--fui-color-accent, $fui-color-accent);
-    color: var(--fui-text-inverse, $fui-text-inverse);
+    @include popup-item-selected;
+    font-weight: var(--fui-font-weight-medium, $fui-font-weight-medium);
 
     &:hover {
-      background-color: var(--fui-color-accent-hover, $fui-color-accent-hover);
+      background-color: var(--fui-field-selection-bg-hover, $fui-bg-hover);
     }
   }
 }