create-ampless 0.2.0-alpha.13 → 0.2.0-alpha.16

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 (17) hide show
  1. package/dist/index.js +7 -5
  2. package/dist/templates/_shared/app/globals.css +42 -39
  3. package/dist/templates/_shared/app/layout.tsx +22 -1
  4. package/dist/templates/_shared/package.json +9 -10
  5. package/dist/templates/blog/README.md +4 -7
  6. package/dist/templates/blog/tokens.css +26 -40
  7. package/dist/templates/corporate/README.md +1 -2
  8. package/dist/templates/corporate/tokens.css +17 -39
  9. package/dist/templates/dads/README.md +1 -2
  10. package/dist/templates/dads/tokens.css +22 -42
  11. package/dist/templates/docs/README.md +1 -2
  12. package/dist/templates/docs/tokens.css +17 -39
  13. package/dist/templates/landing/README.md +1 -2
  14. package/dist/templates/landing/tokens.css +17 -39
  15. package/dist/templates/minimal/README.md +4 -7
  16. package/dist/templates/minimal/tokens.css +17 -39
  17. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -1988,9 +1988,12 @@ async function runUpgradeIn(destDir, sharedDir, opts = {}) {
1988
1988
  }
1989
1989
  const templateScripts = templatePkg["scripts"] ?? {};
1990
1990
  const projectScripts = projectPkg["scripts"] ?? {};
