bootstrap-uswds.css

bootstrap-uswds.css

/*!
 * Bootstrap–USWDS Theme 
 */

/* -------------------------------------------------------------------------- */
/* 1) Curated USWDS System Tokens                                             */
/* -------------------------------------------------------------------------- */

:root {
  /* --- Primary Action (Blue) --- */
  --uswds-blue-vivid-60v: #005ea2; /* Primary buttons, links */
  --uswds-blue-warm-70v: #1a4480; /* Hover */
  --uswds-blue-warm-80v: #162e51; /* Active */
  --uswds-blue-vivid-40v: #2491ff; /* Focus outline */
  --uswds-blue-10: #d9e8f6;
  --uswds-blue-cool-5v: #e1f3f8;

  /* --- Secondary / Base Action (Gray) --- */
  --uswds-gray-50: #757575;
  --uswds-gray-60: #5c5c5c;
  --uswds-gray-70: #454545;
  --uswds-gray-10: #e6e6e6;

  /* --- Semantic: Success (Green) --- */
  --uswds-green-cool-vivid-40v: #00a91c;
  --uswds-green-cool-5: #ecf3ec;
  --uswds-green-cool-vivid-60v: #216e1f;
  --uswds-green-cool-vivid-70v: #1d5f1c;
  --uswds-green-cool-30: #86b98e;

  /* --- Semantic: Danger (Red) --- */
  --uswds-red-vivid-60v: #b50909;
  --uswds-red-warm-10: #f4e3db;
  --uswds-red-70v: #8b0a03;
  --uswds-red-warm-50v: #d54309;

  /* --- Semantic: Warning (Gold/Yellow) --- */
  --uswds-gold-vivid-20v: #ffbe2e;
  --uswds-gold-vivid-30v: #e5a000;
  --uswds-gold-vivid-40v: #c38400;
  --uswds-yellow-5: #faf3d1;
  --uswds-gold-vivid-50v: #936f38;

  /* --- Semantic: Info (Cyan) --- */
  --uswds-cyan-vivid-30v: #00bde3;
  --uswds-cyan-vivid-40v: #00a5c4;
  --uswds-cyan-vivid-50v: #0087a0;
  --uswds-cyan-5: #e7f6f8;
  --uswds-cyan-vivid-60v: #00687d;

  /* --- Base & Neutral Tones --- */
  --uswds-gray-90: #1b1b1b;
  --uswds-gray-5: #f0f0f0;
  --uswds-gray-cool-10: #dfe1e2;
  --uswds-gray-cool-60: #565c65;
  --uswds-violet-vivid-70v: #54278f;
  --uswds-white: #ffffff;

  /* --- Fonts --- */
  --uswds-font-sans: "Source Sans Pro Web", "Source Sans Pro", "Source Sans 3", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
  --uswds-font-serif: "Merriweather Web", "Merriweather", Georgia, Cambria, "Times New Roman", Times, serif;
}

/* -------------------------------------------------------------------------- */
/* 2) Light Theme Variable Mapping (Bootstrap)                                */
/* -------------------------------------------------------------------------- */

