@openfin/ui-library 0.0.38 → 0.0.40

package/README.md

@@ -116,7 +116,7 @@ touch .git/hooks/pre-push &&
 
 Pull requests are a great way to express an idea or need, if it's easier to "show" instead of "tell", go for it, propose a change!
 
-Also keep in mind, UI Library is a home of centralized common elements, **used by several products**. It's reasonable to expect PRs may spark conversations about the **essence of the change** and it's benefits and impact across the application ecosystem.
+Also keep in mind, UI Library is a home of centralized common components, **used by several products**. It's reasonable to expect PRs may spark conversations about the **essence of the change** and it's benefits and impact across the application ecosystem.
 
 Meaning: While there are no hard rules about what belongs in _our_ library, if a change is too opinionated or too specialized, it may make sense to leave it out. **A library that does less, is a lot easier to know and work with**.
 
@@ -170,12 +170,13 @@ This triggers a Github Action to automatically build the latest version of the `
 
 ## Components
 
-### Elements
+### Controls
 
-- [Button](./src/components/elements/Button)
-- [Icon](./src/components/elements/Icon)
-- [Input](./src/components/elements/Input)
-- [Toggle](./src/components/elements/Toggle)
+- [Button](./src/components/controls/Button)
+- [Icon](./src/components/controls/Icon)
+- [Input](./src/components/input/Input)
+- [Toggle](./src/components/controls/Toggle)
+- [Badge](./src/components/controls/Badge)
 
 ### Layout
 

package/dist/components/{elements → controls}/Button/button.js

@@ -39,8 +39,12 @@ const ButtonElement = styled_components_1.default.button `
   /**
    * 1. Initialize local variables with reasonable defaults
    */
-  --color-background: ${({ theme }) => theme.palette.primaryBg};
-  --color-foreground: ${({ theme }) => theme.palette.primaryColor};
+  --color-background: ${({ theme }) => theme.palette.inputBg};
+  --color-foreground: ${({ theme }) => theme.palette.inputColor};
+
+  &:disabled {
+    --color-background: ${({ theme }) => theme.palette.inputDisabled};
+  }
 
   /**
    * 2. Inject variants -- ? What are Variants
@@ -87,5 +91,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: "tertiary" }), void 0));
+const ButtonTertiary = (props) => (jsx_runtime_1.jsx(exports.Button, Object.assign({}, props, { kind: "textOnly" }), void 0));
 exports.ButtonTertiary = ButtonTertiary;

package/dist/components/{elements → controls}/Button/button.variants.d.ts

@@ -14,7 +14,7 @@ export declare const Variant: {
 export declare const ButtonKind: {
     readonly primary: "primary";
     readonly secondary: "secondary";
-    readonly tertiary: "tertiary";
+    readonly textOnly: "textOnly";
 };
 export declare type ButtonKindType = keyof typeof ButtonKind;
 /**
@@ -59,6 +59,6 @@ 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 tertiary: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
+        readonly textOnly: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
     };
 };

package/dist/components/{elements → controls}/Button/button.variants.js

@@ -18,7 +18,7 @@ exports.Variant = {
 exports.ButtonKind = {
     primary: 'primary',
     secondary: 'secondary',
-    tertiary: 'tertiary',
+    textOnly: 'textOnly',
 };
 /**
  * Button Size
@@ -75,31 +75,14 @@ exports.variants = {
     },
     [exports.Variant.kind]: {
         [exports.ButtonKind.primary]: styled_components_1.css `
-      --color-background: ${({ theme }) => theme.palette.primaryBg};
-      --color-foreground: ${({ theme }) => theme.palette.primaryColor};
-
-      &:disabled {
-        --color-background: ${({ theme }) => theme.palette.primaryDisabledBg};
-        --color-foreground: ${({ theme }) => theme.palette.primaryDisabledColor};
-      }
+      --color-background: ${({ theme }) => theme.palette.brandPrimary};
     `,
         [exports.ButtonKind.secondary]: styled_components_1.css `
-      --color-background: ${({ theme }) => theme.palette.secondaryBg};
-      --color-foreground: ${({ theme }) => theme.palette.secondaryColor};
-
-      &:disabled {
-        --color-background: ${({ theme }) => theme.palette.secondaryDisabledBg};
-        --color-foreground: ${({ theme }) => theme.palette.secondaryDisabledColor};
-      }
+      --color-background: ${({ theme }) => theme.palette.brandSecondary};
     `,
-        [exports.ButtonKind.tertiary]: styled_components_1.css `
-      --color-background: ${({ theme }) => theme.palette.tertiaryBg};
-      --color-foreground: ${({ theme }) => theme.palette.tertiaryColor};
-
-      &:disabled {
-        --color-background: ${({ theme }) => theme.palette.tertiaryDisabledBg};
-        --color-foreground: ${({ theme }) => theme.palette.tertiaryDisabledColor};
-      }
+        [exports.ButtonKind.textOnly]: styled_components_1.css `
+      --color-background: transparent;
+      --color-foreground: ${({ theme }) => theme.palette.textDefault};
     `,
     },
 };

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

@@ -0,0 +1,9 @@
+import { 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;
+};
+export declare const Toggle: FC<ToggleProps>;

package/dist/components/{elements → 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");
-const toggle_variants_1 = require("./toggle.variants");
+const Input_1 = require("../../input/Input");
+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.primaryBg};
-  --color-foreground: ${({ theme }) => theme.palette.primaryColor};
-  --color-active: ${({ theme }) => theme.palette.primaryActive};
-  --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/elements/Badge/badge.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Number displayed in the badge.
+     */
+    count: number;
+    /**
+     * If `count` is greater than `max` it will be clamped to `max`.
+     * When clamped it will display `{max}+`.
+     *
+     * @example
+     * <Badge count={200} max={99} />
+     * // outputs `99+`
+     */
+    max?: number;
+}
+export declare const Badge: React.FC<BadgeProps>;

