radix-ui / colors Goto Github PK

Is there a way to use @radix-ui/colors with tailwind's opacity modifier?
I know I could just copy the content and modify it, but I would prefer to keep it sync and simple.

https://tailwindcss.com/docs/customizing-colors#using-css-variables

I'd like to toggle the dark theme depending on the browser setting, which can be accessed using prefers-color-scheme.

What's the recommended way of doing that?

Hey everyone,

Great work on the color system.
I have question about the alpha variants.
It seems like they are the same spectrum as a solid color, but I am not sure how I would best use them.

Expectation

My first intuition with transparency is to extend the solid color with it when I need the background to be transparent, but want to keep the same solid base color. This is how Tailwind does it. This gives me the ability to have all the combinations of a color and all the possible transparencies.

Question

It seems to me that the radix alpha colors would be used differently, because the colors are picked deliberately. Could you explain the idea behind the alpha colors and how you intend for them to be used?

I"d like to use the dark colors without the automatic dark mode. In instance have a --brown-dark-1

Hello,
from the Radix UI homepage:

Text colors are guaranteed to pass target contrast ratios against the corresponding background colors.

I have just published a new version of a11y-contrast and included both Radix UI palettes under examples. Because your approach is slightly different than my "magic numbers", I have temporary removed all colors apart from "backgrounds" (1 and 2) and "accessible text" (11 and 12).

I have then checked whether each background/text combination passes WCAG AA:

npx a11y-contrast examples/radix-light.json --min-ratio-4.5=9

This returns 283 inaccessible color combinations. Maybe your statement means that only combinations within the same color family are expected to be always accessible (I would then suggest to make it more prominent in the documentation), but I have found a couple of violations here as well:

• amber-2 / amber-11 (4.432952188282118)
• orange-1 / orange-11 (4.408486700021852)
• yellow-1 / yellow-11 (4.478200938191756)

Note: The dark palette is accessible for all background/text combinations, even cross-family.

I can't just pass a number 1-12 after color name?

<Text color="gray-5">Count: {1000}</Text>

I must use inline styles, so Theme components are limited to a single shade if using color prop?

https://www.radix-ui.com/colors/docs/overview/usage

<Text style={{ color: 'var(--gray-8)' }}>Count: {1000}</Text>

Do you have any plans to support React Native color formats? When using it inside my project, I get the following error:

