Installation • Usage • Documentation • Compatability • License
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/coreAn 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'));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.
See the greymatter.io UI Components storybook for more usage examples and documentation.
MIT