@lexydesign/designsystem 0.1.0

package/dist/globals.css

@@ -0,0 +1,243 @@
+@import url("https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap");
+
+/* ---- Reset ---- */
+*, *::before, *::after { box-sizing: border-box; }
+* { margin: 0; }
+html { -webkit-text-size-adjust: 100%; }
+img, picture, svg, video { display: block; max-width: 100%; }
+
+/* ---- Semantic aliases (app layer) ---- */
+:root {
+  --background: var(--color-surface-background);
+  --foreground: var(--color-text-foreground);
+  --muted: var(--color-text-foreground-muted);
+  --surface: var(--color-surface);
+  --primary: var(--color-primary);
+  --primary-foreground: var(--color-primary-foreground);
+  --border: var(--color-border);
+  --danger: var(--color-status-danger);
+  --success: var(--color-status-success);
+  --warning: var(--color-status-warning);
+  --info: var(--color-status-info);
+  --radius: var(--radius-md);
+}
+
+/* ---- Base ---- */
+body {
+  font-family: var(--font-base);
+  background-color: var(--color-surface-background);
+  color: var(--color-text-foreground);
+  -webkit-font-smoothing: antialiased;
+}
+
+/* ---- Typography utilities ---- */
+.type-emphasized-headline-large {
+  font-family: var(--font-base);
+  font-size: 32px;
+  font-weight: var(--font-weight-medium);
+  line-height: 40px;
+  letter-spacing: 0px;
+}
+.type-emphasized-display-large {
+  font-family: var(--font-base);
+  font-size: 57px;
+  font-weight: var(--font-weight-medium);
+  line-height: 64px;
+  letter-spacing: -0.25px;
+}
+.type-emphasized-display-medium {
+  font-family: var(--font-base);
+  font-size: 45px;
+  font-weight: var(--font-weight-medium);
+  line-height: 52px;
+  letter-spacing: 0px;
+}
+.type-emphasized-display-small {
+  font-family: var(--font-base);
+  font-size: 36px;
+  font-weight: var(--font-weight-medium);
+  line-height: 44px;
+  letter-spacing: 0px;
+}
+.type-emphasized-headline-medium {
+  font-family: var(--font-base);
+  font-size: 28px;
+  font-weight: var(--font-weight-medium);
+  line-height: 36px;
+  letter-spacing: 0px;
+}
+.type-emphasized-headline-small {
+  font-family: var(--font-base);
+  font-size: 24px;
+  font-weight: var(--font-weight-medium);
+  line-height: 32px;
+  letter-spacing: 0px;
+}
+.type-emphasized-title-large {
+  font-family: var(--font-base);
+  font-size: 22px;
+  font-weight: var(--font-weight-medium);
+  line-height: 28px;
+  letter-spacing: 0px;
+}
+.type-emphasized-title-medium {
+  font-family: var(--font-base);
+  font-size: 16px;
+  font-weight: var(--font-weight-bold);
+  line-height: 24px;
+  letter-spacing: 0.15000000596046448px;
+}
+.type-emphasized-title-small {
+  font-family: var(--font-base);
+  font-size: 14px;
+  font-weight: var(--font-weight-bold);
+  line-height: 20px;
+  letter-spacing: 0.10000000149011612px;
+}
+.type-emphasized-body-large {
+  font-family: var(--font-base);
+  font-size: 16px;
+  font-weight: var(--font-weight-medium);
+  line-height: 24px;
+  letter-spacing: 0.5px;
+}
+.type-emphasized-body-medium {
+  font-family: var(--font-base);
+  font-size: 14px;
+  font-weight: var(--font-weight-medium);
+  line-height: 24px;
+  letter-spacing: 0.25px;
+}
+.type-emphasized-body-small {
+  font-family: var(--font-base);
+  font-size: 12px;
+  font-weight: var(--font-weight-medium);
+  line-height: 16px;
+  letter-spacing: 0.4000000059604645px;
+}
+.type-emphasized-label-large {
+  font-family: var(--font-base);
+  font-size: 14px;
+  font-weight: var(--font-weight-bold);
+  line-height: 20px;
+  letter-spacing: 0.10000000149011612px;
+}
+.type-emphasized-label-medium {
+  font-family: var(--font-base);
+  font-size: 12px;
+  font-weight: var(--font-weight-bold);
+  line-height: 16px;
+  letter-spacing: 0.5px;
+}
+.type-emphasized-label-small {
+  font-family: var(--font-base);
+  font-size: 11px;
+  font-weight: var(--font-weight-bold);
+  line-height: 16px;
+  letter-spacing: 0.5px;
+}
+.type-baseline-display-large {
+  font-family: var(--font-base);
+  font-size: 57px;
+  font-weight: var(--font-weight-regular);
+  line-height: 64px;
+  letter-spacing: -0.25px;
+}
+.type-baseline-display-medium {
+  font-family: var(--font-base);
+  font-size: 45px;
+  font-weight: var(--font-weight-regular);
+  line-height: 52px;
+  letter-spacing: 0px;
+}
+.type-baseline-display-small {
+  font-family: var(--font-base);
+  font-size: 36px;
+  font-weight: var(--font-weight-regular);
+  line-height: 44px;
+  letter-spacing: 0px;
+}
+.type-baseline-headline-large {
+  font-family: var(--font-base);
+  font-size: 32px;
+  font-weight: var(--font-weight-regular);
+  line-height: 40px;
+  letter-spacing: 0px;
+}
+.type-baseline-headline-medium {
+  font-family: var(--font-base);
+  font-size: 28px;
+  font-weight: var(--font-weight-regular);
+  line-height: 36px;
+  letter-spacing: 0px;
+}
+.type-baseline-headline-small {
+  font-family: var(--font-base);
+  font-size: 24px;
+  font-weight: var(--font-weight-regular);
+  line-height: 32px;
+  letter-spacing: 0px;
+}
+.type-baseline-title-large {
+  font-family: var(--font-base);
+  font-size: 22px;
+  font-weight: var(--font-weight-regular);
+  line-height: 28px;
+  letter-spacing: 0px;
+}
+.type-baseline-title-medium {
+  font-family: var(--font-base);
+  font-size: 16px;
+  font-weight: var(--font-weight-medium);
+  line-height: 24px;
+  letter-spacing: 0.15000000596046448px;
+}
+.type-baseline-title-small {
+  font-family: var(--font-base);
+  font-size: 14px;
+  font-weight: var(--font-weight-medium);
+  line-height: 20px;
+  letter-spacing: 0.10000000149011612px;
+}
+.type-baseline-body-large {
+  font-family: var(--font-base);
+  font-size: 16px;
+  font-weight: var(--font-weight-regular);
+  line-height: 24px;
+  letter-spacing: 0.5px;
+}
+.type-baseline-body-medium {
+  font-family: var(--font-base);
+  font-size: 14px;
+  font-weight: var(--font-weight-regular);
+  line-height: 24px;
+  letter-spacing: 0.25px;
+}
+.type-baseline-body-small {
+  font-family: var(--font-base);
+  font-size: 12px;
+  font-weight: var(--font-weight-regular);
+  line-height: 16px;
+  letter-spacing: 0.4000000059604645px;
+}
+.type-baseline-label-large {
+  font-family: var(--font-base);
+  font-size: 14px;
+  font-weight: var(--font-weight-medium);
+  line-height: 20px;
+  letter-spacing: 0.10000000149011612px;
+}
+.type-baseline-label-medium {
+  font-family: var(--font-base);
+  font-size: 12px;
+  font-weight: var(--font-weight-medium);
+  line-height: 16px;
+  letter-spacing: 0.5px;
+}
+.type-baseline-label-small {
+  font-family: var(--font-base);
+  font-size: 11px;
+  font-weight: var(--font-weight-medium);
+  line-height: 16px;
+  letter-spacing: 0.5px;
+}

