@grantcodes/ui 2.0.0-beta4 → 2.0.2

package/src/css/elements.stories.js

@@ -0,0 +1,108 @@
+import { html } from "lit";
+
+// This default export determines where your story goes in the story list
+const meta = {
+	title: "Styles/Elements",
+	// component: "grantcodes-elements",
+};
+
+export default meta;
+
+export const Image = {
+	args: {
+		width: 400,
+		height: 400,
+	},
+	render: ({ width, height }) =>
+		html`<img
+      width="${width}"
+      height="${height}"
+      src="https://placehold.co/${width}x${height}"
+    />`,
+};
+
+export const Figure = {
+	args: {},
+	render: () =>
+		html`<figure>
+      <img width="800" height="600" src="https://placehold.co/800x600" />
+      <figcaption>This is a caption</figcaption>
+    </figure>`,
+};
+
+export const Link = {
+	args: {
+		text: "This is a link",
+	},
+	render: ({ text }) => html`<a href="#">${text}</a>`,
+};
+
+export const Button = {
+	args: {
+		text: "This is a button",
+		disabled: false,
+	},
+	render: ({ text }) => html`<button>${text}</button>`,
+};
+
+export const Input = {
+	args: {
+		placeholder: "This is an input",
+	},
+	render: ({ placeholder }) => html`<input placeholder="${placeholder}" />`,
+};
+
+export const Label = {
+	args: {
+		text: "This is a label",
+	},
+	render: ({ text }) => html`<label>${text}</label>`,
+};
+
+export const Select = {
+	args: {},
+	render: () => html`<select>
+    <option value="1">Option 1</option>
+    <option value="2">Option 2</option>
+    <option value="3">Option 3</option>
+    <option value="4">Option 4</option>
+    <option value="5">Option 5</option>
+  </select>`,
+};
+
+export const Textarea = {
+	args: {
+		placeholder: "This is a textarea",
+	},
+	render: ({ placeholder }) =>
+		html`<textarea placeholder="${placeholder}"></textarea>`,
+};
+
+export const Checkbox = {
+	args: {},
+	render: () => html`<input type="checkbox" />`,
+};
+
+export const Radio = {
+	args: {
+		text: "This is a radio",
+	},
+	render: () => html`<input type="radio" />`,
+};
+
+export const DetailsSummary = {
+	args: {
+		exclusive: false,
+	},
+	argTypes: {},
+	render: ({ exclusive }) => html`
+		<details name=${exclusive ? "accordion" : ""}>
+			<summary>Summary</summary>
+			Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero, ratione ad Suscipit, impedit ipsa sed soluta sapiente totam Voluptatibus, corporis.
+		</details>
+		<details name=${exclusive ? "accordion" : ""}>
+			<summary>Summary</summary>
+			Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero, ratione ad Suscipit, impedit ipsa sed soluta sapiente totam Voluptatibus, corporis.
+		</details>
+	`,
+};

package/src/css/helpers.css

@@ -0,0 +1,16 @@
+.screen-reader-text {
+	display: none !important;
+}
+
+.hide-print {
+	@media print {
+		display: none !important;
+	}
+}
+
+.print-only {
+	display: none !important;
+	@media print {
+		display: block !important;
+	}
+}

package/src/css/themes/grantcodes.css

@@ -0,0 +1,3 @@
+@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

@@ -0,0 +1,2 @@
+@import "@grantcodes/style-dictionary/todomap/css";
+@import "@grantcodes/style-dictionary/todomap/css/theme";

package/src/css/themes/wireframe.css

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

package/src/css/tokens.stories.js

