/* ==UserStyle==
@name npm Catppuccin
@namespace github.com/catppuccin/userstyles/styles/npm
@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/npm
@version 2024.12.31
@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/npm/catppuccin.user.less
@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Anpm
@description Soothing pastel theme for npm
@author Catppuccin
@license MIT
@preprocessor less
@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"]
@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"]
@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"]
==/UserStyle== */
@-moz-document domain("www.npmjs.com") {
:root {
@media (prefers-color-scheme: light) {
#catppuccin(@lightFlavor);
}
@media (prefers-color-scheme: dark) {
#catppuccin(@darkFlavor);
}
}
#catppuccin(@flavor) {
@rosewater: @catppuccin[@@flavor][@rosewater];
@flamingo: @catppuccin[@@flavor][@flamingo];
@pink: @catppuccin[@@flavor][@pink];
@mauve: @catppuccin[@@flavor][@mauve];
@red: @catppuccin[@@flavor][@red];
@maroon: @catppuccin[@@flavor][@maroon];
@peach: @catppuccin[@@flavor][@peach];
@yellow: @catppuccin[@@flavor][@yellow];
@green: @catppuccin[@@flavor][@green];
@teal: @catppuccin[@@flavor][@teal];
@sky: @catppuccin[@@flavor][@sky];
@sapphire: @catppuccin[@@flavor][@sapphire];
@blue: @catppuccin[@@flavor][@blue];
@lavender: @catppuccin[@@flavor][@lavender];
@text: @catppuccin[@@flavor][@text];
@subtext1: @catppuccin[@@flavor][@subtext1];
@subtext0: @catppuccin[@@flavor][@subtext0];
@overlay2: @catppuccin[@@flavor][@overlay2];
@overlay1: @catppuccin[@@flavor][@overlay1];
@overlay0: @catppuccin[@@flavor][@overlay0];
@surface2: @catppuccin[@@flavor][@surface2];
@surface1: @catppuccin[@@flavor][@surface1];
@surface0: @catppuccin[@@flavor][@surface0];
@base: @catppuccin[@@flavor][@base];
@mantle: @catppuccin[@@flavor][@mantle];
@crust: @catppuccin[@@flavor][@crust];
@accent: @catppuccin[@@flavor][@@accentColor];
@red-filter: @catppuccin-filters[@@flavor][@red];
color-scheme: if(@flavor = latte, light, dark);
::selection {
background-color: fade(@accent, 30%);
}
input,
textarea {
background-color: transparent;
&:focus {
box-shadow: 0 0 0 2px @accent;
}
&::placeholder {
color: @subtext0 !important;
}
}
accent-color: @accent;
@npmGradient: linear-gradient(139deg, @peach, @maroon, @red, @pink);
--color-fg-default: @text;
--color-fg-muted: @subtext1;
--color-fg-subtle: @subtext0;
--color-fg-on-emphasis: @base;
--color-fg-brand: @accent;
--color-fg-accent: @blue;
--color-fg-success: @green;
--color-fg-attention: @yellow;
--color-fg-danger: @red;
--color-border-strong: @surface0;
--header-color: @text;
/* Used on deprecation confirmation page */
--wombat-red: @maroon;
--wombat-red-hover: @red;
--search-fg-muted: @subtext1;
--search-border: @surface0;
--search-bg-subtle: @surface0;
&,
main {
background-color: @base !important;
color: @text;
}
/* Primary background */
.bg-white,
._4ea0e50d {
background-color: @base;
}
/* Background layer background */
.bg-black-05,
._7eb68a55,
.e9998f88 {
background-color: @mantle;
}
/* Primary text */
.black,
.black-90,
.black-80,
a {
color: @text;
}
/* Secondary text */
.black-70,
.black-60,
.dim:focus,
.dim:hover {
color: @subtext0;
}
/* Inverse text */
.white {
color: @base;
}
/* Border colors */
.b--black-10,
.b--black-20 {
border-color: @surface0;
}
/* --- ARBITRARY --- */
/* Top loading bar */
div.fixed.top-0.left-0.z-999 {
background-color: @accent;
}
/* Magnifying glass icon (search box, discover packages) */
svg g[stroke="#777777"] {
stroke: @subtext0;
}
/* "Beta" pill */
.a17280e0 {
color: @green;
border-color: @green;
}
/* Green checkmark */
[fill="#107010"] {
fill: @green;
}
/* --- HEADER --- */
[data-test-id="notification-banner"] {
background-color: if(
@flavor = latte,
desaturate(lighten(@green, 30%), 5%),
desaturate(darken(@green, 5%), 5%)
);
border-color: @green;
#notification,
button[aria-label="Close notification"] {
color: if(@flavor = latte, @text, @base);
}
}
header {
border-bottom-color: @surface0;
/* Top bar gradient */
.e7070742 {
border-image: @npmGradient 3;
}
/* Heart icon */
._0edb515f {
color: @text;
}
/* Logo */
a[href="/"] > svg > path {
fill: @text;
}
/* Search box */
form#search {
/* Search button */
button[type="submit"] {
background-color: @subtext1;
}
/* Search input wrapper */
> div {
border-color: @surface0;
&:focus-within {
border-color: @subtext1;
}
/* Search input */
div:has(input[type="search"]) {
background-color: @mantle;
input[type="search"] {
color: @text;
&:focus {
box-shadow: none;
}
&::-webkit-search-cancel-button {
display: none;
}
}
}
/* Search results (floating box) */
div.list {
background-color: @base;
ul[aria-label="Search results"] li {
border-bottom-color: @surface0;
&:hover {
background-color: @surface1;
}
}
}
}
}
/* Profile picture navigation */
nav:has(> button[aria-label="Profile menu"]) {
> button {
/* Dropdown arrow */
img[alt="avatar"] {
border-color: @text;
+ div > svg {
fill: @text;
}
}
}
/* Popup */
> div > div {
border-color: @surface0;
/* Popup triangle */
&::after {
border-bottom-color: @base;
}
&::before {
border-bottom-color: @surface0;
}
/* Username */
h2 {
border-bottom-color: @surface1;
span {
color: @text;
}
}
/* Navigation options */
ul li a {
&:hover,
&:focus {
background-color: @crust;
}
/* Red "Add Organization" button */
&[href="/org/create"] {
border-color: @surface0;
color: @accent;
svg {
fill: @accent;
}
}
}
}
}
}
/* --- HOME PAGE --- */
._8c1ee087 {
background-image:
linear-gradient(
270deg,
fade(@red, 16%) 0%,
fade(@red, 56%) 18.45%,
fade(@red, 80%) 49.67%,
fade(@red, 56%) 82.52%,
fade(@red, 19%) 99.7%,
fade(@red, 0%) 99.71%,
fade(@red, 0%) 99.72%,
fade(@red, 16%) 99.73%
),
url("https://static-production.npmjs.com/abf53a31b2da4657a1a004ee9358551c.png");
a[href="/signup"] {
background-color: @yellow;
}
a[href="/products/pro"] {
background-color: @red;
border-color: @text;
}
}
article > section:nth-of-type(2) {
color: @text;
}
/* Popular libraries section */
#popular-libraries-header + hr {
border-color: @accent;
}
ul[aria-labelledby="popular-libraries-header"] {
li a {
border-bottom-color: @surface0;
}
}
/* Discover packages section */
#discover-packages-header + hr {
border-color: mix(@red, @yellow);
}
ul[aria-labelledby="discover-packages-header"] li {
a {
color: @text;
border-color: @surface0;
}
&:nth-of-type(6n+1):hover a {
color: @mauve;
border-bottom-color: @mauve;
}
&:nth-of-type(6n+2):hover a {
color: @green;
border-bottom-color: @green;
}
&:nth-of-type(6n+3):hover a {
color: @sky;
border-bottom-color: @sky;
}
&:nth-of-type(6n+4):hover a {
color: @red;
border-bottom-color: @red;
}
&:nth-of-type(6n+5):hover a {
color: @yellow;
border-bottom-color: @yellow;
}
&:nth-of-type(6n+6):hover a {
color: @pink;
border-bottom-color: @pink;
}
}
/* By the numbers section */
._8f26e3fd {
border-color: @yellow;
}
/* Recently updated packages section */
#recently-updated-packages-header + hr {
border-color: @accent;
}
/* --- PACKAGE PAGES --- */
/* Deprecation warning */
.bg-washed-red {
background-color: fade(@red, 30%);
code {
background-color: @mantle;
color: @text;
}
}
.red {
color: @red !important;
}
/* "public" text */
._813b53b2 {
color: @green;
}
/* TypeScript logo */
img[alt="TypeScript icon, indicating that this package has built-in type declarations"] {
@svg: escape(
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" xml:space="preserve"><path fill="@{blue}" d="M0 0h256v256H0z"/><path d="M150.5 200.5v27.6c4.5 2.3 9.8 4 15.9 5.2s12.6 1.7 19.4 1.7c6.6 0 12.9-.6 18.9-1.9s11.2-3.4 15.7-6.3 8-6.7 10.7-11.4q3.9-7.05 3.9-17.4c0-5-.7-9.4-2.2-13.2s-3.7-7.1-6.5-10.1c-2.8-2.9-6.2-5.6-10.1-7.9s-8.4-4.5-13.3-6.6c-3.6-1.5-6.9-2.9-9.8-4.4-2.9-1.4-5.3-2.8-7.3-4.3s-3.6-3-4.7-4.7-1.6-3.5-1.6-5.6q0-2.85 1.5-5.1c1.5-2.25 2.4-2.8 4.1-3.9 1.8-1.1 4-1.9 6.6-2.5s5.5-.9 8.6-.9c2.3 0 4.7.2 7.3.5s5.1.9 7.7 1.6 5.1 1.6 7.6 2.7c2.4 1.1 4.7 2.4 6.8 3.8v-25.8q-6.3-2.4-13.8-3.6c-7.5-1.2-10.7-1.2-17.1-1.2-6.6 0-12.8.7-18.7 2.1s-11 3.6-15.5 6.6-8 6.8-10.6 11.4-3.9 10.2-3.9 16.6c0 8.2 2.4 15.2 7.1 21.1 4.8 5.8 12 10.7 21.6 14.8 3.8 1.6 7.3 3.1 10.6 4.6s6.1 3 8.5 4.7 4.3 3.4 5.7 5.3 2.1 4.1 2.1 6.5c0 1.8-.4 3.4-1.3 5-.9 1.5-2.2 2.8-3.9 4s-3.9 2-6.6 2.6-5.7.9-9.2.9c-6 0-11.9-1.1-17.8-3.2-5.9-2-11.4-5.1-16.4-9.3m-46-68.8H140V109H41v22.7h35.3V233h28.1V131.7z" fill-rule="evenodd" clip-rule="evenodd" fill="@{base}"/></svg>'
);
content: url("data:image/svg+xml,@{svg}");
}
/* DefinitelyTyped logo */
img[alt="DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/bootstrap package"] {
@svg: escape(
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" xml:space="preserve"><path fill="@{blue}" d="M0 0h256v256H0z"/><path fill="@{base}" d="M6 6h244v244H6z"/><path fill="@{blue}" d="M41.8 111.5c8.6-1.6 19.9-2.5 31.8-2.5 19.7 0 32.6 4.2 42.6 13 10.8 9.4 17.6 24.5 17.6 46 0 23.4-7.3 39.5-17.3 49.5-11 10.7-27.6 15.8-48 15.8-12.2 0-20.8-.9-26.7-1.8zm23.6 99.7c2 .5 5.2.5 8.2.5 21.3.2 35.2-13.6 35.2-42.7.2-25.4-12.5-38.8-32.7-38.8-5.2 0-8.6.5-10.6 1.1v79.9zm104-76.5h-32.2v-22.8h92.3v22.8h-32.8V232h-27.3z"/></svg>'
);
content: url("data:image/svg+xml,@{svg}");
}
/* Navigation tabs */
#package-tab(@color) {
border-color: @color;
&:has(> a[aria-selected="false"]):hover,
&:has(> a[aria-selected="true"]) {
background-color: fade(@color, 20%);
}
a {
color: @color;
}
}
ul[aria-owns*="package-tab-"] {
li {
&:has(#package-tab-readme),
&:has(#package-tab-members) {
#package-tab(@yellow);
}
&:has(#package-tab-code),
&:has(#package-tab-admin),
&:has(#package-tab-packages) {
#package-tab(@red);
}
&:has(#package-tab-dependents),
&:has(#package-tab-billing) {
#package-tab(@mauve);
}
&:has(#package-tab-dependencies) {
#package-tab(@pink);
}
&:has(#package-tab-versions) {
#package-tab(@sapphire);
}
&:has(#package-tab-orgs),
&:has(#package-tab-teams) {
#package-tab(@green);
}
}
}
/* Sidebar icons */
svg:has(+ p > [aria-label="Copy install command line"]),
button[aria-label="Copy install command line"] svg path,
[aria-labelledby="repository repository-link"] svg g,
[aria-labelledby="homePage homePage-link"] svg path,
[aria-label="Showing weekly downloads"] svg {
fill: @text;
}
/* Copy install command box */
p:has(button[aria-label="Copy install command line"]) {
border-color: @surface0;
}
/* Weekly downloads chart */
div:has(> svg > [class^="sparkline--"]) {
border-bottom-color: fade(@accent, 20%);
svg {
stroke: @accent;
fill: fade(@accent, 20%);
}
}
/* Sidebar provenance popup */
button[aria-label="View more provenance details"] {
+ div > div > div {
background-color: @base;
border-color: @surface0;
&::after {
border-bottom-color: @base;
}
&::before {
border-bottom-color: @surface0;
}
> div {
div:nth-of-type(2) {
border-color: @surface0;
}
}
}
}
._1e07caeb {
color: @text;
}
._9666fddd,
._861fb12a,
._2160593e {
color: @subtext0;
}
/* Provenance icon */
.f97c6116 {
fill: @green;
}
/* Provenance section at bottom */
#provenance-details-header + div {
border-color: @surface0;
}
/* Sidebar text */
.c84e15be {
color: @subtext0;
}
/* Tab headings */
[id^="tabpanel-"] h2 {
color: @text;
}
/* File explorer tab */
#tabpanel-explore > div > div {
border-color: @surface0;
> div:has(h2),
div:has(+ pre) {
border-bottom-color: @surface0;
}
/* Back button inside file */
._450b46e9 {
@svg: escape(
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 125" fill="@{text}"><path d="M50.4 74.7 23.7 50l26.7-24.7-5.4-5.9L11.9 50 45 80.6z"/><path d="M82.6 19.4 49.6 50l33 30.6 5.5-5.9L61.4 50l26.7-24.7z"/></svg>'
);
content: url("data:image/svg+xml,@{svg}");
}
ul li {
border-bottom-color: @surface0;
&:hover {
background-color: @surface0;
}
img {
@folder: escape(
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 98 122.5" fill="@{subtext0}"><path d="M37.9 18.4H13v61.2h72V25H49zM79 73.6H19V44h60zM79 38H19V24.4h17.2L47.3 31H79z"/></svg>'
);
@file: escape(
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 125" fill="@{subtext0}"><path d="M82.2 10.7H38.7l-20.9 19v59.6h64.4zm-44.6 6.4v11.2H25.3zm40.6 68.2H21.8v-53h19.8V14.7h36.6z"/><path d="M34.3 44.7h31.4v4H34.3zm0 13.2h31.4v4H34.3zm0 13.1h31.4v4H34.3z"/></svg>'
);
&._1528cda6 {
content: url("data:image/svg+xml,@{folder}");
}
&._7ec1ed32 {
content: url("data:image/svg+xml,@{file}");
}
}
}
/* File paths/link */
button,
/* Loading spinner */
svg:has(> circle) {
color: @text !important;
}
div:has(+ pre) {
background-color: @mantle;
}
pre {
background-color: @base !important;
color: @text !important;
.react-syntax-highlighter-line-number {
color: @subtext1 !important;
}
[style="color: rgb(102, 102, 102);"] {
color: var(--color-prettylights-syntax-comment) !important;
}
[style="color: rgb(150, 152, 150);"] {
color: @overlay0 !important;
}
[style="color: rgb(0, 92, 197);"] {
color: var(--color-prettylights-syntax-constant) !important;
}
[style="color: rgb(215, 58, 73);"],
[style="color: rgb(0, 134, 179);"] {
color: var(--color-prettylights-syntax-keyword) !important;
}
[style="color: rgb(3, 47, 98);"] {
color: var(--color-prettylights-syntax-string) !important;
}
[style="color: rgb(111, 66, 193);"] {
color: var(--color-prettylights-syntax-entity) !important;
}
[style*="color: rgb(223, 80, 0);"] {
color: @peach !important;
}
[style*="color: rgb(99, 163, 92);"] {
color: @green !important;
}
.hljs-subst,
.hljs-built_in {
color: var(--color-prettylights-syntax-storage-modifier-import)
!important;
}
}
}
/* Versions tab */
#tabpanel-versions {
ul li[class] div {
border-bottom-color: @surface0;
}
}
/* Dependencies/dependents tab */
#tabpanel-dependencies,
#tabpanel-dependents {
ul a {
color: @red;
&:hover {
color: @text;
}
}
}
/* Readme tab */
#tabpanel-readme #readme {
color: @text;
a {
color: @accent;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: @text;
a,
svg {
color: @text;
fill: @text;
}
}
p,
li {
color: @subtext0;
}
strong {
color: @text;
}
pre,
code {
background-color: @mantle;
color: @text;
}
pre.editor.editor-colors {
.keyword,
.storage.type {
color: var(--color-prettylights-syntax-keyword);
font-weight: normal; // stylelint-disable-line property-disallowed-list
}
.string {
color: var(--color-prettylights-syntax-string);
}
.variable {
color: var(--color-prettylights-syntax-variable);
}
.entity,
.function {
color: var(--color-prettylights-syntax-entity);
}
.comment {
color: var(--color-prettylights-syntax-comment);
}
.storage.type.function {
color: var(--color-prettylights-syntax-keyword);
}
.punctuation.definition:not(.string) {
color: @text;
}
.constant {
color: var(--color-prettylights-syntax-constant);
}
}
h1,
h2 {
border-bottom-color: @surface1;
}
h4 {
border-bottom-color: @surface0;
}
blockquote {
background-color: lighten(@surface0, 2%);
border-left-color: @surface2;
}
table {
color: @text;
border-bottom-style: none;
td,
th {
background-color: @base;
border-color: @surface0;
}
}
}
/* Keyword links */
#user-content-keywords {
color: @text;
+ ul a {
color: @accent;
&:hover {
color: @text;
}
}
}
/* Share provenance feedback link */
#user-content-provenance a[href=" https://github.com/npm/feedback"] {
color: @text;
}
/* Settings */
div[role="listitem"],
div[role="radiogroup"] {
background: @base;
}
/* --- PROFILE PAGES --- */
.eaac77a6 {
color: @surface2;
}
._34da67ba {
@svg: escape(
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14.48 16.27"><path fill="@{overlay2}" d="M5.16 16.27v-2.4c-.31 0-.6.08-.89.1a2.61 2.61 0 0 1-2.77-1.66 2.65 2.65 0 0 0-1.14-1.42 1.2 1.2 0 0 1-.3-.26c-.06-.13-.06-.24.09-.28a1.5 1.5 0 0 1 .42 0 2 2 0 0 1 1.51 1 2.21 2.21 0 0 0 3 .93c.06 0 .15-.09.16-.14a2.5 2.5 0 0 1 .63-1.32c-.51-.11-1-.19-1.48-.32a4.13 4.13 0 0 1-2.83-2.15A6 6 0 0 1 1 6.08a4.27 4.27 0 0 1 1-3.16.37.37 0 0 0 0-.25A3.83 3.83 0 0 1 2 .52c.15-.55.2-.58.76-.47A6.7 6.7 0 0 1 4.92 1a.45.45 0 0 0 .34.07 9.7 9.7 0 0 1 5 0 .52.52 0 0 0 .33-.07c.49-.24 1-.54 1.46-.74A4.4 4.4 0 0 1 13.13 0a.27.27 0 0 1 .2.13 3.87 3.87 0 0 1 .15 2.4.44.44 0 0 0 .11.46 3.8 3.8 0 0 1 .75 1.5 6 6 0 0 1 0 2.38 4 4 0 0 1-2.19 3.2 6.7 6.7 0 0 1-1.23.46c-.41.11-.85.17-1.29.26a2.74 2.74 0 0 1 .67 2v3.41Z"/></svg>'
);
background-image: url("data:image/svg+xml,@{svg}");
}
._69ab2ca0 {
border-color: @surface0;
background-color: @mantle;
}
/* --- SETTINGS PAGES --- */
/* Headings */
._7fb5e603 h1 {
color: @text;
}
/* Left panel */
aside.e9998f88 {
box-shadow: none;
ul.c63ae7fc li:hover {
background-color: @crust;
}
/* Create organization button */
#organizationsHeader + a[href="/org/create"] {
color: @green;
border-color: @green;
&:hover {
color: @mantle;
background-color: @green;
}
}
}
/* Linked accounts & recovery option settings */
.b49405c7 {
color: @text;
}
/* Email and password settings */
p:has(
+ div
> a[href^="/settings/"][href$="/email"]
+ a[href^="/settings/"][href$="/password"]
),
/* Delete account */
p:has(+ a[href^="/settings/"][href$="/delete-account"]) {
color: @text;
}
/* Access tokens settings */
form#tokens {
table {
td {
span {
color: @subtext1;
&:hover {
color: @text;
}
}
code {
color: @subtext0;
}
}
+ div {
color: @text;
}
}
}
._305a9f55 ._038c0473 {
border-color: @accent;
background-color: fade(@accent, 20%);
}
button[aria-label^="Delete token ending in"] {
._305a9f55 ._038c0473 & {
border-color: @surface2;
}
&.b55db0e2:hover {
border-color: @red;
background-color: @red;
color: @base;
}
}
/* 2FA authentication page */
._75ce47e7 {
background-color: @base;
._71252860,
.d7eb966d {
color: @text;
}
[fill="#65C6C9"],
[fill="url(#paint1_linear_449_428)"],
[fill="url(#paint0_linear_110_3043)"] {
fill: @blue;
}
[fill="url(#paint2_linear_449_428)"],
[fill="url(#paint1_linear_110_3043)"] {
fill: @base;
}
&::before {
background-image: @npmGradient;
}
}
._320f7a67 {
background-color: @base;
&::before {
background-image: @npmGradient;
}
section {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.6);
}
div[role="radiogroup"] {
color: @text;
background-color: @surface0;
}
#gat-banner span {
color: @yellow;
}
}
/* Create organization page */
.acb78000::before {
background-image: @npmGradient;
}
/* Step 1: create an org */
.e99f3f5d {
color: @green;
}
img[src="https://static-production.npmjs.com/28dd82ec6e5fe3cfbb4d2c4ec492076b.svg"] {
@svg: escape(
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 38.36 38.36"><circle cx="19.18" cy="19.18" r="18.53" fill="none" stroke="@{green}" stroke-miterlimit="10" stroke-width="1.3"/><path d="M25.63 26.84h-4.46a.37.37 0 0 1-.37-.36v-6h-3v6a.36.36 0 0 1-.36.36h-4.51a.94.94 0 0 1-.93-.94V19a1.6 1.6 0 0 1-.38 0 .89.89 0 0 1-.74-.31A1.31 1.31 0 0 1 11 16.9l7.42-6.42a1.28 1.28 0 0 1 1.58-.05.2.2 0 0 1 .09.05l7.42 6.42a1.31 1.31 0 0 1 .14 1.82.86.86 0 0 1-.74.31 1.5 1.5 0 0 1-.37 0v6.87a.94.94 0 0 1-.91.94" fill="@{green}"/></svg>'
);
content: url("data:image/svg+xml,@{svg}");
}
/* Step 2: invite members */
img[src="https://static-production.npmjs.com/d6654c911c7cf2159948148754c95bb6.svg"] {
@svg: escape(
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 38.36 38.36"><circle cx="19.18" cy="19.18" r="18.53" fill="none" stroke="@{surface2}" stroke-miterlimit="10" stroke-width="1.3"/><path d="M25.67 20.87a4.95 4.95 0 1 0 4.94 4.94 5 5 0 0 0-4.94-4.94m0 9a4 4 0 1 1 4-4.05 4.06 4.06 0 0 1-4 4.04Z" fill="@{text}"/><path d="M28.2 25.41h-2v-2a.45.45 0 0 0-.9 0v2h-2a.45.45 0 0 0 0 .9h2v2a.45.45 0 0 0 .9 0v-2h2a.45.45 0 0 0 0-.9m-7.12-8.58A5 5 0 0 1 19.9 19a.48.48 0 0 0-.13.32v.86a.7.7 0 0 0 0 .14c.17.54.37.66 1.28 1.14a.45.45 0 0 0 .61-.19.44.44 0 0 0-.19-.6c-.69-.37-.77-.41-.82-.56v-.61a5.9 5.9 0 0 0 1.23-2.26 1.82 1.82 0 0 0 .33-2.44V13c0-2.41-1.5-3.8-4.11-3.8S14 10.62 14 13v1.78a1.8 1.8 0 0 0-.3 1.29 1.84 1.84 0 0 0 .63 1.15 5.9 5.9 0 0 0 1.23 2.26v.59c-.14.24-1 1-5.8 2.87a1.07 1.07 0 0 0-.68 1v2.15a1.07 1.07 0 0 0 1.06 1.07h9.23a.45.45 0 0 0 0-.9h-9.23a.17.17 0 0 1-.16-.17v-2.16a.15.15 0 0 1 .1-.15c5.28-2 6.18-2.9 6.36-3.49a.3.3 0 0 0 0-.13v-.86a.44.44 0 0 0-.13-.32 5.1 5.1 0 0 1-1.18-2.15.44.44 0 0 0-.17-.25.93.93 0 0 1-.18-1.36.5.5 0 0 0 .1-.29V13c0-1.87 1.14-2.9 3.22-2.9s3.21 1 3.21 2.9v1.93a.46.46 0 0 0 .11.29 1 1 0 0 1 .21.73.94.94 0 0 1-.39.63.45.45 0 0 0-.16.25" fill="@{text}"/></svg>'
);
content: url("data:image/svg+xml,@{svg}");
}
div:has(> form[action="/org/create"]) {
color: @text;
&,
+ div {
border-color: @surface0;
}
}
/* Billing information page */
.bg-washed-green {
background-color: fade(
lighten(@teal, 10%),
if(@flavor = latte, 50%, 100%)
);
}
.b--light-green {
border-color: @teal;
}
/* Pricing page */
.dark-gray {
color: @text !important;
}
.light-silver {
color: @subtext1;
}
.npm-red {
color: @accent;
}
.a11y-light-gray,
.bg-gray {
background-color: @subtext0 !important;
}
.bg-dark-gray {
background-color: @text;
}
.bg-light-gray,
.bg-near-white {
background-color: @surface0 !important;
}
.npm-bg-hero,
.npm-bg-teams {
background: none;
> .white {
color: @text;
}
}
.npm-bg-gradient {
background-image: @npmGradient;
}
.npm-rainbow-circle {
background-image:
linear-gradient(@crust, @crust),
@npmGradient;
}
.npm-btn-red {
background-color: @red;
border-bottom-color: @yellow;
}
a[href="/products/teams"].npm-title {
background-color: @red;
color: @crust;
border-color: @text;
}
ul.featureComparisonList img[alt="feature included"] {
filter: @red-filter;
}
/* --- GENERIC --- */
/* Buttons/button links */
._24a1e9c7 {
background-image: none;
background-color: @surface0;
color: @text;
border-color: @surface1;
&:not([disabled]):hover {
background-color: @surface1;
}
&[disabled] {
background-color: @mantle;
color: @subtext0;
}
/* Danger */
&._4a3f8f21 {
& when (@flavor = latte) {
background-color: lighten(@red, 30%);
&:hover {
background-color: lighten(@red, 25%);
}
}
& when not(@flavor = latte) {
background-color: @red;
color: @surface1;
&:hover {
background-color: lighten(@red, 5%);
}
}
}
/* Success */
&.c37751f6 {
& when (@flavor = latte) {
background-color: lighten(@green, 30%);
&:hover {
background-color: lighten(@green, 25%);
}
}
& when not(@flavor = latte) {
background-color: @green;
color: @surface1;
&:hover {
background-color: lighten(@green, 5%);
}
}
}
}
/* Signup form */
#signup {
/* Logged out signup button in header */
&[href="/signup"] {
border-color: @surface0;
}
#signup_email_error_message,
#signup_password_error_message {
color: @red;
}
fieldset {
color: @text;
}
}
button[name="show-hide-password"] {
background-color: transparent;
color: @text;
&:hover {
background-color: @mantle;
}
&::before {
background-color: @surface0;
}
}
/* Dropdowns */
details ul[class*="Dropdown__DropdownMenu"] {
background-color: @base;
border-color: @surface0;
li a:hover {
background-color: @mantle !important;
color: @text !important;
}
}
/* Select menus */
select {
background-color: @surface0;
border-color: @surface2;
color: @text;
}
/* --- SEARCH RESULTS --- */
nav[aria-label="Pagination Navigation"] {
div > a {
background-color: @base;
border-color: @surface0;
&:hover {
background-color: @mantle;
}
}
}
#pkg-list-exact-match {
color: @base;
background-color: @accent;
}
/* Username links */
a[aria-label^="publisher"]:hover {
color: @accent;
}
/* --- FOOTER --- */
footer {
h3 {
color: @text;
}
ul a:hover {
color: @accent;
}
a[href="https://github.com/npm"] svg {
> polygon {
fill: @base;
}
> rect {
fill: @text;
}
}
a[href="https://github.com"] svg {
fill: @text;
}
&::after {
background-image: @npmGradient;
}
}
--color-prettylights-syntax-comment: @overlay2;
--color-prettylights-syntax-constant: @teal;
--color-prettylights-syntax-entity: @blue;
--color-prettylights-syntax-storage-modifier-import: @peach;
--color-prettylights-syntax-entity-tag: @teal;
--color-prettylights-syntax-keyword: @mauve;
--color-prettylights-syntax-string: @green;
--color-prettylights-syntax-variable: @peach;
--color-prettylights-syntax-invalid-illegal-text: @red;
--color-prettylights-syntax-invalid-illegal-bg: fade(@red, 15%);
--color-prettylights-syntax-markup-heading: @teal;
--color-prettylights-syntax-markup-italic: @yellow;
--color-prettylights-syntax-markup-bold: @yellow;
--color-prettylights-syntax-markup-deleted-text: @text;
--color-prettylights-syntax-markup-deleted-bg: fade(@red, 40%);
--color-prettylights-syntax-markup-inserted-text: @text;
--color-prettylights-syntax-markup-inserted-bg: fade(@green, 40%);
--color-prettylights-syntax-markup-changed-text: @text;
--color-prettylights-syntax-markup-changed-bg: fade(@yellow, 40%);
--color-prettylights-syntax-markup-ignored-text: @text;
/* stylelint-disable declaration-block-single-line-max-declarations */
/* deno-fmt-ignore */
div.highlight pre {.pl-mb,.pl-mdr,.pl-c{color:var(--color-prettylights-syntax-comment)}.pl-c1,.pl-s .pl-v{color:var(--color-prettylights-syntax-constant)}.pl-e,.pl-en{color:var(--color-prettylights-syntax-entity)}.pl-s .pl-s1,.pl-smi{color:var(--color-prettylights-syntax-storage-modifier-import)}.pl-ent{color:var(--color-prettylights-syntax-entity-tag)}.pl-k{color:var(--color-prettylights-syntax-keyword)}.pl-pds,.pl-s,.pl-s .pl-pse .pl-s1,.pl-sr,.pl-sr .pl-cce,.pl-sr .pl-sra,.pl-sr .pl-sre{color:var(--color-prettylights-syntax-string)}.pl-smw,.pl-v{color:var(--color-prettylights-syntax-variable)}.pl-bu{color:var(--color-prettylights-syntax-brackethighlighter-unmatched)}.pl-ii{color:var(--color-prettylights-syntax-invalid-illegal-text);background-color:var(--color-prettylights-syntax-invalid-illegal-bg)}.pl-c2{color:var(--color-prettylights-syntax-carriage-return-text);background-color:var(--color-prettylights-syntax-carriage-return-bg)}.pl-sr .pl-cce{color:var(--color-prettylights-syntax-string-regexp)}.pl-ml{color:var(--color-prettylights-syntax-markup-list)}.pl-mh,.pl-mh .pl-en,.pl-ms{color:var(--color-prettylights-syntax-markup-heading)}.pl-mi{color:var(--color-prettylights-syntax-markup-italic)}.pl-mb{color:var(--color-prettylights-syntax-markup-bold)}.pl-md{color:var(--color-prettylights-syntax-markup-deleted-text);background-color:var(--color-prettylights-syntax-markup-deleted-bg)}.pl-mi1{color:var(--color-prettylights-syntax-markup-inserted-text);background-color:var(--color-prettylights-syntax-markup-inserted-bg)}.pl-mc{color:var(--color-prettylights-syntax-markup-changed-text);background-color:var(--color-prettylights-syntax-markup-changed-bg)}.pl-mi2{color:var(--color-prettylights-syntax-markup-ignored-text);background-color:var(--color-prettylights-syntax-markup-ignored-bg)}.pl-mdr{color:var(--color-prettylights-syntax-meta-diff-range)}.pl-ba{color:var(--color-prettylights-syntax-brackethighlighter-angle)}.pl-sg{color:var(--color-prettylights-syntax-sublimelinter-gutter-mark)}.pl-corl{text-decoration:underline;color:var(--color-prettylights-syntax-constant-other-reference-link)}}
/* stylelint-enable declaration-block-single-line-max-declarations */
}
}
/* deno-fmt-ignore */
@catppuccin: {
@latte: { @rosewater: #dc8a78; @flamingo: #dd7878; @pink: #ea76cb; @mauve: #8839ef; @red: #d20f39; @red_filter: brightness(0) saturate(100%) invert(13%) sepia(93%) saturate(6590%) hue-rotate(343deg) brightness(85%) contrast(92%); @maroon: #e64553; @peach: #fe640b; @yellow: #df8e1d; @green: #40a02b; @teal: #179299; @sky: #04a5e5; @sapphire: #209fb5; @blue: #1e66f5; @lavender: #7287fd; @text: #4c4f69; @subtext1: #5c5f77; @subtext0: #6c6f85; @overlay2: #7c7f93; @overlay1: #8c8fa1; @overlay0: #9ca0b0; @surface2: #acb0be; @surface1: #bcc0cc; @surface0: #ccd0da; @base: #eff1f5; @mantle: #e6e9ef; @crust: #dce0e8; };
@frappe: { @rosewater: #f2d5cf; @flamingo: #eebebe; @pink: #f4b8e4; @mauve: #ca9ee6; @red: #e78284; @red_filter: brightness(0) saturate(100%) invert(79%) sepia(26%) saturate(3775%) hue-rotate(304deg) brightness(96%) contrast(88%); @maroon: #ea999c; @peach: #ef9f76; @yellow: #e5c890; @green: #a6d189; @teal: #81c8be; @sky: #99d1db; @sapphire: #85c1dc; @blue: #8caaee; @lavender: #babbf1; @text: #c6d0f5; @subtext1: #b5bfe2; @subtext0: #a5adce; @overlay2: #949cbb; @overlay1: #838ba7; @overlay0: #737994; @surface2: #626880; @surface1: #51576d; @surface0: #414559; @base: #303446; @mantle: #292c3c; @crust: #232634; };
@macchiato: { @rosewater: #f4dbd6; @flamingo: #f0c6c6; @pink: #f5bde6; @mauve: #c6a0f6; @red: #ed8796; @red_filter: brightness(0) saturate(100%) invert(62%) sepia(22%) saturate(880%) hue-rotate(302deg) brightness(98%) contrast(90%); @maroon: #ee99a0; @peach: #f5a97f; @yellow: #eed49f; @green: #a6da95; @teal: #8bd5ca; @sky: #91d7e3; @sapphire: #7dc4e4; @blue: #8aadf4; @lavender: #b7bdf8; @text: #cad3f5; @subtext1: #b8c0e0; @subtext0: #a5adcb; @overlay2: #939ab7; @overlay1: #8087a2; @overlay0: #6e738d; @surface2: #5b6078; @surface1: #494d64; @surface0: #363a4f; @base: #24273a; @mantle: #1e2030; @crust: #181926; };
@mocha: { @rosewater: #f5e0dc; @flamingo: #f2cdcd; @pink: #f5c2e7; @mauve: #cba6f7; @red: #f38ba8; @red_filter: brightness(0) saturate(100%) invert(87%) sepia(37%) saturate(4988%) hue-rotate(296deg) brightness(105%) contrast(91%); @maroon: #eba0ac; @peach: #fab387; @yellow: #f9e2af; @green: #a6e3a1; @teal: #94e2d5; @sky: #89dceb; @sapphire: #74c7ec; @blue: #89b4fa; @lavender: #b4befe; @text: #cdd6f4; @subtext1: #bac2de; @subtext0: #a6adc8; @overlay2: #9399b2; @overlay1: #7f849c; @overlay0: #6c7086; @surface2: #585b70; @surface1: #45475a; @surface0: #313244; @base: #1e1e2e; @mantle: #181825; @crust: #11111b; };
};
/* deno-fmt-ignore */
@catppuccin-filters: {
@latte: { @rosewater: brightness(0) saturate(100%) invert(65%) sepia(18%) saturate(1048%) hue-rotate(323deg) brightness(92%) contrast(86%); @flamingo: brightness(0) saturate(100%) invert(84%) sepia(44%) saturate(4533%) hue-rotate(310deg) brightness(98%) contrast(75%); @pink: brightness(0) saturate(100%) invert(60%) sepia(32%) saturate(775%) hue-rotate(266deg) brightness(93%) contrast(97%); @mauve: brightness(0) saturate(100%) invert(26%) sepia(59%) saturate(3315%) hue-rotate(255deg) brightness(94%) contrast(100%); @red: brightness(0) saturate(100%) invert(16%) sepia(78%) saturate(7275%) hue-rotate(342deg) brightness(84%) contrast(94%); @maroon: brightness(0) saturate(100%) invert(31%) sepia(56%) saturate(2395%) hue-rotate(331deg) brightness(99%) contrast(82%); @peach: brightness(0) saturate(100%) invert(38%) sepia(81%) saturate(1292%) hue-rotate(356deg) brightness(103%) contrast(99%); @yellow: brightness(0) saturate(100%) invert(74%) sepia(47%) saturate(4570%) hue-rotate(354deg) brightness(95%) contrast(83%); @green: brightness(0) saturate(100%) invert(51%) sepia(25%) saturate(4134%) hue-rotate(76deg) brightness(95%) contrast(66%); @teal: brightness(0) saturate(100%) invert(41%) sepia(45%) saturate(1101%) hue-rotate(139deg) brightness(100%) contrast(82%); @sky: brightness(0) saturate(100%) invert(47%) sepia(76%) saturate(2427%) hue-rotate(166deg) brightness(99%) contrast(97%); @sapphire: brightness(0) saturate(100%) invert(52%) sepia(41%) saturate(6982%) hue-rotate(160deg) brightness(102%) contrast(75%); @blue: brightness(0) saturate(100%) invert(30%) sepia(80%) saturate(1850%) hue-rotate(209deg) brightness(94%) contrast(105%); @lavender: brightness(0) saturate(100%) invert(48%) sepia(61%) saturate(538%) hue-rotate(194deg) brightness(102%) contrast(98%); @text: brightness(0) saturate(100%) invert(30%) sepia(10%) saturate(1259%) hue-rotate(196deg) brightness(97%) contrast(91%); @subtext1: brightness(0) saturate(100%) invert(36%) sepia(10%) saturate(890%) hue-rotate(196deg) brightness(98%) contrast(90%); @subtext0: brightness(0) saturate(100%) invert(47%) sepia(6%) saturate(1263%) hue-rotate(195deg) brightness(90%) contrast(81%); @overlay2: brightness(0) saturate(100%) invert(59%) sepia(7%) saturate(825%) hue-rotate(195deg) brightness(83%) contrast(91%); @overlay1: brightness(0) saturate(100%) invert(59%) sepia(14%) saturate(333%) hue-rotate(194deg) brightness(95%) contrast(89%); @overlay0: brightness(0) saturate(100%) invert(85%) sepia(7%) saturate(595%) hue-rotate(191deg) brightness(77%) contrast(81%); @surface2: brightness(0) saturate(100%) invert(86%) sepia(6%) saturate(482%) hue-rotate(189deg) brightness(82%) contrast(88%); @surface1: brightness(0) saturate(100%) invert(85%) sepia(8%) saturate(281%) hue-rotate(187deg) brightness(92%) contrast(88%); @surface0: brightness(0) saturate(100%) invert(96%) sepia(1%) saturate(5123%) hue-rotate(185deg) brightness(93%) contrast(83%); @base: brightness(0) saturate(100%) invert(89%) sepia(5%) saturate(140%) hue-rotate(182deg) brightness(109%) contrast(94%); @mantle: brightness(0) saturate(100%) invert(93%) sepia(19%) saturate(55%) hue-rotate(182deg) brightness(98%) contrast(92%); @crust: brightness(0) saturate(100%) invert(91%) sepia(1%) saturate(4489%) hue-rotate(196deg) brightness(106%) contrast(82%); };
@frappe: { @rosewater: brightness(0) saturate(100%) invert(90%) sepia(6%) saturate(734%) hue-rotate(321deg) brightness(95%) contrast(99%); @flamingo: brightness(0) saturate(100%) invert(88%) sepia(52%) saturate(817%) hue-rotate(293deg) brightness(113%) contrast(84%); @pink: brightness(0) saturate(100%) invert(76%) sepia(15%) saturate(844%) hue-rotate(280deg) brightness(107%) contrast(91%); @mauve: brightness(0) saturate(100%) invert(71%) sepia(25%) saturate(725%) hue-rotate(225deg) brightness(94%) contrast(91%); @red: brightness(0) saturate(100%) invert(67%) sepia(3%) saturate(7209%) hue-rotate(305deg) brightness(91%) contrast(99%); @maroon: brightness(0) saturate(100%) invert(61%) sepia(14%) saturate(957%) hue-rotate(307deg) brightness(109%) contrast(90%); @peach: brightness(0) saturate(100%) invert(68%) sepia(28%) saturate(662%) hue-rotate(335deg) brightness(96%) contrast(94%); @yellow: brightness(0) saturate(100%) invert(94%) sepia(88%) saturate(684%) hue-rotate(309deg) brightness(105%) contrast(80%); @green: brightness(0) saturate(100%) invert(89%) sepia(23%) saturate(582%) hue-rotate(42deg) brightness(87%) contrast(89%); @teal: brightness(0) saturate(100%) invert(91%) sepia(13%) saturate(986%) hue-rotate(110deg) brightness(85%) contrast(81%); @sky: brightness(0) saturate(100%) invert(75%) sepia(15%) saturate(623%) hue-rotate(141deg) brightness(109%) contrast(81%); @sapphire: brightness(0) saturate(100%) invert(77%) sepia(20%) saturate(730%) hue-rotate(157deg) brightness(97%) contrast(76%); @blue: brightness(0) saturate(100%) invert(68%) sepia(16%) saturate(1070%) hue-rotate(185deg) brightness(96%) contrast(95%); @lavender: brightness(0) saturate(100%) invert(75%) sepia(20%) saturate(626%) hue-rotate(201deg) brightness(101%) contrast(89%); @text: brightness(0) saturate(100%) invert(83%) sepia(12%) saturate(582%) hue-rotate(191deg) brightness(98%) contrast(96%); @subtext1: brightness(0) saturate(100%) invert(80%) sepia(18%) saturate(411%) hue-rotate(190deg) brightness(96%) contrast(84%); @subtext0: brightness(0) saturate(100%) invert(82%) sepia(6%) saturate(1287%) hue-rotate(192deg) brightness(86%) contrast(85%); @overlay2: brightness(0) saturate(100%) invert(65%) sepia(36%) saturate(230%) hue-rotate(190deg) brightness(92%) contrast(82%); @overlay1: brightness(0) saturate(100%) invert(55%) sepia(12%) saturate(638%) hue-rotate(189deg) brightness(98%) contrast(87%); @overlay0: brightness(0) saturate(100%) invert(49%) sepia(13%) saturate(662%) hue-rotate(192deg) brightness(94%) contrast(84%); @surface2: brightness(0) saturate(100%) invert(41%) sepia(20%) saturate(469%) hue-rotate(191deg) brightness(93%) contrast(86%); @surface1: brightness(0) saturate(100%) invert(34%) sepia(14%) saturate(771%) hue-rotate(190deg) brightness(89%) contrast(85%); @surface0: brightness(0) saturate(100%) invert(28%) sepia(7%) saturate(1468%) hue-rotate(193deg) brightness(92%) contrast(95%); @base: brightness(0) saturate(100%) invert(20%) sepia(17%) saturate(747%) hue-rotate(192deg) brightness(96%) contrast(97%); @mantle: brightness(0) saturate(100%) invert(8%) sepia(7%) saturate(7271%) hue-rotate(198deg) brightness(88%) contrast(75%); @crust: brightness(0) saturate(100%) invert(7%) sepia(7%) saturate(7415%) hue-rotate(197deg) brightness(86%) contrast(79%); };
@macchiato: { @rosewater: brightness(0) saturate(100%) invert(88%) sepia(13%) saturate(322%) hue-rotate(321deg) brightness(102%) contrast(91%); @flamingo: brightness(0) saturate(100%) invert(82%) sepia(3%) saturate(3070%) hue-rotate(314deg) brightness(107%) contrast(88%); @pink: brightness(0) saturate(100%) invert(80%) sepia(23%) saturate(509%) hue-rotate(280deg) brightness(102%) contrast(92%); @mauve: brightness(0) saturate(100%) invert(65%) sepia(18%) saturate(903%) hue-rotate(222deg) brightness(104%) contrast(93%); @red: brightness(0) saturate(100%) invert(61%) sepia(19%) saturate(1541%) hue-rotate(305deg) brightness(110%) contrast(86%); @maroon: brightness(0) saturate(100%) invert(71%) sepia(10%) saturate(1331%) hue-rotate(306deg) brightness(93%) contrast(101%); @peach: brightness(0) saturate(100%) invert(73%) sepia(13%) saturate(1676%) hue-rotate(330deg) brightness(103%) contrast(92%); @yellow: brightness(0) saturate(100%) invert(87%) sepia(89%) saturate(321%) hue-rotate(314deg) brightness(101%) contrast(87%); @green: brightness(0) saturate(100%) invert(93%) sepia(12%) saturate(1128%) hue-rotate(48deg) brightness(92%) contrast(85%); @teal: brightness(0) saturate(100%) invert(92%) sepia(10%) saturate(1176%) hue-rotate(110deg) brightness(87%) contrast(90%); @sky: brightness(0) saturate(100%) invert(78%) sepia(57%) saturate(230%) hue-rotate(142deg) brightness(96%) contrast(84%); @sapphire: brightness(0) saturate(100%) invert(74%) sepia(35%) saturate(438%) hue-rotate(156deg) brightness(92%) contrast(93%); @blue: brightness(0) saturate(100%) invert(67%) sepia(17%) saturate(1007%) hue-rotate(183deg) brightness(99%) contrast(94%); @lavender: brightness(0) saturate(100%) invert(74%) sepia(6%) saturate(2559%) hue-rotate(198deg) brightness(103%) contrast(94%); @text: brightness(0) saturate(100%) invert(81%) sepia(9%) saturate(726%) hue-rotate(192deg) brightness(104%) contrast(92%); @subtext1: brightness(0) saturate(100%) invert(84%) sepia(5%) saturate(1453%) hue-rotate(193deg) brightness(94%) contrast(86%); @subtext0: brightness(0) saturate(100%) invert(75%) sepia(18%) saturate(361%) hue-rotate(190deg) brightness(91%) contrast(86%); @overlay2: brightness(0) saturate(100%) invert(67%) sepia(9%) saturate(814%) hue-rotate(191deg) brightness(92%) contrast(88%); @overlay1: brightness(0) saturate(100%) invert(49%) sepia(38%) saturate(203%) hue-rotate(190deg) brightness(101%) contrast(93%); @overlay0: brightness(0) saturate(100%) invert(46%) sepia(16%) saturate(552%) hue-rotate(193deg) brightness(93%) contrast(84%); @surface2: brightness(0) saturate(100%) invert(34%) sepia(16%) saturate(611%) hue-rotate(192deg) brightness(101%) contrast(87%); @surface1: brightness(0) saturate(100%) invert(30%) sepia(11%) saturate(1085%) hue-rotate(194deg) brightness(92%) contrast(89%); @surface0: brightness(0) saturate(100%) invert(18%) sepia(21%) saturate(880%) hue-rotate(193deg) brightness(97%) contrast(84%); @base: brightness(0) saturate(100%) invert(12%) sepia(42%) saturate(570%) hue-rotate(194deg) brightness(90%) contrast(90%); @mantle: brightness(0) saturate(100%) invert(6%) sepia(6%) saturate(7499%) hue-rotate(200deg) brightness(93%) contrast(85%); @crust: brightness(0) saturate(100%) invert(5%) sepia(8%) saturate(5346%) hue-rotate(202deg) brightness(98%) contrast(88%); };
@mocha: { @rosewater: brightness(0) saturate(100%) invert(92%) sepia(5%) saturate(704%) hue-rotate(320deg) brightness(99%) contrast(93%); @flamingo: brightness(0) saturate(100%) invert(81%) sepia(5%) saturate(987%) hue-rotate(315deg) brightness(107%) contrast(90%); @pink: brightness(0) saturate(100%) invert(86%) sepia(11%) saturate(1177%) hue-rotate(283deg) brightness(101%) contrast(92%); @mauve: brightness(0) saturate(100%) invert(65%) sepia(58%) saturate(255%) hue-rotate(224deg) brightness(96%) contrast(102%); @red: brightness(0) saturate(100%) invert(61%) sepia(19%) saturate(997%) hue-rotate(294deg) brightness(104%) contrast(91%); @maroon: brightness(0) saturate(100%) invert(66%) sepia(16%) saturate(1301%) hue-rotate(306deg) brightness(116%) contrast(84%); @peach: brightness(0) saturate(100%) invert(68%) sepia(57%) saturate(278%) hue-rotate(338deg) brightness(98%) contrast(101%); @yellow: brightness(0) saturate(100%) invert(90%) sepia(70%) saturate(380%) hue-rotate(313deg) brightness(102%) contrast(95%); @green: brightness(0) saturate(100%) invert(88%) sepia(6%) saturate(2015%) hue-rotate(63deg) brightness(104%) contrast(78%); @teal: brightness(0) saturate(100%) invert(92%) sepia(12%) saturate(991%) hue-rotate(108deg) brightness(93%) contrast(90%); @sky: brightness(0) saturate(100%) invert(84%) sepia(21%) saturate(1302%) hue-rotate(164deg) brightness(106%) contrast(84%); @sapphire: brightness(0) saturate(100%) invert(74%) sepia(20%) saturate(876%) hue-rotate(156deg) brightness(96%) contrast(93%); @blue: brightness(0) saturate(100%) invert(68%) sepia(18%) saturate(951%) hue-rotate(180deg) brightness(98%) contrast(100%); @lavender: brightness(0) saturate(100%) invert(73%) sepia(7%) saturate(1670%) hue-rotate(195deg) brightness(102%) contrast(99%); @text: brightness(0) saturate(100%) invert(86%) sepia(6%) saturate(879%) hue-rotate(190deg) brightness(100%) contrast(93%); @subtext1: brightness(0) saturate(100%) invert(84%) sepia(19%) saturate(381%) hue-rotate(193deg) brightness(91%) contrast(89%); @subtext0: brightness(0) saturate(100%) invert(84%) sepia(9%) saturate(767%) hue-rotate(192deg) brightness(84%) contrast(84%); @overlay2: brightness(0) saturate(100%) invert(63%) sepia(15%) saturate(428%) hue-rotate(191deg) brightness(96%) contrast(84%); @overlay1: brightness(0) saturate(100%) invert(56%) sepia(15%) saturate(455%) hue-rotate(192deg) brightness(90%) contrast(88%); @overlay0: brightness(0) saturate(100%) invert(44%) sepia(6%) saturate(1275%) hue-rotate(194deg) brightness(97%) contrast(88%); @surface2: brightness(0) saturate(100%) invert(34%) sepia(8%) saturate(1015%) hue-rotate(195deg) brightness(99%) contrast(89%); @surface1: brightness(0) saturate(100%) invert(25%) sepia(6%) saturate(1950%) hue-rotate(197deg) brightness(99%) contrast(86%); @surface0: brightness(0) saturate(100%) invert(19%) sepia(5%) saturate(2844%) hue-rotate(199deg) brightness(91%) contrast(93%); @base: brightness(0) saturate(100%) invert(7%) sepia(4%) saturate(7496%) hue-rotate(202deg) brightness(93%) contrast(87%); @mantle: brightness(0) saturate(100%) invert(6%) sepia(4%) saturate(7465%) hue-rotate(202deg) brightness(95%) contrast(90%); @crust: brightness(0) saturate(100%) invert(3%) sepia(13%) saturate(6863%) hue-rotate(220deg) brightness(95%) contrast(91%); };
};