@autoguru/overdrive 4.59.0 → 4.61.0
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/components/Alert/Alert.js +4 -4
- package/dist/components/AutoSuggest/AutoSuggest.css.d.ts.map +1 -1
- package/dist/components/AutoSuggest/AutoSuggest.css.js +9 -1
- package/dist/components/AutoSuggest/AutoSuggest.js +4 -4
- package/dist/components/Badge/Badge.css.js +1 -1
- package/dist/components/Box/useBox/useBox.d.ts +3 -3
- package/dist/components/BulletList/Bullet.css.js +3 -3
- package/dist/components/BulletText/BulletText.css.d.ts.map +1 -1
- package/dist/components/BulletText/BulletText.css.js +4 -1
- package/dist/components/Button/Button.css.js +7 -7
- package/dist/components/Button/Button.d.ts +1 -1
- package/dist/components/Button/Button.d.ts.map +1 -1
- package/dist/components/Button/Button.js +2 -0
- package/dist/components/Calendar/Calendar.css.js +16 -16
- package/dist/components/CheckBox/CheckBox.css.js +2 -2
- package/dist/components/ColourInput/ColourInput.css.js +2 -2
- package/dist/components/DataTable/DataTable.css.d.ts.map +1 -1
- package/dist/components/DataTable/DataTable.css.js +2 -1
- package/dist/components/DateInput/DateInput.js +1 -1
- package/dist/components/DateTimeField/DateTimeField.css.js +2 -2
- package/dist/components/EditableText/EditableText.css.js +1 -1
- package/dist/components/EditableText/EditableText.d.ts.map +1 -1
- package/dist/components/EditableText/EditableText.js +3 -1
- package/dist/components/Flex/flex.d.ts +23 -23
- package/dist/components/Flyout/Flyout.js +2 -2
- package/dist/components/Heading/Heading.js +1 -1
- package/dist/components/LinearProgressIndicator/LinearProgressIndicator.js +2 -2
- package/dist/components/MarkdownRenderer/components/MarkdownHeading.js +3 -3
- package/dist/components/Meta/Meta.css.d.ts.map +1 -1
- package/dist/components/Meta/Meta.css.js +2 -1
- package/dist/components/Modal/Modal.d.ts.map +1 -1
- package/dist/components/Modal/Modal.js +3 -1
- package/dist/components/OptionGrid/OptionGrid.css.js +20 -20
- package/dist/components/OptionList/OptionList.css.js +11 -11
- package/dist/components/OrderedList/OrderedList.js +1 -1
- package/dist/components/Pagination/Bubble.js +3 -3
- package/dist/components/Pagination/Pagination.css.js +2 -2
- package/dist/components/Popover/Popover.css.js +3 -3
- package/dist/components/ProgressBar/ProgressBar.js +2 -2
- package/dist/components/ProgressBarGroup/ProgressBarGroup.js +2 -2
- package/dist/components/ProgressSpinner/ProgressSpinner.css.d.ts +1 -1
- package/dist/components/ProgressSpinner/ProgressSpinner.css.js +2 -2
- package/dist/components/Radio/Radio.css.js +2 -2
- package/dist/components/ScrollPane/ScrollPane.css.js +3 -3
- package/dist/components/SearchBar/SearchBar.css.js +6 -6
- package/dist/components/SelectInput/SelectInput.css.js +1 -1
- package/dist/components/Slider/Slider.css.js +6 -6
- package/dist/components/SliderProgress/ProgressStep.d.ts.map +1 -1
- package/dist/components/SliderProgress/ProgressStep.js +6 -2
- package/dist/components/SliderProgress/SliderProgress.d.ts.map +1 -1
- package/dist/components/SliderProgress/SliderProgress.js +3 -1
- package/dist/components/Stack/Stack.css.d.ts.map +1 -1
- package/dist/components/Stack/Stack.css.js +1 -0
- package/dist/components/StandardModal/StandardModal.css.js +4 -4
- package/dist/components/StandardModal/StandardModal.js +4 -4
- package/dist/components/Stepper/Stepper.js +3 -3
- package/dist/components/Switch/Switch.css.js +2 -2
- package/dist/components/Table/TableCell.css.js +2 -2
- package/dist/components/Table/TableCell.js +1 -1
- package/dist/components/Table/TableHeadCell.css.js +2 -2
- package/dist/components/Tabs/Tab.css.js +6 -6
- package/dist/components/Tabs/Tab.js +2 -2
- package/dist/components/Tabs/TabList.css.js +1 -1
- package/dist/components/Text/Text.d.ts.map +1 -1
- package/dist/components/Text/Text.js +3 -3
- package/dist/components/TextLink/TextLink.js +1 -1
- package/dist/components/Tooltip/Tooltip.d.ts +5 -5
- package/dist/components/Tooltip/Tooltip.d.ts.map +1 -1
- package/dist/components/Tooltip/Tooltip.js +20 -11
- package/dist/components/Tooltip/index.d.ts +1 -1
- package/dist/components/Tooltip/index.d.ts.map +1 -1
- package/dist/components/Tooltip/useTooltip/useTooltip.d.ts +18 -7
- package/dist/components/Tooltip/useTooltip/useTooltip.d.ts.map +1 -1
- package/dist/components/Tooltip/useTooltip/useTooltip.js +12 -10
- package/dist/components/private/CheckableBase/CheckableBase.css.js +2 -2
- package/dist/components/private/InputBase/HintText.js +1 -1
- package/dist/components/private/InputBase/InputState.css.js +16 -16
- package/dist/components/private/InputBase/NotchedBase.css.js +2 -2
- package/dist/components/private/InputBase/withEnhancedInput.css.js +4 -4
- package/dist/index.d.ts +1 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -1
- package/dist/styles/focusOutline.css.d.ts.map +1 -1
- package/dist/styles/focusOutline.css.js +2 -0
- package/dist/styles/index.d.ts +1 -1
- package/dist/styles/index.d.ts.map +1 -1
- package/dist/styles/index.js +1 -1
- package/dist/styles/intentColorset.css.d.ts +3 -3
- package/dist/styles/intentColorset.css.d.ts.map +1 -1
- package/dist/styles/intentColorset.css.js +8 -2
- package/dist/styles/sprinkles.css.d.ts +290 -275
- package/dist/styles/sprinkles.css.d.ts.map +1 -1
- package/dist/styles/sprinkles.css.js +87 -10
- package/dist/styles/sprinkles.spec.d.ts +2 -0
- package/dist/styles/sprinkles.spec.d.ts.map +1 -0
- package/dist/styles/sprinkles.spec.js +8 -0
- package/dist/styles/typography.css.d.ts +1 -1
- package/dist/styles/typography.d.ts +44 -3
- package/dist/styles/typography.d.ts.map +1 -1
- package/dist/styles/typography.js +74 -17
- package/dist/themes/base/colours.d.ts +0 -22
- package/dist/themes/base/colours.d.ts.map +1 -1
- package/dist/themes/base/colours.js +6 -17
- package/dist/themes/base/contrastGuide.d.ts +31 -0
- package/dist/themes/base/contrastGuide.d.ts.map +1 -0
- package/dist/themes/base/contrastGuide.js +43 -0
- package/dist/themes/base/contrastGuide.spec.d.ts +2 -0
- package/dist/themes/base/contrastGuide.spec.d.ts.map +1 -0
- package/dist/themes/base/contrastGuide.spec.js +51 -0
- package/dist/themes/base/index.d.ts +258 -86
- package/dist/themes/base/index.d.ts.map +1 -1
- package/dist/themes/base/space.spec.d.ts +2 -0
- package/dist/themes/base/space.spec.d.ts.map +1 -0
- package/dist/themes/base/space.spec.js +41 -0
- package/dist/themes/base/tokens.d.ts +163 -66
- package/dist/themes/base/tokens.d.ts.map +1 -1
- package/dist/themes/base/tokens.js +210 -9
- package/dist/themes/flat_red/index.d.ts +264 -95
- package/dist/themes/flat_red/index.d.ts.map +1 -1
- package/dist/themes/flat_red/tokens.d.ts +158 -75
- package/dist/themes/flat_red/tokens.d.ts.map +1 -1
- package/dist/themes/flat_red/tokens.js +8 -13
- package/dist/themes/index.d.ts +259 -86
- package/dist/themes/index.d.ts.map +1 -1
- package/dist/themes/index.js +1 -0
- package/dist/themes/makeTheme.d.ts +106 -20
- package/dist/themes/makeTheme.d.ts.map +1 -1
- package/dist/themes/neutral/index.d.ts +258 -107
- package/dist/themes/neutral/index.d.ts.map +1 -1
- package/dist/themes/neutral/tokens.d.ts +153 -88
- package/dist/themes/neutral/tokens.d.ts.map +1 -1
- package/dist/themes/neutral/tokens.js +12 -33
- package/dist/themes/theme.css.d.ts +106 -31
- package/dist/themes/theme.css.d.ts.map +1 -1
- package/dist/themes/theme.css.js +130 -12
- package/package.json +15 -15
|
@@ -4,10 +4,11 @@ import { styleVariants } from '@vanilla-extract/css';
|
|
|
4
4
|
import { overdriveTokens as vars } from "../../themes/theme.css.js";
|
|
5
5
|
export const variant = styleVariants({
|
|
6
6
|
primary: {
|
|
7
|
+
// eslint-disable-next-line no-restricted-syntax -- RETAINED: intent-derived ref, reverted by the C-theme-bridge corrective package — never repointed pre-major (docs/ds2026-plan/track-c.md §1.5 + deviation 12).
|
|
7
8
|
color: vars.colours.intent.primary.background.strong
|
|
8
9
|
},
|
|
9
10
|
secondary: {
|
|
10
|
-
color: vars.
|
|
11
|
+
color: vars.color.foreground.primary
|
|
11
12
|
}
|
|
12
13
|
}, "variant");
|
|
13
14
|
__vanilla_filescope__.endFileScope();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../lib/components/Modal/Modal.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACX,cAAc,EACd,aAAa,EACb,iBAAiB,EAEjB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,SAAS,EAAyB,MAAM,OAAO,CAAC;AAKzD,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAI1C,MAAM,WAAW,UAAW,SAAQ,cAAc,CAAC,OAAO,MAAM,CAAC;IAChE,MAAM,EAAE,OAAO,CAAC;IAChB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB,cAAc,CAAC,CAAC,CAAC,EAAE,UAAU,GAAG,eAAe,GAAG,MAAM,GAAG,IAAI,CAAC;CAChE;AAyDD,eAAO,MAAM,KAAK,EAAE,iBAAiB,CAAC,UAAU,
|
|
1
|
+
{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../lib/components/Modal/Modal.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACX,cAAc,EACd,aAAa,EACb,iBAAiB,EAEjB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,SAAS,EAAyB,MAAM,OAAO,CAAC;AAKzD,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAI1C,MAAM,WAAW,UAAW,SAAQ,cAAc,CAAC,OAAO,MAAM,CAAC;IAChE,MAAM,EAAE,OAAO,CAAC;IAChB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB,cAAc,CAAC,CAAC,CAAC,EAAE,UAAU,GAAG,eAAe,GAAG,MAAM,GAAG,IAAI,CAAC;CAChE;AAyDD,eAAO,MAAM,KAAK,EAAE,iBAAiB,CAAC,UAAU,CAoF/C,CAAC;AAEF,eAAO,MAAM,SAAS,GACpB,cAAc,SAAS,EAAE,GAAG,EAAE,EAC9B,kBAAkB,aAAa,CAAC,UAAU,GAAG,cAAc,CAAC,KAC1D,iBAAiB,CAAC,UAAU,GAAG,cAAc,CAgB/C,CAAC"}
|
|
@@ -107,7 +107,9 @@ export const Modal = ({
|
|
|
107
107
|
"aria-hidden": "true",
|
|
108
108
|
position: "fixed",
|
|
109
109
|
pointerEvents: disableBackdropClick || state === 'CLOSING' ? 'none' : undefined,
|
|
110
|
-
opacity: state === 'OPEN' ? undefined : 0
|
|
110
|
+
opacity: state === 'OPEN' ? undefined : 0
|
|
111
|
+
// eslint-disable-next-line no-restricted-syntax -- RETAINED: intent-derived ref ("neutral" resolves via colours.intent.neutral), reverted by the C-theme-bridge corrective package — never repointed pre-major (docs/ds2026-plan/track-c.md §1.5 + deviation 12).
|
|
112
|
+
,
|
|
111
113
|
backgroundColour: hideBackdrop ? 'transparent' : 'neutral',
|
|
112
114
|
className: [styles.backdrop.root, styles.transition, hideBackdrop && styles.backdrop.invisible],
|
|
113
115
|
onClick: handleBackdropClick
|
|
@@ -126,7 +126,7 @@ export const gridItemContainerStyle = style([sprinkles({
|
|
|
126
126
|
}), {
|
|
127
127
|
'@layer': {
|
|
128
128
|
[cssLayerComponent]: {
|
|
129
|
-
backgroundColor: tokens.
|
|
129
|
+
backgroundColor: tokens.color.background.default,
|
|
130
130
|
borderColor: tokens.border.colours.gray,
|
|
131
131
|
minHeight: '80px'
|
|
132
132
|
}
|
|
@@ -135,7 +135,7 @@ export const gridItemContainerStyle = style([sprinkles({
|
|
|
135
135
|
export const gridItemStyle = style([gridItemContainerStyle, {
|
|
136
136
|
'@layer': {
|
|
137
137
|
[cssLayerComponent]: {
|
|
138
|
-
backgroundColor: tokens.
|
|
138
|
+
backgroundColor: tokens.color.background.default,
|
|
139
139
|
borderColor: tokens.border.colours.gray,
|
|
140
140
|
minHeight: '80px',
|
|
141
141
|
selectors: {
|
|
@@ -143,7 +143,7 @@ export const gridItemStyle = style([gridItemContainerStyle, {
|
|
|
143
143
|
cursor: 'pointer'
|
|
144
144
|
},
|
|
145
145
|
[selectors.selected]: {
|
|
146
|
-
backgroundColor: tokens.
|
|
146
|
+
backgroundColor: tokens.color.background.default,
|
|
147
147
|
borderColor: tokens.border.colours.dark
|
|
148
148
|
},
|
|
149
149
|
[`${selectors.hoverNotSelected}, ${selectors.focusVisibleNotSelected}`]: {
|
|
@@ -156,7 +156,7 @@ export const gridItemStyle = style([gridItemContainerStyle, {
|
|
|
156
156
|
display: 'block',
|
|
157
157
|
height: '100%',
|
|
158
158
|
left: 0,
|
|
159
|
-
outlineColor: tokens.
|
|
159
|
+
outlineColor: tokens.color.gamut.gray['900'],
|
|
160
160
|
outlineStyle: 'solid',
|
|
161
161
|
outlineWidth: tokens.border.width[2],
|
|
162
162
|
position: 'absolute',
|
|
@@ -164,9 +164,9 @@ export const gridItemStyle = style([gridItemContainerStyle, {
|
|
|
164
164
|
width: '100%'
|
|
165
165
|
},
|
|
166
166
|
[selectors.disabled]: {
|
|
167
|
-
backgroundColor: tokens.
|
|
167
|
+
backgroundColor: tokens.color.gamut.gray['100'],
|
|
168
168
|
borderColor: 'transparent',
|
|
169
|
-
color: tokens.
|
|
169
|
+
color: tokens.color.gamut.gray['500'],
|
|
170
170
|
cursor: 'not-allowed'
|
|
171
171
|
}
|
|
172
172
|
}
|
|
@@ -186,7 +186,7 @@ export const indicatorStyle = style({
|
|
|
186
186
|
}, "indicatorStyle");
|
|
187
187
|
export const checkboxStyle = style([sprinkles({
|
|
188
188
|
alignItems: 'center',
|
|
189
|
-
|
|
189
|
+
borderColor: 'default',
|
|
190
190
|
borderRadius: 'sm',
|
|
191
191
|
borderStyle: 'solid',
|
|
192
192
|
borderWidth: '1',
|
|
@@ -200,15 +200,15 @@ export const checkboxStyle = style([sprinkles({
|
|
|
200
200
|
color: 'transparent',
|
|
201
201
|
selectors: {
|
|
202
202
|
[selectors.selected]: {
|
|
203
|
-
backgroundColor: tokens.
|
|
204
|
-
color: tokens.
|
|
203
|
+
backgroundColor: tokens.color.foreground.primary,
|
|
204
|
+
color: tokens.color.background.default
|
|
205
205
|
},
|
|
206
206
|
[`${selectors.hoverNotSelected}, ${selectors.focusVisibleNotSelected}`]: {
|
|
207
|
-
backgroundColor: tokens.
|
|
208
|
-
color: tokens.
|
|
207
|
+
backgroundColor: tokens.color.gamut.gray['300'],
|
|
208
|
+
color: tokens.color.background.default
|
|
209
209
|
},
|
|
210
210
|
[selectors.disabled]: {
|
|
211
|
-
borderColor: tokens.
|
|
211
|
+
borderColor: tokens.color.gamut.gray['200']
|
|
212
212
|
}
|
|
213
213
|
}
|
|
214
214
|
}
|
|
@@ -230,10 +230,10 @@ const pseudoRadio = style({
|
|
|
230
230
|
width: '100%'
|
|
231
231
|
},
|
|
232
232
|
[`${selectors.hover}:after, ${selectors.focusVisible}:after`]: {
|
|
233
|
-
background: tokens.
|
|
233
|
+
background: tokens.color.gamut.gray['200']
|
|
234
234
|
},
|
|
235
235
|
[`&[data-selected]:after`]: {
|
|
236
|
-
background: tokens.
|
|
236
|
+
background: tokens.color.gamut.white
|
|
237
237
|
}
|
|
238
238
|
}
|
|
239
239
|
}
|
|
@@ -249,20 +249,20 @@ export const radioButtonStyle = style([sprinkles({
|
|
|
249
249
|
}), {
|
|
250
250
|
'@layer': {
|
|
251
251
|
[cssLayerComponent]: {
|
|
252
|
-
backgroundColor: tokens.
|
|
252
|
+
backgroundColor: tokens.color.background.default,
|
|
253
253
|
borderColor: tokens.border.colours.gray,
|
|
254
254
|
selectors: {
|
|
255
255
|
[selectors.selected]: {
|
|
256
|
-
backgroundColor: tokens.
|
|
256
|
+
backgroundColor: tokens.color.foreground.primary,
|
|
257
257
|
borderColor: tokens.border.colours.dark
|
|
258
258
|
},
|
|
259
259
|
[`${selectors.hoverNotSelected}, ${selectors.focusVisibleNotSelected}`]: {
|
|
260
|
-
backgroundColor: tokens.
|
|
261
|
-
borderColor: tokens.
|
|
260
|
+
backgroundColor: tokens.color.gamut.gray['300'],
|
|
261
|
+
borderColor: tokens.color.gamut.gray['300']
|
|
262
262
|
},
|
|
263
263
|
[selectors.disabled]: {
|
|
264
|
-
backgroundColor: tokens.
|
|
265
|
-
borderColor: tokens.
|
|
264
|
+
backgroundColor: tokens.color.gamut.gray['100'],
|
|
265
|
+
borderColor: tokens.color.gamut.gray['200']
|
|
266
266
|
}
|
|
267
267
|
}
|
|
268
268
|
}
|
|
@@ -22,14 +22,14 @@ export const descriptionStyle = style([sprinkles({
|
|
|
22
22
|
}), {
|
|
23
23
|
'@layer': {
|
|
24
24
|
[cssLayerComponent]: {
|
|
25
|
-
color: tokens.
|
|
25
|
+
color: tokens.color.gamut.gray['400']
|
|
26
26
|
}
|
|
27
27
|
}
|
|
28
28
|
}], "descriptionStyle");
|
|
29
29
|
|
|
30
30
|
// === Option item styles
|
|
31
31
|
export const optionItemStyle = style([sprinkles({
|
|
32
|
-
|
|
32
|
+
borderColor: 'default',
|
|
33
33
|
borderStyle: 'solid',
|
|
34
34
|
borderWidth: '1',
|
|
35
35
|
display: 'flex',
|
|
@@ -41,7 +41,7 @@ export const optionItemStyle = style([sprinkles({
|
|
|
41
41
|
}), {
|
|
42
42
|
'@layer': {
|
|
43
43
|
[cssLayerComponent]: {
|
|
44
|
-
background: tokens.
|
|
44
|
+
background: tokens.color.background.default,
|
|
45
45
|
selectors: {
|
|
46
46
|
['&+&']: {
|
|
47
47
|
borderTopStyle: 'none'
|
|
@@ -55,14 +55,14 @@ export const optionItemStyle = style([sprinkles({
|
|
|
55
55
|
borderBottomRightRadius: tokens.border.radius.md
|
|
56
56
|
},
|
|
57
57
|
[selectors.hoverNotDisabled]: {
|
|
58
|
-
background: tokens.
|
|
58
|
+
background: tokens.color.gamut.gray['200'],
|
|
59
59
|
cursor: 'pointer'
|
|
60
60
|
},
|
|
61
61
|
[selectors.focusVisible]: {
|
|
62
|
-
background: tokens.
|
|
62
|
+
background: tokens.color.gamut.gray['200']
|
|
63
63
|
},
|
|
64
64
|
[selectors.disabled]: {
|
|
65
|
-
background: tokens.
|
|
65
|
+
background: tokens.color.background.default,
|
|
66
66
|
cursor: 'default'
|
|
67
67
|
}
|
|
68
68
|
}
|
|
@@ -88,7 +88,7 @@ export const checkbox = style([sprinkles({
|
|
|
88
88
|
}), {
|
|
89
89
|
'@layer': {
|
|
90
90
|
[cssLayerComponent]: {
|
|
91
|
-
background: tokens.
|
|
91
|
+
background: tokens.color.background.default,
|
|
92
92
|
borderColor: tokens.border.colours.gray,
|
|
93
93
|
color: 'transparent',
|
|
94
94
|
transitionDuration: '100ms',
|
|
@@ -96,13 +96,13 @@ export const checkbox = style([sprinkles({
|
|
|
96
96
|
transitionTimingFunction: 'ease-in',
|
|
97
97
|
selectors: {
|
|
98
98
|
[selectors.checked]: {
|
|
99
|
-
background: tokens.
|
|
99
|
+
background: tokens.color.gamut.gray['900'],
|
|
100
100
|
borderColor: tokens.border.colours.dark,
|
|
101
|
-
color: tokens.
|
|
101
|
+
color: tokens.color.background.default
|
|
102
102
|
},
|
|
103
103
|
[`${optionItemStyle}:hover &:not([data-checked],[data-disabled])`]: {
|
|
104
|
-
background: tokens.
|
|
105
|
-
color: tokens.
|
|
104
|
+
background: tokens.color.gamut.gray['300'],
|
|
105
|
+
color: tokens.color.background.default
|
|
106
106
|
}
|
|
107
107
|
}
|
|
108
108
|
}
|
|
@@ -12,11 +12,11 @@ export const Bubble = ({
|
|
|
12
12
|
disabled,
|
|
13
13
|
onClick
|
|
14
14
|
}) => {
|
|
15
|
-
let
|
|
16
|
-
if (selected)
|
|
15
|
+
let backgroundColor = 'transparent';
|
|
16
|
+
if (selected) backgroundColor = 'green900';else if (disabled) backgroundColor = 'gray200';
|
|
17
17
|
return /*#__PURE__*/_jsx(Box, {
|
|
18
18
|
as: "button",
|
|
19
|
-
|
|
19
|
+
backgroundColor: backgroundColor,
|
|
20
20
|
display: "flex",
|
|
21
21
|
overflow: "hidden",
|
|
22
22
|
alignItems: "center",
|
|
@@ -17,11 +17,11 @@ export const activeItem = style({
|
|
|
17
17
|
width: paginationBubbleSize,
|
|
18
18
|
selectors: {
|
|
19
19
|
[`&:not(${selectedItem}):hover`]: {
|
|
20
|
-
backgroundColor: vars.
|
|
20
|
+
backgroundColor: vars.color.background.default,
|
|
21
21
|
boxShadow: `inset 0 0 0 1px ${vars.colours.intent.primary.background.strong}, ${vars.elevation['1']}`
|
|
22
22
|
},
|
|
23
23
|
[`&:not(${selectedItem}):active`]: {
|
|
24
|
-
backgroundColor: vars.
|
|
24
|
+
backgroundColor: vars.color.background.default,
|
|
25
25
|
boxShadow: `inset 0 0 0 1px ${vars.colours.intent.primary.background.strong}, ${vars.elevation['1']}`
|
|
26
26
|
}
|
|
27
27
|
}
|
|
@@ -10,12 +10,12 @@ export const overlayStyle = style([sprinkles({
|
|
|
10
10
|
borderRadius: 'md',
|
|
11
11
|
borderWidth: '1',
|
|
12
12
|
borderStyle: 'solid',
|
|
13
|
-
|
|
13
|
+
borderColor: 'gray200',
|
|
14
14
|
padding: '4'
|
|
15
15
|
}), {
|
|
16
16
|
'@layer': {
|
|
17
17
|
[cssLayerComponent]: {
|
|
18
|
-
backgroundColor: tokens.
|
|
18
|
+
backgroundColor: tokens.color.background.default,
|
|
19
19
|
boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
|
|
20
20
|
minWidth: '280px'
|
|
21
21
|
}
|
|
@@ -41,7 +41,7 @@ export const triggerStyle = style({
|
|
|
41
41
|
export const fullScreenStyle = style({
|
|
42
42
|
'@layer': {
|
|
43
43
|
[cssLayerComponent]: {
|
|
44
|
-
backgroundColor: tokens.
|
|
44
|
+
backgroundColor: tokens.color.background.default,
|
|
45
45
|
bottom: 0,
|
|
46
46
|
left: 0,
|
|
47
47
|
position: 'fixed',
|
|
@@ -17,11 +17,11 @@ export const ProgressBar = ({
|
|
|
17
17
|
}) => /*#__PURE__*/_jsx(Box, {
|
|
18
18
|
className: styles.container,
|
|
19
19
|
borderRadius: "1",
|
|
20
|
-
|
|
20
|
+
backgroundColor: "gray100",
|
|
21
21
|
odComponent: "progress-bar",
|
|
22
22
|
children: /*#__PURE__*/_jsx(Box, {
|
|
23
23
|
borderRadius: "1",
|
|
24
|
-
|
|
24
|
+
backgroundColor: backgroundColorMap[colour],
|
|
25
25
|
className: [styles.bar, styles.container],
|
|
26
26
|
style: {
|
|
27
27
|
width: `${clamp(value, 0, 1) * 100}%`
|
|
@@ -24,7 +24,7 @@ export const ProgressBarGroup = ({
|
|
|
24
24
|
children: values.map((value, idx) => /*#__PURE__*/_jsxs(Fragment, {
|
|
25
25
|
children: [/*#__PURE__*/_jsx(Text, {
|
|
26
26
|
size: "3",
|
|
27
|
-
|
|
27
|
+
color: "gray700",
|
|
28
28
|
className: styles.label,
|
|
29
29
|
children: hasPrefixLabels ? prefixLabels[idx] : ''
|
|
30
30
|
}), /*#__PURE__*/_jsx(ProgressBar, {
|
|
@@ -32,7 +32,7 @@ export const ProgressBarGroup = ({
|
|
|
32
32
|
value: value / count
|
|
33
33
|
}), /*#__PURE__*/_jsx(Text, {
|
|
34
34
|
size: "3",
|
|
35
|
-
|
|
35
|
+
color: "gray700",
|
|
36
36
|
children: hasSuffixLabels ? suffixLabels[idx] : ''
|
|
37
37
|
})]
|
|
38
38
|
}, idx))
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
export declare const circular: string;
|
|
2
2
|
export declare const path: string;
|
|
3
|
-
export declare const colours: Record<"danger" | "warning" | "
|
|
3
|
+
export declare const colours: Record<"danger" | "warning" | "primary" | "secondary" | "default" | "light", string>;
|
|
4
4
|
export declare const size: {
|
|
5
5
|
small: Record<"path" | "circular", string>;
|
|
6
6
|
medium: Record<"path" | "circular", string>;
|
|
@@ -42,10 +42,10 @@ export const colours = styleVariants({
|
|
|
42
42
|
stroke: vars.typography.colour.danger
|
|
43
43
|
},
|
|
44
44
|
default: {
|
|
45
|
-
stroke: vars.
|
|
45
|
+
stroke: vars.color.foreground.primary
|
|
46
46
|
},
|
|
47
47
|
light: {
|
|
48
|
-
stroke: vars.
|
|
48
|
+
stroke: vars.color.foreground.reverse
|
|
49
49
|
},
|
|
50
50
|
primary: {
|
|
51
51
|
stroke: vars.typography.colour.primary
|
|
@@ -3,8 +3,8 @@ __vanilla_filescope__.setFileScope("lib/components/Radio/Radio.css.ts", "@autogu
|
|
|
3
3
|
import { style } from '@vanilla-extract/css';
|
|
4
4
|
import { overdriveTokens as vars } from "../../themes/theme.css.js";
|
|
5
5
|
import { checkable, nativeInput } from "../private/CheckableBase/CheckableBase.css.js";
|
|
6
|
-
const colorAccent = vars.
|
|
7
|
-
const colorContrast = vars.
|
|
6
|
+
const colorAccent = vars.color.foreground.primary;
|
|
7
|
+
const colorContrast = vars.color.background.default;
|
|
8
8
|
const colorMid = vars.colours.background.neutral;
|
|
9
9
|
const outerSize = vars.space['6'];
|
|
10
10
|
const innerSize = vars.space['3'];
|
|
@@ -3,7 +3,7 @@ __vanilla_filescope__.setFileScope("lib/components/ScrollPane/ScrollPane.css.ts"
|
|
|
3
3
|
import { style } from '@vanilla-extract/css';
|
|
4
4
|
import { overdriveTokens as vars } from "../../themes/theme.css.js";
|
|
5
5
|
export const root = style({
|
|
6
|
-
scrollbarColor: `${vars.
|
|
6
|
+
scrollbarColor: `${vars.color.gamut.gray['300']} transparent`,
|
|
7
7
|
scrollbarWidth: 'thin',
|
|
8
8
|
'::-webkit-scrollbar': {
|
|
9
9
|
backgroundColor: 'transparent',
|
|
@@ -17,7 +17,7 @@ export const root = style({
|
|
|
17
17
|
backgroundColor: 'transparent'
|
|
18
18
|
},
|
|
19
19
|
'::-webkit-scrollbar-thumb': {
|
|
20
|
-
backgroundColor: vars.
|
|
20
|
+
backgroundColor: vars.color.gamut.gray['300'],
|
|
21
21
|
borderRadius: '999px'
|
|
22
22
|
},
|
|
23
23
|
'::-webkit-scrollbar-button': {
|
|
@@ -25,7 +25,7 @@ export const root = style({
|
|
|
25
25
|
},
|
|
26
26
|
selectors: {
|
|
27
27
|
['&::-webkit-scrollbar-thumb:hover']: {
|
|
28
|
-
backgroundColor: vars.
|
|
28
|
+
backgroundColor: vars.color.gamut.gray['400']
|
|
29
29
|
}
|
|
30
30
|
}
|
|
31
31
|
}, "root");
|
|
@@ -23,10 +23,10 @@ const placeholder = style({
|
|
|
23
23
|
[cssLayerComponent]: {
|
|
24
24
|
selectors: {
|
|
25
25
|
'&::placeholder': {
|
|
26
|
-
color: tokens.
|
|
26
|
+
color: tokens.color.gamut.gray['400']
|
|
27
27
|
},
|
|
28
28
|
'&:disabled::placeholder': {
|
|
29
|
-
color: tokens.
|
|
29
|
+
color: tokens.color.gamut.gray['300']
|
|
30
30
|
}
|
|
31
31
|
}
|
|
32
32
|
}
|
|
@@ -36,23 +36,23 @@ export const searchBarStyle = style([{
|
|
|
36
36
|
'@layer': {
|
|
37
37
|
[cssLayerComponent]: {
|
|
38
38
|
alignItems: 'center',
|
|
39
|
-
backgroundColor: tokens.
|
|
39
|
+
backgroundColor: tokens.color.background.default,
|
|
40
40
|
borderColor: tokens.border.colours.gray,
|
|
41
41
|
borderRadius: tokens.border.radius['md'],
|
|
42
42
|
borderStyle: 'solid',
|
|
43
43
|
borderWidth: tokens.border.width[2],
|
|
44
|
-
color: tokens.
|
|
44
|
+
color: tokens.color.gamut.gray['400'],
|
|
45
45
|
display: 'flex',
|
|
46
46
|
gap: tokens.space[2],
|
|
47
47
|
padding: `0 ${tokens.space[4]}`,
|
|
48
48
|
selectors: {
|
|
49
49
|
'&:focus, &[data-focus], &[data-focused]': {
|
|
50
50
|
borderColor: tokens.border.colours.dark,
|
|
51
|
-
color: tokens.
|
|
51
|
+
color: tokens.color.gamut.gray['900']
|
|
52
52
|
},
|
|
53
53
|
'&:disabled, &[data-disabled]': {
|
|
54
54
|
borderColor: tokens.border.colours.light,
|
|
55
|
-
color: tokens.
|
|
55
|
+
color: tokens.color.gamut.gray['300'],
|
|
56
56
|
cursor: 'not-allowed'
|
|
57
57
|
},
|
|
58
58
|
'&:hover:not(:disabled,[data-disabled]), &[data-hover]:not(:disabled,[data-disabled])': {
|
|
@@ -15,7 +15,7 @@ export const container = sprinkles({
|
|
|
15
15
|
});
|
|
16
16
|
export const label = sprinkles({
|
|
17
17
|
fontSize: '6',
|
|
18
|
-
fontWeight: '
|
|
18
|
+
fontWeight: 'medium',
|
|
19
19
|
color: 'normal'
|
|
20
20
|
});
|
|
21
21
|
export const valueDisplay = sprinkles({
|
|
@@ -25,7 +25,7 @@ export const valueDisplay = sprinkles({
|
|
|
25
25
|
});
|
|
26
26
|
export const valueText = sprinkles({
|
|
27
27
|
fontSize: '7',
|
|
28
|
-
fontWeight: '
|
|
28
|
+
fontWeight: 'medium',
|
|
29
29
|
color: 'normal'
|
|
30
30
|
});
|
|
31
31
|
export const sliderContainer = sprinkles({
|
|
@@ -47,10 +47,10 @@ export const track = style([sprinkles({
|
|
|
47
47
|
}), {
|
|
48
48
|
'@layer': {
|
|
49
49
|
[cssLayerComponent]: {
|
|
50
|
-
backgroundColor: vars.
|
|
50
|
+
backgroundColor: vars.color.gamut.gray['300'],
|
|
51
51
|
selectors: {
|
|
52
52
|
[selectors.disabled]: {
|
|
53
|
-
backgroundColor: vars.
|
|
53
|
+
backgroundColor: vars.color.gamut.gray['200'],
|
|
54
54
|
cursor: 'not-allowed'
|
|
55
55
|
}
|
|
56
56
|
}
|
|
@@ -64,7 +64,7 @@ export const thumb = style([sprinkles({
|
|
|
64
64
|
}), {
|
|
65
65
|
'@layer': {
|
|
66
66
|
[cssLayerComponent]: {
|
|
67
|
-
backgroundColor: vars.
|
|
67
|
+
backgroundColor: vars.color.gamut.gray['900'],
|
|
68
68
|
cursor: 'pointer',
|
|
69
69
|
position: 'absolute',
|
|
70
70
|
top: '50%',
|
|
@@ -81,7 +81,7 @@ export const thumb = style([sprinkles({
|
|
|
81
81
|
boxShadow: `0 0 0 4px rgba(0, 0, 0, 0.2)`
|
|
82
82
|
},
|
|
83
83
|
[selectors.disabled]: {
|
|
84
|
-
backgroundColor: vars.
|
|
84
|
+
backgroundColor: vars.color.gamut.gray['500'],
|
|
85
85
|
cursor: 'not-allowed'
|
|
86
86
|
}
|
|
87
87
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressStep.d.ts","sourceRoot":"","sources":["../../../lib/components/SliderProgress/ProgressStep.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAQ,oBAAoB,EAAe,MAAM,OAAO,CAAC;AAGhF,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAI7B,UAAU,iBACT,SAAQ,IAAI,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,EAAE,kBAAkB,CAAC;IAC5D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IAEjB,UAAU,IAAI,IAAI,CAAC;CACnB;AAED,eAAO,MAAM,YAAY,EAAE,oBAAoB,CAAC,iBAAiB,
|
|
1
|
+
{"version":3,"file":"ProgressStep.d.ts","sourceRoot":"","sources":["../../../lib/components/SliderProgress/ProgressStep.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAQ,oBAAoB,EAAe,MAAM,OAAO,CAAC;AAGhF,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAI7B,UAAU,iBACT,SAAQ,IAAI,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,EAAE,kBAAkB,CAAC;IAC5D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IAEjB,UAAU,IAAI,IAAI,CAAC;CACnB;AAED,eAAO,MAAM,YAAY,EAAE,oBAAoB,CAAC,iBAAiB,CAiDhE,CAAC"}
|
|
@@ -25,7 +25,9 @@ export const ProgressStep = /*#__PURE__*/memo(({
|
|
|
25
25
|
ref: elementRef,
|
|
26
26
|
position: "absolute",
|
|
27
27
|
display: hasPassed ? 'none' : 'block',
|
|
28
|
-
className: [styles.item, styles.empty]
|
|
28
|
+
className: [styles.item, styles.empty]
|
|
29
|
+
// eslint-disable-next-line no-restricted-syntax -- RETAINED: public prop pass-through, intent-capable, reverted by the C-theme-bridge corrective package (docs/ds2026-plan/track-c.md §1.5 + deviation 12).
|
|
30
|
+
,
|
|
29
31
|
backgroundColour: backgroundColour
|
|
30
32
|
}), /*#__PURE__*/_jsx(Box, {
|
|
31
33
|
ref: elementRef,
|
|
@@ -35,7 +37,9 @@ export const ProgressStep = /*#__PURE__*/memo(({
|
|
|
35
37
|
[styles.passed]: hasPassed,
|
|
36
38
|
[styles.active]: isActive,
|
|
37
39
|
[styles.paused]: isActive && paused
|
|
38
|
-
}]
|
|
40
|
+
}]
|
|
41
|
+
// eslint-disable-next-line no-restricted-syntax -- RETAINED: public prop pass-through, intent-capable, reverted by the C-theme-bridge corrective package (docs/ds2026-plan/track-c.md §1.5 + deviation 12).
|
|
42
|
+
,
|
|
39
43
|
backgroundColour: backgroundColour,
|
|
40
44
|
style: {
|
|
41
45
|
animationDuration: duration
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SliderProgress.d.ts","sourceRoot":"","sources":["../../../lib/components/SliderProgress/SliderProgress.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAQ,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAEnE,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAE7B,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG9C,MAAM,WAAW,mBAChB,SAAQ,IAAI,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,EAAE,kBAAkB,CAAC,EAC3D,IAAI,CAAC,cAAc,CAAC,OAAO,YAAY,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IACjE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IAEpB,aAAa,IAAI,IAAI,CAAC;CACtB;AAED,eAAO,MAAM,cAAc,EAAE,oBAAoB,CAAC,mBAAmB,
|
|
1
|
+
{"version":3,"file":"SliderProgress.d.ts","sourceRoot":"","sources":["../../../lib/components/SliderProgress/SliderProgress.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAQ,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAEnE,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAE7B,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG9C,MAAM,WAAW,mBAChB,SAAQ,IAAI,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,EAAE,kBAAkB,CAAC,EAC3D,IAAI,CAAC,cAAc,CAAC,OAAO,YAAY,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IACjE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IAEpB,aAAa,IAAI,IAAI,CAAC;CACtB;AAED,eAAO,MAAM,cAAc,EAAE,oBAAoB,CAAC,mBAAmB,CAiCpE,CAAC"}
|
|
@@ -22,7 +22,9 @@ export const SliderProgress = /*#__PURE__*/memo(({
|
|
|
22
22
|
}).fill('').map((_, index) => /*#__PURE__*/_jsx(ProgressStep, {
|
|
23
23
|
className: styles.step,
|
|
24
24
|
paused: paused,
|
|
25
|
-
duration: duration
|
|
25
|
+
duration: duration
|
|
26
|
+
// eslint-disable-next-line no-restricted-syntax -- RETAINED: public prop pass-through, intent-capable (accepts the 9 legacy intents), reverted by the C-theme-bridge corrective package (docs/ds2026-plan/track-c.md §1.5 + deviation 12).
|
|
27
|
+
,
|
|
26
28
|
backgroundColour: backgroundColour,
|
|
27
29
|
hasPassed: index < activeIndex,
|
|
28
30
|
isActive: index === activeIndex,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Stack.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Stack/Stack.css.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,EAAE,
|
|
1
|
+
{"version":3,"file":"Stack.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Stack/Stack.css.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,EAAE,QAYb,CAAC;AAEH,eAAO,MAAM,iBAAiB,QAO5B,CAAC"}
|
|
@@ -9,6 +9,7 @@ export const hr = style({
|
|
|
9
9
|
'@layer': {
|
|
10
10
|
[cssLayerComponent]: {
|
|
11
11
|
borderStyle: 'none',
|
|
12
|
+
// eslint-disable-next-line no-restricted-syntax -- RETAINED: tenant-variant key (the in-repo `neutral` theme overrides colours.background.neutral to gray400, which the unbridged color.background.inactive would drift from) — docs/ds2026-plan/track-c.md §1.5 extension.
|
|
12
13
|
boxShadow: `inset 0 0 0 1px ${vars.colours.background.neutral}`,
|
|
13
14
|
height: '1px',
|
|
14
15
|
margin: 0,
|
|
@@ -13,8 +13,8 @@ export const modal = style(_objectSpread({
|
|
|
13
13
|
alignSelf: 'flex-end',
|
|
14
14
|
borderRadius: `${vars.border.radius['2xl']} ${vars.border.radius['2xl']} 0 0`,
|
|
15
15
|
height: 'auto',
|
|
16
|
-
maxHeight: `calc(100vh - ${vars.space['
|
|
17
|
-
minHeight: `calc(3 * ${vars.space['
|
|
16
|
+
maxHeight: `calc(100vh - ${vars.space['9']})`,
|
|
17
|
+
minHeight: `calc(3 * ${vars.space['9']})`,
|
|
18
18
|
width: '100vw'
|
|
19
19
|
}, responsiveStyle({
|
|
20
20
|
tablet: {
|
|
@@ -22,9 +22,9 @@ export const modal = style(_objectSpread({
|
|
|
22
22
|
borderRadius: vars.border.radius['2xl']
|
|
23
23
|
},
|
|
24
24
|
desktop: {
|
|
25
|
-
maxWidth: `calc(100% - ${vars.space['
|
|
25
|
+
maxWidth: `calc(100% - ${vars.space['12']} * 2)`,
|
|
26
26
|
height: 'auto',
|
|
27
|
-
maxHeight: `calc(100vh - ${vars.space['
|
|
27
|
+
maxHeight: `calc(100vh - ${vars.space['12']} * 2)`,
|
|
28
28
|
boxShadow: '0 0 32px 0 rgba(0,0,0, 0.012), 0 24px 96px 0 rgba(0,0,0, 0.08)',
|
|
29
29
|
marginTop: 0
|
|
30
30
|
}
|
|
@@ -74,8 +74,8 @@ export const StandardModal = ({
|
|
|
74
74
|
"aria-labelledby": titleId,
|
|
75
75
|
display: "flex",
|
|
76
76
|
flexDirection: "column",
|
|
77
|
-
|
|
78
|
-
marginTop: "
|
|
77
|
+
backgroundColor: "white",
|
|
78
|
+
marginTop: "9",
|
|
79
79
|
className: clsx([styles.modal, {
|
|
80
80
|
[styles.modalSizeStandard]: size === 'standard'
|
|
81
81
|
}, {
|
|
@@ -95,7 +95,7 @@ export const StandardModal = ({
|
|
|
95
95
|
paddingLeft: "5",
|
|
96
96
|
paddingRight: "2",
|
|
97
97
|
borderWidthBottom: "1",
|
|
98
|
-
|
|
98
|
+
borderColor: "muted",
|
|
99
99
|
children: [/*#__PURE__*/_jsx(Box, {
|
|
100
100
|
flexGrow: "0",
|
|
101
101
|
id: titleId,
|
|
@@ -112,7 +112,7 @@ export const StandardModal = ({
|
|
|
112
112
|
onClick: closeButtonHandler,
|
|
113
113
|
children: /*#__PURE__*/_jsx(Icon, {
|
|
114
114
|
className: textStyles({
|
|
115
|
-
|
|
115
|
+
color: 'tertiaryInactive'
|
|
116
116
|
}),
|
|
117
117
|
icon: XIcon,
|
|
118
118
|
size: "medium"
|
|
@@ -31,7 +31,7 @@ const Handle = ({
|
|
|
31
31
|
className: [styles.handle.default, {
|
|
32
32
|
[styles.handle.disabled]: disabled
|
|
33
33
|
}, textStyles({
|
|
34
|
-
|
|
34
|
+
color: 'white'
|
|
35
35
|
})],
|
|
36
36
|
backgroundColour: disabled ? 'neutral' : 'primary',
|
|
37
37
|
"aria-label": label,
|
|
@@ -108,7 +108,7 @@ export const Stepper = ({
|
|
|
108
108
|
"aria-disabled": disabled,
|
|
109
109
|
tabIndex: 0,
|
|
110
110
|
borderWidth: "1",
|
|
111
|
-
|
|
111
|
+
borderColor: "default",
|
|
112
112
|
padding: "3",
|
|
113
113
|
borderRadius: "1",
|
|
114
114
|
width: isFullWidth ? 'full' : 'fit-content',
|
|
@@ -132,7 +132,7 @@ export const Stepper = ({
|
|
|
132
132
|
}), /*#__PURE__*/_jsx(Box, {
|
|
133
133
|
children: /*#__PURE__*/_jsx(Text, {
|
|
134
134
|
as: "span",
|
|
135
|
-
|
|
135
|
+
color: "primary",
|
|
136
136
|
display: "block",
|
|
137
137
|
className: clsx(styles.label),
|
|
138
138
|
size: "4",
|
|
@@ -5,8 +5,8 @@ import { focusOutlineStyle } from "../../styles/focusOutline.css.js";
|
|
|
5
5
|
import { LAYER_ORDER, cssLayerComponent } from "../../styles/layers.css.js";
|
|
6
6
|
import { overdriveTokens as vars } from "../../themes/theme.css.js";
|
|
7
7
|
globalLayer(LAYER_ORDER);
|
|
8
|
-
const colorAccent = vars.
|
|
9
|
-
const colorContrast = vars.
|
|
8
|
+
const colorAccent = vars.color.foreground.primary;
|
|
9
|
+
const colorContrast = vars.color.background.default;
|
|
10
10
|
const colorMid = vars.colours.background.neutral;
|
|
11
11
|
const colorLight = vars.colours.background.light;
|
|
12
12
|
const height = vars.space['6'];
|