mirror of
https://github.com/bitwarden/browser
synced 2025-12-14 23:33:31 +00:00
[CL-652] Remove bootstrap and enable tailwind preflight (#8071)
Wraps up the tailwind migration by removing bootstrap from the web vault.
This commit is contained in:
Oscar Hinton
GitHub
@@ -50,7 +50,7 @@ export class AvatarComponent implements OnChanges {
|
||||
}
|
||||
|
||||
get classList() {
|
||||
return ["tw-rounded-full"]
|
||||
return ["tw-rounded-full", "tw-inline"]
|
||||
.concat(SizeClasses[this.size()] ?? [])
|
||||
.concat(this.border() ? ["tw-border", "tw-border-solid", "tw-border-secondary-600"] : []);
|
||||
}
|
||||
|
||||
@@ -56,7 +56,7 @@
|
||||
<ng-container *ngTemplateOutlet="prefixContent"></ng-container>
|
||||
</div>
|
||||
<div
|
||||
class="tw-w-full tw-relative tw-py-1 has-[bit-select]:tw-p-0 has-[bit-multi-select]:tw-p-0 has-[input:read-only:not([hidden])]:tw-bg-secondary-100 has-[textarea:read-only:not([hidden])]:tw-bg-secondary-100"
|
||||
class="tw-w-full tw-relative tw-py-1 has-[bit-select]:tw-p-0 has-[bit-multi-select]:tw-p-0 has-[input:read-only:not([hidden])]:tw-bg-secondary-100 has-[textarea:read-only:not([hidden])]:tw-bg-secondary-100 has-[textarea]:tw-my-1"
|
||||
data-default-content
|
||||
[ngClass]="[
|
||||
prefixHasChildren() ? '' : 'tw-rounded-s-lg tw-ps-3',
|
||||
|
||||
@@ -45,6 +45,7 @@ export class BitInputDirective implements BitFormFieldControl {
|
||||
"tw-block",
|
||||
"tw-w-full",
|
||||
"tw-h-full",
|
||||
"tw-px-1",
|
||||
"tw-text-main",
|
||||
"tw-placeholder-text-muted",
|
||||
"tw-bg-background",
|
||||
|
||||
@@ -36,7 +36,13 @@
|
||||
</span>
|
||||
}
|
||||
<div class="tw-leading-snug tw-text-left">
|
||||
<p bitTypography="body1" class="tw-m-0">{{ step.label }}</p>
|
||||
<p
|
||||
bitTypography="body1"
|
||||
class="tw-m-0"
|
||||
[ngClass]="{ 'tw-text-muted': isCurrentStepDisabled }"
|
||||
>
|
||||
{{ step.label }}
|
||||
</p>
|
||||
|
||||
@if (step.subLabel()) {
|
||||
<p bitTypography="body2" class="tw-m-0 tw-mt-1 tw-text-muted">
|
||||
@@ -95,7 +101,13 @@
|
||||
</span>
|
||||
}
|
||||
<div class="tw-leading-snug tw-text-left">
|
||||
<p bitTypography="body1" class="tw-m-0">{{ step.label }}</p>
|
||||
<p
|
||||
bitTypography="body1"
|
||||
class="tw-m-0"
|
||||
[ngClass]="{ 'tw-text-muted': isCurrentStepDisabled }"
|
||||
>
|
||||
{{ step.label }}
|
||||
</p>
|
||||
|
||||
@if (step.subLabel()) {
|
||||
<div bitTypography="body2" class="tw-m-0 tw-mt-1 tw-text-muted">
|
||||
|
||||
@@ -1,10 +1,6 @@
|
||||
/* You can add global styles to this file, and also import other style files */
|
||||
|
||||
@import "./tw-theme.css";
|
||||
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
@import "./tw-theme-preflight.css";
|
||||
|
||||
html {
|
||||
font-size: 16px;
|
||||
|
||||
@@ -1,52 +1,15 @@
|
||||
$icomoon-font-path: "../fonts/";
|
||||
$card-icons-base: "../../src/billing/images/cards/";
|
||||
|
||||
@import "../../angular/src/scss/webfonts.css";
|
||||
@import "./variables";
|
||||
|
||||
@import "../../angular/src/scss/webfonts.css";
|
||||
@import "../../angular/src/scss/bwicons/styles/style.scss";
|
||||
@import "../../angular/src/scss/icons.scss";
|
||||
@import "multi-select/scss/bw.theme.scss";
|
||||
|
||||
@import "@angular/cdk/overlay-prebuilt.css";
|
||||
|
||||
@import "bootstrap/scss/_functions";
|
||||
@import "bootstrap/scss/_variables";
|
||||
@import "bootstrap/scss/_mixins";
|
||||
@import "bootstrap/scss/_root";
|
||||
@import "bootstrap/scss/_reboot";
|
||||
@import "bootstrap/scss/_type";
|
||||
@import "bootstrap/scss/_images";
|
||||
@import "bootstrap/scss/_code";
|
||||
@import "bootstrap/scss/_grid";
|
||||
@import "bootstrap/scss/_tables";
|
||||
@import "bootstrap/scss/_forms";
|
||||
@import "bootstrap/scss/_buttons";
|
||||
@import "bootstrap/scss/_transitions";
|
||||
@import "bootstrap/scss/_dropdown";
|
||||
@import "bootstrap/scss/_button-group";
|
||||
@import "bootstrap/scss/_input-group";
|
||||
@import "bootstrap/scss/_custom-forms";
|
||||
@import "bootstrap/scss/_nav";
|
||||
@import "bootstrap/scss/_navbar";
|
||||
@import "bootstrap/scss/_card";
|
||||
@import "bootstrap/scss/_breadcrumb";
|
||||
@import "bootstrap/scss/_pagination";
|
||||
@import "bootstrap/scss/_badge";
|
||||
@import "bootstrap/scss/_jumbotron";
|
||||
@import "bootstrap/scss/_alert";
|
||||
@import "bootstrap/scss/_progress";
|
||||
@import "bootstrap/scss/_media";
|
||||
@import "bootstrap/scss/_list-group";
|
||||
@import "bootstrap/scss/_close";
|
||||
//@import "bootstrap/scss/_toasts";
|
||||
@import "bootstrap/scss/_modal";
|
||||
@import "bootstrap/scss/_tooltip";
|
||||
@import "bootstrap/scss/_popover";
|
||||
@import "bootstrap/scss/_carousel";
|
||||
@import "bootstrap/scss/_spinners";
|
||||
@import "bootstrap/scss/_utilities";
|
||||
@import "bootstrap/scss/_print";
|
||||
|
||||
@import "multi-select/scss/bw.theme.scss";
|
||||
@import "@angular/cdk/text-field-prebuilt.css";
|
||||
|
||||
// Workaround for https://bitwarden.atlassian.net/browse/CL-110
|
||||
.sbdocs-preview pre.prismjs {
|
||||
|
||||
@@ -106,9 +106,6 @@ export class SortableComponent implements OnInit {
|
||||
get classList() {
|
||||
return [
|
||||
"tw-min-w-max",
|
||||
|
||||
// Offset to border and padding
|
||||
"-tw-m-1.5",
|
||||
"tw-font-bold",
|
||||
|
||||
// Below is copied from BitIconButtonComponent
|
||||
|
||||
68
libs/components/src/tw-theme-preflight.css
Normal file
68
libs/components/src/tw-theme-preflight.css
Normal file
@@ -0,0 +1,68 @@
|
||||
/**
|
||||
* Bitwarden Tailwind configuration to use with preflight enabled
|
||||
*/
|
||||
|
||||
@import "./tw-theme.css";
|
||||
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
body {
|
||||
@apply tw-text-base tw-text-main;
|
||||
}
|
||||
|
||||
h1 {
|
||||
@apply tw-text-3xl tw-font-semibold tw-text-main tw-mb-2;
|
||||
}
|
||||
h2 {
|
||||
@apply tw-text-2xl tw-font-semibold tw-text-main tw-mb-2;
|
||||
}
|
||||
h3 {
|
||||
@apply tw-text-xl tw-font-semibold tw-text-main tw-mb-2;
|
||||
}
|
||||
h4 {
|
||||
@apply tw-text-lg tw-font-semibold tw-text-main tw-mb-2;
|
||||
}
|
||||
h5 {
|
||||
@apply tw-text-base tw-font-bold tw-text-main tw-mb-1.5;
|
||||
}
|
||||
h6 {
|
||||
@apply tw-text-sm tw-font-bold tw-text-main tw-mb-1.5;
|
||||
}
|
||||
|
||||
code {
|
||||
@apply tw-text-code;
|
||||
}
|
||||
|
||||
p {
|
||||
@apply tw-mb-4;
|
||||
}
|
||||
|
||||
ul {
|
||||
@apply tw-mb-4 tw-list-disc tw-ps-10;
|
||||
}
|
||||
|
||||
ul ul,
|
||||
ul ol {
|
||||
@apply tw-mb-0;
|
||||
}
|
||||
|
||||
/* Bootstrap considered this to have higher priority than classes */
|
||||
[hidden]:where(:not([hidden="until-found"])) {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
hr {
|
||||
border-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
html.theme_dark hr {
|
||||
border-color: #4c525f;
|
||||
}
|
||||
|
||||
select {
|
||||
appearance: none;
|
||||
}
|
||||
}
|
||||
@@ -6,6 +6,10 @@
|
||||
@import "./toast/toastr.css";
|
||||
@import "./search/search.component.css";
|
||||
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
:root {
|
||||
--color-transparent-hover: rgb(0 0 0 / 0.02);
|
||||
--color-shadow: 168 179 200;
|
||||
@@ -142,47 +146,49 @@
|
||||
--color-illustration-logo: 255 255 255;
|
||||
}
|
||||
|
||||
/**
|
||||
* tw-break-words does not work with table cells:
|
||||
* https://github.com/tailwindlabs/tailwindcss/issues/835
|
||||
*/
|
||||
td.tw-break-words {
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
@layer components {
|
||||
/**
|
||||
* tw-break-words does not work with table cells:
|
||||
* https://github.com/tailwindlabs/tailwindcss/issues/835
|
||||
*/
|
||||
td.tw-break-words {
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
/**
|
||||
* tw-list-none hides summary arrow in Firefox & Chrome but not Safari:
|
||||
* https://github.com/tailwindlabs/tailwindcss/issues/924#issuecomment-915509785
|
||||
*/
|
||||
summary.tw-list-none::marker,
|
||||
summary.tw-list-none::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
/**
|
||||
* tw-list-none hides summary arrow in Firefox & Chrome but not Safari:
|
||||
* https://github.com/tailwindlabs/tailwindcss/issues/924#issuecomment-915509785
|
||||
*/
|
||||
summary.tw-list-none::marker,
|
||||
summary.tw-list-none::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Arbitrary values can't be used with `text-align`:
|
||||
* https://github.com/tailwindlabs/tailwindcss/issues/802#issuecomment-849013311
|
||||
*/
|
||||
.tw-text-unset {
|
||||
text-align: unset;
|
||||
}
|
||||
/**
|
||||
* Arbitrary values can't be used with `text-align`:
|
||||
* https://github.com/tailwindlabs/tailwindcss/issues/802#issuecomment-849013311
|
||||
*/
|
||||
.tw-text-unset {
|
||||
text-align: unset;
|
||||
}
|
||||
|
||||
/**
|
||||
* Bootstrap uses z-index: 1050 for modals, dialogs and drag-and-drop previews should appear above them.
|
||||
* When bootstrap is removed, test if these styles are still needed and that overlays display properly over other content.
|
||||
* CL-483
|
||||
*/
|
||||
.cdk-drag-preview,
|
||||
.cdk-overlay-container,
|
||||
.cdk-global-overlay-wrapper,
|
||||
.cdk-overlay-connected-position-bounding-box,
|
||||
.cdk-overlay-backdrop,
|
||||
.cdk-overlay-pane {
|
||||
z-index: 2000 !important;
|
||||
}
|
||||
/**
|
||||
* Bootstrap uses z-index: 1050 for modals, dialogs and drag-and-drop previews should appear above them.
|
||||
* When bootstrap is removed, test if these styles are still needed and that overlays display properly over other content.
|
||||
* CL-483
|
||||
*/
|
||||
.cdk-drag-preview,
|
||||
.cdk-overlay-container,
|
||||
.cdk-global-overlay-wrapper,
|
||||
.cdk-overlay-connected-position-bounding-box,
|
||||
.cdk-overlay-backdrop,
|
||||
.cdk-overlay-pane {
|
||||
z-index: 2000 !important;
|
||||
}
|
||||
|
||||
.cdk-global-scrollblock {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
.cdk-global-scrollblock {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,358 +1 @@
|
||||
$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: #1b2029;
|
||||
|
||||
$font-family-sans-serif:
|
||||
Roboto, "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: $body-color,
|
||||
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);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user