@kaizen/design-tokens 10.3.13 → 10.3.14

package/js/tokens.ts

@@ -0,0 +1,315 @@
+import { TokenStructure } from "./types"
+
+export const tokens: TokenStructure = {
+  animation: {
+    easingFunction: {
+      easeInOut: "cubic-bezier(0.455, 0.03, 0.515, 0.955)",
+      easeIn: "cubic-bezier(0.55, 0.085, 0.68, 0.53)",
+      easeOut: "cubic-bezier(0.25, 0.46, 0.45, 0.94)",
+      linear: "linear",
+      bounceIn: "cubic-bezier(0.485, 0.155, 0.24, 1.245)",
+      bounceOut: "cubic-bezier(0.485, 0.155, 0.515, 0.845)",
+      bounceInOut: "cubic-bezier(0.76, -0.245, 0.24, 1.245)",
+    },
+    duration: {
+      instant: "0ms",
+      immediate: "100ms",
+      rapid: "200ms",
+      fast: "300ms",
+      slow: "400ms",
+      deliberate: "700ms",
+    },
+  },
+  border: {
+    solid: {
+      borderWidth: "2px",
+      borderRadius: "7px",
+      borderStyle: "solid",
+      borderColor: "#e1e2ea",
+    },
+    dashed: {
+      borderWidth: "2px",
+      borderRadius: "7px",
+      borderStyle: "dashed",
+    },
+    borderless: {
+      borderWidth: "2px",
+      borderRadius: "7px",
+      borderStyle: "solid",
+      borderColor: "transparent",
+    },
+    focusRing: {
+      borderWidth: "2px",
+      borderRadius: "10px",
+      borderStyle: "solid",
+    },
+  },
+  color: {
+    purple: {
+      100: "#f4edf8",
+      200: "#dfc9ea",
+      300: "#c9a5dd",
+      400: "#ae67b1",
+      500: "#844587",
+      600: "#5f3361",
+      700: "#4a234d",
+      800: "#2f2438",
+    },
+    blue: {
+      100: "#e6f6ff",
+      200: "#bde2f5",
+      300: "#73c0e8",
+      400: "#008bd6",
+      500: "#0168b3",
+      600: "#004970",
+      700: "#003157",
+    },
+    green: {
+      100: "#e8f8f4",
+      200: "#c4ede2",
+      300: "#8fdbc7",
+      400: "#5dcbad",
+      500: "#44a289",
+      600: "#2c7d67",
+      700: "#22594a",
+    },
+    yellow: {
+      100: "#fff9e4",
+      200: "#ffeeb3",
+      300: "#ffe36e",
+      400: "#ffca4d",
+      500: "#ffb600",
+      600: "#c68600",
+      700: "#876400",
+    },
+    red: {
+      100: "#fdeaee",
+      200: "#f9c2cb",
+      300: "#f597a8",
+      400: "#e0707d",
+      500: "#c93b55",
+      600: "#a82433",
+      700: "#6c1e20",
+    },
+    orange: {
+      100: "#fff0e8",
+      200: "#ffd1b9",
+      300: "#ffb08a",
+      400: "#ff9461",
+      500: "#e96c2f",
+      600: "#b74302",
+      700: "#903c00",
+    },
+    gray: {
+      100: "#f9f9f9",
+      200: "#f4f4f5",
+      300: "#eaeaec",
+      400: "#cdcdd0",
+      500: "#8c8c97",
+      600: "#524e56",
+    },
+    white: "#ffffff",
+  },
+  dataViz: {
+    favorable: "#7dd5bd",
+    unfavorable: "#e68d97",
+  },
+  layout: {
+    contentMaxWidth: "1392px",
+    contentMaxWidthWithSidebar: "1080px",
+    contentSideMargin: "72px",
+    mobileActionsDrawerHeight: "60px",
+    navigationBarHeight: "72px",
+    breakpoints: {
+      medium: "768px",
+      large: "1080px",
+    },
+  },
+  shadow: {
+    small: {
+      boxShadow:
+        "0px 3px 16px rgba(0, 0, 0, 0.06), 0px 1px 3px rgba(0, 0, 0, 0.1)",
+    },
+    large: {
+      boxShadow:
+        "0px 8px 40px rgba(0, 0, 0, 0.08), 0px 3px 9px rgba(0, 0, 0, 0.1)",
+    },
+  },
+  spacing: {
+    xs: "0.375rem",
+    sm: "0.75rem",
+    md: "1.5rem",
+    lg: "2.25rem",
+    xl: "3rem",
+    xxl: "3.75rem",
+    xxxl: "4.5rem",
+    xxxxl: "5.25rem",
+    xxxxxl: "6rem",
+    0: "0",
+    1: ".0625rem",
+    2: ".125rem",
+    4: ".25rem",
+    6: ".375rem",
+    8: ".5rem",
+    12: ".75rem",
+    16: "1rem",
+    24: "1.5rem",
+    32: "2rem",
+    40: "2.5rem",
+    48: "3rem",
+    56: "3.5rem",
+    64: "4rem",
+    72: "4.5rem",
+    80: "5rem",
+    96: "6rem",
+    112: "7rem",
+    128: "8rem",
+    160: "10rem",
+    200: "12.5rem",
+    240: "15rem",
+    280: "17.5rem",
+    320: "20rem",
+  },
+  typography: {
+    dataLarge: {
+      fontFamily: '"Inter", "Noto Sans", Helvetica, Arial, sans-serif',
+      fontWeight: 700,
+      fontSize: "5.25rem",
+      lineHeight: "5.25rem",
+      letterSpacing: "normal",
+    },
+    dataLargeUnits: {
+      fontFamily: '"Inter", "Noto Sans", Helvetica, Arial, sans-serif',
+      fontWeight: 700,
+      fontSize: "2.625rem",
+      lineHeight: "5.25rem",
+      letterSpacing: "normal",
+    },
+    dataMedium: {
+      fontFamily: '"Inter", "Noto Sans", Helvetica, Arial, sans-serif',
+      fontWeight: 700,
+      fontSize: "3rem",
+      lineHeight: "5rem",
+      letterSpacing: "normal",
+    },
+    dataMediumUnits: {
+      fontFamily: '"Inter", "Noto Sans", Helvetica, Arial, sans-serif',
+      fontWeight: 700,
+      fontSize: "1.5rem",
+      lineHeight: "5rem",
+      letterSpacing: "normal",
+    },
+    dataSmall: {
+      fontFamily: '"Inter", "Noto Sans", Helvetica, Arial, sans-serif',
+      fontWeight: 700,
+      fontSize: "1.5rem",
+      lineHeight: "1.5rem",
+      letterSpacing: "normal",
+    },
+    dataSmallUnits: {
+      fontFamily: '"Inter", "Noto Sans", Helvetica, Arial, sans-serif',
+      fontWeight: 700,
+      fontSize: "1.125rem",
+      lineHeight: "1.5rem",
+      letterSpacing: "normal",
+    },
+    display0: {
+      fontFamily: '"Tiempos Headline", Georgia, serif',
+      fontWeight: 800,
+      fontSize: "4.5rem",
+      lineHeight: "5.25rem",
+      letterSpacing: "0em",
+    },
+    heading1: {
+      fontFamily: '"Inter", "Noto Sans", Helvetica, Arial, sans-serif',
+      fontWeight: 700,
+      fontSize: "2.125rem",
+      lineHeight: "2.625rem",
+      letterSpacing: "normal",
+    },
+    heading2: {
+      fontFamily: '"Inter", "Noto Sans", Helvetica, Arial, sans-serif',
+      fontWeight: 700,
+      fontSize: "1.75rem",
+      lineHeight: "2.25rem",
+      letterSpacing: "normal",
+    },
+    heading3: {
+      fontFamily: '"Inter", "Noto Sans", Helvetica, Arial, sans-serif',
+      fontWeight: 700,
+      fontSize: "1.375rem",
+      lineHeight: "1.875rem",
+      letterSpacing: "normal",
+    },
+    heading4: {
+      fontFamily: '"Inter", "Noto Sans", Helvetica, Arial, sans-serif',
+      fontWeight: 600,
+      fontSize: "1.125rem",
+      lineHeight: "1.5rem",
+      letterSpacing: "normal",
+    },
+    heading5: {
+      fontFamily: '"Inter", "Noto Sans", Helvetica, Arial, sans-serif',
+      fontWeight: 600,
+      fontSize: "1rem",
+      lineHeight: "1.5rem",
+      letterSpacing: "normal",
+    },
+    heading6: {
+      fontFamily: '"Inter", "Noto Sans", Helvetica, Arial, sans-serif',
+      fontWeight: 700,
+      fontSize: "0.875rem",
+      lineHeight: "1.5rem",
+      letterSpacing: "normal",
+    },
+    paragraphIntroLede: {
+      fontFamily: '"Inter", "Noto Sans", Helvetica, Arial, sans-serif',
+      fontWeight: 400,
+      fontSize: "1.25rem",
+      lineHeight: "1.875rem",
+      letterSpacing: "0",
+      maxWidth: "975px",
+    },
+    paragraphBody: {
+      fontFamily: '"Inter", "Noto Sans", Helvetica, Arial, sans-serif',
+      fontWeight: 400,
+      fontSize: "1rem",
+      lineHeight: "1.5rem",
+      letterSpacing: "normal",
+      maxWidth: "780px",
+    },
+    paragraphSmall: {
+      fontFamily: '"Inter", "Noto Sans", Helvetica, Arial, sans-serif',
+      fontWeight: 400,
+      fontSize: "0.875rem",
+      lineHeight: "1.125rem",
+      letterSpacing: "normal",
+      maxWidth: "680px",
+    },
+    paragraphExtraSmall: {
+      fontFamily: '"Inter", "Noto Sans", Helvetica, Arial, sans-serif',
+      fontWeight: 400,
+      fontSize: "0.75rem",
+      lineHeight: "1.125rem",
+      letterSpacing: "normal",
+      maxWidth: "600px",
+    },
+    paragraphBold: {
+      fontWeight: 600,
+    },
+    buttonPrimary: {
+      fontFamily: '"Inter", "Noto Sans", Helvetica, Arial, sans-serif',
+      fontWeight: 700,
+      fontSize: "1.125rem",
+      lineHeight: "1.5rem",
+      letterSpacing: "normal",
+    },
+    buttonSecondary: {
+      fontFamily: '"Inter", "Noto Sans", Helvetica, Arial, sans-serif',
+      fontWeight: 500,
+      fontSize: "1rem",
+      lineHeight: "1.5rem",
+      letterSpacing: "normal",
+    },
+  },
+}

