@canopy-iiif/app 1.5.7 → 1.5.9

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 (14) hide show
  1. package/package.json +1 -1
  2. package/ui/dist/index.mjs +29 -10
  3. package/ui/dist/index.mjs.map +2 -2
  4. package/ui/dist/server.mjs +36 -11
  5. package/ui/dist/server.mjs.map +2 -2
  6. package/ui/styles/components/_diagram.scss +1 -1
  7. package/ui/styles/components/_footer.scss +1 -1
  8. package/ui/styles/components/_work.scss +1 -1
  9. package/ui/styles/components/header/_header.scss +8 -10
  10. package/ui/styles/components/iiif/_image.scss +1 -1
  11. package/ui/styles/components/modal/_modal.scss +16 -18
  12. package/ui/styles/components/search/_form.scss +1 -1
  13. package/ui/styles/components/search/_results.scss +1 -1
  14. package/ui/styles/index.css +23 -31
package/ui/styles/components/_diagram.scss CHANGED
@@ -18,7 +18,7 @@
18
18
  display: block;
19
19
  text-align: center;
20
20
  padding-bottom: 1.618rem;
21
- color: var(--color-gray-700);
21
+ color: var(--color-gray-800);
22
22
  font-weight: 300;
23
23
  }
24
24
 
package/ui/styles/components/_footer.scss CHANGED
@@ -1,7 +1,7 @@
1
1
  @layer components {
2
2
  .canopy-footer {
3
3
  border-top: 1px solid var(--color-gray-200);
4
- color: var(--color-gray-700);
4
+ color: var(--color-gray-800);
5
5
  }
6
6
 
7
7
  .canopy-footer__inner {
package/ui/styles/components/_work.scss CHANGED
@@ -52,7 +52,7 @@
52
52
  text-transform: uppercase;
53
53
  margin: 0;
54
54
  font-weight: 400;
55
- color: var(--color-gray-700);
55
+ color: var(--color-gray-800);
56
56
  }
57
57
 
58
58
  dd {
package/ui/styles/components/header/_header.scss CHANGED
@@ -5,7 +5,7 @@
5
5
  align-items: center;
6
6
  gap: 1.618rem;
7
7
  padding: 1rem 1.618rem;
8
- background: trabsparent;
8
+ background: transparent;
9
9
  z-index: 1;
10
10
  }
11
11
 
@@ -24,9 +24,6 @@
24
24
  width: 2.5rem;
25
25
  height: 2.5rem;
26
26
  border-radius: 0.75rem;
27
- border: 1px solid var(--color-gray-200);
28
- background: rgba(255, 255, 255, 0.8);
29
- color: var(--color-gray-800);
30
27
  transition:
31
28
  background 150ms ease,
32
29
  color 150ms ease,
@@ -35,7 +32,6 @@
35
32
 
36
33
  .canopy-header__menu:hover,
37
34
  .canopy-header__menu:focus-visible {
38
- background: rgba(255, 255, 255, 0.95);
39
35
  color: var(--color-gray-900);
40
36
  outline: none;
41
37
  }
@@ -81,19 +77,21 @@
81
77
  width: 2.5rem;
82
78
  height: 2.5rem;
83
79
  border-radius: 0.75rem;
84
- border: 1px solid var(--color-gray-200);
85
- background: rgba(255, 255, 255, 0.8);
86
- color: var(--color-gray-800);
80
+ color: var(--color-accent-900);
81
+ cursor: pointer;
87
82
  transition:
88
83
  background 150ms ease,
89
84
  color 150ms ease,
90
85
  border-color 150ms ease;
86
+
87
+ svg path {
88
+ stroke-width: 2.618px;
89
+ }
91
90
  }
92
91
 
93
92
  .canopy-header__icon-button:hover,
94
93
  .canopy-header__icon-button:focus-visible {
95
- background: rgba(255, 255, 255, 1);
96
- color: var(--color-gray-900);
94
+ color: var(--color-accent-700);
97
95
  outline: none;
98
96
  }
99
97
 
package/ui/styles/components/iiif/_image.scss CHANGED
@@ -21,7 +21,7 @@
21
21
 
