@canopy-iiif/app 0.9.14 → 0.10.0
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/AGENTS.md +1 -0
- package/lib/build/build.js +1 -0
- package/lib/build/dev.js +17 -4
- package/lib/build/iiif.js +234 -12
- package/lib/build/mdx.js +2 -0
- package/lib/build/pages.js +17 -1
- package/lib/build/styles.js +4 -8
- package/lib/components/featured.js +6 -0
- package/lib/components/hero-slider-runtime.js +9 -2
- package/lib/iiif/thumbnail.js +262 -4
- package/package.json +14 -1
- package/ui/dist/index.mjs +191 -99
- package/ui/dist/index.mjs.map +4 -4
- package/ui/dist/server.mjs +295 -187
- package/ui/dist/server.mjs.map +4 -4
- package/ui/styles/base/_common.scss +33 -33
- package/ui/styles/base/_heading.scss +26 -19
- package/ui/styles/base/index.scss +0 -1
- package/ui/styles/components/_buttons.scss +53 -46
- package/ui/styles/components/_interstitial-hero.scss +13 -18
- package/ui/styles/components/_sub-navigation.scss +1 -0
- package/ui/styles/components/header/_header.scss +10 -3
- package/ui/styles/components/header/_logo.scss +32 -33
- package/ui/styles/components/search/_form.scss +4 -9
- package/ui/styles/index.css +161 -171
- package/ui/tailwind-canopy-iiif-preset.js +5 -15
- package/ui/tailwind-config.d.ts +21 -0
- package/ui/tailwind-config.js +134 -0
- package/ui/tailwind-default.config.mjs +3 -0
- package/ui/theme.js +4 -4
- package/ui/styles/_variables.scss +0 -1
package/ui/styles/index.css
CHANGED
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
/* canopy-theme */
|
|
2
2
|
@layer properties {
|
|
3
3
|
:root {
|
|
4
|
-
--
|
|
5
|
-
--color-brand-50: #f7f9ff;
|
|
4
|
+
--color-brand-50: #fdfdfe;
|
|
6
5
|
--color-brand-100: #edf2fe;
|
|
7
6
|
--color-brand-200: #e1e9ff;
|
|
8
7
|
--color-brand-300: #c1d0ff;
|
|
@@ -12,8 +11,8 @@
|
|
|
12
11
|
--color-brand-700: #3358d4;
|
|
13
12
|
--color-brand-800: #3a5bc7;
|
|
14
13
|
--color-brand-900: #172245;
|
|
15
|
-
--color-brand-default: #
|
|
16
|
-
--color-gray-50: #
|
|
14
|
+
--color-brand-default: #3358d4;
|
|
15
|
+
--color-gray-50: #fcfcfd;
|
|
17
16
|
--color-gray-100: #f0f0f3;
|
|
18
17
|
--color-gray-200: #e8e8ec;
|
|
19
18
|
--color-gray-300: #d9d9e0;
|
|
@@ -25,20 +24,19 @@
|
|
|
25
24
|
--color-gray-900: #111316;
|
|
26
25
|
--color-gray-default: #111316;
|
|
27
26
|
--color-gray-muted: #8b8d98;
|
|
28
|
-
--colors-accent: #
|
|
27
|
+
--colors-accent: #3358d4 !important;
|
|
29
28
|
--colors-accentAlt: #3a5bc7 !important;
|
|
30
29
|
--colors-accentMuted: #abbdf9 !important;
|
|
31
30
|
--colors-primary: #111316 !important;
|
|
32
31
|
--colors-primaryAlt: #111316 !important;
|
|
33
32
|
--colors-primaryMuted: #111316 !important;
|
|
34
|
-
--colors-secondary: #
|
|
35
|
-
--colors-secondaryAlt: #
|
|
36
|
-
--colors-secondaryMuted: #
|
|
33
|
+
--colors-secondary: #fcfcfd !important;
|
|
34
|
+
--colors-secondaryAlt: #fcfcfd !important;
|
|
35
|
+
--colors-secondaryMuted: #fcfcfd !important;
|
|
37
36
|
color-scheme: light;
|
|
38
37
|
}
|
|
39
38
|
:host {
|
|
40
|
-
--
|
|
41
|
-
--color-brand-50: #f7f9ff;
|
|
39
|
+
--color-brand-50: #fdfdfe;
|
|
42
40
|
--color-brand-100: #edf2fe;
|
|
43
41
|
--color-brand-200: #e1e9ff;
|
|
44
42
|
--color-brand-300: #c1d0ff;
|
|
@@ -48,8 +46,8 @@
|
|
|
48
46
|
--color-brand-700: #3358d4;
|
|
49
47
|
--color-brand-800: #3a5bc7;
|
|
50
48
|
--color-brand-900: #172245;
|
|
51
|
-
--color-brand-default: #
|
|
52
|
-
--color-gray-50: #
|
|
49
|
+
--color-brand-default: #3358d4;
|
|
50
|
+
--color-gray-50: #fcfcfd;
|
|
53
51
|
--color-gray-100: #f0f0f3;
|
|
54
52
|
--color-gray-200: #e8e8ec;
|
|
55
53
|
--color-gray-300: #d9d9e0;
|
|
@@ -61,83 +59,81 @@
|
|
|
61
59
|
--color-gray-900: #111316;
|
|
62
60
|
--color-gray-default: #111316;
|
|
63
61
|
--color-gray-muted: #8b8d98;
|
|
64
|
-
--colors-accent: #
|
|
62
|
+
--colors-accent: #3358d4 !important;
|
|
65
63
|
--colors-accentAlt: #3a5bc7 !important;
|
|
66
64
|
--colors-accentMuted: #abbdf9 !important;
|
|
67
65
|
--colors-primary: #111316 !important;
|
|
68
66
|
--colors-primaryAlt: #111316 !important;
|
|
69
67
|
--colors-primaryMuted: #111316 !important;
|
|
70
|
-
--colors-secondary: #
|
|
71
|
-
--colors-secondaryAlt: #
|
|
72
|
-
--colors-secondaryMuted: #
|
|
68
|
+
--colors-secondary: #fcfcfd !important;
|
|
69
|
+
--colors-secondaryAlt: #fcfcfd !important;
|
|
70
|
+
--colors-secondaryMuted: #fcfcfd !important;
|
|
73
71
|
color-scheme: light;
|
|
74
72
|
}
|
|
75
73
|
}
|
|
76
74
|
/* canopy-theme:end */
|
|
77
|
-
|
|
78
|
-
body {
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
::selection {
|
|
114
|
-
background-color: var(--color-brand-200);
|
|
75
|
+
@layer base {
|
|
76
|
+
body {
|
|
77
|
+
margin: 0;
|
|
78
|
+
padding: 0;
|
|
79
|
+
background: var(--color-gray-50);
|
|
80
|
+
color: var(--color-gray-900);
|
|
81
|
+
}
|
|
82
|
+
p {
|
|
83
|
+
line-height: 1.618;
|
|
84
|
+
margin-bottom: 1.618rem;
|
|
85
|
+
}
|
|
86
|
+
ol,
|
|
87
|
+
ul {
|
|
88
|
+
padding-left: 1.618rem;
|
|
89
|
+
}
|
|
90
|
+
ol li,
|
|
91
|
+
ul li {
|
|
92
|
+
margin-bottom: 0.382rem;
|
|
93
|
+
list-style: disc;
|
|
94
|
+
}
|
|
95
|
+
a {
|
|
96
|
+
text-decoration: none;
|
|
97
|
+
color: var(--color-brand-default);
|
|
98
|
+
}
|
|
99
|
+
a:hover {
|
|
100
|
+
text-decoration: underline;
|
|
101
|
+
}
|
|
102
|
+
input,
|
|
103
|
+
textarea,
|
|
104
|
+
select,
|
|
105
|
+
button {
|
|
106
|
+
font-family: inherit;
|
|
107
|
+
}
|
|
108
|
+
::selection {
|
|
109
|
+
background-color: var(--color-brand-200);
|
|
110
|
+
}
|
|
115
111
|
}
|
|
116
|
-
|
|
117
|
-
h1 {
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
112
|
+
@layer base {
|
|
113
|
+
h1 {
|
|
114
|
+
font-size: 2.618rem;
|
|
115
|
+
line-height: 1.25;
|
|
116
|
+
margin: 0 0 1rem 0;
|
|
117
|
+
}
|
|
118
|
+
h2 {
|
|
119
|
+
font-size: 1.618rem;
|
|
120
|
+
line-height: 1.25;
|
|
121
|
+
margin: 2.618rem 0 1rem;
|
|
122
|
+
}
|
|
123
|
+
h3 {
|
|
124
|
+
font-size: 1.382rem;
|
|
125
|
+
line-height: 1.3;
|
|
126
|
+
letter-spacing: -0.0125em;
|
|
127
|
+
margin: 1.618rem 0 1rem;
|
|
128
|
+
font-weight: 300;
|
|
129
|
+
}
|
|
123
130
|
}
|
|
124
|
-
|
|
125
|
-
h2 {
|
|
131
|
+
@utility font-display {
|
|
126
132
|
font-family: var(--font-serif);
|
|
127
|
-
font-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
font-weight: 400;
|
|
131
|
-
}
|
|
132
|
-
|
|
133
|
-
h3 {
|
|
134
|
-
font-size: 1.382rem;
|
|
135
|
-
line-height: 1.3;
|
|
136
|
-
letter-spacing: -0.0125em;
|
|
137
|
-
margin: 1.618rem 0 1rem;
|
|
138
|
-
font-weight: 400;
|
|
133
|
+
font-weight: 600;
|
|
134
|
+
letter-spacing: -0.025em;
|
|
135
|
+
font-variation-settings: "SOFT" 100, "WONK" 1;
|
|
139
136
|
}
|
|
140
|
-
|
|
141
137
|
.markdown-table__frame {
|
|
142
138
|
width: 100%;
|
|
143
139
|
margin: 1.618rem 0 2.618rem;
|
|
@@ -175,45 +171,46 @@ h3 {
|
|
|
175
171
|
color: var(--color-gray-900);
|
|
176
172
|
}
|
|
177
173
|
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
.canopy-button-group {
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
174
|
+
@layer components {
|
|
175
|
+
.canopy-button {
|
|
176
|
+
display: inline-flex;
|
|
177
|
+
align-items: center;
|
|
178
|
+
justify-content: center;
|
|
179
|
+
gap: 0.35rem;
|
|
180
|
+
padding: 0.55rem 1.4rem;
|
|
181
|
+
border-radius: 9999px;
|
|
182
|
+
font-size: 0.9375rem;
|
|
183
|
+
font-weight: 600;
|
|
184
|
+
text-decoration: none;
|
|
185
|
+
transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
|
|
186
|
+
}
|
|
187
|
+
.canopy-button--primary {
|
|
188
|
+
background-color: var(--color-brand-default, #4f46e5);
|
|
189
|
+
color: var(--color-gray-50, #f9fafb);
|
|
190
|
+
box-shadow: 0 18px 32px -22px rgba(15, 23, 42, 0.55);
|
|
191
|
+
}
|
|
192
|
+
.canopy-button--primary:hover, .canopy-button--primary:focus-visible {
|
|
193
|
+
background-color: var(--color-brand-800, #4338ca);
|
|
194
|
+
color: var(--color-gray-50, #f9fafb);
|
|
195
|
+
}
|
|
196
|
+
.canopy-button--secondary {
|
|
197
|
+
border: 1px solid color-mix(in srgb, var(--color-gray-400, #94a3b8) 60%, transparent);
|
|
198
|
+
color: color-mix(in srgb, var(--color-gray-900, #0f172a) 92%, transparent);
|
|
199
|
+
background-color: var(--color-gray-50);
|
|
200
|
+
}
|
|
201
|
+
.canopy-button--secondary:hover, .canopy-button--secondary:focus-visible {
|
|
202
|
+
border-color: color-mix(in srgb, var(--color-brand-400, #818cf8) 65%, transparent);
|
|
203
|
+
background-color: color-mix(in srgb, var(--color-brand-200, #c7d2fe) 25%, transparent);
|
|
204
|
+
color: var(--color-brand-700, #4338ca);
|
|
205
|
+
}
|
|
206
|
+
.canopy-button-group {
|
|
207
|
+
display: flex;
|
|
208
|
+
flex-wrap: wrap;
|
|
209
|
+
align-items: center;
|
|
210
|
+
gap: 0.75rem;
|
|
211
|
+
padding: 1rem 0;
|
|
212
|
+
}
|
|
215
213
|
}
|
|
216
|
-
|
|
217
214
|
/* Canopy Card component styles */
|
|
218
215
|
.canopy-card, .canopy-annotation-card {
|
|
219
216
|
display: block;
|
|
@@ -312,7 +309,8 @@ h3 {
|
|
|
312
309
|
align-items: center;
|
|
313
310
|
gap: 0.75rem;
|
|
314
311
|
padding: 0.75rem 1rem;
|
|
315
|
-
background:
|
|
312
|
+
background: trabsparent;
|
|
313
|
+
z-index: 1;
|
|
316
314
|
}
|
|
317
315
|
.canopy-header__brand {
|
|
318
316
|
display: flex;
|
|
@@ -441,42 +439,39 @@ h3 {
|
|
|
441
439
|
}
|
|
442
440
|
}
|
|
443
441
|
}
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
fill: var(--color-brand-500) !important;
|
|
477
|
-
color: var(--color-brand-500) !important;
|
|
442
|
+
@layer components {
|
|
443
|
+
.canopy-logo {
|
|
444
|
+
display: flex;
|
|
445
|
+
align-items: center;
|
|
446
|
+
gap: 0.618rem;
|
|
447
|
+
font-size: 1.382rem;
|
|
448
|
+
color: var(--color-gray-default) !important;
|
|
449
|
+
line-height: 1;
|
|
450
|
+
}
|
|
451
|
+
.canopy-logo:hover {
|
|
452
|
+
text-decoration: none;
|
|
453
|
+
}
|
|
454
|
+
.canopy-logo svg {
|
|
455
|
+
height: 1.65rem;
|
|
456
|
+
display: block;
|
|
457
|
+
}
|
|
458
|
+
.canopy-logo svg circle.canopy-logo-backlight {
|
|
459
|
+
fill: var(--color-brand-900);
|
|
460
|
+
color: var(--color-brand-900);
|
|
461
|
+
}
|
|
462
|
+
.canopy-logo svg path.canopy-logo-overlay {
|
|
463
|
+
fill: var(--color-brand-default);
|
|
464
|
+
color: var(--color-brand-default);
|
|
465
|
+
}
|
|
466
|
+
html.dark .canopy-logo svg circle.canopy-logo-backlight {
|
|
467
|
+
fill: var(--color-brand-200) !important;
|
|
468
|
+
color: var(--color-brand-200) !important;
|
|
469
|
+
}
|
|
470
|
+
html.dark .canopy-logo svg path.canopy-logo-overlay {
|
|
471
|
+
fill: var(--color-brand-500) !important;
|
|
472
|
+
color: var(--color-brand-500) !important;
|
|
473
|
+
}
|
|
478
474
|
}
|
|
479
|
-
|
|
480
475
|
@layer components {
|
|
481
476
|
.canopy-nav-links {
|
|
482
477
|
display: flex;
|
|
@@ -665,15 +660,18 @@ html.dark a.canopy-logo svg path.canopy-logo-overlay {
|
|
|
665
660
|
width: 100%;
|
|
666
661
|
isolation: isolate;
|
|
667
662
|
margin-bottom: 2.618rem;
|
|
663
|
+
margin-top: -5rem;
|
|
664
|
+
z-index: 0;
|
|
665
|
+
padding-top: 4rem;
|
|
668
666
|
}
|
|
669
667
|
.canopy-interstitial--hero {
|
|
670
668
|
--hero-height: 520px;
|
|
671
|
-
--hero-bg-start: var(--color-
|
|
669
|
+
--hero-bg-start: var(--color-gray-50);
|
|
670
|
+
--hero-bg-mid: var(--color-brand-100);
|
|
672
671
|
--hero-bg-end: var(--color-brand-200);
|
|
673
|
-
--hero-caption-link: var(--color-brand-700);
|
|
674
672
|
--hero-dot-bg: var(--color-brand-300);
|
|
675
673
|
--hero-dot-active-bg: var(--color-brand-700);
|
|
676
|
-
background: linear-gradient(
|
|
674
|
+
background: linear-gradient(173deg, var(--hero-bg-start) 5rem, var(--hero-bg-mid) 61.8%, var(--hero-bg-end) 100%);
|
|
677
675
|
min-height: var(--hero-height);
|
|
678
676
|
}
|
|
679
677
|
.canopy-interstitial--hero .canopy-interstitial__overlay,
|
|
@@ -753,7 +751,7 @@ html.dark a.canopy-logo svg path.canopy-logo-overlay {
|
|
|
753
751
|
}
|
|
754
752
|
@media (min-width: 64rem) {
|
|
755
753
|
.canopy-interstitial--hero .canopy-interstitial__body .canopy-interstitial__headline {
|
|
756
|
-
font-size:
|
|
754
|
+
font-size: 2.618rem;
|
|
757
755
|
}
|
|
758
756
|
}
|
|
759
757
|
.canopy-interstitial__slider {
|
|
@@ -812,7 +810,7 @@ html.dark a.canopy-logo svg path.canopy-logo-overlay {
|
|
|
812
810
|
height: 100%;
|
|
813
811
|
flex: 1 1 auto;
|
|
814
812
|
overflow: hidden;
|
|
815
|
-
border-radius:
|
|
813
|
+
border-radius: 0.75rem;
|
|
816
814
|
}
|
|
817
815
|
.canopy-interstitial__media--static {
|
|
818
816
|
position: static;
|
|
@@ -856,16 +854,11 @@ html.dark a.canopy-logo svg path.canopy-logo-overlay {
|
|
|
856
854
|
.canopy-interstitial__headline {
|
|
857
855
|
margin: 0;
|
|
858
856
|
font-size: 2rem;
|
|
859
|
-
font-weight: 600;
|
|
860
857
|
line-height: 1.08;
|
|
861
|
-
letter-spacing: -0.01em;
|
|
862
858
|
}
|
|
863
859
|
.canopy-interstitial__description {
|
|
864
860
|
margin: 0;
|
|
865
861
|
max-width: 42rem;
|
|
866
|
-
font-size: 1rem;
|
|
867
|
-
line-height: 1.7;
|
|
868
|
-
color: color-mix(in srgb, currentColor 82%, transparent);
|
|
869
862
|
}
|
|
870
863
|
.canopy-interstitial__actions {
|
|
871
864
|
display: flex;
|
|
@@ -876,18 +869,14 @@ html.dark a.canopy-logo svg path.canopy-logo-overlay {
|
|
|
876
869
|
.canopy-interstitial__caption {
|
|
877
870
|
position: absolute;
|
|
878
871
|
bottom: 1.75rem;
|
|
872
|
+
font-weight: 600;
|
|
879
873
|
right: 2rem;
|
|
880
874
|
z-index: 3;
|
|
881
|
-
font-size: 0.8333rem;
|
|
882
|
-
letter-spacing: 0.12em;
|
|
883
|
-
text-transform: uppercase;
|
|
884
|
-
color: var(--hero-caption-color);
|
|
885
875
|
}
|
|
886
876
|
.canopy-interstitial__caption--static {
|
|
887
877
|
position: static;
|
|
888
878
|
margin: 1.5rem auto 0;
|
|
889
879
|
text-align: center;
|
|
890
|
-
color: var(--hero-caption-color);
|
|
891
880
|
}
|
|
892
881
|
.canopy-interstitial__caption-link {
|
|
893
882
|
color: var(--hero-caption-link);
|
|
@@ -980,10 +969,10 @@ html.dark a.canopy-logo svg path.canopy-logo-overlay {
|
|
|
980
969
|
padding-inline: 2.75rem;
|
|
981
970
|
}
|
|
982
971
|
.canopy-interstitial__headline {
|
|
983
|
-
font-size:
|
|
972
|
+
font-size: 2.618rem;
|
|
984
973
|
}
|
|
985
974
|
.canopy-interstitial__description {
|
|
986
|
-
font-size:
|
|
975
|
+
font-size: 1rem;
|
|
987
976
|
}
|
|
988
977
|
}
|
|
989
978
|
@media (min-width: 64rem) {
|
|
@@ -996,8 +985,8 @@ html.dark a.canopy-logo svg path.canopy-logo-overlay {
|
|
|
996
985
|
--search-form-label-padding-y: 0.625rem;
|
|
997
986
|
position: relative;
|
|
998
987
|
backdrop-filter: blur(12px);
|
|
999
|
-
background-color: color-mix(in srgb, var(--color-gray-100, #f0f0f3) 95%, transparent);
|
|
1000
988
|
transition: box-shadow var(--duration-fast, 150ms) ease, background-color var(--duration-fast, 150ms) ease;
|
|
989
|
+
background-color: var(--color-gray-50);
|
|
1001
990
|
cursor: text;
|
|
1002
991
|
padding-right: 0.4rem;
|
|
1003
992
|
}
|
|
@@ -1055,7 +1044,7 @@ html.dark a.canopy-logo svg path.canopy-logo-overlay {
|
|
|
1055
1044
|
display: flex;
|
|
1056
1045
|
align-items: center;
|
|
1057
1046
|
gap: 0.5rem;
|
|
1058
|
-
border: 1px solid var(--color-gray-
|
|
1047
|
+
border: 1px solid var(--color-gray-200, #cdced6);
|
|
1059
1048
|
border-radius: 0.75rem;
|
|
1060
1049
|
color: var(--color-gray-700, #60646c);
|
|
1061
1050
|
box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
|
|
@@ -1097,11 +1086,11 @@ html.dark a.canopy-logo svg path.canopy-logo-overlay {
|
|
|
1097
1086
|
transition: color var(--duration-fast, 150ms) var(--easing-standard, ease);
|
|
1098
1087
|
}
|
|
1099
1088
|
.canopy-search-form__clear:hover, .canopy-search-form__clear:focus-visible {
|
|
1100
|
-
color: var(--color-brand-
|
|
1089
|
+
color: var(--color-brand-default);
|
|
1101
1090
|
}
|
|
1102
1091
|
.canopy-search-form__clear:focus-visible {
|
|
1103
1092
|
outline: none;
|
|
1104
|
-
box-shadow: 0 0 0 2px var(--color-gray-100, #ffffff), 0 0 0 4px color-mix(in srgb, var(--color-brand-
|
|
1093
|
+
box-shadow: 0 0 0 2px var(--color-gray-100, #ffffff), 0 0 0 4px color-mix(in srgb, var(--color-brand-800) 65%, transparent);
|
|
1105
1094
|
border-radius: 999px;
|
|
1106
1095
|
}
|
|
1107
1096
|
|
|
@@ -1504,6 +1493,7 @@ html.dark a.canopy-logo svg path.canopy-logo-overlay {
|
|
|
1504
1493
|
.canopy-sub-navigation__item {
|
|
1505
1494
|
margin: 0;
|
|
1506
1495
|
padding: 0;
|
|
1496
|
+
list-style: none;
|
|
1507
1497
|
}
|
|
1508
1498
|
|
|
1509
1499
|
.canopy-sub-navigation__link {
|
|
@@ -13,7 +13,7 @@ function compileVarsCss() {
|
|
|
13
13
|
const theme = loadCanopyTheme();
|
|
14
14
|
if (theme && theme.css) {
|
|
15
15
|
if (process.env.CANOPY_DEBUG_THEME) {
|
|
16
|
-
console.log(
|
|
16
|
+
console.log("[preset] using theme css");
|
|
17
17
|
}
|
|
18
18
|
return theme.css;
|
|
19
19
|
}
|
|
@@ -58,19 +58,6 @@ module.exports = {
|
|
|
58
58
|
800: "var(--color-gray-800)",
|
|
59
59
|
900: "var(--color-gray-900)",
|
|
60
60
|
},
|
|
61
|
-
slate: {
|
|
62
|
-
DEFAULT: "var(--color-gray-default)",
|
|
63
|
-
50: "var(--color-gray-50)",
|
|
64
|
-
100: "var(--color-gray-100)",
|
|
65
|
-
200: "var(--color-gray-200)",
|
|
66
|
-
300: "var(--color-gray-300)",
|
|
67
|
-
400: "var(--color-gray-400)",
|
|
68
|
-
500: "var(--color-gray-500)",
|
|
69
|
-
600: "var(--color-gray-600)",
|
|
70
|
-
700: "var(--color-gray-700)",
|
|
71
|
-
800: "var(--color-gray-800)",
|
|
72
|
-
900: "var(--color-gray-900)",
|
|
73
|
-
},
|
|
74
61
|
muted: "var(--color-gray-muted)",
|
|
75
62
|
white: "#ffffff",
|
|
76
63
|
black: "#000000",
|
|
@@ -80,6 +67,10 @@ module.exports = {
|
|
|
80
67
|
sans: ["var(--font-sans)"],
|
|
81
68
|
serif: ["var(--font-serif)"],
|
|
82
69
|
},
|
|
70
|
+
maxWidth: {
|
|
71
|
+
content: "var(--max-w-content)",
|
|
72
|
+
wide: "var(--max-w-wide)",
|
|
73
|
+
},
|
|
83
74
|
fontSize: {
|
|
84
75
|
xs: ["var(--font-size-xs)", {lineHeight: "var(--line-height-xs)"}],
|
|
85
76
|
sm: ["var(--font-size-sm)", {lineHeight: "var(--line-height-sm)"}],
|
|
@@ -97,7 +88,6 @@ module.exports = {
|
|
|
97
88
|
DEFAULT: "var(--radius-default)",
|
|
98
89
|
md: "var(--radius-md)",
|
|
99
90
|
},
|
|
100
|
-
maxWidth: {content: "var(--max-w-content)", wide: "var(--max-w-wide)"},
|
|
101
91
|
boxShadow: {
|
|
102
92
|
sm: "var(--shadow-sm)",
|
|
103
93
|
DEFAULT: "var(--shadow)",
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import type { Config } from 'tailwindcss';
|
|
2
|
+
|
|
3
|
+
export interface DefineCanopyTailwindConfigOptions extends Config {
|
|
4
|
+
/**
|
|
5
|
+
* Override the detected project root (defaults to two directories up from the config file).
|
|
6
|
+
*/
|
|
7
|
+
root?: string;
|
|
8
|
+
includeCanopyPreset?: boolean;
|
|
9
|
+
includeCanopyPlugin?: boolean;
|
|
10
|
+
includeCanopySafelist?: boolean;
|
|
11
|
+
includeCanopySources?: boolean;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
export type TailwindConfigSource = string | URL;
|
|
15
|
+
|
|
16
|
+
export declare function defineCanopyTailwindConfig(
|
|
17
|
+
sourceOrOptions?: TailwindConfigSource | DefineCanopyTailwindConfigOptions,
|
|
18
|
+
maybeOptions?: DefineCanopyTailwindConfigOptions
|
|
19
|
+
): Config;
|
|
20
|
+
|
|
21
|
+
export default defineCanopyTailwindConfig;
|