Theme

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

{
  "colors": {
    "black": "#011e38",
    "blackBlue": "#122b47",
    "darkBlue": "#00438f",
    "blue": "#216beb",
    "lightBlue": "#e1ebfa",
    "darkGrey": "#434d59",
    "midGrey": "#6c7784",
    "grey": "#c0c8d1",
    "lightGrey": "#e4e7eb",
    "whiteGrey": "#f0f2f5",
    "white": "#ffffff",
    "yellow": "#ffbb00",
    "lightYellow": "#fcf5e3",
    "green": "#008059",
    "lightGreen": "#e9f7f2",
    "red": "#cc1439",
    "lightRed": "#fae6ea",
    "categorical1": "#19c4e6",
    "categorical2": "#8033cc",
    "categorical3": "#e372d0",
    "categorical4": "#55ddb0",
    "categorical5": "#ee5513",
    "categorical6": "#d3d322"
  },
  "fontSizes": {
    "smaller": "12px",
    "small": "14px",
    "medium": "16px",
    "large": "24px",
    "larger": "30px",
    "largest": "38px",
    "heading1": "38px",
    "heading2": "30px",
    "heading3": "24px",
    "heading4": "18px"
  },
  "lineHeights": {
    "base": "1.5",
    "smallTextBase": "1.71428571",
    "smallTextCompressed": "1.14285714",
    "smallerText": "1.33333333",
    "heading1": "1.05",
    "heading2": "1.33",
    "heading3": "1.33",
    "heading4": "1.33",
    "title": "1.05",
    "sectionTitle": "1.33",
    "subsectionTitle": "1.33"
  },
  "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"
  },
  "sizes": {
    "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",
    "sc": "'Noto Sans SC', sans-serif"
  },
  "borders": [],
  "shadows": {
    "small": "0px 1px 2px 0px rgba(1, 30, 56, 0.25)",
    "medium": "0px 3px 8px 0px rgba(1, 30, 56, 0.18)",
    "large": "0px 6px 12px 2px rgba(1, 30, 56, 0.15)",
    "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"
  },
  "zIndices": {
    "content": 100,
    "tabsScollIndicator": 200,
    "tabsBar": 210,
    "overlay": 1000,
    "aboveOverlay": 1010,
    "tableHeader": 10,
    "modalHeaderAndFooter": 2,
    "openControl": 1000,
    "navBar": 900,
    "sidebar": 800
  }
}

Usage

The theme can be accessed via our building block component props. E.g a Box's backgroundColor prop will map to the colours object in our theme. Similarly, a Text component's fontSizes property will map to the fontSizes object, etc.

Custom themes

As of version 3.0, themes can be overriden at the NDSProvider level. This allows changing all definitions of a property at once.

For example, if you were working in one of our legacy Operational Solution modules and wanted the "medium" font size used in all components to be 14px instead of 16px:

import { NDSProvider } from "@nulogy/components"
<NDSProvider theme={fontSizes: {medium: "14px"}}>
    // app
</NDSProvider>

This is a powerful feature, but should be used sparingly. Please let Design Ops know when you've overriden the theme for any reason, in case there are systemic problems we could be solving in the system directly instead.