Skip to content

Commit 9be7931

Browse files
cdransfcastastrophe
cdransf
authored and
castastrophe
committed
feat(thumbnail): S2 migration (#3367)
* feat(thumbnail): migrate to S2 * feat(thumbnail): add customstyles to scope change to thumbnail
1 parent 5188292 commit 9be7931

File tree

4 files changed

+68
-58
lines changed

4 files changed

+68
-58
lines changed

‎.changeset/mean-eggs-learn.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@spectrum-css/thumbnail": minor
3+
---
4+
5+
Replaces corner-radius-75 with thumbnail-corner-radius.

‎components/thumbnail/dist/metadata.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
".spectrum-Thumbnail--size300",
1010
".spectrum-Thumbnail--size400",
1111
".spectrum-Thumbnail--size50",
12+
".spectrum-Thumbnail--size500",
1213
".spectrum-Thumbnail--size600",
1314
".spectrum-Thumbnail--size700",
1415
".spectrum-Thumbnail--size75",
@@ -48,10 +49,10 @@
4849
"--spectrum-thumbnail-border-color-selected",
4950
"--spectrum-thumbnail-border-opacity",
5051
"--spectrum-thumbnail-border-radius",
51-
"--spectrum-thumbnail-border-radius-default",
5252
"--spectrum-thumbnail-border-width",
5353
"--spectrum-thumbnail-border-width-selected",
5454
"--spectrum-thumbnail-color-opacity-disabled",
55+
"--spectrum-thumbnail-corner-radius",
5556
"--spectrum-thumbnail-focus-indicator-color",
5657
"--spectrum-thumbnail-focus-indicator-gap",
5758
"--spectrum-thumbnail-focus-indicator-thickness",
@@ -72,8 +73,7 @@
7273
"--spectrum-thumbnail-size-700",
7374
"--spectrum-thumbnail-size-75",
7475
"--spectrum-thumbnail-size-800",
75-
"--spectrum-thumbnail-size-900",
76-
"--spectrum-thumbnail-sized-size"
76+
"--spectrum-thumbnail-size-900"
7777
],
7878
"global": [
7979
"--spectrum-accent-color-800",

‎components/thumbnail/index.css

Lines changed: 57 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -12,86 +12,91 @@
1212
*/
1313

1414
.spectrum-Thumbnail {
15-
--spectrum-thumbnail-border-radius: 2px;
15+
--spectrum-thumbnail-size: var(--spectrum-thumbnail-size-500);
1616

17-
--spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-500);
17+
--spectrum-thumbnail-border-radius: var(--spectrum-thumbnail-corner-radius);
18+
--spectrum-thumbnail-border-width: var(--spectrum-border-width-100);
19+
20+
/* @todo Refactor with --spectrum-thumbnail-border-color once gray rgb token is no longer necessary to workaround nested rgb color token value using rgba(). */
21+
--spectrum-thumbnail-border-color: rgba(var(--spectrum-gray-800-rgb), var(--spectrum-thumbnail-border-opacity));
22+
--spectrum-thumbnail-layer-border-width-inner: var(--spectrum-border-width-400);
23+
--spectrum-thumbnail-layer-border-color-inner: var(--spectrum-white);
24+
--spectrum-thumbnail-layer-border-width-outer: var(--spectrum-border-width-100);
25+
--spectrum-thumbnail-layer-border-color-outer: var(--spectrum-gray-500);
26+
27+
--spectrum-thumbnail-border-width-selected: var(--spectrum-border-width-200);
28+
--spectrum-thumbnail-border-color-selected: var(--spectrum-accent-color-800);
29+
30+
--spectrum-thumbnail-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
31+
--spectrum-thumbnail-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
32+
--spectrum-thumbnail-focus-indicator-color: var(--spectrum-focus-indicator-color);
33+
34+
--spectrum-thumbnail-color-opacity-disabled: var(--spectrum-thumbnail-opacity-disabled);
1835
}
1936

2037
.spectrum-Thumbnail--size50 {
21-
--spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-50);
38+
--spectrum-thumbnail-size: var(--spectrum-thumbnail-size-50);
2239
}
2340

2441
.spectrum-Thumbnail--size75 {
25-
--spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-75);
42+
--spectrum-thumbnail-size: var(--spectrum-thumbnail-size-75);
2643
}
2744