package/js/types.ts

@@ -0,0 +1,249 @@
+import type { CSSProperties as ReactCSSProperties } from "react"
+
+/**
+ * Use a custom type for CSS properties becauase we should eventually write a more strongly typed version using template literal types.
+ * This could definitely be contributed back to the community too. An example starting point here https://github.com/ghoullier/awesome-template-literal-types#css-parser
+ * For example:
+ * ```ts
+ * type Font = {
+ *   fontSize: `${number}rem`,
+ *
+ *  }
+ * type HexDigit = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | A | B | C | D | E | F ;
+ * type Color = `rgba(${number}, ${number}, ${number}, ${number}) | #${HexDigit}${HexDigit}${HexDigit}` // You get the point
+ *
+ * ```
+ * */
+type KaizenCSSProperties = ReactCSSProperties
+
+type Hex = string
+// Once TypeScript is upgraded in the repo, you can use Lowercase<>
+// type Hex = Lowercase<string>
+
+export type TypographyFont = {
+  fontFamily: KaizenCSSProperties["fontFamily"]
+  fontWeight: KaizenCSSProperties["fontWeight"]
+  fontSize: KaizenCSSProperties["fontSize"]
+  lineHeight: KaizenCSSProperties["lineHeight"]
+  letterSpacing: KaizenCSSProperties["letterSpacing"]
+  maxWidth?: KaizenCSSProperties["maxWidth"]
+}
+
+export type TokenStructure = {
+  border: {
+    solid: {
+      borderWidth: KaizenCSSProperties["borderWidth"]
+      borderRadius: KaizenCSSProperties["borderRadius"]
+      borderStyle: KaizenCSSProperties["borderStyle"]
+      borderColor: KaizenCSSProperties["borderColor"]
+    }
+    dashed: {
+      borderWidth: KaizenCSSProperties["borderWidth"]
+      borderRadius: KaizenCSSProperties["borderRadius"]
+      borderStyle: KaizenCSSProperties["borderStyle"]
+    }
+    borderless: {
+      borderWidth: KaizenCSSProperties["borderWidth"]
+      borderRadius: KaizenCSSProperties["borderRadius"]
+      borderStyle: KaizenCSSProperties["borderStyle"]
+      borderColor: KaizenCSSProperties["borderColor"]
+    }
+    focusRing: {
+      borderWidth: KaizenCSSProperties["borderWidth"]
+      borderRadius: KaizenCSSProperties["borderRadius"]
+      borderStyle: KaizenCSSProperties["borderStyle"]
+    }
+  }
+  animation: {
+    easingFunction: {
+      easeInOut: string
+      easeIn: string
+      easeOut: string
+      linear: string
+      bounceIn: string
+      bounceOut: string
+      bounceInOut: string
+    }
+    duration: {
+      instant: string
+      immediate: string
+      rapid: string
+      fast: string
+      slow: string
+      deliberate: string
+    }
+  }
+  color: {
+    purple: {
+      "100": Hex
+      "200": Hex
+      "300": Hex
+      "400": Hex
+      "500": Hex
+      "600": Hex
+      "700": Hex
+      "800": Hex
+    }
+    blue: {
+      "100": Hex
+      "200": Hex
+      "300": Hex
+      "400": Hex
+      "500": Hex
+      "600": Hex
+      "700": Hex
+    }
+    green: {
+      "100": Hex
+      "200": Hex
+      "300": Hex
+      "400": Hex
+      "500": Hex
+      "600": Hex
+      "700": Hex
+    }
+    yellow: {
+      "100": Hex
+      "200": Hex
+      "300": Hex
+      "400": Hex
+      "500": Hex
+      "600": Hex
+      "700": Hex
+    }
+    red: {
+      "100": Hex
+      "200": Hex
+      "300": Hex
+      "400": Hex
+      "500": Hex
+      "600": Hex
+      "700": Hex
+    }
+    orange: {
+      "100": Hex
+      "200": Hex
+      "300": Hex
+      "400": Hex
+      "500": Hex
+      "600": Hex
+      "700": Hex
+    }
+    gray: {
+      "100": Hex
+      "200": Hex
+      "300": Hex
+      "400": Hex
+      "500": Hex
+      "600": Hex
+    }
+    white: Hex
+  }
+  dataViz: {
+    favorable: Hex
+    unfavorable: Hex
+  }
+  layout: {
+    contentMaxWidth: string
+    contentMaxWidthWithSidebar: string
+    contentSideMargin: string
+    mobileActionsDrawerHeight: string
+    navigationBarHeight: string
+    breakpoints: {
+      medium: string
+      large: string
+    }
+  }
+  shadow: {
+    small: {
+      boxShadow: string
+    }
+    large: {
+      boxShadow: string
+    }
+  }
+  spacing: {
+    xs: string
+    sm: string
+    md: string
+    lg: string
+    xl: string
+    xxl: string
+    xxxl: string
+    xxxxl: string
+    xxxxxl: string
+    0: string
+    1: string
+    2: string
+    4: string
+    6: string
+    8: string
+    12: string
+    16: string
+    24: string
+    32: string
+    40: string
+    48: string
+    56: string
+    64: string
+    72: string
+    80: string
+    96: string
+    112: string
+    128: string
+    160: string
+    200: string
+    240: string
+    280: string
+    320: string
+  }
+  typography: {
+    dataLarge: TypographyFont
+    dataLargeUnits: TypographyFont
+    dataMedium: TypographyFont
+    dataMediumUnits: TypographyFont
+    dataSmall: TypographyFont
+    dataSmallUnits: TypographyFont
+    display0: TypographyFont
+    heading1: TypographyFont
+    heading2: TypographyFont
+    heading3: TypographyFont
+    heading4: TypographyFont
+    heading5: TypographyFont
+    heading6: TypographyFont
+    paragraphIntroLede: TypographyFont
+    paragraphBody: TypographyFont
+    paragraphSmall: TypographyFont
+    paragraphExtraSmall: TypographyFont
+    paragraphBold: {
+      fontWeight: KaizenCSSProperties["fontWeight"]
+    }
+    buttonPrimary: TypographyFont
+    buttonSecondary: TypographyFont
+  }
+}
+
+// Converts all leafs (values that aren't objects) of an object tree to LeafType.
+export type DeepMapObjectLeafs<T, LeafType> = T extends
+  | string
+  | number
+  | bigint
+  | boolean
+  | symbol
+  | null
+  | undefined
+  | ((...params: any[]) => any)
+  ? LeafType
+  : T extends Record<any, any>
+  ? {
+      [Key in keyof T]: DeepMapObjectLeafs<T[Key], LeafType>
+    }
+  : T
+
+/**
+ * Apologies for the complex types.
+ * This type represents the Theme type but with every leaf value in the tree mapped strictly to a string, rather than a number or a more complex type such as a string union.
+ * The reason for this is to have a more accurate type for the generated hierarchy of design tokens which are represented as CSS custom properties, e.g. `var(--color-purple-800)`.
+ */
+
+export type CSSVariableTheme = DeepMapObjectLeafs<TokenStructure, string>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@kaizen/design-tokens",
   "description": "Tokens used in the Kaizen Design System",