:root,
[data-bs-theme="light"] {
  /* --- Core Semantic Colors --- */
  --bs-primary: var(--uswds-blue-vivid-60v);
  --bs-secondary: var(--uswds-gray-50);
  --bs-success: var(--uswds-green-cool-vivid-40v);
  --bs-info: var(--uswds-cyan-vivid-30v);
  --bs-warning: var(--uswds-gold-vivid-20v);
  --bs-danger: var(--uswds-red-vivid-60v);
  --bs-light: var(--uswds-gray-5);
  --bs-dark: var(--uswds-gray-90);

  /* --- RGB Triplets --- */
  --bs-primary-rgb: 0, 94, 162;
  --bs-secondary-rgb: 117, 117, 117;
  --bs-success-rgb: 0, 169, 28;
  --bs-info-rgb: 0, 189, 227;
  --bs-warning-rgb: 255, 190, 46;
  --bs-danger-rgb: 181, 9, 9;
  --bs-light-rgb: 240, 240, 240;
  --bs-dark-rgb: 27, 27, 27;
  --bs-white-rgb: 255, 255, 255;
  --bs-black-rgb: 0, 0, 0;

  /* --- Body, Link, & Heading Colors --- */
  --bs-body-color: var(--uswds-gray-90);
  --bs-body-bg: var(--uswds-white);
  --bs-heading-color: var(--uswds-gray-90);
  --bs-link-color: var(--uswds-blue-vivid-60v);
  --bs-link-hover-color: var(--uswds-blue-warm-70v);
  --bs-code-color: var(--uswds-blue-warm-80v);

  /* --- Subtle Backgrounds, Text, and Borders --- */
  --bs-primary-bg-subtle: var(--uswds-blue-10);
  --bs-secondary-bg-subtle: var(--uswds-gray-10);
  --bs-success-bg-subtle: var(--uswds-green-cool-5);
  --bs-info-bg-subtle: var(--uswds-cyan-5);
  --bs-warning-bg-subtle: var(--uswds-yellow-5);
  --bs-danger-bg-subtle: var(--uswds-red-warm-10);
  --bs-primary-text-emphasis: var(--uswds-blue-warm-80v);
  --bs-secondary-text-emphasis: var(--uswds-gray-70);
  --bs-success-text-emphasis: var(--uswds-green-cool-vivid-60v);
  --bs-info-text-emphasis: var(--uswds-cyan-vivid-60v);
  --bs-warning-text-emphasis: var(--uswds-gold-vivid-50v);
  --bs-danger-text-emphasis: var(--uswds-red-70v);
  --bs-primary-border-subtle: #97d4ea;
  --bs-secondary-border-subtle: #c9c9c9;
  --bs-success-border-subtle: var(--uswds-green-cool-30);
  --bs-info-border-subtle: #97d4ea;
  --bs-warning-border-subtle: #f2c75a;
  --bs-danger-border-subtle: #f39268;

  /* --- Borders & Radii --- */
  --bs-border-color: var(--uswds-gray-cool-60);
  --bs-border-radius: 0;
  --bs-border-radius-sm: 0;
  --bs-border-radius-lg: 0;
  --bs-border-radius-xl: 0;
  --bs-border-radius-xxl: 0;
  --bs-border-radius-pill: 50rem;

  /* --- Fonts & Typography --- */
  --bs-font-sans-serif: var(--uswds-font-sans);
  --bs-body-font-family: var(--uswds-font-sans);
  --bs-link-decoration: underline;

  /* --- Shadows & Gradients --- */
  --bs-box-shadow: none;
  --bs-box-shadow-sm: none;
  --bs-box-shadow-lg: none;
  --bs-gradient: none;

  /* --- Focus State --- */
  --bs-focus-ring-width: 0rem;
  --bs-focus-ring-color: transparent;
}

/* -------------------------------------------------------------------------- */
/* 3) Dark Theme Overrides                                                    */
/* -------------------------------------------------------------------------- */

[data-bs-theme="dark"] {
  --bs-primary: #58b4ff;
  --bs-secondary: #a9aeb1;
  --bs-success: #36b74a;
  --bs-info: #00bde3;
  --bs-warning: #ffbe2e;
  --bs-danger: #f2938c;
  --bs-light: #3d4551;
  --bs-dark: #f0f0f0;

  --bs-primary-rgb: 88, 180, 255;
  --bs-secondary-rgb: 169, 174, 177;
  --bs-success-rgb: 54, 183, 74;
  --bs-info-rgb: 0, 189, 227;
  --bs-warning-rgb: 255, 190, 46;
  --bs-danger-rgb: 242, 147, 140;
  --bs-light-rgb: 61, 69, 81;
  --bs-dark-rgb: 240, 240, 240;

  --bs-body-color: #f0f0f0;
  --bs-body-bg: #1b1b1b;
  --bs-heading-color: #f0f0f0;
  --bs-link-color: #58b4ff;
  --bs-link-hover-color: #97d4ea;

  --bs-border-color: var(--uswds-gray-60);
  --bs-tertiary-bg: #3d4551;
  --bs-secondary-bg: #565c65;

  --bs-primary-bg-subtle: #162e51;
  --bs-secondary-bg-subtle: #3d4551;
  --bs-success-bg-subtle: #216e1f;
  --bs-info-bg-subtle: #07648d;
  --bs-warning-bg-subtle: #936f38;
  --bs-danger-bg-subtle: #8b0a03;
  --bs-primary-text-emphasis: #73b3e7;
  --bs-secondary-text-emphasis: #dfe1e2;
  --bs-success-text-emphasis: #70e17b;
  --bs-info-text-emphasis: #97d4ea;
  --bs-warning-text-emphasis: #ffbe2e;
  --bs-danger-text-emphasis: #f2938c;
}

