-
-
Notifications
You must be signed in to change notification settings - Fork 170
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
6dc9b05
commit 1a4c6bf
Showing
1 changed file
with
269 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,269 @@ | ||
// | ||
// ++++++++++++++++++++++++++++++++++++++++++++++++++++ | ||
// title Nord + | ||
// project nord + | ||
// version + | ||
// repository https://github.com/arcticicestudio/nord + | ||
// author Arctic Ice Studio + | ||
// email development@arcticicestudio.com + | ||
// copyright Copyright (C) 2016 + | ||
// ++++++++++++++++++++++++++++++++++++++++++++++++++++ | ||
// | ||
// [References] | ||
// Sass | ||
// (http://sass-lang.com) | ||
// SassDoc | ||
// (http://sassdoc.com) | ||
|
||
//// | ||
/// A arctic, north-bluish color palette. | ||
/// Created for the clean- and minimal 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 hightlight 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 it may be used as pseudeoclass 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". | ||
/// | ||
/// Used for texts, carets and structuring characters like curly- and square brackets. | ||
/// In the UI scope it may be 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. | ||
/// It may also be 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. | ||
/// | ||
/// Usually be used as background depending on the theme shading design. | ||
/// In the UI scope it may be used as selection- and hightlight color. | ||
/// | ||
/// @access public | ||
/// @example scss - SCSS | ||
/// /* Code Syntax Highlighting scope */ | ||
/// .editor { | ||
/// &.line { | ||
/// background-color: $nord2; | ||
/// } | ||
/// } | ||
/// | ||
/// /* UI scope */ | ||
/// button { | ||
/// &:selected { | ||
/// background-color: $nord2; | ||
/// } | ||
/// } | ||
/// @group snowstorm | ||
/// @see $nord4 | ||
/// @since 0.1.0 | ||
$nord6: #ECEFF4; | ||
|
||
/// Bluish core color. | ||
/// | ||
/// Most commonly used for | ||
/// - classes/types | ||
/// - attributes | ||
/// - constants | ||
/// | ||
/// @access public | ||
/// @group frost | ||
/// @since 0.1.0 | ||
$nord7: #8FBCBB; | ||
|
||
/// Bluish core color. | ||
/// | ||
/// Represents the accent color of the color palette. | ||
/// Can be used as main color for primary UI elements. | ||
/// Optionally used for methods/functions instead of `$nord14`. | ||
/// | ||
/// Also commonly used for | ||
/// - documentation/annotation tags | ||
/// - attribute values | ||
/// - Markup quotes | ||
/// - Markup link URLs | ||
/// | ||
/// @access public | ||
/// @group frost | ||
/// @since 0.1.0 | ||
$nord8: #88C0D0; | ||
|
||
/// Bluish core color. | ||
/// | ||
/// Most commonly used for | ||
/// - language-specific syntactic/reserved keywords | ||
/// - operators | ||
/// - tags | ||
/// - punctuations like colon/semicolon, comma and braces | ||
/// | ||
/// Can optionally be used for units and language-specific reserved special support characters (`px`/`em`, `$`, `%`). | ||
/// | ||
/// @access public | ||
/// @group frost | ||
/// @since 0.1.0 | ||
$nord9: #81A1C1; | ||
|
||
/// Bluish core color. | ||
/// | ||
/// Most commonly used for | ||
/// - Markup doctypes | ||
/// - import/include/require statements | ||
/// - pre-processor statements | ||
/// - at-rules (`@`) | ||
/// | ||
/// @access public | ||
/// @group frost | ||
/// @since 0.1.0 | ||
$nord10: #5E81AC; | ||
|
||
/// Colorful component color. | ||
/// | ||
/// Most commonly used for errors, git/diff deletion and linter marker. | ||
/// | ||
/// @access public | ||
/// @group aurora | ||
/// @since 0.1.0 | ||
$nord11: #BF616A; | ||
|
||
/// Colorful component color. | ||
/// | ||
/// Most commonly used for annotations and regular expressions. | ||
/// | ||
/// @access public | ||
/// @group aurora | ||
/// @since 0.1.0 | ||
$nord12: #D08770; | ||
|
||
/// Colorful component color. | ||
/// | ||
/// Most commonly used for escape characters, warnings, git/diff renamings and Markup entities. | ||
/// | ||
/// @access public | ||
/// @group aurora | ||
/// @since 0.1.0 | ||
$nord13: #EBCB8B; | ||
|
||
/// Colorful component color. | ||
/// | ||
/// Most commonly used for methods/functions, git/diff additions and success visualizations. | ||
/// | ||
/// @access public | ||
/// @group aurora | ||
/// @since 0.1.0 | ||
$nord14: #A3BE8C; | ||
|
||
/// Colorful component color. | ||
/// | ||
/// Most commonly used for numbers. | ||
/// | ||
/// @access public | ||
/// @group aurora | ||
/// @since 0.1.0 | ||
$nord15: #B48EAD; |