default.theme.css

html,
html *,
* {
  /* Border Radius */
  --spx-border-radius: 4px;

  /**
   * Content Colors
   */
  --spx-color-text-default: #f5f5f5;
  --spx-color-text-subtle: #a1a1aa;
  --spx-color-text-highlighted: #ffffff;
  --spx-color-text-link: var(--spx-color-accent);

  /* Base Colors */
  --spx-color-background: #1a2327;
  --spx-color-on-background: var(--spx-color-text-default);
  --spx-color-surface: #303e46;
  --spx-color-on-surface: var(--spx-color-text-default);
  --spx-color-accent: #00bfa5;
  --spx-color-on-accent: var(--spx-color-text-highlighted);
  --spx-color-primary: #00796b;
  --spx-color-on-primary: var(--spx-color-text-highlighted);
  --spx-color-secondary: #37474f;
  --spx-color-on-secondary: var(--spx-color-text-default);
  --spx-color-gradient: linear-gradient(45deg, var(--spx-color-accent), #aa00ff);
  --spx-color-on-gradient: var(--spx-color-text-highlighted);

  /* Status Colors */
  --spx-color-info: var(--spx-color-surface);
  --spx-color-on-info: var(--spx-color-text-default);
  --spx-color-success: #15803d;
  --spx-color-on-success: var(--spx-color-text-default);
  --spx-color-warning: #ca8a04;
  --spx-color-on-warning: var(--spx-color-text-default);
  --spx-color-error: #b91c1c;
  --spx-color-on-error: var(--spx-color-text-default);

  /* Input Fields, Selects and similar controls */
  --spx-color-input-contained-bg: var(--spx-color-secondary);
  --spx-color-input-outlined-fg: var(--spx-color-text-subtle);
  --spx-color-input-focus: var(--spx-color-accent);
  --spx-color-input-error: color-mix(
    in srgb,
    var(--spx-color-on-background),
    var(--spx-color-error) 66%
  );

  /* App Layout Elements */
  --spx-color-app-bar: var(--spx-color-surface);
  --spx-color-on-app-bar: var(--spx-color-on-surface);
  --spx-color-modal-overlay: rgba(0, 0, 0, 0.5);
  --spx-color-modal: var(--spx-color-surface);
  --spx-color-on-modal: var(--spx-color-on-surface);
  --spx-color-sidebar: var(--spx-color-surface);
  --spx-color-on-sidebar: var(--spx-color-on-surface);

  /* Filters */
  --spx-filter-control-hover: brightness(1.25);
  --spx-filter-control-hover-contained: brightness(0.8);
  --spx-filter-control-disabled: brightness(0.8) grayscale(0.6);

  /* Shadows */
  --spx-shadow-medium: 0 0 10px rgba(0, 0, 0, 0.5);

  /* Animations */
  transition:
    filter 100ms,
    backdrop-filter 100ms;
}