@kaizen/design-tokens 10.5.2 → 10.6.0

package/dist/{legacy/makeCssVariableTheme.js → cjs/legacy/makeCssVariableTheme.cjs}

@@ -1,9 +1,9 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.makeCSSVariableTheme = makeCSSVariableTheme;
-var addExtraThemeEntries_1 = require("../lib/addExtraThemeEntries");
-var cssVariables_1 = require("../lib/cssVariables");
-var mapLeafsOfObject_1 = require("../lib/mapLeafsOfObject");
+'use strict';
+
+var addExtraThemeEntries = require('../lib/addExtraThemeEntries.cjs');
+var cssVariables = require('../lib/cssVariables.cjs');
+var mapLeafsOfObject = require('../lib/mapLeafsOfObject.cjs');
+
 /**
  * This function could use a new name during a breaking change
  *
@@ -40,21 +40,25 @@ var mapLeafsOfObject_1 = require("../lib/mapLeafsOfObject");
  * @deprecated Not needed if you are using `KaizenProvider` from `@kaizen/components` or `defaultPreset` from next-services.
  */
 function makeCSSVariableTheme(theme, printValue) {
-    if (printValue === void 0) { printValue = cssVariables_1.objectPathToCssVarFunction; }
-    var augmentedTheme = {};
-    var mapper = function (leafPath, value) {
-        var leafKey = leafPath[leafPath.length - 1];
-        var pathWithoutLast = leafPath.slice(0, leafPath.length - 1);
-        var leafObject = pathWithoutLast.reduce(function (child, segment) {
-            return (child[segment] || (child[segment] = {}));
-        }, augmentedTheme);
-        if (!leafKey) {
-            throw new Error("leafKey is undefined");
-        }
-        var cssVariablesOfToken = (0, addExtraThemeEntries_1.addExtraThemeEntries)(leafPath, leafKey, value, printValue, { augmentWithId: true });
-        Object.assign(leafObject, cssVariablesOfToken);
-    };
-    (0, mapLeafsOfObject_1.mapLeafsOfObject)(theme, mapper);
-    return augmentedTheme;
+  if (printValue === void 0) {
+    printValue = cssVariables.objectPathToCssVarFunction;
+  }
+  var augmentedTheme = {};
+  var mapper = function (leafPath, value) {
+    var leafKey = leafPath[leafPath.length - 1];
+    var pathWithoutLast = leafPath.slice(0, leafPath.length - 1);
+    var leafObject = pathWithoutLast.reduce(function (child, segment) {
+      return child[segment] || (child[segment] = {});
+    }, augmentedTheme);
+    if (!leafKey) {
+      throw new Error("leafKey is undefined");
+    }
+    var cssVariablesOfToken = addExtraThemeEntries.addExtraThemeEntries(leafPath, leafKey, value, printValue, {
+      augmentWithId: true
+    });
+    Object.assign(leafObject, cssVariablesOfToken);
+  };
+  mapLeafsOfObject.mapLeafsOfObject(theme, mapper);
+  return augmentedTheme;
 }
-//# sourceMappingURL=makeCssVariableTheme.js.map
+exports.makeCSSVariableTheme = makeCSSVariableTheme;

package/dist/cjs/legacy/mapLeafsOfObject.cjs

@@ -0,0 +1,46 @@
+'use strict';
+
+var tslib = require('tslib');
+
+/**
+ * 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
+ *    }
+ * }
+ * ```
+ */
+/**
+ * @deprecated Not needed if you are using `KaizenProvider` from `@kaizen/components` or `defaultPreset` from next-services.
+ */
+function mapLeafsOfObject(object, mapper) {
+  var recurser = function (currentPath, obj) {
+    var handleEntry = function (key, value) {
+      var pathToKey = tslib.__spreadArray(tslib.__spreadArray([], currentPath, true), [key], false);
+      if (typeof value === "object" && value !== null && value !== undefined) {
+        return recurser(pathToKey, value);
+      }
+      return mapper(pathToKey, value);
+    };
+    return Object.entries(obj).reduce(function (acc, _a) {
+      var _b;
+      var nextKey = _a[0],
+        nextValue = _a[1];
+      return tslib.__assign(tslib.__assign({}, acc), (_b = {}, _b[nextKey] = handleEntry(nextKey, nextValue), _b));
+    }, {});
+  };
+  return recurser([], object);
+}
+exports.mapLeafsOfObject = mapLeafsOfObject;

