@grantcodes/ui 2.12.1 → 2.15.5

package/src/components/button/button.css

@@ -7,45 +7,118 @@
 
 :host {
 	display: block;
-	--button-border-radius-start: var(--g-theme-border-radius-md);
-	--button-border-radius-end: var(--g-theme-border-radius-md);
+}
+
+/* Color variants */
+:host {
+    --_button-base: var(--g-button-color-background);
+    --_button-border: var(--g-button-color-border);
+}
+:host([color="secondary"]) {
+    --_button-base: var(--g-button-secondary-color-background);
+    --_button-border: var(--g-button-secondary-color-border);
+}
+:host([color="neutral"]) {
+    --_button-base: var(--g-button-neutral-color-background);
+    --_button-border: var(--g-button-neutral-color-border);
+}
+:host([color="danger"]) {
+    --_button-base: var(--g-button-danger-color-background);
+    --_button-border: var(--g-button-danger-color-border);
+}
+
+/* Style variants */
+:host {
+    /* biome-ignore lint/correctness/noUnknownFunction: contrast-color is new */
+	--_button-color: contrast-color(var(--_button-base));
+	--_button-background: var(--_button-base);
+}
+
+:host([variant="outline"]) {
+	--_button-color: var(--_button-base);
+	--_button-background: transparent;
+	--_button-background-hover: rgb(from var(--_button-base) r g b / 0.2);
+	--_button-background-active: rgb(from var(--_button-base) r g b / 0.25);
+}
+:host([variant="ghost"]) {
+	--_button-color: var(--_button-base);
+	--_button-background: transparent;
+	--_button-border: transparent;
+	--_button-border-hover: transparent;
+	--_button-border-active: transparent;
+	--_button-background-hover: rgb(from var(--_button-base) r g b / 0.2);
+	--_button-background-active: rgb(from var(--_button-base) r g b / 0.25);
+}
+
+:host {
+    --_button-action-tint: var(--_button-color);
+	--_button-border-radius-start: var(--g-border-radius-md);
+	--_button-border-radius-end: var(--g-border-radius-md);
+	--_button-background-hover: color-mix(
+		in oklab,
+		var(--_button-background),
+		var(--_button-action-tint) 10%
+	);
+	--_button-border-hover: color-mix(
+		in oklab,
+		var(--_button-border),
+		var(--_button-action-tint) 10%
+	);
+	--_button-color-hover: color-mix(
+		in oklab,
+		var(--_button-color),
+		var(--_button-action-tint) 10%
+	);
+	--_button-background-active: color-mix(
+		in oklab,
+		var(--_button-background-hover),
+		var(--_button-action-tint) 10%
+	);
+	--_button-border-active: color-mix(
+		in oklab,
+		var(--_button-border-hover),
+		var(--_button-action-tint) 10%
+	);
+	--_button-color-active: color-mix(
+		in oklab,
+		var(--_button-color-hover),
+		var(--_button-action-tint) 10%
+	);
 }
 
 .button {
 	display: inline-flex;
 	flex-direction: row;
 	align-items: center;
-	gap: var(--g-theme-spacing-sm);
-	background: var(--g-theme-button-primary-color-background-default);
-	color: var(--g-theme-button-primary-color-content-default);
-	border-width: var(--g-theme-border-width-md);
+	gap: var(--g-spacing-sm);
+	background: var(--_button-background);
+	color: var(--_button-color);
+	border-width: var(--g-border-width-md);
 	border-style: solid;
-	border-color: var(--g-theme-button-primary-color-border-default);
-	padding-block: var(--g-theme-spacing-sm);
-	padding-inline: var(--g-theme-spacing-md);
-	border-start-start-radius: var(--button-border-radius-start);
-	border-start-end-radius: var(--button-border-radius-end);
-	border-end-start-radius: var(--button-border-radius-start);
-	border-end-end-radius: var(--button-border-radius-end);
-	font: var(--g-theme-typography-label-default);
-	font-family: var(--g-theme-typography-label-font-family);
+	border-color: var(--_button-border);
+	border-start-start-radius: var(--_button-border-radius-start);
+	border-start-end-radius: var(--_button-border-radius-end);
+	border-end-start-radius: var(--_button-border-radius-start);
+	border-end-end-radius: var(--_button-border-radius-end);
+	font: var(--g-typography-body-sm-font);
 	text-decoration: none;
+	text-align: center;
 	transition-property: color, border-color, background-color, outline;
 }
 
 .button:hover,
 .button:focus-visible {
-	color: var(--g-theme-button-primary-color-content-hover);
-	background: var(--g-theme-button-primary-color-background-hover);
-	border-color: var(--g-theme-button-primary-color-border-hover);
+	color: var(--_button-color-hover);
+	background: var(--_button-background-hover);
+	border-color: var(--_button-border-hover);
 	cursor: pointer;
 	text-decoration: none;
 }
 
 .button:active {
-	color: var(--g-theme-button-primary-color-content-active);
-	background: var(--g-theme-button-primary-color-background-active);
-	border-color: var(--g-theme-button-primary-color-border-active);
+	color: var(--_button-color-active);
+	background: var(--_button-background-active);
+	border-color: var(--_button-border-active);
 }
 
 .button:active {
@@ -53,10 +126,25 @@
 }
 
 .button[disabled] {
-	background: var(--g-theme-button-primary-color-background-disabled);
-	color: var(--g-theme-button-primary-color-content-disabled);
-	border-color: var(--g-theme-button-primary-color-border-disabled);
 	cursor: not-allowed;
 	filter: grayscale(70%);
 	opacity: 0.8;
 }
