@plexui/styles 0.0.0-stage → 0.1.1

package/dist/es/styles/variables-semantic.css

@@ -0,0 +1,629 @@
+/* stylelint-disable custom-property-pattern -- Tailwind requires this sometimes */
+
+@layer theme {
+  :root,
+  :where([data-theme]) {
+    /* =============================================
+      Text colors
+    ============================================= */
+    --color-text: var(--gray-1000);
+    --color-text-inverse: var(--gray-0);
+
+    /* =============================================
+      Ring colors
+    ============================================= */
+
+    /* =============================================
+      Primary colors
+    ============================================= */
+    /* Text */
+    --color-text-primary: var(--color-text);
+    /* Soft */
+    --color-text-primary-soft: var(--color-text);
+    --color-background-primary-soft-alt: var(--alpha-02);
+    --color-border-primary-soft-alt: var(--alpha-06);
+    --color-text-primary-soft-alt: var(--color-text);
+    /* Surface */
+    --color-text-primary-surface: var(--color-text);
+    /* Solid */
+    --color-text-primary-solid: var(--color-text-inverse);
+    /* Outline */
+    --color-text-primary-outline: var(--color-text);
+    --color-text-primary-outline-hover: var(--color-text);
+    /* Ghost */
+    --color-text-primary-ghost: var(--color-text);
+    --color-text-primary-ghost-hover: var(--color-text);
+    /* Ring */
+    --color-ring-primary: var(--color-ring);
+    --color-ring-primary-soft: var(--color-ring-primary);
+    --color-ring-primary-solid: var(--color-ring-primary);
+    --color-ring-primary-outline: var(--color-ring-primary);
+    --color-ring-primary-ghost: var(--color-ring-primary);
+
+    /* =============================================
+      Secondary colors
+    ============================================= */
+    /* Soft */
+    --color-text-secondary-soft: var(--color-text);
+    --color-background-secondary-soft-alt: var(--alpha-02);
+    --color-border-secondary-soft-alt: var(--alpha-06);
+    --color-text-secondary-soft-alt: var(--color-text);
+    /* Solid */
+    --color-text-secondary-solid: var(--white);
+    /* Outline */
+    --color-text-secondary-outline: var(--color-text-secondary);
+    --color-text-secondary-outline-hover: var(--color-text);
+    /* Ghost */
+    --color-text-secondary-ghost: var(--color-text-secondary);
+    --color-text-secondary-ghost-hover: var(--color-text);
+    /* Ring */
+    --color-ring-secondary: var(--color-ring);
+    --color-ring-secondary-soft: var(--color-ring-secondary);
+    --color-ring-secondary-solid: var(--color-ring-secondary);
+    --color-ring-secondary-outline: var(--color-ring-secondary);
+    --color-ring-secondary-ghost: var(--color-ring-secondary);
+
+    /* =============================================
+      Info colors
+    ============================================= */
+    /* Text */
+    /* Soft */
+    /* The hue scales do not flip in the dark theme, so the opaque soft fills mix
+       the hue into the dark base there; light text stays readable on them */
+    --color-background-info-soft-alpha: var(--blue-a50);
+    --color-background-info-soft-alpha-hover: var(--blue-a75);
+    --color-background-info-soft-alpha-active: var(--blue-a75);
+    /* Surface */
+    /* Solid */
+    --color-background-info-solid: var(--blue-400);
+    --color-background-info-solid-hover: var(--blue-500);
+    --color-background-info-solid-active: var(--blue-500);
+    --color-text-info-solid: var(--white);
+    /* Outline */
+    --color-background-info-outline-hover: var(--blue-a25);
+    --color-background-info-outline-active: var(--blue-a25);
+    --color-border-info-outline: var(--blue-500);
+    --color-border-info-outline-hover: var(--blue-500);
+    --color-text-info-outline: var(--blue-500);
+    --color-text-info-outline-hover: var(--blue-500);
+    /* Ghost */
+    --color-background-info-ghost-hover: var(--blue-a50);
+    --color-background-info-ghost-active: var(--blue-a50);
+    /* Ring */
+    --color-ring-info: var(--color-ring);
+    --color-ring-info-soft: var(--color-ring-info);
+    --color-ring-info-solid: var(--color-ring-info);
+    --color-ring-info-outline: var(--color-ring-info);
+    --color-ring-info-ghost: var(--color-ring-info);
+
+    /* =============================================
+      Warning colors
+    ============================================= */
+    /* Text */
+    /* Soft */
+    --color-background-warning-soft-alpha: var(--orange-a50);
+    --color-background-warning-soft-alpha-hover: var(--orange-a75);
+    --color-background-warning-soft-alpha-active: var(--orange-a75);
+    /* Surface */
+    /* Solid */
+    --color-background-warning-solid: var(--orange-500);
+    --color-background-warning-solid-hover: var(--orange-600);
+    --color-background-warning-solid-active: var(--orange-600);
+    --color-text-warning-solid: var(--white);
+    /* Outline */
+    --color-background-warning-outline-hover: var(--orange-a25);
+    --color-background-warning-outline-active: var(--orange-a25);
+    --color-border-warning-outline: var(--orange-500);
+    --color-border-warning-outline-hover: var(--orange-500);
+    --color-text-warning-outline: var(--orange-500);
+    --color-text-warning-outline-hover: var(--orange-500);
+    /* Ghost */
+    --color-background-warning-ghost-hover: var(--orange-a50);
+    --color-background-warning-ghost-active: var(--orange-a50);
+    --color-text-warning-ghost: var(--orange-500);
+    --color-text-warning-ghost-hover: var(--orange-500);
+    /* Ring */
+    --color-ring-warning: var(--color-ring);
+    --color-ring-warning-soft: var(--color-ring-warning);
+    --color-ring-warning-solid: var(--color-ring-warning);
+    --color-ring-warning-outline: var(--color-ring-warning);
+    --color-ring-warning-ghost: var(--color-ring-warning);
+
+    /* =============================================
+      Caution colors
+    ============================================= */
+    /* Text */
+    --color-text-caution-hover: var(--yellow-800);
+    /* Soft */
+    --color-background-caution-soft-alpha: var(--yellow-a50);
+    --color-background-caution-soft-alpha-hover: var(--yellow-a75);
+    --color-background-caution-soft-alpha-active: var(--yellow-a75);
+    /* Surface */
+    /* Solid */
+    --color-background-caution-solid: var(--yellow-600);
+    --color-background-caution-solid-hover: var(--yellow-700);
+    --color-background-caution-solid-active: var(--yellow-700);
+    --color-text-caution-solid: var(--white);
+    /* Outline */
+    --color-background-caution-outline-hover: var(--yellow-a25);
+    --color-background-caution-outline-active: var(--yellow-a25);
+    --color-border-caution-outline: var(--yellow-700);
+    --color-border-caution-outline-hover: var(--yellow-700);
+    --color-text-caution-outline: var(--yellow-700);
+    --color-text-caution-outline-hover: var(--yellow-700);
+    /* Ghost */
+    --color-background-caution-ghost-hover: var(--yellow-a50);
+    --color-background-caution-ghost-active: var(--yellow-a50);
+    --color-text-caution-ghost: var(--yellow-700);
+    --color-text-caution-ghost-hover: var(--yellow-700);
+    /* Ring */
+    --color-ring-caution: var(--color-ring);
+    --color-ring-caution-soft: var(--color-ring-caution);
+    --color-ring-caution-solid: var(--color-ring-caution);
+    --color-ring-caution-outline: var(--color-ring-caution);
+    --color-ring-caution-ghost: var(--color-ring-caution);
+
+    /* =============================================
+      Danger colors
+    ============================================= */
+    /* Text */
+    /* Soft */
+    --color-background-danger-soft-alpha: var(--red-a50);
+    --color-background-danger-soft-alpha-hover: var(--red-a75);
+    --color-background-danger-soft-alpha-active: var(--red-a75);
+    /* Surface */
+    /* Solid */
+    --color-background-danger-solid: var(--red-500);
+    --color-background-danger-solid-hover: var(--red-600);
+    --color-background-danger-solid-active: var(--red-600);
+    --color-text-danger-solid: var(--white);
+    /* Outline */
+    --color-background-danger-outline-hover: var(--red-a25);
+    --color-background-danger-outline-active: var(--red-a25);
+    --color-border-danger-outline: var(--red-500);
+    --color-border-danger-outline-hover: var(--red-500);
+    --color-text-danger-outline: var(--red-500);
+    --color-text-danger-outline-hover: var(--red-500);
+    /* Ghost */
+    --color-background-danger-ghost-hover: var(--red-a50);
+    --color-background-danger-ghost-active: var(--red-a50);
+    --color-text-danger-ghost: var(--red-500);
+    --color-text-danger-ghost-hover: var(--red-500);
+    /* Ring */
+    --color-ring-danger: var(--red-200);
+    --color-ring-danger-soft: var(--color-ring-danger);
+    --color-ring-danger-solid: var(--color-ring-danger);
+    --color-ring-danger-outline: var(--color-ring-danger);
+    --color-ring-danger-ghost: var(--color-ring-danger);
+
+    /* =============================================
+      Success colors
+    ============================================= */
+    /* Text */
+    /* Soft */
+    --color-background-success-soft-alpha: var(--green-a50);
+    --color-background-success-soft-alpha-hover: var(--green-a75);
+    --color-background-success-soft-alpha-active: var(--green-a75);
+    /* Surface */
+    /* Solid */
+    --color-text-success-solid: var(--white);
+    /* Outline */
+    --color-background-success-outline-hover: var(--green-a25);
+    --color-background-success-outline-active: var(--green-a25);
+    --color-text-success-outline: var(--green-500);
+    --color-text-success-outline-hover: var(--green-500);
+    /* Ghost */
+    --color-background-success-ghost-hover: var(--green-a50);
+    --color-background-success-ghost-active: var(--green-a50);
+    --color-text-success-ghost: var(--green-500);
+    --color-text-success-ghost-hover: var(--green-500);
+    /* Ring */
+    --color-ring-success: var(--color-ring);
+    --color-ring-success-soft: var(--color-ring-info);
+    --color-ring-success-solid: var(--color-ring-info);
+    --color-ring-success-outline: var(--color-ring-info);
+    --color-ring-success-ghost: var(--color-ring-info);
+
+    /* =============================================
+      Discovery colors
+    ============================================= */
+    /* Text */
+    /* Soft */
+    --color-background-discovery-soft-alpha: var(--purple-a50);
+    --color-background-discovery-soft-alpha-hover: var(--purple-a75);
+    --color-background-discovery-soft-alpha-active: var(--purple-a75);
+    /* Surface */
+    /* Solid */
+    --color-background-discovery-solid: var(--purple-400);
+    --color-background-discovery-solid-hover: var(--purple-500);
+    --color-background-discovery-solid-active: var(--purple-500);
+    --color-text-discovery-solid: var(--white);
+    /* Outline */
+    --color-background-discovery-outline-hover: var(--purple-a25);
+    --color-background-discovery-outline-active: var(--purple-a25);
+    --color-border-discovery-outline: var(--purple-500);
+    --color-border-discovery-outline-hover: var(--purple-500);
+    /* Ghost */
+    --color-background-discovery-ghost-hover: var(--purple-a50);
+    --color-background-discovery-ghost-active: var(--purple-a50);
+    --color-text-discovery-ghost: var(--purple-500);
+    --color-text-discovery-ghost-hover: var(--purple-500);
+    /* Ring */
+    --color-ring-discovery: var(--color-ring);
+    --color-ring-discovery-soft: var(--color-ring);
+    --color-ring-discovery-solid: var(--color-ring);
+    --color-ring-discovery-outline: var(--color-ring);
+    --color-ring-discovery-ghost: var(--color-ring);
+
+    /* =============================================
+      Disabled colors
+    ============================================= */
+    /* Common disabled styles that are typically shared across all semantic colors */
+    --color-background-disabled: var(--alpha-05);
+    --color-border-disabled: var(--alpha-06);
+
+    /* =============================================
+      Border colors
+    ============================================= */
+
+    /* =============================================
+      Typography
+    ============================================= */
+    /* Tracking */
+    --font-tracking-wide: 0em;
+    --font-tracking-normal: 0em;
+    --font-tracking-tight: 0em;
+    /* Sizes */
+    --font-heading-5xl-size: 4.5rem; /* 72px  */
+    --font-heading-5xl-line-height: 4.5rem; /* 72px  */
+    --font-heading-5xl-weight: var(--font-weight-semibold);
+    --font-heading-5xl-tracking: var(--tracking-tight);
+    --font-heading-4xl-size: 3.75rem; /* 60px  */
+    --font-heading-4xl-line-height: 3.75rem; /* 60px  */
+    --font-heading-4xl-weight: var(--font-weight-semibold);
+    --font-heading-4xl-tracking: var(--tracking-tight);
+    --font-heading-3xl-size: 3rem; /* 48px  */
+    --font-heading-3xl-line-height: 3rem; /* 48px  */
+    --font-heading-3xl-weight: var(--font-weight-semibold);
+    --font-heading-3xl-tracking: var(--tracking-tight);
+    --font-heading-2xl-size: 2.25rem; /* 36px  */
+    --font-heading-2xl-line-height: 2.625rem; /* 42px */
+    --font-heading-2xl-weight: var(--font-weight-semibold);
+    --font-heading-2xl-tracking: var(--tracking-tight);
+    --font-heading-xl-size: 2rem; /* 32px  */
+    --font-heading-xl-line-height: 2.375rem; /* 38px */
+    --font-heading-xl-weight: var(--font-weight-semibold);
+    --font-heading-xl-tracking: var(--tracking-tight);
+    --font-heading-lg-size: 1.5rem; /* 24px  */
+    --font-heading-lg-line-height: 1.75rem; /* 28px */
+    --font-heading-lg-weight: var(--font-weight-semibold);
+    --font-heading-lg-tracking: var(--tracking-normal);
+    --font-heading-md-size: 1.25rem; /* 20px  */
+    --font-heading-md-line-height: 1.625rem; /* 26px */
+    --font-heading-md-weight: var(--font-weight-semibold);
+    --font-heading-md-tracking: var(--tracking-normal);
+    --font-heading-sm-size: 1.125rem; /* 18px  */
+    --font-heading-sm-line-height: 1.625rem; /* 26px */
+    --font-heading-sm-weight: var(--font-weight-semibold);
+    --font-heading-sm-tracking: var(--tracking-normal);
+    --font-heading-xs-size: 1rem; /* 16px  */
+    --font-heading-xs-line-height: 1.5rem; /* 24px */
+    --font-heading-xs-weight: var(--font-weight-semibold);
+    --font-heading-xs-tracking: var(--tracking-normal);
+    --font-text-lg-size: 1.125rem; /* 18px  */
+    --font-text-lg-line-height: 1.8125rem; /* 29px */
+    --font-text-lg-weight: var(--font-weight-normal);
+    --font-text-lg-tracking: var(--tracking-normal);
+    --font-text-md-size: 1rem; /* 16px  */
+    --font-text-md-line-height: 1.5rem; /* 24px */
+    --font-text-md-weight: var(--font-weight-normal);
+    --font-text-md-tracking: var(--tracking-normal);
+    --font-text-sm-size: 0.875rem; /* 14px  */
+    --font-text-sm-line-height: 1.25rem; /* 20px */
+    --font-text-sm-weight: var(--font-weight-normal);
+    --font-text-sm-tracking: var(--tracking-normal);
+    --font-text-xs-size: 0.75rem; /* 12px  */
+    --font-text-xs-line-height: 1.125rem; /* 18px */
+    --font-text-xs-weight: var(--font-weight-normal);
+    --font-text-xs-tracking: var(--tracking-wide);
+    --font-text-2xs-size: 0.625rem; /* 10px  */
+    --font-text-2xs-line-height: 0.875rem; /* 14px */
+    --font-text-2xs-weight: var(--font-weight-normal);
+    --font-text-2xs-tracking: var(--tracking-wide);
+    --font-text-3xs-size: 0.5rem; /* 8px  */
+    --font-text-3xs-line-height: 0.75rem; /* 12px  */
+    --font-text-3xs-weight: var(--font-weight-normal);
+    --font-text-3xs-tracking: var(--tracking-wide);
+
+    /* =============================================
+    Control sizes
+  ============================================= */
+    --control-size-3xs: 1.375rem; /* 22px */
+    --control-size-2xs: 1.5rem; /* 24px */
+    --control-size-xs: 1.625rem; /* 26px */
+    --control-size-sm: 1.75rem; /* 28px */
+    --control-size-md: 2rem; /* 32px */
+    --control-size-lg: 2.25rem; /* 36px */
+    --control-size-xl: 2.5rem; /* 40px */
+    --control-size-2xl: 2.75rem; /* 44px */
+    --control-size-3xl: 3rem; /* 48px */
+    --control-gutter-2xs: 0.375rem; /* 6px */
+    --control-gutter-xs: 0.5rem; /* 8px */
+    --control-gutter-sm: 0.625rem; /* 10px */
+    --control-gutter-md: 0.75rem; /* 12px */
+    --control-gutter-lg: 0.875rem; /* 14px */
+    --control-gutter-xl: 1rem; /* 16px */
+    --control-gutter-pill-scaling: 1.33;
+    --control-radius-sm: var(--radius-sm);
+    --control-radius-md: var(--radius-md);
+    --control-radius-lg: var(--radius-lg);
+    --control-radius-xl: var(--radius-xl);
+    --control-font-size-sm: var(--font-text-xs-size);
+    --control-font-size-md: var(--font-text-sm-size);
+    --control-font-size-lg: var(--font-text-md-size);
+    --control-icon-size-xs: 0.875rem; /* 14px */
+    --control-icon-size-sm: 1rem; /* 16px */
+    --control-icon-size-md: 1.125rem; /* 18px */
+    --control-icon-size-lg: 1.25rem; /* 20px */
+    --control-icon-size-xl: 1.375rem; /* 22px */
+    --control-icon-size-2xl: 1.5rem; /* 24px */
+
+    /* =============================================
+      Motion
+    ============================================= */
+    --cubic-enter: cubic-bezier(0.19, 1, 0.22, 1);
+    --cubic-exit: cubic-bezier(0.8, 0, 0.4, 1);
+    --cubic-exit-snappy: cubic-bezier(0.65, 0, 0.4, 1); /* less inertia delay */
+    --cubic-move: cubic-bezier(0.65, 0, 0.35, 1);
+    --transition-duration-basic: 150ms;
+    --transition-ease-basic: ease;
+
+    /* =============================================
+      Scrollbar
+    ============================================= */
+    --scrollbar-color: var(--alpha-30);
+
+    /* =============================================
+      Shadows
+    ============================================= */
+    --shadow-hairline: 0 0 0 var(--shadow-hairline-width) var(--shadow-hairline-color);
+    /* 100 */
+    --shadow-100: var(--elevation-100-geo) rgb(var(--shadow-color) / var(--shadow-alpha-100));
+    --shadow-100-strong: var(--elevation-100-geo)
+      rgb(var(--shadow-color) / calc(var(--shadow-alpha-100) * 1.25));
+    --shadow-100-stronger: var(--elevation-100-geo)
+      rgb(var(--shadow-color) / calc(var(--shadow-alpha-100) * 1.6));
+    /* 200 */
+    --shadow-200: var(--elevation-200-geo) rgb(var(--shadow-color) / var(--shadow-alpha-200));
+    --shadow-200-strong: var(--elevation-200-geo)
+      rgb(var(--shadow-color) / calc(var(--shadow-alpha-200) * 1.25));
+    --shadow-200-stronger: var(--elevation-200-geo)
+      rgb(var(--shadow-color) / calc(var(--shadow-alpha-200) * 1.6));
+    /* 300 */
+    --shadow-300: var(--elevation-300-geo) rgb(var(--shadow-color) / var(--shadow-alpha-300));
+    --shadow-300-strong: var(--elevation-300-geo)
+      rgb(var(--shadow-color) / calc(var(--shadow-alpha-300) * 1.25));
+    --shadow-300-stronger: var(--elevation-300-geo)
+      rgb(var(--shadow-color) / calc(var(--shadow-alpha-300) * 1.6));
+    /* 400 */
+    --shadow-400: var(--elevation-400-geo) rgb(var(--shadow-color) / var(--shadow-alpha-400));
+    --shadow-400-strong: var(--elevation-400-geo)
+      rgb(var(--shadow-color) / calc(var(--shadow-alpha-400) * 1.25));
+    --shadow-400-stronger: var(--elevation-400-geo)
+      rgb(var(--shadow-color) / calc(var(--shadow-alpha-400) * 1.6));
+
+    /* =============================================
+      Surfaces
+    ============================================= */
+  }
+  :where(:root), :where([data-theme="light"]) {
+    --color-text-secondary: var(--gray-500);
+    --color-text-tertiary: var(--gray-400);
+    --color-ring: var(--blue-500);
+    --color-background-primary-soft: var(--gray-100);
+    --color-background-primary-soft-hover: var(--gray-150);
+    --color-background-primary-soft-active: var(--gray-200);
+    --color-background-primary-soft-alpha: var(--alpha-08);
+    --color-background-primary-soft-alpha-hover: var(--alpha-12);
+    --color-background-primary-soft-alpha-active: var(--alpha-16);
+    --color-background-primary-surface: var(--alpha-05);
+    --color-border-primary-surface: var(--alpha-05);
+    --color-background-primary-solid: var(--gray-900);
+    --color-background-primary-solid-hover: var(--gray-700);
+    --color-background-primary-solid-active: var(--gray-600);
+    --color-background-primary-outline-hover: var(--alpha-02);
+    --color-background-primary-outline-active: var(--alpha-04);
+    --color-border-primary-outline: var(--alpha-16);
+    --color-border-primary-outline-hover: var(--alpha-20);
+    --color-background-primary-ghost-hover: var(--alpha-08);
+    --color-background-primary-ghost-active: var(--alpha-12);
+    --color-background-secondary-soft: var(--gray-100);
+    --color-background-secondary-soft-hover: var(--gray-150);
+    --color-background-secondary-soft-active: var(--gray-200);
+    --color-background-secondary-soft-alpha: var(--alpha-08);
+    --color-background-secondary-soft-alpha-hover: var(--alpha-12);
+    --color-background-secondary-soft-alpha-active: var(--alpha-16);
+    --color-background-secondary-solid: var(--gray-500);
+    --color-background-secondary-solid-hover: var(--gray-600);
+    --color-background-secondary-solid-active: var(--gray-700);
+    --color-background-secondary-outline-hover: var(--alpha-02);
+    --color-background-secondary-outline-active: var(--alpha-04);
+    --color-border-secondary-outline: var(--alpha-16);
+    --color-border-secondary-outline-hover: var(--alpha-20);
+    --color-background-secondary-ghost-hover: var(--alpha-08);
+    --color-background-secondary-ghost-active: var(--alpha-12);
+    --color-text-info: var(--blue-500);
+    --color-background-info-soft: var(--blue-50);
+    --color-background-info-soft-hover: var(--blue-75);
+    --color-background-info-soft-active: var(--blue-75);
+    --color-text-info-soft: var(--blue-600);
+    --color-background-info-surface: var(--blue-a25);
+    --color-border-info-surface: var(--blue-a25);
+    --color-text-info-surface: var(--blue-600);
+    --color-text-info-ghost: var(--blue-500);
+    --color-text-info-ghost-hover: var(--blue-500);
+    --color-text-warning: var(--orange-700);
+    --color-background-warning-soft: var(--orange-50);
+    --color-background-warning-soft-hover: var(--orange-75);
+    --color-background-warning-soft-active: var(--orange-75);
+    --color-text-warning-soft: var(--orange-700);
+    --color-background-warning-surface: var(--orange-a25);
+    --color-border-warning-surface: var(--orange-a25);
+    --color-text-warning-surface: var(--orange-700);
+    --color-text-caution: var(--yellow-700);
+    --color-background-caution-soft: var(--yellow-50);
+    --color-background-caution-soft-hover: var(--yellow-75);
+    --color-background-caution-soft-active: var(--yellow-75);
+    --color-text-caution-soft: var(--yellow-800);
+    --color-background-caution-surface: var(--yellow-a25);
+    --color-border-caution-surface: var(--yellow-a25);
+    --color-text-caution-surface: var(--yellow-800);
+    --color-text-danger: var(--red-700);
+    --color-background-danger-soft: var(--red-50);
+    --color-background-danger-soft-hover: var(--red-75);
+    --color-background-danger-soft-active: var(--red-75);
+    --color-text-danger-soft: var(--red-600);
+    --color-background-danger-surface: var(--red-a25);
+    --color-border-danger-surface: var(--red-a25);
+    --color-text-danger-surface: var(--red-600);
+    --color-text-success: var(--green-700);
+    --color-background-success-soft: var(--green-50);
+    --color-background-success-soft-hover: var(--green-75);
+    --color-background-success-soft-active: var(--green-75);
+    --color-text-success-soft: var(--green-600);
+    --color-background-success-surface: var(--green-a25);
+    --color-border-success-surface: var(--green-a25);
+    --color-text-success-surface: var(--green-600);
+    --color-background-success-solid: var(--green-500);
+    --color-background-success-solid-hover: var(--green-600);
+    --color-background-success-solid-active: var(--green-600);
+    --color-border-success-outline: var(--green-500);
+    --color-border-success-outline-hover: var(--green-500);
+    --color-text-discovery: var(--purple-700);
+    --color-background-discovery-soft: var(--purple-50);
+    --color-background-discovery-soft-hover: var(--purple-75);
+    --color-background-discovery-soft-active: var(--purple-75);
+    --color-text-discovery-soft: var(--purple-600);
+    --color-background-discovery-surface: var(--purple-a25);
+    --color-border-discovery-surface: var(--purple-a25);
+    --color-text-discovery-surface: var(--purple-600);
+    --color-text-discovery-outline: var(--purple-500);
+    --color-text-discovery-outline-hover: var(--purple-500);
+    --color-text-disabled: var(--gray-400);
+    --color-border-subtle: var(--alpha-05);
+    --color-border: var(--alpha-10);
+    --color-border-strong: var(--alpha-15);
+    --shadow: 0 10px 15px -3px rgba(0 0 0 / 10%),
+      0 4px 6px -4px rgba(0 0 0 / 10%);
+    --color-surface: var(--gray-0);
+    --color-surface-secondary: var(--gray-50);
+    --color-surface-tertiary: var(--gray-75);
+    --color-surface-elevated: var(--gray-0);
+    --color-surface-elevated-secondary: var(--gray-50)
+  }
+  :where([data-theme="dark"]) {
+    --color-text-secondary: var(--gray-700);
+    --color-text-tertiary: var(--gray-600);
+    --color-ring: var(--blue-400);
+    --color-background-primary-soft: var(--gray-300);
+    --color-background-primary-soft-hover: var(--gray-350);
+    --color-background-primary-soft-active: var(--gray-400);
+    --color-background-primary-soft-alpha: var(--alpha-12);
+    --color-background-primary-soft-alpha-hover: var(--alpha-16);
+    --color-background-primary-soft-alpha-active: var(--alpha-20);
+    --color-background-primary-surface: var(--alpha-08);
+    --color-border-primary-surface: var(--alpha-08);
+    --color-background-primary-solid: var(--gray-950);
+    --color-background-primary-solid-hover: var(--gray-900);
+    --color-background-primary-solid-active: var(--gray-850);
+    --color-background-primary-outline-hover: var(--alpha-04);
+    --color-background-primary-outline-active: var(--alpha-06);
+    --color-border-primary-outline: var(--alpha-25);
+    --color-border-primary-outline-hover: var(--alpha-30);
+    --color-background-primary-ghost-hover: var(--alpha-12);
+    --color-background-primary-ghost-active: var(--alpha-16);
+    --color-background-secondary-soft: var(--gray-300);
+    --color-background-secondary-soft-hover: var(--gray-350);
+    --color-background-secondary-soft-active: var(--gray-400);
+    --color-background-secondary-soft-alpha: var(--alpha-12);
+    --color-background-secondary-soft-alpha-hover: var(--alpha-16);
+    --color-background-secondary-soft-alpha-active: var(--alpha-20);
+    --color-background-secondary-solid: var(--gray-400);
+    --color-background-secondary-solid-hover: var(--gray-450);
+    --color-background-secondary-solid-active: var(--gray-500);
+    --color-background-secondary-outline-hover: var(--alpha-04);
+    --color-background-secondary-outline-active: var(--alpha-06);
+    --color-border-secondary-outline: var(--alpha-25);
+    --color-border-secondary-outline-hover: var(--alpha-30);
+    --color-background-secondary-ghost-hover: var(--alpha-12);
+    --color-background-secondary-ghost-active: var(--alpha-16);
+    --color-text-info: var(--blue-200);
+    --color-background-info-soft: color-mix(in oklab, var(--blue-400) 25%, var(--gray-100));
+    --color-background-info-soft-hover: color-mix(in oklab, var(--blue-400) 40%, var(--gray-100));
+    --color-background-info-soft-active: color-mix(in oklab, var(--blue-400) 40%, var(--gray-100));
+    --color-text-info-soft: var(--blue-300);
+    --color-background-info-surface: var(--blue-a50);
+    --color-border-info-surface: var(--blue-a50);
+    --color-text-info-surface: var(--blue-300);
+    --color-text-info-ghost: var(--blue-200);
+    --color-text-info-ghost-hover: var(--blue-200);
+    --color-text-warning: var(--orange-500);
+    --color-background-warning-soft: color-mix(in oklab, var(--orange-400) 25%, var(--gray-100));
+    --color-background-warning-soft-hover: color-mix(in oklab, var(--orange-400) 40%, var(--gray-100));
+    --color-background-warning-soft-active: color-mix(in oklab, var(--orange-400) 40%, var(--gray-100));
+    --color-text-warning-soft: var(--orange-400);
+    --color-background-warning-surface: var(--orange-a50);
+    --color-border-warning-surface: var(--orange-a50);
+    --color-text-warning-surface: var(--orange-400);
+    --color-text-caution: var(--yellow-500);
+    --color-background-caution-soft: color-mix(in oklab, var(--yellow-400) 25%, var(--gray-100));
+    --color-background-caution-soft-hover: color-mix(in oklab, var(--yellow-400) 40%, var(--gray-100));
+    --color-background-caution-soft-active: color-mix(in oklab, var(--yellow-400) 40%, var(--gray-100));
+    --color-text-caution-soft: var(--yellow-400);
+    --color-background-caution-surface: var(--yellow-a50);
+    --color-border-caution-surface: var(--yellow-a50);
+    --color-text-caution-surface: var(--yellow-400);
+    --color-text-danger: var(--red-500);
+    --color-background-danger-soft: color-mix(in oklab, var(--red-400) 25%, var(--gray-100));
+    --color-background-danger-soft-hover: color-mix(in oklab, var(--red-400) 40%, var(--gray-100));
+    --color-background-danger-soft-active: color-mix(in oklab, var(--red-400) 40%, var(--gray-100));
+    --color-text-danger-soft: var(--red-400);
+    --color-background-danger-surface: var(--red-a50);
+    --color-border-danger-surface: var(--red-a50);
+    --color-text-danger-surface: var(--red-400);
+    --color-text-success: var(--green-400);
+    --color-background-success-soft: color-mix(in oklab, var(--green-400) 25%, var(--gray-100));
+    --color-background-success-soft-hover: color-mix(in oklab, var(--green-400) 40%, var(--gray-100));
+    --color-background-success-soft-active: color-mix(in oklab, var(--green-400) 40%, var(--gray-100));
+    --color-text-success-soft: var(--green-400);
+    --color-background-success-surface: var(--green-a50);
+    --color-border-success-surface: var(--green-a50);
+    --color-text-success-surface: var(--green-400);
+    --color-background-success-solid: var(--green-600);
+    --color-background-success-solid-hover: var(--green-700);
+    --color-background-success-solid-active: var(--green-700);
+    --color-border-success-outline: var(--green-600);
+    --color-border-success-outline-hover: var(--green-600);
+    --color-text-discovery: var(--purple-500);
+    --color-background-discovery-soft: color-mix(in oklab, var(--purple-400) 25%, var(--gray-100));
+    --color-background-discovery-soft-hover: color-mix(in oklab, var(--purple-400) 40%, var(--gray-100));
+    --color-background-discovery-soft-active: color-mix(in oklab, var(--purple-400) 40%, var(--gray-100));
+    --color-text-discovery-soft: var(--purple-200);
+    --color-background-discovery-surface: var(--purple-a50);
+    --color-border-discovery-surface: var(--purple-a50);
+    --color-text-discovery-surface: var(--purple-200);
+    --color-text-discovery-outline: var(--purple-400);
+    --color-text-discovery-outline-hover: var(--purple-400);
+    --color-text-disabled: var(--gray-500);
+    --color-border-subtle: var(--alpha-06);
+    --color-border: var(--alpha-12);
+    --color-border-strong: var(--alpha-20);
+    --shadow: 0 10px 15px -3px rgba(0 0 0 / 20%),
+      0 4px 6px -4px rgba(0 0 0 / 20%);
+    --color-surface: var(--gray-200);
+    --color-surface-secondary: var(--gray-100);
+    --color-surface-tertiary: var(--gray-50);
+    --color-surface-elevated: var(--gray-300);
+    --color-surface-elevated-secondary: var(--gray-400)
+  }
+}

