@canopy-iiif/app 1.5.11 → 1.5.13

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 (12) hide show
  1. package/package.json +1 -1
  2. package/ui/dist/server.mjs +58 -3
  3. package/ui/dist/server.mjs.map +2 -2
  4. package/ui/styles/components/_buttons.scss +2 -29
  5. package/ui/styles/components/_interstitial-hero.scss +1 -1
  6. package/ui/styles/components/_map.scss +14 -11
  7. package/ui/styles/components/_nav-tree.scss +9 -2
  8. package/ui/styles/components/_sub-navigation.scss +2 -1
  9. package/ui/styles/components/header/_navbar.scss +8 -2
  10. package/ui/styles/components/search/_form.scss +1 -1
  11. package/ui/styles/index.css +32 -32
  12. package/ui/theme.js +3 -7
package/ui/styles/components/_buttons.scss CHANGED
@@ -17,7 +17,7 @@
17
17
 
18
18
  &--primary {
19
19
  background-color: var(--color-accent-default);
20
- color: var(--color-gray-50);
20
+ color: var(--color-accent-50);
21
21
  box-shadow: 0 18px 32px -22px rgba(15, 23, 42, 0.55);
22
22
 
23
23
  &:hover,
@@ -27,8 +27,7 @@
27
27
  }
28
28
 
29
29
  &--secondary {
30
- border: 1px solid
31
- color-mix(in srgb, var(--color-gray-300) 60%, transparent);
30
+ border: 1px solid var(--color-gray-200);
32
31
  color: color-mix(in srgb, var(--color-gray-900) 92%, transparent);
33
32
  background-color: var(--color-gray-50);
34
33
 
@@ -49,32 +48,6 @@
49
48
  }
50
49
  }
51
50
 
52
- html[data-accent="amber"],
53
- html[data-accent="yellow"],
54
- html[data-accent="lime"],
55
- html[data-accent="mint"],
56
- html[data-accent="sky"] {
57
- .canopy-button--primary {
58
- color: var(--color-gray-900);
59
- }
60
- }
61
-
62
- html.dark {
63
- .canopy-button--primary {
64
- color: var(--color-gray-900);
65
- }
66
-
67
- &[data-accent="amber"],
68
- &[data-accent="yellow"],
69
- &[data-accent="lime"],
70
- &[data-accent="mint"],
71
- &[data-accent="sky"] {
72
- .canopy-button--primary {
73
- color: var(--color-gray-50);
74
- }
75
- }
76
- }
77
-
78
51
  .canopy-button-group {
79
52
  display: flex;
80
53
  flex-direction: column;
package/ui/styles/components/_interstitial-hero.scss CHANGED
@@ -11,7 +11,7 @@
11
11
  --hero-height: 520px;
12
12
  --hero-bg-start: var(--color-gray-50);
13
13
  --hero-bg-mid: var(--color-accent-100);
14
- --hero-bg-end: var(--color-accent-100);
14
+ --hero-bg-end: var(--color-accent-200);
15
15
  --hero-dot-bg: var(--color-accent-300);
16
16
  --hero-dot-active-bg: var(--color-accent-default);
17
17
 
package/ui/styles/components/_map.scss CHANGED
@@ -150,22 +150,24 @@
150
150
 
151
151
  &__marker-thumb,
152
152
  &__marker-solid {
153
- width: 56px;
154
- height: 56px;
153
+ width: 40px;
154
+ height: 40px;
155
155
  border-radius: 999px;
156
- border: 2px solid var(--color-gray-50);
157
156
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.35);
158
157
  overflow: hidden;
159
- display: block;
158
+ display: flex;
159
+ align-items: center;
160
+ justify-content: center;
160
161
  background: var(--color-gray-900);
161
162
  }
162
163
 
163
164
  &__marker-thumb {
164
165
  img {
165
166
  display: block;
166
- width: 100%;
167
- height: 100%;
167
+ width: 105%;
168
+ height: 105%;
168
169
  object-fit: cover;
170
+ object-position: 50% 50%;
169
171
  }
170
172
  }
171
173
 
@@ -182,10 +184,11 @@
182
184
  }
183
185
 
