@helixui/library 1.1.2 → 2.0.0-next.30

package/dist/css/helix-tokens.css

@@ -0,0 +1,432 @@
+:root {
+  --hx-color-primary-50: #EFF6FF;
+  --hx-color-primary-100: #DBEAFE;
+  --hx-color-primary-200: #BFDBFE;
+  --hx-color-primary-300: #93C5FD;
+  --hx-color-primary-400: #60A5FA;
+  --hx-color-primary-500: #2563EB;
+  --hx-color-primary-600: #1D4ED8;
+  --hx-color-primary-700: #1E40AF;
+  --hx-color-primary-800: #1E3A8A;
+  --hx-color-primary-900: #1E3050;
+  --hx-color-primary-950: #172554;
+  --hx-color-secondary-50: #ECFEFF;
+  --hx-color-secondary-100: #CFFAFE;
+  --hx-color-secondary-200: #A5F3FC;
+  --hx-color-secondary-300: #67E8F9;
+  --hx-color-secondary-400: #22D3EE;
+  --hx-color-secondary-500: #0891B2;
+  --hx-color-secondary-600: #0E7490;
+  --hx-color-secondary-700: #155E75;
+  --hx-color-secondary-800: #164E63;
+  --hx-color-secondary-900: #134152;
+  --hx-color-secondary-950: #083344;
+  --hx-color-accent-50: #FFFBEB;
+  --hx-color-accent-100: #FEF3C7;
+  --hx-color-accent-200: #FDE68A;
+  --hx-color-accent-300: #FCD34D;
+  --hx-color-accent-400: #FBBF24;
+  --hx-color-accent-500: #D97706;
+  --hx-color-accent-600: #B45309;
+  --hx-color-accent-700: #92400E;
+  --hx-color-accent-800: #78350F;
+  --hx-color-accent-900: #633112;
+  --hx-color-accent-950: #451A03;
+  --hx-color-neutral-0: #FFFFFF;
+  --hx-color-neutral-50: #F8FAFC;
+  --hx-color-neutral-100: #F1F5F9;
+  --hx-color-neutral-200: #E2E8F0;
+  --hx-color-neutral-300: #CBD5E1;
+  --hx-color-neutral-400: #94A3B8;
+  --hx-color-neutral-500: #64748B;
+  --hx-color-neutral-600: #475569;
+  --hx-color-neutral-700: #334155;
+  --hx-color-neutral-800: #1E293B;
+  --hx-color-neutral-900: #0F172A;
+  --hx-color-neutral-950: #020617;
+  --hx-color-success-50: #F0FDF4;
+  --hx-color-success-100: #DCFCE7;
+  --hx-color-success-200: #BBF7D0;
+  --hx-color-success-300: #86EFAC;
+  --hx-color-success-400: #4ADE80;
+  --hx-color-success-500: #16A34A;
+  --hx-color-success-600: #15803D;
+  --hx-color-success-700: #166534;
+  --hx-color-success-800: #14532D;
+  --hx-color-success-900: #0D3B21;
+  --hx-color-success-950: #052E16;
+  --hx-color-warning-50: #FFFBEB;
+  --hx-color-warning-100: #FEF3C7;
+  --hx-color-warning-200: #FDE68A;
+  --hx-color-warning-300: #FCD34D;
+  --hx-color-warning-400: #FBBF24;
+  --hx-color-warning-500: #D97706;
+  --hx-color-warning-600: #B45309;
+  --hx-color-warning-700: #92400E;
+  --hx-color-warning-800: #78350F;
+  --hx-color-warning-900: #633112;
+  --hx-color-warning-950: #451A03;
+  --hx-color-error-50: #FEF2F2;
+  --hx-color-error-100: #FEE2E2;
+  --hx-color-error-200: #FECACA;
+  --hx-color-error-300: #FCA5A5;
+  --hx-color-error-400: #F87171;
+  --hx-color-error-500: #DC2626;
+  --hx-color-error-600: #B91C1C;
+  --hx-color-error-700: #991B1B;
+  --hx-color-error-800: #7F1D1D;
+  --hx-color-error-900: #651A1A;
+  --hx-color-error-950: #450A0A;
+  --hx-color-info-50: #F0F9FF;
+  --hx-color-info-100: #E0F2FE;
+  --hx-color-info-200: #BAE6FD;
+  --hx-color-info-300: #7DD3FC;
+  --hx-color-info-400: #38BDF8;
+  --hx-color-info-500: #0284C7;
+  --hx-color-info-600: #0369A1;
+  --hx-color-info-700: #075985;
+  --hx-color-info-800: #0C4A6E;
+  --hx-color-info-900: #0A3553;
+  --hx-color-info-950: #082F49;
+  --hx-color-text-primary: var(--hx-color-neutral-900);
+  --hx-color-text-secondary: var(--hx-color-neutral-600);
+  --hx-color-text-muted: var(--hx-color-neutral-500);
+  --hx-color-text-disabled: var(--hx-color-neutral-400);
+  --hx-color-text-inverse: var(--hx-color-neutral-0);
+  --hx-color-text-on-primary: var(--hx-color-neutral-0);
+  --hx-color-text-on-secondary: var(--hx-color-neutral-0);
+  --hx-color-text-on-error: var(--hx-color-neutral-0);
+  --hx-color-text-on-success: var(--hx-color-neutral-0);
+  --hx-color-text-on-warning: var(--hx-color-neutral-900);
+  --hx-color-text-on-info: var(--hx-color-neutral-0);
+  --hx-color-text-link: var(--hx-color-primary-600);
+  --hx-color-text-link-hover: var(--hx-color-primary-700);
+  --hx-color-text-link-visited: var(--hx-color-secondary-600);
+  --hx-color-text-link-active: var(--hx-color-primary-800);
+  --hx-color-error-text: var(--hx-color-error-600);
+  --hx-color-success-text: var(--hx-color-success-600);
+  --hx-color-surface-default: var(--hx-color-neutral-0);
+  --hx-color-surface-raised: var(--hx-color-neutral-50);
+  --hx-color-surface-sunken: var(--hx-color-neutral-100);
+  --hx-color-surface-overlay: rgba(0, 0, 0, 0.75);
+  --hx-color-border-default: var(--hx-color-neutral-200);
+  --hx-color-border-subtle: var(--hx-color-neutral-100);
+  --hx-color-border-strong: var(--hx-color-neutral-400);
+  --hx-color-border-focus: var(--hx-color-primary-500);
+  --hx-color-focus-ring: var(--hx-color-primary-400);
+  --hx-color-selection-bg: var(--hx-color-primary-200);
+  --hx-color-selection-color: var(--hx-color-neutral-900);
+  --hx-body-bg: var(--hx-color-surface-default);
+  --hx-body-color: var(--hx-color-text-primary);
+  --hx-body-font-family: var(--hx-font-family-sans);
+  --hx-body-font-size: var(--hx-font-size-md);
+  --hx-body-line-height: var(--hx-line-height-normal);
+  --hx-heading-font-family: var(--hx-font-family-sans);
+  --hx-heading-font-weight: var(--hx-font-weight-bold);
+  --hx-heading-line-height: var(--hx-line-height-tight);
+  --hx-heading-letter-spacing: var(--hx-letter-spacing-tight);
+  --hx-space-0: 0;
+  --hx-space-1: 0.25rem;
+  --hx-space-2: 0.5rem;
+  --hx-space-3: 0.75rem;
+  --hx-space-4: 1rem;
+  --hx-space-5: 1.25rem;
+  --hx-space-6: 1.5rem;
+  --hx-space-7: 1.75rem;
+  --hx-space-8: 2rem;
+  --hx-space-10: 2.5rem;
+  --hx-space-12: 3rem;
+  --hx-space-14: 3.5rem;
+  --hx-space-16: 4rem;
+  --hx-space-20: 5rem;
+  --hx-space-24: 6rem;
+  --hx-space-32: 8rem;
+  --hx-space-40: 10rem;
+  --hx-space-48: 12rem;
+  --hx-space-64: 16rem;
+  --hx-space-px: 1px;
+  --hx-font-family-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --hx-font-family-serif: 'Georgia', 'Times New Roman', serif;
+  --hx-font-family-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace;
+  --hx-font-size-2xs: 0.625rem;
+  --hx-font-size-xs: 0.75rem;
+  --hx-font-size-sm: 0.875rem;
+  --hx-font-size-md: 1rem;
+  --hx-font-size-lg: 1.125rem;
+  --hx-font-size-xl: 1.25rem;
+  --hx-font-size-2xl: 1.5rem;
+  --hx-font-size-3xl: 1.875rem;
+  --hx-font-size-4xl: 2.25rem;
+  --hx-font-size-5xl: 3rem;
+  --hx-font-weight-light: 300;
+  --hx-font-weight-normal: 400;
+  --hx-font-weight-medium: 500;
+  --hx-font-weight-semibold: 600;
+  --hx-font-weight-bold: 700;
+  --hx-font-weight-extrabold: 800;
+  --hx-line-height-tighter: 1.125;
+  --hx-line-height-tight: 1.25;
+  --hx-line-height-normal: 1.5;
+  --hx-line-height-relaxed: 1.75;
+  --hx-line-height-loose: 2;
+  --hx-letter-spacing-tighter: -0.05em;
+  --hx-letter-spacing-tight: -0.025em;
+  --hx-letter-spacing-normal: 0;
+  --hx-letter-spacing-wide: 0.025em;
+  --hx-letter-spacing-wider: 0.05em;
+  --hx-letter-spacing-widest: 0.1em;
+  --hx-border-radius-none: 0;
+  --hx-border-radius-sm: 0.25rem;
+  --hx-border-radius-md: 0.375rem;
+  --hx-border-radius-lg: 0.5rem;
+  --hx-border-radius-xl: 0.75rem;
+  --hx-border-radius-2xl: 1rem;
+  --hx-border-radius-full: 9999px;
+  --hx-border-width-thin: 1px;
+  --hx-border-width-medium: 2px;
+  --hx-border-width-thick: 3px;
+  --hx-border-width-focus: var(--hx-border-width-medium);
+  --hx-shadow-none: none;
+  --hx-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --hx-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --hx-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --hx-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --hx-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+  --hx-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
+  --hx-duration-instant: 0ms;
+  --hx-duration-fast: 100ms;
+  --hx-duration-normal: 200ms;
+  --hx-duration-slow: 300ms;
+  --hx-duration-slower: 500ms;
+  --hx-duration-reduced: 0ms;
+  --hx-easing-default: cubic-bezier(0.4, 0, 0.2, 1);
+  --hx-easing-in: cubic-bezier(0.4, 0, 1, 1);
+  --hx-easing-out: cubic-bezier(0, 0, 0.2, 1);
+  --hx-easing-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+  --hx-easing-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  --hx-easing-decelerate: cubic-bezier(0, 0, 0.2, 1);
+  --hx-easing-accelerate: cubic-bezier(0.4, 0, 1, 1);
+  --hx-transition-fast: 150ms ease;
+  --hx-transition-normal: 250ms ease;
+  --hx-transition-slow: 350ms ease;
+  --hx-focus-ring-color: var(--hx-color-primary-400);
+  --hx-focus-ring-width: 2px;
+  --hx-focus-ring-offset: 2px;
+  --hx-focus-ring-style: solid;
+  --hx-focus-ring-opacity: 0.25;
+  --hx-focus-spacing-offset: 2px;
+  --hx-state-hover-opacity: 0.08;
+  --hx-state-pressed-opacity: 0.12;
+  --hx-state-dragged-opacity: 0.16;
+  --hx-state-focus-opacity: 0.12;
+  --hx-filter-brightness-hover: 0.9;
+  --hx-filter-brightness-active: 0.8;
+  --hx-filter-brightness-disabled: 0.6;
+  --hx-filter-blur-sm: 4px;
+  --hx-filter-blur-md: 8px;
+  --hx-filter-blur-lg: 16px;
+  --hx-transform-lift-sm: -1px;
+  --hx-transform-lift-md: -2px;
+  --hx-transform-lift-lg: -4px;
+  --hx-container-sm: 640px;
+  --hx-container-md: 768px;
+  --hx-container-lg: 1024px;
+  --hx-container-xl: 1280px;
+  --hx-container-content: 72rem;
+  --hx-container-narrow: 48rem;
+  --hx-input-height-sm: var(--hx-size-8);
+  --hx-input-height-md: var(--hx-size-10);
+  --hx-input-height-lg: var(--hx-size-12);
+  --hx-divider-color: var(--hx-color-border-default);
+  --hx-divider-width: var(--hx-border-width-thin);
+  --hx-divider-spacing: var(--hx-space-4);
+  --hx-z-index-base: 0;
+  --hx-z-index-dropdown: 1000;
+  --hx-z-index-sticky: 1100;
+  --hx-z-index-fixed: 1200;
+  --hx-z-index-backdrop: 1300;
+  --hx-z-index-modal: 1400;
+  --hx-z-index-popover: 1500;
+  --hx-z-index-tooltip: 1600;
+  --hx-z-index-toast: 1700;
+  --hx-opacity-0: 0;
+  --hx-opacity-5: 0.05;
+  --hx-opacity-10: 0.1;
+  --hx-opacity-25: 0.25;
+  --hx-opacity-50: 0.5;
+  --hx-opacity-75: 0.75;
+  --hx-opacity-90: 0.9;
+  --hx-opacity-100: 1;
+  --hx-opacity-disabled: 0.5;
+  --hx-opacity-overlay: 0.75;
+  --hx-size-4: 1rem;
+  --hx-size-5: 1.25rem;
+  --hx-size-6: 1.5rem;
+  --hx-size-7: 1.75rem;
+  --hx-size-8: 2rem;
+  --hx-size-9: 2.25rem;
+  --hx-size-10: 2.5rem;
+  --hx-size-11: 2.75rem;
+  --hx-size-12: 3rem;
+  --hx-size-14: 3.5rem;
+  --hx-size-16: 4rem;
+  --hx-size-20: 5rem;
+  --hx-size-icon-sm: 1rem;
+  --hx-size-icon-md: 1.25rem;
+  --hx-size-icon-lg: 1.5rem;
+  --hx-size-touch-target: 2.75rem;
+  --hx-overlay-black-6: rgba(0, 0, 0, 0.06);
+  --hx-overlay-black-10: rgba(0, 0, 0, 0.10);
+  --hx-overlay-black-12: rgba(0, 0, 0, 0.12);
+  --hx-overlay-black-15: rgba(0, 0, 0, 0.15);
+  --hx-overlay-black-20: rgba(0, 0, 0, 0.20);
+  --hx-overlay-black-30: rgba(0, 0, 0, 0.30);
+  --hx-overlay-black-40: rgba(0, 0, 0, 0.40);
+  --hx-overlay-black-50: rgba(0, 0, 0, 0.50);
+  --hx-overlay-white-8: rgba(255, 255, 255, 0.08);
+  --hx-overlay-white-10: rgba(255, 255, 255, 0.10);
+  --hx-overlay-white-20: rgba(255, 255, 255, 0.20);
+  --hx-overlay-white-30: rgba(255, 255, 255, 0.30);
+  --hx-overlay-white-40: rgba(255, 255, 255, 0.40);
+  --hx-overlay-primary-25: rgba(37, 99, 235, 0.25);
+  --hx-overlay-error-25: rgba(220, 53, 69, 0.25);
+  --hx-overlay-neutral-12: rgba(13, 17, 23, 0.12);
+  --hx-breakpoint-sm: 640px;
+  --hx-breakpoint-md: 768px;
+  --hx-breakpoint-lg: 1024px;
+  --hx-breakpoint-xl: 1280px;
+  --hx-breakpoint-2xl: 1536px;
+  --hx-aspect-ratio-auto: auto;
+  --hx-aspect-ratio-square: 1 / 1;
+  --hx-aspect-ratio-video: 16 / 9;
+  --hx-aspect-ratio-portrait: 3 / 4;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    --hx-color-error-text: var(--hx-color-error-400);
+    --hx-color-success-text: var(--hx-color-success-400);
+    --hx-color-text-primary: var(--hx-color-neutral-100);
+    --hx-color-text-secondary: var(--hx-color-neutral-300);
+    --hx-color-text-muted: var(--hx-color-neutral-400);
+    --hx-color-text-disabled: var(--hx-color-neutral-600);
+    --hx-color-text-inverse: var(--hx-color-neutral-900);
+    --hx-color-text-link: var(--hx-color-primary-400);
+    --hx-color-text-link-hover: var(--hx-color-primary-300);
+    --hx-color-text-link-visited: var(--hx-color-secondary-400);
+    --hx-color-text-link-active: var(--hx-color-primary-200);
+    --hx-color-surface-default: var(--hx-color-neutral-900);
+    --hx-color-surface-raised: var(--hx-color-neutral-800);
+    --hx-color-surface-sunken: var(--hx-color-neutral-950);
+    --hx-color-surface-overlay: rgba(0, 0, 0, 0.85);
+    --hx-color-border-default: var(--hx-color-neutral-700);
+    --hx-color-border-subtle: var(--hx-color-neutral-800);
+    --hx-color-border-strong: var(--hx-color-neutral-500);
+    --hx-color-border-focus: var(--hx-color-primary-400);
+    --hx-color-focus-ring: var(--hx-color-primary-400);
+    --hx-color-selection-bg: var(--hx-color-primary-800);
+    --hx-color-selection-color: var(--hx-color-neutral-100);
+    --hx-body-bg: var(--hx-color-surface-default);
+    --hx-body-color: var(--hx-color-text-primary);
+    --hx-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
+    --hx-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3);
+    --hx-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.3);
+    --hx-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.4), 0 8px 10px -6px rgb(0 0 0 / 0.3);
+    --hx-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.5);
+  }
+}
+
+:root[data-theme="dark"] {
+  --hx-color-error-text: var(--hx-color-error-400);
+  --hx-color-success-text: var(--hx-color-success-400);
+  --hx-color-text-primary: var(--hx-color-neutral-100);
+  --hx-color-text-secondary: var(--hx-color-neutral-300);
+  --hx-color-text-muted: var(--hx-color-neutral-400);
+  --hx-color-text-disabled: var(--hx-color-neutral-600);
+  --hx-color-text-inverse: var(--hx-color-neutral-900);
+  --hx-color-text-link: var(--hx-color-primary-400);
+  --hx-color-text-link-hover: var(--hx-color-primary-300);
+  --hx-color-text-link-visited: var(--hx-color-secondary-400);
+  --hx-color-text-link-active: var(--hx-color-primary-200);
+  --hx-color-surface-default: var(--hx-color-neutral-900);
+  --hx-color-surface-raised: var(--hx-color-neutral-800);
+  --hx-color-surface-sunken: var(--hx-color-neutral-950);
+  --hx-color-surface-overlay: rgba(0, 0, 0, 0.85);
+  --hx-color-border-default: var(--hx-color-neutral-700);
+  --hx-color-border-subtle: var(--hx-color-neutral-800);
+  --hx-color-border-strong: var(--hx-color-neutral-500);
+  --hx-color-border-focus: var(--hx-color-primary-400);
+  --hx-color-focus-ring: var(--hx-color-primary-400);
+  --hx-color-selection-bg: var(--hx-color-primary-800);
+  --hx-color-selection-color: var(--hx-color-neutral-100);
+  --hx-body-bg: var(--hx-color-surface-default);
+  --hx-body-color: var(--hx-color-text-primary);
+  --hx-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
+  --hx-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3);
+  --hx-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.3);
+  --hx-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.4), 0 8px 10px -6px rgb(0 0 0 / 0.3);
+  --hx-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.5);
+}
+
+@media (forced-colors: active) {
+  :root {
+    --hx-color-primary-500: #3B82F6;
+    --hx-color-primary-600: #60A5FA;
+    --hx-color-primary-700: #93C5FD;
+    --hx-color-secondary-500: #22D3EE;
+    --hx-color-secondary-600: #67E8F9;
+    --hx-color-error-500: #F87171;
+    --hx-color-error-600: #FCA5A5;
+    --hx-color-error-text: #FCA5A5;
+    --hx-color-warning-500: #FBBF24;
+    --hx-color-warning-600: #FCD34D;
+    --hx-color-success-500: #4ADE80;
+    --hx-color-success-600: #86EFAC;
+    --hx-color-success-text: #86EFAC;
+    --hx-color-info-500: #38BDF8;
+    --hx-color-info-600: #7DD3FC;
+    --hx-color-text-primary: #FFFFFF;
+    --hx-color-text-secondary: #FFFFFF;
+    --hx-color-text-muted: #E0E0E0;
+    --hx-color-text-disabled: #767676;
+    --hx-color-text-inverse: #000000;
+    --hx-color-text-on-primary: #000000;
+    --hx-color-text-on-secondary: #000000;
+    --hx-color-text-on-error: #000000;
+    --hx-color-text-on-success: #000000;
+    --hx-color-text-on-warning: #000000;
+    --hx-color-text-on-info: #000000;
+    --hx-color-text-link: #FFFF00;
+    --hx-color-text-link-hover: #FFFF99;
+    --hx-color-text-link-visited: #FF80FF;
+    --hx-color-text-link-active: #FFFFFF;
+    --hx-color-surface-default: #000000;
+    --hx-color-surface-raised: #1A1A1A;
+    --hx-color-surface-sunken: #000000;
+    --hx-color-surface-overlay: rgba(0, 0, 0, 0.95);
+    --hx-color-border-default: #FFFFFF;
+    --hx-color-border-subtle: #C0C0C0;
+    --hx-color-border-strong: #FFFFFF;
+    --hx-color-border-focus: #FFFF00;
+    --hx-color-focus-ring: #FFFF00;
+    --hx-color-selection-bg: #1AEBFF;
+    --hx-color-selection-color: #000000;
+    --hx-body-bg: #000000;
+    --hx-body-color: #FFFFFF;
+    --hx-focus-ring-color: #FFFF00;
+    --hx-focus-ring-width: 3px;
+    --hx-focus-ring-offset: 3px;
+    --hx-focus-ring-style: solid;
+    --hx-focus-ring-opacity: 1;
+    --hx-focus-spacing-offset: 3px;
+    --hx-border-width-thin: 2px;
+    --hx-border-width-medium: 3px;
+    --hx-border-width-thick: 4px;
+    --hx-border-width-focus: 3px;
+    --hx-shadow-sm: 0 1px 2px 0 rgb(255 255 255 / 0.2);
+    --hx-shadow-md: 0 4px 6px -1px rgb(255 255 255 / 0.3), 0 2px 4px -2px rgb(255 255 255 / 0.2);
+    --hx-shadow-lg: 0 10px 15px -3px rgb(255 255 255 / 0.3), 0 4px 6px -4px rgb(255 255 255 / 0.2);
+    --hx-shadow-xl: 0 20px 25px -5px rgb(255 255 255 / 0.3), 0 8px 10px -6px rgb(255 255 255 / 0.2);
+    --hx-shadow-2xl: 0 25px 50px -12px rgb(255 255 255 / 0.4);
+  }
+}