Guide_3DS/_sass/minimal-mistakes/skins/_nord.scss

283 lines
7.8 KiB
SCSS
Raw Permalink Normal View History

2021-10-19 19:28:01 +02:00
// Project: Nord
// Version: 0.2.0
// Repository: https://github.com/arcticicestudio/nord
2017-09-28 23:42:38 +02:00
2021-10-19 19:28:01 +02:00
/*
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
2017-09-28 23:42:38 +02:00
/* Colors */
2021-10-19 19:28:01 +02:00
$background-color : $nord0 !default;
$text-color : $nord4 !default;
$text-highlight-color : $nord3 !default;
2021-10-19 19:28:01 +02:00
$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;
2017-09-28 23:42:38 +02:00
.author__urls.social-icons .fa,
.page__footer-follow .social-icons .fa {
color: inherit;
2021-10-19 19:28:01 +02:00
}