@grantcodes/ui 2.12.1 → 2.15.2

package/src/components/accordion/accordion-item.css

@@ -10,8 +10,8 @@
 
 .accordion__item {
 	border: 1px solid
-		var(--g-theme-color-border-subtle, var(--g-theme-color-border-default));
-	border-radius: var(--g-theme-border-radius-md, 0.5rem);
+		var(--g-color-border-subtle, var(--g-color-border-default));
+	border-radius: var(--g-border-radius-md, 0.5rem);
 }
 
 .accordion__item::details-content {
@@ -27,23 +27,23 @@
 }
 
 .accordion__summary {
-	padding: var(--g-theme-spacing-md);
+	padding: var(--g-spacing-md);
 	cursor: pointer;
-	background: var(--g-theme-color-background-subtle);
-	font-weight: var(--g-typography-font-weight-500);
+	background: var(--g-color-background-subtle);
+	font-weight: var(--g-typography-body-font-weight);
 	list-style: none;
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
-	gap: var(--g-theme-spacing-md);
-	border-radius: var(--g-theme-border-radius-md, 0.5rem);
+	gap: var(--g-spacing-md);
+	border-radius: var(--g-border-radius-md, 0.5rem);
 	transition-property: background-color, outline-width, outline-color;
 }
 
 .accordion__summary:hover {
 	background: var(
-		--g-theme-color-background-subtle-hover,
-		var(--g-theme-color-background-subtle)
+		--g-color-background-subtle-hover,
+		var(--g-color-background-subtle)
 	);
 }
 
@@ -57,7 +57,7 @@
 	block-size: 1em;
 	flex-shrink: 0;
 	transition: transform 0.25s ease;
-	color: var(--g-theme-color-content-subtle, currentColor);
+	color: var(--g-color-content-subtle, currentColor);
 }
 
 .accordion__item[open] .accordion__chevron {
@@ -65,10 +65,10 @@
 }
 
 .accordion__content {
-	padding: var(--g-theme-spacing-md);
-	background: var(--g-theme-color-background-default);
-	border-radius: 0 0 var(--g-theme-border-radius-md, 0.5rem)
-		var(--g-theme-border-radius-md, 0.5rem);
+	padding: var(--g-spacing-md);
+	background: var(--g-color-background-default);
+	border-radius: 0 0 var(--g-border-radius-md, 0.5rem)
+		var(--g-border-radius-md, 0.5rem);
 }
 
 @media (prefers-reduced-motion: reduce) {

package/src/components/accordion/accordion.css

@@ -11,5 +11,5 @@
 .accordion {
 	display: flex;
 	flex-direction: column;
-	gap: var(--g-theme-spacing-sm);
+	gap: var(--g-spacing-sm);
 }

package/src/components/app-bar/app-bar.css

@@ -11,12 +11,13 @@
 }
 
 .app-bar {
-	background-color: var(--g-theme-color-background-default);
-	border-block-end: 1px solid var(--g-theme-color-border-default);
+	background-color: var(--g-color-background-default);
+	border-block-end: 1px solid var(--g-color-border-default);
 	position: relative;
 	z-index: 100;
 }
 
+:host([sticky]),
 .app-bar--sticky {
 	position: sticky;
 	inset-block-start: 0;
@@ -32,9 +33,9 @@
 .app-bar__bar {
 	display: flex;
 	align-items: center;
-	gap: var(--g-theme-spacing-lg);
-	padding-inline: var(--g-theme-spacing-md);
-	padding-block: var(--g-theme-spacing-md);
+	gap: var(--g-spacing-lg);
+	padding-inline: var(--g-spacing-md);
+	padding-block: var(--g-spacing-md);
 	max-inline-size: 1400px;
 	margin-inline: auto;
 }
@@ -55,7 +56,7 @@
 .app-bar__actions {
 	display: flex;
 	align-items: center;
-	gap: var(--g-theme-spacing-sm);
+	gap: var(--g-spacing-sm);
 	margin-inline-start: auto;
 }
 
@@ -67,15 +68,15 @@
 	justify-content: center;
 	inline-size: 2.75rem;
 	block-size: 2.75rem;
-	padding: var(--g-theme-spacing-sm);
-	border-radius: var(--g-theme-border-radius-md);
+	padding: var(--g-spacing-sm);
+	border-radius: var(--g-border-radius-md);
 	cursor: pointer;
-	color: var(--g-theme-color-content-default);
+	color: var(--g-color-content-default);
 	transition: background-color 0.2s ease;
 }
 
 .app-bar__menu-button:hover {
-	background-color: var(--g-theme-color-background-subtle-hover);
+	background-color: var(--g-color-background-subtle-hover);
 }
 
 /* Hamburger Icon */
