Looking for thoughts and discussion! Tell me if you think another library/approach solves the same problems. Tell me why this library shouldn't exist!
Documentation
Color System

Color System

Overview

This semantic color system was designed so that a single class makes sense for themes that go from lighter to darker colors, as well as themes that go from darker to lighter colors. This is why Chimera does not use the 100-900 scale for colors, since those signify a fixed light->dark scale.

The choices for the semantic color names came from studying the color/element patterns on many websites. It allows for a lot of flexibility but at the same time, but makes it really easy to change specific groups of colors on your site.

This color system was heavily inspired by DaisyUI's color system (opens in a new tab).

Color Modifiers

1-3 (prominence) (e.g., base-2 or base-3)

1 being the most prominent color and 3 being least prominent color Used for backgrounds, text, or other elements where you need to create subtle contrast.

Prominence Example

So why don't we use 100-900 for these colors too? Let's say your background is base-100 and a card on the background is base-200. This makes total sense in light mode, where white is the background and a light grey layers on top of that. It no longer makes sense if you want to switch to a dark mode where the background is black and the card is supposed to be dark grey.

100-900 (light to dark) (e.g., primary-100, secondary-800)

100 is the lightest color and 900 is the darkest color. This is the scale that Tailwind uses for colors. The components in Chimera do not use these for default styles, but they are available for use from the default Tailwind theme. I suggest keeping these in your arsenal for when you really need to use a color that is not in the color system!

Fun thing I stumbled upon while researching, this is the Tweet thread (opens in a new tab) Adam Wathan started when he was researching the same thing!

100-900 Example From Tailwind's Customizing Colors (opens in a new tab)

content, content-contrast (e.g., primary-content, text-base-content-)

This is used for text or other content that is on top of a background color.

The -contrast modifier is used when the content color does not provide enough contrast. For example, if primary-content is white and does not have enough contrast on a bg-primary-subtle. In this case, you would use primary-content-contrast. However, -contrast is not always needed. For example, if your warning, warning-focus, and warning-subtle are all yellows that would be better with dark text, you should set both warning-content and warning-content-contrast to the same color.

The content modifier can be used with either the prominence modifier or a contrast modifier. Examples:

  • primary-content
  • primary-content-contrast
  • primary-content-2

Content Example

focus (e.g., secondary-focus, success-focus)

Focus colors are used for elements like buttons, alerts, icons, etc. They are used when the element is focused or hovered.

subtle (e.g., hover:bg-secondary-subtle)

Subtle colors are used for elements like buttons, alerts, icons, etc. They are often used for background colors when the element is hovered or focused. Subtle Example

Colors

This system was designed to work for themes that go from lighter background colors to darker foreground colors, as well as themes that do the inverse. This is why Chimera does not use the 100-900 scale for colors, since those signify a fixed light->dark scale.

You'll notice there are a LOT of colors in this color system. Don't be afraid! Most of these colors, you won't need to change. A lot of these colors will also be the same. For example, you might use the same color for primary-content and secondary-content.

Base

Base colors are used for backgrounds.

Name & Usage
Description
CSS Variable
base / base-1
bg-base-1
Main background color
--base
base-2
bg-base-2
Background for closer content, like cards
--base-2
base-3
bg-base-3
Used to provide additional contrast / layers. Should be rarely used.
--base-3
base-content / base-content-1
bg-base-content-1
Main text color
--base-content-1
base-content-2
bg-base-content-2
Text color used to provide contrast from base-content-1, usually for headers or labels
--base-content-2
base-content-3
bg-base-content-3
Text color used to provide contrast from base-content-1 and 2, usually for small details. Should be rarely used
--base-content-3
base-content-contrast
bg-base-content-contrast
Base content contrast color
--base-content-contrast
line
divide-y-line
Used for borders, dividers, or any other thin lines
--line

Overlay

Overlay colors are used for background colors of floating elements like modals, dropdowns, menus, etc. They should be similar but distinct from base colors that they will be on top of.

Name & Usage
Description
CSS Variable
overlay / overlay-1
bg-overlay-1
Overlay color one
--overlay
overlay-2
bg-overlay-2
Overlay color two
--overlay-2
overlay-3
bg-overlay-3
Overlay color three
--overlay-3
overlay-content / overlay-content-1
bg-overlay-content-1
Overlay content color one
--overlay-content
overlay-content-2
bg-overlay-content-2
Overlay content color two
--overlay-content-2
overlay-content-3
bg-overlay-content-3
Overlay content color three
--overlay-content-3
overlay-content-contrast
bg-overlay-content-contrast
Overlay content contrast color
--overlay-content-contrast

Primary

Primary colors are used for the main actions in your interface, think call to action buttons, links, etc. Primary should be distinct, and is most likely one of your brand colors.

Name & Usage
Description
CSS Variable
primary
bg-primary
Primary color
--primary
primary-focus
bg-primary-focus
Primary focus color
--primary-focus
primary-subtle
bg-primary-subtle
Primary subtle color
--primary-subtle
primary-content
bg-primary-content
Primary content color
--primary-content
primary-content-contrast
bg-primary-content-contrast
Primary content contrast color
--primary-content-contrast

Secondary

Secondary colors are used for actions of lower priority than primary. Secondary is also good for other elements that you want to highlight, such as tags, less important buttons, icons, etc.

Name & Usage
Description
CSS Variable
secondary
bg-secondary
Secondary color
--secondary
secondary-focus
bg-secondary-focus
Secondary focus color
--secondary-focus
secondary-subtle
bg-secondary-subtle
Secondary subtle color
--secondary-subtle
secondary-content
bg-secondary-content
Secondary content color
--secondary-content
secondary-content-contrast
bg-secondary-content-contrast
Secondary content contrast color
--secondary-content-contrast

Info

Info colors are used for informational elements, such as alerts, icons, etc.

Name & Usage
Description
CSS Variable
info
bg-info
Info color
--info
info-focus
bg-info-focus
Info focus color
--info-focus
info-subtle
bg-info-subtle
Info subtle color
--info-subtle
info-content
bg-info-content
Info content color
--info-content
info-content-contrast
bg-info-content-contrast
Info content contrast color
--info-content-contrast

Success

Success colors are used for success elements, such as alerts, icons, etc.

Name & Usage
Description
CSS Variable
success
bg-success
Success color
--success
success-focus
bg-success-focus
Success focus color
--success-focus
success-subtle
bg-success-subtle
Success subtle color
--success-subtle
success-content
bg-success-content
Success content color
--success-content
success-content-contrast
bg-success-content-contrast
Success content contrast color
--success-content-contrast

Error

Error colors are used for error elements, such as alerts, icons, etc.

Name & Usage
Description
CSS Variable
error
bg-error
Error color
--error
error-focus
bg-error-focus
Error focus color
--error-focus
error-subtle
bg-error-subtle
Error subtle color
--error-subtle
error-content
bg-error-content
Error content color
--error-content
error-content-contrast
bg-error-content-contrast
Error content contrast color
--error-content-contrast

Warning

Warning colors are used for warning elements, such as alerts, icons, etc.

Name & Usage
Description
CSS Variable
warning
bg-warning
Warning color
--warning
warning-focus
bg-warning-focus
Warning focus color
--warning-focus
warning-subtle
bg-warning-subtle
Warning subtle color
--warning-subtle
warning-content
bg-warning-content
Warning content color
--warning-content
warning-content-contrast
bg-warning-content-contrast
Warning content contrast color
--warning-content-contrast