@inversestudio/design-tokens 1.1.2 → 1.1.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (22) hide show
  1. package/dist/css/tokens.css +2 -2
  2. package/dist/css/tokens.dark.css +55 -55
  3. package/dist/css/tokens.light.css +2 -2
  4. package/dist/esm/tokens.dark.js +56 -56
  5. package/dist/esm/tokens.js +2 -2
  6. package/dist/esm/tokens.light.js +2 -2
  7. package/dist/js/tokens.dark.js +56 -56
  8. package/dist/js/tokens.js +2 -2
  9. package/dist/js/tokens.light.js +2 -2
  10. package/dist/json/tokens.dark.json +55 -55
  11. package/dist/json/tokens.dark.nested.json +55 -55
  12. package/dist/json/tokens.json +2 -2
  13. package/dist/json/tokens.light.json +2 -2
  14. package/dist/json/tokens.light.nested.json +2 -2
  15. package/dist/json/tokens.nested.json +2 -2
  16. package/dist/scss/_tokens.dark.scss +60 -60
  17. package/dist/scss/_tokens.light.scss +4 -4
  18. package/dist/scss/_tokens.scss +4 -4
  19. package/dist/types/tokens.d.ts +6 -6
  20. package/dist/types/tokens.dark.d.ts +103 -103
  21. package/dist/types/tokens.light.d.ts +6 -6
  22. package/package.json +1 -1
package/dist/css/tokens.css CHANGED
@@ -135,13 +135,13 @@
135
135
  --ids-color-control-unselected-hover: #e6edfb;
136
136
  --ids-color-control-unselected-pressed: #d1def8;
137
137
  --ids-color-control-unselected-disabled: #e0e1e4;
138
- --ids-color-control-unselected-indicator-default: #ffffff;
138
+ --ids-color-control-unselected-indicator-enabled: #ffffff;
139
139
  --ids-color-control-unselected-indicator-disabled: #c5c6cb;
140
140
  --ids-color-control-selected-default: #4d5057;
141
141
  --ids-color-control-selected-hover: #707784;
142
142
  --ids-color-control-selected-pressed: #101114;
143
143
  --ids-color-control-selected-disabled: #c5c6cb;
144
- --ids-color-control-selected-indicator-default: #ffffff;
144
+ --ids-color-control-selected-indicator-enabled: #ffffff;
145
145
  --ids-color-control-selected-indicator-disabled: #adaeb3;
146
146
  --ids-color-field-default: #F8F8FA;
147
147
  --ids-color-field-hover: #F8F8FA;
package/dist/css/tokens.dark.css CHANGED
@@ -102,68 +102,68 @@
102
102
  --ids-borderradius-full: 1600px;
103
103
  --ids-borderradius-1x: 16px;
104
104
  --ids-border-action-primary: 2px solid #00000000;
105
- --ids-border-action-secondary: 2px solid #2d2f35;
106
- --ids-border-action-disabled: 2px solid #adaeb3;
105
+ --ids-border-action-secondary: 2px solid #fafafb;
106
+ --ids-border-action-disabled: 2px solid #c5c6cb;
107
107
  --ids-border-action-tertiary: 2px solid #00000000;
108
- --ids-border-action-item-selected: 2px solid #3a64b8;
109
- --ids-border-default: 1px solid #8e9099;
110
- --ids-border-subtle: 1px solid #ebebef;
111
- --ids-border-disabled: 1px solid #adaeb3;
108
+ --ids-border-action-item-selected: 2px solid #7eaaff;
109
+ --ids-border-default: 1px solid #e0e1e4;
110
+ --ids-border-subtle: 1px solid #707784;
111
+ --ids-border-disabled: 1px solid #c5c6cb;
112
112
  --ids-border-focused: 2px solid #7eaaff;
113
- --ids-color-background-default: #fafafb;
114
- --ids-color-surface-bright: #ffffff;
115
- --ids-color-surface-muted: #F8F8FA;
116
- --ids-color-foreground-default: #2d2f35;
117
- --ids-color-foreground-muted: #707784;
118
- --ids-color-foreground-disabled: #adaeb3;
119
- --ids-color-action-primary-default: #2d2f35;
120
- --ids-color-action-primary-hover: #4d5057;
121
- --ids-color-action-primary-pressed: #101114;
122
- --ids-color-action-primary-onprimary: #ffffff;
113
+ --ids-color-background-default: #2d2f35;
114
+ --ids-color-surface-bright: #4d5057;
115
+ --ids-color-surface-muted: #101114;
116
+ --ids-color-foreground-default: #fafafb;
117
+ --ids-color-foreground-muted: #ebebef;
118
+ --ids-color-foreground-disabled: #c5c6cb;
119
+ --ids-color-action-primary-default: #fafafb;
120
+ --ids-color-action-primary-hover: #F8F8FA;
121
+ --ids-color-action-primary-pressed: #ffffff;
122
+ --ids-color-action-primary-onprimary: #2d2f35;
123
123
  --ids-color-action-secondary-default: #00000000;
124
- --ids-color-action-secondary-hover: #e6edfb;
125
- --ids-color-action-secondary-pressed: #d1def8;
126
- --ids-color-action-secondary-onsecondary: #2d2f35;
124
+ --ids-color-action-secondary-hover: #142442;
125
+ --ids-color-action-secondary-pressed: #1e3560;
126
+ --ids-color-action-secondary-onsecondary: #fafafb;
127
127
  --ids-color-action-tertiary-default: #00000000;
128
- --ids-color-action-tertiary-hover: #e6edfb;
129
- --ids-color-action-tertiary-pressed: #d1def8;
130
- --ids-color-action-tertiary-ontertiary: #2d2f35;
131
- --ids-color-action-disabled-default: #adaeb3;
128
+ --ids-color-action-tertiary-hover: #142442;
129
+ --ids-color-action-tertiary-pressed: #1e3560;
130
+ --ids-color-action-tertiary-ontertiary: #fafafb;
131
+ --ids-color-action-disabled-default: #8e9099;
132
132
  --ids-color-action-disabled-muted: #00000000;
