@inversestudio/design-tokens 1.0.19 → 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 (22) hide show
  1. package/dist/css/tokens.css +2 -2
  2. package/dist/css/tokens.dark.css +1 -0
  3. package/dist/css/tokens.light.css +2 -2
  4. package/dist/esm/tokens.dark.js +1 -0
  5. package/dist/esm/tokens.js +10 -10
  6. package/dist/esm/tokens.light.js +10 -10
  7. package/dist/js/tokens.dark.js +1 -0
  8. package/dist/js/tokens.js +10 -10
  9. package/dist/js/tokens.light.js +10 -10
  10. package/dist/json/tokens.dark.json +1 -0
  11. package/dist/json/tokens.dark.nested.json +1 -0
  12. package/dist/json/tokens.json +2 -2
  13. package/dist/json/tokens.light.json +2 -2
  14. package/dist/json/tokens.light.nested.json +3 -3
  15. package/dist/json/tokens.nested.json +3 -3
  16. package/dist/scss/_tokens.dark.scss +2 -0
  17. package/dist/scss/_tokens.light.scss +3 -3
  18. package/dist/scss/_tokens.scss +3 -3
  19. package/dist/types/tokens.d.ts +6 -6
  20. package/dist/types/tokens.dark.d.ts +3 -0
  21. package/dist/types/tokens.light.d.ts +6 -6
  22. package/package.json +1 -1
package/dist/css/tokens.css CHANGED
@@ -71,6 +71,7 @@
71
71
  Semantic Tokens
72
72
  ========================================================================== */
73
73
 
74
+ --ids-spacing-none: 0;
74
75
  --ids-spacing-0-13x: 2px;
75
76
  --ids-spacing-0-25x: 4px;
76
77
  --ids-spacing-0-38x: 6px;
@@ -152,11 +153,10 @@
152
153
  --ids-color-item-unselected-pressed: #d1def8;
153
154
  --ids-color-item-unselected-onnavigation: #2d2f35;
154
155
  --ids-color-item-unselected-onnavigationdisabled: #8e9099;
155
- --ids-color-item-selected-default: #00000000;
156
+ --ids-color-item-selected-default: lch(93.522 7.6467 266.59 / 0.48);
156
157
  --ids-color-item-selected-hover: #e6edfb;
157
158
  --ids-color-item-selected-pressed: #d1def8;
158
159
  --ids-color-item-selected-onnavigation: #3a64b8;
159
- --ids-color-item-selected-onnavigationdisabled: #8e9099;
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
@@ -71,6 +71,7 @@
71
71
  Semantic Tokens
72
72
  ========================================================================== */
73
73
 
74
+ --ids-spacing-none: 0;
74
75
  --ids-spacing-0-13x: 2px;
75
76
  --ids-spacing-0-25x: 4px;
76
77
  --ids-spacing-0-38x: 6px;
package/dist/css/tokens.light.css CHANGED
@@ -71,6 +71,7 @@
71
71
  Semantic Tokens
72
72
  ========================================================================== */
73
73
 
74
+ --ids-spacing-none: 0;
74
75
  --ids-spacing-0-13x: 2px;
75
76
  --ids-spacing-0-25x: 4px;
76
77
  --ids-spacing-0-38x: 6px;
@@ -152,11 +153,10 @@
152
153
  --ids-color-item-unselected-pressed: #d1def8;
153
154
  --ids-color-item-unselected-onnavigation: #2d2f35;
154
155
  --ids-color-item-unselected-onnavigationdisabled: #8e9099;
155
- --ids-color-item-selected-default: #00000000;
156
+ --ids-color-item-selected-default: lch(93.522 7.6467 266.59 / 0.48);
156
157
  --ids-color-item-selected-hover: #e6edfb;
157
158
  --ids-color-item-selected-pressed: #d1def8;
158
159
  --ids-color-item-selected-onnavigation: #3a64b8;
159
- --ids-color-item-selected-onnavigationdisabled: #8e9099;
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
@@ -59,6 +59,7 @@ export const idsCoreLineheightBase = "16px"; // PRIMITIVE - Base line height (1x
59
59
  export const idsCoreBorderradiusBase = "16px"; // PRIMITIVE - Base border radius for default density (16px). Do NOT use directly on components.
