@openfin/ui-library 0.1.40-alpha.1657030820 → 0.1.40

package/dist/components/input/RawInput/rawInput.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RawInput = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+/**
+ * Unstyled input extended by other components
+ */
+exports.RawInput = styled_components_1.default.input ``;
+exports.RawInput.displayName = 'RawInput';

package/dist/components/input/TextInput/index.js

@@ -0,0 +1,13 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./textInput"), exports);

package/dist/components/input/TextInput/textInput.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextInput = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const BaseInput_1 = require("../BaseInput");
+exports.TextInput = react_1.forwardRef((props, ref) => {
+    return jsx_runtime_1.jsx(BaseInput_1.BaseInput, Object.assign({ ref: ref, type: "text" }, props), void 0);
+});
+exports.TextInput.displayName = 'TextInput';

package/dist/components/layout/Box/box.js

@@ -0,0 +1,50 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Box = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+const mixins_1 = require("../../system/ThemeProvider/lib/mixins");
+const palette_1 = require("../../system/ThemeProvider/lib/palette");
+/**
+ * ## BackgroundLevels
+ * Maps background levels to palette colors.
+ */
+const BackgroundLevels = {
+    1: palette_1.Palette.background1,
+    2: palette_1.Palette.background2,
+    3: palette_1.Palette.background3,
+    4: palette_1.Palette.background4,
+    5: palette_1.Palette.background5,
+    6: palette_1.Palette.background6,
+};
+/**
+ * ## Box
+ *
+ * Div with flexbox properties applied to their CSS default values.
+ *
+ * - Box can be both the flex parent and the flex child.
+ * - None of the child properties should be applied unless specified.
+ */
+exports.Box = styled_components_1.default.div `
+  /**
+   * Style Scrollbar for Boxes with overflow
+   */
+  ${mixins_1.Mixins.scrollbar.base}
+
+  display: ${({ display = 'flex' }) => display};
+  flex-direction: ${({ flexDirection = 'row' }) => flexDirection};
+  flex-wrap: ${({ flexWrap = 'nowrap' }) => flexWrap};
+  align-items: ${({ alignItems }) => alignItems};
+  justify-content: ${({ justifyContent }) => justifyContent};
+  gap: ${({ theme, gap }) => gap && theme.px[gap]};
+  align-self: ${({ alignSelf }) => alignSelf};
+  flex-basis: ${({ flexBasis }) => flexBasis};
+  flex-grow: ${({ flexGrow }) => flexGrow};
+  flex-shrink: ${({ flexShrink }) => flexShrink};
+  order: ${({ order }) => order};
+  padding: ${({ theme, padding }) => padding && theme.px[padding]};
+  background: ${({ theme, background }) => background && theme.palette[BackgroundLevels[background]]};
+`;
+exports.Box.displayName = 'Box';

package/dist/components/layout/Box/index.js

@@ -0,0 +1,13 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./box"), exports);

package/dist/components/layout/Box/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/components/layout/DefinitionList/definitionList.js

@@ -0,0 +1,49 @@
+"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 };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DefinitionList = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const DefinitionList = (_a) => {
+    var { definitions } = _a, rest = __rest(_a, ["definitions"]);
+    return (jsx_runtime_1.jsx(List, Object.assign({}, rest, { children: Array.from(definitions.keys()).map((name, index) => {
+            return (jsx_runtime_1.jsxs(react_1.default.Fragment, { children: [jsx_runtime_1.jsx(Name, { children: name }, void 0),
+                    jsx_runtime_1.jsx(Definition, { children: definitions.get(name) }, void 0)] }, `${name}-${index}`));
+        }) }), void 0));
+};
+exports.DefinitionList = DefinitionList;
+const List = styled_components_1.default.dl `
+  display: grid;
+  grid-template-columns: 1fr 3fr;
+  gap: ${({ theme }) => `0 ${theme.px.large}`};
+  overflow-y: auto;
+  padding: ${({ theme }) => `${theme.px.small} ${theme.px.base}`};
+  word-break: break-word;
+`;
+const Name = styled_components_1.default.dt `
+  color: ${({ theme }) => theme.palette.textHelp};
+  font-size: ${({ theme }) => theme.fontSize.small};
+  font-weight: ${({ theme }) => theme.fontWeight.normal};
+  line-height: ${({ theme }) => theme.px.base};
+  padding-bottom: ${({ theme }) => theme.px.small};
+  white-space: nowrap;
+`;
+const Definition = styled_components_1.default.dd `
+  font-size: ${({ theme }) => theme.fontSize.small};
+  line-height: ${({ theme }) => theme.px.base};
+  padding-bottom: ${({ theme }) => theme.px.small};
+`;