133
- --ids-color-action-disabled-ondisabled: #707784;
134
- --ids-color-control-unselected-default: #F8F8FA;
135
- --ids-color-control-unselected-hover: #e6edfb;
136
- --ids-color-control-unselected-pressed: #d1def8;
137
- --ids-color-control-unselected-disabled: #e0e1e4;
138
- --ids-color-control-unselected-indicator-default: #ffffff;
139
- --ids-color-control-unselected-indicator-disabled: #c5c6cb;
140
- --ids-color-control-selected-default: #4d5057;
141
- --ids-color-control-selected-hover: #707784;
142
- --ids-color-control-selected-pressed: #101114;
143
- --ids-color-control-selected-disabled: #c5c6cb;
144
- --ids-color-control-selected-indicator-default: #ffffff;
145
- --ids-color-control-selected-indicator-disabled: #adaeb3;
146
- --ids-color-field-default: #F8F8FA;
147
- --ids-color-field-hover: #F8F8FA;
148
- --ids-color-field-pressed: #e0e1e4;
149
- --ids-color-field-onfield: #2d2f35;
150
- --ids-color-field-onfieldmuted: #4d5057;
133
+ --ids-color-action-disabled-ondisabled: #ebebef;
134
+ --ids-color-control-unselected-default: #707784;
135
+ --ids-color-control-unselected-hover: #142442;
136
+ --ids-color-control-unselected-pressed: #1e3560;
137
+ --ids-color-control-unselected-disabled: #8e9099;
138
+ --ids-color-control-unselected-indicator-enabled: #fafafb;
139
+ --ids-color-control-unselected-indicator-disabled: #adaeb3;
140
+ --ids-color-control-selected-default: #F8F8FA;
141
+ --ids-color-control-selected-hover: #ebebef;
142
+ --ids-color-control-selected-pressed: #ffffff;
143
+ --ids-color-control-selected-disabled: #adaeb3;
144
+ --ids-color-control-selected-indicator-enabled: #2d2f35;
145
+ --ids-color-control-selected-indicator-disabled: #c5c6cb;
146
+ --ids-color-field-default: #707784;
147
+ --ids-color-field-hover: #707784;
148
+ --ids-color-field-pressed: #8e9099;
149
+ --ids-color-field-onfield: #fafafb;
150
+ --ids-color-field-onfieldmuted: #F8F8FA;
151
151
  --ids-color-item-unselected-default: #00000000;
152
- --ids-color-item-unselected-hover: #e6edfb;
153
- --ids-color-item-unselected-pressed: #d1def8;
154
- --ids-color-item-unselected-onnavigation: #2d2f35;
155
- --ids-color-item-unselected-onnavigationdisabled: #8e9099;
156
- --ids-color-item-selected-default: lch(93.522 7.6467 266.59 / 0.48);
157
- --ids-color-item-selected-hover: #e6edfb;
158
- --ids-color-item-selected-pressed: #d1def8;
159
- --ids-color-item-selected-onnavigation: #3a64b8;
152
+ --ids-color-item-unselected-hover: #142442;
153
+ --ids-color-item-unselected-pressed: #1e3560;
154
+ --ids-color-item-unselected-onitem: #fafafb;
155
+ --ids-color-item-unselected-onitemdisabled: #e0e1e4;
156
+ --ids-color-item-selected-default: lch(14.12 21.512 275.11 / 0.48);
157
+ --ids-color-item-selected-hover: #142442;
158
+ --ids-color-item-selected-pressed: #1e3560;
159
+ --ids-color-item-selected-onitem: #7eaaff;
160
160
  --ids-color-border-transparent: #00000000;
161
- --ids-color-border-strong: #2d2f35;
162
- --ids-color-border-default: #8e9099;
163
- --ids-color-border-muted: #c5c6cb;
164
- --ids-color-border-subtle: #ebebef;
165
- --ids-color-border-disabled: #adaeb3;
166
- --ids-color-border-selected: #3a64b8;
161
+ --ids-color-border-strong: #fafafb;
162
+ --ids-color-border-default: #e0e1e4;
163
+ --ids-color-border-muted: #adaeb3;
164
+ --ids-color-border-subtle: #707784;
165
+ --ids-color-border-disabled: #c5c6cb;
166
+ --ids-color-border-selected: #7eaaff;
167
167
  --ids-color-border-focus: #7eaaff;
168
168
  --ids-color-boxshadow-alpha16: lch(5.0543 1.8805 272.92 / 0.16);
169
169
  --ids-color-boxshadow-alpha24: lch(5.0543 1.8805 272.92 / 0.24);
package/dist/css/tokens.light.css CHANGED
@@ -135,13 +135,13 @@
135
135
  --ids-color-control-unselected-hover: #e6edfb;
136
136
  --ids-color-control-unselected-pressed: #d1def8;
137
137
  --ids-color-control-unselected-disabled: #e0e1e4;
138
- --ids-color-control-unselected-indicator-default: #ffffff;
138
+ --ids-color-control-unselected-indicator-enabled: #ffffff;
139
139
  --ids-color-control-unselected-indicator-disabled: #c5c6cb;
140
140
  --ids-color-control-selected-default: #4d5057;
141
141
  --ids-color-control-selected-hover: #707784;
142
142
  --ids-color-control-selected-pressed: #101114;
143
143
  --ids-color-control-selected-disabled: #c5c6cb;
144
- --ids-color-control-selected-indicator-default: #ffffff;
144
+ --ids-color-control-selected-indicator-enabled: #ffffff;
145
145
  --ids-color-control-selected-indicator-disabled: #adaeb3;
146
146
  --ids-color-field-default: #F8F8FA;
147
147
  --ids-color-field-hover: #F8F8FA;
package/dist/esm/tokens.dark.js CHANGED
@@ -110,12 +110,12 @@ export const idsBorderActionPrimary = {
110
110
  style: "solid",
111
111
  }; // SEMANTIC - Primary border. Use for: primary call-to-action buttons.
112
112
  export const idsBorderActionSecondary = {
113
- color: "#2d2f35",
113
+ color: "#fafafb",
114
114
  width: "2px",
115
115
  style: "solid",
116
116
  }; // SEMANTIC - Secondary border. Use for: secondary call-to-action buttons.
117
117
  export const idsBorderActionDisabled = {
118
- color: "#adaeb3",
118
+ color: "#c5c6cb",
119
119
  width: "2px",
120
120
  style: "solid",
121
121
  }; // SEMANTIC - Disabled border. Use for: disabled inputs and controls.
@@ -125,22 +125,22 @@ export const idsBorderActionTertiary = {
125
125
  style: "solid",
126
126
  }; // SEMANTIC - Teretiary border, invisible. Use for: tertiary call-to-action buttons.
127
127
  export const idsBorderActionItemSelected = {
128
- color: "#3a64b8",
128
+ color: "#7eaaff",
129
129
  width: "2px",
130
130
  style: "solid",
131
131
  }; // SEMANTIC – Border for selected items, displayed at the bottom.
132
132
  export const idsBorderDefault = {
133
- color: "#8e9099",
133
+ color: "#e0e1e4",
134
134
  width: "1px",
135
135
  style: "solid",
136
136
  }; // SEMANTIC – Default border element with 3:1 contrast against all backgrounds and surfaces. Use for: Controls and input fields.
137
137
  export const idsBorderSubtle = {
138
- color: "#ebebef",
138
+ color: "#707784",
139
139
  width: "1px",
140
140
  style: "solid",
141
141
  }; // SEMANTIC – Subtle border element with low contrast as decorator. Use for: Dividers.
142
142
  export const idsBorderDisabled = {
143
- color: "#adaeb3",
143
+ color: "#c5c6cb",
144
144
  width: "1px",
145
145
  style: "solid",
146
146
  }; // SEMANTIC – Default border for disabled elements. Use for: Controls and input fields.
@@ -149,60 +149,60 @@ export const idsBorderFocused = {
149
149
  width: "2px",
150
150
  style: "solid",
151
151
  }; // SEMANTIC - Focus state border. Use for: keyboard focus rings on interactive elements.
152
- export const idsColorBackgroundDefault = "#fafafb"; // SEMANTIC – Page background. Use for frame background onm lowest z-level.
153
- export const idsColorSurfaceBright = "#ffffff"; // SEMANTIC – Background color for elements placed on the page background. Use for: Modals, drawers, popups, cards.
154
- export const idsColorSurfaceMuted = "#F8F8FA"; // SEMANTIC – Muted background color for secondary elements placed on the page background. Use for: Side panels.
155
- export const idsColorForegroundDefault = "#2d2f35"; // SEMANTIC – Foreground color for icons and text.
156
- export const idsColorForegroundMuted = "#707784"; // SEMANTIC – Muted foreground color for secondary icons and text.
157
- export const idsColorForegroundDisabled = "#adaeb3"; // SEMANTIC – Foreground color for disabled icons and text.
158
- export const idsColorActionPrimaryDefault = "#2d2f35"; // SEMANTIC - Background color for primary element resting state. Use for: primary button background, main CTA.
159
- export const idsColorActionPrimaryHover = "#4d5057"; // SEMANTIC - Background color for primary element hover state. Use for: primary button hover.
160
- export const idsColorActionPrimaryPressed = "#101114"; // SEMANTIC - Background color for primary element pressed state. Use for: primary button active.
161
- export const idsColorActionPrimaryOnprimary = "#ffffff"; // SEMANTIC - Foreground color for text/icon ON primary backgrounds. Use for: all primary button text and icon layers.
152
+ export const idsColorBackgroundDefault = "#2d2f35"; // SEMANTIC – Page background. Use for frame background onm lowest z-level.
153
+ export const idsColorSurfaceBright = "#4d5057"; // SEMANTIC – Background color for elements placed on the page background. Use for: Modals, drawers, popups, cards.
154
+ export const idsColorSurfaceMuted = "#101114"; // SEMANTIC – Muted background color for secondary elements placed on the page background. Use for: Side panels.
155
+ export const idsColorForegroundDefault = "#fafafb"; // SEMANTIC – Foreground color for icons and text.
156
+ export const idsColorForegroundMuted = "#ebebef"; // SEMANTIC – Muted foreground color for secondary icons and text.
157
+ export const idsColorForegroundDisabled = "#c5c6cb"; // SEMANTIC – Foreground color for disabled icons and text.
158
+ export const idsColorActionPrimaryDefault = "#fafafb"; // SEMANTIC - Background color for primary element resting state. Use for: primary button background, main CTA.
159
+ export const idsColorActionPrimaryHover = "#F8F8FA"; // SEMANTIC - Background color for primary element hover state. Use for: primary button hover.
160
+ export const idsColorActionPrimaryPressed = "#ffffff"; // SEMANTIC - Background color for primary element pressed state. Use for: primary button active.
161
+ export const idsColorActionPrimaryOnprimary = "#2d2f35"; // SEMANTIC - Foreground color for text/icon ON primary backgrounds. Use for: all primary button text and icon layers.
162
162
  export const idsColorActionSecondaryDefault = "#00000000"; // SEMANTIC - Background color for secondary element resting state. Use for: ghost button background.
163
- export const idsColorActionSecondaryHover = "#e6edfb"; // SEMANTIC - Background color for secondary element hover state. Use for: ghost button hover.
164
- export const idsColorActionSecondaryPressed = "#d1def8"; // SEMANTIC - Background color for secondary element pressed state. Use for: ghost button active.
165
- export const idsColorActionSecondaryOnsecondary = "#2d2f35"; // SEMANTIC - Foreground color for text/icon ON secondary backgrounds. Use for: all secondary button texts and icons.
163
+ export const idsColorActionSecondaryHover = "#142442"; // SEMANTIC - Background color for secondary element hover state. Use for: ghost button hover.
164
+ export const idsColorActionSecondaryPressed = "#1e3560"; // SEMANTIC - Background color for secondary element pressed state. Use for: ghost button active.
165
+ export const idsColorActionSecondaryOnsecondary = "#fafafb"; // SEMANTIC - Foreground color for text/icon ON secondary backgrounds. Use for: all secondary button texts and icons.
166
166
  export const idsColorActionTertiaryDefault = "#00000000"; // SEMANTIC - Background color for tertiary element resting state. Use for: transparent button background.
167
- export const idsColorActionTertiaryHover = "#e6edfb"; // SEMANTIC - Background color for tertiary element hover state. Use for: transparent button hover.
168
- export const idsColorActionTertiaryPressed = "#d1def8"; // SEMANTIC - Background color for tertiary element pressed state. Use for: transparent button active.
169
- export const idsColorActionTertiaryOntertiary = "#2d2f35"; // SEMANTIC - Foreground color for text/icon ON tertiary backgrounds. Use for: all tertiary button texts and icons.
170
- export const idsColorActionDisabledDefault = "#adaeb3"; // SEMANTIC - Disabled element background. Use for: Disabled backgrounds of primary action components.
167
+ export const idsColorActionTertiaryHover = "#142442"; // SEMANTIC - Background color for tertiary element hover state. Use for: transparent button hover.
168
+ export const idsColorActionTertiaryPressed = "#1e3560"; // SEMANTIC - Background color for tertiary element pressed state. Use for: transparent button active.
169
+ export const idsColorActionTertiaryOntertiary = "#fafafb"; // SEMANTIC - Foreground color for text/icon ON tertiary backgrounds. Use for: all tertiary button texts and icons.
170
+ export const idsColorActionDisabledDefault = "#8e9099"; // SEMANTIC - Disabled element background. Use for: Disabled backgrounds of primary action components.
171
171
  export const idsColorActionDisabledMuted = "#00000000"; // SEMANTIC - Transparent disabled action background. Use for: Disabled backgrounds in secondary and tertiary action components.
