@canopy-iiif/app 1.4.13 → 1.4.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 (6) hide show
  1. package/lib/common.js +22 -2
  2. package/lib/head.js +1 -0
  3. package/package.json +1 -1
  4. package/ui/styles/components/_buttons.scss +29 -4
  5. package/ui/styles/components/_card.scss +1 -1
  6. package/ui/styles/index.css +17 -5
package/lib/common.js CHANGED
@@ -12,6 +12,7 @@ const { readBasePath, withBasePath } = require('./base-path');
12
12
 
13
13
  const BASE_PATH = readBasePath();
14
14
  let cachedAppearance = null;
15
+ let cachedAccent = null;
15
16
 
16
17
  function resolveThemeAppearance() {
17
18
  if (cachedAppearance) return cachedAppearance;
@@ -29,6 +30,21 @@ function resolveThemeAppearance() {
29
30
  return cachedAppearance;
30
31
  }
31
32
 
33
+ function resolveThemeAccent() {
34
+ if (cachedAccent) return cachedAccent;
35
+ cachedAccent = 'indigo';
36
+ try {
37
+ const { loadCanopyTheme } = require('@canopy-iiif/app/ui/theme');
38
+ if (typeof loadCanopyTheme === 'function') {
39
+ const theme = loadCanopyTheme();
40
+ const accent = theme && theme.accent && theme.accent.name ? String(theme.accent.name) : '';
41
+ const normalized = accent.trim().toLowerCase();
42
+ if (normalized) cachedAccent = normalized;
43
+ }
44
+ } catch (_) {}
45
+ return cachedAccent;
46
+ }
47
+
32
48
  function readYamlConfigBaseUrl() {
33
49
  try {
34
50
  const y = require('js-yaml');
@@ -100,12 +116,16 @@ function htmlShell({ title, body, cssHref, scriptHref, headExtra, bodyClass }) {
100
116
  const extra = headExtra ? String(headExtra) : '';
101
117
  const cssTag = cssHref ? `<link rel="stylesheet" href="${cssHref}">` : '';
102
118
  const appearance = resolveThemeAppearance();
103
- const htmlClass = appearance === 'dark' ? ' class="dark"' : '';
119
+ const accent = resolveThemeAccent();
120
+ const htmlAttrs = [];
121
+ if (appearance === 'dark') htmlAttrs.push('class="dark"');
122
+ htmlAttrs.push(`data-accent="${accent || 'indigo'}"`);
123
+ const htmlAttr = htmlAttrs.length ? ` ${htmlAttrs.join(' ')}` : '';
104
124
  const hasCustomTitle = /<title\b/i.test(extra);
105
125
  const titleTag = hasCustomTitle ? '' : `<title>${title}</title>`;
106
126
  const bodyClassName = normalizeClassList(bodyClass);
107
127
  const bodyAttr = bodyClassName ? ` class="${bodyClassName}"` : '';
108
- return `<!doctype html><html lang="en"${htmlClass}><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/>${titleTag}${extra}${cssTag}${scriptTag}</head><body${bodyAttr}>${body}</body></html>`;
128
+ return `<!doctype html><html lang="en"${htmlAttr}><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/>${titleTag}${extra}${cssTag}${scriptTag}</head><body${bodyAttr}>${body}</body></html>`;
109
129
  }
110
130
 
111
131
  function withBase(href) {
package/lib/head.js CHANGED
@@ -93,6 +93,7 @@ function Meta(props = {}) {
93
93
  if (fullTitle) nodes.push(React.createElement('meta', { key: 'og-title', property: 'og:title', content: fullTitle }));
94
94
  if (description) nodes.push(React.createElement('meta', { key: 'og-description', property: 'og:description', content: description }));
95
95
  if (absolute) nodes.push(React.createElement('meta', { key: 'og-url', property: 'og:url', content: absolute }));
96
+ if (absolute) nodes.push(React.createElement('link', { key: 'canonical', rel: 'canonical', href: absolute }));
96
97
  if (ogType) nodes.push(React.createElement('meta', { key: 'og-type', property: 'og:type', content: ogType }));
97
98
  if (image) nodes.push(React.createElement('meta', { key: 'og-image', property: 'og:image', content: image }));
98
99
  if (twitterCard) nodes.push(React.createElement('meta', { key: 'twitter-card', name: 'twitter:card', content: twitterCard }));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@canopy-iiif/app",
3
- "version": "1.4.13",
3
+ "version": "1.4.15",
4
4
  "private": false,
5
5
  "license": "MIT",
6
6
  "author": "Mat Jordan <mat@northwestern.edu>",
package/ui/styles/components/_buttons.scss CHANGED
@@ -22,8 +22,7 @@
22
22
 
23
23
  &:hover,
24
24
  &:focus-visible {
25
- background-color: var(--color-accent-800);
26
- color: var(--color-gray-50);
25
+ background-color: var(--color-accent-600);
27
26
  }
28
27
  }
29
28
 
@@ -42,10 +41,36 @@
42
41
  );
43
42
  background-color: color-mix(
44
43
  in srgb,
45
- var(--color-accent-200) 25%,
44
+ var(--color-accent-300) 25%,
46
45
  transparent
47
46
  );
48
- color: var(--color-accent-700);
47
+ color: var(--color-accent-900);
48
+ }
49
+ }
50
+ }
51
+
52
+ html[data-accent="amber"],
53
+ html[data-accent="yellow"],
54
+ html[data-accent="lime"],
55
+ html[data-accent="mint"],
56
+ html[data-accent="sky"] {
57
+ .canopy-button--primary {
58
+ color: var(--color-gray-900);
59
+ }
60
+ }
61
+
62
+ html.dark {
63
+ .canopy-button--primary {
64
+ color: var(--color-gray-900);
65
+ }
66
+
67
+ &[data-accent="amber"],
68
+ &[data-accent="yellow"],
69
+ &[data-accent="lime"],
70
+ &[data-accent="mint"],
71
+ &[data-accent="sky"] {
72
+ .canopy-button--primary {
73
+ color: var(--color-gray-50);
49
74
  }
50
75
  }
51
76
  }
package/ui/styles/components/_card.scss CHANGED
@@ -19,7 +19,7 @@
19
19
  position: relative;
20
20
  width: 100%;
21
21
  padding-bottom: var(--canopy-card-padding);
22
- background-color: rgb(229 231 235); /* slate-200 */
22
+ background-color: var(--color-gray-100);
23
23
  overflow: hidden;
24
24
 
25
25
  > img {
package/ui/styles/index.css CHANGED
@@ -164,8 +164,7 @@ section[data-footnotes] ul li,
164
164
  box-shadow: 0 18px 32px -22px rgba(15, 23, 42, 0.55);
165
165
  }
166
166
  .canopy-button--primary:hover, .canopy-button--primary:focus-visible {
167
- background-color: var(--color-accent-800);
168
- color: var(--color-gray-50);
167
+ background-color: var(--color-accent-600);
169
168
  }
170
169
  .canopy-button--secondary {
171
170
  border: 1px solid color-mix(in srgb, var(--color-gray-300) 60%, transparent);
@@ -174,8 +173,21 @@ section[data-footnotes] ul li,
174
173
  }
175
174
  .canopy-button--secondary:hover, .canopy-button--secondary:focus-visible {
176
175
  border-color: color-mix(in srgb, var(--color-accent-400) 65%, transparent);
177
- background-color: color-mix(in srgb, var(--color-accent-200) 25%, transparent);
178
- color: var(--color-accent-700);
176
+ background-color: color-mix(in srgb, var(--color-accent-300) 25%, transparent);
177
+ color: var(--color-accent-900);
178
+ }
179
+ html[data-accent=amber] .canopy-button--primary,
180
+ html[data-accent=yellow] .canopy-button--primary,
181
+ html[data-accent=lime] .canopy-button--primary,
182
+ html[data-accent=mint] .canopy-button--primary,
183
+ html[data-accent=sky] .canopy-button--primary {
184
+ color: var(--color-gray-900);
185
+ }
186
+ html.dark .canopy-button--primary {
187
+ color: var(--color-gray-900);
188
+ }
189
+ html.dark[data-accent=amber] .canopy-button--primary, html.dark[data-accent=yellow] .canopy-button--primary, html.dark[data-accent=lime] .canopy-button--primary, html.dark[data-accent=mint] .canopy-button--primary, html.dark[data-accent=sky] .canopy-button--primary {
190
+ color: var(--color-gray-50);
179
191
  }
180
192
  .canopy-button-group {
181
193
  display: flex;
@@ -231,7 +243,7 @@ section[data-footnotes] ul li,
231
243
  position: relative;
232
244
  width: 100%;
233
245
  padding-bottom: var(--canopy-card-padding);
234
- background-color: rgb(229, 231, 235); /* slate-200 */
246
+ background-color: var(--color-gray-100);
235
247
  overflow: hidden;
236
248
  }
237
249
  .canopy-card .canopy-card-media > img {