package/dist/components/layout/DefinitionList/index.js

@@ -0,0 +1,13 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./definitionList"), exports);

package/dist/components/system/GlobalStyles/globalStyles.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GlobalStyles = void 0;
+const styled_components_1 = require("styled-components");
+const constants_1 = require("../ThemeProvider/lib/constants");
+const helpers_1 = require("../ThemeProvider/lib/helpers");
+exports.GlobalStyles = styled_components_1.createGlobalStyle `
+  /** -> Define Global CSS Vars */
+  :root {
+    --openfin-ui-globalBackground: ${({ theme }) => theme.palette.background1};
+    --openfin-ui-globalText: ${({ theme }) => theme.palette.textDefault};
+    --openfin-ui-globalPlaceholder: ${({ theme }) => theme.palette.inputPlaceholder};
+    --openfin-ui-globalTypography: ${constants_1.Typography.base};
+    --openfin-ui-globalTransition: ${({ theme }) => theme.transition.base};
+
+    /* Map over the palette keys and create variables out of them */
+    ${helpers_1.getRootCssVars}
+  }
+
+  /** -> @font-face Declaration */
+  ${helpers_1.getFontFaces}
+
+  /** -> Micro Reset */
+  * {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    /**
+     * Prevent browser auto-weighting
+     * @link https://css-tricks.com/almanac/properties/f/font-synthesis/
+     */
+    font-synthesis: none;
+  }
+
+  /** -> Apply Global Styles */
+  :root,
+  body {
+    background: var(--openfin-ui-globalBackground);
+    color: var(--openfin-ui-globalText);
+    font: var(--openfin-ui-globalTypography);
+  }
+
+  ::placeholder {
+    color: var(--openfin-ui-globalPlaceholder);
+  }
+
+  /** -> Reduced Motion (Accessibility) */
+  @media (prefers-reduced-motion) {
+    :root {
+      --openfin-ui-globalTransition: ${({ theme }) => theme.transition.none};
+    }
+  }
+`;

package/dist/components/system/GlobalStyles/index.js

@@ -0,0 +1,13 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./globalStyles"), exports);

package/dist/components/system/HOC/index.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/components/system/ThemeProvider/index.js

@@ -0,0 +1,21 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./lib/constants"), exports);
+__exportStar(require("./lib/createTheme"), exports);
+__exportStar(require("./lib/createFontFaceCss"), exports);
+__exportStar(require("./lib/helpers"), exports);
+__exportStar(require("./lib/interface"), exports);
+__exportStar(require("./lib/mixins"), exports);
+__exportStar(require("./lib/palette"), exports);
+__exportStar(require("./lib/types"), exports);
+__exportStar(require("./themeProvider"), exports);

package/dist/{types/components → components}/system/ThemeProvider/lib/colors.d.ts

@@ -1,4 +1,4 @@
 import { ColorInputWithoutInstance as Color } from 'tinycolor2';
-export declare const lightenColor: (color: Color, amount?: number) => string;
-export declare const darkenColor: (color: Color, amount?: number) => string;
+export declare const lightenColor: (color: Color, amount?: number | undefined) => string;
+export declare const darkenColor: (color: Color, amount?: number | undefined) => string;
 export declare const getMostReadable: (baseColor: Color, colors: Color[]) => string;

package/dist/components/system/ThemeProvider/lib/colors.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getMostReadable = exports.darkenColor = exports.lightenColor = void 0;
+const tinycolor2_1 = __importDefault(require("tinycolor2"));
+const lightenColor = (color, amount) => adjustColor(color, 'lighten', amount);
+exports.lightenColor = lightenColor;
+const darkenColor = (color, amount) => adjustColor(color, 'darken', amount);
+exports.darkenColor = darkenColor;
+const adjustColor = (color, func, amount) => {
+    if (amount && (amount < 0 || amount > 100)) {
+        throw new Error(`${amount} must be a number between 0 and 100`);
+    }
+    return tinycolor2_1.default(color)[func](amount).toString();
+};
+const getMostReadable = (baseColor, colors) => {
+    return tinycolor2_1.default.mostReadable(baseColor, colors).toHexString();
+};
+exports.getMostReadable = getMostReadable;

package/dist/components/system/ThemeProvider/lib/config.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Configuration = void 0;
+exports.Configuration = {
+    fontLoading: 'cdn',
+};