172
- export const idsColorActionDisabledOndisabled = "#707784"; // SEMANTIC - Text/icon ON disabled backgrounds.
173
- export const idsColorControlUnselectedDefault = "#F8F8FA"; // SEMANTIC - Background color for the default state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
174
- export const idsColorControlUnselectedHover = "#e6edfb"; // SEMANTIC - Background color for the hover state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
175
- export const idsColorControlUnselectedPressed = "#d1def8"; // SEMANTIC - Background color for the pressed state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
176
- export const idsColorControlUnselectedDisabled = "#e0e1e4"; // SEMANTIC - Background color for the pressed state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
177
- export const idsColorControlUnselectedIndicatorDefault = "#ffffff"; // SEMANTIC - Fill color for the interactive knob within switches and sliders.
178
- export const idsColorControlUnselectedIndicatorDisabled = "#c5c6cb"; // SEMANTIC - Fill color for the interactive knob in disabled state within switches and sliders.
179
- 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
180
- 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
181
- 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
182
- export const idsColorControlSelectedDisabled = "#c5c6cb"; // SEMANTIC - Background color for the disabled state of controlsthat are selected/on. Use for: Switches, checkboxes, radio buttons, segmented controls
183
- export const idsColorControlSelectedIndicatorDefault = "#ffffff"; // SEMANTIC - Fill color for the interactive knob within switches and sliders.
184
- export const idsColorControlSelectedIndicatorDisabled = "#adaeb3"; // SEMANTIC - Fill color for the interactive knob in disabled state within switches and sliders.
185
- export const idsColorFieldDefault = "#F8F8FA"; // SEMANTIC - Background color for the default state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
186
- export const idsColorFieldHover = "#F8F8FA"; // SEMANTIC - Background color for the hover state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
187
- export const idsColorFieldPressed = "#e0e1e4"; // SEMANTIC - Background color for the pressed state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
188
- export const idsColorFieldOnfield = "#2d2f35"; // SEMANTIC - Foreground color for text/icon on input fields. Use for: Non-empty state of input fields.
189
- export const idsColorFieldOnfieldmuted = "#4d5057"; // SEMANTIC - Foreground color for text/icon on input fields. Use for: Default state of input fields.
190
- export const idsColorItemUnselectedDefault = "#00000000"; // SEMANTIC – Background color for the default unselected state of ListItem, Tab and MenuItem.
191
- export const idsColorItemUnselectedHover = "#e6edfb"; // SEMANTIC – Background color for the hover unselected state of ListItem, Tab and MenuItem.
192
- export const idsColorItemUnselectedPressed = "#d1def8"; // SEMANTIC – Background color for the pressed unselected state of ListItem, Tab and MenuItem.
193
- export const idsColorItemUnselectedOnnavigation = "#2d2f35"; // SEMANTIC – Foreground color for text and icon on the unselected states of Tabs, ListItem and MenuItem.
194
- export const idsColorItemUnselectedOnnavigationdisabled = "#8e9099"; // SEMANTIC – Foreground color for text and icon on the unselected disabled state of Tabs, ListItem and MenuItem.
195
- export const idsColorItemSelectedDefault = "lch(93.522 7.6467 266.59 / 0.48)"; // SEMANTIC – Background color for the default selected state of ListItem, Tab and MenuItem.
196
- export const idsColorItemSelectedHover = "#e6edfb"; // SEMANTIC – Background color for the hover selected state of ListItem, Tab and MenuItem.
197
- export const idsColorItemSelectedPressed = "#d1def8"; // SEMANTIC – Background color for the pressed selected state of ListItem, Tab and MenuItem.
198
- export const idsColorItemSelectedOnnavigation = "#3a64b8"; // SEMANTIC – Foreground color for text and icon on the selected states of Tabs, ListItem and MenuItem.
172
+ export const idsColorActionDisabledOndisabled = "#ebebef"; // SEMANTIC - Text/icon ON disabled backgrounds.
173
+ export const idsColorControlUnselectedDefault = "#707784"; // SEMANTIC - Background color for the default state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
174
+ export const idsColorControlUnselectedHover = "#142442"; // SEMANTIC - Background color for the hover state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
175
+ export const idsColorControlUnselectedPressed = "#1e3560"; // SEMANTIC - Background color for the pressed state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
176
+ export const idsColorControlUnselectedDisabled = "#8e9099"; // SEMANTIC - Background color for the pressed state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
177
+ export const idsColorControlUnselectedIndicatorEnabled = "#fafafb"; // SEMANTIC - Fill color for the interactive knob within switches and sliders.
178
+ export const idsColorControlUnselectedIndicatorDisabled = "#adaeb3"; // SEMANTIC - Fill color for the interactive knob in disabled state within switches and sliders.
179
+ export const idsColorControlSelectedDefault = "#F8F8FA"; // SEMANTIC - Background color for the default state of controls that are selected/on. Use for: Switches, checkboxes, radio buttons, segmented controls
180
+ export const idsColorControlSelectedHover = "#ebebef"; // SEMANTIC - Background color for the hover state of controls that are selected/on. Use for: Switches, checkboxes, radio buttons, segmented controls
181
+ export const idsColorControlSelectedPressed = "#ffffff"; // SEMANTIC - Background color for the pressed state of controls that are selected/on. Use for: Switches, checkboxes, radio buttons, segmented controls
182
+ export const idsColorControlSelectedDisabled = "#adaeb3"; // SEMANTIC - Background color for the disabled state of controlsthat are selected/on. Use for: Switches, checkboxes, radio buttons, segmented controls
183
+ export const idsColorControlSelectedIndicatorEnabled = "#2d2f35"; // SEMANTIC - Fill color for the interactive knob within switches and sliders.
184
+ export const idsColorControlSelectedIndicatorDisabled = "#c5c6cb"; // SEMANTIC - Fill color for the interactive knob in disabled state within switches and sliders.
185
+ export const idsColorFieldDefault = "#707784"; // SEMANTIC - Background color for the default state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
186
+ export const idsColorFieldHover = "#707784"; // SEMANTIC - Background color for the hover state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
187
+ export const idsColorFieldPressed = "#8e9099"; // SEMANTIC - Background color for the pressed state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
188
+ export const idsColorFieldOnfield = "#fafafb"; // SEMANTIC - Foreground color for text/icon on input fields. Use for: Non-empty state of input fields.
189
+ export const idsColorFieldOnfieldmuted = "#F8F8FA"; // SEMANTIC - Foreground color for text/icon on input fields. Use for: Default state of input fields.
190
+ export const idsColorItemUnselectedDefault = "#00000000"; // SEMANTIC – Background color for the default unselected state of ListItem, Tab and MenuItem.
191
+ export const idsColorItemUnselectedHover = "#142442"; // SEMANTIC – Background color for the hover unselected state of ListItem, Tab and MenuItem.
192
+ export const idsColorItemUnselectedPressed = "#1e3560"; // SEMANTIC – Background color for the pressed unselected state of ListItem, Tab and MenuItem.
193
+ export const idsColorItemUnselectedOnitem = "#fafafb"; // SEMANTIC – Foreground color for text and icon on the unselected states of Tabs, ListItem and MenuItem.
194
+ export const idsColorItemUnselectedOnitemdisabled = "#e0e1e4"; // SEMANTIC – Foreground color for text and icon on the unselected disabled state of Tabs, ListItem and MenuItem.
195
+ export const idsColorItemSelectedDefault = "lch(14.12 21.512 275.11 / 0.48)"; // SEMANTIC – Background color for the default selected state of ListItem, Tab and MenuItem.
196
+ export const idsColorItemSelectedHover = "#142442"; // SEMANTIC – Background color for the hover selected state of ListItem, Tab and MenuItem.
197
+ export const idsColorItemSelectedPressed = "#1e3560"; // SEMANTIC – Background color for the pressed selected state of ListItem, Tab and MenuItem.
198
+ export const idsColorItemSelectedOnitem = "#7eaaff"; // SEMANTIC – Foreground color for text and icon on the selected states of Tabs, ListItem and MenuItem.
199
199
  export const idsColorBorderTransparent = "#00000000"; // SEMANTIC - Transparent border. Use for: Composite border tokens that require transparent color.