2845
.spectrum-Thumbnail--size100 {
29-
--spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-100);
46+
--spectrum-thumbnail-size: var(--spectrum-thumbnail-size-100);
3047
}
3148

3249
.spectrum-Thumbnail--size200 {
33-
--spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-200);
50+
--spectrum-thumbnail-size: var(--spectrum-thumbnail-size-200);
3451
}
3552

3653
.spectrum-Thumbnail--size300 {
37-
--spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-300);
54+
--spectrum-thumbnail-size: var(--spectrum-thumbnail-size-300);
3855
}
3956

4057
.spectrum-Thumbnail--size400 {
41-
--spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-400);
58+
--spectrum-thumbnail-size: var(--spectrum-thumbnail-size-400);
59+
}
60+
61+
.spectrum-Thumbnail--size500 {
62+
--spectrum-thumbnail-size: var(--spectrum-thumbnail-size-500);
4263
}
4364

4465
.spectrum-Thumbnail--size600 {
45-
--spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-600);
66+
--spectrum-thumbnail-size: var(--spectrum-thumbnail-size-600);
4667
}
4768

4869
.spectrum-Thumbnail--size700 {
49-
--spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-700);
70+
--spectrum-thumbnail-size: var(--spectrum-thumbnail-size-700);
5071
}
5172

5273
.spectrum-Thumbnail--size800 {
53-
--spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-800);
74+
--spectrum-thumbnail-size: var(--spectrum-thumbnail-size-800);
5475
}
5576

5677
.spectrum-Thumbnail--size900 {
57-
--spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-900);
78+
--spectrum-thumbnail-size: var(--spectrum-thumbnail-size-900);
5879
}
5980

6081
.spectrum-Thumbnail--size1000 {
61-
--spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-1000);
82+
--spectrum-thumbnail-size: var(--spectrum-thumbnail-size-1000);
6283
}
6384

6485
.spectrum-Thumbnail {
65-
--spectrum-thumbnail-size: var(--mod-thumbnail-size, var(--spectrum-thumbnail-sized-size));
66-
67-
/* @todo Refactor with --spectrum-thumbnail-border-color once gray rgb token is no longer necessary to workaround nested rgb color token value using rgba(). */
68-
--spectrum-thumbnail-border-color: var(--highcontrast-thumbnail-border-color, var(--mod-thumbnail-border-color, rgba(var(--spectrum-gray-800-rgb), var(--spectrum-thumbnail-border-opacity))));
69-
--spectrum-thumbnail-border-color-selected: var(--highcontrast-thumbnail-border-color-selected, var(--mod-thumbnail-border-color-selected, var(--spectrum-accent-color-800)));
70-
--spectrum-thumbnail-border-width: var(--mod-thumbnail-border-width, var(--spectrum-border-width-100));
71-
--spectrum-thumbnail-border-width-selected: var(--mod-thumbnail-border-width-selected, var(--spectrum-border-width-200));
72-
--spectrum-thumbnail-border-radius-default: var(--mod-thumbnail-border-radius, var(--spectrum-thumbnail-border-radius));
73-
74-
--spectrum-thumbnail-layer-border-color-inner: var(--highcontrast-thumbnail-layer-border-color-inner, var(--mod-thumbnail-layer-border-color-inner, var(--spectrum-white)));
75-
--spectrum-thumbnail-layer-border-color-outer: var(--highcontrast-thumbnail-layer-border-color-outer, var(--mod-thumbnail-layer-border-color-outer, var(--spectrum-gray-500)));
76-
--spectrum-thumbnail-layer-border-width-inner: var(--mod-thumbnail-layer-border-width-inner, var(--spectrum-border-width-400));
77-
--spectrum-thumbnail-layer-border-width-outer: var(--mod-thumbnail-layer-border-width-outer, var(--spectrum-border-width-100));
78-
79-
--spectrum-thumbnail-focus-indicator-thickness: var(--mod-thumbnail-focus-indicator-thickness, var(--spectrum-focus-indicator-thickness));
80-
--spectrum-thumbnail-focus-indicator-gap: var(--mod-thumbnail-focus-indicator-gap, var(--spectrum-focus-indicator-gap));
81-
--spectrum-thumbnail-focus-indicator-color: var(--highcontrast-thumbnail-focus-indicator-color, var(--mod-thumbnail-focus-indicator-color, var(--spectrum-focus-indicator-color)));
82-
8386
--spectrum-thumbnail-color-opacity-disabled: var(--spectrum-thumbnail-opacity-disabled);
8487

8588
position: relative;
8689
margin: 0;
8790
padding: 0;
8891
display: block;
8992

90-
inline-size: var(--spectrum-thumbnail-size);
91-
block-size: var(--spectrum-thumbnail-size);
93+
inline-size: var(--mod-thumbnail-size, var(--spectrum-thumbnail-size));
94+
block-size: var(--mod-thumbnail-size, var(--spectrum-thumbnail-size));
9295

93-
border-radius: var(--spectrum-thumbnail-border-radius-default);
96+
border-radius: var(--mod-thumbnail-border-radius, var(--spectrum-thumbnail-border-radius));
9497

98+
/* Friends should align to the top of the tabs */
99+
vertical-align: top;
95100
overflow: hidden;
96101
z-index: 0;
97102

@@ -101,8 +106,8 @@
101106
position: absolute;
102107
inline-size: 100%;
103108
block-size: 100%;
104-
border-radius: var(--spectrum-thumbnail-border-radius-default);
105-
box-shadow: inset 0 0 0 var(--spectrum-thumbnail-border-width) var(--spectrum-thumbnail-border-color);
109+
border-radius: var(--mod-thumbnail-border-radius, var(--spectrum-thumbnail-border-radius));
110+
box-shadow: inset 0 0 0 var(--mod-thumbnail-border-width, var(--spectrum-thumbnail-border-width)) var(--highcontrast-thumbnail-border-color, var(--mod-thumbnail-border-color, var(--spectrum-thumbnail-border-color)));
106111
}
107112

