Skip to content

Commit 33d0e97

Browse files
lazdGarthDB
lazd
authored and
GarthDB
committed
fix: make Tabs build again
1 parent 5b39f67 commit 33d0e97

File tree

2 files changed

+42
-28
lines changed

2 files changed

+42
-28
lines changed

‎components/tabs/index.css‎

Lines changed: 24 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -10,16 +10,30 @@ OF ANY KIND, either express or implied. See the License for the specific languag
1010
governing permissions and limitations under the License.
1111
*/
1212

13-
@import '../commons/index.css';
13+
@import "../commons/index.css";
14+
@import "../vars/css/components/spectrum-tabs.css";
15+
@import "../vars/css/scales/spectrum-large.css";
16+
@import "../vars/css/scales/spectrum-medium.css";
1417

1518
:root {
16-
--spectrum-tabs-item-height: calc(var(--spectrum-tabs-height) - var(--spectrum-tabs-rule-height));
17-
--spectrum-tabs-compact-item-height: calc(var(--spectrum-tabs-quiet-compact-height) - var(--spectrum-tabs-rule-height));
19+
--spectrum-tabs-item-height: calc(var(--spectrum-tabs-height) - var(--spectrum-tabs-rule-size));
20+
--spectrum-tabs-compact-item-height: calc(var(--spectrum-tabs-quiet-compact-height) - var(--spectrum-tabs-rule-size));
1821

1922
/* todo: remove when this is added back to DNA */
2023
--spectrum-tabs-text-size: var(--spectrum-alias-font-size-default);
2124
}
2225