/* -------------------------------------------------------------------------- */
/* 4) Component Variant Overrides (Critical for correct state colors)         */
/* -------------------------------------------------------------------------- */

.btn-primary {
  --bs-btn-bg: var(--uswds-blue-vivid-60v);
  --bs-btn-border-color: var(--uswds-blue-vivid-60v);
  --bs-btn-hover-bg: var(--uswds-blue-warm-70v);
  --bs-btn-hover-border-color: var(--uswds-blue-warm-70v);
  --bs-btn-active-bg: var(--uswds-blue-warm-80v);
  --bs-btn-active-border-color: var(--uswds-blue-warm-80v);
  --bs-btn-disabled-bg: var(--uswds-blue-vivid-60v);
  --bs-btn-disabled-border-color: var(--uswds-blue-vivid-60v);
}
.btn-secondary {
  --bs-btn-color: var(--bs-white);
  --bs-btn-bg: var(--uswds-gray-50);
  --bs-btn-border-color: var(--uswds-gray-50);
  --bs-btn-hover-bg: var(--uswds-gray-60);
  --bs-btn-hover-border-color: var(--uswds-gray-60);
  --bs-btn-active-bg: var(--uswds-gray-70);
  --bs-btn-active-border-color: var(--uswds-gray-70);
  --bs-btn-disabled-bg: var(--uswds-gray-50);
  --bs-btn-disabled-border-color: var(--uswds-gray-50);
  --bs-btn-focus-shadow-rgb: var(--bs-secondary-rgb);
}
.btn-success {
  --bs-btn-bg: var(--uswds-green-cool-vivid-40v);
  --bs-btn-border-color: var(--uswds-green-cool-vivid-40v);
  --bs-btn-hover-bg: var(--uswds-green-cool-vivid-60v);
  --bs-btn-hover-border-color: var(--uswds-green-cool-vivid-60v);
  --bs-btn-active-bg: var(--uswds-green-cool-vivid-70v);
  --bs-btn-active-border-color: var(--uswds-green-cool-vivid-70v);
  --bs-btn-disabled-bg: var(--uswds-green-cool-vivid-40v);
  --bs-btn-disabled-border-color: var(--uswds-green-cool-vivid-40v);
  --bs-btn-focus-shadow-rgb: var(--bs-success-rgb);
}
.btn-info {
  --bs-btn-color: var(--bs-dark);
  --bs-btn-bg: var(--uswds-cyan-vivid-30v);
  --bs-btn-border-color: var(--uswds-cyan-vivid-30v);
  --bs-btn-hover-bg: var(--uswds-cyan-vivid-40v);
  --bs-btn-hover-border-color: var(--uswds-cyan-vivid-40v);
  --bs-btn-active-bg: var(--uswds-cyan-vivid-50v);
  --bs-btn-active-border-color: var(--uswds-cyan-vivid-50v);
  --bs-btn-disabled-bg: var(--uswds-cyan-vivid-30v);
  --bs-btn-disabled-border-color: var(--uswds-cyan-vivid-30v);
  --bs-btn-focus-shadow-rgb: var(--bs-info-rgb);
}
.btn-warning {
  --bs-btn-color: var(--bs-dark);
  --bs-btn-bg: var(--uswds-gold-vivid-20v);
  --bs-btn-border-color: var(--uswds-gold-vivid-20v);
  --bs-btn-hover-bg: var(--uswds-gold-vivid-30v);
  --bs-btn-hover-border-color: var(--uswds-gold-vivid-30v);
  --bs-btn-active-bg: var(--uswds-gold-vivid-40v);
  --bs-btn-active-border-color: var(--uswds-gold-vivid-40v);
  --bs-btn-disabled-bg: var(--uswds-gold-vivid-20v);
  --bs-btn-disabled-border-color: var(--uswds-gold-vivid-20v);
  --bs-btn-focus-shadow-rgb: var(--bs-warning-rgb);
}
.btn-danger {
  --bs-btn-color: var(--bs-white);
  --bs-btn-bg: var(--uswds-red-vivid-60v);
  --bs-btn-border-color: var(--uswds-red-vivid-60v);
  --bs-btn-hover-bg: var(--uswds-red-warm-50v);
  --bs-btn-hover-border-color: var(--uswds-red-warm-50v);
  --bs-btn-active-bg: var(--uswds-red-70v);
  --bs-btn-active-border-color: var(--uswds-red-70v);
  --bs-btn-disabled-bg: var(--uswds-red-vivid-60v);
  --bs-btn-disabled-border-color: var(--uswds-red-vivid-60v);
  --bs-btn-focus-shadow-rgb: var(--bs-danger-rgb);
}

