browser/libs/components/src/variables.scss

$dark-icon-themes: "theme_dark";

$primary: #175ddc;
$primary-accent: #1252a3;
$secondary: #ced4da;
$secondary-alt: #1a3b66;
$success: #017e45;
$info: #555555;
$warning: #8b6609;
$danger: #c83522;
$white: #ffffff;

// Bootstrap Variable Overrides

$theme-colors: (
  "primary-accent": $primary-accent,
  "secondary-alt": $secondary-alt,
);

$body-bg: $white;
$body-color: #333333;

$font-family-sans-serif: "DM Sans", "Helvetica Neue", Helvetica, Arial, sans-serif,
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

$h1-font-size: 1.7rem;
$h2-font-size: 1.3rem;
$h3-font-size: 1rem;
$h4-font-size: 1rem;
$h5-font-size: 1rem;
$h6-font-size: 1rem;

$small-font-size: 90%;
$font-size-lg: 1.15rem;
$code-font-size: 100%;

$navbar-padding-y: 0.75rem;
$grid-gutter-width: 20px;
$card-spacer-y: 0.6rem;

$list-group-item-padding-y: 0.6rem;
$list-group-active-color: $body-color;
$list-group-active-bg: $white;
$list-group-active-border-color: rgba(#000000, 0.125);

$dropdown-link-color: $body-color;
$dropdown-link-hover-bg: rgba(#000000, 0.06);
$dropdown-link-active-color: $dropdown-link-color;
$dropdown-link-active-bg: rgba(#000000, 0.1);
$dropdown-item-padding-x: 1rem;

$navbar-brand-font-size: 35px;
$navbar-brand-height: 35px;
$navbar-brand-padding-y: 0;
$navbar-dark-color: rgba($white, 0.7);
$navbar-dark-hover-color: rgba($white, 0.9);
$navbar-nav-link-padding-x: 0.8rem;

$input-bg: #fbfbfb;
$input-focus-bg: $white;
$input-disabled-bg: #e0e0e0;
$input-placeholder-color: #b4b4b4;

$table-accent-bg: rgba(#000000, 0.02);
$table-hover-bg: rgba(#000000, 0.03);

$modal-backdrop-opacity: 0.3;
$btn-font-weight: 600;
$lead-font-weight: normal;

$grid-breakpoints: (
  xs: 0,
  sm: 1px,
  md: 2px,
  lg: 3px,
  xl: 4px,
);

$border-color: $secondary;

// MFA Types for logo styling with no dark theme alternative

$mfaTypes: 0, 2, 3, 4, 6;

// Theme Variables
// Light

$lightDangerHover: #c83522;
$lightInputColor: #465057;
$lightInputPlaceholderColor: #b6b8b8;

// Dark

$darkPrimary: #6a99f0;
$darkPrimary-alt: #b4ccf9;
$darkDanger: #ff8d85;
$darkDangerHover: #ffbfbb;
$darkSuccess: #52e07c;
$darkWarning: #ffeb66;
$darkInfo: #a4b0c6;
$darkLinks: #6a99f0;
$darkGrey1: #bac0ce;
$darkGrey2: #8d94a5;
$darkBlue1: #4c525f;
$darkBlue2: #3c424e;
$darkDarkBlue1: #2f343d;
$darkDarkBlue2: #1f242e;
$darkInputColor: $white;
$darkInputPlaceholderColor: $darkGrey1;

$themes: (
  light: (
    primary: $primary,
    primaryAlt: $primary-accent,
    danger: $danger,
    info: #343a40,
    success: $success,
    warning: $warning,
    backgroundColor: $white,
    badgeDangerBackground: $danger,
    badgeDangerText: $white,
    badgeInfoBackground: #555555,
    badgeInfoText: $white,
    badgePrimaryBackground: $primary,
    badgePrimaryBackgroundHover: #134eb9,
    badgePrimaryText: $white,
    badgeSecondaryBackground: #ced4da,
    badgeSecondaryText: #212529,
    bgLightColor: #f8f9fa,
    bgPrimaryColor: $primary,
    borderColor: $border-color,
    borderPrimaryColor: $primary,
    browserInputIconsFilter: invert(0),
    btnDanger: $danger,
    btnDangerHover: $lightDangerHover,
    btnDangerText: $white,
    btnLinkText: $primary,
    btnLinkTextHover: #104097,
    btnOutlineDangerBackground: $input-bg,
    btnOutlineDangerBackgroundHover: $danger,
    btnOutlineDangerBorder: #ced4da,
    btnOutlineDangerBorderHover: $danger,
    btnOutlineDangerText: $danger,
    btnOutlineDangerTextHover: $white,
    btnOutlinePrimaryBackground: $input-bg,
    btnOutlinePrimaryBackgroundHover: $primary,
    btnOutlinePrimaryBorder: #ced4da,
    btnOutlinePrimaryBorderHover: $primary,
    btnOutlinePrimaryText: $primary,
    btnOutlinePrimaryTextHover: $white,
    btnOutlineSecondaryBackground: $input-bg,
    btnOutlineSecondaryBackgroundHover: #ced4da,
    btnOutlineSecondaryBorder: #ced4da,
    btnOutlineSecondaryBorderHover: #ced4da,
    btnOutlineSecondaryText: #6c757d,
    btnOutlineSecondaryTextHover: #333333,
    btnPrimary: $primary,
    btnPrimaryBorderHover: #1249ae,
    btnPrimaryHover: #134eb9,
    btnPrimaryText: $white,
    btnSecondary: $secondary,
    btnSecondaryBorder: $secondary,
    btnSecondaryBorderHover: #b1bbc4,
    btnSecondaryHover: #b8c1ca,
    btnSecondaryText: #212529,
    btnSecondaryTextHover: #212529,
    calloutBackground: #fafafa,
    calloutColor: #212529,
    cdkDraggingBackground: $white,
    codeColor: #e83e8c,
    dropdownBackground: $white,
    dropdownHover: rgba(0, 0, 0, 0.06),
    dropdownTextColor: $body-color,
    dropdownTextMuted: #6c757d,
    focus: rgb(23 93 220 / 25%),
    footerBackgroundColor: #fbfbfb,
    foregroundColor: $white,
    headerColor: rgba(0, 0, 0, 0.03),
    iconColor: #777777,
    iconHover: $body-color,
    imgFilter: invert(0) grayscale(0),
    inputBackgroundColor: $input-bg,
    inputBorderColor: $border-color,
    inputDisabledBackground: #e0e0e0,
    inputDisabledColor: #6c757d,
    inputPlaceholderColor: $lightInputPlaceholderColor,
    inputTextColor: $lightInputColor,
    layoutFrontendColor: #ecf0f5,
    learnMoreHover: #104097,
    linkColor: $primary,
    linkColorHover: #104097,
    linkWeight: 400,
    listItemActive: $body-color,
    listItemBorder: rgba(0, 0, 0, 0.125),
    loadingSvg: url("../images/loading.svg"),
    logoSuffix: "dark",
    mfaLogoSuffix: ".png",
    navActiveBackground: $white,
    navActiveWeight: 600,
    navBackground: $primary,
    navBackgroundAlt: $secondary-alt,
    navOrgBackgroundColor: #fbfbfb,
    navWeight: 600,
    pwLetter: $body-color,
    pwNumber: #007fde,
    pwSpecial: #c40800,
    pwStrengthBackground: #e9ecef,
    separator: $secondary,
    separatorHr: rgb(0, 0, 0, 0.1),
    tableColorHover: #333333,
    tableLinkColor: $primary,
    tableLinkColorHover: #104097,
    tableRowHover: rgba(0, 0, 0, 0.03),
    tableSeparator: #dee2e6,
    textColor: $body-color,
    textDangerColor: $white,
    textInfoColor: $white,
    textHeadingColor: #333333,
    textMuted: #6c757d,
    textSuccessColor: $white,
    textWarningColor: $white,
  ),
  dark: (
    primary: $darkPrimary,
    primaryAlt: $darkPrimary-alt,
    danger: $darkDanger,
    info: $darkInfo,
    success: $darkSuccess,
    warning: $darkWarning,
    backgroundColor: $darkDarkBlue2,
    badgeDangerBackground: $darkDanger,
    badgeDangerText: $darkDarkBlue2,
    badgeInfoBackground: $darkInfo,
    badgeInfoText: $darkDarkBlue2,
    badgePrimaryBackground: $darkLinks,
    badgePrimaryBackgroundHover: $darkPrimary-alt,
    badgePrimaryText: $darkDarkBlue2,
    badgeSecondaryBackground: $darkGrey2,
    badgeSecondaryText: $darkDarkBlue2,
    bgLightColor: $darkDarkBlue2,
    bgPrimaryColor: $darkPrimary,
    borderColor: $darkBlue1,
    borderPrimaryColor: $darkPrimary,
    browserInputIconsFilter: invert(1),
    btnDanger: $darkDanger,
    btnDangerHover: $darkDangerHover,
    btnDangerText: $darkDarkBlue2,
    btnLinkText: $white,
    btnLinkTextHover: $darkGrey1,
    btnOutlineDangerBackground: $darkDanger,
    btnOutlineDangerBackgroundHover: $darkDangerHover,
    btnOutlineDangerBorder: $darkDanger,
    btnOutlineDangerBorderHover: $darkDangerHover,
    btnOutlineDangerText: $darkDarkBlue2,
    btnOutlineDangerTextHover: $darkDarkBlue2,
    btnOutlinePrimaryBackground: $darkPrimary,
    btnOutlinePrimaryBackgroundHover: $darkPrimary-alt,
    btnOutlinePrimaryBorder: $darkPrimary,
    btnOutlinePrimaryBorderHover: $darkPrimary-alt,
    btnOutlinePrimaryText: $darkDarkBlue2,
    btnOutlinePrimaryTextHover: $darkDarkBlue2,
    btnOutlineSecondaryBackground: transparent,
    btnOutlineSecondaryBackgroundHover: transparent,
    btnOutlineSecondaryBorder: $darkGrey1,
    btnOutlineSecondaryBorderHover: $darkGrey2,
    btnOutlineSecondaryText: $white,
    btnOutlineSecondaryTextHover: $darkGrey2,
    btnPrimary: $darkLinks,
    btnPrimaryBorderHover: $darkPrimary-alt,
    btnPrimaryHover: $darkPrimary-alt,
    btnPrimaryText: $darkDarkBlue2,
    btnSecondary: transparent,
    btnSecondaryBorder: $darkGrey1,
    btnSecondaryBorderHover: $darkGrey2,
    btnSecondaryHover: transparent,
    btnSecondaryText: $white,
    btnSecondaryTextHover: $darkGrey2,
    calloutBackground: $darkBlue2,
    calloutColor: $white,
    cdkDraggingBackground: $darkDarkBlue1,
    codeColor: #e83e8c,
    dropdownBackground: $darkDarkBlue1,
    dropdownHover: rgba(255, 255, 255, 0.03),
    dropdownTextColor: $white,
    dropdownTextMuted: #bec6cf,
    focus: rgb(106 153 240 / 25%),
    footerBackgroundColor: $darkBlue1,
    foregroundColor: $darkDarkBlue1,
    headerColor: $darkBlue1,
    iconColor: #777777,
    iconHover: $darkGrey2,
    imgFilter: invert(1) grayscale(1),
    inputBackgroundColor: transparent,
    inputBorderColor: $darkGrey1,
    inputDisabledBackground: $darkBlue2,
    inputDisabledColor: $darkGrey1,
    inputPlaceholderColor: $darkInputPlaceholderColor,
    inputTextColor: $darkInputColor,
    layoutFrontendColor: $darkDarkBlue2,
    learnMoreHover: $darkPrimary-alt,
    linkColor: $darkLinks,
    linkColorHover: $darkLinks,
    linkWeight: 600,
    listItemActive: $darkPrimary,
    listItemBorder: $darkBlue1,
    loadingSvg: url("../images/loading-white.svg"),
    logoSuffix: "white",
    mfaLogoSuffix: "-w.png",
    navActiveBackground: $darkDarkBlue2,
    navActiveWeight: 600,
    navBackground: $darkDarkBlue1,
    navBackgroundAlt: $darkDarkBlue1,
    navOrgBackgroundColor: #161c26,
    navWeight: 400,
    pwLetter: $white,
    pwNumber: #52bdfb,
    pwSpecial: #ff7c70,
    pwStrengthBackground: $darkBlue2,
    separator: $darkBlue1,
    separatorHr: $darkBlue1,
    tableColorHover: $darkGrey1,
    tableLinkColor: $white,
    tableLinkColorHover: $white,
    tableRowHover: rgba(255, 255, 255, 0.03),
    tableSeparator: $darkBlue1,
    textColor: $darkGrey1,
    textDangerColor: $darkDarkBlue2,
    textHeadingColor: $white,
    textInfoColor: $darkDarkBlue2,
    textMuted: $darkGrey1,
    textSuccessColor: $darkDarkBlue2,
    textWarningColor: $darkDarkBlue2,
  ),
);

@mixin themify($themes: $themes) {
  @each $theme, $map in $themes {
    html.theme_#{$theme} & {
      $theme-map: () !global;
      @each $key, $submap in $map {
        $value: map-get(map-get($themes, $theme), "#{$key}");
        $theme-map: map-merge(
          $theme-map,
          (
            $key: $value,
          )
        ) !global;
      }
      @content;
      $theme-map: null !global;
    }
  }
}

@function themed($key) {
  @return map-get($theme-map, $key);
}