Add Nord color theme (#110)

* Color scheme courtesy of folks at arcticicestudio:
  https://arcticicestudio.github.io/nord/
This commit is contained in:
Casey Watson 2018-07-21 20:02:10 -06:00 committed by Kyle Spearrin
parent f07df0590b
commit e5708fc636
3 changed files with 287 additions and 1 deletions

View File

@ -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' },
];
}

237
src/scss/nord.scss Normal file
View File

@ -0,0 +1,237 @@
// Source: https://raw.githubusercontent.com/arcticicestudio/nord/develop/src/nord.scss
//
// Copyright (c) 2016-present Arctic Ice Studio <development@arcticicestudio.com>
// Copyright (c) 2016-present Sven Greb <code@svengreb.de>
// 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 <development@arcticicestudio.com>
////
/// 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;

View File

@ -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) {