package/dist/{types/components → components}/system/ThemeProvider/lib/constants.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 /**
  * Color --
  * Color maps names to values.

package/dist/components/system/ThemeProvider/lib/constants.js

@@ -0,0 +1,271 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.cdnFontFaceCss = exports.IconSize = exports.IconSet = exports.Transition = exports.Typography = exports.LineHeight = exports.FontWeight = exports.FontSize = exports.FontStack = exports.Shadow = exports.Radius = exports.UnitPx = exports.Unit = exports.SizeName = exports.Size = exports.Color = void 0;
+const RadixIcons = __importStar(require("@modulz/radix-icons"));
+const OpenFinIcons = __importStar(require("../../../elements/Icon/openfin"));
+const createFontFaceCss_1 = require("./createFontFaceCss");
+/**
+ * Color --
+ * Color maps names to values.
+ * This is the "raw" store of all OpenFin colors
+ * referenced by their Figma names.
+ *
+ * This is the only place Color values should be defined
+ */
+exports.Color = {
+    white: '#FFFFFF',
+    lightGray1: '#FAFBFE',
+    lightGray2: '#F3F5F8',
+    lightGray3: '#ECEEF1',
+    lightGray4: '#DDDFE4',
+    lightGray5: '#C9CBD2',
+    neutralGray: '#7D808A',
+    darkGray1: '#53565F',
+    darkGray2: '#383A40',
+    darkGray3: '#2F3136',
+    darkGray4: '#24262B',
+    darkGray5: '#1E1F23',
+    darkGray6: '#111214',
+    openFinDarkest: '#3D39CD',
+    openFinDarker: '#4642E0',
+    openFin: '#504CFF',
+    openFinLight: '#5254FB',
+    openFinLighter: '#5C5EFE',
+    openFinLightest: '#6864FF',
+    functional1: '#35C759',
+    functional2: '#46C8F1',
+    functional3: '#0498FB',
+    functional4: '#3A6FF9',
+    functional5: '#5C5EFE',
+    functional6: '#882BFE',
+    functional7: '#BE1D1F',
+    functional8: '#C93400',
+    functional9: '#FF5E60',
+    functional10: '#F48F00',
+    purple: '#8C61FF',
+    lightblue: '#36C3FE',
+    aqua: '#00CC88',
+    yellow: '#FFEB00',
+    salmon: '#FF8C4C',
+    pink: '#FF5E60',
+    lightpink: '#FF8FB8',
+    white00: 'rgba(255,255,255,0.0)',
+    white10: 'rgba(255,255,255,0.1)',
+    white20: 'rgba(255,255,255,0.2)',
+    white30: 'rgba(255,255,255,0.3)',
+    white40: 'rgba(255,255,255,0.4)',
+    white50: 'rgba(255,255,255,0.5)',
+    white60: 'rgba(255,255,255,0.6)',
+    white70: 'rgba(255,255,255,0.7)',
+    white80: 'rgba(255,255,255,0.8)',
+    white90: 'rgba(255,255,255,0.9)',
+    black00: 'rgba(0,0,0,0.0)',
+    black10: 'rgba(0,0,0,0.1)',
+    black20: 'rgba(0,0,0,0.2)',
+    black30: 'rgba(0,0,0,0.3)',
+    black40: 'rgba(0,0,0,0.4)',
+    black50: 'rgba(0,0,0,0.5)',
+    black60: 'rgba(0,0,0,0.6)',
+    black70: 'rgba(0,0,0,0.7)',
+    black80: 'rgba(0,0,0,0.8)',
+    black90: 'rgba(0,0,0,0.9)',
+    transparent: 'transparent',
+};
+/**
+ * Size --
+ * Common keys used to describe a range of values
+ * - Unit, UnitPx, Shadow, FontSize
+ */
+exports.Size = {
+    xsmall: 'xsmall',
+    small: 'small',
+    base: 'base',
+    large: 'large',
+    xlarge: 'xlarge',
+    xxlarge: 'xxlarge',
+    xxxlarge: 'xxxlarge',
+    xxxxlarge: 'xxxxlarge',
+};
+/**
+ * SizeName --
+ * Primarly a Storybook Helper for displaying human-friendly size names
+ * It's more intuitive to maintain this if it lives here
+ */
+exports.SizeName = {
+    [exports.Size.xsmall]: 'Extra Small',
+    [exports.Size.small]: 'Small',
+    [exports.Size.base]: 'Base',
+    [exports.Size.large]: 'Large',
+    [exports.Size.xlarge]: 'Extra Large',
+    [exports.Size.xxlarge]: '2X Large',
+    [exports.Size.xxxlarge]: '3X Large',
+    [exports.Size.xxxxlarge]: '4X Large',
+};
+/**
+ * Unit --
+ * Design System works on a 4px Grid
+ * Units are represented as numbers here for convienence in Javascript, e.g. `Unit.base * 4`
+ */
+exports.Unit = {
+    [exports.Size.xsmall]: 4,
+    [exports.Size.small]: 8,
+    [exports.Size.base]: 12,
+    [exports.Size.large]: 16,
+    [exports.Size.xlarge]: 20,
+    [exports.Size.xxlarge]: 24,
+    [exports.Size.xxxlarge]: 32,
+    [exports.Size.xxxxlarge]: 48,
+};
+/**
+ * UnitPx / "px" --
+ * Design System works on a 4px Grid
+ * UnitPx includes the px suffix for convienence in Styled Components
+ */
+exports.UnitPx = {
+    [exports.Size.xsmall]: '4px',
+    [exports.Size.small]: '8px',
+    [exports.Size.base]: '12px',
+    [exports.Size.large]: '16px',
+    [exports.Size.xlarge]: '20px',
+    [exports.Size.xxlarge]: '24px',
+    [exports.Size.xxxlarge]: '32px',
+    [exports.Size.xxxxlarge]: '48px',
+};
+/**
+ * Radius --
+ * The border radius values supported in the design system
+ */
+exports.Radius = {
+    [exports.Size.small]: '4px',
+    [exports.Size.base]: '8px',
+    [exports.Size.large]: '24px',
+    pill: '100vh',
+    round: '50%',
+    none: '0',
+};
+/**
+ * Shadow --
+ * Design System drop shadows
+ * Note: This does not include any `text-shadow`
+ */
+exports.Shadow = {
+    [exports.Size.base]: `0 4px 4px rgba(0, 0, 0, 0.25)`,
+};
+const fonts = [
+    'Inter',
+    '-apple-system',
+    'BlinkMacSystemFont',
+    'Segoe UI',
+    'Roboto',
+    'Oxygen-Sans',
+    'Ubuntu',
+    'Cantarell',
+    'Helvetica Neue',
+    'sans-serif',
+];
+/**
+ * FontStack --
+ * Design System uses "Inter" and we include @font-face definitions to load a CDN hosted version of the font
+ * The rest of the stack includes reasonable fallbacks for contingency cases where the CDN asset fails to load
+ */
+exports.FontStack = fonts.join(', ');
+/**
+ * FontSize --
+ * Design System font sizes using standard scale
+ */
+exports.FontSize = {
+    [exports.Size.xsmall]: '8px',
+    [exports.Size.small]: '10px',
+    [exports.Size.base]: '12px',
+    [exports.Size.large]: '14px',
+    [exports.Size.xlarge]: '16px',
+    [exports.Size.xxlarge]: '18px',
+    [exports.Size.xxxlarge]: '20px',
+    [exports.Size.xxxxlarge]: '40px',
+};
+/**
+ * FontWeight --
+ * Design System font weights (three)
+ */
+exports.FontWeight = {
+    normal: 400,
+    bold: 600,
+};
+/**
+ * LineHeight --
+ * Read about "unitless" line-height
+ * @link https://css-tricks.com/almanac/properties/l/line-height/#unitless-line-heights
+ */
+exports.LineHeight = {
+    ui: 1,
+    heading: 1.2,
+    text: 1.5,
+};
+/**
+ * Typography --
+ * Design System typography is a full set of values for a `font:...` property.
+ * @example "12px/16px Inter, ..."
+ * @example "20px/24px Inter, ..."
+ */
+exports.Typography = {
+    base: `${exports.FontSize.base}/${exports.LineHeight.text} ${exports.FontStack}`,
+};
+/**
+ * Transitions --
+ * Design System transition easings because UI motion feels better if everything moves the same way.
+ */
+exports.Transition = {
+    base: '200ms cubic-bezier(0.16, 1, 0.3, 1)',
+    none: '0ms',
+};
+/**
+ * IconSet --
+ * Design System uses Radix Icons `@modulz/radix-icons`
+ * @link https://icons.modulz.app/
+ * @link https://github.com/radix-ui/icons
+ *
+ * This exposes them as a named set through OpenFin UI Library
+ */
+exports.IconSet = Object.assign(Object.assign({}, RadixIcons), OpenFinIcons);
+/**
+ * IconSize --
+ * Design System standard set of icon sizes
+ */
+exports.IconSize = {
+    [exports.Size.xsmall]: exports.UnitPx.small,
+    [exports.Size.small]: exports.UnitPx.base,
+    [exports.Size.base]: '15px',
+    [exports.Size.large]: exports.UnitPx.xlarge,
+    [exports.Size.xlarge]: exports.UnitPx.xxlarge,
+    [exports.Size.xxlarge]: exports.UnitPx.xxxlarge,
+    [exports.Size.xxxlarge]: exports.UnitPx.xxxxlarge,
+};
+/**
+ * @font-face --
+ * Generate @font-face CSS for CDN Loaded fonts
+ */
+exports.cdnFontFaceCss = createFontFaceCss_1.createFontFaceCss({
+    regular: '//cdn.openfin.co/fonts/inter/Inter-Regular.woff2?v3.15',
+    italic: '//cdn.openfin.co/fonts/inter/Inter-Italic.woff2?v3.15',
+    semiBold: '//cdn.openfin.co/fonts/inter/Inter-SemiBold.woff2?v3.15',
+    semiBoldItalic: '//cdn.openfin.co/fonts/inter/Inter-SemiBoldItalic.woff2?v3.15',
+});

