Skip to content

Commit 5fe7f6a

Browse files
devongovettdevongovett
authored
Move to Lightning CSS and upgrade to PostCSS 8 (#5093)
1 parent eb43d6e commit 5fe7f6a

File tree

95 files changed

+1394
-1057
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

95 files changed

+1394
-1057
lines changed

‎package.json‎

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -143,21 +143,12 @@
143143
"npm-cli-login": "^1.0.0",
144144
"nyc": "^10.2.0",
145145
"p-queue": "^6.2.1",
146-
"parcel": "^2.9.1",
146+
"parcel": "^2.9.2",
147147
"patch-package": "^6.2.0",
148148
"plop": "^2.4.0",
149-
"postcss": "^7.0.0",
150-
"postcss-calc": "^6.0.0",
151-
"postcss-custom-properties": "6.3.1",
152-
"postcss-dir-pseudo-class": "^5.0.0",
153-
"postcss-focus-ring": "^1.0.0",
154-
"postcss-functions": "^3.0.0",
155-
"postcss-import": "^12.0.1",
156-
"postcss-inherit": "^4.1.0",
157-
"postcss-logical": "^4.0.0",
158-
"postcss-modules": "^3.2.2",
159-
"postcss-nested": "^4.1.2",
160-
"postcss-svg": "^3.0.0",
149+
"postcss": "^8.4.24",
150+
"postcss-custom-properties": "^13.2.0",
151+
"postcss-import": "^15.1.0",
161152
"prop-types": "^15.6.0",
162153
"raf": "^3.4.0",
163154
"react": "^18.0.0",
@@ -182,9 +173,20 @@
182173
},
183174
"resolutions": {
184175
"@babel/core": "7.12.10",
185-
"postcss-calc": "6.0.2",
186-
"postcss-modules": "^3.2.2",
176+
"postcss": "8.4.24",
177+
"postcss-custom-properties": "13.2.0",
178+
"postcss-import": "15.1.0",
187179
"react-refresh": "0.9.0",
188180
"browserslist": "4.20.3"
181+
},
182+
"@parcel/transformer-css": {
183+
"cssModules": true,
184+
"drafts": {
185+
"nesting": true
186+
},
187+
"pseudoClasses": {
188+
"focusVisible": "focus-ring",
189+
"hover": "is-hovered"
190+
}
189191
}
190192
}

‎packages/@adobe/spectrum-css-temp/components/accordion/skin.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ governing permissions and limitations under the License.
3131
background-color: var(--spectrum-accordion-background-color-hover);
3232
}
3333

