ropav 0.0.2 → 0.0.4

package/README.md

@@ -11,21 +11,50 @@ pnpm add ropav vue
 ## Usage
 
 ```ts
-import 'ropav/base.css'
-import { Button, Input } from 'ropav'
+import 'ropav/base.css';
+import { Button, Input } from 'ropav';
 ```
 
 Deep imports are available for individual components:
 
 ```ts
-import { Button } from 'ropav/button'
+import { Button } from 'ropav/button';
 ```
 
+## Theming and tokens
+
+`ropav/base.css` exposes the public runtime token API as CSS custom properties. These
+tokens are intended for stable theme axes that consumers may override without
+rebuilding the library:
+
+- semantic colors, surfaces, text, borders, focus rings, overlays, `on-*`, and
+  `*-fg`
+- typography: `--rp-font-family`, `--rp-font-size-*`, `--rp-font-weight-*`, and
+  `--rp-line-height-*`
+- density and control primitives: `--rp-spacing-*`, `--rp-size-control-*`,
+  `--rp-border-width-*`, and `--rp-opacity-disabled`
+- radius, shadows, and transitions
+
+Sass tokens exported through `ropav/scss/*` are implementation/build-time tokens.
+They may include raw palette values, z-index values, component layout constants,
+and mixin inputs that are not part of the runtime CSS variable contract.
+
+Component-local custom properties that start with `--_` are private implementation
+details. They are not versioned API and may change between releases.
+
+Migration note: Ropav only supports the allowlisted runtime tokens above as public
+CSS variables. Raw palette variables such as `--rp-color-gray-*`,
+`--rp-color-white`, `--rp-color-black`, z-index variables, component layout
+variables, and component-state variables such as `--rp-button-solid-hover-bg` are
+not public runtime tokens.
+
 ## Development
 
 ```bash
 pnpm install
 pnpm dev
+pnpm lint
+pnpm format:check
 pnpm test
 pnpm build
 ```

package/dist/base.css

