@inversestudio/design-tokens 1.1.3 → 1.1.4

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 (8) hide show
  1. package/dist/css/tokens.dark.css +55 -55
  2. package/dist/esm/tokens.dark.js +56 -56
  3. package/dist/js/tokens.dark.js +56 -56
  4. package/dist/json/tokens.dark.json +55 -55
  5. package/dist/json/tokens.dark.nested.json +55 -55
  6. package/dist/scss/_tokens.dark.scss +55 -55
  7. package/dist/types/tokens.dark.d.ts +98 -98
  8. package/package.json +1 -1
package/dist/css/tokens.dark.css CHANGED
@@ -102,68 +102,68 @@
102
102
  --ids-borderradius-full: 1600px;
103
103
  --ids-borderradius-1x: 16px;
104
104
  --ids-border-action-primary: 2px solid #00000000;
105
- --ids-border-action-secondary: 2px solid #2d2f35;
106
- --ids-border-action-disabled: 2px solid #adaeb3;
105
+ --ids-border-action-secondary: 2px solid #fafafb;
106
+ --ids-border-action-disabled: 2px solid #c5c6cb;
107
107
  --ids-border-action-tertiary: 2px solid #00000000;
108
- --ids-border-action-item-selected: 2px solid #3a64b8;
109
- --ids-border-default: 1px solid #8e9099;
110
- --ids-border-subtle: 1px solid #ebebef;
111
- --ids-border-disabled: 1px solid #adaeb3;
108
+ --ids-border-action-item-selected: 2px solid #7eaaff;
109
+ --ids-border-default: 1px solid #e0e1e4;
110
+ --ids-border-subtle: 1px solid #707784;
111
+ --ids-border-disabled: 1px solid #c5c6cb;
112
112
  --ids-border-focused: 2px solid #7eaaff;
113
- --ids-color-background-default: #fafafb;
114
- --ids-color-surface-bright: #ffffff;
115
- --ids-color-surface-muted: #F8F8FA;
116
- --ids-color-foreground-default: #2d2f35;
117
- --ids-color-foreground-muted: #707784;
118
- --ids-color-foreground-disabled: #adaeb3;
119
- --ids-color-action-primary-default: #2d2f35;
120
- --ids-color-action-primary-hover: #4d5057;
121
- --ids-color-action-primary-pressed: #101114;
122
- --ids-color-action-primary-onprimary: #ffffff;
113
+ --ids-color-background-default: #2d2f35;
114
+ --ids-color-surface-bright: #4d5057;
115
+ --ids-color-surface-muted: #101114;
116
+ --ids-color-foreground-default: #fafafb;
117
+ --ids-color-foreground-muted: #ebebef;
118
+ --ids-color-foreground-disabled: #c5c6cb;
119
+ --ids-color-action-primary-default: #fafafb;
120
+ --ids-color-action-primary-hover: #F8F8FA;
121
+ --ids-color-action-primary-pressed: #ffffff;
122
+ --ids-color-action-primary-onprimary: #2d2f35;
123
123
  --ids-color-action-secondary-default: #00000000;
124
- --ids-color-action-secondary-hover: #e6edfb;
125
- --ids-color-action-secondary-pressed: #d1def8;
126
- --ids-color-action-secondary-onsecondary: #2d2f35;
124
+ --ids-color-action-secondary-hover: #142442;
125
+ --ids-color-action-secondary-pressed: #1e3560;
126
+ --ids-color-action-secondary-onsecondary: #fafafb;
127
127
  --ids-color-action-tertiary-default: #00000000;
128
- --ids-color-action-tertiary-hover: #e6edfb;
129
- --ids-color-action-tertiary-pressed: #d1def8;
130
- --ids-color-action-tertiary-ontertiary: #2d2f35;
131
- --ids-color-action-disabled-default: #adaeb3;
128
+ --ids-color-action-tertiary-hover: #142442;
129
+ --ids-color-action-tertiary-pressed: #1e3560;
130
+ --ids-color-action-tertiary-ontertiary: #fafafb;
131
+ --ids-color-action-disabled-default: #8e9099;
132
132
  --ids-color-action-disabled-muted: #00000000;
133
- --ids-color-action-disabled-ondisabled: #707784;
134
- --ids-color-control-unselected-default: #F8F8FA;
135
- --ids-color-control-unselected-hover: #e6edfb;
136
- --ids-color-control-unselected-pressed: #d1def8;
137
- --ids-color-control-unselected-disabled: #e0e1e4;
138
- --ids-color-control-unselected-indicator-enabled: #ffffff;
139
- --ids-color-control-unselected-indicator-disabled: #c5c6cb;
140
- --ids-color-control-selected-default: #4d5057;
141
- --ids-color-control-selected-hover: #707784;
142
- --ids-color-control-selected-pressed: #101114;
143
- --ids-color-control-selected-disabled: #c5c6cb;
144
- --ids-color-control-selected-indicator-enabled: #ffffff;
145
- --ids-color-control-selected-indicator-disabled: #adaeb3;
146
- --ids-color-field-default: #F8F8FA;
147
- --ids-color-field-hover: #F8F8FA;
148
- --ids-color-field-pressed: #e0e1e4;
149
- --ids-color-field-onfield: #2d2f35;
150
- --ids-color-field-onfieldmuted: #4d5057;
133
+ --ids-color-action-disabled-ondisabled: #ebebef;
134
+ --ids-color-control-unselected-default: #707784;
135
+ --ids-color-control-unselected-hover: #142442;
136
+ --ids-color-control-unselected-pressed: #1e3560;
137
+ --ids-color-control-unselected-disabled: #8e9099;
138
+ --ids-color-control-unselected-indicator-enabled: #fafafb;
139
+ --ids-color-control-unselected-indicator-disabled: #adaeb3;
140
+ --ids-color-control-selected-default: #F8F8FA;
141
+ --ids-color-control-selected-hover: #ebebef;
142
+ --ids-color-control-selected-pressed: #ffffff;
143
+ --ids-color-control-selected-disabled: #adaeb3;
144
+ --ids-color-control-selected-indicator-enabled: #2d2f35;
145
+ --ids-color-control-selected-indicator-disabled: #c5c6cb;
146
+ --ids-color-field-default: #707784;
147
+ --ids-color-field-hover: #707784;
148
+ --ids-color-field-pressed: #8e9099;
149
+ --ids-color-field-onfield: #fafafb;
150
+ --ids-color-field-onfieldmuted: #F8F8FA;
151
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-onitem: #2d2f35;
155
- --ids-color-item-unselected-onitemdisabled: #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-onitem: #3a64b8;
152
+ --ids-color-item-unselected-hover: #142442;
153
+ --ids-color-item-unselected-pressed: #1e3560;
154
+ --ids-color-item-unselected-onitem: #fafafb;
155
+ --ids-color-item-unselected-onitemdisabled: #e0e1e4;
156
+ --ids-color-item-selected-default: lch(14.12 21.512 275.11 / 0.48);
157
+ --ids-color-item-selected-hover: #142442;
158
+ --ids-color-item-selected-pressed: #1e3560;
159
+ --ids-color-item-selected-onitem: #7eaaff;
160
160
  --ids-color-border-transparent: #00000000;
161
- --ids-color-border-strong: #2d2f35;
162
- --ids-color-border-default: #8e9099;
163
- --ids-color-border-muted: #c5c6cb;
164
- --ids-color-border-subtle: #ebebef;
165
- --ids-color-border-disabled: #adaeb3;
166
- --ids-color-border-selected: #3a64b8;
161
+ --ids-color-border-strong: #fafafb;
162
+ --ids-color-border-default: #e0e1e4;
163
+ --ids-color-border-muted: #adaeb3;
164
+ --ids-color-border-subtle: #707784;
165
+ --ids-color-border-disabled: #c5c6cb;
166
+ --ids-color-border-selected: #7eaaff;
167
167
  --ids-color-border-focus: #7eaaff;
168
168
  --ids-color-boxshadow-alpha16: lch(5.0543 1.8805 272.92 / 0.16);
169
169
  --ids-color-boxshadow-alpha24: lch(5.0543 1.8805 272.92 / 0.24);
package/dist/esm/tokens.dark.js CHANGED
@@ -110,12 +110,12 @@ export const idsBorderActionPrimary = {
110
110
  style: "solid",
111
111
  }; // SEMANTIC - Primary border. Use for: primary call-to-action buttons.
112
112
  export const idsBorderActionSecondary = {
113
- color: "#2d2f35",
113
+ color: "#fafafb",
114
114
  width: "2px",
115
115
  style: "solid",
116
116
  }; // SEMANTIC - Secondary border. Use for: secondary call-to-action buttons.
117
117
  export const idsBorderActionDisabled = {
118
- color: "#adaeb3",
118
+ color: "#c5c6cb",
119
119
  width: "2px",
120
120
  style: "solid",
121
121
  }; // SEMANTIC - Disabled border. Use for: disabled inputs and controls.
@@ -125,22 +125,22 @@ export const idsBorderActionTertiary = {
125
125
  style: "solid",
126
126
  }; // SEMANTIC - Teretiary border, invisible. Use for: tertiary call-to-action buttons.
127
127
  export const idsBorderActionItemSelected = {
128
- color: "#3a64b8",
128
+ color: "#7eaaff",
129
129
  width: "2px",
130
130
  style: "solid",
131
131
  }; // SEMANTIC – Border for selected items, displayed at the bottom.
132
132
  export const idsBorderDefault = {
133
- color: "#8e9099",
133
+ color: "#e0e1e4",
134
134
  width: "1px",
135
135
  style: "solid",
136
136
  }; // SEMANTIC – Default border element with 3:1 contrast against all backgrounds and surfaces. Use for: Controls and input fields.
137
137
  export const idsBorderSubtle = {
138
- color: "#ebebef",
138
+ color: "#707784",
139
139
  width: "1px",
140
140
  style: "solid",
141
141
  }; // SEMANTIC – Subtle border element with low contrast as decorator. Use for: Dividers.