package/dist/es/styles/variables-tailwind-theme.css

@@ -0,0 +1,34 @@
+@theme static {
+  --breakpoint-xs: 380px;
+  --breakpoint-sm: 576px;
+  --breakpoint-md: 768px;
+  --breakpoint-lg: 1024px;
+  --breakpoint-xl: 1280px;
+  --breakpoint-2xl: 1536px;
+
+  --font-serif: initial;
+  --font-sans: ui-sans-serif, -apple-system, system-ui, "Segoe UI", "Noto Sans", "Helvetica",
+    "Arial", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
+  --font-mono: ui-monospace, "SFMono-Regular", "SF Mono", "Menlo", "Monaco", "Consolas",
+    "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace;
+
+  --font-weight-*: initial;
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+
+  --radius-*: initial;
+  --radius-2xs: 0.125rem; /* 2px */
+  --radius-xs: 0.25rem; /* 4px */
+  --radius-sm: 0.375rem; /* 6px */
+  --radius-md: 0.5rem; /* 8px */
+  --radius-lg: 0.625rem; /* 10px */
+  --radius-xl: 0.75rem; /* 12px */
+  --radius-2xl: 1rem; /* 16px */
+  --radius-3xl: 1.25rem; /* 20px */
+  --radius-4xl: 1.5rem; /* 24px */
+  --radius-full: 9999px;
+
+  --spacing: 0.25rem; /* 4px */
+}