Link copied to clipboard!

CSS Variables

CSS variables — also known as ‘CSS custom properties’ — allow you to customize the look and feel of the Cord components (colors, spacing, fonts, etc.) so that they look native to your application’s design. Each component has a set of CSS variables specific to it, listed on the component’s documentation page.

customization-css-variables-8de19a.png

You will define any values in your own CSS stylesheet. For example, this CSS will set the border-radius of avatars for all Cord components that allow customization through this CSS variable:

body {
  --cord-avatar-border-radius: 10px;
}

Whereas this CSS will only change avatars in the <cord-page-presence> component:

cord-page-presence {
  --cord-avatar-border-radius: 10px;
}

Figma template

Decide how you want to use and customize the components by adding them to your designs. Get the Figma template →

CSS Custom Properties

Default colors

The default colors used to theme all components.
Name Default Description
--cord-color-base #FFFFFF Basic background for most elements
--cord-color-base-strong #F6F6F6 Background for highlighted elements, e.g. annotation
--cord-color-base-x-strong #DADCE0 Hover states and borders
--cord-color-content-primary #696A6C Most content, e.g. message text
--cord-color-content-secondary #97979F Supplementary content, e.g. timestamps
--cord-color-content-emphasis #121314 Links, button content and usernames
--cord-color-brand-primary #121314 Primary buttons
--cord-color-notification #0079FF Notifications, e.g. unread message
--cord-color-alert #EB5757 Destructive elements
--cord-color-launcher #F4FFA0 Floating sidebar launcher
--cord-color-success #71BC8F Completed actions

Font

The font used across all Cord components.
Name Default
--cord-font-family System font

Border radius

The border radius for relevant elements. By default, small and large take a multiple of medium.
Name Default
--cord-border-radius-small calc(var(--cord-border-radius-medium) / 2)
--cord-border-radius-medium 4px
--cord-border-radius-large calc(var(--cord-border-radius-medium) * 2)

Shadows

The box-shadows applied to certain elements, generally as hover states.
Name Default
--cord-shadow-small 0 2px 4px 0 rgba(0,0,0,0.08)
--cord-shadow-large 0 2px 16px 0 rgba(0,0,0,0.16)

Buttons

There are three types of button: primary, secondary, and tertiary. Define the colors for each type across different states (hover, active, etc.).
Name Default
--cord-primary-button-background-color --cord-color-brand-primary
--cord-primary-button-background-color--hover --cord-color-brand-primary
--cord-primary-button-background-color--active --cord-color-brand-primary
--cord-primary-button-background-color--disabled --cord-color-content-primary
--cord-primary-button-content-color --cord-color-base
--cord-primary-button-content-color--hover --cord-color-base
--cord-primary-button-content-color--active --cord-color-base-x-strong
--cord-primary-button-content-color--disabled --cord-color-base
--cord-secondary-button-background-color --cord-color-base-strong
--cord-secondary-button-background-color--hover --cord-color-base-x-strong
--cord-secondary-button-background-color--active --cord-color-brand-primary
--cord-secondary-button-background-color--disabled --cord-color-base-strong
--cord-secondary-button-content-color --cord-color-content-emphasis
--cord-secondary-button-content-color--hover --cord-color-content-emphasis
--cord-secondary-button-content-color--active --cord-color-base
--cord-secondary-button-content-color--disabled --cord-color-content-primary
--cord-tertiary-button-background-color transparent
--cord-tertiary-button-background-color--hover --cord-color-base-strong
--cord-tertiary-button-background-color--active --cord-color-base-x-strong
--cord-tertiary-button-background-color--disabled transparent
--cord-tertiary-button-content-color --cord-color-content-emphasis
--cord-tertiary-button-content-color--hover --cord-color-content-emphasis
--cord-tertiary-button-content-color--active --cord-color-content-emphasis
--cord-tertiary-button-content-color--disabled --cord-color-content-secondary

Avatars

Define avatar shape, as well the appearance when profile photos are missing.
Name Default
--cord-avatar-border-radius 4px
--cord-avatar-text-color --cord-color-base
--cord-avatar-background-color --cord-color-brand-primary
--cord-facepile-background-color --cord-color-base
--cord-facepile-avatar-border-width 2px
--cord-facepile-avatar-overlap 4px

Tooltips

Tooltips provide extra context, and are displayed when hovering an element.
Name Default
--cord-tooltip-background-color --cord-color-brand-primary
--cord-tooltip-content-color --cord-color-base

Annotations

Define the appearance of the annotation pins that will appear on your application’s pages.
Name Default
--cord-annotation-pin-color --cord-color-brand-primary
--cord-annotation-pin-outline-color --cord-color-base
--cord-annotation-pin-z-index 2147483643
--cord-annotation-pin-rotate 0deg
--cord-annotation-arrow-color --cord-color-brand-primary
--cord-annotation-arrow-outline-color --cord-color-base
Styles specific to the <Sidebar /> component.
Name Default
--cord-sidebar-background-color --cord-color-base
--cord-sidebar-header-background-color --cord-color-base
--cord-sidebar-width 312px
--cord-sidebar-z-index 2147483641

Floating sidebar launcher

