Skip to content

Commit cf9bc96

Browse files
Rich-HarrisRich-Harris
committed
modularise tokens
1 parent ae915f0 commit cf9bc96

File tree

4 files changed

+209
-198
lines changed

4 files changed

+209
-198
lines changed

‎packages/site-kit/src/lib/styles/tokens.css‎

Lines changed: 3 additions & 198 deletions
Original file line numberDiff line numberDiff line change
@@ -1,204 +1,9 @@
1-
/*
2-
3-
!IMPORTANT: The tokens for light and dark mode are duplicated, if you change a token for dark mode,
4-
!you should change that for the other dark mode too
5-
6-
*/
1+
@import './tokens/colours.css';
2+
@import './tokens/dimensions.css';
3+
@import './tokens/typography.css';
74

85
:root {
9-
color-scheme: light;
10-
11-
--sk-back-h: 206;
12-
--sk-selection-color: hsla(204, 100%, 63%, 0.3);
13-
14-
/* dimensions */
15-
--sk-nav-height: 6rem;
16-
--sk-secondary-nav-height: 5rem;
17-
--sk-page-padding-top: 6rem;
18-
--sk-page-padding-bottom: 8rem;
19-
--sk-page-padding-side: 1.6rem;
20-
--sk-thick-border-width: 0.3rem;
21-
--sk-border-radius: 0.4rem;
22-
--sk-border-radius-inner: 0.2rem;
23-
--sk-page-content-width: 76rem;
24-
--sk-banner-height: 0px;
25-
--sk-pane-controls-height: 4.2rem;
26-
27-
/* typography (prefer `font: --sk-font-{x}` over `font-family` and `font-size` rules */
28-
--sk-font-family-ui: 'Fira Sans', -apple-system, sans-serif;
29-
--sk-font-family-body: Georgia, serif;
30-
--sk-font-family-heading: 'DM Serif Display', Georgia, serif;
31-
--sk-font-family-mono: 'Fira Mono', monospace;
32-
33-
--sk-font-size-h1: 3.6rem;
34-
--sk-font-size-h2: 3rem;
35-
--sk-font-size-h3: 2.4rem;
36-
--sk-font-size-body: 1.8rem;
37-
--sk-font-size-body-small: 1.6rem;
38-
--sk-font-size-ui-small: 1.3rem;
39-
--sk-font-size-ui-medium: 1.6rem;
40-
--sk-font-size-ui-large: 3rem;
41-
--sk-font-size-mono: 1.4rem;
42-
43-
/* doing it this way (rather than just `1.5`) means it has a unit, and can be used elsewhere */
44-
--sk-line-height-body: calc(1.5 * var(--sk-font-size-body));
45-
--sk-line-height-body-small: calc(1.5 * var(--sk-font-size-body-small));
46-
47-
--sk-font-h1: 500 var(--sk-font-size-h1) / 1.2 var(--sk-font-family-heading);
48-
--sk-font-h2: 500 var(--sk-font-size-h2) / 1.2 var(--sk-font-family-heading);
49-
--sk-font-h3: 500 var(--sk-font-size-h3) / 1.2 var(--sk-font-family-heading);
50-
--sk-font-body: 400 var(--sk-font-size-body) / var(--sk-line-height-body)
51-
var(--sk-font-family-body);
52-
--sk-font-body-small: 400 var(--sk-font-size-body-small) / var(--sk-line-height-body)
53-
var(--sk-font-family-body);
54-
--sk-font-ui-small: 400 var(--sk-font-size-ui-small) / 1.5 var(--sk-font-family-ui);
55-
--sk-font-ui-medium: 400 var(--sk-font-size-ui-medium) / 1.5 var(--sk-font-family-ui);
56-
--sk-font-ui-large: 400 var(--sk-font-size-ui-large) / 1.5 var(--sk-font-family-ui);
57-
--sk-font-mono: 400 var(--sk-font-size-mono) / 1.7 var(--sk-font-family-mono);
58-
59-
/* Base colors */
60-
--sk-theme-1: hsl(12, 93%, 43%);
61-
62-
--sk-back-1: hsl(0, 0%, 100%);
63-
--sk-back-2: hsl(0, 0%, 100%);
64-
--sk-back-3: hsl(0, 0%, 99%);
65-
--sk-back-4: hsl(0, 0%, 95%);
66-
--sk-back-5: hsl(0, 0%, 92%);
67-
--sk-back-6: hsl(0, 0%, 86%);
68-
69-
--sk-text-1: hsl(0, 0%, 5%);
70-
--sk-text-2: hsl(0, 0%, 12%);
71-
--sk-text-3: hsl(0, 0%, 27%);
72-
--sk-text-4: hsl(0, 0%, 45%);
73-
--sk-scrollbar: rgba(0, 0, 0, 0.3);
74-
--sk-shadow: drop-shadow(0px 0px 14px rgba(0, 0, 0, 0.1));
75-
76-
/* same in light mode, different in dark mode */
77-
--sk-theme-1-variant: var(--sk-theme-1);
78-
79-
--sk-code-base: var(--sk-text-2);
80-
--sk-code-comment: var(--sk-text-4);
81-
--sk-code-keyword: hsl(204, 100%, 38%);
82-
--sk-code-function: var(--sk-theme-1);
83-
--sk-code-string: hsl(30, 100%, 30%);
84-
--sk-code-number: hsl(120, 100%, 25%);
85-
--sk-code-template-string: hsl(2, 80%, 47%);
86-
--sk-code-tags: var(--sk-code-function);
87-
--sk-code-important: var(--sk-code-string);
88-
--sk-code-diff-base: hsla(0, 0%, 0%, 0.6);
89-
--sk-code-diff-inserted: hsl(120, 100%, 25%);
90-
--sk-code-diff-removed: hsl(2, 80%, 47%);
91-
92-
--shiki-color-text: var(--sk-code-base);
93-
--shiki-token-constant: var(--sk-code-base);
94-
--shiki-token-string: var(--sk-code-string);
95-
--shiki-token-comment: var(--sk-code-comment);
96-
--shiki-token-keyword: var(--sk-code-keyword);
97-
--shiki-token-parameter: var(--sk-code-base);
98-
--shiki-token-function: var(--sk-code-function);
99-
--shiki-token-string-expression: var(--sk-code-string);
100-
--shiki-token-punctuation: var(--sk-code-base);
101-
--shiki-token-link: var(--sk-code-keyword);
102-
103-
--sk-text-warning-hsl: 32, 95%, 44%;
104-
--sk-text-warning: hsl(var(--sk-text-warning-hsl));
105-
106-
/* used for coloured backgrounds e.g. blockquotes */
107-
--sk-back-translucent: hsla(0, 0%, 0%, 0.1);
108-
--sk-text-translucent: hsla(0, 0%, 0%, 0.7);
109-
110-
/* overrides */
111-
--shiki-color-background: var(--sk-back-2);
112-
113-
/* raised buttons */
114-
--sk-raised-color: var(--sk-back-4) var(--sk-back-5) var(--sk-back-5) var(--sk-back-4);
115-
--sk-raised-width: 1px 2px 2px 1px;
116-
--sk-raised-hover-color: var(--sk-back-5) var(--sk-back-6) var(--sk-back-6) var(--sk-back-5);
117-
--sk-raised-active-color: var(--sk-back-6) var(--sk-back-5) var(--sk-back-5) var(--sk-back-6);
118-
--sk-raised-active-width: 2px 1px 1px 2px;
119-
1206
/* this is necessary for elements with filters on safari, because safari is a uniquely awful piece of software.
1217
the 0.01 prevents Vite from optimising it to `translate(0, 0)`, which doesn't fix anything */
1228
--safari-fix: translate3d(0, 0, 0.01);
123-
124-
/* set at 1.75x so if you zoom +/-10% from common settings it won't switch your font */
125-
@media (min-resolution: 1.75x) {
126-
--sk-font-family-body: 'EB Garamond', Georgia, serif;
127-
--sk-font-size-body: 2.2rem;
128-
--sk-font-size-body-small: 2rem;
129-
}
130-
131-
&.font-boring {
132-
--sk-font-family-body: 'Atkinson Hyperlegible', sans-serif;
133-
--sk-font-size-body: 1.9rem;
134-
--sk-font-size-body-small: 1.7rem;
135-
136-
p code {
137-
font-size: 0.75em;
138-
}
139-
}
140-
141-
&.dark {
142-
color-scheme: dark;
143-
-webkit-font-smoothing: antialiased;
144-
145-
--sk-back-hue: 220;
146-
147-
--sk-back-1: hsl(var(--sk-back-hue), 15%, 8%);
148-
--sk-back-2: hsl(var(--sk-back-hue), 15%, 15%);
149-
--sk-back-3: hsl(var(--sk-back-hue), 15%, 12%);
150-
--sk-back-4: hsl(var(--sk-back-hue), 15%, 22%);
151-
--sk-back-5: hsl(var(--sk-back-hue), 15%, 25%);
152-
--sk-back-6: hsl(var(--sk-back-hue), 15%, 32%);
153-
--sk-back-translucent: hsla(0, 0%, 100%, 0.1);
154-
--sk-theme-1: hsl(12, 94%, 62%);
155-
--sk-text-1: hsl(var(--sk-back-hue), 10%, 90%);
156-
--sk-text-2: hsl(var(--sk-back-hue), 10%, 80%);
157-
--sk-text-3: hsl(var(--sk-back-hue), 10%, 65%);
158-
--sk-text-4: hsl(var(--sk-back-hue), 10%, 45%);
159-
--sk-text-translucent: hsla(0, 0%, 100%, 0.9);
160-
--sk-scrollbar: rgba(255, 255, 255, 0.3);
161-
--sk-shadow: drop-shadow(1px 2px 16px rgba(0, 0, 0, 0.5));
162-
163-
--sk-theme-1-variant: hsl(15, 100%, 35%);
164-
165-
--sk-text-warning-hsl: 32, 67%, 56%;
166-
167-
--sk-code-base: hsl(45, 7%, 75%);
168-
--sk-code-comment: hsl(0, 0%, 55%);
169-
--sk-code-keyword: hsl(204, 88%, 65%);
170-
--sk-code-function: hsl(19, 67%, 75%);
171-
--sk-code-string: hsl(41, 37%, 68%);
172-
--sk-code-number: hsl(120, 100%, 25%);
173-
--sk-code-template-string: hsl(2, 80%, 47%);
174-
--sk-code-tags: var(--sk-code-function);
175-
--sk-code-important: var(--sk-code-string);
176-
177-
--sk-code-diff-base: hsla(0, 0%, 100%, 0.5);
178-
--sk-code-diff-inserted: hsl(120, 46%, 48%);
179-
--sk-code-diff-removed: hsl(2, 64%, 70%);
180-
181-
/* overrides */
182-
--shiki-color-background: var(--sk-back-3);
183-
184-
/* raised buttons */
185-
--sk-raised-color: var(--sk-back-5) var(--sk-back-3) var(--sk-back-3) var(--sk-back-5);
186-
--sk-raised-hover-color: var(--sk-back-6) var(--sk-back-3) var(--sk-back-3) var(--sk-back-6);
187-
--sk-raised-active-color: var(--sk-back-3) var(--sk-back-6) var(--sk-back-6) var(--sk-back-3);
188-
}
189-
}
190-
191-
@media screen and (min-width: 480px) {
192-
:root {
193-
--sk-page-padding-side: 3.2rem;
194-
}
195-
}
196-
197-
@media screen and (min-width: 800px) {
198-
:root {
199-
--sk-font-size-h1: 5.4rem;
200-
--sk-page-padding-top: 8rem;
201-
--sk-page-padding-side: 4.8rem;
202-
--sk-secondary-nav-height: 6rem;
203-
}
2049
}

