/* * NextUI Design Style Overrides * * Each style overrides CSS tokens via [data-sx-style="X"] on . * Combined with [data-theme="dark"] for dark-mode variants. * System style is resolved at runtime to Cupertino or Fluent. */ /* ============================================================ Cupertino — macOS Sequoia Large radii, layered shadows, SF Pro font ============================================================ */ [data-sx-style="cupertino"] { --sx-radius-sm: 0.375rem; --sx-radius-md: 0.625rem; --sx-radius-lg: 0.875rem; --sx-radius-xl: 1.25rem; --sx-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04); --sx-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04); --sx-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.05); --sx-shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.12), 0 8px 16px rgba(0, 0, 0, 0.06); --sx-shadow-overlay: 0 12px 40px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.08); --sx-border-width-thin: 0.5px; --sx-font-weight-semibold: 500; --sx-font-weight-bold: 600; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", sans-serif; } [data-sx-style="cupertino"][data-theme="dark"] { --sx-shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.12); --sx-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.25), 0 2px 6px rgba(0, 0, 0, 0.15); --sx-shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.3), 0 4px 10px rgba(0, 0, 0, 0.18); --sx-shadow-xl: 0 16px 52px rgba(0, 0, 0, 0.35), 0 8px 20px rgba(0, 0, 0, 0.2); --sx-shadow-overlay: 0 12px 44px rgba(0, 0, 0, 0.4), 0 4px 14px rgba(0, 0, 0, 0.22); } /* ============================================================ Fluent — Windows 11 Small radii, minimal shadows, Segoe UI font ============================================================ */ [data-sx-style="fluent"] { --sx-radius-sm: 0.125rem; --sx-radius-md: 0.25rem; --sx-radius-lg: 0.5rem; --sx-radius-xl: 0.75rem; --sx-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06); --sx-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.08); --sx-shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.1); --sx-shadow-xl: 0 8px 16px rgba(0, 0, 0, 0.12); --sx-shadow-overlay: 0 8px 16px rgba(0, 0, 0, 0.14); --sx-border-width-thin: 1px; --sx-font-weight-semibold: 600; --sx-font-weight-bold: 700; font-family: "Segoe UI Variable Text", "Segoe UI", -apple-system, sans-serif; } [data-sx-style="fluent"][data-theme="dark"] { --sx-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2); --sx-shadow-md: 0 2px 6px rgba(0, 0, 0, 0.24); --sx-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.28); --sx-shadow-xl: 0 8px 20px rgba(0, 0, 0, 0.32); --sx-shadow-overlay: 0 8px 20px rgba(0, 0, 0, 0.36); } /* ============================================================ Classic — Traditional No radii, hard borders, system font ============================================================ */ [data-sx-style="classic"] { --sx-radius-sm: 0; --sx-radius-md: 0.125rem; --sx-radius-lg: 0.125rem; --sx-radius-xl: 0.25rem; --sx-shadow-sm: 0 1px 0 rgba(0, 0, 0, 0.05); --sx-shadow-md: 0 1px 2px rgba(0, 0, 0, 0.1); --sx-shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.12); --sx-shadow-xl: 0 4px 8px rgba(0, 0, 0, 0.14); --sx-shadow-overlay: 0 4px 12px rgba(0, 0, 0, 0.15); --sx-border-width-thin: 1px; --sx-font-weight-semibold: 600; --sx-font-weight-bold: 700; font-family: Tahoma, Verdana, "Segoe UI", sans-serif; } [data-sx-style="classic"][data-theme="dark"] { --sx-shadow-sm: 0 1px 0 rgba(0, 0, 0, 0.15); --sx-shadow-md: 0 1px 3px rgba(0, 0, 0, 0.25); --sx-shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.3); --sx-shadow-xl: 0 4px 12px rgba(0, 0, 0, 0.35); --sx-shadow-overlay: 0 4px 16px rgba(0, 0, 0, 0.4); } /* ============================================================ Futuristic — Sci-fi / Neon Sharp corners, glow shadows, monospace font, neon borders ============================================================ */ [data-sx-style="futuristic"] { --sx-radius-sm: 0; --sx-radius-md: 0.125rem; --sx-radius-lg: 0.25rem; --sx-radius-xl: 0.25rem; --sx-shadow-sm: 0 0 4px color-mix(in srgb, var(--sx-primary-500) 15%, transparent); --sx-shadow-md: 0 0 8px color-mix(in srgb, var(--sx-primary-500) 20%, transparent); --sx-shadow-lg: 0 0 16px color-mix(in srgb, var(--sx-primary-500) 20%, transparent), 0 0 4px color-mix(in srgb, var(--sx-primary-500) 10%, transparent); --sx-shadow-xl: 0 0 24px color-mix(in srgb, var(--sx-primary-500) 25%, transparent), 0 0 8px color-mix(in srgb, var(--sx-primary-500) 12%, transparent); --sx-shadow-overlay: 0 0 32px color-mix(in srgb, var(--sx-primary-500) 25%, transparent), 0 0 12px color-mix(in srgb, var(--sx-primary-500) 15%, transparent); --sx-border-width-thin: 1px; --sx-font-weight-semibold: 500; --sx-font-weight-bold: 600; font-family: "JetBrains Mono", "Fira Code", "SF Mono", "Cascadia Code", monospace; } [data-sx-style="futuristic"][data-theme="dark"] { --sx-shadow-sm: 0 0 6px color-mix(in srgb, var(--sx-primary-500) 25%, transparent); --sx-shadow-md: 0 0 12px color-mix(in srgb, var(--sx-primary-500) 30%, transparent); --sx-shadow-lg: 0 0 20px color-mix(in srgb, var(--sx-primary-500) 35%, transparent), 0 0 6px color-mix(in srgb, var(--sx-primary-500) 18%, transparent); --sx-shadow-xl: 0 0 32px color-mix(in srgb, var(--sx-primary-500) 40%, transparent), 0 0 12px color-mix(in srgb, var(--sx-primary-500) 20%, transparent); --sx-shadow-overlay: 0 0 40px color-mix(in srgb, var(--sx-primary-500) 40%, transparent), 0 0 16px color-mix(in srgb, var(--sx-primary-500) 25%, transparent); }