rosely
Version:
A warm and serene color palette based on millennial pink
266 lines (198 loc) • 6.28 kB
CSS
/*
* Copyright (C) 2020 Hello Tham <info@hellotham.com>
* Copyright (C) 2020 Chris Tham <chris.tham@hellotham.com>
*
* Project: Rosely
* Version: 1.0.0
* Repository: https://github.com/hellotham/rosely
* License: MIT
* References:
* https://www.w3.org/TR/css-variables
* https://www.w3.org/TR/selectors/#root-pseudo
* https://drafts.csswg.org/css-variables
* https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables
* http://warpspire.com/kss
* https://github.com/kss-node/kss-node
*/
/*
Rosely: A warm and serene color palette based on millennial pink
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 Rosely
*/
:root {
/*
Base component color of "Velvet Night".
Used for texts, backgrounds, carets and structuring characters like curly- and square brackets.
Markup:
<div style="background-color:#27272a; width=60; height=60"></div>
Styleguide Rosely - Velvet Night
*/
--rosely0: #27272a;
--nord0: #27272a;
--base00: #27272a;
/*
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:#615f5f; width=60; height=60"></div>
Styleguide Rosely - Velvet Night
*/
--rosely1: #615f5f;
--nord1: #615f5f;
--base01: #615f5f;
/*
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.
Markup:
<div style="background-color:#85677b; width=60; height=60"></div>
Styleguide Rosely - Velvet Night
*/
--rosely2: #85677b;
--nord2: #85677b;
--base02: #85677b;
/*
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.
Markup:
<div style="background-color:#a49e9e; width=60; height=60"></div>
Styleguide Rosely - Velvet Night
*/
--rosely3: #a49e9e;
--nord3: #a49e9e;
--base03: #a49e9e;
/*
Base component color of "Spring Blossom".
Main color for text, variables, constants and attributes.
In the UI scope used as semi-light background depending on the theme shading design.
Markup:
<div style="background-color:#f7caca; width=60; height=60"></div>
Styleguide Rosely - Spring Blossom
*/
--rosely4: #f7caca;
--nord4: #f7caca;
--base04: #f7caca;
/*
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.
Markup:
<div style="background-color:#f4dede; width=60; height=60"></div>
Styleguide Rosely - Spring Blossom
*/
--rosely5: #f4dede;
--nord5: #f4dede;
--base05: #f4dede;
/*
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.
Markup:
<div style="background-color:#f4eee8; width=60; height=60"></div>
Styleguide Rosely - Spring Blossom
*/
--rosely6: #f4eee8;
--nord6: #f4eee8;
--base06: #f4eee8;
/*
Bluish core color.
Used for classes, types and documentation tags.
Markup:
<div style="background-color:#93a9d1; width=60; height=60"></div>
Styleguide Rosely - Flower Meadow
*/
--rosely7: #93a9d1;
--nord7: #93a9d1;
--base0C: #93a9d1;
/*
Lilac 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
Markup:
<div style="background-color:#be9cc1; width=60; height=60"></div>
Styleguide Rosely - Flower Meadow
*/
--rosely8: #be9cc1;
--nord8: #be9cc1;
--base0D: #be9cc1;
/*
Mauve core color.
Used for language-specific syntactic/reserved support characters and keywords, operators, tags, units and
punctuations like (semi)colons,commas and braces.
Markup:
<div style="background-color:#b0879b; width=60; height=60"></div>
Styleguide Rosely - Flower Meadow
*/
--rosely9: #b0879b;
--nord0: #b0879b;
--base0E: #b0879b;
/*
Purple core color.
Used for markup doctypes, import/include/require statements, pre-processor statements and at-rules (`@`).
Markup:
<div style="background-color:#b565a7; width=60; height=60"></div>
Styleguide Rosely - Flower Meadow
*/
--rosely10: #b565a7;
--nord10: #b565a7;
--base0F: #b565a7;
/*
Colorful component color.
Used for errors, git/diff deletion and linter marker.
Markup:
<div style="background-color:#d2386c; width=60; height=60"></div>
Styleguide Rosely - Vivid Floriade
*/
--rosely11: #d2386c;
--nord11: #d2386c;
--base08: #d2386c;
/*
Colorful component color.
Used for annotations.
Markup:
<div style="background-color:#ec809e; width=60; height=60"></div>
Styleguide Rosely - Vivid Floriade
*/
--rosely12: #ec809e;
--nord12: #ec809e;
--base09: #ec809e;
/*
Colorful component color.
Used for escape characters, regular expressions and markup entities.
In the UI scope used for warnings and git/diff renamings.
Markup:
<div style="background-color:#eada4f; width=60; height=60"></div>
Styleguide Rosely - Vivid Floriade
*/
--rosely13: #eada4f;
--nord13: #eada4f;
--base0A: #eada4f;
/*
Colorful component color.
Main color for strings and attribute values.
In the UI scope used for git/diff additions and success visualizations.
Markup:
<div style="background-color:#64bfa4; width=60; height=60"></div>
Styleguide Rosely - Vivid Floriade
*/
--rosely14: #64bfa4;
--nord14: #64bfa4;
--base0B: #64bfa4;
/*
Colorful component color.
Used for numbers.
Markup:
<div style="background-color:#919bc9; width=60; height=60"></div>
Styleguide Rosely - Vivid Floriade
*/
--rosely15: #919bc9;
--nord15: #919bc9;
--base07: #fff;
}