@grantcodes/ui 2.12.1 → 2.15.5

package/src/components/dropzone/dropzone.css

@@ -14,33 +14,32 @@
 	flex-direction: column;
 	align-items: center;
 	justify-content: center;
-	padding: var(--g-theme-spacing-xl);
-	border: max(var(--g-theme-border-width-md), 0.2rem) dashed
-		var(--g-theme-color-border-default);
-	border-radius: var(--g-theme-border-radius-md);
-	background-color: var(--g-theme-color-background-subtle);
+	padding: var(--g-spacing-xl);
+	border: max(var(--g-border-width-md), 0.2rem) dashed
+		var(--g-color-border-default);
+	border-radius: var(--g-border-radius-md);
+	background-color: var(--g-color-background-subtle);
 }
 
 .dropzone--fullscreen {
 	position: fixed;
 	inset: 0;
 	z-index: 10;
-	background-color: var(--g-theme-color-background-default);
+	background-color: var(--g-color-background-default);
 }
 
 .dropzone--fullscreen::after {
 	content: "";
 	display: flex;
 	position: fixed;
-	inset: var(--g-theme-spacing-xl);
+	inset: var(--g-spacing-xl);
 	justify-content: center;
 	align-items: center;
-	padding: var(--g-theme-spacing-xl);
-	border: max(calc(var(--g-theme-border-width-md) * 2), 0.4rem) dashed
-		var(--g-theme-color-border-default);
-	border-radius: calc(var(--g-theme-border-radius-md) * 2);
+	padding: var(--g-spacing-xl);
+	border: max(calc(var(--g-border-width-md) * 2), 0.4rem) dashed
+		var(--g-color-border-default);
+	border-radius: calc(var(--g-border-radius-md) * 2);
 	z-index: 11;
-	font-weight: var(--g-typography-font-weight-700);
 	color: inherit;
 }
 

package/src/components/feature-list/feature-list.component.js

@@ -3,6 +3,7 @@ import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import * as icons from "lucide-static";
 import featureListStyles from "./feature-list.css" with { type: "css" };
 import "../icon/icon.js";
+import "../container/container.js";
 
 export class GrantCodesFeatureList extends LitElement {
 	static styles = [featureListStyles];
@@ -67,7 +68,7 @@ export class GrantCodesFeatureList extends LitElement {
 		const items = this._items;
 		return html`
 			<section class="feature-list">
-				<div class="feature-list__container">
+				<grantcodes-container>
 					${
 						this.title
 							? html`<h2 class="feature-list__title">${this.title}</h2>`
@@ -123,7 +124,7 @@ export class GrantCodesFeatureList extends LitElement {
 							`,
 						)}
 					</ul>
