feat(clickup): init

scripts/userstyles.yml

@@ -180,6 +180,13 @@ userstyles:
     color: peach
     icon: claude
     current-maintainers: [*ruiiiijiiiiang]
+  clickup:
+    name: ClickUp
+    link: https://app.clickup.com
+    categories: [productivity]
+    icon: clickup
+    color: mauve
+    current-maintainers: [*thomas-philippot]
   codeberg:
     name: Codeberg
     link: https://codeberg.org

styles/clickup/catppuccin.user.less

@@ -0,0 +1,322 @@
+/* ==UserStyle==
+@name ClickUp Catppuccin
+@namespace github.com/catppuccin/userstyles/styles/clickup
+@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/clickup
+@version 2000.01.01
+@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/clickup/catppuccin.user.less
+@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aclickup
+@description Soothing pastel theme for ClickUp
+@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== */
+
+@import "https://userstyles.catppuccin.com/lib/lib.less";
+
+@-moz-document domain("app.clickup.com") {
+  :root {
+    @media (prefers-color-scheme: light) {
+      #catppuccin(@lightFlavor);
+    }
+    @media (prefers-color-scheme: dark) {
+      #catppuccin(@darkFlavor);
+    }
+  }
+
+  #catppuccin(@flavor) {
+    #lib.palette();
+    #lib.defaults();
+
+    @white: if(@flavor = latte, @crust, @text);
+    @black: if(@flavor = latte, @text, @crust);
+
+    body {
+      --cu-white: @white;
+      --cu-white-90: fade(@white, 90%);
+      --cu-white-80: fade(@white, 80%);
+      --cu-white-69: fade(@white, 69%);
+      --cu-white-60: fade(@white, 60%);
+      --cu-white-50: fade(@white, 50%);
+      --cu-white-39: fade(@white, 39%);
+      --cu-white-30: fade(@white, 30%);
+      --cu-white-20: fade(@white, 20%);
+      --cu-white-17: fade(@white, 17%);
+      --cu-white-13: fade(@white, 13%);
+      --cu-white-10: fade(@white, 10%);
+      --cu-white-078: fade(@white, 7.8%);
+      --cu-white-06: fade(@white, 6%);
+
+      --cu-black: @black;
+      --cu-black-90: fade(@black, 90%);
+      --cu-black-60: fade(@black, 60%);
+      --cu-black-45: fade(@black, 45%);
+      --cu-black-27: fade(@black, 27%);
+      --cu-black-19: fade(@black, 19%);
+      --cu-black-16: fade(@black, 16%);
+      --cu-black-13: fade(@black, 13%);
+      --cu-black-10: fade(@black, 10%);
+      --cu-black-06: fade(@black, 6%);
+
+      --cu-grey1100: @text;
+      --cu-grey1000: @subtext1;
+      --cu-grey1000-90: fade(@subtext1, 90%);
+      --cu-grey1000-70: fade(@subtext1, 70%);
+      --cu-grey1000-50: fade(@subtext1, 50%);
+      --cu-grey1000-20: fade(@subtext1, 20%);
+      --cu-grey1000-16: fade(@subtext1, 16%);
+      --cu-grey1000-10: fade(@subtext1, 10%);
+      --cu-grey1000-078: fade(@subtext1, 7.8%);
+      --cu-grey900: @subtext0;
+      --cu-grey800: @overlay2;
+      --cu-grey700: @overlay1;
+      --cu-grey600: @overlay1;
+      --cu-grey500: @overlay0;
+      --cu-grey400: @surface2;
+      --cu-grey300: @surface1;
+      --cu-grey200: @surface0;
+      --cu-grey100: @base;
+      --cu-grey100-50: fade(@base, 50%);
+      --cu-grey50: @mantle;
+      --cu-grey25: @crust;
+
+      --cu-green1100: @green;
+      --cu-green1000: @green;
+      --cu-green900: @green;
+      --cu-green800: @green;
+      --cu-green700: @green;
+      --cu-green600: @green;
+      --cu-green500: @green;
+      --cu-green400: @green;
+      --cu-green300: @green;
+      --cu-green200: @mantle;
+      --cu-green100: @mantle;
+      --cu-green50: @crust;
+
+      --cu-mint1100: @green;
+      --cu-mint1000: @green;
+      --cu-mint900: @green;
+      --cu-mint800: @green;
+      --cu-mint700: @green;
+      --cu-mint600: @green;
+      --cu-mint500: @green;
+      --cu-mint400: @green;
+      --cu-mint300: @green;
+      --cu-mint200: @mantle;
+      --cu-mint100: @mantle;
+      --cu-mint50: @crust;
+
+      --cu-yellow1100: @yellow;
+      --cu-yellow1000: @yellow;
+      --cu-yellow900: @yellow;
+      --cu-yellow800: @yellow;
+      --cu-yellow700: @yellow;
+      --cu-yellow600: @yellow;
+      --cu-yellow500: @yellow;
+      --cu-yellow400: @yellow;
+      --cu-yellow300: @yellow;
+      --cu-yellow200: @mantle;
+      --cu-yellow100: @mantle;
+      --cu-yellow50: @crust;
+
+      --cu-red1100: @red;
+      --cu-red1000: @red;
+      --cu-red900: @red;
+      --cu-red800: @red;
+      --cu-red700: @red;
+      --cu-red600: @red;
+      --cu-red600-16: fade(@red, 16%);
+      --cu-red500: @red;
+      --cu-red500-16: fade(@red, 16%);
+      --cu-red400: @red;
+      --cu-red300: @red;
+      --cu-red200: @mantle;
+      --cu-red100: @mantle;
+      --cu-red50: @crust;
+
+      --cu-purple1100: @lavender;
+      --cu-purple1000: @lavender;
+      --cu-purple900: @lavender;
+      --cu-purple800: @lavender;
+      --cu-purple700: @lavender;
+      --cu-purple600: @lavender;
+      --cu-purple600-16: fade(@lavender, 16%);
+      --cu-purple500: @lavender;
+      --cu-purple500-16: fade(@lavender, 16%);
+      --cu-purple400: @lavender;
+      --cu-purple300: @lavender;
+      --cu-purple200: @mantle;
+      --cu-purple100: @mantle;
+      --cu-purple50: @crust;
+
+      --cu-neonBlue1100: @sky;
+      --cu-neonBlue1000: @sky;
+      --cu-neonBlue900: @sky;
+      --cu-neonBlue800: @sky;
+      --cu-neonBlue700: @sky;
+      --cu-neonBlue600: @sky;
+      --cu-neonBlue600-16: fade(@sky, 16%);
+      --cu-neonBlue500: @sky;
+      --cu-neonBlue500-16: fade(@sky, 16%);
+      --cu-neonBlue400: @sky;
+      --cu-neonBlue300: @sky;
+      --cu-neonBlue200: @mantle;
+      --cu-neonBlue100: @mantle;
+      --cu-neonBlue50: @crust;
+
+      --cu-azureBlue1100: @blue;
+      --cu-azureBlue1000: @blue;
+      --cu-azureBlue900: @blue;
+      --cu-azureBlue800: @blue;
+      --cu-azureBlue700: @blue;
+      --cu-azureBlue600: @blue;
+      --cu-azureBlue600-16: fade(@blue, 16%);
+      --cu-azureBlue500: @blue;
+      --cu-azureBlue500-16: fade(@blue, 16%);
+      --cu-azureBlue400: @blue;
+      --cu-azureBlue300: @blue;
+      --cu-azureBlue200: @mantle;
+      --cu-azureBlue100: @mantle;
+      --cu-azureBlue50: @crust;
+
+      --cu-teal1100: @teal;
+      --cu-teal1000: @teal;
+      --cu-teal900: @teal;
+      --cu-teal800: @teal;
+      --cu-teal700: @teal;
+      --cu-teal600: @teal;
+      --cu-teal600-16: fade(@teal, 16%);
+      --cu-teal500: @teal;
+      --cu-teal500-16: fade(@teal; , 16%);
+      --cu-teal400: @teal;
+      --cu-teal300: @teal;
+      --cu-teal200: @mantle;
+      --cu-teal100: @mantle;
+      --cu-teal50: @crust;
+
+      --cu-orange1100: @peach;
+      --cu-orange1000: @peach;
+      --cu-orange900: @peach;
+      --cu-orange800: @peach;
+      --cu-orange700: @peach;
+      --cu-orange600: @peach;
+      --cu-orange600-16: fade(@peach, 16%);
+      --cu-orange500: @peach;
+      --cu-orange500-16: fade(@peach, 16%);
+      --cu-orange400: @peach;
+      --cu-orange300: @peach;
+      --cu-orange200: @mantle;
+      --cu-orange100: @mantle;
+      --cu-orange50: @crust;
+
+      --cu-pink1100: @pink;
+      --cu-pink1000: @pink;
+      --cu-pink900: @pink;
+      --cu-pink800: @pink;
+      --cu-pink700: @pink;
+      --cu-pink600: @pink;
+      --cu-pink600-16: fade(@pink, 16%);
+      --cu-pink500: @pink;
+      --cu-pink500-16: fade(@pink, 16%);
+      --cu-pink400: @pink;
+      --cu-pink300: @pink;
+      --cu-pink200: @mantle;
+      --cu-pink100: @mantle;
+      --cu-pink50: @crust;
+
+      --cu-violet1100: @mauve;
+      --cu-violet1000: @mauve;
+      --cu-violet900: @mauve;
+      --cu-violet800: @mauve;
+      --cu-violet800-14: fade(@mauve, 14%);
+      --cu-violet700: @mauve;
+      --cu-violet600: @mauve;
+      --cu-violet600-16: fade(@mauve, 16%);
+      --cu-violet500: @mauve;
+      --cu-violet500-16: fade(@mauve, 16%);
+      --cu-violet400: @mauve;
+      --cu-violet300: @mauve;
+      --cu-violet200: @mantle;
+      --cu-violet100: @mantle;
+      --cu-violet50: @crust;
+
+      --cu-brown1100: @maroon;
+      --cu-brown1000: @maroon;
+      --cu-brown900: @maroon;
+      --cu-brown800: @maroon;
+      --cu-brown700: @maroon;
+      --cu-brown600: @maroon;
+      --cu-brown600-16: fade(@maroon, 16%);
+      --cu-brown500: @maroon;
+      --cu-brown500-16: fade(@maroon, 16%);
+      --cu-brown400: @maroon;
+      --cu-brown300: @maroon;
+      --cu-brown200: @mantle;
+      --cu-brown100: @mantle;
+      --cu-brown50: @crust;
+
+      --cu-content-on-primary: @base;
+      --cu-ai-background-subtle-hover: darken(@mauve, 10%);
+      --cu-background-danger-subtle-hover: @base;
+    }
+
+    .cu-status-button-badge__next-status-icon, .cu-status-button-badge__done {
+      fill: @base;
+    }
+
+    .cu-simple-bar__item-container_active .cu-dropdown__toggle:first-child,
+    .cu-simple-bar__item-container_active
+      .cu-simple-bar__pinned-item-hover-actions
+      .ng-star-inserted {
+      color: @text !important;
+      background-color: @surface0;
+    }
+
+    .active-hierarchy-item .cu-project-row__text,
+    .active-hierarchy-item .cu-project-row__icon,
+    .active-hierarchy-item .cu-project-row__ellipsis_icon,
+    .active-hierarchy-item [data-test*="project-row__ellipsis_icon"],
+    .active-hierarchy-item .cu-category-row__text,
+    .active-hierarchy-item .cu-category-row__icon,
+    .active-hierarchy-item .cu-category-row__ellipsis_icon,
+    .active-hierarchy-item [data-test*="category-row__ellipsis_icon"],
+    .active-hierarchy-item .cu-subcategory-row__text,
+    .active-hierarchy-item .cu-subcategory-row__icon,
+    .active-hierarchy-item .cu-subcategory-row__ellipsis_icon,
+    .active-hierarchy-item [data-test*="subcategory-row__ellipsis_icon"],
+    .active-hierarchy-item .cu-dataview-row__text,
+    .active-hierarchy-item .cu-dataview-row__icon,
+    .active-hierarchy-item .cu-dataview-row__ellipsis_icon,
+    .active-hierarchy-item .row-count,
+    .active-hierarchy-item .row-toggle-icon,
+    .active-hierarchy-item .row-actions,
+    .icon.active,
+    .avatar-initials,
+    .custom-icon-svg,
+    .cu-nav-sts__link_active .cu-nav-sts__icon,
+    .cu-nav-sts__link_active .cu-nav-sts__link-text,
+    .cu-status-group-header__label,
+    .cu-status-button-badge__check,
+    .cu-status-group-header__icon .status-indicator-icon,
+    .cu-status-button-badge__label,
+    .cu-simple-bar__container
+      .cu-simple-bar__item_active
+      .cu-simple-bar__item-label,
+    .sidebar-space__browse-button-icon,
+    .cu-simple-bar__item-badge-v3 .counter {
+      color: @base !important;
+    }
+
+    .cu-simple-bar__container
+      .cu-simple-bar__item-container:hover
+      .cu-simple-bar__item-label,
+    .cu-simple-bar__container
+      .cu-simple-bar__item-container:hover
+      .icon.active {
+      color: @text !important;
+    }
+  }
+}