108113
&.is-disabled {
@@ -115,27 +120,24 @@
115120
&::after {
116121
content: "";
117122
border-style: solid;
118-
border-width: var(--spectrum-thumbnail-focus-indicator-thickness);
119-
border-color: var(--spectrum-thumbnail-focus-indicator-color);
120-
border-radius: var(--spectrum-thumbnail-border-radius-default);
123+
border-width: var(--mod-thumbnail-focus-indicator-thickness, var(--spectrum-thumbnail-focus-indicator-thickness));
124+
border-color: var(--highcontrast-thumbnail-focus-indicator-color, var(--mod-thumbnail-focus-indicator-color, var(--spectrum-thumbnail-focus-indicator-color)));
125+
border-radius: var(--mod-thumbnail-border-radius, var(--spectrum-thumbnail-border-radius));
121126
position: absolute;
122-
inset-inline-start: calc((var(--spectrum-thumbnail-focus-indicator-gap) + var(--spectrum-thumbnail-focus-indicator-thickness)) * -1);
123-
inset-inline-end: calc((var(--spectrum-thumbnail-focus-indicator-gap) + var(--spectrum-thumbnail-focus-indicator-thickness)) * -1);
124-
inset-block-end: calc((var(--spectrum-thumbnail-focus-indicator-gap) + var(--spectrum-thumbnail-focus-indicator-thickness)) * -1);
125-
inset-block-start: calc((var(--spectrum-thumbnail-focus-indicator-gap) + var(--spectrum-thumbnail-focus-indicator-thickness)) * -1);
127+
inset: calc((var(--mod-thumbnail-focus-indicator-gap, var(--spectrum-thumbnail-focus-indicator-gap)) + var(--mod-thumbnail-focus-indicator-thickness, var(--spectrum-thumbnail-focus-indicator-thickness))) * -1);
126128
}
127129

128130
.spectrum-Thumbnail-image-wrapper {
129131
overflow: hidden;
130-
border-radius: var(--spectrum-thumbnail-border-radius-default);
132+
border-radius: var(--mod-thumbnail-border-radius, var(--spectrum-thumbnail-border-radius));
131133
}
132134
}
133135
}
134136

