Skip to content

Commit 151c37a

Browse files
castastrophecastastrophe
committed
fix(tabs,styles): use latest CSS
1 parent ed26da2 commit 151c37a

File tree

8 files changed

+120
-581
lines changed

8 files changed

+120
-581
lines changed

‎packages/tabs/src/spectrum-tabs-sizes.css

+54-12
Original file line numberDiff line numberDiff line change
@@ -11,23 +11,65 @@ governing permissions and limitations under the License.
1111
*/
1212

1313
/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
14+
:host([size='s']) #list {
15+
--spectrum-tabs-item-height: var(--spectrum-tab-item-height-small);
16+
--spectrum-tabs-item-horizontal-spacing: var(--spectrum-tab-item-to-tab-item-horizontal-small);
17+
--spectrum-tabs-item-vertical-spacing: var(--spectrum-tab-item-to-tab-item-vertical-small);
18+
--spectrum-tabs-start-to-edge: var(--spectrum-tab-item-start-to-edge-small);
19+
--spectrum-tabs-top-to-text: var(--spectrum-tab-item-top-to-text-small);
20+
--spectrum-tabs-bottom-to-text: var(--spectrum-tab-item-bottom-to-text-small);
21+
--spectrum-tabs-icon-size: var(--spectrum-workflow-icon-size-50);
22+
--spectrum-tabs-icon-to-text: var(--spectrum-text-to-visual-75);
23+
--spectrum-tabs-top-to-icon: var(--spectrum-tab-item-top-to-workflow-icon-small);
24+
--spectrum-tabs-focus-indicator-gap: var(--spectrum-tab-item-focus-indicator-gap-small);
25+
--spectrum-tabs-font-size: var(--spectrum-font-size-75);
26+
}
27+
28+
:host([size='l']) #list {
29+
--spectrum-tabs-item-height: var(--spectrum-tab-item-height-large);
30+
--spectrum-tabs-item-horizontal-spacing: var(--spectrum-tab-item-to-tab-item-horizontal-large);
31+
--spectrum-tabs-item-vertical-spacing: var(--spectrum-tab-item-to-tab-item-vertical-large);
32+
--spectrum-tabs-start-to-edge: var(--spectrum-tab-item-start-to-edge-large);
33+
--spectrum-tabs-top-to-text: var(--spectrum-tab-item-top-to-text-large);
34+
--spectrum-tabs-bottom-to-text: var(--spectrum-tab-item-bottom-to-text-large);
35+
--spectrum-tabs-icon-size: var(--spectrum-workflow-icon-size-100);
36+
--spectrum-tabs-icon-to-text: var(--spectrum-text-to-visual-200);
37+
--spectrum-tabs-top-to-icon: var(--spectrum-tab-item-top-to-workflow-icon-large);
38+
--spectrum-tabs-focus-indicator-gap: var(--spectrum-tab-item-focus-indicator-gap-large);
39+
--spectrum-tabs-font-size: var(--spectrum-font-size-200);
40+
}
41+
42+
:host([size='xl']) #list {
43+
--spectrum-tabs-item-height: var(--spectrum-tab-item-height-extra-large);
44+
--spectrum-tabs-item-horizontal-spacing: var(--spectrum-tab-item-to-tab-item-horizontal-extra-large);
45+
--spectrum-tabs-item-vertical-spacing: var(--spectrum-tab-item-to-tab-item-vertical-extra-large);
46+
--spectrum-tabs-start-to-edge: var(--spectrum-tab-item-start-to-edge-extra-large);
47+
--spectrum-tabs-top-to-text: var(--spectrum-tab-item-top-to-text-extra-large);
48+
--spectrum-tabs-bottom-to-text: var(--spectrum-tab-item-bottom-to-text-extra-large);
49+
--spectrum-tabs-icon-size: var(--spectrum-workflow-icon-size-200);
50+
--spectrum-tabs-icon-to-text: var(--spectrum-text-to-visual-300);
51+
--spectrum-tabs-top-to-icon: var(--spectrum-tab-item-top-to-workflow-icon-extra-large);
52+
--spectrum-tabs-focus-indicator-gap: var(--spectrum-tab-item-focus-indicator-gap-extra-large);
53+
--spectrum-tabs-font-size: var(--spectrum-font-size-300);
54+
}
55+
1456
:host([size='s']) #list.spectrum-Tabs--compact {
15-
--spectrum-tabs-item-height: var(--mod-tabs-item-height-compact, var(--spectrum-tab-item-compact-height-small));
16-
--spectrum-tabs-top-to-text: var(--mod-tabs-top-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-small));
17-
--spectrum-tabs-bottom-to-text: var(--mod-tabs-bottom-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-small));
18-
--spectrum-tabs-top-to-icon: var(--mod-tabs-top-to-icon-compact, var(--spectrum-tab-item-top-to-workflow-icon-compact-small));
57+
--mod-tabs-item-height: var(--mod-tabs-item-height-compact, var(--spectrum-tab-item-compact-height-small));
58+
--mod-tabs-top-to-text: var(--mod-tabs-top-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-small));
59+
--mod-tabs-bottom-to-text: var(--mod-tabs-bottom-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-small));
60+
--mod-tabs-top-to-icon: var(--mod-tabs-top-to-icon-compact, var(--spectrum-tab-item-top-to-workflow-icon-compact-small));
1961
}
2062

