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

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>;
 /**

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

@@ -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}`};
 `;
 /**

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/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 brand 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,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createTheme = void 0;
+const colors_1 = require("./colors");
+const config_1 = require("../lib/config");
+const constants_1 = require("../lib/constants");
+const palette_1 = require("../lib/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,
+};
+/**
+ * Create a theme by accepting an incomplete theme object and deriving the remaining colors based on brand colors.
+ *
+ * @param {Partial<PaletteType>} paletteConfig The provided theme keys, whether we or the end user defined them.
+ * @returns {DefaultTheme}
+ */
+const createTheme = (paletteConfig) => {
+    const brandPrimary = paletteConfig.brandPrimary;
+    const brandSecondary = paletteConfig.brandSecondary;
+    return Object.assign(Object.assign({}, base), { palette: Object.assign(Object.assign({}, paletteConfig), { [palette_1.Palette.brandPrimaryActive]: colors_1.darkenColor(brandPrimary, LIGHTNESS_PERCENTAGE_ACTIVE), [palette_1.Palette.brandPrimaryHover]: colors_1.lightenColor(brandPrimary, LIGHTNESS_PERCENTAGE_HOVER), [palette_1.Palette.brandPrimaryFocused]: colors_1.lightenColor(brandPrimary, LIGHTNESS_PERCENTAGE_FOCUSED), [palette_1.Palette.brandSecondaryActive]: colors_1.darkenColor(brandSecondary, LIGHTNESS_PERCENTAGE_ACTIVE), [palette_1.Palette.brandSecondaryHover]: colors_1.lightenColor(brandSecondary, LIGHTNESS_PERCENTAGE_HOVER), [palette_1.Palette.brandSecondaryFocused]: colors_1.lightenColor(brandSecondary, LIGHTNESS_PERCENTAGE_FOCUSED) }) });
+};
+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.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 }));

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.1617026984",
   "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",