From 6e0087457dc91cca424f02dc3f543777addf1904 Mon Sep 17 00:00:00 2001 From: Kyle Sferrazza Date: Fri, 12 Feb 2021 15:00:57 -0500 Subject: [PATCH 1/4] Add support for the Solarized Dark color scheme --- solarized.scss | 16 ++++++++ src/popup/scss/variables.scss | 50 +++++++++++++++++++++++++ src/popup/settings/options.component.ts | 1 + 3 files changed, 67 insertions(+) create mode 100644 solarized.scss diff --git a/solarized.scss b/solarized.scss new file mode 100644 index 0000000000..5365ddbce0 --- /dev/null +++ b/solarized.scss @@ -0,0 +1,16 @@ +$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; diff --git a/src/popup/scss/variables.scss b/src/popup/scss/variables.scss index 8ec057f6e9..303f7bc384 100644 --- a/src/popup/scss/variables.scss +++ b/src/popup/scss/variables.scss @@ -1,4 +1,5 @@ @import '~nord/src/sass/nord.scss'; +@import './solarized.scss'; $font-family-sans-serif: 'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif; $font-family-monospace: Menlo, Monaco, Consolas, 'Courier New', monospace; @@ -185,6 +186,55 @@ $themes: ( calloutBorderColor: $nord0, calloutBackgroundColor: $nord2, ), + solarizedDark: ( + textColor: $solarizedDarkBase2, + borderColor: $solarizedDarkBase03, + backgroundColor: $solarizedDarkBase03, + backgroundColorAlt: $solarizedDarkBase02, + scrollbarColor: $solarizedDarkBase0, + scrollbarHoverColor: $solarizedDarkBase2, + boxBackgroundColor: $solarizedDarkBase03, + boxBackgroundHoverColor: $solarizedDarkBase02, + boxBorderColor: $solarizedDarkBase02, + tabBackgroundColor: $solarizedDarkBase02, + tabBackgroundHoverColor: $solarizedDarkBase01, + headerColor: $solarizedDarkBase1, + headerBackgroundColor: $solarizedDarkBase02, + headerBackgroundHoverColor: $solarizedDarkBase01, + headerBorderColor: $solarizedDarkBase03, + headerInputBackgroundColor: $solarizedDarkBase2, + headerInputBackgroundFocusColor: $solarizedDarkBase1, + headerInputColor: $solarizedDarkBase01, + headerInputPlaceholderColor: $solarizedDarkBase00, + listItemBackgroundHoverColor: $solarizedDarkBase02, + 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, + calloutBorderColor: $solarizedDarkBase03, + calloutBackgroundColor: $solarizedDarkBase01, + ), ); @mixin themify($themes: $themes) { diff --git a/src/popup/settings/options.component.ts b/src/popup/settings/options.component.ts index f48aafd3f8..c24098233a 100644 --- a/src/popup/settings/options.component.ts +++ b/src/popup/settings/options.component.ts @@ -43,6 +43,7 @@ export class OptionsComponent implements OnInit { { name: i18nService.t('light'), value: 'light' }, { name: i18nService.t('dark'), value: 'dark' }, { name: 'Nord', value: 'nord' }, + { name: 'Solarized Dark', value: 'solarizedDark' }, ]; this.uriMatchOptions = [ { name: i18nService.t('baseDomain'), value: UriMatchType.Domain }, From 60ef611b78453eadee4b5b3e7bf8a5241dee4af7 Mon Sep 17 00:00:00 2001 From: Kyle Sferrazza Date: Wed, 28 Apr 2021 16:12:37 -0400 Subject: [PATCH 2/4] get name of Solarized Dark using i18n --- src/_locales/en/messages.json | 4 ++++ src/popup/settings/options.component.ts | 2 +- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/src/_locales/en/messages.json b/src/_locales/en/messages.json index 0a764034c2..e194425f63 100644 --- a/src/_locales/en/messages.json +++ b/src/_locales/en/messages.json @@ -596,6 +596,10 @@ "message": "Light", "description": "Light color" }, + "solarizedDark": { + "message": "Solarized Dark", + "description": "Solarized Dark color scheme" + }, "exportVault": { "message": "Export Vault" }, diff --git a/src/popup/settings/options.component.ts b/src/popup/settings/options.component.ts index c24098233a..6ac0158be2 100644 --- a/src/popup/settings/options.component.ts +++ b/src/popup/settings/options.component.ts @@ -43,7 +43,7 @@ export class OptionsComponent implements OnInit { { name: i18nService.t('light'), value: 'light' }, { name: i18nService.t('dark'), value: 'dark' }, { name: 'Nord', value: 'nord' }, - { name: 'Solarized Dark', value: 'solarizedDark' }, + { name: i18nService.t('solarizedDark'), value: 'solarizedDark' }, ]; this.uriMatchOptions = [ { name: i18nService.t('baseDomain'), value: UriMatchType.Domain }, From ab180d8470813249b16f6f722787671f0872679d Mon Sep 17 00:00:00 2001 From: Kyle Sferrazza Date: Wed, 28 Apr 2021 16:15:18 -0400 Subject: [PATCH 3/4] move solarized variables into variables.scss --- solarized.scss | 16 ---------------- src/popup/scss/variables.scss | 18 +++++++++++++++++- 2 files changed, 17 insertions(+), 17 deletions(-) delete mode 100644 solarized.scss diff --git a/solarized.scss b/solarized.scss deleted file mode 100644 index 5365ddbce0..0000000000 --- a/solarized.scss +++ /dev/null @@ -1,16 +0,0 @@ -$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; diff --git a/src/popup/scss/variables.scss b/src/popup/scss/variables.scss index 303f7bc384..825aeeff91 100644 --- a/src/popup/scss/variables.scss +++ b/src/popup/scss/variables.scss @@ -1,5 +1,4 @@ @import '~nord/src/sass/nord.scss'; -@import './solarized.scss'; $font-family-sans-serif: 'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif; $font-family-monospace: Menlo, Monaco, Consolas, 'Courier New', monospace; @@ -38,6 +37,23 @@ $button-color: lighten($text-color, 40%); $button-color-primary: darken($brand-primary, 8%); $button-color-danger: darken($brand-danger, 10%); +$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, From a303511672496432a8d09ec4f8f1966df110745b Mon Sep 17 00:00:00 2001 From: Kyle Sferrazza Date: Wed, 28 Apr 2021 16:23:29 -0400 Subject: [PATCH 4/4] add note about Solarized being a noun --- src/_locales/en/messages.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/_locales/en/messages.json b/src/_locales/en/messages.json index e194425f63..667a625dbe 100644 --- a/src/_locales/en/messages.json +++ b/src/_locales/en/messages.json @@ -598,7 +598,7 @@ }, "solarizedDark": { "message": "Solarized Dark", - "description": "Solarized Dark color scheme" + "description": "'Solarized' is a noun and the name of a color scheme. It should not be translated." }, "exportVault": { "message": "Export Vault"