About Sass/CSS variables

General rules for Sass variables

  • If possible, create Sass variables, once a property or a value is often used in a module or if the information inside is useful for several modules.
  • “Global/local” variable: if your variable is aimed to be used only in the partial (only related to something in your partial and nothing else), leave it in the partial.
    Otherwise, please put it in design-system-config, in order to make people understand that it can be used in several cases.
  • And if possible, do open an issue on Design System to document it. :)

List of all most important Sass variables

Global layout

  • $aside-bar-width:
  • $header-height:
  • $width-sidebar:
  • $toolbar-height:
  • $subnav-width:
  • $conversations-column-width: used for conversations column width (!), and to align searchbox container:
  • $pm-primary: alias for main color on the project (by default to $pm-blue)
  • $pm-primary-light: alias for main light color on the project (by default to $pm-blue-light)
  • $pm-primary-dark: alias for main dark color on the project (by default to $pm-blue-dark)

For color variables, have a look at colors section.

Overwriting variables

If you need (for your project) to set up different values than the default one of the design system, do overwrite variables in styles-pm.scss, not in Sass partials, as they could be updated later.

Each variable in Sass partials must have !default, in order to avoid break layout on each project with different settings.

CSS variables (custom properties)

These CSS custom properties are present to allow easy theming of the interface. You can see examples in action in Themes section.

Global ones

  • --main-bg-color: global main color
  • --secondary-bg-color: secondary main color
  • --bgcolor-searchbox-field: background-color of searchbox
  • --bgcolor-spacebar: background-color of remaining space bar
  • --bgcolor-aside-link: background-color of link icons in aside bar.
  • --bgcolor-toolbar: background-color of the toolbar
  • --bgcolor-item-column-list: background-color of the list of items/mails (left column in conversations)
  • --bgcolor-item-column-active: background-color of the list of items/mails (left column in conversations)
  • --bgcolor-view-column-detail: background-color of the detail view of emails (right column in conversations)
  • --bgcolor-main-area: background-color of the main area (settings)
  • --color-main-area: color of the main area (settings)
  • --bgcolor-subnav: background-color of the subnavigation
  • --color-subnav-link: color of the subnavigation links
  • --bordercolor-input: border-color of the inputs
  • --bgcolor-input: background-color of the inputs
  • --color-input: color of the text in inputs
  • --bgcolor-highlight: background-color of highlight helper
  • --fillcolor-logo: color used for filling SVG logo
  • --fillcolor-icons: color used for filling icons
  • --color-nav-link: color used for navigation links
  • --color-nav-active: color used for navigation links when active
  • --color-standard-text: color used for text
  • --boxshadow-main: used to apply a box shadow on main content (used for light theme for example)
  • --width-sidebar: width of the navigation
  • --width-subnav: width of the sub navigation (short links)
  • --body-fontsize: global font size.
  • --label-width: the width of label (in forms)

Project-specific ones

  • --bgcolor-calendar-now-indicator: background-color for now hour line indicator

Updating these custom properties allows to create simple themes without surcharging all the CSS stuff.

If you need to check where they are used, perform a search of have a look at design-system-website/_themes.scss, it contains all rules that are using them. This partial should not be used in production, it is only for testing and reference purposes.

Static flat CSS files for themes

Sass files for themes are in _sass/pm-styles/, example _sass/pm-styles/_pm-blue-theme.scss. They are using _sass/pm-styles/_pm-theme-config.scss partial.