@openfin/ui-library 0.1.15 → 0.1.16-alpha.1621620164

package/README.md

@@ -12,7 +12,7 @@
 
 **TL;DR** – Use this library and write less CSS.
 
-This is an opinionated React component library, which aims to provide the basic building blocks that you can use in any OpenFin environment. It was built w/ our [Spatial Design System](https://www.figma.com/file/0Y3pKZj0tJWuleF12h5Sua/Spatial---Components) in mind, so it should always reflect OpenFin's latest branding and designs.
+This is an opinionated React component library, built on top of [styled-components](https://styled-components.com/docs), which aims to provide the basic building blocks that you can use in any OpenFin environment. It was built w/ our [Spatial Design System](https://www.figma.com/file/0Y3pKZj0tJWuleF12h5Sua/Spatial---Components) in mind, so it should always reflect OpenFin's latest branding and designs.
 
 ## Installation
 
@@ -23,9 +23,11 @@ This is an opinionated React component library, which aims to provide the basic
 
 ### 2. Install the package
 
+…along with `styled-components`.
+
 ```bash
 # Install the latest version
-$ yarn add @openfin/ui-library
+$ yarn add @openfin/ui-library styled-components
 ```
 
 ```bash

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

@@ -39,7 +39,7 @@ const ButtonElement = styled_components_1.default.button `
   /* Default values that get overridden by variants */
   background: ${({ theme }) => theme.palette.inputBg};
   border: 1px solid ${({ theme }) => theme.palette.inputBg};
-  color: ${({ theme }) => theme.palette.inputColor};
+  color: ${({ theme }) => theme.palette.brandPrimaryText};
 
   /* Inject variants */
   ${helpers_1.getVariantCSS(button_variants_1.variants, button_variants_1.Variant.size)}
@@ -75,9 +75,9 @@ const ButtonLabel = styled_components_1.default(Box_1.Box) `
 /**
  * ## Button Variants
  */
-const ButtonPrimary = (props) => (jsx_runtime_1.jsx(exports.Button, Object.assign({}, props, { kind: "primary" }), void 0));
+const ButtonPrimary = (props) => jsx_runtime_1.jsx(exports.Button, Object.assign({}, props, { kind: "primary" }), void 0);
 exports.ButtonPrimary = ButtonPrimary;
-const ButtonSecondary = (props) => (jsx_runtime_1.jsx(exports.Button, Object.assign({}, props, { kind: "secondary" }), void 0));
+const ButtonSecondary = (props) => jsx_runtime_1.jsx(exports.Button, Object.assign({}, props, { kind: "secondary" }), void 0);
 exports.ButtonSecondary = ButtonSecondary;
-const ButtonTextOnly = (props) => (jsx_runtime_1.jsx(exports.Button, Object.assign({}, props, { kind: "textOnly" }), void 0));
+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

@@ -93,6 +93,7 @@ exports.variants = {
         [exports.ButtonKind.secondary]: styled_components_1.css `
       background: ${({ theme }) => theme.palette.brandSecondary};
       border-color: ${({ theme }) => theme.palette.brandSecondary};
+      color: ${({ theme }) => theme.palette.brandSecondaryText};
 
       &:hover {
         background: ${({ theme }) => theme.palette.brandSecondaryHover};

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

@@ -31,13 +31,13 @@ const Toggle = (_a) => {
                             setIsChecked(event.target.checked);
                             onChange === null || onChange === void 0 ? void 0 : onChange(event);
                         } }), void 0),
-                    jsx_runtime_1.jsx(ToggleKnob, { tabIndex: -1 }, void 0)] }), void 0)] }), void 0));
+                    jsx_runtime_1.jsx(ToggleKnob, { tabIndex: -1, isChecked: isChecked }, void 0)] }), void 0)] }), void 0));
 };
 exports.Toggle = Toggle;
 const ToggleContainer = styled_components_1.default.div `
   display: flex;
   gap: ${({ theme }) => theme.px.xlarge};
-  flex-direction: ${({ labelSide }) => labelSide === 'right' ? 'row' : 'row-reverse'};
+  flex-direction: ${({ labelSide }) => (labelSide === 'left' ? 'row' : 'row-reverse')};
   line-height: ${({ theme }) => theme.px.xlarge /* Matches height of Input to vertically center text */};
 `;
 const InputContainer = styled_components_1.default(Box_1.Box) `
@@ -48,7 +48,7 @@ const InputContainer = styled_components_1.default(Box_1.Box) `
   height: var(--px-toggle);
   width: calc(2 * var(--px-toggle));
   border: 1px solid