60
60
  export const idsCoreBorderwidthSlim = "1px";
61
61
  export const idsCoreBorderwidthThick = "2px";
62
+ export const idsSpacingNone = "0"; // SEMANTIC - No spacing.
62
63
  export const idsSpacing013x = "2px"; // SEMANTIC - Micro spacing (2px). Use for: hairline gaps.
63
64
  export const idsSpacing025x = "4px"; // SEMANTIC - Tiny spacing (4px). Use for: tight gaps, compact padding.
64
65
  export const idsSpacing038x = "6px"; // SEMANTIC - Extra-small spacing (6px). Use for: small component padding.
package/dist/esm/tokens.js CHANGED
@@ -59,6 +59,7 @@ export const idsCoreSizingBase = "16px";
59
59
  export const idsCoreBorderradiusBase = "16px"; // PRIMITIVE - Base border radius for default density (16px). Do NOT use directly on components.
60
60
  export const idsCoreBorderwidthSlim = "1px";
61
61
  export const idsCoreBorderwidthThick = "2px";
62
+ export const idsSpacingNone = "0"; // SEMANTIC - No spacing.
62
63
  export const idsSpacing013x = "2px"; // SEMANTIC - Micro spacing (2px). Use for: hairline gaps.
63
64
  export const idsSpacing025x = "4px"; // SEMANTIC - Tiny spacing (4px). Use for: tight gaps, compact padding.
64
65
  export const idsSpacing038x = "6px"; // SEMANTIC - Extra-small spacing (6px). Use for: small component padding.
@@ -186,16 +187,15 @@ export const idsColorFieldHover = "#F8F8FA"; // SEMANTIC - Background color for
186
187
  export const idsColorFieldPressed = "#e0e1e4"; // SEMANTIC - Background color for the pressed state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
187
188
  export const idsColorFieldOnfield = "#2d2f35"; // SEMANTIC - Foreground color for text/icon on input fields. Use for: Non-empty state of input fields.
188
189
  export const idsColorFieldOnfieldmuted = "#4d5057"; // SEMANTIC - Foreground color for text/icon on input fields. Use for: Default state of input fields.
189
- export const idsColorItemUnselectedDefault = "#00000000";
190
- export const idsColorItemUnselectedHover = "#e6edfb";
191
- export const idsColorItemUnselectedPressed = "#d1def8";
192
- export const idsColorItemUnselectedOnnavigation = "#2d2f35";
193
- export const idsColorItemUnselectedOnnavigationdisabled = "#8e9099";
194
- export const idsColorItemSelectedDefault = "#00000000";
195
- export const idsColorItemSelectedHover = "#e6edfb";
196
- export const idsColorItemSelectedPressed = "#d1def8";
197
- export const idsColorItemSelectedOnnavigation = "#3a64b8";
198
- 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.
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
@@ -59,6 +59,7 @@ export const idsCoreSizingBase = "16px";
59
59
  export const idsCoreBorderradiusBase = "16px"; // PRIMITIVE - Base border radius for default density (16px). Do NOT use directly on components.
60
60
  export const idsCoreBorderwidthSlim = "1px";
61
61
  export const idsCoreBorderwidthThick = "2px";
62
+ export const idsSpacingNone = "0"; // SEMANTIC - No spacing.
62
63
  export const idsSpacing013x = "2px"; // SEMANTIC - Micro spacing (2px). Use for: hairline gaps.
63
64
  export const idsSpacing025x = "4px"; // SEMANTIC - Tiny spacing (4px). Use for: tight gaps, compact padding.
64
65
  export const idsSpacing038x = "6px"; // SEMANTIC - Extra-small spacing (6px). Use for: small component padding.
@@ -186,16 +187,15 @@ export const idsColorFieldHover = "#F8F8FA"; // SEMANTIC - Background color for
186
187
  export const idsColorFieldPressed = "#e0e1e4"; // SEMANTIC - Background color for the pressed state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
