/* * Copyright (c) 2016-present Sven Greb * This source code is licensed under the MIT license found in the license file. */ /* * References: * 1. https://www.w3.org/TR/css-variables * 2. https://www.w3.org/TR/selectors/#root-pseudo * 3. https://drafts.csswg.org/css-variables * 4. https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables * 5. https://warpspire.com/kss * 6. https://github.com/kss-node/kss-node */ /* 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. Styleguide Nord */ :root { /* Base component color of "Polar Night". Used for texts, backgrounds, carets and structuring characters like curly- and square brackets. Styleguide Nord - Polar Night */ --nord0: #2e3440; --nord0-rgb: 46, 52, 64; /* Lighter shade color of the base component color. Used as a lighter background color for UI elements like status bars. Styleguide Nord - Polar Night */ --nord1: #3b4252; --nord1-rgb: 59, 66, 82; /* 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. Styleguide Nord - Polar Night */ --nord2: #434c5e; --nord2-rgb: 67, 76, 94; /* 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. Styleguide Nord - Polar Night */ --nord3: #4c566a; --nord3-rgb: 76, 86, 106; /* 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. Styleguide Nord - Snow Storm */ --nord4: #d8dee9; --nord4-rgb: 216, 222, 233; /* 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. Styleguide Nord - Snow Storm */ --nord5: #e5e9f0; --nord5-rgb: 229, 233, 240; /* 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. Styleguide Nord - Snow Storm */ --nord6: #eceff4; --nord6-rgb: 236, 239, 244; /* Bluish core color. Used for classes, types and documentation tags. Styleguide Nord - Frost */ --nord7: #8fbcbb; --nord7-rgb: 143, 188, 187; /* 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 Styleguide Nord - Frost */ --nord8: #88c0d0; --nord8-rgb: 136, 192, 208; /* Bluish core color. Used for language-specific syntactic/reserved support characters and keywords, operators, tags, units and punctuations like (semi)colons,commas and braces. Styleguide Nord - Frost */ --nord9: #81a1c1; --nord9-rgb: 129, 161, 193; /* Bluish core color. Used for markup doctypes, import/include/require statements, pre-processor statements and at-rules (`@`). Styleguide Nord - Frost */ --nord10: #5e81ac; --nord10-rgb: 94, 129, 172; /* Colorful component color. Used for errors, git/diff deletion and linter marker. Styleguide Nord - Aurora */ --nord11: #bf616a; --nord11-rgb: 191, 97, 106; /* Colorful component color. Used for annotations. Styleguide Nord - Aurora */ --nord12: #d08770; --nord12-rgb: 208, 135, 112; /* Colorful component color. Used for escape characters, regular expressions and markup entities. In the UI scope used for warnings and git/diff renamings. Styleguide Nord - Aurora */ --nord13: #ebcb8b; --nord13-rgb: 235, 203, 139; /* Colorful component color. Main color for strings and attribute values. In the UI scope used for git/diff additions and success visualizations. Styleguide Nord - Aurora */ --nord14: #a3be8c; --nord14-rgb: 163, 190, 140; /* Colorful component color. Used for numbers. Styleguide Nord - Aurora */ --nord15: #b48ead; --nord15-rgb: 180, 142, 173; }