2163
:host([size='l']) #list.spectrum-Tabs--compact {
22-
--spectrum-tabs-item-height: var(--mod-tabs-item-height-compact, var(--spectrum-tab-item-compact-height-large));
23-
--spectrum-tabs-top-to-text: var(--mod-tabs-top-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-large));
24-
--spectrum-tabs-bottom-to-text: var(--mod-tabs-bottom-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-large));
25-
--spectrum-tabs-top-to-icon: var(--mod-tabs-top-to-icon-compact, var(--spectrum-tab-item-top-to-workflow-icon-compact-large));
64+
--mod-tabs-item-height: var(--mod-tabs-item-height-compact, var(--spectrum-tab-item-compact-height-large));
65+
--mod-tabs-top-to-text: var(--mod-tabs-top-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-large));
66+
--mod-tabs-bottom-to-text: var(--mod-tabs-bottom-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-large));
67+
--mod-tabs-top-to-icon: var(--mod-tabs-top-to-icon-compact, var(--spectrum-tab-item-top-to-workflow-icon-compact-large));
2668
}
2769

2870
:host([size='xl']) #list.spectrum-Tabs--compact {
29-
--spectrum-tabs-item-height: var(--mod-tabs-item-height-compact, var(--spectrum-tab-item-compact-height-extra-large));
30-
--spectrum-tabs-top-to-text: var(--mod-tabs-top-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-extra-large));
31-
--spectrum-tabs-bottom-to-text: var(--mod-tabs-bottom-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-extra-large));
32-
--spectrum-tabs-top-to-icon: var(--mod-tabs-top-to-icon-compact, var(--spectrum-tab-item-top-to-workflow-icon-compact-extra-large));
71+
--mod-tabs-item-height: var(--mod-tabs-item-height-compact, var(--spectrum-tab-item-compact-height-extra-large));
72+
--mod-tabs-top-to-text: var(--mod-tabs-top-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-extra-large));
73+
--mod-tabs-bottom-to-text: var(--mod-tabs-bottom-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-extra-large));
74+
--mod-tabs-top-to-icon: var(--mod-tabs-top-to-icon-compact, var(--spectrum-tab-item-top-to-workflow-icon-compact-extra-large));
3375
}

‎packages/tabs/src/spectrum-tabs.css

+64-33
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,69 @@ governing permissions and limitations under the License.
1111
*/
1212

