@canopy-iiif/app 1.5.11 → 1.5.12

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 (11) hide show
  1. package/package.json +1 -1
  2. package/ui/dist/server.mjs +1 -1
  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/_nav-tree.scss +9 -2
  7. package/ui/styles/components/_sub-navigation.scss +2 -1
  8. package/ui/styles/components/header/_navbar.scss +8 -2
  9. package/ui/styles/components/search/_form.scss +1 -1
  10. package/ui/styles/index.css +18 -21
  11. 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/_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,
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