@import url("./sx-charts.css"); /* * 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. */ /* * Safe Surface * * A safe surface exposes a rectangular "content safe region" derived from the * rounded corners of the container. Components opt in once and then inherit the * global style factor automatically. */ :root { --sx-safe-surface-inset-factor: 0; --sx-safe-surface-inset-factor-enabled: 0.3; } [data-sx-style="cupertino"] { --sx-safe-surface-inset-factor: 0.3; } [data-sx-style="fluent"], [data-sx-style="classic"], [data-sx-style="futuristic"] { --sx-safe-surface-inset-factor: 0; } .sx-safe-surface { --sx-safe-surface-radius-tl: 0px; --sx-safe-surface-radius-tr: 0px; --sx-safe-surface-radius-br: 0px; --sx-safe-surface-radius-bl: 0px; --sx-safe-surface-rounded-radius: 0px; --sx-safe-surface-inset-factor-effective: var(--sx-safe-surface-inset-factor); --sx-safe-surface-corner-inset-tl: calc(var(--sx-safe-surface-radius-tl) * var(--sx-safe-surface-inset-factor-effective)); --sx-safe-surface-corner-inset-tr: calc(var(--sx-safe-surface-radius-tr) * var(--sx-safe-surface-inset-factor-effective)); --sx-safe-surface-corner-inset-br: calc(var(--sx-safe-surface-radius-br) * var(--sx-safe-surface-inset-factor-effective)); --sx-safe-surface-corner-inset-bl: calc(var(--sx-safe-surface-radius-bl) * var(--sx-safe-surface-inset-factor-effective)); --sx-safe-surface-edge-inset-top: max(var(--sx-safe-surface-corner-inset-tl), var(--sx-safe-surface-corner-inset-tr)); --sx-safe-surface-edge-inset-right: max(var(--sx-safe-surface-corner-inset-tr), var(--sx-safe-surface-corner-inset-br)); --sx-safe-surface-edge-inset-bottom: max(var(--sx-safe-surface-corner-inset-bl), var(--sx-safe-surface-corner-inset-br)); --sx-safe-surface-edge-inset-left: max(var(--sx-safe-surface-corner-inset-tl), var(--sx-safe-surface-corner-inset-bl)); } .sx-safe-surface--enabled { --sx-safe-surface-inset-factor-effective: var(--sx-safe-surface-inset-factor-enabled); } .sx-safe-surface--disabled { --sx-safe-surface-inset-factor-effective: 0; } .sx-safe-surface--all-rounded { --sx-safe-surface-radius-tl: var(--sx-safe-surface-rounded-radius); --sx-safe-surface-radius-tr: var(--sx-safe-surface-rounded-radius); --sx-safe-surface-radius-br: var(--sx-safe-surface-rounded-radius); --sx-safe-surface-radius-bl: var(--sx-safe-surface-rounded-radius); } .sx-safe-surface--top-left-rounded { --sx-safe-surface-radius-tl: var(--sx-safe-surface-rounded-radius); --sx-safe-surface-radius-tr: 0px; --sx-safe-surface-radius-br: 0px; --sx-safe-surface-radius-bl: 0px; } .sx-safe-surface--top-right-rounded { --sx-safe-surface-radius-tl: 0px; --sx-safe-surface-radius-tr: var(--sx-safe-surface-rounded-radius); --sx-safe-surface-radius-br: 0px; --sx-safe-surface-radius-bl: 0px; } .sx-safe-surface--bottom-right-rounded { --sx-safe-surface-radius-tl: 0px; --sx-safe-surface-radius-tr: 0px; --sx-safe-surface-radius-br: var(--sx-safe-surface-rounded-radius); --sx-safe-surface-radius-bl: 0px; } .sx-safe-surface--bottom-left-rounded { --sx-safe-surface-radius-tl: 0px; --sx-safe-surface-radius-tr: 0px; --sx-safe-surface-radius-br: 0px; --sx-safe-surface-radius-bl: var(--sx-safe-surface-rounded-radius); } .sx-safe-surface--left-rounded { --sx-safe-surface-radius-tl: var(--sx-safe-surface-rounded-radius); --sx-safe-surface-radius-tr: 0px; --sx-safe-surface-radius-br: 0px; --sx-safe-surface-radius-bl: var(--sx-safe-surface-rounded-radius); } .sx-safe-surface--right-rounded { --sx-safe-surface-radius-tl: 0px; --sx-safe-surface-radius-tr: var(--sx-safe-surface-rounded-radius); --sx-safe-surface-radius-br: var(--sx-safe-surface-rounded-radius); --sx-safe-surface-radius-bl: 0px; } .sx-safe-surface--top-rounded { --sx-safe-surface-radius-tl: var(--sx-safe-surface-rounded-radius); --sx-safe-surface-radius-tr: var(--sx-safe-surface-rounded-radius); --sx-safe-surface-radius-br: 0px; --sx-safe-surface-radius-bl: 0px; } .sx-safe-surface--bottom-rounded { --sx-safe-surface-radius-tl: 0px; --sx-safe-surface-radius-tr: 0px; --sx-safe-surface-radius-br: var(--sx-safe-surface-rounded-radius); --sx-safe-surface-radius-bl: var(--sx-safe-surface-rounded-radius); } .sx-safe-surface__content { --sx-safe-surface-content-pad-top: 0px; --sx-safe-surface-content-pad-right: 0px; --sx-safe-surface-content-pad-bottom: 0px; --sx-safe-surface-content-pad-left: 0px; padding-top: max(var(--sx-safe-surface-content-pad-top), var(--sx-safe-surface-edge-inset-top, 0px)); padding-right: max(var(--sx-safe-surface-content-pad-right), var(--sx-safe-surface-edge-inset-right, 0px)); padding-bottom: max(var(--sx-safe-surface-content-pad-bottom), var(--sx-safe-surface-edge-inset-bottom, 0px)); padding-left: max(var(--sx-safe-surface-content-pad-left), var(--sx-safe-surface-edge-inset-left, 0px)); } .sx-safe-surface__content--omit-top { padding-top: var(--sx-safe-surface-content-pad-top); } .sx-safe-surface__content--omit-right { padding-right: var(--sx-safe-surface-content-pad-right); } .sx-safe-surface__content--omit-bottom { padding-bottom: var(--sx-safe-surface-content-pad-bottom); } .sx-safe-surface__content--omit-left { padding-left: var(--sx-safe-surface-content-pad-left); } /* ============================================================ 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); }