_variables.scss

// Dracula Theme
$primary: #bd93f9 !default;
$secondary: #6272a4 !default;
$success: #50fa7b !default;
$info: #8be9fd !default;
$warning: #f1fa8c !default;
$danger: #ff5555 !default;
$light: #f8f8f2 !default;
$dark: #282a36 !default;
$gray: #44475a !default;
$gray-50: #f8f8f2 !default;
$gray-100: #f3f4f6 !default;
$gray-200: #e5e7eb !default;
$gray-300: #d1d5db !default;
$gray-400: #9ca3af !default;
$gray-500: #6b7280 !default;
$gray-600: #4b5563 !default;
$gray-700: #374151 !default;
$gray-800: #1f2937 !default;
$gray-900: #111827 !default;
$gray-A100: #9ca3af !default;
$gray-A200: #6b7280 !default;
$gray-A400: #4b5563 !default;
$gray-A700: #374151 !default;
$dark-50: #f8f8f2 !default;
$dark-100: #f3f4f6 !default;
$dark-200: #e5e7eb !default;
$dark-300: #d1d5db !default;
$dark-400: #9ca3af !default;
$dark-500: #6b7280 !default;
$dark-600: #4b5563 !default;
$dark-700: #374151 !default;
$dark-800: #1f2937 !default;
$dark-900: #111827 !default;
$dark-A100: #9ca3af !default;
$dark-A200: #6b7280 !default;
$dark-A400: #4b5563 !default;
$dark-A700: #374151 !default;
$light-50: #f8f8f2 !default;
$light-100: #f3f4f6 !default;
$light-200: #e5e7eb !default;
$light-300: #d1d5db !default;
$light-400: #9ca3af !default;
$light-500: #6b7280 !default;
$light-600: #4b5563 !default;
$light-700: #374151 !default;
$light-800: #1f2937 !default;
$light-900: #111827 !default;
$light-A100: #9ca3af !default;
$light-A200: #6b7280 !default;
$light-A400: #4b5563 !default;
$light-A700: #374151 !default;

// Pastel Blue
$blue: #a5b4fc !default;
$indigo: #6366f1 !default;
$purple: #b794f4 !default;
$pink: #f687b3 !default;
$red: #ef4444 !default;
$orange: #f59e0b !default;
$yellow: #ecc94b !default;
$green: #48bb78 !default;
$teal: #14b8a6 !default;
$cyan: #6ee7b7 !default;
$white: #ffffff !default;
$black: #000000 !default;

// Color Scheme
$primary-color: $primary !default;
$secondary-color: $secondary !default;
$success-color: $success !default;
$info-color: $info !default;
$warning-color: $warning !default;
$danger-color: $danger !default;
$light-color: $light !default;
$dark-color: $dark !default;
$gray-color: $gray !default;
$gray-50-color: $gray-50 !default;
$gray-100-color: $gray-100 !default;
$gray-200-color: $gray-200 !default;
$gray-300-color: $gray-300 !default;
$gray-400-color: $gray-400 !default;
$gray-500-color: $gray-500 !default;
$gray-600-color: $gray-600 !default;
$gray-700-color: $gray-700 !default;
$gray-800-color: $gray-800 !default;
$gray-900-color: $gray-900 !default;
$gray-A100-color: $gray-A100 !default;
$gray-A200-color: $gray-A200 !default;
$gray-A400-color: $gray-A400 !default;
$gray-A700-color: $gray-A700 !default;
$dark-50-color: $dark-50 !default;
$dark-100-color: $dark-100 !default;
$dark-200-color: $dark-200 !default;
$dark-300-color: $dark-300 !default;
$dark-400-color: $dark-400 !default;
$dark-500-color: $dark-500 !default;
$dark-600-color: $dark-600 !default;
$dark-700-color: $dark-700 !default;
$dark-800-color: $dark-800 !default;
$dark-900-color: $dark-900 !default;
$dark-A100-color: $dark-A100 !default;
$dark-A200-color: $dark-A200 !default;
$dark-A400-color: $dark-A400 !default;
$dark-A700-color: $dark-A700 !default;
$light-50-color: $light-50 !default;
$light-100-color: $light-100 !default;
$light-200-color: $light-200 !default;
$light-300-color: $light-300 !default;
$light-400-color: $light-400 !default;
$light-500-color: $light-500 !default;
$light-600-color: $light-600 !default;
$light-700-color: $light-700 !default;
$light-800-color: $light-800 !default;
$light-900-color: $light-900 !default;
$light-A100-color: $light-A100 !default;
$light-A200-color: $light-A200 !default;
$light-A400-color: $light-A400 !default;
$light-A700-color: $light-A700 !default;

