@openfin/ui-library 0.0.33

package/dist/components/system/ThemeProvider/lib/font-face-cdn.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("styled-components").FlattenSimpleInterpolation;
+export default _default;

package/dist/components/system/ThemeProvider/lib/font-face-cdn.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const styled_components_1 = require("styled-components");
+const constants_1 = require("./constants");
+exports.default = styled_components_1.css `
+  @font-face {
+    font-family: 'Inter';
+    src: url('//cdn.openfin.co/fonts/inter/Inter-Regular.woff2?v3.15')
+        format('woff2'),
+      url('//cdn.openfin.co/fonts/inter/Inter-Regular.woff?v3.15')
+        format('woff');
+    font-weight: ${constants_1.FontWeight.normal};
+    font-style: normal;
+    font-display: swap;
+  }
+
+  @font-face {
+    font-family: 'Inter';
+    src: url('//cdn.openfin.co/fonts/inter/Inter-Italic.woff2?v3.15')
+        format('woff2'),
+      url('//cdn.openfin.co/fonts/inter/Inter-Italic.woff?v3.15') format('woff');
+    font-weight: ${constants_1.FontWeight.normal};
+    font-style: italic;
+    font-display: swap;
+  }
+
+  @font-face {
+    font-family: 'Inter';
+    src: url('//cdn.openfin.co/fonts/inter/Inter-SemiBold.woff2?v3.15')
+        format('woff2'),
+      url('//cdn.openfin.co/fonts/inter/Inter-SemiBold.woff?v3.15')
+        format('woff');
+    font-weight: ${constants_1.FontWeight.bold};
+    font-style: normal;
+    font-display: swap;
+  }
+
+  @font-face {
+    font-family: 'Inter';
+    src: url('//cdn.openfin.co/fonts/inter/Inter-SemiBoldItalic.woff2?v3.15')
+        format('woff2'),
+      url('//cdn.openfin.co/fonts/inter/Inter-SemiBoldItalic.woff?v3.15')
+        format('woff');
+    font-weight: ${constants_1.FontWeight.bold};
+    font-style: italic;
+    font-display: swap;
+  }
+`;

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

@@ -0,0 +1,19 @@
+import { DefaultTheme, StyledProps } from 'styled-components';
+export declare type ComponentVariants = {
+    [key: string]: {
+        [key: string]: any;
+    };
+};
+/**
+ * Get the CSS associated with a variant key
+ * @param variants  -- Component variants data structure
+ * @param variantProp -- The key (enum) for looking up the variant value
+ * @todo This needs to be typed better
+ */
+export declare const getVariantCSS: (variants: ComponentVariants, variantProp: string) => (props: StyledProps<any>) => any;
+/**
+ * Lazy Load font-faces based on Theme Configuration
+ */
+export declare const getFontFaces: ({ theme }: {
+    theme: DefaultTheme;
+}) => import("styled-components").FlattenSimpleInterpolation;

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

@@ -0,0 +1,31 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getFontFaces = exports.getVariantCSS = void 0;
+const font_face_base64_1 = __importDefault(require("./font-face-base64"));
+const font_face_cdn_1 = __importDefault(require("./font-face-cdn"));
+/**
+ * Get the CSS associated with a variant key
+ * @param variants  -- Component variants data structure
+ * @param variantProp -- The key (enum) for looking up the variant value
+ * @todo This needs to be typed better
+ */
+const getVariantCSS = (variants, variantProp) => (props) => {
+    return variants[variantProp][props[variantProp]];
+};
+exports.getVariantCSS = getVariantCSS;
+/**
+ * Lazy Load font-faces based on Theme Configuration
+ */
+const getFontFaces = ({ theme }) => {
+    switch (theme._config.fontLoading) {
+        case 'base64':
+            return font_face_base64_1.default;
+        case 'cdn':
+        default:
+            return font_face_cdn_1.default;
+    }
+};
+exports.getFontFaces = getFontFaces;

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

