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

// accent-color
$accent-color: #0891b2; // cyan 600
$hover-over-accent-color: #06b6d4; // cyan 500
$text-over-accent-color: #e4e4e7; // zinc 200

// background-color
$bg-primary: #f8fafc; // slate 50
$bg-primary-inverse: #0f172a; // slate 900
$bg-secondary: #e2e8f0; // slate 200
$bg-card: #fff;

// text-color
$heading-color: #1e293b; // slate 800
$text-color: #334155; // slate 700
$inverse-text-color: #cbd5e1; // slate 300
$muted-text-color: #64748b; // slate 500
$inline-code-color: #dc2626; // red 600
$highlight-color: #fde68a; // amber 200

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

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

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