Skip to content

Commit 49fada6

Browse files
WestbrookWestbrook
committed
chore: update :focus-visible based CSS output
1 parent 4020f51 commit 49fada6

29 files changed

+1165
-40
lines changed

‎.browserslistrc

+6-2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
defaults
12
last 2 Chrome versions
2-
Firefox >= 63
3-
Safari >= 10.1
3+
last 2 Firefox versions
4+
last 2 Safari versions
5+
last 2 iOS versions
6+
not IE 11
7+
maintained node versions

‎package.json

+7-6
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,7 @@
9191
"common-tags": "^1.8.0",
9292
"prismjs": "^1.15.0"
9393
},
94+
"dependencies": {},
9495
"devDependencies": {
9596
"@babel/core": "^7.12.3",
9697
"@babel/plugin-syntax-import-meta": "^7.10.4",
@@ -180,17 +181,17 @@
180181
"plugin-error": "^1.0.1",
181182
"pngjs": "^6.0.0",
182183
"polymer-webpack-loader": "^2.0.3",
183-
"postcss": "^8.2.9",
184+
"postcss": "^8.3.9",
184185
"postcss-custom-properties": "^12.0.0",
185186
"postcss-focus-visible": "^6.0.1",
186-
"postcss-import": "^14.0.0",
187+
"postcss-import": "^14.0.2",
187188
"postcss-inherit": "^4.1.0",
188189
"postcss-loader": "4.2.0",
189-
"postcss-mixins": "^8.0.0",
190-
"postcss-prefixwrap": "^1.22.1",
190+
"postcss-mixins": "^8.1.0",
191+
"postcss-prefixwrap": "^1.24.0",
191192
"postcss-preset-env": "^6.7.0",
192-
"postcss-reporter": "^7.0.2",
193-
"postcss-selector-parser": "^6.0.4",
193+
"postcss-reporter": "^7.0.3",
194+
"postcss-selector-parser": "^6.0.6",
194195
"posthtml": "^0.16.4",
195196
"posthtml-attrs-parser": "^0.1.1",
196197
"posthtml-loader": "^1.0.2",

‎packages/accordion/src/spectrum-accordion-item.css

+17
Original file line numberDiff line numberDiff line change
@@ -262,6 +262,12 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
262262
var(--spectrum-global-color-gray-800)
263263
); /* .spectrum-Accordion-itemHeader:hover+.spectrum-Accordion-itemIndicator */
264264
}
265+
#header.focus-visible:after {
266+
background-color: var(
267+
--spectrum-accordion-item-border-left-color-key-focus,
268+
var(--spectrum-alias-border-color-focus)
269+
); /* .spectrum-Accordion-itemHeader.focus-ring:after */
270+
}
265271
#header:focus-visible:after {
266272
background-color: var(
267273
--spectrum-accordion-item-border-left-color-key-focus,
@@ -272,6 +278,17 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
272278
background-color: transparent; /* .spectrum-Accordion-item.is-open .spectrum-Accordion-itemHeader:hover */
273279
}
274280
:host([disabled]) #header,
281+
:host([disabled]) #header.focus-visible,
282+
:host([disabled]) #header:hover {
283+
background-color: transparent;
284+
color: var(
285+
--spectrum-accordion-text-color-disabled,
286+
var(--spectrum-global-color-gray-500)
287+
); /* .spectrum-Accordion-item.is-disabled .spectrum-Accordion-itemHeader,
288+
* .spectrum-Accordion-item.is-disabled .spectrum-Accordion-itemHeader:hover,
289+
* .spectrum-Accordion-item.is-disabled .spectrum-Accordion-itemHeader.focus-ring */
290+
}
291+
:host([disabled]) #header,
275292
:host([disabled]) #header:focus-visible,
276293
:host([disabled]) #header:hover {
277294
background-color: transparent;

‎packages/action-button/src/spectrum-action-button.css

