From 20425e5d678d168f5caa8613923ec44374e8a3cf Mon Sep 17 00:00:00 2001 From: Miguel Crespo Date: Mon, 22 Jul 2019 16:47:45 +0200 Subject: [PATCH] Add support for the Nord Theme (#980) * Add support for the Nord Theme as in Desktop and mobile apps * Improves --- package-lock.json | 79 ++++++++++++++++++------- package.json | 1 + src/popup/scss/variables.scss | 52 +++++++++++++++- src/popup/settings/options.component.ts | 1 + 4 files changed, 112 insertions(+), 21 deletions(-) diff --git a/package-lock.json b/package-lock.json index e0604bc911..d41e8d9eb3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2327,7 +2327,8 @@ "ansi-regex": { "version": "2.1.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "aproba": { "version": "1.2.0", @@ -2348,12 +2349,14 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -2368,17 +2371,20 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -2495,7 +2501,8 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -2507,6 +2514,7 @@ "version": "1.0.0", "bundled": true, "dev": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -2521,6 +2529,7 @@ "version": "3.0.4", "bundled": true, "dev": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -2528,12 +2537,14 @@ "minimist": { "version": "0.0.8", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "minipass": { "version": "2.3.5", "bundled": true, "dev": true, + "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -2552,6 +2563,7 @@ "version": "0.5.1", "bundled": true, "dev": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -2632,7 +2644,8 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -2644,6 +2657,7 @@ "version": "1.4.0", "bundled": true, "dev": true, + "optional": true, "requires": { "wrappy": "1" } @@ -2729,7 +2743,8 @@ "safe-buffer": { "version": "5.1.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -2765,6 +2780,7 @@ "version": "1.0.2", "bundled": true, "dev": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -2784,6 +2800,7 @@ "version": "3.0.1", "bundled": true, "dev": true, + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -2827,12 +2844,14 @@ "wrappy": { "version": "1.0.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "yallist": { "version": "3.0.3", "bundled": true, - "dev": true + "dev": true, + "optional": true } } }, @@ -5088,7 +5107,8 @@ "ansi-regex": { "version": "2.1.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "aproba": { "version": "1.2.0", @@ -5131,7 +5151,8 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "concat-map": { "version": "0.0.1", @@ -5142,7 +5163,8 @@ "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -5259,7 +5281,8 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -5271,6 +5294,7 @@ "version": "1.0.0", "bundled": true, "dev": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -5293,12 +5317,14 @@ "minimist": { "version": "0.0.8", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "minipass": { "version": "2.2.4", "bundled": true, "dev": true, + "optional": true, "requires": { "safe-buffer": "^5.1.1", "yallist": "^3.0.0" @@ -5317,6 +5343,7 @@ "version": "0.5.1", "bundled": true, "dev": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -5397,7 +5424,8 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -5409,6 +5437,7 @@ "version": "1.4.0", "bundled": true, "dev": true, + "optional": true, "requires": { "wrappy": "1" } @@ -5494,7 +5523,8 @@ "safe-buffer": { "version": "5.1.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -5530,6 +5560,7 @@ "version": "1.0.2", "bundled": true, "dev": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -5549,6 +5580,7 @@ "version": "3.0.1", "bundled": true, "dev": true, + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -5592,12 +5624,14 @@ "wrappy": { "version": "1.0.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "yallist": { "version": "3.0.2", "bundled": true, - "dev": true + "dev": true, + "optional": true } } }, @@ -9475,6 +9509,11 @@ "abbrev": "1" } }, + "nord": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/nord/-/nord-0.2.1.tgz", + "integrity": "sha1-BE7Y4AMxyEqW3ExnDwgKclcsPPk=" + }, "normalize-package-data": { "version": "2.4.0", "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.4.0.tgz", diff --git a/package.json b/package.json index bafaf8a4c2..eb769ca137 100644 --- a/package.json +++ b/package.json @@ -98,6 +98,7 @@ "mousetrap": "1.6.2", "ngx-infinite-scroll": "7.0.1", "node-forge": "0.7.6", + "nord": "^0.2.1", "papaparse": "4.6.0", "rxjs": "6.3.3", "sweetalert": "2.1.2", diff --git a/src/popup/scss/variables.scss b/src/popup/scss/variables.scss index ae74952987..e5ed86b2ac 100644 --- a/src/popup/scss/variables.scss +++ b/src/popup/scss/variables.scss @@ -1,4 +1,6 @@ -$font-family-sans-serif: 'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif; +@import '~nord/src/sass/nord.scss'; + +$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; @@ -128,6 +130,54 @@ $themes: ( passwordNumberColor: #52bdfb, passwordSpecialColor: #ff7c70, ), + nord: ( + textColor: $nord5, + borderColor: $nord0, + backgroundColor: $nord2, + backgroundColorAlt: $nord1, + backgroundColorAlt2: $nord1, + scrollbarColor: $nord4, + scrollbarHoverColor: $nord6, + boxBackgroundColor: $nord2, + boxBackgroundHoverColor: $nord3, + boxBorderColor: $nord1, + headerBackgroundColor: $nord2, + headerBorderColor: $nord0, + headerInputBackgroundColor: $nord6, + headerInputBackgroundFocusColor: $nord5, + headerInputColor: $nord2, + headerInputPlaceholderColor: $nord3, + listItemBackgroundColor: $nord2, + listItemBackgroundHoverColor: $nord3, + listItemBorderColor: $nord1, + groupingsActiveColor: $nord3, + disabledIconColor: $nord5, + headingColor: $nord4, + headingButtonColor: $nord5, + headingButtonHoverColor: $nord6, + 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, + ), ); @mixin themify($themes: $themes) { diff --git a/src/popup/settings/options.component.ts b/src/popup/settings/options.component.ts index de3bc0f40e..63988d31fc 100644 --- a/src/popup/settings/options.component.ts +++ b/src/popup/settings/options.component.ts @@ -46,6 +46,7 @@ export class OptionsComponent implements OnInit { { name: i18nService.t('default'), value: null }, { name: i18nService.t('light'), value: 'light' }, { name: i18nService.t('dark'), value: 'dark' }, + { name: 'Nord', value: 'nord' }, ]; this.uriMatchOptions = [ { name: i18nService.t('baseDomain'), value: UriMatchType.Domain },