@@ -0,0 +1,25 @@
+import { Color, FontSize, FontWeight, IconSize, LineHeight, Radius, Shadow, Transition, Unit, UnitPx } from './constants';
+import { ConfigurationType } from './config';
+import { Palette } from './palette';
+declare module 'styled-components' {
+    interface DefaultTheme {
+        /**
+         * Register top-level theme keys here and their types
+         * to construct the Theme schema from discrete parts
+         * - Provides some validation when providing an external theme
+         * - Enables auto-completion in styled components.
+         */
+        _config: ConfigurationType;
+        _color: typeof Color;
+        fontSize: typeof FontSize;
+        fontWeight: typeof FontWeight;
+        lineHeight: typeof LineHeight;
+        iconSize: typeof IconSize;
+        radius: typeof Radius;
+        shadow: typeof Shadow;
+        transition: typeof Transition;
+        unit: typeof Unit;
+        px: typeof UnitPx;
+        palette: Record<keyof typeof Palette, string>;
+    }
+}

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

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,28 @@
+/**
+ * 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 textDefault: "textDefault";
+    readonly textHelp: "textHelp";
+    readonly textDisabled: "textDisabled";
+    readonly textError: "textError";
+    readonly textPlaceholder: "textPlaceholder";
+};

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

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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',
+    textDefault: 'textDefault',
+    textHelp: 'textHelp',
+    textDisabled: 'textDisabled',
+    textError: 'textError',
+    textPlaceholder: 'textPlaceholder',
+};

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

@@ -0,0 +1,49 @@
+import { DefaultTheme } from 'styled-components';
+import { Color, FontSize, FontStack, FontWeight, IconSet, IconSize, LineHeight, Radius, Shadow, Size, Transition, Typography, Unit, UnitPx } from './constants';
+import { Palette } from './palette';
+export declare type ColorType = keyof typeof Color;
+export declare type FontSizeType = keyof typeof FontSize;
+export declare type FontStackType = keyof typeof FontStack;
+export declare type FontWeightType = keyof typeof FontWeight;
+export declare type IconSizeType = keyof typeof IconSize;
+export declare type IconType = keyof typeof IconSet;
+export declare type LineHeightType = keyof typeof LineHeight;
+export declare type RadiusType = keyof typeof Radius;
+export declare type ShadowType = keyof typeof Shadow;
+export declare type SizeType = keyof typeof Size;
+export declare type TransitionType = keyof typeof Transition;
+export declare type TypographyType = keyof typeof Typography;
+export declare type UnitPxType = keyof typeof UnitPx;
+export declare type UnitType = keyof typeof Unit;
+export declare type ThemeSet = {
+    light: DefaultTheme;
+    dark: DefaultTheme;
+};
+export declare type ThemePaletteSet = {
+    light: {
+        palette: Record<keyof typeof Palette, string>;
+    };
+    dark: {
+        palette: Record<keyof typeof Palette, string>;
+    };
+};
+/**
+ * # Utility Types
+ * ========================================================
+ */
+/**
+ * ## ValueOf Type
+ *
+ * Convenience for ensure value is in an Object, let built-in `keyof`
+ * @example ValueOf<typeof someObject>
+ * @link https://stackoverflow.com/questions/49285864/is-there-a-valueof-similar-to-keyof-in-typescript
+ */
+export declare type ValueOf<T> = T[keyof T];
+/**
+ * Join a string tuple to a string with a separator.
+ * @example
+ * const array = ['hello', 'world'] as const;
+ * type MyArrayString = StringTupleJoin<typeof array, ', '>;
+ * const str: MyArrayString = "hello, world";
+ */
+export declare type StringTupleJoin<T extends readonly string[], Separator extends string> = T extends readonly [string, ...infer Tail] ? Tail extends [string, ...string[]] ? `${T[0]}${Separator}${StringTupleJoin<Tail, Separator>}` : `${T[0]}` : never;

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

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,20 @@
+import { FC, ReactChild } from 'react';
+import { ColorScheme } from '../../../hooks/useColorScheme';
+import { ConfigurationType } from './lib/config';
+import { ThemePaletteSet } from './lib/types';
+export declare type ThemeProviderProps = {
+    children: ReactChild;
+    themes?: ThemePaletteSet;
+    scheme?: keyof typeof ColorScheme;
+    config?: ConfigurationType;
+    includeGlobalStyles?: false;
+};
+/**
+ * ## OpenFin ThemeProvider
+ * - Extends StyledComponents ThemeProvider
+ * - Applies built-in OpenFin themes automatically using System Preference for Color Scheme
+ * - Includes global stylesheet with typography, reset, and global css vars
+ * - Accepts Light / Dark Mode scheme override
+ * - Accepts Light / Dark Mode palette override
+ */
+export declare const ThemeProvider: FC<ThemeProviderProps>;

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

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ThemeProvider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styled_components_1 = require("styled-components");
+const useTheme_1 = require("../../../hooks/useTheme");
+const GlobalStyles_1 = require("../GlobalStyles");
+/**
+ * ## OpenFin ThemeProvider
+ * - Extends StyledComponents ThemeProvider
+ * - Applies built-in OpenFin themes automatically using System Preference for Color Scheme
+ * - Includes global stylesheet with typography, reset, and global css vars
+ * - Accepts Light / Dark Mode scheme override
+ * - Accepts Light / Dark Mode palette override
+ */
+const ThemeProvider = ({ children, themes, scheme, config, includeGlobalStyles = true, }) => {
+    const currentTheme = useTheme_1.useTheme({ themes, scheme, config });
+    return (jsx_runtime_1.jsxs(styled_components_1.ThemeProvider, Object.assign({ theme: currentTheme }, { children: [includeGlobalStyles && jsx_runtime_1.jsx(GlobalStyles_1.GlobalStyles, {}, void 0), children] }), void 0));
+};
+exports.ThemeProvider = ThemeProvider;

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

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

