@inversestudio/design-tokens 1.0.20 → 1.1.1

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 +4 -5
  2. package/dist/css/tokens.dark.css +2 -3
  3. package/dist/css/tokens.light.css +4 -5
  4. package/dist/esm/tokens.dark.js +10 -11
  5. package/dist/esm/tokens.js +10 -11
  6. package/dist/esm/tokens.light.js +10 -11
  7. package/dist/js/tokens.dark.js +10 -11
  8. package/dist/js/tokens.js +10 -11
  9. package/dist/js/tokens.light.js +10 -11
  10. package/dist/json/tokens.dark.json +2 -3
  11. package/dist/json/tokens.dark.nested.json +4 -5
  12. package/dist/json/tokens.json +4 -5
  13. package/dist/json/tokens.light.json +4 -5
  14. package/dist/json/tokens.light.nested.json +5 -6
  15. package/dist/json/tokens.nested.json +5 -6
  16. package/dist/scss/_tokens.dark.scss +3 -5
  17. package/dist/scss/_tokens.light.scss +8 -10
  18. package/dist/scss/_tokens.scss +8 -10
  19. package/dist/types/tokens.d.ts +13 -16
  20. package/dist/types/tokens.dark.d.ts +7 -10
  21. package/dist/types/tokens.light.d.ts +13 -16
  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-full: 1600px;
103
102
  --ids-borderradius-1x: 16px;
103
+ --ids-borderradius-full: 1600px;
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;
@@ -151,13 +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;
160
- --ids-color-item-selected-onnavigationdisabled: #8e9099;
159
+ --ids-color-item-selected-onitem: #3a64b8;
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.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-full: 1600px;
103
102
  --ids-borderradius-1x: 16px;
103
+ --ids-borderradius-full: 1600px;
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;
@@ -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
@@ -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-full: 1600px;
103
102
  --ids-borderradius-1x: 16px;
103
+ --ids-borderradius-full: 1600px;
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;
@@ -151,13 +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;
160
- --ids-color-item-selected-onnavigationdisabled: #8e9099;
159
+ --ids-color-item-selected-onitem: #3a64b8;
161
160
  --ids-color-border-transparent: #00000000;
162
161
  --ids-color-border-strong: #2d2f35;
163
162
  --ids-color-border-default: #8e9099;
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 idsBorderradiusFull = "1600px"; // SEMANTIC - Full/pill radius. Use for: pills, avatars.
106
105
  export const idsBorderradius1x = "16px";
