@grantcodes/ui 2.12.1 → 2.15.2

package/src/components/tooltip/tooltip.css

@@ -15,8 +15,8 @@
 }
 
 .tooltip__slot {
-	padding: var(--g-theme-spacing-sm);
-	margin: calc(-1 * var(--g-theme-spacing-sm));
+	padding: var(--g-spacing-sm);
+	margin: calc(-1 * var(--g-spacing-sm));
 	/* Anchor name will be set via JavaScript to include unique ID */
 }
 
@@ -27,12 +27,12 @@
 	max-width: 100%;
 	min-width: 6rem;
 	z-index: 100;
-	border-radius: var(--g-theme-border-radius-md);
+	border-radius: var(--g-border-radius-md);
 	padding: 0.6em 1em;
-	font-size: var(--g-typography-font-size-14);
+	font-size: var(--g-typography-font-size-xs);
 	line-height: 1;
-	color: var(--g-theme-color-primary-900);
-	background-color: var(--g-theme-color-primary-100);
+	color: var(--g-color-primary-900);
+	background-color: var(--g-color-primary-100);
 	box-shadow:
 		0 1px 3px rgba(0, 0, 0, 0.12),
 		0 1px 2px rgba(0, 0, 0, 0.24);

package/src/css/colors.stories.js