184
186
  &__cluster {
185
- font-size: 1rem;
186
- font-weight: 400;
187
- width: 56px;
188
- height: 56px;
187
+ font-size: 0.8333rem;
188
+ font-family: var(--font-sans);
189
+ font-weight: 600;
190
+ width: 40px;
191
+ height: 40px;
189
192
  border-radius: 999px;
190
193
  background: var(--color-accent-default);
191
194
  color: var(--color-gray-50);
@@ -193,6 +196,6 @@
193
196
  align-items: center;
194
197
  justify-content: center;
195
198
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.35);
196
- border: 2px solid var(--color-gray-50);
199
+ box-sizing: content-box;
197
200
  }
198
201
  }
package/ui/styles/components/_nav-tree.scss CHANGED
@@ -43,7 +43,14 @@
43
43
  margin: -0.25rem;
44
44
  display: inline-flex;
45
45
  align-items: center;
46
- justify-content: center;
46
+ justify-content: flex-end;
47
+ cursor: pointer;
48
+ flex-grow: 1;
49
+
50
+ &:hover,
51
+ &:focus {
52
+ color: var(--color-accent-default);
53
+ }
47
54
  }
48
55
 
49
56
  .canopy-nav-tree__toggle:focus-visible {
@@ -61,7 +68,7 @@
61
68
  margin-top: 0.25rem;
62
69
  }
63
70
 
64
- .canopy-nav-tree__item[data-expanded='true'] .canopy-nav-tree__toggle-icon {
71
+ .canopy-nav-tree__item[data-expanded="true"] .canopy-nav-tree__toggle-icon {
65
72
  transform: rotate(180deg);
66
73
  }
67
74
  }
package/ui/styles/components/_sub-navigation.scss CHANGED
@@ -21,7 +21,7 @@
21
21
  .canopy-sub-navigation__link,
22
22
  .canopy-sub-navigation__tree .canopy-nav-tree__link,
23
23
  .canopy-modal__section-nav .canopy-nav-tree__link {
24
- display: block;
24
+ display: inline;
25
25
  padding: 0.382rem 0.618;
26
26
  border-radius: 0.382rem;
27
27
  color: inherit;
@@ -30,6 +30,7 @@
30
30
  transition:
31
31
  background-color 120ms ease,
32
32
  color 120ms ease;
33
+ flex-shrink: 1;
33
34
  }
34
35
 
35
36
  .canopy-sub-navigation__link:hover,
package/ui/styles/components/header/_navbar.scss CHANGED
@@ -48,7 +48,6 @@
48
48
  padding: 0;
49
49
  display: flex;
50
50
  flex-direction: column;
51
- gap: 0.618rem;
52
51
  }
53
52
 
54
53
  .canopy-modal__nav-item {
@@ -86,7 +85,14 @@
86
85
  display: inline-flex;
87
86
  align-items: center;
88
87
  justify-content: center;
89
- color: var(--color-gray-muted);
88
+ justify-content: flex-end;
89
+ cursor: pointer;
90
+ flex-grow: 1;
91
+
92
+ &:hover,
93
+ &:focus {
94
+ color: var(--color-accent-default);
95
+ }
90
96
  }
91
97
 
92
98
  .canopy-modal__nav-toggle:focus-visible {
package/ui/styles/components/search/_form.scss CHANGED
@@ -168,7 +168,7 @@
168
168
  margin-right: 1px;
169
169
  border: 0;
170
170
  background: var(--color-accent-default);
171
- color: #fff;
171
+ color: var(--color-accent-50);
172
172
  font-weight: 300;
173
173
  font-size: 1rem;
174
174
  padding: 0.382rem 0.618rem;
package/ui/styles/index.css CHANGED
@@ -166,14 +166,14 @@ section[data-footnotes] ul li,
166
166
  }
167
167
  .canopy-button--primary {
168
168
  background-color: var(--color-accent-default);
169
- color: var(--color-gray-50);
169
+ color: var(--color-accent-50);
170
170
  box-shadow: 0 18px 32px -22px rgba(15, 23, 42, 0.55);
171
171
  }
172
172
  .canopy-button--primary:hover, .canopy-button--primary:focus-visible {
173
173
  background-color: var(--color-accent-600);
174
174
  }