package/dist/cjs/legacy/themes/heart.cjs

@@ -0,0 +1,14 @@
+'use strict';
+
+var tslib = require('tslib');
+var tokens = require('../../js/tokens.cjs');
+
+/**
+ * @deprecated
+ * - Not needed if you are using `KaizenProvider` from `@kaizen/components` or `defaultPreset` from next-services.
+ * - If you require direct usage of these tokens in js you can `import { tokens } from "@kaizen/design-tokens/js"`
+ */
+var heartTheme = tslib.__assign({
+  themeKey: "heart"
+}, tokens.tokens);
+exports.heartTheme = heartTheme;

package/dist/cjs/legacy/themes/index.cjs

@@ -0,0 +1,12 @@
+'use strict';
+
+var heart = require('./heart.cjs');
+
+/**
+ * @deprecated Not needed if you are using `KaizenProvider` from `@kaizen/components` or `defaultPreset` from next-services.
+ *
+ * {@link https://cultureamp.design/?path=/docs/guides-app-starter--docs Check App Starter guidance}
+ */
+var defaultTheme = heart.heartTheme;
+exports.heartTheme = heart.heartTheme;
+exports.defaultTheme = defaultTheme;

package/dist/cjs/lib/addExtraThemeEntries.cjs

@@ -0,0 +1,52 @@
+'use strict';
+
+var tslib = require('tslib');
+var colorString = require('color-string');
+var cssVariables = require('./cssVariables.cjs');
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+var colorString__default = /*#__PURE__*/_interopDefault(colorString);
+
+/**
+ * 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"
+ *  }
+ */
+var addExtraThemeEntries = function (path, key, value, printValue, _a) {
+  var _b;
+  var augmentWithId = _a.augmentWithId;
+  var colorRgb = typeof value === "string" ? colorString__default.default.get.rgb(value) : null;
+  var result = (_b = {}, _b[key] = printValue(path, value), _b);
+  // 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();
+    var rgbPath = tslib.__spreadArray(tslib.__spreadArray([], path, true), ["rgb"], false);
+    var rgbTriple = printValue(rgbPath, colorRgb.slice(0, 3).join(", "));
+    result["".concat(key, "-rgb")] = rgbTriple;
+    if (augmentWithId) {
+      result["".concat(key, "-rgb-id")] = cssVariables.objectPathToCssVarIdentifier(rgbPath);
+    }
+  }
+  if (augmentWithId) {
+    result["".concat(key, "-id")] = cssVariables.objectPathToCssVarIdentifier(path);
+  }
+  return result;
+};
+exports.addExtraThemeEntries = addExtraThemeEntries;

package/dist/{lib/cssVariables.js → cjs/lib/cssVariables.cjs}

@@ -1,10 +1,13 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.objectPathToCssVarIdentifier = exports.objectPathToCssVarFunction = void 0;
-var lodash_kebabcase_1 = __importDefault(require("lodash.kebabcase"));
+'use strict';
+
+var kebab = require('lodash.kebabcase');
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+var kebab__default = /*#__PURE__*/_interopDefault(kebab);
+
 /**
  * Given an object path (an array of strings) and a value, return a CSS var() function that represents it.
  *
@@ -17,8 +20,9 @@ var lodash_kebabcase_1 = __importDefault(require("lodash.kebabcase"));
  *      "var(--color-wisteria-100, #f0f1f4)"
  *
  */
-var objectPathToCssVarFunction = function (path, value) { return "var(".concat((0, exports.objectPathToCssVarIdentifier)(path), ", ").concat(value, ")"); };
-exports.objectPathToCssVarFunction = objectPathToCssVarFunction;
+var objectPathToCssVarFunction = function (path, value) {
+  return "var(".concat(objectPathToCssVarIdentifier(path), ", ").concat(value, ")");
+};
 /**
  * Given an object path (an array of strings), return a CSS variable identifier.
  *
@@ -28,7 +32,7 @@ exports.objectPathToCssVarFunction = objectPathToCssVarFunction;
  *      Output: "--color-wisteria-100"
  */
 var objectPathToCssVarIdentifier = function (path) {
-    return "--".concat(path.map(lodash_kebabcase_1.default).join("-"));
+  return "--".concat(path.map(kebab__default.default).join("-"));
 };
+exports.objectPathToCssVarFunction = objectPathToCssVarFunction;
 exports.objectPathToCssVarIdentifier = objectPathToCssVarIdentifier;
