Devie UI

Theming

Styling across all the Devie UI components is using a unified list of carefully crafted CSS variables.

Default Theme

Following the Installation guide, you should have already defined the default variables in your project.

Customizing Theme

Once the default theme is set up, you can modify values based on your preferences.

You can edit the values directly; however, a cleaner approach is to overwrite them without changing the original, allowing you to keep track of your customizations. Here are different examples of overwrites.

The Default theme is already set up in your project. No CSS overrides are needed - it uses the base CSS variables defined in your globals.scss or default.css file.

theme.css
@layer devie {
  // Defaults
}

This approach to theming can be leveraged to implement dark mode, or even manage multiple themes.

Can I edit one component without modifying the theme? Of course. The code is yours. Each component has its own stylesheet where you are free to change the definition to a different variable, a hardcoded value, or even creating new variables.

List of All Variables

Here is the list of all the variables used by Devie UI.

We prefer variables to serve a functional role as design tokens (e.g. "color-text") rather than hue values typically used in other libraries (e.g. "blue-500").

Color Tokens

TokenDescriptionCurrent
--devie__color__textMain text color.
-
--devie__color__text-subSub-text color.
-
--devie__color__backgroundMain background color.
-
--devie__color__background-subSecondary background color for contrast areas.
-
--devie__color__lineColor for borders and dividers.
-
--devie__color__primaryPrimary brand color for buttons and interactive elements.
-
--devie__color__primary-labelText color compatible with primary color.
-
--devie__color__successColor for success states and confirmations.
-
--devie__color__success-labelText color compatible with success color.
-
--devie__color__warningColor for warning states and cautionary actions.
-
--devie__color__warning-labelText color compatible with warning color.
-
--devie__color__dangerColor for error states and destructive actions.
-
--devie__color__danger-labelText color compatible with danger color.
-

Font Tokens

Tip: Combine font-size with line-height values that lets you match a spacing unit.
TokenDescriptionCurrent
--devie__font-size__normalStandard font size for body text.
-
--devie__font-size__smallFont size for small text elements like captions.
-
--devie__font-size__title1Font size for primary headings.
-
--devie__font-size__title2Font size for secondary headings.
-
--devie__font-size__title3Font size for tertiary headings.
-
--devie__font-familyDefault font family with fallbacks.
-

Radius Tokens

TokenDescriptionCurrent
--devie__radiusDefault border radius for elements.
-
--devie__radius-strongLarger border radius for emphasis.
-

Litteral Color Tokens

Independent color tokens for charts, tags, folders, and other UI elements that need distinct color identities.

TokenDescriptionCurrent
--devie__color__litteral-grayGray color for charts, tags, and folders.
-
--devie__color__litteral-brownBrown color for charts, tags, and folders.
-
--devie__color__litteral-orangeOrange color for charts, tags, and folders.
-
--devie__color__litteral-yellowYellow color for charts, tags, and folders.
-
--devie__color__litteral-greenGreen color for charts, tags, and folders.
-
--devie__color__litteral-blueBlue color for charts, tags, and folders.
-
--devie__color__litteral-purplePurple color for charts, tags, and folders.
-
--devie__color__litteral-pinkPink color for charts, tags, and folders.
-
--devie__color__litteral-redRed color for charts, tags, and folders.
-

Effect Tokens

This section is a work in progress.