@kaizen/design-tokens 3.1.0

package/less/typography.less

@@ -0,0 +1,526 @@
+/** THIS IS AN AUTOGENERATED FILE **/
+
+@typography-data-large-font-family: var(
+  --typography-data-large-font-family,
+  "Inter",
+  "Noto Sans",
+  Helvetica,
+  Arial,
+  sans-serif
+);
+@typography-data-large-font-family-id: --typography-data-large-font-family;
+@typography-data-large-font-weight: var(
+  --typography-data-large-font-weight,
+  700
+);
+@typography-data-large-font-weight-id: --typography-data-large-font-weight;
+@typography-data-large-font-size: var(
+  --typography-data-large-font-size,
+  5.25rem
+);
+@typography-data-large-font-size-id: --typography-data-large-font-size;
+@typography-data-large-line-height: var(
+  --typography-data-large-line-height,
+  5.25rem
+);
+@typography-data-large-line-height-id: --typography-data-large-line-height;
+@typography-data-large-letter-spacing: var(
+  --typography-data-large-letter-spacing,
+  normal
+);
+@typography-data-large-letter-spacing-id: --typography-data-large-letter-spacing;
+@typography-data-large-units-font-family: var(
+  --typography-data-large-units-font-family,
+  "Inter",
+  "Noto Sans",
+  Helvetica,
+  Arial,
+  sans-serif
+);
+@typography-data-large-units-font-family-id: --typography-data-large-units-font-family;
+@typography-data-large-units-font-weight: var(
+  --typography-data-large-units-font-weight,
+  700
+);
+@typography-data-large-units-font-weight-id: --typography-data-large-units-font-weight;
+@typography-data-large-units-font-size: var(
+  --typography-data-large-units-font-size,
+  2.625rem
+);
+@typography-data-large-units-font-size-id: --typography-data-large-units-font-size;
+@typography-data-large-units-line-height: var(
+  --typography-data-large-units-line-height,
+  5.25rem
+);
+@typography-data-large-units-line-height-id: --typography-data-large-units-line-height;
+@typography-data-large-units-letter-spacing: var(
+  --typography-data-large-units-letter-spacing,
+  normal
+);
+@typography-data-large-units-letter-spacing-id: --typography-data-large-units-letter-spacing;
+@typography-data-medium-font-family: var(
+  --typography-data-medium-font-family,
+  "Inter",
+  "Noto Sans",
+  Helvetica,
+  Arial,
+  sans-serif
+);
+@typography-data-medium-font-family-id: --typography-data-medium-font-family;
+@typography-data-medium-font-weight: var(
+  --typography-data-medium-font-weight,
+  700
+);
+@typography-data-medium-font-weight-id: --typography-data-medium-font-weight;
+@typography-data-medium-font-size: var(
+  --typography-data-medium-font-size,
+  3rem
+);
+@typography-data-medium-font-size-id: --typography-data-medium-font-size;
+@typography-data-medium-line-height: var(
+  --typography-data-medium-line-height,
+  5rem
+);
+@typography-data-medium-line-height-id: --typography-data-medium-line-height;
+@typography-data-medium-letter-spacing: var(
+  --typography-data-medium-letter-spacing,
+  normal
+);
+@typography-data-medium-letter-spacing-id: --typography-data-medium-letter-spacing;
+@typography-data-medium-units-font-family: var(
+  --typography-data-medium-units-font-family,
+  "Inter",
+  "Noto Sans",
+  Helvetica,
+  Arial,
+  sans-serif
+);
+@typography-data-medium-units-font-family-id: --typography-data-medium-units-font-family;
+@typography-data-medium-units-font-weight: var(
+  --typography-data-medium-units-font-weight,
+  700
+);
+@typography-data-medium-units-font-weight-id: --typography-data-medium-units-font-weight;
+@typography-data-medium-units-font-size: var(
+  --typography-data-medium-units-font-size,
+  1.5rem
+);
+@typography-data-medium-units-font-size-id: --typography-data-medium-units-font-size;
+@typography-data-medium-units-line-height: var(
+  --typography-data-medium-units-line-height,
+  5rem
+);
+@typography-data-medium-units-line-height-id: --typography-data-medium-units-line-height;
+@typography-data-medium-units-letter-spacing: var(
+  --typography-data-medium-units-letter-spacing,
+  normal
+);
+@typography-data-medium-units-letter-spacing-id: --typography-data-medium-units-letter-spacing;
+@typography-data-small-font-family: var(
+  --typography-data-small-font-family,
+  "Greycliff CF",
+  "Noto Sans",
+  Helvetica,
+  Arial,
+  sans-serif
+);
+@typography-data-small-font-family-id: --typography-data-small-font-family;
+@typography-data-small-font-weight: var(
+  --typography-data-small-font-weight,
+  700
+);
+@typography-data-small-font-weight-id: --typography-data-small-font-weight;
+@typography-data-small-font-size: var(
+  --typography-data-small-font-size,
+  1.5rem
+);
+@typography-data-small-font-size-id: --typography-data-small-font-size;
+@typography-data-small-line-height: var(
+  --typography-data-small-line-height,
+  1.5rem
+);
+@typography-data-small-line-height-id: --typography-data-small-line-height;
+@typography-data-small-letter-spacing: var(
+  --typography-data-small-letter-spacing,
+  normal
+);
+@typography-data-small-letter-spacing-id: --typography-data-small-letter-spacing;
+@typography-data-small-units-font-family: var(
+  --typography-data-small-units-font-family,
+  "Greycliff CF",
+  "Noto Sans",
+  Helvetica,
+  Arial,
+  sans-serif
+);
+@typography-data-small-units-font-family-id: --typography-data-small-units-font-family;
+@typography-data-small-units-font-weight: var(
+  --typography-data-small-units-font-weight,
+  700
+);
+@typography-data-small-units-font-weight-id: --typography-data-small-units-font-weight;
+@typography-data-small-units-font-size: var(
+  --typography-data-small-units-font-size,
+  1.125rem
+);
+@typography-data-small-units-font-size-id: --typography-data-small-units-font-size;
+@typography-data-small-units-line-height: var(
+  --typography-data-small-units-line-height,
+  1.5rem
+);
+@typography-data-small-units-line-height-id: --typography-data-small-units-line-height;
+@typography-data-small-units-letter-spacing: var(
+  --typography-data-small-units-letter-spacing,
+  normal
+);
+@typography-data-small-units-letter-spacing-id: --typography-data-small-units-letter-spacing;
+@typography-display-0-font-family: var(
+  --typography-display-0-font-family,
+  "Tiempos Headline",
+  Georgia,
+  serif
+);
+@typography-display-0-font-family-id: --typography-display-0-font-family;
+@typography-display-0-font-weight: var(--typography-display-0-font-weight, 800);
+@typography-display-0-font-weight-id: --typography-display-0-font-weight;
+@typography-display-0-font-size: var(--typography-display-0-font-size, 4.5rem);
+@typography-display-0-font-size-id: --typography-display-0-font-size;
+@typography-display-0-line-height: var(
+  --typography-display-0-line-height,
+  5.25rem
+);
+@typography-display-0-line-height-id: --typography-display-0-line-height;
+@typography-display-0-letter-spacing: var(
+  --typography-display-0-letter-spacing,
+  0em
+);
+@typography-display-0-letter-spacing-id: --typography-display-0-letter-spacing;
+@typography-heading-1-font-family: var(
+  --typography-heading-1-font-family,
+  "Inter",
+  "Noto Sans",
+  Helvetica,
+  Arial,
+  sans-serif
+);
+@typography-heading-1-font-family-id: --typography-heading-1-font-family;
+@typography-heading-1-font-weight: var(--typography-heading-1-font-weight, 700);
+@typography-heading-1-font-weight-id: --typography-heading-1-font-weight;
+@typography-heading-1-font-size: var(
+  --typography-heading-1-font-size,
+  2.125rem
+);
+@typography-heading-1-font-size-id: --typography-heading-1-font-size;
+@typography-heading-1-line-height: var(
+  --typography-heading-1-line-height,
+  2.625rem
+);
+@typography-heading-1-line-height-id: --typography-heading-1-line-height;
+@typography-heading-1-letter-spacing: var(
+  --typography-heading-1-letter-spacing,
+  normal
+);
+@typography-heading-1-letter-spacing-id: --typography-heading-1-letter-spacing;
+@typography-heading-2-font-family: var(
+  --typography-heading-2-font-family,
+  "Inter",
+  "Noto Sans",
+  Helvetica,
+  Arial,
+  sans-serif
+);
+@typography-heading-2-font-family-id: --typography-heading-2-font-family;
+@typography-heading-2-font-weight: var(--typography-heading-2-font-weight, 700);
+@typography-heading-2-font-weight-id: --typography-heading-2-font-weight;
+@typography-heading-2-font-size: var(--typography-heading-2-font-size, 1.75rem);
+@typography-heading-2-font-size-id: --typography-heading-2-font-size;
+@typography-heading-2-line-height: var(
+  --typography-heading-2-line-height,
+  2.25rem
+);
+@typography-heading-2-line-height-id: --typography-heading-2-line-height;
+@typography-heading-2-letter-spacing: var(
+  --typography-heading-2-letter-spacing,
+  normal
+);
+@typography-heading-2-letter-spacing-id: --typography-heading-2-letter-spacing;
+@typography-heading-3-font-family: var(
+  --typography-heading-3-font-family,
+  "Inter",
+  "Noto Sans",
+  Helvetica,
+  Arial,
+  sans-serif
+);
+@typography-heading-3-font-family-id: --typography-heading-3-font-family;
+@typography-heading-3-font-weight: var(--typography-heading-3-font-weight, 700);
+@typography-heading-3-font-weight-id: --typography-heading-3-font-weight;
+@typography-heading-3-font-size: var(
+  --typography-heading-3-font-size,
+  1.375rem
+);
+@typography-heading-3-font-size-id: --typography-heading-3-font-size;
+@typography-heading-3-line-height: var(
+  --typography-heading-3-line-height,
+  1.5rem
+);
+@typography-heading-3-line-height-id: --typography-heading-3-line-height;
+@typography-heading-3-letter-spacing: var(
+  --typography-heading-3-letter-spacing,
+  normal
+);
+@typography-heading-3-letter-spacing-id: --typography-heading-3-letter-spacing;
+@typography-heading-4-font-family: var(
+  --typography-heading-4-font-family,
+  "Inter",
+  "Noto Sans",
+  Helvetica,
+  Arial,
+  sans-serif
+);
+@typography-heading-4-font-family-id: --typography-heading-4-font-family;
+@typography-heading-4-font-weight: var(--typography-heading-4-font-weight, 600);
+@typography-heading-4-font-weight-id: --typography-heading-4-font-weight;
+@typography-heading-4-font-size: var(
+  --typography-heading-4-font-size,
+  1.125rem
+);
+@typography-heading-4-font-size-id: --typography-heading-4-font-size;
+@typography-heading-4-line-height: var(
+  --typography-heading-4-line-height,
+  1.5rem
+);
+@typography-heading-4-line-height-id: --typography-heading-4-line-height;
+@typography-heading-4-letter-spacing: var(
+  --typography-heading-4-letter-spacing,
+  normal
+);
+@typography-heading-4-letter-spacing-id: --typography-heading-4-letter-spacing;
+@typography-heading-5-font-family: var(
+  --typography-heading-5-font-family,
+  "Inter",
+  "Noto Sans",
+  Helvetica,
+  Arial,
+  sans-serif
+);
+@typography-heading-5-font-family-id: --typography-heading-5-font-family;
+@typography-heading-5-font-weight: var(--typography-heading-5-font-weight, 600);
+@typography-heading-5-font-weight-id: --typography-heading-5-font-weight;
+@typography-heading-5-font-size: var(--typography-heading-5-font-size, 1rem);
+@typography-heading-5-font-size-id: --typography-heading-5-font-size;
+@typography-heading-5-line-height: var(
+  --typography-heading-5-line-height,
+  1.5rem
+);
+@typography-heading-5-line-height-id: --typography-heading-5-line-height;
+@typography-heading-5-letter-spacing: var(
+  --typography-heading-5-letter-spacing,
+  normal
+);
+@typography-heading-5-letter-spacing-id: --typography-heading-5-letter-spacing;
+@typography-heading-6-font-family: var(
+  --typography-heading-6-font-family,
+  "Inter",
+  "Noto Sans",
+  Helvetica,
+  Arial,
+  sans-serif
+);
+@typography-heading-6-font-family-id: --typography-heading-6-font-family;
+@typography-heading-6-font-weight: var(--typography-heading-6-font-weight, 700);
+@typography-heading-6-font-weight-id: --typography-heading-6-font-weight;
+@typography-heading-6-font-size: var(
+  --typography-heading-6-font-size,
+  0.875rem
+);
+@typography-heading-6-font-size-id: --typography-heading-6-font-size;
+@typography-heading-6-line-height: var(
+  --typography-heading-6-line-height,
+  1.5rem
+);
+@typography-heading-6-line-height-id: --typography-heading-6-line-height;
+@typography-heading-6-letter-spacing: var(
+  --typography-heading-6-letter-spacing,
+  normal
+);
+@typography-heading-6-letter-spacing-id: --typography-heading-6-letter-spacing;
+@typography-paragraph-intro-lede-font-family: var(
+  --typography-paragraph-intro-lede-font-family,
+  "Inter",
+  "Noto Sans",
+  Helvetica,
+  Arial,
+  sans-serif
+);
+@typography-paragraph-intro-lede-font-family-id: --typography-paragraph-intro-lede-font-family;
+@typography-paragraph-intro-lede-font-weight: var(
+  --typography-paragraph-intro-lede-font-weight,
+  400
+);
+@typography-paragraph-intro-lede-font-weight-id: --typography-paragraph-intro-lede-font-weight;
+@typography-paragraph-intro-lede-font-size: var(
+  --typography-paragraph-intro-lede-font-size,
+  1.25rem
+);
+@typography-paragraph-intro-lede-font-size-id: --typography-paragraph-intro-lede-font-size;
+@typography-paragraph-intro-lede-line-height: var(
+  --typography-paragraph-intro-lede-line-height,
+  1.875rem
+);
+@typography-paragraph-intro-lede-line-height-id: --typography-paragraph-intro-lede-line-height;
+@typography-paragraph-intro-lede-letter-spacing: var(
+  --typography-paragraph-intro-lede-letter-spacing,
+  -0.5px
+);
+@typography-paragraph-intro-lede-letter-spacing-id: --typography-paragraph-intro-lede-letter-spacing;
+@typography-paragraph-body-font-family: var(
+  --typography-paragraph-body-font-family,
+  "Inter",
+  "Noto Sans",
+  Helvetica,
+  Arial,
+  sans-serif
+);
+@typography-paragraph-body-font-family-id: --typography-paragraph-body-font-family;
+@typography-paragraph-body-font-weight: var(
+  --typography-paragraph-body-font-weight,
+  400
+);
+@typography-paragraph-body-font-weight-id: --typography-paragraph-body-font-weight;
+@typography-paragraph-body-font-size: var(
+  --typography-paragraph-body-font-size,
+  1rem
+);
+@typography-paragraph-body-font-size-id: --typography-paragraph-body-font-size;
+@typography-paragraph-body-line-height: var(
+  --typography-paragraph-body-line-height,
+  1.5rem
+);
+@typography-paragraph-body-line-height-id: --typography-paragraph-body-line-height;
+@typography-paragraph-body-letter-spacing: var(
+  --typography-paragraph-body-letter-spacing,
+  normal
+);
+@typography-paragraph-body-letter-spacing-id: --typography-paragraph-body-letter-spacing;
+@typography-paragraph-small-font-family: var(
+  --typography-paragraph-small-font-family,
+  "Inter",
+  "Noto Sans",
+  Helvetica,
+  Arial,
+  sans-serif
+);
+@typography-paragraph-small-font-family-id: --typography-paragraph-small-font-family;
+@typography-paragraph-small-font-weight: var(
+  --typography-paragraph-small-font-weight,
+  400
+);
+@typography-paragraph-small-font-weight-id: --typography-paragraph-small-font-weight;
+@typography-paragraph-small-font-size: var(
+  --typography-paragraph-small-font-size,
+  0.875rem
+);
+@typography-paragraph-small-font-size-id: --typography-paragraph-small-font-size;
+@typography-paragraph-small-line-height: var(
+  --typography-paragraph-small-line-height,
+  1.125rem
+);
+@typography-paragraph-small-line-height-id: --typography-paragraph-small-line-height;
+@typography-paragraph-small-letter-spacing: var(
+  --typography-paragraph-small-letter-spacing,
+  normal
+);
+@typography-paragraph-small-letter-spacing-id: --typography-paragraph-small-letter-spacing;
+@typography-paragraph-extra-small-font-family: var(
+  --typography-paragraph-extra-small-font-family,
+  "Inter",
+  "Noto Sans",
+  Helvetica,
+  Arial,
+  sans-serif
+);
+@typography-paragraph-extra-small-font-family-id: --typography-paragraph-extra-small-font-family;
+@typography-paragraph-extra-small-font-weight: var(
+  --typography-paragraph-extra-small-font-weight,
+  400
+);
+@typography-paragraph-extra-small-font-weight-id: --typography-paragraph-extra-small-font-weight;
+@typography-paragraph-extra-small-font-size: var(
+  --typography-paragraph-extra-small-font-size,
+  0.75rem
+);
+@typography-paragraph-extra-small-font-size-id: --typography-paragraph-extra-small-font-size;
+@typography-paragraph-extra-small-line-height: var(
+  --typography-paragraph-extra-small-line-height,
+  1.125rem
+);
+@typography-paragraph-extra-small-line-height-id: --typography-paragraph-extra-small-line-height;
+@typography-paragraph-extra-small-letter-spacing: var(
+  --typography-paragraph-extra-small-letter-spacing,
+  normal
+);
+@typography-paragraph-extra-small-letter-spacing-id: --typography-paragraph-extra-small-letter-spacing;
+@typography-paragraph-bold-font-weight: var(
+  --typography-paragraph-bold-font-weight,
+  600
+);
+@typography-paragraph-bold-font-weight-id: --typography-paragraph-bold-font-weight;
+@typography-button-primary-font-family: var(
+  --typography-button-primary-font-family,
+  "Inter",
+  "Noto Sans",
+  Helvetica,
+  Arial,
+  sans-serif
+);
+@typography-button-primary-font-family-id: --typography-button-primary-font-family;
+@typography-button-primary-font-weight: var(
+  --typography-button-primary-font-weight,
+  700
+);
+@typography-button-primary-font-weight-id: --typography-button-primary-font-weight;
+@typography-button-primary-font-size: var(
+  --typography-button-primary-font-size,
+  1.125rem
+);
+@typography-button-primary-font-size-id: --typography-button-primary-font-size;
+@typography-button-primary-line-height: var(
+  --typography-button-primary-line-height,
+  1.5rem
+);
+@typography-button-primary-line-height-id: --typography-button-primary-line-height;
+@typography-button-primary-letter-spacing: var(
+  --typography-button-primary-letter-spacing,
+  normal
+);
+@typography-button-primary-letter-spacing-id: --typography-button-primary-letter-spacing;
+@typography-button-secondary-font-family: var(
+  --typography-button-secondary-font-family,
+  "Inter",
+  "Noto Sans",
+  Helvetica,
+  Arial,
+  sans-serif
+);
+@typography-button-secondary-font-family-id: --typography-button-secondary-font-family;
+@typography-button-secondary-font-weight: var(
+  --typography-button-secondary-font-weight,
+  500
+);
+@typography-button-secondary-font-weight-id: --typography-button-secondary-font-weight;
+@typography-button-secondary-font-size: var(
+  --typography-button-secondary-font-size,
+  1rem
+);
+@typography-button-secondary-font-size-id: --typography-button-secondary-font-size;
+@typography-button-secondary-line-height: var(
+  --typography-button-secondary-line-height,
+  1.5rem
+);
+@typography-button-secondary-line-height-id: --typography-button-secondary-line-height;
+@typography-button-secondary-letter-spacing: var(
+  --typography-button-secondary-letter-spacing,
+  normal
+);
+@typography-button-secondary-letter-spacing-id: --typography-button-secondary-letter-spacing;

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@kaizen/design-tokens",
+  "description": "Tokens used in the Kaizen Design System",
+  "version": "3.1.0",
+  "homepage": "https://github.com/cultureamp/kaizen-design-system/tree/master/packages/design-tokens",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/cultureamp/kaizen-design-system.git"
+  },
+  "bugs": {
+    "url": "https://github.com/cultureamp/kaizen-design-system/issues"
+  },
+  "files": [
+    "tokens",
+    "sass",
+    "less",
+    "index.ts",
+    "src",
+    "react",
+    "dist",
+    "elm",
+    "!**/*.spec.*"
+  ],
+  "types": "dist/**/*.d.ts",
+  "main": "dist/index.js",
+  "private": false,
+  "license": "MIT",
+  "sideEffects": false,
+  "scripts": {
+    "test": "cd ../../ && yarn jest ./packages/design-tokens",
+    "build": "yarn clean && 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 '?(docs|react|src|bin)/**/?(*.js*|*.d.ts)'",
+    "prepublish": "yarn build:json && yarn build:less && yarn build:sass && yarn build:ts"
+  },
+  "devDependencies": {
+    "@types/lodash.flatmap": "^4.5.3",
+    "@types/react-highlight": "^0.12.2",
+    "@types/yargs": "^16.0.0",
+    "json-to-flat-sass": "^1.0.0",
+    "lodash.flatmap": "^4.5.0",
+    "postcss": "^8.3.6",
+    "prettier": "*",
+    "react-highlight": "^0.13.0",
+    "react-intersection-observer": "^8.31.0",
+    "react-map-interaction": "^2.0.0",
+    "ts-node": "^9.1.1",
+    "yargs": "^16.2.0"
+  },
+  "dependencies": {
+    "@types/color-string": "^1.5.0",
+    "@types/lodash.kebabcase": "^4.1.3",
+    "color-string": "^1.5.3",
+    "lodash.kebabcase": "^4.1.1"
+  },
+  "peerDependencies": {
+    "react": ">=16"
+  },
+  "gitHead": "91e9d5802a86ef6ed02c00aadbcca7e3c3f92452"
+}