package/dist/components/elements/Badge/badge.js

@@ -0,0 +1,41 @@
+"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.Badge = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styled_components_1 = __importDefault(require("styled-components"));
+const Box_1 = require("../../layout/Box");
+const Badge = (_a) => {
+    var { count = 0, max } = _a, rest = __rest(_a, ["count", "max"]);
+    let value = count.toString();
+    if (max && count > max) {
+        value = `${max}+`;
+    }
+    return jsx_runtime_1.jsx(BadgeElement, Object.assign({}, rest, { children: value }), void 0);
+};
+exports.Badge = Badge;
+const BadgeElement = styled_components_1.default(Box_1.Box) `
+  background: ${({ theme }) => theme.palette.statusCritical};
+  border-radius: ${({ theme }) => theme.radius.pill};
+  color: ${({ theme }) => theme._color.white};
+  font-size: ${({ theme }) => theme.fontSize.small};
+  min-width: ${({ theme }) => theme.px.xlarge};
+  padding: 2px 6px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
+`;

package/dist/components/elements/Badge/index.d.ts

@@ -0,0 +1 @@
+export * from './badge';

package/dist/components/elements/Badge/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("./badge"), exports);

package/dist/components/{elements → input}/Input/input.d.ts

@@ -1,8 +1,6 @@
 import { InputHTMLAttributes } from 'react';
-export declare type InputProps = InputHTMLAttributes<HTMLInputElement> & {
-    className?: string;
-};
+export declare type InputProps = InputHTMLAttributes<HTMLInputElement>;
 /**
  * Unstyled Input extended by other components
  */
-export declare const Input: import("styled-components").StyledComponent<({ className, ...props }: InputProps) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;
+export declare const Input: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, {}, never>;

package/dist/components/input/Input/input.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.Input = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+/**
+ * Unstyled Input extended by other components
+ */
+exports.Input = styled_components_1.default.input ``;
+exports.Input.displayName = 'Input';

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

@@ -0,0 +1 @@
+export * from './textInput';

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.d.ts

