/* ==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/keonly/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: #f4f4f4; @subtext1: #e0e0e0; @subtext0: #c6c6c6; @overlay2: #a8a8a8; @overlay1: #8d8d8d; @overlay0: #6f6f6f; @surface2: #525252; @surface1: #393939; @surface0: #262626; @base: #161616; @mantle: #0b0b0b; @crust: #000000; };
};

/* 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%); };
};