200
- export const idsColorBorderStrong = "#2d2f35"; // SEMANTIC - Strong border. Use for: Composite border tokens that require a dark border color.
201
- export const idsColorBorderDefault = "#8e9099"; // SEMANTIC - Muted border. Use for: Composite border tokens for secondary containers, tables.
202
- export const idsColorBorderMuted = "#c5c6cb"; // SEMANTIC - Muted border. Use for: Composite border tokens for secondary containers, tables.
203
- export const idsColorBorderSubtle = "#ebebef"; // SEMANTIC - Subtle border. Use for: Composite border tokens for hairline dividers.
204
- export const idsColorBorderDisabled = "#adaeb3"; // SEMANTIC - Disabled border. Use for: Composite border tokens for disabled states.
205
- export const idsColorBorderSelected = "#3a64b8"; // SEMANTIC - Disabled border. Use for: Composite border tokens for disabled states.
200
+ export const idsColorBorderStrong = "#fafafb"; // SEMANTIC - Strong border. Use for: Composite border tokens that require a dark border color.
201
+ export const idsColorBorderDefault = "#e0e1e4"; // SEMANTIC - Muted border. Use for: Composite border tokens for secondary containers, tables.
202
+ export const idsColorBorderMuted = "#adaeb3"; // SEMANTIC - Muted border. Use for: Composite border tokens for secondary containers, tables.
203
+ export const idsColorBorderSubtle = "#707784"; // SEMANTIC - Subtle border. Use for: Composite border tokens for hairline dividers.
204
+ export const idsColorBorderDisabled = "#c5c6cb"; // SEMANTIC - Disabled border. Use for: Composite border tokens for disabled states.
205
+ export const idsColorBorderSelected = "#7eaaff"; // SEMANTIC - Disabled border. Use for: Composite border tokens for disabled states.
206
206
  export const idsColorBorderFocus = "#7eaaff"; // SEMANTIC - Focus ring color. Use for: Composite border tokens that are used for keyboard focus on all interactive elements.
207
207
  export const idsColorBoxshadowAlpha16 = "lch(5.0543 1.8805 272.92 / 0.16)"; // Box-shadow color with 16% opacity.
208
208
  export const idsColorBoxshadowAlpha24 = "lch(5.0543 1.8805 272.92 / 0.24)"; // Box-shadow color with 24% opacity.
package/dist/esm/tokens.js CHANGED
@@ -174,13 +174,13 @@ export const idsColorControlUnselectedDefault = "#F8F8FA"; // SEMANTIC - Backgro
174
174
  export const idsColorControlUnselectedHover = "#e6edfb"; // SEMANTIC - Background color for the hover state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
175
175
  export const idsColorControlUnselectedPressed = "#d1def8"; // SEMANTIC - Background color for the pressed state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
176
176
  export const idsColorControlUnselectedDisabled = "#e0e1e4"; // SEMANTIC - Background color for the pressed state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
177
- export const idsColorControlUnselectedIndicatorDefault = "#ffffff"; // SEMANTIC - Fill color for the interactive knob within switches and sliders.
177
+ export const idsColorControlUnselectedIndicatorEnabled = "#ffffff"; // SEMANTIC - Fill color for the interactive knob within switches and sliders.
178
178
  export const idsColorControlUnselectedIndicatorDisabled = "#c5c6cb"; // SEMANTIC - Fill color for the interactive knob in disabled state within switches and sliders.
179
179
  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
180
180
  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
181
181
  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
182
182
  export const idsColorControlSelectedDisabled = "#c5c6cb"; // SEMANTIC - Background color for the disabled state of controlsthat are selected/on. Use for: Switches, checkboxes, radio buttons, segmented controls
183
- export const idsColorControlSelectedIndicatorDefault = "#ffffff"; // SEMANTIC - Fill color for the interactive knob within switches and sliders.
183
+ export const idsColorControlSelectedIndicatorEnabled = "#ffffff"; // SEMANTIC - Fill color for the interactive knob within switches and sliders.
184
184
  export const idsColorControlSelectedIndicatorDisabled = "#adaeb3"; // SEMANTIC - Fill color for the interactive knob in disabled state within switches and sliders.
185
185
  export const idsColorFieldDefault = "#F8F8FA"; // SEMANTIC - Background color for the default state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
186
186
  export const idsColorFieldHover = "#F8F8FA"; // SEMANTIC - Background color for the hover state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
package/dist/esm/tokens.light.js CHANGED
@@ -174,13 +174,13 @@ export const idsColorControlUnselectedDefault = "#F8F8FA"; // SEMANTIC - Backgro
174
174
  export const idsColorControlUnselectedHover = "#e6edfb"; // SEMANTIC - Background color for the hover state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
175
175
  export const idsColorControlUnselectedPressed = "#d1def8"; // SEMANTIC - Background color for the pressed state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
176
176
  export const idsColorControlUnselectedDisabled = "#e0e1e4"; // SEMANTIC - Background color for the pressed state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
177
- export const idsColorControlUnselectedIndicatorDefault = "#ffffff"; // SEMANTIC - Fill color for the interactive knob within switches and sliders.
177
+ export const idsColorControlUnselectedIndicatorEnabled = "#ffffff"; // SEMANTIC - Fill color for the interactive knob within switches and sliders.
178
178
  export const idsColorControlUnselectedIndicatorDisabled = "#c5c6cb"; // SEMANTIC - Fill color for the interactive knob in disabled state within switches and sliders.
179
179
  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
180
180
  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
181
181
  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
182
182
  export const idsColorControlSelectedDisabled = "#c5c6cb"; // SEMANTIC - Background color for the disabled state of controlsthat are selected/on. Use for: Switches, checkboxes, radio buttons, segmented controls
183
- export const idsColorControlSelectedIndicatorDefault = "#ffffff"; // SEMANTIC - Fill color for the interactive knob within switches and sliders.
183
+ export const idsColorControlSelectedIndicatorEnabled = "#ffffff"; // SEMANTIC - Fill color for the interactive knob within switches and sliders.
184
184
  export const idsColorControlSelectedIndicatorDisabled = "#adaeb3"; // SEMANTIC - Fill color for the interactive knob in disabled state within switches and sliders.
185
185
  export const idsColorFieldDefault = "#F8F8FA"; // SEMANTIC - Background color for the default state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
186
186
  export const idsColorFieldHover = "#F8F8FA"; // SEMANTIC - Background color for the hover state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
package/dist/js/tokens.dark.js CHANGED
@@ -110,12 +110,12 @@ export const idsBorderActionPrimary = {
110
110
  style: "solid",
111
111
  }; // SEMANTIC - Primary border. Use for: primary call-to-action buttons.
112
112
  export const idsBorderActionSecondary = {
113
- color: "#2d2f35",
113
+ color: "#fafafb",
114
114
  width: "2px",
115
115
  style: "solid",
116
116
  }; // SEMANTIC - Secondary border. Use for: secondary call-to-action buttons.
117
117
  export const idsBorderActionDisabled = {
118
- color: "#adaeb3",
118
+ color: "#c5c6cb",
119
119
  width: "2px",
120
120
  style: "solid",
121
121
  }; // SEMANTIC - Disabled border. Use for: disabled inputs and controls.
@@ -125,22 +125,22 @@ export const idsBorderActionTertiary = {
125
125
  style: "solid",
126
126
  }; // SEMANTIC - Teretiary border, invisible. Use for: tertiary call-to-action buttons.
127
127
  export const idsBorderActionItemSelected = {
128
- color: "#3a64b8",
128
+ color: "#7eaaff",
129
129
  width: "2px",
130
130
  style: "solid",
131
131
  }; // SEMANTIC – Border for selected items, displayed at the bottom.