175
175
  .canopy-button--secondary {
176
- border: 1px solid color-mix(in srgb, var(--color-gray-300) 60%, transparent);
176
+ border: 1px solid var(--color-gray-200);
177
177
  color: color-mix(in srgb, var(--color-gray-900) 92%, transparent);
178
178
  background-color: var(--color-gray-50);
179
179
  }
@@ -182,19 +182,6 @@ section[data-footnotes] ul li,
182
182
  background-color: color-mix(in srgb, var(--color-accent-300) 25%, transparent);
183
183
  color: var(--color-accent-900);
184
184
  }
185
- html[data-accent=amber] .canopy-button--primary,
186
- html[data-accent=yellow] .canopy-button--primary,
187
- html[data-accent=lime] .canopy-button--primary,
188
- html[data-accent=mint] .canopy-button--primary,
189
- html[data-accent=sky] .canopy-button--primary {
190
- color: var(--color-gray-900);
191
- }
192
- html.dark .canopy-button--primary {
193
- color: var(--color-gray-900);
194
- }
195
- html.dark[data-accent=amber] .canopy-button--primary, html.dark[data-accent=yellow] .canopy-button--primary, html.dark[data-accent=lime] .canopy-button--primary, html.dark[data-accent=mint] .canopy-button--primary, html.dark[data-accent=sky] .canopy-button--primary {
196
- color: var(--color-gray-50);
197
- }
198
185
  .canopy-button-group {
199
186
  display: flex;
200
187
  flex-direction: column;
@@ -456,7 +443,12 @@ section[data-footnotes] ul li,
456
443
  margin: -0.25rem;
457
444
  display: inline-flex;
458
445
  align-items: center;
459
- justify-content: center;
446
+ justify-content: flex-end;
447
+ cursor: pointer;
448
+ flex-grow: 1;
449
+ }
450
+ .canopy-nav-tree__toggle:hover, .canopy-nav-tree__toggle:focus {
451
+ color: var(--color-accent-default);
460
452
  }
461
453
  .canopy-nav-tree__toggle:focus-visible {
462
454
  outline: 2px solid var(--color-accent-default);
@@ -842,7 +834,6 @@ section[data-footnotes] ul li,
842
834
  padding: 0;
843
835
  display: flex;
844
836
  flex-direction: column;
845
- gap: 0.618rem;
846
837
  }
847
838
  .canopy-modal__nav-item {
848
839
  margin: 0;
@@ -875,7 +866,12 @@ section[data-footnotes] ul li,
875
866
  display: inline-flex;
876
867
  align-items: center;
877
868
  justify-content: center;
878
- color: var(--color-gray-muted);
869
+ justify-content: flex-end;
870
+ cursor: pointer;
871
+ flex-grow: 1;
872
+ }
873
+ .canopy-modal__nav-toggle:hover, .canopy-modal__nav-toggle:focus {
874
+ color: var(--color-accent-default);
879
875
  }
880
876
  .canopy-modal__nav-toggle:focus-visible {
881
877
  outline: 2px solid var(--color-accent-default);
@@ -1048,7 +1044,7 @@ section[data-footnotes] ul li,
1048
1044
  --hero-height: 520px;
1049
1045
  --hero-bg-start: var(--color-gray-50);
1050
1046
  --hero-bg-mid: var(--color-accent-100);
1051
- --hero-bg-end: var(--color-accent-100);
1047
+ --hero-bg-end: var(--color-accent-200);
1052
1048
  --hero-dot-bg: var(--color-accent-300);
1053
1049
  --hero-dot-active-bg: var(--color-accent-default);
1054
1050
  background: linear-gradient(173deg, var(--hero-bg-start) 5rem, var(--hero-bg-mid) 61.8%, var(--hero-bg-end) 100%);
@@ -1669,7 +1665,7 @@ html.dark .canopy-iiif-image .clover-iiif-image-openseadragon .clover-iiif-image
1669
1665
  margin-right: 1px;
1670
1666
  border: 0;
1671
1667
  background: var(--color-accent-default);
1672
- color: #fff;
1668
+ color: var(--color-accent-50);
1673
1669
  font-weight: 300;
1674
1670
  font-size: 1rem;
1675
1671
  padding: 0.382rem 0.618rem;
@@ -2159,13 +2155,14 @@ html.dark .canopy-iiif-image .clover-iiif-image-openseadragon .clover-iiif-image
2159
2155
  .canopy-sub-navigation__link,
2160
2156
  .canopy-sub-navigation__tree .canopy-nav-tree__link,
2161
2157
  .canopy-modal__section-nav .canopy-nav-tree__link {
2162
- display: block;
2158
+ display: inline;
2163
2159
  padding: 0.382rem 0.618;
2164
2160
  border-radius: 0.382rem;
2165
2161
  color: inherit;
2166
2162
  text-decoration: none;
2167
2163
  cursor: pointer;
2168
2164
  transition: background-color 120ms ease, color 120ms ease;
2165
+ flex-shrink: 1;
2169
2166
  }
2170
2167
 
2171
2168
  .canopy-sub-navigation__link:hover,
@@ -2805,20 +2802,22 @@ html.dark .canopy-iiif-image .clover-iiif-image-openseadragon .clover-iiif-image
2805
2802
  padding: 1rem 1rem 0;
2806
2803
  }