142
142
  export const idsBorderDisabled = {
143
- color: "#adaeb3",
143
+ color: "#c5c6cb",
144
144
  width: "1px",
145
145
  style: "solid",
146
146
  }; // SEMANTIC – Default border for disabled elements. Use for: Controls and input fields.
@@ -149,60 +149,60 @@ export const idsBorderFocused = {
149
149
  width: "2px",
150
150
  style: "solid",
151
151
  }; // SEMANTIC - Focus state border. Use for: keyboard focus rings on interactive elements.
152
- export const idsColorBackgroundDefault = "#fafafb"; // SEMANTIC – Page background. Use for frame background onm lowest z-level.
153
- export const idsColorSurfaceBright = "#ffffff"; // SEMANTIC – Background color for elements placed on the page background. Use for: Modals, drawers, popups, cards.
154
- export const idsColorSurfaceMuted = "#F8F8FA"; // SEMANTIC – Muted background color for secondary elements placed on the page background. Use for: Side panels.
155
- export const idsColorForegroundDefault = "#2d2f35"; // SEMANTIC – Foreground color for icons and text.
156
- export const idsColorForegroundMuted = "#707784"; // SEMANTIC – Muted foreground color for secondary icons and text.
157
- export const idsColorForegroundDisabled = "#adaeb3"; // SEMANTIC – Foreground color for disabled icons and text.
158
- export const idsColorActionPrimaryDefault = "#2d2f35"; // SEMANTIC - Background color for primary element resting state. Use for: primary button background, main CTA.
159
- export const idsColorActionPrimaryHover = "#4d5057"; // SEMANTIC - Background color for primary element hover state. Use for: primary button hover.
160
- export const idsColorActionPrimaryPressed = "#101114"; // SEMANTIC - Background color for primary element pressed state. Use for: primary button active.
161
- export const idsColorActionPrimaryOnprimary = "#ffffff"; // SEMANTIC - Foreground color for text/icon ON primary backgrounds. Use for: all primary button text and icon layers.
152
+ export const idsColorBackgroundDefault = "#2d2f35"; // SEMANTIC – Page background. Use for frame background onm lowest z-level.
153
+ export const idsColorSurfaceBright = "#4d5057"; // SEMANTIC – Background color for elements placed on the page background. Use for: Modals, drawers, popups, cards.
154
+ export const idsColorSurfaceMuted = "#101114"; // SEMANTIC – Muted background color for secondary elements placed on the page background. Use for: Side panels.
155
+ export const idsColorForegroundDefault = "#fafafb"; // SEMANTIC – Foreground color for icons and text.
156
+ export const idsColorForegroundMuted = "#ebebef"; // SEMANTIC – Muted foreground color for secondary icons and text.
157
+ export const idsColorForegroundDisabled = "#c5c6cb"; // SEMANTIC – Foreground color for disabled icons and text.
158
+ export const idsColorActionPrimaryDefault = "#fafafb"; // SEMANTIC - Background color for primary element resting state. Use for: primary button background, main CTA.
159
+ export const idsColorActionPrimaryHover = "#F8F8FA"; // SEMANTIC - Background color for primary element hover state. Use for: primary button hover.
160
+ export const idsColorActionPrimaryPressed = "#ffffff"; // SEMANTIC - Background color for primary element pressed state. Use for: primary button active.
161
+ export const idsColorActionPrimaryOnprimary = "#2d2f35"; // SEMANTIC - Foreground color for text/icon ON primary backgrounds. Use for: all primary button text and icon layers.
162
162
  export const idsColorActionSecondaryDefault = "#00000000"; // SEMANTIC - Background color for secondary element resting state. Use for: ghost button background.
163
- export const idsColorActionSecondaryHover = "#e6edfb"; // SEMANTIC - Background color for secondary element hover state. Use for: ghost button hover.
164
- export const idsColorActionSecondaryPressed = "#d1def8"; // SEMANTIC - Background color for secondary element pressed state. Use for: ghost button active.
165
- export const idsColorActionSecondaryOnsecondary = "#2d2f35"; // SEMANTIC - Foreground color for text/icon ON secondary backgrounds. Use for: all secondary button texts and icons.
163
+ export const idsColorActionSecondaryHover = "#142442"; // SEMANTIC - Background color for secondary element hover state. Use for: ghost button hover.
164
+ export const idsColorActionSecondaryPressed = "#1e3560"; // SEMANTIC - Background color for secondary element pressed state. Use for: ghost button active.
165
+ export const idsColorActionSecondaryOnsecondary = "#fafafb"; // SEMANTIC - Foreground color for text/icon ON secondary backgrounds. Use for: all secondary button texts and icons.
166
166
  export const idsColorActionTertiaryDefault = "#00000000"; // SEMANTIC - Background color for tertiary element resting state. Use for: transparent button background.
167
- export const idsColorActionTertiaryHover = "#e6edfb"; // SEMANTIC - Background color for tertiary element hover state. Use for: transparent button hover.
168
- export const idsColorActionTertiaryPressed = "#d1def8"; // SEMANTIC - Background color for tertiary element pressed state. Use for: transparent button active.
169
- export const idsColorActionTertiaryOntertiary = "#2d2f35"; // SEMANTIC - Foreground color for text/icon ON tertiary backgrounds. Use for: all tertiary button texts and icons.
170
- export const idsColorActionDisabledDefault = "#adaeb3"; // SEMANTIC - Disabled element background. Use for: Disabled backgrounds of primary action components.
167
+ export const idsColorActionTertiaryHover = "#142442"; // SEMANTIC - Background color for tertiary element hover state. Use for: transparent button hover.
168
+ export const idsColorActionTertiaryPressed = "#1e3560"; // SEMANTIC - Background color for tertiary element pressed state. Use for: transparent button active.
169
+ export const idsColorActionTertiaryOntertiary = "#fafafb"; // SEMANTIC - Foreground color for text/icon ON tertiary backgrounds. Use for: all tertiary button texts and icons.
170
+ export const idsColorActionDisabledDefault = "#8e9099"; // SEMANTIC - Disabled element background. Use for: Disabled backgrounds of primary action components.
171
171
  export const idsColorActionDisabledMuted = "#00000000"; // SEMANTIC - Transparent disabled action background. Use for: Disabled backgrounds in secondary and tertiary action components.