-    ${({ isChecked, theme }) => isChecked ? theme.palette.brandPrimary : theme.palette.inputBg};
+    ${({ isChecked, theme }) => (isChecked ? theme.palette.brandPrimary : theme.palette.inputBg)};
   border-radius: calc(0.5 * var(--px-toggle));
 
   background: ${({ isChecked, theme }) => isChecked ? theme.palette.brandPrimary : theme.palette.inputBg};
@@ -67,10 +67,10 @@ const ToggleKnob = styled_components_1.default.button `
   left: ${({ theme }) => theme.px.xsmall};
   transform: translateY(-50%);
   border-radius: 50%;
-  background: ${({ theme }) => theme.palette.inputColor};
+  background: ${({ isChecked, theme }) => isChecked ? theme.palette.brandPrimaryText : theme.palette.inputColor};
   border: none;
   outline: none;
-  transition: left var(--openfin-ui-globalTransition);
+  transition: left var(--openfin-ui-globalTransition), background var(--openfin-ui-globalTransition);
   pointer-events: none; /* Allow pass-thru for native input */
 `;
 const ToggleInput = styled_components_1.default(RawInput_1.RawInput) `

package/dist/components/input/BaseInput/baseInput.d.ts

@@ -4,10 +4,14 @@ export declare type BaseInputProps = InputHTMLAttributes<HTMLInputElement> & {
     message?: string;
     label?: string;
     renderInput?: Function;
+    isFullWidth?: true;
 } & WithStatusProps;
 export declare const BaseInput: import("react").ForwardRefExoticComponent<InputHTMLAttributes<HTMLInputElement> & {
     message?: string | undefined;
     label?: string | undefined;
     renderInput?: Function | undefined;
+    isFullWidth?: true | undefined;
 } & WithStatusProps & import("react").RefAttributes<HTMLInputElement>>;
-export declare const StyledInputField: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, InputHTMLAttributes<HTMLInputElement> & WithStatusProps, never>;
+export declare const StyledInputField: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, InputHTMLAttributes<HTMLInputElement> & WithStatusProps & {
+    isFullWidth?: true | undefined;
+}, never>;

package/dist/components/input/BaseInput/baseInput.js

@@ -49,6 +49,7 @@ exports.StyledInputField = styled_components_1.default.input `
   font-size: ${({ theme }) => theme.fontSize.base};
   padding: ${({ theme }) => `${theme.px.small} ${theme.px.base}`};
   transition: border-color var(--openfin-ui-globalTransition);
+  width: ${({ isFullWidth }) => isFullWidth && '100%'};
 
   &:focus {
     outline: 0;

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

@@ -5,4 +5,5 @@ export declare const TextInput: import("react").ForwardRefExoticComponent<import
     message?: string | undefined;
     label?: string | undefined;
     renderInput?: Function | undefined;
+    isFullWidth?: true | undefined;
 } & import("../../system/HOC").WithStatusProps & import("react").RefAttributes<HTMLInputElement>>;

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

@@ -1,3 +1,4 @@
 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;
+export declare const getMostReadable: (baseColor: Color, colors: Color[]) => string;

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

@@ -3,7 +3,7 @@ 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;
+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;
@@ -15,3 +15,7 @@ const adjustColor = (color, func, amount) => {
     }
     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/constants.d.ts

