ospinajuanp-reset-css

Customization

Learn how to customize and extend the default styles.

CSS Variables

All themes use CSS custom properties that you can override:

:root {
  /* Colors */
  --color-primary: #007bff;
  --color-secondary: #6c757d;
  --color-background: #ffffff;
  --color-text: #212529;
  --color-border: #dee2e6;

  /* Typography */
  --font-family: Helvetica, Arial, sans-serif;
  --font-size-base: 16px;
  --line-height: 1.5;

  /* Spacing */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
}

Dark Mode Overrides

Add dark mode overrides using media queries:

@media (prefers-color-scheme: dark) {
  :root {
    --color-background: #212529;
    --color-text: #e9ecef;
    --color-border: #343a40;
  }
}

Component-Specific Overrides

Target specific elements for more granular control:

/* Buttons */
button {
  --btn-padding: 0.5rem 1rem;
  --btn-radius: 0.375rem;
}

/* Form elements */
input, textarea, select {
  --input-bg: var(--color-background);
  --input-border: var(--color-border);
  --input-radius: 0.25rem;
}

/* Links */
a {
  --link-color: var(--color-primary);
  --link-hover: #0056b3;
}

SCSS Source

The package includes raw SCSS source for advanced customization:

// If using SCSS directly
@import 'ospinajuanp-reset-css/scss/reset';

// Customize variables before import
$font-family-base: 'Inter', sans-serif;
$color-primary: #6366f1;

Theme-Specific Customization

Each theme can be customized independently:

/* Dark theme overrides */
:root.dark {
  --color-primary: #818cf8;
  --color-background: #1e293b;
  --color-text: #f1f5f9;
}

/* Pastel theme overrides */
:root.pastel {
  --color-primary: #f472b6;
  --color-background: #fff1f2;
}

Next Steps