@grantcodes/ui 2.12.1 → 2.15.2

package/src/components/card/card.css

@@ -20,12 +20,12 @@
 	flex-direction: column;
 	justify-content: flex-start;
 	overflow: hidden;
-	background: var(--g-theme-color-background-default);
+	background: var(--g-color-background-default);
 	border-style: solid;
-	border-width: var(--g-theme-border-width-sm);
-	border-color: var(--g-theme-color-border-default);
-	border-radius: var(--g-theme-border-radius-md);
-	box-shadow: var(--g-theme-box-shadow-md);
+	border-width: var(--g-border-width-sm);
+	border-color: var(--g-color-border-default);
+	border-radius: var(--g-border-radius-md);
+	box-shadow: var(--g-box-shadow-md);
 	transition:
 		box-shadow 0.2s ease,
 		transform 0.2s ease,
@@ -43,9 +43,9 @@
 }
 
 .card__header {
-	padding-inline: var(--g-theme-spacing-md);
-	padding-block: var(--g-spacing-12);
-	border-block-end: 1px solid var(--g-theme-color-border-default);
+	padding-inline: var(--g-spacing-md);
+	padding-block: var(--g-spacing-sm);
+	border-block-end: 1px solid var(--g-color-border-default);
 }
 
 .card__header:not([data-has-content]) {
@@ -61,9 +61,9 @@
 	display: flex;
 	flex-direction: column;
 	justify-content: flex-start;
-	gap: var(--g-theme-spacing-md);
-	padding-block: var(--g-theme-spacing-md);
-	padding-inline: var(--g-theme-spacing-md);
+	gap: var(--g-spacing-md);
+	padding-block: var(--g-spacing-md);
+	padding-inline: var(--g-spacing-md);
 }
 
 .card__content:has(::slotted(:empty)) {
@@ -80,11 +80,11 @@
 	flex-wrap: wrap;
 	justify-content: flex-start;
 	align-items: center;
-	gap: var(--g-theme-spacing-sm);
-	padding-inline: var(--g-theme-spacing-md);
-	padding-block: var(--g-spacing-12);
-	border-block-start: 1px solid var(--g-theme-color-border-default);
-	background: var(--g-theme-color-background-default);
+	gap: var(--g-spacing-sm);
+	padding-inline: var(--g-spacing-md);
+	padding-block: var(--g-spacing-sm);
+	border-block-start: 1px solid var(--g-color-border-default);
+	background: var(--g-color-background-default);
 }
 
 .card__footer:not([data-has-content]) {
@@ -101,18 +101,18 @@
 	flex-direction: row;
 	align-items: center;
 	flex-wrap: wrap;
-	gap: var(--g-theme-spacing-md);
+	gap: var(--g-spacing-md);
 	margin: 0;
-	padding-inline: var(--g-theme-spacing-md);
+	padding-inline: var(--g-spacing-md);
 	padding-block: 1em;
-	font-size: var(--g-theme-typography-meta-sm-font-size);
+	font-size: var(--g-typography-font-size-xs);
 	/* Use color-mix() for modern color manipulation */
 	background-color: color-mix(
 		in srgb,
-		var(--g-theme-color-background-default) 90%,
-		var(--g-theme-color-primary-500) 10%
+		var(--g-color-background-default) 90%,
+		var(--g-color-primary-500) 10%
 	);
-	color: var(--g-theme-color-content-default);
+	color: var(--g-color-content-default);
 }
 
 .card__meta__item {
@@ -140,11 +140,11 @@
 
 :host(.is-clickable:hover) .card {
 	transform: translateY(-2px);
-	box-shadow: var(--g-theme-box-shadow-lg);
-	border-color: var(--g-theme-color-border-default);
+	box-shadow: var(--g-box-shadow-lg);
+	border-color: var(--g-color-border-default);
 }
 
 :host(.is-clickable:active) .card {
 	transform: translateY(-1px);
-	border-color: var(--g-theme-color-border-active);
+	border-color: var(--g-color-border-primary);
 }

package/src/components/code-preview/code-preview.css

@@ -6,13 +6,13 @@
 
 .code-preview > pre {
 	display: block;
-	font-family: var(--g-typography-font-family-system);
+	font-family: var(--g-typography-font-family-code);
 	line-height: 1.2;
 	width: 100%;
 	overflow: auto;
-	border-radius: var(--g-theme-border-radius-md);
-	box-shadow: var(--g-theme-box-shadow-sm);
-	font-size: var(--g-typography-font-size-14);
-	font-weight: var(--g-typography-font-weight-400);
-	padding: var(--g-theme-spacing-md);
+	border-radius: var(--g-border-radius-md);
+	box-shadow: var(--g-box-shadow-sm);
+	font-size: var(--g-typography-body-sm-font-size);
+	font-weight: var(--g-typography-body-lg-font-weight);
+	padding: var(--g-spacing-md);
 }

package/src/components/container/container.css

@@ -11,12 +11,13 @@
 	align-items: stretch;
 	inline-size: 1200px;
 	max-inline-size: 100%;
-	padding-inline: var(--g-theme-spacing-md);
+	padding-inline: var(--g-spacing-md);
 	margin-inline: auto;
 	background-color: inherit;
 }
 
 .container--prose {
+	inline-size: 100%;
 	max-inline-size: 65ch;
 }
 

