Skip to content

Commit edf343c

Browse files
castastrophecastastrophe
authored
build: postcss preset env support added (#2614)
* chore: vrt enhancements for button & actionbutton (#2578) * fix: remove legacy dir properties * fix: remove sass nesting in favor of nested specs
1 parent 93c07c4 commit edf343c

File tree

38 files changed

+1157
-541
lines changed

38 files changed

+1157
-541
lines changed

‎components/accordion/index.css

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -145,7 +145,6 @@ governing permissions and limitations under the License.
145145
)
146146
);
147147

148-
[dir="rtl"] &,
149148
&:dir(rtl) {
150149
--spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0);
151150
}
@@ -384,7 +383,7 @@ governing permissions and limitations under the License.
384383
)
385384
);
386385

387-
[dir="rtl"] & {
386+
&:dir(rtl) {
388387
transform: scaleX(-1);
389388
}
390389
}

‎components/actionbutton/index.css

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,6 @@ governing permissions and limitations under the License.
2828
--spectrum-actionbutton-focus-indicator-color: var(--spectrum-focus-indicator-color);
2929
--spectrum-actionbutton-focus-indicator-border-radius: calc(var(--spectrum-actionbutton-border-radius) + var(--spectrum-actionbutton-focus-indicator-gap));
3030

31-
[dir="rtl"] &,
3231
&:dir(rtl) {
3332
--spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0);
3433
}

‎components/alertbanner/index.css

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -61,14 +61,14 @@ governing permissions and limitations under the License.
6161
&.is-open {
6262
display: flex;
6363
}
64+
}
6465

65-
&--info {
66-
background-color: var(--mod-alert-banner-informative-background, var(--spectrum-alert-banner-informative-background));
67-
}
66+
.spectrum-AlertBanner--info {
67+
background-color: var(--mod-alert-banner-informative-background, var(--spectrum-alert-banner-informative-background));
68+
}
6869

69-
&--negative {
70-
background-color: var(--mod-alert-banner-negative-background, var(--spectrum-alert-banner-negative-background));
71-
}
70+
.spectrum-AlertBanner--negative {
71+
background-color: var(--mod-alert-banner-negative-background, var(--spectrum-alert-banner-negative-background));
7272
}
7373

7474
.spectrum-AlertBanner-body {

‎components/alertdialog/index.css

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -59,16 +59,16 @@ governing permissions and limitations under the License.
5959
margin-inline-start: var(--mod-alert-dialog-title-to-icon, var(--spectrum-alert-dialog-title-to-icon));
6060
flex-shrink: 0;
6161
}
62+
}
6263

63-
&--warning {
64-
/* @passthrough */
65-
--mod-icon-color: var(--mod-alert-dialog-warning-icon-color, var(--spectrum-alert-dialog-warning-icon-color));
66-
}
64+
.spectrum-AlertDialog--warning {
65+
/* @passthrough */
66+
--mod-icon-color: var(--mod-alert-dialog-warning-icon-color, var(--spectrum-alert-dialog-warning-icon-color));
67+
}
6768

68-
&--error {
69-
/* @passthrough */
70-
--mod-icon-color: var(--mod-alert-dialog-error-icon-color, var(--spectrum-alert-dialog-error-icon-color));
71-
}
69+
.spectrum-AlertDialog--error {
70+
/* @passthrough */
71+
--mod-icon-color: var(--mod-alert-dialog-error-icon-color, var(--spectrum-alert-dialog-error-icon-color));
7272
}
7373

7474
.spectrum-AlertDialog-grid {

‎components/assetlist/index.css

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,6 @@ governing permissions and limitations under the License.
3535
--spectrum-assetlist-item-label-padding-inline-start: var(--spectrum-spacing-100);
3636
--spectrum-assetlist-label-color: var(--spectrum-neutral-content-color-default);
3737

38-
[dir="rtl"] &,
3938
&:dir(rtl) {
4039
--spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0);
4140
}

‎components/badge/index.css

Lines changed: 113 additions & 101 deletions
Original file line numberDiff line numberDiff line change
@@ -22,16 +22,6 @@ governing permissions and limitations under the License.
2222
/* text and icon color default white for all t-shirt sizes and all themes */
2323
--spectrum-badge-label-icon-color: var(--spectrum-white);
2424

