@openfin/ui-library 0.1.5 → 0.1.6-alpha.1617063254

package/dist/components/controls/Button/button.d.ts

@@ -19,13 +19,13 @@ export declare type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & (But
 };
 /**
  * Button as Anchor
- * @example <Button as="a" href="https://..."/>
+ * @example <Button as="a" href="https://..." />
  *
  * Button with Label
- * @example <Button label="..."/>
+ * @example <Button label="..." />
  *
  * Button with Child Element
- * @example <Button><Child></Button>
+ * @example <Button><Child /></Button>
  */
 export declare const Button: FC<ButtonProps>;
 /**
@@ -33,5 +33,5 @@ export declare const Button: FC<ButtonProps>;
  */
 export declare const ButtonPrimary: FC<ButtonProps>;
 export declare const ButtonSecondary: FC<ButtonProps>;
-export declare const ButtonTertiary: FC<ButtonProps>;
+export declare const ButtonTextOnly: FC<ButtonProps>;
 export {};

package/dist/components/controls/Button/button.js

@@ -14,7 +14,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ButtonTertiary = exports.ButtonSecondary = exports.ButtonPrimary = exports.Button = void 0;
+exports.ButtonTextOnly = exports.ButtonSecondary = exports.ButtonPrimary = exports.Button = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const styled_components_1 = __importDefault(require("styled-components"));
 const Box_1 = require("../../layout/Box");
@@ -22,66 +22,54 @@ const helpers_1 = require("../../system/ThemeProvider/lib/helpers");
 const button_variants_1 = require("./button.variants");
 /**
  * Button as Anchor
- * @example <Button as="a" href="https://..."/>
+ * @example <Button as="a" href="https://..." />
  *
  * Button with Label
- * @example <Button label="..."/>
+ * @example <Button label="..." />
  *
  * Button with Child Element
- * @example <Button><Child></Button>
+ * @example <Button><Child /></Button>
  */
 const Button = (_a) => {
     var { label, children, size = 'base', shape = 'square', kind = 'primary', layout = 'fit', href } = _a, buttonProps = __rest(_a, ["label", "children", "size", "shape", "kind", "layout", "href"]);
-    return (jsx_runtime_1.jsx(ButtonElement, Object.assign({ as: href ? 'a' : 'button', size: size, shape: shape, kind: kind, layout: layout }, buttonProps, { children: label ? jsx_runtime_1.jsx(ButtonLabel, { children: label }, void 0) : children }), void 0));
+    return (jsx_runtime_1.jsx(ButtonElement, Object.assign({ as: href ? 'a' : 'button', size: size, shape: shape, kind: kind, layout: layout }, buttonProps, { children: label ? (jsx_runtime_1.jsx(ButtonLabel, Object.assign({ alignItems: "center", justifyContent: "center" }, { children: label }), void 0)) : (children) }), void 0));
 };
 exports.Button = Button;
 const ButtonElement = styled_components_1.default.button `
-  /**
-   * 1. Initialize local variables with reasonable defaults
-   */
-  --color-background: ${({ theme }) => theme.palette.inputBg};
-  --color-foreground: ${({ theme }) => theme.palette.inputColor};
+  /* Default values that get overridden by variants */
+  background: ${({ theme }) => theme.palette.inputBg};
+  border: 1px solid ${({ theme }) => theme.palette.inputBg};
+  color: ${({ theme }) => theme.palette.inputColor};
 
-  &:disabled {
-    --color-background: ${({ theme }) => theme.palette.inputDisabled};
-  }
-
-  /**
-   * 2. Inject variants -- ? What are Variants
-   */
+  /* Inject variants */
   ${helpers_1.getVariantCSS(button_variants_1.variants, button_variants_1.Variant.size)}
   ${helpers_1.getVariantCSS(button_variants_1.variants, button_variants_1.Variant.shape)}
   ${helpers_1.getVariantCSS(button_variants_1.variants, button_variants_1.Variant.kind)}
   ${helpers_1.getVariantCSS(button_variants_1.variants, button_variants_1.Variant.layout)}
 
-  /**
-  * 3. Component Build
-  */
-  background: var(--color-background);
-  color: var(--color-foreground);
-
   display: inline-flex;
-  border: none;
+  align-items: center;
+  gap: ${({ theme }) => theme.px.small};
   outline: none;
   text-decoration: none;
   white-space: nowrap;
   line-height: ${({ theme }) => theme.lineHeight.ui};
   font-weight: ${({ theme }) => theme.fontWeight.bold};
-
-  &:focus,
-  &:active {
-    box-shadow: 0 0 0 2px ${({ theme }) => theme._color.black30},
-      0 0 0 2px var(--color-background);
-  }
+  transition: border-color var(--openfin-ui-globalTransition);
 
   &:not(:disabled) {
     cursor: pointer;
   }
+
+  &:disabled,
+  &:active:disabled {
+    background: ${({ theme }) => theme.palette.inputDisabled};
+    border-color: ${({ theme }) => theme.palette.inputDisabled};
+    color: ${({ theme }) => theme.palette.inputPlaceholder};
+    cursor: not-allowed;
+  }
 `;
