@gtivr4/a1-design-system-react 0.1.0

package/src/components/dialog/dialog.css

@@ -0,0 +1,58 @@
+.a1-dialog {
+  box-sizing: border-box;
+  border: var(--component-dialog-border-width) solid var(--semantic-color-border-strong);
+  border-radius: var(--component-dialog-border-radius);
+  padding: var(--component-dialog-padding);
+  background: var(--semantic-color-surface-page);
+  box-shadow: var(--component-dialog-shadow);
+  color: var(--semantic-color-text-default);
+  width: min(560px, calc(100vw - var(--base-spacing-64)));
+  max-height: calc(100dvh - var(--base-spacing-64));
+  overflow: hidden;
+}
+
+.a1-dialog[open] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--base-spacing-16);
+}
+
+.a1-dialog::backdrop {
+  background: var(--component-scrim-color);
+  backdrop-filter: blur(var(--component-scrim-blur));
+}
+
+.a1-dialog__header {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--base-spacing-16);
+}
+
+.a1-dialog__title {
+  flex: 1;
+  margin: 0;
+  font-family: var(--component-heading-font-family-heading);
+  font-size: var(--semantic-font-size-heading-sm);
+  font-weight: var(--component-heading-font-weight-heading);
+  line-height: var(--component-heading-font-line-height-heading);
+  color: var(--semantic-color-text-default);
+}
+
+.a1-dialog__close {
+  flex-shrink: 0;
+  margin-top: var(--component-dialog-close-offset);
+  margin-right: var(--component-dialog-close-offset);
+}
+
+.a1-dialog__body {
+  flex: 1;
+  overflow-y: auto;
+}
+
+.a1-dialog__footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--base-spacing-12);
+  padding-top: var(--base-spacing-16);
+  border-top: var(--component-dialog-footer-border-width) solid var(--semantic-color-border-subtle);
+}

package/src/components/grid/Grid.jsx

@@ -0,0 +1,77 @@
+import "./grid.css";
+
+const SPACING_KEYS = [1, 2, 4, 6, 8, 12, 16, 20, 24, 32, 40, 64, 96, 128];
+
+function resolveGap(key) {
+  if (key == null) return undefined;
+  const n = Number(key);
+  return SPACING_KEYS.includes(n) ? `var(--base-spacing-${n})` : undefined;
+}
+
+export function Grid({
+  columns,
+  gap,
+  rowGap,
+  columnGap,
+  className = "",
+  children,
+  ...props
+}) {
+  const classes = ["a1-grid"];
+
+  let inlineCols;
+  if (typeof columns === "number") {
+    inlineCols = columns;
+  } else if (columns && typeof columns === "object") {
+    for (const [bp, count] of Object.entries(columns)) {
+      classes.push(`a1-grid--${bp}-${count}`);
+    }
+  }
+
+  if (className) classes.push(className);
+
+  const gapVal    = resolveGap(gap);
+  const rowGapVal = resolveGap(rowGap) ?? gapVal;
+  const colGapVal = resolveGap(columnGap) ?? gapVal;
+
+  const style = {
+    ...(inlineCols != null ? { "--a1-grid-cols": inlineCols } : {}),
+    ...(rowGapVal  ? { rowGap: rowGapVal }    : {}),
+    ...(colGapVal  ? { columnGap: colGapVal } : {}),
+    ...props.style,
+  };
+
+  return (
+    <div className={classes.join(" ")} style={style} {...props}>
+      {children}
+    </div>
+  );
+}
+
+export function GridItem({
+  span,
+  rowSpan,
+  className = "",
+  children,
+  ...props
+}) {
+  const classes = ["a1-grid-item"];
+
+  if (span === "full") {
+    classes.push("a1-grid-item--span-full");
+  } else if (typeof span === "number") {
+    classes.push(`a1-grid-item--span-${span}`);
+  }
+
+  if (typeof rowSpan === "number") {
+    classes.push(`a1-grid-item--row-span-${rowSpan}`);
+  }
+
+  if (className) classes.push(className);
+
+  return (
+    <div className={classes.join(" ")} {...props}>
+      {children}
+    </div>
+  );
+}

