@grantcodes/ui 2.0.0 → 2.1.0

package/src/css/colors.stories.js

@@ -1,28 +1,25 @@
-import grantcodes from '@grantcodes/style-dictionary/grantcodes/json'
-import wireframe from '@grantcodes/style-dictionary/wireframe/json'
-import todomap from '@grantcodes/style-dictionary/todomap/json'
-import { LitElement, html, css } from 'lit'
-import '../../.storybook/components/color-group.component.js'
+import grantcodes from "@grantcodes/style-dictionary/grantcodes/json";
+import wireframe from "@grantcodes/style-dictionary/wireframe/json";
+import todomap from "@grantcodes/style-dictionary/todomap/json";
+import { LitElement, html, css } from "lit";
+import "../../.storybook/components/color-group.component.js";
 
-const COLOR_PREFIXES = [
-    'g-color-',
-    'g-theme-color-'
-]
+const COLOR_PREFIXES = ["g-color-", "g-theme-color-"];
 
 // Filter function to only include keys that start with one of the color prefixes
 const filterByColorPrefixes = (tokens) => {
-    return Object.fromEntries(
-        Object.entries(tokens).filter(([key]) => 
-            COLOR_PREFIXES.some(prefix => key.startsWith(prefix))
-        )
-    )
-}
+	return Object.fromEntries(
+		Object.entries(tokens).filter(([key]) =>
+			COLOR_PREFIXES.some((prefix) => key.startsWith(prefix)),
+		),
+	);
+};
 
 const themeColors = {
-    grantcodes: filterByColorPrefixes(grantcodes),
-    wireframe: filterByColorPrefixes(wireframe),
-    todomap: filterByColorPrefixes(todomap),
-}
+	grantcodes: filterByColorPrefixes(grantcodes),
+	wireframe: filterByColorPrefixes(wireframe),
+	todomap: filterByColorPrefixes(todomap),
+};
 
 // Color Palette Component
 class ColorPalette extends LitElement {
@@ -54,19 +51,20 @@ class ColorPalette extends LitElement {
 			color: var(--g-theme-color-content-subtle, #666);
 			font-size: 0.875rem;
 		}
-	`
+	`;
 
 	static properties = {
 		theme: { type: String },
-	}
+	};
 
 	constructor() {
 		super();
-		this.theme = 'grantcodes';
+		this.theme = "grantcodes";
 	}
 
 	getColorGroups() {
-		const currentThemeColors = themeColors[this.theme] || themeColors.grantcodes;
+		const currentThemeColors =
+			themeColors[this.theme] || themeColors.grantcodes;
 		const colorGroups = {
 			neutral: {},
 			"utility-green": {},
@@ -136,7 +134,8 @@ class ColorPalette extends LitElement {
 
 	render() {
 		const colorGroups = this.getColorGroups();
-		const themeDisplay = this.theme.charAt(0).toUpperCase() + this.theme.slice(1);
+		const themeDisplay =
+			this.theme.charAt(0).toUpperCase() + this.theme.slice(1);
 
 		return html`
 			<div class="banner">
@@ -150,12 +149,12 @@ class ColorPalette extends LitElement {
 
 			${Object.entries(colorGroups).map(([groupKey, colors]) => {
 				if (Object.keys(colors).length === 0) return null;
-				
+
 				const title = groupKey
 					.split("-")
 					.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
 					.join(" ");
-				
+
 				return html`
 					<color-group
 						.title=${title}
@@ -163,10 +162,10 @@ class ColorPalette extends LitElement {
 					></color-group>
 				`;
 			})}
-		`
+		`;
 	}
 }
-customElements.define('color-palette', ColorPalette)
+customElements.define("color-palette", ColorPalette);
 
 // This default export determines where your story goes in the story list
 const meta = {

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

@@ -1,5 +1,3 @@
-@import "../../util/index.css";
-
 :where(input, textarea, select) {
 	display: block;
 	accent-color: var(--g-theme-form-input-accent-color-default);
@@ -10,37 +8,8 @@
 	background: var(--g-theme-form-color-background-default);
 	color: var(--g-theme-form-color-content-default);
 	padding: 0.5em 1em;
-	transition:
-		color 0.2s,
-		background-color 0.2s,
-		border-color 0.2s,
-		outline 0.2s;
+	transition-property: color, background-color, border-color, outline;
 	font-size: 1rem;
-
-	/* Inlined focus-ring styles from mixin */
-	outline-color: transparent;
-	outline-offset: var(--g-theme-focus-ring-offset-default);
-	outline-style: solid;
-	outline-width: var(--g-theme-focus-ring-width-default);
-}
-
-:where(input, textarea, select):focus-visible {
-	outline-color: var(--g-theme-focus-ring-color-default);
-}
-
-@media (prefers-contrast: more) {
-	:where(input, textarea, select):focus-visible {
-		outline-color: var(--g-theme-focus-ring-color-contrast);
-		box-shadow: 0 0 0
-			calc(
-				(
-					var(--g-theme-focus-ring-width-default) +
-					var(--g-theme-focus-ring-offset-default)
-				) *
-				1.5
-			)
-			var(--g-theme-focus-ring-color-contrast-shadow);
-	}
 }
 
 :where(input, textarea, select):not(textarea) {
@@ -68,7 +37,6 @@
 	border-style: dashed;
 }
 
-
 :where(input, textarea, select):disabled {
 	border-color: var(--g-theme-form-color-border-disabled);
 	background: var(--g-theme-form-color-background-disabled);
@@ -87,7 +55,7 @@
 
 :where(input, textarea, select):where(textarea) {
 	line-height: 1.5;
-	min-height: 4.3em; /* Allows 2 rows with no scrollbar */
+	min-block-size: 4.3em; /* Allows 2 rows with no scrollbar */
 	resize: vertical;
 }
 
@@ -126,8 +94,8 @@
 	display: block;
 	position: relative;
 	appearance: none;
-	width: 1.2rem;
-	height: 1.2rem;
+	inline-size: 1.2rem;
+	block-size: 1.2rem;
 	padding: 0;
 	cursor: pointer;
 }
@@ -144,9 +112,9 @@
 	font-size: 0.8rem;
 	font-weight: bold;
 	line-height: 0;
-	left: 0;
-	width: 100%;
-	top: 50%;
+	inset-inline-start: 0;
+	inline-size: 100%;
+	inset-block-start: 50%;
 	color: transparent;
 	text-align: center;
 	transition: color 0.2s;
@@ -171,8 +139,8 @@
 	display: block;
 	border-radius: 50%;
 	/* PLACEHOLDER: $radio-inner-size: 70% - convert math.div(100% - $radio-inner-size, 2) */
-	width: 70%;
-	height: 70%;
+	inline-size: 70%;
+	block-size: 70%;
 	margin: calc((100% - 70%) / 2);
 	inset: 0;
 	transition: background-color 0.2s;

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

@@ -1,3 +1,3 @@
 img {
-	height: auto;
+	block-size: auto;
 }

package/src/css/themes/grantcodes.css

@@ -1,3 +1,3 @@
-@import "../../../../style-dictionary/dist/css/grantcodes/tokens.css";
-@import "../../../../style-dictionary/dist/css/grantcodes/grantcodes.css";
-@import "../../../../style-dictionary/assets/fonts/greycliff.css";
+@import "@grantcodes/style-dictionary/grantcodes/css";
+@import "@grantcodes/style-dictionary/grantcodes/css/theme";
+@import "@grantcodes/style-dictionary/assets/fonts/greycliff";

package/src/css/themes/todomap.css

@@ -1,2 +1,3 @@
-@import "../../../../style-dictionary/dist/css/todomap/tokens.css";
-@import "../../../../style-dictionary/dist/css/todomap/todomap.css";
+@import "@grantcodes/style-dictionary/todomap/css";
+@import "@grantcodes/style-dictionary/todomap/css/theme";
+@import "@grantcodes/style-dictionary/assets/fonts/quicksand";

package/src/css/themes/wireframe.css

@@ -1,2 +1,2 @@
-@import "../../../../style-dictionary/dist/css/wireframe/tokens.css";
-@import "../../../../style-dictionary/dist/css/wireframe/wireframe.css";
+@import "@grantcodes/style-dictionary/wireframe/css";
+@import "@grantcodes/style-dictionary/wireframe/css/theme";

package/src/css/tokens.stories.js

@@ -1,13 +1,13 @@
-import grantcodes from '@grantcodes/style-dictionary/grantcodes/json'
-import wireframe from '@grantcodes/style-dictionary/wireframe/json'
-import todomap from '@grantcodes/style-dictionary/todomap/json'
-import { LitElement, html, css } from 'lit'
+import grantcodes from "@grantcodes/style-dictionary/grantcodes/json";
+import wireframe from "@grantcodes/style-dictionary/wireframe/json";
+import todomap from "@grantcodes/style-dictionary/todomap/json";
+import { LitElement, html, css } from "lit";
 
 const allTokens = {
 	grantcodes,
 	wireframe,
 	todomap,
-}
+};
 
 // Token List Component
 class TokenList extends LitElement {
@@ -96,31 +96,34 @@ class TokenList extends LitElement {
 			color: var(--g-theme-color-content-subtle, #666);
 			word-break: break-all;
 		}
-	`
+	`;
 
 	static properties = {
 		theme: { type: String },
-	}
+	};
 
 	constructor() {
 		super();
-		this.theme = 'grantcodes';
+		this.theme = "grantcodes";
 	}
 
 	formatValue(value) {
 		if (value === null || value === undefined) {
-			return String(value)
+			return String(value);
 		}
-		if (typeof value === 'object') {
-			return JSON.stringify(value, null, 2)
+		if (typeof value === "object") {
+			return JSON.stringify(value, null, 2);
 		}
-		return String(value)
+		return String(value);
 	}
 
 	render() {
 		const currentThemeTokens = allTokens[this.theme] || allTokens.grantcodes;
-		const tokenEntries = Object.entries(currentThemeTokens).sort(([a], [b]) => a.localeCompare(b));
-		const themeDisplay = this.theme.charAt(0).toUpperCase() + this.theme.slice(1);
+		const tokenEntries = Object.entries(currentThemeTokens).sort(([a], [b]) =>
+			a.localeCompare(b),
+		);
+		const themeDisplay =
+			this.theme.charAt(0).toUpperCase() + this.theme.slice(1);
 
 		return html`
 			<div class="banner">
@@ -143,21 +146,23 @@ class TokenList extends LitElement {
 						</tr>
 					</thead>
 					<tbody>
-						${tokenEntries.map(([tokenName, value]) => html`
+						${tokenEntries.map(
+							([tokenName, value]) => html`
 							<tr>
 								<td class="token-name">--${tokenName}</td>
 								<td class="token-value">${this.formatValue(value)}</td>
 								<td style="background-color: var(--${tokenName});"></td>
 							</tr>
-						`)}
+						`,
+						)}
 					</tbody>
 				</table>
 			</div>
-		`
+		`;
 	}
 }
 
-customElements.define('token-list', TokenList)
+customElements.define("token-list", TokenList);
 
 // This default export determines where your story goes in the story list
 const meta = {
@@ -170,9 +175,9 @@ const meta = {
 			},
 		},
 	},
-}
+};
 
-export default meta
+export default meta;
 
 // Main tokens story that responds to theme changes
 export const AllTokens = {
@@ -180,4 +185,4 @@ export const AllTokens = {
 		const theme = context.globals?.theme || "grantcodes";
 		return html`<token-list .theme=${theme}></token-list>`;
 	},
-}
+};

package/src/css/typography.css

@@ -1,5 +1,3 @@
-@import "./util/index.css";
-
 html {
 	font-family: var(--g-theme-typography-body-default-font-family);
 	line-height: var(--g-theme-typography-body-default-line-height);
@@ -49,7 +47,7 @@ p {
 pre {
 	font-family: var(--g-typography-font-family-system);
 	line-height: 1.2;
-	width: 100%;
+	inline-size: 100%;
 	overflow: auto;
 	border-radius: var(--g-theme-border-radius-md);
 	/* PLACEHOLDER: u.shadow(0) - manual conversion needed */

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

@@ -0,0 +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);
+	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);
+}
+
+@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);
+		box-shadow: 0 0 0
+			calc(
+				(
+					var(--g-theme-focus-ring-width-default) +
+					var(--g-theme-focus-ring-offset-default)
+				) *
+				1.5
+			)
+			var(--g-theme-focus-ring-color-contrast-shadow);
+	}
+}

