From 223320c8b4ebec26e813db241897abfa3b0ae1e7 Mon Sep 17 00:00:00 2001 From: Kyle Spearrin Date: Sat, 21 Jul 2018 22:22:24 -0400 Subject: [PATCH] nord theme tweaks --- package-lock.json | 5 + package.json | 1 + src/scss/nord.scss | 237 ---------------------------------------- src/scss/variables.scss | 10 +- 4 files changed, 11 insertions(+), 242 deletions(-) delete mode 100644 src/scss/nord.scss diff --git a/package-lock.json b/package-lock.json index b9f728d705..537a1cb41d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6846,6 +6846,11 @@ "abbrev": "1.1.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 3f3eb48c6c..248dc6a5aa 100644 --- a/package.json +++ b/package.json @@ -245,6 +245,7 @@ "lowdb": "1.0.0", "lunr": "2.1.6", "node-forge": "0.7.1", + "nord": "0.2.1", "papaparse": "4.3.5", "rxjs": "5.5.6", "zone.js": "0.8.19" diff --git a/src/scss/nord.scss b/src/scss/nord.scss deleted file mode 100644 index 8d40aea3e8..0000000000 --- a/src/scss/nord.scss +++ /dev/null @@ -1,237 +0,0 @@ -// 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 3fc1bfb30a..8420f12231 100644 --- a/src/scss/variables.scss +++ b/src/scss/variables.scss @@ -1,4 +1,4 @@ -@import 'nord.scss'; +@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; @@ -133,15 +133,15 @@ $themes: ( ), nord: ( textColor: $nord5, - borderColor: $nord2, + borderColor: $nord0, backgroundColor: $nord2, backgroundColorAlt: $nord1, backgroundColorAlt2: $nord1, scrollbarColor: $nord4, - scrollbarHoverColor: $nord5, + scrollbarHoverColor: $nord6, boxBackgroundColor: $nord2, boxBackgroundHoverColor: $nord3, - boxBorderColor: $nord0, + boxBorderColor: $nord1, headerBackgroundColor: $nord2, headerBorderColor: $nord0, headerInputBackgroundColor: $nord6, @@ -150,7 +150,7 @@ $themes: ( headerInputPlaceholderColor: $nord3, listItemBackgroundColor: $nord2, listItemBackgroundHoverColor: $nord3, - listItemBorderColor: $nord0, + listItemBorderColor: $nord1, groupingsActiveColor: $nord3, disabledIconColor: $nord5, headingColor: $nord4,