172
- export const idsColorActionDisabledOndisabled = "#707784"; // SEMANTIC - Text/icon ON disabled backgrounds.
173
- export const idsColorControlUnselectedDefault = "#F8F8FA"; // SEMANTIC - Background color for the default state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
174
- export const idsColorControlUnselectedHover = "#e6edfb"; // SEMANTIC - Background color for the hover state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
175
- export const idsColorControlUnselectedPressed = "#d1def8"; // SEMANTIC - Background color for the pressed state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
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 idsColorControlUnselectedIndicatorEnabled = "#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.
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
- 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
- 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
- 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 idsColorControlSelectedIndicatorEnabled = "#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.
185
- export const idsColorFieldDefault = "#F8F8FA"; // SEMANTIC - Background color for the default state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
186
- export const idsColorFieldHover = "#F8F8FA"; // SEMANTIC - Background color for the hover state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
187
- export const idsColorFieldPressed = "#e0e1e4"; // SEMANTIC - Background color for the pressed state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
188
- export const idsColorFieldOnfield = "#2d2f35"; // SEMANTIC - Foreground color for text/icon on input fields. Use for: Non-empty state of input fields.
189
- export const idsColorFieldOnfieldmuted = "#4d5057"; // SEMANTIC - Foreground color for text/icon on input fields. Use for: Default state of input fields.
190
- export const idsColorItemUnselectedDefault = "#00000000"; // SEMANTIC – Background color for the default unselected state of ListItem, Tab and MenuItem.
191
- export const idsColorItemUnselectedHover = "#e6edfb"; // SEMANTIC – Background color for the hover unselected state of ListItem, Tab and MenuItem.
192
- export const idsColorItemUnselectedPressed = "#d1def8"; // SEMANTIC – Background color for the pressed unselected state of ListItem, Tab and MenuItem.
193
- export const idsColorItemUnselectedOnitem = "#2d2f35"; // SEMANTIC – Foreground color for text and icon on the unselected states of Tabs, ListItem and MenuItem.
194
- export const idsColorItemUnselectedOnitemdisabled = "#8e9099"; // SEMANTIC – Foreground color for text and icon on the unselected disabled state of Tabs, ListItem and MenuItem.
195
- export const idsColorItemSelectedDefault = "lch(93.522 7.6467 266.59 / 0.48)"; // SEMANTIC – Background color for the default selected state of ListItem, Tab and MenuItem.
196
- export const idsColorItemSelectedHover = "#e6edfb"; // SEMANTIC – Background color for the hover selected state of ListItem, Tab and MenuItem.
197
- export const idsColorItemSelectedPressed = "#d1def8"; // SEMANTIC – Background color for the pressed selected state of ListItem, Tab and MenuItem.
198
- export const idsColorItemSelectedOnitem = "#3a64b8"; // SEMANTIC – Foreground color for text and icon on the selected states of Tabs, ListItem and MenuItem.
172
+ export const idsColorActionDisabledOndisabled = "#ebebef"; // SEMANTIC - Text/icon ON disabled backgrounds.
173
+ export const idsColorControlUnselectedDefault = "#707784"; // SEMANTIC - Background color for the default state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
174
+ export const idsColorControlUnselectedHover = "#142442"; // SEMANTIC - Background color for the hover state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
175
+ export const idsColorControlUnselectedPressed = "#1e3560"; // SEMANTIC - Background color for the pressed state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
176
+ export const idsColorControlUnselectedDisabled = "#8e9099"; // SEMANTIC - Background color for the pressed state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
177
+ export const idsColorControlUnselectedIndicatorEnabled = "#fafafb"; // SEMANTIC - Fill color for the interactive knob within switches and sliders.
178
+ export const idsColorControlUnselectedIndicatorDisabled = "#adaeb3"; // SEMANTIC - Fill color for the interactive knob in disabled state within switches and sliders.
179
+ export const idsColorControlSelectedDefault = "#F8F8FA"; // SEMANTIC - Background color for the default state of controls that are selected/on. Use for: Switches, checkboxes, radio buttons, segmented controls
180
+ export const idsColorControlSelectedHover = "#ebebef"; // SEMANTIC - Background color for the hover state of controls that are selected/on. Use for: Switches, checkboxes, radio buttons, segmented controls
181
+ export const idsColorControlSelectedPressed = "#ffffff"; // SEMANTIC - Background color for the pressed state of controls that are selected/on. Use for: Switches, checkboxes, radio buttons, segmented controls
182
+ export const idsColorControlSelectedDisabled = "#adaeb3"; // SEMANTIC - Background color for the disabled state of controlsthat are selected/on. Use for: Switches, checkboxes, radio buttons, segmented controls
183
+ export const idsColorControlSelectedIndicatorEnabled = "#2d2f35"; // SEMANTIC - Fill color for the interactive knob within switches and sliders.
184
+ export const idsColorControlSelectedIndicatorDisabled = "#c5c6cb"; // SEMANTIC - Fill color for the interactive knob in disabled state within switches and sliders.
185
+ export const idsColorFieldDefault = "#707784"; // SEMANTIC - Background color for the default state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
186
+ export const idsColorFieldHover = "#707784"; // SEMANTIC - Background color for the hover state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
187
+ export const idsColorFieldPressed = "#8e9099"; // SEMANTIC - Background color for the pressed state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
188
+ export const idsColorFieldOnfield = "#fafafb"; // SEMANTIC - Foreground color for text/icon on input fields. Use for: Non-empty state of input fields.
189
+ export const idsColorFieldOnfieldmuted = "#F8F8FA"; // SEMANTIC - Foreground color for text/icon on input fields. Use for: Default state of input fields.
190
+ export const idsColorItemUnselectedDefault = "#00000000"; // SEMANTIC – Background color for the default unselected state of ListItem, Tab and MenuItem.
191
+ export const idsColorItemUnselectedHover = "#142442"; // SEMANTIC – Background color for the hover unselected state of ListItem, Tab and MenuItem.
192
+ export const idsColorItemUnselectedPressed = "#1e3560"; // SEMANTIC – Background color for the pressed unselected state of ListItem, Tab and MenuItem.
193
+ export const idsColorItemUnselectedOnitem = "#fafafb"; // SEMANTIC – Foreground color for text and icon on the unselected states of Tabs, ListItem and MenuItem.
194
+ export const idsColorItemUnselectedOnitemdisabled = "#e0e1e4"; // SEMANTIC – Foreground color for text and icon on the unselected disabled state of Tabs, ListItem and MenuItem.
195
+ export const idsColorItemSelectedDefault = "lch(14.12 21.512 275.11 / 0.48)"; // SEMANTIC – Background color for the default selected state of ListItem, Tab and MenuItem.
196
+ export const idsColorItemSelectedHover = "#142442"; // SEMANTIC – Background color for the hover selected state of ListItem, Tab and MenuItem.
197
+ export const idsColorItemSelectedPressed = "#1e3560"; // SEMANTIC – Background color for the pressed selected state of ListItem, Tab and MenuItem.
198
+ export const idsColorItemSelectedOnitem = "#7eaaff"; // 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
- export const idsColorBorderStrong = "#2d2f35"; // SEMANTIC - Strong border. Use for: Composite border tokens that require a dark border color.
201
- export const idsColorBorderDefault = "#8e9099"; // SEMANTIC - Muted border. Use for: Composite border tokens for secondary containers, tables.
202
- export const idsColorBorderMuted = "#c5c6cb"; // SEMANTIC - Muted border. Use for: Composite border tokens for secondary containers, tables.
203
- export const idsColorBorderSubtle = "#ebebef"; // SEMANTIC - Subtle border. Use for: Composite border tokens for hairline dividers.
204
- export const idsColorBorderDisabled = "#adaeb3"; // SEMANTIC - Disabled border. Use for: Composite border tokens for disabled states.
205
- export const idsColorBorderSelected = "#3a64b8"; // SEMANTIC - Disabled border. Use for: Composite border tokens for disabled states.
200
+ export const idsColorBorderStrong = "#fafafb"; // SEMANTIC - Strong border. Use for: Composite border tokens that require a dark border color.
201
+ export const idsColorBorderDefault = "#e0e1e4"; // SEMANTIC - Muted border. Use for: Composite border tokens for secondary containers, tables.
202
+ export const idsColorBorderMuted = "#adaeb3"; // SEMANTIC - Muted border. Use for: Composite border tokens for secondary containers, tables.
203
+ export const idsColorBorderSubtle = "#707784"; // SEMANTIC - Subtle border. Use for: Composite border tokens for hairline dividers.
204
+ export const idsColorBorderDisabled = "#c5c6cb"; // SEMANTIC - Disabled border. Use for: Composite border tokens for disabled states.
205
+ export const idsColorBorderSelected = "#7eaaff"; // SEMANTIC - Disabled border. Use for: Composite border tokens for disabled states.
206
206
  export const idsColorBorderFocus = "#7eaaff"; // SEMANTIC - Focus ring color. Use for: Composite border tokens that are used for keyboard focus on all interactive elements.
207
207
  export const idsColorBoxshadowAlpha16 = "lch(5.0543 1.8805 272.92 / 0.16)"; // Box-shadow color with 16% opacity.
208
208
  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
@@ -110,12 +110,12 @@ export const idsBorderActionPrimary = {
110
110
  style: "solid",
111
111
  }; // SEMANTIC - Primary border. Use for: primary call-to-action buttons.
112
112
  export const idsBorderActionSecondary = {
113
- color: "#2d2f35",
113
+ color: "#fafafb",
114
114
  width: "2px",
115
115
  style: "solid",
116
116
  }; // SEMANTIC - Secondary border. Use for: secondary call-to-action buttons.
117
117
  export const idsBorderActionDisabled = {
118
- color: "#adaeb3",
118
+ color: "#c5c6cb",
119
119
  width: "2px",
120
120
  style: "solid",
121
121
  }; // SEMANTIC - Disabled border. Use for: disabled inputs and controls.
@@ -125,22 +125,22 @@ export const idsBorderActionTertiary = {
125
125
  style: "solid",
126
126
  }; // SEMANTIC - Teretiary border, invisible. Use for: tertiary call-to-action buttons.
127
127
  export const idsBorderActionItemSelected = {
128
- color: "#3a64b8",
128
+ color: "#7eaaff",
129
129
  width: "2px",
130
130
  style: "solid",
131
131
  }; // SEMANTIC – Border for selected items, displayed at the bottom.
132
132
  export const idsBorderDefault = {
133
- color: "#8e9099",
133
+ color: "#e0e1e4",
134
134
  width: "1px",
135
135
  style: "solid",
136
136
  }; // SEMANTIC – Default border element with 3:1 contrast against all backgrounds and surfaces. Use for: Controls and input fields.
137
137
  export const idsBorderSubtle = {
138
- color: "#ebebef",
138
+ color: "#707784",
139
139
  width: "1px",
140
140
  style: "solid",
141
141
  }; // SEMANTIC – Subtle border element with low contrast as decorator. Use for: Dividers.
142
142
  export const idsBorderDisabled = {
143
- color: "#adaeb3",
143
+ color: "#c5c6cb",
144
144
  width: "1px",
145
145
  style: "solid",
146
146
  }; // SEMANTIC – Default border for disabled elements. Use for: Controls and input fields.
@@ -149,60 +149,60 @@ export const idsBorderFocused = {
149
149
  width: "2px",
150
150
  style: "solid",
151
151
  }; // SEMANTIC - Focus state border. Use for: keyboard focus rings on interactive elements.
152
- export const idsColorBackgroundDefault = "#fafafb"; // SEMANTIC – Page background. Use for frame background onm lowest z-level.
153
- export const idsColorSurfaceBright = "#ffffff"; // SEMANTIC – Background color for elements placed on the page background. Use for: Modals, drawers, popups, cards.
154
- export const idsColorSurfaceMuted = "#F8F8FA"; // SEMANTIC – Muted background color for secondary elements placed on the page background. Use for: Side panels.
155
- export const idsColorForegroundDefault = "#2d2f35"; // SEMANTIC – Foreground color for icons and text.
156
- export const idsColorForegroundMuted = "#707784"; // SEMANTIC – Muted foreground color for secondary icons and text.
157
- export const idsColorForegroundDisabled = "#adaeb3"; // SEMANTIC – Foreground color for disabled icons and text.
158
- export const idsColorActionPrimaryDefault = "#2d2f35"; // SEMANTIC - Background color for primary element resting state. Use for: primary button background, main CTA.
159
- export const idsColorActionPrimaryHover = "#4d5057"; // SEMANTIC - Background color for primary element hover state. Use for: primary button hover.
160
- export const idsColorActionPrimaryPressed = "#101114"; // SEMANTIC - Background color for primary element pressed state. Use for: primary button active.
161
- export const idsColorActionPrimaryOnprimary = "#ffffff"; // SEMANTIC - Foreground color for text/icon ON primary backgrounds. Use for: all primary button text and icon layers.
152
+ export const idsColorBackgroundDefault = "#2d2f35"; // SEMANTIC – Page background. Use for frame background onm lowest z-level.
153
+ export const idsColorSurfaceBright = "#4d5057"; // SEMANTIC – Background color for elements placed on the page background. Use for: Modals, drawers, popups, cards.
154
+ export const idsColorSurfaceMuted = "#101114"; // SEMANTIC – Muted background color for secondary elements placed on the page background. Use for: Side panels.
155
+ export const idsColorForegroundDefault = "#fafafb"; // SEMANTIC – Foreground color for icons and text.
156
+ export const idsColorForegroundMuted = "#ebebef"; // SEMANTIC – Muted foreground color for secondary icons and text.
157
+ export const idsColorForegroundDisabled = "#c5c6cb"; // SEMANTIC – Foreground color for disabled icons and text.
158
+ export const idsColorActionPrimaryDefault = "#fafafb"; // SEMANTIC - Background color for primary element resting state. Use for: primary button background, main CTA.
159
+ export const idsColorActionPrimaryHover = "#F8F8FA"; // SEMANTIC - Background color for primary element hover state. Use for: primary button hover.
160
+ export const idsColorActionPrimaryPressed = "#ffffff"; // SEMANTIC - Background color for primary element pressed state. Use for: primary button active.
161
+ export const idsColorActionPrimaryOnprimary = "#2d2f35"; // SEMANTIC - Foreground color for text/icon ON primary backgrounds. Use for: all primary button text and icon layers.
162
162
  export const idsColorActionSecondaryDefault = "#00000000"; // SEMANTIC - Background color for secondary element resting state. Use for: ghost button background.
