pdh-design-system/dist/css/atoms/Button/Button.css

PDH Design System React Components

.btn {
  font-weight: 500;
}

.btn-info {
  color: #984c0c;
}

.btn-info,
.btn-outline-info {
  --bs-btn-hover-color: #984c0c;
  --bs-btn-active-color: #984c0c;
}

.btn-subtle-primary {
  --bs-btn-color: #000;
  --bs-btn-bg: #d3d8e6;
  --bs-btn-border-color: #d3d8e6;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #dadeea;
  --bs-btn-hover-border-color: #d7dce9;
  --bs-btn-focus-shadow-rgb: 179, 184, 196;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #dce0eb;
  --bs-btn-active-border-color: #d7dce9;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #d3d8e6;
  --bs-btn-disabled-border-color: #d3d8e6;
}

.btn-subtle-secondary {
  --bs-btn-color: #000;
  --bs-btn-bg: #f9e5ce;
  --bs-btn-border-color: #f9e5ce;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #fae9d5;
  --bs-btn-hover-border-color: #fae8d3;
  --bs-btn-focus-shadow-rgb: 212, 195, 175;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #faead8;
  --bs-btn-active-border-color: #fae8d3;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #f9e5ce;
  --bs-btn-disabled-border-color: #f9e5ce;
}

.btn-subtle-success {
  --bs-btn-color: #000;
  --bs-btn-bg: #d2f4ea;
  --bs-btn-border-color: #d2f4ea;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #d9f6ed;
  --bs-btn-hover-border-color: #d7f5ec;
  --bs-btn-focus-shadow-rgb: 179, 207, 199;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #dbf6ee;
  --bs-btn-active-border-color: #d7f5ec;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #d2f4ea;
  --bs-btn-disabled-border-color: #d2f4ea;
}

.btn-subtle-info {
  --bs-btn-color: #000;
  --bs-btn-bg: #fff3cd;
  --bs-btn-border-color: #fff3cd;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #fff5d5;
  --bs-btn-hover-border-color: #fff4d2;
  --bs-btn-focus-shadow-rgb: 217, 207, 174;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #fff5d7;
  --bs-btn-active-border-color: #fff4d2;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #fff3cd;
  --bs-btn-disabled-border-color: #fff3cd;
}

.btn-subtle-warning {
  --bs-btn-color: #000;
  --bs-btn-bg: #ffe5d0;
  --bs-btn-border-color: #ffe5d0;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #ffe9d7;
  --bs-btn-hover-border-color: #ffe8d5;
  --bs-btn-focus-shadow-rgb: 217, 195, 177;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #ffead9;
  --bs-btn-active-border-color: #ffe8d5;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #ffe5d0;
  --bs-btn-disabled-border-color: #ffe5d0;
}

.btn-subtle-danger {
  --bs-btn-color: #000;
  --bs-btn-bg: #f8d7da;
  --bs-btn-border-color: #f8d7da;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #f9dde0;
  --bs-btn-hover-border-color: #f9dbde;
  --bs-btn-focus-shadow-rgb: 211, 183, 185;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #f9dfe1;
  --bs-btn-active-border-color: #f9dbde;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #f8d7da;
  --bs-btn-disabled-border-color: #f8d7da;
}

.btn-subtle-light {
  --bs-btn-color: #000;
  --bs-btn-bg: #fcfcfd;
  --bs-btn-border-color: #fcfcfd;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #fcfcfd;
  --bs-btn-hover-border-color: #fcfcfd;
  --bs-btn-focus-shadow-rgb: 214, 214, 215;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #fdfdfd;
  --bs-btn-active-border-color: #fcfcfd;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #fcfcfd;
  --bs-btn-disabled-border-color: #fcfcfd;
}

.btn-subtle-dark {
  --bs-btn-color: #000;
  --bs-btn-bg: #ced4da;
  --bs-btn-border-color: #ced4da;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #d5dae0;
  --bs-btn-hover-border-color: #d3d8de;
  --bs-btn-focus-shadow-rgb: 175, 180, 185;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #d8dde1;
  --bs-btn-active-border-color: #d3d8de;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #ced4da;
  --bs-btn-disabled-border-color: #ced4da;
}

.btn-subtle-purple {
  --bs-btn-color: #000;
  --bs-btn-bg: #e2d9f3;
  --bs-btn-border-color: #e2d9f3;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #e6dff5;
  --bs-btn-hover-border-color: #e5ddf4;
  --bs-btn-focus-shadow-rgb: 192, 184, 207;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #e8e1f5;
  --bs-btn-active-border-color: #e5ddf4;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #e2d9f3;
  --bs-btn-disabled-border-color: #e2d9f3;
}

.btn-subtle-tertiary {
  --bs-btn-color: #000;
  --bs-btn-bg: #ccedf4;
  --bs-btn-border-color: #ccedf4;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #d4f0f6;
  --bs-btn-hover-border-color: #d1eff5;
  --bs-btn-focus-shadow-rgb: 173, 201, 207;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #d6f1f6;
  --bs-btn-active-border-color: #d1eff5;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #ccedf4;
  --bs-btn-disabled-border-color: #ccedf4;
}

.btn-subtle-muted {
  --bs-btn-color: #000;
  --bs-btn-bg: #f8f9fa;
  --bs-btn-border-color: #f8f9fa;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #f9fafb;
  --bs-btn-hover-border-color: #f9fafb;
  --bs-btn-focus-shadow-rgb: 211, 212, 213;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #f9fafb;
  --bs-btn-active-border-color: #f9fafb;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #f8f9fa;
  --bs-btn-disabled-border-color: #f8f9fa;
}