The default floating launcher used by <cord-sidebar />, i.e. if you don’t set show-launcher to false.
Name Default
--cord-launcher-background-color --cord-color-launcher
--cord-launcher-background-color--hover --cord-launcher-background-color
--cord-launcher-background-color--active --cord-launcher-background-color
--cord-launcher-content-color --cord-color-content-emphasis
--cord-launcher-content-color--hover --cord-launcher-content-color
--cord-launcher-content-color--active --cord-launcher-content-color
The dedicated <cord-sidebar-launcher /> component, if used instead of the default launcher above
Name Default
--cord-sidebar-launcher-font-size 14px
--cord-sidebar-launcher-line-height 20px
--cord-sidebar-launcher-letter-spacing normal
--cord-sidebar-launcher-text-color --cord-secondary-button-content-color
--cord-sidebar-launcher-text-color--hover --cord-secondary-button-content-color--hover
--cord-sidebar-launcher-text-color--active --cord-secondary-button-content-color--active
--cord-sidebar-launcher-text-color--disabled --cord-secondary-button-content-color--disabled
--cord-sidebar-launcher-background-color --cord-secondary-button-background-color
--cord-sidebar-launcher-background-color--hover --cord-secondary-button-background-color--hover
--cord-sidebar-launcher-background-color--active --cord-secondary-button-background-color--active
--cord-sidebar-launcher-background-color--disabled --cord-secondary-button-background-color--disabled
--cord-sidebar-launcher-padding 6px 8px
--cord-sidebar-launcher-gap 4px
--cord-sidebar-launcher-icon-size 20px
--cord-sidebar-launcher-badge-background-color --cord-color-notification
--cord-sidebar-launcher-badge-text-color --cord-color-base

Thread

Styles specific to the <Thread /> component.
Name Default
--cord-composer-height-max 40vh
--cord-composer-height-min 40px
--cord-thread-background-color --cord-color-base
--cord-thread-border 1px solid var(--cord-color-base-x-strong)
--cord-thread-border-radius --cord-border-radius-medium
--cord-thread-send-button-font-size 14px
--cord-thread-send-button-text-color --cord-primary-button-content-color
--cord-thread-send-button-text-color--hover --cord-primary-button-content-color--hover
--cord-thread-send-button-text-color--active --cord-primary-button-content-color--active
--cord-thread-send-button-text-color--disabled --cord-primary-button-content-color--disabled
--cord-thread-send-button-background-color --cord-primary-button-background-color
--cord-thread-send-button-background-color--hover --cord-primary-button-background-color--hover
--cord-thread-send-button-background-color--active --cord-primary-button-background-color--active
--cord-thread-send-button-background-color--disabled --cord-primary-button-background-color--disabled
--cord-thread-send-button-padding 8px

Floating threads

Styles specific to the <FloatingThreads /> component.
Name Default
--cord-floating-threads-font-size 14px
--cord-floating-threads-line-height 20px
--cord-floating-threads-letter-spacing normal
--cord-floating-threads-text-color --cord-secondary-button-content-color
--cord-floating-threads-text-color--hover --cord-secondary-button-content-color--hover
--cord-floating-threads-text-color--active --cord-secondary-button-content-color--active
--cord-floating-threads-text-color--disabled --cord-secondary-button-content-color--disabled
--cord-floating-threads-background-color --cord-secondary-button-background-color
--cord-floating-threads-background-color--hover --cord-secondary-button-background-color--hover
--cord-floating-threads-background-color--active --cord-secondary-button-background-color--active
--cord-floating-threads-background-color--disabled --cord-secondary-button-background-color--disabled
--cord-floating-threads-padding 6px 8px
--cord-floating-threads-gap 4px
--cord-floating-threads-icon-size 20px

Thread list

Styles specific to the <ThreadList /> component.
Name Default
--cord-thread-list-gap 24px
--cord-thread-list-padding 8px

Page presence

Styles specific to the <PagePresence /> component.
Name Default
--cord-page-presence-avatar-size 20px

Inbox launcher

Styles specific to the <InboxLauncher /> component.
Name Default
--cord-inbox-launcher-font-size 14px
--cord-inbox-launcher-text-color --cord-secondary-button-content-color
--cord-inbox-launcher-text-color--hover --cord-secondary-button-content-color--hover
--cord-inbox-launcher-text-color--active --cord-secondary-button-content-color--active
--cord-inbox-launcher-text-color--disabled --cord-secondary-button-content-color--disabled
--cord-inbox-launcher-background-color --cord-secondary-button-background-color
--cord-inbox-launcher-background-color--hover --cord-secondary-button-background-color--hover
--cord-inbox-launcher-background-color--active --cord-secondary-button-background-color--active
--cord-inbox-launcher-background-color--disabled --cord-secondary-button-background-color--disabled
--cord-inbox-launcher-padding 6px 8px
--cord-inbox-launcher-gap 4px
--cord-inbox-launcher-icon-size 20px
--cord-inbox-launcher-badge-background-color --cord-color-notification
--cord-inbox-launcher-badge-text-color --cord-color-base
--cord-inbox-launcher-inbox-z-index 2147483645
--cord-inbox-launcher-inbox-offset 0px
--cord-inbox-launcher-inbox-box-shadow --cord-shadow-large

Inbox

Styles specific to the <Inbox /> component.
Name Default
--cord-inbox-background-color --cord-color-base
--cord-inbox-header-background-color --cord-color-base
--cord-inbox-border 1px solid var(--cord-color-base-x-strong)
--cord-inbox-border-radius --cord-border-radius-medium
--cord-inbox-height 600px
--cord-inbox-width 400px

Settings

Styles specific to the <Settings /> component.
Name Default
--cord-settings-background-color --cord-color-base

In this section