package/src/components/grid/grid.css

@@ -0,0 +1,86 @@
+.a1-grid {
+  display: grid;
+  grid-template-columns: repeat(var(--a1-grid-cols, 1), minmax(0, 1fr));
+}
+
+/* ── Static column-count modifiers ─────────────────────────────────────────── */
+
+.a1-grid--cols-1  { --a1-grid-cols: 1; }
+.a1-grid--cols-2  { --a1-grid-cols: 2; }
+.a1-grid--cols-3  { --a1-grid-cols: 3; }
+.a1-grid--cols-4  { --a1-grid-cols: 4; }
+.a1-grid--cols-5  { --a1-grid-cols: 5; }
+.a1-grid--cols-6  { --a1-grid-cols: 6; }
+.a1-grid--cols-8  { --a1-grid-cols: 8; }
+.a1-grid--cols-10 { --a1-grid-cols: 10; }
+.a1-grid--cols-12 { --a1-grid-cols: 12; }
+
+/* ── Responsive column-count modifiers (mobile-first) ───────────────────────
+   xs has no min-width — it is the base/mobile default.
+   Each subsequent tier overrides via a min-width query.              ─────── */
+
+.a1-grid--xs-1  { --a1-grid-cols: 1; }
+.a1-grid--xs-2  { --a1-grid-cols: 2; }
+.a1-grid--xs-3  { --a1-grid-cols: 3; }
+.a1-grid--xs-4  { --a1-grid-cols: 4; }
+.a1-grid--xs-6  { --a1-grid-cols: 6; }
+.a1-grid--xs-12 { --a1-grid-cols: 12; }
+
+@media (min-width: 481px) {
+  .a1-grid--sm-1  { --a1-grid-cols: 1; }
+  .a1-grid--sm-2  { --a1-grid-cols: 2; }
+  .a1-grid--sm-3  { --a1-grid-cols: 3; }
+  .a1-grid--sm-4  { --a1-grid-cols: 4; }
+  .a1-grid--sm-6  { --a1-grid-cols: 6; }
+  .a1-grid--sm-12 { --a1-grid-cols: 12; }
+}
+
+@media (min-width: 641px) {
+  .a1-grid--md-1  { --a1-grid-cols: 1; }
+  .a1-grid--md-2  { --a1-grid-cols: 2; }
+  .a1-grid--md-3  { --a1-grid-cols: 3; }
+  .a1-grid--md-4  { --a1-grid-cols: 4; }
+  .a1-grid--md-6  { --a1-grid-cols: 6; }
+  .a1-grid--md-12 { --a1-grid-cols: 12; }
+}
+
+@media (min-width: 1025px) {
+  .a1-grid--lg-1  { --a1-grid-cols: 1; }
+  .a1-grid--lg-2  { --a1-grid-cols: 2; }
+  .a1-grid--lg-3  { --a1-grid-cols: 3; }
+  .a1-grid--lg-4  { --a1-grid-cols: 4; }
+  .a1-grid--lg-6  { --a1-grid-cols: 6; }
+  .a1-grid--lg-12 { --a1-grid-cols: 12; }
+}
+
+@media (min-width: 1441px) {
+  .a1-grid--xl-1  { --a1-grid-cols: 1; }
+  .a1-grid--xl-2  { --a1-grid-cols: 2; }
+  .a1-grid--xl-3  { --a1-grid-cols: 3; }
+  .a1-grid--xl-4  { --a1-grid-cols: 4; }
+  .a1-grid--xl-6  { --a1-grid-cols: 6; }
+  .a1-grid--xl-12 { --a1-grid-cols: 12; }
+}
+
+/* ── GridItem span classes ──────────────────────────────────────────────────── */
+
+.a1-grid-item--span-1  { grid-column: span 1; }
+.a1-grid-item--span-2  { grid-column: span 2; }
+.a1-grid-item--span-3  { grid-column: span 3; }
+.a1-grid-item--span-4  { grid-column: span 4; }
+.a1-grid-item--span-5  { grid-column: span 5; }
+.a1-grid-item--span-6  { grid-column: span 6; }
+.a1-grid-item--span-7  { grid-column: span 7; }
+.a1-grid-item--span-8  { grid-column: span 8; }
+.a1-grid-item--span-9  { grid-column: span 9; }
+.a1-grid-item--span-10 { grid-column: span 10; }
+.a1-grid-item--span-11 { grid-column: span 11; }
+.a1-grid-item--span-12 { grid-column: span 12; }
+.a1-grid-item--span-full { grid-column: 1 / -1; }
+
+.a1-grid-item--row-span-1 { grid-row: span 1; }
+.a1-grid-item--row-span-2 { grid-row: span 2; }
+.a1-grid-item--row-span-3 { grid-row: span 3; }
+.a1-grid-item--row-span-4 { grid-row: span 4; }
+.a1-grid-item--row-span-5 { grid-row: span 5; }
+.a1-grid-item--row-span-6 { grid-row: span 6; }