-				</div>
+				</grantcodes-container>
 			</section>
 		`;
 	}

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

@@ -9,34 +9,28 @@
 }
 
 .feature-list {
-	padding-block: var(--g-theme-spacing-3xl);
-	padding-inline: var(--g-theme-spacing-md);
-}
-
-.feature-list__container {
-	max-width: 1200px;
-	margin: 0 auto;
+	padding-block: var(--g-spacing-3xl);
 }
 
 .feature-list__title {
-	margin: 0 0 var(--g-theme-spacing-sm);
-	font: var(--g-typography-h4-font);
+	margin: 0 0 var(--g-spacing-sm);
+	font: var(--g-typography-h3-font);
 	text-align: center;
-	color: var(--g-theme-color-content-default);
+	color: var(--g-color-content-default);
 }
 
 .feature-list__subtitle {
-	margin: 0 auto var(--g-theme-spacing-2xl);
-	font-size: var(--g-theme-typography-body-lg-font-size);
+	margin: 0 auto var(--g-spacing-2xl);
+	font: var(--g-typography-body-lg-font);
 	text-align: center;
-	color: var(--g-theme-color-content-subtle);
+	color: var(--g-color-content-subtle);
 	max-width: 55ch;
 }
 
 .feature-list__grid {
 	display: grid;
 	grid-template-columns: repeat(var(--columns, 3), 1fr);
-	gap: var(--g-theme-spacing-xl);
+	gap: var(--g-spacing-xl);
 	padding: 0;
 	margin: 0;
 	list-style: none;
@@ -62,17 +56,17 @@
 }
 
 .feature-list__link:hover .feature-list__item-title {
-	color: var(--g-theme-color-content-primary, #7c3aed);
+	color: var(--g-color-content-primary, #7c3aed);
 }
 
 .feature-list__icon {
 	display: block;
-	padding: var(--g-theme-spacing-md);
+	padding: var(--g-spacing-md);
 	border-radius: 50%;
 	inline-size: fit-content;
-	margin-block-end: var(--g-theme-spacing-md);
-	color: var(--g-theme-color-content-primary, currentColor);
-	background-color: var(--g-theme-color-background-primary);
+	margin-block-end: var(--g-spacing-md);
+	color: var(--g-color-content-primary, currentColor);
+	background-color: var(--g-color-background-primary);
 }
 
 .feature-list__item-title {
@@ -80,5 +74,5 @@
 }
 
 .feature-list__item-desc {
-	color: var(--g-theme-color-content-subtle);
+	color: var(--g-color-content-subtle);
 }

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

@@ -5,14 +5,13 @@
 .footer-column {
 	display: flex;
 	flex-direction: column;
-	gap: var(--g-spacing-12);
+	gap: var(--g-spacing-sm);
 }
 
 ::slotted(h3) {
-	font-size: var(--g-typography-font-size-16);
-	color: var(--g-theme-color-content-default);
-	margin: 0 0 var(--g-theme-spacing-sm) 0;
-	font-weight: var(--g-typography-font-weight-600);
+	font: var(--g-typography-h6-font);
+	color: var(--g-color-content-default);
+	margin: 0 0 var(--g-spacing-sm) 0;
 }
 
 ::slotted(ul) {
@@ -21,7 +20,7 @@
 	margin: 0;
 	display: flex;
 	flex-direction: column;
-	gap: var(--g-theme-spacing-sm);
+	gap: var(--g-spacing-sm);
 }
 
 ::slotted(li) {
@@ -29,18 +28,18 @@
 }
 
 ::slotted(a) {
-	color: var(--g-theme-color-content-subtle);
+	color: var(--g-color-content-subtle);
 	text-decoration: none;
 	transition: color 0.2s ease;
 }
 
 ::slotted(a:hover) {
-	color: var(--g-theme-color-content-default);
+	color: var(--g-color-content-default);
 	text-decoration: underline;
 }
 
 ::slotted(p) {
 	margin: 0;
-	color: var(--g-theme-color-content-subtle);
-	font: var(--g-typography-body-sm);
+	color: var(--g-color-content-subtle);
+	font: var(--g-typography-body-sm-font);
 }

package/src/components/footer/footer.component.js

@@ -1,6 +1,7 @@
 import { LitElement } from "lit";
 import { html } from "lit/static-html.js";
 import footerStyles from "./footer.css" with { type: "css" };
+import "../container/container.js";
 
 export class GrantCodesFooter extends LitElement {
 	static styles = [footerStyles];
@@ -22,7 +23,7 @@ export class GrantCodesFooter extends LitElement {
 	render() {
 		return html`
 			<footer class="footer">
-				<div class="footer__container">
+				<grantcodes-container align="wide">
 					<div class="footer__columns" style="--footer-columns: ${this.columns}">
 						<slot></slot>
 					</div>
