@inversestudio/design-tokens 1.0.18 → 1.0.20

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 +15 -5
  2. package/dist/css/tokens.dark.css +15 -5
  3. package/dist/css/tokens.light.css +15 -5
  4. package/dist/esm/tokens.dark.js +28 -10
  5. package/dist/esm/tokens.js +23 -5
  6. package/dist/esm/tokens.light.js +23 -5
  7. package/dist/js/tokens.dark.js +28 -10
  8. package/dist/js/tokens.js +23 -5
  9. package/dist/js/tokens.light.js +23 -5
  10. package/dist/json/tokens.dark.json +23 -5
  11. package/dist/json/tokens.dark.nested.json +30 -6
  12. package/dist/json/tokens.json +23 -5
  13. package/dist/json/tokens.light.json +23 -5
  14. package/dist/json/tokens.light.nested.json +30 -6
  15. package/dist/json/tokens.nested.json +30 -6
  16. package/dist/scss/_tokens.dark.scss +29 -9
  17. package/dist/scss/_tokens.light.scss +29 -9
  18. package/dist/scss/_tokens.scss +29 -9
  19. package/dist/types/tokens.d.ts +59 -17
  20. package/dist/types/tokens.dark.d.ts +59 -17
  21. package/dist/types/tokens.light.d.ts +59 -17
  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;
@@ -104,7 +105,9 @@
104
105
  --ids-border-action-secondary: 2px solid #2d2f35;
105
106
  --ids-border-action-disabled: 2px solid #adaeb3;
106
107
  --ids-border-action-tertiary: 2px solid #00000000;
108
+ --ids-border-action-item-selected: 2px solid #3a64b8;
107
109
  --ids-border-default: 1px solid #8e9099;
110
+ --ids-border-subtle: 1px solid #ebebef;
108
111
  --ids-border-disabled: 1px solid #adaeb3;
109
112
  --ids-border-focused: 2px solid #7eaaff;
110
113
  --ids-color-background-default: #fafafb;
@@ -145,16 +148,23 @@
145
148
  --ids-color-field-pressed: #e0e1e4;
146
149
  --ids-color-field-onfield: #2d2f35;
147
150
  --ids-color-field-onfieldmuted: #4d5057;
148
- --ids-color-navigation-default: #00000000;
149
- --ids-color-navigation-hover: #e6edfb;
150
- --ids-color-navigation-pressed: #d1def8;
151
- --ids-color-navigation-onnavigation: #2d2f35;
151
+ --ids-color-item-unselected-default: #00000000;
152
+ --ids-color-item-unselected-hover: #e6edfb;
153
+ --ids-color-item-unselected-pressed: #d1def8;
154
+ --ids-color-item-unselected-onnavigation: #2d2f35;
155
+ --ids-color-item-unselected-onnavigationdisabled: #8e9099;
156
+ --ids-color-item-selected-default: lch(93.522 7.6467 266.59 / 0.48);
157
+ --ids-color-item-selected-hover: #e6edfb;
158
+ --ids-color-item-selected-pressed: #d1def8;
159
+ --ids-color-item-selected-onnavigation: #3a64b8;
160
+ --ids-color-item-selected-onnavigationdisabled: #8e9099;
152
161
  --ids-color-border-transparent: #00000000;
153
162
  --ids-color-border-strong: #2d2f35;
154
163
  --ids-color-border-default: #8e9099;
155
164
  --ids-color-border-muted: #c5c6cb;
156
- --ids-color-border-subtle: #F8F8FA;
165
+ --ids-color-border-subtle: #ebebef;
157
166
  --ids-color-border-disabled: #adaeb3;
167
+ --ids-color-border-selected: #3a64b8;
158
168
  --ids-color-border-focus: #7eaaff;
159
169
  --ids-color-boxshadow-alpha16: lch(5.0543 1.8805 272.92 / 0.16);
160
170
  --ids-color-boxshadow-alpha24: lch(5.0543 1.8805 272.92 / 0.24);
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;
@@ -104,7 +105,9 @@
104
105
  --ids-border-action-secondary: 2px solid #2d2f35;
105
106
  --ids-border-action-disabled: 2px solid #adaeb3;
106
107
  --ids-border-action-tertiary: 2px solid #00000000;
108
+ --ids-border-action-item-selected: 2px solid #3a64b8;
107
109
  --ids-border-default: 1px solid #8e9099;
110
+ --ids-border-subtle: 1px solid #ebebef;
108
111
  --ids-border-disabled: 1px solid #adaeb3;
109
112
  --ids-border-focused: 2px solid #7eaaff;
110
113
  --ids-color-background-default: #fafafb;
@@ -145,16 +148,23 @@
145
148
  --ids-color-field-pressed: #e0e1e4;
146
149
  --ids-color-field-onfield: #2d2f35;
147
150
  --ids-color-field-onfieldmuted: #4d5057;
