diff --git a/src/_sass/_nord-palette.scss b/src/_sass/_nord-palette.scss new file mode 100644 index 0000000..33c400c --- /dev/null +++ b/src/_sass/_nord-palette.scss @@ -0,0 +1,235 @@ +// 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; \ No newline at end of file