Skip to content

feat(clickup): init #1954

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 9 commits into
base: main
Choose a base branch
from
+329 −0
Open

feat(clickup): init #1954

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
b639f11
feat(clickup): init
Thomas-Philippot Oct 8, 2025
17f78b2
Merge branch 'main' into feat/clickup
uncenter Oct 8, 2025
5ff6370
update main branch
Thomas-Philippot Oct 8, 2025
d5d41c9
Merge branch 'feat/clickup' of github.com:Thomas-Philippot/userstyles…
Thomas-Philippot Oct 8, 2025
2d38b8e
cu-content-on-primary forgotten
Thomas-Philippot Oct 8, 2025
7f0e97b
fix wrong fade values
Thomas-Philippot Oct 27, 2025
fe56e9d
Merge branch 'main' into feat/clickup
Thomas-Philippot Oct 27, 2025
090650d
change mint to teal
Thomas-Philippot Nov 5, 2025
b2986a0
Merge branch 'main' into feat/clickup
Thomas-Philippot Nov 5, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions scripts/userstyles.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
322 changes: 322 additions & 0 deletions styles/clickup/catppuccin.user.less
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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, 0.78%);
--cu-white-06: fade(@white, 0.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, 0.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, 0.78%);
--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, 20%);
--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;
}
}
}