@@ -27,28 +27,28 @@ class ColorPalette extends LitElement {
 		:host {
 			display: block;
 			padding: 2rem;
-			background: var(--g-theme-color-background-default, #fff);
-			color: var(--g-theme-color-content-default, #333);
+			background: var(--g-color-background-default, #fff);
+			color: var(--g-color-content-default, #333);
 		}
 
 		.banner {
 			margin-bottom: 2rem;
 			padding: 1rem;
-			background: var(--g-theme-color-background-subtle, #f5f5f5);
+			background: var(--g-color-background-subtle, #f5f5f5);
 			border-radius: 0.5rem;
-			border: 1px solid var(--g-theme-color-border-default, #ccc);
+			border: 1px solid var(--g-color-border-default, #ccc);
 		}
 
 		.theme-title {
 			margin: 0;
 			font-weight: 600;
-			color: var(--g-theme-color-content-default, #333);
+			color: var(--g-color-content-default, #333);
 			font-size: 1rem;
 		}
 
 		.theme-hint {
 			margin: 0.5rem 0 0 0;
-			color: var(--g-theme-color-content-subtle, #666);
+			color: var(--g-color-content-subtle, #666);
 			font-size: 0.875rem;
 		}
 	`;

package/src/css/elements/a.css

@@ -1,5 +1,5 @@
 :where(a) {
-	color: var(--g-theme-link-color-content-default);
+	color: var(--g-link-color-content-default);
 	text-decoration: underline;
 	transition:
 		color 0.2s,
@@ -7,19 +7,19 @@
 }
 
 :where(a:visited) {
-	color: var(--g-theme-link-color-content-visited);
+	color: var(--g-link-color-content-visited);
 	opacity: 0.6;
 }
 
 :where(a:hover),
 :where(a:focus-visible) {
 	opacity: 1;
-	color: var(--g-theme-link-color-content-hover);
+	color: var(--g-link-color-content-hover);
 	text-decoration: underline wavy;
 }
 
 :where(a:active) {
-	color: var(--g-theme-link-color-content-active);
+	color: var(--g-link-color-content-active);
 }
 
 /* External links - special styling for links opening in new windows */

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

@@ -1,15 +1,15 @@
 :where(input, textarea, select) {
 	display: block;
-	accent-color: var(--g-theme-form-input-accent-color-default);
-	border-radius: var(--g-theme-border-radius-md);
-	border-width: var(--g-theme-border-width-md);
+	accent-color: var(--g-form-input-accent-color-default);
+	border-radius: var(--g-border-radius-md);
+	border-width: var(--g-border-width-md);
 	border-style: solid;
-	border-color: var(--g-theme-form-color-border-default);
-	background: var(--g-theme-form-color-background-default);
-	color: var(--g-theme-form-color-content-default);
+	border-color: var(--g-form-color-border-default);
+	background: var(--g-form-color-background-default);
+	color: var(--g-form-color-content-default);
 	padding: 0.5em 1em;
 	transition-property: color, background-color, border-color, outline;
-	font-size: var(--g-theme-typography-body-font-size);
+	font-size: var(--g-typography-body-font-size);
 }
 
 :where(input, textarea, select):not(textarea) {
@@ -17,19 +17,19 @@
 }
 
 :where(input, textarea, select):hover {
-	border-color: var(--g-theme-form-color-border-hover);
-	color: var(--g-theme-form-color-content-hover);
-	background: var(--g-theme-form-color-background-hover);
+	border-color: var(--g-form-color-border-hover);
+	color: var(--g-form-color-content-hover);
+	background: var(--g-form-color-background-hover);
 }
 
 :where(input, textarea, select):focus {
-	border-color: var(--g-theme-form-color-border-focus);
-	color: var(--g-theme-form-color-content-focus);
-	background: var(--g-theme-form-color-background-focus);
+	border-color: var(--g-form-color-border-focus);
+	color: var(--g-form-color-content-focus);
+	background: var(--g-form-color-background-focus);
 }
 
 :where(input, textarea, select):focus:invalid {
-	border-color: var(--g-theme-form-color-border-error);
+	border-color: var(--g-form-color-border-error);
 }
 
 :where(input, textarea, select)[readonly] {
@@ -38,9 +38,9 @@
 }
 
 :where(input, textarea, select):disabled {
-	border-color: var(--g-theme-form-color-border-disabled);
-	background: var(--g-theme-form-color-background-disabled);
-	color: var(--g-theme-form-color-content-disabled);
+	border-color: var(--g-form-color-border-disabled);
+	background: var(--g-form-color-background-disabled);
+	color: var(--g-form-color-content-disabled);
 	cursor: not-allowed;
 	opacity: 0.6;
 	filter: grayscale(100%) brightness(80%);
@@ -48,9 +48,9 @@
 
 :where(input, textarea, select):disabled:hover,
 :where(input, textarea, select):disabled:focus-visible {
-	border-color: var(--g-theme-form-color-border-disabled);
-	background: var(--g-theme-form-color-background-disabled);
-	color: var(--g-theme-form-color-content-disabled);
+	border-color: var(--g-form-color-border-disabled);
+	background: var(--g-form-color-background-disabled);
+	color: var(--g-form-color-content-disabled);
 }
 
 :where(input, textarea, select):where(textarea) {
@@ -85,8 +85,8 @@
 }
 
 :where(input, textarea, select):where(option):checked {
-	background: var(--g-theme-color-background-primary);
-	color: var(--g-theme-color-content-primary-knockout);
+	background: var(--g-color-background-primary);
+	color: var(--g-color-content-primary-knockout);
 }
 
 :where(input, textarea, select):where([type="checkbox"]),
@@ -101,7 +101,7 @@
 }
 
 :where(input, textarea, select):where([type="checkbox"]) {
-	border-radius: calc(var(--g-theme-border-radius-md) / 2);
+	border-radius: calc(var(--g-border-radius-md) / 2);
 }
 
 :where(input, textarea, select):where([type="checkbox"])::after {
@@ -121,12 +121,12 @@
 }
 
 :where(input, textarea, select):where([type="checkbox"]):checked {
-	border-color: var(--g-theme-color-border-primary);
-	background-color: var(--g-theme-color-border-primary);
+	border-color: var(--g-color-border-primary);
+	background-color: var(--g-color-border-primary);
 }
 
 :where(input, textarea, select):where([type="checkbox"]):checked::after {
-	color: var(--g-theme-color-border-default);
+	color: var(--g-color-border-default);
 }
 
 :where(input, textarea, select):where([type="radio"]) {
@@ -147,5 +147,5 @@
 }
 
 :where(input, textarea, select):where([type="radio"]):checked::after {
-	background-color: var(--g-theme-color-border-primary);
+	background-color: var(--g-color-border-primary);
 }

package/src/css/elements/forms/label.css

@@ -1,5 +1,5 @@
 label {
 	color: inherit;
-	font-size: var(--g-theme-typography-label-font-size);
+	font: var(--g-typography-body-sm-font);
 	cursor: pointer;
 }

package/src/css/elements/media/image.css

@@ -1,3 +1,4 @@
 img {
 	block-size: auto;
+	background-color: var(--g-color-background-subtle);
 }

package/src/css/layers.stories.js

@@ -29,7 +29,7 @@ export const LayerOverrideDemo = {
 		<style>
 			/* This override is unlayered, so it beats all layers */
 			.layer-demo-override {
-				color: var(--g-theme-color-content-brand, rebeccapurple);
+				color: var(--g-color-content-brand, rebeccapurple);
 				font-weight: bold;
 			}
 		</style>
@@ -72,8 +72,8 @@ export const AllLayers = {
 			}
 			.layer-card {
 				padding: 1rem;
-				border: 1px solid var(--g-theme-color-border-default, #ccc);
-				border-radius: var(--g-theme-border-radius-md, 0.5rem);
+				border: 1px solid var(--g-color-border-default, #ccc);
+				border-radius: var(--g-border-radius-md, 0.5rem);
 			}
 			.layer-card h4 {
 				margin-top: 0;

package/src/css/reset.css

@@ -227,8 +227,8 @@ pre {
 :root {
 	color-scheme: light dark;
 	--grantcodes-ui-theme: "none";
-	background-color: var(--g-theme-color-background-default);
-	color: var(--g-theme-color-content-default);
+	background-color: var(--g-color-background-default);
+	color: var(--g-color-content-default);
 	fill: currentColor;
 }
 
@@ -250,7 +250,7 @@ pre {
 }
 
 ::selection {
-	background-color: var(--g-theme-color-background-primary);
+	background-color: var(--g-color-background-primary);
 }
 
 /* Default backdrop styles */

package/src/css/themes/todomap.css

@@ -3,5 +3,5 @@
 @import "@grantcodes/style-dictionary/assets/fonts/quicksand";
 
 html.todomap {
-	font-family: var(--g-theme-typography-font-family-body);
+	font-family: var(--g-typography-font-family-body);
 }

package/src/css/tokens.stories.js

@@ -15,28 +15,28 @@ class TokenList extends LitElement {
 		:host {
 			display: block;
 			padding: 2rem;
-			background: var(--g-theme-color-background-default, #fff);
-			color: var(--g-theme-color-content-default, #333);
+			background: var(--g-color-background-default, #fff);
+			color: var(--g-color-content-default, #333);
 		}
 
 		.banner {
 			margin-bottom: 2rem;
 			padding: 1rem;
-			background: var(--g-theme-color-background-subtle, #f5f5f5);
+			background: var(--g-color-background-subtle, #f5f5f5);
 			border-radius: 0.5rem;
-			border: 1px solid var(--g-theme-color-border-default, #ccc);
+			border: 1px solid var(--g-color-border-default, #ccc);
 		}
 
 		.theme-title {
 			margin: 0;
 			font-weight: 600;
-			color: var(--g-theme-color-content-default, #333);
+			color: var(--g-color-content-default, #333);
 			font-size: 1rem;
 		}
 
 		.theme-hint {
 			margin: 0.5rem 0 0 0;
-			color: var(--g-theme-color-content-subtle, #666);
+			color: var(--g-color-content-subtle, #666);
 			font-size: 0.875rem;
 		}
 
@@ -48,14 +48,14 @@ class TokenList extends LitElement {
 			margin: 0 0 1rem 0;
 			font-weight: 600;
 			font-size: 1.5rem;
-			color: var(--g-theme-color-content-default, #333);
+			color: var(--g-color-content-default, #333);
 			padding-bottom: 0.5rem;
-			border-bottom: 2px solid var(--g-theme-color-border-default, #ccc);
+			border-bottom: 2px solid var(--g-color-border-default, #ccc);
 		}
 
 		.token-count {
 			margin: 0.5rem 0 1rem 0;
-			color: var(--g-theme-color-content-subtle, #666);
+			color: var(--g-color-content-subtle, #666);
 			font-size: 0.875rem;
 		}
 
@@ -68,32 +68,32 @@ class TokenList extends LitElement {
 		.token-table th {
 			text-align: left;
 			padding: 0.75rem;
-			background: var(--g-theme-color-background-subtle, #f5f5f5);
-			border-bottom: 2px solid var(--g-theme-color-border-default, #ccc);
+			background: var(--g-color-background-subtle, #f5f5f5);
+			border-bottom: 2px solid var(--g-color-border-default, #ccc);
 			font-weight: 600;
 			font-size: 0.875rem;
-			color: var(--g-theme-color-content-default, #333);
+			color: var(--g-color-content-default, #333);
 		}
 
 		.token-table td {
 			padding: 0.75rem;
-			border-bottom: 1px solid var(--g-theme-color-border-default, #e0e0e0);
+			border-bottom: 1px solid var(--g-color-border-default, #e0e0e0);
 			font-size: 0.875rem;
 		}
 
 		.token-table tr:hover {
-			background: var(--g-theme-color-background-subtle, #f9f9f9);
+			background: var(--g-color-background-subtle, #f9f9f9);
 		}
 
 		.token-name {
 			font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
-			color: var(--g-theme-color-content-default, #333);
+			color: var(--g-color-content-default, #333);
 			font-weight: 500;
 		}
 
 		.token-value {
 			font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
-			color: var(--g-theme-color-content-subtle, #666);
+			color: var(--g-color-content-subtle, #666);
 			word-break: break-all;
 		}
 	`;

package/src/css/typography.css

@@ -66,18 +66,18 @@ p + p {
 }
 
 pre {
-	font-family: var(--g-typography-font-family-system);
+	font-family: var(--g-typography-font-family-code);
 	line-height: 1.2;
 	inline-size: 100%;
 	overflow: auto;
-	border-radius: var(--g-theme-border-radius-md);
+	border-radius: var(--g-border-radius-md);
 	/* PLACEHOLDER: u.shadow(0) - manual conversion needed */
-	box-shadow: var(--g-theme-box-shadow-sm);
+	box-shadow: var(--g-box-shadow-sm);
 	font-size: 1rem;
 	font-weight: 400;
 	padding: 1rem;
 }
 
 mark {
-	background-color: var(--g-color-neutral-300);
+	background-color: var(--g-color-background-highlight);
 }

package/src/css/util/focus-ring.css

@@ -1,30 +1,30 @@
 :where(.focus-ring),
 :where(:enabled) {
 	outline: 0px solid transparent;
-	outline-offset: var(--g-theme-focus-ring-offset-default);
-	transition-duration: var(--g-animation-duration-20);
+	outline-offset: var(--g-focus-ring-offset-default);
+	transition-duration: var(--g-animation-move-quick);
 	transition-property: outline-color, width;
 }
 
 :where(.focus-ring):focus-visible,
 :where(:enabled):focus-visible {
-	outline: var(--g-theme-focus-ring-width-default) solid
-		var(--g-theme-focus-ring-color-default);
+	outline: var(--g-focus-ring-width-default) solid
+		var(--g-focus-ring-color-default);
 }
 
 @media (prefers-contrast: more) {
 	:where(.focus-ring):focus-visible,
 	:where(:enabled):focus-visible {
-		outline: var(--g-theme-focus-ring-width-default) solid
-			var(--g-theme-focus-ring-color-contrast);
+		outline: var(--g-focus-ring-width-default) solid
+			var(--g-focus-ring-color-contrast);
 		box-shadow: 0 0 0
 			calc(
 				(
-					var(--g-theme-focus-ring-width-default) +
-					var(--g-theme-focus-ring-offset-default)
+					var(--g-focus-ring-width-default) +
+					var(--g-focus-ring-offset-default)
 				) *
 				1.5
 			)
-			var(--g-theme-focus-ring-color-contrast-shadow);
+			var(--g-focus-ring-color-contrast-shadow);
 	}
 }

package/src/lib/styles/focus-ring.css

@@ -1,30 +1,30 @@
 .focus-ring,
 :host(.focus-ring) {
 	outline: 0px solid transparent;
-	outline-offset: var(--g-theme-focus-ring-offset-default);
-	transition-duration: var(--g-animation-duration-20);
+	outline-offset: var(--g-focus-ring-offset-default);
+	transition-duration: var(--g-animation-move-quick);
 	transition-property: outline-color, width;
 }
 
 .focus-ring:focus-visible,
 :host(.focus-ring):focus-visible {
-	outline: var(--g-theme-focus-ring-width-default) solid
-		var(--g-theme-focus-ring-color-default);
+	outline: var(--g-focus-ring-width-default) solid
+		var(--g-focus-ring-color-default);
 }
 
 @media (prefers-contrast: more) {
 	.focus-ring:focus-visible,
 	:host(.focus-ring):focus-visible {
-		outline: var(--g-theme-focus-ring-width-default) solid
-			var(--g-theme-focus-ring-color-contrast);
+		outline: var(--g-focus-ring-width-default) solid
+			var(--g-focus-ring-color-contrast);
 		box-shadow: 0 0 0
 			calc(
 				(
-					var(--g-theme-focus-ring-width-default) +
-					var(--g-theme-focus-ring-offset-default)
+					var(--g-focus-ring-width-default) +
+					var(--g-focus-ring-offset-default)
 				) *
 				1.5
 			)
-			var(--g-theme-focus-ring-color-contrast-shadow);
+			var(--g-focus-ring-color-contrast-shadow);
 	}
 }

package/src/main.js

@@ -21,6 +21,7 @@ export * from "./components/media-text/index.js";
 export * from "./components/newsletter/index.js";
 export * from "./components/notice/index.js";
 export * from "./components/pagination/index.js";
+export * from "./components/person/index.js";
 export * from "./components/pricing/index.js";
 export * from "./components/stats/index.js";
 export * from "./components/tabs/index.js";

package/src/pages/agency.stories.js

@@ -1,5 +1,6 @@
 import { html } from "lit";
 import "../components/app-bar/app-bar.js";
+import "../components/app-bar/nav-link.js"
 import "../components/button/button.js";
 import "../components/hero/hero.js";
 import "../components/media-text/media-text.js";
@@ -54,9 +55,9 @@ export const Default = {
 				Studio North
 			</a>
 			<div slot="nav" style="display: flex; gap: 0.5rem;">
-				<a href="/work">Work</a>
-				<a href="/services">Services</a>
-				<a href="/about">About</a>
+				<grantcodes-nav-link><a href="/work">Work</a></grantcodes-nav-link>
+				<grantcodes-nav-link><a href="/services">Services</a></grantcodes-nav-link>
+				<grantcodes-nav-link><a href="/about">About</a></grantcodes-nav-link>
 			</div>
 			<div slot="actions">
 				<grantcodes-button>Get in touch</grantcodes-button>
@@ -155,7 +156,7 @@ export const Default = {
 			<div slot="bottom">
 				<p>&copy; 2025 Studio North. All rights reserved.</p>
 			</div>
-			<div slot="bottom" style="display: flex; gap: var(--g-theme-spacing-md);">
+			<div slot="bottom" style="display: flex; gap: var(--g-spacing-md);">
 				<a href="/privacy">Privacy</a>
 				<a href="/terms">Terms</a>
 			</div>