241 lines
6 KiB
SCSS
241 lines
6 KiB
SCSS
//
|
|
// ++++++++++++++++++++++++++++++++++++++++++++++++++++
|
|
// title Nord +
|
|
// project nord +
|
|
// version 0.2.0 +
|
|
// repository https://github.com/arcticicestudio/nord +
|
|
// author Arctic Ice Studio +
|
|
// email development@arcticicestudio.com +
|
|
// copyright Copyright (C) 2017 +
|
|
// ++++++++++++++++++++++++++++++++++++++++++++++++++++
|
|
//
|
|
// [References]
|
|
// Sass
|
|
// (http://sass-lang.com)
|
|
// SassDoc
|
|
// (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 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 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 hightlight 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; |