@inversestudio/design-tokens 1.0.20 → 1.0.21

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 (15) hide show
  1. package/dist/css/tokens.css +0 -1
  2. package/dist/css/tokens.light.css +0 -1
  3. package/dist/esm/tokens.js +9 -10
  4. package/dist/esm/tokens.light.js +9 -10
  5. package/dist/js/tokens.js +9 -10
  6. package/dist/js/tokens.light.js +9 -10
  7. package/dist/json/tokens.json +0 -1
  8. package/dist/json/tokens.light.json +0 -1
  9. package/dist/json/tokens.light.nested.json +1 -2
  10. package/dist/json/tokens.nested.json +1 -2
  11. package/dist/scss/_tokens.light.scss +0 -2
  12. package/dist/scss/_tokens.scss +0 -2
  13. package/dist/types/tokens.d.ts +1 -4
  14. package/dist/types/tokens.light.d.ts +1 -4
  15. package/package.json +1 -1
package/dist/css/tokens.css CHANGED
@@ -157,7 +157,6 @@
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
@@ -157,7 +157,6 @@
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/esm/tokens.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 = "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 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.light.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 = "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 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
@@ -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 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.light.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 = "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 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/json/tokens.json CHANGED
@@ -193,7 +193,6 @@
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.light.json CHANGED
@@ -193,7 +193,6 @@
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.light.nested.json CHANGED
@@ -270,8 +270,7 @@
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
+ "onNavigation": "#3a64b8"
275
274
  }
276
275
  },
277
276
  "border": {
package/dist/json/tokens.nested.json CHANGED
@@ -270,8 +270,7 @@
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
+ "onNavigation": "#3a64b8"
275
274
  }
276
275
  },
277
276
  "border": {
package/dist/scss/_tokens.light.scss CHANGED
@@ -147,7 +147,6 @@ $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.scss CHANGED
@@ -147,7 +147,6 @@ $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/types/tokens.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: {
@@ -469,8 +468,7 @@ export const tokens: IDSTokens = {
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
+ onNavigation: '#3a64b8'
474
472
  }
475
473
  },
476
474
  border: {
@@ -636,7 +634,6 @@ 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
@@ -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: {
@@ -469,8 +468,7 @@ export const tokens: IDSTokens = {
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
+ onNavigation: '#3a64b8'
474
472
  }
475
473
  },
476
474
  border: {
@@ -636,7 +634,6 @@ 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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@inversestudio/design-tokens",
3
- "version": "1.0.20",
3
+ "version": "1.0.21",
4
4
  "description": "IDS Design System tokens - compiled from Tokens Studio format",
5
5
  "type": "module",
6
6
  "main": "dist/js/tokens.js",