@openfin/ui-library 0.0.39 → 0.1.0

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

@@ -39,12 +39,11 @@ const ButtonElement = styled_components_1.default.button `
   /**
    * 1. Initialize local variables with reasonable defaults
    */
-  --color-background: ${({ theme }) => theme.palette.controlFill};
-  --color-foreground: ${({ theme }) => theme.palette.controlAccent};
+  --color-background: ${({ theme }) => theme.palette.inputBg};
+  --color-foreground: ${({ theme }) => theme.palette.inputColor};
 
   &:disabled {
-    --color-background: ${({ theme }) => theme.palette.controlDisabledFill};
-    --color-foreground: ${({ theme }) => theme.palette.controlDisabledAccent};
+    --color-background: ${({ theme }) => theme.palette.inputDisabled};
   }
 
   /**

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

@@ -76,11 +76,9 @@ exports.variants = {
     [exports.Variant.kind]: {
         [exports.ButtonKind.primary]: styled_components_1.css `
       --color-background: ${({ theme }) => theme.palette.brandPrimary};
-      --color-foreground: ${({ theme }) => theme.palette.controlAccent};
     `,
         [exports.ButtonKind.secondary]: styled_components_1.css `
       --color-background: ${({ theme }) => theme.palette.brandSecondary};
-      --color-foreground: ${({ theme }) => theme.palette.controlAccent};
     `,
         [exports.ButtonKind.textOnly]: styled_components_1.css `
       --color-background: transparent;

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

@@ -1,9 +1,9 @@
 import { FC, InputHTMLAttributes } from 'react';
-import { LabelSideType, KindType } from './toggle.variants';
+export declare type LabelSideType = 'left' | 'right';
 export declare type ToggleProps = InputHTMLAttributes<HTMLInputElement> & {
     label?: string;
     labelSide?: LabelSideType;
-    kind?: KindType;
     type?: 'checkbox' | 'radio';
+    onChange?: Function;
 };
 export declare const Toggle: FC<ToggleProps>;

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

@@ -16,60 +16,43 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Toggle = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const styled_components_1 = __importDefault(require("styled-components"));
-const helpers_1 = require("../../system/ThemeProvider/lib/helpers");
 const Input_1 = require("../../input/Input");
-const toggle_variants_1 = require("./toggle.variants");
+const Box_1 = require("../../layout/Box");
 const Toggle = (_a) => {
-    var { id, label, labelSide = 'right', type = 'checkbox', kind = 'primary' } = _a, inputProps = __rest(_a, ["id", "label", "labelSide", "type", "kind"]);
+    var { id, label, labelSide = 'right', type = 'checkbox', onChange = () => { } } = _a, inputProps = __rest(_a, ["id", "label", "labelSide", "type", "onChange"]);
+    const [isChecked, setIsChecked] = react_1.useState(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({ kind: kind, isChecked: inputProps.checked }, { children: [jsx_runtime_1.jsx(ToggleInput, Object.assign({ id: id, type: type }, inputProps), void 0),
-                    jsx_runtime_1.jsx(ToggleKnob, {}, void 0)] }), void 0)] }), void 0));
+            jsx_runtime_1.jsxs(InputContainer, Object.assign({ isChecked: isChecked }, { children: [jsx_runtime_1.jsx(ToggleInput, Object.assign({ id: id, type: type }, inputProps, { onChange: (event) => {
+                            setIsChecked(event.target.checked);
+                            onChange(event);
+                        } }), void 0),
+                    jsx_runtime_1.jsx(ToggleKnob, { tabIndex: -1 }, void 0)] }), void 0)] }), void 0));
 };
 exports.Toggle = Toggle;
 const ToggleContainer = styled_components_1.default.div `
-  /**
-   * 1. Inject variants
-   */
-  ${helpers_1.getVariantCSS(toggle_variants_1.variants, toggle_variants_1.Variant.labelSide)}
-
-  /**
-  * 2. Component Build
-  */
   display: flex;
   gap: ${({ theme }) => theme.px.xlarge};
+  flex-direction: ${({ labelSide }) => labelSide === 'right' ? 'row' : 'row-reverse'};
   line-height: ${({ theme }) => theme.px.xlarge /* Matches height of Input to vertically center text */};
 `;
-const InputContainer = styled_components_1.default.div `
-  /**
-   * 1. Initialize local variables with reasonable defaults
-   */
-  --color-background: ${({ theme }) => theme.palette.controlAccent};
-  --color-foreground: ${({ theme }) => theme.palette.controlFill};
-  --color-active: ${({ theme }) => theme.palette.controlActiveFill};
-  --color-knob: var(--color-foreground);
+const InputContainer = styled_components_1.default(Box_1.Box) `
   --px-toggle: ${({ theme }) => theme.px.xlarge};
   --px-knob: ${({ theme }) => theme.px.base};
 
