@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/components/_buttons.scss CHANGED
@@ -16,13 +16,13 @@
16
16
  box-shadow 0.2s ease;
17
17
 
18
18
  &--primary {
19
- background-color: var(--color-brand-default);
19
+ background-color: var(--color-accent-default);
20
20
  color: var(--color-gray-50);
21
21
  box-shadow: 0 18px 32px -22px rgba(15, 23, 42, 0.55);
22
22
 
23
23
  &:hover,
24
24
  &:focus-visible {
25
- background-color: var(--color-brand-800);
25
+ background-color: var(--color-accent-800);
26
26
  color: var(--color-gray-50);
27
27
  }
28
28
  }
@@ -37,15 +37,15 @@
37
37
  &:focus-visible {
38
38
  border-color: color-mix(
39
39
  in srgb,
40
- var(--color-brand-400) 65%,
40
+ var(--color-accent-400) 65%,
41
41
  transparent
42
42
  );
43
43
  background-color: color-mix(
44
44
  in srgb,
45
- var(--color-brand-200) 25%,
45
+ var(--color-accent-200) 25%,
46
46
  transparent
47
47
  );
48
- color: var(--color-brand-700);
48
+ color: var(--color-accent-700);
49
49
  }
50
50
  }
51
51
  }
@@ -84,7 +84,7 @@
84
84
  background: linear-gradient(
85
85
  173deg,
86
86
  transparent 0%,
87
- var(--color-brand-200) 100%
87
+ var(--color-accent-200) 100%
88
88
  );
89
89
  }
90
90
 
package/ui/styles/components/_card.scss CHANGED
@@ -71,7 +71,7 @@
71
71
 
72
72
  &:hover,
73
73
  &:focus {
74
- color: var(--color-brand-default);
74
+ color: var(--color-accent-default);
75
75
  box-shadow:
76
76
  0 1px 2px 0 rgba(0, 0, 0, 0.07),
77
77
  0 1px 2px 0 rgba(0, 0, 0, 0.07);
@@ -85,7 +85,7 @@
85
85
 
86
86
  mark {
87
87
  color: var(--color-gray-900);
88
- background-color: var(--color-brand-300);
88
+ background-color: var(--color-accent-300);
89
89
  padding: 0.1rem 0.25rem;
90
90
  border-radius: 0.25rem;
91
91
  margin: 0 -0.25rem;
package/ui/styles/components/_interstitial-hero.scss CHANGED
@@ -10,10 +10,10 @@
10
10
  &--hero {
11
11
  --hero-height: 520px;
12
12
  --hero-bg-start: var(--color-gray-50);
13
- --hero-bg-mid: var(--color-brand-100);
14
- --hero-bg-end: var(--color-brand-200);
15
- --hero-dot-bg: var(--color-brand-300);
16
- --hero-dot-active-bg: var(--color-brand-700);
13
+ --hero-bg-mid: var(--color-accent-100);
14
+ --hero-bg-end: var(--color-accent-200);
15
+ --hero-dot-bg: var(--color-accent-300);
16
+ --hero-dot-active-bg: var(--color-accent-700);
17
17
 
18
18
  background: linear-gradient(
19
19
  173deg,
@@ -336,15 +336,15 @@
336
336
  &:focus-visible {
337
337
  background-color: color-mix(
338
338
  in srgb,
339
- var(--color-brand-200) 55%,
339
+ var(--color-accent-200) 55%,
340
340
  transparent
341
341
  );
342
342
  border-color: color-mix(
343
343
  in srgb,
344
- var(--color-brand-400) 70%,
344
+ var(--color-accent-400) 70%,
345
345
  transparent
346
346
  );
347
- color: var(--color-brand-700);
347
+ color: var(--color-accent-700);
348
348
  }
349
349
  }
350
350
 
package/ui/styles/components/_sub-navigation.scss CHANGED
@@ -32,7 +32,7 @@
32
32
  }
33
33
 
34
34
  .canopy-sub-navigation__link:hover {
35
- color: var(--color-brand-default);
35
+ color: var(--color-accent-default);
36
36
  }
37
37
 
38
38
  .canopy-sub-navigation__link.is-label {
@@ -92,7 +92,7 @@
92
92
  background-color: rgba(255, 255, 255, 1);
93
93
  border-color: var(--color-gray-300);
94
94
  outline: none;
95
- box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-brand-200) 60%, transparent);
95
+ box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent-200) 60%, transparent);
96
96
  }
97
97
 
98
98
  .canopy-layout__content-nav.is-collapsed .canopy-content-navigation {
package/ui/styles/components/header/_logo.scss CHANGED
@@ -16,13 +16,13 @@
16
16
  display: block;
17
17
 
18
18
  circle.canopy-logo-backlight {
19
- fill: var(--color-brand-900);
20
- color: var(--color-brand-900);
19
+ fill: var(--color-accent-900);
20
+ color: var(--color-accent-900);
21
21
  }
22
22
 
23
23
  path.canopy-logo-overlay {
24
- fill: var(--color-brand-default);
25
- color: var(--color-brand-default);
24
+ fill: var(--color-accent-default);
25
+ color: var(--color-accent-default);
26
26
  }
27
27
  }
28
28
  }
@@ -30,13 +30,13 @@
30
30
  html.dark .canopy-logo {
31
31
  svg {
32
32
  circle.canopy-logo-backlight {
33
- fill: var(--color-brand-200) !important;
34
- color: var(--color-brand-200) !important;
33
+ fill: var(--color-accent-200) !important;
34
+ color: var(--color-accent-200) !important;
35
35
  }
36
36
 
37
37
  path.canopy-logo-overlay {
38
- fill: var(--color-brand-500) !important;
39
- color: var(--color-brand-500) !important;
38
+ fill: var(--color-accent-500) !important;
39
+ color: var(--color-accent-500) !important;
40
40
  }
41
41
  }
42
42
  }
package/ui/styles/components/header/_navbar.scss CHANGED
@@ -16,7 +16,7 @@
16
16
 
17
17
  .canopy-nav-links a:hover,
18
18
  .canopy-nav-links a:focus-visible {
19
- color: var(--color-brand-default);
19
+ color: var(--color-accent-default);
20
20
  outline: none;
21
21
  }
22
22
 
package/ui/styles/components/search/_filters.scss CHANGED
@@ -98,8 +98,8 @@
98
98
 
99
99
  &:focus {
100
100
  outline: none;
101
- border-color: var(--color-brand-500);
102
- box-shadow: 0 0 0 1px var(--color-brand-500);
101
+ border-color: var(--color-accent-500);
102
+ box-shadow: 0 0 0 1px var(--color-accent-500);
103
103
  }
104
104
  }
105
105
 
@@ -142,8 +142,8 @@
142
142
  height: 1rem;
143
143
  border-radius: 0.375rem;
144
144
  border: 1px solid var(--color-gray-300);
145
- color: var(--color-brand-500);
146
- accent-color: var(--color-brand-500);
145
+ color: var(--color-accent-500);
146
+ accent-color: var(--color-accent-500);
147
147
  }
148
148
 
149
149
  .canopy-search-filters__facet-label {
@@ -199,13 +199,13 @@
199
199
 
200
200
  .canopy-search-filters__button--primary {
201
201
  border: none;
202
- background: var(--color-brand-600);
202
+ background: var(--color-accent-600);
203
203
  color: var(--color-gray-50);
204
204
  }
205
205
 
206
206
  .canopy-search-filters__button--primary:hover,
207
207
  .canopy-search-filters__button--primary:focus-visible {
208
- background: var(--color-brand-700);
208
+ background: var(--color-accent-700);
209
209
  outline: none;
210
210
  }
211
211
 
package/ui/styles/components/search/_form.scss CHANGED
@@ -54,7 +54,7 @@
54
54
  }
55
55
 
56
56
  &:focus-within {
57
- background-color: var(--color-brand-100);
57
+ background-color: var(--color-accent-100);
58
58
 
59
59
  input[data-canopy-search-form-input] {
60
60
  opacity: 1;
@@ -62,7 +62,7 @@
62
62
  }
63
63
 
64
64
  svg {
65
- fill: var(--color-brand-default);
65
+ fill: var(--color-accent-default);
66
66
  }
67
67
  }
68
68
 
@@ -86,19 +86,19 @@
86
86
  background-color var(--duration-fast) var(--easing-standard);
87
87
 
88
88
  &:focus-within {
89
- border-color: var(--color-brand-500);
89
+ border-color: var(--color-accent-500);
90
90
  box-shadow:
91
- 0 0 0 2px color-mix(in srgb, var(--color-brand-500) 45%, transparent),
91
+ 0 0 0 2px color-mix(in srgb, var(--color-accent-500) 45%, transparent),
92
92
  var(--shadow-sm);
93
93
 
94
94
  .canopy-search-form__icon {
95
- color: var(--color-brand-500);
95
+ color: var(--color-accent-500);
96
96
  }
97
97
  }
98
98
 
99
99
  &[data-has-value="1"] {
100
100
  .canopy-search-form__icon {
101
- color: var(--color-brand-500);
101
+ color: var(--color-accent-500);
102
102
  }
103
103
  }
104
104
  }
@@ -129,14 +129,14 @@
129
129
 
130
130
  &:hover,
131
131
  &:focus-visible {
132
- color: var(--color-brand-default);
132
+ color: var(--color-accent-default);
133
133
  }
134
134
 
135
135
  &:focus-visible {
136
136
  outline: none;
137
137
  box-shadow:
138
138
  0 0 0 2px var(--color-gray-100),
139
- 0 0 0 4px color-mix(in srgb, var(--color-brand-800) 65%, transparent);
139
+ 0 0 0 4px color-mix(in srgb, var(--color-accent-800) 65%, transparent);
140
140
  border-radius: 999px;
141
141
  }
142
142
  }
@@ -167,7 +167,7 @@
167
167
  border-radius: 0.382rem;
168
168
  margin-right: 1px;
169
169
  border: 0;
170
- background: var(--color-brand-default);
170
+ background: var(--color-accent-default);
171
171
  color: #fff;
172
172
  font-weight: 300;
173
173
  font-size: 1rem;
@@ -179,7 +179,7 @@
179
179
 
180
180
  &:hover,
181
181
  &:focus-visible {
182
- background: var(--color-brand-800);
182
+ background: var(--color-accent-800);
183
183
  box-shadow: var(--shadow-md);
184
184
  }
185
185
 
@@ -187,7 +187,7 @@
187
187
  outline: none;
188
188
  box-shadow:
189
189
  0 0 0 2px var(--color-gray-100),
190
- 0 0 0 4px color-mix(in srgb, var(--color-brand-500) 65%, transparent);
190
+ 0 0 0 4px color-mix(in srgb, var(--color-accent-500) 65%, transparent);
191
191
  }
192
192
 
193
193
  &:active {
package/ui/styles/components/search/_results.scss CHANGED
@@ -26,8 +26,8 @@
26
26
 
27
27
  &.active,
28
28
  &:hover {
29
- color: var(--color-brand-default);
30
- background-color: var(--color-brand-100);
29
+ color: var(--color-accent-default);
30
+ background-color: var(--color-accent-100);
31
31
  border-radius: 0.382rem;
32
32
  font-weight: 400;
33
33
  }