i2p-styleguide/assets/styles/vars.scss

$primary: #526BCE;
$secondary: #EF9252;
$warning: #FFC434;
$danger: #E15647;
$body-font: 'Inter', sans-serif !important;
$header-font: 'Nunito', sans-serif !important;

//  General

$white:         #ffffff;
$black:         #000000;

//  Gray
$gray-list: (
  "0": #f8f9fa,
  "1": #f1f3f5,
  "2": #e9ecef,
  "3": #dee2e6,
  "4": #ced4da,
  "5": #adb5bd,
  "6": #868e96,
  "7": #495057,
  "8": #343a40,
  "9": #212529
);

$gray-0: map-get($gray-list, "0");
$gray-1: map-get($gray-list, "1");
$gray-2: map-get($gray-list, "2");
$gray-3: map-get($gray-list, "3");
$gray-4: map-get($gray-list, "4");
$gray-5: map-get($gray-list, "5");
$gray-6: map-get($gray-list, "6");
$gray-7: map-get($gray-list, "7");
$gray-8: map-get($gray-list, "8");
$gray-9: map-get($gray-list, "9");

//  Indigo
$indigo-list: (
        "100": #E5FFFE,
        "200": #A6F8F8,
        "300": #7EE4E8,
        "400": #50CEDA,
        "500": #38ADC2,
        "600": #3190A8,
        "700": #2B758D,
        "800": #245C70,
        "900": #1E4C5E
);

$indigo-100: map-get($indigo-list, "100");
$indigo-200: map-get($indigo-list, "200");
$indigo-300: map-get($indigo-list, "300");
$indigo-400: map-get($indigo-list, "400");
$indigo-500: map-get($indigo-list, "500");
$indigo-600: map-get($indigo-list, "600");
$indigo-700: map-get($indigo-list, "700");
$indigo-800: map-get($indigo-list, "800");
$indigo-900: map-get($indigo-list, "900");

//  Teal
$teal-list: (
        "100": #E5FFFE,
        "200": #A6F8F8,
        "300": #7EE4E8,
        "400": #50CEDA,
        "500": #38ADC2,
        "600": #3190A8,
        "700": #2B758D,
        "800": #245C70,
        "900": #1E4C5E
);

$teal-100: map-get($teal-list, "100");
$teal-200: map-get($teal-list, "200");
$teal-300: map-get($teal-list, "300");
$teal-400: map-get($teal-list, "400");
$teal-500: map-get($teal-list, "500");
$teal-600: map-get($teal-list, "600");
$teal-700: map-get($teal-list, "700");
$teal-800: map-get($teal-list, "800");
$teal-900: map-get($teal-list, "900");


//  Orange
$orange-list: (
        "100": #FFFAF0,
        "200": #FEEBC8,
        "300": #FBD38D,
        "400": #F6AD55,
        "500": #ED8936,
        "600": #DD6B20,
        "700": #C05621,
        "800": #9C4221,
        "900": #7B341E
);

$orange-100: map-get($orange-list, "100");
$orange-200: map-get($orange-list, "200");
$orange-300: map-get($orange-list, "300");
$orange-400: map-get($orange-list, "400");
$orange-500: map-get($orange-list, "500");
$orange-600: map-get($orange-list, "600");
$orange-700: map-get($orange-list, "700");
$orange-800: map-get($orange-list, "800");
$orange-900: map-get($orange-list, "900");

// Mixins
//
// .header-display :before size and position
@mixin headerDisplayBefore($size) {
	$height: $size * 1.5;
	$horizontalAlignment: -15px;
	$verticalAlignment: $height * -0.25;
	height: $height;
	transform: translate($horizontalAlignment, 0);
	margin-bottom: $verticalAlignment;
}