@@ -0,0 +1,3 @@
+import { FC, InputHTMLAttributes } from 'react';
+export declare type TextInputProps = InputHTMLAttributes<HTMLInputElement>;
+export declare const TextInput: import("styled-components").StyledComponent<FC<TextInputProps>, import("styled-components").DefaultTheme, {}, never>;

package/dist/components/{elements/Input/input.js → input/TextInput/textInput.js}

@@ -14,13 +14,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Input = void 0;
+exports.TextInput = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const styled_components_1 = __importDefault(require("styled-components"));
-/**
- * Unstyled Input extended by other components
- */
-exports.Input = styled_components_1.default((_a) => {
-    var { className } = _a, props = __rest(_a, ["className"]);
-    return jsx_runtime_1.jsx("input", Object.assign({ className: className }, props), void 0);
-}) ``;
+const Input_1 = require("../Input");
+const TextInputInner = (_a) => {
+    var { className } = _a, rest = __rest(_a, ["className"]);
+    return (jsx_runtime_1.jsx(Input_1.Input, Object.assign({ className: className, type: "text" }, rest), void 0));
+};
+exports.TextInput = styled_components_1.default(TextInputInner) `
+  background: ${({ theme }) => theme.palette.inputBg};
+  border: 1px solid ${({ theme }) => theme.palette.inputBg};
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+  color: ${({ theme }) => theme.palette.inputColor};
+`;

package/dist/components/layout/Box/box.d.ts

@@ -13,7 +13,7 @@ export declare type BoxProps = HTMLAttributes<HTMLDivElement> & {
     flexGrow?: 1 | 0;
     flexShrink?: 1 | 0;
     order?: number;
-    surfaceLevel?: BoxTypes.SurfaceLevel;
+    background?: BoxTypes.BackgroundLevel;
     padding?: UnitPxType;
 };
 /**
@@ -24,4 +24,18 @@ export declare type BoxProps = HTMLAttributes<HTMLDivElement> & {
  * - Box can be both the flex parent and the flex child.
  * - None of the child properties should be applied unless specified.
  */
-export declare const Box: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, BoxProps, never>;
+export declare const Box: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, HTMLAttributes<HTMLDivElement> & {
+    alignItems?: BoxTypes.AlignItems | undefined;
+    display?: BoxTypes.Display | undefined;
+    flexDirection?: BoxTypes.FlexDirection | undefined;
+    flexWrap?: BoxTypes.FlexWrap | undefined;
+    justifyContent?: BoxTypes.JustifyContent | undefined;
+    gap?: "xsmall" | "small" | "base" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "xxxxlarge" | undefined;
+    alignSelf?: BoxTypes.AlignSelf | undefined;
+    flexBasis?: string | undefined;
+    flexGrow?: 0 | 1 | undefined;
+    flexShrink?: 0 | 1 | undefined;
+    order?: number | undefined;
+    background?: BoxTypes.BackgroundLevel | undefined;
+    padding?: "xsmall" | "small" | "base" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "xxxxlarge" | undefined;
+}, never>;

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

@@ -7,15 +7,16 @@ exports.Box = void 0;
 const styled_components_1 = __importDefault(require("styled-components"));
 const palette_1 = require("../../system/ThemeProvider/lib/palette");
 /**
- * ## SurfaceLevels
- *
- * Maps “surface” levels to palette colors.
- * Passing a surface level will give the box a background color associated with a z-index position in our design system.
+ * ## BackgroundLevels
+ * Maps background levels to palette colors.
  */
