feat(claude): init

[ruiiiijiiiiang]

🎉 Theme for Claude 🎉

Claude.ai, similar to ChatGPT, is an AI-powered chatbot and assistant developed by Anthropic, designed to provide conversational, creative, and problem-solving support. It focuses on generating helpful, safe, and user-aligned responses.

Latte with Peach

Frappe with Sapphire

Macchiato with Flamingo

Mocha with Mauve

🗒 Checklist 🗒

• I have read and followed Catppuccin's submission guidelines.
• I have made a new directory underneath /styles/<name-of-website> containing the contents of the /template directory.
  • I have ensured that the new directory is in lower-kebab-case.
  • I have followed the template and kept the preprocessor as LESS.
• I have made sure to update the userstyles.yml file with information about the new userstyle.
• I have included the following files:
  • catppuccin.user.less - all the CSS for the userstyle, based on the template.
  • preview.webp - composite image of all four individual flavor screenshots (taken with the default accent color of mauve) stitched together, generated via Catwalk.

[ruiiiijiiiiang]

@uncenter Updated:

[uncenter]

This delete button on hover has poor contrast, seems like they force a certain opacity so fading it like we normally do won't work afaik. Maybe just a button/class specific override?

[ruiiiijiiiiang]

This delete button on hover has poor contrast, seems like they force a certain opacity so fading it like we normally do won't work afaik. Maybe just a button/class specific override?

I believe this is just danger-000 over danger-900, which is currently maroon over pink. What do you think is a good choice for their colors? I've tried:

    --danger-000: #hslify(darken(@maroon, 5%)) [];
    --danger-900: #hslify(lighten(@pink, 5%)) [];

and it looks like this:

[uncenter]

fade(@red, 20%) maybe? And like I said I don't think we can change the variables because they force the opacity, we'll want to override the button with it's specific class.

[MathieuDR]

It's a pro feature IIRC.

Here is how it looks now

But when you hover over it

This is how the knowledge looks like

and when I select something

buttons html for if it's not available to you.

<div class="flex mt-3 gap-2 justify-end"><button class="inline-flex
  items-center
  justify-center
  relative
  shrink-0
  can-focus
  select-none
  disabled:pointer-events-none
  disabled:opacity-50
  disabled:shadow-none
  disabled:drop-shadow-none opacity-80
          transition-all
          active:scale-[0.985]
          hover:opacity-100
          hover:underline
          underline-offset-3 text-sm rounded-md text-accent-secondary-000 mr-2 !opacity-100 h-8" type="button">Select all</button>
<button class="inline-flex
  items-center
  justify-center
  relative
  shrink-0
  can-focus
  select-none
  disabled:pointer-events-none
  disabled:opacity-50
  disabled:shadow-none
  disabled:drop-shadow-none 
    text-text-000
    border-0.5
    border-border-300
    relative
    overflow-hidden
    font-styrene
    font-medium
    transition
    duration-100
    hover:border-border-300/0
    bg-bg-300/0
    hover:bg-bg-400
    backface-hidden h-8 rounded-md px-3 text-xs min-w-[4rem] active:scale-[0.985] whitespace-nowrap" type="button">Cancel</button>
<button class="inline-flex
  items-center
  justify-center
  relative
  shrink-0
  can-focus
  select-none
  disabled:pointer-events-none
  disabled:opacity-50
  disabled:shadow-none
  disabled:drop-shadow-none bg-danger-200
          text-oncolor-100
          font-styrene
          font-medium
          transition
          hover:scale-y-[1.015]
          hover:scale-x-[1.005]
          hover:opacity-95 h-8 rounded-md px-3 text-xs min-w-[4rem] active:scale-[0.985] whitespace-nowrap" type="button">Delete <span class="max-sm:hidden"> &nbsp;Selected</span></button></div>

Another small thing, the "select" is hard to read on the chats page

Hope that helps, keep up the good work!

[ruiiiijiiiiang]

