@canopy-iiif/app 0.10.7 → 0.10.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 (16) hide show
  1. package/package.json +1 -1
  2. package/ui/styles/base/_utilities.scss +3 -0
  3. package/ui/styles/base/index.scss +1 -0
  4. package/ui/styles/components/_buttons.scss +9 -9
  5. package/ui/styles/components/_card.scss +1 -1
  6. package/ui/styles/components/_interstitial-hero.scss +4 -4
  7. package/ui/styles/components/_sub-navigation.scss +3 -3
  8. package/ui/styles/components/header/_header.scss +6 -6
  9. package/ui/styles/components/header/_navbar.scss +2 -2
  10. package/ui/styles/components/modal/_modal.scss +5 -5
  11. package/ui/styles/components/search/_filters.scss +49 -49
  12. package/ui/styles/components/search/_form.scss +31 -33
  13. package/ui/styles/components/search/_results.scss +13 -13
  14. package/ui/styles/index.css +116 -113
  15. package/ui/tailwind-canopy-iiif-preset.js +0 -83
  16. package/ui/theme.js +1 -32
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@canopy-iiif/app",
3
- "version": "0.10.7",
3
+ "version": "0.10.9",
4
4
  "private": false,
5
5
  "license": "MIT",
6
6
  "author": "Mat Jordan <mat@northwestern.edu>",
package/ui/styles/base/_utilities.scss ADDED
@@ -0,0 +1,3 @@
1
+ @utility max-w-content {
2
+ max-width: 1080px;
3
+ }
package/ui/styles/base/index.scss CHANGED
@@ -1,3 +1,4 @@
1
1
  @use "./common";
2
2
  @use "./heading";
3
3
  @use "./markdown";
4
+ @use "./utilities";
package/ui/styles/components/_buttons.scss CHANGED
@@ -16,23 +16,23 @@
16
16
  box-shadow 0.2s ease;
17
17
 