Invariant Violation: Invalid prop `backgroundColor` supplied to `StyleSheet generated`: hsl(136 50.0% 98.9%)
Valid color formats are
  - '#f0f' (#rgb)
  - '#f0fc' (#rgba)
  - '#ff00ff' (#rrggbb)
  - '#ff00ff00' (#rrggbbaa)
  - 'rgb(255, 255, 255)'
  - 'rgba(255, 255, 255, 1.0)'
  - 'hsl(360, 100%, 100%)'
  - 'hsla(360, 100%, 100%, 1.0)'
  - 'transparent'
  - 'red'
  - 0xff00ff00 (0xrrggbbaa)

I could fix it in my code with a simple helper function that converts hsl(136 50.0% 98.9%) to hsl(136, 50.0%, 98.9%), but I just wondered If you might already have a (planned) solution.

Thanks for creating and maintaining this repository!

Not:

export const gray = {
  gray1: "#fcfcfc",
  gray2: "#f9f9f9",
  gray3: "#f0f0f0",
  // etc.
};

But:

export const gray = {
  1: "#fcfcfc",
  2: "#f9f9f9",
  3: "#f0f0f0",
  // etc.
};

This gives the ability to swap colors dynamically:

function createTheme(palette: Palette) {
  return {
    background: palette[1],
    foreground: palette[12],
    // etc.
  }
}

const blueTheme = createTheme(colors.blue)
const redTheme = createTheme(colors.red)

For example, Tailwind does the same.

Hi, we love your color system but find ourselves wanting for a slightly different green option. Do you hand pick all the colors in each scale or do you have a standard set of levels so that given a single color (say step 9) you could generate the rest of the steps?

Lyft have a cool tool that does something like that but we are missing the parameters to recreate Radix compatible color scales: https://lyft-colorbox.herokuapp.com/

I'd be happy to help build a tool like that if you guys can help with the math :-)

Hi there, really love what you guys have done with this library and others (Stitches + Primitives are next level 🔥) and looking at using this on my next project. However I wanted to double check re the Steps 9–10: Solid backgrounds section in the docs, as I may have missed something https://www.radix-ui.com/docs/colors/palette-composition/understanding-the-scale#steps-910-solid-backgrounds.

It advises that these points on the color scale are useable for component backgrounds in combination with white text, and shows a grid of typical button elements to demonstrate. But of the buttons in the list, only the Plum, Purple, Violet, Indigo, Sky, Mint, Lime, Yellow, and Amber meet the minimum 4.5:1 ratio guideline for this font size, despite bold text being used. A font size of 18.6px (ish) or more would lower the acceptable contrast ratio to 3:1 allowing the others to pass, but the displayed buttons are set with 15px.

It’s a similar situation with the example ‘call-to-action' buttons under the Steps 3–5: Component backgrounds section - over half of the buttons have a contrast below 4.5:1.

I’m wasn’t aware of any exceptions to the 4.5:1 ratio guideline for text in UI elements (other than the previously stated larger + bold text combo lowering it to 3:1), but I may be wrong - I’m hoping I am as I really like the look of this library :). Is this a conscious compromise to allow the most widely useable palette of colors, and buttons like these should only be used with larger font sizes than those displayed, or am I missing something?

Many thanks!

TailwindCSS recently added an additional 950 shade that works really well for dark mode. It allows for a gorgeous dark background without falling back to black. The TailwindUI Commit Template shows it off nicely:

To maintain parity, the light color scales could also add an additional lighter background shade. Indeed, many applications using Radix Colors already map the app background color to white, suggesting a desire for such a step.

Hello Radix Colors team,

I've recently discovered an inconsistency in the Radix Colors documentation regarding the contrast ratios for text.

Documentation Reference

According to Understanding the Scale, "Steps 11 and 12—which are designed for text—are guaranteed to pass 4.5:1 contrast ratio on top of a step 3 background from the same scale."

Issue Found

However, upon reviewing and calculating the contrast ratios for several scales using Chrome Dev Tools, I found that the Yellow, Amber, and Orange scales did not meet the specified 4.5:1 contrast guideline when used in the manner described.

Details

• Document location: Understanding the Scale
• Color scales in question: Yellow, Amber, Orange
• Tool used for calculations: Chrome Dev Tools
• Expected contrast ratio: 4.5:1
• Actual contrast ratios:
  • Yellow = 4.33
  • Amber = 4.44
  • Orange = 4.13

Suggestion

I believe that updating the documentation to reflect more accurate information or adjusting the color scales (Yellow, Amber, Orange) to meet the original guideline would be highly beneficial for users.

Thank you for considering this issue. I appreciate the work you do and am eager to assist in any way possible to help resolve this.

I have a UI in which the toggle thumb should remain white on both light and dark mode:

This doesn't seem possible with Radix Colors without manually defining a new variable --white: <hardcoded radix color value>. Is this the recommended way? Is adding an escape hatch for using a static non-theme dependent color a feature that you would consider supporting?

Hi guys, thanks for the good work.

I noticed that every color has its own type generated while a generic type could be made.

type ColorScale = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
type ColorShadeKeys<T extends string> = `${T}${ColorScale}`;
type ColorShades<T extends string> = Record<ColorShadeKeys<T>, string>;

example usage ColorShades<"slate">

I use these generics in a function to generate right typings for color name transformation. (using same name for a neutral color but using different colors in different themes with stiches)

export const transformColor = <TIn extends string, TOut extends string>(
  colors: ColorShades<TIn>,
  from: TIn,
  to: TOut
) =>
  Object.entries(colors).reduce((acc, [key, value]) => {
    acc[key.replace(from, to)] = value as string;
    return acc;
  }, {} as ColorShades<TOut>);

example usage transformColor(slateDark, 'slate', 'neutral')

Not sure if all this helps anyway, but it could reduce the generated typing file sizes, at least.

Hi,

i was wondering how you calculated the alpha colors to be the same colors as the non alpha colors?

i tried it with this formular but it's not matching the exact same color:

const [r1, g1, b1] = originalRgbColor;
const [r2, g2, b2] = backgroundRgbColor;
const alphaRgbColor = [
  (r1 - r2) / alpha + r2,
  (g1 - g2) / alpha + g2,
  (b1 - b2) / alpha + b2,
  alpha
];

Is there another formular to calculate the alpha color?

Are there plans to add a StyleX package similar to the @stylex/open-props version of the open-props? Thank you.

It’s a docs issue but still relevant to colours so inserting it here.

I get a warning in lighthouse. I'm using tomato9 as button background, with white as text color.

I would like to use postcss-jit-props to extract only the variables I need from each colour stylesheet. It would allow me to do the following:

module.exports = {
  plugins: {
    "postcss-jit-props": {
      files: [
        path.resolve(__dirname, "node_modules/@radix-ui/colors/index.css"),
      ],
    },
  },
};

Now I should be able to use any radix colour anywhere in my css and postcss will import only that variable from the index.css file. However it requires that all available CSS variables be stored in a single file to read from. There is no option for this other than for me to combine all the available colour CSS files into a single file and use that.

Instead, I propose since there is already an index.js file exporting all the colours, why not include an index.css file that includes every colour variable.

https://www.radix-ui.com/colors

when you opened the site after you scroll only the nav bar is visible at initial load the navbar isn't visible

v3.0.0 was released 3 days ago with out any documentation (nbd).

Just curious are there any actual breaking changes? From an API / consumption perspective, it looks the same. The colors also appear identical, just written in non hsl form. (Which maybe that is what is considered the breaking change)

Any notes on upgrading from v2 to v3? thx

Is there any differences at all?

I absolutely love this project — the palette itself is stunning, and the documentation and guidance is extremely useful and reflects a tremendous amount of thoughtfulness and deliberation.

That said, I currently have several projects that rely on Tailwind, and even though I'd like to experiment with the radix colors, it's not easy.

What I'm currently doing is this (in my tailwind.config.js).

module.exports = {
  theme: {
    extend: {
      colors: {
        transparent: 'transparent',
        // ...
        white: '#fff',
        dark: {
          // ...
          bronzeA12: 'hsl(20 99.8% 96.4% / 0.974)',
          crimson1: 'hsl(335 20.0% 9.6%)',
          // ...
          crimson12: 'hsl(332 87.0% 96.0%)',
        },
        light: {
          bronzeA1: 'hsl(0 89.3% 18.3% / 0.012)',
          // ...
          bronzeA12: 'hsl(12 98.7% 5.7% / 0.832)',
          crimson1: 'hsl(332 100% 99.4%)',
          // ...
          crimson12: 'hsl(340 65.0% 14.5%)',
        },
      },
    },
  },
};

It's kind of clunky, and so I was wondering if there has been any consideration in making the colors available as a tailwind plugin to simplify the process?

If you don't plan on adding tailwind support, but still think it's worthwhile, it may be something I'm able to do myself.

Thanks for the great project!

I've been using @radix-ui/colors for a while now. Recently, working on a small project I noticed there isn't any scss/sass modules exported from the library. I understand that we can directly use css variables in sass files. But, it is always better if we are able to use $blue7 instead of var(--blue7).

I would love to work on this feature creating a PR for the same.

Thank-you 😊

When i copy the colours as SVG. They are not exported with correct colour palette.

Here is the wrong color palette. That it exports

Hi,

the five color are not correct. The values of the colors 7,  need to be swapped with 9, 10

Eg vor sky:

• --colors-sky7 should have the value of --colors-sky9
• --colors-sky8 should have the value of --colors-sky10
• --colors-sky9 should have the value of --colors-sky7
• --colors-sky10 should have the value of --colors-sky8

The scale for Radix color is incredibly thought out and clear, however, when thinking about primary buttons, while 9 would be the background and 10 would be the hover state, is there a recognized opinion on the disabled state for the background?

On this page we can copy the values for particular scale but not for individual item. As a designer, I have to go to console panel and copy the code to bring that in Figma.

It'd be great to have option to copy hex code for any particular item from the scale i.e. gray-5.

Also, providing a Figma template for all the scales would also help designers work easily.