RippleUI breaking tailwindcss default color shades.

[teddbug-S]

RippleUI breaks tailwindcss colors
Color shades from tailwindcss changes to very light shades and weired looking colors once
I list rippleui as a required dependency in the tailwind config file.
This gets worse when using the latest version of rippleui.

Occurrs with version 1.4.0

To Reproduce
Steps to reproduce the behavior:

1. npm install rippleui
2. Open tailwindcss.config.js
3. Add require("rippleui") to the plugins list.
4. Restart the tailwindcss build process.

Expected behavior
Color shades used before and after the installation of rippleui should be the same
as the original tailwindcss color shades

Screenshots
Color shade bg-green-500 before installing rippleui

Color shade bg-green-500 after installing rippleui

Desktop (please complete the following information):

• OS: Ubuntu Jammy Jellyfish 22.04 LTS
• Browser [chromium, brave]

Smartphone (please complete the following information):

• Device: Tecno Spark 2
• OS: Android 8.0
• Browser: [ Chrome ]

[Siumauricio]

It's working fine, Since RippleUI uses a custom pallete that's why looks different

You can see the pallete here and how to use https://www.ripple-ui.com/docs/get-started/theme

But in the case that you want to use the tailwindcss colors you can use the customization config provided by rippleui to overwrite the existing colors

I'll give an example let's suppose you want to change the green-500

in your tailwind.config.js

TailwindCSS pallete

/** @type {import('rippleui').Config} */
const config = {
  themes: [
    {
      themeName: "light",
      colors: {
+        "green-500": "#23c55e", // you will override the green-500 in the light theme
      },
    },
  ],
};

/** @type {import('tailwindcss').Config} */
module.exports = {
  // the rest config
  plugins: [
    require("rippleui")({
+      ...config,
    })
  ],
};

You can read more about customization here https://www.ripple-ui.com/docs/get-started/customization

by the way use the last version which is 1.5.0 https://www.npmjs.com/package/rippleui

[teddbug-S]

Okay, thanks but I can't just override all the colors I want to use, their quite a lot.

[tonyalaribe]

I ran into this issue as well. This makes it difficult to just drop in ripple into an existing app. Could the ripple colors have a different namespace than the tailwind colors? So they can exist side by side. Eg rpgreen-500 and rpblue-200

[Siumauricio]

This is something that I have been thinking about, because it will be a breaking change, but eventually I'm gonna be force to do that change since I seen some people don't use the package because it broke the current Tailwindcss colors.

This weekend I probably release a new version contain this change, I just will think about the semantic name that each color should have.

Thanks for your suggestions!

[tonyalaribe]

Yeah. Or atleast provide a way to just disable the colors.
I tried to disable the dark and light theme following the ripple-ui documentation, but then my apitoolkit dashboard has no colors anymore. And just looks like some high contrast mode (which actually looks quite nice for a bug tbh), which isn't what I expected by disabling the themes.

[Siumauricio]

Yes, the reason why the colors looks like with high contrast is because when you remove both themes we are not setting any colors so all the components will loose the reference to the color, but I think the best option and easy is just to rename the colors so we are not going to clash the current colors of tailwind and this going to be more intuitive and doesn't break anything

[tonyalaribe]

Thanks @Siumauricio for so quickly making the changes. But I think it's probably not complete.

I noticed a bug where text that should have color: RGB(255,255,255) by default are now using CSS variables that don't exist.
color: rgb(var(--white) / var(--tw-text-opacity)); where variable --white doesn't exist.

This is only the case with the plugin enabled. otherwise white is a hard coded color and not a CSS variable

[tonyalaribe]

I fixed it temporarily by adding

@layer components {
  html {
    --white: 255 255 255;
  }
}

to my tailwind css

[tonyalaribe]

I also needed to disable the light and dark themes to prevent adding the background colors by default.

But everything now works nicely.

[Siumauricio]

Thanks for the response @tonyalaribe, Great catch I will remove white and black color variable from the config

If you want to remove the background and text-color by default you can add a flag to the config defaultStyle which is a boolean property

https://www.ripple-ui.com/docs/get-started/customization#how-to-disable-the-background-color-and-color-that-comes-by-default