.table-primary {
  --bs-table-bg: var(--uswds-blue-10);
  --bs-table-color: var(--bs-primary-text-emphasis);
}
.table-secondary {
  --bs-table-bg: var(--uswds-gray-10);
  --bs-table-color: var(--bs-secondary-text-emphasis);
}
.table-success {
  --bs-table-bg: var(--uswds-green-cool-5);
  --bs-table-color: var(--bs-success-text-emphasis);
}
.table-info {
  --bs-table-bg: var(--uswds-cyan-5);
  --bs-table-color: var(--bs-info-text-emphasis);
}
.table-warning {
  --bs-table-bg: var(--uswds-yellow-5);
  --bs-table-color: var(--bs-warning-text-emphasis);
}
.table-danger {
  --bs-table-bg: var(--uswds-red-warm-10);
  --bs-table-color: var(--bs-danger-text-emphasis);
}

/* -------------------------------------------------------------------------- */
/* 5) Global & Component Theming                                              */
/* -------------------------------------------------------------------------- */

/* Global USWDS Focus Behavior */
:where(
    a,
    button,
    .btn,
    .nav-link,
    .page-link,
    .form-control,
    .form-select,
    .form-check-input,
    .dropdown-item,
    .list-group-item,
    [role="button"],
    [tabindex]
  ):focus,
:where(
    a,
    button,
    .btn,
    .nav-link,
    .page-link,
    .form-control,
    .form-select,
    .form-check-input,
    .dropdown-item,
    .list-group-item,
    [role="button"],
    [tabindex]
  ):focus-visible,
