ui-foundations 0.1.0

package/dist/react/button.js

@@ -0,0 +1,95 @@
+import React from "react";
+import { LabelContent } from "./label.js";
+
+function normalizeOrientation(value) {
+  return value === "vertical" ? "vertical" : "horizontal";
+}
+
+function normalizeJustify(value) {
+  return value === "stretch" ? "stretch" : "start";
+}
+
+export function Button({
+  variant = "solid",
+  className = "",
+  type = "button",
+  label,
+  startIcon,
+  endIcon,
+  iconOnly,
+  ariaLabel,
+  children,
+  ...props
+}) {
+  const classes = ["button"];
+
+  if (variant === "outline") classes.push("outline");
+  if (variant === "ghost") classes.push("ghost");
+  if (className) classes.push(className);
+
+  const content = children ?? label;
+  const hasReadableLabel =
+    typeof content === "string"
+      ? content.trim().length > 0
+      : content !== null && content !== undefined && content !== false;
+  const resolvedIconOnly = iconOnly ?? !hasReadableLabel;
+  const iconStart = resolvedIconOnly ? startIcon || endIcon : startIcon;
+  const iconEnd = resolvedIconOnly ? undefined : endIcon;
+
+  if (resolvedIconOnly) classes.push("button--icon-only");
+
+  const buttonProps = {
+    type,
+    className: classes.join(" "),
+    ...props,
+  };
+
+  if (resolvedIconOnly && !buttonProps["aria-label"] && ariaLabel) {
+    buttonProps["aria-label"] = ariaLabel;
+  }
+
+  if (resolvedIconOnly && !buttonProps["aria-label"]) {
+    console.warn(
+      "[ui-foundations] iconOnly Button should include `ariaLabel` or `aria-label`.",
+    );
+  }
+
+  return React.createElement(
+    "button",
+    buttonProps,
+    React.createElement(
+      LabelContent,
+      {
+        startIcon: iconStart,
+        endIcon: iconEnd,
+        iconOnly: resolvedIconOnly,
+      },
+      content,
+    ),
+  );
+}
+
+export function ButtonGroup({
+  className = "",
+  orientation = "horizontal",
+  attached = false,
+  justify = "start",
+  children,
+  ...props
+}) {
+  const classes = ["button-group"];
+  if (className) classes.push(className);
+
+  return React.createElement(
+    "div",
+    {
+      role: "group",
+      className: classes.join(" "),
+      "data-orientation": normalizeOrientation(orientation),
+      "data-attached": attached ? "true" : "false",
+      "data-justify": normalizeJustify(justify),
+      ...props,
+    },
+    children,
+  );
+}

package/dist/react/checkbox.js

@@ -0,0 +1,43 @@
+import React from "react";
+
+function hasLabelContent(value) {
+  if (value === null || value === undefined || value === false) return false;
+  if (typeof value === "string") return value.trim().length > 0;
+  if (Array.isArray(value)) return value.some(hasLabelContent);
+  return true;
+}
+
+export function Checkbox({
+  className = "",
+  wrapperClassName = "",
+  label,
+  children,
+  ...props
+}) {
+  const classes = ["checkbox"];
+  if (className) classes.push(className);
+
+  const content = children ?? label;
+  const hasLabel = hasLabelContent(content);
+  const disabled = Boolean(props.disabled);
+  const input = React.createElement("input", {
+    type: "checkbox",
+    className: classes.join(" "),
+    ...props,
+  });
+
+  if (!hasLabel) return input;
+
+  const wrapperClasses = ["checkbox-field"];
+  if (disabled) wrapperClasses.push("is-disabled");
+  if (wrapperClassName) wrapperClasses.push(wrapperClassName);
+
+  return React.createElement(
+    "label",
+    {
+      className: wrapperClasses.join(" "),
+    },
+    input,
+    React.createElement("span", { className: "checkbox-field__text" }, content),
+  );
+}

package/dist/react/icon.js