@@ -0,0 +1,183 @@
+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 {
+	static styles = css`
+		:host {
+			display: block;
+			padding: 2rem;
+			background: var(--g-theme-color-background-default, #fff);
+			color: var(--g-theme-color-content-default, #333);
+		}
+
+		.banner {
+			margin-bottom: 2rem;
+			padding: 1rem;
+			background: var(--g-theme-color-background-subtle, #f5f5f5);
+			border-radius: 0.5rem;
+			border: 1px solid var(--g-theme-color-border-default, #ccc);
+		}
+
+		.theme-title {
+			margin: 0;
+			font-weight: 600;
+			color: var(--g-theme-color-content-default, #333);
+			font-size: 1rem;
+		}
+
+		.theme-hint {
+			margin: 0.5rem 0 0 0;
+			color: var(--g-theme-color-content-subtle, #666);
+			font-size: 0.875rem;
+		}
+
+		.theme-section {
+			margin-bottom: 3rem;
+		}
+
+		.section-title {
+			margin: 0 0 1rem 0;
+			font-weight: 600;
+			font-size: 1.5rem;
+			color: var(--g-theme-color-content-default, #333);
+			padding-bottom: 0.5rem;
+			border-bottom: 2px solid var(--g-theme-color-border-default, #ccc);
+		}
+
+		.token-count {
+			margin: 0.5rem 0 1rem 0;
+			color: var(--g-theme-color-content-subtle, #666);
+			font-size: 0.875rem;
+		}
+
+		.token-table {
+			width: 100%;
+			border-collapse: collapse;
+			margin-top: 1rem;
+		}
+
+		.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);
+			font-weight: 600;
+			font-size: 0.875rem;
+			color: var(--g-theme-color-content-default, #333);
+		}
+
+		.token-table td {
+			padding: 0.75rem;
+			border-bottom: 1px solid var(--g-theme-color-border-default, #e0e0e0);
+			font-size: 0.875rem;
+		}
+
+		.token-table tr:hover {
+			background: var(--g-theme-color-background-subtle, #f9f9f9);
+		}
+
+		.token-name {
+			font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+			color: var(--g-theme-color-content-default, #333);
+			font-weight: 500;
+		}
+
+		.token-value {
+			font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+			color: var(--g-theme-color-content-subtle, #666);
+			word-break: break-all;
+		}
+	`
+
+	static properties = {
+		theme: { type: String },
+	}
+
+	constructor() {
+		super();
+		this.theme = 'grantcodes';
+	}
+
+	formatValue(value) {
+		if (value === null || value === undefined) {
+			return String(value)
+		}
+		if (typeof value === 'object') {
+			return JSON.stringify(value, null, 2)
+		}
+		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);
+
+		return html`
+			<div class="banner">
+				<p class="theme-title">
+					<strong>Current Theme:</strong> ${themeDisplay}
+				</p>
+				<p class="theme-hint">
+					Use the theme picker in the toolbar to switch between themes.
+				</p>
+			</div>
+
+			<div class="theme-section">
+				<h2 class="section-title">${themeDisplay} Tokens</h2>
+				<div class="token-count">${tokenEntries.length} tokens</div>
+				<table class="token-table">
+					<thead>
+						<tr>
+							<th>Token Name</th>
+							<th>Value</th>
+						</tr>
+					</thead>
+					<tbody>
+						${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)
+
+// This default export determines where your story goes in the story list
+const meta = {
+	title: "Styles/Tokens",
+	parameters: {
+		docs: {
+			description: {
+				component:
+					"Complete list of design tokens. Tokens update based on the selected theme in the Storybook toolbar.",
+			},
+		},
+	},
+}
+
+export default meta
+
+// Main tokens story that responds to theme changes
+export const AllTokens = {
+	render: (args, context) => {
+		const theme = context.globals?.theme || "grantcodes";
+		return html`<token-list .theme=${theme}></token-list>`;
+	},
+}

package/src/css/typography.css

@@ -0,0 +1,64 @@
+@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);
+	font-size: var(--g-typography-font-size-16);
+	font-weight: var(--g-theme-typography-body-default-font-weight);
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+	line-height: var(--g-theme-typography-headline-default-line-height);
+	font-weight: var(--g-theme-typography-headline-default-font-weight);
+	text-wrap: balance;
+}
+
+h1 {
+	font-size: var(--g-typography-font-size-48);
+}
+
+h2 {
+	font-size: var(--g-typography-font-size-24);
+}
+
+h3 {
+	font-size: var(--g-typography-font-size-20);
+}
+
+h4 {
+	font-size: var(--g-typography-font-size-16);
+}
+
+h5 {
+	font-size: var(--g-typography-font-size-14);
+}
+
+h6 {
+	font-size: var(--g-typography-font-size-12);
+}
+
+p {
+	text-wrap: pretty;
+}
+
+pre {
+	font-family: var(--g-typography-font-family-system);
+	line-height: 1.2;
+	width: 100%;
+	overflow: auto;
+	border-radius: var(--g-theme-border-radius-md);
+	/* PLACEHOLDER: u.shadow(0) - manual conversion needed */
+	box-shadow: var(--g-theme-box-shadow-sm);
+	font-size: var(--g-typography-font-size-16);
+	font-weight: 400;
+	padding: 1rem;
+}
+
+mark {
+	background-color: var(--g-color-neutral-300);
+}

package/src/css/typography.stories.js

@@ -0,0 +1,179 @@
+import { html } from "lit";
+
+// This default export determines where your story goes in the story list
+const meta = {
+	title: "Styles/Typography",
+	// component: "grantcodes-typography",
+};
+
+export default meta;
+
+export const Heading1 = {
+	args: {
+		text: "Heading 1",
+	},
+	render: ({ text }) => html`<h1>${text}</h1>`,
+};
+
+export const Heading2 = {
+	args: {
+		text: "Heading 2",
+	},
+	render: ({ text }) => html`<h2>${text}</h2>`,
+};
+
+export const Heading3 = {
+	args: {
+		text: "Heading 3",
+	},
+	render: ({ text }) => html`<h3>${text}</h3>`,
+};
+
+export const Heading4 = {
+	args: {
+		text: "Heading 4",
+	},
+	render: ({ text }) => html`<h4>${text}</h4>`,
+};
+
+export const Heading5 = {
+	args: {
+		text: "Heading 5",
+	},
+	render: ({ text }) => html`<h5>${text}</h5>`,
+};
+
+export const Heading6 = {
+	args: {
+		text: "Heading 6",
+	},
+	render: ({ text }) => html`<h6>${text}</h6>`,
+};
+
+export const Paragraph = {
+	args: {
+		text: "This is a paragraph.",
+	},
+	render: ({ text }) => html`<p>${text}</p>`,
+};
+
+export const Emphasis = {
+	args: {
+		text: "This is emphasized text.",
+	},
+	render: ({ text }) => html`<p><em>${text}</em></p>`,
+};
+
+export const Strong = {
+	args: {
+		text: "This is strong text.",
+	},
+	render: ({ text }) => html`<p><strong>${text}</strong></p>`,
+};
+
+export const Small = {
+	args: {
+		text: "This is smallprint.",
+	},
+	render: ({ text }) => html`<p><small>${text}</small></p>`,
+};
+
+export const Deleted = {
+	args: {
+		text: "This is deleted text.",
+	},
+	render: ({ text }) => html`<p><del>${text}</del></p>`,
+};
+
+export const Inserted = {
+	args: {
+		text: "This is inserted text.",
+	},
+	render: ({ text }) => html`<p><ins>${text}</ins></p>`,
+};
+
+export const Code = {
+	args: {
+		text: "This is code.",
+	},
+	render: ({ text }) => html`<p><code>${text}</code></p>`,
+};
+
+export const Subscript = {
+	args: {
+		text: "This is subscript text.",
+	},
+	render: ({ text }) => html`<p><sub>${text}</sub></p>`,
+};
+
+export const Superscript = {
+	args: {
+		text: "This is superscript text.",
+	},
+	render: ({ text }) => html`<p><sup>${text}</sup></p>`,
+};
+
+export const Mark = {
+	args: {
+		text: "This is marked text.",
+	},
+	render: ({ text }) => html`<p><mark>${text}</mark></p>`,
+};
+
+export const OrderedList = {
+	args: {
+		items: ["Item 1", "Item 2"],
+	},
+	render: ({ items }) => html`
+    <ol>
+      ${items.map((item) => html`<li>${item}</li>`)}
+    </ol>
+  `,
+};
+
+export const UnorderedList = {
+	args: {
+		items: ["Item 1", "Item 2"],
+	},
+	render: ({ items }) => html`
+    <ul>
+      ${items.map((item) => html`<li>${item}</li>`)}
+    </ul>
+  `,
+};
+
+export const DescriptionDetails = {
+	args: {
+		items: [
+			{ term: "Term 1", description: "Description 1" },
+			{ term: "Term 2", description: "Description 2" },
+		],
+	},
+	render: ({ items }) => html`
+    <dl>
+      ${items.map(
+				(item) => html`
+          <dt>${item.term}</dt>
+          <dd>${item.description}</dd>
+        `,
+			)}
+    </dl>
+  `,
+};
+
+export const Pre = {
+	args: {
+		text: "This is a pre block.",
+	},
+	render: ({ text }) => html`<pre>${text}</pre>`,
+};
+
+export const Blockquote = {
+	args: {
+		text: "This is a blockquote.",
+	},
+	render: ({ text }) => html`<blockquote>
+    <p>${text}</p>
+    <footer><cite>Cite info</cite></footer>
+  </blockquote>`,
+};

package/src/css/util/functions.css

@@ -0,0 +1,16 @@
+/* PLACEHOLDER: shadow() function conversion needed */
+/* Original SCSS:
+@function shadow($level: 0) {
+  $multiplier: $level + 1;
+  @return 0.1rem * $multiplier 0.2rem * $multiplier 0.4rem * $multiplier
+    rgba(0, 0, 0, 0.1 * $multiplier);
+}
+*/
+
+/* Manual conversion needed - consider using CSS custom properties for different shadow levels */
+:root {
+	--shadow-0: 0.1rem 0.2rem 0.4rem rgba(0, 0, 0, 0.1);
+	--shadow-1: 0.2rem 0.4rem 0.8rem rgba(0, 0, 0, 0.2);
+	--shadow-2: 0.3rem 0.6rem 1.2rem rgba(0, 0, 0, 0.3);
+	--shadow-3: 0.4rem 0.8rem 1.6rem rgba(0, 0, 0, 0.4);
+}

package/src/css/util/index.css

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

package/src/css/util/mixins.css

@@ -0,0 +1,63 @@
+/* Component base styles - inlined from mixin */
+*,
+*::before,
+*::after {
+	box-sizing: border-box;
+}
+
+:host {
+	display: block;
+}
+
+/* PLACEHOLDER: custom-scrollbar mixin conversion needed */
+/* Original SCSS:
+@mixin custom-scrollbar($size: 0.5rem) {
+  &::-webkit-scrollbar {
+    width: $size;
+    height: $size;
+  }
+
+  &::-webkit-scrollbar-track {
+    background-color: rgba(0, 0, 0, 0.05);
+    border-radius: math.div($size, 2);
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border-radius: math.div($size, 2);
+    min-height: 2rem;
+    background-color: rgba(0, 0, 0, 0.3);
+  }
+}
+*/
+
+/* Manual conversion needed - convert math.div($size, 2) to calc($size / 2) */
+.custom-scrollbar {
+	/* PLACEHOLDER: Add manual conversion here */
+}
+
+/* Focus ring styles - using tier-3 component tokens */
+:host {
+	outline-color: transparent;
+	outline-offset: var(--g-theme-focus-ring-offset-default);
+	outline-style: solid;
+	outline-width: var(--g-theme-focus-ring-width-default);
+}
+
+:host:focus-visible {
+	outline-color: var(--g-theme-focus-ring-color-default);
+}
+
+@media (prefers-contrast: more) {
+	:host: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);
+	}
+}

package/src/icons.js

@@ -0,0 +1,3 @@
+// Map icons to Lucide icons
+
+export * from "lucide-static";

package/src/lib/classnames.js

@@ -0,0 +1,61 @@
+// classnames npm package moved to a local dependency
+
+var hasOwn = {}.hasOwnProperty;
+
+export function cx() {
+	var classes = "";
+	var i;
+	var arg;
+
+	for (i = 0; i < arguments.length; i++) {
+		arg = arguments[i];
+		if (arg) {
+			classes = appendClass(classes, parseValue(arg));
+		}
+	}
+
+	return classes;
+}
+
+function parseValue(arg) {
+	if (typeof arg === "string" || typeof arg === "number") {
+		return arg;
+	}
+
+	if (typeof arg !== "object") {
+		return "";
+	}
+
+	if (Array.isArray(arg)) {
+		return cx.apply(null, arg);
+	}
+
+	if (
+		arg.toString !== Object.prototype.toString &&
+		!arg.toString.toString().includes("[native code]")
+	) {
+		return arg.toString();
+	}
+
+	var classes = "";
+
+	for (var key in arg) {
+		if (hasOwn.call(arg, key) && arg[key]) {
+			classes = appendClass(classes, key);
+		}
+	}
+
+	return classes;
+}
+
+function appendClass(value, newClass) {
+	if (!newClass) {
+		return value;
+	}
+
+	if (value) {
+		return `${value} ${newClass}`;
+	}
+
+	return value + newClass;
+}