audit theming

Signed-off-by: Josh Romero <rmerqg@amazon.com>

docs/theme.md

@@ -0,0 +1,36 @@
+# Theme loading
+
+## Loading
+
+`src/legacy/ui/ui_render/ui_render_mixin.js` via `src/legacy/ui/ui_render/bootstrap/template.js.hbs` and `src/legacy/ui/ui_render/bootstrap/app_bootstrap.js`. Aliased in `src/legacy/ui/ui_mixin.js`, called by `src/legacy/server/osd_server.js`. Called by `src/core/server/legacy/legacy_service.ts` via `src/core/server/server.ts`
+
+## Injected style tags
+
+1. `src/core/server/rendering/views/styles.tsx` - depends on dark/light mode and injects style tag in head
+2. `src/core/server/rendering/views/fonts.tsx` - depends on theme version and injects font style tag in head
+3. Monaco editor styles
+4. Ace styles
+5. Ace TM overrides
+6. Ace error styles
+
+
+## Styleshsheets
+
+1. KUI styles (e.g. `packages/osd-ui-framework/src/kui_dark.scss`, compiled by `packages/osd-ui-framework/Gruntfile.js`). Separate stylesheets for each theme version/dark mode combo (colors).
+2. Monaco editor styles
+3. Legacy styles (bootstrap)
+4. OUI styles (compiled by `packages/osd-ui-shared-deps/webpack.config.js`)
+5. Component styles
+
+## JSON/JS Vars
+
+1. Defined by `packages/osd-ui-shared-deps/theme.ts`
+	1. Used by `src/plugins/charts/public/static/color_maps/color_maps.ts` to set vis colors
+	2. Used by `src/plugins/discover/public/application/components/chart/histogram/histogram.tsx` to define Discover histogram Elastic Chart styling
+	3. Used by `src/plugins/maps_legacy/public/map/opensearch_dashboards_map.js` and `src/plugins/region_map/public/choropleth_layer.js` for minor map UI styling (line color, empty shade)
+	4. Used by `src/plugins/vis_type_vega/public/data_model/vega_parser.ts` for Vega/Vega-Lite theming
+2. Used by `src/plugins/vis_type_vislib/public/vislib/components/tooltip/tooltip.js` for tooltip spacing
+3. Used by `src/plugins/expressions/public/react_expression_renderer.tsx` to define padding options.
+4. Used by `src/core/server/rendering/views/theme.ts` to inject values into `src/core/server/rendering/views/styles.tsx`
+5. Used (incorrectly) to style a badge color in `src/plugins/index_pattern_management/public/components/create_button/create_button.tsx`
+6. Used by `src/plugins/opensearch_dashboards_react/public/code_editor/editor_theme.ts` to create Monaco theme styles

examples/ui_actions_explorer/public/context_menu_examples/util.ts

@@ -28,7 +28,7 @@
  * under the License.
  */
 