@@ -0,0 +1,50 @@
+import React from "react";
+
+function resolveIconUrl(name, folder, src) {
+  if (src) return src;
+  return new URL(`../assets/${folder}/${name}.svg`, import.meta.url).href;
+}
+
+function humanizeName(name) {
+  return String(name || "")
+    .replace(/[-_]+/g, " ")
+    .trim();
+}
+
+export function Icon({
+  name,
+  src,
+  label,
+  folder = "icons",
+  decorative,
+  className = "",
+  style,
+  ...props
+}) {
+  if (!name && !src) return null;
+
+  const iconUrl = resolveIconUrl(name, folder, src);
+  const isDecorative = decorative ?? !label;
+  const classes = ["icon"];
+  if (className) classes.push(className);
+
+  const mergedStyle = {
+    "--icon-src": `url(${JSON.stringify(iconUrl)})`,
+    ...style,
+  };
+
+  const accessibilityProps = {};
+  if (isDecorative) {
+    accessibilityProps["aria-hidden"] = true;
+  } else {
+    accessibilityProps.role = "img";
+    accessibilityProps["aria-label"] = label || humanizeName(name);
+  }
+
+  return React.createElement("span", {
+    className: classes.join(" "),
+    style: mergedStyle,
+    ...accessibilityProps,
+    ...props,
+  });
+}

package/dist/react/index.js

@@ -0,0 +1,5 @@
+export { Button, ButtonGroup } from "./button.js";
+export { Checkbox } from "./checkbox.js";
+export { Icon } from "./icon.js";
+export { Input } from "./input.js";
+export { LabelContent, FieldLabel } from "./label.js";

package/dist/react/input.js

@@ -0,0 +1,12 @@
+import React from "react";
+
+export function Input({ className = "", type = "text", ...props }) {
+  const classes = ["input"];
+  if (className) classes.push(className);
+
+  return React.createElement("input", {
+    type,
+    className: classes.join(" "),
+    ...props,
+  });
+}

package/dist/react/label.js

@@ -0,0 +1,125 @@
+import React from "react";
+import { Icon } from "./icon.js";
+
+function hasTextContent(value) {
+  if (value === null || value === undefined || value === false) return false;
+  if (typeof value === "string") return value.trim().length > 0;
+  if (Array.isArray(value)) return value.some(hasTextContent);
+  return true;
+}
+
+function renderIcon(icon, position) {
+  if (!icon) return null;
+
+  if (React.isValidElement(icon)) {
+    return React.cloneElement(icon, {
+      "data-slot": position,
+    });
+  }
+
+  if (typeof icon === "string") {
+    return React.createElement(Icon, {
+      name: icon,
+      decorative: true,
+      "data-slot": position,
+    });
+  }
+
+  if (typeof icon === "object") {
+    const iconProps = { ...icon };
+    if (iconProps.decorative === undefined) {
+      iconProps.decorative = true;
+    }
+    iconProps["data-slot"] = position;
+    return React.createElement(Icon, iconProps);
+  }
+
+  return null;
+}
+
+export function LabelContent({
+  children,
+  text,
+  startIcon,
+  endIcon,
+  iconOnly,
+  className = "",
+  ...props
+}) {
+  const content = children ?? text;
+  const resolvedIconOnly = iconOnly ?? !hasTextContent(content);
+  const classes = ["label-content"];
+
+  if (resolvedIconOnly) classes.push("is-icon-only");
+  if (className) classes.push(className);
+
+  const textNode = hasTextContent(content)
+    ? React.createElement("span", { className: "label-content__text" }, content)
+    : null;
+
+  return React.createElement(
+    "span",
+    {
+      className: classes.join(" "),
+      ...props,
+    },
+    renderIcon(startIcon, "start"),
+    textNode,
+    renderIcon(endIcon, "end"),
+  );
+}
+
+export function FieldLabel({
+  htmlFor,
+  required = false,
+  requiredText = "required",
+  className = "",
+  children,
+  text,
+  startIcon,
+  endIcon,
+  iconOnly,
+  ...props
+}) {
+  const classes = ["field-label"];
+  if (className) classes.push(className);
+
+  const requiredBadge = required
+    ? React.createElement(
+        "span",
+        {
+          className: "field-label__required",
+          "aria-hidden": true,
+        },
+        "*",
+      )
+    : null;
+
+  const requiredA11yText = required
+    ? React.createElement(
+        "span",
+        { className: "field-label__required-text" },
+        ` (${requiredText})`,
+      )
+    : null;
+
+  return React.createElement(
+    "label",
+    {
+      htmlFor,
+      className: classes.join(" "),
+      ...props,
+    },
+    React.createElement(
+      LabelContent,
+      {
+        startIcon,
+        endIcon,
+        iconOnly,
+      },
+      children ?? text,
+    ),
+    requiredBadge,
+    requiredA11yText,
+  );
+}

