ui-foundations 0.4.1 → 0.6.0

package/dist/react/accordion.js

@@ -0,0 +1,36 @@
+import React from "react";
+
+/**
+ * Accordion — expandable/collapsible content sections using native details/summary.
+ *
+ * @param {object} props
+ * @param {string} [props.className=""] - Additional CSS classes
+ */
+export function Accordion({ className = "", children, ...props }) {
+  const classes = ["accordion"];
+  if (className) classes.push(className);
+
+  return React.createElement("div", { className: classes.join(" "), ...props }, children);
+}
+
+/**
+ * AccordionItem — single expandable section.
+ *
+ * @param {object} props
+ * @param {string} props.title - Summary/trigger text
+ * @param {boolean} [props.open=false] - Whether expanded
+ * @param {boolean} [props.disabled=false] - Whether disabled
+ * @param {string} [props.className=""] - Additional CSS classes
+ */
+export function AccordionItem({ title, open = false, disabled = false, className = "", children, ...props }) {
+  const classes = ["accordion-item"];
+  if (disabled) classes.push("is-disabled");
+  if (className) classes.push(className);
+
+  return React.createElement(
+    "details",
+    { className: classes.join(" "), open, ...props },
+    React.createElement("summary", null, title),
+    React.createElement("div", { className: "accordion-item__content" }, children)
+  );
+}

package/dist/react/avatar.js

@@ -0,0 +1,34 @@
+import React from "react";
+
+/**
+ * Avatar — thumbnail representation of a user or entity.
+ *
+ * @param {object} props
+ * @param {string} [props.src] - Image URL
+ * @param {string} [props.alt=""] - Alt text for image
+ * @param {string} [props.initials=""] - Fallback initials when no image
+ * @param {"xs"|"sm"|"md"|"lg"|"xl"} [props.size="md"] - Size variant
+ * @param {string} [props.className=""] - Additional CSS classes
+ */
+export function Avatar({
+  src,
+  alt = "",
+  initials = "",
+  size = "md",
+  className = "",
+  ...props
+}) {
+  const classes = ["avatar"];
+  if (size && size !== "md") classes.push(size);
+  if (className) classes.push(className);
+
+  const children = src
+    ? React.createElement("img", { src, alt })
+    : React.createElement("span", { className: "avatar__initials" }, initials);
+
+  return React.createElement(
+    "span",
+    { className: classes.join(" "), role: "img", "aria-label": alt || initials, ...props },
+    children
+  );
+}

package/dist/react/button.js

@@ -1,5 +1,6 @@
 import React from "react";
 import { LabelContent, hasTextContent } from "./label.js";
