@openfin/workspace-platform 23.1.1 → 23.1.3

package/client-api-platform/src/api/controllers/theme-storage-controller-store.d.ts

@@ -1,4 +1,19 @@
+import { GeneratedPalettes, NotificationIndicatorColorsParsed } from '../../../../common/src/api/theming';
 import { ThemeStorageController } from '../../../../client-api-platform/src/api/controllers/theme-storage-controller';
 import { CustomThemes } from '../../../../client-api-platform/src/shapes';
-export declare const initialiseStoragePalettes: (customThemes: CustomThemes | undefined, isWindows: boolean) => CustomThemes;
+/**
+ * Initialises the storage palettes from the custom themes. This function is called on platform init.
+ * This function takes both the legacy themes and the new theme system tokens and
+ * passes them into the theme engine to generate the css variables.
+ *
+ * @param customThemes the custom themes to initialise the storage palettes from.
+ * @param isWindows whether the operating system is Windows.
+ * @returns the generated palettes fromt the theme engine, theme palette sheet which is injected into the DOM, and legacy theme object if it exists.
+ */
+export declare const initialiseStoragePalettes: (customThemes: CustomThemes | undefined, isWindows: boolean) => {
+    generatedPalettes: GeneratedPalettes;
+    themePaletteSheet: string;
+    legacyTheme: CustomThemes | null;
+    notificationIndicatorColors: NotificationIndicatorColorsParsed | null;
+};
 export declare const getThemeStorageController: () => ThemeStorageController;

package/client-api-platform/src/api/controllers/theme-storage-controller.d.ts

@@ -1,3 +1,5 @@
+import { GeneratedPalettes } from '../../../../common/src/api/theming';
+import { StorageProxy } from '../../../../client-api-platform/src/api/utils';
 import { ColorSchemeOptionType, CustomPaletteSet } from '../../../../client-api-platform/src/shapes';
 /**
  * Palette extensions can be used to add new variables to the palette set.
@@ -5,48 +7,34 @@ import { ColorSchemeOptionType, CustomPaletteSet } from '../../../../client-api-
  * This is particularly useful if a value uses a different palette constant depending on scheme.
  */
 export declare const getPaletteExtensions: (palette: CustomPaletteSet, paletteScheme: "light" | "dark", isWindows: boolean) => {
-    dockExpandedContainerBorderColor: string;
     dockExpandedContainerBorderRadius: string;
-    dockExpandedContainerBackground: string;
     fillerBackgroundColor: string;
-    dockCompanionContainerBackground: string;
-    dockComponentContainerBackground: string;
-    styledDropdownActiveBackground: string;
-    contentMenuWrapperInternalDivBorderColor: string;
-    contentMenuItemContainerActiveBackground: string;
-    contentMenuItemContainerHoverBackground: string;
-    contentMenuHeaderBorderColor: string;
-    dockCompanionSeparatorBorderColor: string;
-    dockComponentContainerBorderColor: string;
-    companionDockButtonActiveBackground: string;
-    companionDockButtonHoverBackground: string;
     'computed-scrollbar-thumb-alpha': number;
     'computed-scrollbar-track-alpha': number;
     'scrollbar-thumb-rgb': string;
     'scrollbar-track-rgb': string;
     selectedTab: string;
 };
