@inversestudio/design-tokens 1.0.17 → 1.0.19

package/dist/css/tokens.css

@@ -104,7 +104,9 @@
   --ids-border-action-secondary: 2px solid #2d2f35;
   --ids-border-action-disabled: 2px solid #adaeb3;
   --ids-border-action-tertiary: 2px solid #00000000;
+  --ids-border-action-item-selected: 2px solid #3a64b8;
   --ids-border-default: 1px solid #8e9099;
+  --ids-border-subtle: 1px solid #ebebef;
   --ids-border-disabled: 1px solid #adaeb3;
   --ids-border-focused: 2px solid #7eaaff;
   --ids-color-background-default: #fafafb;
@@ -145,16 +147,23 @@
   --ids-color-field-pressed: #e0e1e4;
   --ids-color-field-onfield: #2d2f35;
   --ids-color-field-onfieldmuted: #4d5057;
-  --ids-color-navigation-default: #00000000;
-  --ids-color-navigation-hover: #e6edfb;
-  --ids-color-navigation-pressed: #d1def8;
-  --ids-color-navigation-onnavigation: #2d2f35;
+  --ids-color-item-unselected-default: #00000000;
+  --ids-color-item-unselected-hover: #e6edfb;
+  --ids-color-item-unselected-pressed: #d1def8;
+  --ids-color-item-unselected-onnavigation: #2d2f35;
+  --ids-color-item-unselected-onnavigationdisabled: #8e9099;
+  --ids-color-item-selected-default: #00000000;
+  --ids-color-item-selected-hover: #e6edfb;
+  --ids-color-item-selected-pressed: #d1def8;
+  --ids-color-item-selected-onnavigation: #3a64b8;
+  --ids-color-item-selected-onnavigationdisabled: #8e9099;
   --ids-color-border-transparent: #00000000;
   --ids-color-border-strong: #2d2f35;
   --ids-color-border-default: #8e9099;
   --ids-color-border-muted: #c5c6cb;
-  --ids-color-border-subtle: #F8F8FA;
+  --ids-color-border-subtle: #ebebef;
   --ids-color-border-disabled: #adaeb3;
+  --ids-color-border-selected: #3a64b8;
   --ids-color-border-focus: #7eaaff;
   --ids-color-boxshadow-alpha16: lch(5.0543 1.8805 272.92 / 0.16);
   --ids-color-boxshadow-alpha24: lch(5.0543 1.8805 272.92 / 0.24);

package/dist/css/tokens.dark.css

@@ -104,7 +104,9 @@
   --ids-border-action-secondary: 2px solid #2d2f35;
   --ids-border-action-disabled: 2px solid #adaeb3;
   --ids-border-action-tertiary: 2px solid #00000000;
+  --ids-border-action-item-selected: 2px solid #3a64b8;
   --ids-border-default: 1px solid #8e9099;
+  --ids-border-subtle: 1px solid #ebebef;
   --ids-border-disabled: 1px solid #adaeb3;
   --ids-border-focused: 2px solid #7eaaff;
   --ids-color-background-default: #fafafb;
@@ -145,16 +147,23 @@
   --ids-color-field-pressed: #e0e1e4;
   --ids-color-field-onfield: #2d2f35;
   --ids-color-field-onfieldmuted: #4d5057;
-  --ids-color-navigation-default: #00000000;
-  --ids-color-navigation-hover: #e6edfb;
-  --ids-color-navigation-pressed: #d1def8;
-  --ids-color-navigation-onnavigation: #2d2f35;
+  --ids-color-item-unselected-default: #00000000;
+  --ids-color-item-unselected-hover: #e6edfb;
+  --ids-color-item-unselected-pressed: #d1def8;
+  --ids-color-item-unselected-onnavigation: #2d2f35;
+  --ids-color-item-unselected-onnavigationdisabled: #8e9099;
+  --ids-color-item-selected-default: #00000000;
+  --ids-color-item-selected-hover: #e6edfb;
+  --ids-color-item-selected-pressed: #d1def8;
+  --ids-color-item-selected-onnavigation: #3a64b8;
+  --ids-color-item-selected-onnavigationdisabled: #8e9099;
   --ids-color-border-transparent: #00000000;
   --ids-color-border-strong: #2d2f35;
   --ids-color-border-default: #8e9099;
   --ids-color-border-muted: #c5c6cb;
-  --ids-color-border-subtle: #F8F8FA;
+  --ids-color-border-subtle: #ebebef;
   --ids-color-border-disabled: #adaeb3;
+  --ids-color-border-selected: #3a64b8;
   --ids-color-border-focus: #7eaaff;
   --ids-color-boxshadow-alpha16: lch(5.0543 1.8805 272.92 / 0.16);
   --ids-color-boxshadow-alpha24: lch(5.0543 1.8805 272.92 / 0.24);

package/dist/css/tokens.light.css

@@ -104,7 +104,9 @@
   --ids-border-action-secondary: 2px solid #2d2f35;
   --ids-border-action-disabled: 2px solid #adaeb3;
   --ids-border-action-tertiary: 2px solid #00000000;
+  --ids-border-action-item-selected: 2px solid #3a64b8;
   --ids-border-default: 1px solid #8e9099;
+  --ids-border-subtle: 1px solid #ebebef;
   --ids-border-disabled: 1px solid #adaeb3;
   --ids-border-focused: 2px solid #7eaaff;
   --ids-color-background-default: #fafafb;
@@ -145,16 +147,23 @@
   --ids-color-field-pressed: #e0e1e4;
   --ids-color-field-onfield: #2d2f35;
   --ids-color-field-onfieldmuted: #4d5057;
-  --ids-color-navigation-default: #00000000;
-  --ids-color-navigation-hover: #e6edfb;
-  --ids-color-navigation-pressed: #d1def8;
-  --ids-color-navigation-onnavigation: #2d2f35;
+  --ids-color-item-unselected-default: #00000000;
+  --ids-color-item-unselected-hover: #e6edfb;
+  --ids-color-item-unselected-pressed: #d1def8;
+  --ids-color-item-unselected-onnavigation: #2d2f35;
+  --ids-color-item-unselected-onnavigationdisabled: #8e9099;
+  --ids-color-item-selected-default: #00000000;
+  --ids-color-item-selected-hover: #e6edfb;
+  --ids-color-item-selected-pressed: #d1def8;
+  --ids-color-item-selected-onnavigation: #3a64b8;
+  --ids-color-item-selected-onnavigationdisabled: #8e9099;
   --ids-color-border-transparent: #00000000;
   --ids-color-border-strong: #2d2f35;
   --ids-color-border-default: #8e9099;
   --ids-color-border-muted: #c5c6cb;