// Body
$body-bg: $dark;
$body-color: $light;

// Links
$link-color: $secondary !default;
$link-hover-color: $primary !default;
$link-hover-decoration: underline !default;

// Alerts
$alert-bg: $dark !default;
$alert-color: $light !default;
$alert-border-color: $gray-700 !default;
$alert-link-color: $primary !default;
$alert-heading-color: $light !default;
$is-success: $success !default;
$is-warning: $warning !default;
$is-danger: $danger !default;
$is-info: $info !default;
$is-primary: $primary !default;

// Errors
$error-color: $danger !default;
$error-bg: $dark !default;
$error-border: $gray-700 !default;
$error-text-strong: $light !default;
$error-text-light: $light !default;
$error-icon-color: $danger !default;
$error-icon-hover-color: $danger !default;
$error-icon-active-color: $danger !default;

// Cards
$card-bg: $dark !default;
$card-color: $light !default;
$card-border-color: $gray-700 !default;
$card-header-bg: $dark !default;
$card-header-color: $light !default;
$card-header-border-color: rgba(0, 0, 0, 0.125) !default;
$card-header-tabs-border-color: $gray-700 !default;
$card-footer-bg: $dark !default;
$card-footer-color: $secondary !default;
$card-footer-border-color: $gray-700 !default;
$card-title-bg: $dark !default;
$card-title-color: $secondary !default;
$card-subtitle-color: $secondary !default;
$card-footer-bg: $dark !default;
$card-footer-color: $secondary !default;
$card-footer-border-color: $gray-700 !default;

// Typography
$font-family-sans-serif: 'Nunito', sans-serif;
$font-size-base: 0.9rem;
$line-height-base: 1.6;

// Color Map
$colors: (
  "primary": $primary,
  "secondary": $secondary,
  "success": $success,
  "info": $info,
  "warning": $warning,
  "danger": $danger,
  "light": $light,
  "dark": $dark,
  "gray": $gray,
  "gray-50": $gray-50,
  "gray-100": $gray-100,
  "gray-200": $gray-200,
  "gray-300": $gray-300,
  "gray-400": $gray-400,
  "gray-500": $gray-500,
  "gray-600": $gray-600,
  "gray-700": $gray-700,
  "gray-800": $gray-800,
  "gray-900": $gray-900,
  "gray-A100": $gray-A100,
  "gray-A200": $gray-A200,
  "gray-A400": $gray-A400,
  "gray-A700": $gray-A700,
  "dark-50": $dark-50,
  "dark-100": $dark-100,
  "dark-200": $dark-200,
  "dark-300": $dark-300,
  "dark-400": $dark-400,
  "dark-500": $dark-500,
  "dark-600": $dark-600,
  "dark-700": $dark-700,
  "dark-800": $dark-800,
  "dark-900": $dark-900,
  "dark-A100": $dark-A100,
  "dark-A200": $dark-A200,
  "dark-A400": $dark-A400,
  "dark-A700": $dark-A700,
  "light-50": $light-50,
  "light-100": $light-100,
  "light-200": $light-200,
  "light-300": $light-300,
  "light-400": $light-400,
  "light-500": $light-500,
  "light-600": $light-600,
  "light-700": $light-700,
  "light-800": $light-800,
  "light-900": $light-900,
  "light-A100": $light-A100,
  "light-A200": $light-A200,
    "light-A400": $light-A400,
    "light-A700": $light-A700
) !default;