163
- export const idsColorActionSecondaryHover = "#e6edfb"; // SEMANTIC - Background color for secondary element hover state. Use for: ghost button hover.
164
- export const idsColorActionSecondaryPressed = "#d1def8"; // SEMANTIC - Background color for secondary element pressed state. Use for: ghost button active.
165
- export const idsColorActionSecondaryOnsecondary = "#2d2f35"; // SEMANTIC - Foreground color for text/icon ON secondary backgrounds. Use for: all secondary button texts and icons.
163
+ export const idsColorActionSecondaryHover = "#142442"; // SEMANTIC - Background color for secondary element hover state. Use for: ghost button hover.
164
+ export const idsColorActionSecondaryPressed = "#1e3560"; // SEMANTIC - Background color for secondary element pressed state. Use for: ghost button active.
165
+ export const idsColorActionSecondaryOnsecondary = "#fafafb"; // SEMANTIC - Foreground color for text/icon ON secondary backgrounds. Use for: all secondary button texts and icons.
166
166
  export const idsColorActionTertiaryDefault = "#00000000"; // SEMANTIC - Background color for tertiary element resting state. Use for: transparent button background.
167
- export const idsColorActionTertiaryHover = "#e6edfb"; // SEMANTIC - Background color for tertiary element hover state. Use for: transparent button hover.
168
- export const idsColorActionTertiaryPressed = "#d1def8"; // SEMANTIC - Background color for tertiary element pressed state. Use for: transparent button active.
169
- export const idsColorActionTertiaryOntertiary = "#2d2f35"; // SEMANTIC - Foreground color for text/icon ON tertiary backgrounds. Use for: all tertiary button texts and icons.
170
- export const idsColorActionDisabledDefault = "#adaeb3"; // SEMANTIC - Disabled element background. Use for: Disabled backgrounds of primary action components.
167
+ export const idsColorActionTertiaryHover = "#142442"; // SEMANTIC - Background color for tertiary element hover state. Use for: transparent button hover.
168
+ export const idsColorActionTertiaryPressed = "#1e3560"; // SEMANTIC - Background color for tertiary element pressed state. Use for: transparent button active.
169
+ export const idsColorActionTertiaryOntertiary = "#fafafb"; // SEMANTIC - Foreground color for text/icon ON tertiary backgrounds. Use for: all tertiary button texts and icons.
170
+ export const idsColorActionDisabledDefault = "#8e9099"; // SEMANTIC - Disabled element background. Use for: Disabled backgrounds of primary action components.
171
171
  export const idsColorActionDisabledMuted = "#00000000"; // SEMANTIC - Transparent disabled action background. Use for: Disabled backgrounds in secondary and tertiary action components.
172
- export const idsColorActionDisabledOndisabled = "#707784"; // SEMANTIC - Text/icon ON disabled backgrounds.
173
- export const idsColorControlUnselectedDefault = "#F8F8FA"; // SEMANTIC - Background color for the default state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
174
- export const idsColorControlUnselectedHover = "#e6edfb"; // SEMANTIC - Background color for the hover state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
175
- export const idsColorControlUnselectedPressed = "#d1def8"; // SEMANTIC - Background color for the pressed state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
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 idsColorControlUnselectedIndicatorEnabled = "#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.
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
- 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
- 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
- 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 idsColorControlSelectedIndicatorEnabled = "#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.
185
- export const idsColorFieldDefault = "#F8F8FA"; // SEMANTIC - Background color for the default state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
186
- export const idsColorFieldHover = "#F8F8FA"; // SEMANTIC - Background color for the hover state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
187
- export const idsColorFieldPressed = "#e0e1e4"; // SEMANTIC - Background color for the pressed state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
188
- export const idsColorFieldOnfield = "#2d2f35"; // SEMANTIC - Foreground color for text/icon on input fields. Use for: Non-empty state of input fields.
189
- export const idsColorFieldOnfieldmuted = "#4d5057"; // SEMANTIC - Foreground color for text/icon on input fields. Use for: Default state of input fields.
190
- export const idsColorItemUnselectedDefault = "#00000000"; // SEMANTIC – Background color for the default unselected state of ListItem, Tab and MenuItem.
191
- export const idsColorItemUnselectedHover = "#e6edfb"; // SEMANTIC – Background color for the hover unselected state of ListItem, Tab and MenuItem.
192
- export const idsColorItemUnselectedPressed = "#d1def8"; // SEMANTIC – Background color for the pressed unselected state of ListItem, Tab and MenuItem.
193
- export const idsColorItemUnselectedOnitem = "#2d2f35"; // SEMANTIC – Foreground color for text and icon on the unselected states of Tabs, ListItem and MenuItem.
194
- export const idsColorItemUnselectedOnitemdisabled = "#8e9099"; // SEMANTIC – Foreground color for text and icon on the unselected disabled state of Tabs, ListItem and MenuItem.
195
- export const idsColorItemSelectedDefault = "lch(93.522 7.6467 266.59 / 0.48)"; // SEMANTIC – Background color for the default selected state of ListItem, Tab and MenuItem.
196
- export const idsColorItemSelectedHover = "#e6edfb"; // SEMANTIC – Background color for the hover selected state of ListItem, Tab and MenuItem.
197
- export const idsColorItemSelectedPressed = "#d1def8"; // SEMANTIC – Background color for the pressed selected state of ListItem, Tab and MenuItem.
198
- export const idsColorItemSelectedOnitem = "#3a64b8"; // SEMANTIC – Foreground color for text and icon on the selected states of Tabs, ListItem and MenuItem.
172
+ export const idsColorActionDisabledOndisabled = "#ebebef"; // SEMANTIC - Text/icon ON disabled backgrounds.
173
+ export const idsColorControlUnselectedDefault = "#707784"; // SEMANTIC - Background color for the default state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
174
+ export const idsColorControlUnselectedHover = "#142442"; // SEMANTIC - Background color for the hover state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
175
+ export const idsColorControlUnselectedPressed = "#1e3560"; // SEMANTIC - Background color for the pressed state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
176
+ export const idsColorControlUnselectedDisabled = "#8e9099"; // SEMANTIC - Background color for the pressed state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
177
+ export const idsColorControlUnselectedIndicatorEnabled = "#fafafb"; // SEMANTIC - Fill color for the interactive knob within switches and sliders.
178
+ export const idsColorControlUnselectedIndicatorDisabled = "#adaeb3"; // SEMANTIC - Fill color for the interactive knob in disabled state within switches and sliders.
179
+ export const idsColorControlSelectedDefault = "#F8F8FA"; // SEMANTIC - Background color for the default state of controls that are selected/on. Use for: Switches, checkboxes, radio buttons, segmented controls
180
+ export const idsColorControlSelectedHover = "#ebebef"; // SEMANTIC - Background color for the hover state of controls that are selected/on. Use for: Switches, checkboxes, radio buttons, segmented controls
181
+ export const idsColorControlSelectedPressed = "#ffffff"; // SEMANTIC - Background color for the pressed state of controls that are selected/on. Use for: Switches, checkboxes, radio buttons, segmented controls
182
+ export const idsColorControlSelectedDisabled = "#adaeb3"; // SEMANTIC - Background color for the disabled state of controlsthat are selected/on. Use for: Switches, checkboxes, radio buttons, segmented controls
183
+ export const idsColorControlSelectedIndicatorEnabled = "#2d2f35"; // SEMANTIC - Fill color for the interactive knob within switches and sliders.
184
+ export const idsColorControlSelectedIndicatorDisabled = "#c5c6cb"; // SEMANTIC - Fill color for the interactive knob in disabled state within switches and sliders.
185
+ export const idsColorFieldDefault = "#707784"; // SEMANTIC - Background color for the default state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
186
+ export const idsColorFieldHover = "#707784"; // SEMANTIC - Background color for the hover state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
187
+ export const idsColorFieldPressed = "#8e9099"; // SEMANTIC - Background color for the pressed state of controls. Use for: Switches, checkboxes, radio buttons, segmented controls
188
+ export const idsColorFieldOnfield = "#fafafb"; // SEMANTIC - Foreground color for text/icon on input fields. Use for: Non-empty state of input fields.
189
+ export const idsColorFieldOnfieldmuted = "#F8F8FA"; // SEMANTIC - Foreground color for text/icon on input fields. Use for: Default state of input fields.
190
+ export const idsColorItemUnselectedDefault = "#00000000"; // SEMANTIC – Background color for the default unselected state of ListItem, Tab and MenuItem.
191
+ export const idsColorItemUnselectedHover = "#142442"; // SEMANTIC – Background color for the hover unselected state of ListItem, Tab and MenuItem.
192
+ export const idsColorItemUnselectedPressed = "#1e3560"; // SEMANTIC – Background color for the pressed unselected state of ListItem, Tab and MenuItem.
193
+ export const idsColorItemUnselectedOnitem = "#fafafb"; // SEMANTIC – Foreground color for text and icon on the unselected states of Tabs, ListItem and MenuItem.
194
+ export const idsColorItemUnselectedOnitemdisabled = "#e0e1e4"; // SEMANTIC – Foreground color for text and icon on the unselected disabled state of Tabs, ListItem and MenuItem.
195
+ export const idsColorItemSelectedDefault = "lch(14.12 21.512 275.11 / 0.48)"; // SEMANTIC – Background color for the default selected state of ListItem, Tab and MenuItem.
196
+ export const idsColorItemSelectedHover = "#142442"; // SEMANTIC – Background color for the hover selected state of ListItem, Tab and MenuItem.
197
+ export const idsColorItemSelectedPressed = "#1e3560"; // SEMANTIC – Background color for the pressed selected state of ListItem, Tab and MenuItem.
198
+ export const idsColorItemSelectedOnitem = "#7eaaff"; // 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
- export const idsColorBorderStrong = "#2d2f35"; // SEMANTIC - Strong border. Use for: Composite border tokens that require a dark border color.
201
- export const idsColorBorderDefault = "#8e9099"; // SEMANTIC - Muted border. Use for: Composite border tokens for secondary containers, tables.
202
- export const idsColorBorderMuted = "#c5c6cb"; // SEMANTIC - Muted border. Use for: Composite border tokens for secondary containers, tables.
203
- export const idsColorBorderSubtle = "#ebebef"; // SEMANTIC - Subtle border. Use for: Composite border tokens for hairline dividers.
204
- export const idsColorBorderDisabled = "#adaeb3"; // SEMANTIC - Disabled border. Use for: Composite border tokens for disabled states.
205
- export const idsColorBorderSelected = "#3a64b8"; // SEMANTIC - Disabled border. Use for: Composite border tokens for disabled states.
200
+ export const idsColorBorderStrong = "#fafafb"; // SEMANTIC - Strong border. Use for: Composite border tokens that require a dark border color.
201
+ export const idsColorBorderDefault = "#e0e1e4"; // SEMANTIC - Muted border. Use for: Composite border tokens for secondary containers, tables.
202
+ export const idsColorBorderMuted = "#adaeb3"; // SEMANTIC - Muted border. Use for: Composite border tokens for secondary containers, tables.
203
+ export const idsColorBorderSubtle = "#707784"; // SEMANTIC - Subtle border. Use for: Composite border tokens for hairline dividers.
204
+ export const idsColorBorderDisabled = "#c5c6cb"; // SEMANTIC - Disabled border. Use for: Composite border tokens for disabled states.
205
+ export const idsColorBorderSelected = "#7eaaff"; // SEMANTIC - Disabled border. Use for: Composite border tokens for disabled states.
206
206
  export const idsColorBorderFocus = "#7eaaff"; // SEMANTIC - Focus ring color. Use for: Composite border tokens that are used for keyboard focus on all interactive elements.