22
22
  &__caption {
23
23
  margin: 0.75rem 0 0;
24
- color: var(--color-gray-600);
24
+ color: var(--color-gray-800);
25
25
  font-size: 0.875rem;
26
26
  line-height: 1.4;
27
27
  }
package/ui/styles/components/modal/_modal.scss CHANGED
@@ -6,14 +6,13 @@
6
6
  display: none;
7
7
  align-items: center;
8
8
  justify-content: center;
9
- background: rgba(15, 23, 42, 0.6);
10
- backdrop-filter: blur(8px);
9
+ background: #0006;
11
10
  box-sizing: border-box;
12
11
  padding: clamp(1.25rem, 4vw, 2.5rem);
13
12
  overflow: hidden;
14
13
  }
15
14
 
16
- .canopy-modal[data-open='true'] {
15
+ .canopy-modal[data-open="true"] {
17
16
  display: flex;
18
17
  }
19
18
 
@@ -21,12 +20,12 @@
21
20
  position: relative;
22
21
  display: flex;
23
22
  flex-direction: column;
24
- width: min(100%, 38rem);
25
- max-width: 38rem;
23
+ width: 400px;
24
+ max-width: 400px;
26
25
  max-height: min(90vh, 640px);
27
26
  background: var(--color-gray-50);
28
27
  border-radius: 1rem;
29
- box-shadow: 0 28px 60px -24px rgba(15, 23, 42, 0.65);
28
+ box-shadow: 12px 24px 48px rgba(0, 0, 0, 0.5);
30
29
  overflow: hidden;
31
30
  margin: 0;
32
31
  }
@@ -37,7 +36,7 @@
37
36
  }
38
37
 
39
38
  .canopy-modal__body--padded {
40
- padding: 1.5rem;
39
+ padding: 1.618rem;
41
40
  }
42
41
 
43
42
  .canopy-modal__brand {
@@ -69,17 +68,21 @@
69
68
  width: 2.5rem;
70
69
  height: 2.5rem;
71
70
  border-radius: 9999px;
72
- border: 1px solid var(--color-gray-200);
73
- background: rgba(255, 255, 255, 0.92);
74
- color: var(--color-gray-700);
71
+ color: var(--color-accent-900);
75
72
  cursor: pointer;
76
- transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
73
+ transition:
74
+ background-color 150ms ease,
75
+ color 150ms ease,
76
+ border-color 150ms ease;
77
+
78
+ svg path {
79
+ stroke-width: 2.618px;
80
+ }
77
81
  }
78
82
 
79
83
  .canopy-modal__close:hover,
80
84
  .canopy-modal__close:focus-visible {
81
- background: rgba(248, 250, 252, 1);
82
- color: var(--color-gray-900);
85
+ color: var(--color-accent-700);
83
86
  outline: none;
84
87
  }
85
88
 
@@ -92,7 +95,6 @@
92
95
  .canopy-modal {
93
96
  align-items: stretch;
94
97
  justify-content: stretch;
95
- backdrop-filter: blur(2px);
96
98
  padding: 0;
97
99
  }
98
100
 
@@ -111,10 +113,6 @@
111
113
  border-radius: 0.75rem;
112
114
  }
113
115
 
114
- .canopy-modal__body--padded {
115
- padding: 1rem;
116
- }
117
-
118
116
  .canopy-modal__brand {
119
117
  margin-bottom: 1rem;
120
118
  }
package/ui/styles/components/search/_form.scss CHANGED
@@ -78,7 +78,7 @@
78
78
  gap: 0.5rem;
79
79
  border: 1px solid var(--color-gray-200);
80
80
  border-radius: 0.75rem;
81
- color: var(--color-gray-700);
81
+ color: var(--color-gray-800);
82
82
  box-shadow: var(--shadow-sm);
83
83
  transition:
84
84
  border-color var(--duration-fast) var(--easing-standard),
package/ui/styles/components/search/_results.scss CHANGED
@@ -21,7 +21,7 @@
21
21
  padding: 0.382rem 0.618rem;
