diff --git a/src/app/accounts/settings.component.ts b/src/app/accounts/settings.component.ts index 75445672..17336d78 100644 --- a/src/app/accounts/settings.component.ts +++ b/src/app/accounts/settings.component.ts @@ -64,6 +64,7 @@ export class SettingsComponent implements OnInit { { name: i18nService.t('default'), value: null }, { name: i18nService.t('light'), value: 'light' }, { name: i18nService.t('dark'), value: 'dark' }, + { name: 'Nord', value: 'nord' }, ]; } diff --git a/src/scss/nord.scss b/src/scss/nord.scss new file mode 100644 index 00000000..8d40aea3 --- /dev/null +++ b/src/scss/nord.scss @@ -0,0 +1,237 @@ +// Source: https://raw.githubusercontent.com/arcticicestudio/nord/develop/src/nord.scss +// +// Copyright (c) 2016-present Arctic Ice Studio +// Copyright (c) 2016-present Sven Greb + +// Project: Nord +// Version: 0.2.0 +// Repository: https://github.com/arcticicestudio/nord +// License: MIT +// References: +// http://sass-lang.com +// http://sassdoc.com + +//// +/// An arctic, north-bluish color palette. +/// Created for the clean- and minimal flat design pattern to achieve a optimal focus and readability for code syntax +/// highlighting and UI. +/// It consists of a total of sixteen, carefully selected, dimmed pastel colors for a eye-comfortable, but yet colorful +/// ambiance. +/// +/// @author Arctic Ice Studio +//// + +/// Base component color of "Polar Night". +/// +/// Used for texts, backgrounds, carets and structuring characters like curly- and square brackets. +/// +/// @access public +/// @example scss - SCSS +/// /* For dark ambiance themes */ +/// .background { +/// background-color: $nord0; +/// } +/// /* For light ambiance themes */ +/// .text { +/// color: $nord0; +/// } +/// @group polarnight +/// @since 0.1.0 +$nord0: #2e3440; + +/// Lighter shade color of the base component color. +/// +/// Used as a lighter background color for UI elements like status bars. +/// +/// @access public +/// @group polarnight +/// @see $nord0 +/// @since 0.1.0 +$nord1: #3b4252; + +/// Lighter shade color of the base component color. +/// +/// Used as line highlighting in the editor. +/// In the UI scope it may be used as selection- and highlight color. +/// +/// @access public +/// @example scss - SCSS +/// /* Code Syntax Highlighting scope */ +/// .editor { +/// &.line { +/// background-color: $nord2; +/// } +/// } +/// +/// /* UI scope */ +/// button { +/// &:selected { +/// background-color: $nord2; +/// } +/// } +/// @group polarnight +/// @see $nord0 +/// @since 0.1.0 +$nord2: #434c5e; + +/// Lighter shade color of the base component color. +/// +/// Used for comments, invisibles, indent- and wrap guide marker. +/// In the UI scope used as pseudoclass color for disabled elements. +/// +/// @access public +/// @example scss - SCSS +/// /* Code Syntax Highlighting scope */ +/// .editor { +/// &.indent-guide, +/// &.wrap-guide { +/// &.marker { +/// color: $nord3; +/// } +/// } +/// } +/// .comment, +/// .invisible { +/// color: $nord3; +/// } +/// +/// /* UI scope */ +/// button { +/// &:disabled { +/// background-color: $nord3; +/// } +/// } +/// @group polarnight +/// @see $nord0 +/// @since 0.1.0 +$nord3: #4c566a; + +/// Base component color of "Snow Storm". +/// +/// Main color for text, variables, constants and attributes. +/// In the UI scope used as semi-light background depending on the theme shading design. +/// +/// @access public +/// @example scss - SCSS +/// /* For light ambiance themes */ +/// .background { +/// background-color: $nord4; +/// } +/// /* For dark ambiance themes */ +/// .text { +/// color: $nord4; +/// } +/// @group snowstorm +/// @since 0.1.0 +$nord4: #d8dee9; + +/// Lighter shade color of the base component color. +/// +/// Used as a lighter background color for UI elements like status bars. +/// Used as semi-light background depending on the theme shading design. +/// +/// @access public +/// @group snowstorm +/// @see $nord4 +/// @since 0.1.0 +$nord5: #e5e9f0; + +/// Lighter shade color of the base component color. +/// +/// Used for punctuations, carets and structuring characters like curly- and square brackets. +/// In the UI scope used as background, selection- and highlight color depending on the theme shading design. +/// +/// @access public +/// @group snowstorm +/// @see $nord4 +/// @since 0.1.0 +$nord6: #eceff4; + +/// Bluish core color. +/// +/// Used for classes, types and documentation tags. +/// +/// @access public +/// @group frost +/// @since 0.1.0 +$nord7: #8fbcbb; + +/// Bluish core accent color. +/// +/// Represents the accent color of the color palette. +/// Main color for primary UI elements and methods/functions. +/// +/// Can be used for +/// - Markup quotes +/// - Markup link URLs +/// +/// @access public +/// @group frost +/// @since 0.1.0 +$nord8: #88c0d0; + +/// Bluish core color. +/// +/// Used for language-specific syntactic/reserved support characters and keywords, operators, tags, units and +/// punctuations like (semi)colons,commas and braces. +/// +/// @access public +/// @group frost +/// @since 0.1.0 +$nord9: #81a1c1; + +/// Bluish core color. +/// +/// Used for markup doctypes, import/include/require statements, pre-processor statements and at-rules (`@`). +/// +/// @access public +/// @group frost +/// @since 0.1.0 +$nord10: #5e81ac; + +/// Colorful component color. +/// +/// Used for errors, git/diff deletion and linter marker. +/// +/// @access public +/// @group aurora +/// @since 0.1.0 +$nord11: #bf616a; + +/// Colorful component color. +/// +/// Used for annotations. +/// +/// @access public +/// @group aurora +/// @since 0.1.0 +$nord12: #d08770; + +/// Colorful component color. +/// +/// Used for escape characters, regular expressions and markup entities. +/// In the UI scope used for warnings and git/diff renamings. +/// +/// @access public +/// @group aurora +/// @since 0.1.0 +$nord13: #ebcb8b; + +/// Colorful component color. +/// +/// Main color for strings and attribute values. +/// In the UI scope used for git/diff additions and success visualizations. +/// +/// @access public +/// @group aurora +/// @since 0.1.0 +$nord14: #a3be8c; + +/// Colorful component color. +/// +/// Used for numbers. +/// +/// @access public +/// @group aurora +/// @since 0.1.0 +$nord15: #b48ead; diff --git a/src/scss/variables.scss b/src/scss/variables.scss index 9d3f299e..3fc1bfb3 100644 --- a/src/scss/variables.scss +++ b/src/scss/variables.scss @@ -1,4 +1,6 @@ -$font-family-sans-serif: 'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif; +@import '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; @@ -129,6 +131,52 @@ $themes: ( warningColor: $brand-warning, logoSuffix: 'white', ), + nord: ( + textColor: $nord5, + borderColor: $nord2, + backgroundColor: $nord2, + backgroundColorAlt: $nord1, + backgroundColorAlt2: $nord1, + scrollbarColor: $nord4, + scrollbarHoverColor: $nord5, + boxBackgroundColor: $nord2, + boxBackgroundHoverColor: $nord3, + boxBorderColor: $nord0, + headerBackgroundColor: $nord2, + headerBorderColor: $nord0, + headerInputBackgroundColor: $nord6, + headerInputBackgroundFocusColor: $nord5, + headerInputColor: $nord2, + headerInputPlaceholderColor: $nord3, + listItemBackgroundColor: $nord2, + listItemBackgroundHoverColor: $nord3, + listItemBorderColor: $nord0, + groupingsActiveColor: $nord3, + disabledIconColor: $nord5, + headingColor: $nord4, + headingButtonColor: $nord5, + headingButtonHoverColor: $nord6, + labelColor: $nord4, + mutedColor: $nord4, + totpStrokeColor: $nord4, + boxRowButtonColor: $nord4, + boxRowButtonHoverColor: $nord6, + inputBorderColor: $nord2, + inputBackgroundColor: $nord0, + inputPlaceholderColor: $nord4, + buttonBackgroundColor: $nord3, + buttonBorderColor: $nord0, + buttonColor: $nord6, + buttonPrimaryColor: $nord9, + buttonDangerColor: $nord11, + primaryColor: $nord9, + primaryAccentColor: $nord8, + dangerColor: $nord11, + successColor: $nord14, + infoColor: $nord9, + warningColor: $nord12, + logoSuffix: 'white', + ), ); @mixin themify($themes: $themes) {