Use themes' definitions to render the initial view. This impacts the …

…loading screen font and colors. (opensearch-project#4936)

Signed-off-by: Miki <miki@amazon.com>

CHANGELOG.md

@@ -36,6 +36,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - [Decouple] Allow plugin manifest config to define semver compatible OpenSearch plugin and verify if it is installed on the cluster([#4612](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4612))
 - [Advanced Settings] Consolidate settings into new "Appearance" category and add category IDs ([#4845](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4845))
 - Adds Data explorer framework and implements Discover using it ([#4806](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4806))
+- [Theme] Use themes' definitions to render the initial view ([#4936](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4936/))
 - [Theme] Make `next` theme the default ([#4854](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4854/))
 
 ### 🐛 Bug Fixes

packages/osd-ui-shared-deps/theme.ts

@@ -28,6 +28,7 @@
  * under the License.
  */
 
+// ToDo: Use `THEME_SOURCES` from `src/core/server/rendering/views/theme` to generate the logic below.
 import LightTheme from '@elastic/eui/dist/eui_theme_light.json';
 
 const globals: any = typeof window === 'undefined' ? {} : window;

src/core/server/rendering/views/fonts.tsx

@@ -36,7 +36,7 @@ import { RenderingMetadata } from '../types';
 
 interface Props {
   url: RenderingMetadata['uiPublicUrl'];
-  theme: string;
+  theme: RenderingMetadata['themeVersion'];
 }
 
 interface FontFace {

src/core/server/rendering/views/styles.tsx

@@ -33,12 +33,19 @@
 import React, { FunctionComponent } from 'react';
 
 import { RenderingMetadata } from '../types';
+import { getThemeDefinition, ThemeColorSchemes } from './theme';
 
 interface Props {
   darkMode: RenderingMetadata['darkMode'];
+  theme: RenderingMetadata['themeVersion'];
 }
 
-export const Styles: FunctionComponent<Props> = ({ darkMode }) => {
+export const Styles: FunctionComponent<Props> = ({ theme, darkMode }) => {
+  const themeDefinition = getThemeDefinition(
+    theme,
+    darkMode ? ThemeColorSchemes.DARK : ThemeColorSchemes.LIGHT
+  );
+
   return (
     <style
       dangerouslySetInnerHTML={{
@@ -65,9 +72,10 @@ export const Styles: FunctionComponent<Props> = ({ darkMode }) => {
             display: block;
           }
 
+          {/* used on loading page */}
           .osdWelcomeView {
             line-height: 1.5;
-            background-color: ${darkMode ? '#1D1E24' : '#FFF'};
+            background-color: ${themeDefinition.ouiHeaderBackgroundColor};
             height: 100%;
             display: -webkit-box;
             display: -webkit-flex;
@@ -97,9 +105,8 @@ export const Styles: FunctionComponent<Props> = ({ darkMode }) => {
           }
 
           .osdWelcomeTitle {
-            color: #000;
+            color: ${themeDefinition.ouiColorFullShade};
             font-size: 20px;
-            font-family: sans-serif;
             margin: 16px 0;
             animation: fadeIn 1s ease-in-out;
             animation-fill-mode: forwards;
@@ -108,21 +115,17 @@ export const Styles: FunctionComponent<Props> = ({ darkMode }) => {
           }
 
           .osdWelcomeText {
-            font-family:
             display: inline-block;
             font-size: 14px;
-            font-family: sans-serif;
             line-height: 40px !important;
             height: 40px !important;
-            color: #98a2b3;
-            color: ${darkMode ? '#98A2B3' : '#69707D'};
+            color: ${themeDefinition.euiColorDarkShade};
           }
 
           .osdLoaderWrap {
             text-align: center;
             line-height: 1;
             text-align: center;
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial !important;
             letter-spacing: -.005em;
             -webkit-text-size-adjust: 100%;
             -ms-text-size-adjust: 100%;
@@ -147,7 +150,7 @@ export const Styles: FunctionComponent<Props> = ({ darkMode }) => {
             width: 32px;
             height: 4px;
             overflow: hidden;
-            background-color: ${darkMode ? '#25262E' : '#F5F7FA'};
+            background-color: ${themeDefinition.euiColorLightestShade};
             line-height: 1;
           }
 

src/core/server/rendering/views/template.tsx

@@ -116,7 +116,7 @@ export const Template: FunctionComponent<Props> = ({
         />
 
         <meta name="theme-color" content="#ffffff" />
-        <Styles darkMode={darkMode} />
+        <Styles darkMode={darkMode} theme={themeVersion} />
 
         {/* Inject stylesheets into the <head> before scripts so that KP plugins with bundled styles will override them */}
         <meta name="add-styles-here" />

src/core/server/rendering/views/theme.ts

@@ -0,0 +1,41 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { deepFreeze } from '@osd/std';
+
+export enum ThemeColorSchemes {
+  LIGHT = 'light',
+  DARK = 'dark',
+}
+export const THEME_SOURCES: {
+  [key: string]: {
+    [key in ThemeColorSchemes]: string;
+  };
+} = deepFreeze({
+  v7: {
+    [ThemeColorSchemes.LIGHT]: '@elastic/eui/dist/eui_theme_light.json',
+    [ThemeColorSchemes.DARK]: '@elastic/eui/dist/eui_theme_dark.json',
+  },
+  default: {
+    [ThemeColorSchemes.LIGHT]: '@elastic/eui/dist/eui_theme_next_light.json',
+    [ThemeColorSchemes.DARK]: '@elastic/eui/dist/eui_theme_next_dark.json',
+  },
+});
+
+export const getThemeDefinitionSource = (
+  theme: string,
+  colorScheme: ThemeColorSchemes = ThemeColorSchemes.LIGHT
+) => {
+  const themeName = theme in THEME_SOURCES ? theme : 'default';
+  return THEME_SOURCES[themeName][colorScheme];
+};
+
+export const getThemeDefinition = (
+  theme: string,
+  colorScheme: ThemeColorSchemes = ThemeColorSchemes.LIGHT
+) => {
+  const file = getThemeDefinitionSource(theme, colorScheme);
+  return require(file);
+};