package/dist/components/system/ThemeProvider/lib/createFontFaceCss.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createFontFaceCss = void 0;
+const styled_components_1 = require("styled-components");
+const constants_1 = require("./constants");
+/**
+ * Import global fonts using your own config.
+ */
+function createFontFaceCss(fonts) {
+    return styled_components_1.css `
+    @font-face {
+      font-family: 'Inter';
+      src: url(${fonts.regular}) format('woff2');
+      font-weight: ${constants_1.FontWeight.normal};
+      font-style: normal;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: 'Inter';
+      src: url(${fonts.italic}) format('woff2');
+      font-weight: ${constants_1.FontWeight.normal};
+      font-style: italic;
+      font-display: swap;
+    }
+
+    @font-face {
+      font-family: 'Inter';
+      src: url(${fonts.semiBold}) format('woff2');
+      font-weight: ${constants_1.FontWeight.bold};
+      font-style: normal;
+      font-display: swap;
+    }
+
+    @font-face {
+      font-family: 'Inter';
+      src: url(${fonts.semiBoldItalic}) format('woff2');
+      font-weight: ${constants_1.FontWeight.bold};
+      font-style: italic;
+      font-display: swap;
+    }
+  `;
+}
+exports.createFontFaceCss = createFontFaceCss;

package/dist/components/system/ThemeProvider/lib/createTheme.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createTheme = void 0;
+const config_1 = require("../lib/config");
+const constants_1 = require("../lib/constants");
+const colors_1 = require("./colors");
+const palette_1 = require("./palette");
+const LIGHTNESS_PERCENTAGE_ACTIVE = 2;
+const LIGHTNESS_PERCENTAGE_HOVER = 5;
+const LIGHTNESS_PERCENTAGE_FOCUSED = 20;
+const base = {
+    _config: config_1.Configuration,
+    _color: constants_1.Color,
+    fontSize: constants_1.FontSize,
+    fontWeight: constants_1.FontWeight,
+    lineHeight: constants_1.LineHeight,
+    iconSize: constants_1.IconSize,
+    radius: constants_1.Radius,
+    shadow: constants_1.Shadow,
+    transition: constants_1.Transition,
+    unit: constants_1.Unit,
+    px: constants_1.UnitPx,
+};
+/**
+ * Created Active, Hover, and Focused Colors derived from base color
+ */
+const createDerivedPaletteKeys = (key, baseColor) => ({
+    [`${key}Active`]: colors_1.darkenColor(baseColor, LIGHTNESS_PERCENTAGE_ACTIVE),
+    [`${key}Hover`]: colors_1.lightenColor(baseColor, LIGHTNESS_PERCENTAGE_HOVER),
+    [`${key}Focused`]: colors_1.lightenColor(baseColor, LIGHTNESS_PERCENTAGE_FOCUSED),
+    [`${key}Text`]: colors_1.getMostReadable(baseColor, [constants_1.Color.white, constants_1.Color.darkGray5]),
+});
+/**
+ * Create a theme by accepting an incomplete theme object and deriving the remaining colors based on button colors.
+ *
+ * @param {Partial<PaletteType>} palettePartial The provided theme keys, whether we or the end user defined them.
+ * @returns {DefaultTheme}
+ */
+const createTheme = (palettePartial) => {
+    const foo = Object.assign(Object.assign({}, base), { palette: Object.assign(Object.assign(Object.assign({}, palettePartial), createDerivedPaletteKeys(palette_1.Palette.brandPrimary, palettePartial.brandPrimary)), createDerivedPaletteKeys(palette_1.Palette.brandSecondary, palettePartial.brandSecondary)) });
+    return foo;
+};
+exports.createTheme = createTheme;

package/dist/components/system/ThemeProvider/lib/fonts.d.js

@@ -0,0 +1 @@
+"use strict";