package/dist/tokens/css/brand-a.tokens.css

@@ -0,0 +1,22 @@
+/* Auto-generated design tokens from Figma */
+/* Generated on 2026-03-04T20:50:34.061Z */
+
+:root[data-brand="a"] {
+  --brand-color-primary: var(--color-brand-a-purple-600);
+  --brand-color-primary-dark: var(--color-brand-a-purple-800);
+  --brand-color-accent: var(--color-brand-a-blue-500);
+  --brand-color-subtle: var(--color-neutral-500);
+  --brand-color-subtle-light: var(--color-neutral-200);
+  --brand-color-subtle-dark: var(--color-neutral-800);
+  --brand-color-accent-dark: var(--color-brand-a-blue-700);
+  --brand-color-functional-base: var(--color-brand-a-blue-700);
+  --brand-color-functional-base-dark: var(--color-brand-a-blue-800);
+  --brand-color-functional-success: var(--color-brand-a-green);
+  --brand-color-functional-danger: var(--color-brand-a-red);
+  --brand-font-lead: var(--font-family-serif);
+  --brand-font-base: var(--font-family-sans);
+  --brand-corner-button: var(--size-radius-full);
+  --brand-corner-input: var(--size-radius-200);
+  --brand-corner-card: var(--size-radius-200);
+  --brand-corner-modal: var(--size-radius-400);
+}

package/dist/tokens/css/brand-b.tokens.css

@@ -0,0 +1,22 @@
+/* Auto-generated design tokens from Figma */
+/* Generated on 2026-03-04T20:50:34.063Z */
+
+:root[data-brand="b"] {
+  --brand-color-primary: var(--color-brand-b-blue-500);
+  --brand-color-primary-dark: var(--color-brand-b-blue-700);
+  --brand-color-accent: var(--color-brand-b-purple-600);
+  --brand-color-subtle: var(--color-neutral-500);
+  --brand-color-subtle-light: var(--color-neutral-200);
+  --brand-color-subtle-dark: var(--color-neutral-800);
+  --brand-color-accent-dark: var(--color-brand-b-purple-800);
+  --brand-color-functional-base: var(--color-brand-b-purple-600);
+  --brand-color-functional-base-dark: var(--color-brand-b-purple-800);
+  --brand-color-functional-success: var(--color-brand-b-green);
+  --brand-color-functional-danger: var(--color-brand-b-red);
+  --brand-font-lead: var(--font-family-serif);
+  --brand-font-base: var(--font-family-sans);
+  --brand-corner-button: var(--size-radius-000);
+  --brand-corner-input: var(--size-radius-000);
+  --brand-corner-card: var(--size-radius-100);
+  --brand-corner-modal: var(--size-radius-200);
+}

package/dist/tokens/css/color.dark.tokens.css

