Skip to content

Commit e692a9e

Browse files
castastrophecastastrophe
committed
fix(infield-button,styles): use latest CSS
1 parent 221a980 commit e692a9e

File tree

6 files changed

+139
-665
lines changed

6 files changed

+139
-665
lines changed

Diff for: ‎.changeset/twelve-bobcats-film.md

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
---
2+
'@spectrum-web-components/infield-button': patch
3+
---
4+
5+
📝 [#3536](https://github.com/adobe/spectrum-css/pull/3536) Thanks [@marissahuysentruyt](https://github.com/marissahuysentruyt)!
6+
7+
- Adjusts the background-color of the infield button components within stepper to use gray-100 as opposed to gray-25.
8+
- This corresponds to the background-color updates picker has for S2.
9+
- Corrects the border color for the default picker for S2 foundations, using gray-500 (instead of gray-800) to align with other field/form components.

Diff for: ‎packages/infield-button/src/infield-button-overrides.css

-190
Original file line numberDiff line numberDiff line change
@@ -42,194 +42,4 @@ governing permissions and limitations under the License.
4242
--spectrum-infield-button-background-color-key-focus: var(
4343
--system-infield-button-background-color-key-focus
4444
);
45-
--spectrum-infield-button-height: var(--system-infield-button-height);
46-
--spectrum-infield-button-width: var(--system-infield-button-width);
47-
--spectrum-infield-button-stacked-border-radius-reset: var(
48-
--system-infield-button-stacked-border-radius-reset
49-
);
50-
--spectrum-infield-button-edge-to-fill: var(
51-
--system-infield-button-edge-to-fill
52-
);
53-
--spectrum-infield-button-inner-edge-to-fill: var(
54-
--system-infield-button-inner-edge-to-fill
55-
);
56-
--spectrum-infield-button-fill-padding: var(
57-
--system-infield-button-fill-padding
58-
);
59-
--spectrum-infield-button-stacked-fill-padding-inline: var(
60-
--system-infield-button-stacked-fill-padding-inline
61-
);
62-
--spectrum-infield-button-stacked-fill-padding-outer: var(
63-
--system-infield-button-stacked-fill-padding-outer
64-
);
65-
--spectrum-infield-button-stacked-fill-padding-inner: var(
66-
--system-infield-button-stacked-fill-padding-inner
67-
);
68-
--spectrum-infield-button-animation-duration: var(
69-
--system-infield-button-animation-duration
70-
);
71-
--spectrum-infield-button-icon-color: var(
72-
--system-infield-button-icon-color
73-
);
74-
--spectrum-infield-button-icon-color-hover: var(
75-
--system-infield-button-icon-color-hover
76-
);
77-
--spectrum-infield-button-icon-color-down: var(
78-
--system-infield-button-icon-color-down
79-
);
80-
--spectrum-infield-button-icon-color-key-focus: var(
81-
--system-infield-button-icon-color-key-focus
82-
);
83-
--spectrum-infield-button-fill-justify-content: var(
84-
--system-infield-button-fill-justify-content
85-
);
86-
}
87-
88-
:host([disabled]) {
89-
--spectrum-infield-button-background-color: var(
90-
--system-infield-button-disabled-background-color
91-
);
92-
--spectrum-infield-button-background-color-hover: var(
93-
--system-infield-button-disabled-background-color-hover
94-
);
95-
--spectrum-infield-button-background-color-down: var(
96-
--system-infield-button-disabled-background-color-down
97-
);
98-
--spectrum-infield-button-border-color: var(
99-
--system-infield-button-disabled-border-color
100-
);
101-
--spectrum-infield-button-icon-color: var(
102-
--system-infield-button-disabled-icon-color
103-
);
104-
--spectrum-infield-button-icon-color-hover: var(
105-
--system-infield-button-disabled-icon-color-hover
106-
);
107-
--spectrum-infield-button-icon-color-down: var(
108-
--system-infield-button-disabled-icon-color-down
109-
);
110-
--spectrum-infield-button-icon-color-key-focus: var(
111-
--system-infield-button-disabled-icon-color-key-focus
112-
);
113-
}
114-
115-
:host([size='s']) {
116-
--spectrum-infield-button-height: var(
117-
--system-infield-button-size-s-height
118-
);
119-
--spectrum-infield-button-width: var(--system-infield-button-size-s-width);
120-
--spectrum-infield-button-stacked-fill-padding-inline: var(
121-
--system-infield-button-size-s-stacked-fill-padding-inline
122-
);
123-
--spectrum-infield-button-stacked-fill-padding-outer: var(
124-
--system-infield-button-size-s-stacked-fill-padding-outer
125-
);
126-
--spectrum-infield-button-stacked-fill-padding-inner: var(
127-
--system-infield-button-size-s-stacked-fill-padding-inner
128-
);
129-
}
130-
131-
:host([size='l']) {
132-
--spectrum-infield-button-height: var(
133-
--system-infield-button-size-l-height
134-
);
135-
--spectrum-infield-button-width: var(--system-infield-button-size-l-width);
136-
--spectrum-infield-button-stacked-fill-padding-inline: var(
137-
--system-infield-button-size-l-stacked-fill-padding-inline
138-
);
139-
--spectrum-infield-button-stacked-fill-padding-outer: var(
140-
--system-infield-button-size-l-stacked-fill-padding-outer
141-
);
142-
--spectrum-infield-button-stacked-fill-padding-inner: var(
143-
--system-infield-button-size-l-stacked-fill-padding-inner
144-
);
145-
}
146-
147-
:host([size='xl']) {
148-
--spectrum-infield-button-height: var(
149-
--system-infield-button-size-xl-height
150-
);
151-
--spectrum-infield-button-width: var(--system-infield-button-size-xl-width);
152-
--spectrum-infield-button-stacked-fill-padding-inline: var(
153-
--system-infield-button-size-xl-stacked-fill-padding-inline
154-
);
155-
--spectrum-infield-button-stacked-fill-padding-outer: var(
156-
--system-infield-button-size-xl-stacked-fill-padding-outer
157-
);
158-
--spectrum-infield-button-stacked-fill-padding-inner: var(
159-
--system-infield-button-size-xl-stacked-fill-padding-inner
160-
);
161-
}
162-
163-
:host([block='start']) {
164-
--spectrum-infield-button-width: var(--system-infield-button-top-width);
165-
}
166-
167-
:host([block='end']) {
168-
--spectrum-infield-button-width: var(--system-infield-button-bottom-width);
169-
}
170-
171-
:host([block='start'][size='s']) {
172-
--spectrum-infield-button-width: var(
173-
--system-infield-button-top-size-s-width
174-
);
175-
}
176-
177-
:host([block='end'][size='s']) {
178-
--spectrum-infield-button-width: var(
179-
--system-infield-button-bottom-size-s-width
180-
);
181-
}
182-
183-
:host([block='start'][size='l']) {
184-
--spectrum-infield-button-width: var(
185-
--system-infield-button-top-size-l-width
186-
);
187-
}
188-
189-
:host([block='end'][size='l']) {
190-
--spectrum-infield-button-width: var(
191-
--system-infield-button-bottom-size-l-width
192-
);
193-
}
194-
195-
:host([block='start'][size='xl']) {
196-
--spectrum-infield-button-width: var(
197-
--system-infield-button-top-size-xl-width
198-
);
199-
}
200-
201-
:host([block='end'][size='xl']) {
202-
--spectrum-infield-button-width: var(
203-
--system-infield-button-bottom-size-xl-width
204-
);
205-
}
206-
207-
:host([quiet]) {
208-
--spectrum-infield-button-background-color: var(
209-
--system-infield-button-quiet-background-color
210-
);
211-
--spectrum-infield-button-background-color-hover: var(
212-
--system-infield-button-quiet-background-color-hover
213-
);
214-
--spectrum-infield-button-background-color-down: var(
215-
--system-infield-button-quiet-background-color-down
216-
);
217-
--spectrum-infield-button-background-color-key-focus: var(
218-
--system-infield-button-quiet-background-color-key-focus
219-
);
220-
--spectrum-infield-border-color: var(
221-
--system-infield-button-quiet-infield-border-color
222-
);
223-
--spectrum-infield-button-border-width: var(
224-
--system-infield-button-quiet-border-width
225-
);
226-
}
227-
228-
:host([quiet][disabled]) {
229-
--spectrum-infield-button-background-color: var(
230-
--system-infield-button-quiet-disabled-background-color
231-
);
232-
--spectrum-infield-button-border-color: var(
233-
--system-infield-button-quiet-disabled-border-color
234-
);
23545
}

0 commit comments

Comments
 (0)