Retrospring/app/javascript/styles/_variables.scss

// Font settings
$lexend-font-path: "~@fontsource/lexend/files";
$lexend-weights:   500, 600;
$fa-font-path:     "~font-awesome/fonts";

$font-family-sans-serif:  "Lexend", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
$font-family-serif:       Georgia, "DejaVu Serif", "Times New Roman", Times, serif;
$font-family-monospace:   "PragmataPro", Monaco, "Ubuntu Mono", Menlo, "DejaVu Sans Mono", monospace;
$font-family-base:        $font-family-sans-serif;

$font-size-base:          1rem;
$font-size-large:         ceil(($font-size-base * 1.25)); // ~18px
$font-size-small:         ceil(($font-size-base * 0.85)); // ~12px

$font-size-h1:            floor(($font-size-base * 2.6)); // ~36px
$font-size-h2:            floor(($font-size-base * 2.15)); // ~30px
$font-size-h3:            ceil(($font-size-base * 1.7)); // ~24px
$font-size-h4:            ceil(($font-size-base * 1.25)); // ~18px
$font-size-h5:            $font-size-base;
$font-size-h6:            ceil(($font-size-base * 0.85)); // ~12px

// Usual navbar height
$navbar-height: 56px;

// Color overrides for Bootstrap
$primary: #5e35b1;

// Cards
$card-border-width: 0;

// List Groups
$list-group-border-width: 0;

// nProgress
$nprogress-color: lighten($primary, 25%);

// Color names for theme generation
$color-names: (
  "primary",
  "danger",
  "warning",
  "info",
  "success",
  "dark",
  "light"
);

// Avatar variables
$avatar-border-radius: 4px;

$avatar-sizes: (
  "xs": 20px,
  "sm": 30px,
  "md": 40px,
  "lg": 80px,
  "xl": 120px,
  "xxl": 160px,
);

$spacers: (
  10: (1rem * 6)
);

:root {
  --background: #f0edf4;
  --input-bg: var(--background);
  --raised-bg: #ffffff;
  --raised-accent: #f7f7f7;

  /**
   NOTE for all *-text variables
   ----------------------------------------------
   The text-variables are present as triplets
   because in some places it's required to adjust
   their transparency.

   So, for general usage, use:
   color: RGB(var(--*-text));

   And for transparent usage, use:
   color: rgba(var(--*-text), .7);

   The uppercase RGB is required because internally
   SassC wants more than one argument for rgb(),
   hence writing RGB() bypasses that check, but
   browsers interpret it correctly.
   */

  --primary-text: 255, 255, 255;
  --danger-text: 255, 255, 255;
  --warning-text: 41, 41, 41;
  --info-text: 255, 255, 255;
  --success-text: 255, 255, 255;
  --dark-text: 255, 255, 255;
  --light-text: 0, 0, 0;

  --body-text: 0, 0, 0;
  --muted-text: 108, 117, 125;
  --input-text: 0, 0, 0;

  --turbolinks-progress-color: #a58adc; // --primary lightened by 25%
}

$gray: #e2e2e2;