Coding with Delphinus

The code base of Delphinus is based on the Sass preprocessor for building css and the Pug template engine for building html.

It can be installed as Node.js package from npmjs.org.

npm install --save-dev @aarhus-university/au-designsystem-delphinus

Setting things up

Once installed from npm you may copy the boilerplate file style.scss, found in the source-folder, into your own project repository. You'll then have to redefine all @import's to target the delphinus-folder within your node-modules repository.

The bolierplate-file can then be appended with more @import's of your own creation, that can make use of the Sass functions and mixins described below.

Got questions?

  • Installing and developing react-applications with Delphinus:
    Thomas Riis Hansen, trh@au.
  • Building Delphinus styled HTML-components with Sass and Pug:
    Claus Stadel, claus.stadel@au.dk.

Sass functions

color($name)
Returns css-variable for color. $name can be any value listed in the tables below.

spacing($size, [$times], [$add], [$subtract], [$divideby])
Returns css-variable for spacing. Optionally mathematical operations can be applied - in this case a calc()-expression of the form: calc(($size * $times + $add - $subtract) / $divideby) is returned.

font-size($size)
Returns css-variable for font-size.

line-height($line, [$include-calc: true])
Returns line-height as a calc()-expression consisting of an em-value and a rem-value.
$line must be either "single" or "multiple".

Sass mixins

set-font($size, $line-height, [$weight], [$max-width], [$transform])
Sets font-size and line-height.
$line-height must be either "single" or "multiple".
$weight can be "bold" or "light".
If $max-width is set to "default" the element will get a max-width equal to what it would have at the default font-size, i.e. $size: 0.
$transform: "uppercase" sets text to all caps.

set-colors-background-foreground($background)
Sets both color and background-color according to $background. $background can be values listed in the tables below, that have a defined foreground color. An error is thrown if the requested background color does not have a defined foreground color.

breakpoint($scale) { [breakpoint properties] }
Creates a breakpoint at min-width: $scale.
$scale must be either "medium", "wide" or "low-height".
"low-height" sets a max-height-breakpoint for viewports with low height, e.g. phones in landscape.

Color variables

Values in the name-column of the tables below can be used directly as input for the color()function. The resulting css-variable will be prefixed with --color-, e.g. --color-theme.

Where a hover color is available, the name of the coresponding hover color is the name of the color with -hover added at the end, e.g. for color theme the hover color is theme-hover. All available hover colors are listed in the table below.

Colors intended to be used as value for the background-color css-property, will have their applicable foreground color listed in the description-column. This is the foreground color, that will be set when the set-colors-background-foreground() mixin is called with one of these background colors as input.

Primary colors
Color nameIntened css-propertyDescriptionHover color
theme
background-color

The brand color. Used for e.g. the background color of a primary button. Use theme-foreground as foreground color.

Available
background
background-color

The background of the themed element. On the body-element this will be the page's background color. Use foreground as foreground color.

Available
background-secondary
background-color

A secondary background color that differs slightly frombackground. Used for e.g. framing elements in a box. Use foreground as foreground color. background is also used as background color for visually disabled, interactive element.

Available
foreground
color

The default foreground color, i.e. text.

Available
foreground-secondary
color

A foreground color for secondary text. Has slightly lower contrast to background than foreground.

Available
border
border-color

The default border color.

Not available
background-input
background-color

Background color for input elements that take keyboard input, like text-fields and textareas. In normal themes this is the same as background, in dark themes it is slighty ligther. Use foreground as foreground color, when the field is enabled, foreground-disabled when the field is visually disabled.

Not available
interactive
background-color

Background color for interactive elements, that are controlled by clickevents, like select, radiobuttons and checkboxes. It is also used as background color for secondary buttons. Use foreground as foreground color, when the element is enabled, foreground-disabled when the element is visually disabled.

Available
Additional foreground colors
Color nameIntened css-propertyDescriptionHover color
foreground-theme
color

A foreground color for text to be branded with the brand color. If theme has sufficient contrast ratio to background, foreground-theme is the same as theme. Otherwise it is slighty darker or lighter to comply with accessibility guidelines.

Available
foreground-disabled
color

A text color for visually disabled elements like input and buttons.

Not available
foreground-branding
color

Branding color for the site-logo, the university logo and seal. The same as foreground in dark themes and the same as foreground-theme in normal themes.

Available
theme-foreground
color

Color for text on elements with theme as background color. Will be light or dark for best contrast ratio.

Not available
Supplemental colors
Color nameIntened css-propertyDescriptionHover color
theme-secondary
background-color

A lighter version of the brand color. Used for the background layer in Peto based artwork. Has no defined foreground color, as color is not intended for use as text background.

Not available
border-theme
border-color

A branded border color. Used for e.g. active elements in navigation.

Not available
border-text-link
border-color

Color for underlining links in text. An adjusted version of theme for securing sufficient contrast to background.

Not available
shadow
box-shadow

Color for box-shadow. Shadows are applied to interactive elements like buttons, selectand radiobuttons and to overlays like modal views and menus.

Not available
overlay
background-color

Branded semi-transparent color used for overlays behind modal views. Has no defined foreground color, as color is not intended for use as text background.

Not available
Utility colors
Color nameIntened css-propertyDescriptionHover color
utility-attention
background-color, border

Background color for interactive elements calling attention. Border color for elements using utility-attention-background as background color. Use utility-foreground as primary foreground color.

Not available
utility-confirm
background-color, border

Background color for interactive elements signaling a confirmation. Border color for elements using utility-confirm-background as background color. Use utility-foreground as primary foreground color.

Available
utility-warning
background-color, border

Background color for interactive elements signaling a warning. Border color for elements using utility-warning-background as background color. Use utility-foreground as primary foreground color.

Available
utility-attention-background
background-color

Background color for text elements calling attention. Use utility-foreground as primary foreground color.

Not available
utility-confirm-background
background-color

Background color for text elements calling attention. Use utility-foreground as primary foreground color.

Not available
utility-warning-background
background-color

Background color for text elements calling attention. Use utility-foreground as primary foreground color.

Not available
utility-foreground
color

Color for text on elements with a utility color as background.

Not available
utility-attention-foreground-secondary
color

Color for secondary text on elements with utility-attention-background as background.

Not available
utility-confirm-foreground-secondary
color

Color for secondary text on elements with utility-confirm-background as background.

Not available
utility-warning-foreground-secondary
color

Color for secondary text on elements with utility-warning-background as background.

Not available
utility-interactive
background-color

Background color for an interactive element, e.g. a button, within an element with a utility color as background. Has the same values as the background in normal themes. Useutility-foreground as foreground color.

Available
Hover colors
Color nameIntened css-propertyDescription
theme-hover
::hover{background-color}

Hover color for elements with theme as background color.

foreground-branding-hover
::hover{color}

Hover color for interactive elements with foreground-branding as text color, e.g. the site logo.

background-hover
::hover{background-color}

Hover color for elements with background as background color.

background-secondary-hover
::hover{background-color}

Hover color for elements with background-secondary as background color.

interactive-hover
::hover{background-color}

Hover color for elements with interactive as background color.

foreground-hover
::hover{color}

Hover color for elements with foreground as text color.

foreground-theme-hover
::hover{color}

Hover color for elements with foreground-theme as text color.

utility-attention-hover
::hover{background-color}

Hover color for elements with utility-attention as background color.

utility-confirm-hover
::hover{background-color}

Hover color for elements with utility-confirm as background color.

utility-warning-hover
::hover{background-color}

Hover color for elements with utility-warning as background color.

utility-interactive-hover
::hover{background-color}

Hover color for elements with utility-interactive as background color.