package/dist/components/system/ThemeProvider/themes/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("./openfin"), exports);

package/dist/components/system/ThemeProvider/themes/openfin.d.ts

@@ -0,0 +1,9 @@
+import { DefaultTheme } from 'styled-components';
+/**
+ * Light Theme
+ */
+export declare const OpenFinLightTheme: DefaultTheme;
+/**
+ * Dark Theme
+ */
+export declare const OpenFinDarkTheme: DefaultTheme;

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

@@ -0,0 +1,28 @@
+"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 sharedPalette = {};
+/**
+ * Light Theme
+ */
+exports.OpenFinLightTheme = Object.assign(Object.assign({}, base), { palette: Object.assign(Object.assign({}, sharedPalette), { [palette_1.Palette.surfaceBottom]: constants_1.Color.lightGray3, [palette_1.Palette.surfaceMiddle]: constants_1.Color.lightGray2, [palette_1.Palette.surfaceTop]: constants_1.Color.lightGray1, [palette_1.Palette.primaryBg]: constants_1.Color.openFin, [palette_1.Palette.primaryColor]: constants_1.Color.white, [palette_1.Palette.primaryActive]: constants_1.Color.openFin, [palette_1.Palette.primaryDisabledBg]: constants_1.Color.lightGray4, [palette_1.Palette.primaryDisabledColor]: constants_1.Color.lightGray3, [palette_1.Palette.secondaryBg]: constants_1.Color.transparent, [palette_1.Palette.secondaryColor]: constants_1.Color.darkGray6, [palette_1.Palette.secondaryActive]: constants_1.Color.darkGray6, [palette_1.Palette.secondaryDisabledBg]: constants_1.Color.transparent, [palette_1.Palette.secondaryDisabledColor]: constants_1.Color.darkGray3, [palette_1.Palette.tertiaryBg]: constants_1.Color.darkGray6, [palette_1.Palette.tertiaryColor]: constants_1.Color.white, [palette_1.Palette.tertiaryActive]: constants_1.Color.darkGray6, [palette_1.Palette.tertiaryDisabledBg]: constants_1.Color.darkGray4, [palette_1.Palette.tertiaryDisabledColor]: constants_1.Color.darkGray3, [palette_1.Palette.textDefault]: constants_1.Color.darkGray6, [palette_1.Palette.textHelp]: constants_1.Color.darkGray4, [palette_1.Palette.textDisabled]: constants_1.Color.darkGray4, [palette_1.Palette.textError]: constants_1.Color.accent4, [palette_1.Palette.textPlaceholder]: constants_1.Color.darkGray4 }) });
+/**
+ * Dark Theme
+ */
+exports.OpenFinDarkTheme = Object.assign(Object.assign({}, base), { palette: Object.assign(Object.assign({}, sharedPalette), { [palette_1.Palette.surfaceBottom]: constants_1.Color.darkGray6, [palette_1.Palette.surfaceMiddle]: constants_1.Color.darkGray5, [palette_1.Palette.surfaceTop]: constants_1.Color.darkGray3, [palette_1.Palette.primaryBg]: constants_1.Color.openFin, [palette_1.Palette.primaryColor]: constants_1.Color.white, [palette_1.Palette.primaryActive]: constants_1.Color.openFin, [palette_1.Palette.primaryDisabledBg]: constants_1.Color.darkGray3, [palette_1.Palette.primaryDisabledColor]: constants_1.Color.darkGray5, [palette_1.Palette.secondaryBg]: constants_1.Color.transparent, [palette_1.Palette.secondaryColor]: constants_1.Color.white, [palette_1.Palette.secondaryActive]: constants_1.Color.white, [palette_1.Palette.secondaryDisabledBg]: constants_1.Color.transparent, [palette_1.Palette.secondaryDisabledColor]: constants_1.Color.darkGray3, [palette_1.Palette.tertiaryBg]: constants_1.Color.white, [palette_1.Palette.tertiaryColor]: constants_1.Color.darkGray6, [palette_1.Palette.tertiaryActive]: constants_1.Color.white, [palette_1.Palette.tertiaryDisabledBg]: constants_1.Color.darkGray3, [palette_1.Palette.tertiaryDisabledColor]: constants_1.Color.darkGray5, [palette_1.Palette.textDefault]: constants_1.Color.white, [palette_1.Palette.textHelp]: constants_1.Color.lightGray2, [palette_1.Palette.textDisabled]: constants_1.Color.lightGray2, [palette_1.Palette.textError]: constants_1.Color.accent4, [palette_1.Palette.textPlaceholder]: constants_1.Color.lightGray2 }) });