From 1ff189d1b7e239b7d793fd964cb0950baaba918c Mon Sep 17 00:00:00 2001 From: Lene Gadewoll Date: Wed, 23 Oct 2024 18:16:17 +0200 Subject: [PATCH 01/64] [Theme] Base theme setup (#8030) --- .../pipelines/pipeline_deploy_new_docs.sh | 2 +- .buildkite/scripts/pipelines/pipeline_test.sh | 18 +- .buildkite/scripts/release/step_build.sh | 1 + packages/docusaurus-theme/package.json | 3 +- .../src/components/navbar_item/index.tsx | 4 +- .../src/components/theme_context/index.tsx | 58 ++- .../src/components/theme_switcher/index.tsx | 94 +++++ .../src/theme/ColorModeToggle/index.tsx | 12 +- .../docusaurus-theme/src/theme/Logo/index.tsx | 4 +- .../src/theme/Navbar/Content/index.tsx | 24 +- .../Navbar/MobileSidebar/Header/index.tsx | 3 + packages/eui-theme-borealis/.eslintignore | 9 + packages/eui-theme-borealis/.eslintplugin.js | 3 + packages/eui-theme-borealis/.eslintrc.js | 114 +++++ packages/eui-theme-borealis/.gitignore | 11 + packages/eui-theme-borealis/.prettierrc | 7 + packages/eui-theme-borealis/.stylelintrc.js | 163 ++++++++ packages/eui-theme-borealis/LICENSE.txt | 6 + packages/eui-theme-borealis/README.md | 19 + packages/eui-theme-borealis/package.json | 60 +++ packages/eui-theme-borealis/src/index.ts | 37 ++ .../eui-theme-borealis/src/theme_dark.scss | 8 + .../eui-theme-borealis/src/theme_light.scss | 7 + .../src/variables/_animation.ts | 31 ++ .../src/variables/_borders.ts | 37 ++ .../src/variables/_breakpoint.ts | 17 + .../src/variables/_buttons.scss | 4 + .../src/variables/_colors.ts | 19 + .../src/variables/_colors_dark.scss | 49 +++ .../src/variables/_colors_dark.ts | 73 ++++ .../src/variables/_colors_light.scss | 49 +++ .../src/variables/_colors_light.ts | 74 ++++ .../src/variables/_index.scss | 7 + .../src/variables/_levels.ts | 21 + .../src/variables/_page.scss | 1 + .../eui-theme-borealis/src/variables/_size.ts | 29 ++ .../src/variables/_states.scss | 11 + .../src/variables/_states.ts | 22 + .../src/variables/_typography.scss | 64 +++ .../src/variables/_typography.ts | 62 +++ packages/eui-theme-borealis/tsconfig.json | 20 + packages/eui-theme-common/.babelrc.js | 27 ++ packages/eui-theme-common/.eslintignore | 10 + packages/eui-theme-common/.eslintplugin.js | 3 + packages/eui-theme-common/.eslintrc.js | 114 +++++ packages/eui-theme-common/.gitignore | 11 + packages/eui-theme-common/.prettierrc | 7 + packages/eui-theme-common/.stylelintrc.js | 163 ++++++++ packages/eui-theme-common/LICENSE.txt | 6 + packages/eui-theme-common/README.md | 11 + packages/eui-theme-common/babel.config.js | 6 + packages/eui-theme-common/jest.config.js | 7 + packages/eui-theme-common/package.json | 78 ++++ .../require_license_header.js | 132 ++++++ .../require_license_header.test.js | 177 ++++++++ .../src/global_styling/functions/_colors.scss | 138 ++++++ .../src/global_styling/functions/_index.scss | 5 + .../src/global_styling/functions/_math.scss | 1 + .../global_styling/functions/_math_pow.scss | 82 ++++ .../src/global_styling/functions/index.ts | 9 + .../src/global_styling/functions/size.ts | 26 ++ .../src/global_styling/index.scss | 12 + .../src/global_styling/index.ts | 11 + .../src/global_styling/mixins/_button.scss | 149 +++++++ .../src/global_styling/mixins/_form.scss | 273 ++++++++++++ .../src/global_styling/mixins/_helpers.scss | 117 ++++++ .../src/global_styling/mixins/_index.scss | 14 + .../src/global_styling/mixins/_link.scss | 11 + .../src/global_styling/mixins/_loading.scss | 6 + .../src/global_styling/mixins/_panel.scss | 55 +++ .../src/global_styling/mixins/_range.scss | 62 +++ .../global_styling/mixins/_responsive.scss | 44 ++ .../src/global_styling/mixins/_shadow.scss | 100 +++++ .../src/global_styling/mixins/_size.scss | 4 + .../src/global_styling/mixins/_states.scss | 50 +++ .../src/global_styling/mixins/_tool_tip.scss | 25 ++ .../global_styling/mixins/_typography.scss | 167 ++++++++ .../src/global_styling/types.ts | 106 +++++ .../global_styling/variables/_animations.scss | 13 + .../global_styling/variables/_borders.scss | 11 + .../global_styling/variables/_buttons.scss | 18 + .../global_styling/variables/_colors_vis.scss | 72 ++++ .../global_styling/variables/_colors_vis.ts | 62 +++ .../variables/_font_weight.scss | 10 + .../src/global_styling/variables/_form.scss | 21 + .../src/global_styling/variables/_index.scss | 23 + .../global_styling/variables/_responsive.scss | 9 + .../global_styling/variables/_shadows.scss | 2 + .../src/global_styling/variables/_size.scss | 13 + .../src/global_styling/variables/_states.scss | 14 + .../global_styling/variables/_typography.scss | 75 ++++ .../global_styling/variables/_z_index.scss | 34 ++ .../global_styling/variables/animations.ts | 66 +++ .../src/global_styling/variables/borders.ts | 74 ++++ .../global_styling/variables/breakpoint.ts | 28 ++ .../src/global_styling/variables/colors.ts | 156 +++++++ .../src/global_styling/variables/index.ts | 18 + .../src/global_styling/variables/levels.ts | 60 +++ .../src/global_styling/variables/shadow.ts | 28 ++ .../src/global_styling/variables/size.ts | 47 +++ .../src/global_styling/variables/states.ts | 33 ++ .../global_styling/variables/typography.ts | 146 +++++++ packages/eui-theme-common/src/index.ts | 12 + packages/eui-theme-common/src/types.ts | 56 +++ .../src}/utils.test.ts | 0 packages/eui-theme-common/src/utils.ts | 392 ++++++++++++++++++ packages/eui-theme-common/tsconfig.cjs.json | 29 ++ packages/eui-theme-common/tsconfig.json | 28 ++ packages/eui-theme-common/tsconfig.types.json | 13 + packages/eui/.storybook/decorator.tsx | 67 ++- packages/eui/.storybook/preview.tsx | 15 +- packages/eui/package.json | 9 +- packages/eui/scripts/compile-i18n-strings.js | 26 ++ packages/eui/scripts/deploy/build_docs | 2 +- .../guide_theme_selector.tsx | 9 +- .../components/with_theme/theme_context.tsx | 27 +- packages/eui/src-docs/src/index.js | 16 +- packages/eui/src-docs/src/theme_new_dark.scss | 7 + .../eui/src-docs/src/theme_new_light.scss | 7 + .../eui/src-docs/src/views/app_context.js | 10 +- packages/eui/src/components/common.ts | 49 +-- .../src/global_styling/functions/_index.scss | 6 +- .../eui/src/global_styling/functions/size.ts | 17 +- packages/eui/src/global_styling/index.scss | 11 +- .../global_styling/variables/_animations.scss | 9 +- .../global_styling/variables/_borders.scss | 10 +- .../global_styling/variables/_buttons.scss | 19 +- .../global_styling/variables/_colors_vis.scss | 71 +--- .../global_styling/variables/_colors_vis.ts | 55 +-- .../variables/_font_weight.scss | 8 +- .../src/global_styling/variables/_form.scss | 23 +- .../global_styling/variables/_responsive.scss | 10 +- .../global_styling/variables/_shadows.scss | 2 +- .../src/global_styling/variables/_size.scss | 14 +- .../src/global_styling/variables/_states.scss | 15 +- .../global_styling/variables/_typography.scss | 76 +--- .../global_styling/variables/_z_index.scss | 34 +- .../global_styling/variables/animations.ts | 69 +-- .../src/global_styling/variables/borders.ts | 74 +--- .../global_styling/variables/breakpoint.ts | 25 +- .../src/global_styling/variables/colors.ts | 161 +------ .../src/global_styling/variables/levels.ts | 57 +-- .../src/global_styling/variables/shadow.ts | 26 +- .../eui/src/global_styling/variables/size.ts | 45 +- .../src/global_styling/variables/states.ts | 26 +- .../global_styling/variables/typography.ts | 152 +------ packages/eui/src/services/theme/provider.tsx | 13 + packages/eui/src/services/theme/types.ts | 116 +----- packages/eui/src/services/theme/utils.ts | 384 +---------------- packages/eui/src/themes/index.ts | 6 +- packages/eui/src/themes/themes.ts | 11 + packages/website/package.json | 1 + .../components/homepage/highlights/index.tsx | 6 - yarn.lock | 160 ++++--- 154 files changed, 5425 insertions(+), 1570 deletions(-) create mode 100644 packages/docusaurus-theme/src/components/theme_switcher/index.tsx create mode 100644 packages/eui-theme-borealis/.eslintignore create mode 100644 packages/eui-theme-borealis/.eslintplugin.js create mode 100644 packages/eui-theme-borealis/.eslintrc.js create mode 100644 packages/eui-theme-borealis/.gitignore create mode 100644 packages/eui-theme-borealis/.prettierrc create mode 100644 packages/eui-theme-borealis/.stylelintrc.js create mode 100644 packages/eui-theme-borealis/LICENSE.txt create mode 100644 packages/eui-theme-borealis/README.md create mode 100644 packages/eui-theme-borealis/package.json create mode 100644 packages/eui-theme-borealis/src/index.ts create mode 100644 packages/eui-theme-borealis/src/theme_dark.scss create mode 100644 packages/eui-theme-borealis/src/theme_light.scss create mode 100644 packages/eui-theme-borealis/src/variables/_animation.ts create mode 100644 packages/eui-theme-borealis/src/variables/_borders.ts create mode 100644 packages/eui-theme-borealis/src/variables/_breakpoint.ts create mode 100644 packages/eui-theme-borealis/src/variables/_buttons.scss create mode 100644 packages/eui-theme-borealis/src/variables/_colors.ts create mode 100644 packages/eui-theme-borealis/src/variables/_colors_dark.scss create mode 100644 packages/eui-theme-borealis/src/variables/_colors_dark.ts create mode 100644 packages/eui-theme-borealis/src/variables/_colors_light.scss create mode 100644 packages/eui-theme-borealis/src/variables/_colors_light.ts create mode 100644 packages/eui-theme-borealis/src/variables/_index.scss create mode 100644 packages/eui-theme-borealis/src/variables/_levels.ts create mode 100644 packages/eui-theme-borealis/src/variables/_page.scss create mode 100644 packages/eui-theme-borealis/src/variables/_size.ts create mode 100644 packages/eui-theme-borealis/src/variables/_states.scss create mode 100644 packages/eui-theme-borealis/src/variables/_states.ts create mode 100644 packages/eui-theme-borealis/src/variables/_typography.scss create mode 100644 packages/eui-theme-borealis/src/variables/_typography.ts create mode 100644 packages/eui-theme-borealis/tsconfig.json create mode 100644 packages/eui-theme-common/.babelrc.js create mode 100644 packages/eui-theme-common/.eslintignore create mode 100644 packages/eui-theme-common/.eslintplugin.js create mode 100644 packages/eui-theme-common/.eslintrc.js create mode 100644 packages/eui-theme-common/.gitignore create mode 100644 packages/eui-theme-common/.prettierrc create mode 100644 packages/eui-theme-common/.stylelintrc.js create mode 100644 packages/eui-theme-common/LICENSE.txt create mode 100644 packages/eui-theme-common/README.md create mode 100644 packages/eui-theme-common/babel.config.js create mode 100644 packages/eui-theme-common/jest.config.js create mode 100644 packages/eui-theme-common/package.json create mode 100644 packages/eui-theme-common/scripts/eslint-plugin-local/require_license_header.js create mode 100644 packages/eui-theme-common/scripts/eslint-plugin-local/require_license_header.test.js create mode 100644 packages/eui-theme-common/src/global_styling/functions/_colors.scss create mode 100644 packages/eui-theme-common/src/global_styling/functions/_index.scss create mode 100644 packages/eui-theme-common/src/global_styling/functions/_math.scss create mode 100644 packages/eui-theme-common/src/global_styling/functions/_math_pow.scss create mode 100644 packages/eui-theme-common/src/global_styling/functions/index.ts create mode 100644 packages/eui-theme-common/src/global_styling/functions/size.ts create mode 100644 packages/eui-theme-common/src/global_styling/index.scss create mode 100644 packages/eui-theme-common/src/global_styling/index.ts create mode 100644 packages/eui-theme-common/src/global_styling/mixins/_button.scss create mode 100644 packages/eui-theme-common/src/global_styling/mixins/_form.scss create mode 100644 packages/eui-theme-common/src/global_styling/mixins/_helpers.scss create mode 100644 packages/eui-theme-common/src/global_styling/mixins/_index.scss create mode 100644 packages/eui-theme-common/src/global_styling/mixins/_link.scss create mode 100644 packages/eui-theme-common/src/global_styling/mixins/_loading.scss create mode 100644 packages/eui-theme-common/src/global_styling/mixins/_panel.scss create mode 100644 packages/eui-theme-common/src/global_styling/mixins/_range.scss create mode 100644 packages/eui-theme-common/src/global_styling/mixins/_responsive.scss create mode 100644 packages/eui-theme-common/src/global_styling/mixins/_shadow.scss create mode 100644 packages/eui-theme-common/src/global_styling/mixins/_size.scss create mode 100644 packages/eui-theme-common/src/global_styling/mixins/_states.scss create mode 100644 packages/eui-theme-common/src/global_styling/mixins/_tool_tip.scss create mode 100644 packages/eui-theme-common/src/global_styling/mixins/_typography.scss create mode 100644 packages/eui-theme-common/src/global_styling/types.ts create mode 100644 packages/eui-theme-common/src/global_styling/variables/_animations.scss create mode 100644 packages/eui-theme-common/src/global_styling/variables/_borders.scss create mode 100644 packages/eui-theme-common/src/global_styling/variables/_buttons.scss create mode 100644 packages/eui-theme-common/src/global_styling/variables/_colors_vis.scss create mode 100644 packages/eui-theme-common/src/global_styling/variables/_colors_vis.ts create mode 100644 packages/eui-theme-common/src/global_styling/variables/_font_weight.scss create mode 100644 packages/eui-theme-common/src/global_styling/variables/_form.scss create mode 100644 packages/eui-theme-common/src/global_styling/variables/_index.scss create mode 100644 packages/eui-theme-common/src/global_styling/variables/_responsive.scss create mode 100644 packages/eui-theme-common/src/global_styling/variables/_shadows.scss create mode 100644 packages/eui-theme-common/src/global_styling/variables/_size.scss create mode 100644 packages/eui-theme-common/src/global_styling/variables/_states.scss create mode 100644 packages/eui-theme-common/src/global_styling/variables/_typography.scss create mode 100644 packages/eui-theme-common/src/global_styling/variables/_z_index.scss create mode 100644 packages/eui-theme-common/src/global_styling/variables/animations.ts create mode 100644 packages/eui-theme-common/src/global_styling/variables/borders.ts create mode 100644 packages/eui-theme-common/src/global_styling/variables/breakpoint.ts create mode 100644 packages/eui-theme-common/src/global_styling/variables/colors.ts create mode 100644 packages/eui-theme-common/src/global_styling/variables/index.ts create mode 100644 packages/eui-theme-common/src/global_styling/variables/levels.ts create mode 100644 packages/eui-theme-common/src/global_styling/variables/shadow.ts create mode 100644 packages/eui-theme-common/src/global_styling/variables/size.ts create mode 100644 packages/eui-theme-common/src/global_styling/variables/states.ts create mode 100644 packages/eui-theme-common/src/global_styling/variables/typography.ts create mode 100644 packages/eui-theme-common/src/index.ts create mode 100644 packages/eui-theme-common/src/types.ts rename packages/{eui/src/services/theme => eui-theme-common/src}/utils.test.ts (100%) create mode 100644 packages/eui-theme-common/src/utils.ts create mode 100644 packages/eui-theme-common/tsconfig.cjs.json create mode 100644 packages/eui-theme-common/tsconfig.json create mode 100644 packages/eui-theme-common/tsconfig.types.json create mode 100644 packages/eui/scripts/compile-i18n-strings.js create mode 100644 packages/eui/src-docs/src/theme_new_dark.scss create mode 100644 packages/eui/src-docs/src/theme_new_light.scss diff --git a/.buildkite/scripts/pipelines/pipeline_deploy_new_docs.sh b/.buildkite/scripts/pipelines/pipeline_deploy_new_docs.sh index ebf6a66e8a1..df2598dce0b 100644 --- a/.buildkite/scripts/pipelines/pipeline_deploy_new_docs.sh +++ b/.buildkite/scripts/pipelines/pipeline_deploy_new_docs.sh @@ -33,7 +33,7 @@ analytics_vault="secret/ci/elastic-eui/analytics" export DOCS_BASE_URL="/${bucket_directory}" export DOCS_GOOGLE_TAG_MANAGER_ID="$(retry 5 vault read -field=google_tag_manager_id "${analytics_vault}")" -yarn workspaces foreach -Rpt --from @elastic/eui-website run build +yarn workspace @elastic/eui-website run build:workspaces echo "+++ Configuring environment for website deployment" diff --git a/.buildkite/scripts/pipelines/pipeline_test.sh b/.buildkite/scripts/pipelines/pipeline_test.sh index 8ec1d30c660..220e5313705 100644 --- a/.buildkite/scripts/pipelines/pipeline_test.sh +++ b/.buildkite/scripts/pipelines/pipeline_test.sh @@ -29,53 +29,53 @@ COMMAND="" case $TEST_TYPE in lint) echo "[TASK]: Running linters" - COMMAND="/opt/yarn*/bin/yarn --cwd packages/eui && yarn --cwd packages/eui lint" + COMMAND="/opt/yarn*/bin/yarn --cwd packages/eui && yarn --cwd packages/eui build:workspaces && yarn --cwd packages/eui lint" ;; unit:ts) echo "[TASK]: Running .ts and .js unit tests" - COMMAND="/opt/yarn*/bin/yarn --cwd packages/eui && yarn --cwd packages/eui test-unit --node-options=--max_old_space_size=2048 --testMatch=non-react" + COMMAND="/opt/yarn*/bin/yarn --cwd packages/eui && yarn --cwd packages/eui build:workspaces && yarn --cwd packages/eui test-unit --node-options=--max_old_space_size=2048 --testMatch=non-react" ;; unit:tsx:16) echo "[TASK]: Running Jest .tsx tests against React 16" DOCKER_OPTIONS+=(--env BUILDKITE_ANALYTICS_TOKEN="$(retry 5 vault read -field=jest_token_react16 "${buildkite_analytics_vault}")") - COMMAND="/opt/yarn*/bin/yarn --cwd packages/eui && yarn --cwd packages/eui test-unit --node-options=--max_old_space_size=2048 --react-version=16 --testMatch=react" + COMMAND="/opt/yarn*/bin/yarn --cwd packages/eui && yarn --cwd packages/eui build:workspaces && yarn --cwd packages/eui test-unit --node-options=--max_old_space_size=2048 --react-version=16 --testMatch=react" ;; unit:tsx:17) echo "[TASK]: Running Jest .tsx tests against React 17" DOCKER_OPTIONS+=(--env BUILDKITE_ANALYTICS_TOKEN="$(retry 5 vault read -field=jest_token_react17 "${buildkite_analytics_vault}")") - COMMAND="/opt/yarn*/bin/yarn --cwd packages/eui && yarn --cwd packages/eui test-unit --node-options=--max_old_space_size=2048 --react-version=17 --testMatch=react" + COMMAND="/opt/yarn*/bin/yarn --cwd packages/eui && yarn --cwd packages/eui build:workspaces && yarn --cwd packages/eui test-unit --node-options=--max_old_space_size=2048 --react-version=17 --testMatch=react" ;; unit:tsx) echo "[TASK]: Running Jest .tsx tests against React 18" DOCKER_OPTIONS+=(--env BUILDKITE_ANALYTICS_TOKEN="$(retry 5 vault read -field=jest_token_react18 "${buildkite_analytics_vault}")") - COMMAND="/opt/yarn*/bin/yarn --cwd packages/eui && yarn --cwd packages/eui test-unit --node-options=--max_old_space_size=2048 --testMatch=react" + COMMAND="/opt/yarn*/bin/yarn --cwd packages/eui && yarn --cwd packages/eui build:workspaces && yarn --cwd packages/eui test-unit --node-options=--max_old_space_size=2048 --testMatch=react" ;; cypress:16) echo "[TASK]: Running Cypress tests against React 16" DOCKER_OPTIONS+=(--env BUILDKITE_ANALYTICS_TOKEN="$(retry 5 vault read -field=cypress_token_react16 "${buildkite_analytics_vault}")") - COMMAND="/opt/yarn*/bin/yarn --cwd packages/eui && yarn --cwd packages/eui cypress install && yarn --cwd packages/eui test-cypress --node-options=--max_old_space_size=2048 --react-version=16" + COMMAND="/opt/yarn*/bin/yarn --cwd packages/eui && yarn --cwd packages/eui build:workspaces && yarn --cwd packages/eui cypress install && yarn --cwd packages/eui test-cypress --node-options=--max_old_space_size=2048 --react-version=16" ;; cypress:17) echo "[TASK]: Running Cypress tests against React 17" DOCKER_OPTIONS+=(--env BUILDKITE_ANALYTICS_TOKEN="$(retry 5 vault read -field=cypress_token_react17 "${buildkite_analytics_vault}")") - COMMAND="/opt/yarn*/bin/yarn --cwd packages/eui && yarn --cwd packages/eui cypress install && yarn --cwd packages/eui test-cypress --node-options=--max_old_space_size=2048 --react-version=17" + COMMAND="/opt/yarn*/bin/yarn --cwd packages/eui && yarn --cwd packages/eui build:workspaces && yarn --cwd packages/eui cypress install && yarn --cwd packages/eui test-cypress --node-options=--max_old_space_size=2048 --react-version=17" ;; cypress:18) echo "[TASK]: Running Cypress tests against React 18" DOCKER_OPTIONS+=(--env BUILDKITE_ANALYTICS_TOKEN="$(retry 5 vault read -field=cypress_token_react18 "${buildkite_analytics_vault}")") - COMMAND="/opt/yarn*/bin/yarn --cwd packages/eui && yarn --cwd packages/eui cypress install && yarn --cwd packages/eui test-cypress --node-options=--max_old_space_size=2048" + COMMAND="/opt/yarn*/bin/yarn --cwd packages/eui && yarn --cwd packages/eui build:workspaces && yarn --cwd packages/eui cypress install && yarn --cwd packages/eui test-cypress --node-options=--max_old_space_size=2048" ;; cypress:a11y) echo "[TASK]: Running Cypress accessibility tests against React 18" - COMMAND="/opt/yarn*/bin/yarn --cwd packages/eui && yarn --cwd packages/eui cypress install && yarn --cwd packages/eui run test-cypress-a11y --node-options=--max_old_space_size=2048" + COMMAND="/opt/yarn*/bin/yarn --cwd packages/eui && yarn --cwd packages/eui build:workspaces && yarn --cwd packages/eui cypress install && yarn --cwd packages/eui run test-cypress-a11y --node-options=--max_old_space_size=2048" ;; *) diff --git a/.buildkite/scripts/release/step_build.sh b/.buildkite/scripts/release/step_build.sh index 3a9251b6e28..01d96bf62d8 100755 --- a/.buildkite/scripts/release/step_build.sh +++ b/.buildkite/scripts/release/step_build.sh @@ -10,6 +10,7 @@ echo "+++ :yarn: Installing dependencies" yarn echo "+++ :yarn: Building @elastic/eui" +yarn build:workspaces yarn build echo "+++ :yarn: Built @elastic/eui" diff --git a/packages/docusaurus-theme/package.json b/packages/docusaurus-theme/package.json index 4765cf70a60..7f0eeef3a8c 100644 --- a/packages/docusaurus-theme/package.json +++ b/packages/docusaurus-theme/package.json @@ -34,8 +34,9 @@ "@docusaurus/theme-common": "^3.5.2", "@docusaurus/utils-validation": "^3.5.2", "@elastic/datemath": "^5.0.3", - "@elastic/eui": "97.2.0", + "@elastic/eui": "workspace:^", "@elastic/eui-docgen": "workspace:^", + "@elastic/eui-theme-borealis": "workspace:^", "@emotion/css": "^11.11.2", "@emotion/react": "^11.11.4", "@types/react-window": "^1.8.8", diff --git a/packages/docusaurus-theme/src/components/navbar_item/index.tsx b/packages/docusaurus-theme/src/components/navbar_item/index.tsx index 130047a50e8..f4bacf65cfd 100644 --- a/packages/docusaurus-theme/src/components/navbar_item/index.tsx +++ b/packages/docusaurus-theme/src/components/navbar_item/index.tsx @@ -91,9 +91,9 @@ export const NavbarItem = (props: Props) => { } = props; const isBrowser = useIsBrowser(); - const { theme } = useContext(AppThemeContext); + const { colorMode } = useContext(AppThemeContext); - const isDarkMode = theme === 'dark'; + const isDarkMode = colorMode === 'dark'; const styles = useEuiMemoizedStyles(getStyles); const cssStyles = [ diff --git a/packages/docusaurus-theme/src/components/theme_context/index.tsx b/packages/docusaurus-theme/src/components/theme_context/index.tsx index d8a394fc8d5..d1fe2208f15 100644 --- a/packages/docusaurus-theme/src/components/theme_context/index.tsx +++ b/packages/docusaurus-theme/src/components/theme_context/index.tsx @@ -5,17 +5,39 @@ import { useState, } from 'react'; import useIsBrowser from '@docusaurus/useIsBrowser'; -import { EUI_THEMES, EuiProvider, EuiThemeColorMode } from '@elastic/eui'; +import { + EuiProvider, + EuiThemeAmsterdam, + EuiThemeColorMode, +} from '@elastic/eui'; +import { EuiThemeBorealis } from '@elastic/eui-theme-borealis'; import { EuiThemeOverrides } from './theme_overrides'; -const EUI_THEME_NAMES = EUI_THEMES.map( - ({ value }) => value -) as EuiThemeColorMode[]; +const EXPERIMENTAL_THEMES = [ + { + text: 'Borealis', + value: EuiThemeBorealis.key, + provider: EuiThemeBorealis, + }, +]; + +export const AVAILABLE_THEMES = [ + { + text: 'Amsterdam', + value: EuiThemeAmsterdam.key, + provider: EuiThemeAmsterdam, + }, + ...EXPERIMENTAL_THEMES, +]; + +const EUI_COLOR_MODES = ['light', 'dark'] as EuiThemeColorMode[]; const defaultState = { - theme: EUI_THEME_NAMES[0] as EuiThemeColorMode, - changeTheme: (themeValue: EuiThemeColorMode) => {}, + colorMode: EUI_COLOR_MODES[0] as EuiThemeColorMode, + changeColorMode: (colorMode: EuiThemeColorMode) => {}, + theme: AVAILABLE_THEMES[0]!, + changeTheme: (themeValue: string) => {}, }; export const AppThemeContext = createContext(defaultState); @@ -24,25 +46,39 @@ export const AppThemeProvider: FunctionComponent = ({ children, }) => { const isBrowser = useIsBrowser(); - const [theme, setTheme] = useState(() => { + const [colorMode, setColorMode] = useState(() => { if (isBrowser) { - return localStorage.getItem('theme') as EuiThemeColorMode ?? defaultState.theme; + return ( + (localStorage.getItem('theme') as EuiThemeColorMode) ?? + defaultState.colorMode + ); } - return defaultState.theme; + return defaultState.colorMode; }); + const [theme, setTheme] = useState(defaultState.theme); + + const handleChangeTheme = (themeValue: string) => { + const themeObj = AVAILABLE_THEMES.find((t) => t.value === themeValue); + + setTheme((currentTheme) => themeObj ?? currentTheme); + }; + return ( {children} diff --git a/packages/docusaurus-theme/src/components/theme_switcher/index.tsx b/packages/docusaurus-theme/src/components/theme_switcher/index.tsx new file mode 100644 index 00000000000..eeb4a1706d3 --- /dev/null +++ b/packages/docusaurus-theme/src/components/theme_switcher/index.tsx @@ -0,0 +1,94 @@ +import { useContext, useEffect, useState } from 'react'; +import { css } from '@emotion/react'; +import { + EuiAvatar, + EuiButtonEmpty, + euiFocusRing, + EuiListGroup, + EuiListGroupItem, + EuiPopover, + useEuiMemoizedStyles, + useEuiTheme, + UseEuiTheme, +} from '@elastic/eui'; + +import { AppThemeContext, AVAILABLE_THEMES } from '../theme_context'; + +const getStyles = (euiThemeContext: UseEuiTheme) => { + const { euiTheme } = euiThemeContext; + + return { + button: css` + padding: 0; + `, + listItem: css` + .euiListGroupItem__button:focus-visible { + // overriding the global "outset" style to ensure the focus style is not cut off + ${euiFocusRing(euiThemeContext, 'inset', { + color: euiTheme.colors.primary, + })}; + } + `, + }; +}; + +export const ThemeSwitcher = () => { + const { euiTheme } = useEuiTheme(); + const [currentTheme, setCurrentTheme] = useState( + AVAILABLE_THEMES[0]?.value ?? '' + ); + const [isPopoverOpen, setPopoverOpen] = useState(false); + const { theme, changeTheme } = useContext(AppThemeContext); + + useEffect(() => { + changeTheme(currentTheme); + }, [currentTheme]); + + const styles = useEuiMemoizedStyles(getStyles); + + const button = ( + setPopoverOpen((isOpen) => !isOpen)} + aria-label={`${theme.text} theme`} + > + + + ); + + return ( + setPopoverOpen(false)} + button={button} + panelPaddingSize="xs" + repositionOnScroll + aria-label="EUI theme list" + > + + {AVAILABLE_THEMES && + AVAILABLE_THEMES.map((theme) => { + const isCurrentTheme = currentTheme === theme.value; + + const handleOnClick = () => { + setCurrentTheme(theme.value); + }; + + return ( + + ); + })} + + + ); +}; diff --git a/packages/docusaurus-theme/src/theme/ColorModeToggle/index.tsx b/packages/docusaurus-theme/src/theme/ColorModeToggle/index.tsx index aaefb2441bc..970e11e0397 100644 --- a/packages/docusaurus-theme/src/theme/ColorModeToggle/index.tsx +++ b/packages/docusaurus-theme/src/theme/ColorModeToggle/index.tsx @@ -17,20 +17,20 @@ function ColorModeToggle({ onChange, ...rest }: WrappedProps): JSX.Element { - const { theme, changeTheme } = useContext(AppThemeContext); + const { colorMode, changeColorMode } = useContext(AppThemeContext); useEffect(() => { - changeTheme(value); + changeColorMode(value); }, []); - const handleOnChange = (themeName: EuiThemeColorMode) => { - changeTheme(themeName); - onChange?.(themeName); + const handleOnChange = (colorMode: EuiThemeColorMode) => { + changeColorMode(colorMode); + onChange?.(colorMode); }; return ( diff --git a/packages/docusaurus-theme/src/theme/Logo/index.tsx b/packages/docusaurus-theme/src/theme/Logo/index.tsx index 3f64a7bd951..ff434592173 100644 --- a/packages/docusaurus-theme/src/theme/Logo/index.tsx +++ b/packages/docusaurus-theme/src/theme/Logo/index.tsx @@ -62,8 +62,8 @@ function LogoThemedImage({ alt: string; imageClassName?: string; }) { - const { theme } = useContext(AppThemeContext); - const isDarkMode = theme === 'dark'; + const { colorMode } = useContext(AppThemeContext); + const isDarkMode = colorMode === 'dark'; const styles = useEuiMemoizedStyles(getStyles); diff --git a/packages/docusaurus-theme/src/theme/Navbar/Content/index.tsx b/packages/docusaurus-theme/src/theme/Navbar/Content/index.tsx index 53b4f771ead..5fcac599372 100644 --- a/packages/docusaurus-theme/src/theme/Navbar/Content/index.tsx +++ b/packages/docusaurus-theme/src/theme/Navbar/Content/index.tsx @@ -15,7 +15,13 @@ import SearchBar from '@theme-original/SearchBar'; import NavbarMobileSidebarToggle from '@theme-original/Navbar/MobileSidebar/Toggle'; import NavbarLogo from '@theme-original/Navbar/Logo'; import NavbarSearch from '@theme-original/Navbar/Search'; -import { euiFocusRing, useEuiMemoizedStyles, UseEuiTheme } from '@elastic/eui'; +import { + euiFocusRing, + euiTextTruncate, + useEuiMemoizedStyles, + UseEuiTheme, + isExperimentalThemeEnabled, +} from '@elastic/eui'; import { euiFormControlText, euiFormVariables, @@ -24,6 +30,7 @@ import { import euiVersions from '@site/static/versions.json'; import { VersionSwitcher } from '../../../components/version_switcher'; +import { ThemeSwitcher } from '../../../components/theme_switcher'; const DOCS_PATH = '/docs'; @@ -67,6 +74,10 @@ const getStyles = (euiThemeContext: UseEuiTheme) => { @media (min-width: 997px) { gap: ${euiTheme.size.l}; } + + .navbar__link { + ${euiTextTruncate()} + } `, navbarItemsRight: css` gap: ${euiTheme.size.s}; @@ -125,6 +136,11 @@ const getStyles = (euiThemeContext: UseEuiTheme) => { display: none; } `, + themeSwitcher: css` + @media (max-width: 996px) { + display: none; + } + `, }; }; @@ -218,6 +234,12 @@ export default function NavbarContent(): JSX.Element { )} + + {isBrowser && isExperimentalThemeEnabled() && ( +
+ +
+ )} } /> diff --git a/packages/docusaurus-theme/src/theme/Navbar/MobileSidebar/Header/index.tsx b/packages/docusaurus-theme/src/theme/Navbar/MobileSidebar/Header/index.tsx index 08791e527a8..0e0daa13ed1 100644 --- a/packages/docusaurus-theme/src/theme/Navbar/MobileSidebar/Header/index.tsx +++ b/packages/docusaurus-theme/src/theme/Navbar/MobileSidebar/Header/index.tsx @@ -9,6 +9,8 @@ import useIsBrowser from '@docusaurus/useIsBrowser'; import euiVersions from '@site/static/versions.json'; import { VersionSwitcher } from '../../../../components/version_switcher'; +import { ThemeSwitcher } from '../../../../components/theme_switcher'; +import { isExperimentalThemeEnabled } from '@elastic/eui/lib/themes/themes'; const getStyles = ({ euiTheme }: UseEuiTheme) => ({ sidebar: css` @@ -64,6 +66,7 @@ export default function NavbarMobileSidebarHeader(): JSX.Element {
{isBrowser && versions && } + {isBrowser && isExperimentalThemeEnabled() && }
diff --git a/packages/eui-theme-borealis/.eslintignore b/packages/eui-theme-borealis/.eslintignore new file mode 100644 index 00000000000..4874b17b0b8 --- /dev/null +++ b/packages/eui-theme-borealis/.eslintignore @@ -0,0 +1,9 @@ +dist +node_modules +lib +types +**/*.d.ts +package.json +scripts +.eslintrc.js +babel.config.js diff --git a/packages/eui-theme-borealis/.eslintplugin.js b/packages/eui-theme-borealis/.eslintplugin.js new file mode 100644 index 00000000000..88d38f7aa99 --- /dev/null +++ b/packages/eui-theme-borealis/.eslintplugin.js @@ -0,0 +1,3 @@ +exports.rules = { + 'require-license-header': require('@elastic/eui-theme-common/scripts/eslint-plugin-local/require_license_header.js'), +}; diff --git a/packages/eui-theme-borealis/.eslintrc.js b/packages/eui-theme-borealis/.eslintrc.js new file mode 100644 index 00000000000..e33853c0255 --- /dev/null +++ b/packages/eui-theme-borealis/.eslintrc.js @@ -0,0 +1,114 @@ +const SSPL_ELASTIC_2_0_LICENSE_HEADER = ` +/* + * 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. + */ +`; + +module.exports = { + parser: '@typescript-eslint/parser', + parserOptions: { + project: ['./tsconfig.json'], + ecmaFeatures: { + jsx: true, + }, + }, + settings: { + 'import/resolver': { + node: { + extensions: ['.ts', '.tsx', '.js', '.json'], + }, + }, + }, + extends: [ + 'plugin:@typescript-eslint/recommended', + // Prettier options need to come last, in order to override other style rules + 'plugin:prettier/recommended', + ], + plugins: ['local', 'import'], + rules: { + 'block-scoped-var': 'error', + camelcase: 'off', + 'dot-notation': ['error', { allowKeywords: true }], + eqeqeq: ['error', 'always', { null: 'ignore' }], + 'guard-for-in': 'error', + 'new-cap': ['error', { capIsNewExceptions: ['Private'] }], + 'no-caller': 'error', + 'no-const-assign': 'error', + 'no-debugger': 'error', + 'no-empty': ['error', { allowEmptyCatch: true }], + 'no-eval': 'error', + 'no-extend-native': 'error', + 'no-global-assign': 'error', + 'no-loop-func': 'error', + 'no-restricted-globals': ['error', 'context'], + 'no-script-url': 'error', + 'no-sequences': 'error', + 'no-var': 'error', + 'no-with': 'error', + 'prefer-const': 'error', + 'prefer-template': 'error', + strict: ['error', 'never'], + 'valid-typeof': 'error', + + 'local/require-license-header': [ + 'warn', + { + license: SSPL_ELASTIC_2_0_LICENSE_HEADER, + }, + ], + + 'import/no-unresolved': ['error', { amd: true, commonjs: true }], + 'import/namespace': 'error', + 'import/default': 'error', + 'import/export': 'error', + 'import/no-named-as-default': 'error', + 'import/no-named-as-default-member': 'error', + 'import/no-duplicates': 'error', + + '@typescript-eslint/array-type': ['error', { default: 'array-simple' }], + '@typescript-eslint/ban-types': 'off', + '@typescript-eslint/explicit-function-return-type': 'off', + '@typescript-eslint/explicit-member-accessibility': 'off', + '@typescript-eslint/indent': 'off', + '@typescript-eslint/ban-tslint-comment': 'error', + '@typescript-eslint/no-empty-interface': 'off', + '@typescript-eslint/no-explicit-any': 'off', + '@typescript-eslint/no-non-null-assertion': 'off', + '@typescript-eslint/no-parameter-properties': 'off', + '@typescript-eslint/no-triple-slash-reference': 'off', + '@typescript-eslint/no-unused-vars': [ + 'error', + { argsIgnorePattern: '^_', ignoreRestSiblings: true }, + ], + '@typescript-eslint/no-use-before-define': 'off', + '@typescript-eslint/no-empty-function': 'off', + // It"s all very well saying that some types are trivially inferrable, + // but being explicit is still clearer. + '@typescript-eslint/no-inferrable-types': 'off', + '@typescript-eslint/explicit-module-boundary-types': 'off', + '@typescript-eslint/naming-convention': 'off', + '@typescript-eslint/ban-ts-comment': [ + 'error', + { + 'ts-ignore': 'allow-with-description', + 'ts-expect-error': 'allow-with-description', + }, + ], + '@typescript-eslint/consistent-type-exports': [ + 'error', + { fixMixedExportsWithInlineTypeSpecifier: false }, + ], + }, + overrides: [ + { + files: ['*.d.ts'], + rules: { + 'react/prefer-es6-class': 'off', + }, + }, + ], +}; diff --git a/packages/eui-theme-borealis/.gitignore b/packages/eui-theme-borealis/.gitignore new file mode 100644 index 00000000000..4450fe8d868 --- /dev/null +++ b/packages/eui-theme-borealis/.gitignore @@ -0,0 +1,11 @@ +# Dependencies +/node_modules + +# Production +/lib + +yarn-debug.log* +yarn-error.log* + +# Build-related files +.eslintcache \ No newline at end of file diff --git a/packages/eui-theme-borealis/.prettierrc b/packages/eui-theme-borealis/.prettierrc new file mode 100644 index 00000000000..b2f0fa8f00e --- /dev/null +++ b/packages/eui-theme-borealis/.prettierrc @@ -0,0 +1,7 @@ +{ + "parser": "typescript", + "printWidth": 80, + "semi": true, + "singleQuote": true, + "trailingComma": "es5" +} diff --git a/packages/eui-theme-borealis/.stylelintrc.js b/packages/eui-theme-borealis/.stylelintrc.js new file mode 100644 index 00000000000..42adc41f28c --- /dev/null +++ b/packages/eui-theme-borealis/.stylelintrc.js @@ -0,0 +1,163 @@ +const camelCaseRegex = '^[a-z][\\w-]*$'; // Note: also allows `_` as part of BEM naming +const camelCaseValueRegex = '/^[a-z][\\w.]*$/'; // Note: also allows `.` for JS objects +const cssInJsVarRegex = '/\\${[a-zA-Z]+/'; + +module.exports = { + // @see https://stylelint.io/user-guide/rules + rules: { + // Enforce camelCase naming + 'selector-class-pattern': camelCaseRegex, + 'keyframes-name-pattern': camelCaseRegex, + 'custom-property-pattern': camelCaseRegex, + + // Opinionated rules + 'declaration-no-important': true, + 'max-nesting-depth': [ + 2, + { + ignore: ['blockless-at-rules', 'pseudo-classes'], + }, + ], + 'block-no-empty': true, + 'selector-no-qualifying-type': [ + true, + { + ignore: ['attribute'], // Allows input[type=search] + }, + ], + + // Non-Prettier newline rules + // Put a line-break between sections of CSS, but allow quick one-liners for legibility + 'rule-empty-line-before': [ + 'always-multi-line', + { + ignore: ['first-nested', 'after-comment'], + }, + ], + 'comment-empty-line-before': null, + 'declaration-empty-line-before': null, + + // Value preferences + 'number-max-precision': null, + // Attempt to catch/flag non-variable color values + 'color-named': 'never', + 'color-no-hex': true, + // Prefer lowercase values, except for font names and currentColor + 'value-keyword-case': [ + 'lower', + { + ignoreProperties: ['font-family', '/^\\$eui[\\w]+/'], // Allow fonts and Sass variables + ignoreKeywords: ['currentColor'], + }, + ], + 'declaration-block-no-duplicate-properties': [ + true, + { + ignore: ['consecutive-duplicates'], // We occasionally use duplicate property values for cross-browser fallbacks + }, + ], + + // TODO: It may be worth investigating and updating these rules to their more modern counterparts + 'color-function-notation': 'legacy', + 'alpha-value-notation': 'number', + + // Disable various opinionated extended stylelint rules that EUI has not previously enforced + 'no-descending-specificity': null, + 'keyframe-selector-notation': null, + 'declaration-block-no-redundant-longhand-properties': null, + }, + overrides: [ + { + // TODO: Remove Sass-specific config & rules once we're completely off Sass + files: ['**/*.scss'], + ignoreFiles: [ + 'generator-eui/**/*.scss', + 'src/global_styling/react_date_picker/**/*.scss', + 'src/themes/amsterdam/global_styling/react_date_picker/**/*.scss', + 'src/components/date_picker/react-datepicker/**/*.scss', + ], + extends: [ + 'stylelint-config-standard-scss', + 'stylelint-config-prettier-scss', + ], + // @see https://github.com/stylelint-scss/stylelint-scss#list-of-rules + rules: { + // Casing + 'scss/dollar-variable-pattern': camelCaseRegex, + 'scss/at-mixin-pattern': camelCaseRegex, + 'scss/at-function-pattern': camelCaseRegex, + 'function-name-case': [ + 'lower', + { + ignoreFunctions: [`/${camelCaseRegex}/`, 'MIN'], + }, + ], + + // Whitespace/newlines + 'scss/at-if-closing-brace-space-after': 'always-intermediate', + 'scss/operator-no-unspaced': true, + + // Formatting rules deprecated as of v15 - keep them in Sass styles just in case until end of migration + // @see https://github.com/stylelint/stylelint/blob/main/docs/user-guide/rules.md#deprecated + 'color-hex-case': 'upper', + 'string-quotes': 'single', + // 2 spaces for indentation + indentation: [2, { indentInsideParens: 'once-at-root-twice-in-block' }], + // Mimic 1tbs `} else {` brace style, like our JS + 'block-opening-brace-space-before': 'always', + 'block-closing-brace-newline-before': 'always-multi-line', + // Ensure multiple selectors on one line each + 'selector-list-comma-newline-before': 'never-multi-line', + 'selector-list-comma-newline-after': 'always', + // Trim unnecessary newlines/whitespace + 'block-closing-brace-empty-line-before': 'never', + 'max-empty-lines': 1, + 'no-eol-whitespace': true, + // Enforce spacing around various syntax symbols (colons, operators, etc.) + 'declaration-colon-space-after': 'always-single-line', + 'declaration-colon-space-before': 'never', + 'function-calc-no-unspaced-operator': true, + 'selector-combinator-space-before': 'always', + 'selector-combinator-space-after': 'always', + // Ensure trailing semicolons are always present on non-oneliners + 'declaration-block-semicolon-newline-after': 'always-multi-line', + + // Disable various opinionated extended stylelint rules that EUI has not previously enforced + 'scss/no-global-function-names': null, + 'scss/dollar-variable-empty-line-before': null, + 'scss/at-rule-conditional-no-parentheses': null, + 'scss/double-slash-comment-empty-line-before': null, + 'scss/at-if-no-null': null, + 'selector-not-notation': null, // Enforce comma notation for CSS-in-JS moving forward + }, + }, + { + files: ['**/*.styles.ts', '**/*.ts', '**/*.tsx'], + extends: ['stylelint-config-standard'], + customSyntax: 'postcss-styled-syntax', + rules: { + // Unfortunately, double slash comments must be replaced with standard CSS /* */ comments + // Otherwise we get a parsing error - see https://github.com/hudochenkov/postcss-styled-syntax#known-issues + 'no-invalid-double-slash-comments': true, + // Empty style keys should be allowed, as Emotion still uses them for generating classNames + 'no-empty-source': null, + // Don't lint casing on interpolated JS vars + 'function-name-case': ['lower', { ignoreFunctions: [cssInJsVarRegex] }], + 'function-no-unknown': [true, { ignoreFunctions: [cssInJsVarRegex] }], + 'value-keyword-case': [ + 'lower', + { + ignoreProperties: ['font-family'], + ignoreKeywords: [camelCaseValueRegex], + }, + ], + // This is set to deprecate after stylelint v16, but in the meanwhile, is helpful + // for finding extraneous semicolons after utils that already output semicolons (e.g. logicalCSS()) + 'no-extra-semicolons': true, + + // Emotion uses the `label` property to generate the output className string + 'property-no-unknown': [true, { ignoreProperties: 'label' }], + }, + }, + ], +}; diff --git a/packages/eui-theme-borealis/LICENSE.txt b/packages/eui-theme-borealis/LICENSE.txt new file mode 100644 index 00000000000..74327a8f6f3 --- /dev/null +++ b/packages/eui-theme-borealis/LICENSE.txt @@ -0,0 +1,6 @@ +Source code in this repository is covered by (i) a dual license under the Server +Side Public License, v 1 and the Elastic License 2.0 or (ii) an Apache License +2.0 compatible license or (iii) solely under the Elastic License 2.0, in each +case, as noted in the applicable header. The default throughout the repository +is a dual license under the Server Side Public License, v 1 and the Elastic +License 2.0, unless the header specifies another license. diff --git a/packages/eui-theme-borealis/README.md b/packages/eui-theme-borealis/README.md new file mode 100644 index 00000000000..cb7c237d4a2 --- /dev/null +++ b/packages/eui-theme-borealis/README.md @@ -0,0 +1,19 @@ +# EUI theme **Borealis** + +This package contains specific style tokens for the EUI theme **Borealis** which is exported as `EuiThemeBorealis`. + +## Installing dependencies + +Please run `yarn` to install dependencies: + +```shell +yarn +``` + +## Building helper packages + +Before you run scripts, it's mandatory to build local dependency packages: + +```shell +yarn workspaces foreach -Rti --from @elastic/eui-theme-borealis run build +``` \ No newline at end of file diff --git a/packages/eui-theme-borealis/package.json b/packages/eui-theme-borealis/package.json new file mode 100644 index 00000000000..d56f9924db2 --- /dev/null +++ b/packages/eui-theme-borealis/package.json @@ -0,0 +1,60 @@ +{ + "name": "@elastic/eui-theme-borealis", + "version": "0.0.1", + "description": "A visual theme for EUI", + "license": "SEE LICENSE IN LICENSE.txt", + "scripts": { + "build:workspaces": "yarn workspaces foreach -Rti --from @elastic/eui-theme-borealis --exclude @elastic/eui-theme-borealis run build", + "build": "tsc", + "build-pack": "yarn build && npm pack", + "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", + "pre-push": "yarn build:workspaces && yarn lint && yarn test" + }, + "repository": { + "type": "git", + "url": "https://github.com/elastic/eui.git", + "directory": "packages/eui-theme-borealis" + }, + "private": true, + "devDependencies": { + "@elastic/eui-theme-common": "workspace:^", + "@types/jest": "^29.5.12", + "@types/prettier": "2.7.3", + "@typescript-eslint/eslint-plugin": "^5.59.7", + "@typescript-eslint/parser": "^5.59.7", + "eslint": "^8.41.0", + "eslint-config-prettier": "^8.8.0", + "eslint-plugin-import": "^2.27.5", + "eslint-plugin-jest": "^28.5.0", + "eslint-plugin-local": "^1.0.0", + "eslint-plugin-prettier": "^4.2.1", + "jest": "^29.7.0", + "prettier": "^2.8.8", + "stylelint": "^15.7.0", + "stylelint-config-prettier-scss": "^1.0.0", + "stylelint-config-standard": "^33.0.0", + "stylelint-config-standard-scss": "^9.0.0", + "typescript": "^5.6.2" + }, + "peerDependencies": { + "@elastic/eui-theme-common": "0.0.1" + }, + "main": "lib/index.js", + "exports": { + "./lib/*": "./lib/*", + ".": { + "default": "./lib/index.js" + } + }, + "files": [ + "lib/", + "src/**/*.scss", + "README.md" + ], + "installConfig": { + "hoistingLimits": "workspaces" + } +} diff --git a/packages/eui-theme-borealis/src/index.ts b/packages/eui-theme-borealis/src/index.ts new file mode 100644 index 00000000000..1427ca8b1e9 --- /dev/null +++ b/packages/eui-theme-borealis/src/index.ts @@ -0,0 +1,37 @@ +/* + * 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 { buildTheme, EuiThemeShape } from '@elastic/eui-theme-common'; + +import { colors } from './variables/_colors'; +import { animation } from './variables/_animation'; +import { breakpoint } from './variables/_breakpoint'; +import { base, size } from './variables/_size'; +import { border } from './variables/_borders'; +import { levels } from './variables/_levels'; +import { font } from './variables/_typography'; +import { focus } from './variables/_states'; + +export const EUI_THEME_BOREALIS_KEY = 'EUI_THEME_BOREALIS'; + +export const euiThemeBorealis: EuiThemeShape = { + colors, + base, + size, + border, + font, + animation, + breakpoint, + levels, + focus, +}; + +export const EuiThemeBorealis = buildTheme( + euiThemeBorealis, + EUI_THEME_BOREALIS_KEY +); diff --git a/packages/eui-theme-borealis/src/theme_dark.scss b/packages/eui-theme-borealis/src/theme_dark.scss new file mode 100644 index 00000000000..64e6b27d3a0 --- /dev/null +++ b/packages/eui-theme-borealis/src/theme_dark.scss @@ -0,0 +1,8 @@ + +// color mode specific variables +@import './variables/colors_dark'; + + +// Global styling +@import 'node_modules/@elastic/eui-theme-common/src/global_styling/index'; +@import './variables/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 new file mode 100644 index 00000000000..29ab275fe73 --- /dev/null +++ b/packages/eui-theme-borealis/src/theme_light.scss @@ -0,0 +1,7 @@ +// color mode specific variables +@import './variables/colors_light'; + + +// Global styling +@import 'node_modules/@elastic/eui-theme-common/src/global_styling/index'; +@import './variables/index'; \ No newline at end of file diff --git a/packages/eui-theme-borealis/src/variables/_animation.ts b/packages/eui-theme-borealis/src/variables/_animation.ts new file mode 100644 index 00000000000..84933441db3 --- /dev/null +++ b/packages/eui-theme-borealis/src/variables/_animation.ts @@ -0,0 +1,31 @@ +/* + * 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 { + _EuiThemeAnimationSpeeds, + _EuiThemeAnimationEasings, + _EuiThemeAnimation, +} from '@elastic/eui-theme-common'; + +export const animation_speed: _EuiThemeAnimationSpeeds = { + extraFast: '90ms', + fast: '150ms', + normal: '250ms', + slow: '350ms', + extraSlow: '500ms', +}; + +export const animation_ease: _EuiThemeAnimationEasings = { + bounce: 'cubic-bezier(.34, 1.61, .7, 1)', + resistance: 'cubic-bezier(.694, .0482, .335, 1)', +}; + +export const animation: _EuiThemeAnimation = { + ...animation_speed, + ...animation_ease, +}; diff --git a/packages/eui-theme-borealis/src/variables/_borders.ts b/packages/eui-theme-borealis/src/variables/_borders.ts new file mode 100644 index 00000000000..35926695e77 --- /dev/null +++ b/packages/eui-theme-borealis/src/variables/_borders.ts @@ -0,0 +1,37 @@ +/* + * 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 _EuiThemeBorder, + sizeToPixel, +} from '@elastic/eui-theme-common'; + +export const border: _EuiThemeBorder = { + color: computed(([lightShade]) => lightShade, ['colors.lightShade']), + width: { + thin: '1px', + thick: '2px', + }, + radius: { + medium: computed(sizeToPixel(0.375)), + small: computed(sizeToPixel(0.25)), + }, + thin: computed( + ([width, color]) => `${width.thin} solid ${color}`, + ['border.width', 'border.color'] + ), + thick: computed( + ([width, color]) => `${width.thick} solid ${color}`, + ['border.width', 'border.color'] + ), + editable: computed( + ([width, color]) => `${width.thick} dotted ${color}`, + ['border.width', 'border.color'] + ), +}; diff --git a/packages/eui-theme-borealis/src/variables/_breakpoint.ts b/packages/eui-theme-borealis/src/variables/_breakpoint.ts new file mode 100644 index 00000000000..facd8e14ba4 --- /dev/null +++ b/packages/eui-theme-borealis/src/variables/_breakpoint.ts @@ -0,0 +1,17 @@ +/* + * 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 { _EuiThemeBreakpoints } from '@elastic/eui-theme-common'; + +export const breakpoint: _EuiThemeBreakpoints = { + xl: 1200, + l: 992, + m: 768, + s: 575, + xs: 0, +}; diff --git a/packages/eui-theme-borealis/src/variables/_buttons.scss b/packages/eui-theme-borealis/src/variables/_buttons.scss new file mode 100644 index 00000000000..f42b0c3264c --- /dev/null +++ b/packages/eui-theme-borealis/src/variables/_buttons.scss @@ -0,0 +1,4 @@ +$euiButtonColorDisabled: $euiColorDisabled; +$euiButtonColorDisabledText: $euiColorDisabledText; +$euiButtonDefaultTransparency: .8; +$euiButtonFontWeight: $euiFontWeightMedium; diff --git a/packages/eui-theme-borealis/src/variables/_colors.ts b/packages/eui-theme-borealis/src/variables/_colors.ts new file mode 100644 index 00000000000..09ff1a3e2f5 --- /dev/null +++ b/packages/eui-theme-borealis/src/variables/_colors.ts @@ -0,0 +1,19 @@ +/* + * 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 { _EuiThemeColors } from '@elastic/eui-theme-common'; + +import { light_colors } from './_colors_light'; +import { dark_colors } from './_colors_dark'; + +export const colors: _EuiThemeColors = { + ghost: '#FFF', + ink: '#000', + LIGHT: light_colors, + DARK: dark_colors, +}; diff --git a/packages/eui-theme-borealis/src/variables/_colors_dark.scss b/packages/eui-theme-borealis/src/variables/_colors_dark.scss new file mode 100644 index 00000000000..e648b1b0841 --- /dev/null +++ b/packages/eui-theme-borealis/src/variables/_colors_dark.scss @@ -0,0 +1,49 @@ +// 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 new file mode 100644 index 00000000000..88a280d27c2 --- /dev/null +++ b/packages/eui-theme-borealis/src/variables/_colors_dark.ts @@ -0,0 +1,73 @@ +/* + * 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 new file mode 100644 index 00000000000..610ff5327bf --- /dev/null +++ b/packages/eui-theme-borealis/src/variables/_colors_light.scss @@ -0,0 +1,49 @@ +// 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 new file mode 100644 index 00000000000..95715428e71 --- /dev/null +++ b/packages/eui-theme-borealis/src/variables/_colors_light.ts @@ -0,0 +1,74 @@ +/* + * 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/_index.scss b/packages/eui-theme-borealis/src/variables/_index.scss new file mode 100644 index 00000000000..9768a81e8ee --- /dev/null +++ b/packages/eui-theme-borealis/src/variables/_index.scss @@ -0,0 +1,7 @@ +// Import base theme first, then override +@import 'node_modules/@elastic/eui-theme-common/src/global_styling/variables/index'; +@import 'states'; + +@import 'buttons'; +@import 'page'; +@import 'typography'; diff --git a/packages/eui-theme-borealis/src/variables/_levels.ts b/packages/eui-theme-borealis/src/variables/_levels.ts new file mode 100644 index 00000000000..1f4e2db0bb7 --- /dev/null +++ b/packages/eui-theme-borealis/src/variables/_levels.ts @@ -0,0 +1,21 @@ +/* + * 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 { _EuiThemeLevels } from '@elastic/eui-theme-common'; + +export const levels: _EuiThemeLevels = { + toast: 9000, + modal: 8000, + mask: 6000, + navigation: 6000, + menu: 2000, + header: 1000, + flyout: 1000, + maskBelowHeader: 1000, + content: 0, +}; diff --git a/packages/eui-theme-borealis/src/variables/_page.scss b/packages/eui-theme-borealis/src/variables/_page.scss new file mode 100644 index 00000000000..318cae55681 --- /dev/null +++ b/packages/eui-theme-borealis/src/variables/_page.scss @@ -0,0 +1 @@ +$euiPageDefaultMaxWidth: map-get($euiBreakpoints, 'xl'); diff --git a/packages/eui-theme-borealis/src/variables/_size.ts b/packages/eui-theme-borealis/src/variables/_size.ts new file mode 100644 index 00000000000..1b3fe6a8ea2 --- /dev/null +++ b/packages/eui-theme-borealis/src/variables/_size.ts @@ -0,0 +1,29 @@ +/* + * 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, + sizeToPixel, + type _EuiThemeBase, + type _EuiThemeSizes, +} from '@elastic/eui-theme-common'; + +export const base: _EuiThemeBase = 16; + +export const size: _EuiThemeSizes = { + xxs: computed(sizeToPixel(0.125)), + xs: computed(sizeToPixel(0.25)), + s: computed(sizeToPixel(0.5)), + m: computed(sizeToPixel(0.75)), + base: computed(sizeToPixel()), + l: computed(sizeToPixel(1.5)), + xl: computed(sizeToPixel(2)), + xxl: computed(sizeToPixel(2.5)), + xxxl: computed(sizeToPixel(3)), + xxxxl: computed(sizeToPixel(4)), +}; diff --git a/packages/eui-theme-borealis/src/variables/_states.scss b/packages/eui-theme-borealis/src/variables/_states.scss new file mode 100644 index 00000000000..13e30784936 --- /dev/null +++ b/packages/eui-theme-borealis/src/variables/_states.scss @@ -0,0 +1,11 @@ +// Color when not using currentColor +$euiFocusRingColor: $euiColorPrimaryText; + +// Sizing +$euiFocusRingAnimStartSize: 2px; +$euiFocusRingSize: 2px; + +// Transparency +$euiFocusTransparency: lightOrDarkTheme(.9, .8); +$euiFocusTransparencyPercent: lightOrDarkTheme(90%, 80%); +$euiFocusBackgroundColor: transparentize($euiColorPrimary, $euiFocusTransparency); diff --git a/packages/eui-theme-borealis/src/variables/_states.ts b/packages/eui-theme-borealis/src/variables/_states.ts new file mode 100644 index 00000000000..776a00ffeca --- /dev/null +++ b/packages/eui-theme-borealis/src/variables/_states.ts @@ -0,0 +1,22 @@ +/* + * 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, + sizeToPixel, + type _EuiThemeFocus, +} from '@elastic/eui-theme-common'; + +export const focus: _EuiThemeFocus = { + // Focus ring + color: 'currentColor', + 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 +}; diff --git a/packages/eui-theme-borealis/src/variables/_typography.scss b/packages/eui-theme-borealis/src/variables/_typography.scss new file mode 100644 index 00000000000..824f56b42da --- /dev/null +++ b/packages/eui-theme-borealis/src/variables/_typography.scss @@ -0,0 +1,64 @@ +// Finally start using the non-beta version of Inter +$euiFontFamily: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol' !default; + +// Font sizes -- scale is loosely based on Major Third (1.250) with a base of 14px +// Base list is an altered scale based on 16px to match the resulted values below +$euiTextScale: 2.125, 1.6875, 1.375, 1.125, 1, .875, .75 !default; + +$euiFontSize: $euiSize - 2; // 14px + +$euiFontSizeXS: floor($euiFontSize * .86); // 12px // h6 +$euiFontSizeS: floor($euiFontSize * 1); // 14px // h5 --> Now the same as the base $euiFontSize +$euiFontSizeM: ceil($euiFontSize * 1.14); // 16px // h4 +$euiFontSizeL: ceil($euiFontSize * 1.57); // 22px // h3 +$euiFontSizeXL: floor($euiFontSize * 1.93); // 27px // h2 +$euiFontSizeXXL: floor($euiFontSize * 2.43); // 34px // h1 + +$euiBodyLineHeight: 1.142857143 !default; // 16px from a 14px base font size to ensure it aligns to our 16px grid + +$euiCodeFontWeightRegular: 400; +$euiCodeFontWeightBold: 700; + +// Normally functions are imported before variables in `_index.scss` files +// But because they need to consume some typography variables they need to live here +@function convertToRem($size) { + @return #{$size / $euiFontSize}rem; +} + +// Use 8px increments for base gridline +@function lineHeightFromBaseline($multiplier: 3) { + @return convertToRem(($euiSize / 2) * $multiplier); +} + +$euiTitles: ( + 'xxxs': ( + 'font-size': $euiFontSizeXS, + 'line-height': lineHeightFromBaseline(2), + 'font-weight': $euiFontWeightBold, + ), + 'xxs': ( + 'font-size': $euiFontSizeS, + 'line-height': lineHeightFromBaseline(3), + 'font-weight': $euiFontWeightBold, + ), + 'xs': ( + 'font-size': $euiFontSizeM, + 'line-height': lineHeightFromBaseline(3), + 'font-weight': $euiFontWeightBold, + ), + 's': ( + 'font-size': $euiFontSizeL, + 'line-height': lineHeightFromBaseline(4), + 'font-weight': $euiFontWeightBold, + ), + 'm': ( + 'font-size': $euiFontSizeXL, + 'line-height': lineHeightFromBaseline(4), + 'font-weight': $euiFontWeightBold, + ), + 'l': ( + 'font-size': $euiFontSizeXXL, + 'line-height': lineHeightFromBaseline(5), + 'font-weight': $euiFontWeightBold, + ), +); diff --git a/packages/eui-theme-borealis/src/variables/_typography.ts b/packages/eui-theme-borealis/src/variables/_typography.ts new file mode 100644 index 00000000000..6454c7b239c --- /dev/null +++ b/packages/eui-theme-borealis/src/variables/_typography.ts @@ -0,0 +1,62 @@ +/* + * 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 _EuiThemeFont, + type _EuiThemeFontBase, + type _EuiThemeFontScales, + type _EuiThemeFontWeights, +} from '@elastic/eui-theme-common'; + +// Typographic scale -- loosely based on Major Third (1.250) +export const fontScale: _EuiThemeFontScales = { + xxxs: 0.5625, + xxs: 0.6875, + xs: 0.75, + s: 0.875, + m: 1, + l: 1.375, + xl: 1.6875, + xxl: 2.125, +}; + +// Families & base font settings +export const fontBase: _EuiThemeFontBase = { + family: "'Inter', BlinkMacSystemFont, Helvetica, Arial, sans-serif", + familyCode: "'Roboto Mono', Menlo, Courier, monospace", + familySerif: 'Georgia, Times, Times New Roman, serif', + + // Careful using ligatures. Code editors like ACE will often error because of width calculations + featureSettings: "'calt' 1, 'kern' 1, 'liga' 1", + defaultUnits: 'rem', + + baseline: computed(([base]) => base / 4, ['base']), + lineHeightMultiplier: 1.5, +}; + +export const fontWeight: _EuiThemeFontWeights = { + light: 300, + regular: 400, + medium: 500, + semiBold: 600, + bold: 700, +}; + +export const font: _EuiThemeFont = { + ...fontBase, + scale: fontScale, + weight: fontWeight, + body: { + scale: 's', + weight: 'regular', + }, + title: { + weight: 'bold', + }, +}; diff --git a/packages/eui-theme-borealis/tsconfig.json b/packages/eui-theme-borealis/tsconfig.json new file mode 100644 index 00000000000..4415cdcb934 --- /dev/null +++ b/packages/eui-theme-borealis/tsconfig.json @@ -0,0 +1,20 @@ +{ + "$schema": "https://json.schemastore.org/tsconfig", + "compilerOptions": { + "rootDir": "src", + "outDir": "lib", + "target": "ES2020", + "lib": ["ESNext", "DOM"], + "moduleResolution": "Node", + "declaration": true, + "sourceMap": true, + "noEmitHelpers": true, + "incremental": true, + "esModuleInterop": true, + "strict": true, + "skipLibCheck": true, + "tsBuildInfoFile": "lib/.tsbuildinfo" + }, + "include": ["src"], + "exclude": ["node_modules"], + } \ No newline at end of file diff --git a/packages/eui-theme-common/.babelrc.js b/packages/eui-theme-common/.babelrc.js new file mode 100644 index 00000000000..0fc74dd1fe9 --- /dev/null +++ b/packages/eui-theme-common/.babelrc.js @@ -0,0 +1,27 @@ +module.exports = { + // We need to preserve comments as they are used by webpack for + // naming chunks during code-splitting. The compression step during + // bundling will remove them later. + comments: true, + + presets: [ + [ + '@babel/env', + { + // `targets` property set via `.browserslistrc` + useBuiltIns: process.env.NO_COREJS_POLYFILL ? false : 'usage', + corejs: !process.env.NO_COREJS_POLYFILL ? '3.6' : undefined, + modules: process.env.BABEL_MODULES + ? process.env.BABEL_MODULES === 'false' + ? false + : process.env.BABEL_MODULES + : 'commonjs', // babel's default is commonjs + }, + ], + ['@babel/react', { runtime: 'classic' }], + [ + '@babel/typescript', + { isTSX: true, allExtensions: true, allowDeclareFields: true }, + ], + ], +}; diff --git a/packages/eui-theme-common/.eslintignore b/packages/eui-theme-common/.eslintignore new file mode 100644 index 00000000000..c6be7e9a761 --- /dev/null +++ b/packages/eui-theme-common/.eslintignore @@ -0,0 +1,10 @@ +dist +node_modules +lib +types +**/*.d.ts +package.json +scripts +.eslintrc.js +babel.config.js +jest.config.js diff --git a/packages/eui-theme-common/.eslintplugin.js b/packages/eui-theme-common/.eslintplugin.js new file mode 100644 index 00000000000..25ddbe3db65 --- /dev/null +++ b/packages/eui-theme-common/.eslintplugin.js @@ -0,0 +1,3 @@ +exports.rules = { + 'require-license-header': require('./scripts/eslint-plugin-local/require_license_header.js'), +}; diff --git a/packages/eui-theme-common/.eslintrc.js b/packages/eui-theme-common/.eslintrc.js new file mode 100644 index 00000000000..e33853c0255 --- /dev/null +++ b/packages/eui-theme-common/.eslintrc.js @@ -0,0 +1,114 @@ +const SSPL_ELASTIC_2_0_LICENSE_HEADER = ` +/* + * 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. + */ +`; + +module.exports = { + parser: '@typescript-eslint/parser', + parserOptions: { + project: ['./tsconfig.json'], + ecmaFeatures: { + jsx: true, + }, + }, + settings: { + 'import/resolver': { + node: { + extensions: ['.ts', '.tsx', '.js', '.json'], + }, + }, + }, + extends: [ + 'plugin:@typescript-eslint/recommended', + // Prettier options need to come last, in order to override other style rules + 'plugin:prettier/recommended', + ], + plugins: ['local', 'import'], + rules: { + 'block-scoped-var': 'error', + camelcase: 'off', + 'dot-notation': ['error', { allowKeywords: true }], + eqeqeq: ['error', 'always', { null: 'ignore' }], + 'guard-for-in': 'error', + 'new-cap': ['error', { capIsNewExceptions: ['Private'] }], + 'no-caller': 'error', + 'no-const-assign': 'error', + 'no-debugger': 'error', + 'no-empty': ['error', { allowEmptyCatch: true }], + 'no-eval': 'error', + 'no-extend-native': 'error', + 'no-global-assign': 'error', + 'no-loop-func': 'error', + 'no-restricted-globals': ['error', 'context'], + 'no-script-url': 'error', + 'no-sequences': 'error', + 'no-var': 'error', + 'no-with': 'error', + 'prefer-const': 'error', + 'prefer-template': 'error', + strict: ['error', 'never'], + 'valid-typeof': 'error', + + 'local/require-license-header': [ + 'warn', + { + license: SSPL_ELASTIC_2_0_LICENSE_HEADER, + }, + ], + + 'import/no-unresolved': ['error', { amd: true, commonjs: true }], + 'import/namespace': 'error', + 'import/default': 'error', + 'import/export': 'error', + 'import/no-named-as-default': 'error', + 'import/no-named-as-default-member': 'error', + 'import/no-duplicates': 'error', + + '@typescript-eslint/array-type': ['error', { default: 'array-simple' }], + '@typescript-eslint/ban-types': 'off', + '@typescript-eslint/explicit-function-return-type': 'off', + '@typescript-eslint/explicit-member-accessibility': 'off', + '@typescript-eslint/indent': 'off', + '@typescript-eslint/ban-tslint-comment': 'error', + '@typescript-eslint/no-empty-interface': 'off', + '@typescript-eslint/no-explicit-any': 'off', + '@typescript-eslint/no-non-null-assertion': 'off', + '@typescript-eslint/no-parameter-properties': 'off', + '@typescript-eslint/no-triple-slash-reference': 'off', + '@typescript-eslint/no-unused-vars': [ + 'error', + { argsIgnorePattern: '^_', ignoreRestSiblings: true }, + ], + '@typescript-eslint/no-use-before-define': 'off', + '@typescript-eslint/no-empty-function': 'off', + // It"s all very well saying that some types are trivially inferrable, + // but being explicit is still clearer. + '@typescript-eslint/no-inferrable-types': 'off', + '@typescript-eslint/explicit-module-boundary-types': 'off', + '@typescript-eslint/naming-convention': 'off', + '@typescript-eslint/ban-ts-comment': [ + 'error', + { + 'ts-ignore': 'allow-with-description', + 'ts-expect-error': 'allow-with-description', + }, + ], + '@typescript-eslint/consistent-type-exports': [ + 'error', + { fixMixedExportsWithInlineTypeSpecifier: false }, + ], + }, + overrides: [ + { + files: ['*.d.ts'], + rules: { + 'react/prefer-es6-class': 'off', + }, + }, + ], +}; diff --git a/packages/eui-theme-common/.gitignore b/packages/eui-theme-common/.gitignore new file mode 100644 index 00000000000..4450fe8d868 --- /dev/null +++ b/packages/eui-theme-common/.gitignore @@ -0,0 +1,11 @@ +# Dependencies +/node_modules + +# Production +/lib + +yarn-debug.log* +yarn-error.log* + +# Build-related files +.eslintcache \ No newline at end of file diff --git a/packages/eui-theme-common/.prettierrc b/packages/eui-theme-common/.prettierrc new file mode 100644 index 00000000000..b2f0fa8f00e --- /dev/null +++ b/packages/eui-theme-common/.prettierrc @@ -0,0 +1,7 @@ +{ + "parser": "typescript", + "printWidth": 80, + "semi": true, + "singleQuote": true, + "trailingComma": "es5" +} diff --git a/packages/eui-theme-common/.stylelintrc.js b/packages/eui-theme-common/.stylelintrc.js new file mode 100644 index 00000000000..42adc41f28c --- /dev/null +++ b/packages/eui-theme-common/.stylelintrc.js @@ -0,0 +1,163 @@ +const camelCaseRegex = '^[a-z][\\w-]*$'; // Note: also allows `_` as part of BEM naming +const camelCaseValueRegex = '/^[a-z][\\w.]*$/'; // Note: also allows `.` for JS objects +const cssInJsVarRegex = '/\\${[a-zA-Z]+/'; + +module.exports = { + // @see https://stylelint.io/user-guide/rules + rules: { + // Enforce camelCase naming + 'selector-class-pattern': camelCaseRegex, + 'keyframes-name-pattern': camelCaseRegex, + 'custom-property-pattern': camelCaseRegex, + + // Opinionated rules + 'declaration-no-important': true, + 'max-nesting-depth': [ + 2, + { + ignore: ['blockless-at-rules', 'pseudo-classes'], + }, + ], + 'block-no-empty': true, + 'selector-no-qualifying-type': [ + true, + { + ignore: ['attribute'], // Allows input[type=search] + }, + ], + + // Non-Prettier newline rules + // Put a line-break between sections of CSS, but allow quick one-liners for legibility + 'rule-empty-line-before': [ + 'always-multi-line', + { + ignore: ['first-nested', 'after-comment'], + }, + ], + 'comment-empty-line-before': null, + 'declaration-empty-line-before': null, + + // Value preferences + 'number-max-precision': null, + // Attempt to catch/flag non-variable color values + 'color-named': 'never', + 'color-no-hex': true, + // Prefer lowercase values, except for font names and currentColor + 'value-keyword-case': [ + 'lower', + { + ignoreProperties: ['font-family', '/^\\$eui[\\w]+/'], // Allow fonts and Sass variables + ignoreKeywords: ['currentColor'], + }, + ], + 'declaration-block-no-duplicate-properties': [ + true, + { + ignore: ['consecutive-duplicates'], // We occasionally use duplicate property values for cross-browser fallbacks + }, + ], + + // TODO: It may be worth investigating and updating these rules to their more modern counterparts + 'color-function-notation': 'legacy', + 'alpha-value-notation': 'number', + + // Disable various opinionated extended stylelint rules that EUI has not previously enforced + 'no-descending-specificity': null, + 'keyframe-selector-notation': null, + 'declaration-block-no-redundant-longhand-properties': null, + }, + overrides: [ + { + // TODO: Remove Sass-specific config & rules once we're completely off Sass + files: ['**/*.scss'], + ignoreFiles: [ + 'generator-eui/**/*.scss', + 'src/global_styling/react_date_picker/**/*.scss', + 'src/themes/amsterdam/global_styling/react_date_picker/**/*.scss', + 'src/components/date_picker/react-datepicker/**/*.scss', + ], + extends: [ + 'stylelint-config-standard-scss', + 'stylelint-config-prettier-scss', + ], + // @see https://github.com/stylelint-scss/stylelint-scss#list-of-rules + rules: { + // Casing + 'scss/dollar-variable-pattern': camelCaseRegex, + 'scss/at-mixin-pattern': camelCaseRegex, + 'scss/at-function-pattern': camelCaseRegex, + 'function-name-case': [ + 'lower', + { + ignoreFunctions: [`/${camelCaseRegex}/`, 'MIN'], + }, + ], + + // Whitespace/newlines + 'scss/at-if-closing-brace-space-after': 'always-intermediate', + 'scss/operator-no-unspaced': true, + + // Formatting rules deprecated as of v15 - keep them in Sass styles just in case until end of migration + // @see https://github.com/stylelint/stylelint/blob/main/docs/user-guide/rules.md#deprecated + 'color-hex-case': 'upper', + 'string-quotes': 'single', + // 2 spaces for indentation + indentation: [2, { indentInsideParens: 'once-at-root-twice-in-block' }], + // Mimic 1tbs `} else {` brace style, like our JS + 'block-opening-brace-space-before': 'always', + 'block-closing-brace-newline-before': 'always-multi-line', + // Ensure multiple selectors on one line each + 'selector-list-comma-newline-before': 'never-multi-line', + 'selector-list-comma-newline-after': 'always', + // Trim unnecessary newlines/whitespace + 'block-closing-brace-empty-line-before': 'never', + 'max-empty-lines': 1, + 'no-eol-whitespace': true, + // Enforce spacing around various syntax symbols (colons, operators, etc.) + 'declaration-colon-space-after': 'always-single-line', + 'declaration-colon-space-before': 'never', + 'function-calc-no-unspaced-operator': true, + 'selector-combinator-space-before': 'always', + 'selector-combinator-space-after': 'always', + // Ensure trailing semicolons are always present on non-oneliners + 'declaration-block-semicolon-newline-after': 'always-multi-line', + + // Disable various opinionated extended stylelint rules that EUI has not previously enforced + 'scss/no-global-function-names': null, + 'scss/dollar-variable-empty-line-before': null, + 'scss/at-rule-conditional-no-parentheses': null, + 'scss/double-slash-comment-empty-line-before': null, + 'scss/at-if-no-null': null, + 'selector-not-notation': null, // Enforce comma notation for CSS-in-JS moving forward + }, + }, + { + files: ['**/*.styles.ts', '**/*.ts', '**/*.tsx'], + extends: ['stylelint-config-standard'], + customSyntax: 'postcss-styled-syntax', + rules: { + // Unfortunately, double slash comments must be replaced with standard CSS /* */ comments + // Otherwise we get a parsing error - see https://github.com/hudochenkov/postcss-styled-syntax#known-issues + 'no-invalid-double-slash-comments': true, + // Empty style keys should be allowed, as Emotion still uses them for generating classNames + 'no-empty-source': null, + // Don't lint casing on interpolated JS vars + 'function-name-case': ['lower', { ignoreFunctions: [cssInJsVarRegex] }], + 'function-no-unknown': [true, { ignoreFunctions: [cssInJsVarRegex] }], + 'value-keyword-case': [ + 'lower', + { + ignoreProperties: ['font-family'], + ignoreKeywords: [camelCaseValueRegex], + }, + ], + // This is set to deprecate after stylelint v16, but in the meanwhile, is helpful + // for finding extraneous semicolons after utils that already output semicolons (e.g. logicalCSS()) + 'no-extra-semicolons': true, + + // Emotion uses the `label` property to generate the output className string + 'property-no-unknown': [true, { ignoreProperties: 'label' }], + }, + }, + ], +}; diff --git a/packages/eui-theme-common/LICENSE.txt b/packages/eui-theme-common/LICENSE.txt new file mode 100644 index 00000000000..74327a8f6f3 --- /dev/null +++ b/packages/eui-theme-common/LICENSE.txt @@ -0,0 +1,6 @@ +Source code in this repository is covered by (i) a dual license under the Server +Side Public License, v 1 and the Elastic License 2.0 or (ii) an Apache License +2.0 compatible license or (iii) solely under the Elastic License 2.0, in each +case, as noted in the applicable header. The default throughout the repository +is a dual license under the Server Side Public License, v 1 and the Elastic +License 2.0, unless the header specifies another license. diff --git a/packages/eui-theme-common/README.md b/packages/eui-theme-common/README.md new file mode 100644 index 00000000000..294446d4b30 --- /dev/null +++ b/packages/eui-theme-common/README.md @@ -0,0 +1,11 @@ +# EUI common theming functionality and styling + +This package contains common code related to theming and styling. + +## Installing dependencies + +Please run `yarn` to install dependencies: + +```shell +yarn +``` \ No newline at end of file diff --git a/packages/eui-theme-common/babel.config.js b/packages/eui-theme-common/babel.config.js new file mode 100644 index 00000000000..8165fe45577 --- /dev/null +++ b/packages/eui-theme-common/babel.config.js @@ -0,0 +1,6 @@ +module.exports = { + presets: [ + ['@babel/preset-env', { targets: { node: 'current' } }], + '@babel/preset-typescript', + ], +}; diff --git a/packages/eui-theme-common/jest.config.js b/packages/eui-theme-common/jest.config.js new file mode 100644 index 00000000000..1b5b81ebf06 --- /dev/null +++ b/packages/eui-theme-common/jest.config.js @@ -0,0 +1,7 @@ +const config = { + moduleFileExtensions: ['ts', 'tsx', 'js', 'json'], + testEnvironment: 'node', + testMatch: ['**/*.test.js', '**/*.test.ts'], +}; + +module.exports = config; diff --git a/packages/eui-theme-common/package.json b/packages/eui-theme-common/package.json new file mode 100644 index 00000000000..2ddafb93b6d --- /dev/null +++ b/packages/eui-theme-common/package.json @@ -0,0 +1,78 @@ +{ + "name": "@elastic/eui-theme-common", + "version": "0.0.1", + "description": "EUI theme common", + "license": "SEE LICENSE IN LICENSE.txt", + "scripts": { + "build:clean": "rimraf lib/", + "build": "yarn build:clean && yarn build:compile && yarn build:compile:cjs && yarn build:types", + "build:compile": "tsc --project ./tsconfig.json", + "build:compile:cjs": "NODE_ENV=production babel src --out-dir=lib/cjs --extensions .js,.ts,.tsx --source-maps", + "build:types": "NODE_ENV=production tsc --project tsconfig.types.json", + "build-pack": "yarn build && npm pack", + "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", + "pre-push": "yarn lint && yarn test" + }, + "repository": { + "type": "git", + "url": "https://github.com/elastic/eui.git", + "directory": "packages/eui-theme-common" + }, + "private": true, + "devDependencies": { + "@babel/cli": "^7.21.5", + "@babel/core": "^7.21.8", + "@babel/preset-env": "^7.21.5", + "@babel/preset-react": "^7.18.6", + "@babel/preset-typescript": "^7.21.5", + "@emotion/react": "^11.11.0", + "@types/jest": "^29.5.12", + "@types/prettier": "2.7.3", + "@types/react": "^16.9 || ^17.0 || ^18.0", + "@types/react-dom": "^16.9 || ^17.0 || ^18.0", + "@typescript-eslint/eslint-plugin": "^5.59.7", + "@typescript-eslint/parser": "^5.59.7", + "eslint": "^8.41.0", + "eslint-config-prettier": "^8.8.0", + "eslint-plugin-import": "^2.27.5", + "eslint-plugin-jest": "^28.5.0", + "eslint-plugin-local": "^1.0.0", + "eslint-plugin-prettier": "^4.2.1", + "jest": "^29.7.0", + "prettier": "^2.8.8", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "rimraf": "^6.0.1", + "stylelint": "^15.7.0", + "stylelint-config-prettier-scss": "^1.0.0", + "stylelint-config-standard": "^33.0.0", + "stylelint-config-standard-scss": "^9.0.0", + "typescript": "4.5.3" + }, + "peerDependencies": { + "@emotion/react": "11.x", + "react": "^16.12 || ^17.0 || ^18.0", + "react-dom": "^16.12 || ^17.0 || ^18.0" + }, + "main": "lib/cjs/index.js", + "exports": { + "./lib/*": "./lib/*", + "./scripts/*": "./scripts/*", + ".": { + "require": "./lib/cjs/index.js", + "import": "./lib/esm/index.js", + "default": "./lib/cjs/index.js" + } + }, + "files": [ + "lib/", + "src/**/*.scss", + "README.md" + ], + "installConfig": { + "hoistingLimits": "workspaces" + } +} diff --git a/packages/eui-theme-common/scripts/eslint-plugin-local/require_license_header.js b/packages/eui-theme-common/scripts/eslint-plugin-local/require_license_header.js new file mode 100644 index 00000000000..23b83648dd1 --- /dev/null +++ b/packages/eui-theme-common/scripts/eslint-plugin-local/require_license_header.js @@ -0,0 +1,132 @@ +const eslintParser = require('@typescript-eslint/parser'); + +function assert(truth, message) { + if (truth) { + return; + } + + const error = new Error(message); + error.failedAssertion = true; + throw error; +} + +function normalizeWhitespace(string) { + return string.replace(/\s+/g, ' '); +} + +function init(context, program, initStep) { + try { + return initStep(); + } catch (error) { + if (error.failedAssertion) { + context.report({ + node: program, + message: error.message, + }); + } else { + throw error; + } + } +} + +function isHashbang(text) { + return text.trim().startsWith('#!') && !text.trim().includes('\n'); +} + +module.exports = { + meta: { + fixable: 'code', + schema: [ + { + type: 'object', + properties: { + license: { + type: 'string', + }, + }, + additionalProperties: false, + }, + ], + }, + create: (context) => { + return { + Program(program) { + const license = init(context, program, function () { + const options = context.options[0] || {}; + const license = options.license; + + assert(!!license, '"license" option is required'); + + const parsed = eslintParser.parse(license, { comment: true }); + assert( + !parsed.body.length, + '"license" option must only include a single comment' + ); + assert( + parsed.comments.length === 1, + '"license" option must only include a single comment' + ); + + return { + source: license, + nodeValue: normalizeWhitespace(parsed.comments[0].value), + }; + }); + + if (!license) { + return; + } + + const sourceCode = context.getSourceCode(); + const comment = sourceCode + .getAllComments() + .find( + (node) => normalizeWhitespace(node.value) === license.nodeValue + ); + + // no licence comment + if (!comment) { + context.report({ + message: 'File must start with a license header', + loc: { + start: { line: 1, column: 0 }, + end: { line: 1, column: sourceCode.lines[0].length - 1 }, + }, + fix(fixer) { + if (isHashbang(sourceCode.lines[0])) { + return undefined; + } + + return fixer.replaceTextRange([0, 0], license.source + '\n\n'); + }, + }); + return; + } + + // ensure there is nothing before the comment + const sourceBeforeNode = sourceCode + .getText() + .slice(0, sourceCode.getIndexFromLoc(comment.loc.start)); + if (sourceBeforeNode.length && !isHashbang(sourceBeforeNode)) { + context.report({ + node: comment, + message: 'License header must be at the very beginning of the file', + fix(fixer) { + // replace leading whitespace if possible + if (sourceBeforeNode.trim() === '') { + return fixer.replaceTextRange([0, sourceBeforeNode.length], ''); + } + + // inject content at top and remove node from current location + // if removing whitespace is not possible + return [ + fixer.remove(comment), + fixer.replaceTextRange([0, 0], license.source + '\n\n'), + ]; + }, + }); + } + }, + }; + }, +}; diff --git a/packages/eui-theme-common/scripts/eslint-plugin-local/require_license_header.test.js b/packages/eui-theme-common/scripts/eslint-plugin-local/require_license_header.test.js new file mode 100644 index 00000000000..904dff17bc0 --- /dev/null +++ b/packages/eui-theme-common/scripts/eslint-plugin-local/require_license_header.test.js @@ -0,0 +1,177 @@ +const { RuleTester } = require('eslint'); +const rule = require('./require_license_header'); +const dedent = require('dedent'); + +const ruleTester = new RuleTester({ + parser: require.resolve('@typescript-eslint/parser'), +}); + +ruleTester.run('@kbn/eslint/require-license-header', rule, { + valid: [ + { + code: dedent` + /* license */ + + console.log('foo') + `, + + options: [{ license: '/* license */' }], + }, + { + code: dedent` + // license + + console.log('foo') + `, + + options: [{ license: '// license' }], + }, + ], + + invalid: [ + // missing license option + { + code: dedent` + console.log('foo') + `, + + options: [], + errors: [ + { + message: '"license" option is required', + }, + ], + }, + + // content cannot contain multiple block comments + { + code: dedent` + console.log('foo') + `, + + options: [{ license: '/* one *//* two */' }], + errors: [ + { + message: '"license" option must only include a single comment', + }, + ], + }, + + // content cannot contain multiple line comments + { + code: dedent` + console.log('foo') + `, + + options: [{ license: `// one\n// two` }], + errors: [ + { + message: '"license" option must only include a single comment', + }, + ], + }, + + // content cannot contain expressions + { + code: dedent` + console.log('foo') + `, + + options: [ + { + license: dedent` + /* license */ + console.log('hello world'); + `, + }, + ], + errors: [ + { + message: '"license" option must only include a single comment', + }, + ], + }, + + // content is not a single comment + { + code: dedent` + console.log('foo') + `, + + options: [{ license: `console.log('hello world');` }], + errors: [ + { + message: '"license" option must only include a single comment', + }, + ], + }, + + // missing license header + { + code: dedent` + console.log('foo') + `, + + options: [{ license: '/* license */' }], + errors: [ + { + message: 'File must start with a license header', + }, + ], + + output: dedent` + /* license */ + + console.log('foo') + `, + }, + + // strips newlines before the license comment + { + code: + '\n\n' + + dedent` + /* license */ + + console.log('foo') + `, + + options: [{ license: '/* license */' }], + errors: [ + { + message: 'License header must be at the very beginning of the file', + }, + ], + + output: dedent` + /* license */ + + console.log('foo') + `, + }, + + // moves license header before other nodes if necessary + { + code: dedent` + /* not license */ + /* license */ + console.log('foo') + `, + + options: [{ license: '/* license */' }], + errors: [ + { + message: 'License header must be at the very beginning of the file', + }, + ], + + output: dedent` + /* license */ + + /* not license */ + + console.log('foo') + `, + }, + ], +}); diff --git a/packages/eui-theme-common/src/global_styling/functions/_colors.scss b/packages/eui-theme-common/src/global_styling/functions/_colors.scss new file mode 100644 index 00000000000..25834e10add --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/functions/_colors.scss @@ -0,0 +1,138 @@ +// Converting a normal hex color to RBG +@function hexToRGB($color) { + @return 'rgb%28#{round(red($color))}, #{round(green($color))}, #{round(blue($color))}%29'; +} + +// Mixes a provided color with white. +@function tint($color, $percent) { + @return mix($euiColorGhost, $color, $percent); +} + +// Mixes a provided color with black. +@function shade($color, $percent) { + @return mix($euiColorInk, $color, $percent); +} + +// For theming. Checks the text color and tells us whether it's light or dark. +// Based on that we either tint (add white) or shade (add black). +@function tintOrShade($color, $tint, $shade) { + @if (lightness($euiTextColor) > 50) { + @return shade($color, $shade); + } @else { + @return tint($color, $tint); + } +} + +// The reverse of the above +@function shadeOrTint($color, $shade, $tint) { + @if (lightness($euiTextColor) < 50) { + @return shade($color, $shade); + } @else { + @return tint($color, $tint); + } +} + +// Similar to above, but uses the light or dark color based +// on whether it's the light or dark theme +@function lightOrDarkTheme($lightColor, $darkColor) { + @if (lightness($euiTextColor) < 50) { + @return $lightColor; + } @else { + @return $darkColor; + } +} + +// Calculates luminance, which is better than brightness for checking colors +// pow, nth functions come from the _math.scss functions +@function luminance($color) { + // Formula: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef + $rgba: red($color), green($color), blue($color); + $rgba2: (); + + @for $i from 1 through 3 { + $rgb: nth($rgba, $i); + $rgb: $rgb / 255; + + $rgb: if($rgb < .03928, $rgb / 12.92, pow(($rgb + .055) / 1.055, 2.4)); + + $rgba2: append($rgba2, $rgb); + } + + @return .2126 * nth($rgba2, 1) + .7152 * nth($rgba2, 2) + .0722 * nth($rgba2, 3); +} + +// Calculate contrast +@function contrastRatio($background, $foreground) { + $backgroundLum: luminance($background) + .05; + $foregroundLum: luminance($foreground) + .05; + + @return max($backgroundLum, $foregroundLum) / min($backgroundLum, $foregroundLum); +} + +// Given $color, decide whether $lightText or $darkText should be used as the text color +// ex: chooseLightOrDarkText(#EEE, #FFF, #000) would return #000 because it has +// a higher contrast than #FFF against a #EEE background. +@function chooseLightOrDarkText($background, $lightText: $euiColorGhost, $darkText: $euiColorInk) { + $lightContrast: contrastRatio($background, $lightText); + $darkContrast: contrastRatio($background, $darkText); + + @if ($lightContrast > $darkContrast) { + @return $lightText; + } @else { + @return $darkText; + } +} + +// Given a $foreground and a $background, make the $foreground AA accessibility by slightly +// adjusting it till the contrast is high enough +// By default it will compare against the page background color + +// ex: makeContrastColor($lightPink, #FFF) would continually shade the pink until +// it had higher than 4.5 contrast on a white background. +$euiContrastRatioText: 4.5; +@function makeHighContrastColor($foreground, $background: $euiPageBackgroundColor, $ratio: $euiContrastRatioText) { + $contrast: contrastRatio($foreground, $background); + + // Determine the lightness factor of the background color first to + // determine whether to shade or tint the foreground. + $brightness: lightness($background); + + $highContrastTextColor: $foreground; + + @while ($contrast < $ratio) { + @if ($brightness > 50) { + $highContrastTextColor: shade($highContrastTextColor, 5%); + } @else { + $highContrastTextColor: tint($highContrastTextColor, 5%); + } + + $contrast: contrastRatio($highContrastTextColor, $background); + + @if (lightness($highContrastTextColor) < 5) { + @warn 'High enough contrast could not be determined. Most likely your background color does not adjust for light mode.'; + @return $highContrastTextColor; + } + + @if (lightness($highContrastTextColor) > 95) { + @warn 'High enough contrast could not be determined. Most likely your background color does not adjust for dark mode.'; + @return $highContrastTextColor; + } + } + + @return $highContrastTextColor; +} + +// Graphics such as stand alone icons and pieces of a graph only need a minimum ratio of 3:1 with its background. +// Therefore, we can reuse the `makeHighContrastColor()` function but only attain a min contrast of 3.0. +// It is still recommended to use `makeHighContrastColor()` to attain a 4.5:1 ratio if the graphic is small or thinly stroked. +// https://www.w3.org/WAI/GL/low-vision-a11y-tf/wiki/Informational_Graphic_Contrast_(Minimum) +$euiContrastRatioGraphic: 3; +@function makeGraphicContrastColor($color, $background: $euiPageBackgroundColor) { + @return makeHighContrastColor($color, $background, $euiContrastRatioGraphic); +} + +// Disabled content only needs a contrast of at least 2 because there is no interaction available +$euiContrastRatioDisabled: 2; +@function makeDisabledContrastColor($color, $background: $euiPageBackgroundColor) { + @return makeHighContrastColor($color, $background, $euiContrastRatioDisabled); +} diff --git a/packages/eui-theme-common/src/global_styling/functions/_index.scss b/packages/eui-theme-common/src/global_styling/functions/_index.scss new file mode 100644 index 00000000000..de8260b2bba --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/functions/_index.scss @@ -0,0 +1,5 @@ +// Math needs to be first in the load order +@import 'math'; + +// Using math, we have functions to manipulate contrast / luminosity for accessibility +@import 'colors'; diff --git a/packages/eui-theme-common/src/global_styling/functions/_math.scss b/packages/eui-theme-common/src/global_styling/functions/_math.scss new file mode 100644 index 00000000000..cdec36f3e60 --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/functions/_math.scss @@ -0,0 +1 @@ +@import 'math_pow'; \ No newline at end of file diff --git a/packages/eui-theme-common/src/global_styling/functions/_math_pow.scss b/packages/eui-theme-common/src/global_styling/functions/_math_pow.scss new file mode 100644 index 00000000000..2e2d784a845 --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/functions/_math_pow.scss @@ -0,0 +1,82 @@ +/** +The MIT License (MIT) + +Copyright (c) 2015 strarsis https://github.com/strarsis/sass-math-pow + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. + */ + +@function pow($number, $exp) { + $exp1: round($exp); + $result: powInt($number, $exp1); + + @if ($exp1 != $exp) { + $result: $result * mathExp(($exp - $exp1) * mathLn($number)); + } + + @return $result; +} + +@function powInt($number, $exp) { + @if $exp == 0 { + @return 1; + } @else if $exp < 0 { + @return 1 / powInt($number, -$exp); + } @else { + $e: floor($exp / 2); + $pow: pow($number, $e); + @if $e * 2 == $exp { + @return $pow * $pow; + } @else { + @return $pow * $pow * $number; + } + } +} + +@function mathExp($value) { + $item: 1; + $result: 1; + + @for $index from 1 to 100 { + $item: $item * $value / $index; + $result: $result + $item; + } + + @return $result; +} + +@function mathLn($value) { + $tenExp: 0; + $lnTen: 2.30258509; + + @while ($value > 1) { + $tenExp: $tenExp + 1; + $value: $value / 10; + } + + $item: -1; + $result: 0; + + @for $index from 1 to 100 { + $item: $item * (1 - $value); + $result: $result + $item / $index; + } + + @return $result + $tenExp * $lnTen; +} diff --git a/packages/eui-theme-common/src/global_styling/functions/index.ts b/packages/eui-theme-common/src/global_styling/functions/index.ts new file mode 100644 index 00000000000..5b07f8b8473 --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/functions/index.ts @@ -0,0 +1,9 @@ +/* + * 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 * from './size'; diff --git a/packages/eui-theme-common/src/global_styling/functions/size.ts b/packages/eui-theme-common/src/global_styling/functions/size.ts new file mode 100644 index 00000000000..a96b5b85452 --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/functions/size.ts @@ -0,0 +1,26 @@ +/* + * 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. + */ + +/* TODO: move to a shared module package */ + +/** + * Calculates the `px` value based on a scale multiplier + * @param scale - The font scale multiplier + * * + * @param themeOrBase - Theme base value + * * + * @returns string - Rem unit aligned to baseline + */ + +export const sizeToPixel = + (scale: number = 1) => + (themeOrBase: number | { base: number; [key: string]: any }) => { + const base = + typeof themeOrBase === 'object' ? themeOrBase.base : themeOrBase; + return `${base * scale}px`; + }; diff --git a/packages/eui-theme-common/src/global_styling/index.scss b/packages/eui-theme-common/src/global_styling/index.scss new file mode 100644 index 00000000000..8497b0ecf68 --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/index.scss @@ -0,0 +1,12 @@ +// Core + +// Functions need to be first, since we use them in our variables and mixin definitions +@import 'functions/index'; + +// Variables come next, and are used in some mixins +@import 'variables/index'; + +// Mixins provide generic code expansion through helpers +@import 'mixins/index'; + +// The reset file has moved to global_styles.tsx diff --git a/packages/eui-theme-common/src/global_styling/index.ts b/packages/eui-theme-common/src/global_styling/index.ts new file mode 100644 index 00000000000..47fa2bee007 --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/index.ts @@ -0,0 +1,11 @@ +/* + * 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 * from './types'; +export * from './functions'; +export * from './variables'; diff --git a/packages/eui-theme-common/src/global_styling/mixins/_button.scss b/packages/eui-theme-common/src/global_styling/mixins/_button.scss new file mode 100644 index 00000000000..47c87b6e742 --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/mixins/_button.scss @@ -0,0 +1,149 @@ +// Provides a solid reset and base for handling sizing layout +// Does not include any visual styles +@mixin euiButtonBase { + display: inline-block; + appearance: none; + cursor: pointer; + height: $euiButtonHeight; + line-height: $euiButtonHeight; // prevents descenders from getting cut off + text-align: center; + white-space: nowrap; + max-width: 100%; + vertical-align: middle; +} + +// Adds the focus (and hover) animation for translating up 1px +@mixin euiButtonFocus { + @include euiCanAnimate { + transition: transform $euiAnimSpeedNormal ease-in-out, background-color $euiAnimSpeedNormal ease-in-out; + + &:hover:not(:disabled) { + transform: translateY(-1px); + } + + &:focus { + animation: euiButtonActive $euiAnimSpeedNormal $euiAnimSlightBounce; + } + + &:active:not(:disabled) { + transform: translateY(1px); + } + } +} + +// All of the button base styles including the base, focus, font, and initial styles +// Does not include individual alterations like color or sizes +@mixin euiButton { + @include euiButtonBase; + @include euiFont; + @include euiFontSize; + @include euiButtonFocus; + + font-weight: $euiButtonFontWeight; + text-decoration: none; + outline-offset: -1px; + + &:hover:not(:disabled), + &:focus { + text-decoration: underline; + } +} + +// Correctly lays out the contents of a button when using the proper dom elements of: +// +// 1. Apply margin to all but last item in the flex. +// 2. Margin gets flipped because of the row-reverse. +@mixin euiButtonContent($isReverse: false) { + height: 100%; + width: 100%; + vertical-align: middle; + + .euiButtonContent__icon, + .euiButtonContent__spinner { + flex-shrink: 0; // Ensures the icons/spinner don't scale down below their intended size + } + + @if ($isReverse) { + flex-direction: row-reverse; + + > * + * { + margin-inline-start: 0; // 1, 2 + margin-inline-end: $euiSizeS; // 1, 2 + } + } @else { + display: flex; + justify-content: center; + align-items: center; + + > * + * { + margin-inline-start: $euiSizeS; // 1 + } + } +} + +@mixin euiButtonContentDisabled { + pointer-events: auto; + cursor: not-allowed; + + &:hover, + &:focus, + &:focus-within { + text-decoration: none; + } + + .euiButtonContent__spinner { + border-color: euiLoadingSpinnerBorderColors(currentColor); + } +} + +/* + * Creates the Amsterdam style of button with a transparent background + */ +@mixin euiButtonDefaultStyle($color: 'primary', $includeStates: true, $transparency: $euiButtonDefaultTransparency) { + $backgroundColor: $color; + + @if (map-has-key($euiButtonTypes, $color)) { + $backgroundColor: map-get($euiButtonTypes, $color); + } + + $percentConversion: $transparency * 100%; + // This variable simulates the possibly darkest background the button could be on + // Simulates the 20% opaque color on top of the page background color + $backgroundColorSimulated: mix($euiPageBackgroundColor, $backgroundColor, $percentConversion); + // Then we can calculate the darkest text color needed + color: makeHighContrastColor($backgroundColor, $backgroundColorSimulated); + // But still use transparency + background-color: transparentize($backgroundColor, $transparency); + + @if ($includeStates) { + &:not([class*='isDisabled']) { + &:hover, + &:focus { + // Duplicated from inert state simply to override default theme + background-color: transparentize($backgroundColor, $transparency); + } + } + } +} + +/* + * Creates the Amsterdam style of fill button + */ +@mixin euiButtonFillStyle($color: 'primary') { + $backgroundColor: $color; + + @if (map-has-key($euiButtonTypes, $color)) { + $backgroundColor: map-get($euiButtonTypes, $color); + } + + background-color: $backgroundColor; + color: chooseLightOrDarkText($backgroundColor); +} + +// Keyframe animation declarations can be found in +// utility/animations.scss diff --git a/packages/eui-theme-common/src/global_styling/mixins/_form.scss b/packages/eui-theme-common/src/global_styling/mixins/_form.scss new file mode 100644 index 00000000000..326a8491f87 --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/mixins/_form.scss @@ -0,0 +1,273 @@ +@mixin euiFormControlLayoutPadding($numOfIcons, $side: 'right', $compressed: false) { + $iconSize: $euiSize; + $iconPadding: $euiFormControlPadding; + $marginBetweenIcons: $euiFormControlPadding / 2; + + @if ($compressed) { + $iconPadding: $euiFormControlCompressedPadding; + } + + @if variable-exists(numOfIcons) == false { + @error '$numOfIcons:integer (1-3) must be provided to @mixin euiFormControlLayoutPadding().'; + } @else if $numOfIcons == 1 { + padding-#{$side}: $iconPadding + $iconSize + $iconPadding; + } @else if $numOfIcons == 2 { + padding-#{$side}: $iconPadding + $iconSize + $marginBetweenIcons + $iconSize + $iconPadding; + } @else if $numOfIcons == 3 { + padding-#{$side}: $iconPadding + $iconSize + $marginBetweenIcons + $iconSize + $marginBetweenIcons + $iconSize + $iconPadding; + } +} + +@mixin euiPlaceholderPerBrowser { + // stylelint-disable selector-no-vendor-prefix + // Each prefix must be its own content block + &::-webkit-input-placeholder { @content; opacity: 1; } + &::-moz-placeholder { @content; opacity: 1; } + &:-ms-input-placeholder { @content; opacity: 1; } + &:-moz-placeholder { @content; opacity: 1; } + &::placeholder { @content; opacity: 1; } +} + +@function euiFormControlGradient($color: $euiColorPrimary) { + @return linear-gradient(to top, + $color, + $color 2px, + transparent 2px, + transparent 100% + ); +} + +@mixin euiFormControlText { + @include euiFont; + font-size: $euiFontSizeS; + color: $euiTextColor; + + @include euiPlaceholderPerBrowser { + color: $euiFormControlPlaceholderText; + } +} + +@mixin euiFormControlSize( + $height: $euiFormControlHeight, + $includeAlternates: false +) { + // Default + max-width: $euiFormMaxWidth; + width: 100%; + height: $height; + + @if ($includeAlternates) { + &--fullWidth { + max-width: 100%; + } + + &--compressed { + height: $euiFormControlCompressedHeight; + } + + &--inGroup { + height: 100%; + } + } +} + +@mixin euiFormControlWithIcon($isIconOptional: false, $side: 'left', $compressed: false) { + @if ($isIconOptional) { + @at-root { + #{&}--withIcon { + @include euiFormControlLayoutPadding(1, $side, $compressed); + } + } + } @else { + @include euiFormControlLayoutPadding(1, $side, $compressed); + } +} + +@mixin euiFormControlIsLoading($isNextToIcon: false) { + @at-root { + #{&}-isLoading { + @if ($isNextToIcon) { + @include euiFormControlLayoutPadding(2); + } @else { + @include euiFormControlLayoutPadding(1); + } + } + + #{&}-isLoading#{&}--compressed { + @if ($isNextToIcon) { + @include euiFormControlLayoutPadding(2, $compressed: true); + } @else { + @include euiFormControlLayoutPadding(1, $compressed: true); + } + } + } +} + +// 1. Must supply both values to background-size or some browsers apply the single value to both directions + +@mixin euiFormControlDefaultShadow($borderOnly: false) { + background-color: $euiFormBackgroundColor; + background-repeat: no-repeat; + background-size: 0% 100%; // 1 + + @if ($borderOnly) { + box-shadow: inset 0 0 0 1px $euiFormBorderColor; + } @else { + box-shadow: + #{$euiFormControlBoxShadow}, + inset 0 0 0 1px $euiFormBorderColor; + } + + transition: + box-shadow $euiAnimSpeedFast ease-in, + background-image $euiAnimSpeedFast ease-in, + background-size $euiAnimSpeedFast ease-in, + background-color $euiAnimSpeedFast ease-in; + + // Fixes bug in Firefox where adding a transition to the background-color + // caused a flash of differently styled dropdown. + @supports (-moz-appearance: none) { + // List *must* be in the same order as the above. + transition-property: box-shadow, background-image, background-size; + } +} + +@mixin euiFormControlFocusStyle($borderOnly: false) { + background-color: tintOrShade($euiColorEmptyShade, 0%, 40%); + background-image: euiFormControlGradient(); + background-size: 100% 100%; // 1 + outline: none; // Blanket remove all outlines relying on our own bottom border + + @if ($borderOnly) { + box-shadow: inset 0 0 0 1px $euiFormBorderColor; + } @else { + box-shadow: inset 0 0 0 1px $euiFormBorderColor; + } +} + +@mixin euiFormControlInvalidStyle { + background-image: euiFormControlGradient($euiColorDanger); + background-size: 100%; +} + +@mixin euiFormControlDisabledTextStyle { + color: $euiFormControlDisabledColor; + -webkit-text-fill-color: $euiFormControlDisabledColor; // Required for Safari +} + +@mixin euiFormControlDisabledStyle { + @include euiFormControlDisabledTextStyle; + cursor: not-allowed; + background: $euiFormBackgroundDisabledColor; + box-shadow: inset 0 0 0 1px $euiFormBorderDisabledColor; + + @include euiPlaceholderPerBrowser { + color: $euiFormControlDisabledColor; + } +} + +@mixin euiFormControlReadOnlyStyle { + cursor: default; + color: $euiTextColor; + -webkit-text-fill-color: $euiTextColor; // Required for Safari + // Use transparency since there is no border and in case form is on a non-white background + background: $euiFormBackgroundReadOnlyColor; + border-color: transparent; + box-shadow: inset 0 0 0 1px $euiFormBorderDisabledColor; +} + +// 2. Override invalid state with focus state. + +@mixin euiFormControlStyle($borderOnly: false, $includeStates: true, $includeSizes: true) { + @include euiFormControlSize($includeAlternates: $includeSizes); + @include euiFormControlDefaultShadow; + @include euiFormControlText; + + border: none; + border-radius: $euiFormControlBorderRadius; + padding: $euiFormControlPadding; + + @if ($includeStates) { + &:invalid { // 2 + @include euiFormControlInvalidStyle; + } + + &:focus { // 2 + @include euiFormControlFocusStyle; + } + + &:disabled { + @include euiFormControlDisabledStyle; + } + + &[readOnly] { + @include euiFormControlReadOnlyStyle; + } + + // Needs to be set for autofill + &:-webkit-autofill { + -webkit-text-fill-color: lightOrDarkTheme($euiColorDarkestShade, $euiColorLightShade); + + ~ .euiFormControlLayoutIcons { + color: lightOrDarkTheme($euiColorDarkestShade, $euiColorLightShade); + } + } + } + + @if ($includeSizes) { + &--compressed { + @include euiFormControlStyleCompressed($borderOnly, $includeStates); + } + + &--inGroup { + // stylelint-disable-next-line declaration-no-important + box-shadow: none !important; + border-radius: 0; + } + } +} + +@mixin euiFormControlStyleCompressed($borderOnly: false, $includeStates: true) { + @include euiFormControlDefaultShadow($borderOnly: true); + padding: $euiFormControlCompressedPadding; + border-radius: $euiFormControlCompressedBorderRadius; + + @if ($includeStates) { + &:invalid { // 2 + @include euiFormControlInvalidStyle; + } + + &:focus { // 2 + @include euiFormControlFocusStyle($borderOnly: true); + } + + &:disabled { + @include euiFormControlDisabledStyle; + } + + &[readOnly] { + @include euiFormControlReadOnlyStyle; + } + } +} + +@mixin euiHiddenSelectableInput { + position: absolute; + // stylelint-disable-next-line declaration-no-important + opacity: 0 !important; // Make sure it's still hidden when :disabled + width: 100%; + height: 100%; + cursor: pointer; +} + +// Adjusts form controls border radius +@mixin euiFormControlSideBorderRadius($borderRadius, $side, $internal: false) { + @if $internal == true { + $borderRadius: $borderRadius - 1; + } + @if $side == 'left' { + border-radius: $borderRadius 0 0 $borderRadius; + } @else if $side == 'right' { + border-radius: 0 $borderRadius $borderRadius 0; + } +} diff --git a/packages/eui-theme-common/src/global_styling/mixins/_helpers.scss b/packages/eui-theme-common/src/global_styling/mixins/_helpers.scss new file mode 100644 index 00000000000..7de426d4a59 --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/mixins/_helpers.scss @@ -0,0 +1,117 @@ +// Helper mixins + +// Set scroll bar appearance on Chrome (and firefox). +@mixin euiScrollBar($thumbColor: $euiColorDarkShade, $trackBackgroundColor: transparent, $size: 'thin') { + // Firefox's scrollbar coloring cascades, but the sizing does not, + // so it's being added to this mixin for allowing support wherever custom scrollbars are + scrollbar-color: transparentize($thumbColor, .5) $trackBackgroundColor; // Firefox support + + @if ($size == 'thin') { + scrollbar-width: thin; + } + + // stylelint-disable selector-no-vendor-prefix + &::-webkit-scrollbar { + width: $euiScrollBar; + height: $euiScrollBar; + } + + &::-webkit-scrollbar-thumb { + background-color: transparentize($thumbColor, .5); + background-clip: content-box; + border-radius: $euiScrollBar; + + @if ($size == 'thin') { + border: $euiScrollBarCornerThin solid $trackBackgroundColor; + } @else { + border: $euiScrollBarCorner solid $trackBackgroundColor; + } + } + + &::-webkit-scrollbar-corner, + &::-webkit-scrollbar-track { + background-color: $trackBackgroundColor; + } +} + +/** + * 1. Focus rings shouldn't be visible on scrollable regions, but a11y requires them to be focusable. + * Browser's supporting `:focus-visible` will still show outline on keyboard focus only. + * Others like Safari, won't show anything at all. + * 2. Force the `:focus-visible` when the `tabindex=0` (is tabbable) + */ + +// Just overflow and scrollbars +@mixin euiYScroll { + @include euiScrollBar; + height: 100%; + overflow-y: auto; + overflow-x: hidden; + + &:focus { + outline: none; /* 1 */ + } + + &[tabindex='0']:focus:focus-visible { + outline-style: auto; /* 2 */ + } +} + +@mixin euiXScroll { + @include euiScrollBar; + overflow-x: auto; + + &:focus { + outline: none; /* 1 */ + } + + &[tabindex='0']:focus:focus-visible { + outline-style: auto; /* 2 */ + } +} + +// The full overflow with shadow +@mixin euiYScrollWithShadows { + @include euiYScroll; + @include euiOverflowShadow('y'); +} + +@mixin euiXScrollWithShadows { + @include euiXScroll; + @include euiOverflowShadow('x'); +} + +// Hiding elements offscreen to only be read by screen reader +// See https://github.com/elastic/eui/pull/5130 and https://github.com/elastic/eui/pull/5152 for more info +@mixin euiScreenReaderOnly { + // Take the element out of the layout + position: absolute; + // Keep it vertically inline + top: auto; + // Chrome requires a left value, and Selenium (used by Kibana's FTR) requires an off-screen position for its .getVisibleText() to not register SR-only text + left: -10000px; + // The element must have a size (for some screen readers) + width: 1px; + height: 1px; + // But reduce the visible size to nothing + clip: rect(0 0 0 0); + clip-path: inset(50%); + // And ensure no overflows occur + overflow: hidden; + // Chrome requires the negative margin to not cause overflows of parent containers + margin: -1px; +} + +// Doesn't have reduced motion turned on +@mixin euiCanAnimate { + @media screen and (prefers-reduced-motion: no-preference) { + @content; + } +} + +// Does have reduced motion turned on +@mixin euiCantAnimate { + @media screen and (prefers-reduced-motion: reduce) { + @content; + } +} diff --git a/packages/eui-theme-common/src/global_styling/mixins/_index.scss b/packages/eui-theme-common/src/global_styling/mixins/_index.scss new file mode 100644 index 00000000000..7d0cba8a92e --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/mixins/_index.scss @@ -0,0 +1,14 @@ +@import 'responsive'; +@import 'shadow'; +@import 'size'; +@import 'typography'; +@import 'helpers'; +@import 'states'; + +@import 'button'; +@import 'form'; +@import 'loading'; +@import 'link'; +@import 'panel'; +@import 'range'; +@import 'tool_tip'; diff --git a/packages/eui-theme-common/src/global_styling/mixins/_link.scss b/packages/eui-theme-common/src/global_styling/mixins/_link.scss new file mode 100644 index 00000000000..98dac59b9cc --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/mixins/_link.scss @@ -0,0 +1,11 @@ +@mixin euiLink { + text-align: left; + + &:hover { + text-decoration: underline; + } + + &:focus { + text-decoration: underline; + } +} diff --git a/packages/eui-theme-common/src/global_styling/mixins/_loading.scss b/packages/eui-theme-common/src/global_styling/mixins/_loading.scss new file mode 100644 index 00000000000..0f72a8433f7 --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/mixins/_loading.scss @@ -0,0 +1,6 @@ +@function euiLoadingSpinnerBorderColors( + $main: $euiColorLightShade, + $highlight: $euiColorPrimary +) { + @return $highlight $main $main $main; +} diff --git a/packages/eui-theme-common/src/global_styling/mixins/_panel.scss b/packages/eui-theme-common/src/global_styling/mixins/_panel.scss new file mode 100644 index 00000000000..4eb0a5fb55a --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/mixins/_panel.scss @@ -0,0 +1,55 @@ +@mixin euiPanel($selector) { + @if variable-exists(selector) == false { + @error 'A $selector must be provided to @mixin euiPanel().'; + } @else { + #{$selector} { + flex-grow: 1; + + &#{$selector}--flexGrowZero { + flex-grow: 0; + } + + &#{$selector}--hasShadow { + @include euiBottomShadowMedium; + } + + &#{$selector}--hasBorder { + border: $euiBorderThin; + box-shadow: none; + } + + &#{$selector}--isClickable { + // transition the shadow + transition: all $euiAnimSpeedFast $euiAnimSlightResistance; + + &:enabled { // This is a good selector for buttons since it doesn't exist on divs + // in case of button wrapper which inherently is inline-block and no width + display: block; + width: 100%; + text-align: left; + } + + &:hover, + &:focus { + @include euiBottomShadow; + transform: translateY(-2px); + cursor: pointer; + } + } + + // Border Radii + @each $modifier, $amount in $euiPanelBorderRadiusModifiers { + &#{$selector}--#{$modifier} { + border-radius: $amount; + } + } + + // Background colors + @each $modifier, $amount in $euiPanelBackgroundColorModifiers { + &#{$selector}--#{$modifier} { + background-color: $amount; + } + } + } + } +} diff --git a/packages/eui-theme-common/src/global_styling/mixins/_range.scss b/packages/eui-theme-common/src/global_styling/mixins/_range.scss new file mode 100644 index 00000000000..ec47e39e2d6 --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/mixins/_range.scss @@ -0,0 +1,62 @@ +/* +The CSS in JS version of this file lives in: + - src/components/form/range/range.styles.ts + +The following files still use the Sass version: + - src/themes/amsterdam/overrides/_color_stops.scss + - src/themes/amsterdam/overrides/_hue.scss +*/ + +@mixin euiRangeTrackSize($compressed: false) { + height: $euiRangeTrackHeight; + width: $euiRangeTrackWidth; + + @if ($compressed) { + height: $euiRangeTrackCompressedHeight; + } +} + +@mixin euiRangeTrackPerBrowser { + &::-webkit-slider-runnable-track { @content; } + &::-moz-range-track { @content; } + &::-ms-fill-lower { @content; } + &::-ms-fill-upper { @content; } +} + +@mixin euiRangeThumbBorder { + border: 2px solid $euiRangeThumbBorderColor; +} + +@mixin euiRangeThumbBoxShadow { + box-shadow: + 0 0 0 1px $euiRangeThumbBorderColor, + 0 2px 2px -1px rgba($euiShadowColor, .2), + 0 1px 5px -2px rgba($euiShadowColor, .2); +} + +@mixin euiRangeThumbFocusBoxShadow { + box-shadow: 0 0 0 2px $euiFocusRingColor; +} + +@mixin euiRangeThumbStyle { + @include euiRangeThumbBoxShadow; + @include euiRangeThumbBorder; + cursor: pointer; + background-color: $euiRangeThumbBackgroundColor; + padding: 0; + height: $euiRangeThumbHeight; + width: $euiRangeThumbWidth; + box-sizing: border-box; // required for firefox or the border makes the width and height to increase +} + +@mixin euiRangeThumbPerBrowser { + &::-webkit-slider-thumb { @content; } + &::-moz-range-thumb { @content; } + &::-ms-thumb { @content; } +} + +@mixin euiRangeThumbFocus { + @include euiRangeThumbBorder; + @include euiRangeThumbFocusBoxShadow; + background-color: $euiColorPrimary; +} diff --git a/packages/eui-theme-common/src/global_styling/mixins/_responsive.scss b/packages/eui-theme-common/src/global_styling/mixins/_responsive.scss new file mode 100644 index 00000000000..0fa3a9b08a8 --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/mixins/_responsive.scss @@ -0,0 +1,44 @@ +// A sem-complicated mixin for breakpoints, that takes any number of +// named breakpoints that exists in $euiBreakpoints. + +@mixin euiBreakpoint($sizes...) { + // Loop through each size parameter + @each $size in $sizes { + // Store the location of the size in the list to check against + $index: index($euiBreakpointKeys, $size); + + // Check to make sure it exists in the allowed breakpoint names + @if ( $index ) { + + // Set the min size to the value of the size + $minSize: map-get($euiBreakpoints, $size); + + // If it is the last item, don't give it a max-width + @if ( $index == length($euiBreakpointKeys) ) { + @media only screen and (min-width: $minSize) { + @content; + } + // If it's not the last item, add a max-width + } @else { + + // Set the max size to the value of the next size (-1px as to not overlap) + $maxSize: map-get($euiBreakpoints, nth($euiBreakpointKeys, $index + 1)) - 1px; + + // If it's the the first item, don't set a min-width + @if ( $index == 1 ) { + @media only screen and (max-width: $maxSize) { + @content; + } + // Otherwise it should have a min and max width + } @else { + @media only screen and (min-width: $minSize) and (max-width: $maxSize) { + @content; + } + } + } + // If it's not a known breakpoint, throw a warning + } @else { + @warn "euiBreakpoint(): '#{$size}' is not a valid size in $euiBreakpoints. Accepted values are '#{$euiBreakpointKeys}'"; + } + } +} diff --git a/packages/eui-theme-common/src/global_styling/mixins/_shadow.scss b/packages/eui-theme-common/src/global_styling/mixins/_shadow.scss new file mode 100644 index 00000000000..431b7db3b81 --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/mixins/_shadow.scss @@ -0,0 +1,100 @@ +@function shadowOpacity($opacity) { + @if (lightness($euiTextColor) < 50) { + @return $opacity * 1; + } @else { + @return $opacity * 2.5; + } +} + +@mixin euiSlightShadow($color: $euiShadowColor) { + box-shadow: + 0 .8px .8px rgba($color, shadowOpacity(.04)), + 0 2.3px 2px rgba($color, shadowOpacity(.03)); +} + +@mixin euiBottomShadowSmall($color: $euiShadowColor) { + box-shadow: + 0 .7px 1.4px rgba($color, shadowOpacity(.07)), + 0 1.9px 4px rgba($color, shadowOpacity(.05)), + 0 4.5px 10px rgba($color, shadowOpacity(.05)); +} + +@mixin euiBottomShadowMedium($color: $euiShadowColor) { + box-shadow: + 0 .9px 4px -1px rgba($color, shadowOpacity(.08)), + 0 2.6px 8px -1px rgba($color, shadowOpacity(.06)), + 0 5.7px 12px -1px rgba($color, shadowOpacity(.05)), + 0 15px 15px -1px rgba($color, shadowOpacity(.04)); +} + +// Similar to shadow medium but without the bottom depth. Useful for popovers +// that drop UP rather than DOWN. +@mixin euiBottomShadowFlat($color: $euiShadowColor) { + box-shadow: + 0 0 .8px rgba($color, shadowOpacity(.06)), + 0 0 2px rgba($color, shadowOpacity(.04)), + 0 0 5px rgba($color, shadowOpacity(.04)), + 0 0 17px rgba($color, shadowOpacity(.03)); +} + +@mixin euiBottomShadow($color: $euiShadowColor) { + box-shadow: + 0 1px 5px rgba($color, shadowOpacity(.1)), + 0 3.6px 13px rgba($color, shadowOpacity(.07)), + 0 8.4px 23px rgba($color, shadowOpacity(.06)), + 0 23px 35px rgba($color, shadowOpacity(.05)); +} + +@mixin euiBottomShadowLarge( + $color: $euiShadowColor, + $opacity: 0, + $reverse: false +) { + @if ($reverse) { + box-shadow: + 0 -2.7px 9px rgba($color, shadowOpacity(.13)), + 0 -9.4px 24px rgba($color, shadowOpacity(.09)), + 0 -21.8px 43px rgba($color, shadowOpacity(.08)); + } @else { + box-shadow: + 0 2.7px 9px rgba($color, shadowOpacity(.13)), + 0 9.4px 24px rgba($color, shadowOpacity(.09)), + 0 21.8px 43px rgba($color, shadowOpacity(.08)); + } +} + +// stylelint-disable color-named +@mixin euiOverflowShadow($direction: 'y', $side: 'both') { + $hideHeight: $euiScrollBarCornerThin * 1.25; + $gradient: null; + $gradientStart: + transparentize(red, .9) 0%, + transparentize(red, 0) $hideHeight; + $gradientEnd: + transparentize(red, 0) calc(100% - #{$hideHeight}), + transparentize(red, .9) 100%; + @if ($side == 'both' or $side == 'start' or $side == 'end') { + @if ($side == 'both') { + $gradient: $gradientStart, $gradientEnd; + } @else if ($side == 'start') { + $gradient: $gradientStart; + } @else { + $gradient: $gradientEnd; + } + } @else { + @warn "euiOverflowShadow() expects side to be 'both', 'start' or 'end' but got '#{$side}'"; + } + + @if ($direction == 'y') { + mask-image: linear-gradient(to bottom, #{$gradient}); + } @else if ($direction == 'x') { + mask-image: linear-gradient(to right, #{$gradient}); + } @else { + @warn "euiOverflowShadow() expects direction to be 'y' or 'x' but got '#{$direction}'"; + } + + // Chrome+Edge has a very bizarre edge case bug where `mask-image` stops working + // This workaround forces a stacking context on the scrolling container, which + // hopefully addresses the bug. @see https://github.com/elastic/eui/pull/7855 + transform: translateZ(0); +} diff --git a/packages/eui-theme-common/src/global_styling/mixins/_size.scss b/packages/eui-theme-common/src/global_styling/mixins/_size.scss new file mode 100644 index 00000000000..809dc870bf8 --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/mixins/_size.scss @@ -0,0 +1,4 @@ +@mixin size($size) { + width: $size; + height: $size; +} diff --git a/packages/eui-theme-common/src/global_styling/mixins/_states.scss b/packages/eui-theme-common/src/global_styling/mixins/_states.scss new file mode 100644 index 00000000000..a2d1bc83aef --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/mixins/_states.scss @@ -0,0 +1,50 @@ +@mixin euiFocusRing($size: 'small', $amsterdamOnlyProp: null) { + @if $size == 'large' { + // It's always OK to use the focus animation. This will take precedence over times we turn it off individually like EuiButtonEmpty + // stylelint-disable-next-line declaration-no-important + animation: $euiAnimSpeedSlow $euiAnimSlightResistance 1 normal forwards focusRingAnimateLarge !important; + } @else { + // stylelint-disable-next-line declaration-no-important + animation: $euiAnimSpeedSlow $euiAnimSlightResistance 1 normal forwards focusRingAnimate !important; + } +} + +// Keyframe animation declarations can be found in +// utility/animations.scss + +@mixin euiFocusBackground($color: $euiColorPrimary) { + background-color: tintOrShade($euiColorPrimary, ((1 - $euiFocusTransparency) * 100%), ((1 - $euiFocusTransparency) * 100%)); +} + +@mixin euiHoverState { + cursor: pointer; + text-decoration: underline; +} + +@mixin euiFocusState($color: $euiColorPrimary) { + @include euiHoverState; + @include euiFocusBackground($color); +} + +@mixin euiDisabledState($color: $euiButtonColorDisabledText) { + cursor: not-allowed; + text-decoration: none; + + @if ($color) { + color: $color; + } +} + +@mixin euiInteractiveStates($focusColor: $euiColorPrimary, $disabledColor: $euiButtonColorDisabledText) { + &:hover { + @include euiHoverState; + } + + &:focus { + @include euiFocusState($focusColor); + } + + &:disabled { + @include euiDisabledState($disabledColor); + } +} diff --git a/packages/eui-theme-common/src/global_styling/mixins/_tool_tip.scss b/packages/eui-theme-common/src/global_styling/mixins/_tool_tip.scss new file mode 100644 index 00000000000..d8feb0d4258 --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/mixins/_tool_tip.scss @@ -0,0 +1,25 @@ +@mixin euiToolTipStyle($size: null) { + @include euiBottomShadow($color: $euiColorInk); + + $euiTooltipBackgroundColor: tintOrShade($euiColorFullShade, 25%, 100%) !default; + $euiTooltipBorderColor: tintOrShade($euiColorFullShade, 35%, 80%) !default; + + border-radius: $euiBorderRadius; + background-color: $euiTooltipBackgroundColor; + color: $euiColorGhost; + z-index: $euiZLevel9; + max-width: 256px; + overflow-wrap: break-word; + padding: $euiSizeS; + + .euiHorizontalRule { + background-color: $euiTooltipBorderColor; + } +} + +@mixin euiToolTipTitle { + font-weight: $euiFontWeightBold; + border-bottom: solid $euiBorderWidthThin $euiTooltipBorderColor; + padding-bottom: $euiSizeXS; + margin-bottom: $euiSizeXS; +} \ No newline at end of file diff --git a/packages/eui-theme-common/src/global_styling/mixins/_typography.scss b/packages/eui-theme-common/src/global_styling/mixins/_typography.scss new file mode 100644 index 00000000000..7090f0e2371 --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/mixins/_typography.scss @@ -0,0 +1,167 @@ +// stylelint-disable property-no-vendor-prefix +// stylelint-disable declaration-no-important + +@function fontSizeToRemOrEm($size, $sizingMethod: 'rem') { + @if ($sizingMethod == 'rem') { + @return #{$size / $euiFontSize}rem; + } @else if ($sizingMethod == 'em') { + @return #{$size / $euiFontSize}em; + } +} + +// It can also be applied to calculate paddings +@function marginToRemOrEm($elementSize, $elementFontSize, $sizingMethod: 'rem') { + @if ($sizingMethod == 'rem') { + @return #{$elementSize / $euiFontSize}rem; + } @else if ($sizingMethod == 'em') { + @return #{$elementSize / $elementFontSize}em; + } +} + +// Spit out rem and px +@mixin fontSize($size: $euiFontSize, $sizingMethod: 'rem') { + @if ($sizingMethod == 'rem') { + font-size: $size; + font-size: fontSizeToRemOrEm($size, 'rem'); + } @else if ($sizingMethod == 'em') { + font-size: fontSizeToRemOrEm($size, 'em'); + } +} + +@mixin lineHeightFromBaseline($multiplier: 3) { + line-height: lineHeightFromBaseline($multiplier); +} + +// Some mixins that help us deal with browser scaling of text more consistently. +// Essentially, fonts across eui should scale against the root html element, not +// against parent inheritance. + +// Our base fonts + +@mixin euiFont { + font-family: $euiFontFamily; + font-weight: $euiFontWeightRegular; + letter-spacing: -.005em; + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; + font-kerning: normal; +} + +@mixin euiCodeFont { + font-family: $euiCodeFontFamily; + letter-spacing: normal; +} + +@mixin euiText { + color: $euiTextColor; + font-weight: $euiFontWeightRegular; +} + +@mixin euiTitle($size: 'm') { + @include euiTextBreakWord; + color: $euiTitleColor; + + @if (map-has-key($euiTitles, $size)) { + @each $property, $value in map-get($euiTitles, $size) { + @if ($property == 'font-size') { + @include fontSize($value); + } @else { + #{$property}: $value; + } + } + } @else { + @include fontSize($size); + @include lineHeightFromBaseline(3); + } +} + +// Font sizing extends, using rem mixin + +@mixin euiFontSizeXS { + @include fontSize($euiFontSizeXS); + line-height: $euiLineHeight; +} + +@mixin euiFontSizeS { + @include fontSize($euiFontSizeS); + line-height: $euiLineHeight; +} + +@mixin euiFontSize { + @include fontSize($euiFontSize); + line-height: $euiLineHeight; +} + +@mixin euiFontSizeM { + @include fontSize($euiFontSizeM); + line-height: $euiLineHeight; +} + +@mixin euiFontSizeL { + @include fontSize($euiFontSizeL); + line-height: $euiLineHeight; +} + +@mixin euiFontSizeXL { + @each $property, $value in map-get($euiTitles, 'm') { + @if ($property == 'font-size') { + @include fontSize($value); + } @else { + #{$property}: $value; + } + } + line-height: 1.25; +} + +@mixin euiFontSizeXXL { + @each $property, $value in map-get($euiTitles, 'l') { + @if ($property == 'font-size') { + @include fontSize($value); + } @else { + #{$property}: $value; + } + } + line-height: 1.25; +} + +@mixin euiTextBreakWord { + // https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/ + overflow-wrap: break-word !important; // makes sure the long string will wrap and not bust out of the container + word-break: break-word; +} + +/** + * Text truncation + * + * Prevent text from wrapping onto multiple lines, and truncate with an ellipsis. + * + * 1. Ensure that the node has a maximum width after which truncation can occur. + */ +@mixin euiTextTruncate { + max-width: 100%; // 1 + overflow: hidden !important; + text-overflow: ellipsis !important; + white-space: nowrap !important; +} + +@mixin euiNumberFormat { + font-feature-settings: $euiFontFeatureSettings, 'tnum' 1; // Fixed-width numbers for tabular data +} + +/** + * Text weight shifting + * + * When changing the font-weight based the state of the component + * this mixin will ensure that the sizing is dependent on the boldest + * weight so it doesn't shifter sibling content. + */ +@mixin euiTextShift($fontWeight: $euiFontWeightBold, $attr: 'data-text') { + &::after { + display: block; + content: attr(#{$attr}); + font-weight: $fontWeight; + height: 0; + overflow: hidden; + visibility: hidden; + } +} diff --git a/packages/eui-theme-common/src/global_styling/types.ts b/packages/eui-theme-common/src/global_styling/types.ts new file mode 100644 index 00000000000..e2b7a96a9ff --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/types.ts @@ -0,0 +1,106 @@ +/* + * 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 { CSSObject } from '@emotion/react'; + +import type { RecursivePartial, ValueOf } from '../types'; + +import { _EuiThemeAnimation } from './variables/animations'; +import { _EuiThemeBreakpoints } from './variables/breakpoint'; +import { _EuiThemeBorder } from './variables/borders'; +import { _EuiThemeColors } from './variables/colors'; +import { _EuiThemeBase, _EuiThemeSizes } from './variables/size'; +import { _EuiThemeFont } from './variables/typography'; +import { _EuiThemeFocus } from './variables/states'; +import { _EuiThemeLevels } from './variables/levels'; + +export const COLOR_MODES_STANDARD = { + light: 'LIGHT', + dark: 'DARK', +} as const; +export const COLOR_MODES_INVERSE = 'INVERSE' as const; + +export type EuiThemeColorModeInverse = typeof COLOR_MODES_INVERSE; +export type EuiThemeColorModeStandard = ValueOf; +export type EuiThemeColorMode = + | 'light' + | 'dark' + | EuiThemeColorModeStandard + | 'inverse' + | EuiThemeColorModeInverse; + +export type ColorModeSwitch = + | { + [key in EuiThemeColorModeStandard]: T; + } + | T; + +export type StrictColorModeSwitch = { + [key in EuiThemeColorModeStandard]: T; +}; + +export type EuiThemeShape = { + colors: _EuiThemeColors; + /** - Default value: 16 */ + base: _EuiThemeBase; + /** + * @see {@link https://eui.elastic.co/#/theming/sizing | Reference} for more information + */ + size: _EuiThemeSizes; + font: _EuiThemeFont; + border: _EuiThemeBorder; + focus: _EuiThemeFocus; + animation: _EuiThemeAnimation; + breakpoint: _EuiThemeBreakpoints; + levels: _EuiThemeLevels; +}; + +export type EuiThemeSystem = { + root: EuiThemeShape & T; + model: EuiThemeShape & T; + key: string; +}; + +export type EuiThemeModifications = RecursivePartial; + +export type ComputedThemeShape< + T, + P = string | number | bigint | boolean | null | undefined +> = T extends P | ColorModeSwitch + ? T extends ColorModeSwitch + ? X extends P + ? X + : { + [K in keyof (X & + Exclude< + T, + keyof X | keyof StrictColorModeSwitch + >)]: ComputedThemeShape< + (X & Exclude)[K], + P + >; + } + : T + : { + [K in keyof T]: ComputedThemeShape; + }; + +export type EuiThemeComputed = ComputedThemeShape & { + themeName: string; +}; + +export type EuiThemeNested = { + isGlobalTheme: boolean; + hasDifferentColorFromGlobalTheme: boolean; + bodyColor: string; + colorClassName: string; + setGlobalCSSVariables: Function; + globalCSSVariables?: CSSObject; + setNearestThemeCSSVariables: Function; + themeCSSVariables?: CSSObject; +}; diff --git a/packages/eui-theme-common/src/global_styling/variables/_animations.scss b/packages/eui-theme-common/src/global_styling/variables/_animations.scss new file mode 100644 index 00000000000..93b9daf1641 --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/variables/_animations.scss @@ -0,0 +1,13 @@ +// Animations + +$euiAnimSlightBounce: cubic-bezier(.34, 1.61, .7, 1) !default; +$euiAnimSlightResistance: cubic-bezier(.694, .0482, .335, 1) !default; + +$euiAnimSpeedExtraFast: 90ms !default; +$euiAnimSpeedFast: 150ms !default; +$euiAnimSpeedNormal: 250ms !default; +$euiAnimSpeedSlow: 350ms !default; +$euiAnimSpeedExtraSlow: 500ms !default; + +// Keyframe animation declarations can be found in +// eui/utility/animations.scss diff --git a/packages/eui-theme-common/src/global_styling/variables/_borders.scss b/packages/eui-theme-common/src/global_styling/variables/_borders.scss new file mode 100644 index 00000000000..6fa0216ff3b --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/variables/_borders.scss @@ -0,0 +1,11 @@ +// Borders + +$euiBorderWidthThin: 1px !default; +$euiBorderWidthThick: 2px !default; + +$euiBorderColor: $euiColorLightShade !default; +$euiBorderRadius: $euiSizeS * .75 !default; +$euiBorderRadiusSmall: $euiSizeS * .5 !default; +$euiBorderThick: $euiBorderWidthThick solid $euiBorderColor !default; +$euiBorderThin: $euiBorderWidthThin solid $euiBorderColor !default; +$euiBorderEditable: $euiBorderWidthThick dotted $euiBorderColor !default; diff --git a/packages/eui-theme-common/src/global_styling/variables/_buttons.scss b/packages/eui-theme-common/src/global_styling/variables/_buttons.scss new file mode 100644 index 00000000000..4d4e8a5f0b1 --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/variables/_buttons.scss @@ -0,0 +1,18 @@ +$euiButtonHeight: $euiSizeXXL !default; +$euiButtonHeightSmall: $euiSizeXL !default; +$euiButtonHeightXSmall: $euiSizeL !default; + +// Modifier naming and colors. +$euiButtonTypes: ( + primary: $euiColorPrimary, + accent: $euiColorAccent, + success: $euiColorSuccess, + warning: $euiColorWarning, + danger: $euiColorDanger, + ghost: $euiColorGhost, // Ghost is special, and does not care about theming. + text: $euiColorDarkShade, // 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: $euiColorDisabledText; diff --git a/packages/eui-theme-common/src/global_styling/variables/_colors_vis.scss b/packages/eui-theme-common/src/global_styling/variables/_colors_vis.scss new file mode 100644 index 00000000000..cfffdf5e55d --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/variables/_colors_vis.scss @@ -0,0 +1,72 @@ +// Visualization colors +// stylelint-disable color-no-hex + +// Maps allow for easier JSON usage +// Use map_merge($euiColorVisColors, $yourMap) to change individual colors after importing ths file +// The `behindText` variant is a direct copy of the hex output by the JS euiPaletteColorBlindBehindText() function +$euiPaletteColorBlind: ( + euiColorVis0: ( + graphic: #54B399, + behindText: #6DCCB1, + ), + euiColorVis1: ( + graphic: #6092C0, + behindText: #79AAD9, + ), + euiColorVis2: ( + graphic: #D36086, + behindText: #EE789D, + ), + euiColorVis3: ( + graphic: #9170B8, + behindText: #A987D1, + ), + euiColorVis4: ( + graphic: #CA8EAE, + behindText: #E4A6C7, + ), + euiColorVis5: ( + graphic: #D6BF57, + behindText: #F1D86F, + ), + euiColorVis6: ( + graphic: #B9A888, + behindText: #D2C0A0, + ), + euiColorVis7: ( + graphic: #DA8B45, + behindText: #F5A35C, + ), + euiColorVis8: ( + graphic: #AA6556, + behindText: #C47C6C, + ), + euiColorVis9: ( + graphic: #E7664C, + behindText: #FF7E62, + ) +) !default; + +$euiPaletteColorBlindKeys: map-keys($euiPaletteColorBlind); + +$euiColorVis0: map-get(map-get($euiPaletteColorBlind, 'euiColorVis0'), 'graphic') !default; +$euiColorVis1: map-get(map-get($euiPaletteColorBlind, 'euiColorVis1'), 'graphic') !default; +$euiColorVis2: map-get(map-get($euiPaletteColorBlind, 'euiColorVis2'), 'graphic') !default; +$euiColorVis3: map-get(map-get($euiPaletteColorBlind, 'euiColorVis3'), 'graphic') !default; +$euiColorVis4: map-get(map-get($euiPaletteColorBlind, 'euiColorVis4'), 'graphic') !default; +$euiColorVis5: map-get(map-get($euiPaletteColorBlind, 'euiColorVis5'), 'graphic') !default; +$euiColorVis6: map-get(map-get($euiPaletteColorBlind, 'euiColorVis6'), 'graphic') !default; +$euiColorVis7: map-get(map-get($euiPaletteColorBlind, 'euiColorVis7'), 'graphic') !default; +$euiColorVis8: map-get(map-get($euiPaletteColorBlind, 'euiColorVis8'), 'graphic') !default; +$euiColorVis9: map-get(map-get($euiPaletteColorBlind, 'euiColorVis9'), 'graphic') !default; + +$euiColorVis0_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis0'), 'behindText') !default; +$euiColorVis1_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis1'), 'behindText') !default; +$euiColorVis2_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis2'), 'behindText') !default; +$euiColorVis3_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis3'), 'behindText') !default; +$euiColorVis4_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis4'), 'behindText') !default; +$euiColorVis5_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis5'), 'behindText') !default; +$euiColorVis6_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis6'), 'behindText') !default; +$euiColorVis7_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis7'), 'behindText') !default; +$euiColorVis8_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis8'), 'behindText') !default; +$euiColorVis9_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis9'), 'behindText') !default; diff --git a/packages/eui-theme-common/src/global_styling/variables/_colors_vis.ts b/packages/eui-theme-common/src/global_styling/variables/_colors_vis.ts new file mode 100644 index 00000000000..4459b04ff8c --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/variables/_colors_vis.ts @@ -0,0 +1,62 @@ +/* + * 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. + */ + +/** + * NOTE: These were quick conversions of their Sass counterparts. + * They have yet to be used/tested. + * TODO: Make the graphic version available from `euiPaletteColorBlind()` + */ + +// Maps allow for easier JSON usage +// Use map_merge(euiColorVisColors, $yourMap) to change individual colors after importing ths file +// The `behindText` variant is a direct copy of the hex output by the JS euiPaletteColorBlindBehindText() function +const euiPaletteColorBlind = { + euiColorVis0: { + graphic: '#54B399', + }, + euiColorVis1: { + graphic: '#6092C0', + }, + euiColorVis2: { + graphic: '#D36086', + }, + euiColorVis3: { + graphic: '#9170B8', + }, + euiColorVis4: { + graphic: '#CA8EAE', + }, + euiColorVis5: { + graphic: '#D6BF57', + }, + euiColorVis6: { + graphic: '#B9A888', + }, + euiColorVis7: { + graphic: '#DA8B45', + }, + euiColorVis8: { + graphic: '#AA6556', + }, + euiColorVis9: { + graphic: '#E7664C', + }, +}; + +export const colorVis = { + euiColorVis0: euiPaletteColorBlind.euiColorVis0.graphic, + euiColorVis1: euiPaletteColorBlind.euiColorVis1.graphic, + euiColorVis2: euiPaletteColorBlind.euiColorVis2.graphic, + euiColorVis3: euiPaletteColorBlind.euiColorVis3.graphic, + euiColorVis4: euiPaletteColorBlind.euiColorVis4.graphic, + euiColorVis5: euiPaletteColorBlind.euiColorVis5.graphic, + euiColorVis6: euiPaletteColorBlind.euiColorVis6.graphic, + euiColorVis7: euiPaletteColorBlind.euiColorVis7.graphic, + euiColorVis8: euiPaletteColorBlind.euiColorVis8.graphic, + euiColorVis9: euiPaletteColorBlind.euiColorVis9.graphic, +}; diff --git a/packages/eui-theme-common/src/global_styling/variables/_font_weight.scss b/packages/eui-theme-common/src/global_styling/variables/_font_weight.scss new file mode 100644 index 00000000000..f5dfd287835 --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/variables/_font_weight.scss @@ -0,0 +1,10 @@ +// Separated out to its own file for easy import into docs + +// Font weights +$euiFontWeightLight: 300 !default; +$euiFontWeightRegular: 400 !default; +$euiFontWeightMedium: 500 !default; +$euiFontWeightSemiBold: 600 !default; +$euiFontWeightBold: 700 !default; +$euiCodeFontWeightRegular: 400 !default; +$euiCodeFontWeightBold: 700 !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 new file mode 100644 index 00000000000..41c5dfad04e --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/variables/_form.scss @@ -0,0 +1,21 @@ +// Sizing +$euiFormMaxWidth: $euiSizeXXL * 10 !default; +$euiFormControlHeight: $euiSizeXXL !default; +$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 diff --git a/packages/eui-theme-common/src/global_styling/variables/_index.scss b/packages/eui-theme-common/src/global_styling/variables/_index.scss new file mode 100644 index 00000000000..993979a78a5 --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/variables/_index.scss @@ -0,0 +1,23 @@ +// -------------------------------------------------------------------------------------- +// EUI global variables +// -------------------------------------------------------------------------------------- +// This module contains all global variables available within EUI. Every variable in this +// document should be prefixed with $eui. This lets us know where the variable is +// coming from when looking inside the individual component files. Any component local +// variables should be declared at the top of those documents prefixed with $componentName. + +// Global colors are established and importer per theme, before this manifest +// Import order is important. Size, vis colors, ...etc are used in other variables. +@import 'size'; +@import 'colors_vis'; +@import 'animations'; +@import 'font_weight'; +@import 'typography'; +@import 'borders'; +@import 'responsive'; +@import 'shadows'; +@import 'states'; +@import 'z_index'; + +@import 'buttons'; +@import 'form'; diff --git a/packages/eui-theme-common/src/global_styling/variables/_responsive.scss b/packages/eui-theme-common/src/global_styling/variables/_responsive.scss new file mode 100644 index 00000000000..de6e8ca5b83 --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/variables/_responsive.scss @@ -0,0 +1,9 @@ +$euiBreakpoints: ( + 'xs': 0, + 's': 575px, + 'm': 768px, + 'l': 992px, + 'xl': 1200px +) !default; + +$euiBreakpointKeys: map-keys($euiBreakpoints); diff --git a/packages/eui-theme-common/src/global_styling/variables/_shadows.scss b/packages/eui-theme-common/src/global_styling/variables/_shadows.scss new file mode 100644 index 00000000000..05e445f27a1 --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/variables/_shadows.scss @@ -0,0 +1,2 @@ +// Shadows +$euiShadowColor: $euiColorInk !default; diff --git a/packages/eui-theme-common/src/global_styling/variables/_size.scss b/packages/eui-theme-common/src/global_styling/variables/_size.scss new file mode 100644 index 00000000000..29eca9c1b00 --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/variables/_size.scss @@ -0,0 +1,13 @@ +$euiSize: 16px !default; + +$euiSizeXS: $euiSize * .25 !default; +$euiSizeS: $euiSize * .5 !default; +$euiSizeM: $euiSize * .75 !default; +$euiSizeL: $euiSize * 1.5 !default; +$euiSizeXL: $euiSize * 2 !default; +$euiSizeXXL: $euiSize * 2.5 !default; + +$euiScrollBar: $euiSize !default; +// Corner sizes are used as an inset border and therefore a smaller corner size means a larger thumb +$euiScrollBarCorner: $euiSizeXS !default; +$euiScrollBarCornerThin: $euiSizeS * .75 !default; diff --git a/packages/eui-theme-common/src/global_styling/variables/_states.scss b/packages/eui-theme-common/src/global_styling/variables/_states.scss new file mode 100644 index 00000000000..fba4cc59caa --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/variables/_states.scss @@ -0,0 +1,14 @@ +// Colors +$euiFocusRingColor: rgba($euiColorPrimary, .3) !default; +$euiFocusRingAnimStartColor: rgba($euiColorPrimary, 0) !default; +$euiFocusRingAnimStartSize: 6px !default; +$euiFocusRingAnimStartSizeLarge: 10px !default; + +// Sizing +$euiFocusRingSizeLarge: $euiSizeXS !default; +$euiFocusRingSize: $euiFocusRingSizeLarge * .75 !default; + +// Transparency +$euiFocusTransparency: lightOrDarkTheme(.1, .2) !default; +$euiFocusTransparencyPercent: lightOrDarkTheme(90%, 80%) !default; +$euiFocusBackgroundColor: tintOrShade($euiColorPrimary, $euiFocusTransparencyPercent, $euiFocusTransparencyPercent) !default; diff --git a/packages/eui-theme-common/src/global_styling/variables/_typography.scss b/packages/eui-theme-common/src/global_styling/variables/_typography.scss new file mode 100644 index 00000000000..1ca62f3248c --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/variables/_typography.scss @@ -0,0 +1,75 @@ +// Families +$euiFontFamily: 'Inter', BlinkMacSystemFont, Helvetica, Arial, sans-serif !default; +$euiCodeFontFamily: 'Roboto Mono', Menlo, Courier, monospace !default; + +// Careful using ligatures. Code editors like ACE will often error because of width calculations +$euiFontFeatureSettings: 'calt' 1, 'kern' 1, 'liga' 1 !default; + +// Font sizes -- scale is loosely based on Major Third (1.250) +$euiTextScale: 2.25, 1.75, 1.25, 1.125, 1, .875, .75 !default; + +$euiFontSize: $euiSize !default; // 5th position in scale +$euiFontSizeXS: $euiFontSize * nth($euiTextScale, 7) !default; // 12px +$euiFontSizeS: $euiFontSize * nth($euiTextScale, 6) !default; // 14px +$euiFontSizeM: $euiFontSize * nth($euiTextScale, 4) !default; // 18px +$euiFontSizeL: $euiFontSize * nth($euiTextScale, 3) !default; // 20px +$euiFontSizeXL: $euiFontSize * nth($euiTextScale, 2) !default; // 28px +$euiFontSizeXXL: $euiFontSize * nth($euiTextScale, 1) !default; // 36px + +// Line height +$euiLineHeight: 1.5 !default; +$euiBodyLineHeight: 1 !default; + +// Normally functions are imported before variables in `_index.scss` files +// But because they need to consume some typography variables they need to live here +@function convertToRem($size) { + @return #{$size / $euiFontSize}rem; +} + +// Our base gridline is at 1/2 the font-size, ensure line-heights stay on that gridline. +// EX: A proper line-height for text is 1.5 times the font-size. +// If our base font size (euiFontSize) is 16, our baseline is 8 (16*1.5 / 3). To ensure the +// text stays on the baseline, we pass a multiplier to calculate a line-height in rems. +@function lineHeightFromBaseline($multiplier: 3) { + @return convertToRem(($euiFontSize / 2) * $multiplier); +} + +// Titles map +// Lists all the properties per EuiTitle size that then gets looped through to create the selectors. +// The map allows for tokenization and easier customization per theme, otherwise you'd have to override the selectors themselves +$euiTitles: ( + 'xxxs': ( + 'font-size': $euiFontSizeXS, + 'line-height': lineHeightFromBaseline(3), + 'font-weight': $euiFontWeightBold, + ), + 'xxs': ( + 'font-size': $euiFontSizeS, + 'line-height': lineHeightFromBaseline(3), + 'font-weight': $euiFontWeightBold, + ), + 'xs': ( + 'font-size': $euiFontSize, + 'line-height': lineHeightFromBaseline(3), + 'font-weight': $euiFontWeightSemiBold, + 'letter-spacing': -.02em, + ), + 's': ( + 'font-size': $euiFontSizeL, + 'line-height': lineHeightFromBaseline(4), + 'font-weight': $euiFontWeightMedium, + 'letter-spacing': -.025em, + ), + 'm': ( + 'font-size': $euiFontSizeXL, + 'line-height': lineHeightFromBaseline(5), + 'font-weight': $euiFontWeightLight, + 'letter-spacing': -.04em, + ), + 'l': ( + 'font-size': $euiFontSizeXXL, + 'line-height': lineHeightFromBaseline(6), + 'font-weight': $euiFontWeightLight, + 'letter-spacing': -.03em, + ), +) !default; diff --git a/packages/eui-theme-common/src/global_styling/variables/_z_index.scss b/packages/eui-theme-common/src/global_styling/variables/_z_index.scss new file mode 100644 index 00000000000..2448a34c61a --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/variables/_z_index.scss @@ -0,0 +1,34 @@ +// Z-Index + +// Remember that z-index is relative to parent and based on the stacking context. +// z-indexes only compete against other z-indexes when they exist as children of +// that shared parent. + +// That means a popover with a settings of 2, will still show above a modal +// with a setting of 100, if it is within that modal and not besides it. + +// Generally that means it's a good idea to consider things added to this file +// as competitive only as siblings. + +// https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context + +$euiZLevel0: 0; +$euiZLevel1: 1000; +$euiZLevel2: 2000; +$euiZLevel3: 3000; +$euiZLevel4: 4000; +$euiZLevel5: 5000; +$euiZLevel6: 6000; +$euiZLevel7: 7000; +$euiZLevel8: 8000; +$euiZLevel9: 9000; + +$euiZToastList: $euiZLevel9; +$euiZModal: $euiZLevel8; +$euiZMask: $euiZLevel6; +$euiZNavigation: $euiZLevel6; +$euiZContentMenu: $euiZLevel2; +$euiZHeader: $euiZLevel1; +$euiZFlyout: $euiZHeader; +$euiZMaskBelowHeader: $euiZHeader; +$euiZContent: $euiZLevel0; diff --git a/packages/eui-theme-common/src/global_styling/variables/animations.ts b/packages/eui-theme-common/src/global_styling/variables/animations.ts new file mode 100644 index 00000000000..46bce009c92 --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/variables/animations.ts @@ -0,0 +1,66 @@ +/* + * 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 { CSSProperties } from 'react'; + +/** + * A constant storing the `prefers-reduced-motion` media query + * so that when it is turned off, animations are not run. + */ +export const euiCanAnimate = + '@media screen and (prefers-reduced-motion: no-preference)'; + +/** + * A constant storing the `prefers-reduced-motion` media query that will + * only apply the content if the setting is off (reduce). + */ +export const euiCantAnimate = + '@media screen and (prefers-reduced-motion: reduce)'; + +/** + * Speeds / Durations / Delays + */ + +export const EuiThemeAnimationSpeeds = [ + 'extraFast', + 'fast', + 'normal', + 'slow', + 'extraSlow', +] as const; + +export type _EuiThemeAnimationSpeed = (typeof EuiThemeAnimationSpeeds)[number]; + +export type _EuiThemeAnimationSpeeds = { + /** - Default value: 90ms */ + extraFast: CSSProperties['animationDuration']; + /** - Default value: 150ms */ + fast: CSSProperties['animationDuration']; + /** - Default value: 250ms */ + normal: CSSProperties['animationDuration']; + /** - Default value: 350ms */ + slow: CSSProperties['animationDuration']; + /** - Default value: 500ms */ + extraSlow: CSSProperties['animationDuration']; +}; + +/** + * Easings / Timing functions + */ + +export const EuiThemeAnimationEasings = ['bounce', 'resistance'] as const; + +export type _EuiThemeAnimationEasing = + (typeof EuiThemeAnimationEasings)[number]; + +export type _EuiThemeAnimationEasings = Record< + _EuiThemeAnimationEasing, + CSSProperties['animationTimingFunction'] +>; + +export type _EuiThemeAnimation = _EuiThemeAnimationEasings & + _EuiThemeAnimationSpeeds; diff --git a/packages/eui-theme-common/src/global_styling/variables/borders.ts b/packages/eui-theme-common/src/global_styling/variables/borders.ts new file mode 100644 index 00000000000..3673010aba2 --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/variables/borders.ts @@ -0,0 +1,74 @@ +/* + * 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 { CSSProperties } from 'react'; +import { ColorModeSwitch } from '../types'; + +export interface _EuiThemeBorderWidthValues { + /** + * Thinnest width for border + * - Default value: 1px + */ + thin: CSSProperties['borderWidth']; + /** + * Thickest width for border + * - Default value: 2px + */ + thick: CSSProperties['borderWidth']; +} + +export interface _EuiThemeBorderRadiusValues { + /** + * Primary corner radius size + * - Default value: 6px + */ + medium: CSSProperties['borderRadius']; + /** + * Small corner radius size + * - Default value: 4px + */ + small: CSSProperties['borderRadius']; +} + +export interface _EuiThemeBorderColorValues { + /** + * Color for all borders; Default is `colors.lightShade` + */ + color: ColorModeSwitch; +} + +export interface _EuiThemeBorderValues extends _EuiThemeBorderColorValues { + /** + * Varied thicknesses for borders + */ + width: _EuiThemeBorderWidthValues; + /** + * Varied border radii + */ + radius: _EuiThemeBorderRadiusValues; +} + +export interface _EuiThemeBorderTypes { + /** + * Full `border` property string computed using `border.width.thin` and `border.color` + * - Default value: 1px solid [colors.lightShade] + */ + thin: CSSProperties['border']; + /** + * Full `border` property string computed using `border.width.thick` and `border.color` + * - Default value: 2px solid [colors.lightShade] + */ + thick: CSSProperties['border']; + /** + * Full editable style `border` property string computed using `border.width.thick` and `border.color` + * - Default value: 2px dotted [colors.lightShade] + */ + editable: CSSProperties['border']; +} + +export type _EuiThemeBorder = _EuiThemeBorderValues & _EuiThemeBorderTypes; diff --git a/packages/eui-theme-common/src/global_styling/variables/breakpoint.ts b/packages/eui-theme-common/src/global_styling/variables/breakpoint.ts new file mode 100644 index 00000000000..68aef1fba38 --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/variables/breakpoint.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. + */ + +export const EuiThemeBreakpoints = ['xs', 's', 'm', 'l', 'xl'] as const; + +// This type cannot be a string enum / must be a generic string +// in case consumers add custom breakpoint sizes, such as xxl or xxs +export type _EuiThemeBreakpoint = string; + +// Explicitly list out each key so we can document default values +// via JSDoc (which is available to devs in IDE via intellisense) +export type _EuiThemeBreakpoints = Record<_EuiThemeBreakpoint, number> & { + /** - Default value: 0 */ + xs: number; + /** - Default value: 575 */ + s: number; + /** - Default value: 768 */ + m: number; + /** - Default value: 992 */ + l: number; + /** - Default value: 1200 */ + xl: number; +}; diff --git a/packages/eui-theme-common/src/global_styling/variables/colors.ts b/packages/eui-theme-common/src/global_styling/variables/colors.ts new file mode 100644 index 00000000000..8604ecafba4 --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/variables/colors.ts @@ -0,0 +1,156 @@ +/* + * 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'; + +/** + * Top 5 colors + */ +export type _EuiThemeBrandColors = { + /** + * Main brand color and used for most **call to actions** like buttons and links. + */ + primary: ColorModeSwitch; + /** + * Pulls attention to key indicators like **notifications** or number of selections. + */ + accent: ColorModeSwitch; + /** + * Used for **positive** messages/graphics and additive actions. + */ + success: ColorModeSwitch; + /** + * Used for **warnings** and actions that have a potential to be destructive. + */ + warning: ColorModeSwitch; + /** + * Used for **negative** messages/graphics like errors and destructive actions. + */ + danger: ColorModeSwitch; +}; + +/** + * Every brand color must have a contrast computed text equivelant + */ +export type _EuiThemeBrandTextColors = { + /** + * Typically computed against `colors.primary` + */ + primaryText: ColorModeSwitch; + /** + * Typically computed against `colors.accent` + */ + accentText: ColorModeSwitch; + /** + * Typically computed against `colors.success` + */ + successText: ColorModeSwitch; + /** + * Typically computed against `colors.warning` + */ + warningText: ColorModeSwitch; + /** + * Typically computed against `colors.danger` + */ + dangerText: ColorModeSwitch; +}; + +export type _EuiThemeShadeColors = { + /** + * Used as the background color of primary **page content and panels** including modals and flyouts. + */ + emptyShade: ColorModeSwitch; + /** + * Used to lightly shade areas that contain **secondary content** or contain panel-like components. + */ + lightestShade: ColorModeSwitch; + /** + * Used for most **borders** and dividers (horizontal rules). + */ + lightShade: ColorModeSwitch; + /** + * The middle gray for all themes; this is the base for `colors.subdued`. + */ + mediumShade: ColorModeSwitch; + /** + * Slightly subtle graphic color + */ + darkShade: ColorModeSwitch; + /** + * Used as the **text** color and the background color for **inverted components** like tooltips and the control bar. + */ + darkestShade: ColorModeSwitch; + /** + * The opposite of `emptyShade` + */ + fullShade: ColorModeSwitch; +}; + +export type _EuiThemeTextColors = { + /** + * Computed against `colors.darkestShade` + */ + text: ColorModeSwitch; + /** + * Computed against `colors.text` + */ + title: ColorModeSwitch; + /** + * Computed against `colors.mediumShade` + */ + subduedText: ColorModeSwitch; + /** + * Computed against `colors.primaryText` + */ + link: 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**. + */ + body: ColorModeSwitch; + /** + * Used to **highlight text** when matching against search strings + */ + highlight: ColorModeSwitch; + /** + * Computed against `colors.darkestShade` + */ + disabled: ColorModeSwitch; + /** + * Computed against `colors.disabled` + */ + disabledText: ColorModeSwitch; + /** + * The base color for shadows that gets `transparentized` + * at a value based on the `colorMode` and then layered. + */ + shadow: ColorModeSwitch; +}; + +export type _EuiThemeConstantColors = { + /** + * Purest **white** + */ + ghost: string; + /** + * Purest **black** + */ + ink: string; +}; + +export type _EuiThemeColorsMode = _EuiThemeBrandColors & + _EuiThemeBrandTextColors & + _EuiThemeShadeColors & + _EuiThemeSpecialColors & + _EuiThemeTextColors; + +export type _EuiThemeColors = StrictColorModeSwitch<_EuiThemeColorsMode> & + _EuiThemeConstantColors; diff --git a/packages/eui-theme-common/src/global_styling/variables/index.ts b/packages/eui-theme-common/src/global_styling/variables/index.ts new file mode 100644 index 00000000000..48eacef5cbb --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/variables/index.ts @@ -0,0 +1,18 @@ +/* + * 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 * from './animations'; +export * from './borders'; +export * from './breakpoint'; +export * from './colors'; +export * from './_colors_vis'; +export * from './levels'; +export * from './size'; +export * from './shadow'; +export * from './states'; +export * from './typography'; diff --git a/packages/eui-theme-common/src/global_styling/variables/levels.ts b/packages/eui-theme-common/src/global_styling/variables/levels.ts new file mode 100644 index 00000000000..7d38c71791b --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/variables/levels.ts @@ -0,0 +1,60 @@ +/* + * 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 { CSSProperties } from 'react'; + +/** + * Z-Index + * + * Remember that z-index is relative to parent and based on the stacking context. + * z-indexes only compete against other z-indexes when they exist as children of + * that shared parent. + * + * That means a popover with a settings of 2, will still show above a modal + * with a setting of 100, if it is within that modal and not besides it. + * + * Generally that means it's a good idea to consider things added to this file + * as competitive only as siblings. + * + * https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context + */ + +export const EuiThemeLevels = [ + 'toast', + 'modal', + 'mask', + 'navigation', + 'menu', + 'header', + 'flyout', + 'maskBelowHeader', + 'content', +] as const; + +export type _EuiThemeLevel = (typeof EuiThemeLevels)[number]; + +export type _EuiThemeLevels = { + /** - Default value: 9000 */ + toast: NonNullable; + /** - Default value: 8000 */ + modal: NonNullable; + /** - Default value: 6000 */ + mask: NonNullable; + /** - Default value: 6000 */ + navigation: NonNullable; + /** - Default value: 2000 */ + menu: NonNullable; + /** - Default value: 1000 */ + header: NonNullable; + /** - Default value: 1000 */ + flyout: NonNullable; + /** - Default value: 1000 */ + maskBelowHeader: NonNullable; + /** - Default value: 0 */ + content: NonNullable; +}; diff --git a/packages/eui-theme-common/src/global_styling/variables/shadow.ts b/packages/eui-theme-common/src/global_styling/variables/shadow.ts new file mode 100644 index 00000000000..7761fbdb9a0 --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/variables/shadow.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. + */ + +export const EuiThemeShadowSizes = ['xs', 's', 'm', 'l', 'xl'] as const; + +export type _EuiThemeShadowSize = (typeof EuiThemeShadowSizes)[number]; + +/** + * Shadow t-shirt sizes descriptions + */ +export const _EuiShadowSizesDescriptions: Record<_EuiThemeShadowSize, string> = + { + xs: 'Very subtle shadow used on small components.', + s: 'Adds subtle depth, usually used in conjunction with a border.', + m: 'Used on small sized portalled content like popovers.', + l: 'Primary shadow used in most cases to add visible depth.', + xl: 'Very large shadows used for large portalled style containers like modals and flyouts.', + }; + +export interface _EuiThemeShadowCustomColor { + color?: string; + property?: 'box-shadow' | 'filter'; +} diff --git a/packages/eui-theme-common/src/global_styling/variables/size.ts b/packages/eui-theme-common/src/global_styling/variables/size.ts new file mode 100644 index 00000000000..98428346b61 --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/variables/size.ts @@ -0,0 +1,47 @@ +/* + * 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 type _EuiThemeBase = number; + +export const EuiThemeSizes = [ + 'xxs', + 'xs', + 's', + 'm', + 'base', + 'l', + 'xl', + 'xxl', + 'xxxl', + 'xxxxl', +] as const; + +export type _EuiThemeSize = (typeof EuiThemeSizes)[number]; + +export type _EuiThemeSizes = { + /** - Default value: 2px */ + xxs: string; + /** - Default value: 4px */ + xs: string; + /** - Default value: 8px */ + s: string; + /** - Default value: 12px */ + m: string; + /** - Default value: 16px */ + base: string; + /** - Default value: 24px */ + l: string; + /** - Default value: 32px */ + xl: string; + /** - Default value: 40px */ + xxl: string; + /** - Default value: 48px */ + xxxl: string; + /** - Default value: 64px */ + xxxxl: string; +}; diff --git a/packages/eui-theme-common/src/global_styling/variables/states.ts b/packages/eui-theme-common/src/global_styling/variables/states.ts new file mode 100644 index 00000000000..2d0283ac949 --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/variables/states.ts @@ -0,0 +1,33 @@ +/* + * 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 { CSSProperties } from 'react'; +import { ColorModeSwitch } from '../types'; + +export interface _EuiThemeFocus { + /** + * Default color of the focus ring, some components may override this property + * - Default value: currentColor + */ + color: ColorModeSwitch; + /** + * Thickness of the outline + * - Default value: 2px + */ + width: CSSProperties['borderWidth']; + /** + * Used to transparentize the focus background color + * - Default value: { LIGHT: 0.1, DARK: 0.2 } + */ + transparency: ColorModeSwitch; + /** + * Default focus background color. Not all components set a background color on focus + * - Default value: `colors.primary` computed with `focus.transparency` + */ + backgroundColor: ColorModeSwitch; +} diff --git a/packages/eui-theme-common/src/global_styling/variables/typography.ts b/packages/eui-theme-common/src/global_styling/variables/typography.ts new file mode 100644 index 00000000000..80ebbc8b1cb --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/variables/typography.ts @@ -0,0 +1,146 @@ +/* + * 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 { CSSProperties } from 'react'; + +/** + * Font units of measure + */ + +export const EuiThemeFontUnits = ['rem', 'px', 'em'] as const; + +export type _EuiThemeFontUnit = (typeof EuiThemeFontUnits)[number]; + +/* + * Font scale + */ + +export const EuiThemeFontScales = [ + 'xxxs', + 'xxs', + 'xs', + 's', + 'm', + 'l', + 'xl', + 'xxl', +] as const; + +export type _EuiThemeFontScale = (typeof EuiThemeFontScales)[number]; + +export type _EuiThemeFontScales = Record<_EuiThemeFontScale, number>; + +/* + * Font base settings + */ + +export type _EuiThemeFontBase = { + /** + * The whole font family stack for all parts of the UI. + * We encourage only customizing the first font in the stack. + */ + family: string; + /** + * The font family used for monospace UI elements like EuiCode + */ + familyCode?: string; + /** + * The font family used for serif UI elements like blockquotes within EuiText + */ + familySerif?: string; + /** + * Controls advanced features OpenType fonts. + * https://developer.mozilla.org/en-US/docs/Web/CSS/font-feature-settings + */ + featureSettings?: string; + /** + * Sets the default units used for font size & line height set by UI components + * like EuiText or EuiTitle. Defaults to `rem`. + * + * NOTE: This may overridden by some internal usages, e.g. + * EuiText's `relative` size which must use `em`. + * + * @default 'rem' + */ + defaultUnits: _EuiThemeFontUnit; + /** + * A computed number that is 1/4 of `base` + */ + baseline: number; + /** + * Establishes the ideal line-height percentage, but it is the `baseline` integer that establishes the final pixel/rem value + */ + lineHeightMultiplier: number; +}; + +/* + * Font weights + */ + +export const EuiThemeFontWeights = [ + 'light', + 'regular', + 'medium', + 'semiBold', + 'bold', +] as const; + +export type _EuiThemeFontWeight = (typeof EuiThemeFontWeights)[number]; + +export type _EuiThemeFontWeights = { + /** - Default value: 300 */ + light: CSSProperties['fontWeight']; + /** - Default value: 400 */ + regular: CSSProperties['fontWeight']; + /** - Default value: 500 */ + medium: CSSProperties['fontWeight']; + /** - Default value: 600 */ + semiBold: CSSProperties['fontWeight']; + /** - Default value: 700 */ + bold: CSSProperties['fontWeight']; +}; + +/** + * Body / Base styles + */ + +export interface _EuiThemeBody { + /** + * A sizing key from one of the font scales to set as the base body font-size + */ + scale: _EuiThemeFontScale; + /** + * A font weight key for setting the base body weight + */ + weight: keyof _EuiThemeFontWeights; +} + +/** + * Title styles + */ + +export interface _EuiThemeTitle { + /** + * A font weight key for setting the base weight for titles and headings + */ + weight: keyof _EuiThemeFontWeights; +} + +/* + * Font + */ + +export type _EuiThemeFont = _EuiThemeFontBase & { + scale: _EuiThemeFontScales; + /** + * @see {@link https://eui.elastic.co/#/theming/typography/values%23font-weight | Reference} for more information + */ + weight: _EuiThemeFontWeights; + body: _EuiThemeBody; + title: _EuiThemeTitle; +}; diff --git a/packages/eui-theme-common/src/index.ts b/packages/eui-theme-common/src/index.ts new file mode 100644 index 00000000000..05e235c669b --- /dev/null +++ b/packages/eui-theme-common/src/index.ts @@ -0,0 +1,12 @@ +/* + * 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 * from './global_styling'; + +export * from './types'; +export * from './utils'; diff --git a/packages/eui-theme-common/src/types.ts b/packages/eui-theme-common/src/types.ts new file mode 100644 index 00000000000..68c72d586df --- /dev/null +++ b/packages/eui-theme-common/src/types.ts @@ -0,0 +1,56 @@ +/* + * 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. + */ + +/* TODO: duplicated types from /eui/src/components/common - extract to shared location */ + +/** + * Like `keyof typeof`, but for getting values instead of keys + * ValueOf + * Results in `'value1' | 'value2'` + */ +export type ValueOf = T[keyof T]; + +/** + * Replaces all properties on any type as optional, includes nested types + * + * @example + * ```ts + * interface Person { + * name: string; + * age?: number; + * spouse: Person; + * children: Person[]; + * } + * type PartialPerson = RecursivePartial; + * // results in + * interface PartialPerson { + * name?: string; + * age?: number; + * spouse?: RecursivePartial; + * children?: RecursivePartial[] + * } + * ``` + */ +export type RecursivePartial = { + [P in keyof T]?: T[P] extends NonAny[] // checks for nested any[] + ? T[P] + : T[P] extends readonly NonAny[] // checks for nested ReadonlyArray + ? T[P] + : T[P] extends Array + ? Array> + : T[P] extends ReadonlyArray + ? ReadonlyArray> + : T[P] extends Set // checks for Sets + ? Set> + : T[P] extends Map // checks for Maps + ? Map> + : T[P] extends NonAny // checks for primitive values + ? T[P] + : RecursivePartial; // recurse for all non-array and non-primitive values +}; +type NonAny = number | boolean | string | symbol | null; diff --git a/packages/eui/src/services/theme/utils.test.ts b/packages/eui-theme-common/src/utils.test.ts similarity index 100% rename from packages/eui/src/services/theme/utils.test.ts rename to packages/eui-theme-common/src/utils.test.ts diff --git a/packages/eui-theme-common/src/utils.ts b/packages/eui-theme-common/src/utils.ts new file mode 100644 index 00000000000..caa529ebd48 --- /dev/null +++ b/packages/eui-theme-common/src/utils.ts @@ -0,0 +1,392 @@ +/* + * 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 { + EuiThemeColorMode, + EuiThemeColorModeInverse, + EuiThemeColorModeStandard, + EuiThemeModifications, + EuiThemeSystem, + EuiThemeShape, + EuiThemeComputed, + COLOR_MODES_STANDARD, + COLOR_MODES_INVERSE, +} from './global_styling'; + +export const DEFAULT_COLOR_MODE = COLOR_MODES_STANDARD.light; + +/** + * Returns whether the parameter is an object + * @param {any} obj - Anything + */ +const isObject = (obj: any) => obj && typeof obj === 'object'; + +/** + * Returns whether the provided color mode is `inverse` + * @param {string} colorMode - `light`, `dark`, or `inverse` + */ +export const isInverseColorMode = ( + colorMode?: string +): colorMode is EuiThemeColorModeInverse => { + return colorMode === COLOR_MODES_INVERSE; +}; + +/** + * Returns the color mode configured in the current EuiThemeProvider. + * Returns the parent color mode if none is explicity set. + * @param {string} colorMode - `light`, `dark`, or `inverse` + * @param {string} parentColorMode - `LIGHT` or `DARK`; used as the fallback + */ +export const getColorMode = ( + colorMode?: EuiThemeColorMode, + parentColorMode?: EuiThemeColorModeStandard +): EuiThemeColorModeStandard => { + if (colorMode == null) { + return parentColorMode || DEFAULT_COLOR_MODE; + } + const mode = colorMode.toUpperCase() as + | EuiThemeColorModeInverse + | EuiThemeColorModeStandard; + if (isInverseColorMode(mode)) { + return parentColorMode === COLOR_MODES_STANDARD.dark || + parentColorMode === undefined + ? COLOR_MODES_STANDARD.light + : COLOR_MODES_STANDARD.dark; + } else { + return mode; + } +}; + +/** + * Returns a value at a given path on an object. + * If `colorMode` is provided, will scope the value to the appropriate color mode key (LIGHT\DARK) + * @param {object} model - Object + * @param {string} _path - Dot-notated string to a path on the object + * @param {string} colorMode - `light` or `dark` + */ +export const getOn = ( + model: { [key: string]: any }, + _path: string, + colorMode?: EuiThemeColorModeStandard +) => { + const path = _path.split('.'); + let node = model; + while (path.length) { + const segment = path.shift()!; + + if (node.hasOwnProperty(segment) === false) { + if ( + colorMode && + node.hasOwnProperty(colorMode) === true && + node[colorMode].hasOwnProperty(segment) === true + ) { + if (node[colorMode][segment] instanceof Computed) { + node = node[colorMode][segment].getValue(null, {}, node, colorMode); + } else { + node = node[colorMode][segment]; + } + } else { + return undefined; + } + } else { + if (node[segment] instanceof Computed) { + node = node[segment].getValue(null, {}, node, colorMode); + } else { + node = node[segment]; + } + } + } + + return node; +}; + +/** + * Sets a value at a given path on an object. + * @param {object} model - Object + * @param {string} _path - Dot-notated string to a path on the object + * @param {any} string - The value to set + */ +export const setOn = ( + model: { [key: string]: any }, + _path: string, + value: any +) => { + const path = _path.split('.'); + const propertyName = path.pop()!; + let node = model; + + while (path.length) { + const segment = path.shift()!; + if (node.hasOwnProperty(segment) === false) { + node[segment] = {}; + } + node = node[segment]; + } + + node[propertyName] = value; + return true; +}; + +/** + * Creates a class to store the `computer` method and its eventual parameters. + * Allows for on-demand computation with up-to-date parameters via `getValue` method. + * @constructor + * @param {function} computer - Function to be computed + * @param {string | array} dependencies - Dependencies passed to the `computer` as parameters + */ +export class Computed { + constructor( + public computer: (...values: any[]) => T, + public dependencies: string | string[] = [] + ) {} + + /** + * Executes the `computer` method with the current state of the theme + * by taking into account previously computed values and modifications. + * @param {Proxy | object} base - Computed or uncomputed theme + * @param {Proxy | object} modifications - Theme value overrides + * @param {object} working - Partially computed theme + * @param {string} colorMode - `light` or `dark` + */ + getValue( + base: EuiThemeSystem | EuiThemeShape | null, + modifications: EuiThemeModifications = {}, + working: Partial, + colorMode?: EuiThemeColorModeStandard + ) { + if (!this.dependencies.length) { + return this.computer(working); + } + if (!Array.isArray(this.dependencies)) { + return this.computer( + getOn(working, this.dependencies) ?? + getOn(modifications, this.dependencies, colorMode) ?? + (base ? getOn(base, this.dependencies, colorMode) : working) + ); + } + return this.computer( + this.dependencies.map((dependency) => { + return ( + getOn(working, dependency) ?? + getOn(modifications, dependency, colorMode) ?? + (base ? getOn(base, dependency, colorMode) : working) + ); + }) + ); + } +} + +/** + * Returns a Class (`Computed`) that stores the arbitrary computer method + * and references to its optional dependecies. + * @param {function} computer - Arbitrary method to be called at compute time. + * @param {string | array} dependencies - Values that will be provided to `computer` at compute time. + */ +export function computed(computer: (value: EuiThemeComputed) => T): T; +export function computed( + computer: (value: any[]) => T, + dependencies: string[] +): T; +export function computed( + computer: (value: any) => T, + dependencies: string +): T; +export function computed( + comp: ((value: T) => T) | ((value: any) => T) | ((value: any[]) => T), + dep?: string | string[] +) { + return new Computed(comp, dep); +} + +/** + * Type guard to check for a Computed object based on object shape + * without relying on the Computed class directly + */ +const isComputedLike = (key: object): key is Computed => { + if (typeof key !== 'object' || Array.isArray(key)) return false; + + return key.hasOwnProperty('dependencies') && key.hasOwnProperty('computer'); +}; + +/** + * Takes an uncomputed theme, and computes and returns all values taking + * into consideration value overrides and configured color mode. + * Overrides take precedence, and only values in the current color mode + * are computed and returned. + * @param {Proxy} base - Object to transform into Proxy + * @param {Proxy | object} over - Unique identifier or name + * @param {string} colorMode - `light` or `dark` + */ +export const getComputed = ( + base: EuiThemeSystem, + over: Partial>, + colorMode: EuiThemeColorModeStandard +): EuiThemeComputed => { + const output: Partial = { themeName: base.key }; + + function loop( + base: { [key: string]: any }, + over: { [key: string]: any }, + checkExisting: boolean = false, + path?: string + ) { + Object.keys(base).forEach((key) => { + let newPath = path ? `${path}.${key}` : `${key}`; + // @ts-expect-error `key` is not necessarily a colorMode key + if ([...Object.values(COLOR_MODES_STANDARD), colorMode].includes(key)) { + if (key !== colorMode) { + return; + } else { + const colorModeSegment = new RegExp( + `(\\.${colorMode}\\b)|(\\b${colorMode}\\.)` + ); + newPath = newPath.replace(colorModeSegment, ''); + } + } + const existing = checkExisting && getOn(output, newPath); + if (!existing || isObject(existing)) { + // NOTE: the class type check for Computed is not true for themes created externally; + // we additionally check on the object shape to confirm a Computed value + const baseValue = + base[key] instanceof Computed || isComputedLike(base[key]) + ? base[key].getValue(base.root, over.root, output, colorMode) + : base[key]; + const overValue = + over[key] instanceof Computed || isComputedLike(over[key]) + ? over[key].getValue(base.root, over.root, output, colorMode) + : over[key]; + if (isObject(baseValue) && !Array.isArray(baseValue)) { + loop(baseValue, overValue ?? {}, checkExisting, newPath); + } else { + setOn(output, newPath, overValue ?? baseValue); + } + } + }); + } + // Compute standard theme values and apply overrides + loop(base, over); + // Compute and apply extension values only + loop(over, {}, true); + return output as EuiThemeComputed; +}; + +/** + * Builds a Proxy with a custom `handler` designed to self-reference values + * and prevent arbitrary value overrides. + * @param {object} model - Object to transform into Proxy + * @param {string} key - Unique identifier or name + */ +export const buildTheme = (model: T, key: string) => { + const handler: ProxyHandler> = { + getPrototypeOf(target) { + return Reflect.getPrototypeOf(target.model); + }, + + setPrototypeOf(target, prototype) { + return Reflect.setPrototypeOf(target.model, prototype); + }, + + isExtensible(target) { + return Reflect.isExtensible(target); + }, + + preventExtensions(target) { + return Reflect.preventExtensions(target.model); + }, + + getOwnPropertyDescriptor(target, key) { + return Reflect.getOwnPropertyDescriptor(target.model, key); + }, + + defineProperty(target, property, attributes) { + return Reflect.defineProperty(target.model, property, attributes); + }, + + has(target, property) { + return Reflect.has(target.model, property); + }, + + get(_target, property) { + if (property === 'key') { + return _target[property]; + } + + // prevent Safari from locking up when the proxy is used in dev tools + // as it doesn't support getPrototypeOf + if (property === '__proto__') return {}; + + const target = property === 'root' ? _target : _target.model || _target; + // @ts-ignore `string` index signature + const value = target[property]; + if (isObject(value) && !Array.isArray(value)) { + return new Proxy( + { + model: value, + root: _target.root, + key: `_${_target.key}`, + }, + handler + ); + } else { + return value; + } + }, + + set(target: any) { + return target; + }, + + deleteProperty(target: any) { + return target; + }, + + ownKeys(target) { + return Reflect.ownKeys(target.model); + }, + + apply(target: any) { + return target; + }, + + construct(target: any) { + return target; + }, + }; + const themeProxy = new Proxy({ model, root: model, key }, handler); + + return themeProxy; +}; + +/** + * Deeply merges two objects, using `source` values whenever possible. + * @param {object} _target - Object with fallback values + * @param {object} source - Object with desired values + */ +export const mergeDeep = ( + _target: { [key: string]: any }, + source: { [key: string]: any } = {} +) => { + const target = { ..._target }; + + if (!isObject(target) || !isObject(source)) { + return source; + } + + Object.keys(source).forEach((key) => { + const targetValue = target[key]; + const sourceValue = source[key]; + + if (isObject(targetValue) && isObject(sourceValue)) { + target[key] = mergeDeep({ ...targetValue }, { ...sourceValue }); + } else { + target[key] = sourceValue; + } + }); + + return target; +}; diff --git a/packages/eui-theme-common/tsconfig.cjs.json b/packages/eui-theme-common/tsconfig.cjs.json new file mode 100644 index 00000000000..6becea42efa --- /dev/null +++ b/packages/eui-theme-common/tsconfig.cjs.json @@ -0,0 +1,29 @@ +{ + "$schema": "https://json.schemastore.org/tsconfig", + "compilerOptions": { + "rootDir": "src", + "outDir": "lib/cjs", + "target": "es6", + "module": "CommonJS", + "lib": [ + "es6", + "DOM" + ], + "moduleResolution": "Node", + "declaration": true, + "sourceMap": true, + "noEmitHelpers": true, + "incremental": true, + "esModuleInterop": true, + "strict": true, + "skipLibCheck": true, + "tsBuildInfoFile": "lib/cjs/.tsbuildinfo", + "importHelpers": false, + }, + "include": [ + "src" + ], + "exclude": [ + "node_modules" + ], +} \ No newline at end of file diff --git a/packages/eui-theme-common/tsconfig.json b/packages/eui-theme-common/tsconfig.json new file mode 100644 index 00000000000..31450bf12d6 --- /dev/null +++ b/packages/eui-theme-common/tsconfig.json @@ -0,0 +1,28 @@ +{ + "$schema": "https://json.schemastore.org/tsconfig", + "compilerOptions": { + "rootDir": "src", + "outDir": "lib/esm", + "target": "ES2020", + "module": "ESNext", + "lib": [ + "ESNext", + "DOM" + ], + "moduleResolution": "Node", + "declaration": true, + "sourceMap": true, + "noEmitHelpers": true, + "incremental": true, + "esModuleInterop": true, + "strict": true, + "skipLibCheck": true, + "tsBuildInfoFile": "lib/esm/.tsbuildinfo" + }, + "include": [ + "src", + ], + "exclude": [ + "node_modules" + ], +} \ No newline at end of file diff --git a/packages/eui-theme-common/tsconfig.types.json b/packages/eui-theme-common/tsconfig.types.json new file mode 100644 index 00000000000..54e2031daae --- /dev/null +++ b/packages/eui-theme-common/tsconfig.types.json @@ -0,0 +1,13 @@ +{ + "extends": "./tsconfig.cjs.json", + "compilerOptions": { + "outDir": "lib/cjs", + "declaration": true, + "declarationMap": true, + "isolatedModules": false, + "noEmit": false, + "allowJs": false, + "emitDeclarationOnly": true + }, + "exclude": ["node_modules", "**/*.test.ts"] +} \ No newline at end of file diff --git a/packages/eui/.storybook/decorator.tsx b/packages/eui/.storybook/decorator.tsx index 6b78a2e2353..d30f8df311d 100644 --- a/packages/eui/.storybook/decorator.tsx +++ b/packages/eui/.storybook/decorator.tsx @@ -6,12 +6,37 @@ * Side Public License, v 1. */ -import React, { useState, useMemo, FunctionComponent } from 'react'; +import React, { + useState, + useMemo, + FunctionComponent, + useEffect, + useCallback, +} from 'react'; import { css } from '@emotion/react'; import type { Preview } from '@storybook/react'; +import { EuiThemeBorealis } from '@elastic/eui-theme-borealis'; import { EuiThemeColorMode } from '../src/services'; import { EuiProvider, EuiProviderProps } from '../src/components/provider'; +import { EuiThemeAmsterdam } from '../src/themes'; + +const EXPERIMENTAL_THEMES = [ + { + text: 'Borealis', + value: EuiThemeBorealis.key, + provider: EuiThemeBorealis, + }, +]; + +export const AVAILABLE_THEMES = [ + { + text: 'Amsterdam', + value: EuiThemeAmsterdam.key, + provider: EuiThemeAmsterdam, + }, + ...EXPERIMENTAL_THEMES, +]; /** * Primary EuiProvider decorator to wrap around all stories @@ -20,8 +45,9 @@ import { EuiProvider, EuiProviderProps } from '../src/components/provider'; export const EuiProviderDecorator: FunctionComponent< EuiProviderProps<{}> & { writingMode: WritingModes; + themeName: string; } -> = ({ children, writingMode, ...euiProviderProps }) => { +> = ({ children, writingMode, themeName, theme, ...euiProviderProps }) => { // Append portals into Storybook's root div (rather than ) // so that loki correctly captures them for VRT screenshots const [sibling, setPortalSibling] = useState(null); @@ -39,8 +65,28 @@ export const EuiProviderDecorator: FunctionComponent< [writingMode] ); + const getTheme = useCallback(() => { + return AVAILABLE_THEMES.find((t) => themeName?.includes(t.value)); + }, [themeName]); + + const [_theme, setTheme] = useState(getTheme); + + useEffect(() => { + if (!themeName || theme) return; + + setTheme(getTheme); + }, [themeName, theme, getTheme]); + + const euiThemeProp = { + theme: theme ?? _theme?.provider, + }; + return ( - +
{portalInsert && children}
@@ -122,3 +168,18 @@ export const euiProviderDecoratorGlobals: Preview['globalTypes'] = { }, }, }; + +export const euiProviderDecoratorGlobalsExperimental = { + theme: { + description: 'Theme for EuiProvider', + defaultValue: EuiThemeAmsterdam.key, + toolbar: { + title: 'Theme', + items: [ + { value: EuiThemeAmsterdam.key, title: 'Amsterdam', icon: 'box' }, + { value: EuiThemeBorealis.key, title: 'Borealis', icon: 'box' }, + ], + dynamicTitle: true, + }, + }, +}; diff --git a/packages/eui/.storybook/preview.tsx b/packages/eui/.storybook/preview.tsx index c34435f5032..adf24f7f409 100644 --- a/packages/eui/.storybook/preview.tsx +++ b/packages/eui/.storybook/preview.tsx @@ -37,8 +37,13 @@ setEuiDevProviderWarning('error'); /** * Custom global decorators */ +import { isExperimentalThemeEnabled } from '../src/themes'; import { customJsxDecorator } from './addons/code-snippet/decorators/jsx_decorator'; -import { EuiProviderDecorator, euiProviderDecoratorGlobals } from './decorator'; +import { + EuiProviderDecorator, + euiProviderDecoratorGlobals, + euiProviderDecoratorGlobalsExperimental, +} from './decorator'; const preview: Preview = { decorators: [ @@ -48,12 +53,18 @@ const preview: Preview = { colorMode={context.globals.colorMode} {...(context.componentId === 'theming-euiprovider' && context.args)} writingMode={context.globals.writingMode} + themeName={context.globals.theme} > ), ], - globalTypes: { ...euiProviderDecoratorGlobals }, + globalTypes: isExperimentalThemeEnabled() + ? { + ...euiProviderDecoratorGlobals, + ...euiProviderDecoratorGlobalsExperimental, + } + : { ...euiProviderDecoratorGlobals }, parameters: { backgrounds: { disable: true }, // Use colorMode instead options: { diff --git a/packages/eui/package.json b/packages/eui/package.json index 0bd97e3668d..9a46fd5971a 100644 --- a/packages/eui/package.json +++ b/packages/eui/package.json @@ -16,8 +16,9 @@ ], "scripts": { "start": "cross-env BABEL_MODULES=false webpack serve --config=src-docs/webpack.config.js", + "build:workspaces": "yarn workspaces foreach -Rti --from @elastic/eui-theme-common run build && yarn workspaces foreach -Rti --from @elastic/eui --exclude @elastic/eui --exclude @elastic/eui-theme-common run build", "build-docs": "cross-env BABEL_MODULES=false cross-env NODE_ENV=production NODE_OPTIONS=--max-old-space-size=4096 webpack --config=src-docs/webpack.config.js", - "build": "yarn extract-i18n-strings && node ./scripts/compile-clean.js && node ./scripts/compile-eui.js && yarn compile-scss", + "build": "node ./scripts/compile-i18n-strings.js && node ./scripts/compile-clean.js && node ./scripts/compile-eui.js && yarn compile-scss", "build-pack": "yarn build && npm pack", "compile-icons": "node ./scripts/compile-icons.js && prettier --write --loglevel=warn \"./src/components/icon/assets/**/*.tsx\"", "compile-scss": "node ./scripts/compile-scss.js", @@ -30,7 +31,7 @@ "test": "yarn lint && yarn test-unit", "test-ci": "yarn test && yarn test-cypress", "test-unit": "node ./scripts/test-unit", - "test-staged": "yarn lint && node scripts/test-staged.js", + "test-staged": "yarn build:workspaces && yarn lint && node scripts/test-staged.js", "test-cypress": "node ./scripts/test-cypress", "test-cypress-dev": "yarn test-cypress --dev", "test-cypress-a11y": "yarn test-cypress --a11y", @@ -103,6 +104,8 @@ "@cypress/webpack-dev-server": "^1.7.0", "@elastic/charts": "^64.1.0", "@elastic/datemath": "^5.0.3", + "@elastic/eui-theme-borealis": "workspace:^", + "@elastic/eui-theme-common": "workspace:^", "@emotion/babel-preset-css-prop": "^11.11.0", "@emotion/cache": "^11.11.0", "@emotion/css": "^11.11.0", @@ -254,6 +257,8 @@ }, "peerDependencies": { "@elastic/datemath": "^5.0.2", + "@elastic/eui-theme-borealis": "0.0.1", + "@elastic/eui-theme-common": "0.0.1", "@emotion/css": "11.x", "@emotion/react": "11.x", "@types/react": "^16.9 || ^17.0 || ^18.0", diff --git a/packages/eui/scripts/compile-i18n-strings.js b/packages/eui/scripts/compile-i18n-strings.js new file mode 100644 index 00000000000..f948577d2fd --- /dev/null +++ b/packages/eui/scripts/compile-i18n-strings.js @@ -0,0 +1,26 @@ +/* + * 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. + */ + +const { execSync } = require('child_process'); +const chalk = require('chalk'); +const yargs = require('yargs/yargs'); +const { hideBin } = require('yargs/helpers'); + +const { NODE_ENV } = process.env; + +const info = chalk.white; +const log = chalk.grey; + +if (NODE_ENV !== 'production') return; + +const command = 'yarn extract-i18n-strings'; + +console.log(log(command)); +execSync(command, { + stdio: 'inherit', +}); diff --git a/packages/eui/scripts/deploy/build_docs b/packages/eui/scripts/deploy/build_docs index ab1207b3337..8e700a97b0b 100755 --- a/packages/eui/scripts/deploy/build_docs +++ b/packages/eui/scripts/deploy/build_docs @@ -12,4 +12,4 @@ docker run \ --volume "$PWD":/app \ --workdir /app \ "$DOCKER_BASE_IMAGE" \ - bash -c 'yarn && yarn --cwd packages/eui build && yarn --cwd packages/eui build-docs && yarn --cwd packages/eui build-storybook' + bash -c 'yarn && yarn --cwd packages/eui build:workspaces && yarn --cwd packages/eui build && yarn --cwd packages/eui build-docs && yarn --cwd packages/eui build-storybook' diff --git a/packages/eui/src-docs/src/components/guide_theme_selector/guide_theme_selector.tsx b/packages/eui/src-docs/src/components/guide_theme_selector/guide_theme_selector.tsx index bc9d4449b9d..0f99e738533 100644 --- a/packages/eui/src-docs/src/components/guide_theme_selector/guide_theme_selector.tsx +++ b/packages/eui/src-docs/src/components/guide_theme_selector/guide_theme_selector.tsx @@ -6,7 +6,8 @@ import { useEuiTheme, useIsWithinBreakpoints, } from '../../../../src/services'; -import { EUI_THEME, EUI_THEMES } from '../../../../src/themes'; +import { EUI_THEME } from '../../../../src/themes'; +import { AVAILABLE_THEMES } from '../with_theme/theme_context'; import { ThemeContext } from '../with_theme'; // @ts-ignore Not TS @@ -51,15 +52,15 @@ const GuideThemeSelectorComponent: React.FunctionComponent< const systemColorMode = useEuiTheme().colorMode.toLowerCase(); const currentTheme: EUI_THEME = - EUI_THEMES.find( + AVAILABLE_THEMES.find( (theme) => theme.value === (context.theme ?? systemColorMode) - ) || EUI_THEMES[0]; + ) || AVAILABLE_THEMES[0]; const getIconType = (value: EUI_THEME['value']) => { return value === currentTheme.value ? 'check' : 'empty'; }; - const items = EUI_THEMES.map((theme) => { + const items = AVAILABLE_THEMES.map((theme) => { return ( value); +const THEME_NAMES = AVAILABLE_THEMES.map(({ value }) => value); const THEME_LANGS = theme_languages.map(({ id }) => id); type ThemeContextType = { diff --git a/packages/eui/src-docs/src/index.js b/packages/eui/src-docs/src/index.js index a69a07e3613..d9b072fccf4 100644 --- a/packages/eui/src-docs/src/index.js +++ b/packages/eui/src-docs/src/index.js @@ -4,6 +4,8 @@ import { Provider } from 'react-redux'; import { HashRouter, Switch, Route, Redirect } from 'react-router-dom'; import { Helmet } from 'react-helmet'; +import { isExperimentalThemeEnabled } from '../../src/themes'; + import configureStore from './store/configure_store'; import { AppContext } from './views/app_context'; @@ -13,13 +15,25 @@ import { NotFoundView } from './views/not_found/not_found_view'; import { registerTheme, ExampleContext } from './services'; import Routes from './routes'; +import { + ThemeProvider, + AVAILABLE_THEMES, +} from './components/with_theme/theme_context'; + +// TODO: update SCSS files for new theme once available import themeLight from './theme_light.scss'; import themeDark from './theme_dark.scss'; -import { ThemeProvider } from './components/with_theme/theme_context'; +import themeNewLight from './theme_new_light.scss'; +import themeNewDark from './theme_new_dark.scss'; registerTheme('light', [themeLight]); registerTheme('dark', [themeDark]); +if (isExperimentalThemeEnabled()) { + registerTheme(AVAILABLE_THEMES[2].value, [themeNewLight]); + registerTheme(AVAILABLE_THEMES[3].value, [themeNewDark]); +} + // Set up app // Whether the docs app should be wrapped in diff --git a/packages/eui/src-docs/src/theme_new_dark.scss b/packages/eui/src-docs/src/theme_new_dark.scss new file mode 100644 index 00000000000..7c76c518a04 --- /dev/null +++ b/packages/eui/src-docs/src/theme_new_dark.scss @@ -0,0 +1,7 @@ +@import 'node_modules/@elastic/eui-theme-borealis/src/theme_dark'; +@import './components/index'; +@import './services/playground/index'; +@import './views/index'; + +// Elastic charts +@import '~@elastic/charts/dist/theme'; diff --git a/packages/eui/src-docs/src/theme_new_light.scss b/packages/eui/src-docs/src/theme_new_light.scss new file mode 100644 index 00000000000..1bee3ff7412 --- /dev/null +++ b/packages/eui/src-docs/src/theme_new_light.scss @@ -0,0 +1,7 @@ +@import 'node_modules/@elastic/eui-theme-borealis/src/theme_light'; +@import './components/index'; +@import './services/playground/index'; +@import './views/index'; + +// Elastic charts +@import '~@elastic/charts/dist/theme'; diff --git a/packages/eui/src-docs/src/views/app_context.js b/packages/eui/src-docs/src/views/app_context.js index 729f4c94079..42645f5b2f1 100644 --- a/packages/eui/src-docs/src/views/app_context.js +++ b/packages/eui/src-docs/src/views/app_context.js @@ -11,7 +11,7 @@ import { setEuiDevProviderWarning, euiStylisPrefixer, } from '../../../src/services'; -import { EUI_THEMES } from '../../../src/themes'; +import { AVAILABLE_THEMES } from '../components/with_theme/theme_context'; import favicon16Prod from '../images/favicon/prod/favicon-16x16.png'; import favicon32Prod from '../images/favicon/prod/favicon-32x32.png'; @@ -55,9 +55,13 @@ export const AppContext = ({ children }) => { default: generalEmotionCache, utility: utilityCache, }} - theme={EUI_THEMES.find((t) => t.value === theme)?.provider} + theme={AVAILABLE_THEMES.find((t) => t.value === theme)?.provider} colorMode={ - theme ? (theme.includes('light') ? 'light' : 'dark') : undefined + theme + ? theme.toLowerCase().includes('light') + ? 'light' + : 'dark' + : undefined } > diff --git a/packages/eui/src/components/common.ts b/packages/eui/src/components/common.ts index 2f09a052349..4f88e2324c5 100644 --- a/packages/eui/src/components/common.ts +++ b/packages/eui/src/components/common.ts @@ -17,6 +17,8 @@ import { } from 'react'; import { Interpolation, Theme } from '@emotion/react'; +export type { RecursivePartial, ValueOf } from '@elastic/eui-theme-common'; + export interface CommonProps { className?: string; 'aria-label'?: string; @@ -50,13 +52,6 @@ export function keysOf(obj: T): K[] { return Object.keys(obj) as K[]; } -/** - * Like `keyof typeof`, but for getting values instead of keys - * ValueOf - * Results in `'value1' | 'value2'` - */ -export type ValueOf = T[keyof T]; - export type PropsOf = C extends FunctionComponent ? SFCProps : C extends FunctionComponent @@ -203,43 +198,3 @@ export type PropsForButton = T & { onClick?: MouseEventHandler; } & ButtonHTMLAttributes & P; - -/** - * Replaces all properties on any type as optional, includes nested types - * - * @example - * ```ts - * interface Person { - * name: string; - * age?: number; - * spouse: Person; - * children: Person[]; - * } - * type PartialPerson = RecursivePartial; - * // results in - * interface PartialPerson { - * name?: string; - * age?: number; - * spouse?: RecursivePartial; - * children?: RecursivePartial[] - * } - * ``` - */ -export type RecursivePartial = { - [P in keyof T]?: T[P] extends NonAny[] // checks for nested any[] - ? T[P] - : T[P] extends readonly NonAny[] // checks for nested ReadonlyArray - ? T[P] - : T[P] extends Array - ? Array> - : T[P] extends ReadonlyArray - ? ReadonlyArray> - : T[P] extends Set // checks for Sets - ? Set> - : T[P] extends Map // checks for Maps - ? Map> - : T[P] extends NonAny // checks for primitive values - ? T[P] - : RecursivePartial; // recurse for all non-array and non-primitive values -}; -type NonAny = number | boolean | string | symbol | null; diff --git a/packages/eui/src/global_styling/functions/_index.scss b/packages/eui/src/global_styling/functions/_index.scss index de8260b2bba..7e1a8b1710d 100644 --- a/packages/eui/src/global_styling/functions/_index.scss +++ b/packages/eui/src/global_styling/functions/_index.scss @@ -1,5 +1 @@ -// Math needs to be first in the load order -@import 'math'; - -// Using math, we have functions to manipulate contrast / luminosity for accessibility -@import 'colors'; +@import 'node_modules/@elastic/eui-theme-common/src/global_styling/functions/index'; diff --git a/packages/eui/src/global_styling/functions/size.ts b/packages/eui/src/global_styling/functions/size.ts index 66e6ab507d3..24652cc3ec1 100644 --- a/packages/eui/src/global_styling/functions/size.ts +++ b/packages/eui/src/global_styling/functions/size.ts @@ -6,19 +6,4 @@ * Side Public License, v 1. */ -/** - * Calculates the `px` value based on a scale multiplier - * @param scale - The font scale multiplier - * * - * @param themeOrBase - Theme base value - * * - * @returns string - Rem unit aligned to baseline - */ - -export const sizeToPixel = - (scale: number = 1) => - (themeOrBase: number | { base: number; [key: string]: any }) => { - const base = - typeof themeOrBase === 'object' ? themeOrBase.base : themeOrBase; - return `${base * scale}px`; - }; +export { sizeToPixel } from '@elastic/eui-theme-common'; diff --git a/packages/eui/src/global_styling/index.scss b/packages/eui/src/global_styling/index.scss index 8497b0ecf68..eadeca15647 100644 --- a/packages/eui/src/global_styling/index.scss +++ b/packages/eui/src/global_styling/index.scss @@ -1,12 +1,3 @@ // Core -// Functions need to be first, since we use them in our variables and mixin definitions -@import 'functions/index'; - -// Variables come next, and are used in some mixins -@import 'variables/index'; - -// Mixins provide generic code expansion through helpers -@import 'mixins/index'; - -// The reset file has moved to global_styles.tsx +@import 'node_modules/@elastic/eui-theme-common/src/global_styling/index'; diff --git a/packages/eui/src/global_styling/variables/_animations.scss b/packages/eui/src/global_styling/variables/_animations.scss index 0ffe44346dd..b6e40a79f6d 100644 --- a/packages/eui/src/global_styling/variables/_animations.scss +++ b/packages/eui/src/global_styling/variables/_animations.scss @@ -1,13 +1,6 @@ // Animations -$euiAnimSlightBounce: cubic-bezier(.34, 1.61, .7, 1) !default; -$euiAnimSlightResistance: cubic-bezier(.694, .0482, .335, 1) !default; - -$euiAnimSpeedExtraFast: 90ms !default; -$euiAnimSpeedFast: 150ms !default; -$euiAnimSpeedNormal: 250ms !default; -$euiAnimSpeedSlow: 350ms !default; -$euiAnimSpeedExtraSlow: 500ms !default; +@import 'node_modules/@elastic/eui-theme-common/src/global_styling/variables/animations' // Keyframe animation declarations can be found in // utility/animations.scss diff --git a/packages/eui/src/global_styling/variables/_borders.scss b/packages/eui/src/global_styling/variables/_borders.scss index 6fa0216ff3b..818f5807e6f 100644 --- a/packages/eui/src/global_styling/variables/_borders.scss +++ b/packages/eui/src/global_styling/variables/_borders.scss @@ -1,11 +1,3 @@ // Borders -$euiBorderWidthThin: 1px !default; -$euiBorderWidthThick: 2px !default; - -$euiBorderColor: $euiColorLightShade !default; -$euiBorderRadius: $euiSizeS * .75 !default; -$euiBorderRadiusSmall: $euiSizeS * .5 !default; -$euiBorderThick: $euiBorderWidthThick solid $euiBorderColor !default; -$euiBorderThin: $euiBorderWidthThin solid $euiBorderColor !default; -$euiBorderEditable: $euiBorderWidthThick dotted $euiBorderColor !default; +@import 'node_modules/@elastic/eui-theme-common/src/global_styling/variables/borders' diff --git a/packages/eui/src/global_styling/variables/_buttons.scss b/packages/eui/src/global_styling/variables/_buttons.scss index 4d4e8a5f0b1..288dca14d61 100644 --- a/packages/eui/src/global_styling/variables/_buttons.scss +++ b/packages/eui/src/global_styling/variables/_buttons.scss @@ -1,18 +1 @@ -$euiButtonHeight: $euiSizeXXL !default; -$euiButtonHeightSmall: $euiSizeXL !default; -$euiButtonHeightXSmall: $euiSizeL !default; - -// Modifier naming and colors. -$euiButtonTypes: ( - primary: $euiColorPrimary, - accent: $euiColorAccent, - success: $euiColorSuccess, - warning: $euiColorWarning, - danger: $euiColorDanger, - ghost: $euiColorGhost, // Ghost is special, and does not care about theming. - text: $euiColorDarkShade, // 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: $euiColorDisabledText; +@import 'node_modules/@elastic/eui-theme-common/src/global_styling/variables/buttons' diff --git a/packages/eui/src/global_styling/variables/_colors_vis.scss b/packages/eui/src/global_styling/variables/_colors_vis.scss index cfffdf5e55d..d935ffa7ebe 100644 --- a/packages/eui/src/global_styling/variables/_colors_vis.scss +++ b/packages/eui/src/global_styling/variables/_colors_vis.scss @@ -1,72 +1,3 @@ // Visualization colors -// stylelint-disable color-no-hex -// Maps allow for easier JSON usage -// Use map_merge($euiColorVisColors, $yourMap) to change individual colors after importing ths file -// The `behindText` variant is a direct copy of the hex output by the JS euiPaletteColorBlindBehindText() function -$euiPaletteColorBlind: ( - euiColorVis0: ( - graphic: #54B399, - behindText: #6DCCB1, - ), - euiColorVis1: ( - graphic: #6092C0, - behindText: #79AAD9, - ), - euiColorVis2: ( - graphic: #D36086, - behindText: #EE789D, - ), - euiColorVis3: ( - graphic: #9170B8, - behindText: #A987D1, - ), - euiColorVis4: ( - graphic: #CA8EAE, - behindText: #E4A6C7, - ), - euiColorVis5: ( - graphic: #D6BF57, - behindText: #F1D86F, - ), - euiColorVis6: ( - graphic: #B9A888, - behindText: #D2C0A0, - ), - euiColorVis7: ( - graphic: #DA8B45, - behindText: #F5A35C, - ), - euiColorVis8: ( - graphic: #AA6556, - behindText: #C47C6C, - ), - euiColorVis9: ( - graphic: #E7664C, - behindText: #FF7E62, - ) -) !default; - -$euiPaletteColorBlindKeys: map-keys($euiPaletteColorBlind); - -$euiColorVis0: map-get(map-get($euiPaletteColorBlind, 'euiColorVis0'), 'graphic') !default; -$euiColorVis1: map-get(map-get($euiPaletteColorBlind, 'euiColorVis1'), 'graphic') !default; -$euiColorVis2: map-get(map-get($euiPaletteColorBlind, 'euiColorVis2'), 'graphic') !default; -$euiColorVis3: map-get(map-get($euiPaletteColorBlind, 'euiColorVis3'), 'graphic') !default; -$euiColorVis4: map-get(map-get($euiPaletteColorBlind, 'euiColorVis4'), 'graphic') !default; -$euiColorVis5: map-get(map-get($euiPaletteColorBlind, 'euiColorVis5'), 'graphic') !default; -$euiColorVis6: map-get(map-get($euiPaletteColorBlind, 'euiColorVis6'), 'graphic') !default; -$euiColorVis7: map-get(map-get($euiPaletteColorBlind, 'euiColorVis7'), 'graphic') !default; -$euiColorVis8: map-get(map-get($euiPaletteColorBlind, 'euiColorVis8'), 'graphic') !default; -$euiColorVis9: map-get(map-get($euiPaletteColorBlind, 'euiColorVis9'), 'graphic') !default; - -$euiColorVis0_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis0'), 'behindText') !default; -$euiColorVis1_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis1'), 'behindText') !default; -$euiColorVis2_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis2'), 'behindText') !default; -$euiColorVis3_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis3'), 'behindText') !default; -$euiColorVis4_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis4'), 'behindText') !default; -$euiColorVis5_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis5'), 'behindText') !default; -$euiColorVis6_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis6'), 'behindText') !default; -$euiColorVis7_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis7'), 'behindText') !default; -$euiColorVis8_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis8'), 'behindText') !default; -$euiColorVis9_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis9'), 'behindText') !default; +@import 'node_modules/@elastic/eui-theme-common/src/global_styling/variables/colors_vis' diff --git a/packages/eui/src/global_styling/variables/_colors_vis.ts b/packages/eui/src/global_styling/variables/_colors_vis.ts index 4459b04ff8c..64dcfd86633 100644 --- a/packages/eui/src/global_styling/variables/_colors_vis.ts +++ b/packages/eui/src/global_styling/variables/_colors_vis.ts @@ -6,57 +6,4 @@ * Side Public License, v 1. */ -/** - * NOTE: These were quick conversions of their Sass counterparts. - * They have yet to be used/tested. - * TODO: Make the graphic version available from `euiPaletteColorBlind()` - */ - -// Maps allow for easier JSON usage -// Use map_merge(euiColorVisColors, $yourMap) to change individual colors after importing ths file -// The `behindText` variant is a direct copy of the hex output by the JS euiPaletteColorBlindBehindText() function -const euiPaletteColorBlind = { - euiColorVis0: { - graphic: '#54B399', - }, - euiColorVis1: { - graphic: '#6092C0', - }, - euiColorVis2: { - graphic: '#D36086', - }, - euiColorVis3: { - graphic: '#9170B8', - }, - euiColorVis4: { - graphic: '#CA8EAE', - }, - euiColorVis5: { - graphic: '#D6BF57', - }, - euiColorVis6: { - graphic: '#B9A888', - }, - euiColorVis7: { - graphic: '#DA8B45', - }, - euiColorVis8: { - graphic: '#AA6556', - }, - euiColorVis9: { - graphic: '#E7664C', - }, -}; - -export const colorVis = { - euiColorVis0: euiPaletteColorBlind.euiColorVis0.graphic, - euiColorVis1: euiPaletteColorBlind.euiColorVis1.graphic, - euiColorVis2: euiPaletteColorBlind.euiColorVis2.graphic, - euiColorVis3: euiPaletteColorBlind.euiColorVis3.graphic, - euiColorVis4: euiPaletteColorBlind.euiColorVis4.graphic, - euiColorVis5: euiPaletteColorBlind.euiColorVis5.graphic, - euiColorVis6: euiPaletteColorBlind.euiColorVis6.graphic, - euiColorVis7: euiPaletteColorBlind.euiColorVis7.graphic, - euiColorVis8: euiPaletteColorBlind.euiColorVis8.graphic, - euiColorVis9: euiPaletteColorBlind.euiColorVis9.graphic, -}; +export { colorVis } from '@elastic/eui-theme-common'; diff --git a/packages/eui/src/global_styling/variables/_font_weight.scss b/packages/eui/src/global_styling/variables/_font_weight.scss index f5dfd287835..152c64d8358 100644 --- a/packages/eui/src/global_styling/variables/_font_weight.scss +++ b/packages/eui/src/global_styling/variables/_font_weight.scss @@ -1,10 +1,4 @@ // Separated out to its own file for easy import into docs // Font weights -$euiFontWeightLight: 300 !default; -$euiFontWeightRegular: 400 !default; -$euiFontWeightMedium: 500 !default; -$euiFontWeightSemiBold: 600 !default; -$euiFontWeightBold: 700 !default; -$euiCodeFontWeightRegular: 400 !default; -$euiCodeFontWeightBold: 700 !default; +@import 'node_modules/@elastic/eui-theme-common/src/global_styling/variables/font_weight' diff --git a/packages/eui/src/global_styling/variables/_form.scss b/packages/eui/src/global_styling/variables/_form.scss index 49a4d620b11..cdf08ad78bf 100644 --- a/packages/eui/src/global_styling/variables/_form.scss +++ b/packages/eui/src/global_styling/variables/_form.scss @@ -1,21 +1,2 @@ -// Sizing -$euiFormMaxWidth: $euiSizeXXL * 10 !default; -$euiFormControlHeight: $euiSizeXXL !default; -$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; +// Form +@import 'node_modules/@elastic/eui-theme-common/src/global_styling/variables/form' diff --git a/packages/eui/src/global_styling/variables/_responsive.scss b/packages/eui/src/global_styling/variables/_responsive.scss index de6e8ca5b83..45e7a7c4531 100644 --- a/packages/eui/src/global_styling/variables/_responsive.scss +++ b/packages/eui/src/global_styling/variables/_responsive.scss @@ -1,9 +1 @@ -$euiBreakpoints: ( - 'xs': 0, - 's': 575px, - 'm': 768px, - 'l': 992px, - 'xl': 1200px -) !default; - -$euiBreakpointKeys: map-keys($euiBreakpoints); +@import 'node_modules/@elastic/eui-theme-common/src/global_styling/variables/responsive' diff --git a/packages/eui/src/global_styling/variables/_shadows.scss b/packages/eui/src/global_styling/variables/_shadows.scss index 05e445f27a1..14237af776b 100644 --- a/packages/eui/src/global_styling/variables/_shadows.scss +++ b/packages/eui/src/global_styling/variables/_shadows.scss @@ -1,2 +1,2 @@ // Shadows -$euiShadowColor: $euiColorInk !default; +@import 'node_modules/@elastic/eui-theme-common/src/global_styling/variables/shadows' diff --git a/packages/eui/src/global_styling/variables/_size.scss b/packages/eui/src/global_styling/variables/_size.scss index 29eca9c1b00..987c03b80f6 100644 --- a/packages/eui/src/global_styling/variables/_size.scss +++ b/packages/eui/src/global_styling/variables/_size.scss @@ -1,13 +1 @@ -$euiSize: 16px !default; - -$euiSizeXS: $euiSize * .25 !default; -$euiSizeS: $euiSize * .5 !default; -$euiSizeM: $euiSize * .75 !default; -$euiSizeL: $euiSize * 1.5 !default; -$euiSizeXL: $euiSize * 2 !default; -$euiSizeXXL: $euiSize * 2.5 !default; - -$euiScrollBar: $euiSize !default; -// Corner sizes are used as an inset border and therefore a smaller corner size means a larger thumb -$euiScrollBarCorner: $euiSizeXS !default; -$euiScrollBarCornerThin: $euiSizeS * .75 !default; +@import 'node_modules/@elastic/eui-theme-common/src/global_styling/variables/size' diff --git a/packages/eui/src/global_styling/variables/_states.scss b/packages/eui/src/global_styling/variables/_states.scss index fba4cc59caa..581a81bb59b 100644 --- a/packages/eui/src/global_styling/variables/_states.scss +++ b/packages/eui/src/global_styling/variables/_states.scss @@ -1,14 +1 @@ -// Colors -$euiFocusRingColor: rgba($euiColorPrimary, .3) !default; -$euiFocusRingAnimStartColor: rgba($euiColorPrimary, 0) !default; -$euiFocusRingAnimStartSize: 6px !default; -$euiFocusRingAnimStartSizeLarge: 10px !default; - -// Sizing -$euiFocusRingSizeLarge: $euiSizeXS !default; -$euiFocusRingSize: $euiFocusRingSizeLarge * .75 !default; - -// Transparency -$euiFocusTransparency: lightOrDarkTheme(.1, .2) !default; -$euiFocusTransparencyPercent: lightOrDarkTheme(90%, 80%) !default; -$euiFocusBackgroundColor: tintOrShade($euiColorPrimary, $euiFocusTransparencyPercent, $euiFocusTransparencyPercent) !default; +@import 'node_modules/@elastic/eui-theme-common/src/global_styling/variables/states' \ No newline at end of file diff --git a/packages/eui/src/global_styling/variables/_typography.scss b/packages/eui/src/global_styling/variables/_typography.scss index 1ca62f3248c..70a15446af9 100644 --- a/packages/eui/src/global_styling/variables/_typography.scss +++ b/packages/eui/src/global_styling/variables/_typography.scss @@ -1,75 +1 @@ -// Families -$euiFontFamily: 'Inter', BlinkMacSystemFont, Helvetica, Arial, sans-serif !default; -$euiCodeFontFamily: 'Roboto Mono', Menlo, Courier, monospace !default; - -// Careful using ligatures. Code editors like ACE will often error because of width calculations -$euiFontFeatureSettings: 'calt' 1, 'kern' 1, 'liga' 1 !default; - -// Font sizes -- scale is loosely based on Major Third (1.250) -$euiTextScale: 2.25, 1.75, 1.25, 1.125, 1, .875, .75 !default; - -$euiFontSize: $euiSize !default; // 5th position in scale -$euiFontSizeXS: $euiFontSize * nth($euiTextScale, 7) !default; // 12px -$euiFontSizeS: $euiFontSize * nth($euiTextScale, 6) !default; // 14px -$euiFontSizeM: $euiFontSize * nth($euiTextScale, 4) !default; // 18px -$euiFontSizeL: $euiFontSize * nth($euiTextScale, 3) !default; // 20px -$euiFontSizeXL: $euiFontSize * nth($euiTextScale, 2) !default; // 28px -$euiFontSizeXXL: $euiFontSize * nth($euiTextScale, 1) !default; // 36px - -// Line height -$euiLineHeight: 1.5 !default; -$euiBodyLineHeight: 1 !default; - -// Normally functions are imported before variables in `_index.scss` files -// But because they need to consume some typography variables they need to live here -@function convertToRem($size) { - @return #{$size / $euiFontSize}rem; -} - -// Our base gridline is at 1/2 the font-size, ensure line-heights stay on that gridline. -// EX: A proper line-height for text is 1.5 times the font-size. -// If our base font size (euiFontSize) is 16, our baseline is 8 (16*1.5 / 3). To ensure the -// text stays on the baseline, we pass a multiplier to calculate a line-height in rems. -@function lineHeightFromBaseline($multiplier: 3) { - @return convertToRem(($euiFontSize / 2) * $multiplier); -} - -// Titles map -// Lists all the properties per EuiTitle size that then gets looped through to create the selectors. -// The map allows for tokenization and easier customization per theme, otherwise you'd have to override the selectors themselves -$euiTitles: ( - 'xxxs': ( - 'font-size': $euiFontSizeXS, - 'line-height': lineHeightFromBaseline(3), - 'font-weight': $euiFontWeightBold, - ), - 'xxs': ( - 'font-size': $euiFontSizeS, - 'line-height': lineHeightFromBaseline(3), - 'font-weight': $euiFontWeightBold, - ), - 'xs': ( - 'font-size': $euiFontSize, - 'line-height': lineHeightFromBaseline(3), - 'font-weight': $euiFontWeightSemiBold, - 'letter-spacing': -.02em, - ), - 's': ( - 'font-size': $euiFontSizeL, - 'line-height': lineHeightFromBaseline(4), - 'font-weight': $euiFontWeightMedium, - 'letter-spacing': -.025em, - ), - 'm': ( - 'font-size': $euiFontSizeXL, - 'line-height': lineHeightFromBaseline(5), - 'font-weight': $euiFontWeightLight, - 'letter-spacing': -.04em, - ), - 'l': ( - 'font-size': $euiFontSizeXXL, - 'line-height': lineHeightFromBaseline(6), - 'font-weight': $euiFontWeightLight, - 'letter-spacing': -.03em, - ), -) !default; +@import 'node_modules/@elastic/eui-theme-common/src/global_styling/variables/typography' \ No newline at end of file diff --git a/packages/eui/src/global_styling/variables/_z_index.scss b/packages/eui/src/global_styling/variables/_z_index.scss index 2448a34c61a..2c2769dbd85 100644 --- a/packages/eui/src/global_styling/variables/_z_index.scss +++ b/packages/eui/src/global_styling/variables/_z_index.scss @@ -1,34 +1,2 @@ // Z-Index - -// Remember that z-index is relative to parent and based on the stacking context. -// z-indexes only compete against other z-indexes when they exist as children of -// that shared parent. - -// That means a popover with a settings of 2, will still show above a modal -// with a setting of 100, if it is within that modal and not besides it. - -// Generally that means it's a good idea to consider things added to this file -// as competitive only as siblings. - -// https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context - -$euiZLevel0: 0; -$euiZLevel1: 1000; -$euiZLevel2: 2000; -$euiZLevel3: 3000; -$euiZLevel4: 4000; -$euiZLevel5: 5000; -$euiZLevel6: 6000; -$euiZLevel7: 7000; -$euiZLevel8: 8000; -$euiZLevel9: 9000; - -$euiZToastList: $euiZLevel9; -$euiZModal: $euiZLevel8; -$euiZMask: $euiZLevel6; -$euiZNavigation: $euiZLevel6; -$euiZContentMenu: $euiZLevel2; -$euiZHeader: $euiZLevel1; -$euiZFlyout: $euiZHeader; -$euiZMaskBelowHeader: $euiZHeader; -$euiZContent: $euiZLevel0; +@import 'node_modules/@elastic/eui-theme-common/src/global_styling/variables/z_index' diff --git a/packages/eui/src/global_styling/variables/animations.ts b/packages/eui/src/global_styling/variables/animations.ts index 46bce009c92..94a1f17c3d5 100644 --- a/packages/eui/src/global_styling/variables/animations.ts +++ b/packages/eui/src/global_styling/variables/animations.ts @@ -5,62 +5,15 @@ * in compliance with, at your election, the Elastic License 2.0 or the Server * Side Public License, v 1. */ -import { CSSProperties } from 'react'; -/** - * A constant storing the `prefers-reduced-motion` media query - * so that when it is turned off, animations are not run. - */ -export const euiCanAnimate = - '@media screen and (prefers-reduced-motion: no-preference)'; - -/** - * A constant storing the `prefers-reduced-motion` media query that will - * only apply the content if the setting is off (reduce). - */ -export const euiCantAnimate = - '@media screen and (prefers-reduced-motion: reduce)'; - -/** - * Speeds / Durations / Delays - */ - -export const EuiThemeAnimationSpeeds = [ - 'extraFast', - 'fast', - 'normal', - 'slow', - 'extraSlow', -] as const; - -export type _EuiThemeAnimationSpeed = (typeof EuiThemeAnimationSpeeds)[number]; - -export type _EuiThemeAnimationSpeeds = { - /** - Default value: 90ms */ - extraFast: CSSProperties['animationDuration']; - /** - Default value: 150ms */ - fast: CSSProperties['animationDuration']; - /** - Default value: 250ms */ - normal: CSSProperties['animationDuration']; - /** - Default value: 350ms */ - slow: CSSProperties['animationDuration']; - /** - Default value: 500ms */ - extraSlow: CSSProperties['animationDuration']; -}; - -/** - * Easings / Timing functions - */ - -export const EuiThemeAnimationEasings = ['bounce', 'resistance'] as const; - -export type _EuiThemeAnimationEasing = - (typeof EuiThemeAnimationEasings)[number]; - -export type _EuiThemeAnimationEasings = Record< - _EuiThemeAnimationEasing, - CSSProperties['animationTimingFunction'] ->; - -export type _EuiThemeAnimation = _EuiThemeAnimationEasings & - _EuiThemeAnimationSpeeds; +export { + euiCanAnimate, + euiCantAnimate, + EuiThemeAnimationSpeeds, + EuiThemeAnimationEasings, + type _EuiThemeAnimationSpeed, + type _EuiThemeAnimationSpeeds, + type _EuiThemeAnimationEasing, + type _EuiThemeAnimationEasings, + type _EuiThemeAnimation, +} from '@elastic/eui-theme-common'; diff --git a/packages/eui/src/global_styling/variables/borders.ts b/packages/eui/src/global_styling/variables/borders.ts index 10eda82eb9b..642575add78 100644 --- a/packages/eui/src/global_styling/variables/borders.ts +++ b/packages/eui/src/global_styling/variables/borders.ts @@ -6,69 +6,11 @@ * Side Public License, v 1. */ -import { CSSProperties } from 'react'; -import { ColorModeSwitch } from '../../services/theme/types'; - -export interface _EuiThemeBorderWidthValues { - /** - * Thinnest width for border - * - Default value: 1px - */ - thin: CSSProperties['borderWidth']; - /** - * Thickest width for border - * - Default value: 2px - */ - thick: CSSProperties['borderWidth']; -} - -export interface _EuiThemeBorderRadiusValues { - /** - * Primary corner radius size - * - Default value: 6px - */ - medium: CSSProperties['borderRadius']; - /** - * Small corner radius size - * - Default value: 4px - */ - small: CSSProperties['borderRadius']; -} - -export interface _EuiThemeBorderColorValues { - /** - * Color for all borders; Default is `colors.lightShade` - */ - color: ColorModeSwitch; -} - -export interface _EuiThemeBorderValues extends _EuiThemeBorderColorValues { - /** - * Varied thicknesses for borders - */ - width: _EuiThemeBorderWidthValues; - /** - * Varied border radii - */ - radius: _EuiThemeBorderRadiusValues; -} - -export interface _EuiThemeBorderTypes { - /** - * Full `border` property string computed using `border.width.thin` and `border.color` - * - Default value: 1px solid [colors.lightShade] - */ - thin: CSSProperties['border']; - /** - * Full `border` property string computed using `border.width.thick` and `border.color` - * - Default value: 2px solid [colors.lightShade] - */ - thick: CSSProperties['border']; - /** - * Full editable style `border` property string computed using `border.width.thick` and `border.color` - * - Default value: 2px dotted [colors.lightShade] - */ - editable: CSSProperties['border']; -} - -export type _EuiThemeBorder = _EuiThemeBorderValues & _EuiThemeBorderTypes; +export type { + _EuiThemeBorderWidthValues, + _EuiThemeBorderRadiusValues, + _EuiThemeBorderColorValues, + _EuiThemeBorderValues, + _EuiThemeBorderTypes, + _EuiThemeBorder, +} from '@elastic/eui-theme-common'; diff --git a/packages/eui/src/global_styling/variables/breakpoint.ts b/packages/eui/src/global_styling/variables/breakpoint.ts index 68aef1fba38..85032f57d98 100644 --- a/packages/eui/src/global_styling/variables/breakpoint.ts +++ b/packages/eui/src/global_styling/variables/breakpoint.ts @@ -6,23 +6,8 @@ * Side Public License, v 1. */ -export const EuiThemeBreakpoints = ['xs', 's', 'm', 'l', 'xl'] as const; - -// This type cannot be a string enum / must be a generic string -// in case consumers add custom breakpoint sizes, such as xxl or xxs -export type _EuiThemeBreakpoint = string; - -// Explicitly list out each key so we can document default values -// via JSDoc (which is available to devs in IDE via intellisense) -export type _EuiThemeBreakpoints = Record<_EuiThemeBreakpoint, number> & { - /** - Default value: 0 */ - xs: number; - /** - Default value: 575 */ - s: number; - /** - Default value: 768 */ - m: number; - /** - Default value: 992 */ - l: number; - /** - Default value: 1200 */ - xl: number; -}; +export { + EuiThemeBreakpoints, + type _EuiThemeBreakpoint, + type _EuiThemeBreakpoints, +} from '@elastic/eui-theme-common'; diff --git a/packages/eui/src/global_styling/variables/colors.ts b/packages/eui/src/global_styling/variables/colors.ts index ab15e23d166..48e23b66f82 100644 --- a/packages/eui/src/global_styling/variables/colors.ts +++ b/packages/eui/src/global_styling/variables/colors.ts @@ -6,154 +6,13 @@ * Side Public License, v 1. */ -import { - ColorModeSwitch, - StrictColorModeSwitch, -} from '../../services/theme/types'; - -/** - * Top 5 colors - */ -export type _EuiThemeBrandColors = { - /** - * Main brand color and used for most **call to actions** like buttons and links. - */ - primary: ColorModeSwitch; - /** - * Pulls attention to key indicators like **notifications** or number of selections. - */ - accent: ColorModeSwitch; - /** - * Used for **positive** messages/graphics and additive actions. - */ - success: ColorModeSwitch; - /** - * Used for **warnings** and actions that have a potential to be destructive. - */ - warning: ColorModeSwitch; - /** - * Used for **negative** messages/graphics like errors and destructive actions. - */ - danger: ColorModeSwitch; -}; - -/** - * Every brand color must have a contrast computed text equivelant - */ -export type _EuiThemeBrandTextColors = { - /** - * Typically computed against `colors.primary` - */ - primaryText: ColorModeSwitch; - /** - * Typically computed against `colors.accent` - */ - accentText: ColorModeSwitch; - /** - * Typically computed against `colors.success` - */ - successText: ColorModeSwitch; - /** - * Typically computed against `colors.warning` - */ - warningText: ColorModeSwitch; - /** - * Typically computed against `colors.danger` - */ - dangerText: ColorModeSwitch; -}; - -export type _EuiThemeShadeColors = { - /** - * Used as the background color of primary **page content and panels** including modals and flyouts. - */ - emptyShade: ColorModeSwitch; - /** - * Used to lightly shade areas that contain **secondary content** or contain panel-like components. - */ - lightestShade: ColorModeSwitch; - /** - * Used for most **borders** and dividers (horizontal rules). - */ - lightShade: ColorModeSwitch; - /** - * The middle gray for all themes; this is the base for `colors.subdued`. - */ - mediumShade: ColorModeSwitch; - /** - * Slightly subtle graphic color - */ - darkShade: ColorModeSwitch; - /** - * Used as the **text** color and the background color for **inverted components** like tooltips and the control bar. - */ - darkestShade: ColorModeSwitch; - /** - * The opposite of `emptyShade` - */ - fullShade: ColorModeSwitch; -}; - -export type _EuiThemeTextColors = { - /** - * Computed against `colors.darkestShade` - */ - text: ColorModeSwitch; - /** - * Computed against `colors.text` - */ - title: ColorModeSwitch; - /** - * Computed against `colors.mediumShade` - */ - subduedText: ColorModeSwitch; - /** - * Computed against `colors.primaryText` - */ - link: 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**. - */ - body: ColorModeSwitch; - /** - * Used to **highlight text** when matching against search strings - */ - highlight: ColorModeSwitch; - /** - * Computed against `colors.darkestShade` - */ - disabled: ColorModeSwitch; - /** - * Computed against `colors.disabled` - */ - disabledText: ColorModeSwitch; - /** - * The base color for shadows that gets `transparentized` - * at a value based on the `colorMode` and then layered. - */ - shadow: ColorModeSwitch; -}; - -export type _EuiThemeConstantColors = { - /** - * Purest **white** - */ - ghost: string; - /** - * Purest **black** - */ - ink: string; -}; - -export type _EuiThemeColorsMode = _EuiThemeBrandColors & - _EuiThemeBrandTextColors & - _EuiThemeShadeColors & - _EuiThemeSpecialColors & - _EuiThemeTextColors; - -export type _EuiThemeColors = StrictColorModeSwitch<_EuiThemeColorsMode> & - _EuiThemeConstantColors; +export type { + _EuiThemeBrandColors, + _EuiThemeBrandTextColors, + _EuiThemeShadeColors, + _EuiThemeTextColors, + _EuiThemeSpecialColors, + _EuiThemeConstantColors, + _EuiThemeColorsMode, + _EuiThemeColors, +} from '@elastic/eui-theme-common'; diff --git a/packages/eui/src/global_styling/variables/levels.ts b/packages/eui/src/global_styling/variables/levels.ts index 7d38c71791b..bf808d9abc7 100644 --- a/packages/eui/src/global_styling/variables/levels.ts +++ b/packages/eui/src/global_styling/variables/levels.ts @@ -6,55 +6,8 @@ * Side Public License, v 1. */ -import { CSSProperties } from 'react'; - -/** - * Z-Index - * - * Remember that z-index is relative to parent and based on the stacking context. - * z-indexes only compete against other z-indexes when they exist as children of - * that shared parent. - * - * That means a popover with a settings of 2, will still show above a modal - * with a setting of 100, if it is within that modal and not besides it. - * - * Generally that means it's a good idea to consider things added to this file - * as competitive only as siblings. - * - * https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context - */ - -export const EuiThemeLevels = [ - 'toast', - 'modal', - 'mask', - 'navigation', - 'menu', - 'header', - 'flyout', - 'maskBelowHeader', - 'content', -] as const; - -export type _EuiThemeLevel = (typeof EuiThemeLevels)[number]; - -export type _EuiThemeLevels = { - /** - Default value: 9000 */ - toast: NonNullable; - /** - Default value: 8000 */ - modal: NonNullable; - /** - Default value: 6000 */ - mask: NonNullable; - /** - Default value: 6000 */ - navigation: NonNullable; - /** - Default value: 2000 */ - menu: NonNullable; - /** - Default value: 1000 */ - header: NonNullable; - /** - Default value: 1000 */ - flyout: NonNullable; - /** - Default value: 1000 */ - maskBelowHeader: NonNullable; - /** - Default value: 0 */ - content: NonNullable; -}; +export { + EuiThemeLevels, + type _EuiThemeLevel, + type _EuiThemeLevels, +} from '@elastic/eui-theme-common'; diff --git a/packages/eui/src/global_styling/variables/shadow.ts b/packages/eui/src/global_styling/variables/shadow.ts index 7761fbdb9a0..69aeb0d5846 100644 --- a/packages/eui/src/global_styling/variables/shadow.ts +++ b/packages/eui/src/global_styling/variables/shadow.ts @@ -6,23 +6,9 @@ * Side Public License, v 1. */ -export const EuiThemeShadowSizes = ['xs', 's', 'm', 'l', 'xl'] as const; - -export type _EuiThemeShadowSize = (typeof EuiThemeShadowSizes)[number]; - -/** - * Shadow t-shirt sizes descriptions - */ -export const _EuiShadowSizesDescriptions: Record<_EuiThemeShadowSize, string> = - { - xs: 'Very subtle shadow used on small components.', - s: 'Adds subtle depth, usually used in conjunction with a border.', - m: 'Used on small sized portalled content like popovers.', - l: 'Primary shadow used in most cases to add visible depth.', - xl: 'Very large shadows used for large portalled style containers like modals and flyouts.', - }; - -export interface _EuiThemeShadowCustomColor { - color?: string; - property?: 'box-shadow' | 'filter'; -} +export { + EuiThemeShadowSizes, + _EuiShadowSizesDescriptions, + type _EuiThemeShadowSize, + type _EuiThemeShadowCustomColor, +} from '@elastic/eui-theme-common'; diff --git a/packages/eui/src/global_styling/variables/size.ts b/packages/eui/src/global_styling/variables/size.ts index 98428346b61..da3c3c1eecb 100644 --- a/packages/eui/src/global_styling/variables/size.ts +++ b/packages/eui/src/global_styling/variables/size.ts @@ -6,42 +6,9 @@ * Side Public License, v 1. */ -export type _EuiThemeBase = number; - -export const EuiThemeSizes = [ - 'xxs', - 'xs', - 's', - 'm', - 'base', - 'l', - 'xl', - 'xxl', - 'xxxl', - 'xxxxl', -] as const; - -export type _EuiThemeSize = (typeof EuiThemeSizes)[number]; - -export type _EuiThemeSizes = { - /** - Default value: 2px */ - xxs: string; - /** - Default value: 4px */ - xs: string; - /** - Default value: 8px */ - s: string; - /** - Default value: 12px */ - m: string; - /** - Default value: 16px */ - base: string; - /** - Default value: 24px */ - l: string; - /** - Default value: 32px */ - xl: string; - /** - Default value: 40px */ - xxl: string; - /** - Default value: 48px */ - xxxl: string; - /** - Default value: 64px */ - xxxxl: string; -}; +export { + EuiThemeSizes, + type _EuiThemeBase, + type _EuiThemeSize, + type _EuiThemeSizes, +} from '@elastic/eui-theme-common'; diff --git a/packages/eui/src/global_styling/variables/states.ts b/packages/eui/src/global_styling/variables/states.ts index 4ec8bf0d87d..205c6e7e7b9 100644 --- a/packages/eui/src/global_styling/variables/states.ts +++ b/packages/eui/src/global_styling/variables/states.ts @@ -6,28 +6,4 @@ * Side Public License, v 1. */ -import { ColorModeSwitch } from '../../services/theme/types'; -import { CSSProperties } from 'react'; - -export interface _EuiThemeFocus { - /** - * Default color of the focus ring, some components may override this property - * - Default value: currentColor - */ - color: ColorModeSwitch; - /** - * Thickness of the outline - * - Default value: 2px - */ - width: CSSProperties['borderWidth']; - /** - * Used to transparentize the focus background color - * - Default value: { LIGHT: 0.1, DARK: 0.2 } - */ - transparency: ColorModeSwitch; - /** - * Default focus background color. Not all components set a background color on focus - * - Default value: `colors.primary` computed with `focus.transparency` - */ - backgroundColor: ColorModeSwitch; -} +export type { _EuiThemeFocus } from '@elastic/eui-theme-common'; diff --git a/packages/eui/src/global_styling/variables/typography.ts b/packages/eui/src/global_styling/variables/typography.ts index 80ebbc8b1cb..dfd57186191 100644 --- a/packages/eui/src/global_styling/variables/typography.ts +++ b/packages/eui/src/global_styling/variables/typography.ts @@ -6,141 +6,17 @@ * Side Public License, v 1. */ -import { CSSProperties } from 'react'; - -/** - * Font units of measure - */ - -export const EuiThemeFontUnits = ['rem', 'px', 'em'] as const; - -export type _EuiThemeFontUnit = (typeof EuiThemeFontUnits)[number]; - -/* - * Font scale - */ - -export const EuiThemeFontScales = [ - 'xxxs', - 'xxs', - 'xs', - 's', - 'm', - 'l', - 'xl', - 'xxl', -] as const; - -export type _EuiThemeFontScale = (typeof EuiThemeFontScales)[number]; - -export type _EuiThemeFontScales = Record<_EuiThemeFontScale, number>; - -/* - * Font base settings - */ - -export type _EuiThemeFontBase = { - /** - * The whole font family stack for all parts of the UI. - * We encourage only customizing the first font in the stack. - */ - family: string; - /** - * The font family used for monospace UI elements like EuiCode - */ - familyCode?: string; - /** - * The font family used for serif UI elements like blockquotes within EuiText - */ - familySerif?: string; - /** - * Controls advanced features OpenType fonts. - * https://developer.mozilla.org/en-US/docs/Web/CSS/font-feature-settings - */ - featureSettings?: string; - /** - * Sets the default units used for font size & line height set by UI components - * like EuiText or EuiTitle. Defaults to `rem`. - * - * NOTE: This may overridden by some internal usages, e.g. - * EuiText's `relative` size which must use `em`. - * - * @default 'rem' - */ - defaultUnits: _EuiThemeFontUnit; - /** - * A computed number that is 1/4 of `base` - */ - baseline: number; - /** - * Establishes the ideal line-height percentage, but it is the `baseline` integer that establishes the final pixel/rem value - */ - lineHeightMultiplier: number; -}; - -/* - * Font weights - */ - -export const EuiThemeFontWeights = [ - 'light', - 'regular', - 'medium', - 'semiBold', - 'bold', -] as const; - -export type _EuiThemeFontWeight = (typeof EuiThemeFontWeights)[number]; - -export type _EuiThemeFontWeights = { - /** - Default value: 300 */ - light: CSSProperties['fontWeight']; - /** - Default value: 400 */ - regular: CSSProperties['fontWeight']; - /** - Default value: 500 */ - medium: CSSProperties['fontWeight']; - /** - Default value: 600 */ - semiBold: CSSProperties['fontWeight']; - /** - Default value: 700 */ - bold: CSSProperties['fontWeight']; -}; - -/** - * Body / Base styles - */ - -export interface _EuiThemeBody { - /** - * A sizing key from one of the font scales to set as the base body font-size - */ - scale: _EuiThemeFontScale; - /** - * A font weight key for setting the base body weight - */ - weight: keyof _EuiThemeFontWeights; -} - -/** - * Title styles - */ - -export interface _EuiThemeTitle { - /** - * A font weight key for setting the base weight for titles and headings - */ - weight: keyof _EuiThemeFontWeights; -} - -/* - * Font - */ - -export type _EuiThemeFont = _EuiThemeFontBase & { - scale: _EuiThemeFontScales; - /** - * @see {@link https://eui.elastic.co/#/theming/typography/values%23font-weight | Reference} for more information - */ - weight: _EuiThemeFontWeights; - body: _EuiThemeBody; - title: _EuiThemeTitle; -}; +export { + EuiThemeFontUnits, + EuiThemeFontScales, + EuiThemeFontWeights, + type _EuiThemeFontUnit, + type _EuiThemeFontScale, + type _EuiThemeFontScales, + type _EuiThemeFontBase, + type _EuiThemeFontWeight, + type _EuiThemeFontWeights, + type _EuiThemeBody, + type _EuiThemeTitle, + type _EuiThemeFont, +} from '@elastic/eui-theme-common'; diff --git a/packages/eui/src/services/theme/provider.tsx b/packages/eui/src/services/theme/provider.tsx index c5a6957e8c3..e0678603074 100644 --- a/packages/eui/src/services/theme/provider.tsx +++ b/packages/eui/src/services/theme/provider.tsx @@ -20,6 +20,7 @@ import React, { import { Global, type CSSObject } from '@emotion/react'; import isEqual from 'lodash/isEqual'; +import { EUI_EXPERIMENTAL_THEME_ENABLED_KEY } from '../../themes/themes'; import type { CommonProps } from '../../components/common'; import { cloneElementWithCss } from '../emotion'; import { css, cx } from '../emotion/css'; @@ -117,6 +118,18 @@ export const EuiThemeProvider = ({ ) ); + // TODO: temp. testing code only, remove once obsolete + useEffect(() => { + if (process.env.NODE_ENV === 'development') { + const isEnabled = + localStorage.getItem(EUI_EXPERIMENTAL_THEME_ENABLED_KEY) != null; + + if (!isEnabled) { + localStorage.setItem(EUI_EXPERIMENTAL_THEME_ENABLED_KEY, 'true'); + } + } + }, []); + useEffect(() => { const newSystem = _system || parentSystem; if (prevSystemKey.current !== newSystem.key) { diff --git a/packages/eui/src/services/theme/types.ts b/packages/eui/src/services/theme/types.ts index 04b93b40f20..a8912db19ed 100644 --- a/packages/eui/src/services/theme/types.ts +++ b/packages/eui/src/services/theme/types.ts @@ -5,104 +5,18 @@ * in compliance with, at your election, the Elastic License 2.0 or the Server * Side Public License, v 1. */ - -import type { CSSObject } from '@emotion/react'; - -import { RecursivePartial, ValueOf } from '../../components/common'; -import { _EuiThemeAnimation } from '../../global_styling/variables/animations'; -import { _EuiThemeBreakpoints } from '../../global_styling/variables/breakpoint'; -import { _EuiThemeBorder } from '../../global_styling/variables/borders'; -import { _EuiThemeColors } from '../../global_styling/variables/colors'; -import { - _EuiThemeBase, - _EuiThemeSizes, -} from '../../global_styling/variables/size'; -import { _EuiThemeFont } from '../../global_styling/variables/typography'; -import { _EuiThemeFocus } from '../../global_styling/variables/states'; -import { _EuiThemeLevels } from '../../global_styling/variables/levels'; - -export const COLOR_MODES_STANDARD = { - light: 'LIGHT', - dark: 'DARK', -} as const; -export const COLOR_MODES_INVERSE = 'INVERSE' as const; - -export type EuiThemeColorModeInverse = typeof COLOR_MODES_INVERSE; -export type EuiThemeColorModeStandard = ValueOf; -export type EuiThemeColorMode = - | 'light' - | 'dark' - | EuiThemeColorModeStandard - | 'inverse' - | EuiThemeColorModeInverse; - -export type ColorModeSwitch = - | { - [key in EuiThemeColorModeStandard]: T; - } - | T; - -export type StrictColorModeSwitch = { - [key in EuiThemeColorModeStandard]: T; -}; - -export type EuiThemeShape = { - colors: _EuiThemeColors; - /** - Default value: 16 */ - base: _EuiThemeBase; - /** - * @see {@link https://eui.elastic.co/#/theming/sizing | Reference} for more information - */ - size: _EuiThemeSizes; - font: _EuiThemeFont; - border: _EuiThemeBorder; - focus: _EuiThemeFocus; - animation: _EuiThemeAnimation; - breakpoint: _EuiThemeBreakpoints; - levels: _EuiThemeLevels; -}; - -export type EuiThemeSystem = { - root: EuiThemeShape & T; - model: EuiThemeShape & T; - key: string; -}; - -export type EuiThemeModifications = RecursivePartial; - -export type ComputedThemeShape< - T, - P = string | number | bigint | boolean | null | undefined -> = T extends P | ColorModeSwitch - ? T extends ColorModeSwitch - ? X extends P - ? X - : { - [K in keyof (X & - Exclude< - T, - keyof X | keyof StrictColorModeSwitch - >)]: ComputedThemeShape< - (X & Exclude)[K], - P - >; - } - : T - : { - [K in keyof T]: ComputedThemeShape; - }; - -export type EuiThemeComputed = ComputedThemeShape & { - themeName: string; -}; - -export type EuiThemeNested = { - isGlobalTheme: boolean; - hasDifferentColorFromGlobalTheme: boolean; - bodyColor: string; - colorClassName: string; - setGlobalCSSVariables: Function; - globalCSSVariables?: CSSObject; - setNearestThemeCSSVariables: Function; - themeCSSVariables?: CSSObject; -}; +export { + COLOR_MODES_STANDARD, + COLOR_MODES_INVERSE, + type EuiThemeColorModeInverse, + type EuiThemeColorModeStandard, + type EuiThemeColorMode, + type ColorModeSwitch, + type StrictColorModeSwitch, + type EuiThemeShape, + type EuiThemeSystem, + type EuiThemeModifications, + type ComputedThemeShape, + type EuiThemeComputed, + type EuiThemeNested, +} from '@elastic/eui-theme-common'; diff --git a/packages/eui/src/services/theme/utils.ts b/packages/eui/src/services/theme/utils.ts index c7c9c5216d0..e86ad5c659d 100644 --- a/packages/eui/src/services/theme/utils.ts +++ b/packages/eui/src/services/theme/utils.ts @@ -6,375 +6,15 @@ * Side Public License, v 1. */ -import { - EuiThemeColorMode, - EuiThemeColorModeInverse, - EuiThemeColorModeStandard, - EuiThemeModifications, - EuiThemeSystem, - EuiThemeShape, - EuiThemeComputed, - COLOR_MODES_STANDARD, - COLOR_MODES_INVERSE, -} from './types'; - -export const DEFAULT_COLOR_MODE = COLOR_MODES_STANDARD.light; - -/** - * Returns whether the parameter is an object - * @param {any} obj - Anything - */ -const isObject = (obj: any) => obj && typeof obj === 'object'; - -/** - * Returns whether the provided color mode is `inverse` - * @param {string} colorMode - `light`, `dark`, or `inverse` - */ -export const isInverseColorMode = ( - colorMode?: string -): colorMode is EuiThemeColorModeInverse => { - return colorMode === COLOR_MODES_INVERSE; -}; - -/** - * Returns the color mode configured in the current EuiThemeProvider. - * Returns the parent color mode if none is explicity set. - * @param {string} colorMode - `light`, `dark`, or `inverse` - * @param {string} parentColorMode - `LIGHT` or `DARK`; used as the fallback - */ -export const getColorMode = ( - colorMode?: EuiThemeColorMode, - parentColorMode?: EuiThemeColorModeStandard -): EuiThemeColorModeStandard => { - if (colorMode == null) { - return parentColorMode || DEFAULT_COLOR_MODE; - } - const mode = colorMode.toUpperCase() as - | EuiThemeColorModeInverse - | EuiThemeColorModeStandard; - if (isInverseColorMode(mode)) { - return parentColorMode === COLOR_MODES_STANDARD.dark || - parentColorMode === undefined - ? COLOR_MODES_STANDARD.light - : COLOR_MODES_STANDARD.dark; - } else { - return mode; - } -}; - -/** - * Returns a value at a given path on an object. - * If `colorMode` is provided, will scope the value to the appropriate color mode key (LIGHT\DARK) - * @param {object} model - Object - * @param {string} _path - Dot-notated string to a path on the object - * @param {string} colorMode - `light` or `dark` - */ -export const getOn = ( - model: { [key: string]: any }, - _path: string, - colorMode?: EuiThemeColorModeStandard -) => { - const path = _path.split('.'); - let node = model; - while (path.length) { - const segment = path.shift()!; - - if (node.hasOwnProperty(segment) === false) { - if ( - colorMode && - node.hasOwnProperty(colorMode) === true && - node[colorMode].hasOwnProperty(segment) === true - ) { - if (node[colorMode][segment] instanceof Computed) { - node = node[colorMode][segment].getValue(null, null, node, colorMode); - } else { - node = node[colorMode][segment]; - } - } else { - return undefined; - } - } else { - if (node[segment] instanceof Computed) { - node = node[segment].getValue(null, null, node, colorMode); - } else { - node = node[segment]; - } - } - } - - return node; -}; - -/** - * Sets a value at a given path on an object. - * @param {object} model - Object - * @param {string} _path - Dot-notated string to a path on the object - * @param {any} string - The value to set - */ -export const setOn = ( - model: { [key: string]: any }, - _path: string, - value: any -) => { - const path = _path.split('.'); - const propertyName = path.pop()!; - let node = model; - - while (path.length) { - const segment = path.shift()!; - if (node.hasOwnProperty(segment) === false) { - node[segment] = {}; - } - node = node[segment]; - } - - node[propertyName] = value; - return true; -}; - -/** - * Creates a class to store the `computer` method and its eventual parameters. - * Allows for on-demand computation with up-to-date parameters via `getValue` method. - * @constructor - * @param {function} computer - Function to be computed - * @param {string | array} dependencies - Dependencies passed to the `computer` as parameters - */ -export class Computed { - constructor( - public computer: (...values: any[]) => T, - public dependencies: string | string[] = [] - ) {} - - /** - * Executes the `computer` method with the current state of the theme - * by taking into account previously computed values and modifications. - * @param {Proxy | object} base - Computed or uncomputed theme - * @param {Proxy | object} modifications - Theme value overrides - * @param {object} working - Partially computed theme - * @param {string} colorMode - `light` or `dark` - */ - getValue( - base: EuiThemeSystem | EuiThemeShape, - modifications: EuiThemeModifications = {}, - working: EuiThemeComputed, - colorMode: EuiThemeColorModeStandard - ) { - if (!this.dependencies.length) { - return this.computer(working); - } - if (!Array.isArray(this.dependencies)) { - return this.computer( - getOn(working, this.dependencies) ?? - getOn(modifications, this.dependencies, colorMode) ?? - getOn(base, this.dependencies, colorMode) - ); - } - return this.computer( - this.dependencies.map((dependency) => { - return ( - getOn(working, dependency) ?? - getOn(modifications, dependency, colorMode) ?? - getOn(base, dependency, colorMode) - ); - }) - ); - } -} - -/** - * Returns a Class (`Computed`) that stores the arbitrary computer method - * and references to its optional dependecies. - * @param {function} computer - Arbitrary method to be called at compute time. - * @param {string | array} dependencies - Values that will be provided to `computer` at compute time. - */ -export function computed(computer: (value: EuiThemeComputed) => T): T; -export function computed( - computer: (value: any[]) => T, - dependencies: string[] -): T; -export function computed( - computer: (value: any) => T, - dependencies: string -): T; -export function computed( - comp: ((value: T) => T) | ((value: any) => T) | ((value: any[]) => T), - dep?: string | string[] -) { - return new Computed(comp, dep); -} - -/** - * Takes an uncomputed theme, and computes and returns all values taking - * into consideration value overrides and configured color mode. - * Overrides take precedence, and only values in the current color mode - * are computed and returned. - * @param {Proxy} base - Object to transform into Proxy - * @param {Proxy | object} over - Unique identifier or name - * @param {string} colorMode - `light` or `dark` - */ -export const getComputed = ( - base: EuiThemeSystem, - over: Partial>, - colorMode: EuiThemeColorModeStandard -): EuiThemeComputed => { - const output = { themeName: base.key }; - - function loop( - base: { [key: string]: any }, - over: { [key: string]: any }, - checkExisting: boolean = false, - path?: string - ) { - Object.keys(base).forEach((key) => { - let newPath = path ? `${path}.${key}` : `${key}`; - // @ts-expect-error `key` is not necessarily a colorMode key - if ([...Object.values(COLOR_MODES_STANDARD), colorMode].includes(key)) { - if (key !== colorMode) { - return; - } else { - const colorModeSegment = new RegExp( - `(\\.${colorMode}\\b)|(\\b${colorMode}\\.)` - ); - newPath = newPath.replace(colorModeSegment, ''); - } - } - const existing = checkExisting && getOn(output, newPath); - if (!existing || isObject(existing)) { - const baseValue = - base[key] instanceof Computed - ? base[key].getValue(base.root, over.root, output, colorMode) - : base[key]; - const overValue = - over[key] instanceof Computed - ? over[key].getValue(base.root, over.root, output, colorMode) - : over[key]; - if (isObject(baseValue) && !Array.isArray(baseValue)) { - loop(baseValue, overValue ?? {}, checkExisting, newPath); - } else { - setOn(output, newPath, overValue ?? baseValue); - } - } - }); - } - // Compute standard theme values and apply overrides - loop(base, over); - // Compute and apply extension values only - loop(over, {}, true); - return output as EuiThemeComputed; -}; - -/** - * Builds a Proxy with a custom `handler` designed to self-reference values - * and prevent arbitrary value overrides. - * @param {object} model - Object to transform into Proxy - * @param {string} key - Unique identifier or name - */ -export const buildTheme = (model: T, key: string) => { - const handler: ProxyHandler> = { - getPrototypeOf(target) { - return Reflect.getPrototypeOf(target.model); - }, - - setPrototypeOf(target, prototype) { - return Reflect.setPrototypeOf(target.model, prototype); - }, - - isExtensible(target) { - return Reflect.isExtensible(target); - }, - - preventExtensions(target) { - return Reflect.preventExtensions(target.model); - }, - - getOwnPropertyDescriptor(target, key) { - return Reflect.getOwnPropertyDescriptor(target.model, key); - }, - - defineProperty(target, property, attributes) { - return Reflect.defineProperty(target.model, property, attributes); - }, - - has(target, property) { - return Reflect.has(target.model, property); - }, - - get(_target, property) { - if (property === 'key') { - return _target[property]; - } - - // prevent Safari from locking up when the proxy is used in dev tools - // as it doesn't support getPrototypeOf - if (property === '__proto__') return {}; - - const target = property === 'root' ? _target : _target.model || _target; - // @ts-ignore `string` index signature - const value = target[property]; - if (isObject(value) && !Array.isArray(value)) { - return new Proxy( - { - model: value, - root: _target.root, - key: `_${_target.key}`, - }, - handler - ); - } else { - return value; - } - }, - - set(target: any) { - return target; - }, - - deleteProperty(target: any) { - return target; - }, - - ownKeys(target) { - return Reflect.ownKeys(target.model); - }, - - apply(target: any) { - return target; - }, - - construct(target: any) { - return target; - }, - }; - const themeProxy = new Proxy({ model, root: model, key }, handler); - - return themeProxy; -}; - -/** - * Deeply merges two objects, using `source` values whenever possible. - * @param {object} _target - Object with fallback values - * @param {object} source - Object with desired values - */ -export const mergeDeep = ( - _target: { [key: string]: any }, - source: { [key: string]: any } = {} -) => { - const target = { ..._target }; - - if (!isObject(target) || !isObject(source)) { - return source; - } - - Object.keys(source).forEach((key) => { - const targetValue = target[key]; - const sourceValue = source[key]; - - if (isObject(targetValue) && isObject(sourceValue)) { - target[key] = mergeDeep({ ...targetValue }, { ...sourceValue }); - } else { - target[key] = sourceValue; - } - }); - - return target; -}; +export { + DEFAULT_COLOR_MODE, + isInverseColorMode, + getColorMode, + getOn, + setOn, + Computed, + computed, + getComputed, + buildTheme, + mergeDeep, +} from '@elastic/eui-theme-common'; diff --git a/packages/eui/src/themes/index.ts b/packages/eui/src/themes/index.ts index cec3cda26c3..a77ffa51ee1 100644 --- a/packages/eui/src/themes/index.ts +++ b/packages/eui/src/themes/index.ts @@ -7,7 +7,11 @@ */ export type { EUI_THEME } from './themes'; -export { EUI_THEMES, isDefaultTheme } from './themes'; +export { + EUI_THEMES, + isDefaultTheme, + isExperimentalThemeEnabled, +} from './themes'; export { AMSTERDAM_NAME_KEY, EuiThemeAmsterdam } from './amsterdam/theme'; diff --git a/packages/eui/src/themes/themes.ts b/packages/eui/src/themes/themes.ts index d2f714092df..540fac2e5fe 100644 --- a/packages/eui/src/themes/themes.ts +++ b/packages/eui/src/themes/themes.ts @@ -31,3 +31,14 @@ export const EUI_THEMES: EUI_THEME[] = [ export const isDefaultTheme = (name: string) => { return name === AMSTERDAM_NAME_KEY; }; + +export const EUI_EXPERIMENTAL_THEME_ENABLED_KEY = + 'eui-experimental-theme-enabled'; + +export const isExperimentalThemeEnabled = () => { + if (typeof localStorage !== 'undefined') { + return localStorage.getItem(EUI_EXPERIMENTAL_THEME_ENABLED_KEY) === 'true'; + } + + return false; +}; diff --git a/packages/website/package.json b/packages/website/package.json index ea8f9b296fc..fde2b3f951d 100644 --- a/packages/website/package.json +++ b/packages/website/package.json @@ -4,6 +4,7 @@ "private": true, "scripts": { "docusaurus": "docusaurus", + "build:workspaces": "yarn workspaces foreach -R --from @elastic/eui-website run build:workspaces && yarn workspaces foreach -Rti --from @elastic/eui-website run build", "start": "cross-env NODE_OPTIONS=--openssl-legacy-provider docusaurus start", "build": "cross-env NODE_OPTIONS=--openssl-legacy-provider docusaurus build", "swizzle": "docusaurus swizzle", diff --git a/packages/website/src/components/homepage/highlights/index.tsx b/packages/website/src/components/homepage/highlights/index.tsx index e9957110530..680a61474f8 100644 --- a/packages/website/src/components/homepage/highlights/index.tsx +++ b/packages/website/src/components/homepage/highlights/index.tsx @@ -3,7 +3,6 @@ import { EuiButtonEmpty, EuiCard, EuiIcon, - EuiImage, EuiText, EuiTextAlign, useEuiMemoizedStyles, @@ -12,8 +11,6 @@ import { } from '@elastic/eui'; import { HomepageContainer, HomepageSection } from '../layout'; import { css } from '@emotion/react'; -import { useContext } from 'react'; -import { AppThemeContext } from '@elastic/eui-docusaurus-theme/lib/components/theme_context/index.js'; import SvgFlex from './svg/flex.svg'; import SvgSpacer from './svg/spacer.svg'; @@ -223,10 +220,7 @@ const getStyles = ({ euiTheme, colorMode }: UseEuiTheme) => ({ }); export const HomepageHighlights = () => { - const { theme } = useContext(AppThemeContext); const styles = useEuiMemoizedStyles(getStyles); - const isDarkMode = theme === 'dark'; - const headingId = useGeneratedHtmlId(); return ( diff --git a/yarn.lock b/yarn.lock index 7640422046e..b2dc445e8dc 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4609,8 +4609,9 @@ __metadata: "@docusaurus/types": "npm:^3.5.2" "@docusaurus/utils-validation": "npm:^3.5.2" "@elastic/datemath": "npm:^5.0.3" - "@elastic/eui": "npm:97.2.0" + "@elastic/eui": "workspace:^" "@elastic/eui-docgen": "workspace:^" + "@elastic/eui-theme-borealis": "workspace:^" "@emotion/css": "npm:^11.11.2" "@emotion/react": "npm:^11.11.4" "@types/react": "npm:^18.3.3" @@ -4638,6 +4639,72 @@ __metadata: languageName: unknown linkType: soft +"@elastic/eui-theme-borealis@workspace:^, @elastic/eui-theme-borealis@workspace:packages/eui-theme-borealis": + version: 0.0.0-use.local + resolution: "@elastic/eui-theme-borealis@workspace:packages/eui-theme-borealis" + dependencies: + "@elastic/eui-theme-common": "workspace:^" + "@types/jest": "npm:^29.5.12" + "@types/prettier": "npm:2.7.3" + "@typescript-eslint/eslint-plugin": "npm:^5.59.7" + "@typescript-eslint/parser": "npm:^5.59.7" + eslint: "npm:^8.41.0" + eslint-config-prettier: "npm:^8.8.0" + eslint-plugin-import: "npm:^2.27.5" + eslint-plugin-jest: "npm:^28.5.0" + eslint-plugin-local: "npm:^1.0.0" + eslint-plugin-prettier: "npm:^4.2.1" + jest: "npm:^29.7.0" + prettier: "npm:^2.8.8" + stylelint: "npm:^15.7.0" + stylelint-config-prettier-scss: "npm:^1.0.0" + stylelint-config-standard: "npm:^33.0.0" + stylelint-config-standard-scss: "npm:^9.0.0" + typescript: "npm:^5.6.2" + peerDependencies: + "@elastic/eui-theme-common": 0.0.1 + languageName: unknown + linkType: soft + +"@elastic/eui-theme-common@workspace:^, @elastic/eui-theme-common@workspace:packages/eui-theme-common": + version: 0.0.0-use.local + resolution: "@elastic/eui-theme-common@workspace:packages/eui-theme-common" + dependencies: + "@babel/cli": "npm:^7.21.5" + "@babel/core": "npm:^7.21.8" + "@babel/preset-env": "npm:^7.21.5" + "@babel/preset-react": "npm:^7.18.6" + "@babel/preset-typescript": "npm:^7.21.5" + "@emotion/react": "npm:^11.11.0" + "@types/jest": "npm:^29.5.12" + "@types/prettier": "npm:2.7.3" + "@types/react": "npm:^16.9 || ^17.0 || ^18.0" + "@types/react-dom": "npm:^16.9 || ^17.0 || ^18.0" + "@typescript-eslint/eslint-plugin": "npm:^5.59.7" + "@typescript-eslint/parser": "npm:^5.59.7" + eslint: "npm:^8.41.0" + eslint-config-prettier: "npm:^8.8.0" + eslint-plugin-import: "npm:^2.27.5" + eslint-plugin-jest: "npm:^28.5.0" + eslint-plugin-local: "npm:^1.0.0" + eslint-plugin-prettier: "npm:^4.2.1" + jest: "npm:^29.7.0" + prettier: "npm:^2.8.8" + react: "npm:^18.2.0" + react-dom: "npm:^18.2.0" + rimraf: "npm:^6.0.1" + stylelint: "npm:^15.7.0" + stylelint-config-prettier-scss: "npm:^1.0.0" + stylelint-config-standard: "npm:^33.0.0" + stylelint-config-standard-scss: "npm:^9.0.0" + typescript: "npm:4.5.3" + peerDependencies: + "@emotion/react": 11.x + react: ^16.12 || ^17.0 || ^18.0 + react-dom: ^16.12 || ^17.0 || ^18.0 + languageName: unknown + linkType: soft + "@elastic/eui-website@workspace:packages/website": version: 0.0.0-use.local resolution: "@elastic/eui-website@workspace:packages/website" @@ -4676,57 +4743,6 @@ __metadata: languageName: unknown linkType: soft -"@elastic/eui@npm:97.2.0": - version: 97.2.0 - resolution: "@elastic/eui@npm:97.2.0" - dependencies: - "@hello-pangea/dnd": "npm:^16.6.0" - "@types/lodash": "npm:^4.14.202" - "@types/numeral": "npm:^2.0.5" - "@types/react-window": "npm:^1.8.8" - "@types/refractor": "npm:^3.4.0" - chroma-js: "npm:^2.4.2" - classnames: "npm:^2.5.1" - lodash: "npm:^4.17.21" - mdast-util-to-hast: "npm:^10.2.0" - numeral: "npm:^2.0.6" - prop-types: "npm:^15.8.1" - react-dropzone: "npm:^11.7.1" - react-element-to-jsx-string: "npm:^15.0.0" - react-focus-on: "npm:^3.9.1" - react-is: "npm:^17.0.2" - react-remove-scroll-bar: "npm:^2.3.4" - react-virtualized-auto-sizer: "npm:^1.0.24" - react-window: "npm:^1.8.10" - refractor: "npm:^3.6.0" - rehype-raw: "npm:^5.1.0" - rehype-react: "npm:^6.2.1" - rehype-stringify: "npm:^8.0.0" - remark-breaks: "npm:^2.0.2" - remark-emoji: "npm:^2.1.0" - remark-parse-no-trim: "npm:^8.0.4" - remark-rehype: "npm:^8.1.0" - tabbable: "npm:^5.3.3" - text-diff: "npm:^1.0.1" - unified: "npm:^9.2.2" - unist-util-visit: "npm:^2.0.3" - url-parse: "npm:^1.5.10" - uuid: "npm:^8.3.0" - vfile: "npm:^4.2.1" - peerDependencies: - "@elastic/datemath": ^5.0.2 - "@emotion/css": 11.x - "@emotion/react": 11.x - "@types/react": ^16.9 || ^17.0 || ^18.0 - "@types/react-dom": ^16.9 || ^17.0 || ^18.0 - moment: ^2.13.0 - react: ^16.12 || ^17.0 || ^18.0 - react-dom: ^16.12 || ^17.0 || ^18.0 - typescript: ~4.5.3 || ^5 - checksum: 10c0/c8fed61d39cc6d06f00caf8234b97e9579ca4d11d7bf0d3cf4cb5d09a6782d8866a7db66b02d3d5eb4f2947a213aca03837b38b166020d21c9bda2e7eb20ad11 - languageName: node - linkType: hard - "@elastic/eui@workspace:^, @elastic/eui@workspace:packages/eui": version: 0.0.0-use.local resolution: "@elastic/eui@workspace:packages/eui" @@ -4748,6 +4764,8 @@ __metadata: "@cypress/webpack-dev-server": "npm:^1.7.0" "@elastic/charts": "npm:^64.1.0" "@elastic/datemath": "npm:^5.0.3" + "@elastic/eui-theme-borealis": "workspace:^" + "@elastic/eui-theme-common": "workspace:^" "@emotion/babel-preset-css-prop": "npm:^11.11.0" "@emotion/cache": "npm:^11.11.0" "@emotion/css": "npm:^11.11.0" @@ -4931,6 +4949,8 @@ __metadata: yo: "npm:^4.3.1" peerDependencies: "@elastic/datemath": ^5.0.2 + "@elastic/eui-theme-borealis": 0.0.1 + "@elastic/eui-theme-common": 0.0.1 "@emotion/css": 11.x "@emotion/react": 11.x "@types/react": ^16.9 || ^17.0 || ^18.0 @@ -8387,21 +8407,21 @@ __metadata: languageName: node linkType: hard -"@types/react-dom@npm:^18.0.0, @types/react-dom@npm:^18.2.6": - version: 18.2.6 - resolution: "@types/react-dom@npm:18.2.6" +"@types/react-dom@npm:^16.9 || ^17.0 || ^18.0, @types/react-dom@npm:^18.3.0": + version: 18.3.0 + resolution: "@types/react-dom@npm:18.3.0" dependencies: "@types/react": "npm:*" - checksum: 10c0/bd734ca04c52b3c96891a7f9c1139486807dac7a2449fb72e8f8e23018bc6eeeb87a490a105cb39d05ccb7ddf80ed7a441e5bd3e5866c6f6ae8870cd723599e8 + checksum: 10c0/6c90d2ed72c5a0e440d2c75d99287e4b5df3e7b011838cdc03ae5cd518ab52164d86990e73246b9d812eaf02ec351d74e3b4f5bd325bf341e13bf980392fd53b languageName: node linkType: hard -"@types/react-dom@npm:^18.3.0": - version: 18.3.0 - resolution: "@types/react-dom@npm:18.3.0" +"@types/react-dom@npm:^18.0.0, @types/react-dom@npm:^18.2.6": + version: 18.2.6 + resolution: "@types/react-dom@npm:18.2.6" dependencies: "@types/react": "npm:*" - checksum: 10c0/6c90d2ed72c5a0e440d2c75d99287e4b5df3e7b011838cdc03ae5cd518ab52164d86990e73246b9d812eaf02ec351d74e3b4f5bd325bf341e13bf980392fd53b + checksum: 10c0/bd734ca04c52b3c96891a7f9c1139486807dac7a2449fb72e8f8e23018bc6eeeb87a490a105cb39d05ccb7ddf80ed7a441e5bd3e5866c6f6ae8870cd723599e8 languageName: node linkType: hard @@ -34194,6 +34214,16 @@ __metadata: languageName: node linkType: hard +"typescript@npm:^5.6.2": + version: 5.6.2 + resolution: "typescript@npm:5.6.2" + bin: + tsc: bin/tsc + tsserver: bin/tsserver + checksum: 10c0/3ed8297a8c7c56b7fec282532503d1ac795239d06e7c4966b42d4330c6cf433a170b53bcf93a130a7f14ccc5235de5560df4f1045eb7f3550b46ebed16d3c5e5 + languageName: node + linkType: hard + "typescript@npm:~5.5.4": version: 5.5.4 resolution: "typescript@npm:5.5.4" @@ -34214,6 +34244,16 @@ __metadata: languageName: node linkType: hard +"typescript@patch:typescript@npm%3A^5.6.2#optional!builtin": + version: 5.6.2 + resolution: "typescript@patch:typescript@npm%3A5.6.2#optional!builtin::version=5.6.2&hash=b45daf" + bin: + tsc: bin/tsc + tsserver: bin/tsserver + checksum: 10c0/e6c1662e4852e22fe4bbdca471dca3e3edc74f6f1df043135c44a18a7902037023ccb0abdfb754595ca9028df8920f2f8492c00fc3cbb4309079aae8b7de71cd + languageName: node + linkType: hard + "typescript@patch:typescript@npm%3A~5.5.4#optional!builtin": version: 5.5.4 resolution: "typescript@patch:typescript@npm%3A5.5.4#optional!builtin::version=5.5.4&hash=b45daf" From 39e60d656155c294471cd536510ce10615682c7e Mon Sep 17 00:00:00 2001 From: Lene Gadewoll Date: Thu, 31 Oct 2024 15:32:59 +0100 Subject: [PATCH 02/64] [Visual Refresh] Update Typography scale (#8103) --- .../src/variables/_font_weight.scss | 10 ++++++++ .../src/variables/_index.scss | 1 + .../src/variables/_typography.scss | 16 ++++++------- .../src/variables/_typography.ts | 24 +++++++++---------- 4 files changed, 31 insertions(+), 20 deletions(-) create mode 100644 packages/eui-theme-borealis/src/variables/_font_weight.scss diff --git a/packages/eui-theme-borealis/src/variables/_font_weight.scss b/packages/eui-theme-borealis/src/variables/_font_weight.scss new file mode 100644 index 00000000000..8ee5e23f925 --- /dev/null +++ b/packages/eui-theme-borealis/src/variables/_font_weight.scss @@ -0,0 +1,10 @@ +// Separated out to its own file for easy import into docs + +// Font weights +$euiFontWeightLight: 300 !default; +$euiFontWeightRegular: 400 !default; +$euiFontWeightMedium: 450 !default; +$euiFontWeightSemiBold: 500 !default; +$euiFontWeightBold: 600 !default; +$euiCodeFontWeightRegular: 400 !default; +$euiCodeFontWeightBold: 600 !default; diff --git a/packages/eui-theme-borealis/src/variables/_index.scss b/packages/eui-theme-borealis/src/variables/_index.scss index 9768a81e8ee..05411e17464 100644 --- a/packages/eui-theme-borealis/src/variables/_index.scss +++ b/packages/eui-theme-borealis/src/variables/_index.scss @@ -4,4 +4,5 @@ @import 'buttons'; @import 'page'; +@import 'font_weight'; @import 'typography'; diff --git a/packages/eui-theme-borealis/src/variables/_typography.scss b/packages/eui-theme-borealis/src/variables/_typography.scss index 824f56b42da..9b35d9c5fd3 100644 --- a/packages/eui-theme-borealis/src/variables/_typography.scss +++ b/packages/eui-theme-borealis/src/variables/_typography.scss @@ -1,23 +1,23 @@ // Finally start using the non-beta version of Inter $euiFontFamily: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol' !default; -// Font sizes -- scale is loosely based on Major Third (1.250) with a base of 14px +// Font sizes -- scale is loosely based on Minor Third (1.200) with a base of 14px // Base list is an altered scale based on 16px to match the resulted values below $euiTextScale: 2.125, 1.6875, 1.375, 1.125, 1, .875, .75 !default; $euiFontSize: $euiSize - 2; // 14px -$euiFontSizeXS: floor($euiFontSize * .86); // 12px // h6 -$euiFontSizeS: floor($euiFontSize * 1); // 14px // h5 --> Now the same as the base $euiFontSize -$euiFontSizeM: ceil($euiFontSize * 1.14); // 16px // h4 -$euiFontSizeL: ceil($euiFontSize * 1.57); // 22px // h3 -$euiFontSizeXL: floor($euiFontSize * 1.93); // 27px // h2 -$euiFontSizeXXL: floor($euiFontSize * 2.43); // 34px // h1 +$euiFontSizeXS: floor($euiFontSize * .86); // 12px // h6 +$euiFontSizeS: floor($euiFontSize * 1); // 14px // h5 +$euiFontSizeM: ceil($euiFontSize * 1.14); // 16px // h4 +$euiFontSizeL: floor($euiFontSize * 1.44); // 20px // h3 +$euiFontSizeXL: floor($euiFontSize * 1.728); // 24px // h2 +$euiFontSizeXXL: ceil($euiFontSize * 2.074); // 30px // h1 $euiBodyLineHeight: 1.142857143 !default; // 16px from a 14px base font size to ensure it aligns to our 16px grid $euiCodeFontWeightRegular: 400; -$euiCodeFontWeightBold: 700; +$euiCodeFontWeightBold: 600; // Normally functions are imported before variables in `_index.scss` files // But because they need to consume some typography variables they need to live here diff --git a/packages/eui-theme-borealis/src/variables/_typography.ts b/packages/eui-theme-borealis/src/variables/_typography.ts index 6454c7b239c..ae43f118d25 100644 --- a/packages/eui-theme-borealis/src/variables/_typography.ts +++ b/packages/eui-theme-borealis/src/variables/_typography.ts @@ -14,16 +14,16 @@ import { type _EuiThemeFontWeights, } from '@elastic/eui-theme-common'; -// Typographic scale -- loosely based on Major Third (1.250) +// Typographic scale -- loosely based on Major Third (1.200) export const fontScale: _EuiThemeFontScales = { - xxxs: 0.5625, - xxs: 0.6875, - xs: 0.75, - s: 0.875, - m: 1, - l: 1.375, - xl: 1.6875, - xxl: 2.125, + xxxs: 0.5625, // 9px + xxs: 0.6875, // 11px + xs: 0.75, // 12px + s: 0.875, // 14px + m: 1, // 16px + l: 1.25, // 20px + xl: 1.5, // 24px + xxl: 1.875, // 30px }; // Families & base font settings @@ -43,9 +43,9 @@ export const fontBase: _EuiThemeFontBase = { export const fontWeight: _EuiThemeFontWeights = { light: 300, regular: 400, - medium: 500, - semiBold: 600, - bold: 700, + medium: 450, + semiBold: 500, + bold: 600, }; export const font: _EuiThemeFont = { From 22b2d6cbe7f80a3914c653f61429b8088889d899 Mon Sep 17 00:00:00 2001 From: Lene Gadewoll Date: Thu, 31 Oct 2024 15:33:21 +0100 Subject: [PATCH 03/64] [Visual Refresh] Setup semantic color tokens (#8097) --- .../demo/actions_bar/actions_bar.tsx | 9 +- .../src/theme/EditThisPage/index.tsx | 2 +- .../docusaurus-theme/src/theme/Root.styles.ts | 141 +++--- packages/eui-theme-borealis/package.json | 2 +- packages/eui-theme-borealis/src/index.ts | 4 +- .../eui-theme-borealis/src/theme_dark.scss | 6 +- .../eui-theme-borealis/src/theme_light.scss | 6 +- .../src/variables/_borders.scss | 3 + .../src/variables/_borders.ts | 5 +- .../src/variables/_buttons.scss | 22 +- .../src/variables/_buttons.ts | 129 +++++ .../src/variables/_colors_dark.scss | 49 -- .../src/variables/_colors_dark.ts | 73 --- .../src/variables/_colors_light.scss | 49 -- .../src/variables/_colors_light.ts | 74 --- .../src/variables/_components.ts | 226 +++++++++ .../src/variables/_form.scss | 12 + .../src/variables/_forms.ts | 63 +++ .../src/variables/_index.scss | 3 +- .../src/variables/_states.scss | 2 +- .../src/variables/_states.ts | 5 +- .../src/variables/colors/_colors_dark.scss | 121 +++++ .../src/variables/colors/_colors_dark.ts | 178 +++++++ .../src/variables/colors/_colors_light.scss | 123 +++++ .../src/variables/colors/_colors_light.ts | 178 +++++++ .../src/variables/colors/_primitive_colors.ts | 224 +++++++++ .../variables/colors/_semantic_colors.scss | 211 ++++++++ .../src/variables/colors/_semantic_colors.ts | 163 +++++++ .../variables/{_colors.ts => colors/index.ts} | 5 +- packages/eui-theme-common/package.json | 2 +- .../src/global_styling/types.ts | 3 + .../global_styling/variables/_buttons.scss | 2 +- .../src/global_styling/variables/_form.scss | 15 +- .../src/global_styling/variables/buttons.ts | 57 +++ .../src/global_styling/variables/colors.ts | 124 ++++- .../global_styling/variables/components.ts | 101 ++++ .../src/global_styling/variables/forms.ts | 28 ++ .../src/global_styling/variables/index.ts | 3 + packages/eui-theme-common/src/utils.test.ts | 12 + packages/eui-theme-common/src/utils.ts | 17 + ..._Editors_Syntax_EuiCodeBlock_Highlight.png | Bin 0 -> 6082 bytes ..._Editors_Syntax_EuiCodeBlock_Highlight.png | Bin 0 -> 11981 bytes .../src-docs/src/views/badge/beta_badge.tsx | 8 +- .../src/views/theme/color/_color_js.tsx | 66 +-- .../src/views/theme/color/_contrast_js.tsx | 6 +- .../src/views/theme/color/contrast.tsx | 65 +-- .../src/views/theme/sizing/_sizing_js.tsx | 5 +- .../badge/__snapshots__/badge.test.tsx.snap | 35 ++ .../eui/src/components/badge/badge.styles.ts | 6 +- packages/eui/src/components/badge/badge.tsx | 1 + .../__snapshots__/beta_badge.test.tsx.snap | 11 + .../badge/beta_badge/beta_badge.styles.ts | 1 + .../badge/beta_badge/beta_badge.tsx | 8 +- .../eui/src/components/badge/color_utils.ts | 20 +- .../badge_notification.test.tsx.snap | 8 + .../badge_notification.styles.ts | 1 + .../notification_badge/badge_notification.tsx | 7 +- .../bottom_bar/bottom_bar.styles.ts | 4 +- .../breadcrumbs/_breadcrumb_content.styles.ts | 13 +- .../button/__snapshots__/button.test.tsx.snap | 11 + packages/eui/src/components/button/button.tsx | 2 +- .../button_display/_button_display.styles.ts | 2 +- .../__snapshots__/button_empty.test.tsx.snap | 15 + .../button/button_empty/button_empty.test.tsx | 2 +- .../button/button_empty/button_empty.tsx | 2 +- .../__snapshots__/button_group.test.tsx.snap | 160 ++++++ .../button/button_group/button_group.test.tsx | 2 +- .../button/button_group/button_group.tsx | 2 +- .../button_group_button.styles.ts | 13 +- .../button_group/button_group_button.tsx | 2 +- .../__snapshots__/button_icon.test.tsx.snap | 15 + .../button/button_icon/button_icon.test.tsx | 2 +- .../button/button_icon/button_icon.tsx | 2 +- .../card/__snapshots__/card.test.tsx.snap | 33 ++ .../eui/src/components/card/card.styles.ts | 2 +- .../components/code/code_block.stories.tsx | 17 +- .../code/code_block_annotations.tsx | 2 +- .../components/code/code_block_line.styles.ts | 3 +- .../collapsible_nav_group.styles.ts | 14 +- .../collapsible_nav_item.styles.ts | 2 +- .../color_palette_display.styles.ts | 7 +- .../color_picker/color_picker.styles.ts | 4 +- .../color_picker_swatch.styles.ts | 2 +- .../components/datagrid/data_grid.styles.ts | 14 +- .../date_picker/react_date_picker.styles.ts | 4 +- .../super_date_picker.styles.ts | 13 +- .../drag_and_drop/droppable.styles.ts | 8 +- .../__snapshots__/empty_prompt.test.tsx.snap | 14 + .../empty_prompt/empty_prompt.styles.ts | 16 +- .../filter_group/filter_button.stories.tsx | 2 +- .../filter_group/filter_select_item.styles.ts | 4 +- .../flyout/_flyout_close_button.styles.ts | 5 +- .../src/components/form/form.styles.test.tsx | 16 +- .../eui/src/components/form/form.styles.ts | 72 +-- .../form/range/range_tooltip.styles.ts | 26 +- .../components/form/switch/switch.styles.ts | 49 +- .../eui/src/components/form/switch/switch.tsx | 6 +- .../src/components/header/header.styles.ts | 22 +- .../health/__snapshots__/health.test.tsx.snap | 22 + .../icon/__snapshots__/icon.test.tsx.snap | 18 + .../eui/src/components/icon/icon.styles.ts | 19 +- .../eui/src/components/icon/named_colors.tsx | 1 + .../inline_edit/inline_edit_form.styles.ts | 4 +- .../key_pad_menu/key_pad_menu_item.styles.ts | 8 +- .../list_group/list_group_item.styles.ts | 23 +- .../eui/src/components/mark/mark.styles.ts | 12 +- .../markdown_format.styles.test.ts.snap | 37 ++ .../markdown_editor_drop_zone.styles.ts | 14 +- .../markdown_format.stories.tsx | 7 + .../markdown_editor/markdown_format.styles.ts | 10 +- .../modal/confirm_modal.stories.tsx | 2 +- .../mutation_observer.stories.tsx | 2 +- .../overlay_mask/overlay_mask.styles.ts | 4 +- .../__snapshots__/page_section.test.tsx.snap | 10 + .../page_template/inner/page_inner.styles.ts | 4 +- .../panel/__snapshots__/panel.test.tsx.snap | 6 + .../popover/popover_footer.styles.ts | 7 +- .../popover_panel/_popover_panel.styles.ts | 18 +- .../progress.styles.test.ts.snap | 19 + .../__snapshots__/progress.test.tsx.snap | 6 + .../components/progress/progress.styles.ts | 18 +- .../eui/src/components/progress/progress.tsx | 1 + .../selectable_list_item.styles.ts | 4 +- .../side_nav/side_nav_item.styles.ts | 8 +- packages/eui/src/components/skeleton/utils.ts | 14 +- .../components/steps/step_number.styles.ts | 2 +- .../table/table_cells_shared.styles.ts | 14 +- .../src/components/table/table_row.styles.ts | 31 +- .../eui/src/components/text/text.styles.ts | 3 +- .../src/components/text/text_color.styles.ts | 13 +- .../eui/src/components/text/text_color.tsx | 1 + .../components/tool_tip/tool_tip.styles.ts | 36 +- .../components/tour/_tour_footer.styles.ts | 8 +- .../tree_view/tree_view_item.styles.ts | 7 +- .../__snapshots__/_button.test.ts.snap} | 21 + .../mixins/__snapshots__/_color.test.ts.snap | 14 +- .../mixins/_button.test.ts} | 4 +- .../eui/src/global_styling/mixins/_button.ts | 268 ++++++++++ .../eui/src/global_styling/mixins/_color.ts | 119 +++-- .../eui/src/global_styling/mixins/index.ts | 1 + .../global_styling/reset/global_styles.tsx | 7 +- .../src/themes/amsterdam/_colors_dark.scss | 88 +++- .../src/themes/amsterdam/_colors_light.scss | 88 +++- .../amsterdam/global_styling/mixins/button.ts | 304 +----------- .../global_styling/variables/_buttons.ts | 215 ++++++++ .../global_styling/variables/_colors.ts | 459 +++++++++++++++++- .../global_styling/variables/_components.ts | 389 +++++++++++++++ .../global_styling/variables/_forms.scss | 12 + .../global_styling/variables/_forms.ts | 121 +++++ .../global_styling/variables/_index.scss | 1 + packages/eui/src/themes/amsterdam/theme.ts | 2 + 151 files changed, 4643 insertions(+), 1189 deletions(-) create mode 100644 packages/eui-theme-borealis/src/variables/_borders.scss create mode 100644 packages/eui-theme-borealis/src/variables/_buttons.ts delete mode 100644 packages/eui-theme-borealis/src/variables/_colors_dark.scss delete mode 100644 packages/eui-theme-borealis/src/variables/_colors_dark.ts delete mode 100644 packages/eui-theme-borealis/src/variables/_colors_light.scss delete mode 100644 packages/eui-theme-borealis/src/variables/_colors_light.ts create mode 100644 packages/eui-theme-borealis/src/variables/_components.ts create mode 100644 packages/eui-theme-borealis/src/variables/_form.scss create mode 100644 packages/eui-theme-borealis/src/variables/_forms.ts create mode 100644 packages/eui-theme-borealis/src/variables/colors/_colors_dark.scss create mode 100644 packages/eui-theme-borealis/src/variables/colors/_colors_dark.ts create mode 100644 packages/eui-theme-borealis/src/variables/colors/_colors_light.scss create mode 100644 packages/eui-theme-borealis/src/variables/colors/_colors_light.ts create mode 100644 packages/eui-theme-borealis/src/variables/colors/_primitive_colors.ts create mode 100644 packages/eui-theme-borealis/src/variables/colors/_semantic_colors.scss create mode 100644 packages/eui-theme-borealis/src/variables/colors/_semantic_colors.ts rename packages/eui-theme-borealis/src/variables/{_colors.ts => colors/index.ts} (82%) create mode 100644 packages/eui-theme-common/src/global_styling/variables/buttons.ts create mode 100644 packages/eui-theme-common/src/global_styling/variables/components.ts create mode 100644 packages/eui-theme-common/src/global_styling/variables/forms.ts create mode 100644 packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiCodeBlock_Highlight.png create mode 100644 packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiCodeBlock_Highlight.png rename packages/eui/src/{themes/amsterdam/global_styling/mixins/__snapshots__/button.test.ts.snap => global_styling/mixins/__snapshots__/_button.test.ts.snap} (88%) rename packages/eui/src/{themes/amsterdam/global_styling/mixins/button.test.ts => global_styling/mixins/_button.test.ts} (92%) create mode 100644 packages/eui/src/global_styling/mixins/_button.ts create mode 100644 packages/eui/src/themes/amsterdam/global_styling/variables/_buttons.ts create mode 100644 packages/eui/src/themes/amsterdam/global_styling/variables/_components.ts create mode 100644 packages/eui/src/themes/amsterdam/global_styling/variables/_forms.scss create mode 100644 packages/eui/src/themes/amsterdam/global_styling/variables/_forms.ts 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 05411e17464..fbb64ce0c50 100644 --- a/packages/eui-theme-borealis/src/variables/_index.scss +++ b/packages/eui-theme-borealis/src/variables/_index.scss @@ -2,7 +2,8 @@ @import 'node_modules/@elastic/eui-theme-common/src/global_styling/variables/index'; @import 'states'; -@import 'buttons'; +@import 'borders'; +@import 'form'; @import 'page'; @import 'font_weight'; @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 0000000000000000000000000000000000000000..5b07dd693374b67a16bf5346b6852eb13efeabc8 GIT binary patch literal 6082 zcmds5cT`i`v*xM@q6ij5;R+}S(v>Q`DHwVU5&|d~S_mx!L`qN)M5>{KfJ$#cB%wF) zAyPx<5(tP8kVHZ=v`}7rhPB=wcdg&QZ@s-%awg~O%$}J&v*$Zsw5hQkI~xxh6B83V z;Qn26CMM<7U*!H1__iK3pLjw@V97u6~QIb&R8OKJzlvLvVV)F{1jaS$iB z7=;C+z8e-voFh{*=Wcg00{}NP6TL+r&!|Sxq5!Wwt}g~)Hl7|3chI??cUG3S*7h^m zUWu16({1=Ywh8c$0e}6GnV6h7S&#pb!@>nPf7||huxJUK`6Dr%eXe<#A^v^h*)4{6 zhxOPahUm?CqMadr6JU*CXl~Q`zpU6AED$WQg=scm7#=1*#KnCS2&T-ae|P!w@!6)P z3;KuZ!#`k0Zq6$4Vh5)~MDaChfcpAC9{RLpHaOA27}+<4wx!^7tX?i zg@g~CEg0PkB9Fn8Lv}GOFJr77zn`^{NX=|H&SJi7#>e<0=8lDy4+Q&~H}qVsy|J?h zfk&;>W+Q=^1567$+m{KgdVmd~`ByxsGG~7A0)+8?CL}5&1A6!F9ouOR3*RAQWmP>| z86gQ<@JZLaBPC^@ef*f;Vs@>#s;Z%IQVH;IC#lswCx?x~S6<$0h+t<+7JBiE?RA$& zYKJe7R}nTQS*v^QXb4k|x(MfO*3wTZYKCQYrI5uUJ1bEXO1qayUU&d$z?iAjt^ zCl$#BuHU_<8}Biw##p6o`i#c4U>Z!3w;7Vuv^^xJl$A{+5^q#bbWIZ(b2MY%>EeQ! z?VX*I(>ECR!uq@~0*CSe7l=C>g1(HKt3iR>rMVsclG4)dLfZV|B6$M`9CM$n zfy4}P@Vog@PUBR|(yN^0g?BG?pzR6sEj?WwBY}s6x#W}#h$-Zc8Eq+_5;g1U>h7-e z=7>v6OWRGB71ekU(2};T3XV{n2mK(7?~bocKggrO}Hnptji`lV=pUU-@QSZ z%?8EeYjaAVRt5XR39JFI40~_PP$LtKfX*Qv&KwBGX{2YC?&XG}gqA0(t$}4$qobqv zHLCRCDbtxuy65^+HAeKy?rs_Em2I`I%lbxE)54`FOJxLVuYlQ8i3%`SGZrqU24N@!e9YBT1&G|OVD|(C< zi8MN-;l}A1Q(}@PIsA>+)7880<42jkZ5ousf9_g!bv5`+_Nc~nZ5X}==8dxw2j28F zDvxC6N5gDui!u50sFnbyg=QLB;!=!fBODVsBd6_2p(qeI{shC2Zy+r=)wQe6Z!FwRLiy;0&CttFHPu_h>CXieobsFiZZv@?7`t2)Pf@A-10C`R-X){7ijmseaET>9JU3pSfu*y0pA}D10jxIyAL#pj$nSbch-r!tC_Kfp(VI z*!h(2&N({Hk9L;FNe<@uSuK9~jO*!Wz^<)xunttz&Y-7f zAIW4G8fDgAyQZa=u($rrHtnsZ(UZM3T^i3&7tTc11&7|*>$mj+pw`!Yt<25K16TS> zmc*sR#;VGl`p!ncKgO5nM8%VSki`MM{{Fzq0n@8$zIC58>-6rwbksNmm(VOOUO`lw zTbwO^|6W^7TRXGKIkzPw3%uBsBr-q$7)bXEC1h>Qt)$W@=SC^m)1}X$-ygH-v4Ihq zZ1Oy#uQU2_8>H`pW?d<%Tzz-@!o4#;%3l6u#6go{S=p!QEKg$%deS5Y-`G@Nyuww` zNV)1Tyh2(i9iMq>fc8XV7t~gN2vX4#rVcuW#>QA}Jr|d1p{|af*Il@|jY54(dyN+| z55_98kn&MkS&d?1;_lcK>*Su#guG9IS3^Rq(jDF&7Zu&zmf zvarrhh@6VjkOx-@s0WFd z}3m z?^v9m*Yz`hIzSuOr^E~GB{O{Hq}r$vWm?_l&k5_{gMs5)Vz*Y^1@&ETeQ9tEfBQZMX#EiO%zhJfJkkm17Ca%A5VozsgrYXG1`*eF}fq18BUY$(r#1ADMD+xDR) z1aW;Of*vzEsK{(~)dXsS0aat3{p$&X#VcRV1QM&BkWf^ty<}URUzgvp(uwWJEVyxF{nvLs zhd%`c&S>h5OQ^pXsV=q^wwz~7{H`}xX0YC z#GEq3h4{q$M-3BLU5cg>fxKBdWWei-U7|U1CENDP0}aM^>&a^xej|12uw`2T#$*hq z?aZ}c8x2C( zZf(E*>ndip3OX{en6?@KfBHHn23MsQ&Cu+9@3sV|x`pZ6Z7MHy$t4%Mh1@J@XgCP( zx{(4j0w+n5y&~^YSI3H>!6QB6c|h92uj`Ui8+nr5sX`$K6Z*vc)$qPCFE^j6D&_P{ z_Z68V_ngn1iZC$f`L+48e%%{x@gUc9`JZ|N+ZMe2$~HoeE#sZ~ry`5U~^=@g`AVfa0uXT%gdr*(G+{jTm%R1lOY zn~>eeag4QcD%Simw+0FuSbF`~7nZ>lQ@0)-=}%Pi~ODcU9TnwDl#cl9H0B zh>9%{LR3yox#8g8pp=oF441I|?Ac^S;iIsRRk>_=a&f199qluscKvaO^=e}Ze3GM*lHKGK zgt)rY?)Xry|H zIKUpX8jA*PxvvhqL*=7T=hYM;rSW{~@11OHcGpJSUTjh%z4-ZWcup1uIJXoSAB5to z)XbtMYoY(F&f+n%29kD|`}P%}rEn#0150%sPbM8tRhKT;MJJ5=10+20+4f`{xBU9EZM|pSG z9c&mYtgfuZV$o{lx&plcpaZ7{_|FH_s{^ghIUSCpL0-5qsO*g8L({kAz%pTzCx-Oq zD+CB>|4jXw%Qsxe&g(a$!$ErJUh02i*#nc4&cc@{)Vzj=A~rRsGq^6?jDyq4m7-Hy zgv#<>3Fec`Vu3CwPu`Fs&*nLQz)&}&#|mtjU$cytuXBJOx%QAh@??9S?sPGk#l9$l zJ?mnvfA*Id*_wVIf=V5UTz+~Iry;Xw8NgRgS&nN~R1_hnEBpN@j&Er}3AwnqP}$f= z2L+>`#~uMl!?l~y6HQIvl;n%h=|;Fa{#DE?gar9Pg^#gtlA%o3V_)-qlU4cbELwfp z->PbAqw;qiOxR?wonadx%ys@gz%lU7v()7o6T$0x@;oOeKN>Ttz2?zPl9;(prO@4s-6NhDd zZCX;2&83)*#7u@g|D;}%{*bNeV}AOQlobS$A|$Fpt5e?bFAvze+6?MxjPH>tA6>jY z`zEbjZey&>ok|!kS`q=->eHc*m9@c)kca`wH-Ufr-SHB(mGR0?fi0og^Zef`)nyuC#||s{!vEO(jJJO&lmb#(g8EF z_5lPHdlV+P>->HYg+&?hJz01k@+ufqn<`|q*K;9LmJFlMe89}i{Hl(k{30SJD3S8% zRKkxw%>n96KUy;KJJ`0 zDJikkti~)b*xjM|QPl%W8#7T3+!v%GW6i!rh-Ywb!L9l3mm9st#zt)6xVV&-T{wrD zd|h5IRrNaeRKJl=f?sXWWr-4-M<4ts&lGK=KD90^&)KV+1hcQG(b&w2s2<1 zQz*+BwQE!0C}S&ETj$qj=TqDUTY>>YdyU5sP9GAcvdMrLvmWj;4eQ5#$x~B=WxL<3 z7=462{bx5~mFpbqA--yAm~?*N)AUixZsY145EuM2jfrVf=U@4zh}mb}2n1FEwyU3E z(-}M60H7mJ?Bg!;ptK{DA=$sG`NU=2v!imRc&-z9>nT|nU}$JL9i6l(#lW3Rpf~TH zt!6ww1|y^vL!UQZsfT6%=3pjrI9rVe%@oIjryCGi#<}Vh(%-+Qq}Sh8K&l?dJ?(Xk`&&tyLZL*4@-r5xyBx{f9<+5e z(NLJmPKKpvZda$2UF790`sPXawfdREy)Ep3JJzO^VnFztD^QEJF`Q!&*4p|dfxjqy zZA)BG*1#_On0&xAO##P>mePx zj{TxDH)fW<`baa<;NR3uhU|{Q{ty$A5prreE^KTF z=&zfC`UB4s)GdA2r6lb!cV%ZX3vA!#UA!RMQixocZYGV%-(UXyrkhQF2@ZVn_Y?B!ejrj zM?IFwkaHc-Wap7H)r&6__c!vWIN07syege*U2vN zm8T06MO-}io&_o+f!YdWxGq`)d7GEoJ9;ioRg^`Z;d?R&XK-$D*?T63*8v@p!+W-In literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..2af7856b04a4b6014c90fb78771826bdc6a8bfb5 GIT binary patch literal 11981 zcmeHtXH-+~n{5;orHV+C5=DwgiS!bR3W!QmP^9-FgeE0)f*?hzfOH5V0!oKKXaWL4 z=paZ95PA=xcgURlWr2fj}40!29W|SAf6!s@xD@cfnOl&kzx)4R>wreK^5$O8Og6`h{Il|!|HC_w)o}^i z-26B^JiO2-Bn;U8(zlRf=jU%q*i%?GHCJ_XcB0|Zq?@dznW|S8aBNyOPsc&m`aV-J zECOnUcOhN<+XZH!Q4T53F!wddxcGR=hY^cCN8;i`ov%LvXME}>YFMiN{Q1}K->)`i z1=W}>Uze3N5Jof^3=64}4qr`~3B;G0DY7s*L#+Qh z9WoV&?i3Uho(lZf9_!&Ow8ciF5q(I*((Kom`AF5{Km=n@@%CEwsfu$Dj(T)- zRP1lpbvimaz82>ubkrLdEXjG2@7_JrgN^z^-LkmkWQ*!*siYMYg6J=hC~NG01o;pW zVkRNnL1sWbwx;Tw2FtWDS|`DmLa#GdNA0tZiyjq2uU%yhLb;C3MUa+E zvgNYDk@}M-JgkzAvnNBa>QCuZ0jPL-i?+xg&Y5$V=$%gf9cE#3DW3R`Em>JVD-YR) z46A=NOET@0AOr>7ZT2^QXpfef(c94XZa0yGw{b+FyQb^9JemzCwX2N49DZm@{9s{J zglwcDkxd1ZjAWbRxbqJvly(qOL0S`6;V?TG|-Xwc&?wVs&VD zp#Ug^X3whgbKT}n-30@KmJ$J8AO>`Dq3A23i1Um48`NJ*ORrZgI;y2Vcz=x^^QXpj z={_EpWf3ZZJ>FeWC!U{$g@^M<&A+H=8pdE)!C)t(*CHQqoOxH`!^e+l=-AjEW8rwu zt>7hQss6m-5=~MdaZ;eKpnMLDzev69O*`N;Ha2#5nP~7kxxv8DlX57UurHd{0}Q{f zsA{S^wQ}vy{)j1ERc&6$zA&(ebSL;P8w91u`7pvpig{&a1NBhWqU&vDkzl4@rDp!g zYPq+-BZDXgP)dqk!hS@weDk89!C0jQQ;MEmvKr6nnaZ?BOaHA*1JY3L-?XQ;9xhB# z%aqT+L*b=%t@i`>&y@NbGT)Asb6b$LJrFXbVu$J=wBC3>;Q`UmEQ&br@$p@{;%EcR zus5BrAshQunbKM#qnSOPXL{z3^IU{7aNZTIQt{h9KG3!pO4HM7P+*XvZkahlQ_~&a zoxLj3>+tw^d)R=oz`dJa@w%*>oT>u?Unx0?vVjB#2ZMIkhvMt<)U4;*=|-{Gp&rT` zr0}>1%$rr_Z&H?`pS0KZ%>tcbYwSMz@84`irHDuV{wWT&wkzwnMli^Ua3N=$v-xgm zSy>YfaY;K@EfS~|_CP3Hzjo~!s5|3C%-VHD7(JM)UNqtjtcX(n^Cq3=DUt+kwEb8oa7Xy=-}i@y zCM7Xx${#UTO?gKo6ws3 z#q3}~6P=}#XGg1R-tt?UY`sY7mY9R7oIZ*~R)o&#R|N5>CeTzC2@ z(>S#szrEre9;O?b6^K74Ya*Scbu6VuQ|>W;j1IR0ues(nfhaK7{>MT|8JvS?l-DVI zMT+Xx)GVGD_Cx7Q0e`YXk|-)car-Z35EvW z<=`~8pv?Tz($Z4G+3E&6i}LiMy6j0a<*-oB%bMi4=JBBdX|@}Wz4c`_1Pw&~_QgOq zkdbKxX_a04bS#X$xqAxNeK;8-S|7t85XTz4M4NhQSVo3XQ4E;wR$Hw&j2S+tKEd$- zZF$n`fIYIs$r~RIW|me#6>H#D5OO5z9FJAm=kn_>2bK%Csu(yo0 zrq~o2y}EnDW%IU^py5-vjs&n(*bjxrmzDkIQ0N_wVof0~rn#*Q4~<)upT=wIolSax zq@<OF3MfYMni*!JTUMcPr)gU^rXG(d zoOdizvw}!Dtal1Yy*5l&VMBX#`La8l19p}An%NTCp#p|Oe)O2?ST3`0c7dbedYtCB zLnzP*9i82rvLd%YxU8Te!>BSVYs+%?K^}iyRLJLf%P&$-4{`EsoeAO`@5#V-~Qp6Bs7}VlO7qtKbDx3go$0AJ#bU< z^n6wtrQk;qfUNf!vdy@BIauIu&Ey^2WpTqN?@x|_q#6%BUkBeVex$0c1aAkeacKD}%_6JF%jsFYFqG6BB>!f$qkm%K}5iO@VXv#vIEE~H!+2JGL?)RiRc-L1&uFP5 zJL_dZGfh=$WBrZ0u0?;-nq!-x$}~TOK7c?kkV0HYQgs8^?iy#J#>bbN@iI!TEhy z{{zql(%&fsjvC`2Vlkz&X(iIW%b$h<9XyxK2DG%_!KTt*T69K3++E%0_5(ovhyK() zh|@BiCdMxwIC&+NCocDeXb6wUuF+Cno^DHXG{>MH0(f;Dj}KFDrwHJX^BMBW(Cp4I zaLSV46OR3G=n2|LmaVbRaCEG2cGAmh8rCOdpHEHg9_%lckRd6n1}TS2*D=ypbG{DM7)iHY)wu8KnJ=#XycdX@j{ASZ`?G zP~n-p2!Ior7y6>ACb~o1*A7>AAWvnIo*Mpx6aR)~1v%KSKWjL)z6@$4PKwpKZCEaZ zN3J!HTbI3?^#01p>FKs_?;A>Oq4p4@cy{_AMa|v6;etGw*X~N*eY`98)uC4ZN;4;k zByWnLp^4Naqp{oK;tT=nh4u~Svt7?)GBT{{V{%H=zU14RC)>a@K?8$>Fu#VWq)^86 zaOg8*V-A%Vr8$LT_?1IXvg>plPpUTLq%uGMZvT^AsAHpUWyOeq7*yK1M(5eLh*t!FlWJSMjEt1dc$L9{ zqj+tB{@~dyEm7?)Y`Jk#n|iGOru3g?aC7I8@5OI_(<_ZOG2c&7%(fw0^z` zcfj_di{7WJOOZX?VH8Z3x1yNi(fGbcaf@@Hf<X+O>D<*g5MQXs@la}IXM;~_5=%@E#Gydz51)SH+l}U z`@1TC8QZ9!(c3$}w1o0%Ii@(t$HC0>#iUKVXt7?e_No2k>whok#t99q)x_J#HK0!8ODK*-YP~%RoVV*K>YyfVVg(1_O9KpEz5r4RCku zJWaCc2&=BKDj$y@`+%^ZFQxe1zxxU?Atz`{=^GH@-Uy zN$DSB03?$TaE*R-KE2+X3HMRXd;aQF5@z`E7P~<}zhda}c#*-6FP6ZZnk_|y&!eA# zeD{u)xVTQ?p*5wYpRB-$W+13w32%6F)zaE{O?-PJAdPA`|63e9obG)u6zPT?M%8?M zFM^&uWAY@nXx?96lXMFUxhHlTATqg$D7T>@Ab>lYk4i2~Pn!zu%zw|dT&*AcDCZye z1;9k7$E=>Tr|*j=YvU6#lt*V?#PwxjvfW`a=Y3!IyX4Q4{e1R6`(~uYQ~nCxdDdM+ zJlFD5I6B?YCrB=pVZxyA0;}oEWREu4P91CMcx{-z-fjLE5!C|3z|#5QjUI!)J%i`o z#^P}JuP=|d5x|i0Eb=sfRmppk2@rGGvJA{yF0Ut9WApvl@7A`hP)z18n|{;u^bDXn zw$%Jq0^X_eq=-L>C#2ZnZz%nq1`uA!Irw~~>p~T0y|*EbJ}mX?qM-it^zuWqM;D6p z#qrm;&}j7ORv*H8@OaO+(VUykY)0t=Lkz#Wn~UY?w`bkya&?x^3iyE%RrATMp?eEZ zU%DoZv1h=w^r|hdnFtUg0TeezS6%e2h!Aitd%B#>P5b;iWv@_g1z|K6c*s82T2M}l zzP)WTJGU}cw|;c1wl~#S6BR^OB52&LqMB6h)Mp$>%W>(8Re{dW&F!xBsml1EM+!rF z8JwI?NJ67+ZRU|gz#?U{s$a%o`LK1N8bEh~m4gA0saN-Ttuy%B&S~l~zmSlSrzg5W z2*af>;04G5zs);x+}DQP;RmQ<@kE)yfdL@5e#j0Y!^^n!4^}IEdn7e-Mv+1Nya|ou z8wKd%Q;R>NK}C)iNGvhz&OOpc|BpSh9XodI(MvidZNYqVrAtaH6Q!LIHr zRYTuWS8H5{0xtYi&ThR)Cmv(>c15#8?MS3pCyQ}f3x1)IxX6_WuGLjZAZc-8>J(^k z=S?-n9S^RT&QU&-^>XZ<`-~9Bm02y@#z4-)u3;q_WJh7keG)NGWu#XAo;w;*6RF41 z)%u(#?85GW3)gmyKevfO#kN>ip!WUAyaa7g35C(1{T}f}lK6QG8Nz9pM?pa;?J5zQ zY{45Aqj?)rvVB|swW}nTq3GX>6Mx5Q{*JWN>G+Q@PMhn(8 z14}Z0s;sQc_A#1AP<&`S2N?QQ{f`4=T^s3ra>JWAOft#0g_~rNzrWq*&Fdif z%b5y3SidXH9UKZy*UPpj2|upv^oucUH=Et2KXiBI(l?0#sLXZ7TRPSxUZN=vt!h4Fgm`A023{nM!+)Y7$OsDm^6CF); zOXP!XW7_+=I-lSZ-rpFM_rmjNCFS^p*!Kl#tbQj4HmB?!{Y5@iB4@;-gT{DdVs9jl zh}@9#`D{zv#eri#fBtQxo%_J_3$1C!8XqU8dQeuNLt{fdzk{Z%2Tj1R_@R`fcom%1 zytHVserw`17e#^H)|9u}^T1u0o}d3P*7P1=&0p`{9jmpyTOwrmls~2%he}Up1IRHT zOp7?qUSe#J$&8G|@vNM=Y;j80NL%ewN_&2)Vie+n^0NY)KH9FeV^r5X25hs|7S)Z| zQLlAd(;p!A_ca;Tx_zX_M8_hLApoIz?jqvUYx3~XBY7_`ula?ASl@G58~PiE)A2F3 z!-a6CqEUKYsp~giS^EGgZRg5aS|;r}#=K*$vhg$+AT??{2LDjf4lZDwY(|8pe3u+# z+yqX#aQTFWxgFr%ynIR5lPca)9Vo2SDP(=vLg^-8fFQ{J-9^O z?E@R9t*^lrTb5vLaq{j(##eaXs7XK*AZZW)yO!OVa3x_Ipu_>=+nI{1A~DRg9TST! zAA*@k0ulS@(W5(*=f`i-Gtz5LrfdNf1MiZon&s5kkaOGyl-R|<%K)pL@WJ^_i2BLU zMAMK~&w~kaXZOWbl0Jj*-!)5twgU9A^{)?sd#0OZQGQ@47Z;013KTQPGQl z_jp?4{Js&Q-wh=|S{L&X@uVM(@n)LCU|saCOCr{WAbF8{4QHi(h+m*e`)2+9bGx0;kaT5fr7V;~rYihTr$r>>|J(c4a z*S9*ArpK#jS8jw>u|5G^OW)+O6N$h`NRBiobtREKSlYrc3wMICT~%nP+v;xFeU)J9C{Jo>o=6+#OC*I(#7UBl{QK6t;n7P(p-1B7x`_6 z3A8+z$LsJ@Us9JkSh+D++n~t##gl*K=t2L%(Lwv?hZZ>)Z}W`_m`34q63y?L(;@sP znh$b5?9X~0GgPRzWq{ewU#J4cOZ#w}(oWJoN2r4E0$x*XT<umN892_~~_1kd5Ka5xFr%LjG>`W8F9{!-+24qz0#v>`2M9CC4 z#^e?dqyV0s|KW-BH>VL28cH+TSTH~I_@T#C4rVJf32lF&9d`j+@$^>}`)*tULJarSZ z=}YIU^gC>)D>SN41+d*FAg)9*i-%v3pYo)=^&u?{yFk$F;jjnL%D@Y%G-SF_`nv`; z<2rYI_Y2%3fwO6g8@)W`7E2r(KP?O^qep75JVHr$*c*)8ekv*PhQ~WWQh1%BZx{*s zmiNYqdS?5Zu|JywpgEc#wybjeP^kPymnRlL6NLicp95VT($dhK;W|S3D%NRivxU}P zw<;Qt0nIEd6#IWdA!5)QqG&^}dlYKq* z6_Kv$O&_tm$hsU)7^>#@VL-pXZw(UR*Yg*gbNS-#?EHQ2DAnlvZQXz3!MApfZ7gq^ zz)(RoYJlL&j{>K(5H>QE-7LAxLKUwm_$FHj3j?B`*~mWoPxMus++Es)CW263K-**OeFag)s3`k>R(6?_~qQ7iRgImCn>pKV2Dj*OIjN}FA ztlZxeI61FwwwDkEWSORhR+xwipnq)+9kG23H{Ur1SHo8S#x?9O&IY7sCYfxMk)T@~ zAe0A(D3^0P^U~4%SwLq(-^kY0T6KjpeJ|-=<`5cMMeH$S>thab-^N0eBYao-e{T1$ z;_8nJB*dPOg;KRymUEx)+J4Rc3UEyZhBAjPMv(8BBe06c`-GTyl<3jXk^NL@L$f~- z>Xk3t3Ax8AHaIvS?P;n2I=e!3Z)ksgPIL3uF3SftSzYT!K(v|=@s$E?ZEfX@7hjtH z_RZA_*51b}E?#5}c?jUBD*(+Qrx7?et9Lz^ic7d&{1jlUOGrNu6^m@?6AZ%bJ9)0% zgqL7pQyz+kHCg&QP-*Qy$jZuYg0+8AG&Lp(EsUrpJ+DOk3kU6lDpe-;?5kzSQwKm2 z1#NH}lR4v*l$3f~JtN&U2*%LBAef&#>=*&Sje~qm9sshQZ}mcfa#7*zfg!Y+&6~ zF*w2vV0{)vYUSz$9)+)8qn$bTxe$m0vg3VxluyLsx7-|hzxjJdN0)ck|FA1GZi9V% z1kd!L&csiN0+dHN&(9QOK0WrSDo>IU%$r?^*kJt|XN;@_YuX9I-XQt_3E;lH6RtrH z;qTzzG2+VM6Io5q8wRE8il^;sBIL5ZbAjKH;Y=b*5_hWizd_l4<0OX0tDY?I~j^)b&1pq6q~axmnK3i_mXkYBrp?$dw$9^k`=ka?1%u?N)><_&e?^Xwtg6 zz^wtb*|+Re6n@FkN@W@yhi)J{-r3BK87R=qlqu*N9!^v^KkBpBZ$uK_6moG2q=%I{ zfAM4~-HPWCcHOr(gl%4rsr{Uo3h>r)TAq9N?g@CD5RY3_A!Qb8I%ua!eUY-R!LA4u z4n!oYQ%#N{FjS_$K{51xJvmT#r9C9x z1BLFok5hpe>IKcTD!po zyr-k~q~L7hgD-yZG?k$JeYo4kK+U7RvDzpmfUSuyOS8tMrLj6XIu4CvEXxIV?#<>u zIIaY$`&uTD$;7{fhM>)Rx{E8^@+V6qHllg_J-?6-`q`nif&fk#c2m2w=rXamcpW(y z&oU*Le`YCcz?v-c<+1^I^`nzd-Z9?`ASr&kCcOUQL&!i`jT~5g<2OpOYB4)gd(>Gh zYQ8X>slaK@9J7opmKFJ%{j$XW_6Tp^utR%SRexd1)HqNIcbVba$(1)59?b`{X`IKY zx>(EiImu8e2dLBCd^F21ZlL&vbd3h_{SFHX^qzoxndkds4ZN5tP%MD@mRkY%rY?tGQftOPeK7e`>E?e>xAGxWrPLjEyACnY z0@!tQQE+y}&|?v+PNT!4$$+AwER`D}VWGUHp3KI8 zdY>Rt*R80Am7Z74wE6ctw~dJ!eT=lr{JlJlOzSYh_3?_WT5BQ=JM{C|aGs{q@c}{Q z)hn^4JE6}nWBGl3e*)lPF~tUHPMErlw!g;3HGdtj+Eh4`^za#i!o^0`km1!+68d&y<{1Ta(8A+$a*#{8>*4ZT z-}B16ygahj0`Aijg{}+9GFCT`NDgX!8^1Jh7!LsUZBC-u3-!ywzxXN8RS}u5A9X=4E`roLCW_@%RTh8|3Yh$DDX9;@BL`T+nk7vTUBD}%qy*wrUkNmI zB%O+V@#Cx2BA1#52T_0bM~r=f(kYbWrv1 zV1%3+1mm;JVtvo>_kZg9Y@dRWm%eYS>_mA&?lmYD(z^;~GY*e?|9MQMapH4nj%U#;+p9ZOl%6w7(%%UsN zuPyL$NumI^b=iEGWe0SAQ6KQxEaj$!B&;F`yS9fXG5yYDKx+LVst%bEeR7G#bttq>3pSvm?CE())TVc_4RE;iSO+T7#D4k&`ZZDWAJEES{BLSKh?Jly z?u|bG2owV?EiGng7pZ^hrpMIJq|tIK{o36il&%o;r`1fY3f1%;NQi~fcu zy7FoVCSQD*2iGroP5QC?Khiy*)4%;67Rmo^QT^ZF f|0@`2CXyF1q}M`)3^D;rI_R0QhEnlk)4+cN!5pD4 literal 0 HcmV?d00001 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 0d72a59bb4d..71173c0199d 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,13 @@ import { css } from '@emotion/react'; import { EuiBetaBadge, EuiSpacer, EuiTitle } from '../../../../src/components'; -const colors = ['hollow', 'accent', 'subdued', 'warning'] as const; +const colors = [ + 'hollow', + 'accent', + 'accentSecondary', + 'subdued', + 'warning', +] 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 ce00526e2f1..fd18535655e 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 c50cd2d1393..270a131ec10 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 77e3e5d4363..75dd6550018 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,13 @@ import { EuiIcon, IconType } from '../../icon'; import { euiBetaBadgeStyles } from './beta_badge.styles'; -export const COLORS = ['accent', 'subdued', 'hollow', 'warning'] as const; +export const COLORS = [ + 'accent', + 'accentSecondary', + 'subdued', + 'hollow', + 'warning', +] 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 00310879bec..91ec7ae1268 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`] = ` +// 1. Apply margin to all but last item in the flex. +// 2. Margin gets flipped because of the row-reverse. +@mixin euiButtonContent($isReverse: false) { + height: 100%; + width: 100%; + vertical-align: middle; + + .euiButtonContent__icon, + .euiButtonContent__spinner { + flex-shrink: 0; // Ensures the icons/spinner don't scale down below their intended size + } + + @if ($isReverse) { + flex-direction: row-reverse; + + > * + * { + margin-inline-start: 0; // 1, 2 + margin-inline-end: $euiSizeS; // 1, 2 + } + } @else { + display: flex; + justify-content: center; + align-items: center; + + > * + * { + margin-inline-start: $euiSizeS; // 1 + } + } +} + +@mixin euiButtonContentDisabled { + pointer-events: auto; + cursor: not-allowed; + + &:hover, + &:focus, + &:focus-within { + text-decoration: none; + } + + .euiButtonContent__spinner { + border-color: euiLoadingSpinnerBorderColors(currentColor); + } +} + +/* + * Creates the Amsterdam style of button with a transparent background + */ +@mixin euiButtonDefaultStyle($color: 'primary', $includeStates: true, $transparency: $euiButtonDefaultTransparency) { + $backgroundColor: $color; + + @if (map-has-key($euiButtonTypes, $color)) { + $backgroundColor: map-get($euiButtonTypes, $color); + } + + $percentConversion: $transparency * 100%; + // This variable simulates the possibly darkest background the button could be on + // Simulates the 20% opaque color on top of the page background color + $backgroundColorSimulated: mix($euiPageBackgroundColor, $backgroundColor, $percentConversion); + // Then we can calculate the darkest text color needed + color: makeHighContrastColor($backgroundColor, $backgroundColorSimulated); + // But still use transparency + background-color: transparentize($backgroundColor, $transparency); + + @if ($includeStates) { + &:not([class*='isDisabled']) { + &:hover, + &:focus { + // Duplicated from inert state simply to override default theme + background-color: transparentize($backgroundColor, $transparency); + } + } + } +} + +/* + * Creates the Amsterdam style of fill button + */ +@mixin euiButtonFillStyle($color: 'primary') { + $backgroundColor: $color; + + @if (map-has-key($euiButtonTypes, $color)) { + $backgroundColor: map-get($euiButtonTypes, $color); + } + + background-color: $backgroundColor; + color: chooseLightOrDarkText($backgroundColor); +} + +// Keyframe animation declarations can be found in +// utility/animations.scss diff --git a/packages/eui-theme-common/src/global_styling/mixins/_form.scss b/packages/eui-theme-common/src/global_styling/mixins/_form.scss new file mode 100644 index 00000000000..326a8491f87 --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/mixins/_form.scss @@ -0,0 +1,273 @@ +@mixin euiFormControlLayoutPadding($numOfIcons, $side: 'right', $compressed: false) { + $iconSize: $euiSize; + $iconPadding: $euiFormControlPadding; + $marginBetweenIcons: $euiFormControlPadding / 2; + + @if ($compressed) { + $iconPadding: $euiFormControlCompressedPadding; + } + + @if variable-exists(numOfIcons) == false { + @error '$numOfIcons:integer (1-3) must be provided to @mixin euiFormControlLayoutPadding().'; + } @else if $numOfIcons == 1 { + padding-#{$side}: $iconPadding + $iconSize + $iconPadding; + } @else if $numOfIcons == 2 { + padding-#{$side}: $iconPadding + $iconSize + $marginBetweenIcons + $iconSize + $iconPadding; + } @else if $numOfIcons == 3 { + padding-#{$side}: $iconPadding + $iconSize + $marginBetweenIcons + $iconSize + $marginBetweenIcons + $iconSize + $iconPadding; + } +} + +@mixin euiPlaceholderPerBrowser { + // stylelint-disable selector-no-vendor-prefix + // Each prefix must be its own content block + &::-webkit-input-placeholder { @content; opacity: 1; } + &::-moz-placeholder { @content; opacity: 1; } + &:-ms-input-placeholder { @content; opacity: 1; } + &:-moz-placeholder { @content; opacity: 1; } + &::placeholder { @content; opacity: 1; } +} + +@function euiFormControlGradient($color: $euiColorPrimary) { + @return linear-gradient(to top, + $color, + $color 2px, + transparent 2px, + transparent 100% + ); +} + +@mixin euiFormControlText { + @include euiFont; + font-size: $euiFontSizeS; + color: $euiTextColor; + + @include euiPlaceholderPerBrowser { + color: $euiFormControlPlaceholderText; + } +} + +@mixin euiFormControlSize( + $height: $euiFormControlHeight, + $includeAlternates: false +) { + // Default + max-width: $euiFormMaxWidth; + width: 100%; + height: $height; + + @if ($includeAlternates) { + &--fullWidth { + max-width: 100%; + } + + &--compressed { + height: $euiFormControlCompressedHeight; + } + + &--inGroup { + height: 100%; + } + } +} + +@mixin euiFormControlWithIcon($isIconOptional: false, $side: 'left', $compressed: false) { + @if ($isIconOptional) { + @at-root { + #{&}--withIcon { + @include euiFormControlLayoutPadding(1, $side, $compressed); + } + } + } @else { + @include euiFormControlLayoutPadding(1, $side, $compressed); + } +} + +@mixin euiFormControlIsLoading($isNextToIcon: false) { + @at-root { + #{&}-isLoading { + @if ($isNextToIcon) { + @include euiFormControlLayoutPadding(2); + } @else { + @include euiFormControlLayoutPadding(1); + } + } + + #{&}-isLoading#{&}--compressed { + @if ($isNextToIcon) { + @include euiFormControlLayoutPadding(2, $compressed: true); + } @else { + @include euiFormControlLayoutPadding(1, $compressed: true); + } + } + } +} + +// 1. Must supply both values to background-size or some browsers apply the single value to both directions + +@mixin euiFormControlDefaultShadow($borderOnly: false) { + background-color: $euiFormBackgroundColor; + background-repeat: no-repeat; + background-size: 0% 100%; // 1 + + @if ($borderOnly) { + box-shadow: inset 0 0 0 1px $euiFormBorderColor; + } @else { + box-shadow: + #{$euiFormControlBoxShadow}, + inset 0 0 0 1px $euiFormBorderColor; + } + + transition: + box-shadow $euiAnimSpeedFast ease-in, + background-image $euiAnimSpeedFast ease-in, + background-size $euiAnimSpeedFast ease-in, + background-color $euiAnimSpeedFast ease-in; + + // Fixes bug in Firefox where adding a transition to the background-color + // caused a flash of differently styled dropdown. + @supports (-moz-appearance: none) { + // List *must* be in the same order as the above. + transition-property: box-shadow, background-image, background-size; + } +} + +@mixin euiFormControlFocusStyle($borderOnly: false) { + background-color: tintOrShade($euiColorEmptyShade, 0%, 40%); + background-image: euiFormControlGradient(); + background-size: 100% 100%; // 1 + outline: none; // Blanket remove all outlines relying on our own bottom border + + @if ($borderOnly) { + box-shadow: inset 0 0 0 1px $euiFormBorderColor; + } @else { + box-shadow: inset 0 0 0 1px $euiFormBorderColor; + } +} + +@mixin euiFormControlInvalidStyle { + background-image: euiFormControlGradient($euiColorDanger); + background-size: 100%; +} + +@mixin euiFormControlDisabledTextStyle { + color: $euiFormControlDisabledColor; + -webkit-text-fill-color: $euiFormControlDisabledColor; // Required for Safari +} + +@mixin euiFormControlDisabledStyle { + @include euiFormControlDisabledTextStyle; + cursor: not-allowed; + background: $euiFormBackgroundDisabledColor; + box-shadow: inset 0 0 0 1px $euiFormBorderDisabledColor; + + @include euiPlaceholderPerBrowser { + color: $euiFormControlDisabledColor; + } +} + +@mixin euiFormControlReadOnlyStyle { + cursor: default; + color: $euiTextColor; + -webkit-text-fill-color: $euiTextColor; // Required for Safari + // Use transparency since there is no border and in case form is on a non-white background + background: $euiFormBackgroundReadOnlyColor; + border-color: transparent; + box-shadow: inset 0 0 0 1px $euiFormBorderDisabledColor; +} + +// 2. Override invalid state with focus state. + +@mixin euiFormControlStyle($borderOnly: false, $includeStates: true, $includeSizes: true) { + @include euiFormControlSize($includeAlternates: $includeSizes); + @include euiFormControlDefaultShadow; + @include euiFormControlText; + + border: none; + border-radius: $euiFormControlBorderRadius; + padding: $euiFormControlPadding; + + @if ($includeStates) { + &:invalid { // 2 + @include euiFormControlInvalidStyle; + } + + &:focus { // 2 + @include euiFormControlFocusStyle; + } + + &:disabled { + @include euiFormControlDisabledStyle; + } + + &[readOnly] { + @include euiFormControlReadOnlyStyle; + } + + // Needs to be set for autofill + &:-webkit-autofill { + -webkit-text-fill-color: lightOrDarkTheme($euiColorDarkestShade, $euiColorLightShade); + + ~ .euiFormControlLayoutIcons { + color: lightOrDarkTheme($euiColorDarkestShade, $euiColorLightShade); + } + } + } + + @if ($includeSizes) { + &--compressed { + @include euiFormControlStyleCompressed($borderOnly, $includeStates); + } + + &--inGroup { + // stylelint-disable-next-line declaration-no-important + box-shadow: none !important; + border-radius: 0; + } + } +} + +@mixin euiFormControlStyleCompressed($borderOnly: false, $includeStates: true) { + @include euiFormControlDefaultShadow($borderOnly: true); + padding: $euiFormControlCompressedPadding; + border-radius: $euiFormControlCompressedBorderRadius; + + @if ($includeStates) { + &:invalid { // 2 + @include euiFormControlInvalidStyle; + } + + &:focus { // 2 + @include euiFormControlFocusStyle($borderOnly: true); + } + + &:disabled { + @include euiFormControlDisabledStyle; + } + + &[readOnly] { + @include euiFormControlReadOnlyStyle; + } + } +} + +@mixin euiHiddenSelectableInput { + position: absolute; + // stylelint-disable-next-line declaration-no-important + opacity: 0 !important; // Make sure it's still hidden when :disabled + width: 100%; + height: 100%; + cursor: pointer; +} + +// Adjusts form controls border radius +@mixin euiFormControlSideBorderRadius($borderRadius, $side, $internal: false) { + @if $internal == true { + $borderRadius: $borderRadius - 1; + } + @if $side == 'left' { + border-radius: $borderRadius 0 0 $borderRadius; + } @else if $side == 'right' { + border-radius: 0 $borderRadius $borderRadius 0; + } +} diff --git a/packages/eui-theme-common/src/global_styling/mixins/_helpers.scss b/packages/eui-theme-common/src/global_styling/mixins/_helpers.scss new file mode 100644 index 00000000000..7de426d4a59 --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/mixins/_helpers.scss @@ -0,0 +1,117 @@ +// Helper mixins + +// Set scroll bar appearance on Chrome (and firefox). +@mixin euiScrollBar($thumbColor: $euiColorDarkShade, $trackBackgroundColor: transparent, $size: 'thin') { + // Firefox's scrollbar coloring cascades, but the sizing does not, + // so it's being added to this mixin for allowing support wherever custom scrollbars are + scrollbar-color: transparentize($thumbColor, .5) $trackBackgroundColor; // Firefox support + + @if ($size == 'thin') { + scrollbar-width: thin; + } + + // stylelint-disable selector-no-vendor-prefix + &::-webkit-scrollbar { + width: $euiScrollBar; + height: $euiScrollBar; + } + + &::-webkit-scrollbar-thumb { + background-color: transparentize($thumbColor, .5); + background-clip: content-box; + border-radius: $euiScrollBar; + + @if ($size == 'thin') { + border: $euiScrollBarCornerThin solid $trackBackgroundColor; + } @else { + border: $euiScrollBarCorner solid $trackBackgroundColor; + } + } + + &::-webkit-scrollbar-corner, + &::-webkit-scrollbar-track { + background-color: $trackBackgroundColor; + } +} + +/** + * 1. Focus rings shouldn't be visible on scrollable regions, but a11y requires them to be focusable. + * Browser's supporting `:focus-visible` will still show outline on keyboard focus only. + * Others like Safari, won't show anything at all. + * 2. Force the `:focus-visible` when the `tabindex=0` (is tabbable) + */ + +// Just overflow and scrollbars +@mixin euiYScroll { + @include euiScrollBar; + height: 100%; + overflow-y: auto; + overflow-x: hidden; + + &:focus { + outline: none; /* 1 */ + } + + &[tabindex='0']:focus:focus-visible { + outline-style: auto; /* 2 */ + } +} + +@mixin euiXScroll { + @include euiScrollBar; + overflow-x: auto; + + &:focus { + outline: none; /* 1 */ + } + + &[tabindex='0']:focus:focus-visible { + outline-style: auto; /* 2 */ + } +} + +// The full overflow with shadow +@mixin euiYScrollWithShadows { + @include euiYScroll; + @include euiOverflowShadow('y'); +} + +@mixin euiXScrollWithShadows { + @include euiXScroll; + @include euiOverflowShadow('x'); +} + +// Hiding elements offscreen to only be read by screen reader +// See https://github.com/elastic/eui/pull/5130 and https://github.com/elastic/eui/pull/5152 for more info +@mixin euiScreenReaderOnly { + // Take the element out of the layout + position: absolute; + // Keep it vertically inline + top: auto; + // Chrome requires a left value, and Selenium (used by Kibana's FTR) requires an off-screen position for its .getVisibleText() to not register SR-only text + left: -10000px; + // The element must have a size (for some screen readers) + width: 1px; + height: 1px; + // But reduce the visible size to nothing + clip: rect(0 0 0 0); + clip-path: inset(50%); + // And ensure no overflows occur + overflow: hidden; + // Chrome requires the negative margin to not cause overflows of parent containers + margin: -1px; +} + +// Doesn't have reduced motion turned on +@mixin euiCanAnimate { + @media screen and (prefers-reduced-motion: no-preference) { + @content; + } +} + +// Does have reduced motion turned on +@mixin euiCantAnimate { + @media screen and (prefers-reduced-motion: reduce) { + @content; + } +} diff --git a/packages/eui-theme-common/src/global_styling/mixins/_index.scss b/packages/eui-theme-common/src/global_styling/mixins/_index.scss new file mode 100644 index 00000000000..7d0cba8a92e --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/mixins/_index.scss @@ -0,0 +1,14 @@ +@import 'responsive'; +@import 'shadow'; +@import 'size'; +@import 'typography'; +@import 'helpers'; +@import 'states'; + +@import 'button'; +@import 'form'; +@import 'loading'; +@import 'link'; +@import 'panel'; +@import 'range'; +@import 'tool_tip'; diff --git a/packages/eui-theme-common/src/global_styling/mixins/_link.scss b/packages/eui-theme-common/src/global_styling/mixins/_link.scss new file mode 100644 index 00000000000..98dac59b9cc --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/mixins/_link.scss @@ -0,0 +1,11 @@ +@mixin euiLink { + text-align: left; + + &:hover { + text-decoration: underline; + } + + &:focus { + text-decoration: underline; + } +} diff --git a/packages/eui-theme-common/src/global_styling/mixins/_loading.scss b/packages/eui-theme-common/src/global_styling/mixins/_loading.scss new file mode 100644 index 00000000000..0f72a8433f7 --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/mixins/_loading.scss @@ -0,0 +1,6 @@ +@function euiLoadingSpinnerBorderColors( + $main: $euiColorLightShade, + $highlight: $euiColorPrimary +) { + @return $highlight $main $main $main; +} diff --git a/packages/eui-theme-common/src/global_styling/mixins/_panel.scss b/packages/eui-theme-common/src/global_styling/mixins/_panel.scss new file mode 100644 index 00000000000..4eb0a5fb55a --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/mixins/_panel.scss @@ -0,0 +1,55 @@ +@mixin euiPanel($selector) { + @if variable-exists(selector) == false { + @error 'A $selector must be provided to @mixin euiPanel().'; + } @else { + #{$selector} { + flex-grow: 1; + + &#{$selector}--flexGrowZero { + flex-grow: 0; + } + + &#{$selector}--hasShadow { + @include euiBottomShadowMedium; + } + + &#{$selector}--hasBorder { + border: $euiBorderThin; + box-shadow: none; + } + + &#{$selector}--isClickable { + // transition the shadow + transition: all $euiAnimSpeedFast $euiAnimSlightResistance; + + &:enabled { // This is a good selector for buttons since it doesn't exist on divs + // in case of button wrapper which inherently is inline-block and no width + display: block; + width: 100%; + text-align: left; + } + + &:hover, + &:focus { + @include euiBottomShadow; + transform: translateY(-2px); + cursor: pointer; + } + } + + // Border Radii + @each $modifier, $amount in $euiPanelBorderRadiusModifiers { + &#{$selector}--#{$modifier} { + border-radius: $amount; + } + } + + // Background colors + @each $modifier, $amount in $euiPanelBackgroundColorModifiers { + &#{$selector}--#{$modifier} { + background-color: $amount; + } + } + } + } +} diff --git a/packages/eui-theme-common/src/global_styling/mixins/_range.scss b/packages/eui-theme-common/src/global_styling/mixins/_range.scss new file mode 100644 index 00000000000..ec47e39e2d6 --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/mixins/_range.scss @@ -0,0 +1,62 @@ +/* +The CSS in JS version of this file lives in: + - src/components/form/range/range.styles.ts + +The following files still use the Sass version: + - src/themes/amsterdam/overrides/_color_stops.scss + - src/themes/amsterdam/overrides/_hue.scss +*/ + +@mixin euiRangeTrackSize($compressed: false) { + height: $euiRangeTrackHeight; + width: $euiRangeTrackWidth; + + @if ($compressed) { + height: $euiRangeTrackCompressedHeight; + } +} + +@mixin euiRangeTrackPerBrowser { + &::-webkit-slider-runnable-track { @content; } + &::-moz-range-track { @content; } + &::-ms-fill-lower { @content; } + &::-ms-fill-upper { @content; } +} + +@mixin euiRangeThumbBorder { + border: 2px solid $euiRangeThumbBorderColor; +} + +@mixin euiRangeThumbBoxShadow { + box-shadow: + 0 0 0 1px $euiRangeThumbBorderColor, + 0 2px 2px -1px rgba($euiShadowColor, .2), + 0 1px 5px -2px rgba($euiShadowColor, .2); +} + +@mixin euiRangeThumbFocusBoxShadow { + box-shadow: 0 0 0 2px $euiFocusRingColor; +} + +@mixin euiRangeThumbStyle { + @include euiRangeThumbBoxShadow; + @include euiRangeThumbBorder; + cursor: pointer; + background-color: $euiRangeThumbBackgroundColor; + padding: 0; + height: $euiRangeThumbHeight; + width: $euiRangeThumbWidth; + box-sizing: border-box; // required for firefox or the border makes the width and height to increase +} + +@mixin euiRangeThumbPerBrowser { + &::-webkit-slider-thumb { @content; } + &::-moz-range-thumb { @content; } + &::-ms-thumb { @content; } +} + +@mixin euiRangeThumbFocus { + @include euiRangeThumbBorder; + @include euiRangeThumbFocusBoxShadow; + background-color: $euiColorPrimary; +} diff --git a/packages/eui-theme-common/src/global_styling/mixins/_responsive.scss b/packages/eui-theme-common/src/global_styling/mixins/_responsive.scss new file mode 100644 index 00000000000..0fa3a9b08a8 --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/mixins/_responsive.scss @@ -0,0 +1,44 @@ +// A sem-complicated mixin for breakpoints, that takes any number of +// named breakpoints that exists in $euiBreakpoints. + +@mixin euiBreakpoint($sizes...) { + // Loop through each size parameter + @each $size in $sizes { + // Store the location of the size in the list to check against + $index: index($euiBreakpointKeys, $size); + + // Check to make sure it exists in the allowed breakpoint names + @if ( $index ) { + + // Set the min size to the value of the size + $minSize: map-get($euiBreakpoints, $size); + + // If it is the last item, don't give it a max-width + @if ( $index == length($euiBreakpointKeys) ) { + @media only screen and (min-width: $minSize) { + @content; + } + // If it's not the last item, add a max-width + } @else { + + // Set the max size to the value of the next size (-1px as to not overlap) + $maxSize: map-get($euiBreakpoints, nth($euiBreakpointKeys, $index + 1)) - 1px; + + // If it's the the first item, don't set a min-width + @if ( $index == 1 ) { + @media only screen and (max-width: $maxSize) { + @content; + } + // Otherwise it should have a min and max width + } @else { + @media only screen and (min-width: $minSize) and (max-width: $maxSize) { + @content; + } + } + } + // If it's not a known breakpoint, throw a warning + } @else { + @warn "euiBreakpoint(): '#{$size}' is not a valid size in $euiBreakpoints. Accepted values are '#{$euiBreakpointKeys}'"; + } + } +} diff --git a/packages/eui-theme-common/src/global_styling/mixins/_shadow.scss b/packages/eui-theme-common/src/global_styling/mixins/_shadow.scss new file mode 100644 index 00000000000..431b7db3b81 --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/mixins/_shadow.scss @@ -0,0 +1,100 @@ +@function shadowOpacity($opacity) { + @if (lightness($euiTextColor) < 50) { + @return $opacity * 1; + } @else { + @return $opacity * 2.5; + } +} + +@mixin euiSlightShadow($color: $euiShadowColor) { + box-shadow: + 0 .8px .8px rgba($color, shadowOpacity(.04)), + 0 2.3px 2px rgba($color, shadowOpacity(.03)); +} + +@mixin euiBottomShadowSmall($color: $euiShadowColor) { + box-shadow: + 0 .7px 1.4px rgba($color, shadowOpacity(.07)), + 0 1.9px 4px rgba($color, shadowOpacity(.05)), + 0 4.5px 10px rgba($color, shadowOpacity(.05)); +} + +@mixin euiBottomShadowMedium($color: $euiShadowColor) { + box-shadow: + 0 .9px 4px -1px rgba($color, shadowOpacity(.08)), + 0 2.6px 8px -1px rgba($color, shadowOpacity(.06)), + 0 5.7px 12px -1px rgba($color, shadowOpacity(.05)), + 0 15px 15px -1px rgba($color, shadowOpacity(.04)); +} + +// Similar to shadow medium but without the bottom depth. Useful for popovers +// that drop UP rather than DOWN. +@mixin euiBottomShadowFlat($color: $euiShadowColor) { + box-shadow: + 0 0 .8px rgba($color, shadowOpacity(.06)), + 0 0 2px rgba($color, shadowOpacity(.04)), + 0 0 5px rgba($color, shadowOpacity(.04)), + 0 0 17px rgba($color, shadowOpacity(.03)); +} + +@mixin euiBottomShadow($color: $euiShadowColor) { + box-shadow: + 0 1px 5px rgba($color, shadowOpacity(.1)), + 0 3.6px 13px rgba($color, shadowOpacity(.07)), + 0 8.4px 23px rgba($color, shadowOpacity(.06)), + 0 23px 35px rgba($color, shadowOpacity(.05)); +} + +@mixin euiBottomShadowLarge( + $color: $euiShadowColor, + $opacity: 0, + $reverse: false +) { + @if ($reverse) { + box-shadow: + 0 -2.7px 9px rgba($color, shadowOpacity(.13)), + 0 -9.4px 24px rgba($color, shadowOpacity(.09)), + 0 -21.8px 43px rgba($color, shadowOpacity(.08)); + } @else { + box-shadow: + 0 2.7px 9px rgba($color, shadowOpacity(.13)), + 0 9.4px 24px rgba($color, shadowOpacity(.09)), + 0 21.8px 43px rgba($color, shadowOpacity(.08)); + } +} + +// stylelint-disable color-named +@mixin euiOverflowShadow($direction: 'y', $side: 'both') { + $hideHeight: $euiScrollBarCornerThin * 1.25; + $gradient: null; + $gradientStart: + transparentize(red, .9) 0%, + transparentize(red, 0) $hideHeight; + $gradientEnd: + transparentize(red, 0) calc(100% - #{$hideHeight}), + transparentize(red, .9) 100%; + @if ($side == 'both' or $side == 'start' or $side == 'end') { + @if ($side == 'both') { + $gradient: $gradientStart, $gradientEnd; + } @else if ($side == 'start') { + $gradient: $gradientStart; + } @else { + $gradient: $gradientEnd; + } + } @else { + @warn "euiOverflowShadow() expects side to be 'both', 'start' or 'end' but got '#{$side}'"; + } + + @if ($direction == 'y') { + mask-image: linear-gradient(to bottom, #{$gradient}); + } @else if ($direction == 'x') { + mask-image: linear-gradient(to right, #{$gradient}); + } @else { + @warn "euiOverflowShadow() expects direction to be 'y' or 'x' but got '#{$direction}'"; + } + + // Chrome+Edge has a very bizarre edge case bug where `mask-image` stops working + // This workaround forces a stacking context on the scrolling container, which + // hopefully addresses the bug. @see https://github.com/elastic/eui/pull/7855 + transform: translateZ(0); +} diff --git a/packages/eui-theme-common/src/global_styling/mixins/_size.scss b/packages/eui-theme-common/src/global_styling/mixins/_size.scss new file mode 100644 index 00000000000..809dc870bf8 --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/mixins/_size.scss @@ -0,0 +1,4 @@ +@mixin size($size) { + width: $size; + height: $size; +} diff --git a/packages/eui-theme-common/src/global_styling/mixins/_states.scss b/packages/eui-theme-common/src/global_styling/mixins/_states.scss new file mode 100644 index 00000000000..a2d1bc83aef --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/mixins/_states.scss @@ -0,0 +1,50 @@ +@mixin euiFocusRing($size: 'small', $amsterdamOnlyProp: null) { + @if $size == 'large' { + // It's always OK to use the focus animation. This will take precedence over times we turn it off individually like EuiButtonEmpty + // stylelint-disable-next-line declaration-no-important + animation: $euiAnimSpeedSlow $euiAnimSlightResistance 1 normal forwards focusRingAnimateLarge !important; + } @else { + // stylelint-disable-next-line declaration-no-important + animation: $euiAnimSpeedSlow $euiAnimSlightResistance 1 normal forwards focusRingAnimate !important; + } +} + +// Keyframe animation declarations can be found in +// utility/animations.scss + +@mixin euiFocusBackground($color: $euiColorPrimary) { + background-color: tintOrShade($euiColorPrimary, ((1 - $euiFocusTransparency) * 100%), ((1 - $euiFocusTransparency) * 100%)); +} + +@mixin euiHoverState { + cursor: pointer; + text-decoration: underline; +} + +@mixin euiFocusState($color: $euiColorPrimary) { + @include euiHoverState; + @include euiFocusBackground($color); +} + +@mixin euiDisabledState($color: $euiButtonColorDisabledText) { + cursor: not-allowed; + text-decoration: none; + + @if ($color) { + color: $color; + } +} + +@mixin euiInteractiveStates($focusColor: $euiColorPrimary, $disabledColor: $euiButtonColorDisabledText) { + &:hover { + @include euiHoverState; + } + + &:focus { + @include euiFocusState($focusColor); + } + + &:disabled { + @include euiDisabledState($disabledColor); + } +} diff --git a/packages/eui-theme-common/src/global_styling/mixins/_tool_tip.scss b/packages/eui-theme-common/src/global_styling/mixins/_tool_tip.scss new file mode 100644 index 00000000000..d8feb0d4258 --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/mixins/_tool_tip.scss @@ -0,0 +1,25 @@ +@mixin euiToolTipStyle($size: null) { + @include euiBottomShadow($color: $euiColorInk); + + $euiTooltipBackgroundColor: tintOrShade($euiColorFullShade, 25%, 100%) !default; + $euiTooltipBorderColor: tintOrShade($euiColorFullShade, 35%, 80%) !default; + + border-radius: $euiBorderRadius; + background-color: $euiTooltipBackgroundColor; + color: $euiColorGhost; + z-index: $euiZLevel9; + max-width: 256px; + overflow-wrap: break-word; + padding: $euiSizeS; + + .euiHorizontalRule { + background-color: $euiTooltipBorderColor; + } +} + +@mixin euiToolTipTitle { + font-weight: $euiFontWeightBold; + border-bottom: solid $euiBorderWidthThin $euiTooltipBorderColor; + padding-bottom: $euiSizeXS; + margin-bottom: $euiSizeXS; +} \ No newline at end of file diff --git a/packages/eui-theme-common/src/global_styling/mixins/_typography.scss b/packages/eui-theme-common/src/global_styling/mixins/_typography.scss new file mode 100644 index 00000000000..7090f0e2371 --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/mixins/_typography.scss @@ -0,0 +1,167 @@ +// stylelint-disable property-no-vendor-prefix +// stylelint-disable declaration-no-important + +@function fontSizeToRemOrEm($size, $sizingMethod: 'rem') { + @if ($sizingMethod == 'rem') { + @return #{$size / $euiFontSize}rem; + } @else if ($sizingMethod == 'em') { + @return #{$size / $euiFontSize}em; + } +} + +// It can also be applied to calculate paddings +@function marginToRemOrEm($elementSize, $elementFontSize, $sizingMethod: 'rem') { + @if ($sizingMethod == 'rem') { + @return #{$elementSize / $euiFontSize}rem; + } @else if ($sizingMethod == 'em') { + @return #{$elementSize / $elementFontSize}em; + } +} + +// Spit out rem and px +@mixin fontSize($size: $euiFontSize, $sizingMethod: 'rem') { + @if ($sizingMethod == 'rem') { + font-size: $size; + font-size: fontSizeToRemOrEm($size, 'rem'); + } @else if ($sizingMethod == 'em') { + font-size: fontSizeToRemOrEm($size, 'em'); + } +} + +@mixin lineHeightFromBaseline($multiplier: 3) { + line-height: lineHeightFromBaseline($multiplier); +} + +// Some mixins that help us deal with browser scaling of text more consistently. +// Essentially, fonts across eui should scale against the root html element, not +// against parent inheritance. + +// Our base fonts + +@mixin euiFont { + font-family: $euiFontFamily; + font-weight: $euiFontWeightRegular; + letter-spacing: -.005em; + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; + font-kerning: normal; +} + +@mixin euiCodeFont { + font-family: $euiCodeFontFamily; + letter-spacing: normal; +} + +@mixin euiText { + color: $euiTextColor; + font-weight: $euiFontWeightRegular; +} + +@mixin euiTitle($size: 'm') { + @include euiTextBreakWord; + color: $euiTitleColor; + + @if (map-has-key($euiTitles, $size)) { + @each $property, $value in map-get($euiTitles, $size) { + @if ($property == 'font-size') { + @include fontSize($value); + } @else { + #{$property}: $value; + } + } + } @else { + @include fontSize($size); + @include lineHeightFromBaseline(3); + } +} + +// Font sizing extends, using rem mixin + +@mixin euiFontSizeXS { + @include fontSize($euiFontSizeXS); + line-height: $euiLineHeight; +} + +@mixin euiFontSizeS { + @include fontSize($euiFontSizeS); + line-height: $euiLineHeight; +} + +@mixin euiFontSize { + @include fontSize($euiFontSize); + line-height: $euiLineHeight; +} + +@mixin euiFontSizeM { + @include fontSize($euiFontSizeM); + line-height: $euiLineHeight; +} + +@mixin euiFontSizeL { + @include fontSize($euiFontSizeL); + line-height: $euiLineHeight; +} + +@mixin euiFontSizeXL { + @each $property, $value in map-get($euiTitles, 'm') { + @if ($property == 'font-size') { + @include fontSize($value); + } @else { + #{$property}: $value; + } + } + line-height: 1.25; +} + +@mixin euiFontSizeXXL { + @each $property, $value in map-get($euiTitles, 'l') { + @if ($property == 'font-size') { + @include fontSize($value); + } @else { + #{$property}: $value; + } + } + line-height: 1.25; +} + +@mixin euiTextBreakWord { + // https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/ + overflow-wrap: break-word !important; // makes sure the long string will wrap and not bust out of the container + word-break: break-word; +} + +/** + * Text truncation + * + * Prevent text from wrapping onto multiple lines, and truncate with an ellipsis. + * + * 1. Ensure that the node has a maximum width after which truncation can occur. + */ +@mixin euiTextTruncate { + max-width: 100%; // 1 + overflow: hidden !important; + text-overflow: ellipsis !important; + white-space: nowrap !important; +} + +@mixin euiNumberFormat { + font-feature-settings: $euiFontFeatureSettings, 'tnum' 1; // Fixed-width numbers for tabular data +} + +/** + * Text weight shifting + * + * When changing the font-weight based the state of the component + * this mixin will ensure that the sizing is dependent on the boldest + * weight so it doesn't shifter sibling content. + */ +@mixin euiTextShift($fontWeight: $euiFontWeightBold, $attr: 'data-text') { + &::after { + display: block; + content: attr(#{$attr}); + font-weight: $fontWeight; + height: 0; + overflow: hidden; + visibility: hidden; + } +} diff --git a/packages/eui-theme-common/src/global_styling/types.ts b/packages/eui-theme-common/src/global_styling/types.ts new file mode 100644 index 00000000000..e2b7a96a9ff --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/types.ts @@ -0,0 +1,106 @@ +/* + * 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 { CSSObject } from '@emotion/react'; + +import type { RecursivePartial, ValueOf } from '../types'; + +import { _EuiThemeAnimation } from './variables/animations'; +import { _EuiThemeBreakpoints } from './variables/breakpoint'; +import { _EuiThemeBorder } from './variables/borders'; +import { _EuiThemeColors } from './variables/colors'; +import { _EuiThemeBase, _EuiThemeSizes } from './variables/size'; +import { _EuiThemeFont } from './variables/typography'; +import { _EuiThemeFocus } from './variables/states'; +import { _EuiThemeLevels } from './variables/levels'; + +export const COLOR_MODES_STANDARD = { + light: 'LIGHT', + dark: 'DARK', +} as const; +export const COLOR_MODES_INVERSE = 'INVERSE' as const; + +export type EuiThemeColorModeInverse = typeof COLOR_MODES_INVERSE; +export type EuiThemeColorModeStandard = ValueOf; +export type EuiThemeColorMode = + | 'light' + | 'dark' + | EuiThemeColorModeStandard + | 'inverse' + | EuiThemeColorModeInverse; + +export type ColorModeSwitch = + | { + [key in EuiThemeColorModeStandard]: T; + } + | T; + +export type StrictColorModeSwitch = { + [key in EuiThemeColorModeStandard]: T; +}; + +export type EuiThemeShape = { + colors: _EuiThemeColors; + /** - Default value: 16 */ + base: _EuiThemeBase; + /** + * @see {@link https://eui.elastic.co/#/theming/sizing | Reference} for more information + */ + size: _EuiThemeSizes; + font: _EuiThemeFont; + border: _EuiThemeBorder; + focus: _EuiThemeFocus; + animation: _EuiThemeAnimation; + breakpoint: _EuiThemeBreakpoints; + levels: _EuiThemeLevels; +}; + +export type EuiThemeSystem = { + root: EuiThemeShape & T; + model: EuiThemeShape & T; + key: string; +}; + +export type EuiThemeModifications = RecursivePartial; + +export type ComputedThemeShape< + T, + P = string | number | bigint | boolean | null | undefined +> = T extends P | ColorModeSwitch + ? T extends ColorModeSwitch + ? X extends P + ? X + : { + [K in keyof (X & + Exclude< + T, + keyof X | keyof StrictColorModeSwitch + >)]: ComputedThemeShape< + (X & Exclude)[K], + P + >; + } + : T + : { + [K in keyof T]: ComputedThemeShape; + }; + +export type EuiThemeComputed = ComputedThemeShape & { + themeName: string; +}; + +export type EuiThemeNested = { + isGlobalTheme: boolean; + hasDifferentColorFromGlobalTheme: boolean; + bodyColor: string; + colorClassName: string; + setGlobalCSSVariables: Function; + globalCSSVariables?: CSSObject; + setNearestThemeCSSVariables: Function; + themeCSSVariables?: CSSObject; +}; diff --git a/packages/eui-theme-common/src/global_styling/variables/_animations.scss b/packages/eui-theme-common/src/global_styling/variables/_animations.scss new file mode 100644 index 00000000000..93b9daf1641 --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/variables/_animations.scss @@ -0,0 +1,13 @@ +// Animations + +$euiAnimSlightBounce: cubic-bezier(.34, 1.61, .7, 1) !default; +$euiAnimSlightResistance: cubic-bezier(.694, .0482, .335, 1) !default; + +$euiAnimSpeedExtraFast: 90ms !default; +$euiAnimSpeedFast: 150ms !default; +$euiAnimSpeedNormal: 250ms !default; +$euiAnimSpeedSlow: 350ms !default; +$euiAnimSpeedExtraSlow: 500ms !default; + +// Keyframe animation declarations can be found in +// eui/utility/animations.scss diff --git a/packages/eui-theme-common/src/global_styling/variables/_borders.scss b/packages/eui-theme-common/src/global_styling/variables/_borders.scss new file mode 100644 index 00000000000..6fa0216ff3b --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/variables/_borders.scss @@ -0,0 +1,11 @@ +// Borders + +$euiBorderWidthThin: 1px !default; +$euiBorderWidthThick: 2px !default; + +$euiBorderColor: $euiColorLightShade !default; +$euiBorderRadius: $euiSizeS * .75 !default; +$euiBorderRadiusSmall: $euiSizeS * .5 !default; +$euiBorderThick: $euiBorderWidthThick solid $euiBorderColor !default; +$euiBorderThin: $euiBorderWidthThin solid $euiBorderColor !default; +$euiBorderEditable: $euiBorderWidthThick dotted $euiBorderColor !default; diff --git a/packages/eui-theme-common/src/global_styling/variables/_buttons.scss b/packages/eui-theme-common/src/global_styling/variables/_buttons.scss new file mode 100644 index 00000000000..4d4e8a5f0b1 --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/variables/_buttons.scss @@ -0,0 +1,18 @@ +$euiButtonHeight: $euiSizeXXL !default; +$euiButtonHeightSmall: $euiSizeXL !default; +$euiButtonHeightXSmall: $euiSizeL !default; + +// Modifier naming and colors. +$euiButtonTypes: ( + primary: $euiColorPrimary, + accent: $euiColorAccent, + success: $euiColorSuccess, + warning: $euiColorWarning, + danger: $euiColorDanger, + ghost: $euiColorGhost, // Ghost is special, and does not care about theming. + text: $euiColorDarkShade, // 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: $euiColorDisabledText; diff --git a/packages/eui-theme-common/src/global_styling/variables/_colors_vis.scss b/packages/eui-theme-common/src/global_styling/variables/_colors_vis.scss new file mode 100644 index 00000000000..cfffdf5e55d --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/variables/_colors_vis.scss @@ -0,0 +1,72 @@ +// Visualization colors +// stylelint-disable color-no-hex + +// Maps allow for easier JSON usage +// Use map_merge($euiColorVisColors, $yourMap) to change individual colors after importing ths file +// The `behindText` variant is a direct copy of the hex output by the JS euiPaletteColorBlindBehindText() function +$euiPaletteColorBlind: ( + euiColorVis0: ( + graphic: #54B399, + behindText: #6DCCB1, + ), + euiColorVis1: ( + graphic: #6092C0, + behindText: #79AAD9, + ), + euiColorVis2: ( + graphic: #D36086, + behindText: #EE789D, + ), + euiColorVis3: ( + graphic: #9170B8, + behindText: #A987D1, + ), + euiColorVis4: ( + graphic: #CA8EAE, + behindText: #E4A6C7, + ), + euiColorVis5: ( + graphic: #D6BF57, + behindText: #F1D86F, + ), + euiColorVis6: ( + graphic: #B9A888, + behindText: #D2C0A0, + ), + euiColorVis7: ( + graphic: #DA8B45, + behindText: #F5A35C, + ), + euiColorVis8: ( + graphic: #AA6556, + behindText: #C47C6C, + ), + euiColorVis9: ( + graphic: #E7664C, + behindText: #FF7E62, + ) +) !default; + +$euiPaletteColorBlindKeys: map-keys($euiPaletteColorBlind); + +$euiColorVis0: map-get(map-get($euiPaletteColorBlind, 'euiColorVis0'), 'graphic') !default; +$euiColorVis1: map-get(map-get($euiPaletteColorBlind, 'euiColorVis1'), 'graphic') !default; +$euiColorVis2: map-get(map-get($euiPaletteColorBlind, 'euiColorVis2'), 'graphic') !default; +$euiColorVis3: map-get(map-get($euiPaletteColorBlind, 'euiColorVis3'), 'graphic') !default; +$euiColorVis4: map-get(map-get($euiPaletteColorBlind, 'euiColorVis4'), 'graphic') !default; +$euiColorVis5: map-get(map-get($euiPaletteColorBlind, 'euiColorVis5'), 'graphic') !default; +$euiColorVis6: map-get(map-get($euiPaletteColorBlind, 'euiColorVis6'), 'graphic') !default; +$euiColorVis7: map-get(map-get($euiPaletteColorBlind, 'euiColorVis7'), 'graphic') !default; +$euiColorVis8: map-get(map-get($euiPaletteColorBlind, 'euiColorVis8'), 'graphic') !default; +$euiColorVis9: map-get(map-get($euiPaletteColorBlind, 'euiColorVis9'), 'graphic') !default; + +$euiColorVis0_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis0'), 'behindText') !default; +$euiColorVis1_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis1'), 'behindText') !default; +$euiColorVis2_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis2'), 'behindText') !default; +$euiColorVis3_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis3'), 'behindText') !default; +$euiColorVis4_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis4'), 'behindText') !default; +$euiColorVis5_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis5'), 'behindText') !default; +$euiColorVis6_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis6'), 'behindText') !default; +$euiColorVis7_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis7'), 'behindText') !default; +$euiColorVis8_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis8'), 'behindText') !default; +$euiColorVis9_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis9'), 'behindText') !default; diff --git a/packages/eui-theme-common/src/global_styling/variables/_colors_vis.ts b/packages/eui-theme-common/src/global_styling/variables/_colors_vis.ts new file mode 100644 index 00000000000..4459b04ff8c --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/variables/_colors_vis.ts @@ -0,0 +1,62 @@ +/* + * 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. + */ + +/** + * NOTE: These were quick conversions of their Sass counterparts. + * They have yet to be used/tested. + * TODO: Make the graphic version available from `euiPaletteColorBlind()` + */ + +// Maps allow for easier JSON usage +// Use map_merge(euiColorVisColors, $yourMap) to change individual colors after importing ths file +// The `behindText` variant is a direct copy of the hex output by the JS euiPaletteColorBlindBehindText() function +const euiPaletteColorBlind = { + euiColorVis0: { + graphic: '#54B399', + }, + euiColorVis1: { + graphic: '#6092C0', + }, + euiColorVis2: { + graphic: '#D36086', + }, + euiColorVis3: { + graphic: '#9170B8', + }, + euiColorVis4: { + graphic: '#CA8EAE', + }, + euiColorVis5: { + graphic: '#D6BF57', + }, + euiColorVis6: { + graphic: '#B9A888', + }, + euiColorVis7: { + graphic: '#DA8B45', + }, + euiColorVis8: { + graphic: '#AA6556', + }, + euiColorVis9: { + graphic: '#E7664C', + }, +}; + +export const colorVis = { + euiColorVis0: euiPaletteColorBlind.euiColorVis0.graphic, + euiColorVis1: euiPaletteColorBlind.euiColorVis1.graphic, + euiColorVis2: euiPaletteColorBlind.euiColorVis2.graphic, + euiColorVis3: euiPaletteColorBlind.euiColorVis3.graphic, + euiColorVis4: euiPaletteColorBlind.euiColorVis4.graphic, + euiColorVis5: euiPaletteColorBlind.euiColorVis5.graphic, + euiColorVis6: euiPaletteColorBlind.euiColorVis6.graphic, + euiColorVis7: euiPaletteColorBlind.euiColorVis7.graphic, + euiColorVis8: euiPaletteColorBlind.euiColorVis8.graphic, + euiColorVis9: euiPaletteColorBlind.euiColorVis9.graphic, +}; diff --git a/packages/eui-theme-common/src/global_styling/variables/_font_weight.scss b/packages/eui-theme-common/src/global_styling/variables/_font_weight.scss new file mode 100644 index 00000000000..f5dfd287835 --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/variables/_font_weight.scss @@ -0,0 +1,10 @@ +// Separated out to its own file for easy import into docs + +// Font weights +$euiFontWeightLight: 300 !default; +$euiFontWeightRegular: 400 !default; +$euiFontWeightMedium: 500 !default; +$euiFontWeightSemiBold: 600 !default; +$euiFontWeightBold: 700 !default; +$euiCodeFontWeightRegular: 400 !default; +$euiCodeFontWeightBold: 700 !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 new file mode 100644 index 00000000000..41c5dfad04e --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/variables/_form.scss @@ -0,0 +1,21 @@ +// Sizing +$euiFormMaxWidth: $euiSizeXXL * 10 !default; +$euiFormControlHeight: $euiSizeXXL !default; +$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 diff --git a/packages/eui-theme-common/src/global_styling/variables/_index.scss b/packages/eui-theme-common/src/global_styling/variables/_index.scss new file mode 100644 index 00000000000..993979a78a5 --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/variables/_index.scss @@ -0,0 +1,23 @@ +// -------------------------------------------------------------------------------------- +// EUI global variables +// -------------------------------------------------------------------------------------- +// This module contains all global variables available within EUI. Every variable in this +// document should be prefixed with $eui. This lets us know where the variable is +// coming from when looking inside the individual component files. Any component local +// variables should be declared at the top of those documents prefixed with $componentName. + +// Global colors are established and importer per theme, before this manifest +// Import order is important. Size, vis colors, ...etc are used in other variables. +@import 'size'; +@import 'colors_vis'; +@import 'animations'; +@import 'font_weight'; +@import 'typography'; +@import 'borders'; +@import 'responsive'; +@import 'shadows'; +@import 'states'; +@import 'z_index'; + +@import 'buttons'; +@import 'form'; diff --git a/packages/eui-theme-common/src/global_styling/variables/_responsive.scss b/packages/eui-theme-common/src/global_styling/variables/_responsive.scss new file mode 100644 index 00000000000..de6e8ca5b83 --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/variables/_responsive.scss @@ -0,0 +1,9 @@ +$euiBreakpoints: ( + 'xs': 0, + 's': 575px, + 'm': 768px, + 'l': 992px, + 'xl': 1200px +) !default; + +$euiBreakpointKeys: map-keys($euiBreakpoints); diff --git a/packages/eui-theme-common/src/global_styling/variables/_shadows.scss b/packages/eui-theme-common/src/global_styling/variables/_shadows.scss new file mode 100644 index 00000000000..05e445f27a1 --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/variables/_shadows.scss @@ -0,0 +1,2 @@ +// Shadows +$euiShadowColor: $euiColorInk !default; diff --git a/packages/eui-theme-common/src/global_styling/variables/_size.scss b/packages/eui-theme-common/src/global_styling/variables/_size.scss new file mode 100644 index 00000000000..29eca9c1b00 --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/variables/_size.scss @@ -0,0 +1,13 @@ +$euiSize: 16px !default; + +$euiSizeXS: $euiSize * .25 !default; +$euiSizeS: $euiSize * .5 !default; +$euiSizeM: $euiSize * .75 !default; +$euiSizeL: $euiSize * 1.5 !default; +$euiSizeXL: $euiSize * 2 !default; +$euiSizeXXL: $euiSize * 2.5 !default; + +$euiScrollBar: $euiSize !default; +// Corner sizes are used as an inset border and therefore a smaller corner size means a larger thumb +$euiScrollBarCorner: $euiSizeXS !default; +$euiScrollBarCornerThin: $euiSizeS * .75 !default; diff --git a/packages/eui-theme-common/src/global_styling/variables/_states.scss b/packages/eui-theme-common/src/global_styling/variables/_states.scss new file mode 100644 index 00000000000..fba4cc59caa --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/variables/_states.scss @@ -0,0 +1,14 @@ +// Colors +$euiFocusRingColor: rgba($euiColorPrimary, .3) !default; +$euiFocusRingAnimStartColor: rgba($euiColorPrimary, 0) !default; +$euiFocusRingAnimStartSize: 6px !default; +$euiFocusRingAnimStartSizeLarge: 10px !default; + +// Sizing +$euiFocusRingSizeLarge: $euiSizeXS !default; +$euiFocusRingSize: $euiFocusRingSizeLarge * .75 !default; + +// Transparency +$euiFocusTransparency: lightOrDarkTheme(.1, .2) !default; +$euiFocusTransparencyPercent: lightOrDarkTheme(90%, 80%) !default; +$euiFocusBackgroundColor: tintOrShade($euiColorPrimary, $euiFocusTransparencyPercent, $euiFocusTransparencyPercent) !default; diff --git a/packages/eui-theme-common/src/global_styling/variables/_typography.scss b/packages/eui-theme-common/src/global_styling/variables/_typography.scss new file mode 100644 index 00000000000..1ca62f3248c --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/variables/_typography.scss @@ -0,0 +1,75 @@ +// Families +$euiFontFamily: 'Inter', BlinkMacSystemFont, Helvetica, Arial, sans-serif !default; +$euiCodeFontFamily: 'Roboto Mono', Menlo, Courier, monospace !default; + +// Careful using ligatures. Code editors like ACE will often error because of width calculations +$euiFontFeatureSettings: 'calt' 1, 'kern' 1, 'liga' 1 !default; + +// Font sizes -- scale is loosely based on Major Third (1.250) +$euiTextScale: 2.25, 1.75, 1.25, 1.125, 1, .875, .75 !default; + +$euiFontSize: $euiSize !default; // 5th position in scale +$euiFontSizeXS: $euiFontSize * nth($euiTextScale, 7) !default; // 12px +$euiFontSizeS: $euiFontSize * nth($euiTextScale, 6) !default; // 14px +$euiFontSizeM: $euiFontSize * nth($euiTextScale, 4) !default; // 18px +$euiFontSizeL: $euiFontSize * nth($euiTextScale, 3) !default; // 20px +$euiFontSizeXL: $euiFontSize * nth($euiTextScale, 2) !default; // 28px +$euiFontSizeXXL: $euiFontSize * nth($euiTextScale, 1) !default; // 36px + +// Line height +$euiLineHeight: 1.5 !default; +$euiBodyLineHeight: 1 !default; + +// Normally functions are imported before variables in `_index.scss` files +// But because they need to consume some typography variables they need to live here +@function convertToRem($size) { + @return #{$size / $euiFontSize}rem; +} + +// Our base gridline is at 1/2 the font-size, ensure line-heights stay on that gridline. +// EX: A proper line-height for text is 1.5 times the font-size. +// If our base font size (euiFontSize) is 16, our baseline is 8 (16*1.5 / 3). To ensure the +// text stays on the baseline, we pass a multiplier to calculate a line-height in rems. +@function lineHeightFromBaseline($multiplier: 3) { + @return convertToRem(($euiFontSize / 2) * $multiplier); +} + +// Titles map +// Lists all the properties per EuiTitle size that then gets looped through to create the selectors. +// The map allows for tokenization and easier customization per theme, otherwise you'd have to override the selectors themselves +$euiTitles: ( + 'xxxs': ( + 'font-size': $euiFontSizeXS, + 'line-height': lineHeightFromBaseline(3), + 'font-weight': $euiFontWeightBold, + ), + 'xxs': ( + 'font-size': $euiFontSizeS, + 'line-height': lineHeightFromBaseline(3), + 'font-weight': $euiFontWeightBold, + ), + 'xs': ( + 'font-size': $euiFontSize, + 'line-height': lineHeightFromBaseline(3), + 'font-weight': $euiFontWeightSemiBold, + 'letter-spacing': -.02em, + ), + 's': ( + 'font-size': $euiFontSizeL, + 'line-height': lineHeightFromBaseline(4), + 'font-weight': $euiFontWeightMedium, + 'letter-spacing': -.025em, + ), + 'm': ( + 'font-size': $euiFontSizeXL, + 'line-height': lineHeightFromBaseline(5), + 'font-weight': $euiFontWeightLight, + 'letter-spacing': -.04em, + ), + 'l': ( + 'font-size': $euiFontSizeXXL, + 'line-height': lineHeightFromBaseline(6), + 'font-weight': $euiFontWeightLight, + 'letter-spacing': -.03em, + ), +) !default; diff --git a/packages/eui-theme-common/src/global_styling/variables/_z_index.scss b/packages/eui-theme-common/src/global_styling/variables/_z_index.scss new file mode 100644 index 00000000000..2448a34c61a --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/variables/_z_index.scss @@ -0,0 +1,34 @@ +// Z-Index + +// Remember that z-index is relative to parent and based on the stacking context. +// z-indexes only compete against other z-indexes when they exist as children of +// that shared parent. + +// That means a popover with a settings of 2, will still show above a modal +// with a setting of 100, if it is within that modal and not besides it. + +// Generally that means it's a good idea to consider things added to this file +// as competitive only as siblings. + +// https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context + +$euiZLevel0: 0; +$euiZLevel1: 1000; +$euiZLevel2: 2000; +$euiZLevel3: 3000; +$euiZLevel4: 4000; +$euiZLevel5: 5000; +$euiZLevel6: 6000; +$euiZLevel7: 7000; +$euiZLevel8: 8000; +$euiZLevel9: 9000; + +$euiZToastList: $euiZLevel9; +$euiZModal: $euiZLevel8; +$euiZMask: $euiZLevel6; +$euiZNavigation: $euiZLevel6; +$euiZContentMenu: $euiZLevel2; +$euiZHeader: $euiZLevel1; +$euiZFlyout: $euiZHeader; +$euiZMaskBelowHeader: $euiZHeader; +$euiZContent: $euiZLevel0; diff --git a/packages/eui-theme-common/src/global_styling/variables/animations.ts b/packages/eui-theme-common/src/global_styling/variables/animations.ts new file mode 100644 index 00000000000..46bce009c92 --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/variables/animations.ts @@ -0,0 +1,66 @@ +/* + * 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 { CSSProperties } from 'react'; + +/** + * A constant storing the `prefers-reduced-motion` media query + * so that when it is turned off, animations are not run. + */ +export const euiCanAnimate = + '@media screen and (prefers-reduced-motion: no-preference)'; + +/** + * A constant storing the `prefers-reduced-motion` media query that will + * only apply the content if the setting is off (reduce). + */ +export const euiCantAnimate = + '@media screen and (prefers-reduced-motion: reduce)'; + +/** + * Speeds / Durations / Delays + */ + +export const EuiThemeAnimationSpeeds = [ + 'extraFast', + 'fast', + 'normal', + 'slow', + 'extraSlow', +] as const; + +export type _EuiThemeAnimationSpeed = (typeof EuiThemeAnimationSpeeds)[number]; + +export type _EuiThemeAnimationSpeeds = { + /** - Default value: 90ms */ + extraFast: CSSProperties['animationDuration']; + /** - Default value: 150ms */ + fast: CSSProperties['animationDuration']; + /** - Default value: 250ms */ + normal: CSSProperties['animationDuration']; + /** - Default value: 350ms */ + slow: CSSProperties['animationDuration']; + /** - Default value: 500ms */ + extraSlow: CSSProperties['animationDuration']; +}; + +/** + * Easings / Timing functions + */ + +export const EuiThemeAnimationEasings = ['bounce', 'resistance'] as const; + +export type _EuiThemeAnimationEasing = + (typeof EuiThemeAnimationEasings)[number]; + +export type _EuiThemeAnimationEasings = Record< + _EuiThemeAnimationEasing, + CSSProperties['animationTimingFunction'] +>; + +export type _EuiThemeAnimation = _EuiThemeAnimationEasings & + _EuiThemeAnimationSpeeds; diff --git a/packages/eui-theme-common/src/global_styling/variables/borders.ts b/packages/eui-theme-common/src/global_styling/variables/borders.ts new file mode 100644 index 00000000000..3673010aba2 --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/variables/borders.ts @@ -0,0 +1,74 @@ +/* + * 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 { CSSProperties } from 'react'; +import { ColorModeSwitch } from '../types'; + +export interface _EuiThemeBorderWidthValues { + /** + * Thinnest width for border + * - Default value: 1px + */ + thin: CSSProperties['borderWidth']; + /** + * Thickest width for border + * - Default value: 2px + */ + thick: CSSProperties['borderWidth']; +} + +export interface _EuiThemeBorderRadiusValues { + /** + * Primary corner radius size + * - Default value: 6px + */ + medium: CSSProperties['borderRadius']; + /** + * Small corner radius size + * - Default value: 4px + */ + small: CSSProperties['borderRadius']; +} + +export interface _EuiThemeBorderColorValues { + /** + * Color for all borders; Default is `colors.lightShade` + */ + color: ColorModeSwitch; +} + +export interface _EuiThemeBorderValues extends _EuiThemeBorderColorValues { + /** + * Varied thicknesses for borders + */ + width: _EuiThemeBorderWidthValues; + /** + * Varied border radii + */ + radius: _EuiThemeBorderRadiusValues; +} + +export interface _EuiThemeBorderTypes { + /** + * Full `border` property string computed using `border.width.thin` and `border.color` + * - Default value: 1px solid [colors.lightShade] + */ + thin: CSSProperties['border']; + /** + * Full `border` property string computed using `border.width.thick` and `border.color` + * - Default value: 2px solid [colors.lightShade] + */ + thick: CSSProperties['border']; + /** + * Full editable style `border` property string computed using `border.width.thick` and `border.color` + * - Default value: 2px dotted [colors.lightShade] + */ + editable: CSSProperties['border']; +} + +export type _EuiThemeBorder = _EuiThemeBorderValues & _EuiThemeBorderTypes; diff --git a/packages/eui-theme-common/src/global_styling/variables/breakpoint.ts b/packages/eui-theme-common/src/global_styling/variables/breakpoint.ts new file mode 100644 index 00000000000..68aef1fba38 --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/variables/breakpoint.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. + */ + +export const EuiThemeBreakpoints = ['xs', 's', 'm', 'l', 'xl'] as const; + +// This type cannot be a string enum / must be a generic string +// in case consumers add custom breakpoint sizes, such as xxl or xxs +export type _EuiThemeBreakpoint = string; + +// Explicitly list out each key so we can document default values +// via JSDoc (which is available to devs in IDE via intellisense) +export type _EuiThemeBreakpoints = Record<_EuiThemeBreakpoint, number> & { + /** - Default value: 0 */ + xs: number; + /** - Default value: 575 */ + s: number; + /** - Default value: 768 */ + m: number; + /** - Default value: 992 */ + l: number; + /** - Default value: 1200 */ + xl: number; +}; diff --git a/packages/eui-theme-common/src/global_styling/variables/colors.ts b/packages/eui-theme-common/src/global_styling/variables/colors.ts new file mode 100644 index 00000000000..8604ecafba4 --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/variables/colors.ts @@ -0,0 +1,156 @@ +/* + * 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'; + +/** + * Top 5 colors + */ +export type _EuiThemeBrandColors = { + /** + * Main brand color and used for most **call to actions** like buttons and links. + */ + primary: ColorModeSwitch; + /** + * Pulls attention to key indicators like **notifications** or number of selections. + */ + accent: ColorModeSwitch; + /** + * Used for **positive** messages/graphics and additive actions. + */ + success: ColorModeSwitch; + /** + * Used for **warnings** and actions that have a potential to be destructive. + */ + warning: ColorModeSwitch; + /** + * Used for **negative** messages/graphics like errors and destructive actions. + */ + danger: ColorModeSwitch; +}; + +/** + * Every brand color must have a contrast computed text equivelant + */ +export type _EuiThemeBrandTextColors = { + /** + * Typically computed against `colors.primary` + */ + primaryText: ColorModeSwitch; + /** + * Typically computed against `colors.accent` + */ + accentText: ColorModeSwitch; + /** + * Typically computed against `colors.success` + */ + successText: ColorModeSwitch; + /** + * Typically computed against `colors.warning` + */ + warningText: ColorModeSwitch; + /** + * Typically computed against `colors.danger` + */ + dangerText: ColorModeSwitch; +}; + +export type _EuiThemeShadeColors = { + /** + * Used as the background color of primary **page content and panels** including modals and flyouts. + */ + emptyShade: ColorModeSwitch; + /** + * Used to lightly shade areas that contain **secondary content** or contain panel-like components. + */ + lightestShade: ColorModeSwitch; + /** + * Used for most **borders** and dividers (horizontal rules). + */ + lightShade: ColorModeSwitch; + /** + * The middle gray for all themes; this is the base for `colors.subdued`. + */ + mediumShade: ColorModeSwitch; + /** + * Slightly subtle graphic color + */ + darkShade: ColorModeSwitch; + /** + * Used as the **text** color and the background color for **inverted components** like tooltips and the control bar. + */ + darkestShade: ColorModeSwitch; + /** + * The opposite of `emptyShade` + */ + fullShade: ColorModeSwitch; +}; + +export type _EuiThemeTextColors = { + /** + * Computed against `colors.darkestShade` + */ + text: ColorModeSwitch; + /** + * Computed against `colors.text` + */ + title: ColorModeSwitch; + /** + * Computed against `colors.mediumShade` + */ + subduedText: ColorModeSwitch; + /** + * Computed against `colors.primaryText` + */ + link: 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**. + */ + body: ColorModeSwitch; + /** + * Used to **highlight text** when matching against search strings + */ + highlight: ColorModeSwitch; + /** + * Computed against `colors.darkestShade` + */ + disabled: ColorModeSwitch; + /** + * Computed against `colors.disabled` + */ + disabledText: ColorModeSwitch; + /** + * The base color for shadows that gets `transparentized` + * at a value based on the `colorMode` and then layered. + */ + shadow: ColorModeSwitch; +}; + +export type _EuiThemeConstantColors = { + /** + * Purest **white** + */ + ghost: string; + /** + * Purest **black** + */ + ink: string; +}; + +export type _EuiThemeColorsMode = _EuiThemeBrandColors & + _EuiThemeBrandTextColors & + _EuiThemeShadeColors & + _EuiThemeSpecialColors & + _EuiThemeTextColors; + +export type _EuiThemeColors = StrictColorModeSwitch<_EuiThemeColorsMode> & + _EuiThemeConstantColors; diff --git a/packages/eui-theme-common/src/global_styling/variables/index.ts b/packages/eui-theme-common/src/global_styling/variables/index.ts new file mode 100644 index 00000000000..48eacef5cbb --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/variables/index.ts @@ -0,0 +1,18 @@ +/* + * 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 * from './animations'; +export * from './borders'; +export * from './breakpoint'; +export * from './colors'; +export * from './_colors_vis'; +export * from './levels'; +export * from './size'; +export * from './shadow'; +export * from './states'; +export * from './typography'; diff --git a/packages/eui-theme-common/src/global_styling/variables/levels.ts b/packages/eui-theme-common/src/global_styling/variables/levels.ts new file mode 100644 index 00000000000..7d38c71791b --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/variables/levels.ts @@ -0,0 +1,60 @@ +/* + * 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 { CSSProperties } from 'react'; + +/** + * Z-Index + * + * Remember that z-index is relative to parent and based on the stacking context. + * z-indexes only compete against other z-indexes when they exist as children of + * that shared parent. + * + * That means a popover with a settings of 2, will still show above a modal + * with a setting of 100, if it is within that modal and not besides it. + * + * Generally that means it's a good idea to consider things added to this file + * as competitive only as siblings. + * + * https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context + */ + +export const EuiThemeLevels = [ + 'toast', + 'modal', + 'mask', + 'navigation', + 'menu', + 'header', + 'flyout', + 'maskBelowHeader', + 'content', +] as const; + +export type _EuiThemeLevel = (typeof EuiThemeLevels)[number]; + +export type _EuiThemeLevels = { + /** - Default value: 9000 */ + toast: NonNullable; + /** - Default value: 8000 */ + modal: NonNullable; + /** - Default value: 6000 */ + mask: NonNullable; + /** - Default value: 6000 */ + navigation: NonNullable; + /** - Default value: 2000 */ + menu: NonNullable; + /** - Default value: 1000 */ + header: NonNullable; + /** - Default value: 1000 */ + flyout: NonNullable; + /** - Default value: 1000 */ + maskBelowHeader: NonNullable; + /** - Default value: 0 */ + content: NonNullable; +}; diff --git a/packages/eui-theme-common/src/global_styling/variables/shadow.ts b/packages/eui-theme-common/src/global_styling/variables/shadow.ts new file mode 100644 index 00000000000..7761fbdb9a0 --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/variables/shadow.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. + */ + +export const EuiThemeShadowSizes = ['xs', 's', 'm', 'l', 'xl'] as const; + +export type _EuiThemeShadowSize = (typeof EuiThemeShadowSizes)[number]; + +/** + * Shadow t-shirt sizes descriptions + */ +export const _EuiShadowSizesDescriptions: Record<_EuiThemeShadowSize, string> = + { + xs: 'Very subtle shadow used on small components.', + s: 'Adds subtle depth, usually used in conjunction with a border.', + m: 'Used on small sized portalled content like popovers.', + l: 'Primary shadow used in most cases to add visible depth.', + xl: 'Very large shadows used for large portalled style containers like modals and flyouts.', + }; + +export interface _EuiThemeShadowCustomColor { + color?: string; + property?: 'box-shadow' | 'filter'; +} diff --git a/packages/eui-theme-common/src/global_styling/variables/size.ts b/packages/eui-theme-common/src/global_styling/variables/size.ts new file mode 100644 index 00000000000..98428346b61 --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/variables/size.ts @@ -0,0 +1,47 @@ +/* + * 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 type _EuiThemeBase = number; + +export const EuiThemeSizes = [ + 'xxs', + 'xs', + 's', + 'm', + 'base', + 'l', + 'xl', + 'xxl', + 'xxxl', + 'xxxxl', +] as const; + +export type _EuiThemeSize = (typeof EuiThemeSizes)[number]; + +export type _EuiThemeSizes = { + /** - Default value: 2px */ + xxs: string; + /** - Default value: 4px */ + xs: string; + /** - Default value: 8px */ + s: string; + /** - Default value: 12px */ + m: string; + /** - Default value: 16px */ + base: string; + /** - Default value: 24px */ + l: string; + /** - Default value: 32px */ + xl: string; + /** - Default value: 40px */ + xxl: string; + /** - Default value: 48px */ + xxxl: string; + /** - Default value: 64px */ + xxxxl: string; +}; diff --git a/packages/eui-theme-common/src/global_styling/variables/states.ts b/packages/eui-theme-common/src/global_styling/variables/states.ts new file mode 100644 index 00000000000..2d0283ac949 --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/variables/states.ts @@ -0,0 +1,33 @@ +/* + * 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 { CSSProperties } from 'react'; +import { ColorModeSwitch } from '../types'; + +export interface _EuiThemeFocus { + /** + * Default color of the focus ring, some components may override this property + * - Default value: currentColor + */ + color: ColorModeSwitch; + /** + * Thickness of the outline + * - Default value: 2px + */ + width: CSSProperties['borderWidth']; + /** + * Used to transparentize the focus background color + * - Default value: { LIGHT: 0.1, DARK: 0.2 } + */ + transparency: ColorModeSwitch; + /** + * Default focus background color. Not all components set a background color on focus + * - Default value: `colors.primary` computed with `focus.transparency` + */ + backgroundColor: ColorModeSwitch; +} diff --git a/packages/eui-theme-common/src/global_styling/variables/typography.ts b/packages/eui-theme-common/src/global_styling/variables/typography.ts new file mode 100644 index 00000000000..80ebbc8b1cb --- /dev/null +++ b/packages/eui-theme-common/src/global_styling/variables/typography.ts @@ -0,0 +1,146 @@ +/* + * 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 { CSSProperties } from 'react'; + +/** + * Font units of measure + */ + +export const EuiThemeFontUnits = ['rem', 'px', 'em'] as const; + +export type _EuiThemeFontUnit = (typeof EuiThemeFontUnits)[number]; + +/* + * Font scale + */ + +export const EuiThemeFontScales = [ + 'xxxs', + 'xxs', + 'xs', + 's', + 'm', + 'l', + 'xl', + 'xxl', +] as const; + +export type _EuiThemeFontScale = (typeof EuiThemeFontScales)[number]; + +export type _EuiThemeFontScales = Record<_EuiThemeFontScale, number>; + +/* + * Font base settings + */ + +export type _EuiThemeFontBase = { + /** + * The whole font family stack for all parts of the UI. + * We encourage only customizing the first font in the stack. + */ + family: string; + /** + * The font family used for monospace UI elements like EuiCode + */ + familyCode?: string; + /** + * The font family used for serif UI elements like blockquotes within EuiText + */ + familySerif?: string; + /** + * Controls advanced features OpenType fonts. + * https://developer.mozilla.org/en-US/docs/Web/CSS/font-feature-settings + */ + featureSettings?: string; + /** + * Sets the default units used for font size & line height set by UI components + * like EuiText or EuiTitle. Defaults to `rem`. + * + * NOTE: This may overridden by some internal usages, e.g. + * EuiText's `relative` size which must use `em`. + * + * @default 'rem' + */ + defaultUnits: _EuiThemeFontUnit; + /** + * A computed number that is 1/4 of `base` + */ + baseline: number; + /** + * Establishes the ideal line-height percentage, but it is the `baseline` integer that establishes the final pixel/rem value + */ + lineHeightMultiplier: number; +}; + +/* + * Font weights + */ + +export const EuiThemeFontWeights = [ + 'light', + 'regular', + 'medium', + 'semiBold', + 'bold', +] as const; + +export type _EuiThemeFontWeight = (typeof EuiThemeFontWeights)[number]; + +export type _EuiThemeFontWeights = { + /** - Default value: 300 */ + light: CSSProperties['fontWeight']; + /** - Default value: 400 */ + regular: CSSProperties['fontWeight']; + /** - Default value: 500 */ + medium: CSSProperties['fontWeight']; + /** - Default value: 600 */ + semiBold: CSSProperties['fontWeight']; + /** - Default value: 700 */ + bold: CSSProperties['fontWeight']; +}; + +/** + * Body / Base styles + */ + +export interface _EuiThemeBody { + /** + * A sizing key from one of the font scales to set as the base body font-size + */ + scale: _EuiThemeFontScale; + /** + * A font weight key for setting the base body weight + */ + weight: keyof _EuiThemeFontWeights; +} + +/** + * Title styles + */ + +export interface _EuiThemeTitle { + /** + * A font weight key for setting the base weight for titles and headings + */ + weight: keyof _EuiThemeFontWeights; +} + +/* + * Font + */ + +export type _EuiThemeFont = _EuiThemeFontBase & { + scale: _EuiThemeFontScales; + /** + * @see {@link https://eui.elastic.co/#/theming/typography/values%23font-weight | Reference} for more information + */ + weight: _EuiThemeFontWeights; + body: _EuiThemeBody; + title: _EuiThemeTitle; +}; diff --git a/packages/eui-theme-common/src/index.ts b/packages/eui-theme-common/src/index.ts new file mode 100644 index 00000000000..05e235c669b --- /dev/null +++ b/packages/eui-theme-common/src/index.ts @@ -0,0 +1,12 @@ +/* + * 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 * from './global_styling'; + +export * from './types'; +export * from './utils'; diff --git a/packages/eui-theme-common/src/types.ts b/packages/eui-theme-common/src/types.ts new file mode 100644 index 00000000000..68c72d586df --- /dev/null +++ b/packages/eui-theme-common/src/types.ts @@ -0,0 +1,56 @@ +/* + * 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. + */ + +/* TODO: duplicated types from /eui/src/components/common - extract to shared location */ + +/** + * Like `keyof typeof`, but for getting values instead of keys + * ValueOf + * Results in `'value1' | 'value2'` + */ +export type ValueOf = T[keyof T]; + +/** + * Replaces all properties on any type as optional, includes nested types + * + * @example + * ```ts + * interface Person { + * name: string; + * age?: number; + * spouse: Person; + * children: Person[]; + * } + * type PartialPerson = RecursivePartial; + * // results in + * interface PartialPerson { + * name?: string; + * age?: number; + * spouse?: RecursivePartial; + * children?: RecursivePartial[] + * } + * ``` + */ +export type RecursivePartial = { + [P in keyof T]?: T[P] extends NonAny[] // checks for nested any[] + ? T[P] + : T[P] extends readonly NonAny[] // checks for nested ReadonlyArray + ? T[P] + : T[P] extends Array + ? Array> + : T[P] extends ReadonlyArray + ? ReadonlyArray> + : T[P] extends Set // checks for Sets + ? Set> + : T[P] extends Map // checks for Maps + ? Map> + : T[P] extends NonAny // checks for primitive values + ? T[P] + : RecursivePartial; // recurse for all non-array and non-primitive values +}; +type NonAny = number | boolean | string | symbol | null; diff --git a/packages/eui/src/services/theme/utils.test.ts b/packages/eui-theme-common/src/utils.test.ts similarity index 100% rename from packages/eui/src/services/theme/utils.test.ts rename to packages/eui-theme-common/src/utils.test.ts diff --git a/packages/eui-theme-common/src/utils.ts b/packages/eui-theme-common/src/utils.ts new file mode 100644 index 00000000000..caa529ebd48 --- /dev/null +++ b/packages/eui-theme-common/src/utils.ts @@ -0,0 +1,392 @@ +/* + * 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 { + EuiThemeColorMode, + EuiThemeColorModeInverse, + EuiThemeColorModeStandard, + EuiThemeModifications, + EuiThemeSystem, + EuiThemeShape, + EuiThemeComputed, + COLOR_MODES_STANDARD, + COLOR_MODES_INVERSE, +} from './global_styling'; + +export const DEFAULT_COLOR_MODE = COLOR_MODES_STANDARD.light; + +/** + * Returns whether the parameter is an object + * @param {any} obj - Anything + */ +const isObject = (obj: any) => obj && typeof obj === 'object'; + +/** + * Returns whether the provided color mode is `inverse` + * @param {string} colorMode - `light`, `dark`, or `inverse` + */ +export const isInverseColorMode = ( + colorMode?: string +): colorMode is EuiThemeColorModeInverse => { + return colorMode === COLOR_MODES_INVERSE; +}; + +/** + * Returns the color mode configured in the current EuiThemeProvider. + * Returns the parent color mode if none is explicity set. + * @param {string} colorMode - `light`, `dark`, or `inverse` + * @param {string} parentColorMode - `LIGHT` or `DARK`; used as the fallback + */ +export const getColorMode = ( + colorMode?: EuiThemeColorMode, + parentColorMode?: EuiThemeColorModeStandard +): EuiThemeColorModeStandard => { + if (colorMode == null) { + return parentColorMode || DEFAULT_COLOR_MODE; + } + const mode = colorMode.toUpperCase() as + | EuiThemeColorModeInverse + | EuiThemeColorModeStandard; + if (isInverseColorMode(mode)) { + return parentColorMode === COLOR_MODES_STANDARD.dark || + parentColorMode === undefined + ? COLOR_MODES_STANDARD.light + : COLOR_MODES_STANDARD.dark; + } else { + return mode; + } +}; + +/** + * Returns a value at a given path on an object. + * If `colorMode` is provided, will scope the value to the appropriate color mode key (LIGHT\DARK) + * @param {object} model - Object + * @param {string} _path - Dot-notated string to a path on the object + * @param {string} colorMode - `light` or `dark` + */ +export const getOn = ( + model: { [key: string]: any }, + _path: string, + colorMode?: EuiThemeColorModeStandard +) => { + const path = _path.split('.'); + let node = model; + while (path.length) { + const segment = path.shift()!; + + if (node.hasOwnProperty(segment) === false) { + if ( + colorMode && + node.hasOwnProperty(colorMode) === true && + node[colorMode].hasOwnProperty(segment) === true + ) { + if (node[colorMode][segment] instanceof Computed) { + node = node[colorMode][segment].getValue(null, {}, node, colorMode); + } else { + node = node[colorMode][segment]; + } + } else { + return undefined; + } + } else { + if (node[segment] instanceof Computed) { + node = node[segment].getValue(null, {}, node, colorMode); + } else { + node = node[segment]; + } + } + } + + return node; +}; + +/** + * Sets a value at a given path on an object. + * @param {object} model - Object + * @param {string} _path - Dot-notated string to a path on the object + * @param {any} string - The value to set + */ +export const setOn = ( + model: { [key: string]: any }, + _path: string, + value: any +) => { + const path = _path.split('.'); + const propertyName = path.pop()!; + let node = model; + + while (path.length) { + const segment = path.shift()!; + if (node.hasOwnProperty(segment) === false) { + node[segment] = {}; + } + node = node[segment]; + } + + node[propertyName] = value; + return true; +}; + +/** + * Creates a class to store the `computer` method and its eventual parameters. + * Allows for on-demand computation with up-to-date parameters via `getValue` method. + * @constructor + * @param {function} computer - Function to be computed + * @param {string | array} dependencies - Dependencies passed to the `computer` as parameters + */ +export class Computed { + constructor( + public computer: (...values: any[]) => T, + public dependencies: string | string[] = [] + ) {} + + /** + * Executes the `computer` method with the current state of the theme + * by taking into account previously computed values and modifications. + * @param {Proxy | object} base - Computed or uncomputed theme + * @param {Proxy | object} modifications - Theme value overrides + * @param {object} working - Partially computed theme + * @param {string} colorMode - `light` or `dark` + */ + getValue( + base: EuiThemeSystem | EuiThemeShape | null, + modifications: EuiThemeModifications = {}, + working: Partial, + colorMode?: EuiThemeColorModeStandard + ) { + if (!this.dependencies.length) { + return this.computer(working); + } + if (!Array.isArray(this.dependencies)) { + return this.computer( + getOn(working, this.dependencies) ?? + getOn(modifications, this.dependencies, colorMode) ?? + (base ? getOn(base, this.dependencies, colorMode) : working) + ); + } + return this.computer( + this.dependencies.map((dependency) => { + return ( + getOn(working, dependency) ?? + getOn(modifications, dependency, colorMode) ?? + (base ? getOn(base, dependency, colorMode) : working) + ); + }) + ); + } +} + +/** + * Returns a Class (`Computed`) that stores the arbitrary computer method + * and references to its optional dependecies. + * @param {function} computer - Arbitrary method to be called at compute time. + * @param {string | array} dependencies - Values that will be provided to `computer` at compute time. + */ +export function computed(computer: (value: EuiThemeComputed) => T): T; +export function computed( + computer: (value: any[]) => T, + dependencies: string[] +): T; +export function computed( + computer: (value: any) => T, + dependencies: string +): T; +export function computed( + comp: ((value: T) => T) | ((value: any) => T) | ((value: any[]) => T), + dep?: string | string[] +) { + return new Computed(comp, dep); +} + +/** + * Type guard to check for a Computed object based on object shape + * without relying on the Computed class directly + */ +const isComputedLike = (key: object): key is Computed => { + if (typeof key !== 'object' || Array.isArray(key)) return false; + + return key.hasOwnProperty('dependencies') && key.hasOwnProperty('computer'); +}; + +/** + * Takes an uncomputed theme, and computes and returns all values taking + * into consideration value overrides and configured color mode. + * Overrides take precedence, and only values in the current color mode + * are computed and returned. + * @param {Proxy} base - Object to transform into Proxy + * @param {Proxy | object} over - Unique identifier or name + * @param {string} colorMode - `light` or `dark` + */ +export const getComputed = ( + base: EuiThemeSystem, + over: Partial>, + colorMode: EuiThemeColorModeStandard +): EuiThemeComputed => { + const output: Partial = { themeName: base.key }; + + function loop( + base: { [key: string]: any }, + over: { [key: string]: any }, + checkExisting: boolean = false, + path?: string + ) { + Object.keys(base).forEach((key) => { + let newPath = path ? `${path}.${key}` : `${key}`; + // @ts-expect-error `key` is not necessarily a colorMode key + if ([...Object.values(COLOR_MODES_STANDARD), colorMode].includes(key)) { + if (key !== colorMode) { + return; + } else { + const colorModeSegment = new RegExp( + `(\\.${colorMode}\\b)|(\\b${colorMode}\\.)` + ); + newPath = newPath.replace(colorModeSegment, ''); + } + } + const existing = checkExisting && getOn(output, newPath); + if (!existing || isObject(existing)) { + // NOTE: the class type check for Computed is not true for themes created externally; + // we additionally check on the object shape to confirm a Computed value + const baseValue = + base[key] instanceof Computed || isComputedLike(base[key]) + ? base[key].getValue(base.root, over.root, output, colorMode) + : base[key]; + const overValue = + over[key] instanceof Computed || isComputedLike(over[key]) + ? over[key].getValue(base.root, over.root, output, colorMode) + : over[key]; + if (isObject(baseValue) && !Array.isArray(baseValue)) { + loop(baseValue, overValue ?? {}, checkExisting, newPath); + } else { + setOn(output, newPath, overValue ?? baseValue); + } + } + }); + } + // Compute standard theme values and apply overrides + loop(base, over); + // Compute and apply extension values only + loop(over, {}, true); + return output as EuiThemeComputed; +}; + +/** + * Builds a Proxy with a custom `handler` designed to self-reference values + * and prevent arbitrary value overrides. + * @param {object} model - Object to transform into Proxy + * @param {string} key - Unique identifier or name + */ +export const buildTheme = (model: T, key: string) => { + const handler: ProxyHandler> = { + getPrototypeOf(target) { + return Reflect.getPrototypeOf(target.model); + }, + + setPrototypeOf(target, prototype) { + return Reflect.setPrototypeOf(target.model, prototype); + }, + + isExtensible(target) { + return Reflect.isExtensible(target); + }, + + preventExtensions(target) { + return Reflect.preventExtensions(target.model); + }, + + getOwnPropertyDescriptor(target, key) { + return Reflect.getOwnPropertyDescriptor(target.model, key); + }, + + defineProperty(target, property, attributes) { + return Reflect.defineProperty(target.model, property, attributes); + }, + + has(target, property) { + return Reflect.has(target.model, property); + }, + + get(_target, property) { + if (property === 'key') { + return _target[property]; + } + + // prevent Safari from locking up when the proxy is used in dev tools + // as it doesn't support getPrototypeOf + if (property === '__proto__') return {}; + + const target = property === 'root' ? _target : _target.model || _target; + // @ts-ignore `string` index signature + const value = target[property]; + if (isObject(value) && !Array.isArray(value)) { + return new Proxy( + { + model: value, + root: _target.root, + key: `_${_target.key}`, + }, + handler + ); + } else { + return value; + } + }, + + set(target: any) { + return target; + }, + + deleteProperty(target: any) { + return target; + }, + + ownKeys(target) { + return Reflect.ownKeys(target.model); + }, + + apply(target: any) { + return target; + }, + + construct(target: any) { + return target; + }, + }; + const themeProxy = new Proxy({ model, root: model, key }, handler); + + return themeProxy; +}; + +/** + * Deeply merges two objects, using `source` values whenever possible. + * @param {object} _target - Object with fallback values + * @param {object} source - Object with desired values + */ +export const mergeDeep = ( + _target: { [key: string]: any }, + source: { [key: string]: any } = {} +) => { + const target = { ..._target }; + + if (!isObject(target) || !isObject(source)) { + return source; + } + + Object.keys(source).forEach((key) => { + const targetValue = target[key]; + const sourceValue = source[key]; + + if (isObject(targetValue) && isObject(sourceValue)) { + target[key] = mergeDeep({ ...targetValue }, { ...sourceValue }); + } else { + target[key] = sourceValue; + } + }); + + return target; +}; diff --git a/packages/eui-theme-common/tsconfig.cjs.json b/packages/eui-theme-common/tsconfig.cjs.json new file mode 100644 index 00000000000..6becea42efa --- /dev/null +++ b/packages/eui-theme-common/tsconfig.cjs.json @@ -0,0 +1,29 @@ +{ + "$schema": "https://json.schemastore.org/tsconfig", + "compilerOptions": { + "rootDir": "src", + "outDir": "lib/cjs", + "target": "es6", + "module": "CommonJS", + "lib": [ + "es6", + "DOM" + ], + "moduleResolution": "Node", + "declaration": true, + "sourceMap": true, + "noEmitHelpers": true, + "incremental": true, + "esModuleInterop": true, + "strict": true, + "skipLibCheck": true, + "tsBuildInfoFile": "lib/cjs/.tsbuildinfo", + "importHelpers": false, + }, + "include": [ + "src" + ], + "exclude": [ + "node_modules" + ], +} \ No newline at end of file diff --git a/packages/eui-theme-common/tsconfig.json b/packages/eui-theme-common/tsconfig.json new file mode 100644 index 00000000000..31450bf12d6 --- /dev/null +++ b/packages/eui-theme-common/tsconfig.json @@ -0,0 +1,28 @@ +{ + "$schema": "https://json.schemastore.org/tsconfig", + "compilerOptions": { + "rootDir": "src", + "outDir": "lib/esm", + "target": "ES2020", + "module": "ESNext", + "lib": [ + "ESNext", + "DOM" + ], + "moduleResolution": "Node", + "declaration": true, + "sourceMap": true, + "noEmitHelpers": true, + "incremental": true, + "esModuleInterop": true, + "strict": true, + "skipLibCheck": true, + "tsBuildInfoFile": "lib/esm/.tsbuildinfo" + }, + "include": [ + "src", + ], + "exclude": [ + "node_modules" + ], +} \ No newline at end of file diff --git a/packages/eui-theme-common/tsconfig.types.json b/packages/eui-theme-common/tsconfig.types.json new file mode 100644 index 00000000000..54e2031daae --- /dev/null +++ b/packages/eui-theme-common/tsconfig.types.json @@ -0,0 +1,13 @@ +{ + "extends": "./tsconfig.cjs.json", + "compilerOptions": { + "outDir": "lib/cjs", + "declaration": true, + "declarationMap": true, + "isolatedModules": false, + "noEmit": false, + "allowJs": false, + "emitDeclarationOnly": true + }, + "exclude": ["node_modules", "**/*.test.ts"] +} \ No newline at end of file diff --git a/packages/eui/.storybook/decorator.tsx b/packages/eui/.storybook/decorator.tsx index 6b78a2e2353..d30f8df311d 100644 --- a/packages/eui/.storybook/decorator.tsx +++ b/packages/eui/.storybook/decorator.tsx @@ -6,12 +6,37 @@ * Side Public License, v 1. */ -import React, { useState, useMemo, FunctionComponent } from 'react'; +import React, { + useState, + useMemo, + FunctionComponent, + useEffect, + useCallback, +} from 'react'; import { css } from '@emotion/react'; import type { Preview } from '@storybook/react'; +import { EuiThemeBorealis } from '@elastic/eui-theme-borealis'; import { EuiThemeColorMode } from '../src/services'; import { EuiProvider, EuiProviderProps } from '../src/components/provider'; +import { EuiThemeAmsterdam } from '../src/themes'; + +const EXPERIMENTAL_THEMES = [ + { + text: 'Borealis', + value: EuiThemeBorealis.key, + provider: EuiThemeBorealis, + }, +]; + +export const AVAILABLE_THEMES = [ + { + text: 'Amsterdam', + value: EuiThemeAmsterdam.key, + provider: EuiThemeAmsterdam, + }, + ...EXPERIMENTAL_THEMES, +]; /** * Primary EuiProvider decorator to wrap around all stories @@ -20,8 +45,9 @@ import { EuiProvider, EuiProviderProps } from '../src/components/provider'; export const EuiProviderDecorator: FunctionComponent< EuiProviderProps<{}> & { writingMode: WritingModes; + themeName: string; } -> = ({ children, writingMode, ...euiProviderProps }) => { +> = ({ children, writingMode, themeName, theme, ...euiProviderProps }) => { // Append portals into Storybook's root div (rather than ) // so that loki correctly captures them for VRT screenshots const [sibling, setPortalSibling] = useState(null); @@ -39,8 +65,28 @@ export const EuiProviderDecorator: FunctionComponent< [writingMode] ); + const getTheme = useCallback(() => { + return AVAILABLE_THEMES.find((t) => themeName?.includes(t.value)); + }, [themeName]); + + const [_theme, setTheme] = useState(getTheme); + + useEffect(() => { + if (!themeName || theme) return; + + setTheme(getTheme); + }, [themeName, theme, getTheme]); + + const euiThemeProp = { + theme: theme ?? _theme?.provider, + }; + return ( - +
{portalInsert && children}
@@ -122,3 +168,18 @@ export const euiProviderDecoratorGlobals: Preview['globalTypes'] = { }, }, }; + +export const euiProviderDecoratorGlobalsExperimental = { + theme: { + description: 'Theme for EuiProvider', + defaultValue: EuiThemeAmsterdam.key, + toolbar: { + title: 'Theme', + items: [ + { value: EuiThemeAmsterdam.key, title: 'Amsterdam', icon: 'box' }, + { value: EuiThemeBorealis.key, title: 'Borealis', icon: 'box' }, + ], + dynamicTitle: true, + }, + }, +}; diff --git a/packages/eui/.storybook/preview.tsx b/packages/eui/.storybook/preview.tsx index c34435f5032..adf24f7f409 100644 --- a/packages/eui/.storybook/preview.tsx +++ b/packages/eui/.storybook/preview.tsx @@ -37,8 +37,13 @@ setEuiDevProviderWarning('error'); /** * Custom global decorators */ +import { isExperimentalThemeEnabled } from '../src/themes'; import { customJsxDecorator } from './addons/code-snippet/decorators/jsx_decorator'; -import { EuiProviderDecorator, euiProviderDecoratorGlobals } from './decorator'; +import { + EuiProviderDecorator, + euiProviderDecoratorGlobals, + euiProviderDecoratorGlobalsExperimental, +} from './decorator'; const preview: Preview = { decorators: [ @@ -48,12 +53,18 @@ const preview: Preview = { colorMode={context.globals.colorMode} {...(context.componentId === 'theming-euiprovider' && context.args)} writingMode={context.globals.writingMode} + themeName={context.globals.theme} > ), ], - globalTypes: { ...euiProviderDecoratorGlobals }, + globalTypes: isExperimentalThemeEnabled() + ? { + ...euiProviderDecoratorGlobals, + ...euiProviderDecoratorGlobalsExperimental, + } + : { ...euiProviderDecoratorGlobals }, parameters: { backgrounds: { disable: true }, // Use colorMode instead options: { diff --git a/packages/eui/package.json b/packages/eui/package.json index 0bd97e3668d..9a46fd5971a 100644 --- a/packages/eui/package.json +++ b/packages/eui/package.json @@ -16,8 +16,9 @@ ], "scripts": { "start": "cross-env BABEL_MODULES=false webpack serve --config=src-docs/webpack.config.js", + "build:workspaces": "yarn workspaces foreach -Rti --from @elastic/eui-theme-common run build && yarn workspaces foreach -Rti --from @elastic/eui --exclude @elastic/eui --exclude @elastic/eui-theme-common run build", "build-docs": "cross-env BABEL_MODULES=false cross-env NODE_ENV=production NODE_OPTIONS=--max-old-space-size=4096 webpack --config=src-docs/webpack.config.js", - "build": "yarn extract-i18n-strings && node ./scripts/compile-clean.js && node ./scripts/compile-eui.js && yarn compile-scss", + "build": "node ./scripts/compile-i18n-strings.js && node ./scripts/compile-clean.js && node ./scripts/compile-eui.js && yarn compile-scss", "build-pack": "yarn build && npm pack", "compile-icons": "node ./scripts/compile-icons.js && prettier --write --loglevel=warn \"./src/components/icon/assets/**/*.tsx\"", "compile-scss": "node ./scripts/compile-scss.js", @@ -30,7 +31,7 @@ "test": "yarn lint && yarn test-unit", "test-ci": "yarn test && yarn test-cypress", "test-unit": "node ./scripts/test-unit", - "test-staged": "yarn lint && node scripts/test-staged.js", + "test-staged": "yarn build:workspaces && yarn lint && node scripts/test-staged.js", "test-cypress": "node ./scripts/test-cypress", "test-cypress-dev": "yarn test-cypress --dev", "test-cypress-a11y": "yarn test-cypress --a11y", @@ -103,6 +104,8 @@ "@cypress/webpack-dev-server": "^1.7.0", "@elastic/charts": "^64.1.0", "@elastic/datemath": "^5.0.3", + "@elastic/eui-theme-borealis": "workspace:^", + "@elastic/eui-theme-common": "workspace:^", "@emotion/babel-preset-css-prop": "^11.11.0", "@emotion/cache": "^11.11.0", "@emotion/css": "^11.11.0", @@ -254,6 +257,8 @@ }, "peerDependencies": { "@elastic/datemath": "^5.0.2", + "@elastic/eui-theme-borealis": "0.0.1", + "@elastic/eui-theme-common": "0.0.1", "@emotion/css": "11.x", "@emotion/react": "11.x", "@types/react": "^16.9 || ^17.0 || ^18.0", diff --git a/packages/eui/scripts/compile-i18n-strings.js b/packages/eui/scripts/compile-i18n-strings.js new file mode 100644 index 00000000000..f948577d2fd --- /dev/null +++ b/packages/eui/scripts/compile-i18n-strings.js @@ -0,0 +1,26 @@ +/* + * 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. + */ + +const { execSync } = require('child_process'); +const chalk = require('chalk'); +const yargs = require('yargs/yargs'); +const { hideBin } = require('yargs/helpers'); + +const { NODE_ENV } = process.env; + +const info = chalk.white; +const log = chalk.grey; + +if (NODE_ENV !== 'production') return; + +const command = 'yarn extract-i18n-strings'; + +console.log(log(command)); +execSync(command, { + stdio: 'inherit', +}); diff --git a/packages/eui/scripts/deploy/build_docs b/packages/eui/scripts/deploy/build_docs index ab1207b3337..8e700a97b0b 100755 --- a/packages/eui/scripts/deploy/build_docs +++ b/packages/eui/scripts/deploy/build_docs @@ -12,4 +12,4 @@ docker run \ --volume "$PWD":/app \ --workdir /app \ "$DOCKER_BASE_IMAGE" \ - bash -c 'yarn && yarn --cwd packages/eui build && yarn --cwd packages/eui build-docs && yarn --cwd packages/eui build-storybook' + bash -c 'yarn && yarn --cwd packages/eui build:workspaces && yarn --cwd packages/eui build && yarn --cwd packages/eui build-docs && yarn --cwd packages/eui build-storybook' diff --git a/packages/eui/src-docs/src/components/guide_theme_selector/guide_theme_selector.tsx b/packages/eui/src-docs/src/components/guide_theme_selector/guide_theme_selector.tsx index bc9d4449b9d..0f99e738533 100644 --- a/packages/eui/src-docs/src/components/guide_theme_selector/guide_theme_selector.tsx +++ b/packages/eui/src-docs/src/components/guide_theme_selector/guide_theme_selector.tsx @@ -6,7 +6,8 @@ import { useEuiTheme, useIsWithinBreakpoints, } from '../../../../src/services'; -import { EUI_THEME, EUI_THEMES } from '../../../../src/themes'; +import { EUI_THEME } from '../../../../src/themes'; +import { AVAILABLE_THEMES } from '../with_theme/theme_context'; import { ThemeContext } from '../with_theme'; // @ts-ignore Not TS @@ -51,15 +52,15 @@ const GuideThemeSelectorComponent: React.FunctionComponent< const systemColorMode = useEuiTheme().colorMode.toLowerCase(); const currentTheme: EUI_THEME = - EUI_THEMES.find( + AVAILABLE_THEMES.find( (theme) => theme.value === (context.theme ?? systemColorMode) - ) || EUI_THEMES[0]; + ) || AVAILABLE_THEMES[0]; const getIconType = (value: EUI_THEME['value']) => { return value === currentTheme.value ? 'check' : 'empty'; }; - const items = EUI_THEMES.map((theme) => { + const items = AVAILABLE_THEMES.map((theme) => { return ( value); +const THEME_NAMES = AVAILABLE_THEMES.map(({ value }) => value); const THEME_LANGS = theme_languages.map(({ id }) => id); type ThemeContextType = { diff --git a/packages/eui/src-docs/src/index.js b/packages/eui/src-docs/src/index.js index a69a07e3613..d9b072fccf4 100644 --- a/packages/eui/src-docs/src/index.js +++ b/packages/eui/src-docs/src/index.js @@ -4,6 +4,8 @@ import { Provider } from 'react-redux'; import { HashRouter, Switch, Route, Redirect } from 'react-router-dom'; import { Helmet } from 'react-helmet'; +import { isExperimentalThemeEnabled } from '../../src/themes'; + import configureStore from './store/configure_store'; import { AppContext } from './views/app_context'; @@ -13,13 +15,25 @@ import { NotFoundView } from './views/not_found/not_found_view'; import { registerTheme, ExampleContext } from './services'; import Routes from './routes'; +import { + ThemeProvider, + AVAILABLE_THEMES, +} from './components/with_theme/theme_context'; + +// TODO: update SCSS files for new theme once available import themeLight from './theme_light.scss'; import themeDark from './theme_dark.scss'; -import { ThemeProvider } from './components/with_theme/theme_context'; +import themeNewLight from './theme_new_light.scss'; +import themeNewDark from './theme_new_dark.scss'; registerTheme('light', [themeLight]); registerTheme('dark', [themeDark]); +if (isExperimentalThemeEnabled()) { + registerTheme(AVAILABLE_THEMES[2].value, [themeNewLight]); + registerTheme(AVAILABLE_THEMES[3].value, [themeNewDark]); +} + // Set up app // Whether the docs app should be wrapped in diff --git a/packages/eui/src-docs/src/theme_new_dark.scss b/packages/eui/src-docs/src/theme_new_dark.scss new file mode 100644 index 00000000000..7c76c518a04 --- /dev/null +++ b/packages/eui/src-docs/src/theme_new_dark.scss @@ -0,0 +1,7 @@ +@import 'node_modules/@elastic/eui-theme-borealis/src/theme_dark'; +@import './components/index'; +@import './services/playground/index'; +@import './views/index'; + +// Elastic charts +@import '~@elastic/charts/dist/theme'; diff --git a/packages/eui/src-docs/src/theme_new_light.scss b/packages/eui/src-docs/src/theme_new_light.scss new file mode 100644 index 00000000000..1bee3ff7412 --- /dev/null +++ b/packages/eui/src-docs/src/theme_new_light.scss @@ -0,0 +1,7 @@ +@import 'node_modules/@elastic/eui-theme-borealis/src/theme_light'; +@import './components/index'; +@import './services/playground/index'; +@import './views/index'; + +// Elastic charts +@import '~@elastic/charts/dist/theme'; diff --git a/packages/eui/src-docs/src/views/app_context.js b/packages/eui/src-docs/src/views/app_context.js index 729f4c94079..42645f5b2f1 100644 --- a/packages/eui/src-docs/src/views/app_context.js +++ b/packages/eui/src-docs/src/views/app_context.js @@ -11,7 +11,7 @@ import { setEuiDevProviderWarning, euiStylisPrefixer, } from '../../../src/services'; -import { EUI_THEMES } from '../../../src/themes'; +import { AVAILABLE_THEMES } from '../components/with_theme/theme_context'; import favicon16Prod from '../images/favicon/prod/favicon-16x16.png'; import favicon32Prod from '../images/favicon/prod/favicon-32x32.png'; @@ -55,9 +55,13 @@ export const AppContext = ({ children }) => { default: generalEmotionCache, utility: utilityCache, }} - theme={EUI_THEMES.find((t) => t.value === theme)?.provider} + theme={AVAILABLE_THEMES.find((t) => t.value === theme)?.provider} colorMode={ - theme ? (theme.includes('light') ? 'light' : 'dark') : undefined + theme + ? theme.toLowerCase().includes('light') + ? 'light' + : 'dark' + : undefined } > diff --git a/packages/eui/src/components/common.ts b/packages/eui/src/components/common.ts index 2f09a052349..4f88e2324c5 100644 --- a/packages/eui/src/components/common.ts +++ b/packages/eui/src/components/common.ts @@ -17,6 +17,8 @@ import { } from 'react'; import { Interpolation, Theme } from '@emotion/react'; +export type { RecursivePartial, ValueOf } from '@elastic/eui-theme-common'; + export interface CommonProps { className?: string; 'aria-label'?: string; @@ -50,13 +52,6 @@ export function keysOf(obj: T): K[] { return Object.keys(obj) as K[]; } -/** - * Like `keyof typeof`, but for getting values instead of keys - * ValueOf - * Results in `'value1' | 'value2'` - */ -export type ValueOf = T[keyof T]; - export type PropsOf = C extends FunctionComponent ? SFCProps : C extends FunctionComponent @@ -203,43 +198,3 @@ export type PropsForButton = T & { onClick?: MouseEventHandler; } & ButtonHTMLAttributes & P; - -/** - * Replaces all properties on any type as optional, includes nested types - * - * @example - * ```ts - * interface Person { - * name: string; - * age?: number; - * spouse: Person; - * children: Person[]; - * } - * type PartialPerson = RecursivePartial; - * // results in - * interface PartialPerson { - * name?: string; - * age?: number; - * spouse?: RecursivePartial; - * children?: RecursivePartial[] - * } - * ``` - */ -export type RecursivePartial = { - [P in keyof T]?: T[P] extends NonAny[] // checks for nested any[] - ? T[P] - : T[P] extends readonly NonAny[] // checks for nested ReadonlyArray - ? T[P] - : T[P] extends Array - ? Array> - : T[P] extends ReadonlyArray - ? ReadonlyArray> - : T[P] extends Set // checks for Sets - ? Set> - : T[P] extends Map // checks for Maps - ? Map> - : T[P] extends NonAny // checks for primitive values - ? T[P] - : RecursivePartial; // recurse for all non-array and non-primitive values -}; -type NonAny = number | boolean | string | symbol | null; diff --git a/packages/eui/src/global_styling/functions/_index.scss b/packages/eui/src/global_styling/functions/_index.scss index de8260b2bba..7e1a8b1710d 100644 --- a/packages/eui/src/global_styling/functions/_index.scss +++ b/packages/eui/src/global_styling/functions/_index.scss @@ -1,5 +1 @@ -// Math needs to be first in the load order -@import 'math'; - -// Using math, we have functions to manipulate contrast / luminosity for accessibility -@import 'colors'; +@import 'node_modules/@elastic/eui-theme-common/src/global_styling/functions/index'; diff --git a/packages/eui/src/global_styling/functions/size.ts b/packages/eui/src/global_styling/functions/size.ts index 66e6ab507d3..24652cc3ec1 100644 --- a/packages/eui/src/global_styling/functions/size.ts +++ b/packages/eui/src/global_styling/functions/size.ts @@ -6,19 +6,4 @@ * Side Public License, v 1. */ -/** - * Calculates the `px` value based on a scale multiplier - * @param scale - The font scale multiplier - * * - * @param themeOrBase - Theme base value - * * - * @returns string - Rem unit aligned to baseline - */ - -export const sizeToPixel = - (scale: number = 1) => - (themeOrBase: number | { base: number; [key: string]: any }) => { - const base = - typeof themeOrBase === 'object' ? themeOrBase.base : themeOrBase; - return `${base * scale}px`; - }; +export { sizeToPixel } from '@elastic/eui-theme-common'; diff --git a/packages/eui/src/global_styling/index.scss b/packages/eui/src/global_styling/index.scss index 8497b0ecf68..eadeca15647 100644 --- a/packages/eui/src/global_styling/index.scss +++ b/packages/eui/src/global_styling/index.scss @@ -1,12 +1,3 @@ // Core -// Functions need to be first, since we use them in our variables and mixin definitions -@import 'functions/index'; - -// Variables come next, and are used in some mixins -@import 'variables/index'; - -// Mixins provide generic code expansion through helpers -@import 'mixins/index'; - -// The reset file has moved to global_styles.tsx +@import 'node_modules/@elastic/eui-theme-common/src/global_styling/index'; diff --git a/packages/eui/src/global_styling/variables/_animations.scss b/packages/eui/src/global_styling/variables/_animations.scss index 0ffe44346dd..b6e40a79f6d 100644 --- a/packages/eui/src/global_styling/variables/_animations.scss +++ b/packages/eui/src/global_styling/variables/_animations.scss @@ -1,13 +1,6 @@ // Animations -$euiAnimSlightBounce: cubic-bezier(.34, 1.61, .7, 1) !default; -$euiAnimSlightResistance: cubic-bezier(.694, .0482, .335, 1) !default; - -$euiAnimSpeedExtraFast: 90ms !default; -$euiAnimSpeedFast: 150ms !default; -$euiAnimSpeedNormal: 250ms !default; -$euiAnimSpeedSlow: 350ms !default; -$euiAnimSpeedExtraSlow: 500ms !default; +@import 'node_modules/@elastic/eui-theme-common/src/global_styling/variables/animations' // Keyframe animation declarations can be found in // utility/animations.scss diff --git a/packages/eui/src/global_styling/variables/_borders.scss b/packages/eui/src/global_styling/variables/_borders.scss index 6fa0216ff3b..818f5807e6f 100644 --- a/packages/eui/src/global_styling/variables/_borders.scss +++ b/packages/eui/src/global_styling/variables/_borders.scss @@ -1,11 +1,3 @@ // Borders -$euiBorderWidthThin: 1px !default; -$euiBorderWidthThick: 2px !default; - -$euiBorderColor: $euiColorLightShade !default; -$euiBorderRadius: $euiSizeS * .75 !default; -$euiBorderRadiusSmall: $euiSizeS * .5 !default; -$euiBorderThick: $euiBorderWidthThick solid $euiBorderColor !default; -$euiBorderThin: $euiBorderWidthThin solid $euiBorderColor !default; -$euiBorderEditable: $euiBorderWidthThick dotted $euiBorderColor !default; +@import 'node_modules/@elastic/eui-theme-common/src/global_styling/variables/borders' diff --git a/packages/eui/src/global_styling/variables/_buttons.scss b/packages/eui/src/global_styling/variables/_buttons.scss index 4d4e8a5f0b1..288dca14d61 100644 --- a/packages/eui/src/global_styling/variables/_buttons.scss +++ b/packages/eui/src/global_styling/variables/_buttons.scss @@ -1,18 +1 @@ -$euiButtonHeight: $euiSizeXXL !default; -$euiButtonHeightSmall: $euiSizeXL !default; -$euiButtonHeightXSmall: $euiSizeL !default; - -// Modifier naming and colors. -$euiButtonTypes: ( - primary: $euiColorPrimary, - accent: $euiColorAccent, - success: $euiColorSuccess, - warning: $euiColorWarning, - danger: $euiColorDanger, - ghost: $euiColorGhost, // Ghost is special, and does not care about theming. - text: $euiColorDarkShade, // 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: $euiColorDisabledText; +@import 'node_modules/@elastic/eui-theme-common/src/global_styling/variables/buttons' diff --git a/packages/eui/src/global_styling/variables/_colors_vis.scss b/packages/eui/src/global_styling/variables/_colors_vis.scss index cfffdf5e55d..d935ffa7ebe 100644 --- a/packages/eui/src/global_styling/variables/_colors_vis.scss +++ b/packages/eui/src/global_styling/variables/_colors_vis.scss @@ -1,72 +1,3 @@ // Visualization colors -// stylelint-disable color-no-hex -// Maps allow for easier JSON usage -// Use map_merge($euiColorVisColors, $yourMap) to change individual colors after importing ths file -// The `behindText` variant is a direct copy of the hex output by the JS euiPaletteColorBlindBehindText() function -$euiPaletteColorBlind: ( - euiColorVis0: ( - graphic: #54B399, - behindText: #6DCCB1, - ), - euiColorVis1: ( - graphic: #6092C0, - behindText: #79AAD9, - ), - euiColorVis2: ( - graphic: #D36086, - behindText: #EE789D, - ), - euiColorVis3: ( - graphic: #9170B8, - behindText: #A987D1, - ), - euiColorVis4: ( - graphic: #CA8EAE, - behindText: #E4A6C7, - ), - euiColorVis5: ( - graphic: #D6BF57, - behindText: #F1D86F, - ), - euiColorVis6: ( - graphic: #B9A888, - behindText: #D2C0A0, - ), - euiColorVis7: ( - graphic: #DA8B45, - behindText: #F5A35C, - ), - euiColorVis8: ( - graphic: #AA6556, - behindText: #C47C6C, - ), - euiColorVis9: ( - graphic: #E7664C, - behindText: #FF7E62, - ) -) !default; - -$euiPaletteColorBlindKeys: map-keys($euiPaletteColorBlind); - -$euiColorVis0: map-get(map-get($euiPaletteColorBlind, 'euiColorVis0'), 'graphic') !default; -$euiColorVis1: map-get(map-get($euiPaletteColorBlind, 'euiColorVis1'), 'graphic') !default; -$euiColorVis2: map-get(map-get($euiPaletteColorBlind, 'euiColorVis2'), 'graphic') !default; -$euiColorVis3: map-get(map-get($euiPaletteColorBlind, 'euiColorVis3'), 'graphic') !default; -$euiColorVis4: map-get(map-get($euiPaletteColorBlind, 'euiColorVis4'), 'graphic') !default; -$euiColorVis5: map-get(map-get($euiPaletteColorBlind, 'euiColorVis5'), 'graphic') !default; -$euiColorVis6: map-get(map-get($euiPaletteColorBlind, 'euiColorVis6'), 'graphic') !default; -$euiColorVis7: map-get(map-get($euiPaletteColorBlind, 'euiColorVis7'), 'graphic') !default; -$euiColorVis8: map-get(map-get($euiPaletteColorBlind, 'euiColorVis8'), 'graphic') !default; -$euiColorVis9: map-get(map-get($euiPaletteColorBlind, 'euiColorVis9'), 'graphic') !default; - -$euiColorVis0_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis0'), 'behindText') !default; -$euiColorVis1_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis1'), 'behindText') !default; -$euiColorVis2_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis2'), 'behindText') !default; -$euiColorVis3_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis3'), 'behindText') !default; -$euiColorVis4_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis4'), 'behindText') !default; -$euiColorVis5_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis5'), 'behindText') !default; -$euiColorVis6_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis6'), 'behindText') !default; -$euiColorVis7_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis7'), 'behindText') !default; -$euiColorVis8_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis8'), 'behindText') !default; -$euiColorVis9_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis9'), 'behindText') !default; +@import 'node_modules/@elastic/eui-theme-common/src/global_styling/variables/colors_vis' diff --git a/packages/eui/src/global_styling/variables/_colors_vis.ts b/packages/eui/src/global_styling/variables/_colors_vis.ts index 4459b04ff8c..64dcfd86633 100644 --- a/packages/eui/src/global_styling/variables/_colors_vis.ts +++ b/packages/eui/src/global_styling/variables/_colors_vis.ts @@ -6,57 +6,4 @@ * Side Public License, v 1. */ -/** - * NOTE: These were quick conversions of their Sass counterparts. - * They have yet to be used/tested. - * TODO: Make the graphic version available from `euiPaletteColorBlind()` - */ - -// Maps allow for easier JSON usage -// Use map_merge(euiColorVisColors, $yourMap) to change individual colors after importing ths file -// The `behindText` variant is a direct copy of the hex output by the JS euiPaletteColorBlindBehindText() function -const euiPaletteColorBlind = { - euiColorVis0: { - graphic: '#54B399', - }, - euiColorVis1: { - graphic: '#6092C0', - }, - euiColorVis2: { - graphic: '#D36086', - }, - euiColorVis3: { - graphic: '#9170B8', - }, - euiColorVis4: { - graphic: '#CA8EAE', - }, - euiColorVis5: { - graphic: '#D6BF57', - }, - euiColorVis6: { - graphic: '#B9A888', - }, - euiColorVis7: { - graphic: '#DA8B45', - }, - euiColorVis8: { - graphic: '#AA6556', - }, - euiColorVis9: { - graphic: '#E7664C', - }, -}; - -export const colorVis = { - euiColorVis0: euiPaletteColorBlind.euiColorVis0.graphic, - euiColorVis1: euiPaletteColorBlind.euiColorVis1.graphic, - euiColorVis2: euiPaletteColorBlind.euiColorVis2.graphic, - euiColorVis3: euiPaletteColorBlind.euiColorVis3.graphic, - euiColorVis4: euiPaletteColorBlind.euiColorVis4.graphic, - euiColorVis5: euiPaletteColorBlind.euiColorVis5.graphic, - euiColorVis6: euiPaletteColorBlind.euiColorVis6.graphic, - euiColorVis7: euiPaletteColorBlind.euiColorVis7.graphic, - euiColorVis8: euiPaletteColorBlind.euiColorVis8.graphic, - euiColorVis9: euiPaletteColorBlind.euiColorVis9.graphic, -}; +export { colorVis } from '@elastic/eui-theme-common'; diff --git a/packages/eui/src/global_styling/variables/_font_weight.scss b/packages/eui/src/global_styling/variables/_font_weight.scss index f5dfd287835..152c64d8358 100644 --- a/packages/eui/src/global_styling/variables/_font_weight.scss +++ b/packages/eui/src/global_styling/variables/_font_weight.scss @@ -1,10 +1,4 @@ // Separated out to its own file for easy import into docs // Font weights -$euiFontWeightLight: 300 !default; -$euiFontWeightRegular: 400 !default; -$euiFontWeightMedium: 500 !default; -$euiFontWeightSemiBold: 600 !default; -$euiFontWeightBold: 700 !default; -$euiCodeFontWeightRegular: 400 !default; -$euiCodeFontWeightBold: 700 !default; +@import 'node_modules/@elastic/eui-theme-common/src/global_styling/variables/font_weight' diff --git a/packages/eui/src/global_styling/variables/_form.scss b/packages/eui/src/global_styling/variables/_form.scss index 49a4d620b11..cdf08ad78bf 100644 --- a/packages/eui/src/global_styling/variables/_form.scss +++ b/packages/eui/src/global_styling/variables/_form.scss @@ -1,21 +1,2 @@ -// Sizing -$euiFormMaxWidth: $euiSizeXXL * 10 !default; -$euiFormControlHeight: $euiSizeXXL !default; -$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; +// Form +@import 'node_modules/@elastic/eui-theme-common/src/global_styling/variables/form' diff --git a/packages/eui/src/global_styling/variables/_responsive.scss b/packages/eui/src/global_styling/variables/_responsive.scss index de6e8ca5b83..45e7a7c4531 100644 --- a/packages/eui/src/global_styling/variables/_responsive.scss +++ b/packages/eui/src/global_styling/variables/_responsive.scss @@ -1,9 +1 @@ -$euiBreakpoints: ( - 'xs': 0, - 's': 575px, - 'm': 768px, - 'l': 992px, - 'xl': 1200px -) !default; - -$euiBreakpointKeys: map-keys($euiBreakpoints); +@import 'node_modules/@elastic/eui-theme-common/src/global_styling/variables/responsive' diff --git a/packages/eui/src/global_styling/variables/_shadows.scss b/packages/eui/src/global_styling/variables/_shadows.scss index 05e445f27a1..14237af776b 100644 --- a/packages/eui/src/global_styling/variables/_shadows.scss +++ b/packages/eui/src/global_styling/variables/_shadows.scss @@ -1,2 +1,2 @@ // Shadows -$euiShadowColor: $euiColorInk !default; +@import 'node_modules/@elastic/eui-theme-common/src/global_styling/variables/shadows' diff --git a/packages/eui/src/global_styling/variables/_size.scss b/packages/eui/src/global_styling/variables/_size.scss index 29eca9c1b00..987c03b80f6 100644 --- a/packages/eui/src/global_styling/variables/_size.scss +++ b/packages/eui/src/global_styling/variables/_size.scss @@ -1,13 +1 @@ -$euiSize: 16px !default; - -$euiSizeXS: $euiSize * .25 !default; -$euiSizeS: $euiSize * .5 !default; -$euiSizeM: $euiSize * .75 !default; -$euiSizeL: $euiSize * 1.5 !default; -$euiSizeXL: $euiSize * 2 !default; -$euiSizeXXL: $euiSize * 2.5 !default; - -$euiScrollBar: $euiSize !default; -// Corner sizes are used as an inset border and therefore a smaller corner size means a larger thumb -$euiScrollBarCorner: $euiSizeXS !default; -$euiScrollBarCornerThin: $euiSizeS * .75 !default; +@import 'node_modules/@elastic/eui-theme-common/src/global_styling/variables/size' diff --git a/packages/eui/src/global_styling/variables/_states.scss b/packages/eui/src/global_styling/variables/_states.scss index fba4cc59caa..581a81bb59b 100644 --- a/packages/eui/src/global_styling/variables/_states.scss +++ b/packages/eui/src/global_styling/variables/_states.scss @@ -1,14 +1 @@ -// Colors -$euiFocusRingColor: rgba($euiColorPrimary, .3) !default; -$euiFocusRingAnimStartColor: rgba($euiColorPrimary, 0) !default; -$euiFocusRingAnimStartSize: 6px !default; -$euiFocusRingAnimStartSizeLarge: 10px !default; - -// Sizing -$euiFocusRingSizeLarge: $euiSizeXS !default; -$euiFocusRingSize: $euiFocusRingSizeLarge * .75 !default; - -// Transparency -$euiFocusTransparency: lightOrDarkTheme(.1, .2) !default; -$euiFocusTransparencyPercent: lightOrDarkTheme(90%, 80%) !default; -$euiFocusBackgroundColor: tintOrShade($euiColorPrimary, $euiFocusTransparencyPercent, $euiFocusTransparencyPercent) !default; +@import 'node_modules/@elastic/eui-theme-common/src/global_styling/variables/states' \ No newline at end of file diff --git a/packages/eui/src/global_styling/variables/_typography.scss b/packages/eui/src/global_styling/variables/_typography.scss index 1ca62f3248c..70a15446af9 100644 --- a/packages/eui/src/global_styling/variables/_typography.scss +++ b/packages/eui/src/global_styling/variables/_typography.scss @@ -1,75 +1 @@ -// Families -$euiFontFamily: 'Inter', BlinkMacSystemFont, Helvetica, Arial, sans-serif !default; -$euiCodeFontFamily: 'Roboto Mono', Menlo, Courier, monospace !default; - -// Careful using ligatures. Code editors like ACE will often error because of width calculations -$euiFontFeatureSettings: 'calt' 1, 'kern' 1, 'liga' 1 !default; - -// Font sizes -- scale is loosely based on Major Third (1.250) -$euiTextScale: 2.25, 1.75, 1.25, 1.125, 1, .875, .75 !default; - -$euiFontSize: $euiSize !default; // 5th position in scale -$euiFontSizeXS: $euiFontSize * nth($euiTextScale, 7) !default; // 12px -$euiFontSizeS: $euiFontSize * nth($euiTextScale, 6) !default; // 14px -$euiFontSizeM: $euiFontSize * nth($euiTextScale, 4) !default; // 18px -$euiFontSizeL: $euiFontSize * nth($euiTextScale, 3) !default; // 20px -$euiFontSizeXL: $euiFontSize * nth($euiTextScale, 2) !default; // 28px -$euiFontSizeXXL: $euiFontSize * nth($euiTextScale, 1) !default; // 36px - -// Line height -$euiLineHeight: 1.5 !default; -$euiBodyLineHeight: 1 !default; - -// Normally functions are imported before variables in `_index.scss` files -// But because they need to consume some typography variables they need to live here -@function convertToRem($size) { - @return #{$size / $euiFontSize}rem; -} - -// Our base gridline is at 1/2 the font-size, ensure line-heights stay on that gridline. -// EX: A proper line-height for text is 1.5 times the font-size. -// If our base font size (euiFontSize) is 16, our baseline is 8 (16*1.5 / 3). To ensure the -// text stays on the baseline, we pass a multiplier to calculate a line-height in rems. -@function lineHeightFromBaseline($multiplier: 3) { - @return convertToRem(($euiFontSize / 2) * $multiplier); -} - -// Titles map -// Lists all the properties per EuiTitle size that then gets looped through to create the selectors. -// The map allows for tokenization and easier customization per theme, otherwise you'd have to override the selectors themselves -$euiTitles: ( - 'xxxs': ( - 'font-size': $euiFontSizeXS, - 'line-height': lineHeightFromBaseline(3), - 'font-weight': $euiFontWeightBold, - ), - 'xxs': ( - 'font-size': $euiFontSizeS, - 'line-height': lineHeightFromBaseline(3), - 'font-weight': $euiFontWeightBold, - ), - 'xs': ( - 'font-size': $euiFontSize, - 'line-height': lineHeightFromBaseline(3), - 'font-weight': $euiFontWeightSemiBold, - 'letter-spacing': -.02em, - ), - 's': ( - 'font-size': $euiFontSizeL, - 'line-height': lineHeightFromBaseline(4), - 'font-weight': $euiFontWeightMedium, - 'letter-spacing': -.025em, - ), - 'm': ( - 'font-size': $euiFontSizeXL, - 'line-height': lineHeightFromBaseline(5), - 'font-weight': $euiFontWeightLight, - 'letter-spacing': -.04em, - ), - 'l': ( - 'font-size': $euiFontSizeXXL, - 'line-height': lineHeightFromBaseline(6), - 'font-weight': $euiFontWeightLight, - 'letter-spacing': -.03em, - ), -) !default; +@import 'node_modules/@elastic/eui-theme-common/src/global_styling/variables/typography' \ No newline at end of file diff --git a/packages/eui/src/global_styling/variables/_z_index.scss b/packages/eui/src/global_styling/variables/_z_index.scss index 2448a34c61a..2c2769dbd85 100644 --- a/packages/eui/src/global_styling/variables/_z_index.scss +++ b/packages/eui/src/global_styling/variables/_z_index.scss @@ -1,34 +1,2 @@ // Z-Index - -// Remember that z-index is relative to parent and based on the stacking context. -// z-indexes only compete against other z-indexes when they exist as children of -// that shared parent. - -// That means a popover with a settings of 2, will still show above a modal -// with a setting of 100, if it is within that modal and not besides it. - -// Generally that means it's a good idea to consider things added to this file -// as competitive only as siblings. - -// https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context - -$euiZLevel0: 0; -$euiZLevel1: 1000; -$euiZLevel2: 2000; -$euiZLevel3: 3000; -$euiZLevel4: 4000; -$euiZLevel5: 5000; -$euiZLevel6: 6000; -$euiZLevel7: 7000; -$euiZLevel8: 8000; -$euiZLevel9: 9000; - -$euiZToastList: $euiZLevel9; -$euiZModal: $euiZLevel8; -$euiZMask: $euiZLevel6; -$euiZNavigation: $euiZLevel6; -$euiZContentMenu: $euiZLevel2; -$euiZHeader: $euiZLevel1; -$euiZFlyout: $euiZHeader; -$euiZMaskBelowHeader: $euiZHeader; -$euiZContent: $euiZLevel0; +@import 'node_modules/@elastic/eui-theme-common/src/global_styling/variables/z_index' diff --git a/packages/eui/src/global_styling/variables/animations.ts b/packages/eui/src/global_styling/variables/animations.ts index 46bce009c92..94a1f17c3d5 100644 --- a/packages/eui/src/global_styling/variables/animations.ts +++ b/packages/eui/src/global_styling/variables/animations.ts @@ -5,62 +5,15 @@ * in compliance with, at your election, the Elastic License 2.0 or the Server * Side Public License, v 1. */ -import { CSSProperties } from 'react'; -/** - * A constant storing the `prefers-reduced-motion` media query - * so that when it is turned off, animations are not run. - */ -export const euiCanAnimate = - '@media screen and (prefers-reduced-motion: no-preference)'; - -/** - * A constant storing the `prefers-reduced-motion` media query that will - * only apply the content if the setting is off (reduce). - */ -export const euiCantAnimate = - '@media screen and (prefers-reduced-motion: reduce)'; - -/** - * Speeds / Durations / Delays - */ - -export const EuiThemeAnimationSpeeds = [ - 'extraFast', - 'fast', - 'normal', - 'slow', - 'extraSlow', -] as const; - -export type _EuiThemeAnimationSpeed = (typeof EuiThemeAnimationSpeeds)[number]; - -export type _EuiThemeAnimationSpeeds = { - /** - Default value: 90ms */ - extraFast: CSSProperties['animationDuration']; - /** - Default value: 150ms */ - fast: CSSProperties['animationDuration']; - /** - Default value: 250ms */ - normal: CSSProperties['animationDuration']; - /** - Default value: 350ms */ - slow: CSSProperties['animationDuration']; - /** - Default value: 500ms */ - extraSlow: CSSProperties['animationDuration']; -}; - -/** - * Easings / Timing functions - */ - -export const EuiThemeAnimationEasings = ['bounce', 'resistance'] as const; - -export type _EuiThemeAnimationEasing = - (typeof EuiThemeAnimationEasings)[number]; - -export type _EuiThemeAnimationEasings = Record< - _EuiThemeAnimationEasing, - CSSProperties['animationTimingFunction'] ->; - -export type _EuiThemeAnimation = _EuiThemeAnimationEasings & - _EuiThemeAnimationSpeeds; +export { + euiCanAnimate, + euiCantAnimate, + EuiThemeAnimationSpeeds, + EuiThemeAnimationEasings, + type _EuiThemeAnimationSpeed, + type _EuiThemeAnimationSpeeds, + type _EuiThemeAnimationEasing, + type _EuiThemeAnimationEasings, + type _EuiThemeAnimation, +} from '@elastic/eui-theme-common'; diff --git a/packages/eui/src/global_styling/variables/borders.ts b/packages/eui/src/global_styling/variables/borders.ts index 10eda82eb9b..642575add78 100644 --- a/packages/eui/src/global_styling/variables/borders.ts +++ b/packages/eui/src/global_styling/variables/borders.ts @@ -6,69 +6,11 @@ * Side Public License, v 1. */ -import { CSSProperties } from 'react'; -import { ColorModeSwitch } from '../../services/theme/types'; - -export interface _EuiThemeBorderWidthValues { - /** - * Thinnest width for border - * - Default value: 1px - */ - thin: CSSProperties['borderWidth']; - /** - * Thickest width for border - * - Default value: 2px - */ - thick: CSSProperties['borderWidth']; -} - -export interface _EuiThemeBorderRadiusValues { - /** - * Primary corner radius size - * - Default value: 6px - */ - medium: CSSProperties['borderRadius']; - /** - * Small corner radius size - * - Default value: 4px - */ - small: CSSProperties['borderRadius']; -} - -export interface _EuiThemeBorderColorValues { - /** - * Color for all borders; Default is `colors.lightShade` - */ - color: ColorModeSwitch; -} - -export interface _EuiThemeBorderValues extends _EuiThemeBorderColorValues { - /** - * Varied thicknesses for borders - */ - width: _EuiThemeBorderWidthValues; - /** - * Varied border radii - */ - radius: _EuiThemeBorderRadiusValues; -} - -export interface _EuiThemeBorderTypes { - /** - * Full `border` property string computed using `border.width.thin` and `border.color` - * - Default value: 1px solid [colors.lightShade] - */ - thin: CSSProperties['border']; - /** - * Full `border` property string computed using `border.width.thick` and `border.color` - * - Default value: 2px solid [colors.lightShade] - */ - thick: CSSProperties['border']; - /** - * Full editable style `border` property string computed using `border.width.thick` and `border.color` - * - Default value: 2px dotted [colors.lightShade] - */ - editable: CSSProperties['border']; -} - -export type _EuiThemeBorder = _EuiThemeBorderValues & _EuiThemeBorderTypes; +export type { + _EuiThemeBorderWidthValues, + _EuiThemeBorderRadiusValues, + _EuiThemeBorderColorValues, + _EuiThemeBorderValues, + _EuiThemeBorderTypes, + _EuiThemeBorder, +} from '@elastic/eui-theme-common'; diff --git a/packages/eui/src/global_styling/variables/breakpoint.ts b/packages/eui/src/global_styling/variables/breakpoint.ts index 68aef1fba38..85032f57d98 100644 --- a/packages/eui/src/global_styling/variables/breakpoint.ts +++ b/packages/eui/src/global_styling/variables/breakpoint.ts @@ -6,23 +6,8 @@ * Side Public License, v 1. */ -export const EuiThemeBreakpoints = ['xs', 's', 'm', 'l', 'xl'] as const; - -// This type cannot be a string enum / must be a generic string -// in case consumers add custom breakpoint sizes, such as xxl or xxs -export type _EuiThemeBreakpoint = string; - -// Explicitly list out each key so we can document default values -// via JSDoc (which is available to devs in IDE via intellisense) -export type _EuiThemeBreakpoints = Record<_EuiThemeBreakpoint, number> & { - /** - Default value: 0 */ - xs: number; - /** - Default value: 575 */ - s: number; - /** - Default value: 768 */ - m: number; - /** - Default value: 992 */ - l: number; - /** - Default value: 1200 */ - xl: number; -}; +export { + EuiThemeBreakpoints, + type _EuiThemeBreakpoint, + type _EuiThemeBreakpoints, +} from '@elastic/eui-theme-common'; diff --git a/packages/eui/src/global_styling/variables/colors.ts b/packages/eui/src/global_styling/variables/colors.ts index ab15e23d166..48e23b66f82 100644 --- a/packages/eui/src/global_styling/variables/colors.ts +++ b/packages/eui/src/global_styling/variables/colors.ts @@ -6,154 +6,13 @@ * Side Public License, v 1. */ -import { - ColorModeSwitch, - StrictColorModeSwitch, -} from '../../services/theme/types'; - -/** - * Top 5 colors - */ -export type _EuiThemeBrandColors = { - /** - * Main brand color and used for most **call to actions** like buttons and links. - */ - primary: ColorModeSwitch; - /** - * Pulls attention to key indicators like **notifications** or number of selections. - */ - accent: ColorModeSwitch; - /** - * Used for **positive** messages/graphics and additive actions. - */ - success: ColorModeSwitch; - /** - * Used for **warnings** and actions that have a potential to be destructive. - */ - warning: ColorModeSwitch; - /** - * Used for **negative** messages/graphics like errors and destructive actions. - */ - danger: ColorModeSwitch; -}; - -/** - * Every brand color must have a contrast computed text equivelant - */ -export type _EuiThemeBrandTextColors = { - /** - * Typically computed against `colors.primary` - */ - primaryText: ColorModeSwitch; - /** - * Typically computed against `colors.accent` - */ - accentText: ColorModeSwitch; - /** - * Typically computed against `colors.success` - */ - successText: ColorModeSwitch; - /** - * Typically computed against `colors.warning` - */ - warningText: ColorModeSwitch; - /** - * Typically computed against `colors.danger` - */ - dangerText: ColorModeSwitch; -}; - -export type _EuiThemeShadeColors = { - /** - * Used as the background color of primary **page content and panels** including modals and flyouts. - */ - emptyShade: ColorModeSwitch; - /** - * Used to lightly shade areas that contain **secondary content** or contain panel-like components. - */ - lightestShade: ColorModeSwitch; - /** - * Used for most **borders** and dividers (horizontal rules). - */ - lightShade: ColorModeSwitch; - /** - * The middle gray for all themes; this is the base for `colors.subdued`. - */ - mediumShade: ColorModeSwitch; - /** - * Slightly subtle graphic color - */ - darkShade: ColorModeSwitch; - /** - * Used as the **text** color and the background color for **inverted components** like tooltips and the control bar. - */ - darkestShade: ColorModeSwitch; - /** - * The opposite of `emptyShade` - */ - fullShade: ColorModeSwitch; -}; - -export type _EuiThemeTextColors = { - /** - * Computed against `colors.darkestShade` - */ - text: ColorModeSwitch; - /** - * Computed against `colors.text` - */ - title: ColorModeSwitch; - /** - * Computed against `colors.mediumShade` - */ - subduedText: ColorModeSwitch; - /** - * Computed against `colors.primaryText` - */ - link: 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**. - */ - body: ColorModeSwitch; - /** - * Used to **highlight text** when matching against search strings - */ - highlight: ColorModeSwitch; - /** - * Computed against `colors.darkestShade` - */ - disabled: ColorModeSwitch; - /** - * Computed against `colors.disabled` - */ - disabledText: ColorModeSwitch; - /** - * The base color for shadows that gets `transparentized` - * at a value based on the `colorMode` and then layered. - */ - shadow: ColorModeSwitch; -}; - -export type _EuiThemeConstantColors = { - /** - * Purest **white** - */ - ghost: string; - /** - * Purest **black** - */ - ink: string; -}; - -export type _EuiThemeColorsMode = _EuiThemeBrandColors & - _EuiThemeBrandTextColors & - _EuiThemeShadeColors & - _EuiThemeSpecialColors & - _EuiThemeTextColors; - -export type _EuiThemeColors = StrictColorModeSwitch<_EuiThemeColorsMode> & - _EuiThemeConstantColors; +export type { + _EuiThemeBrandColors, + _EuiThemeBrandTextColors, + _EuiThemeShadeColors, + _EuiThemeTextColors, + _EuiThemeSpecialColors, + _EuiThemeConstantColors, + _EuiThemeColorsMode, + _EuiThemeColors, +} from '@elastic/eui-theme-common'; diff --git a/packages/eui/src/global_styling/variables/levels.ts b/packages/eui/src/global_styling/variables/levels.ts index 7d38c71791b..bf808d9abc7 100644 --- a/packages/eui/src/global_styling/variables/levels.ts +++ b/packages/eui/src/global_styling/variables/levels.ts @@ -6,55 +6,8 @@ * Side Public License, v 1. */ -import { CSSProperties } from 'react'; - -/** - * Z-Index - * - * Remember that z-index is relative to parent and based on the stacking context. - * z-indexes only compete against other z-indexes when they exist as children of - * that shared parent. - * - * That means a popover with a settings of 2, will still show above a modal - * with a setting of 100, if it is within that modal and not besides it. - * - * Generally that means it's a good idea to consider things added to this file - * as competitive only as siblings. - * - * https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context - */ - -export const EuiThemeLevels = [ - 'toast', - 'modal', - 'mask', - 'navigation', - 'menu', - 'header', - 'flyout', - 'maskBelowHeader', - 'content', -] as const; - -export type _EuiThemeLevel = (typeof EuiThemeLevels)[number]; - -export type _EuiThemeLevels = { - /** - Default value: 9000 */ - toast: NonNullable; - /** - Default value: 8000 */ - modal: NonNullable; - /** - Default value: 6000 */ - mask: NonNullable; - /** - Default value: 6000 */ - navigation: NonNullable; - /** - Default value: 2000 */ - menu: NonNullable; - /** - Default value: 1000 */ - header: NonNullable; - /** - Default value: 1000 */ - flyout: NonNullable; - /** - Default value: 1000 */ - maskBelowHeader: NonNullable; - /** - Default value: 0 */ - content: NonNullable; -}; +export { + EuiThemeLevels, + type _EuiThemeLevel, + type _EuiThemeLevels, +} from '@elastic/eui-theme-common'; diff --git a/packages/eui/src/global_styling/variables/shadow.ts b/packages/eui/src/global_styling/variables/shadow.ts index 7761fbdb9a0..69aeb0d5846 100644 --- a/packages/eui/src/global_styling/variables/shadow.ts +++ b/packages/eui/src/global_styling/variables/shadow.ts @@ -6,23 +6,9 @@ * Side Public License, v 1. */ -export const EuiThemeShadowSizes = ['xs', 's', 'm', 'l', 'xl'] as const; - -export type _EuiThemeShadowSize = (typeof EuiThemeShadowSizes)[number]; - -/** - * Shadow t-shirt sizes descriptions - */ -export const _EuiShadowSizesDescriptions: Record<_EuiThemeShadowSize, string> = - { - xs: 'Very subtle shadow used on small components.', - s: 'Adds subtle depth, usually used in conjunction with a border.', - m: 'Used on small sized portalled content like popovers.', - l: 'Primary shadow used in most cases to add visible depth.', - xl: 'Very large shadows used for large portalled style containers like modals and flyouts.', - }; - -export interface _EuiThemeShadowCustomColor { - color?: string; - property?: 'box-shadow' | 'filter'; -} +export { + EuiThemeShadowSizes, + _EuiShadowSizesDescriptions, + type _EuiThemeShadowSize, + type _EuiThemeShadowCustomColor, +} from '@elastic/eui-theme-common'; diff --git a/packages/eui/src/global_styling/variables/size.ts b/packages/eui/src/global_styling/variables/size.ts index 98428346b61..da3c3c1eecb 100644 --- a/packages/eui/src/global_styling/variables/size.ts +++ b/packages/eui/src/global_styling/variables/size.ts @@ -6,42 +6,9 @@ * Side Public License, v 1. */ -export type _EuiThemeBase = number; - -export const EuiThemeSizes = [ - 'xxs', - 'xs', - 's', - 'm', - 'base', - 'l', - 'xl', - 'xxl', - 'xxxl', - 'xxxxl', -] as const; - -export type _EuiThemeSize = (typeof EuiThemeSizes)[number]; - -export type _EuiThemeSizes = { - /** - Default value: 2px */ - xxs: string; - /** - Default value: 4px */ - xs: string; - /** - Default value: 8px */ - s: string; - /** - Default value: 12px */ - m: string; - /** - Default value: 16px */ - base: string; - /** - Default value: 24px */ - l: string; - /** - Default value: 32px */ - xl: string; - /** - Default value: 40px */ - xxl: string; - /** - Default value: 48px */ - xxxl: string; - /** - Default value: 64px */ - xxxxl: string; -}; +export { + EuiThemeSizes, + type _EuiThemeBase, + type _EuiThemeSize, + type _EuiThemeSizes, +} from '@elastic/eui-theme-common'; diff --git a/packages/eui/src/global_styling/variables/states.ts b/packages/eui/src/global_styling/variables/states.ts index 4ec8bf0d87d..205c6e7e7b9 100644 --- a/packages/eui/src/global_styling/variables/states.ts +++ b/packages/eui/src/global_styling/variables/states.ts @@ -6,28 +6,4 @@ * Side Public License, v 1. */ -import { ColorModeSwitch } from '../../services/theme/types'; -import { CSSProperties } from 'react'; - -export interface _EuiThemeFocus { - /** - * Default color of the focus ring, some components may override this property - * - Default value: currentColor - */ - color: ColorModeSwitch; - /** - * Thickness of the outline - * - Default value: 2px - */ - width: CSSProperties['borderWidth']; - /** - * Used to transparentize the focus background color - * - Default value: { LIGHT: 0.1, DARK: 0.2 } - */ - transparency: ColorModeSwitch; - /** - * Default focus background color. Not all components set a background color on focus - * - Default value: `colors.primary` computed with `focus.transparency` - */ - backgroundColor: ColorModeSwitch; -} +export type { _EuiThemeFocus } from '@elastic/eui-theme-common'; diff --git a/packages/eui/src/global_styling/variables/typography.ts b/packages/eui/src/global_styling/variables/typography.ts index 80ebbc8b1cb..dfd57186191 100644 --- a/packages/eui/src/global_styling/variables/typography.ts +++ b/packages/eui/src/global_styling/variables/typography.ts @@ -6,141 +6,17 @@ * Side Public License, v 1. */ -import { CSSProperties } from 'react'; - -/** - * Font units of measure - */ - -export const EuiThemeFontUnits = ['rem', 'px', 'em'] as const; - -export type _EuiThemeFontUnit = (typeof EuiThemeFontUnits)[number]; - -/* - * Font scale - */ - -export const EuiThemeFontScales = [ - 'xxxs', - 'xxs', - 'xs', - 's', - 'm', - 'l', - 'xl', - 'xxl', -] as const; - -export type _EuiThemeFontScale = (typeof EuiThemeFontScales)[number]; - -export type _EuiThemeFontScales = Record<_EuiThemeFontScale, number>; - -/* - * Font base settings - */ - -export type _EuiThemeFontBase = { - /** - * The whole font family stack for all parts of the UI. - * We encourage only customizing the first font in the stack. - */ - family: string; - /** - * The font family used for monospace UI elements like EuiCode - */ - familyCode?: string; - /** - * The font family used for serif UI elements like blockquotes within EuiText - */ - familySerif?: string; - /** - * Controls advanced features OpenType fonts. - * https://developer.mozilla.org/en-US/docs/Web/CSS/font-feature-settings - */ - featureSettings?: string; - /** - * Sets the default units used for font size & line height set by UI components - * like EuiText or EuiTitle. Defaults to `rem`. - * - * NOTE: This may overridden by some internal usages, e.g. - * EuiText's `relative` size which must use `em`. - * - * @default 'rem' - */ - defaultUnits: _EuiThemeFontUnit; - /** - * A computed number that is 1/4 of `base` - */ - baseline: number; - /** - * Establishes the ideal line-height percentage, but it is the `baseline` integer that establishes the final pixel/rem value - */ - lineHeightMultiplier: number; -}; - -/* - * Font weights - */ - -export const EuiThemeFontWeights = [ - 'light', - 'regular', - 'medium', - 'semiBold', - 'bold', -] as const; - -export type _EuiThemeFontWeight = (typeof EuiThemeFontWeights)[number]; - -export type _EuiThemeFontWeights = { - /** - Default value: 300 */ - light: CSSProperties['fontWeight']; - /** - Default value: 400 */ - regular: CSSProperties['fontWeight']; - /** - Default value: 500 */ - medium: CSSProperties['fontWeight']; - /** - Default value: 600 */ - semiBold: CSSProperties['fontWeight']; - /** - Default value: 700 */ - bold: CSSProperties['fontWeight']; -}; - -/** - * Body / Base styles - */ - -export interface _EuiThemeBody { - /** - * A sizing key from one of the font scales to set as the base body font-size - */ - scale: _EuiThemeFontScale; - /** - * A font weight key for setting the base body weight - */ - weight: keyof _EuiThemeFontWeights; -} - -/** - * Title styles - */ - -export interface _EuiThemeTitle { - /** - * A font weight key for setting the base weight for titles and headings - */ - weight: keyof _EuiThemeFontWeights; -} - -/* - * Font - */ - -export type _EuiThemeFont = _EuiThemeFontBase & { - scale: _EuiThemeFontScales; - /** - * @see {@link https://eui.elastic.co/#/theming/typography/values%23font-weight | Reference} for more information - */ - weight: _EuiThemeFontWeights; - body: _EuiThemeBody; - title: _EuiThemeTitle; -}; +export { + EuiThemeFontUnits, + EuiThemeFontScales, + EuiThemeFontWeights, + type _EuiThemeFontUnit, + type _EuiThemeFontScale, + type _EuiThemeFontScales, + type _EuiThemeFontBase, + type _EuiThemeFontWeight, + type _EuiThemeFontWeights, + type _EuiThemeBody, + type _EuiThemeTitle, + type _EuiThemeFont, +} from '@elastic/eui-theme-common'; diff --git a/packages/eui/src/services/theme/provider.tsx b/packages/eui/src/services/theme/provider.tsx index c5a6957e8c3..e0678603074 100644 --- a/packages/eui/src/services/theme/provider.tsx +++ b/packages/eui/src/services/theme/provider.tsx @@ -20,6 +20,7 @@ import React, { import { Global, type CSSObject } from '@emotion/react'; import isEqual from 'lodash/isEqual'; +import { EUI_EXPERIMENTAL_THEME_ENABLED_KEY } from '../../themes/themes'; import type { CommonProps } from '../../components/common'; import { cloneElementWithCss } from '../emotion'; import { css, cx } from '../emotion/css'; @@ -117,6 +118,18 @@ export const EuiThemeProvider = ({ ) ); + // TODO: temp. testing code only, remove once obsolete + useEffect(() => { + if (process.env.NODE_ENV === 'development') { + const isEnabled = + localStorage.getItem(EUI_EXPERIMENTAL_THEME_ENABLED_KEY) != null; + + if (!isEnabled) { + localStorage.setItem(EUI_EXPERIMENTAL_THEME_ENABLED_KEY, 'true'); + } + } + }, []); + useEffect(() => { const newSystem = _system || parentSystem; if (prevSystemKey.current !== newSystem.key) { diff --git a/packages/eui/src/services/theme/types.ts b/packages/eui/src/services/theme/types.ts index 04b93b40f20..a8912db19ed 100644 --- a/packages/eui/src/services/theme/types.ts +++ b/packages/eui/src/services/theme/types.ts @@ -5,104 +5,18 @@ * in compliance with, at your election, the Elastic License 2.0 or the Server * Side Public License, v 1. */ - -import type { CSSObject } from '@emotion/react'; - -import { RecursivePartial, ValueOf } from '../../components/common'; -import { _EuiThemeAnimation } from '../../global_styling/variables/animations'; -import { _EuiThemeBreakpoints } from '../../global_styling/variables/breakpoint'; -import { _EuiThemeBorder } from '../../global_styling/variables/borders'; -import { _EuiThemeColors } from '../../global_styling/variables/colors'; -import { - _EuiThemeBase, - _EuiThemeSizes, -} from '../../global_styling/variables/size'; -import { _EuiThemeFont } from '../../global_styling/variables/typography'; -import { _EuiThemeFocus } from '../../global_styling/variables/states'; -import { _EuiThemeLevels } from '../../global_styling/variables/levels'; - -export const COLOR_MODES_STANDARD = { - light: 'LIGHT', - dark: 'DARK', -} as const; -export const COLOR_MODES_INVERSE = 'INVERSE' as const; - -export type EuiThemeColorModeInverse = typeof COLOR_MODES_INVERSE; -export type EuiThemeColorModeStandard = ValueOf; -export type EuiThemeColorMode = - | 'light' - | 'dark' - | EuiThemeColorModeStandard - | 'inverse' - | EuiThemeColorModeInverse; - -export type ColorModeSwitch = - | { - [key in EuiThemeColorModeStandard]: T; - } - | T; - -export type StrictColorModeSwitch = { - [key in EuiThemeColorModeStandard]: T; -}; - -export type EuiThemeShape = { - colors: _EuiThemeColors; - /** - Default value: 16 */ - base: _EuiThemeBase; - /** - * @see {@link https://eui.elastic.co/#/theming/sizing | Reference} for more information - */ - size: _EuiThemeSizes; - font: _EuiThemeFont; - border: _EuiThemeBorder; - focus: _EuiThemeFocus; - animation: _EuiThemeAnimation; - breakpoint: _EuiThemeBreakpoints; - levels: _EuiThemeLevels; -}; - -export type EuiThemeSystem = { - root: EuiThemeShape & T; - model: EuiThemeShape & T; - key: string; -}; - -export type EuiThemeModifications = RecursivePartial; - -export type ComputedThemeShape< - T, - P = string | number | bigint | boolean | null | undefined -> = T extends P | ColorModeSwitch - ? T extends ColorModeSwitch - ? X extends P - ? X - : { - [K in keyof (X & - Exclude< - T, - keyof X | keyof StrictColorModeSwitch - >)]: ComputedThemeShape< - (X & Exclude)[K], - P - >; - } - : T - : { - [K in keyof T]: ComputedThemeShape; - }; - -export type EuiThemeComputed = ComputedThemeShape & { - themeName: string; -}; - -export type EuiThemeNested = { - isGlobalTheme: boolean; - hasDifferentColorFromGlobalTheme: boolean; - bodyColor: string; - colorClassName: string; - setGlobalCSSVariables: Function; - globalCSSVariables?: CSSObject; - setNearestThemeCSSVariables: Function; - themeCSSVariables?: CSSObject; -}; +export { + COLOR_MODES_STANDARD, + COLOR_MODES_INVERSE, + type EuiThemeColorModeInverse, + type EuiThemeColorModeStandard, + type EuiThemeColorMode, + type ColorModeSwitch, + type StrictColorModeSwitch, + type EuiThemeShape, + type EuiThemeSystem, + type EuiThemeModifications, + type ComputedThemeShape, + type EuiThemeComputed, + type EuiThemeNested, +} from '@elastic/eui-theme-common'; diff --git a/packages/eui/src/services/theme/utils.ts b/packages/eui/src/services/theme/utils.ts index c7c9c5216d0..e86ad5c659d 100644 --- a/packages/eui/src/services/theme/utils.ts +++ b/packages/eui/src/services/theme/utils.ts @@ -6,375 +6,15 @@ * Side Public License, v 1. */ -import { - EuiThemeColorMode, - EuiThemeColorModeInverse, - EuiThemeColorModeStandard, - EuiThemeModifications, - EuiThemeSystem, - EuiThemeShape, - EuiThemeComputed, - COLOR_MODES_STANDARD, - COLOR_MODES_INVERSE, -} from './types'; - -export const DEFAULT_COLOR_MODE = COLOR_MODES_STANDARD.light; - -/** - * Returns whether the parameter is an object - * @param {any} obj - Anything - */ -const isObject = (obj: any) => obj && typeof obj === 'object'; - -/** - * Returns whether the provided color mode is `inverse` - * @param {string} colorMode - `light`, `dark`, or `inverse` - */ -export const isInverseColorMode = ( - colorMode?: string -): colorMode is EuiThemeColorModeInverse => { - return colorMode === COLOR_MODES_INVERSE; -}; - -/** - * Returns the color mode configured in the current EuiThemeProvider. - * Returns the parent color mode if none is explicity set. - * @param {string} colorMode - `light`, `dark`, or `inverse` - * @param {string} parentColorMode - `LIGHT` or `DARK`; used as the fallback - */ -export const getColorMode = ( - colorMode?: EuiThemeColorMode, - parentColorMode?: EuiThemeColorModeStandard -): EuiThemeColorModeStandard => { - if (colorMode == null) { - return parentColorMode || DEFAULT_COLOR_MODE; - } - const mode = colorMode.toUpperCase() as - | EuiThemeColorModeInverse - | EuiThemeColorModeStandard; - if (isInverseColorMode(mode)) { - return parentColorMode === COLOR_MODES_STANDARD.dark || - parentColorMode === undefined - ? COLOR_MODES_STANDARD.light - : COLOR_MODES_STANDARD.dark; - } else { - return mode; - } -}; - -/** - * Returns a value at a given path on an object. - * If `colorMode` is provided, will scope the value to the appropriate color mode key (LIGHT\DARK) - * @param {object} model - Object - * @param {string} _path - Dot-notated string to a path on the object - * @param {string} colorMode - `light` or `dark` - */ -export const getOn = ( - model: { [key: string]: any }, - _path: string, - colorMode?: EuiThemeColorModeStandard -) => { - const path = _path.split('.'); - let node = model; - while (path.length) { - const segment = path.shift()!; - - if (node.hasOwnProperty(segment) === false) { - if ( - colorMode && - node.hasOwnProperty(colorMode) === true && - node[colorMode].hasOwnProperty(segment) === true - ) { - if (node[colorMode][segment] instanceof Computed) { - node = node[colorMode][segment].getValue(null, null, node, colorMode); - } else { - node = node[colorMode][segment]; - } - } else { - return undefined; - } - } else { - if (node[segment] instanceof Computed) { - node = node[segment].getValue(null, null, node, colorMode); - } else { - node = node[segment]; - } - } - } - - return node; -}; - -/** - * Sets a value at a given path on an object. - * @param {object} model - Object - * @param {string} _path - Dot-notated string to a path on the object - * @param {any} string - The value to set - */ -export const setOn = ( - model: { [key: string]: any }, - _path: string, - value: any -) => { - const path = _path.split('.'); - const propertyName = path.pop()!; - let node = model; - - while (path.length) { - const segment = path.shift()!; - if (node.hasOwnProperty(segment) === false) { - node[segment] = {}; - } - node = node[segment]; - } - - node[propertyName] = value; - return true; -}; - -/** - * Creates a class to store the `computer` method and its eventual parameters. - * Allows for on-demand computation with up-to-date parameters via `getValue` method. - * @constructor - * @param {function} computer - Function to be computed - * @param {string | array} dependencies - Dependencies passed to the `computer` as parameters - */ -export class Computed { - constructor( - public computer: (...values: any[]) => T, - public dependencies: string | string[] = [] - ) {} - - /** - * Executes the `computer` method with the current state of the theme - * by taking into account previously computed values and modifications. - * @param {Proxy | object} base - Computed or uncomputed theme - * @param {Proxy | object} modifications - Theme value overrides - * @param {object} working - Partially computed theme - * @param {string} colorMode - `light` or `dark` - */ - getValue( - base: EuiThemeSystem | EuiThemeShape, - modifications: EuiThemeModifications = {}, - working: EuiThemeComputed, - colorMode: EuiThemeColorModeStandard - ) { - if (!this.dependencies.length) { - return this.computer(working); - } - if (!Array.isArray(this.dependencies)) { - return this.computer( - getOn(working, this.dependencies) ?? - getOn(modifications, this.dependencies, colorMode) ?? - getOn(base, this.dependencies, colorMode) - ); - } - return this.computer( - this.dependencies.map((dependency) => { - return ( - getOn(working, dependency) ?? - getOn(modifications, dependency, colorMode) ?? - getOn(base, dependency, colorMode) - ); - }) - ); - } -} - -/** - * Returns a Class (`Computed`) that stores the arbitrary computer method - * and references to its optional dependecies. - * @param {function} computer - Arbitrary method to be called at compute time. - * @param {string | array} dependencies - Values that will be provided to `computer` at compute time. - */ -export function computed(computer: (value: EuiThemeComputed) => T): T; -export function computed( - computer: (value: any[]) => T, - dependencies: string[] -): T; -export function computed( - computer: (value: any) => T, - dependencies: string -): T; -export function computed( - comp: ((value: T) => T) | ((value: any) => T) | ((value: any[]) => T), - dep?: string | string[] -) { - return new Computed(comp, dep); -} - -/** - * Takes an uncomputed theme, and computes and returns all values taking - * into consideration value overrides and configured color mode. - * Overrides take precedence, and only values in the current color mode - * are computed and returned. - * @param {Proxy} base - Object to transform into Proxy - * @param {Proxy | object} over - Unique identifier or name - * @param {string} colorMode - `light` or `dark` - */ -export const getComputed = ( - base: EuiThemeSystem, - over: Partial>, - colorMode: EuiThemeColorModeStandard -): EuiThemeComputed => { - const output = { themeName: base.key }; - - function loop( - base: { [key: string]: any }, - over: { [key: string]: any }, - checkExisting: boolean = false, - path?: string - ) { - Object.keys(base).forEach((key) => { - let newPath = path ? `${path}.${key}` : `${key}`; - // @ts-expect-error `key` is not necessarily a colorMode key - if ([...Object.values(COLOR_MODES_STANDARD), colorMode].includes(key)) { - if (key !== colorMode) { - return; - } else { - const colorModeSegment = new RegExp( - `(\\.${colorMode}\\b)|(\\b${colorMode}\\.)` - ); - newPath = newPath.replace(colorModeSegment, ''); - } - } - const existing = checkExisting && getOn(output, newPath); - if (!existing || isObject(existing)) { - const baseValue = - base[key] instanceof Computed - ? base[key].getValue(base.root, over.root, output, colorMode) - : base[key]; - const overValue = - over[key] instanceof Computed - ? over[key].getValue(base.root, over.root, output, colorMode) - : over[key]; - if (isObject(baseValue) && !Array.isArray(baseValue)) { - loop(baseValue, overValue ?? {}, checkExisting, newPath); - } else { - setOn(output, newPath, overValue ?? baseValue); - } - } - }); - } - // Compute standard theme values and apply overrides - loop(base, over); - // Compute and apply extension values only - loop(over, {}, true); - return output as EuiThemeComputed; -}; - -/** - * Builds a Proxy with a custom `handler` designed to self-reference values - * and prevent arbitrary value overrides. - * @param {object} model - Object to transform into Proxy - * @param {string} key - Unique identifier or name - */ -export const buildTheme = (model: T, key: string) => { - const handler: ProxyHandler> = { - getPrototypeOf(target) { - return Reflect.getPrototypeOf(target.model); - }, - - setPrototypeOf(target, prototype) { - return Reflect.setPrototypeOf(target.model, prototype); - }, - - isExtensible(target) { - return Reflect.isExtensible(target); - }, - - preventExtensions(target) { - return Reflect.preventExtensions(target.model); - }, - - getOwnPropertyDescriptor(target, key) { - return Reflect.getOwnPropertyDescriptor(target.model, key); - }, - - defineProperty(target, property, attributes) { - return Reflect.defineProperty(target.model, property, attributes); - }, - - has(target, property) { - return Reflect.has(target.model, property); - }, - - get(_target, property) { - if (property === 'key') { - return _target[property]; - } - - // prevent Safari from locking up when the proxy is used in dev tools - // as it doesn't support getPrototypeOf - if (property === '__proto__') return {}; - - const target = property === 'root' ? _target : _target.model || _target; - // @ts-ignore `string` index signature - const value = target[property]; - if (isObject(value) && !Array.isArray(value)) { - return new Proxy( - { - model: value, - root: _target.root, - key: `_${_target.key}`, - }, - handler - ); - } else { - return value; - } - }, - - set(target: any) { - return target; - }, - - deleteProperty(target: any) { - return target; - }, - - ownKeys(target) { - return Reflect.ownKeys(target.model); - }, - - apply(target: any) { - return target; - }, - - construct(target: any) { - return target; - }, - }; - const themeProxy = new Proxy({ model, root: model, key }, handler); - - return themeProxy; -}; - -/** - * Deeply merges two objects, using `source` values whenever possible. - * @param {object} _target - Object with fallback values - * @param {object} source - Object with desired values - */ -export const mergeDeep = ( - _target: { [key: string]: any }, - source: { [key: string]: any } = {} -) => { - const target = { ..._target }; - - if (!isObject(target) || !isObject(source)) { - return source; - } - - Object.keys(source).forEach((key) => { - const targetValue = target[key]; - const sourceValue = source[key]; - - if (isObject(targetValue) && isObject(sourceValue)) { - target[key] = mergeDeep({ ...targetValue }, { ...sourceValue }); - } else { - target[key] = sourceValue; - } - }); - - return target; -}; +export { + DEFAULT_COLOR_MODE, + isInverseColorMode, + getColorMode, + getOn, + setOn, + Computed, + computed, + getComputed, + buildTheme, + mergeDeep, +} from '@elastic/eui-theme-common'; diff --git a/packages/eui/src/themes/index.ts b/packages/eui/src/themes/index.ts index cec3cda26c3..a77ffa51ee1 100644 --- a/packages/eui/src/themes/index.ts +++ b/packages/eui/src/themes/index.ts @@ -7,7 +7,11 @@ */ export type { EUI_THEME } from './themes'; -export { EUI_THEMES, isDefaultTheme } from './themes'; +export { + EUI_THEMES, + isDefaultTheme, + isExperimentalThemeEnabled, +} from './themes'; export { AMSTERDAM_NAME_KEY, EuiThemeAmsterdam } from './amsterdam/theme'; diff --git a/packages/eui/src/themes/themes.ts b/packages/eui/src/themes/themes.ts index d2f714092df..540fac2e5fe 100644 --- a/packages/eui/src/themes/themes.ts +++ b/packages/eui/src/themes/themes.ts @@ -31,3 +31,14 @@ export const EUI_THEMES: EUI_THEME[] = [ export const isDefaultTheme = (name: string) => { return name === AMSTERDAM_NAME_KEY; }; + +export const EUI_EXPERIMENTAL_THEME_ENABLED_KEY = + 'eui-experimental-theme-enabled'; + +export const isExperimentalThemeEnabled = () => { + if (typeof localStorage !== 'undefined') { + return localStorage.getItem(EUI_EXPERIMENTAL_THEME_ENABLED_KEY) === 'true'; + } + + return false; +}; diff --git a/packages/website/package.json b/packages/website/package.json index ea8f9b296fc..fde2b3f951d 100644 --- a/packages/website/package.json +++ b/packages/website/package.json @@ -4,6 +4,7 @@ "private": true, "scripts": { "docusaurus": "docusaurus", + "build:workspaces": "yarn workspaces foreach -R --from @elastic/eui-website run build:workspaces && yarn workspaces foreach -Rti --from @elastic/eui-website run build", "start": "cross-env NODE_OPTIONS=--openssl-legacy-provider docusaurus start", "build": "cross-env NODE_OPTIONS=--openssl-legacy-provider docusaurus build", "swizzle": "docusaurus swizzle", diff --git a/packages/website/src/components/homepage/highlights/index.tsx b/packages/website/src/components/homepage/highlights/index.tsx index e9957110530..680a61474f8 100644 --- a/packages/website/src/components/homepage/highlights/index.tsx +++ b/packages/website/src/components/homepage/highlights/index.tsx @@ -3,7 +3,6 @@ import { EuiButtonEmpty, EuiCard, EuiIcon, - EuiImage, EuiText, EuiTextAlign, useEuiMemoizedStyles, @@ -12,8 +11,6 @@ import { } from '@elastic/eui'; import { HomepageContainer, HomepageSection } from '../layout'; import { css } from '@emotion/react'; -import { useContext } from 'react'; -import { AppThemeContext } from '@elastic/eui-docusaurus-theme/lib/components/theme_context/index.js'; import SvgFlex from './svg/flex.svg'; import SvgSpacer from './svg/spacer.svg'; @@ -223,10 +220,7 @@ const getStyles = ({ euiTheme, colorMode }: UseEuiTheme) => ({ }); export const HomepageHighlights = () => { - const { theme } = useContext(AppThemeContext); const styles = useEuiMemoizedStyles(getStyles); - const isDarkMode = theme === 'dark'; - const headingId = useGeneratedHtmlId(); return ( diff --git a/yarn.lock b/yarn.lock index 7640422046e..b2dc445e8dc 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4609,8 +4609,9 @@ __metadata: "@docusaurus/types": "npm:^3.5.2" "@docusaurus/utils-validation": "npm:^3.5.2" "@elastic/datemath": "npm:^5.0.3" - "@elastic/eui": "npm:97.2.0" + "@elastic/eui": "workspace:^" "@elastic/eui-docgen": "workspace:^" + "@elastic/eui-theme-borealis": "workspace:^" "@emotion/css": "npm:^11.11.2" "@emotion/react": "npm:^11.11.4" "@types/react": "npm:^18.3.3" @@ -4638,6 +4639,72 @@ __metadata: languageName: unknown linkType: soft +"@elastic/eui-theme-borealis@workspace:^, @elastic/eui-theme-borealis@workspace:packages/eui-theme-borealis": + version: 0.0.0-use.local + resolution: "@elastic/eui-theme-borealis@workspace:packages/eui-theme-borealis" + dependencies: + "@elastic/eui-theme-common": "workspace:^" + "@types/jest": "npm:^29.5.12" + "@types/prettier": "npm:2.7.3" + "@typescript-eslint/eslint-plugin": "npm:^5.59.7" + "@typescript-eslint/parser": "npm:^5.59.7" + eslint: "npm:^8.41.0" + eslint-config-prettier: "npm:^8.8.0" + eslint-plugin-import: "npm:^2.27.5" + eslint-plugin-jest: "npm:^28.5.0" + eslint-plugin-local: "npm:^1.0.0" + eslint-plugin-prettier: "npm:^4.2.1" + jest: "npm:^29.7.0" + prettier: "npm:^2.8.8" + stylelint: "npm:^15.7.0" + stylelint-config-prettier-scss: "npm:^1.0.0" + stylelint-config-standard: "npm:^33.0.0" + stylelint-config-standard-scss: "npm:^9.0.0" + typescript: "npm:^5.6.2" + peerDependencies: + "@elastic/eui-theme-common": 0.0.1 + languageName: unknown + linkType: soft + +"@elastic/eui-theme-common@workspace:^, @elastic/eui-theme-common@workspace:packages/eui-theme-common": + version: 0.0.0-use.local + resolution: "@elastic/eui-theme-common@workspace:packages/eui-theme-common" + dependencies: + "@babel/cli": "npm:^7.21.5" + "@babel/core": "npm:^7.21.8" + "@babel/preset-env": "npm:^7.21.5" + "@babel/preset-react": "npm:^7.18.6" + "@babel/preset-typescript": "npm:^7.21.5" + "@emotion/react": "npm:^11.11.0" + "@types/jest": "npm:^29.5.12" + "@types/prettier": "npm:2.7.3" + "@types/react": "npm:^16.9 || ^17.0 || ^18.0" + "@types/react-dom": "npm:^16.9 || ^17.0 || ^18.0" + "@typescript-eslint/eslint-plugin": "npm:^5.59.7" + "@typescript-eslint/parser": "npm:^5.59.7" + eslint: "npm:^8.41.0" + eslint-config-prettier: "npm:^8.8.0" + eslint-plugin-import: "npm:^2.27.5" + eslint-plugin-jest: "npm:^28.5.0" + eslint-plugin-local: "npm:^1.0.0" + eslint-plugin-prettier: "npm:^4.2.1" + jest: "npm:^29.7.0" + prettier: "npm:^2.8.8" + react: "npm:^18.2.0" + react-dom: "npm:^18.2.0" + rimraf: "npm:^6.0.1" + stylelint: "npm:^15.7.0" + stylelint-config-prettier-scss: "npm:^1.0.0" + stylelint-config-standard: "npm:^33.0.0" + stylelint-config-standard-scss: "npm:^9.0.0" + typescript: "npm:4.5.3" + peerDependencies: + "@emotion/react": 11.x + react: ^16.12 || ^17.0 || ^18.0 + react-dom: ^16.12 || ^17.0 || ^18.0 + languageName: unknown + linkType: soft + "@elastic/eui-website@workspace:packages/website": version: 0.0.0-use.local resolution: "@elastic/eui-website@workspace:packages/website" @@ -4676,57 +4743,6 @@ __metadata: languageName: unknown linkType: soft -"@elastic/eui@npm:97.2.0": - version: 97.2.0 - resolution: "@elastic/eui@npm:97.2.0" - dependencies: - "@hello-pangea/dnd": "npm:^16.6.0" - "@types/lodash": "npm:^4.14.202" - "@types/numeral": "npm:^2.0.5" - "@types/react-window": "npm:^1.8.8" - "@types/refractor": "npm:^3.4.0" - chroma-js: "npm:^2.4.2" - classnames: "npm:^2.5.1" - lodash: "npm:^4.17.21" - mdast-util-to-hast: "npm:^10.2.0" - numeral: "npm:^2.0.6" - prop-types: "npm:^15.8.1" - react-dropzone: "npm:^11.7.1" - react-element-to-jsx-string: "npm:^15.0.0" - react-focus-on: "npm:^3.9.1" - react-is: "npm:^17.0.2" - react-remove-scroll-bar: "npm:^2.3.4" - react-virtualized-auto-sizer: "npm:^1.0.24" - react-window: "npm:^1.8.10" - refractor: "npm:^3.6.0" - rehype-raw: "npm:^5.1.0" - rehype-react: "npm:^6.2.1" - rehype-stringify: "npm:^8.0.0" - remark-breaks: "npm:^2.0.2" - remark-emoji: "npm:^2.1.0" - remark-parse-no-trim: "npm:^8.0.4" - remark-rehype: "npm:^8.1.0" - tabbable: "npm:^5.3.3" - text-diff: "npm:^1.0.1" - unified: "npm:^9.2.2" - unist-util-visit: "npm:^2.0.3" - url-parse: "npm:^1.5.10" - uuid: "npm:^8.3.0" - vfile: "npm:^4.2.1" - peerDependencies: - "@elastic/datemath": ^5.0.2 - "@emotion/css": 11.x - "@emotion/react": 11.x - "@types/react": ^16.9 || ^17.0 || ^18.0 - "@types/react-dom": ^16.9 || ^17.0 || ^18.0 - moment: ^2.13.0 - react: ^16.12 || ^17.0 || ^18.0 - react-dom: ^16.12 || ^17.0 || ^18.0 - typescript: ~4.5.3 || ^5 - checksum: 10c0/c8fed61d39cc6d06f00caf8234b97e9579ca4d11d7bf0d3cf4cb5d09a6782d8866a7db66b02d3d5eb4f2947a213aca03837b38b166020d21c9bda2e7eb20ad11 - languageName: node - linkType: hard - "@elastic/eui@workspace:^, @elastic/eui@workspace:packages/eui": version: 0.0.0-use.local resolution: "@elastic/eui@workspace:packages/eui" @@ -4748,6 +4764,8 @@ __metadata: "@cypress/webpack-dev-server": "npm:^1.7.0" "@elastic/charts": "npm:^64.1.0" "@elastic/datemath": "npm:^5.0.3" + "@elastic/eui-theme-borealis": "workspace:^" + "@elastic/eui-theme-common": "workspace:^" "@emotion/babel-preset-css-prop": "npm:^11.11.0" "@emotion/cache": "npm:^11.11.0" "@emotion/css": "npm:^11.11.0" @@ -4931,6 +4949,8 @@ __metadata: yo: "npm:^4.3.1" peerDependencies: "@elastic/datemath": ^5.0.2 + "@elastic/eui-theme-borealis": 0.0.1 + "@elastic/eui-theme-common": 0.0.1 "@emotion/css": 11.x "@emotion/react": 11.x "@types/react": ^16.9 || ^17.0 || ^18.0 @@ -8387,21 +8407,21 @@ __metadata: languageName: node linkType: hard -"@types/react-dom@npm:^18.0.0, @types/react-dom@npm:^18.2.6": - version: 18.2.6 - resolution: "@types/react-dom@npm:18.2.6" +"@types/react-dom@npm:^16.9 || ^17.0 || ^18.0, @types/react-dom@npm:^18.3.0": + version: 18.3.0 + resolution: "@types/react-dom@npm:18.3.0" dependencies: "@types/react": "npm:*" - checksum: 10c0/bd734ca04c52b3c96891a7f9c1139486807dac7a2449fb72e8f8e23018bc6eeeb87a490a105cb39d05ccb7ddf80ed7a441e5bd3e5866c6f6ae8870cd723599e8 + checksum: 10c0/6c90d2ed72c5a0e440d2c75d99287e4b5df3e7b011838cdc03ae5cd518ab52164d86990e73246b9d812eaf02ec351d74e3b4f5bd325bf341e13bf980392fd53b languageName: node linkType: hard -"@types/react-dom@npm:^18.3.0": - version: 18.3.0 - resolution: "@types/react-dom@npm:18.3.0" +"@types/react-dom@npm:^18.0.0, @types/react-dom@npm:^18.2.6": + version: 18.2.6 + resolution: "@types/react-dom@npm:18.2.6" dependencies: "@types/react": "npm:*" - checksum: 10c0/6c90d2ed72c5a0e440d2c75d99287e4b5df3e7b011838cdc03ae5cd518ab52164d86990e73246b9d812eaf02ec351d74e3b4f5bd325bf341e13bf980392fd53b + checksum: 10c0/bd734ca04c52b3c96891a7f9c1139486807dac7a2449fb72e8f8e23018bc6eeeb87a490a105cb39d05ccb7ddf80ed7a441e5bd3e5866c6f6ae8870cd723599e8 languageName: node linkType: hard @@ -34194,6 +34214,16 @@ __metadata: languageName: node linkType: hard +"typescript@npm:^5.6.2": + version: 5.6.2 + resolution: "typescript@npm:5.6.2" + bin: + tsc: bin/tsc + tsserver: bin/tsserver + checksum: 10c0/3ed8297a8c7c56b7fec282532503d1ac795239d06e7c4966b42d4330c6cf433a170b53bcf93a130a7f14ccc5235de5560df4f1045eb7f3550b46ebed16d3c5e5 + languageName: node + linkType: hard + "typescript@npm:~5.5.4": version: 5.5.4 resolution: "typescript@npm:5.5.4" @@ -34214,6 +34244,16 @@ __metadata: languageName: node linkType: hard +"typescript@patch:typescript@npm%3A^5.6.2#optional!builtin": + version: 5.6.2 + resolution: "typescript@patch:typescript@npm%3A5.6.2#optional!builtin::version=5.6.2&hash=b45daf" + bin: + tsc: bin/tsc + tsserver: bin/tsserver + checksum: 10c0/e6c1662e4852e22fe4bbdca471dca3e3edc74f6f1df043135c44a18a7902037023ccb0abdfb754595ca9028df8920f2f8492c00fc3cbb4309079aae8b7de71cd + languageName: node + linkType: hard + "typescript@patch:typescript@npm%3A~5.5.4#optional!builtin": version: 5.5.4 resolution: "typescript@patch:typescript@npm%3A5.5.4#optional!builtin::version=5.5.4&hash=b45daf" From 871507080876957459e0ecc45409030e1d74dc7d Mon Sep 17 00:00:00 2001 From: Lene Gadewoll Date: Thu, 31 Oct 2024 15:32:59 +0100 Subject: [PATCH 34/64] [Visual Refresh] Update Typography scale (#8103) --- .../src/variables/_font_weight.scss | 10 ++++++++ .../src/variables/_index.scss | 1 + .../src/variables/_typography.scss | 16 ++++++------- .../src/variables/_typography.ts | 24 +++++++++---------- 4 files changed, 31 insertions(+), 20 deletions(-) create mode 100644 packages/eui-theme-borealis/src/variables/_font_weight.scss diff --git a/packages/eui-theme-borealis/src/variables/_font_weight.scss b/packages/eui-theme-borealis/src/variables/_font_weight.scss new file mode 100644 index 00000000000..8ee5e23f925 --- /dev/null +++ b/packages/eui-theme-borealis/src/variables/_font_weight.scss @@ -0,0 +1,10 @@ +// Separated out to its own file for easy import into docs + +// Font weights +$euiFontWeightLight: 300 !default; +$euiFontWeightRegular: 400 !default; +$euiFontWeightMedium: 450 !default; +$euiFontWeightSemiBold: 500 !default; +$euiFontWeightBold: 600 !default; +$euiCodeFontWeightRegular: 400 !default; +$euiCodeFontWeightBold: 600 !default; diff --git a/packages/eui-theme-borealis/src/variables/_index.scss b/packages/eui-theme-borealis/src/variables/_index.scss index 9768a81e8ee..05411e17464 100644 --- a/packages/eui-theme-borealis/src/variables/_index.scss +++ b/packages/eui-theme-borealis/src/variables/_index.scss @@ -4,4 +4,5 @@ @import 'buttons'; @import 'page'; +@import 'font_weight'; @import 'typography'; diff --git a/packages/eui-theme-borealis/src/variables/_typography.scss b/packages/eui-theme-borealis/src/variables/_typography.scss index 824f56b42da..9b35d9c5fd3 100644 --- a/packages/eui-theme-borealis/src/variables/_typography.scss +++ b/packages/eui-theme-borealis/src/variables/_typography.scss @@ -1,23 +1,23 @@ // Finally start using the non-beta version of Inter $euiFontFamily: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol' !default; -// Font sizes -- scale is loosely based on Major Third (1.250) with a base of 14px +// Font sizes -- scale is loosely based on Minor Third (1.200) with a base of 14px // Base list is an altered scale based on 16px to match the resulted values below $euiTextScale: 2.125, 1.6875, 1.375, 1.125, 1, .875, .75 !default; $euiFontSize: $euiSize - 2; // 14px -$euiFontSizeXS: floor($euiFontSize * .86); // 12px // h6 -$euiFontSizeS: floor($euiFontSize * 1); // 14px // h5 --> Now the same as the base $euiFontSize -$euiFontSizeM: ceil($euiFontSize * 1.14); // 16px // h4 -$euiFontSizeL: ceil($euiFontSize * 1.57); // 22px // h3 -$euiFontSizeXL: floor($euiFontSize * 1.93); // 27px // h2 -$euiFontSizeXXL: floor($euiFontSize * 2.43); // 34px // h1 +$euiFontSizeXS: floor($euiFontSize * .86); // 12px // h6 +$euiFontSizeS: floor($euiFontSize * 1); // 14px // h5 +$euiFontSizeM: ceil($euiFontSize * 1.14); // 16px // h4 +$euiFontSizeL: floor($euiFontSize * 1.44); // 20px // h3 +$euiFontSizeXL: floor($euiFontSize * 1.728); // 24px // h2 +$euiFontSizeXXL: ceil($euiFontSize * 2.074); // 30px // h1 $euiBodyLineHeight: 1.142857143 !default; // 16px from a 14px base font size to ensure it aligns to our 16px grid $euiCodeFontWeightRegular: 400; -$euiCodeFontWeightBold: 700; +$euiCodeFontWeightBold: 600; // Normally functions are imported before variables in `_index.scss` files // But because they need to consume some typography variables they need to live here diff --git a/packages/eui-theme-borealis/src/variables/_typography.ts b/packages/eui-theme-borealis/src/variables/_typography.ts index 6454c7b239c..ae43f118d25 100644 --- a/packages/eui-theme-borealis/src/variables/_typography.ts +++ b/packages/eui-theme-borealis/src/variables/_typography.ts @@ -14,16 +14,16 @@ import { type _EuiThemeFontWeights, } from '@elastic/eui-theme-common'; -// Typographic scale -- loosely based on Major Third (1.250) +// Typographic scale -- loosely based on Major Third (1.200) export const fontScale: _EuiThemeFontScales = { - xxxs: 0.5625, - xxs: 0.6875, - xs: 0.75, - s: 0.875, - m: 1, - l: 1.375, - xl: 1.6875, - xxl: 2.125, + xxxs: 0.5625, // 9px + xxs: 0.6875, // 11px + xs: 0.75, // 12px + s: 0.875, // 14px + m: 1, // 16px + l: 1.25, // 20px + xl: 1.5, // 24px + xxl: 1.875, // 30px }; // Families & base font settings @@ -43,9 +43,9 @@ export const fontBase: _EuiThemeFontBase = { export const fontWeight: _EuiThemeFontWeights = { light: 300, regular: 400, - medium: 500, - semiBold: 600, - bold: 700, + medium: 450, + semiBold: 500, + bold: 600, }; export const font: _EuiThemeFont = { From f9b081f0fc56c84243321c8a2554d70d1423ef7f Mon Sep 17 00:00:00 2001 From: Lene Gadewoll Date: Thu, 31 Oct 2024 15:33:21 +0100 Subject: [PATCH 35/64] [Visual Refresh] Setup semantic color tokens (#8097) --- .../demo/actions_bar/actions_bar.tsx | 9 +- .../src/theme/EditThisPage/index.tsx | 2 +- .../docusaurus-theme/src/theme/Root.styles.ts | 141 +++--- packages/eui-theme-borealis/package.json | 2 +- packages/eui-theme-borealis/src/index.ts | 4 +- .../eui-theme-borealis/src/theme_dark.scss | 6 +- .../eui-theme-borealis/src/theme_light.scss | 6 +- .../src/variables/_borders.scss | 3 + .../src/variables/_borders.ts | 5 +- .../src/variables/_buttons.scss | 22 +- .../src/variables/_buttons.ts | 129 +++++ .../src/variables/_colors_dark.scss | 49 -- .../src/variables/_colors_dark.ts | 73 --- .../src/variables/_colors_light.scss | 49 -- .../src/variables/_colors_light.ts | 74 --- .../src/variables/_components.ts | 226 +++++++++ .../src/variables/_form.scss | 12 + .../src/variables/_forms.ts | 63 +++ .../src/variables/_index.scss | 3 +- .../src/variables/_states.scss | 2 +- .../src/variables/_states.ts | 5 +- .../src/variables/colors/_colors_dark.scss | 121 +++++ .../src/variables/colors/_colors_dark.ts | 178 +++++++ .../src/variables/colors/_colors_light.scss | 123 +++++ .../src/variables/colors/_colors_light.ts | 178 +++++++ .../src/variables/colors/_primitive_colors.ts | 224 +++++++++ .../variables/colors/_semantic_colors.scss | 211 ++++++++ .../src/variables/colors/_semantic_colors.ts | 163 +++++++ .../variables/{_colors.ts => colors/index.ts} | 5 +- packages/eui-theme-common/package.json | 2 +- .../src/global_styling/types.ts | 3 + .../global_styling/variables/_buttons.scss | 2 +- .../src/global_styling/variables/_form.scss | 15 +- .../src/global_styling/variables/buttons.ts | 57 +++ .../src/global_styling/variables/colors.ts | 124 ++++- .../global_styling/variables/components.ts | 101 ++++ .../src/global_styling/variables/forms.ts | 28 ++ .../src/global_styling/variables/index.ts | 3 + packages/eui-theme-common/src/utils.test.ts | 12 + packages/eui-theme-common/src/utils.ts | 17 + ..._Editors_Syntax_EuiCodeBlock_Highlight.png | Bin 0 -> 6082 bytes ..._Editors_Syntax_EuiCodeBlock_Highlight.png | Bin 0 -> 11981 bytes .../src-docs/src/views/badge/beta_badge.tsx | 8 +- .../src/views/theme/color/_color_js.tsx | 66 +-- .../src/views/theme/color/_contrast_js.tsx | 6 +- .../src/views/theme/color/contrast.tsx | 65 +-- .../src/views/theme/sizing/_sizing_js.tsx | 5 +- .../badge/__snapshots__/badge.test.tsx.snap | 35 ++ .../eui/src/components/badge/badge.styles.ts | 6 +- packages/eui/src/components/badge/badge.tsx | 1 + .../__snapshots__/beta_badge.test.tsx.snap | 11 + .../badge/beta_badge/beta_badge.styles.ts | 1 + .../badge/beta_badge/beta_badge.tsx | 8 +- .../eui/src/components/badge/color_utils.ts | 20 +- .../badge_notification.test.tsx.snap | 8 + .../badge_notification.styles.ts | 1 + .../notification_badge/badge_notification.tsx | 7 +- .../bottom_bar/bottom_bar.styles.ts | 4 +- .../breadcrumbs/_breadcrumb_content.styles.ts | 13 +- .../button/__snapshots__/button.test.tsx.snap | 11 + packages/eui/src/components/button/button.tsx | 2 +- .../button_display/_button_display.styles.ts | 2 +- .../__snapshots__/button_empty.test.tsx.snap | 15 + .../button/button_empty/button_empty.test.tsx | 2 +- .../button/button_empty/button_empty.tsx | 2 +- .../__snapshots__/button_group.test.tsx.snap | 160 ++++++ .../button/button_group/button_group.test.tsx | 2 +- .../button/button_group/button_group.tsx | 2 +- .../button_group_button.styles.ts | 13 +- .../button_group/button_group_button.tsx | 2 +- .../__snapshots__/button_icon.test.tsx.snap | 15 + .../button/button_icon/button_icon.test.tsx | 2 +- .../button/button_icon/button_icon.tsx | 2 +- .../card/__snapshots__/card.test.tsx.snap | 33 ++ .../eui/src/components/card/card.styles.ts | 2 +- .../components/code/code_block.stories.tsx | 17 +- .../code/code_block_annotations.tsx | 2 +- .../components/code/code_block_line.styles.ts | 3 +- .../collapsible_nav_group.styles.ts | 14 +- .../collapsible_nav_item.styles.ts | 2 +- .../color_palette_display.styles.ts | 7 +- .../color_picker/color_picker.styles.ts | 4 +- .../color_picker_swatch.styles.ts | 2 +- .../components/datagrid/data_grid.styles.ts | 14 +- .../date_picker/react_date_picker.styles.ts | 4 +- .../super_date_picker.styles.ts | 13 +- .../drag_and_drop/droppable.styles.ts | 8 +- .../__snapshots__/empty_prompt.test.tsx.snap | 14 + .../empty_prompt/empty_prompt.styles.ts | 16 +- .../filter_group/filter_button.stories.tsx | 2 +- .../filter_group/filter_select_item.styles.ts | 4 +- .../flyout/_flyout_close_button.styles.ts | 5 +- .../src/components/form/form.styles.test.tsx | 16 +- .../eui/src/components/form/form.styles.ts | 72 +-- .../form/range/range_tooltip.styles.ts | 26 +- .../components/form/switch/switch.styles.ts | 49 +- .../eui/src/components/form/switch/switch.tsx | 6 +- .../src/components/header/header.styles.ts | 22 +- .../health/__snapshots__/health.test.tsx.snap | 22 + .../icon/__snapshots__/icon.test.tsx.snap | 18 + .../eui/src/components/icon/icon.styles.ts | 19 +- .../eui/src/components/icon/named_colors.tsx | 1 + .../inline_edit/inline_edit_form.styles.ts | 4 +- .../key_pad_menu/key_pad_menu_item.styles.ts | 8 +- .../list_group/list_group_item.styles.ts | 23 +- .../eui/src/components/mark/mark.styles.ts | 12 +- .../markdown_format.styles.test.ts.snap | 37 ++ .../markdown_editor_drop_zone.styles.ts | 14 +- .../markdown_format.stories.tsx | 7 + .../markdown_editor/markdown_format.styles.ts | 10 +- .../modal/confirm_modal.stories.tsx | 2 +- .../mutation_observer.stories.tsx | 2 +- .../overlay_mask/overlay_mask.styles.ts | 4 +- .../__snapshots__/page_section.test.tsx.snap | 10 + .../page_template/inner/page_inner.styles.ts | 4 +- .../panel/__snapshots__/panel.test.tsx.snap | 6 + .../popover/popover_footer.styles.ts | 7 +- .../popover_panel/_popover_panel.styles.ts | 18 +- .../progress.styles.test.ts.snap | 19 + .../__snapshots__/progress.test.tsx.snap | 6 + .../components/progress/progress.styles.ts | 18 +- .../eui/src/components/progress/progress.tsx | 1 + .../selectable_list_item.styles.ts | 4 +- .../side_nav/side_nav_item.styles.ts | 8 +- packages/eui/src/components/skeleton/utils.ts | 14 +- .../components/steps/step_number.styles.ts | 2 +- .../table/table_cells_shared.styles.ts | 14 +- .../src/components/table/table_row.styles.ts | 31 +- .../eui/src/components/text/text.styles.ts | 3 +- .../src/components/text/text_color.styles.ts | 13 +- .../eui/src/components/text/text_color.tsx | 1 + .../components/tool_tip/tool_tip.styles.ts | 36 +- .../components/tour/_tour_footer.styles.ts | 8 +- .../tree_view/tree_view_item.styles.ts | 7 +- .../__snapshots__/_button.test.ts.snap} | 21 + .../mixins/__snapshots__/_color.test.ts.snap | 14 +- .../mixins/_button.test.ts} | 4 +- .../eui/src/global_styling/mixins/_button.ts | 268 ++++++++++ .../eui/src/global_styling/mixins/_color.ts | 119 +++-- .../eui/src/global_styling/mixins/index.ts | 1 + .../global_styling/reset/global_styles.tsx | 7 +- .../src/themes/amsterdam/_colors_dark.scss | 88 +++- .../src/themes/amsterdam/_colors_light.scss | 88 +++- .../amsterdam/global_styling/mixins/button.ts | 304 +----------- .../global_styling/variables/_buttons.ts | 215 ++++++++ .../global_styling/variables/_colors.ts | 459 +++++++++++++++++- .../global_styling/variables/_components.ts | 389 +++++++++++++++ .../global_styling/variables/_forms.scss | 12 + .../global_styling/variables/_forms.ts | 121 +++++ .../global_styling/variables/_index.scss | 1 + packages/eui/src/themes/amsterdam/theme.ts | 2 + 151 files changed, 4643 insertions(+), 1189 deletions(-) create mode 100644 packages/eui-theme-borealis/src/variables/_borders.scss create mode 100644 packages/eui-theme-borealis/src/variables/_buttons.ts delete mode 100644 packages/eui-theme-borealis/src/variables/_colors_dark.scss delete mode 100644 packages/eui-theme-borealis/src/variables/_colors_dark.ts delete mode 100644 packages/eui-theme-borealis/src/variables/_colors_light.scss delete mode 100644 packages/eui-theme-borealis/src/variables/_colors_light.ts create mode 100644 packages/eui-theme-borealis/src/variables/_components.ts create mode 100644 packages/eui-theme-borealis/src/variables/_form.scss create mode 100644 packages/eui-theme-borealis/src/variables/_forms.ts create mode 100644 packages/eui-theme-borealis/src/variables/colors/_colors_dark.scss create mode 100644 packages/eui-theme-borealis/src/variables/colors/_colors_dark.ts create mode 100644 packages/eui-theme-borealis/src/variables/colors/_colors_light.scss create mode 100644 packages/eui-theme-borealis/src/variables/colors/_colors_light.ts create mode 100644 packages/eui-theme-borealis/src/variables/colors/_primitive_colors.ts create mode 100644 packages/eui-theme-borealis/src/variables/colors/_semantic_colors.scss create mode 100644 packages/eui-theme-borealis/src/variables/colors/_semantic_colors.ts rename packages/eui-theme-borealis/src/variables/{_colors.ts => colors/index.ts} (82%) create mode 100644 packages/eui-theme-common/src/global_styling/variables/buttons.ts create mode 100644 packages/eui-theme-common/src/global_styling/variables/components.ts create mode 100644 packages/eui-theme-common/src/global_styling/variables/forms.ts create mode 100644 packages/eui/.loki/reference/chrome_desktop_Editors_Syntax_EuiCodeBlock_Highlight.png create mode 100644 packages/eui/.loki/reference/chrome_mobile_Editors_Syntax_EuiCodeBlock_Highlight.png rename packages/eui/src/{themes/amsterdam/global_styling/mixins/__snapshots__/button.test.ts.snap => global_styling/mixins/__snapshots__/_button.test.ts.snap} (88%) rename packages/eui/src/{themes/amsterdam/global_styling/mixins/button.test.ts => global_styling/mixins/_button.test.ts} (92%) create mode 100644 packages/eui/src/global_styling/mixins/_button.ts create mode 100644 packages/eui/src/themes/amsterdam/global_styling/variables/_buttons.ts create mode 100644 packages/eui/src/themes/amsterdam/global_styling/variables/_components.ts create mode 100644 packages/eui/src/themes/amsterdam/global_styling/variables/_forms.scss create mode 100644 packages/eui/src/themes/amsterdam/global_styling/variables/_forms.ts 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 05411e17464..fbb64ce0c50 100644 --- a/packages/eui-theme-borealis/src/variables/_index.scss +++ b/packages/eui-theme-borealis/src/variables/_index.scss @@ -2,7 +2,8 @@ @import 'node_modules/@elastic/eui-theme-common/src/global_styling/variables/index'; @import 'states'; -@import 'buttons'; +@import 'borders'; +@import 'form'; @import 'page'; @import 'font_weight'; @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 0000000000000000000000000000000000000000..5b07dd693374b67a16bf5346b6852eb13efeabc8 GIT binary patch literal 6082 zcmds5cT`i`v*xM@q6ij5;R+}S(v>Q`DHwVU5&|d~S_mx!L`qN)M5>{KfJ$#cB%wF) zAyPx<5(tP8kVHZ=v`}7rhPB=wcdg&QZ@s-%awg~O%$}J&v*$Zsw5hQkI~xxh6B83V z;Qn26CMM<7U*!H1__iK3pLjw@V97u6~QIb&R8OKJzlvLvVV)F{1jaS$iB z7=;C+z8e-voFh{*=Wcg00{}NP6TL+r&!|Sxq5!Wwt}g~)Hl7|3chI??cUG3S*7h^m zUWu16({1=Ywh8c$0e}6GnV6h7S&#pb!@>nPf7||huxJUK`6Dr%eXe<#A^v^h*)4{6 zhxOPahUm?CqMadr6JU*CXl~Q`zpU6AED$WQg=scm7#=1*#KnCS2&T-ae|P!w@!6)P z3;KuZ!#`k0Zq6$4Vh5)~MDaChfcpAC9{RLpHaOA27}+<4wx!^7tX?i zg@g~CEg0PkB9Fn8Lv}GOFJr77zn`^{NX=|H&SJi7#>e<0=8lDy4+Q&~H}qVsy|J?h zfk&;>W+Q=^1567$+m{KgdVmd~`ByxsGG~7A0)+8?CL}5&1A6!F9ouOR3*RAQWmP>| z86gQ<@JZLaBPC^@ef*f;Vs@>#s;Z%IQVH;IC#lswCx?x~S6<$0h+t<+7JBiE?RA$& zYKJe7R}nTQS*v^QXb4k|x(MfO*3wTZYKCQYrI5uUJ1bEXO1qayUU&d$z?iAjt^ zCl$#BuHU_<8}Biw##p6o`i#c4U>Z!3w;7Vuv^^xJl$A{+5^q#bbWIZ(b2MY%>EeQ! z?VX*I(>ECR!uq@~0*CSe7l=C>g1(HKt3iR>rMVsclG4)dLfZV|B6$M`9CM$n zfy4}P@Vog@PUBR|(yN^0g?BG?pzR6sEj?WwBY}s6x#W}#h$-Zc8Eq+_5;g1U>h7-e z=7>v6OWRGB71ekU(2};T3XV{n2mK(7?~bocKggrO}Hnptji`lV=pUU-@QSZ z%?8EeYjaAVRt5XR39JFI40~_PP$LtKfX*Qv&KwBGX{2YC?&XG}gqA0(t$}4$qobqv zHLCRCDbtxuy65^+HAeKy?rs_Em2I`I%lbxE)54`FOJxLVuYlQ8i3%`SGZrqU24N@!e9YBT1&G|OVD|(C< zi8MN-;l}A1Q(}@PIsA>+)7880<42jkZ5ousf9_g!bv5`+_Nc~nZ5X}==8dxw2j28F zDvxC6N5gDui!u50sFnbyg=QLB;!=!fBODVsBd6_2p(qeI{shC2Zy+r=)wQe6Z!FwRLiy;0&CttFHPu_h>CXieobsFiZZv@?7`t2)Pf@A-10C`R-X){7ijmseaET>9JU3pSfu*y0pA}D10jxIyAL#pj$nSbch-r!tC_Kfp(VI z*!h(2&N({Hk9L;FNe<@uSuK9~jO*!Wz^<)xunttz&Y-7f zAIW4G8fDgAyQZa=u($rrHtnsZ(UZM3T^i3&7tTc11&7|*>$mj+pw`!Yt<25K16TS> zmc*sR#;VGl`p!ncKgO5nM8%VSki`MM{{Fzq0n@8$zIC58>-6rwbksNmm(VOOUO`lw zTbwO^|6W^7TRXGKIkzPw3%uBsBr-q$7)bXEC1h>Qt)$W@=SC^m)1}X$-ygH-v4Ihq zZ1Oy#uQU2_8>H`pW?d<%Tzz-@!o4#;%3l6u#6go{S=p!QEKg$%deS5Y-`G@Nyuww` zNV)1Tyh2(i9iMq>fc8XV7t~gN2vX4#rVcuW#>QA}Jr|d1p{|af*Il@|jY54(dyN+| z55_98kn&MkS&d?1;_lcK>*Su#guG9IS3^Rq(jDF&7Zu&zmf zvarrhh@6VjkOx-@s0WFd z}3m z?^v9m*Yz`hIzSuOr^E~GB{O{Hq}r$vWm?_l&k5_{gMs5)Vz*Y^1@&ETeQ9tEfBQZMX#EiO%zhJfJkkm17Ca%A5VozsgrYXG1`*eF}fq18BUY$(r#1ADMD+xDR) z1aW;Of*vzEsK{(~)dXsS0aat3{p$&X#VcRV1QM&BkWf^ty<}URUzgvp(uwWJEVyxF{nvLs zhd%`c&S>h5OQ^pXsV=q^wwz~7{H`}xX0YC z#GEq3h4{q$M-3BLU5cg>fxKBdWWei-U7|U1CENDP0}aM^>&a^xej|12uw`2T#$*hq z?aZ}c8x2C( zZf(E*>ndip3OX{en6?@KfBHHn23MsQ&Cu+9@3sV|x`pZ6Z7MHy$t4%Mh1@J@XgCP( zx{(4j0w+n5y&~^YSI3H>!6QB6c|h92uj`Ui8+nr5sX`$K6Z*vc)$qPCFE^j6D&_P{ z_Z68V_ngn1iZC$f`L+48e%%{x@gUc9`JZ|N+ZMe2$~HoeE#sZ~ry`5U~^=@g`AVfa0uXT%gdr*(G+{jTm%R1lOY zn~>eeag4QcD%Simw+0FuSbF`~7nZ>lQ@0)-=}%Pi~ODcU9TnwDl#cl9H0B zh>9%{LR3yox#8g8pp=oF441I|?Ac^S;iIsRRk>_=a&f199qluscKvaO^=e}Ze3GM*lHKGK zgt)rY?)Xry|H zIKUpX8jA*PxvvhqL*=7T=hYM;rSW{~@11OHcGpJSUTjh%z4-ZWcup1uIJXoSAB5to z)XbtMYoY(F&f+n%29kD|`}P%}rEn#0150%sPbM8tRhKT;MJJ5=10+20+4f`{xBU9EZM|pSG z9c&mYtgfuZV$o{lx&plcpaZ7{_|FH_s{^ghIUSCpL0-5qsO*g8L({kAz%pTzCx-Oq zD+CB>|4jXw%Qsxe&g(a$!$ErJUh02i*#nc4&cc@{)Vzj=A~rRsGq^6?jDyq4m7-Hy zgv#<>3Fec`Vu3CwPu`Fs&*nLQz)&}&#|mtjU$cytuXBJOx%QAh@??9S?sPGk#l9$l zJ?mnvfA*Id*_wVIf=V5UTz+~Iry;Xw8NgRgS&nN~R1_hnEBpN@j&Er}3AwnqP}$f= z2L+>`#~uMl!?l~y6HQIvl;n%h=|;Fa{#DE?gar9Pg^#gtlA%o3V_)-qlU4cbELwfp z->PbAqw;qiOxR?wonadx%ys@gz%lU7v()7o6T$0x@;oOeKN>Ttz2?zPl9;(prO@4s-6NhDd zZCX;2&83)*#7u@g|D;}%{*bNeV}AOQlobS$A|$Fpt5e?bFAvze+6?MxjPH>tA6>jY z`zEbjZey&>ok|!kS`q=->eHc*m9@c)kca`wH-Ufr-SHB(mGR0?fi0og^Zef`)nyuC#||s{!vEO(jJJO&lmb#(g8EF z_5lPHdlV+P>->HYg+&?hJz01k@+ufqn<`|q*K;9LmJFlMe89}i{Hl(k{30SJD3S8% zRKkxw%>n96KUy;KJJ`0 zDJikkti~)b*xjM|QPl%W8#7T3+!v%GW6i!rh-Ywb!L9l3mm9st#zt)6xVV&-T{wrD zd|h5IRrNaeRKJl=f?sXWWr-4-M<4ts&lGK=KD90^&)KV+1hcQG(b&w2s2<1 zQz*+BwQE!0C}S&ETj$qj=TqDUTY>>YdyU5sP9GAcvdMrLvmWj;4eQ5#$x~B=WxL<3 z7=462{bx5~mFpbqA--yAm~?*N)AUixZsY145EuM2jfrVf=U@4zh}mb}2n1FEwyU3E z(-}M60H7mJ?Bg!;ptK{DA=$sG`NU=2v!imRc&-z9>nT|nU}$JL9i6l(#lW3Rpf~TH zt!6ww1|y^vL!UQZsfT6%=3pjrI9rVe%@oIjryCGi#<}Vh(%-+Qq}Sh8K&l?dJ?(Xk`&&tyLZL*4@-r5xyBx{f9<+5e z(NLJmPKKpvZda$2UF790`sPXawfdREy)Ep3JJzO^VnFztD^QEJF`Q!&*4p|dfxjqy zZA)BG*1#_On0&xAO##P>mePx zj{TxDH)fW<`baa<;NR3uhU|{Q{ty$A5prreE^KTF z=&zfC`UB4s)GdA2r6lb!cV%ZX3vA!#UA!RMQixocZYGV%-(UXyrkhQF2@ZVn_Y?B!ejrj zM?IFwkaHc-Wap7H)r&6__c!vWIN07syege*U2vN zm8T06MO-}io&_o+f!YdWxGq`)d7GEoJ9;ioRg^`Z;d?R&XK-$D*?T63*8v@p!+W-In literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..2af7856b04a4b6014c90fb78771826bdc6a8bfb5 GIT binary patch literal 11981 zcmeHtXH-+~n{5;orHV+C5=DwgiS!bR3W!QmP^9-FgeE0)f*?hzfOH5V0!oKKXaWL4 z=paZ95PA=xcgURlWr2fj}40!29W|SAf6!s@xD@cfnOl&kzx)4R>wreK^5$O8Og6`h{Il|!|HC_w)o}^i z-26B^JiO2-Bn;U8(zlRf=jU%q*i%?GHCJ_XcB0|Zq?@dznW|S8aBNyOPsc&m`aV-J zECOnUcOhN<+XZH!Q4T53F!wddxcGR=hY^cCN8;i`ov%LvXME}>YFMiN{Q1}K->)`i z1=W}>Uze3N5Jof^3=64}4qr`~3B;G0DY7s*L#+Qh z9WoV&?i3Uho(lZf9_!&Ow8ciF5q(I*((Kom`AF5{Km=n@@%CEwsfu$Dj(T)- zRP1lpbvimaz82>ubkrLdEXjG2@7_JrgN^z^-LkmkWQ*!*siYMYg6J=hC~NG01o;pW zVkRNnL1sWbwx;Tw2FtWDS|`DmLa#GdNA0tZiyjq2uU%yhLb;C3MUa+E zvgNYDk@}M-JgkzAvnNBa>QCuZ0jPL-i?+xg&Y5$V=$%gf9cE#3DW3R`Em>JVD-YR) z46A=NOET@0AOr>7ZT2^QXpfef(c94XZa0yGw{b+FyQb^9JemzCwX2N49DZm@{9s{J zglwcDkxd1ZjAWbRxbqJvly(qOL0S`6;V?TG|-Xwc&?wVs&VD zp#Ug^X3whgbKT}n-30@KmJ$J8AO>`Dq3A23i1Um48`NJ*ORrZgI;y2Vcz=x^^QXpj z={_EpWf3ZZJ>FeWC!U{$g@^M<&A+H=8pdE)!C)t(*CHQqoOxH`!^e+l=-AjEW8rwu zt>7hQss6m-5=~MdaZ;eKpnMLDzev69O*`N;Ha2#5nP~7kxxv8DlX57UurHd{0}Q{f zsA{S^wQ}vy{)j1ERc&6$zA&(ebSL;P8w91u`7pvpig{&a1NBhWqU&vDkzl4@rDp!g zYPq+-BZDXgP)dqk!hS@weDk89!C0jQQ;MEmvKr6nnaZ?BOaHA*1JY3L-?XQ;9xhB# z%aqT+L*b=%t@i`>&y@NbGT)Asb6b$LJrFXbVu$J=wBC3>;Q`UmEQ&br@$p@{;%EcR zus5BrAshQunbKM#qnSOPXL{z3^IU{7aNZTIQt{h9KG3!pO4HM7P+*XvZkahlQ_~&a zoxLj3>+tw^d)R=oz`dJa@w%*>oT>u?Unx0?vVjB#2ZMIkhvMt<)U4;*=|-{Gp&rT` zr0}>1%$rr_Z&H?`pS0KZ%>tcbYwSMz@84`irHDuV{wWT&wkzwnMli^Ua3N=$v-xgm zSy>YfaY;K@EfS~|_CP3Hzjo~!s5|3C%-VHD7(JM)UNqtjtcX(n^Cq3=DUt+kwEb8oa7Xy=-}i@y zCM7Xx${#UTO?gKo6ws3 z#q3}~6P=}#XGg1R-tt?UY`sY7mY9R7oIZ*~R)o&#R|N5>CeTzC2@ z(>S#szrEre9;O?b6^K74Ya*Scbu6VuQ|>W;j1IR0ues(nfhaK7{>MT|8JvS?l-DVI zMT+Xx)GVGD_Cx7Q0e`YXk|-)car-Z35EvW z<=`~8pv?Tz($Z4G+3E&6i}LiMy6j0a<*-oB%bMi4=JBBdX|@}Wz4c`_1Pw&~_QgOq zkdbKxX_a04bS#X$xqAxNeK;8-S|7t85XTz4M4NhQSVo3XQ4E;wR$Hw&j2S+tKEd$- zZF$n`fIYIs$r~RIW|me#6>H#D5OO5z9FJAm=kn_>2bK%Csu(yo0 zrq~o2y}EnDW%IU^py5-vjs&n(*bjxrmzDkIQ0N_wVof0~rn#*Q4~<)upT=wIolSax zq@<OF3MfYMni*!JTUMcPr)gU^rXG(d zoOdizvw}!Dtal1Yy*5l&VMBX#`La8l19p}An%NTCp#p|Oe)O2?ST3`0c7dbedYtCB zLnzP*9i82rvLd%YxU8Te!>BSVYs+%?K^}iyRLJLf%P&$-4{`EsoeAO`@5#V-~Qp6Bs7}VlO7qtKbDx3go$0AJ#bU< z^n6wtrQk;qfUNf!vdy@BIauIu&Ey^2WpTqN?@x|_q#6%BUkBeVex$0c1aAkeacKD}%_6JF%jsFYFqG6BB>!f$qkm%K}5iO@VXv#vIEE~H!+2JGL?)RiRc-L1&uFP5 zJL_dZGfh=$WBrZ0u0?;-nq!-x$}~TOK7c?kkV0HYQgs8^?iy#J#>bbN@iI!TEhy z{{zql(%&fsjvC`2Vlkz&X(iIW%b$h<9XyxK2DG%_!KTt*T69K3++E%0_5(ovhyK() zh|@BiCdMxwIC&+NCocDeXb6wUuF+Cno^DHXG{>MH0(f;Dj}KFDrwHJX^BMBW(Cp4I zaLSV46OR3G=n2|LmaVbRaCEG2cGAmh8rCOdpHEHg9_%lckRd6n1}TS2*D=ypbG{DM7)iHY)wu8KnJ=#XycdX@j{ASZ`?G zP~n-p2!Ior7y6>ACb~o1*A7>AAWvnIo*Mpx6aR)~1v%KSKWjL)z6@$4PKwpKZCEaZ zN3J!HTbI3?^#01p>FKs_?;A>Oq4p4@cy{_AMa|v6;etGw*X~N*eY`98)uC4ZN;4;k zByWnLp^4Naqp{oK;tT=nh4u~Svt7?)GBT{{V{%H=zU14RC)>a@K?8$>Fu#VWq)^86 zaOg8*V-A%Vr8$LT_?1IXvg>plPpUTLq%uGMZvT^AsAHpUWyOeq7*yK1M(5eLh*t!FlWJSMjEt1dc$L9{ zqj+tB{@~dyEm7?)Y`Jk#n|iGOru3g?aC7I8@5OI_(<_ZOG2c&7%(fw0^z` zcfj_di{7WJOOZX?VH8Z3x1yNi(fGbcaf@@Hf<X+O>D<*g5MQXs@la}IXM;~_5=%@E#Gydz51)SH+l}U z`@1TC8QZ9!(c3$}w1o0%Ii@(t$HC0>#iUKVXt7?e_No2k>whok#t99q)x_J#HK0!8ODK*-YP~%RoVV*K>YyfVVg(1_O9KpEz5r4RCku zJWaCc2&=BKDj$y@`+%^ZFQxe1zxxU?Atz`{=^GH@-Uy zN$DSB03?$TaE*R-KE2+X3HMRXd;aQF5@z`E7P~<}zhda}c#*-6FP6ZZnk_|y&!eA# zeD{u)xVTQ?p*5wYpRB-$W+13w32%6F)zaE{O?-PJAdPA`|63e9obG)u6zPT?M%8?M zFM^&uWAY@nXx?96lXMFUxhHlTATqg$D7T>@Ab>lYk4i2~Pn!zu%zw|dT&*AcDCZye z1;9k7$E=>Tr|*j=YvU6#lt*V?#PwxjvfW`a=Y3!IyX4Q4{e1R6`(~uYQ~nCxdDdM+ zJlFD5I6B?YCrB=pVZxyA0;}oEWREu4P91CMcx{-z-fjLE5!C|3z|#5QjUI!)J%i`o z#^P}JuP=|d5x|i0Eb=sfRmppk2@rGGvJA{yF0Ut9WApvl@7A`hP)z18n|{;u^bDXn zw$%Jq0^X_eq=-L>C#2ZnZz%nq1`uA!Irw~~>p~T0y|*EbJ}mX?qM-it^zuWqM;D6p z#qrm;&}j7ORv*H8@OaO+(VUykY)0t=Lkz#Wn~UY?w`bkya&?x^3iyE%RrATMp?eEZ zU%DoZv1h=w^r|hdnFtUg0TeezS6%e2h!Aitd%B#>P5b;iWv@_g1z|K6c*s82T2M}l zzP)WTJGU}cw|;c1wl~#S6BR^OB52&LqMB6h)Mp$>%W>(8Re{dW&F!xBsml1EM+!rF z8JwI?NJ67+ZRU|gz#?U{s$a%o`LK1N8bEh~m4gA0saN-Ttuy%B&S~l~zmSlSrzg5W z2*af>;04G5zs);x+}DQP;RmQ<@kE)yfdL@5e#j0Y!^^n!4^}IEdn7e-Mv+1Nya|ou z8wKd%Q;R>NK}C)iNGvhz&OOpc|BpSh9XodI(MvidZNYqVrAtaH6Q!LIHr zRYTuWS8H5{0xtYi&ThR)Cmv(>c15#8?MS3pCyQ}f3x1)IxX6_WuGLjZAZc-8>J(^k z=S?-n9S^RT&QU&-^>XZ<`-~9Bm02y@#z4-)u3;q_WJh7keG)NGWu#XAo;w;*6RF41 z)%u(#?85GW3)gmyKevfO#kN>ip!WUAyaa7g35C(1{T}f}lK6QG8Nz9pM?pa;?J5zQ zY{45Aqj?)rvVB|swW}nTq3GX>6Mx5Q{*JWN>G+Q@PMhn(8 z14}Z0s;sQc_A#1AP<&`S2N?QQ{f`4=T^s3ra>JWAOft#0g_~rNzrWq*&Fdif z%b5y3SidXH9UKZy*UPpj2|upv^oucUH=Et2KXiBI(l?0#sLXZ7TRPSxUZN=vt!h4Fgm`A023{nM!+)Y7$OsDm^6CF); zOXP!XW7_+=I-lSZ-rpFM_rmjNCFS^p*!Kl#tbQj4HmB?!{Y5@iB4@;-gT{DdVs9jl zh}@9#`D{zv#eri#fBtQxo%_J_3$1C!8XqU8dQeuNLt{fdzk{Z%2Tj1R_@R`fcom%1 zytHVserw`17e#^H)|9u}^T1u0o}d3P*7P1=&0p`{9jmpyTOwrmls~2%he}Up1IRHT zOp7?qUSe#J$&8G|@vNM=Y;j80NL%ewN_&2)Vie+n^0NY)KH9FeV^r5X25hs|7S)Z| zQLlAd(;p!A_ca;Tx_zX_M8_hLApoIz?jqvUYx3~XBY7_`ula?ASl@G58~PiE)A2F3 z!-a6CqEUKYsp~giS^EGgZRg5aS|;r}#=K*$vhg$+AT??{2LDjf4lZDwY(|8pe3u+# z+yqX#aQTFWxgFr%ynIR5lPca)9Vo2SDP(=vLg^-8fFQ{J-9^O z?E@R9t*^lrTb5vLaq{j(##eaXs7XK*AZZW)yO!OVa3x_Ipu_>=+nI{1A~DRg9TST! zAA*@k0ulS@(W5(*=f`i-Gtz5LrfdNf1MiZon&s5kkaOGyl-R|<%K)pL@WJ^_i2BLU zMAMK~&w~kaXZOWbl0Jj*-!)5twgU9A^{)?sd#0OZQGQ@47Z;013KTQPGQl z_jp?4{Js&Q-wh=|S{L&X@uVM(@n)LCU|saCOCr{WAbF8{4QHi(h+m*e`)2+9bGx0;kaT5fr7V;~rYihTr$r>>|J(c4a z*S9*ArpK#jS8jw>u|5G^OW)+O6N$h`NRBiobtREKSlYrc3wMICT~%nP+v;xFeU)J9C{Jo>o=6+#OC*I(#7UBl{QK6t;n7P(p-1B7x`_6 z3A8+z$LsJ@Us9JkSh+D++n~t##gl*K=t2L%(Lwv?hZZ>)Z}W`_m`34q63y?L(;@sP znh$b5?9X~0GgPRzWq{ewU#J4cOZ#w}(oWJoN2r4E0$x*XT<umN892_~~_1kd5Ka5xFr%LjG>`W8F9{!-+24qz0#v>`2M9CC4 z#^e?dqyV0s|KW-BH>VL28cH+TSTH~I_@T#C4rVJf32lF&9d`j+@$^>}`)*tULJarSZ z=}YIU^gC>)D>SN41+d*FAg)9*i-%v3pYo)=^&u?{yFk$F;jjnL%D@Y%G-SF_`nv`; z<2rYI_Y2%3fwO6g8@)W`7E2r(KP?O^qep75JVHr$*c*)8ekv*PhQ~WWQh1%BZx{*s zmiNYqdS?5Zu|JywpgEc#wybjeP^kPymnRlL6NLicp95VT($dhK;W|S3D%NRivxU}P zw<;Qt0nIEd6#IWdA!5)QqG&^}dlYKq* z6_Kv$O&_tm$hsU)7^>#@VL-pXZw(UR*Yg*gbNS-#?EHQ2DAnlvZQXz3!MApfZ7gq^ zz)(RoYJlL&j{>K(5H>QE-7LAxLKUwm_$FHj3j?B`*~mWoPxMus++Es)CW263K-**OeFag)s3`k>R(6?_~qQ7iRgImCn>pKV2Dj*OIjN}FA ztlZxeI61FwwwDkEWSORhR+xwipnq)+9kG23H{Ur1SHo8S#x?9O&IY7sCYfxMk)T@~ zAe0A(D3^0P^U~4%SwLq(-^kY0T6KjpeJ|-=<`5cMMeH$S>thab-^N0eBYao-e{T1$ z;_8nJB*dPOg;KRymUEx)+J4Rc3UEyZhBAjPMv(8BBe06c`-GTyl<3jXk^NL@L$f~- z>Xk3t3Ax8AHaIvS?P;n2I=e!3Z)ksgPIL3uF3SftSzYT!K(v|=@s$E?ZEfX@7hjtH z_RZA_*51b}E?#5}c?jUBD*(+Qrx7?et9Lz^ic7d&{1jlUOGrNu6^m@?6AZ%bJ9)0% zgqL7pQyz+kHCg&QP-*Qy$jZuYg0+8AG&Lp(EsUrpJ+DOk3kU6lDpe-;?5kzSQwKm2 z1#NH}lR4v*l$3f~JtN&U2*%LBAef&#>=*&Sje~qm9sshQZ}mcfa#7*zfg!Y+&6~ zF*w2vV0{)vYUSz$9)+)8qn$bTxe$m0vg3VxluyLsx7-|hzxjJdN0)ck|FA1GZi9V% z1kd!L&csiN0+dHN&(9QOK0WrSDo>IU%$r?^*kJt|XN;@_YuX9I-XQt_3E;lH6RtrH z;qTzzG2+VM6Io5q8wRE8il^;sBIL5ZbAjKH;Y=b*5_hWizd_l4<0OX0tDY?I~j^)b&1pq6q~axmnK3i_mXkYBrp?$dw$9^k`=ka?1%u?N)><_&e?^Xwtg6 zz^wtb*|+Re6n@FkN@W@yhi)J{-r3BK87R=qlqu*N9!^v^KkBpBZ$uK_6moG2q=%I{ zfAM4~-HPWCcHOr(gl%4rsr{Uo3h>r)TAq9N?g@CD5RY3_A!Qb8I%ua!eUY-R!LA4u z4n!oYQ%#N{FjS_$K{51xJvmT#r9C9x z1BLFok5hpe>IKcTD!po zyr-k~q~L7hgD-yZG?k$JeYo4kK+U7RvDzpmfUSuyOS8tMrLj6XIu4CvEXxIV?#<>u zIIaY$`&uTD$;7{fhM>)Rx{E8^@+V6qHllg_J-?6-`q`nif&fk#c2m2w=rXamcpW(y z&oU*Le`YCcz?v-c<+1^I^`nzd-Z9?`ASr&kCcOUQL&!i`jT~5g<2OpOYB4)gd(>Gh zYQ8X>slaK@9J7opmKFJ%{j$XW_6Tp^utR%SRexd1)HqNIcbVba$(1)59?b`{X`IKY zx>(EiImu8e2dLBCd^F21ZlL&vbd3h_{SFHX^qzoxndkds4ZN5tP%MD@mRkY%rY?tGQftOPeK7e`>E?e>xAGxWrPLjEyACnY z0@!tQQE+y}&|?v+PNT!4$$+AwER`D}VWGUHp3KI8 zdY>Rt*R80Am7Z74wE6ctw~dJ!eT=lr{JlJlOzSYh_3?_WT5BQ=JM{C|aGs{q@c}{Q z)hn^4JE6}nWBGl3e*)lPF~tUHPMErlw!g;3HGdtj+Eh4`^za#i!o^0`km1!+68d&y<{1Ta(8A+$a*#{8>*4ZT z-}B16ygahj0`Aijg{}+9GFCT`NDgX!8^1Jh7!LsUZBC-u3-!ywzxXN8RS}u5A9X=4E`roLCW_@%RTh8|3Yh$DDX9;@BL`T+nk7vTUBD}%qy*wrUkNmI zB%O+V@#Cx2BA1#52T_0bM~r=f(kYbWrv1 zV1%3+1mm;JVtvo>_kZg9Y@dRWm%eYS>_mA&?lmYD(z^;~GY*e?|9MQMapH4nj%U#;+p9ZOl%6w7(%%UsN zuPyL$NumI^b=iEGWe0SAQ6KQxEaj$!B&;F`yS9fXG5yYDKx+LVst%bEeR7G#bttq>3pSvm?CE())TVc_4RE;iSO+T7#D4k&`ZZDWAJEES{BLSKh?Jly z?u|bG2owV?EiGng7pZ^hrpMIJq|tIK{o36il&%o;r`1fY3f1%;NQi~fcu zy7FoVCSQD*2iGroP5QC?Khiy*)4%;67Rmo^QT^ZF f|0@`2CXyF1q}M`)3^D;rI_R0QhEnlk)4+cN!5pD4 literal 0 HcmV?d00001 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 0d72a59bb4d..71173c0199d 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,13 @@ import { css } from '@emotion/react'; import { EuiBetaBadge, EuiSpacer, EuiTitle } from '../../../../src/components'; -const colors = ['hollow', 'accent', 'subdued', 'warning'] as const; +const colors = [ + 'hollow', + 'accent', + 'accentSecondary', + 'subdued', + 'warning', +] 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 ce00526e2f1..fd18535655e 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 c50cd2d1393..270a131ec10 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 77e3e5d4363..75dd6550018 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,13 @@ import { EuiIcon, IconType } from '../../icon'; import { euiBetaBadgeStyles } from './beta_badge.styles'; -export const COLORS = ['accent', 'subdued', 'hollow', 'warning'] as const; +export const COLORS = [ + 'accent', + 'accentSecondary', + 'subdued', + 'hollow', + 'warning', +] 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 multi 1`] = ` +
+ + test + +
+ + + +
+
+`; + +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 00310879bec..91ec7ae1268 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`] = `