@@ -127,16 +128,16 @@
 .app-bar__nav--open {
 	display: flex;
 	flex-direction: column;
-	gap: var(--g-theme-spacing-xs, 0.25rem);
+	gap: var(--g-spacing-xs, 0.25rem);
 	position: absolute;
 	inset-inline: 0;
 	inset-block-start: 100%;
 	z-index: 99;
-	background-color: var(--g-theme-color-background-default);
-	border-block-end: 1px solid var(--g-theme-color-border-default);
-	padding-block: var(--g-theme-spacing-md);
-	padding-inline: var(--g-theme-spacing-md);
-	box-shadow: var(--g-theme-shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.12));
+	background-color: var(--g-color-background-default);
+	border-block-end: 1px solid var(--g-color-border-default);
+	padding-block: var(--g-spacing-md);
+	padding-inline: var(--g-spacing-md);
+	box-shadow: var(--g-box-shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.12));
 	animation: menu-open 0.25s ease-out;
 }
 
@@ -156,7 +157,7 @@
 .app-bar__nav--open ::slotted(div[slot="nav"]) {
 	display: flex;
 	flex-direction: column;
-	gap: var(--g-theme-spacing-xs, 0.25rem);
+	gap: var(--g-spacing-xs, 0.25rem);
 	margin: 0;
 	padding: 0;
 	list-style: none;
@@ -211,7 +212,7 @@
 		display: flex;
 		flex-direction: row;
 		align-items: center;
-		gap: var(--g-theme-spacing-xs, 0.25rem);
+		gap: var(--g-spacing-xs, 0.25rem);
 		flex: 1;
 	}
 
