282 lines
7.8 KiB
SCSS
282 lines
7.8 KiB
SCSS
// Project: Nord
|
|
// Version: 0.2.0
|
|
// Repository: https://github.com/arcticicestudio/nord
|
|
|
|
/*
|
|
MIT License (MIT)
|
|
|
|
Copyright (c) 2016-2021 Arctic Ice Studio development@arcticicestudio.com (https://www.arcticicestudio.com)
|
|
Copyright (c) 2016-2021 Sven Greb development@svengreb.de (https://www.svengreb.de)
|
|
|
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
of this software and associated documentation files (the "Software"), to deal
|
|
in the Software without restriction, including without limitation the rights
|
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
copies of the Software, and to permit persons to whom the Software is
|
|
furnished to do so, subject to the following conditions:
|
|
|
|
The above copyright notice and this permission notice shall be included in all
|
|
copies or substantial portions of the Software.
|
|
|
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
SOFTWARE.
|
|
*/
|
|
|
|
|
|
////
|
|
/// 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 highlight 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 highlight 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;
|
|
|
|
// adapt to Minimal Mistakes
|
|
/* Colors */
|
|
$background-color : $nord0 !default;
|
|
$text-color : $nord4 !default;
|
|
$text-highlight-color : $nord3 !default;
|
|
$primary-color : $nord8 !default;
|
|
$success-color : $nord14 !default;
|
|
$warning-color : $nord12 !default;
|
|
$danger-color : $nord11 !default;
|
|
$info-color : $nord10 !default;
|
|
$border-color : mix(#fff, $background-color, 20%) !default;
|
|
$code-background-color : mix(#000, $background-color, 15%) !default;
|
|
$code-background-color-dark : mix(#000, $background-color, 20%) !default;
|
|
$form-background-color : mix(#000, $background-color, 15%) !default;
|
|
$footer-background-color : mix(#000, $background-color, 30%) !default;
|
|
$link-color : mix($primary-color, $text-color, 40%) !default;
|
|
$link-color-hover : mix(#fff, $link-color, 25%) !default;
|
|
$link-color-visited : mix(#000, $link-color, 25%) !default;
|
|
$masthead-link-color : $text-color !default;
|
|
$masthead-link-color-hover : mix(#000, $text-color, 20%) !default;
|
|
$navicon-link-color-hover : mix(#000, $background-color, 30%) !default;
|
|
$notice-background-mix : 45% !default;
|
|
|
|
.author__urls.social-icons .fa,
|
|
.page__footer-follow .social-icons .fa {
|
|
color: inherit;
|
|
}
|