Core
v5.0.0Core 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 @gold.au/core
- Tags
- Contributors
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();