-const ButtonLabel = styled_components_1.default(Box_1.Box).attrs({
-    alignItems: 'center',
-    justifyContent: 'center',
-}) `
+const ButtonLabel = styled_components_1.default(Box_1.Box) `
   padding: ${({ theme }) => `0 ${theme.px.xsmall}`};
 `;
 /**
@@ -91,5 +79,5 @@ const ButtonPrimary = (props) => (jsx_runtime_1.jsx(exports.Button, Object.assig
 exports.ButtonPrimary = ButtonPrimary;
 const ButtonSecondary = (props) => (jsx_runtime_1.jsx(exports.Button, Object.assign({}, props, { kind: "secondary" }), void 0));
 exports.ButtonSecondary = ButtonSecondary;
-const ButtonTertiary = (props) => (jsx_runtime_1.jsx(exports.Button, Object.assign({}, props, { kind: "textOnly" }), void 0));
-exports.ButtonTertiary = ButtonTertiary;
+const ButtonTextOnly = (props) => (jsx_runtime_1.jsx(exports.Button, Object.assign({}, props, { kind: "textOnly" }), void 0));
+exports.ButtonTextOnly = ButtonTextOnly;

package/dist/components/controls/Button/button.variants.js

@@ -45,21 +45,21 @@ exports.ButtonShape = {
 exports.variants = {
     [exports.Variant.size]: {
         [exports.ButtonSize.base]: styled_components_1.css `
-      padding: ${({ theme }) => theme.px.large};
-      font-size: ${({ theme }) => theme.fontSize.xlarge};
+      padding: ${({ theme }) => `${theme.px.small} ${theme.px.large}`};
+      font-size: ${({ theme }) => theme.fontSize.base};
     `,
         [exports.ButtonSize.small]: styled_components_1.css `
-      padding: ${({ theme }) => theme.px.small};
-      font-size: ${({ theme }) => theme.fontSize.base};
+      padding: ${({ theme }) => `${theme.px.xsmall} ${theme.px.base}`};
+      font-size: ${({ theme }) => theme.fontSize.small};
     `,
         [exports.ButtonSize.large]: styled_components_1.css `
-      padding: ${({ theme }) => theme.px.xlarge};
-      font-size: ${({ theme }) => theme.fontSize.xxxlarge};
+      padding: ${({ theme }) => `${theme.px.base} ${theme.px.xlarge}`};
+      font-size: ${({ theme }) => theme.fontSize.large};
     `,
     },
     [exports.Variant.shape]: {
         [exports.ButtonShape.square]: styled_components_1.css `
