@canopy-iiif/app 0.9.13 → 0.9.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.
- package/lib/build/build.js +1 -0
- package/lib/build/iiif.js +234 -12
- package/lib/build/mdx.js +13 -0
- package/lib/build/pages.js +17 -1
- package/lib/components/featured.js +6 -0
- package/lib/components/hero-slider-runtime.js +9 -2
- package/lib/iiif/thumbnail.js +262 -4
- package/package.json +2 -1
- package/ui/dist/index.mjs +294 -142
- package/ui/dist/index.mjs.map +4 -4
- package/ui/dist/server.mjs +356 -181
- package/ui/dist/server.mjs.map +4 -4
- package/ui/styles/base/_common.scss +32 -33
- package/ui/styles/base/_heading.scss +26 -11
- package/ui/styles/base/_markdown.scss +43 -0
- package/ui/styles/base/index.scss +1 -0
- package/ui/styles/components/_buttons.scss +54 -40
- package/ui/styles/components/_interstitial-hero.scss +13 -18
- package/ui/styles/components/header/_header.scss +10 -3
- package/ui/styles/components/header/_logo.scss +32 -33
- package/ui/styles/components/search/_form.scss +2 -6
- package/ui/styles/index.css +186 -144
- package/ui/theme.js +4 -4
package/ui/styles/index.css
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
@layer properties {
|
|
3
3
|
:root {
|
|
4
4
|
--max-w-content: 1080px;
|
|
5
|
-
--color-brand-50: #
|
|
5
|
+
--color-brand-50: #fdfdfe;
|
|
6
6
|
--color-brand-100: #edf2fe;
|
|
7
7
|
--color-brand-200: #e1e9ff;
|
|
8
8
|
--color-brand-300: #c1d0ff;
|
|
@@ -12,8 +12,8 @@
|
|
|
12
12
|
--color-brand-700: #3358d4;
|
|
13
13
|
--color-brand-800: #3a5bc7;
|
|
14
14
|
--color-brand-900: #172245;
|
|
15
|
-
--color-brand-default: #
|
|
16
|
-
--color-gray-50: #
|
|
15
|
+
--color-brand-default: #3358d4;
|
|
16
|
+
--color-gray-50: #fcfcfd;
|
|
17
17
|
--color-gray-100: #f0f0f3;
|
|
18
18
|
--color-gray-200: #e8e8ec;
|
|
19
19
|
--color-gray-300: #d9d9e0;
|
|
@@ -25,20 +25,20 @@
|
|
|
25
25
|
--color-gray-900: #111316;
|
|
26
26
|
--color-gray-default: #111316;
|
|
27
27
|
--color-gray-muted: #8b8d98;
|
|
28
|
-
--colors-accent: #
|
|
28
|
+
--colors-accent: #3358d4 !important;
|
|
29
29
|
--colors-accentAlt: #3a5bc7 !important;
|
|
30
30
|
--colors-accentMuted: #abbdf9 !important;
|
|
31
31
|
--colors-primary: #111316 !important;
|
|
32
32
|
--colors-primaryAlt: #111316 !important;
|
|
33
33
|
--colors-primaryMuted: #111316 !important;
|
|
34
|
-
--colors-secondary: #
|
|
35
|
-
--colors-secondaryAlt: #
|
|
36
|
-
--colors-secondaryMuted: #
|
|
34
|
+
--colors-secondary: #fcfcfd !important;
|
|
35
|
+
--colors-secondaryAlt: #fcfcfd !important;
|
|
36
|
+
--colors-secondaryMuted: #fcfcfd !important;
|
|
37
37
|
color-scheme: light;
|
|
38
38
|
}
|
|
39
39
|
:host {
|
|
40
40
|
--max-w-content: 1080px;
|
|
41
|
-
--color-brand-50: #
|
|
41
|
+
--color-brand-50: #fdfdfe;
|
|
42
42
|
--color-brand-100: #edf2fe;
|
|
43
43
|
--color-brand-200: #e1e9ff;
|
|
44
44
|
--color-brand-300: #c1d0ff;
|
|
@@ -48,8 +48,8 @@
|
|
|
48
48
|
--color-brand-700: #3358d4;
|
|
49
49
|
--color-brand-800: #3a5bc7;
|
|
50
50
|
--color-brand-900: #172245;
|
|
51
|
-
--color-brand-default: #
|
|
52
|
-
--color-gray-50: #
|
|
51
|
+
--color-brand-default: #3358d4;
|
|
52
|
+
--color-gray-50: #fcfcfd;
|
|
53
53
|
--color-gray-100: #f0f0f3;
|
|
54
54
|
--color-gray-200: #e8e8ec;
|
|
55
55
|
--color-gray-300: #d9d9e0;
|
|
@@ -61,107 +61,157 @@
|
|
|
61
61
|
--color-gray-900: #111316;
|
|
62
62
|
--color-gray-default: #111316;
|
|
63
63
|
--color-gray-muted: #8b8d98;
|
|
64
|
-
--colors-accent: #
|
|
64
|
+
--colors-accent: #3358d4 !important;
|
|
65
65
|
--colors-accentAlt: #3a5bc7 !important;
|
|
66
66
|
--colors-accentMuted: #abbdf9 !important;
|
|
67
67
|
--colors-primary: #111316 !important;
|
|
68
68
|
--colors-primaryAlt: #111316 !important;
|
|
69
69
|
--colors-primaryMuted: #111316 !important;
|
|
70
|
-
--colors-secondary: #
|
|
71
|
-
--colors-secondaryAlt: #
|
|
72
|
-
--colors-secondaryMuted: #
|
|
70
|
+
--colors-secondary: #fcfcfd !important;
|
|
71
|
+
--colors-secondaryAlt: #fcfcfd !important;
|
|
72
|
+
--colors-secondaryMuted: #fcfcfd !important;
|
|
73
73
|
color-scheme: light;
|
|
74
74
|
}
|
|
75
75
|
}
|
|
76
76
|
/* canopy-theme:end */
|
|
77
|
-
|
|
78
|
-
body {
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
77
|
+
@layer base {
|
|
78
|
+
body {
|
|
79
|
+
margin: 0;
|
|
80
|
+
padding: 0;
|
|
81
|
+
background: var(--color-gray-50);
|
|
82
|
+
color: var(--color-gray-900);
|
|
83
|
+
}
|
|
84
|
+
p {
|
|
85
|
+
line-height: 1.618;
|
|
86
|
+
margin-bottom: 1.618rem;
|
|
87
|
+
}
|
|
88
|
+
ol,
|
|
89
|
+
ul {
|
|
90
|
+
padding-left: 1.618rem;
|
|
91
|
+
}
|
|
92
|
+
ol li,
|
|
93
|
+
ul li {
|
|
94
|
+
margin-bottom: 0.382rem;
|
|
95
|
+
}
|
|
96
|
+
a {
|
|
97
|
+
text-decoration: none;
|
|
98
|
+
color: var(--color-brand-default);
|
|
99
|
+
}
|
|
100
|
+
a:hover {
|
|
101
|
+
text-decoration: underline;
|
|
102
|
+
}
|
|
103
|
+
input,
|
|
104
|
+
textarea,
|
|
105
|
+
select,
|
|
106
|
+
button {
|
|
107
|
+
font-family: inherit;
|
|
108
|
+
}
|
|
109
|
+
::selection {
|
|
110
|
+
background-color: var(--color-brand-200);
|
|
111
|
+
}
|
|
83
112
|
}
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
113
|
+
@layer base {
|
|
114
|
+
h1 {
|
|
115
|
+
font-size: 2.618rem;
|
|
116
|
+
line-height: 1.25;
|
|
117
|
+
margin: 0 0 1rem 0;
|
|
118
|
+
}
|
|
119
|
+
h2 {
|
|
120
|
+
font-size: 1.618rem;
|
|
121
|
+
line-height: 1.25;
|
|
122
|
+
margin: 2.618rem 0 1rem;
|
|
123
|
+
}
|
|
124
|
+
h3 {
|
|
125
|
+
font-size: 1.382rem;
|
|
126
|
+
line-height: 1.3;
|
|
127
|
+
letter-spacing: -0.0125em;
|
|
128
|
+
margin: 1.618rem 0 1rem;
|
|
129
|
+
font-weight: 300;
|
|
130
|
+
}
|
|
87
131
|
}
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
132
|
+
@utility font-display {
|
|
133
|
+
font-family: var(--font-serif);
|
|
134
|
+
font-weight: 600;
|
|
135
|
+
letter-spacing: -0.025em;
|
|
136
|
+
font-variation-settings: "SOFT" 100, "WONK" 1;
|
|
92
137
|
}
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
margin
|
|
138
|
+
.markdown-table__frame {
|
|
139
|
+
width: 100%;
|
|
140
|
+
margin: 1.618rem 0 2.618rem;
|
|
96
141
|
}
|
|
97
142
|
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
143
|
+
.markdown-table {
|
|
144
|
+
width: 100%;
|
|
145
|
+
border-collapse: collapse;
|
|
146
|
+
margin: 0;
|
|
101
147
|
}
|
|
102
|
-
|
|
103
|
-
|
|
148
|
+
.markdown-table th,
|
|
149
|
+
.markdown-table td {
|
|
150
|
+
border: 1px solid var(--color-gray-400);
|
|
151
|
+
padding: 0.5rem 0.75rem;
|
|
152
|
+
text-align: left;
|
|
153
|
+
vertical-align: top;
|
|
104
154
|
}
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
155
|
+
.markdown-table th {
|
|
156
|
+
font-size: 0.8333rem;
|
|
157
|
+
font-weight: 300;
|
|
158
|
+
letter-spacing: -0.0125em;
|
|
159
|
+
border-top: none;
|
|
160
|
+
border-left: none;
|
|
161
|
+
border-right: none;
|
|
111
162
|
}
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
background-color: var(--color-brand-200);
|
|
163
|
+
.markdown-table tbody {
|
|
164
|
+
box-shadow: 5px 5px 11px rgba(0, 0, 0, 0.05);
|
|
115
165
|
}
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
font-family: var(--font-serif);
|
|
119
|
-
font-size: 2.618rem;
|
|
120
|
-
line-height: 1.25;
|
|
121
|
-
margin: 0 0 1rem 0;
|
|
122
|
-
font-weight: 400;
|
|
166
|
+
.markdown-table tbody tr:nth-child(even) {
|
|
167
|
+
background-color: var(--color-gray-200);
|
|
123
168
|
}
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
font-
|
|
127
|
-
|
|
128
|
-
line-height: 1.25;
|
|
129
|
-
margin: 0 0 0.618rem 0;
|
|
130
|
-
font-weight: 400;
|
|
169
|
+
.markdown-table code {
|
|
170
|
+
font-family: var(--font-mono);
|
|
171
|
+
font-size: 0.875rem;
|
|
172
|
+
color: var(--color-gray-900);
|
|
131
173
|
}
|
|
132
174
|
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
175
|
+
@layer components {
|
|
176
|
+
.canopy-button {
|
|
177
|
+
display: inline-flex;
|
|
178
|
+
align-items: center;
|
|
179
|
+
justify-content: center;
|
|
180
|
+
gap: 0.35rem;
|
|
181
|
+
padding: 0.55rem 1.4rem;
|
|
182
|
+
border-radius: 9999px;
|
|
183
|
+
font-size: 0.9375rem;
|
|
184
|
+
font-weight: 600;
|
|
185
|
+
text-decoration: none;
|
|
186
|
+
transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
|
|
187
|
+
}
|
|
188
|
+
.canopy-button--primary {
|
|
189
|
+
background-color: var(--color-brand-600, #4f46e5);
|
|
190
|
+
color: var(--color-gray-50, #f9fafb);
|
|
191
|
+
box-shadow: 0 18px 32px -22px rgba(15, 23, 42, 0.55);
|
|
192
|
+
}
|
|
193
|
+
.canopy-button--primary:hover, .canopy-button--primary:focus-visible {
|
|
194
|
+
background-color: var(--color-brand-700, #4338ca);
|
|
195
|
+
color: var(--color-gray-50, #f9fafb);
|
|
196
|
+
}
|
|
197
|
+
.canopy-button--secondary {
|
|
198
|
+
border: 1px solid color-mix(in srgb, var(--color-gray-400, #94a3b8) 60%, transparent);
|
|
199
|
+
color: color-mix(in srgb, var(--color-gray-900, #0f172a) 92%, transparent);
|
|
200
|
+
background-color: var(--color-gray-50);
|
|
201
|
+
}
|
|
202
|
+
.canopy-button--secondary:hover, .canopy-button--secondary:focus-visible {
|
|
203
|
+
border-color: color-mix(in srgb, var(--color-brand-400, #818cf8) 65%, transparent);
|
|
204
|
+
background-color: color-mix(in srgb, var(--color-brand-200, #c7d2fe) 25%, transparent);
|
|
205
|
+
color: var(--color-brand-700, #4338ca);
|
|
206
|
+
}
|
|
207
|
+
.canopy-button-group {
|
|
208
|
+
display: flex;
|
|
209
|
+
flex-wrap: wrap;
|
|
210
|
+
align-items: center;
|
|
211
|
+
gap: 0.75rem;
|
|
212
|
+
padding: 1rem 0;
|
|
213
|
+
}
|
|
163
214
|
}
|
|
164
|
-
|
|
165
215
|
/* Canopy Card component styles */
|
|
166
216
|
.canopy-card, .canopy-annotation-card {
|
|
167
217
|
display: block;
|
|
@@ -260,7 +310,8 @@ h2 {
|
|
|
260
310
|
align-items: center;
|
|
261
311
|
gap: 0.75rem;
|
|
262
312
|
padding: 0.75rem 1rem;
|
|
263
|
-
background:
|
|
313
|
+
background: trabsparent;
|
|
314
|
+
z-index: 1;
|
|
264
315
|
}
|
|
265
316
|
.canopy-header__brand {
|
|
266
317
|
display: flex;
|
|
@@ -389,42 +440,39 @@ h2 {
|
|
|
389
440
|
}
|
|
390
441
|
}
|
|
391
442
|
}
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
fill: var(--color-brand-500) !important;
|
|
425
|
-
color: var(--color-brand-500) !important;
|
|
443
|
+
@layer components {
|
|
444
|
+
.canopy-logo {
|
|
445
|
+
display: flex;
|
|
446
|
+
align-items: center;
|
|
447
|
+
gap: 0.618rem;
|
|
448
|
+
font-size: 1.382rem;
|
|
449
|
+
color: var(--color-gray-default) !important;
|
|
450
|
+
line-height: 1;
|
|
451
|
+
}
|
|
452
|
+
.canopy-logo:hover {
|
|
453
|
+
text-decoration: none;
|
|
454
|
+
}
|
|
455
|
+
.canopy-logo svg {
|
|
456
|
+
height: 1.65rem;
|
|
457
|
+
display: block;
|
|
458
|
+
}
|
|
459
|
+
.canopy-logo svg circle.canopy-logo-backlight {
|
|
460
|
+
fill: var(--color-brand-900);
|
|
461
|
+
color: var(--color-brand-900);
|
|
462
|
+
}
|
|
463
|
+
.canopy-logo svg path.canopy-logo-overlay {
|
|
464
|
+
fill: var(--color-brand-default);
|
|
465
|
+
color: var(--color-brand-default);
|
|
466
|
+
}
|
|
467
|
+
html.dark .canopy-logo svg circle.canopy-logo-backlight {
|
|
468
|
+
fill: var(--color-brand-200) !important;
|
|
469
|
+
color: var(--color-brand-200) !important;
|
|
470
|
+
}
|
|
471
|
+
html.dark .canopy-logo svg path.canopy-logo-overlay {
|
|
472
|
+
fill: var(--color-brand-500) !important;
|
|
473
|
+
color: var(--color-brand-500) !important;
|
|
474
|
+
}
|
|
426
475
|
}
|
|
427
|
-
|
|
428
476
|
@layer components {
|
|
429
477
|
.canopy-nav-links {
|
|
430
478
|
display: flex;
|
|
@@ -613,15 +661,18 @@ html.dark a.canopy-logo svg path.canopy-logo-overlay {
|
|
|
613
661
|
width: 100%;
|
|
614
662
|
isolation: isolate;
|
|
615
663
|
margin-bottom: 2.618rem;
|
|
664
|
+
margin-top: -5rem;
|
|
665
|
+
z-index: 0;
|
|
666
|
+
padding-top: 4rem;
|
|
616
667
|
}
|
|
617
668
|
.canopy-interstitial--hero {
|
|
618
669
|
--hero-height: 520px;
|
|
619
|
-
--hero-bg-start: var(--color-
|
|
670
|
+
--hero-bg-start: var(--color-gray-50);
|
|
671
|
+
--hero-bg-mid: var(--color-brand-100);
|
|
620
672
|
--hero-bg-end: var(--color-brand-200);
|
|
621
|
-
--hero-caption-link: var(--color-brand-700);
|
|
622
673
|
--hero-dot-bg: var(--color-brand-300);
|
|
623
674
|
--hero-dot-active-bg: var(--color-brand-700);
|
|
624
|
-
background: linear-gradient(
|
|
675
|
+
background: linear-gradient(173deg, var(--hero-bg-start) 5rem, var(--hero-bg-mid) 61.8%, var(--hero-bg-end) 100%);
|
|
625
676
|
min-height: var(--hero-height);
|
|
626
677
|
}
|
|
627
678
|
.canopy-interstitial--hero .canopy-interstitial__overlay,
|
|
@@ -701,7 +752,7 @@ html.dark a.canopy-logo svg path.canopy-logo-overlay {
|
|
|
701
752
|
}
|
|
702
753
|
@media (min-width: 64rem) {
|
|
703
754
|
.canopy-interstitial--hero .canopy-interstitial__body .canopy-interstitial__headline {
|
|
704
|
-
font-size:
|
|
755
|
+
font-size: 2.618rem;
|
|
705
756
|
}
|
|
706
757
|
}
|
|
707
758
|
.canopy-interstitial__slider {
|
|
@@ -760,7 +811,7 @@ html.dark a.canopy-logo svg path.canopy-logo-overlay {
|
|
|
760
811
|
height: 100%;
|
|
761
812
|
flex: 1 1 auto;
|
|
762
813
|
overflow: hidden;
|
|
763
|
-
border-radius:
|
|
814
|
+
border-radius: 0.75rem;
|
|
764
815
|
}
|
|
765
816
|
.canopy-interstitial__media--static {
|
|
766
817
|
position: static;
|
|
@@ -804,16 +855,11 @@ html.dark a.canopy-logo svg path.canopy-logo-overlay {
|
|
|
804
855
|
.canopy-interstitial__headline {
|
|
805
856
|
margin: 0;
|
|
806
857
|
font-size: 2rem;
|
|
807
|
-
font-weight: 600;
|
|
808
858
|
line-height: 1.08;
|
|
809
|
-
letter-spacing: -0.01em;
|
|
810
859
|
}
|
|
811
860
|
.canopy-interstitial__description {
|
|
812
861
|
margin: 0;
|
|
813
862
|
max-width: 42rem;
|
|
814
|
-
font-size: 1rem;
|
|
815
|
-
line-height: 1.7;
|
|
816
|
-
color: color-mix(in srgb, currentColor 82%, transparent);
|
|
817
863
|
}
|
|
818
864
|
.canopy-interstitial__actions {
|
|
819
865
|
display: flex;
|
|
@@ -824,18 +870,14 @@ html.dark a.canopy-logo svg path.canopy-logo-overlay {
|
|
|
824
870
|
.canopy-interstitial__caption {
|
|
825
871
|
position: absolute;
|
|
826
872
|
bottom: 1.75rem;
|
|
873
|
+
font-weight: 600;
|
|
827
874
|
right: 2rem;
|
|
828
875
|
z-index: 3;
|
|
829
|
-
font-size: 0.8333rem;
|
|
830
|
-
letter-spacing: 0.12em;
|
|
831
|
-
text-transform: uppercase;
|
|
832
|
-
color: var(--hero-caption-color);
|
|
833
876
|
}
|
|
834
877
|
.canopy-interstitial__caption--static {
|
|
835
878
|
position: static;
|
|
836
879
|
margin: 1.5rem auto 0;
|
|
837
880
|
text-align: center;
|
|
838
|
-
color: var(--hero-caption-color);
|
|
839
881
|
}
|
|
840
882
|
.canopy-interstitial__caption-link {
|
|
841
883
|
color: var(--hero-caption-link);
|
|
@@ -928,10 +970,10 @@ html.dark a.canopy-logo svg path.canopy-logo-overlay {
|
|
|
928
970
|
padding-inline: 2.75rem;
|
|
929
971
|
}
|
|
930
972
|
.canopy-interstitial__headline {
|
|
931
|
-
font-size:
|
|
973
|
+
font-size: 2.618rem;
|
|
932
974
|
}
|
|
933
975
|
.canopy-interstitial__description {
|
|
934
|
-
font-size:
|
|
976
|
+
font-size: 1rem;
|
|
935
977
|
}
|
|
936
978
|
}
|
|
937
979
|
@media (min-width: 64rem) {
|
|
@@ -944,8 +986,8 @@ html.dark a.canopy-logo svg path.canopy-logo-overlay {
|
|
|
944
986
|
--search-form-label-padding-y: 0.625rem;
|
|
945
987
|
position: relative;
|
|
946
988
|
backdrop-filter: blur(12px);
|
|
947
|
-
background-color: color-mix(in srgb, var(--color-gray-100, #f0f0f3) 95%, transparent);
|
|
948
989
|
transition: box-shadow var(--duration-fast, 150ms) ease, background-color var(--duration-fast, 150ms) ease;
|
|
990
|
+
background-color: var(--color-gray-50);
|
|
949
991
|
cursor: text;
|
|
950
992
|
padding-right: 0.4rem;
|
|
951
993
|
}
|
|
@@ -1003,7 +1045,7 @@ html.dark a.canopy-logo svg path.canopy-logo-overlay {
|
|
|
1003
1045
|
display: flex;
|
|
1004
1046
|
align-items: center;
|
|
1005
1047
|
gap: 0.5rem;
|
|
1006
|
-
border: 1px solid var(--color-gray-
|
|
1048
|
+
border: 1px solid var(--color-gray-200, #cdced6);
|
|
1007
1049
|
border-radius: 0.75rem;
|
|
1008
1050
|
color: var(--color-gray-700, #60646c);
|
|
1009
1051
|
box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
|
package/ui/theme.js
CHANGED
|
@@ -56,7 +56,7 @@ const LEVELS = [
|
|
|
56
56
|
"900",
|
|
57
57
|
];
|
|
58
58
|
const STEP_MAP = {
|
|
59
|
-
50:
|
|
59
|
+
50: 1,
|
|
60
60
|
100: 3,
|
|
61
61
|
200: 4,
|
|
62
62
|
300: 6,
|
|
@@ -183,7 +183,7 @@ function buildVariablesMap(brandScale, grayScale, options = {}) {
|
|
|
183
183
|
const value = brandScale[lvl];
|
|
184
184
|
if (value) vars[`--color-brand-${lvl}`] = value;
|
|
185
185
|
}
|
|
186
|
-
if (brandScale["
|
|
186
|
+
if (brandScale["700"]) vars["--color-brand-default"] = brandScale["700"];
|
|
187
187
|
}
|
|
188
188
|
if (grayScale) {
|
|
189
189
|
for (const lvl of LEVELS) {
|
|
@@ -194,8 +194,8 @@ function buildVariablesMap(brandScale, grayScale, options = {}) {
|
|
|
194
194
|
if (grayScale["600"]) vars["--color-gray-muted"] = grayScale["600"];
|
|
195
195
|
}
|
|
196
196
|
if (brandScale && grayScale) {
|
|
197
|
-
if (brandScale["
|
|
198
|
-
vars["--colors-accent"] = `${brandScale["
|
|
197
|
+
if (brandScale["700"])
|
|
198
|
+
vars["--colors-accent"] = `${brandScale["700"]} !important`;
|
|
199
199
|
if (brandScale["800"])
|
|
200
200
|
vars["--colors-accentAlt"] = `${brandScale["800"]} !important`;
|
|
201
201
|
if (brandScale["400"])
|