package/dist/index.d.ts

@@ -0,0 +1,36 @@
+export * from './components/Accordion/Accordion';
+export * from './components/Avatar/Avatar';
+export * from './components/Badge/Badge';
+export * from './components/Breadcrumb/Breadcrumb';
+export * from './components/Button/Button';
+export * from './components/Checkbox/Checkbox';
+export * from './components/Combobox/Combobox';
+export * from './components/CounterBadge/CounterBadge';
+export * from './components/Divider/Divider';
+export * from './components/Dropdown/Dropdown';
+export * from './components/FeatureCard/FeatureCard';
+export * from './components/HeaderBar/HeaderBar';
+export * from './components/InfoLabel/InfoLabel';
+export * from './components/Input/Input';
+export * from './components/Logo/Logo';
+export * from './components/Menu/Menu';
+export * from './components/Modal/Modal';
+export * from './components/Nav/Nav';
+export * from './components/ProfileCard/ProfileCard';
+export * from './components/ProgressBar/ProgressBar';
+export * from './components/Radio/Radio';
+export * from './components/Searchbox/Searchbox';
+export * from './components/Skeleton/Skeleton';
+export * from './components/Slider/Slider';
+export * from './components/Snippet/Snippet';
+export * from './components/StatusDot/StatusDot';
+export * from './components/Switch/Switch';
+export * from './components/Tabs/Tabs';
+export * from './components/Tag/Tag';
+export * from './components/Textarea/Textarea';
+export * from './components/Toast/Toast';
+export * from './components/Tooltip/Tooltip';
+export * from './components/Tree/Tree';
+export { cn } from './lib/utils';
+export { useFloating } from './lib/useFloating';
+export type { UseFloatingOptions, FloatingPlacement } from './lib/useFloating';

