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

…loading screen font and colors. (#4936) (#4939) Signed-off-by: Miki <[email protected]> (cherry picked from commit 5eedbb5) 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>
opensearch-project · Sep 6, 2023 · 1d2987f · 1d2987f
1 parent 6deddde
commit 1d2987f
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 12 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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);
+};