@digital.nsw/core

    0.1.0 • Public • Published

    @digital.nsw/core

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

    Contents


    Install

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

    back to top


    Usage

    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

    };

    Install

    npm i @digital.nsw/core

    DownloadsWeekly Downloads

    2

    Version

    0.1.0

    License

    MIT

    Unpacked Size

    194 kB

    Total Files

    16

    Last publish

    Collaborators

    • bayleymauger
    • digital-design-system