fade(@red, 20%) maybe? And like I said I don't think we can change the variables because they force the opacity, we'll want to override the button with it's specific class.

Okay I made a class specific override and it is indeed much better! ❤️

[uncenter]

Button looks great, nice work. See also #1579 (comment), you may have missed my comment?

[ruiiiijiiiiang]

It's a pro feature IIRC.

Here is how it looks now

But when you hover over it

This is how the knowledge looks like

and when I select something

buttons html for if it's not available to you.

<div class="flex mt-3 gap-2 justify-end"><button class="inline-flex
  items-center
  justify-center
  relative
  shrink-0
  can-focus
  select-none
  disabled:pointer-events-none
  disabled:opacity-50
  disabled:shadow-none
  disabled:drop-shadow-none opacity-80
          transition-all
          active:scale-[0.985]
          hover:opacity-100
          hover:underline
          underline-offset-3 text-sm rounded-md text-accent-secondary-000 mr-2 !opacity-100 h-8" type="button">Select all</button>
<button class="inline-flex
  items-center
  justify-center
  relative
  shrink-0
  can-focus
  select-none
  disabled:pointer-events-none
  disabled:opacity-50
  disabled:shadow-none
  disabled:drop-shadow-none 
    text-text-000
    border-0.5
    border-border-300
    relative
    overflow-hidden
    font-styrene
    font-medium
    transition
    duration-100
    hover:border-border-300/0
    bg-bg-300/0
    hover:bg-bg-400
    backface-hidden h-8 rounded-md px-3 text-xs min-w-[4rem] active:scale-[0.985] whitespace-nowrap" type="button">Cancel</button>
<button class="inline-flex
  items-center
  justify-center
  relative
  shrink-0
  can-focus
  select-none
  disabled:pointer-events-none
  disabled:opacity-50
  disabled:shadow-none
  disabled:drop-shadow-none bg-danger-200
          text-oncolor-100
          font-styrene
          font-medium
          transition
          hover:scale-y-[1.015]
          hover:scale-x-[1.005]
          hover:opacity-95 h-8 rounded-md px-3 text-xs min-w-[4rem] active:scale-[0.985] whitespace-nowrap" type="button">Delete <span class="max-sm:hidden"> &nbsp;Selected</span></button></div>

Another small thing, the "select" is hard to read on the chats page

Hope that helps, keep up the good work!

Looks like the dark text is colored with accent-secondary-000, which was previously set to @crust. I've updated it to use @accent instead. Can you try with the latest commit?

[uncenter]

Settings > Billing has this page with two buttons with low contrast text.

This snippet of CSS is the culprit.

.text-always-white {
    --tw-text-opacity: 1;
    color: hsl(var(--always-white)/var(--tw-text-opacity));
}

So I think we can just theme --always-white and have it fixed :)

---

That is it for comments from me, only the unthemed pro features are blocking atm.

[MathieuDR]

Looks like the dark text is colored with accent-secondary-000, which was previously set to @crust. I've updated it to use @accent instead. Can you try with the latest commit?

Everything looks good now!

The only 'issue' i found is that the checkbox on the chats is hard to see

[ruiiiijiiiiang]

Settings > Billing has this page with two buttons with low contrast text.

This snippet of CSS is the culprit.

.text-always-white {
    --tw-text-opacity: 1;
    color: hsl(var(--always-white)/var(--tw-text-opacity));
}

So I think we can just theme --always-white and have it fixed :)

That is it for comments from me, only the unthemed pro features are blocking atm.

Button fixed:

I also added a few overrides for the "upgrade to pro" page, which had a few low contrast elements because of the accents:

[ruiiiijiiiiang]

Looks like the dark text is colored with accent-secondary-000, which was previously set to @crust. I've updated it to use @accent instead. Can you try with the latest commit?

Everything looks good now!

The only 'issue' i found is that the checkbox on the chats is hard to see

Can you please share the html for that button including the checkbox?