-  /**
-   * 2. Inject variants
-   */
-  ${helpers_1.getVariantCSS(toggle_variants_1.variants, toggle_variants_1.Variant.kind)}
-
-  /**
-  * 3. Component Build
-  */
   position: relative;
   height: var(--px-toggle);
   width: calc(2 * var(--px-toggle));
+  border: 1px solid
+    ${({ isChecked, theme }) => isChecked ? theme.palette.brandPrimary : theme.palette.inputBg};
   border-radius: calc(0.5 * var(--px-toggle));
 
-  background: var(--color-background);
+  background: ${({ isChecked, theme }) => isChecked ? theme.palette.brandPrimary : theme.palette.inputBg};
   transition: background var(--global-transition);
 
   &:focus-within {
-    box-shadow: 0 0 0 2px ${({ theme }) => theme._color.black30},
-      0 0 0 2px var(--color-active);
+    border-color: ${({ theme }) => theme.palette.inputFocused};
   }
 `;
 const ToggleKnob = styled_components_1.default.button `
@@ -80,7 +63,7 @@ const ToggleKnob = styled_components_1.default.button `
   left: ${({ theme }) => theme.px.xsmall};
   transform: translateY(-50%);
   border-radius: 50%;
-  background: var(--color-knob);
+  background: ${({ theme }) => theme.palette.inputColor};
   border: none;
   outline: none;
   transition: left var(--global-transition);
@@ -102,7 +85,7 @@ const ToggleInput = styled_components_1.default(Input_1.Input) `
     left: calc(100% - ${({ theme }) => theme.px.large});
   }
   &:disabled + ${ToggleKnob} {
-    opacity: 0.5;
+    background: ${({ theme }) => theme.palette.inputDisabled};
   }
   &:not(:disabled) {
     cursor: pointer;

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

@@ -192,7 +192,7 @@ export declare const Typography: {
  * Design System transition easings because UI motion feels better if everything moves the same way.
  */
 export declare const Transition: {
-    readonly base: "250ms ease-in-out";
+    readonly base: "200ms cubic-bezier(0.16, 1, 0.3, 1)";
     readonly none: "0ms";
 };
 /**

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

@@ -228,7 +228,7 @@ exports.Typography = {
  * Design System transition easings because UI motion feels better if everything moves the same way.
  */
 exports.Transition = {
-    base: '250ms ease-in-out',
+    base: '200ms cubic-bezier(0.16, 1, 0.3, 1)',
     none: '0ms',
 };
 /**

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

@@ -10,20 +10,15 @@ export declare const Palette: {
     readonly background6: "background6";
     readonly brandPrimary: "brandPrimary";
     readonly brandSecondary: "brandSecondary";
-    readonly controlFill: "controlFill";
-    readonly controlAccent: "controlAccent";
-    readonly controlActiveFill: "controlActiveFill";
-    readonly controlDisabledFill: "controlDisabledFill";
-    readonly controlDisabledAccent: "controlDisabledAccent";
     readonly inputBg: "inputBg";
     readonly inputColor: "inputColor";
     readonly inputPlaceholder: "inputPlaceholder";
-    readonly inputDisabledBg: "inputDisabledBg";
+    readonly inputDisabled: "inputDisabled";
+    readonly inputFocused: "inputFocused";
     readonly statusSuccess: "statusSuccess";
     readonly statusWarning: "statusWarning";
     readonly statusCritical: "statusCritical";
-    readonly statusInfo: "statusInfo";
-    readonly statusFocused: "statusFocused";
+    readonly statusActive: "statusActive";
     readonly textDefault: "textDefault";
     readonly textHelp: "textHelp";
     readonly textInactive: "textInactive";

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

@@ -13,20 +13,15 @@ exports.Palette = {
     background6: 'background6',
     brandPrimary: 'brandPrimary',
     brandSecondary: 'brandSecondary',
-    controlFill: 'controlFill',
-    controlAccent: 'controlAccent',
-    controlActiveFill: 'controlActiveFill',
-    controlDisabledFill: 'controlDisabledFill',
-    controlDisabledAccent: 'controlDisabledAccent',
     inputBg: 'inputBg',
     inputColor: 'inputColor',
     inputPlaceholder: 'inputPlaceholder',
-    inputDisabledBg: 'inputDisabledBg',
+    inputDisabled: 'inputDisabled',
+    inputFocused: 'inputFocused',
     statusSuccess: 'statusSuccess',
     statusWarning: 'statusWarning',
     statusCritical: 'statusCritical',
-    statusInfo: 'statusInfo',
-    statusFocused: 'statusFocused',
+    statusActive: 'statusActive',
     textDefault: 'textDefault',
     textHelp: 'textHelp',
     textInactive: 'textInactive',

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

@@ -20,13 +20,11 @@ const base = {
 const sharedPalette = {
     // Brand
     [palette_1.Palette.brandPrimary]: constants_1.Color.openFin,
-    [palette_1.Palette.brandSecondary]: constants_1.Color.blue,
     // Status
     [palette_1.Palette.statusSuccess]: constants_1.Color.green,
     [palette_1.Palette.statusWarning]: constants_1.Color.orange,
     [palette_1.Palette.statusCritical]: constants_1.Color.red,
-    [palette_1.Palette.statusInfo]: constants_1.Color.blue,
-    [palette_1.Palette.statusFocused]: constants_1.Color.neutralGray,
+    [palette_1.Palette.statusActive]: constants_1.Color.blue,
 };
 /**
  * Light Theme
@@ -34,10 +32,10 @@ const sharedPalette = {
 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, 
-        // Controls
-        [palette_1.Palette.controlFill]: constants_1.Color.openFin, [palette_1.Palette.controlAccent]: constants_1.Color.white, [palette_1.Palette.controlActiveFill]: constants_1.Color.openFinDarker, [palette_1.Palette.controlDisabledFill]: constants_1.Color.lightGray4, [palette_1.Palette.controlDisabledAccent]: constants_1.Color.lightGray3, 
+        // 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.inputDisabledBg]: constants_1.Color.neutralGray, 
+        [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 }) });
 /**
@@ -46,9 +44,9 @@ exports.OpenFinLightTheme = Object.assign(Object.assign({}, base), { palette: Ob
 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, 
-        // Controls
-        [palette_1.Palette.controlFill]: constants_1.Color.openFin, [palette_1.Palette.controlAccent]: constants_1.Color.white, [palette_1.Palette.controlActiveFill]: constants_1.Color.openFinLighter, [palette_1.Palette.controlDisabledFill]: constants_1.Color.darkGray1, [palette_1.Palette.controlDisabledAccent]: constants_1.Color.neutralGray, 
+        // 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.inputDisabledBg]: constants_1.Color.neutralGray, 
+        [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.0.39",
+  "version": "0.1.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [

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

@@ -1,24 +0,0 @@
-export declare const Variant: {
-    readonly kind: "kind";
-    readonly labelSide: "labelSide";
-};
-export declare const Kind: {
-    readonly primary: "primary";
-    readonly secondary: "secondary";
-};
-export declare type KindType = keyof typeof Kind;
-export declare const LabelSide: {
-    readonly left: "left";
-    readonly right: "right";
-};
-export declare type LabelSideType = keyof typeof LabelSide;
-export declare const variants: {
-    readonly kind: {
-        readonly primary: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
-        readonly secondary: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
-    };
-    readonly labelSide: {
-        readonly left: import("styled-components").FlattenSimpleInterpolation;
-        readonly right: import("styled-components").FlattenSimpleInterpolation;
-    };
-};

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

@@ -1,50 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.variants = exports.LabelSide = exports.Kind = exports.Variant = void 0;
-const styled_components_1 = require("styled-components");
-exports.Variant = {
-    kind: 'kind',
-    labelSide: 'labelSide',
-};
-exports.Kind = {
-    primary: 'primary',
-    secondary: 'secondary',
-};
-exports.LabelSide = {
-    left: 'left',
-    right: 'right',
-};
-exports.variants = {
-    [exports.Variant.kind]: {
-        [exports.Kind.primary]: styled_components_1.css `
-      --color-background: ${({ theme }) => theme.palette.controlFill};
-      --color-foreground: ${({ theme }) => theme.palette.controlAccent};
-      --color-active: ${({ theme }) => theme.palette.controlActiveFill};
-      --color-knob: ${({ theme }) => theme.palette.controlAccent};
-
-      &:disabled {
-        --color-background: ${({ theme }) => theme.palette.controlDisabledFill};
-        --color-foreground: ${({ theme }) => theme.palette.controlDisabledAccent};
-      }
-    `,
-        [exports.Kind.secondary]: styled_components_1.css `
-      --color-background: ${({ theme }) => theme.palette.brandSecondary};
-      --color-foreground: ${({ theme }) => theme.palette.controlAccent};
-      --color-active: ${({ theme }) => theme.palette.controlActiveFill};
-      --color-knob: ${({ theme }) => theme.palette.controlAccent};
-
-      &:disabled {
-        --color-background: ${({ theme }) => theme.palette.controlDisabledFill};
-        --color-foreground: ${({ theme }) => theme.palette.controlDisabledAccent};
-      }
-    `,
-    },
-    [exports.Variant.labelSide]: {
-        [exports.LabelSide.left]: styled_components_1.css `
-      flex-direction: row;
-    `,
-        [exports.LabelSide.right]: styled_components_1.css `
-      flex-direction: row-reverse;
-    `,
-    },
-};