mirror of
https://github.com/bitwarden/browser
synced 2025-12-16 08:13:42 +00:00
bf7aa6473e
* change code color to meet accessibility requirements * updates to desktop and web * adjust colors for desktop, web, and browser * update color values * switch nord color to use same as Tailwind theme * align variable names
340 lines
12 KiB
SCSS
340 lines
12 KiB
SCSS
@import "~nord/src/sass/nord.scss";
|
|
|
|
$dark-icon-themes: "theme_dark", "theme_solarizedDark", "theme_nord";
|
|
|
|
$font-family-sans-serif: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
|
|
$font-size-base: 14px;
|
|
$font-size-large: 18px;
|
|
$font-size-xlarge: 22px;
|
|
$font-size-xxlarge: 28px;
|
|
$font-size-small: 12px;
|
|
$text-color: #000000;
|
|
$border-color: #f0f0f0;
|
|
$border-color-dark: #ddd;
|
|
$list-item-hover: #fbfbfb;
|
|
$list-icon-color: #767679;
|
|
$disabled-box-opacity: 1;
|
|
$border-radius: 6px;
|
|
$line-height-base: 1.42857143;
|
|
$icon-hover-color: lighten($text-color, 50%);
|
|
|
|
$gray: #555;
|
|
$gray-light: #777;
|
|
$text-muted: $gray-light;
|
|
|
|
$brand-primary: #175ddc;
|
|
$brand-danger: #c83522;
|
|
$brand-success: #017e45;
|
|
$brand-info: #555555;
|
|
$brand-warning: #8b6609;
|
|
$brand-primary-accent: #1252a3;
|
|
|
|
$background-color: #f0f0f0;
|
|
|
|
$box-background-color: white;
|
|
$box-background-hover-color: $list-item-hover;
|
|
$box-border-color: $border-color;
|
|
$border-color-alt: #c3c5c7;
|
|
|
|
$button-border-color: darken($border-color-dark, 12%);
|
|
$button-background-color: white;
|
|
$button-color: lighten($text-color, 40%);
|
|
$button-color-primary: darken($brand-primary, 8%);
|
|
$button-color-danger: darken($brand-danger, 10%);
|
|
|
|
$code-color: #c01176;
|
|
$code-color-dark: #f08dc7;
|
|
$code-color-nord: #dbb1d5;
|
|
|
|
$solarizedDarkBase03: #002b36;
|
|
$solarizedDarkBase02: #073642;
|
|
$solarizedDarkBase01: #586e75;
|
|
$solarizedDarkBase00: #657b83;
|
|
$solarizedDarkBase0: #839496;
|
|
$solarizedDarkBase1: #93a1a1;
|
|
$solarizedDarkBase2: #eee8d5;
|
|
$solarizedDarkBase3: #fdf6e3;
|
|
$solarizedDarkYellow: #b58900;
|
|
$solarizedDarkOrange: #cb4b16;
|
|
$solarizedDarkRed: #dc322f;
|
|
$solarizedDarkMagenta: #d33682;
|
|
$solarizedDarkViolet: #6c71c4;
|
|
$solarizedDarkBlue: #268bd2;
|
|
$solarizedDarkCyan: #2aa198;
|
|
$solarizedDarkGreen: #859900;
|
|
|
|
$themes: (
|
|
light: (
|
|
textColor: $text-color,
|
|
hoverColorTransparent: rgba($text-color, 0.15),
|
|
borderColor: $border-color-dark,
|
|
backgroundColor: $background-color,
|
|
borderColorAlt: $border-color-alt,
|
|
backgroundColorAlt: #ffffff,
|
|
scrollbarColor: rgba(100, 100, 100, 0.2),
|
|
scrollbarHoverColor: rgba(100, 100, 100, 0.4),
|
|
boxBackgroundColor: $box-background-color,
|
|
boxBackgroundHoverColor: $box-background-hover-color,
|
|
boxBorderColor: $box-border-color,
|
|
tabBackgroundColor: #ffffff,
|
|
tabBackgroundHoverColor: $list-item-hover,
|
|
headerColor: #ffffff,
|
|
headerBackgroundColor: $brand-primary,
|
|
headerBackgroundHoverColor: rgba(255, 255, 255, 0.1),
|
|
headerBorderColor: $brand-primary,
|
|
headerInputBackgroundColor: darken($brand-primary, 8%),
|
|
headerInputBackgroundFocusColor: darken($brand-primary, 10%),
|
|
headerInputColor: #ffffff,
|
|
headerInputPlaceholderColor: lighten($brand-primary, 35%),
|
|
listItemBackgroundHoverColor: $list-item-hover,
|
|
disabledIconColor: $list-icon-color,
|
|
disabledBoxOpacity: $disabled-box-opacity,
|
|
headingColor: $gray-light,
|
|
labelColor: $gray-light,
|
|
mutedColor: $text-muted,
|
|
totpStrokeColor: $brand-primary,
|
|
boxRowButtonColor: $brand-primary,
|
|
boxRowButtonHoverColor: darken($brand-primary, 10%),
|
|
inputBorderColor: darken($border-color-dark, 7%),
|
|
inputBackgroundColor: #ffffff,
|
|
inputPlaceholderColor: lighten($gray-light, 35%),
|
|
buttonBackgroundColor: $button-background-color,
|
|
buttonBorderColor: $button-border-color,
|
|
buttonColor: $button-color,
|
|
buttonPrimaryColor: $button-color-primary,
|
|
buttonDangerColor: $button-color-danger,
|
|
primaryColor: $brand-primary,
|
|
primaryAccentColor: $brand-primary-accent,
|
|
dangerColor: $brand-danger,
|
|
successColor: $brand-success,
|
|
infoColor: $brand-info,
|
|
warningColor: $brand-warning,
|
|
logoSuffix: "dark",
|
|
passwordNumberColor: #007fde,
|
|
passwordSpecialColor: #c40800,
|
|
passwordCountText: #212529,
|
|
calloutBorderColor: $border-color-dark,
|
|
calloutBackgroundColor: $box-background-color,
|
|
toastTextColor: #ffffff,
|
|
svgSuffix: "-light.svg",
|
|
transparentColor: rgba(0, 0, 0, 0),
|
|
dateInputColorScheme: light,
|
|
// https://stackoverflow.com/a/53336754
|
|
webkitCalendarPickerFilter: invert(46%) sepia(69%) saturate(6397%) hue-rotate(211deg)
|
|
brightness(85%) contrast(103%),
|
|
// light has no hover so use same color
|
|
webkitCalendarPickerHoverFilter: invert(46%) sepia(69%) saturate(6397%) hue-rotate(211deg)
|
|
brightness(85%) contrast(103%),
|
|
codeColor: $code-color,
|
|
),
|
|
dark: (
|
|
textColor: #ffffff,
|
|
hoverColorTransparent: rgba($text-color, 0.15),
|
|
borderColor: #161c26,
|
|
backgroundColor: #161c26,
|
|
borderColorAlt: #6e788a,
|
|
backgroundColorAlt: #2f343d,
|
|
scrollbarColor: #6e788a,
|
|
scrollbarHoverColor: #8d94a5,
|
|
boxBackgroundColor: #2f343d,
|
|
boxBackgroundHoverColor: #3c424e,
|
|
boxBorderColor: #4c525f,
|
|
tabBackgroundColor: #2f343d,
|
|
tabBackgroundHoverColor: #3c424e,
|
|
headerColor: #ffffff,
|
|
headerBackgroundColor: #2f343d,
|
|
headerBackgroundHoverColor: #3c424e,
|
|
headerBorderColor: #161c26,
|
|
headerInputBackgroundColor: #3c424e,
|
|
headerInputBackgroundFocusColor: #4c525f,
|
|
headerInputColor: #ffffff,
|
|
headerInputPlaceholderColor: #bac0ce,
|
|
listItemBackgroundHoverColor: #3c424e,
|
|
disabledIconColor: #bac0ce,
|
|
disabledBoxOpacity: 0.5,
|
|
headingColor: #bac0ce,
|
|
labelColor: #bac0ce,
|
|
mutedColor: #bac0ce,
|
|
totpStrokeColor: #4c525f,
|
|
boxRowButtonColor: #bac0ce,
|
|
boxRowButtonHoverColor: #ffffff,
|
|
inputBorderColor: #4c525f,
|
|
inputBackgroundColor: #2f343d,
|
|
inputPlaceholderColor: #bac0ce,
|
|
buttonBackgroundColor: #3c424e,
|
|
buttonBorderColor: #4c525f,
|
|
buttonColor: #bac0ce,
|
|
buttonPrimaryColor: #6f9df1,
|
|
buttonDangerColor: #ff8d85,
|
|
primaryColor: #6f9df1,
|
|
primaryAccentColor: #6f9df1,
|
|
dangerColor: #ff8d85,
|
|
successColor: #52e07c,
|
|
infoColor: #a4b0c6,
|
|
warningColor: #ffeb66,
|
|
logoSuffix: "white",
|
|
passwordNumberColor: #6f9df1,
|
|
passwordSpecialColor: #ff8d85,
|
|
passwordCountText: #ffffff,
|
|
calloutBorderColor: #4c525f,
|
|
calloutBackgroundColor: #3c424e,
|
|
toastTextColor: #1f242e,
|
|
svgSuffix: "-dark.svg",
|
|
transparentColor: rgba(0, 0, 0, 0),
|
|
dateInputColorScheme: dark,
|
|
// https://stackoverflow.com/a/53336754 - must prepend brightness(0) saturate(100%) to dark themed date inputs
|
|
webkitCalendarPickerFilter: brightness(0) saturate(100%) invert(86%) sepia(19%) saturate(152%)
|
|
hue-rotate(184deg) brightness(87%) contrast(93%),
|
|
webkitCalendarPickerHoverFilter: brightness(0) saturate(100%) invert(100%) sepia(0%)
|
|
saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%),
|
|
codeColor: $code-color-dark,
|
|
),
|
|
nord: (
|
|
textColor: $nord5,
|
|
hoverColorTransparent: rgba($text-color, 0.15),
|
|
borderColor: $nord0,
|
|
backgroundColor: $nord1,
|
|
borderColorAlt: $nord5,
|
|
backgroundColorAlt: $nord2,
|
|
scrollbarColor: $nord4,
|
|
scrollbarHoverColor: $nord6,
|
|
boxBackgroundColor: $nord2,
|
|
boxBackgroundHoverColor: $nord3,
|
|
boxBorderColor: $nord1,
|
|
tabBackgroundColor: $nord1,
|
|
tabBackgroundHoverColor: $nord2,
|
|
headerColor: $nord5,
|
|
headerBackgroundColor: $nord1,
|
|
headerBackgroundHoverColor: $nord2,
|
|
headerBorderColor: $nord0,
|
|
headerInputBackgroundColor: $nord6,
|
|
headerInputBackgroundFocusColor: $nord5,
|
|
headerInputColor: $nord2,
|
|
headerInputPlaceholderColor: $nord3,
|
|
listItemBackgroundHoverColor: $nord3,
|
|
disabledIconColor: $nord4,
|
|
disabledBoxOpacity: 0.5,
|
|
headingColor: $nord4,
|
|
labelColor: $nord4,
|
|
mutedColor: $nord4,
|
|
totpStrokeColor: $nord4,
|
|
boxRowButtonColor: $nord4,
|
|
boxRowButtonHoverColor: $nord6,
|
|
inputBorderColor: $nord0,
|
|
inputBackgroundColor: $nord2,
|
|
inputPlaceholderColor: lighten($nord3, 20%),
|
|
buttonBackgroundColor: $nord3,
|
|
buttonBorderColor: $nord0,
|
|
buttonColor: $nord5,
|
|
buttonPrimaryColor: $nord8,
|
|
buttonDangerColor: $nord11,
|
|
primaryColor: $nord9,
|
|
primaryAccentColor: $nord8,
|
|
dangerColor: $nord11,
|
|
successColor: $nord14,
|
|
infoColor: $nord9,
|
|
warningColor: $nord12,
|
|
logoSuffix: "white",
|
|
passwordNumberColor: $nord8,
|
|
passwordSpecialColor: $nord12,
|
|
passwordCountText: $nord5,
|
|
calloutBorderColor: $nord0,
|
|
calloutBackgroundColor: $nord2,
|
|
toastTextColor: #000000,
|
|
svgSuffix: "-dark.svg",
|
|
transparentColor: rgba(0, 0, 0, 0),
|
|
dateInputColorScheme: dark,
|
|
webkitCalendarPickerFilter: brightness(0) saturate(100%) invert(94%) sepia(5%) saturate(454%)
|
|
hue-rotate(185deg) brightness(93%) contrast(96%),
|
|
// has no hover so use same color
|
|
webkitCalendarPickerHoverFilter: brightness(0) saturate(100%) invert(94%) sepia(5%)
|
|
saturate(454%) hue-rotate(185deg) brightness(93%) contrast(96%),
|
|
codeColor: $code-color-nord,
|
|
),
|
|
solarizedDark: (
|
|
textColor: $solarizedDarkBase2,
|
|
hoverColorTransparent: rgba($text-color, 0.15),
|
|
borderColor: $solarizedDarkBase03,
|
|
backgroundColor: $solarizedDarkBase03,
|
|
borderColorAlt: $solarizedDarkBase01,
|
|
backgroundColorAlt: $solarizedDarkBase02,
|
|
scrollbarColor: $solarizedDarkBase0,
|
|
scrollbarHoverColor: $solarizedDarkBase2,
|
|
boxBackgroundColor: $solarizedDarkBase02,
|
|
boxBackgroundHoverColor: lighten($solarizedDarkBase02, 5%),
|
|
boxBorderColor: $solarizedDarkBase02,
|
|
tabBackgroundColor: $solarizedDarkBase02,
|
|
tabBackgroundHoverColor: $solarizedDarkBase01,
|
|
headerColor: $solarizedDarkBase1,
|
|
headerBackgroundColor: $solarizedDarkBase02,
|
|
headerBackgroundHoverColor: $solarizedDarkBase01,
|
|
headerBorderColor: $solarizedDarkBase03,
|
|
headerInputBackgroundColor: darken($solarizedDarkBase0, 5%),
|
|
headerInputBackgroundFocusColor: $solarizedDarkBase1,
|
|
headerInputColor: $solarizedDarkBase02,
|
|
headerInputPlaceholderColor: lighten($solarizedDarkBase02, 5%),
|
|
listItemBackgroundHoverColor: lighten($solarizedDarkBase02, 5%),
|
|
disabledIconColor: $solarizedDarkBase0,
|
|
disabledBoxOpacity: 0.5,
|
|
headingColor: $solarizedDarkBase0,
|
|
labelColor: $solarizedDarkBase0,
|
|
mutedColor: $solarizedDarkBase0,
|
|
totpStrokeColor: $solarizedDarkBase0,
|
|
boxRowButtonColor: $solarizedDarkBase0,
|
|
boxRowButtonHoverColor: $solarizedDarkBase2,
|
|
inputBorderColor: $solarizedDarkBase03,
|
|
inputBackgroundColor: $solarizedDarkBase01,
|
|
inputPlaceholderColor: lighten($solarizedDarkBase00, 20%),
|
|
buttonBackgroundColor: $solarizedDarkBase00,
|
|
buttonBorderColor: $solarizedDarkBase03,
|
|
buttonColor: $solarizedDarkBase1,
|
|
buttonPrimaryColor: $solarizedDarkCyan,
|
|
buttonDangerColor: $solarizedDarkRed,
|
|
primaryColor: $solarizedDarkGreen,
|
|
primaryAccentColor: $solarizedDarkCyan,
|
|
dangerColor: $solarizedDarkRed,
|
|
successColor: $solarizedDarkGreen,
|
|
infoColor: $solarizedDarkGreen,
|
|
warningColor: $solarizedDarkYellow,
|
|
logoSuffix: "white",
|
|
passwordNumberColor: $solarizedDarkCyan,
|
|
passwordSpecialColor: $solarizedDarkYellow,
|
|
passwordCountText: $solarizedDarkBase2,
|
|
calloutBorderColor: $solarizedDarkBase03,
|
|
calloutBackgroundColor: $solarizedDarkBase01,
|
|
toastTextColor: #000000,
|
|
svgSuffix: "-solarized.svg",
|
|
transparentColor: rgba(0, 0, 0, 0),
|
|
dateInputColorScheme: dark,
|
|
webkitCalendarPickerFilter: brightness(0) saturate(100%) invert(61%) sepia(13%) saturate(289%)
|
|
hue-rotate(138deg) brightness(92%) contrast(90%),
|
|
webkitCalendarPickerHoverFilter: brightness(0) saturate(100%) invert(94%) sepia(10%)
|
|
saturate(462%) hue-rotate(345deg) brightness(103%) contrast(87%),
|
|
codeColor: $code-color-dark,
|
|
),
|
|
);
|
|
|
|
@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);
|
|
}
|