9.11.0 • Published 2 years ago

@apollo/space-kit v9.11.0

Weekly downloads
2,941
License
MIT
Repository
github
Last release
2 years ago

Table of Contents

Installation

npm install @apollo/space-kit

Usage

Import things into your JS app from the @apollo/space-kit package. All available exports are documented here.

import "@apollo/space-kit/reset.css"; // import this at app root
import { colors } from "@apollo/space-kit";

function MyComponent() {
  return (
    <button
      style={{
        backgroundColor: colors.indigo.dark,
        color: "white",
        border: `1px solid ${colors.grey.light}`
      }}
    >
      ...
    </button>
  );
}

Exports

Stylesheet reset

A "base" stylesheet with a few sensible rules. It uses normalize.css to smooth out any inconsistencies between the ways that different browsers render elements. It also applies box-sizing: border-box; to everything, for a better element sizing experience. Lastly, the stylesheet imports and sets our two main font families: Source Sans Pro, and Source Code Pro.

You'll probably want to include this file once in your app, ideally at the top-most level. For instance, in a Gatsby site that would be your layout.js component.

JS + webpack or similar

import "@apollo/space-kit/reset.css";

LESS

@import (inline) "../node_modules/@apollo/space-kit/reset.css

Colors

A JavaScript object that maps color names to palettes of hex codes to apply on-brand color to elements on a page. The available colors include:

  • pink
  • teal
  • indigo
  • black
  • grey
  • silver
  • red
  • green
  • blue
  • orange
  • yellow
  • purple

When you access a color by name (i.e. colors.indigo), you'll find a palette of hex codes keyed by a "lightness" variant. These include:

  • base
  • dark
  • darker
  • darkest (not on black, grey, or silver)
  • light
  • lighter
  • lightest (not on black, grey, or silver)

CSS-in-JS

import styled from "@emotion/styled";
import { colors } from "@apollo/space-kit";

const StyledButton = styled.button({
  backgroundColor: colors.indigo.dark,
  color: "white",
  border: `1px solid ${colors.grey.light}`
});

function MyComponent() {
  return (
    <div>
      <StyledButton>Save</StyledButton>
      <StyledButton
        style={{
          backgroundColor: colors.red.base
        }}
      >
        Delete
      </StyledButton>
    </div>
  );
}

Icons

All our icons are displayed in a gallery in Storybook.

All our icons are SVG files stored in ./icons/src/svgs. There are scripts set up to convert these SVGs into React components, and then to transpile those files for consumption. These conversions and transpilations are .gitignore'ed, so they are not mantained in source control.

These icons are not open source and are only licensed for use in this project. See license for more details.

Please see #developing-space-kit-icons for instructions on adding new icons.

Developing Space Kit

Icons

To add new icons, add SVGs to ./icons/src/svgs and open a pull request. The React components will be generated and the TypeScript will be transpiled automatically after merging to master.

The following scripts are available:

  • icons:clean: Clean all the React components and TypeScript generated files from the icons/ directory. This will not touch the raw svg files in icons/src.
  • icons:generate: Generate TypeScript files for each icon. These will be immediately available in Storybook.
  • icons: Run icons:clean and icons:genreate in series
  • build:typescript: Transpile TypeScript files to be consumed externally.
  • watch: Watch TypeScript files and automatically update.

    This is useful when you've npm link'ed this repository and are developing against another project.

TypeScript

To watch all TypeScript projects for development, run the npm run watch script.

Storybook

Many elements of Space Kit are showcased in Storybook, which can be used for local development by running:

npm install
npm run storybook

All pull requests will automatically generate deploy previews and the master branch is automatically deployed to https://space-kit.netlify.com.

Netlify Status

Resources

9.11.0

2 years ago

9.10.0

3 years ago

9.9.0

3 years ago

9.8.0

3 years ago

9.7.0

3 years ago

9.6.2

3 years ago

9.6.1

3 years ago

9.6.0

3 years ago

9.4.0

3 years ago

9.5.0

3 years ago

9.3.1

3 years ago

9.3.0

3 years ago

9.2.0

3 years ago

9.1.0

3 years ago

8.22.1

3 years ago

9.0.0

3 years ago

8.22.0

3 years ago

8.21.1

3 years ago

5.6.3

3 years ago

5.6.2

3 years ago

5.6.1

3 years ago

8.21.0

3 years ago

8.20.2

3 years ago

8.20.1

3 years ago

8.20.0

3 years ago

8.19.1

3 years ago

8.19.0

3 years ago

8.18.0

3 years ago

8.17.3

3 years ago

8.17.4

3 years ago

8.17.1

3 years ago

8.17.2

3 years ago

8.17.0

3 years ago

8.16.2

3 years ago

8.16.0

3 years ago

8.16.1

3 years ago

8.15.0

3 years ago

8.14.0

3 years ago

8.13.2

3 years ago

8.13.1

3 years ago

8.13.0

3 years ago

8.12.0

3 years ago

8.11.1

3 years ago

8.11.0

3 years ago

8.10.0

3 years ago

8.9.0

3 years ago

8.8.0

3 years ago

8.7.2

3 years ago

8.7.1

3 years ago

8.7.0

3 years ago

8.6.1

3 years ago

8.6.0

3 years ago

8.5.0

3 years ago

8.4.0

3 years ago

8.3.1

3 years ago

8.3.0

3 years ago

8.2.0

3 years ago

8.1.0

3 years ago

8.0.1

3 years ago

7.21.0

4 years ago

8.0.0

4 years ago

7.20.1

4 years ago

7.20.0

4 years ago

7.19.0

4 years ago

7.18.0

4 years ago

7.17.0

4 years ago

7.16.0

4 years ago

7.15.0

4 years ago

7.14.1

4 years ago

7.14.0

4 years ago

7.13.1

4 years ago

7.13.0

4 years ago

7.12.1

4 years ago

7.11.2

4 years ago

7.12.3-0

4 years ago

7.12.0

4 years ago

7.11.1

4 years ago

7.10.1

4 years ago

7.11.0

4 years ago

7.10.0

4 years ago

7.9.0

4 years ago

7.8.0

4 years ago

7.7.0

4 years ago

7.6.1

4 years ago

7.6.0

4 years ago

7.5.0

4 years ago

7.3.0

4 years ago

7.4.0

4 years ago

7.2.1

4 years ago

7.2.0

4 years ago

7.1.0

4 years ago

7.0.0

4 years ago

6.6.0

4 years ago

6.5.0

4 years ago

6.4.0

4 years ago

6.3.0

4 years ago

6.1.3

4 years ago

6.2.1

4 years ago

6.2.0

4 years ago

6.1.2

4 years ago

6.1.0

4 years ago

6.1.1

4 years ago

6.0.2

4 years ago

6.0.1

4 years ago

6.0.0

4 years ago

5.6.0

4 years ago

5.5.0

4 years ago

5.4.1

4 years ago

5.4.0

4 years ago

5.3.0

4 years ago

5.2.0

4 years ago

5.1.0

4 years ago

5.0.0

4 years ago

4.2.0

4 years ago

4.1.0

4 years ago

4.0.0

4 years ago

3.4.0

4 years ago

3.3.0

4 years ago

3.2.0

4 years ago

3.1.2

4 years ago

3.1.1

4 years ago

3.1.0

4 years ago

3.0.1

4 years ago

3.0.0

4 years ago

2.25.2

4 years ago

2.25.1

4 years ago

2.25.0

4 years ago

2.24.0

4 years ago

2.23.0

4 years ago

2.22.0

4 years ago

2.21.1

4 years ago

2.21.0

4 years ago

2.20.0

4 years ago

2.19.0

4 years ago

2.18.0

4 years ago

2.17.1

4 years ago

2.17.0

4 years ago

2.16.0

4 years ago

2.15.0

4 years ago

2.14.3

4 years ago

2.14.2

4 years ago

2.14.1

4 years ago

2.14.0

4 years ago

2.13.0

5 years ago

2.12.0

5 years ago

2.11.0

5 years ago

2.10.0

5 years ago

2.9.0

5 years ago

2.8.1

5 years ago

2.8.0

5 years ago

2.7.0

5 years ago

2.6.1

5 years ago

2.6.0

5 years ago

2.5.1

5 years ago

2.5.0

5 years ago

2.4.0

5 years ago

2.3.0

5 years ago

2.2.1

5 years ago

2.2.0

5 years ago

2.1.2

5 years ago

2.1.1

5 years ago

2.1.0

5 years ago

2.0.3

5 years ago

2.0.2

5 years ago

2.0.1

5 years ago

1.8.0

5 years ago

1.7.2

5 years ago

1.7.1

5 years ago

1.7.0

5 years ago

1.6.0

5 years ago

1.5.1

5 years ago

1.5.0

5 years ago

1.4.0

5 years ago

1.3.1

5 years ago

1.3.0

5 years ago

1.2.0

5 years ago

1.1.1

5 years ago

1.1.0

5 years ago

1.0.6

5 years ago

1.0.5

5 years ago

1.0.4

5 years ago

1.0.3

5 years ago

0.8.1

5 years ago

1.0.2

5 years ago

1.0.1

5 years ago

1.0.0

5 years ago

2.0.0

5 years ago

0.8.0

5 years ago

0.7.4

5 years ago

0.7.3

5 years ago

0.6.2

5 years ago

0.6.1

5 years ago

0.6.0-rc1

5 years ago

0.5.1

5 years ago

0.5.0

5 years ago

0.4.1

5 years ago

0.4.0

5 years ago

0.3.1

5 years ago

0.3.0

5 years ago

0.2.0

5 years ago

0.2.0-2

5 years ago

0.1.1

5 years ago

0.2.0-1

5 years ago

0.2.0-0

5 years ago

0.1.0

5 years ago

0.1.0-beta.1

5 years ago

0.1.0-beta.0

5 years ago

0.0.8

5 years ago

0.0.7

5 years ago

0.0.6

5 years ago

0.0.5

5 years ago