@@ -0,0 +1,32 @@
+/* Auto-generated design tokens from Figma */
+/* Generated on 2026-03-04T20:50:34.068Z */
+
+:root[data-mode="dark"] {
+  --color-focus: var(--brand-color-primary-dark);
+  --color-text-default: var(--color-neutral-800);
+  --color-text-inverse: var(--color-neutral-1000);
+  --color-text-disabled: var(--color-neutral-600);
+  --color-text-brand: var(--brand-color-primary-dark);
+  --color-text-subtle: var(--brand-color-subtle-dark);
+  --color-text-strong: var(--color-neutral-1000);
+  --color-text-danger: var(--brand-color-functional-danger);
+  --color-text-success: var(--brand-color-functional-success);
+  --color-fill-surface: var(--color-neutral-1000);
+  --color-fill-disabled: var(--color-neutral-300);
+  --color-fill-hover: var(--color-neutral-alpha-500);
+  --color-fill-brand: var(--brand-color-primary);
+  --color-fill-subtle: var(--brand-color-subtle);
+  --color-fill-active: var(--brand-color-accent);
+  --color-fill-danger: var(--brand-color-functional-danger);
+  --color-fill-success: var(--brand-color-functional-success);
+  --color-border-default: var(--color-neutral-800);
+  --color-border-subtle: var(--brand-color-subtle-dark);
+  --color-border-strong: var(--color-neutral-1000);
+  --color-border-brand: var(--brand-color-primary);
+  --color-border-disabled: var(--color-neutral-500);
+  --color-border-danger: var(--brand-color-functional-danger);
+  --color-overlay-backdrop: var(--color-neutral-alpha-400);
+  --color-overlay-hover: var(--color-neutral-alpha-200);
+  --color-overlay-active: var(--color-neutral-alpha-400);
+  --color-overlay-selected: var(--color-neutral-alpha-600);
+}

package/dist/tokens/css/color.light.tokens.css

@@ -0,0 +1,32 @@
+/* Auto-generated design tokens from Figma */
+/* Generated on 2026-03-04T20:50:34.069Z */
+
+:root {
+  --color-focus: var(--brand-color-primary);
+  --color-text-default: var(--color-neutral-800);
+  --color-text-inverse: var(--color-neutral-000);
+  --color-text-disabled: var(--color-neutral-600);
+  --color-text-brand: var(--brand-color-primary);
+  --color-text-subtle: var(--brand-color-subtle);
+  --color-text-strong: var(--color-neutral-1000);
+  --color-text-danger: var(--brand-color-functional-danger);
+  --color-text-success: var(--brand-color-functional-success);
+  --color-fill-surface: var(--color-neutral-000);
+  --color-fill-disabled: var(--color-neutral-300);
+  --color-fill-hover: var(--color-neutral-alpha-500);
+  --color-fill-brand: var(--brand-color-primary);
+  --color-fill-subtle: var(--brand-color-subtle-light);
+  --color-fill-active: var(--brand-color-accent);
+  --color-fill-danger: var(--brand-color-functional-danger);
+  --color-fill-success: var(--brand-color-functional-success);
+  --color-border-default: var(--color-neutral-800);
+  --color-border-subtle: var(--brand-color-subtle);
+  --color-border-strong: var(--color-neutral-1000);
+  --color-border-brand: var(--brand-color-primary);
+  --color-border-disabled: var(--color-neutral-500);
+  --color-border-danger: var(--brand-color-functional-danger);
+  --color-overlay-backdrop: var(--color-neutral-alpha-400);
+  --color-overlay-hover: var(--color-neutral-alpha-200);
+  --color-overlay-active: var(--color-neutral-alpha-400);
+  --color-overlay-selected: var(--color-neutral-alpha-600);
+}

package/dist/tokens/css/component.tokens.css

@@ -0,0 +1,103 @@
+/* Auto-generated design tokens from Figma */
+/* Generated on 2026-03-04T20:50:34.066Z */
+
+:root {
+  --button-font-family: var(--brand-font-lead);
+  --button-font-weight: var(--typography-label-font-weight);
+  --button-font-size: var(--typography-label-font-size);
+  --button-line-height: var(--typography-label-line-height);
+  --button-border-size-default: var(--size-border-000);
+  --button-border-size-hover: var(--size-border-100);
+  --button-border-size-active: var(--size-border-200);
+  --button-border-radius: var(--brand-corner-button);
+  --button-padding-inline: var(--size-spacing-400);
+  --button-padding-inline-icon-only: var(--size-spacing-200);
+  --button-padding-block: var(--size-spacing-200);
+  --button-gap: var(--size-spacing-200);
+  --button-text-color-disabled: var(--color-text-disabled);
+  --button-border-color-disabled: var(--color-border-disabled);
+  --button-container-background-disabled: var(--color-fill-disabled);
+  --button-overlay-hover: var(--color-overlay-hover);
+  --button-overlay-active: var(--color-overlay-active);
+  --button-height: 2.5rem;
+  --button-solid-text-color-default: var(--color-text-inverse);
+  --button-solid-text-color-hover: var(--color-text-inverse);
+  --button-solid-text-color-active: var(--color-text-inverse);
+  --button-solid-border-color-default: var(--color-border-brand);
+  --button-solid-border-color-hover: var(--color-border-brand);
+  --button-solid-border-color-focus: var(--color-border-brand);
+  --button-solid-border-color-active: var(--color-border-brand);
+  --button-solid-container-background-default: var(--color-fill-brand);
+  --button-solid-container-background-hover: var(--color-fill-brand);
+  --button-solid-container-background-focus: var(--color-fill-brand);
+  --button-solid-container-background-active: var(--color-fill-brand);
+  --button-outline-text-color-default: var(--color-text-brand);
+  --button-outline-text-color-hover: var(--color-text-brand);
+  --button-outline-text-color-active: var(--color-text-brand);
+  --button-outline-border-color-default: var(--color-border-brand);
+  --button-outline-border-color-hover: var(--color-border-brand);
+  --button-outline-border-color-active: var(--color-border-brand);
+  --button-outline-border-color-focus: var(--color-border-brand);
+  --button-outline-container-background-default: var(--color-fill-surface);
+  --button-outline-container-background-hover: var(--color-fill-surface);
+  --button-outline-container-background-focus: var(--color-fill-surface);
+  --button-outline-container-background-active: var(--color-fill-surface);
+  --button-ghost-text-color-default: var(--color-text-brand);
+  --button-ghost-text-color-hover: var(--color-text-brand);
+  --button-ghost-text-color-active: var(--color-text-brand);
+  --button-ghost-border-color-default: var(--color-transparent);
+  --button-ghost-border-color-hover: var(--color-transparent);
+  --button-ghost-border-color-focus: var(--color-transparent);
+  --button-ghost-border-color-active: var(--color-transparent);
+  --button-ghost-container-background-default: var(--color-fill-surface);
+  --button-ghost-container-background-hover: var(--color-fill-surface);
+  --button-ghost-container-background-focus: var(--color-fill-surface);
+  --button-ghost-container-background-active: var(--color-fill-surface);
+  --modal-backdrop-color: var(--color-overlay-backdrop);
+  --modal-surface-color: var(--color-fill-surface);
+  --modal-surface-border-radius: var(--brand-corner-modal);
+  --input-font-family: var(--brand-font-base);
+  --input-font-weight: var(--typography-body-font-weight);
+  --input-font-size: var(--typography-label-font-size);
+  --input-line-height: var(--typography-body-line-height);
+  --input-border-size-default: var(--size-border-100);
+  --input-border-size-hover: var(--size-border-100);
+  --input-border-size-active: var(--size-border-200);
+  --input-border-radius: var(--brand-corner-input);
+  --input-padding-inline: var(--size-spacing-200);
+  --input-padding-inline-icon-only: var(--size-spacing-200);
+  --input-padding-block: var(--size-spacing-200);
+  --input-gap: var(--size-spacing-200);
+  --input-text-color-disabled: var(--color-text-disabled);
+  --input-border-color-disabled: var(--color-border-disabled);
+  --input-container-background-disabled: var(--color-fill-disabled);
+  --input-overlay-hover: var(--color-transparent);
+  --input-overlay-active: var(--color-transparent);
+  --input-height: 2.5rem;
+  --input-text-text-color-placeholder: var(--color-text-subtle);
+  --input-text-text-color-default: var(--color-text-default);
+  --input-text-text-color-hover: var(--color-text-default);
+  --input-text-text-color-active: var(--color-text-default);
+  --input-text-border-color-default: var(--color-border-default);
+  --input-text-border-color-hover: var(--color-border-brand);
+  --input-text-border-color-active: var(--color-border-brand);
+  --input-text-border-color-focus: var(--color-border-brand);
+  --input-text-border-color-invalid: var(--color-border-danger);
+  --input-text-border-color-valid: var(--color-border-strong);
+  --input-text-container-background-default: var(--color-fill-surface);
+  --input-text-container-background-hover: var(--color-fill-surface);
+  --input-text-container-background-focus: var(--color-fill-surface);
+  --input-text-container-background-active: var(--color-fill-surface);
+  --form-gap: var(--size-spacing-400);
+  --form-padding-inline: var(--size-spacing-400);
+  --form-padding-block: var(--size-spacing-400);
+  --form-border-radius: var(--brand-corner-card);
+  --form-border-size: var(--size-border-100);
+  --form-container-background: var(--color-fill-surface);
+  --form-container-border-color: var(--color-border-subtle);
+  --form-group-gap: var(--size-spacing-400);
+  --form-group-title-color: var(--color-text-default);
+  --form-field-gap: var(--size-spacing-200);
+  --form-field-helper-text-color-default: var(--color-text-subtle);
+  --form-field-helper-text-color-invalid: var(--color-text-danger);
+}