package/src/components/heading/Heading.jsx

@@ -0,0 +1,69 @@
+import "./heading.css";
+
+const headingSizes = ["xl", "lg", "md", "sm", "xs"];
+const displaySizes = ["sm", "md", "lg", "xl", "xxl", "jumbo", "xJumbo"];
+const colors = ["default", "muted", "accent"];
+const levels = ["h1", "h2", "h3", "h4", "h5", "h6"];
+const breakpoints = ["xs", "sm", "md", "lg", "xl"];
+
+const levelDefaults = { h1: "xl", h2: "lg", h3: "md", h4: "sm", h5: "xs", h6: "xs" };
+
+function isResponsiveSize(size) {
+  return size && typeof size === "object" && !Array.isArray(size);
+}
+
+function resolveSize(size, validSizes, defaultSize) {
+  if (!isResponsiveSize(size)) {
+    return validSizes.includes(size) ? size : defaultSize;
+  }
+
+  return validSizes.includes(size.xs) ? size.xs : defaultSize;
+}
+
+function getResponsiveSizeStyle(size, type, validSizes) {
+  if (!isResponsiveSize(size)) return {};
+
+  return breakpoints.slice(1).reduce((style, breakpoint) => {
+    const breakpointSize = size[breakpoint];
+
+    if (validSizes.includes(breakpointSize)) {
+      style[`--a1-heading-size-${breakpoint}`] =
+        `var(--semantic-font-size-${type}-${breakpointSize === "xJumbo" ? "x-jumbo" : breakpointSize})`;
+    }
+
+    return style;
+  }, {});
+}
+
+export function Heading({
+  as: Component = "h2",
+  type = "heading",
+  size,
+  color = "default",
+  className = "",
+  style,
+  ...props
+}) {
+  const resolvedAs = levels.includes(Component) ? Component : "h2";
+  const isDisplay = type === "display";
+  const validSizes = isDisplay ? displaySizes : headingSizes;
+  const defaultSize = isDisplay ? "md" : (levelDefaults[resolvedAs] ?? "md");
+  const resolvedSize = resolveSize(size, validSizes, defaultSize);
+  const resolvedColor = colors.includes(color) ? color : "default";
+  const responsiveSizeStyle = getResponsiveSizeStyle(size, type, validSizes);
+  const resolvedStyle = Object.keys(responsiveSizeStyle).length
+    ? { ...responsiveSizeStyle, ...style }
+    : style;
+
+  const classes = [
+    "a1-heading",
+    `a1-heading--${type}`,
+    `a1-heading--${type}-${resolvedSize}`,
+    resolvedColor !== "default" && `a1-heading--${resolvedColor}`,
+    className
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  return <Component className={classes} style={resolvedStyle} {...props} />;
+}

package/src/components/heading/heading.css

@@ -0,0 +1,76 @@
+.a1-heading {
+  margin: 0;
+  font-family: var(--a1-heading-family);
+  font-size: var(--a1-heading-responsive-size, var(--a1-heading-size));
+  font-weight: var(--a1-heading-weight);
+  line-height: var(--a1-heading-line-height);
+  color: var(--a1-heading-color, var(--semantic-color-text-default));
+}
+
+@media (min-width: 481px) {
+  .a1-heading {
+    --a1-heading-responsive-size: var(--a1-heading-size-sm, var(--a1-heading-size));
+  }
+}
+
+@media (min-width: 641px) {
+  .a1-heading {
+    --a1-heading-responsive-size: var(
+      --a1-heading-size-md,
+      var(--a1-heading-size-sm, var(--a1-heading-size))
+    );
+  }
+}
+
+@media (min-width: 1025px) {
+  .a1-heading {
+    --a1-heading-responsive-size: var(
+      --a1-heading-size-lg,
+      var(--a1-heading-size-md, var(--a1-heading-size-sm, var(--a1-heading-size)))
+    );
+  }
+}
+
+@media (min-width: 1441px) {
+  .a1-heading {
+    --a1-heading-responsive-size: var(
+      --a1-heading-size-xl,
+      var(
+        --a1-heading-size-lg,
+        var(--a1-heading-size-md, var(--a1-heading-size-sm, var(--a1-heading-size)))
+      )
+    );
+  }
+}
+
+.a1-heading--heading {
+  --a1-heading-family: var(--component-heading-font-family-heading);
+  --a1-heading-weight: var(--component-heading-font-weight-heading);
+  --a1-heading-line-height: var(--component-heading-font-line-height-heading);
+}
+
+.a1-heading--display {
+  --a1-heading-family: var(--component-heading-font-family-display);
+  --a1-heading-weight: var(--component-heading-font-weight-display);
+  --a1-heading-line-height: var(--component-heading-font-line-height-display);
+}
+
+/* Heading sizes */
+.a1-heading--heading-xl { --a1-heading-size: var(--semantic-font-size-heading-xl); }
+.a1-heading--heading-lg { --a1-heading-size: var(--semantic-font-size-heading-lg); }
+.a1-heading--heading-md { --a1-heading-size: var(--semantic-font-size-heading-md); }
+.a1-heading--heading-sm { --a1-heading-size: var(--semantic-font-size-heading-sm); }
+.a1-heading--heading-xs { --a1-heading-size: var(--semantic-font-size-heading-xs); }
+
+/* Display sizes */
+.a1-heading--display-sm     { --a1-heading-size: var(--semantic-font-size-display-sm); }
+.a1-heading--display-md     { --a1-heading-size: var(--semantic-font-size-display-md); }
+.a1-heading--display-lg     { --a1-heading-size: var(--semantic-font-size-display-lg); }
+.a1-heading--display-xl     { --a1-heading-size: var(--semantic-font-size-display-xl); }
+.a1-heading--display-xxl    { --a1-heading-size: var(--semantic-font-size-display-xxl); }
+.a1-heading--display-jumbo  { --a1-heading-size: var(--semantic-font-size-display-jumbo); }
+.a1-heading--display-xJumbo { --a1-heading-size: var(--semantic-font-size-display-x-jumbo); }
+
+/* Color modifiers */
+.a1-heading--muted   { --a1-heading-color: var(--semantic-color-text-muted); }
+.a1-heading--accent  { --a1-heading-color: var(--semantic-color-text-accent); }

package/src/components/icon/Icon.jsx

@@ -0,0 +1,32 @@
+import "./icon.css";
+
+export function Icon({
+  name,
+  weight,
+  grade,
+  opticalSize,
+  fill,
+  className = "",
+  style,
+  ...props
+}) {
+  const vars = {
+    ...(weight != null && { "--a1-icon-weight": weight }),
+    ...(grade != null && { "--a1-icon-grade": grade }),
+    ...(opticalSize != null && { "--a1-icon-opsz": opticalSize }),
+    ...(fill != null && { "--a1-icon-fill": fill ? 1 : 0 }),
+  };
+
+  return (
+    <span
+      className={["a1-icon", "material-symbols-outlined", className]
+        .filter(Boolean)
+        .join(" ")}
+      style={{ ...vars, ...style }}
+      aria-hidden="true"
+      {...props}
+    >
+      {name}
+    </span>
+  );
+}

package/src/components/icon/icon.css

@@ -0,0 +1,10 @@
+.a1-icon {
+  font-size: inherit;
+  line-height: 1;
+  user-select: none;
+  font-variation-settings:
+    "FILL" var(--a1-icon-fill, 0),
+    "wght" var(--a1-icon-weight, var(--base-font-weight-regular)),
+    "GRAD" var(--a1-icon-grade, 0),
+    "opsz" var(--a1-icon-opsz, var(--base-icon-optical-size));
+}

package/src/components/icon-button/IconButton.jsx

@@ -0,0 +1,34 @@
+import "./icon-button.css";
+import { Icon } from "../icon/Icon.jsx";
+
+const variants = ["tertiary", "secondary", "destructive", "success"];
+
+export function IconButton({
+  icon,
+  label,
+  variant = "tertiary",
+  disabled = false,
+  onClick,
+  className = "",
+  ...props
+}) {
+  const resolvedVariant = variants.includes(variant) ? variant : "tertiary";
+  const classes = [
+    "a1-icon-button",
+    `a1-icon-button--${resolvedVariant}`,
+    className,
+  ].filter(Boolean).join(" ");
+
+  return (
+    <button
+      type="button"
+      className={classes}
+      aria-label={label}
+      disabled={disabled}
+      onClick={onClick}
+      {...props}
+    >
+      <Icon name={icon} />
+    </button>
+  );
+}

package/src/components/icon-button/icon-button.css

@@ -0,0 +1,196 @@
+/* ═══════════════════════════════════════════════════════════════════════════
+   IconButton
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.a1-icon-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  height: var(--component-icon-button-size);
+  aspect-ratio: 1;
+  padding: 0;
+  border-radius: var(--component-icon-button-border-radius);
+  cursor: pointer;
+  background: var(--a1-icon-button-background);
+  border-width: var(--a1-icon-button-border-width, var(--component-button-tertiary-border-width));
+  border-style: solid;
+  border-color: var(--a1-icon-button-border);
+  color: var(--a1-icon-button-foreground);
+}
+
+.a1-icon-button:hover {
+  background: var(--a1-icon-button-background-hover);
+  border-color: var(--a1-icon-button-border-hover);
+  color: var(--a1-icon-button-foreground-hover);
+}
+
+.a1-icon-button:active {
+  background: var(--a1-icon-button-background-pressed);
+  border-color: var(--a1-icon-button-border-pressed);
+  color: var(--a1-icon-button-foreground-pressed);
+}
+
+.a1-icon-button .a1-icon {
+  font-size: var(--component-icon-button-icon-size);
+  --a1-icon-opsz: var(--component-icon-button-icon-optical-size);
+}
+
+.a1-icon-button:focus-visible {
+  outline: var(--component-button-focus-ring-width) solid var(--component-button-focus-ring);
+  outline-offset: var(--component-icon-button-focus-ring-offset);
+}
+
+.a1-icon-button:disabled {
+  opacity: var(--component-button-disabled-opacity);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* ── Variant: tertiary ───────────────────────────────────────────────────── */
+
+.a1-icon-button--tertiary {
+  --a1-icon-button-background: var(--component-button-tertiary-background);
+  --a1-icon-button-background-hover: var(--component-button-tertiary-background-hover);
+  --a1-icon-button-background-pressed: var(--component-button-tertiary-background-pressed);
+  --a1-icon-button-foreground: var(--component-button-tertiary-foreground);
+  --a1-icon-button-foreground-hover: var(--component-button-tertiary-foreground-hover);
+  --a1-icon-button-foreground-pressed: var(--component-button-tertiary-foreground-pressed);
+  --a1-icon-button-border: var(--component-button-tertiary-border);
+  --a1-icon-button-border-hover: var(--component-button-tertiary-border-hover);
+  --a1-icon-button-border-pressed: var(--component-button-tertiary-border-pressed);
+  --a1-icon-button-border-width: var(--component-button-tertiary-border-width);
+}
+
+/* ── Variant: secondary ──────────────────────────────────────────────────── */
+
+.a1-icon-button--secondary {
+  --a1-icon-button-background: var(--component-button-secondary-background);
+  --a1-icon-button-background-hover: var(--component-button-secondary-background-hover);
+  --a1-icon-button-background-pressed: var(--component-button-secondary-background-pressed);
+  --a1-icon-button-foreground: var(--component-button-secondary-foreground);
+  --a1-icon-button-foreground-hover: var(--component-button-secondary-foreground-hover);
+  --a1-icon-button-foreground-pressed: var(--component-button-secondary-foreground-pressed);
+  --a1-icon-button-border: var(--component-button-secondary-border);
+  --a1-icon-button-border-hover: var(--component-button-secondary-border-hover);
+  --a1-icon-button-border-pressed: var(--component-button-secondary-border-pressed);
+  --a1-icon-button-border-width: var(--component-button-secondary-border-width);
+}
+
+/* ── Variant: destructive ───────────────────────────────────────────────── */
+
+.a1-icon-button--destructive {
+  background: var(--semantic-color-status-error-surface);
+  border-color: var(--semantic-color-status-error-border);
+  color: var(--semantic-color-status-error-background);
+}
+
+.a1-icon-button--destructive:hover {
+  background: color-mix(in srgb, var(--semantic-color-status-error-surface), var(--semantic-color-status-error-background) 8%);
+  border-color: var(--semantic-color-status-error-background);
+  color: var(--semantic-color-status-error-background);
+}
+
+.a1-icon-button--destructive:active {
+  background: color-mix(in srgb, var(--semantic-color-status-error-surface), var(--semantic-color-status-error-background) 16%);
+  border-color: var(--semantic-color-status-error-background);
+  color: var(--semantic-color-status-error-background);
+}
+
+/* ── Variant: success ───────────────────────────────────────────────────── */
+
+.a1-icon-button--success {
+  background: var(--semantic-color-status-success-surface);
+  border-color: var(--semantic-color-status-success-border);
+  color: var(--semantic-color-status-success-background);
+}
+
+.a1-icon-button--success:hover {
+  background: color-mix(in srgb, var(--semantic-color-status-success-surface), var(--semantic-color-status-success-background) 8%);
+  border-color: var(--semantic-color-status-success-background);
+  color: var(--semantic-color-status-success-background);
+}
+
+.a1-icon-button--success:active {
+  background: color-mix(in srgb, var(--semantic-color-status-success-surface), var(--semantic-color-status-success-background) 16%);
+  border-color: var(--semantic-color-status-success-background);
+  color: var(--semantic-color-status-success-background);
+}
+
+.a1-theme-dark .a1-icon-button--destructive,
+.a1-inverse .a1-icon-button--destructive {
+  background: var(--semantic-color-status-error-background);
+  border-color: var(--semantic-color-status-error-background);
+  color: var(--semantic-color-status-error-foreground);
+}
+
+.a1-theme-dark .a1-icon-button--destructive:hover,
+.a1-inverse .a1-icon-button--destructive:hover {
+  background: color-mix(in srgb, var(--semantic-color-status-error-background), black 16%);
+  border-color: var(--semantic-color-status-error-background);
+  color: var(--semantic-color-status-error-foreground);
+}
+
+.a1-theme-dark .a1-icon-button--destructive:active,
+.a1-inverse .a1-icon-button--destructive:active {
+  background: color-mix(in srgb, var(--semantic-color-status-error-background), black 32%);
+  border-color: var(--semantic-color-status-error-background);
+  color: var(--semantic-color-status-error-foreground);
+}
+
+.a1-theme-dark .a1-icon-button--success,
+.a1-inverse .a1-icon-button--success {
+  background: var(--semantic-color-status-success-background);
+  border-color: var(--semantic-color-status-success-background);
+  color: var(--semantic-color-status-success-foreground);
+}
+
+.a1-theme-dark .a1-icon-button--success:hover,
+.a1-inverse .a1-icon-button--success:hover {
+  background: color-mix(in srgb, var(--semantic-color-status-success-background), black 16%);
+  border-color: var(--semantic-color-status-success-background);
+  color: var(--semantic-color-status-success-foreground);
+}
+
+.a1-theme-dark .a1-icon-button--success:active,
+.a1-inverse .a1-icon-button--success:active {
+  background: color-mix(in srgb, var(--semantic-color-status-success-background), black 32%);
+  border-color: var(--semantic-color-status-success-background);
+  color: var(--semantic-color-status-success-foreground);
+}
+
+.a1-theme-dark .a1-inverse .a1-icon-button--destructive {
+  background: var(--semantic-color-status-error-surface);
+  border-color: var(--semantic-color-status-error-border);
+  color: var(--semantic-color-status-error-background);
+}
+
+.a1-theme-dark .a1-inverse .a1-icon-button--destructive:hover {
+  background: color-mix(in srgb, var(--semantic-color-status-error-surface), var(--semantic-color-status-error-background) 8%);
+  border-color: var(--semantic-color-status-error-background);
+  color: var(--semantic-color-status-error-background);
+}
+
+.a1-theme-dark .a1-inverse .a1-icon-button--destructive:active {
+  background: color-mix(in srgb, var(--semantic-color-status-error-surface), var(--semantic-color-status-error-background) 16%);
+  border-color: var(--semantic-color-status-error-background);
+  color: var(--semantic-color-status-error-background);
+}
+
+.a1-theme-dark .a1-inverse .a1-icon-button--success {
+  background: var(--semantic-color-status-success-surface);
+  border-color: var(--semantic-color-status-success-border);
+  color: var(--semantic-color-status-success-background);
+}
+
+.a1-theme-dark .a1-inverse .a1-icon-button--success:hover {
+  background: color-mix(in srgb, var(--semantic-color-status-success-surface), var(--semantic-color-status-success-background) 8%);
+  border-color: var(--semantic-color-status-success-background);
+  color: var(--semantic-color-status-success-background);
+}
+
+.a1-theme-dark .a1-inverse .a1-icon-button--success:active {
+  background: color-mix(in srgb, var(--semantic-color-status-success-surface), var(--semantic-color-status-success-background) 16%);
+  border-color: var(--semantic-color-status-success-background);
+  color: var(--semantic-color-status-success-background);
+}

package/src/components/inverse/Inverse.jsx

@@ -0,0 +1,18 @@
+import "../../themes.css";
+import "../../color-scheme.css";
+
+export function Inverse({
+  as: Component = "div",
+  className = "",
+  children,
+  ...props
+}) {
+  return (
+    <Component
+      className={["a1-inverse", className].filter(Boolean).join(" ")}
+      {...props}
+    >
+      {children}
+    </Component>
+  );
+}

package/src/components/labels/Labels.jsx

@@ -0,0 +1,29 @@
+import { createContext, useContext } from "react";
+
+const LabelsContext = createContext({ locale: null, brand: null, labels: null });
+
+export function LabelsProvider({ locale = null, brand = null, labels, children }) {
+  return (
+    <LabelsContext.Provider value={{ locale, brand, labels }}>
+      {children}
+    </LabelsContext.Provider>
+  );
+}
+
+export function useLabel(key) {
+  const { locale, brand, labels } = useContext(LabelsContext);
+  if (!labels) return key;
+
+  const parts = key.split(".");
+  let node = labels?.label;
+  for (const part of parts) {
+    if (node == null || typeof node !== "object") return key;
+    node = node[part];
+  }
+  if (node == null) return key;
+
+  // Resolution order: locale > brand > default
+  if (locale && node.locale?.[locale] != null) return node.locale[locale];
+  if (brand && node.brand?.[brand] != null) return node.brand[brand];
+  return node.$value ?? key;
+}