package/dist/index.js

@@ -0,0 +1,37 @@
+"use client";
+import { cn as e } from "./lib/utils.js";
+import { Accordion as t } from "./components/Accordion/Accordion.js";
+import { Avatar as n } from "./components/Avatar/Avatar.js";
+import { Badge as r } from "./components/Badge/Badge.js";
+import { Breadcrumb as i } from "./components/Breadcrumb/Breadcrumb.js";
+import { Button as a } from "./components/Button/Button.js";
+import { Checkbox as o } from "./components/Checkbox/Checkbox.js";
+import { useFloating as s } from "./lib/useFloating.js";
+import { Combobox as c } from "./components/Combobox/Combobox.js";
+import { CounterBadge as l } from "./components/CounterBadge/CounterBadge.js";
+import { Divider as u } from "./components/Divider/Divider.js";
+import { Dropdown as d } from "./components/Dropdown/Dropdown.js";
+import { FeatureCard as f } from "./components/FeatureCard/FeatureCard.js";
+import { Logo as p } from "./components/Logo/Logo.js";
+import { HeaderBar as m } from "./components/HeaderBar/HeaderBar.js";
+import { Tooltip as h } from "./components/Tooltip/Tooltip.js";
+import { InfoLabel as g } from "./components/InfoLabel/InfoLabel.js";
+import { Input as _ } from "./components/Input/Input.js";
+import { Menu as v } from "./components/Menu/Menu.js";
+import { Modal as y } from "./components/Modal/Modal.js";
+import { Nav as b } from "./components/Nav/Nav.js";
+import { ProfileCard as x } from "./components/ProfileCard/ProfileCard.js";
+import { ProgressBar as S } from "./components/ProgressBar/ProgressBar.js";
+import { Radio as C } from "./components/Radio/Radio.js";
+import { ExpandingSearchbox as w, Searchbox as T } from "./components/Searchbox/Searchbox.js";
+import { Skeleton as E } from "./components/Skeleton/Skeleton.js";
+import { Slider as D } from "./components/Slider/Slider.js";
+import { Snippet as O } from "./components/Snippet/Snippet.js";
+import { StatusDot as k } from "./components/StatusDot/StatusDot.js";
+import { Switch as A } from "./components/Switch/Switch.js";
+import { Tabs as j } from "./components/Tabs/Tabs.js";
+import { Tag as M } from "./components/Tag/Tag.js";
+import { Textarea as N } from "./components/Textarea/Textarea.js";
+import { Toast as P } from "./components/Toast/Toast.js";
+import { Tree as F } from "./components/Tree/Tree.js";
+export { t as Accordion, n as Avatar, r as Badge, i as Breadcrumb, a as Button, o as Checkbox, c as Combobox, l as CounterBadge, u as Divider, d as Dropdown, w as ExpandingSearchbox, f as FeatureCard, m as HeaderBar, g as InfoLabel, _ as Input, p as Logo, v as Menu, y as Modal, b as Nav, x as ProfileCard, S as ProgressBar, C as Radio, T as Searchbox, E as Skeleton, D as Slider, O as Snippet, k as StatusDot, A as Switch, j as Tabs, M as Tag, N as Textarea, P as Toast, h as Tooltip, F as Tree, e as cn, s as useFloating };