+import { warnDev } from "./warn-dev.js";
 
 function normalizeOrientation(value) {
   return value === "vertical" ? "vertical" : "horizontal";
@@ -9,18 +10,6 @@ function normalizeJustify(value) {
   return value === "stretch" ? "stretch" : "start";
 }
 
-function warnDev(message) {
-  if (
-    typeof process !== "undefined" &&
-    process.env &&
-    process.env.NODE_ENV === "production"
-  ) {
-    return;
-  }
-
-  console.warn(message);
-}
-
 export function Button({
   variant = "solid",
   className = "",

package/dist/react/checkbox.js

@@ -1,23 +1,6 @@
 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;
-}
-
-function warnDev(message) {
-  if (
-    typeof process !== "undefined" &&
-    process.env &&
-    process.env.NODE_ENV === "production"
-  ) {
-    return;
-  }
-
-  console.warn(message);
-}
+import { hasTextContent } from "./label.js";
+import { warnDev } from "./warn-dev.js";
 
 export function Checkbox({
   className = "",
@@ -32,7 +15,7 @@ export function Checkbox({
   if (className) classes.push(className);
 
   const content = children ?? label;
-  const hasLabel = hasLabelContent(content);
+  const hasLabel = hasTextContent(content);
   const disabled = Boolean(props.disabled);
   const inputRef = React.useRef(null);
 

package/dist/react/divider.js

@@ -0,0 +1,31 @@
+import React from "react";
+
+/**
+ * Divider — visual separator between content sections.
+ *
+ * @param {object} props
+ * @param {"horizontal"|"vertical"} [props.orientation="horizontal"] - Orientation
+ * @param {"subtle"|""} [props.variant=""] - Color variant
+ * @param {string} [props.className=""] - Additional CSS classes
+ */
+export function Divider({
+  orientation = "horizontal",
+  variant = "",
+  className = "",
+  ...props
+}) {
+  const classes = ["divider"];
+  if (variant) classes.push(variant);
+  if (className) classes.push(className);
+
+  const elementProps = {
+    className: classes.join(" "),
+    ...props,
+  };
+
+  if (orientation === "vertical") {
+    elementProps["aria-orientation"] = "vertical";
+  }
+
+  return React.createElement("hr", elementProps);
+}

package/dist/react/icon.js

@@ -1,4 +1,5 @@
 import React from "react";
+import { warnDev } from "./warn-dev.js";
 
 function resolveIconUrl(name, folder, src) {
   if (src) return src;
@@ -11,18 +12,6 @@ function humanizeName(name) {
     .trim();
 }
 
-function warnDev(message) {
-  if (
-    typeof process !== "undefined" &&
-    process.env &&
-    process.env.NODE_ENV === "production"
-  ) {
-    return;
-  }
-
-  console.warn(message);
-}
-
 export function Icon({
   name,
   src,

package/dist/react/index.js

@@ -6,3 +6,9 @@ export { LabelContent, FieldLabel } from "./label.js";
 export { Radio } from "./radio.js";
 export { Switch } from "./switch.js";
 export { Badge } from "./badge.js";
+export { Divider } from "./divider.js";
+export { TextArea } from "./textarea.js";
+export { Avatar } from "./avatar.js";
+export { Accordion, AccordionItem } from "./accordion.js";
+export { TabList, Tab, TabPanel } from "./tabs.js";
+export { Tooltip } from "./tooltip.js";

package/dist/react/radio.js

@@ -1,23 +1,6 @@
 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;
-}
-
-function warnDev(message) {
-  if (
-    typeof process !== "undefined" &&
-    process.env &&
-    process.env.NODE_ENV === "production"
-  ) {
-    return;
-  }
-
-  console.warn(message);
-}
+import { hasTextContent } from "./label.js";
+import { warnDev } from "./warn-dev.js";
 
 export function Radio({
   className = "",
@@ -30,7 +13,7 @@ export function Radio({
   if (className) classes.push(className);
 
   const content = children ?? label;
-  const hasLabel = hasLabelContent(content);
+  const hasLabel = hasTextContent(content);
   const disabled = Boolean(props.disabled);
 
   const input = React.createElement("input", {

package/dist/react/switch.js

@@ -1,23 +1,6 @@
 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;
-}
-
-function warnDev(message) {
-  if (
-    typeof process !== "undefined" &&
-    process.env &&
-    process.env.NODE_ENV === "production"
-  ) {
-    return;
-  }
-
-  console.warn(message);
-}
+import { hasTextContent } from "./label.js";
+import { warnDev } from "./warn-dev.js";
 
 export function Switch({
   className = "",
@@ -31,7 +14,7 @@ export function Switch({
   if (className) classes.push(className);
 
   const content = children ?? label;
-  const hasLabel = hasLabelContent(content);
+  const hasLabel = hasTextContent(content);
   const disabled = Boolean(props.disabled);
   const input = React.createElement("input", {
     type: "checkbox",

package/dist/react/tabs.js

@@ -0,0 +1,72 @@
+import React from "react";
+
+/**
+ * TabList — container for tab buttons.
+ *
+ * @param {object} props
+ * @param {"horizontal"|"vertical"} [props.orientation="horizontal"]
+ * @param {string} [props.ariaLabel=""] - Accessible label
+ * @param {string} [props.className=""] - Additional CSS classes
+ */
+export function TabList({ orientation = "horizontal", ariaLabel = "", className = "", children, ...props }) {
+  const classes = ["tab-list"];
+  if (className) classes.push(className);
+
+  const elementProps = {
+    className: classes.join(" "),
+    role: "tablist",
+    "aria-orientation": orientation,
+    ...props,
+  };
+  if (ariaLabel) elementProps["aria-label"] = ariaLabel;
+
+  return React.createElement("div", elementProps, children);
+}
+
+/**
+ * Tab — individual tab button.
+ *
+ * @param {object} props
+ * @param {string} props.label - Tab label text
+ * @param {boolean} [props.selected=false] - Whether active
+ * @param {boolean} [props.disabled=false] - Whether disabled
+ * @param {string} [props.controls=""] - ID of controlled panel
+ * @param {string} [props.className=""] - Additional CSS classes
+ */
+export function Tab({ label, selected = false, disabled = false, controls = "", className = "", ...props }) {
+  const classes = ["tab"];
+  if (className) classes.push(className);
+
+  return React.createElement("button", {
+    className: classes.join(" "),
+    role: "tab",
+    type: "button",
+    "aria-selected": String(selected),
+    "aria-controls": controls || undefined,
+    disabled,
+    tabIndex: selected ? 0 : -1,
+    ...props,
+  }, label);
+}
+
+/**
+ * TabPanel — content panel associated with a tab.
+ *
+ * @param {object} props
+ * @param {string} [props.id=""] - Panel ID (referenced by tab's aria-controls)
+ * @param {boolean} [props.hidden=false] - Whether hidden
+ * @param {string} [props.className=""] - Additional CSS classes
+ */
+export function TabPanel({ id = "", hidden = false, className = "", children, ...props }) {
+  const classes = ["tab-panel"];
+  if (className) classes.push(className);
+
+  return React.createElement("div", {
+    className: classes.join(" "),
+    role: "tabpanel",
+    id: id || undefined,
+    hidden,
+    tabIndex: 0,
+    ...props,
+  }, children);
+}

package/dist/react/textarea.js

@@ -0,0 +1,38 @@
+import React from "react";
+
+/**
+ * TextArea — multi-line text input.
+ *
+ * @param {object} props
+ * @param {string} [props.placeholder=""] - Placeholder text
+ * @param {string} [props.value] - Controlled value
+ * @param {boolean} [props.disabled=false] - Disabled state
+ * @param {boolean} [props.readonly=false] - Readonly state
+ * @param {number} [props.rows] - Visible rows
+ * @param {string} [props.className=""] - Additional CSS classes
+ */
+export function TextArea({
+  placeholder = "",
+  value,
+  disabled = false,
+  readonly = false,
+  rows,
+  className = "",
+  ...props
+}) {
+  const classes = ["textarea"];
+  if (className) classes.push(className);
+
+  const elementProps = {
+    className: classes.join(" "),
+    placeholder,
+    disabled,
+    readOnly: readonly,
+    ...props,
+  };
+
+  if (value !== undefined) elementProps.value = value;
+  if (rows) elementProps.rows = rows;
+
+  return React.createElement("textarea", elementProps);
+}

package/dist/react/tooltip.js

@@ -0,0 +1,25 @@
+import React from "react";
+
+/**
+ * Tooltip — contextual help text on hover/focus.
+ *
+ * @param {object} props
+ * @param {string} props.text - Tooltip content
+ * @param {"top"|"bottom"|"left"|"right"} [props.placement="top"] - Position
+ * @param {string} [props.className=""] - Additional CSS classes
+ */
+export function Tooltip({ text, placement = "top", className = "", children, ...props }) {
+  const triggerClasses = ["tooltip-trigger"];
+  if (className) triggerClasses.push(className);
+
+  return React.createElement(
+    "span",
+    { className: triggerClasses.join(" "), ...props },
+    children,
+    React.createElement(
+      "span",
+      { className: "tooltip", role: "tooltip", "data-placement": placement },
+      text
+    )
+  );
+}

package/dist/react/warn-dev.js

@@ -0,0 +1,15 @@
+/**
+ * Log a warning in non-production environments.
+ * Shared across React wrappers to avoid copy-pasting the same guard.
+ */
+export function warnDev(message) {
+  if (
+    typeof process !== "undefined" &&
+    process.env &&
+    process.env.NODE_ENV === "production"
+  ) {
+    return;
+  }
+
+  console.warn(message);
+}

package/dist/tokens/css/appearance-modes.tokens.mode-dark.css

@@ -1,5 +1,5 @@
 /* Auto-generated design tokens from Figma */
-/* Generated on 2026-04-28T09:23:28.554Z */
+/* Generated on 2026-05-22T09:23:10.603Z */
 
 :root[data-mode="dark"] {
   --color-text-default: var(--color-neutral-800);
@@ -12,7 +12,7 @@
   --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-hover: var(--color-neutral-alpha-inverse-100);
   --color-fill-brand: var(--brand-color-primary);
   --color-fill-subtle: var(--brand-color-subtle);
   --color-fill-active: var(--brand-color-accent);
@@ -24,9 +24,9 @@
   --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);
+  --color-overlay-backdrop: var(--color-neutral-alpha-inverse-400);
+  --color-overlay-hover: var(--color-neutral-alpha-inverse-100);
+  --color-overlay-active: var(--color-neutral-alpha-inverse-200);
+  --color-overlay-selected: var(--color-neutral-alpha-inverse-300);
   --color-focus: var(--brand-color-primary-dark);
 }

package/dist/tokens/css/appearance-modes.tokens.mode-light.css

@@ -1,5 +1,5 @@
 /* Auto-generated design tokens from Figma */
-/* Generated on 2026-04-28T09:23:28.552Z */
+/* Generated on 2026-05-22T09:23:10.601Z */
 
 :root {
   --color-text-default: var(--color-neutral-800);

package/dist/tokens/css/components-ui.tokens.css

@@ -1,5 +1,5 @@
 /* Auto-generated design tokens from Figma */
-/* Generated on 2026-04-28T09:23:28.559Z */
+/* Generated on 2026-05-22T09:23:10.611Z */
 
 :root {
   --button-border-size-hover: var(--size-border-100);
@@ -61,102 +61,100 @@
   --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);
+  --input-text-text-color-disabled: var(--color-text-disabled);
   --input-text-text-color-placeholder: var(--color-text-subtle);
-  --input-text-height-min: 2.5rem;
+  --input-border-border-color-default: var(--color-border-default);
+  --input-border-border-color-hover: var(--color-border-brand);
+  --input-border-border-color-active: var(--color-border-brand);
+  --input-border-border-color-focus: var(--color-border-brand);
+  --input-border-border-size-default: var(--size-border-100);
+  --input-border-border-size-hover: var(--size-border-100);
+  --input-border-border-size-active: var(--size-border-200);
+  --input-border-border-radius: var(--brand-corner-input);
+  --input-border-border-color-disabled: var(--color-border-disabled);
+  --input-border-border-color-invalid: var(--color-border-danger);
+  --input-border-border-color-valid: var(--color-border-strong);
   --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-container-background-default: var(--color-fill-surface);
+  --input-container-background-hover: var(--color-fill-surface);
+  --input-container-background-focus: var(--color-fill-surface);
+  --input-container-background-active: var(--color-fill-surface);
+  --input-container-background-disabled: var(--color-fill-disabled);
   --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-checkbox-text-color-default: var(--color-text-default);
-  --input-checkbox-text-color-hover: var(--color-text-strong);
-  --input-checkbox-text-color-active: var(--color-text-inverse);
-  --input-checkbox-border-color-default: var(--color-border-subtle);
-  --input-checkbox-border-color-hover: var(--color-border-strong);
-  --input-checkbox-border-color-active: var(--color-border-brand);
-  --input-checkbox-border-color-focus: var(--color-border-brand);
-  --input-checkbox-border-color-invalid: var(--color-border-danger);
-  --input-checkbox-border-color-valid: var(--color-border-strong);
-  --input-checkbox-border-color-disabled: var(--color-border-disabled);
-  --input-checkbox-container-background-default: var(--color-fill-surface);
-  --input-checkbox-container-background-hover: var(--color-fill-surface);
-  --input-checkbox-container-background-focus: var(--color-fill-surface);
-  --input-checkbox-container-background-active: var(--color-fill-brand);
-  --input-checkbox-container-background-disabled: var(--color-fill-disabled);
-  --input-checkbox-text-color-disabled: var(--color-text-disabled);
+  --input-height-min: 2.5rem;
+  --form-group-gap: var(--size-spacing-400);
+  --form-group-title-color: var(--color-text-default);
+  --form-padding-inline: var(--size-spacing-400);
+  --form-padding-block: var(--size-spacing-400);
+  --form-border-radius: var(--brand-corner-card);
+  --form-gap: var(--size-spacing-400);
+  --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);
+  --form-container-background: var(--color-fill-surface);
+  --form-container-border-color: var(--color-border-subtle);
+  --form-border-size: var(--size-border-100);
+  --checkbox-text-color-default: var(--color-text-default);
+  --checkbox-text-color-hover: var(--color-text-strong);
+  --checkbox-text-color-active: var(--color-text-inverse);
+  --checkbox-border-color-default: var(--color-border-subtle);
+  --checkbox-border-color-hover: var(--color-border-strong);
+  --checkbox-border-color-active: var(--color-border-brand);
+  --checkbox-border-color-focus: var(--color-border-brand);
+  --checkbox-border-color-invalid: var(--color-border-danger);
+  --checkbox-border-color-valid: var(--color-border-strong);
+  --checkbox-border-color-disabled: var(--color-border-disabled);
   --checkbox-border-size-hover: var(--size-border-200);
   --checkbox-border-size-disabled: var(--size-border-000);
   --checkbox-border-size-default: var(--size-border-100);
+  --checkbox-container-background-default: var(--color-fill-surface);
+  --checkbox-container-background-hover: var(--color-fill-surface);
+  --checkbox-container-background-focus: var(--color-fill-surface);
+  --checkbox-container-background-active: var(--color-fill-brand);
+  --checkbox-container-background-disabled: var(--color-fill-disabled);
+  --checkbox-text-color-disabled: var(--color-text-disabled);
   --input-radio-text-color-default: var(--color-text-default);
-  --input-radio-text-color-hover: var(--color-text-strong);
-  --input-radio-text-color-active: var(--color-text-inverse);
   --input-radio-text-color-disabled: var(--color-text-disabled);
   --input-radio-border-color-default: var(--color-border-subtle);
   --input-radio-border-color-hover: var(--color-border-strong);
   --input-radio-border-color-active: var(--color-border-brand);
-  --input-radio-border-color-focus: var(--color-border-brand);
   --input-radio-border-color-disabled: var(--color-border-disabled);
   --input-radio-container-background-default: var(--color-fill-surface);
-  --input-radio-container-background-hover: var(--color-fill-surface);
-  --input-radio-container-background-focus: var(--color-fill-surface);
-  --input-radio-container-background-active: var(--color-fill-brand);
   --input-radio-container-background-disabled: var(--color-fill-disabled);
   --radio-border-size-default: var(--size-border-100);
   --radio-border-size-hover: var(--size-border-200);
   --radio-border-size-disabled: var(--size-border-000);
-  --form-group-gap: var(--size-spacing-400);
-  --form-group-title-color: var(--color-text-default);
-  --form-padding-inline: var(--size-spacing-400);
-  --form-padding-block: var(--size-spacing-400);
-  --form-border-radius: var(--brand-corner-card);
-  --form-gap: var(--size-spacing-400);
-  --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);
-  --form-container-background: var(--color-fill-surface);
-  --form-container-border-color: var(--color-border-subtle);
-  --form-border-size: var(--size-border-100);
-  --badge-default-container-background: var(--color-fill-subtle);
   --badge-default-text-color: var(--color-text-default);
-  --badge-brand-container-background: var(--color-fill-brand);
+  --badge-default-border-color: var(--color-transparent);
+  --badge-default-container-background: var(--color-fill-subtle);
   --badge-brand-text-color: var(--color-text-inverse);
-  --badge-success-container-background: var(--color-fill-success);
+  --badge-brand-border-color: var(--color-transparent);
+  --badge-brand-container-background: var(--color-fill-brand);
   --badge-success-text-color: var(--color-text-inverse);
+  --badge-success-border-color: var(--color-transparent);
+  --badge-success-container-background: var(--color-fill-success);
+  --badge-font-family: var(--brand-font-lead);
+  --badge-font-weight: var(--typography-label-font-weight);
+  --badge-font-size: var(--typography-label-font-size);
+  --badge-line-height: var(--typography-label-line-height);
+  --badge-border-size-default: var(--size-border-100);
+  --badge-border-radius: var(--brand-corner-input);
+  --badge-padding-inline: var(--size-spacing-400);
+  --badge-padding-inline-icon-only: var(--size-spacing-200);
+  --badge-padding-block: var(--size-spacing-200);
+  --badge-gap: var(--size-spacing-200);
+  --badge-height-min: 2.5rem;
+  --badge-width-min: 2.5rem;
   --badge-danger-container-background: var(--color-fill-danger);
+  --badge-danger-border-color: var(--color-transparent);
   --badge-danger-text-color: var(--color-text-inverse);
-  --badge-border-radius: var(--size-radius-full);
-  --badge-font-family: var(--typography-label-font-family);
-  --badge-font-weight: var(--font-weight-700);
-  --badge-font-size-sm: var(--font-size-xs);
-  --badge-font-size-md: var(--font-size-sm);
-  --badge-line-height-sm: var(--line-height-xs);
-  --badge-line-height-md: var(--line-height-sm);
-  --badge-padding-inline-sm: var(--size-spacing-200);
-  --badge-padding-inline-md: var(--size-spacing-300);
-  --badge-padding-block-sm: var(--size-spacing-000);
-  --badge-padding-block-md: var(--size-spacing-100);
-  --badge-gap: var(--size-spacing-100);
 }