132
132
  export const idsBorderDefault = {
133
- color: "#8e9099",
133
+ color: "#e0e1e4",
134
134
  width: "1px",
135
135
  style: "solid",
136
136
  }; // SEMANTIC – Default border element with 3:1 contrast against all backgrounds and surfaces. Use for: Controls and input fields.
137
137
  export const idsBorderSubtle = {
138
- color: "#ebebef",
138
+ color: "#707784",
139
139
  width: "1px",
140
140
  style: "solid",
141
141
  }; // SEMANTIC – Subtle border element with low contrast as decorator. Use for: Dividers.
142
142
  export const idsBorderDisabled = {
143
- color: "#adaeb3",
143
+ color: "#c5c6cb",
144
144
  width: "1px",
145
145
  style: "solid",
146
146
  }; // SEMANTIC – Default border for disabled elements. Use for: Controls and input fields.
@@ -149,60 +149,60 @@ export const idsBorderFocused = {
149
149
  width: "2px",
150
150
  style: "solid",
151
151
  }; // SEMANTIC - Focus state border. Use for: keyboard focus rings on interactive elements.
152
- export const idsColorBackgroundDefault = "#fafafb"; // SEMANTIC – Page background. Use for frame background onm lowest z-level.
153
- export const idsColorSurfaceBright = "#ffffff"; // SEMANTIC – Background color for elements placed on the page background. Use for: Modals, drawers, popups, cards.
154
- export const idsColorSurfaceMuted = "#F8F8FA"; // SEMANTIC – Muted background color for secondary elements placed on the page background. Use for: Side panels.
155
- export const idsColorForegroundDefault = "#2d2f35"; // SEMANTIC – Foreground color for icons and text.
156
- export const idsColorForegroundMuted = "#707784"; // SEMANTIC – Muted foreground color for secondary icons and text.
157
- export const idsColorForegroundDisabled = "#adaeb3"; // SEMANTIC – Foreground color for disabled icons and text.
158
- export const idsColorActionPrimaryDefault = "#2d2f35"; // SEMANTIC - Background color for primary element resting state. Use for: primary button background, main CTA.
159
- export const idsColorActionPrimaryHover = "#4d5057"; // SEMANTIC - Background color for primary element hover state. Use for: primary button hover.
160
- export const idsColorActionPrimaryPressed = "#101114"; // SEMANTIC - Background color for primary element pressed state. Use for: primary button active.
161
- export const idsColorActionPrimaryOnprimary = "#ffffff"; // SEMANTIC - Foreground color for text/icon ON primary backgrounds. Use for: all primary button text and icon layers.
152
+ export const idsColorBackgroundDefault = "#2d2f35"; // SEMANTIC – Page background. Use for frame background onm lowest z-level.
153
+ export const idsColorSurfaceBright = "#4d5057"; // SEMANTIC – Background color for elements placed on the page background. Use for: Modals, drawers, popups, cards.
154
+ export const idsColorSurfaceMuted = "#101114"; // SEMANTIC – Muted background color for secondary elements placed on the page background. Use for: Side panels.
155
+ export const idsColorForegroundDefault = "#fafafb"; // SEMANTIC – Foreground color for icons and text.
156
+ export const idsColorForegroundMuted = "#ebebef"; // SEMANTIC – Muted foreground color for secondary icons and text.
157
+ export const idsColorForegroundDisabled = "#c5c6cb"; // SEMANTIC – Foreground color for disabled icons and text.
158
+ export const idsColorActionPrimaryDefault = "#fafafb"; // SEMANTIC - Background color for primary element resting state. Use for: primary button background, main CTA.
159
+ export const idsColorActionPrimaryHover = "#F8F8FA"; // SEMANTIC - Background color for primary element hover state. Use for: primary button hover.
160
+ export const idsColorActionPrimaryPressed = "#ffffff"; // SEMANTIC - Background color for primary element pressed state. Use for: primary button active.
161
+ export const idsColorActionPrimaryOnprimary = "#2d2f35"; // SEMANTIC - Foreground color for text/icon ON primary backgrounds. Use for: all primary button text and icon layers.
162
162
  export const idsColorActionSecondaryDefault = "#00000000"; // SEMANTIC - Background color for secondary element resting state. Use for: ghost button background.
163
- export const idsColorActionSecondaryHover = "#e6edfb"; // SEMANTIC - Background color for secondary element hover state. Use for: ghost button hover.
164
- export const idsColorActionSecondaryPressed = "#d1def8"; // SEMANTIC - Background color for secondary element pressed state. Use for: ghost button active.
165
- export const idsColorActionSecondaryOnsecondary = "#2d2f35"; // SEMANTIC - Foreground color for text/icon ON secondary backgrounds. Use for: all secondary button texts and icons.
163
+ export const idsColorActionSecondaryHover = "#142442"; // SEMANTIC - Background color for secondary element hover state. Use for: ghost button hover.
164
+ export const idsColorActionSecondaryPressed = "#1e3560"; // SEMANTIC - Background color for secondary element pressed state. Use for: ghost button active.
165
+ export const idsColorActionSecondaryOnsecondary = "#fafafb"; // SEMANTIC - Foreground color for text/icon ON secondary backgrounds. Use for: all secondary button texts and icons.
166
166
  export const idsColorActionTertiaryDefault = "#00000000"; // SEMANTIC - Background color for tertiary element resting state. Use for: transparent button background.
167
- export const idsColorActionTertiaryHover = "#e6edfb"; // SEMANTIC - Background color for tertiary element hover state. Use for: transparent button hover.
168
- export const idsColorActionTertiaryPressed = "#d1def8"; // SEMANTIC - Background color for tertiary element pressed state. Use for: transparent button active.
169
- export const idsColorActionTertiaryOntertiary = "#2d2f35"; // SEMANTIC - Foreground color for text/icon ON tertiary backgrounds. Use for: all tertiary button texts and icons.
170
- export const idsColorActionDisabledDefault = "#adaeb3"; // SEMANTIC - Disabled element background. Use for: Disabled backgrounds of primary action components.
167
+ export const idsColorActionTertiaryHover = "#142442"; // SEMANTIC - Background color for tertiary element hover state. Use for: transparent button hover.
168
+ export const idsColorActionTertiaryPressed = "#1e3560"; // SEMANTIC - Background color for tertiary element pressed state. Use for: transparent button active.
169
+ export const idsColorActionTertiaryOntertiary = "#fafafb"; // SEMANTIC - Foreground color for text/icon ON tertiary backgrounds. Use for: all tertiary button texts and icons.
170
+ export const idsColorActionDisabledDefault = "#8e9099"; // SEMANTIC - Disabled element background. Use for: Disabled backgrounds of primary action components.
171
171
  export const idsColorActionDisabledMuted = "#00000000"; // SEMANTIC - Transparent disabled action background. Use for: Disabled backgrounds in secondary and tertiary action components.