// Color Map
@each $color, $value in $colors {
  .bg-#{$color}-background-color {
    background-color: $value !important;
  }
  .text-#{$color}-color {
    color: $value !important;
  }
  .border-#{$color}-border-color {
    border-color: $value !important;
  }
  .fill-#{$color}-fill {
    fill: $value !important;
  }
  .stroke-#{$color}-stroke {
    stroke: $value !important;
  }
    .hover\:bg-#{$color}-hover:hover {
        background-color: $value !important;
    }
    .hover\:text-#{$color}-hover:hover {
        color: $value !important;
    }
    .hover\:border-#{$color}-hover:hover {
        border-color: $value !important;
    }
    .hover\:fill-#{$color}-hover:hover {
        fill: $value !important;
    }
    .hover\:stroke-#{$color}-hover:hover {
        stroke: $value !important;
    }
    .focus\:bg-#{$color}-focus:focus {
        background-color: $value !important;
    }
    .focus\:text-#{$color}-focus:focus {
        color: $value !important;
    }
    .focus\:border-#{$color}-focus:focus {
        border-color: $value !important;
    }
    .focus\:fill-#{$color}-focus:focus {
        fill: $value !important;
    }
    .focus\:stroke-#{$color}-focus:focus {
        stroke: $value !important;
    }
    .active\:bg-#{$color}-active:active {
        background-color: $value !important;
    }
    .active\:text-#{$color}-active:active {
        color: $value !important;
    }
    .active\:border-#{$color}-active:active {
        border-color: $value !important;
    }
    .active\:fill-#{$color}-active:active {
        fill: $value !important;
    }
    .active\:stroke-#{$color}-active:active {
        stroke: $value !important;
    }
    .disabled\:bg-#{$color}-disabled:disabled {
        background-color: $value !important;
    }
    .disabled\:text-#{$color}-disabled:disabled {
        color: $value !important;
    }
    .disabled\:border-#{$color}-disabled:disabled {
        border-color: $value !important;
    }
    .disabled\:fill-#{$color}-disabled:disabled {
        fill: $value !important;
    }
    .disabled\:stroke-#{$color}-disabled:disabled {
        stroke: $value !important;
    }
}

// Opacity Map
@for $i from 1 through 9 {
  .bg-opacity-#{$i}-background-color {
    background-color: rgba(0, 0, 0, $i / 10) !important;
  }
  .text-opacity-#{$i}-color {
    color: rgba(0, 0, 0, $i / 10) !important;
  }
  .border-opacity-#{$i}-border-color {
    border-color: rgba(0, 0, 0, $i / 10) !important;
  }
  .fill-opacity-#{$i}-fill {
    fill: rgba(0, 0, 0, $i / 10) !important;
  }
  .stroke-opacity-#{$i}-stroke {
    stroke: rgba(0, 0, 0, $i / 10) !important;
  }
  .hover\:bg-opacity-#{$i}-hover:hover {
    background-color: rgba(0, 0, 0, $i / 10) !important;
  }
  .hover\:text-opacity-#{$i}-hover:hover {
    color: rgba(0, 0, 0, $i / 10) !important;
  }
  .hover\:border-opacity-#{$i}-hover:hover {
    border-color: rgba(0, 0, 0, $i / 10) !important;
  }
  .hover\:fill-opacity-#{$i}-hover:hover {
    fill: rgba(0, 0, 0, $i / 10) !important;
  }
  .hover\:stroke-opacity-#{$i}-hover:hover {
    stroke: rgba(0, 0, 0, $i / 10) !important;
  }
  .focus\:bg-opacity-#{$i}-focus:focus {
    background-color: rgba(0, 0, 0, $i / 10) !important;
  }
  .focus\:text-opacity-#{$i}-focus:focus {
    color: rgba(0, 0, 0, $i / 10) !important;
  }
  .focus\:border-opacity-#{$i}-focus:focus {
    border-color: rgba(0, 0, 0, $i / 10) !important;
  }
  .focus\:fill-opacity-#{$i}-focus:focus {
    fill: rgba(0, 0, 0, $i / 10) !important;
  }
  .focus\:stroke-opacity-#{$i}-focus:focus {
    stroke: rgba(0, 0, 0, $i / 10) !important;
  }
  .active\:bg-opacity-#{$i}-active:active {
    background-color: rgba(0, 0, 0, $i / 10) !important;
  }
  .active\:text-opacity-#{$i}-active:active {
    color: rgba(0, 0, 0, $i / 10) !important;
  }
}

