npm Catppuccin by Iridescent-cdu

/* ==UserStyle==
@name npm Catppuccin
@namespace github.com/catppuccin/userstyles/styles/npm
@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/npm
@version 0.0.11
@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") {
  @media (prefers-color-scheme: light) {
    :root {
      #catppuccin(@lightFlavor, @accentColor);
    }
  }
  @media (prefers-color-scheme: dark) {
    :root {
      #catppuccin(@darkFlavor, @accentColor);
    }
  }

  #catppuccin(@lookup, @accent) {
    @rosewater: @catppuccin[@@lookup][@rosewater];
    @flamingo: @catppuccin[@@lookup][@flamingo];
    @pink: @catppuccin[@@lookup][@pink];
    @mauve: @catppuccin[@@lookup][@mauve];
    @red: @catppuccin[@@lookup][@red];
    @maroon: @catppuccin[@@lookup][@maroon];
    @peach: @catppuccin[@@lookup][@peach];
    @yellow: @catppuccin[@@lookup][@yellow];
    @green: @catppuccin[@@lookup][@green];
    @teal: @catppuccin[@@lookup][@teal];
    @sky: @catppuccin[@@lookup][@sky];
    @sapphire: @catppuccin[@@lookup][@sapphire];
    @blue: @catppuccin[@@lookup][@blue];
    @lavender: @catppuccin[@@lookup][@lavender];
    @text: @catppuccin[@@lookup][@text];
    @subtext1: @catppuccin[@@lookup][@subtext1];
    @subtext0: @catppuccin[@@lookup][@subtext0];
    @overlay2: @catppuccin[@@lookup][@overlay2];
    @overlay1: @catppuccin[@@lookup][@overlay1];
    @overlay0: @catppuccin[@@lookup][@overlay0];
    @surface2: @catppuccin[@@lookup][@surface2];
    @surface1: @catppuccin[@@lookup][@surface1];
    @surface0: @catppuccin[@@lookup][@surface0];
    @base: @catppuccin[@@lookup][@base];
    @mantle: @catppuccin[@@lookup][@mantle];
    @crust: @catppuccin[@@lookup][@crust];
    @accent-color: @catppuccin[@@lookup][@@accent];

    @red-filter: @catppuccin[@@lookup][@red_filter];

    color-scheme: if(@lookup = latte, light, dark);
    accent-color: @accent-color;

    ::selection {
      background-color: fade(@accent-color, 30%);
    }

    input,
    textarea {
      background-color: transparent;

      &:focus {
        box-shadow: 0 0 0 2px @accent-color;
      }

      &::placeholder {
        color: @subtext0 !important;
      }
    }

    @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: @red;
    --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;

    &,
    main {
      background-color: @base !important;
      color: @text;
    }

    /* Primary background */
    .bg-white,
    ._4ea0e50d {
      background-color: @base;
    }

    /* Background layer background */
    ._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: @red;
    }

    /* 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(
        @lookup = latte,
        desaturate(lighten(@green, 30%), 5%),
        desaturate(darken(@green, 5%), 5%)
      );
      border-color: @green;

      #notification,
      button[aria-label="Close notification"] {
        color: if(@lookup = 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 {
        button[type="submit"] {
          background-color: @subtext1;
        }

        > div {
          border-color: @crust;

          &:focus-within {
            border-color: @subtext1;
          }

          > div {
            background-color: @crust;

            input[type="search"] {
              color: @text;

              &:focus {
                box-shadow: none;
              }

              &::-webkit-search-cancel-button {
                display: none;
              }
            }
          }

          /* Floating live results */
          ul li {
            border-bottom-color: @surface0;
            color: @text;
          }
        }
      }

      /* 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: @red;
              svg {
                fill: @red;
              }
            }
          }
        }
      }
    }

    /* --- 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: @red;
    }
    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: @red;
    }

    /* --- 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....