22
22
  font-size: 1rem;
23
23
  cursor: pointer;
24
- color: var(--color-gray-600);
24
+ color: var(--color-gray-800);
25
25
  transition: all 0.2s ease-in-out;
26
26
 
27
27
  &.active,
package/ui/styles/index.css CHANGED
@@ -573,7 +573,7 @@ section[data-footnotes] ul li,
573
573
  align-items: center;
574
574
  gap: 1.618rem;
575
575
  padding: 1rem 1.618rem;
576
- background: trabsparent;
576
+ background: transparent;
577
577
  z-index: 1;
578
578
  }
579
579
  .canopy-header__brand {
@@ -590,14 +590,10 @@ section[data-footnotes] ul li,
590
590
  width: 2.5rem;
591
591
  height: 2.5rem;
592
592
  border-radius: 0.75rem;
593
- border: 1px solid var(--color-gray-200);
594
- background: rgba(255, 255, 255, 0.8);
595
- color: var(--color-gray-800);
596
593
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
597
594
  }
598
595
  .canopy-header__menu:hover,
599
596
  .canopy-header__menu:focus-visible {
600
- background: rgba(255, 255, 255, 0.95);
601
597
  color: var(--color-gray-900);
602
598
  outline: none;
603
599
  }
@@ -636,15 +632,16 @@ section[data-footnotes] ul li,
636
632
  width: 2.5rem;
637
633
  height: 2.5rem;
638
634
  border-radius: 0.75rem;
639
- border: 1px solid var(--color-gray-200);
640
- background: rgba(255, 255, 255, 0.8);
641
- color: var(--color-gray-800);
635
+ color: var(--color-accent-900);
636
+ cursor: pointer;
642
637
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
643
638
  }
639
+ .canopy-header__icon-button svg path {
640
+ stroke-width: 2.618px;
641
+ }
644
642
  .canopy-header__icon-button:hover,
645
643
  .canopy-header__icon-button:focus-visible {
646
- background: rgb(255, 255, 255);
647
- color: var(--color-gray-900);
644
+ color: var(--color-accent-700);
648
645
  outline: none;
649
646
  }
