Skip to content

Commit 9e64ee3

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 fd38d4a commit 9e64ee3

File tree

4 files changed

+69
-59
lines changed

4 files changed

+69
-59
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: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -49,10 +49,10 @@
4949
"--spectrum-thumbnail-border-color-selected",
5050
"--spectrum-thumbnail-border-opacity",
5151
"--spectrum-thumbnail-border-radius",
52-
"--spectrum-thumbnail-border-radius-default",
5352
"--spectrum-thumbnail-border-width",
5453
"--spectrum-thumbnail-border-width-selected",
5554
"--spectrum-thumbnail-color-opacity-disabled",
55+
"--spectrum-thumbnail-corner-radius",
5656
"--spectrum-thumbnail-focus-indicator-color",
5757
"--spectrum-thumbnail-focus-indicator-gap",
5858
"--spectrum-thumbnail-focus-indicator-thickness",
@@ -73,8 +73,7 @@
7373
"--spectrum-thumbnail-size-700",
7474
"--spectrum-thumbnail-size-75",
7575
"--spectrum-thumbnail-size-800",
76-
"--spectrum-thumbnail-size-900",
77-
"--spectrum-thumbnail-sized-size"
76+
"--spectrum-thumbnail-size-900"
7877
],
7978
"global": [
8079
"--spectrum-accent-color-800",

‎components/thumbnail/index.css

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

14-
.spectrum-Thumbnail,
15-
.spectrum-Thumbnail--size500 {
16-
--spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-500);
14+
.spectrum-Thumbnail {
15+
--spectrum-thumbnail-size: var(--spectrum-thumbnail-size-500);
16+
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);
1735
}
1836

1937
.spectrum-Thumbnail--size50 {
20-
--spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-50);
38+
--spectrum-thumbnail-size: var(--spectrum-thumbnail-size-50);
2139
}
2240

2341
.spectrum-Thumbnail--size75 {
24-
--spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-75);
42+
--spectrum-thumbnail-size: var(--spectrum-thumbnail-size-75);
2543
}
2644

2745
.spectrum-Thumbnail--size100 {
28-
--spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-100);
46+
--spectrum-thumbnail-size: var(--spectrum-thumbnail-size-100);
2947
}
3048

3149
.spectrum-Thumbnail--size200 {
32-
--spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-200);
50+
--spectrum-thumbnail-size: var(--spectrum-thumbnail-size-200);
3351
}
3452

3553
.spectrum-Thumbnail--size300 {
36-
--spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-300);
54+
--spectrum-thumbnail-size: var(--spectrum-thumbnail-size-300);
3755
}
3856

3957
.spectrum-Thumbnail--size400 {
40-
--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);
4163
}
4264

4365
.spectrum-Thumbnail--size600 {
44-
--spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-600);
66+
--spectrum-thumbnail-size: var(--spectrum-thumbnail-size-600);
4567
}
4668

4769
.spectrum-Thumbnail--size700 {
48-
--spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-700);
70+
--spectrum-thumbnail-size: var(--spectrum-thumbnail-size-700);
4971
}
5072

5173
.spectrum-Thumbnail--size800 {
52-
--spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-800);
74+
--spectrum-thumbnail-size: var(--spectrum-thumbnail-size-800);
5375
}
5476

5577
.spectrum-Thumbnail--size900 {
56-
--spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-900);
78+
--spectrum-thumbnail-size: var(--spectrum-thumbnail-size-900);
5779
}
5880

5981
.spectrum-Thumbnail--size1000 {
60-
--spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-1000);
82+
--spectrum-thumbnail-size: var(--spectrum-thumbnail-size-1000);
6183
}
6284

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

8488
position: relative;
8589
margin: 0;
8690
padding: 0;
8791
display: block;
8892

89-
inline-size: var(--spectrum-thumbnail-size);
90-
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));
9195

92-
border-radius: var(--spectrum-thumbnail-border-radius-default);
96+
border-radius: var(--mod-thumbnail-border-radius, var(--spectrum-thumbnail-border-radius));
9397

98+
/* Friends should align to the top of the tabs */
99+
vertical-align: top;
94100
overflow: hidden;
95101
z-index: 0;
96102

@@ -100,8 +106,8 @@
100106
position: absolute;
101107
inline-size: 100%;
102108
block-size: 100%;
103-
border-radius: var(--spectrum-thumbnail-border-radius-default);
104-
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)));
105111
}
106112

107113
&.is-disabled {
@@ -114,27 +120,24 @@
114120
&::after {
115121
content: "";
116122
border-style: solid;
117-
border-width: var(--spectrum-thumbnail-focus-indicator-thickness);
118-
border-color: var(--spectrum-thumbnail-focus-indicator-color);
119-
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));
120126
position: absolute;
121-
inset-inline-start: calc((var(--spectrum-thumbnail-focus-indicator-gap) + var(--spectrum-thumbnail-focus-indicator-thickness)) * -1);
122-
inset-inline-end: calc((var(--spectrum-thumbnail-focus-indicator-gap) + var(--spectrum-thumbnail-focus-indicator-thickness)) * -1);
123-
inset-block-end: calc((var(--spectrum-thumbnail-focus-indicator-gap) + var(--spectrum-thumbnail-focus-indicator-thickness)) * -1);
124-
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);
125128
}
126129

127130
.spectrum-Thumbnail-image-wrapper {
128131
overflow: hidden;
129-
border-radius: var(--spectrum-thumbnail-border-radius-default);
132+
border-radius: var(--mod-thumbnail-border-radius, var(--spectrum-thumbnail-border-radius));
130133
}
131134
}
132135
}
133136

134137
.spectrum-Thumbnail-layer {
135138
border-style: solid;
136-
border-width: var(--spectrum-thumbnail-layer-border-width-outer);
137-
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)));
138141
box-sizing: border-box;
139142

140143
display: flex;
@@ -147,9 +150,9 @@
147150

148151
&.is-selected {
149152
outline-style: solid;
150-
outline-color: var(--spectrum-thumbnail-border-color-selected);
151-
outline-width: var(--spectrum-thumbnail-border-width-selected);
152-
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)));
153156
}
154157
}
155158

@@ -158,11 +161,11 @@
158161
align-items: center;
159162
justify-content: center;
160163

161-
inline-size: calc(var(--spectrum-thumbnail-size) - var(--spectrum-thumbnail-layer-border-width-inner) * 2);
162-
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);
163166
outline-style: solid;
164-
outline-color: var(--spectrum-thumbnail-layer-border-color-inner);
165-
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)));
166169
}
167170

168171
.spectrum-Thumbnail-image-wrapper {
@@ -175,8 +178,8 @@
175178

176179
.spectrum-Thumbnail-image {
177180
position: relative;
178-
max-inline-size: 100%;
179181
max-block-size: 100%;
182+
max-inline-size: 100%;
180183
z-index: 1;
181184
}
182185

@@ -200,7 +203,7 @@
200203
inline-size: 100%;
201204
background-size: cover;
202205
background-position: center center;
203-
border-radius: var(--spectrum-thumbnail-border-radius-default);
206+
border-radius: var(--mod-thumbnail-border-radius, var(--spectrum-thumbnail-border-radius));
204207
}
205208

206209
/* 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)