@@ -9,17 +9,17 @@
  */
 export declare const Color: {
     readonly white: "#FFFFFF";
-    readonly lightGray1: "#F3F5F8";
-    readonly lightGray2: "#ECEEF1";
-    readonly lightGray3: "#DDDFE4";
-    readonly lightGray4: "#C9CBD2";
+    readonly lightGray1: "#FAFBFE";
+    readonly lightGray2: "#F3F5F8";
+    readonly lightGray3: "#ECEEF1";
+    readonly lightGray4: "#DDDFE4";
+    readonly lightGray5: "#C9CBD2";
     readonly neutralGray: "#7D808A";
     readonly darkGray1: "#53565F";
     readonly darkGray2: "#383A40";
-    readonly darkGray3: "#2F3136";
-    readonly darkGray4: "#24262B";
-    readonly darkGray5: "#1E1F23";
-    readonly darkGray6: "#111214";
+    readonly darkGray3: "#24262B";
+    readonly darkGray4: "#1E1F23";
+    readonly darkGray5: "#111214";
     readonly openFinDarkest: "#3D39CD";
     readonly openFinDarker: "#4642E0";
     readonly openFin: "#504CFF";

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

@@ -33,17 +33,17 @@ const createFontFaceCss_1 = require("./createFontFaceCss");
  */
 exports.Color = {
     white: '#FFFFFF',
-    lightGray1: '#F3F5F8',
-    lightGray2: '#ECEEF1',
-    lightGray3: '#DDDFE4',
-    lightGray4: '#C9CBD2',
+    lightGray1: '#FAFBFE',
+    lightGray2: '#F3F5F8',
+    lightGray3: '#ECEEF1',
+    lightGray4: '#DDDFE4',
+    lightGray5: '#C9CBD2',
     neutralGray: '#7D808A',
     darkGray1: '#53565F',
     darkGray2: '#383A40',
-    darkGray3: '#2F3136',
-    darkGray4: '#24262B',
-    darkGray5: '#1E1F23',
-    darkGray6: '#111214',
+    darkGray3: '#24262B',
+    darkGray4: '#1E1F23',
+    darkGray5: '#111214',
     openFinDarkest: '#3D39CD',
     openFinDarker: '#4642E0',
     openFin: '#504CFF',

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

@@ -3,7 +3,7 @@ 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.
+ * @param {Partial<PaletteType>} palettePartial The provided theme keys, whether we or the end user defined them.
  * @returns {DefaultTheme}
  */
-export declare const createTheme: (paletteConfig: Partial<PaletteType>) => DefaultTheme;
+export declare const createTheme: (palettePartial: Partial<PaletteType>) => DefaultTheme;

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

@@ -24,18 +24,20 @@ const base = {
 /**
  * Created Active, Hover, and Focused Colors derived from base color
  */
-const createDerivedButtonPalette = (key, baseColor) => ({
+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>} paletteConfig The provided theme keys, whether we or the end user defined them.
+ * @param {Partial<PaletteType>} palettePartial 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)) });
+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/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" | "brandPrimaryActive" | "brandPrimaryHover" | "brandPrimaryFocused" | "brandSecondaryActive" | "brandSecondaryHover" | "brandSecondaryFocused" | "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" | "brandPrimaryText" | "brandSecondaryActive" | "brandSecondaryHover" | "brandSecondaryFocused" | "brandSecondaryText" | "inputBg" | "inputColor" | "inputPlaceholder" | "inputDisabled" | "inputFocused" | "statusSuccess" | "statusWarning" | "statusCritical" | "statusActive" | "textDefault" | "textHelp" | "textInactive" | undefined) => string;

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

