Parallelogram 0.7.19

Design system

The tokens, and what reads them

Everything the library draws comes from these values, in four layers. The first reaches every component at once; each one after it narrows what you are changing. Related values sit together with something showing them at work. Colours carry a value for each theme; the switch decides which one you are looking at and editing.

Changed 0

1 Colour palette

Start here. These are the roles the whole library reads, so a change here reaches every component at once — an accent set here is the accent of buttons, focus rings, selected days and links. A page with a brand colour can set --brand-primary instead, which the accent follows in both themes, along with --brand-primary-hover and --brand-primary-contrast. A second and a third brand colour have the same hooks, --brand-secondary and --brand-complementary; until a page sets one they are the accent, so leaving them alone changes nothing, and no component reads them on its own. Reach for a surface or a component property below only when you want one thing to differ from the rest.

Text

Followed by --surface-control-color-text, --surface-panel-color-text, --surface-dialog-color-text, --surface-item-color-text, --surface-card-color-text

Followed by --form-control-placeholder-color, --form-control-hover-border-color

Read by <pdatetime>, <pselect>, <puploader>, datatable, tabs

Muted text

Accent

Follows --brand-primary

Followed by --form-control-focus-ring-color, --form-control-focus-border-color, --framework-focus-color

Follows --brand-primary-hover

Followed by --button-primary-bg, --button-primary-border

Follows --brand-primary-contrast

Followed by --button-primary-color

Read by mixins, <pdatetime>, <pmodal>, <pselect>, <puploader>, <puploader-host>, accordion, datatable, dropdown, tabs, index

Button

Secondary brand

Follows --brand-secondary

Followed by --button-brand-bg, --button-brand-border

Follows --brand-secondary-hover

Followed by --button-brand-hover-bg, --button-brand-hover-border

Follows --brand-secondary-contrast

Followed by --button-brand-color

Read through the tokens that follow these

Button

Complementary brand

Follows --brand-complementary

Follows --brand-complementary-hover

Follows --brand-complementary-contrast

Declared, and nothing reads these yet

Button

Page surface

Followed by --surface-control-color-bg, --surface-panel-color-bg, --surface-dialog-color-bg, --surface-card-color-bg

Followed by --surface-dropdown-item-current-bg, --form-control-disabled-bg, --button-secondary-hover-bg

Read by <pdatetime>, <pmodal>, <pselect>, <puploader>, <puploader-host>, datatable, lazysrc

Surface

Hover

Followed by --surface-dropdown-item-hover-bg, --button-ghost-hover-bg

Read by <pdatetime>, <pmodal>, <pselect>, <puploader>, accordion, datatable, tabs

Surface

Borders

Followed by --surface-panel-border-color, --surface-dialog-border-color, --surface-item-border-color

Read by <pdatetime>, <pmodal>, <pselect>, <puploader>, <puploader-host>, accordion, tabs, toasts

Surface

Control border

Followed by --surface-control-border-color, --button-secondary-border, --button-secondary-hover-border

Read by <pdatetime>, <pselect>, <puploader>, datatable

Surface

Overlay

Followed by --modal-backdrop-bg

Read through the tokens that follow these

Overlay

Shadow

Read by <pdatetime>, <pmodal>, <pselect>, <ptoasts>, <puploader-host>

Shadow

Danger

Followed by --button-danger-bg, --button-danger-border

Followed by --button-danger-color

Read by <pmodal>, <ptoasts>, <puploader>, datatable, lazysrc, toasts

SolidMessage

Success

Read by <ptoasts>, toasts

SolidMessage

Warning

Read by <ptoasts>, toasts

SolidMessage

Inverse

Read by <ptoasts>, toasts, tooltip

Inverse

Text on a status

Declared, and nothing reads these yet

2 Surfaces

The second layer: the shapes components are built from, rather than the colours they are painted in. A dialog radius set here is the radius of every dialog, and a component keeps its own value only where it sets one. Use these when the palette is right and the shape is not.

Controls

Followed by --form-control-border-radius

Followed by --form-control-border-width

Follows --color-control-border

Followed by --form-control-border-color

Follows --color-surface

Followed by --form-control-bg

Follows --color-text

Followed by --form-control-color

Read by <pselect>, <puploader>, tooltip, <pdatetime>, datatable

Surface

Buttons

Followed by --button-border-radius

Followed by --button-border-width

Read by <puploader>, <puploader-host>

Surface

Panels

Followed by --surface-dropdown-border-width