207
207
  export const idsColorBoxshadowAlpha16 = "lch(5.0543 1.8805 272.92 / 0.16)"; // Box-shadow color with 16% opacity.
208
208
  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
@@ -107,12 +107,12 @@
107
107
  "style": "solid"
108
108
  },
109
109
  "idsBorderActionSecondary": {
110
- "color": "#2d2f35",
110
+ "color": "#fafafb",
111
111
  "width": "2px",
112
112
  "style": "solid"
113
113
  },
114
114
  "idsBorderActionDisabled": {
115
- "color": "#adaeb3",
115
+ "color": "#c5c6cb",
116
116
  "width": "2px",
117
117
  "style": "solid"
118
118
  },
@@ -122,22 +122,22 @@
122
122
  "style": "solid"
123
123
  },
124
124
  "idsBorderActionItemSelected": {
125
- "color": "#3a64b8",
125
+ "color": "#7eaaff",
126
126
  "width": "2px",
127
127
  "style": "solid"
128
128
  },
129
129
  "idsBorderDefault": {
130
- "color": "#8e9099",
130
+ "color": "#e0e1e4",
131
131
  "width": "1px",
132
132
  "style": "solid"
133
133
  },
134
134
  "idsBorderSubtle": {
135
- "color": "#ebebef",
135
+ "color": "#707784",
136
136
  "width": "1px",
137
137
  "style": "solid"
138
138
  },
139
139
  "idsBorderDisabled": {
140
- "color": "#adaeb3",
140
+ "color": "#c5c6cb",
141
141
  "width": "1px",
142
142
  "style": "solid"
143
143
  },
@@ -146,60 +146,60 @@
146
146
  "width": "2px",
147
147
  "style": "solid"
148
148
  },
149
- "idsColorBackgroundDefault": "#fafafb",
150
- "idsColorSurfaceBright": "#ffffff",
151
- "idsColorSurfaceMuted": "#F8F8FA",
152
- "idsColorForegroundDefault": "#2d2f35",
153
- "idsColorForegroundMuted": "#707784",
154
- "idsColorForegroundDisabled": "#adaeb3",
155
- "idsColorActionPrimaryDefault": "#2d2f35",
156
- "idsColorActionPrimaryHover": "#4d5057",
157
- "idsColorActionPrimaryPressed": "#101114",
158
- "idsColorActionPrimaryOnprimary": "#ffffff",
149
+ "idsColorBackgroundDefault": "#2d2f35",
150
+ "idsColorSurfaceBright": "#4d5057",
151
+ "idsColorSurfaceMuted": "#101114",
152
+ "idsColorForegroundDefault": "#fafafb",
153
+ "idsColorForegroundMuted": "#ebebef",
154
+ "idsColorForegroundDisabled": "#c5c6cb",
155
+ "idsColorActionPrimaryDefault": "#fafafb",
156
+ "idsColorActionPrimaryHover": "#F8F8FA",
157
+ "idsColorActionPrimaryPressed": "#ffffff",
158
+ "idsColorActionPrimaryOnprimary": "#2d2f35",
159
159
  "idsColorActionSecondaryDefault": "#00000000",
160
- "idsColorActionSecondaryHover": "#e6edfb",
161
- "idsColorActionSecondaryPressed": "#d1def8",
162
- "idsColorActionSecondaryOnsecondary": "#2d2f35",
160
+ "idsColorActionSecondaryHover": "#142442",
161
+ "idsColorActionSecondaryPressed": "#1e3560",
162
+ "idsColorActionSecondaryOnsecondary": "#fafafb",
163
163
  "idsColorActionTertiaryDefault": "#00000000",
164
- "idsColorActionTertiaryHover": "#e6edfb",
165
- "idsColorActionTertiaryPressed": "#d1def8",
166
- "idsColorActionTertiaryOntertiary": "#2d2f35",
167
- "idsColorActionDisabledDefault": "#adaeb3",
164
+ "idsColorActionTertiaryHover": "#142442",
165
+ "idsColorActionTertiaryPressed": "#1e3560",
166
+ "idsColorActionTertiaryOntertiary": "#fafafb",
167
+ "idsColorActionDisabledDefault": "#8e9099",
168
168
  "idsColorActionDisabledMuted": "#00000000",
169
- "idsColorActionDisabledOndisabled": "#707784",
170
- "idsColorControlUnselectedDefault": "#F8F8FA",
171
- "idsColorControlUnselectedHover": "#e6edfb",
172
- "idsColorControlUnselectedPressed": "#d1def8",
173
- "idsColorControlUnselectedDisabled": "#e0e1e4",
174
- "idsColorControlUnselectedIndicatorEnabled": "#ffffff",
175
- "idsColorControlUnselectedIndicatorDisabled": "#c5c6cb",
176
- "idsColorControlSelectedDefault": "#4d5057",
177
- "idsColorControlSelectedHover": "#707784",
178
- "idsColorControlSelectedPressed": "#101114",
179
- "idsColorControlSelectedDisabled": "#c5c6cb",
180
- "idsColorControlSelectedIndicatorEnabled": "#ffffff",
181
- "idsColorControlSelectedIndicatorDisabled": "#adaeb3",
182
- "idsColorFieldDefault": "#F8F8FA",
183
- "idsColorFieldHover": "#F8F8FA",
184
- "idsColorFieldPressed": "#e0e1e4",
185
- "idsColorFieldOnfield": "#2d2f35",
186
- "idsColorFieldOnfieldmuted": "#4d5057",
169
+ "idsColorActionDisabledOndisabled": "#ebebef",
170
+ "idsColorControlUnselectedDefault": "#707784",
171
+ "idsColorControlUnselectedHover": "#142442",
172
+ "idsColorControlUnselectedPressed": "#1e3560",
173
+ "idsColorControlUnselectedDisabled": "#8e9099",
174
+ "idsColorControlUnselectedIndicatorEnabled": "#fafafb",
175
+ "idsColorControlUnselectedIndicatorDisabled": "#adaeb3",
176
+ "idsColorControlSelectedDefault": "#F8F8FA",
177
+ "idsColorControlSelectedHover": "#ebebef",
178
+ "idsColorControlSelectedPressed": "#ffffff",
179
+ "idsColorControlSelectedDisabled": "#adaeb3",
180
+ "idsColorControlSelectedIndicatorEnabled": "#2d2f35",
181
+ "idsColorControlSelectedIndicatorDisabled": "#c5c6cb",
182
+ "idsColorFieldDefault": "#707784",
183
+ "idsColorFieldHover": "#707784",
184
+ "idsColorFieldPressed": "#8e9099",
185
+ "idsColorFieldOnfield": "#fafafb",
186
+ "idsColorFieldOnfieldmuted": "#F8F8FA",
187
187
  "idsColorItemUnselectedDefault": "#00000000",