172
- export const idsColorActionDisabledOndisabled = "#707784"; // SEMANTIC - Text/icon ON disabled backgrounds.
173
- export const idsColorControlUnselectedDefault = "#F8F8FA"; // SEMANTIC - Background color for the default state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
174
- export const idsColorControlUnselectedHover = "#e6edfb"; // SEMANTIC - Background color for the hover state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
175
- export const idsColorControlUnselectedPressed = "#d1def8"; // SEMANTIC - Background color for the pressed state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
176
- export const idsColorControlUnselectedDisabled = "#e0e1e4"; // SEMANTIC - Background color for the pressed state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
177
- export const idsColorControlUnselectedIndicatorDefault = "#ffffff"; // SEMANTIC - Fill color for the interactive knob within switches and sliders.
178
- export const idsColorControlUnselectedIndicatorDisabled = "#c5c6cb"; // SEMANTIC - Fill color for the interactive knob in disabled state within switches and sliders.
179
- 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
180
- 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
181
- 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
182
- export const idsColorControlSelectedDisabled = "#c5c6cb"; // SEMANTIC - Background color for the disabled state of controlsthat are selected/on. Use for: Switches, checkboxes, radio buttons, segmented controls
183
- export const idsColorControlSelectedIndicatorDefault = "#ffffff"; // SEMANTIC - Fill color for the interactive knob within switches and sliders.
184
- export const idsColorControlSelectedIndicatorDisabled = "#adaeb3"; // SEMANTIC - Fill color for the interactive knob in disabled state within switches and sliders.
185
- export const idsColorFieldDefault = "#F8F8FA"; // SEMANTIC - Background color for the default state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
186
- export const idsColorFieldHover = "#F8F8FA"; // SEMANTIC - Background color for the hover state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
187
- export const idsColorFieldPressed = "#e0e1e4"; // SEMANTIC - Background color for the pressed state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
188
- export const idsColorFieldOnfield = "#2d2f35"; // SEMANTIC - Foreground color for text/icon on input fields. Use for: Non-empty state of input fields.
189
- export const idsColorFieldOnfieldmuted = "#4d5057"; // SEMANTIC - Foreground color for text/icon on input fields. Use for: Default state of input fields.
190
- export const idsColorItemUnselectedDefault = "#00000000"; // SEMANTIC – Background color for the default unselected state of ListItem, Tab and MenuItem.
191
- export const idsColorItemUnselectedHover = "#e6edfb"; // SEMANTIC – Background color for the hover unselected state of ListItem, Tab and MenuItem.
192
- export const idsColorItemUnselectedPressed = "#d1def8"; // SEMANTIC – Background color for the pressed unselected state of ListItem, Tab and MenuItem.
193
- export const idsColorItemUnselectedOnnavigation = "#2d2f35"; // SEMANTIC – Foreground color for text and icon on the unselected states of Tabs, ListItem and MenuItem.
194
- export const idsColorItemUnselectedOnnavigationdisabled = "#8e9099"; // SEMANTIC – Foreground color for text and icon on the unselected disabled state of Tabs, ListItem and MenuItem.
195
- export const idsColorItemSelectedDefault = "lch(93.522 7.6467 266.59 / 0.48)"; // SEMANTIC – Background color for the default selected state of ListItem, Tab and MenuItem.
196
- export const idsColorItemSelectedHover = "#e6edfb"; // SEMANTIC – Background color for the hover selected state of ListItem, Tab and MenuItem.
197
- export const idsColorItemSelectedPressed = "#d1def8"; // SEMANTIC – Background color for the pressed selected state of ListItem, Tab and MenuItem.
198
- export const idsColorItemSelectedOnnavigation = "#3a64b8"; // SEMANTIC – Foreground color for text and icon on the selected states of Tabs, ListItem and MenuItem.
172
+ export const idsColorActionDisabledOndisabled = "#ebebef"; // SEMANTIC - Text/icon ON disabled backgrounds.
173
+ export const idsColorControlUnselectedDefault = "#707784"; // SEMANTIC - Background color for the default state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
174
+ export const idsColorControlUnselectedHover = "#142442"; // SEMANTIC - Background color for the hover state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
175
+ export const idsColorControlUnselectedPressed = "#1e3560"; // SEMANTIC - Background color for the pressed state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
176
+ export const idsColorControlUnselectedDisabled = "#8e9099"; // SEMANTIC - Background color for the pressed state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
177
+ export const idsColorControlUnselectedIndicatorEnabled = "#fafafb"; // SEMANTIC - Fill color for the interactive knob within switches and sliders.
178
+ export const idsColorControlUnselectedIndicatorDisabled = "#adaeb3"; // SEMANTIC - Fill color for the interactive knob in disabled state within switches and sliders.
179
+ export const idsColorControlSelectedDefault = "#F8F8FA"; // SEMANTIC - Background color for the default state of controls that are selected/on. Use for: Switches, checkboxes, radio buttons, segmented controls
180
+ export const idsColorControlSelectedHover = "#ebebef"; // SEMANTIC - Background color for the hover state of controls that are selected/on. Use for: Switches, checkboxes, radio buttons, segmented controls
181
+ export const idsColorControlSelectedPressed = "#ffffff"; // SEMANTIC - Background color for the pressed state of controls that are selected/on. Use for: Switches, checkboxes, radio buttons, segmented controls
182
+ export const idsColorControlSelectedDisabled = "#adaeb3"; // SEMANTIC - Background color for the disabled state of controlsthat are selected/on. Use for: Switches, checkboxes, radio buttons, segmented controls
183
+ export const idsColorControlSelectedIndicatorEnabled = "#2d2f35"; // SEMANTIC - Fill color for the interactive knob within switches and sliders.
184
+ export const idsColorControlSelectedIndicatorDisabled = "#c5c6cb"; // SEMANTIC - Fill color for the interactive knob in disabled state within switches and sliders.
185
+ export const idsColorFieldDefault = "#707784"; // SEMANTIC - Background color for the default state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
186
+ export const idsColorFieldHover = "#707784"; // SEMANTIC - Background color for the hover state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
187
+ export const idsColorFieldPressed = "#8e9099"; // SEMANTIC - Background color for the pressed state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
188
+ export const idsColorFieldOnfield = "#fafafb"; // SEMANTIC - Foreground color for text/icon on input fields. Use for: Non-empty state of input fields.
189
+ export const idsColorFieldOnfieldmuted = "#F8F8FA"; // SEMANTIC - Foreground color for text/icon on input fields. Use for: Default state of input fields.
190
+ export const idsColorItemUnselectedDefault = "#00000000"; // SEMANTIC – Background color for the default unselected state of ListItem, Tab and MenuItem.
191
+ export const idsColorItemUnselectedHover = "#142442"; // SEMANTIC – Background color for the hover unselected state of ListItem, Tab and MenuItem.
192
+ export const idsColorItemUnselectedPressed = "#1e3560"; // SEMANTIC – Background color for the pressed unselected state of ListItem, Tab and MenuItem.
193
+ export const idsColorItemUnselectedOnitem = "#fafafb"; // SEMANTIC – Foreground color for text and icon on the unselected states of Tabs, ListItem and MenuItem.
194
+ export const idsColorItemUnselectedOnitemdisabled = "#e0e1e4"; // SEMANTIC – Foreground color for text and icon on the unselected disabled state of Tabs, ListItem and MenuItem.
195
+ export const idsColorItemSelectedDefault = "lch(14.12 21.512 275.11 / 0.48)"; // SEMANTIC – Background color for the default selected state of ListItem, Tab and MenuItem.
196
+ export const idsColorItemSelectedHover = "#142442"; // SEMANTIC – Background color for the hover selected state of ListItem, Tab and MenuItem.
197
+ export const idsColorItemSelectedPressed = "#1e3560"; // SEMANTIC – Background color for the pressed selected state of ListItem, Tab and MenuItem.
198
+ export const idsColorItemSelectedOnitem = "#7eaaff"; // SEMANTIC – Foreground color for text and icon on the selected states of Tabs, ListItem and MenuItem.
199
199
  export const idsColorBorderTransparent = "#00000000"; // SEMANTIC - Transparent border. Use for: Composite border tokens that require transparent color.