package/dist/lib/useFloating.d.ts

@@ -0,0 +1,20 @@
+export type FloatingPlacement = 'bottom-start' | 'bottom-end';
+export interface UseFloatingOptions {
+    placement?: FloatingPlacement;
+    /** Match the floating panel's min-width to the trigger width. */
+    matchTriggerWidth?: boolean;
+    /** Gap between trigger and panel, in px. */
+    offset?: number;
+}
+/**
+ * Dependency-free anchored-popover positioning: fixed-position panel below the
+ * trigger, flips above when there isn't room, clamps to the viewport, and
+ * closes on outside pointerdown / Escape. Shared by Dropdown, Combobox, Menu.
+ */
+export declare function useFloating<T extends HTMLElement = HTMLElement, F extends HTMLElement = HTMLElement>(options?: UseFloatingOptions): {
+    triggerRef: import('react').RefObject<T | null>;
+    floatingRef: import('react').RefObject<F | null>;
+    open: boolean;
+    setOpen: import('react').Dispatch<import('react').SetStateAction<boolean>>;
+    floatingStyle: import('react').CSSProperties;
+};

package/dist/lib/useFloating.js

@@ -0,0 +1,54 @@
+"use client";
+import { useCallback as e, useEffect as t, useLayoutEffect as n, useRef as r, useState as i } from "react";
+//#region src/lib/useFloating.ts
+var a = 8;
+function o(o = {}) {
+	let { placement: s = "bottom-start", matchTriggerWidth: c = !1, offset: l = 6 } = o, u = r(null), d = r(null), [f, p] = i(!1), [m, h] = i({
+		position: "fixed",
+		top: 0,
+		left: 0,
+		visibility: "hidden"
+	}), g = e(() => {
+		let e = u.current, t = d.current;
+		if (!e || !t) return;
+		let n = e.getBoundingClientRect(), r = t.getBoundingClientRect(), i = n.bottom + l;
+		i + r.height > window.innerHeight - a && n.top - l - r.height > a && (i = n.top - l - r.height);
+		let o = s === "bottom-end" ? n.right - r.width : n.left;
+		o = Math.min(Math.max(a, o), window.innerWidth - r.width - a), i = Math.min(Math.max(a, i), window.innerHeight - r.height - a), h({
+			position: "fixed",
+			top: i,
+			left: o,
+			visibility: "visible",
+			...c ? { minWidth: n.width } : {}
+		});
+	}, [
+		s,
+		c,
+		l
+	]);
+	return n(() => {
+		f ? g() : h((e) => ({
+			...e,
+			visibility: "hidden"
+		}));
+	}, [f, g]), t(() => {
+		if (!f) return;
+		let e = (e) => {
+			let t = e.target;
+			!u.current?.contains(t) && !d.current?.contains(t) && p(!1);
+		}, t = (e) => {
+			e.key === "Escape" && p(!1);
+		}, n = () => g();
+		return document.addEventListener("pointerdown", e, !0), document.addEventListener("keydown", t), window.addEventListener("resize", n), window.addEventListener("scroll", n, !0), () => {
+			document.removeEventListener("pointerdown", e, !0), document.removeEventListener("keydown", t), window.removeEventListener("resize", n), window.removeEventListener("scroll", n, !0);
+		};
+	}, [f, g]), {
+		triggerRef: u,
+		floatingRef: d,
+		open: f,
+		setOpen: p,
+		floatingStyle: m
+	};
+}
+//#endregion
+export { o as useFloating };

package/dist/lib/utils.d.ts

