@khanacademy/wonder-blocks-dropdown 9.1.1 → 9.1.3

package/dist/es/index.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { useId } from 'react';
 import { StyleSheet } from 'aphrodite';
 import { CompactCell, DetailCell } from '@khanacademy/wonder-blocks-cell';
-import { spacing, color, mix, fade, semanticColor, border, font } from '@khanacademy/wonder-blocks-tokens';
+import { spacing, semanticColor, border, color, font } from '@khanacademy/wonder-blocks-tokens';
 import { LabelMedium, LabelSmall, LabelLarge } from '@khanacademy/wonder-blocks-typography';
 import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/objectWithoutPropertiesLoose';
 import { View, addStyle, keys, Id, useOnMountEffect } from '@khanacademy/wonder-blocks-core';
@@ -67,11 +67,6 @@ const defaultComboboxLabels = {
   unselected: labels => `${labels} not selected`
 };
 
-const {
-  blue: blue$1,
-  white: white$1,
-  offBlack: offBlack$1
-} = color;
 class ActionItem extends React.Component {
   static isClassOf(instance) {
     return instance && instance.type && instance.type.__IS_ACTION_ITEM__;
@@ -92,13 +87,13 @@ class ActionItem extends React.Component {
       style,
       testId
     } = this.props;
-    const defaultStyle = [styles$c.wrapper, style];
+    const defaultStyle = [styles$b.wrapper, style];
     const labelComponent = typeof label === "string" ? React.createElement(LabelMedium, {
       lang: lang,
-      style: styles$c.label
+      style: styles$b.label
     }, label) : (React.cloneElement(label, _extends({
       lang,
-      style: styles$c.label
+      style: styles$b.label
     }, label.props)));
     return React.createElement(CompactCell, {
       disabled: disabled,
@@ -106,7 +101,7 @@ class ActionItem extends React.Component {
       rootStyle: defaultStyle,
       leftAccessory: leftAccessory,
       rightAccessory: rightAccessory,
-      style: [styles$c.shared, indent && styles$c.indent],
+      style: [styles$b.shared, indent && styles$b.indent],
       role: role,
       testId: testId,
       title: labelComponent,
@@ -123,28 +118,37 @@ ActionItem.defaultProps = {
   role: "menuitem"
 };
 ActionItem.__IS_ACTION_ITEM__ = true;
-const styles$c = StyleSheet.create({
+const actionType$1 = semanticColor.action.primary.progressive;
+const theme$7 = {
+  actionItem: {
+    color: {
+      hover: {
+        background: actionType$1.hover.background,
+        foreground: actionType$1.hover.foreground
+      },
+      press: {
+        background: actionType$1.press.background,
+        foreground: actionType$1.press.foreground
+      }
+    }
+  }
+};
+const styles$b = StyleSheet.create({
   wrapper: {
     minHeight: DROPDOWN_ITEM_HEIGHT,
     touchAction: "manipulation",
     ":focus": {
       borderRadius: spacing.xxxSmall_4,
-      outline: `${spacing.xxxxSmall_2}px solid ${color.blue}`,
+      outline: `${spacing.xxxxSmall_2}px solid ${semanticColor.focus.outer}`,
       outlineOffset: -spacing.xxxxSmall_2
     },
     [":hover[aria-disabled=false]"]: {
-      color: white$1,
-      background: blue$1
-    },
-    ["@media not (hover: hover)"]: {
-      [":hover[aria-disabled=false]"]: {
-        color: white$1,
-        background: offBlack$1
-      }
+      color: theme$7.actionItem.color.hover.foreground,
+      background: theme$7.actionItem.color.hover.background
     },
     [":active[aria-disabled=false]"]: {
-      color: color.fadedBlue,
-      background: color.activeBlue
+      color: theme$7.actionItem.color.press.foreground,
+      background: theme$7.actionItem.color.press.background
     }
   },
   shared: {
@@ -167,10 +171,10 @@ const Check = function Check(props) {
   return React.createElement(PhosphorIcon, {
     icon: checkIcon,
     size: "small",
-    style: [styles$b.bounds, !selected && styles$b.hide]
+    style: [styles$a.bounds, !selected && styles$a.hide]
   });
 };
-const styles$b = StyleSheet.create({
+const styles$a = StyleSheet.create({
   bounds: {
     alignSelf: "center",
     height: spacing.medium_16,
@@ -182,11 +186,6 @@ const styles$b = StyleSheet.create({
   }
 });
 
-const {
-  offBlack16,
-  offBlack50,
-  offWhite
-} = color;
 const Checkbox = function Checkbox(props) {
   const {
     disabled,
@@ -194,7 +193,7 @@ const Checkbox = function Checkbox(props) {
   } = props;
   return React.createElement(View, {
     className: "checkbox",
-    style: [styles$a.checkbox, selected && !disabled && styles$a.noBorder, disabled && styles$a.disabledCheckbox]
+    style: [styles$9.checkbox, selected && !disabled && styles$9.noBorder, disabled && styles$9.disabledCheckbox]
   }, selected && React.createElement(PhosphorIcon, {
     icon: checkIcon,
     size: "small",
@@ -203,26 +202,39 @@ const Checkbox = function Checkbox(props) {
       width: spacing.small_12,
       height: spacing.small_12,
       margin: spacing.xxxxSmall_2
-    }, disabled && selected && styles$a.disabledCheckFormatting]
+    }, disabled && selected && styles$9.disabledCheckFormatting]
   }));
 };
-const styles$a = StyleSheet.create({
+const theme$6 = {
+  checkbox: {
+    color: {
+      default: {
+        border: semanticColor.border.strong
+      },
+      disabled: {
+        border: semanticColor.action.secondary.disabled.border,
+        background: semanticColor.action.secondary.disabled.background
+      }
+    }
+  }
+};
+const styles$9 = StyleSheet.create({
   checkbox: {
     alignSelf: "center",
     minHeight: spacing.medium_16,
     minWidth: spacing.medium_16,
     height: spacing.medium_16,
-    borderRadius: 3,
-    borderWidth: 1,
+    borderRadius: border.radius.small_3,
+    borderWidth: border.width.hairline,
     borderStyle: "solid",
-    borderColor: offBlack50
+    borderColor: theme$6.checkbox.color.default.border
   },
   noBorder: {
     borderWidth: 0
   },
   disabledCheckbox: {
-    borderColor: offBlack16,
-    backgroundColor: offWhite
+    borderColor: theme$6.checkbox.color.disabled.border,
+    backgroundColor: theme$6.checkbox.color.disabled.background
   },
   disabledCheckFormatting: {
     position: "absolute",
@@ -276,12 +288,12 @@ class OptionItem extends React.Component {
       } = _this$props,
       sharedProps = _objectWithoutPropertiesLoose(_this$props, _excluded$5);
     const CheckComponent = this.getCheckComponent();
-    const defaultStyle = [styles$9.item, style];
+    const defaultStyle = [styles$8.item, style];
     return React.createElement(DetailCell, _extends({
       disabled: disabled,
       horizontalRule: horizontalRule,
-      rootStyle: parentComponent === "listbox" ? styles$9.listboxItem : defaultStyle,
-      style: styles$9.itemContainer,
+      rootStyle: parentComponent === "listbox" ? styles$8.listboxItem : defaultStyle,
+      style: styles$8.itemContainer,
       "aria-selected": parentComponent !== "listbox" && selected ? "true" : "false",
       role: parentComponent !== "listbox" ? role : undefined,
       testId: testId,
@@ -303,7 +315,7 @@ class OptionItem extends React.Component {
         className: "subtitle"
       }, subtitle1) : undefined,
       title: React.createElement(LabelMedium, {
-        style: styles$9.label
+        style: styles$8.label
       }, label),
       subtitle2: subtitle2 ? React.createElement(LabelSmall, {
         className: "subtitle"
@@ -320,18 +332,19 @@ class OptionItem extends React.Component {
       selected
     } = this.props;
     if (parentComponent === "listbox") {
-      return React.createElement(StyledLi, {
-        onMouseDown: e => {
-          e.preventDefault();
-        },
-        onClick: this.handleClick,
-        style: [styles$9.reset, styles$9.item, focused && styles$9.itemFocused, disabled && styles$9.itemDisabled],
-        role: role,
-        "aria-selected": selected ? "true" : "false",
-        "aria-disabled": disabled ? "true" : "false",
-        id: this.props.id,
-        tabIndex: -1
-      }, this.renderCell());
+      return (React.createElement(StyledLi, {
+          onMouseDown: e => {
+            e.preventDefault();
+          },
+          onClick: this.handleClick,
+          style: [styles$8.reset, styles$8.item, focused && styles$8.itemFocused, disabled && styles$8.itemDisabled],
+          role: role,
+          "aria-selected": selected ? "true" : "false",
+          "aria-disabled": disabled ? "true" : "false",
+          id: this.props.id,
+          tabIndex: -1
+        }, this.renderCell())
+      );
     }
     return this.renderCell();
   }
@@ -345,17 +358,64 @@ OptionItem.defaultProps = {
   selected: false
 };
 OptionItem.__IS_OPTION_ITEM__ = true;
-const {
-  blue,
-  white,
-  offBlack
-} = color;
 const focusedStyle = {
   borderRadius: spacing.xxxSmall_4,
-  outline: `${spacing.xxxxSmall_2}px solid ${color.blue}`,
+  outline: `${spacing.xxxxSmall_2}px solid ${semanticColor.focus.outer}`,
   outlineOffset: -spacing.xxxxSmall_2
 };
-const styles$9 = StyleSheet.create({
+const actionType = semanticColor.action.primary.progressive;
+const theme$5 = {
+  optionItem: {
+    color: {
+      default: {
+        background: semanticColor.surface.primary,
+        foreground: semanticColor.text.primary
+      },
+      hover: {
+        background: actionType.hover.background,
+        foreground: actionType.hover.foreground
+      },
+      press: {
+        background: actionType.press.background,
+        foreground: actionType.press.foreground
+      },
+      disabled: {
+        background: "transparent",
+        foreground: semanticColor.action.secondary.disabled.foreground
+      }
+    }
+  },
+  checkbox: {
+    color: {
+      hover: {
+        background: semanticColor.action.secondary.progressive.hover.background,
+        foreground: semanticColor.action.secondary.progressive.hover.foreground
+      },
+      press: {
+        background: semanticColor.surface.primary,
+        foreground: semanticColor.action.secondary.progressive.press.foreground
+      },
+      selected: {
+        background: actionType.default.background,
+        foreground: actionType.default.foreground
+      }
+    }
+  },
+  subtitle: {
+    color: {
+      default: {
+        foreground: semanticColor.text.secondary
+      },
+      hover: {
+        foreground: semanticColor.text.inverse
+      },
+      press: {
+        foreground: semanticColor.text.inverse
+      }
+    }
+  }
+};
+const styles$8 = StyleSheet.create({
   reset: {
     margin: 0,
     padding: 0,
@@ -374,69 +434,68 @@ const styles$9 = StyleSheet.create({
     color: "inherit"
   },
   item: {
-    backgroundColor: color.white,
+    background: theme$5.optionItem.color.default.background,
+    color: theme$5.optionItem.color.default.foreground,
     minHeight: "unset",
     ":focus": focusedStyle,
     ":focus-visible": {
       overflow: "visible"
     },
     [":hover[aria-disabled=false]"]: {
-      color: white,
-      background: blue
+      color: theme$5.optionItem.color.hover.foreground,
+      background: theme$5.optionItem.color.hover.background
     },
     [":active[aria-selected=false]"]: {},
     [":hover[aria-disabled=true]"]: {
       cursor: "not-allowed"
     },
     [":is([aria-disabled=true])"]: {
-      color: color.offBlack32,
+      color: theme$5.optionItem.color.disabled.foreground,
       ":focus-visible": {
         outline: "none"
       }
     },
-    ["@media not (hover: hover)"]: {
-      [":hover[aria-disabled=false]"]: {
-        color: white,
-        background: offBlack
-      }
-    },
     [":active[aria-disabled=false]"]: {
-      color: color.fadedBlue,
-      background: color.activeBlue
+      color: theme$5.optionItem.color.press.foreground,
+      background: theme$5.optionItem.color.press.background
     },
     [":hover[aria-disabled=false] .checkbox"]: {
-      background: white
+      background: theme$5.checkbox.color.hover.background
+    },
+    [":active[aria-disabled=false] .checkbox"]: {
+      background: theme$5.checkbox.color.press.background
     },
     [":hover[aria-disabled=false] .check"]: {
-      color: blue
+      color: theme$5.checkbox.color.hover.foreground
     },
     [":active[aria-disabled=false] .check"]: {
-      color: color.activeBlue
+      color: theme$5.checkbox.color.press.foreground
     },
     [":is([aria-selected=true]) .checkbox"]: {
-      background: blue
+      background: theme$5.checkbox.color.selected.background
     },
     [":is([aria-selected=true]) .check"]: {
-      color: white
+      color: theme$5.checkbox.color.selected.foreground
     },
     [":is([aria-disabled=false]) .subtitle"]: {
-      color: color.offBlack64
+      color: theme$5.subtitle.color.default.foreground
     },
     [":hover[aria-disabled=false] .subtitle"]: {
-      color: color.offWhite
+      color: theme$5.subtitle.color.hover.foreground
     },
     [":active[aria-disabled=false] .subtitle"]: {
-      color: mix(color.fadedBlue16, white)
+      color: theme$5.subtitle.color.press.foreground
     }
   },
   itemFocused: focusedStyle,
   itemDisabled: {
-    outlineColor: color.offBlack32
+    outlineColor: semanticColor.focus.outer
   },
   itemContainer: {
     minHeight: "unset",
-    padding: `${spacing.xSmall_8 + spacing.xxxxSmall_2}px ${spacing.xSmall_8}px`,
-    paddingRight: spacing.medium_16,
+    paddingBlock: spacing.xSmall_8 + spacing.xxxxSmall_2,
+    paddingInlineStart: spacing.xSmall_8,
+    paddingInlineEnd: spacing.medium_16,
     whiteSpace: "nowrap"
   },
   label: {
@@ -456,16 +515,23 @@ class SeparatorItem extends React.Component {
   }
   render() {
     return (React.createElement(View, {
-        style: [styles$8.separator, this.props.style],
+        style: [styles$7.separator, this.props.style],
         "aria-hidden": "true"
       })
     );
   }
 }
 SeparatorItem.__IS_SEPARATOR_ITEM__ = true;
-const styles$8 = StyleSheet.create({
+const theme$4 = {
+  separator: {
+    color: {
+      border: semanticColor.border.primary
+    }
+  }
+};
+const styles$7 = StyleSheet.create({
   separator: {
-    boxShadow: `0 -1px ${color.offBlack16}`,
+    borderTop: `1px solid ${theme$4.separator.color.border}`,
     height: 1,
     minHeight: 1,
     marginTop: spacing.xxxSmall_4,
@@ -1172,7 +1238,7 @@ class DropdownCore extends React.Component {
     const numResults = items.length;
     if (numResults === 0) {
       return React.createElement(LabelMedium, {
-        style: styles$7.noResult,
+        style: styles$6.noResult,
         testId: "dropdown-core-no-results"
       }, noResults);
     }
@@ -1247,7 +1313,7 @@ class DropdownCore extends React.Component {
       onChange: this.handleSearchTextChanged,
       placeholder: labels.filter,
       ref: this.searchFieldRef,
-      style: styles$7.searchInputStyle,
+      style: styles$6.searchInputStyle,
       value: searchText || ""
     });
   }
@@ -1265,12 +1331,12 @@ class DropdownCore extends React.Component {
     const minDropdownWidth = openerStyle ? openerStyle.getPropertyValue("width") : 0;
     return React.createElement(View, {
       onMouseUp: this.handleDropdownMouseUp,
-      style: [styles$7.dropdown, isReferenceHidden && styles$7.hidden, dropdownStyle],
+      style: [styles$6.dropdown, isReferenceHidden && styles$6.hidden, dropdownStyle],
       testId: "dropdown-core-container"
     }, isFilterable && this.renderSearchField(), React.createElement(View, {
       id: id,
       role: role,
-      style: [styles$7.listboxOrMenu, {
+      style: [styles$6.listboxOrMenu, {
         minWidth: minDropdownWidth
       }],
       "aria-invalid": role === "listbox" ? ariaInvalid : undefined,
@@ -1304,7 +1370,7 @@ class DropdownCore extends React.Component {
       "aria-live": "polite",
       "aria-atomic": "true",
       "aria-relevant": "additions text",
-      style: styles$7.srOnly,
+      style: styles$6.srOnly,
       "data-testid": "dropdown-live-region"
     }, open && labels.someResults(totalItems));
   }
@@ -1319,7 +1385,7 @@ class DropdownCore extends React.Component {
     return React.createElement(View, {
       onKeyDown: !disabled ? this.handleKeyDown : undefined,
       onKeyUp: !disabled ? this.handleKeyUp : undefined,
-      style: [styles$7.menuWrapper, style],
+      style: [styles$6.menuWrapper, style],
       className: className
     }, this.renderLiveRegion(), opener, open && this.renderDropdown());
   }
@@ -1336,17 +1402,32 @@ DropdownCore.defaultProps = {
   },
   selectionType: "single"
 };
-const styles$7 = StyleSheet.create({
+const theme$3 = {
+  dropdown: {
+    color: {
+      default: {
+        background: semanticColor.surface.primary,
+        border: semanticColor.border.primary
+      }
+    }
+  },
+  noResults: {
+    color: {
+      foreground: semanticColor.text.secondary
+    }
+  }
+};
+const styles$6 = StyleSheet.create({
   menuWrapper: {
     width: "fit-content"
   },
   dropdown: {
-    backgroundColor: color.white,
-    borderRadius: 4,
+    backgroundColor: theme$3.dropdown.color.default.background,
+    borderRadius: border.radius.medium_4,
     paddingTop: spacing.xxxSmall_4,
     paddingBottom: spacing.xxxSmall_4,
-    border: `solid 1px ${color.offBlack16}`,
-    boxShadow: `0px 8px 8px 0px ${fade(color.offBlack, 0.1)}`,
+    border: `solid 1px ${theme$3.dropdown.color.default.border}`,
+    boxShadow: `0px 8px 8px 0px ${color.offBlack8}`,
     maxHeight: "var(--popper-max-height)"
   },
   listboxOrMenu: {
@@ -1357,7 +1438,7 @@ const styles$7 = StyleSheet.create({
     visibility: "hidden"
   },
   noResult: {
-    color: color.offBlack64,
+    color: theme$3.noResults.color.foreground,
     alignSelf: "center",
     marginTop: spacing.xxSmall_6
   },
@@ -1396,10 +1477,8 @@ class ActionMenuOpenerCore extends React.Component {
         "aria-label": ariaLabel
       } = _this$props,
       restProps = _objectWithoutPropertiesLoose(_this$props, _excluded$4);
-    const buttonColor = color.blue;
-    const buttonStyles = _generateStyles$1(buttonColor);
     const disabled = disabledProp;
-    const defaultStyle = [sharedStyles.shared, disabled && sharedStyles.disabled, buttonStyles.default, disabled && buttonStyles.disabled, !disabled && pressed && buttonStyles.active];
+    const defaultStyle = [sharedStyles.shared, sharedStyles.default, disabled && sharedStyles.disabled, !disabled && pressed && sharedStyles.press];
     const label = React.createElement(LabelLarge, {
       style: sharedStyles.text
     }, children);
@@ -1413,7 +1492,7 @@ class ActionMenuOpenerCore extends React.Component {
     }, restProps, {
       "data-testid": testId
     }), React.createElement(View, {
-      style: !disabled && (hovered || focused) && buttonStyles.focus
+      style: !disabled && (hovered || focused) && sharedStyles.focus
     }, label), React.createElement(Strut, {
       size: spacing.xxxSmall_4
     }), React.createElement(PhosphorIcon, {
@@ -1424,6 +1503,22 @@ class ActionMenuOpenerCore extends React.Component {
     }));
   }
 }
+const theme$2 = {
+  actionMenuOpener: {
+    color: {
+      default: {
+        background: "none",
+        foreground: semanticColor.action.secondary.progressive.default.foreground
+      },
+      disabled: {
+        foreground: semanticColor.action.secondary.disabled.foreground
+      },
+      press: {
+        foreground: semanticColor.action.secondary.progressive.press.foreground
+      }
+    }
+  }
+};
 const sharedStyles = StyleSheet.create({
   shared: {
     position: "relative",
@@ -1442,8 +1537,13 @@ const sharedStyles = StyleSheet.create({
       WebkitTapHighlightColor: "rgba(0,0,0,0)"
     }
   },
+  default: {
+    background: theme$2.actionMenuOpener.color.default.background,
+    color: theme$2.actionMenuOpener.color.default.foreground
+  },
   disabled: {
-    cursor: "auto"
+    color: theme$2.actionMenuOpener.color.disabled.foreground,
+    cursor: "not-allowed"
   },
   small: {
     height: spacing.xLarge_32
@@ -1459,52 +1559,22 @@ const sharedStyles = StyleSheet.create({
     textOverflow: "ellipsis",
     pointerEvents: "none"
   },
-  hiddenText: {
-    visibility: "hidden"
+  focus: {
+    ":after": {
+      content: "''",
+      position: "absolute",
+      height: 2,
+      left: 0,
+      right: 0,
+      bottom: -1,
+      background: "currentColor",
+      borderRadius: border.radius.xSmall_2
+    }
   },
-  spinner: {
-    position: "absolute"
+  press: {
+    color: theme$2.actionMenuOpener.color.press.foreground
   }
 });
-const styles$6 = {};
-const _generateStyles$1 = localColor => {
-  const buttonType = localColor;
-  if (styles$6[buttonType]) {
-    return styles$6[buttonType];
-  }
-  const {
-    offBlack32
-  } = color;
-  const activeColor = color.activeBlue;
-  let newStyles = {};
-  newStyles = {
-    default: {
-      background: "none",
-      color: localColor
-    },
-    focus: {
-      ":after": {
-        content: "''",
-        position: "absolute",
-        height: 2,
-        left: 0,
-        right: 0,
-        bottom: -1,
-        background: "currentColor",
-        borderRadius: 2
-      }
-    },
-    active: {
-      color: activeColor
-    },
-    disabled: {
-      color: offBlack32,
-      cursor: "default"
-    }
-  };
-  styles$6[buttonType] = StyleSheet.create(newStyles);
-  return styles$6[buttonType];
-};
 
 const _excluded$3 = ["text", "opened"];
 class ActionMenu extends React.Component {
@@ -1676,7 +1746,7 @@ const styles$5 = StyleSheet.create({
   }
 });
 
-const _excluded$2 = ["children", "disabled", "error", "id", "isPlaceholder", "open", "testId", "aria-label", "aria-required", "onBlur", "onOpenChanged"];
+const _excluded$2 = ["children", "disabled", "error", "id", "isPlaceholder", "open", "testId", "aria-label", "aria-required", "aria-controls", "onBlur", "onOpenChanged"];
 const StyledButton = addStyle("button");
 class SelectOpener extends React.Component {
   constructor(props) {
@@ -1721,11 +1791,12 @@ class SelectOpener extends React.Component {
         testId,
         "aria-label": ariaLabel,
         "aria-required": ariaRequired,
+        "aria-controls": ariaControls,
         onBlur
       } = _this$props,
       sharedProps = _objectWithoutPropertiesLoose(_this$props, _excluded$2);
     const stateStyles = _generateStyles(isPlaceholder, error);
-    const iconColor = disabled ? semanticColor.action.disabled.default : semanticColor.icon.primary;
+    const iconColor = disabled ? semanticColor.icon.disabled : semanticColor.icon.primary;
     const style = [styles$4.shared, stateStyles.default, disabled && stateStyles.disabled, !disabled && this.state.pressed && stateStyles.press];
     return React.createElement(StyledButton, _extends({}, sharedProps, {
       "aria-disabled": disabled,
@@ -1734,6 +1805,7 @@ class SelectOpener extends React.Component {
       "aria-label": ariaLabel != null ? ariaLabel : undefined,
       "aria-required": ariaRequired,
       "aria-haspopup": "listbox",
+      "aria-controls": ariaControls,
       "data-testid": testId,
       id: id,
       role: "combobox",
@@ -1804,8 +1876,8 @@ const _generateStyles = (placeholder, error) => {
       foreground: semanticColor.text.primary
     },
     disabled: {
-      border: semanticColor.border.primary,
-      background: semanticColor.action.disabled.secondary,
+      border: semanticColor.action.secondary.disabled.border,
+      background: semanticColor.action.secondary.disabled.background,
       foreground: semanticColor.text.secondary
     },
     error: {
@@ -1815,18 +1887,21 @@ const _generateStyles = (placeholder, error) => {
     }
   };
   const actionType = error ? "destructive" : "progressive";
-  const action = semanticColor.action.outlined[actionType];
+  const action = semanticColor.action.secondary[actionType];
   const sharedOutlineStyling = {
     outlineOffset: -border.width.thin,
     outlineStyle: "solid",
     outlineWidth: border.width.thin
   };
-  const focusHoverStyling = _extends({
+  const focusStyling = _extends({}, sharedOutlineStyling, {
+    outlineColor: semanticColor.focus.outer
+  });
+  const hoverStyling = _extends({}, sharedOutlineStyling, {
     outlineColor: action.hover.border
-  }, sharedOutlineStyling);
+  });
   const pressStyling = _extends({
     background: action.press.background,
-    color: placeholder ? error ? semanticColor.text.secondary : semanticColor.action.outlined.progressive.press.foreground : semanticColor.text.primary,
+    color: placeholder ? error ? semanticColor.text.secondary : semanticColor.action.secondary.progressive.press.foreground : semanticColor.text.primary,
     outlineColor: action.press.border
   }, sharedOutlineStyling);
   const currentState = error ? states.error : states.default;
@@ -1836,7 +1911,7 @@ const _generateStyles = (placeholder, error) => {
       borderColor: currentState.border,
       borderWidth: border.width.hairline,
       color: placeholder ? semanticColor.text.secondary : currentState.foreground,
-      ":hover:not([aria-disabled=true])": focusHoverStyling,
+      ":hover:not([aria-disabled=true])": hoverStyling,
       ["@media not (hover: hover)"]: {
         ":hover:not([aria-disabled=true])": {
           borderColor: currentState.border,
@@ -1845,7 +1920,7 @@ const _generateStyles = (placeholder, error) => {
           paddingRight: spacing.small_12
         }
       },
-      ":focus-visible:not([aria-disabled=true])": focusHoverStyling,
+      ":focus-visible:not([aria-disabled=true])": focusStyling,
       ":active:not([aria-disabled=true])": pressStyling
     },
     disabled: {
@@ -1854,7 +1929,7 @@ const _generateStyles = (placeholder, error) => {
       color: states.disabled.foreground,
       cursor: "not-allowed",
       ":focus-visible": _extends({
-        outlineColor: semanticColor.action.disabled.default
+        outlineColor: semanticColor.focus.outer
       }, sharedOutlineStyling)
     },
     press: pressStyling
@@ -2773,7 +2848,7 @@ const styles$2 = StyleSheet.create({
     paddingInlineEnd: spacing.xxxSmall_4
   },
   pillFocused: {
-    outline: `1px solid ${color.blue}`
+    outline: `1px solid ${semanticColor.focus.outer}`
   }
 });
 
@@ -2858,12 +2933,21 @@ function Listbox(props) {
     "aria-multiselectable": selectionType === "multiple"
   }, children);
 }
+const theme$1 = {
+  listbox: {
+    color: {
+      disabled: {
+        foreground: semanticColor.action.secondary.disabled.foreground
+      }
+    }
+  }
+};
 const styles$1 = StyleSheet.create({
   listbox: {
     outline: "none"
   },
   disabled: {
-    color: color.offBlack64
+    color: theme$1.listbox.color.disabled.foreground
   }
 });
 
@@ -3031,7 +3115,7 @@ function Combobox({
     const startIconElement = React.cloneElement(startIcon, _extends({
       size: "small"
     }, startIcon.props, {
-      color: disabled ? color.offBlack32 : (_startIcon$props$colo = startIcon.props.color) != null ? _startIcon$props$colo : semanticColor.icon.primary
+      color: disabled ? semanticColor.icon.disabled : (_startIcon$props$colo = startIcon.props.color) != null ? _startIcon$props$colo : semanticColor.icon.primary
     }));
     return React.createElement(View, {
       style: styles.iconWrapper
@@ -3140,6 +3224,38 @@ function Combobox({
     }, renderList));
   }));
 }
+const theme = {
+  combobox: {
+    color: {
+      default: {
+        border: semanticColor.border.strong,
+        background: semanticColor.surface.primary
+      },
+      focus: {
+        border: semanticColor.focus.outer,
+        background: semanticColor.surface.primary
+      },
+      disabled: {
+        border: semanticColor.action.secondary.disabled.border,
+        background: semanticColor.action.secondary.disabled.background,
+        foreground: semanticColor.action.secondary.disabled.foreground
+      },
+      error: {
+        border: semanticColor.status.critical.foreground,
+        background: semanticColor.status.critical.background,
+        foreground: semanticColor.text.primary
+      }
+    }
+  },
+  listbox: {
+    color: {
+      default: {
+        background: semanticColor.surface.primary,
+        border: semanticColor.border.primary
+      }
+    }
+  }
+};
 const styles = StyleSheet.create({
   wrapper: {
     flexDirection: "row",
@@ -3147,24 +3263,24 @@ const styles = StyleSheet.create({
     width: "100%",
     maxWidth: "100%",
     flexWrap: "wrap",
-    background: color.white,
+    background: theme.combobox.color.default.background,
     borderRadius: border.radius.medium_4,
-    border: `solid 1px ${color.offBlack50}`,
+    border: `solid 1px ${theme.combobox.color.default.border}`,
     paddingInline: spacing.xSmall_8
   },
   focused: {
-    background: color.white,
-    border: `1px solid ${color.blue}`
+    background: theme.combobox.color.focus.background,
+    border: `1px solid ${theme.combobox.color.focus.border}`
   },
   disabled: {
-    background: color.offWhite,
-    border: `1px solid ${color.offBlack16}`,
-    color: color.offBlack64
+    background: theme.combobox.color.disabled.background,
+    border: `1px solid ${theme.combobox.color.disabled.border}`,
+    color: theme.combobox.color.disabled.foreground
   },
   error: {
-    background: color.fadedRed8,
-    border: `1px solid ${color.red}`,
-    color: color.offBlack
+    background: theme.combobox.color.error.background,
+    border: `1px solid ${theme.combobox.color.error.border}`,
+    color: theme.combobox.color.error.foreground
   },
   combobox: {
     appearance: "none",
@@ -3182,9 +3298,9 @@ const styles = StyleSheet.create({
     }
   },
   listbox: {
-    backgroundColor: color.white,
+    backgroundColor: theme.listbox.color.default.background,
     borderRadius: border.radius.medium_4,
-    border: `solid 1px ${color.offBlack16}`,
+    border: `solid ${border.width.hairline}px ${theme.listbox.color.default.border}`,
     boxShadow: `0px ${spacing.xSmall_8}px ${spacing.xSmall_8}px 0px ${color.offBlack8}`,
     maxHeight: "var(--popper-max-height)",
     overflowY: "auto"