@@ -1,38 +1,30 @@
 :root {
   --rp-font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
-  --rp-color-primary: #2563eb;
-  --rp-color-secondary: #4f46e5;
-  --rp-color-success: #15803d;
-  --rp-color-warning: #b45309;
-  --rp-color-danger: #dc2626;
-  --rp-color-info: #0e7490;
-  --rp-color-white: #ffffff;
-  --rp-color-black: #09090b;
-  --rp-color-gray-50: #fafafa;
-  --rp-color-gray-100: #f4f4f5;
-  --rp-color-gray-200: #e4e4e7;
-  --rp-color-gray-300: #d4d4d8;
-  --rp-color-gray-400: #a1a1aa;
-  --rp-color-gray-500: #71717a;
-  --rp-color-gray-600: #52525b;
-  --rp-color-gray-700: #3f3f46;
-  --rp-color-gray-800: #27272a;
-  --rp-color-gray-900: #18181b;
-  --rp-color-text: #18181b;
-  --rp-color-text-secondary: #52525b;
-  --rp-color-text-disabled: #71717a;
-  --rp-color-text-inverted: var(--rp-color-white);
+  --rp-color-primary: #0d74ce;
+  --rp-color-secondary: #6550b9;
+  --rp-color-success: #218358;
+  --rp-color-warning: #cc4e00;
+  --rp-color-danger: #ce2c31;
+  --rp-color-info: #107d98;
+  --rp-color-neutral: #646464;
+  --rp-color-text: #202020;
+  --rp-color-text-secondary: #646464;
+  --rp-color-text-disabled: #8d8d8d;
+  --rp-color-text-inverted: #ffffff;
   --rp-color-background: #ffffff;
-  --rp-color-surface: var(--rp-color-white);
-  --rp-color-surface-raised: var(--rp-color-white);
-  --rp-color-surface-muted: var(--rp-color-gray-50);
-  --rp-color-surface-hover: var(--rp-color-gray-100);
-  --rp-color-surface-inverted: var(--rp-color-gray-900);
-  --rp-color-overlay: rgba(3, 7, 18, 0.55);
-  --rp-color-border: #e4e4e7;
-  --rp-color-border-hover: #a1a1aa;
+  --rp-color-surface: #ffffff;
+  --rp-color-surface-raised: #ffffff;
+  --rp-color-surface-muted: #f9f9f9;
+  --rp-color-surface-hover: #f0f0f0;
+  --rp-color-button-default-bg: #f9f9f9;
+  --rp-color-button-default-bg-hover: #f0f0f0;
+  --rp-color-button-default-bg-active: #e8e8e8;
+  --rp-color-surface-inverted: #202020;
+  --rp-color-overlay: rgba(17, 17, 17, 0.55);
+  --rp-color-border: #d9d9d9;
+  --rp-color-border-hover: #bbbbbb;
   --rp-color-focus-ring: color-mix(in srgb, var(--rp-color-primary) 32%, transparent);
-  --rp-color-control-bg: var(--rp-color-surface);
+  --rp-color-control-bg: #f9f9f9;
   --rp-color-control-readonly-bg: var(--rp-color-surface-muted);
   --rp-color-control-fg: var(--rp-color-text);
   --rp-color-control-placeholder: var(--rp-color-text-secondary);
@@ -40,8 +32,8 @@
   --rp-color-control-border: var(--rp-color-border);
   --rp-color-control-border-hover: var(--rp-color-border-hover);
   --rp-color-control-border-focus: var(--rp-color-primary);
-  --rp-color-control-track-bg: var(--rp-color-gray-300);
-  --rp-color-control-thumb-bg: var(--rp-color-white);
+  --rp-color-control-track-bg: var(--rp-color-border);
+  --rp-color-control-thumb-bg: #ffffff;
   --rp-color-control-selected-bg: var(--rp-color-primary);
   --rp-color-control-selected-fg: var(--rp-color-on-primary);
   --rp-color-on-primary: #ffffff;
@@ -50,12 +42,63 @@
   --rp-color-on-warning: #ffffff;
   --rp-color-on-danger: #ffffff;
   --rp-color-on-info: #ffffff;
-  --rp-color-primary-fg: var(--rp-color-primary);
-  --rp-color-secondary-fg: var(--rp-color-secondary);
-  --rp-color-success-fg: var(--rp-color-success);
-  --rp-color-warning-fg: var(--rp-color-warning);
-  --rp-color-danger-fg: var(--rp-color-danger);
-  --rp-color-info-fg: var(--rp-color-info);
+  --rp-color-on-neutral: #ffffff;
+  --rp-color-primary-hover: color-mix(in srgb, var(--rp-color-primary) 90%, #111111);
+  --rp-color-primary-active: color-mix(in srgb, var(--rp-color-primary) 80%, #111111);
+  --rp-color-primary-subtle-bg: #e6f4fe;
+  --rp-color-primary-subtle-bg-hover: #d5efff;
+  --rp-color-primary-subtle-bg-active: #c2e5ff;
+  --rp-color-primary-border: #8ec8f6;
+  --rp-color-primary-border-hover: #5eb1ef;
+  --rp-color-primary-fg: #113264;
+  --rp-color-secondary-hover: color-mix(in srgb, var(--rp-color-secondary) 90%, #111111);
+  --rp-color-secondary-active: color-mix(in srgb, var(--rp-color-secondary) 80%, #111111);
+  --rp-color-secondary-subtle-bg: #f4f0fe;
+  --rp-color-secondary-subtle-bg-hover: #ebe4ff;
+  --rp-color-secondary-subtle-bg-active: #e1d9ff;
+  --rp-color-secondary-border: #c2b5f5;
+  --rp-color-secondary-border-hover: #aa99ec;
+  --rp-color-secondary-fg: #2f265f;
+  --rp-color-success-hover: color-mix(in srgb, var(--rp-color-success) 90%, #111111);
+  --rp-color-success-active: color-mix(in srgb, var(--rp-color-success) 80%, #111111);
+  --rp-color-success-subtle-bg: #e6f6eb;
+  --rp-color-success-subtle-bg-hover: #d6f1df;
+  --rp-color-success-subtle-bg-active: #c4e8d1;
+  --rp-color-success-border: #8eceaa;
+  --rp-color-success-border-hover: #5bb98b;
+  --rp-color-success-fg: #193b2d;
+  --rp-color-warning-hover: color-mix(in srgb, var(--rp-color-warning) 90%, #111111);
+  --rp-color-warning-active: color-mix(in srgb, var(--rp-color-warning) 80%, #111111);
+  --rp-color-warning-subtle-bg: #ffefd6;
+  --rp-color-warning-subtle-bg-hover: #ffdfb5;
+  --rp-color-warning-subtle-bg-active: #ffd19a;
+  --rp-color-warning-border: #f5ae73;
+  --rp-color-warning-border-hover: #ec9455;
+  --rp-color-warning-fg: #582d1d;
+  --rp-color-danger-hover: color-mix(in srgb, var(--rp-color-danger) 90%, #111111);
+  --rp-color-danger-active: color-mix(in srgb, var(--rp-color-danger) 80%, #111111);
+  --rp-color-danger-subtle-bg: #feebec;
+  --rp-color-danger-subtle-bg-hover: #ffdbdc;
+  --rp-color-danger-subtle-bg-active: #ffcdce;
+  --rp-color-danger-border: #f4a9aa;
+  --rp-color-danger-border-hover: #eb8e90;
+  --rp-color-danger-fg: #641723;
+  --rp-color-info-hover: color-mix(in srgb, var(--rp-color-info) 90%, #111111);
+  --rp-color-info-active: color-mix(in srgb, var(--rp-color-info) 80%, #111111);
+  --rp-color-info-subtle-bg: #def7f9;
+  --rp-color-info-subtle-bg-hover: #caf1f6;
+  --rp-color-info-subtle-bg-active: #b5e9f0;
+  --rp-color-info-border: #7dcedc;
+  --rp-color-info-border-hover: #3db9cf;
+  --rp-color-info-fg: #0d3c48;
+  --rp-color-neutral-hover: color-mix(in srgb, var(--rp-color-neutral) 90%, #111111);
+  --rp-color-neutral-active: color-mix(in srgb, var(--rp-color-neutral) 80%, #111111);
+  --rp-color-neutral-subtle-bg: #f0f0f0;
+  --rp-color-neutral-subtle-bg-hover: #e8e8e8;
+  --rp-color-neutral-subtle-bg-active: #e0e0e0;
+  --rp-color-neutral-border: #cecece;
+  --rp-color-neutral-border-hover: #bbbbbb;
+  --rp-color-neutral-fg: #202020;
   --rp-font-size-xs: 0.75rem;
   --rp-font-size-sm: 0.875rem;
   --rp-font-size-base: 1rem;
@@ -83,22 +126,16 @@
   --rp-spacing-10: 2.5rem;
   --rp-spacing-12: 3rem;
   --rp-radius-none: 0;
-  --rp-radius-sm: 0.125rem;
-  --rp-radius-base: 0.25rem;
-  --rp-radius-md: 0.375rem;
-  --rp-radius-lg: 0.5rem;
-  --rp-radius-xl: 0.75rem;
-  --rp-radius-2xl: 1rem;
+  --rp-radius-sm: 0.375rem;
+  --rp-radius-md: 0.75rem;
+  --rp-radius-lg: 1rem;
+  --rp-radius-xl: 1.5rem;
   --rp-radius-full: 9999px;
   --rp-border-width-thin: 1px;
   --rp-border-width-medium: 2px;
   --rp-size-control-sm: 32px;
   --rp-size-control-md: 40px;
   --rp-size-control-lg: 48px;
-  --rp-component-menu-min-width: 180px;
-  --rp-component-menu-max-height: 240px;
-  --rp-z-index-dropdown: 100;
-  --rp-z-index-tooltip: 1000;
   --rp-opacity-disabled: 0.5;
   --rp-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
   --rp-shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
@@ -110,36 +147,75 @@
 }
 
 html.dark {
-  --rp-color-text: var(--rp-color-gray-50);
-  --rp-color-text-secondary: var(--rp-color-gray-400);
-  --rp-color-text-disabled: var(--rp-color-gray-600);
-  --rp-color-text-inverted: var(--rp-color-gray-900);
-  --rp-color-background: var(--rp-color-gray-900);
-  --rp-color-surface: var(--rp-color-gray-900);
-  --rp-color-surface-raised: var(--rp-color-gray-800);
-  --rp-color-surface-muted: var(--rp-color-gray-800);
-  --rp-color-surface-hover: var(--rp-color-gray-700);
-  --rp-color-surface-inverted: var(--rp-color-gray-100);
-  --rp-color-overlay: rgba(3, 7, 18, 0.75);
-  --rp-color-border: var(--rp-color-gray-700);
-  --rp-color-border-hover: var(--rp-color-gray-600);
+  --rp-color-text: #eeeeee;
+  --rp-color-text-secondary: #b4b4b4;
+  --rp-color-text-disabled: #6e6e6e;
+  --rp-color-text-inverted: #202020;
+  --rp-color-background: #111111;
+  --rp-color-surface: #111111;
+  --rp-color-surface-raised: #191919;
+  --rp-color-surface-muted: #191919;
+  --rp-color-surface-hover: #222222;
+  --rp-color-button-default-bg: #191919;
+  --rp-color-button-default-bg-hover: #222222;
+  --rp-color-button-default-bg-active: #2a2a2a;
+  --rp-color-surface-inverted: #f9f9f9;
+  --rp-color-overlay: rgba(17, 17, 17, 0.75);
+  --rp-color-border: #3a3a3a;
+  --rp-color-border-hover: #606060;
   --rp-color-focus-ring: color-mix(in srgb, var(--rp-color-primary) 45%, transparent);
-  --rp-color-control-bg: var(--rp-color-gray-900);
-  --rp-color-control-readonly-bg: var(--rp-color-gray-800);
-  --rp-color-control-fg: var(--rp-color-gray-50);
-  --rp-color-control-placeholder: var(--rp-color-gray-500);
-  --rp-color-control-icon: var(--rp-color-gray-400);
-  --rp-color-control-border: var(--rp-color-gray-700);
-  --rp-color-control-border-hover: var(--rp-color-gray-600);
+  --rp-color-control-bg: #191919;
+  --rp-color-control-readonly-bg: var(--rp-color-surface-muted);
+  --rp-color-control-fg: #eeeeee;
+  --rp-color-control-placeholder: #6e6e6e;
+  --rp-color-control-icon: #b4b4b4;
+  --rp-color-control-border: #3a3a3a;
+  --rp-color-control-border-hover: #606060;
   --rp-color-control-border-focus: var(--rp-color-primary);
-  --rp-color-control-track-bg: var(--rp-color-gray-700);
-  --rp-color-control-thumb-bg: var(--rp-color-gray-50);
-  --rp-color-primary-fg: color-mix(in srgb, var(--rp-color-primary) 65%, var(--rp-color-white));
-  --rp-color-secondary-fg: color-mix(in srgb, var(--rp-color-secondary) 65%, var(--rp-color-white));
-  --rp-color-success-fg: color-mix(in srgb, var(--rp-color-success) 65%, var(--rp-color-white));
-  --rp-color-warning-fg: color-mix(in srgb, var(--rp-color-warning) 65%, var(--rp-color-white));
-  --rp-color-danger-fg: color-mix(in srgb, var(--rp-color-danger) 65%, var(--rp-color-white));
-  --rp-color-info-fg: color-mix(in srgb, var(--rp-color-info) 65%, var(--rp-color-white));
+  --rp-color-control-track-bg: var(--rp-color-border);
+  --rp-color-control-thumb-bg: var(--rp-color-surface-inverted);
+  --rp-color-primary-subtle-bg: #0d2847;
+  --rp-color-primary-subtle-bg-hover: #003362;
+  --rp-color-primary-subtle-bg-active: #004074;
+  --rp-color-primary-border: #205d9e;
+  --rp-color-primary-border-hover: #2870bd;
+  --rp-color-primary-fg: #70b8ff;
+  --rp-color-secondary-subtle-bg: #291f43;
+  --rp-color-secondary-subtle-bg-hover: #33255b;
+  --rp-color-secondary-subtle-bg-active: #3c2e69;
+  --rp-color-secondary-border: #56468b;
+  --rp-color-secondary-border-hover: #6958ad;
+  --rp-color-secondary-fg: #baa7ff;
+  --rp-color-success-subtle-bg: #132d21;
+  --rp-color-success-subtle-bg-hover: #113b29;
+  --rp-color-success-subtle-bg-active: #174933;
+  --rp-color-success-border: #28684a;
+  --rp-color-success-border-hover: #2f7c57;
+  --rp-color-success-fg: #3dd68c;
+  --rp-color-warning-subtle-bg: #331e0b;
+  --rp-color-warning-subtle-bg-hover: #462100;
+  --rp-color-warning-subtle-bg-active: #562800;
+  --rp-color-warning-border: #7e451d;
+  --rp-color-warning-border-hover: #a35829;
+  --rp-color-warning-fg: #ffa057;
+  --rp-color-danger-subtle-bg: #3b1219;
+  --rp-color-danger-subtle-bg-hover: #500f1c;
+  --rp-color-danger-subtle-bg-active: #611623;
+  --rp-color-danger-border: #8c333a;
+  --rp-color-danger-border-hover: #b54548;
+  --rp-color-danger-fg: #ff9592;
+  --rp-color-info-subtle-bg: #082c36;
+  --rp-color-info-subtle-bg-hover: #003848;
+  --rp-color-info-subtle-bg-active: #004558;
+  --rp-color-info-border: #12677e;
+  --rp-color-info-border-hover: #11809c;
+  --rp-color-info-fg: #4ccce6;
+  --rp-color-neutral-subtle-bg: #222222;
+  --rp-color-neutral-subtle-bg-hover: #2a2a2a;
+  --rp-color-neutral-subtle-bg-active: #313131;
+  --rp-color-neutral-border: #484848;
+  --rp-color-neutral-border-hover: #606060;
+  --rp-color-neutral-fg: #eeeeee;
   --rp-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
   --rp-shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.3);
   --rp-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);

package/dist/button.css

@@ -1,65 +1,309 @@
-.rp-button[data-v-c2d151de] {
+.rp-button[data-v-b8d57358] {
+  --_rp-button-accent: var(--rp-color-primary);
+  --_rp-button-accent-hover: var(--rp-color-primary-hover);
+  --_rp-button-accent-active: var(--rp-color-primary-active);
+  --_rp-button-accent-on: var(--rp-color-on-primary);
+  --_rp-button-accent-subtle-bg: var(--rp-color-primary-subtle-bg);
+  --_rp-button-accent-subtle-bg-hover: var(--rp-color-primary-subtle-bg-hover);
+  --_rp-button-accent-subtle-bg-active: var(--rp-color-primary-subtle-bg-active);
+  --_rp-button-accent-border: var(--rp-color-primary-border);
+  --_rp-button-accent-border-hover: var(--rp-color-primary-border-hover);
+  --_rp-button-accent-fg: var(--rp-color-primary-fg);
+  --_rp-button-bg: var(--rp-color-button-default-bg);
+  --_rp-button-bg-hover: var(--rp-color-button-default-bg-hover);
+  --_rp-button-bg-active: var(--rp-color-button-default-bg-active);
+  --_rp-button-border: var(--rp-color-border);
+  --_rp-button-border-hover: var(--rp-color-border-hover);
+  --_rp-button-border-active: var(--_rp-button-border-hover);
+  --_rp-button-fg: var(--rp-color-text);
+  --_rp-button-height: var(--rp-size-control-md);
+  --_rp-button-padding-x: var(--rp-spacing-4);
+  --_rp-button-font-size: var(--rp-font-size-base);
+  --_rp-button-radius: var(--rp-radius-sm);
+  --_rp-button-shadow: var(--rp-shadow-sm);
+  --_rp-button-shadow-hover: var(--rp-shadow-base);
+  --_rp-button-shadow-active: var(--rp-shadow-sm);
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  box-sizing: border-box;
   gap: var(--rp-spacing-2);
   font-family: var(--rp-font-family);
-  font-weight: var(--rp-font-weight-normal);
+  font-weight: var(--rp-font-weight-medium);
   line-height: var(--rp-line-height-none);
-  border: var(--rp-border-width-thin) solid transparent;
+  appearance: none;
+  background-color: var(--_rp-button-bg);
+  border: var(--rp-border-width-thin) solid var(--_rp-button-border);
+  box-shadow: var(--_rp-button-shadow);
+  color: var(--_rp-button-fg);
   cursor: pointer;
-  transition: background-color var(--rp-transition-fast), color var(--rp-transition-fast), border-color var(--rp-transition-fast), box-shadow var(--rp-transition-fast);
+  transition: background-color var(--rp-transition-fast), color var(--rp-transition-fast), border-color var(--rp-transition-fast), box-shadow var(--rp-transition-fast), transform var(--rp-transition-fast);
   white-space: nowrap;
   user-select: none;
-  height: var(--rp-size-control-md);
-  padding: 0 var(--rp-spacing-4);
-  font-size: var(--rp-font-size-base);
-  border-radius: var(--rp-radius-lg);
+  height: var(--_rp-button-height);
+  padding: 0 var(--_rp-button-padding-x);
+  font-size: var(--_rp-button-font-size);
+  border-radius: var(--_rp-button-radius);
 }
-.rp-button--solid[data-v-c2d151de] {
-  background-color: var(--rp-color-primary);
-  color: var(--rp-color-on-primary);
+.rp-button[data-v-b8d57358]:hover:not(:disabled) {
+  background-color: var(--_rp-button-bg-hover);
+  border-color: var(--_rp-button-border-hover);
+  box-shadow: var(--_rp-button-shadow-hover);
 }
-.rp-button--solid[data-v-c2d151de]:hover:not(:disabled) {
-  background-color: color-mix(in srgb, var(--rp-color-primary) 90%, var(--rp-color-black));
+.rp-button[data-v-b8d57358]:active:not(:disabled) {
+  background-color: var(--_rp-button-bg-active);
+  border-color: var(--_rp-button-border-active);
+  box-shadow: var(--_rp-button-shadow-active);
+  transform: translateY(1px);
 }
-.rp-button--solid[data-v-c2d151de]:active:not(:disabled) {
-  background-color: color-mix(in srgb, var(--rp-color-primary) 80%, var(--rp-color-black));
+.rp-button--color-primary[data-v-b8d57358] {
+  --_rp-button-accent: var(--rp-color-primary);
+  --_rp-button-accent-hover: var(--rp-color-primary-hover);
+  --_rp-button-accent-active: var(--rp-color-primary-active);
+  --_rp-button-accent-on: var(--rp-color-on-primary);
+  --_rp-button-accent-subtle-bg: var(--rp-color-primary-subtle-bg);
+  --_rp-button-accent-subtle-bg-hover: var(--rp-color-primary-subtle-bg-hover);
+  --_rp-button-accent-subtle-bg-active: var(--rp-color-primary-subtle-bg-active);
+  --_rp-button-accent-border: var(--rp-color-primary-border);
+  --_rp-button-accent-border-hover: var(--rp-color-primary-border-hover);
+  --_rp-button-accent-fg: var(--rp-color-primary-fg);
+  --_rp-button-bg-hover: var(--_rp-button-accent-subtle-bg-hover);
+  --_rp-button-bg-active: var(--_rp-button-accent-subtle-bg-active);
+  --_rp-button-border: var(--_rp-button-accent-border);
+  --_rp-button-border-hover: var(--_rp-button-accent-border-hover);
+  --_rp-button-fg: var(--_rp-button-accent-fg);
 }
-.rp-button--ghost[data-v-c2d151de] {
-  background-color: transparent;
-  color: var(--rp-color-primary-fg);
+.rp-button--color-secondary[data-v-b8d57358] {
+  --_rp-button-accent: var(--rp-color-secondary);
+  --_rp-button-accent-hover: var(--rp-color-secondary-hover);
+  --_rp-button-accent-active: var(--rp-color-secondary-active);
+  --_rp-button-accent-on: var(--rp-color-on-secondary);
+  --_rp-button-accent-subtle-bg: var(--rp-color-secondary-subtle-bg);
+  --_rp-button-accent-subtle-bg-hover: var(--rp-color-secondary-subtle-bg-hover);
+  --_rp-button-accent-subtle-bg-active: var(--rp-color-secondary-subtle-bg-active);
+  --_rp-button-accent-border: var(--rp-color-secondary-border);
+  --_rp-button-accent-border-hover: var(--rp-color-secondary-border-hover);
+  --_rp-button-accent-fg: var(--rp-color-secondary-fg);
+  --_rp-button-bg-hover: var(--_rp-button-accent-subtle-bg-hover);
+  --_rp-button-bg-active: var(--_rp-button-accent-subtle-bg-active);
+  --_rp-button-border: var(--_rp-button-accent-border);
+  --_rp-button-border-hover: var(--_rp-button-accent-border-hover);
+  --_rp-button-fg: var(--_rp-button-accent-fg);
 }
-.rp-button--ghost[data-v-c2d151de]:hover:not(:disabled) {
-  background-color: color-mix(in srgb, var(--rp-color-primary) 14%, transparent);
+.rp-button--color-success[data-v-b8d57358] {
+  --_rp-button-accent: var(--rp-color-success);
+  --_rp-button-accent-hover: var(--rp-color-success-hover);
+  --_rp-button-accent-active: var(--rp-color-success-active);
+  --_rp-button-accent-on: var(--rp-color-on-success);
+  --_rp-button-accent-subtle-bg: var(--rp-color-success-subtle-bg);
+  --_rp-button-accent-subtle-bg-hover: var(--rp-color-success-subtle-bg-hover);
+  --_rp-button-accent-subtle-bg-active: var(--rp-color-success-subtle-bg-active);
+  --_rp-button-accent-border: var(--rp-color-success-border);
+  --_rp-button-accent-border-hover: var(--rp-color-success-border-hover);
+  --_rp-button-accent-fg: var(--rp-color-success-fg);
+  --_rp-button-bg-hover: var(--_rp-button-accent-subtle-bg-hover);
+  --_rp-button-bg-active: var(--_rp-button-accent-subtle-bg-active);
+  --_rp-button-border: var(--_rp-button-accent-border);
+  --_rp-button-border-hover: var(--_rp-button-accent-border-hover);
+  --_rp-button-fg: var(--_rp-button-accent-fg);
 }
-.rp-button--ghost[data-v-c2d151de]:active:not(:disabled) {
-  background-color: color-mix(in srgb, var(--rp-color-primary) 18%, transparent);
+.rp-button--color-warning[data-v-b8d57358] {
+  --_rp-button-accent: var(--rp-color-warning);
+  --_rp-button-accent-hover: var(--rp-color-warning-hover);
+  --_rp-button-accent-active: var(--rp-color-warning-active);
+  --_rp-button-accent-on: var(--rp-color-on-warning);
+  --_rp-button-accent-subtle-bg: var(--rp-color-warning-subtle-bg);
+  --_rp-button-accent-subtle-bg-hover: var(--rp-color-warning-subtle-bg-hover);
+  --_rp-button-accent-subtle-bg-active: var(--rp-color-warning-subtle-bg-active);
+  --_rp-button-accent-border: var(--rp-color-warning-border);
+  --_rp-button-accent-border-hover: var(--rp-color-warning-border-hover);
+  --_rp-button-accent-fg: var(--rp-color-warning-fg);
+  --_rp-button-bg-hover: var(--_rp-button-accent-subtle-bg-hover);
+  --_rp-button-bg-active: var(--_rp-button-accent-subtle-bg-active);
+  --_rp-button-border: var(--_rp-button-accent-border);
+  --_rp-button-border-hover: var(--_rp-button-accent-border-hover);
+  --_rp-button-fg: var(--_rp-button-accent-fg);
 }
-.rp-button[data-v-c2d151de]:disabled {
+.rp-button--color-danger[data-v-b8d57358] {
+  --_rp-button-accent: var(--rp-color-danger);
+  --_rp-button-accent-hover: var(--rp-color-danger-hover);
+  --_rp-button-accent-active: var(--rp-color-danger-active);
+  --_rp-button-accent-on: var(--rp-color-on-danger);
+  --_rp-button-accent-subtle-bg: var(--rp-color-danger-subtle-bg);
+  --_rp-button-accent-subtle-bg-hover: var(--rp-color-danger-subtle-bg-hover);
+  --_rp-button-accent-subtle-bg-active: var(--rp-color-danger-subtle-bg-active);
+  --_rp-button-accent-border: var(--rp-color-danger-border);
+  --_rp-button-accent-border-hover: var(--rp-color-danger-border-hover);
+  --_rp-button-accent-fg: var(--rp-color-danger-fg);
+  --_rp-button-bg-hover: var(--_rp-button-accent-subtle-bg-hover);
+  --_rp-button-bg-active: var(--_rp-button-accent-subtle-bg-active);
+  --_rp-button-border: var(--_rp-button-accent-border);
+  --_rp-button-border-hover: var(--_rp-button-accent-border-hover);
+  --_rp-button-fg: var(--_rp-button-accent-fg);
+}
+.rp-button--color-info[data-v-b8d57358] {
+  --_rp-button-accent: var(--rp-color-info);
+  --_rp-button-accent-hover: var(--rp-color-info-hover);
+  --_rp-button-accent-active: var(--rp-color-info-active);
+  --_rp-button-accent-on: var(--rp-color-on-info);
+  --_rp-button-accent-subtle-bg: var(--rp-color-info-subtle-bg);
+  --_rp-button-accent-subtle-bg-hover: var(--rp-color-info-subtle-bg-hover);
+  --_rp-button-accent-subtle-bg-active: var(--rp-color-info-subtle-bg-active);
+  --_rp-button-accent-border: var(--rp-color-info-border);
+  --_rp-button-accent-border-hover: var(--rp-color-info-border-hover);
+  --_rp-button-accent-fg: var(--rp-color-info-fg);
+  --_rp-button-bg-hover: var(--_rp-button-accent-subtle-bg-hover);
+  --_rp-button-bg-active: var(--_rp-button-accent-subtle-bg-active);
+  --_rp-button-border: var(--_rp-button-accent-border);
+  --_rp-button-border-hover: var(--_rp-button-accent-border-hover);
+  --_rp-button-fg: var(--_rp-button-accent-fg);
+}
+.rp-button--color-neutral[data-v-b8d57358] {
+  --_rp-button-accent: var(--rp-color-neutral);
+  --_rp-button-accent-hover: var(--rp-color-neutral-hover);
+  --_rp-button-accent-active: var(--rp-color-neutral-active);
+  --_rp-button-accent-on: var(--rp-color-on-neutral);
+  --_rp-button-accent-subtle-bg: var(--rp-color-neutral-subtle-bg);
+  --_rp-button-accent-subtle-bg-hover: var(--rp-color-neutral-subtle-bg-hover);
+  --_rp-button-accent-subtle-bg-active: var(--rp-color-neutral-subtle-bg-active);
+  --_rp-button-accent-border: var(--rp-color-neutral-border);
+  --_rp-button-accent-border-hover: var(--rp-color-neutral-border-hover);
+  --_rp-button-accent-fg: var(--rp-color-neutral-fg);
+  --_rp-button-bg-hover: var(--_rp-button-accent-subtle-bg-hover);
+  --_rp-button-bg-active: var(--_rp-button-accent-subtle-bg-active);
+  --_rp-button-border: var(--_rp-button-accent-border);
+  --_rp-button-border-hover: var(--_rp-button-accent-border-hover);
+  --_rp-button-fg: var(--_rp-button-accent-fg);
+}
+.rp-button--size-xs[data-v-b8d57358] {
+  --_rp-button-height: calc(var(--rp-size-control-sm) - var(--rp-spacing-1));
+  --_rp-button-padding-x: var(--rp-spacing-2);
+  --_rp-button-font-size: var(--rp-font-size-xs);
+}
+.rp-button--size-sm[data-v-b8d57358] {
+  --_rp-button-height: var(--rp-size-control-sm);
+  --_rp-button-padding-x: var(--rp-spacing-3);
+  --_rp-button-font-size: var(--rp-font-size-sm);
+}
+.rp-button--size-lg[data-v-b8d57358] {
+  --_rp-button-height: var(--rp-size-control-lg);
+  --_rp-button-padding-x: var(--rp-spacing-5);
+  --_rp-button-font-size: var(--rp-font-size-lg);
+}
+.rp-button--size-xl[data-v-b8d57358] {
+  --_rp-button-height: calc(var(--rp-size-control-lg) + var(--rp-spacing-2));
+  --_rp-button-padding-x: var(--rp-spacing-6);
+  --_rp-button-font-size: var(--rp-font-size-lg);
+}
+.rp-button--radius-xs[data-v-b8d57358] {
+  --_rp-button-radius: var(--rp-radius-sm);
+}
+.rp-button--radius-sm[data-v-b8d57358] {
+  --_rp-button-radius: var(--rp-radius-sm);
+}
+.rp-button--radius-md[data-v-b8d57358] {
+  --_rp-button-radius: var(--rp-radius-md);
+}
+.rp-button--radius-lg[data-v-b8d57358] {
+  --_rp-button-radius: var(--rp-radius-lg);
+}
+.rp-button--radius-xl[data-v-b8d57358] {
+  --_rp-button-radius: var(--rp-radius-xl);
+}
+.rp-button--solid[data-v-b8d57358] {
+  --_rp-button-bg: var(--_rp-button-accent);
+  --_rp-button-bg-hover: var(--_rp-button-accent-hover);
+  --_rp-button-bg-active: var(--_rp-button-accent-active);
+  --_rp-button-border: var(--_rp-button-accent);
+  --_rp-button-border-hover: var(--_rp-button-accent-hover);
+  --_rp-button-border-active: var(--_rp-button-accent-active);
+  --_rp-button-fg: var(--_rp-button-accent-on);
+}
+.rp-button--subtle[data-v-b8d57358] {
+  --_rp-button-bg: var(--_rp-button-accent-subtle-bg);
+  --_rp-button-bg-hover: var(--_rp-button-accent-subtle-bg-hover);
+  --_rp-button-bg-active: var(--_rp-button-accent-subtle-bg-active);
+  --_rp-button-border: transparent;
+  --_rp-button-border-hover: transparent;
+  --_rp-button-border-active: transparent;
+  --_rp-button-fg: var(--_rp-button-accent-fg);
+  --_rp-button-shadow: none;
+  --_rp-button-shadow-hover: none;
+  --_rp-button-shadow-active: none;
+}
+.rp-button--surface[data-v-b8d57358] {
+  --_rp-button-bg: var(--_rp-button-accent-subtle-bg);
+  --_rp-button-bg-hover: var(--_rp-button-accent-subtle-bg-hover);
+  --_rp-button-bg-active: var(--_rp-button-accent-subtle-bg-active);
+  --_rp-button-border: var(--_rp-button-accent-border);
+  --_rp-button-border-hover: var(--_rp-button-accent-subtle-bg-hover);
+  --_rp-button-border-active: var(--_rp-button-accent-border-hover);
+  --_rp-button-fg: var(--_rp-button-accent-fg);
+  --_rp-button-shadow: none;
+  --_rp-button-shadow-hover: none;
+  --_rp-button-shadow-active: none;
+}
+.rp-button--outline[data-v-b8d57358] {
+  --_rp-button-bg: transparent;
+  --_rp-button-bg-hover: var(--_rp-button-accent-subtle-bg-hover);
+  --_rp-button-bg-active: var(--_rp-button-accent-subtle-bg-active);
+  --_rp-button-border: var(--_rp-button-accent-border);
+  --_rp-button-border-hover: var(--_rp-button-accent-border-hover);
+  --_rp-button-border-active: var(--_rp-button-accent-border-hover);
+  --_rp-button-fg: var(--_rp-button-accent-fg);
+  --_rp-button-shadow: none;
+  --_rp-button-shadow-hover: none;
+  --_rp-button-shadow-active: none;
+}
+.rp-button--ghost[data-v-b8d57358] {
+  --_rp-button-bg: transparent;
+  --_rp-button-bg-hover: var(--_rp-button-accent-subtle-bg-hover);
+  --_rp-button-bg-active: var(--_rp-button-accent-subtle-bg-active);
+  --_rp-button-border: transparent;
+  --_rp-button-border-hover: transparent;
+  --_rp-button-border-active: transparent;
+  --_rp-button-fg: var(--_rp-button-accent-fg);
+  --_rp-button-shadow: none;
+  --_rp-button-shadow-hover: none;
+  --_rp-button-shadow-active: none;
+}
+.rp-button--plain[data-v-b8d57358] {
+  --_rp-button-bg: transparent;
+  --_rp-button-bg-hover: transparent;
+  --_rp-button-bg-active: transparent;
+  --_rp-button-border: transparent;
+  --_rp-button-border-hover: transparent;
+  --_rp-button-border-active: transparent;
+  --_rp-button-fg: var(--_rp-button-accent-fg);
+  --_rp-button-shadow: none;
+  --_rp-button-shadow-hover: none;
+  --_rp-button-shadow-active: none;
+}
+.rp-button[data-v-b8d57358]:disabled {
   opacity: var(--rp-opacity-disabled);
   cursor: not-allowed;
+  box-shadow: none;
+  transform: none;
 }
-.rp-button[data-v-c2d151de]:focus-visible {
+.rp-button[data-v-b8d57358]:focus-visible {
   outline: none;
-  border-color: var(--rp-color-control-border-focus);
+  border-color: var(--rp-color-primary);
   box-shadow: 0 0 0 var(--rp-border-width-medium) var(--rp-color-focus-ring);
 }
-.rp-button__prefix[data-v-c2d151de], .rp-button__suffix[data-v-c2d151de] {
+.rp-button__left[data-v-b8d57358], .rp-button__right[data-v-b8d57358] {
   display: inline-flex;
   align-items: center;
   flex-shrink: 0;
 }
-.rp-button__spinner[data-v-c2d151de] {
+.rp-button__spinner[data-v-b8d57358] {
+  display: block;
   width: 1em;
   height: 1em;
-  border: var(--rp-border-width-medium) solid currentColor;
-  border-right-color: transparent;
-  border-radius: var(--rp-radius-full);
   flex-shrink: 0;
-  animation: rp-button-spin-c2d151de 700ms linear infinite;
+  transform-origin: center;
+  animation: rp-button-spin-b8d57358 700ms linear infinite;
 }
-@keyframes rp-button-spin-c2d151de {
+@keyframes rp-button-spin-b8d57358 {
 to {
     transform: rotate(360deg);
 }