@inversestudio/design-tokens 1.1.2 → 1.1.3
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.
- package/dist/css/tokens.css +2 -2
- package/dist/css/tokens.dark.css +5 -5
- package/dist/css/tokens.light.css +2 -2
- package/dist/esm/tokens.dark.js +5 -5
- package/dist/esm/tokens.js +2 -2
- package/dist/esm/tokens.light.js +2 -2
- package/dist/js/tokens.dark.js +5 -5
- package/dist/js/tokens.js +2 -2
- package/dist/js/tokens.light.js +2 -2
- package/dist/json/tokens.dark.json +5 -5
- package/dist/json/tokens.dark.nested.json +5 -5
- package/dist/json/tokens.json +2 -2
- package/dist/json/tokens.light.json +2 -2
- package/dist/json/tokens.light.nested.json +2 -2
- package/dist/json/tokens.nested.json +2 -2
- package/dist/scss/_tokens.dark.scss +10 -10
- package/dist/scss/_tokens.light.scss +4 -4
- package/dist/scss/_tokens.scss +4 -4
- package/dist/types/tokens.d.ts +6 -6
- package/dist/types/tokens.dark.d.ts +15 -15
- package/dist/types/tokens.light.d.ts +6 -6
- package/package.json +1 -1
package/dist/css/tokens.css
CHANGED
|
@@ -135,13 +135,13 @@
|
|
|
135
135
|
--ids-color-control-unselected-hover: #e6edfb;
|
|
136
136
|
--ids-color-control-unselected-pressed: #d1def8;
|
|
137
137
|
--ids-color-control-unselected-disabled: #e0e1e4;
|
|
138
|
-
--ids-color-control-unselected-indicator-
|
|
138
|
+
--ids-color-control-unselected-indicator-enabled: #ffffff;
|
|
139
139
|
--ids-color-control-unselected-indicator-disabled: #c5c6cb;
|
|
140
140
|
--ids-color-control-selected-default: #4d5057;
|
|
141
141
|
--ids-color-control-selected-hover: #707784;
|
|
142
142
|
--ids-color-control-selected-pressed: #101114;
|
|
143
143
|
--ids-color-control-selected-disabled: #c5c6cb;
|
|
144
|
-
--ids-color-control-selected-indicator-
|
|
144
|
+
--ids-color-control-selected-indicator-enabled: #ffffff;
|
|
145
145
|
--ids-color-control-selected-indicator-disabled: #adaeb3;
|
|
146
146
|
--ids-color-field-default: #F8F8FA;
|
|
147
147
|
--ids-color-field-hover: #F8F8FA;
|
package/dist/css/tokens.dark.css
CHANGED
|
@@ -135,13 +135,13 @@
|
|
|
135
135
|
--ids-color-control-unselected-hover: #e6edfb;
|
|
136
136
|
--ids-color-control-unselected-pressed: #d1def8;
|
|
137
137
|
--ids-color-control-unselected-disabled: #e0e1e4;
|
|
138
|
-
--ids-color-control-unselected-indicator-
|
|
138
|
+
--ids-color-control-unselected-indicator-enabled: #ffffff;
|
|
139
139
|
--ids-color-control-unselected-indicator-disabled: #c5c6cb;
|
|
140
140
|
--ids-color-control-selected-default: #4d5057;
|
|
141
141
|
--ids-color-control-selected-hover: #707784;
|
|
142
142
|
--ids-color-control-selected-pressed: #101114;
|
|
143
143
|
--ids-color-control-selected-disabled: #c5c6cb;
|
|
144
|
-
--ids-color-control-selected-indicator-
|
|
144
|
+
--ids-color-control-selected-indicator-enabled: #ffffff;
|
|
145
145
|
--ids-color-control-selected-indicator-disabled: #adaeb3;
|
|
146
146
|
--ids-color-field-default: #F8F8FA;
|
|
147
147
|
--ids-color-field-hover: #F8F8FA;
|
|
@@ -151,12 +151,12 @@
|
|
|
151
151
|
--ids-color-item-unselected-default: #00000000;
|
|
152
152
|
--ids-color-item-unselected-hover: #e6edfb;
|
|
153
153
|
--ids-color-item-unselected-pressed: #d1def8;
|
|
154
|
-
--ids-color-item-unselected-
|
|
155
|
-
--ids-color-item-unselected-
|
|
154
|
+
--ids-color-item-unselected-onitem: #2d2f35;
|
|
155
|
+
--ids-color-item-unselected-onitemdisabled: #8e9099;
|
|
156
156
|
--ids-color-item-selected-default: lch(93.522 7.6467 266.59 / 0.48);
|
|
157
157
|
--ids-color-item-selected-hover: #e6edfb;
|
|
158
158
|
--ids-color-item-selected-pressed: #d1def8;
|
|
159
|
-
--ids-color-item-selected-
|
|
159
|
+
--ids-color-item-selected-onitem: #3a64b8;
|
|
160
160
|
--ids-color-border-transparent: #00000000;
|
|
161
161
|
--ids-color-border-strong: #2d2f35;
|
|
162
162
|
--ids-color-border-default: #8e9099;
|
|
@@ -135,13 +135,13 @@
|
|
|
135
135
|
--ids-color-control-unselected-hover: #e6edfb;
|
|
136
136
|
--ids-color-control-unselected-pressed: #d1def8;
|
|
137
137
|
--ids-color-control-unselected-disabled: #e0e1e4;
|
|
138
|
-
--ids-color-control-unselected-indicator-
|
|
138
|
+
--ids-color-control-unselected-indicator-enabled: #ffffff;
|
|
139
139
|
--ids-color-control-unselected-indicator-disabled: #c5c6cb;
|
|
140
140
|
--ids-color-control-selected-default: #4d5057;
|
|
141
141
|
--ids-color-control-selected-hover: #707784;
|
|
142
142
|
--ids-color-control-selected-pressed: #101114;
|
|
143
143
|
--ids-color-control-selected-disabled: #c5c6cb;
|
|
144
|
-
--ids-color-control-selected-indicator-
|
|
144
|
+
--ids-color-control-selected-indicator-enabled: #ffffff;
|
|
145
145
|
--ids-color-control-selected-indicator-disabled: #adaeb3;
|
|
146
146
|
--ids-color-field-default: #F8F8FA;
|
|
147
147
|
--ids-color-field-hover: #F8F8FA;
|
package/dist/esm/tokens.dark.js
CHANGED
|
@@ -174,13 +174,13 @@ export const idsColorControlUnselectedDefault = "#F8F8FA"; // SEMANTIC - Backgro
|
|
|
174
174
|
export const idsColorControlUnselectedHover = "#e6edfb"; // SEMANTIC - Background color for the hover state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
|
|
175
175
|
export const idsColorControlUnselectedPressed = "#d1def8"; // SEMANTIC - Background color for the pressed state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
|
|
176
176
|
export const idsColorControlUnselectedDisabled = "#e0e1e4"; // SEMANTIC - Background color for the pressed state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
|
|
177
|
-
export const
|
|
177
|
+
export const idsColorControlUnselectedIndicatorEnabled = "#ffffff"; // SEMANTIC - Fill color for the interactive knob within switches and sliders.
|
|
178
178
|
export const idsColorControlUnselectedIndicatorDisabled = "#c5c6cb"; // SEMANTIC - Fill color for the interactive knob in disabled state within switches and sliders.
|
|
179
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
|
|
180
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
|
|
181
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
|
|
182
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
|
|
183
|
-
export const
|
|
183
|
+
export const idsColorControlSelectedIndicatorEnabled = "#ffffff"; // SEMANTIC - Fill color for the interactive knob within switches and sliders.
|
|
184
184
|
export const idsColorControlSelectedIndicatorDisabled = "#adaeb3"; // SEMANTIC - Fill color for the interactive knob in disabled state within switches and sliders.
|
|
185
185
|
export const idsColorFieldDefault = "#F8F8FA"; // SEMANTIC - Background color for the default state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
|
|
186
186
|
export const idsColorFieldHover = "#F8F8FA"; // SEMANTIC - Background color for the hover state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
|
|
@@ -190,12 +190,12 @@ export const idsColorFieldOnfieldmuted = "#4d5057"; // SEMANTIC - Foreground col
|
|
|
190
190
|
export const idsColorItemUnselectedDefault = "#00000000"; // SEMANTIC – Background color for the default unselected state of ListItem, Tab and MenuItem.
|
|
191
191
|
export const idsColorItemUnselectedHover = "#e6edfb"; // SEMANTIC – Background color for the hover unselected state of ListItem, Tab and MenuItem.
|
|
192
192
|
export const idsColorItemUnselectedPressed = "#d1def8"; // SEMANTIC – Background color for the pressed unselected state of ListItem, Tab and MenuItem.
|
|
193
|
-
export const
|
|
194
|
-
export const
|
|
193
|
+
export const idsColorItemUnselectedOnitem = "#2d2f35"; // SEMANTIC – Foreground color for text and icon on the unselected states of Tabs, ListItem and MenuItem.
|
|
194
|
+
export const idsColorItemUnselectedOnitemdisabled = "#8e9099"; // SEMANTIC – Foreground color for text and icon on the unselected disabled state of Tabs, ListItem and MenuItem.
|
|
195
195
|
export const idsColorItemSelectedDefault = "lch(93.522 7.6467 266.59 / 0.48)"; // SEMANTIC – Background color for the default selected state of ListItem, Tab and MenuItem.
|
|
196
196
|
export const idsColorItemSelectedHover = "#e6edfb"; // SEMANTIC – Background color for the hover selected state of ListItem, Tab and MenuItem.
|
|
197
197
|
export const idsColorItemSelectedPressed = "#d1def8"; // SEMANTIC – Background color for the pressed selected state of ListItem, Tab and MenuItem.
|
|
198
|
-
export const
|
|
198
|
+
export const idsColorItemSelectedOnitem = "#3a64b8"; // SEMANTIC – Foreground color for text and icon on the selected states of Tabs, ListItem and MenuItem.
|
|
199
199
|
export const idsColorBorderTransparent = "#00000000"; // SEMANTIC - Transparent border. Use for: Composite border tokens that require transparent color.
|
|
200
200
|
export const idsColorBorderStrong = "#2d2f35"; // SEMANTIC - Strong border. Use for: Composite border tokens that require a dark border color.
|
|
201
201
|
export const idsColorBorderDefault = "#8e9099"; // SEMANTIC - Muted border. Use for: Composite border tokens for secondary containers, tables.
|
package/dist/esm/tokens.js
CHANGED
|
@@ -174,13 +174,13 @@ export const idsColorControlUnselectedDefault = "#F8F8FA"; // SEMANTIC - Backgro
|
|
|
174
174
|
export const idsColorControlUnselectedHover = "#e6edfb"; // SEMANTIC - Background color for the hover state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
|
|
175
175
|
export const idsColorControlUnselectedPressed = "#d1def8"; // SEMANTIC - Background color for the pressed state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
|
|
176
176
|
export const idsColorControlUnselectedDisabled = "#e0e1e4"; // SEMANTIC - Background color for the pressed state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
|
|
177
|
-
export const
|
|
177
|
+
export const idsColorControlUnselectedIndicatorEnabled = "#ffffff"; // SEMANTIC - Fill color for the interactive knob within switches and sliders.
|
|
178
178
|
export const idsColorControlUnselectedIndicatorDisabled = "#c5c6cb"; // SEMANTIC - Fill color for the interactive knob in disabled state within switches and sliders.
|
|
179
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
|
|
180
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
|
|
181
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
|
|
182
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
|
|
183
|
-
export const
|
|
183
|
+
export const idsColorControlSelectedIndicatorEnabled = "#ffffff"; // SEMANTIC - Fill color for the interactive knob within switches and sliders.
|
|
184
184
|
export const idsColorControlSelectedIndicatorDisabled = "#adaeb3"; // SEMANTIC - Fill color for the interactive knob in disabled state within switches and sliders.
|
|
185
185
|
export const idsColorFieldDefault = "#F8F8FA"; // SEMANTIC - Background color for the default state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
|
|
186
186
|
export const idsColorFieldHover = "#F8F8FA"; // SEMANTIC - Background color for the hover state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
|
package/dist/esm/tokens.light.js
CHANGED
|
@@ -174,13 +174,13 @@ export const idsColorControlUnselectedDefault = "#F8F8FA"; // SEMANTIC - Backgro
|
|
|
174
174
|
export const idsColorControlUnselectedHover = "#e6edfb"; // SEMANTIC - Background color for the hover state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
|
|
175
175
|
export const idsColorControlUnselectedPressed = "#d1def8"; // SEMANTIC - Background color for the pressed state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
|
|
176
176
|
export const idsColorControlUnselectedDisabled = "#e0e1e4"; // SEMANTIC - Background color for the pressed state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
|
|
177
|
-
export const
|
|
177
|
+
export const idsColorControlUnselectedIndicatorEnabled = "#ffffff"; // SEMANTIC - Fill color for the interactive knob within switches and sliders.
|
|
178
178
|
export const idsColorControlUnselectedIndicatorDisabled = "#c5c6cb"; // SEMANTIC - Fill color for the interactive knob in disabled state within switches and sliders.
|
|
179
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
|
|
180
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
|
|
181
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
|
|
182
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
|
|
183
|
-
export const
|
|
183
|
+
export const idsColorControlSelectedIndicatorEnabled = "#ffffff"; // SEMANTIC - Fill color for the interactive knob within switches and sliders.
|
|
184
184
|
export const idsColorControlSelectedIndicatorDisabled = "#adaeb3"; // SEMANTIC - Fill color for the interactive knob in disabled state within switches and sliders.
|
|
185
185
|
export const idsColorFieldDefault = "#F8F8FA"; // SEMANTIC - Background color for the default state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
|
|
186
186
|
export const idsColorFieldHover = "#F8F8FA"; // SEMANTIC - Background color for the hover state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
|
package/dist/js/tokens.dark.js
CHANGED
|
@@ -174,13 +174,13 @@ export const idsColorControlUnselectedDefault = "#F8F8FA"; // SEMANTIC - Backgro
|
|
|
174
174
|
export const idsColorControlUnselectedHover = "#e6edfb"; // SEMANTIC - Background color for the hover state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
|
|
175
175
|
export const idsColorControlUnselectedPressed = "#d1def8"; // SEMANTIC - Background color for the pressed state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
|
|
176
176
|
export const idsColorControlUnselectedDisabled = "#e0e1e4"; // SEMANTIC - Background color for the pressed state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
|
|
177
|
-
export const
|
|
177
|
+
export const idsColorControlUnselectedIndicatorEnabled = "#ffffff"; // SEMANTIC - Fill color for the interactive knob within switches and sliders.
|
|
178
178
|
export const idsColorControlUnselectedIndicatorDisabled = "#c5c6cb"; // SEMANTIC - Fill color for the interactive knob in disabled state within switches and sliders.
|
|
179
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
|
|
180
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
|
|
181
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
|
|
182
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
|
|
183
|
-
export const
|
|
183
|
+
export const idsColorControlSelectedIndicatorEnabled = "#ffffff"; // SEMANTIC - Fill color for the interactive knob within switches and sliders.
|
|
184
184
|
export const idsColorControlSelectedIndicatorDisabled = "#adaeb3"; // SEMANTIC - Fill color for the interactive knob in disabled state within switches and sliders.
|
|
185
185
|
export const idsColorFieldDefault = "#F8F8FA"; // SEMANTIC - Background color for the default state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
|
|
186
186
|
export const idsColorFieldHover = "#F8F8FA"; // SEMANTIC - Background color for the hover state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
|
|
@@ -190,12 +190,12 @@ export const idsColorFieldOnfieldmuted = "#4d5057"; // SEMANTIC - Foreground col
|
|
|
190
190
|
export const idsColorItemUnselectedDefault = "#00000000"; // SEMANTIC – Background color for the default unselected state of ListItem, Tab and MenuItem.
|
|
191
191
|
export const idsColorItemUnselectedHover = "#e6edfb"; // SEMANTIC – Background color for the hover unselected state of ListItem, Tab and MenuItem.
|
|
192
192
|
export const idsColorItemUnselectedPressed = "#d1def8"; // SEMANTIC – Background color for the pressed unselected state of ListItem, Tab and MenuItem.
|
|
193
|
-
export const
|
|
194
|
-
export const
|
|
193
|
+
export const idsColorItemUnselectedOnitem = "#2d2f35"; // SEMANTIC – Foreground color for text and icon on the unselected states of Tabs, ListItem and MenuItem.
|
|
194
|
+
export const idsColorItemUnselectedOnitemdisabled = "#8e9099"; // SEMANTIC – Foreground color for text and icon on the unselected disabled state of Tabs, ListItem and MenuItem.
|
|
195
195
|
export const idsColorItemSelectedDefault = "lch(93.522 7.6467 266.59 / 0.48)"; // SEMANTIC – Background color for the default selected state of ListItem, Tab and MenuItem.
|
|
196
196
|
export const idsColorItemSelectedHover = "#e6edfb"; // SEMANTIC – Background color for the hover selected state of ListItem, Tab and MenuItem.
|
|
197
197
|
export const idsColorItemSelectedPressed = "#d1def8"; // SEMANTIC – Background color for the pressed selected state of ListItem, Tab and MenuItem.
|
|
198
|
-
export const
|
|
198
|
+
export const idsColorItemSelectedOnitem = "#3a64b8"; // SEMANTIC – Foreground color for text and icon on the selected states of Tabs, ListItem and MenuItem.
|
|
199
199
|
export const idsColorBorderTransparent = "#00000000"; // SEMANTIC - Transparent border. Use for: Composite border tokens that require transparent color.
|
|
200
200
|
export const idsColorBorderStrong = "#2d2f35"; // SEMANTIC - Strong border. Use for: Composite border tokens that require a dark border color.
|
|
201
201
|
export const idsColorBorderDefault = "#8e9099"; // SEMANTIC - Muted border. Use for: Composite border tokens for secondary containers, tables.
|
package/dist/js/tokens.js
CHANGED
|
@@ -174,13 +174,13 @@ export const idsColorControlUnselectedDefault = "#F8F8FA"; // SEMANTIC - Backgro
|
|
|
174
174
|
export const idsColorControlUnselectedHover = "#e6edfb"; // SEMANTIC - Background color for the hover state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
|
|
175
175
|
export const idsColorControlUnselectedPressed = "#d1def8"; // SEMANTIC - Background color for the pressed state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
|
|
176
176
|
export const idsColorControlUnselectedDisabled = "#e0e1e4"; // SEMANTIC - Background color for the pressed state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
|
|
177
|
-
export const
|
|
177
|
+
export const idsColorControlUnselectedIndicatorEnabled = "#ffffff"; // SEMANTIC - Fill color for the interactive knob within switches and sliders.
|
|
178
178
|
export const idsColorControlUnselectedIndicatorDisabled = "#c5c6cb"; // SEMANTIC - Fill color for the interactive knob in disabled state within switches and sliders.
|
|
179
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
|
|
180
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
|
|
181
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
|
|
182
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
|
|
183
|
-
export const
|
|
183
|
+
export const idsColorControlSelectedIndicatorEnabled = "#ffffff"; // SEMANTIC - Fill color for the interactive knob within switches and sliders.
|
|
184
184
|
export const idsColorControlSelectedIndicatorDisabled = "#adaeb3"; // SEMANTIC - Fill color for the interactive knob in disabled state within switches and sliders.
|
|
185
185
|
export const idsColorFieldDefault = "#F8F8FA"; // SEMANTIC - Background color for the default state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
|
|
186
186
|
export const idsColorFieldHover = "#F8F8FA"; // SEMANTIC - Background color for the hover state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
|
package/dist/js/tokens.light.js
CHANGED
|
@@ -174,13 +174,13 @@ export const idsColorControlUnselectedDefault = "#F8F8FA"; // SEMANTIC - Backgro
|
|
|
174
174
|
export const idsColorControlUnselectedHover = "#e6edfb"; // SEMANTIC - Background color for the hover state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
|
|
175
175
|
export const idsColorControlUnselectedPressed = "#d1def8"; // SEMANTIC - Background color for the pressed state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
|
|
176
176
|
export const idsColorControlUnselectedDisabled = "#e0e1e4"; // SEMANTIC - Background color for the pressed state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
|
|
177
|
-
export const
|
|
177
|
+
export const idsColorControlUnselectedIndicatorEnabled = "#ffffff"; // SEMANTIC - Fill color for the interactive knob within switches and sliders.
|
|
178
178
|
export const idsColorControlUnselectedIndicatorDisabled = "#c5c6cb"; // SEMANTIC - Fill color for the interactive knob in disabled state within switches and sliders.
|
|
179
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
|
|
180
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
|
|
181
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
|
|
182
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
|
|
183
|
-
export const
|
|
183
|
+
export const idsColorControlSelectedIndicatorEnabled = "#ffffff"; // SEMANTIC - Fill color for the interactive knob within switches and sliders.
|
|
184
184
|
export const idsColorControlSelectedIndicatorDisabled = "#adaeb3"; // SEMANTIC - Fill color for the interactive knob in disabled state within switches and sliders.
|
|
185
185
|
export const idsColorFieldDefault = "#F8F8FA"; // SEMANTIC - Background color for the default state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
|
|
186
186
|
export const idsColorFieldHover = "#F8F8FA"; // SEMANTIC - Background color for the hover state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
|
|
@@ -171,13 +171,13 @@
|
|
|
171
171
|
"idsColorControlUnselectedHover": "#e6edfb",
|
|
172
172
|
"idsColorControlUnselectedPressed": "#d1def8",
|
|
173
173
|
"idsColorControlUnselectedDisabled": "#e0e1e4",
|
|
174
|
-
"
|
|
174
|
+
"idsColorControlUnselectedIndicatorEnabled": "#ffffff",
|
|
175
175
|
"idsColorControlUnselectedIndicatorDisabled": "#c5c6cb",
|
|
176
176
|
"idsColorControlSelectedDefault": "#4d5057",
|
|
177
177
|
"idsColorControlSelectedHover": "#707784",
|
|
178
178
|
"idsColorControlSelectedPressed": "#101114",
|
|
179
179
|
"idsColorControlSelectedDisabled": "#c5c6cb",
|
|
180
|
-
"
|
|
180
|
+
"idsColorControlSelectedIndicatorEnabled": "#ffffff",
|
|
181
181
|
"idsColorControlSelectedIndicatorDisabled": "#adaeb3",
|
|
182
182
|
"idsColorFieldDefault": "#F8F8FA",
|
|
183
183
|
"idsColorFieldHover": "#F8F8FA",
|
|
@@ -187,12 +187,12 @@
|
|
|
187
187
|
"idsColorItemUnselectedDefault": "#00000000",
|
|
188
188
|
"idsColorItemUnselectedHover": "#e6edfb",
|
|
189
189
|
"idsColorItemUnselectedPressed": "#d1def8",
|
|
190
|
-
"
|
|
191
|
-
"
|
|
190
|
+
"idsColorItemUnselectedOnitem": "#2d2f35",
|
|
191
|
+
"idsColorItemUnselectedOnitemdisabled": "#8e9099",
|
|
192
192
|
"idsColorItemSelectedDefault": "lch(93.522 7.6467 266.59 / 0.48)",
|
|
193
193
|
"idsColorItemSelectedHover": "#e6edfb",
|
|
194
194
|
"idsColorItemSelectedPressed": "#d1def8",
|
|
195
|
-
"
|
|
195
|
+
"idsColorItemSelectedOnitem": "#3a64b8",
|
|
196
196
|
"idsColorBorderTransparent": "#00000000",
|
|
197
197
|
"idsColorBorderStrong": "#2d2f35",
|
|
198
198
|
"idsColorBorderDefault": "#8e9099",
|
|
@@ -236,7 +236,7 @@
|
|
|
236
236
|
"pressed": "#d1def8",
|
|
237
237
|
"disabled": "#e0e1e4",
|
|
238
238
|
"indicator": {
|
|
239
|
-
"
|
|
239
|
+
"enabled": "#ffffff",
|
|
240
240
|
"disabled": "#c5c6cb"
|
|
241
241
|
}
|
|
242
242
|
},
|
|
@@ -246,7 +246,7 @@
|
|
|
246
246
|
"pressed": "#101114",
|
|
247
247
|
"disabled": "#c5c6cb",
|
|
248
248
|
"indicator": {
|
|
249
|
-
"
|
|
249
|
+
"enabled": "#ffffff",
|
|
250
250
|
"disabled": "#adaeb3"
|
|
251
251
|
}
|
|
252
252
|
}
|
|
@@ -263,14 +263,14 @@
|
|
|
263
263
|
"default": "#00000000",
|
|
264
264
|
"hover": "#e6edfb",
|
|
265
265
|
"pressed": "#d1def8",
|
|
266
|
-
"
|
|
267
|
-
"
|
|
266
|
+
"onItem": "#2d2f35",
|
|
267
|
+
"onItemDisabled": "#8e9099"
|
|
268
268
|
},
|
|
269
269
|
"selected": {
|
|
270
270
|
"default": "lch(93.522 7.6467 266.59 / 0.48)",
|
|
271
271
|
"hover": "#e6edfb",
|
|
272
272
|
"pressed": "#d1def8",
|
|
273
|
-
"
|
|
273
|
+
"onItem": "#3a64b8"
|
|
274
274
|
}
|
|
275
275
|
},
|
|
276
276
|
"border": {
|
package/dist/json/tokens.json
CHANGED
|
@@ -171,13 +171,13 @@
|
|
|
171
171
|
"idsColorControlUnselectedHover": "#e6edfb",
|
|
172
172
|
"idsColorControlUnselectedPressed": "#d1def8",
|
|
173
173
|
"idsColorControlUnselectedDisabled": "#e0e1e4",
|
|
174
|
-
"
|
|
174
|
+
"idsColorControlUnselectedIndicatorEnabled": "#ffffff",
|
|
175
175
|
"idsColorControlUnselectedIndicatorDisabled": "#c5c6cb",
|
|
176
176
|
"idsColorControlSelectedDefault": "#4d5057",
|
|
177
177
|
"idsColorControlSelectedHover": "#707784",
|
|
178
178
|
"idsColorControlSelectedPressed": "#101114",
|
|
179
179
|
"idsColorControlSelectedDisabled": "#c5c6cb",
|
|
180
|
-
"
|
|
180
|
+
"idsColorControlSelectedIndicatorEnabled": "#ffffff",
|
|
181
181
|
"idsColorControlSelectedIndicatorDisabled": "#adaeb3",
|
|
182
182
|
"idsColorFieldDefault": "#F8F8FA",
|
|
183
183
|
"idsColorFieldHover": "#F8F8FA",
|
|
@@ -171,13 +171,13 @@
|
|
|
171
171
|
"idsColorControlUnselectedHover": "#e6edfb",
|
|
172
172
|
"idsColorControlUnselectedPressed": "#d1def8",
|
|
173
173
|
"idsColorControlUnselectedDisabled": "#e0e1e4",
|
|
174
|
-
"
|
|
174
|
+
"idsColorControlUnselectedIndicatorEnabled": "#ffffff",
|
|
175
175
|
"idsColorControlUnselectedIndicatorDisabled": "#c5c6cb",
|
|
176
176
|
"idsColorControlSelectedDefault": "#4d5057",
|
|
177
177
|
"idsColorControlSelectedHover": "#707784",
|
|
178
178
|
"idsColorControlSelectedPressed": "#101114",
|
|
179
179
|
"idsColorControlSelectedDisabled": "#c5c6cb",
|
|
180
|
-
"
|
|
180
|
+
"idsColorControlSelectedIndicatorEnabled": "#ffffff",
|
|
181
181
|
"idsColorControlSelectedIndicatorDisabled": "#adaeb3",
|
|
182
182
|
"idsColorFieldDefault": "#F8F8FA",
|
|
183
183
|
"idsColorFieldHover": "#F8F8FA",
|
|
@@ -236,7 +236,7 @@
|
|
|
236
236
|
"pressed": "#d1def8",
|
|
237
237
|
"disabled": "#e0e1e4",
|
|
238
238
|
"indicator": {
|
|
239
|
-
"
|
|
239
|
+
"enabled": "#ffffff",
|
|
240
240
|
"disabled": "#c5c6cb"
|
|
241
241
|
}
|
|
242
242
|
},
|
|
@@ -246,7 +246,7 @@
|
|
|
246
246
|
"pressed": "#101114",
|
|
247
247
|
"disabled": "#c5c6cb",
|
|
248
248
|
"indicator": {
|
|
249
|
-
"
|
|
249
|
+
"enabled": "#ffffff",
|
|
250
250
|
"disabled": "#adaeb3"
|
|
251
251
|
}
|
|
252
252
|
}
|
|
@@ -236,7 +236,7 @@
|
|
|
236
236
|
"pressed": "#d1def8",
|
|
237
237
|
"disabled": "#e0e1e4",
|
|
238
238
|
"indicator": {
|
|
239
|
-
"
|
|
239
|
+
"enabled": "#ffffff",
|
|
240
240
|
"disabled": "#c5c6cb"
|
|
241
241
|
}
|
|
242
242
|
},
|
|
@@ -246,7 +246,7 @@
|
|
|
246
246
|
"pressed": "#101114",
|
|
247
247
|
"disabled": "#c5c6cb",
|
|
248
248
|
"indicator": {
|
|
249
|
-
"
|
|
249
|
+
"enabled": "#ffffff",
|
|
250
250
|
"disabled": "#adaeb3"
|
|
251
251
|
}
|
|
252
252
|
}
|
|
@@ -125,13 +125,13 @@ $ids-color-control-unselected-default: #F8F8FA;
|
|
|
125
125
|
$ids-color-control-unselected-hover: #e6edfb;
|
|
126
126
|
$ids-color-control-unselected-pressed: #d1def8;
|
|
127
127
|
$ids-color-control-unselected-disabled: #e0e1e4;
|
|
128
|
-
$ids-color-control-unselected-indicator-
|
|
128
|
+
$ids-color-control-unselected-indicator-enabled: #ffffff;
|
|
129
129
|
$ids-color-control-unselected-indicator-disabled: #c5c6cb;
|
|
130
130
|
$ids-color-control-selected-default: #4d5057;
|
|
131
131
|
$ids-color-control-selected-hover: #707784;
|
|
132
132
|
$ids-color-control-selected-pressed: #101114;
|
|
133
133
|
$ids-color-control-selected-disabled: #c5c6cb;
|
|
134
|
-
$ids-color-control-selected-indicator-
|
|
134
|
+
$ids-color-control-selected-indicator-enabled: #ffffff;
|
|
135
135
|
$ids-color-control-selected-indicator-disabled: #adaeb3;
|
|
136
136
|
$ids-color-field-default: #F8F8FA;
|
|
137
137
|
$ids-color-field-hover: #F8F8FA;
|
|
@@ -141,12 +141,12 @@ $ids-color-field-onfieldmuted: #4d5057;
|
|
|
141
141
|
$ids-color-item-unselected-default: #00000000;
|
|
142
142
|
$ids-color-item-unselected-hover: #e6edfb;
|
|
143
143
|
$ids-color-item-unselected-pressed: #d1def8;
|
|
144
|
-
$ids-color-item-unselected-
|
|
145
|
-
$ids-color-item-unselected-
|
|
144
|
+
$ids-color-item-unselected-onitem: #2d2f35;
|
|
145
|
+
$ids-color-item-unselected-onitemdisabled: #8e9099;
|
|
146
146
|
$ids-color-item-selected-default: lch(93.522 7.6467 266.59 / 0.48);
|
|
147
147
|
$ids-color-item-selected-hover: #e6edfb;
|
|
148
148
|
$ids-color-item-selected-pressed: #d1def8;
|
|
149
|
-
$ids-color-item-selected-
|
|
149
|
+
$ids-color-item-selected-onitem: #3a64b8;
|
|
150
150
|
$ids-color-border-transparent: #00000000;
|
|
151
151
|
$ids-color-border-strong: #2d2f35;
|
|
152
152
|
$ids-color-border-default: #8e9099;
|
|
@@ -282,13 +282,13 @@ $ids-tokens: (
|
|
|
282
282
|
'ids-color-control-unselected-hover': $ids-color-control-unselected-hover,
|
|
283
283
|
'ids-color-control-unselected-pressed': $ids-color-control-unselected-pressed,
|
|
284
284
|
'ids-color-control-unselected-disabled': $ids-color-control-unselected-disabled,
|
|
285
|
-
'ids-color-control-unselected-indicator-
|
|
285
|
+
'ids-color-control-unselected-indicator-enabled': $ids-color-control-unselected-indicator-enabled,
|
|
286
286
|
'ids-color-control-unselected-indicator-disabled': $ids-color-control-unselected-indicator-disabled,
|
|
287
287
|
'ids-color-control-selected-default': $ids-color-control-selected-default,
|
|
288
288
|
'ids-color-control-selected-hover': $ids-color-control-selected-hover,
|
|
289
289
|
'ids-color-control-selected-pressed': $ids-color-control-selected-pressed,
|
|
290
290
|
'ids-color-control-selected-disabled': $ids-color-control-selected-disabled,
|
|
291
|
-
'ids-color-control-selected-indicator-
|
|
291
|
+
'ids-color-control-selected-indicator-enabled': $ids-color-control-selected-indicator-enabled,
|
|
292
292
|
'ids-color-control-selected-indicator-disabled': $ids-color-control-selected-indicator-disabled,
|
|
293
293
|
'ids-color-field-default': $ids-color-field-default,
|
|
294
294
|
'ids-color-field-hover': $ids-color-field-hover,
|
|
@@ -298,12 +298,12 @@ $ids-tokens: (
|
|
|
298
298
|
'ids-color-item-unselected-default': $ids-color-item-unselected-default,
|
|
299
299
|
'ids-color-item-unselected-hover': $ids-color-item-unselected-hover,
|
|
300
300
|
'ids-color-item-unselected-pressed': $ids-color-item-unselected-pressed,
|
|
301
|
-
'ids-color-item-unselected-
|
|
302
|
-
'ids-color-item-unselected-
|
|
301
|
+
'ids-color-item-unselected-onitem': $ids-color-item-unselected-onitem,
|
|
302
|
+
'ids-color-item-unselected-onitemdisabled': $ids-color-item-unselected-onitemdisabled,
|
|
303
303
|
'ids-color-item-selected-default': $ids-color-item-selected-default,
|
|
304
304
|
'ids-color-item-selected-hover': $ids-color-item-selected-hover,
|
|
305
305
|
'ids-color-item-selected-pressed': $ids-color-item-selected-pressed,
|
|
306
|
-
'ids-color-item-selected-
|
|
306
|
+
'ids-color-item-selected-onitem': $ids-color-item-selected-onitem,
|
|
307
307
|
'ids-color-border-transparent': $ids-color-border-transparent,
|
|
308
308
|
'ids-color-border-strong': $ids-color-border-strong,
|
|
309
309
|
'ids-color-border-default': $ids-color-border-default,
|
|
@@ -125,13 +125,13 @@ $ids-color-control-unselected-default: #F8F8FA;
|
|
|
125
125
|
$ids-color-control-unselected-hover: #e6edfb;
|
|
126
126
|
$ids-color-control-unselected-pressed: #d1def8;
|
|
127
127
|
$ids-color-control-unselected-disabled: #e0e1e4;
|
|
128
|
-
$ids-color-control-unselected-indicator-
|
|
128
|
+
$ids-color-control-unselected-indicator-enabled: #ffffff;
|
|
129
129
|
$ids-color-control-unselected-indicator-disabled: #c5c6cb;
|
|
130
130
|
$ids-color-control-selected-default: #4d5057;
|
|
131
131
|
$ids-color-control-selected-hover: #707784;
|
|
132
132
|
$ids-color-control-selected-pressed: #101114;
|
|
133
133
|
$ids-color-control-selected-disabled: #c5c6cb;
|
|
134
|
-
$ids-color-control-selected-indicator-
|
|
134
|
+
$ids-color-control-selected-indicator-enabled: #ffffff;
|
|
135
135
|
$ids-color-control-selected-indicator-disabled: #adaeb3;
|
|
136
136
|
$ids-color-field-default: #F8F8FA;
|
|
137
137
|
$ids-color-field-hover: #F8F8FA;
|
|
@@ -282,13 +282,13 @@ $ids-tokens: (
|
|
|
282
282
|
'ids-color-control-unselected-hover': $ids-color-control-unselected-hover,
|
|
283
283
|
'ids-color-control-unselected-pressed': $ids-color-control-unselected-pressed,
|
|
284
284
|
'ids-color-control-unselected-disabled': $ids-color-control-unselected-disabled,
|
|
285
|
-
'ids-color-control-unselected-indicator-
|
|
285
|
+
'ids-color-control-unselected-indicator-enabled': $ids-color-control-unselected-indicator-enabled,
|
|
286
286
|
'ids-color-control-unselected-indicator-disabled': $ids-color-control-unselected-indicator-disabled,
|
|
287
287
|
'ids-color-control-selected-default': $ids-color-control-selected-default,
|
|
288
288
|
'ids-color-control-selected-hover': $ids-color-control-selected-hover,
|
|
289
289
|
'ids-color-control-selected-pressed': $ids-color-control-selected-pressed,
|
|
290
290
|
'ids-color-control-selected-disabled': $ids-color-control-selected-disabled,
|
|
291
|
-
'ids-color-control-selected-indicator-
|
|
291
|
+
'ids-color-control-selected-indicator-enabled': $ids-color-control-selected-indicator-enabled,
|
|
292
292
|
'ids-color-control-selected-indicator-disabled': $ids-color-control-selected-indicator-disabled,
|
|
293
293
|
'ids-color-field-default': $ids-color-field-default,
|
|
294
294
|
'ids-color-field-hover': $ids-color-field-hover,
|
package/dist/scss/_tokens.scss
CHANGED
|
@@ -125,13 +125,13 @@ $ids-color-control-unselected-default: #F8F8FA;
|
|
|
125
125
|
$ids-color-control-unselected-hover: #e6edfb;
|
|
126
126
|
$ids-color-control-unselected-pressed: #d1def8;
|
|
127
127
|
$ids-color-control-unselected-disabled: #e0e1e4;
|
|
128
|
-
$ids-color-control-unselected-indicator-
|
|
128
|
+
$ids-color-control-unselected-indicator-enabled: #ffffff;
|
|
129
129
|
$ids-color-control-unselected-indicator-disabled: #c5c6cb;
|
|
130
130
|
$ids-color-control-selected-default: #4d5057;
|
|
131
131
|
$ids-color-control-selected-hover: #707784;
|
|
132
132
|
$ids-color-control-selected-pressed: #101114;
|
|
133
133
|
$ids-color-control-selected-disabled: #c5c6cb;
|
|
134
|
-
$ids-color-control-selected-indicator-
|
|
134
|
+
$ids-color-control-selected-indicator-enabled: #ffffff;
|
|
135
135
|
$ids-color-control-selected-indicator-disabled: #adaeb3;
|
|
136
136
|
$ids-color-field-default: #F8F8FA;
|
|
137
137
|
$ids-color-field-hover: #F8F8FA;
|
|
@@ -282,13 +282,13 @@ $ids-tokens: (
|
|
|
282
282
|
'ids-color-control-unselected-hover': $ids-color-control-unselected-hover,
|
|
283
283
|
'ids-color-control-unselected-pressed': $ids-color-control-unselected-pressed,
|
|
284
284
|
'ids-color-control-unselected-disabled': $ids-color-control-unselected-disabled,
|
|
285
|
-
'ids-color-control-unselected-indicator-
|
|
285
|
+
'ids-color-control-unselected-indicator-enabled': $ids-color-control-unselected-indicator-enabled,
|
|
286
286
|
'ids-color-control-unselected-indicator-disabled': $ids-color-control-unselected-indicator-disabled,
|
|
287
287
|
'ids-color-control-selected-default': $ids-color-control-selected-default,
|
|
288
288
|
'ids-color-control-selected-hover': $ids-color-control-selected-hover,
|
|
289
289
|
'ids-color-control-selected-pressed': $ids-color-control-selected-pressed,
|
|
290
290
|
'ids-color-control-selected-disabled': $ids-color-control-selected-disabled,
|
|
291
|
-
'ids-color-control-selected-indicator-
|
|
291
|
+
'ids-color-control-selected-indicator-enabled': $ids-color-control-selected-indicator-enabled,
|
|
292
292
|
'ids-color-control-selected-indicator-disabled': $ids-color-control-selected-indicator-disabled,
|
|
293
293
|
'ids-color-field-default': $ids-color-field-default,
|
|
294
294
|
'ids-color-field-hover': $ids-color-field-hover,
|
package/dist/types/tokens.d.ts
CHANGED
|
@@ -191,7 +191,7 @@ export interface IDSTokens {
|
|
|
191
191
|
pressed: string;
|
|
192
192
|
disabled: string;
|
|
193
193
|
indicator: {
|
|
194
|
-
|
|
194
|
+
enabled: string;
|
|
195
195
|
disabled: string;
|
|
196
196
|
};
|
|
197
197
|
};
|
|
@@ -201,7 +201,7 @@ export interface IDSTokens {
|
|
|
201
201
|
pressed: string;
|
|
202
202
|
disabled: string;
|
|
203
203
|
indicator: {
|
|
204
|
-
|
|
204
|
+
enabled: string;
|
|
205
205
|
disabled: string;
|
|
206
206
|
};
|
|
207
207
|
};
|
|
@@ -434,7 +434,7 @@ export const tokens: IDSTokens = {
|
|
|
434
434
|
pressed: '#d1def8',
|
|
435
435
|
disabled: '#e0e1e4',
|
|
436
436
|
indicator: {
|
|
437
|
-
|
|
437
|
+
enabled: '#ffffff',
|
|
438
438
|
disabled: '#c5c6cb'
|
|
439
439
|
}
|
|
440
440
|
},
|
|
@@ -444,7 +444,7 @@ export const tokens: IDSTokens = {
|
|
|
444
444
|
pressed: '#101114',
|
|
445
445
|
disabled: '#c5c6cb',
|
|
446
446
|
indicator: {
|
|
447
|
-
|
|
447
|
+
enabled: '#ffffff',
|
|
448
448
|
disabled: '#adaeb3'
|
|
449
449
|
}
|
|
450
450
|
}
|
|
@@ -612,13 +612,13 @@ export const idsColorControlUnselectedDefault = '#F8F8FA';
|
|
|
612
612
|
export const idsColorControlUnselectedHover = '#e6edfb';
|
|
613
613
|
export const idsColorControlUnselectedPressed = '#d1def8';
|
|
614
614
|
export const idsColorControlUnselectedDisabled = '#e0e1e4';
|
|
615
|
-
export const
|
|
615
|
+
export const idsColorControlUnselectedIndicatorEnabled = '#ffffff';
|
|
616
616
|
export const idsColorControlUnselectedIndicatorDisabled = '#c5c6cb';
|
|
617
617
|
export const idsColorControlSelectedDefault = '#4d5057';
|
|
618
618
|
export const idsColorControlSelectedHover = '#707784';
|
|
619
619
|
export const idsColorControlSelectedPressed = '#101114';
|
|
620
620
|
export const idsColorControlSelectedDisabled = '#c5c6cb';
|
|
621
|
-
export const
|
|
621
|
+
export const idsColorControlSelectedIndicatorEnabled = '#ffffff';
|
|
622
622
|
export const idsColorControlSelectedIndicatorDisabled = '#adaeb3';
|
|
623
623
|
export const idsColorFieldDefault = '#F8F8FA';
|
|
624
624
|
export const idsColorFieldHover = '#F8F8FA';
|
|
@@ -191,7 +191,7 @@ export interface IDSTokens {
|
|
|
191
191
|
pressed: string;
|
|
192
192
|
disabled: string;
|
|
193
193
|
indicator: {
|
|
194
|
-
|
|
194
|
+
enabled: string;
|
|
195
195
|
disabled: string;
|
|
196
196
|
};
|
|
197
197
|
};
|
|
@@ -201,7 +201,7 @@ export interface IDSTokens {
|
|
|
201
201
|
pressed: string;
|
|
202
202
|
disabled: string;
|
|
203
203
|
indicator: {
|
|
204
|
-
|
|
204
|
+
enabled: string;
|
|
205
205
|
disabled: string;
|
|
206
206
|
};
|
|
207
207
|
};
|
|
@@ -218,14 +218,14 @@ export interface IDSTokens {
|
|
|
218
218
|
default: string;
|
|
219
219
|
hover: string;
|
|
220
220
|
pressed: string;
|
|
221
|
-
|
|
222
|
-
|
|
221
|
+
onItem: string;
|
|
222
|
+
onItemDisabled: string;
|
|
223
223
|
};
|
|
224
224
|
selected: {
|
|
225
225
|
default: string;
|
|
226
226
|
hover: string;
|
|
227
227
|
pressed: string;
|
|
228
|
-
|
|
228
|
+
onItem: string;
|
|
229
229
|
};
|
|
230
230
|
};
|
|
231
231
|
border: {
|
|
@@ -434,7 +434,7 @@ export const tokens: IDSTokens = {
|
|
|
434
434
|
pressed: '#d1def8',
|
|
435
435
|
disabled: '#e0e1e4',
|
|
436
436
|
indicator: {
|
|
437
|
-
|
|
437
|
+
enabled: '#ffffff',
|
|
438
438
|
disabled: '#c5c6cb'
|
|
439
439
|
}
|
|
440
440
|
},
|
|
@@ -444,7 +444,7 @@ export const tokens: IDSTokens = {
|
|
|
444
444
|
pressed: '#101114',
|
|
445
445
|
disabled: '#c5c6cb',
|
|
446
446
|
indicator: {
|
|
447
|
-
|
|
447
|
+
enabled: '#ffffff',
|
|
448
448
|
disabled: '#adaeb3'
|
|
449
449
|
}
|
|
450
450
|
}
|
|
@@ -461,14 +461,14 @@ export const tokens: IDSTokens = {
|
|
|
461
461
|
default: '#00000000',
|
|
462
462
|
hover: '#e6edfb',
|
|
463
463
|
pressed: '#d1def8',
|
|
464
|
-
|
|
465
|
-
|
|
464
|
+
onItem: '#2d2f35',
|
|
465
|
+
onItemDisabled: '#8e9099'
|
|
466
466
|
},
|
|
467
467
|
selected: {
|
|
468
468
|
default: 'lch(93.522 7.6467 266.59 / 0.48)',
|
|
469
469
|
hover: '#e6edfb',
|
|
470
470
|
pressed: '#d1def8',
|
|
471
|
-
|
|
471
|
+
onItem: '#3a64b8'
|
|
472
472
|
}
|
|
473
473
|
},
|
|
474
474
|
border: {
|
|
@@ -612,13 +612,13 @@ export const idsColorControlUnselectedDefault = '#F8F8FA';
|
|
|
612
612
|
export const idsColorControlUnselectedHover = '#e6edfb';
|
|
613
613
|
export const idsColorControlUnselectedPressed = '#d1def8';
|
|
614
614
|
export const idsColorControlUnselectedDisabled = '#e0e1e4';
|
|
615
|
-
export const
|
|
615
|
+
export const idsColorControlUnselectedIndicatorEnabled = '#ffffff';
|
|
616
616
|
export const idsColorControlUnselectedIndicatorDisabled = '#c5c6cb';
|
|
617
617
|
export const idsColorControlSelectedDefault = '#4d5057';
|
|
618
618
|
export const idsColorControlSelectedHover = '#707784';
|
|
619
619
|
export const idsColorControlSelectedPressed = '#101114';
|
|
620
620
|
export const idsColorControlSelectedDisabled = '#c5c6cb';
|
|
621
|
-
export const
|
|
621
|
+
export const idsColorControlSelectedIndicatorEnabled = '#ffffff';
|
|
622
622
|
export const idsColorControlSelectedIndicatorDisabled = '#adaeb3';
|
|
623
623
|
export const idsColorFieldDefault = '#F8F8FA';
|
|
624
624
|
export const idsColorFieldHover = '#F8F8FA';
|
|
@@ -628,12 +628,12 @@ export const idsColorFieldOnfieldmuted = '#4d5057';
|
|
|
628
628
|
export const idsColorItemUnselectedDefault = '#00000000';
|
|
629
629
|
export const idsColorItemUnselectedHover = '#e6edfb';
|
|
630
630
|
export const idsColorItemUnselectedPressed = '#d1def8';
|
|
631
|
-
export const
|
|
632
|
-
export const
|
|
631
|
+
export const idsColorItemUnselectedOnitem = '#2d2f35';
|
|
632
|
+
export const idsColorItemUnselectedOnitemdisabled = '#8e9099';
|
|
633
633
|
export const idsColorItemSelectedDefault = 'lch(93.522 7.6467 266.59 / 0.48)';
|
|
634
634
|
export const idsColorItemSelectedHover = '#e6edfb';
|
|
635
635
|
export const idsColorItemSelectedPressed = '#d1def8';
|
|
636
|
-
export const
|
|
636
|
+
export const idsColorItemSelectedOnitem = '#3a64b8';
|
|
637
637
|
export const idsColorBorderTransparent = '#00000000';
|
|
638
638
|
export const idsColorBorderStrong = '#2d2f35';
|
|
639
639
|
export const idsColorBorderDefault = '#8e9099';
|
|
@@ -191,7 +191,7 @@ export interface IDSTokens {
|
|
|
191
191
|
pressed: string;
|
|
192
192
|
disabled: string;
|
|
193
193
|
indicator: {
|
|
194
|
-
|
|
194
|
+
enabled: string;
|
|
195
195
|
disabled: string;
|
|
196
196
|
};
|
|
197
197
|
};
|
|
@@ -201,7 +201,7 @@ export interface IDSTokens {
|
|
|
201
201
|
pressed: string;
|
|
202
202
|
disabled: string;
|
|
203
203
|
indicator: {
|
|
204
|
-
|
|
204
|
+
enabled: string;
|
|
205
205
|
disabled: string;
|
|
206
206
|
};
|
|
207
207
|
};
|
|
@@ -434,7 +434,7 @@ export const tokens: IDSTokens = {
|
|
|
434
434
|
pressed: '#d1def8',
|
|
435
435
|
disabled: '#e0e1e4',
|
|
436
436
|
indicator: {
|
|
437
|
-
|
|
437
|
+
enabled: '#ffffff',
|
|
438
438
|
disabled: '#c5c6cb'
|
|
439
439
|
}
|
|
440
440
|
},
|
|
@@ -444,7 +444,7 @@ export const tokens: IDSTokens = {
|
|
|
444
444
|
pressed: '#101114',
|
|
445
445
|
disabled: '#c5c6cb',
|
|
446
446
|
indicator: {
|
|
447
|
-
|
|
447
|
+
enabled: '#ffffff',
|
|
448
448
|
disabled: '#adaeb3'
|
|
449
449
|
}
|
|
450
450
|
}
|
|
@@ -612,13 +612,13 @@ export const idsColorControlUnselectedDefault = '#F8F8FA';
|
|
|
612
612
|
export const idsColorControlUnselectedHover = '#e6edfb';
|
|
613
613
|
export const idsColorControlUnselectedPressed = '#d1def8';
|
|
614
614
|
export const idsColorControlUnselectedDisabled = '#e0e1e4';
|
|
615
|
-
export const
|
|
615
|
+
export const idsColorControlUnselectedIndicatorEnabled = '#ffffff';
|
|
616
616
|
export const idsColorControlUnselectedIndicatorDisabled = '#c5c6cb';
|
|
617
617
|
export const idsColorControlSelectedDefault = '#4d5057';
|
|
618
618
|
export const idsColorControlSelectedHover = '#707784';
|
|
619
619
|
export const idsColorControlSelectedPressed = '#101114';
|
|
620
620
|
export const idsColorControlSelectedDisabled = '#c5c6cb';
|
|
621
|
-
export const
|
|
621
|
+
export const idsColorControlSelectedIndicatorEnabled = '#ffffff';
|
|
622
622
|
export const idsColorControlSelectedIndicatorDisabled = '#adaeb3';
|
|
623
623
|
export const idsColorFieldDefault = '#F8F8FA';
|
|
624
624
|
export const idsColorFieldHover = '#F8F8FA';
|