@payloadcms/ui 3.84.0 → 4.0.0-internal.38b7f1d

package/dist/css/colors.css

@@ -0,0 +1,378 @@
+@layer payload-default {
+  /* ——————————————————————————————————————————————
+     Non-themed Tokens
+     ————————————————————————————————————————————— */
+
+  :root {
+    /* Special */
+    --special-bg-hover-on-light-canvas: var(--ramp-black-300);
+    --special-text-highlight: var(--color-blue-300);
+
+    --special-multiplayer-blue: var(--ramp-blue-600);
+    --special-multiplayer-purple: var(--ramp-purple-500);
+    --special-multiplayer-pink: var(--ramp-pink-500);
+    --special-multiplayer-red: var(--ramp-red-500);
+    --special-multiplayer-yellow: var(--ramp-yellow-500);
+    --special-multiplayer-green: var(--ramp-green-500);
+    --special-multiplayer-grey: var(--ramp-pale-blue-500);
+
+    --special-text-on-multiplayer-blue: var(--ramp-white-1000);
+    --special-text-on-multiplayer-purple: var(--ramp-white-1000);
+    --special-text-on-multiplayer-pink: var(--ramp-white-1000);
+    --special-text-on-multiplayer-red: var(--ramp-white-1000);
+    --special-text-on-multiplayer-yellow: var(--ramp-black-800);
+    --special-text-on-multiplayer-green: var(--ramp-white-1000);
+    --special-text-on-multiplayer-grey: var(--ramp-white-1000);
+
+    /* Fullscreen */
+    --fullscreen-default-icon: var(--ramp-black-800);
+    --fullscreen-default-icon-tertiary: var(--ramp-black-400);
+    --fullscreen-special-autofill-highlight: rgba(13, 153, 255, 0.2);
+  }
+
+  /* ——————————————————————————————————————————————
+     Light Theme (default)
+
+     Naming rules (UI3 parity — matches fpl/tokens):
+     - Every semantic color is prefixed with `--color-`.
+     - The `default` category is implicit. `--color-bg-secondary` (not `--color-bg-default-secondary`).
+     - The `default` variant is implicit. `--color-bg` (not `--color-bg-default`); `--color-bg-brand` (not `--color-bg-brand-default`).
+     - `on{X}` is one segment. `--color-text-onbrand`, `--color-icon-ondisabled`.
+     - Palette tokens live in the `--ramp-*` namespace.
+     ————————————————————————————————————————————— */
+
+  :root {
+    /* Background */
+    --color-bg-assistive: var(--ramp-pink-500);
+    --color-bg-assistive-hover: var(--ramp-pink-600);
+    --color-bg-assistive-pressed: var(--ramp-pink-600);
+    --color-bg-assistive-secondary: var(--ramp-pink-700);
+    --color-bg-assistive-tertiary: var(--ramp-pink-200);
+
+    --color-bg-brand: var(--ramp-blue-500);
+    --color-bg-brand-hover: var(--ramp-blue-600);
+    --color-bg-brand-pressed: var(--ramp-blue-700);
+    --color-bg-brand-secondary: var(--ramp-blue-700);
+    --color-bg-brand-tertiary: var(--ramp-blue-200);
+    --color-bg-brand-tertiary-hover: var(--ramp-blue-300);
+
+    --color-bg-component: var(--ramp-purple-500);
+    --color-bg-component-tertiary: var(--ramp-purple-200);
+    --color-bg-component-tertiary-hover: var(--ramp-purple-300);
+
+    --color-bg-danger: var(--ramp-red-500);
+    --color-bg-danger-hover: var(--ramp-red-600);
+    --color-bg-danger-pressed: var(--ramp-red-700);
+    --color-bg-danger-tertiary: var(--ramp-red-200);
+    --color-bg-danger-tertiary-hover: var(--ramp-red-300);
+    --color-bg-danger-tertiary-pressed: var(--ramp-red-400);
+
+    --color-bg: var(--ramp-white-1000);
+    --color-bg-hover: var(--ramp-grey-100);
+    --color-bg-pressed: var(--ramp-grey-200);
+    --color-bg-secondary: var(--ramp-grey-100);
+    --color-bg-secondary-hover: var(--ramp-grey-200);
+    --color-bg-secondary-pressed: var(--ramp-grey-300);
+    --color-bg-tertiary: var(--ramp-grey-200);
+
+    --color-bg-disabled: var(--ramp-grey-300);
+
+    --color-bg-elevated: var(--ramp-white-1000);
+
+    --color-bg-info: var(--ramp-blue-200);
+
+    --color-bg-inverse: var(--ramp-grey-800);
+    --color-bg-inverse-hover: var(--ramp-grey-700);
+    --color-bg-inverse-pressed: var(--ramp-grey-600);
+
+    --color-bg-menu: var(--ramp-grey-900);
+    --color-bg-tooltip: var(--ramp-grey-900);
+
+    --color-bg-selected: var(--ramp-blue-200);
+    --color-bg-selected-hover: var(--ramp-blue-300);
+    --color-bg-selected-pressed: var(--ramp-blue-400);
+    --color-bg-selected-strong: var(--ramp-blue-500);
+    --color-bg-selected-strong-hover: var(--ramp-blue-600);
+    --color-bg-selected-strong-pressed: var(--ramp-blue-700);
+
+    --color-bg-success: var(--ramp-green-500);
+    --color-bg-success-hover: var(--ramp-green-600);
+    --color-bg-success-pressed: var(--ramp-green-700);
+    --color-bg-success-tertiary: var(--ramp-green-200);
+    --color-bg-success-tertiary-hover: var(--ramp-green-300);
+
+    --color-bg-transparent-hover: var(--ramp-black-100);
+    --color-bg-transparent-pressed: var(--ramp-black-200);
+
+    --color-bg-warning: var(--ramp-yellow-500);
+    --color-bg-warning-tertiary: var(--ramp-yellow-200);
+    --color-bg-warning-tertiary-hover: var(--ramp-yellow-300);
+
+    /* Border */
+    --color-border-assistive: var(--ramp-pink-300);
+    --color-border-assistive-strong: var(--ramp-pink-600);
+    --color-border-onassistive: var(--ramp-pink-600);
+    --color-border-onassistive-strong: var(--ramp-pink-700);
+
+    --color-border-brand: var(--ramp-blue-300);
+    --color-border-brand-strong: var(--ramp-blue-600);
+    --color-border-onbrand-strong: var(--ramp-white-1000);
+
+    --color-border-component: var(--ramp-purple-300);
+    --color-border-component-strong: var(--ramp-purple-600);
+
+    --color-border-danger: var(--ramp-red-300);
+    --color-border-danger-strong: var(--ramp-red-600);
+
+    --color-border: var(--ramp-grey-200);
+    --color-border-strong: var(--ramp-grey-800);
+
+    --color-border-disabled: var(--ramp-grey-200);
+
+    --color-border-selected: var(--ramp-blue-500);
+    --color-border-selected-strong: var(--ramp-blue-600);
+
+    --color-border-success: var(--ramp-green-300);
+    --color-border-success-strong: var(--ramp-green-600);
+
+    --color-border-warning: var(--ramp-pale-yellow-300);
+    --color-border-warning-strong: var(--ramp-yellow-1000);
+
+    /* Icon */
+    --color-icon-assistive: var(--ramp-pink-600);
+    --color-icon-assistive-pressed: var(--ramp-pink-700);
+    --color-icon-onassistive: var(--ramp-white-1000);
+    --color-icon-onassistive-secondary: var(--ramp-white-600);
+    --color-icon-onassistive-tertiary: var(--ramp-white-400);
+
+    --color-icon-brand: var(--ramp-blue-600);
+    --color-icon-onbrand: var(--ramp-white-1000);
+    --color-icon-onbrand-secondary: var(--ramp-white-600);
+
+    --color-icon-component: var(--ramp-purple-600);
+    --color-icon-component-pressed: var(--ramp-purple-700);
+    --color-icon-component-secondary: var(--ramp-pale-purple-400);
+    --color-icon-component-tertiary: var(--ramp-pale-purple-400);
+    --color-icon-oncomponent: var(--ramp-white-1000);
+
+    --color-icon-danger: var(--ramp-red-600);
+    --color-icon-ondanger: var(--ramp-white-1000);
+    --color-icon-ondanger-secondary: var(--ramp-white-600);
+
+    --color-icon: var(--ramp-black-800);
+    --color-icon-hover: var(--ramp-black-800);
+    --color-icon-secondary: var(--ramp-black-500);
+    --color-icon-secondary-hover: var(--ramp-black-800);
+    --color-icon-tertiary: var(--ramp-black-400);
+
+    --color-icon-disabled: var(--ramp-black-400);
+    --color-icon-ondisabled: var(--ramp-white-1000);
+
+    --color-icon-oninverse: var(--ramp-white-800);
+
+    --color-icon-onselected-strong: var(--ramp-white-1000);
+    --color-icon-selected: var(--ramp-blue-600);
+
+    --color-icon-onsuccess: var(--ramp-white-1000);
+    --color-icon-onsuccess-secondary: var(--ramp-white-600);
+    --color-icon-success: var(--ramp-green-600);
+
+    --color-icon-warning: var(--ramp-yellow-1000);
+    --color-icon-warning-pressed: var(--ramp-yellow-1000);
+
+    /* Text */
+    --color-text-assistive: var(--ramp-pink-600);
+    --color-text-assistive-pressed: var(--ramp-pink-700);
+    --color-text-onassistive: var(--ramp-white-1000);
+    --color-text-onassistive-secondary: var(--ramp-white-600);
+    --color-text-onassistive-tertiary: var(--ramp-white-400);
+
+    --color-text-brand: var(--ramp-blue-600);
+    --color-text-brand-secondary: var(--ramp-blue-600);
+    --color-text-onbrand: var(--ramp-white-1000);
+    --color-text-onbrand-secondary: var(--ramp-white-600);
+
+    --color-text-component: var(--ramp-purple-600);
+    --color-text-component-pressed: var(--ramp-purple-700);
+    --color-text-component-secondary: var(--ramp-pale-purple-400);
+    --color-text-component-tertiary: var(--ramp-pale-purple-400);
+    --color-text-oncomponent: var(--ramp-white-1000);
+
+    --color-text-danger: var(--ramp-red-600);
+    --color-text-danger-secondary: var(--ramp-red-600);
+    --color-text-ondanger: var(--ramp-white-1000);
+    --color-text-ondanger-secondary: var(--ramp-white-600);
+
+    --color-text: var(--ramp-black-800);
+    --color-text-secondary: var(--ramp-black-500);
+    --color-text-tertiary: var(--ramp-black-400);
+
+    --color-text-disabled: var(--ramp-black-400);
+    --color-text-ondisabled: var(--ramp-white-1000);
+
+    --color-text-oninverse: var(--ramp-white-800);
+    --color-text-oninverse-secondary: var(--ramp-white-600);
+
+    --color-text-onselected-strong: var(--ramp-white-1000);
+    --color-text-selected: var(--ramp-blue-600);
+
+    --color-text-onsuccess: var(--ramp-white-1000);
+    --color-text-onsuccess-secondary: var(--ramp-white-600);
+    --color-text-success: var(--ramp-green-600);
+
+    --color-text-onwarning: var(--ramp-black-800);
+    --color-text-warning: var(--ramp-yellow-1000);
+
+    /* Special (themed) */
+    --special-bg-hover-transparent: var(--ramp-black-100);
+    --special-bg-transparent: rgba(255, 255, 255, 0.6);
+    --special-bg-transparent-secondary-hover: var(--ramp-black-200);
+    --special-border-translucent: var(--ramp-black-200);
+
+    /* Multiplayer */
+    --multiplayer-blue: var(--special-multiplayer-blue);
+    --multiplayer-purple: var(--special-multiplayer-purple);
+    --multiplayer-pink: var(--special-multiplayer-pink);
+    --multiplayer-red: var(--special-multiplayer-red);
+    --multiplayer-yellow: var(--special-multiplayer-yellow);
+    --multiplayer-green: var(--special-multiplayer-green);
+    --multiplayer-grey: var(--special-multiplayer-grey);
+  }
+
+  /* ——————————————————————————————————————————————
+     Dark Theme
+     Only overrides where the palette reference changes.
+     ————————————————————————————————————————————— */
+
+  html[data-theme='dark'],
+  [data-theme='dark'] {
+    /* Background */
+    --color-bg-assistive: var(--ramp-pink-500);
+    --color-bg-assistive-hover: var(--ramp-pink-600);
+    --color-bg-assistive-pressed: var(--ramp-pink-600);
+    --color-bg-assistive-secondary: var(--ramp-pink-700);
+    --color-bg-assistive-tertiary: var(--ramp-pink-800);
+
+    --color-bg-brand-tertiary: var(--ramp-pale-blue-800);
+    --color-bg-brand-tertiary-hover: var(--ramp-pale-blue-700);
+
+    --color-bg-component-tertiary: var(--ramp-pale-purple-800);
+    --color-bg-component-tertiary-hover: var(--ramp-pale-purple-700);
+
+    --color-bg-danger-tertiary: var(--ramp-pale-red-800);
+    --color-bg-danger-tertiary-hover: var(--ramp-pale-red-700);
+    --color-bg-danger-tertiary-pressed: var(--ramp-pale-red-600);
+
+    --color-bg: var(--ramp-grey-800);
+    --color-bg-hover: var(--ramp-grey-700);
+    --color-bg-pressed: var(--ramp-grey-600);
+    --color-bg-secondary: var(--ramp-grey-700);
+    --color-bg-secondary-hover: var(--ramp-grey-600);
+    --color-bg-secondary-pressed: var(--ramp-grey-500);
+    --color-bg-tertiary: var(--ramp-grey-600);
+
+    --color-bg-disabled: var(--ramp-grey-500);
+
+    --color-bg-elevated: var(--ramp-grey-900);
+
+    --color-bg-inverse: var(--ramp-white-1000);
+    --color-bg-inverse-hover: var(--ramp-grey-100);
+    --color-bg-inverse-pressed: var(--ramp-grey-200);
+
+    --color-bg-selected: var(--ramp-pale-blue-700);
+    --color-bg-selected-hover: var(--ramp-pale-blue-600);
+    --color-bg-selected-pressed: var(--ramp-pale-blue-700);
+
+    --color-bg-success-tertiary: var(--ramp-pale-green-900);
+    --color-bg-success-tertiary-hover: var(--ramp-pale-green-800);
+
+    --color-bg-transparent-hover: var(--ramp-white-100);
+    --color-bg-transparent-pressed: var(--ramp-white-200);
+
+    --color-bg-warning-tertiary: var(--ramp-pale-yellow-800);
+    --color-bg-warning-tertiary-hover: var(--ramp-pale-yellow-700);
+
+    /* Border */
+    --color-border-brand: var(--ramp-pale-blue-600);
+    --color-border-brand-strong: var(--ramp-blue-400);
+
+    --color-border-component: var(--ramp-pale-purple-700);
+    --color-border-component-strong: var(--ramp-purple-300);
+
+    --color-border-danger: var(--ramp-pale-red-700);
+    --color-border-danger-strong: var(--ramp-red-400);
+
+    --color-border: var(--ramp-grey-600);
+    --color-border-strong: var(--ramp-white-800);
+
+    --color-border-disabled: var(--ramp-grey-600);
+
+    --color-border-selected-strong: var(--ramp-blue-400);
+
+    --color-border-success: var(--ramp-pale-green-700);
+    --color-border-success-strong: var(--ramp-green-400);
+
+    --color-border-warning: var(--ramp-pale-yellow-700);
+    --color-border-warning-strong: var(--ramp-yellow-400);
+
+    /* Icon */
+    --color-icon-brand: var(--ramp-blue-400);
+
+    --color-icon-component: var(--ramp-purple-400);
+    --color-icon-component-pressed: var(--ramp-purple-300);
+    --color-icon-component-secondary: var(--ramp-pale-purple-500);
+    --color-icon-component-tertiary: var(--ramp-pale-purple-500);
+
+    --color-icon-danger: var(--ramp-red-400);
+
+    --color-icon: var(--ramp-white-1000);
+    --color-icon-hover: var(--ramp-white-1000);
+    --color-icon-secondary: var(--ramp-white-500);
+    --color-icon-secondary-hover: var(--ramp-white-1000);
+    --color-icon-tertiary: var(--ramp-white-400);
+
+    --color-icon-disabled: var(--ramp-white-400);
+    --color-icon-ondisabled: var(--ramp-grey-800);
+
+    --color-icon-oninverse: var(--ramp-black-800);
+
+    --color-icon-selected: var(--ramp-blue-400);
+
+    --color-icon-success: var(--ramp-green-400);
+
+    --color-icon-warning: var(--ramp-yellow-400);
+    --color-icon-warning-pressed: var(--ramp-yellow-400);
+
+    /* Text */
+    --color-text-brand: var(--ramp-blue-400);
+
+    --color-text-component: var(--ramp-purple-400);
+    --color-text-component-pressed: var(--ramp-purple-300);
+    --color-text-component-secondary: var(--ramp-pale-purple-500);
+    --color-text-component-tertiary: var(--ramp-pale-purple-500);
+
+    --color-text-danger: var(--ramp-red-400);
+
+    --color-text: var(--ramp-white-1000);
+    --color-text-secondary: var(--ramp-white-500);
+    --color-text-tertiary: var(--ramp-white-400);
+
+    --color-text-disabled: var(--ramp-white-400);
+    --color-text-ondisabled: var(--ramp-grey-800);
+
+    --color-text-oninverse: var(--ramp-black-800);
+    --color-text-oninverse-secondary: var(--ramp-black-600);
+
+    --color-text-selected: var(--ramp-blue-400);
+
+    --color-text-success: var(--ramp-green-400);
+
+    --color-text-warning: var(--ramp-yellow-400);
+
+    /* Special (themed) */
+    --special-bg-hover-transparent: var(--ramp-white-100);
+    --special-bg-transparent: rgba(0, 0, 0, 0.6);
+    --special-bg-transparent-secondary-hover: var(--ramp-white-200);
+    --special-border-translucent: var(--ramp-white-200);
+  }
+}

