Skip to content

Replace the generated design vocabulary in the JS templates #189

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
timkpaine merged 1 commit into from
Sep 2, 2026
Merged

Replace the generated design vocabulary in the JS templates #189

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion javascript/site-react/src/App.tsx.jinja
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
export default function App() {
return (
<main>
<p className="eyebrow">{{ brand_name }}</p>
<h1>{{ brand_name }}</h1>
<p>{{ project_description }}</p>
<a className="button" href="#develop">
Expand Down
45 changes: 25 additions & 20 deletions javascript/site-react/src/styles.css.jinja
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,14 @@
:root {
color: #171717;
background: #ffffff;
--{{ css_prefix }}-bg: #ffffff;
--{{ css_prefix }}-fg: #171717;
--{{ css_prefix }}-fg-muted: #5c5c5c;
--{{ css_prefix }}-border: #e0e0e0;
--{{ css_prefix }}-focus: #1a56c4;

color: var(--{{ css_prefix }}-fg);
background: var(--{{ css_prefix }}-bg);
font-family: system-ui, sans-serif;
color-scheme: light;
}

body {
Expand All @@ -11,34 +18,32 @@ body {
main {
width: min(calc(100% - 3rem), 64rem);
margin: 0 auto;
padding: 6rem 0;
}

.eyebrow {
font-size: 0.75rem;
letter-spacing: 0.14em;
text-transform: uppercase;
padding: 3rem 0 6rem;
}

h1 {
margin: 2rem 0 1rem;
font-size: clamp(3rem, 10vw, 8rem);
line-height: 0.9;
letter-spacing: -0.06em;
margin: 0 0 1rem;
font-size: 1.75rem;
font-weight: 600;
}

main > p:not(.eyebrow) {
max-width: 42rem;
main > p {
max-width: 60ch;
margin-bottom: 2rem;
font-size: 1.25rem;
color: var(--{{ css_prefix }}-fg-muted);
line-height: 1.6;
}

.button {
display: inline-block;
padding: 0.75rem 1rem;
color: #ffffff;
background: #171717;
border-radius: 0.35rem;
padding: 0.6rem 1rem;
color: var(--{{ css_prefix }}-bg);
background: var(--{{ css_prefix }}-fg);
text-decoration: none;
}

a:focus-visible,
button:focus-visible {
outline: 2px solid var(--{{ css_prefix }}-focus);
outline-offset: 4px;
}
42 changes: 28 additions & 14 deletions javascript/site-sveltekit/src/app.css.jinja
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,37 +1,51 @@
@import 'tailwindcss';

/* Neutral placeholders. Replace the values with the brand's own; the names are
* the contract the rest of the site depends on. */

:root {
--paper: #ffffff;
--ink: #171717;
--muted: #5c5c5c;
--line: #e4e4e4;
--{{ css_prefix }}-bg: #ffffff;
--{{ css_prefix }}-bg-raised: #f6f6f6;
--{{ css_prefix }}-fg: #171717;
--{{ css_prefix }}-fg-muted: #5c5c5c;
--{{ css_prefix }}-border: #e0e0e0;
--{{ css_prefix }}-focus: #1a56c4;

color-scheme: light;
}

:root[data-theme='dark'] {
--paper: #0b0b0b;
--ink: #f2f2f2;
--muted: #a1a1a1;
--line: #262626;
--{{ css_prefix }}-bg: #121212;
--{{ css_prefix }}-bg-raised: #1c1c1c;
--{{ css_prefix }}-fg: #ededed;
--{{ css_prefix }}-fg-muted: #a6a6a6;
--{{ css_prefix }}-border: #333333;
--{{ css_prefix }}-focus: #8ab4ff;

color-scheme: dark;
}

@theme inline {
--color-paper: var(--paper);
--color-ink: var(--ink);
--color-muted: var(--muted);
--color-line: var(--line);
--color-bg: var(--{{ css_prefix }}-bg);
--color-bg-raised: var(--{{ css_prefix }}-bg-raised);
--color-fg: var(--{{ css_prefix }}-fg);
--color-fg-muted: var(--{{ css_prefix }}-fg-muted);
--color-border: var(--{{ css_prefix }}-border);
}

body {
margin: 0;
color: var(--ink);
background: var(--paper);
color: var(--{{ css_prefix }}-fg);
background: var(--{{ css_prefix }}-bg);
font-family: system-ui, sans-serif;
}

a {
color: inherit;
}

a:focus-visible,
button:focus-visible {
outline: 2px solid var(--{{ css_prefix }}-focus);
outline-offset: 4px;
}
3 changes: 1 addition & 2 deletions javascript/site-webawesome/index.html.jinja
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,7 @@
</head>
<body>
<main>
<p class="eyebrow">{{ brand_name }}</p>
<h1>{{ project_name }}</h1>
<h1>{{ brand_name }}</h1>
<p>{{ project_description }}</p>
<wa-button variant="brand">Get started</wa-button>
</main>
Expand Down
38 changes: 22 additions & 16 deletions javascript/site-webawesome/src/styles.css.jinja
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,14 @@
:root {
color: #171717;
background: #ffffff;
--{{ css_prefix }}-bg: #ffffff;
--{{ css_prefix }}-fg: #171717;
--{{ css_prefix }}-fg-muted: #5c5c5c;
--{{ css_prefix }}-border: #e0e0e0;
--{{ css_prefix }}-focus: #1a56c4;

color: var(--{{ css_prefix }}-fg);
background: var(--{{ css_prefix }}-bg);
font-family: system-ui, sans-serif;
color-scheme: light;
}

body {
Expand All @@ -11,25 +18,24 @@ body {
main {
width: min(calc(100% - 3rem), 64rem);
margin: 0 auto;
padding: 6rem 0;
}

.eyebrow {
font-size: 0.75rem;
letter-spacing: 0.14em;
text-transform: uppercase;
padding: 3rem 0 6rem;
}

h1 {
margin: 2rem 0 1rem;
font-size: clamp(3rem, 10vw, 8rem);
line-height: 0.9;
letter-spacing: -0.06em;
margin: 0 0 1rem;
font-size: 1.75rem;
font-weight: 600;
}

main > p:not(.eyebrow) {
max-width: 42rem;
main > p {
max-width: 60ch;
margin-bottom: 2rem;
font-size: 1.25rem;
color: var(--{{ css_prefix }}-fg-muted);
line-height: 1.6;
}

a:focus-visible,
button:focus-visible {
outline: 2px solid var(--{{ css_prefix }}-focus);
outline-offset: 4px;
}
38 changes: 28 additions & 10 deletions javascript/uitk-svelte/BRAND.md.jinja
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,42 @@
# {{ brand_name }} Brand Guide

Canonical source for the {{ brand_name }} identity. Replace each placeholder before publishing the first consumer.
Canonical source for the {{ brand_name }} identity. Every section below is a
placeholder — fill it in before publishing the first consumer.

## Identity

Describe what {{ brand_name }} is, who it serves, and what it must not be confused with.
Describe what {{ brand_name }} is, who it serves, and what it must not be
confused with.

## Mark

Document primary mark, clear space, minimum size, and approved variants.
Document the primary mark, clear space, minimum size, and approved variants.

## Color

| Role | Light | Dark | Usage |
| ------ | --------- | --------- | ------------------ |
| Paper | `#f5f5f0` | `#151515` | Page surfaces |
| Ink | `#151515` | `#f5f5f0` | Primary content |
| Muted | `#666660` | `#aaa9a0` | Supporting content |
| Line | `#d0d0c8` | `#3a3a36` | Borders and rules |
| Accent | `#6cff8f` | `#6cff8f` | Focus and emphasis |
The shipped tokens are neutral greys plus a functional focus color. They exist
so the toolkit renders legibly out of the box, not because they are the brand.
Replace the values in `tokens.css`, then record them here.

| Token | Light | Dark | Usage |
| ----------- | ----- | ---- | ----------------- |
| `bg` | | | Page background |
| `bg-raised` | | | Raised surfaces |
| `fg` | | | Primary text |
| `fg-muted` | | | Supporting text |
| `border` | | | Borders and rules |
| `focus` | | | Focus rings |

Two rules worth keeping whatever the palette becomes:

- Name tokens for the role a color plays, not a material it imitates. Roles
survive a redesign; metaphors have to be renamed or quietly start lying.
- Give every color a job. A single decorative accent applied wherever a page
looks flat is how unrelated products end up looking identical.

Verify each foreground against the surfaces behind it — WCAG AA is 4.5:1 for
normal text, and a focus ring needs 3:1. Assert it in a test so the palette
cannot drift.

## Typography

Expand Down
5 changes: 2 additions & 3 deletions javascript/uitk-svelte/src/lib/components/BrandMark.svelte.jinja
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,7 @@
height: 2rem;
place-items: center;
border-radius: 50%;
color: var(--{{ css_prefix }}-color-paper);
background: var(--{{ css_prefix }}-color-ink);
box-shadow: 3px 3px 0 var(--{{ css_prefix }}-color-accent);
color: var(--{{ css_prefix }}-bg);
background: var(--{{ css_prefix }}-fg);
}
</style>
6 changes: 3 additions & 3 deletions javascript/uitk-svelte/src/lib/components/ThemeToggle.svelte.jinja
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,9 +20,9 @@
<style>
button {
padding: 0.5rem 0.75rem;
border: 1px solid var(--{{ css_prefix }}-color-line);
color: var(--{{ css_prefix }}-color-ink);
background: var(--{{ css_prefix }}-color-paper);
border: 1px solid var(--{{ css_prefix }}-border);
color: var(--{{ css_prefix }}-fg);
background: var(--{{ css_prefix }}-bg);
cursor: pointer;
}
</style>
47 changes: 35 additions & 12 deletions javascript/uitk-svelte/src/lib/styles/tokens.css.jinja
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,49 @@
/* Design tokens for {{ brand_name }}.
*
* These are deliberately neutral placeholders, not a finished palette. Replace
* the values with the brand's own before shipping; the names are the contract
* consumers depend on, so prefer changing values over renaming.
*
* Names describe the role a color plays, not a material it imitates.
*/

:root {
--{{ css_prefix }}-color-paper: #f5f5f0;
--{{ css_prefix }}-color-ink: #151515;
--{{ css_prefix }}-color-muted: #666660;
--{{ css_prefix }}-color-line: #d0d0c8;
--{{ css_prefix }}-color-accent: #6cff8f;
/* surfaces */
--{{ css_prefix }}-bg: #ffffff;
--{{ css_prefix }}-bg-raised: #f6f6f6;

/* text */
--{{ css_prefix }}-fg: #171717;
--{{ css_prefix }}-fg-muted: #5c5c5c;

/* structure */
--{{ css_prefix }}-border: #e0e0e0;

/* Focus is a functional requirement, not decoration. It needs at least 3:1
* against both surfaces above; check it whenever the palette changes. */
--{{ css_prefix }}-focus: #1a56c4;

--{{ css_prefix }}-font-sans: ui-sans-serif, system-ui, sans-serif;
--{{ css_prefix }}-font-mono: ui-monospace, monospace;

color-scheme: light;
}

:root[data-theme='dark'] {
--{{ css_prefix }}-color-paper: #151515;
--{{ css_prefix }}-color-ink: #f5f5f0;
--{{ css_prefix }}-color-muted: #aaa9a0;
--{{ css_prefix }}-color-line: #3a3a36;
--{{ css_prefix }}-bg: #121212;
--{{ css_prefix }}-bg-raised: #1c1c1c;
--{{ css_prefix }}-fg: #ededed;
--{{ css_prefix }}-fg-muted: #a6a6a6;
--{{ css_prefix }}-border: #333333;
--{{ css_prefix }}-focus: #8ab4ff;

color-scheme: dark;
}

:root {
color: var(--{{ css_prefix }}-color-ink);
color: var(--{{ css_prefix }}-fg);
font-family: var(--{{ css_prefix }}-font-sans);
background: var(--{{ css_prefix }}-color-paper);
background: var(--{{ css_prefix }}-bg);
}

body {
Expand All @@ -29,6 +52,6 @@ body {

button:focus-visible,
a:focus-visible {
outline: 2px solid var(--{{ css_prefix }}-color-accent);
outline: 2px solid var(--{{ css_prefix }}-focus);
outline-offset: 4px;
}
Loading
Loading