@@ -0,0 +1,2 @@
+import { ClassValue } from 'clsx';
+export declare function cn(...inputs: ClassValue[]): string;

package/dist/lib/utils.js

@@ -0,0 +1,9 @@
+"use client";
+import { clsx as e } from "clsx";
+import { twMerge as t } from "tailwind-merge";
+//#region src/lib/utils.ts
+function n(...n) {
+	return t(e(n));
+}
+//#endregion
+export { n as cn };

package/dist/tokens.css

@@ -0,0 +1,256 @@
+@theme {
+  /* ---- Colors ---- */
+  --color-primary: #4429cc;
+  --color-primary-hover: #3620a3;
+  --color-primary-pressed: #27177a;
+  --color-primary-selected: #3721a7;
+  --color-primary-subtle: #f2f0fb;
+  --color-primary-subtle-hover: #e5e1f8;
+  --color-primary-subtle-pressed: #d2ccf3;
+  --color-primary-foreground: #ffffff;
+  --color-accent: #eeebfe;
+  --color-accent-subtle: #f8f7ff;
+  --color-accent-strong: #dad4ff;
+  --color-surface-background: #f9fafb;
+  --color-surface-background-subtle: #fafafa;
+  --color-surface-background-muted: #f5f5f5;
+  --color-surface-background-inverse: #292929;
+  --color-surface: #ffffff;
+  --color-surface-pressed: #e0e0e0;
+  --color-surface-selected: #ebebeb;
+  --color-surface-disabled: #f0f0f0;
+  --color-text-foreground: #242424;
+  --color-text-foreground-secondary: #424242;
+  --color-text-foreground-muted: #616161;
+  --color-text-foreground-subtle: #707070;
+  --color-text-foreground-disabled: #bdbdbd;
+  --color-text-ink: #0b013c;
+  --color-text-ink-secondary: #3a3368;
+  --color-text-link: #4b41e1;
+  --color-border: #e4e4e7;
+  --color-border-hover: #c7c7c7;
+  --color-border-pressed: #b3b3b3;
+  --color-border-selected: #bdbdbd;
+  --color-border-subtle: #e0e0e0;
+  --color-border-muted: #f0f0f0;
+  --color-border-strong: #616161;
+  --color-border-accent: #e6e4f2;
+  --color-border-accent-focus: #9d90fc;
+  --color-neutral-black: #000000;
+  --color-neutral-gray: #666666;
+  --color-neutral-border: #cecdd2;
+  --color-neutral-surface-muted: #f2f2f2;
+  --color-neutral-surface-subtle: #fafafa;
+  --color-neutral-white: #ffffff;
+  --color-status-success: #39ac39;
+  --color-status-success-hover: #339933;
+  --color-status-success-foreground-strong: #174517;
+  --color-status-success-background: #eff8ef;
+  --color-status-success-background-strong: #b4dfb4;
+  --color-status-success-border: #b4dfb4;
+  --color-status-success-pressed: #267326;
+  --color-status-warning: #f49c0b;
+  --color-status-warning-hover: #c37d09;
+  --color-status-warning-foreground-strong: #623e04;
+  --color-status-warning-background: #fef8ee;
+  --color-status-warning-background-strong: #fbd79d;
+  --color-status-warning-border: #fbd79d;
+  --color-status-warning-pressed: #925e07;
+  --color-status-danger: #da272d;
+  --color-status-danger-hover: #ae1e23;
+  --color-status-danger-pressed: #83161a;
+  --color-status-danger-background: #fcf0f0;
+  --color-status-danger-background-strong: #f1adaf;
+  --color-status-danger-border: #f1adaf;
+  --color-status-danger-foreground-strong: #6e0811;
+  --color-status-danger-foreground: #8f0a15;
+  --color-status-info: #4429cc;
+  --color-status-info-hover: #3620a3;
+  --color-status-info-foreground-strong: #27177a;
+  --color-status-info-background: #f2f0fb;
+  --color-status-info-background-strong: #e1ddf7;
+  --color-status-info-border: #e1ddf7;
+  --color-alpha-primary-alpha-hover: #4429cc0d;
+  --color-alpha-primary-alpha-pressed: #4429cc1a;
+  --color-alpha-success-alpha-hover: #39ac390d;
+  --color-alpha-success-alpha-pressed: #39ac391a;
+  --color-alpha-warning-alpha-hover: #f49c0b0d;
+  --color-alpha-warning-alpha-pressed: #f49c0b1a;
+  --color-alpha-danger-alpha-hover: #da272d0d;
+  --color-alpha-danger-alpha-pressed: #da272d1a;
+  --color-alpha-neutral-alpha-hover: #6666660d;
+  --color-alpha-neutral-alpha-pressed: #6666661a;
+  --color-subbrand-salud: #00b7b7;
+  --color-subbrand-salud-hover: #038387;
+  --color-subbrand-salud-pressed: #00666d;
+  --color-subbrand-salud-foreground-strong: #002d30;
+  --color-subbrand-salud-background: #e6ffff;
+  --color-subbrand-salud-background-strong: #a6e9ed;
+  --color-subbrand-salud-border: #ccf7f7;
+  --color-subbrand-deudor: #9d1aee;
+  --color-subbrand-deudor-hover: #881798;
+  --color-subbrand-deudor-pressed: #63276d;
+  --color-subbrand-deudor-foreground: #4d0673;
+  --color-subbrand-deudor-background: #fcf4ff;
+  --color-subbrand-deudor-background-strong: #e6bfed;
+  --color-subbrand-deudor-border: #f2dffb;
+  --color-lexy-navy: #0B013C; /* deep navy, used as the ink/dark surface background */
+
+  /* ---- Spacing ---- */
+  --spacing-0: 0px;
+  --spacing-0-5: 2px;
+  --spacing-1: 4px;
+  --spacing-1-5: 6px;
+  --spacing-2: 8px;
+  --spacing-2-5: 10px;
+  --spacing-3: 12px;
+  --spacing-4: 16px;
+  --spacing-5: 20px;
+  --spacing-6: 24px;
+  --spacing-8: 32px;
+  --spacing-10: 40px;
+  --spacing-12: 48px;
+  --spacing-15: 60px;
+  --spacing-16: 64px;
+  --spacing-20: 80px;
+  --spacing-30: 120px;
+  --spacing-32: 128px;
+  --spacing-unit: var(--spacing-1);
+  --spacing-stack-xs: var(--spacing-1-5);
+  --spacing-stack-sm: var(--spacing-2);
+  --spacing-stack-md: var(--spacing-4);
+  --spacing-stack-lg: var(--spacing-8);
+  --spacing-stack-xl: var(--spacing-16);
+  --spacing-inline-xs: var(--spacing-1-5);
+  --spacing-inline-sm: var(--spacing-2);
+  --spacing-inline-md: var(--spacing-3);
+  --spacing-inline-lg: var(--spacing-4);
+  --spacing-inset-xs: var(--spacing-2);
+  --spacing-inset-sm: var(--spacing-3);
+  --spacing-inset-md: var(--spacing-4);
+  --spacing-inset-lg: var(--spacing-6);
+  --spacing-gutter: var(--spacing-6);
+  --spacing-section: var(--spacing-10);
+  --spacing-page-top: var(--spacing-12);
+  --spacing-page-bottom: var(--spacing-32);
+
+  /* ---- Radius ---- */
+  --radius-none: 0px;
+  --radius-xs: 2px;
+  --radius-sm: 4px;
+  --radius-md: 6px;
+  --radius-lg: 8px;
+  --radius-xl: 10px;
+  --radius-2xl: 12px;
+  --radius-3xl: 14px;
+  --radius-4xl: 24px;
+  --radius-full: 9999px;
+  --radius-circular: 10000px;
+  --radius-control-sm: var(--radius-xs);
+  --radius-control: var(--radius-sm);
+  --radius-control-lg: var(--radius-md);
+  --radius-surface-sm: var(--radius-md);
+  --radius-surface: var(--radius-lg);
+  --radius-surface-lg: var(--radius-3xl);
+  --radius-card: var(--radius-lg);
+  --radius-card-docs: var(--radius-3xl);
+  --radius-popover: var(--radius-lg);
+  --radius-modal: var(--radius-lg);
+  --radius-tooltip: var(--radius-md);
+  --radius-badge: var(--radius-full);
+  --radius-avatar: var(--radius-full);
+  --radius-hero: var(--radius-4xl);
+
+  /* ---- Stroke / border width ---- */
+  --stroke-none: 0px;
+  --stroke-thin: 1px;
+  --stroke-thick: 2px;
+  --stroke-thicker: 3px;
+  --stroke-thickest: 4px;
+  --stroke-focus: 1px;
+  --stroke-divider: 1px;
+  --stroke-control: 1px;
+
+  /* ---- Typography scale ---- */
+  --text-button: 14px;
+  --font-weight-button: 500;
+  --font-base: "Geist", system-ui, sans-serif;
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-bold: 700;
+  --text-11: 11px;
+  --text-12: 12px;
+  --text-14: 14px;
+  --text-16: 16px;
+  --text-22: 22px;
+  --text-24: 24px;
+  --text-28: 28px;
+  --text-32: 32px;
+  --text-36: 36px;
+  --text-45: 45px;
+  --text-57: 57px;
+  --leading-16: 16px;
+  --leading-20: 20px;
+  --leading-24: 24px;
+  --leading-28: 28px;
+  --leading-32: 32px;
+  --leading-36: 36px;
+  --leading-40: 40px;
+  --leading-44: 44px;
+  --leading-52: 52px;
+  --leading-64: 64px;
+  --tracking-minus-025: -0.25px;
+  --tracking-0: 0px;
+  --tracking-010: 0.1px;
+  --tracking-015: 0.15px;
+  --tracking-025: 0.25px;
+  --tracking-040: 0.4px;
+  --tracking-050: 0.5px;
+
+  /* ---- Component · gap ---- */
+  --gap-button: var(--spacing-2-5);
+  --gap-input: 8px;
+  --gap-dropdown-menu: 4px;
+  --gap-dropdown-option: 8px;
+
+  /* ---- Component · padding ---- */
+  --padding-button-horizontal-sm: 12px;
+  --padding-button-horizontal-md: var(--spacing-4);
+  --padding-button-horizontal-lg: 20px;
+  --padding-input-horizontal-sm: 10px;
+  --padding-input-horizontal-md: 12px;
+  --padding-input-horizontal-lg: 12px;
+  --padding-dropdown-menu: 4px;
+  --padding-dropdown-option-horizontal: 8px;
+
+  /* ---- Component · height ---- */
+  --height-button-sm: 32px;
+  --height-button-md: 40px;
+  --height-button-lg: 48px;
+  --height-input-sm: 32px;
+  --height-input-md: 40px;
+  --height-input-lg: 48px;
+  --height-dropdown-option: 32px;
+
+  /* ---- Layout ---- */
+  --layout-gap: var(--spacing-6);
+  --layout-gap-half: var(--spacing-3);
+  --layout-gap-quarter: var(--spacing-1-5);
+  --layout-page-margin-mobile: var(--spacing-4);
+  --layout-page-margin: var(--spacing-5);
+  --layout-page-margin-desktop: var(--spacing-8);
+  --layout-content-gap: var(--spacing-15);
+  --layout-section-gap: var(--spacing-10);
+  --layout-scroll-margin: var(--spacing-30);
+  --layout-page-bottom: var(--spacing-32);
+  --layout-page-width: 1200px;
+  --layout-container-max: 1280px;
+
+  /* ---- Shadows ---- */
+  --shadow-sm: 0px 0px 2px rgba(0, 0, 0, 0.12);
+  --shadow-md: 0px 0px 2px rgba(0, 0, 0, 0.12);
+  --shadow-lg: 0px 0px 2px rgba(0, 0, 0, 0.12);
+  --shadow-xl: 0px 0px 2px rgba(0, 0, 0, 0.12);
+  --shadow-2xl: 0px 0px 8px rgba(0, 0, 0, 0.12);
+  --shadow-focus: 0px 0px 8px rgba(0, 0, 0, 0.12);
+}