package/react/ThemeProvider.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import { ThemeManager, Theme } from "../";
+export declare const ThemeContext: React.Context<Theme>;
+/**
+ * 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.
+ */
+export declare const ThemeProvider: ({ themeManager, ...props }: {
+    themeManager: ThemeManager;
+    children: React.ReactNode;
+}) => JSX.Element;
+export declare const useTheme: () => Theme;

package/react/ThemeProvider.js

@@ -0,0 +1,43 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+exports.useTheme = exports.ThemeProvider = exports.ThemeContext = void 0;
+var react_1 = __importDefault(require("react"));
+var __1 = require("../");
+exports.ThemeContext = react_1["default"].createContext(__1.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.
+ */
+exports.ThemeProvider = function (_a) {
+    var themeManager = _a.themeManager, props = __rest(_a, ["themeManager"]);
+    var _b = react_1["default"].useState(themeManager.getCurrentTheme()), theme = _b[0], setTheme = _b[1];
+    react_1["default"].useEffect(function () {
+        var cancelled = false;
+        var listener = function (newTheme) {
+            if (!cancelled)
+                setTheme(newTheme);
+        };
+        themeManager.addThemeChangeListener(listener);
+        return function () {
+            cancelled = true;
+            themeManager.removeThemeChangeListener(listener);
+        };
+    }, []);
+    return (react_1["default"].createElement(exports.ThemeContext.Provider, { value: theme }, props.children));
+};
+exports.useTheme = function () { return react_1["default"].useContext(exports.ThemeContext); };
+//# sourceMappingURL=ThemeProvider.js.map

package/react/ThemeProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeProvider.js","sourceRoot":"","sources":["ThemeProvider.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,gDAAyB;AACzB,yBAAuD;AAE1C,QAAA,YAAY,GAAG,kBAAK,CAAC,aAAa,CAAQ,gBAAY,CAAC,CAAA;AAEpE;;;GAGG;AACU,QAAA,aAAa,GAAG,UAAC,EAM7B;IALC,IAAA,YAAY,kBAAA,EACT,KAAK,cAFoB,gBAG7B,CADS;IAKF,IAAA,KAAoB,kBAAK,CAAC,QAAQ,CACtC,YAAY,CAAC,eAAe,EAAE,CAC/B,EAFM,KAAK,QAAA,EAAE,QAAQ,QAErB,CAAA;IACD,kBAAK,CAAC,SAAS,CAAC;QACd,IAAI,SAAS,GAAG,KAAK,CAAA;QACrB,IAAM,QAAQ,GAAG,UAAC,QAAe;YAC/B,IAAI,CAAC,SAAS;gBAAE,QAAQ,CAAC,QAAQ,CAAC,CAAA;QACpC,CAAC,CAAA;QACD,YAAY,CAAC,sBAAsB,CAAC,QAAQ,CAAC,CAAA;QAC7C,OAAO;YACL,SAAS,GAAG,IAAI,CAAA;YAChB,YAAY,CAAC,yBAAyB,CAAC,QAAQ,CAAC,CAAA;QAClD,CAAC,CAAA;IACH,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,OAAO,CACL,iCAAC,oBAAY,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,IAChC,KAAK,CAAC,QAAQ,CACO,CACzB,CAAA;AACH,CAAC,CAAA;AAEY,QAAA,QAAQ,GAAG,cAAM,OAAA,kBAAK,CAAC,UAAU,CAAC,oBAAY,CAAC,EAA9B,CAA8B,CAAA"}

package/react/ThemeProvider.tsx

@@ -0,0 +1,39 @@
+import React 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.
+ */
+export const ThemeProvider = ({
+  themeManager,
+  ...props
+}: {
+  themeManager: ThemeManager
+  children: React.ReactNode
+}) => {
+  const [theme, setTheme] = React.useState<Theme>(
+    themeManager.getCurrentTheme()
+  )
+  React.useEffect(() => {
+    let cancelled = false
+    const listener = (newTheme: Theme) => {
+      if (!cancelled) setTheme(newTheme)
+    }
+    themeManager.addThemeChangeListener(listener)
+    return () => {
+      cancelled = true
+      themeManager.removeThemeChangeListener(listener)
+    }
+  }, [])
+
+  return (
+    <ThemeContext.Provider value={theme}>
+      {props.children}
+    </ThemeContext.Provider>
+  )
+}
+
+export const useTheme = () => React.useContext(ThemeContext)

package/react/index.d.ts

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