188
- "idsColorItemUnselectedHover": "#e6edfb",
189
- "idsColorItemUnselectedPressed": "#d1def8",
190
- "idsColorItemUnselectedOnitem": "#2d2f35",
191
- "idsColorItemUnselectedOnitemdisabled": "#8e9099",
192
- "idsColorItemSelectedDefault": "lch(93.522 7.6467 266.59 / 0.48)",
193
- "idsColorItemSelectedHover": "#e6edfb",
194
- "idsColorItemSelectedPressed": "#d1def8",
195
- "idsColorItemSelectedOnitem": "#3a64b8",
188
+ "idsColorItemUnselectedHover": "#142442",
189
+ "idsColorItemUnselectedPressed": "#1e3560",
190
+ "idsColorItemUnselectedOnitem": "#fafafb",
191
+ "idsColorItemUnselectedOnitemdisabled": "#e0e1e4",
192
+ "idsColorItemSelectedDefault": "lch(14.12 21.512 275.11 / 0.48)",
193
+ "idsColorItemSelectedHover": "#142442",
194
+ "idsColorItemSelectedPressed": "#1e3560",
195
+ "idsColorItemSelectedOnitem": "#7eaaff",
196
196
  "idsColorBorderTransparent": "#00000000",
197
- "idsColorBorderStrong": "#2d2f35",
198
- "idsColorBorderDefault": "#8e9099",
199
- "idsColorBorderMuted": "#c5c6cb",
200
- "idsColorBorderSubtle": "#ebebef",
201
- "idsColorBorderDisabled": "#adaeb3",
202
- "idsColorBorderSelected": "#3a64b8",
197
+ "idsColorBorderStrong": "#fafafb",
198
+ "idsColorBorderDefault": "#e0e1e4",
199
+ "idsColorBorderMuted": "#adaeb3",
200
+ "idsColorBorderSubtle": "#707784",
201
+ "idsColorBorderDisabled": "#c5c6cb",
202
+ "idsColorBorderSelected": "#7eaaff",
203
203
  "idsColorBorderFocus": "#7eaaff",
204
204
  "idsColorBoxshadowAlpha16": "lch(5.0543 1.8805 272.92 / 0.16)",
205
205
  "idsColorBoxshadowAlpha24": "lch(5.0543 1.8805 272.92 / 0.24)",
package/dist/json/tokens.dark.nested.json CHANGED
@@ -148,12 +148,12 @@
148
148
  "style": "solid"
149
149
  },
150
150
  "secondary": {
151
- "color": "#2d2f35",
151
+ "color": "#fafafb",
152
152
  "width": "2px",
153
153
  "style": "solid"
154
154
  },
155
155
  "disabled": {
156
- "color": "#adaeb3",
156
+ "color": "#c5c6cb",
157
157
  "width": "2px",
158
158
  "style": "solid"
159
159
  },
@@ -164,24 +164,24 @@
164
164
  },
165
165
  "item": {
166
166
  "selected": {
167
- "color": "#3a64b8",
167
+ "color": "#7eaaff",
168
168
  "width": "2px",
169
169
  "style": "solid"
170
170
  }
171
171
  }
172
172
  },
173
173
  "default": {
174
- "color": "#8e9099",
174
+ "color": "#e0e1e4",
175
175
  "width": "1px",
176
176
  "style": "solid"
177
177
  },
178
178
  "subtle": {
179
- "color": "#ebebef",
179
+ "color": "#707784",
180
180
  "width": "1px",
181
181
  "style": "solid"
182
182
  },
183
183
  "disabled": {
184
- "color": "#adaeb3",
184
+ "color": "#c5c6cb",
185
185
  "width": "1px",
186
186
  "style": "solid"
187
187
  },
@@ -193,94 +193,94 @@
193
193
  },
