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",
    "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 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,
    "tableHeader": 10,
    "modalHeaderAndFooter": 2,
    "openControl": 1000,
    "navBar": 900,
    "sidebar": 800
  },
  "zIndices": {
    "content": 100,
    "tabsScollIndicator": 200,
    "tabsBar": 210,
    "overlay": 1000,
    "tableHeader": 10,
    "modalHeaderAndFooter": 2,
    "openControl": 1000,
    "navBar": 900,
    "sidebar": 800
  }
}

Usage

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
<Box bg="darkBlue" color="white" p="x3">Styled Box</Box>

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 PackManager 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>