package/src/components/container/container.stories.js

@@ -26,7 +26,7 @@ const meta = {
 		template(
 			args,
 			html`<div
-        style="background-color: var(--g-theme-color-background-subtle)"
+        style="background-color: var(--g-color-background-subtle)"
       >
         ${args.content}
       </div>`,

package/src/components/countdown/countdown.css

@@ -11,8 +11,8 @@
 .countdown {
 	display: flex;
 	justify-content: center;
-	gap: var(--g-theme-spacing-lg, 2rem);
-	padding: var(--g-theme-spacing-lg, 2rem) var(--g-theme-spacing-md, 1rem);
+	gap: var(--g-spacing-lg, 2rem);
+	padding: var(--g-spacing-lg, 2rem) var(--g-spacing-md, 1rem);
 	text-align: center;
 }
 
@@ -20,14 +20,14 @@
 	display: flex;
 	flex-direction: column;
 	align-items: center;
-	gap: var(--g-theme-spacing-xs, 0.25rem);
+	gap: var(--g-spacing-xs, 0.25rem);
 }
 
 .countdown__value {
-	font-size: var(--g-theme-typography-h1-font-size, 6.25rem);
-	font-weight: var(--g-theme-typography-h1-font-weight, 900);
-	line-height: var(--g-theme-typography-h1-line-height, 1.1);
-	color: var(--g-theme-color-content-default);
+	font-size: var(--g-typography-h1-font-size, 6.25rem);
+	font-weight: var(--g-typography-h1-font-weight, 900);
+	line-height: var(--g-typography-h1-line-height, 1.1);
+	color: var(--g-color-content-default);
 	font-variant-numeric: tabular-nums;
 }
 
@@ -36,18 +36,18 @@
 }
 
 .countdown__label {
-	font-size: var(--g-theme-typography-body-sm-font-size, 0.875rem);
-	color: var(--g-theme-color-content-subtle);
+	font-size: var(--g-typography-body-sm-font-size, 0.875rem);
+	color: var(--g-color-content-subtle);
 	text-transform: uppercase;
 	letter-spacing: 0.05em;
 }
 
 .countdown__past {
-	font-size: var(--g-theme-typography-h2-font-size, 3rem);
-	font-weight: var(--g-theme-typography-h2-font-weight, 900);
-	color: var(--g-theme-color-content-default);
+	font-size: var(--g-typography-h2-font-size, 3rem);
+	font-weight: var(--g-typography-h2-font-weight, 900);
+	color: var(--g-color-content-default);
 	text-align: center;
-	padding: var(--g-theme-spacing-lg, 2rem) var(--g-theme-spacing-md, 1rem);
+	padding: var(--g-spacing-lg, 2rem) var(--g-spacing-md, 1rem);
 }
 
 @keyframes countdown-flip {

package/src/components/cta/cta.component.js

@@ -90,10 +90,10 @@ export class GrantCodesCta extends LitElement {
 									}
 									${
 										secondary
-											? html`<a
+                      ? html`<grantcodes-button
+											  variant="ghost"
 												href=${secondary.href}
-												class="cta__secondary-link"
-												>${secondary.label}</a
+												>${secondary.label}</grantcodes-button
 											>`
 											: null
 									}

package/src/components/cta/cta.css

@@ -9,9 +9,9 @@
 }
 
 .cta {
-	padding-block: var(--g-theme-spacing-3xl);
-	padding-inline: var(--g-theme-spacing-md);
-	background: var(--g-theme-color-background-subtle);
+	padding-block: var(--g-spacing-3xl);
+	padding-inline: var(--g-spacing-md);
+	background: var(--g-color-background-subtle);
 }
 
 .cta__container {
@@ -28,39 +28,37 @@
 }
 
 .cta__eyebrow {
-	margin: 0 0 var(--g-theme-spacing-sm);
-	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-sm);
+	font: var(--g-typography-body-sm-font);
 	text-transform: uppercase;
-	color: var(--g-theme-color-content-primary, #7c3aed);
+	color: var(--g-color-content-primary);
 }
 
 .cta__title {
-	margin: 0 0 var(--g-theme-spacing-md);
+	margin: 0 0 var(--g-spacing-md);
 	font: var(--g-typography-h2-font);
-	color: var(--g-theme-color-content-default);
+	color: var(--g-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-subtle);
+	margin: 0 0 var(--g-spacing-xl);
+	font: var(--g-typography-body-lg);
+	color: var(--g-color-content-subtle);
 }
 
 .cta__actions {
 	display: flex;
 	flex-wrap: wrap;
-	gap: var(--g-theme-spacing-md);
+	gap: var(--g-spacing-md);
 	align-items: center;
 }
 
 .cta__secondary-link {
-	font-size: var(--g-theme-typography-body-default-font-size);
-	font-weight: var(--g-typography-font-weight-500);
-	color: var(--g-theme-color-content-default);
+	font-size: var(--g-typography-body-default-font-size);
+	font-weight: var(--g-typography-body-font-weight);
+	color: var(--g-color-content-default);
 }
 
 .cta__secondary-link:hover {
-	color: var(--g-theme-color-content-primary, #7c3aed);
+	color: var(--g-color-content-primary);
 }

package/src/components/dialog/dialog.css

@@ -8,11 +8,11 @@
 	width: 100%;
 	padding: 0;
 	max-width: 1200px;
-	background: var(--g-theme-color-background-default);
+	background: var(--g-color-background-default);
 	border-style: solid;
-	border-width: var(--g-theme-border-width-sm);
-	border-color: var(--g-theme-color-border-default);
-	border-radius: var(--g-theme-border-radius-md);
+	border-width: var(--g-border-width-sm);
+	border-color: var(--g-color-border-default);
+	border-radius: var(--g-border-radius-md);
 	overflow: hidden;
 }
 
@@ -28,17 +28,17 @@
 	position: absolute;
 	border: none;
 	line-height: 1;
-	font-size: var(--g-theme-typography-h4-font-size);
+	font-size: var(--g-typography-h4-font-size);
 	cursor: pointer;
 	background: transparent;
-	inset-block-start: var(--g-theme-spacing-md);
-	inset-inline-end: var(--g-theme-spacing-md);
+	inset-block-start: var(--g-spacing-md);
+	inset-inline-end: var(--g-spacing-md);
 	margin-block-start: -0.25rem;
 	margin-inline-end: -0.25rem;
 	border-radius: 50%;
 	width: 2rem;
 	height: 2rem;
-	padding: var(--g-theme-spacing-xs);
+	padding: var(--g-spacing-xs);
 	justify-content: center;
 	align-items: center;
 }
@@ -47,8 +47,8 @@
 	display: flex;
 	flex-direction: column;
 	justify-content: flex-start;
-	gap: var(--g-theme-spacing-md);
-	padding: var(--g-theme-spacing-md);
+	gap: var(--g-spacing-md);
+	padding: var(--g-spacing-md);
 }
 
 .dialog__header,
@@ -64,11 +64,11 @@
 	flex-direction: row;
 	justify-content: space-between;
 	align-items: center;
-	padding: var(--g-theme-spacing-md);
-	border-bottom: var(--g-theme-border-width-sm) solid
-		var(--g-theme-color-border-default);
+	padding: var(--g-spacing-md);
+	border-bottom: var(--g-border-width-sm) solid
+		var(--g-color-border-default);
 }
 
 .dialog__footer ::slotted(grantcodes-button-group) {
-	--g-theme-border-radius-md: 0;
+	--g-border-radius-md: 0;
 }

package/src/components/dropdown/dropdown.css

@@ -20,11 +20,11 @@
 	anchor-name: --dropdown-trigger;
 	z-index: 1000;
 	min-inline-size: 12rem;
-	margin-block: var(--g-theme-spacing-xs);
-	padding-block: var(--g-theme-spacing-sm);
-	background-color: var(--g-theme-color-background-default);
-	border: 1px solid var(--g-theme-color-border-default);
-	border-radius: var(--g-theme-border-radius-md);
+	margin-block: var(--g-spacing-xs);
+	padding-block: var(--g-spacing-sm);
+	background-color: var(--g-color-background-default);
+	border: 1px solid var(--g-color-border-default);
+	border-radius: var(--g-border-radius-md);
 	animation: dropdown-fade-in 0.15s ease-out;
 }
 
@@ -52,31 +52,31 @@
 	display: flex;
 	width: 100%;
 	align-items: center;
-	gap: var(--g-theme-spacing-sm);
-	padding-block: var(--g-theme-spacing-sm);
-	padding-inline: var(--g-theme-spacing-md);
-	font-size: var(--g-typography-font-size-16);
-	color: var(--g-theme-color-content-default);
+	gap: var(--g-spacing-sm);
+	padding-block: var(--g-spacing-sm);
+	padding-inline: var(--g-spacing-md);
+	font-size: var(--g-typography-body-font-size);
+	color: var(--g-color-content-default);
 	cursor: pointer;
 	transition: background-color 0.15s ease;
 	user-select: none;
 }
 
 .dropdown-item:hover {
-	background-color: var(--g-theme-color-background-subtle-hover);
+	background-color: var(--g-color-background-subtle-hover);
 }
 
 .dropdown-item:focus {
 	outline: none;
-	background-color: var(--g-theme-color-background-subtle-hover);
+	background-color: var(--g-color-background-subtle-hover);
 }
 
 .dropdown-item:active {
-	background-color: var(--g-theme-color-background-subtle);
+	background-color: var(--g-color-background-subtle);
 }
 
 .dropdown-item--disabled {
-	color: var(--g-theme-color-content-disabled);
+	color: var(--g-color-content-disabled);
 	cursor: not-allowed;
 	opacity: 0.6;
 }

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.css

@@ -9,8 +9,8 @@
 }
 
 .feature-list {
-	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);
 }
 
 .feature-list__container {
@@ -19,24 +19,24 @@
 }
 
 .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 +62,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 +80,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.css

@@ -12,13 +12,13 @@
 
 .footer {
 	margin-block-start: auto;
-	border-block-start: 1px solid var(--g-theme-color-border-subtle);
-	background-color: var(--g-theme-color-background-subtle);
+	border-block-start: 1px solid var(--g-color-border-subtle);
+	background-color: var(--g-color-background-subtle);
 }
 
 .footer__container {
-	padding-block: var(--g-theme-spacing-2xl) var(--g-theme-spacing-xl);
-	padding-inline: var(--g-theme-spacing-md);
+	padding-block: var(--g-spacing-2xl) var(--g-spacing-xl);
+	padding-inline: var(--g-spacing-md);
 	max-inline-size: 1400px;
 	margin-inline: auto;
 }
@@ -26,7 +26,7 @@
 .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 +44,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 +63,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 +73,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/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);
 }