Follows --color-border

Followed by --surface-dropdown-border-color

Follows --color-surface

Followed by --surface-dropdown-color-bg

Follows --color-text

Followed by --surface-dropdown-shadow

Read by <puploader-host>, tabs, dropdown, <ptoasts>, tooltip

Surface

Dialogs

Followed by --modal-border-radius

Followed by --modal-border-width

Follows --color-border

Followed by --modal-border-color

Follows --color-surface

Followed by --modal-bg

Follows --color-text

Followed by --modal-color

Followed by --modal-shadow

Read by <pmodal>

Surface

Dropdowns

Follows --surface-panel-border-width

Follows --surface-panel-border-color

Follows --surface-panel-color-bg

Follows --surface-panel-shadow

Follows --color-hover

Follows --color-surface-muted

Read by <pselect>, dropdown, <pdatetime>

Surface

Items

Follows --color-border

Follows --color-text

Read by accordion

Surface

Cards

Follows --color-surface

Follows --color-text

Read by <puploader>, <puploader-host>

Surface

Touch targets

Read by <puploader-host>

Surface

3 Buttons, fields, panels and modals

The third layer, where a kind of thing is described rather than a colour or a shape. Most of these follow a surface or a colour above and exist so one kind of thing can differ from the rest: setting a primary button here changes every button the library draws, whoever drew it, without touching the palette.

Fields

Follows --form-control-padding-y-sm

Follows --form-control-padding-x-sm

Followed by --form-control-padding-y

Followed by --form-control-padding-x

Follows --surface-control-border-width

Follows --surface-control-border-color

Follows --surface-control-radius

Follows --surface-control-color-bg

Follows --surface-control-color-text

Follows --color-text-muted

Follows --color-accent

Follows --color-accent

Follows --color-text-muted

Follows --color-surface-muted

Follows --form-control-font-size-sm

Followed by --form-control-font-size

Read by components, <puploader>, datatable, <pdatetime>, <pselect>, lightbox

Placeholder

Button shape and type

Follows --button-padding-y-sm

Follows --button-padding-x-sm

Followed by --button-padding-y

Followed by --button-padding-x

Follows --button-font-size-sm

Followed by --button-font-size

Follows --surface-button-border-width

Follows --surface-button-radius

Follows --button-min-height-sm

Followed by --button-min-height

Read by components, <pdatetime>, <pmodal>, <puploader>, <puploader-host>, datatable

Button

Primary button

Follows --color-accent-hover

Follows --color-accent-contrast

Follows --color-accent-hover

Read by components, <pdatetime>, <pmodal>, <puploader>

Button

Secondary button

Follows --color-control-border

Follows --color-surface-muted

Follows --color-control-border

Read by components, <pdatetime>, <pmodal>, <puploader>, datatable

Button

Danger button

Follows --color-danger

Follows --color-danger-contrast

Follows --color-danger

Read by components, <pmodal>, <puploader>

Button

Ghost button

Follows --color-hover

Read by components

Button

Brand button

Follows --color-secondary

Follows --color-secondary-contrast

Follows --color-secondary

Follows --color-secondary-hover

Follows --color-secondary-hover

Read by components

Button

Panel

Follows --modal-bg

Follows --modal-border-width

Follows --modal-border-color

Follows --modal-border-radius

Follows --modal-shadow

Follows --panel-padding-sm

Followed by --panel-padding

Read by components, <pdatetime>, <ptoasts>, <pmodal>

Surface

Modal

Follows --surface-dialog-color-bg

Followed by --panel-bg

Follows --surface-dialog-border-width

Followed by --panel-border-width

Follows --surface-dialog-border-color

Followed by --panel-border-color

Follows --surface-dialog-radius

Followed by --panel-border-radius

Follows --surface-dialog-color-text

Follows --surface-dialog-shadow

Followed by --panel-shadow

Follows --color-overlay

Read by components, <pmodal>

Surface

4 Focus and motion

The two things people notice when they are not looking for them. The focus ring is shown to keyboard users and hidden from pointer users automatically, so it can afford to be loud. Motion is skipped entirely for anyone who asks their system for less of it, which is why a duration here is a maximum rather than a promise.

Motion

Follows --transition-normal

Follows --ease-in-out

Read by components, accordion, dropdown, tooltip, index

Motion

Focus ring

Follows --color-accent

Read by <pmodal>, <puploader>, accordion, datatable, dropdown, tabs, index

Focused

Changed values

/* No changes yet */