1313
/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
14+
#list {
15+
--spectrum-tabs-item-height: var(--spectrum-tab-item-height-medium);
16+
--spectrum-tabs-item-horizontal-spacing: var(--spectrum-tab-item-to-tab-item-horizontal-medium);
17+
--spectrum-tabs-item-vertical-spacing: var(--spectrum-tab-item-to-tab-item-vertical-medium);
18+
--spectrum-tabs-start-to-edge: var(--spectrum-tab-item-start-to-edge-medium);
19+
--spectrum-tabs-top-to-text: var(--spectrum-tab-item-top-to-text-medium);
20+
--spectrum-tabs-bottom-to-text: var(--spectrum-tab-item-bottom-to-text-medium);
21+
--spectrum-tabs-icon-size: var(--spectrum-workflow-icon-size-75);
22+
--spectrum-tabs-icon-to-text: var(--spectrum-text-to-visual-100);
23+
--spectrum-tabs-top-to-icon: var(--spectrum-tab-item-top-to-workflow-icon-medium);
24+
--spectrum-tabs-color: var(--spectrum-neutral-subdued-content-color-default);
25+
--spectrum-tabs-color-selected: var(--spectrum-neutral-subdued-content-color-down);
26+
--spectrum-tabs-color-hover: var(--spectrum-neutral-subdued-content-color-hover);
27+
--spectrum-tabs-color-key-focus: var(--spectrum-neutral-subdued-content-color-key-focus);
28+
--spectrum-tabs-color-disabled: var(--spectrum-gray-500);
29+
--spectrum-tabs-font-family: var(--spectrum-sans-font-family-stack);
30+
--spectrum-tabs-font-style: var(--spectrum-default-font-style);
31+
--spectrum-tabs-font-size: var(--spectrum-font-size-100);
32+
--spectrum-tabs-line-height: var(--spectrum-line-height-100);
33+
--spectrum-tabs-focus-indicator-width: var(--spectrum-focus-indicator-thickness);
34+
--spectrum-tabs-focus-indicator-border-radius: var(--spectrum-corner-radius-100);
35+
--spectrum-tabs-focus-indicator-gap: var(--spectrum-tab-item-focus-indicator-gap-medium);
36+
--spectrum-tabs-focus-indicator-color: var(--spectrum-focus-indicator-color);
37+
--spectrum-tabs-selection-indicator-color: var(--spectrum-neutral-subdued-content-color-down);
38+
--spectrum-tabs-list-background-direction: top;
39+
--spectrum-tabs-divider-size: var(--spectrum-border-width-200);
40+
--spectrum-tabs-divider-border-radius: 1px;
41+
--spectrum-tabs-animation-duration: var(--spectrum-animation-duration-100);
42+
--spectrum-tabs-animation-ease: var(--spectrum-animation-ease-in-out);
43+
}
44+
45+
:host([emphasized]) #list {
46+
--mod-tabs-color-selected: var(--mod-tabs-color-selected-emphasized, var(--spectrum-accent-content-color-default));
47+
--mod-tabs-color-hover: var(--mod-tabs-color-hover-emphasized, var(--spectrum-accent-content-color-hover));
48+
--mod-tabs-color-key-focus: var(--mod-tabs-color-key-focus-emphasized, var(--spectrum-accent-content-color-key-focus));
49+
--mod-tabs-selection-indicator-color: var(--mod-tabs-selection-indicator-color-emphasized, var(--spectrum-accent-content-color-default));
50+
}
51+
52+
:host([direction^='vertical']) #list {
53+
--mod-tabs-list-background-direction: var(--mod-tabs-list-background-direction-vertical, right);
54+
}
55+
56+
:host([direction^='vertical-right']) #list {
57+
--mod-tabs-list-background-direction: var(--mod-tabs-list-background-direction-vertical-right, left);
58+
}
59+
60+
:host([direction^='vertical']) #list:dir(rtl),
61+
:host([dir='rtl'][direction^='vertical']) #list {
62+
--mod-tabs-list-background-direction: var(--mod-tabs-list-background-direction-vertical, left);
63+
}
64+
65+
:host([direction^='vertical-right']) #list:dir(rtl),
66+
:host([dir='rtl'][direction^='vertical-right']) #list {
67+
--mod-tabs-list-background-direction: var(--mod-tabs-list-background-direction-vertical, right);
68+
}
69+
70+
:host([compact]) #list {
71+
--mod-tabs-item-height: var(--mod-tabs-item-height-compact, var(--spectrum-tab-item-compact-height-medium));
72+
--mod-tabs-top-to-text: var(--mod-tabs-top-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-medium));
73+
--mod-tabs-bottom-to-text: var(--mod-tabs-bottom-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-medium));
74+
--mod-tabs-top-to-icon: var(--mod-tabs-top-to-icon-compact, var(--spectrum-tab-item-top-to-workflow-icon-compact-medium));
75+
}
76+
1477
#list {
1578
z-index: 0;
1679
vertical-align: top;
@@ -21,13 +84,6 @@ governing permissions and limitations under the License.
2184
position: relative;
2285
}
2386