-  --ids-color-border-subtle: #F8F8FA;
+  --ids-color-border-subtle: #ebebef;
   --ids-color-border-disabled: #adaeb3;
+  --ids-color-border-selected: #3a64b8;
   --ids-color-border-focus: #7eaaff;
   --ids-color-boxshadow-alpha16: lch(5.0543 1.8805 272.92 / 0.16);
   --ids-color-boxshadow-alpha24: lch(5.0543 1.8805 272.92 / 0.24);

package/dist/esm/tokens.dark.js

@@ -123,11 +123,21 @@ export const idsBorderActionTertiary = {
   width: "2px",
   style: "solid",
 }; // SEMANTIC - Teretiary border, invisible. Use for: tertiary call-to-action buttons.
+export const idsBorderActionItemSelected = {
+  color: "#3a64b8",
+  width: "2px",
+  style: "solid",
+}; // SEMANTIC – Border for selected items, displayed at the bottom.
 export const idsBorderDefault = {
   color: "#8e9099",
   width: "1px",
   style: "solid",
 }; // SEMANTIC – Default border element with 3:1 contrast against all backgrounds and surfaces. Use for: Controls and input fields.
+export const idsBorderSubtle = {
+  color: "#ebebef",
+  width: "1px",
+  style: "solid",
+}; // SEMANTIC – Subtle border element with low contrast as decorator. Use for: Dividers.
 export const idsBorderDisabled = {
   color: "#adaeb3",
   width: "1px",
@@ -157,35 +167,42 @@ export const idsColorActionTertiaryHover = "#e6edfb"; // SEMANTIC - Background c
 export const idsColorActionTertiaryPressed = "#d1def8"; // SEMANTIC - Background color for tertiary element pressed state. Use for: transparent button active.
 export const idsColorActionTertiaryOntertiary = "#2d2f35"; // SEMANTIC - Foreground color for text/icon ON tertiary backgrounds. Use for: all tertiary button texts and icons.
 export const idsColorActionDisabledDefault = "#adaeb3"; // SEMANTIC - Disabled element background. Use for: Disabled backgrounds of primary action components.
-export const idsColorActionDisabledMuted = "#00000000"; // SEMANTIC - Disabled element background with less affordance. Use for: Disabled backgrounds of secondary and tertiary action components.
+export const idsColorActionDisabledMuted = "#00000000"; // SEMANTIC - Transparent disabled action background. Use for: Disabled backgrounds in secondary and tertiary action components.
 export const idsColorActionDisabledOndisabled = "#707784"; // SEMANTIC - Text/icon ON disabled backgrounds.
 export const idsColorControlUnselectedDefault = "#F8F8FA"; // SEMANTIC - Background color for the default state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
 export const idsColorControlUnselectedHover = "#e6edfb"; // SEMANTIC - Background color for the hover state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
 export const idsColorControlUnselectedPressed = "#d1def8"; // SEMANTIC - Background color for the pressed state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
 export const idsColorControlUnselectedDisabled = "#e0e1e4"; // SEMANTIC - Background color for the pressed state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
-export const idsColorControlUnselectedIndicatorDefault = "#ffffff"; // SEMANTIC - Background color for elements on top of the control layer. Use for: Knobs in switches.
-export const idsColorControlUnselectedIndicatorDisabled = "#c5c6cb"; // SEMANTIC - Background color for elements on top of the control layer. Use for: Knobs in switches.
+export const idsColorControlUnselectedIndicatorDefault = "#ffffff"; // SEMANTIC - Fill color for the interactive knob within switches and sliders.
+export const idsColorControlUnselectedIndicatorDisabled = "#c5c6cb"; // SEMANTIC - Fill color for the interactive knob in disabled state within switches and sliders.
 export const idsColorControlSelectedDefault = "#4d5057"; // SEMANTIC - Background color for the default state of controls that are selected/on. Use for: Switches, checkboxes, radio buttons, segmented controls
 export const idsColorControlSelectedHover = "#707784"; // SEMANTIC - Background color for the hover state of controls that are selected/on. Use for: Switches, checkboxes, radio buttons, segmented controls
 export const idsColorControlSelectedPressed = "#101114"; // SEMANTIC - Background color for the pressed state of controls that are selected/on. Use for: Switches, checkboxes, radio buttons, segmented controls
 export const idsColorControlSelectedDisabled = "#c5c6cb"; // SEMANTIC - Background color for the disabled state of controlsthat are selected/on. Use for: Switches, checkboxes, radio buttons, segmented controls
-export const idsColorControlSelectedIndicatorDefault = "#ffffff"; // SEMANTIC - Background color for elements on top of the control layer. Use for: Knobs in switches.
-export const idsColorControlSelectedIndicatorDisabled = "#adaeb3"; // SEMANTIC - Background color for elements on top of the control layer. Use for: Knobs in switches.
+export const idsColorControlSelectedIndicatorDefault = "#ffffff"; // SEMANTIC - Fill color for the interactive knob within switches and sliders.
+export const idsColorControlSelectedIndicatorDisabled = "#adaeb3"; // SEMANTIC - Fill color for the interactive knob in disabled state within switches and sliders.
 export const idsColorFieldDefault = "#F8F8FA"; // SEMANTIC - Background color for the default state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
 export const idsColorFieldHover = "#F8F8FA"; // SEMANTIC - Background color for the hover state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
 export const idsColorFieldPressed = "#e0e1e4"; // SEMANTIC - Background color for the pressed state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
 export const idsColorFieldOnfield = "#2d2f35"; // SEMANTIC - Foreground color for text/icon on input fields. Use for: Non-empty state of input fields.
 export const idsColorFieldOnfieldmuted = "#4d5057"; // SEMANTIC - Foreground color for text/icon on input fields. Use for: Default state of input fields.
-export const idsColorNavigationDefault = "#00000000";
-export const idsColorNavigationHover = "#e6edfb";
-export const idsColorNavigationPressed = "#d1def8";
-export const idsColorNavigationOnnavigation = "#2d2f35";
+export const idsColorItemUnselectedDefault = "#00000000";
+export const idsColorItemUnselectedHover = "#e6edfb";
+export const idsColorItemUnselectedPressed = "#d1def8";
+export const idsColorItemUnselectedOnnavigation = "#2d2f35";
+export const idsColorItemUnselectedOnnavigationdisabled = "#8e9099";
+export const idsColorItemSelectedDefault = "#00000000";
+export const idsColorItemSelectedHover = "#e6edfb";
+export const idsColorItemSelectedPressed = "#d1def8";
+export const idsColorItemSelectedOnnavigation = "#3a64b8";
+export const idsColorItemSelectedOnnavigationdisabled = "#8e9099";
 export const idsColorBorderTransparent = "#00000000"; // SEMANTIC - Transparent border. Use for: Composite border tokens that require transparent color.
 export const idsColorBorderStrong = "#2d2f35"; // SEMANTIC - Strong border. Use for: Composite border tokens that require a dark border color.
 export const idsColorBorderDefault = "#8e9099"; // SEMANTIC - Muted border. Use for: Composite border tokens for secondary containers, tables.
 export const idsColorBorderMuted = "#c5c6cb"; // SEMANTIC - Muted border. Use for: Composite border tokens for secondary containers, tables.
-export const idsColorBorderSubtle = "#F8F8FA"; // SEMANTIC - Subtle border. Use for: Composite border tokens for hairline dividers.
+export const idsColorBorderSubtle = "#ebebef"; // SEMANTIC - Subtle border. Use for: Composite border tokens for hairline dividers.
 export const idsColorBorderDisabled = "#adaeb3"; // SEMANTIC - Disabled border. Use for: Composite border tokens for disabled states.
+export const idsColorBorderSelected = "#3a64b8"; // SEMANTIC - Disabled border. Use for: Composite border tokens for disabled states.
 export const idsColorBorderFocus = "#7eaaff"; // SEMANTIC - Focus ring color. Use for: Composite border tokens that are used for keyboard focus on all interactive elements.
 export const idsColorBoxshadowAlpha16 = "lch(5.0543 1.8805 272.92 / 0.16)"; // Box-shadow color with 16% opacity.
 export const idsColorBoxshadowAlpha24 = "lch(5.0543 1.8805 272.92 / 0.24)"; // Box-shadow color with 24% opacity.

package/dist/esm/tokens.js

@@ -123,11 +123,21 @@ export const idsBorderActionTertiary = {
   width: "2px",
   style: "solid",
 }; // SEMANTIC - Teretiary border, invisible. Use for: tertiary call-to-action buttons.
+export const idsBorderActionItemSelected = {
+  color: "#3a64b8",
+  width: "2px",
+  style: "solid",
+}; // SEMANTIC – Border for selected items, displayed at the bottom.
 export const idsBorderDefault = {
   color: "#8e9099",
   width: "1px",
   style: "solid",
 }; // SEMANTIC – Default border element with 3:1 contrast against all backgrounds and surfaces. Use for: Controls and input fields.
+export const idsBorderSubtle = {
+  color: "#ebebef",
+  width: "1px",
+  style: "solid",
+}; // SEMANTIC – Subtle border element with low contrast as decorator. Use for: Dividers.
 export const idsBorderDisabled = {
   color: "#adaeb3",
   width: "1px",
@@ -163,29 +173,36 @@ export const idsColorControlUnselectedDefault = "#F8F8FA"; // SEMANTIC - Backgro
 export const idsColorControlUnselectedHover = "#e6edfb"; // SEMANTIC - Background color for the hover state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
 export const idsColorControlUnselectedPressed = "#d1def8"; // SEMANTIC - Background color for the pressed state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
 export const idsColorControlUnselectedDisabled = "#e0e1e4"; // SEMANTIC - Background color for the pressed state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
-export const idsColorControlUnselectedIndicatorDefault = "#ffffff"; // SEMANTIC - Background color for elements on top of the control layer. Use for: Knobs in switches.
-export const idsColorControlUnselectedIndicatorDisabled = "#c5c6cb"; // SEMANTIC - Background color for elements on top of the control layer. Use for: Knobs in switches.
+export const idsColorControlUnselectedIndicatorDefault = "#ffffff"; // SEMANTIC - Fill color for the interactive knob within switches and sliders.
+export const idsColorControlUnselectedIndicatorDisabled = "#c5c6cb"; // SEMANTIC - Fill color for the interactive knob in disabled state within switches and sliders.
 export const idsColorControlSelectedDefault = "#4d5057"; // SEMANTIC - Background color for the default state of controls that are selected/on. Use for: Switches, checkboxes, radio buttons, segmented controls
 export const idsColorControlSelectedHover = "#707784"; // SEMANTIC - Background color for the hover state of controls that are selected/on. Use for: Switches, checkboxes, radio buttons, segmented controls
 export const idsColorControlSelectedPressed = "#101114"; // SEMANTIC - Background color for the pressed state of controls that are selected/on. Use for: Switches, checkboxes, radio buttons, segmented controls
 export const idsColorControlSelectedDisabled = "#c5c6cb"; // SEMANTIC - Background color for the disabled state of controlsthat are selected/on. Use for: Switches, checkboxes, radio buttons, segmented controls
-export const idsColorControlSelectedIndicatorDefault = "#ffffff"; // SEMANTIC - Background color for elements on top of the control layer. Use for: Knobs in switches.
-export const idsColorControlSelectedIndicatorDisabled = "#adaeb3"; // SEMANTIC - Background color for elements on top of the control layer. Use for: Knobs in switches.
+export const idsColorControlSelectedIndicatorDefault = "#ffffff"; // SEMANTIC - Fill color for the interactive knob within switches and sliders.
+export const idsColorControlSelectedIndicatorDisabled = "#adaeb3"; // SEMANTIC - Fill color for the interactive knob in disabled state within switches and sliders.
 export const idsColorFieldDefault = "#F8F8FA"; // SEMANTIC - Background color for the default state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
 export const idsColorFieldHover = "#F8F8FA"; // SEMANTIC - Background color for the hover state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
 export const idsColorFieldPressed = "#e0e1e4"; // SEMANTIC - Background color for the pressed state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
 export const idsColorFieldOnfield = "#2d2f35"; // SEMANTIC - Foreground color for text/icon on input fields. Use for: Non-empty state of input fields.
 export const idsColorFieldOnfieldmuted = "#4d5057"; // SEMANTIC - Foreground color for text/icon on input fields. Use for: Default state of input fields.
-export const idsColorNavigationDefault = "#00000000";
-export const idsColorNavigationHover = "#e6edfb";
-export const idsColorNavigationPressed = "#d1def8";
-export const idsColorNavigationOnnavigation = "#2d2f35";
+export const idsColorItemUnselectedDefault = "#00000000";
+export const idsColorItemUnselectedHover = "#e6edfb";
+export const idsColorItemUnselectedPressed = "#d1def8";
+export const idsColorItemUnselectedOnnavigation = "#2d2f35";
+export const idsColorItemUnselectedOnnavigationdisabled = "#8e9099";
+export const idsColorItemSelectedDefault = "#00000000";
+export const idsColorItemSelectedHover = "#e6edfb";
+export const idsColorItemSelectedPressed = "#d1def8";
+export const idsColorItemSelectedOnnavigation = "#3a64b8";
+export const idsColorItemSelectedOnnavigationdisabled = "#8e9099";
 export const idsColorBorderTransparent = "#00000000"; // SEMANTIC - Transparent border. Use for: Composite border tokens that require transparent color.
 export const idsColorBorderStrong = "#2d2f35"; // SEMANTIC - Strong border. Use for: Composite border tokens that require a dark border color.
 export const idsColorBorderDefault = "#8e9099"; // SEMANTIC - Muted border. Use for: Composite border tokens for secondary containers, tables.
 export const idsColorBorderMuted = "#c5c6cb"; // SEMANTIC - Muted border. Use for: Composite border tokens for secondary containers, tables.
-export const idsColorBorderSubtle = "#F8F8FA"; // SEMANTIC - Subtle border. Use for: Composite border tokens for hairline dividers.
+export const idsColorBorderSubtle = "#ebebef"; // SEMANTIC - Subtle border. Use for: Composite border tokens for hairline dividers.
 export const idsColorBorderDisabled = "#adaeb3"; // SEMANTIC - Disabled border. Use for: Composite border tokens for disabled states.
+export const idsColorBorderSelected = "#3a64b8"; // SEMANTIC - Disabled border. Use for: Composite border tokens for disabled states.
 export const idsColorBorderFocus = "#7eaaff"; // SEMANTIC - Focus ring color. Use for: Composite border tokens that are used for keyboard focus on all interactive elements.
 export const idsColorBoxshadowAlpha16 = "lch(5.0543 1.8805 272.92 / 0.16)"; // Box-shadow color with 16% opacity.
 export const idsColorBoxshadowAlpha24 = "lch(5.0543 1.8805 272.92 / 0.24)"; // Box-shadow color with 24% opacity.

package/dist/esm/tokens.light.js

@@ -123,11 +123,21 @@ export const idsBorderActionTertiary = {
   width: "2px",
   style: "solid",
 }; // SEMANTIC - Teretiary border, invisible. Use for: tertiary call-to-action buttons.
+export const idsBorderActionItemSelected = {
+  color: "#3a64b8",
+  width: "2px",
+  style: "solid",
+}; // SEMANTIC – Border for selected items, displayed at the bottom.
 export const idsBorderDefault = {
   color: "#8e9099",
   width: "1px",
   style: "solid",
 }; // SEMANTIC – Default border element with 3:1 contrast against all backgrounds and surfaces. Use for: Controls and input fields.
+export const idsBorderSubtle = {
+  color: "#ebebef",
+  width: "1px",
+  style: "solid",
+}; // SEMANTIC – Subtle border element with low contrast as decorator. Use for: Dividers.
 export const idsBorderDisabled = {
   color: "#adaeb3",
   width: "1px",
@@ -163,29 +173,36 @@ export const idsColorControlUnselectedDefault = "#F8F8FA"; // SEMANTIC - Backgro
 export const idsColorControlUnselectedHover = "#e6edfb"; // SEMANTIC - Background color for the hover state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
 export const idsColorControlUnselectedPressed = "#d1def8"; // SEMANTIC - Background color for the pressed state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
 export const idsColorControlUnselectedDisabled = "#e0e1e4"; // SEMANTIC - Background color for the pressed state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
-export const idsColorControlUnselectedIndicatorDefault = "#ffffff"; // SEMANTIC - Background color for elements on top of the control layer. Use for: Knobs in switches.
-export const idsColorControlUnselectedIndicatorDisabled = "#c5c6cb"; // SEMANTIC - Background color for elements on top of the control layer. Use for: Knobs in switches.
+export const idsColorControlUnselectedIndicatorDefault = "#ffffff"; // SEMANTIC - Fill color for the interactive knob within switches and sliders.
+export const idsColorControlUnselectedIndicatorDisabled = "#c5c6cb"; // SEMANTIC - Fill color for the interactive knob in disabled state within switches and sliders.
 export const idsColorControlSelectedDefault = "#4d5057"; // SEMANTIC - Background color for the default state of controls that are selected/on. Use for: Switches, checkboxes, radio buttons, segmented controls
 export const idsColorControlSelectedHover = "#707784"; // SEMANTIC - Background color for the hover state of controls that are selected/on. Use for: Switches, checkboxes, radio buttons, segmented controls
 export const idsColorControlSelectedPressed = "#101114"; // SEMANTIC - Background color for the pressed state of controls that are selected/on. Use for: Switches, checkboxes, radio buttons, segmented controls
 export const idsColorControlSelectedDisabled = "#c5c6cb"; // SEMANTIC - Background color for the disabled state of controlsthat are selected/on. Use for: Switches, checkboxes, radio buttons, segmented controls
-export const idsColorControlSelectedIndicatorDefault = "#ffffff"; // SEMANTIC - Background color for elements on top of the control layer. Use for: Knobs in switches.
-export const idsColorControlSelectedIndicatorDisabled = "#adaeb3"; // SEMANTIC - Background color for elements on top of the control layer. Use for: Knobs in switches.
+export const idsColorControlSelectedIndicatorDefault = "#ffffff"; // SEMANTIC - Fill color for the interactive knob within switches and sliders.
+export const idsColorControlSelectedIndicatorDisabled = "#adaeb3"; // SEMANTIC - Fill color for the interactive knob in disabled state within switches and sliders.
 export const idsColorFieldDefault = "#F8F8FA"; // SEMANTIC - Background color for the default state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
 export const idsColorFieldHover = "#F8F8FA"; // SEMANTIC - Background color for the hover state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
 export const idsColorFieldPressed = "#e0e1e4"; // SEMANTIC - Background color for the pressed state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
 export const idsColorFieldOnfield = "#2d2f35"; // SEMANTIC - Foreground color for text/icon on input fields. Use for: Non-empty state of input fields.
 export const idsColorFieldOnfieldmuted = "#4d5057"; // SEMANTIC - Foreground color for text/icon on input fields. Use for: Default state of input fields.
-export const idsColorNavigationDefault = "#00000000";
-export const idsColorNavigationHover = "#e6edfb";
-export const idsColorNavigationPressed = "#d1def8";
-export const idsColorNavigationOnnavigation = "#2d2f35";
+export const idsColorItemUnselectedDefault = "#00000000";
+export const idsColorItemUnselectedHover = "#e6edfb";
+export const idsColorItemUnselectedPressed = "#d1def8";
+export const idsColorItemUnselectedOnnavigation = "#2d2f35";
+export const idsColorItemUnselectedOnnavigationdisabled = "#8e9099";
+export const idsColorItemSelectedDefault = "#00000000";
+export const idsColorItemSelectedHover = "#e6edfb";
+export const idsColorItemSelectedPressed = "#d1def8";
+export const idsColorItemSelectedOnnavigation = "#3a64b8";
+export const idsColorItemSelectedOnnavigationdisabled = "#8e9099";
 export const idsColorBorderTransparent = "#00000000"; // SEMANTIC - Transparent border. Use for: Composite border tokens that require transparent color.
 export const idsColorBorderStrong = "#2d2f35"; // SEMANTIC - Strong border. Use for: Composite border tokens that require a dark border color.
 export const idsColorBorderDefault = "#8e9099"; // SEMANTIC - Muted border. Use for: Composite border tokens for secondary containers, tables.
 export const idsColorBorderMuted = "#c5c6cb"; // SEMANTIC - Muted border. Use for: Composite border tokens for secondary containers, tables.
-export const idsColorBorderSubtle = "#F8F8FA"; // SEMANTIC - Subtle border. Use for: Composite border tokens for hairline dividers.
+export const idsColorBorderSubtle = "#ebebef"; // SEMANTIC - Subtle border. Use for: Composite border tokens for hairline dividers.
 export const idsColorBorderDisabled = "#adaeb3"; // SEMANTIC - Disabled border. Use for: Composite border tokens for disabled states.
+export const idsColorBorderSelected = "#3a64b8"; // SEMANTIC - Disabled border. Use for: Composite border tokens for disabled states.
 export const idsColorBorderFocus = "#7eaaff"; // SEMANTIC - Focus ring color. Use for: Composite border tokens that are used for keyboard focus on all interactive elements.
 export const idsColorBoxshadowAlpha16 = "lch(5.0543 1.8805 272.92 / 0.16)"; // Box-shadow color with 16% opacity.
 export const idsColorBoxshadowAlpha24 = "lch(5.0543 1.8805 272.92 / 0.24)"; // Box-shadow color with 24% opacity.

package/dist/js/tokens.dark.js

@@ -123,11 +123,21 @@ export const idsBorderActionTertiary = {
   width: "2px",
   style: "solid",
 }; // SEMANTIC - Teretiary border, invisible. Use for: tertiary call-to-action buttons.
+export const idsBorderActionItemSelected = {
+  color: "#3a64b8",
+  width: "2px",
+  style: "solid",
+}; // SEMANTIC – Border for selected items, displayed at the bottom.
 export const idsBorderDefault = {
   color: "#8e9099",
   width: "1px",
   style: "solid",
 }; // SEMANTIC – Default border element with 3:1 contrast against all backgrounds and surfaces. Use for: Controls and input fields.
+export const idsBorderSubtle = {
+  color: "#ebebef",
+  width: "1px",
+  style: "solid",
+}; // SEMANTIC – Subtle border element with low contrast as decorator. Use for: Dividers.
 export const idsBorderDisabled = {
   color: "#adaeb3",
   width: "1px",
@@ -157,35 +167,42 @@ export const idsColorActionTertiaryHover = "#e6edfb"; // SEMANTIC - Background c
 export const idsColorActionTertiaryPressed = "#d1def8"; // SEMANTIC - Background color for tertiary element pressed state. Use for: transparent button active.
 export const idsColorActionTertiaryOntertiary = "#2d2f35"; // SEMANTIC - Foreground color for text/icon ON tertiary backgrounds. Use for: all tertiary button texts and icons.
 export const idsColorActionDisabledDefault = "#adaeb3"; // SEMANTIC - Disabled element background. Use for: Disabled backgrounds of primary action components.
-export const idsColorActionDisabledMuted = "#00000000"; // SEMANTIC - Disabled element background with less affordance. Use for: Disabled backgrounds of secondary and tertiary action components.
+export const idsColorActionDisabledMuted = "#00000000"; // SEMANTIC - Transparent disabled action background. Use for: Disabled backgrounds in secondary and tertiary action components.
 export const idsColorActionDisabledOndisabled = "#707784"; // SEMANTIC - Text/icon ON disabled backgrounds.
 export const idsColorControlUnselectedDefault = "#F8F8FA"; // SEMANTIC - Background color for the default state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
 export const idsColorControlUnselectedHover = "#e6edfb"; // SEMANTIC - Background color for the hover state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
 export const idsColorControlUnselectedPressed = "#d1def8"; // SEMANTIC - Background color for the pressed state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
 export const idsColorControlUnselectedDisabled = "#e0e1e4"; // SEMANTIC - Background color for the pressed state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
-export const idsColorControlUnselectedIndicatorDefault = "#ffffff"; // SEMANTIC - Background color for elements on top of the control layer. Use for: Knobs in switches.
-export const idsColorControlUnselectedIndicatorDisabled = "#c5c6cb"; // SEMANTIC - Background color for elements on top of the control layer. Use for: Knobs in switches.
+export const idsColorControlUnselectedIndicatorDefault = "#ffffff"; // SEMANTIC - Fill color for the interactive knob within switches and sliders.
+export const idsColorControlUnselectedIndicatorDisabled = "#c5c6cb"; // SEMANTIC - Fill color for the interactive knob in disabled state within switches and sliders.
 export const idsColorControlSelectedDefault = "#4d5057"; // SEMANTIC - Background color for the default state of controls that are selected/on. Use for: Switches, checkboxes, radio buttons, segmented controls
 export const idsColorControlSelectedHover = "#707784"; // SEMANTIC - Background color for the hover state of controls that are selected/on. Use for: Switches, checkboxes, radio buttons, segmented controls
 export const idsColorControlSelectedPressed = "#101114"; // SEMANTIC - Background color for the pressed state of controls that are selected/on. Use for: Switches, checkboxes, radio buttons, segmented controls
 export const idsColorControlSelectedDisabled = "#c5c6cb"; // SEMANTIC - Background color for the disabled state of controlsthat are selected/on. Use for: Switches, checkboxes, radio buttons, segmented controls
-export const idsColorControlSelectedIndicatorDefault = "#ffffff"; // SEMANTIC - Background color for elements on top of the control layer. Use for: Knobs in switches.
-export const idsColorControlSelectedIndicatorDisabled = "#adaeb3"; // SEMANTIC - Background color for elements on top of the control layer. Use for: Knobs in switches.
+export const idsColorControlSelectedIndicatorDefault = "#ffffff"; // SEMANTIC - Fill color for the interactive knob within switches and sliders.
+export const idsColorControlSelectedIndicatorDisabled = "#adaeb3"; // SEMANTIC - Fill color for the interactive knob in disabled state within switches and sliders.
 export const idsColorFieldDefault = "#F8F8FA"; // SEMANTIC - Background color for the default state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
 export const idsColorFieldHover = "#F8F8FA"; // SEMANTIC - Background color for the hover state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
 export const idsColorFieldPressed = "#e0e1e4"; // SEMANTIC - Background color for the pressed state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
 export const idsColorFieldOnfield = "#2d2f35"; // SEMANTIC - Foreground color for text/icon on input fields. Use for: Non-empty state of input fields.
 export const idsColorFieldOnfieldmuted = "#4d5057"; // SEMANTIC - Foreground color for text/icon on input fields. Use for: Default state of input fields.
-export const idsColorNavigationDefault = "#00000000";
-export const idsColorNavigationHover = "#e6edfb";
-export const idsColorNavigationPressed = "#d1def8";
-export const idsColorNavigationOnnavigation = "#2d2f35";
+export const idsColorItemUnselectedDefault = "#00000000";
+export const idsColorItemUnselectedHover = "#e6edfb";
+export const idsColorItemUnselectedPressed = "#d1def8";
+export const idsColorItemUnselectedOnnavigation = "#2d2f35";
+export const idsColorItemUnselectedOnnavigationdisabled = "#8e9099";
+export const idsColorItemSelectedDefault = "#00000000";
+export const idsColorItemSelectedHover = "#e6edfb";
+export const idsColorItemSelectedPressed = "#d1def8";
+export const idsColorItemSelectedOnnavigation = "#3a64b8";
+export const idsColorItemSelectedOnnavigationdisabled = "#8e9099";
 export const idsColorBorderTransparent = "#00000000"; // SEMANTIC - Transparent border. Use for: Composite border tokens that require transparent color.
 export const idsColorBorderStrong = "#2d2f35"; // SEMANTIC - Strong border. Use for: Composite border tokens that require a dark border color.
 export const idsColorBorderDefault = "#8e9099"; // SEMANTIC - Muted border. Use for: Composite border tokens for secondary containers, tables.
 export const idsColorBorderMuted = "#c5c6cb"; // SEMANTIC - Muted border. Use for: Composite border tokens for secondary containers, tables.
-export const idsColorBorderSubtle = "#F8F8FA"; // SEMANTIC - Subtle border. Use for: Composite border tokens for hairline dividers.
+export const idsColorBorderSubtle = "#ebebef"; // SEMANTIC - Subtle border. Use for: Composite border tokens for hairline dividers.
 export const idsColorBorderDisabled = "#adaeb3"; // SEMANTIC - Disabled border. Use for: Composite border tokens for disabled states.
+export const idsColorBorderSelected = "#3a64b8"; // SEMANTIC - Disabled border. Use for: Composite border tokens for disabled states.
 export const idsColorBorderFocus = "#7eaaff"; // SEMANTIC - Focus ring color. Use for: Composite border tokens that are used for keyboard focus on all interactive elements.
 export const idsColorBoxshadowAlpha16 = "lch(5.0543 1.8805 272.92 / 0.16)"; // Box-shadow color with 16% opacity.
 export const idsColorBoxshadowAlpha24 = "lch(5.0543 1.8805 272.92 / 0.24)"; // Box-shadow color with 24% opacity.

package/dist/js/tokens.js

@@ -123,11 +123,21 @@ export const idsBorderActionTertiary = {
   width: "2px",
   style: "solid",
 }; // SEMANTIC - Teretiary border, invisible. Use for: tertiary call-to-action buttons.
+export const idsBorderActionItemSelected = {
+  color: "#3a64b8",
+  width: "2px",
+  style: "solid",
+}; // SEMANTIC – Border for selected items, displayed at the bottom.
 export const idsBorderDefault = {
   color: "#8e9099",
   width: "1px",
   style: "solid",
 }; // SEMANTIC – Default border element with 3:1 contrast against all backgrounds and surfaces. Use for: Controls and input fields.
+export const idsBorderSubtle = {
+  color: "#ebebef",
+  width: "1px",
+  style: "solid",
+}; // SEMANTIC – Subtle border element with low contrast as decorator. Use for: Dividers.
 export const idsBorderDisabled = {
   color: "#adaeb3",
   width: "1px",
@@ -163,29 +173,36 @@ export const idsColorControlUnselectedDefault = "#F8F8FA"; // SEMANTIC - Backgro
 export const idsColorControlUnselectedHover = "#e6edfb"; // SEMANTIC - Background color for the hover state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
 export const idsColorControlUnselectedPressed = "#d1def8"; // SEMANTIC - Background color for the pressed state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
 export const idsColorControlUnselectedDisabled = "#e0e1e4"; // SEMANTIC - Background color for the pressed state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
-export const idsColorControlUnselectedIndicatorDefault = "#ffffff"; // SEMANTIC - Background color for elements on top of the control layer. Use for: Knobs in switches.
-export const idsColorControlUnselectedIndicatorDisabled = "#c5c6cb"; // SEMANTIC - Background color for elements on top of the control layer. Use for: Knobs in switches.
+export const idsColorControlUnselectedIndicatorDefault = "#ffffff"; // SEMANTIC - Fill color for the interactive knob within switches and sliders.
+export const idsColorControlUnselectedIndicatorDisabled = "#c5c6cb"; // SEMANTIC - Fill color for the interactive knob in disabled state within switches and sliders.
 export const idsColorControlSelectedDefault = "#4d5057"; // SEMANTIC - Background color for the default state of controls that are selected/on. Use for: Switches, checkboxes, radio buttons, segmented controls
 export const idsColorControlSelectedHover = "#707784"; // SEMANTIC - Background color for the hover state of controls that are selected/on. Use for: Switches, checkboxes, radio buttons, segmented controls
 export const idsColorControlSelectedPressed = "#101114"; // SEMANTIC - Background color for the pressed state of controls that are selected/on. Use for: Switches, checkboxes, radio buttons, segmented controls
 export const idsColorControlSelectedDisabled = "#c5c6cb"; // SEMANTIC - Background color for the disabled state of controlsthat are selected/on. Use for: Switches, checkboxes, radio buttons, segmented controls
-export const idsColorControlSelectedIndicatorDefault = "#ffffff"; // SEMANTIC - Background color for elements on top of the control layer. Use for: Knobs in switches.
-export const idsColorControlSelectedIndicatorDisabled = "#adaeb3"; // SEMANTIC - Background color for elements on top of the control layer. Use for: Knobs in switches.
+export const idsColorControlSelectedIndicatorDefault = "#ffffff"; // SEMANTIC - Fill color for the interactive knob within switches and sliders.
+export const idsColorControlSelectedIndicatorDisabled = "#adaeb3"; // SEMANTIC - Fill color for the interactive knob in disabled state within switches and sliders.
 export const idsColorFieldDefault = "#F8F8FA"; // SEMANTIC - Background color for the default state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
 export const idsColorFieldHover = "#F8F8FA"; // SEMANTIC - Background color for the hover state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
 export const idsColorFieldPressed = "#e0e1e4"; // SEMANTIC - Background color for the pressed state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
 export const idsColorFieldOnfield = "#2d2f35"; // SEMANTIC - Foreground color for text/icon on input fields. Use for: Non-empty state of input fields.
 export const idsColorFieldOnfieldmuted = "#4d5057"; // SEMANTIC - Foreground color for text/icon on input fields. Use for: Default state of input fields.
-export const idsColorNavigationDefault = "#00000000";
-export const idsColorNavigationHover = "#e6edfb";
-export const idsColorNavigationPressed = "#d1def8";
-export const idsColorNavigationOnnavigation = "#2d2f35";
+export const idsColorItemUnselectedDefault = "#00000000";
+export const idsColorItemUnselectedHover = "#e6edfb";
+export const idsColorItemUnselectedPressed = "#d1def8";
+export const idsColorItemUnselectedOnnavigation = "#2d2f35";
+export const idsColorItemUnselectedOnnavigationdisabled = "#8e9099";
+export const idsColorItemSelectedDefault = "#00000000";
+export const idsColorItemSelectedHover = "#e6edfb";
+export const idsColorItemSelectedPressed = "#d1def8";
+export const idsColorItemSelectedOnnavigation = "#3a64b8";
+export const idsColorItemSelectedOnnavigationdisabled = "#8e9099";
 export const idsColorBorderTransparent = "#00000000"; // SEMANTIC - Transparent border. Use for: Composite border tokens that require transparent color.
 export const idsColorBorderStrong = "#2d2f35"; // SEMANTIC - Strong border. Use for: Composite border tokens that require a dark border color.
 export const idsColorBorderDefault = "#8e9099"; // SEMANTIC - Muted border. Use for: Composite border tokens for secondary containers, tables.
 export const idsColorBorderMuted = "#c5c6cb"; // SEMANTIC - Muted border. Use for: Composite border tokens for secondary containers, tables.
-export const idsColorBorderSubtle = "#F8F8FA"; // SEMANTIC - Subtle border. Use for: Composite border tokens for hairline dividers.
+export const idsColorBorderSubtle = "#ebebef"; // SEMANTIC - Subtle border. Use for: Composite border tokens for hairline dividers.
 export const idsColorBorderDisabled = "#adaeb3"; // SEMANTIC - Disabled border. Use for: Composite border tokens for disabled states.
+export const idsColorBorderSelected = "#3a64b8"; // SEMANTIC - Disabled border. Use for: Composite border tokens for disabled states.
 export const idsColorBorderFocus = "#7eaaff"; // SEMANTIC - Focus ring color. Use for: Composite border tokens that are used for keyboard focus on all interactive elements.
 export const idsColorBoxshadowAlpha16 = "lch(5.0543 1.8805 272.92 / 0.16)"; // Box-shadow color with 16% opacity.
 export const idsColorBoxshadowAlpha24 = "lch(5.0543 1.8805 272.92 / 0.24)"; // Box-shadow color with 24% opacity.

package/dist/js/tokens.light.js

@@ -123,11 +123,21 @@ export const idsBorderActionTertiary = {
   width: "2px",
   style: "solid",
 }; // SEMANTIC - Teretiary border, invisible. Use for: tertiary call-to-action buttons.
+export const idsBorderActionItemSelected = {
+  color: "#3a64b8",
+  width: "2px",
+  style: "solid",
+}; // SEMANTIC – Border for selected items, displayed at the bottom.
 export const idsBorderDefault = {
   color: "#8e9099",
   width: "1px",
   style: "solid",
 }; // SEMANTIC – Default border element with 3:1 contrast against all backgrounds and surfaces. Use for: Controls and input fields.
+export const idsBorderSubtle = {
+  color: "#ebebef",
+  width: "1px",
+  style: "solid",
+}; // SEMANTIC – Subtle border element with low contrast as decorator. Use for: Dividers.
 export const idsBorderDisabled = {
   color: "#adaeb3",
   width: "1px",
@@ -163,29 +173,36 @@ export const idsColorControlUnselectedDefault = "#F8F8FA"; // SEMANTIC - Backgro
 export const idsColorControlUnselectedHover = "#e6edfb"; // SEMANTIC - Background color for the hover state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
 export const idsColorControlUnselectedPressed = "#d1def8"; // SEMANTIC - Background color for the pressed state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
 export const idsColorControlUnselectedDisabled = "#e0e1e4"; // SEMANTIC - Background color for the pressed state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
-export const idsColorControlUnselectedIndicatorDefault = "#ffffff"; // SEMANTIC - Background color for elements on top of the control layer. Use for: Knobs in switches.
-export const idsColorControlUnselectedIndicatorDisabled = "#c5c6cb"; // SEMANTIC - Background color for elements on top of the control layer. Use for: Knobs in switches.
+export const idsColorControlUnselectedIndicatorDefault = "#ffffff"; // SEMANTIC - Fill color for the interactive knob within switches and sliders.
+export const idsColorControlUnselectedIndicatorDisabled = "#c5c6cb"; // SEMANTIC - Fill color for the interactive knob in disabled state within switches and sliders.
 export const idsColorControlSelectedDefault = "#4d5057"; // SEMANTIC - Background color for the default state of controls that are selected/on. Use for: Switches, checkboxes, radio buttons, segmented controls
 export const idsColorControlSelectedHover = "#707784"; // SEMANTIC - Background color for the hover state of controls that are selected/on. Use for: Switches, checkboxes, radio buttons, segmented controls
 export const idsColorControlSelectedPressed = "#101114"; // SEMANTIC - Background color for the pressed state of controls that are selected/on. Use for: Switches, checkboxes, radio buttons, segmented controls
 export const idsColorControlSelectedDisabled = "#c5c6cb"; // SEMANTIC - Background color for the disabled state of controlsthat are selected/on. Use for: Switches, checkboxes, radio buttons, segmented controls
-export const idsColorControlSelectedIndicatorDefault = "#ffffff"; // SEMANTIC - Background color for elements on top of the control layer. Use for: Knobs in switches.
-export const idsColorControlSelectedIndicatorDisabled = "#adaeb3"; // SEMANTIC - Background color for elements on top of the control layer. Use for: Knobs in switches.
+export const idsColorControlSelectedIndicatorDefault = "#ffffff"; // SEMANTIC - Fill color for the interactive knob within switches and sliders.
+export const idsColorControlSelectedIndicatorDisabled = "#adaeb3"; // SEMANTIC - Fill color for the interactive knob in disabled state within switches and sliders.
 export const idsColorFieldDefault = "#F8F8FA"; // SEMANTIC - Background color for the default state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
 export const idsColorFieldHover = "#F8F8FA"; // SEMANTIC - Background color for the hover state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
 export const idsColorFieldPressed = "#e0e1e4"; // SEMANTIC - Background color for the pressed state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
 export const idsColorFieldOnfield = "#2d2f35"; // SEMANTIC - Foreground color for text/icon on input fields. Use for: Non-empty state of input fields.
 export const idsColorFieldOnfieldmuted = "#4d5057"; // SEMANTIC - Foreground color for text/icon on input fields. Use for: Default state of input fields.
-export const idsColorNavigationDefault = "#00000000";
-export const idsColorNavigationHover = "#e6edfb";
-export const idsColorNavigationPressed = "#d1def8";
-export const idsColorNavigationOnnavigation = "#2d2f35";
+export const idsColorItemUnselectedDefault = "#00000000";
+export const idsColorItemUnselectedHover = "#e6edfb";
+export const idsColorItemUnselectedPressed = "#d1def8";
+export const idsColorItemUnselectedOnnavigation = "#2d2f35";
+export const idsColorItemUnselectedOnnavigationdisabled = "#8e9099";
+export const idsColorItemSelectedDefault = "#00000000";
+export const idsColorItemSelectedHover = "#e6edfb";
+export const idsColorItemSelectedPressed = "#d1def8";
+export const idsColorItemSelectedOnnavigation = "#3a64b8";
+export const idsColorItemSelectedOnnavigationdisabled = "#8e9099";
 export const idsColorBorderTransparent = "#00000000"; // SEMANTIC - Transparent border. Use for: Composite border tokens that require transparent color.
 export const idsColorBorderStrong = "#2d2f35"; // SEMANTIC - Strong border. Use for: Composite border tokens that require a dark border color.
 export const idsColorBorderDefault = "#8e9099"; // SEMANTIC - Muted border. Use for: Composite border tokens for secondary containers, tables.
 export const idsColorBorderMuted = "#c5c6cb"; // SEMANTIC - Muted border. Use for: Composite border tokens for secondary containers, tables.
-export const idsColorBorderSubtle = "#F8F8FA"; // SEMANTIC - Subtle border. Use for: Composite border tokens for hairline dividers.
+export const idsColorBorderSubtle = "#ebebef"; // SEMANTIC - Subtle border. Use for: Composite border tokens for hairline dividers.
 export const idsColorBorderDisabled = "#adaeb3"; // SEMANTIC - Disabled border. Use for: Composite border tokens for disabled states.
+export const idsColorBorderSelected = "#3a64b8"; // SEMANTIC - Disabled border. Use for: Composite border tokens for disabled states.
 export const idsColorBorderFocus = "#7eaaff"; // SEMANTIC - Focus ring color. Use for: Composite border tokens that are used for keyboard focus on all interactive elements.
 export const idsColorBoxshadowAlpha16 = "lch(5.0543 1.8805 272.92 / 0.16)"; // Box-shadow color with 16% opacity.
 export const idsColorBoxshadowAlpha24 = "lch(5.0543 1.8805 272.92 / 0.24)"; // Box-shadow color with 24% opacity.