33-Overrides — Overrides Layer

The highest-specificity layer for exceptions, theming, and project-specific customizations.

Layer Specificity

The overrides layer sits at the end of the cascade, giving it the highest priority among CSS layers.

@layer ss.reset,
       ss.lexicon,
       ss.rhythm,
       ss.typography,
       ss.flow,
       ss.layout,
       ss.appearance,
       ss.components,
       ss.utilities,
       ss.overrides; /* ← Highest priority */

Theme Overrides

Apply theme-specific custom properties that override lexicon tokens.

Light Theme (Default)

Primary Color

Dark Theme Override

Primary Color
/* In the overrides layer */
@layer ss.overrides {
  [data-theme="dark"] {
    --ss-color-primary: #60a5fa;
    --ss-color-background: #0f172a;
    --ss-color-text: #f8fafc;
  }
}

Important Overrides

Emergency overrides using !important should be rare and documented.

@layer ss.overrides {
  /* Only use when absolutely necessary */
  .force-hidden {
    display: none !important;
  }
  
  .force-visible {
    display: block !important;
    visibility: visible !important;
  }
}

Component Patches

Fix or extend third-party component behavior.

@layer ss.overrides {
  /* Patch third-party plugin */
  .third-party-modal {
    z-index: var(--ss-z-modal);
    border-radius: var(--ss-radius-lg);
  }
  
  /* Project-specific exception */
  .hero-section .ss-button {
    padding: var(--ss-space-4) var(--ss-space-8);
    font-size: var(--ss-font-size-lg);
  }
}

Best Practices

Do Don't
Use for theme switching Put base styles here
Document all overrides Use without comments
Scope to specific contexts Apply global changes
Use custom properties Hard-code values
Keep overrides minimal Build features here