@kaizen/design-tokens 10.3.7 → 10.3.8

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@kaizen/design-tokens",
   "description": "Tokens used in the Kaizen Design System",
-  "version": "10.3.7",
+  "version": "10.3.8",
   "homepage": "https://github.com/cultureamp/kaizen-design-system/tree/main/packages/design-tokens",
   "repository": {
     "type": "git",
@@ -14,10 +14,7 @@
     "tokens",
     "sass",
     "less",
-    "src",
-    "dist",
-    "!**/*.spec.*",
-    "!docs"
+    "dist"
   ],
   "main": "dist/index.js",
   "private": false,
@@ -25,12 +22,12 @@
   "sideEffects": false,
   "scripts": {
     "test": "cd ../../ && yarn jest ./packages/design-tokens",
-    "build": "yarn clean && yarn prepublish",
+    "build": "yarn prepublish",
     "build:json": "yarn ts-node --files ./bin/buildCssVarTokens.ts",
     "build:ts": "tsc --project tsconfig.dist.json",
     "build:less": "json-to-flat-sass './tokens/*.json' 'less' --extension 'less' --caseType 'kebab' && prettier less/* --write",
     "build:sass": "json-to-flat-sass './tokens/*.json' 'sass' --extension 'scss' --caseType 'kebab' && prettier sass/* --write",
-    "clean": "rimraf 'dist'",
+    "clean": "rimraf dist",
     "prepublish": "yarn build:json && yarn build:less && yarn build:sass && yarn build:ts"
   },
   "devDependencies": {

package/src/ThemeManager.ts

@@ -1,78 +0,0 @@
-import { makeCssVariableDefinitionsMap } from "./lib/makeCssVariableDefinitionsMap"
-import { Theme as BaseTheme } from "./types"
-/**
- * Use this class to set and apply themes, and to access or subscribe to the currently active one.
- * This class fulfills the idea of theming and runtime theme switching by relying on CSS variables,
- * and the ability to update them in JavaScript - a framework agnostic method.
- *
- * It works by converting a Theme interface to a flattened map of CSS variable keys and values, then calling `document.documentElement.style.setProperty(key, value)`.
- */
-export class ThemeManager<Theme extends BaseTheme = BaseTheme> {
-  private themeChangeListeners = [] as Array<(theme: Theme) => void>
-  private theme: Theme
-  private rootElement: HTMLElement | null = null
-  private rootElementId: string
-
-  constructor(
-    theme: Theme,
-    rootElementId: string = "",
-    /* This allows you to stop the  class from applying the theme automatically during construction. Defaults to true */
-    apply: boolean = true
-  ) {
-    /*
-      For some reason, storybook likes this way of defining class properties better.
-      If you use `constructor( private theme: Theme, ...)` - theme becomes undefined within the class's methods.
-    */
-    this.theme = theme
-    this.rootElementId = rootElementId
-    if (apply) this.applyCurrentTheme()
-  }
-
-  public getRootElement = (): HTMLElement | null => this.rootElement
-  public getRootElementId = (): string => this.rootElementId
-  public getCurrentTheme = (): Theme => this.theme
-
-  public setRootElement = (element: HTMLElement): void => {
-    this.rootElement = element
-  }
-  public setRootElementId = (rootElementId: string): string =>
-    (this.rootElementId = rootElementId)
-  public setAndApplyTheme = (theme: Theme, force?: boolean): void => {
-    if (!force) {
-      if (this.theme === theme) return
-    }
-    this.theme = theme
-    this.applyCurrentTheme()
-    this.notifyThemeChangeListeners(theme)
-  }
-
-  public addThemeChangeListener = (listener: (theme: Theme) => void): void => {
-    this.themeChangeListeners.push(listener)
-  }
-  public removeThemeChangeListener = (
-    listener: (theme: Theme) => void
-  ): void => {
-    this.themeChangeListeners = this.themeChangeListeners.filter(
-      l => l !== listener
-    )
-  }
-  public applyCurrentTheme = (): void => {
-    if (typeof window !== "undefined") {
-      this.setRootElement(
-        document.getElementById(this.rootElementId) ?? document.documentElement
-      )
-      const cssVariableDefinitions = makeCssVariableDefinitionsMap(this.theme)
-      Object.entries(cssVariableDefinitions).forEach(([key, value]) => {
-        this.rootElement?.style.setProperty(key, value)
-      })
-    }
-  }
-
-  private notifyThemeChangeListeners = (theme: Theme): void => {
-    this.themeChangeListeners.forEach(listener => listener(theme))
-  }
-}
-
-// I would like to expose this, but instantiating ThemeManager in some situations or runtimes (such as nodejs) cause exceptions.
-// For now it is not exposed, but we might come back to it, as it makes sense to have a singleton ThemeManager in almost all cases
-/* export const defaultThemeManager = new ThemeManager(defaultTheme) */

package/src/index.ts

@@ -1,9 +0,0 @@
-// These are exposed at the top level because it seems like they are the most useful and relevent to usage of design tokens.
-export * from "./themes"
-export * from "./types"
-export * from "./ThemeManager"
-export * from "./react"
-
-export { makeCssVariableDefinitionsMap } from "./lib/makeCssVariableDefinitionsMap"
-export { makeCSSVariableTheme } from "./lib/makeCssVariableTheme"
-export { mapLeafsOfObject } from "./lib/mapLeafsOfObject"

package/src/lib/__tests__/themeForTesting.ts

@@ -1,17 +0,0 @@
-export const themeForTesting = {
-  border: {
-    dashed: {
-      borderWidth: "2px",
-      red: "red",
-    },
-  },
-  color: {
-    gray: { 100: "#eee", 200: "#ccc" },
-    purple: { 100: "#eee", 200: "#ccc" },
-    blue: { 100: "#eee", 200: "#ccc" },
-    red: { 100: "#eee", 200: "#ccc" },
-    yellow: { 100: "#eee", 200: "#ccc" },
-    orange: { 100: "#eee", 200: "#ccc" },
-    green: { 100: "#eee", 200: "#ccc" },
-  },
-} as const

package/src/lib/addExtraThemeEntries.ts

@@ -1,56 +0,0 @@
-import colorString from "color-string"
-import { objectPathToCssVarIdentifier } from "./cssVariables"
-
-/**
- * Use this to generate an object containing `${key}: value`, `${key}-rgb: r, g, b`, and/or `${key}-id: --color-blah-XXX`.
- * This is for adding extra neighbouring properties to a theme.
- * For example:
- *  Input:
- *    path: [color, purple, 100]
- *    key: 100
- *    value: #f0f1f4
- *    printValue: (path, v) => `var(--some-key, ${v})`
- *    options: {augmentWithId: true}
- *
- *  Output: {
- *    "100": "var(--some-key, #f0f1f4)",
- *    "100-rgb": "var(--some-key, 240, 241, 244)",
- *    "100-id": "--color-purple-100"
- *    "100-rgb-id": "--color-purple-100-rgb"
- *  }
- */
-export const addExtraThemeEntries = (
-  path: string[],
-  key: string,
-  value: unknown,
-  printValue: <I>(path: string[], value: I) => string,
-  {
-    augmentWithId,
-  }: {
-    /** Setting this to true will add `${key}-id` and ${key}-rgb-id` */
-    augmentWithId: boolean
-  }
-): Record<string, string> => {
-  const colorRgb = typeof value === "string" ? colorString.get.rgb(value) : null
-  const result = {
-    [key]: printValue(path, value),
-  }
-
-  // Add the -rgb key containing the RGB triple of the color (if it is a color)
-  if (colorRgb) {
-    // If the value is a color, always convert to lowercase
-    result[key] = printValue(path, value).toLowerCase()
-
-    const rgbPath = [...path, "rgb"]
-    const rgbTriple = printValue(rgbPath, colorRgb.slice(0, 3).join(", "))
-    result[`${key}-rgb`] = rgbTriple
-    if (augmentWithId) {
-      result[`${key}-rgb-id`] = objectPathToCssVarIdentifier(rgbPath)
-    }
-  }
-  if (augmentWithId) {
-    result[`${key}-id`] = objectPathToCssVarIdentifier(path)
-  }
-
-  return result
-}

package/src/lib/cssVariables.ts

@@ -1,29 +0,0 @@
-import kebab from "lodash.kebabcase"
-
-/**
- * Given an object path (an array of strings) and a value, return a CSS var() function that represents it.
- *
- * Example:
- *  Input:
- *      path: [color, wisteria, 100]
- *      value: #f0f1f4
- *
- *  Output:
- *      "var(--color-wisteria-100, #f0f1f4)"
- *
- */
-export const objectPathToCssVarFunction = (
-  path: string[],
-  value: unknown
-): string => `var(${objectPathToCssVarIdentifier(path)}, ${value})`
-
-/**
- * Given an object path (an array of strings), return a CSS variable identifier.
- *
- * Example:
- *      Input: [color, wisteria, 100]
- *
- *      Output: "--color-wisteria-100"
- */
-export const objectPathToCssVarIdentifier = (path: string[]): string =>
-  `--${path.map(kebab).join("-")}`

package/src/lib/makeCssVariableDefinitionsMap.ts

@@ -1,55 +0,0 @@
-import { addExtraThemeEntries } from "./addExtraThemeEntries"
-import { objectPathToCssVarIdentifier } from "./cssVariables"
-import { mapLeafsOfObject } from "./mapLeafsOfObject"
-
-/**
-
- * Make a map of CSS variables -> values in a consistent way.
- * Use this to, for example, create a CSS file that declares each theme variable on the `:root` pseudo element.
- * Or for example when you're defining CSS variables using `rootElement.style.setProperty` within ThemeManager.
- *
- * It is paramount that this function defines every variable that {@link makeCssVariableTheme} expects to be defined.
- * Otherwise, it's possible that a CSS variable token (something that looks like var(--color-purple-100-rgb)) won't have a matching defined
- * CSS variable like `--color-purple-100-rgb: 123, 123, 123;`
- *
- *
- * For example:
- * Input:
- * ```
- * {
- *      color: {
- *        whatever: {
- *          100: "#ff0022"
- *        }
- *      }
- * }
- * ```
- * Output:
- * ```
- * {
- *  "--color-whatever-100": "#ff0022"
- * }
- */
-export function makeCssVariableDefinitionsMap(
-  theme: Record<string | number, unknown>
-): Record<string, string> {
-  let accumulatedCssVariables = {} as Record<string, string>
-
-  // Shamelessly using a map function like a forEach
-  mapLeafsOfObject(theme, (path, value) => {
-    // Key will be `--color-blah`
-    const key = objectPathToCssVarIdentifier(path)
-    const nextCssVariables = addExtraThemeEntries(
-      path,
-      key,
-      value,
-      (_, v) => `${v}`,
-      { augmentWithId: false }
-    )
-    accumulatedCssVariables = {
-      ...accumulatedCssVariables,
-      ...nextCssVariables,
-    }
-  })
-  return accumulatedCssVariables
-}

package/src/lib/makeCssVariableTheme.ts

@@ -1,70 +0,0 @@
-import { DeepMapObjectLeafs } from "../types"
-import { addExtraThemeEntries } from "./addExtraThemeEntries"
-import { objectPathToCssVarFunction } from "./cssVariables"
-import { mapLeafsOfObject } from "./mapLeafsOfObject"
-
-/**
- * This function could use a new name during a breaking change
- *
- * Given a Theme (which is the source of truth and doesn't contain any computed properties), add extra necessary properties to the tree such as `-rgb` suffixed keys with R, G, B triple values, and
- * convert the leaf values of a theme to a value like `var(--parent1key-parent2key-leafkey)` - a CSS variable with an identifier that represents it's hierarchy.
- *
- * Example:
- * ```
- * {
- *    color: {
- *        purple: {
- *          100: "#f0f1f4"
- *        }
- *    }
- * }
- * ```
- * Transforms into:
- * ```
- * {
- *    color: {
- *        purple: {
- *          100: "var(--color-purple-100, "#f0f1f4")",
- *          "100-rgb": "var(--color-purple-100-rgb, 240, 241, 244)",
- *          "100-id": "--color-purple-100",
- *          "100-rgb-id": "--color-purple-100-rgb"
- *        }
- *    }
- * }
- * ```
- *
- * See {@link addExtraThemeEntries} for how these extra entries are added.
- */
-export function makeCSSVariableTheme<
-  ThemeType extends Record<string | number, unknown>
->(
-  theme: ThemeType,
-  printValue = objectPathToCssVarFunction
-): DeepMapObjectLeafs<ThemeType, string> {
-  const augmentedTheme: Record<string, unknown> = {}
-
-  const mapper = (leafPath: string[], value: unknown): void => {
-    const leafKey = leafPath[leafPath.length - 1]
-    const pathWithoutLast = leafPath.slice(0, leafPath.length - 1)
-    const leafObject = pathWithoutLast.reduce(
-      (child, segment) =>
-        (child[segment] || (child[segment] = {})) as Record<string, unknown>,
-      augmentedTheme as Record<string, unknown>
-    )
-    if (!leafKey) {
-      throw new Error("leafKey is undefined")
-    }
-    const cssVariablesOfToken = addExtraThemeEntries(
-      leafPath,
-      leafKey,
-      value,
-      printValue,
-      { augmentWithId: true }
-    )
-    Object.assign(leafObject, cssVariablesOfToken)
-  }
-
-  mapLeafsOfObject(theme, mapper)
-
-  return augmentedTheme as DeepMapObjectLeafs<ThemeType, string>
-}

package/src/lib/mapLeafsOfObject.ts

@@ -1,59 +0,0 @@
-import { DeepMapObjectLeafs } from "../types"
-
-/**
- * This allows you to map the leaf nodes of an object, and you're provided the path to that leaf as well as the value as parameters to your mapper function.
- * This function was build to support mapping theme values to their respective CSS variable identifiers.
- * For example:
- * ```ts
- * mapLeafsOfObject({
- *  one: {
- *    two: 4
- *  }
- * }, (path, value) => value + 7)
- * ```
- * Results in:
- * ```
- * {
- *    one: {
- *      two: 11
- *    }
- * }
- * ```
- */
-export function mapLeafsOfObject<
-  Obj extends Record<string | number, unknown>,
-  Value
->(
-  object: Obj,
-  mapper: (pathToLeaf: string[], value: unknown) => Value
-): DeepMapObjectLeafs<Obj, Value> {
-  const recurser = <O extends Record<string | number, unknown>>(
-    currentPath: string[],
-    obj: O
-  ): DeepMapObjectLeafs<O, Value> => {
-    const handleEntry = (
-      key: string,
-      value: unknown
-    ):
-      | {
-          [x: string]: unknown
-          [x: number]: unknown
-        }
-      | Value => {
-      const pathToKey = [...currentPath, key]
-      if (typeof value === "object" && value !== null && value !== undefined) {
-        return recurser(pathToKey, value as Record<string | number, unknown>)
-      }
-      return mapper(pathToKey, value)
-    }
-
-    return Object.entries(obj).reduce(
-      (acc, [nextKey, nextValue]) => ({
-        ...acc,
-        [nextKey]: handleEntry(nextKey, nextValue),
-      }),
-      {} as DeepMapObjectLeafs<O, Value>
-    )
-  }
-  return recurser([], object)
-}

package/src/lib/patterns.ts

@@ -1,3 +0,0 @@
-export const zenColorNamePattern =
-  /ash|stone|slate|iron|wisteria|cluny|peach|yuzu|coral|seedling/
-export const heartColorNamePattern = /purple|blue|orange|yellow|red|green|gray/

package/src/react/ThemeProvider.tsx

@@ -1,83 +0,0 @@
-import React, { useState } from "react"
-import { ThemeManager, defaultTheme, Theme } from ".."
-
-export const ThemeContext = React.createContext<Theme>(defaultTheme)
-
-/**
- * Wrap your application in this provider using a ThemeManager, to synchronise it with a react context.
- * This allows child react elements to more easily use theme variables, using the {@link useTheme} hook.
- */
-/**
- * @deprecated ThemeProvider is deprecated. Please use KaizenProvider from "@kaizen/components" instead.
- */
-export const ThemeProvider = ({
-  themeManager,
-  ...props
-}: {
-  themeManager?: ThemeManager
-  children: React.ReactNode
-}): JSX.Element => {
-  const [themeManagerInstance] = useState(
-    () => themeManager || new ThemeManager(defaultTheme)
-  )
-
-  const [theme, setTheme] = React.useState<Theme>(
-    themeManagerInstance.getCurrentTheme()
-  )
-  React.useEffect(() => {
-    let cancelled = false
-    const listener = (newTheme: Theme): void => {
-      if (!cancelled) setTheme(newTheme)
-    }
-    themeManagerInstance.addThemeChangeListener(listener)
-    return () => {
-      cancelled = true
-      themeManagerInstance.removeThemeChangeListener(listener)
-    }
-  }, [])
-
-  return (
-    <>
-      <ThemeContext.Provider value={theme}>
-        {props.children}
-      </ThemeContext.Provider>
-      <link
-        rel="preload"
-        href="https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-bold.woff2"
-        as="font"
-        type="font/woff2"
-        crossOrigin="anonymous"
-      />
-      <link
-        rel="preload"
-        href="https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-demi-bold.woff2"
-        as="font"
-        type="font/woff2"
-        crossOrigin="anonymous"
-      />
-      <link
-        rel="preload"
-        href="https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-medium.woff2"
-        as="font"
-        type="font/woff2"
-        crossOrigin="anonymous"
-      />
-      <link
-        rel="preload"
-        href="https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-regular.woff2"
-        as="font"
-        type="font/woff2"
-        crossOrigin="anonymous"
-      />
-      <link
-        rel="preload"
-        href="https://d1e7r7b0lb8p4d.cloudfront.net/fonts/tiempos/tiempos-headline-bold.woff2"
-        as="font"
-        type="font/woff2"
-        crossOrigin="anonymous"
-      />
-    </>
-  )
-}
-
-export const useTheme = (): Theme => React.useContext(ThemeContext)

package/src/react/index.tsx

@@ -1 +0,0 @@
-export * from "./ThemeProvider"

package/src/themes/heart.ts

@@ -1,312 +0,0 @@
-import { Theme } from "../types"
-
-export const heartTheme: Theme = {
-  themeKey: "heart",
-  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",
-    },
-    paragraphBody: {
-      fontFamily: '"Inter", "Noto Sans", Helvetica, Arial, sans-serif',
-      fontWeight: 400,
-      fontSize: "1rem",
-      lineHeight: "1.5rem",
-      letterSpacing: "normal",
-    },
-    paragraphSmall: {
-      fontFamily: '"Inter", "Noto Sans", Helvetica, Arial, sans-serif',
-      fontWeight: 400,
-      fontSize: "0.875rem",
-      lineHeight: "1.125rem",
-      letterSpacing: "normal",
-    },
-    paragraphExtraSmall: {
-      fontFamily: '"Inter", "Noto Sans", Helvetica, Arial, sans-serif',
-      fontWeight: 400,
-      fontSize: "0.75rem",
-      lineHeight: "1.125rem",
-      letterSpacing: "normal",
-    },
-    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/src/themes/index.ts

@@ -1,3 +0,0 @@
-import { heartTheme } from "./heart"
-export { heartTheme } from "./heart"
-export const defaultTheme = heartTheme

package/src/types.ts

@@ -1,250 +0,0 @@
-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 = "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
-    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<Theme, string>