@guardian/src-foundations

Foundations

The Guardian's design tokens are the atoms from which all our visual design is built. They are intended for use with a CSS-in-JS library such as Emotion.

Install

$ yarn add @guardian/src-foundations

Use

Palette

import { palette } from "@guardian/src-foundations"

const backgroundColor = css`
    background-color: ${palette.neutral[97]};
`

Media queries

import { from, until, between } from "@guardian/src-foundations/mq"

const styles = css`
    padding: 0 10px;

    ${from.mobileLandscape} {
        padding: 0 20px;
    }

    ${between.phablet.and.desktop} {
        padding: 0 32px;
    }

    ${until.wide} {
        padding: 0 40px;
    }
`

Output:

.class-name {
    padding: 0 10px;
}

@media (min-width: 480px) {
    .class-name {
        padding: 0 20px;
    }
}

@media (min-width: 660px) and (max-width: 980px) {
    .class-name {
        padding: 0 32px;
    }
}

@media (max-width: 1300px) {
    .class-name {
        padding: 0 40px;
    }
}

Visually Hidden

For elements that should not appear to sighted users, but are useful to assistive technology users.

import { visuallyHidden } from "@guardian/src-foundations/accessibility"

const label = css`
    ${visuallyHidden};
`

Output:

.class-name {
    position: absolute;
    opacity: 0;
    height: 0;
    width: 0;
    top: 0;
    left: 0;
}

Focus Halo

This mixin provides a clear focus state for elements that may receive keyboard focus.

import { focusHalo } from "@guardian/src-foundations/accessibility"

const input = css`
    ${focusHalo};
    width: 200px;
    height: 44px;
`

Output:

.class-name {
    outline: 0;
    box-shadow: 0 0 0 5px #00b2ff;
    z-index: 9;
    width: 200px;
    height: 44px;
}