187
188
  export const idsColorFieldOnfield = "#2d2f35"; // SEMANTIC - Foreground color for text/icon on input fields. Use for: Non-empty state of input fields.
188
189
  export const idsColorFieldOnfieldmuted = "#4d5057"; // SEMANTIC - Foreground color for text/icon on input fields. Use for: Default state of input fields.
189
- export const idsColorItemUnselectedDefault = "#00000000";
190
- export const idsColorItemUnselectedHover = "#e6edfb";
191
- export const idsColorItemUnselectedPressed = "#d1def8";
192
- export const idsColorItemUnselectedOnnavigation = "#2d2f35";
193
- export const idsColorItemUnselectedOnnavigationdisabled = "#8e9099";
194
- export const idsColorItemSelectedDefault = "#00000000";
195
- export const idsColorItemSelectedHover = "#e6edfb";
196
- export const idsColorItemSelectedPressed = "#d1def8";
197
- export const idsColorItemSelectedOnnavigation = "#3a64b8";
198
- 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.
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
@@ -59,6 +59,7 @@ export const idsCoreLineheightBase = "16px"; // PRIMITIVE - Base line height (1x
59
59
  export const idsCoreBorderradiusBase = "16px"; // PRIMITIVE - Base border radius for default density (16px). Do NOT use directly on components.
60
60
  export const idsCoreBorderwidthSlim = "1px";
61
61
  export const idsCoreBorderwidthThick = "2px";
62
+ export const idsSpacingNone = "0"; // SEMANTIC - No spacing.
62
63
  export const idsSpacing013x = "2px"; // SEMANTIC - Micro spacing (2px). Use for: hairline gaps.
63
64
  export const idsSpacing025x = "4px"; // SEMANTIC - Tiny spacing (4px). Use for: tight gaps, compact padding.
64
65
  export const idsSpacing038x = "6px"; // SEMANTIC - Extra-small spacing (6px). Use for: small component padding.
package/dist/js/tokens.js CHANGED
@@ -59,6 +59,7 @@ export const idsCoreSizingBase = "16px";
59
59
  export const idsCoreBorderradiusBase = "16px"; // PRIMITIVE - Base border radius for default density (16px). Do NOT use directly on components.
60
60
  export const idsCoreBorderwidthSlim = "1px";
61
61
  export const idsCoreBorderwidthThick = "2px";
62
+ export const idsSpacingNone = "0"; // SEMANTIC - No spacing.
62
63
  export const idsSpacing013x = "2px"; // SEMANTIC - Micro spacing (2px). Use for: hairline gaps.
63
64
  export const idsSpacing025x = "4px"; // SEMANTIC - Tiny spacing (4px). Use for: tight gaps, compact padding.
64
65
  export const idsSpacing038x = "6px"; // SEMANTIC - Extra-small spacing (6px). Use for: small component padding.
@@ -186,16 +187,15 @@ export const idsColorFieldHover = "#F8F8FA"; // SEMANTIC - Background color for
186
187
  export const idsColorFieldPressed = "#e0e1e4"; // SEMANTIC - Background color for the pressed state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
187
188
  export const idsColorFieldOnfield = "#2d2f35"; // SEMANTIC - Foreground color for text/icon on input fields. Use for: Non-empty state of input fields.
188
189
  export const idsColorFieldOnfieldmuted = "#4d5057"; // SEMANTIC - Foreground color for text/icon on input fields. Use for: Default state of input fields.
189
- export const idsColorItemUnselectedDefault = "#00000000";
190
- export const idsColorItemUnselectedHover = "#e6edfb";
191
- export const idsColorItemUnselectedPressed = "#d1def8";
192
- export const idsColorItemUnselectedOnnavigation = "#2d2f35";
193
- export const idsColorItemUnselectedOnnavigationdisabled = "#8e9099";
194
- export const idsColorItemSelectedDefault = "#00000000";
195
- export const idsColorItemSelectedHover = "#e6edfb";
196
- export const idsColorItemSelectedPressed = "#d1def8";
197
- export const idsColorItemSelectedOnnavigation = "#3a64b8";
198
- 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.
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
@@ -59,6 +59,7 @@ export const idsCoreSizingBase = "16px";
59
59
  export const idsCoreBorderradiusBase = "16px"; // PRIMITIVE - Base border radius for default density (16px). Do NOT use directly on components.