-//# sourceMappingURL=cssVariables.js.map

package/dist/cjs/lib/makeCssVariableDefinitionsMap.cjs

@@ -0,0 +1,51 @@
+'use strict';
+
+var tslib = require('tslib');
+var addExtraThemeEntries = require('./addExtraThemeEntries.cjs');
+var cssVariables = require('./cssVariables.cjs');
+var mapLeafsOfObject = require('./mapLeafsOfObject.cjs');
+
+/**
+
+ * 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"
+ * }
+ */
+function makeCssVariableDefinitionsMap(theme) {
+  var accumulatedCssVariables = {};
+  // Shamelessly using a map function like a forEach
+  mapLeafsOfObject.mapLeafsOfObject(theme, function (path, value) {
+    // Key will be `--color-blah`
+    var key = cssVariables.objectPathToCssVarIdentifier(path);
+    var nextCssVariables = addExtraThemeEntries.addExtraThemeEntries(path, key, value, function (_, v) {
+      return "".concat(v);
+    }, {
+      augmentWithId: false
+    });
+    accumulatedCssVariables = tslib.__assign(tslib.__assign({}, accumulatedCssVariables), nextCssVariables);
+  });
+  return accumulatedCssVariables;
+}
+exports.makeCssVariableDefinitionsMap = makeCssVariableDefinitionsMap;

package/dist/cjs/lib/mapLeafsOfObject.cjs

@@ -0,0 +1,43 @@
+'use strict';
+
+var tslib = require('tslib');
+
+/**
+ * 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
+ *    }
+ * }
+ * ```
+ */
+function mapLeafsOfObject(object, mapper) {
+  var recurser = function (currentPath, obj) {
+    var handleEntry = function (key, value) {
+      var pathToKey = tslib.__spreadArray(tslib.__spreadArray([], currentPath, true), [key], false);
+      if (typeof value === "object" && value !== null && value !== undefined) {
+        return recurser(pathToKey, value);
+      }
+      return mapper(pathToKey, value);
+    };
+    return Object.entries(obj).reduce(function (acc, _a) {
+      var _b;
+      var nextKey = _a[0],
+        nextValue = _a[1];
+      return tslib.__assign(tslib.__assign({}, acc), (_b = {}, _b[nextKey] = handleEntry(nextKey, nextValue), _b));
+    }, {});
+  };
+  return recurser([], object);
+}
+exports.mapLeafsOfObject = mapLeafsOfObject;

package/dist/esm/index.mjs

@@ -0,0 +1,7 @@
+export { defaultTheme } from './legacy/themes/index.mjs';
+export { ThemeManager } from './legacy/ThemeManager.mjs';
+export { ThemeContext, ThemeProvider, useTheme } from './legacy/ThemeProvider.mjs';
+export { makeCssVariableDefinitionsMap } from './legacy/makeCssVariableDefinitionsMap.mjs';
+export { makeCSSVariableTheme } from './legacy/makeCssVariableTheme.mjs';
+export { mapLeafsOfObject } from './legacy/mapLeafsOfObject.mjs';
+export { heartTheme } from './legacy/themes/heart.mjs';

package/dist/esm/js/tokens.mjs

@@ -0,0 +1,317 @@
+var tokens = {
+  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"
+    },
+    width: {
+      1: "1px"
+    }
+  },
+  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: "#5dcaad",
+      500: "#3f9a86",
+      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: "#878792",
+      600: "#524e56"
+    },
+    white: "#ffffff",
+    black: "#000000"
+  },
+  dataViz: {
+    favorable: "#7dd5bd",
+    unfavorable: "#e68d97"
+  },
+  layout: {
+    contentMaxWidth: "1392px",
+    contentMaxWidthWithSidebar: "1080px",
+    contentSideMargin: "72px",
+    mobileActionsDrawerHeight: "60px",
+    navigationBarHeight: "72px",
+    breakpoints: {
+      medium: "768px",
+      large: "1080px"
+    }
+  },
+  shadow: {
+    small: {
+      boxShadow: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 3px 16px 0 rgba(0, 0, 0, 0.06)"
+    },
+    large: {
+      boxShadow: "0 3px 9px 0 rgba(0, 0, 0, 0.1), 0 8px 40px 0 rgba(0, 0, 0, 0.08)"
+    }
+  },
+  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",
+    20: "1.25rem",
+    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"
+    }
+  }
+};
+export { tokens };