@canopy-iiif/app 0.8.4 → 0.8.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/build/iiif.js +361 -84
- package/lib/build/mdx.js +16 -8
- package/lib/build/pages.js +2 -1
- package/lib/build/styles.js +53 -1
- package/lib/common.js +28 -6
- package/lib/search/search-app.jsx +177 -25
- package/lib/search/search-form-runtime.js +126 -19
- package/lib/search/search.js +130 -18
- package/package.json +4 -1
- package/ui/dist/index.mjs +239 -97
- package/ui/dist/index.mjs.map +4 -4
- package/ui/dist/server.mjs +129 -72
- package/ui/dist/server.mjs.map +4 -4
- package/ui/styles/_variables.scss +1 -0
- package/ui/styles/base/_common.scss +27 -5
- package/ui/styles/base/_heading.scss +2 -4
- package/ui/styles/base/index.scss +1 -0
- package/ui/styles/components/_card.scss +47 -4
- package/ui/styles/components/_sub-navigation.scss +14 -14
- package/ui/styles/components/header/_header.scss +1 -4
- package/ui/styles/components/header/_logo.scss +33 -10
- package/ui/styles/components/search/_filters.scss +5 -7
- package/ui/styles/components/search/_form.scss +55 -17
- package/ui/styles/components/search/_results.scss +13 -15
- package/ui/styles/index.css +250 -72
- package/ui/styles/index.scss +2 -4
- package/ui/tailwind-canopy-iiif-plugin.js +10 -2
- package/ui/tailwind-canopy-iiif-preset.js +21 -19
- package/ui/theme.js +303 -0
- package/ui/styles/variables.emit.scss +0 -72
- package/ui/styles/variables.scss +0 -76
package/ui/styles/index.css
CHANGED
|
@@ -1,20 +1,121 @@
|
|
|
1
|
+
/* canopy-theme */
|
|
2
|
+
@layer properties {
|
|
3
|
+
:root {
|
|
4
|
+
--max-w-content: 1080px;
|
|
5
|
+
--color-brand-50: #fdfdfe;
|
|
6
|
+
--color-brand-100: #edf2fe;
|
|
7
|
+
--color-brand-200: #d2deff;
|
|
8
|
+
--color-brand-300: #abbdf9;
|
|
9
|
+
--color-brand-400: #8da4ef;
|
|
10
|
+
--color-brand-500: #3e63dd;
|
|
11
|
+
--color-brand-600: #3358d4;
|
|
12
|
+
--color-brand-700: #3a5bc7;
|
|
13
|
+
--color-brand-800: #1f2d5c;
|
|
14
|
+
--color-brand-900: #1a264e;
|
|
15
|
+
--color-brand-default: #3358d4;
|
|
16
|
+
--color-gray-50: #fcfcfd;
|
|
17
|
+
--color-gray-100: #f0f0f3;
|
|
18
|
+
--color-gray-200: #e0e1e6;
|
|
19
|
+
--color-gray-300: #cdced6;
|
|
20
|
+
--color-gray-400: #b9bbc6;
|
|
21
|
+
--color-gray-500: #8b8d98;
|
|
22
|
+
--color-gray-600: #80838d;
|
|
23
|
+
--color-gray-700: #60646c;
|
|
24
|
+
--color-gray-800: #1c2024;
|
|
25
|
+
--color-gray-900: #181b1f;
|
|
26
|
+
--color-gray-default: #181b1f;
|
|
27
|
+
--color-gray-muted: #80838d;
|
|
28
|
+
--colors-accent: #3358d4 !important;
|
|
29
|
+
--colors-accentAlt: #1f2d5c !important;
|
|
30
|
+
--colors-accentMuted: #8da4ef !important;
|
|
31
|
+
--colors-primary: #181b1f !important;
|
|
32
|
+
--colors-primaryAlt: #181b1f !important;
|
|
33
|
+
--colors-primaryMuted: #181b1f !important;
|
|
34
|
+
--colors-secondary: #fcfcfd !important;
|
|
35
|
+
--colors-secondaryAlt: #fcfcfd !important;
|
|
36
|
+
--colors-secondaryMuted: #fcfcfd !important;
|
|
37
|
+
color-scheme: light;
|
|
38
|
+
}
|
|
39
|
+
:host {
|
|
40
|
+
--max-w-content: 1080px;
|
|
41
|
+
--color-brand-50: #fdfdfe;
|
|
42
|
+
--color-brand-100: #edf2fe;
|
|
43
|
+
--color-brand-200: #d2deff;
|
|
44
|
+
--color-brand-300: #abbdf9;
|
|
45
|
+
--color-brand-400: #8da4ef;
|
|
46
|
+
--color-brand-500: #3e63dd;
|
|
47
|
+
--color-brand-600: #3358d4;
|
|
48
|
+
--color-brand-700: #3a5bc7;
|
|
49
|
+
--color-brand-800: #1f2d5c;
|
|
50
|
+
--color-brand-900: #1a264e;
|
|
51
|
+
--color-brand-default: #3358d4;
|
|
52
|
+
--color-gray-50: #fcfcfd;
|
|
53
|
+
--color-gray-100: #f0f0f3;
|
|
54
|
+
--color-gray-200: #e0e1e6;
|
|
55
|
+
--color-gray-300: #cdced6;
|
|
56
|
+
--color-gray-400: #b9bbc6;
|
|
57
|
+
--color-gray-500: #8b8d98;
|
|
58
|
+
--color-gray-600: #80838d;
|
|
59
|
+
--color-gray-700: #60646c;
|
|
60
|
+
--color-gray-800: #1c2024;
|
|
61
|
+
--color-gray-900: #181b1f;
|
|
62
|
+
--color-gray-default: #181b1f;
|
|
63
|
+
--color-gray-muted: #80838d;
|
|
64
|
+
--colors-accent: #3358d4 !important;
|
|
65
|
+
--colors-accentAlt: #1f2d5c !important;
|
|
66
|
+
--colors-accentMuted: #8da4ef !important;
|
|
67
|
+
--colors-primary: #181b1f !important;
|
|
68
|
+
--colors-primaryAlt: #181b1f !important;
|
|
69
|
+
--colors-primaryMuted: #181b1f !important;
|
|
70
|
+
--colors-secondary: #fcfcfd !important;
|
|
71
|
+
--colors-secondaryAlt: #fcfcfd !important;
|
|
72
|
+
--colors-secondaryMuted: #fcfcfd !important;
|
|
73
|
+
color-scheme: light;
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
/* canopy-theme:end */
|
|
1
77
|
html,
|
|
2
78
|
body {
|
|
3
79
|
margin: 0;
|
|
4
80
|
padding: 0;
|
|
5
|
-
|
|
81
|
+
background: var(--color-gray-50);
|
|
82
|
+
color: var(--color-gray-900);
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
p {
|
|
86
|
+
line-height: 1.55;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
ol,
|
|
90
|
+
ul {
|
|
91
|
+
padding-left: 1.5rem;
|
|
92
|
+
}
|
|
93
|
+
ol li,
|
|
94
|
+
ul li {
|
|
95
|
+
margin-bottom: 0.25rem;
|
|
6
96
|
}
|
|
7
97
|
|
|
8
98
|
a {
|
|
9
99
|
text-decoration: none;
|
|
10
|
-
color:
|
|
100
|
+
color: var(--color-brand-default);
|
|
11
101
|
}
|
|
12
102
|
a:hover {
|
|
13
103
|
text-decoration: underline;
|
|
14
104
|
}
|
|
15
105
|
|
|
106
|
+
input,
|
|
107
|
+
textarea,
|
|
108
|
+
select,
|
|
109
|
+
button {
|
|
110
|
+
font-family: inherit;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
::selection {
|
|
114
|
+
background-color: var(--color-brand-200);
|
|
115
|
+
}
|
|
116
|
+
|
|
16
117
|
h1 {
|
|
17
|
-
font-family:
|
|
118
|
+
font-family: var(--font-serif);
|
|
18
119
|
font-size: 2.618rem;
|
|
19
120
|
line-height: 1.25;
|
|
20
121
|
margin: 0 0 1rem 0;
|
|
@@ -22,7 +123,7 @@ h1 {
|
|
|
22
123
|
}
|
|
23
124
|
|
|
24
125
|
h2 {
|
|
25
|
-
font-family:
|
|
126
|
+
font-family: var(--font-serif);
|
|
26
127
|
font-size: 1.618rem;
|
|
27
128
|
line-height: 1.25;
|
|
28
129
|
margin: 0 0 0.618rem 0;
|
|
@@ -30,63 +131,96 @@ h2 {
|
|
|
30
131
|
}
|
|
31
132
|
|
|
32
133
|
/* Canopy Card component styles */
|
|
33
|
-
.canopy-card {
|
|
134
|
+
.canopy-card, .canopy-annotation-card {
|
|
34
135
|
display: block;
|
|
35
136
|
text-decoration: none;
|
|
36
137
|
color: inherit;
|
|
37
|
-
border: 1px solid
|
|
138
|
+
border: 1px solid var(--color-gray-200);
|
|
38
139
|
border-radius: 0.5rem;
|
|
39
140
|
overflow: hidden;
|
|
40
141
|
transition: all 150ms cubic-bezier(0.22, 1, 0.36, 1);
|
|
41
142
|
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 3px 0 rgba(0, 0, 0, 0.05);
|
|
42
143
|
}
|
|
43
|
-
.canopy-card figure {
|
|
144
|
+
.canopy-card figure, .canopy-annotation-card figure {
|
|
44
145
|
margin: 0;
|
|
45
146
|
}
|
|
46
|
-
.canopy-card .canopy-card-media {
|
|
147
|
+
.canopy-card .canopy-card-media, .canopy-annotation-card .canopy-card-media {
|
|
47
148
|
position: relative;
|
|
48
149
|
width: 100%;
|
|
49
150
|
padding-bottom: var(--canopy-card-padding, 100%);
|
|
50
151
|
background-color: rgb(229, 231, 235); /* slate-200 */
|
|
51
152
|
overflow: hidden;
|
|
52
153
|
}
|
|
53
|
-
.canopy-card .canopy-card-media > img {
|
|
154
|
+
.canopy-card .canopy-card-media > img, .canopy-annotation-card .canopy-card-media > img {
|
|
54
155
|
position: absolute;
|
|
55
156
|
inset: 0;
|
|
56
157
|
width: 100%;
|
|
57
158
|
height: 100%;
|
|
58
159
|
object-fit: cover;
|
|
59
|
-
display:
|
|
160
|
+
display: flex;
|
|
161
|
+
justify-content: center;
|
|
162
|
+
text-align: center;
|
|
163
|
+
flex-direction: column;
|
|
60
164
|
opacity: 0;
|
|
61
165
|
transition: opacity 500ms cubic-bezier(0.22, 1, 0.36, 1);
|
|
166
|
+
background: var(--color-gray-100);
|
|
167
|
+
color: var(--color-gray-600);
|
|
168
|
+
font-size: 83.333%;
|
|
62
169
|
}
|
|
63
|
-
.canopy-card[data-image-loaded=true] .canopy-card-media > img {
|
|
170
|
+
.canopy-card[data-image-loaded=true] .canopy-card-media > img, [data-image-loaded=true].canopy-annotation-card .canopy-card-media > img {
|
|
64
171
|
opacity: 1;
|
|
65
172
|
}
|
|
66
|
-
.canopy-card .canopy-card-image {
|
|
173
|
+
.canopy-card .canopy-card-image, .canopy-annotation-card .canopy-card-image {
|
|
67
174
|
display: block;
|
|
68
175
|
width: 100%;
|
|
69
176
|
height: auto;
|
|
70
177
|
opacity: 0;
|
|
71
178
|
transition: opacity 500ms cubic-bezier(0.22, 1, 0.36, 1);
|
|
72
179
|
}
|
|
73
|
-
.canopy-card[data-image-loaded=true] .canopy-card-image {
|
|
180
|
+
.canopy-card[data-image-loaded=true] .canopy-card-image, [data-image-loaded=true].canopy-annotation-card .canopy-card-image {
|
|
74
181
|
opacity: 1;
|
|
75
182
|
}
|
|
76
|
-
.canopy-card figcaption {
|
|
183
|
+
.canopy-card figcaption, .canopy-annotation-card figcaption {
|
|
77
184
|
padding: 1rem;
|
|
78
185
|
}
|
|
79
|
-
.canopy-card figcaption > span:first-child {
|
|
186
|
+
.canopy-card figcaption > span:first-child, .canopy-annotation-card figcaption > span:first-child {
|
|
80
187
|
display: block;
|
|
81
188
|
}
|
|
82
|
-
.canopy-card figcaption > span + span {
|
|
189
|
+
.canopy-card figcaption > span + span, .canopy-annotation-card figcaption > span + span {
|
|
83
190
|
display: block;
|
|
84
191
|
}
|
|
85
|
-
.canopy-card:hover, .canopy-card:focus {
|
|
192
|
+
.canopy-card:hover, .canopy-annotation-card:hover, .canopy-card:focus, .canopy-annotation-card:focus {
|
|
86
193
|
color: var(--color-brand-default);
|
|
87
194
|
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.07), 0 1px 2px 0 rgba(0, 0, 0, 0.07);
|
|
88
195
|
}
|
|
89
196
|
|
|
197
|
+
.canopy-annotation-card {
|
|
198
|
+
padding: 1rem;
|
|
199
|
+
}
|
|
200
|
+
.canopy-annotation-card mark {
|
|
201
|
+
color: var(--color-gray-900);
|
|
202
|
+
background-color: var(--color-brand-300);
|
|
203
|
+
padding: 0.1rem 0.25rem;
|
|
204
|
+
border-radius: 0.25rem;
|
|
205
|
+
margin: 0 -0.25rem;
|
|
206
|
+
}
|
|
207
|
+
.canopy-annotation-card mark mark::before,
|
|
208
|
+
.canopy-annotation-card mark mark::after {
|
|
209
|
+
clip-path: inset(100%);
|
|
210
|
+
clip: rect(1px, 1px, 1px, 1px);
|
|
211
|
+
height: 1px;
|
|
212
|
+
overflow: hidden;
|
|
213
|
+
position: absolute;
|
|
214
|
+
white-space: nowrap;
|
|
215
|
+
width: 1px;
|
|
216
|
+
}
|
|
217
|
+
.canopy-annotation-card mark mark::before {
|
|
218
|
+
content: " [highlight start] ";
|
|
219
|
+
}
|
|
220
|
+
.canopy-annotation-card mark mark::after {
|
|
221
|
+
content: " [highlight end] ";
|
|
222
|
+
}
|
|
223
|
+
|
|
90
224
|
@layer components {
|
|
91
225
|
.canopy-header {
|
|
92
226
|
display: flex;
|
|
@@ -94,25 +228,42 @@ h2 {
|
|
|
94
228
|
align-items: center;
|
|
95
229
|
gap: 1.618rem;
|
|
96
230
|
padding: 0.618rem 1rem;
|
|
97
|
-
|
|
98
|
-
background: #fff;
|
|
231
|
+
background: var(--color-gray-50);
|
|
99
232
|
}
|
|
100
233
|
}
|
|
101
|
-
.canopy-logo {
|
|
234
|
+
a.canopy-logo {
|
|
102
235
|
display: flex;
|
|
103
236
|
align-items: center;
|
|
104
237
|
gap: 0.618rem;
|
|
105
|
-
font-weight:
|
|
106
|
-
font-size: 1.
|
|
107
|
-
font-family:
|
|
108
|
-
color:
|
|
238
|
+
font-weight: 600;
|
|
239
|
+
font-size: 1.382rem;
|
|
240
|
+
font-family: var(--font-serif);
|
|
241
|
+
color: var(--color-gray-default) !important;
|
|
242
|
+
letter-spacing: -0.025em;
|
|
243
|
+
}
|
|
244
|
+
a.canopy-logo:hover {
|
|
245
|
+
text-decoration: none;
|
|
109
246
|
}
|
|
110
|
-
.canopy-logo
|
|
247
|
+
a.canopy-logo svg {
|
|
111
248
|
height: 1.618rem;
|
|
112
249
|
margin-bottom: -1px;
|
|
113
250
|
}
|
|
114
|
-
.canopy-logo
|
|
115
|
-
|
|
251
|
+
a.canopy-logo svg circle.canopy-logo-backlight {
|
|
252
|
+
fill: var(--color-brand-900);
|
|
253
|
+
color: var(--color-brand-900);
|
|
254
|
+
}
|
|
255
|
+
a.canopy-logo svg path.canopy-logo-overlay {
|
|
256
|
+
fill: var(--color-brand-default);
|
|
257
|
+
color: var(--color-brand-default);
|
|
258
|
+
}
|
|
259
|
+
|
|
260
|
+
html.dark a.canopy-logo svg circle.canopy-logo-backlight {
|
|
261
|
+
fill: var(--color-brand-200) !important;
|
|
262
|
+
color: var(--color-brand-200) !important;
|
|
263
|
+
}
|
|
264
|
+
html.dark a.canopy-logo svg path.canopy-logo-overlay {
|
|
265
|
+
fill: var(--color-brand-500) !important;
|
|
266
|
+
color: var(--color-brand-500) !important;
|
|
116
267
|
}
|
|
117
268
|
|
|
118
269
|
.canopy-navbar {
|
|
@@ -155,7 +306,7 @@ h2 {
|
|
|
155
306
|
--search-form-label-padding-y: 0.625rem;
|
|
156
307
|
position: relative;
|
|
157
308
|
backdrop-filter: blur(12px);
|
|
158
|
-
background-color: color-mix(in srgb, #
|
|
309
|
+
background-color: color-mix(in srgb, var(--color-gray-100, #f0f0f3) 95%, transparent);
|
|
159
310
|
transition: box-shadow var(--duration-fast, 150ms) ease, background-color var(--duration-fast, 150ms) ease;
|
|
160
311
|
cursor: text;
|
|
161
312
|
padding-right: 0.4rem;
|
|
@@ -178,8 +329,13 @@ h2 {
|
|
|
178
329
|
.canopy-search-form-shell:hover {
|
|
179
330
|
box-shadow: var(--shadow-md, 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06));
|
|
180
331
|
}
|
|
181
|
-
.canopy-search-form-shell
|
|
182
|
-
|
|
332
|
+
.canopy-search-form-shell svg {
|
|
333
|
+
width: 1.25rem;
|
|
334
|
+
height: 1.25rem;
|
|
335
|
+
flex-shrink: 0;
|
|
336
|
+
fill: var(--color-gray-400, #b9bbc6);
|
|
337
|
+
pointer-events: none;
|
|
338
|
+
transition: fill var(--duration-fast, 150ms) var(--easing-standard, ease);
|
|
183
339
|
}
|
|
184
340
|
.canopy-search-form-shell input[data-canopy-search-form-input] {
|
|
185
341
|
width: 100%;
|
|
@@ -187,11 +343,20 @@ h2 {
|
|
|
187
343
|
outline: none;
|
|
188
344
|
background: transparent;
|
|
189
345
|
box-shadow: none;
|
|
190
|
-
opacity: 0;
|
|
191
346
|
caret-color: transparent;
|
|
192
347
|
transition: opacity var(--duration-fast, 150ms) ease;
|
|
193
348
|
}
|
|
194
|
-
.canopy-search-form-shell:focus-within
|
|
349
|
+
.canopy-search-form-shell:focus-within {
|
|
350
|
+
background-color: var(--color-brand-100);
|
|
351
|
+
}
|
|
352
|
+
.canopy-search-form-shell:focus-within input[data-canopy-search-form-input] {
|
|
353
|
+
opacity: 1;
|
|
354
|
+
caret-color: var(--color-gray-900, #121418);
|
|
355
|
+
}
|
|
356
|
+
.canopy-search-form-shell:focus-within svg {
|
|
357
|
+
fill: var(--color-brand-default, #3e63dd);
|
|
358
|
+
}
|
|
359
|
+
.canopy-search-form-shell[data-has-value="1"] input[data-canopy-search-form-input] {
|
|
195
360
|
opacity: 1;
|
|
196
361
|
caret-color: var(--color-gray-900, #121418);
|
|
197
362
|
}
|
|
@@ -227,14 +392,28 @@ h2 {
|
|
|
227
392
|
padding: var(--search-form-label-padding-y) var(--search-form-label-padding-x);
|
|
228
393
|
}
|
|
229
394
|
|
|
230
|
-
.canopy-search-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
395
|
+
.canopy-search-form__clear {
|
|
396
|
+
border: 0;
|
|
397
|
+
background: transparent;
|
|
398
|
+
color: rgba(100, 116, 139, 0.9);
|
|
399
|
+
font-size: 1.25rem;
|
|
400
|
+
line-height: 1;
|
|
401
|
+
padding: 0 0.25rem;
|
|
402
|
+
margin-right: 0.25rem;
|
|
403
|
+
display: inline-flex;
|
|
404
|
+
align-items: center;
|
|
405
|
+
justify-content: center;
|
|
406
|
+
cursor: pointer;
|
|
236
407
|
transition: color var(--duration-fast, 150ms) var(--easing-standard, ease);
|
|
237
408
|
}
|
|
409
|
+
.canopy-search-form__clear:hover, .canopy-search-form__clear:focus-visible {
|
|
410
|
+
color: var(--color-brand-600, #3e63dd);
|
|
411
|
+
}
|
|
412
|
+
.canopy-search-form__clear:focus-visible {
|
|
413
|
+
outline: none;
|
|
414
|
+
box-shadow: 0 0 0 2px var(--color-gray-100, #ffffff), 0 0 0 4px color-mix(in srgb, var(--color-brand-500, #3e63dd) 65%, transparent);
|
|
415
|
+
border-radius: 999px;
|
|
416
|
+
}
|
|
238
417
|
|
|
239
418
|
.canopy-search-form__input {
|
|
240
419
|
flex: 1;
|
|
@@ -257,8 +436,9 @@ h2 {
|
|
|
257
436
|
align-items: center;
|
|
258
437
|
gap: 0.382rem;
|
|
259
438
|
border-radius: 0.382rem;
|
|
439
|
+
margin-right: 1px;
|
|
260
440
|
border: 0;
|
|
261
|
-
background:
|
|
441
|
+
background: var(--color-brand-default);
|
|
262
442
|
color: #fff;
|
|
263
443
|
font-weight: 400;
|
|
264
444
|
font-size: 1rem;
|
|
@@ -267,12 +447,12 @@ h2 {
|
|
|
267
447
|
cursor: pointer;
|
|
268
448
|
}
|
|
269
449
|
.canopy-search-form__submit:hover, .canopy-search-form__submit:focus-visible {
|
|
270
|
-
background:
|
|
450
|
+
background: var(--color-brand-800);
|
|
271
451
|
box-shadow: var(--shadow-md, 0 4px 6px rgba(0, 0, 0, 0.1));
|
|
272
452
|
}
|
|
273
453
|
.canopy-search-form__submit:focus-visible {
|
|
274
454
|
outline: none;
|
|
275
|
-
box-shadow: 0 0 0 2px #
|
|
455
|
+
box-shadow: 0 0 0 2px var(--color-gray-100, #ffffff), 0 0 0 4px color-mix(in srgb, var(--color-brand-500, #3e63dd) 65%, transparent);
|
|
276
456
|
}
|
|
277
457
|
.canopy-search-form__submit:active {
|
|
278
458
|
transform: translateY(1px);
|
|
@@ -307,12 +487,12 @@ h2 {
|
|
|
307
487
|
padding: 0.382rem 0.618rem;
|
|
308
488
|
font-size: 1rem;
|
|
309
489
|
cursor: pointer;
|
|
310
|
-
color:
|
|
490
|
+
color: var(--color-gray-600);
|
|
311
491
|
transition: all 0.2s ease-in-out;
|
|
312
492
|
}
|
|
313
493
|
.canopy-search-tabs button.active, .canopy-search-tabs button:hover {
|
|
314
|
-
color:
|
|
315
|
-
background-color:
|
|
494
|
+
color: var(--color-brand-default);
|
|
495
|
+
background-color: var(--color-brand-100);
|
|
316
496
|
border-radius: 0.382rem;
|
|
317
497
|
font-weight: 400;
|
|
318
498
|
}
|
|
@@ -322,9 +502,9 @@ h2 {
|
|
|
322
502
|
align-items: center;
|
|
323
503
|
gap: 0.25rem;
|
|
324
504
|
padding: 0.25rem 0.5rem;
|
|
325
|
-
border: 1px solid #e5e7eb;
|
|
326
|
-
color: #374151;
|
|
327
|
-
background: #
|
|
505
|
+
border: 1px solid var(--color-gray-200, #e5e7eb);
|
|
506
|
+
color: var(--color-gray-700, #374151);
|
|
507
|
+
background: var(--color-gray-100, #ffffff);
|
|
328
508
|
border-radius: 6px;
|
|
329
509
|
cursor: pointer;
|
|
330
510
|
}
|
|
@@ -340,7 +520,7 @@ h2 {
|
|
|
340
520
|
}
|
|
341
521
|
.canopy-search-form-modal .canopy-search-form-modal__panel {
|
|
342
522
|
position: relative;
|
|
343
|
-
background: #
|
|
523
|
+
background: var(--color-gray-100, #ffffff);
|
|
344
524
|
min-width: 320px;
|
|
345
525
|
max-width: 720px;
|
|
346
526
|
width: 90%;
|
|
@@ -353,20 +533,20 @@ h2 {
|
|
|
353
533
|
position: absolute;
|
|
354
534
|
top: 8px;
|
|
355
535
|
right: 8px;
|
|
356
|
-
border: 1px solid #e5e7eb;
|
|
357
|
-
background: #
|
|
536
|
+
border: 1px solid var(--color-gray-200, #e5e7eb);
|
|
537
|
+
background: var(--color-gray-100, #ffffff);
|
|
358
538
|
border-radius: 6px;
|
|
359
539
|
padding: 2px 6px;
|
|
360
540
|
cursor: pointer;
|
|
361
541
|
}
|
|
362
542
|
.canopy-search-form-modal .canopy-search-form-modal__inputWrap {
|
|
363
543
|
padding: 10px 12px;
|
|
364
|
-
border-bottom: 1px solid #e5e7eb;
|
|
544
|
+
border-bottom: 1px solid var(--color-gray-200, #e5e7eb);
|
|
365
545
|
}
|
|
366
546
|
.canopy-search-form-modal .canopy-search-form-modal__input {
|
|
367
547
|
width: 100%;
|
|
368
548
|
padding: 8px 10px;
|
|
369
|
-
border: 1px solid #e5e7eb;
|
|
549
|
+
border: 1px solid var(--color-gray-200, #e5e7eb);
|
|
370
550
|
border-radius: 6px;
|
|
371
551
|
outline: none;
|
|
372
552
|
}
|
|
@@ -402,8 +582,8 @@ h2 {
|
|
|
402
582
|
left: 0;
|
|
403
583
|
right: 0;
|
|
404
584
|
top: calc(100% + 4px);
|
|
405
|
-
background: #
|
|
406
|
-
border: 1px solid #e5e7eb;
|
|
585
|
+
background: var(--color-gray-100, #ffffff);
|
|
586
|
+
border: 1px solid var(--color-gray-200, #e5e7eb);
|
|
407
587
|
border-radius: 8px;
|
|
408
588
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
|
|
409
589
|
z-index: 1000;
|
|
@@ -434,7 +614,7 @@ h2 {
|
|
|
434
614
|
max-width: 48rem;
|
|
435
615
|
overflow: hidden;
|
|
436
616
|
border-radius: 0.75rem;
|
|
437
|
-
background: #
|
|
617
|
+
background: var(--color-gray-100, #ffffff);
|
|
438
618
|
box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.4), 0 10px 20px rgba(15, 23, 42, 0.12);
|
|
439
619
|
display: flex;
|
|
440
620
|
flex-direction: column;
|
|
@@ -504,7 +684,7 @@ h2 {
|
|
|
504
684
|
overflow: hidden;
|
|
505
685
|
}
|
|
506
686
|
.canopy-search-filters__facet[open] {
|
|
507
|
-
background: #
|
|
687
|
+
background: var(--color-gray-100, #ffffff);
|
|
508
688
|
}
|
|
509
689
|
|
|
510
690
|
.canopy-search-filters__facet-summary {
|
|
@@ -532,7 +712,7 @@ h2 {
|
|
|
532
712
|
|
|
533
713
|
.canopy-search-filters__facet-content {
|
|
534
714
|
border-top: 1px solid var(--color-gray-200, #e0e1e6);
|
|
535
|
-
background: #
|
|
715
|
+
background: var(--color-gray-100, #ffffff);
|
|
536
716
|
padding: 1rem;
|
|
537
717
|
max-height: 15rem;
|
|
538
718
|
overflow-y: auto;
|
|
@@ -567,7 +747,7 @@ h2 {
|
|
|
567
747
|
padding: 0.25rem 0.5rem;
|
|
568
748
|
font-size: var(--font-size-xs, 0.75rem);
|
|
569
749
|
color: var(--color-gray-600, #80838d);
|
|
570
|
-
background: #
|
|
750
|
+
background: var(--color-gray-100, #ffffff);
|
|
571
751
|
transition: background-color var(--duration-fast, 150ms) var(--easing-standard, ease), color var(--duration-fast, 150ms) var(--easing-standard, ease);
|
|
572
752
|
}
|
|
573
753
|
.canopy-search-filters__quick-clear:hover {
|
|
@@ -643,7 +823,7 @@ h2 {
|
|
|
643
823
|
|
|
644
824
|
.canopy-search-filters__button--secondary {
|
|
645
825
|
border: 1px solid var(--color-gray-200, #e0e1e6);
|
|
646
|
-
background: #
|
|
826
|
+
background: var(--color-gray-100, #ffffff);
|
|
647
827
|
color: var(--color-gray-600, #80838d);
|
|
648
828
|
}
|
|
649
829
|
.canopy-search-filters__button--secondary:hover:not([disabled]) {
|
|
@@ -667,7 +847,6 @@ h2 {
|
|
|
667
847
|
}
|
|
668
848
|
|
|
669
849
|
.canopy-sub-navigation {
|
|
670
|
-
--sub-nav-indent: 0.85rem;
|
|
671
850
|
font-size: 0.95rem;
|
|
672
851
|
color: inherit;
|
|
673
852
|
}
|
|
@@ -694,12 +873,12 @@ h2 {
|
|
|
694
873
|
border-radius: 0.375rem;
|
|
695
874
|
color: inherit;
|
|
696
875
|
text-decoration: none;
|
|
876
|
+
cursor: pointer;
|
|
697
877
|
transition: background-color 120ms ease, color 120ms ease;
|
|
698
878
|
}
|
|
699
879
|
|
|
700
880
|
.canopy-sub-navigation__link:hover {
|
|
701
|
-
|
|
702
|
-
color: inherit;
|
|
881
|
+
color: var(--color-brand-default);
|
|
703
882
|
}
|
|
704
883
|
|
|
705
884
|
.canopy-sub-navigation__link.is-label {
|
|
@@ -708,37 +887,36 @@ h2 {
|
|
|
708
887
|
}
|
|
709
888
|
|
|
710
889
|
.canopy-sub-navigation__link.is-active {
|
|
711
|
-
|
|
712
|
-
color: var(--color-brand-900, #1d4ed8);
|
|
890
|
+
color: var(--color-gray-900, #1d4ed8);
|
|
713
891
|
font-weight: 600;
|
|
714
892
|
}
|
|
715
893
|
|
|
716
894
|
.canopy-sub-navigation__list--nested {
|
|
717
895
|
margin: 0.35rem 0 0.35rem 0.5rem;
|
|
718
|
-
padding-left: 0.
|
|
719
|
-
border-left: 1px solid var(--color-gray-
|
|
896
|
+
padding-left: 0.5rem;
|
|
897
|
+
border-left: 1px solid var(--color-gray-100, #e4e4e7);
|
|
720
898
|
}
|
|
721
899
|
|
|
722
900
|
.canopy-sub-navigation__link.depth-0 {
|
|
723
|
-
padding-left: 0.
|
|
901
|
+
padding-left: 0.25rem;
|
|
724
902
|
}
|
|
725
903
|
|
|
726
904
|
.canopy-sub-navigation__link.depth-1 {
|
|
727
|
-
padding-left:
|
|
905
|
+
padding-left: 0.25rem;
|
|
728
906
|
}
|
|
729
907
|
|
|
730
908
|
.canopy-sub-navigation__link.depth-2 {
|
|
731
|
-
padding-left:
|
|
909
|
+
padding-left: 0.5rem;
|
|
732
910
|
}
|
|
733
911
|
|
|
734
912
|
.canopy-sub-navigation__link.depth-3 {
|
|
735
|
-
padding-left:
|
|
913
|
+
padding-left: 0.75rem;
|
|
736
914
|
}
|
|
737
915
|
|
|
738
916
|
.canopy-sub-navigation__link.depth-4 {
|
|
739
|
-
padding-left:
|
|
917
|
+
padding-left: 1rem;
|
|
740
918
|
}
|
|
741
919
|
|
|
742
920
|
.canopy-sub-navigation__link.depth-5 {
|
|
743
|
-
padding-left:
|
|
921
|
+
padding-left: 1.25rem;
|
|
744
922
|
}
|
package/ui/styles/index.scss
CHANGED
|
@@ -6,13 +6,21 @@
|
|
|
6
6
|
* their Tailwind config.
|
|
7
7
|
*/
|
|
8
8
|
const plugin = require("tailwindcss/plugin");
|
|
9
|
-
const fs = require("fs");
|
|
10
9
|
const path = require("path");
|
|
10
|
+
const { loadCanopyTheme } = require("./theme");
|
|
11
11
|
|
|
12
12
|
function compileScss(filePath) {
|
|
13
13
|
try {
|
|
14
14
|
const sass = require("sass");
|
|
15
|
-
const
|
|
15
|
+
const theme = loadCanopyTheme();
|
|
16
|
+
const stylesRoot = path.join(__dirname, "styles");
|
|
17
|
+
const loadPaths = [stylesRoot];
|
|
18
|
+
const relModule = path
|
|
19
|
+
.relative(stylesRoot, filePath)
|
|
20
|
+
.replace(/\\/g, "/")
|
|
21
|
+
.replace(/\.scss$/i, "");
|
|
22
|
+
const source = `${theme && theme.sassConfig ? theme.sassConfig : ""}@use '${relModule}';`;
|
|
23
|
+
const out = sass.compileString(source, { style: "expanded", loadPaths });
|
|
16
24
|
return out && out.css ? out.css : "";
|
|
17
25
|
} catch (e) {
|
|
18
26
|
const message = e && e.message ? e.message : e;
|
|
@@ -6,14 +6,21 @@
|
|
|
6
6
|
* Tailwind theme.extend values to those variables for easy use in utilities.
|
|
7
7
|
*/
|
|
8
8
|
const plugin = require("tailwindcss/plugin");
|
|
9
|
-
const fs = require("fs");
|
|
10
9
|
const path = require("path");
|
|
10
|
+
const {loadCanopyTheme} = require("./theme");
|
|
11
11
|
|
|
12
12
|
function compileVarsCss() {
|
|
13
|
+
const theme = loadCanopyTheme();
|
|
14
|
+
if (theme && theme.css) {
|
|
15
|
+
if (process.env.CANOPY_DEBUG_THEME) {
|
|
16
|
+
console.log('[preset] using theme css');
|
|
17
|
+
}
|
|
18
|
+
return theme.css;
|
|
19
|
+
}
|
|
13
20
|
try {
|
|
14
21
|
const sass = require("sass");
|
|
15
22
|
const entry = path.join(__dirname, "styles", "variables.emit.scss");
|
|
16
|
-
const out = sass.compile(entry, {
|
|
23
|
+
const out = sass.compile(entry, {style: "expanded"});
|
|
17
24
|
return out && out.css ? out.css : "";
|
|
18
25
|
} catch (_) {
|
|
19
26
|
return "";
|
|
@@ -22,7 +29,7 @@ function compileVarsCss() {
|
|
|
22
29
|
|
|
23
30
|
module.exports = {
|
|
24
31
|
theme: {
|
|
25
|
-
container: {
|
|
32
|
+
container: {center: true, padding: "1rem"},
|
|
26
33
|
extend: {
|
|
27
34
|
colors: {
|
|
28
35
|
brand: {
|
|
@@ -69,33 +76,28 @@ module.exports = {
|
|
|
69
76
|
black: "#000000",
|
|
70
77
|
},
|
|
71
78
|
fontFamily: {
|
|
72
|
-
sans: ["var(--font-sans)"],
|
|
73
79
|
mono: ["var(--font-mono)"],
|
|
80
|
+
sans: ["var(--font-sans)"],
|
|
81
|
+
serif: ["var(--font-serif)"],
|
|
74
82
|
},
|
|
75
83
|
fontSize: {
|
|
76
|
-
xs: ["var(--font-size-xs)", {
|
|
77
|
-
sm: ["var(--font-size-sm)", {
|
|
84
|
+
xs: ["var(--font-size-xs)", {lineHeight: "var(--line-height-xs)"}],
|
|
85
|
+
sm: ["var(--font-size-sm)", {lineHeight: "var(--line-height-sm)"}],
|
|
78
86
|
base: [
|
|
79
87
|
"var(--font-size-base)",
|
|
80
|
-
{
|
|
81
|
-
],
|
|
82
|
-
lg: ["var(--font-size-lg)", { lineHeight: "var(--line-height-lg)" }],
|
|
83
|
-
xl: ["var(--font-size-xl)", { lineHeight: "var(--line-height-xl)" }],
|
|
84
|
-
"2xl": [
|
|
85
|
-
"var(--font-size-2xl)",
|
|
86
|
-
{ lineHeight: "var(--line-height-2xl)" },
|
|
87
|
-
],
|
|
88
|
-
"3xl": [
|
|
89
|
-
"var(--font-size-3xl)",
|
|
90
|
-
{ lineHeight: "var(--line-height-3xl)" },
|
|
88
|
+
{lineHeight: "var(--line-height-base)"},
|
|
91
89
|
],
|
|
90
|
+
lg: ["var(--font-size-lg)", {lineHeight: "var(--line-height-lg)"}],
|
|
91
|
+
xl: ["var(--font-size-xl)", {lineHeight: "var(--line-height-xl)"}],
|
|
92
|
+
"2xl": ["var(--font-size-2xl)", {lineHeight: "var(--line-height-2xl)"}],
|
|
93
|
+
"3xl": ["var(--font-size-3xl)", {lineHeight: "var(--line-height-3xl)"}],
|
|
92
94
|
},
|
|
93
95
|
borderRadius: {
|
|
94
96
|
sm: "var(--radius-sm)",
|
|
95
97
|
DEFAULT: "var(--radius-default)",
|
|
96
98
|
md: "var(--radius-md)",
|
|
97
99
|
},
|
|
98
|
-
maxWidth: {
|
|
100
|
+
maxWidth: {content: "var(--max-w-content)", wide: "var(--max-w-wide)"},
|
|
99
101
|
boxShadow: {
|
|
100
102
|
sm: "var(--shadow-sm)",
|
|
101
103
|
DEFAULT: "var(--shadow)",
|
|
@@ -112,7 +114,7 @@ module.exports = {
|
|
|
112
114
|
},
|
|
113
115
|
plugins: [
|
|
114
116
|
// Inject CSS variables (tokens) derived from Sass variables
|
|
115
|
-
plugin(function ({
|
|
117
|
+
plugin(function ({addBase, postcss}) {
|
|
116
118
|
const css = compileVarsCss();
|
|
117
119
|
if (css && postcss && postcss.parse) addBase(postcss.parse(css));
|
|
118
120
|
}),
|