shadcn-ui

[Tnixc]

Link to repository

https://github.com/Tnixc/shadcn-ui/tree/main

Screenshots

Any additional comments?

It's a bunch of css variables in the proper format. I think I chose the values properly, but please review the choice of colors as I can change it easily. Also all the values that are the same are based on shadcn/ui's default.

Submission Guidelines

• I have read and followed Catppuccin's submission guidelines.

[errorcodezero]

This looks really cool. I hope this gets added to the catppuccin org

[Tnixc]

Thanks. I'm not really sure what this is waiting on right now.

[uncenter]

I just gave it a review and it looks fine to me!

[sgoudham]

Just quickly taking a look at the preview, is there any reason for the Save Changes button to be red compared to the blue ones?

The default example on their website seems to indicate that it should all be one colour?

[uncenter]

I'm not sure where the preview screenshots are from but it looks fine to me when I apply the variables to the shadcn/ui examples with the following userstyle:

/* ==UserStyle==
@name           ui.shadcn.com
@namespace      shadcn/ui
@version        0.1.0
==/UserStyle== */

@-moz-document domain("ui.shadcn.com") {
  :root,
  :root.dark {
    --background: 229.091 18.644% 23.137%; /* base */
    --foreground: 227.234 70.149% 86.863%; /* text */

    --muted: 230 15.584% 30.196%; /* surface0 */
    --muted-foreground: 226.667 43.689% 79.804%; /* subtext1 */

    --popover: 229.091 18.644% 23.137%; /* base */
    --popover-foreground: 227.234 70.149% 86.863%; /* text */

    --card: 229.091 18.644% 23.137%; /* base */
    --card-foreground: 227.234 70.149% 86.863%; /* text */

    --border: 227.143 14.737% 37.255%; /* surface1 */
    --input: 227.143 14.737% 37.255%; /* surface1 */

    --primary: 276.667 59.016% 76.078%; /* mauve */
    --primary-foreground: 229.091 18.644% 23.137%; /* base */

    --secondary: 230 15.584% 30.196%; /* surface0 */
    --secondary-foreground: 227.234 70.149% 86.863%; /* text */

    --accent: 230 15.584% 30.196%; /* surface0 */
    --accent-foreground: 227.234 70.149% 86.863%; /* text */

    --destructive: 358.812 67.785% 70.784%; /* red */
    --destructive-foreground: 230.526 18.812% 19.804%; /* mantle */

    --ring: 227.234 70.149% 86.863%; /* text */

    --radius: 0.5rem;
  }
}

[Tnixc]

The example I used used --destructive there.

[sgoudham]

I was just previewing the website in their themes page -> https://ui.shadcn.com/themes

When you set it to blue, every component is set to blue as default. I couldn't help but notice that our catwalk previews have one element which is red and the rest blue. Obviously its meant to be changed, but the preview below gives me the impression that we provide files that have 2 accents mixed together by default?

[Tnixc]

Okay, I'll change that and make it more clear that that is the destructive color.

[Tnixc]

Done

[uncenter]

Is it worth adding the wrapper code around the variables (:root, .dark, etc.)? The theme generator on https://ui.shadcn.com/themes has it:

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 3.9%;
    --primary: 240 5.9% 10%;
    --primary-foreground: 0 0% 98%;
    --secondary: 240 4.8% 95.9%;
    --secondary-foreground: 240 5.9% 10%;
    --muted: 240 4.8% 95.9%;
    --muted-foreground: 240 3.8% 46.1%;
    --accent: 240 4.8% 95.9%;
    --accent-foreground: 240 5.9% 10%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 5.9% 90%;
    --input: 240 5.9% 90%;
    --ring: 240 5.9% 10%;
    --radius: 0.5rem;
  }

  .dark {
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;
    --card: 240 10% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 240 10% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 240 5.9% 10%;
    --secondary: 240 3.7% 15.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 240 3.7% 15.9%;
    --muted-foreground: 240 5% 64.9%;
    --accent: 240 3.7% 15.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 3.7% 15.9%;
    --input: 240 3.7% 15.9%;
    --ring: 240 4.9% 83.9%;
  }
}

[Tnixc]

I suppose, but it's not like you have to put latte in light or mocha in dark though

[sgoudham]

So I thought a little more about this.

It looks like shadcn-ui hard depends on TailwindCSS, so I believe that it would be much better implemented as part of our catppuccin/tailwindcss port?

I'd like to avoid merging a repository with a few lines of CSS duplicated which can technically be offered through one of our existing ports.