@inversestudio/design-tokens 1.1.1 → 1.1.3

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 +3 -3
  2. package/dist/css/tokens.dark.css +6 -6
  3. package/dist/css/tokens.light.css +3 -3
  4. package/dist/esm/tokens.dark.js +6 -6
  5. package/dist/esm/tokens.js +3 -3
  6. package/dist/esm/tokens.light.js +3 -3
  7. package/dist/js/tokens.dark.js +6 -6
  8. package/dist/js/tokens.js +3 -3
  9. package/dist/js/tokens.light.js +3 -3
  10. package/dist/json/tokens.dark.json +6 -6
  11. package/dist/json/tokens.dark.nested.json +7 -7
  12. package/dist/json/tokens.json +3 -3
  13. package/dist/json/tokens.light.json +3 -3
  14. package/dist/json/tokens.light.nested.json +4 -4
  15. package/dist/json/tokens.nested.json +4 -4
  16. package/dist/scss/_tokens.dark.scss +12 -12
  17. package/dist/scss/_tokens.light.scss +6 -6
  18. package/dist/scss/_tokens.scss +6 -6
  19. package/dist/types/tokens.d.ts +10 -10
  20. package/dist/types/tokens.dark.d.ts +19 -19
  21. package/dist/types/tokens.light.d.ts +10 -10
  22. package/package.json +1 -1
package/dist/css/tokens.css CHANGED
@@ -99,8 +99,8 @@
99
99
  --ids-typography-title-1-125x: 600 18px/20px Tomato Grotesk;
100
100
  --ids-borderradius-0-25x: 4px;
101
101
  --ids-borderradius-0-5x: 8px;
102
- --ids-borderradius-1x: 16px;
103
102
  --ids-borderradius-full: 1600px;
103
+ --ids-borderradius-1x: 16px;
104
104
  --ids-border-action-primary: 2px solid #00000000;
105
105
  --ids-border-action-secondary: 2px solid #2d2f35;
106
106
  --ids-border-action-disabled: 2px solid #adaeb3;
@@ -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
@@ -99,8 +99,8 @@
99
99
  --ids-typography-title-1-125x: 600 18px/20px Tomato Grotesk;
100
100
  --ids-borderradius-0-25x: 4px;
101
101
  --ids-borderradius-0-5x: 8px;
102
- --ids-borderradius-1x: 16px;
103
102
  --ids-borderradius-full: 1600px;
103
+ --ids-borderradius-1x: 16px;
104
104
  --ids-border-action-primary: 2px solid #00000000;
105
105
  --ids-border-action-secondary: 2px solid #2d2f35;
106
106
  --ids-border-action-disabled: 2px solid #adaeb3;
@@ -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;
@@ -151,12 +151,12 @@
151
151
  --ids-color-item-unselected-default: #00000000;
152
152
  --ids-color-item-unselected-hover: #e6edfb;
153
153
  --ids-color-item-unselected-pressed: #d1def8;
154
- --ids-color-item-unselected-onnavigation: #2d2f35;
155
- --ids-color-item-unselected-onnavigationdisabled: #8e9099;
154
+ --ids-color-item-unselected-onitem: #2d2f35;
155
+ --ids-color-item-unselected-onitemdisabled: #8e9099;
156
156
  --ids-color-item-selected-default: lch(93.522 7.6467 266.59 / 0.48);
157
157
  --ids-color-item-selected-hover: #e6edfb;
158
158
  --ids-color-item-selected-pressed: #d1def8;
159
- --ids-color-item-selected-onnavigation: #3a64b8;
159
+ --ids-color-item-selected-onitem: #3a64b8;
160
160
  --ids-color-border-transparent: #00000000;
161
161
  --ids-color-border-strong: #2d2f35;
162
162
  --ids-color-border-default: #8e9099;
package/dist/css/tokens.light.css CHANGED
@@ -99,8 +99,8 @@
99
99
  --ids-typography-title-1-125x: 600 18px/20px Tomato Grotesk;
100
100
  --ids-borderradius-0-25x: 4px;
101
101
  --ids-borderradius-0-5x: 8px;
102
- --ids-borderradius-1x: 16px;
103
102
  --ids-borderradius-full: 1600px;
103
+ --ids-borderradius-1x: 16px;
104
104
  --ids-border-action-primary: 2px solid #00000000;
105
105
  --ids-border-action-secondary: 2px solid #2d2f35;
106
106
  --ids-border-action-disabled: 2px solid #adaeb3;
@@ -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
@@ -102,8 +102,8 @@ export const idsTypographyTitle1125x = {
102
102
  };
103
103
  export const idsBorderradius025x = "4px"; // SEMANTIC - Small radius (4px). Use for: tags, badges.
104
104
  export const idsBorderradius05x = "8px"; // SEMANTIC - Medium radius (8px). Use for: large cerds.
105
- export const idsBorderradius1x = "16px";
106
105
  export const idsBorderradiusFull = "1600px"; // SEMANTIC - Full/pill radius. Use for: pills, avatars.
106
+ export const idsBorderradius1x = "16px";
107
107
  export const idsBorderActionPrimary = {
108
108
  color: "#00000000",
109
109
  width: "2px",
@@ -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
@@ -190,12 +190,12 @@ export const idsColorFieldOnfieldmuted = "#4d5057"; // SEMANTIC - Foreground col
190
190
  export const idsColorItemUnselectedDefault = "#00000000"; // SEMANTIC – Background color for the default unselected state of ListItem, Tab and MenuItem.
191
191
  export const idsColorItemUnselectedHover = "#e6edfb"; // SEMANTIC – Background color for the hover unselected state of ListItem, Tab and MenuItem.
192
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.
193
+ export const idsColorItemUnselectedOnitem = "#2d2f35"; // SEMANTIC – Foreground color for text and icon on the unselected states of Tabs, ListItem and MenuItem.
194
+ export const idsColorItemUnselectedOnitemdisabled = "#8e9099"; // SEMANTIC – Foreground color for text and icon on the unselected disabled state of Tabs, ListItem and MenuItem.
195
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
196
  export const idsColorItemSelectedHover = "#e6edfb"; // SEMANTIC – Background color for the hover selected state of ListItem, Tab and MenuItem.
197
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.
198
+ export const idsColorItemSelectedOnitem = "#3a64b8"; // 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
200
  export const idsColorBorderStrong = "#2d2f35"; // SEMANTIC - Strong border. Use for: Composite border tokens that require a dark border color.
201
201
  export const idsColorBorderDefault = "#8e9099"; // SEMANTIC - Muted border. Use for: Composite border tokens for secondary containers, tables.
package/dist/esm/tokens.js CHANGED
@@ -102,8 +102,8 @@ export const idsTypographyTitle1125x = {
102
102
  };
103
103
  export const idsBorderradius025x = "4px"; // SEMANTIC - Small radius (4px). Use for: tags, badges.
104
104
  export const idsBorderradius05x = "8px"; // SEMANTIC - Medium radius (8px). Use for: large cerds.
105
- export const idsBorderradius1x = "16px";
106
105
  export const idsBorderradiusFull = "1600px"; // SEMANTIC - Full/pill radius. Use for: pills, avatars.
106
+ export const idsBorderradius1x = "16px";
107
107
  export const idsBorderActionPrimary = {
108
108
  color: "#00000000",
109
109
  width: "2px",
@@ -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
@@ -102,8 +102,8 @@ export const idsTypographyTitle1125x = {
102
102
  };
103
103
  export const idsBorderradius025x = "4px"; // SEMANTIC - Small radius (4px). Use for: tags, badges.
104
104
  export const idsBorderradius05x = "8px"; // SEMANTIC - Medium radius (8px). Use for: large cerds.
105
- export const idsBorderradius1x = "16px";
106
105
  export const idsBorderradiusFull = "1600px"; // SEMANTIC - Full/pill radius. Use for: pills, avatars.
106
+ export const idsBorderradius1x = "16px";
107
107
  export const idsBorderActionPrimary = {
108
108
  color: "#00000000",
109
109
  width: "2px",
@@ -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
@@ -102,8 +102,8 @@ export const idsTypographyTitle1125x = {
102
102
  };
103
103
  export const idsBorderradius025x = "4px"; // SEMANTIC - Small radius (4px). Use for: tags, badges.
104
104
  export const idsBorderradius05x = "8px"; // SEMANTIC - Medium radius (8px). Use for: large cerds.
105
- export const idsBorderradius1x = "16px";
106
105
  export const idsBorderradiusFull = "1600px"; // SEMANTIC - Full/pill radius. Use for: pills, avatars.
106
+ export const idsBorderradius1x = "16px";
107
107
  export const idsBorderActionPrimary = {
108
108
  color: "#00000000",
109
109
  width: "2px",
@@ -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
@@ -190,12 +190,12 @@ export const idsColorFieldOnfieldmuted = "#4d5057"; // SEMANTIC - Foreground col
190
190
  export const idsColorItemUnselectedDefault = "#00000000"; // SEMANTIC – Background color for the default unselected state of ListItem, Tab and MenuItem.
191
191
  export const idsColorItemUnselectedHover = "#e6edfb"; // SEMANTIC – Background color for the hover unselected state of ListItem, Tab and MenuItem.
192
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.
193
+ export const idsColorItemUnselectedOnitem = "#2d2f35"; // SEMANTIC – Foreground color for text and icon on the unselected states of Tabs, ListItem and MenuItem.
194
+ export const idsColorItemUnselectedOnitemdisabled = "#8e9099"; // SEMANTIC – Foreground color for text and icon on the unselected disabled state of Tabs, ListItem and MenuItem.
195
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
196
  export const idsColorItemSelectedHover = "#e6edfb"; // SEMANTIC – Background color for the hover selected state of ListItem, Tab and MenuItem.
197
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.
198
+ export const idsColorItemSelectedOnitem = "#3a64b8"; // 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
200
  export const idsColorBorderStrong = "#2d2f35"; // SEMANTIC - Strong border. Use for: Composite border tokens that require a dark border color.
201
201
  export const idsColorBorderDefault = "#8e9099"; // SEMANTIC - Muted border. Use for: Composite border tokens for secondary containers, tables.
package/dist/js/tokens.js CHANGED
@@ -102,8 +102,8 @@ export const idsTypographyTitle1125x = {
102
102
  };
103
103
  export const idsBorderradius025x = "4px"; // SEMANTIC - Small radius (4px). Use for: tags, badges.
104
104
  export const idsBorderradius05x = "8px"; // SEMANTIC - Medium radius (8px). Use for: large cerds.
105
- export const idsBorderradius1x = "16px";
106
105
  export const idsBorderradiusFull = "1600px"; // SEMANTIC - Full/pill radius. Use for: pills, avatars.
106
+ export const idsBorderradius1x = "16px";
107
107
  export const idsBorderActionPrimary = {
108
108
  color: "#00000000",
109
109
  width: "2px",
@@ -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
@@ -102,8 +102,8 @@ export const idsTypographyTitle1125x = {
102
102
  };
103
103
  export const idsBorderradius025x = "4px"; // SEMANTIC - Small radius (4px). Use for: tags, badges.
104
104
  export const idsBorderradius05x = "8px"; // SEMANTIC - Medium radius (8px). Use for: large cerds.
105
- export const idsBorderradius1x = "16px";
106
105
  export const idsBorderradiusFull = "1600px"; // SEMANTIC - Full/pill radius. Use for: pills, avatars.
106
+ export const idsBorderradius1x = "16px";
107
107
  export const idsBorderActionPrimary = {
108
108
  color: "#00000000",
109
109
  width: "2px",
@@ -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/json/tokens.dark.json CHANGED
@@ -99,8 +99,8 @@
99
99
  },
100
100
  "idsBorderradius025x": "4px",
101
101
  "idsBorderradius05x": "8px",
102
- "idsBorderradius1x": "16px",
103
102
  "idsBorderradiusFull": "1600px",
103
+ "idsBorderradius1x": "16px",
104
104
  "idsBorderActionPrimary": {
105
105
  "color": "#00000000",
106
106
  "width": "2px",
@@ -171,13 +171,13 @@
171
171
  "idsColorControlUnselectedHover": "#e6edfb",
172
172
  "idsColorControlUnselectedPressed": "#d1def8",
173
173
  "idsColorControlUnselectedDisabled": "#e0e1e4",
174
- "idsColorControlUnselectedIndicatorDefault": "#ffffff",
174
+ "idsColorControlUnselectedIndicatorEnabled": "#ffffff",
175
175
  "idsColorControlUnselectedIndicatorDisabled": "#c5c6cb",
176
176
  "idsColorControlSelectedDefault": "#4d5057",
177
177
  "idsColorControlSelectedHover": "#707784",
178
178
  "idsColorControlSelectedPressed": "#101114",
179
179
  "idsColorControlSelectedDisabled": "#c5c6cb",
180
- "idsColorControlSelectedIndicatorDefault": "#ffffff",
180
+ "idsColorControlSelectedIndicatorEnabled": "#ffffff",
181
181
  "idsColorControlSelectedIndicatorDisabled": "#adaeb3",
182
182
  "idsColorFieldDefault": "#F8F8FA",
183
183
  "idsColorFieldHover": "#F8F8FA",
@@ -187,12 +187,12 @@
187
187
  "idsColorItemUnselectedDefault": "#00000000",
188
188
  "idsColorItemUnselectedHover": "#e6edfb",
189
189
  "idsColorItemUnselectedPressed": "#d1def8",
190
- "idsColorItemUnselectedOnnavigation": "#2d2f35",
191
- "idsColorItemUnselectedOnnavigationdisabled": "#8e9099",
190
+ "idsColorItemUnselectedOnitem": "#2d2f35",
191
+ "idsColorItemUnselectedOnitemdisabled": "#8e9099",
192
192
  "idsColorItemSelectedDefault": "lch(93.522 7.6467 266.59 / 0.48)",
193
193
  "idsColorItemSelectedHover": "#e6edfb",
194
194
  "idsColorItemSelectedPressed": "#d1def8",
195
- "idsColorItemSelectedOnnavigation": "#3a64b8",
195
+ "idsColorItemSelectedOnitem": "#3a64b8",
196
196
  "idsColorBorderTransparent": "#00000000",
197
197
  "idsColorBorderStrong": "#2d2f35",
198
198
  "idsColorBorderDefault": "#8e9099",
package/dist/json/tokens.dark.nested.json CHANGED
@@ -137,8 +137,8 @@
137
137
  "borderRadius": {
138
138
  "0_25x": "4px",
139
139
  "0_5x": "8px",
140
- "1x": "16px",
141
- "full": "1600px"
140
+ "full": "1600px",
141
+ "1x": "16px"
142
142
  },
143
143
  "border": {
144
144
  "action": {
@@ -236,7 +236,7 @@
236
236
  "pressed": "#d1def8",
237
237
  "disabled": "#e0e1e4",
238
238
  "indicator": {
239
- "default": "#ffffff",
239
+ "enabled": "#ffffff",
240
240
  "disabled": "#c5c6cb"
241
241
  }
242
242
  },
@@ -246,7 +246,7 @@
246
246
  "pressed": "#101114",
247
247
  "disabled": "#c5c6cb",
248
248
  "indicator": {
249
- "default": "#ffffff",
249
+ "enabled": "#ffffff",
250
250
  "disabled": "#adaeb3"
251
251
  }
252
252
  }
@@ -263,14 +263,14 @@
263
263
  "default": "#00000000",
264
264
  "hover": "#e6edfb",
265
265
  "pressed": "#d1def8",
266
- "onNavigation": "#2d2f35",
267
- "onNavigationDisabled": "#8e9099"
266
+ "onItem": "#2d2f35",
267
+ "onItemDisabled": "#8e9099"
268
268
  },
269
269
  "selected": {
270
270
  "default": "lch(93.522 7.6467 266.59 / 0.48)",
271
271
  "hover": "#e6edfb",
272
272
  "pressed": "#d1def8",
273
- "onNavigation": "#3a64b8"
273
+ "onItem": "#3a64b8"
274
274
  }
275
275
  },
276
276
  "border": {
package/dist/json/tokens.json CHANGED
@@ -99,8 +99,8 @@
99
99
  },
100
100
  "idsBorderradius025x": "4px",
101
101
  "idsBorderradius05x": "8px",
102
- "idsBorderradius1x": "16px",
103
102
  "idsBorderradiusFull": "1600px",
103
+ "idsBorderradius1x": "16px",
104
104
  "idsBorderActionPrimary": {
105
105
  "color": "#00000000",
106
106
  "width": "2px",
@@ -171,13 +171,13 @@
171
171
  "idsColorControlUnselectedHover": "#e6edfb",
172
172
  "idsColorControlUnselectedPressed": "#d1def8",
173
173
  "idsColorControlUnselectedDisabled": "#e0e1e4",
174
- "idsColorControlUnselectedIndicatorDefault": "#ffffff",
174
+ "idsColorControlUnselectedIndicatorEnabled": "#ffffff",
175
175
  "idsColorControlUnselectedIndicatorDisabled": "#c5c6cb",
176
176
  "idsColorControlSelectedDefault": "#4d5057",
177
177
  "idsColorControlSelectedHover": "#707784",
178
178
  "idsColorControlSelectedPressed": "#101114",
179
179
  "idsColorControlSelectedDisabled": "#c5c6cb",
180
- "idsColorControlSelectedIndicatorDefault": "#ffffff",
180
+ "idsColorControlSelectedIndicatorEnabled": "#ffffff",
181
181
  "idsColorControlSelectedIndicatorDisabled": "#adaeb3",
182
182
  "idsColorFieldDefault": "#F8F8FA",
183
183
  "idsColorFieldHover": "#F8F8FA",
package/dist/json/tokens.light.json CHANGED
@@ -99,8 +99,8 @@
99
99
  },
100
100
  "idsBorderradius025x": "4px",
101
101
  "idsBorderradius05x": "8px",
102
- "idsBorderradius1x": "16px",
103
102
  "idsBorderradiusFull": "1600px",
103
+ "idsBorderradius1x": "16px",
104
104
  "idsBorderActionPrimary": {
105
105
  "color": "#00000000",
106
106
  "width": "2px",
@@ -171,13 +171,13 @@
171
171
  "idsColorControlUnselectedHover": "#e6edfb",
172
172
  "idsColorControlUnselectedPressed": "#d1def8",
173
173
  "idsColorControlUnselectedDisabled": "#e0e1e4",
174
- "idsColorControlUnselectedIndicatorDefault": "#ffffff",
174
+ "idsColorControlUnselectedIndicatorEnabled": "#ffffff",
175
175
  "idsColorControlUnselectedIndicatorDisabled": "#c5c6cb",
176
176
  "idsColorControlSelectedDefault": "#4d5057",
177
177
  "idsColorControlSelectedHover": "#707784",
178
178
  "idsColorControlSelectedPressed": "#101114",
179
179
  "idsColorControlSelectedDisabled": "#c5c6cb",
180
- "idsColorControlSelectedIndicatorDefault": "#ffffff",
180
+ "idsColorControlSelectedIndicatorEnabled": "#ffffff",
181
181
  "idsColorControlSelectedIndicatorDisabled": "#adaeb3",
182
182
  "idsColorFieldDefault": "#F8F8FA",
183
183
  "idsColorFieldHover": "#F8F8FA",
package/dist/json/tokens.light.nested.json CHANGED
@@ -137,8 +137,8 @@
137
137
  "borderRadius": {
138
138
  "0_25x": "4px",
139
139
  "0_5x": "8px",
140
- "1x": "16px",
141
- "full": "1600px"
140
+ "full": "1600px",
141
+ "1x": "16px"
142
142
  },
143
143
  "border": {
144
144
  "action": {
@@ -236,7 +236,7 @@
236
236
  "pressed": "#d1def8",
237
237
  "disabled": "#e0e1e4",
238
238
  "indicator": {
239
- "default": "#ffffff",
239
+ "enabled": "#ffffff",
240
240
  "disabled": "#c5c6cb"
241
241
  }
242
242
  },
@@ -246,7 +246,7 @@
246
246
  "pressed": "#101114",
247
247
  "disabled": "#c5c6cb",
248
248
  "indicator": {
249
- "default": "#ffffff",
249
+ "enabled": "#ffffff",
250
250
  "disabled": "#adaeb3"
251
251
  }
252
252
  }
package/dist/json/tokens.nested.json CHANGED
@@ -137,8 +137,8 @@
137
137
  "borderRadius": {
138
138
  "0_25x": "4px",
139
139
  "0_5x": "8px",
140
- "1x": "16px",
141
- "full": "1600px"
140
+ "full": "1600px",
141
+ "1x": "16px"
142
142
  },
143
143
  "border": {
144
144
  "action": {
@@ -236,7 +236,7 @@
236
236
  "pressed": "#d1def8",
237
237
  "disabled": "#e0e1e4",
238
238
  "indicator": {
239
- "default": "#ffffff",
239
+ "enabled": "#ffffff",
240
240
  "disabled": "#c5c6cb"
241
241
  }
242
242
  },
@@ -246,7 +246,7 @@
246
246
  "pressed": "#101114",
247
247
  "disabled": "#c5c6cb",
248
248
  "indicator": {
249
- "default": "#ffffff",
249
+ "enabled": "#ffffff",
250
250
  "disabled": "#adaeb3"
251
251
  }
252
252
  }
package/dist/scss/_tokens.dark.scss CHANGED
@@ -89,8 +89,8 @@ $ids-typography-label-1x: 600 16px/16px Tomato Grotesk;
89
89
  $ids-typography-title-1-125x: 600 18px/20px Tomato Grotesk;
90
90
  $ids-borderradius-0-25x: 4px;
91
91
  $ids-borderradius-0-5x: 8px;
92
- $ids-borderradius-1x: 16px;
93
92
  $ids-borderradius-full: 1600px;
93
+ $ids-borderradius-1x: 16px;
94
94
  $ids-border-action-primary: 2px solid #00000000;
95
95
  $ids-border-action-secondary: 2px solid #2d2f35;
96
96
  $ids-border-action-disabled: 2px solid #adaeb3;
@@ -125,13 +125,13 @@ $ids-color-control-unselected-default: #F8F8FA;
125
125
  $ids-color-control-unselected-hover: #e6edfb;
126
126
  $ids-color-control-unselected-pressed: #d1def8;
127
127
  $ids-color-control-unselected-disabled: #e0e1e4;
128
- $ids-color-control-unselected-indicator-default: #ffffff;
128
+ $ids-color-control-unselected-indicator-enabled: #ffffff;
129
129
  $ids-color-control-unselected-indicator-disabled: #c5c6cb;
130
130
  $ids-color-control-selected-default: #4d5057;
131
131
  $ids-color-control-selected-hover: #707784;
132
132
  $ids-color-control-selected-pressed: #101114;
133
133
  $ids-color-control-selected-disabled: #c5c6cb;
134
- $ids-color-control-selected-indicator-default: #ffffff;
134
+ $ids-color-control-selected-indicator-enabled: #ffffff;
135
135
  $ids-color-control-selected-indicator-disabled: #adaeb3;
136
136
  $ids-color-field-default: #F8F8FA;
137
137
  $ids-color-field-hover: #F8F8FA;
@@ -141,12 +141,12 @@ $ids-color-field-onfieldmuted: #4d5057;
141
141
  $ids-color-item-unselected-default: #00000000;
142
142
  $ids-color-item-unselected-hover: #e6edfb;
143
143
  $ids-color-item-unselected-pressed: #d1def8;
144
- $ids-color-item-unselected-onnavigation: #2d2f35;
145
- $ids-color-item-unselected-onnavigationdisabled: #8e9099;
144
+ $ids-color-item-unselected-onitem: #2d2f35;
145
+ $ids-color-item-unselected-onitemdisabled: #8e9099;
146
146
  $ids-color-item-selected-default: lch(93.522 7.6467 266.59 / 0.48);
147
147
  $ids-color-item-selected-hover: #e6edfb;
148
148
  $ids-color-item-selected-pressed: #d1def8;
149
- $ids-color-item-selected-onnavigation: #3a64b8;
149
+ $ids-color-item-selected-onitem: #3a64b8;
150
150
  $ids-color-border-transparent: #00000000;
151
151
  $ids-color-border-strong: #2d2f35;
152
152
  $ids-color-border-default: #8e9099;
@@ -246,8 +246,8 @@ $ids-tokens: (
246
246
  'ids-typography-title-1-125x': $ids-typography-title-1-125x,
247
247
  'ids-borderradius-0-25x': $ids-borderradius-0-25x,
248
248
  'ids-borderradius-0-5x': $ids-borderradius-0-5x,
249
- 'ids-borderradius-1x': $ids-borderradius-1x,
250
249
  'ids-borderradius-full': $ids-borderradius-full,
250
+ 'ids-borderradius-1x': $ids-borderradius-1x,
251
251
  'ids-border-action-primary': $ids-border-action-primary,
252
252
  'ids-border-action-secondary': $ids-border-action-secondary,
253
253
  'ids-border-action-disabled': $ids-border-action-disabled,
@@ -282,13 +282,13 @@ $ids-tokens: (
282
282
  'ids-color-control-unselected-hover': $ids-color-control-unselected-hover,
283
283
  'ids-color-control-unselected-pressed': $ids-color-control-unselected-pressed,
284
284
  'ids-color-control-unselected-disabled': $ids-color-control-unselected-disabled,
285
- 'ids-color-control-unselected-indicator-default': $ids-color-control-unselected-indicator-default,
285
+ 'ids-color-control-unselected-indicator-enabled': $ids-color-control-unselected-indicator-enabled,
286
286
  'ids-color-control-unselected-indicator-disabled': $ids-color-control-unselected-indicator-disabled,
287
287
  'ids-color-control-selected-default': $ids-color-control-selected-default,
288
288
  'ids-color-control-selected-hover': $ids-color-control-selected-hover,
289
289
  'ids-color-control-selected-pressed': $ids-color-control-selected-pressed,
290
290
  'ids-color-control-selected-disabled': $ids-color-control-selected-disabled,
291
- 'ids-color-control-selected-indicator-default': $ids-color-control-selected-indicator-default,
291
+ 'ids-color-control-selected-indicator-enabled': $ids-color-control-selected-indicator-enabled,
292
292
  'ids-color-control-selected-indicator-disabled': $ids-color-control-selected-indicator-disabled,
293
293
  'ids-color-field-default': $ids-color-field-default,
294
294
  'ids-color-field-hover': $ids-color-field-hover,
@@ -298,12 +298,12 @@ $ids-tokens: (
298
298
  'ids-color-item-unselected-default': $ids-color-item-unselected-default,
299
299
  'ids-color-item-unselected-hover': $ids-color-item-unselected-hover,
300
300
  'ids-color-item-unselected-pressed': $ids-color-item-unselected-pressed,
301
- 'ids-color-item-unselected-onnavigation': $ids-color-item-unselected-onnavigation,
302
- 'ids-color-item-unselected-onnavigationdisabled': $ids-color-item-unselected-onnavigationdisabled,
301
+ 'ids-color-item-unselected-onitem': $ids-color-item-unselected-onitem,
302
+ 'ids-color-item-unselected-onitemdisabled': $ids-color-item-unselected-onitemdisabled,
303
303
  'ids-color-item-selected-default': $ids-color-item-selected-default,
304
304
  'ids-color-item-selected-hover': $ids-color-item-selected-hover,
305
305
  'ids-color-item-selected-pressed': $ids-color-item-selected-pressed,
306
- 'ids-color-item-selected-onnavigation': $ids-color-item-selected-onnavigation,
306
+ 'ids-color-item-selected-onitem': $ids-color-item-selected-onitem,
307
307
  'ids-color-border-transparent': $ids-color-border-transparent,
308
308
  'ids-color-border-strong': $ids-color-border-strong,
309
309
  'ids-color-border-default': $ids-color-border-default,
package/dist/scss/_tokens.light.scss CHANGED
@@ -89,8 +89,8 @@ $ids-typography-label-1x: 600 16px/16px Tomato Grotesk;
89
89
  $ids-typography-title-1-125x: 600 18px/20px Tomato Grotesk;
90
90
  $ids-borderradius-0-25x: 4px;
91
91
  $ids-borderradius-0-5x: 8px;
92
- $ids-borderradius-1x: 16px;
93
92
  $ids-borderradius-full: 1600px;
93
+ $ids-borderradius-1x: 16px;
94
94
  $ids-border-action-primary: 2px solid #00000000;
95
95
  $ids-border-action-secondary: 2px solid #2d2f35;
96
96
  $ids-border-action-disabled: 2px solid #adaeb3;
@@ -125,13 +125,13 @@ $ids-color-control-unselected-default: #F8F8FA;
125
125
  $ids-color-control-unselected-hover: #e6edfb;
126
126
  $ids-color-control-unselected-pressed: #d1def8;
127
127
  $ids-color-control-unselected-disabled: #e0e1e4;
128
- $ids-color-control-unselected-indicator-default: #ffffff;
128
+ $ids-color-control-unselected-indicator-enabled: #ffffff;
129
129
  $ids-color-control-unselected-indicator-disabled: #c5c6cb;
130
130
  $ids-color-control-selected-default: #4d5057;
131
131
  $ids-color-control-selected-hover: #707784;
132
132
  $ids-color-control-selected-pressed: #101114;
133
133
  $ids-color-control-selected-disabled: #c5c6cb;
134
- $ids-color-control-selected-indicator-default: #ffffff;
134
+ $ids-color-control-selected-indicator-enabled: #ffffff;
135
135
  $ids-color-control-selected-indicator-disabled: #adaeb3;
136
136
  $ids-color-field-default: #F8F8FA;
137
137
  $ids-color-field-hover: #F8F8FA;
@@ -246,8 +246,8 @@ $ids-tokens: (
246
246
  'ids-typography-title-1-125x': $ids-typography-title-1-125x,
247
247
  'ids-borderradius-0-25x': $ids-borderradius-0-25x,
248
248
  'ids-borderradius-0-5x': $ids-borderradius-0-5x,
249
- 'ids-borderradius-1x': $ids-borderradius-1x,
250
249
  'ids-borderradius-full': $ids-borderradius-full,
250
+ 'ids-borderradius-1x': $ids-borderradius-1x,
251
251
  'ids-border-action-primary': $ids-border-action-primary,
252
252
  'ids-border-action-secondary': $ids-border-action-secondary,
253
253
  'ids-border-action-disabled': $ids-border-action-disabled,
@@ -282,13 +282,13 @@ $ids-tokens: (
282
282
  'ids-color-control-unselected-hover': $ids-color-control-unselected-hover,
283
283
  'ids-color-control-unselected-pressed': $ids-color-control-unselected-pressed,
284
284
  'ids-color-control-unselected-disabled': $ids-color-control-unselected-disabled,
285
- 'ids-color-control-unselected-indicator-default': $ids-color-control-unselected-indicator-default,
285
+ 'ids-color-control-unselected-indicator-enabled': $ids-color-control-unselected-indicator-enabled,
286
286
  'ids-color-control-unselected-indicator-disabled': $ids-color-control-unselected-indicator-disabled,
287
287
  'ids-color-control-selected-default': $ids-color-control-selected-default,
288
288
  'ids-color-control-selected-hover': $ids-color-control-selected-hover,
289
289
  'ids-color-control-selected-pressed': $ids-color-control-selected-pressed,
290
290
  'ids-color-control-selected-disabled': $ids-color-control-selected-disabled,
291
- 'ids-color-control-selected-indicator-default': $ids-color-control-selected-indicator-default,
291
+ 'ids-color-control-selected-indicator-enabled': $ids-color-control-selected-indicator-enabled,
292
292
  'ids-color-control-selected-indicator-disabled': $ids-color-control-selected-indicator-disabled,
293
293
  'ids-color-field-default': $ids-color-field-default,
294
294
  'ids-color-field-hover': $ids-color-field-hover,
package/dist/scss/_tokens.scss CHANGED
@@ -89,8 +89,8 @@ $ids-typography-label-1x: 600 16px/16px Tomato Grotesk;
89
89
  $ids-typography-title-1-125x: 600 18px/20px Tomato Grotesk;
90
90
  $ids-borderradius-0-25x: 4px;
91
91
  $ids-borderradius-0-5x: 8px;
92
- $ids-borderradius-1x: 16px;
93
92
  $ids-borderradius-full: 1600px;
93
+ $ids-borderradius-1x: 16px;
94
94
  $ids-border-action-primary: 2px solid #00000000;
95
95
  $ids-border-action-secondary: 2px solid #2d2f35;
96
96
  $ids-border-action-disabled: 2px solid #adaeb3;
@@ -125,13 +125,13 @@ $ids-color-control-unselected-default: #F8F8FA;
125
125
  $ids-color-control-unselected-hover: #e6edfb;
126
126
  $ids-color-control-unselected-pressed: #d1def8;
127
127
  $ids-color-control-unselected-disabled: #e0e1e4;
128
- $ids-color-control-unselected-indicator-default: #ffffff;
128
+ $ids-color-control-unselected-indicator-enabled: #ffffff;
129
129
  $ids-color-control-unselected-indicator-disabled: #c5c6cb;
130
130
  $ids-color-control-selected-default: #4d5057;
131
131
  $ids-color-control-selected-hover: #707784;
132
132
  $ids-color-control-selected-pressed: #101114;
133
133
  $ids-color-control-selected-disabled: #c5c6cb;
134
- $ids-color-control-selected-indicator-default: #ffffff;
134
+ $ids-color-control-selected-indicator-enabled: #ffffff;
135
135
  $ids-color-control-selected-indicator-disabled: #adaeb3;
136
136
  $ids-color-field-default: #F8F8FA;
137
137
  $ids-color-field-hover: #F8F8FA;
@@ -246,8 +246,8 @@ $ids-tokens: (
246
246
  'ids-typography-title-1-125x': $ids-typography-title-1-125x,
247
247
  'ids-borderradius-0-25x': $ids-borderradius-0-25x,
248
248
  'ids-borderradius-0-5x': $ids-borderradius-0-5x,
249
- 'ids-borderradius-1x': $ids-borderradius-1x,
250
249
  'ids-borderradius-full': $ids-borderradius-full,
250
+ 'ids-borderradius-1x': $ids-borderradius-1x,
251
251
  'ids-border-action-primary': $ids-border-action-primary,
252
252
  'ids-border-action-secondary': $ids-border-action-secondary,
253
253
  'ids-border-action-disabled': $ids-border-action-disabled,
@@ -282,13 +282,13 @@ $ids-tokens: (
282
282
  'ids-color-control-unselected-hover': $ids-color-control-unselected-hover,
283
283
  'ids-color-control-unselected-pressed': $ids-color-control-unselected-pressed,
284
284
  'ids-color-control-unselected-disabled': $ids-color-control-unselected-disabled,
285
- 'ids-color-control-unselected-indicator-default': $ids-color-control-unselected-indicator-default,
285
+ 'ids-color-control-unselected-indicator-enabled': $ids-color-control-unselected-indicator-enabled,
286
286
  'ids-color-control-unselected-indicator-disabled': $ids-color-control-unselected-indicator-disabled,
287
287
  'ids-color-control-selected-default': $ids-color-control-selected-default,
288
288
  'ids-color-control-selected-hover': $ids-color-control-selected-hover,
289
289
  'ids-color-control-selected-pressed': $ids-color-control-selected-pressed,
290
290
  'ids-color-control-selected-disabled': $ids-color-control-selected-disabled,
291
- 'ids-color-control-selected-indicator-default': $ids-color-control-selected-indicator-default,
291
+ 'ids-color-control-selected-indicator-enabled': $ids-color-control-selected-indicator-enabled,
292
292
  'ids-color-control-selected-indicator-disabled': $ids-color-control-selected-indicator-disabled,
293
293
  'ids-color-field-default': $ids-color-field-default,
294
294
  'ids-color-field-hover': $ids-color-field-hover,
package/dist/types/tokens.d.ts CHANGED
@@ -128,8 +128,8 @@ export interface IDSTokens {
128
128
  borderRadius: {
129
129
  '0_25x': string;
130
130
  '0_5x': string;
131
- '1x': string;
132
131
  full: string;
132
+ '1x': string;
133
133
  };
134
134
  border: {
135
135
  action: {
@@ -191,7 +191,7 @@ export interface IDSTokens {
191
191
  pressed: string;
192
192
  disabled: string;
193
193
  indicator: {
194
- default: string;
194
+ enabled: string;
195
195
  disabled: string;
196
196
  };
197
197
  };
@@ -201,7 +201,7 @@ export interface IDSTokens {
201
201
  pressed: string;
202
202
  disabled: string;
203
203
  indicator: {
204
- default: string;
204
+ enabled: string;
205
205
  disabled: string;
206
206
  };
207
207
  };
@@ -371,8 +371,8 @@ export const tokens: IDSTokens = {
371
371
  borderRadius: {
372
372
  '0_25x': '4px',
373
373
  '0_5x': '8px',
374
- '1x': '16px',
375
- full: '1600px'
374
+ full: '1600px',
375
+ '1x': '16px'
376
376
  },
377
377
  border: {
378
378
  action: {
@@ -434,7 +434,7 @@ export const tokens: IDSTokens = {
434
434
  pressed: '#d1def8',
435
435
  disabled: '#e0e1e4',
436
436
  indicator: {
437
- default: '#ffffff',
437
+ enabled: '#ffffff',
438
438
  disabled: '#c5c6cb'
439
439
  }
440
440
  },
@@ -444,7 +444,7 @@ export const tokens: IDSTokens = {
444
444
  pressed: '#101114',
445
445
  disabled: '#c5c6cb',
446
446
  indicator: {
447
- default: '#ffffff',
447
+ enabled: '#ffffff',
448
448
  disabled: '#adaeb3'
449
449
  }
450
450
  }
@@ -576,8 +576,8 @@ export const idsTypographyLabel1x = '[object Object]';
576
576
  export const idsTypographyTitle1125x = '[object Object]';
577
577
  export const idsBorderradius025x = '4px';
578
578
  export const idsBorderradius05x = '8px';
579
- export const idsBorderradius1x = '16px';
580
579
  export const idsBorderradiusFull = '1600px';
580
+ export const idsBorderradius1x = '16px';
581
581
  export const idsBorderActionPrimary = '[object Object]';
582
582
  export const idsBorderActionSecondary = '[object Object]';
583
583
  export const idsBorderActionDisabled = '[object Object]';
@@ -612,13 +612,13 @@ export const idsColorControlUnselectedDefault = '#F8F8FA';
612
612
  export const idsColorControlUnselectedHover = '#e6edfb';
613
613
  export const idsColorControlUnselectedPressed = '#d1def8';
614
614
  export const idsColorControlUnselectedDisabled = '#e0e1e4';
615
- export const idsColorControlUnselectedIndicatorDefault = '#ffffff';
615
+ export const idsColorControlUnselectedIndicatorEnabled = '#ffffff';
616
616
  export const idsColorControlUnselectedIndicatorDisabled = '#c5c6cb';
617
617
  export const idsColorControlSelectedDefault = '#4d5057';
618
618
  export const idsColorControlSelectedHover = '#707784';
619
619
  export const idsColorControlSelectedPressed = '#101114';
620
620
  export const idsColorControlSelectedDisabled = '#c5c6cb';
621
- export const idsColorControlSelectedIndicatorDefault = '#ffffff';
621
+ export const idsColorControlSelectedIndicatorEnabled = '#ffffff';
622
622
  export const idsColorControlSelectedIndicatorDisabled = '#adaeb3';
623
623
  export const idsColorFieldDefault = '#F8F8FA';
624
624
  export const idsColorFieldHover = '#F8F8FA';
package/dist/types/tokens.dark.d.ts CHANGED
@@ -128,8 +128,8 @@ export interface IDSTokens {
128
128
  borderRadius: {
129
129
  '0_25x': string;
130
130
  '0_5x': string;
131
- '1x': string;
132
131
  full: string;
132
+ '1x': string;
133
133
  };
134
134
  border: {
135
135
  action: {
@@ -191,7 +191,7 @@ export interface IDSTokens {
191
191
  pressed: string;
192
192
  disabled: string;
193
193
  indicator: {
194
- default: string;
194
+ enabled: string;
195
195
  disabled: string;
196
196
  };
197
197
  };
@@ -201,7 +201,7 @@ export interface IDSTokens {
201
201
  pressed: string;
202
202
  disabled: string;
203
203
  indicator: {
204
- default: string;
204
+ enabled: string;
205
205
  disabled: string;
206
206
  };
207
207
  };
@@ -218,14 +218,14 @@ export interface IDSTokens {
218
218
  default: string;
219
219
  hover: string;
220
220
  pressed: string;
221
- onNavigation: string;
222
- onNavigationDisabled: string;
221
+ onItem: string;
222
+ onItemDisabled: string;
223
223
  };
224
224
  selected: {
225
225
  default: string;
226
226
  hover: string;
227
227
  pressed: string;
228
- onNavigation: string;
228
+ onItem: string;
229
229
  };
230
230
  };
231
231
  border: {
@@ -371,8 +371,8 @@ export const tokens: IDSTokens = {
371
371
  borderRadius: {
372
372
  '0_25x': '4px',
373
373
  '0_5x': '8px',
374
- '1x': '16px',
375
- full: '1600px'
374
+ full: '1600px',
375
+ '1x': '16px'
376
376
  },
377
377
  border: {
378
378
  action: {
@@ -434,7 +434,7 @@ export const tokens: IDSTokens = {
434
434
  pressed: '#d1def8',
435
435
  disabled: '#e0e1e4',
436
436
  indicator: {
437
- default: '#ffffff',
437
+ enabled: '#ffffff',
438
438
  disabled: '#c5c6cb'
439
439
  }
440
440
  },
@@ -444,7 +444,7 @@ export const tokens: IDSTokens = {
444
444
  pressed: '#101114',
445
445
  disabled: '#c5c6cb',
446
446
  indicator: {
447
- default: '#ffffff',
447
+ enabled: '#ffffff',
448
448
  disabled: '#adaeb3'
449
449
  }
450
450
  }
@@ -461,14 +461,14 @@ export const tokens: IDSTokens = {
461
461
  default: '#00000000',
462
462
  hover: '#e6edfb',
463
463
  pressed: '#d1def8',
464
- onNavigation: '#2d2f35',
465
- onNavigationDisabled: '#8e9099'
464
+ onItem: '#2d2f35',
465
+ onItemDisabled: '#8e9099'
466
466
  },
467
467
  selected: {
468
468
  default: 'lch(93.522 7.6467 266.59 / 0.48)',
469
469
  hover: '#e6edfb',
470
470
  pressed: '#d1def8',
471
- onNavigation: '#3a64b8'
471
+ onItem: '#3a64b8'
472
472
  }
473
473
  },
474
474
  border: {
@@ -576,8 +576,8 @@ export const idsTypographyLabel1x = '[object Object]';
576
576
  export const idsTypographyTitle1125x = '[object Object]';
577
577
  export const idsBorderradius025x = '4px';
578
578
  export const idsBorderradius05x = '8px';
579
- export const idsBorderradius1x = '16px';
580
579
  export const idsBorderradiusFull = '1600px';
580
+ export const idsBorderradius1x = '16px';
581
581
  export const idsBorderActionPrimary = '[object Object]';
582
582
  export const idsBorderActionSecondary = '[object Object]';
583
583
  export const idsBorderActionDisabled = '[object Object]';
@@ -612,13 +612,13 @@ export const idsColorControlUnselectedDefault = '#F8F8FA';
612
612
  export const idsColorControlUnselectedHover = '#e6edfb';
613
613
  export const idsColorControlUnselectedPressed = '#d1def8';
614
614
  export const idsColorControlUnselectedDisabled = '#e0e1e4';
615
- export const idsColorControlUnselectedIndicatorDefault = '#ffffff';
615
+ export const idsColorControlUnselectedIndicatorEnabled = '#ffffff';
616
616
  export const idsColorControlUnselectedIndicatorDisabled = '#c5c6cb';
617
617
  export const idsColorControlSelectedDefault = '#4d5057';
618
618
  export const idsColorControlSelectedHover = '#707784';
619
619
  export const idsColorControlSelectedPressed = '#101114';
620
620
  export const idsColorControlSelectedDisabled = '#c5c6cb';
621
- export const idsColorControlSelectedIndicatorDefault = '#ffffff';
621
+ export const idsColorControlSelectedIndicatorEnabled = '#ffffff';
622
622
  export const idsColorControlSelectedIndicatorDisabled = '#adaeb3';
623
623
  export const idsColorFieldDefault = '#F8F8FA';
624
624
  export const idsColorFieldHover = '#F8F8FA';
@@ -628,12 +628,12 @@ export const idsColorFieldOnfieldmuted = '#4d5057';
628
628
  export const idsColorItemUnselectedDefault = '#00000000';
629
629
  export const idsColorItemUnselectedHover = '#e6edfb';
630
630
  export const idsColorItemUnselectedPressed = '#d1def8';
631
- export const idsColorItemUnselectedOnnavigation = '#2d2f35';
632
- export const idsColorItemUnselectedOnnavigationdisabled = '#8e9099';
631
+ export const idsColorItemUnselectedOnitem = '#2d2f35';
632
+ export const idsColorItemUnselectedOnitemdisabled = '#8e9099';
633
633
  export const idsColorItemSelectedDefault = 'lch(93.522 7.6467 266.59 / 0.48)';
634
634
  export const idsColorItemSelectedHover = '#e6edfb';
635
635
  export const idsColorItemSelectedPressed = '#d1def8';
636
- export const idsColorItemSelectedOnnavigation = '#3a64b8';
636
+ export const idsColorItemSelectedOnitem = '#3a64b8';
637
637
  export const idsColorBorderTransparent = '#00000000';
638
638
  export const idsColorBorderStrong = '#2d2f35';
639
639
  export const idsColorBorderDefault = '#8e9099';
package/dist/types/tokens.light.d.ts CHANGED
@@ -128,8 +128,8 @@ export interface IDSTokens {
128
128
  borderRadius: {
129
129
  '0_25x': string;
130
130
  '0_5x': string;
131
- '1x': string;
132
131
  full: string;
132
+ '1x': string;
133
133
  };
134
134
  border: {
135
135
  action: {
@@ -191,7 +191,7 @@ export interface IDSTokens {
191
191
  pressed: string;
192
192
  disabled: string;
193
193
  indicator: {
194
- default: string;
194
+ enabled: string;
195
195
  disabled: string;
196
196
  };
197
197
  };
@@ -201,7 +201,7 @@ export interface IDSTokens {
201
201
  pressed: string;
202
202
  disabled: string;
203
203
  indicator: {
204
- default: string;
204
+ enabled: string;
205
205
  disabled: string;
206
206
  };
207
207
  };
@@ -371,8 +371,8 @@ export const tokens: IDSTokens = {
371
371
  borderRadius: {
372
372
  '0_25x': '4px',
373
373
  '0_5x': '8px',
374
- '1x': '16px',
375
- full: '1600px'
374
+ full: '1600px',
375
+ '1x': '16px'
376
376
  },
377
377
  border: {
378
378
  action: {
@@ -434,7 +434,7 @@ export const tokens: IDSTokens = {
434
434
  pressed: '#d1def8',
435
435
  disabled: '#e0e1e4',
436
436
  indicator: {
437
- default: '#ffffff',
437
+ enabled: '#ffffff',
438
438
  disabled: '#c5c6cb'
439
439
  }
440
440
  },
@@ -444,7 +444,7 @@ export const tokens: IDSTokens = {
444
444
  pressed: '#101114',
445
445
  disabled: '#c5c6cb',
446
446
  indicator: {
447
- default: '#ffffff',
447
+ enabled: '#ffffff',
448
448
  disabled: '#adaeb3'
449
449
  }
450
450
  }
@@ -576,8 +576,8 @@ export const idsTypographyLabel1x = '[object Object]';
576
576
  export const idsTypographyTitle1125x = '[object Object]';
577
577
  export const idsBorderradius025x = '4px';
578
578
  export const idsBorderradius05x = '8px';
579
- export const idsBorderradius1x = '16px';
580
579
  export const idsBorderradiusFull = '1600px';
580
+ export const idsBorderradius1x = '16px';
581
581
  export const idsBorderActionPrimary = '[object Object]';
582
582
  export const idsBorderActionSecondary = '[object Object]';
583
583
  export const idsBorderActionDisabled = '[object Object]';
@@ -612,13 +612,13 @@ export const idsColorControlUnselectedDefault = '#F8F8FA';
612
612
  export const idsColorControlUnselectedHover = '#e6edfb';
613
613
  export const idsColorControlUnselectedPressed = '#d1def8';
614
614
  export const idsColorControlUnselectedDisabled = '#e0e1e4';
615
- export const idsColorControlUnselectedIndicatorDefault = '#ffffff';
615
+ export const idsColorControlUnselectedIndicatorEnabled = '#ffffff';
616
616
  export const idsColorControlUnselectedIndicatorDisabled = '#c5c6cb';
617
617
  export const idsColorControlSelectedDefault = '#4d5057';
618
618
  export const idsColorControlSelectedHover = '#707784';
619
619
  export const idsColorControlSelectedPressed = '#101114';
620
620
  export const idsColorControlSelectedDisabled = '#c5c6cb';
621
- export const idsColorControlSelectedIndicatorDefault = '#ffffff';
621
+ export const idsColorControlSelectedIndicatorEnabled = '#ffffff';
622
622
  export const idsColorControlSelectedIndicatorDisabled = '#adaeb3';
623
623
  export const idsColorFieldDefault = '#F8F8FA';
624
624
  export const idsColorFieldHover = '#F8F8FA';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@inversestudio/design-tokens",
3
- "version": "1.1.1",
3
+ "version": "1.1.3",
4
4
  "description": "IDS Design System tokens - compiled from Tokens Studio format",
5
5
  "type": "module",
6
6
  "main": "dist/js/tokens.js",