package/dist/css/design-tokens.css

@@ -0,0 +1,125 @@
+@layer payload-default {
+  :root {
+    /* Black (opacity-based) */
+    --ramp-black-100: rgba(0, 0, 0, 0.05);
+    --ramp-black-200: rgba(0, 0, 0, 0.10);
+    --ramp-black-300: rgba(0, 0, 0, 0.20);
+    --ramp-black-400: rgba(0, 0, 0, 0.30);
+    --ramp-black-500: rgba(0, 0, 0, 0.50);
+    --ramp-black-600: rgba(0, 0, 0, 0.80);
+    --ramp-black-800: rgba(0, 0, 0, 0.90);
+
+    /* White (opacity-based) */
+    --ramp-white-100: rgba(255, 255, 255, 0.05);
+    --ramp-white-200: rgba(255, 255, 255, 0.10);
+    --ramp-white-400: rgba(255, 255, 255, 0.40);
+    --ramp-white-500: rgba(255, 255, 255, 0.70);
+    --ramp-white-600: rgba(255, 255, 255, 0.80);
+    --ramp-white-800: rgba(255, 255, 255, 0.90);
+    --ramp-white-1000: #ffffff;
+
+    /* Blue */
+    --ramp-blue-200: #e5f4ff;
+    --ramp-blue-300: #bde3ff;
+    --ramp-blue-400: #80caff;
+    --ramp-blue-500: #0d99ff;
+    --ramp-blue-600: #007be5;
+    --ramp-blue-700: #0768cf;
+    --ramp-blue-800: #034ac1;
+    --ramp-blue-900: #093077;
+    --ramp-blue-1000: #0d193f;
+
+    /* Pale Blue */
+    --ramp-pale-blue-500: #667799;
+    --ramp-pale-blue-600: #536383;
+    --ramp-pale-blue-700: #4a5878;
+    --ramp-pale-blue-800: #394360;
+
+    /* Purple */
+    --ramp-purple-100: #f9f5ff;
+    --ramp-purple-200: #f1e5ff;
+    --ramp-purple-300: #e4ccff;
+    --ramp-purple-400: #d9b8ff;
+    --ramp-purple-500: #9747ff;
+    --ramp-purple-600: #8638e5;
+    --ramp-purple-700: #7c2bda;
+    --ramp-purple-800: #681abb;
+    --ramp-purple-900: #4b0d87;
+    --ramp-purple-1000: #2d0f46;
+
+    /* Pale Purple */
+    --ramp-pale-purple-400: #c5b2dc;
+    --ramp-pale-purple-500: #7f699b;
+    --ramp-pale-purple-700: #604d75;
+    --ramp-pale-purple-800: #473956;
+
+    /* Pink */
+    --ramp-pink-100: #fff0fe;
+    --ramp-pink-200: #ffe0fc;
+    --ramp-pink-300: #ffbdf2;
+    --ramp-pink-400: #ff99e0;
+    --ramp-pink-500: #ff24bd;
+    --ramp-pink-600: #ea10ac;
+    --ramp-pink-700: #cb0b96;
+    --ramp-pink-800: #971172;
+    --ramp-pink-900: #5f114c;
+    --ramp-pink-1000: #451138;
+
+    /* Grey */
+    --ramp-grey-100: #f5f5f5;
+    --ramp-grey-200: #e6e6e6;
+    --ramp-grey-300: #d9d9d9;
+    --ramp-grey-500: #757575;
+    --ramp-grey-600: #444444;
+    --ramp-grey-700: #383838;
+    --ramp-grey-800: #2c2c2c;
+    --ramp-grey-900: #1e1e1e;
+
+    /* Red */
+    --ramp-red-100: #fff5f5;
+    --ramp-red-200: #ffe2e0;
+    --ramp-red-300: #ffc7c2;
+    --ramp-red-400: #ffafa3;
+    --ramp-red-500: #f24822;
+    --ramp-red-600: #dc3412;
+    --ramp-red-700: #bd2915;
+    --ramp-red-800: #9f1f18;
+    --ramp-red-900: #771208;
+    --ramp-red-1000: #660e0b;
+
+    /* Pale Red */
+    --ramp-pale-red-600: #a55440;
+    --ramp-pale-red-700: #864537;
+    --ramp-pale-red-800: #60332a;
+
+    /* Yellow */
+    --ramp-yellow-200: #fff1c2;
+    --ramp-yellow-300: #ffe8a3;
+    --ramp-yellow-400: #ffd966;
+    --ramp-yellow-500: #ffcd29;
+    --ramp-yellow-1000: #b86200;
+
+    /* Pale Yellow */
+    --ramp-pale-yellow-300: #f5dfa8;
+    --ramp-pale-yellow-500: #ad7f00;
+    --ramp-pale-yellow-700: #7a5800;
+    --ramp-pale-yellow-800: #5c4100;
+    --ramp-pale-yellow-900: #3a2a10;
+
+    /* Green */
+    --ramp-green-100: #edfcf0;
+    --ramp-green-200: #d5f7da;
+    --ramp-green-300: #aff4c6;
+    --ramp-green-400: #85e0a3;
+    --ramp-green-500: #14ae5c;
+    --ramp-green-600: #009951;
+    --ramp-green-700: #008043;
+    --ramp-green-900: #024626;
+    --ramp-green-1000: #083a23;
+
+    /* Pale Green */
+    --ramp-pale-green-700: #517361;
+    --ramp-pale-green-800: #476656;
+    --ramp-pale-green-900: #2f483c;
+  }
+}