@@ -13,9 +13,11 @@ export declare const Palette: {
     readonly brandPrimaryActive: "brandPrimaryActive";
     readonly brandPrimaryHover: "brandPrimaryHover";
     readonly brandPrimaryFocused: "brandPrimaryFocused";
+    readonly brandPrimaryText: "brandPrimaryText";
     readonly brandSecondaryActive: "brandSecondaryActive";
     readonly brandSecondaryHover: "brandSecondaryHover";
     readonly brandSecondaryFocused: "brandSecondaryFocused";
+    readonly brandSecondaryText: "brandSecondaryText";
     readonly inputBg: "inputBg";
     readonly inputColor: "inputColor";
     readonly inputPlaceholder: "inputPlaceholder";

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

@@ -17,9 +17,11 @@ exports.Palette = {
     brandPrimaryActive: 'brandPrimaryActive',
     brandPrimaryHover: 'brandPrimaryHover',
     brandPrimaryFocused: 'brandPrimaryFocused',
+    brandPrimaryText: 'brandPrimaryText',
     brandSecondaryActive: 'brandSecondaryActive',
     brandSecondaryHover: 'brandSecondaryHover',
     brandSecondaryFocused: 'brandSecondaryFocused',
+    brandSecondaryText: 'brandSecondaryText',
     // --END
     inputBg: 'inputBg',
     inputColor: 'inputColor',

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

@@ -18,21 +18,21 @@ const sharedPalette = {
  */
 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, 
+    [palette_1.Palette.background1]: constants_1.Color.white, [palette_1.Palette.background2]: constants_1.Color.lightGray1, [palette_1.Palette.background3]: constants_1.Color.lightGray2, [palette_1.Palette.background4]: constants_1.Color.lightGray3, [palette_1.Palette.background5]: constants_1.Color.lightGray4, [palette_1.Palette.background6]: constants_1.Color.lightGray5, 
     // Brand
-    [palette_1.Palette.brandSecondary]: constants_1.Color.darkGray6, 
+    [palette_1.Palette.brandSecondary]: constants_1.Color.darkGray5, 
     // 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, 
+    [palette_1.Palette.inputBg]: constants_1.Color.lightGray3, [palette_1.Palette.inputColor]: constants_1.Color.darkGray5, [palette_1.Palette.inputPlaceholder]: constants_1.Color.darkGray2, [palette_1.Palette.inputDisabled]: constants_1.Color.neutralGray, [palette_1.Palette.inputFocused]: constants_1.Color.lightGray5, 
     // 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 }));
+    [palette_1.Palette.textDefault]: constants_1.Color.darkGray5, [palette_1.Palette.textHelp]: constants_1.Color.darkGray3, [palette_1.Palette.textInactive]: constants_1.Color.neutralGray }));
 /**
  * Dark Theme
  */
 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, 
+    [palette_1.Palette.background1]: constants_1.Color.darkGray5, [palette_1.Palette.background2]: constants_1.Color.darkGray4, [palette_1.Palette.background3]: constants_1.Color.darkGray3, [palette_1.Palette.background4]: constants_1.Color.darkGray2, [palette_1.Palette.background5]: constants_1.Color.darkGray1, [palette_1.Palette.background6]: constants_1.Color.neutralGray, 
     // Brand
-    [palette_1.Palette.brandSecondary]: constants_1.Color.darkGray1, 
+    [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

package/dist/hooks/useTheme.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useTheme = void 0;
 const themes_1 = require("../components/system/ThemeProvider/themes");
 const useColorScheme_1 = require("../hooks/useColorScheme");
+const ThemeProvider_1 = require("../components/system/ThemeProvider");
 const Themes = {
     [useColorScheme_1.ColorScheme.dark]: themes_1.OpenFinDarkTheme,
     [useColorScheme_1.ColorScheme.light]: themes_1.OpenFinLightTheme,
@@ -22,7 +23,8 @@ const useTheme = ({ themes, scheme, config, }) => {
         ? // Built-in Theme
             Themes[currentScheme]
         : // Built-in Theme with User-provided Palette
-         Object.assign(Object.assign({}, Themes[currentScheme]), { palette: Object.assign(Object.assign({}, Themes[currentScheme].palette), themes[currentScheme].palette) });
+            // @todo – This is a potential performance bottleneck
+            ThemeProvider_1.createTheme(Object.assign(Object.assign({}, Themes[currentScheme].palette), themes[currentScheme].palette));
     // 3. Merge any User-provided Config
     if (config) {
         currentTheme._config = Object.assign(Object.assign({}, currentTheme._config), config);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@openfin/ui-library",
   "description": "OpenFin UI Component Library",
-  "version": "0.1.15",
+  "version": "0.1.16-alpha.1621620164",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "repository": "github:openfin/ui-library",