diff options
author | 2022-09-04 21:43:15 +0200 | |
---|---|---|
committer | 2022-09-06 01:05:23 +0200 | |
commit | 036eecd1564465ba1f5dfaa33553fcbfb92c043f (patch) | |
tree | 1413564caf96a24111980e6f6c834079e0529898 /subprojects/frontend | |
parent | build(frontend): include TS SDK in repo (diff) | |
download | refinery-036eecd1564465ba1f5dfaa33553fcbfb92c043f.tar.gz refinery-036eecd1564465ba1f5dfaa33553fcbfb92c043f.tar.zst refinery-036eecd1564465ba1f5dfaa33553fcbfb92c043f.zip |
refactor(frontend): Inter font
Use a variable font to reduce the number of files to be deployed
Diffstat (limited to 'subprojects/frontend')
-rw-r--r-- | subprojects/frontend/index.html | 267 | ||||
-rw-r--r-- | subprojects/frontend/package.json | 2 | ||||
-rw-r--r-- | subprojects/frontend/src/theme/ThemeProvider.tsx | 3 | ||||
-rw-r--r-- | subprojects/frontend/vite.config.ts | 4 |
4 files changed, 7 insertions, 269 deletions
diff --git a/subprojects/frontend/index.html b/subprojects/frontend/index.html index f9e87485..8b6814eb 100644 --- a/subprojects/frontend/index.html +++ b/subprojects/frontend/index.html | |||
@@ -13,274 +13,9 @@ | |||
13 | <meta name="theme-color" media="(prefers-color-scheme:light)" content="#f5f5f5"> | 13 | <meta name="theme-color" media="(prefers-color-scheme:light)" content="#f5f5f5"> |
14 | <meta name="theme-color" media="(prefers-color-scheme:dark)" content="#21252b"> | 14 | <meta name="theme-color" media="(prefers-color-scheme:dark)" content="#21252b"> |
15 | <style> | 15 | <style> |
16 | @import '@fontsource/inter/variable.css'; | ||
16 | @import '@fontsource/jetbrains-mono/variable.css'; | 17 | @import '@fontsource/jetbrains-mono/variable.css'; |
17 | @import '@fontsource/jetbrains-mono/variable-italic.css'; | 18 | @import '@fontsource/jetbrains-mono/variable-italic.css'; |
18 | |||
19 | /* roboto-cyrillic-ext-300-normal*/ | ||
20 | @font-face { | ||
21 | font-family: 'Roboto'; | ||
22 | font-style: normal; | ||
23 | font-display: swap; | ||
24 | font-weight: 300; | ||
25 | src: url('@fontsource/roboto/files/roboto-cyrillic-ext-300-normal.woff2') format('woff2'); | ||
26 | unicode-range: U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; | ||
27 | } | ||
28 | /* roboto-cyrillic-300-normal*/ | ||
29 | @font-face { | ||
30 | font-family: 'Roboto'; | ||
31 | font-style: normal; | ||
32 | font-display: swap; | ||
33 | font-weight: 300; | ||
34 | src: url('@fontsource/roboto/files/roboto-cyrillic-300-normal.woff2') format('woff2'); | ||
35 | unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; | ||
36 | } | ||
37 | /* roboto-greek-ext-300-normal*/ | ||
38 | @font-face { | ||
39 | font-family: 'Roboto'; | ||
40 | font-style: normal; | ||
41 | font-display: swap; | ||
42 | font-weight: 300; | ||
43 | src: url('@fontsource/roboto/files/roboto-greek-ext-300-normal.woff2') format('woff2'); | ||
44 | unicode-range: U+1F00-1FFF; | ||
45 | } | ||
46 | /* roboto-greek-300-normal*/ | ||
47 | @font-face { | ||
48 | font-family: 'Roboto'; | ||
49 | font-style: normal; | ||
50 | font-display: swap; | ||
51 | font-weight: 300; | ||
52 | src: url('@fontsource/roboto/files/roboto-greek-300-normal.woff2') format('woff2'); | ||
53 | unicode-range: U+0370-03FF; | ||
54 | } | ||
55 | /* roboto-vietnamese-300-normal*/ | ||
56 | @font-face { | ||
57 | font-family: 'Roboto'; | ||
58 | font-style: normal; | ||
59 | font-display: swap; | ||
60 | font-weight: 300; | ||
61 | src: url('@fontsource/roboto/files/roboto-vietnamese-300-normal.woff2') format('woff2'); | ||
62 | unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB; | ||
63 | } | ||
64 | /* roboto-latin-ext-300-normal*/ | ||
65 | @font-face { | ||
66 | font-family: 'Roboto'; | ||
67 | font-style: normal; | ||
68 | font-display: swap; | ||
69 | font-weight: 300; | ||
70 | src: url('@fontsource/roboto/files/roboto-latin-ext-300-normal.woff2') format('woff2'); | ||
71 | unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; | ||
72 | } | ||
73 | /* roboto-latin-300-normal*/ | ||
74 | @font-face { | ||
75 | font-family: 'Roboto'; | ||
76 | font-style: normal; | ||
77 | font-display: swap; | ||
78 | font-weight: 300; | ||
79 | src: url('@fontsource/roboto/files/roboto-latin-300-normal.woff2') format('woff2'); | ||
80 | unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; | ||
81 | } | ||
82 | /* roboto-cyrillic-ext-400-normal*/ | ||
83 | @font-face { | ||
84 | font-family: 'Roboto'; | ||
85 | font-style: normal; | ||
86 | font-display: swap; | ||
87 | font-weight: 400; | ||
88 | src: url('@fontsource/roboto/files/roboto-cyrillic-ext-400-normal.woff2') format('woff2'); | ||
89 | unicode-range: U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; | ||
90 | } | ||
91 | /* roboto-cyrillic-400-normal*/ | ||
92 | @font-face { | ||
93 | font-family: 'Roboto'; | ||
94 | font-style: normal; | ||
95 | font-display: swap; | ||
96 | font-weight: 400; | ||
97 | src: url('@fontsource/roboto/files/roboto-cyrillic-400-normal.woff2') format('woff2'); | ||
98 | unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; | ||
99 | } | ||
100 | /* roboto-greek-ext-400-normal*/ | ||
101 | @font-face { | ||
102 | font-family: 'Roboto'; | ||
103 | font-style: normal; | ||
104 | font-display: swap; | ||
105 | font-weight: 400; | ||
106 | src: url('@fontsource/roboto/files/roboto-greek-ext-400-normal.woff2') format('woff2'); | ||
107 | unicode-range: U+1F00-1FFF; | ||
108 | } | ||
109 | /* roboto-greek-400-normal*/ | ||
110 | @font-face { | ||
111 | font-family: 'Roboto'; | ||
112 | font-style: normal; | ||
113 | font-display: swap; | ||
114 | font-weight: 400; | ||
115 | src: url('@fontsource/roboto/files/roboto-greek-400-normal.woff2') format('woff2'); | ||
116 | unicode-range: U+0370-03FF; | ||
117 | } | ||
118 | /* roboto-vietnamese-400-normal*/ | ||
119 | @font-face { | ||
120 | font-family: 'Roboto'; | ||
121 | font-style: normal; | ||
122 | font-display: swap; | ||
123 | font-weight: 400; | ||
124 | src: url('@fontsource/roboto/files/roboto-vietnamese-400-normal.woff2') format('woff2'); | ||
125 | unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB; | ||
126 | } | ||
127 | /* roboto-latin-ext-400-normal*/ | ||
128 | @font-face { | ||
129 | font-family: 'Roboto'; | ||
130 | font-style: normal; | ||
131 | font-display: swap; | ||
132 | font-weight: 400; | ||
133 | src: url('@fontsource/roboto/files/roboto-latin-ext-400-normal.woff2') format('woff2'); | ||
134 | unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; | ||
135 | } | ||
136 | /* roboto-latin-400-normal*/ | ||
137 | @font-face { | ||
138 | font-family: 'Roboto'; | ||
139 | font-style: normal; | ||
140 | font-display: swap; | ||
141 | font-weight: 400; | ||
142 | src: url('@fontsource/roboto/files/roboto-latin-400-normal.woff2') format('woff2'); | ||
143 | unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; | ||
144 | } | ||
145 | /* roboto-cyrillic-ext-500-normal*/ | ||
146 | @font-face { | ||
147 | font-family: 'Roboto'; | ||
148 | font-style: normal; | ||
149 | font-display: swap; | ||
150 | font-weight: 500; | ||
151 | src: url('@fontsource/roboto/files/roboto-cyrillic-ext-500-normal.woff2') format('woff2'); | ||
152 | unicode-range: U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; | ||
153 | } | ||
154 | /* roboto-cyrillic-500-normal*/ | ||
155 | @font-face { | ||
156 | font-family: 'Roboto'; | ||
157 | font-style: normal; | ||
158 | font-display: swap; | ||
159 | font-weight: 500; | ||
160 | src: url('@fontsource/roboto/files/roboto-cyrillic-500-normal.woff2') format('woff2'); | ||
161 | unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; | ||
162 | } | ||
163 | /* roboto-greek-ext-500-normal*/ | ||
164 | @font-face { | ||
165 | font-family: 'Roboto'; | ||
166 | font-style: normal; | ||
167 | font-display: swap; | ||
168 | font-weight: 500; | ||
169 | src: url('@fontsource/roboto/files/roboto-greek-ext-500-normal.woff2') format('woff2'); | ||
170 | unicode-range: U+1F00-1FFF; | ||
171 | } | ||
172 | /* roboto-greek-500-normal*/ | ||
173 | @font-face { | ||
174 | font-family: 'Roboto'; | ||
175 | font-style: normal; | ||
176 | font-display: swap; | ||
177 | font-weight: 500; | ||
178 | src: url('@fontsource/roboto/files/roboto-greek-500-normal.woff2') format('woff2'); | ||
179 | unicode-range: U+0370-03FF; | ||
180 | } | ||
181 | /* roboto-vietnamese-500-normal*/ | ||
182 | @font-face { | ||
183 | font-family: 'Roboto'; | ||
184 | font-style: normal; | ||
185 | font-display: swap; | ||
186 | font-weight: 500; | ||
187 | src: url('@fontsource/roboto/files/roboto-vietnamese-500-normal.woff2') format('woff2'); | ||
188 | unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB; | ||
189 | } | ||
190 | /* roboto-latin-ext-500-normal*/ | ||
191 | @font-face { | ||
192 | font-family: 'Roboto'; | ||
193 | font-style: normal; | ||
194 | font-display: swap; | ||
195 | font-weight: 500; | ||
196 | src: url('@fontsource/roboto/files/roboto-latin-ext-500-normal.woff2') format('woff2'); | ||
197 | unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; | ||
198 | } | ||
199 | /* roboto-latin-500-normal*/ | ||
200 | @font-face { | ||
201 | font-family: 'Roboto'; | ||
202 | font-style: normal; | ||
203 | font-display: swap; | ||
204 | font-weight: 500; | ||
205 | src: url('@fontsource/roboto/files/roboto-latin-500-normal.woff2') format('woff2'); | ||
206 | unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; | ||
207 | } | ||
208 | /* roboto-cyrillic-ext-700-normal*/ | ||
209 | @font-face { | ||
210 | font-family: 'Roboto'; | ||
211 | font-style: normal; | ||
212 | font-display: swap; | ||
213 | font-weight: 700; | ||
214 | src: url('@fontsource/roboto/files/roboto-cyrillic-ext-700-normal.woff2') format('woff2'); | ||
215 | unicode-range: U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; | ||
216 | } | ||
217 | /* roboto-cyrillic-700-normal*/ | ||
218 | @font-face { | ||
219 | font-family: 'Roboto'; | ||
220 | font-style: normal; | ||
221 | font-display: swap; | ||
222 | font-weight: 700; | ||
223 | src: url('@fontsource/roboto/files/roboto-cyrillic-700-normal.woff2') format('woff2'); | ||
224 | unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; | ||
225 | } | ||
226 | /* roboto-greek-ext-700-normal*/ | ||
227 | @font-face { | ||
228 | font-family: 'Roboto'; | ||
229 | font-style: normal; | ||
230 | font-display: swap; | ||
231 | font-weight: 700; | ||
232 | src: url('@fontsource/roboto/files/roboto-greek-ext-700-normal.woff2') format('woff2'); | ||
233 | unicode-range: U+1F00-1FFF; | ||
234 | } | ||
235 | /* roboto-greek-700-normal*/ | ||
236 | @font-face { | ||
237 | font-family: 'Roboto'; | ||
238 | font-style: normal; | ||
239 | font-display: swap; | ||
240 | font-weight: 700; | ||
241 | src: url('@fontsource/roboto/files/roboto-greek-700-normal.woff2') format('woff2'); | ||
242 | unicode-range: U+0370-03FF; | ||
243 | } | ||
244 | /* roboto-vietnamese-700-normal*/ | ||
245 | @font-face { | ||
246 | font-family: 'Roboto'; | ||
247 | font-style: normal; | ||
248 | font-display: swap; | ||
249 | font-weight: 700; | ||
250 | src: url('@fontsource/roboto/files/roboto-vietnamese-700-normal.woff2') format('woff2'); | ||
251 | unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB; | ||
252 | } | ||
253 | /* roboto-latin-ext-700-normal*/ | ||
254 | @font-face { | ||
255 | font-family: 'Roboto'; | ||
256 | font-style: normal; | ||
257 | font-display: swap; | ||
258 | font-weight: 700; | ||
259 | src: url('@fontsource/roboto/files/roboto-latin-ext-700-normal.woff2') format('woff2'); | ||
260 | unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; | ||
261 | } | ||
262 | /* roboto-latin-700-normal*/ | ||
263 | @font-face { | ||
264 | font-family: 'Roboto'; | ||
265 | font-style: normal; | ||
266 | font-display: swap; | ||
267 | font-weight: 700; | ||
268 | src: url('@fontsource/roboto/files/roboto-latin-700-normal.woff2') format('woff2'); | ||
269 | unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; | ||
270 | } | ||
271 | |||
272 | body { | ||
273 | color: #19202b; | ||
274 | background: #f5f5f5; | ||
275 | font-family: 'InterVariable', 'Inter', 'Roboto', 'Helvetica', 'Arial', sans-serif; | ||
276 | } | ||
277 | |||
278 | @media (prefers-color-scheme: dark) { | ||
279 | body { | ||
280 | color: #ebebff; | ||
281 | background: #21252b; | ||
282 | } | ||
283 | } | ||
284 | </style> | 19 | </style> |
285 | </head> | 20 | </head> |
286 | <body> | 21 | <body> |
diff --git a/subprojects/frontend/package.json b/subprojects/frontend/package.json index 9202542b..08522d35 100644 --- a/subprojects/frontend/package.json +++ b/subprojects/frontend/package.json | |||
@@ -32,8 +32,8 @@ | |||
32 | "@codemirror/view": "^6.2.2", | 32 | "@codemirror/view": "^6.2.2", |
33 | "@emotion/react": "^11.10.4", | 33 | "@emotion/react": "^11.10.4", |
34 | "@emotion/styled": "^11.10.4", | 34 | "@emotion/styled": "^11.10.4", |
35 | "@fontsource/inter": "^4.5.12", | ||
35 | "@fontsource/jetbrains-mono": "^4.5.10", | 36 | "@fontsource/jetbrains-mono": "^4.5.10", |
36 | "@fontsource/roboto": "^4.5.8", | ||
37 | "@lezer/common": "^1.0.1", | 37 | "@lezer/common": "^1.0.1", |
38 | "@lezer/highlight": "^1.0.0", | 38 | "@lezer/highlight": "^1.0.0", |
39 | "@lezer/lr": "^1.2.3", | 39 | "@lezer/lr": "^1.2.3", |
diff --git a/subprojects/frontend/src/theme/ThemeProvider.tsx b/subprojects/frontend/src/theme/ThemeProvider.tsx index 6f9a712e..ffb18a06 100644 --- a/subprojects/frontend/src/theme/ThemeProvider.tsx +++ b/subprojects/frontend/src/theme/ThemeProvider.tsx | |||
@@ -67,6 +67,9 @@ declare module '@mui/material/styles' { | |||
67 | } | 67 | } |
68 | 68 | ||
69 | const typography: TypographyVariantsOptions = { | 69 | const typography: TypographyVariantsOptions = { |
70 | fontFamily: | ||
71 | '"InterVariable", "Inter", "Roboto", "Helvetica", "Arial", sans-serif', | ||
72 | fontWeightMedium: 600, | ||
70 | fontWeightEditorNormal: 450, | 73 | fontWeightEditorNormal: 450, |
71 | fontWeightEditorBold: 650, | 74 | fontWeightEditorBold: 650, |
72 | editor: { | 75 | editor: { |
diff --git a/subprojects/frontend/vite.config.ts b/subprojects/frontend/vite.config.ts index 0c13f133..7cea4642 100644 --- a/subprojects/frontend/vite.config.ts +++ b/subprojects/frontend/vite.config.ts | |||
@@ -73,7 +73,7 @@ export default defineConfig({ | |||
73 | files: [ | 73 | files: [ |
74 | { | 74 | { |
75 | match: | 75 | match: |
76 | /(?:jetbrains-mono-latin-variable-wghtOnly-(?:italic|normal)|roboto-latin-(?:400|500)-normal).+\.woff2$/, | 76 | /(?:inter-latin-variable-wghtOnly-normal|jetbrains-mono-latin-variable-wghtOnly-(?:italic|normal)).+\.woff2$/, |
77 | attributes: { | 77 | attributes: { |
78 | type: 'font/woff2', | 78 | type: 'font/woff2', |
79 | as: 'font', | 79 | as: 'font', |
@@ -96,7 +96,7 @@ export default defineConfig({ | |||
96 | workbox: { | 96 | workbox: { |
97 | globPatterns: [ | 97 | globPatterns: [ |
98 | '**/*.{css,html,js}', | 98 | '**/*.{css,html,js}', |
99 | 'roboto-latin-{300,400,500,700}-normal.*.woff2', | 99 | 'inter-latin-variable-wghtOnly-normal.*.woff2', |
100 | 'jetbrains-mono-latin-variable-wghtOnly-{normal,italic}.*.woff2', | 100 | 'jetbrains-mono-latin-variable-wghtOnly-{normal,italic}.*.woff2', |
101 | ], | 101 | ], |
102 | dontCacheBustURLsMatching: /\.(?:css|js|woff2?)$/, | 102 | dontCacheBustURLsMatching: /\.(?:css|js|woff2?)$/, |