Color

Import

Import just the all of the color variables or just the ones you want. Note if you want to make use of data-accent-color you will need to make sure you import the accent css.

/* all colors */
@import "@winnie-ui/base/colors";

/* each color individually */
@import "@winnie-ui/base/colors/red";
@import "@winnie-ui/base/colors/orange";
@import "@winnie-ui/base/colors/yellow";
@import "@winnie-ui/base/colors/green";
@import "@winnie-ui/base/colors/blue";
@import "@winnie-ui/base/colors/purple";
@import "@winnie-ui/base/colors/pink";
@import "@winnie-ui/base/colors/grey";
@import "@winnie-ui/base/colors/black";
@import "@winnie-ui/base/colors/white";

/* accent color */
@import "@winnie-ui/base/colors/accent";

Scales

Winnie CSS includes a default set of colors that is a great place to start when building your next application. These colors are loosely based on the colors provided by Tailwind and were created using the Radix Colors custom palette generator.

Working with Color Scales

Winnie CSS makes working with colors predictable using the Radix Color System. There are 12 colors in each scale, each color has a specific purpose. However, there will be cases where these colors need to be adjusted to get things just right. There is no silver bullet when it comes to swapping hues for dark mode, so be sure to take extra care when designing for dark mode.

Customizing Colors

When the default palette doesn’t suit your needs you can customize any of the colors by overriding the CSS Variables.

Luckily, the community has started to create some amazing tools for generating color palettes. Our color palette is based on the one defined by Radix Color Palette Generator. We suggest you start there when it comes to configuring your brand color.

Each color can be overridden using css variables defined in a global css file in your application. For example, if you want to define a custom brand color for your application you can do the following:

:root,
.light,
.light-theme,
[data-theme="light"] {
  --wui-color-brand-1: #fcfdff;
  --wui-color-brand-2: #f5f9ff;
  --wui-color-brand-3: #eaf2ff;
  --wui-color-brand-4: #dcebff;
  --wui-color-brand-5: #cbe1ff;
  --wui-color-brand-6: #b8d4ff;
  --wui-color-brand-7: #9fc2fb;
  --wui-color-brand-8: #7baaf6;
  --wui-color-brand-9: #3b82f6;
  --wui-color-brand-10: #2c74e9;
  --wui-color-brand-11: #256cde;
  --wui-color-brand-12: #123164;

  --wui-color-brand-a1: #0055ff03;
  --wui-color-brand-a2: #0066ff0a;
  --wui-color-brand-a3: #0062ff15;
  --wui-color-brand-a4: #006eff23;
  --wui-color-brand-a5: #006cff34;
  --wui-color-brand-a6: #0065ff47;
  --wui-color-brand-a7: #005df560;
  --wui-color-brand-a8: #005bee84;
  --wui-color-brand-a9: #005df3c4;
  --wui-color-brand-a10: #0057e5d3;
  --wui-color-brand-a11: #0053d8da;
  --wui-color-brand-a12: #002158ed;

  --wui-color-brand-contrast: #fff;
}

.dark,
.dark-theme,
[data-theme="dark"] {
  --wui-color-brand-1: #fcfdff;
  --wui-color-brand-2: #f5f9ff;
  --wui-color-brand-3: #eaf2ff;
  --wui-color-brand-4: #dcebff;
  --wui-color-brand-5: #cbe1ff;
  --wui-color-brand-6: #b8d4ff;
  --wui-color-brand-7: #9fc2fb;
  --wui-color-brand-8: #7baaf6;
  --wui-color-brand-9: #3b82f6;
  --wui-color-brand-10: #2c74e9;
  --wui-color-brand-11: #256cde;
  --wui-color-brand-12: #123164;

  --wui-color-brand-a1: #0055ff03;
  --wui-color-brand-a2: #0066ff0a;
  --wui-color-brand-a3: #0062ff15;
  --wui-color-brand-a4: #006eff23;
  --wui-color-brand-a5: #006cff34;
  --wui-color-brand-a6: #0065ff47;
  --wui-color-brand-a7: #005df560;
  --wui-color-brand-a8: #005bee84;
  --wui-color-brand-a9: #005df3c4;
  --wui-color-brand-a10: #0057e5d3;
  --wui-color-brand-a11: #0053d8da;
  --wui-color-brand-a12: #002158ed;

  --wui-color-brand-contrast: #fff;
}

Once you have configured your custom brand color you can set data-accent-color to brand and all of your components will use that color as the accent. Keep in mind that brand is a special accent color that has been defined by Winnie CSS. You cannot choose an arbitrary color name and use it as an accent color. Only the colors provided by Winnie CSS can be customized.

Dark Mode

Winnie CSS supports dark mode with no compromises. It even allows you to scope dark mode colors to specific components or sections of your applications.

Usage

Dark mode can be configured via class name or data attribute. For class names you can use dark or dark-theme and for data attributes you can use [data-theme="dark"]

export default function Root() {
  return (
    <html>
      <head></head>
      <body class="winnie-ui" data-theme="dark" data-accent-color="purple">
        <App />
      </body>
    </html>
  );
}

Example

Dark mode can be also be scoped to specific components. This means you are not restricted to the application level. This is useful for items that you want to be higher contrast.

Reference

Below is a list of the available color variables in Winnie CSS.