34-
&:focus-ring {
34+
&:focus-visible {
3535
&:after {
3636
background-color: var(--spectrum-accordion-border-left-color-key-focus);
3737
}
@@ -52,15 +52,15 @@ governing permissions and limitations under the License.
5252
.spectrum-Accordion-itemHeader {
5353
&,
5454
&:hover,
55-
&:focus-ring {
55+
&:focus-visible {
5656
color: var(--spectrum-accordion-text-color-disabled);
5757
background-color: transparent;
5858
}
5959
}
6060
}
6161
@media (forced-colors: active) {
6262
.spectrum-Accordion-itemHeader {
63-
&:focus-ring {
63+
&:focus-visible {
6464
outline: 3px solid CanvasText;
6565
}
6666
}

‎packages/@adobe/spectrum-css-temp/components/actiongroup/index.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -149,15 +149,15 @@ governing permissions and limitations under the License.
149149
border-radius: 0;
150150

151151
&:first-child {
152+
border-radius: 0;
152153
border-start-start-radius: var(--spectrum-actionbutton-border-radius);
153154
border-start-end-radius: var(--spectrum-actionbutton-border-radius);
154-
border-radius: 0;
155155
}
156156

157157
&:last-child {
158+
border-radius: 0;
158159
border-end-start-radius: var(--spectrum-actionbutton-border-radius);
159160
border-end-end-radius: var(--spectrum-actionbutton-border-radius);
160-
border-radius: 0;
161161
}
162162
}
163163
}

‎packages/@adobe/spectrum-css-temp/components/assetlist/skin.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ governing permissions and limitations under the License.
1616
}
1717

1818
&:focus {
19-
&:focus-ring,
19+
&:focus-visible,
2020
&.is-focused {
2121
background-color: var(--spectrum-miller-column-item-background-color-hover);
2222
&::before {

‎packages/@adobe/spectrum-css-temp/components/breadcrumb/index.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -106,15 +106,15 @@ governing permissions and limitations under the License.
106106
cursor: pointer;
107107

108108
&:hover,
109-
&:focus-ring {
109+
&:focus-visible {
110110
text-decoration: underline;
111111
}
112112
}
113113
}
114114

115115

116116
.spectrum-Breadcrumbs-item.is-dragged .spectrum-Breadcrumbs-itemLink:before,
117-
.spectrum-Breadcrumbs-itemLink:focus-ring:before {
117+
.spectrum-Breadcrumbs-itemLink:focus-visible:before {
118118
position: absolute;
119119
top: 0;
120120
inset-inline-start: 0;

‎packages/@adobe/spectrum-css-temp/components/breadcrumb/skin.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ governing permissions and limitations under the License.
3535
color: var(--spectrum-breadcrumb-text-color-hover);
3636
}
3737

38-
&:focus-ring {
38+
&:focus-visible {
3939
color: var(--spectrum-breadcrumb-text-color-key-focus);
4040

4141
&:before {
@@ -65,7 +65,7 @@ governing permissions and limitations under the License.
6565
}
6666
}
6767
.spectrum-Breadcrumbs-itemLink {
68-
&:focus-ring {
68+
&:focus-visible {
6969
color: var(--spectrum-breadcrumb-text-color-down);
7070
border-bottom: 0;
7171
}

‎packages/@adobe/spectrum-css-temp/components/button/index.css‎

Lines changed: 11 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ governing permissions and limitations under the License.
2424
--spectrum-button-line-height: 1.3;
2525
}
2626

27-
%spectrum-BaseButton {
27+
.spectrum-BaseButton {
2828
/* Contain halo */
2929
position: relative;
3030

@@ -54,7 +54,7 @@ governing permissions and limitations under the License.
5454
/* Font smoothing for Firefox */
5555
-moz-osx-font-smoothing: grayscale;
5656

57-
button& {
57+
&button {
5858
/* Correct the inability to style clickable types in iOS and Safari. */
5959
-webkit-appearance: button;
6060
}
@@ -69,7 +69,7 @@ governing permissions and limitations under the License.
6969

7070
text-decoration: none;
7171

72-
@extend %i18nFontFamily;
72+
composes: i18nFontFamily;
7373

7474
line-height: var(--spectrum-button-line-height);
7575

@@ -84,7 +84,7 @@ governing permissions and limitations under the License.
8484
&:focus {
8585
outline: none;
8686
}
87-
&:focus-ring {
87+
&:focus-visible {
8888
z-index: 3;
8989
}
9090

@@ -115,12 +115,10 @@ governing permissions and limitations under the License.
115115
fill var(--spectrum-global-animation-duration-100) ease-out;
116116
box-sizing: initial;
117117
}
118-
119118
}
120119

121120
.spectrum-Button {
122-
@inherit: %spectrum-BaseButton;
123-
@inherit: %spectrum-FocusRing;
121+
composes: spectrum-BaseButton spectrum-FocusRing;
124122

125123
border-style: solid;
126124
--spectrum-button-border-radius: var(--spectrum-button-primary-border-radius);
@@ -183,8 +181,7 @@ a.spectrum-ActionButton {
183181
}
184182

185183
.spectrum-ActionButton {
186-
@inherit: %spectrum-BaseButton;
187-
@inherit: %spectrum-FocusRing;
184+
composes: spectrum-BaseButton spectrum-FocusRing;
188185
position: relative;
189186

190187
block-size: var(--spectrum-actionbutton-height);
@@ -274,8 +271,7 @@ a.spectrum-ActionButton {
274271
}
275272

276273
.spectrum-LogicButton {
277-
@inherit: %spectrum-BaseButton;
278-
@inherit: %spectrum-FocusRing;
274+
composes: spectrum-BaseButton spectrum-FocusRing;
279275

280276
block-size: var(--spectrum-logicbutton-and-height);
281277
padding: var(--spectrum-logicbutton-and-padding-x);
@@ -289,8 +285,7 @@ a.spectrum-ActionButton {
289285
}
290286

291287
.spectrum-FieldButton {
292-
@inherit: %spectrum-BaseButton;
293-
@inherit: %spectrum-FocusRing;
288+
composes: spectrum-BaseButton spectrum-FocusRing;
294289

295290
position: relative;
296291
block-size: var(--spectrum-dropdown-height);
@@ -335,7 +330,7 @@ a.spectrum-ActionButton {
335330
}
336331

337332
.spectrum-FieldButton--quiet {
338-
@inherit: %spectrum-FocusRing--quiet;
333+
composes: spectrum-FocusRing--quiet;
339334

340335
margin: var(--spectrum-fieldbutton-quiet-margin);
341336
padding: var(--spectrum-fieldbutton-quiet-padding);
@@ -345,15 +340,14 @@ a.spectrum-ActionButton {
345340
--spectrum-focus-ring-size: var(--spectrum-alias-focus-ring-size);
346341
&:disabled,
347342
&.is-disabled {
348-
&:focus-ring {
343+
&:focus-visible {
349344
box-shadow: none;
350345
}
351346
}
352347
}
353348

354349
.spectrum-ClearButton {
355-
@inherit: %spectrum-BaseButton;
356-
@inherit: %spectrum-FocusRing;
350+
composes: spectrum-BaseButton spectrum-FocusRing;
357351

358352
inline-size: var(--spectrum-clearbutton-medium-width);
359353
block-size: var(--spectrum-clearbutton-medium-height);

‎packages/@adobe/spectrum-css-temp/components/button/skin.css‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ governing permissions and limitations under the License.
7979
}
8080
}
8181

82-
&:focus-ring {
82+
&:focus-visible {
8383
background-color: var(--spectrum-clearbutton-medium-background-color-key-focus);
8484
color: var(--spectrum-clearbutton-medium-icon-color-key-focus);
8585

@@ -133,7 +133,7 @@ governing permissions and limitations under the License.
133133
color: xvar(--spectrum-high-contrast-button-face, var(--spectrum-button-text-color-hover));
134134
}
135135

136-
&:focus-ring {
136+
&:focus-visible {
137137
background-color: xvar(--spectrum-high-contrast-highlight, var(--spectrum-button-color-key-focus));
138138
color: xvar(--spectrum-high-contrast-button-face, var(--spectrum-button-text-color-key-focus));
139139
}
@@ -168,7 +168,7 @@ governing permissions and limitations under the License.
168168
color: xvar(--spectrum-high-contrast-button-text, var(--spectrum-button-text-color-hover));
169169
}
170170

171-
&:focus-ring {
171+
&:focus-visible {
172172
background-color: xvar(--spectrum-high-contrast-transparent, var(--spectrum-button-background-color-key-focus));
173173
border-color: xvar(--spectrum-high-contrast-highlight, var(--spectrum-button-color-key-focus));
174174
color: xvar(--spectrum-high-contrast-button-text, var(--spectrum-button-text-color-key-focus));
@@ -447,7 +447,7 @@ governing permissions and limitations under the License.
447447
}
448448
}
449449

450-
&:focus-ring {
450+
&:focus-visible {
451451
background-color: xvar(--spectrum-high-contrast-button-face, var(--spectrum-actionbutton-background-color-key-focus));
452452
border-color: xvar(--spectrum-high-contrast-highlight, var(--spectrum-actionbutton-border-color-hover));
453453
color: xvar(--spectrum-high-contrast-button-text, var(--spectrum-actionbutton-text-color-key-focus));
@@ -505,7 +505,7 @@ governing permissions and limitations under the License.
505505
}
506506
}
507507

508-
&:focus-ring {
508+
&:focus-visible {
509509
background-color: xvar(--spectrum-high-contrast-highlight, var(--spectrum-actionbutton-background-color-selected-key-focus));
510510
border-color: xvar(--spectrum-high-contrast-highlight-text, var(--spectrum-actionbutton-border-color-selected-key-focus));
511511
color: xvar(--spectrum-high-contrast-highlight-text, var(--spectrum-actionbutton-text-color-selected-key-focus));
@@ -549,7 +549,7 @@ governing permissions and limitations under the License.
549549
fill: xvar(--spectrum-high-contrast-highlight-text, var(--spectrum-actionbutton-emphasized-icon-color-selected));
550550
}
551551

552-
&:focus-ring {
552+
&:focus-visible {
553553
background-color: xvar(--spectrum-high-contrast-highlight, var(--spectrum-actionbutton-emphasized-background-color-selected-key-focus));
554554
border-color: xvar(--spectrum-high-contrast-highlight-text, var(--spectrum-actionbutton-emphasized-border-color-selected-hover));
555555
color: xvar(--spectrum-high-contrast-highlight-text, var(--spectrum-actionbutton-emphasized-text-color-selected-key-focus));
@@ -603,7 +603,7 @@ governing permissions and limitations under the License.
603603
color: xvar(--spectrum-high-contrast-button-text, var(--spectrum-actionbutton-quiet-text-color-hover));
604604
}
605605

606-
&:focus-ring {
606+
&:focus-visible {
607607
background-color: xvar(--spectrum-high-contrast-button-face, var(--spectrum-actionbutton-quiet-background-color-key-focus));
608608
border-color: xvar(--spectrum-high-contrast-highlight, var(--spectrum-actionbutton-quiet-border-color-hover));
609609
color: xvar(--spectrum-high-contrast-button-text, var(--spectrum-actionbutton-quiet-text-color-key-focus));
@@ -705,7 +705,7 @@ governing permissions and limitations under the License.
705705
}
706706
}
707707

708-
&:focus-ring {
708+
&:focus-visible {
709709
background-color: var(--spectrum-actionbutton-static-background-color-focus);
710710
border-color: var(--spectrum-actionbutton-static-border-color-focus);
711711
box-shadow: none;
@@ -763,7 +763,7 @@ governing permissions and limitations under the License.
763763
fill: var(--spectrum-actionbutton-static-color-selected);
764764
}
765765

766-
&:focus-ring {
766+
&:focus-visible {
767767
background-color: var(--spectrum-actionbutton-static-background-color-selected-focus);
768768
border-color: var(--spectrum-actionbutton-static-background-color-selected-focus);
769769
color: var(--spectrum-actionbutton-static-color-selected);
@@ -886,7 +886,7 @@ governing permissions and limitations under the License.
886886
}
887887
}
888888

889-
&:focus-ring,
889+
&:focus-visible,
890890
&.is-focused {
891891
background-color: var(--spectrum-fieldbutton-background-color-key-focus);
892892
border-color: var(--spectrum-fieldbutton-border-color-key-focus);
@@ -913,7 +913,7 @@ governing permissions and limitations under the License.
913913
border-color: var(--spectrum-fieldbutton-border-color-error-down);
914914
}
915915

916-
&:focus-ring,
916+
&:focus-visible,
917917
&.is-focused {
918918
border-color: var(--spectrum-fieldbutton-border-color-error-key-focus);
919919
}
@@ -940,7 +940,7 @@ governing permissions and limitations under the License.
940940
color: var(--spectrum-fieldbutton-text-color-hover);
941941
}
942942

943-
&:focus-ring,
943+
&:focus-visible,
944944
&.is-focused {
945945
background-color: var(--spectrum-fieldbutton-quiet-background-color-key-focus);
946946

@@ -954,7 +954,7 @@ governing permissions and limitations under the License.
954954
background-color: var(--spectrum-fieldbutton-quiet-background-color-down);
955955
border-color: var(--spectrum-fieldbutton-quiet-border-color-down);
956956

957-
&:focus-ring,
957+
&:focus-visible,
958958
&.is-focused {
959959
background-color: var(--spectrum-fieldbutton-quiet-background-color-key-focus);
960960
}

‎packages/@adobe/spectrum-css-temp/components/card/index.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -154,14 +154,14 @@ user-provided
154154

155155
.spectrum-Card-image {
156156
grid-area: preview;
157-
& img {
157+
img {
158158
-webkit-user-drag: none;
159159
user-drag: none;
160160
}
161161
}
162162
.spectrum-Card-illustration {
163163
grid-area: preview;
164-
& svg {
164+
svg {
165165
-webkit-user-drag: none;
166166
user-drag: none;
167167
}

0 commit comments

Comments
 (0)