i2p-styleguide/assets/styles/vars.scss

$primary: var(--primary);
$secondary: var(--secondary-2nd);
$warning: #FFC434;
$danger: #E15647;
$body-font: 'Inter', sans-serif !important;
$header-font: 'Nunito', sans-serif !important;
$border-radius: 4px;

//  General

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

//  Gray
$gray-list: (
  "100": #F7FAFC,
  "200": #EDF2F7,
  "300": #E2E8F0,
  "400": #CBD5E0,
  "500": #A0AEC0,
  "600": #718096,
  "700": #4A5568,
  "800": #2D3748,
  "900": #1A202C
);

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

// Night

$night-list: (
      "100": #D1DAE6,
      "200": #B1BFCF,
      "300": #8A9CB3,
      "400": #657D99,
      "500": #435B77,
      "600": #374B61,
      "700": #2E3D4F,
      "800": #212D3B,
      "900": #15212D
);

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

//  Indigo
$indigo-list: (
        "100": #ECF3FF,
        "200": #C6D9FE,
        "300": #A4BEFB,
        "400": #7E9DF4,
        "500": #6280E6,
        "600": #546BD2,
        "700": #4456B7,
        "800": #3C468A,
        "900": #363A68
);

$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");


//  Red
$red-list: (
        "100": #FFF5F5,
        "200": #FED7D7,
        "300": #FEB2B2,
        "400": #FC8181,
        "500": #F56565,
        "600": #E53E3E,
        "700": #C53030,
        "800": #9B2C2C,
        "900": #742A2A
);

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


// Dynamic background and color classes creation

@each $value in $gray-list {
        .background-gray-#{nth($value, 1)} {
          background-color: nth($value, 2) !important;
        }
        .color-gray-#{nth($value, 1)} {
          color:nth($value, 2) !important;
        }
      }

@each $value in $night-list {
        .background-night-#{nth($value, 1)} {
          background-color: nth($value, 2) !important;
        }
        .color-night-#{nth($value, 1)} {
          color:nth($value, 2) !important;
        }
      }
      
@each $value in $indigo-list {
        .background-indigo-#{nth($value, 1)} {
          background-color: nth($value, 2) !important;
        }
        .color-indigo-#{nth($value, 1)} {
          color:nth($value, 2) !important;
        }
      }
      
@each $value in $teal-list {
        .background-teal-#{nth($value, 1)} {
          background-color: nth($value, 2) !important;
        }
        .color-teal-#{nth($value, 1)} {
          color:nth($value, 2) !important;
        }
      }
      
@each $value in $orange-list {
        .background-orange-#{nth($value, 1)} {
          background-color: nth($value, 2) !important;
        }
        .color-orange-#{nth($value, 1)} {
          color:nth($value, 2) !important;
        }
      }

@each $value in $red-list {
        .background-red-#{nth($value, 1)} {
          background-color: nth($value, 2) !important;
        }
        .color-red-#{nth($value, 1)} {
          color:nth($value, 2) !important;
        }
      }

// 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;
}