-      border-radius: ${({ theme }) => theme.radius.base};
+      border-radius: ${({ theme }) => theme.radius.small};
     `,
         [exports.ButtonShape.pill]: styled_components_1.css `
       border-radius: ${({ theme }) => theme.radius.pill};
@@ -75,14 +75,49 @@ exports.variants = {
     },
     [exports.Variant.kind]: {
         [exports.ButtonKind.primary]: styled_components_1.css `
-      --color-background: ${({ theme }) => theme.palette.brandPrimary};
+      background: ${({ theme }) => theme.palette.brandPrimary};
+      border-color: ${({ theme }) => theme.palette.brandPrimary};
+
+      &:hover {
+        background: ${({ theme }) => theme.palette.brandPrimaryHover};
+      }
+
+      &:active {
+        background: ${({ theme }) => theme.palette.brandPrimaryActive};
+      }
+
+      &:focus {
+        border-color: ${({ theme }) => theme.palette.brandPrimaryFocused};
+      }
     `,
         [exports.ButtonKind.secondary]: styled_components_1.css `
-      --color-background: ${({ theme }) => theme.palette.brandSecondary};
+      background: ${({ theme }) => theme.palette.brandSecondary};
+      border-color: ${({ theme }) => theme.palette.brandSecondary};
+
+      &:hover {
+        background: ${({ theme }) => theme.palette.brandSecondaryHover};
+      }
+
+      &:active {
+        background: ${({ theme }) => theme.palette.brandSecondaryActive};
+      }
+
+      &:focus {
+        border-color: ${({ theme }) => theme.palette.brandSecondaryFocused};
+      }
     `,
         [exports.ButtonKind.textOnly]: styled_components_1.css `
-      --color-background: transparent;
-      --color-foreground: ${({ theme }) => theme.palette.textDefault};
+      background: transparent;
+      border-color: transparent;
+      color: ${({ theme }) => theme.palette.textDefault};
+
+      &:active {
+        opacity: 0.8;
+      }
+
+      &:focus {
+        border-color: ${({ theme }) => theme.palette.inputFocused};
+      }
     `,
     },
 };

package/dist/components/controls/Toggle/toggle.d.ts

@@ -1,9 +1,9 @@
-import { FC, InputHTMLAttributes } from 'react';
+import React, { FC, InputHTMLAttributes } from 'react';
 export declare type LabelSideType = 'left' | 'right';
 export declare type ToggleProps = InputHTMLAttributes<HTMLInputElement> & {
     label?: string;
     labelSide?: LabelSideType;
     type?: 'checkbox' | 'radio';
-    onChange?: Function;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
 };
 export declare const Toggle: FC<ToggleProps>;

package/dist/components/controls/Toggle/toggle.js

