hugo-toha/assets/styles/variables.scss

@use 'sass:map';

$breakpoints: (
  tiny: 320px,
  small: 640px,
  medium: 768px,
  large: 1024px,
  very-large: 1280px,
  extra-large: 1536px,
  ultra-large: 2560px,
);

// Color are chosen from TailwindCSS color scheme
// https://tailwindcss.com/docs/customizing-colors

// transitions
$transition-duration: 0.3s;
$transition-type: ease-out;

// borders and shadows
$box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);

// themes
$themes: (
  'light': (
    // cyan 600
    'accent-color': #0891b2,
    // cyan 500
    'hover-over-accent-color': #06b6d4,
    // zinc 200
    'text-over-accent-color': #e4e4e7,
    // slate 50
    'bg-primary': #f8fafc,
    // slate 900
    'bg-primary-inverse': #0f172a,
    // slate 200
    'bg-secondary': #e2e8f0,
    'bg-card': #fff,
    // slate 800
    'heading-color': #1e293b,
    // slate 700
    'text-color': #334155,
    // slate 300
    'inverse-text-color': #cbd5e1,
    // slate 500
    'muted-text-color': #64748b,
    // red 600
    'inline-code-color': #dc2626,
    // amber 200
    'highlight-color': #fde68a,
    // slate 900
    'footer-color': #0f172a,
  ),
  'dark': (
    // cyan 600
    'accent-color': #0891b2,
    // cyan 500
    'hover-over-accent-color': #06b6d4,
    // zinc 200
    'text-over-accent-color': #e4e4e7,
    // gray-800
    'bg-primary': #1f2937,
    // slate 900
    'bg-primary-inverse': #0f172a,
    // gray 900
    'bg-secondary': #111827,
    // slate 800
    'bg-card': #1e293b,
    // slate 100
    'heading-color': #f1f5f9,
    // slate 300
    'text-color': #cbd5e1,
    // slate 900
    'inverse-text-color': #0f172a,
    // slate 500
    'muted-text-color': #64748b,
    // red 600
    'inline-code-color': #dc2626,
    // amber 200
    'highlight-color': #fde68a,
    // slate 900
    'footer-color': #0f172a,
  ),
);

$brand-colors: (
  'facebook': #3b5998,
  'twitter': #1da1f2,
  'linkedin': #0077b5,
  'reddit': #ff4500,
  'tumblr': #35465c,
  'pocket': #ef4056,
  'diaspora': #1e1e1e,
  'whatsapp': #25d366,
);

$alerts: (
  'success': (
    // green 100
    'bg-color': #dcfce7,
    // green 800
    'text-color': #166534,
  ),
  'info': (
    // sky 100
    'bg-color': #e0f2fe,
    // sky 800
    'text-color': #075985,
  ),
  'warning': (
    // yellow 100
    'bg-color': #fef9c3,
    // yellow 800
    'text-color': #854d0e,
  ),
  'danger': (
    // red 100
    'bg-color': #fee2e2,
    // red 800
    'text-color': #991b1b,
  ),
);