200
- export const idsColorBorderStrong = "#2d2f35"; // SEMANTIC - Strong border. Use for: Composite border tokens that require a dark border color.
201
- export const idsColorBorderDefault = "#8e9099"; // SEMANTIC - Muted border. Use for: Composite border tokens for secondary containers, tables.
202
- export const idsColorBorderMuted = "#c5c6cb"; // SEMANTIC - Muted border. Use for: Composite border tokens for secondary containers, tables.
203
- export const idsColorBorderSubtle = "#ebebef"; // SEMANTIC - Subtle border. Use for: Composite border tokens for hairline dividers.
204
- export const idsColorBorderDisabled = "#adaeb3"; // SEMANTIC - Disabled border. Use for: Composite border tokens for disabled states.
205
- export const idsColorBorderSelected = "#3a64b8"; // SEMANTIC - Disabled border. Use for: Composite border tokens for disabled states.
200
+ export const idsColorBorderStrong = "#fafafb"; // SEMANTIC - Strong border. Use for: Composite border tokens that require a dark border color.
201
+ export const idsColorBorderDefault = "#e0e1e4"; // SEMANTIC - Muted border. Use for: Composite border tokens for secondary containers, tables.
202
+ export const idsColorBorderMuted = "#adaeb3"; // SEMANTIC - Muted border. Use for: Composite border tokens for secondary containers, tables.
203
+ export const idsColorBorderSubtle = "#707784"; // SEMANTIC - Subtle border. Use for: Composite border tokens for hairline dividers.
204
+ export const idsColorBorderDisabled = "#c5c6cb"; // SEMANTIC - Disabled border. Use for: Composite border tokens for disabled states.
205
+ export const idsColorBorderSelected = "#7eaaff"; // SEMANTIC - Disabled border. Use for: Composite border tokens for disabled states.
206
206
  export const idsColorBorderFocus = "#7eaaff"; // SEMANTIC - Focus ring color. Use for: Composite border tokens that are used for keyboard focus on all interactive elements.
207
207
  export const idsColorBoxshadowAlpha16 = "lch(5.0543 1.8805 272.92 / 0.16)"; // Box-shadow color with 16% opacity.
208
208
  export const idsColorBoxshadowAlpha24 = "lch(5.0543 1.8805 272.92 / 0.24)"; // Box-shadow color with 24% opacity.
package/dist/js/tokens.js CHANGED
@@ -174,13 +174,13 @@ export const idsColorControlUnselectedDefault = "#F8F8FA"; // SEMANTIC - Backgro
174
174
  export const idsColorControlUnselectedHover = "#e6edfb"; // SEMANTIC - Background color for the hover state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
175
175
  export const idsColorControlUnselectedPressed = "#d1def8"; // SEMANTIC - Background color for the pressed state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
176
176
  export const idsColorControlUnselectedDisabled = "#e0e1e4"; // SEMANTIC - Background color for the pressed state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
177
- export const idsColorControlUnselectedIndicatorDefault = "#ffffff"; // SEMANTIC - Fill color for the interactive knob within switches and sliders.
177
+ export const idsColorControlUnselectedIndicatorEnabled = "#ffffff"; // SEMANTIC - Fill color for the interactive knob within switches and sliders.
178
178
  export const idsColorControlUnselectedIndicatorDisabled = "#c5c6cb"; // SEMANTIC - Fill color for the interactive knob in disabled state within switches and sliders.
179
179
  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
180
180
  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
181
181
  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
182
182
  export const idsColorControlSelectedDisabled = "#c5c6cb"; // SEMANTIC - Background color for the disabled state of controlsthat are selected/on. Use for: Switches, checkboxes, radio buttons, segmented controls
183
- export const idsColorControlSelectedIndicatorDefault = "#ffffff"; // SEMANTIC - Fill color for the interactive knob within switches and sliders.
183
+ export const idsColorControlSelectedIndicatorEnabled = "#ffffff"; // SEMANTIC - Fill color for the interactive knob within switches and sliders.
184
184
  export const idsColorControlSelectedIndicatorDisabled = "#adaeb3"; // SEMANTIC - Fill color for the interactive knob in disabled state within switches and sliders.
185
185
  export const idsColorFieldDefault = "#F8F8FA"; // SEMANTIC - Background color for the default state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
186
186
  export const idsColorFieldHover = "#F8F8FA"; // SEMANTIC - Background color for the hover state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
package/dist/js/tokens.light.js CHANGED
@@ -174,13 +174,13 @@ export const idsColorControlUnselectedDefault = "#F8F8FA"; // SEMANTIC - Backgro
174
174
  export const idsColorControlUnselectedHover = "#e6edfb"; // SEMANTIC - Background color for the hover state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
175
175
  export const idsColorControlUnselectedPressed = "#d1def8"; // SEMANTIC - Background color for the pressed state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
176
176
  export const idsColorControlUnselectedDisabled = "#e0e1e4"; // SEMANTIC - Background color for the pressed state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
177
- export const idsColorControlUnselectedIndicatorDefault = "#ffffff"; // SEMANTIC - Fill color for the interactive knob within switches and sliders.
177
+ export const idsColorControlUnselectedIndicatorEnabled = "#ffffff"; // SEMANTIC - Fill color for the interactive knob within switches and sliders.
178
178
  export const idsColorControlUnselectedIndicatorDisabled = "#c5c6cb"; // SEMANTIC - Fill color for the interactive knob in disabled state within switches and sliders.
179
179
  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
180
180
  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
181
181
  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
182
182
  export const idsColorControlSelectedDisabled = "#c5c6cb"; // SEMANTIC - Background color for the disabled state of controlsthat are selected/on. Use for: Switches, checkboxes, radio buttons, segmented controls
183
- export const idsColorControlSelectedIndicatorDefault = "#ffffff"; // SEMANTIC - Fill color for the interactive knob within switches and sliders.
183
+ export const idsColorControlSelectedIndicatorEnabled = "#ffffff"; // SEMANTIC - Fill color for the interactive knob within switches and sliders.
184
184
  export const idsColorControlSelectedIndicatorDisabled = "#adaeb3"; // SEMANTIC - Fill color for the interactive knob in disabled state within switches and sliders.
185
185
  export const idsColorFieldDefault = "#F8F8FA"; // SEMANTIC - Background color for the default state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
186
186
  export const idsColorFieldHover = "#F8F8FA"; // SEMANTIC - Background color for the hover state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls