@canopy-iiif/app 0.8.4 → 0.8.6

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 (31) hide show
  1. package/lib/build/iiif.js +361 -84
  2. package/lib/build/mdx.js +16 -8
  3. package/lib/build/pages.js +2 -1
  4. package/lib/build/styles.js +53 -1
  5. package/lib/common.js +28 -6
  6. package/lib/search/search-app.jsx +177 -25
  7. package/lib/search/search-form-runtime.js +126 -19
  8. package/lib/search/search.js +130 -18
  9. package/package.json +4 -1
  10. package/ui/dist/index.mjs +239 -97
  11. package/ui/dist/index.mjs.map +4 -4
  12. package/ui/dist/server.mjs +129 -72
  13. package/ui/dist/server.mjs.map +4 -4
  14. package/ui/styles/_variables.scss +1 -0
  15. package/ui/styles/base/_common.scss +27 -5
  16. package/ui/styles/base/_heading.scss +2 -4
  17. package/ui/styles/base/index.scss +1 -0
  18. package/ui/styles/components/_card.scss +47 -4
  19. package/ui/styles/components/_sub-navigation.scss +14 -14
  20. package/ui/styles/components/header/_header.scss +1 -4
  21. package/ui/styles/components/header/_logo.scss +33 -10
  22. package/ui/styles/components/search/_filters.scss +5 -7
  23. package/ui/styles/components/search/_form.scss +55 -17
  24. package/ui/styles/components/search/_results.scss +13 -15
  25. package/ui/styles/index.css +250 -72
  26. package/ui/styles/index.scss +2 -4
  27. package/ui/tailwind-canopy-iiif-plugin.js +10 -2
  28. package/ui/tailwind-canopy-iiif-preset.js +21 -19
  29. package/ui/theme.js +303 -0
  30. package/ui/styles/variables.emit.scss +0 -72
  31. package/ui/styles/variables.scss +0 -76
package/ui/styles/components/search/_form.scss CHANGED
@@ -1,11 +1,13 @@
1
- @use "../../variables" as *;
2
-
3
1
  .canopy-search-form-shell {
4
2
  --search-form-label-padding-x: 0.75rem;
5
3
  --search-form-label-padding-y: 0.625rem;
6
4
  position: relative;
7
5
  backdrop-filter: blur(12px);
8
- background-color: color-mix(in srgb, #fff 95%, transparent);
6
+ background-color: color-mix(
7
+ in srgb,
8
+ var(--color-gray-100, #f0f0f3) 95%,
9
+ transparent
10
+ );
9
11
  transition:
10
12
  box-shadow var(--duration-fast, 150ms) ease,
11
13
  background-color var(--duration-fast, 150ms) ease;
@@ -36,9 +38,13 @@
36
38
  );
37
39
  }
38
40
 
39
- &:focus-within::after,
40
- &[data-has-value="1"]::after {
41
- opacity: 0;
41
+ svg {
42
+ width: 1.25rem;
43
+ height: 1.25rem;
44
+ flex-shrink: 0;
45
+ fill: var(--color-gray-400, #b9bbc6);
46
+ pointer-events: none;
47
+ transition: fill var(--duration-fast, 150ms) var(--easing-standard, ease);
42
48
  }
43
49
 
44
50
  input[data-canopy-search-form-input] {
@@ -47,12 +53,23 @@
47
53
  outline: none;
48
54
  background: transparent;
49
55
  box-shadow: none;
50
- opacity: 0;
51
56
  caret-color: transparent;
52
57
  transition: opacity var(--duration-fast, 150ms) ease;
53
58
  }
54
59
 
55
- &:focus-within input[data-canopy-search-form-input],
60
+ &:focus-within {
61
+ background-color: var(--color-brand-100);
62
+
63
+ input[data-canopy-search-form-input] {
64
+ opacity: 1;
65
+ caret-color: var(--color-gray-900, #121418);
66
+ }
67
+
68
+ svg {
69
+ fill: var(--color-brand-default, #3e63dd);
70
+ }
71
+ }
72
+
56
73
  &[data-has-value="1"] input[data-canopy-search-form-input] {
57
74
  opacity: 1;
58
75
  caret-color: var(--color-gray-900, #121418);
@@ -101,13 +118,33 @@
101
118
  padding: var(--search-form-label-padding-y) var(--search-form-label-padding-x);
102
119
  }
103
120
 
104
- .canopy-search-form__icon {
105
- width: 1.25rem;
106
- height: 1.25rem;
107
- flex-shrink: 0;
108
- color: var(--color-gray-400, #b9bbc6);
109
- pointer-events: none;
121
+ .canopy-search-form__clear {
122
+ border: 0;
123
+ background: transparent;
124
+ color: rgba(100, 116, 139, 0.9);
125
+ font-size: 1.25rem;
126
+ line-height: 1;
127
+ padding: 0 0.25rem;
128
+ margin-right: 0.25rem;
129
+ display: inline-flex;
130
+ align-items: center;
131
+ justify-content: center;
132
+ cursor: pointer;
110
133
  transition: color var(--duration-fast, 150ms) var(--easing-standard, ease);
134
+
135
+ &:hover,
136
+ &:focus-visible {
137
+ color: var(--color-brand-600, #3e63dd);
138
+ }
139
+
140
+ &:focus-visible {
141
+ outline: none;
142
+ box-shadow:
143
+ 0 0 0 2px var(--color-gray-100, #ffffff),
144
+ 0 0 0 4px
145
+ color-mix(in srgb, var(--color-brand-500, #3e63dd) 65%, transparent);
146
+ border-radius: 999px;
147
+ }
111
148
  }
112
149
 
113
150
  .canopy-search-form__input {
@@ -134,8 +171,9 @@
134
171
  align-items: center;
135
172
  gap: 0.382rem;
136
173
  border-radius: 0.382rem;
174
+ margin-right: 1px;
137
175
  border: 0;
138
- background: $color-brand-default;
176
+ background: var(--color-brand-default);
139
177
  color: #fff;
140
178
  font-weight: 400;
141
179
  font-size: 1rem;
@@ -147,14 +185,14 @@
147
185
 
148
186
  &:hover,
149
187
  &:focus-visible {
150
- background: $color-brand-800;
188
+ background: var(--color-brand-800);
151
189
  box-shadow: var(--shadow-md, 0 4px 6px rgba(0, 0, 0, 0.1));
152
190
  }
153
191
 
154
192
  &:focus-visible {
155
193
  outline: none;
156
194
  box-shadow:
157
- 0 0 0 2px #fff,
195
+ 0 0 0 2px var(--color-gray-100, #ffffff),
158
196
  0 0 0 4px
159
197
  color-mix(in srgb, var(--color-brand-500, #3e63dd) 65%, transparent);
160
198
  }
package/ui/styles/components/search/_results.scss CHANGED
@@ -1,5 +1,3 @@
1
- @use "../../variables" as *;
2
-
3
1
  .canopy-search-tabs-wrapper {
4
2
  display: flex;
5
3
  flex-wrap: wrap;
@@ -23,13 +21,13 @@
23
21
  padding: 0.382rem 0.618rem;
24
22
  font-size: 1rem;
25
23
  cursor: pointer;
26
- color: $color-gray-600;
24
+ color: var(--color-gray-600);
27
25
  transition: all 0.2s ease-in-out;
28
26
 
29
27
  &.active,
30
28
  &:hover {
31
- color: $color-brand-default;
32
- background-color: $color-brand-100;
29
+ color: var(--color-brand-default);
30
+ background-color: var(--color-brand-100);
33
31
  border-radius: 0.382rem;
34
32
  font-weight: 400;
35
33
  }
@@ -42,9 +40,9 @@
42
40
  align-items: center;
43
41
  gap: 0.25rem;
44
42
  padding: 0.25rem 0.5rem;
45
- border: 1px solid #e5e7eb;
46
- color: #374151;
47
- background: #fff;
43
+ border: 1px solid var(--color-gray-200, #e5e7eb);
44
+ color: var(--color-gray-700, #374151);
45
+ background: var(--color-gray-100, #ffffff);
48
46
  border-radius: 6px;
49
47
  cursor: pointer;
50
48
  }
@@ -62,7 +60,7 @@
62
60
 
63
61
  .canopy-search-form-modal__panel {
64
62
  position: relative;
65
- background: #fff;
63
+ background: var(--color-gray-100, #ffffff);
66
64
  min-width: 320px;
67
65
  max-width: 720px;
68
66
  width: 90%;
@@ -85,8 +83,8 @@
85
83
  position: absolute;
86
84
  top: 8px;
87
85
  right: 8px;
88
- border: 1px solid #e5e7eb;
89
- background: #fff;
86
+ border: 1px solid var(--color-gray-200, #e5e7eb);
87
+ background: var(--color-gray-100, #ffffff);
90
88
  border-radius: 6px;
91
89
  padding: 2px 6px;
92
90
  cursor: pointer;
@@ -94,13 +92,13 @@
94
92
 
95
93
  .canopy-search-form-modal__inputWrap {
96
94
  padding: 10px 12px;
97
- border-bottom: 1px solid #e5e7eb;
95
+ border-bottom: 1px solid var(--color-gray-200, #e5e7eb);
98
96
  }
99
97
 
100
98
  .canopy-search-form-modal__input {
101
99
  width: 100%;
102
100
  padding: 8px 10px;
103
- border: 1px solid #e5e7eb;
101
+ border: 1px solid var(--color-gray-200, #e5e7eb);
104
102
  border-radius: 6px;
105
103
  outline: none;
106
104
  }
@@ -141,8 +139,8 @@
141
139
  left: 0;
142
140
  right: 0;
143
141
  top: calc(100% + 4px);
144
- background: #fff;
145
- border: 1px solid #e5e7eb;
142
+ background: var(--color-gray-100, #ffffff);
143
+ border: 1px solid var(--color-gray-200, #e5e7eb);
146
144
  border-radius: 8px;
147
145
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
148
146
  z-index: 1000;