+
+/* Size variants */
+:host .button {
+   	padding-block: var(--g-spacing-sm);
+	padding-inline: var(--g-spacing-md);
+	font-size: var(--g-typography-font-size-sm)
+}
+
+:host([size="sm"]) .button {
+    padding-block: var(--g-spacing-xs);
+	padding-inline: var(--g-spacing-sm);
+	font-size: var(--g-typography-font-size-xs)
+}
+
+:host([size="lg"]) .button {
+	padding-inline: var(--g-spacing-lg);
+	font-size: var(--g-typography-font-size-md);
+}

package/src/components/button/button.stories.js

@@ -24,6 +24,43 @@ export default meta;
  */
 export const Button = {};
 
+/**
+ * Different button styles
+ */
+export const ButtonStyles = {
+	render: () => html`
+		<div style="display: flex; gap: 1rem;">
+  		<div>
+        <h4>Default</h4>
+        <grantcodes-button>Default</grantcodes-button>
+        <grantcodes-button color="secondary">Secondary</grantcodes-button>
+        <grantcodes-button color="neutral">Neutral</grantcodes-button>
+        <grantcodes-button color="danger">Danger</grantcodes-button>
+  		</div>
+      <div>
+        <h4>Ghost</h4>
+        <grantcodes-button variant="ghost">Default</grantcodes-button>
+        <grantcodes-button variant="ghost" color="secondary">Secondary</grantcodes-button>
+        <grantcodes-button variant="ghost" color="neutral">Neutral</grantcodes-button>
+        <grantcodes-button variant="ghost" color="danger">Danger</grantcodes-button>
+  		</div>
+      <div>
+        <h4>Outline</h4>
+        <grantcodes-button variant="outline">Default</grantcodes-button>
+        <grantcodes-button variant="outline" color="secondary">Secondary</grantcodes-button>
+        <grantcodes-button variant="outline" color="neutral">Neutral</grantcodes-button>
+        <grantcodes-button variant="outline" color="danger">Danger</grantcodes-button>
+  		</div>
+      <div>
+        <h4>Sizes</h4>
+        <grantcodes-button size="sm">Small</grantcodes-button>
+        <grantcodes-button>Default</grantcodes-button>
+        <grantcodes-button size="lg">Large</grantcodes-button>
+      </div>
+		</div>
+	`,
+};
+
 /**
  * Disabled button that cannot be interacted with.
  * The button will not respond to clicks when disabled.

package/src/components/button-group/button-group.css

@@ -13,8 +13,8 @@
 	display: inline-flex;
 	flex-direction: row;
 	flex-wrap: wrap;
-	background: var(--g-theme-color-background-default);
-	border-radius: var(--g-theme-border-radius-md);
+	background: var(--g-color-background-default);
+	border-radius: var(--g-border-radius-md);
 	min-width: fit-content;
 	max-width: 100%;
 	overflow: hidden;
@@ -26,11 +26,11 @@
 }
 
 .button-group ::slotted(grantcodes-button:first-child) {
-	--button-border-radius-start: var(--g-theme-border-radius-md);
+	--button-border-radius-start: var(--g-border-radius-md);
 }
 
 .button-group ::slotted(grantcodes-button:last-child) {
-	--button-border-radius-end: var(--g-theme-border-radius-md);
+	--button-border-radius-end: var(--g-border-radius-md);
 }
 
 .button-group ::slotted(grantcodes-button:focus-visible) {

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

@@ -1,6 +1,7 @@
 import { LitElement, html } from "lit";
 import ctaStyles from "./cta.css" with { type: "css" };
 import "../button/button.js";
+import "../container/container.js";
 
 export class GrantCodesCta extends LitElement {
 	static styles = [ctaStyles];
@@ -69,7 +70,7 @@ export class GrantCodesCta extends LitElement {
 		const secondary = this._secondaryAction;
 		return html`
 			<section class="cta">
-				<div class="cta__container">
+				<grantcodes-container align="prose">
 					${
 						this.eyebrow
 							? html`<p class="cta__eyebrow">${this.eyebrow}</p>`
@@ -90,10 +91,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
 									}
@@ -101,7 +102,7 @@ export class GrantCodesCta extends LitElement {
 							`
 							: null
 					}
-				</div>
+				</grantcodes-container>
 			</section>
 		`;
 	}

package/src/components/cta/cta.css

@@ -9,14 +9,8 @@
 }
 
 .cta {
-	padding-block: var(--g-theme-spacing-3xl);
-	padding-inline: var(--g-theme-spacing-md);
-	background: var(--g-theme-color-background-subtle);
-}
-
-.cta__container {
-	max-width: 65ch;
-	margin: 0 auto;
+	padding-block: var(--g-spacing-3xl);
+	background: var(--g-color-background-subtle);
 }
 
 :host([align="center"]) .cta {
@@ -28,39 +22,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;
 }