diff --git a/src/sass/template-css.scss b/src/sass/template-css.scss new file mode 100644 index 0000000..56a67b0 --- /dev/null +++ b/src/sass/template-css.scss @@ -0,0 +1,256 @@ +/* +++++++++++++++++++++++++++++++++++++++++++++++++++++ +title Nord + +project nord + +version + +repository https://github.com/arcticicestudio/nord + +author Arctic Ice Studio + +email development@arcticicestudio.com + +copyright Copyright (C) 2016 + +++++++++++++++++++++++++++++++++++++++++++++++++++++ + +[References] +W3C + (https://www.w3.org/TR/css-variables) + (https://www.w3.org/TR/selectors/#root-pseudo) +CSS Working Group + (https://drafts.csswg.org/css-variables) +MDN + (https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables) +KSS + (http://warpspire.com/kss) +kss-node + (https://github.com/kss-node/kss-node) +*/ + +@import "nord"; + +/* +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 +*/ + +:root { + /* + Base component color of "Polar Night". + + Used for texts, backgrounds, carets and structuring characters like curly- and square brackets. + + Markup: +
+ + Styleguide Nord - Polar Night + */ + --nord0: $nord0; + + /* + Lighter shade color of the base component color. + + Used as a lighter background color for UI elements like status bars. + + Markup: +
+ + Styleguide Nord - Polar Night + */ + --nord1: $nord1; + + /* + 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: +
+ + Styleguide Nord - Polar Night + */ + --nord2: $nord2; + + /* + 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: +
+ + Styleguide Nord - Polar Night + */ + --nord3: $nord3; + + /* + 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: +
+ + Styleguide Nord - Snow Storm + */ + --nord4: $nord4; + + /* + 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: +
+ + Styleguide Nord - Snow Storm + */ + --nord5: $nord5; + + /* + 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: +
+ + Styleguide Nord - Snow Storm + */ + --nord6: $nord6; + + /* + Bluish core color. + + Most commonly used for + - classes/types + - attributes + - constants + + Markup: +
+ + Styleguide Nord - Frost + */ + --nord7: $nord7; + + /* + 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: +
+ + Styleguide Nord - Frost + */ + --nord8: $nord8; + + /* + 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: +
+ + Styleguide Nord - Frost + */ + --nord9: $nord9; + + /* + Bluish core color. + + Most commonly used for + - Markup doctypes + - import/include/require statements + - pre-processor statements + - at-rules (@) + + Markup: +
+ + Styleguide Nord - Frost + */ + --nord10: $nord10; + + /* + Colorful component color. + + Most commonly used for errors, git/diff deletion and linter marker. + + Markup: +
+ + Styleguide Nord - Aurora + */ + --nord11: $nord11; + + /* + Colorful component color. + + Most commonly used for annotations and regular expressions. + + Markup: +
+ + Styleguide Nord - Aurora + */ + --nord12: $nord12; + + /* + Colorful component color. + + Most commonly used for escape characters, warnings, git/diff renamings and Markup entities. + + Markup: +
+ + Styleguide Nord - Aurora + */ + --nord13: $nord13; + + /* + Colorful component color. + + Most commonly used for methods/functions, git/diff additions and success visualizations. + + Markup: +
+ + Styleguide Nord - Aurora + */ + --nord14: $nord14; + + /* + Colorful component color. + + Most commonly used for numbers. + + Markup: +
+ + Styleguide Nord - Aurora + */ + --nord15: $nord15; +}