Theme

Design options for creating interfaces in Nulogy's style can be accessed in Javascript via the theme.

Full theme

{
  "colors": {
    "black": "#011e38",
    "blackBlue": "#122b47",
    "darkBlue": "#00438f",
    "blue": "#216beb",
    "lightBlue": "#e1ebfa",
    "darkGrey": "#434d59",
    "grey": "#c0c8d1",
    "lightGrey": "#e4e7eb",
    "whiteGrey": "#f0f2f5",
    "white": "#ffffff",
    "yellow": "#ffbb00",
    "lightYellow": "#fcf5e3",
    "green": "#008059",
    "lightGreen": "#e9f7f2",
    "red": "#cc1439",
    "lightRed": "#fae6ea"
  },
  "fontSizes": {
    "smaller": "12px",
    "small": "14px",
    "medium": "16px",
    "large": "20px",
    "larger": "26px",
    "largest": "46px"
  },
  "lineHeights": {
    "base": "1.5",
    "title": "1.04347826",
    "sectionTitle": "1.23076923",
    "subsectionTitle": "1.2",
    "smallTextBase": "1.71428571",
    "smallTextCompressed": "1.14285714",
    "smallerText": "1.33333333"
  },
  "fontWeights": {
    "light": "300",
    "normal": "400",
    "medium": "500",
    "bold": "600"
  },
  "space": {
    "none": "0px",
    "half": "4px",
    "x1": "8px",
    "x2": "16px",
    "x3": "24px",
    "x4": "32px",
    "x5": "40px",
    "x6": "48px",
    "x8": "64px"
  },
  "fonts": {
    "base": "'IBM Plex Sans', sans-serif",
    "mono": "'IBM Plex Mono', monospace"
  },
  "borders": [],
  "shadows": {
    "small": "0px 0px 3px 0px rgba(1, 30, 56, 0.2)",
    "medium": "0px 1px 4px 0px rgba(1, 30, 56, 0.15)",
    "large": "0px 3px 5px 0px rgba(1, 30, 56, 0.1)",
    "focus": "0px 0px 5px 0px rgba(33, 107, 235, .9)",
    "error": "0px 0px 5px 0px rgba(204, 20, 57, .9)"
  },
  "radii": {
    "small": "2px",
    "medium": "4px",
    "circle": "50%"
  },
  "breakpoints": {
    "extraSmall": "0px",
    "small": "768px",
    "medium": "1024px",
    "large": "1360px",
    "extraLarge": "1920px"
  },
  "zIndex": {
    "content": 100,
    "tabsScollIndicator": 200,
    "tabsBar": 210,
    "overlay": 1000
  }
}

Usage

Theme as props

Some of our components have props that reference our theme, e.g for color or spacing values. These are connected via Styled-System, which does the work of finding the appropriate object for you, e.g:

Styled Box
import theme from "@nulogy/components";

<Box bg="darkBlue" color="white" p="x3">Styled Box</Box>

For custom components

Tokens can be by used by importing the theme file and referencing the appropriate object directly. For example, if we didn't have the Box component above we could manually create it like so:

Custom component
import { theme } from "@nulogy/components"

const CustomComponent = styled.div({
  background: theme.colors.darkBlue,
  color: theme.colors.white,
  padding: theme.space.x3,
});

<CustomComponent>Custom component</CustomComponent>