@inversestudio/design-tokens 1.0.21 → 1.1.2

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 +1 -2
  3. package/dist/css/tokens.light.css +3 -3
  4. package/dist/esm/tokens.dark.js +9 -10
  5. package/dist/esm/tokens.js +3 -3
  6. package/dist/esm/tokens.light.js +3 -3
  7. package/dist/js/tokens.dark.js +9 -10
  8. package/dist/js/tokens.js +3 -3
  9. package/dist/js/tokens.light.js +3 -3
  10. package/dist/json/tokens.dark.json +1 -2
  11. package/dist/json/tokens.dark.nested.json +2 -3
  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 +3 -3
  15. package/dist/json/tokens.nested.json +3 -3
  16. package/dist/scss/_tokens.dark.scss +1 -3
  17. package/dist/scss/_tokens.light.scss +6 -6
  18. package/dist/scss/_tokens.scss +6 -6
  19. package/dist/types/tokens.d.ts +9 -9
  20. package/dist/types/tokens.dark.d.ts +3 -6
  21. package/dist/types/tokens.light.d.ts +9 -9
  22. package/package.json +1 -1
package/dist/css/tokens.css CHANGED
@@ -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.dark.css CHANGED
@@ -153,11 +153,10 @@
153
153
  --ids-color-item-unselected-pressed: #d1def8;
154
154
  --ids-color-item-unselected-onnavigation: #2d2f35;
155
155
  --ids-color-item-unselected-onnavigationdisabled: #8e9099;
156
- --ids-color-item-selected-default: #00000000;
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
159
  --ids-color-item-selected-onnavigation: #3a64b8;
160
- --ids-color-item-selected-onnavigationdisabled: #8e9099;
161
160
  --ids-color-border-transparent: #00000000;
162
161
  --ids-color-border-strong: #2d2f35;
163
162
  --ids-color-border-default: #8e9099;
package/dist/css/tokens.light.css CHANGED
@@ -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/esm/tokens.dark.js CHANGED
@@ -187,16 +187,15 @@ export const idsColorFieldHover = "#F8F8FA"; // SEMANTIC - Background color for
187
187
  export const idsColorFieldPressed = "#e0e1e4"; // SEMANTIC - Background color for the pressed state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
188
188
  export const idsColorFieldOnfield = "#2d2f35"; // SEMANTIC - Foreground color for text/icon on input fields. Use for: Non-empty state of input fields.
189
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";
191
- export const idsColorItemUnselectedHover = "#e6edfb";
192
- export const idsColorItemUnselectedPressed = "#d1def8";
193
- export const idsColorItemUnselectedOnnavigation = "#2d2f35";
194
- export const idsColorItemUnselectedOnnavigationdisabled = "#8e9099";
195
- export const idsColorItemSelectedDefault = "#00000000";
196
- export const idsColorItemSelectedHover = "#e6edfb";
197
- export const idsColorItemSelectedPressed = "#d1def8";
198
- export const idsColorItemSelectedOnnavigation = "#3a64b8";
199
- export const idsColorItemSelectedOnnavigationdisabled = "#8e9099";
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.
200
199
  export const idsColorBorderTransparent = "#00000000"; // SEMANTIC - Transparent border. Use for: Composite border tokens that require transparent color.
201
200
  export const idsColorBorderStrong = "#2d2f35"; // SEMANTIC - Strong border. Use for: Composite border tokens that require a dark border color.
202
201
  export const idsColorBorderDefault = "#8e9099"; // SEMANTIC - Muted border. Use for: Composite border tokens for secondary containers, tables.
package/dist/esm/tokens.js CHANGED
@@ -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.light.js CHANGED
@@ -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.dark.js CHANGED
@@ -187,16 +187,15 @@ export const idsColorFieldHover = "#F8F8FA"; // SEMANTIC - Background color for
187
187
  export const idsColorFieldPressed = "#e0e1e4"; // SEMANTIC - Background color for the pressed state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
188
188
  export const idsColorFieldOnfield = "#2d2f35"; // SEMANTIC - Foreground color for text/icon on input fields. Use for: Non-empty state of input fields.
189
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";
191
- export const idsColorItemUnselectedHover = "#e6edfb";
192
- export const idsColorItemUnselectedPressed = "#d1def8";
193
- export const idsColorItemUnselectedOnnavigation = "#2d2f35";
194
- export const idsColorItemUnselectedOnnavigationdisabled = "#8e9099";
195
- export const idsColorItemSelectedDefault = "#00000000";
196
- export const idsColorItemSelectedHover = "#e6edfb";
197
- export const idsColorItemSelectedPressed = "#d1def8";
198
- export const idsColorItemSelectedOnnavigation = "#3a64b8";
199
- export const idsColorItemSelectedOnnavigationdisabled = "#8e9099";
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.
200
199
  export const idsColorBorderTransparent = "#00000000"; // SEMANTIC - Transparent border. Use for: Composite border tokens that require transparent color.
201
200
  export const idsColorBorderStrong = "#2d2f35"; // SEMANTIC - Strong border. Use for: Composite border tokens that require a dark border color.
202
201
  export const idsColorBorderDefault = "#8e9099"; // SEMANTIC - Muted border. Use for: Composite border tokens for secondary containers, tables.
package/dist/js/tokens.js CHANGED
@@ -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.light.js CHANGED
@@ -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/json/tokens.dark.json CHANGED
@@ -189,11 +189,10 @@
189
189
  "idsColorItemUnselectedPressed": "#d1def8",
190
190
  "idsColorItemUnselectedOnnavigation": "#2d2f35",
