@grantcodes/ui 2.15.7 → 2.16.0

package/src/css/colors.stories.js

@@ -1,29 +1,29 @@
-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 todomap from '@grantcodes/style-dictionary/todomap/json';
+import wireframe from '@grantcodes/style-dictionary/wireframe/json';
+import { css, html, LitElement } 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 {
-	static styles = css`
+  static styles = css`
 		:host {
 			display: block;
 			padding: 2rem;
@@ -53,91 +53,89 @@ class ColorPalette extends LitElement {
 		}
 	`;
 
-	static properties = {
-		theme: { type: String },
-	};
-
-	constructor() {
-		super();
-		this.theme = "grantcodes";
-	}
-
-	getColorGroups() {
-		const currentThemeColors =
-			themeColors[this.theme] || themeColors.grantcodes;
-		const colorGroups = {
-			neutral: {},
-			"utility-green": {},
-			"utility-blue": {},
-			"utility-yellow": {},
-			"utility-red": {},
-			"brand-purple": {},
-			transparent: {},
-			"theme-background": {},
-			"theme-border": {},
-			"theme-content": {},
-		};
-
-		// Group colors from the filtered theme colors
-		Object.entries(currentThemeColors).forEach(([tokenName, value]) => {
-			let key = tokenName;
-			if (tokenName.startsWith("g-color-")) {
-				key = tokenName.replace("g-color-", "");
-			} else if (tokenName.startsWith("g-theme-color-")) {
-				key = tokenName.replace("g-theme-color-", "");
-				const parts = key.split("-");
-				if (parts.length >= 2) {
-					const category = parts[0];
-					const name = parts.slice(1).join("-");
-					if (category === "background") {
-						colorGroups["theme-background"][name] = { value, tokenName };
-					} else if (category === "border") {
-						colorGroups["theme-border"][name] = { value, tokenName };
-					} else if (category === "content") {
-						colorGroups["theme-content"][name] = { value, tokenName };
-					}
-					return;
-				}
-			}
-
-			const parts = key.split("-");
-
-			if (parts[0] === "neutral") {
-				const name = parts.slice(1).join("-");
-				colorGroups.neutral[name] = { value, tokenName };
-			} else if (parts[0] === "utility") {
-				const color = parts[1];
-				const name = parts.slice(2).join("-");
-				if (color === "green") {
-					colorGroups["utility-green"][name] = { value, tokenName };
-				} else if (color === "blue") {
-					colorGroups["utility-blue"][name] = { value, tokenName };
-				} else if (color === "yellow") {
-					colorGroups["utility-yellow"][name] = { value, tokenName };
-				} else if (color === "red") {
-					colorGroups["utility-red"][name] = { value, tokenName };
-				}
-			} else if (parts[0] === "brand") {
-				const color = parts[1];
-				const name = parts.slice(2).join("-");
-				if (color === "purple") {
-					colorGroups["brand-purple"][name] = { value, tokenName };
-				}
-			} else if (parts[0] === "transparent") {
-				const name = parts[1];
-				colorGroups.transparent[name] = { value, tokenName };
-			}
-		});
-
-		return colorGroups;
-	}
-
-	render() {
-		const colorGroups = this.getColorGroups();
-		const themeDisplay =
-			this.theme.charAt(0).toUpperCase() + this.theme.slice(1);
-
-		return html`
+  static properties = {
+    theme: { type: String },
+  };
+
+  constructor() {
+    super();
+    this.theme = 'grantcodes';
+  }
+
+  getColorGroups() {
+    const currentThemeColors = themeColors[this.theme] || themeColors.grantcodes;
+    const colorGroups = {
+      neutral: {},
+      'utility-green': {},
+      'utility-blue': {},
+      'utility-yellow': {},
+      'utility-red': {},
+      'brand-purple': {},
+      transparent: {},
+      'theme-background': {},
+      'theme-border': {},
+      'theme-content': {},
+    };
+
+    // Group colors from the filtered theme colors
+    Object.entries(currentThemeColors).forEach(([tokenName, value]) => {
+      let key = tokenName;
+      if (tokenName.startsWith('g-color-')) {
+        key = tokenName.replace('g-color-', '');
+      } else if (tokenName.startsWith('g-theme-color-')) {
+        key = tokenName.replace('g-theme-color-', '');
+        const parts = key.split('-');
+        if (parts.length >= 2) {
+          const category = parts[0];
+          const name = parts.slice(1).join('-');
+          if (category === 'background') {
+            colorGroups['theme-background'][name] = { value, tokenName };
+          } else if (category === 'border') {
+            colorGroups['theme-border'][name] = { value, tokenName };
+          } else if (category === 'content') {
+            colorGroups['theme-content'][name] = { value, tokenName };
+          }
+          return;
+        }
+      }
+
+      const parts = key.split('-');
+
+      if (parts[0] === 'neutral') {
+        const name = parts.slice(1).join('-');
+        colorGroups.neutral[name] = { value, tokenName };
+      } else if (parts[0] === 'utility') {
+        const color = parts[1];
+        const name = parts.slice(2).join('-');
+        if (color === 'green') {
+          colorGroups['utility-green'][name] = { value, tokenName };
+        } else if (color === 'blue') {
+          colorGroups['utility-blue'][name] = { value, tokenName };
+        } else if (color === 'yellow') {
+          colorGroups['utility-yellow'][name] = { value, tokenName };
+        } else if (color === 'red') {
+          colorGroups['utility-red'][name] = { value, tokenName };
+        }
+      } else if (parts[0] === 'brand') {
+        const color = parts[1];
+        const name = parts.slice(2).join('-');
+        if (color === 'purple') {
+          colorGroups['brand-purple'][name] = { value, tokenName };
+        }
+      } else if (parts[0] === 'transparent') {
+        const name = parts[1];
+        colorGroups.transparent[name] = { value, tokenName };
+      }
+    });
+
+    return colorGroups;
+  }
+
+  render() {
+    const colorGroups = this.getColorGroups();
+    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}
@@ -148,44 +146,44 @@ class ColorPalette extends LitElement {
 			</div>
 
 			${Object.entries(colorGroups).map(([groupKey, colors]) => {
-				if (Object.keys(colors).length === 0) return null;
+        if (Object.keys(colors).length === 0) return null;
 
-				const title = groupKey
-					.split("-")
-					.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
-					.join(" ");
+        const title = groupKey
+          .split('-')
+          .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+          .join(' ');
 
-				return html`
+        return html`
 					<color-group
 						.title=${title}
 						.colors=${colors}
 					></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 = {
-	title: "Styles/Colors",
-	parameters: {
-		docs: {
-			description: {
-				component:
-					"Color palette from the design system. Colors update based on the selected theme in the Storybook toolbar.",
-			},
-		},
-	},
+  title: 'Styles/Colors',
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Color palette from the design system. Colors update based on the selected theme in the Storybook toolbar.',
+      },
+    },
+  },
 };
 
 export default meta;
 
 // Main colors story that responds to theme changes
 export const AllColors = {
-	render: (args, context) => {
-		const theme = context.globals?.theme || "grantcodes";
-		return html`<color-palette .theme=${theme}></color-palette>`;
-	},
+  render: (args, context) => {
+    const theme = context.globals?.theme || 'grantcodes';
+    return html`<color-palette .theme=${theme}></color-palette>`;
+  },
 };

package/src/css/elements/a.css

@@ -1,50 +1,50 @@
 :where(a) {
-	color: var(--g-link-color-content-default);
-	text-decoration: underline;
-	transition:
-		color 0.2s,
-		opacity 0.2s;
+  color: var(--g-link-color-content-default);
+  text-decoration: underline;
+  transition:
+    color 0.2s,
+    opacity 0.2s;
 }
 
 :where(a:visited) {
-	color: var(--g-link-color-content-visited);
-	opacity: 0.6;
+  color: var(--g-link-color-content-visited);
+  opacity: 0.6;
 }
 
 :where(a:hover),
 :where(a:focus-visible) {
-	opacity: 1;
-	color: var(--g-link-color-content-hover);
-	text-decoration: underline wavy;
+  opacity: 1;
+  color: var(--g-link-color-content-hover);
+  text-decoration: underline wavy;
 }
 
 :where(a:active) {
-	color: var(--g-link-color-content-active);
+  color: var(--g-link-color-content-active);
 }
 
 /* External links - special styling for links opening in new windows */
 :where(a[target="_blank"]::after),
 :where(a[rel~="external"]::after) {
-	content: "↗";
-	display: inline-block;
-	margin-inline-start: 0.25em;
-	font-size: 0.85em;
-	opacity: 0.7;
-	vertical-align: super;
-	line-height: 1;
+  content: "↗";
+  display: inline-block;
+  margin-inline-start: 0.25em;
+  font-size: 0.85em;
+  opacity: 0.7;
+  vertical-align: super;
+  line-height: 1;
 }
 
 /* Alternative: Use :external pseudo-class when supported */
 /* biome-ignore lint/correctness/noUnknownPseudoClass: :external is a future CSS feature */
 @supports selector(:external) {
-	/* biome-ignore lint/correctness/noUnknownPseudoClass: :external is a future CSS feature */
-	:where(a:external::after) {
-		content: "↗";
-		display: inline-block;
-		margin-inline-start: 0.25em;
-		font-size: 0.85em;
-		opacity: 0.7;
-		vertical-align: super;
-		line-height: 1;
-	}
+  /* biome-ignore lint/correctness/noUnknownPseudoClass: :external is a future CSS feature */
+  :where(a:external::after) {
+    content: "↗";
+    display: inline-block;
+    margin-inline-start: 0.25em;
+    font-size: 0.85em;
+    opacity: 0.7;
+    vertical-align: super;
+    line-height: 1;
+  }
 }

package/src/css/elements/forms/button.css

@@ -11,5 +11,5 @@ input[type='submit'] {
 /* Manual conversion needed - inline button styles or use CSS custom properties */
 button,
 input[type="submit"] {
-	/* PLACEHOLDER: Add button styles here */
+  /* PLACEHOLDER: Add button styles here */
 }

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

@@ -1,151 +1,151 @@
 :where(input, textarea, select) {
-	display: block;
-	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-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-typography-body-font-size);
+  display: block;
+  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-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-typography-body-font-size);
 }
 
 :where(input, textarea, select):not(textarea) {
-	line-height: 1.1;
+  line-height: 1.1;
 }
 
 :where(input, textarea, select):hover {
-	border-color: var(--g-form-color-border-hover);
-	color: var(--g-form-color-content-hover);
-	background: var(--g-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-form-color-border-focus);
-	color: var(--g-form-color-content-focus);
-	background: var(--g-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-form-color-border-error);
+  border-color: var(--g-form-color-border-error);
 }
 
 :where(input, textarea, select)[readonly] {
-	cursor: not-allowed;
-	border-style: dashed;
+  cursor: not-allowed;
+  border-style: dashed;
 }
 
 :where(input, textarea, select):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%);
+  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%);
 }
 
 :where(input, textarea, select):disabled:hover,
 :where(input, textarea, select):disabled:focus-visible {
-	border-color: var(--g-form-color-border-disabled);
-	background: var(--g-form-color-background-disabled);
-	color: var(--g-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) {
-	line-height: 1.5;
-	min-block-size: 4.3em; /* Allows 2 rows with no scrollbar */
-	resize: vertical;
+  line-height: 1.5;
+  min-block-size: 4.3em; /* Allows 2 rows with no scrollbar */
+  resize: vertical;
 }
 
 :where(input, textarea, select):where(select) {
-	position: relative;
-	cursor: pointer;
-	padding-inline-end: 2.5em;
+  position: relative;
+  cursor: pointer;
+  padding-inline-end: 2.5em;
 }
 
 :where(input, textarea, select):where(select),
 :where(input, textarea, select):where(select):hover,
 :where(input, textarea, select):where(select):focus,
 :where(input, textarea, select):where(select):focus-visible {
-	background-position: right 1em top 50%;
-	background-size: 1em;
-	background-image: url('data:image/svg+xml;utf8,<svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="tIfrV5XfYIEuoFNktgCj " aria-hidden="true" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><polyline points="6 9 12 15 18 9"></polyline></svg>');
-	background-repeat: no-repeat;
+  background-position: right 1em top 50%;
+  background-size: 1em;
+  background-image: url('data:image/svg+xml;utf8,<svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="tIfrV5XfYIEuoFNktgCj " aria-hidden="true" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><polyline points="6 9 12 15 18 9"></polyline></svg>');
+  background-repeat: no-repeat;
 }
 
 :where(input, textarea, select):where(option) {
-	padding-block: 0.2em;
-	font-size: 1em;
+  padding-block: 0.2em;
+  font-size: 1em;
 }
 
 :where(input, textarea, select):where(option):nth-of-type(2n) {
-	background-color: rgba(0, 0, 0, 0.05);
+  background-color: rgba(0, 0, 0, 0.05);
 }
 
 :where(input, textarea, select):where(option):checked {
-	background: var(--g-color-background-primary);
-	color: var(--g-color-content-primary-knockout);
+  background: var(--g-color-background-primary);
+  color: var(--g-color-content-primary-knockout);
 }
 
 :where(input, textarea, select):where([type="checkbox"]),
 :where(input, textarea, select):where([type="radio"]) {
-	display: block;
-	position: relative;
-	appearance: none;
-	inline-size: 1.2rem;
-	block-size: 1.2rem;
-	padding: 0;
-	cursor: pointer;
+  display: block;
+  position: relative;
+  appearance: none;
+  inline-size: 1.2rem;
+  block-size: 1.2rem;
+  padding: 0;
+  cursor: pointer;
 }
 
 :where(input, textarea, select):where([type="checkbox"]) {
-	border-radius: calc(var(--g-border-radius-md) / 2);
+  border-radius: calc(var(--g-border-radius-md) / 2);
 }
 
 :where(input, textarea, select):where([type="checkbox"])::after {
-	content: "✓";
-	speak: none;
-	display: block;
-	position: absolute;
-	font-size: 0.8rem;
-	font-weight: bold;
-	line-height: 0;
-	inset-inline-start: 0;
-	inline-size: 100%;
-	inset-block-start: 50%;
-	color: transparent;
-	text-align: center;
-	transition: color 0.2s;
+  content: "✓";
+  speak: none;
+  display: block;
+  position: absolute;
+  font-size: 0.8rem;
+  font-weight: bold;
+  line-height: 0;
+  inset-inline-start: 0;
+  inline-size: 100%;
+  inset-block-start: 50%;
+  color: transparent;
+  text-align: center;
+  transition: color 0.2s;
 }
 
 :where(input, textarea, select):where([type="checkbox"]):checked {
-	border-color: var(--g-color-border-primary);
-	background-color: var(--g-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-color-border-default);
+  color: var(--g-color-border-default);
 }
 
 :where(input, textarea, select):where([type="radio"]) {
-	border-radius: 50%;
+  border-radius: 50%;
 }
 
 /* PLACEHOLDER: math.div() conversion needed */
 :where(input, textarea, select):where([type="radio"])::after {
-	content: "";
-	display: block;
-	border-radius: 50%;
-	/* PLACEHOLDER: $radio-inner-size: 70% - convert math.div(100% - $radio-inner-size, 2) */
-	inline-size: 70%;
-	block-size: 70%;
-	margin: calc((100% - 70%) / 2);
-	inset: 0;
-	transition: background-color 0.2s;
+  content: "";
+  display: block;
+  border-radius: 50%;
+  /* PLACEHOLDER: $radio-inner-size: 70% - convert math.div(100% - $radio-inner-size, 2) */
+  inline-size: 70%;
+  block-size: 70%;
+  margin: calc((100% - 70%) / 2);
+  inset: 0;
+  transition: background-color 0.2s;
 }
 
 :where(input, textarea, select):where([type="radio"]):checked::after {
-	background-color: var(--g-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: var(--g-typography-body-sm-font);
-	cursor: pointer;
+  color: inherit;
+  font: var(--g-typography-body-sm-font);
+  cursor: pointer;
 }

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

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