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 66224acb77c..5e02358ed16 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 @@ -36,23 +36,24 @@ const getDemoActionsBarStyles = (euiTheme: UseEuiTheme) => { &:last-child { // border radius should be 1px smaller to work nicely // with the wrapper border width of 1px - border-radius: 0 0 calc(var(--docs-demo-border-radius) - 1px) calc(var(--docs-demo-border-radius) - 1px); + border-radius: 0 0 calc(var(--docs-demo-border-radius) - 1px) + calc(var(--docs-demo-border-radius) - 1px); } `, button: css` - background: var(--eui-background-color-primary-opaque); + background: var(--eui-background-color-primary); border: 1px solid var(--eui-border-color-primary); margin-right: auto; `, }; -} +}; export const DemoActionsBar = ({ isSourceOpen, setSourceOpen, onClickOpenInCodeSandbox, onClickReloadExample, - onClickCopyToClipboard + onClickCopyToClipboard, }: DemoActionsBarProps) => { const styles = useEuiMemoizedStyles(getDemoActionsBarStyles); diff --git a/packages/docusaurus-theme/src/theme/EditThisPage/index.tsx b/packages/docusaurus-theme/src/theme/EditThisPage/index.tsx index 15ad94fc05f..717316ca9f6 100644 --- a/packages/docusaurus-theme/src/theme/EditThisPage/index.tsx +++ b/packages/docusaurus-theme/src/theme/EditThisPage/index.tsx @@ -5,7 +5,7 @@ import type { Props } from '@theme-original/EditThisPage'; import { EuiButton, useEuiMemoizedStyles, UseEuiTheme } from '@elastic/eui'; // @ts-ignore - eui only has module declarations for '@elastic/eui/src/themes/amsterdam/global_styling/mixins/button' // but importing from /src results in "Module not found" error -import { euiButtonColor } from '@elastic/eui/lib/themes/amsterdam/global_styling/mixins/button'; +import { euiButtonColor } from '@elastic/eui/lib/global_styling/mixins/_button'; const getStyles = (theme: UseEuiTheme) => { const { euiTheme } = theme; diff --git a/packages/docusaurus-theme/src/theme/Root.styles.ts b/packages/docusaurus-theme/src/theme/Root.styles.ts index d80e7dc73d6..15fa26a0457 100644 --- a/packages/docusaurus-theme/src/theme/Root.styles.ts +++ b/packages/docusaurus-theme/src/theme/Root.styles.ts @@ -7,11 +7,8 @@ */ import { - euiBorderColor, euiFontSizeFromScale, euiLineHeightFromBaseline, - useEuiBackgroundColor, - useEuiFocusRing, UseEuiTheme, } from '@elastic/eui'; import { css } from '@emotion/react'; @@ -48,76 +45,72 @@ export const getGlobalStyles = (theme: UseEuiTheme) => { const lineHeightXXS = euiLineHeightFromBaseline('xxs', euiTheme); return css` - // color theme related variables - :root, - [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-background-color-accent: ${useEuiBackgroundColor('accent')}; - - --eui-color-danger-text: ${euiTheme.colors.dangerText}; - - /* Docusaurus theme variables */ - --ifm-background-color: ${colors.body}; - --ifm-font-color-base: ${colors.text}; - --ifm-link-color: ${colors.link}; - --ifm-link-hover-color: ${colors.link}; - - --ifm-menu-color: ${euiTheme.colors.text}; - --ifm-menu-color-background-active: ${euiTheme.colors.lightestShade}; - --ifm-menu-color-background-hover: var(--eui-background-color-primary); - - --ifm-pre-background: ${euiTheme.colors.lightestShade}; - } - - :root { - /* EUI theme variables */ - --eui-font-size-base: ${fontBase.fontSize}; - --eui-font-size-xxl: ${fontSizeXXL}; - --eui-font-size-xl: ${fontSizeXL}; - --eui-font-size-l: ${fontSizeL}; - --eui-font-size-m: ${fontSizeM}; - --eui-font-size-s: ${fontSizeS}; - --eui-font-size-xs: ${fontSizeXS}; - --eui-font-size-xxs: ${fontSizeXXS}; - - --eui-line-height-base: ${lineHeightXL}; - --eui-line-height-xxl: ${lineHeightXXL}; - --eui-line-height-xl: ${lineHeightXL}; - --eui-line-height-l: ${lineHeightL}; - --eui-line-height-m: ${lineHeightM}; - --eui-line-height-s: ${lineHeightS}; - --eui-line-height-xs: ${lineHeightXS}; - --eui-line-height-xxs: ${lineHeightXXS}; - - --eui-size-xs: ${euiTheme.size.xs}; - --eui-size-s: ${euiTheme.size.s}; - - --eui-border-color-primary: ${euiBorderColor(theme, 'primary')}; - - --eui-theme-content-vertical-spacing: ${euiTheme.size.base}; - - /* Docusaurus theme variables */ - --ifm-font-family-base: ${fontBase.fontFamily}; - --ifm-font-size-base: var(--eui-font-size-base); - --ifm-font-weight-base: ${fontBase.fontWeight}; - --ifm-line-height-base: var(--eui-line-height-base); - - --ifm-h1-font-size: var(--eui-font-size-xl); - --ifm-h2-font-size: var(--eui-font-size-l); - --ifm-h3-font-size: var(--eui-font-size-m); - --ifm-h4-font-size: var(--eui-font-size-s); - --ifm-h5-font-size: var(--eui-font-size-xs); - --ifm-h6-font-size: var(--eui-font-size-xxs); - - --ifm-global-radius: ${euiTheme.border.radius.small}; - } + // color theme related variables + :root, + [data-theme='dark']:root { + /* EUI theme variables */ + --eui-background-color-primary: ${colors.backgroundBasePrimary}; + --eui-background-color-success: ${colors.backgroundBaseSuccess}; + --eui-background-color-danger: ${colors.backgroundBaseDanger}; + --eui-background-color-warning: ${colors.backgroundBaseWarning}; + --eui-background-color-accent: ${colors.backgroundBaseAccent}; + + --eui-color-danger-text: ${colors.textDanger}; + + /* Docusaurus theme variables */ + --ifm-background-color: ${colors.backgroundBasePlain}; + --ifm-font-color-base: ${colors.textParagraph}; + --ifm-link-color: ${colors.link}; + --ifm-link-hover-color: ${colors.link}; + + --ifm-menu-color: ${colors.textParagraph}; + --ifm-menu-color-background-active: ${colors.backgroundBaseSubdued}; + --ifm-menu-color-background-hover: var(--eui-background-color-primary); + + --ifm-pre-background: ${colors.lightestShade}; + } + + :root { + /* EUI theme variables */ + --eui-font-size-base: ${fontBase.fontSize}; + --eui-font-size-xxl: ${fontSizeXXL}; + --eui-font-size-xl: ${fontSizeXL}; + --eui-font-size-l: ${fontSizeL}; + --eui-font-size-m: ${fontSizeM}; + --eui-font-size-s: ${fontSizeS}; + --eui-font-size-xs: ${fontSizeXS}; + --eui-font-size-xxs: ${fontSizeXXS}; + + --eui-line-height-base: ${lineHeightXL}; + --eui-line-height-xxl: ${lineHeightXXL}; + --eui-line-height-xl: ${lineHeightXL}; + --eui-line-height-l: ${lineHeightL}; + --eui-line-height-m: ${lineHeightM}; + --eui-line-height-s: ${lineHeightS}; + --eui-line-height-xs: ${lineHeightXS}; + --eui-line-height-xxs: ${lineHeightXXS}; + + --eui-size-xs: ${size.xs}; + --eui-size-s: ${size.s}; + + --eui-border-color-primary: ${colors.borderStrongPrimary}; + + --eui-theme-content-vertical-spacing: ${size.base}; + + /* Docusaurus theme variables */ + --ifm-font-family-base: ${fontBase.fontFamily}; + --ifm-font-size-base: var(--eui-font-size-base); + --ifm-font-weight-base: ${fontBase.fontWeight}; + --ifm-line-height-base: var(--eui-line-height-base); + + --ifm-h1-font-size: var(--eui-font-size-xl); + --ifm-h2-font-size: var(--eui-font-size-l); + --ifm-h3-font-size: var(--eui-font-size-m); + --ifm-h4-font-size: var(--eui-font-size-s); + --ifm-h5-font-size: var(--eui-font-size-xs); + --ifm-h6-font-size: var(--eui-font-size-xxs); + + --ifm-global-radius: ${euiTheme.border.radius.small}; + } `; }; diff --git a/packages/eui-theme-borealis/package.json b/packages/eui-theme-borealis/package.json index d56f9924db2..d9742388911 100644 --- a/packages/eui-theme-borealis/package.json +++ b/packages/eui-theme-borealis/package.json @@ -10,7 +10,7 @@ "lint": "yarn tsc --noEmit && yarn lint-es && yarn lint-sass", "lint-es": "eslint --cache src/**/*.ts --max-warnings 0", "lint-sass": "yarn stylelint \"**/*.scss\" --quiet-deprecation-warnings", - "test": "jest", + "test": "jest ./src", "pre-push": "yarn build:workspaces && yarn lint && yarn test" }, "repository": { diff --git a/packages/eui-theme-borealis/src/index.ts b/packages/eui-theme-borealis/src/index.ts index 1427ca8b1e9..2f1f2247be7 100644 --- a/packages/eui-theme-borealis/src/index.ts +++ b/packages/eui-theme-borealis/src/index.ts @@ -8,7 +8,7 @@ import { buildTheme, EuiThemeShape } from '@elastic/eui-theme-common'; -import { colors } from './variables/_colors'; +import { colors } from './variables/colors'; import { animation } from './variables/_animation'; import { breakpoint } from './variables/_breakpoint'; import { base, size } from './variables/_size'; @@ -16,6 +16,7 @@ import { border } from './variables/_borders'; import { levels } from './variables/_levels'; import { font } from './variables/_typography'; import { focus } from './variables/_states'; +import { components } from './variables/_components'; export const EUI_THEME_BOREALIS_KEY = 'EUI_THEME_BOREALIS'; @@ -29,6 +30,7 @@ export const euiThemeBorealis: EuiThemeShape = { breakpoint, levels, focus, + components, }; export const EuiThemeBorealis = buildTheme( diff --git a/packages/eui-theme-borealis/src/theme_dark.scss b/packages/eui-theme-borealis/src/theme_dark.scss index 64e6b27d3a0..d3054ee6b36 100644 --- a/packages/eui-theme-borealis/src/theme_dark.scss +++ b/packages/eui-theme-borealis/src/theme_dark.scss @@ -1,8 +1,8 @@ // color mode specific variables -@import './variables/colors_dark'; +@import './variables/colors/colors_dark'; // Global styling -@import 'node_modules/@elastic/eui-theme-common/src/global_styling/index'; -@import './variables/index'; \ No newline at end of file +@import './variables/index'; +@import 'node_modules/@elastic/eui-theme-common/src/global_styling/index'; \ No newline at end of file diff --git a/packages/eui-theme-borealis/src/theme_light.scss b/packages/eui-theme-borealis/src/theme_light.scss index 29ab275fe73..72c1bd6fcc9 100644 --- a/packages/eui-theme-borealis/src/theme_light.scss +++ b/packages/eui-theme-borealis/src/theme_light.scss @@ -1,7 +1,7 @@ // color mode specific variables -@import './variables/colors_light'; +@import './variables/colors/colors_light'; // Global styling -@import 'node_modules/@elastic/eui-theme-common/src/global_styling/index'; -@import './variables/index'; \ No newline at end of file +@import './variables/index'; +@import 'node_modules/@elastic/eui-theme-common/src/global_styling/index'; \ No newline at end of file diff --git a/packages/eui-theme-borealis/src/variables/_borders.scss b/packages/eui-theme-borealis/src/variables/_borders.scss new file mode 100644 index 00000000000..eb09588f017 --- /dev/null +++ b/packages/eui-theme-borealis/src/variables/_borders.scss @@ -0,0 +1,3 @@ +// Borders + +$euiBorderColor: #00ff00 !default; diff --git a/packages/eui-theme-borealis/src/variables/_borders.ts b/packages/eui-theme-borealis/src/variables/_borders.ts index 35926695e77..34012006168 100644 --- a/packages/eui-theme-borealis/src/variables/_borders.ts +++ b/packages/eui-theme-borealis/src/variables/_borders.ts @@ -13,7 +13,10 @@ import { } from '@elastic/eui-theme-common'; export const border: _EuiThemeBorder = { - color: computed(([lightShade]) => lightShade, ['colors.lightShade']), + color: computed( + ([borderBasePlain]) => borderBasePlain, + ['colors.borderBasePlain'] + ), width: { thin: '1px', thick: '2px', diff --git a/packages/eui-theme-borealis/src/variables/_buttons.scss b/packages/eui-theme-borealis/src/variables/_buttons.scss index f42b0c3264c..65ac53b809e 100644 --- a/packages/eui-theme-borealis/src/variables/_buttons.scss +++ b/packages/eui-theme-borealis/src/variables/_buttons.scss @@ -1,4 +1,18 @@ -$euiButtonColorDisabled: $euiColorDisabled; -$euiButtonColorDisabledText: $euiColorDisabledText; -$euiButtonDefaultTransparency: .8; -$euiButtonFontWeight: $euiFontWeightMedium; +$euiButtonHeight: $euiSizeXXL !default; +$euiButtonHeightSmall: $euiSizeXL !default; +$euiButtonHeightXSmall: $euiSizeL !default; + +// Modifier naming and colors. +$euiButtonTypes: ( + primary: $euiColorBackgroundFilledPrimary, + accent: $euiColorBackgroundFilledAccent, + success: $euiColorBackgroundFilledSuccess, + warning: $euiColorBackgroundFilledWarning, + danger: $euiColorBackgroundFilledDanger, + ghost: $euiColorGhost, // Ghost is special, and does not care about theming. + text: $euiColorBackgroundFilledText, // Reserved for special use cases +) !default; + +// TODO: Remove this once elastic-charts no longer uses this variable +// @see https://github.com/elastic/elastic-charts/pull/2528 +$euiButtonColorDisabledText: $euiColorTextDisabled; diff --git a/packages/eui-theme-borealis/src/variables/_buttons.ts b/packages/eui-theme-borealis/src/variables/_buttons.ts new file mode 100644 index 00000000000..4b5c35b4599 --- /dev/null +++ b/packages/eui-theme-borealis/src/variables/_buttons.ts @@ -0,0 +1,129 @@ +/* + * 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 { _EuiThemeButton } from '@elastic/eui-theme-common'; +import { SEMANTIC_COLORS } from './colors/_semantic_colors'; +import { + background_colors, + brand_text_colors, + text_colors, +} from './colors/_colors_light'; +import { + dark_background_colors, + dark_brand_text_colors, + dark_text_colors, +} from './colors/_colors_dark'; + +const _buttons = { + backgroundPrimary: background_colors.backgroundLightPrimary, + backgroundAccent: background_colors.backgroundLightAccent, + backgroundAccentSecondary: background_colors.backgroundLightAccentSecondary, + backgroundSuccess: background_colors.backgroundLightSuccess, + backgroundWarning: background_colors.backgroundLightWarning, + backgroundDanger: background_colors.backgroundLightDanger, + backgroundText: background_colors.backgroundLightText, + backgroundDisabled: background_colors.backgroundBaseDisabled, + + backgroundFilledPrimary: background_colors.backgroundFilledPrimary, + backgroundFilledAccent: background_colors.backgroundFilledAccent, + backgroundFilledAccentSecondary: + background_colors.backgroundFilledAccentSecondary, + backgroundFilledSuccess: background_colors.backgroundFilledSuccess, + backgroundFilledWarning: background_colors.backgroundFilledWarning, + backgroundFilledDanger: background_colors.backgroundFilledDanger, + backgroundFilledText: background_colors.backgroundFilledText, + backgroundFilledDisabled: background_colors.backgroundBaseDisabled, + + // Temp. mapping to support more variants in old theme + backgroundEmptyPrimaryHover: background_colors.backgroundBaseInteractiveHover, + backgroundEmptyAccentHover: background_colors.backgroundBaseInteractiveHover, + backgroundEmptyAccentSecondaryHover: + background_colors.backgroundBaseInteractiveHover, + backgroundEmptySuccessHover: background_colors.backgroundBaseInteractiveHover, + backgroundEmptyWarningHover: background_colors.backgroundBaseInteractiveHover, + backgroundEmptyDangerHover: background_colors.backgroundBaseInteractiveHover, + backgroundEmptyTextHover: background_colors.backgroundBaseInteractiveHover, + + textColorPrimary: brand_text_colors.textPrimary, + textColorAccent: brand_text_colors.textAccent, + textColorAccentSecondary: brand_text_colors.textAccentSecondary, + textColorSuccess: brand_text_colors.textSuccess, + textColorWarning: brand_text_colors.textWarning, + textColorDanger: brand_text_colors.textDanger, + textColorText: text_colors.textParagraph, + textColorDisabled: text_colors.textDisabled, + + textColorFilledPrimary: text_colors.textInverse, + textColorFilledAccent: text_colors.textInverse, + textColorFilledAccentSecondary: text_colors.textInverse, + textColorFilledSuccess: text_colors.textInverse, + textColorFilledWarning: SEMANTIC_COLORS.warning110, + textColorFilledDanger: text_colors.textInverse, + textColorFilledText: text_colors.textInverse, + textColorFilledDisabled: text_colors.textDisabled, +}; + +const _dark_buttons = { + backgroundPrimary: dark_background_colors.backgroundLightPrimary, + backgroundAccent: dark_background_colors.backgroundLightAccent, + backgroundAccentSecondary: + dark_background_colors.backgroundLightAccentSecondary, + backgroundSuccess: dark_background_colors.backgroundLightSuccess, + backgroundWarning: dark_background_colors.backgroundLightWarning, + backgroundDanger: dark_background_colors.backgroundLightDanger, + backgroundText: dark_background_colors.backgroundLightText, + backgroundDisabled: dark_background_colors.backgroundBaseDisabled, + + backgroundFilledPrimary: dark_background_colors.backgroundFilledPrimary, + backgroundFilledAccent: dark_background_colors.backgroundFilledAccent, + backgroundFilledAccentSecondary: + dark_background_colors.backgroundFilledAccentSecondary, + backgroundFilledSuccess: dark_background_colors.backgroundFilledSuccess, + backgroundFilledWarning: dark_background_colors.backgroundFilledWarning, + backgroundFilledDanger: dark_background_colors.backgroundFilledDanger, + backgroundFilledText: dark_background_colors.backgroundFilledText, + backgroundFilledDisabled: dark_background_colors.backgroundBaseDisabled, + + backgroundEmptyPrimaryHover: + dark_background_colors.backgroundBaseInteractiveHover, + backgroundEmptyAccentHover: + dark_background_colors.backgroundBaseInteractiveHover, + backgroundEmptyAccentSecondaryHover: + dark_background_colors.backgroundBaseInteractiveHover, + backgroundEmptySuccessHover: + dark_background_colors.backgroundBaseInteractiveHover, + backgroundEmptyWarningHover: + dark_background_colors.backgroundBaseInteractiveHover, + backgroundEmptyDangerHover: + dark_background_colors.backgroundBaseInteractiveHover, + backgroundEmptyTextHover: + dark_background_colors.backgroundBaseInteractiveHover, + + textColorPrimary: dark_brand_text_colors.textPrimary, + textColorAccent: dark_brand_text_colors.textAccent, + textColorAccentSecondary: dark_brand_text_colors.textAccentSecondary, + textColorSuccess: dark_brand_text_colors.textSuccess, + textColorWarning: dark_brand_text_colors.textWarning, + textColorDanger: dark_brand_text_colors.textDanger, + textColorText: dark_text_colors.textParagraph, + textColorDisabled: dark_text_colors.textDisabled, + + textColorFilledPrimary: dark_text_colors.textInverse, + textColorFilledAccent: dark_text_colors.textInverse, + textColorFilledAccentSecondary: dark_text_colors.textInverse, + textColorFilledSuccess: dark_text_colors.textInverse, + textColorFilledWarning: SEMANTIC_COLORS.warning110, + textColorFilledDanger: dark_text_colors.textInverse, + textColorFilledText: dark_text_colors.textInverse, + textColorFilledDisabled: dark_text_colors.textDisabled, +}; + +export const buttons: _EuiThemeButton = { + LIGHT: _buttons, + DARK: _dark_buttons, +}; diff --git a/packages/eui-theme-borealis/src/variables/_colors_dark.scss b/packages/eui-theme-borealis/src/variables/_colors_dark.scss deleted file mode 100644 index e648b1b0841..00000000000 --- a/packages/eui-theme-borealis/src/variables/_colors_dark.scss +++ /dev/null @@ -1,49 +0,0 @@ -// stylelint-disable color-no-hex - -// This extra import allows any variables that are created via functions to work when loaded into JS -@import 'node_modules/@elastic/eui-theme-common/src/global_styling/functions/index'; - -// These colors stay the same no matter the theme -$euiColorGhost: #FFF !default; -$euiColorInk: #000 !default; - -// Core -$euiColorPrimary: #0A0 !default; // test color for distinction -$euiColorAccent: #F68FBE !default; - -// Status -$euiColorSuccess: #7DDED8 !default; -$euiColorWarning: #F3D371 !default; -$euiColorDanger: #F86B63 !default; - -// Grays -$euiColorEmptyShade: #1D1E24 !default; -$euiColorLightestShade: #25262E !default; -$euiColorLightShade: #343741 !default; -$euiColorMediumShade: #535966 !default; -$euiColorDarkShade: #98A2B3 !default; -$euiColorDarkestShade: #D4DAE5 !default; -$euiColorFullShade: #FFF !default; - -// Backgrounds -$euiPageBackgroundColor: shade($euiColorLightestShade, 45%) !default; -$euiColorHighlight: #2E2D25 !default; - -// Variations from core -$euiTextColor: #DFE5EF !default; -$euiTitleColor: $euiTextColor !default; -$euiTextSubduedColor: makeHighContrastColor($euiColorMediumShade) !default; -$euiColorDisabled: #515761 !default; - -// Contrasty text variants -$euiColorPrimaryText: makeHighContrastColor($euiColorPrimary) !default; -$euiColorSuccessText: makeHighContrastColor($euiColorSuccess) !default; -$euiColorAccentText: makeHighContrastColor($euiColorAccent) !default; -$euiColorWarningText: makeHighContrastColor($euiColorWarning) !default; -$euiColorDangerText: makeHighContrastColor($euiColorDanger) !default; -$euiColorDisabledText: makeDisabledContrastColor($euiColorDisabled) !default; -$euiLinkColor: $euiColorPrimaryText !default; - -// Charts -$euiColorChartLines: $euiColorLightShade !default; -$euiColorChartBand: tint($euiColorLightestShade, 2.5%) !default; diff --git a/packages/eui-theme-borealis/src/variables/_colors_dark.ts b/packages/eui-theme-borealis/src/variables/_colors_dark.ts deleted file mode 100644 index 88a280d27c2..00000000000 --- a/packages/eui-theme-borealis/src/variables/_colors_dark.ts +++ /dev/null @@ -1,73 +0,0 @@ -/* - * 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 { - computed, - type _EuiThemeBrandColors, - type _EuiThemeBrandTextColors, - type _EuiThemeShadeColors, - type _EuiThemeSpecialColors, - type _EuiThemeTextColors, - type _EuiThemeColorsMode, -} from '@elastic/eui-theme-common'; - -/* - * DARK THEME - */ - -export const dark_brand_colors: _EuiThemeBrandColors = { - primary: '#00aa00', // test color for distinction - accent: '#F68FBE', - success: '#7DDED8', - warning: '#F3D371', - danger: '#F86B63', -}; - -export const dark_brand_text_colors: _EuiThemeBrandTextColors = { - // temp. static values to remove dependency on makeHighContrastColor - primaryText: '#36a2ef', - accentText: '#f68fbe', - successText: '#7dded8', - warningText: '#f3d371', - dangerText: '#f86b63', -}; - -export const dark_shades: _EuiThemeShadeColors = { - emptyShade: '#1D1E24', - lightestShade: '#25262E', - lightShade: '#343741', - mediumShade: '#535966', - darkShade: '#98A2B3', - darkestShade: '#D4DAE5', - fullShade: '#FFF', -}; - -export const dark_special_colors: _EuiThemeSpecialColors = { - // temp. static values to remove dependency on shade and makeDisabledContrastColor - body: '#141519', - highlight: '#2E2D25', - disabled: '#515761', - disabledText: '#515761', - shadow: computed(({ colors }) => colors.ink), -}; - -export const dark_text_colors: _EuiThemeTextColors = { - text: '#DFE5EF', - title: computed(([text]) => text, ['colors.text']), - subduedText: '#81858f', // temp. static value to remove dependency makeDisabledContrastColor - link: computed(([primaryText]) => primaryText, ['colors.primaryText']), -}; - -export const dark_colors: _EuiThemeColorsMode = { - ...dark_brand_colors, - ...dark_shades, - ...dark_special_colors, - // Need to come after special colors so they can react to `body` - ...dark_brand_text_colors, - ...dark_text_colors, -}; diff --git a/packages/eui-theme-borealis/src/variables/_colors_light.scss b/packages/eui-theme-borealis/src/variables/_colors_light.scss deleted file mode 100644 index 610ff5327bf..00000000000 --- a/packages/eui-theme-borealis/src/variables/_colors_light.scss +++ /dev/null @@ -1,49 +0,0 @@ -// stylelint-disable color-no-hex - -// This extra import allows any variables that are created via functions to work when loaded into JS -@import 'node_modules/@elastic/eui-theme-common/src/global_styling/functions/index'; - -// These colors stay the same no matter the theme -$euiColorGhost: #FFF !default; -$euiColorInk: #000 !default; - -// Core -$euiColorPrimary: #0F0 !default; // test color for distinction -$euiColorAccent: #F04E98 !default; - -// Status -$euiColorSuccess: #00BFB3 !default; -$euiColorWarning: #FEC514 !default; -$euiColorDanger: #BD271E !default; - -// Grays -$euiColorEmptyShade: #FFF !default; -$euiColorLightestShade: #F5F7FA !default; -$euiColorLightShade: #D3DAE6 !default; -$euiColorMediumShade: #98A2B3 !default; -$euiColorDarkShade: #69707D !default; -$euiColorDarkestShade: #343741 !default; -$euiColorFullShade: #000 !default; - -// Backgrounds -$euiPageBackgroundColor: tint($euiColorLightestShade, 50%) !default; -$euiColorHighlight: tint($euiColorWarning, 90%) !default; - -// Every color below must be based mathematically on the set above and in a particular order. -$euiTextColor: $euiColorDarkestShade !default; -$euiTitleColor: shade($euiTextColor, 50%) !default; -$euiTextSubduedColor: $euiColorDarkShade !default; -$euiColorDisabled: #ABB4C4 !default; - -// Contrasty text variants -$euiColorPrimaryText: makeHighContrastColor($euiColorPrimary) !default; -$euiColorSuccessText: makeHighContrastColor($euiColorSuccess) !default; -$euiColorAccentText: makeHighContrastColor($euiColorAccent) !default; -$euiColorWarningText: makeHighContrastColor($euiColorWarning) !default; -$euiColorDangerText: makeHighContrastColor($euiColorDanger) !default; -$euiColorDisabledText: makeDisabledContrastColor($euiColorDisabled) !default; -$euiLinkColor: $euiColorPrimaryText !default; - -// Charts -$euiColorChartLines: shade($euiColorLightestShade, 3%) !default; -$euiColorChartBand: $euiColorLightestShade !default; diff --git a/packages/eui-theme-borealis/src/variables/_colors_light.ts b/packages/eui-theme-borealis/src/variables/_colors_light.ts deleted file mode 100644 index 95715428e71..00000000000 --- a/packages/eui-theme-borealis/src/variables/_colors_light.ts +++ /dev/null @@ -1,74 +0,0 @@ -/* - * 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 { - computed, - type _EuiThemeBrandColors, - type _EuiThemeBrandTextColors, - type _EuiThemeShadeColors, - type _EuiThemeSpecialColors, - type _EuiThemeTextColors, - type _EuiThemeColorsMode, -} from '@elastic/eui-theme-common'; - -/* - * LIGHT THEME - */ - -export const brand_colors: _EuiThemeBrandColors = { - primary: '#00ff00', // test color for distinction - accent: '#F04E98', - success: '#00BFB3', - warning: '#FEC514', - danger: '#BD271E', -}; - -export const brand_text_colors: _EuiThemeBrandTextColors = { - // temp. static values to remove dependency on makeHighContrastColor - primaryText: '#006bb8', - accentText: '#ba3d76', - successText: '#00BFB3', - warningText: '#83650a', - dangerText: '#bd271e', -}; - -export const shade_colors: _EuiThemeShadeColors = { - emptyShade: '#FFF', - lightestShade: '#F1F4FA', - lightShade: '#D3DAE6', - mediumShade: '#98A2B3', - darkShade: '#69707D', - darkestShade: '#343741', - fullShade: '#000', -}; - -export const special_colors: _EuiThemeSpecialColors = { - // temp. static values to remove dependency on tint and makeDisabledContrastColor - body: '#f7f8fc', - highlight: '#fff9e8', - disabled: '#ABB4C4', - disabledText: '#a2abba', - shadow: computed(({ colors }) => colors.ink), -}; - -export const text_colors: _EuiThemeTextColors = { - text: computed(([darkestShade]) => darkestShade, ['colors.darkestShade']), - // temp. static values to remove dependency on tint and makeDisabledContrastColor - title: '#1a1c21', - subduedText: '#646a77', - link: computed(([primaryText]) => primaryText, ['colors.primaryText']), -}; - -export const light_colors: _EuiThemeColorsMode = { - ...brand_colors, - ...shade_colors, - ...special_colors, - // Need to come after special colors so they can react to `body` - ...brand_text_colors, - ...text_colors, -}; diff --git a/packages/eui-theme-borealis/src/variables/_components.ts b/packages/eui-theme-borealis/src/variables/_components.ts new file mode 100644 index 00000000000..47fa693be55 --- /dev/null +++ b/packages/eui-theme-borealis/src/variables/_components.ts @@ -0,0 +1,226 @@ +/* + * 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 { + _EuiThemeComponentColors, + _EuiThemeComponents, +} from '@elastic/eui-theme-common'; + +import { SEMANTIC_COLORS } from './colors/_semantic_colors'; +import { + dark_background_colors, + dark_border_colors, + dark_text_colors, +} from './colors/_colors_dark'; + +import { buttons } from './_buttons'; +import { forms } from './_forms'; +import { + background_colors, + border_colors, + text_colors, +} from './colors/_colors_light'; + +const component_colors: _EuiThemeComponentColors = { + buttonGroupBorderColor: border_colors.borderBasePlain, + buttonGroupBorderColorSelected: border_colors.borderBasePlain, + + badgeBackgroundSubdued: background_colors.backgroundBaseSubdued, + badgeBorderColorHollow: border_colors.borderBasePlain, + badgeIconButtonBackgroundHover: + background_colors.backgroundBaseInteractiveHover, + + breadcrumbsApplicationBackground: background_colors.backgroundLightText, + breadcrumbsApplicationColor: text_colors.textSubdued, + + bottomBarBackground: SEMANTIC_COLORS.plainDark, + + collapsibleNavGroupBackground: background_colors.backgroundBaseSubdued, + collapsibleNavGroupBackgroundDark: + dark_background_colors.backgroundBaseSubdued, + + dataGridVerticalLineBorderColor: border_colors.borderBasePlain, + dataGridRowBackgroundStriped: background_colors.backgroundBaseSubdued, + dataGridRowBackgroundHover: background_colors.backgroundBaseInteractiveHover, + + dragDropDraggingBackground: background_colors.backgroundBaseSuccess, + dragDropDraggingOverBackground: background_colors.backgroundLightSuccess, + + filterSelectItemBackgroundFocusDisabled: + background_colors.backgroundBaseDisabled, + + flyoutCloseButtonInsideBackground: background_colors.backgroundBasePlain, + + headerBackground: background_colors.backgroundBasePlain, + headerDarkBackground: dark_background_colors.backgroundBasePlain, + headerDarkSearchBorderColor: dark_border_colors.borderBaseFormsControl, + headerDarkSectionItemBackgroundFocus: + dark_background_colors.backgroundBasePrimary, + + keyPadMenuItemBackgroundDisabledSelect: + background_colors.backgroundBaseDisabled, + + listGroupItemBackgroundPrimaryActive: + background_colors.backgroundBaseInteractiveSelect, + listGroupItemBackgroundSubduedActive: + background_colors.backgroundBaseInteractiveSelect, + listGroupItemBackgroundHover: + background_colors.backgroundBaseInteractiveHover, + listGroupItemBackgroundPrimaryHover: + background_colors.backgroundBaseInteractiveHover, + + markBackground: background_colors.backgroundLightPrimary, + + markdownFormatTableBorderColor: border_colors.borderBasePlain, + + popoverPanelBackground: background_colors.backgroundBasePlain, + popoverFooterBorderColor: border_colors.borderBaseSubdued, + + scrollbarTrackColor: SEMANTIC_COLORS.shade15, + + sideNavItemEmphasizedBackground: + background_colors.backgroundBaseInteractiveSelect, + + selectableListItemBorderColor: border_colors.borderBaseSubdued, + + superDatePickerBackgroundSuccees: background_colors.backgroundBaseSuccess, + + switchBackgroundOn: background_colors.backgroundFilledPrimary, + switchBackgroundOff: background_colors.backgroundFilledText, + switchUncompressedBackgroundDisabled: + background_colors.backgroundBaseFormsControlDisabled, + switchCompressedBackgroundDisabled: + background_colors.backgroundBaseFormsControlDisabled, + switchMiniBackgroundDisabled: + background_colors.backgroundBaseFormsControlDisabled, + switchThumbBackgroundDisabled: background_colors.backgroundBasePlain, + switchThumbBorderOn: background_colors.backgroundFilledPrimary, + switchThumbBorderOff: background_colors.backgroundFilledText, + switchIconDisabled: forms.LIGHT.iconDisabled, + + tableRowBackgroundHover: background_colors.backgroundBaseInteractiveHover, + tableRowBackgroundSelected: background_colors.backgroundBaseInteractiveSelect, + tableRowBackgroundSelectedHover: + background_colors.backgroundBaseInteractiveSelect, + tableRowInteractiveBackgroundHover: + background_colors.backgroundBaseInteractiveSelect, + tableRowInteractiveBackgroundFocus: + background_colors.backgroundBaseInteractiveSelect, + tableCellSortableIconColor: background_colors.backgroundFilledText, + + tooltipBackground: dark_background_colors.backgroundBaseSubdued, + tooltipBorder: dark_border_colors.borderBaseSubdued, + tooltipBorderFloating: border_colors.borderBaseFloating, + + tourFooterBackground: background_colors.backgroundBaseSubdued, + + treeViewItemBackgroundHover: background_colors.backgroundBaseInteractiveHover, +}; + +export const components: _EuiThemeComponents = { + buttons, + forms, + LIGHT: component_colors, + DARK: { + ...component_colors, + + buttonGroupBorderColor: dark_border_colors.borderBasePlain, + buttonGroupBorderColorSelected: dark_border_colors.borderBasePlain, + + badgeBackgroundSubdued: dark_background_colors.backgroundBaseSubdued, + badgeBorderColorHollow: dark_border_colors.borderBasePlain, + badgeIconButtonBackgroundHover: + dark_background_colors.backgroundBaseInteractiveHover, + + breadcrumbsApplicationBackground: + dark_background_colors.backgroundLightText, + breadcrumbsApplicationColor: dark_text_colors.textSubdued, + + collapsibleNavGroupBackground: dark_background_colors.backgroundBaseSubdued, + collapsibleNavGroupBackgroundDark: + dark_background_colors.backgroundBaseSubdued, + + dataGridVerticalLineBorderColor: dark_border_colors.borderBasePlain, + dataGridRowBackgroundStriped: dark_background_colors.backgroundBaseSubdued, + dataGridRowBackgroundHover: + dark_background_colors.backgroundBaseInteractiveHover, + + dragDropDraggingBackground: dark_background_colors.backgroundBaseSuccess, + dragDropDraggingOverBackground: + dark_background_colors.backgroundLightSuccess, + + filterSelectItemBackgroundFocusDisabled: + dark_background_colors.backgroundBaseDisabled, + + flyoutCloseButtonInsideBackground: + dark_background_colors.backgroundBasePlain, + + headerBackground: dark_background_colors.backgroundBasePlain, + + keyPadMenuItemBackgroundDisabledSelect: + dark_background_colors.backgroundBaseDisabled, + + listGroupItemBackgroundPrimaryActive: + dark_background_colors.backgroundBaseInteractiveSelect, + listGroupItemBackgroundSubduedActive: + dark_background_colors.backgroundBaseInteractiveSelect, + listGroupItemBackgroundHover: + dark_background_colors.backgroundBaseInteractiveHover, + listGroupItemBackgroundPrimaryHover: + dark_background_colors.backgroundBaseInteractiveHover, + + markBackground: dark_background_colors.backgroundLightPrimary, + + markdownFormatTableBorderColor: dark_border_colors.borderBasePlain, + + popoverPanelBackground: dark_background_colors.backgroundBasePlain, + popoverFooterBorderColor: dark_border_colors.borderBaseSubdued, + + scrollbarTrackColor: SEMANTIC_COLORS.shade145, + + sideNavItemEmphasizedBackground: + dark_background_colors.backgroundBaseInteractiveSelect, + + selectableListItemBorderColor: dark_border_colors.borderBaseSubdued, + + switchBackgroundOn: dark_background_colors.backgroundFilledPrimary, + switchBackgroundOff: dark_background_colors.backgroundFilledText, + switchUncompressedBackgroundDisabled: + dark_background_colors.backgroundBaseFormsControlDisabled, + switchCompressedBackgroundDisabled: + dark_background_colors.backgroundBaseFormsControlDisabled, + switchMiniBackgroundDisabled: + dark_background_colors.backgroundBaseFormsControlDisabled, + switchThumbBackgroundDisabled: dark_background_colors.backgroundBasePlain, + switchThumbBorderOn: dark_background_colors.backgroundFilledPrimary, + switchThumbBorderOff: dark_background_colors.backgroundFilledText, + switchIconDisabled: forms.DARK.iconDisabled, + + superDatePickerBackgroundSuccees: + dark_background_colors.backgroundBaseSuccess, + + tableRowBackgroundHover: + dark_background_colors.backgroundBaseInteractiveHover, + tableRowBackgroundSelected: + dark_background_colors.backgroundBaseInteractiveSelect, + tableRowBackgroundSelectedHover: + dark_background_colors.backgroundBaseInteractiveSelect, + tableRowInteractiveBackgroundHover: + dark_background_colors.backgroundBaseInteractiveHover, + tableRowInteractiveBackgroundFocus: + dark_background_colors.backgroundBaseInteractiveHover, + tableCellSortableIconColor: dark_background_colors.backgroundFilledText, + + tooltipBorderFloating: dark_border_colors.borderBaseFloating, + + tourFooterBackground: dark_background_colors.backgroundBaseSubdued, + + treeViewItemBackgroundHover: + dark_background_colors.backgroundBaseInteractiveHover, + }, +}; diff --git a/packages/eui-theme-borealis/src/variables/_form.scss b/packages/eui-theme-borealis/src/variables/_form.scss new file mode 100644 index 00000000000..5ee2ac834bd --- /dev/null +++ b/packages/eui-theme-borealis/src/variables/_form.scss @@ -0,0 +1,12 @@ +// Coloring +$euiFormBackgroundColor: $euiColorBackgroundBaseSubdued !default; +$euiFormBackgroundDisabledColor: $euiColorBackgroundBaseDisabled !default; +$euiFormBackgroundReadOnlyColor: $euiColorBackgroundBasePlain !default; +$euiFormBorderOpaqueColor: shadeOrTint(desaturate(adjust-hue($euiColorPrimary, 22), 22.95), 26%, 100%) !default; +$euiFormBorderColor: $euiColorBorderBasePlain !default; +$euiFormBorderDisabledColor: $euiColorBorderBaseDisabled !default; +$euiFormControlDisabledColor: $euiColorBackgroundBaseFormsControlDisabled !default; +$euiFormControlBoxShadow: 0 0 transparent !default; +$euiFormControlPlaceholderText: makeHighContrastColor($euiTextSubduedColor, $euiFormBackgroundColor) !default; +$euiFormInputGroupLabelBackground: $euiColorBackgroundBaseFormsPrepend !default; +$euiFormInputGroupBorder: none !default; \ No newline at end of file diff --git a/packages/eui-theme-borealis/src/variables/_forms.ts b/packages/eui-theme-borealis/src/variables/_forms.ts new file mode 100644 index 00000000000..caee38bc992 --- /dev/null +++ b/packages/eui-theme-borealis/src/variables/_forms.ts @@ -0,0 +1,63 @@ +/* + * 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 { + dark_background_colors, + dark_border_colors, + dark_text_colors, +} from './colors/_colors_dark'; +import { + background_colors, + border_colors, + text_colors, +} from './colors/_colors_light'; + +const _forms = { + background: background_colors.backgroundBasePlain, + backgroundDisabled: background_colors.backgroundBaseDisabled, + backgroundReadOnly: background_colors.backgroundBasePlain, + backgroundFocused: background_colors.backgroundBasePlain, + backgroundAutofilled: background_colors.backgroundBasePrimary, + prependBackground: background_colors.backgroundBaseFormsPrepend, + border: border_colors.borderBasePlain, + borderAutofilled: border_colors.borderBasePrimary, + controlBorder: border_colors.borderBaseFormsControl, + controlBorderSelected: border_colors.borderStrongPrimary, + controlBorderDisabled: border_colors.borderBaseDisabled, + controlBackgroundUnselected: 'transparent', + controlBackgroundDisabled: + background_colors.backgroundBaseFormsControlDisabled, + colorHasPlaceholder: text_colors.textSubdued, + colorDisabled: text_colors.textDisabled, + iconDisabled: text_colors.textDisabled, +}; + +const _dark_forms = { + ..._forms, + background: dark_background_colors.backgroundBasePlain, + backgroundDisabled: dark_background_colors.backgroundBaseDisabled, + backgroundReadOnly: dark_background_colors.backgroundBasePlain, + backgroundFocused: dark_background_colors.backgroundBasePlain, + backgroundAutofilled: dark_background_colors.backgroundBasePrimary, + prependBackground: dark_background_colors.backgroundBaseFormsPrepend, + border: dark_border_colors.borderBasePlain, + borderAutofilled: dark_border_colors.borderBasePrimary, + controlBorder: dark_border_colors.borderBaseFormsControl, + controlBorderSelected: dark_border_colors.borderStrongPrimary, + controlBorderDisabled: dark_border_colors.borderBaseDisabled, + controlBackgroundUnselected: 'transparent', + controlBackgroundDisabled: + dark_background_colors.backgroundBaseFormsControlDisabled, + colorHasPlaceholder: dark_text_colors.textSubdued, + colorDisabled: dark_text_colors.textDisabled, + iconDisabled: dark_text_colors.textDisabled, +}; + +export const forms = { + LIGHT: _forms, + DARK: _dark_forms, +}; diff --git a/packages/eui-theme-borealis/src/variables/_index.scss b/packages/eui-theme-borealis/src/variables/_index.scss index 9768a81e8ee..38d8453f9be 100644 --- a/packages/eui-theme-borealis/src/variables/_index.scss +++ b/packages/eui-theme-borealis/src/variables/_index.scss @@ -2,6 +2,7 @@ @import 'node_modules/@elastic/eui-theme-common/src/global_styling/variables/index'; @import 'states'; -@import 'buttons'; +@import 'borders'; +@import 'form'; @import 'page'; @import 'typography'; diff --git a/packages/eui-theme-borealis/src/variables/_states.scss b/packages/eui-theme-borealis/src/variables/_states.scss index 13e30784936..2d6a4c8ff5f 100644 --- a/packages/eui-theme-borealis/src/variables/_states.scss +++ b/packages/eui-theme-borealis/src/variables/_states.scss @@ -8,4 +8,4 @@ $euiFocusRingSize: 2px; // Transparency $euiFocusTransparency: lightOrDarkTheme(.9, .8); $euiFocusTransparencyPercent: lightOrDarkTheme(90%, 80%); -$euiFocusBackgroundColor: transparentize($euiColorPrimary, $euiFocusTransparency); +$euiFocusBackgroundColor: $euiColorBackgroundBaseInteractiveSelect; diff --git a/packages/eui-theme-borealis/src/variables/_states.ts b/packages/eui-theme-borealis/src/variables/_states.ts index 776a00ffeca..864c4c3963b 100644 --- a/packages/eui-theme-borealis/src/variables/_states.ts +++ b/packages/eui-theme-borealis/src/variables/_states.ts @@ -18,5 +18,8 @@ export const focus: _EuiThemeFocus = { width: computed(sizeToPixel(0.125)), // Focus background transparency: { LIGHT: 0.1, DARK: 0.2 }, - backgroundColor: 'rgba(0, 119, 204, 0.1)', // temp. static value to remove dependency on transparentize + backgroundColor: computed( + ([backgroundBaseInteractiveHover]) => backgroundBaseInteractiveHover, + ['colors.backgroundBaseInteractiveHover'] + ), }; diff --git a/packages/eui-theme-borealis/src/variables/colors/_colors_dark.scss b/packages/eui-theme-borealis/src/variables/colors/_colors_dark.scss new file mode 100644 index 00000000000..3dbb9d68f02 --- /dev/null +++ b/packages/eui-theme-borealis/src/variables/colors/_colors_dark.scss @@ -0,0 +1,121 @@ +// stylelint-disable color-no-hex + +// This extra import allows any variables that are created via functions to work when loaded into JS +@import 'node_modules/@elastic/eui-theme-common/src/global_styling/functions/index'; + +@import 'semantic_colors'; + +// Constants (legacy) +$euiColorGhost: $euiColorWhite !default; +$euiColorInk: $euiColorBlack !default; + +// Brand +$euiColorPrimary: $euiColorPrimary70 !default; +$euiColorAccent: $euiColorAccent70 !default; +$euiColorAccentSecondary: $euiColorAccentSecondary70 !default; +$euiColorSuccess: $euiColorSuccess60 !default; +$euiColorWarning: $euiColorWarning40 !default; +$euiColorDanger: $euiColorDanger70 !default; + +// Shades +$euiColorEmptyShade: $euiColorPlainDark !default; +$euiColorLightestShade: $euiColorShade135 !default; +$euiColorLightShade: $euiColorShade125 !default; +$euiColorMediumShade: $euiColorShade95 !default; +$euiColorDarkShade: $euiColorShade75 !default; +$euiColorDarkestShade: $euiColorShade30 !default; +$euiColorFullShade: $euiColorPlainLight !default; + +// Backgrounds +$euiPageBackgroundColor: $euiColorBlueBlack !default; // deprecated +$euiColorHighlight: $euiColorPrimary100 !default; + +$euiColorBackgroundBasePrimary: $euiColorPrimary140 !default; +$euiColorBackgroundBaseAccent: $euiColorAccent140 !default; +$euiColorBackgroundBaseAccentSecondary: $euiColorAccentSecondary140 !default; +$euiColorBackgroundBaseSuccess: $euiColorSuccess140 !default; +$euiColorBackgroundBaseWarning: $euiColorWarning140 !default; +$euiColorBackgroundBaseDanger: $euiColorDanger140 !default; +$euiColorBackgroundBaseSubdued: $euiColorPlainDark !default; +$euiColorBackgroundBasePlain: $euiColorShade145 !default; +$euiColorBackgroundBaseDisabled: $euiColorShade130 !default; +$euiColorBackgroundBaseFormsPrepend: $euiColorShade125 !default; +$euiColorBackgroundBaseFormsControlDisabled: $euiColorShade120 !default; + +$euiColorBackgroundBaseInteractiveHover: $euiColorTransparentWhite10 !default; +$euiColorBackgroundBaseInteractiveSelect: $euiColorShade130 !default; +$euiColorBackgroundBaseInteractiveOverlay: $euiColorShadeTransparent80 !default; +$euiColorBackgroundBaseSkeletonEdge: $euiColorTransparentWhite10 !default; +$euiColorBackgroundBaseSkeletonMiddle: $euiColorTransparentWhite30 !default; + +$euiColorBackgroundLightPrimary: $euiColorPrimary130 !default; +$euiColorBackgroundLightAccent: $euiColorAccent130 !default; +$euiColorBackgroundLightAccentSecondary: $euiColorAccentSecondary130 !default; +$euiColorBackgroundLightSuccess: $euiColorSuccess130 !default; +$euiColorBackgroundLightWarning: $euiColorWarning130 !default; +$euiColorBackgroundLightDanger: $euiColorDanger130 !default; +$euiColorBackgroundLightText: $euiColorShade130 !default; + +$euiColorBackgroundFilledPrimary: $euiColorPrimary60 !default; +$euiColorBackgroundFilledAccent: $euiColorAccent60 !default; +$euiColorBackgroundFilledAccentSecondary: $euiColorAccentSecondary60 !default; +$euiColorBackgroundFilledSuccess: $euiColorSuccess60 !default; +$euiColorBackgroundFilledWarning: $euiColorWarning40 !default; +$euiColorBackgroundFilledDanger: $euiColorDanger60 !default; +$euiColorBackgroundFilledText: $euiColorShade60 !default; + +// Texts (legacy) +$euiTextColor: $euiColorShade20 !default; +$euiTitleColor: $euiColorShade15 !default; +$euiTextSubduedColor: $euiColorShade40 !default; +$euiColorDisabled: $euiColorBackgroundBaseDisabled !default; +$euiColorDisabledText: $euiColorShade60 !default; +$euiLinkColor: $euiColorPrimary60 !default; + +// Texts +$euiColorTextParagraph: $euiColorShade20 !default; +$euiColorTextHeading: $euiColorShade15 !default; +$euiColorTextSubdued: $euiColorShade40 !default; +$euiColorTextDisabled: $euiColorShade60 !default; +$euiColorTextInverse: $euiColorPlainDark !default; + +// Brand texts (legacy) +$euiColorPrimaryText: $euiColorPrimary60 !default; +$euiColorAccentText: $euiColorAccent60 !default; +$euiColorSuccessText: $euiColorSuccess60 !default; +$euiColorWarningText: $euiColorWarning30 !default; +$euiColorDangerText: $euiColorDanger60 !default; + +// Brand texts +$euiColorTextPrimary: $euiColorPrimary60 !default; +$euiColorTextAccent: $euiColorAccent60 !default; +$euiColorTextAccentSecondary: $euiColorAccentSecondary60 !default; +$euiColorTextSuccess: $euiColorSuccess60 !default; +$euiColorTextWarning: $euiColorWarning30 !default; +$euiColorTextDanger: $euiColorDanger60 !default; + +// Borders +$euiColorBorderBasePrimary: $euiColorPrimary120; +$euiColorBorderBaseAccent: $euiColorAccent120; +$euiColorBorderBaseAccentSecondary: $euiColorAccentSecondary120; +$euiColorBorderBaseSuccess: $euiColorSuccess120; +$euiColorBorderBaseWarning: $euiColorWarning120; +$euiColorBorderBaseDanger: $euiColorDanger120; + +$euiColorBorderBasePlain: $euiColorShade110; +$euiColorBorderBaseSubdued: $euiColorShade120; +$euiColorBorderBaseDisabled: $euiColorShade120; +$euiColorBorderBaseFloating: $euiColorShade120; +$euiColorBorderBaseFormsColorSwatch: $euiColorTransparentWhite30; +$euiColorBorderBaseFormsControl: $euiColorShade80; + +$euiColorStrongBasePrimary: $euiColorPrimary60; +$euiColorStrongBaseAccent: $euiColorAccent60; +$euiColorStrongBaseAccentSecondary: $euiColorAccentSecondary60; +$euiColorStrongBaseSuccess: $euiColorSuccess60; +$euiColorStrongBaseWarning: $euiColorWarning40; +$euiColorStrongBaseDanger: $euiColorDanger60; + +// Charts +$euiColorChartLines: $euiColorShade85 !default; +$euiColorChartBand: $euiColorShade125 !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 new file mode 100644 index 00000000000..9d62c0670a8 --- /dev/null +++ b/packages/eui-theme-borealis/src/variables/colors/_colors_dark.ts @@ -0,0 +1,178 @@ +/* + * 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 { + type _EuiThemeBrandColors, + type _EuiThemeBrandTextColors, + type _EuiThemeShadeColors, + type _EuiThemeSpecialColors, + type _EuiThemeTextColors, + type _EuiThemeColorsMode, + _EuiThemeBackgroundColors, + _EuiThemeBorderColors, + _EuiThemeTransparentBackgroundColors, +} from '@elastic/eui-theme-common'; + +import { PRIMITIVE_COLORS } from './_primitive_colors'; +import { SEMANTIC_COLORS } from './_semantic_colors'; + +/* + * DARK THEME + */ + +export const dark_brand_colors: _EuiThemeBrandColors = { + primary: SEMANTIC_COLORS.primary70, + accent: SEMANTIC_COLORS.accent70, + accentSecondary: SEMANTIC_COLORS.accentSecondary70, + success: SEMANTIC_COLORS.success60, + warning: SEMANTIC_COLORS.warning40, + danger: SEMANTIC_COLORS.danger70, +}; + +export const dark_brand_text_colors: _EuiThemeBrandTextColors = { + /* Legacy colors */ + primaryText: SEMANTIC_COLORS.primary60, + accentText: SEMANTIC_COLORS.accent60, + successText: SEMANTIC_COLORS.success60, + warningText: SEMANTIC_COLORS.warning30, + dangerText: SEMANTIC_COLORS.danger60, + + /* New colors */ + textPrimary: SEMANTIC_COLORS.primary60, + textAccent: SEMANTIC_COLORS.accent60, + textAccentSecondary: SEMANTIC_COLORS.accentSecondary60, + textSuccess: SEMANTIC_COLORS.success60, + textWarning: SEMANTIC_COLORS.warning30, + textDanger: SEMANTIC_COLORS.danger60, +}; + +export const dark_text_colors: _EuiThemeTextColors = { + /* Legacy colors */ + text: SEMANTIC_COLORS.shade20, + title: SEMANTIC_COLORS.shade15, + subduedText: SEMANTIC_COLORS.shade40, + link: SEMANTIC_COLORS.primary60, + + /* New colors */ + textParagraph: SEMANTIC_COLORS.shade20, + textHeading: SEMANTIC_COLORS.shade15, + textSubdued: SEMANTIC_COLORS.shade40, + textDisabled: SEMANTIC_COLORS.shade60, + textInverse: SEMANTIC_COLORS.plainDark, +}; + +export const dark_shades: _EuiThemeShadeColors = { + emptyShade: SEMANTIC_COLORS.shade145, + lightestShade: SEMANTIC_COLORS.shade135, + lightShade: SEMANTIC_COLORS.shade125, + mediumShade: SEMANTIC_COLORS.shade95, + darkShade: SEMANTIC_COLORS.shade75, + darkestShade: SEMANTIC_COLORS.shade30, + fullShade: SEMANTIC_COLORS.plainLight, +}; + +export const dark_background_colors: _EuiThemeBackgroundColors = { + backgroundBasePrimary: SEMANTIC_COLORS.primary140, + backgroundBaseAccent: SEMANTIC_COLORS.accent140, + backgroundBaseAccentSecondary: SEMANTIC_COLORS.accentSecondary140, + backgroundBaseSuccess: SEMANTIC_COLORS.success140, + backgroundBaseWarning: SEMANTIC_COLORS.warning140, + backgroundBaseDanger: SEMANTIC_COLORS.danger140, + backgroundBaseSubdued: SEMANTIC_COLORS.plainDark, + backgroundBasePlain: SEMANTIC_COLORS.shade145, + backgroundBaseDisabled: SEMANTIC_COLORS.shade130, + + backgroundBaseFormsPrepend: SEMANTIC_COLORS.shade125, + backgroundBaseFormsControlDisabled: SEMANTIC_COLORS.shade120, + + backgroundBaseInteractiveHover: PRIMITIVE_COLORS.transparent.white10, + backgroundBaseInteractiveSelect: SEMANTIC_COLORS.shade130, + backgroundBaseInteractiveOverlay: SEMANTIC_COLORS.shadeTransparent80, + + backgroundBaseSkeletonEdge: PRIMITIVE_COLORS.transparent.white10, + backgroundBaseSkeletonMiddle: PRIMITIVE_COLORS.transparent.white30, + + backgroundLightPrimary: SEMANTIC_COLORS.primary130, + backgroundLightAccent: SEMANTIC_COLORS.accent130, + backgroundLightAccentSecondary: SEMANTIC_COLORS.accentSecondary130, + backgroundLightSuccess: SEMANTIC_COLORS.success130, + backgroundLightWarning: SEMANTIC_COLORS.warning130, + backgroundLightDanger: SEMANTIC_COLORS.danger130, + backgroundLightText: SEMANTIC_COLORS.shade130, + + backgroundFilledPrimary: SEMANTIC_COLORS.primary60, + backgroundFilledAccent: SEMANTIC_COLORS.accent60, + backgroundFilledAccentSecondary: SEMANTIC_COLORS.accentSecondary60, + backgroundFilledSuccess: SEMANTIC_COLORS.success60, + backgroundFilledWarning: SEMANTIC_COLORS.warning40, + backgroundFilledDanger: SEMANTIC_COLORS.danger60, + backgroundFilledText: SEMANTIC_COLORS.shade60, +}; + +/** + * NOTE: temp values for migration - these should not be used, + * use backgroundBase tokens instead + * TODO: remove once obsolete + */ +export const dark_transparent_background_colors: _EuiThemeTransparentBackgroundColors = + { + backgroundTransparent: PRIMITIVE_COLORS.transparent.white0, + backgroundTransparentPrimary: dark_background_colors.backgroundBasePrimary, + backgroundTransparentAccent: dark_background_colors.backgroundBaseAccent, + backgroundTransparentAccentSecondary: + dark_background_colors.backgroundBaseAccent, + backgroundTransparentSuccess: dark_background_colors.backgroundBaseSuccess, + backgroundTransparentWarning: dark_background_colors.backgroundBaseWarning, + backgroundTransparentDanger: dark_background_colors.backgroundBaseDanger, + backgroundTransparentSubdued: dark_background_colors.backgroundBaseSubdued, + backgroundTransparentPlain: dark_background_colors.backgroundBasePlain, + }; + +export const dark_border_colors: _EuiThemeBorderColors = { + borderBasePrimary: SEMANTIC_COLORS.primary120, + borderBaseAccent: SEMANTIC_COLORS.accent120, + borderBaseAccentSecondary: SEMANTIC_COLORS.accentSecondary120, + borderBaseSuccess: SEMANTIC_COLORS.success120, + borderBaseWarning: SEMANTIC_COLORS.warning120, + borderBaseDanger: SEMANTIC_COLORS.danger120, + + borderBasePlain: SEMANTIC_COLORS.shade110, + borderBaseSubdued: SEMANTIC_COLORS.shade120, + borderBaseDisabled: SEMANTIC_COLORS.shade120, + borderBaseFloating: SEMANTIC_COLORS.shade120, + + borderBaseFormsColorSwatch: PRIMITIVE_COLORS.transparent.white30, + borderBaseFormsControl: SEMANTIC_COLORS.shade80, + + borderStrongPrimary: SEMANTIC_COLORS.primary60, + borderStrongAccent: SEMANTIC_COLORS.accent60, + borderStrongAccentSecondary: SEMANTIC_COLORS.accentSecondary60, + borderStrongSuccess: SEMANTIC_COLORS.success60, + borderStrongWarning: SEMANTIC_COLORS.warning40, + borderStrongDanger: SEMANTIC_COLORS.danger60, +}; + +export const dark_special_colors: _EuiThemeSpecialColors = { + body: SEMANTIC_COLORS.plainDark, + highlight: SEMANTIC_COLORS.primary100, + disabled: SEMANTIC_COLORS.shade70, + disabledText: SEMANTIC_COLORS.shade120, + shadow: PRIMITIVE_COLORS.black, +}; + +export const dark_colors: _EuiThemeColorsMode = { + ...SEMANTIC_COLORS, + ...dark_brand_colors, + ...dark_shades, + ...dark_special_colors, + ...dark_brand_text_colors, + ...dark_text_colors, + ...dark_background_colors, + ...dark_transparent_background_colors, + ...dark_border_colors, +}; diff --git a/packages/eui-theme-borealis/src/variables/colors/_colors_light.scss b/packages/eui-theme-borealis/src/variables/colors/_colors_light.scss new file mode 100644 index 00000000000..98cf6ca2a46 --- /dev/null +++ b/packages/eui-theme-borealis/src/variables/colors/_colors_light.scss @@ -0,0 +1,123 @@ +// stylelint-disable color-no-hex + +// This extra import allows any variables that are created via functions to work when loaded into JS +@import 'node_modules/@elastic/eui-theme-common/src/global_styling/functions/index'; + +@import 'semantic_colors'; + +// These colors stay the same no matter the theme +// @deprecated +$euiColorGhost: $euiColorWhite !default; +$euiColorInk: $euiColorBlack !default; + +// Brand +$euiColorPrimary: $euiColorPrimary90 !default; +$euiColorAccent: $euiColorAccent90 !default; +$euiColorAccentSecondary: $euiColorAccentSecondary90 !default; +$euiColorSuccess: $euiColorSuccess90 !default; +$euiColorWarning: $euiColorWarning40 !default; +$euiColorDanger: $euiColorDanger90 !default; + +// Shades +$euiColorEmptyShade: $euiColorPlainLight !default; +$euiColorLightestShade: $euiColorShade20 !default; +$euiColorLightShade: $euiColorShade30 !default; +$euiColorMediumShade: $euiColorShade60 !default; +$euiColorDarkShade: $euiColorShade90 !default; +$euiColorDarkestShade: $euiColorShade120 !default; +$euiColorFullShade: $euiColorPlainLight !default; + +// Backgrounds +$euiPageBackgroundColor: $euiColorShade10 !default; // deprecated +$euiColorHighlight: $euiColorPrimary10 !default; + +$euiColorBackgroundBasePrimary: $euiColorPrimary10 !default; +$euiColorBackgroundBaseAccent: $euiColorAccent10 !default; +$euiColorBackgroundBaseAccentSecondary: $euiColorAccentSecondary10 !default; +$euiColorBackgroundBaseSuccess: $euiColorSuccess10 !default; +$euiColorBackgroundBaseWarning: $euiColorWarning10 !default; +$euiColorBackgroundBaseDanger: $euiColorDanger10 !default; +$euiColorBackgroundBaseSubdued: $euiColorShade10 !default; +$euiColorBackgroundBasePlain: $euiColorPlainLight !default; +$euiColorBackgroundBaseDisabled: $euiColorShade15 !default; +$euiColorBackgroundBaseFormsPrepend: $euiColorShade15 !default; +$euiColorBackgroundBaseFormsControlDisabled: $euiColorShade30 !default; + +$euiColorBackgroundBaseInteractiveHover: $euiColorShadeTransparent10 !default; +$euiColorBackgroundBaseInteractiveSelect: $euiColorShade15 !default; +$euiColorBackgroundBaseInteractiveOverlay: $euiColorShadeTransparent80 !default; +$euiColorBackgroundBaseSkeletonEdge: $euiColorShadeTransparent30 !default; +$euiColorBackgroundBaseSkeletonMiddle: $euiColorShadeTransparent10 !default; + +$euiColorBackgroundLightPrimary: $euiColorPrimary20 !default; +$euiColorBackgroundLightAccent: $euiColorAccent20 !default; +$euiColorBackgroundLightAccentSecondary: $euiColorAccentSecondary20 !default; +$euiColorBackgroundLightSuccess: $euiColorSuccess20 !default; +$euiColorBackgroundLightWarning: $euiColorWarning20 !default; +$euiColorBackgroundLightDanger: $euiColorDanger20 !default; +$euiColorBackgroundLightText: $euiColorShade20 !default; + +$euiColorBackgroundFilledPrimary: $euiColorPrimary90 !default; +$euiColorBackgroundFilledAccent: $euiColorAccent90 !default; +$euiColorBackgroundFilledAccentSecondary: $euiColorAccentSecondary90 !default; +$euiColorBackgroundFilledSuccess: $euiColorSuccess90 !default; +$euiColorBackgroundFilledWarning: $euiColorWarning90 !default; +$euiColorBackgroundFilledDanger: $euiColorDanger90 !default; +$euiColorBackgroundFilledText: $euiColorShade90 !default; + +// Texts (legacy) +$euiTextColor: $euiColorShade135 !default; +$euiTitleColor: $euiColorShade140 !default; +$euiTextSubduedColor: $euiColorShade90 !default; +$euiColorDisabled: $euiColorBackgroundBaseDisabled !default; +$euiColorDisabledText: $euiColorShade70 !default; +$euiLinkColor: $euiColorPrimary100 !default; + +// Texts +$euiColorTextParagraph: $euiColorShade135 !default; +$euiColorTextHeading: $euiColorShade140 !default; +$euiColorTextSubdued: $euiColorShade90 !default; +$euiColorTextDisabled: $euiColorShade70 !default; +$euiColorTextInverse: $euiColorPlainLight !default; + +// Brand texts (legacy) +$euiColorPrimaryText: $euiColorPrimary100 !default; +$euiColorAccentText: $euiColorAccent100 !default; +$euiColorSuccessText: $euiColorSuccess100 !default; +$euiColorWarningText: $euiColorWarning110 !default; +$euiColorDangerText: $euiColorDanger100 !default; + +// Brand texts +$euiColorTextPrimary: $euiColorPrimary100 !default; +$euiColorTextAccent: $euiColorAccent100 !default; +$euiColorTextAccentSecondary: $euiColorAccentSecondary100 !default; +$euiColorTextSuccess: $euiColorSuccess100 !default; +$euiColorTextWarning: $euiColorWarning110 !default; +$euiColorTextDanger: $euiColorDanger100 !default; + +// Borders +$euiColorBorderBasePrimary: $euiColorPrimary30; +$euiColorBorderBaseAccent: $euiColorAccent30; +$euiColorBorderBaseAccentSecondary: $euiColorAccentSecondary30; +$euiColorBorderBaseSuccess: $euiColorSuccess30; +$euiColorBorderBaseWarning: $euiColorWarning30; +$euiColorBorderBaseDanger: $euiColorDanger30; + +$euiColorBorderBasePlain: $euiColorShade30; +$euiColorBorderBaseSubdued: $euiColorShade20; +$euiColorBorderBaseDisabled: $euiColorShade30; +$euiColorBorderBaseFloating: $euiColorTransparentWhite0; + +$euiColorBorderBaseFormsColorSwatch: $euiColorShadeTransparent30; +$euiColorBorderBaseFormsControl: $euiColorShade60; + +$euiColorBorderStrongPrimary: $euiColorPrimary100; +$euiColorBorderStrongAccent: $euiColorAccent100; +$euiColorBorderStrongAccentSecondary: $euiColorAccentSecondary100; +$euiColorBorderStrongSuccess: $euiColorSuccess100; +$euiColorBorderStrongWarning: $euiColorWarning100; +$euiColorBorderStrongDanger: $euiColorDanger100; + +// Charts +$euiColorChartLines: $euiColorShade30 !default; +$euiColorChartBand: $euiColorShade10 !default; diff --git a/packages/eui-theme-borealis/src/variables/colors/_colors_light.ts b/packages/eui-theme-borealis/src/variables/colors/_colors_light.ts new file mode 100644 index 00000000000..e4e62be7b97 --- /dev/null +++ b/packages/eui-theme-borealis/src/variables/colors/_colors_light.ts @@ -0,0 +1,178 @@ +/* + * 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 { + type _EuiThemeBrandColors, + type _EuiThemeBrandTextColors, + type _EuiThemeShadeColors, + type _EuiThemeSpecialColors, + type _EuiThemeTextColors, + type _EuiThemeColorsMode, + _EuiThemeBackgroundColors, + _EuiThemeBorderColors, + _EuiThemeTransparentBackgroundColors, +} from '@elastic/eui-theme-common'; + +import { PRIMITIVE_COLORS } from './_primitive_colors'; +import { SEMANTIC_COLORS } from './_semantic_colors'; + +/* + * LIGHT THEME + */ + +export const brand_colors: _EuiThemeBrandColors = { + primary: SEMANTIC_COLORS.primary90, + accent: SEMANTIC_COLORS.accent90, + accentSecondary: SEMANTIC_COLORS.accentSecondary90, + success: SEMANTIC_COLORS.success90, + warning: SEMANTIC_COLORS.warning40, + danger: SEMANTIC_COLORS.danger90, +}; + +export const brand_text_colors: _EuiThemeBrandTextColors = { + /* Legacy colors */ + primaryText: SEMANTIC_COLORS.primary100, + accentText: SEMANTIC_COLORS.accent100, + successText: SEMANTIC_COLORS.success100, + warningText: SEMANTIC_COLORS.warning110, + dangerText: SEMANTIC_COLORS.danger100, + + /* New colors */ + textPrimary: SEMANTIC_COLORS.primary100, + textAccent: SEMANTIC_COLORS.accent100, + textAccentSecondary: SEMANTIC_COLORS.accentSecondary100, + textSuccess: SEMANTIC_COLORS.success100, + textWarning: SEMANTIC_COLORS.warning110, + textDanger: SEMANTIC_COLORS.danger100, +}; + +export const text_colors: _EuiThemeTextColors = { + /* Legacy colors */ + text: SEMANTIC_COLORS.shade135, + title: SEMANTIC_COLORS.shade140, + subduedText: SEMANTIC_COLORS.shade90, + link: SEMANTIC_COLORS.primary100, + + /* New colors */ + textParagraph: SEMANTIC_COLORS.shade135, + textHeading: SEMANTIC_COLORS.shade140, + textSubdued: SEMANTIC_COLORS.shade90, + textDisabled: SEMANTIC_COLORS.shade70, + textInverse: SEMANTIC_COLORS.plainLight, +}; + +export const shade_colors: _EuiThemeShadeColors = { + emptyShade: SEMANTIC_COLORS.plainLight, + lightestShade: SEMANTIC_COLORS.shade20, + lightShade: SEMANTIC_COLORS.shade30, + mediumShade: SEMANTIC_COLORS.shade60, + darkShade: SEMANTIC_COLORS.shade90, + darkestShade: SEMANTIC_COLORS.shade120, + fullShade: SEMANTIC_COLORS.plainDark, +}; + +export const background_colors: _EuiThemeBackgroundColors = { + backgroundBasePrimary: SEMANTIC_COLORS.primary10, + backgroundBaseAccent: SEMANTIC_COLORS.accent10, + backgroundBaseAccentSecondary: SEMANTIC_COLORS.accentSecondary10, + backgroundBaseSuccess: SEMANTIC_COLORS.success10, + backgroundBaseWarning: SEMANTIC_COLORS.warning10, + backgroundBaseDanger: SEMANTIC_COLORS.danger10, + backgroundBaseSubdued: SEMANTIC_COLORS.shade10, + backgroundBasePlain: SEMANTIC_COLORS.plainLight, + backgroundBaseDisabled: SEMANTIC_COLORS.shade15, + + backgroundBaseFormsPrepend: SEMANTIC_COLORS.shade15, + backgroundBaseFormsControlDisabled: SEMANTIC_COLORS.shade30, + + backgroundBaseInteractiveHover: SEMANTIC_COLORS.shadeTransparent10, + backgroundBaseInteractiveSelect: SEMANTIC_COLORS.shade15, + backgroundBaseInteractiveOverlay: SEMANTIC_COLORS.shadeTransparent80, + + backgroundBaseSkeletonEdge: SEMANTIC_COLORS.shadeTransparent30, + backgroundBaseSkeletonMiddle: SEMANTIC_COLORS.shadeTransparent10, + + backgroundLightPrimary: SEMANTIC_COLORS.primary20, + backgroundLightAccent: SEMANTIC_COLORS.accent20, + backgroundLightAccentSecondary: SEMANTIC_COLORS.accentSecondary20, + backgroundLightSuccess: SEMANTIC_COLORS.success20, + backgroundLightWarning: SEMANTIC_COLORS.warning20, + backgroundLightDanger: SEMANTIC_COLORS.danger20, + backgroundLightText: SEMANTIC_COLORS.shade20, + + backgroundFilledPrimary: SEMANTIC_COLORS.primary90, + backgroundFilledAccent: SEMANTIC_COLORS.accent90, + backgroundFilledAccentSecondary: SEMANTIC_COLORS.accentSecondary90, + backgroundFilledSuccess: SEMANTIC_COLORS.success90, + backgroundFilledWarning: SEMANTIC_COLORS.warning40, + backgroundFilledDanger: SEMANTIC_COLORS.danger90, + backgroundFilledText: SEMANTIC_COLORS.shade90, +}; + +/** + * NOTE: temp values for migration - these should not be used, + * use backgroundBase tokens instead + * TODO: remove once obsolete + */ +export const transparent_background_colors: _EuiThemeTransparentBackgroundColors = + { + backgroundTransparent: PRIMITIVE_COLORS.transparent.white0, + backgroundTransparentPrimary: background_colors.backgroundBasePrimary, + backgroundTransparentAccent: background_colors.backgroundBaseAccent, + backgroundTransparentAccentSecondary: + background_colors.backgroundBaseAccentSecondary, + backgroundTransparentSuccess: background_colors.backgroundBaseSuccess, + backgroundTransparentWarning: background_colors.backgroundBaseWarning, + backgroundTransparentDanger: background_colors.backgroundBaseDanger, + backgroundTransparentSubdued: SEMANTIC_COLORS.shade15, + backgroundTransparentPlain: SEMANTIC_COLORS.shade15, + }; + +export const border_colors: _EuiThemeBorderColors = { + borderBasePrimary: SEMANTIC_COLORS.primary30, + borderBaseAccent: SEMANTIC_COLORS.accent30, + borderBaseAccentSecondary: SEMANTIC_COLORS.accentSecondary30, + borderBaseSuccess: SEMANTIC_COLORS.success30, + borderBaseWarning: SEMANTIC_COLORS.warning30, + borderBaseDanger: SEMANTIC_COLORS.danger30, + + borderBasePlain: SEMANTIC_COLORS.shade30, + borderBaseSubdued: SEMANTIC_COLORS.shade20, + borderBaseDisabled: SEMANTIC_COLORS.shade30, + borderBaseFloating: PRIMITIVE_COLORS.transparent.white0, + + borderBaseFormsColorSwatch: SEMANTIC_COLORS.shadeTransparent30, + borderBaseFormsControl: SEMANTIC_COLORS.shade60, + + borderStrongPrimary: SEMANTIC_COLORS.primary100, + borderStrongAccent: SEMANTIC_COLORS.accent100, + borderStrongAccentSecondary: SEMANTIC_COLORS.accentSecondary100, + borderStrongSuccess: SEMANTIC_COLORS.success100, + borderStrongWarning: SEMANTIC_COLORS.warning100, + borderStrongDanger: SEMANTIC_COLORS.danger100, +}; + +export const special_colors: _EuiThemeSpecialColors = { + body: SEMANTIC_COLORS.shade10, + highlight: SEMANTIC_COLORS.primary10, + disabled: SEMANTIC_COLORS.shade20, + disabledText: SEMANTIC_COLORS.shade80, + shadow: PRIMITIVE_COLORS.black, +}; + +export const light_colors: _EuiThemeColorsMode = { + ...SEMANTIC_COLORS, + ...brand_colors, + ...shade_colors, + ...special_colors, + ...brand_text_colors, + ...text_colors, + ...background_colors, + ...transparent_background_colors, + ...border_colors, +}; diff --git a/packages/eui-theme-borealis/src/variables/colors/_primitive_colors.ts b/packages/eui-theme-borealis/src/variables/colors/_primitive_colors.ts new file mode 100644 index 00000000000..2693e39a52f --- /dev/null +++ b/packages/eui-theme-borealis/src/variables/colors/_primitive_colors.ts @@ -0,0 +1,224 @@ +/* + * 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. + */ + +export const PRIMITIVE_COLORS = { + white: '#FFFFFF', + black: '#000000', + mutedBlack: '#0E0F12', + blueBlack: '#07101F', + transparent: { + white0: 'transparent', + white10: 'rgba(255, 255, 255, 0.06)', + white20: 'rgba(255, 255, 255, 0.10)', + white30: 'rgba(255, 255, 255, 0.16)', + white40: 'rgba(255, 255, 255, 0.22)', + white50: 'rgba(255, 255, 255, 0.28)', + white60: 'rgba(255, 255, 255, 0.34)', + white70: 'rgba(255, 255, 255, 0.42)', + white80: 'rgba(255, 255, 255, 0.50)', + white90: 'rgba(255, 255, 255, 0.58)', + white100: 'rgba(255, 255, 255, 0.66)', + white110: 'rgba(255, 255, 255, 0.74)', + white120: 'rgba(255, 255, 255, 0.8)', + white130: 'rgba(255, 255, 255, 0.84)', + white140: 'rgba(255, 255, 255, 0.88)', + + mutedGrey10: 'rgba(54, 95, 178, 0.06)', + mutedGrey20: 'rgba(50, 88, 163, 0.10)', + mutedGrey30: 'rgba(44, 75, 138, 0.15)', + mutedGrey40: 'rgba(37, 60, 111, 0.19)', + mutedGrey50: 'rgba(31, 48, 84, 0.24)', + mutedGrey60: 'rgba(24, 35, 58, 0.32)', + mutedGrey70: 'rgba(18, 22, 32, 0.40)', + mutedGrey80: 'rgba(14, 15, 18, 0.50)', + mutedGrey90: 'rgba(14, 15, 18, 0.60)', + mutedGrey100: 'rgba(14, 15, 18, 0.68)', + mutedGrey110: 'rgba(14, 15, 18, 0.76)', + mutedGrey120: 'rgba(14, 15, 18, 0.84)', + mutedGrey130: 'rgba(14, 15, 18, 0.88)', + mutedGrey140: 'rgba(14, 15, 18, 0.92)', + + blueGrey10: 'rgba(54, 95, 178, 0.06)', + blueGrey20: 'rgba(54, 95, 178, 0.10)', + blueGrey30: 'rgba(54, 95, 178, 0.16)', + blueGrey40: 'rgba(54, 95, 178, 0.22)', + blueGrey50: 'rgba(47, 84, 158, 0.28)', + blueGrey60: 'rgba(35, 65, 123, 0.36)', + blueGrey70: 'rgba(24, 45, 88, 0.44)', + blueGrey80: 'rgba(11, 25, 51, 0.52)', + blueGrey90: 'rgba(5, 15, 33, 0.60)', + blueGrey100: 'rgba(5, 15, 33, 0.68)', + blueGrey110: 'rgba(5, 15, 33, 0.76)', + blueGrey120: 'rgba(5, 15, 33, 0.84)', + blueGrey130: 'rgba(5, 15, 33, 0.88)', + blueGrey140: 'rgba(5, 15, 33, 0.92)', + }, + + mutedGrey10: '#F6F9FC', + mutedGrey15: '#EDEFF3', + mutedGrey20: '#E3E6EB', + mutedGrey25: '#D9DDE3', + mutedGrey30: '#D0D4DA', + mutedGrey35: '#C6CBD2', + mutedGrey40: '#BDC2CA', + mutedGrey45: '#B3B9C2', + mutedGrey50: '#AAB0BA', + mutedGrey55: '#A1A8B2', + mutedGrey60: '#989FAA', + mutedGrey65: '#8F96A2', + mutedGrey70: '#868E9A', + mutedGrey75: '#7E8691', + mutedGrey80: '#767D89', + mutedGrey85: '#6E7581', + mutedGrey90: '#666D78', + mutedGrey95: '#5D6570', + mutedGrey100: '#555C67', + mutedGrey105: '#4D545E', + mutedGrey110: '#464C56', + mutedGrey115: '#3F444D', + mutedGrey120: '#373D45', + mutedGrey125: '#30353C', + mutedGrey130: '#292E34', + mutedGrey135: '#23262C', + mutedGrey140: '#1C1F24', + mutedGrey145: '#16181D', + + blueGrey10: '#F6F9FC', + blueGrey15: '#ECF1F9', + blueGrey20: '#E3E8F2', + blueGrey25: '#D6DDEA', + blueGrey30: '#CAD3E2', + blueGrey35: '#C0CCDD', + blueGrey40: '#B4C1D5', + blueGrey45: '#ABB9D0', + blueGrey50: '#A2B1C9', + blueGrey55: '#98A8C3', + blueGrey60: '#8E9FBC', + blueGrey65: '#8497B7', + blueGrey70: '#798EAF', + blueGrey75: '#7186A8', + blueGrey80: '#6A7FA0', + blueGrey85: '#627593', + blueGrey90: '#5A6D8C', + blueGrey95: '#516381', + blueGrey100: '#485975', + blueGrey105: '#3F4F69', + blueGrey110: '#384861', + blueGrey115: '#324058', + blueGrey120: '#2B394F', + blueGrey125: '#243147', + blueGrey130: '#1D2A3E', + blueGrey135: '#172336', + blueGrey140: '#111C2C', + blueGrey145: '#0B1628', + + blue10: '#E5F3FF', + blue20: '#D6E9FF', + blue30: '#B4D5FF', + blue40: '#96C3FF', + blue50: '#78B0FF', + blue60: '#599DFF', + blue70: '#3788FF', + blue80: '#2476F0', + blue90: '#0B64DD', + blue100: '#1750BA', + blue110: '#154399', + blue120: '#123778', + blue130: '#0D2F5E', + blue140: '#0A2342', + + teal10: '#E2F9F7', + teal20: '#C9F3F0', + teal30: '#98E6E2', + teal40: '#5DD8D2', + teal50: '#2ECCC7', + teal60: '#00BEB8', + teal70: '#00B0AA', + teal80: '#009E99', + teal90: '#008B87', + teal100: '#047471', + teal110: '#065B58', + teal120: '#044949', + teal130: '#023436', + teal140: '#03282B', + + pink10: '#FFEBF5', + pink20: '#FDDDE9', + pink30: '#FFBED5', + pink40: '#FBA3C4', + pink50: '#F588B3', + pink60: '#ED6BA2', + pink70: '#E54A91', + pink80: '#D13680', + pink90: '#BC1E70', + pink100: '#A11262', + pink110: '#831652', + pink120: '#5E2140', + pink130: '#481E32', + pink140: '#351725', + + green10: '#E2F8F0', + green20: '#C9F3E3', + green30: '#9DEDCE', + green40: '#6EDEB7', + green50: '#3ACFA0', + green60: '#23BE8F', + green70: '#04AE7E', + green80: '#00996B', + green90: '#008A5E', + green100: '#09724D', + green110: '#0C5A3F', + green120: '#094837', + green130: '#0D362B', + green140: '#092A26', + + yellow10: '#FDF3D8', + yellow20: '#FDE9B5', + yellow30: '#FCD279', + yellow40: '#FACB3D', + yellow50: '#F5BC00', + yellow60: '#E6AB01', + yellow70: '#CA9601', + yellow80: '#AD7E00', + yellow90: '#966B03', + yellow100: '#825803', + yellow110: '#6A4906', + yellow120: '#513910', + yellow130: '#3D3014', + yellow140: '#2C2721', + + red10: '#FFE8E5', + red20: '#FDDDD8', + red30: '#FFC0B8', + red40: '#FFA59C', + red50: '#FC8A80', + red60: '#F66D64', + red70: '#EE4C48', + red80: '#DA3737', + red90: '#C61E25', + red100: '#A71627', + red110: '#7F1F27', + red120: '#5E2129', + red130: '#491D27', + red140: '#351721', + + purple10: '#F3ECFE', + purple20: '#ECE2FE', + purple30: '#DECDFE', + purple40: '#CEB6FC', + purple50: '#BF9CF9', + purple60: '#B084F5', + purple70: '#A36DEF', + purple80: '#925CDA', + purple90: '#8144CC', + purple100: '#6B3C9F', + purple110: '#52357E', + purple120: '#3E2C63', + purple130: '#322452', + purple140: '#2A1E3E', +}; diff --git a/packages/eui-theme-borealis/src/variables/colors/_semantic_colors.scss b/packages/eui-theme-borealis/src/variables/colors/_semantic_colors.scss new file mode 100644 index 00000000000..5852aebb6f3 --- /dev/null +++ b/packages/eui-theme-borealis/src/variables/colors/_semantic_colors.scss @@ -0,0 +1,211 @@ +/** + * contains primitive & semantic colors + * Temp. manually created file + * TODO: automatically generate scss variable files + */ + + +$euiColorWhite: #FFF !default; +$euiColorBlack: #000 !default; +$euiColorMutedBlack: #0E0F12 !default; +$euiColorBlueBlack: #050F21 !default; + +$euiColorTransparentWhite0: 'transparent' !default; +$euiColorTransparentWhite10: rgba(255, 255, 255, 0.06) !default; +$euiColorTransparentWhite20: rgba(255, 255, 255, 0.10) !default; +$euiColorTransparentWhite30: rgba(255, 255, 255, 0.16) !default; +$euiColorTransparentWhite40: rgba(255, 255, 255, 0.22) !default; +$euiColorTransparentWhite50: rgba(255, 255, 255, 0.28) !default; +$euiColorTransparentWhite60: rgba(255, 255, 255, 0.34) !default; +$euiColorTransparentWhite70: rgba(255, 255, 255, 0.42) !default; +$euiColorTransparentWhite80: rgba(255, 255, 255, 0.50) !default; +$euiColorTransparentWhite90: rgba(255, 255, 255, 0.58) !default; +$euiColorTransparentWhite100: rgba(255, 255, 255, 0.66) !default; +$euiColorTransparentWhite110: rgba(255, 255, 255, 0.74) !default; +$euiColorTransparentWhite120: rgba(255, 255, 255, 0.8) !default; +$euiColorTransparentWhite130: rgba(255, 255, 255, 0.84) !default; +$euiColorTransparentWhite140: rgba(255, 255, 255, 0.88) !default; + +$euiColorTransparentMutedGrey10: rgba(54, 95, 178, 0.06) !default; +$euiColorTransparentMutedGrey20: rgba(50, 88, 163, 0.10) !default; +$euiColorTransparentMutedGrey30: rgba(44, 75, 138, 0.15) !default; +$euiColorTransparentMutedGrey40: rgba(37, 60, 111, 0.19) !default; +$euiColorTransparentMutedGrey50: rgba(31, 48, 84, 0.24) !default; +$euiColorTransparentMutedGrey60: rgba(24, 35, 58, 0.32) !default; +$euiColorTransparentMutedGrey70: rgba(18, 22, 32, 0.40) !default; +$euiColorTransparentMutedGrey80: rgba(14, 15, 18, 0.50) !default; +$euiColorTransparentMutedGrey90: rgba(14, 15, 18, 0.60) !default; +$euiColorTransparentMutedGrey100: rgba(14, 15, 18, 0.68) !default; +$euiColorTransparentMutedGrey110: rgba(14, 15, 18, 0.76) !default; +$euiColorTransparentMutedGrey120: rgba(14, 15, 18, 0.84) !default; +$euiColorTransparentMutedGrey130: rgba(14, 15, 18, 0.88) !default; +$euiColorTransparentMutedGrey140: rgba(14, 15, 18, 0.92) !default; + +$euiColorTransparentBlueGrey10: rgba(54, 95, 178, 0.06) !default; +$euiColorTransparentBlueGrey20: rgba(54, 95, 178, 0.10) !default; +$euiColorTransparentBlueGrey30: rgba(54, 95, 178, 0.16) !default; +$euiColorTransparentBlueGrey40: rgba(54, 95, 178, 0.22) !default; +$euiColorTransparentBlueGrey50: rgba(47, 84, 158, 0.28) !default; +$euiColorTransparentBlueGrey60: rgba(35, 65, 123, 0.36) !default; +$euiColorTransparentBlueGrey70: rgba(24, 45, 88, 0.44) !default; +$euiColorTransparentBlueGrey80: rgba(11, 25, 51, 0.52) !default; +$euiColorTransparentBlueGrey90: rgba(5, 15, 33, 0.60) !default; +$euiColorTransparentBlueGrey100: rgba(5, 15, 33, 0.68) !default; +$euiColorTransparentBlueGrey110: rgba(5, 15, 33, 0.76) !default; +$euiColorTransparentBlueGrey120: rgba(5, 15, 33, 0.84) !default; +$euiColorTransparentBlueGrey130: rgba(5, 15, 33, 0.88) !default; +$euiColorTransparentBlueGrey140: rgba(5, 15, 33, 0.92) !default; + +$euiColorPlainLight: $euiColorWhite !default; +$euiColorPlainDark: $euiColorBlueBlack !default; + +$euiColorPrimary10: #E5F3FF !default; +$euiColorPrimary20: #D6E9FF !default; +$euiColorPrimary30: #B4D5FF !default; +$euiColorPrimary40: #96C3FF !default; +$euiColorPrimary50: #78B0FF !default; +$euiColorPrimary60: #599DFF !default; +$euiColorPrimary70: #3788FF !default; +$euiColorPrimary80: #2476F0 !default; +$euiColorPrimary90: #0B64DD !default; +$euiColorPrimary100: #1750BA !default; +$euiColorPrimary110: #154399 !default; +$euiColorPrimary120: #123778 !default; +$euiColorPrimary130: #0D2F5E !default; +$euiColorPrimary140: #0A2342 !default; + +$euiColorAccent10: #FFEBF5 !default; +$euiColorAccent20: #FDDDE9 !default; +$euiColorAccent30: #FFBED5 !default; +$euiColorAccent40: #FBA3C4 !default; +$euiColorAccent50: #F588B3 !default; +$euiColorAccent60: #ED6BA2 !default; +$euiColorAccent70: #E54A91 !default; +$euiColorAccent80: #D13680 !default; +$euiColorAccent90: #BC1E70 !default; +$euiColorAccent100: #A11262 !default; +$euiColorAccent110: #831652 !default; +$euiColorAccent120: #5E2140 !default; +$euiColorAccent130: #481E32 !default; +$euiColorAccent140: #351725 !default; + +$euiColorAccentSecondary10: #E2F9F7 !default; +$euiColorAccentSecondary20: #C9F3F0 !default; +$euiColorAccentSecondary30: #98E6E2 !default; +$euiColorAccentSecondary40: #5DD8D2 !default; +$euiColorAccentSecondary50: #2ECCC7 !default; +$euiColorAccentSecondary60: #00BEB8 !default; +$euiColorAccentSecondary70: #00B0AA !default; +$euiColorAccentSecondary80: #009E99 !default; +$euiColorAccentSecondary90: #008B87 !default; +$euiColorAccentSecondary100: #047471 !default; +$euiColorAccentSecondary110: #065B58 !default; +$euiColorAccentSecondary120: #044949 !default; +$euiColorAccentSecondary130: #023436 !default; +$euiColorAccentSecondary140: #03282B !default; + +$euiColorSuccess10: #E2F8F0 !default; +$euiColorSuccess20: #C9F3E3 !default; +$euiColorSuccess30: #9DEDCE !default; +$euiColorSuccess40: #6EDEB7 !default; +$euiColorSuccess50: #3ACFA0 !default; +$euiColorSuccess60: #23BE8F !default; +$euiColorSuccess70: #04AE7E !default; +$euiColorSuccess80: #00996B !default; +$euiColorSuccess90: #008A5E !default; +$euiColorSuccess100: #09724D !default; +$euiColorSuccess110: #0C5A3F !default; +$euiColorSuccess120: #094837 !default; +$euiColorSuccess130: #0D362B !default; +$euiColorSuccess140: #092A26 !default; + +$euiColorWarning10: #FDF3D8 !default; +$euiColorWarning20: #FDE9B5 !default; +$euiColorWarning30: #FCD279 !default; +$euiColorWarning40: #FACB3D !default; +$euiColorWarning50: #F5BC00 !default; +$euiColorWarning60: #E6AB01 !default; +$euiColorWarning70: #CA9601 !default; +$euiColorWarning80: #AD7E00 !default; +$euiColorWarning90: #966B03 !default; +$euiColorWarning100: #825803 !default; +$euiColorWarning110: #6A4906 !default; +$euiColorWarning120: #513910 !default; +$euiColorWarning130: #3D3014 !default; +$euiColorWarning140: #2C2721 !default; + +$euiColorDanger10: #FFE8E5 !default; +$euiColorDanger20: #FDDDD8 !default; +$euiColorDanger30: #FFC0B8 !default; +$euiColorDanger40: #FFA59C !default; +$euiColorDanger50: #FC8A80 !default; +$euiColorDanger60: #F66D64 !default; +$euiColorDanger70: #EE4C48 !default; +$euiColorDanger80: #DA3737 !default; +$euiColorDanger90: #C61E25 !default; +$euiColorDanger100: #A71627 !default; +$euiColorDanger110: #7F1F27 !default; +$euiColorDanger120: #5E2129 !default; +$euiColorDanger130: #491D27 !default; +$euiColorDanger140: #351721 !default; + +$euiColorAssistance10: #F3ECFE !default; +$euiColorAssistance20: #ECE2FE !default; +$euiColorAssistance30: #DECDFE !default; +$euiColorAssistance40: #CEB6FC !default; +$euiColorAssistance50: #BF9CF9 !default; +$euiColorAssistance60: #B084F5 !default; +$euiColorAssistance70: #A36DEF !default; +$euiColorAssistance80: #925CDA !default; +$euiColorAssistance90: #8144CC !default; +$euiColorAssistance100: #6B3C9F !default; +$euiColorAssistance110: #52357E !default; +$euiColorAssistance120: #3E2C63 !default; +$euiColorAssistance130: #322452 !default; +$euiColorAssistance140: #2A1E3E !default; + +$euiColorShade10: #F6F9FC !default; +$euiColorShade15: #ECF1F9 !default; +$euiColorShade20: #E3E8F2 !default; +$euiColorShade25: #D6DDEA !default; +$euiColorShade30: #CAD3E2 !default; +$euiColorShade35: #C0CCDD !default; +$euiColorShade40: #B4C1D5 !default; +$euiColorShade45: #ABB9D0 !default; +$euiColorShade50: #A2B1C9 !default; +$euiColorShade55: #98A8C3 !default; +$euiColorShade60: #8E9FBC !default; +$euiColorShade65: #8497B7 !default; +$euiColorShade70: #798EAF !default; +$euiColorShade75: #7186A8 !default; +$euiColorShade80: #6A7FA0 !default; +$euiColorShade85: #627593 !default; +$euiColorShade90: #5A6D8C !default; +$euiColorShade95: #516381 !default; +$euiColorShade100: #485975 !default; +$euiColorShade105: #3F4F69 !default; +$euiColorShade110: #384861 !default; +$euiColorShade115: #324058 !default; +$euiColorShade120: #2B394F !default; +$euiColorShade125: #243147 !default; +$euiColorShade130: #1D2A3E !default; +$euiColorShade135: #172336 !default; +$euiColorShade140: #111C2C !default; +$euiColorShade145: #0B1628 !default; + +$euiColorShadeTransparent10: $euiColorTransparentBlueGrey10 !default; +$euiColorShadeTransparent20: $euiColorTransparentBlueGrey20 !default; +$euiColorShadeTransparent30: $euiColorTransparentBlueGrey30 !default; +$euiColorShadeTransparent40: $euiColorTransparentBlueGrey40 !default; +$euiColorShadeTransparent50: $euiColorTransparentBlueGrey50 !default; +$euiColorShadeTransparent60: $euiColorTransparentBlueGrey60 !default; +$euiColorShadeTransparent70: $euiColorTransparentBlueGrey70 !default; +$euiColorShadeTransparent80: $euiColorTransparentBlueGrey80 !default; +$euiColorShadeTransparent90: $euiColorTransparentBlueGrey90 !default; +$euiColorShadeTransparent100: $euiColorTransparentBlueGrey100 !default; +$euiColorShadeTransparent110: $euiColorTransparentBlueGrey110 !default; +$euiColorShadeTransparent120: $euiColorTransparentBlueGrey120 !default; +$euiColorShadeTransparent130: $euiColorTransparentBlueGrey130 !default; +$euiColorShadeTransparent140: $euiColorTransparentBlueGrey140 !default; + + \ No newline at end of file diff --git a/packages/eui-theme-borealis/src/variables/colors/_semantic_colors.ts b/packages/eui-theme-borealis/src/variables/colors/_semantic_colors.ts new file mode 100644 index 00000000000..c148d592631 --- /dev/null +++ b/packages/eui-theme-borealis/src/variables/colors/_semantic_colors.ts @@ -0,0 +1,163 @@ +/* + * 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 { PRIMITIVE_COLORS } from './_primitive_colors'; + +export const SEMANTIC_COLORS = { + plainLight: PRIMITIVE_COLORS.white, + plainDark: PRIMITIVE_COLORS.blueBlack, + + primary10: PRIMITIVE_COLORS.blue10, + primary20: PRIMITIVE_COLORS.blue20, + primary30: PRIMITIVE_COLORS.blue30, + primary40: PRIMITIVE_COLORS.blue40, + primary50: PRIMITIVE_COLORS.blue50, + primary60: PRIMITIVE_COLORS.blue60, + primary70: PRIMITIVE_COLORS.blue70, + primary80: PRIMITIVE_COLORS.blue80, + primary90: PRIMITIVE_COLORS.blue90, + primary100: PRIMITIVE_COLORS.blue100, + primary110: PRIMITIVE_COLORS.blue110, + primary120: PRIMITIVE_COLORS.blue120, + primary130: PRIMITIVE_COLORS.blue130, + primary140: PRIMITIVE_COLORS.blue140, + + accent10: PRIMITIVE_COLORS.pink10, + accent20: PRIMITIVE_COLORS.pink20, + accent30: PRIMITIVE_COLORS.pink30, + accent40: PRIMITIVE_COLORS.pink40, + accent50: PRIMITIVE_COLORS.pink50, + accent60: PRIMITIVE_COLORS.pink60, + accent70: PRIMITIVE_COLORS.pink70, + accent80: PRIMITIVE_COLORS.pink80, + accent90: PRIMITIVE_COLORS.pink90, + accent100: PRIMITIVE_COLORS.pink100, + accent110: PRIMITIVE_COLORS.pink110, + accent120: PRIMITIVE_COLORS.pink120, + accent130: PRIMITIVE_COLORS.pink130, + accent140: PRIMITIVE_COLORS.pink140, + + accentSecondary10: PRIMITIVE_COLORS.teal10, + accentSecondary20: PRIMITIVE_COLORS.teal20, + accentSecondary30: PRIMITIVE_COLORS.teal30, + accentSecondary40: PRIMITIVE_COLORS.teal40, + accentSecondary50: PRIMITIVE_COLORS.teal50, + accentSecondary60: PRIMITIVE_COLORS.teal60, + accentSecondary70: PRIMITIVE_COLORS.teal70, + accentSecondary80: PRIMITIVE_COLORS.teal80, + accentSecondary90: PRIMITIVE_COLORS.teal90, + accentSecondary100: PRIMITIVE_COLORS.teal100, + accentSecondary110: PRIMITIVE_COLORS.teal110, + accentSecondary120: PRIMITIVE_COLORS.teal120, + accentSecondary130: PRIMITIVE_COLORS.teal130, + accentSecondary140: PRIMITIVE_COLORS.teal140, + + success10: PRIMITIVE_COLORS.green10, + success20: PRIMITIVE_COLORS.green20, + success30: PRIMITIVE_COLORS.green30, + success40: PRIMITIVE_COLORS.green40, + success50: PRIMITIVE_COLORS.green50, + success60: PRIMITIVE_COLORS.green60, + success70: PRIMITIVE_COLORS.green70, + success80: PRIMITIVE_COLORS.green80, + success90: PRIMITIVE_COLORS.green90, + success100: PRIMITIVE_COLORS.green100, + success110: PRIMITIVE_COLORS.green110, + success120: PRIMITIVE_COLORS.green120, + success130: PRIMITIVE_COLORS.green130, + success140: PRIMITIVE_COLORS.green140, + + warning10: PRIMITIVE_COLORS.yellow10, + warning20: PRIMITIVE_COLORS.yellow20, + warning30: PRIMITIVE_COLORS.yellow30, + warning40: PRIMITIVE_COLORS.yellow40, + warning50: PRIMITIVE_COLORS.yellow50, + warning60: PRIMITIVE_COLORS.yellow60, + warning70: PRIMITIVE_COLORS.yellow70, + warning80: PRIMITIVE_COLORS.yellow80, + warning90: PRIMITIVE_COLORS.yellow90, + warning100: PRIMITIVE_COLORS.yellow100, + warning110: PRIMITIVE_COLORS.yellow110, + warning120: PRIMITIVE_COLORS.yellow120, + warning130: PRIMITIVE_COLORS.yellow130, + warning140: PRIMITIVE_COLORS.yellow140, + + danger10: PRIMITIVE_COLORS.red10, + danger20: PRIMITIVE_COLORS.red20, + danger30: PRIMITIVE_COLORS.red30, + danger40: PRIMITIVE_COLORS.red40, + danger50: PRIMITIVE_COLORS.red50, + danger60: PRIMITIVE_COLORS.red60, + danger70: PRIMITIVE_COLORS.red70, + danger80: PRIMITIVE_COLORS.red80, + danger90: PRIMITIVE_COLORS.red90, + danger100: PRIMITIVE_COLORS.red100, + danger110: PRIMITIVE_COLORS.red110, + danger120: PRIMITIVE_COLORS.red120, + danger130: PRIMITIVE_COLORS.red130, + danger140: PRIMITIVE_COLORS.red140, + + assistance10: PRIMITIVE_COLORS.purple10, + assistance20: PRIMITIVE_COLORS.purple20, + assistance30: PRIMITIVE_COLORS.purple30, + assistance40: PRIMITIVE_COLORS.purple40, + assistance50: PRIMITIVE_COLORS.purple50, + assistance60: PRIMITIVE_COLORS.purple60, + assistance70: PRIMITIVE_COLORS.purple70, + assistance80: PRIMITIVE_COLORS.purple80, + assistance90: PRIMITIVE_COLORS.purple90, + assistance100: PRIMITIVE_COLORS.purple100, + assistance110: PRIMITIVE_COLORS.purple110, + assistance120: PRIMITIVE_COLORS.purple120, + assistance130: PRIMITIVE_COLORS.purple130, + assistance140: PRIMITIVE_COLORS.purple140, + + shade10: PRIMITIVE_COLORS.blueGrey10, + shade15: PRIMITIVE_COLORS.blueGrey15, + shade20: PRIMITIVE_COLORS.blueGrey20, + shade25: PRIMITIVE_COLORS.blueGrey25, + shade30: PRIMITIVE_COLORS.blueGrey30, + shade35: PRIMITIVE_COLORS.blueGrey35, + shade40: PRIMITIVE_COLORS.blueGrey40, + shade45: PRIMITIVE_COLORS.blueGrey45, + shade50: PRIMITIVE_COLORS.blueGrey50, + shade55: PRIMITIVE_COLORS.blueGrey55, + shade60: PRIMITIVE_COLORS.blueGrey60, + shade65: PRIMITIVE_COLORS.blueGrey65, + shade70: PRIMITIVE_COLORS.blueGrey70, + shade75: PRIMITIVE_COLORS.blueGrey75, + shade80: PRIMITIVE_COLORS.blueGrey80, + shade85: PRIMITIVE_COLORS.blueGrey85, + shade90: PRIMITIVE_COLORS.blueGrey90, + shade95: PRIMITIVE_COLORS.blueGrey95, + shade100: PRIMITIVE_COLORS.blueGrey100, + shade105: PRIMITIVE_COLORS.blueGrey105, + shade110: PRIMITIVE_COLORS.blueGrey110, + shade115: PRIMITIVE_COLORS.blueGrey115, + shade120: PRIMITIVE_COLORS.blueGrey120, + shade125: PRIMITIVE_COLORS.blueGrey125, + shade130: PRIMITIVE_COLORS.blueGrey130, + shade135: PRIMITIVE_COLORS.blueGrey135, + shade140: PRIMITIVE_COLORS.blueGrey140, + shade145: PRIMITIVE_COLORS.blueGrey145, + + shadeTransparent10: PRIMITIVE_COLORS.transparent.blueGrey10, + shadeTransparent20: PRIMITIVE_COLORS.transparent.blueGrey20, + shadeTransparent30: PRIMITIVE_COLORS.transparent.blueGrey30, + shadeTransparent40: PRIMITIVE_COLORS.transparent.blueGrey40, + shadeTransparent50: PRIMITIVE_COLORS.transparent.blueGrey50, + shadeTransparent60: PRIMITIVE_COLORS.transparent.blueGrey60, + shadeTransparent70: PRIMITIVE_COLORS.transparent.blueGrey70, + shadeTransparent80: PRIMITIVE_COLORS.transparent.blueGrey80, + shadeTransparent90: PRIMITIVE_COLORS.transparent.blueGrey90, + shadeTransparent100: PRIMITIVE_COLORS.transparent.blueGrey100, + shadeTransparent110: PRIMITIVE_COLORS.transparent.blueGrey110, + shadeTransparent120: PRIMITIVE_COLORS.transparent.blueGrey120, + shadeTransparent130: PRIMITIVE_COLORS.transparent.blueGrey130, + shadeTransparent140: PRIMITIVE_COLORS.transparent.blueGrey140, +}; diff --git a/packages/eui-theme-borealis/src/variables/_colors.ts b/packages/eui-theme-borealis/src/variables/colors/index.ts similarity index 82% rename from packages/eui-theme-borealis/src/variables/_colors.ts rename to packages/eui-theme-borealis/src/variables/colors/index.ts index 09ff1a3e2f5..a9b746d160d 100644 --- a/packages/eui-theme-borealis/src/variables/_colors.ts +++ b/packages/eui-theme-borealis/src/variables/colors/index.ts @@ -8,12 +8,13 @@ import type { _EuiThemeColors } from '@elastic/eui-theme-common'; +import { SEMANTIC_COLORS } from './_semantic_colors'; import { light_colors } from './_colors_light'; import { dark_colors } from './_colors_dark'; export const colors: _EuiThemeColors = { - ghost: '#FFF', - ink: '#000', + ghost: SEMANTIC_COLORS.plainLight, + ink: SEMANTIC_COLORS.plainDark, LIGHT: light_colors, DARK: dark_colors, }; diff --git a/packages/eui-theme-common/package.json b/packages/eui-theme-common/package.json index 2ddafb93b6d..45391e89fa1 100644 --- a/packages/eui-theme-common/package.json +++ b/packages/eui-theme-common/package.json @@ -13,7 +13,7 @@ "lint": "yarn tsc --noEmit && yarn lint-es && yarn lint-sass", "lint-es": "eslint --cache src/**/*.ts --max-warnings 0", "lint-sass": "yarn stylelint \"**/*.scss\" --quiet-deprecation-warnings", - "test": "jest", + "test": "jest ./src", "pre-push": "yarn lint && yarn test" }, "repository": { diff --git a/packages/eui-theme-common/src/global_styling/types.ts b/packages/eui-theme-common/src/global_styling/types.ts index e2b7a96a9ff..0b8ae557a7c 100644 --- a/packages/eui-theme-common/src/global_styling/types.ts +++ b/packages/eui-theme-common/src/global_styling/types.ts @@ -18,6 +18,7 @@ import { _EuiThemeBase, _EuiThemeSizes } from './variables/size'; import { _EuiThemeFont } from './variables/typography'; import { _EuiThemeFocus } from './variables/states'; import { _EuiThemeLevels } from './variables/levels'; +import { _EuiThemeComponents } from './variables/components'; export const COLOR_MODES_STANDARD = { light: 'LIGHT', @@ -58,6 +59,8 @@ export type EuiThemeShape = { animation: _EuiThemeAnimation; breakpoint: _EuiThemeBreakpoints; levels: _EuiThemeLevels; + // bevel: _EuiThemeBevel; + components: _EuiThemeComponents; }; export type EuiThemeSystem = { diff --git a/packages/eui-theme-common/src/global_styling/variables/_buttons.scss b/packages/eui-theme-common/src/global_styling/variables/_buttons.scss index 4d4e8a5f0b1..61e36da78bd 100644 --- a/packages/eui-theme-common/src/global_styling/variables/_buttons.scss +++ b/packages/eui-theme-common/src/global_styling/variables/_buttons.scss @@ -15,4 +15,4 @@ $euiButtonTypes: ( // TODO: Remove this once elastic-charts no longer uses this variable // @see https://github.com/elastic/elastic-charts/pull/2528 -$euiButtonColorDisabledText: $euiColorDisabledText; +$euiButtonColorDisabledText: $euiColorTextDisabled !default; diff --git a/packages/eui-theme-common/src/global_styling/variables/_form.scss b/packages/eui-theme-common/src/global_styling/variables/_form.scss index 41c5dfad04e..da5669830e8 100644 --- a/packages/eui-theme-common/src/global_styling/variables/_form.scss +++ b/packages/eui-theme-common/src/global_styling/variables/_form.scss @@ -5,17 +5,4 @@ $euiFormControlCompressedHeight: $euiSizeXL !default; $euiFormControlPadding: $euiSizeM !default; $euiFormControlCompressedPadding: $euiSizeS !default; $euiFormControlBorderRadius: $euiBorderRadius !default; -$euiFormControlCompressedBorderRadius: $euiBorderRadiusSmall !default; - -// Coloring -$euiFormBackgroundColor: tintOrShade($euiColorLightestShade, 60%, 40%) !default; -$euiFormBackgroundDisabledColor: darken($euiColorLightestShade, 2%) !default; -$euiFormBackgroundReadOnlyColor: $euiColorEmptyShade !default; -$euiFormBorderOpaqueColor: shadeOrTint(desaturate(adjust-hue($euiColorPrimary, 22), 22.95), 26%, 100%) !default; -$euiFormBorderColor: transparentize($euiFormBorderOpaqueColor, .9) !default; -$euiFormBorderDisabledColor: transparentize($euiFormBorderOpaqueColor, .9) !default; -$euiFormControlDisabledColor: $euiColorMediumShade !default; -$euiFormControlBoxShadow: 0 0 transparent !default; -$euiFormControlPlaceholderText: makeHighContrastColor($euiTextSubduedColor, $euiFormBackgroundColor) !default; -$euiFormInputGroupLabelBackground: tintOrShade($euiColorLightShade, 50%, 15%) !default; -$euiFormInputGroupBorder: none !default; \ No newline at end of file +$euiFormControlCompressedBorderRadius: $euiBorderRadiusSmall !default; \ No newline at end of file diff --git a/packages/eui-theme-common/src/global_styling/variables/buttons.ts b/packages/eui-theme-common/src/global_styling/variables/buttons.ts new file mode 100644 index 00000000000..bb34c178d5b --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/variables/buttons.ts @@ -0,0 +1,57 @@ +/* + * 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 { ColorModeSwitch, StrictColorModeSwitch } from '../types'; + +export type _EuiThemeButtonColors = { + backgroundPrimary: ColorModeSwitch; + backgroundAccent: ColorModeSwitch; + backgroundAccentSecondary: ColorModeSwitch; + backgroundSuccess: ColorModeSwitch; + backgroundWarning: ColorModeSwitch; + backgroundDanger: ColorModeSwitch; + backgroundText: ColorModeSwitch; + backgroundDisabled: ColorModeSwitch; + + backgroundFilledPrimary: ColorModeSwitch; + backgroundFilledAccent: ColorModeSwitch; + backgroundFilledAccentSecondary: ColorModeSwitch; + backgroundFilledSuccess: ColorModeSwitch; + backgroundFilledWarning: ColorModeSwitch; + backgroundFilledDanger: ColorModeSwitch; + backgroundFilledText: ColorModeSwitch; + backgroundFilledDisabled: ColorModeSwitch; + + backgroundEmptyPrimaryHover: ColorModeSwitch; + backgroundEmptyAccentHover: ColorModeSwitch; + backgroundEmptyAccentSecondaryHover: ColorModeSwitch; + backgroundEmptySuccessHover: ColorModeSwitch; + backgroundEmptyWarningHover: ColorModeSwitch; + backgroundEmptyDangerHover: ColorModeSwitch; + backgroundEmptyTextHover: ColorModeSwitch; + + textColorPrimary: ColorModeSwitch; + textColorAccent: ColorModeSwitch; + textColorAccentSecondary: ColorModeSwitch; + textColorSuccess: ColorModeSwitch; + textColorWarning: ColorModeSwitch; + textColorDanger: ColorModeSwitch; + textColorText: ColorModeSwitch; + textColorDisabled: ColorModeSwitch; + + textColorFilledPrimary: ColorModeSwitch; + textColorFilledAccent: ColorModeSwitch; + textColorFilledAccentSecondary: ColorModeSwitch; + textColorFilledSuccess: ColorModeSwitch; + textColorFilledWarning: ColorModeSwitch; + textColorFilledDanger: ColorModeSwitch; + textColorFilledText: ColorModeSwitch; + textColorFilledDisabled: ColorModeSwitch; +}; + +export type _EuiThemeButton = StrictColorModeSwitch<_EuiThemeButtonColors> & {}; 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 8604ecafba4..d77ad66f88d 100644 --- a/packages/eui-theme-common/src/global_styling/variables/colors.ts +++ b/packages/eui-theme-common/src/global_styling/variables/colors.ts @@ -20,6 +20,10 @@ export type _EuiThemeBrandColors = { * Pulls attention to key indicators like **notifications** or number of selections. */ accent: ColorModeSwitch; + /** + * Secondary attention indicator with lower priority. + */ + accentSecondary: ColorModeSwitch; /** * Used for **positive** messages/graphics and additive actions. */ @@ -40,53 +44,72 @@ export type _EuiThemeBrandColors = { export type _EuiThemeBrandTextColors = { /** * Typically computed against `colors.primary` + * @deprecated - use `textPrimary` instead */ primaryText: ColorModeSwitch; /** * Typically computed against `colors.accent` + * @deprecated - use `textAccent` instead */ accentText: ColorModeSwitch; /** * Typically computed against `colors.success` + * @deprecated - use `textSuccess` instead */ successText: ColorModeSwitch; /** * Typically computed against `colors.warning` + * @deprecated - use `textWarning` instead */ warningText: ColorModeSwitch; /** * Typically computed against `colors.danger` + * @deprecated - use `textDanger` instead */ dangerText: ColorModeSwitch; + + textPrimary: ColorModeSwitch; + textAccent: ColorModeSwitch; + textAccentSecondary: ColorModeSwitch; + textSuccess: ColorModeSwitch; + textWarning: ColorModeSwitch; + textDanger: ColorModeSwitch; }; export type _EuiThemeShadeColors = { /** * Used as the background color of primary **page content and panels** including modals and flyouts. + * @deprecated - use `white` */ emptyShade: ColorModeSwitch; /** * Used to lightly shade areas that contain **secondary content** or contain panel-like components. + * @deprecated - use specific semantic color tokens instead */ lightestShade: ColorModeSwitch; /** * Used for most **borders** and dividers (horizontal rules). + * @deprecated - use specific semantic color tokens instead */ lightShade: ColorModeSwitch; /** * The middle gray for all themes; this is the base for `colors.subdued`. + * @deprecated - use specific semantic color tokens instead */ mediumShade: ColorModeSwitch; /** * Slightly subtle graphic color + * @deprecated - use specific semantic color tokens instead */ darkShade: ColorModeSwitch; /** * 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 */ darkestShade: ColorModeSwitch; /** * The opposite of `emptyShade` + * @deprecated - use`black` */ fullShade: ColorModeSwitch; }; @@ -94,26 +117,36 @@ export type _EuiThemeShadeColors = { export type _EuiThemeTextColors = { /** * Computed against `colors.darkestShade` + * @deprecated - use `textParagraph` instead */ text: ColorModeSwitch; /** * Computed against `colors.text` + * @deprecated - use `textHeading` instead */ title: ColorModeSwitch; /** * Computed against `colors.mediumShade` + * @deprecated - use `textSubdued` instead */ subduedText: ColorModeSwitch; /** * Computed against `colors.primaryText` */ link: ColorModeSwitch; + + textParagraph: ColorModeSwitch; + textHeading: ColorModeSwitch; + textSubdued: ColorModeSwitch; + textDisabled: ColorModeSwitch; + textInverse: ColorModeSwitch; }; export type _EuiThemeSpecialColors = { /** * 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 backgroundPage instead */ body: ColorModeSwitch; /** @@ -122,26 +155,112 @@ export type _EuiThemeSpecialColors = { highlight: ColorModeSwitch; /** * Computed against `colors.darkestShade` + * @deprecated - use specific semantic tokens instead (e.g. backgroundDisabled, borderDisabled etc) */ disabled: ColorModeSwitch; /** * Computed against `colors.disabled` + * @deprecated - use textDisabled instead */ disabledText: ColorModeSwitch; /** * The base color for shadows that gets `transparentized` * at a value based on the `colorMode` and then layered. + * @deprecated - use specific shadow tokens instead */ shadow: ColorModeSwitch; }; +export type _EuiThemeBackgroundColors = { + backgroundBasePrimary: ColorModeSwitch; + backgroundBaseAccent: ColorModeSwitch; + backgroundBaseAccentSecondary: ColorModeSwitch; + backgroundBaseSuccess: ColorModeSwitch; + backgroundBaseWarning: ColorModeSwitch; + backgroundBaseDanger: ColorModeSwitch; + backgroundBaseSubdued: ColorModeSwitch; + backgroundBasePlain: ColorModeSwitch; + backgroundBaseDisabled: ColorModeSwitch; + backgroundBaseFormsPrepend: ColorModeSwitch; + backgroundBaseFormsControlDisabled: ColorModeSwitch; + backgroundBaseInteractiveHover: ColorModeSwitch; + backgroundBaseInteractiveSelect: ColorModeSwitch; + backgroundBaseInteractiveOverlay: ColorModeSwitch; + backgroundBaseSkeletonEdge: ColorModeSwitch; + backgroundBaseSkeletonMiddle: ColorModeSwitch; + + backgroundLightPrimary: ColorModeSwitch; + backgroundLightAccent: ColorModeSwitch; + backgroundLightAccentSecondary: ColorModeSwitch; + backgroundLightSuccess: ColorModeSwitch; + backgroundLightWarning: ColorModeSwitch; + backgroundLightDanger: ColorModeSwitch; + backgroundLightText: ColorModeSwitch; + + backgroundFilledPrimary: ColorModeSwitch; + backgroundFilledAccent: ColorModeSwitch; + backgroundFilledAccentSecondary: ColorModeSwitch; + backgroundFilledSuccess: ColorModeSwitch; + backgroundFilledWarning: ColorModeSwitch; + backgroundFilledDanger: ColorModeSwitch; + backgroundFilledText: ColorModeSwitch; +}; + +/** TODO: remove once usages are re-mapped */ +export type _EuiThemeTransparentBackgroundColors = { + /** @deprecated */ + backgroundTransparent: string; + /** @deprecated */ + backgroundTransparentPrimary: ColorModeSwitch; + /** @deprecated */ + backgroundTransparentAccent: ColorModeSwitch; + /** @deprecated */ + backgroundTransparentAccentSecondary: ColorModeSwitch; + /** @deprecated */ + backgroundTransparentSuccess: ColorModeSwitch; + /** @deprecated */ + backgroundTransparentWarning: ColorModeSwitch; + /** @deprecated */ + backgroundTransparentDanger: ColorModeSwitch; + /** @deprecated */ + backgroundTransparentSubdued: ColorModeSwitch; + /** @deprecated */ + backgroundTransparentPlain: ColorModeSwitch; +}; + +export type _EuiThemeBorderColors = { + borderBasePrimary: ColorModeSwitch; + borderBaseAccent: ColorModeSwitch; + borderBaseAccentSecondary: ColorModeSwitch; + borderBaseSuccess: ColorModeSwitch; + borderBaseWarning: ColorModeSwitch; + borderBaseDanger: ColorModeSwitch; + + borderBasePlain: ColorModeSwitch; + borderBaseSubdued: ColorModeSwitch; + borderBaseDisabled: ColorModeSwitch; + borderBaseFloating: ColorModeSwitch; + + borderBaseFormsColorSwatch: ColorModeSwitch; + borderBaseFormsControl: ColorModeSwitch; + + borderStrongPrimary: ColorModeSwitch; + borderStrongAccent: ColorModeSwitch; + borderStrongAccentSecondary: ColorModeSwitch; + borderStrongSuccess: ColorModeSwitch; + borderStrongWarning: ColorModeSwitch; + borderStrongDanger: ColorModeSwitch; +}; + export type _EuiThemeConstantColors = { /** * Purest **white** + * @deprecated */ ghost: string; /** * Purest **black** + * @deprecated */ ink: string; }; @@ -150,7 +269,10 @@ export type _EuiThemeColorsMode = _EuiThemeBrandColors & _EuiThemeBrandTextColors & _EuiThemeShadeColors & _EuiThemeSpecialColors & - _EuiThemeTextColors; + _EuiThemeTextColors & + _EuiThemeBackgroundColors & + _EuiThemeTransparentBackgroundColors & + _EuiThemeBorderColors; export type _EuiThemeColors = StrictColorModeSwitch<_EuiThemeColorsMode> & _EuiThemeConstantColors; diff --git a/packages/eui-theme-common/src/global_styling/variables/components.ts b/packages/eui-theme-common/src/global_styling/variables/components.ts new file mode 100644 index 00000000000..832786c2c64 --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/variables/components.ts @@ -0,0 +1,101 @@ +/* + * 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 { ColorModeSwitch, StrictColorModeSwitch } from '../types'; +import { _EuiThemeButtonColors } from './buttons'; +import { _EuiThemeFormColors } from './forms'; + +export type _EuiThemeComponentColors = { + buttonGroupBorderColor: ColorModeSwitch; + buttonGroupBorderColorSelected: ColorModeSwitch; + + badgeBackgroundSubdued: ColorModeSwitch; + badgeBorderColorHollow: ColorModeSwitch; + badgeIconButtonBackgroundHover: ColorModeSwitch; + + bottomBarBackground: ColorModeSwitch; + + breadcrumbsApplicationBackground: ColorModeSwitch; + breadcrumbsApplicationColor: ColorModeSwitch; + + collapsibleNavGroupBackground: ColorModeSwitch; + collapsibleNavGroupBackgroundDark: ColorModeSwitch; + + dataGridVerticalLineBorderColor: ColorModeSwitch; + dataGridRowBackgroundStriped: ColorModeSwitch; + dataGridRowBackgroundHover: ColorModeSwitch; + + dragDropDraggingBackground: ColorModeSwitch; + dragDropDraggingOverBackground: ColorModeSwitch; + + headerBackground: ColorModeSwitch; + headerDarkBackground: ColorModeSwitch; + headerDarkSearchBorderColor: ColorModeSwitch; + headerDarkSectionItemBackgroundFocus: ColorModeSwitch; + + filterSelectItemBackgroundFocusDisabled: ColorModeSwitch; + + flyoutCloseButtonInsideBackground: ColorModeSwitch; + + keyPadMenuItemBackgroundDisabledSelect: ColorModeSwitch; + + listGroupItemBackgroundPrimaryActive: ColorModeSwitch; + listGroupItemBackgroundSubduedActive: ColorModeSwitch; + listGroupItemBackgroundHover: ColorModeSwitch; + listGroupItemBackgroundPrimaryHover: ColorModeSwitch; + + markBackground: ColorModeSwitch; + + markdownFormatTableBorderColor: ColorModeSwitch; + + popoverPanelBackground: ColorModeSwitch; + popoverFooterBorderColor: ColorModeSwitch; + + scrollbarTrackColor: ColorModeSwitch; + + sideNavItemEmphasizedBackground: ColorModeSwitch; + + selectableListItemBorderColor: ColorModeSwitch; + + superDatePickerBackgroundSuccees: ColorModeSwitch; + + switchBackgroundOn: ColorModeSwitch; + switchBackgroundOff: ColorModeSwitch; + switchUncompressedBackgroundDisabled: ColorModeSwitch; + switchCompressedBackgroundDisabled: ColorModeSwitch; + switchMiniBackgroundDisabled: ColorModeSwitch; + switchThumbBackgroundDisabled: ColorModeSwitch; + switchThumbBorderOn: ColorModeSwitch; + switchThumbBorderOff: ColorModeSwitch; + switchIconDisabled: ColorModeSwitch; + + tableRowBackgroundHover: ColorModeSwitch; + tableRowBackgroundSelected: ColorModeSwitch; + tableRowBackgroundSelectedHover: ColorModeSwitch; + tableRowInteractiveBackgroundHover: ColorModeSwitch; + tableRowInteractiveBackgroundFocus: ColorModeSwitch; + tableCellSortableIconColor: ColorModeSwitch; + + tooltipBackground: ColorModeSwitch; + tooltipBorder: ColorModeSwitch; + tooltipBorderFloating: ColorModeSwitch; + + tourFooterBackground: ColorModeSwitch; + + treeViewItemBackgroundHover: ColorModeSwitch; +}; + +export type _EuiThemeComponents = { + buttons: StrictColorModeSwitch<_EuiThemeButtonColors>; + forms: StrictColorModeSwitch<_EuiThemeFormColors>; + /** + * internal-only key that holds temporary tokens used while migrating themes + */ + LIGHT: _EuiThemeComponentColors; + DARK: _EuiThemeComponentColors; +}; diff --git a/packages/eui-theme-common/src/global_styling/variables/forms.ts b/packages/eui-theme-common/src/global_styling/variables/forms.ts new file mode 100644 index 00000000000..ce718bf65f3 --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/variables/forms.ts @@ -0,0 +1,28 @@ +/* + * 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 { ColorModeSwitch } from '../types'; + +export type _EuiThemeFormColors = { + background: ColorModeSwitch; + backgroundDisabled: ColorModeSwitch; + backgroundReadOnly: ColorModeSwitch; + backgroundFocused: ColorModeSwitch; + backgroundAutofilled: ColorModeSwitch; + prependBackground: ColorModeSwitch; + border: ColorModeSwitch; + borderAutofilled: ColorModeSwitch; + controlBorder: ColorModeSwitch; + controlBorderSelected: ColorModeSwitch; + controlBorderDisabled: ColorModeSwitch; + controlBackgroundUnselected: ColorModeSwitch; + controlBackgroundDisabled: ColorModeSwitch; + colorHasPlaceholder: ColorModeSwitch; + colorDisabled: ColorModeSwitch; + iconDisabled: ColorModeSwitch; +}; diff --git a/packages/eui-theme-common/src/global_styling/variables/index.ts b/packages/eui-theme-common/src/global_styling/variables/index.ts index 48eacef5cbb..0643626b55a 100644 --- a/packages/eui-theme-common/src/global_styling/variables/index.ts +++ b/packages/eui-theme-common/src/global_styling/variables/index.ts @@ -16,3 +16,6 @@ export * from './size'; export * from './shadow'; export * from './states'; export * from './typography'; +export * from './buttons'; +export * from './forms'; +export * from './components'; diff --git a/packages/eui-theme-common/src/utils.test.ts b/packages/eui-theme-common/src/utils.test.ts index c654e4d3c22..c8577113e20 100644 --- a/packages/eui-theme-common/src/utils.test.ts +++ b/packages/eui-theme-common/src/utils.test.ts @@ -16,6 +16,7 @@ import { getComputed, buildTheme, mergeDeep, + getTokenName, } from './utils'; describe('isInverseColorMode', () => { @@ -277,3 +278,14 @@ describe('mergeDeep', () => { ).toEqual({ a: 1, b: { c: { d: 3, e: 5 } } }); }); }); + +describe('getTokenName', () => { + it('returns the correct token name', () => { + expect(getTokenName('backgroundBase', 'primary')).toEqual( + 'backgroundBasePrimary' + ); + expect(getTokenName('backgroundBase', 'primary', 'hovered')).toEqual( + 'backgroundBasePrimaryHovered' + ); + }); +}); diff --git a/packages/eui-theme-common/src/utils.ts b/packages/eui-theme-common/src/utils.ts index caa529ebd48..445e538b582 100644 --- a/packages/eui-theme-common/src/utils.ts +++ b/packages/eui-theme-common/src/utils.ts @@ -390,3 +390,20 @@ export const mergeDeep = ( return target; }; + +/** + * Returns token name string based on passed dynamic variants + * and additional prefix/suffix + */ +export const getTokenName = ( + prefix: string, + variant: string, + suffix?: string +) => { + const getCapitalized = (str: string) => + str.charAt(0).toUpperCase() + str.slice(1); + const colorName = variant.charAt(0).toUpperCase() + variant.slice(1); + const _suffix = suffix ? getCapitalized(suffix) : ''; + + return `${prefix}${getCapitalized(colorName)}${_suffix}`; +}; diff --git a/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiCodeBlock_Highlight.png b/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiCodeBlock_Highlight.png new file mode 100644 index 00000000000..5b07dd69337 Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiCodeBlock_Highlight.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiCodeBlock_Highlight.png b/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiCodeBlock_Highlight.png new file mode 100644 index 00000000000..2af7856b04a Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiCodeBlock_Highlight.png differ diff --git a/packages/eui/src-docs/src/views/badge/beta_badge.tsx b/packages/eui/src-docs/src/views/badge/beta_badge.tsx index 8f0c6213dec..8b301be8c17 100644 --- a/packages/eui/src-docs/src/views/badge/beta_badge.tsx +++ b/packages/eui/src-docs/src/views/badge/beta_badge.tsx @@ -3,7 +3,7 @@ import { css } from '@emotion/react'; import { EuiBetaBadge, EuiSpacer, EuiTitle } from '../../../../src/components'; -const colors = ['hollow', 'accent', 'subdued'] as const; +const colors = ['hollow', 'accent', 'accentSecondary', 'subdued'] as const; export default () => ( <> 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 b4749bb0575..41fa0bd5edc 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 @@ -9,17 +9,13 @@ import { EuiCode, EuiColorPickerSwatch, EuiText, - useEuiBackgroundColor, - useEuiPaddingSize, BACKGROUND_COLORS, - euiBackgroundColor, - useEuiPaddingCSS, EuiButtonGroup, EuiDescribedFormGroup, EuiPanel, EuiSpacer, - _EuiBackgroundColorOptions, logicalCSS, + useEuiPaddingCSS, } from '../../../../../src'; import { EuiThemeColors, ThemeRowType } from '../_props'; @@ -33,6 +29,11 @@ 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); @@ -265,6 +266,8 @@ export const SpecialValuesJS = () => { }; export const UtilsJS = () => { + const { euiTheme } = useEuiTheme(); + return ( <> @@ -298,7 +301,9 @@ export const UtilsJS = () => { } example={

- background-color: {useEuiBackgroundColor('accent')} + + background-color: {euiTheme.colors.backgroundBaseAccent} +

} snippetLanguage="tsx" @@ -309,38 +314,12 @@ const cssStyles = [colorStyles['accent']]; /* Your content */ `} /> - - useEuiBackgroundColor(color, method?)} - type="hook" - props={`color: '${BACKGROUND_COLORS.join("' | '")}'; - -method? 'opaque' | 'transparent';`} - description={ -

- Returns just the computed background color for the given{' '} - color. -

- } - example={ -

- {useEuiBackgroundColor('subdued')} -

- } - snippetLanguage="emotion" - snippet={"background: ${useEuiBackgroundColor('subdued')};"} - /> ); }; export const UtilsValuesJS = () => { - const euiTheme = useEuiTheme(); + const { euiTheme } = useEuiTheme(); const backgroundButtons = ['opaque', 'transparent'].map((m) => { return { id: m, @@ -381,16 +360,21 @@ export const UtilsValuesJS = () => { { + 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: - backgroundSelected === 'transparent' - ? `useEuiBackgroundColor('${color}', 'transparent')` - : `useEuiBackgroundColor('${color}')`, - value: euiBackgroundColor(euiTheme, color, { - method: - backgroundSelected as _EuiBackgroundColorOptions['method'], - }), + token, + value: euiTheme.colors[token], }; })} render={(item) => ( 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 ca98bc014b7..b675c444eb3 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 @@ -27,6 +27,7 @@ type ColorSection = { showTextVariants: boolean; matchPanelColor?: boolean; hookName?: string; + tokenName?: string; }; export const ColorSectionJS: FunctionComponent = ({ @@ -36,6 +37,7 @@ export const ColorSectionJS: FunctionComponent = ({ showTextVariants, matchPanelColor, hookName, + tokenName, }) => { const { euiTheme } = useEuiTheme(); const colorsForContrast = showTextVariants ? textVariants : allowedColors; @@ -80,7 +82,9 @@ export const ColorSectionJS: FunctionComponent = ({ background={_colorValue ? colorValue : color} key={color2} minimumContrast={minimumContrast} - styleString={hookName && `${hookName}('${color}')`} + styleString={ + tokenName ?? (hookName && `${hookName}('${color}')`) + } /> ); })} 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 e9a96a4c286..e724687c8e3 100644 --- a/packages/eui/src-docs/src/views/theme/color/contrast.tsx +++ b/packages/eui/src-docs/src/views/theme/color/contrast.tsx @@ -25,17 +25,17 @@ import { brandKeys, shadeKeys } from './_color_js'; import { ContrastSlider } from './_contrast_slider'; import { ratingAA } from './_contrast_utilities'; import { _EuiThemeColorsMode } from '../../../../../src/global_styling/variables/colors'; -import { - BACKGROUND_COLORS, - _EuiBackgroundColor, - euiBackgroundColor, -} from '../../../../../src/global_styling'; +import { BACKGROUND_COLORS } from '../../../../../src/global_styling'; import { BUTTON_COLORS, euiButtonColor, _EuiButtonColor, -} from '../../../../../src/themes/amsterdam/global_styling/mixins/button'; +} 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 = [ @@ -66,9 +66,7 @@ export default () => { const [backgroundColors, setBackgroundColors] = useState(background_colors); - const [backgroundFunction, setBackgroundFunction] = useState( - 'useEuiBackgroundColor' - ); + const [backgroundFunction, setBackgroundFunction] = useState(undefined); const [backgroundSelected, setBackgroundSelected] = useState( backgroundButtons[0].id ); @@ -78,12 +76,7 @@ export default () => { case 'container': setBackgroundSelected(id); setBackgroundColors(background_colors); - setBackgroundFunction('useEuiBackgroundColor(color)'); - break; - case 'hover': - setBackgroundSelected(id); - setBackgroundColors(background_colors); - setBackgroundFunction("useEuiBackgroundColor(color, 'transparent')"); + setBackgroundFunction(undefined); break; case 'button': setBackgroundSelected(id); @@ -269,8 +262,13 @@ export default () => { description={

These background colors are pre-defined shades of the - brand colors. They are recalled by using the hook{' '} - {backgroundFunction}. + brand colors.{' '} + {backgroundFunction && ( + <> + They are recalled by using the hook{' '} + {backgroundFunction} + + )}

} > @@ -289,6 +287,11 @@ export default () => { {backgroundColors.map((color: string) => { + const backgroundToken = getTokenName( + 'backgroundBase', + color + ) as keyof _EuiThemeBackgroundColors; + switch (backgroundSelected) { case 'container': return ( @@ -296,34 +299,10 @@ export default () => { - - - ); - - case 'hover': - return ( - - diff --git a/packages/eui/src-docs/src/views/theme/sizing/_sizing_js.tsx b/packages/eui/src-docs/src/views/theme/sizing/_sizing_js.tsx index f263e09be50..f3a65b6b607 100644 --- a/packages/eui/src-docs/src/views/theme/sizing/_sizing_js.tsx +++ b/packages/eui/src-docs/src/views/theme/sizing/_sizing_js.tsx @@ -12,7 +12,6 @@ import { logicalShorthandCSS, EuiText, useEuiPaddingSize, - useEuiBackgroundColor, useEuiBackgroundColorCSS, useEuiPaddingCSS, EuiAccordion, @@ -363,6 +362,8 @@ export const UtilsJS = () => { }; export const PaddingJS = () => { + const { euiTheme } = useEuiTheme(); + return ( <> @@ -425,7 +426,7 @@ const cssStyles = [paddingStyles['l']]; example={

diff --git a/packages/eui/src/components/badge/__snapshots__/badge.test.tsx.snap b/packages/eui/src/components/badge/__snapshots__/badge.test.tsx.snap index aa5d8d93f85..0bdf7afbfac 100644 --- a/packages/eui/src/components/badge/__snapshots__/badge.test.tsx.snap +++ b/packages/eui/src/components/badge/__snapshots__/badge.test.tsx.snap @@ -175,6 +175,23 @@ exports[`EuiBadge props color accent is rendered 1`] = ` `; +exports[`EuiBadge props color accentSecondary is rendered 1`] = ` + + + + Content + + + +`; + exports[`EuiBadge props color accepts hex 1`] = ` `; +exports[`EuiBadge props style is rendered with accentSecondary 1`] = ` + + + + Content + + + +`; + exports[`EuiBadge props style is rendered with danger 1`] = ` { @@ -106,6 +106,7 @@ export const euiBadgeStyles = (euiThemeContext: UseEuiTheme) => { `, primary: css(setBadgeColorVars(badgeColors.primary)), accent: css(setBadgeColorVars(badgeColors.accent)), + accentSecondary: css(setBadgeColorVars(badgeColors.accentSecondary)), warning: css(setBadgeColorVars(badgeColors.warning)), danger: css(setBadgeColorVars(badgeColors.danger)), success: css(setBadgeColorVars(badgeColors.success)), @@ -165,7 +166,8 @@ export const euiBadgeStyles = (euiThemeContext: UseEuiTheme) => { font-size: 0; /* Makes the button only as large as the icon so it aligns vertically better */ &:focus { - background-color: ${transparentize(euiTheme.colors.ghost, 0.8)}; + background-color: ${euiTheme.components + .badgeIconButtonBackgroundHover}; color: ${euiTheme.colors.ink}; border-radius: ${mathWithUnits( euiTheme.border.radius.small, diff --git a/packages/eui/src/components/badge/badge.tsx b/packages/eui/src/components/badge/badge.tsx index 735576b30b6..edfda98531c 100644 --- a/packages/eui/src/components/badge/badge.tsx +++ b/packages/eui/src/components/badge/badge.tsx @@ -40,6 +40,7 @@ export const COLORS = [ 'primary', 'success', 'accent', + 'accentSecondary', 'warning', 'danger', ] as const; diff --git a/packages/eui/src/components/badge/beta_badge/__snapshots__/beta_badge.test.tsx.snap b/packages/eui/src/components/badge/beta_badge/__snapshots__/beta_badge.test.tsx.snap index 031c5216127..503d9b22f93 100644 --- a/packages/eui/src/components/badge/beta_badge/__snapshots__/beta_badge.test.tsx.snap +++ b/packages/eui/src/components/badge/beta_badge/__snapshots__/beta_badge.test.tsx.snap @@ -46,6 +46,17 @@ exports[`EuiBetaBadge props color accent is rendered 1`] = ` `; +exports[`EuiBetaBadge props color accentSecondary is rendered 1`] = ` + + + Beta + + +`; + exports[`EuiBetaBadge props color hollow is rendered 1`] = ` { `, // Colors accent: css(badgeColors.accentText), + accentSecondary: css(badgeColors.accentSecondaryText), subdued: css(badgeColors.subdued), hollow: css` color: ${badgeColors.hollow.color}; diff --git a/packages/eui/src/components/badge/beta_badge/beta_badge.tsx b/packages/eui/src/components/badge/beta_badge/beta_badge.tsx index bcaca40f742..19f39b756aa 100644 --- a/packages/eui/src/components/badge/beta_badge/beta_badge.tsx +++ b/packages/eui/src/components/badge/beta_badge/beta_badge.tsx @@ -22,7 +22,12 @@ import { EuiIcon, IconType } from '../../icon'; import { euiBetaBadgeStyles } from './beta_badge.styles'; -export const COLORS = ['accent', 'subdued', 'hollow'] as const; +export const COLORS = [ + 'accent', + 'accentSecondary', + 'subdued', + 'hollow', +] as const; export type BetaBadgeColor = (typeof COLORS)[number]; export const SIZES = ['s', 'm'] as const; diff --git a/packages/eui/src/components/badge/color_utils.ts b/packages/eui/src/components/badge/color_utils.ts index 351404bce19..0e6256f3057 100644 --- a/packages/eui/src/components/badge/color_utils.ts +++ b/packages/eui/src/components/badge/color_utils.ts @@ -8,15 +8,15 @@ import chroma from 'chroma-js'; -import { UseEuiTheme, isColorDark, tint } from '../../services'; +import { UseEuiTheme, isColorDark } from '../../services'; import { euiButtonColor, euiButtonFillColor, -} from '../../themes/amsterdam/global_styling/mixins'; +} from '../../global_styling/mixins/_button'; import { chromaValid, parseColor } from '../color_picker/utils'; export const euiBadgeColors = (euiThemeContext: UseEuiTheme) => { - const { euiTheme, colorMode } = euiThemeContext; + const { euiTheme } = euiThemeContext; return { // Colors shared between buttons and badges @@ -25,23 +25,25 @@ export const euiBadgeColors = (euiThemeContext: UseEuiTheme) => { warning: euiButtonFillColor(euiThemeContext, 'warning'), danger: euiButtonFillColor(euiThemeContext, 'danger'), accent: euiButtonFillColor(euiThemeContext, 'accent'), + accentSecondary: euiButtonFillColor(euiThemeContext, 'accentSecondary'), disabled: euiButtonColor(euiThemeContext, 'disabled'), // Colors unique to badges default: getBadgeColors(euiThemeContext, euiTheme.colors.lightShade), // Hollow has a border and is used for autocompleters and beta badges hollow: { ...getBadgeColors(euiThemeContext, euiTheme.colors.emptyShade), - borderColor: - colorMode === 'DARK' - ? tint(euiTheme.border.color, 0.15) - : euiTheme.border.color, + borderColor: euiTheme.components.badgeBorderColorHollow, }, // Colors used by beta and notification badges subdued: getBadgeColors( euiThemeContext, - tint(euiTheme.colors.lightShade, 0.3) + euiTheme.components.badgeBackgroundSubdued + ), + accentText: getBadgeColors(euiThemeContext, euiTheme.colors.textAccent), + accentSecondaryText: getBadgeColors( + euiThemeContext, + euiTheme.colors.textAccentSecondary ), - accentText: getBadgeColors(euiThemeContext, euiTheme.colors.accentText), }; }; diff --git a/packages/eui/src/components/badge/notification_badge/__snapshots__/badge_notification.test.tsx.snap b/packages/eui/src/components/badge/notification_badge/__snapshots__/badge_notification.test.tsx.snap index e49b8ef8f7c..99c6b71878a 100644 --- a/packages/eui/src/components/badge/notification_badge/__snapshots__/badge_notification.test.tsx.snap +++ b/packages/eui/src/components/badge/notification_badge/__snapshots__/badge_notification.test.tsx.snap @@ -18,6 +18,14 @@ exports[`EuiNotificationBadge props color accent is rendered 1`] = ` `; +exports[`EuiNotificationBadge props color accentSecondary is rendered 1`] = ` + + 5 + +`; + exports[`EuiNotificationBadge props color subdued is rendered 1`] = ` { `, // Colors accent: css(badgeColors.accentText), + accentSecondary: css(badgeColors.accentSecondaryText), success: css(badgeColors.success), subdued: css(badgeColors.subdued), }; diff --git a/packages/eui/src/components/badge/notification_badge/badge_notification.tsx b/packages/eui/src/components/badge/notification_badge/badge_notification.tsx index c68cfa21510..00d3f13644a 100644 --- a/packages/eui/src/components/badge/notification_badge/badge_notification.tsx +++ b/packages/eui/src/components/badge/notification_badge/badge_notification.tsx @@ -14,7 +14,12 @@ import { CommonProps } from '../../common'; import { euiNotificationBadgeStyles } from './badge_notification.styles'; -export const COLORS = ['accent', 'subdued', 'success'] as const; +export const COLORS = [ + 'accent', + 'accentSecondary', + 'subdued', + 'success', +] as const; export type BadgeNotificationColor = (typeof COLORS)[number]; export const SIZES = ['s', 'm'] as const; diff --git a/packages/eui/src/components/bottom_bar/bottom_bar.styles.ts b/packages/eui/src/components/bottom_bar/bottom_bar.styles.ts index eb6dd268e90..2984b503619 100644 --- a/packages/eui/src/components/bottom_bar/bottom_bar.styles.ts +++ b/packages/eui/src/components/bottom_bar/bottom_bar.styles.ts @@ -8,7 +8,7 @@ import { css, keyframes } from '@emotion/react'; import { euiCanAnimate } from '../../global_styling'; -import { UseEuiTheme, shade } from '../../services'; +import { UseEuiTheme } from '../../services'; import { euiShadowFlat } from '../../themes/amsterdam/global_styling/mixins'; const euiBottomBarAppear = keyframes` @@ -31,7 +31,7 @@ export const euiBottomBarStyles = (euiThemeContext: UseEuiTheme) => { // `color` is inherited from the wrapping `EuiThemeProvider colorMode="dark"` euiBottomBar: css` ${euiShadowFlat(euiThemeContext)} - background: ${shade(euiTheme.colors.lightestShade, 0.5)}; + background: ${euiTheme.components.bottomBarBackground}; ${euiCanAnimate} { animation: ${euiBottomBarAppear} ${euiTheme.animation.slow} ${euiTheme.animation.resistance}; diff --git a/packages/eui/src/components/breadcrumbs/_breadcrumb_content.styles.ts b/packages/eui/src/components/breadcrumbs/_breadcrumb_content.styles.ts index be36e19dbaf..e4e30b521d1 100644 --- a/packages/eui/src/components/breadcrumbs/_breadcrumb_content.styles.ts +++ b/packages/eui/src/components/breadcrumbs/_breadcrumb_content.styles.ts @@ -8,7 +8,6 @@ import { css } from '@emotion/react'; import { UseEuiTheme } from '../../services'; -import { tintOrShade } from '../../services/color'; import { euiFontSize, euiTextTruncate, @@ -17,13 +16,13 @@ import { logicalBorderRadiusCSS, mathWithUnits, } from '../../global_styling'; -import { euiButtonColor } from '../../themes/amsterdam/global_styling/mixins/button'; +import { euiButtonColor } from '../../global_styling/mixins/_button'; /** * Styles cast to inner , `; +exports[`EuiButton props color accentSecondary is rendered 1`] = ` + +`; + exports[`EuiButton props color danger is rendered 1`] = ` +`; + exports[`EuiButtonEmpty props color danger is rendered 1`] = ` + + + + +`; + +exports[`EuiButtonGroup button props color accentSecondary is rendered for single 1`] = ` +

+ + test + +
+ + + +
+
+`; + exports[`EuiButtonGroup button props color danger is rendered for multi 1`] = `
{ get borders() { const selectors = '.euiButtonGroupButton-isSelected, .euiButtonGroup__tooltipWrapper-isSelected'; - const selectedColor = transparentize(euiTheme.colors.emptyShade, 0.2); - const unselectedColor = transparentize(euiTheme.colors.fullShade, 0.1); + const selectedColor = + euiTheme.components.buttonGroupBorderColorSelected; + const unselectedColor = euiTheme.components.buttonGroupBorderColor; const borderWidth = euiTheme.border.width.thin; // "Borders" between buttons should be present between two of the same colored buttons, diff --git a/packages/eui/src/components/button/button_group/button_group_button.tsx b/packages/eui/src/components/button/button_group/button_group_button.tsx index ab669ac360d..b0742b0b807 100644 --- a/packages/eui/src/components/button/button_group/button_group_button.tsx +++ b/packages/eui/src/components/button/button_group/button_group_button.tsx @@ -15,7 +15,7 @@ import React, { import { CSSInterpolation } from '@emotion/css'; import { useEuiMemoizedStyles } from '../../../services'; -import { useEuiButtonColorCSS } from '../../../themes/amsterdam/global_styling/mixins/button'; +import { useEuiButtonColorCSS } from '../../../global_styling/mixins/_button'; import { useInnerText } from '../../inner_text'; import { EuiButtonDisplay } from '../button_display/_button_display'; diff --git a/packages/eui/src/components/button/button_icon/__snapshots__/button_icon.test.tsx.snap b/packages/eui/src/components/button/button_icon/__snapshots__/button_icon.test.tsx.snap index 10f1726a5f2..820c6ef6bed 100644 --- a/packages/eui/src/components/button/button_icon/__snapshots__/button_icon.test.tsx.snap +++ b/packages/eui/src/components/button/button_icon/__snapshots__/button_icon.test.tsx.snap @@ -31,6 +31,21 @@ exports[`EuiButtonIcon props color accent is rendered 1`] = ` `; +exports[`EuiButtonIcon props color accentSecondary is rendered 1`] = ` + +`; + exports[`EuiButtonIcon props color danger is rendered 1`] = `