-import { EuiIconType } from '@elastic/eui/src/components/icon/icon';
+import { EuiIconType } from '@elastic/eui';
 import { Action } from '../../../../src/plugins/ui_actions/public';
 
 export const sampleAction = (

src/core/public/application/types.ts

@@ -32,7 +32,7 @@ import { Observable } from 'rxjs';
 import { History } from 'history';
 import { RecursiveReadonly } from '@osd/utility-types';
 
-import { EuiIconType } from '@elastic/eui/src/components/icon/icon';
+import { EuiIconType } from '@elastic/eui';
 import { MountPoint } from '../types';
 import { Capabilities } from './capabilities';
 import { ChromeStart } from '../chrome';

src/core/public/chrome/nav_links/nav_link.ts

@@ -28,7 +28,7 @@
  * under the License.
  */
 
-import { EuiIconType } from '@elastic/eui/src/components/icon/icon';
+import { EuiIconType } from '@elastic/eui';
 import { pick } from '@osd/std';
 import { AppCategory } from '../../';
 

src/core/public/chrome/nav_links/to_nav_link.test.ts

@@ -32,7 +32,7 @@ import { PublicAppInfo, AppNavLinkStatus, AppStatus } from '../../application';
 import { toNavLink } from './to_nav_link';
 
 import { httpServiceMock } from '../../mocks';
-import { EuiIconType } from '@elastic/eui/src/components/icon/icon';
+import { EuiIconType } from '@elastic/eui';
 
 const app = (props: Partial<PublicAppInfo> = {}): PublicAppInfo => ({
   id: 'some-id',

src/core/public/chrome/ui/header/header.tsx

@@ -60,7 +60,6 @@ import { CollapsibleNav } from './collapsible_nav';
 import { HeaderBadge } from './header_badge';
 import { HeaderBreadcrumbs } from './header_breadcrumbs';
 import { HeaderHelpMenu } from './header_help_menu';
-import { HeaderUserMenu } from './header_user_menu';
 import { HomeLoader } from './home_loader';
 import { HeaderNavControls } from './header_nav_controls';
 import { HeaderActionMenu } from './header_action_menu';

src/core/types/app_category.ts

@@ -9,7 +9,7 @@
  * GitHub history for details.
  */
 
-import { EuiIconType } from '@elastic/eui/src/components/icon/icon';
+import { EuiIconType } from '@elastic/eui';
 
 /*
  * Licensed to Elasticsearch B.V. under one or more contributor

src/plugins/advanced_settings/public/header_user_menu.tsx

@@ -135,13 +135,15 @@ export const HeaderUserMenu = () => {
     setScreenMode(e.target.value);
   };
 
-  const onAppearanceSubmit = (e: SyntheticEvent) => {
+  const onAppearanceSubmit = async (e: SyntheticEvent) => {
     console.log(e);
     // const mainStyleLink = document.querySelector('link[href*="osd-ui-shared-deps.v8.light"]');
     // mainStyleLink?.parentNode?.removeChild(mainStyleLink);
 
-    setThemeVersion(themeOptions.find((t) => theme === t.value)?.text ?? '');
-    setDarkMode(screenMode === 'dark');
+    await await Promise.all([
+      setThemeVersion(themeOptions.find((t) => theme === t.value)?.text ?? ''),
+      setDarkMode(screenMode === 'dark'),
+    ]);
     window.location.reload();
   };
 

src/plugins/dashboard/public/application/actions/add_to_library_action.tsx

@@ -31,7 +31,7 @@
 import { i18n } from '@osd/i18n';
 import _ from 'lodash';
 import uuid from 'uuid';
-import { EuiIconType } from '@elastic/eui/src/components/icon/icon';
+import { EuiIconType } from '@elastic/eui';
 import { ActionByType, IncompatibleActionError } from '../../../../ui_actions/public';
 import {
   PanelNotFoundError,

src/plugins/dashboard/public/application/actions/clone_panel_action.tsx

@@ -32,7 +32,7 @@ import { i18n } from '@osd/i18n';
 import { CoreStart } from 'src/core/public';
 import uuid from 'uuid';
 import _ from 'lodash';
-import { EuiIconType } from '@elastic/eui/src/components/icon/icon';
+import { EuiIconType } from '@elastic/eui';
 import { ActionByType, IncompatibleActionError } from '../../../../ui_actions/public';
 import { SavedObject } from '../../../../saved_objects/public';
 import {

src/plugins/dashboard/public/application/actions/expand_panel_action.tsx

@@ -28,7 +28,7 @@
  * under the License.
  */
 
-import { EuiIconType } from '@elastic/eui/src/components/icon/icon';
+import { EuiIconType } from '@elastic/eui';
 import { i18n } from '@osd/i18n';
 import { IEmbeddable } from '../../../../embeddable/public';
 import { ActionByType, IncompatibleActionError } from '../../../../ui_actions/public';

src/plugins/dashboard/public/application/actions/library_notification_action.tsx

@@ -31,7 +31,7 @@
 import React from 'react';
 import { i18n } from '@osd/i18n';
 import { EuiBadge } from '@elastic/eui';
-import { EuiIconType } from '@elastic/eui/src/components/icon/icon';
+import { EuiIconType } from '@elastic/eui';
 import {
   IEmbeddable,
   ViewMode,

src/plugins/dashboard/public/application/actions/replace_panel_action.tsx

@@ -30,7 +30,7 @@
 
 import { i18n } from '@osd/i18n';
 import { CoreStart } from 'src/core/public';
-import { EuiIconType } from '@elastic/eui/src/components/icon/icon';
+import { EuiIconType } from '@elastic/eui';
 import { IEmbeddable, ViewMode, EmbeddableStart } from '../../../../embeddable/public';
 import { DASHBOARD_CONTAINER_TYPE, DashboardContainer } from '../embeddable';
 import { ActionByType, IncompatibleActionError } from '../../../../ui_actions/public';

src/plugins/dashboard/public/application/actions/unlink_from_library_action.tsx

@@ -31,7 +31,7 @@
 import { i18n } from '@osd/i18n';
 import _ from 'lodash';
 import uuid from 'uuid';
-import { EuiIconType } from '@elastic/eui/src/components/icon/icon';
+import { EuiIconType } from '@elastic/eui';
 import { ActionByType, IncompatibleActionError } from '../../../../ui_actions/public';
 import {
   PanelNotFoundError,

src/plugins/embeddable/public/lib/actions/edit_panel_action.ts

@@ -32,7 +32,7 @@ import { i18n } from '@osd/i18n';
 import { ApplicationStart } from 'opensearch-dashboards/public';
 import { Action } from 'src/plugins/ui_actions/public';
 import { take } from 'rxjs/operators';
-import { EuiIconType } from '@elastic/eui/src/components/icon/icon';
+import { EuiIconType } from '@elastic/eui';
 import { ViewMode } from '../types';
 import { EmbeddableFactoryNotFoundError } from '../errors';
 import { EmbeddableStart } from '../../plugin';

src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/add_panel/add_panel_action.ts

@@ -32,7 +32,7 @@ import { i18n } from '@osd/i18n';
 import { Action, ActionExecutionContext } from 'src/plugins/ui_actions/public';
 import { NotificationsStart, OverlayStart } from 'src/core/public';
 import { EmbeddableStart } from 'src/plugins/embeddable/public/plugin';
-import { EuiIconType } from '@elastic/eui/src/components/icon/icon';
+import { EuiIconType } from '@elastic/eui';
 import { ViewMode } from '../../../../types';
 import { openAddPanelFlyout } from './open_add_panel_flyout';
 import { IContainer } from '../../../../containers';

src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/customize_title/customize_panel_action.ts

@@ -30,7 +30,7 @@
 
 import { i18n } from '@osd/i18n';
 import { Action } from 'src/plugins/ui_actions/public';
-import { EuiIconType } from '@elastic/eui/src/components/icon/icon';
+import { EuiIconType } from '@elastic/eui';
 import { ViewMode } from '../../../../types';
 import { IEmbeddable } from '../../../../embeddables';
 

src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/inspect_panel_action.ts

@@ -31,7 +31,7 @@
 import { i18n } from '@osd/i18n';
 import { Action } from 'src/plugins/ui_actions/public';
 import { Start as InspectorStartContract } from 'src/plugins/inspector/public';
-import { EuiIconType } from '@elastic/eui/src/components/icon/icon';
+import { EuiIconType } from '@elastic/eui';
 import { IEmbeddable } from '../../../embeddables';
 
 export const ACTION_INSPECT_PANEL = 'openInspector';

src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/remove_panel_action.ts

@@ -29,7 +29,7 @@
  */
 
 import { i18n } from '@osd/i18n';
-import { EuiIconType } from '@elastic/eui/src/components/icon/icon';
+import { EuiIconType } from '@elastic/eui';
 import { Action, IncompatibleActionError } from '../../../ui_actions';
 import { ContainerInput, IContainer } from '../../../containers';
 import { ViewMode } from '../../../types';

src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/components/step_index_pattern/components/status_message/status_message.tsx

@@ -31,7 +31,7 @@
 import React from 'react';
 
 import { EuiCallOut } from '@elastic/eui';
-import { EuiIconType } from '@elastic/eui/src/components/icon/icon';
+import { EuiIconType } from '@elastic/eui';
 
 import { FormattedMessage } from '@osd/i18n/react';
 import { MatchedItem } from '../../../../types';

src/plugins/management/public/types.ts

@@ -29,7 +29,7 @@
  */
 
 import { ScopedHistory, Capabilities } from 'opensearch-dashboards/public';
-import { EuiIconType } from '@elastic/eui/src/components/icon/icon';
+import { EuiIconType } from '@elastic/eui';
 import { ManagementSection, RegisterManagementSectionArgs } from './utils';
 import { ChromeBreadcrumb } from '../../../core/public/';
 

src/plugins/management/public/utils/management_item.ts

@@ -28,7 +28,7 @@
  * under the License.
  */
 
-import { EuiIconType } from '@elastic/eui/src/components/icon/icon';
+import { EuiIconType } from '@elastic/eui';
 import { CreateManagementItemArgs } from '../types';
 
 export class ManagementItem {

src/plugins/navigation/public/top_nav_menu/top_nav_menu_data.tsx

@@ -29,7 +29,7 @@
  */
 
 import { EuiButtonProps } from '@elastic/eui';
-import { EuiIconType } from '@elastic/eui/src/components/icon/icon';
+import { EuiIconType } from '@elastic/eui';
 
 export type TopNavMenuAction = (anchorElement: HTMLElement) => void;
 

src/plugins/ui_actions/public/actions/action.ts

@@ -29,7 +29,7 @@
  */
 
 import { UiComponent } from 'src/plugins/opensearch_dashboards_utils/public';
-import { EuiIconType } from '@elastic/eui/src/components/icon/icon';
+import { EuiIconType } from '@elastic/eui';
 import { ActionType, ActionContextMapping, BaseContext } from '../types';
 import { Presentable } from '../util/presentable';
 import { Trigger } from '../triggers';

src/plugins/ui_actions/public/actions/action_internal.ts

@@ -30,7 +30,7 @@
 
 // @ts-ignore
 import React from 'react';
-import { EuiIconType } from '@elastic/eui/src/components/icon/icon';
+import { EuiIconType } from '@elastic/eui';
 import { Action, ActionContext as Context, ActionDefinition } from './action';
 import { Presentable, PresentableGrouping } from '../util/presentable';
 import { uiToReactComponent } from '../../../opensearch_dashboards_react/public';

src/plugins/ui_actions/public/util/presentable.ts

@@ -28,7 +28,7 @@
  * under the License.
  */
 
-import { EuiIconType } from '@elastic/eui/src/components/icon/icon';
+import { EuiIconType } from '@elastic/eui';
 import { UiComponent } from 'src/plugins/opensearch_dashboards_utils/public';
 
 /**

src/plugins/vis_augmenter/public/actions/plugin_resource_delete_action.ts

@@ -5,7 +5,7 @@
 
 import { isEmpty } from 'lodash';
 import { i18n } from '@osd/i18n';
-import { EuiIconType } from '@elastic/eui/src/components/icon/icon';
+import { EuiIconType } from '@elastic/eui';
 import { Action, IncompatibleActionError } from '../../../ui_actions/public';
 import { getSavedAugmentVisLoader } from '../services';
 import { PluginResourceDeleteContext } from '../ui_actions_bootstrap';

src/plugins/vis_augmenter/public/actions/saved_object_delete_action.ts

@@ -5,7 +5,7 @@
 
 import { isEmpty } from 'lodash';
 import { i18n } from '@osd/i18n';
-import { EuiIconType } from '@elastic/eui/src/components/icon/icon';
+import { EuiIconType } from '@elastic/eui';
 import { Action, IncompatibleActionError } from '../../../ui_actions/public';
 import { getAugmentVisSavedObjs } from '../utils';
 import { getSavedAugmentVisLoader } from '../services';

src/plugins/vis_augmenter/public/view_events_flyout/actions/view_events_option_action.tsx

@@ -4,7 +4,7 @@
  */
 
 import { i18n } from '@osd/i18n';
-import { EuiIconType } from '@elastic/eui/src/components/icon/icon';
+import { EuiIconType } from '@elastic/eui';
 import { get, isEmpty } from 'lodash';
 import { VisualizeEmbeddable } from '../../../../visualizations/public';
 import { EmbeddableContext } from '../../../../embeddable/public';