194
194
  "color": {
195
195
  "background": {
196
- "default": "#fafafb"
196
+ "default": "#2d2f35"
197
197
  },
198
198
  "surface": {
199
- "bright": "#ffffff",
200
- "muted": "#F8F8FA"
199
+ "bright": "#4d5057",
200
+ "muted": "#101114"
201
201
  },
202
202
  "foreground": {
203
- "default": "#2d2f35",
204
- "muted": "#707784",
205
- "disabled": "#adaeb3"
203
+ "default": "#fafafb",
204
+ "muted": "#ebebef",
205
+ "disabled": "#c5c6cb"
206
206
  },
207
207
  "action": {
208
208
  "primary": {
209
- "default": "#2d2f35",
210
- "hover": "#4d5057",
211
- "pressed": "#101114",
212
- "onPrimary": "#ffffff"
209
+ "default": "#fafafb",
210
+ "hover": "#F8F8FA",
211
+ "pressed": "#ffffff",
212
+ "onPrimary": "#2d2f35"
213
213
  },
214
214
  "secondary": {
215
215
  "default": "#00000000",
216
- "hover": "#e6edfb",
217
- "pressed": "#d1def8",
218
- "onSecondary": "#2d2f35"
216
+ "hover": "#142442",
217
+ "pressed": "#1e3560",
218
+ "onSecondary": "#fafafb"
219
219
  },
220
220
  "tertiary": {
221
221
  "default": "#00000000",
222
- "hover": "#e6edfb",
223
- "pressed": "#d1def8",
224
- "onTertiary": "#2d2f35"
222
+ "hover": "#142442",
223
+ "pressed": "#1e3560",
224
+ "onTertiary": "#fafafb"
225
225
  },
226
226
  "disabled": {
227
- "default": "#adaeb3",
227
+ "default": "#8e9099",
228
228
  "muted": "#00000000",
229
- "onDisabled": "#707784"
229
+ "onDisabled": "#ebebef"
230
230
  }
231
231
  },
232
232
  "control": {
233
233
  "unselected": {
234
- "default": "#F8F8FA",
235
- "hover": "#e6edfb",
236
- "pressed": "#d1def8",
237
- "disabled": "#e0e1e4",
234
+ "default": "#707784",
235
+ "hover": "#142442",
236
+ "pressed": "#1e3560",
237
+ "disabled": "#8e9099",
238
238
  "indicator": {
239
- "enabled": "#ffffff",
240
- "disabled": "#c5c6cb"
239
+ "enabled": "#fafafb",
240
+ "disabled": "#adaeb3"
241
241
  }
242
242
  },
243
243
  "selected": {
244
- "default": "#4d5057",
245
- "hover": "#707784",
246
- "pressed": "#101114",
247
- "disabled": "#c5c6cb",
244
+ "default": "#F8F8FA",
245
+ "hover": "#ebebef",
246
+ "pressed": "#ffffff",
247
+ "disabled": "#adaeb3",
248
248
  "indicator": {
249
- "enabled": "#ffffff",
250
- "disabled": "#adaeb3"
249
+ "enabled": "#2d2f35",
250
+ "disabled": "#c5c6cb"
251
251
  }
252
252
  }
253
253
  },
254
254
  "field": {
255
- "default": "#F8F8FA",
256
- "hover": "#F8F8FA",
257
- "pressed": "#e0e1e4",
258
- "onField": "#2d2f35",
259
- "onFieldMuted": "#4d5057"
255
+ "default": "#707784",
256
+ "hover": "#707784",
257
+ "pressed": "#8e9099",
258
+ "onField": "#fafafb",
259
+ "onFieldMuted": "#F8F8FA"
260
260
  },
261
261
  "item": {
262
262
  "unselected": {
263
263
  "default": "#00000000",
264
- "hover": "#e6edfb",
265
- "pressed": "#d1def8",
266
- "onItem": "#2d2f35",
267
- "onItemDisabled": "#8e9099"
264
+ "hover": "#142442",
265
+ "pressed": "#1e3560",
266
+ "onItem": "#fafafb",
267
+ "onItemDisabled": "#e0e1e4"
268
268
  },
269
269
  "selected": {
270
- "default": "lch(93.522 7.6467 266.59 / 0.48)",
271
- "hover": "#e6edfb",
272
- "pressed": "#d1def8",
273
- "onItem": "#3a64b8"
270
+ "default": "lch(14.12 21.512 275.11 / 0.48)",
271
+ "hover": "#142442",
272
+ "pressed": "#1e3560",
273
+ "onItem": "#7eaaff"
274
274
  }
275
275
  },
276
276
  "border": {
277
277
  "transparent": "#00000000",
278
- "strong": "#2d2f35",
279
- "default": "#8e9099",
280
- "muted": "#c5c6cb",
281
- "subtle": "#ebebef",
282
- "disabled": "#adaeb3",
283
- "selected": "#3a64b8",
278
+ "strong": "#fafafb",
279
+ "default": "#e0e1e4",
280
+ "muted": "#adaeb3",
281
+ "subtle": "#707784",
282
+ "disabled": "#c5c6cb",
283
+ "selected": "#7eaaff",
284
284
  "focus": "#7eaaff"
285
285
  },
286
286
  "boxShadow": {
package/dist/scss/_tokens.dark.scss CHANGED
@@ -92,68 +92,68 @@ $ids-borderradius-0-5x: 8px;
92
92
  $ids-borderradius-full: 1600px;
93
93
  $ids-borderradius-1x: 16px;
94
94
  $ids-border-action-primary: 2px solid #00000000;
95
- $ids-border-action-secondary: 2px solid #2d2f35;
96
- $ids-border-action-disabled: 2px solid #adaeb3;
95
+ $ids-border-action-secondary: 2px solid #fafafb;
96
+ $ids-border-action-disabled: 2px solid #c5c6cb;
97
97
  $ids-border-action-tertiary: 2px solid #00000000;
98
- $ids-border-action-item-selected: 2px solid #3a64b8;
99
- $ids-border-default: 1px solid #8e9099;
100
- $ids-border-subtle: 1px solid #ebebef;
101
- $ids-border-disabled: 1px solid #adaeb3;
98
+ $ids-border-action-item-selected: 2px solid #7eaaff;
99
+ $ids-border-default: 1px solid #e0e1e4;
100
+ $ids-border-subtle: 1px solid #707784;
101
+ $ids-border-disabled: 1px solid #c5c6cb;
102
102
  $ids-border-focused: 2px solid #7eaaff;
103
- $ids-color-background-default: #fafafb;
104
- $ids-color-surface-bright: #ffffff;
105
- $ids-color-surface-muted: #F8F8FA;
106
- $ids-color-foreground-default: #2d2f35;
107
- $ids-color-foreground-muted: #707784;
108
- $ids-color-foreground-disabled: #adaeb3;
109
- $ids-color-action-primary-default: #2d2f35;
110
- $ids-color-action-primary-hover: #4d5057;
111
- $ids-color-action-primary-pressed: #101114;
112
- $ids-color-action-primary-onprimary: #ffffff;
103
+ $ids-color-background-default: #2d2f35;
104
+ $ids-color-surface-bright: #4d5057;
105
+ $ids-color-surface-muted: #101114;
106
+ $ids-color-foreground-default: #fafafb;
107
+ $ids-color-foreground-muted: #ebebef;
108
+ $ids-color-foreground-disabled: #c5c6cb;
109
+ $ids-color-action-primary-default: #fafafb;
110
+ $ids-color-action-primary-hover: #F8F8FA;
111
+ $ids-color-action-primary-pressed: #ffffff;
112
+ $ids-color-action-primary-onprimary: #2d2f35;
113
113
  $ids-color-action-secondary-default: #00000000;
114
- $ids-color-action-secondary-hover: #e6edfb;
115
- $ids-color-action-secondary-pressed: #d1def8;
116
- $ids-color-action-secondary-onsecondary: #2d2f35;
114
+ $ids-color-action-secondary-hover: #142442;
115
+ $ids-color-action-secondary-pressed: #1e3560;
116
+ $ids-color-action-secondary-onsecondary: #fafafb;
117
117
  $ids-color-action-tertiary-default: #00000000;
118
- $ids-color-action-tertiary-hover: #e6edfb;
119
- $ids-color-action-tertiary-pressed: #d1def8;
120
- $ids-color-action-tertiary-ontertiary: #2d2f35;
121
- $ids-color-action-disabled-default: #adaeb3;
118
+ $ids-color-action-tertiary-hover: #142442;
119
+ $ids-color-action-tertiary-pressed: #1e3560;
120
+ $ids-color-action-tertiary-ontertiary: #fafafb;
121
+ $ids-color-action-disabled-default: #8e9099;
122
122
  $ids-color-action-disabled-muted: #00000000;
123
- $ids-color-action-disabled-ondisabled: #707784;
124
- $ids-color-control-unselected-default: #F8F8FA;
125
- $ids-color-control-unselected-hover: #e6edfb;
126
- $ids-color-control-unselected-pressed: #d1def8;
127
- $ids-color-control-unselected-disabled: #e0e1e4;
128
- $ids-color-control-unselected-indicator-enabled: #ffffff;
129
- $ids-color-control-unselected-indicator-disabled: #c5c6cb;
130
- $ids-color-control-selected-default: #4d5057;
131
- $ids-color-control-selected-hover: #707784;
132
- $ids-color-control-selected-pressed: #101114;
133
- $ids-color-control-selected-disabled: #c5c6cb;
134
- $ids-color-control-selected-indicator-enabled: #ffffff;
135
- $ids-color-control-selected-indicator-disabled: #adaeb3;
136
- $ids-color-field-default: #F8F8FA;
137
- $ids-color-field-hover: #F8F8FA;
138
- $ids-color-field-pressed: #e0e1e4;
139
- $ids-color-field-onfield: #2d2f35;
140
- $ids-color-field-onfieldmuted: #4d5057;
123
+ $ids-color-action-disabled-ondisabled: #ebebef;
124
+ $ids-color-control-unselected-default: #707784;
125
+ $ids-color-control-unselected-hover: #142442;
126
+ $ids-color-control-unselected-pressed: #1e3560;
127
+ $ids-color-control-unselected-disabled: #8e9099;
128
+ $ids-color-control-unselected-indicator-enabled: #fafafb;
129
+ $ids-color-control-unselected-indicator-disabled: #adaeb3;
130
+ $ids-color-control-selected-default: #F8F8FA;
131
+ $ids-color-control-selected-hover: #ebebef;
132
+ $ids-color-control-selected-pressed: #ffffff;
133
+ $ids-color-control-selected-disabled: #adaeb3;
134
+ $ids-color-control-selected-indicator-enabled: #2d2f35;
135
+ $ids-color-control-selected-indicator-disabled: #c5c6cb;
136
+ $ids-color-field-default: #707784;
137
+ $ids-color-field-hover: #707784;
138
+ $ids-color-field-pressed: #8e9099;
139
+ $ids-color-field-onfield: #fafafb;
140
+ $ids-color-field-onfieldmuted: #F8F8FA;
141
141
  $ids-color-item-unselected-default: #00000000;
142
- $ids-color-item-unselected-hover: #e6edfb;
143
- $ids-color-item-unselected-pressed: #d1def8;
144
- $ids-color-item-unselected-onitem: #2d2f35;
145
- $ids-color-item-unselected-onitemdisabled: #8e9099;
146
- $ids-color-item-selected-default: lch(93.522 7.6467 266.59 / 0.48);
147
- $ids-color-item-selected-hover: #e6edfb;
148
- $ids-color-item-selected-pressed: #d1def8;
149
- $ids-color-item-selected-onitem: #3a64b8;
142
+ $ids-color-item-unselected-hover: #142442;
143
+ $ids-color-item-unselected-pressed: #1e3560;
144
+ $ids-color-item-unselected-onitem: #fafafb;
145
+ $ids-color-item-unselected-onitemdisabled: #e0e1e4;
146
+ $ids-color-item-selected-default: lch(14.12 21.512 275.11 / 0.48);
147
+ $ids-color-item-selected-hover: #142442;
148
+ $ids-color-item-selected-pressed: #1e3560;
149
+ $ids-color-item-selected-onitem: #7eaaff;
150
150
  $ids-color-border-transparent: #00000000;
151
- $ids-color-border-strong: #2d2f35;
152
- $ids-color-border-default: #8e9099;
153
- $ids-color-border-muted: #c5c6cb;
154
- $ids-color-border-subtle: #ebebef;
155
- $ids-color-border-disabled: #adaeb3;
156
- $ids-color-border-selected: #3a64b8;
151
+ $ids-color-border-strong: #fafafb;
152
+ $ids-color-border-default: #e0e1e4;
153
+ $ids-color-border-muted: #adaeb3;
154
+ $ids-color-border-subtle: #707784;
155
+ $ids-color-border-disabled: #c5c6cb;
156
+ $ids-color-border-selected: #7eaaff;
157
157
  $ids-color-border-focus: #7eaaff;
158
158
  $ids-color-boxshadow-alpha16: lch(5.0543 1.8805 272.92 / 0.16);
159
159
  $ids-color-boxshadow-alpha24: lch(5.0543 1.8805 272.92 / 0.24);
package/dist/types/tokens.dark.d.ts CHANGED
@@ -391,94 +391,94 @@ export const tokens: IDSTokens = {
391
391
  },
392
392
  color: {
393
393
  background: {
394
- default: '#fafafb'
394
+ default: '#2d2f35'
395
395
  },
396
396
  surface: {
397
- bright: '#ffffff',
398
- muted: '#F8F8FA'
397
+ bright: '#4d5057',
398
+ muted: '#101114'
399
399
  },
400
400
  foreground: {
401
- default: '#2d2f35',
402
- muted: '#707784',
403
- disabled: '#adaeb3'
401
+ default: '#fafafb',
402
+ muted: '#ebebef',
403
+ disabled: '#c5c6cb'
404
404
  },
405
405
  action: {
406
406
  primary: {
407
- default: '#2d2f35',
408
- hover: '#4d5057',
409
- pressed: '#101114',
410
- onPrimary: '#ffffff'
407
+ default: '#fafafb',
408
+ hover: '#F8F8FA',
409
+ pressed: '#ffffff',
410
+ onPrimary: '#2d2f35'
411
411
  },
412
412
  secondary: {
413
413
  default: '#00000000',
414
- hover: '#e6edfb',
415
- pressed: '#d1def8',
416
- onSecondary: '#2d2f35'
414
+ hover: '#142442',
415
+ pressed: '#1e3560',
416
+ onSecondary: '#fafafb'
417
417
  },
418
418
  tertiary: {
419
419
  default: '#00000000',
420
- hover: '#e6edfb',
421
- pressed: '#d1def8',
422
- onTertiary: '#2d2f35'
420
+ hover: '#142442',
421
+ pressed: '#1e3560',
422
+ onTertiary: '#fafafb'
423
423
  },
424
424
  disabled: {
425
- default: '#adaeb3',
425
+ default: '#8e9099',
426
426
  muted: '#00000000',
427
- onDisabled: '#707784'
427
+ onDisabled: '#ebebef'
428
428
  }
429
429
  },
430
430
  control: {
431
431
  unselected: {
432
- default: '#F8F8FA',
433
- hover: '#e6edfb',
434
- pressed: '#d1def8',
435
- disabled: '#e0e1e4',
432
+ default: '#707784',
433
+ hover: '#142442',
434
+ pressed: '#1e3560',
435
+ disabled: '#8e9099',
436
436
  indicator: {
437
- enabled: '#ffffff',
438
- disabled: '#c5c6cb'
437
+ enabled: '#fafafb',
438
+ disabled: '#adaeb3'
439
439
  }
440
440
  },
441
441
  selected: {
442
- default: '#4d5057',
443
- hover: '#707784',
444
- pressed: '#101114',
445
- disabled: '#c5c6cb',
442
+ default: '#F8F8FA',
443
+ hover: '#ebebef',
444
+ pressed: '#ffffff',
445
+ disabled: '#adaeb3',
446
446
  indicator: {
447
- enabled: '#ffffff',
448
- disabled: '#adaeb3'
447
+ enabled: '#2d2f35',
448
+ disabled: '#c5c6cb'
449
449
  }
450
450
  }
451
451
  },
452
452
  field: {
453
- default: '#F8F8FA',
454
- hover: '#F8F8FA',
455
- pressed: '#e0e1e4',
456
- onField: '#2d2f35',
457
- onFieldMuted: '#4d5057'
453
+ default: '#707784',
454
+ hover: '#707784',
455
+ pressed: '#8e9099',
456
+ onField: '#fafafb',
457
+ onFieldMuted: '#F8F8FA'
458
458
  },
459
459
  item: {
460
460
  unselected: {
461
461
  default: '#00000000',
462
- hover: '#e6edfb',
463
- pressed: '#d1def8',
464
- onItem: '#2d2f35',
465
- onItemDisabled: '#8e9099'
462
+ hover: '#142442',
463
+ pressed: '#1e3560',
464
+ onItem: '#fafafb',
465
+ onItemDisabled: '#e0e1e4'
466
466
  },
467
467
  selected: {
468
- default: 'lch(93.522 7.6467 266.59 / 0.48)',
469
- hover: '#e6edfb',
470
- pressed: '#d1def8',
471
- onItem: '#3a64b8'
468
+ default: 'lch(14.12 21.512 275.11 / 0.48)',
469
+ hover: '#142442',
470
+ pressed: '#1e3560',
471
+ onItem: '#7eaaff'
472
472
  }
473
473
  },
474
474
  border: {
475
475
  transparent: '#00000000',
476
- strong: '#2d2f35',
477
- default: '#8e9099',
478
- muted: '#c5c6cb',
479
- subtle: '#ebebef',
480
- disabled: '#adaeb3',
481
- selected: '#3a64b8',
476
+ strong: '#fafafb',
477
+ default: '#e0e1e4',
478
+ muted: '#adaeb3',
479
+ subtle: '#707784',
480
+ disabled: '#c5c6cb',
481
+ selected: '#7eaaff',
482
482
  focus: '#7eaaff'
483
483
  },
484
484
  boxShadow: {
@@ -587,60 +587,60 @@ export const idsBorderDefault = '[object Object]';
587
587
  export const idsBorderSubtle = '[object Object]';
588
588
  export const idsBorderDisabled = '[object Object]';
589
589
  export const idsBorderFocused = '[object Object]';
590
- export const idsColorBackgroundDefault = '#fafafb';
591
- export const idsColorSurfaceBright = '#ffffff';
592
- export const idsColorSurfaceMuted = '#F8F8FA';
593
- export const idsColorForegroundDefault = '#2d2f35';
594
- export const idsColorForegroundMuted = '#707784';
595
- export const idsColorForegroundDisabled = '#adaeb3';
596
- export const idsColorActionPrimaryDefault = '#2d2f35';
597
- export const idsColorActionPrimaryHover = '#4d5057';
598
- export const idsColorActionPrimaryPressed = '#101114';
599
- export const idsColorActionPrimaryOnprimary = '#ffffff';
590
+ export const idsColorBackgroundDefault = '#2d2f35';
591
+ export const idsColorSurfaceBright = '#4d5057';
592
+ export const idsColorSurfaceMuted = '#101114';
593
+ export const idsColorForegroundDefault = '#fafafb';
594
+ export const idsColorForegroundMuted = '#ebebef';
595
+ export const idsColorForegroundDisabled = '#c5c6cb';
596
+ export const idsColorActionPrimaryDefault = '#fafafb';
597
+ export const idsColorActionPrimaryHover = '#F8F8FA';
598
+ export const idsColorActionPrimaryPressed = '#ffffff';
599
+ export const idsColorActionPrimaryOnprimary = '#2d2f35';
600
600
  export const idsColorActionSecondaryDefault = '#00000000';
601
- export const idsColorActionSecondaryHover = '#e6edfb';
602
- export const idsColorActionSecondaryPressed = '#d1def8';
603
- export const idsColorActionSecondaryOnsecondary = '#2d2f35';
601
+ export const idsColorActionSecondaryHover = '#142442';
602
+ export const idsColorActionSecondaryPressed = '#1e3560';
603
+ export const idsColorActionSecondaryOnsecondary = '#fafafb';
604
604
  export const idsColorActionTertiaryDefault = '#00000000';
605
- export const idsColorActionTertiaryHover = '#e6edfb';
606
- export const idsColorActionTertiaryPressed = '#d1def8';
607
- export const idsColorActionTertiaryOntertiary = '#2d2f35';
608
- export const idsColorActionDisabledDefault = '#adaeb3';
605
+ export const idsColorActionTertiaryHover = '#142442';
606
+ export const idsColorActionTertiaryPressed = '#1e3560';
607
+ export const idsColorActionTertiaryOntertiary = '#fafafb';
608
+ export const idsColorActionDisabledDefault = '#8e9099';
609
609
  export const idsColorActionDisabledMuted = '#00000000';
610
- export const idsColorActionDisabledOndisabled = '#707784';
611
- export const idsColorControlUnselectedDefault = '#F8F8FA';
612
- export const idsColorControlUnselectedHover = '#e6edfb';
613
- export const idsColorControlUnselectedPressed = '#d1def8';
614
- export const idsColorControlUnselectedDisabled = '#e0e1e4';
615
- export const idsColorControlUnselectedIndicatorEnabled = '#ffffff';
616
- export const idsColorControlUnselectedIndicatorDisabled = '#c5c6cb';
617
- export const idsColorControlSelectedDefault = '#4d5057';
618
- export const idsColorControlSelectedHover = '#707784';
619
- export const idsColorControlSelectedPressed = '#101114';
620
- export const idsColorControlSelectedDisabled = '#c5c6cb';
621
- export const idsColorControlSelectedIndicatorEnabled = '#ffffff';
622
- export const idsColorControlSelectedIndicatorDisabled = '#adaeb3';
623
- export const idsColorFieldDefault = '#F8F8FA';
624
- export const idsColorFieldHover = '#F8F8FA';
625
- export const idsColorFieldPressed = '#e0e1e4';
626
- export const idsColorFieldOnfield = '#2d2f35';
627
- export const idsColorFieldOnfieldmuted = '#4d5057';
610
+ export const idsColorActionDisabledOndisabled = '#ebebef';
611
+ export const idsColorControlUnselectedDefault = '#707784';
612
+ export const idsColorControlUnselectedHover = '#142442';
613
+ export const idsColorControlUnselectedPressed = '#1e3560';
614
+ export const idsColorControlUnselectedDisabled = '#8e9099';
615
+ export const idsColorControlUnselectedIndicatorEnabled = '#fafafb';
616
+ export const idsColorControlUnselectedIndicatorDisabled = '#adaeb3';
617
+ export const idsColorControlSelectedDefault = '#F8F8FA';
618
+ export const idsColorControlSelectedHover = '#ebebef';
619
+ export const idsColorControlSelectedPressed = '#ffffff';
620
+ export const idsColorControlSelectedDisabled = '#adaeb3';
621
+ export const idsColorControlSelectedIndicatorEnabled = '#2d2f35';
622
+ export const idsColorControlSelectedIndicatorDisabled = '#c5c6cb';
623
+ export const idsColorFieldDefault = '#707784';
624
+ export const idsColorFieldHover = '#707784';
625
+ export const idsColorFieldPressed = '#8e9099';
626
+ export const idsColorFieldOnfield = '#fafafb';
627
+ export const idsColorFieldOnfieldmuted = '#F8F8FA';
628
628
  export const idsColorItemUnselectedDefault = '#00000000';
629
- export const idsColorItemUnselectedHover = '#e6edfb';
630
- export const idsColorItemUnselectedPressed = '#d1def8';
631
- export const idsColorItemUnselectedOnitem = '#2d2f35';
632
- export const idsColorItemUnselectedOnitemdisabled = '#8e9099';
633
- export const idsColorItemSelectedDefault = 'lch(93.522 7.6467 266.59 / 0.48)';
634
- export const idsColorItemSelectedHover = '#e6edfb';
635
- export const idsColorItemSelectedPressed = '#d1def8';
636
- export const idsColorItemSelectedOnitem = '#3a64b8';
629
+ export const idsColorItemUnselectedHover = '#142442';
630
+ export const idsColorItemUnselectedPressed = '#1e3560';
631
+ export const idsColorItemUnselectedOnitem = '#fafafb';
632
+ export const idsColorItemUnselectedOnitemdisabled = '#e0e1e4';
633
+ export const idsColorItemSelectedDefault = 'lch(14.12 21.512 275.11 / 0.48)';
634
+ export const idsColorItemSelectedHover = '#142442';
635
+ export const idsColorItemSelectedPressed = '#1e3560';
636
+ export const idsColorItemSelectedOnitem = '#7eaaff';
637
637
  export const idsColorBorderTransparent = '#00000000';
638
- export const idsColorBorderStrong = '#2d2f35';
639
- export const idsColorBorderDefault = '#8e9099';
640
- export const idsColorBorderMuted = '#c5c6cb';
641
- export const idsColorBorderSubtle = '#ebebef';
642
- export const idsColorBorderDisabled = '#adaeb3';
643
- export const idsColorBorderSelected = '#3a64b8';
638
+ export const idsColorBorderStrong = '#fafafb';
639
+ export const idsColorBorderDefault = '#e0e1e4';
640
+ export const idsColorBorderMuted = '#adaeb3';
641
+ export const idsColorBorderSubtle = '#707784';
642
+ export const idsColorBorderDisabled = '#c5c6cb';
643
+ export const idsColorBorderSelected = '#7eaaff';
644
644
  export const idsColorBorderFocus = '#7eaaff';
645
645
  export const idsColorBoxshadowAlpha16 = 'lch(5.0543 1.8805 272.92 / 0.16)';
646
646
  export const idsColorBoxshadowAlpha24 = 'lch(5.0543 1.8805 272.92 / 0.24)';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@inversestudio/design-tokens",
3
- "version": "1.1.3",
3
+ "version": "1.1.4",
4
4
  "description": "IDS Design System tokens - compiled from Tokens Studio format",
5
5
  "type": "module",
6
6
  "main": "dist/js/tokens.js",