24-
:host([emphasized]) #list {
25-
--mod-tabs-color-selected: var(--mod-tabs-color-selected-emphasized, var(--spectrum-tabs-color-selected));
26-
--mod-tabs-color-hover: var(--mod-tabs-color-hover-emphasized, var(--spectrum-tabs-color-hover));
27-
--mod-tabs-color-key-focus: var(--mod-tabs-color-key-focus-emphasized, var(--spectrum-tabs-color-key-focus));
28-
--mod-tabs-selection-indicator-color: var(--mod-tabs-selection-indicator-color-emphasized, var(--spectrum-tabs-selection-indicator-color));
29-
}
30-
3187
::slotted([selected]:not([slot])) {
3288
color: var(--highcontrast-tabs-color-selected, var(--mod-tabs-color-selected, var(--spectrum-tabs-color-selected)));
3389
}
@@ -77,11 +133,7 @@ governing permissions and limitations under the License.
77133
}
78134

79135
:host([quiet]) #selection-indicator {
80-
padding-inline-start: var(--mod-tabs-start-to-item-quiet, var(--spectrum-tabs-start-to-item-quiet));
81-
}
82-
83-
:host([direction^='vertical']) #list {
84-
--mod-tabs-list-background-direction: var(--mod-tabs-list-background-direction-vertical, right);
136+
padding-inline-start: var(--mod-tabs-start-to-item-quiet);
85137
}
86138

87139
:host([direction^='vertical']) #list,
@@ -119,31 +171,10 @@ governing permissions and limitations under the License.
119171
inset-inline-start: 0;
120172
}
121173

122-
:host([direction^='vertical-right']) #list {
123-
--mod-tabs-list-background-direction: var(--mod-tabs-list-background-direction-vertical-right, left);
124-
}
125-
126174
:host([direction^='vertical-right']) #list #selection-indicator {
127175
inset-inline: auto 0;
128176
}
129177