@@ -31,7 +32,7 @@ export class GrantCodesFooter extends LitElement {
 					<div class="footer__bottom">
 						<slot name="bottom"></slot>
 					</div>
-				</div>
+				</grantcodes-container>
 			</footer>
 		`;
 	}

package/src/components/footer/footer.css

@@ -12,21 +12,15 @@
 
 .footer {
 	margin-block-start: auto;
-	border-block-start: 1px solid var(--g-theme-color-border-subtle);
-	background-color: var(--g-theme-color-background-subtle);
-}
-
-.footer__container {
-	padding-block: var(--g-theme-spacing-2xl) var(--g-theme-spacing-xl);
-	padding-inline: var(--g-theme-spacing-md);
-	max-inline-size: 1400px;
-	margin-inline: auto;
+	padding-block: var(--g-spacing-2xl) var(--g-spacing-xl);
+	border-block-start: 1px solid var(--g-color-border-subtle);
+	background-color: var(--g-color-background-subtle);
 }
 
 .footer__columns {
 	display: grid;
 	grid-template-columns: repeat(var(--footer-columns, 3), 1fr);
-	gap: var(--g-theme-spacing-xl);
+	gap: var(--g-spacing-xl);
 }
 
 /* Responsive grid using container queries */
@@ -44,14 +38,14 @@
 
 /* Bottom section (copyright, social links, etc.) */
 .footer__bottom {
-	margin-block-start: var(--g-theme-spacing-xl);
-	padding-block-start: var(--g-theme-spacing-xl);
-	border-block-start: 1px solid var(--g-theme-color-border-default);
+	margin-block-start: var(--g-spacing-xl);
+	padding-block-start: var(--g-spacing-xl);
+	border-block-start: 1px solid var(--g-color-border-default);
 	display: flex;
 	flex-wrap: wrap;
 	justify-content: space-between;
 	align-items: center;
-	gap: var(--g-theme-spacing-md);
+	gap: var(--g-spacing-md);
 }
 
 @container footer (max-width: 640px) {
@@ -63,8 +57,8 @@
 
 /* Slotted content styling */
 ::slotted(*) {
-	font: var(--g-typography-font-body-sm);
-	color: var(--g-theme-color-content-subtle);
+	font: var(--g-typography-body-sm-font);
+	color: var(--g-color-content-subtle);
 }
 
 ::slotted(p) {
@@ -73,12 +67,12 @@
 }
 
 ::slotted(a) {
-	color: var(--g-theme-color-content-subtle);
+	color: var(--g-color-content-subtle);
 	text-decoration: none;
 	transition: color 0.2s ease;
 }
 
 ::slotted(a:hover) {
-	color: var(--g-theme-color-content-default);
+	color: var(--g-color-content-default);
 	text-decoration: underline;
 }

package/src/components/footer/footer.test.js

@@ -86,7 +86,7 @@ describe("Footer Component", () => {
 
 	it("should have footer container", async () => {
 		element = await fixture("grantcodes-footer");
-		const container = element.shadowRoot.querySelector(".footer__container");
+		const container = element.shadowRoot.querySelector("grantcodes-container");
 		assert.ok(container, "Footer container should exist");
 	});
 

package/src/components/form-field/form-field.css

@@ -7,7 +7,7 @@
 .form-field {
 	display: flex;
 	flex-direction: column;
-	gap: var(--g-theme-spacing-xs);
+	gap: var(--g-spacing-xs);
 	padding: 0;
 	margin: 0;
 	border: none;
@@ -24,7 +24,7 @@
 	flex-direction: row-reverse;
 	align-items: center;
 	justify-content: flex-end;
-	gap: var(--g-theme-spacing-sm);
+	gap: var(--g-spacing-sm);
 }
 
 .form-field__label {
@@ -32,17 +32,17 @@
 	padding: 0;
 
 	&:where(legend) {
-		margin-bottom: var(--g-theme-spacing-xs);
+		margin-bottom: var(--g-spacing-xs);
 	}
 }
 
 .form-field__help {
-	font-size: var(--g-theme-typography-body-sm-font-size);
+	font-size: var(--g-typography-body-sm-font-size);
 	opacity: 0.7;
 }
 
 .form-field__error {
 	margin: 0;
-	font-size: var(--g-theme-typography-body-sm-font-size);
-	color: var(--g-color-utility-red-700);
+	font-size: var(--g-typography-body-sm-font-size);
+	color: var(--g-color-content-utility-error);
 }

package/src/components/hero/hero.css

@@ -14,10 +14,10 @@
 	justify-content: center;
 	align-items: center;
 	min-height: 50vh;
-	padding: var(--g-theme-spacing-2xl) var(--g-theme-spacing-md);
+	padding: var(--g-spacing-2xl) var(--g-spacing-md);
 	background: linear-gradient(
 		135deg,
-		var(--g-theme-color-background-primary-knockout),
+		var(--g-color-background-primary-knockout),
 		var(--g-color-primary-900)
 	);
 }
@@ -25,7 +25,7 @@
 .hero__container {
 	width: 100%;
 	max-width: 65ch;
-	gap: var(--g-theme-spacing-lg);
+	gap: var(--g-spacing-lg);
 }
 
 :host([center]) .hero {
@@ -38,24 +38,24 @@
 
 .hero__title {
 	font: var(--g-typography-h1-font);
-	color: var(--g-theme-color-content-primary-knockout);
+	color: var(--g-color-content-primary-knockout);
 }
 
 .hero__text {
-	font: var(--g-typography-body-lg);
-	color: var(--g-theme-color-content-primary-knockout);
+	font: var(--g-typography-body-lg-font);
+	color: var(--g-color-content-primary-knockout);
 }
 
 :host([size="sm"]) .hero {
 	min-height: 30vh;
-	padding: var(--g-theme-spacing-xl) var(--g-theme-spacing-md);
+	padding: var(--g-spacing-xl) var(--g-spacing-md);
 }
 
 :host([size="lg"]) .hero {
 	min-height: 70vh;
-	padding: var(--g-theme-spacing-3xl) var(--g-theme-spacing-md);
+	padding: var(--g-spacing-3xl) var(--g-spacing-md);
 }
 
 ::slotted(*) {
-	color: var(--g-theme-color-content-primary-knockout, #ffffff);
+	color: var(--g-color-content-primary-knockout, #ffffff);
 }

package/src/components/loading/loading.css

@@ -18,12 +18,12 @@
 	overflow: hidden;
 	padding-top: var(--height);
 	background-repeat: no-repeat;
-	background-color: var(--g-theme-color-primary-500);
+	background-color: var(--g-color-primary-500);
 	background-image: linear-gradient(
 		to right,
 		transparent 0%,
-		var(--g-color-neutral-500) 10%,
-		var(--g-color-neutral-500) 90%,
+		var(--g-color-background-shimmer) 10%,
+		var(--g-color-background-shimmer) 90%,
 		transparent 100%
 	);
 	background-size: var(--inner-width) 100%;

package/src/components/logo-cloud/logo-cloud.component.js

@@ -1,5 +1,6 @@
 import { LitElement, html } from "lit";
 import logoCloudStyles from "./logo-cloud.css" with { type: "css" };
+import "../container/container.js";
 
 export class GrantCodesLogoCloud extends LitElement {
 	static styles = [logoCloudStyles];
@@ -35,7 +36,7 @@ export class GrantCodesLogoCloud extends LitElement {
 		const logos = this._logos;
 		return html`
 			<section class="logo-cloud">
-				<div class="logo-cloud__container">
+				<grantcodes-container>
 					${
 						this.title
 							? html`<p class="logo-cloud__title">${this.title}</p>`
@@ -74,7 +75,7 @@ export class GrantCodesLogoCloud extends LitElement {
 							`,
 						)}
 					</ul>
-				</div>
+				</grantcodes-container>
 			</section>
 		`;
 	}

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

@@ -9,25 +9,17 @@
 }
 
 .logo-cloud {
-	padding-block: var(--g-theme-spacing-2xl);
-	padding-inline: var(--g-theme-spacing-md);
-	border-top: 1px solid var(--g-theme-color-border-default);
-	border-bottom: 1px solid var(--g-theme-color-border-default);
-}
-
-.logo-cloud__container {
-	max-width: 1200px;
-	margin: 0 auto;
+	padding-block: var(--g-spacing-2xl);
+	border-top: 1px solid var(--g-color-border-default);
+	border-bottom: 1px solid var(--g-color-border-default);
 }
 
 .logo-cloud__title {
-	margin: 0 0 var(--g-theme-spacing-xl);
-	font-size: var(--g-theme-typography-meta-default-font-size);
-	font-weight: var(--g-theme-typography-meta-default-font-weight);
-	letter-spacing: var(--g-theme-typography-meta-default-letter-spacing);
+	margin: 0 0 var(--g-spacing-xl);
+	font: var(--g-typography-body-sm-font);
 	text-transform: uppercase;
 	text-align: center;
-	color: var(--g-theme-color-content-subtle);
+	color: var(--g-color-content-subtle);
 }
 
 .logo-cloud__grid {
@@ -35,7 +27,7 @@
 	flex-wrap: wrap;
 	align-items: center;
 	justify-content: center;
-	gap: var(--g-theme-spacing-lg) var(--g-theme-spacing-2xl);
+	gap: var(--g-spacing-lg) var(--g-spacing-2xl);
 	padding: 0;
 	margin: 0;
 	list-style: none;
@@ -53,7 +45,7 @@
 
 .logo-cloud__logo {
 	display: block;
-	block-size: var(--g-theme-spacing-xl);
+	block-size: var(--g-spacing-xl);
 	inline-size: auto;
 	max-inline-size: 140px;
 	object-fit: contain;

package/src/components/map/map.css

@@ -10,8 +10,8 @@
 
 .map {
 	position: relative;
-	border: 1px solid var(--g-theme-color-border-default);
-	border-radius: var(--g-theme-border-radius-md, 0.5rem);
+	border: 1px solid var(--g-color-border-default);
+	border-radius: var(--g-border-radius-md, 0.5rem);
 	overflow: hidden;
 }
 
@@ -26,16 +26,16 @@
 
 .map__directions {
 	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-primary, #7c3aed);
+	padding: var(--g-spacing-sm) var(--g-spacing-md);
+	font-size: var(--g-typography-body-sm-font-size);
+	color: var(--g-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);
+	border-block-start: 1px solid var(--g-color-border-default);
+	background: var(--g-color-background-subtle);
 	transition: background-color 0.2s ease;
 }
 
 .map__directions:hover {
-	background: var(--g-theme-color-background-subtle-hover);
+	background: var(--g-color-background-subtle-hover);
 	text-decoration: underline;
 }

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

@@ -9,8 +9,8 @@
 }
 
 .media-text {
-	padding-block: var(--g-theme-spacing-3xl);
-	padding-inline: var(--g-theme-spacing-md);
+	padding-block: var(--g-spacing-3xl);
+	padding-inline: var(--g-spacing-md);
 }
 
 .media-text__container {
@@ -18,7 +18,7 @@
 	margin: 0 auto;
 	display: grid;
 	grid-template-columns: 1fr 1fr;
-	gap: var(--g-theme-spacing-3xl);
+	gap: var(--g-spacing-3xl);
 	align-items: center;
 }
 
@@ -34,7 +34,7 @@
 @media (max-width: 768px) {
 	.media-text__container {
 		grid-template-columns: 1fr;
-		gap: var(--g-theme-spacing-xl);
+		gap: var(--g-spacing-xl);
 		direction: ltr;
 	}
 }
@@ -44,7 +44,7 @@
 	inline-size: 100%;
 	block-size: auto;
 	display: block;
-	border-radius: var(--g-theme-border-radius-md, 0.5rem);
+	border-radius: var(--g-border-radius-md, 0.5rem);
 	object-fit: cover;
 	aspect-ratio: 4 / 3;
 }
@@ -52,17 +52,17 @@
 .media-text__content {
 	display: flex;
 	flex-direction: column;
-	gap: var(--g-theme-spacing-lg);
+	gap: var(--g-spacing-lg);
 }
 
 .media-text__title {
 	margin: 0;
 	font: var(--g-typography-h4-font);
-	color: var(--g-theme-color-content-default);
+	color: var(--g-color-content-default);
 }
 
 .media-text__text {
 	margin: 0;
-	font: var(--g-theme-typography-body-lg);
-	color: var(--g-theme-color-content-subtle);
+	font: var(--g-typography-body-lg);
+	color: var(--g-color-content-subtle);
 }

package/src/components/newsletter/newsletter.css

@@ -9,9 +9,9 @@
 }
 
 .newsletter {
-	padding-block: var(--g-theme-spacing-3xl);
-	padding-inline: var(--g-theme-spacing-md);
-	background: var(--g-theme-color-background-primary-knockout, #7c3aed);
+	padding-block: var(--g-spacing-3xl);
+	padding-inline: var(--g-spacing-md);
+	background: var(--g-color-background-primary-knockout);
 	text-align: center;
 }
 
@@ -21,15 +21,15 @@
 }
 
 .newsletter__title {
-	margin: 0 0 var(--g-theme-spacing-sm);
-	font: var(--g-typography-h4-font);
-	color: var(--g-theme-color-content-primary-knockout, #ffffff);
+	margin: 0 0 var(--g-spacing-sm);
+	font: var(--g-typography-h3-font);
+	color: var(--g-color-content-primary-knockout);
 }
 
 .newsletter__text {
-	margin: 0 0 var(--g-theme-spacing-xl);
-	font: var(--g-theme-typography-body-lg);
-	color: var(--g-theme-color-content-primary-knockout, #ffffff);
+	margin: 0 0 var(--g-spacing-xl);
+	font: var(--g-typography-body-lg);
+	color: var(--g-color-content-primary-knockout);
 	opacity: 0.9;
 }
 
@@ -52,35 +52,35 @@
 .newsletter__field {
 	display: flex;
 	flex-direction: column;
-	gap: var(--g-theme-spacing-sm);
+	gap: var(--g-spacing-sm);
 }
 
 .newsletter__input-wrap {
 	display: flex;
-	gap: var(--g-theme-spacing-sm);
+	gap: var(--g-spacing-sm);
 }
 
 .newsletter__input {
 	flex: 1;
 	min-width: 0;
-	padding-block: var(--g-theme-spacing-sm);
-	padding-inline: var(--g-theme-spacing-md);
-	font-size: var(--g-theme-typography-body-default-font-size);
+	padding-block: var(--g-spacing-sm);
+	padding-inline: var(--g-spacing-md);
+	font-size: var(--g-typography-body-default-font-size);
 	border: 2px solid transparent;
-	border-radius: var(--g-theme-border-radius-md, 0.5rem);
-	background: var(--g-theme-color-background-default);
-	color: var(--g-theme-color-content-default);
+	border-radius: var(--g-border-radius-md, 0.5rem);
+	background: var(--g-color-background-default);
+	color: var(--g-color-content-default);
 	outline: none;
 }
 
 .newsletter__input:focus {
-	border-color: var(--g-theme-color-border-default);
+	border-color: var(--g-color-border-default);
 }
 
 .newsletter__disclaimer {
-	margin: var(--g-theme-spacing-md) 0 0;
-	font: var(--g-theme-typography-body-sm);
-	color: var(--g-theme-color-content-primary-knockout, #ffffff);
+	margin: var(--g-spacing-md) 0 0;
+	font: var(--g-typography-body-sm);
+	color: var(--g-color-content-primary-knockout);
 	opacity: 0.75;
 }