From 054f6b59a14eb8f21177ce36e60e73ff2cab9d27 Mon Sep 17 00:00:00 2001 From: Tomasz Kajtoch Date: Wed, 17 Jul 2024 18:50:31 +0200 Subject: [PATCH] fix: pr comments --- .../demo/actions_bar/actions_bar.tsx | 8 +++---- .../src/components/demo/editor/editor.tsx | 23 +++++++++++------- .../docusaurus-theme/src/theme/Root.styles.ts | 24 ++++++++++++++++--- 3 files changed, 39 insertions(+), 16 deletions(-) diff --git a/packages/docusaurus-theme/src/components/demo/actions_bar/actions_bar.tsx b/packages/docusaurus-theme/src/components/demo/actions_bar/actions_bar.tsx index de89d5b3e88..14130537e55 100644 --- a/packages/docusaurus-theme/src/components/demo/actions_bar/actions_bar.tsx +++ b/packages/docusaurus-theme/src/components/demo/actions_bar/actions_bar.tsx @@ -1,11 +1,9 @@ import { - euiBackgroundColor, EuiButton, EuiButtonIcon, EuiFlexGroup, EuiToolTip, useEuiMemoizedStyles, - euiBorderColor, UseEuiTheme, darken, } from '@elastic/eui'; @@ -23,7 +21,7 @@ export interface DemoActionsBarProps { const getDemoActionsBarStyles = (euiTheme: UseEuiTheme) => { return { actionsBar: css` - padding: ${euiTheme.euiTheme.size.s}; + padding: var(--eui-size-s); background: ${darken(euiTheme.euiTheme.colors.body, 0.05)}; border-top: 1px solid var(--docs-demo-border-color); @@ -34,8 +32,8 @@ const getDemoActionsBarStyles = (euiTheme: UseEuiTheme) => { } `, button: css` - background: ${euiBackgroundColor(euiTheme, 'primary', { method: 'opaque' })}; - border: 1px solid ${euiBorderColor(euiTheme, 'primary')}; + background: var(--eui-background-color-primary-opaque); + border: 1px solid var(--eui-border-color-primary); margin-right: auto; `, }; diff --git a/packages/docusaurus-theme/src/components/demo/editor/editor.tsx b/packages/docusaurus-theme/src/components/demo/editor/editor.tsx index 8ae582784db..4a5394025f3 100644 --- a/packages/docusaurus-theme/src/components/demo/editor/editor.tsx +++ b/packages/docusaurus-theme/src/components/demo/editor/editor.tsx @@ -1,8 +1,16 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + import { LiveEditor, LiveError } from 'react-live'; import { css } from '@emotion/react'; -import { useEuiTheme, euiFontSize, euiBackgroundColor, UseEuiTheme } from '@elastic/eui'; +import { useEuiMemoizedStyles, useEuiTheme } from '@elastic/eui'; -const getEditorStyles = (euiTheme: UseEuiTheme) => ({ +const getEditorStyles = () => ({ editor: css` font-family: var(--ifm-font-family-monospace); border-radius: 0 0 var(--docs-demo-border-radius) var(--docs-demo-border-radius); @@ -15,10 +23,10 @@ const getEditorStyles = (euiTheme: UseEuiTheme) => ({ // docusaurus overrides the default pre styles // forcing us to use higher specificity here && > pre { - font-size: ${euiFontSize(euiTheme, 's')}; - background: ${euiBackgroundColor(euiTheme, 'danger')}; - color: ${euiTheme.euiTheme.colors.dangerText}; - padding: ${euiTheme.euiTheme.size.xs} ${euiTheme.euiTheme.size.s}; + font-size: var(--eui-font-size-s); + background: var(--eui-background-color-danger); + color: var(--eui-color-danger-text); + padding: var(--eui-size-xs) var(--eui-size-s); margin: 0; border-radius: 0; } @@ -26,8 +34,7 @@ const getEditorStyles = (euiTheme: UseEuiTheme) => ({ }); export const DemoEditor = () => { - const euiTheme = useEuiTheme(); - const styles = getEditorStyles(euiTheme); + const styles = useEuiMemoizedStyles(getEditorStyles); return (
diff --git a/packages/docusaurus-theme/src/theme/Root.styles.ts b/packages/docusaurus-theme/src/theme/Root.styles.ts index 94883648bda..f1af0c84e44 100644 --- a/packages/docusaurus-theme/src/theme/Root.styles.ts +++ b/packages/docusaurus-theme/src/theme/Root.styles.ts @@ -1,4 +1,13 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + import { + euiBorderColor, euiFontSizeFromScale, euiLineHeightFromBaseline, useEuiBackgroundColor, @@ -8,7 +17,8 @@ import { // override docusaurus variables as needed // NOTE: we use define variables with style calculations here // on the global level to reduce how often they are called -export const getGlobalStyles = ({ euiTheme }: UseEuiTheme) => { +export const getGlobalStyles = (theme: UseEuiTheme) => { + const { euiTheme } = theme; const { font, base, colors, size } = euiTheme; const fontBodyScale = font.scale[font.body.scale]; const fontBase = { @@ -39,10 +49,13 @@ export const getGlobalStyles = ({ euiTheme }: UseEuiTheme) => { [data-theme='dark']:root { /* EUI theme variables */ --eui-background-color-primary: ${useEuiBackgroundColor('primary')}; + --eui-background-color-primary-opaque: ${useEuiBackgroundColor('primary', { method: 'opaque' })}; --eui-background-color-success: ${useEuiBackgroundColor('success')}; --eui-background-color-danger: ${useEuiBackgroundColor('danger')}; --eui-background-color-warning: ${useEuiBackgroundColor('warning')}; - + + --eui-color-danger-text: ${euiTheme.colors.dangerText}; + /* Docusaurus theme variables */ --ifm-background-color: ${colors.body}; --ifm-font-color-base: ${colors.text}; @@ -68,6 +81,11 @@ export const getGlobalStyles = ({ euiTheme }: UseEuiTheme) => { --eui-line-height-s: ${lineHeightS}; --eui-line-height-xs: ${lineHeightXS}; + --eui-size-xs: ${euiTheme.size.xs}; + --eui-size-s: ${euiTheme.size.s}; + + --eui-border-color-primary: ${euiBorderColor(theme, 'primary')}; + /* Docusaurus theme variables */ --ifm-font-family-base: ${fontBase.fontFamily}; --ifm-font-size-base: var(--eui-font-size-base); @@ -80,7 +98,7 @@ export const getGlobalStyles = ({ euiTheme }: UseEuiTheme) => { h1, h2, h3, h4, h5, h6 { margin-block-start: ${size.l}; margin-block-end: ${size.m}; - + font-weight: ${font.weight.bold}; }