130-
:host([direction^='vertical']) #list:dir(rtl),
131-
:host([dir='rtl'][direction^='vertical']) #list {
132-
--mod-tabs-list-background-direction: var(--mod-tabs-list-background-direction-vertical, left);
133-
}
134-
135-
:host([direction^='vertical-right']) #list:dir(rtl),
136-
:host([dir='rtl'][direction^='vertical-right']) #list {
137-
--mod-tabs-list-background-direction: var(--mod-tabs-list-background-direction-vertical, right);
138-
}
139-
140-
:host([compact]) #list {
141-
--spectrum-tabs-item-height: var(--mod-tabs-item-height-compact, var(--spectrum-tab-item-compact-height-medium));
142-
--spectrum-tabs-top-to-text: var(--mod-tabs-top-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-medium));
143-
--spectrum-tabs-bottom-to-text: var(--mod-tabs-bottom-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-medium));
144-
--spectrum-tabs-top-to-icon: var(--mod-tabs-top-to-icon-compact, var(--spectrum-tab-item-top-to-workflow-icon-compact-medium));
145-
}
146-
147178
@media (forced-colors: active) {
148179
#list {
149180
--highcontrast-tabs-divider-background-color: var(--spectrum-gray-500);

‎packages/tabs/src/tabs-overrides.css

-57
Original file line numberDiff line numberDiff line change
@@ -13,64 +13,7 @@ governing permissions and limitations under the License.
1313
/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
1414
#list {
1515
--spectrum-tabs-font-weight: var(--system-tabs-font-weight);
16-
--spectrum-tabs-item-height: var(--system-tabs-item-height);
17-
--spectrum-tabs-item-horizontal-spacing: var(
18-
--system-tabs-item-horizontal-spacing
19-
);
20-
--spectrum-tabs-item-vertical-spacing: var(
21-
--system-tabs-item-vertical-spacing
22-
);
23-
--spectrum-tabs-start-to-edge: var(--system-tabs-start-to-edge);
24-
--spectrum-tabs-top-to-text: var(--system-tabs-top-to-text);
25-
--spectrum-tabs-bottom-to-text: var(--system-tabs-bottom-to-text);
26-
--spectrum-tabs-icon-size: var(--system-tabs-icon-size);
27-
--spectrum-tabs-icon-to-text: var(--system-tabs-icon-to-text);
28-
--spectrum-tabs-top-to-icon: var(--system-tabs-top-to-icon);
29-
--spectrum-tabs-color: var(--system-tabs-color);
30-
--spectrum-tabs-color-selected: var(--system-tabs-color-selected);
31-
--spectrum-tabs-color-hover: var(--system-tabs-color-hover);
32-
--spectrum-tabs-color-key-focus: var(--system-tabs-color-key-focus);
33-
--spectrum-tabs-color-disabled: var(--system-tabs-color-disabled);
34-
--spectrum-tabs-font-family: var(--system-tabs-font-family);
35-
--spectrum-tabs-font-style: var(--system-tabs-font-style);
36-
--spectrum-tabs-font-size: var(--system-tabs-font-size);
37-
--spectrum-tabs-line-height: var(--system-tabs-line-height);
38-
--spectrum-tabs-focus-indicator-width: var(
39-
--system-tabs-focus-indicator-width
40-
);
41-
--spectrum-tabs-focus-indicator-border-radius: var(
42-
--system-tabs-focus-indicator-border-radius
43-
);
44-
--spectrum-tabs-focus-indicator-gap: var(--system-tabs-focus-indicator-gap);
45-
--spectrum-tabs-focus-indicator-color: var(
46-
--system-tabs-focus-indicator-color
47-
);
48-
--spectrum-tabs-selection-indicator-color: var(
49-
--system-tabs-selection-indicator-color
50-
);
51-
--spectrum-tabs-list-background-direction: var(
52-
--system-tabs-list-background-direction
53-
);
5416
--spectrum-tabs-divider-background-color: var(
5517
--system-tabs-divider-background-color
5618
);
57-
--spectrum-tabs-divider-size: var(--system-tabs-divider-size);
58-
--spectrum-tabs-divider-border-radius: var(
59-
--system-tabs-divider-border-radius
60-
);
61-
--spectrum-tabs-animation-duration: var(--system-tabs-animation-duration);
62-
--spectrum-tabs-animation-ease: var(--system-tabs-animation-ease);
63-
}
64-
65-
:host([emphasized]) #list {
66-
--spectrum-tabs-color-selected: var(
67-
--system-tabs-emphasized-color-selected
68-
);
69-
--spectrum-tabs-color-hover: var(--system-tabs-emphasized-color-hover);
70-
--spectrum-tabs-color-key-focus: var(
71-
--system-tabs-emphasized-color-key-focus
72-
);
73-
--spectrum-tabs-selection-indicator-color: var(
74-
--system-tabs-emphasized-selection-indicator-color
75-
);
7619
}

‎packages/tabs/src/tabs-sizes-overrides.css

-59
Original file line numberDiff line numberDiff line change
@@ -11,62 +11,3 @@ governing permissions and limitations under the License.
1111
*/
1212