148
- --ids-color-navigation-default: #00000000;
149
- --ids-color-navigation-hover: #e6edfb;
150
- --ids-color-navigation-pressed: #d1def8;
151
- --ids-color-navigation-onnavigation: #2d2f35;
151
+ --ids-color-item-unselected-default: #00000000;
152
+ --ids-color-item-unselected-hover: #e6edfb;
153
+ --ids-color-item-unselected-pressed: #d1def8;
154
+ --ids-color-item-unselected-onnavigation: #2d2f35;
155
+ --ids-color-item-unselected-onnavigationdisabled: #8e9099;
156
+ --ids-color-item-selected-default: #00000000;
157
+ --ids-color-item-selected-hover: #e6edfb;
158
+ --ids-color-item-selected-pressed: #d1def8;
159
+ --ids-color-item-selected-onnavigation: #3a64b8;
160
+ --ids-color-item-selected-onnavigationdisabled: #8e9099;
152
161
  --ids-color-border-transparent: #00000000;
153
162
  --ids-color-border-strong: #2d2f35;
154
163
  --ids-color-border-default: #8e9099;
155
164
  --ids-color-border-muted: #c5c6cb;
156
- --ids-color-border-subtle: #F8F8FA;
165
+ --ids-color-border-subtle: #ebebef;
157
166
  --ids-color-border-disabled: #adaeb3;
167
+ --ids-color-border-selected: #3a64b8;
158
168
  --ids-color-border-focus: #7eaaff;
159
169
  --ids-color-boxshadow-alpha16: lch(5.0543 1.8805 272.92 / 0.16);
160
170
  --ids-color-boxshadow-alpha24: lch(5.0543 1.8805 272.92 / 0.24);
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;
@@ -104,7 +105,9 @@
104
105
  --ids-border-action-secondary: 2px solid #2d2f35;
105
106
  --ids-border-action-disabled: 2px solid #adaeb3;
106
107
  --ids-border-action-tertiary: 2px solid #00000000;
108
+ --ids-border-action-item-selected: 2px solid #3a64b8;
107
109
  --ids-border-default: 1px solid #8e9099;
110
+ --ids-border-subtle: 1px solid #ebebef;
108
111
  --ids-border-disabled: 1px solid #adaeb3;
109
112
  --ids-border-focused: 2px solid #7eaaff;
110
113
  --ids-color-background-default: #fafafb;
@@ -145,16 +148,23 @@
145
148
  --ids-color-field-pressed: #e0e1e4;
146
149
  --ids-color-field-onfield: #2d2f35;
147
150
  --ids-color-field-onfieldmuted: #4d5057;
148
- --ids-color-navigation-default: #00000000;
149
- --ids-color-navigation-hover: #e6edfb;
150
- --ids-color-navigation-pressed: #d1def8;
151
- --ids-color-navigation-onnavigation: #2d2f35;
151
+ --ids-color-item-unselected-default: #00000000;
152
+ --ids-color-item-unselected-hover: #e6edfb;
153
+ --ids-color-item-unselected-pressed: #d1def8;
154
+ --ids-color-item-unselected-onnavigation: #2d2f35;
155
+ --ids-color-item-unselected-onnavigationdisabled: #8e9099;
156
+ --ids-color-item-selected-default: lch(93.522 7.6467 266.59 / 0.48);
157
+ --ids-color-item-selected-hover: #e6edfb;
158
+ --ids-color-item-selected-pressed: #d1def8;
159
+ --ids-color-item-selected-onnavigation: #3a64b8;
160
+ --ids-color-item-selected-onnavigationdisabled: #8e9099;
152
161
  --ids-color-border-transparent: #00000000;
153
162
  --ids-color-border-strong: #2d2f35;
154
163
  --ids-color-border-default: #8e9099;
155
164
  --ids-color-border-muted: #c5c6cb;
156
- --ids-color-border-subtle: #F8F8FA;
165
+ --ids-color-border-subtle: #ebebef;
157
166
  --ids-color-border-disabled: #adaeb3;
167
+ --ids-color-border-selected: #3a64b8;
158
168
  --ids-color-border-focus: #7eaaff;
159
169
  --ids-color-boxshadow-alpha16: lch(5.0543 1.8805 272.92 / 0.16);
160
170
  --ids-color-boxshadow-alpha24: lch(5.0543 1.8805 272.92 / 0.24);
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.
@@ -123,11 +124,21 @@ export const idsBorderActionTertiary = {
123
124
  width: "2px",
124
125
  style: "solid",
125
126
  }; // SEMANTIC - Teretiary border, invisible. Use for: tertiary call-to-action buttons.
127
+ export const idsBorderActionItemSelected = {
128
+ color: "#3a64b8",
129
+ width: "2px",
130
+ style: "solid",
131
+ }; // SEMANTIC – Border for selected items, displayed at the bottom.
126
132
  export const idsBorderDefault = {
127
133
  color: "#8e9099",
128
134
  width: "1px",
129
135
  style: "solid",
130
136
  }; // SEMANTIC – Default border element with 3:1 contrast against all backgrounds and surfaces. Use for: Controls and input fields.