+163
Original file line numberDiff line numberDiff line change
@@ -546,6 +546,29 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
546546
var(--spectrum-alias-icon-color-hover)
547547
); /* .spectrum-ActionButton:hover .spectrum-ActionButton-hold */
548548
}
549+
:host(.focus-visible) {
550+
background-color: var(
551+
--spectrum-actionbutton-m-background-color-key-focus,
552+
var(--spectrum-global-color-gray-50)
553+
); /* .spectrum-ActionButton.focus-ring */
554+
border-color: var(
555+
--spectrum-actionbutton-m-border-color-key-focus,
556+
var(--spectrum-alias-border-color-focus)
557+
);
558+
box-shadow: 0 0 0
559+
var(
560+
--spectrum-actionbutton-m-quiet-border-size-key-focus,
561+
var(--spectrum-alias-border-size-thick)
562+
)
563+
var(
564+
--spectrum-actionbutton-m-border-color-key-focus,
565+
var(--spectrum-alias-border-color-focus)
566+
);
567+
color: var(
568+
--spectrum-actionbutton-m-text-color-key-focus,
569+
var(--spectrum-alias-text-color-hover)
570+
);
571+
}
549572
:host(:focus-visible) {
550573
background-color: var(
551574
--spectrum-actionbutton-m-background-color-key-focus,
@@ -569,18 +592,36 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
569592
var(--spectrum-alias-text-color-hover)
570593
);
571594
}
595+
:host(.focus-visible[active]) {
596+
border-color: var(
597+
--spectrum-actionbutton-m-border-color-key-focus,
598+
var(--spectrum-alias-border-color-focus)
599+
); /* .spectrum-ActionButton.focus-ring:active */
600+
}
572601
:host(:focus-visible[active]) {
573602
border-color: var(
574603
--spectrum-actionbutton-m-border-color-key-focus,
575604
var(--spectrum-alias-border-color-focus)
576605
); /* .spectrum-ActionButton.focus-ring:active */
577606
}
607+
:host(.focus-visible) ::slotted([slot='icon']) {
608+
color: var(
609+
--spectrum-actionbutton-m-icon-color-key-focus,
610+
var(--spectrum-alias-icon-color-focus)
611+
); /* .spectrum-ActionButton.focus-ring .spectrum-Icon */
612+
}
578613
:host(:focus-visible) ::slotted([slot='icon']) {
579614
color: var(
580615
--spectrum-actionbutton-m-icon-color-key-focus,
581616
var(--spectrum-alias-icon-color-focus)
582617
); /* .spectrum-ActionButton.focus-ring .spectrum-Icon */
583618
}
619+
:host(.focus-visible) #hold-affordance {
620+
color: var(
621+
--spectrum-actionbutton-m-hold-icon-color-key-focus,
622+
var(--spectrum-alias-icon-color-hover)
623+
); /* .spectrum-ActionButton.focus-ring .spectrum-ActionButton-hold */
624+
}
584625
:host(:focus-visible) #hold-affordance {
585626
color: var(
586627
--spectrum-actionbutton-m-hold-icon-color-key-focus,
@@ -659,6 +700,20 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
659700
var(--spectrum-alias-icon-color)
660701
); /* .spectrum-ActionButton.is-selected .spectrum-Icon */
661702
}
703+
:host([selected].focus-visible) {
704+
background-color: var(
705+
--spectrum-actionbutton-m-background-color-selected-key-focus,
706+
var(--spectrum-global-color-gray-200)
707+
); /* .spectrum-ActionButton.is-selected.focus-ring */
708+
border-color: var(
709+
--spectrum-actionbutton-m-border-color-selected-key-focus,
710+
var(--spectrum-alias-border-color-focus)
711+
);
712+
color: var(
713+
--spectrum-actionbutton-m-text-color-selected-key-focus,
714+
var(--spectrum-alias-text-color-hover)
715+
);
716+
}
662717
:host([selected]:focus-visible) {
663718
background-color: var(
664719
--spectrum-actionbutton-m-background-color-selected-key-focus,
@@ -673,12 +728,24 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
673728
var(--spectrum-alias-text-color-hover)
674729
);
675730
}
731+
:host([selected].focus-visible[active]) {
732+
border-color: var(
733+
--spectrum-actionbutton-m-border-color-key-focus,
734+
var(--spectrum-alias-border-color-focus)
735+
); /* .spectrum-ActionButton.is-selected.focus-ring:active */
736+
}
676737
:host([selected]:focus-visible[active]) {
677738
border-color: var(
678739
--spectrum-actionbutton-m-border-color-key-focus,
679740
var(--spectrum-alias-border-color-focus)
680741
); /* .spectrum-ActionButton.is-selected.focus-ring:active */
681742
}
743+
:host([selected].focus-visible) ::slotted([slot='icon']) {
744+
color: var(
745+
--spectrum-actionbutton-m-icon-color-selected-key-focus,
746+
var(--spectrum-alias-icon-color-hover)
747+
); /* .spectrum-ActionButton.is-selected.focus-ring .spectrum-Icon */
748+
}
682749
:host([selected]:focus-visible) ::slotted([slot='icon']) {
683750
color: var(
684751
--spectrum-actionbutton-m-icon-color-selected-key-focus,
@@ -814,6 +881,29 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
814881
var(--spectrum-alias-icon-color-hover)
815882
); /* .spectrum-ActionButton--emphasized:hover .spectrum-ActionButton-hold */
816883
}
884+
:host([emphasized].focus-visible) {
885+
background-color: var(
886+
--spectrum-actionbutton-m-emphasized-background-color-key-focus,
887+
var(--spectrum-global-color-gray-50)
888+
); /* .spectrum-ActionButton--emphasized.focus-ring */
889+
border-color: var(
890+
--spectrum-actionbutton-m-emphasized-border-color-key-focus,
891+
var(--spectrum-alias-border-color-hover)
892+
);
893+
box-shadow: 0 0 0
894+
var(
895+
--spectrum-actionbutton-m-quiet-border-size-key-focus,
896+
var(--spectrum-alias-border-size-thick)
897+
)
898+
var(
899+
--spectrum-actionbutton-m-border-color-key-focus,
900+
var(--spectrum-alias-border-color-focus)
901+
);
902+
color: var(
903+
--spectrum-actionbutton-m-emphasized-text-color-key-focus,
904+
var(--spectrum-alias-text-color-hover)
905+
);
906+
}
817907
:host([emphasized]:focus-visible) {
818908
background-color: var(
819909
--spectrum-actionbutton-m-emphasized-background-color-key-focus,
@@ -837,12 +927,24 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
837927
var(--spectrum-alias-text-color-hover)
838928
);
839929
}
930+
:host([emphasized].focus-visible) ::slotted([slot='icon']) {
931+
color: var(
932+
--spectrum-actionbutton-m-emphasized-icon-color-key-focus,
933+
var(--spectrum-alias-icon-color-focus)
934+
); /* .spectrum-ActionButton--emphasized.focus-ring .spectrum-Icon */
935+
}
840936
:host([emphasized]:focus-visible) ::slotted([slot='icon']) {
841937
color: var(
842938
--spectrum-actionbutton-m-emphasized-icon-color-key-focus,
843939
var(--spectrum-alias-icon-color-focus)
844940
); /* .spectrum-ActionButton--emphasized.focus-ring .spectrum-Icon */
845941
}
942+
:host([emphasized].focus-visible) #hold-affordance {
943+
color: var(
944+
--spectrum-actionbutton-m-emphasized-hold-icon-color-key-focus,
945+
var(--spectrum-alias-icon-color-hover)
946+
); /* .spectrum-ActionButton--emphasized.focus-ring .spectrum-ActionButton-hold */
947+
}
846948
:host([emphasized]:focus-visible) #hold-affordance {
847949
color: var(
848950
--spectrum-actionbutton-m-emphasized-hold-icon-color-key-focus,
@@ -926,6 +1028,22 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
9261028
); /* .spectrum-ActionButton--emphasized.spectrum-ActionButton--quiet.is-selected .spectrum-Icon,
9271029
* .spectrum-ActionButton--emphasized.is-selected .spectrum-Icon */
9281030
}
1031+
:host([emphasized][quiet][selected].focus-visible),
1032+
:host([emphasized][selected].focus-visible) {
1033+
background-color: var(
1034+
--spectrum-actionbutton-m-emphasized-background-color-selected-key-focus,
1035+
var(--spectrum-semantic-cta-color-background-key-focus)
1036+
); /* .spectrum-ActionButton--emphasized.spectrum-ActionButton--quiet.is-selected.focus-ring,
1037+
* .spectrum-ActionButton--emphasized.is-selected.focus-ring */
1038+
border-color: var(
1039+
--spectrum-actionbutton-m-emphasized-border-color-selected-key-focus,
1040+
var(--spectrum-semantic-cta-color-background-key-focus)
1041+
);
1042+
color: var(
1043+
--spectrum-actionbutton-m-emphasized-text-color-selected-key-focus,
1044+
var(--spectrum-global-color-static-white)
1045+
);
1046+
}
9291047
:host([emphasized][quiet][selected]:focus-visible),
9301048
:host([emphasized][selected]:focus-visible) {
9311049
background-color: var(
@@ -942,6 +1060,14 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
9421060
var(--spectrum-global-color-static-white)
9431061
);
9441062
}
1063+
:host([emphasized][quiet][selected].focus-visible) ::slotted([slot='icon']),
1064+
:host([emphasized][selected].focus-visible) ::slotted([slot='icon']) {
1065+
color: var(
1066+
--spectrum-actionbutton-m-emphasized-icon-color-selected-key-focus,
1067+
var(--spectrum-global-color-static-white)
1068+
); /* .spectrum-ActionButton--emphasized.spectrum-ActionButton--quiet.is-selected.focus-ring .spectrum-Icon,
1069+
* .spectrum-ActionButton--emphasized.is-selected.focus-ring .spectrum-Icon */
1070+
}
9451071
:host([emphasized][quiet][selected]:focus-visible) ::slotted([slot='icon']),
9461072
:host([emphasized][selected]:focus-visible) ::slotted([slot='icon']) {
9471073
color: var(
@@ -1058,6 +1184,29 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
10581184
var(--spectrum-alias-text-color-hover)
10591185
);
10601186
}
1187+
:host([quiet].focus-visible) {
1188+
background-color: var(
1189+
--spectrum-actionbutton-m-quiet-background-color-key-focus,
1190+
var(--spectrum-alias-background-color-transparent)
1191+
); /* .spectrum-ActionButton--quiet.focus-ring */
1192+
border-color: var(
1193+
--spectrum-actionbutton-m-quiet-border-color-key-focus,
1194+
var(--spectrum-alias-border-color-focus)
1195+
);
1196+
box-shadow: 0 0 0
1197+
var(
1198+
--spectrum-actionbutton-m-quiet-border-size-key-focus,
1199+
var(--spectrum-alias-border-size-thick)
1200+
)
1201+
var(
1202+
--spectrum-actionbutton-m-quiet-border-color-key-focus,
1203+
var(--spectrum-alias-border-color-focus)
1204+
);
1205+
color: var(
1206+
--spectrum-actionbutton-m-quiet-text-color-key-focus,
1207+
var(--spectrum-alias-text-color-hover)
1208+
);
1209+
}
10611210
:host([quiet]:focus-visible) {
10621211
background-color: var(
10631212
--spectrum-actionbutton-m-quiet-background-color-key-focus,
@@ -1125,6 +1274,20 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
11251274
var(--spectrum-alias-text-color)
11261275
);
11271276
}
1277+
:host([quiet][selected].focus-visible) {
1278+
background-color: var(
1279+
--spectrum-actionbutton-m-quiet-background-color-selected-key-focus,
1280+
var(--spectrum-global-color-gray-200)
1281+
); /* .spectrum-ActionButton--quiet.is-selected.focus-ring */
1282+
border-color: var(
1283+
--spectrum-actionbutton-m-quiet-border-color-selected-key-focus,
1284+
var(--spectrum-alias-border-color-transparent)
1285+
);
1286+
color: var(
1287+
--spectrum-actionbutton-m-quiet-text-color-selected-key-focus,
1288+
var(--spectrum-alias-text-color-hover)
1289+
);
1290+
}
11281291
:host([quiet][selected]:focus-visible) {
11291292
background-color: var(
11301293
--spectrum-actionbutton-m-quiet-background-color-selected-key-focus,

‎packages/action-group/src/spectrum-action-group.css

+3
Original file line numberDiff line numberDiff line change
@@ -213,6 +213,9 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
213213
:host([compact]:not([quiet])) ::slotted(:hover) {
214214
z-index: 2; /* .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:hover */
215215
}
216+
:host([compact]:not([quiet])) ::slotted(.focus-visible) {
217+
z-index: 3; /* .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item.focus-ring */
218+
}
216219
:host([compact]:not([quiet])) ::slotted(:focus-visible) {
217220
z-index: 3; /* .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item.focus-ring */
218221
}

0 commit comments

Comments
 (0)