diff --git a/packages/docusaurus-theme/src/components/call_out/index.tsx b/packages/docusaurus-theme/src/components/call_out/index.tsx index 4a651aaf18b..ebae6c1c34a 100644 --- a/packages/docusaurus-theme/src/components/call_out/index.tsx +++ b/packages/docusaurus-theme/src/components/call_out/index.tsx @@ -8,7 +8,7 @@ import { import { FunctionComponent, PropsWithChildren } from 'react'; type VARIANTS = 'info' | 'tip' | 'note' | 'danger' | 'warning'; -type TEXT_COLORS = 'primaryText' | 'successText' | 'dangerText' | 'warningText'; +type TEXT_COLORS = 'textPrimary' | 'textSuccess' | 'textDanger' | 'textWarning'; const VARIANT_TO_COLOR_MAP: Record< VARIANTS, @@ -16,23 +16,23 @@ const VARIANT_TO_COLOR_MAP: Record< > = { info: { backgroundVariable: 'var(--eui-background-color-primary)', - colorKey: 'primaryText', + colorKey: 'textPrimary', }, note: { backgroundVariable: 'var(--eui-background-color-primary)', - colorKey: 'primaryText', + colorKey: 'textPrimary', }, tip: { backgroundVariable: 'var(--eui-background-color-success)', - colorKey: 'successText', + colorKey: 'textSuccess', }, danger: { backgroundVariable: 'var(--eui-background-color-danger)', - colorKey: 'dangerText', + colorKey: 'textDanger', }, warning: { backgroundVariable: 'var(--eui-background-color-warning)', - colorKey: 'warningText', + colorKey: 'textWarning', }, }; @@ -52,7 +52,7 @@ const getStyles = (theme: UseEuiTheme, variant: VARIANTS) => { .alert { --ifm-alert-background-color: ${VARIANT_TO_COLOR_MAP[variant] .backgroundVariable}; - --ifm-alert-foreground-color: ${euiTheme.colors.text}; + --ifm-alert-foreground-color: ${euiTheme.colors.textParagraph}; --ifm-alert-padding-horizontal: ${euiTheme.size.base}; --ifm-alert-padding-vertical: ${euiTheme.size.base}; --ifm-alert-border-width: ${euiTheme.border.width.thin}; diff --git a/packages/docusaurus-theme/src/components/prop_table/prop_table.tsx b/packages/docusaurus-theme/src/components/prop_table/prop_table.tsx index 9c83d5b23b3..f3a9c30f851 100644 --- a/packages/docusaurus-theme/src/components/prop_table/prop_table.tsx +++ b/packages/docusaurus-theme/src/components/prop_table/prop_table.tsx @@ -7,9 +7,13 @@ import { EuiCode, UseEuiTheme, EuiTitle, - useEuiMemoizedStyles, EuiLink, + useEuiMemoizedStyles, + EuiLink, } from '@elastic/eui'; -import { ProcessedComponent, ProcessedComponentProp } from '@elastic/eui-docgen'; +import { + ProcessedComponent, + ProcessedComponentProp, +} from '@elastic/eui-docgen'; import { useCallback, useMemo } from 'react'; import { css } from '@emotion/react'; import { PropTableExtendedTypes } from './extended_types'; @@ -19,9 +23,8 @@ export interface PropTableProps { headingLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'; } -const getPropId = (prop: ProcessedComponentProp, componentName: string) => ( - `${encodeURIComponent(componentName)}-prop-${prop.name}` -); +const getPropId = (prop: ProcessedComponentProp, componentName: string) => + `${encodeURIComponent(componentName)}-prop-${prop.name}`; const getPropTableStyles = ({ euiTheme }: UseEuiTheme) => ({ propTable: css` @@ -53,7 +56,7 @@ const getPropTableStyles = ({ euiTheme }: UseEuiTheme) => ({ `, required: css` font-family: ${euiTheme.font.familyCode}; - color: ${euiTheme.colors.dangerText}; + color: ${euiTheme.colors.textDanger}; `, type: css` font-weight: ${euiTheme.font.weight.semiBold}; @@ -78,19 +81,23 @@ export const PropTable = ({ const styles = useEuiMemoizedStyles(getPropTableStyles); const tableItems = useMemo>( - () => Object.values(definition.props).sort( - (a, b) => +b.isRequired - +a.isRequired - ), - [definition.props], + () => + Object.values(definition.props).sort( + (a, b) => +b.isRequired - +a.isRequired + ), + [definition.props] ); const columns = useMemo>>( - () => ([ + () => [ { field: 'name', name: 'Prop', - width: "150", - render(value: ProcessedComponentProp['name'], prop: ProcessedComponentProp) { + width: '150', + render( + value: ProcessedComponentProp['name'], + prop: ProcessedComponentProp + ) { return ( {value} @@ -110,15 +117,24 @@ export const PropTable = ({ { field: 'description', name: 'Description and type', - render(value: ProcessedComponentProp['description'], prop: ProcessedComponentProp) { + render( + value: ProcessedComponentProp['description'], + prop: ProcessedComponentProp + ) { return ( - + {value?.trim() && ( - {value} + + {value} + )} {prop.type && ( - Type: {' '} + Type:{' '} {prop.type.raw || prop.type.name} @@ -126,28 +142,34 @@ export const PropTable = ({ )} ); - } + }, }, { field: 'defaultValue', name: 'Default value', - width: "120", - render(value: ProcessedComponentProp['defaultValue'], prop: ProcessedComponentProp) { + width: '120', + render( + value: ProcessedComponentProp['defaultValue'], + prop: ProcessedComponentProp + ) { if (prop.isRequired && !value?.trim().length) { - return Required + return Required; } return value && {value}; }, - } - ]), - [], + }, + ], + [] ); - const rowProps = useCallback((item: ProcessedComponentProp) => ({ - id: getPropId(item, definition.displayName), - css: styles.tableRow, - }), [definition.displayName]); + const rowProps = useCallback( + (item: ProcessedComponentProp) => ({ + id: getPropId(item, definition.displayName), + css: styles.tableRow, + }), + [definition.displayName] + ); return ( { return { root: css` - background: #1c1e23; // Color not available in EUI + background: ${euiTheme.colors + .backgroundBaseSubdued}; // Color not available in EUI padding: ${euiTheme.size.l}; text-align: center; `, diff --git a/packages/eui-theme-borealis/src/variables/_states.scss b/packages/eui-theme-borealis/src/variables/_states.scss index 2d6a4c8ff5f..88b6ec9021f 100644 --- a/packages/eui-theme-borealis/src/variables/_states.scss +++ b/packages/eui-theme-borealis/src/variables/_states.scss @@ -1,5 +1,5 @@ // Color when not using currentColor -$euiFocusRingColor: $euiColorPrimaryText; +$euiFocusRingColor: $euiColorTextPrimary; // Sizing $euiFocusRingAnimStartSize: 2px; diff --git a/packages/eui-theme-borealis/src/variables/colors/_colors_dark.scss b/packages/eui-theme-borealis/src/variables/colors/_colors_dark.scss index 17728f9ab36..ddf36a9a1a4 100644 --- a/packages/eui-theme-borealis/src/variables/colors/_colors_dark.scss +++ b/packages/eui-theme-borealis/src/variables/colors/_colors_dark.scss @@ -10,12 +10,12 @@ $euiColorGhost: $euiColorWhite !default; $euiColorInk: $euiColorBlack !default; // Brand -$euiColorPrimary: $euiColorPrimary70 !default; -$euiColorAccent: $euiColorAccent70 !default; -$euiColorAccentSecondary: $euiColorAccentSecondary70 !default; +$euiColorPrimary: $euiColorPrimary60 !default; +$euiColorAccent: $euiColorAccent60 !default; +$euiColorAccentSecondary: $euiColorAccentSecondary60 !default; $euiColorSuccess: $euiColorSuccess60 !default; $euiColorWarning: $euiColorWarning40 !default; -$euiColorDanger: $euiColorDanger70 !default; +$euiColorDanger: $euiColorDanger60 !default; // Shades $euiColorEmptyShade: $euiColorPlainDark !default; diff --git a/packages/eui-theme-borealis/src/variables/colors/_colors_dark.ts b/packages/eui-theme-borealis/src/variables/colors/_colors_dark.ts index 8b43d5cc2d0..c989a192c1b 100644 --- a/packages/eui-theme-borealis/src/variables/colors/_colors_dark.ts +++ b/packages/eui-theme-borealis/src/variables/colors/_colors_dark.ts @@ -26,12 +26,12 @@ import { SEMANTIC_COLORS } from './_semantic_colors'; */ export const dark_brand_colors: _EuiThemeBrandColors = { - primary: SEMANTIC_COLORS.primary70, - accent: SEMANTIC_COLORS.accent70, - accentSecondary: SEMANTIC_COLORS.accentSecondary70, + primary: SEMANTIC_COLORS.primary60, + accent: SEMANTIC_COLORS.accent60, + accentSecondary: SEMANTIC_COLORS.accentSecondary60, success: SEMANTIC_COLORS.success60, warning: SEMANTIC_COLORS.warning40, - danger: SEMANTIC_COLORS.danger70, + danger: SEMANTIC_COLORS.danger60, }; export const dark_brand_text_colors: _EuiThemeBrandTextColors = { diff --git a/packages/eui-theme-common/src/global_styling/functions/_colors.scss b/packages/eui-theme-common/src/global_styling/functions/_colors.scss index 25834e10add..e5ade788667 100644 --- a/packages/eui-theme-common/src/global_styling/functions/_colors.scss +++ b/packages/eui-theme-common/src/global_styling/functions/_colors.scss @@ -16,7 +16,7 @@ // For theming. Checks the text color and tells us whether it's light or dark. // Based on that we either tint (add white) or shade (add black). @function tintOrShade($color, $tint, $shade) { - @if (lightness($euiTextColor) > 50) { + @if (lightness($euiColorTextParagraph) > 50) { @return shade($color, $shade); } @else { @return tint($color, $tint); @@ -25,7 +25,7 @@ // The reverse of the above @function shadeOrTint($color, $shade, $tint) { - @if (lightness($euiTextColor) < 50) { + @if (lightness($euiColorTextParagraph) < 50) { @return shade($color, $shade); } @else { @return tint($color, $tint); @@ -35,7 +35,7 @@ // Similar to above, but uses the light or dark color based // on whether it's the light or dark theme @function lightOrDarkTheme($lightColor, $darkColor) { - @if (lightness($euiTextColor) < 50) { + @if (lightness($euiColorTextParagraph) < 50) { @return $lightColor; } @else { @return $darkColor; diff --git a/packages/eui-theme-common/src/global_styling/mixins/_form.scss b/packages/eui-theme-common/src/global_styling/mixins/_form.scss index 326a8491f87..c492afa8d90 100644 --- a/packages/eui-theme-common/src/global_styling/mixins/_form.scss +++ b/packages/eui-theme-common/src/global_styling/mixins/_form.scss @@ -40,7 +40,7 @@ @mixin euiFormControlText { @include euiFont; font-size: $euiFontSizeS; - color: $euiTextColor; + color: $euiColorTextParagraph; @include euiPlaceholderPerBrowser { color: $euiFormControlPlaceholderText; @@ -168,8 +168,8 @@ @mixin euiFormControlReadOnlyStyle { cursor: default; - color: $euiTextColor; - -webkit-text-fill-color: $euiTextColor; // Required for Safari + color: $euiColorTextParagraph; + -webkit-text-fill-color: $euiColorTextParagraph; // Required for Safari // Use transparency since there is no border and in case form is on a non-white background background: $euiFormBackgroundReadOnlyColor; border-color: transparent; diff --git a/packages/eui-theme-common/src/global_styling/mixins/_shadow.scss b/packages/eui-theme-common/src/global_styling/mixins/_shadow.scss index 431b7db3b81..71162d7978d 100644 --- a/packages/eui-theme-common/src/global_styling/mixins/_shadow.scss +++ b/packages/eui-theme-common/src/global_styling/mixins/_shadow.scss @@ -1,5 +1,5 @@ @function shadowOpacity($opacity) { - @if (lightness($euiTextColor) < 50) { + @if (lightness($euiColorTextParagraph) < 50) { @return $opacity * 1; } @else { @return $opacity * 2.5; diff --git a/packages/eui-theme-common/src/global_styling/mixins/_typography.scss b/packages/eui-theme-common/src/global_styling/mixins/_typography.scss index 7090f0e2371..65bea676952 100644 --- a/packages/eui-theme-common/src/global_styling/mixins/_typography.scss +++ b/packages/eui-theme-common/src/global_styling/mixins/_typography.scss @@ -53,13 +53,13 @@ } @mixin euiText { - color: $euiTextColor; + color: $euiColorTextParagraph; font-weight: $euiFontWeightRegular; } @mixin euiTitle($size: 'm') { @include euiTextBreakWord; - color: $euiTitleColor; + color: $euiColorTextHeading; @if (map-has-key($euiTitles, $size)) { @each $property, $value in map-get($euiTitles, $size) { diff --git a/packages/eui-theme-common/src/global_styling/variables/colors.ts b/packages/eui-theme-common/src/global_styling/variables/colors.ts index 7ec08680a5a..3e039725656 100644 --- a/packages/eui-theme-common/src/global_styling/variables/colors.ts +++ b/packages/eui-theme-common/src/global_styling/variables/colors.ts @@ -241,6 +241,10 @@ export type _EuiThemeBorderColors = { borderBasePlain: ColorModeSwitch; borderBaseSubdued: ColorModeSwitch; borderBaseDisabled: ColorModeSwitch; + /** + * Border used for floating elements on dark mode (e.g. popovers or tooltips) + * to increase the contrast with the background. + */ borderBaseFloating: ColorModeSwitch; borderBaseFormsColorSwatch: ColorModeSwitch; diff --git a/packages/eui/generator-eui/component/templates/component.styles.ts b/packages/eui/generator-eui/component/templates/component.styles.ts index 41c0e4db9f2..85cc5a9466a 100644 --- a/packages/eui/generator-eui/component/templates/component.styles.ts +++ b/packages/eui/generator-eui/component/templates/component.styles.ts @@ -12,7 +12,7 @@ import { UseEuiTheme } from '../../services'; export const <%= cssClassName %>Styles = ({ euiTheme }: UseEuiTheme) => { return { <%= cssClassName %>: css` // Always start the object with the first key being the name of the component - color: ${euiTheme.colors.primaryText}; + color: ${euiTheme.colors.textPrimary}; `, }; }; \ No newline at end of file diff --git a/packages/eui/src-docs/src/components/guide_page/_guide_page.scss b/packages/eui/src-docs/src/components/guide_page/_guide_page.scss index 9e45f31f4b7..824d3436456 100644 --- a/packages/eui/src-docs/src/components/guide_page/_guide_page.scss +++ b/packages/eui/src-docs/src/components/guide_page/_guide_page.scss @@ -28,11 +28,11 @@ } .euiSideNavItem--trunk > .euiSideNavItemButton .guideSideNav__item--inSearch .euiMark { - color: $euiColorPrimaryText; + color: $euiColorTextPrimary; } .guideSideNav__item--openSubTitle { - color: $euiTitleColor; + color: $euiColorTextHeading; } @include euiBreakpoint('xs', 's') { diff --git a/packages/eui/src-docs/src/components/guide_section/_guide_section.scss b/packages/eui/src-docs/src/components/guide_section/_guide_section.scss index a79016c6b04..c32e9570840 100644 --- a/packages/eui/src-docs/src/components/guide_section/_guide_section.scss +++ b/packages/eui/src-docs/src/components/guide_section/_guide_section.scss @@ -26,7 +26,7 @@ } .guideDemo__ghostBackground { - @if (lightness($euiTextColor) < 50) { + @if (lightness($euiColorTextParagraph) < 50) { color: $euiColorGhost; // Override EuiPanel specificity background: $euiColorDarkestShade !important; // stylelint-disable-line declaration-no-important diff --git a/packages/eui/src-docs/src/components/guide_theme_selector/guide_theme_selector.tsx b/packages/eui/src-docs/src/components/guide_theme_selector/guide_theme_selector.tsx index 88a73c1c4bc..ab49cad3b0b 100644 --- a/packages/eui/src-docs/src/components/guide_theme_selector/guide_theme_selector.tsx +++ b/packages/eui/src-docs/src/components/guide_theme_selector/guide_theme_selector.tsx @@ -96,7 +96,10 @@ export const GuideThemeSelector: React.FunctionComponent< {toggles.map((item) => item ? ( -
({ padding: euiTheme.size.s })}> +
({ padding: euiTheme.size.s })} + > { diff --git a/packages/eui/src-docs/src/views/guidelines/_index.scss b/packages/eui/src-docs/src/views/guidelines/_index.scss index 96895733917..081b8513088 100644 --- a/packages/eui/src-docs/src/views/guidelines/_index.scss +++ b/packages/eui/src-docs/src/views/guidelines/_index.scss @@ -227,7 +227,18 @@ } .guideSass__euiColorWarningText { - color: $euiColorWarningText; + color: $euiColorTextWarning; +} + +.guideSass__euiColorBackgroundFilledWarning { + padding: $euiSizeS; + color: $euiColorInk; + background: $euiColorBackgroundFilledWarning; +} + +.guideSass__euiColorBorderBaseWarning { + padding: $euiSizeS; + border: $euiBorderWidthThin solid $euiColorBorderBaseWarning; } .guideSass__tintMediumShade { diff --git a/packages/eui/src-docs/src/views/home/_home.scss b/packages/eui/src-docs/src/views/home/_home.scss index 4a11f02551f..241cae3a4e6 100644 --- a/packages/eui/src-docs/src/views/home/_home.scss +++ b/packages/eui/src-docs/src/views/home/_home.scss @@ -106,7 +106,7 @@ } .guideHome__footerHeart { - color: $euiColorAccentText; + color: $euiColorTextAccent; } .guideHome__footerLogo { @@ -120,7 +120,7 @@ } .guideHome__footerLogoText { - fill: $euiTextColor; + fill: $euiColorTextParagraph; } .guideHome__hero { diff --git a/packages/eui/src-docs/src/views/selectable/selectable_templates/sitewide_search.tsx b/packages/eui/src-docs/src/views/selectable/selectable_templates/sitewide_search.tsx index cb80843b43c..e4ccf739d93 100644 --- a/packages/eui/src-docs/src/views/selectable/selectable_templates/sitewide_search.tsx +++ b/packages/eui/src-docs/src/views/selectable/selectable_templates/sitewide_search.tsx @@ -105,7 +105,7 @@ export default () => { css: css` .euiSelectableTemplateSitewide__optionMeta--PINK { font-weight: ${euiTheme.font.weight.medium}; - color: ${euiTheme.colors.accentText}; + color: ${euiTheme.colors.textAccent}; } `, }} diff --git a/packages/eui/src-docs/src/views/theme/_props.tsx b/packages/eui/src-docs/src/views/theme/_props.tsx index 802782b2aa3..b96042b9ad8 100644 --- a/packages/eui/src-docs/src/views/theme/_props.tsx +++ b/packages/eui/src-docs/src/views/theme/_props.tsx @@ -99,7 +99,7 @@ export function getType(type: any, euiTheme: EuiThemeComputed<{}>) { {humanizeType(type.custom.origin.type)} diff --git a/packages/eui/src-docs/src/views/theme/borders/borders.tsx b/packages/eui/src-docs/src/views/theme/borders/borders.tsx index cf0ccca8e82..aeeb1cd7ddd 100644 --- a/packages/eui/src-docs/src/views/theme/borders/borders.tsx +++ b/packages/eui/src-docs/src/views/theme/borders/borders.tsx @@ -1,5 +1,7 @@ import React, { useContext, useMemo } from 'react'; +import { useEuiTheme } from '../../../../../src/services'; +import { AMSTERDAM_NAME_KEY } from '../../../../../src/themes'; import { EuiCode, EuiText } from '../../../../../src/components'; import { GuideTabbedPage } from '../../../components/guide_tabbed_page'; @@ -38,6 +40,7 @@ export const bordersSections = [ ]; export default () => { + const { euiTheme } = useEuiTheme(); const themeContext = useContext(ThemeContext); const currentLanguage = themeContext.themeLanguage; const showSass = currentLanguage.includes('sass'); @@ -113,10 +116,24 @@ export default () => {

{`${bordersSections[1].title}`}

-

- EUI only has one base color it uses for all borders (or calculated - borders). -

+ {euiTheme.themeName === AMSTERDAM_NAME_KEY ? ( +

+ EUI only has one base color it uses for all borders (or calculated + borders). +

+ ) : ( + <> +

+ EUI has one main base color it uses for almost all borders (or + calculated borders). +

+

+ Only form specific borders use the + euiTheme.colors.borderBasePlain color token + instead. +

+ + )} {colorContent} diff --git a/packages/eui/src-docs/src/views/theme/breakpoints/_breakpoints_js.tsx b/packages/eui/src-docs/src/views/theme/breakpoints/_breakpoints_js.tsx index 23c749f41b8..003f7ba4a14 100644 --- a/packages/eui/src-docs/src/views/theme/breakpoints/_breakpoints_js.tsx +++ b/packages/eui/src-docs/src/views/theme/breakpoints/_breakpoints_js.tsx @@ -124,13 +124,13 @@ useIsWithinMinBreakpoint('s')`} font-weight: ${euiTheme.font.weight.bold}; } ${useEuiBreakpoint(['xs', 's'])} { - color: ${euiTheme.colors.dangerText}; + color: ${euiTheme.colors.textDanger}; } ${useEuiBreakpoint(['m'])} { - color: ${euiTheme.colors.warningText}; + color: ${euiTheme.colors.textWarning}; } ${useEuiBreakpoint(['l', 'xl'])} { - color: ${euiTheme.colors.successText}; + color: ${euiTheme.colors.textSuccess}; } `} > @@ -174,10 +174,10 @@ useIsWithinMinBreakpoint('s')`}

diff --git a/packages/eui/src-docs/src/views/theme/color/_color_js.tsx b/packages/eui/src-docs/src/views/theme/color/_color_js.tsx index 41fa0bd5edc..0416f635449 100644 --- a/packages/eui/src-docs/src/views/theme/color/_color_js.tsx +++ b/packages/eui/src-docs/src/views/theme/color/_color_js.tsx @@ -1,4 +1,4 @@ -import React, { FunctionComponent, useState } from 'react'; +import React, { FunctionComponent } from 'react'; import { Link } from 'react-router-dom'; import { css } from '@emotion/react'; import { transparentize, useEuiTheme } from '../../../../../src/services'; @@ -10,18 +10,17 @@ import { EuiColorPickerSwatch, EuiText, BACKGROUND_COLORS, - EuiButtonGroup, - EuiDescribedFormGroup, - EuiPanel, - EuiSpacer, logicalCSS, useEuiPaddingCSS, + AMSTERDAM_NAME_KEY, } from '../../../../../src'; import { EuiThemeColors, ThemeRowType } from '../_props'; import { ThemeExample } from '../_components/_theme_example'; import { + background_colors, + border_colors, brand_colors, brand_text_colors, shade_colors, @@ -29,11 +28,6 @@ import { text_colors, } from '../../../../../src/themes/amsterdam/global_styling/variables/_colors'; import { ThemeValuesTable } from '../_components/_theme_values_table'; -import { - _EuiThemeBackgroundColors, - _EuiThemeTransparentBackgroundColors, - getTokenName, -} from '@elastic/eui-theme-common'; export const brandKeys = Object.keys(brand_colors); @@ -98,27 +92,31 @@ export const TextJS: FunctionComponent = ({ description }) => { description={ <> {description} -

- If your background color is anything other than or darker than the{' '} - body color, you will want to re-calculate the - high contrast version by using the{' '} - - makeHighContrastColor(foreground)(background) - {' '} - method. -

+ {euiTheme.themeName === AMSTERDAM_NAME_KEY && ( +

+ If your background color is anything other than or darker than + the body color, you will want to re-calculate + the high contrast version by using the{' '} + + + makeHighContrastColor(foreground)(background) + + {' '} + method. +

+ )} } example={
- color: {euiTheme.colors.warningText} + color: {euiTheme.colors.textWarning}
} - snippet={'color: ${euiTheme.colors.warningText};'} + snippet={'color: ${euiTheme.colors.textWarning};'} snippetLanguage="emotion" /> @@ -158,6 +156,111 @@ export const TextValuesJS = () => { ); }; +export const backgroundKeys = Object.keys(background_colors); + +export const BackgroundJS: FunctionComponent = ({ + description, +}) => { + const { euiTheme } = useEuiTheme(); + + return ( + <> + euiTheme.colors[background]} + description={<>{description}} + example={ +
+ + background: {euiTheme.colors.backgroundFilledWarning} + +
+ } + snippet={ + 'background-color: ${euiTheme.colors.backgroundFilledWarning};' + } + snippetLanguage="emotion" + /> + + ); +}; + +export const BackgroundValuesJS = () => { + const { euiTheme } = useEuiTheme(); + const props = getPropsFromComponent(EuiThemeColors); + + return ( + <> + { + return { + id: color, + token: `colors.${color}`, + type: props[color], + // @ts-ignore TODO + value: euiTheme.colors[color], + }; + })} + render={(item) => } + /> + + ); +}; + +export const borderKeys = Object.keys(border_colors); + +export const BorderJS: FunctionComponent = ({ description }) => { + const { euiTheme } = useEuiTheme(); + + return ( + <> + euiTheme.colors[border]} + description={<>{description}} + example={ +
+ border-color: {euiTheme.colors.borderBaseWarning} +
+ } + snippet={'border-color: ${euiTheme.colors.borderBaseWarning};'} + snippetLanguage="emotion" + /> + + ); +}; + +export const BorderValuesJS = () => { + const { euiTheme } = useEuiTheme(); + const props = getPropsFromComponent(EuiThemeColors); + + return ( + <> + { + return { + id: color, + token: `colors.${color}`, + type: props[color], + // @ts-ignore TODO + value: euiTheme.colors[color], + }; + })} + render={(item) => } + /> + + ); +}; + export const shadeKeys = Object.keys(shade_colors); export const ShadeJS: FunctionComponent = ({ description }) => { @@ -225,17 +328,17 @@ export const SpecialJS: FunctionComponent = ({ description }) => {
- This text is always white and the background always black. + This text is always light and the background always dark.
} - snippet={`color: \${euiTheme.colors.ghost}; - background-color: \${euiTheme.colors.ink};`} + snippet={`color: \${euiTheme.colors.plainLight}; + background-color: \${euiTheme.colors.plainDark};`} snippetLanguage="emotion" /> @@ -245,7 +348,12 @@ export const SpecialJS: FunctionComponent = ({ description }) => { export const SpecialValuesJS = () => { const { euiTheme } = useEuiTheme(); const props = getPropsFromComponent(EuiThemeColors); - const allSpecialKeys = specialKeys.concat(['ghost', 'ink']); + const allSpecialKeys = specialKeys.concat([ + 'ghost', + 'ink', + 'plainLight', + 'plainDark', + ]); return ( <> @@ -273,8 +381,8 @@ export const UtilsJS = () => {

To all but ensure proper contrast of text to background, we recommend - using our pre-defined shades of background colors based on the{' '} - EuiTheme brand colors. You can also use{' '} + using the semantic background tokens like{' '} + backgroundBasePrimary. You can also use{' '} EuiPanel {' '} @@ -317,74 +425,3 @@ const cssStyles = [colorStyles['accent']]; ); }; - -export const UtilsValuesJS = () => { - const { euiTheme } = useEuiTheme(); - const backgroundButtons = ['opaque', 'transparent'].map((m) => { - return { - id: m, - label: m, - }; - }); - const [backgroundSelected, setBackgroundSelected] = useState( - backgroundButtons[0].id - ); - - return ( - <> - - Different colors for different contexts} - description={ -

- While the hook accepts rendering the value as opaque or - transparent, we highly suggest reserving transparent for use only - during interactive states like hover and focus. -

- } - > - - setBackgroundSelected(id)} - color="accent" - isFullWidth - /> - - - - - { - const backgroundToken = getTokenName('backgroundBase', color); - const transparentBackgroundToken = - color === 'transparent' - ? backgroundToken - : getTokenName('backgroundTransparent', color); - - const token = - backgroundSelected === 'transparent' - ? (transparentBackgroundToken as keyof _EuiThemeTransparentBackgroundColors) - : (backgroundToken as keyof _EuiThemeBackgroundColors); - - return { - id: color, - token, - value: euiTheme.colors[token], - }; - })} - render={(item) => ( - - )} - /> - - ); -}; diff --git a/packages/eui/src-docs/src/views/theme/color/_color_sass.tsx b/packages/eui/src-docs/src/views/theme/color/_color_sass.tsx index c39d808a29e..d4c354ddfa2 100644 --- a/packages/eui/src-docs/src/views/theme/color/_color_sass.tsx +++ b/packages/eui/src-docs/src/views/theme/color/_color_sass.tsx @@ -85,10 +85,10 @@ export const TextSass: FunctionComponent = ({ description }) => { } example={
- color: {values.euiColorWarningText} + color: {values.euiColorTextWarning}
} - snippet={'color: $euiColorWarningText;'} + snippet={'color: $euiColorTextWarning;'} snippetLanguage="scss" /> @@ -97,11 +97,105 @@ export const TextSass: FunctionComponent = ({ description }) => { export const TextValuesSass = () => { const values = useJsonVars(); + const textColors = [ + ...Object.keys(values).filter((v) => v.startsWith('euiColorText')), + ...euiTextColors, + ]; return ( <> { + items={textColors.map((color) => { + return { + id: color, + token: `$${color}`, + value: values[color], + }; + })} + render={(item) => } + /> + + ); +}; + +export const BackgroundSass: FunctionComponent = ({ + description, +}) => { + const values = useJsonVars(); + + return ( + <> + $euiColor[Background]} + description={<>{description}} + example={ +
+ + background: {values.euiColorBackgroundFilledWarning} + +
+ } + snippet={'background-color: $euiColorBackgroundFilledWarning;'} + snippetLanguage="scss" + /> + + ); +}; + +export const BackgroundValuesSass = () => { + const values = useJsonVars(); + const backgroundColors = Object.keys(values).filter((v) => + v.startsWith('euiColorBackground') + ); + + return ( + <> + { + return { + id: color, + token: `$${color}`, + value: values[color], + }; + })} + render={(item) => } + /> + + ); +}; + +export const BorderSass: FunctionComponent = ({ + description, +}) => { + const values = useJsonVars(); + + return ( + <> + $euiColor[Border]} + description={<>{description}} + example={ +
+ border-color: {values.euiColorBorderBaseWarning} +
+ } + snippet={'border-color: $euiColorBorderBaseWarning;'} + snippetLanguage="scss" + /> + + ); +}; + +export const BorderValuesSass = () => { + const values = useJsonVars(); + const borderColors = Object.keys(values).filter((v) => + v.startsWith('euiColorBorder') + ); + + return ( + <> + { return { id: color, token: `$${color}`, @@ -162,6 +256,8 @@ const euiSpecialColors = [ 'euiColorDisabledText', 'euiColorGhost', 'euiColorInk', + 'euiColorPlainLight', + 'euiColorPlainDark', ]; export const SpecialSass: FunctionComponent = ({ @@ -175,12 +271,12 @@ export const SpecialSass: FunctionComponent = ({ example={
- This text is always white and the background always black. + This text is always light and the background always dark.
} - snippet={`color: \$euiColorGhost; -background-color: \$euiColorInk;`} + snippet={`color: \$euiColorPlainLight; +background-color: \$euiColorPlainDark;`} snippetLanguage="scss" /> diff --git a/packages/eui/src-docs/src/views/theme/color/_contrast_js.tsx b/packages/eui/src-docs/src/views/theme/color/_contrast_js.tsx index b675c444eb3..aa894dd1ff8 100644 --- a/packages/eui/src-docs/src/views/theme/color/_contrast_js.tsx +++ b/packages/eui/src-docs/src/views/theme/color/_contrast_js.tsx @@ -40,14 +40,25 @@ export const ColorSectionJS: FunctionComponent = ({ tokenName, }) => { const { euiTheme } = useEuiTheme(); + + const colorValue = _colorValue || euiTheme.colors[color]; + const colorsForContrast = showTextVariants ? textVariants : allowedColors; + const colorsWithMinContrast = colorsForContrast.filter((_color) => { + const backgroundColor = colorValue; + const foregroundColor = + euiTheme.colors[_color as keyof _EuiThemeColorsMode] ?? _color; + + const contrast = chroma.contrast(backgroundColor, foregroundColor) ?? 0; + + return contrast && contrast >= minimumContrast; + }); + function colorIsCore(color: string) { return brandKeys.includes(color) || brandTextKeys.includes(color); } - const colorValue = _colorValue || euiTheme.colors[color]; - return ( = ({ minimumContrast={minimumContrast} /> )} - {colorsForContrast.map((color2) => { + {colorsWithMinContrast.map((color2) => { if (colorIsCore(colorValue) && colorIsCore(color2)) { // i.e. don't render if both are core colors return; diff --git a/packages/eui/src-docs/src/views/theme/color/_contrast_sass.tsx b/packages/eui/src-docs/src/views/theme/color/_contrast_sass.tsx index ade9ce9dde9..5b7507cfa28 100644 --- a/packages/eui/src-docs/src/views/theme/color/_contrast_sass.tsx +++ b/packages/eui/src-docs/src/views/theme/color/_contrast_sass.tsx @@ -18,6 +18,7 @@ import { useJsonVars } from '../_json/_get_json_vars'; export const coreColors = [ 'euiColorPrimary', 'euiColorAccent', + 'euiColorAccentSecondary', 'euiColorSuccess', 'euiColorWarning', 'euiColorDanger', @@ -29,6 +30,12 @@ export const coreTextVariants = [ 'euiColorSuccessText', 'euiColorWarningText', 'euiColorDangerText', + 'euiColorTextPrimary', + 'euiColorTextAccent', + 'euiColorTextAccentSecondary', + 'euiColorTextSuccess', + 'euiColorTextWarning', + 'euiColorTextDanger', ]; export const grayColors = [ @@ -43,13 +50,64 @@ export const grayColors = [ export const textOnly = [ 'euiTextColor', - 'euiTextSubduedColor', 'euiTitleColor', + 'euiTextSubduedColor', + 'euiLinkColor', + 'euiColorTextParagraph', + 'euiColorTextHeading', + 'euiColorTextSubdued', + 'euiColorTextDisabled', + 'euiColorTextInverse', +]; + +export const backgroundBaseColors = [ + 'euiColorBackgroundBasePrimary', + 'euiColorBackgroundBaseAccent', + 'euiColorBackgroundBaseAccentSecondary', + 'euiColorBackgroundBaseSuccess', + 'euiColorBackgroundBaseWarning', + 'euiColorBackgroundBaseDanger', + 'euiColorBackgroundBaseSubdued', + 'euiColorBackgroundBaseDisabled', + 'euiColorBackgroundBaseHighlighted', + 'euiColorBackgroundBasePlain', +]; + +export const backgroundLightColors = [ + 'euiColorBackgroundLightPrimary', + 'euiColorBackgroundLightAccent', + 'euiColorBackgroundLightAccentSecondary', + 'euiColorBackgroundLightSuccess', + 'euiColorBackgroundLightWarning', + 'euiColorBackgroundLightDanger', + 'euiColorBackgroundLightText', +]; + +export const backgroundFilledColors = [ + 'euiColorBackgroundFilledPrimary', + 'euiColorBackgroundFilledAccent', + 'euiColorBackgroundFilledAccentSecondary', + 'euiColorBackgroundFilledSuccess', + 'euiColorBackgroundFilledWarning', + 'euiColorBackgroundFilledDanger', + 'euiColorBackgroundFilledText', +]; + +export const backgroundColors = [ + ...backgroundBaseColors, + ...backgroundLightColors, + ...backgroundFilledColors, ]; export const textColors = [...textOnly, 'euiColorGhost', 'euiColorInk']; -export const allowedColors = [...coreColors, ...grayColors]; +export const allowedColors = [ + ...coreColors, + ...grayColors, + 'euiColorDisabled', + 'euiColorGhost', + 'euiColorInk', +]; export const textVariants = [...coreTextVariants, ...textColors]; @@ -71,6 +129,15 @@ export const ColorSectionSass: FunctionComponent = ({ const palette = useJsonVars(); const colorsForContrast = showTextVariants ? textVariants : allowedColors; + const colorsWithMinContrast = colorsForContrast.filter((_color) => { + const backgroundColor = palette[color]; + const foregroundColor = palette[_color]; + + const contrast = chroma.contrast(backgroundColor, foregroundColor); + + return contrast && contrast >= minimumContrast; + }); + function colorIsCore(color: string) { return coreColors.includes(color) || coreTextVariants.includes(color); } @@ -96,7 +163,7 @@ export const ColorSectionSass: FunctionComponent = ({ minimumContrast={minimumContrast} /> )} - {colorsForContrast.map((color2) => { + {colorsWithMinContrast.map((color2) => { if (colorIsCore(color) && colorIsCore(color2)) { // i.e. don't render if both are core colors return; @@ -201,8 +268,10 @@ color: $${foreground};`; function sanitizeColorName(color: string) { const string = color.split('euiColor').pop(); + // Make sure `Color` is removed where `Color` is used at the end of the name + const noColor = string?.replace('Color', ''); // Make sure `eui` is removed if it wasnt the full `euiColor` string - const noEui = string?.split('eui').pop(); + const noEui = noColor?.split('eui').pop(); // Add space between caplital letters return noEui?.replace(/([A-Z])/g, ' $1').trim(); } diff --git a/packages/eui/src-docs/src/views/theme/color/contrast.tsx b/packages/eui/src-docs/src/views/theme/color/contrast.tsx index e724687c8e3..a8601485b86 100644 --- a/packages/eui/src-docs/src/views/theme/color/contrast.tsx +++ b/packages/eui/src-docs/src/views/theme/color/contrast.tsx @@ -1,4 +1,15 @@ -import React, { useState, useContext, useCallback } from 'react'; +import React, { + useState, + useContext, + useCallback, + FunctionComponent, + useMemo, +} from 'react'; +import { + _EuiThemeBackgroundColors, + getTokenName, +} from '@elastic/eui-theme-common'; + import { ThemeContext } from '../../../components/with_theme'; import { @@ -17,6 +28,9 @@ import { ColorSectionSass, coreColors as sassCoreColors, grayColors as sassGrayColors, + backgroundBaseColors as sassBackgroundBaseColors, + backgroundLightColors as sassBackgroundLightColors, + backgroundFilledColors as sassBackgroundFilledColors, } from './_contrast_sass'; import { ColorSectionJS } from './_contrast_js'; @@ -32,10 +46,6 @@ import { _EuiButtonColor, } from '../../../../../src/global_styling/mixins/_button'; import { GuideSection } from '../../../components/guide_section/guide_section'; -import { - _EuiThemeBackgroundColors, - getTokenName, -} from '@elastic/eui-theme-common'; // This array is used inside routes.js to create the sidenav sub-sections export const contrastSections = [ @@ -48,6 +58,12 @@ export const contrastSections = [ const background_colors = BACKGROUND_COLORS.filter( (color) => color !== 'transparent' ); +const brand_background_colors = [...BACKGROUND_COLORS, 'text'].filter( + (color) => + !['transparent', 'plain', 'subdued', 'disabled', 'highlighted'].includes( + color + ) +); const backgroundButtons = [ 'container', // 'hover', Commenting out for now since contrast can't be calculated on transparent values @@ -60,7 +76,6 @@ const backgroundButtons = [ }); export default () => { - const euiTheme = useEuiTheme(); const [showTextVariants, setShowTextVariants] = useState(true); const [contrastValue, setContrastValue] = useState(4.5); @@ -88,6 +103,33 @@ export default () => { const showSass = useContext(ThemeContext).themeLanguage.includes('sass'); + const backgroundBaseColors = useMemo( + () => + backgroundColors.map((color: string) => { + return getTokenName( + 'backgroundBase', + color + ) as keyof _EuiThemeBackgroundColors; + }), + [backgroundColors] + ); + + const backgroundLightColors = brand_background_colors.map((color: string) => { + return getTokenName( + 'backgroundLight', + color + ) as keyof _EuiThemeBackgroundColors; + }); + + const backgroundFilledColors = brand_background_colors.map( + (color: string) => { + return getTokenName( + 'backgroundFilled', + color + ) as keyof _EuiThemeBackgroundColors; + } + ); + return ( <> @@ -240,20 +282,14 @@ export default () => { })} - +

{`${contrastSections[3].title}`}

 - {showSass ? ( -

- - Background colors only exist for CSS-in-JS styling. - -

- ) : ( + {!showSass && ( <> { - - {backgroundColors.map((color: string) => { - const backgroundToken = getTokenName( - 'backgroundBase', - color - ) as keyof _EuiThemeBackgroundColors; - - switch (backgroundSelected) { - case 'container': - return ( - - - - - ); - - case 'button': - return ( - color !== 'disabled' && ( - - - - - ) - ); - } - })} )} + <> + {backgroundSelected === 'button' ? ( + !showSass && ( + + ) + ) : ( + <> + + + + + + + )} +
); }; + +const BackgroundColorSection: FunctionComponent<{ + title: string; + backgroundColors: string[]; + type: string; + language?: 'js' | 'scss'; + contrastValue: number; + showTextVariants: boolean; +}> = ({ + title, + backgroundColors, + type, + language = 'js', + contrastValue, + showTextVariants, +}) => { + const euiThemeContext = useEuiTheme(); + const { euiTheme } = euiThemeContext; + + const content = backgroundColors.map((color: string) => { + switch (type) { + case 'container': + return ( + + {language === 'scss' ? ( + + ) : ( + + )} + + + + ); + + case 'button': + return ( + color !== 'disabled' && ( + + + + + ) + ); + } + }); + + return ( + <> + +

{title}

+ + + {content} + + ); +}; diff --git a/packages/eui/src-docs/src/views/theme/color/functions.tsx b/packages/eui/src-docs/src/views/theme/color/functions.tsx index 22dd2d0f56a..7744d94e35f 100644 --- a/packages/eui/src-docs/src/views/theme/color/functions.tsx +++ b/packages/eui/src-docs/src/views/theme/color/functions.tsx @@ -9,7 +9,7 @@ import { TextSections } from './_functions_isDark'; import { TintShadeSections } from './_functions_shadeTint'; import { TransparencySections } from './_functions_transparency'; -import { UtilsJS, UtilsValuesJS } from './_color_js'; +import { UtilsJS } from './_color_js'; // This array is used inside routes.js to create the sidenav sub-sections export const colorsFunctionsSections = [ @@ -55,14 +55,10 @@ export default () => { - - - - )} - +

Utilities

 @@ -76,7 +72,7 @@ export default () => { - +

{ - +

{ + const { euiTheme } = useEuiTheme(); + + const description = + euiTheme.themeName === AMSTERDAM_NAME_KEY ? ( + <> +

+ Elastic UI builds with a very limited palette. It uses a core set of + three colors with a green / orange / red qualitative set and combined + with a six-color grayscale. Variation beyond these colors is minimal + and always done with math manipulation against the original set. +

+

+ When switching between light and dark color modes, the theme keys do + not change, only their values do. This is why most keys are not named + for their evaluated value but by their{' '} + purpose. +

+ + ) : ( + <> +

+ Elastic UI builds with a color palette that is based on predefined + 14-step scales for a core set of three colors (blue / teal / pink) as + well as a green / yellow / red qualitative set and combined with a + 28-step grayscale. Colors are defined to work well when combined for + their semantic purpose. +

+

+ When switching between light and dark color modes, the theme keys do + not change, only their values do. +

+ + ); + + return ( + +

{description}

+ + ); +}; + export const colorsInfo = { title: 'Colors', notice: , showThemeLanguageToggle: true, - intro: ( - -

- Elastic UI builds with a very limited palette. It uses a core set of - three colors with a green / orange / red qualitative set and combined - with a six-color grayscale. Variation beyond these colors is minimal and - always done with math manipulation against the original set. -

-

- When switching between light and dark color modes, the theme keys do not - change, only their values do. This is why most keys are not named for - their evaluated value but by their{' '} - purpose. -

- - ), + intro: , }; // This array is used inside routes.js to create the sidenav sub-sections export const colorsSections = [ { title: 'Brand colors', id: 'brand-colors' }, { title: 'Text colors', id: 'text-colors' }, + { title: 'Background colors', id: 'background-colors' }, + { title: 'Border colors', id: 'border-colors' }, { title: 'Shades', id: 'shades' }, { title: 'Special colors', id: 'special-colors' }, ]; export default () => { + const { euiTheme } = useEuiTheme(); const themeContext = useContext(ThemeContext); const currentLanguage = themeContext.themeLanguage; const showSass = currentLanguage.includes('sass'); @@ -85,15 +129,23 @@ export default () => { return ; }, [showSass]); + const backgroundContent = useMemo(() => { + if (showSass) return ; + return ; + }, [showSass]); + + const borderContent = useMemo(() => { + if (showSass) return ; + return ; + }, [showSass]); + const shadesContent = useMemo(() => { const description = ( <>

Since the EUI colors usually evaluate to a hex value, the easiest way - to perform color operations like transparency, shading, or tinting is - by using the EUI provided methods of{' '} - transparentize(), shade(), and{' '} - tint() respectively. + to perform color operations like transparency by using the EUI + provided method of transparentize().

For all available color functions see the{' '} @@ -137,18 +189,25 @@ export default () => { {showSass ? : } + {/* Text colors */}

{`${colorsSections[1].title}`}

- Specific text colors calculated off either the brand or shade - colors. -

-

- Each brand color also has a corresponding text variant that has been - calculated for proper (at least 4.5) contrast against{' '} - colors.body and should be used specifically when - coloring text. As is used in{' '} + {euiTheme.themeName === AMSTERDAM_NAME_KEY ? ( + <> + Each brand color also has a corresponding text variant that has + been calculated for proper (at least 4.5) contrast against{' '} + colors.body and should be used specifically + when coloring text. + + ) : ( + <> + Each brand color also has a corresponding text variant that + should be used specifically when coloring text. + + )} + As is used in{' '} EuiTextColor @@ -165,9 +224,60 @@ export default () => { {showSass ? : } + {/* Background colors */}

{`${colorsSections[2].title}`}

+

+ Semantic background colors. These should be used according to their + semantic purpose. +

+

+ If a border is needed use the semantically related border color, + e.g. backgroundBasePrimary with{' '} + borderBasePrimary. +

+ + + + + {backgroundContent} + + + + {showSass ? : } + + + {/* Border colors */} + + +

{`${colorsSections[3].title}`}

+

+ Semantic border colors. These should be used according to their + semantic purpose. +

+

+ The default border color (used as border.color) + is borderBaseSubdued. Use the{' '} + base border colors for most cases. Use{' '} + borderBasePlain for a slightly stronger border + (e.g. for forms). +

+ + + + + {borderContent} + + + + {showSass ? : } + + + {/* Shade colors */} + + +

{`${colorsSections[4].title}`}

A six-color grayscale palette. Variation beyond these colors is minimal and always done through computations against this set. @@ -183,10 +293,11 @@ export default () => { {showSass ? : } + {/* Special colors */} {' '} -

{`${colorsSections[3].title}`}

+

{`${colorsSections[5].title}`}

These are used a lot for special cases.

 diff --git a/packages/eui/src-docs/src/views/theme/computed.tsx b/packages/eui/src-docs/src/views/theme/computed.tsx deleted file mode 100644 index 266da5ff125..00000000000 --- a/packages/eui/src-docs/src/views/theme/computed.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import React, { FunctionComponent, ReactNode } from 'react'; -import { EuiIcon } from '../../../../src/components/icon'; -import { EuiCode } from '../../../../src/components/code'; -import { EuiText } from '../../../../src/components/text'; -import { EuiThemeProvider, useEuiTheme } from '../../../../src/services'; - -const Box: FunctionComponent<{ children: ReactNode }> = ({ children }) => { - const { euiTheme } = useEuiTheme(); - - return ( - -

- {children} -

- - ); -}; - -export default () => { - const primaryOverrides = { - colors: { - LIGHT: { - primary: '#db1dde', - }, - DARK: { - primary: '#e378e4', - }, - }, - }; - - return ( -
- - - The colors.primary value has been changed to{' '} - #db1dde (#e378e4 for dark mode) - and so the calculated value of colors.primaryText{' '} - has also been updated. - - -
- ); -}; diff --git a/packages/eui/src-docs/src/views/theme/customizing/_colors.js b/packages/eui/src-docs/src/views/theme/customizing/_colors.js index d73468b02c1..30f67e555c4 100644 --- a/packages/eui/src-docs/src/views/theme/customizing/_colors.js +++ b/packages/eui/src-docs/src/views/theme/customizing/_colors.js @@ -16,6 +16,8 @@ import { } from '../../../../../src'; import { + background_colors, + border_colors, brand_colors, brand_text_colors, shade_colors, @@ -31,6 +33,8 @@ import { EuiThemeColors } from '../_props'; const brandKeys = Object.keys(brand_colors); const brandTextKeys = Object.keys(brand_text_colors); +const backgroundKeys = Object.keys(background_colors); +const borderKeys = Object.keys(border_colors); const shadeKeys = Object.keys(shade_colors); const specialKeys = Object.keys(special_colors); const textKeys = Object.keys(text_colors); @@ -159,13 +163,47 @@ export default ({ onThemeUpdate }) => {

- _EuiThemeShadeColors + _EuiThemeTextColors

- {shadeKeys.map((color) => ( + {textKeys.map((color) => ( + updateColor(color, hex)} + example={ + + } + /> + ))} + + + + + + +

+ _EuiThemeBackgroundColors +

+ + + + + {backgroundKeys.map((color) => ( {

- _EuiThemeTextColors + _EuiThemeBorderColors

- {textKeys.map((color) => ( + {borderKeys.map((color) => ( } + onUpdate={(hex) => updateColor(color, hex)} + /> + ))} + + + + + + +

+ _EuiThemeShadeColors +

+ + + + + {shadeKeys.map((color) => ( + } onUpdate={(hex) => updateColor(color, hex)} - example={ - - } /> ))} diff --git a/packages/eui/src-docs/src/views/theme/customizing/_sass.tsx b/packages/eui/src-docs/src/views/theme/customizing/_sass.tsx index 0f37fa70558..02513c80d79 100644 --- a/packages/eui/src-docs/src/views/theme/customizing/_sass.tsx +++ b/packages/eui/src-docs/src/views/theme/customizing/_sass.tsx @@ -4,10 +4,23 @@ import { EuiText, EuiCodeBlock, useEuiTheme, + EuiThemeAmsterdam, } from '../../../../../src'; export default () => { - const { colorMode } = useEuiTheme(); + const { euiTheme, colorMode } = useEuiTheme(); + + const isAmsterdam = euiTheme.themeName === EuiThemeAmsterdam.key; + const themePaths = isAmsterdam + ? { + light: '@elastic/eui/src/themes/amsterdam/theme_light', + dark: '@elastic/eui/src/themes/amsterdam/theme_dark', + } + : { + light: '@elastic/eui-theme-borealis/src/theme_light', + dark: '@elastic/eui-theme-borealis/src/theme_dark', + }; + return ( <> @@ -32,8 +45,8 @@ $euiColorPrimary: #7B61FF; // The following rebuilds the entire EUI component styles ${ colorMode === 'DARK' - ? "@import '@elastic/eui/src/themes/amsterdam/theme_dark';" - : "@import '@elastic/eui/src/themes/amsterdam/theme_light';" + ? `@import ${themePaths.dark};` + : `@import ${themePaths.light};` } @import 'your/custom/styles';`} diff --git a/packages/eui/src-docs/src/views/theme/theme_example.js b/packages/eui/src-docs/src/views/theme/theme_example.js index eb88f718b90..031abd853f2 100644 --- a/packages/eui/src-docs/src/views/theme/theme_example.js +++ b/packages/eui/src-docs/src/views/theme/theme_example.js @@ -19,9 +19,6 @@ const consumingEmotionThemeSource = require('!!raw-loader!./consuming_emotion_th import OverrideSimple from './override_simple'; const overrideSimpleSource = require('!!raw-loader!./override_simple'); -import Computed from './computed'; -const computedSource = require('!!raw-loader!./computed'); - import CreateComputed from './create_computed'; import { ThemeNotice } from './_components/_theme_notice'; const createComputedSource = require('!!raw-loader!./create_computed'); @@ -200,34 +197,6 @@ export const ThemeExample = { ), demo: , }, - { - title: 'Understanding computed values', - source: [ - { - type: GuideSectionTypes.JS, - code: computedSource, - }, - ], - text: ( - <> -

- The benefit of EUI's theme structure is that it only hard-codes - a few color and size variables. The rest are{' '} - computed values based on this base few. When you - update a core variable, this will cascade into the other computed - values. -

-

- For instance, we compute text variants of our base colors. So - locally overriding the colors.primary color will - automatically cascade to the colors.primaryText. - You can however, directly override computed values as well by - passing a custom value to this theme variable. -

- - ), - demo: , - }, { title: 'Creating custom keys', source: [ diff --git a/packages/eui/src/components/call_out/call_out.styles.ts b/packages/eui/src/components/call_out/call_out.styles.ts index 59e4cd4cc04..4d944584c93 100644 --- a/packages/eui/src/components/call_out/call_out.styles.ts +++ b/packages/eui/src/components/call_out/call_out.styles.ts @@ -59,16 +59,16 @@ export const euiCallOutHeaderStyles = ({ euiTheme }: UseEuiTheme) => { )} `, primary: css` - color: ${euiTheme.colors.primaryText}; + color: ${euiTheme.colors.textPrimary}; `, success: css` - color: ${euiTheme.colors.successText}; + color: ${euiTheme.colors.textSuccess}; `, warning: css` - color: ${euiTheme.colors.warningText}; + color: ${euiTheme.colors.textWarning}; `, danger: css` - color: ${euiTheme.colors.dangerText}; + color: ${euiTheme.colors.textDanger}; `, euiCallOut__icon: css` position: relative; diff --git a/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.styles.ts b/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.styles.ts index 80e29ed64ab..47eed9e0160 100644 --- a/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.styles.ts +++ b/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.styles.ts @@ -162,7 +162,7 @@ export const euiSuperDatePickerStyles = (euiThemeContext: UseEuiTheme) => { `, invalid: css` .euiFormControlLayout__childrenWrapper { - color: ${euiTheme.colors.dangerText}; + color: ${euiTheme.colors.textDanger}; background-color: ${forms.backgroundColor}; ${euiFormControlInvalidStyles(euiThemeContext)} } diff --git a/packages/eui/src/components/expression/expression.styles.ts b/packages/eui/src/components/expression/expression.styles.ts index 7a43f176717..338b97aa4ed 100644 --- a/packages/eui/src/components/expression/expression.styles.ts +++ b/packages/eui/src/components/expression/expression.styles.ts @@ -96,7 +96,7 @@ export const euiExpressionStyles = (euiThemeContext: UseEuiTheme) => { ${logicalCSS('border-bottom-style', 'solid')} `, subdued: css` - border-color: ${euiTheme.colors.subduedText}; + border-color: ${euiTheme.colors.textSubdued}; `, primary: css` border-color: ${euiTheme.colors.primary}; @@ -115,12 +115,12 @@ export const euiExpressionStyles = (euiThemeContext: UseEuiTheme) => { `, }, - subdued: css(_colorCSS(euiTheme.colors.subduedText)), - primary: css(_colorCSS(euiTheme.colors.primaryText)), - success: css(_colorCSS(euiTheme.colors.successText)), - warning: css(_colorCSS(euiTheme.colors.warningText)), - danger: css(_colorCSS(euiTheme.colors.dangerText)), - accent: css(_colorCSS(euiTheme.colors.accentText)), + subdued: css(_colorCSS(euiTheme.colors.textSubdued)), + primary: css(_colorCSS(euiTheme.colors.textPrimary)), + success: css(_colorCSS(euiTheme.colors.textSuccess)), + warning: css(_colorCSS(euiTheme.colors.textWarning)), + danger: css(_colorCSS(euiTheme.colors.textDanger)), + accent: css(_colorCSS(euiTheme.colors.textAccent)), }; }; @@ -133,22 +133,22 @@ export const euiExpressionDescriptionStyles = ({ euiTheme }: UseEuiTheme) => { vertical-align: bottom; `, subdued: css` - color: ${euiTheme.colors.subduedText}; + color: ${euiTheme.colors.textSubdued}; `, primary: css` - color: ${euiTheme.colors.primaryText}; + color: ${euiTheme.colors.textPrimary}; `, success: css` - color: ${euiTheme.colors.successText}; + color: ${euiTheme.colors.textSuccess}; `, warning: css` - color: ${euiTheme.colors.warningText}; + color: ${euiTheme.colors.textWarning}; `, danger: css` - color: ${euiTheme.colors.dangerText}; + color: ${euiTheme.colors.textDanger}; `, accent: css` - color: ${euiTheme.colors.accentText}; + color: ${euiTheme.colors.textAccent}; `, isUppercase: css` text-transform: uppercase; diff --git a/packages/eui/src/components/key_pad_menu/key_pad_menu_item.styles.ts b/packages/eui/src/components/key_pad_menu/key_pad_menu_item.styles.ts index c3ffdf758a1..5e09765cd61 100644 --- a/packages/eui/src/components/key_pad_menu/key_pad_menu_item.styles.ts +++ b/packages/eui/src/components/key_pad_menu/key_pad_menu_item.styles.ts @@ -65,19 +65,19 @@ export const euiKeyPadMenuItemStyles = (euiThemeContext: UseEuiTheme) => { &:hover, &:focus, &:focus-within { - color: ${euiTheme.colors.primaryText}; + color: ${euiTheme.colors.textPrimary}; } `, disabled: { disabled: css` cursor: not-allowed; - color: ${euiTheme.colors.disabledText}; + color: ${euiTheme.colors.textDisabled}; .euiKeyPadMenuItem__icon { filter: grayscale(100%); svg * { - fill: ${euiTheme.colors.disabledText}; + fill: ${euiTheme.colors.textDisabled}; } } `, diff --git a/packages/eui/src/components/link/link.styles.ts b/packages/eui/src/components/link/link.styles.ts index 96530e33c8f..25fc13024af 100644 --- a/packages/eui/src/components/link/link.styles.ts +++ b/packages/eui/src/components/link/link.styles.ts @@ -53,12 +53,12 @@ export const euiLinkStyles = (euiThemeContext: UseEuiTheme) => { } `, // Color styles - primary: css(_colorCSS(euiTheme.colors.primaryText)), - subdued: css(_colorCSS(euiTheme.colors.subduedText)), - success: css(_colorCSS(euiTheme.colors.successText)), - accent: css(_colorCSS(euiTheme.colors.accentText)), - danger: css(_colorCSS(euiTheme.colors.dangerText)), - warning: css(_colorCSS(euiTheme.colors.warningText)), + primary: css(_colorCSS(euiTheme.colors.textPrimary)), + subdued: css(_colorCSS(euiTheme.colors.textSubdued)), + success: css(_colorCSS(euiTheme.colors.textSuccess)), + accent: css(_colorCSS(euiTheme.colors.textAccent)), + danger: css(_colorCSS(euiTheme.colors.textDanger)), + warning: css(_colorCSS(euiTheme.colors.textWarning)), ghost: css(_colorCSS(euiTheme.colors.ghost)), text: css(_colorCSS(euiTheme.colors.text)), }; diff --git a/packages/eui/src/components/pagination/pagination.styles.ts b/packages/eui/src/components/pagination/pagination.styles.ts index a62097791a5..7b44a67f164 100644 --- a/packages/eui/src/components/pagination/pagination.styles.ts +++ b/packages/eui/src/components/pagination/pagination.styles.ts @@ -38,7 +38,7 @@ export const euiPaginationStyles = (euiThemeContext: UseEuiTheme) => { font-weight: ${euiTheme.font.weight.semiBold}; &:first-of-type { - color: ${euiTheme.colors.primaryText}; + color: ${euiTheme.colors.textPrimary}; } } `, @@ -47,7 +47,7 @@ export const euiPaginationStyles = (euiThemeContext: UseEuiTheme) => { align-items: baseline; `, euiPagination__ellipsis: css` - color: ${euiTheme.colors.disabledText}; + color: ${euiTheme.colors.textDisabled}; font-size: ${euiFontSize(euiThemeContext, 's').fontSize}; ${logicalCSS('padding-horizontal', euiTheme.size.s)} ${logicalCSS('height', euiTheme.size.l)} diff --git a/packages/eui/src/components/selectable/selectable_list/selectable_list_item.styles.ts b/packages/eui/src/components/selectable/selectable_list/selectable_list_item.styles.ts index 43f64fc3fc3..251248aba73 100644 --- a/packages/eui/src/components/selectable/selectable_list/selectable_list_item.styles.ts +++ b/packages/eui/src/components/selectable/selectable_list/selectable_list_item.styles.ts @@ -44,14 +44,14 @@ export const euiSelectableListItemStyles = (euiThemeContext: UseEuiTheme) => { } &[aria-disabled='true'] { - color: ${euiTheme.colors.disabledText}; + color: ${euiTheme.colors.textDisabled}; cursor: not-allowed; } &:hover, &.euiSelectableListItem-isFocused { &:not([aria-disabled='true']) { - color: ${euiTheme.colors.primaryText}; + color: ${euiTheme.colors.textPrimary}; background-color: ${euiTheme.focus.backgroundColor}; .euiSelectableListItem__text { diff --git a/packages/eui/src/components/side_nav/side_nav_item.styles.ts b/packages/eui/src/components/side_nav/side_nav_item.styles.ts index d3b033bf642..1e9947ebf19 100644 --- a/packages/eui/src/components/side_nav/side_nav_item.styles.ts +++ b/packages/eui/src/components/side_nav/side_nav_item.styles.ts @@ -22,7 +22,7 @@ export const euiSideNavItemStyles = (euiThemeContext: UseEuiTheme) => { euiSideNavItem: css``, emphasized: css` background-color: ${emphasizedBackgroundColor}; - color: ${euiTheme.colors.title}; + color: ${euiTheme.colors.textHeading}; /* The large y values allow the shadow to stretch beyond the side nav bounds to it's parents container */ box-shadow: 100px 0 0 0 ${emphasizedBackgroundColor}, @@ -45,11 +45,11 @@ export const euiSideNavItemStyles = (euiThemeContext: UseEuiTheme) => { } `, trunk: css` - color: ${euiTheme.colors.title}; + color: ${euiTheme.colors.textHeading}; `, branch: css` position: relative; - color: ${euiTheme.colors.subduedText}; + color: ${euiTheme.colors.textSubdued}; /* Draw the vertical line to group an expanded item's child items together. */ &::after { @@ -128,11 +128,11 @@ export const euiSideNavItemButtonStyles = (euiThemeContext: UseEuiTheme) => { &:disabled { cursor: not-allowed; - color: ${euiTheme.colors.disabledText}; + color: ${euiTheme.colors.textDisabled}; } `, selected: css` - color: ${euiTheme.colors.primaryText}; + color: ${euiTheme.colors.textPrimary}; font-weight: ${euiTheme.font.weight.bold}; /* Restrict the underline to the button __label so it doesn't affect other components that might live within */ diff --git a/packages/eui/src/components/stat/stat.styles.ts b/packages/eui/src/components/stat/stat.styles.ts index 99d1925aa39..68a43bbc128 100644 --- a/packages/eui/src/components/stat/stat.styles.ts +++ b/packages/eui/src/components/stat/stat.styles.ts @@ -35,22 +35,22 @@ export const euiStatTitleStyles = ({ euiTheme }: UseEuiTheme) => { color: ${euiTheme.colors.fullShade}; `, subdued: css` - color: ${euiTheme.colors.subduedText}; + color: ${euiTheme.colors.textSubdued}; `, primary: css` - color: ${euiTheme.colors.primaryText}; + color: ${euiTheme.colors.textPrimary}; `, success: css` - color: ${euiTheme.colors.successText}; + color: ${euiTheme.colors.textSuccess}; `, warning: css` color: ${euiTheme.colors.warningText}; `, danger: css` - color: ${euiTheme.colors.dangerText}; + color: ${euiTheme.colors.textDanger}; `, accent: css` - color: ${euiTheme.colors.accentText}; + color: ${euiTheme.colors.textAccent}; `, // Loading isLoading: css` diff --git a/packages/eui/src/components/table/table_cells_shared.styles.ts b/packages/eui/src/components/table/table_cells_shared.styles.ts index 1f129ab1d1d..fd19e243fe5 100644 --- a/packages/eui/src/components/table/table_cells_shared.styles.ts +++ b/packages/eui/src/components/table/table_cells_shared.styles.ts @@ -26,7 +26,7 @@ export const euiTableHeaderFooterCellStyles = ( const sharedStyles = { ...euiFontSize(euiThemeContext, 'xs'), fontWeight: euiTheme.font.weight.semiBold, - color: euiTheme.colors.title, + color: euiTheme.colors.textHeading, verticalAlign: 'middle', }; @@ -50,11 +50,11 @@ export const euiTableHeaderFooterCellStyles = ( &:hover, &:focus { - color: ${euiTheme.colors.primaryText}; + color: ${euiTheme.colors.textPrimary}; text-decoration: underline; .euiTableSortIcon--sortable { - color: ${euiTheme.colors.primaryText}; + color: ${euiTheme.colors.textPrimary}; } } `, diff --git a/packages/eui/src/components/tabs/tab.styles.ts b/packages/eui/src/components/tabs/tab.styles.ts index c7b01efddf1..d0fe247ac67 100644 --- a/packages/eui/src/components/tabs/tab.styles.ts +++ b/packages/eui/src/components/tabs/tab.styles.ts @@ -23,7 +23,7 @@ export const euiTabStyles = ({ euiTheme }: UseEuiTheme) => { /* Font-weight used by append/prepend nodes - the tab title receives a heavier weight */ font-weight: ${euiTheme.font.weight.semiBold}; - color: ${euiTheme.colors.title}; + color: ${euiTheme.colors.textHeading}; &:focus { outline-offset: -${euiTheme.focus.width}; @@ -37,7 +37,7 @@ export const euiTabStyles = ({ euiTheme }: UseEuiTheme) => { `, selected: css` box-shadow: inset 0 -${euiTheme.border.width.thick} 0 ${euiTheme.colors.primary}; - color: ${euiTheme.colors.primaryText}; + color: ${euiTheme.colors.textPrimary}; `, disabled: { disabled: css` diff --git a/packages/eui/src/components/text_diff/text_diff.styles.ts b/packages/eui/src/components/text_diff/text_diff.styles.ts index 28a9ca5582e..37237f97c22 100644 --- a/packages/eui/src/components/text_diff/text_diff.styles.ts +++ b/packages/eui/src/components/text_diff/text_diff.styles.ts @@ -13,11 +13,11 @@ export const euiTextDiffStyles = ({ euiTheme }: UseEuiTheme) => ({ // Base euiTextDiff: css` del { - color: ${euiTheme.colors.dangerText}; + color: ${euiTheme.colors.textDanger}; } ins { - color: ${euiTheme.colors.successText}; + color: ${euiTheme.colors.textSuccess}; } `, }); diff --git a/packages/eui/src/global_styling/functions/_colors.scss b/packages/eui/src/global_styling/functions/_colors.scss index 25834e10add..e5ade788667 100644 --- a/packages/eui/src/global_styling/functions/_colors.scss +++ b/packages/eui/src/global_styling/functions/_colors.scss @@ -16,7 +16,7 @@ // For theming. Checks the text color and tells us whether it's light or dark. // Based on that we either tint (add white) or shade (add black). @function tintOrShade($color, $tint, $shade) { - @if (lightness($euiTextColor) > 50) { + @if (lightness($euiColorTextParagraph) > 50) { @return shade($color, $shade); } @else { @return tint($color, $tint); @@ -25,7 +25,7 @@ // The reverse of the above @function shadeOrTint($color, $shade, $tint) { - @if (lightness($euiTextColor) < 50) { + @if (lightness($euiColorTextParagraph) < 50) { @return shade($color, $shade); } @else { @return tint($color, $tint); @@ -35,7 +35,7 @@ // Similar to above, but uses the light or dark color based // on whether it's the light or dark theme @function lightOrDarkTheme($lightColor, $darkColor) { - @if (lightness($euiTextColor) < 50) { + @if (lightness($euiColorTextParagraph) < 50) { @return $lightColor; } @else { @return $darkColor; diff --git a/packages/eui/src/global_styling/mixins/_shadow.scss b/packages/eui/src/global_styling/mixins/_shadow.scss index 431b7db3b81..71162d7978d 100644 --- a/packages/eui/src/global_styling/mixins/_shadow.scss +++ b/packages/eui/src/global_styling/mixins/_shadow.scss @@ -1,5 +1,5 @@ @function shadowOpacity($opacity) { - @if (lightness($euiTextColor) < 50) { + @if (lightness($euiColorTextParagraph) < 50) { @return $opacity * 1; } @else { @return $opacity * 2.5; diff --git a/packages/eui/src/global_styling/mixins/_typography.scss b/packages/eui/src/global_styling/mixins/_typography.scss index 7090f0e2371..65bea676952 100644 --- a/packages/eui/src/global_styling/mixins/_typography.scss +++ b/packages/eui/src/global_styling/mixins/_typography.scss @@ -53,13 +53,13 @@ } @mixin euiText { - color: $euiTextColor; + color: $euiColorTextParagraph; font-weight: $euiFontWeightRegular; } @mixin euiTitle($size: 'm') { @include euiTextBreakWord; - color: $euiTitleColor; + color: $euiColorTextHeading; @if (map-has-key($euiTitles, $size)) { @each $property, $value in map-get($euiTitles, $size) { diff --git a/packages/eui/src/global_styling/reset/global_styles.tsx b/packages/eui/src/global_styling/reset/global_styles.tsx index 5f8b564f941..8b1d90cbcac 100644 --- a/packages/eui/src/global_styling/reset/global_styles.tsx +++ b/packages/eui/src/global_styling/reset/global_styles.tsx @@ -106,7 +106,7 @@ export const EuiGlobalStyles = ({}: EuiGlobalStylesProps) => { } a { - color: ${colors.primaryText}; + color: ${colors.textPrimary}; &, &:hover, diff --git a/packages/eui/src/services/theme/style_memoization.test.tsx b/packages/eui/src/services/theme/style_memoization.test.tsx index 5b36f8e65bf..8434e93d292 100644 --- a/packages/eui/src/services/theme/style_memoization.test.tsx +++ b/packages/eui/src/services/theme/style_memoization.test.tsx @@ -28,7 +28,7 @@ describe('useEuiMemoizedStyles', () => { const componentStyles = jest.fn(({ euiTheme }: UseEuiTheme) => ({ someComponent: css` - color: ${euiTheme.colors.primaryText}; + color: ${euiTheme.colors.textPrimary}; `, })); const Component = () => { @@ -99,7 +99,7 @@ describe('withEuiStylesMemoizer', () => { const componentStyles = jest.fn(({ euiTheme }: UseEuiTheme) => ({ someComponent: css` - color: ${euiTheme.colors.dangerText}; + color: ${euiTheme.colors.textDanger}; `, })); @@ -161,7 +161,7 @@ describe('RenderWithEuiStylesMemoizer', () => { const componentStyles = jest.fn(({ euiTheme }: UseEuiTheme) => ({ someComponent: css` - color: ${euiTheme.colors.successText}; + color: ${euiTheme.colors.textSuccess}; `, })); diff --git a/packages/website/docs/components/display/comment_list_props.tsx b/packages/website/docs/components/display/comment_list_props.tsx index 580719d7530..c2748bb2000 100644 --- a/packages/website/docs/components/display/comment_list_props.tsx +++ b/packages/website/docs/components/display/comment_list_props.tsx @@ -93,7 +93,7 @@ export const CommentListProps = ({ snippet }: { snippet: ReactNode }) => { diff --git a/packages/website/docs/components/templates/sitewide_search.mdx b/packages/website/docs/components/templates/sitewide_search.mdx index 9813bc57c87..dbf4d0a276c 100644 --- a/packages/website/docs/components/templates/sitewide_search.mdx +++ b/packages/website/docs/components/templates/sitewide_search.mdx @@ -350,7 +350,7 @@ export default () => { css: css` .euiSelectableTemplateSitewide__optionMeta--PINK { font-weight: ${euiTheme.font.weight.medium}; - color: ${euiTheme.colors.accentText}; + color: ${euiTheme.colors.textAccent}; } `, }} diff --git a/packages/website/docs/components/theming/borders.mdx b/packages/website/docs/components/theming/borders.mdx index 6dafa5fe800..5ec767166e2 100644 --- a/packages/website/docs/components/theming/borders.mdx +++ b/packages/website/docs/components/theming/borders.mdx @@ -41,7 +41,9 @@ import { BordersTable } from './borders/borders_table'; ## Color -EUI only has one base color it uses for all borders (or calculated borders). +EUI has one main base color it uses for almost all borders (or calculated borders). + +Only form specific borders use the `euiTheme.colors.borderBasePlain` color token instead. ```mdx-code-block import { ColorPreview } from './borders/color_preview'; diff --git a/packages/website/docs/components/theming/colors/background_color_preview.tsx b/packages/website/docs/components/theming/colors/background_color_preview.tsx new file mode 100644 index 00000000000..fb91dbc21d3 --- /dev/null +++ b/packages/website/docs/components/theming/colors/background_color_preview.tsx @@ -0,0 +1,18 @@ +import { useEuiTheme } from '@elastic/eui'; +import { css } from '@emotion/react'; + +export const BackgroundColorPreview = () => { + const { euiTheme } = useEuiTheme(); + + return ( +
+ background: {euiTheme.colors.backgroundFilledWarning} +
+ ); +}; diff --git a/packages/website/docs/components/theming/colors/background_colors_table.tsx b/packages/website/docs/components/theming/colors/background_colors_table.tsx new file mode 100644 index 00000000000..1ccdceb01fa --- /dev/null +++ b/packages/website/docs/components/theming/colors/background_colors_table.tsx @@ -0,0 +1,138 @@ +import { useEuiTheme } from '@elastic/eui'; +import { ColorsTable } from './colors_table'; + +export const BackgroundColorsTable = () => { + const { euiTheme } = useEuiTheme(); + + return ( + + ); +}; diff --git a/packages/website/docs/components/theming/colors/border_color_preview.tsx b/packages/website/docs/components/theming/colors/border_color_preview.tsx new file mode 100644 index 00000000000..82aa2fe0673 --- /dev/null +++ b/packages/website/docs/components/theming/colors/border_color_preview.tsx @@ -0,0 +1,17 @@ +import { useEuiTheme } from '@elastic/eui'; +import { css } from '@emotion/react'; + +export const BorderColorPreview = () => { + const { euiTheme } = useEuiTheme(); + + return ( +
+ border-color: {euiTheme.colors.borderBaseWarning} +
+ ); +}; diff --git a/packages/website/docs/components/theming/colors/border_colors_table.tsx b/packages/website/docs/components/theming/colors/border_colors_table.tsx new file mode 100644 index 00000000000..ef1dfcba493 --- /dev/null +++ b/packages/website/docs/components/theming/colors/border_colors_table.tsx @@ -0,0 +1,90 @@ +import { useEuiTheme } from '@elastic/eui'; +import { ColorsTable } from './colors_table'; + +export const BorderColorsTable = () => { + const { euiTheme } = useEuiTheme(); + + return ( + + ); +}; diff --git a/packages/website/docs/components/theming/colors/brand_colors_table.tsx b/packages/website/docs/components/theming/colors/brand_colors_table.tsx index 9c100228e07..54410c19567 100644 --- a/packages/website/docs/components/theming/colors/brand_colors_table.tsx +++ b/packages/website/docs/components/theming/colors/brand_colors_table.tsx @@ -10,29 +10,59 @@ export const BrandColorsTable = () => { { value: euiTheme.colors.primary, token: 'colors.primary', - description: <>Main brand color and used for most call to actions like buttons and links., + description: ( + <> + Main brand color and used for most{' '} + call to actions like buttons and links. + + ), }, { value: euiTheme.colors.accent, token: 'colors.accent', - description: <>Pulls attention to key indicators like notifications or number of selections., + description: ( + <> + Pulls attention to key indicators like{' '} + notifications or number of selections. + + ), + }, + { + value: euiTheme.colors.accentSecondary, + token: 'colors.accentSecondary', + description: <>Secondary attention indicator with lower priority., }, { value: euiTheme.colors.success, token: 'colors.success', - description: <>Used for positive messages/graphics and additive actions., + description: ( + <> + Used for positive messages/graphics and additive + actions. + + ), }, { value: euiTheme.colors.warning, token: 'colors.warning', - description: <>Used for warnings and actions that have potential to be destructive., + description: ( + <> + Used for warnings and actions that have potential + to be destructive. + + ), }, { value: euiTheme.colors.danger, token: 'colors.danger', - description: <>Used for negative messages/graphics like errors and destructive elements., + description: ( + <> + Used for negative messages/graphics like errors + and destructive elements. + + ), }, ]} /> - ) + ); }; diff --git a/packages/website/docs/components/theming/colors/shade_colors_table.tsx b/packages/website/docs/components/theming/colors/shade_colors_table.tsx index b28f116a12c..08e8eac00fc 100644 --- a/packages/website/docs/components/theming/colors/shade_colors_table.tsx +++ b/packages/website/docs/components/theming/colors/shade_colors_table.tsx @@ -10,22 +10,52 @@ export const ShadeColorsTable = () => { { value: euiTheme.colors.emptyShade, token: 'colors.emptyShade', - description: <>Used as the background color of primary page content and panels including modals and flyouts., + description: ( + <> + Used as the background color of primary{' '} + page content and panels including modals and + flyouts. +
+ @deprecated - use specific semantic color tokens instead. + + ), }, { value: euiTheme.colors.lightestShade, token: 'colors.lightestShade', - description: <>Used to lightly shade areas that contain secondary content or contain panel-like components., + description: ( + <> + Used to lightly shade areas that contain{' '} + secondary content or contain panel-like + components. +
+ @deprecated - use specific semantic color tokens instead. + + ), }, { value: euiTheme.colors.lightShade, token: 'colors.lightShade', - description: <>Used for most borders and dividers (horizontal rules)., + description: ( + <> + Used for most borders and dividers (horizontal + rules). +
+ @deprecated - use specific semantic color tokens instead. + + ), }, { value: euiTheme.colors.mediumShade, token: 'colors.mediumShade', - description: <>The middle gray for all themes; this is the base for colors.subdued, + description: ( + <> + The middle gray for all themes; this is the base for{' '} + colors.subdued +
+ @deprecated - use specific semantic color tokens instead. + + ), }, { value: euiTheme.colors.darkShade, @@ -35,14 +65,28 @@ export const ShadeColorsTable = () => { { value: euiTheme.colors.darkestShade, token: 'colors.darkestShade', - description: <>Used as the text color and the background color for inverted components like tooltips and the control bar., + description: ( + <> + Used as the text color and the background color + for inverted components like tooltips and the + control bar. +
+ @deprecated - use specific semantic color tokens instead. + + ), }, { value: euiTheme.colors.fullShade, token: 'colors.fullShade', - description: <>The opposite of emptyShade, + description: ( + <> + The opposite of emptyShade +
+ @deprecated - use specific semantic color tokens instead. + + ), }, ]} /> - ) + ); }; diff --git a/packages/website/docs/components/theming/colors/special_colors_table.tsx b/packages/website/docs/components/theming/colors/special_colors_table.tsx index afa4b3f36e6..b71061218b0 100644 --- a/packages/website/docs/components/theming/colors/special_colors_table.tsx +++ b/packages/website/docs/components/theming/colors/special_colors_table.tsx @@ -10,37 +10,82 @@ export const SpecialColorsTable = () => { { value: euiTheme.colors.body, token: 'colors.body', - description: <>The background color for the whole window (body) and is a computed value of colors.lightestShade. Provides denominator (background) value for contrast calculations, + description: ( + <> + The background color for the whole window (body){' '} + and is a computed value of colors.lightestShade. + Provides denominator (background) value for{' '} + contrast calculations +
+ @deprecated - use backgroundBasePlain or{' '} + backgroundBaseSubdued + instead + + ), }, { value: euiTheme.colors.highlight, token: 'colors.highlight', - description: <>Used to highlight text when matching against search strings., + description: ( + <> + Used to highlight text when matching against + search strings. + + ), }, { value: euiTheme.colors.disabled, token: 'colors.disabled', - description: <>Computed against colors.darkestShade., + description: ( + <> + Computed against colors.darkestShade. +
+ @deprecated - use specific semantic tokens instead (e.g. + backgroundBaseDisabled,{' '} + borderBaseDisabled etc) + + ), }, { value: euiTheme.colors.disabledText, token: 'colors.disabledText', - description: <>Computed against colors.disabled, + description: ( + <> + Computed against colors.disabled +
+ @deprecated - use textDisabled instead + + ), }, { value: euiTheme.colors.shadow, token: 'colors.shadow', - description: <>The base color for shadows that gets transparentized at a base value on the colorMode and then layered., + description: ( + <> + The base color for shadows that gets transparentized{' '} + at a base value on the colorMode and then layered. + + ), }, { value: euiTheme.colors.ghost, token: 'colors.ghost', + description: ( + <> + @deprecated - use plainLight instead + + ), }, { value: euiTheme.colors.ink, token: 'colors.ink', + description: ( + <> + @deprecated - use plainDark instead + + ), }, ]} /> - ) + ); }; diff --git a/packages/website/docs/components/theming/colors/text_color_preview.tsx b/packages/website/docs/components/theming/colors/text_color_preview.tsx index 0570f7d966d..e147fcb37af 100644 --- a/packages/website/docs/components/theming/colors/text_color_preview.tsx +++ b/packages/website/docs/components/theming/colors/text_color_preview.tsx @@ -7,10 +7,10 @@ export const TextColorPreview = () => { return (
- color: {euiTheme.colors.warningText} + color: {euiTheme.colors.textWarning}
- ) -} + ); +}; diff --git a/packages/website/docs/components/theming/colors/text_colors_table.tsx b/packages/website/docs/components/theming/colors/text_colors_table.tsx index a86ef693918..16ddf11c40f 100644 --- a/packages/website/docs/components/theming/colors/text_colors_table.tsx +++ b/packages/website/docs/components/theming/colors/text_colors_table.tsx @@ -9,42 +9,46 @@ export const TextColorsTable = () => { sampleType="text" colors={[ { - value: euiTheme.colors.text, - token: 'colors.text', + value: euiTheme.colors.textParagraph, + token: 'colors.textParagraph', }, { - value: euiTheme.colors.title, - token: 'colors.title', + value: euiTheme.colors.textHeading, + token: 'colors.textHeading', }, { - value: euiTheme.colors.subduedText, - token: 'colors.subduedText', + value: euiTheme.colors.textSubdued, + token: 'colors.textSubdued', }, { value: euiTheme.colors.link, token: 'colors.link', }, { - value: euiTheme.colors.primaryText, - token: 'colors.primaryText', + value: euiTheme.colors.textPrimary, + token: 'colors.textPrimary', }, { - value: euiTheme.colors.accentText, - token: 'colors.accentText', + value: euiTheme.colors.textAccent, + token: 'colors.textAccent', }, { - value: euiTheme.colors.successText, - token: 'colors.successText', + value: euiTheme.colors.textAccentSecondary, + token: 'colors.textAccentSecondary', }, { - value: euiTheme.colors.warningText, - token: 'colors.warningText', + value: euiTheme.colors.textSuccess, + token: 'colors.textSuccess', }, { - value: euiTheme.colors.dangerText, - token: 'colors.dangerText', + value: euiTheme.colors.textWarning, + token: 'colors.textWarning', + }, + { + value: euiTheme.colors.textDanger, + token: 'colors.textDanger', }, ]} /> - ) + ); }; diff --git a/packages/website/docs/components/theming/colors/utilities.mdx b/packages/website/docs/components/theming/colors/utilities.mdx index a88a3b482e6..4a3abe68676 100644 --- a/packages/website/docs/components/theming/colors/utilities.mdx +++ b/packages/website/docs/components/theming/colors/utilities.mdx @@ -23,7 +23,7 @@ import { UseEuiBackgroundColorCSSPreview } from './utilities/use_eui_background_ This is best used to map component prop styles to padding output. ```tsx - color: 'transparent' | 'plain' | 'subdued' | 'accent' | 'primary' | 'success' | 'warning' | 'danger'; + color: 'transparent' | 'plain' | 'subdued' | 'accent' | 'accentSecondary' | 'primary' | 'success' | 'warning' | 'danger'; ``` @@ -41,41 +41,6 @@ import { UseEuiBackgroundColorCSSPreview } from './utilities/use_eui_background_ -```mdx-code-block -import { UseEuiBackgroundColorPreview } from './utilities/use_eui_background_color_preview'; -``` - - - - ### `useEuiBackgroundColor(color, method?)` hook - - Returns just the computed background color for the given `color`. - - ``` - color: 'transparent' | 'plain' | 'subdued' | 'accent' | 'primary' | 'success' | 'warning' | 'danger'; - - method? 'opaque' | 'transparent'; - ``` - - - - - - ``` - css` - background: ${useEuiBackgroundColor('subdued')}; - ` - ``` - - - -```mdx-code-block -import { UseEuiBackgroundColorTable } from './utilities/use_eui_background_color_table'; -``` - -
- - ## Utilities ### Contrast diff --git a/packages/website/docs/components/theming/colors/utilities/use_eui_background_color_preview.tsx b/packages/website/docs/components/theming/colors/utilities/use_eui_background_color_preview.tsx deleted file mode 100644 index 2367ac9b54a..00000000000 --- a/packages/website/docs/components/theming/colors/utilities/use_eui_background_color_preview.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import { useEuiBackgroundColor, useEuiPaddingCSS } from '@elastic/eui'; -import { css } from '@emotion/react'; - -export const UseEuiBackgroundColorPreview = () => { - return ( -
- {useEuiBackgroundColor('subdued')} -
- ) -} diff --git a/packages/website/docs/components/theming/colors/utilities/use_eui_background_color_table.tsx b/packages/website/docs/components/theming/colors/utilities/use_eui_background_color_table.tsx deleted file mode 100644 index 04f10843091..00000000000 --- a/packages/website/docs/components/theming/colors/utilities/use_eui_background_color_table.tsx +++ /dev/null @@ -1,74 +0,0 @@ -import React, { useState } from 'react'; -import { - EuiPanel, - EuiDescribedFormGroup, - EuiSpacer, - EuiButtonGroup, - useEuiTheme, - euiBackgroundColor, -} from '@elastic/eui'; -import { ColorsTable } from '../colors_table'; - -const colors = [ - 'transparent', - 'plain', - 'subdued', - 'accent', - 'primary', - 'success', - 'warning', - 'danger', -] as const; - -export const UseEuiBackgroundColorTable = () => { - const theme = useEuiTheme(); - const [activeBackground, setActiveBackground] = useState< - 'transparent' | 'opaque' - >('opaque'); - - return ( - <> - - Different colors for different contexts

} - description={ -

- While the hook accepts rendering the value as opaque or - transparent, we highly suggest reserving transparent for use only - during interactive states like hover and focus. -

- } - > - - setActiveBackground(id)} - color="accent" - isFullWidth - /> - - - ({ - value: euiBackgroundColor(theme, color, { method: activeBackground }), - token: `useEuiBackgroundColor('${color}'${ - activeBackground === 'transparent' ? `, 'transparent'` : '' - })`, - }))} - /> - - ); -}; diff --git a/packages/website/docs/components/theming/colors/values.mdx b/packages/website/docs/components/theming/colors/values.mdx index 73ea3c043d4..eb23d730631 100644 --- a/packages/website/docs/components/theming/colors/values.mdx +++ b/packages/website/docs/components/theming/colors/values.mdx @@ -5,9 +5,10 @@ id: theming_colors # Colors -Elastic UI builds with a very limited palette. It uses a core set of three colors with a green / orange / red qualitative set and combined with a six-color grayscale. Variation beyond these colors is minimal and always done with math manipulation against the original set. +Elastic UI builds with a color palette that is based on predefined 14-step scales for a core set of three colors (blue / teal / pink) as well as a green / yellow / red qualitative set and combined with a 28-step grayscale. +Colors are defined to work well when combined for their semantic purpose. -When switching between light and dark color modes, the theme keys do not change, only their values do. This is why most keys are not named for their **evaluated** value but by their **purpose**. +When switching between light and dark color modes, the theme keys do not change, only their values do. ## Brand colors @@ -43,9 +44,7 @@ import { BrandColorsTable } from './brand_colors_table'; ## Text colors -Specific text colors calculated off either the brand or shade colors. - -Each brand color also has a corresponding text variant that has been calculated for proper (at least 4.5) contrast against `colors.body` and should be used specifically when coloring text. As is used in [**EuiTextColor**](/docs/display/text#coloring-text). +Each brand color also has a corresponding text variant that should be used specifically when coloring text. As is used in [**EuiTextColor**](/docs/display/text#coloring-text). ```mdx-code-block import { TextColorPreview } from './text_color_preview'; @@ -57,8 +56,6 @@ import { TextColorsTable } from './text_colors_table'; ### `euiTheme.colors[colorText]` token Remember, when using any of the EUI colors for text, **use the text specific variant**. - - If your background color is anything other than or darker than the `body` color, you will want to re-calculate the high contrast version by using the [`makeHighContrastColor(foreground)(background)`](/docs/theming/colors/utilities) method. @@ -66,7 +63,7 @@ import { TextColorsTable } from './text_colors_table'; ```tsx css` - color: ${euiTheme.colors.warningText}; + color: ${euiTheme.colors.textWarning}; ` ``` @@ -76,6 +73,69 @@ import { TextColorsTable } from './text_colors_table'; +## Background colors + +Semantic background colors. These should be used according to their semantic purpose. + +If a border is needed use the semantically related border color, e.g. `backgroundBasePrimary` with `borderBasePrimary`. + +```mdx-code-block +import { BackgroundColorPreview } from './background_color_preview'; +import { BackgroundColorsTable } from './background_colors_table'; +``` + + + + ### `euiTheme.colors[background]` token + + + + + + ```tsx + css` + background-color: ${euiTheme.colors.backgroundFilledWarning}; + ` + ``` + + + +
+ + + +## Borders + +Semantic border colors. These should be used according to their semantic purpose. + +The default border color (used as `border.color`) `borderBaseSubdued`. +Use the `base` border colors for most cases. Use `borderBasePlain` for a slightly stronger border (e.g. for forms). + +```mdx-code-block +import { BorderColorPreview } from './border_color_preview'; +import { BorderColorsTable } from './border_colors_table'; +``` + + + + ### `euiTheme.colors[border]` token + + + + + + ```tsx + css` + border-color: ${euiTheme.colors.borderBaseWarning}; + ` + ``` + + + +
+ + + ## Shades A six-color grayscale palette. Variation beyond these colors is minimal and always done through computations against this set. diff --git a/packages/website/docs/components/theming/theme_provider.mdx b/packages/website/docs/components/theming/theme_provider.mdx index 489bb118202..a154c65b889 100644 --- a/packages/website/docs/components/theming/theme_provider.mdx +++ b/packages/website/docs/components/theming/theme_provider.mdx @@ -237,67 +237,6 @@ export default () => { }; ``` -## Understanding computed values - -The benefit of EUI's theme structure is that it only hard-codes a few color and size variables. The rest are **computed** values based on this base few. When you update a core variable, this will cascade into the other computed values. - -For instance, we compute text variants of our base colors. So locally overriding the `colors.primary` color will automatically cascade to the `colors.primaryText`. You can however, directly override computed values as well by passing a custom value to this theme variable. - -```tsx interactive -import React, { FunctionComponent, ReactNode } from 'react'; -import { - EuiIcon, - EuiCode, - EuiText, - EuiThemeProvider, - useEuiTheme, -} from '@elastic/eui'; - -const Box: FunctionComponent<{ children: ReactNode }> = ({ children }) => { - const { euiTheme } = useEuiTheme(); - - return ( - -

- {children} -

- - ); -}; - -export default () => { - const primaryOverrides = { - colors: { - LIGHT: { - primary: '#db1dde', - }, - DARK: { - primary: '#e378e4', - }, - }, - }; - - return ( -
- - - The colors.primary value has been changed to{' '} - #db1dde (#e378e4 for dark mode) - and so the calculated value of colors.primaryText{' '} - has also been updated. - - -
- ); -}; -``` - ## Creating custom keys Because of the computed values and possible cascade effects, it may not be advisable to locally **override** any EUI specific theme variables. Instead, you should append custom keys to the theme. diff --git a/packages/website/docs/components/theming/use_eui_breakpoint_preview.tsx b/packages/website/docs/components/theming/use_eui_breakpoint_preview.tsx index 58c0bc0fcda..892eabe3259 100644 --- a/packages/website/docs/components/theming/use_eui_breakpoint_preview.tsx +++ b/packages/website/docs/components/theming/use_eui_breakpoint_preview.tsx @@ -11,19 +11,18 @@ export const UseEuiBreakpointPreview = () => { font-weight: ${euiTheme.font.weight.bold}; } ${useEuiBreakpoint(['xs', 's'])} { - color: ${euiTheme.colors.dangerText}; + color: ${euiTheme.colors.textDanger}; } ${useEuiBreakpoint(['m'])} { - color: ${euiTheme.colors.warningText}; + color: ${euiTheme.colors.textWarning}; } ${useEuiBreakpoint(['l', 'xl'])} { - color: ${euiTheme.colors.successText}; + color: ${euiTheme.colors.textSuccess}; } `} > This text is bold on small to large screens, red on small and below - screens, yellow on medium screens, and green on large and above - screens. + screens, yellow on medium screens, and green on large and above screens.

); }; diff --git a/packages/website/docs/components/theming/use_eui_min_max_breakpoint_preview.tsx b/packages/website/docs/components/theming/use_eui_min_max_breakpoint_preview.tsx index 2f4295080fb..11fac4ae681 100644 --- a/packages/website/docs/components/theming/use_eui_min_max_breakpoint_preview.tsx +++ b/packages/website/docs/components/theming/use_eui_min_max_breakpoint_preview.tsx @@ -1,5 +1,9 @@ import { css } from '@emotion/react'; -import { useEuiTheme, useEuiMinBreakpoint, useEuiMaxBreakpoint } from '@elastic/eui'; +import { + useEuiTheme, + useEuiMinBreakpoint, + useEuiMaxBreakpoint, +} from '@elastic/eui'; export const UseEuiMinMaxMaxBreakpointPreview = () => { const { euiTheme } = useEuiTheme(); @@ -8,15 +12,15 @@ export const UseEuiMinMaxMaxBreakpointPreview = () => {

- This text is red on screens below the medium breakpoint, and green - on screens above. + This text is red on screens below the medium breakpoint, and green on + screens above.

); }; diff --git a/packages/website/src/components/homepage/banner/index.tsx b/packages/website/src/components/homepage/banner/index.tsx index a2b926cdb5b..a9340419342 100644 --- a/packages/website/src/components/homepage/banner/index.tsx +++ b/packages/website/src/components/homepage/banner/index.tsx @@ -14,7 +14,7 @@ const STORAGE_VALUE_DISMISSED = 'dismissed'; const getStyles = ({ euiTheme }: UseEuiTheme) => ({ banner: css` .euiLink { - color: ${euiTheme.colors.warningText}; + color: ${euiTheme.colors.textWarning}; text-decoration: underline; } `, diff --git a/packages/website/src/components/homepage/users/index.tsx b/packages/website/src/components/homepage/users/index.tsx index 3d5f0d5ee67..3cdea247b1f 100644 --- a/packages/website/src/components/homepage/users/index.tsx +++ b/packages/website/src/components/homepage/users/index.tsx @@ -82,12 +82,12 @@ const getStyles = ({ euiTheme }: UseEuiTheme) => { card: css` &:hover [data-icon-variant='regular'] { background-color: var(--eui-background-color-success); - color: ${euiTheme.colors.successText}; + color: ${euiTheme.colors.textSuccess}; } &:hover [data-icon-variant='alternative'] { background-color: var(--eui-background-color-accent); - color: ${euiTheme.colors.accentText}; + color: ${euiTheme.colors.textAccent}; } .euiCard__content { @@ -128,7 +128,7 @@ const getStyles = ({ euiTheme }: UseEuiTheme) => { `, icon: css` background-color: ${euiTheme.colors.lightestShade}; - color: ${euiTheme.colors.subduedText}; + color: ${euiTheme.colors.textSubdued}; `, text: css` font-size: var(--eui-font-size-m); diff --git a/wiki/contributing-to-eui/developing/writing-styles-with-emotion.md b/wiki/contributing-to-eui/developing/writing-styles-with-emotion.md index 7faf221c044..41a45fb52ed 100644 --- a/wiki/contributing-to-eui/developing/writing-styles-with-emotion.md +++ b/wiki/contributing-to-eui/developing/writing-styles-with-emotion.md @@ -13,7 +13,7 @@ import { UseEuiTheme } from '../../services'; export const euiComponentNameStyles = ({ euiTheme }: UseEuiTheme) => { return { euiComponentName: css` // Always start the object with the first key being the name of the component - color: ${euiTheme.colors.primaryText}; + color: ${euiTheme.colors.textPrimary}; `, }; };