// Lighten Map
@for $i from 1 through 9 {
  .bg-lighten-#{$i}-background-color {
    background-color: lighten($primary, $i * 5%) !important;
  }
  .text-lighten-#{$i}-color {
    color: lighten($primary, $i * 5%) !important;
  }
  .border-lighten-#{$i}-border-color {
    border-color: lighten($primary, $i * 5%) !important;
  }
  .fill-lighten-#{$i}-fill {
    fill: lighten($primary, $i * 5%) !important;
  }
  .stroke-lighten-#{$i}-stroke {
    stroke: lighten($primary, $i * 5%) !important;
  }
  .hover\:bg-lighten-#{$i}-hover:hover {
    background-color: lighten($primary, $i * 5%) !important;
  }
  .hover\:text-lighten-#{$i}-hover:hover {
    color: lighten($primary, $i * 5%) !important;
  }
  .hover\:border-lighten-#{$i}-hover:hover {
    border-color: lighten($primary, $i * 5%) !important;
  }
  .hover\:fill-lighten-#{$i}-hover:hover {
    fill: lighten($primary, $i * 5%) !important;
  }
  .hover\:stroke-lighten-#{$i}-hover:hover {
    stroke: lighten($primary, $i * 5%) !important;
  }
  .focus\:bg-lighten-#{$i}-focus:focus {
    background-color: lighten($primary, $i * 5%) !important;
  }
  .focus\:text-lighten-#{$i}-focus:focus {
    color: lighten($primary, $i * 5%) !important;
  }
  .focus\:border-lighten-#{$i}-focus:focus {
    border-color: lighten($primary, $i * 5%) !important;
  }
  .focus\:fill-lighten-#{$i}-focus:focus {
    fill: lighten($primary, $i * 5%) !important;
  }
  .focus\:stroke-lighten-#{$i}-focus:focus {
    stroke: lighten($primary, $i * 5%) !important;
  }
  .active\:bg-lighten-#{$i}-active:active {
    background-color: lighten($primary, $i * 5%) !important;
  }
}

// Darken Map
@for $i from 1 through 9 {
  .bg-darken-#{$i}-background-color {
    background-color: darken($primary, $i * 5%) !important;
  }
  .text-darken-#{$i}-color {
    color: darken($primary, $i * 5%) !important;
  }
  .border-darken-#{$i}-border-color {
    border-color: darken($primary, $i * 5%) !important;
  }
  .fill-darken-#{$i}-fill {
    fill: darken($primary, $i * 5%) !important;
  }
  .stroke-darken-#{$i}-stroke {
    stroke: darken($primary, $i * 5%) !important;
  }
  .hover\:bg-darken-#{$i}-hover:hover {
    background-color: darken($primary, $i * 5%) !important;
  }
  .hover\:text-darken-#{$i}-hover:hover {
    color: darken($primary, $i * 5%) !important;
  }
  .hover\:border-darken-#{$i}-hover:hover {
    border-color: darken($primary, $i * 5%) !important;
  }
  .hover\:fill-darken-#{$i}-hover:hover {
    fill: darken($primary, $i * 5%) !important;
  }
  .hover\:stroke-darken-#{$i}-hover:hover {
    stroke: darken($primary, $i * 5%) !important;
  }
  .focus\:bg-darken-#{$i}-focus:focus {
    background-color: darken($primary, $i * 5%) !important;
  }
  .focus\:text-darken-#{$i}-focus:focus {
    color: darken($primary, $i * 5%) !important;
  }
  .focus\:border-darken-#{$i}-focus:focus {
    border-color: darken($primary, $i * 5%) !important;
  }
  .focus\:fill-darken-#{$i}-focus:focus {
    fill: darken($primary, $i * 5%) !important;
  }
  .focus\:stroke-darken-#{$i}-focus:focus {
    stroke: darken($primary, $i * 5%) !important;
  }
}