@@ -242,17 +243,16 @@
 
 /* Slotted content styling */
 ::slotted(a[slot="logo"]) {
-	color: var(--g-theme-color-content-default) !important;
+	color: var(--g-color-content-default) !important;
 	text-decoration: none !important;
-	font-family: var(--g-theme-typography-label-font-family);
-	font-weight: var(--g-theme-typography-label-font-weight);
+	font: var(--g-typography-body-sm-font);
 }
 
 ::slotted(ul),
 ::slotted(div[slot="nav"]) {
 	display: flex;
 	flex-direction: row;
-	gap: var(--g-theme-spacing-xs, 0.25rem);
+	gap: var(--g-spacing-xs, 0.25rem);
 	margin: 0;
 	padding: 0;
 	list-style: none;

package/src/components/app-bar/nav-link.css

@@ -11,7 +11,7 @@
 .nav-link {
 	display: inline-flex;
 	align-items: center;
-	border-radius: var(--g-theme-border-radius-md);
+	border-radius: var(--g-border-radius-md);
 	background-color: transparent;
 	transition: background-color 0.15s ease;
 }
@@ -19,7 +19,7 @@
 .nav-link:hover {
 	background-color: color-mix(
 		in srgb,
-		var(--g-theme-color-content-default) 8%,
+		var(--g-color-content-default) 8%,
 		transparent
 	);
 }
@@ -39,21 +39,20 @@
 ::slotted(a:focus-visible) {
 	display: inline-flex;
 	align-items: center;
-	color: var(--g-theme-color-content-default) !important;
+	color: var(--g-color-content-default) !important;
 	text-decoration: none !important;
 	opacity: 1 !important;
-	padding-block: var(--g-theme-spacing-xs, 0.25rem);
-	padding-inline: var(--g-theme-spacing-sm);
-	font-family: var(--g-theme-typography-label-font-family);
-	font-weight: var(--g-theme-typography-label-font-weight);
+	padding-block: var(--g-spacing-xs, 0.25rem);
+	padding-inline: var(--g-spacing-sm);
+	font: var(--g-typography-body-sm-font);
 	white-space: nowrap;
 }
 
 ::slotted(a:focus-visible) {
-	outline: var(--g-theme-focus-ring-width-default) solid
-		var(--g-theme-focus-ring-color-default);
-	outline-offset: var(--g-theme-focus-ring-offset-default);
-	border-radius: var(--g-theme-border-radius-md);
+	outline: var(--g-focus-ring-width-default) solid
+		var(--g-focus-ring-color-default);
+	outline-offset: var(--g-focus-ring-offset-default);
+	border-radius: var(--g-border-radius-md);
 }
 
 @media (prefers-reduced-motion: reduce) {

package/src/components/avatar/avatar.css

@@ -13,15 +13,14 @@
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	inline-size: var(--g-theme-spacing-2xl);
-	block-size: var(--g-theme-spacing-2xl);
+	inline-size: var(--g-spacing-2xl);
+	block-size: var(--g-spacing-2xl);
 	border-radius: 50%;
 	overflow: hidden;
-	background-color: var(--g-theme-color-primary-200);
-	color: var(--g-theme-color-primary-900);
+	background-color: var(--g-color-primary-200);
+	color: var(--g-color-primary-900);
 	text-align: center;
-	font-size: var(--g-theme-typography-h6-font-size);
-	font-weight: var(--g-theme-typography-label-default-font-weight);
+	font: var(--g-typography-h6-font)
 }
 
 .avatar__image {

package/src/components/badge/badge.css

@@ -11,11 +11,12 @@
 .badge {
 	display: inline-flex;
 	align-items: center;
-	gap: var(--g-theme-spacing-xs);
+	gap: var(--g-spacing-xs);
 	padding-inline: 0.625em;
 	padding-block: 0.375em;
-	border-radius: var(--g-theme-border-radius-md, 0.375rem);
-	font: var(--g-theme-typography-meta);
+	border-radius: var(--g-border-radius-md);
+	font: var(--g-typography-body-sm-font);
+	font-size: var(--g-typography-font-size-2xs);
 	line-height: 1;
 	white-space: nowrap;
 	border-width: 1px;
@@ -25,54 +26,54 @@
 
 /* Soft style variants */
 .badge--primary {
-	background-color: var(--g-theme-color-primary-200);
-	color: var(--g-theme-color-primary-600);
+	background-color: var(--g-color-primary-200);
+	color: var(--g-color-primary-600);
 	border-color: transparent;
 }
 
 .badge--success {
 	background-color: color-mix(
 		in srgb,
-		var(--g-color-utility-green-500) 15%,
+		var(--g-color-utility-success) 15%,
 		transparent
 	);
-	color: var(--g-color-utility-green-700);
+	color: var(--g-color-content-utility-success);
 	border-color: transparent;
 }
 
 .badge--warning {
 	background-color: color-mix(
 		in srgb,
-		var(--g-color-utility-yellow-500) 15%,
+		var(--g-color-utility-warning) 15%,
 		transparent
 	);
-	color: var(--g-color-utility-yellow-700);
+	color: var(--g-color-content-utility-warning);
 	border-color: transparent;
 }
 
 .badge--error {
 	background-color: color-mix(
 		in srgb,
-		var(--g-color-utility-red-500) 15%,
+		var(--g-color-utility-error) 15%,
 		transparent
 	);
-	color: var(--g-color-utility-red-700);
+	color: var(--g-color-content-utility-error);
 	border-color: transparent;
 }
 
 .badge--info {
 	background-color: color-mix(
 		in srgb,
-		var(--g-color-utility-blue-500) 15%,
+		var(--g-color-utility-info) 15%,
 		transparent
 	);
-	color: var(--g-color-utility-blue-700);
+	color: var(--g-color-content-utility-info);
 	border-color: transparent;
 }
 
 .badge--neutral {
-	background-color: var(--g-theme-color-background-subtle);
-	color: var(--g-theme-color-content-default);
+	background-color: var(--g-color-background-subtle);
+	color: var(--g-color-content-default);
 	border-color: transparent;
 }
 

package/src/components/breadcrumb/breadcrumb.css

@@ -16,7 +16,7 @@
 	display: flex;
 	flex-wrap: wrap;
 	align-items: center;
-	gap: var(--g-theme-spacing-sm);
+	gap: var(--g-spacing-sm);
 	margin: 0;
 	padding: 0;
 	list-style: none;
@@ -25,24 +25,23 @@
 .breadcrumb__item {
 	display: inline-flex;
 	align-items: center;
-	gap: var(--g-theme-spacing-sm);
-	font-size: var(--g-typography-font-size-14);
-	color: var(--g-theme-color-primary-700);
+	gap: var(--g-spacing-sm);
+	font-size: var(--g-typography-body-sm-font-size);
+	color: var(--g-color-primary-700);
 }
 
 /* Separator using ::after pseudo-element; driven by parent via data-has-separator */
 :host([data-has-separator]) .breadcrumb__item::after {
 	content: var(--component-breadcrumb-separator, "/");
 	display: inline-block;
-	color: var(--g-theme-color-primary-400);
-	font-weight: var(--g-typography-font-weight-400);
+	color: var(--g-color-primary-400);
+	font-weight: var(--g-typography-body-lg-font-weight);
 	user-select: none;
 	pointer-events: none;
 }
 
 /* Current page styling */
 .breadcrumb__item[data-current] {
-	font-weight: var(--g-typography-font-weight-600);
 	color: var(--color-base-primary-900);
 }
 
@@ -51,10 +50,10 @@
 }
 
 .breadcrumb__link {
-	color: var(--g-theme-color-primary-600);
+	color: var(--g-color-primary-600);
 	text-decoration: none;
 	transition: color 0.2s ease;
-	border-radius: var(--g-theme-border-radius-md, 0.25rem);
+	border-radius: var(--g-border-radius-md, 0.25rem);
 	padding-inline: 0.25em;
 	padding-block: 0.125em;
 	margin-inline: -0.25em;
@@ -62,7 +61,7 @@
 }
 
 .breadcrumb__link:hover {
-	color: var(--g-theme-color-primary-700);
+	color: var(--g-color-primary-700);
 	text-decoration: underline;
 }
 
@@ -80,6 +79,6 @@
 		content: "...";
 		display: inline-block;
 		margin-inline-end: 0.5rem;
-		color: var(--g-theme-color-primary-400);
+		color: var(--g-color-primary-400);
 	}
 }

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) {