1991
- for (const [name, body] of Object.entries(templateScripts)) {
1992
- if (!AMPLESS_MANAGED_SCRIPTS.has(name)) continue;
1993
- projectScripts[name] = body;
1991
+ for (const name of AMPLESS_MANAGED_SCRIPTS) {
1992
+ if (name in templateScripts) {
1993
+ projectScripts[name] = templateScripts[name];
1994
+ } else {
1995
+ delete projectScripts[name];
1996
+ }
1994
1997
  }
1995
1998
  if (Object.keys(projectScripts).length > 0) {
1996
1999
  projectPkg["scripts"] = projectScripts;
@@ -2269,8 +2272,7 @@ async function main() {
2269
2272
  Next steps:
2270
2273
  ${pc5.cyan("cd")} ${opts.projectName}
2271
2274
  ${pc5.cyan("npm install")}
2272
- ${pc5.cyan("npx ampx sandbox")} ${pc5.dim("# start Amplify backend")}
2273
- ${pc5.cyan("npm run dev")} ${pc5.dim("# start Next.js")}`
2275
+ ${pc5.cyan("npm run sandbox")} ${pc5.dim("# deploy sandbox + start Next.js")}`
2274
2276
  );
2275
2277
  }
2276
2278
  main().catch((err) => {
package/dist/templates/_shared/app/globals.css CHANGED
@@ -49,6 +49,31 @@
49
49
  --radius-sm: calc(var(--radius) - 4px);
50
50
  }
51
51
 
52
+ /*
53
+ * Color scheme:
54
+ *
55
+ * - `:root { color-scheme: light dark }` opts the page into both modes
56
+ * and asks the browser to pick based on the visitor's
57
+ * `prefers-color-scheme` setting.
58
+ * - `html[data-color-scheme='light' | 'dark']` lets the site admin pin
59
+ * one mode regardless of system preference. The attribute is written
60
+ * by `app/layout.tsx` from the per-site setting
61
+ * (`theme.colorScheme`, default `'auto'` = no attribute).
62
+ * - Token values below (and in each theme's `tokens.css`) use the CSS
63
+ * `light-dark(L, D)` function so a single declaration covers both
64
+ * modes — the active `color-scheme` selects between L and D at
65
+ * paint time.
66
+ */
67
+ :root {
68
+ color-scheme: light dark;
69
+ }
70
+ html[data-color-scheme='light'] {
71
+ color-scheme: light;
72
+ }
73
+ html[data-color-scheme='dark'] {
74
+ color-scheme: dark;
75
+ }
76
+
52
77
  /*
53
78
  * Default tokens — used as fallback when no theme's `[data-theme=...]`
54
79
  * selector matches (e.g. body has no data-theme attribute, or admin
@@ -58,49 +83,27 @@
58
83
  * `<body data-theme="...">` attribute makes the scoped selector match.
59
84
  */
60
85
  :root {
61
- --background: oklch(1 0 0);
62
- --foreground: oklch(0.145 0 0);
63
- --card: oklch(1 0 0);
64
- --card-foreground: oklch(0.145 0 0);
65
- --primary: oklch(0.205 0 0);
66
- --primary-foreground: oklch(0.985 0 0);
67
- --secondary: oklch(0.97 0 0);
68
- --secondary-foreground: oklch(0.205 0 0);
69
- --muted: oklch(0.97 0 0);
70
- --muted-foreground: oklch(0.556 0 0);
71
- --accent: oklch(0.97 0 0);
72
- --accent-foreground: oklch(0.205 0 0);
73
- --destructive: oklch(0.577 0.245 27.325);
74
- --destructive-foreground: oklch(0.985 0 0);
75
- --border: oklch(0.922 0 0);
76
- --input: oklch(0.922 0 0);
77
- --ring: oklch(0.708 0 0);
86
+ --background: light-dark(oklch(1 0 0), oklch(0.145 0 0));
87
+ --foreground: light-dark(oklch(0.145 0 0), oklch(0.985 0 0));
88
+ --card: light-dark(oklch(1 0 0), oklch(0.145 0 0));
89
+ --card-foreground: light-dark(oklch(0.145 0 0), oklch(0.985 0 0));
90
+ --primary: light-dark(oklch(0.205 0 0), oklch(0.985 0 0));
91
+ --primary-foreground: light-dark(oklch(0.985 0 0), oklch(0.205 0 0));
92
+ --secondary: light-dark(oklch(0.97 0 0), oklch(0.269 0 0));
93
+ --secondary-foreground: light-dark(oklch(0.205 0 0), oklch(0.985 0 0));
94
+ --muted: light-dark(oklch(0.97 0 0), oklch(0.269 0 0));
95
+ --muted-foreground: light-dark(oklch(0.556 0 0), oklch(0.708 0 0));
96
+ --accent: light-dark(oklch(0.97 0 0), oklch(0.269 0 0));
97
+ --accent-foreground: light-dark(oklch(0.205 0 0), oklch(0.985 0 0));
98
+ --destructive: light-dark(oklch(0.577 0.245 27.325), oklch(0.396 0.141 25.723));
99
+ --destructive-foreground: light-dark(oklch(0.985 0 0), oklch(0.985 0 0));
100
+ --border: light-dark(oklch(0.922 0 0), oklch(0.269 0 0));
101
+ --input: light-dark(oklch(0.922 0 0), oklch(0.269 0 0));
102
+ --ring: light-dark(oklch(0.708 0 0), oklch(0.439 0 0));
78
103
  --radius: 0.5rem;
79
104
  --ampless-body-font: system-ui, -apple-system, sans-serif;
80
105
  }
81
106
 
82
- @media (prefers-color-scheme: dark) {
83
- :root {
84
- --background: oklch(0.145 0 0);
85
- --foreground: oklch(0.985 0 0);
86
- --card: oklch(0.145 0 0);
87
- --card-foreground: oklch(0.985 0 0);
88
- --primary: oklch(0.985 0 0);
89
- --primary-foreground: oklch(0.205 0 0);
90
- --secondary: oklch(0.269 0 0);
91
- --secondary-foreground: oklch(0.985 0 0);
92
- --muted: oklch(0.269 0 0);
93
- --muted-foreground: oklch(0.708 0 0);
94
- --accent: oklch(0.269 0 0);
95
- --accent-foreground: oklch(0.985 0 0);
96
- --destructive: oklch(0.396 0.141 25.723);
97
- --destructive-foreground: oklch(0.985 0 0);
98
- --border: oklch(0.269 0 0);
99
- --input: oklch(0.269 0 0);
100
- --ring: oklch(0.439 0 0);
101
- }
102
- }
103
-
104
107
  body {
105
108
  font-family: var(--ampless-body-font, system-ui, -apple-system, sans-serif);
106
109
  background: var(--background);
package/dist/templates/_shared/app/layout.tsx CHANGED
@@ -1,6 +1,7 @@
1
1
  import type { Metadata } from 'next'
2
2
  import { headers } from 'next/headers'
3
3
  import { DEFAULT_SITE_ID } from 'ampless'
4
+ import { validateColorScheme } from '@ampless/runtime'
4
5
  import { Providers } from './providers'
5
6
  import { siteMetadata } from '@/lib/seo'
6
7
  import { loadThemeConfig, renderThemeCss } from '@/lib/theme-config'
@@ -25,8 +26,28 @@ export default async function RootLayout({ children }: { children: React.ReactNo
25
26
  const themeCss = renderThemeCss(theme.cssVars)
26
27
  const locale = getLocale()
27
28
  const dict = getDictionary(locale)
29
+ // `data-color-scheme` pins the visitor to light or dark regardless
30
+ // of their system `prefers-color-scheme`. `'auto'` (the default)
31
+ // means we don't emit the attribute at all, so `globals.css`'s
32
+ // `:root { color-scheme: light dark }` lets the browser follow the
33
+ // system setting. Themes use `light-dark()` in their tokens.css so a
34
+ // single declaration covers both modes; the active `color-scheme`
35
+ // selects which value is rendered.
36
+ //
37
+ // The admin's theme-settings iframe preview passes the unsaved
38
+ // selection via `?previewColorScheme=<mode>`, which middleware
39
+ // forwards as `x-preview-color-scheme`. When that header is present
40
+ // it overrides the stored site setting so the preview updates live.
41
+ const previewHeader = h.get('x-preview-color-scheme')
42
+ const effectiveColorScheme = previewHeader
43
+ ? validateColorScheme(previewHeader)
44
+ : theme.colorScheme
45
+ const htmlProps: { lang: string; 'data-color-scheme'?: 'light' | 'dark' } = { lang: locale }
46
+ if (effectiveColorScheme !== 'auto') {
47
+ htmlProps['data-color-scheme'] = effectiveColorScheme
48
+ }
28
49
  return (
29
- <html lang={locale}>
50
+ <html {...htmlProps}>
30
51
  <head>
31
52
  {/* Inline `:root` overrides come AFTER globals.css so they win
32
53
  against the static defaults. Validated values only — see
package/dist/templates/_shared/package.json CHANGED
@@ -8,8 +8,7 @@
8
8
  "build": "next build",
9
9
  "start": "next start",
10
10
  "lint": "next lint",
11
- "sandbox": "ampx sandbox",
12
- "sandbox:dev": "ampx sandbox --once && next dev",
11
+ "sandbox": "ampx sandbox --once && next dev",
13
12
  "update-ampless": "npx create-ampless@latest upgrade",
14
13
  "copy-theme": "npx create-ampless@latest copy-theme"
15
14
  },
@@ -23,15 +22,15 @@
23
22
  "@tiptap/pm": "^3.23.4",
24
23
  "@tiptap/react": "^3.23.4",
25
24
  "@tiptap/starter-kit": "^3.23.4",
26
- "@ampless/plugin-og-image": "^0.2.0-alpha.3",
27
- "@ampless/plugin-rss": "^0.2.0-alpha.3",
28
- "@ampless/plugin-seo": "^0.2.0-alpha.3",
29
- "@ampless/plugin-webhook": "^0.2.0-alpha.3",
30
- "@ampless/admin": "^0.2.0-alpha.12",
31
- "@ampless/backend": "^0.2.0-alpha.5",
32
- "@ampless/runtime": "^0.2.0-alpha.5",
25
+ "@ampless/plugin-og-image": "^0.2.0-alpha.4",
26
+ "@ampless/plugin-rss": "^0.2.0-alpha.4",
27
+ "@ampless/plugin-seo": "^0.2.0-alpha.4",
28
+ "@ampless/plugin-webhook": "^0.2.0-alpha.4",
29
+ "@ampless/admin": "^0.2.0-alpha.14",
30
+ "@ampless/backend": "^0.2.0-alpha.6",
31
+ "@ampless/runtime": "^0.2.0-alpha.7",
33
32
  "@digital-go-jp/tailwind-theme-plugin": "^0.3.4",
34
- "ampless": "^0.2.0-alpha.3",
33
+ "ampless": "^0.2.0-alpha.4",
35
34
  "aws-amplify": "^6.10.0",
36
35
  "class-variance-authority": "^0.7.1",
37
36
  "clsx": "^2.1.1",
package/dist/templates/blog/README.md CHANGED
@@ -10,14 +10,11 @@ This project uses Amplify Gen 2 for the backend (Cognito, DynamoDB, S3) and Next
10
10
  # 1. Install dependencies
11
11
  npm install
12
12
 
13
- # 2. Start a personal AWS sandbox (terminal 1)
13
+ # 2. Deploy a personal AWS sandbox + start the Next.js dev server.
14
14
  # Requires AWS credentials configured (`aws configure`).
15
- # First run takes ~5–10 min to provision resources.
16
- # Generates amplify_outputs.json when ready.
17
- npx ampx sandbox
18
-
19
- # 3. Start the Next.js dev server (terminal 2)
20
- npm run dev
15
+ # First run takes ~5–10 min to provision resources;
16
+ # amplify_outputs.json is regenerated each time before dev starts.
17
+ npm run sandbox
21
18
  ```
22
19
 
23
20
  Then open [http://localhost:3000](http://localhost:3000).
package/dist/templates/blog/tokens.css CHANGED
@@ -7,48 +7,34 @@
7
7
  * loads, so `:root` selectors trump scoped attribute selectors of
8
8
  * equal specificity. The dispatcher emits `--primary` etc. only for
9
9
  * fields that have an override, leaving everything else to fall back
10
- * to these defaults. */
10
+ * to these defaults.
11
+ *
12
+ * Dark mode: tokens are declared with the CSS `light-dark(L, D)`
13
+ * function. The active `color-scheme` (set on `:root` and optionally
14
+ * pinned per-site via `html[data-color-scheme]`) selects whether L or
15
+ * D is rendered. `globals.css` opts the document into `color-scheme:
16
+ * light dark` by default — visitors with `prefers-color-scheme: dark`
17
+ * see the dark palette automatically.
18
+ */
11
19
 
12
20
  [data-theme='blog'] {
13
- --background: oklch(1 0 0);
14
- --foreground: oklch(0.145 0 0);
15
- --card: oklch(1 0 0);
16
- --card-foreground: oklch(0.145 0 0);
17
- --primary: oklch(0.205 0 0);
18
- --primary-foreground: oklch(0.985 0 0);
19
- --secondary: oklch(0.97 0 0);
20
- --secondary-foreground: oklch(0.205 0 0);
21
- --muted: oklch(0.97 0 0);
22
- --muted-foreground: oklch(0.556 0 0);
23
- --accent: oklch(0.97 0 0);
24
- --accent-foreground: oklch(0.205 0 0);
25
- --destructive: oklch(0.577 0.245 27.325);
26
- --destructive-foreground: oklch(0.985 0 0);
27
- --border: oklch(0.922 0 0);
28
- --input: oklch(0.922 0 0);
29
- --ring: oklch(0.708 0 0);
21
+ --background: light-dark(oklch(1 0 0), oklch(0.145 0 0));
22
+ --foreground: light-dark(oklch(0.145 0 0), oklch(0.985 0 0));
23
+ --card: light-dark(oklch(1 0 0), oklch(0.145 0 0));
24
+ --card-foreground: light-dark(oklch(0.145 0 0), oklch(0.985 0 0));
25
+ --primary: light-dark(oklch(0.205 0 0), oklch(0.985 0 0));
26
+ --primary-foreground: light-dark(oklch(0.985 0 0), oklch(0.205 0 0));
27
+ --secondary: light-dark(oklch(0.97 0 0), oklch(0.269 0 0));
28
+ --secondary-foreground: light-dark(oklch(0.205 0 0), oklch(0.985 0 0));
29
+ --muted: light-dark(oklch(0.97 0 0), oklch(0.269 0 0));
30
+ --muted-foreground: light-dark(oklch(0.556 0 0), oklch(0.708 0 0));
31
+ --accent: light-dark(oklch(0.97 0 0), oklch(0.269 0 0));
32
+ --accent-foreground: light-dark(oklch(0.205 0 0), oklch(0.985 0 0));
33
+ --destructive: light-dark(oklch(0.577 0.245 27.325), oklch(0.396 0.141 25.723));
34
+ --destructive-foreground: light-dark(oklch(0.985 0 0), oklch(0.985 0 0));
35
+ --border: light-dark(oklch(0.922 0 0), oklch(0.269 0 0));
36
+ --input: light-dark(oklch(0.922 0 0), oklch(0.269 0 0));
37
+ --ring: light-dark(oklch(0.708 0 0), oklch(0.439 0 0));
30
38
  --radius: 0.5rem;
31
39
  --ampless-body-font: system-ui, -apple-system, sans-serif;
32
40
  }
33
-
34
- @media (prefers-color-scheme: dark) {
35
- [data-theme='blog'] {
36
- --background: oklch(0.145 0 0);
37
- --foreground: oklch(0.985 0 0);
38
- --card: oklch(0.145 0 0);
39
- --card-foreground: oklch(0.985 0 0);
40
- --primary: oklch(0.985 0 0);
41
- --primary-foreground: oklch(0.205 0 0);
42
- --secondary: oklch(0.269 0 0);
43
- --secondary-foreground: oklch(0.985 0 0);
44
- --muted: oklch(0.269 0 0);
45
- --muted-foreground: oklch(0.708 0 0);
46
- --accent: oklch(0.269 0 0);
47
- --accent-foreground: oklch(0.985 0 0);
48
- --destructive: oklch(0.396 0.141 25.723);
49
- --destructive-foreground: oklch(0.985 0 0);
50
- --border: oklch(0.269 0 0);
51
- --input: oklch(0.269 0 0);
52
- --ring: oklch(0.439 0 0);
53
- }
54
- }
package/dist/templates/corporate/README.md CHANGED
@@ -15,6 +15,5 @@ In `/admin/sites/<siteId>/theme`:
15
15
 
16
16
  ```bash
17
17
  npm install
18
- npx ampx sandbox
19
- npm run dev
18
+ npm run sandbox
20
19
  ```
package/dist/templates/corporate/tokens.css CHANGED
@@ -3,45 +3,23 @@
3
3
  * selector pattern as the other themes. */
4
4
 
5
5
  [data-theme='corporate'] {
6
- --background: oklch(0.99 0 0);
7
- --foreground: oklch(0.18 0.02 250);
8
- --card: oklch(1 0 0);
9
- --card-foreground: oklch(0.18 0.02 250);
10
- --primary: oklch(0.4 0.13 250);
11
- --primary-foreground: oklch(0.99 0 0);
12
- --secondary: oklch(0.95 0.01 250);
13
- --secondary-foreground: oklch(0.25 0.05 250);
14
- --muted: oklch(0.96 0.005 250);
15
- --muted-foreground: oklch(0.5 0.02 250);
16
- --accent: oklch(0.95 0.02 250);
17
- --accent-foreground: oklch(0.3 0.08 250);
18
- --destructive: oklch(0.55 0.22 25);
19
- --destructive-foreground: oklch(0.99 0 0);
20
- --border: oklch(0.9 0.005 250);
21
- --input: oklch(0.9 0.005 250);
22
- --ring: oklch(0.4 0.13 250);
6
+ --background: light-dark(oklch(0.99 0 0), oklch(0.16 0.02 250));
7
+ --foreground: light-dark(oklch(0.18 0.02 250), oklch(0.96 0.005 250));
8
+ --card: light-dark(oklch(1 0 0), oklch(0.22 0.02 250));
9
+ --card-foreground: light-dark(oklch(0.18 0.02 250), oklch(0.96 0.005 250));
10
+ --primary: light-dark(oklch(0.4 0.13 250), oklch(0.7 0.14 250));
11
+ --primary-foreground: light-dark(oklch(0.99 0 0), oklch(0.16 0.02 250));
12
+ --secondary: light-dark(oklch(0.95 0.01 250), oklch(0.28 0.03 250));
13
+ --secondary-foreground: light-dark(oklch(0.25 0.05 250), oklch(0.96 0.005 250));
14
+ --muted: light-dark(oklch(0.96 0.005 250), oklch(0.26 0.02 250));
15
+ --muted-foreground: light-dark(oklch(0.5 0.02 250), oklch(0.7 0.02 250));
16
+ --accent: light-dark(oklch(0.95 0.02 250), oklch(0.32 0.05 250));
17
+ --accent-foreground: light-dark(oklch(0.3 0.08 250), oklch(0.96 0.005 250));
18
+ --destructive: light-dark(oklch(0.55 0.22 25), oklch(0.55 0.22 25));
19
+ --destructive-foreground: light-dark(oklch(0.99 0 0), oklch(0.99 0 0));
20
+ --border: light-dark(oklch(0.9 0.005 250), oklch(0.32 0.02 250));
21
+ --input: light-dark(oklch(0.9 0.005 250), oklch(0.32 0.02 250));
22
+ --ring: light-dark(oklch(0.4 0.13 250), oklch(0.7 0.14 250));
23
23
  --radius: 0.25rem;
24
24
  --ampless-body-font: system-ui, -apple-system, sans-serif;
25
25
  }
26
-
27
- @media (prefers-color-scheme: dark) {
28
- [data-theme='corporate'] {
29
- --background: oklch(0.16 0.02 250);
30
- --foreground: oklch(0.96 0.005 250);
31
- --card: oklch(0.22 0.02 250);
32
- --card-foreground: oklch(0.96 0.005 250);
33
- --primary: oklch(0.7 0.14 250);
34
- --primary-foreground: oklch(0.16 0.02 250);
35
- --secondary: oklch(0.28 0.03 250);
36
- --secondary-foreground: oklch(0.96 0.005 250);
37
- --muted: oklch(0.26 0.02 250);
38
- --muted-foreground: oklch(0.7 0.02 250);
39
- --accent: oklch(0.32 0.05 250);
40
- --accent-foreground: oklch(0.96 0.005 250);
41
- --destructive: oklch(0.55 0.22 25);
42
- --destructive-foreground: oklch(0.99 0 0);
43
- --border: oklch(0.32 0.02 250);
44
- --input: oklch(0.32 0.02 250);
45
- --ring: oklch(0.7 0.14 250);
46
- }
47
- }
package/dist/templates/dads/README.md CHANGED
@@ -30,6 +30,5 @@ In `/admin/sites/<siteId>/theme`:
30
30
 
31
31
  ```bash
32
32
  npm install
33
- npx ampx sandbox
34
- npm run dev
33
+ npm run sandbox
35
34
  ```
package/dist/templates/dads/tokens.css CHANGED
@@ -13,26 +13,31 @@
13
13
  * enough; we don't hardcode hex values here. The fallbacks after
14
14
  * each `var(...)` are the DADS values from version 0.3.4 in case
15
15
  * the plugin isn't loaded for some reason.
16
+ *
17
+ * Dark mode: DADS doesn't ship an official dark palette as of v0.3.4,
18
+ * so the D side of `light-dark()` here is an inverted approximation.
19
+ * When DADS adds a dark variant, bind the D arg to the corresponding
20
+ * plugin variables (e.g. `var(--color-blue-300)` for primary).
16
21
  */
17
22
 
18
23
  [data-theme='dads'] {
19
- --background: #ffffff;
20
- --foreground: #1a1a1c;
21
- --card: #ffffff;
22
- --card-foreground: #1a1a1c;
23
- --primary: var(--color-blue-900, #0017c1);
24
- --primary-foreground: #ffffff;
25
- --secondary: var(--color-blue-50, #e8f1fe);
26
- --secondary-foreground: var(--color-blue-900, #0017c1);
27
- --muted: #f5f5f5;
28
- --muted-foreground: #595959;
29
- --accent: var(--color-blue-50, #e8f1fe);
30
- --accent-foreground: var(--color-blue-900, #0017c1);
31
- --destructive: var(--color-red-900, #ce0000);
32
- --destructive-foreground: #ffffff;
33
- --border: #d9d9d9;
34
- --input: #d9d9d9;
35
- --ring: var(--color-blue-900, #0017c1);
24
+ --background: light-dark(#ffffff, #1a1a1c);
25
+ --foreground: light-dark(#1a1a1c, #f0f0f0);
26
+ --card: light-dark(#ffffff, #232327);
27
+ --card-foreground: light-dark(#1a1a1c, #f0f0f0);
28
+ --primary: light-dark(var(--color-blue-900, #0017c1), var(--color-blue-300, #9db7f9));
29
+ --primary-foreground: light-dark(#ffffff, #1a1a1c);
30
+ --secondary: light-dark(var(--color-blue-50, #e8f1fe), #2c2f3a);
31
+ --secondary-foreground: light-dark(var(--color-blue-900, #0017c1), #f0f0f0);
32
+ --muted: light-dark(#f5f5f5, #28282c);
33
+ --muted-foreground: light-dark(#595959, #b3b3b3);
34
+ --accent: light-dark(var(--color-blue-50, #e8f1fe), #2c2f3a);
35
+ --accent-foreground: light-dark(var(--color-blue-900, #0017c1), #f0f0f0);
36
+ --destructive: light-dark(var(--color-red-900, #ce0000), var(--color-red-700, #fa0000));
37
+ --destructive-foreground: light-dark(#ffffff, #ffffff);
38
+ --border: light-dark(#d9d9d9, #3a3a3f);
39
+ --input: light-dark(#d9d9d9, #3a3a3f);
40
+ --ring: light-dark(var(--color-blue-900, #0017c1), var(--color-blue-300, #9db7f9));
36
41
  --radius: 0.25rem;
37
42
  /* DADS recommends Noto Sans JP for body text. The plugin sets
38
43
  * fontFamily.sans to it; we surface that through our usual
@@ -40,28 +45,3 @@
40
45
  * up consistently. */
41
46
  --ampless-body-font: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, sans-serif;
42
47
  }
43
-
44
- @media (prefers-color-scheme: dark) {
45
- [data-theme='dads'] {
46
- /* DADS doesn't ship an official dark palette as of v0.3.4; this
47
- * is an inverted approximation. When DADS adds a dark variant,
48
- * bind these to the corresponding plugin variables. */
49
- --background: #1a1a1c;
50
- --foreground: #f0f0f0;
51
- --card: #232327;
52
- --card-foreground: #f0f0f0;
53
- --primary: var(--color-blue-300, #9db7f9);
54
- --primary-foreground: #1a1a1c;
55
- --secondary: #2c2f3a;
56
- --secondary-foreground: #f0f0f0;
57
- --muted: #28282c;
58
- --muted-foreground: #b3b3b3;
59
- --accent: #2c2f3a;
60
- --accent-foreground: #f0f0f0;
61
- --destructive: var(--color-red-700, #fa0000);
62
- --destructive-foreground: #ffffff;
63
- --border: #3a3a3f;
64
- --input: #3a3a3f;
65
- --ring: var(--color-blue-300, #9db7f9);
66
- }
67
- }
package/dist/templates/docs/README.md CHANGED
@@ -22,6 +22,5 @@ Tag a post `guide` (in the post editor) and add a sidebar row with URL `tag:guid
22
22
 
23
23
  ```bash
24
24
  npm install
25
- npx ampx sandbox
26
- npm run dev
25
+ npm run sandbox
27
26
  ```
package/dist/templates/docs/tokens.css CHANGED
@@ -2,50 +2,28 @@
2
2
  * tighter radius, monospace-leaning code styling. */
3
3
 
4
4
  [data-theme='docs'] {
5
- --background: oklch(1 0 0);
6
- --foreground: oklch(0.18 0.02 280);
7
- --card: oklch(0.99 0 0);
8
- --card-foreground: oklch(0.18 0.02 280);
9
- --primary: oklch(0.5 0.18 280);
10
- --primary-foreground: oklch(0.99 0 0);
11
- --secondary: oklch(0.96 0.01 280);
12
- --secondary-foreground: oklch(0.25 0.05 280);
13
- --muted: oklch(0.97 0.005 280);
14
- --muted-foreground: oklch(0.5 0.02 280);
15
- --accent: oklch(0.95 0.04 280);
16
- --accent-foreground: oklch(0.3 0.1 280);
17
- --destructive: oklch(0.55 0.22 25);
18
- --destructive-foreground: oklch(0.99 0 0);
19
- --border: oklch(0.9 0.005 280);
20
- --input: oklch(0.9 0.005 280);
21
- --ring: oklch(0.5 0.18 280);
5
+ --background: light-dark(oklch(1 0 0), oklch(0.16 0.02 280));
6
+ --foreground: light-dark(oklch(0.18 0.02 280), oklch(0.96 0.005 280));
7
+ --card: light-dark(oklch(0.99 0 0), oklch(0.2 0.02 280));
8
+ --card-foreground: light-dark(oklch(0.18 0.02 280), oklch(0.96 0.005 280));
9
+ --primary: light-dark(oklch(0.5 0.18 280), oklch(0.72 0.16 280));
10
+ --primary-foreground: light-dark(oklch(0.99 0 0), oklch(0.16 0.02 280));
11
+ --secondary: light-dark(oklch(0.96 0.01 280), oklch(0.28 0.03 280));
12
+ --secondary-foreground: light-dark(oklch(0.25 0.05 280), oklch(0.96 0.005 280));
13
+ --muted: light-dark(oklch(0.97 0.005 280), oklch(0.24 0.02 280));
14
+ --muted-foreground: light-dark(oklch(0.5 0.02 280), oklch(0.7 0.02 280));
15
+ --accent: light-dark(oklch(0.95 0.04 280), oklch(0.32 0.06 280));
16
+ --accent-foreground: light-dark(oklch(0.3 0.1 280), oklch(0.96 0.005 280));
17
+ --destructive: light-dark(oklch(0.55 0.22 25), oklch(0.55 0.22 25));
18
+ --destructive-foreground: light-dark(oklch(0.99 0 0), oklch(0.99 0 0));
19
+ --border: light-dark(oklch(0.9 0.005 280), oklch(0.32 0.02 280));
20
+ --input: light-dark(oklch(0.9 0.005 280), oklch(0.32 0.02 280));
21
+ --ring: light-dark(oklch(0.5 0.18 280), oklch(0.72 0.16 280));
22
22
  --radius: 0.25rem;
23
23
  --ampless-body-font: system-ui, -apple-system, sans-serif;
24
24
  --ampless-code-font: ui-monospace, SFMono-Regular, Menlo, monospace;
25
25
  }
26
26
 
27
- @media (prefers-color-scheme: dark) {
28
- [data-theme='docs'] {
29
- --background: oklch(0.16 0.02 280);
30
- --foreground: oklch(0.96 0.005 280);
31
- --card: oklch(0.2 0.02 280);
32
- --card-foreground: oklch(0.96 0.005 280);
33
- --primary: oklch(0.72 0.16 280);
34
- --primary-foreground: oklch(0.16 0.02 280);
35
- --secondary: oklch(0.28 0.03 280);
36
- --secondary-foreground: oklch(0.96 0.005 280);
37
- --muted: oklch(0.24 0.02 280);
38
- --muted-foreground: oklch(0.7 0.02 280);
39
- --accent: oklch(0.32 0.06 280);
40
- --accent-foreground: oklch(0.96 0.005 280);
41
- --destructive: oklch(0.55 0.22 25);
42
- --destructive-foreground: oklch(0.99 0 0);
43
- --border: oklch(0.32 0.02 280);
44
- --input: oklch(0.32 0.02 280);
45
- --ring: oklch(0.72 0.16 280);
46
- }
47
- }
48
-
49
27
  /* Code font scope: prose code blocks under the docs theme use the
50
28
  * configurable --ampless-code-font variable. The body font remains the
51
29
  * theme-configured --ampless-body-font (or system fallback). */
package/dist/templates/landing/README.md CHANGED
@@ -18,8 +18,7 @@ Empty hero fields fall back to the site name / description from `/admin/sites/<s
18
18
 
19
19
  ```bash
20
20
  npm install
21
- npx ampx sandbox # provision the AWS backend
22
- npm run dev # start Next.js
21
+ npm run sandbox # provision the AWS backend + start Next.js
23
22
  ```
24
23
 
25
24
  See the project README for full setup.
package/dist/templates/landing/tokens.css CHANGED
@@ -3,45 +3,23 @@
3
3
  * templates/blog/tokens.css for the scoped-selector pattern. */
4
4
 
5
5
  [data-theme='landing'] {
6
- --background: oklch(0.99 0.01 60);
7
- --foreground: oklch(0.18 0.02 30);
8
- --card: oklch(1 0 0);
9
- --card-foreground: oklch(0.18 0.02 30);
10
- --primary: oklch(0.6 0.18 35);
11
- --primary-foreground: oklch(0.99 0.005 60);
12
- --secondary: oklch(0.96 0.015 50);
13
- --secondary-foreground: oklch(0.25 0.04 30);
14
- --muted: oklch(0.96 0.015 50);
15
- --muted-foreground: oklch(0.5 0.02 40);
16
- --accent: oklch(0.95 0.05 35);
17
- --accent-foreground: oklch(0.3 0.1 30);
18
- --destructive: oklch(0.55 0.22 25);
19
- --destructive-foreground: oklch(0.99 0 0);
20
- --border: oklch(0.92 0.01 60);
21
- --input: oklch(0.92 0.01 60);
22
- --ring: oklch(0.6 0.18 35);
6
+ --background: light-dark(oklch(0.99 0.01 60), oklch(0.16 0.02 30));
7
+ --foreground: light-dark(oklch(0.18 0.02 30), oklch(0.96 0.01 60));
8
+ --card: light-dark(oklch(1 0 0), oklch(0.22 0.02 30));
9
+ --card-foreground: light-dark(oklch(0.18 0.02 30), oklch(0.96 0.01 60));
10
+ --primary: light-dark(oklch(0.6 0.18 35), oklch(0.72 0.16 35));
11
+ --primary-foreground: light-dark(oklch(0.99 0.005 60), oklch(0.16 0.02 30));
12
+ --secondary: light-dark(oklch(0.96 0.015 50), oklch(0.28 0.03 30));
13
+ --secondary-foreground: light-dark(oklch(0.25 0.04 30), oklch(0.96 0.01 60));
14
+ --muted: light-dark(oklch(0.96 0.015 50), oklch(0.28 0.03 30));
15
+ --muted-foreground: light-dark(oklch(0.5 0.02 40), oklch(0.7 0.02 40));
16
+ --accent: light-dark(oklch(0.95 0.05 35), oklch(0.32 0.06 30));
17
+ --accent-foreground: light-dark(oklch(0.3 0.1 30), oklch(0.96 0.01 60));
18
+ --destructive: light-dark(oklch(0.55 0.22 25), oklch(0.55 0.22 25));
19
+ --destructive-foreground: light-dark(oklch(0.99 0 0), oklch(0.99 0 0));
20
+ --border: light-dark(oklch(0.92 0.01 60), oklch(0.32 0.03 30));
21
+ --input: light-dark(oklch(0.92 0.01 60), oklch(0.32 0.03 30));
22
+ --ring: light-dark(oklch(0.6 0.18 35), oklch(0.72 0.16 35));
23
23
  --radius: 0.75rem;
24
24
  --ampless-body-font: system-ui, -apple-system, sans-serif;
25
25
  }
26
-
27
- @media (prefers-color-scheme: dark) {
28
- [data-theme='landing'] {
29
- --background: oklch(0.16 0.02 30);
30
- --foreground: oklch(0.96 0.01 60);
31
- --card: oklch(0.22 0.02 30);
32
- --card-foreground: oklch(0.96 0.01 60);
33
- --primary: oklch(0.72 0.16 35);
34
- --primary-foreground: oklch(0.16 0.02 30);
35
- --secondary: oklch(0.28 0.03 30);
36
- --secondary-foreground: oklch(0.96 0.01 60);
37
- --muted: oklch(0.28 0.03 30);
38
- --muted-foreground: oklch(0.7 0.02 40);
39
- --accent: oklch(0.32 0.06 30);
40
- --accent-foreground: oklch(0.96 0.01 60);
41
- --destructive: oklch(0.55 0.22 25);
42
- --destructive-foreground: oklch(0.99 0 0);
43
- --border: oklch(0.32 0.03 30);
44
- --input: oklch(0.32 0.03 30);
45
- --ring: oklch(0.72 0.16 35);
46
- }
47
- }
package/dist/templates/minimal/README.md CHANGED
@@ -10,14 +10,11 @@ This project uses Amplify Gen 2 for the backend (Cognito, DynamoDB, S3) and Next
10
10
  # 1. Install dependencies
11
11
  npm install
12
12
 
13
- # 2. Start a personal AWS sandbox (terminal 1)
13
+ # 2. Deploy a personal AWS sandbox + start the Next.js dev server.
14
14
  # Requires AWS credentials configured (`aws configure`).
15
- # First run takes ~5–10 min to provision resources.
16
- # Generates amplify_outputs.json when ready.
17
- npx ampx sandbox
18
-
19
- # 3. Start the Next.js dev server (terminal 2)
20
- npm run dev
15
+ # First run takes ~5–10 min to provision resources;
16
+ # amplify_outputs.json is regenerated each time before dev starts.
17
+ npm run sandbox
21
18
  ```
22
19
 
23
20
  Then open [http://localhost:3000](http://localhost:3000).
package/dist/templates/minimal/tokens.css CHANGED
@@ -2,45 +2,23 @@
2
2
  * pattern as templates/blog/tokens.css; see that file for context. */
3
3
 
4
4
  [data-theme='minimal'] {
5
- --background: oklch(0.99 0.005 90);
6
- --foreground: oklch(0.18 0.02 250);
7
- --card: oklch(1 0 0);
8
- --card-foreground: oklch(0.18 0.02 250);
9
- --primary: oklch(0.55 0.18 250);
10
- --primary-foreground: oklch(0.985 0 0);
11
- --secondary: oklch(0.95 0.01 250);
12
- --secondary-foreground: oklch(0.25 0.05 250);
13
- --muted: oklch(0.95 0.01 250);
14
- --muted-foreground: oklch(0.5 0.02 250);
15
- --accent: oklch(0.95 0.03 250);
16
- --accent-foreground: oklch(0.3 0.08 250);
17
- --destructive: oklch(0.577 0.245 27.325);
18
- --destructive-foreground: oklch(0.985 0 0);
19
- --border: oklch(0.9 0.01 250);
20
- --input: oklch(0.9 0.01 250);
21
- --ring: oklch(0.55 0.18 250);
5
+ --background: light-dark(oklch(0.99 0.005 90), oklch(0.18 0.02 250));
6
+ --foreground: light-dark(oklch(0.18 0.02 250), oklch(0.95 0.01 250));
7
+ --card: light-dark(oklch(1 0 0), oklch(0.22 0.02 250));
8
+ --card-foreground: light-dark(oklch(0.18 0.02 250), oklch(0.95 0.01 250));
9
+ --primary: light-dark(oklch(0.55 0.18 250), oklch(0.75 0.18 250));
10
+ --primary-foreground: light-dark(oklch(0.985 0 0), oklch(0.18 0.02 250));
11
+ --secondary: light-dark(oklch(0.95 0.01 250), oklch(0.28 0.03 250));
12
+ --secondary-foreground: light-dark(oklch(0.25 0.05 250), oklch(0.95 0.01 250));
13
+ --muted: light-dark(oklch(0.95 0.01 250), oklch(0.28 0.03 250));
14
+ --muted-foreground: light-dark(oklch(0.5 0.02 250), oklch(0.7 0.02 250));
15
+ --accent: light-dark(oklch(0.95 0.03 250), oklch(0.32 0.05 250));
16
+ --accent-foreground: light-dark(oklch(0.3 0.08 250), oklch(0.95 0.01 250));
17
+ --destructive: light-dark(oklch(0.577 0.245 27.325), oklch(0.5 0.2 27));
18
+ --destructive-foreground: light-dark(oklch(0.985 0 0), oklch(0.985 0 0));
19
+ --border: light-dark(oklch(0.9 0.01 250), oklch(0.32 0.03 250));
20
+ --input: light-dark(oklch(0.9 0.01 250), oklch(0.32 0.03 250));
21
+ --ring: light-dark(oklch(0.55 0.18 250), oklch(0.55 0.18 250));
22
22
  --radius: 0.375rem;
23
23
  --ampless-body-font: system-ui, -apple-system, sans-serif;
24
24
  }
25
-
26
- @media (prefers-color-scheme: dark) {
27
- [data-theme='minimal'] {
28
- --background: oklch(0.18 0.02 250);
29
- --foreground: oklch(0.95 0.01 250);
30
- --card: oklch(0.22 0.02 250);
31
- --card-foreground: oklch(0.95 0.01 250);
32
- --primary: oklch(0.75 0.18 250);
33
- --primary-foreground: oklch(0.18 0.02 250);
34
- --secondary: oklch(0.28 0.03 250);
35
- --secondary-foreground: oklch(0.95 0.01 250);
36
- --muted: oklch(0.28 0.03 250);
37
- --muted-foreground: oklch(0.7 0.02 250);
38
- --accent: oklch(0.32 0.05 250);
39
- --accent-foreground: oklch(0.95 0.01 250);
40
- --destructive: oklch(0.5 0.2 27);
41
- --destructive-foreground: oklch(0.985 0 0);
42
- --border: oklch(0.32 0.03 250);
43
- --input: oklch(0.32 0.03 250);
44
- --ring: oklch(0.55 0.18 250);
45
- }
46
- }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "create-ampless",
3
- "version": "0.2.0-alpha.13",
3
+ "version": "0.2.0-alpha.16",
4
4
  "description": "Create a new ampless project",
5
5
  "license": "MIT",
6
6
  "type": "module",