Skip to content

Commit 9f9c0bd

Browse files
castastrophecastastrophe
authored
refactor(site): tokens system (#2561)
* refactor(site): migrate new tokens
1 parent 1db043e commit 9f9c0bd

File tree

5 files changed

+680
-736
lines changed

5 files changed

+680
-736
lines changed

‎components/site/component.css

Lines changed: 369 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,369 @@
1+
/*!
2+
Copyright 2023 Adobe. All rights reserved.
3+
This file is licensed to you under the Apache License, Version 2.0 (the "License");
4+
you may not use this file except in compliance with the License. You may obtain a copy
5+
of the License at http://www.apache.org/licenses/LICENSE-2.0
6+
7+
Unless required by applicable law or agreed to in writing, software distributed under
8+
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
9+
OF ANY KIND, either express or implied. See the License for the specific language
10+
governing permissions and limitations under the License.
11+
*/
12+
13+
/* CSS Component */
14+
.spectrum-CSSComponent {
15+
box-sizing: border-box;
16+
inline-size: min(1080px, 100%);
17+
margin: var(--spectrum-spacing-600) auto;
18+
padding: 0 56px;
19+
}
20+
21+
.spectrum-CSSComponent-heading {
22+
display: flex;
23+
flex-direction: row;
24+
align-items: center;
25+
justify-content: space-between;
26+
27+
margin-block-end: var(--spectrum-spacing-600);
28+
}
29+
30+
.spectrum-CSSComponent-link {
31+
display: flex;
32+
align-items: center;
33+
34+
color: inherit;
35+
text-decoration: none;
36+
37+
outline: none;
38+
39+
&:focus-visible,
40+
&:hover {
41+
text-decoration: underline;
42+
}
43+
}
44+
45+
.spectrum-CSSComponent-statusContainer {
46+
display: flex;
47+
flex-flow: row nowrap;
48+
flex-grow: 1;
49+
gap: 80px;
50+
align-self: center;
51+
52+
> * {
53+
flex-basis: min(370px, 50%);
54+
}
55+
}
56+
57+
.spectrum-CSSComponent-detailsTable {
58+
border-spacing: 0;
59+
margin-block-start: var(--spectrum-spacing-600);
60+
margin-block-end: 36px;
61+
62+
& th {
63+
block-size: var(--spectrum-spacing-300);
64+
padding-inline-end: var(--spectrum-spacing-400);
65+
font-weight: var(--spectrum-regular-font-weight);
66+
text-align: start;
67+
}
68+
}
69+
70+
.spectrum-CSSComponent-sectionHeading {
71+
margin-block-start: var(--spectrum-spacing-700);
72+
margin-block-end: var(--spectrum-spacing-500);
73+
}
74+
75+
.spectrum-CSSExample-status,
76+
.spectrum-CSSComponent-status {
77+
min-block-size: 0 !important;
78+
padding: 0 !important;
79+
}
80+
81+
.spectrum-CSSComponent-status::before {
82+
margin-inline-start: 0 !important;
83+
}
84+
85+
.spectrum-CSSExample-status {
86+
margin-inline-start: var(--spectrum-spacing-200);
87+
}
88+
89+
.spectrum-CSSComponent-version {
90+
flex-grow: 1;
91+
text-align: end;
92+
}
93+
94+
.spectrum-CSSComponent-description {
95+
margin-block-start: var(--spectrum-spacing-400);
96+
margin-block-end: var(--spectrum-spacing-700);
97+
}
98+
99+
/* cards */
100+
.spectrum-CSSComponent-resources {
101+
display: flex;
102+
flex-direction: row;
103+
flex-wrap: wrap;
104+
margin-block-end: var(--spectrum-spacing-500);
105+
106+
& .spectrum-Card {
107+
margin-block-end: var(--spectrum-spacing-300);
108+
margin-inline-end: var(--spectrum-spacing-300);
109+
}
110+
}
111+
112+
.spectrum-CSSComponent-resource--adobe,
113+
.spectrum-CSSComponent-resources
114+
a[href*="spectrum.adobe.com"]
115+
.spectrum-Card-preview {
116+
color: rgb(250, 15, 0);
117+
background-color: var(--spectrum-gray-100);
118+
}
119+
120+
.spectrum-CSSComponent-resource--github,
121+
.spectrum-CSSComponent-resources a[href*="github.com"] .spectrum-Card-preview {
122+
color: var(--spectrum-black);
123+
background-color: var(--spectrum-transparent-black-200);
124+
}
125+
126+
.spectrum-CSSComponent-resource--npm,
127+
.spectrum-CSSComponent-resources a[href*="npmjs.com"] .spectrum-Card-preview {
128+
background-color: rgba(203, 56, 55, 10%);
129+
}
130+
131+
.spectrum-CSSComponent-cardImage {
132+
text-decoration: none;
133+
}
134+
135+
.spectrum-CSSComponent-switcher {
136+
display: flex;
137+
flex-direction: row;
138+
flex-wrap: wrap;
139+
gap: var(--spectrum-spacing-500);
140+
justify-content: flex-end;
141+
}
142+
143+
.spectrum-CSS-switcherContainer {
144+
margin-inline-start: var(--spectrum-spacing-300);
145+
white-space: nowrap;
146+
}
147+
148+
/* CSS Example */
149+
.spectrum-CSSExample {
150+
margin-block-end: 64px;
151+
}
152+
153+
.spectrum-CSSExample-container {
154+
position: relative;
155+
display: flex;
156+
flex-direction: column;
157+
border-radius: var(--spectrum-corner-radius-100);
158+
}
159+
160+
.spectrum-CSSExample-heading {
161+
display: flex;
162+
flex-direction: row;
163+
align-items: center;
164+
margin-block-end: var(--spectrum-spacing-100) !important;
165+
}
166+
167+
.spectrum-CSSExample-example,
168+
.spectrum-CSSExample-markup {
169+
box-sizing: border-box;
170+
}
171+
172+
:root {
173+
--spectrum-docs-static-white-background-color: var(--spectrum-seafoam-900);
174+
--spectrum-docs-static-black-background-color: var(--spectrum-seafoam-100);
175+
}
176+
177+
.spectrum-CSSExample-example {
178+
flex: 1 0 auto;
179+
min-block-size: 0;
180+
padding: var(--spectrum-spacing-500) var(--spectrum-spacing-600);
181+
border-radius: var(--spectrum-corner-radius-100)
182+
var(--spectrum-corner-radius-100) 0 0;
183+
184+
&:has(> .spectrum-CSSExample-example-staticWhite) {
185+
background-color: var(--spectrum-docs-static-white-background-color);
186+
border-color: var(--spectrum-docs-static-white-background-color);
187+
}
188+
189+
&:has(> .spectrum-CSSExample-example-staticBlack) {
190+
background-color: var(--spectrum-docs-static-black-background-color);
191+
border-color: var(--spectrum-docs-static-black-background-color);
192+
}
193+
}
194+
195+
.spectrum-CSSExample-markup {
196+
position: relative;
197+
198+
overflow: hidden;
199+
200+
max-inline-size: 100%;
201+
max-block-size: 192px;
202+
padding: 10px 18px;
203+
204+
border-radius: 0 0 var(--spectrum-corner-radius-100) var(--spectrum-corner-radius-100);
205+
206+
&.is-open {
207+
max-block-size: 100%;
208+
padding-block-end: var(--spectrum-spacing-700);
209+
210+
& .spectrum-CSSExample-markupToggle::before {
211+
display: none;
212+
}
213+
}
214+
}
215+
216+
.spectrum-CSSExample-markupToggle + pre {
217+
padding-block-end: var(--spectrum-spacing-100);
218+
}
219+
220+
.spectrum-CSSExample-example--spacious {
221+
position: relative;
222+
block-size: 150px;
223+
}
224+
225+
.spectrum-CSSExample-example--overlay {
226+
position: relative;
227+
min-block-size: var(--spectrum-spacing-800);
228+
}
229+
230+
.spectrum-CSSExample-dialog {
231+
position: relative !important;
232+
z-index: 1 !important;
233+
inset-block-start: 0;
234+
inset-inline-start: 0;
235+
transform: none !important;
236+
237+
inline-size: auto !important;
238+
block-size: auto !important;
239+
margin-inline-start: auto;
240+
margin-inline-end: auto;
241+
242+
transition: none;
243+
}
244+
245+
.spectrum-Examples,
246+
.spectrum-Examples-itemGroup {
247+
display: flex;
248+
flex-direction: row;
249+
flex-wrap: wrap;
250+
gap: var(--spectrum-spacing-100);
251+
justify-content: space-between;
252+
}
253+
254+
.spectrum-Examples--vertical {
255+
flex-direction: column;
256+
}
257+
258+
.spectrum-Examples-item .spectrum-Examples-itemHeading {
259+
margin-block-end: var(--spectrum-spacing-100);
260+
}
261+
262+
.spectrum-Button.spectrum-CSSExample-overlayShowButton {
263+
position: absolute;
264+
inset-block-start: 50%;
265+
inset-inline-start: 50%;
266+
transform: translate(-50%, -50%);
267+
}
268+
269+
.spectrum-CSSExample-markup pre code {
270+
white-space: pre-wrap;
271+
}
272+
273+
.spectrum-CSSExample-markupToggle {
274+
position: absolute;
275+
z-index: 0;
276+
inset-block-end: 0;
277+
inset-inline-start: 0;
278+
inset-inline-end: 0;
279+
280+
box-sizing: border-box;
281+
padding: var(--spectrum-spacing-400);
282+
283+
font-size: var(--spectrum-font-size-50);
284+
text-align: start;
285+
}
286+
287+
.spectrum-CenteredImage {
288+
display: block;
289+
inline-size: max(720px, 100%);
290+
margin: auto;
291+
}
292+
293+
.spectrum-CodeBlock {
294+
margin: var(--spectrum-spacing-200) 0;
295+
padding: var(--spectrum-spacing-100) var(--spectrum-spacing-200);
296+
297+
border-style: solid;
298+
border-width: var(--spectrum-border-width-100);
299+
border-radius: var(--spectrum-spacing-50);
300+
}
301+
302+
/* CSS Example */
303+
.spectrum-CSSExample-example {
304+
background-color: var(
305+
--spectrum-background-base-color,
306+
var(--spectrum-gray-50)
307+
);
308+
}
309+
310+
.spectrum-CSSExample-markup {
311+
background-color: var(--spectrum-gray-75);
312+
border-block-start: 1px solid var(--spectrum-gray-100);
313+
}
314+
315+
.spectrum-CSSExample-markupToggle {
316+
z-index: 1;
317+
background-color: var(--spectrum-gray-75);
318+
}
319+
320+
.spectrum-CSSExample-markup.is-open .spectrum-CSSExample-markupToggle {
321+
background-color: transparent;
322+
}
323+
324+
.spectrum-CSSExample-example--overlay {
325+
color: var(--spectrum-transparent-black-400);
326+
background-color: var(--spectrum-transparent-black-400);
327+
}
328+
329+
.spectrum-CSSExample-oldAPI {
330+
color: var(--spectrum-negative-color-800);
331+
}
332+
333+
.spectrum-CodeBlock {
334+
background-color: var(--spectrum-gray-75);
335+
border-color: var(--spectrum-gray-400);
336+
}
337+
338+
@media screen and (width <= 960px) {
339+
.spectrum-CSSComponent {
340+
margin-block: var(--spectrum-spacing-100);
341+
margin-inline: auto;
342+
padding-inline: 0 var(--spectrum-spacing-600);
343+
}
344+
345+
.spectrum-CSSComponent-description {
346+
margin-block-end: var(--spectrum-spacing-200);
347+
}
348+
349+
.spectrum-CSSExample {
350+
margin-block-end: var(--spectrum-spacing-200);
351+
}
352+
353+
.spectrum-CSSExample-example {
354+
padding: var(--spectrum-spacing-200);
355+
}
356+
357+
.spectrum-CSSComponent-header {
358+
margin-block-end: var(--spectrum-spacing-200);
359+
}
360+
361+
.spectrum-CSSComponent-statusContainer,
362+
.spectrum-CSSComponent-version {
363+
display: none;
364+
}
365+
366+
.spectrum-CSSComponent-title {
367+
font-size: var(--spectrum-font-size-500);
368+
}
369+
}

‎components/site/gulpfile.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
module.exports = require("@spectrum-css/component-builder");
1+
module.exports = require("@spectrum-css/component-builder-simple");

0 commit comments

Comments
 (0)