25-
/* text and icon color is black for these background colors */
26-
&--orange, &--yellow, &--chartreuse, &--celery {
27-
--spectrum-badge-label-icon-color: var(--spectrum-black);
28-
}
29-
30-
/* dark theme all non-semantic colors are black */
31-
&--gray, &--red, &--green, &--seafoam, &--cyan, &--blue, &--indigo, &--purple, &--fuchsia, &--magenta {
32-
--spectrum-badge-label-icon-color: var(--spectrum-badge-label-icon-color-primary);
33-
}
34-
3525
/* background color default for all t-shirt sizes and all themes */
3626
--spectrum-badge-background-color-default: var(--spectrum-neutral-subdued-background-color-default);
3727

@@ -81,6 +71,27 @@ governing permissions and limitations under the License.
8171
--spectrum-badge-icon-only-spacing-horizontal: var(--spectrum-component-edge-to-visual-only-100);
8272
}
8373

74+
/* text and icon color is black for these background colors */
75+
.spectrum-Badge--orange,
76+
.spectrum-Badge--yellow,
77+
.spectrum-Badge--chartreuse,
78+
.spectrum-Badge--celery {
79+
--spectrum-badge-label-icon-color: var(--spectrum-black);
80+
}
81+
82+
/* dark theme all non-semantic colors are black */
83+
.spectrum-Badge--gray,
84+
.spectrum-Badge--red,
85+
.spectrum-Badge--green,
86+
.spectrum-Badge--seafoam,
87+
.spectrum-Badge--cyan,
88+
.spectrum-Badge--blue,
89+
.spectrum-Badge--indigo,
90+
.spectrum-Badge--purple,
91+
.spectrum-Badge--fuchsia,
92+
.spectrum-Badge--magenta {
93+
--spectrum-badge-label-icon-color: var(--spectrum-badge-label-icon-color-primary);
94+
}
8495

8596
.spectrum-Badge--sizeS {
8697
--spectrum-badge-height: var(--spectrum-component-height-75);
@@ -162,116 +173,117 @@ governing permissions and limitations under the License.
162173
var(--spectrum-badge-background-color-default));
163174
color: var(--mod-badge-label-icon-color,
164175
var(--spectrum-badge-label-icon-color));
176+
}
165177

166-
/* background color variants */
167-
&--neutral {
168-
background: var(--mod-badge-background-color-default,
169-
var(--spectrum-badge-background-color-default));
170-
}
178+
/* background color variants */
179+
.spectrum-Badge--neutral {
180+
background: var(--mod-badge-background-color-default,
181+
var(--spectrum-badge-background-color-default));
182+
}
171183

172-
&--accent {
173-
background: var(--mod-badge-background-color-accent,
174-
var(--spectrum-badge-background-color-accent));
175-
}
184+
.spectrum-Badge--accent {
185+
background: var(--mod-badge-background-color-accent,
186+
var(--spectrum-badge-background-color-accent));
187+
}
176188

177-
&--informative {
178-
background: var(--mod-badge-background-color-informative,
179-
var(--spectrum-badge-background-color-informative));
180-
}
189+
.spectrum-Badge--informative {
190+
background: var(--mod-badge-background-color-informative,
191+
var(--spectrum-badge-background-color-informative));
192+
}
181193

182-
&--negative {
183-
background: var(--mod-badge-background-color-negative,
184-
var(--spectrum-badge-background-color-negative));
185-
}
194+
.spectrum-Badge--negative {
195+
background: var(--mod-badge-background-color-negative,
196+
var(--spectrum-badge-background-color-negative));
197+
}
186198

187-
&--positive {
188-
background: var(--mod-badge-background-color-positive,
189-
var(--spectrum-badge-background-color-positive));
190-
}
199+
.spectrum-Badge--positive {
200+
background: var(--mod-badge-background-color-positive,
201+
var(--spectrum-badge-background-color-positive));
202+
}
191203

192-
&--notice {
193-
background: var(--mod-badge-background-color-notice, var(--spectrum-badge-background-color-notice));
194-
}
204+
.spectrum-Badge--notice {
205+
background: var(--mod-badge-background-color-notice, var(--spectrum-badge-background-color-notice));
206+
}
195207

196-
/* non-semantic colors */
197-
&--gray {
198-
background: var(--mod-badge-background-color-gray, var(--spectrum-badge-background-color-gray));
199-
}
208+
/* non-semantic colors */
209+
.spectrum-Badge--gray {
210+
background: var(--mod-badge-background-color-gray, var(--spectrum-badge-background-color-gray));
211+
}
200212