-export type Palettes = {
+export type LegacyPalettes = {
     dark: CustomPaletteSet;
     light: CustomPaletteSet;
 };
+export type Palettes = {
+    light: string;
+    dark: string;
+};
 export declare class ThemeStorageController {
     private providerStorage;
     private darkPaletteVars?;
     private lightPaletteVars?;
+    private themePaletteSheet?;
+    private generatedPalettes?;
     private workspaceStorage?;
     constructor(providerStorage: Pick<Storage, 'getItem' | 'setItem'>);
-    private getVarsByScheme;
     /**
      * Set the current Storage Proxy to enable Workspace Storage properties to be populated.
-     *
-     * Currently, we only support same Storage Based theming for same origin scenarios like EB, where the provider
-     * is in the same origin as the workspace pages.
-     *
-     * A workaround that can be leveraged in cross origin scenarios (which is the majority of the workspace use case) is available in this commit: 233e843cda6cd68968fd5831fb20597e0d5bb7cc
-     * `git revert 233e843cda6cd68968fd5831fb20597e0d5bb7cc --no-commit`
      */
-    setWorkspaceStorage: (proxy: Pick<Storage, "setItem">) => void;
+    setWorkspaceStorageProxy: (proxy: StorageProxy) => void;
     /**
      * Check if there's an explicit user preference stored in localStorage.
      * A user preference is indicated by the presence of a SelectedColorScheme key. Which is something assigned if you click on the Appearance dropdown.
@@ -64,7 +52,11 @@ export declare class ThemeStorageController {
      * to allow workspace UI elements to load the palette before their first paint.
      * @param palettes Light and Dark Palette constants
      */
-    setPalettes: ({ light, dark }: Palettes, isWindows: boolean) => Promise<void>;
+    setLegacyPalettes: ({ light, dark }: LegacyPalettes, isWindows: boolean) => Promise<void>;
+    setPalettes: ({ light, dark }: {
+        light: string;
+        dark: string;
+    }) => Promise<void>;
     /**
      * Set the current scheme of workspace. Specifically setting light or dark
      * will ignore the OS scheme, whereas 'system' will always respect it.
@@ -78,9 +70,15 @@ export declare class ThemeStorageController {
      * @param scheme The default scheme specified in the palette
      */
     setThemeDefaultScheme(scheme: ColorSchemeOptionType): void;
+    setGeneratedPalettes(generatedPalettes: GeneratedPalettes): void;
     /**
      * Returns the current scheme
      * @returns 'light' | 'system' | 'dark'
      */
     getScheme(): ColorSchemeOptionType;
+    getThemePaletteSheet(): string | undefined;
+    getThemePalette(): {
+        light: string;
+        dark: string;
+    };
 }

package/client-api-platform/src/api/theming.d.ts

@@ -1,5 +1,16 @@
 import type OpenFin from '@openfin/core';
+import type { CustomTheme, GenerateThemeParams } from '../../../common/src/api/theming';
 import { ColorSchemeOptionType, ThemeApi } from '../../../client-api-platform/src/shapes';
 export declare const getThemingApi: (identity: OpenFin.ApplicationIdentity) => ThemeApi;
+export declare const dispatchThemeToWorkspaceProvider: (themeData: {
+    themePaletteSheet: string;
+    selectedScheme: ColorSchemeOptionType;
+    themePalette: {
+        light: string;
+        dark: string;
+    };
+}) => Promise<void>;
 export declare const setSelectedScheme: (schemeType: ColorSchemeOptionType) => Promise<void>;
 export declare const getSelectedScheme: () => ColorSchemeOptionType | null | undefined;
+export declare const getThemePaletteSheet: () => string | undefined;
+export declare const mapLegacyThemeToCustomTheme: (legacyTheme: CustomTheme) => GenerateThemeParams;

package/client-api-platform/src/api/theming.test.d.ts

@@ -0,0 +1 @@
+export {};

package/client-api-platform/src/api/utils.d.ts

@@ -1 +1,6 @@
 export declare const listenForStoreClose: () => void;
+export type StorageProxy = {
+    setItem: (data: string, value: string) => Promise<void>;
+    destroy: () => Promise<void>;
+};
+export declare const createStorageProxy: (url: string) => Promise<StorageProxy>;

package/client-api-platform/src/init/theming.d.ts

@@ -1,5 +1,9 @@
+import { GeneratedPalettes, NotificationIndicatorColorsParsed } from '../../../common/src/api/theming';
 import { CustomThemes } from '../shapes';
-export declare const getThemes: () => CustomThemes;
+export declare const getThemes: () => CustomThemes | null;
+export declare const getGeneratedPalettes: () => GeneratedPalettes;
+export declare const getThemePaletteSheet: () => string;
+export declare const getNotificationIndicatorColorsInternal: () => NotificationIndicatorColorsParsed;
 /**
  * initTheming()
  * @param customThemes array of theme objects

package/client-api-platform/src/shapes.d.ts

@@ -4,7 +4,7 @@ import type { AnalyticsEvent } from '../../common/src/utils/usage-register';
 import type { CustomActionSpecifier, CustomButtonConfig } from '../../common/src/api/action';
 import type { AddDefaultPagePayload, AttachedPage, BookmarkNode, CopyPagePayload, HandlePagesAndWindowClosePayload, HandlePagesAndWindowCloseResult, HandleSaveModalOnPageClosePayload, Page, PageLayoutsWithSelectedViews, PageWithUpdatableRuntimeAttribs, SaveModalOnPageCloseResult, SetActivePageForWindowPayload, ShouldPageClosePayload, ShouldPageCloseResult, ViewsPreventingUnloadPayload } from '../../common/src/api/pages/shapes';
 import type { NotificationsCustomManifestOptions } from '../../common/src/api/shapes/notifications';
-import type { CustomThemes } from '../../common/src/api/theming';
+import type { CustomThemes, GeneratedPalettes } from '../../common/src/api/theming';
 import type { App, DockProviderConfigWithIdentity, StoreButtonConfig } from '../../client-api/src/shapes';
 import type { WorkflowIntegration } from '../../client-api/src/shapes/integrations';
 export * from '../../dock3/src/shapes';
@@ -1478,12 +1478,27 @@ export interface LaunchAppRequest {
     target?: OpenFin.EntityInfo;
     app: App;
 }
-/**
- * Get Themes from API
- */
 export interface ThemeApi {
-    getThemes(): Promise<CustomThemes>;
+    /**
+     * @deprecated This method is deprecated. It is recommended to use {@link getGeneratedPalettes} instead.
+     * Get the legacy themes from the platform provider.
+     * @returns the legacy themes or null if the platform provider is using the new theme system.
+     */
+    getThemes(): Promise<CustomThemes | null>;
+    /**
+     * Get the generated palettes from the platform provider.
+     * @returns the generated palettes.
+     */
+    getGeneratedPalettes(): Promise<GeneratedPalettes>;
+    /**
+     * Set the selected scheme for the platform provider.
+     * @param newScheme the new scheme to set.
+     */
     setSelectedScheme(newScheme: ColorSchemeOptionType): Promise<void>;
+    /**
+     * Get the selected scheme from the platform provider.
+     * @returns the selected scheme.
+     */
     getSelectedScheme(): Promise<ColorSchemeOptionType>;
 }
 /**

package/common/src/api/protocol/shapes/workspace.d.ts

@@ -85,6 +85,14 @@ type WorkspaceChannelTypes = {
     'set-search-query': (payload: SearchQueryWithProviderID) => Promise<void>;
     'assign-home-search-context': (payload: Partial<HomeSearchListenerRequest['context']>) => Promise<void>;
     'set-selected-scheme': (ctx: ColorSchemeOptionType) => Promise<void>;
+    'initialize-theme': (themeData: {
+        themePaletteSheet: string;
+        selectedScheme: ColorSchemeOptionType;
+        themePalette: {
+            light: string;
+            dark: string;
+        };
+    }) => Promise<void>;
     'get-legacy-pages': () => Promise<Page[]>;
     'get-legacy-workspaces': (payload: undefined) => Promise<LegacyWorkspace[]>;
     'register-storefront-provider': () => Promise<void>;

package/common/src/api/protocol/workspace-platform.d.ts

@@ -35,6 +35,8 @@ export declare enum WorkspacePlatformChannelAction {
     GetLastFocusedBrowserWindow = "getLastFocusedBrowserWindow",
     GetPageByViewIdentity = "getPageByViewIdentity",
     GetThemes = "getThemes",
+    GetGeneratedPalettes = "getGeneratedPalettes",
+    GetThemePaletteSheet = "getThemePaletteSheet",
     GetSelectedScheme = "getSelectedScheme",
     SetSelectedScheme = "setSelectedScheme",
     OpenGlobalContextMenuInternal = "openGlobalContextMenuInternal",
@@ -93,7 +95,8 @@ export declare enum WorkspacePlatformChannelAction {
     AddDockFavoriteInternal = "addDockFavoriteInternal",// Enterprise
     FocusAndExpandSearchInternal = "focusAndExpandSearchInternal",// Enterprise
     SendUpdateVersionModalResponseInternal = "sendUpdateVersionModalResponseInternal",// Enterprise
-    ShowUpdateVersionModalInternal = "showUpdateVersionModalInternal"
+    ShowUpdateVersionModalInternal = "showUpdateVersionModalInternal",// Enterprise
+    GetNotificationIndicatorColorsInternal = "getNotificationIndicatorColorsInternal"
 }
 export type PlatFormSupportedFeatures = boolean | {
     isWorkspacePlatform: boolean;

package/common/src/api/protocol/workspace.d.ts

@@ -19,8 +19,8 @@ export declare const launchProvider: () => Promise<void>;
  */
 export declare const getChannelClientAndLaunchProvider: () => Promise<WorkspaceComponentChannelClient>;
 /**
- * Launches the Workspace provider if it is not running.
+ * Gets the theme data from the Platform provider, then launches the Workspace provider if it is not running, and then dispatches the theme data to the Workspace provider.
  * Then gets a Channel Client that is connected to the Workspace Provider.
  * @returns the Channel Client that is connected to the Workspace Provider.
  */
-export declare const getClientAPIChannelClientAndLaunchProvider: () => Promise<WorkspaceAPIClientChannelClient>;
+export declare const getChannelClientAndInitializeWorkspaceProvider: () => Promise<WorkspaceAPIClientChannelClient>;

package/common/src/api/theming.d.ts

@@ -1,8 +1,13 @@
 import type { DefaultTheme } from 'styled-components';
 import type OpenFin from '@openfin/core';
 import type { ColorSchemeType, ThemeSet } from '@openfin/ui-library';
-import { Palette } from '@openfin/ui-library/dist/theme';
 import { ColorSchemeOptionType } from '../../../client-api-platform/src/shapes';
+import type { generateTheme } from '@openfin/theme-engine';
+export declare const ColorScheme: {
+    light: string;
+    dark: string;
+    system: string;
+};
 export type WorkspaceComponentSetSelectedSchemePayload = {
     newScheme: ColorSchemeOptionType;
     identity: OpenFin.Identity;
@@ -35,6 +40,13 @@ export interface NotificationIndicatorColorsSetLightScheme {
     dark?: NotificationIndicatorColorsSet;
     light: NotificationIndicatorColorsSet;
 }
+export type NotificationIndicatorColors = Record<string, Omit<NotificationIndicatorColorsSet, 'foreground'> & {
+    foreground: string;
+}>;
+export type NotificationIndicatorColorsParsed = {
+    dark: NotificationIndicatorColors;
+    light: NotificationIndicatorColors;
+};
 export type NotificationIndicatorColorsWithScheme = Record<string, NotificationIndicatorColorsSetDarkScheme | NotificationIndicatorColorsSetLightScheme>;
 export interface BaseThemeOptions {
     label: string;
@@ -65,7 +77,7 @@ export type CustomThemeOptions = BaseThemeOptions & {
      * };
      * ```
      */
-    notificationIndicatorColors?: Record<string, NotificationIndicatorColorsSet>;
+    notificationIndicatorColors?: NotificationIndicatorColors;
 };
 export type CustomThemeOptionsWithScheme = BaseThemeOptions & {
     /**
@@ -121,10 +133,22 @@ export type CustomThemeOptionsWithScheme = BaseThemeOptions & {
      */
     notificationIndicatorColors?: NotificationIndicatorColorsWithScheme;
 };
-export type CustomThemes = (CustomThemeOptions | CustomThemeOptionsWithScheme)[];
+export type ThemeOptions = BaseThemeOptions & {
+    seed: Parameters<typeof generateTheme>[0];
+    overrides?: Parameters<typeof generateTheme>[1];
+} & {
+    notificationIndicatorColors?: NotificationIndicatorColorsWithScheme | NotificationIndicatorColors;
+};
+type GenerateThemeReturn = ReturnType<typeof generateTheme>;
+export type GeneratedPalettes = Pick<GenerateThemeReturn, 'dark' | 'light'>;
+export type LegacyPalettes = CustomThemeOptions | CustomThemeOptionsWithScheme;
+export type GenerateThemeParams = Parameters<typeof generateTheme>;
+export type CustomTheme = CustomThemeOptions | CustomThemeOptionsWithScheme | ThemeOptions;
+export type CustomThemes = CustomTheme[];
 export interface PreloadedThemeData {
-    themes: CustomThemes;
+    themes: CustomThemes | GeneratedPalettes;
     selectedScheme: ColorSchemeOptionType;
+    themePaletteSheet?: string;
 }
 export interface DefaultPaletteSet {
     brandPrimary: string;
@@ -265,16 +289,13 @@ export declare const OpenFinDarkTheme: {
     borderNeutral: "#C0C1C2";
 };
 export declare const DefaultOpenFinTheme: CustomThemes;
-export declare const getComputedPaletteSets: (customTheme: CustomThemeOptions | CustomThemeOptionsWithScheme) => WorkspaceThemeSet;
-/**
- * Transforms input {@link CustomThemes} to {@link ComputedThemes} used by Workspace Platform / Notifications Platform.
- *
- * @param customThemes array of themes to transform
- * @param storedScheme sets the default scheme if provided
- * @returns array of {@link ComputedThemes | computed themes}
- */
-export declare const computeThemes: (customThemes: CustomThemes, storedScheme?: ColorSchemeOptionType) => ComputedThemes;
-export declare const getComputedPlatformTheme: (platformIdentity: OpenFin.Identity) => Promise<ComputedTheme>;
+export declare const parseNotificationIndicatorColors: (customTheme: CustomTheme) => NotificationIndicatorColorsParsed;
+export declare const getComputedPlatformTheme: (platformIdentity: OpenFin.Identity) => Promise<{
+    theme: CustomThemes | GeneratedPalettes;
+    defaultScheme: ColorSchemeOptionType;
+}>;
 export declare const setSelectedScheme: (ctx: ColorSchemeOptionType) => Promise<void>;
 export declare const getComputedScheme: (identity?: OpenFin.Identity) => Promise<Exclude<ColorSchemeType, "system">>;
-export declare const getComputedBackgroundColor: (paletteKey: keyof typeof Palette, defaultColor?: string) => Promise<string>;
+export declare const getComputedBackgroundColor: (platformIdentity: OpenFin.Identity) => Promise<string>;
+export declare const constructThemePaletteSheet: (themes: GeneratedPalettes) => string;
+export {};

package/common/src/utils/enterprise-menu.d.ts

@@ -1,6 +1,6 @@
 import type OpenFin from '@openfin/core';
 import { EnterpriseMainContextMenuItemData, EnterpriseMainContextMenuItemTemplate, OpenGlobalContextMenuPayload } from '../../../client-api-platform/src/shapes';
-export declare const getEnterpriseContextMenuTemplate: ({ identity, selectedViews }: {
+export declare const getEnterpriseContextMenuTemplate: ({ identity }: {
     identity: OpenFin.Identity;
     selectedViews: OpenFin.Identity[];
 }) => Promise<EnterpriseMainContextMenuItemTemplate[]>;

package/common/src/utils/namespaced-local-storage.d.ts

@@ -1,4 +1,5 @@
+import LocalStorageKey from './local-storage-key';
+export declare const setItem: (key: LocalStorageKey, value: string) => void;
+export declare const getItem: (key: LocalStorageKey) => string;
+export declare const removeItem: (key: LocalStorageKey) => void;
 export declare const createNamespacedLocalStorage: <TKey extends string>(namespace: string) => Pick<Storage, "setItem" | "getItem" | "removeItem">;
-export declare const setItem: (key: string, value: string) => void;
-export declare const getItem: (key: string) => string | null;
-export declare const removeItem: (key: string) => void;

package/common/src/utils/route.d.ts

@@ -29,6 +29,7 @@ declare enum BrowserRoute {
     EnterpriseContextMenu = "/context-menu/",
     EnterpriseBookmarkDialog = "/bookmark-dialog/",
     EnterpriseAboutPage = "/popup-menu/about/",
+    StorageProxy = "/browser/storage-proxy",
     DropdownMenu = "/dropdown-menu/",
     EnterpriseDock = "/dock/",
     ZoomControlsDialog = "/zoom-controls-dialog/",
@@ -51,6 +52,7 @@ declare const PageRoute: {
     EnterpriseContextMenu: BrowserRoute.EnterpriseContextMenu;
     EnterpriseBookmarkDialog: BrowserRoute.EnterpriseBookmarkDialog;
     EnterpriseAboutPage: BrowserRoute.EnterpriseAboutPage;
+    StorageProxy: BrowserRoute.StorageProxy;
     DropdownMenu: BrowserRoute.DropdownMenu;
     EnterpriseDock: BrowserRoute.EnterpriseDock;
     ZoomControlsDialog: BrowserRoute.ZoomControlsDialog;