135137
.spectrum-Thumbnail-layer {
136138
border-style: solid;
137-
border-width: var(--spectrum-thumbnail-layer-border-width-outer);
138-
border-color: var(--spectrum-thumbnail-layer-border-color-outer);
139+
border-width: var(--mod-thumbnail-layer-border-width-outer, var(--spectrum-thumbnail-layer-border-width-outer));
140+
border-color: var(--highcontrast-thumbnail-layer-border-color-outer, var(--mod-thumbnail-layer-border-color-outer, var(--spectrum-thumbnail-layer-border-color-outer)));
139141
box-sizing: border-box;
140142

141143
display: flex;
@@ -148,9 +150,9 @@
148150

149151
&.is-selected {
150152
outline-style: solid;
151-
outline-color: var(--spectrum-thumbnail-border-color-selected);
152-
outline-width: var(--spectrum-thumbnail-border-width-selected);
153-
outline-offset: calc(var(--spectrum-thumbnail-border-width-selected) - var(--spectrum-thumbnail-layer-border-width-inner));
153+
outline-color: var(--highcontrast-thumbnail-border-color-selected, var(--mod-thumbnail-border-color-selected, var(--spectrum-thumbnail-border-color-selected)));
154+
outline-width: var(--mod-thumbnail-border-width-selected, var(--spectrum-thumbnail-border-width-selected));
155+
outline-offset: calc(var(--mod-thumbnail-border-width-selected, var(--spectrum-thumbnail-border-width-selected)) - var(--mod-thumbnail-layer-border-width-inner, var(--spectrum-thumbnail-layer-border-width-inner)));
154156
}
155157
}
156158

@@ -159,11 +161,11 @@
159161
align-items: center;
160162
justify-content: center;
161163

162-
inline-size: calc(var(--spectrum-thumbnail-size) - var(--spectrum-thumbnail-layer-border-width-inner) * 2);
163-
block-size: calc(var(--spectrum-thumbnail-size) - var(--spectrum-thumbnail-layer-border-width-inner) * 2);
164+
inline-size: calc(var(--spectrum-thumbnail-size) - ((var(--mod-thumbnail-layer-border-width-inner, var(--spectrum-thumbnail-layer-border-width-inner)))) * 2);
165+
block-size: calc(var(--spectrum-thumbnail-size) - ((var(--mod-thumbnail-layer-border-width-inner, var(--spectrum-thumbnail-layer-border-width-inner)))) * 2);
164166
outline-style: solid;
165-
outline-color: var(--spectrum-thumbnail-layer-border-color-inner);
166-
outline-width: calc(var(--spectrum-thumbnail-layer-border-width-inner) - var(--spectrum-thumbnail-layer-border-width-outer));
167+
outline-color: var(--highcontrast-thumbnail-layer-border-color-inner, var(--mod-thumbnail-layer-border-color-inner, var(--spectrum-thumbnail-layer-border-color-inner)));
168+
outline-width: calc(var(--mod-thumbnail-layer-border-width-inner, var(--spectrum-thumbnail-layer-border-width-inner)) - var(--mod-thumbnail-layer-border-width-outer, var(--spectrum-thumbnail-layer-border-width-outer)));
167169
}
168170

169171
.spectrum-Thumbnail-image-wrapper {
@@ -176,8 +178,8 @@
176178

177179
.spectrum-Thumbnail-image {
178180
position: relative;
179-
max-inline-size: 100%;
180181
max-block-size: 100%;
182+
max-inline-size: 100%;
181183
z-index: 1;
182184
}
183185

@@ -201,7 +203,7 @@
201203
inline-size: 100%;
202204
background-size: cover;
203205
background-position: center center;
204-
border-radius: var(--spectrum-thumbnail-border-radius-default);
206+
border-radius: var(--mod-thumbnail-border-radius, var(--spectrum-thumbnail-border-radius));
205207
}
206208

207209
/* Windows High Contrast Mode */

‎components/thumbnail/stories/template.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -121,6 +121,9 @@ export const Template = ({
121121
${OpacityCheckerboard({
122122
rootClass: backgroundColor ? `${rootClass}-image-wrapper` : undefined,
123123
customClasses: isLayer ? [`${rootClass}-layer-inner`] : !backgroundColor ? [`${rootClass}-image-wrapper`] : [],
124+
customStyles: {
125+
"--spectrum-opacity-checkerboard-size": "var(--spectrum-thumbnail-opacity-checkerboard-square-size)"
126+
},
124127
content: image ? [image] : [],
125128
}, context)}
126129
</div>

0 commit comments

Comments
 (0)