650
647
  .canopy-header__search-icon {
@@ -832,7 +829,7 @@ section[data-footnotes] ul li,
832
829
  @layer components {
833
830
  .canopy-footer {
834
831
  border-top: 1px solid var(--color-gray-200);
835
- color: var(--color-gray-700);
832
+ color: var(--color-gray-800);
836
833
  }
837
834
  .canopy-footer__inner {
838
835
  margin: 0 auto;
@@ -863,8 +860,7 @@ section[data-footnotes] ul li,
863
860
  display: none;
864
861
  align-items: center;
865
862
  justify-content: center;
866
- background: rgba(15, 23, 42, 0.6);
867
- backdrop-filter: blur(8px);
863
+ background: rgba(0, 0, 0, 0.4);
868
864
  box-sizing: border-box;
869
865
  padding: clamp(1.25rem, 4vw, 2.5rem);
870
866
  overflow: hidden;
@@ -876,12 +872,12 @@ section[data-footnotes] ul li,
876
872
  position: relative;
877
873
  display: flex;
878
874
  flex-direction: column;
879
- width: min(100%, 38rem);
880
- max-width: 38rem;
875
+ width: 400px;
876
+ max-width: 400px;
881
877
  max-height: min(90vh, 640px);
882
878
  background: var(--color-gray-50);
883
879
  border-radius: 1rem;
884
- box-shadow: 0 28px 60px -24px rgba(15, 23, 42, 0.65);
880
+ box-shadow: 12px 24px 48px rgba(0, 0, 0, 0.5);
885
881
  overflow: hidden;
886
882
  margin: 0;
887
883
  }
@@ -890,7 +886,7 @@ section[data-footnotes] ul li,
890
886
  overflow-y: auto;
891
887
  }
892
888
  .canopy-modal__body--padded {
893
- padding: 1.5rem;
889
+ padding: 1.618rem;
894
890
  }
895
891
  .canopy-modal__brand {
896
892
  display: flex;
@@ -918,16 +914,16 @@ section[data-footnotes] ul li,
918
914
  width: 2.5rem;
919
915
  height: 2.5rem;
920
916
  border-radius: 9999px;
921
- border: 1px solid var(--color-gray-200);
922
- background: rgba(255, 255, 255, 0.92);
923
- color: var(--color-gray-700);
917
+ color: var(--color-accent-900);
924
918
  cursor: pointer;
925
919
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
926
920
  }
921
+ .canopy-modal__close svg path {
922
+ stroke-width: 2.618px;
923
+ }
927
924
  .canopy-modal__close:hover,
928
925
  .canopy-modal__close:focus-visible {
929
- background: rgb(248, 250, 252);
930
- color: var(--color-gray-900);
926
+ color: var(--color-accent-700);
931
927
  outline: none;
932
928
  }
933
929
  .canopy-modal__close-icon {
@@ -938,7 +934,6 @@ section[data-footnotes] ul li,
938
934
  .canopy-modal {
939
935
  align-items: stretch;
940
936
  justify-content: stretch;
941
- backdrop-filter: blur(2px);
942
937
  padding: 0;
943
938
  }
944
939
  .canopy-modal__panel {
@@ -954,9 +949,6 @@ section[data-footnotes] ul li,
954
949
  right: 1rem;
955
950
  border-radius: 0.75rem;
956
951
  }
957
- .canopy-modal__body--padded {
958
- padding: 1rem;
959
- }
960
952
  .canopy-modal__brand {
961
953
  margin-bottom: 1rem;
962
954
  }
@@ -1337,7 +1329,7 @@ section[data-footnotes] ul li,
1337
1329
  }
1338
1330
  .canopy-iiif-image__caption {
1339
1331
  margin: 0.75rem 0 0;
1340
- color: var(--color-gray-600);
1332
+ color: var(--color-gray-800);
1341
1333
  font-size: 0.875rem;
1342
1334
  line-height: 1.4;
1343
1335
  }
@@ -1524,7 +1516,7 @@ html.dark .canopy-iiif-image .clover-iiif-image-openseadragon .clover-iiif-image
1524
1516
  gap: 0.5rem;
1525
1517
  border: 1px solid var(--color-gray-200);
1526
1518
  border-radius: 0.75rem;
1527
- color: var(--color-gray-700);
1519
+ color: var(--color-gray-800);
1528
1520
  box-shadow: var(--shadow-sm);
1529
1521
  transition: border-color var(--duration-fast) var(--easing-standard), box-shadow var(--duration-fast) var(--easing-standard), background-color var(--duration-fast) var(--easing-standard);
1530
1522
  }
@@ -1644,7 +1636,7 @@ html.dark .canopy-iiif-image .clover-iiif-image-openseadragon .clover-iiif-image
1644
1636
  padding: 0.382rem 0.618rem;
1645
1637
  font-size: 1rem;
1646
1638
  cursor: pointer;
1647
- color: var(--color-gray-600);
1639
+ color: var(--color-gray-800);
1648
1640
  transition: all 0.2s ease-in-out;
1649
1641
  }
1650
1642
  .canopy-search-tabs button.active, .canopy-search-tabs button:hover {
@@ -2227,7 +2219,7 @@ html.dark .canopy-iiif-image .clover-iiif-image-openseadragon .clover-iiif-image
2227
2219
  display: block;
2228
2220
  text-align: center;
2229
2221
  padding-bottom: 1.618rem;
2230
- color: var(--color-gray-700);
2222
+ color: var(--color-gray-800);
2231
2223
  font-weight: 300;
2232
2224
  }
2233
2225
 
@@ -2316,7 +2308,7 @@ html.dark .canopy-iiif-image .clover-iiif-image-openseadragon .clover-iiif-image
2316
2308
  text-transform: uppercase;
2317
2309
  margin: 0;
2318
2310
  font-weight: 400;
2319
- color: var(--color-gray-700);
2311
+ color: var(--color-gray-800);
2320
2312
  }
2321
2313
  body.canopy-type-work main dd {
2322
2314
  margin: 0;