create-thunderous 0.0.3 → 0.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-thunderous",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "A CLI tool to scaffold a new project using the Thunderous stack.",
   "main": "index.js",
   "bin": {

package/reference-project/src/components/crumb.ts

@@ -1,12 +1,15 @@
-import { css, customElement, html } from 'thunderous';
+import { createSignal, css, customElement, html } from 'thunderous';
+import { theme } from '../theme';
 
 export const Crumb = customElement(({ adoptStyleSheet, attrSignals }) => {
-	const { href } = attrSignals;
-	const [getHref] = href ?? [() => ''];
+	const [getHref] = attrSignals['href'] ?? createSignal('');
+
+	adoptStyleSheet(theme);
 	adoptStyleSheet(stylesheet);
+
 	return html`
 		<span class="crumb">
-			<a href=${getHref()}>
+			<a href="${getHref()}">
 				<slot></slot>
 			</a>
 		</span>
@@ -15,7 +18,7 @@ export const Crumb = customElement(({ adoptStyleSheet, attrSignals }) => {
 
 const stylesheet = css`
 	a {
-		color: var(--link);
+		color: var(--color-brand-1);
 		text-decoration: none;
 		font-weight: 600;
 		transition: color 180ms ease;
@@ -23,11 +26,11 @@ const stylesheet = css`
 
 	a:hover,
 	a:focus-visible {
-		color: var(--link-hover);
+		color: var(--color-brand-1-1);
 	}
 
 	a:focus-visible {
-		outline: 2px solid color-mix(in srgb, var(--link) 50%, white 20%);
+		outline: 2px solid color-mix(in srgb, var(--color-brand-1) 50%, white 20%);
 		outline-offset: 3px;
 		border-radius: 0.25rem;
 	}

package/reference-project/src/components/{my-component.ts → feature.ts}

@@ -1,14 +1,17 @@
-import { customElement, html, css } from 'thunderous';
+import { customElement, html, css, createSignal } from 'thunderous';
+import { theme } from '../theme';
 
-export const MyComponent = customElement(({ clientOnlyCallback, adoptStyleSheet }) => {
-	clientOnlyCallback(() => {
-		console.log('MyComponent has been mounted on the client side.');
-	});
+export const Feature = customElement(({ adoptStyleSheet, attrSignals }) => {
+	const [getHref] = attrSignals['href'] ?? createSignal('');
+	const [getButtonText] = attrSignals['buttontext'] ?? createSignal('Learn More');
+
+	adoptStyleSheet(theme);
 	adoptStyleSheet(stylesheet);
+
 	return html`
-		<div class="my-component">
+		<div class="feature">
 			<slot></slot>
-			<a href="https://thunderous.dev">Learn More</a>
+			${getHref() !== '' ? html`<a href=${getHref()}>${getButtonText()}</a>` : ''}
 		</div>
 	`;
 });
@@ -17,53 +20,33 @@ const stylesheet = css`
 	:host {
 		display: block;
 		font-size: 2rem;
-
-		--bg-1: rgba(255, 255, 255, 0.72);
-		--bg-2: rgba(255, 255, 255, 0.5);
-		--border: rgba(255, 255, 255, 0.35);
-		--text: #1e293b;
-		--muted: #b8c7e6;
-		--link: #7dd3fc;
-		--link-hover: #c4b5fd;
-		--shadow: 0 18px 50px rgba(15, 23, 42, 0.35);
-
-		@media (prefers-color-scheme: light) {
-			--bg-1: rgba(255, 255, 255, 0.88);
-			--bg-2: rgba(240, 249, 255, 0.74);
-			--border: rgba(99, 102, 241, 0.16);
-			--text: #1e293b;
-			--muted: #475569;
-			--link: #2563eb;
-			--link-hover: #7c3aed;
-			--shadow: 0 18px 40px rgba(51, 65, 85, 0.14);
-		}
 	}
 
 	::slotted(*) {
 		margin: 0;
-		color: var(--text);
+		color: var(--color-neutral-2);
 	}
 
-	.my-component {
+	.feature {
 		text-align: center;
 		position: relative;
 		overflow: hidden;
 		padding: 2em 3em;
 		border-radius: 20px;
-		border: 1px solid var(--border);
+		border: 1px solid var(--color-surface-2-2);
 		background:
 			linear-gradient(135deg, rgba(99, 102, 241, 0.22), rgba(14, 165, 233, 0.16)),
-			linear-gradient(180deg, var(--bg-1), var(--bg-2));
+			linear-gradient(180deg, var(--color-surface-2), var(--color-surface-2-1));
 		backdrop-filter: blur(18px) saturate(160%);
 		-webkit-backdrop-filter: blur(18px) saturate(160%);
-		box-shadow: var(--shadow);
+		box-shadow: var(--shadow-2);
 		isolation: isolate;
 		margin: 1em auto;
 		max-width: 20em;
 	}
 
-	.my-component::before,
-	.my-component::after {
+	.feature::before,
+	.feature::after {
 		content: '';
 		position: absolute;
 		inset: auto;
@@ -74,7 +57,7 @@ const stylesheet = css`
 		pointer-events: none;
 	}
 
-	.my-component::before {
+	.feature::before {
 		top: -60px;
 		right: -40px;
 		width: 180px;
@@ -82,7 +65,7 @@ const stylesheet = css`
 		background: radial-gradient(circle, rgba(125, 211, 252, 0.35), transparent 65%);
 	}
 
-	.my-component::after {
+	.feature::after {
 		bottom: -70px;
 		left: -30px;
 		width: 160px;
@@ -90,16 +73,16 @@ const stylesheet = css`
 		background: radial-gradient(circle, rgba(196, 181, 253, 0.28), transparent 65%);
 	}
 
-	.my-component p {
+	.feature p {
 		margin: 0;
 		font-size: 1rem;
 		line-height: 1.75;
 		letter-spacing: 0.01em;
-		color: var(--text);
+		color: var(--color-neutral-2);
 		text-wrap: pretty;
 	}
 
-	.my-component a {
+	.feature a {
 		display: inline-flex;
 		align-items: center;
 		justify-content: center;
@@ -107,13 +90,14 @@ const stylesheet = css`
 		margin: 1.5em 0 0.5em;
 		padding: 0.85em 1.25em;
 		border-radius: 999px;
-		border: 1px solid color-mix(in srgb, var(--border) 85%, white 15%);
+		border: 1px solid color-mix(in srgb, var(--color-surface-2-2) 85%, white 15%);
 		background:
-			linear-gradient(135deg, var(--link), var(--link-hover)), linear-gradient(180deg, var(--bg-1), var(--bg-2));
+			linear-gradient(135deg, var(--color-brand-2), var(--color-brand-2-1)),
+			linear-gradient(180deg, var(--color-surface-2), var(--color-surface-2-1));
 		box-shadow:
-			0 10px 30px color-mix(in srgb, var(--link-hover) 28%, transparent),
+			0 10px 30px color-mix(in srgb, var(--color-brand-2-1) 28%, transparent),
 			inset 0 1px 0 color-mix(in srgb, white 35%, transparent);
-		color: var(--text);
+		color: var(--color-neutral-2);
 		font-weight: 700;
 		line-height: 1;
 		letter-spacing: 0.01em;
@@ -127,37 +111,37 @@ const stylesheet = css`
 			color 180ms ease;
 	}
 
-	.my-component a:hover,
-	.my-component a:focus-visible {
+	.feature a:hover,
+	.feature a:focus-visible {
 		transform: translateY(-2px);
 		filter: brightness(1.05);
-		border-color: color-mix(in srgb, var(--link) 55%, var(--border));
+		border-color: color-mix(in srgb, var(--color-brand-2) 55%, var(--color-surface-2-2));
 		box-shadow:
-			0 16px 36px color-mix(in srgb, var(--link-hover) 36%, transparent),
+			0 16px 36px color-mix(in srgb, var(--color-brand-2-1) 36%, transparent),
 			inset 0 1px 0 color-mix(in srgb, white 45%, transparent);
-		color: var(--text);
+		color: var(--color-neutral-2);
 	}
 
-	.my-component a:active {
+	.feature a:active {
 		transform: translateY(0);
 		box-shadow:
-			0 8px 20px color-mix(in srgb, var(--link-hover) 22%, transparent),
+			0 8px 20px color-mix(in srgb, var(--color-brand-2-1) 22%, transparent),
 			inset 0 1px 0 color-mix(in srgb, white 25%, transparent);
 	}
 
-	.my-component a:focus-visible {
-		outline: 2px solid color-mix(in srgb, var(--link) 65%, white 35%);
+	.feature a:focus-visible {
+		outline: 2px solid color-mix(in srgb, var(--color-brand-2) 65%, white 35%);
 		outline-offset: 4px;
 	}
 
-	.my-component a::after {
+	.feature a::after {
 		content: '→';
 		font-size: 0.95em;
 		transition: transform 180ms ease;
 	}
 
-	.my-component a:hover::after,
-	.my-component a:focus-visible::after {
+	.feature a:hover::after,
+	.feature a:focus-visible::after {
 		transform: translateX(3px);
 	}
 `;

package/reference-project/src/components/page.ts

@@ -1,7 +1,10 @@
 import { customElement, html, css } from 'thunderous';
+import { theme } from '../theme';
 
 export const Page = customElement(({ adoptStyleSheet }) => {
+	adoptStyleSheet(theme);
 	adoptStyleSheet(stylesheet);
+
 	return html`
 		<div class="page">
 			<header>
@@ -33,15 +36,6 @@ const stylesheet = css`
 		display: block;
 		height: 100%;
 		width: 100%;
-
-		--bg-1: rgba(255, 255, 255, 0.06);
-		--bg-2: rgba(255, 255, 255, 0.03);
-		--border: rgba(255, 255, 255, 0.1);
-		--text: #e5eefc;
-		--muted: #9fb0d1;
-		--link: #8fb4ff;
-		--link-hover: #2a4692;
-		--shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
 	}
 	.page {
 		display: grid;
@@ -50,10 +44,10 @@ const stylesheet = css`
 		min-width: 320px;
 		min-height: 100vh;
 		background:
-			radial-gradient(circle at top left, rgba(99, 102, 241, 0.22), transparent 30%),
-			radial-gradient(circle at bottom right, rgba(14, 165, 233, 0.18), transparent 35%),
-			linear-gradient(180deg, #0f172a 0%, #111827 45%, #0b1120 100%);
-		color: #eaf2ff;
+			radial-gradient(circle at top left, var(--color-accent-1), transparent 30%),
+			radial-gradient(circle at bottom right, var(--color-accent-1-1), transparent 35%),
+			linear-gradient(180deg, var(--color-page-1) 0%, var(--color-page-1-1) 45%, var(--color-page-1-2) 100%);
+		color: var(--color-page-1-c);
 		font-family: 'Plus Jakarta Sans', Inter, ui-sans-serif, system-ui, sans-serif;
 		font-size: 1rem;
 		line-height: 1.6;
@@ -73,16 +67,16 @@ const stylesheet = css`
 		gap: 0.75rem;
 		align-items: center;
 		padding: 0.75rem 1rem;
-		border: 1px solid var(--border);
+		border: 1px solid var(--color-surface-1-2);
 		border-radius: 999px;
 		background: linear-gradient(
 			135deg,
-			color-mix(in srgb, var(--bg-1) 88%, transparent),
-			color-mix(in srgb, var(--bg-2) 92%, transparent)
+			color-mix(in srgb, var(--color-surface-1) 88%, transparent),
+			color-mix(in srgb, var(--color-surface-1-1) 92%, transparent)
 		);
 		backdrop-filter: blur(18px) saturate(160%);
 		-webkit-backdrop-filter: blur(18px) saturate(160%);
-		box-shadow: var(--shadow);
+		box-shadow: var(--shadow-1);
 	}
 
 	.header-nav a {
@@ -92,7 +86,7 @@ const stylesheet = css`
 		justify-content: center;
 		padding: 0.7rem 1rem;
 		border-radius: 999px;
-		color: var(--text);
+		color: var(--color-neutral-1);
 		font-weight: 600;
 		line-height: 1;
 		letter-spacing: 0.01em;
@@ -109,7 +103,7 @@ const stylesheet = css`
 		position: absolute;
 		inset: 0;
 		border-radius: inherit;
-		background: linear-gradient(135deg, var(--link), var(--link-hover));
+		background: linear-gradient(135deg, var(--color-brand-1), var(--color-brand-1-1));
 		opacity: 0;
 		transform: scale(0.96);
 		transition:
@@ -120,10 +114,10 @@ const stylesheet = css`
 
 	.header-nav a:hover,
 	.header-nav a:focus-visible {
-		color: var(--text);
+		color: var(--color-neutral-1);
 		transform: translateY(-1px);
 		box-shadow:
-			0 10px 24px color-mix(in srgb, var(--link-hover) 22%, transparent),
+			0 10px 24px color-mix(in srgb, var(--color-brand-1-1) 22%, transparent),
 			inset 0 1px 0 color-mix(in srgb, white 30%, transparent);
 	}
 
@@ -138,7 +132,7 @@ const stylesheet = css`
 	}
 
 	.header-nav a:focus-visible {
-		outline: 2px solid color-mix(in srgb, var(--link) 65%, white 35%);
+		outline: 2px solid color-mix(in srgb, var(--color-brand-1) 65%, white 35%);
 		outline-offset: 4px;
 	}
 
@@ -154,9 +148,9 @@ const stylesheet = css`
 		place-items: center;
 		gap: 1.5rem;
 		padding: 2rem 1.5rem;
-		border-top: 1px solid var(--border);
-		background: linear-gradient(180deg, var(--bg-2), transparent);
-		color: var(--muted);
+		border-top: 1px solid var(--color-surface-1-2);
+		background: linear-gradient(180deg, var(--color-surface-1-1), transparent);
+		color: var(--color-neutral-1-1);
 	}
 
 	.footer-nav {
@@ -179,7 +173,7 @@ const stylesheet = css`
 		align-items: center;
 		padding: 0.35rem 0.2rem;
 		border-radius: 0.5rem;
-		color: var(--muted);
+		color: var(--color-neutral-1-1);
 		font-weight: 500;
 		text-decoration: none;
 		transition:
@@ -193,8 +187,8 @@ const stylesheet = css`
 
 	.footer-nav a:hover,
 	.footer-nav a:focus-visible {
-		color: var(--text);
-		background: color-mix(in srgb, var(--bg-1) 70%, transparent);
+		color: var(--color-neutral-1);
+		background: color-mix(in srgb, var(--color-surface-1) 70%, transparent);
 		box-shadow: none;
 		transform: none;
 	}
@@ -204,19 +198,19 @@ const stylesheet = css`
 	}
 
 	.footer-nav a:focus-visible {
-		outline: 2px solid color-mix(in srgb, var(--link) 50%, white 20%);
+		outline: 2px solid color-mix(in srgb, var(--color-brand-1) 50%, white 20%);
 		outline-offset: 3px;
 	}
 
 	footer small {
 		display: block;
-		color: var(--muted);
+		color: var(--color-neutral-1-1);
 		font-size: 0.875rem;
 		line-height: 1.6;
 	}
 
 	footer small a {
-		color: var(--link);
+		color: var(--color-brand-1);
 		text-decoration: none;
 		font-weight: 600;
 		transition: color 180ms ease;
@@ -224,11 +218,11 @@ const stylesheet = css`
 
 	footer small a:hover,
 	footer small a:focus-visible {
-		color: var(--link-hover);
+		color: var(--color-brand-1-1);
 	}
 
 	footer small a:focus-visible {
-		outline: 2px solid color-mix(in srgb, var(--link) 50%, white 20%);
+		outline: 2px solid color-mix(in srgb, var(--color-brand-1) 50%, white 20%);
 		outline-offset: 3px;
 		border-radius: 0.25rem;
 	}

package/reference-project/src/index.html

@@ -1,11 +1,11 @@
 <?layout href="_layout.html">
 
-<my-component>
+<x-feature href="https://thunderous.dev" buttontext="Read the Docs">
 	<script expr>
 		// These <script expr> tags are evaluated in-place as expressions and replaced by the result.
 		html`<p>The ${stack} stack is dead simple and feels like there's no framework at all.</p>`;
 	</script>
-</my-component>
+</x-feature>
 
 <script>
 	// This is ordinary client-only code.
@@ -23,10 +23,10 @@
 	// This code runs on both the client and server.
 	// Isomorphic scripts are always modules.
 	// Since it runs on the client, it will also vendorize NPM dependencies.
-	import { MyComponent } from './components/my-component';
+	import { Feature } from './components/feature';
 
 	// Thunderous components render declarative shadow DOM when defined on the server.
-	MyComponent.define('my-component');
+	Feature.define('x-feature');
 </script>
 
 <script server>

package/reference-project/src/theme.ts

@@ -0,0 +1,57 @@
+import { css } from "thunderous";
+
+export const theme = css`
+	:host {
+		--color-page-1: #0f172a;
+		--color-page-1-1: #111827;
+		--color-page-1-2: #0b1120;
+		--color-page-1-c: #eaf2ff;
+		--color-accent-1: rgba(99, 102, 241, 0.22);
+		--color-accent-1-1: rgba(14, 165, 233, 0.18);
+
+		--color-surface-1: rgba(255, 255, 255, 0.06);
+		--color-surface-1-1: rgba(255, 255, 255, 0.03);
+		--color-surface-1-2: rgba(255, 255, 255, 0.1);
+		--color-neutral-1: #e5eefc;
+		--color-neutral-1-1: #9fb0d1;
+		--color-brand-1: #8fb4ff;
+		--color-brand-1-1: #2a4692;
+		--shadow-1: 0 10px 30px rgba(0, 0, 0, 0.18);
+
+		--color-surface-2: rgba(255, 255, 255, 0.72);
+		--color-surface-2-1: rgba(255, 255, 255, 0.5);
+		--color-surface-2-2: rgba(255, 255, 255, 0.35);
+		--color-neutral-2: #1e293b;
+		--color-neutral-2-1: #b8c7e6;
+		--color-brand-2: #7dd3fc;
+		--color-brand-2-1: #c4b5fd;
+		--shadow-2: 0 18px 50px rgba(15, 23, 42, 0.35);
+
+		@media (prefers-color-scheme: light) {
+			--color-page-1: #f0f4fa;
+			--color-page-1-1: #e8edf5;
+			--color-page-1-2: #f5f7fb;
+			--color-page-1-c: #1e293b;
+			--color-accent-1: rgba(99, 102, 241, 0.1);
+			--color-accent-1-1: rgba(14, 165, 233, 0.08);
+
+			--color-surface-1: rgba(255, 255, 255, 0.7);
+			--color-surface-1-1: rgba(255, 255, 255, 0.5);
+			--color-surface-1-2: rgba(99, 102, 241, 0.16);
+			--color-neutral-1: #1e293b;
+			--color-neutral-1-1: #475569;
+			--color-brand-1: #2563eb;
+			--color-brand-1-1: #7c3aed;
+			--shadow-1: 0 10px 30px rgba(51, 65, 85, 0.1);
+
+			--color-surface-2: rgba(255, 255, 255, 0.92);
+			--color-surface-2-1: rgba(245, 248, 255, 0.85);
+			--color-surface-2-2: rgba(99, 102, 241, 0.18);
+			--color-neutral-2: #1e293b;
+			--color-neutral-2-1: #475569;
+			--color-brand-2: #4f46e5;
+			--color-brand-2-1: #7c3aed;
+			--shadow-2: 0 18px 40px rgba(51, 65, 85, 0.12);
+		}
+	}
+`;