package/dist/tokens/css/primitives.tokens.css

@@ -0,0 +1,127 @@
+/* Auto-generated design tokens from Figma */
+/* Generated on 2026-03-04T20:50:34.071Z */
+
+:root {
+  --color-transparent: rgba(0 0 0 / 0);
+  --color-neutral-100: rgb(230 230 230);
+  --color-neutral-200: rgb(204 204 204);
+  --color-neutral-300: rgb(179 179 179);
+  --color-neutral-400: rgb(128 128 128);
+  --color-neutral-500: rgb(128 128 128);
+  --color-neutral-600: rgb(102 102 102);
+  --color-neutral-700: rgb(77 77 77);
+  --color-neutral-800: rgb(51 51 51);
+  --color-neutral-900: rgb(26 26 26);
+  --color-neutral-1000: rgb(0 0 0);
+  --color-neutral-000: rgb(255 255 255);
+  --color-neutral-alpha-100: rgba(0 0 0 / 0.1);
+  --color-neutral-alpha-200: rgba(0 0 0 / 0.2);
+  --color-neutral-alpha-300: rgba(0 0 0 / 0.3);
+  --color-neutral-alpha-400: rgba(0 0 0 / 0.4);
+  --color-neutral-alpha-500: rgba(0 0 0 / 0.5);
+  --color-neutral-alpha-600: rgba(0 0 0 / 0.6);
+  --color-neutral-alpha-700: rgba(0 0 0 / 0.7);
+  --color-neutral-alpha-800: rgba(0 0 0 / 0.8);
+  --color-neutral-alpha-900: rgba(0 0 0 / 0.9);
+  --color-neutral-alpha-000: rgba(0 0 0 / 0);
+  --color-brand-a-red: rgb(255 0 0);
+  --color-brand-a-green: rgb(19 174 92);
+  --color-brand-a-purple-200: rgb(222 192 255);
+  --color-brand-a-purple-600: rgb(151 71 255);
+  --color-brand-a-purple-800: rgb(85 26 139);
+  --color-brand-a-blue-200: rgb(226 244 253);
+  --color-brand-a-blue-500: rgb(112 203 244);
+  --color-brand-a-blue-700: rgb(12 75 243);
+  --color-brand-a-blue-800: rgb(27 17 92);
+  --color-brand-b-red: rgb(204 0 0);
+  --color-brand-b-green: rgb(14 129 68);
+  --color-brand-b-purple-200: rgb(196 143 255);
+  --color-brand-b-purple-600: rgb(122 20 255);
+  --color-brand-b-purple-800: rgb(58 18 95);
+  --color-brand-b-blue-200: rgb(179 226 250);
+  --color-brand-b-blue-500: rgb(66 186 240);
+  --color-brand-b-blue-700: rgb(10 60 194);
+  --color-brand-b-blue-800: rgb(14 9 47);
+  --font-size-xs: .75rem;
+  --font-size-sm: .875rem;
+  --font-size-md: 1rem;
+  --font-size-lg: 1.25rem;
+  --font-size-xl: 1.5rem;
+  --font-size-xxl: 2rem;
+  --font-size-xxxl: 2.5rem;
+  --font-weight-100: 100;
+  --font-weight-200: 200;
+  --font-weight-300: 300;
+  --font-weight-400: 400;
+  --font-weight-500: 500;
+  --font-weight-600: 600;
+  --font-weight-700: 700;
+  --font-weight-800: 800;
+  --font-weight-900: 900;
+  --font-family-sans: Inter;
+  --font-family-serif: Rokkitt;
+  --font-family-mono: SFMono-Regular;
+  --line-height-xs: 1rem;
+  --line-height-sm: 1.25rem;
+  --line-height-md: 1.5rem;
+  --line-height-lg: 1.75rem;
+  --line-height-xl: 2rem;
+  --line-height-xxl: 2.75rem;
+  --line-height-xxxl: 3.5rem;
+  --size-spacing-100: .25rem;
+  --size-spacing-200: .5rem;
+  --size-spacing-300: .75rem;
+  --size-spacing-400: 1rem;
+  --size-spacing-500: 1.25rem;
+  --size-spacing-600: 1.5rem;
+  --size-spacing-700: 2rem;
+  --size-spacing-800: 2.5rem;
+  --size-spacing-900: 3rem;
+  --size-spacing-1000: 4rem;
+  --size-spacing-000: 0;
+  --size-radius-100: .125rem;
+  --size-radius-200: .25rem;
+  --size-radius-300: .375rem;
+  --size-radius-400: .5rem;
+  --size-radius-500: .75rem;
+  --size-radius-600: 1rem;
+  --size-radius-700: 1.25rem;
+  --size-radius-800: 1.5rem;
+  --size-radius-900: 2rem;
+  --size-radius-000: 0;
+  --size-radius-full: 625rem;
+  --shadow-focus: .5rem;
+  --breakpoint-100: 580px;
+  --breakpoint-200: 760px;
+  --breakpoint-300: 960px;
+  --breakpoint-400: 1200px;
+  --breakpoint-500: 1440px;
+  --breakpoint-600: 1920px;
+  --container-100: 192px;
+  --container-200: 384px;
+  --container-300: 576px;
+  --container-400: 768px;
+  --container-500: 960px;
+  --container-600: 1152px;
+  --layout-base-grid: .25rem;
+  --layout-columns: 12;
+  --layout-gutter: 1rem;
+  --layout-max-width: 1236px;
+  --layout-column-max-width: 412px;
+  --layout-float-breakpoint: 1220px;
+  --size-border-100: .0625rem;
+  --size-border-200: .125rem;
+  --size-border-300: .1875rem;
+  --size-border-000: 0;
+  --zindex-hidden: -1;
+  --zindex-base: 0;
+  --zindex-raised: 1;
+  --zindex-dropdown-base: 900;
+  --zindex-dropdown: 1000;
+  --zindex-sticky: 1020;
+  --zindex-fixed: 1030;
+  --zindex-modal-overlay: 1040;
+  --zindex-modal: 1050;
+  --zindex-popover: 1060;
+  --zindex-tooltip: 1070;
+}