-
-
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.
Implement LESSCSS color palette stylesheet
- Loading branch information
1 parent
6dc9b05
commit dc568bb
Showing
1 changed file
with
211 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,211 @@ | ||
/* | ||
++++++++++++++++++++++++++++++++++++++++++++++++++++ | ||
title Nord + | ||
project nord + | ||
version + | ||
repository https://github.com/arcticicestudio/nord + | ||
author Arctic Ice Studio + | ||
email [email protected] + | ||
copyright Copyright (C) 2016 + | ||
++++++++++++++++++++++++++++++++++++++++++++++++++++ | ||
[References] | ||
KSS | ||
(http://warpspire.com/kss) | ||
kss-node | ||
(https://github.com/kss-node/kss-node) | ||
*/ | ||
|
||
// 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. | ||
// | ||
// Styleguide Nord | ||
|
||
// Base component color of "Polar Night". | ||
// | ||
// Used for texts, backgrounds, carets and structuring characters like curly- and square brackets. | ||
// | ||
// Markup: | ||
// <div style="background-color:#2E3440; width=60; height=60"></div> | ||
// | ||
// Styleguide Nord - Polar Night | ||
@nord0: #2E3440; | ||
|
||
// Lighter shade color of the base component color. | ||
// | ||
// Used as a lighter background color for UI elements like status bars. | ||
// | ||
// Markup: | ||
// <div style="background-color:#3B4252; width=60; height=60"></div> | ||
// | ||
// Styleguide Nord - Polar Night | ||
@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. | ||
// | ||
// Markup: | ||
// <div style="background-color:#434C5E; width=60; height=60"></div> | ||
// | ||
// Styleguide Nord - Polar Night | ||
@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. | ||
// | ||
// Markup: | ||
// <div style="background-color:#4C566A; width=60; height=60"></div> | ||
// | ||
// Styleguide Nord - Polar Night | ||
@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. | ||
// | ||
// Markup: | ||
// <div style="background-color:#D8DEE9; width=60; height=60"></div> | ||
// | ||
// Styleguide Nord - Snow Storm | ||
@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. | ||
// | ||
// Markup: | ||
// <div style="background-color:#E5E9F0; width=60; height=60"></div> | ||
// | ||
// Styleguide Nord - Snow Storm | ||
@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. | ||
// | ||
// Markup: | ||
// <div style="background-color:#ECEFF4; width=60; height=60"></div> | ||
// | ||
// Styleguide Nord - Snow Storm | ||
@nord6: #ECEFF4; | ||
|
||
// Bluish core color. | ||
// | ||
// Most commonly used for | ||
// - classes/types | ||
// - attributes | ||
// - constants | ||
// | ||
// Markup: | ||
// <div style="background-color:#8FBCBB; width=60; height=60"></div> | ||
// | ||
// Styleguide Nord - Frost | ||
@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 | ||
// | ||
// Markup: | ||
// <div style="background-color:#88C0D0; width=60; height=60"></div> | ||
// | ||
// Styleguide Nord - Frost | ||
@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, $, %). | ||
// | ||
// Markup: | ||
// <div style="background-color:#81A1C1; width=60; height=60"></div> | ||
// | ||
// Styleguide Nord - Frost | ||
@nord9: #81A1C1; | ||
|
||
// Bluish core color. | ||
// | ||
// Most commonly used for | ||
// - Markup doctypes | ||
// - import/include/require statements | ||
// - pre-processor statements | ||
// - at-rules (@) | ||
// | ||
// Markup: | ||
// <div style="background-color:#5E81AC; width=60; height=60"></div> | ||
// | ||
// Styleguide Nord - Frost | ||
@nord10: #5E81AC; | ||
|
||
// Colorful component color. | ||
// | ||
// Most commonly used for errors, git/diff deletion and linter marker. | ||
// | ||
// Markup: | ||
// <div style="background-color:#BF616A; width=60; height=60"></div> | ||
// | ||
// Styleguide Nord - Aurora | ||
@nord11: #BF616A; | ||
|
||
// Colorful component color. | ||
// | ||
// Most commonly used for annotations and regular expressions. | ||
// | ||
// Markup: | ||
// <div style="background-color:#D08770; width=60; height=60"></div> | ||
// | ||
// Styleguide Nord - Aurora | ||
@nord12: #D08770; | ||
|
||
// Colorful component color. | ||
// | ||
// Most commonly used for escape characters, warnings, git/diff renamings and Markup entities. | ||
// | ||
// Markup: | ||
// <div style="background-color:#EBCB8B; width=60; height=60"></div> | ||
// | ||
// Styleguide Nord - Aurora | ||
@nord13: #EBCB8B; | ||
|
||
// Colorful component color. | ||
// | ||
// Most commonly used for methods/functions, git/diff additions and success visualizations. | ||
// | ||
// Markup: | ||
// <div style="background-color:#A3BE8C; width=60; height=60"></div> | ||
// | ||
// Styleguide Nord - Aurora | ||
@nord14: #A3BE8C; | ||
|
||
// Colorful component color. | ||
// | ||
// Most commonly used for numbers. | ||
// | ||
// Markup: | ||
// <div style="background-color:#B48EAD; width=60; height=60"></div> | ||
// | ||
// Styleguide Nord - Aurora | ||
@nord15: #B48EAD; |