Tokens

Overview

The @datacamp/waffles-tokens package exposes a json file containing all the primitive values necessary to produce apps with the datacamp styling rules. These values can be accessed and used to style applications using a variety of tools, including CSS-in-JS libraries such as emotion.

Usage

To use any of the styles, simply import the @datacamp/waffles-tokens package and directly access the necessary properties. For example if the green color is needed then it should be accessed as follows.

import tokens from '@datacamp/waffles-tokens';

const greenColorValue = tokens.colors.green;

This hex code can then be used wherever is necessary. All the tokens can be accessed and used in the same way since it is just a json file.

Colors

For each of the primary colours, there are 3 variations. The standard colour e.g. green should be used as a priority, but there is also a dark and a light version of every colour. There is also a version to use as a text colour when being used against a light coloured background, e.g. greenText. For some colours this is the same as one of the other variants, but it will always have sufficient contrast against one of the lighter backgrounds. When working against a dark background, the standard colours are appropriate.

Available Tokens

{
  "animation": {
    "duration": "0.3s",
    "ease": "cubic-bezier(0.77, 0, 0.175, 1)",
    "transition": "0.3s cubic-bezier(0.77, 0, 0.175, 1)"
  },
  "border": {
    "radius": "4px"
  },
  "boxShadow": {
    "border": "0 0 0 1px rgba(5,25,45,0.1)",
    "color": "rgba(5,25,45,0.3)",
    "lg": "0 3px 5px -1px rgba(5,25,45,0.3)",
    "md": "0 2px 4px -1px rgba(5,25,45,0.3)",
    "sm": "0 1px 4px -1px rgba(5,25,45,0.3)",
    "xl": "0 8px 12px -4px rgba(5,25,45,0.3)",
    "xlGreen": "0 4px 8px 0 rgba(54, 213, 125, 0.3)",
    "xlOrange": "0 4px 8px 0 rgba(255, 148, 0, 0.3)",
    "xlPurple": "0 4px 8px 0 rgba(132, 104, 196, 0.3)",
    "xxl": "0 10px 20px 0 rgba(5,25,45,0.3)"
  },
  "breakpoints": {
    "4K": "1920px",
    "5K": "2560px",
    "lg": "1200px",
    "md": "992px",
    "sm": "768px",
    "ws": "1680px",
    "xl": "1366px",
    "xs": "480px",
    "below4K": "1919px",
    "below5K": "2559px",
    "belowLg": "1199px",
    "belowMd": "991px",
    "belowSm": "767px",
    "belowWs": "1679px",
    "belowXl": "1365px",
    "belowXs": "479px"
  },
  "colors": {
    "blue": "#06bdfc",
    "blueDark": "#009bd8",
    "blueLight": "#60e7ff",
    "blueText": "#007bb6",
    "green": "#03ef62",
    "greenDark": "#00c53b",
    "greenLight": "#65ff8f",
    "greenText": "#008700",
    "navy": "#05192d",
    "navyDark": "#000820",
    "navyLight": "#213147",
    "navyText": "#05192d",
    "orange": "#ff931e",
    "orangeDark": "#d87300",
    "orangeLight": "#ffbc4b",
    "orangeText": "#b75900",
    "pink": "#ff6ea9",
    "pinkDark": "#dc4d8b",
    "pinkLight": "#ff95cf",
    "pinkText": "#bf3072",
    "purple": "#7933ff",
    "purpleDark": "#5646a5",
    "purpleLight": "#974dff",
    "purpleText": "#5646a5",
    "red": "#ff5400",
    "redDark": "#dd3400",
    "redLight": "#ff782d",
    "redText": "#c01100",
    "yellow": "#fcce0d",
    "yellowDark": "#cfa600",
    "yellowLight": "#ffec3c",
    "yellowText": "#907000",
    "white": "#ffffff",
    "beige100": "#fffbf3",
    "beige200": "#f7f3eb",
    "beige300": "#efebe4",
    "beige400": "#e5e1da",
    "grey100": "#f7f7fc",
    "grey200": "#efefef",
    "grey300": "#e8e8ea",
    "grey400": "#d9d9e2"
  },
  "fontFamily": {
    "sansSerif": "'Studio-Feixen-Sans'",
    "mono": "'JetBrainsMonoNL'"
  },
  "fontSize": {
    "micro": "0.75rem",
    "small": "0.875rem",
    "h6": "1rem",
    "h5": "1.125rem",
    "h4": "1.25rem",
    "h3": "1.5rem",
    "h2": "2rem",
    "h1": "2.5rem",
    "base": "16px"
  },
  "fontWeight": {
    "bold": "800",
    "light": "100",
    "regular": "400"
  },
  "letterSpacings": {
    "base": 0,
    "mediumHeading": -0.5,
    "largeHeading": -1
  },
  "lineHeight": {
    "base": "1.5",
    "heading": "1.2",
    "largeHeading": "1.05"
  },
  "spatial": {
    "angles": "30 45 60 90 180 270 360",
    "commonSizes": "8 12 16 24 32 36 48 64",
    "measure": "160 192 256 320 480 640 800 960",
    "multiplier": "2",
    "percentages": "1 5 10 15 20 25 30 40 44 50 60 70 75 80 90 100",
    "sizes": "2 4 8 12 16 24 32 36 48 64 80 96 128",
    "zIndex": "10 20 30 40 50 60 70 80 90 100 999"
  }
}