-  "version": "10.3.13",
+  "version": "10.3.14",
   "homepage": "https://github.com/cultureamp/kaizen-design-system/tree/main/packages/design-tokens",
   "repository": {
     "type": "git",
@@ -11,9 +11,10 @@
     "url": "https://github.com/cultureamp/kaizen-design-system/issues"
   },
   "files": [
-    "tokens",
     "sass",
     "less",
+    "css",
+    "js",
     "dist"
   ],
   "main": "dist/index.js",
@@ -31,11 +32,12 @@
     "prepublishOnly": "yarn build:json && yarn build:less && yarn build:sass && yarn build:ts"
   },
   "devDependencies": {
-    "@types/lodash.flatmap": "^4.5.7",
-    "@types/react-highlight": "^0.12.5",
-    "@types/yargs": "^17.0.24",
+    "@types/lodash.flatmap": "^4.5.8",
+    "@types/react-highlight": "^0.12.7",
+    "@types/yargs": "^17.0.29",
     "json-to-flat-sass": "^1.0.0",
     "lodash.flatmap": "^4.5.0",
+    "object-to-css-variables": "^0.2.1",
     "postcss": "^8.4.29",
     "prettier": "*",
     "react-highlight": "^0.15.0",
@@ -44,8 +46,8 @@
     "yargs": "^17.7.2"
   },
   "dependencies": {
-    "@types/color-string": "^1.5.3",
-    "@types/lodash.kebabcase": "^4.1.7",
+    "@types/color-string": "^1.5.4",
+    "@types/lodash.kebabcase": "^4.1.8",
     "color-string": "^1.9.1",
     "lodash.kebabcase": "^4.1.1"
   },

