@grantcodes/ui 2.8.0 → 2.9.0

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # Changelog
 
+## [2.9.0](https://github.com/grantcodes/ui/compare/ui-v2.8.1...ui-v2.9.0) (2026-04-17)
+
+
+### Features
+
+* **10-03:** rename CSS brand token references to primary and fix dark tier-3 overrides ([6d85136](https://github.com/grantcodes/ui/commit/6d85136e632509517d503805a4cf813cc6659b97))
+* **12-02:** add .dark/.light class overrides to UI reset.css + verify all themes build ([c4211b5](https://github.com/grantcodes/ui/commit/c4211b5b2e688cafefcf698e523fc6d4f84e4429))
+
+
+### Bug Fixes
+
+* **10-03:** correct CSS variable prefix from --g-color-primary to --g-theme-color-primary ([30a6bcd](https://github.com/grantcodes/ui/commit/30a6bcd4272dc5217b9425a0c10354347f7224d4))
+* **10-03:** replace content-secondary with content-subtle for body text ([4227296](https://github.com/grantcodes/ui/commit/422729665b979fc8fa955378392a8565df8f0acb))
+* **12-02:** remove stale dark/light [@import](https://github.com/import) lines from all 4 UI theme CSS files ([6033010](https://github.com/grantcodes/ui/commit/60330101bc61d0746c5f18a0d768c3590f70057b))
+* **token-refactor:** fix theme colors for badges, buttons, borders, and content contrast across grantcodes and grantina themes ([e3c093d](https://github.com/grantcodes/ui/commit/e3c093d1db89664ca532d9d9ef146db695a69cd4))
+
+## [2.8.1](https://github.com/grantcodes/ui/compare/ui-v2.8.0...ui-v2.8.1) (2026-04-07)
+
+
+### Bug Fixes
+
+* **gallery:** filmstrip images should fill height with auto width, not square crop ([62d436f](https://github.com/grantcodes/ui/commit/62d436fe75f42c6d99c380c9d4384e53a97abef1))
+* **gallery:** SSR-safe filmstrip variant with variant prop refactor ([2af368c](https://github.com/grantcodes/ui/commit/2af368cba60b55021f563a06c1416219abb0b024))
+* **gallery:** use CSS custom properties for filmstrip styles instead of JS attribute propagation ([f83efcf](https://github.com/grantcodes/ui/commit/f83efcfcf24a896dcdcb943b5988a9daefcf8947))
+
 ## [2.8.0](https://github.com/grantcodes/ui/compare/ui-v2.7.0...ui-v2.8.0) (2026-04-07)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grantcodes/ui",
-  "version": "2.8.0",
+  "version": "2.9.0",
   "description": "A personal component system built with Lit web components",
   "type": "module",
   "main": "src/main.js",
@@ -47,7 +47,7 @@
     "@lit/react": "^1.0.8",
     "lit": "^3.3.1",
     "shiki": "^3.17.1",
-    "@grantcodes/style-dictionary": "^1.4.2"
+    "@grantcodes/style-dictionary": "^1.5.0"
   },
   "devDependencies": {
     "@arcmantle/vite-plugin-import-css-sheet": "^1.0.12",

package/src/components/accordion/accordion.css

@@ -47,7 +47,7 @@
     block-size: 1em;
     flex-shrink: 0;
     transition: transform 0.25s ease;
-    color: var(--g-theme-color-content-secondary, currentColor);
+    color: var(--g-theme-color-content-subtle, currentColor);
   }
 
   .accordion__item[open] .accordion__chevron {

package/src/components/avatar/avatar.css

@@ -18,8 +18,8 @@
   block-size: var(--g-theme-spacing-2xl);
   border-radius: 50%;
   overflow: hidden;
-  background-color: var(--g-color-brand-purple-200);
-  color: var(--g-color-brand-purple-900);
+  background-color: var(--g-theme-color-primary-200);
+  color: var(--g-theme-color-primary-900);
   text-align: center;
   font-size: var(--g-theme-typography-h6-font-size);
   font-weight: var(--g-theme-typography-label-default-font-weight);

package/src/components/badge/badge.css

@@ -5,7 +5,7 @@
 }
 
 :host {
-  display: inline-block;
+  display: inline-flex;
 }
 
 .badge {
@@ -15,7 +15,7 @@
   padding-inline: 0.625em;
   padding-block: 0.375em;
   border-radius: var(--g-theme-border-radius-md, 0.375rem);
-  font: var(--g-typography-font-label-sm);
+  font: var(--g-theme-typography-meta);
   line-height: 1;
   white-space: nowrap;
   border-width: 1px;
@@ -25,12 +25,8 @@
 
 /* Soft style variants */
 .badge--primary {
-  background-color: color-mix(
-    in srgb,
-    var(--g-color-brand-purple-500) 15%,
-    transparent
-  );
-  color: var(--g-color-brand-purple-700);
+  background-color: var(--g-theme-color-primary-200);
+  color: var(--g-theme-color-primary-600);
   border-color: transparent;
 }
 
@@ -75,8 +71,8 @@
 }
 
 .badge--neutral {
-  background-color: var(--g-color-brand-purple-100);
-  color: var(--g-color-brand-purple-800);
+  background-color: var(--g-theme-color-background-subtle);
+  color: var(--g-theme-color-content-default);
   border-color: transparent;
 }
 

package/src/components/breadcrumb/breadcrumb.css

@@ -27,14 +27,14 @@
     align-items: center;
     gap: var(--g-theme-spacing-sm);
     font-size: var(--g-typography-font-size-14);
-    color: var(--g-color-brand-purple-700);
+    color: var(--g-theme-color-primary-700);
   }
 
   /* Separator using ::after pseudo-element; driven by parent via data-has-separator */
   :host([data-has-separator]) .breadcrumb__item::after {
     content: var(--component-breadcrumb-separator, "/");
     display: inline-block;
-    color: var(--g-color-brand-purple-400);
+    color: var(--g-theme-color-primary-400);
     font-weight: var(--g-typography-font-weight-400);
     user-select: none;
     pointer-events: none;
@@ -51,7 +51,7 @@
   }
 
   .breadcrumb__link {
-    color: var(--g-color-brand-purple-600);
+    color: var(--g-theme-color-primary-600);
     text-decoration: none;
     transition: color 0.2s ease;
     border-radius: var(--g-theme-border-radius-md, 0.25rem);
@@ -62,7 +62,7 @@
   }
 
   .breadcrumb__link:hover {
-    color: var(--g-color-brand-purple-700);
+    color: var(--g-theme-color-primary-700);
     text-decoration: underline;
   }
 
@@ -80,6 +80,6 @@
       content: "...";
       display: inline-block;
       margin-inline-end: 0.5rem;
-      color: var(--g-color-brand-purple-400);
+      color: var(--g-theme-color-primary-400);
     }
   }

package/src/components/card/card.css

@@ -54,7 +54,7 @@
 
   .card__header ::slotted(*) {
     margin: 0;
-    font: var(--g-theme-typography-h5);
+    font: var(--g-typography-h5-font);
   }
 
   .card__content {
@@ -110,7 +110,7 @@
     background-color: color-mix(
       in srgb,
       var(--g-theme-color-background-default) 90%,
-      var(--g-color-brand-purple-500) 10%
+      var(--g-theme-color-primary-500) 10%
     );
     color: var(--g-theme-color-content-default);
   }

package/src/components/countdown/countdown.css

@@ -37,7 +37,7 @@
 
 .countdown__label {
 	font-size: var(--g-theme-typography-body-sm-font-size, 0.875rem);
-	color: var(--g-theme-color-content-secondary);
+	color: var(--g-theme-color-content-subtle);
 	text-transform: uppercase;
 	letter-spacing: 0.05em;
 }

package/src/components/cta/cta.css

@@ -33,19 +33,19 @@
     font-weight: var(--g-theme-typography-meta-default-font-weight);
     letter-spacing: var(--g-theme-typography-meta-default-letter-spacing);
     text-transform: uppercase;
-    color: var(--g-theme-color-content-brand, #7c3aed);
+    color: var(--g-theme-color-content-primary, #7c3aed);
   }
 
   .cta__title {
     margin: 0 0 var(--g-theme-spacing-md);
-    font: var(--g-theme-typography-h2);
+    font: var(--g-typography-h2-font);
     color: var(--g-theme-color-content-default);
   }
 
   .cta__text {
     margin: 0 0 var(--g-theme-spacing-xl);
     font: var(--g-theme-typography-body-lg);
-    color: var(--g-theme-color-content-secondary);
+    color: var(--g-theme-color-content-subtle);
   }
 
   .cta__actions {
@@ -62,5 +62,5 @@
   }
 
   .cta__secondary-link:hover {
-    color: var(--g-theme-color-content-brand, #7c3aed);
+    color: var(--g-theme-color-content-primary, #7c3aed);
   }

package/src/components/feature-list/feature-list.css

@@ -20,7 +20,7 @@
 
   .feature-list__title {
     margin: 0 0 var(--g-theme-spacing-sm);
-    font: var(--g-theme-typography-h4);
+    font: var(--g-typography-h4-font);
     text-align: center;
     color: var(--g-theme-color-content-default);
   }
@@ -29,7 +29,7 @@
     margin: 0 auto var(--g-theme-spacing-2xl);
     font-size: var(--g-theme-typography-body-lg-font-size);
     text-align: center;
-    color: var(--g-theme-color-content-secondary);
+    color: var(--g-theme-color-content-subtle);
     max-width: 55ch;
   }
 
@@ -62,7 +62,7 @@
   }
 
   .feature-list__link:hover .feature-list__item-title {
-    color: var(--g-theme-color-content-brand, #7c3aed);
+    color: var(--g-theme-color-content-primary, #7c3aed);
   }
 
   .feature-list__icon {
@@ -71,14 +71,14 @@
     border-radius: 50%;
     inline-size: fit-content;
     margin-block-end: var(--g-theme-spacing-md);
-    color: var(--g-theme-color-content-brand, currentColor);
-    background-color: var(--g-theme-color-background-brand);
+    color: var(--g-theme-color-content-primary, currentColor);
+    background-color: var(--g-theme-color-background-primary);
   }
 
   .feature-list__item-title {
-    font: var(--g-theme-typography-h5);
+    font: var(--g-typography-h5-font);
   }
 
   .feature-list__item-desc {
-    color: var(--g-theme-color-content-secondary);
+    color: var(--g-theme-color-content-subtle);
   }

package/src/components/footer/footer-column.css

@@ -29,7 +29,7 @@
   }
 
   ::slotted(a) {
-    color: var(--g-theme-color-content-secondary);
+    color: var(--g-theme-color-content-subtle);
     text-decoration: none;
     transition: color 0.2s ease;
   }
@@ -41,6 +41,6 @@
 
   ::slotted(p) {
     margin: 0;
-    color: var(--g-theme-color-content-secondary);
+    color: var(--g-theme-color-content-subtle);
     font: var(--g-typography-body-sm);
   }

package/src/components/footer/footer.css

@@ -54,9 +54,6 @@
 		gap: var(--g-theme-spacing-md);
 	}
 
-	.footer__bottom:has(slot[name="bottom"]:empty) {
-		display: none;
-	}
 
 	@container footer (max-width: 640px) {
 		.footer__bottom {
@@ -68,7 +65,7 @@
 	/* Slotted content styling */
 	::slotted(*) {
 		font: var(--g-typography-font-body-sm);
-		color: var(--g-theme-color-content-secondary);
+		color: var(--g-theme-color-content-subtle);
 	}
 
 	::slotted(p) {
@@ -77,7 +74,7 @@
 	}
 
 	::slotted(a) {
-		color: var(--g-theme-color-content-secondary);
+		color: var(--g-theme-color-content-subtle);
 		text-decoration: none;
 		transition: color 0.2s ease;
 	}

package/src/components/gallery/gallery-image.component.js

@@ -12,7 +12,6 @@ export class GrantCodesGalleryImage extends LitElement {
 		alt: { type: String },
 		caption: { type: String },
 		thumbnail: { type: String },
-		filmstrip: { type: Boolean, reflect: true },
 	};
 
 	constructor() {
@@ -24,7 +23,6 @@ export class GrantCodesGalleryImage extends LitElement {
 		this.alt = "";
 		this.caption = "";
 		this.thumbnail = "";
-		this.filmstrip = false;
 	}
 
 	captionTemplate() {

package/src/components/gallery/gallery.component.js

@@ -6,7 +6,7 @@ export class GrantCodesGallery extends LitElement {
 	static styles = [galleryStyles];
 
 	static properties = {
-		filmstrip: { type: Boolean, reflect: true },
+		variant: { type: String, reflect: true },
 	};
 
 	/** @type {any[]} */
@@ -14,34 +14,7 @@ export class GrantCodesGallery extends LitElement {
 
 	constructor() {
 		super();
-		this.filmstrip = false;
-	}
-
-	firstUpdated() {
-		const slot = this.renderRoot.querySelector(".gallery__slot");
-		if (slot) {
-			slot.addEventListener("slotchange", () => this._updateChildren());
-			this._updateChildren();
-		}
-	}
-
-	updated(changedProperties) {
-		if (changedProperties.has("filmstrip")) {
-			this._updateChildren();
-		}
-	}
-
-	_updateChildren() {
-		const slot = this.renderRoot.querySelector(".gallery__slot");
-		if (!slot) return;
-		const assigned = slot.assignedElements({ flatten: true });
-		for (const el of assigned) {
-			if (this.filmstrip) {
-				el.setAttribute("filmstrip", "");
-			} else {
-				el.removeAttribute("filmstrip");
-			}
-		}
+		this.variant = "default";
 	}
 
 	render() {

package/src/components/gallery/gallery.css

@@ -38,8 +38,6 @@
   display: block;
   width: 100%;
   height: auto;
-  /* Make the image square */
-  aspect-ratio: 1;
   object-fit: cover;
   object-position: center;
 }
@@ -55,16 +53,50 @@
   color: white;
 }
 
+/* =============================================
+   GALLERY-IMAGE DEFAULT STYLES
+   (applied inside grantcodes-gallery-image shadow DOM via :host)
+   ============================================= */
+
+/* Default square crop. :host selector comes after .gallery__image img so
+   wins on equal specificity. Uses custom properties so filmstrip mode can
+   override them via inheritance from the parent gallery element. */
+:host .gallery__image img {
+  aspect-ratio: var(--_gallery-img-aspect-ratio, 1);
+  block-size: var(--_gallery-img-block-size, auto);
+  width: var(--_gallery-img-width, 100%);
+  height: var(--_gallery-img-height, auto);
+  max-inline-size: var(--_gallery-img-max-inline-size, unset);
+}
+
+:host .gallery__image {
+  block-size: var(--_gallery-image-block-size, auto);
+  width: var(--_gallery-image-width, 100%);
+}
+
 /* =============================================
    FILMSTRIP VARIANT
    ============================================= */
 
-/* Gallery container in filmstrip mode */
-:host([filmstrip]) .gallery {
+/* Set inherited CSS custom properties on the gallery host when in filmstrip
+   mode. These cascade down to slotted grantcodes-gallery-image children
+   without requiring JS attribute propagation, making the filmstrip work
+   correctly with SSR-rendered content. */
+:host([variant="filmstrip"]) {
+  --_gallery-image-block-size: 100%;
+  --_gallery-image-width: fit-content;
+  --_gallery-img-aspect-ratio: auto;
+  --_gallery-img-block-size: 100%;
+  --_gallery-img-width: auto;
+  --_gallery-img-height: 100%;
+  --_gallery-img-max-inline-size: none;
+}
+
+:host([variant="filmstrip"]) .gallery {
   overflow: hidden;
 }
 
-:host([filmstrip]) .gallery__slot {
+:host([variant="filmstrip"]) .gallery__slot {
   display: flex;
   flex-wrap: nowrap;
   overflow-x: auto;
@@ -76,11 +108,11 @@
   scrollbar-width: none;
 }
 
-:host([filmstrip]) .gallery__slot::-webkit-scrollbar {
+:host([variant="filmstrip"]) .gallery__slot::-webkit-scrollbar {
   display: none;
 }
 
-:host([filmstrip]) .gallery__slot::slotted(*) {
+:host([variant="filmstrip"]) .gallery__slot::slotted(*) {
   flex: 0 0 auto;
   block-size: 100%;
   scroll-snap-align: start;
@@ -89,7 +121,7 @@
 /* Scroll-driven reveal animation */
 @supports (animation-timeline: view()) {
   @media (prefers-reduced-motion: no-preference) {
-    :host([filmstrip]) .gallery__slot::slotted(*) {
+    :host([variant="filmstrip"]) .gallery__slot::slotted(*) {
       animation: filmstrip-reveal linear both;
       animation-timeline: view(inline);
       animation-range: entry 0% entry 60%;
@@ -107,19 +139,3 @@
     scale: 1;
   }
 }
-
-/* Gallery-image host in filmstrip mode */
-:host([filmstrip]) .gallery__image {
-  block-size: 100%;
-  width: fit-content;
-}
-
-:host([filmstrip]) .gallery__image img {
-  block-size: 100%;
-  width: auto;
-  aspect-ratio: unset;
-  max-inline-size: none;
-  object-fit: cover;
-  object-position: center;
-}
-

package/src/components/gallery/gallery.stories.js

@@ -64,6 +64,7 @@ const filmstripImages = [
 	{ w: 160, h: 240 },
 	{ w: 360, h: 240 },
 	{ w: 180, h: 240 },
+	{ w: 160, h: 900 }, // tall portrait image
 	{ w: 420, h: 240 },
 	{ w: 160, h: 240 },
 	{ w: 380, h: 240 },
@@ -76,7 +77,7 @@ const filmstripImages = [
 
 export const Filmstrip = {
 	args: {
-		filmstrip: true,
+		variant: "filmstrip",
 	},
 	render: (args) =>
 		template(

package/src/components/gallery/gallery.test.js

@@ -66,18 +66,19 @@ describe("Gallery Component", () => {
 			cleanup(element);
 		});
 
-		it("should have filmstrip property default to false", async () => {
+		it("should have variant property default to 'default'", async () => {
 			element = await fixture("grantcodes-gallery");
-			assert.strictEqual(element.filmstrip, false, "filmstrip should default to false");
+			assert.strictEqual(element.variant, "default", "variant should default to 'default'");
 		});
 
-		it("should reflect filmstrip attribute when property is set", async () => {
+		it("should reflect variant attribute when property is set", async () => {
 			element = await fixture("grantcodes-gallery");
-			element.filmstrip = true;
+			element.variant = "filmstrip";
 			await element.updateComplete;
-			assert.ok(
-				element.hasAttribute("filmstrip"),
-				"filmstrip attribute should be reflected",
+			assert.strictEqual(
+				element.getAttribute("variant"),
+				"filmstrip",
+				"variant attribute should be reflected",
 			);
 		});
 	});

package/src/components/hero/hero.css

@@ -15,7 +15,7 @@
 		align-items: center;
 		min-height: 50vh;
 		padding: var(--g-theme-spacing-2xl) var(--g-theme-spacing-md);
-		background: var(--g-theme-color-background-brand-knockout, #7c3aed);
+		background: var(--g-theme-color-background-primary-knockout, #7c3aed);
 	}
 
 	.hero__container {
@@ -33,14 +33,14 @@
 	}
 
 	.hero__title {
-		font: var(--g-theme-typography-h1);
+		font: var(--g-typography-h1-font);
 		font-size: clamp(2rem, 5vw, 4rem);
-		color: var(--g-theme-color-content-brand-knockout, #ffffff);
+		color: var(--g-theme-color-content-primary-knockout, #ffffff);
 	}
 
 	.hero__text {
 		font: var(--g-theme-typography-body-lg);
-		color: var(--g-theme-color-content-brand-knockout, #ffffff);
+		color: var(--g-theme-color-content-primary-knockout, #ffffff);
 	}
 
 	:host([size="sm"]) .hero {
@@ -54,5 +54,5 @@
 	}
 
 	::slotted(*) {
-		color: var(--g-theme-color-content-brand-knockout, #ffffff);
+		color: var(--g-theme-color-content-primary-knockout, #ffffff);
 	}

package/src/components/loading/loading.css

@@ -18,7 +18,7 @@
   overflow: hidden;
   padding-top: var(--height);
   background-repeat: no-repeat;
-  background-color: var(--g-color-brand-purple-500);
+  background-color: var(--g-theme-color-primary-500);
   background-image: linear-gradient(
     to right,
     transparent 0%,

package/src/components/logo-cloud/logo-cloud.css

@@ -27,7 +27,7 @@
     letter-spacing: var(--g-theme-typography-meta-default-letter-spacing);
     text-transform: uppercase;
     text-align: center;
-    color: var(--g-theme-color-content-secondary);
+    color: var(--g-theme-color-content-subtle);
   }
 
   .logo-cloud__grid {

package/src/components/map/map.css

@@ -28,7 +28,7 @@
     display: block;
     padding: var(--g-theme-spacing-sm) var(--g-theme-spacing-md);
     font-size: var(--g-theme-typography-body-sm-font-size);
-    color: var(--g-theme-color-content-brand, #7c3aed);
+    color: var(--g-theme-color-content-primary, #7c3aed);
     text-decoration: none;
     border-block-start: 1px solid var(--g-theme-color-border-default);
     background: var(--g-theme-color-background-subtle);

package/src/components/media-text/media-text.css

@@ -57,12 +57,12 @@
 
   .media-text__title {
     margin: 0;
-    font: var(--g-theme-typography-h4);
+    font: var(--g-typography-h4-font);
     color: var(--g-theme-color-content-default);
   }
 
   .media-text__text {
     margin: 0;
     font: var(--g-theme-typography-body-lg);
-    color: var(--g-theme-color-content-secondary);
+    color: var(--g-theme-color-content-subtle);
   }

package/src/components/newsletter/newsletter.css

@@ -11,7 +11,7 @@
   .newsletter {
     padding-block: var(--g-theme-spacing-3xl);
     padding-inline: var(--g-theme-spacing-md);
-    background: var(--g-theme-color-background-brand-knockout, #7c3aed);
+    background: var(--g-theme-color-background-primary-knockout, #7c3aed);
     text-align: center;
   }
 
@@ -22,14 +22,14 @@
 
   .newsletter__title {
     margin: 0 0 var(--g-theme-spacing-sm);
-    font: var(--g-theme-typography-h4);
-    color: var(--g-theme-color-content-brand-knockout, #ffffff);
+    font: var(--g-typography-h4-font);
+    color: var(--g-theme-color-content-primary-knockout, #ffffff);
   }
 
   .newsletter__text {
     margin: 0 0 var(--g-theme-spacing-xl);
     font: var(--g-theme-typography-body-lg);
-    color: var(--g-theme-color-content-brand-knockout, #ffffff);
+    color: var(--g-theme-color-content-primary-knockout, #ffffff);
     opacity: 0.9;
   }
 
@@ -80,7 +80,7 @@
   .newsletter__disclaimer {
     margin: var(--g-theme-spacing-md) 0 0;
     font: var(--g-theme-typography-body-sm);
-    color: var(--g-theme-color-content-brand-knockout, #ffffff);
+    color: var(--g-theme-color-content-primary-knockout, #ffffff);
     opacity: 0.75;
   }
 

package/src/components/pricing/pricing.css

@@ -30,7 +30,7 @@
     margin: 0 auto var(--g-theme-spacing-2xl);
     font-size: var(--g-theme-typography-body-lg-font-size);
     text-align: center;
-    color: var(--g-theme-color-content-secondary);
+    color: var(--g-theme-color-content-subtle);
     max-width: 55ch;
   }
 
@@ -55,7 +55,7 @@
   }
 
   .pricing__tier--highlighted {
-    border-color: var(--g-theme-color-border-brand, #7c3aed);
+    border-color: var(--g-theme-color-border-primary, #7c3aed);
     background: var(--g-theme-color-background-subtle);
     box-shadow: var(--g-theme-shadow-lg);
   }
@@ -80,19 +80,19 @@
   }
 
   .pricing__price {
-    font: var(--g-theme-typography-h2);
+    font: var(--g-typography-h2-font);
     color: var(--g-theme-color-content-default);
   }
 
   .pricing__period {
     font-size: var(--g-theme-typography-body-default-font-size);
-    color: var(--g-theme-color-content-secondary);
+    color: var(--g-theme-color-content-subtle);
   }
 
   .pricing__tier-desc {
     margin: 0;
     font: var(--g-theme-typography-body-sm);
-    color: var(--g-theme-color-content-secondary);
+    color: var(--g-theme-color-content-subtle);
   }
 
   .pricing__features {
@@ -114,18 +114,18 @@
   }
 
   .pricing__feature--excluded {
-    color: var(--g-theme-color-content-secondary);
+    color: var(--g-theme-color-content-subtle);
     text-decoration: line-through;
   }
 
   .pricing__feature-icon {
     font: var(--g-theme-typography-body-sm);
-    color: var(--g-theme-color-content-brand, #7c3aed);
+    color: var(--g-theme-color-content-primary, #7c3aed);
     flex-shrink: 0;
   }
 
   .pricing__feature--excluded .pricing__feature-icon {
-    color: var(--g-theme-color-content-secondary);
+    color: var(--g-theme-color-content-subtle);
   }
 
   .pricing__cta {

package/src/components/stats/stats.css

@@ -50,10 +50,10 @@
   }
 
   .stats__value {
-    font: var(--g-theme-typography-h1);
+    font: var(--g-typography-h1-font);
     white-space: nowrap;
     line-height: 1;
-    color: var(--g-theme-color-content-brand, #7c3aed);
+    color: var(--g-theme-color-content-primary, #7c3aed);
   }
 
   .stats__label {
@@ -64,5 +64,5 @@
 
   .stats__context {
     font-size: var(--g-theme-typography-body-sm-font-size);
-    color: var(--g-theme-color-content-secondary);
+    color: var(--g-theme-color-content-subtle);
   }

package/src/components/tabs/tabs.css

@@ -22,8 +22,8 @@
     width: fit-content;
     min-width: 100%;
     background-image: linear-gradient(
-      var(--g-theme-color-border-default, var(--g-color-brand-purple-100)),
-      var(--g-theme-color-border-default, var(--g-color-brand-purple-100))
+      var(--g-theme-color-border-default, var(--g-theme-color-primary-100)),
+      var(--g-theme-color-border-default, var(--g-theme-color-primary-100))
     );
     background-size: auto var(--border-width);
     background-position: bottom;
@@ -37,7 +37,7 @@
     border: none;
     border-block-start: var(--border-width) solid transparent;
     border-block-end: var(--border-width) solid
-      var(--g-theme-color-border-default, var(--g-color-brand-purple-100));
+      var(--g-theme-color-border-default, var(--g-theme-color-primary-100));
     background-color: transparent;
     color: var(--g-theme-color-content-default);
     opacity: 0.7;
@@ -60,14 +60,14 @@
     opacity: 1;
     border-block-end-color: var(
       --g-theme-color-border-default,
-      var(--g-color-brand-purple-200)
+      var(--g-theme-color-primary-200)
     );
   }
 
   .tabs__tab.is-active {
     border-block-end-color: var(
-      --g-theme-color-border-brand,
-      var(--g-color-brand-purple-500)
+      --g-theme-color-border-primary,
+      var(--g-theme-color-primary-500)
     );
     background-color: var(--g-theme-color-background-subtle);
     color: var(--g-theme-color-content-default);
@@ -79,8 +79,8 @@
   .tabs__panel {
     margin-block-start: var(--g-theme-spacing-md);
     outline-color: var(
-      --g-theme-color-border-brand,
-      var(--g-color-brand-purple-500)
+      --g-theme-color-border-primary,
+      var(--g-theme-color-primary-500)
     );
     outline-offset: 1rem;
     display: none;

package/src/components/testimonials/testimonials.css

@@ -80,5 +80,5 @@
 
   .testimonials__role {
     font-size: var(--g-theme-typography-body-sm-font-size);
-    color: var(--g-theme-color-content-secondary);
+    color: var(--g-theme-color-content-subtle);
   }

package/src/components/toast/toast.css

@@ -137,7 +137,7 @@
 
   .toast__message {
     font-size: var(--g-typography-font-size-14);
-    color: var(--g-theme-color-content-secondary);
+    color: var(--g-theme-color-content-subtle);
     line-height: 1.5;
   }
 
@@ -151,7 +151,7 @@
     align-items: center;
     justify-content: center;
     border-radius: var(--g-theme-border-radius-md);
-    color: var(--g-theme-color-content-secondary);
+    color: var(--g-theme-color-content-subtle);
     cursor: pointer;
     transition: all 0.2s ease;
     margin-inline-start: 0.5rem;

package/src/components/tooltip/tooltip.css

@@ -31,8 +31,8 @@
   padding: 0.6em 1em;
   font-size: var(--g-typography-font-size-14);
   line-height: 1;
-  color: var(--g-color-brand-purple-900);
-  background-color: var(--g-color-brand-purple-100);
+  color: var(--g-theme-color-primary-900);
+  background-color: var(--g-theme-color-primary-100);
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
   user-select: none;
   text-align: center;

package/src/css/elements/forms/input.css

@@ -85,8 +85,8 @@
 }
 
 :where(input, textarea, select):where(option):checked {
-	background: var(--g-theme-color-background-brand);
-	color: var(--g-theme-color-content-brand-knockout);
+	background: var(--g-theme-color-background-primary);
+	color: var(--g-theme-color-content-primary-knockout);
 }
 
 :where(input, textarea, select):where([type="checkbox"]),
@@ -121,8 +121,8 @@
 }
 
 :where(input, textarea, select):where([type="checkbox"]):checked {
-	border-color: var(--g-theme-color-border-brand);
-	background-color: var(--g-theme-color-border-brand);
+	border-color: var(--g-theme-color-border-primary);
+	background-color: var(--g-theme-color-border-primary);
 }
 
 :where(input, textarea, select):where([type="checkbox"]):checked::after {
@@ -147,5 +147,5 @@
 }
 
 :where(input, textarea, select):where([type="radio"]):checked::after {
-	background-color: var(--g-theme-color-border-brand);
+	background-color: var(--g-theme-color-border-primary);
 }

package/src/css/reset.css

@@ -17,7 +17,7 @@
 
 /* Root defaults */
 :where(:root) {
-	font: var(--g-theme-typography-body);
+	font: var(--g-typography-body-font);
 	cursor: default;
 	line-height: 1.5;
 	overflow-wrap: break-word;
@@ -228,6 +228,16 @@ pre {
 	fill: currentColor;
 }
 
+/* Force dark mode on any element or subtree */
+.dark {
+	color-scheme: dark;
+}
+
+/* Force light mode on any element or subtree */
+.light {
+	color-scheme: light;
+}
+
 /* Allow transitioning auto */
 :root {
 	@supports (interpolate-size: allow-keywords) {
@@ -236,7 +246,7 @@ pre {
 }
 
 ::selection {
-	background-color: var(--g-theme-color-background-brand);
+	background-color: var(--g-theme-color-background-primary);
 }
 
 /* Default backdrop styles */

package/src/css/themes/grantcodes.css

@@ -1,5 +1,3 @@
 @import "@grantcodes/style-dictionary/grantcodes/css";
 @import "@grantcodes/style-dictionary/grantcodes/css/theme";
-@import "@grantcodes/style-dictionary/grantcodes/css/dark";
-@import "@grantcodes/style-dictionary/grantcodes/css/light";
 @import "@grantcodes/style-dictionary/assets/fonts/greycliff";

package/src/css/themes/grantina.css

@@ -1,5 +1,3 @@
 @import "@grantcodes/style-dictionary/grantina/css";
 @import "@grantcodes/style-dictionary/grantina/css/theme";
-@import "@grantcodes/style-dictionary/grantina/css/dark";
-@import "@grantcodes/style-dictionary/grantina/css/light";
 @import "@grantcodes/style-dictionary/assets/fonts/grantina";

package/src/css/themes/todomap.css

@@ -1,7 +1,5 @@
 @import "@grantcodes/style-dictionary/todomap/css";
 @import "@grantcodes/style-dictionary/todomap/css/theme";
-@import "@grantcodes/style-dictionary/todomap/css/dark";
-@import "@grantcodes/style-dictionary/todomap/css/light";
 @import "@grantcodes/style-dictionary/assets/fonts/quicksand";
 
 html.todomap {

package/src/css/themes/wireframe.css

@@ -1,4 +1,2 @@
 @import "@grantcodes/style-dictionary/wireframe/css";
 @import "@grantcodes/style-dictionary/wireframe/css/theme";
-@import "@grantcodes/style-dictionary/wireframe/css/dark";
-@import "@grantcodes/style-dictionary/wireframe/css/light";

package/src/css/typography.css

@@ -1,5 +1,24 @@
-html {
-	font: var(--g-theme-typography-body);
+:root {
+	font: var(--g-typography-body-font);
+	font-size: var(--g-typography-font-size-root);
+}
+@media (min-width: 40em) {
+	:root {
+	/* TODO: Would like to get rid of important */
+	  --g-typography-font-scale-default: var(--g-typography-font-scale-lg) !important;
+    }
+}
+
+:where(h1,h1,h3,h4,h5,h6,p) {
+    margin-block-end: 1rem;
+}
+
+:where(h1,h1,h3,h4,h5,h6,p):first-child {
+    margin-block-start: 0;
+}
+
+:where(h1,h1,h3,h4,h5,h6,p):last-child {
+    margin-block-end: 0;
 }
 
 h1,
@@ -12,31 +31,36 @@ h6 {
 }
 
 h1 {
-	font: var(--g-theme-typography-h1);
+	font: var(--g-typography-h1-font);
 }
 
 h2 {
-	font: var(--g-theme-typography-h2);
+	font: var(--g-typography-h2-font);
 }
 
 h3 {
-	font: var(--g-theme-typography-h3);
+	font: var(--g-typography-h3-font);
 }
 
 h4 {
-	font: var(--g-theme-typography-h4);
+	font: var(--g-typography-h4-font);
 }
 
 h5 {
-	font: var(--g-theme-typography-h5);
+	font: var(--g-typography-h5-font);
 }
 
 h6 {
-	font: var(--g-theme-typography-h6);
+	font: var(--g-typography-h6-font);
 }
 
 p {
 	text-wrap: pretty;
+	margin: 0
+}
+
+p + p {
+    margin-block-start: 1rem;
 }
 
 pre {

package/src/pages/blog-post.stories.js

@@ -54,12 +54,12 @@ const relatedPosts = [
 
 const footerContent = html`
   <grantcodes-footer-column>
-    <h3>Flowbase</h3>
+    <h3 style="font: var(--g-typography-h6-font);">Flowbase</h3>
     <p>The modern platform for teams that move fast and ship great software.</p>
   </grantcodes-footer-column>
 
   <grantcodes-footer-column>
-    <h3>Product</h3>
+    <h3 style="font: var(--g-typography-h6-font);">Product</h3>
     <ul>
       <li><a href="/features">Features</a></li>
       <li><a href="/pricing">Pricing</a></li>
@@ -68,7 +68,7 @@ const footerContent = html`
   </grantcodes-footer-column>
 
   <grantcodes-footer-column>
-    <h3>Company</h3>
+    <h3 style="font: var(--g-typography-h6-font);">Company</h3>
     <ul>
       <li><a href="/blog">Blog</a></li>
       <li><a href="/about">About</a></li>
@@ -106,34 +106,24 @@ export const Default = {
     </grantcodes-app-bar>
 
     <!-- Article header -->
-    <grantcodes-container
-      style="padding-block-start: var(--g-theme-spacing-xl);"
-    >
+    <grantcodes-container>
       <div style="max-inline-size: 48rem; margin-inline: auto;">
-        <grantcodes-breadcrumb>
+        <grantcodes-breadcrumb style="margin-block: var(--g-theme-spacing-lg);">
           <grantcodes-breadcrumb-item href="/">Home</grantcodes-breadcrumb-item>
-          <grantcodes-breadcrumb-item href="/blog"
-            >Blog</grantcodes-breadcrumb-item
-          >
-          <grantcodes-breadcrumb-item current
-            >Shipping faster with async-first teams</grantcodes-breadcrumb-item
-          >
+          <grantcodes-breadcrumb-item href="/blog">Blog</grantcodes-breadcrumb-item>
+          <grantcodes-breadcrumb-item current>Shipping faster with async-first teams</grantcodes-breadcrumb-item>
         </grantcodes-breadcrumb>
 
         <div
-          style="margin-block-start: var(--g-theme-spacing-lg); display: flex; flex-direction: column; gap: var(--g-theme-spacing-md);"
+          style="display: flex; flex-direction: column; gap: var(--g-theme-spacing-md);"
         >
           <grantcodes-badge variant="primary">Engineering</grantcodes-badge>
 
-          <h1
-            style="margin: 0; font-size: var(--g-theme-typography-h1-font-size); font-weight: var(--g-theme-typography-h1-font-weight); line-height: 1.15; color: var(--g-theme-color-content-default);"
-          >
+          <h1>
             Shipping faster with async-first teams
           </h1>
 
-          <p
-            style="margin: 0; font-size: var(--g-theme-typography-body-font-size); color: var(--g-theme-color-content-secondary); line-height: 1.6;"
-          >
+          <p style="var(--g-theme-typography-body-lg);">
             How we restructured communication to remove the hidden cost of
             synchronous coordination — and what we shipped as a result.
           </p>
@@ -153,7 +143,7 @@ export const Default = {
                 Sam Torres
               </p>
               <p
-                style="margin: 0; color: var(--g-theme-color-content-secondary); font-size: var(--g-theme-typography-meta-font-size);"
+                style="margin: 0; color: var(--g-theme-color-content-subtle); font-size: var(--g-theme-typography-meta-font-size);"
               >
                 March 12, 2025 · 8 min read
               </p>
@@ -164,10 +154,7 @@ export const Default = {
     </grantcodes-container>
 
     <!-- Featured image -->
-    <grantcodes-container
-      nopad
-      style="margin-block: var(--g-theme-spacing-lg);"
-    >
+    <grantcodes-container align="wide" nopad>
       <img
         src="https://placehold.co/1200x500?text=Featured+Image"
         alt="An abstract illustration of async communication flows"
@@ -275,9 +262,7 @@ export const Default = {
             >
               Sam Torres
             </p>
-            <p
-              style="margin: 0; color: var(--g-theme-color-content-secondary); font-size: var(--g-theme-typography-body-font-size);"
-            >
+            <p style="font: var(--g-theme-typography-meta);">
               CTO at Flowbase. Writes about engineering culture, distributed
               teams, and systems thinking.
             </p>
@@ -287,18 +272,10 @@ export const Default = {
     </grantcodes-container>
 
     <!-- Related posts -->
-    <div
-      style="padding-block: var(--g-theme-spacing-2xl);"
-    >
+    <div style="padding-block: var(--g-theme-spacing-2xl);">
       <grantcodes-container>
-        <h2
-          style="margin: 0 0 var(--g-theme-spacing-lg); font-size: var(--g-theme-typography-h2-font-size); font-weight: var(--g-theme-typography-h2-font-weight); color: var(--g-theme-color-content-default);"
-        >
-          More from the blog
-        </h2>
-        <div
-          style="display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: var(--g-theme-spacing-lg);"
-        >
+        <h2>More from the blog</h2>
+        <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: var(--g-theme-spacing-lg);">
           ${relatedPosts.map(
 						(post) => html`
               <grantcodes-card>
@@ -306,19 +283,14 @@ export const Default = {
                   slot="header"
                   style="display: flex; align-items: center; justify-content: space-between;"
                 >
-                  <grantcodes-badge variant="neutral"
-                    >${post.category}</grantcodes-badge
-                  >
-                  <span
-                    style="font-size: var(--g-theme-typography-meta-font-size); color: var(--g-theme-color-content-secondary);"
-                    >${post.date}</span
-                  >
+                  <grantcodes-badge variant="neutral">${post.category}</grantcodes-badge>
+                  <span style="font: var(--g-theme-typography-meta);">${post.date}</span>
                 </div>
                 <div
-                  style="display: flex; flex-direction: column; gap: var(--g-theme-spacing-sm);"
+                  style="display: flex; flex-direction: column; gap: var(--g-theme-spacing-sm); flex: 1;"
                 >
                   <h3
-                    style="margin: 0; font-size: var(--g-theme-typography-h5-font-size); font-weight: var(--g-theme-typography-h5-font-weight); color: var(--g-theme-color-content-default); line-height: 1.3;"
+                    style="font: var(--g-typography-h6-font);"
                   >
                     <a
                       href="${post.href}"
@@ -326,9 +298,7 @@ export const Default = {
                       >${post.title}</a
                     >
                   </h3>
-                  <p
-                    style="margin: 0; color: var(--g-theme-color-content-secondary); font-size: var(--g-theme-typography-body-font-size); line-height: 1.6;"
-                  >
+                  <p>
                     ${post.excerpt}
                   </p>
                 </div>
@@ -342,7 +312,7 @@ export const Default = {
                     size="small"
                   ></grantcodes-avatar>
                   <span
-                    style="font-size: var(--g-theme-typography-meta-font-size); color: var(--g-theme-color-content-secondary);"
+                    style="font: var(--g-theme-typography-meta);"
                     >${post.author.name}</span
                   >
                 </div>