1
0
mirror of https://github.com/bitwarden/browser.git synced 2024-12-03 13:33:32 +01:00
bitwarden-browser/src/scss/variables.scss

147 lines
5.0 KiB
SCSS
Raw Normal View History

2018-01-26 20:12:41 +01:00
$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-small: 12px;
$text-color: #000000;
$border-color: #f0f0f0;
$border-color-dark: #ddd;
$list-item-hover: #fbfbfb;
$list-icon-color: #c7c7cd;
$border-radius: 3px;
2018-01-31 22:51:59 +01:00
$line-height-base: 1.42857143;
2018-01-26 20:12:41 +01:00
$gray: #555;
$gray-light: #777;
$text-muted: $gray-light;
$brand-primary: #3c8dbc;
$brand-danger: #dd4b39;
$brand-success: #00a65a;
$brand-info: #555555;
$brand-warning: #bf7e16;
2018-01-26 20:12:41 +01:00
$brand-primary-accent: #286090;
$background-color: white;
$background-color-alt: #f9fafc;
$background-color-alt2: #ecf0f5;
$box-background-color: $background-color;
2018-01-30 20:42:16 +01:00
$box-background-hover-color: $list-item-hover;
2018-01-26 20:12:41 +01:00
$box-border-color: $border-color;
$button-border-color: darken($border-color-dark, 12%);
2018-05-30 21:21:41 +02:00
$button-background-color: white;
2018-01-26 20:12:41 +01:00
$button-color: lighten($text-color, 40%);
$button-color-primary: darken($brand-primary, 8%);
$button-color-danger: darken($brand-danger, 10%);
2018-05-30 15:28:19 +02:00
$themes: (
light: (
textColor: $text-color,
borderColor: $border-color,
borderColorDark: $border-color-dark,
backgroundColor: $background-color,
backgroundColorAlt: $background-color-alt,
backgroundColorAlt2: $background-color-alt2,
2018-05-30 21:21:41 +02:00
headerBackgroundColor: $brand-primary,
2018-05-30 21:44:16 +02:00
headerBorderColor: darken($brand-primary, 7%),
2018-05-30 21:21:41 +02:00
headerInputBackgroundColor: darken($brand-primary, 8%),
headerInputBackgroundFocusColor: darken($brand-primary, 10%),
headerInputColor: #ffffff,
headerInputPlaceholderColor: lighten($brand-primary, 35%),
listItemBackgroundColor: $background-color,
listItemBackgroundHoverColor: $list-item-hover,
2018-05-30 15:28:19 +02:00
boxBackgroundColor: $box-background-color,
boxBackgroundHoverColor: $box-background-hover-color,
boxBorderColor: $box-border-color,
2018-05-30 21:21:41 +02:00
groupingsActiveColor: darken($background-color-alt, 5%),
disabledIconColor: $list-icon-color,
headingColor: $gray-light,
headingButtonColor: lighten($gray-light, 30%),
headingButtonHoverColor: $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,
2018-05-31 04:28:04 +02:00
logoSuffix: 'dark',
2018-05-30 15:28:19 +02:00
),
dark: (
textColor: #ffffff,
2018-05-30 21:21:41 +02:00
borderColor: #2f2f2f,
borderColorDark: #2f2f2f,
backgroundColor: #363636,
backgroundColorAlt: #3d3d3d,
backgroundColorAlt2: #222222,
boxBackgroundColor: #363636,
boxBackgroundHoverColor: #3f3f3f,
boxBorderColor: #2f2f2f,
headerBackgroundColor: #363636,
2018-05-30 21:44:16 +02:00
headerBorderColor: #272727,
2018-05-30 21:21:41 +02:00
headerInputBackgroundColor: #222222,
headerInputBackgroundFocusColor: #1d1d1d,
headerInputColor: #ffffff,
headerInputPlaceholderColor: #707070,
listItemBackgroundColor: #363636,
2018-05-31 04:28:04 +02:00
listItemBackgroundHoverColor: #3c3c3c,
2018-05-30 21:21:41 +02:00
groupingsActiveColor: #292929,
disabledIconColor: #c7c7cd,
headingColor: #a3a3a3,
headingButtonColor: #a3a3a3,
headingButtonHoverColor: #ffffff,
labelColor: #a3a3a3,
mutedColor: #a3a3a3,
totpStrokeColor: #cacaca,
boxRowButtonColor: #cacaca,
boxRowButtonHoverColor: #ffffff,
inputBorderColor: #222222,
inputBackgroundColor: #363636,
inputPlaceholderColor: #707070,
buttonBackgroundColor: #363636,
buttonBorderColor: #1f1f1f,
2018-05-31 04:28:04 +02:00
buttonColor: #e0e0e0,
2018-05-30 21:44:16 +02:00
buttonPrimaryColor: #46ace7,
2018-05-30 21:21:41 +02:00
buttonDangerColor: #ff3e24,
primaryColor: #52bdfb,
primaryAccentColor: #3ea1da,
dangerColor: #ff3e24,
successColor: $brand-success,
infoColor: $brand-info,
warningColor: $brand-warning,
2018-05-31 04:28:04 +02:00
logoSuffix: 'white',
2018-05-30 15:28:19 +02:00
),
);
@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);
}