package/tokens/animation.json

@@ -1,34 +0,0 @@
-{
-  "animation": {
-    "easingFunction": {
-      "easeInOut": "var(--animation-easing-function-ease-in-out, cubic-bezier(0.455, 0.03, 0.515, 0.955))",
-      "easeInOut-id": "--animation-easing-function-ease-in-out",
-      "easeIn": "var(--animation-easing-function-ease-in, cubic-bezier(0.55, 0.085, 0.68, 0.53))",
-      "easeIn-id": "--animation-easing-function-ease-in",
-      "easeOut": "var(--animation-easing-function-ease-out, cubic-bezier(0.25, 0.46, 0.45, 0.94))",
-      "easeOut-id": "--animation-easing-function-ease-out",
-      "linear": "var(--animation-easing-function-linear, linear)",
-      "linear-id": "--animation-easing-function-linear",
-      "bounceIn": "var(--animation-easing-function-bounce-in, cubic-bezier(0.485, 0.155, 0.24, 1.245))",
-      "bounceIn-id": "--animation-easing-function-bounce-in",
-      "bounceOut": "var(--animation-easing-function-bounce-out, cubic-bezier(0.485, 0.155, 0.515, 0.845))",
-      "bounceOut-id": "--animation-easing-function-bounce-out",
-      "bounceInOut": "var(--animation-easing-function-bounce-in-out, cubic-bezier(0.76, -0.245, 0.24, 1.245))",
-      "bounceInOut-id": "--animation-easing-function-bounce-in-out"
-    },
-    "duration": {
-      "instant": "var(--animation-duration-instant, 0ms)",
-      "instant-id": "--animation-duration-instant",
-      "immediate": "var(--animation-duration-immediate, 100ms)",
-      "immediate-id": "--animation-duration-immediate",
-      "rapid": "var(--animation-duration-rapid, 200ms)",
-      "rapid-id": "--animation-duration-rapid",
-      "fast": "var(--animation-duration-fast, 300ms)",
-      "fast-id": "--animation-duration-fast",
-      "slow": "var(--animation-duration-slow, 400ms)",
-      "slow-id": "--animation-duration-slow",
-      "deliberate": "var(--animation-duration-deliberate, 700ms)",
-      "deliberate-id": "--animation-duration-deliberate"
-    }
-  }
-}

