@guardian/src-foundations

Foundations

The Guardian's foundations 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 { background } from "@guardian/src-foundations/palette"

const backgroundColor = css`
    background-color: ${background.primary};
`

Typography

import { headline, body, textSans } from "@guardian/src-foundations/typography"

const h1 = css`
    ${headline.large({ fontWeight: "bold" })};
`

const p = css`
    ${body.main()};
`

const copyright = css`
    ${textSans.xsmall()};
`

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;
    }
`

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};
`

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;
`