package/src/css/util/index.css

@@ -1,2 +1 @@
-@import "./mixins.css";
-@import "./functions.css";
+@import "./focus-ring.css";

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

@@ -0,0 +1,34 @@
+import { css } from "lit";
+
+export const focusRingStyles = css`
+  .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);
+    transition-properties: 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);
+  }
+
+  @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);
+      box-shadow: 0 0 0
+        calc(
+          (
+              var(--g-theme-focus-ring-width-default) +
+                var(--g-theme-focus-ring-offset-default)
+            ) *
+            1.5
+        )
+        var(--g-theme-focus-ring-color-contrast-shadow);
+    }
+  }
+`;

package/src/main.js

@@ -1,17 +1,26 @@
+export * from "./components/accordion/index.js";
 export * from "./components/avatar/index.js";
 export * from "./components/button/index.js";
 export * from "./components/button-group/index.js";
 export * from "./components/card/index.js";
 export * from "./components/code-preview/index.js";
 export * from "./components/container/index.js";
+export * from "./components/cta/index.js";
 export * from "./components/dialog/index.js";
 export * from "./components/dropzone/index.js";
+export * from "./components/feature-list/index.js";
 export * from "./components/form-field/index.js";
 export * from "./components/gallery/index.js";
+export * from "./components/hero/index.js";
 export * from "./components/icon/index.js";
 export * from "./components/loading/index.js";
