Socket
Socket
Sign inDemoInstall

@guardian/src-foundations

Package Overview
Dependencies
0
Maintainers
43
Versions
168
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    @guardian/src-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.


Version published
Maintainers
43
Install size
292 kB
Created

Readme

Source

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

Size

import { width, height } from '@guardian/src-foundations/size';

const checkbox = css`
    width: ${width.inputXsmall}px;
    height: ${height.inputXsmall}px;
`;

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

Description Id

A function that takes the ID of an element and generates a new ID. This should be set as the ID of an element that describes the first element. The generated ID should also be passed to the aria-describedby attribute on the first element.

import { descriptionId } from '@guardian/src-foundations/accessibility';

const Form = () => {
    const id = 'first_name';
    return (
        <form>
            <input id={id} type="text" aria-describedby={descriptionId(id)} />
            <p class="error" id={descriptionId(id)} />
        </form>
    );
};

FAQs

Last updated on 18 Jan 2022

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc