@canopy-iiif/app 0.10.12 → 0.10.13

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 (7) hide show
  1. package/lib/build/dev.js +12 -1
  2. package/lib/build/styles.js +12 -0
  3. package/package.json +2 -1
  4. package/ui/styles/index.css +67 -68
  5. package/ui/styles/index.scss +1 -1
  6. package/ui/tailwind-config.js +2 -0
  7. package/ui/theme.js +3 -2
package/lib/build/dev.js CHANGED
@@ -9,7 +9,7 @@ const {
9
9
  ASSETS_DIR,
10
10
  ensureDirSync,
11
11
  } = require("../common");
12
- function resolveTailwindCli() {
12
+ function resolveTailwindCli() {
13
13
  const bin = path.join(
14
14
  process.cwd(),
15
15
  "node_modules",
@@ -40,6 +40,14 @@ const HAS_APP_WORKSPACE = (() => {
40
40
  return false;
41
41
  }
42
42
  })();
43
+
44
+ function stripTailwindThemeLayer(targetPath) {
45
+ try {
46
+ const raw = fs.readFileSync(targetPath, "utf8");
47
+ const cleaned = raw.replace(/@layer theme\{[\s\S]*?\}(?=@layer|$)/g, "");
48
+ if (cleaned !== raw) fs.writeFileSync(targetPath, cleaned, "utf8");
49
+ } catch (_) {}
50
+ }
43
51
  let pendingModuleReload = false;
44
52
  let building = false;
45
53
  let buildAgain = false;
@@ -896,6 +904,7 @@ async function dev() {
896
904
  }
897
905
  throw new Error("[tailwind] Initial Tailwind build failed.");
898
906
  }
907
+ stripTailwindThemeLayer(outputCss);
899
908
  console.log(
900
909
  `[tailwind] initial build ok (${fileSizeKb(outputCss)} KB) →`,
901
910
  prettyPath(outputCss)
@@ -920,6 +929,7 @@ async function dev() {
920
929
  cssWatcherAttached = true;
921
930
  try {
922
931
  fs.watch(outputCss, { persistent: false }, () => {
932
+ stripTailwindThemeLayer(outputCss);
923
933
  if (!unmuted) {
924
934
  unmuted = true;
925
935
  console.log(
@@ -946,6 +956,7 @@ async function dev() {
946
956
  }
947
957
  throw new Error("[tailwind] On-demand Tailwind compile failed.");
948
958
  }
959
+ stripTailwindThemeLayer(outputCss);
949
960
  console.log(
950
961
  `[tailwind] compiled (${fileSizeKb(outputCss)} KB) →`,
951
962
  prettyPath(outputCss)
package/lib/build/styles.js CHANGED
@@ -143,6 +143,14 @@ async function ensureStyles() {
143
143
  } catch (_) {}
144
144
  }
145
145
 
146
+ function stripTailwindThemeLayer(targetPath) {
147
+ try {
148
+ const raw = fs.readFileSync(targetPath, "utf8");
149
+ const cleaned = raw.replace(/@layer theme\{[\s\S]*?\}(?=@layer|$)/g, "");
150
+ if (cleaned !== raw) fs.writeFileSync(targetPath, cleaned, "utf8");
151
+ } catch (_) {}
152
+ }
153
+
146
154
  const shouldInjectTheme = !(hasAppCss && configPath);
147
155
 
148
156
  if (configPath && (inputCss || generatedInput)) {
@@ -154,6 +162,7 @@ async function ensureStyles() {
154
162
  });
155
163
  if (ok) {
156
164
  if (shouldInjectTheme) injectThemeTokens(dest);
165
+ stripTailwindThemeLayer(dest);
157
166
  return; // Tailwind compiled CSS
158
167
  }
159
168
  }
@@ -170,6 +179,7 @@ async function ensureStyles() {
170
179
  if (!isTailwindSource(customAppCss)) {
171
180
  await fsp.copyFile(customAppCss, dest);
172
181
  if (shouldInjectTheme) injectThemeTokens(dest);
182
+ stripTailwindThemeLayer(dest);
173
183
  return;
174
184
  }
175
185
  }
@@ -177,6 +187,7 @@ async function ensureStyles() {
177
187
  if (!isTailwindSource(customContentCss)) {
178
188
  await fsp.copyFile(customContentCss, dest);
179
189
  if (shouldInjectTheme) injectThemeTokens(dest);
190
+ stripTailwindThemeLayer(dest);
180
191
  return;
181
192
  }
182
193
  }
@@ -184,6 +195,7 @@ async function ensureStyles() {
184
195
  const css = `:root{--max-w:760px;--muted:#6b7280}*{box-sizing:border-box}body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Helvetica,Arial,sans-serif;max-width:var(--max-w);margin:2rem auto;padding:0 1rem;line-height:1.6}a{color:#2563eb;text-decoration:none}a:hover{text-decoration:underline}.site-header,.site-footer{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:1rem 0;border-bottom:1px solid #e5e7eb}.site-footer{border-bottom:0;border-top:1px solid #e5e7eb;color:var(--muted)}.brand{font-weight:600}.content pre{background:#f6f8fa;padding:1rem;overflow:auto}.content code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;background:#f6f8fa;padding:.1rem .3rem;border-radius:4px}.tabs{display:flex;gap:.5rem;align-items:center;border-bottom:1px solid #e5e7eb;margin:.5rem 0}.tab{background:none;border:0;color:#374151;padding:.25rem .5rem;border-radius:.375rem;cursor:pointer}.tab:hover{color:#111827}.tab-active{color:#2563eb;border:1px solid #e5e7eb;border-bottom:0;background:#fff}.masonry{column-gap:1rem;column-count:1}@media(min-width:768px){.masonry{column-count:2}}@media(min-width:1024px){.masonry{column-count:3}}.masonry>*{break-inside:avoid;margin-bottom:1rem;display:block}[data-grid-variant=masonry]{column-gap:var(--grid-gap,1rem);column-count:var(--cols-base,1)}@media(min-width:768px){[data-grid-variant=masonry]{column-count:var(--cols-md,2)}}@media(min-width:1024px){[data-grid-variant=masonry]{column-count:var(--cols-lg,3)}}[data-grid-variant=masonry]>*{break-inside:avoid;margin-bottom:var(--grid-gap,1rem);display:block}[data-grid-variant=grid]{display:grid;grid-template-columns:repeat(var(--cols-base,1),minmax(0,1fr));gap:var(--grid-gap,1rem)}@media(min-width:768px){[data-grid-variant=grid]{grid-template-columns:repeat(var(--cols-md,2),minmax(0,1fr))}}@media(min-width:1024px){[data-grid-variant=grid]{grid-template-columns:repeat(var(--cols-lg,3),minmax(0,1fr))}}`;
185
196
  await fsp.writeFile(dest, css, "utf8");
186
197
  injectThemeTokens(dest);
198
+ stripTailwindThemeLayer(dest);
187
199
  }
188
200
 
189
201
  module.exports = { ensureStyles };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@canopy-iiif/app",
3
- "version": "0.10.12",
3
+ "version": "0.10.13",
4
4
  "private": false,
5
5
  "license": "MIT",
6
6
  "author": "Mat Jordan <mat@northwestern.edu>",
@@ -12,6 +12,7 @@
12
12
  "./ui": "./ui/dist/index.mjs",
13
13
  "./ui/server": "./ui/dist/server.mjs",
14
14
  "./ui/styles/index.css": "./ui/styles/index.css",
15
+ "./ui/styles/runtime.css": "./ui/styles/runtime.css",
15
16
  "./ui/canopy-iiif-plugin": "./ui/tailwind-canopy-iiif-plugin.js",
16
17
  "./ui/canopy-iiif-preset": "./ui/tailwind-canopy-iiif-preset.js",
17
18
  "./ui/tailwind-config": {
package/ui/styles/index.css CHANGED
@@ -1,74 +1,74 @@
1
1
  /* canopy-theme */
2
2
  @layer properties {
3
3
  :root {
4
- --color-brand-50: #fdfdfe;
5
- --color-brand-100: #edf2fe;
6
- --color-brand-200: #e1e9ff;
7
- --color-brand-300: #c1d0ff;
8
- --color-brand-400: #abbdf9;
9
- --color-brand-500: #8da4ef;
10
- --color-brand-600: #3e63dd;
11
- --color-brand-700: #3358d4;
12
- --color-brand-800: #3a5bc7;
13
- --color-brand-900: #172245;
14
- --color-brand-default: #3358d4;
15
- --color-gray-50: #fcfcfd;
16
- --color-gray-100: #f0f0f3;
17
- --color-gray-200: #e8e8ec;
18
- --color-gray-300: #d9d9e0;
19
- --color-gray-400: #cdced6;
20
- --color-gray-500: #b9bbc6;
21
- --color-gray-600: #8b8d98;
22
- --color-gray-700: #80838d;
23
- --color-gray-800: #60646c;
24
- --color-gray-900: #111316;
25
- --color-gray-default: #111316;
26
- --color-gray-muted: #8b8d98;
27
- --colors-accent: #3358d4 !important;
28
- --colors-accentAlt: #3a5bc7 !important;
29
- --colors-accentMuted: #abbdf9 !important;
30
- --colors-primary: #111316 !important;
31
- --colors-primaryAlt: #111316 !important;
32
- --colors-primaryMuted: #111316 !important;
33
- --colors-secondary: #fcfcfd !important;
34
- --colors-secondaryAlt: #fcfcfd !important;
35
- --colors-secondaryMuted: #fcfcfd !important;
36
- color-scheme: light;
4
+ --color-brand-50: #191111;
5
+ --color-brand-100: #3b1219;
6
+ --color-brand-200: #500f1c;
7
+ --color-brand-300: #72232d;
8
+ --color-brand-400: #8c333a;
9
+ --color-brand-500: #b54548;
10
+ --color-brand-600: #e5484d;
11
+ --color-brand-700: #ec5d5e;
12
+ --color-brand-800: #ff9592;
13
+ --color-brand-900: #ffdde3;
14
+ --color-brand-default: #ec5d5e;
15
+ --color-gray-50: #111111;
16
+ --color-gray-100: #222222;
17
+ --color-gray-200: #2a2a2a;
18
+ --color-gray-300: #3a3a3a;
19
+ --color-gray-400: #484848;
20
+ --color-gray-500: #606060;
21
+ --color-gray-600: #6e6e6e;
22
+ --color-gray-700: #7b7b7b;
23
+ --color-gray-800: #b4b4b4;
24
+ --color-gray-900: #f5f5f5;
25
+ --color-gray-default: #f5f5f5;
26
+ --color-gray-muted: #6e6e6e;
27
+ --colors-accent: #ec5d5e !important;
28
+ --colors-accentAlt: #ff9592 !important;
29
+ --colors-accentMuted: #8c333a !important;
30
+ --colors-primary: #f5f5f5 !important;
31
+ --colors-primaryAlt: #f5f5f5 !important;
32
+ --colors-primaryMuted: #f5f5f5 !important;
33
+ --colors-secondary: #111111 !important;
34
+ --colors-secondaryAlt: #111111 !important;
35
+ --colors-secondaryMuted: #111111 !important;
36
+ color-scheme: dark;
37
37
  }
38
38
  :host {
39
- --color-brand-50: #fdfdfe;
40
- --color-brand-100: #edf2fe;
41
- --color-brand-200: #e1e9ff;
42
- --color-brand-300: #c1d0ff;
43
- --color-brand-400: #abbdf9;
44
- --color-brand-500: #8da4ef;
45
- --color-brand-600: #3e63dd;
46
- --color-brand-700: #3358d4;
47
- --color-brand-800: #3a5bc7;
48
- --color-brand-900: #172245;
49
- --color-brand-default: #3358d4;
50
- --color-gray-50: #fcfcfd;
51
- --color-gray-100: #f0f0f3;
52
- --color-gray-200: #e8e8ec;
53
- --color-gray-300: #d9d9e0;
54
- --color-gray-400: #cdced6;
55
- --color-gray-500: #b9bbc6;
56
- --color-gray-600: #8b8d98;
57
- --color-gray-700: #80838d;
58
- --color-gray-800: #60646c;
59
- --color-gray-900: #111316;
60
- --color-gray-default: #111316;
61
- --color-gray-muted: #8b8d98;
62
- --colors-accent: #3358d4 !important;
63
- --colors-accentAlt: #3a5bc7 !important;
64
- --colors-accentMuted: #abbdf9 !important;
65
- --colors-primary: #111316 !important;
66
- --colors-primaryAlt: #111316 !important;
67
- --colors-primaryMuted: #111316 !important;
68
- --colors-secondary: #fcfcfd !important;
69
- --colors-secondaryAlt: #fcfcfd !important;
70
- --colors-secondaryMuted: #fcfcfd !important;
71
- color-scheme: light;
39
+ --color-brand-50: #191111;
40
+ --color-brand-100: #3b1219;
41
+ --color-brand-200: #500f1c;
42
+ --color-brand-300: #72232d;
43
+ --color-brand-400: #8c333a;
44
+ --color-brand-500: #b54548;
45
+ --color-brand-600: #e5484d;
46
+ --color-brand-700: #ec5d5e;
47
+ --color-brand-800: #ff9592;
48
+ --color-brand-900: #ffdde3;
49
+ --color-brand-default: #ec5d5e;
50
+ --color-gray-50: #111111;
51
+ --color-gray-100: #222222;
52
+ --color-gray-200: #2a2a2a;
53
+ --color-gray-300: #3a3a3a;
54
+ --color-gray-400: #484848;
55
+ --color-gray-500: #606060;
56
+ --color-gray-600: #6e6e6e;
57
+ --color-gray-700: #7b7b7b;
58
+ --color-gray-800: #b4b4b4;
59
+ --color-gray-900: #f5f5f5;
60
+ --color-gray-default: #f5f5f5;
61
+ --color-gray-muted: #6e6e6e;
62
+ --colors-accent: #ec5d5e !important;
63
+ --colors-accentAlt: #ff9592 !important;
64
+ --colors-accentMuted: #8c333a !important;
65
+ --colors-primary: #f5f5f5 !important;
66
+ --colors-primaryAlt: #f5f5f5 !important;
67
+ --colors-primaryMuted: #f5f5f5 !important;
68
+ --colors-secondary: #111111 !important;
69
+ --colors-secondaryAlt: #111111 !important;
70
+ --colors-secondaryMuted: #111111 !important;
71
+ color-scheme: dark;
72
72
  }
73
73
  }
74
74
  /* canopy-theme:end */
@@ -1712,5 +1712,4 @@
1712
1712
 
1713
1713
  /**
1714
1714
  * Define source files for utility classes
1715
- */
1716
- @source "../dist";
1715
+ */
package/ui/styles/index.scss CHANGED
@@ -7,4 +7,4 @@
7
7
  /**
8
8
  * Define source files for utility classes
9
9
  */
10
- @source "../dist";
10
+ // @source "../dist";
package/ui/tailwind-config.js CHANGED
@@ -130,6 +130,8 @@ function defineCanopyTailwindConfig(metaUrlOrOptions, maybeOptions) {
130
130
  config.theme = mergeTheme(config.theme, theme);
131
131
  }
132
132
 
133
+ config.theme = mergeTheme(config.theme, {colors: {}});
134
+
133
135
  return config;
134
136
  }
135
137
 
package/ui/theme.js CHANGED
@@ -130,14 +130,15 @@ function toTailwindScale(name, options = {}) {
130
130
  const prefix = name;
131
131
  const scale = {};
132
132
  const darken900Amount = normalizeDarkenAmount(options.darken900Amount);
133
+ const steps = STEP_MAP;
133
134
  for (const lvl of LEVELS) {
134
- const radixStep = STEP_MAP[lvl];
135
+ const radixStep = steps[lvl];
135
136
  const key = `${prefix}${radixStep}`;
136
137
  const value = palette[key];
137
138
  if (!value) return null;
138
139
  scale[lvl] = value;
139
140
  }
140
- const darkestKey = `${prefix}${STEP_MAP["900"]}`;
141
+ const darkestKey = `${prefix}${steps["900"]}`;
141
142
  if (scale["800"] && palette[darkestKey]) {
142
143
  const amount = darken900Amount != null ? darken900Amount : 0.25;
143
144
  scale["900"] =