60
60
  export const idsCoreBorderwidthSlim = "1px";
61
61
  export const idsCoreBorderwidthThick = "2px";
62
+ export const idsSpacingNone = "0"; // SEMANTIC - No spacing.
62
63
  export const idsSpacing013x = "2px"; // SEMANTIC - Micro spacing (2px). Use for: hairline gaps.
63
64
  export const idsSpacing025x = "4px"; // SEMANTIC - Tiny spacing (4px). Use for: tight gaps, compact padding.
64
65
  export const idsSpacing038x = "6px"; // SEMANTIC - Extra-small spacing (6px). Use for: small component padding.
@@ -186,16 +187,15 @@ export const idsColorFieldHover = "#F8F8FA"; // SEMANTIC - Background color for
186
187
  export const idsColorFieldPressed = "#e0e1e4"; // SEMANTIC - Background color for the pressed state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
187
188
  export const idsColorFieldOnfield = "#2d2f35"; // SEMANTIC - Foreground color for text/icon on input fields. Use for: Non-empty state of input fields.
188
189
  export const idsColorFieldOnfieldmuted = "#4d5057"; // SEMANTIC - Foreground color for text/icon on input fields. Use for: Default state of input fields.
189
- export const idsColorItemUnselectedDefault = "#00000000";
190
- export const idsColorItemUnselectedHover = "#e6edfb";
191
- export const idsColorItemUnselectedPressed = "#d1def8";
192
- export const idsColorItemUnselectedOnnavigation = "#2d2f35";
193
- export const idsColorItemUnselectedOnnavigationdisabled = "#8e9099";
194
- export const idsColorItemSelectedDefault = "#00000000";
195
- export const idsColorItemSelectedHover = "#e6edfb";
196
- export const idsColorItemSelectedPressed = "#d1def8";
197
- export const idsColorItemSelectedOnnavigation = "#3a64b8";
198
- 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.
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
@@ -56,6 +56,7 @@
56
56
  "idsCoreBorderradiusBase": "16px",
57
57
  "idsCoreBorderwidthSlim": "1px",
58
58
  "idsCoreBorderwidthThick": "2px",
59
+ "idsSpacingNone": "0",
59
60
  "idsSpacing013x": "2px",
60
61
  "idsSpacing025x": "4px",
61
62
  "idsSpacing038x": "6px",
package/dist/json/tokens.dark.nested.json CHANGED
@@ -80,6 +80,7 @@
80
80
  }
81
81
  },
