Installation

gm-ui-components is available as an npm package. It has 6 peer dependencies:

npm install --save gm-ui-components react react-dom styled-components inter-ui react-popper @popperjs/core

Usage

An example using the Button component:

import React from 'react';
import { render } from 'react-dom';
import { Button } from 'gm-ui-components';

function App() {
  return (
    <Button
        label="Hello World!"
        type="default"
        size="xl"
        active={true}
    />
  );
}

render(<App />, document.querySelector('#app'));

Theming

The component library provides 2 themes out of the box - keen and keenDark. All components use the keen theme by default.

To use keenDark or a custom theme, wrap your app in a ThemeProvider and pass the theme object:

// App.js
import React from 'react';
import { ThemeProvider } from 'styled-components';
import { render } from 'react-dom';
import { Button, keenDark } from 'gm-ui-components';

function Button() {
  return (
    <Button
        label="Hello World!"
        type="default"
        size="xl"
        active={true}
    />
  );
}

render(
  <ThemeProvider theme={keenDark}>
    <App />
  </ThemeProvider>, 
  document.querySelector('#app'));

To extend the theme, you must pass a theme object that follows our schema. Here is an example of the schema and its defaults:

{
  name: "Keen",

  COLOR_BRAND_PRIMARY: "#00b42b",
  COLOR_BRAND_SECONDARY: "#00b42b",

  COLOR_BACKGROUND_DEFAULT: "hsl(0,0%,100%)",
  COLOR_BACKGROUND_TWO: "hsl(0,0%,97%)",
  COLOR_BACKGROUND_THREE: "hsl(0,0%,94%)",

  COLOR_CONTENT_DEFAULT: "hsla(0,0%,0%,0.85)",
  COLOR_CONTENT_CONTRAST: "hsla(0,0%,0%,1)",
  COLOR_CONTENT_MUTED: "hsla(0,0%,0%,0.6)",
  COLOR_CONTENT_NONESSENTIAL: "hsla(0,0%,0%,0.3)",

  COLOR_INTENT_HIGHLIGHT: "#00b42b",
  COLOR_INTENT_SUCCESS: "#00b42b",
  COLOR_INTENT_DANGER: "#D83D22", // WCAG AA+
  COLOR_INTENT_WARNING: "#F7CD45", // WCAG AA+
  COLOR_INTENT_INFO: "#1E6DF6", // WCAG AA+

  COLOR_KEYLINE_DEFAULT: "hsla(0,0%,0%,8%)",
  COLOR_KEYLINE_SOLID: "hsl(0,0%,8%)",

  OPACITY_FULL: "1",
  OPACITY_LIGHT: "0.7",
  OPACITY_LIGHTER: "0.5",
  OPACITY_LIGHTEST: "0.15",

  // LAYOUT
  SPACING_BASE: 8,

  ZINDEX_ABYSS: "-9999",
  ZINDEX_FLOOR: "1",
  ZINDEX_DROPDOWN: "1010",
  ZINDEX_STICKY: "1020",
  ZINDEX_FIXED: "1030",
  ZINDEX_SCRIM: "1040",
  ZINDEX_MODAL: "1050",
  ZINDEX_POPOVER: "1060",
  ZINDEX_TOOLTIP: "1070",

  CORNER_RADIUS_SHARP: "2px", // spacingScale(0.5)
  CORNER_RADIUS_INPUT: "4px", // spacingScale(1)
  CORNER_RADIUS_CARD_SM: "4px",
  CORNER_RADIUS_CARD_DEFAULT: "6px",
  CORNER_RADIUS_CARD_LG: "8px",
  CORNER_RADIUS_MAX: "90000px",

  // TYPOGRAPHY
  FONT_STACK_DEFAULT: `-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif`,
  FONT_STACK_BRAND: `"Metropolis", "Helvetica Neue", Arial, sans-serif`,
  FONT_STACK_CODE: `"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace`,

  FONT_SIZE_PAGE_TITLE: "40px",

  FONT_SIZE_HEADING_LG: "38px",
  FONT_SIZE_HEADING_DEFAULT: "36px",
  FONT_SIZE_HEADING_SM: "32px",

  FONT_SIZE_SUBHEADING_LG: "18px",
  FONT_SIZE_SUBHEADING_DEFAULT: "16px",
  FONT_SIZE_SUBHEADING_SM: "14px",

  FONT_SIZE_ITEM_TITLE_LG: "16px",
  FONT_SIZE_ITEM_TITLE_DEFAULT: "14px",
  FONT_SIZE_ITEM_TITLE_SM: "12px",

  FONT_SIZE_TEXT_XL: "18px",
  FONT_SIZE_TEXT_LG: "16px",
  FONT_SIZE_TEXT_DEFAULT: "14px",
  FONT_SIZE_TEXT_SM: "12px",
  FONT_SIZE_TEXT_XS: "10px",

  LINE_HEIGHT_LOOSE: 1.6,
  LINE_HEIGHT_DEFAULT: 1.4,
  LINE_HEIGHT_TIGHT: 1.2,

  FONT_WEIGHT_DEFAULT: 400,
  FONT_WEIGHT_MEDIUM: 500,
  FONT_WEIGHT_SEMIBOLD: 600,
  FONT_WEIGHT_BOLD: 700,

  LETTER_SPACING_DEFAULT: "normal"
};

You can extend this base theme like so:

// ...App.js

keen = {
  ...keen,
  COLOR_BRAND_PRIMARY: "#03aaed"
}

render(
  <ThemeProvider theme={keen}>
    <App />
  </ThemeProvider>, 
  document.querySelector('#app'));

You can find more information on style variables here.

Documentation

See the greymatter.io UI Components storybook for more usage examples and documentation.

Compatability

• Full list of browser support matrix

License

MIT