package/dist/css/elevations.css

@@ -0,0 +1,33 @@
+@layer payload-default {
+  :root {
+    /* Light mode elevations */
+
+    --elevation-300-tooltip:
+      0 0 0.5px 0 rgba(0, 0, 0, 0.15), 0 5px 12px 0 rgba(0, 0, 0, 0.13),
+      0 1px 3px 0 rgba(0, 0, 0, 0.1);
+
+    --elevation-400-menu-panel:
+      0 0 0 1px rgba(0, 0, 0, 0.04), 0 0 0.5px rgba(0, 0, 0, 0.12), 0 10px 16px rgba(0, 0, 0, 0.08),
+      0 2px 6px rgba(0, 0, 0, 0.12);
+
+    --elevation-500-modal-window:
+      0 0 0.5px 0 rgba(0, 0, 0, 0.08), 0 10px 24px 0 rgba(0, 0, 0, 0.18),
+      0 2px 5px 0 rgba(0, 0, 0, 0.15);
+  }
+
+  [data-theme='dark'] {
+    /* Dark mode elevations */
+
+    --elevation-300-tooltip:
+      0 0.5px 0 0 rgba(255, 255, 255, 0.08) inset, 0 5px 12px 0 rgba(0, 0, 0, 0.35),
+      0 0 0.5px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 3px 0 rgba(0, 0, 0, 0.5);
+
+    --elevation-400-menu-panel:
+      0 0 0 1px rgba(255, 255, 255, 0.08), 0 10px 20px 0 rgba(0, 0, 0, 0.3),
+      0 2px 6px 0 rgba(0, 0, 0, 0.35);
+
+    --elevation-500-modal-window:
+      0 0.5px 0 0 rgba(255, 255, 255, 0.08) inset, 0 10px 24px 0 rgba(0, 0, 0, 0.45),
+      0 0 0.5px 0 rgba(255, 255, 255, 0.35) inset, 0 3px 5px 0 rgba(0, 0, 0, 0.35);
+  }
+}

package/dist/css/forms.css

@@ -0,0 +1,108 @@
+@layer payload-default {
+  .form-input {
+    width: 100%;
+    min-height: var(--spacer-5);
+    background: var(--color-bg-secondary);
+    border: 1px solid transparent;
+    border-radius: var(--radius-medium);
+    color: var(--color-text);
+    font-family: var(--text-body-medium-font-family);
+    font-size: var(--text-body-medium-font-size);
+    font-weight: var(--text-body-medium-font-weight);
+    line-height: var(--text-body-medium-line-height);
+    padding: 0 var(--spacer-2);
+    appearance: none;
+    -webkit-appearance: none;
+    transition-property: box-shadow, background-color;
+    transition-duration: 100ms;
+    transition-timing-function: cubic-bezier(0, 0.2, 0.2, 1);
+    outline: none;
+
+    &[data-rtl='true'] {
+      direction: rtl;
+    }
+
+    &::placeholder {
+      color: var(--color-text-tertiary);
+      font-weight: var(--text-body-medium-font-weight);
+      font-size: var(--text-body-medium-font-size);
+    }
+
+    &:where(:hover:not(:focus):not(:disabled)) {
+      border-color: var(--color-border);
+    }
+
+    &:focus {
+      border-color: var(--color-border-selected);
+      border-radius: var(--radius-medium);
+    }
+
+    &:focus-visible {
+      outline: none;
+    }
+
+    &:disabled {
+      color: var(--color-text-disabled);
+      border-color: var(--color-border);
+      background: none;
+    }
+  }
+
+  .form-input-error {
+    border-color: var(--color-border-danger-strong);
+
+    &:focus {
+      border-color: var(--color-border-selected);
+    }
+  }
+
+  .form-input-group {
+    display: flex;
+    position: relative;
+    align-items: stretch;
+    background: var(--color-bg-secondary);
+    border: 1px solid transparent;
+    border-radius: var(--radius-medium);
+    min-height: var(--spacer-5);
+    transition-property: box-shadow, background-color;
+    transition-duration: 100ms;
+    transition-timing-function: cubic-bezier(0, 0.2, 0.2, 1);
+
+    &:where(:hover:not(:focus-within):not(:has(input:disabled))) {
+      border-color: var(--color-border);
+    }
+
+    &:focus-within {
+      outline: none;
+      border-color: var(--color-border-selected);
+    }
+
+    &:has(input:disabled) {
+      background: transparent;
+      border-color: var(--color-border-disabled);
+      color: var(--color-text-disabled);
+    }
+
+    input.form-input {
+      flex: 1;
+      min-width: 0;
+      background: transparent;
+      border: none;
+      border-radius: 0;
+      min-height: unset;
+      outline: none;
+
+      &:focus {
+        border-color: transparent;
+      }
+    }
+  }
+
+  .form-input-group-error {
+    border-color: var(--color-border-danger-strong);
+
+    &:focus-within {
+      border-color: var(--color-border-selected);
+    }
+  }
+}