@digital.nsw/core

The core module for NSW. This is an extension of the core at gov.au components modules.

Contents

• Install
• Usage
• Dependency graph
• Tests
• Release History
• License

---

Install

yarn add @digital.nsw/core

npm install @digital.nsw/core --save-dev

⬆ back to top

---

Usage

• Sass

⬆ back to top

---

Sass

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 )

The paramaters are:

foreground - Color one

background - Color two

silent - If the logs get printed in the terminal

rounded - 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 )

The paramaters are:

toMakeA11y - The color that is to be changed.

background - The background color to compare against toMakeA11y for the contrast.

ratioKey - The keyword small or large to set the WCAG 2.1 contrast ration or 3.0 or 4.5.

steps - 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 )

The paramaters are:

svg - 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 )

The paramaters are:

breakpoint - 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.

AU-fontgrid( fontsize, lineheight )

The paramaters are:

fontsize - Either one of the following keywords: xs, sm, md, lg, xl, xxl, xxxl.

lineheight - 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.

AU-space( property, value )

The paramaters are:

property - The css property to apply the spacing ( padding, margin, border )

value - 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 )

The paramaters are:

theme - 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.

AU-sronly()

Example:

@include AU-sronly();

AU-clearfix

Clearing floats.

AU-clearfix()

Example:

@include AU-clearfix();

⬆ back to top

---

Dependency graph

core

⬆ back to top

---

Release History

• v0.1.0 - 💥 Initial version

⬆ back to top

---

License

Copyright (c) Commonwealth of Australia. Licensed under MIT.

⬆ back to top

};