82
82
  "spacing": {
83
+ "none": "0",
83
84
  "0_13x": "2px",
84
85
  "0_25x": "4px",
85
86
  "0_38x": "6px",
package/dist/json/tokens.json CHANGED
@@ -56,6 +56,7 @@
56
56
  "idsCoreBorderradiusBase": "16px",
57
57
  "idsCoreBorderwidthSlim": "1px",
58
58
  "idsCoreBorderwidthThick": "2px",
59
+ "idsSpacingNone": "0",
59
60
  "idsSpacing013x": "2px",
60
61
  "idsSpacing025x": "4px",
61
62
  "idsSpacing038x": "6px",
@@ -188,11 +189,10 @@
188
189
  "idsColorItemUnselectedPressed": "#d1def8",
189
190
  "idsColorItemUnselectedOnnavigation": "#2d2f35",
190
191
  "idsColorItemUnselectedOnnavigationdisabled": "#8e9099",
191
- "idsColorItemSelectedDefault": "#00000000",
192
+ "idsColorItemSelectedDefault": "lch(93.522 7.6467 266.59 / 0.48)",
192
193
  "idsColorItemSelectedHover": "#e6edfb",
193
194
  "idsColorItemSelectedPressed": "#d1def8",
194
195
  "idsColorItemSelectedOnnavigation": "#3a64b8",
195
- "idsColorItemSelectedOnnavigationdisabled": "#8e9099",
196
196
  "idsColorBorderTransparent": "#00000000",
197
197
  "idsColorBorderStrong": "#2d2f35",
198
198
  "idsColorBorderDefault": "#8e9099",
package/dist/json/tokens.light.json CHANGED
@@ -56,6 +56,7 @@
56
56
  "idsCoreBorderradiusBase": "16px",
57
57
  "idsCoreBorderwidthSlim": "1px",
58
58
  "idsCoreBorderwidthThick": "2px",
59
+ "idsSpacingNone": "0",
59
60
  "idsSpacing013x": "2px",
60
61
  "idsSpacing025x": "4px",
61
62
  "idsSpacing038x": "6px",
@@ -188,11 +189,10 @@
188
189
  "idsColorItemUnselectedPressed": "#d1def8",
189
190
  "idsColorItemUnselectedOnnavigation": "#2d2f35",
190
191
  "idsColorItemUnselectedOnnavigationdisabled": "#8e9099",
191
- "idsColorItemSelectedDefault": "#00000000",
192
+ "idsColorItemSelectedDefault": "lch(93.522 7.6467 266.59 / 0.48)",
192
193
  "idsColorItemSelectedHover": "#e6edfb",
193
194
  "idsColorItemSelectedPressed": "#d1def8",
194
195
  "idsColorItemSelectedOnnavigation": "#3a64b8",
195
- "idsColorItemSelectedOnnavigationdisabled": "#8e9099",
196
196
  "idsColorBorderTransparent": "#00000000",
197
197
  "idsColorBorderStrong": "#2d2f35",
198
198
  "idsColorBorderDefault": "#8e9099",
package/dist/json/tokens.light.nested.json CHANGED
@@ -80,6 +80,7 @@
80
80
  }
81
81
  },
82
82
  "spacing": {
83
+ "none": "0",
83
84
  "0_13x": "2px",
84
85
  "0_25x": "4px",
85
86
  "0_38x": "6px",
@@ -266,11 +267,10 @@
266
267
  "onNavigationDisabled": "#8e9099"
267
268
  },
268
269
  "selected": {
269
- "default": "#00000000",
270
+ "default": "lch(93.522 7.6467 266.59 / 0.48)",
270
271
  "hover": "#e6edfb",
271
272
  "pressed": "#d1def8",
272
- "onNavigation": "#3a64b8",
273
- "onNavigationDisabled": "#8e9099"
273
+ "onNavigation": "#3a64b8"
274
274
  }
275
275
  },
276
276
  "border": {
package/dist/json/tokens.nested.json CHANGED
@@ -80,6 +80,7 @@
80
80
  }
81
81
  },
82
82
  "spacing": {
83
+ "none": "0",
83
84
  "0_13x": "2px",
84
85
  "0_25x": "4px",
85
86
  "0_38x": "6px",
@@ -266,11 +267,10 @@
266
267
  "onNavigationDisabled": "#8e9099"
267
268
  },
268
269
  "selected": {
269
- "default": "#00000000",
270
+ "default": "lch(93.522 7.6467 266.59 / 0.48)",
270
271
  "hover": "#e6edfb",
271
272
  "pressed": "#d1def8",
272
- "onNavigation": "#3a64b8",
273
- "onNavigationDisabled": "#8e9099"
273
+ "onNavigation": "#3a64b8"
274
274
  }
275
275
  },
