Color

Deskblocks uses a color system to simplify color management and application, allowing 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), modes (light and dark), and various contrast levels can be complex. To address this, a semantic color system has been developed. This system handles all the heavy lifting, allowing developers to focus on features without worrying about the intricacies of color management.

Semantic Color Token

The semantic color token system organizes colors in a meaningful way, making them easier to manage and apply. Though it may initially seem to have a lot of tokens, once you understand its structure, it becomes easy to 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

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

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

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

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​

Color Tokens