18
18
  &--primary {
19
- background-color: var(--color-brand-default, #4f46e5);
20
- color: var(--color-gray-50, #f9fafb);
19
+ background-color: var(--color-brand-default);
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, #4338ca);
26
- color: var(--color-gray-50, #f9fafb);
25
+ background-color: var(--color-brand-800);
26
+ color: var(--color-gray-50);
27
27
  }
28
28
  }
29
29
 
30
30
  &--secondary {
31
31
  border: 1px solid
32
- color-mix(in srgb, var(--color-gray-400, #94a3b8) 60%, transparent);
32
+ color-mix(in srgb, var(--color-gray-400) 60%, transparent);
33
33
  color: color-mix(
34
34
  in srgb,
35
- var(--color-gray-900, #0f172a) 92%,
35
+ var(--color-gray-900) 92%,
36
36
  transparent
37
37
  );
38
38
  background-color: var(--color-gray-50);
@@ -41,15 +41,15 @@
41
41
  &:focus-visible {
42
42
  border-color: color-mix(
43
43
  in srgb,
44
- var(--color-brand-400, #818cf8) 65%,
44
+ var(--color-brand-400) 65%,
45
45
  transparent
46
46
  );
47
47
  background-color: color-mix(
48
48
  in srgb,
49
- var(--color-brand-200, #c7d2fe) 25%,
49
+ var(--color-brand-200) 25%,
50
50
  transparent
51
51
  );
52
- color: var(--color-brand-700, #4338ca);
52
+ color: var(--color-brand-700);
53
53
  }
54
54
  }
55
55
  }
package/ui/styles/components/_card.scss CHANGED
@@ -19,7 +19,7 @@
19
19
  .canopy-card-media {
20
20
  position: relative;
21
21
  width: 100%;
22
- padding-bottom: var(--canopy-card-padding, 100%);
22
+ padding-bottom: var(--canopy-card-padding);
23
23
  background-color: rgb(229 231 235); /* slate-200 */
24
24
  overflow: hidden;
25
25
 
package/ui/styles/components/_interstitial-hero.scss CHANGED
@@ -294,10 +294,10 @@
294
294
  height: 2.75rem;
295
295
  border-radius: 9999px;
296
296
  border: 1px solid
297
- color-mix(in srgb, var(--color-gray-400, #94a3b8) 55%, transparent);
297
+ color-mix(in srgb, var(--color-gray-400) 55%, transparent);
298
298
  background-color: color-mix(
299
299
  in srgb,
300
- var(--color-gray-100, #f1f5f9) 65%,
300
+ var(--color-gray-100) 65%,
301
301
  transparent
302
302
  );
303
303
  backdrop-filter: blur(6px);
@@ -341,10 +341,10 @@
341
341
  );
342
342
  border-color: color-mix(
343
343
  in srgb,
344
- var(--color-brand-400, #818cf8) 70%,
344
+ var(--color-brand-400) 70%,
345
345
  transparent
346
346
  );
347
- color: var(--color-brand-700, #4338ca);
347
+ color: var(--color-brand-700);
348
348
  }
349
349
  }
350
350
 
package/ui/styles/components/_sub-navigation.scss CHANGED
@@ -74,7 +74,7 @@
74
74
  gap: 0.25rem;
75
75
  padding: 0.25rem 0.75rem;
76
76
  border-radius: 9999px;
77
- border: 1px solid var(--color-gray-200, #e4e4e7);
77
+ border: 1px solid var(--color-gray-200);
78
78
  background-color: rgba(255, 255, 255, 0.9);
79
79
  color: inherit;
80
80
  font-size: 0.75rem;
@@ -90,9 +90,9 @@
90
90
  .canopy-content-navigation__toggle:hover,
91
91
  .canopy-content-navigation__toggle:focus-visible {
92
92
  background-color: rgba(255, 255, 255, 1);
93
- border-color: var(--color-gray-300, #d4d4d8);
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, #c7d2fe) 60%, transparent);
95
+ box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-brand-200) 60%, transparent);
96
96
  }
97
97
 
98
98
  .canopy-layout__content-nav.is-collapsed .canopy-content-navigation {
package/ui/styles/components/header/_header.scss CHANGED
@@ -24,9 +24,9 @@
24
24
  width: 2.5rem;
25
25
  height: 2.5rem;
26
26
  border-radius: 0.75rem;
27
- border: 1px solid var(--color-gray-200, #e2e8f0);
27
+ border: 1px solid var(--color-gray-200);
28
28
  background: rgba(255, 255, 255, 0.8);
29
- color: var(--color-gray-800, #1f2937);
29
+ color: var(--color-gray-800);
30
30
  transition:
31
31
  background 150ms ease,
32
32
  color 150ms ease,
@@ -36,7 +36,7 @@
36
36
  .canopy-header__menu:hover,
37
37
  .canopy-header__menu:focus-visible {
38
38
  background: rgba(255, 255, 255, 0.95);
39
- color: var(--color-gray-900, #0f172a);
39
+ color: var(--color-gray-900);
40
40
  outline: none;
41
41
  }
42
42
 
@@ -81,9 +81,9 @@
81
81
  width: 2.5rem;
82
82
  height: 2.5rem;
83
83
  border-radius: 0.75rem;
84
- border: 1px solid var(--color-gray-200, #e2e8f0);
84
+ border: 1px solid var(--color-gray-200);
85
85
  background: rgba(255, 255, 255, 0.8);
86
- color: var(--color-gray-800, #1f2937);
86
+ color: var(--color-gray-800);
87
87
  transition:
88
88
  background 150ms ease,
89
89
  color 150ms ease,
@@ -93,7 +93,7 @@
93
93
  .canopy-header__icon-button:hover,
94
94
  .canopy-header__icon-button:focus-visible {
95
95
  background: rgba(255, 255, 255, 1);
96
- color: var(--color-gray-900, #0f172a);
96
+ color: var(--color-gray-900);
97
97
  outline: none;
98
98
  }
99
99
 
package/ui/styles/components/header/_navbar.scss CHANGED
@@ -7,7 +7,7 @@
7
7
  }
8
8
 
9
9
  .canopy-nav-links a {
10
- color: var(--color-gray-900, #0f172a);
10
+ color: var(--color-gray-900);
11
11
  font-weight: 500;
12
12
  text-decoration: none;
13
13
  padding: 0.25rem 0;
@@ -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, #3e63dd);
19
+ color: var(--color-brand-default);
20
20
  outline: none;
21
21
  }
22
22
 
package/ui/styles/components/modal/_modal.scss CHANGED
@@ -24,7 +24,7 @@
24
24
  width: min(100%, 38rem);
25
25
  max-width: 38rem;
26
26
  max-height: min(90vh, 640px);
27
- background: var(--color-gray-50, #f8fafc);
27
+ background: var(--color-gray-50);
28
28
  border-radius: 1rem;
29
29
  box-shadow: 0 28px 60px -24px rgba(15, 23, 42, 0.65);
30
30
  overflow: hidden;
@@ -56,7 +56,7 @@
56
56
  margin: 0 0 1rem;
57
57
  font-size: 1.25rem;
58
58
  font-weight: 600;
59
- color: var(--color-gray-900, #0f172a);
59
+ color: var(--color-gray-900);
60
60
  }
61
61
 
62
62
  .canopy-modal__close {
@@ -69,9 +69,9 @@
69
69
  width: 2.5rem;
70
70
  height: 2.5rem;
71
71
  border-radius: 9999px;
72
- border: 1px solid var(--color-gray-200, #e2e8f0);
72
+ border: 1px solid var(--color-gray-200);
73
73
  background: rgba(255, 255, 255, 0.92);
74
- color: var(--color-gray-700, #334155);
74
+ color: var(--color-gray-700);
75
75
  cursor: pointer;
76
76
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
77
77
  }
@@ -79,7 +79,7 @@
79
79
  .canopy-modal__close:hover,
80
80
  .canopy-modal__close:focus-visible {
81
81
  background: rgba(248, 250, 252, 1);
82
- color: var(--color-gray-900, #0f172a);
82
+ color: var(--color-gray-900);
83
83
  outline: none;
84
84
  }
85
85
 
package/ui/styles/components/search/_filters.scss CHANGED
@@ -2,7 +2,7 @@
2
2
  .canopy-modal--filters .canopy-modal__panel {
3
3
  width: min(100%, 48rem);
4
4
  max-height: min(90vh, 720px);
5
- background: var(--color-gray-100, #ffffff);
5
+ background: var(--color-gray-100);
6
6
  }
7
7
 
8
8
  .canopy-modal--filters .canopy-modal__body--filters {
@@ -14,9 +14,9 @@
14
14
 
15
15
  .canopy-search-filters__subtitle {
16
16
  margin: 0 0 0.75rem;
17
- font-size: var(--font-size-sm, 0.875rem);
18
- line-height: var(--line-height-sm, 1.25rem);
19
- color: var(--color-gray-500, #8b8d98);
17
+ font-size: var(--font-size-sm);
18
+ line-height: var(--line-height-sm);
19
+ color: var(--color-gray-500);
20
20
  }
21
21
 
22
22
  .canopy-search-filters__body {
@@ -31,19 +31,19 @@
31
31
  }
32
32
 
33
33
  .canopy-search-filters__empty {
34
- font-size: var(--font-size-sm, 0.875rem);
35
- line-height: var(--line-height-sm, 1.25rem);
36
- color: var(--color-gray-500, #8b8d98);
34
+ font-size: var(--font-size-sm);
35
+ line-height: var(--line-height-sm);
36
+ color: var(--color-gray-500);
37
37
  }
38
38
 
39
39
  .canopy-search-filters__facet {
40
- border: 1px solid var(--color-gray-200, #e0e1e6);
40
+ border: 1px solid var(--color-gray-200);
41
41
  border-radius: 0.75rem;
42
- background: var(--color-gray-50, #fcfcfd);
42
+ background: var(--color-gray-50);
43
43
  overflow: hidden;
44
44
 
45
45
  &[open] {
46
- background: var(--color-gray-100, #ffffff);
46
+ background: var(--color-gray-100);
47
47
  }
48
48
  }
49
49
 
@@ -53,9 +53,9 @@
53
53
  justify-content: space-between;
54
54
  gap: 0.75rem;
55
55
  padding: 0.75rem 1rem;
56
- font-size: var(--font-size-sm, 0.875rem);
56
+ font-size: var(--font-size-sm);
57
57
  font-weight: 600;
58
- color: var(--color-gray-900, #121418);
58
+ color: var(--color-gray-900);
59
59
  cursor: pointer;
60
60
  list-style: none;
61
61
  }
@@ -65,14 +65,14 @@
65
65
  }
66
66
 
67
67
  .canopy-search-filters__facet-count {
68
- font-size: var(--font-size-xs, 0.75rem);
68
+ font-size: var(--font-size-xs);
69
69
  font-weight: 400;
70
- color: var(--color-gray-500, #8b8d98);
70
+ color: var(--color-gray-500);
71
71
  }
72
72
 
73
73
  .canopy-search-filters__facet-content {
74
- border-top: 1px solid var(--color-gray-200, #e0e1e6);
75
- background: var(--color-gray-100, #ffffff);
74
+ border-top: 1px solid var(--color-gray-200);
75
+ background: var(--color-gray-100);
76
76
  padding: 1rem;
77
77
  max-height: 15rem;
78
78
  overflow-y: auto;
@@ -89,33 +89,33 @@
89
89
  flex: 1;
90
90
  min-width: 0;
91
91
  border-radius: 0.5rem;
92
- border: 1px solid var(--color-gray-300, #cdced6);
92
+ border: 1px solid var(--color-gray-300);
93
93
  padding: 0.375rem 0.75rem;
94
- font-size: var(--font-size-sm, 0.875rem);
95
- color: var(--color-gray-700, #60646c);
96
- transition: border-color var(--duration-fast, 150ms) var(--easing-standard, ease),
97
- box-shadow var(--duration-fast, 150ms) var(--easing-standard, ease);
94
+ font-size: var(--font-size-sm);
95
+ color: var(--color-gray-700);
96
+ transition: border-color var(--duration-fast) var(--easing-standard),
97
+ box-shadow var(--duration-fast) var(--easing-standard);
98
98
 
99
99
  &:focus {
100
100
  outline: none;
101
- border-color: var(--color-brand-500, #3e63dd);
102
- box-shadow: 0 0 0 1px var(--color-brand-500, #3e63dd);
101
+ border-color: var(--color-brand-500);
102
+ box-shadow: 0 0 0 1px var(--color-brand-500);
103
103
  }
104
104
  }
105
105
 
106
106
  .canopy-search-filters__quick-clear {
107
107
  border-radius: 0.375rem;
108
- border: 1px solid var(--color-gray-200, #e0e1e6);
108
+ border: 1px solid var(--color-gray-200);
109
109
  padding: 0.25rem 0.5rem;
110
- font-size: var(--font-size-xs, 0.75rem);
111
- color: var(--color-gray-600, #80838d);
112
- background: var(--color-gray-100, #ffffff);
113
- transition: background-color var(--duration-fast, 150ms) var(--easing-standard, ease),
114
- color var(--duration-fast, 150ms) var(--easing-standard, ease);
110
+ font-size: var(--font-size-xs);
111
+ color: var(--color-gray-600);
112
+ background: var(--color-gray-100);
113
+ transition: background-color var(--duration-fast) var(--easing-standard),
114
+ color var(--duration-fast) var(--easing-standard);
115
115
 
116
116
  &:hover {
117
- background: var(--color-gray-100, #f0f0f3);
118
- color: var(--color-gray-900, #121418);
117
+ background: var(--color-gray-100);
118
+ color: var(--color-gray-900);
119
119
  }
120
120
  }
121
121
 
@@ -126,8 +126,8 @@
126
126
  display: flex;
127
127
  flex-direction: column;
128
128
  gap: 0.5rem;
129
- font-size: var(--font-size-sm, 0.875rem);
130
- color: var(--color-gray-700, #60646c);
129
+ font-size: var(--font-size-sm);
130
+ color: var(--color-gray-700);
131
131
  }
132
132
 
133
133
  .canopy-search-filters__facet-item {
@@ -141,9 +141,9 @@
141
141
  width: 1rem;
142
142
  height: 1rem;
143
143
  border-radius: 0.375rem;
144
- border: 1px solid var(--color-gray-300, #cdced6);
145
- color: var(--color-brand-500, #3e63dd);
146
- accent-color: var(--color-brand-500, #3e63dd);
144
+ border: 1px solid var(--color-gray-300);
145
+ color: var(--color-brand-500);
146
+ accent-color: var(--color-brand-500);
147
147
  }
148
148
 
149
149
  .canopy-search-filters__facet-label {
@@ -154,8 +154,8 @@
154
154
  }
155
155
 
156
156
  .canopy-search-filters__facet-empty {
157
- font-size: var(--font-size-sm, 0.875rem);
158
- color: var(--color-gray-500, #8b8d98);
157
+ font-size: var(--font-size-sm);
158
+ color: var(--color-gray-500);
159
159
  }
160
160
 
161
161
  .canopy-search-filters__footer {
@@ -164,7 +164,7 @@
164
164
  align-items: center;
165
165
  justify-content: space-between;
166
166
  gap: 0.75rem;
167
- border-top: 1px solid var(--color-gray-200, #e0e1e6);
167
+ border-top: 1px solid var(--color-gray-200);
168
168
  padding-top: 1.25rem;
169
169
  }
170
170
 
@@ -177,35 +177,35 @@
177
177
  .canopy-search-filters__button {
178
178
  border-radius: 9999px;
179
179
  padding: 0.5rem 1.25rem;
180
- font-size: var(--font-size-sm, 0.875rem);
180
+ font-size: var(--font-size-sm);
181
181
  font-weight: 600;
182
182
  cursor: pointer;
183
- transition: background-color var(--duration-fast, 150ms) var(--easing-standard, ease),
184
- color var(--duration-fast, 150ms) var(--easing-standard, ease);
183
+ transition: background-color var(--duration-fast) var(--easing-standard),
184
+ color var(--duration-fast) var(--easing-standard);
185
185
  }
186
186
 
187
187
  .canopy-search-filters__button--secondary {
188
- border: 1px solid var(--color-gray-300, #cdced6);
188
+ border: 1px solid var(--color-gray-300);
189
189
  background: transparent;
190
- color: var(--color-gray-700, #60646c);
190
+ color: var(--color-gray-700);
191
191
  }
192
192
 
193
193
  .canopy-search-filters__button--secondary:hover,
194
194
  .canopy-search-filters__button--secondary:focus-visible {
195
- background: var(--color-gray-100, #f0f0f3);
196
- color: var(--color-gray-900, #121418);
195
+ background: var(--color-gray-100);
196
+ color: var(--color-gray-900);
197
197
  outline: none;
198
198
  }
199
199
 
200
200
  .canopy-search-filters__button--primary {
201
201
  border: none;
202
- background: var(--color-brand-600, #3e63dd);
203
- color: var(--color-gray-50, #f9fafb);
202
+ background: var(--color-brand-600);
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, #3358d4);
208
+ background: var(--color-brand-700);
209
209
  outline: none;
210
210
  }
211
211
 
package/ui/styles/components/search/_form.scss CHANGED
@@ -4,8 +4,8 @@
4
4
  position: relative;
5
5
  backdrop-filter: blur(12px);
6
6
  transition:
7
- box-shadow var(--duration-fast, 150ms) ease,
8
- background-color var(--duration-fast, 150ms) ease;
7
+ box-shadow var(--duration-fast) ease,
8
+ background-color var(--duration-fast) ease;
9
9
  background-color: var(--color-gray-50);
10
10
  cursor: text;
11
11
  padding-right: 0.4rem;
@@ -23,7 +23,7 @@
23
23
  white-space: nowrap;
24
24
  overflow: hidden;
25
25
  text-overflow: ellipsis;
26
- transition: opacity var(--duration-fast, 150ms) ease;
26
+ transition: opacity var(--duration-fast) ease;
27
27
  }
28
28
 
29
29
  &:hover {
@@ -38,9 +38,9 @@
38
38
  width: 1.25rem;
39
39
  height: 1.25rem;
40
40
  flex-shrink: 0;
41
- fill: var(--color-gray-400, #b9bbc6);
41
+ fill: var(--color-gray-400);
42
42
  pointer-events: none;
43
- transition: fill var(--duration-fast, 150ms) var(--easing-standard, ease);
43
+ transition: fill var(--duration-fast) var(--easing-standard);
44
44
  }
45
45
 
46
46
  input[data-canopy-search-form-input] {
@@ -50,7 +50,7 @@
50
50
  background: transparent;
51
51
  box-shadow: none;
52
52
  caret-color: transparent;
53
- transition: opacity var(--duration-fast, 150ms) ease;
53
+ transition: opacity var(--duration-fast) ease;
54
54
  }
55
55
 
56
56
  &:focus-within {
@@ -58,17 +58,17 @@
58
58
 
59
59
  input[data-canopy-search-form-input] {
60
60
  opacity: 1;
61
- caret-color: var(--color-gray-900, #121418);
61
+ caret-color: var(--color-gray-900);
62
62
  }
63
63
 
64
64
  svg {
65
- fill: var(--color-brand-default, #3e63dd);
65
+ fill: var(--color-brand-default);
66
66
  }
67
67
  }
68
68
 
69
69
  &[data-has-value="1"] input[data-canopy-search-form-input] {
70
70
  opacity: 1;
71
- caret-color: var(--color-gray-900, #121418);
71
+ caret-color: var(--color-gray-900);
72
72
  }
73
73
  }
74
74
 
@@ -76,30 +76,29 @@
76
76
  display: flex;
77
77
  align-items: center;
78
78
  gap: 0.5rem;
79
- border: 1px solid var(--color-gray-200, #cdced6);
79
+ border: 1px solid var(--color-gray-200);
80
80
  border-radius: 0.75rem;
81
- color: var(--color-gray-700, #60646c);
82
- box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
81
+ color: var(--color-gray-700);
82
+ box-shadow: var(--shadow-sm);
83
83
  transition:
84
- border-color var(--duration-fast, 150ms) var(--easing-standard, ease),
85
- box-shadow var(--duration-fast, 150ms) var(--easing-standard, ease),
86
- background-color var(--duration-fast, 150ms) var(--easing-standard, ease);
84
+ border-color var(--duration-fast) var(--easing-standard),
85
+ box-shadow var(--duration-fast) var(--easing-standard),
86
+ background-color var(--duration-fast) var(--easing-standard);
87
87
 
88
88
  &:focus-within {
89
- border-color: var(--color-brand-500, #3e63dd);
89
+ border-color: var(--color-brand-500);
90
90
  box-shadow:
91
- 0 0 0 2px
92
- color-mix(in srgb, var(--color-brand-500, #3e63dd) 45%, transparent),
93
- var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
91
+ 0 0 0 2px color-mix(in srgb, var(--color-brand-500) 45%, transparent),
92
+ var(--shadow-sm);
94
93
 
95
94
  .canopy-search-form__icon {
96
- color: var(--color-brand-500, #3e63dd);
95
+ color: var(--color-brand-500);
97
96
  }
98
97
  }
99
98
 
100
99
  &[data-has-value="1"] {
101
100
  .canopy-search-form__icon {
102
- color: var(--color-brand-500, #3e63dd);
101
+ color: var(--color-brand-500);
103
102
  }
104
103
  }
105
104
  }
@@ -126,7 +125,7 @@
126
125
  align-items: center;
127
126
  justify-content: center;
128
127
  cursor: pointer;
129
- transition: color var(--duration-fast, 150ms) var(--easing-standard, ease);
128
+ transition: color var(--duration-fast) var(--easing-standard);
130
129
 
131
130
  &:hover,
132
131
  &:focus-visible {
@@ -136,7 +135,7 @@
136
135
  &:focus-visible {
137
136
  outline: none;
138
137
  box-shadow:
139
- 0 0 0 2px var(--color-gray-100, #ffffff),
138
+ 0 0 0 2px var(--color-gray-100),
140
139
  0 0 0 4px color-mix(in srgb, var(--color-brand-800) 65%, transparent);
141
140
  border-radius: 999px;
142
141
  }
@@ -146,15 +145,15 @@
146
145
  flex: 1;
147
146
  min-width: 0;
148
147
  padding: 0.125rem 0;
149
- font-size: var(--font-size-base, 1rem);
150
- line-height: var(--line-height-base, 1.5rem);
148
+ font-size: var(--font-size-base);
149
+ line-height: var(--line-height-base);
151
150
  background: transparent;
152
151
  border: 0;
153
152
  color: inherit;
154
153
  outline: none;
155
154
  transition:
156
- opacity var(--duration-fast, 150ms) var(--easing-standard, ease),
157
- caret-color var(--duration-fast, 150ms) var(--easing-standard, ease);
155
+ opacity var(--duration-fast) var(--easing-standard),
156
+ caret-color var(--duration-fast) var(--easing-standard);
158
157
 
159
158
  &::placeholder {
160
159
  color: rgba(148, 163, 184, 0.75);
@@ -174,22 +173,21 @@
174
173
  font-size: 1rem;
175
174
  padding: 0.382rem 0.618rem;
176
175
  transition:
177
- background-color var(--duration-fast, 150ms) var(--easing-standard, ease),
178
- transform var(--duration-fast, 150ms) var(--easing-standard, ease);
176
+ background-color var(--duration-fast) var(--easing-standard),
177
+ transform var(--duration-fast) var(--easing-standard);
179
178
  cursor: pointer;
180
179
 
181
180
  &:hover,
182
181
  &:focus-visible {
183
182
  background: var(--color-brand-800);
184
- box-shadow: var(--shadow-md, 0 4px 6px rgba(0, 0, 0, 0.1));
183
+ box-shadow: var(--shadow-md);
185
184
  }
186
185
 
187
186
  &:focus-visible {
188
187
  outline: none;
189
188
  box-shadow:
190
- 0 0 0 2px var(--color-gray-100, #ffffff),
191
- 0 0 0 4px
192
- color-mix(in srgb, var(--color-brand-500, #3e63dd) 65%, transparent);
189
+ 0 0 0 2px var(--color-gray-100),
190
+ 0 0 0 4px color-mix(in srgb, var(--color-brand-500) 65%, transparent);
193
191
  }
194
192
 
195
193
  &:active {
package/ui/styles/components/search/_results.scss CHANGED
@@ -40,9 +40,9 @@
40
40
  align-items: center;
41
41
  gap: 0.25rem;
42
42
  padding: 0.25rem 0.5rem;
43
- border: 1px solid var(--color-gray-200, #e5e7eb);
44
- color: var(--color-gray-700, #374151);
45
- background: var(--color-gray-100, #ffffff);
43
+ border: 1px solid var(--color-gray-200);
44
+ color: var(--color-gray-700);
45
+ background: var(--color-gray-100);
46
46
  border-radius: 6px;
47
47
  cursor: pointer;
48
48
  }
@@ -60,7 +60,7 @@
60
60
 
61
61
  .canopy-search-form-modal__panel {
62
62
  position: relative;
63
- background: var(--color-gray-100, #ffffff);
63
+ background: var(--color-gray-100);
64
64
  min-width: 320px;
65
65
  max-width: 720px;
66
66
  width: 90%;
@@ -83,8 +83,8 @@
83
83
  position: absolute;
84
84
  top: 8px;
85
85
  right: 8px;
86
- border: 1px solid var(--color-gray-200, #e5e7eb);
87
- background: var(--color-gray-100, #ffffff);
86
+ border: 1px solid var(--color-gray-200);
87
+ background: var(--color-gray-100);
88
88
  border-radius: 6px;
89
89
  padding: 2px 6px;
90
90
  cursor: pointer;
@@ -92,13 +92,13 @@
92
92
 
93
93
  .canopy-search-form-modal__inputWrap {
94
94
  padding: 10px 12px;
95
- border-bottom: 1px solid var(--color-gray-200, #e5e7eb);
95
+ border-bottom: 1px solid var(--color-gray-200);
96
96
  }
97
97
 
98
98
  .canopy-search-form-modal__input {
99
99
  width: 100%;
100
100
  padding: 8px 10px;
101
- border: 1px solid var(--color-gray-200, #e5e7eb);
101
+ border: 1px solid var(--color-gray-200);
102
102
  border-radius: 6px;
103
103
  outline: none;
104
104
  }
@@ -123,9 +123,9 @@
123
123
  }
124
124
 
125
125
  .canopy-search-form-modal__title {
126
- font-size: var(--font-size-sm, 0.875rem);
127
- line-height: var(--line-height-sm, 1.25rem);
128
- color: var(--color-gray-900, #121418);
126
+ font-size: var(--font-size-sm);
127
+ line-height: var(--line-height-sm);
128
+ color: var(--color-gray-900);
129
129
  font-weight: 500;
130
130
  }
131
131
  }
@@ -139,8 +139,8 @@
139
139
  left: 0;
140
140
  right: 0;
141
141
  top: calc(100% + 4px);
142
- background: var(--color-gray-100, #ffffff);
143
- border: 1px solid var(--color-gray-200, #e5e7eb);
142
+ background: var(--color-gray-100);
143
+ border: 1px solid var(--color-gray-200);
144
144
  border-radius: 8px;
145
145
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
146
146
  z-index: 1000;