26+
.spectrum-Tabs {
27+
@remapvars {
28+
find: --spectrum-tabs-m-;
29+
replace: --spectrum-tabs-;
30+
}
31+
@remapvars {
32+
find: --spectrum-tabs-quiet-m-;
33+
replace: --spectrum-tabs-quiet-;
34+
}
35+
}
36+
2337
.spectrum-Tabs {
2438
display: flex;
2539

@@ -81,7 +95,7 @@ governing permissions and limitations under the License.
8195
box-sizing: border-box;
8296

8397
block-size: var(--spectrum-tabs-focus-ring-height);
84-
margin-block-start: calc(calc(var(--spectrum-tabs-focus-ring-height) / -2) + calc(var(--spectrum-tabs-rule-height) / 2));
98+
margin-block-start: calc(calc(var(--spectrum-tabs-focus-ring-height) / -2) + calc(var(--spectrum-tabs-rule-size) / 2));
8599
inset-inline-start: calc(-1 * var(--spectrum-tabs-focus-ring-padding-x));
86100
inset-inline-end: calc(-1 * var(--spectrum-tabs-focus-ring-padding-x));
87101
border: var(--spectrum-tabs-focus-ring-size) solid transparent;
@@ -136,7 +150,7 @@ governing permissions and limitations under the License.
136150
.spectrum-Tabs--horizontal {
137151
align-items: center;
138152

139-
border-block-end: var(--spectrum-tabs-rule-height) solid;
153+
border-block-end: var(--spectrum-tabs-rule-size) solid;
140154

141155
.spectrum-Tabs-item {
142156
vertical-align: top;
@@ -150,9 +164,9 @@ governing permissions and limitations under the License.
150164
.spectrum-Tabs-selectionIndicator {
151165
position: absolute;
152166
inset-block-end: 0;
153-
block-size: var(--spectrum-tabs-rule-height);
167+
block-size: var(--spectrum-tabs-rule-size);
154168

155-
inset-block-end: calc(-1 * var(--spectrum-tabs-rule-height));
169+
inset-block-end: calc(-1 * var(--spectrum-tabs-rule-size));
156170
}
157171

158172

@@ -173,7 +187,7 @@ governing permissions and limitations under the License.
173187
display: inline-flex;
174188
flex-direction: column;
175189
padding: 0;
176-
border-inline-start: var(--spectrum-tabs-vertical-rule-width) solid;
190+
border-inline-start: var(--spectrum-tabs-vertical-rule-size) solid;
177191

178192
.spectrum-Tabs-item {
179193
block-size: var(--spectrum-tabs-vertical-item-height);
@@ -207,8 +221,8 @@ governing permissions and limitations under the License.
207221
.spectrum-Tabs-selectionIndicator {
208222
position: absolute;
209223
inset-inline-start: 0px;
210-
inline-size: var(--spectrum-tabs-vertical-rule-width);
224+
inline-size: var(--spectrum-tabs-vertical-rule-size);
211225

212-
inset-inline-start: calc(-1 * var(--spectrum-tabs-vertical-rule-width));
226+
inset-inline-start: calc(-1 * var(--spectrum-tabs-vertical-rule-size));
213227
}
214228
}

‎components/tabs/skin.css‎

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -11,76 +11,76 @@ governing permissions and limitations under the License.
1111
*/
1212

1313
.spectrum-Tabs {
14-
border-block-end-color: var(--spectrum-tabs-rule-color);
14+
border-block-end-color: var(--spectrum-tabs-m-rule-color);
1515
}
1616

1717
.spectrum-Tabs--vertical {
18-
border-inline-start-color: var(--spectrum-tabs-vertical-rule-color);
18+
border-inline-start-color: var(--spectrum-tabs-m-vertical-rule-color);
1919
}
2020

2121
.spectrum-Tabs-selectionIndicator {
22-
background-color: var(--spectrum-tabs-selection-indicator-color);
22+
background-color: var(--spectrum-tabs-m-selection-indicator-color);
2323
}
2424

2525
.spectrum-Tabs-item {
26-
color: var(--spectrum-tabs-text-color);
26+
color: var(--spectrum-tabs-m-text-color);
2727

2828
.spectrum-Icon {
29-
color: var(--spectrum-tabs-icon-color)
29+
color: var(--spectrum-tabs-m-icon-color)
3030
}
3131

3232
&:hover {
33-
color: var(--spectrum-tabs-text-color-hover);
33+
color: var(--spectrum-tabs-m-text-color-hover);
3434

3535
.spectrum-Icon {
36-
color: var(--spectrum-tabs-icon-color-hover)
36+
color: var(--spectrum-tabs-m-icon-color-hover)
3737
}
3838
}
3939

4040
&.is-selected {
41-
color: var(--spectrum-tabs-text-color-selected);
41+
color: var(--spectrum-tabs-m-text-color-selected);
4242

4343
.spectrum-Icon {
44-
color: var(--spectrum-tabs-icon-color-selected)
44+
color: var(--spectrum-tabs-m-icon-color-selected)
4545
}
4646
}
4747

4848
&:focus-ring {
49-
color: var(--spectrum-tabs-text-color-key-focus);
49+
color: var(--spectrum-tabs-m-text-color-key-focus);
5050

5151
&::before {
52-
border-color: var(--spectrum-tabs-focus-ring-color);
52+
border-color: var(--spectrum-tabs-m-focus-ring-color);
5353
}
5454

5555
.spectrum-Icon {
56-
color: var(--spectrum-tabs-icon-color-key-focus)
56+
color: var(--spectrum-tabs-m-icon-color-key-focus)
5757
}
5858
}
5959

6060
&.is-disabled {
61-
color: var(--spectrum-tabs-text-color-disabled);
61+
color: var(--spectrum-tabs-m-text-color-disabled);
6262

6363
.spectrum-Icon {
64-
color: var(--spectrum-tabs-icon-color-disabled)
64+
color: var(--spectrum-tabs-m-icon-color-disabled)
6565
}
6666
}
6767
}
6868

6969
.spectrum-Tabs--quiet {
70-
border-block-end-color: var(--spectrum-tabs-quiet-rule-color);
70+
border-block-end-color: var(--spectrum-tabs-quiet-m-rule-color);
7171

7272
.spectrum-Tabs-selectionIndicator {
73-
background-color: var(--spectrum-tabs-quiet-selection-indicator-color);
73+
background-color: var(--spectrum-tabs-quiet-m-selection-indicator-color);
7474
}
7575
}
7676

7777
.spectrum-Tabs--vertical {
7878
&.spectrum-Tabs--quiet,
7979
&.spectrum-Tabs--compact {
80-
border-inline-start-color: var(--spectrum-tabs-quiet-vertical-rule-color);
80+
border-inline-start-color: var(--spectrum-tabs-quiet-m-vertical-rule-color);
8181

8282
.spectrum-Tabs-selectionIndicator {
83-
background-color: var(--spectrum-tabs-quiet-selection-indicator-color);
83+
background-color: var(--spectrum-tabs-quiet-m-selection-indicator-color);
8484
}
8585
}
8686
}

0 commit comments

Comments
 (0)