package/tokens/animation.json.d.ts

@@ -1,11 +0,0 @@
-import { DeepMapObjectLeafs, Theme } from "../src/types"
-/**
- * @deprecated
- * The preferred way to use Kaizen tokens in TypeScript/JavaScript is to use the React hook {@link useTheme} paired with a {@link ThemeProvider}
- */
-export const animation: DeepMapObjectLeafs<Theme["animation"], string>
-/**
- * @deprecated
- * The preferred way to use Kaizen tokens in TypeScript/JavaScript is to use the React hook {@link useTheme} paired with a {@link ThemeProvider}
- */
-export default { animation }

package/tokens/border.json

@@ -1,44 +0,0 @@
-{
-  "border": {
-    "solid": {
-      "borderWidth": "var(--border-solid-border-width, 2px)",
-      "borderWidth-id": "--border-solid-border-width",
-      "borderRadius": "var(--border-solid-border-radius, 7px)",
-      "borderRadius-id": "--border-solid-border-radius",
-      "borderStyle": "var(--border-solid-border-style, solid)",
-      "borderStyle-id": "--border-solid-border-style",
-      "borderColor": "var(--border-solid-border-color, #e1e2ea)",
-      "borderColor-rgb": "var(--border-solid-border-color-rgb, 225, 226, 234)",
-      "borderColor-rgb-id": "--border-solid-border-color-rgb",
-      "borderColor-id": "--border-solid-border-color"
-    },
-    "dashed": {
-      "borderWidth": "var(--border-dashed-border-width, 2px)",
-      "borderWidth-id": "--border-dashed-border-width",
-      "borderRadius": "var(--border-dashed-border-radius, 7px)",
-      "borderRadius-id": "--border-dashed-border-radius",
-      "borderStyle": "var(--border-dashed-border-style, dashed)",
-      "borderStyle-id": "--border-dashed-border-style"
-    },
-    "borderless": {
-      "borderWidth": "var(--border-borderless-border-width, 2px)",
-      "borderWidth-id": "--border-borderless-border-width",
-      "borderRadius": "var(--border-borderless-border-radius, 7px)",
-      "borderRadius-id": "--border-borderless-border-radius",
-      "borderStyle": "var(--border-borderless-border-style, solid)",
-      "borderStyle-id": "--border-borderless-border-style",
-      "borderColor": "var(--border-borderless-border-color, transparent)",
-      "borderColor-rgb": "var(--border-borderless-border-color-rgb, 0, 0, 0)",
-      "borderColor-rgb-id": "--border-borderless-border-color-rgb",
-      "borderColor-id": "--border-borderless-border-color"
-    },
-    "focusRing": {
-      "borderWidth": "var(--border-focus-ring-border-width, 2px)",
-      "borderWidth-id": "--border-focus-ring-border-width",
-      "borderRadius": "var(--border-focus-ring-border-radius, 10px)",
-      "borderRadius-id": "--border-focus-ring-border-radius",
-      "borderStyle": "var(--border-focus-ring-border-style, solid)",
-      "borderStyle-id": "--border-focus-ring-border-style"
-    }
-  }
-}