191
191
  "idsColorItemUnselectedOnnavigationdisabled": "#8e9099",
192
- "idsColorItemSelectedDefault": "#00000000",
192
+ "idsColorItemSelectedDefault": "lch(93.522 7.6467 266.59 / 0.48)",
193
193
  "idsColorItemSelectedHover": "#e6edfb",
194
194
  "idsColorItemSelectedPressed": "#d1def8",
195
195
  "idsColorItemSelectedOnnavigation": "#3a64b8",
196
- "idsColorItemSelectedOnnavigationdisabled": "#8e9099",
197
196
  "idsColorBorderTransparent": "#00000000",
198
197
  "idsColorBorderStrong": "#2d2f35",
199
198
  "idsColorBorderDefault": "#8e9099",
package/dist/json/tokens.dark.nested.json CHANGED
@@ -267,11 +267,10 @@
267
267
  "onNavigationDisabled": "#8e9099"
268
268
  },
269
269
  "selected": {
270
- "default": "#00000000",
270
+ "default": "lch(93.522 7.6467 266.59 / 0.48)",
271
271
  "hover": "#e6edfb",
272
272
  "pressed": "#d1def8",
273
- "onNavigation": "#3a64b8",
274
- "onNavigationDisabled": "#8e9099"
273
+ "onNavigation": "#3a64b8"
275
274
  }
276
275
  },
277
276
  "border": {
package/dist/json/tokens.json CHANGED
@@ -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.light.json CHANGED
@@ -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.light.nested.json CHANGED
@@ -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.nested.json CHANGED
@@ -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/scss/_tokens.dark.scss CHANGED
@@ -143,11 +143,10 @@ $ids-color-item-unselected-hover: #e6edfb;
143
143
  $ids-color-item-unselected-pressed: #d1def8;
144
144
  $ids-color-item-unselected-onnavigation: #2d2f35;
145
145
  $ids-color-item-unselected-onnavigationdisabled: #8e9099;
146
- $ids-color-item-selected-default: #00000000;
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
149
  $ids-color-item-selected-onnavigation: #3a64b8;
150
- $ids-color-item-selected-onnavigationdisabled: #8e9099;
151
150
  $ids-color-border-transparent: #00000000;
152
151
  $ids-color-border-strong: #2d2f35;
153
152
  $ids-color-border-default: #8e9099;
@@ -305,7 +304,6 @@ $ids-tokens: (
305
304
  'ids-color-item-selected-hover': $ids-color-item-selected-hover,
306
305
  'ids-color-item-selected-pressed': $ids-color-item-selected-pressed,
307
306
  'ids-color-item-selected-onnavigation': $ids-color-item-selected-onnavigation,
308
- 'ids-color-item-selected-onnavigationdisabled': $ids-color-item-selected-onnavigationdisabled,
309
307
  'ids-color-border-transparent': $ids-color-border-transparent,
310
308
  'ids-color-border-strong': $ids-color-border-strong,
311
309
  'ids-color-border-default': $ids-color-border-default,
package/dist/scss/_tokens.light.scss CHANGED
@@ -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;
@@ -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.scss CHANGED
@@ -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;
@@ -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/types/tokens.d.ts CHANGED
@@ -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: {
@@ -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: {
@@ -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.dark.d.ts CHANGED
@@ -226,7 +226,6 @@ export interface IDSTokens {
226
226
  hover: string;
227
227
  pressed: string;
228
228
  onNavigation: string;
229
- onNavigationDisabled: string;
230
229
  };
231
230
  };
232
231
  border: {
@@ -466,11 +465,10 @@ export const tokens: IDSTokens = {
466
465
  onNavigationDisabled: '#8e9099'
467
466
  },
468
467
  selected: {
469
- default: '#00000000',
468
+ default: 'lch(93.522 7.6467 266.59 / 0.48)',
470
469
  hover: '#e6edfb',
471
470
  pressed: '#d1def8',
472
- onNavigation: '#3a64b8',
473
- onNavigationDisabled: '#8e9099'
471
+ onNavigation: '#3a64b8'
474
472
  }
475
473
  },
476
474
  border: {
@@ -632,11 +630,10 @@ export const idsColorItemUnselectedHover = '#e6edfb';
632
630
  export const idsColorItemUnselectedPressed = '#d1def8';
633
631
  export const idsColorItemUnselectedOnnavigation = '#2d2f35';
634
632
  export const idsColorItemUnselectedOnnavigationdisabled = '#8e9099';
635
- export const idsColorItemSelectedDefault = '#00000000';
633
+ export const idsColorItemSelectedDefault = 'lch(93.522 7.6467 266.59 / 0.48)';
636
634
  export const idsColorItemSelectedHover = '#e6edfb';
637
635
  export const idsColorItemSelectedPressed = '#d1def8';
638
636
  export const idsColorItemSelectedOnnavigation = '#3a64b8';
639
- export const idsColorItemSelectedOnnavigationdisabled = '#8e9099';
640
637
  export const idsColorBorderTransparent = '#00000000';
641
638
  export const idsColorBorderStrong = '#2d2f35';
642
639
  export const idsColorBorderDefault = '#8e9099';
package/dist/types/tokens.light.d.ts CHANGED
@@ -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: {
@@ -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: {
@@ -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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@inversestudio/design-tokens",
3
- "version": "1.0.21",
3
+ "version": "1.1.2",
4
4
  "description": "IDS Design System tokens - compiled from Tokens Studio format",
5
5
  "type": "module",
6
6
  "main": "dist/js/tokens.js",