137
+ export const idsBorderSubtle = {
138
+ color: "#ebebef",
139
+ width: "1px",
140
+ style: "solid",
141
+ }; // SEMANTIC – Subtle border element with low contrast as decorator. Use for: Dividers.
131
142
  export const idsBorderDisabled = {
132
143
  color: "#adaeb3",
133
144
  width: "1px",
@@ -157,35 +168,42 @@ export const idsColorActionTertiaryHover = "#e6edfb"; // SEMANTIC - Background c
157
168
  export const idsColorActionTertiaryPressed = "#d1def8"; // SEMANTIC - Background color for tertiary element pressed state. Use for: transparent button active.
158
169
  export const idsColorActionTertiaryOntertiary = "#2d2f35"; // SEMANTIC - Foreground color for text/icon ON tertiary backgrounds. Use for: all tertiary button texts and icons.
159
170
  export const idsColorActionDisabledDefault = "#adaeb3"; // SEMANTIC - Disabled element background. Use for: Disabled backgrounds of primary action components.
160
- export const idsColorActionDisabledMuted = "#00000000"; // SEMANTIC - Disabled element background with less affordance. Use for: Disabled backgrounds of secondary and tertiary action components.
171
+ export const idsColorActionDisabledMuted = "#00000000"; // SEMANTIC - Transparent disabled action background. Use for: Disabled backgrounds in secondary and tertiary action components.
161
172
  export const idsColorActionDisabledOndisabled = "#707784"; // SEMANTIC - Text/icon ON disabled backgrounds.
162
173
  export const idsColorControlUnselectedDefault = "#F8F8FA"; // SEMANTIC - Background color for the default state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
163
174
  export const idsColorControlUnselectedHover = "#e6edfb"; // SEMANTIC - Background color for the hover state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
164
175
  export const idsColorControlUnselectedPressed = "#d1def8"; // SEMANTIC - Background color for the pressed state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
165
176
  export const idsColorControlUnselectedDisabled = "#e0e1e4"; // SEMANTIC - Background color for the pressed state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
166
- export const idsColorControlUnselectedIndicatorDefault = "#ffffff"; // SEMANTIC - Background color for elements on top of the control layer. Use for: Knobs in switches.
167
- export const idsColorControlUnselectedIndicatorDisabled = "#c5c6cb"; // SEMANTIC - Background color for elements on top of the control layer. Use for: Knobs in switches.
177
+ export const idsColorControlUnselectedIndicatorDefault = "#ffffff"; // SEMANTIC - Fill color for the interactive knob within switches and sliders.
178
+ export const idsColorControlUnselectedIndicatorDisabled = "#c5c6cb"; // SEMANTIC - Fill color for the interactive knob in disabled state within switches and sliders.
168
179
  export const idsColorControlSelectedDefault = "#4d5057"; // SEMANTIC - Background color for the default state of controls that are selected/on. Use for: Switches, checkboxes, radio buttons, segmented controls
169
180
  export const idsColorControlSelectedHover = "#707784"; // SEMANTIC - Background color for the hover state of controls that are selected/on. Use for: Switches, checkboxes, radio buttons, segmented controls
170
181
  export const idsColorControlSelectedPressed = "#101114"; // SEMANTIC - Background color for the pressed state of controls that are selected/on. Use for: Switches, checkboxes, radio buttons, segmented controls
171
182
  export const idsColorControlSelectedDisabled = "#c5c6cb"; // SEMANTIC - Background color for the disabled state of controlsthat are selected/on. Use for: Switches, checkboxes, radio buttons, segmented controls
172
- export const idsColorControlSelectedIndicatorDefault = "#ffffff"; // SEMANTIC - Background color for elements on top of the control layer. Use for: Knobs in switches.
173
- export const idsColorControlSelectedIndicatorDisabled = "#adaeb3"; // SEMANTIC - Background color for elements on top of the control layer. Use for: Knobs in switches.
183
+ export const idsColorControlSelectedIndicatorDefault = "#ffffff"; // SEMANTIC - Fill color for the interactive knob within switches and sliders.
184
+ export const idsColorControlSelectedIndicatorDisabled = "#adaeb3"; // SEMANTIC - Fill color for the interactive knob in disabled state within switches and sliders.
174
185
  export const idsColorFieldDefault = "#F8F8FA"; // SEMANTIC - Background color for the default state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
175
186
  export const idsColorFieldHover = "#F8F8FA"; // SEMANTIC - Background color for the hover state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
176
187
  export const idsColorFieldPressed = "#e0e1e4"; // SEMANTIC - Background color for the pressed state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
177
188
  export const idsColorFieldOnfield = "#2d2f35"; // SEMANTIC - Foreground color for text/icon on input fields. Use for: Non-empty state of input fields.
178
189
  export const idsColorFieldOnfieldmuted = "#4d5057"; // SEMANTIC - Foreground color for text/icon on input fields. Use for: Default state of input fields.
179
- export const idsColorNavigationDefault = "#00000000";
180
- export const idsColorNavigationHover = "#e6edfb";
181
- export const idsColorNavigationPressed = "#d1def8";
182
- export const idsColorNavigationOnnavigation = "#2d2f35";
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";
183
200
  export const idsColorBorderTransparent = "#00000000"; // SEMANTIC - Transparent border. Use for: Composite border tokens that require transparent color.
184
201
  export const idsColorBorderStrong = "#2d2f35"; // SEMANTIC - Strong border. Use for: Composite border tokens that require a dark border color.
185
202
  export const idsColorBorderDefault = "#8e9099"; // SEMANTIC - Muted border. Use for: Composite border tokens for secondary containers, tables.
186
203
  export const idsColorBorderMuted = "#c5c6cb"; // SEMANTIC - Muted border. Use for: Composite border tokens for secondary containers, tables.
187
- export const idsColorBorderSubtle = "#F8F8FA"; // SEMANTIC - Subtle border. Use for: Composite border tokens for hairline dividers.
204
+ export const idsColorBorderSubtle = "#ebebef"; // SEMANTIC - Subtle border. Use for: Composite border tokens for hairline dividers.
188
205
  export const idsColorBorderDisabled = "#adaeb3"; // SEMANTIC - Disabled border. Use for: Composite border tokens for disabled states.
206
+ export const idsColorBorderSelected = "#3a64b8"; // SEMANTIC - Disabled border. Use for: Composite border tokens for disabled states.
189
207
  export const idsColorBorderFocus = "#7eaaff"; // SEMANTIC - Focus ring color. Use for: Composite border tokens that are used for keyboard focus on all interactive elements.
190
208
  export const idsColorBoxshadowAlpha16 = "lch(5.0543 1.8805 272.92 / 0.16)"; // Box-shadow color with 16% opacity.
191
209
  export const idsColorBoxshadowAlpha24 = "lch(5.0543 1.8805 272.92 / 0.24)"; // Box-shadow color with 24% opacity.
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.
@@ -123,11 +124,21 @@ export const idsBorderActionTertiary = {
123
124
  width: "2px",
124
125
  style: "solid",
125
126
  }; // SEMANTIC - Teretiary border, invisible. Use for: tertiary call-to-action buttons.
127
+ export const idsBorderActionItemSelected = {
128
+ color: "#3a64b8",
129
+ width: "2px",
130
+ style: "solid",
131
+ }; // SEMANTIC – Border for selected items, displayed at the bottom.
126
132
  export const idsBorderDefault = {
127
133
  color: "#8e9099",
128
134
  width: "1px",
129
135
  style: "solid",
130
136
  }; // SEMANTIC – Default border element with 3:1 contrast against all backgrounds and surfaces. Use for: Controls and input fields.
137
+ export const idsBorderSubtle = {
138
+ color: "#ebebef",
139
+ width: "1px",
140
+ style: "solid",
141
+ }; // SEMANTIC – Subtle border element with low contrast as decorator. Use for: Dividers.
131
142
  export const idsBorderDisabled = {
132
143
  color: "#adaeb3",
133
144
  width: "1px",
@@ -176,16 +187,23 @@ export const idsColorFieldHover = "#F8F8FA"; // SEMANTIC - Background color for
176
187
  export const idsColorFieldPressed = "#e0e1e4"; // SEMANTIC - Background color for the pressed state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
177
188
  export const idsColorFieldOnfield = "#2d2f35"; // SEMANTIC - Foreground color for text/icon on input fields. Use for: Non-empty state of input fields.
178
189
  export const idsColorFieldOnfieldmuted = "#4d5057"; // SEMANTIC - Foreground color for text/icon on input fields. Use for: Default state of input fields.
179
- export const idsColorNavigationDefault = "#00000000";
180
- export const idsColorNavigationHover = "#e6edfb";
181
- export const idsColorNavigationPressed = "#d1def8";
182
- export const idsColorNavigationOnnavigation = "#2d2f35";
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";
183
200
  export const idsColorBorderTransparent = "#00000000"; // SEMANTIC - Transparent border. Use for: Composite border tokens that require transparent color.
184
201
  export const idsColorBorderStrong = "#2d2f35"; // SEMANTIC - Strong border. Use for: Composite border tokens that require a dark border color.
185
202
  export const idsColorBorderDefault = "#8e9099"; // SEMANTIC - Muted border. Use for: Composite border tokens for secondary containers, tables.
186
203
  export const idsColorBorderMuted = "#c5c6cb"; // SEMANTIC - Muted border. Use for: Composite border tokens for secondary containers, tables.
187
- export const idsColorBorderSubtle = "#F8F8FA"; // SEMANTIC - Subtle border. Use for: Composite border tokens for hairline dividers.
204
+ export const idsColorBorderSubtle = "#ebebef"; // SEMANTIC - Subtle border. Use for: Composite border tokens for hairline dividers.
188
205
  export const idsColorBorderDisabled = "#adaeb3"; // SEMANTIC - Disabled border. Use for: Composite border tokens for disabled states.
206
+ export const idsColorBorderSelected = "#3a64b8"; // SEMANTIC - Disabled border. Use for: Composite border tokens for disabled states.
189
207
  export const idsColorBorderFocus = "#7eaaff"; // SEMANTIC - Focus ring color. Use for: Composite border tokens that are used for keyboard focus on all interactive elements.
190
208
  export const idsColorBoxshadowAlpha16 = "lch(5.0543 1.8805 272.92 / 0.16)"; // Box-shadow color with 16% opacity.
191
209
  export const idsColorBoxshadowAlpha24 = "lch(5.0543 1.8805 272.92 / 0.24)"; // Box-shadow color with 24% opacity.
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.
@@ -123,11 +124,21 @@ export const idsBorderActionTertiary = {
123
124
  width: "2px",
124
125
  style: "solid",
125
126
  }; // SEMANTIC - Teretiary border, invisible. Use for: tertiary call-to-action buttons.
127
+ export const idsBorderActionItemSelected = {
128
+ color: "#3a64b8",
129
+ width: "2px",
130
+ style: "solid",
131
+ }; // SEMANTIC – Border for selected items, displayed at the bottom.
126
132
  export const idsBorderDefault = {
127
133
  color: "#8e9099",
128
134
  width: "1px",
129
135
  style: "solid",
130
136
  }; // SEMANTIC – Default border element with 3:1 contrast against all backgrounds and surfaces. Use for: Controls and input fields.
137
+ export const idsBorderSubtle = {
138
+ color: "#ebebef",
139
+ width: "1px",
140
+ style: "solid",
141
+ }; // SEMANTIC – Subtle border element with low contrast as decorator. Use for: Dividers.
131
142
  export const idsBorderDisabled = {
132
143
  color: "#adaeb3",
133
144
  width: "1px",
@@ -176,16 +187,23 @@ export const idsColorFieldHover = "#F8F8FA"; // SEMANTIC - Background color for
176
187
  export const idsColorFieldPressed = "#e0e1e4"; // SEMANTIC - Background color for the pressed state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
177
188
  export const idsColorFieldOnfield = "#2d2f35"; // SEMANTIC - Foreground color for text/icon on input fields. Use for: Non-empty state of input fields.
178
189
  export const idsColorFieldOnfieldmuted = "#4d5057"; // SEMANTIC - Foreground color for text/icon on input fields. Use for: Default state of input fields.
179
- export const idsColorNavigationDefault = "#00000000";
180
- export const idsColorNavigationHover = "#e6edfb";
181
- export const idsColorNavigationPressed = "#d1def8";
182
- export const idsColorNavigationOnnavigation = "#2d2f35";
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";
183
200
  export const idsColorBorderTransparent = "#00000000"; // SEMANTIC - Transparent border. Use for: Composite border tokens that require transparent color.
184
201
  export const idsColorBorderStrong = "#2d2f35"; // SEMANTIC - Strong border. Use for: Composite border tokens that require a dark border color.
185
202
  export const idsColorBorderDefault = "#8e9099"; // SEMANTIC - Muted border. Use for: Composite border tokens for secondary containers, tables.
186
203
  export const idsColorBorderMuted = "#c5c6cb"; // SEMANTIC - Muted border. Use for: Composite border tokens for secondary containers, tables.
187
- export const idsColorBorderSubtle = "#F8F8FA"; // SEMANTIC - Subtle border. Use for: Composite border tokens for hairline dividers.
204
+ export const idsColorBorderSubtle = "#ebebef"; // SEMANTIC - Subtle border. Use for: Composite border tokens for hairline dividers.
188
205
  export const idsColorBorderDisabled = "#adaeb3"; // SEMANTIC - Disabled border. Use for: Composite border tokens for disabled states.
206
+ export const idsColorBorderSelected = "#3a64b8"; // SEMANTIC - Disabled border. Use for: Composite border tokens for disabled states.
189
207
  export const idsColorBorderFocus = "#7eaaff"; // SEMANTIC - Focus ring color. Use for: Composite border tokens that are used for keyboard focus on all interactive elements.
190
208
  export const idsColorBoxshadowAlpha16 = "lch(5.0543 1.8805 272.92 / 0.16)"; // Box-shadow color with 16% opacity.
191
209
  export const idsColorBoxshadowAlpha24 = "lch(5.0543 1.8805 272.92 / 0.24)"; // Box-shadow color with 24% opacity.
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.
@@ -123,11 +124,21 @@ export const idsBorderActionTertiary = {
123
124
  width: "2px",
124
125
  style: "solid",
125
126
  }; // SEMANTIC - Teretiary border, invisible. Use for: tertiary call-to-action buttons.
127
+ export const idsBorderActionItemSelected = {
128
+ color: "#3a64b8",
129
+ width: "2px",
130
+ style: "solid",
131
+ }; // SEMANTIC – Border for selected items, displayed at the bottom.
126
132
  export const idsBorderDefault = {
127
133
  color: "#8e9099",
128
134
  width: "1px",
129
135
  style: "solid",
130
136
  }; // SEMANTIC – Default border element with 3:1 contrast against all backgrounds and surfaces. Use for: Controls and input fields.
137
+ export const idsBorderSubtle = {
138
+ color: "#ebebef",
139
+ width: "1px",
140
+ style: "solid",
141
+ }; // SEMANTIC – Subtle border element with low contrast as decorator. Use for: Dividers.
131
142
  export const idsBorderDisabled = {
132
143
  color: "#adaeb3",
133
144
  width: "1px",
@@ -157,35 +168,42 @@ export const idsColorActionTertiaryHover = "#e6edfb"; // SEMANTIC - Background c
157
168
  export const idsColorActionTertiaryPressed = "#d1def8"; // SEMANTIC - Background color for tertiary element pressed state. Use for: transparent button active.
158
169
  export const idsColorActionTertiaryOntertiary = "#2d2f35"; // SEMANTIC - Foreground color for text/icon ON tertiary backgrounds. Use for: all tertiary button texts and icons.
159
170
  export const idsColorActionDisabledDefault = "#adaeb3"; // SEMANTIC - Disabled element background. Use for: Disabled backgrounds of primary action components.
160
- export const idsColorActionDisabledMuted = "#00000000"; // SEMANTIC - Disabled element background with less affordance. Use for: Disabled backgrounds of secondary and tertiary action components.
171
+ export const idsColorActionDisabledMuted = "#00000000"; // SEMANTIC - Transparent disabled action background. Use for: Disabled backgrounds in secondary and tertiary action components.
161
172
  export const idsColorActionDisabledOndisabled = "#707784"; // SEMANTIC - Text/icon ON disabled backgrounds.
162
173
  export const idsColorControlUnselectedDefault = "#F8F8FA"; // SEMANTIC - Background color for the default state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
163
174
  export const idsColorControlUnselectedHover = "#e6edfb"; // SEMANTIC - Background color for the hover state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
164
175
  export const idsColorControlUnselectedPressed = "#d1def8"; // SEMANTIC - Background color for the pressed state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
165
176
  export const idsColorControlUnselectedDisabled = "#e0e1e4"; // SEMANTIC - Background color for the pressed state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
166
- export const idsColorControlUnselectedIndicatorDefault = "#ffffff"; // SEMANTIC - Background color for elements on top of the control layer. Use for: Knobs in switches.
167
- export const idsColorControlUnselectedIndicatorDisabled = "#c5c6cb"; // SEMANTIC - Background color for elements on top of the control layer. Use for: Knobs in switches.
177
+ export const idsColorControlUnselectedIndicatorDefault = "#ffffff"; // SEMANTIC - Fill color for the interactive knob within switches and sliders.
178
+ export const idsColorControlUnselectedIndicatorDisabled = "#c5c6cb"; // SEMANTIC - Fill color for the interactive knob in disabled state within switches and sliders.
168
179
  export const idsColorControlSelectedDefault = "#4d5057"; // SEMANTIC - Background color for the default state of controls that are selected/on. Use for: Switches, checkboxes, radio buttons, segmented controls
169
180
  export const idsColorControlSelectedHover = "#707784"; // SEMANTIC - Background color for the hover state of controls that are selected/on. Use for: Switches, checkboxes, radio buttons, segmented controls
170
181
  export const idsColorControlSelectedPressed = "#101114"; // SEMANTIC - Background color for the pressed state of controls that are selected/on. Use for: Switches, checkboxes, radio buttons, segmented controls
171
182
  export const idsColorControlSelectedDisabled = "#c5c6cb"; // SEMANTIC - Background color for the disabled state of controlsthat are selected/on. Use for: Switches, checkboxes, radio buttons, segmented controls
172
- export const idsColorControlSelectedIndicatorDefault = "#ffffff"; // SEMANTIC - Background color for elements on top of the control layer. Use for: Knobs in switches.
173
- export const idsColorControlSelectedIndicatorDisabled = "#adaeb3"; // SEMANTIC - Background color for elements on top of the control layer. Use for: Knobs in switches.
183
+ export const idsColorControlSelectedIndicatorDefault = "#ffffff"; // SEMANTIC - Fill color for the interactive knob within switches and sliders.
184
+ export const idsColorControlSelectedIndicatorDisabled = "#adaeb3"; // SEMANTIC - Fill color for the interactive knob in disabled state within switches and sliders.
174
185
  export const idsColorFieldDefault = "#F8F8FA"; // SEMANTIC - Background color for the default state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
175
186
  export const idsColorFieldHover = "#F8F8FA"; // SEMANTIC - Background color for the hover state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
176
187
  export const idsColorFieldPressed = "#e0e1e4"; // SEMANTIC - Background color for the pressed state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
177
188
  export const idsColorFieldOnfield = "#2d2f35"; // SEMANTIC - Foreground color for text/icon on input fields. Use for: Non-empty state of input fields.
178
189
  export const idsColorFieldOnfieldmuted = "#4d5057"; // SEMANTIC - Foreground color for text/icon on input fields. Use for: Default state of input fields.
179
- export const idsColorNavigationDefault = "#00000000";
180
- export const idsColorNavigationHover = "#e6edfb";
181
- export const idsColorNavigationPressed = "#d1def8";
182
- export const idsColorNavigationOnnavigation = "#2d2f35";
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";
183
200
  export const idsColorBorderTransparent = "#00000000"; // SEMANTIC - Transparent border. Use for: Composite border tokens that require transparent color.
184
201
  export const idsColorBorderStrong = "#2d2f35"; // SEMANTIC - Strong border. Use for: Composite border tokens that require a dark border color.
185
202
  export const idsColorBorderDefault = "#8e9099"; // SEMANTIC - Muted border. Use for: Composite border tokens for secondary containers, tables.
186
203
  export const idsColorBorderMuted = "#c5c6cb"; // SEMANTIC - Muted border. Use for: Composite border tokens for secondary containers, tables.
187
- export const idsColorBorderSubtle = "#F8F8FA"; // SEMANTIC - Subtle border. Use for: Composite border tokens for hairline dividers.
204
+ export const idsColorBorderSubtle = "#ebebef"; // SEMANTIC - Subtle border. Use for: Composite border tokens for hairline dividers.
188
205
  export const idsColorBorderDisabled = "#adaeb3"; // SEMANTIC - Disabled border. Use for: Composite border tokens for disabled states.
206
+ export const idsColorBorderSelected = "#3a64b8"; // SEMANTIC - Disabled border. Use for: Composite border tokens for disabled states.
189
207
  export const idsColorBorderFocus = "#7eaaff"; // SEMANTIC - Focus ring color. Use for: Composite border tokens that are used for keyboard focus on all interactive elements.
190
208
  export const idsColorBoxshadowAlpha16 = "lch(5.0543 1.8805 272.92 / 0.16)"; // Box-shadow color with 16% opacity.
191
209
  export const idsColorBoxshadowAlpha24 = "lch(5.0543 1.8805 272.92 / 0.24)"; // Box-shadow color with 24% opacity.
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.
@@ -123,11 +124,21 @@ export const idsBorderActionTertiary = {
123
124
  width: "2px",
124
125
  style: "solid",
125
126
  }; // SEMANTIC - Teretiary border, invisible. Use for: tertiary call-to-action buttons.
127
+ export const idsBorderActionItemSelected = {
128
+ color: "#3a64b8",
129
+ width: "2px",
130
+ style: "solid",
131
+ }; // SEMANTIC – Border for selected items, displayed at the bottom.
126
132
  export const idsBorderDefault = {
127
133
  color: "#8e9099",
128
134
  width: "1px",
129
135
  style: "solid",
130
136
  }; // SEMANTIC – Default border element with 3:1 contrast against all backgrounds and surfaces. Use for: Controls and input fields.
137
+ export const idsBorderSubtle = {
138
+ color: "#ebebef",
139
+ width: "1px",
140
+ style: "solid",
141
+ }; // SEMANTIC – Subtle border element with low contrast as decorator. Use for: Dividers.
131
142
  export const idsBorderDisabled = {
132
143
  color: "#adaeb3",
133
144
  width: "1px",
@@ -176,16 +187,23 @@ export const idsColorFieldHover = "#F8F8FA"; // SEMANTIC - Background color for
176
187
  export const idsColorFieldPressed = "#e0e1e4"; // SEMANTIC - Background color for the pressed state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
177
188
  export const idsColorFieldOnfield = "#2d2f35"; // SEMANTIC - Foreground color for text/icon on input fields. Use for: Non-empty state of input fields.
178
189
  export const idsColorFieldOnfieldmuted = "#4d5057"; // SEMANTIC - Foreground color for text/icon on input fields. Use for: Default state of input fields.
179
- export const idsColorNavigationDefault = "#00000000";
180
- export const idsColorNavigationHover = "#e6edfb";
181
- export const idsColorNavigationPressed = "#d1def8";
182
- export const idsColorNavigationOnnavigation = "#2d2f35";
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";
183
200
  export const idsColorBorderTransparent = "#00000000"; // SEMANTIC - Transparent border. Use for: Composite border tokens that require transparent color.
184
201
  export const idsColorBorderStrong = "#2d2f35"; // SEMANTIC - Strong border. Use for: Composite border tokens that require a dark border color.
185
202
  export const idsColorBorderDefault = "#8e9099"; // SEMANTIC - Muted border. Use for: Composite border tokens for secondary containers, tables.
186
203
  export const idsColorBorderMuted = "#c5c6cb"; // SEMANTIC - Muted border. Use for: Composite border tokens for secondary containers, tables.
187
- export const idsColorBorderSubtle = "#F8F8FA"; // SEMANTIC - Subtle border. Use for: Composite border tokens for hairline dividers.
204
+ export const idsColorBorderSubtle = "#ebebef"; // SEMANTIC - Subtle border. Use for: Composite border tokens for hairline dividers.
188
205
  export const idsColorBorderDisabled = "#adaeb3"; // SEMANTIC - Disabled border. Use for: Composite border tokens for disabled states.
206
+ export const idsColorBorderSelected = "#3a64b8"; // SEMANTIC - Disabled border. Use for: Composite border tokens for disabled states.
189
207
  export const idsColorBorderFocus = "#7eaaff"; // SEMANTIC - Focus ring color. Use for: Composite border tokens that are used for keyboard focus on all interactive elements.
190
208
  export const idsColorBoxshadowAlpha16 = "lch(5.0543 1.8805 272.92 / 0.16)"; // Box-shadow color with 16% opacity.
191
209
  export const idsColorBoxshadowAlpha24 = "lch(5.0543 1.8805 272.92 / 0.24)"; // Box-shadow color with 24% opacity.
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.
@@ -123,11 +124,21 @@ export const idsBorderActionTertiary = {
123
124
  width: "2px",
124
125
  style: "solid",
125
126
  }; // SEMANTIC - Teretiary border, invisible. Use for: tertiary call-to-action buttons.
127
+ export const idsBorderActionItemSelected = {
128
+ color: "#3a64b8",
129
+ width: "2px",
130
+ style: "solid",
131
+ }; // SEMANTIC – Border for selected items, displayed at the bottom.
126
132
  export const idsBorderDefault = {
127
133
  color: "#8e9099",
128
134
  width: "1px",
129
135
  style: "solid",
130
136
  }; // SEMANTIC – Default border element with 3:1 contrast against all backgrounds and surfaces. Use for: Controls and input fields.
137
+ export const idsBorderSubtle = {
138
+ color: "#ebebef",
139
+ width: "1px",
140
+ style: "solid",
141
+ }; // SEMANTIC – Subtle border element with low contrast as decorator. Use for: Dividers.
131
142
  export const idsBorderDisabled = {
132
143
  color: "#adaeb3",
133
144
  width: "1px",
@@ -176,16 +187,23 @@ export const idsColorFieldHover = "#F8F8FA"; // SEMANTIC - Background color for
176
187
  export const idsColorFieldPressed = "#e0e1e4"; // SEMANTIC - Background color for the pressed state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
177
188
  export const idsColorFieldOnfield = "#2d2f35"; // SEMANTIC - Foreground color for text/icon on input fields. Use for: Non-empty state of input fields.
178
189
  export const idsColorFieldOnfieldmuted = "#4d5057"; // SEMANTIC - Foreground color for text/icon on input fields. Use for: Default state of input fields.
179
- export const idsColorNavigationDefault = "#00000000";
180
- export const idsColorNavigationHover = "#e6edfb";
181
- export const idsColorNavigationPressed = "#d1def8";
182
- export const idsColorNavigationOnnavigation = "#2d2f35";
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";
183
200
  export const idsColorBorderTransparent = "#00000000"; // SEMANTIC - Transparent border. Use for: Composite border tokens that require transparent color.
184
201
  export const idsColorBorderStrong = "#2d2f35"; // SEMANTIC - Strong border. Use for: Composite border tokens that require a dark border color.
185
202
  export const idsColorBorderDefault = "#8e9099"; // SEMANTIC - Muted border. Use for: Composite border tokens for secondary containers, tables.
186
203
  export const idsColorBorderMuted = "#c5c6cb"; // SEMANTIC - Muted border. Use for: Composite border tokens for secondary containers, tables.
187
- export const idsColorBorderSubtle = "#F8F8FA"; // SEMANTIC - Subtle border. Use for: Composite border tokens for hairline dividers.
204
+ export const idsColorBorderSubtle = "#ebebef"; // SEMANTIC - Subtle border. Use for: Composite border tokens for hairline dividers.
188
205
  export const idsColorBorderDisabled = "#adaeb3"; // SEMANTIC - Disabled border. Use for: Composite border tokens for disabled states.
206
+ export const idsColorBorderSelected = "#3a64b8"; // SEMANTIC - Disabled border. Use for: Composite border tokens for disabled states.
189
207
  export const idsColorBorderFocus = "#7eaaff"; // SEMANTIC - Focus ring color. Use for: Composite border tokens that are used for keyboard focus on all interactive elements.
190
208
  export const idsColorBoxshadowAlpha16 = "lch(5.0543 1.8805 272.92 / 0.16)"; // Box-shadow color with 16% opacity.
191
209
  export const idsColorBoxshadowAlpha24 = "lch(5.0543 1.8805 272.92 / 0.24)"; // Box-shadow color with 24% opacity.
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",
@@ -120,11 +121,21 @@
120
121
  "width": "2px",
121
122
  "style": "solid"
122
123
  },
124
+ "idsBorderActionItemSelected": {
125
+ "color": "#3a64b8",
126
+ "width": "2px",
127
+ "style": "solid"
128
+ },
123
129
  "idsBorderDefault": {
124
130
  "color": "#8e9099",
125
131
  "width": "1px",
126
132
  "style": "solid"
127
133
  },
134
+ "idsBorderSubtle": {
135
+ "color": "#ebebef",
136
+ "width": "1px",
137
+ "style": "solid"
138
+ },
128
139
  "idsBorderDisabled": {
129
140
  "color": "#adaeb3",
130
141
  "width": "1px",
@@ -173,16 +184,23 @@
173
184
  "idsColorFieldPressed": "#e0e1e4",
174
185
  "idsColorFieldOnfield": "#2d2f35",
175
186
  "idsColorFieldOnfieldmuted": "#4d5057",
176
- "idsColorNavigationDefault": "#00000000",
177
- "idsColorNavigationHover": "#e6edfb",
178
- "idsColorNavigationPressed": "#d1def8",
179
- "idsColorNavigationOnnavigation": "#2d2f35",
187
+ "idsColorItemUnselectedDefault": "#00000000",
188
+ "idsColorItemUnselectedHover": "#e6edfb",
189
+ "idsColorItemUnselectedPressed": "#d1def8",
190
+ "idsColorItemUnselectedOnnavigation": "#2d2f35",
191
+ "idsColorItemUnselectedOnnavigationdisabled": "#8e9099",
192
+ "idsColorItemSelectedDefault": "#00000000",
193
+ "idsColorItemSelectedHover": "#e6edfb",
194
+ "idsColorItemSelectedPressed": "#d1def8",
195
+ "idsColorItemSelectedOnnavigation": "#3a64b8",
196
+ "idsColorItemSelectedOnnavigationdisabled": "#8e9099",
180
197
  "idsColorBorderTransparent": "#00000000",
181
198
  "idsColorBorderStrong": "#2d2f35",
182
199
  "idsColorBorderDefault": "#8e9099",
183
200
  "idsColorBorderMuted": "#c5c6cb",
184
- "idsColorBorderSubtle": "#F8F8FA",
201
+ "idsColorBorderSubtle": "#ebebef",
185
202
  "idsColorBorderDisabled": "#adaeb3",
203
+ "idsColorBorderSelected": "#3a64b8",
186
204
  "idsColorBorderFocus": "#7eaaff",
187
205
  "idsColorBoxshadowAlpha16": "lch(5.0543 1.8805 272.92 / 0.16)",
188
206
  "idsColorBoxshadowAlpha24": "lch(5.0543 1.8805 272.92 / 0.24)",