catppuccin.user.less

/* ==UserStyle==
@name Quizlet Catppuccin
@namespace github.com/catppuccin/userstyles/styles/quizlet
@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/quizlet
@version 2024.12.31
@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/quizlet/catppuccin.user.less
@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aquizlet
@description Soothing pastel theme for Quizlet
@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("quizlet.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];

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

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

    input,
    textarea {
      &::placeholder {
        color: @subtext0 !important;
      }
    }

    :root body {
      color: @text;
      background: @base;
    }

    .DashboardLayout {
      background-color: @base !important;
    }

    .TopNavigation {
      background-color: @crust;
      // border-bottom: none;
    }

    .s19dmjr1 {
      border-color: none;
      background: @surface0;
    }

    .NavigationTab--span {
      color: @text !important;
    }

    .s13oqxd2.NavigationTab:not(.no-highlight::after) {
      background: @overlay2;
    }

    .e1bxx0ta::after:hover {
      background: @overlay2;
    }

    .hri9878 {
      color: @subtext1;
    }

    .AssemblyCard {
      background-color: @mantle;
      border-color: @mantle;
      box-shadow: 0 0.125rem 0.5rem 0 @crust;
    }
    h5 {
      color: @text;
    }

    .CourseOverviewPreviewCard-recommendationTitle {
      color: @text;
    }

    .UISwitch-input:hover:not(:disabled) ~ .UISwitch-label {
      color: @yellow;
    }

    .UIToggle-optionInput:hover:not(:disabled) ~ .UIToggle-optionLabel {
      color: @yellow;
    }

    .UIToggle-optionInput:checked:not(:disabled) ~ .UIToggle-optionLabel {
      background-color: @yellow;
      color: @mantle;
    }

    .UIButton--inverted,
    .UIButton--inverted:visited,
    html.touch .UIButton--inverted:focus:hover:not(:active) {
      box-shadow: inset 0 0 0 3px @overlay0;
    }

    .UIButton--borderless,
    .UIButton--borderless:visited,
    html.touch .UIButton--borderless:focus:hover:not(:active) {
      background: none;
      background-color: initial;
      color: inherit;
    }

    .UIButton,
    .UIButton:visited,
    html.touch .UIButton:focus:hover:not(:active) {
      color: inherit;
      background-color: @blue;
    }

    .UIButton--alert,
    .UIButton--alert:visited,
    html.touch .UIButton--alert:focus:hover:not(:active) {
      background-color: @red;
    }

    .h1ebmrjk {
      background: linear-gradient(180deg, #0000 69.83%, @base 100%);
    }

    .jqcfj5w {
      filter: brightness(0) saturate(100%) invert(12%) sepia(5%) saturate(4408%)
        hue-rotate(195deg) brightness(93%) contrast(90%);
    }

    .RichTextEditor[aria-invalid="true"]:not([aria-disabled="true"])
      .RichTextEditor-label,
    .LanguageBarSide.has-error .UILink,
    .LanguageBarSide.has-error select {
      color: @maroon;
    }

    .neeykg0 {
      filter: brightness(0) saturate(100%) invert(14%) sepia(10%) saturate(
        1367%
      ) hue-rotate(192deg) brightness(95%) contrast(95%);
    }

    .CourseOverviewPreviewCard-recommendationLink:hover {
      background-color: @crust;
    }

    .CourseOverviewPreviewCard-subtitle {
      color: @subtext1;
    }

    .CourseOverviewPreviewCard-recommendationLabel {
      color: @subtext1;
    }

    .CourseOverviewPreviewCard-divider {
      border-color: @mantle;
    }

    .AssemblyPrimaryButton--default {
      background-color: @crust;
      border-color: @text;
    }

    .c1vierhv {
      border-color: @overlay2;
    }

    .djzjpyv {
      color: @subtext1;
    }

    span {
      color: inherit;
    }

    .s139vgrg {
      color: @subtext1;
    }

    form {
      background-color: inherit;
    }
    input {
      background-color: @surface0;
    }

    .b1r2wylq {
      background-color: @mantle;
      box-shadow: 0 0.125rem 0.25rem @crust;
    }

    .AssemblyPill {
      background-color: @crust;
      color: @text;
    }

    .t7pmw6o {
      color: @text;
    }

    .UIBaseCard-footer .UserLink-username,
    .UserLink-username {
      color: @text;
    }
    .UserLink-title {
      color: @text;
    }
    .UILinkBox {
      background-color: @mantle;
    }

    .UIBaseCardHeader-info {
      color: @text;
    }

    .UIBaseCardHeader-thumbnail {
      border-color: @mantle;
    }

    .a1s81tf6 {
      background-color: @mantle;
    }

    .aup4qff {
      color: @mantle;
    }

    .illkdv2c {
      color: @maroon;
    }

    .react-calendar__month-view__weekdays__weekday {
      color: @subtext0;
    }

    .CalendarTile--isCurrentWeek::after {
      background-color: @mantle;
    }

    .CalendarTile--isCurrentWeek {
      color: @text;
    }

    .AssemblyIcon--medium {
      color: inherit;
    }

    .AssemblyIconButton--tertiary {
      color: @text;
    }

    .AssemblyButtonBase--circle {
      color: @text;
    }

    .AssemblySecondaryButton {
      background-color: @crust;
      color: @text;
    }

    .AssemblyPillText {
      color: @text;
    }

    .SiteActivity-button.isGlobalNavInExperiment {
      color: @text;
    }

    .UIIcon--large {
      color: @text;
    }

    .s1da1u6y {
      background-color: @crust;
    }

    .CalendarTile--hasEvent {
      color: @mantle;
    }

    .c1qopd51 {
      color: @maroon;
    }

    .AssemblyIconButton--primary {
      background: @base;
    }

    .AssemblyButtonBase:hover:not([disabled]),
    [aria-disabled="true"] {
      background: @mantle;
    }

    .SiteActivity-button {
      border-color: @overlay2;
      color: @text;
    }

    .SiteActivity-button:focus,
    .SiteActivity-button:hover {
      border-color: @overlay0;
      color: @subtext1;
    }

    .NotificationBadge-container {
      background: @overlay2;
    }

    [d17q91q7][aria-expanded="true"] {
      background-color: @text;
    }

    .UILinkBox-link .UILink:active,
    .UILinkBox-link .UILink:focus,
    .UILinkBox-link .UILink:hover {
      border-bottom-color: @overlay2;
    }

    .AssemblySmallCard-hover:hover::after {
      background-color: @overlay2;
    }

    .rellgo5 {
      color: @text;
    }

    #react-autowhatever-site-header-global-search-autosuggest {
      background-color: @crust;
      border-color: @mantle;
    }

    .tqxyjjt {
      color: @text;
    }

    text {
      color: @subtext1;
    }

    li.react-autosuggest__suggestion:hover {
      background: @mantle;
    }

    .poy4xqf {
      background: @crust;
      border-color: @crust;
    }

    .wej97zk {
      background-color: @crust;
    }

    .wvbj6cw {
      background-color: @crust;
    }

    .c721v4v {
      color: @text;
    }

    .c139umgt {
      color: @text;
    }

    .t1ow6gy9 {
      color: @subtext1;
    }

    .u1jilvfz {
      background-color: @overlay2;
    }

    .wej97zk:hover {
      background-color: @mantle;
    }

    .s1ovpdog {
      background-color: @mantle;
      border-top-color: @overlay0;
    }

    .c1ap9d88 .AssemblyMenuItem--title {
      color: @subtext0;
    }

    .c1ap9d88:hover {
      background-color: @base;
    }

    .c1ap9d88 {
      background-color: @mantle;
    }

    .h1hbonvg {
      background-color: @mantle;
    }

    .UIBaseCard-labelTag {
      background-color: @surface0;
      color: @text;
    }

    .UIIcon--chevron-right {
      color: @text;
    }

    .UIIcon--chevron-left {
      color: @text;
    }

    .UIPopover,
    .UIPopover::after {
      background-color: @mantle;
    }

    .UIPopover.UIPopover--mediumShadow {
      box-shadow: 0 0.125rem 0.25rem @crust;
    }

    .SetRecommendationCard-contextMenuItem:hover {
      background-color: @crust;
    }

    .cxvmyeq {
      border-color: @crust;
    }

    .wxhi4p:hover {
      background-color: @mantle;
    }

    .AssemblyTab {
      color: @subtext0;
    }

    .AssemblyTab::after {
      color: @subtext0;
    }

    .s4cgp9b.AssemblyTab {
      color: @text;
    }

    .AssemblyTab:hover {
      color: @lavender;
    }

    .f1ub3img {
      border-top-color: @overlay2;
    }

    .AssemblyTabsWrapper::before {
      background-color: @overlay2;
    }

    .s4cgp9b.AssemblyTab::after {
      background: @blue;
    }

    .AssemblyTab:hover::after {
      background: @blue;
    }

    .w15oa27z:hover {
      background: @mantle;
    }

    .i1v4i7rf.textbookIcon {
      background-image: url("https://assets.quizlet.com/a/j/dist/app/i/explanations/textbook_night.1ff39f68b703b28.svg");
    }

    .sinah8x {
      color: @subtext0;
    }

    .SetPage {
      background-color: @base;
    }

    .SetPage .SetPage-setDetailsInfoWrapper,
    .SetPage .SetPage-setIntroWrapper.SetPage-setIntroWrapper {
      background-color: @base;
    }

    .SetPage-setDetailsInfoWrapper {
      background-color: @base;
    }

    .SetPage-setDetailsTermsWrapper {
      background-color: @base;
    }

    .SetPage .SetPage-setDetailsTermsWrapper,
    .SetPage .SetPage-setLinksWrapper.SetPage-setLinksWrapper {
      background-color: @base;
    }

    .SiteFooter {
      background-color: @base;
      color: @text;
    }

    .SiteFooter-bottom {
      background-color: @base;
    }

    .SetPageStickyHeader.is-pinned {
      background-color: @crust;
    }

    .StudyModesNavItem {
      background-color: @mantle;
    }

    .StudyModesNavItemName {
      color: @text;
    }

    .StudyModesNavItemName:visited {
      color: @text;
    }

    .c78g08u {
      background-color: @mantle;
      box-shadow: 0 0.25rem 1rem 0 @crust;
    }

    .o1rf13bx {
      color: @text;
    }

    .lck97c5 {
      background: @mantle;
    }

    .SetPageTerm {
      background: @mantle;
    }

    .AssemblyIconButton--secondary {
      background: @crust;
    }

    .UIDropdown--inverted {
      background: @base;
    }

    .UIDropdown-select {
      color: @text;
    }

    .soyu1j6 {
      color: @maroon;
    }

    .s1e29328.cbb9lkx {
      color: @red;
      background: @rosewater;
      border-color: @peach;
    }

    .kahyre1 {
      color: @green;
    }

    .kzo3tk {
      color: @blue;
    }

    .SiteActivity-button .NotificationBadge-container {
      background-color: @blue;
    }

    .hgmlhdt {
      background-color: @crust;
    }

    .o1rfl3bx {
      color: @text;
      border-color: @overlay2;
    }

    .c1lf7cxm {
      color: @subtext0;
    }

    .l3ucz5w {
      color: @subtext1;
    }

    .u3v4pv0 {
      color: @subtext0;
    }

    .StudyModesNavItem:hover {
      border-bottom-color: @overlay2;
    }

    .o1g4qwv {
      background-color: @crust;
    }

    .tqyy7cr.h19ive8k {
      color: @text;
    }

    .t1kgxwr0 {
      color: @text;
    }

    .tuxzbsj {
      fill: @text;
    }

    .c5iom2o {
      color: @lavender;
    }

    .lck97c5:focus .c5iom2o,
    .lck97c5:hover .c5iom2o {
      color: @blue;
    }

    .t4sjwm7 {
      color: @text;
    }

    body.colorRefresh-setPageOnly .UISwitch-label {
      color: @text;
    }

    .UISwitch-label {
      border-color: @overlay1;
      background-color: @mantle;
      color: @subtext0;
    }

    .SetPageTerm-sideContent {
      border-right-color: @overlay2;
    }

    .UISwitch-input:checked:not(:disabled ~ .UISwitch-label) {
      color: @mantle;
      border-color: @yellow;
      background-color: @yellow;
    }

    .AssemblyIconButton--highlight {
      background: none;
      color: @yellow;
    }

    .UIToggle-optionLabel {
      background-color: @mantle;
      color: @blue;
    }

    .AssemblyIconButton--highlight:hover:not([disabled]) {
      background-color: @crust;
    }

    .AssemblyIconButton--tertiary:hover:not([disabled]) {
      background-color: @crust;
    }

    .AssemblyButtonBase--square {
      color: @text;
    }

    .z1x1k8pd.svwhkoh {
      color: @green;
      border-color: @green;
    }

    .svwhkoh {
      background-color: @mantle;
    }

    .kzo3tk.cbb9lkx {
      background: @green;
      border-color: @green;
      color: @blue;
    }

    .kahyre1.l40n85g {
      color: @green;
    }

    .soyu1j6.l40n85g {
      color: @red;
    }

    .axrvw3e.s1e29328.cbb9lkx {
      background: @flamingo;
      border-color: @flamingo;
      color: @red;
    }

    .mnlifen {
      background: @mantle;
    }

    .f1yw38c3 {
      background: none;
    }

    .AssemblyToggleSwitch-input:checked + .AssemblyToggleSwitch-fauxInput {
      background: @lavender;
    }

    .AssemblyToggleSwitch-input:checked
      + .AssemblyToggleSwitch-fauxInput::after {
      background-color: @pink;
    }

    .AssemblyToggleSwitch-fauxInput {
      background: @overlay1;
    }

    .AssemblyToggleSwitch-fauxInput::after {
      background: @lavender;
    }

    .c13e2cpr {
      background-color: @mantle;
      color: @text;
    }

    .AssemblyInput {
      background-color: @surface0;
      color: @text;
    }

    .AssemblyInput-input {
      color: @subtext1;
    }

    .a1k2umqi {
      background-color: @crust;
    }

    .bxtl8jy {
      background-color: @surface0;
      color: @text;
    }

    .ah6785x {
      color: @subtext1;
    }

    .a1fcz3cu:focus-within > .ah6785x {
      color: @subtext1;
    }

    .e29yge6
      .react-autosuggest__container
      .react-autosuggest__suggestions-container--open {
      background: @mantle;
    }

    .e1g8wmc7 {
      background-color: @surface0;
    }

    .AssemblyLink--secondary:hover {
      color: @peach;
    }

    .a1k2umqi:focus-within {
      border-bottom-color: @blue;
    }

    .cgyrcnx {
      background-color: @overlay2;
    }

    .byhd60 {
      background-color: @maroon;
    }

    .d11ucs5j {
      background: @overlay2;
    }

    .sjsxdsz {
      border-bottom-color: @overlay2;
    }

    .fz4nps6 {
      border-top-color: @overlay2;
    }

    .AssemblyPrimaryButton--default:disabled,
    .AssemblyPrimaryButton--default[aria-disabled="true"] {
      background: @surface0;
      border-color: @base;
      color: @subtext0;
    }

    .ptc18zm {
      background: inherit;
    }

    .c1gi3y8b {
      background: @crust;
    }

    .k3lm6f3 {
      background-color: @crust;
      color: @text;
    }

    .w1uwrq7e {
      color: @text;
      border-color: @overlay2;
    }

    .t1d08860 {
      color: inherit;
    }

    .i1p8x1gp .i1e9rt5 {
      color: @maroon;
    }

    .i1p8x1gp {
      background-color: @mantle;
    }

    .i1p8x1gp,
    .i1p8x1gp:focus,
    .i1p8x1gp:hover {
      border-color: @maroon;
    }

    .cv1rd7s {
      background: @mantle;
    }

    .cv1rd7s,
    .cv1rd7s:focus,
    .cv1rd7s:hover {
      border-color: @green;
    }

    .cv1rd7s .i1e9rt5 {
      color: @green;
    }

    .b1jcf4jl {
      background-color: @crust;
    }

    .pck8ctn {
      color: @text;
    }

    .i6cf9vy {
      color: @red;
    }

    .c2mfnz6 {
      color: @green;
    }

    .pr2w5fu:first-child {
      border-right-color: @overlay2;
    }

    .t117larf {
      background-color: @crust;
      border-color: @overlay2;
      color: @text;
    }

    .q1m09plc:hover {
      background-color: @crust;
    }

    .q1m09plc {
      color: @blue;
    }

    .hbcu5v.q1m09plc {
      color: @subtext1;
    }

    .qzk5crt {
      color: @text;
    }

    .sd72jj0 {
      color: @subtext1;
    }

    .UIModalHeader {
      background-color: @crust;
    }

    .UIModalBody {
      background-color: @mantle;
    }

    .TestModeOptions {
      background-color: @mantle;
    }

    .UIModal-box {
      color: @text;
    }

    .UICheckbox-label {
      color: @text;
    }

    .UICheckbox-input:checked ~ .UICheckbox-fauxInput {
      border-color: @yellow;
    }

    .UICheckbox-fauxInput::after {
      border-color: @yellow;
      border-width: 0 0 0.125rem 0.125rem;
    }

    .UIInput-input {
      color: @text;
    }

    .UIInput[aria-invalid="false"] .UIInput-input ~ .UIInput-border {
      box-shadow: 0 0.125rem 0 0 @overlay2;
    }

    .UILink,
    .UILink:visited {
      color: @rosewater;
    }

    .UIButton:active,
    html.cursor .UIButton:hover,
    html.cursor .UIButton:hover:visited {
      background-color: @sky;
    }

    .UIHorizontalRule {
      border-bottom-color: @overlay2;
    }

    .OptionsModal-description,
    .TestModeOptions-listOption-description {
      color: @subtext0;
    }

    .swjz05g {
      background-color: @crust;
    }

    .swjz05g,
    .swjz05g:focus,
    .swjz05g:hover {
      border-color: @blue;
    }

    .s2y71yx label {
      background: @surface0;
    }

    .s2y71yx input {
      background: inherit;
      color: @text;
    }

    .TextbookRecommendations {
      background: @crust;
    }

    .TextbookCard-Details {
      color: @subtext1;
    }

    .AssemblyLink--title:any-link {
      color: @text;
    }

    .AssemblyLink--title:hover {
      color: @yellow;
    }
    /*     .AssemblyIcon--small {
        color: @lavender;
    } */

    .ah3z5j1 {
      border-color: @blue;
    }

    .hkyil8p {
      color: @blue;
    }

    .e17gih4t {
      border-color: @overlay2;
    }

    .o1q1tz6w {
      border-color: @overlay2;
      color: @text;
    }

    .hg3d33q {
      border-color: #0000;
    }

    .ser6cev,
    .c86ukn8 {
      color: @subtext0;
    }

    .a99ei82 {
      background-color: @mantle;
      border-color: @overlay2;
    }

    .qcpiy8g {
      color: @text;
    }

    .pqa404y {
      color: @green;
    }

    .s18c8hjh {
      color: @maroon;
    }

    .ljt3l6v {
      fill: @subtext0;
    }

    .c16l7630.iayao2g {
      color: @green;
    }

    .i1e9dzkh.iayao2g {
      color: @maroon;
    }

    .w1e3jc65 {
      background-color: @mantle;
      border-color: @mantle;
    }

    .t7fr19y {
      color: @lavender;
    }

    .dw1ojws {
      color: @subtext0;
    }

    .w1e3jc65:hover {
      border-color: @overlay2;
    }

    .q1nxab59 {
      color: @subtext1;
    }

    .ssbjprp {
      color: @subtext0;
    }

    .smvj06a {
      color: @subtext1;
    }

    .cfzatrd.a548wz9 {
      color: @green;
    }

    .cag3g2z.anp68o5 {
      color: @green;
    }

    .CombinePage-wrap {
      background-color: @base;
    }

    .CombinePageTable-row {
      background-color: @mantle;
    }

    .CombinePageTable-rowTermCount {
      color: @subtext1;
    }

    .CombinePageTable-setTitle .UIHeading--four {
      color: @text;
    }

    .UIDropdown {
      background: @mantle;
      border-color: @crust;
    }

    .UIDropdown .UIDropdown-icon {
      color: @overlay2;
    }

    .UIDropdown-select:focus option {
      background: @mantle;
    }

    option:hover {
      background: @crust;
    }

    .ModeControls {
      background-color: @mantle;
    }

    .ModeControls-backText {
      color: @text;
    }

    .ModeControls-back {
      border-bottom-color: @overlay2;
    }

    .UIButton--whiteBorder {
      background: @crust;
      border-color: @base;
      color: @text;
    }

    .MatchModeControls-currentTime {
      color: @blue;
    }

    .MatchModeQuestionScatterTile {
      background-color: @mantle;
      border-color: @overlay0;
    }

    .MatchModeQuestionScatterTile.is-draggedOver,
    .MatchModeQuestionScatterTile.is-dragging,
    .MatchModeQuestionScatterTile:hover {
      border-color: @overlay2;
    }

    .MatchModeQuestionScatterTile.is-incorrect {
      border-color: @maroon;
    }

    .MatchModeQuestionScatterTile.is-correct {
      border-color: @green;
    }

    .HighscoresList {
      background-color: @crust;
    }

    .HighscoreRow {
      background-color: @mantle;
    }

    .UIButton[aria-disabled="true"],
    .UIButton[aria-disabled="true"]:active,
    .UIButton[aria-disabled="true"]:focus,
    .UIButton[aria-disabled="true"]:visited,
    .UIButton[disabled],
    .UIButton[disabled]:active,
    .UIButton[disabled]:focus,
    .UIButton[disabled]:visited,
    html.cursor .UIButton[aria-disabled="true"]:hover,
    html.cursor .UIButton[disabled]:hover {
      background-color: @mantle;
    }

    .t10tqhey {
      background-color: @mantle;
      color: @text;
      border-color: @crust;
    }

    .t9i9vmb.h19ive8k,
    .t1s26kx5.h19ive8k,
    .s1rx7q8q.h19ive8k {
      color: @text;
    }

    .s8j1d54,
    .c49e2ip {
      color: @subtext1;
    }

    .c6p6uaq .react-calendar__month-view__days__day {
      color: @text;
    }

    .c6p6uaq .react-calendar__month-view__days__day--neighboringMonth {
      color: @subtext0;
    }

    .AchievementsImage--isActive .a130rwfv,
    .al33ekg.isActive .a130rwfv {
      color: @subtext0;
    }

    .s1rtnf4c::before,
    .s1rtnf4c::after {
      background: none;
    }

    .AchievementsImage--isActive .a130rwfv,
    .al33ekg.isActive .a130rwfv,
    .DashboardLayout .SetPreviewLink--noLinkBox,
    .DashboardLayout .PreviewCard--noLinkBox {
      background-color: @mantle;
    }

    .SetPreview-queryMatchHighlight {
      background: @yellow;
      color: @base;
    }

    .cpey3pe {
      color: @text;
    }

    .s1fl65t6 {
      color: @subtext0;
    }

    .t1ne2oir {
      color: @text;
    }

    .b1xq6unb {
      color: @text;
    }

    .bp0a7jj {
      color: @subtext1;
    }

    .pltikop {
      color: @blue;
    }

    .SettingsBox-box {
      background-color: @mantle;
    }

    .EdgyDataCoursePillbox .UIPill {
      background: @crust;
      border-color: @overlay2;
      color: @text;
    }

    .UIAutosuggest .react-autosuggest__suggestions-container {
      background: @mantle;
    }

    .UIAutosuggest .react-autosuggest__suggestion {
      border-bottom-color: @overlay2;
    }

    .UIAutosuggest
      .react-autosuggest__suggestion.react-autosuggest__suggestion--highlighted {
      border-bottom-color: @yellow;
    }

    .EdgyDataCourseSelector-suggestion .EdgyDataCourseSelector-suggestionName {
      color: @text;
    }

    .UIInput-input.UIInput-autoExpandInput.is-focused ~ .UIInput-border,
    .UIInput-input:focus ~ .UIInput-border {
      box-shadow: 0 0.25rem 0 0 @yellow;
    }

    .Divider-label {
      background: @mantle;
    }

    .the-label,
    .UIButton {
      color: @crust;
    }

    input:checked + .p22broa {
      box-shadow: 0 0 0 0.25rem @blue;
    }

    .button.google {
      background-color: @red;
      border-color: @peach;
    }

    .button.google::after {
      border-right-color: @peach;
    }

    .b1opuclq {
      background-color: @mantle;
      box-shadow: 0 0.25rem 1rem 0 @crust;
    }

    .button.apple .label,
    .button.facebook .label,
    .button.google .label {
      color: @crust;
    }

    .button.facebook {
      background-color: @blue;
      border-color: @lavender;
    }

    .button.facebook::after {
      border-right-color: @lavender;
    }

    .UIInput-input:-webkit-autofill,
    .UIInput-input:-webkit-autofill:focus,
    .UIInput-input:-webkit-autofill:hover {
      box-shadow: none !important;
    }
    .UIInput-input:-internal-autofill-previewed,
    .UIInput-input:-internal-autofill-selected {
      -webkit-text-fill-color: @text;
    }

    .UILink:active,
    html.cursor .UILink:hover,
    html.cursor .UILink:hover:visited {
      color: @maroon;
    }

    .setting legend,
    .setting p {
      color: @text;
    }

    .UIButton-wrapper {
      color: inherit;
    }

    .UIButton--alert:active,
    html.cursor .UIButton--alert:hover,
    html.cursor .UIButton--alert:hover:visited {
      background-color: @maroon;
    }

    .c1qo8ql4 {
      background-color: @base;
    }

    .phx9gy6 {
      color: @text;
    }

    .soad3d7 {
      color: @text;
    }

    .AssemblyLink--primary:any-link {
      color: @rosewater;
    }

    .AssemblyLink {
      color: @rosewater;
    }

    .UIButton--borderless:active,
    html.cursor .UIButton--borderless:hover,
    html.cursor .UIButton--borderless:hover:visited {
      background-color: initial;
      color: @yellow;
    }

    .UIButton--borderless[aria-disabled="true"],
    .UIButton--borderless[aria-disabled="true"]:active,
    .UIButton--borderless[aria-disabled="true"]:focus,
    .UIButton--borderless[aria-disabled="true"]:visited,
    .UIButton--borderless[disabled],
    .UIButton--borderless[disabled]:active,
    .UIButton--borderless[disabled]:focus,
    .UIButton--borderless[disabled]:visited,
    html.cursor .UIButton--borderless[aria-disabled="true"]:hover,
    html.cursor .UIButton--borderless[disabled]:hover {
      background-color: initial;
    }

    .s19dmjr1.isGlobalNavInExperiment.is-focused,
    .s19dmjr1.isGlobalNavInExperiment.is-focused input {
      background: @surface0;
    }

    .t1iqlnnn p {
      color: @subtext1;
    }

    .axupt8p,
    .igkckaz {
      color: @rosewater;
    }

    .axupt8p:active,
    .axupt8p:focus,
    .axupt8p:hover {
      color: @flamingo;
    }

    .cnuw08l {
      background-color: @mantle;
    }

    .c192jkj8 {
      color: @text;
    }

    .a1sd82zg {
      background-color: @crust;
      border-left-color: @lavender;
    }

    .g84nzqs {
      background-image: none;
    }

    .du7o3ew > div:not(:last-child) {
      border-right-color: @overlay2;
    }

    .i73vo82:hover {
      color: @crust;
      background-color: @crust;
    }

    .f2nmi2p {
      border-top-color: @overlay2;
    }

    .a1scx0nz {
      background-color: @mantle;
    }

    .a4ouqer {
      color: @text;
    }

    .t104cykg {
      color: @text;
    }

    .ExplanationsLandingPage #PrismicExplanationsSearchBarTarget label,
    .ExplanationsLandingPage #SearchBarTarget label,
    .explanations.prismic-page #PrismicExplanationsSearchBarTarget label,
    .explanations.prismic-page #SearchBarTarget label {
      background-color: @surface0;
    }

    .l1rgb1ub {
      border-color: @overlay2;
    }

    .theme-night .h1uvmh9x,
    .h1uvmh9x {
      background: @mantle;
    }

    .h1wn8ccf {
      color: @text;
    }

    .ccm0r9d {
      color: @subtext0;
    }

    .AssemblySmallCard-isActive::after {
      background-color: @lavender;
    }

    .i192320l {
      border-color: @mantle;
    }

    .b1j40uwt::before {
      background-color: @mantle;
    }

    .theme-night .g84nzqs {
      background: none;
    }

    .CreateSetHeader-sticky {
      background: @base;
    }

    .a1fcz3cu {
      background-color: @surface0;
    }

    .CreateSetHeader-permissionsLink {
      color: @subtext1;
    }

    .CreateSetDiagramUploader .UIFloatedCard--white,
    .TermContent-inner {
      background-color: @mantle;
    }

    .CreateSetDiagramUploader-banner {
      border-color: @overlay0;
    }

    .AssemblyIconButton--primaryInverted {
      border-color: @overlay2;
    }

    .StudiableItemToolbar {
      border-bottom-color: @overlay2;
    }

    .b18prmdf {
      box-shadow: 0 0.125rem 0 0 @overlay2;
    }

    .ImageUploadProminentContextToggle {
      border-color: @overlay0;
    }

    .UILinkButton {
      border-bottom-color: @blue;
      color: @text;
    }

    .p10i2lyl {
      background-color: @mantle;
    }

    * + .KeyboardShortcuts-shortcut,
    .KeyboardShortcuts-shortcut + *,
    .KeyboardShortcuts-shortcut + .KeyboardShortcuts-shortcut {
      border-top-color: @overlay2;
    }

    .UIKeyboardInput {
      color: @text;
      border-color: @overlay2;
    }

    .UIDropdown-select option {
      color: @text;
    }

    .UIButton--inverted:active,
    html.cursor .UIButton--inverted:hover,
    html.cursor .UIButton--inverted:hover:visited {
      box-shadow: inset 0 0 0 3px @overlay2;
    }

    .PMEditor:focus-within ~ .b18prmdf {
      box-shadow: 0 0.25rem 0 0 @yellow;
    }

    .UITooltip,
    .UITooltip::after {
      background: @crust;
    }

    :not(.ie11 .UITooltip),
    :not(.ie11 .UIPopover) {
      filter: none;
    }

    .LanguageSelect-option:hover,
    .Select-option.is-focused .LanguageSelect-option {
      background-color: @yellow;
    }

    .i1u1jhdl {
      background-color: @crust;
    }

    .TermRowDragPlaceholder {
      background: @base;
    }

    .CreateSetDiagramUploader-banner.is-dropTarget {
      border-color: @yellow;
    }

    .TermContent-addRow:hover .UILinkButton {
      border-bottom-color: @yellow;
    }

    .tetv1rf.t8spden:hover {
      background-color: @crust;
    }

    .ImportTerms {
      background-color: @base;
    }

    .ImportTerms-import,
    .ImportTerms-preview {
      background-color: @base;
    }

    .ImportTerms-textarea {
      color: @text;
      border-color: @overlay2;
    }

    .TermRowsPreview .TermRowsPreview-row {
      background: @mantle;
    }

    .UIRadio-input:checked ~ .UIRadio-fauxInput {
      border-color: @yellow;
    }

    .UIRadio-fauxInput::after {
      background-color: @yellow;
    }

    .UILinkButton:active,
    .UILinkButton:focus,
    .UILinkButton:hover {
      border-bottom-color: @yellow;
    }

    .AutosuggestContextItem {
      background-color: @crust;
      color: @text;
    }

    .AssemblyNotice-error {
      border-color: @red;
      background-color: @surface0;
    }

    .TermRow.is-duplicate {
      outline-color: @yellow;
    }

    .AssemblyPrimaryButton--danger {
      background: @red;
      color: @crust;
    }

    .AssemblyPrimaryButton--danger:hover:not([disabled]),
    [aria-disabled="true"] {
      background: @pink;
    }

    .s19dmjr1.is-focused,
    .s19dmjr1.is-focused input,
    .s2y71yx label,
    .s2y71yx.is-expanded label {
      background: @surface0;
      color: @text;
    }

    .eeiq5c0 {
      color: @text;
    }

    .t1r0fp00,
    .t1elfe8k {
      color: @subtext0;
    }

    .MobilePage {
      background: @base;
    }

    .MobilePage-feature {
      border-color: @overlay2;
    }

    .MobilePage-anyDevice {
      border-top-color: @overlay2;
    }

    .AssemblyTextButton--secondary {
      color: @text;
    }

    .AssemblyPrimaryButton--upgrade {
      background: @yellow;
    }

    .page,
    .PrismicSimpleRichText--white,
    .PrismicTextCallout--whiteBackground,
    .PrismicVideoEmbedWithText--whiteBackground,
    .p1mcvm6s,
    .PrismicImageTextTile--whiteBackground,
    .PrismicTextCallout--twilightBlue200Background,
    #SearchResultsPageHeader-mainExperiment {
      background-color: @base;
    }

    .tfomyx6,
    .i1rs7b62,
    .d5ww82k {
      color: @text;
    }

    .cssrxmc {
      background-color: @yellow;
    }

    .PrismicImageTextTile-tileWrapper {
      background-color: @mantle;
    }

    .AssemblyPrimaryButton--upgrade:hover:not([disabled]) {
      background: @rosewater;
    }

    .s1qq0zr7 {
      background-color: @mantle;
    }

    .sv0yvnj a,
    .sv0yvnj a:visited:not(:last-child) {
      color: @text;
    }

    .sg4pwu6:hover,
    .hivq638,
    .s1ahro8n:hover {
      background-color: @crust;
    }

    .e7lqtuc
      .react-autosuggest__suggestions-container.react-autosuggest__suggestions-container--open {
      background-color: @mantle;
    }

    .e7lqtuc .react-autosuggest__section-title,
    .SearchResultsPageHeader-queryFeedback,
    .SearchResultsPage-contentType .SearchResultsPage-emptyStateHeadline,
    .SearchResultsPage-contentType .SearchResultsPage-emptyStateDescription,
    .SearchResultsPage-contentType
      .SearchResultsPage-emptyStateSuggestionsList {
      color: @text;
    }

    .markdown-body {
      color: @subtext1;
    }

    .e7lqtuc
      li.react-autosuggest__suggestion.react-autosuggest__suggestion--highlighted,
    .e7lqtuc li.react-autosuggest__suggestion:hover {
      background-color: @crust;
      border-color: @lavender;
    }

    .UserPreviewCard-username,
    .ClassPreviewCard-title {
      color: @text;
    }

    .UserPreviewCard-classesDescription,
    .UserPreviewCard-createdSetsDescription,
    .QuestionCard-subject,
    .ClassPreviewCard-location,
    .ClassPreviewCard-membersDescription,
    .ClassPreviewCard-studySetsDescription {
      color: @subtext1;
    }

    .QuestionCard-bottomGradient {
      background-image: none;
    }

    .AssemblyTextButton--primary {
      color: @rosewater;
    }

    .TosLegend--normal {
      color: @subtext1;
    }

    .AssemblyLink--secondary:any-link {
      color: @rosewater;
    }

    .lghzn8f,
    .a1cdxe01.h9lvpq {
      color: @text;
    }

    .s1mff1xn,
    .AssemblyCheckbox-label {
      color: @text;
    }

    .ccnmm10 {
      background-color: @mantle;
    }

    .c1g4obhz {
      background-color: @crust;
      color: @text;
    }

    .SetPageTerm-wordText,
    .SetPageTerm-definitionText {
      color: @text;
    }

    .SetPageTerms-embeddedDesktopAdWrapper {
      background: @mantle;
    }

    .c1qw5oc {
      background: @crust;
      border-bottom-color: @surface0;
    }

    .c19lfjrd,
    .l1fkuqeb {
      background-color: @base;
    }

    .bxyvgmh {
      background-color: @mantle;
    }

    .ata5p6z[aria-disabled="true"],
    .ata5p6z[aria-disabled="true"] div,
    .ata5p6z[aria-disabled="true"] textarea {
      background-color: @mantle;
    }

    .ata5p6z {
      border-color: @overlay2;
      background-color: @mantle;
    }

    .AssemblyIconButton--primary:disabled,
    .AssemblyIconButton--primary[aria-disabled="true"] {
      background: @surface1;
      color: @text;
    }

    .ugcsb7m {
      background-color: @blue;
      color: @crust;
    }

    .AssemblySecondaryButton:disabled,
    .AssemblySecondaryButton[aria-disabled="true"] {
      background-color: @base;
      border-color: @overlay2;
    }

    .m9mf1hr div,
    .m9mf1hr textarea {
      background-color: @mantle;
    }

    .lu5rlws {
      color: @subtext1;
    }

    .b1yjduyh {
      background-color: @mantle;
    }

    .d6tac4m {
      background-color: @surface0;
    }

    .RecentFeed-empty {
      background-color: @mantle;
    }

    .i1ykvw4f {
      background: @mantle;
    }

    .i1ykvw4f:hover {
      background: @crust;
    }

    .RecentFeed-empty--cta {
      color: @text;
    }

    .UIButton--whiteBorder:active,
    html.cursor .UIButton--whiteBorder:hover,
    html.cursor .UIButton--whiteBorder:hover:visited {
      color: @yellow;
    }

    .c124zyvn {
      background: @base;
    }

    .AssemblyLink--primary:hover {
      color: @maroon;
    }

    .cczh2hb,
    .h1jftztg,
    .t2m5erc {
      color: @text;
    }

    .t1nv0ihp,
    .sku1zau,
    .s54kfc3 {
      color: @subtext1;
    }

    .ImageUploadProminentContextToggle
      .ImageUploadProminentContextToggle-IconExplanation {
      color: @text;
    }

    .SiteHeaderLogo-link {
      color: @blue;
    }

    .c1sgnxr5 {
      color: @green;
    }

    .suyglfi {
      color: @text;
    }

    .s2y71yx
      li.react-autosuggest__suggestion.react-autosuggest__suggestion--highlighted,
    .s2y71yx li.react-autosuggest__suggestion:hover {
      background: @mantle;
    }

    .q1kwd3of {
      color: @overlay2;
    }

    .c1741jrq:not(:first-child) {
      border-top-color: @overlay2;
    }

    .SetsView-studySetResults {
      color: @text;
    }

    .UILink .SetPreview-cardHeaderTitle,
    .UILink .SetPreview-cardHeaderTitle:visited,
    html.touch .UILink .SetPreview-cardHeaderTitle:focus:hover:not(:active) {
      color: @text;
    }

    .SetPreview-cardBylineClass {
      color: @subtext0;
    }

    .UILink .SetPreview-cardHeaderTitle:active,
    html.cursor .UILink .SetPreview-cardHeaderTitle:hover,
    html.cursor .UILink .SetPreview-cardHeaderTitle:hover:visited {
      color: @yellow;
    }

    .e29yge6
      .react-autosuggest__container
      .react-autosuggest__suggestion.react-autosuggest__suggestion--highlighted,
    .e29yge6
      .react-autosuggest__container
      .react-autosuggest__suggestion:hover {
      background-color: @crust;
    }

    .e29yge6 .react-autosuggest__container .react-autosuggest__suggestion {
      border-bottom-color: @mantle;
    }

    .EdgyDataCourseSelector-addYourOwn {
      color: @blue;
    }

    .i5h71e0 {
      background-color: @surface0;
    }

    .ikdjsw2 {
      color: @text;
    }

    .i1m3kkj2 {
      color: @text;
    }

    .i1190urg {
      color: @subtext0;
    }

    .le206v0 {
      border-color: @overlay2;
    }

    .sby7w0g {
      background: @overlay2;
    }

    .c3s5vdc:hover {
      background-color: @blue;
    }

    .g4cyoxx {
      color: @text;
    }

    .s1lyn4nc {
      background: @blue;
    }

    .UIModal.is-white .UIModal-box {
      background: @mantle;
    }

    .UIModalBadge {
      background-color: @blue;
      color: @crust;
    }

    .CombinePage-sourceSelectWrap .UIFieldset-legend {
      color: @text;
    }

    .k1reqlz9.ijrfqxy svg {
      fill: @green;
    }

    .dhmqhsx.ijrfqxy svg {
      fill: @red;
    }

    .c6p6uaq .react-calendar__navigation__label {
      color: @text;
    }

    .c6p6uaq .react-calendar__navigation__arrow {
      color: @text;
    }

    .c6p6uaq .react-calendar__navigation__arrow:disabled {
      color: @overlay1;
    }

    .f1sxiitf {
      background: none;
    }

    .c1ext0pg {
      background-color: @surface1;
      color: @text;
    }

    .sl7nfp9 {
      background-color: @mantle;
    }

    .sdw19mu .SetPreviewCardV1 {
      border-bottom-color: @overlay2;
    }

    .fiejqa {
      background: none;
    }

    .t1ied0h6 {
      color: @subtext1;
    }

    .SetListMediumCard-isActive::before {
      background-color: @lavender;
    }

    .c51obz3 {
      background-color: @base;
    }

    .s80h93u {
      color: @text;
      border-color: @overlay2;
    }

    .s80h93u:active:not([disabled]),
    .s80h93u:hover:not([disabled]) {
      background: @crust;
    }

    .r78nxpu > div:hover {
      background-color: @mantle;
    }

    .stbnqj0 {
      color: @text;
    }

    .c1n6gny6,
    .to5kbh1 {
      color: @text;
    }

    .tb3hrve {
      color: @subtext0;
    }

    .HurricaneBanner--default {
      background: @crust;
      border-bottom-color: @surface0;
    }

    .HurricaneBanner--default .HurricaneBanner-text {
      color: @text;
    }

    .StudyModesNavSectionTitle {
      color: @text;
    }

    .cgkxufs {
      background: @crust;
      border-bottom-color: @overlay0;
    }

    .TeacherChoosePageView-gameTypeOption {
      background-color: @mantle;
    }

    .TeacherChoosePageView-gameTypes--text {
      color: @text;
    }

    .TeacherChoosePageView-gameTypes--description {
      color: @subtext0;
    }

    .TeacherChoosePageView-gameTypes--cta,
    .CardContent-cta {
      color: @blue;
    }

    .TeacherChoosePageView-gameTypeOption:hover,
    .PlayModeCard:hover {
      border-bottom-color: @yellow;
    }

    .PlayModeCard:active,
    .PlayModeCard:focus:not(:active:not(:hover)),
    html.cursor .PlayModeCard:hover,
    html.cursor .PlayModeCard:hover:visited {
      border-color: @yellow;
    }

    .PlayModeCard {
      background-color: @mantle;
    }

    .CardContent-option {
      background: @crust;
      color: @text;
    }

    .CardContent-text,
    .CardContent-title {
      color: @text;
    }

    .TeacherLobbyView-join {
      background-color: @mantle;
    }

    .TeacherLobbyView .UIFloatedCard,
    .TeacherStartGameView-side,
    .TeacherEndView-side {
      background: @crust;
    }

    .theme-night .TeacherLobbyView .UIFloatedCard {
      border-color: @overlay2;
    }

    .TeacherLobbyView-join--instructionLink .UIButton {
      color: @blue;
    }

    .TeacherLobbyView-player:hover {
      color: @red;
    }

    .td5er02 .UIFloatedCard {
      background-color: @mantle;
    }

    .TermStat--perfectTerms .TermStat-header {
      background-color: @green;
    }

    .TermStat-header {
      color: @mantle;
    }

    .TermStatGroup-navProgress {
      color: @subtext0\1;
    }

    .TeacherEndView-side--bottomButton .UIButton.UIButton--whiteBorderRounded {
      color: @text;
    }

    .SegmentedControl.SegmentedControl--quizletBlue
      .SegmentedControl-navItem.is-active,
    .segmented-control.SegmentedControl--quizletBlue
      .SegmentedControl-navItem.is-active {
      background: @lavender;
      color: @crust;
    }

    .StudyWhileWaitingView {
      background-color: @base;
    }

    .firefox
      .CardsList.CardsList--showSingle
      .CardsItem
      .CardsItemSide
      .CardsItemInner,
    .ie11
      .CardsList.CardsList--showSingle
      .CardsItem
      .CardsItemSide
      .CardsItemInner,
    .webkit
      .CardsList.CardsList--showSingle
      .CardsItem
      .CardsItemSide
      .CardsItemInner {
      background-color: @mantle;
    }

    .StudentTeamView-teamInner {
      background-color: @mantle;
    }

    .StudentAnswerOption .UIButton {
      background-color: @mantle !important;
    }

    .StudentAnswerOption .UIButton:active,
    html.cursor .StudentAnswerOption .UIButton:hover,
    html.cursor .StudentAnswerOption .UIButton:hover:visited {
      border-color: @yellow;
    }

    .StudentPlayingHeader {
      background: @crust;
    }

    .StudentLeaderboard-headstart {
      background: @blue;
    }

    .StudentLeaderboard {
      background: @lavender;
    }

    .StudentLeaderboard-team {
      background: @blue;
    }

    .StudentGameboard-feedback.is-incorrectAnswer {
      background: @red;
    }

    .StudentAnswerOption.is-showingIncorrectFeedback.StudentAnswerOption
      .UIButton {
      background: @red !important;
    }

    .StudentAnswerOption.is-showingCorrectFeedback.StudentAnswerOption
      .UIButton {
      background: @green !important;
    }

    .StudentIncorrectAnswerFeedback-section--correct
      .StudentIncorrectAnswerFeedback-heading {
      color: @green;
    }

    .TermStat--learnedTerms .TermStat-header {
      background-color: @red;
    }

    .TeacherChoosePageView-gameTypeOption:active,
    .TeacherChoosePageView-gameTypeOption:focus:not(:active:not(:hover)),
    html.cursor .TeacherChoosePageView-gameTypeOption:hover,
    html.cursor .TeacherChoosePageView-gameTypeOption:hover:visited {
      border-color: @yellow;
    }

    .tllqvk3,
    .c1tmoumb {
      background-color: @mantle;
    }
  }
}

/* deno-fmt-ignore */
@catppuccin: {
  @latte:     { @rosewater: #dc8a78; @flamingo: #dd7878; @pink: #ea76cb; @mauve: #8839ef; @red: #d20f39; @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; @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; @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; @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; };
};