2807
2804
  .canopy-map__marker-thumb, .canopy-map__marker-solid {
2808
- width: 56px;
2809
- height: 56px;
2805
+ width: 40px;
2806
+ height: 40px;
2810
2807
  border-radius: 999px;
2811
- border: 2px solid var(--color-gray-50);
2812
2808
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.35);
2813
2809
  overflow: hidden;
2814
- display: block;
2810
+ display: flex;
2811
+ align-items: center;
2812
+ justify-content: center;
2815
2813
  background: var(--color-gray-900);
2816
2814
  }
2817
2815
  .canopy-map__marker-thumb img {
2818
2816
  display: block;
2819
- width: 100%;
2820
- height: 100%;
2817
+ width: 105%;
2818
+ height: 105%;
2821
2819
  object-fit: cover;
2820
+ object-position: 50% 50%;
2822
2821
  }
2823
2822
  .canopy-map__marker-solid {
2824
2823
  display: flex;
@@ -2831,10 +2830,11 @@ html.dark .canopy-iiif-image .clover-iiif-image-openseadragon .clover-iiif-image
2831
2830
  border: none;
2832
2831
  }
2833
2832
  .canopy-map__cluster {
2834
- font-size: 1rem;
2835
- font-weight: 400;
2836
- width: 56px;
2837
- height: 56px;
2833
+ font-size: 0.8333rem;
2834
+ font-family: var(--font-sans);
2835
+ font-weight: 600;
2836
+ width: 40px;
2837
+ height: 40px;
2838
2838
  border-radius: 999px;
2839
2839
  background: var(--color-accent-default);
2840
2840
  color: var(--color-gray-50);
@@ -2842,7 +2842,7 @@ html.dark .canopy-iiif-image .clover-iiif-image-openseadragon .clover-iiif-image
2842
2842
  align-items: center;
2843
2843
  justify-content: center;
2844
2844
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.35);
2845
- border: 2px solid var(--color-gray-50);
2845
+ box-sizing: content-box;
2846
2846
  }
2847
2847
 
2848
2848
  /**
package/ui/theme.js CHANGED
@@ -30,9 +30,9 @@ const LEVELS = [
30
30
  ];
31
31
  const STEP_MAP = {
32
32
  50: 1,
33
- 100: 3,
34
- 200: 4,
35
- 300: 6,
33
+ 100: 2,
34
+ 200: 3,
35
+ 300: 4,
36
36
  400: 7,
37
37
  500: 8,
38
38
  600: 9,
@@ -185,8 +185,6 @@ function loadCanopyTheme(options = {}) {
185
185
  let grayScale = grayName
186
186
  ? toTailwindScale(grayName, {
187
187
  appearance,
188
- darken900Amount: 0.4,
189
- saturate700: false,
190
188
  })
191
189
  : null;
192
190
  let grayFallback = false;
@@ -195,8 +193,6 @@ function loadCanopyTheme(options = {}) {
195
193
  grayName = DEFAULT_GRAY;
196
194
  grayScale = toTailwindScale(DEFAULT_GRAY, {
197
195
  appearance,
198
- darken900Amount: 0.4,
199
- saturate700: false,
200
196
  });
201
197
  }
202
198