201-
&--red {
202-
background: var(--mod-badge-background-color-red, var(--spectrum-badge-background-color-red));
203-
}
213+
.spectrum-Badge--red {
214+
background: var(--mod-badge-background-color-red, var(--spectrum-badge-background-color-red));
215+
}
204216

205-
&--orange {
206-
background: var(--mod-badge-background-color-orange, var(--spectrum-badge-background-color-orange));
207-
}
217+
.spectrum-Badge--orange {
218+
background: var(--mod-badge-background-color-orange, var(--spectrum-badge-background-color-orange));
219+
}
208220

209-
&--yellow {
210-
background: var(--mod-badge-background-color-yellow, var(--spectrum-badge-background-color-yellow));
211-
}
221+
.spectrum-Badge--yellow {
222+
background: var(--mod-badge-background-color-yellow, var(--spectrum-badge-background-color-yellow));
223+
}
212224

213-
&--chartreuse {
214-
background: var(--mod-badge-background-color-chartreuse, var(--spectrum-badge-background-color-chartreuse));
215-
}
225+
.spectrum-Badge--chartreuse {
226+
background: var(--mod-badge-background-color-chartreuse, var(--spectrum-badge-background-color-chartreuse));
227+
}
216228

217-
&--celery {
218-
background: var(--mod-badge-background-color-celery, var(--spectrum-badge-background-color-celery));
219-
}
229+
.spectrum-Badge--celery {
230+
background: var(--mod-badge-background-color-celery, var(--spectrum-badge-background-color-celery));
231+
}
220232

221-
&--green {
222-
background: var(--mod-badge-background-color-green, var(--spectrum-badge-background-color-green));
223-
}
233+
.spectrum-Badge--green {
234+
background: var(--mod-badge-background-color-green, var(--spectrum-badge-background-color-green));
235+
}
224236

225-
&--seafoam {
226-
background: var(--mod-badge-background-color-seafoam, var(--spectrum-badge-background-color-seafoam));
227-
}
237+
.spectrum-Badge--seafoam {
238+
background: var(--mod-badge-background-color-seafoam, var(--spectrum-badge-background-color-seafoam));
239+
}
228240

229-
&--cyan {
230-
background: var(--mod-badge-background-color-cyan, var(--spectrum-badge-background-color-cyan));
231-
}
241+
.spectrum-Badge--cyan {
242+
background: var(--mod-badge-background-color-cyan, var(--spectrum-badge-background-color-cyan));
243+
}
232244

233-
&--blue {
234-
background: var(--mod-badge-background-color-blue, var(--spectrum-badge-background-color-blue));
235-
}
245+
.spectrum-Badge--blue {
246+
background: var(--mod-badge-background-color-blue, var(--spectrum-badge-background-color-blue));
247+
}
236248

237-
&--indigo {
238-
background: var(--mod-badge-background-color-indigo, var(--spectrum-badge-background-color-indigo));
239-
}
249+
.spectrum-Badge--indigo {
250+
background: var(--mod-badge-background-color-indigo, var(--spectrum-badge-background-color-indigo));
251+
}
240252

241-
&--purple {
242-
background: var(--mod-badge-background-color-purple, var(--spectrum-badge-background-color-purple));
243-
}
253+
.spectrum-Badge--purple {
254+
background: var(--mod-badge-background-color-purple, var(--spectrum-badge-background-color-purple));
255+
}
244256

245-
&--fuchsia {
246-
background: var(--mod-badge-background-color-fuchsia, var(--spectrum-badge-background-color-fuchsia));
247-
}
257+
.spectrum-Badge--fuchsia {
258+
background: var(--mod-badge-background-color-fuchsia, var(--spectrum-badge-background-color-fuchsia));
259+
}
248260

249-
&--magenta {
250-
background: var(--mod-badge-background-color-magenta, var(--spectrum-badge-background-color-magenta));
251-
}
261+
.spectrum-Badge--magenta {
262+
background: var(--mod-badge-background-color-magenta, var(--spectrum-badge-background-color-magenta));
263+
}
252264

