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 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);
+};