From 1d2987f6dcbec1afb9adc632a39588643cd58855 Mon Sep 17 00:00:00 2001
From: "opensearch-trigger-bot[bot]"
 <98922864+opensearch-trigger-bot[bot]@users.noreply.github.com>
Date: Tue, 5 Sep 2023 17:59:52 -0700
Subject: [PATCH] Use themes' definitions to render the initial view. This
 impacts the loading screen font and colors. (#4936) (#4939)

Signed-off-by: Miki <miki@amazon.com>
(cherry picked from commit 5eedbb5f91f870baf2ddcd7099998625d0970f1e)
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

# Conflicts:
#	CHANGELOG.md

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 packages/osd-ui-shared-deps/theme.ts         |  1 +
 src/core/server/rendering/views/fonts.tsx    |  2 +-
 src/core/server/rendering/views/styles.tsx   | 23 ++++++-----
 src/core/server/rendering/views/template.tsx |  2 +-
 src/core/server/rendering/views/theme.ts     | 41 ++++++++++++++++++++
 5 files changed, 57 insertions(+), 12 deletions(-)
 create mode 100644 src/core/server/rendering/views/theme.ts

diff --git a/packages/osd-ui-shared-deps/theme.ts b/packages/osd-ui-shared-deps/theme.ts
index f7dfc371c89b..c803a5e37ef7 100644
--- a/packages/osd-ui-shared-deps/theme.ts
+++ b/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;
diff --git a/src/core/server/rendering/views/fonts.tsx b/src/core/server/rendering/views/fonts.tsx
index 3f2196b56558..61005f2bf209 100644
--- a/src/core/server/rendering/views/fonts.tsx
+++ b/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 {
diff --git a/src/core/server/rendering/views/styles.tsx b/src/core/server/rendering/views/styles.tsx
index 6b63924dad5d..c3edbfe01bfd 100644
--- a/src/core/server/rendering/views/styles.tsx
+++ b/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;
           }
 
diff --git a/src/core/server/rendering/views/template.tsx b/src/core/server/rendering/views/template.tsx
index 4185b9365512..8aa7903d8df1 100644
--- a/src/core/server/rendering/views/template.tsx
+++ b/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" />
diff --git a/src/core/server/rendering/views/theme.ts b/src/core/server/rendering/views/theme.ts
new file mode 100644
index 000000000000..736bbeca135d
--- /dev/null
+++ b/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);
+};