1313
/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
14-
:host([size='s']) #list {
15-
--spectrum-tabs-item-height: var(--system-tabs-size-s-item-height);
16-
--spectrum-tabs-item-horizontal-spacing: var(
17-
--system-tabs-size-s-item-horizontal-spacing
18-
);
19-
--spectrum-tabs-item-vertical-spacing: var(
20-
--system-tabs-size-s-item-vertical-spacing
21-
);
22-
--spectrum-tabs-start-to-edge: var(--system-tabs-size-s-start-to-edge);
23-
--spectrum-tabs-top-to-text: var(--system-tabs-size-s-top-to-text);
24-
--spectrum-tabs-bottom-to-text: var(--system-tabs-size-s-bottom-to-text);
25-
--spectrum-tabs-icon-size: var(--system-tabs-size-s-icon-size);
26-
--spectrum-tabs-icon-to-text: var(--system-tabs-size-s-icon-to-text);
27-
--spectrum-tabs-top-to-icon: var(--system-tabs-size-s-top-to-icon);
28-
--spectrum-tabs-focus-indicator-gap: var(
29-
--system-tabs-size-s-focus-indicator-gap
30-
);
31-
--spectrum-tabs-font-size: var(--system-tabs-size-s-font-size);
32-
}
33-
34-
:host([size='l']) #list {
35-
--spectrum-tabs-item-height: var(--system-tabs-size-l-item-height);
36-
--spectrum-tabs-item-horizontal-spacing: var(
37-
--system-tabs-size-l-item-horizontal-spacing
38-
);
39-
--spectrum-tabs-item-vertical-spacing: var(
40-
--system-tabs-size-l-item-vertical-spacing
41-
);
42-
--spectrum-tabs-start-to-edge: var(--system-tabs-size-l-start-to-edge);
43-
--spectrum-tabs-top-to-text: var(--system-tabs-size-l-top-to-text);
44-
--spectrum-tabs-bottom-to-text: var(--system-tabs-size-l-bottom-to-text);
45-
--spectrum-tabs-icon-size: var(--system-tabs-size-l-icon-size);
46-
--spectrum-tabs-icon-to-text: var(--system-tabs-size-l-icon-to-text);
47-
--spectrum-tabs-top-to-icon: var(--system-tabs-size-l-top-to-icon);
48-
--spectrum-tabs-focus-indicator-gap: var(
49-
--system-tabs-size-l-focus-indicator-gap
50-
);
51-
--spectrum-tabs-font-size: var(--system-tabs-size-l-font-size);
52-
}
53-
54-
:host([size='xl']) #list {
55-
--spectrum-tabs-item-height: var(--system-tabs-size-xl-item-height);
56-
--spectrum-tabs-item-horizontal-spacing: var(
57-
--system-tabs-size-xl-item-horizontal-spacing
58-
);
59-
--spectrum-tabs-item-vertical-spacing: var(
60-
--system-tabs-size-xl-item-vertical-spacing
61-
);
62-
--spectrum-tabs-start-to-edge: var(--system-tabs-size-xl-start-to-edge);
63-
--spectrum-tabs-top-to-text: var(--system-tabs-size-xl-top-to-text);
64-
--spectrum-tabs-bottom-to-text: var(--system-tabs-size-xl-bottom-to-text);
65-
--spectrum-tabs-icon-size: var(--system-tabs-size-xl-icon-size);
66-
--spectrum-tabs-icon-to-text: var(--system-tabs-size-xl-icon-to-text);
67-
--spectrum-tabs-top-to-icon: var(--system-tabs-size-xl-top-to-icon);
68-
--spectrum-tabs-focus-indicator-gap: var(
69-
--system-tabs-size-xl-focus-indicator-gap
70-
);
71-
--spectrum-tabs-font-size: var(--system-tabs-size-xl-font-size);
72-
}

‎packages/tabs/src/tabs-sizes.css

-1
Original file line numberDiff line numberDiff line change
@@ -11,4 +11,3 @@ governing permissions and limitations under the License.
1111
*/
1212

1313
@import url('./spectrum-tabs-sizes.css');
14-
@import url('./tabs-sizes-overrides.css');

0 commit comments

Comments
 (0)