+export * from "./components/logo-cloud/index.js";
+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/pricing/index.js";
+export * from "./components/stats/index.js";
 export * from "./components/tabs/index.js";
+export * from "./components/testimonials/index.js";
 export * from "./components/tooltip/index.js";
-

package/src/pages/agency.stories.js

@@ -0,0 +1,164 @@
+import { html } from "lit";
+import "../components/app-bar/app-bar.js";
+import "../components/button/button.js";
+import "../components/hero/hero.js";
+import "../components/media-text/media-text.js";
+import "../components/feature-list/feature-list.js";
+import "../components/cta/cta.js";
+import "../components/testimonials/testimonials.js";
+import "../components/footer/footer.js";
+
+const meta = {
+	title: "Pages/Agency",
+	parameters: {
+		layout: "fullscreen",
+	},
+};
+
+export default meta;
+
+const footerContent = html`
+	<grantcodes-footer-column>
+		<h3>Studio North</h3>
+		<p>A design and engineering studio building digital products that last.</p>
+	</grantcodes-footer-column>
+
+	<grantcodes-footer-column>
+		<h3>Work</h3>
+		<ul>
+			<li><a href="/work">Case Studies</a></li>
+			<li><a href="/services">Services</a></li>
+			<li><a href="/process">Our Process</a></li>
+		</ul>
+	</grantcodes-footer-column>
+
+	<grantcodes-footer-column>
+		<h3>Studio</h3>
+		<ul>
+			<li><a href="/about">About Us</a></li>
+			<li><a href="/team">Team</a></li>
+			<li><a href="/careers">Careers</a></li>
+			<li><a href="/contact">Contact</a></li>
+		</ul>
+	</grantcodes-footer-column>
+`;
+
+/**
+ * Agency / studio marketing page. Uses media-text blocks to walk through
+ * the studio's offering, with a CTA section and testimonials from clients.
+ */
+export const Default = {
+	render: () => html`
+		<grantcodes-app-bar>
+			<a slot="logo" href="/" style="font-weight: 700; font-size: 1.25rem; text-decoration: none; color: inherit;">
+				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>
+			</div>
+			<div slot="actions">
+				<grantcodes-button>Get in touch</grantcodes-button>
+			</div>
+		</grantcodes-app-bar>
+
+		<grantcodes-hero
+			title="We design and build digital products people actually want to use"
+			subtitle="Studio North is a small, focused team of designers and engineers. We partner with founders and product teams to turn ideas into polished, scalable software."
+			button="See our work"
+			href="/work"
+			size="lg"
+		></grantcodes-hero>
+
+		<grantcodes-feature-list
+			title="What we do"
+			columns="3"
+			items=${JSON.stringify([
+				{
+					title: "Product design",
+					description:
+						"UX research, interaction design, and visual design from concept to delivery.",
+					icon: "pen-tool",
+				},
+				{
+					title: "Web development",
+					description:
+						"Fast, accessible front-ends built with modern tooling and a focus on longevity.",
+					icon: "code",
+				},
+				{
+					title: "Brand identity",
+					description:
+						"Naming, logo, and visual language for startups that want to stand out from day one.",
+					icon: "layers",
+				},
+			])}
+		></grantcodes-feature-list>
+
+		<grantcodes-media-text
+			title="We start by understanding the problem, not the brief"
+			text="Before we open Figma, we spend time with your users, your data, and your team. Good design solves real problems — that only happens when we deeply understand the context. Our discovery phase isn't a box-ticking exercise; it's where the real work starts."
+			media=${JSON.stringify({ src: "https://placehold.co/640x480?text=Discovery+Workshop", alt: "A team working through a discovery workshop on a whiteboard", kind: "image" })}
+			cta=${JSON.stringify({ label: "Our process", href: "/process" })}
+		></grantcodes-media-text>
+
+		<grantcodes-media-text
+			title="Design and engineering working side by side"
+			text="We don't throw designs over a wall. Our designers and engineers work in the same room (or the same Slack channel) from day one. That means fewer surprises, faster iteration, and a product that actually looks like the designs."
+			media=${JSON.stringify({ src: "https://placehold.co/640x480?text=Design+%26+Eng", alt: "Designers and engineers collaborating on a project", kind: "image" })}
+			cta=${JSON.stringify({ label: "How we work", href: "/about" })}
+			reverse
+		></grantcodes-media-text>
+
+		<grantcodes-media-text
+			title="We ship, then we stick around"
+			text="Launch is not the finish line. We offer ongoing retainers for teams who want a trusted design and engineering partner after go-live — whether that's iterating on feedback, scaling the product, or training your internal team."
+			media=${JSON.stringify({ src: "https://placehold.co/640x480?text=Ongoing+Support", alt: "A chart showing continuous product iteration over time", kind: "image" })}
+			cta=${JSON.stringify({ label: "Engagement options", href: "/services" })}
+		></grantcodes-media-text>
+
+		<grantcodes-testimonials
+			title="From our clients"
+			layout="list"
+			items=${JSON.stringify([
+				{
+					quote:
+						"Studio North turned a very messy brief into a product that exceeded what we imagined. They pushed back in the right places and delivered something genuinely special.",
+					name: "Leo Hartmann",
+					role: "Founder",
+					company: "Archvault",
+					avatar: "https://i.pravatar.cc/80?img=53",
+				},
+				{
+					quote:
+						"Their process is tight. We always knew what was happening, what was coming next, and why. That clarity is rare in agency relationships.",
+					name: "Chloe Bergstrom",
+					role: "VP Product",
+					company: "Meridian Health",
+					avatar: "https://i.pravatar.cc/80?img=25",
+				},
+			])}
+		></grantcodes-testimonials>
+
+		<grantcodes-cta
+			eyebrow="Let's talk"
+			title="Have a project in mind?"
+			text="We take on a small number of projects each quarter so we can give each one the attention it deserves. If you're building something meaningful, we'd love to hear about it."
+			primary-action=${JSON.stringify({ label: "Start a conversation", href: "/contact" })}
+			secondary-action=${JSON.stringify({ label: "See case studies", href: "/work" })}
+			align="center"
+		></grantcodes-cta>
+
+		<grantcodes-footer columns="3">
+			${footerContent}
+			<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);">
+				<a href="/privacy">Privacy</a>
+				<a href="/terms">Terms</a>
+			</div>
+		</grantcodes-footer>
+	`,
+};