253-
/* fixed position variants with border radius 0 on the fixed edge of the component */
254-
&--fixed-inline-start {
255-
border-start-start-radius: 0;
256-
border-end-start-radius: 0;
257-
}
265+
/* fixed position variants with border radius 0 on the fixed edge of the component */
266+
.spectrum-Badge--fixed-inline-start {
267+
border-start-start-radius: 0;
268+
border-end-start-radius: 0;
269+
}
258270

259-
&--fixed-inline-end {
260-
border-start-end-radius: 0;
261-
border-end-end-radius: 0;
262-
}
271+
.spectrum-Badge--fixed-inline-end {
272+
border-start-end-radius: 0;
273+
border-end-end-radius: 0;
274+
}
263275

264-
&--fixed-block-start {
265-
border-start-start-radius: 0;
266-
border-start-end-radius: 0;
267-
}
276+
.spectrum-Badge--fixed-block-start {
277+
border-start-start-radius: 0;
278+
border-start-end-radius: 0;
279+
}
268280

269-
&--fixed-block-end {
270-
border-end-start-radius: 0;
271-
border-end-end-radius: 0;
272-
}
281+
.spectrum-Badge--fixed-block-end {
282+
border-end-start-radius: 0;
283+
border-end-end-radius: 0;
273284
}
274285

286+
275287
/* label */
276288
.spectrum-Badge-label {
277289
font-size: var(--mod-badge-font-size,
@@ -328,12 +340,12 @@ governing permissions and limitations under the License.
328340

329341
color: var(--mod-badge-label-icon-color,
330342
var(--spectrum-badge-label-icon-color));
343+
}
331344

332-
&--no-label {
333-
/* icon without label has identical padding left and right */
334-
padding-inline-start: var(--mod-badge-icon-only-spacing-horizontal,
335-
var(--spectrum-badge-icon-only-spacing-horizontal));
336-
padding-inline-end: var(--mod-badge-icon-only-spacing-horizontal,
337-
var(--spectrum-badge-icon-only-spacing-horizontal));
338-
}
345+
.spectrum-Badge-icon--no-label {
346+
/* icon without label has identical padding left and right */
347+
padding-inline-start: var(--mod-badge-icon-only-spacing-horizontal,
348+
var(--spectrum-badge-icon-only-spacing-horizontal));
349+
padding-inline-end: var(--mod-badge-icon-only-spacing-horizontal,
350+
var(--spectrum-badge-icon-only-spacing-horizontal));
339351
}

‎components/breadcrumb/index.css

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -134,17 +134,17 @@ governing permissions and limitations under the License.
134134
flex: 1 0 0%;
135135

136136
block-size: var(--mod-breadcrumbs-block-size, var(--spectrum-breadcrumbs-block-size));
137+
}
137138

138-
&--compact {
139-
block-size: var(--mod-breadcrumbs-block-size-compact, var(--spectrum-breadcrumbs-block-size-compact));
140-
}
139+
.spectrum-Breadcrumbs--compact {
140+
block-size: var(--mod-breadcrumbs-block-size-compact, var(--spectrum-breadcrumbs-block-size-compact));
141+
}
141142

142-
&--multiline {
143-
block-size: var(--mod-breadcrumbs-block-size-multiline, var(--spectrum-breadcrumbs-block-size-multiline));
143+
.spectrum-Breadcrumbs--multiline {
144+
block-size: var(--mod-breadcrumbs-block-size-multiline, var(--spectrum-breadcrumbs-block-size-multiline));
144145

145-
flex-wrap: wrap;
146-
align-content: center;
147-
}
146+
flex-wrap: wrap;
147+
align-content: center;
148148
}
149149

150150
.spectrum-Breadcrumbs-itemSeparator {
@@ -156,7 +156,6 @@ governing permissions and limitations under the License.
156156
opacity: 1;
157157
color: var(--highcontrast-breadcrumbs-separator-color, var(--mod-breadcrumbs-separator-color, var(--spectrum-breadcrumbs-separator-color)));
158158

159-
[dir="rtl"] &,
160159
&:dir(rtl) {
161160
transform: scaleX(-1);
162161
}

‎components/calendar/index.css

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,6 @@ governing permissions and limitations under the License.
5050

5151
--spectrum-calendar-button-icon-color: var(--spectrum-gray-700);
5252

53-
[dir="rtl"] &,
5453
&:dir(rtl) {
5554
--spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0);
5655
}

0 commit comments

Comments
 (0)