106
+ export const idsBorderradiusFull = "1600px"; // SEMANTIC - Full/pill radius. Use for: pills, avatars.
107
107
  export const idsBorderActionPrimary = {
108
108
  color: "#00000000",
109
109
  width: "2px",
@@ -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
@@ -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 idsBorderradiusFull = "1600px"; // SEMANTIC - Full/pill radius. Use for: pills, avatars.
106
105
  export const idsBorderradius1x = "16px";
106
+ export const idsBorderradiusFull = "1600px"; // SEMANTIC - Full/pill radius. Use for: pills, avatars.
107
107
  export const idsBorderActionPrimary = {
108
108
  color: "#00000000",
109
109
  width: "2px",
@@ -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 = "lch(93.522 7.6467 266.59 / 0.48)";
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 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
+ 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 idsColorItemSelectedOnitem = "#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.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 idsBorderradiusFull = "1600px"; // SEMANTIC - Full/pill radius. Use for: pills, avatars.
106
105
  export const idsBorderradius1x = "16px";
106
+ export const idsBorderradiusFull = "1600px"; // SEMANTIC - Full/pill radius. Use for: pills, avatars.
107
107
  export const idsBorderActionPrimary = {
108
108
  color: "#00000000",
109
109
  width: "2px",
@@ -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 = "lch(93.522 7.6467 266.59 / 0.48)";
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 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
+ 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 idsColorItemSelectedOnitem = "#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.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 idsBorderradiusFull = "1600px"; // SEMANTIC - Full/pill radius. Use for: pills, avatars.
106
105
  export const idsBorderradius1x = "16px";
106
+ export const idsBorderradiusFull = "1600px"; // SEMANTIC - Full/pill radius. Use for: pills, avatars.
107
107
  export const idsBorderActionPrimary = {
108
108
  color: "#00000000",
109
109
  width: "2px",
@@ -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
@@ -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 idsBorderradiusFull = "1600px"; // SEMANTIC - Full/pill radius. Use for: pills, avatars.
106
105
  export const idsBorderradius1x = "16px";
106
+ export const idsBorderradiusFull = "1600px"; // SEMANTIC - Full/pill radius. Use for: pills, avatars.
107
107
  export const idsBorderActionPrimary = {
108
108
  color: "#00000000",
109
109
  width: "2px",
@@ -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 = "lch(93.522 7.6467 266.59 / 0.48)";
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 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
+ 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 idsColorItemSelectedOnitem = "#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.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 idsBorderradiusFull = "1600px"; // SEMANTIC - Full/pill radius. Use for: pills, avatars.
106
105
  export const idsBorderradius1x = "16px";
106
+ export const idsBorderradiusFull = "1600px"; // SEMANTIC - Full/pill radius. Use for: pills, avatars.
107
107
  export const idsBorderActionPrimary = {
108
108
  color: "#00000000",
109
109
  width: "2px",
@@ -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 = "lch(93.522 7.6467 266.59 / 0.48)";
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 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
+ 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 idsColorItemSelectedOnitem = "#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/json/tokens.dark.json CHANGED
@@ -99,8 +99,8 @@
99
99
  },
100
100
  "idsBorderradius025x": "4px",
101
101
  "idsBorderradius05x": "8px",
102
- "idsBorderradiusFull": "1600px",
103
102
  "idsBorderradius1x": "16px",
103
+ "idsBorderradiusFull": "1600px",
104
104
  "idsBorderActionPrimary": {
105
105
  "color": "#00000000",
106
106
  "width": "2px",
@@ -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
@@ -137,8 +137,8 @@
137
137
  "borderRadius": {
138
138
  "0_25x": "4px",
139
139
  "0_5x": "8px",
140
- "full": "1600px",
141
- "1x": "16px"
140
+ "1x": "16px",
141
+ "full": "1600px"
142
142
  },
143
143
  "border": {
144
144
  "action": {
@@ -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
@@ -99,8 +99,8 @@
99
99
  },
100
100
  "idsBorderradius025x": "4px",
101
101
  "idsBorderradius05x": "8px",
102
- "idsBorderradiusFull": "1600px",
103
102
  "idsBorderradius1x": "16px",
103
+ "idsBorderradiusFull": "1600px",
104
104
  "idsBorderActionPrimary": {
105
105
  "color": "#00000000",
106
106
  "width": "2px",
@@ -187,13 +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",
196
- "idsColorItemSelectedOnnavigationdisabled": "#8e9099",
195
+ "idsColorItemSelectedOnitem": "#3a64b8",
197
196
  "idsColorBorderTransparent": "#00000000",
198
197
  "idsColorBorderStrong": "#2d2f35",
199
198
  "idsColorBorderDefault": "#8e9099",
package/dist/json/tokens.light.json CHANGED
@@ -99,8 +99,8 @@
99
99
  },
100
100
  "idsBorderradius025x": "4px",
101
101
  "idsBorderradius05x": "8px",
102
- "idsBorderradiusFull": "1600px",
103
102
  "idsBorderradius1x": "16px",
103
+ "idsBorderradiusFull": "1600px",
104
104
  "idsBorderActionPrimary": {
105
105
  "color": "#00000000",
106
106
  "width": "2px",
@@ -187,13 +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",
196
- "idsColorItemSelectedOnnavigationdisabled": "#8e9099",
195
+ "idsColorItemSelectedOnitem": "#3a64b8",
197
196
  "idsColorBorderTransparent": "#00000000",
198
197
  "idsColorBorderStrong": "#2d2f35",
199
198
  "idsColorBorderDefault": "#8e9099",
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
- "full": "1600px",
141
- "1x": "16px"
140
+ "1x": "16px",
141
+ "full": "1600px"
142
142
  },
143
143
  "border": {
144
144
  "action": {
@@ -263,15 +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",
274
- "onNavigationDisabled": "#8e9099"
273
+ "onItem": "#3a64b8"
275
274
  }
276
275
  },
277
276
  "border": {
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
- "full": "1600px",
141
- "1x": "16px"
140
+ "1x": "16px",
141
+ "full": "1600px"
142
142
  },
143
143
  "border": {
144
144
  "action": {
@@ -263,15 +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",
274
- "onNavigationDisabled": "#8e9099"
273
+ "onItem": "#3a64b8"
275
274
  }
276
275
  },
277
276
  "border": {
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-full: 1600px;
93
92
  $ids-borderradius-1x: 16px;
93
+ $ids-borderradius-full: 1600px;
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;
@@ -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;
@@ -247,8 +246,8 @@ $ids-tokens: (
247
246
  'ids-typography-title-1-125x': $ids-typography-title-1-125x,
248
247
  'ids-borderradius-0-25x': $ids-borderradius-0-25x,
249
248
  'ids-borderradius-0-5x': $ids-borderradius-0-5x,
250
- 'ids-borderradius-full': $ids-borderradius-full,
251
249
  'ids-borderradius-1x': $ids-borderradius-1x,
250
+ 'ids-borderradius-full': $ids-borderradius-full,
252
251
  'ids-border-action-primary': $ids-border-action-primary,
253
252
  'ids-border-action-secondary': $ids-border-action-secondary,
254
253
  'ids-border-action-disabled': $ids-border-action-disabled,
@@ -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
@@ -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-full: 1600px;
93
92
  $ids-borderradius-1x: 16px;
93
+ $ids-borderradius-full: 1600px;
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;
@@ -141,13 +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;
150
- $ids-color-item-selected-onnavigationdisabled: #8e9099;
149
+ $ids-color-item-selected-onitem: #3a64b8;
151
150
  $ids-color-border-transparent: #00000000;
152
151
  $ids-color-border-strong: #2d2f35;
153
152
  $ids-color-border-default: #8e9099;
@@ -247,8 +246,8 @@ $ids-tokens: (
247
246
  'ids-typography-title-1-125x': $ids-typography-title-1-125x,
248
247
  'ids-borderradius-0-25x': $ids-borderradius-0-25x,
249
248
  'ids-borderradius-0-5x': $ids-borderradius-0-5x,
250
- 'ids-borderradius-full': $ids-borderradius-full,
251
249
  'ids-borderradius-1x': $ids-borderradius-1x,
250
+ 'ids-borderradius-full': $ids-borderradius-full,
252
251
  'ids-border-action-primary': $ids-border-action-primary,
253
252
  'ids-border-action-secondary': $ids-border-action-secondary,
254
253
  'ids-border-action-disabled': $ids-border-action-disabled,
@@ -299,13 +298,12 @@ $ids-tokens: (
299
298
  'ids-color-item-unselected-default': $ids-color-item-unselected-default,
300
299
  'ids-color-item-unselected-hover': $ids-color-item-unselected-hover,
301
300
  'ids-color-item-unselected-pressed': $ids-color-item-unselected-pressed,
302
- 'ids-color-item-unselected-onnavigation': $ids-color-item-unselected-onnavigation,
303
- '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,
304
303
  'ids-color-item-selected-default': $ids-color-item-selected-default,
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
- 'ids-color-item-selected-onnavigation': $ids-color-item-selected-onnavigation,
308
- 'ids-color-item-selected-onnavigationdisabled': $ids-color-item-selected-onnavigationdisabled,
306
+ 'ids-color-item-selected-onitem': $ids-color-item-selected-onitem,
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.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-full: 1600px;
93
92
  $ids-borderradius-1x: 16px;
93
+ $ids-borderradius-full: 1600px;
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;
@@ -141,13 +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;
150
- $ids-color-item-selected-onnavigationdisabled: #8e9099;
149
+ $ids-color-item-selected-onitem: #3a64b8;
151
150
  $ids-color-border-transparent: #00000000;
152
151
  $ids-color-border-strong: #2d2f35;
153
152
  $ids-color-border-default: #8e9099;
@@ -247,8 +246,8 @@ $ids-tokens: (
247
246
  'ids-typography-title-1-125x': $ids-typography-title-1-125x,
248
247
  'ids-borderradius-0-25x': $ids-borderradius-0-25x,
249
248
  'ids-borderradius-0-5x': $ids-borderradius-0-5x,
250
- 'ids-borderradius-full': $ids-borderradius-full,
251
249
  'ids-borderradius-1x': $ids-borderradius-1x,
250
+ 'ids-borderradius-full': $ids-borderradius-full,
252
251
  'ids-border-action-primary': $ids-border-action-primary,
253
252
  'ids-border-action-secondary': $ids-border-action-secondary,
254
253
  'ids-border-action-disabled': $ids-border-action-disabled,
@@ -299,13 +298,12 @@ $ids-tokens: (
299
298
  'ids-color-item-unselected-default': $ids-color-item-unselected-default,
300
299
  'ids-color-item-unselected-hover': $ids-color-item-unselected-hover,
301
300
  'ids-color-item-unselected-pressed': $ids-color-item-unselected-pressed,
302
- 'ids-color-item-unselected-onnavigation': $ids-color-item-unselected-onnavigation,
303
- '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,
304
303
  'ids-color-item-selected-default': $ids-color-item-selected-default,
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
- 'ids-color-item-selected-onnavigation': $ids-color-item-selected-onnavigation,
308
- 'ids-color-item-selected-onnavigationdisabled': $ids-color-item-selected-onnavigationdisabled,
306
+ 'ids-color-item-selected-onitem': $ids-color-item-selected-onitem,
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/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
- full: string;
132
131
  '1x': string;
132
+ full: string;
133
133
  };
134
134
  border: {
135
135
  action: {
@@ -218,15 +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;
229
- onNavigationDisabled: string;
228
+ onItem: string;
230
229
  };
231
230
  };
232
231
  border: {
@@ -372,8 +371,8 @@ export const tokens: IDSTokens = {
372
371
  borderRadius: {
373
372
  '0_25x': '4px',
374
373
  '0_5x': '8px',
375
- full: '1600px',
376
- '1x': '16px'
374
+ '1x': '16px',
375
+ full: '1600px'
377
376
  },
378
377
  border: {
379
378
  action: {
@@ -462,15 +461,14 @@ export const tokens: IDSTokens = {
462
461
  default: '#00000000',
463
462
  hover: '#e6edfb',
464
463
  pressed: '#d1def8',
465
- onNavigation: '#2d2f35',
466
- onNavigationDisabled: '#8e9099'
464
+ onItem: '#2d2f35',
465
+ onItemDisabled: '#8e9099'
467
466
  },
468
467
  selected: {
469
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
+ onItem: '#3a64b8'
474
472
  }
475
473
  },
476
474
  border: {
@@ -578,8 +576,8 @@ export const idsTypographyLabel1x = '[object Object]';
578
576
  export const idsTypographyTitle1125x = '[object Object]';
579
577
  export const idsBorderradius025x = '4px';
580
578
  export const idsBorderradius05x = '8px';
581
- export const idsBorderradiusFull = '1600px';
582
579
  export const idsBorderradius1x = '16px';
580
+ export const idsBorderradiusFull = '1600px';
583
581
  export const idsBorderActionPrimary = '[object Object]';
584
582
  export const idsBorderActionSecondary = '[object Object]';
585
583
  export const idsBorderActionDisabled = '[object Object]';
@@ -630,13 +628,12 @@ export const idsColorFieldOnfieldmuted = '#4d5057';
630
628
  export const idsColorItemUnselectedDefault = '#00000000';
631
629
  export const idsColorItemUnselectedHover = '#e6edfb';
632
630
  export const idsColorItemUnselectedPressed = '#d1def8';
633
- export const idsColorItemUnselectedOnnavigation = '#2d2f35';
634
- export const idsColorItemUnselectedOnnavigationdisabled = '#8e9099';
631
+ export const idsColorItemUnselectedOnitem = '#2d2f35';
632
+ export const idsColorItemUnselectedOnitemdisabled = '#8e9099';
635
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
- export const idsColorItemSelectedOnnavigation = '#3a64b8';
639
- export const idsColorItemSelectedOnnavigationdisabled = '#8e9099';
636
+ export const idsColorItemSelectedOnitem = '#3a64b8';
640
637
  export const idsColorBorderTransparent = '#00000000';
641
638
  export const idsColorBorderStrong = '#2d2f35';
642
639
  export const idsColorBorderDefault = '#8e9099';
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
- full: string;
132
131
  '1x': string;
132
+ full: string;
133
133
  };
134
134
  border: {
135
135
  action: {
@@ -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: {
@@ -372,8 +371,8 @@ export const tokens: IDSTokens = {
372
371
  borderRadius: {
373
372
  '0_25x': '4px',
374
373
  '0_5x': '8px',
375
- full: '1600px',
376
- '1x': '16px'
374
+ '1x': '16px',
375
+ full: '1600px'
377
376
  },
378
377
  border: {
379
378
  action: {
@@ -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: {
@@ -578,8 +576,8 @@ export const idsTypographyLabel1x = '[object Object]';
578
576
  export const idsTypographyTitle1125x = '[object Object]';
579
577
  export const idsBorderradius025x = '4px';
580
578
  export const idsBorderradius05x = '8px';
581
- export const idsBorderradiusFull = '1600px';
582
579
  export const idsBorderradius1x = '16px';
580
+ export const idsBorderradiusFull = '1600px';
583
581
  export const idsBorderActionPrimary = '[object Object]';
584
582
  export const idsBorderActionSecondary = '[object Object]';
585
583
  export const idsBorderActionDisabled = '[object Object]';
@@ -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
@@ -128,8 +128,8 @@ export interface IDSTokens {
128
128
  borderRadius: {
129
129
  '0_25x': string;
130
130
  '0_5x': string;
131
- full: string;
132
131
  '1x': string;
132
+ full: string;
133
133
  };
134
134
  border: {
135
135
  action: {
@@ -218,15 +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;
229
- onNavigationDisabled: string;
228
+ onItem: string;
230
229
  };
231
230
  };
232
231
  border: {
@@ -372,8 +371,8 @@ export const tokens: IDSTokens = {
372
371
  borderRadius: {
373
372
  '0_25x': '4px',
374
373
  '0_5x': '8px',
375
- full: '1600px',
376
- '1x': '16px'
374
+ '1x': '16px',
375
+ full: '1600px'
377
376
  },
378
377
  border: {
379
378
  action: {
@@ -462,15 +461,14 @@ export const tokens: IDSTokens = {
462
461
  default: '#00000000',
463
462
  hover: '#e6edfb',
464
463
  pressed: '#d1def8',
465
- onNavigation: '#2d2f35',
466
- onNavigationDisabled: '#8e9099'
464
+ onItem: '#2d2f35',
465
+ onItemDisabled: '#8e9099'
467
466
  },
468
467
  selected: {
469
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
+ onItem: '#3a64b8'
474
472
  }
475
473
  },
476
474
  border: {
@@ -578,8 +576,8 @@ export const idsTypographyLabel1x = '[object Object]';
578
576
  export const idsTypographyTitle1125x = '[object Object]';
579
577
  export const idsBorderradius025x = '4px';
580
578
  export const idsBorderradius05x = '8px';
581
- export const idsBorderradiusFull = '1600px';
582
579
  export const idsBorderradius1x = '16px';
580
+ export const idsBorderradiusFull = '1600px';
583
581
  export const idsBorderActionPrimary = '[object Object]';
584
582
  export const idsBorderActionSecondary = '[object Object]';
585
583
  export const idsBorderActionDisabled = '[object Object]';
@@ -630,13 +628,12 @@ export const idsColorFieldOnfieldmuted = '#4d5057';
630
628
  export const idsColorItemUnselectedDefault = '#00000000';
631
629
  export const idsColorItemUnselectedHover = '#e6edfb';
632
630
  export const idsColorItemUnselectedPressed = '#d1def8';
633
- export const idsColorItemUnselectedOnnavigation = '#2d2f35';
634
- export const idsColorItemUnselectedOnnavigationdisabled = '#8e9099';
631
+ export const idsColorItemUnselectedOnitem = '#2d2f35';
632
+ export const idsColorItemUnselectedOnitemdisabled = '#8e9099';
635
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
- export const idsColorItemSelectedOnnavigation = '#3a64b8';
639
- export const idsColorItemSelectedOnnavigationdisabled = '#8e9099';
636
+ export const idsColorItemSelectedOnitem = '#3a64b8';
640
637
  export const idsColorBorderTransparent = '#00000000';
641
638
  export const idsColorBorderStrong = '#2d2f35';
642
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.20",
3
+ "version": "1.1.1",
4
4
  "description": "IDS Design System tokens - compiled from Tokens Studio format",
5
5
  "type": "module",
6
6
  "main": "dist/js/tokens.js",