@@ -21,12 +21,15 @@ const styled_components_1 = __importDefault(require("styled-components"));
 const RawInput_1 = require("../../input/RawInput");
 const Box_1 = require("../../layout/Box");
 const Toggle = (_a) => {
-    var { id, label, labelSide = 'right', type = 'checkbox', onChange = () => { } } = _a, inputProps = __rest(_a, ["id", "label", "labelSide", "type", "onChange"]);
+    var { id, label, onChange, labelSide = 'right', type = 'checkbox' } = _a, inputProps = __rest(_a, ["id", "label", "onChange", "labelSide", "type"]);
     const [isChecked, setIsChecked] = react_1.useState(inputProps.checked);
+    react_1.useEffect(() => {
+        setIsChecked(inputProps.checked);
+    }, [inputProps.checked]);
     return (jsx_runtime_1.jsxs(ToggleContainer, Object.assign({ labelSide: labelSide }, { children: [label ? jsx_runtime_1.jsx(ToggleLabel, Object.assign({ htmlFor: id }, { children: label }), void 0) : undefined,
-            jsx_runtime_1.jsxs(InputContainer, Object.assign({ isChecked: isChecked }, { children: [jsx_runtime_1.jsx(ToggleInput, Object.assign({ id: id, type: type }, inputProps, { onChange: (event) => {
+            jsx_runtime_1.jsxs(InputContainer, Object.assign({ isChecked: isChecked }, { children: [jsx_runtime_1.jsx(ToggleInput, Object.assign({}, inputProps, { id: id, type: type, onChange: (event) => {
                             setIsChecked(event.target.checked);
-                            onChange(event);
+                            onChange === null || onChange === void 0 ? void 0 : onChange(event);
                         } }), void 0),
                     jsx_runtime_1.jsx(ToggleKnob, { tabIndex: -1 }, void 0)] }), void 0)] }), void 0));
 };

package/dist/components/input/TextInput/textInput.d.ts

@@ -1,6 +1,7 @@
 import { FC, InputHTMLAttributes } from 'react';
+import { WithStatusProps } from '../../system/HOC';
 export declare type TextInputProps = InputHTMLAttributes<HTMLInputElement> & {
     message?: string;
     label?: string;
 };
-export declare const TextInput: FC;
+export declare const TextInput: FC<TextInputProps & WithStatusProps>;

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

@@ -23,9 +23,9 @@ const Box_1 = require("../../layout/Box");
 const Text_1 = require("../../typography/Text");
 const ThemeProvider_1 = require("../../system/ThemeProvider");
 exports.TextInput = HOC_1.withStatus((_a) => {
-    var { className, message, label, status, name } = _a, rest = __rest(_a, ["className", "message", "label", "status", "name"]);
+    var { className, message, label, status, name } = _a, inputProps = __rest(_a, ["className", "message", "label", "status", "name"]);
     return (jsx_runtime_1.jsxs(InputContainer, Object.assign({ flexDirection: "column", alignItems: "flex-start" }, { children: [!!label && (jsx_runtime_1.jsx(InputLabel, Object.assign({ as: "label", htmlFor: name, weight: "bold" }, { children: label }), void 0)),
-            jsx_runtime_1.jsx(StyledInputField, Object.assign({ className: className, type: "text", name: name, status: status }, rest), void 0),
+            jsx_runtime_1.jsx(StyledInputField, Object.assign({ className: className, type: "text", name: name, status: status }, inputProps), void 0),
             !!message && jsx_runtime_1.jsx(InputMessage, Object.assign({ status: status }, { children: message }), void 0)] }), void 0));
 });
 const InputLabel = styled_components_1.default(Text_1.Text) `

package/dist/components/system/ThemeProvider/index.d.ts

@@ -1,4 +1,5 @@
 export * from './lib/constants';
+export * from './lib/createTheme';
 export * from './lib/helpers';
 export * from './lib/interface';
 export * from './lib/mixins';

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

@@ -11,6 +11,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./lib/constants"), exports);
+__exportStar(require("./lib/createTheme"), exports);
 __exportStar(require("./lib/helpers"), exports);
 __exportStar(require("./lib/interface"), exports);
 __exportStar(require("./lib/mixins"), exports);

package/dist/components/system/ThemeProvider/lib/colors.d.ts

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

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

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+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();
+};

package/dist/components/system/ThemeProvider/lib/createTheme.d.ts

@@ -0,0 +1,9 @@
+import { DefaultTheme } from 'styled-components';
+import { PaletteType } from '../lib/types';
+/**
+ * Create a theme by accepting an incomplete theme object and deriving the remaining colors based on button colors.
+ *
+ * @param {Partial<PaletteType>} paletteConfig The provided theme keys, whether we or the end user defined them.
+ * @returns {DefaultTheme}
+ */
+export declare const createTheme: (paletteConfig: Partial<PaletteType>) => DefaultTheme;

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

@@ -0,0 +1,41 @@
+"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 createDerivedButtonPalette = (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),
+});
+/**
+ * Create a theme by accepting an incomplete theme object and deriving the remaining colors based on button colors.
+ *
+ * @param {Partial<PaletteType>} paletteConfig The provided theme keys, whether we or the end user defined them.
+ * @returns {DefaultTheme}
+ */
+const createTheme = (paletteConfig) => {
+    return Object.assign(Object.assign({}, base), { palette: Object.assign(Object.assign(Object.assign({}, paletteConfig), createDerivedButtonPalette(palette_1.Palette.brandPrimary, paletteConfig.brandPrimary)), createDerivedButtonPalette(palette_1.Palette.brandSecondary, paletteConfig.brandSecondary)) });
+};
+exports.createTheme = createTheme;

package/dist/components/system/ThemeProvider/lib/helpers.d.ts

@@ -28,4 +28,4 @@ export declare const getFontFaces: ({ theme }: {
  * Retrive the correct palette value based on the provided status type.
  * Falls back to optionally provided palette key, then to 'inherit'.
  */
-export declare const getStatusColor: (theme: DefaultTheme, status?: StatusType | undefined, defaultKey?: "background1" | "background2" | "background3" | "background4" | "background5" | "background6" | "brandPrimary" | "brandSecondary" | "inputBg" | "inputColor" | "inputPlaceholder" | "inputDisabled" | "inputFocused" | "statusSuccess" | "statusWarning" | "statusCritical" | "statusActive" | "textDefault" | "textHelp" | "textInactive" | undefined) => string;
+export declare const getStatusColor: (theme: DefaultTheme, status?: StatusType | undefined, defaultKey?: "background1" | "background2" | "background3" | "background4" | "background5" | "background6" | "brandPrimary" | "brandSecondary" | "brandPrimaryActive" | "brandPrimaryHover" | "brandPrimaryFocused" | "brandSecondaryActive" | "brandSecondaryHover" | "brandSecondaryFocused" | "inputBg" | "inputColor" | "inputPlaceholder" | "inputDisabled" | "inputFocused" | "statusSuccess" | "statusWarning" | "statusCritical" | "statusActive" | "textDefault" | "textHelp" | "textInactive" | undefined) => string;

package/dist/components/system/ThemeProvider/lib/palette.d.ts

@@ -10,6 +10,12 @@ export declare const Palette: {
     readonly background6: "background6";
     readonly brandPrimary: "brandPrimary";
     readonly brandSecondary: "brandSecondary";
+    readonly brandPrimaryActive: "brandPrimaryActive";
+    readonly brandPrimaryHover: "brandPrimaryHover";
+    readonly brandPrimaryFocused: "brandPrimaryFocused";
+    readonly brandSecondaryActive: "brandSecondaryActive";
+    readonly brandSecondaryHover: "brandSecondaryHover";
+    readonly brandSecondaryFocused: "brandSecondaryFocused";
     readonly inputBg: "inputBg";
     readonly inputColor: "inputColor";
     readonly inputPlaceholder: "inputPlaceholder";

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

@@ -13,6 +13,14 @@ exports.Palette = {
     background6: 'background6',
     brandPrimary: 'brandPrimary',
     brandSecondary: 'brandSecondary',
+    // --BEGIN These are calculated during theme creation. See ./createTheme.ts
+    brandPrimaryActive: 'brandPrimaryActive',
+    brandPrimaryHover: 'brandPrimaryHover',
+    brandPrimaryFocused: 'brandPrimaryFocused',
+    brandSecondaryActive: 'brandSecondaryActive',
+    brandSecondaryHover: 'brandSecondaryHover',
+    brandSecondaryFocused: 'brandSecondaryFocused',
+    // --END
     inputBg: 'inputBg',
     inputColor: 'inputColor',
     inputPlaceholder: 'inputPlaceholder',

package/dist/components/system/ThemeProvider/themes/openfin.js

@@ -1,22 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.OpenFinDarkTheme = exports.OpenFinLightTheme = void 0;
-const config_1 = require("../lib/config");
-const constants_1 = require("../lib/constants");
 const palette_1 = require("../lib/palette");
-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,
-};
+const constants_1 = require("../lib/constants");
+const createTheme_1 = require("../lib/createTheme");
 const sharedPalette = {
     // Brand
     [palette_1.Palette.brandPrimary]: constants_1.Color.openFin,
@@ -29,24 +16,24 @@ const sharedPalette = {
 /**
  * Light Theme
  */
-exports.OpenFinLightTheme = Object.assign(Object.assign({}, base), { palette: Object.assign(Object.assign({}, sharedPalette), { 
-        // Background levels
-        [palette_1.Palette.background1]: constants_1.Color.lightGray1, [palette_1.Palette.background2]: constants_1.Color.lightGray2, [palette_1.Palette.background3]: constants_1.Color.lightGray3, [palette_1.Palette.background4]: constants_1.Color.lightGray4, [palette_1.Palette.background5]: constants_1.Color.lightGray4, [palette_1.Palette.background6]: constants_1.Color.lightGray4, 
-        // Brand
-        [palette_1.Palette.brandSecondary]: constants_1.Color.darkGray6, 
-        // Inputs
-        [palette_1.Palette.inputBg]: constants_1.Color.darkGray1, [palette_1.Palette.inputColor]: constants_1.Color.white, [palette_1.Palette.inputPlaceholder]: constants_1.Color.lightGray4, [palette_1.Palette.inputDisabled]: constants_1.Color.neutralGray, [palette_1.Palette.inputFocused]: constants_1.Color.lightGray4, 
-        // Text
-        [palette_1.Palette.textDefault]: constants_1.Color.darkGray6, [palette_1.Palette.textHelp]: constants_1.Color.darkGray3, [palette_1.Palette.textInactive]: constants_1.Color.neutralGray }) });
+exports.OpenFinLightTheme = createTheme_1.createTheme(Object.assign(Object.assign({}, sharedPalette), { 
+    // Background levels
+    [palette_1.Palette.background1]: constants_1.Color.lightGray1, [palette_1.Palette.background2]: constants_1.Color.lightGray2, [palette_1.Palette.background3]: constants_1.Color.lightGray3, [palette_1.Palette.background4]: constants_1.Color.lightGray4, [palette_1.Palette.background5]: constants_1.Color.lightGray4, [palette_1.Palette.background6]: constants_1.Color.lightGray4, 
+    // Brand
+    [palette_1.Palette.brandSecondary]: constants_1.Color.darkGray6, 
+    // Inputs
+    [palette_1.Palette.inputBg]: constants_1.Color.darkGray1, [palette_1.Palette.inputColor]: constants_1.Color.white, [palette_1.Palette.inputPlaceholder]: constants_1.Color.lightGray4, [palette_1.Palette.inputDisabled]: constants_1.Color.neutralGray, [palette_1.Palette.inputFocused]: constants_1.Color.lightGray4, 
+    // Text
+    [palette_1.Palette.textDefault]: constants_1.Color.darkGray6, [palette_1.Palette.textHelp]: constants_1.Color.darkGray3, [palette_1.Palette.textInactive]: constants_1.Color.neutralGray }));
 /**
  * Dark Theme
  */
-exports.OpenFinDarkTheme = Object.assign(Object.assign({}, base), { palette: Object.assign(Object.assign({}, sharedPalette), { 
-        // Background levels
-        [palette_1.Palette.background1]: constants_1.Color.darkGray6, [palette_1.Palette.background2]: constants_1.Color.darkGray5, [palette_1.Palette.background3]: constants_1.Color.darkGray4, [palette_1.Palette.background4]: constants_1.Color.darkGray3, [palette_1.Palette.background5]: constants_1.Color.darkGray2, [palette_1.Palette.background6]: constants_1.Color.darkGray1, 
-        // Brand
-        [palette_1.Palette.brandSecondary]: constants_1.Color.darkGray2, 
-        // Inputs
-        [palette_1.Palette.inputBg]: constants_1.Color.darkGray1, [palette_1.Palette.inputColor]: constants_1.Color.white, [palette_1.Palette.inputPlaceholder]: constants_1.Color.lightGray4, [palette_1.Palette.inputDisabled]: constants_1.Color.neutralGray, [palette_1.Palette.inputFocused]: constants_1.Color.lightGray4, 
-        // Text
-        [palette_1.Palette.textDefault]: constants_1.Color.white, [palette_1.Palette.textHelp]: constants_1.Color.lightGray4, [palette_1.Palette.textInactive]: constants_1.Color.neutralGray }) });
+exports.OpenFinDarkTheme = createTheme_1.createTheme(Object.assign(Object.assign({}, sharedPalette), { 
+    // Background levels
+    [palette_1.Palette.background1]: constants_1.Color.darkGray6, [palette_1.Palette.background2]: constants_1.Color.darkGray5, [palette_1.Palette.background3]: constants_1.Color.darkGray4, [palette_1.Palette.background4]: constants_1.Color.darkGray3, [palette_1.Palette.background5]: constants_1.Color.darkGray2, [palette_1.Palette.background6]: constants_1.Color.darkGray1, 
+    // Brand
+    [palette_1.Palette.brandSecondary]: constants_1.Color.darkGray1, 
+    // Inputs
+    [palette_1.Palette.inputBg]: constants_1.Color.darkGray1, [palette_1.Palette.inputColor]: constants_1.Color.white, [palette_1.Palette.inputPlaceholder]: constants_1.Color.lightGray4, [palette_1.Palette.inputDisabled]: constants_1.Color.neutralGray, [palette_1.Palette.inputFocused]: constants_1.Color.lightGray4, 
+    // Text
+    [palette_1.Palette.textDefault]: constants_1.Color.white, [palette_1.Palette.textHelp]: constants_1.Color.lightGray4, [palette_1.Palette.textInactive]: constants_1.Color.neutralGray }));

package/dist/storybookHelpers.js

@@ -48,6 +48,9 @@ exports.SpatialLink = styled_components_1.default.a.attrs({
   display: block;
   color: ${({ theme }) => theme.palette.textDefault};
   text-decoration: none;
+  padding: ${({ theme }) => theme.px.small};
+  border: 1px solid ${({ theme }) => theme.palette.textDefault};
+  border-radius: ${({ theme }) => theme.radius.small};
   &:after {
     display: block;
     content: 'Source: Spatial';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@openfin/ui-library",
   "description": "OpenFin UI Component Library",
-  "version": "0.1.5",
+  "version": "0.1.6-alpha.1617063254",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "repository": "github:openfin/ui-library",
@@ -11,7 +11,8 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "@modulz/radix-icons": "^4.0.0"
+    "@modulz/radix-icons": "^4.0.0",
+    "tinycolor2": "^1.4.2"
   },
   "peerDependencies": {
     "styled-components": "^5.2.1"
@@ -38,6 +39,7 @@
     "@types/react": "^17.0.3",
     "@types/react-dom": "^17.0.2",
     "@types/styled-components": "^5.1.8",
+    "@types/tinycolor2": "^1.4.2",
     "@typescript-eslint/eslint-plugin": "^4.17.0",
     "@typescript-eslint/parser": "^4.17.0",
     "babel-plugin-styled-components": "^1.12.0",
@@ -52,6 +54,7 @@
     "react-dom": "^17.0.1",
     "react-scripts": "4.0.1",
     "rimraf": "^3.0.2",
+    "storybook-addon-performance": "^0.14.0",
     "styled-components": "^5.2.1",
     "stylelint": "^13.12.0",
     "stylelint-config-recommended": "^4.0.0",