276
276
  "border": {
package/dist/scss/_tokens.dark.scss CHANGED
@@ -61,6 +61,7 @@ $ids-core-lineheight-base: 16px;
61
61
  $ids-core-borderradius-base: 16px;
62
62
  $ids-core-borderwidth-slim: 1px;
63
63
  $ids-core-borderwidth-thick: 2px;
64
+ $ids-spacing-none: 0;
64
65
  $ids-spacing-0-13x: 2px;
65
66
  $ids-spacing-0-25x: 4px;
66
67
  $ids-spacing-0-38x: 6px;
@@ -218,6 +219,7 @@ $ids-tokens: (
218
219
  'ids-core-borderradius-base': $ids-core-borderradius-base,
219
220
  'ids-core-borderwidth-slim': $ids-core-borderwidth-slim,
220
221
  'ids-core-borderwidth-thick': $ids-core-borderwidth-thick,
222
+ 'ids-spacing-none': $ids-spacing-none,
221
223
  'ids-spacing-0-13x': $ids-spacing-0-13x,
222
224
  'ids-spacing-0-25x': $ids-spacing-0-25x,
223
225
  'ids-spacing-0-38x': $ids-spacing-0-38x,
package/dist/scss/_tokens.light.scss CHANGED
@@ -61,6 +61,7 @@ $ids-core-sizing-base: 16px;
61
61
  $ids-core-borderradius-base: 16px;
62
62
  $ids-core-borderwidth-slim: 1px;
63
63
  $ids-core-borderwidth-thick: 2px;
64
+ $ids-spacing-none: 0;
64
65
  $ids-spacing-0-13x: 2px;
65
66
  $ids-spacing-0-25x: 4px;
66
67
  $ids-spacing-0-38x: 6px;
@@ -142,11 +143,10 @@ $ids-color-item-unselected-hover: #e6edfb;
142
143
  $ids-color-item-unselected-pressed: #d1def8;
143
144
  $ids-color-item-unselected-onnavigation: #2d2f35;
144
145
  $ids-color-item-unselected-onnavigationdisabled: #8e9099;
145
- $ids-color-item-selected-default: #00000000;
146
+ $ids-color-item-selected-default: lch(93.522 7.6467 266.59 / 0.48);
146
147
  $ids-color-item-selected-hover: #e6edfb;
147
148
  $ids-color-item-selected-pressed: #d1def8;
148
149
  $ids-color-item-selected-onnavigation: #3a64b8;
149
- $ids-color-item-selected-onnavigationdisabled: #8e9099;
150
150
  $ids-color-border-transparent: #00000000;
151
151
  $ids-color-border-strong: #2d2f35;
152
152
  $ids-color-border-default: #8e9099;
@@ -218,6 +218,7 @@ $ids-tokens: (
218
218
  'ids-core-borderradius-base': $ids-core-borderradius-base,
219
219
  'ids-core-borderwidth-slim': $ids-core-borderwidth-slim,
220
220
  'ids-core-borderwidth-thick': $ids-core-borderwidth-thick,
221
+ 'ids-spacing-none': $ids-spacing-none,
221
222
  'ids-spacing-0-13x': $ids-spacing-0-13x,
222
223
  'ids-spacing-0-25x': $ids-spacing-0-25x,
223
224
  'ids-spacing-0-38x': $ids-spacing-0-38x,
@@ -303,7 +304,6 @@ $ids-tokens: (
303
304
  'ids-color-item-selected-hover': $ids-color-item-selected-hover,
304
305
  'ids-color-item-selected-pressed': $ids-color-item-selected-pressed,
305
306
  'ids-color-item-selected-onnavigation': $ids-color-item-selected-onnavigation,
306
- 'ids-color-item-selected-onnavigationdisabled': $ids-color-item-selected-onnavigationdisabled,
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
@@ -61,6 +61,7 @@ $ids-core-sizing-base: 16px;
61
61
  $ids-core-borderradius-base: 16px;
62
62
  $ids-core-borderwidth-slim: 1px;
63
63
  $ids-core-borderwidth-thick: 2px;
64
+ $ids-spacing-none: 0;
64
65
  $ids-spacing-0-13x: 2px;
65
66
  $ids-spacing-0-25x: 4px;
66
67
  $ids-spacing-0-38x: 6px;
@@ -142,11 +143,10 @@ $ids-color-item-unselected-hover: #e6edfb;
142
143
  $ids-color-item-unselected-pressed: #d1def8;
143
144
  $ids-color-item-unselected-onnavigation: #2d2f35;
144
145
  $ids-color-item-unselected-onnavigationdisabled: #8e9099;
145
- $ids-color-item-selected-default: #00000000;
146
+ $ids-color-item-selected-default: lch(93.522 7.6467 266.59 / 0.48);
146
147
  $ids-color-item-selected-hover: #e6edfb;
147
148
  $ids-color-item-selected-pressed: #d1def8;
148
149
  $ids-color-item-selected-onnavigation: #3a64b8;
149
- $ids-color-item-selected-onnavigationdisabled: #8e9099;
150
150
  $ids-color-border-transparent: #00000000;
151
151
  $ids-color-border-strong: #2d2f35;
152
152
  $ids-color-border-default: #8e9099;
@@ -218,6 +218,7 @@ $ids-tokens: (
218
218
  'ids-core-borderradius-base': $ids-core-borderradius-base,
219
219
  'ids-core-borderwidth-slim': $ids-core-borderwidth-slim,
220
220
  'ids-core-borderwidth-thick': $ids-core-borderwidth-thick,
221
+ 'ids-spacing-none': $ids-spacing-none,
221
222
  'ids-spacing-0-13x': $ids-spacing-0-13x,
222
223
  'ids-spacing-0-25x': $ids-spacing-0-25x,
223
224
  'ids-spacing-0-38x': $ids-spacing-0-38x,
@@ -303,7 +304,6 @@ $ids-tokens: (
303
304
  'ids-color-item-selected-hover': $ids-color-item-selected-hover,
304
305
  'ids-color-item-selected-pressed': $ids-color-item-selected-pressed,
305
306
  'ids-color-item-selected-onnavigation': $ids-color-item-selected-onnavigation,
306
- 'ids-color-item-selected-onnavigationdisabled': $ids-color-item-selected-onnavigationdisabled,
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
@@ -86,6 +86,7 @@ export interface IDSTokens {
86
86
  };
87
87
  };
88
88
  spacing: {
89
+ none: string;
89
90
  '0_13x': string;
90
91
  '0_25x': string;
91
92
  '0_38x': string;
@@ -225,7 +226,6 @@ export interface IDSTokens {
225
226
  hover: string;
226
227
  pressed: string;
227
228
  onNavigation: string;
228
- onNavigationDisabled: string;
229
229
  };
230
230
  };
231
231
  border: {
@@ -329,6 +329,7 @@ export const tokens: IDSTokens = {
329
329
  }
330
330
  },
331
331
  spacing: {
332
+ none: '0',
332
333
  '0_13x': '2px',
333
334
  '0_25x': '4px',
334
335
  '0_38x': '6px',
@@ -464,11 +465,10 @@ export const tokens: IDSTokens = {
464
465
  onNavigationDisabled: '#8e9099'
465
466
  },
466
467
  selected: {
467
- default: '#00000000',
468
+ default: 'lch(93.522 7.6467 266.59 / 0.48)',
468
469
  hover: '#e6edfb',
469
470
  pressed: '#d1def8',
470
- onNavigation: '#3a64b8',
471
- onNavigationDisabled: '#8e9099'
471
+ onNavigation: '#3a64b8'
472
472
  }
473
473
  },
474
474
  border: {
@@ -548,6 +548,7 @@ export const idsCoreSizingBase = '16px';
548
548
  export const idsCoreBorderradiusBase = '16px';
549
549
  export const idsCoreBorderwidthSlim = '1px';
550
550
  export const idsCoreBorderwidthThick = '2px';
551
+ export const idsSpacingNone = '0';
551
552
  export const idsSpacing013x = '2px';
552
553
  export const idsSpacing025x = '4px';
553
554
  export const idsSpacing038x = '6px';
@@ -629,11 +630,10 @@ export const idsColorItemUnselectedHover = '#e6edfb';
629
630
  export const idsColorItemUnselectedPressed = '#d1def8';
630
631
  export const idsColorItemUnselectedOnnavigation = '#2d2f35';
631
632
  export const idsColorItemUnselectedOnnavigationdisabled = '#8e9099';
632
- export const idsColorItemSelectedDefault = '#00000000';
633
+ export const idsColorItemSelectedDefault = 'lch(93.522 7.6467 266.59 / 0.48)';
633
634
  export const idsColorItemSelectedHover = '#e6edfb';
634
635
  export const idsColorItemSelectedPressed = '#d1def8';
635
636
  export const idsColorItemSelectedOnnavigation = '#3a64b8';
636
- export const idsColorItemSelectedOnnavigationdisabled = '#8e9099';
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
@@ -86,6 +86,7 @@ export interface IDSTokens {
86
86
  };
87
87
  };
88
88
  spacing: {
89
+ none: string;
89
90
  '0_13x': string;
90
91
  '0_25x': string;
91
92
  '0_38x': string;
@@ -329,6 +330,7 @@ export const tokens: IDSTokens = {
329
330
  }
330
331
  },
331
332
  spacing: {
333
+ none: '0',
332
334
  '0_13x': '2px',
333
335
  '0_25x': '4px',
334
336
  '0_38x': '6px',
@@ -548,6 +550,7 @@ export const idsCoreLineheightBase = '16px';
548
550
  export const idsCoreBorderradiusBase = '16px';
549
551
  export const idsCoreBorderwidthSlim = '1px';
550
552
  export const idsCoreBorderwidthThick = '2px';
553
+ export const idsSpacingNone = '0';
551
554
  export const idsSpacing013x = '2px';
552
555
  export const idsSpacing025x = '4px';
553
556
  export const idsSpacing038x = '6px';
package/dist/types/tokens.light.d.ts CHANGED
@@ -86,6 +86,7 @@ export interface IDSTokens {
86
86
  };
87
87
  };
88
88
  spacing: {
89
+ none: string;
89
90
  '0_13x': string;
90
91
  '0_25x': string;
91
92
  '0_38x': string;
@@ -225,7 +226,6 @@ export interface IDSTokens {
225
226
  hover: string;
226
227
  pressed: string;
227
228
  onNavigation: string;
228
- onNavigationDisabled: string;
229
229
  };
230
230
  };
231
231
  border: {
@@ -329,6 +329,7 @@ export const tokens: IDSTokens = {
329
329
  }
330
330
  },
331
331
  spacing: {
332
+ none: '0',
332
333
  '0_13x': '2px',
333
334
  '0_25x': '4px',
334
335
  '0_38x': '6px',
@@ -464,11 +465,10 @@ export const tokens: IDSTokens = {
464
465
  onNavigationDisabled: '#8e9099'
465
466
  },
466
467
  selected: {
467
- default: '#00000000',
468
+ default: 'lch(93.522 7.6467 266.59 / 0.48)',
468
469
  hover: '#e6edfb',
469
470
  pressed: '#d1def8',
470
- onNavigation: '#3a64b8',
471
- onNavigationDisabled: '#8e9099'
471
+ onNavigation: '#3a64b8'
472
472
  }
473
473
  },
474
474
  border: {
@@ -548,6 +548,7 @@ export const idsCoreSizingBase = '16px';
548
548
  export const idsCoreBorderradiusBase = '16px';
549
549
  export const idsCoreBorderwidthSlim = '1px';
550
550
  export const idsCoreBorderwidthThick = '2px';
551
+ export const idsSpacingNone = '0';
551
552
  export const idsSpacing013x = '2px';
552
553
  export const idsSpacing025x = '4px';
553
554
  export const idsSpacing038x = '6px';
@@ -629,11 +630,10 @@ export const idsColorItemUnselectedHover = '#e6edfb';
629
630
  export const idsColorItemUnselectedPressed = '#d1def8';
630
631
  export const idsColorItemUnselectedOnnavigation = '#2d2f35';
631
632
  export const idsColorItemUnselectedOnnavigationdisabled = '#8e9099';
632
- export const idsColorItemSelectedDefault = '#00000000';
633
+ export const idsColorItemSelectedDefault = 'lch(93.522 7.6467 266.59 / 0.48)';
633
634
  export const idsColorItemSelectedHover = '#e6edfb';
634
635
  export const idsColorItemSelectedPressed = '#d1def8';
635
636
  export const idsColorItemSelectedOnnavigation = '#3a64b8';
636
- export const idsColorItemSelectedOnnavigationdisabled = '#8e9099';
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.19",
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",