@kaizen/design-tokens 3.1.0

package/src/types.ts

@@ -0,0 +1,225 @@
+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"]
+}
+
+export type ThemeKey = "zen" | "heart" | "custom"
+
+export type Theme = {
+  themeKey: ThemeKey
+  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
+    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
+  }
+  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<Theme, string>

package/tokens/animation.json

@@ -0,0 +1,34 @@
+{
+  "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

@@ -0,0 +1,12 @@
+import { DeepMapObjectLeafs, Theme } from "../src/types"
+import { useTheme, ThemeProvider } from "../react"
+/**
+ * @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

@@ -0,0 +1,44 @@
+{
+  "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"
+    }
+  }
+}

package/tokens/border.json.d.ts

@@ -0,0 +1,12 @@
+import { DeepMapObjectLeafs, Theme } from "../src/types"
+import { useTheme, ThemeProvider } from "../react"
+/**
+ * @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 border: DeepMapObjectLeafs<Theme["border"], 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 { border }

package/tokens/color.json

@@ -0,0 +1,228 @@
+{
+  "dataViz": {
+    "favorable": "var(--data-viz-favorable, #7dd5bd)",
+    "favorable-rgb": "var(--data-viz-favorable-rgb, 125, 213, 189)",
+    "favorable-rgb-id": "--data-viz-favorable-rgb",
+    "favorable-id": "--data-viz-favorable",
+    "unfavorable": "var(--data-viz-unfavorable, #e68d97)",
+    "unfavorable-rgb": "var(--data-viz-unfavorable-rgb, 230, 141, 151)",
+    "unfavorable-rgb-id": "--data-viz-unfavorable-rgb",
+    "unfavorable-id": "--data-viz-unfavorable"
+  },
+  "color": {
+    "purple": {
+      "100": "var(--color-purple-100, #f4edf8)",
+      "200": "var(--color-purple-200, #dfc9ea)",
+      "300": "var(--color-purple-300, #c9a5dd)",
+      "400": "var(--color-purple-400, #ae67b1)",
+      "500": "var(--color-purple-500, #844587)",
+      "600": "var(--color-purple-600, #5f3361)",
+      "700": "var(--color-purple-700, #4a234d)",
+      "800": "var(--color-purple-800, #2f2438)",
+      "100-rgb": "var(--color-purple-100-rgb, 244, 237, 248)",
+      "100-rgb-id": "--color-purple-100-rgb",
+      "100-id": "--color-purple-100",
+      "200-rgb": "var(--color-purple-200-rgb, 223, 201, 234)",
+      "200-rgb-id": "--color-purple-200-rgb",
+      "200-id": "--color-purple-200",
+      "300-rgb": "var(--color-purple-300-rgb, 201, 165, 221)",
+      "300-rgb-id": "--color-purple-300-rgb",
+      "300-id": "--color-purple-300",
+      "400-rgb": "var(--color-purple-400-rgb, 174, 103, 177)",
+      "400-rgb-id": "--color-purple-400-rgb",
+      "400-id": "--color-purple-400",
+      "500-rgb": "var(--color-purple-500-rgb, 132, 69, 135)",
+      "500-rgb-id": "--color-purple-500-rgb",
+      "500-id": "--color-purple-500",
+      "600-rgb": "var(--color-purple-600-rgb, 95, 51, 97)",
+      "600-rgb-id": "--color-purple-600-rgb",
+      "600-id": "--color-purple-600",
+      "700-rgb": "var(--color-purple-700-rgb, 74, 35, 77)",
+      "700-rgb-id": "--color-purple-700-rgb",
+      "700-id": "--color-purple-700",
+      "800-rgb": "var(--color-purple-800-rgb, 47, 36, 56)",
+      "800-rgb-id": "--color-purple-800-rgb",
+      "800-id": "--color-purple-800"
+    },
+    "blue": {
+      "100": "var(--color-blue-100, #e6f6ff)",
+      "200": "var(--color-blue-200, #bde2f5)",
+      "300": "var(--color-blue-300, #73c0e8)",
+      "400": "var(--color-blue-400, #008bd6)",
+      "500": "var(--color-blue-500, #0168b3)",
+      "600": "var(--color-blue-600, #004970)",
+      "700": "var(--color-blue-700, #003157)",
+      "100-rgb": "var(--color-blue-100-rgb, 230, 246, 255)",
+      "100-rgb-id": "--color-blue-100-rgb",
+      "100-id": "--color-blue-100",
+      "200-rgb": "var(--color-blue-200-rgb, 189, 226, 245)",
+      "200-rgb-id": "--color-blue-200-rgb",
+      "200-id": "--color-blue-200",
+      "300-rgb": "var(--color-blue-300-rgb, 115, 192, 232)",
+      "300-rgb-id": "--color-blue-300-rgb",
+      "300-id": "--color-blue-300",
+      "400-rgb": "var(--color-blue-400-rgb, 0, 139, 214)",
+      "400-rgb-id": "--color-blue-400-rgb",
+      "400-id": "--color-blue-400",
+      "500-rgb": "var(--color-blue-500-rgb, 1, 104, 179)",
+      "500-rgb-id": "--color-blue-500-rgb",
+      "500-id": "--color-blue-500",
+      "600-rgb": "var(--color-blue-600-rgb, 0, 73, 112)",
+      "600-rgb-id": "--color-blue-600-rgb",
+      "600-id": "--color-blue-600",
+      "700-rgb": "var(--color-blue-700-rgb, 0, 49, 87)",
+      "700-rgb-id": "--color-blue-700-rgb",
+      "700-id": "--color-blue-700"
+    },
+    "green": {
+      "100": "var(--color-green-100, #e8f8f4)",
+      "200": "var(--color-green-200, #c4ede2)",
+      "300": "var(--color-green-300, #8fdbc7)",
+      "400": "var(--color-green-400, #5dcbad)",
+      "500": "var(--color-green-500, #3caf90)",
+      "600": "var(--color-green-600, #2c7d67)",
+      "700": "var(--color-green-700, #22594a)",
+      "100-rgb": "var(--color-green-100-rgb, 232, 248, 244)",
+      "100-rgb-id": "--color-green-100-rgb",
+      "100-id": "--color-green-100",
+      "200-rgb": "var(--color-green-200-rgb, 196, 237, 226)",
+      "200-rgb-id": "--color-green-200-rgb",
+      "200-id": "--color-green-200",
+      "300-rgb": "var(--color-green-300-rgb, 143, 219, 199)",
+      "300-rgb-id": "--color-green-300-rgb",
+      "300-id": "--color-green-300",
+      "400-rgb": "var(--color-green-400-rgb, 93, 203, 173)",
+      "400-rgb-id": "--color-green-400-rgb",
+      "400-id": "--color-green-400",
+      "500-rgb": "var(--color-green-500-rgb, 60, 175, 144)",
+      "500-rgb-id": "--color-green-500-rgb",
+      "500-id": "--color-green-500",
+      "600-rgb": "var(--color-green-600-rgb, 44, 125, 103)",
+      "600-rgb-id": "--color-green-600-rgb",
+      "600-id": "--color-green-600",
+      "700-rgb": "var(--color-green-700-rgb, 34, 89, 74)",
+      "700-rgb-id": "--color-green-700-rgb",
+      "700-id": "--color-green-700"
+    },
+    "yellow": {
+      "100": "var(--color-yellow-100, #fff9e4)",
+      "200": "var(--color-yellow-200, #ffeeb3)",
+      "300": "var(--color-yellow-300, #ffe36e)",
+      "400": "var(--color-yellow-400, #ffca4d)",
+      "500": "var(--color-yellow-500, #ffb600)",
+      "600": "var(--color-yellow-600, #c68600)",
+      "700": "var(--color-yellow-700, #876400)",
+      "100-rgb": "var(--color-yellow-100-rgb, 255, 249, 228)",
+      "100-rgb-id": "--color-yellow-100-rgb",
+      "100-id": "--color-yellow-100",
+      "200-rgb": "var(--color-yellow-200-rgb, 255, 238, 179)",
+      "200-rgb-id": "--color-yellow-200-rgb",
+      "200-id": "--color-yellow-200",
+      "300-rgb": "var(--color-yellow-300-rgb, 255, 227, 110)",
+      "300-rgb-id": "--color-yellow-300-rgb",
+      "300-id": "--color-yellow-300",
+      "400-rgb": "var(--color-yellow-400-rgb, 255, 202, 77)",
+      "400-rgb-id": "--color-yellow-400-rgb",
+      "400-id": "--color-yellow-400",
+      "500-rgb": "var(--color-yellow-500-rgb, 255, 182, 0)",
+      "500-rgb-id": "--color-yellow-500-rgb",
+      "500-id": "--color-yellow-500",
+      "600-rgb": "var(--color-yellow-600-rgb, 198, 134, 0)",
+      "600-rgb-id": "--color-yellow-600-rgb",
+      "600-id": "--color-yellow-600",
+      "700-rgb": "var(--color-yellow-700-rgb, 135, 100, 0)",
+      "700-rgb-id": "--color-yellow-700-rgb",
+      "700-id": "--color-yellow-700"
+    },
+    "red": {
+      "100": "var(--color-red-100, #fdeaee)",
+      "200": "var(--color-red-200, #f9c2cb)",
+      "300": "var(--color-red-300, #f597a8)",
+      "400": "var(--color-red-400, #e0707d)",
+      "500": "var(--color-red-500, #c93b55)",
+      "600": "var(--color-red-600, #a82433)",
+      "700": "var(--color-red-700, #6c1e20)",
+      "100-rgb": "var(--color-red-100-rgb, 253, 234, 238)",
+      "100-rgb-id": "--color-red-100-rgb",
+      "100-id": "--color-red-100",
+      "200-rgb": "var(--color-red-200-rgb, 249, 194, 203)",
+      "200-rgb-id": "--color-red-200-rgb",
+      "200-id": "--color-red-200",
+      "300-rgb": "var(--color-red-300-rgb, 245, 151, 168)",
+      "300-rgb-id": "--color-red-300-rgb",
+      "300-id": "--color-red-300",
+      "400-rgb": "var(--color-red-400-rgb, 224, 112, 125)",
+      "400-rgb-id": "--color-red-400-rgb",
+      "400-id": "--color-red-400",
+      "500-rgb": "var(--color-red-500-rgb, 201, 59, 85)",
+      "500-rgb-id": "--color-red-500-rgb",
+      "500-id": "--color-red-500",
+      "600-rgb": "var(--color-red-600-rgb, 168, 36, 51)",
+      "600-rgb-id": "--color-red-600-rgb",
+      "600-id": "--color-red-600",
+      "700-rgb": "var(--color-red-700-rgb, 108, 30, 32)",
+      "700-rgb-id": "--color-red-700-rgb",
+      "700-id": "--color-red-700"
+    },
+    "orange": {
+      "100": "var(--color-orange-100, #fff0e8)",
+      "200": "var(--color-orange-200, #ffd1b9)",
+      "300": "var(--color-orange-300, #ffb08a)",
+      "400": "var(--color-orange-400, #ff9461)",
+      "500": "var(--color-orange-500, #e96c2f)",
+      "600": "var(--color-orange-600, #b74302)",
+      "700": "var(--color-orange-700, #903c00)",
+      "100-rgb": "var(--color-orange-100-rgb, 255, 240, 232)",
+      "100-rgb-id": "--color-orange-100-rgb",
+      "100-id": "--color-orange-100",
+      "200-rgb": "var(--color-orange-200-rgb, 255, 209, 185)",
+      "200-rgb-id": "--color-orange-200-rgb",
+      "200-id": "--color-orange-200",
+      "300-rgb": "var(--color-orange-300-rgb, 255, 176, 138)",
+      "300-rgb-id": "--color-orange-300-rgb",
+      "300-id": "--color-orange-300",
+      "400-rgb": "var(--color-orange-400-rgb, 255, 148, 97)",
+      "400-rgb-id": "--color-orange-400-rgb",
+      "400-id": "--color-orange-400",
+      "500-rgb": "var(--color-orange-500-rgb, 233, 108, 47)",
+      "500-rgb-id": "--color-orange-500-rgb",
+      "500-id": "--color-orange-500",
+      "600-rgb": "var(--color-orange-600-rgb, 183, 67, 2)",
+      "600-rgb-id": "--color-orange-600-rgb",
+      "600-id": "--color-orange-600",
+      "700-rgb": "var(--color-orange-700-rgb, 144, 60, 0)",
+      "700-rgb-id": "--color-orange-700-rgb",
+      "700-id": "--color-orange-700"
+    },
+    "gray": {
+      "100": "var(--color-gray-100, #f9f9f9)",
+      "200": "var(--color-gray-200, #f4f4f5)",
+      "300": "var(--color-gray-300, #eaeaec)",
+      "400": "var(--color-gray-400, #cdcdd0)",
+      "500": "var(--color-gray-500, #8c8c97)",
+      "600": "var(--color-gray-600, #524e56)",
+      "100-rgb": "var(--color-gray-100-rgb, 249, 249, 249)",
+      "100-rgb-id": "--color-gray-100-rgb",
+      "100-id": "--color-gray-100",
+      "200-rgb": "var(--color-gray-200-rgb, 244, 244, 245)",
+      "200-rgb-id": "--color-gray-200-rgb",
+      "200-id": "--color-gray-200",
+      "300-rgb": "var(--color-gray-300-rgb, 234, 234, 236)",
+      "300-rgb-id": "--color-gray-300-rgb",
+      "300-id": "--color-gray-300",
+      "400-rgb": "var(--color-gray-400-rgb, 205, 205, 208)",
+      "400-rgb-id": "--color-gray-400-rgb",
+      "400-id": "--color-gray-400",
+      "500-rgb": "var(--color-gray-500-rgb, 140, 140, 151)",
+      "500-rgb-id": "--color-gray-500-rgb",
+      "500-id": "--color-gray-500",
+      "600-rgb": "var(--color-gray-600-rgb, 82, 78, 86)",
+      "600-rgb-id": "--color-gray-600-rgb",
+      "600-id": "--color-gray-600"
+    },
+    "white": "var(--color-white, #ffffff)",
+    "white-rgb": "var(--color-white-rgb, 255, 255, 255)",
+    "white-rgb-id": "--color-white-rgb",
+    "white-id": "--color-white"
+  }
+}

package/tokens/color.json.d.ts

@@ -0,0 +1,12 @@
+import { DeepMapObjectLeafs, Theme } from "../src/types"
+import { useTheme, ThemeProvider } from "../react"
+/**
+ * @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 color: DeepMapObjectLeafs<Theme["color"], 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 { color }

package/tokens/layout.json

@@ -0,0 +1,9 @@
+{
+  "layout": {
+    "contentMaxWidth": "1392px",
+    "contentSideMargin": "72px",
+    "mobileActionsDrawerHeight": "60px",
+    "navigationBarHeight": "72px",
+    "breakpoints": { "medium": "768px", "large": "1080px" }
+  }
+}

package/tokens/layout.json.d.ts

@@ -0,0 +1,12 @@
+import { DeepMapObjectLeafs, Theme } from "../src/types"
+import { useTheme, ThemeProvider } from "../react"
+/**
+ * @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 layout: DeepMapObjectLeafs<Theme["layout"], 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 { layout }

package/tokens/shadow.json

@@ -0,0 +1,12 @@
+{
+  "shadow": {
+    "small": {
+      "boxShadow": "var(--shadow-small-box-shadow, 0 0 6px rgba(53, 55, 74, 0.09))",
+      "boxShadow-id": "--shadow-small-box-shadow"
+    },
+    "large": {
+      "boxShadow": "var(--shadow-large-box-shadow, 0 0 12px rgba(53, 55, 74, 0.19))",
+      "boxShadow-id": "--shadow-large-box-shadow"
+    }
+  }
+}

package/tokens/shadow.json.d.ts

@@ -0,0 +1,12 @@
+import { DeepMapObjectLeafs, Theme } from "../src/types"
+import { useTheme, ThemeProvider } from "../react"
+/**
+ * @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 shadow: DeepMapObjectLeafs<Theme["shadow"], 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 { shadow }

package/tokens/spacing.json

@@ -0,0 +1,22 @@
+{
+  "spacing": {
+    "xs": "var(--spacing-xs, 0.375rem)",
+    "xs-id": "--spacing-xs",
+    "sm": "var(--spacing-sm, 0.75rem)",
+    "sm-id": "--spacing-sm",
+    "md": "var(--spacing-md, 1.5rem)",
+    "md-id": "--spacing-md",
+    "lg": "var(--spacing-lg, 2.25rem)",
+    "lg-id": "--spacing-lg",
+    "xl": "var(--spacing-xl, 3rem)",
+    "xl-id": "--spacing-xl",
+    "xxl": "var(--spacing-xxl, 3.75rem)",
+    "xxl-id": "--spacing-xxl",
+    "xxxl": "var(--spacing-xxxl, 4.5rem)",
+    "xxxl-id": "--spacing-xxxl",
+    "xxxxl": "var(--spacing-xxxxl, 5.25rem)",
+    "xxxxl-id": "--spacing-xxxxl",
+    "xxxxxl": "var(--spacing-xxxxxl, 6rem)",
+    "xxxxxl-id": "--spacing-xxxxxl"
+  }
+}

package/tokens/spacing.json.d.ts

@@ -0,0 +1,12 @@
+import { DeepMapObjectLeafs, Theme } from "../src/types"
+import { useTheme, ThemeProvider } from "../react"
+/**
+ * @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 spacing: DeepMapObjectLeafs<Theme["spacing"], 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 { spacing }