Color

Deskblocks uses a color system to simplify color management and application, allowing designers and developers to focus on features rather than the complexities of color.

Color System

Managing colors for an app that supports multiple themes (blue, red, green, orange, yellow), along with light & dark modes, and various contrast levels can be complex. Deskblocks addresses this with a semantic color system, which automates color management, enabling developers to focus on building features.

Semantic Color Token

The semantic token system organizes colors logically for easy application. While it might seem extensive at first, its consistent structure simplifies use. All tokens follow the same semantic structure.

--db-color-{type}-{role}-{prominence}-{interaction}

In this structure, db acts as the namespace, representing ‘deskblocks,’ followed by the keyword ‘color’ and additional parameters specifies the type, role, prominence, and interaction. Among these, only ‘type’ is mandatory, while the others are optional.

Type (required)

The type parameter specifies the type of element that is being colored. There are four possible values for type:

• bg: Background color
• text: Text color
• icon: Icon color
• border: Border color

  --db-color-bg​
  --db-color-text​
  --db-color-icon​ 
  --db-color-border​

Role (optional)

Roles are a way to define the underlying hue based on its intended use rather than the specific color. For example, a success message uses a green background, so instead of labeling it as --db-color-bg-green , it’s called --db-color-bg-success . Here are a few examples.

  --db-color-bg-brand​       
  --db-color-text-info​      
  --db-color-border-warning​ 
  --db-color-icon-danger​

The possible values for the role parameter are:

• Brand: A dynamic hue that adapts to the current theme color. For eg, "--db-color-bg-brand" may start as primary blue, but if the user switches to a green theme, it will change to green.
• Info : A blue hue used to convey information.
• Success: A green hue used to indicate confirmation or approval.
• Danger: A red hue used to signal errors or destructive actions.
• Warning: An orange hue used to alert users to potential problems.
• Disabled: A light grey hue used for inactive buttons, text, borders, and icons.
• Selected: A dynamic hue, similar to the brand color, used for backgrounds and borders of selected elements, adjusting based on the current theme.

Prominence (optional)

To establish hierarchy and adjust visual emphasis, bg, text, and icon elements can be modified with secondary and tertiary variations. Similarly, for borders, there are three options: the default option, which doesn’t require a modifier --db-color-border can be used as for standard divider, strong for a darker border, and light for a lighter border.

  --db-color-text-secondary​  
  --db-color-bg-brand-secondary​ 
  --db-color-icon-tertiary​  

  --db-color-border-light​   
  --db-color-border​ 
  --db-color-border-strong​

Interaction (optional)

The interaction state of an element can be modified using the hover and pressed modifiers.

  --db-color-bg-brand-pressed​ 
  --db-color-text-danger-hover​

Selective Theming

To apply custom styles for specific themes or appearances, use CSS classes to target them. The root element dynamically adds classes like theme-blue and appearance-light based on the current theme and appearance.

For example, to style a node specifically for dark mode and red theme, use the following CSS:

:global(.theme-red.appearance-dark div) {
  /* Your styles here */
}

Color Token Usage Examples

Color Tokens