Skip to content

Commit

Permalink
Implement Sass color palette
Browse files Browse the repository at this point in the history
  • Loading branch information
arcticicestudio committed Sep 4, 2016
1 parent 6dc9b05 commit 1a4c6bf
Showing 1 changed file with 269 additions and 0 deletions.
269 changes: 269 additions & 0 deletions src/sass/nord.scss
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;

0 comments on commit 1a4c6bf

Please sign in to comment.