:where(
    a,
    button,
    .btn,
    .nav-link,
    .page-link,
    .form-control,
    .form-select,
    .form-check-input,
    .dropdown-item,
    .list-group-item,
    [role="button"],
    [tabindex]
  ):focus:not(:focus-visible) {
  outline: 0.25rem solid var(--uswds-blue-vivid-40v) !important;
  outline-offset: 0;
  box-shadow: none !important;
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
.h1,
.h2,
.h3,
.h4,
.h5,
.lead {
  font-family: var(--uswds-font-serif);
}

/* Links */
a:visited {
  color: var(--uswds-violet-vivid-70v);
}
[data-bs-theme="dark"] a:visited {
  color: #bbaafa;
}
.navbar-dark a:visited,
.bg-dark a:visited,
.text-bg-dark a:visited,
.bg-primary a:visited,
.text-bg-primary a:visited {
  color: inherit;
}

/* Buttons */
.btn {
  --bs-btn-border-radius: 0.25rem;
  --bs-btn-font-weight: 700;
}
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-info,
.btn-outline-warning,
.btn-outline-danger {
  border-width: 2px;
}
.btn-link {
  font-weight: 400;
  text-decoration: underline;
}
.btn:focus,
.btn:focus-visible {
  outline-offset: 0.25rem;
}

/* Forms */
.form-control,
.form-select,
.input-group-text {
  border-radius: 0;
}
.form-control::placeholder {
  color: var(--uswds-gray-50);
  opacity: 0.9;
}
.form-control:focus,
.form-select:focus {
  border-color: var(--bs-primary);
}
.form-select {
  background-size: 1.4rem;
  background-position: right 0.5rem center;
  --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath fill='%231b1b1b' d='M12 5.83 15.17 9l1.41-1.41L12 3 7.41 7.59 8.83 9 12 5.83zm0 12.34L8.83 15l-1.41 1.41L12 21l4.59-4.59L15.17 15 12 18.17z'/%3e%3c/svg%3e");
}
[data-bs-theme="dark"] .form-select {
  --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath fill='%23f0f0f0' d='M12 5.83 15.17 9l1.41-1.41L12 3 7.41 7.59 8.83 9 12 5.83zm0 12.34L8.83 15l-1.41 1.41L12 21l4.59-4.59L15.17 15 12 18.17z'/%3e%3c/svg%3e");
}
.form-label {
  font-weight: 700;
}
.form-check-input {
  --bs-form-check-border-radius: 0;
  border-width: 2px;
  border-color: var(--bs-body-color);
}
.form-check-input:focus {
  outline-offset: 0.25rem;
}
.form-check-input:checked {
  border-color: var(--bs-primary);
  background-color: var(--bs-primary);
}
.form-check-input[type="checkbox"]:checked {
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 65 50'%3e%3cpath fill='%23fff' fill-rule='evenodd' d='M63.268 7.063l-5.616-5.61C56.882.685 55.946.3 54.845.3s-2.038.385-2.808 1.155L24.951 28.552 12.81 16.385c-.77-.77-1.707-1.155-2.808-1.155-1.1 0-2.037.385-2.807 1.154l-5.616 5.61C.81 22.764.425 23.7.425 24.8s.385 2.035 1.155 2.805l14.947 14.93 5.616 5.61c.77.77 1.706 1.154 2.807 1.154s2.038-.384 2.808-1.154l5.616-5.61 29.894-29.86c.77-.77 1.157-1.707 1.157-2.805 0-1.101-.385-2.036-1.156-2.805l-.001-.002z'/%3e%3c/svg%3e");
  background-size: 65% 50%;
}
.form-check-input[type="radio"] {
  --bs-form-check-border-radius: 50%;
}
.form-check-input[type="radio"]:checked {
  --bs-form-check-bg-image: none;
  box-shadow: inset 0 0 0 3px var(--bs-body-bg);
}
.was-validated .form-control:invalid,
.form-control.is-invalid {
  border-width: 2px;
  border-color: var(--bs-danger);
}
.was-validated .form-control:valid,
.form-control.is-valid {
  border-width: 2px;
  border-color: var(--bs-success);
}
.was-validated .form-select:invalid,
.form-select.is-invalid {
  border-width: 2px;
  border-color: var(--bs-danger);
}
.was-validated .form-select:valid,
.form-select.is-valid {
  border-width: 2px;
  border-color: var(--bs-success);
}

/* Alerts */
.alert {
  border-left-width: 0.5rem;
  border-left-style: solid;
  --bs-alert-border-radius: 0.25rem;
}
.alert-danger {
  border-left-color: var(--uswds-red-warm-50v);
}
.alert-info {
  border-left-color: var(--bs-info);
}
.alert-success {
  border-left-color: var(--bs-success);
}
.alert-warning {
  border-left-color: var(--bs-warning);
}
.alert-primary {
  border-left-color: var(--bs-primary);
}

/* Other Components */
.card-header {
  background-color: var(--uswds-gray-cool-10);
  color: var(--bs-body-color);
}
.list-group-item-action:hover {
  background-color: var(--uswds-blue-cool-5v);
}
.list-group-item.active {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}
.badge {
  --bs-badge-border-radius: 2px;
  --bs-badge-font-weight: 700;
  text-transform: uppercase;
}
.bg-secondary.badge {
  background-color: var(--uswds-gray-cool-60) !important;
}
.accordion {
  --bs-accordion-btn-bg: var(--uswds-gray-5);
  --bs-accordion-active-bg: var(--uswds-gray-cool-10);
  --bs-accordion-active-color: var(--bs-body-color);
  --bs-accordion-btn-focus-box-shadow: none;
}
.modal-content,
.offcanvas {
  border-radius: 0;
}
.popover {
  --bs-popover-border-radius: 0;
  --bs-popover-header-bg: var(--uswds-gray-cool-10);
}
.tooltip {
  --bs-tooltip-border-radius: 0;
  --bs-tooltip-bg: var(--uswds-gray-90);
}