-const SurfaceLevels = {
-    1: palette_1.Palette.surfaceBottom,
-    2: palette_1.Palette.surfaceMiddle,
-    3: palette_1.Palette.surfaceTop,
+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
@@ -38,5 +39,6 @@ exports.Box = styled_components_1.default.div `
   flex-shrink: ${({ flexShrink }) => flexShrink};
   order: ${({ order }) => order};
   padding: ${({ theme, padding }) => padding && theme.px[padding]};
-  background: ${({ theme, surfaceLevel }) => surfaceLevel && theme.palette[SurfaceLevels[surfaceLevel]]};
+  background: ${({ theme, background }) => background && theme.palette[BackgroundLevels[background]]};
 `;
+exports.Box.displayName = 'Box';

package/dist/components/layout/Box/types.d.ts

@@ -4,4 +4,4 @@ export declare type FlexDirection = 'row' | 'row-reverse' | 'column' | 'column-r
 export declare type FlexWrap = 'nowrap' | 'wrap' | 'wrap-reverse';
 export declare type JustifyContent = 'stretch' | 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly' | 'start' | 'end' | 'left' | 'right';
 export declare type AlignSelf = 'auto' | 'flex-start' | ' flex-end' | 'center' | 'baseline' | 'stretch';
-export declare type SurfaceLevel = 1 | 2 | 3;
+export declare type BackgroundLevel = 1 | 2 | 3 | 4 | 5 | 6;

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

@@ -7,9 +7,9 @@ const helpers_1 = require("../ThemeProvider/lib/helpers");
 exports.GlobalStyles = styled_components_1.createGlobalStyle `
   /** -> Define Global CSS Vars */
   :root {
-    --global-background: ${({ theme }) => theme.palette.surfaceBottom};
+    --global-background: ${({ theme }) => theme.palette.background1};
     --global-text: ${({ theme }) => theme.palette.textDefault};
-    --global-text-placeholder: ${({ theme }) => theme.palette.textPlaceholder};
+    --global-text-placeholder: ${({ theme }) => theme.palette.inputPlaceholder};
     --global-typography: ${constants_1.Typography.base};
     --global-transition: ${({ theme }) => theme.transition.base};
   }

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 /**
  * Color --
  * Color maps names to values.
@@ -26,17 +25,17 @@ export declare const Color: {
     readonly openFinLight: "#5254FB";
     readonly openFinLighter: "#5C5EFE";
     readonly openFinLightest: "#6864FF";
-    readonly active: "#189FFB";
-    readonly success: "#35C759";
-    readonly warning: "#F48F00";
-    readonly error: "#C93400";
-    readonly accent1: "#8C61FF";
-    readonly accent2: "#36C3FE";
-    readonly accent3: "#00CC88";
-    readonly accent4: "#FFEB00";
-    readonly accent5: "#FF8C4C";
-    readonly accent6: "#FF5E60";
-    readonly accent7: "#FF8FB8";
+    readonly blue: "#189FFB";
+    readonly green: "#35C759";
+    readonly orange: "#F48F00";
+    readonly red: "#C93400";
+    readonly purple: "#8C61FF";
+    readonly lightblue: "#36C3FE";
+    readonly aqua: "#00CC88";
+    readonly yellow: "#FFEB00";
+    readonly salmon: "#FF8C4C";
+    readonly pink: "#FF5E60";
+    readonly lightpink: "#FF8FB8";
     readonly white00: "rgba(255,255,255,0.0)";
     readonly white10: "rgba(255,255,255,0.1)";
     readonly white20: "rgba(255,255,255,0.2)";
@@ -193,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

@@ -49,17 +49,17 @@ exports.Color = {
     openFinLight: '#5254FB',
     openFinLighter: '#5C5EFE',
     openFinLightest: '#6864FF',
-    active: '#189FFB',
-    success: '#35C759',
-    warning: '#F48F00',
-    error: '#C93400',
-    accent1: '#8C61FF',
-    accent2: '#36C3FE',
-    accent3: '#00CC88',
-    accent4: '#FFEB00',
-    accent5: '#FF8C4C',
-    accent6: '#FF5E60',
-    accent7: '#FF8FB8',
+    blue: '#189FFB',
+    green: '#35C759',
+    orange: '#F48F00',
+    red: '#C93400',
+    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)',
@@ -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

@@ -2,27 +2,24 @@
  * Theme Palette -- Canonical list of names we use to reference color values within a theme
  */
 export declare const Palette: {
-    readonly surfaceBottom: "surfaceBottom";
-    readonly surfaceMiddle: "surfaceMiddle";
-    readonly surfaceTop: "surfaceTop";
-    readonly primaryBg: "primaryBg";
-    readonly primaryColor: "primaryColor";
-    readonly primaryActive: "primaryActive";
-    readonly primaryDisabledBg: "primaryDisabledBg";
-    readonly primaryDisabledColor: "primaryDisabledColor";
-    readonly secondaryBg: "secondaryBg";
-    readonly secondaryColor: "secondaryColor";
-    readonly secondaryActive: "secondaryActive";
-    readonly secondaryDisabledBg: "secondaryDisabledBg";
-    readonly secondaryDisabledColor: "secondaryDisabledColor";
-    readonly tertiaryBg: "tertiaryBg";
-    readonly tertiaryColor: "tertiaryColor";
-    readonly tertiaryActive: "tertiaryActive";
-    readonly tertiaryDisabledBg: "tertiaryDisabledBg";
-    readonly tertiaryDisabledColor: "tertiaryDisabledColor";
+    readonly background1: "background1";
+    readonly background2: "background2";
+    readonly background3: "background3";
+    readonly background4: "background4";
+    readonly background5: "background5";
+    readonly background6: "background6";
+    readonly brandPrimary: "brandPrimary";
+    readonly brandSecondary: "brandSecondary";
+    readonly inputBg: "inputBg";
+    readonly inputColor: "inputColor";
+    readonly inputPlaceholder: "inputPlaceholder";
+    readonly inputDisabled: "inputDisabled";
+    readonly inputFocused: "inputFocused";
+    readonly statusSuccess: "statusSuccess";
+    readonly statusWarning: "statusWarning";
+    readonly statusCritical: "statusCritical";
+    readonly statusActive: "statusActive";
     readonly textDefault: "textDefault";
     readonly textHelp: "textHelp";
-    readonly textDisabled: "textDisabled";
-    readonly textError: "textError";
-    readonly textPlaceholder: "textPlaceholder";
+    readonly textInactive: "textInactive";
 };

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

@@ -5,27 +5,24 @@ exports.Palette = void 0;
  * Theme Palette -- Canonical list of names we use to reference color values within a theme
  */
 exports.Palette = {
-    surfaceBottom: 'surfaceBottom',
-    surfaceMiddle: 'surfaceMiddle',
-    surfaceTop: 'surfaceTop',
-    primaryBg: 'primaryBg',
-    primaryColor: 'primaryColor',
-    primaryActive: 'primaryActive',
-    primaryDisabledBg: 'primaryDisabledBg',
-    primaryDisabledColor: 'primaryDisabledColor',
-    secondaryBg: 'secondaryBg',
-    secondaryColor: 'secondaryColor',
-    secondaryActive: 'secondaryActive',
-    secondaryDisabledBg: 'secondaryDisabledBg',
-    secondaryDisabledColor: 'secondaryDisabledColor',
-    tertiaryBg: 'tertiaryBg',
-    tertiaryColor: 'tertiaryColor',
-    tertiaryActive: 'tertiaryActive',
-    tertiaryDisabledBg: 'tertiaryDisabledBg',
-    tertiaryDisabledColor: 'tertiaryDisabledColor',
+    background1: 'background1',
+    background2: 'background2',
+    background3: 'background3',
+    background4: 'background4',
+    background5: 'background5',
+    background6: 'background6',
+    brandPrimary: 'brandPrimary',
+    brandSecondary: 'brandSecondary',
+    inputBg: 'inputBg',
+    inputColor: 'inputColor',
+    inputPlaceholder: 'inputPlaceholder',
+    inputDisabled: 'inputDisabled',
+    inputFocused: 'inputFocused',
+    statusSuccess: 'statusSuccess',
+    statusWarning: 'statusWarning',
+    statusCritical: 'statusCritical',
+    statusActive: 'statusActive',
     textDefault: 'textDefault',
     textHelp: 'textHelp',
-    textDisabled: 'textDisabled',
-    textError: 'textError',
-    textPlaceholder: 'textPlaceholder',
+    textInactive: 'textInactive',
 };