@canopy-iiif/app 0.9.14 → 0.9.15

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