@persona/design-system 0.4.0 → 0.5.1

package/dist/TableBoxField.d.mts

@@ -1,7 +1,7 @@
-import { l as MenuItemProps } from "./Menu-ZShdhNd7.mjs";
+import { l as MenuItemProps } from "./Menu-_loh8pe3.mjs";
 import { ImplementsFormField } from "./inputFields.mjs";
-import { r as TableBoxRowProps } from "./TableBoxRow-BQz0a9vr.mjs";
-import { n as TableBoxCellProps, s as TableBoxProps } from "./TableBoxCell-WXc57DwN.mjs";
+import { r as TableBoxRowProps } from "./TableBoxRow-ClK2pceY.mjs";
+import { n as TableBoxCellProps, s as TableBoxProps } from "./TableBoxCell-CQ3zT1jG.mjs";
 import { MouseEvent, ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 

package/dist/{TableBoxRow-BQz0a9vr.d.mts → TableBoxRow-ClK2pceY.d.mts}

@@ -1,5 +1,5 @@
-import { l as MenuItemProps } from "./Menu-ZShdhNd7.mjs";
-import { t as TableRow } from "./TableRow-BTWf9xVC.mjs";
+import { l as MenuItemProps } from "./Menu-_loh8pe3.mjs";
+import { t as TableRow } from "./TableRow-Dgg8hGy5.mjs";
 import { ComponentPropsWithoutRef, ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
@@ -83,4 +83,4 @@ declare const TableBoxRowOverlay: ({
 }) => _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { TableBoxRowOverlay as n, TableBoxRowProps as r, TableBoxRow as t };
-//# sourceMappingURL=TableBoxRow-BQz0a9vr.d.mts.map
+//# sourceMappingURL=TableBoxRow-ClK2pceY.d.mts.map

package/dist/TableBoxRow.d.mts

@@ -1,2 +1,2 @@
-import { n as TableBoxRowOverlay, r as TableBoxRowProps, t as TableBoxRow } from "./TableBoxRow-BQz0a9vr.mjs";
+import { n as TableBoxRowOverlay, r as TableBoxRowProps, t as TableBoxRow } from "./TableBoxRow-ClK2pceY.mjs";
 export { TableBoxRowOverlay, TableBoxRowProps, TableBoxRow as default };

package/dist/{TableBoxRowActions-DfewtLrn.d.mts → TableBoxRowActions-CoF3DuUQ.d.mts}

@@ -1,4 +1,4 @@
-import { l as MenuItemProps } from "./Menu-ZShdhNd7.mjs";
+import { l as MenuItemProps } from "./Menu-_loh8pe3.mjs";
 import * as _$styled_components0 from "styled-components";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
@@ -54,4 +54,4 @@ declare const RowActions: ({
 }: RowActionsProps) => _$react_jsx_runtime0.JSX.Element | null;
 //#endregion
 export { RowActionsContainerWithFadeWidth as i, RowActions as n, RowActionsContainer as r, RowAction as t };
-//# sourceMappingURL=TableBoxRowActions-DfewtLrn.d.mts.map
+//# sourceMappingURL=TableBoxRowActions-CoF3DuUQ.d.mts.map

package/dist/TableBoxRowActions.d.mts

@@ -1,2 +1,2 @@
-import { i as RowActionsContainerWithFadeWidth, n as RowActions, r as RowActionsContainer, t as RowAction } from "./TableBoxRowActions-DfewtLrn.mjs";
+import { i as RowActionsContainerWithFadeWidth, n as RowActions, r as RowActionsContainer, t as RowAction } from "./TableBoxRowActions-CoF3DuUQ.mjs";
 export { RowAction, RowActions, RowActionsContainer, RowActionsContainerWithFadeWidth };

package/dist/{index-Dc_BgmPv.d.mts → TableCell-BQv4ASkE.d.mts}

@@ -1,25 +1,8 @@
-import { t as TableHeaderCell } from "./TableHeaderCell-K_avn-rR.mjs";
-import { n as TableRowProps } from "./TableRow-BTWf9xVC.mjs";
-import * as _$react from "react";
+import { n as TableRowProps } from "./TableRow-Dgg8hGy5.mjs";
 import { ComponentPropsWithoutRef, ReactNode } from "react";
 import * as _$styled_components0 from "styled-components";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
-//#region components/Table/TableTH.d.ts
-interface TableTHProps extends ComponentPropsWithoutRef<typeof TableHeaderCell> {
-  canSort?: boolean;
-  isSorted?: boolean;
-  isDescending?: boolean;
-  isSticky?: boolean;
-  /**
-   * Display help icon and tooltip for column header
-   */
-  helpText?: ReactNode;
-  align?: 'left' | 'right';
-  size?: 'sm' | 'md';
-}
-declare const TableTH: _$react.ForwardRefExoticComponent<TableTHProps & _$react.RefAttributes<HTMLTableCellElement>>;
-//#endregion
 //#region components/Table/TableCell.d.ts
 interface TableCellProps {
   breakWord?: boolean;
@@ -59,11 +42,7 @@ declare const StickyTD: _$styled_components0.StyledComponent<"td", any, {
   left?: number;
   hasRightBorder?: boolean;
 }, "role">;
-declare const StickyTH: _$styled_components0.StyledComponent<_$react.ForwardRefExoticComponent<TableTHProps & _$react.RefAttributes<HTMLTableCellElement>>, any, {
-  left?: number;
-  hasRightBorder?: boolean;
-  size?: "sm" | "md";
-}, never>;
+declare const StickyTH: _$styled_components0.StyledComponent<any, any, any, any>;
 declare const TableTR: _$styled_components0.StyledComponent<"tr", any, {
   role: "row";
 } & TableRowProps & {
@@ -71,5 +50,5 @@ declare const TableTR: _$styled_components0.StyledComponent<"tr", any, {
   $isActive?: boolean;
 }, "role">;
 //#endregion
-export { TableCellProps as a, TableTD as c, TableTHProps as d, TableCell as i, TableTR as l, StickyTH as n, TableCellTitle as o, TableActionTD as r, TableIconTD as s, StickyTD as t, TableTH as u };
-//# sourceMappingURL=index-Dc_BgmPv.d.mts.map
+export { TableCellProps as a, TableTD as c, TableCell as i, TableTR as l, StickyTH as n, TableCellTitle as o, TableActionTD as r, TableIconTD as s, StickyTD as t };
+//# sourceMappingURL=TableCell-BQv4ASkE.d.mts.map

package/dist/TableCell.d.mts

@@ -1,2 +1,2 @@
-import { a as TableCellProps, c as TableTD, i as TableCell, l as TableTR, n as StickyTH, o as TableCellTitle, r as TableActionTD, s as TableIconTD, t as StickyTD } from "./index-Dc_BgmPv.mjs";
+import { a as TableCellProps, c as TableTD, i as TableCell, l as TableTR, n as StickyTH, o as TableCellTitle, r as TableActionTD, s as TableIconTD, t as StickyTD } from "./TableCell-BQv4ASkE.mjs";
 export { StickyTD, StickyTH, TableActionTD, TableCellProps, TableCellTitle, TableIconTD, TableTD, TableTR, TableCell as default };

package/dist/{TableControls-C26vGkWZ.d.mts → TableControls-CtEL3ioz.d.mts}

@@ -1,5 +1,5 @@
-import { n as ControlBarProps } from "./ControlBar-DwAhPcb5.mjs";
-import { i as TableViewConfigurationProps } from "./TableViewConfigurationDropdown-BqB7pOh8.mjs";
+import { n as ControlBarProps } from "./ControlBar-BVG5Pbvh.mjs";
+import { i as TableViewConfigurationProps } from "./TableViewConfigurationDropdown-DRxd562-.mjs";
 import { ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
@@ -64,4 +64,4 @@ declare const TableControls: ({
 }: TableControlsProps) => _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { TableControlsProps as n, TableControls as t };
-//# sourceMappingURL=TableControls-C26vGkWZ.d.mts.map
+//# sourceMappingURL=TableControls-CtEL3ioz.d.mts.map

package/dist/{TableControls-WUNbzSNq.mjs → TableControls-DplArh-9.mjs}

@@ -1,29 +1,31 @@
-import { a as styled, n as createGlobalStyle, r as css } from "./styledComponentsInterop-8zScIQyC.mjs";
+import { a as styled, n as createGlobalStyle, r as css } from "./styledComponentsInterop-NxwFjeA4.mjs";
 import { TruncatedText } from "./lib/TruncatedText.mjs";
+import { semanticColor, semanticOnly, semanticTokens } from "./lib/semanticColor.mjs";
 import { paragraphMixins } from "./mixins/text.mjs";
-import { t as Card_default } from "./Card-CKrJtn1f.mjs";
-import { t as Spacer_default } from "./Spacer-BsK8tTwA.mjs";
-import { i as Paragraph, r as Label$1 } from "./Text-B0orb-cZ.mjs";
+import { t as Card_default } from "./Card-vQIPtdXi.mjs";
+import { t as Spacer_default } from "./Spacer-D58qwuXR.mjs";
+import { i as Paragraph, r as Label$1 } from "./Text-Dn_p7ZvT.mjs";
 import "./variables/transitions.mjs";
-import { a as Tooltip } from "./Tooltip-iJcfJqxn.mjs";
+import { a as Tooltip } from "./Tooltip-BsuYG0fw.mjs";
+import { transparent, withAlpha } from "./lib/color.mjs";
 import { isActive, isFocused, isHovered, isNotDisabled } from "./lib/pseudoClass.mjs";
 import { useScrollOverflow } from "./lib/useScrollOverflow.mjs";
 import { Z_INDICES } from "./lib/zindex.mjs";
 import { focusOutline, focusWithinOutline } from "./mixins/focus.mjs";
-import { n as Stack, t as HStack } from "./Stack-Bre2oiov.mjs";
-import { n as Button, t as IconButton } from "./IconButton-BgL3QUVO.mjs";
-import { i as TabBar, n as StyledTab, r as Tab } from "./TabBar-B5NtgtgC.mjs";
-import { r as InputGroup } from "./Input-BWlvBYB3.mjs";
+import { n as Stack, t as HStack } from "./Stack-BqQndGI9.mjs";
+import { n as Button, t as IconButton } from "./IconButton-CnJNIJVQ.mjs";
+import { r as InputGroup } from "./Input-DbfwNzS_.mjs";
 import Input_default from "./components/Input/index.mjs";
-import { c as MenuList, s as MenuItem } from "./Menu-38UCGcte.mjs";
-import { n as DropdownMenu_default } from "./DropdownMenu-CUnf420M.mjs";
-import { t as Combobox } from "./Combobox-BUtqtzKl.mjs";
-import { s as Popover_default } from "./Popover-DlXyKYL5.mjs";
-import { t as Toggle } from "./Toggle-e8DCYa6i.mjs";
-import { i as selectedPresetFor, n as parseDateFilterValue, r as resolveDateFilterValue, t as formatDateFilterValue } from "./date-filter-BbWgAXy3.mjs";
-import { t as ListBox } from "./ListBox-9jHHEaqW.mjs";
-import { m as FormField, o as ComboboxField } from "./FormField-oBKH25qf.mjs";
-import { n as DatePicker, t as DateRangePicker } from "./DatePicker-CLP-ajza.mjs";
+import { c as MenuList, s as MenuItem } from "./Menu-CAGTCBqj.mjs";
+import { n as DropdownMenu_default } from "./DropdownMenu-DovtBJBs.mjs";
+import { t as Combobox } from "./Combobox-Ddas5FN-.mjs";
+import { s as Popover_default } from "./Popover-DUyzmq3e.mjs";
+import { i as TabBar, n as StyledTab, r as Tab } from "./TabBar-B__54oO3.mjs";
+import { t as Toggle } from "./Toggle-CqgFNIYS.mjs";
+import { i as selectedPresetFor, n as parseDateFilterValue, r as resolveDateFilterValue, t as formatDateFilterValue } from "./date-filter-DMZnJwGs.mjs";
+import { t as ListBox } from "./ListBox-CXh9Jfb-.mjs";
+import { m as FormField, o as ComboboxField } from "./FormField-BDJ6zNE6.mjs";
+import { n as DatePicker, t as DateRangePicker } from "./DatePicker-DTT-mJ8r.mjs";
 import { BorderRadius, Color, Spacing, Typography } from "@persona/design-tokens";
 import { Fragment, createContext, createElement, forwardRef, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -48,7 +50,7 @@ const FormControlLabel = styled(Label$1).attrs(() => ({
   display: inline-block;
 
   ${({ theme, isDisabled }) => css`
-    color: ${isDisabled ? theme.color.text.disabled : theme.color.text.primary};
+    color: ${isDisabled ? semanticColor(theme, "FgDisabled", theme.color.text.disabled) : semanticColor(theme, "FgPrimary", theme.color.text.primary)};
   `}
 `;
 //#endregion
@@ -78,7 +80,7 @@ const StyledInput = styled(Input_default)`
       border-width: 0px;
 
       &${isActive}, &${isFocused}, &${isHovered}&${isNotDisabled}, &${isHovered}&${isFocused} {
-        border-color: ${theme.color.border.input};
+        border-color: ${semanticColor(theme, "BorderDefault", theme.color.border.input)};
         box-shadow: none;
       }
     `}
@@ -189,7 +191,7 @@ const SearchInput = ({ className, title = "Search", handleInput, handleOnFocus =
 //#endregion
 //#region components/DataTable/TableControls/CompactBar.tsx
 const DataTableCompactBar = styled(HStack)`
-  border-bottom: 1px solid ${({ theme }) => theme.color.border.secondary};
+  border-bottom: 1px solid ${({ theme }) => semanticColor(theme, "BorderSubtle", theme.color.border.secondary)};
   padding-bottom: ${Spacing[1]};
 `;
 const CompactSearchInput = styled(SearchInput)`
@@ -291,7 +293,7 @@ function enterProxiesClick(e) {
 	if (e.key === "Enter") e.target.dispatchEvent(new Event("click", { bubbles: true }));
 }
 const AddViewButton = styled(IconButton)`
-  color: ${({ theme }) => theme.color.text.secondary};
+  color: ${({ theme }) => semanticColor(theme, "FgSecondary", theme.color.text.secondary)};
 `;
 const LockedTab = styled(Tab)`
   svg {
@@ -833,7 +835,7 @@ const StyledIconDrag = styled(DragIcon$1)`
   transition: opacity 0.2s ease-in-out;
 
   path {
-    stroke: ${Color.CoreSlate1000};
+    stroke: ${({ theme }) => semanticColor(theme, "FgPrimary", Color.CoreSlate1000)};
     stroke-width: 1px;
   }
 `;
@@ -888,8 +890,9 @@ const DndSection = styled("div")`
 `;
 const DndItemWrapper = styled("div")`
   background: white;
+  ${semanticOnly((tokens) => `background: ${tokens.SurfacePrimary};`)}
   width: 100%;
-  border-bottom: 1px solid ${({ theme }) => theme.color.border.secondary};
+  border-bottom: 1px solid ${({ theme }) => semanticColor(theme, "BorderSubtle", theme.color.border.secondary)};
   padding: ${Spacing[2]} ${Spacing[2]};
 
   display: flex;
@@ -1767,9 +1770,9 @@ const Body = styled.div`
 const GroupCard = styled.div`
   display: flex;
   flex-direction: column;
-  border: 1px solid ${Color.BorderDivider};
+  border: 1px solid ${({ theme }) => semanticColor(theme, "BorderSubtle", Color.BorderDivider)};
   border-radius: ${BorderRadius.Md};
-  background-color: ${Color.BackgroundPrimary};
+  background-color: ${({ theme }) => semanticColor(theme, "SurfacePrimary", Color.BackgroundPrimary)};
   overflow: hidden;
 `;
 const GroupHeader = styled.div`
@@ -1777,13 +1780,13 @@ const GroupHeader = styled.div`
   align-items: center;
   justify-content: space-between;
   padding: ${Spacing[1]} ${Spacing[2]};
-  border-bottom: 1px solid ${Color.BorderDivider};
-  background-color: ${Color.BackgroundSecondary};
+  border-bottom: 1px solid ${({ theme }) => semanticColor(theme, "BorderSubtle", Color.BorderDivider)};
+  background-color: ${({ theme }) => semanticColor(theme, "SurfaceSecondary", Color.BackgroundSecondary)};
 `;
 const GroupTitle = styled.span`
   font-size: ${({ $size }) => FILTER_SIZE_TOKENS[$size].fontSize};
   line-height: ${({ $size }) => FILTER_SIZE_TOKENS[$size].lineHeight};
-  color: ${Color.TextPrimary};
+  color: ${({ theme }) => semanticColor(theme, "FgPrimary", Color.TextPrimary)};
 `;
 const GroupHeaderActions = styled.div`
   display: inline-flex;
@@ -2140,18 +2143,18 @@ const Row = styled.button`
   border: none;
   appearance: none;
   border-radius: ${BorderRadius.Sm};
-  background: ${({ $selected }) => $selected ? Color.CorePurple100 : "transparent"};
-  color: ${({ $selected }) => $selected ? Color.TextActive : Color.TextPrimary};
+  background: ${({ theme, $selected }) => $selected ? semanticColor(theme, "SurfaceAccentStatic", Color.CorePurple100) : "transparent"};
+  color: ${({ theme, $selected }) => $selected ? semanticColor(theme, "FgAccentStatic", Color.TextActive) : semanticColor(theme, "FgPrimary", Color.TextPrimary)};
   font-family: inherit;
   text-align: left;
   cursor: pointer;
 
   &:hover {
-    background: ${({ $selected }) => $selected ? Color.CorePurple100 : Color.BackgroundSecondary};
+    background: ${({ theme, $selected }) => $selected ? semanticColor(theme, "SurfaceAccentStatic", Color.CorePurple100) : semanticColor(theme, "ActionNeutral", Color.BackgroundSecondary)};
   }
 
   &:focus-visible {
-    outline: 2px solid ${Color.BorderFocus};
+    outline: 2px solid ${({ theme }) => semanticColor(theme, "BorderFocus", Color.BorderFocus)};
     outline-offset: 1px;
   }
 
@@ -2587,19 +2590,19 @@ const TriggerWrapper = styled.span`
 
   & button {
     background-color: transparent;
-    color: ${({ theme }) => theme.color.text.secondary};
+    color: ${({ theme }) => semanticColor(theme, "FgSecondary", theme.color.text.secondary)};
   }
 
   & button:hover,
   & button:active {
     background-color: transparent;
-    color: ${({ theme }) => theme.color.text.primary};
+    color: ${({ theme }) => semanticColor(theme, "FgPrimary", theme.color.text.primary)};
   }
 
   ${({ $isOpen, theme }) => $isOpen && css`
       & button {
         background-color: transparent;
-        color: ${theme.color.text.primary};
+        color: ${semanticColor(theme, "FgPrimary", theme.color.text.primary)};
       }
     `}
 `;
@@ -2665,17 +2668,20 @@ const PillRoot = styled.span`
      ring is drawn on the whole pill via :focus-within. */
   ${focusWithinOutline};
 
-  ${({ $variant }) => $variant === "active" ? css`
-          background-color: ${Color.CorePurple100};
-          color: ${Color.TextActive};
+  ${({ theme, $variant }) => {
+	const tokens = semanticTokens(theme);
+	return $variant === "active" ? css`
+          background-color: ${tokens ? withAlpha(tokens.SurfaceAccent, tokens.Opacity25) : Color.CorePurple100};
+          color: ${semanticColor(theme, "FgAccent", Color.TextActive)};
         ` : css`
-          background-color: ${Color.BackgroundSecondary};
-          color: ${Color.TextPrimary};
+          background-color: ${semanticColor(theme, "SurfaceSubtle", Color.BackgroundSecondary)};
+          color: ${semanticColor(theme, "FgPrimary", Color.TextPrimary)};
 
           &:hover {
-            background-color: ${Color.BackgroundLabelGrey};
+            background-color: ${semanticColor(theme, "ActionOutlineHover", Color.BackgroundLabelGrey)};
           }
-        `}
+        `;
+}}
 `;
 /**
 * The clickable body of the pill. Suppresses its own focus outline
@@ -2750,7 +2756,10 @@ const DismissButton$1 = styled.button`
   cursor: pointer;
 
   &:hover {
-    background-color: ${Color.BackgroundButtonTextHover};
+    background-color: ${({ theme }) => {
+	const tokens = semanticTokens(theme);
+	return tokens ? withAlpha(tokens.ActionNeutralHover, tokens.Opacity25) : Color.BackgroundButtonTextHover;
+}};
   }
 
   ${focusOutline};
@@ -2761,7 +2770,10 @@ const DismissButton$1 = styled.button`
   }
 
   ${PillRoot}[data-variant='active'] &:hover {
-    background-color: ${Color.CorePurple200};
+    background-color: ${({ theme }) => {
+	const tokens = semanticTokens(theme);
+	return tokens ? withAlpha(tokens.FeedbackAccent1Static, tokens.Opacity25) : Color.CorePurple200;
+}};
   }
 `;
 const PillShell = forwardRef(function PillShell({ variant, children, bodyAriaLabel, onBodyClick, onDismiss, dismissAriaLabel, size, ...rest }, ref) {
@@ -2836,8 +2848,8 @@ const ValueChip = styled.span`
   font-size: ${({ $size }) => FILTER_SIZE_TOKENS[$size].fontSize};
   line-height: ${({ $size }) => FILTER_SIZE_TOKENS[$size].lineHeight};
 
-  background-color: ${({ $variant }) => $variant === "active" ? Color.CorePurple200 : Color.CoreSlate200};
-  color: ${({ $variant }) => $variant === "active" ? Color.TextActive : Color.TextPrimary};
+  background-color: ${({ theme, $variant }) => $variant === "active" ? semanticColor(theme, "FeedbackAccent1Static", Color.CorePurple200) : semanticColor(theme, "FeedbackNeutral2", Color.CoreSlate200)};
+  color: ${({ theme, $variant }) => $variant === "active" ? semanticColor(theme, "FgAccentStatic", Color.TextActive) : semanticColor(theme, "FgPrimary", Color.TextPrimary)};
 `;
 const OverflowChip = styled(ValueChip)`
   flex: 0 0 auto;
@@ -2962,13 +2974,13 @@ const HeaderRow = styled(HStack).attrs({
   padding: 0 ${Spacing[1]};
   font-size: ${({ $size }) => FILTER_SIZE_TOKENS[$size].fontSize};
   line-height: ${({ $size }) => FILTER_SIZE_TOKENS[$size].lineHeight};
-  color: ${Color.TextSecondary};
+  color: ${({ theme }) => semanticColor(theme, "FgSecondary", Color.TextSecondary)};
   white-space: nowrap;
 `;
 const FieldTypeLabel = styled.span`
   font-size: ${({ $size }) => FILTER_SIZE_TOKENS[$size].fontSize};
   line-height: ${({ $size }) => FILTER_SIZE_TOKENS[$size].lineHeight};
-  color: ${Color.TextSecondary};
+  color: ${({ theme }) => semanticColor(theme, "FgSecondary", Color.TextSecondary)};
   white-space: nowrap;
   flex: 0 1 auto;
   min-width: 0;
@@ -2991,23 +3003,23 @@ const InlineOperatorTrigger = styled.button`
   border: 0;
   border-radius: ${BorderRadius.Sm};
   appearance: none;
-  background: transparent;
-  color: ${Color.TextPrimary};
+  background: ${transparent};
+  color: ${({ theme }) => semanticColor(theme, "FgPrimary", Color.TextPrimary)};
   font-family: inherit;
   font-size: ${({ $size }) => FILTER_SIZE_TOKENS[$size].fontSize};
   line-height: ${({ $size }) => FILTER_SIZE_TOKENS[$size].lineHeight};
   cursor: pointer;
 
   &:hover {
-    background: ${Color.BackgroundSecondary};
+    background: ${({ theme }) => semanticColor(theme, "SurfaceHover", Color.BackgroundSecondary)};
   }
 
   &[data-state='open'] {
-    background: ${Color.BackgroundLabelGrey};
+    background: ${({ theme }) => semanticColor(theme, "ActionOutlineHover", Color.BackgroundLabelGrey)};
   }
 
   &:focus-visible {
-    outline: 2px solid ${Color.BorderFocus};
+    outline: 2px solid ${({ theme }) => semanticColor(theme, "BorderFocus", Color.BorderFocus)};
     outline-offset: 1px;
   }
 
@@ -3025,8 +3037,8 @@ const Footer = styled(HStack).attrs({
 	spacing: Spacing[1]
 })`
   padding: 6px ${Spacing[2]};
-  border-top: 1px solid ${Color.BorderDivider};
-  color: ${Color.TextSecondary};
+  border-top: 1px solid ${({ theme }) => semanticColor(theme, "BorderSubtle", Color.BorderDivider)};
+  color: ${({ theme }) => semanticColor(theme, "FgSecondary", Color.TextSecondary)};
   ${paragraphMixins.xs};
 
   svg {
@@ -3161,8 +3173,8 @@ const CountChip = styled.span`
   line-height: ${({ $size }) => FILTER_SIZE_TOKENS[$size].lineHeight};
   flex: 0 0 auto;
 
-  background-color: ${({ $variant }) => $variant === "active" ? Color.CorePurple200 : Color.CoreSlate200};
-  color: ${({ $variant }) => $variant === "active" ? Color.TextActive : Color.TextPrimary};
+  background-color: ${({ theme, $variant }) => $variant === "active" ? semanticColor(theme, "FeedbackAccent1Static", Color.CorePurple200) : semanticColor(theme, "FeedbackNeutral2", Color.CoreSlate200)};
+  color: ${({ theme, $variant }) => $variant === "active" ? semanticColor(theme, "FgAccentStatic", Color.TextActive) : semanticColor(theme, "FgPrimary", Color.TextPrimary)};
 `;
 /**
 * Always-visible filter pill that owns the entire compound (DNF) expression.
@@ -3724,7 +3736,7 @@ const PillsScrollTrack = styled.div`
 const Divider = styled.div`
   width: 1px;
   height: ${({ $size }) => FILTER_SIZE_TOKENS[$size].controlHeight};
-  background: ${Color.BorderDivider};
+  background: ${({ theme }) => semanticColor(theme, "BorderSubtle", Color.BorderDivider)};
   flex: 0 0 auto;
   margin: 0 ${({ $flush }) => $flush ? 0 : Spacing[1]};
 `;
@@ -4263,6 +4275,6 @@ function decodeBase64(input) {
 	return decodeURIComponent(escape(atob(input)));
 }
 //#endregion
-export { TableViewConfiguration as A, isRangeOperator as C, TableControlsContext as D, dateRuleIntent as E, TableControls as M, ControlBar as N, TableControlsProvider as O, DataTableCompactBar as P, isCompleteDateRange as S, reconcileValueForOperator as T, resolveDateRangeRuleValue as _, encodeFilterStateToUrlParam as a, getOperatorsForField as b, FilterBar_default as c, isFilterStateV2 as d, pruneToRegistry as f, useFilterBarSize as g, resolveValueControl as h, decodeFilterStateFromUrl as i, TableViewConfigurationDropdown as j, useTableControls as k, useFilterStateV2 as l, isEmptyState as m, applyFilterStateToSearchParams as n, FieldRegistry as o, EMPTY_FILTER_STATE as p, decodeFilterStateFromString as r, buildFieldRegistry as s, FILTER_STATE_URL_PARAM as t, hasCompleteValue as u, emptyValueForRule as v, isValuelessOperator as w, getOperatorsForType as x, getDefaultOperatorForType as y };
+export { TableControlsProvider as A, getOperatorsForType as C, reconcileValueForOperator as D, isValuelessOperator as E, ControlBar as F, DataTableCompactBar as I, TableViewConfiguration as M, TableViewConfigurationDropdown as N, dateRuleIntent as O, TableControls as P, getOperatorsForField as S, isRangeOperator as T, FILTER_SIZE_TOKENS as _, encodeFilterStateToUrlParam as a, emptyValueForRule as b, FilterBar_default as c, isFilterStateV2 as d, pruneToRegistry as f, resolveValueControl as g, PillShell as h, decodeFilterStateFromUrl as i, useTableControls as j, TableControlsContext as k, useFilterStateV2 as l, isEmptyState as m, applyFilterStateToSearchParams as n, FieldRegistry as o, EMPTY_FILTER_STATE as p, decodeFilterStateFromString as r, buildFieldRegistry as s, FILTER_STATE_URL_PARAM as t, hasCompleteValue as u, useFilterBarSize as v, isCompleteDateRange as w, getDefaultOperatorForType as x, resolveDateRangeRuleValue as y };
 
-//# sourceMappingURL=TableControls-WUNbzSNq.mjs.map
+//# sourceMappingURL=TableControls-DplArh-9.mjs.map