‎packages/site-kit/src/lib/styles/tokens/colours.css‎

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
/*
2+
3+
!IMPORTANT: The tokens for light and dark mode are duplicated, if you change a token for dark mode,
4+
!you should change that for the other dark mode too
5+
6+
*/
7+
8+
:root {
9+
color-scheme: light;
10+
11+
--sk-back-h: 206;
12+
--sk-selection-color: hsla(204, 100%, 63%, 0.3);
13+
14+
/* Base colors */
15+
--sk-theme-1: hsl(12, 93%, 43%);
16+
17+
--sk-back-1: hsl(0, 0%, 100%);
18+
--sk-back-2: hsl(0, 0%, 100%);
19+
--sk-back-3: hsl(0, 0%, 99%);
20+
--sk-back-4: hsl(0, 0%, 95%);
21+
--sk-back-5: hsl(0, 0%, 92%);
22+
--sk-back-6: hsl(0, 0%, 86%);
23+
24+
--sk-text-1: hsl(0, 0%, 5%);
25+
--sk-text-2: hsl(0, 0%, 12%);
26+
--sk-text-3: hsl(0, 0%, 27%);
27+
--sk-text-4: hsl(0, 0%, 45%);
28+
--sk-scrollbar: rgba(0, 0, 0, 0.3);
29+
--sk-shadow: drop-shadow(0px 0px 14px rgba(0, 0, 0, 0.1));
30+
31+
/* same in light mode, different in dark mode */
32+
--sk-theme-1-variant: var(--sk-theme-1);
33+
34+
--sk-code-base: var(--sk-text-2);
35+
--sk-code-comment: var(--sk-text-4);
36+
--sk-code-keyword: hsl(204, 100%, 38%);
37+
--sk-code-function: var(--sk-theme-1);
38+
--sk-code-string: hsl(30, 100%, 30%);
39+
--sk-code-number: hsl(120, 100%, 25%);
40+
--sk-code-template-string: hsl(2, 80%, 47%);
41+
--sk-code-tags: var(--sk-code-function);
42+
--sk-code-important: var(--sk-code-string);
43+
--sk-code-diff-base: hsla(0, 0%, 0%, 0.6);
44+
--sk-code-diff-inserted: hsl(120, 100%, 25%);
45+
--sk-code-diff-removed: hsl(2, 80%, 47%);
46+
47+
--shiki-color-text: var(--sk-code-base);
48+
--shiki-token-constant: var(--sk-code-base);
49+
--shiki-token-string: var(--sk-code-string);
50+
--shiki-token-comment: var(--sk-code-comment);
51+
--shiki-token-keyword: var(--sk-code-keyword);
52+
--shiki-token-parameter: var(--sk-code-base);
53+
--shiki-token-function: var(--sk-code-function);
54+
--shiki-token-string-expression: var(--sk-code-string);
55+
--shiki-token-punctuation: var(--sk-code-base);
56+
--shiki-token-link: var(--sk-code-keyword);
57+
58+
--sk-text-warning-hsl: 32, 95%, 44%;
59+
--sk-text-warning: hsl(var(--sk-text-warning-hsl));
60+
61+
/* used for coloured backgrounds e.g. blockquotes */
62+
--sk-back-translucent: hsla(0, 0%, 0%, 0.1);
63+
--sk-text-translucent: hsla(0, 0%, 0%, 0.7);
64+
65+
/* overrides */
66+
--shiki-color-background: var(--sk-back-2);
67+
68+
/* raised buttons */
69+
--sk-raised-color: var(--sk-back-4) var(--sk-back-5) var(--sk-back-5) var(--sk-back-4);
70+
--sk-raised-width: 1px 2px 2px 1px;
71+
--sk-raised-hover-color: var(--sk-back-5) var(--sk-back-6) var(--sk-back-6) var(--sk-back-5);
72+
--sk-raised-active-color: var(--sk-back-6) var(--sk-back-5) var(--sk-back-5) var(--sk-back-6);
73+
--sk-raised-active-width: 2px 1px 1px 2px;
74+
75+
/* this is necessary for elements with filters on safari, because safari is a uniquely awful piece of software.
76+
the 0.01 prevents Vite from optimising it to `translate(0, 0)`, which doesn't fix anything */
77+
--safari-fix: translate3d(0, 0, 0.01);
78+
}
79+
80+
:root.dark {
81+
color-scheme: dark;
82+
83+
-webkit-font-smoothing: antialiased;
84+
85+
--sk-back-hue: 220;
86+
87+
--sk-back-1: hsl(var(--sk-back-hue), 15%, 8%);
88+
--sk-back-2: hsl(var(--sk-back-hue), 15%, 15%);
89+
--sk-back-3: hsl(var(--sk-back-hue), 15%, 12%);
90+
--sk-back-4: hsl(var(--sk-back-hue), 15%, 22%);
91+
--sk-back-5: hsl(var(--sk-back-hue), 15%, 25%);
92+
--sk-back-6: hsl(var(--sk-back-hue), 15%, 32%);
93+
--sk-back-translucent: hsla(0, 0%, 100%, 0.1);
94+
--sk-theme-1: hsl(12, 94%, 62%);
95+
--sk-text-1: hsl(var(--sk-back-hue), 10%, 90%);
96+
--sk-text-2: hsl(var(--sk-back-hue), 10%, 80%);
97+
--sk-text-3: hsl(var(--sk-back-hue), 10%, 65%);
98+
--sk-text-4: hsl(var(--sk-back-hue), 10%, 45%);
99+
--sk-text-translucent: hsla(0, 0%, 100%, 0.9);
100+
--sk-scrollbar: rgba(255, 255, 255, 0.3);
101+
--sk-shadow: drop-shadow(1px 2px 16px rgba(0, 0, 0, 0.5));
102+
103+
--sk-theme-1-variant: hsl(15, 100%, 35%);
104+
105+
--sk-text-warning-hsl: 32, 67%, 56%;
106+
107+
--sk-code-base: hsl(45, 7%, 75%);
108+
--sk-code-comment: hsl(0, 0%, 55%);
109+
--sk-code-keyword: hsl(204, 88%, 65%);
110+
--sk-code-function: hsl(19, 67%, 75%);
111+
--sk-code-string: hsl(41, 37%, 68%);
112+
--sk-code-number: hsl(120, 100%, 25%);
113+
--sk-code-template-string: hsl(2, 80%, 47%);
114+
--sk-code-tags: var(--sk-code-function);
115+
--sk-code-important: var(--sk-code-string);
116+
117+
--sk-code-diff-base: hsla(0, 0%, 100%, 0.5);
118+
--sk-code-diff-inserted: hsl(120, 46%, 48%);
119+
--sk-code-diff-removed: hsl(2, 64%, 70%);
120+
121+
/* overrides */
122+
--shiki-color-background: var(--sk-back-3);
123+
124+
/* raised buttons */
125+
--sk-raised-color: var(--sk-back-5) var(--sk-back-3) var(--sk-back-3) var(--sk-back-5);
126+
--sk-raised-hover-color: var(--sk-back-6) var(--sk-back-3) var(--sk-back-3) var(--sk-back-6);
127+
--sk-raised-active-color: var(--sk-back-3) var(--sk-back-6) var(--sk-back-6) var(--sk-back-3);
128+
}

‎packages/site-kit/src/lib/styles/tokens/dimensions.css‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
:root {
2+
--sk-nav-height: 6rem;
3+
--sk-secondary-nav-height: 5rem;
4+
--sk-page-padding-top: 6rem;
5+
--sk-page-padding-bottom: 8rem;
6+
--sk-page-padding-side: 1.6rem;
7+
--sk-thick-border-width: 0.3rem;
8+
--sk-border-radius: 0.4rem;
9+
--sk-border-radius-inner: 0.2rem;
10+
--sk-page-content-width: 76rem;
11+
--sk-banner-height: 0px;
12+
--sk-pane-controls-height: 4.2rem;
13+
14+
@media screen and (min-width: 480px) {
15+
--sk-page-padding-side: 3.2rem;
16+
}
17+
18+
@media screen and (min-width: 800px) {
19+
--sk-page-padding-top: 8rem;
20+
--sk-page-padding-side: 4.8rem;
21+
--sk-secondary-nav-height: 6rem;
22+
}
23+
}

0 commit comments

Comments
 (0)