dta.gov.au

The .gov.au means it’s official

Australian government websites always use a .gov.au domain. Before sharing sensitive information online, make sure you’re on a .gov.au site by inspecting your browser’s address (or 'location') bar.

This site is secure.

The https:// ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.

Core

v3.4.2

Core includes a range of styles, variables and code that form the foundation of how the Design System works, including colour, typography and spacing.

Released

History
View changes
Install
npm i @gov.au/core
Tags
Contributors
  • Trevor Brennan avatar picture
  • Simon Pascal Klein avatar picture
  • Gary Broadbent avatar picture
  • Petra Gulicher avatar picture
  • Alexander Sadleir avatar picture
  • Julian Fleetwood avatar picture
  • Hannah J. Nicdao avatar picture
  • Alex Page avatar picture
  • Patrick De Young avatar picture
  • Dominik Wilkowski avatar picture

SCSS variables

Variable name Default value Description
$AU-rem 16 Value used for rem calculation.
$AU-unit 4 Unit used for all type and grid calculations.
$AU-pixelfallback true Enable/disable pixel fall back for older browsers.
$AU-border-radius $AU-unit + 0px (4px) Design System border-radius style.

Default theme colours

Variable name default value description
$AU-color-foreground-text #313131 Colour used for body text and headings.
$AU-color-foreground-action #00698f Colour for buttons and interactive elements.
$AU-color-foreground-focus #9263de Colour that outlines an element when it receives focus.
$AU-color-background #ffffff Background colour.

Dark theme colours

Variable name Default value Description
$AU-colordark-foreground-text #ffffff Colour used for body text and headings.
$AU-colordark-foreground-action #61daff Colour for buttons and interactive elements.
$AU-colordark-foreground-focus #c390f9 Colour that outlines an element when it receives focus.
$AU-colordark-background #135e70 Background colour.

Fonts

Variable name Default value Description
$AU-font -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" Fonts used for body text.
$AU-font-monospace "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace Fonts used for mathematical and code related HTML elements.
$AU-fontsize-map ( xs: 14, sm: 16, md: 20, lg: 24, xl: 32, xxl: 40, xxxl: 48 ) Pixel sizes from a 1.25 typescale rounded to the nearest $AU-unit (vertical grid, default value at 4).
$AU-lineheight-map ( nospace: 1, heading: 1.25, default: 1.5 ) Lineheight mapped to keyword.

Media Breakpoints

Our breakpoints are designed for mobile first. These breakpoints are used in the AU-media function and are referenced by xs, sm, md and lg.

Variable name Default value Description
$AU-media-xs 576px Small devices, large phones, portrait tablets.
$AU-media-sm 768px Landscape tablets, 768px and higher.
$AU-media-md 992px Laptops/Desktops, 992px and higher.
$AU-media-lg 1200px Large laptops and desktops, 1200px and higher.
$AU-maxwidth 42em Max width for line lengths.

Page alerts

Standard colours for the Design System Page Alerts

Variable name Default value Description
$AU-color-error #ff635c Error page alert colour.
$AU-color-success #0cac78 Success page alert colour.
$AU-color-warning #f69900 Warning page alert colour.
$AU-color-info #00bfe9 Info page alert colour.

SCSS Functions

AU-color-contrast

Get the contrast ratio of two colors and warn when it is below WCAG 2.0 AA standard 4.5:1

AU-color-contrast( foreground, background, silent, rounded )

Props

Prop name Type Description
foreground string Color one
background string Color two
silent silent If the logs get printed in the terminal
rounded boolean If the value is rounded or not

Example

content: AU-color-contrast( red, blue );

AU-color-a11y

The function to find the nearest accessible color.

AU-color-a11y( toMakeA11y, background, ratioKey, steps )

Props

Prop name Type Description
toMakeA11y string The color that is to be changed.
background string The background color to compare against toMakeA11y for the contrast.
ratioKey string The keyword small or large to set the WCAG 2.1 contrast ration or 3.0 or 4.5.
steps number The step size our function is searching for a new color in. The bigger the number the faster the process the rougher the found color. Must be from 0.1 to 100.

Example

background: AU-color-a11y( red, blue );

AU-svguri

Generate an optimized SVG data-uri.

AU-svguri( svg )

Props

Prop name Type Description
svg string The SVG data to be converted.

Example

background-image: AU-svguri(
  '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 128 128">' +
    '<path fill="red" d="M128 64l-64 64-16-16 64-64"/>' +
    '<path fill="red" d="M128 64l-16 16-64-64L64 0"/>' +
  '</svg>'
);

AU-media

Create media queries and wraps the @content code inside of it.

AU-media( breakpoint )

Props

Prop name Type Description
breakpoint string Either one of the following keywords: xs, sm, md, lg

Example

@include AU-media( sm ) {
  width: 48%;
}

AU-fontgrid

Mixin for setting font-size and line-height that snaps to the grid. Please visit our getting started docs to see why and how to use the AU-fontgrid function.

AU-fontgrid( fontsize, lineheight )

Props

Prop name Type Description
fontsize string Either one of the following keywords: xs, sm, md, lg, xl, xxl, xxxl.
lineheight string Either one of the following keywords: heading, nospace, default.

Example

@include AU-fontgrid( md, heading );

AU-space

Mixin for setting a properties value to snap to the grid, with a fallback for REM. Please visit our getting started docs to see why and how to use the AU-space function.

AU-space( property, value )

Props

Prop name Type Description
property string The css property to apply the spacing ( padding, margin, border )
value string The values of the property ( 0, 20px, 1unit, 5% )

Example

@include AU-space( margin, 1unit 10% );

AU-focus

Add the outline to focus.

AU-focus( dark )

Props

Prop name Type Description
theme string Either one of the following keywords: light or dark.

Example

@include AU-focus();

AU-sronly

Hide an element from the screen but not a screen reader. This mixin should be used to provide additional information or context to an element on the page that screen reader users would otherwise miss out on. An example of this could be applying the mixin to a span that has the text close on a button with a close icon.

AU-sronly()

Example

@include AU-sronly();

AU-clearfix

Clearing floats.

AU-clearfix()

Example

@include AU-clearfix();