@canopy-iiif/app 0.10.13 → 0.10.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 (16) hide show
  1. package/package.json +1 -1
  2. package/ui/dist/server.mjs +10 -10
  3. package/ui/dist/server.mjs.map +1 -1
  4. package/ui/styles/base/_common.scss +2 -2
  5. package/ui/styles/components/_buttons.scss +6 -6
  6. package/ui/styles/components/_card.scss +2 -2
  7. package/ui/styles/components/_interstitial-hero.scss +7 -7
  8. package/ui/styles/components/_sub-navigation.scss +2 -2
  9. package/ui/styles/components/header/_logo.scss +8 -8
  10. package/ui/styles/components/header/_navbar.scss +1 -1
  11. package/ui/styles/components/search/_filters.scss +6 -6
  12. package/ui/styles/components/search/_form.scss +11 -11
  13. package/ui/styles/components/search/_results.scss +2 -2
  14. package/ui/styles/index.css +113 -112
  15. package/ui/styles/index.scss +1 -1
  16. package/ui/theme.js +2 -17
package/ui/styles/index.css CHANGED
@@ -1,73 +1,73 @@
1
1
  /* canopy-theme */
2
2
  @layer properties {
3
3
  :root {
4
- --color-brand-50: #191111;
5
- --color-brand-100: #3b1219;
6
- --color-brand-200: #500f1c;
7
- --color-brand-300: #72232d;
8
- --color-brand-400: #8c333a;
9
- --color-brand-500: #b54548;
10
- --color-brand-600: #e5484d;
11
- --color-brand-700: #ec5d5e;
12
- --color-brand-800: #ff9592;
13
- --color-brand-900: #ffdde3;
14
- --color-brand-default: #ec5d5e;
15
- --color-gray-50: #111111;
16
- --color-gray-100: #222222;
17
- --color-gray-200: #2a2a2a;
18
- --color-gray-300: #3a3a3a;
19
- --color-gray-400: #484848;
20
- --color-gray-500: #606060;
21
- --color-gray-600: #6e6e6e;
22
- --color-gray-700: #7b7b7b;
23
- --color-gray-800: #b4b4b4;
24
- --color-gray-900: #f5f5f5;
25
- --color-gray-default: #f5f5f5;
26
- --color-gray-muted: #6e6e6e;
27
- --colors-accent: #ec5d5e !important;
28
- --colors-accentAlt: #ff9592 !important;
29
- --colors-accentMuted: #8c333a !important;
30
- --colors-primary: #f5f5f5 !important;
31
- --colors-primaryAlt: #f5f5f5 !important;
32
- --colors-primaryMuted: #f5f5f5 !important;
33
- --colors-secondary: #111111 !important;
34
- --colors-secondaryAlt: #111111 !important;
35
- --colors-secondaryMuted: #111111 !important;
4
+ --color-accent-50: #121211;
5
+ --color-accent-100: #24231f;
6
+ --color-accent-200: #2d2b26;
7
+ --color-accent-300: #444039;
8
+ --color-accent-400: #544f46;
9
+ --color-accent-500: #696256;
10
+ --color-accent-600: #978365;
11
+ --color-accent-700: #a39073;
12
+ --color-accent-800: #cbb99f;
13
+ --color-accent-900: #eee9e3;
14
+ --color-accent-default: #a39073;
15
+ --color-gray-50: #111110;
16
+ --color-gray-100: #222221;
17
+ --color-gray-200: #2a2a28;
18
+ --color-gray-300: #3b3a37;
19
+ --color-gray-400: #494844;
20
+ --color-gray-500: #62605b;
21
+ --color-gray-600: #6f6d66;
22
+ --color-gray-700: #7c7b74;
23
+ --color-gray-800: #b5b3ad;
24
+ --color-gray-900: #f5f5f4;
25
+ --color-gray-default: #f5f5f4;
26
+ --color-gray-muted: #6f6d66;
27
+ --colors-accent: #a39073 !important;
28
+ --colors-accentAlt: #cbb99f !important;
29
+ --colors-accentMuted: #544f46 !important;
30
+ --colors-primary: #f5f5f4 !important;
31
+ --colors-primaryAlt: #f5f5f4 !important;
32
+ --colors-primaryMuted: #f5f5f4 !important;
33
+ --colors-secondary: #111110 !important;
34
+ --colors-secondaryAlt: #111110 !important;
35
+ --colors-secondaryMuted: #111110 !important;
36
36
  color-scheme: dark;
37
37
  }
38
38
  :host {
39
- --color-brand-50: #191111;
40
- --color-brand-100: #3b1219;
41
- --color-brand-200: #500f1c;
42
- --color-brand-300: #72232d;
43
- --color-brand-400: #8c333a;
44
- --color-brand-500: #b54548;
45
- --color-brand-600: #e5484d;
46
- --color-brand-700: #ec5d5e;
47
- --color-brand-800: #ff9592;
48
- --color-brand-900: #ffdde3;
49
- --color-brand-default: #ec5d5e;
50
- --color-gray-50: #111111;
51
- --color-gray-100: #222222;
52
- --color-gray-200: #2a2a2a;
53
- --color-gray-300: #3a3a3a;
54
- --color-gray-400: #484848;
55
- --color-gray-500: #606060;
56
- --color-gray-600: #6e6e6e;
57
- --color-gray-700: #7b7b7b;
58
- --color-gray-800: #b4b4b4;
59
- --color-gray-900: #f5f5f5;
60
- --color-gray-default: #f5f5f5;
61
- --color-gray-muted: #6e6e6e;
62
- --colors-accent: #ec5d5e !important;
63
- --colors-accentAlt: #ff9592 !important;
64
- --colors-accentMuted: #8c333a !important;
65
- --colors-primary: #f5f5f5 !important;
66
- --colors-primaryAlt: #f5f5f5 !important;
67
- --colors-primaryMuted: #f5f5f5 !important;
68
- --colors-secondary: #111111 !important;
69
- --colors-secondaryAlt: #111111 !important;
70
- --colors-secondaryMuted: #111111 !important;
39
+ --color-accent-50: #121211;
40
+ --color-accent-100: #24231f;
41
+ --color-accent-200: #2d2b26;
42
+ --color-accent-300: #444039;
43
+ --color-accent-400: #544f46;
44
+ --color-accent-500: #696256;
45
+ --color-accent-600: #978365;
46
+ --color-accent-700: #a39073;
47
+ --color-accent-800: #cbb99f;
48
+ --color-accent-900: #eee9e3;
49
+ --color-accent-default: #a39073;
50
+ --color-gray-50: #111110;
51
+ --color-gray-100: #222221;
52
+ --color-gray-200: #2a2a28;
53
+ --color-gray-300: #3b3a37;
54
+ --color-gray-400: #494844;
55
+ --color-gray-500: #62605b;
56
+ --color-gray-600: #6f6d66;
57
+ --color-gray-700: #7c7b74;
58
+ --color-gray-800: #b5b3ad;
59
+ --color-gray-900: #f5f5f4;
60
+ --color-gray-default: #f5f5f4;
61
+ --color-gray-muted: #6f6d66;
62
+ --colors-accent: #a39073 !important;
63
+ --colors-accentAlt: #cbb99f !important;
64
+ --colors-accentMuted: #544f46 !important;
65
+ --colors-primary: #f5f5f4 !important;
66
+ --colors-primaryAlt: #f5f5f4 !important;
67
+ --colors-primaryMuted: #f5f5f4 !important;
68
+ --colors-secondary: #111110 !important;
69
+ --colors-secondaryAlt: #111110 !important;
70
+ --colors-secondaryMuted: #111110 !important;
71
71
  color-scheme: dark;
72
72
  }
73
73
  }
@@ -97,7 +97,7 @@
97
97
  }
98
98
  a {
99
99
  text-decoration: none;
100
- color: var(--color-brand-default);
100
+ color: var(--color-accent-default);
101
101
  }
102
102
  a:hover {
103
103
  text-decoration: underline;
@@ -109,7 +109,7 @@
109
109
  font-family: inherit;
110
110
  }
111
111
  ::selection {
112
- background-color: var(--color-brand-200);
112
+ background-color: var(--color-accent-200);
113
113
  }
114
114
  }
115
115
  @layer base {
@@ -191,12 +191,12 @@
191
191
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
192
192
  }
193
193
  .canopy-button--primary {
194
- background-color: var(--color-brand-default);
194
+ background-color: var(--color-accent-default);
195
195
  color: var(--color-gray-50);
196
196
  box-shadow: 0 18px 32px -22px rgba(15, 23, 42, 0.55);
197
197
  }
198
198
  .canopy-button--primary:hover, .canopy-button--primary:focus-visible {
199
- background-color: var(--color-brand-800);
199
+ background-color: var(--color-accent-800);
200
200
  color: var(--color-gray-50);
201
201
  }
202
202
  .canopy-button--secondary {
@@ -205,9 +205,9 @@
205
205
  background-color: var(--color-gray-50);
206
206
  }
207
207
  .canopy-button--secondary:hover, .canopy-button--secondary:focus-visible {
208
- border-color: color-mix(in srgb, var(--color-brand-400) 65%, transparent);
209
- background-color: color-mix(in srgb, var(--color-brand-200) 25%, transparent);
210
- color: var(--color-brand-700);
208
+ border-color: color-mix(in srgb, var(--color-accent-400) 65%, transparent);
209
+ background-color: color-mix(in srgb, var(--color-accent-200) 25%, transparent);
210
+ color: var(--color-accent-700);
211
211
  }
212
212
  .canopy-button-group {
213
213
  display: flex;
@@ -237,7 +237,7 @@
237
237
  padding: clamp(2rem, 4vw, 3rem) clamp(1.25rem, 4vw, 4rem);
238
238
  margin: 2rem 0;
239
239
  border-radius: 1.25rem;
240
- background: linear-gradient(173deg, transparent 0%, var(--color-brand-200) 100%);
240
+ background: linear-gradient(173deg, transparent 0%, var(--color-accent-200) 100%);
241
241
  }
242
242
  .canopy-button-group--interstitial .canopy-button-group__actions {
243
243
  justify-content: center;
@@ -305,7 +305,7 @@
305
305
  display: block;
306
306
  }
307
307
  .canopy-card:hover, .canopy-annotation-card:hover, .canopy-card:focus, .canopy-annotation-card:focus {
308
- color: var(--color-brand-default);
308
+ color: var(--color-accent-default);
309
309
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.07), 0 1px 2px 0 rgba(0, 0, 0, 0.07);
310
310
  }
311
311
 
@@ -314,7 +314,7 @@
314
314
  }
315
315
  .canopy-annotation-card mark {
316
316
  color: var(--color-gray-900);
317
- background-color: var(--color-brand-300);
317
+ background-color: var(--color-accent-300);
318
318
  padding: 0.1rem 0.25rem;
319
319
  border-radius: 0.25rem;
320
320
  margin: 0 -0.25rem;
@@ -552,20 +552,20 @@
552
552
  display: block;
553
553
  }
554
554
  .canopy-logo svg circle.canopy-logo-backlight {
555
- fill: var(--color-brand-900);
556
- color: var(--color-brand-900);
555
+ fill: var(--color-accent-900);
556
+ color: var(--color-accent-900);
557
557
  }
558
558
  .canopy-logo svg path.canopy-logo-overlay {
559
- fill: var(--color-brand-default);
560
- color: var(--color-brand-default);
559
+ fill: var(--color-accent-default);
560
+ color: var(--color-accent-default);
561
561
  }
562
562
  html.dark .canopy-logo svg circle.canopy-logo-backlight {
563
- fill: var(--color-brand-200) !important;
564
- color: var(--color-brand-200) !important;
563
+ fill: var(--color-accent-200) !important;
564
+ color: var(--color-accent-200) !important;
565
565
  }
566
566
  html.dark .canopy-logo svg path.canopy-logo-overlay {
567
- fill: var(--color-brand-500) !important;
568
- color: var(--color-brand-500) !important;
567
+ fill: var(--color-accent-500) !important;
568
+ color: var(--color-accent-500) !important;
569
569
  }
570
570
  }
571
571
  @layer components {
@@ -584,7 +584,7 @@
584
584
  }
585
585
  .canopy-nav-links a:hover,
586
586
  .canopy-nav-links a:focus-visible {
587
- color: var(--color-brand-default);
587
+ color: var(--color-accent-default);
588
588
  outline: none;
589
589
  }
590
590
  .canopy-modal--nav .canopy-modal__panel {
@@ -762,10 +762,10 @@
762
762
  .canopy-interstitial--hero {
763
763
  --hero-height: 520px;
764
764
  --hero-bg-start: var(--color-gray-50);
765
- --hero-bg-mid: var(--color-brand-100);
766
- --hero-bg-end: var(--color-brand-200);
767
- --hero-dot-bg: var(--color-brand-300);
768
- --hero-dot-active-bg: var(--color-brand-700);
765
+ --hero-bg-mid: var(--color-accent-100);
766
+ --hero-bg-end: var(--color-accent-200);
767
+ --hero-dot-bg: var(--color-accent-300);
768
+ --hero-dot-active-bg: var(--color-accent-700);
769
769
  background: linear-gradient(173deg, var(--hero-bg-start) 5rem, var(--hero-bg-mid) 61.8%, var(--hero-bg-end) 100%);
770
770
  min-height: var(--hero-height);
771
771
  }
@@ -1024,9 +1024,9 @@
1024
1024
  transform: rotate(-45deg);
1025
1025
  }
1026
1026
  .canopy-interstitial__nav-btn:hover, .canopy-interstitial__nav-btn:focus-visible {
1027
- background-color: color-mix(in srgb, var(--color-brand-200) 55%, transparent);
1028
- border-color: color-mix(in srgb, var(--color-brand-400) 70%, transparent);
1029
- color: var(--color-brand-700);
1027
+ background-color: color-mix(in srgb, var(--color-accent-200) 55%, transparent);
1028
+ border-color: color-mix(in srgb, var(--color-accent-400) 70%, transparent);
1029
+ color: var(--color-accent-700);
1030
1030
  }
1031
1031
  .canopy-interstitial__pagination {
1032
1032
  position: absolute;
@@ -1147,14 +1147,14 @@
1147
1147
  transition: opacity var(--duration-fast) ease;
1148
1148
  }
1149
1149
  .canopy-search-form-shell:focus-within {
1150
- background-color: var(--color-brand-100);
1150
+ background-color: var(--color-accent-100);
1151
1151
  }
1152
1152
  .canopy-search-form-shell:focus-within input[data-canopy-search-form-input] {
1153
1153
  opacity: 1;
1154
1154
  caret-color: var(--color-gray-900);
1155
1155
  }
1156
1156
  .canopy-search-form-shell:focus-within svg {
1157
- fill: var(--color-brand-default);
1157
+ fill: var(--color-accent-default);
1158
1158
  }
1159
1159
  .canopy-search-form-shell[data-has-value="1"] input[data-canopy-search-form-input] {
1160
1160
  opacity: 1;
@@ -1172,14 +1172,14 @@
1172
1172
  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);
1173
1173
  }
1174
1174
  .canopy-search-form:focus-within {
1175
- border-color: var(--color-brand-500);
1176
- box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-brand-500) 45%, transparent), var(--shadow-sm);
1175
+ border-color: var(--color-accent-500);
1176
+ box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent-500) 45%, transparent), var(--shadow-sm);
1177
1177
  }
1178
1178
  .canopy-search-form:focus-within .canopy-search-form__icon {
1179
- color: var(--color-brand-500);
1179
+ color: var(--color-accent-500);
1180
1180
  }
1181
1181
  .canopy-search-form[data-has-value="1"] .canopy-search-form__icon {
1182
- color: var(--color-brand-500);
1182
+ color: var(--color-accent-500);
1183
1183
  }
1184
1184
 
1185
1185
  .canopy-search-form__label {
@@ -1207,11 +1207,11 @@
1207
1207
  transition: color var(--duration-fast) var(--easing-standard);
1208
1208
  }
1209
1209
  .canopy-search-form__clear:hover, .canopy-search-form__clear:focus-visible {
1210
- color: var(--color-brand-default);
1210
+ color: var(--color-accent-default);
1211
1211
  }
1212
1212
  .canopy-search-form__clear:focus-visible {
1213
1213
  outline: none;
1214
- box-shadow: 0 0 0 2px var(--color-gray-100), 0 0 0 4px color-mix(in srgb, var(--color-brand-800) 65%, transparent);
1214
+ box-shadow: 0 0 0 2px var(--color-gray-100), 0 0 0 4px color-mix(in srgb, var(--color-accent-800) 65%, transparent);
1215
1215
  border-radius: 999px;
1216
1216
  }
1217
1217
 
@@ -1238,7 +1238,7 @@
1238
1238
  border-radius: 0.382rem;
1239
1239
  margin-right: 1px;
1240
1240
  border: 0;
1241
- background: var(--color-brand-default);
1241
+ background: var(--color-accent-default);
1242
1242
  color: #fff;
1243
1243
  font-weight: 300;
1244
1244
  font-size: 1rem;
@@ -1247,12 +1247,12 @@
1247
1247
  cursor: pointer;
1248
1248
  }
1249
1249
  .canopy-search-form__submit:hover, .canopy-search-form__submit:focus-visible {
1250
- background: var(--color-brand-800);
1250
+ background: var(--color-accent-800);
1251
1251
  box-shadow: var(--shadow-md);
1252
1252
  }
1253
1253
  .canopy-search-form__submit:focus-visible {
1254
1254
  outline: none;
1255
- box-shadow: 0 0 0 2px var(--color-gray-100), 0 0 0 4px color-mix(in srgb, var(--color-brand-500) 65%, transparent);
1255
+ box-shadow: 0 0 0 2px var(--color-gray-100), 0 0 0 4px color-mix(in srgb, var(--color-accent-500) 65%, transparent);
1256
1256
  }
1257
1257
  .canopy-search-form__submit:active {
1258
1258
  transform: translateY(1px);
@@ -1291,8 +1291,8 @@
1291
1291
  transition: all 0.2s ease-in-out;
1292
1292
  }
1293
1293
  .canopy-search-tabs button.active, .canopy-search-tabs button:hover {
1294
- color: var(--color-brand-default);
1295
- background-color: var(--color-brand-100);
1294
+ color: var(--color-accent-default);
1295
+ background-color: var(--color-accent-100);
1296
1296
  border-radius: 0.382rem;
1297
1297
  font-weight: 400;
1298
1298
  }
@@ -1483,8 +1483,8 @@
1483
1483
  }
1484
1484
  .canopy-search-filters__quick-input:focus {
1485
1485
  outline: none;
1486
- border-color: var(--color-brand-500);
1487
- box-shadow: 0 0 0 1px var(--color-brand-500);
1486
+ border-color: var(--color-accent-500);
1487
+ box-shadow: 0 0 0 1px var(--color-accent-500);
1488
1488
  }
1489
1489
  .canopy-search-filters__quick-clear {
1490
1490
  border-radius: 0.375rem;
@@ -1520,8 +1520,8 @@
1520
1520
  height: 1rem;
1521
1521
  border-radius: 0.375rem;
1522
1522
  border: 1px solid var(--color-gray-300);
1523
- color: var(--color-brand-500);
1524
- accent-color: var(--color-brand-500);
1523
+ color: var(--color-accent-500);
1524
+ accent-color: var(--color-accent-500);
1525
1525
  }
1526
1526
  .canopy-search-filters__facet-label {
1527
1527
  display: flex;
@@ -1568,12 +1568,12 @@
1568
1568
  }
1569
1569
  .canopy-search-filters__button--primary {
1570
1570
  border: none;
1571
- background: var(--color-brand-600);
1571
+ background: var(--color-accent-600);
1572
1572
  color: var(--color-gray-50);
1573
1573
  }
1574
1574
  .canopy-search-filters__button--primary:hover,
1575
1575
  .canopy-search-filters__button--primary:focus-visible {
1576
- background: var(--color-brand-700);
1576
+ background: var(--color-accent-700);
1577
1577
  outline: none;
1578
1578
  }
1579
1579
  @media (max-width: 48rem) {
@@ -1628,7 +1628,7 @@
1628
1628
  }
1629
1629
 
1630
1630
  .canopy-sub-navigation__link:hover {
1631
- color: var(--color-brand-default);
1631
+ color: var(--color-accent-default);
1632
1632
  }
1633
1633
 
1634
1634
  .canopy-sub-navigation__link.is-label {
@@ -1684,7 +1684,7 @@
1684
1684
  background-color: rgb(255, 255, 255);
1685
1685
  border-color: var(--color-gray-300);
1686
1686
  outline: none;
1687
- box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-brand-200) 60%, transparent);
1687
+ box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent-200) 60%, transparent);
1688
1688
  }
1689
1689
 
1690
1690
  .canopy-layout__content-nav.is-collapsed .canopy-content-navigation {
@@ -1712,4 +1712,5 @@
1712
1712
 
1713
1713
  /**
1714
1714
  * Define source files for utility classes
1715
- */
1715
+ */
1716
+ @source "../dist";
package/ui/styles/index.scss CHANGED
@@ -7,4 +7,4 @@
7
7
  /**
8
8
  * Define source files for utility classes
9
9
  */
10
- // @source "../dist";
10
+ @source "../dist";
package/ui/theme.js CHANGED
@@ -155,9 +155,9 @@ function buildVariablesMap(brandScale, grayScale, options = {}) {
155
155
  if (brandScale) {
156
156
  for (const lvl of LEVELS) {
157
157
  const value = brandScale[lvl];
158
- if (value) vars[`--color-brand-${lvl}`] = value;
158
+ if (value) vars[`--color-accent-${lvl}`] = value;
159
159
  }
160
- if (brandScale["700"]) vars["--color-brand-default"] = brandScale["700"];
160
+ if (brandScale["700"]) vars["--color-accent-default"] = brandScale["700"];
161
161
  }
162
162
  if (grayScale) {
163
163
  for (const lvl of LEVELS) {
@@ -272,21 +272,6 @@ function loadCanopyTheme(options = {}) {
272
272
  },
273
273
  });
274
274
 
275
- if (
276
- !DEBUG_ENABLED &&
277
- (accentName !== DEFAULT_ACCENT || grayName !== DEFAULT_GRAY)
278
- ) {
279
- try {
280
- console.log("[canopy-theme]", "resolved", {
281
- appearance,
282
- accent: accentName,
283
- accent500: accentScale && accentScale["500"],
284
- gray: grayName,
285
- gray500: grayScale && grayScale["500"],
286
- });
287
- } catch (_) {}
288
- }
289
-
290
275
  return {
291
276
  appearance,
292
277
  accent: {name: accentName, scale: accentScale},