@ember-eui/core 16.0.4 → 16.0.5

package/dist/utils/eui/theme.js

@@ -1,5 +1,2044 @@
-import { EuiThemeBorealis } from '@elastic/eui-theme-borealis';
-import { getComputed, buildTheme } from '@elastic/eui-theme-common';
+import chroma from 'chroma-js';
+import { c as computed, f as formatMultipleBoxShadow, b as buildTheme, g as getComputed } from '../../eui-theme/utils-BRBkLo19.js';
+import { m as mathWithUnits } from '../../eui-theme/math-alopvQAs.js';
+
+/*
+ * 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
+ */
+const sizeToPixel = (scale = 1) => themeOrBase => {
+  const base = typeof themeOrBase === 'object' ? themeOrBase.base : themeOrBase;
+  return `${base * scale}px`;
+};
+
+/*
+ * 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 PRIMITIVE_COLORS = {
+  white: '#FFFFFF',
+  black: '#000000',
+  blueBlack: '#07101F',
+  transparent: 'transparent',
+  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: '#F1F6FF',
+  blue20: '#D9E8FF',
+  blue30: '#BFDBFF',
+  blue40: '#A3CBFF',
+  blue50: '#85B7FF',
+  blue60: '#61A2FF',
+  blue70: '#3788FF',
+  blue80: '#2476F0',
+  blue90: '#0B64DD',
+  blue100: '#1750BA',
+  blue110: '#154399',
+  blue120: '#123778',
+  blue130: '#0D2F5E',
+  blue140: '#0A2342',
+  sky10: '#ECFBFF',
+  sky20: '#CFEEF7',
+  sky30: '#B5E5F2',
+  sky40: '#94D8EB',
+  sky50: '#63C8E3',
+  sky60: '#37B8DC',
+  sky70: '#0dA1C9',
+  sky80: '#1C8CB5',
+  sky90: '#19799F',
+  sky100: '#0F658A',
+  sky110: '#055476',
+  sky120: '#00425C',
+  sky130: '#003447',
+  sky140: '#002938',
+  teal10: '#EAFBFA',
+  teal20: '#C9F3F0',
+  teal30: '#A6EDEA',
+  teal40: '#77E5E0',
+  teal50: '#51D6D2',
+  teal60: '#16C5C0',
+  teal70: '#00B0AA',
+  teal80: '#009E99',
+  teal90: '#008B87',
+  teal100: '#047471',
+  teal110: '#065B58',
+  teal120: '#044949',
+  teal130: '#023436',
+  teal140: '#03282B',
+  pink10: '#FFF0F8',
+  pink20: '#FDDDE9',
+  pink30: '#FFC7DB',
+  pink40: '#FBADCA',
+  pink50: '#F58EB7',
+  pink60: '#EE72A6',
+  pink70: '#E54A91',
+  pink80: '#D13680',
+  pink90: '#BC1E70',
+  pink100: '#A11262',
+  pink110: '#831652',
+  pink120: '#5E2140',
+  pink130: '#481E32',
+  pink140: '#351725',
+  green10: '#E9FFF7',
+  green20: '#C9F3E3',
+  green30: '#AEE8D2',
+  green40: '#88E3C3',
+  green50: '#59CFAA',
+  green60: '#24C292',
+  green70: '#04AE7E',
+  green80: '#00996B',
+  green90: '#008A5E',
+  green100: '#09724D',
+  green110: '#0C5A3F',
+  green120: '#094837',
+  green130: '#0D362B',
+  green140: '#092A26',
+  yellow10: '#FFF7E2',
+  yellow20: '#FDE9B5',
+  yellow30: '#FCD883',
+  yellow40: '#FACB3D',
+  yellow50: '#F5BC00',
+  yellow60: '#EAAE01',
+  yellow70: '#CA9601',
+  yellow80: '#AD7E00',
+  yellow90: '#966B03',
+  yellow100: '#825803',
+  yellow110: '#6A4906',
+  yellow120: '#513910',
+  yellow130: '#3D3014',
+  yellow140: '#2C2721',
+  orange10: '#FFF3E3',
+  orange20: '#FFDEBF',
+  orange30: '#FFCDA1',
+  orange40: '#FFB787',
+  orange50: '#FF995E',
+  orange60: '#FC8544',
+  orange70: '#ED6723',
+  orange80: '#DB541B',
+  orange90: '#C24411',
+  orange100: '#9E3A16',
+  orange110: '#782E18',
+  orange120: '#5E281A',
+  orange130: '#4A221C',
+  orange140: '#361D18',
+  red10: '#FFF3F1',
+  red20: '#FDDDD8',
+  red30: '#FFC9C2',
+  red40: '#FFB5AD',
+  red50: '#FC9188',
+  red60: '#F6726A',
+  red70: '#EE4C48',
+  red80: '#DA3737',
+  red90: '#C61E25',
+  red100: '#A71627',
+  red110: '#7F1F27',
+  red120: '#5E2129',
+  red130: '#491D27',
+  red140: '#351721',
+  purple10: '#F7F2FF',
+  purple20: '#ECE2FE',
+  purple30: '#E2D3FE',
+  purple40: '#D1BAFC',
+  purple50: '#C5A5FA',
+  purple60: '#B386F9',
+  purple70: '#A36DEF',
+  purple80: '#925CDA',
+  purple90: '#8144CC',
+  purple100: '#6B3C9F',
+  purple110: '#52357E',
+  purple120: '#3E2C63',
+  purple130: '#322452',
+  purple140: '#2A1E3E'
+};
+
+/*
+ * 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 _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,
+  neutral10: PRIMITIVE_COLORS.sky10,
+  neutral20: PRIMITIVE_COLORS.sky20,
+  neutral30: PRIMITIVE_COLORS.sky30,
+  neutral40: PRIMITIVE_COLORS.sky40,
+  neutral50: PRIMITIVE_COLORS.sky50,
+  neutral60: PRIMITIVE_COLORS.sky60,
+  neutral70: PRIMITIVE_COLORS.sky70,
+  neutral80: PRIMITIVE_COLORS.sky80,
+  neutral90: PRIMITIVE_COLORS.sky90,
+  neutral100: PRIMITIVE_COLORS.sky100,
+  neutral110: PRIMITIVE_COLORS.sky110,
+  neutral120: PRIMITIVE_COLORS.sky120,
+  neutral130: PRIMITIVE_COLORS.sky130,
+  neutral140: PRIMITIVE_COLORS.sky140,
+  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,
+  risk10: PRIMITIVE_COLORS.orange10,
+  risk20: PRIMITIVE_COLORS.orange20,
+  risk30: PRIMITIVE_COLORS.orange30,
+  risk40: PRIMITIVE_COLORS.orange40,
+  risk50: PRIMITIVE_COLORS.orange50,
+  risk60: PRIMITIVE_COLORS.orange60,
+  risk70: PRIMITIVE_COLORS.orange70,
+  risk80: PRIMITIVE_COLORS.orange80,
+  risk90: PRIMITIVE_COLORS.orange90,
+  risk100: PRIMITIVE_COLORS.orange100,
+  risk110: PRIMITIVE_COLORS.orange110,
+  risk120: PRIMITIVE_COLORS.orange120,
+  risk130: PRIMITIVE_COLORS.orange130,
+  risk140: PRIMITIVE_COLORS.orange140,
+  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
+};
+const _semantic_rgb_colors = {
+  plainLightRGB: chroma(_semantic_colors.plainLight).rgb().join(),
+  primary70RGB: chroma(_semantic_colors.primary70).rgb().join(),
+  primary100RGB: chroma(_semantic_colors.primary100).rgb().join(),
+  accent70RGB: chroma(_semantic_colors.accent70).rgb().join(),
+  accentSecondary70RGB: chroma(_semantic_colors.accentSecondary70).rgb().join(),
+  neutral70RGB: chroma(_semantic_colors.neutral70).rgb().join(),
+  success70RGB: chroma(_semantic_colors.success70).rgb().join(),
+  warning60RGB: chroma(_semantic_colors.warning60).rgb().join(),
+  risk60RGB: chroma(_semantic_colors.risk60).rgb().join(),
+  danger70RGB: chroma(_semantic_colors.danger70).rgb().join(),
+  assistance70RGB: chroma(_semantic_colors.assistance70).rgb().join(),
+  shade100RGB: chroma(_semantic_colors.shade100).rgb().join(),
+  shade120RGB: chroma(_semantic_colors.shade120).rgb().join(),
+  shade140RGB: chroma(_semantic_colors.shade140).rgb().join()
+};
+const _semantic_alpha_colors = {
+  plainLightAlpha8: `rgba(${_semantic_rgb_colors.plainLightRGB}, 0.08)`,
+  plainLightAlpha12: `rgba(${_semantic_rgb_colors.plainLightRGB}, 0.12)`,
+  plainLightAlpha16: `rgba(${_semantic_rgb_colors.plainLightRGB}, 0.16)`,
+  plainLightAlpha32: `rgba(${_semantic_rgb_colors.plainLightRGB}, 0.32)`,
+  primary70Alpha12: `rgba(${_semantic_rgb_colors.primary70RGB}, 0.12)`,
+  primary70Alpha16: `rgba(${_semantic_rgb_colors.primary70RGB}, 0.16)`,
+  primary70Alpha20: `rgba(${_semantic_rgb_colors.primary70RGB}, 0.2)`,
+  primary100Alpha4: `rgba(${_semantic_rgb_colors.primary100RGB}, 0.04)`,
+  primary100Alpha8: `rgba(${_semantic_rgb_colors.primary100RGB}, 0.08)`,
+  primary100Alpha12: `rgba(${_semantic_rgb_colors.primary100RGB}, 0.12)`,
+  accent70Alpha12: `rgba(${_semantic_rgb_colors.accent70RGB}, 0.12)`,
+  accent70Alpha16: `rgba(${_semantic_rgb_colors.accent70RGB}, 0.16)`,
+  accent70Alpha20: `rgba(${_semantic_rgb_colors.accent70RGB}, 0.2)`,
+  accentSecondary70Alpha12: `rgba(${_semantic_rgb_colors.accentSecondary70RGB}, 0.12)`,
+  accentSecondary70Alpha16: `rgba(${_semantic_rgb_colors.accentSecondary70RGB}, 0.16)`,
+  accentSecondary70Alpha20: `rgba(${_semantic_rgb_colors.accentSecondary70RGB}, 0.2)`,
+  neutral70Alpha12: `rgba(${_semantic_rgb_colors.neutral70RGB}, 0.12)`,
+  neutral70Alpha16: `rgba(${_semantic_rgb_colors.neutral70RGB}, 0.16)`,
+  neutral70Alpha20: `rgba(${_semantic_rgb_colors.neutral70RGB}, 0.2)`,
+  success70Alpha12: `rgba(${_semantic_rgb_colors.success70RGB}, 0.12)`,
+  success70Alpha16: `rgba(${_semantic_rgb_colors.success70RGB}, 0.16)`,
+  success70Alpha20: `rgba(${_semantic_rgb_colors.success70RGB}, 0.2)`,
+  warning60Alpha12: `rgba(${_semantic_rgb_colors.warning60RGB}, 0.12)`,
+  warning60Alpha16: `rgba(${_semantic_rgb_colors.warning60RGB}, 0.16)`,
+  warning60Alpha20: `rgba(${_semantic_rgb_colors.warning60RGB}, 0.2)`,
+  risk60Alpha12: `rgba(${_semantic_rgb_colors.risk60RGB}, 0.12)`,
+  risk60Alpha16: `rgba(${_semantic_rgb_colors.risk60RGB}, 0.16)`,
+  risk60Alpha20: `rgba(${_semantic_rgb_colors.risk60RGB}, 0.2)`,
+  danger70Alpha12: `rgba(${_semantic_rgb_colors.danger70RGB}, 0.12)`,
+  danger70Alpha16: `rgba(${_semantic_rgb_colors.danger70RGB}, 0.16)`,
+  danger70Alpha20: `rgba(${_semantic_rgb_colors.danger70RGB}, 0.2)`,
+  assistance70Alpha12: `rgba(${_semantic_rgb_colors.assistance70RGB}, 0.12)`,
+  shade100Alpha4: `rgba(${_semantic_rgb_colors.shade100RGB}, 0.04)`,
+  shade100Alpha16: `rgba(${_semantic_rgb_colors.shade100RGB}, 0.16)`,
+  shade100Alpha24: `rgba(${_semantic_rgb_colors.shade100RGB}, 0.24)`,
+  shade100Alpha70: `rgba(${_semantic_rgb_colors.shade100RGB}, 0.7)`,
+  shade120Alpha70: `rgba(${_semantic_rgb_colors.shade120RGB}, 0.7)`
+};
+const SEMANTIC_COLORS = {
+  ..._semantic_colors,
+  ..._semantic_alpha_colors,
+  ..._semantic_rgb_colors
+};
+
+/*
+ * 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.
+ */
+/*
+ * LIGHT THEME
+ */
+const brand_colors = {
+  primary: SEMANTIC_COLORS.primary90,
+  accent: SEMANTIC_COLORS.accent90,
+  accentSecondary: SEMANTIC_COLORS.accentSecondary90,
+  success: SEMANTIC_COLORS.success90,
+  warning: SEMANTIC_COLORS.warning40,
+  danger: SEMANTIC_COLORS.danger90
+};
+const brand_text_colors = {
+  /* Legacy colors */
+  primaryText: SEMANTIC_COLORS.primary100,
+  accentText: SEMANTIC_COLORS.accent100,
+  successText: SEMANTIC_COLORS.success100,
+  warningText: SEMANTIC_COLORS.warning100,
+  dangerText: SEMANTIC_COLORS.danger100,
+  /* New colors */
+  textPrimary: SEMANTIC_COLORS.primary100,
+  textAccent: SEMANTIC_COLORS.accent100,
+  textAccentSecondary: SEMANTIC_COLORS.accentSecondary100,
+  textNeutral: SEMANTIC_COLORS.neutral100,
+  textSuccess: SEMANTIC_COLORS.success100,
+  textWarning: SEMANTIC_COLORS.warning100,
+  textRisk: SEMANTIC_COLORS.risk100,
+  textDanger: SEMANTIC_COLORS.danger100,
+  textAssistance: SEMANTIC_COLORS.assistance100
+};
+const text_colors = {
+  /* Legacy colors */
+  text: SEMANTIC_COLORS.shade110,
+  title: SEMANTIC_COLORS.shade140,
+  subduedText: SEMANTIC_COLORS.shade95,
+  link: SEMANTIC_COLORS.primary100,
+  /* New colors */
+  textParagraph: SEMANTIC_COLORS.shade110,
+  textHeading: SEMANTIC_COLORS.shade140,
+  textSubdued: SEMANTIC_COLORS.shade95,
+  textDisabled: SEMANTIC_COLORS.shade70,
+  textInverse: SEMANTIC_COLORS.plainLight,
+  textInk: SEMANTIC_COLORS.plainDark,
+  textGhost: SEMANTIC_COLORS.plainLight
+};
+const shade_colors = {
+  emptyShade: SEMANTIC_COLORS.plainLight,
+  lightestShade: SEMANTIC_COLORS.shade15,
+  lightShade: SEMANTIC_COLORS.shade30,
+  mediumShade: SEMANTIC_COLORS.shade60,
+  darkShade: SEMANTIC_COLORS.shade90,
+  darkestShade: SEMANTIC_COLORS.shade120,
+  fullShade: SEMANTIC_COLORS.plainDark
+};
+const background_colors = {
+  backgroundBasePrimary: SEMANTIC_COLORS.primary10,
+  backgroundBaseAccent: SEMANTIC_COLORS.accent10,
+  backgroundBaseAccentSecondary: SEMANTIC_COLORS.accentSecondary10,
+  backgroundBaseNeutral: SEMANTIC_COLORS.neutral10,
+  backgroundBaseSuccess: SEMANTIC_COLORS.success10,
+  backgroundBaseWarning: SEMANTIC_COLORS.warning10,
+  backgroundBaseRisk: SEMANTIC_COLORS.risk10,
+  backgroundBaseDanger: SEMANTIC_COLORS.danger10,
+  backgroundBaseAssistance: SEMANTIC_COLORS.assistance10,
+  backgroundBaseRecessed: SEMANTIC_COLORS.shade10,
+  backgroundBaseSubdued: SEMANTIC_COLORS.shade10,
+  backgroundBasePlain: SEMANTIC_COLORS.plainLight,
+  backgroundBaseDisabled: SEMANTIC_COLORS.shade15,
+  backgroundBaseHighlighted: SEMANTIC_COLORS.shade10,
+  backgroundBaseFormsPrepend: SEMANTIC_COLORS.shade15,
+  backgroundBaseFormsControlDisabled: SEMANTIC_COLORS.shade30,
+  backgroundBaseInteractiveHover: SEMANTIC_COLORS.primary100Alpha4,
+  backgroundBaseInteractiveHoverAssistance: SEMANTIC_COLORS.assistance20,
+  backgroundBaseInteractiveSelect: SEMANTIC_COLORS.primary10,
+  backgroundBaseInteractiveSelectHover: SEMANTIC_COLORS.primary20,
+  backgroundBaseInteractiveOverlay: SEMANTIC_COLORS.shade100Alpha70,
+  backgroundBaseSkeletonEdge: SEMANTIC_COLORS.shade100Alpha16,
+  backgroundBaseSkeletonMiddle: SEMANTIC_COLORS.shade100Alpha4,
+  backgroundLightPrimary: SEMANTIC_COLORS.primary20,
+  backgroundLightAccent: SEMANTIC_COLORS.accent20,
+  backgroundLightAccentSecondary: SEMANTIC_COLORS.accentSecondary20,
+  backgroundLightNeutral: SEMANTIC_COLORS.neutral20,
+  backgroundLightSuccess: SEMANTIC_COLORS.success20,
+  backgroundLightWarning: SEMANTIC_COLORS.warning20,
+  backgroundLightRisk: SEMANTIC_COLORS.risk20,
+  backgroundLightDanger: SEMANTIC_COLORS.danger20,
+  backgroundLightAssistance: SEMANTIC_COLORS.assistance20,
+  backgroundLightText: SEMANTIC_COLORS.shade20,
+  backgroundFilledPrimary: SEMANTIC_COLORS.primary90,
+  backgroundFilledAccent: SEMANTIC_COLORS.accent90,
+  backgroundFilledAccentSecondary: SEMANTIC_COLORS.accentSecondary90,
+  backgroundFilledNeutral: SEMANTIC_COLORS.neutral80,
+  backgroundFilledSuccess: SEMANTIC_COLORS.success90,
+  backgroundFilledWarning: SEMANTIC_COLORS.warning40,
+  backgroundFilledRisk: SEMANTIC_COLORS.risk70,
+  backgroundFilledDanger: SEMANTIC_COLORS.danger90,
+  backgroundFilledAssistance: SEMANTIC_COLORS.assistance90,
+  backgroundFilledText: SEMANTIC_COLORS.shade90
+};
+/**
+ * NOTE: temp values for migration - these should not be used,
+ * use backgroundBase tokens instead
+ * TODO: remove once obsolete
+ */
+const transparent_background_colors = {
+  backgroundTransparent: PRIMITIVE_COLORS.transparent,
+  backgroundTransparentPrimary: background_colors.backgroundBasePrimary,
+  backgroundTransparentAccent: background_colors.backgroundBaseAccent,
+  backgroundTransparentAccentSecondary: background_colors.backgroundBaseAccentSecondary,
+  backgroundTransparentNeutral: background_colors.backgroundBaseNeutral,
+  backgroundTransparentSuccess: background_colors.backgroundBaseSuccess,
+  backgroundTransparentWarning: background_colors.backgroundBaseWarning,
+  backgroundTransparentRisk: background_colors.backgroundBaseRisk,
+  backgroundTransparentDanger: background_colors.backgroundBaseDanger,
+  backgroundTransparentSubdued: SEMANTIC_COLORS.shade15,
+  backgroundTransparentHighlighted: SEMANTIC_COLORS.shade15,
+  backgroundTransparentPlain: SEMANTIC_COLORS.shade15
+};
+const border_colors = {
+  borderBasePrimary: SEMANTIC_COLORS.primary30,
+  borderBaseAccent: SEMANTIC_COLORS.accent30,
+  borderBaseAccentSecondary: SEMANTIC_COLORS.accentSecondary30,
+  borderBaseNeutral: SEMANTIC_COLORS.neutral30,
+  borderBaseSuccess: SEMANTIC_COLORS.success30,
+  borderBaseWarning: SEMANTIC_COLORS.warning30,
+  borderBaseRisk: SEMANTIC_COLORS.risk30,
+  borderBaseDanger: SEMANTIC_COLORS.danger30,
+  borderBaseAssistance: SEMANTIC_COLORS.assistance30,
+  borderBasePlain: SEMANTIC_COLORS.shade30,
+  borderBaseSubdued: SEMANTIC_COLORS.shade20,
+  borderBaseProminent: SEMANTIC_COLORS.shade50,
+  borderBaseDisabled: SEMANTIC_COLORS.shade30,
+  borderBaseFloating: PRIMITIVE_COLORS.transparent,
+  borderBaseFormsColorSwatch: SEMANTIC_COLORS.shade100Alpha24,
+  borderInteractiveFormsHoverPlain: SEMANTIC_COLORS.shade40,
+  borderInteractiveFormsHoverProminent: SEMANTIC_COLORS.shade70,
+  borderInteractiveFormsHoverDanger: SEMANTIC_COLORS.danger80,
+  borderStrongPrimary: SEMANTIC_COLORS.primary90,
+  borderStrongAccent: SEMANTIC_COLORS.accent90,
+  borderStrongAccentSecondary: SEMANTIC_COLORS.accentSecondary90,
+  borderStrongNeutral: SEMANTIC_COLORS.neutral90,
+  borderStrongSuccess: SEMANTIC_COLORS.success90,
+  borderStrongWarning: SEMANTIC_COLORS.warning90,
+  borderStrongRisk: SEMANTIC_COLORS.risk90,
+  borderStrongDanger: SEMANTIC_COLORS.danger90,
+  borderStrongAssistance: SEMANTIC_COLORS.assistance90,
+  borderStrongText: SEMANTIC_COLORS.shade90
+};
+const special_colors = {
+  body: SEMANTIC_COLORS.shade15,
+  highlight: SEMANTIC_COLORS.primary10,
+  disabled: SEMANTIC_COLORS.shade20,
+  disabledText: SEMANTIC_COLORS.shade80,
+  shadow: PRIMITIVE_COLORS.black
+};
+const light_colors = {
+  ...brand_colors,
+  ...shade_colors,
+  ...special_colors,
+  ...brand_text_colors,
+  ...text_colors,
+  ...background_colors,
+  ...transparent_background_colors,
+  ...border_colors
+};
+
+/*
+ * 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.
+ */
+/*
+ * DARK THEME
+ */
+const dark_brand_colors = {
+  primary: SEMANTIC_COLORS.primary60,
+  accent: SEMANTIC_COLORS.accent60,
+  accentSecondary: SEMANTIC_COLORS.accentSecondary60,
+  success: SEMANTIC_COLORS.success60,
+  warning: SEMANTIC_COLORS.warning40,
+  danger: SEMANTIC_COLORS.danger60
+};
+const dark_brand_text_colors = {
+  /* 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,
+  textNeutral: SEMANTIC_COLORS.neutral60,
+  textSuccess: SEMANTIC_COLORS.success60,
+  textWarning: SEMANTIC_COLORS.warning30,
+  textRisk: SEMANTIC_COLORS.risk50,
+  textDanger: SEMANTIC_COLORS.danger60,
+  textAssistance: SEMANTIC_COLORS.assistance50
+};
+const dark_text_colors = {
+  /* Legacy colors */
+  text: SEMANTIC_COLORS.shade40,
+  title: SEMANTIC_COLORS.shade20,
+  subduedText: SEMANTIC_COLORS.shade55,
+  link: SEMANTIC_COLORS.primary60,
+  /* New colors */
+  textParagraph: SEMANTIC_COLORS.shade40,
+  textHeading: SEMANTIC_COLORS.shade20,
+  textSubdued: SEMANTIC_COLORS.shade55,
+  textDisabled: SEMANTIC_COLORS.shade80,
+  textInverse: SEMANTIC_COLORS.plainDark,
+  textInk: SEMANTIC_COLORS.plainDark,
+  textGhost: SEMANTIC_COLORS.plainLight
+};
+const dark_shades = {
+  emptyShade: SEMANTIC_COLORS.shade140,
+  lightestShade: SEMANTIC_COLORS.shade135,
+  lightShade: SEMANTIC_COLORS.shade125,
+  mediumShade: SEMANTIC_COLORS.shade95,
+  darkShade: SEMANTIC_COLORS.shade75,
+  darkestShade: SEMANTIC_COLORS.shade30,
+  fullShade: SEMANTIC_COLORS.plainLight
+};
+const dark_background_colors = {
+  backgroundBasePrimary: SEMANTIC_COLORS.primary140,
+  backgroundBaseAccent: SEMANTIC_COLORS.accent140,
+  backgroundBaseAccentSecondary: SEMANTIC_COLORS.accentSecondary140,
+  backgroundBaseNeutral: SEMANTIC_COLORS.neutral140,
+  backgroundBaseSuccess: SEMANTIC_COLORS.success140,
+  backgroundBaseWarning: SEMANTIC_COLORS.warning140,
+  backgroundBaseRisk: SEMANTIC_COLORS.risk140,
+  backgroundBaseDanger: SEMANTIC_COLORS.danger140,
+  backgroundBaseAssistance: SEMANTIC_COLORS.assistance140,
+  backgroundBaseRecessed: SEMANTIC_COLORS.plainDark,
+  backgroundBaseSubdued: SEMANTIC_COLORS.shade145,
+  backgroundBasePlain: SEMANTIC_COLORS.shade140,
+  backgroundBaseDisabled: SEMANTIC_COLORS.shade130,
+  backgroundBaseHighlighted: SEMANTIC_COLORS.shade135,
+  backgroundBaseFormsPrepend: SEMANTIC_COLORS.shade125,
+  backgroundBaseFormsControlDisabled: SEMANTIC_COLORS.shade120,
+  backgroundBaseInteractiveHover: SEMANTIC_COLORS.plainLightAlpha8,
+  backgroundBaseInteractiveHoverAssistance: SEMANTIC_COLORS.assistance130,
+  backgroundBaseInteractiveSelect: SEMANTIC_COLORS.primary130,
+  backgroundBaseInteractiveSelectHover: SEMANTIC_COLORS.primary120,
+  backgroundBaseInteractiveOverlay: SEMANTIC_COLORS.shade120Alpha70,
+  backgroundBaseSkeletonEdge: SEMANTIC_COLORS.plainLightAlpha16,
+  backgroundBaseSkeletonMiddle: SEMANTIC_COLORS.plainLightAlpha8,
+  backgroundLightPrimary: SEMANTIC_COLORS.primary130,
+  backgroundLightAccent: SEMANTIC_COLORS.accent130,
+  backgroundLightAccentSecondary: SEMANTIC_COLORS.accentSecondary130,
+  backgroundLightNeutral: SEMANTIC_COLORS.neutral130,
+  backgroundLightSuccess: SEMANTIC_COLORS.success130,
+  backgroundLightWarning: SEMANTIC_COLORS.warning130,
+  backgroundLightRisk: SEMANTIC_COLORS.risk130,
+  backgroundLightDanger: SEMANTIC_COLORS.danger130,
+  backgroundLightAssistance: SEMANTIC_COLORS.assistance120,
+  backgroundLightText: SEMANTIC_COLORS.shade120,
+  backgroundFilledPrimary: SEMANTIC_COLORS.primary60,
+  backgroundFilledAccent: SEMANTIC_COLORS.accent60,
+  backgroundFilledAccentSecondary: SEMANTIC_COLORS.accentSecondary60,
+  backgroundFilledNeutral: SEMANTIC_COLORS.neutral50,
+  backgroundFilledSuccess: SEMANTIC_COLORS.success60,
+  backgroundFilledWarning: SEMANTIC_COLORS.warning40,
+  backgroundFilledRisk: SEMANTIC_COLORS.risk50,
+  backgroundFilledDanger: SEMANTIC_COLORS.danger60,
+  backgroundFilledAssistance: SEMANTIC_COLORS.assistance50,
+  backgroundFilledText: SEMANTIC_COLORS.shade60
+};
+/**
+ * NOTE: temp values for migration - these should not be used,
+ * use backgroundBase tokens instead
+ * TODO: remove once obsolete
+ */
+const dark_transparent_background_colors = {
+  backgroundTransparent: PRIMITIVE_COLORS.transparent,
+  backgroundTransparentPrimary: dark_background_colors.backgroundBasePrimary,
+  backgroundTransparentAccent: dark_background_colors.backgroundBaseAccent,
+  backgroundTransparentAccentSecondary: dark_background_colors.backgroundBaseAccent,
+  backgroundTransparentNeutral: dark_background_colors.backgroundBaseNeutral,
+  backgroundTransparentSuccess: dark_background_colors.backgroundBaseSuccess,
+  backgroundTransparentWarning: dark_background_colors.backgroundBaseWarning,
+  backgroundTransparentRisk: dark_background_colors.backgroundBaseRisk,
+  backgroundTransparentDanger: dark_background_colors.backgroundBaseDanger,
+  backgroundTransparentSubdued: dark_background_colors.backgroundBaseSubdued,
+  backgroundTransparentHighlighted: dark_background_colors.backgroundBaseSubdued,
+  backgroundTransparentPlain: dark_background_colors.backgroundBasePlain
+};
+const dark_border_colors = {
+  borderBasePrimary: SEMANTIC_COLORS.primary120,
+  borderBaseAccent: SEMANTIC_COLORS.accent120,
+  borderBaseAccentSecondary: SEMANTIC_COLORS.accentSecondary120,
+  borderBaseNeutral: SEMANTIC_COLORS.neutral120,
+  borderBaseSuccess: SEMANTIC_COLORS.success120,
+  borderBaseWarning: SEMANTIC_COLORS.warning120,
+  borderBaseRisk: SEMANTIC_COLORS.risk120,
+  borderBaseDanger: SEMANTIC_COLORS.danger120,
+  borderBaseAssistance: SEMANTIC_COLORS.assistance120,
+  borderBasePlain: SEMANTIC_COLORS.shade100,
+  borderBaseSubdued: SEMANTIC_COLORS.shade120,
+  borderBaseProminent: SEMANTIC_COLORS.shade80,
+  borderBaseDisabled: SEMANTIC_COLORS.shade100,
+  borderBaseFloating: SEMANTIC_COLORS.shade120,
+  borderBaseFormsColorSwatch: SEMANTIC_COLORS.plainLightAlpha32,
+  borderInteractiveFormsHoverPlain: SEMANTIC_COLORS.shade90,
+  borderInteractiveFormsHoverProminent: SEMANTIC_COLORS.shade60,
+  borderInteractiveFormsHoverDanger: SEMANTIC_COLORS.danger70,
+  borderStrongPrimary: SEMANTIC_COLORS.primary60,
+  borderStrongAccent: SEMANTIC_COLORS.accent60,
+  borderStrongAccentSecondary: SEMANTIC_COLORS.accentSecondary60,
+  borderStrongNeutral: SEMANTIC_COLORS.neutral60,
+  borderStrongSuccess: SEMANTIC_COLORS.success60,
+  borderStrongWarning: SEMANTIC_COLORS.warning40,
+  borderStrongRisk: SEMANTIC_COLORS.risk50,
+  borderStrongDanger: SEMANTIC_COLORS.danger60,
+  borderStrongAssistance: SEMANTIC_COLORS.assistance60,
+  borderStrongText: SEMANTIC_COLORS.shade60
+};
+const dark_special_colors = {
+  body: SEMANTIC_COLORS.plainDark,
+  highlight: SEMANTIC_COLORS.primary100,
+  disabled: SEMANTIC_COLORS.shade130,
+  disabledText: SEMANTIC_COLORS.shade80,
+  shadow: PRIMITIVE_COLORS.black
+};
+const dark_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
+};
+
+/*
+ * 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.
+ */
+// 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: SEMANTIC_COLORS.accentSecondary60
+  },
+  euiColorVis1: {
+    graphic: SEMANTIC_COLORS.accentSecondary30
+  },
+  euiColorVis2: {
+    graphic: SEMANTIC_COLORS.primary60
+  },
+  euiColorVis3: {
+    graphic: SEMANTIC_COLORS.primary30
+  },
+  euiColorVis4: {
+    graphic: SEMANTIC_COLORS.accent60
+  },
+  euiColorVis5: {
+    graphic: SEMANTIC_COLORS.accent30
+  },
+  euiColorVis6: {
+    graphic: SEMANTIC_COLORS.danger60
+  },
+  euiColorVis7: {
+    graphic: SEMANTIC_COLORS.danger30
+  },
+  euiColorVis8: {
+    graphic: SEMANTIC_COLORS.warning60
+  },
+  euiColorVis9: {
+    graphic: SEMANTIC_COLORS.warning30
+  }
+};
+const colorVisLight = {
+  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,
+  euiColorVisBehindText0: euiPaletteColorBlind.euiColorVis0.graphic,
+  euiColorVisBehindText1: euiPaletteColorBlind.euiColorVis1.graphic,
+  euiColorVisBehindText2: euiPaletteColorBlind.euiColorVis2.graphic,
+  euiColorVisBehindText3: euiPaletteColorBlind.euiColorVis3.graphic,
+  euiColorVisBehindText4: euiPaletteColorBlind.euiColorVis4.graphic,
+  euiColorVisBehindText5: euiPaletteColorBlind.euiColorVis5.graphic,
+  euiColorVisBehindText6: euiPaletteColorBlind.euiColorVis6.graphic,
+  euiColorVisBehindText7: euiPaletteColorBlind.euiColorVis7.graphic,
+  euiColorVisBehindText8: euiPaletteColorBlind.euiColorVis8.graphic,
+  euiColorVisBehindText9: euiPaletteColorBlind.euiColorVis9.graphic,
+  euiColorVisText0: SEMANTIC_COLORS.accentSecondary110,
+  euiColorVisText1: SEMANTIC_COLORS.accentSecondary100,
+  euiColorVisText2: SEMANTIC_COLORS.primary110,
+  euiColorVisText3: SEMANTIC_COLORS.primary90,
+  euiColorVisText4: SEMANTIC_COLORS.accent100,
+  euiColorVisText5: SEMANTIC_COLORS.accent80,
+  euiColorVisText6: SEMANTIC_COLORS.danger100,
+  euiColorVisText7: SEMANTIC_COLORS.danger80,
+  euiColorVisText8: SEMANTIC_COLORS.warning110,
+  euiColorVisText9: SEMANTIC_COLORS.warning90,
+  euiColorVisNeutral0: SEMANTIC_COLORS.neutral60,
+  euiColorVisNeutral1: SEMANTIC_COLORS.neutral30,
+  euiColorVisSuccess0: SEMANTIC_COLORS.success60,
+  euiColorVisSuccess1: SEMANTIC_COLORS.success30,
+  euiColorVisWarning0: SEMANTIC_COLORS.warning60,
+  euiColorVisWarning1: SEMANTIC_COLORS.warning30,
+  euiColorVisRisk0: SEMANTIC_COLORS.risk60,
+  euiColorVisRisk1: SEMANTIC_COLORS.risk30,
+  euiColorVisDanger0: SEMANTIC_COLORS.danger60,
+  euiColorVisDanger1: SEMANTIC_COLORS.danger30,
+  // We removed the `mutedGrey` palette in favor of the `blueGrey` palette from the theme
+  // but we need to keep this specific value for visualizations backwards compatibility.
+  // We want to limit its usage to visualizations only, so we're keeping it hardcoded here.
+  euiColorVisBase0: '#F6F9FC',
+  euiColorVisGrey0: PRIMITIVE_COLORS.blueGrey30,
+  euiColorVisGrey1: PRIMITIVE_COLORS.blueGrey60,
+  euiColorVisGrey2: PRIMITIVE_COLORS.blueGrey90,
+  euiColorVisGrey3: PRIMITIVE_COLORS.blueGrey130,
+  euiColorVisWarm0: SEMANTIC_COLORS.danger10,
+  euiColorVisWarm1: SEMANTIC_COLORS.danger40,
+  euiColorVisWarm2: SEMANTIC_COLORS.danger60,
+  euiColorVisCool0: SEMANTIC_COLORS.primary10,
+  euiColorVisCool1: SEMANTIC_COLORS.primary40,
+  euiColorVisCool2: SEMANTIC_COLORS.primary60,
+  euiColorVisComplementary0: SEMANTIC_COLORS.primary60,
+  euiColorVisComplementary1: SEMANTIC_COLORS.warning60
+};
+
+/*
+ * 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 colorVisDark = {
+  ...colorVisLight,
+  euiColorVisText0: SEMANTIC_COLORS.accentSecondary60,
+  euiColorVisText1: SEMANTIC_COLORS.accentSecondary30,
+  euiColorVisText2: SEMANTIC_COLORS.primary60,
+  euiColorVisText3: SEMANTIC_COLORS.primary30,
+  euiColorVisText4: SEMANTIC_COLORS.accent60,
+  euiColorVisText5: SEMANTIC_COLORS.accent30,
+  euiColorVisText6: SEMANTIC_COLORS.danger60,
+  euiColorVisText7: SEMANTIC_COLORS.danger30,
+  euiColorVisText8: SEMANTIC_COLORS.warning60,
+  euiColorVisText9: SEMANTIC_COLORS.warning30
+};
+
+/*
+ * 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 severityColors = {
+  unknown: SEMANTIC_COLORS.shade20,
+  neutral: SEMANTIC_COLORS.neutral30,
+  success: SEMANTIC_COLORS.success60,
+  warning: SEMANTIC_COLORS.warning30,
+  risk: SEMANTIC_COLORS.risk50,
+  danger: SEMANTIC_COLORS.danger70
+};
+
+/*
+ * 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 colors = {
+  plainLight: SEMANTIC_COLORS.plainLight,
+  plainDark: SEMANTIC_COLORS.plainDark,
+  LIGHT: {
+    ...light_colors,
+    vis: colorVisLight,
+    severity: severityColors
+  },
+  DARK: {
+    ...dark_colors,
+    vis: colorVisDark,
+    severity: severityColors
+  }
+};
+
+/*
+ * 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 animation_speed = {
+  extraFast: '90ms',
+  fast: '150ms',
+  normal: '250ms',
+  slow: '350ms',
+  extraSlow: '500ms'
+};
+const animation_ease = {
+  bounce: 'cubic-bezier(.34, 1.61, .7, 1)',
+  resistance: 'cubic-bezier(.32, .72, 0, 1)'
+};
+const animation = {
+  ...animation_speed,
+  ...animation_ease
+};
+
+/*
+ * 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 breakpoint = {
+  xl: 1200,
+  l: 992,
+  m: 768,
+  s: 575,
+  xs: 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.
+ */
+const base = 16;
+const size = {
+  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))
+};
+
+/*
+ * 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 border = {
+  color: computed(([borderBaseSubdued]) => borderBaseSubdued, ['colors.borderBaseSubdued']),
+  width: {
+    thin: '1px',
+    thick: '2px'
+  },
+  radius: {
+    medium: computed(sizeToPixel(0.25)),
+    small: computed(sizeToPixel(0.25)),
+    inline: computed(sizeToPixel(0.25)),
+    control: computed(sizeToPixel(0.5)),
+    panel: computed(sizeToPixel(0.75)),
+    frame: computed(sizeToPixel(1))
+  },
+  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'])
+};
+
+/*
+ * 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 levels = {
+  toast: 9000,
+  modal: 8000,
+  mask: 6000,
+  navigation: 6000,
+  menu: 2000,
+  header: 1000,
+  flyout: 1000,
+  maskBelowHeader: 1000,
+  content: 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.
+ */
+// Typographic scale -- loosely based on Major Third (1.200)
+const fontScale = {
+  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
+const fontBase = {
+  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
+};
+const fontWeight = {
+  light: 300,
+  regular: 400,
+  medium: 450,
+  semiBold: 500,
+  bold: 600
+};
+const font = {
+  ...fontBase,
+  scale: fontScale,
+  weight: fontWeight,
+  body: {
+    scale: 's',
+    weight: 'regular'
+  },
+  title: {
+    weight: 'bold',
+    letterSpacing: '-0.2px'
+  }
+};
+
+/*
+ * 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.
+ */
+/**
+ * This structure holds "primitives" (or actual design tokens as they
+ * would be stored in a design token repository).
+ * Not exposing them in the theme object is intentional.
+ */
+const shadowPrimitives = {
+  xs: {
+    light: [{
+      opacity: 0.16,
+      x: 0,
+      y: 0,
+      blur: 2,
+      spread: 0
+    }, {
+      opacity: 0.06,
+      x: 0,
+      y: 1,
+      blur: 4,
+      spread: 0
+    }, {
+      opacity: 0.04,
+      x: 0,
+      y: 2,
+      blur: 8,
+      spread: 0
+    }],
+    dark: [{
+      opacity: 1,
+      x: 0,
+      y: 0,
+      blur: 0,
+      spread: 1
+    }, {
+      opacity: 0.4,
+      x: 0,
+      y: 1,
+      blur: 4,
+      spread: 0
+    }, {
+      opacity: 0.24,
+      x: 0,
+      y: 2,
+      blur: 8,
+      spread: 0
+    }]
+  },
+  s: {
+    light: [{
+      opacity: 0.16,
+      x: 0,
+      y: 0,
+      blur: 2,
+      spread: 0
+    }, {
+      opacity: 0.08,
+      x: 0,
+      y: 2,
+      blur: 7,
+      spread: 0
+    }, {
+      opacity: 0.05,
+      x: 0,
+      y: 4,
+      blur: 11,
+      spread: 0
+    }],
+    dark: [{
+      opacity: 1,
+      x: 0,
+      y: 0,
+      blur: 0,
+      spread: 1
+    }, {
+      opacity: 0.46,
+      x: 0,
+      y: 2,
+      blur: 7,
+      spread: 0
+    }, {
+      opacity: 0.26,
+      x: 0,
+      y: 4,
+      blur: 11,
+      spread: 0
+    }]
+  },
+  m: {
+    light: [{
+      opacity: 0.16,
+      x: 0,
+      y: 0,
+      blur: 2,
+      spread: 0
+    }, {
+      opacity: 0.1,
+      x: 0,
+      y: 3,
+      blur: 10,
+      spread: 0
+    }, {
+      opacity: 0.06,
+      x: 0,
+      y: 6,
+      blur: 14,
+      spread: 0
+    }],
+    dark: [{
+      opacity: 1,
+      x: 0,
+      y: 0,
+      blur: 0,
+      spread: 1
+    }, {
+      opacity: 0.52,
+      x: 0,
+      y: 3,
+      blur: 10,
+      spread: 0
+    }, {
+      opacity: 0.28,
+      x: 0,
+      y: 6,
+      blur: 14,
+      spread: 0
+    }]
+  },
+  l: {
+    light: [{
+      opacity: 0.16,
+      x: 0,
+      y: 0,
+      blur: 2,
+      spread: 0
+    }, {
+      opacity: 0.12,
+      x: 0,
+      y: 4,
+      blur: 13,
+      spread: 0
+    }, {
+      opacity: 0.07,
+      x: 0,
+      y: 8,
+      blur: 17,
+      spread: 0
+    }],
+    dark: [{
+      opacity: 1,
+      x: 0,
+      y: 0,
+      blur: 0,
+      spread: 1
+    }, {
+      opacity: 0.58,
+      x: 0,
+      y: 4,
+      blur: 13,
+      spread: 0
+    }, {
+      opacity: 0.3,
+      x: 0,
+      y: 8,
+      blur: 17,
+      spread: 0
+    }]
+  },
+  xl: {
+    light: [{
+      opacity: 0.16,
+      x: 0,
+      y: 0,
+      blur: 2,
+      spread: 0
+    }, {
+      opacity: 0.14,
+      x: 0,
+      y: 5,
+      blur: 16,
+      spread: 0
+    }, {
+      opacity: 0.08,
+      x: 0,
+      y: 10,
+      blur: 20,
+      spread: 0
+    }],
+    dark: [{
+      opacity: 1,
+      x: 0,
+      y: 0,
+      blur: 0,
+      spread: 1
+    }, {
+      opacity: 0.64,
+      x: 0,
+      y: 5,
+      blur: 16,
+      spread: 0
+    }, {
+      opacity: 0.32,
+      x: 0,
+      y: 10,
+      blur: 20,
+      spread: 0
+    }]
+  },
+  xxl: {
+    light: [{
+      opacity: 0.16,
+      x: 0,
+      y: 0,
+      blur: 2,
+      spread: 0
+    }, {
+      opacity: 0.16,
+      x: 0,
+      y: 6,
+      blur: 19,
+      spread: 0
+    }, {
+      opacity: 0.09,
+      x: 0,
+      y: 12,
+      blur: 23,
+      spread: 0
+    }],
+    dark: [{
+      opacity: 1,
+      x: 0,
+      y: 0,
+      blur: 0,
+      spread: 1
+    }, {
+      opacity: 0.7,
+      x: 0,
+      y: 6,
+      blur: 19,
+      spread: 0
+    }, {
+      opacity: 0.34,
+      x: 0,
+      y: 12,
+      blur: 23,
+      spread: 0
+    }]
+  }};
+const shadowColorsLight = {
+  colors: {
+    base: SEMANTIC_COLORS.shade120
+  }
+};
+const shadowsLight = {
+  ...shadowColorsLight,
+  xs: {
+    down: formatMultipleBoxShadow(shadowPrimitives.xs.light, {
+      color: shadowColorsLight.colors.base
+    }),
+    up: formatMultipleBoxShadow(shadowPrimitives.xs.light, {
+      direction: 'up',
+      color: shadowColorsLight.colors.base
+    })
+  },
+  s: {
+    down: formatMultipleBoxShadow(shadowPrimitives.s.light, {
+      color: shadowColorsLight.colors.base
+    }),
+    up: formatMultipleBoxShadow(shadowPrimitives.s.light, {
+      direction: 'up',
+      color: shadowColorsLight.colors.base
+    })
+  },
+  m: {
+    down: formatMultipleBoxShadow(shadowPrimitives.m.light, {
+      color: shadowColorsLight.colors.base
+    }),
+    up: formatMultipleBoxShadow(shadowPrimitives.m.light, {
+      direction: 'up',
+      color: shadowColorsLight.colors.base
+    })
+  },
+  l: {
+    down: formatMultipleBoxShadow(shadowPrimitives.l.light, {
+      color: shadowColorsLight.colors.base
+    }),
+    up: formatMultipleBoxShadow(shadowPrimitives.l.light, {
+      direction: 'up',
+      color: shadowColorsLight.colors.base
+    })
+  },
+  xl: {
+    down: formatMultipleBoxShadow(shadowPrimitives.xl.light, {
+      color: shadowColorsLight.colors.base
+    }),
+    up: formatMultipleBoxShadow(shadowPrimitives.xl.light, {
+      direction: 'up',
+      color: shadowColorsLight.colors.base
+    })
+  },
+  hover: {
+    base: {
+      down: formatMultipleBoxShadow(shadowPrimitives.s.light, {
+        color: shadowColorsLight.colors.base
+      }),
+      up: formatMultipleBoxShadow(shadowPrimitives.s.light, {
+        direction: 'up',
+        color: shadowColorsLight.colors.base
+      })
+    },
+    xl: {
+      down: formatMultipleBoxShadow(shadowPrimitives.xxl.light, {
+        color: shadowColorsLight.colors.base
+      }),
+      up: formatMultipleBoxShadow(shadowPrimitives.xxl.light, {
+        direction: 'up',
+        color: shadowColorsLight.colors.base
+      })
+    }
+  },
+  flat: {
+    down: formatMultipleBoxShadow(shadowPrimitives.xs.light, {
+      color: shadowColorsLight.colors.base
+    }),
+    up: formatMultipleBoxShadow(shadowPrimitives.xs.light, {
+      direction: 'up',
+      color: shadowColorsLight.colors.base
+    })
+  }
+};
+const shadowColorsDark = {
+  colors: {
+    base: PRIMITIVE_COLORS.black
+  }
+};
+const shadowsDark = {
+  ...shadowColorsDark,
+  xs: {
+    down: formatMultipleBoxShadow(shadowPrimitives.xs.dark.slice(1), {
+      color: shadowColorsDark.colors.base
+    }),
+    up: formatMultipleBoxShadow(shadowPrimitives.xs.dark.slice(1), {
+      direction: 'up',
+      color: shadowColorsDark.colors.base
+    })
+  },
+  s: {
+    down: formatMultipleBoxShadow(shadowPrimitives.s.dark.slice(1), {
+      color: shadowColorsDark.colors.base
+    }),
+    up: formatMultipleBoxShadow(shadowPrimitives.s.dark.slice(1), {
+      direction: 'up',
+      color: shadowColorsDark.colors.base
+    })
+  },
+  m: {
+    down: formatMultipleBoxShadow(shadowPrimitives.m.dark.slice(1), {
+      color: shadowColorsDark.colors.base
+    }),
+    up: formatMultipleBoxShadow(shadowPrimitives.m.dark.slice(1), {
+      direction: 'up',
+      color: shadowColorsDark.colors.base
+    })
+  },
+  l: {
+    down: formatMultipleBoxShadow(shadowPrimitives.l.dark.slice(1), {
+      color: shadowColorsDark.colors.base
+    }),
+    up: formatMultipleBoxShadow(shadowPrimitives.l.dark.slice(1), {
+      direction: 'up',
+      color: shadowColorsDark.colors.base
+    })
+  },
+  xl: {
+    down: formatMultipleBoxShadow(shadowPrimitives.xl.dark.slice(1), {
+      color: shadowColorsDark.colors.base
+    }),
+    up: formatMultipleBoxShadow(shadowPrimitives.xl.dark.slice(1), {
+      direction: 'up',
+      color: shadowColorsDark.colors.base
+    })
+  },
+  hover: {
+    base: {
+      down: formatMultipleBoxShadow(shadowPrimitives.s.dark.slice(1), {
+        color: shadowColorsDark.colors.base
+      }),
+      up: formatMultipleBoxShadow(shadowPrimitives.s.dark.slice(1), {
+        direction: 'up',
+        color: shadowColorsDark.colors.base
+      })
+    },
+    xl: {
+      down: formatMultipleBoxShadow(shadowPrimitives.xxl.dark.slice(1), {
+        color: shadowColorsDark.colors.base
+      }),
+      up: formatMultipleBoxShadow(shadowPrimitives.xxl.dark.slice(1), {
+        direction: 'up',
+        color: shadowColorsDark.colors.base
+      })
+    }
+  },
+  flat: {
+    down: formatMultipleBoxShadow(shadowPrimitives.xs.dark.slice(1), {
+      color: shadowColorsDark.colors.base
+    }),
+    up: formatMultipleBoxShadow(shadowPrimitives.xs.dark.slice(1), {
+      direction: 'up',
+      color: shadowColorsDark.colors.base
+    })
+  }
+};
+const shadows = {
+  LIGHT: shadowsLight,
+  DARK: shadowsDark
+};
+
+/*
+ * 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 focus = {
+  // Focus ring
+  color: computed(([textPrimary]) => textPrimary, ['colors.textPrimary']),
+  width: computed(sizeToPixel(0.125)),
+  // Focus background
+  transparency: {
+    LIGHT: 0.1,
+    DARK: 0.2
+  },
+  backgroundColor: computed(([backgroundBaseInteractiveHover]) => backgroundBaseInteractiveHover, ['colors.backgroundBaseInteractiveHover'])
+};
+
+/*
+ * 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 _buttons = {
+  backgroundPrimary: computed(([backgroundLightPrimary]) => backgroundLightPrimary, ['colors.backgroundLightPrimary']),
+  backgroundAccent: computed(([backgroundLightAccent]) => backgroundLightAccent, ['colors.backgroundLightAccent']),
+  backgroundAccentSecondary: computed(([backgroundLightAccentSecondary]) => backgroundLightAccentSecondary, ['colors.backgroundLightAccentSecondary']),
+  backgroundNeutral: computed(([backgroundLightNeutral]) => backgroundLightNeutral, ['colors.backgroundLightNeutral']),
+  backgroundSuccess: computed(([backgroundLightSuccess]) => backgroundLightSuccess, ['colors.backgroundLightSuccess']),
+  backgroundWarning: computed(([backgroundLightWarning]) => backgroundLightWarning, ['colors.backgroundLightWarning']),
+  backgroundRisk: computed(([backgroundLightRisk]) => backgroundLightRisk, ['colors.backgroundLightRisk']),
+  backgroundDanger: computed(([backgroundLightDanger]) => backgroundLightDanger, ['colors.backgroundLightDanger']),
+  backgroundText: computed(([backgroundBasePlain]) => backgroundBasePlain, ['colors.backgroundBasePlain']),
+  backgroundDisabled: computed(([backgroundBaseDisabled]) => backgroundBaseDisabled, ['colors.backgroundBaseDisabled']),
+  backgroundPrimaryHover: SEMANTIC_COLORS.primary70Alpha12,
+  backgroundAccentHover: SEMANTIC_COLORS.accent70Alpha12,
+  backgroundAccentSecondaryHover: SEMANTIC_COLORS.accentSecondary70Alpha12,
+  backgroundNeutralHover: SEMANTIC_COLORS.neutral70Alpha12,
+  backgroundSuccessHover: SEMANTIC_COLORS.success70Alpha12,
+  backgroundWarningHover: SEMANTIC_COLORS.warning60Alpha16,
+  backgroundRiskHover: SEMANTIC_COLORS.risk60Alpha16,
+  backgroundDangerHover: SEMANTIC_COLORS.danger70Alpha12,
+  backgroundAssistanceHover: SEMANTIC_COLORS.assistance70Alpha12,
+  backgroundTextHover: SEMANTIC_COLORS.primary100Alpha8,
+  backgroundPrimaryActive: SEMANTIC_COLORS.primary70Alpha16,
+  backgroundAccentActive: SEMANTIC_COLORS.accent70Alpha16,
+  backgroundAccentSecondaryActive: SEMANTIC_COLORS.accentSecondary70Alpha16,
+  backgroundNeutralActive: SEMANTIC_COLORS.neutral70Alpha16,
+  backgroundSuccessActive: SEMANTIC_COLORS.success70Alpha16,
+  backgroundWarningActive: SEMANTIC_COLORS.warning60Alpha20,
+  backgroundRiskActive: SEMANTIC_COLORS.risk60Alpha20,
+  backgroundDangerActive: SEMANTIC_COLORS.danger70Alpha16,
+  backgroundTextActive: SEMANTIC_COLORS.primary100Alpha12,
+  backgroundFilledPrimary: computed(([backgroundFilledPrimary]) => backgroundFilledPrimary, ['colors.backgroundFilledPrimary']),
+  backgroundFilledAccent: computed(([backgroundFilledAccent]) => backgroundFilledAccent, ['colors.backgroundFilledAccent']),
+  backgroundFilledAccentSecondary: computed(([backgroundFilledAccentSecondary]) => backgroundFilledAccentSecondary, ['colors.backgroundFilledAccentSecondary']),
+  backgroundFilledNeutral: computed(([backgroundFilledNeutral]) => backgroundFilledNeutral, ['colors.backgroundFilledNeutral']),
+  backgroundFilledSuccess: computed(([backgroundFilledSuccess]) => backgroundFilledSuccess, ['colors.backgroundFilledSuccess']),
+  backgroundFilledWarning: computed(([backgroundFilledWarning]) => backgroundFilledWarning, ['colors.backgroundFilledWarning']),
+  backgroundFilledRisk: computed(([backgroundFilledRisk]) => backgroundFilledRisk, ['colors.backgroundFilledRisk']),
+  backgroundFilledDanger: computed(([backgroundFilledDanger]) => backgroundFilledDanger, ['colors.backgroundFilledDanger']),
+  backgroundFilledText: computed(([backgroundFilledText]) => backgroundFilledText, ['colors.backgroundFilledText']),
+  backgroundFilledDisabled: computed(([backgroundBaseDisabled]) => backgroundBaseDisabled, ['colors.backgroundBaseDisabled']),
+  backgroundFilledPrimaryHover: SEMANTIC_COLORS.primary100,
+  backgroundFilledAccentHover: SEMANTIC_COLORS.accent100,
+  backgroundFilledAccentSecondaryHover: SEMANTIC_COLORS.accentSecondary100,
+  backgroundFilledNeutralHover: SEMANTIC_COLORS.neutral100,
+  backgroundFilledSuccessHover: SEMANTIC_COLORS.success100,
+  backgroundFilledWarningHover: SEMANTIC_COLORS.warning50,
+  backgroundFilledRiskHover: SEMANTIC_COLORS.risk80,
+  backgroundFilledDangerHover: SEMANTIC_COLORS.danger100,
+  backgroundFilledTextHover: SEMANTIC_COLORS.shade100,
+  backgroundFilledAssistanceHover: SEMANTIC_COLORS.assistance100,
+  backgroundFilledPrimaryActive: SEMANTIC_COLORS.primary110,
+  backgroundFilledAccentActive: SEMANTIC_COLORS.accent110,
+  backgroundFilledAccentSecondaryActive: SEMANTIC_COLORS.accentSecondary110,
+  backgroundFilledNeutralActive: SEMANTIC_COLORS.neutral110,
+  backgroundFilledSuccessActive: SEMANTIC_COLORS.success110,
+  backgroundFilledWarningActive: SEMANTIC_COLORS.warning60,
+  backgroundFilledRiskActive: SEMANTIC_COLORS.risk90,
+  backgroundFilledDangerActive: SEMANTIC_COLORS.danger110,
+  backgroundFilledTextActive: SEMANTIC_COLORS.shade110,
+  backgroundEmptyPrimaryHover: SEMANTIC_COLORS.primary70Alpha12,
+  backgroundEmptyAccentHover: SEMANTIC_COLORS.accent70Alpha12,
+  backgroundEmptyAccentSecondaryHover: SEMANTIC_COLORS.accentSecondary70Alpha12,
+  backgroundEmptyNeutralHover: SEMANTIC_COLORS.neutral70Alpha12,
+  backgroundEmptySuccessHover: SEMANTIC_COLORS.success70Alpha12,
+  backgroundEmptyWarningHover: SEMANTIC_COLORS.warning60Alpha16,
+  backgroundEmptyRiskHover: SEMANTIC_COLORS.risk60Alpha16,
+  backgroundEmptyDangerHover: SEMANTIC_COLORS.danger70Alpha12,
+  backgroundEmptyTextHover: SEMANTIC_COLORS.primary100Alpha8,
+  backgroundEmptyPrimaryActive: SEMANTIC_COLORS.primary70Alpha16,
+  backgroundEmptyAccentActive: SEMANTIC_COLORS.accent70Alpha16,
+  backgroundEmptyAccentSecondaryActive: SEMANTIC_COLORS.accentSecondary70Alpha16,
+  backgroundEmptyNeutralActive: SEMANTIC_COLORS.neutral70Alpha16,
+  backgroundEmptySuccessActive: SEMANTIC_COLORS.success70Alpha16,
+  backgroundEmptyWarningActive: SEMANTIC_COLORS.warning60Alpha20,
+  backgroundEmptyRiskActive: SEMANTIC_COLORS.risk60Alpha20,
+  backgroundEmptyDangerActive: SEMANTIC_COLORS.danger70Alpha16,
+  backgroundEmptyTextActive: SEMANTIC_COLORS.primary100Alpha12,
+  textColorPrimary: computed(([textPrimary]) => textPrimary, ['colors.textPrimary']),
+  textColorAccent: computed(([textAccent]) => textAccent, ['colors.textAccent']),
+  textColorAccentSecondary: computed(([textAccentSecondary]) => textAccentSecondary, ['colors.textAccentSecondary']),
+  textColorNeutral: computed(([textNeutral]) => textNeutral, ['colors.textNeutral']),
+  textColorSuccess: computed(([textSuccess]) => textSuccess, ['colors.textSuccess']),
+  textColorWarning: computed(([textWarning]) => textWarning, ['colors.textWarning']),
+  textColorRisk: computed(([textRisk]) => textRisk, ['colors.textRisk']),
+  textColorDanger: computed(([textDanger]) => textDanger, ['colors.textDanger']),
+  textColorText: computed(([textParagraph]) => textParagraph, ['colors.textParagraph']),
+  textColorDisabled: computed(([textDisabled]) => textDisabled, ['colors.textDisabled']),
+  textColorFilledPrimary: computed(([textInverse]) => textInverse, ['colors.textInverse']),
+  textColorFilledAccent: computed(([textInverse]) => textInverse, ['colors.textInverse']),
+  textColorFilledAccentSecondary: computed(([textInverse]) => textInverse, ['colors.textInverse']),
+  textColorFilledNeutral: computed(([textInverse]) => textInverse, ['colors.textInverse']),
+  textColorFilledSuccess: computed(([textInverse]) => textInverse, ['colors.textInverse']),
+  textColorFilledWarning: SEMANTIC_COLORS.warning110,
+  textColorFilledRisk: computed(([textInverse]) => textInverse, ['colors.textInverse']),
+  textColorFilledDanger: computed(([textInverse]) => textInverse, ['colors.textInverse']),
+  textColorFilledText: computed(([textInverse]) => textInverse, ['colors.textInverse']),
+  textColorFilledDisabled: computed(([textDisabled]) => textDisabled, ['colors.textDisabled'])
+};
+const _dark_buttons = {
+  ..._buttons,
+  backgroundPrimaryHover: SEMANTIC_COLORS.primary70Alpha16,
+  backgroundAccentHover: SEMANTIC_COLORS.accent70Alpha16,
+  backgroundAccentSecondaryHover: SEMANTIC_COLORS.accentSecondary70Alpha16,
+  backgroundNeutralHover: SEMANTIC_COLORS.neutral70Alpha16,
+  backgroundSuccessHover: SEMANTIC_COLORS.success70Alpha16,
+  backgroundWarningHover: SEMANTIC_COLORS.warning60Alpha12,
+  backgroundRiskHover: SEMANTIC_COLORS.risk60Alpha12,
+  backgroundDangerHover: SEMANTIC_COLORS.danger70Alpha16,
+  backgroundTextHover: SEMANTIC_COLORS.plainLightAlpha12,
+  backgroundPrimaryActive: SEMANTIC_COLORS.primary70Alpha20,
+  backgroundAccentActive: SEMANTIC_COLORS.accent70Alpha20,
+  backgroundAccentSecondaryActive: SEMANTIC_COLORS.accentSecondary70Alpha20,
+  backgroundNeutralActive: SEMANTIC_COLORS.neutral70Alpha20,
+  backgroundSuccessActive: SEMANTIC_COLORS.success70Alpha20,
+  backgroundWarningActive: SEMANTIC_COLORS.warning60Alpha16,
+  backgroundRiskActive: SEMANTIC_COLORS.risk60Alpha16,
+  backgroundDangerActive: SEMANTIC_COLORS.danger70Alpha20,
+  backgroundTextActive: SEMANTIC_COLORS.plainLightAlpha16,
+  backgroundFilledPrimaryHover: SEMANTIC_COLORS.primary70,
+  backgroundFilledAccentHover: SEMANTIC_COLORS.accent70,
+  backgroundFilledAccentSecondaryHover: SEMANTIC_COLORS.accentSecondary70,
+  backgroundFilledNeutralHover: SEMANTIC_COLORS.neutral70,
+  backgroundFilledSuccessHover: SEMANTIC_COLORS.success70,
+  backgroundFilledWarningHover: SEMANTIC_COLORS.warning50,
+  backgroundFilledRiskHover: SEMANTIC_COLORS.risk60,
+  backgroundFilledDangerHover: SEMANTIC_COLORS.danger70,
+  backgroundFilledTextHover: SEMANTIC_COLORS.shade70,
+  backgroundFilledAssistanceHover: SEMANTIC_COLORS.assistance70,
+  backgroundFilledPrimaryActive: SEMANTIC_COLORS.primary80,
+  backgroundFilledAccentActive: SEMANTIC_COLORS.accent80,
+  backgroundFilledAccentSecondaryActive: SEMANTIC_COLORS.accentSecondary80,
+  backgroundFilledNeutralActive: SEMANTIC_COLORS.neutral80,
+  backgroundFilledSuccessActive: SEMANTIC_COLORS.success80,
+  backgroundFilledWarningActive: SEMANTIC_COLORS.warning60,
+  backgroundFilledRiskActive: SEMANTIC_COLORS.risk70,
+  backgroundFilledDangerActive: SEMANTIC_COLORS.danger80,
+  backgroundFilledTextActive: SEMANTIC_COLORS.shade80,
+  backgroundEmptyPrimaryHover: SEMANTIC_COLORS.primary70Alpha16,
+  backgroundEmptyAccentHover: SEMANTIC_COLORS.accent70Alpha16,
+  backgroundEmptyAccentSecondaryHover: SEMANTIC_COLORS.accentSecondary70Alpha16,
+  backgroundEmptyNeutralHover: SEMANTIC_COLORS.neutral70Alpha16,
+  backgroundEmptySuccessHover: SEMANTIC_COLORS.success70Alpha16,
+  backgroundEmptyWarningHover: SEMANTIC_COLORS.warning60Alpha12,
+  backgroundEmptyRiskHover: SEMANTIC_COLORS.risk60Alpha12,
+  backgroundEmptyDangerHover: SEMANTIC_COLORS.danger70Alpha16,
+  backgroundEmptyTextHover: SEMANTIC_COLORS.plainLightAlpha12,
+  backgroundEmptyPrimaryActive: SEMANTIC_COLORS.primary70Alpha20,
+  backgroundEmptyAccentActive: SEMANTIC_COLORS.accent70Alpha20,
+  backgroundEmptyAccentSecondaryActive: SEMANTIC_COLORS.accentSecondary70Alpha20,
+  backgroundEmptySuccessActive: SEMANTIC_COLORS.success70Alpha20,
+  backgroundEmptyNeutralActive: SEMANTIC_COLORS.neutral70Alpha20,
+  backgroundEmptyWarningActive: SEMANTIC_COLORS.warning60Alpha16,
+  backgroundEmptyRiskActive: SEMANTIC_COLORS.risk60Alpha16,
+  backgroundEmptyDangerActive: SEMANTIC_COLORS.danger70Alpha20,
+  backgroundEmptyTextActive: SEMANTIC_COLORS.plainLightAlpha16,
+  textColorFilledWarning: SEMANTIC_COLORS.warning110
+};
+const buttons = {
+  LIGHT: _buttons,
+  DARK: _dark_buttons
+};
+
+/*
+ * 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 _forms = {
+  background: computed(([backgroundBasePlain]) => backgroundBasePlain, ['colors.backgroundBasePlain']),
+  backgroundDisabled: computed(([backgroundBaseDisabled]) => backgroundBaseDisabled, ['colors.backgroundBaseDisabled']),
+  backgroundReadOnly: computed(([backgroundBaseDisabled]) => backgroundBaseDisabled, ['colors.backgroundBaseDisabled']),
+  backgroundFocused: computed(([backgroundBasePlain]) => backgroundBasePlain, ['colors.backgroundBasePlain']),
+  backgroundAutofilled: computed(([backgroundBasePrimary]) => backgroundBasePrimary, ['colors.backgroundBasePrimary']),
+  backgroundDropping: SEMANTIC_COLORS.success70Alpha16,
+  prependBackground: computed(([backgroundBaseFormsPrepend]) => backgroundBaseFormsPrepend, ['colors.backgroundBaseFormsPrepend']),
+  border: computed(([borderBasePlain]) => borderBasePlain, ['colors.borderBasePlain']),
+  borderDisabled: computed(([borderBaseDisabled]) => borderBaseDisabled, ['colors.borderBaseDisabled']),
+  borderFocused: computed(([borderStrongPrimary]) => borderStrongPrimary, ['colors.borderStrongPrimary']),
+  borderInvalid: computed(([borderStrongDanger]) => borderStrongDanger, ['colors.borderStrongDanger']),
+  borderHovered: computed(([borderInteractiveFormsHoverPlain]) => borderInteractiveFormsHoverPlain, ['colors.borderInteractiveFormsHoverPlain']),
+  borderInvalidHovered: computed(([borderInteractiveFormsHoverDanger]) => borderInteractiveFormsHoverDanger, ['colors.borderInteractiveFormsHoverDanger']),
+  borderAutofilled: computed(([borderBasePrimary]) => borderBasePrimary, ['colors.borderBasePrimary']),
+  borderAutofilledHovered: computed(([borderStrongPrimary]) => borderStrongPrimary, ['colors.borderStrongPrimary']),
+  clearButtonBackground: SEMANTIC_COLORS.shade60,
+  controlBorder: computed(([borderBaseProminent]) => borderBaseProminent, ['colors.borderBaseProminent']),
+  controlBorderSelected: computed(([borderStrongPrimary]) => borderStrongPrimary, ['colors.borderStrongPrimary']),
+  controlBorderDisabled: computed(([borderBaseDisabled]) => borderBaseDisabled, ['colors.borderBaseDisabled']),
+  controlBackgroundUnselected: 'transparent',
+  controlBackgroundDisabled: computed(([backgroundBaseFormsControlDisabled]) => backgroundBaseFormsControlDisabled, ['colors.backgroundBaseFormsControlDisabled']),
+  colorHasPlaceholder: computed(([textSubdued]) => textSubdued, ['colors.textSubdued']),
+  colorDisabled: computed(([textDisabled]) => textDisabled, ['colors.textDisabled']),
+  iconDisabled: computed(([textDisabled]) => textDisabled, ['colors.textDisabled'])
+};
+const _dark_forms = {
+  ..._forms,
+  clearButtonBackground: SEMANTIC_COLORS.shade90
+};
+const forms = {
+  maxWidth: computed(([base]) => mathWithUnits(base, x => x * 25), ['size.base']),
+  LIGHT: _forms,
+  DARK: _dark_forms
+};
+
+/*
+ * 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 component_colors = {
+  badgeBackground: computed(([backgroundLightText]) => backgroundLightText, ['colors.backgroundFilledText']),
+  badgeBackgroundSubdued: computed(([backgroundLightText]) => backgroundLightText, ['colors.backgroundLightText']),
+  badgeBorderColorHollow: computed(([borderBasePlain]) => borderBasePlain, ['colors.borderBasePlain']),
+  badgeIconButtonBackgroundHover: computed(([backgroundBaseInteractiveHover]) => backgroundBaseInteractiveHover, ['colors.backgroundBaseInteractiveHover']),
+  breadcrumbsApplicationBackground: computed(([backgroundLightText]) => backgroundLightText, ['colors.backgroundLightText']),
+  breadcrumbsApplicationColor: computed(([textSubdued]) => textSubdued, ['colors.textSubdued']),
+  bottomBarBackground: SEMANTIC_COLORS.plainDark,
+  buttonGroupBackgroundDisabledSelected: computed(([backgroundBaseDisabled]) => backgroundBaseDisabled, ['colors.backgroundBaseDisabled']),
+  buttonGroupBorderColor: computed(([borderBasePlain]) => borderBasePlain, ['colors.borderBasePlain']),
+  buttonGroupBorderColorSelected: computed(([borderBasePlain]) => borderBasePlain, ['colors.borderBasePlain']),
+  buttonGroupFocusColor: SEMANTIC_COLORS.plainDark,
+  codeBackground: computed(([backgroundBaseHighlighted]) => backgroundBaseHighlighted, ['colors.backgroundBaseHighlighted']),
+  codeBackgroundSelected: 'inherit',
+  codeColor: computed(([textParagraph]) => textParagraph, ['colors.textParagraph']),
+  codeInlineBackground: SEMANTIC_COLORS.shade15,
+  codeInlineColor: SEMANTIC_COLORS.assistance100,
+  codeCommentColor: computed(([textSubdued]) => textSubdued, ['colors.textSubdued']),
+  codeSelectorColor: 'inherit',
+  codeStringColor: SEMANTIC_COLORS.accent100,
+  codeTagColor: SEMANTIC_COLORS.primary100,
+  codeNameColor: SEMANTIC_COLORS.primary100,
+  codeNumberColor: SEMANTIC_COLORS.accentSecondary100,
+  codeInlineCodeKeywordColor: SEMANTIC_COLORS.assistance100,
+  codeKeywordColor: SEMANTIC_COLORS.primary100,
+  codeFunctionTitleColor: 'inherit',
+  codeTypeColor: SEMANTIC_COLORS.primary100,
+  codeAttributeColor: 'inherit',
+  codeSymbolColor: SEMANTIC_COLORS.danger100,
+  codeParamsColor: 'inherit',
+  codeMetaColor: computed(([textSubdued]) => textSubdued, ['colors.textSubdued']),
+  codeTitleColor: SEMANTIC_COLORS.warning100,
+  codeSectionColor: SEMANTIC_COLORS.danger100,
+  codeAdditionColor: SEMANTIC_COLORS.accentSecondary100,
+  codeDeletionColor: SEMANTIC_COLORS.danger100,
+  codeSelectorClassColor: 'inherit',
+  codeSelectorIdColor: 'inherit',
+  collapsibleNavGroupBackground: computed(([backgroundBaseSubdued]) => backgroundBaseSubdued, ['colors.backgroundBaseSubdued']),
+  collapsibleNavGroupBackgroundDark: dark_background_colors.backgroundBaseSubdued,
+  dataGridBorderColor: computed(([borderBaseSubdued]) => borderBaseSubdued, ['colors.borderBaseSubdued']),
+  dataGridVerticalLineBorderColor: computed(([borderBaseSubdued]) => borderBaseSubdued, ['colors.borderBaseSubdued']),
+  dataGridRowBackground: computed(([backgroundBasePlain]) => backgroundBasePlain, ['colors.backgroundBasePlain']),
+  dataGridRowBackgroundHover: computed(([backgroundBaseInteractiveHover]) => backgroundBaseInteractiveHover, ['colors.backgroundBaseInteractiveHover']),
+  dataGridRowBackgroundSelect: computed(([backgroundBaseInteractiveSelect]) => backgroundBaseInteractiveSelect, ['colors.backgroundBaseInteractiveSelect']),
+  dataGridRowBackgroundSelectHover: computed(([backgroundBaseInteractiveSelectHover]) => backgroundBaseInteractiveSelectHover, ['colors.backgroundBaseInteractiveSelectHover']),
+  dataGridRowBackgroundMarked: SEMANTIC_COLORS.warning10,
+  dataGridRowBackgroundMarkedHover: SEMANTIC_COLORS.warning20,
+  dataGridRowBorderActive: computed(([borderStrongPrimary]) => borderStrongPrimary, ['colors.borderStrongPrimary']),
+  dataGridRowBorderHover: computed(([borderStrongText]) => borderStrongText, ['colors.borderStrongText']),
+  dataGridRowBorderMarked: computed(([borderStrongWarning]) => borderStrongWarning, ['colors.borderStrongWarning']),
+  dataGridRowStripesBackground: computed(([backgroundBasePlain]) => backgroundBasePlain, ['colors.backgroundBasePlain']),
+  dataGridRowStripesBackgroundHover: SEMANTIC_COLORS.shade15,
+  dataGridRowStripesBackgroundStriped: computed(([backgroundBaseSubdued]) => backgroundBaseSubdued, ['colors.backgroundBaseSubdued']),
+  dataGridRowStripesBackgroundStripedHover: SEMANTIC_COLORS.shade15,
+  dataGridRowStripesBackgroundSelect: computed(([backgroundBaseInteractiveSelect]) => backgroundBaseInteractiveSelect, ['colors.backgroundBaseInteractiveSelect']),
+  dataGridRowStripesBackgroundSelectHover: computed(([backgroundBaseInteractiveSelectHover]) => backgroundBaseInteractiveSelectHover, ['colors.backgroundBaseInteractiveSelectHover']),
+  dragDropDraggingBackground: computed(([backgroundBaseSuccess]) => backgroundBaseSuccess, ['colors.backgroundBaseSuccess']),
+  dragDropDraggingOverBackground: computed(([backgroundLightSuccess]) => backgroundLightSuccess, ['colors.backgroundLightSuccess']),
+  filterButtonBadgeBackgroundHover: SEMANTIC_COLORS.shade25,
+  filterSelectItemBackgroundFocusDisabled: computed(([backgroundBaseDisabled]) => backgroundBaseDisabled, ['colors.backgroundBaseDisabled']),
+  flyoutFooterBackground: computed(([backgroundBaseHighlighted]) => backgroundBaseHighlighted, ['colors.backgroundBaseHighlighted']),
+  flyoutCloseButtonInsideBackground: computed(([backgroundBasePlain]) => backgroundBasePlain, ['colors.backgroundBasePlain']),
+  headerBackground: computed(([backgroundBasePlain]) => backgroundBasePlain, ['colors.backgroundBasePlain']),
+  headerDarkBackground: dark_background_colors.backgroundBasePlain,
+  headerDarkSearchBorderColor: dark_border_colors.borderBasePlain,
+  headerDarkSectionItemBackgroundFocus: dark_background_colors.backgroundBasePrimary,
+  // we don't want to inherit overrides (e.g. HCM)
+  loadingSpinnerBorder: border_colors.borderBasePlain,
+  loadingSpinnerHighlight: computed(([borderStrongPrimary]) => borderStrongPrimary, ['colors.borderStrongPrimary']),
+  loadingChartMonoBackground0: SEMANTIC_COLORS.shade20,
+  loadingChartMonoBackground1: SEMANTIC_COLORS.shade30,
+  loadingChartMonoBackground2: SEMANTIC_COLORS.shade40,
+  loadingChartMonoBackground3: SEMANTIC_COLORS.shade50,
+  markBackground: computed(([backgroundLightPrimary]) => backgroundLightPrimary, ['colors.backgroundLightPrimary']),
+  markdownFormatTableBorderColor: computed(([borderBasePlain]) => borderBasePlain, ['colors.borderBasePlain']),
+  overlayMaskBackground: computed(([backgroundBaseInteractiveOverlay]) => backgroundBaseInteractiveOverlay, ['colors.backgroundBaseInteractiveOverlay']),
+  overlayMaskBackgroundHighContrast: `rgba(${SEMANTIC_COLORS.shade140RGB}, 0.9)`,
+  popoverPanelBackground: computed(([backgroundBasePlain]) => backgroundBasePlain, ['colors.backgroundBasePlain']),
+  popoverFooterBorderColor: computed(([borderBaseSubdued]) => borderBaseSubdued, ['colors.borderBaseSubdued']),
+  scrollbarTrackColor: SEMANTIC_COLORS.shade15,
+  sideNavItemEmphasizedBackground: computed(([backgroundBaseInteractiveSelect]) => backgroundBaseInteractiveSelect, ['colors.backgroundBaseInteractiveSelect']),
+  selectableListItemBorderColor: computed(([borderBaseSubdued]) => borderBaseSubdued, ['colors.borderBaseSubdued']),
+  skeletonBackgroundSkeletonMiddleHighContrast: `rgba(${SEMANTIC_COLORS.shade100RGB}, 0.04)`,
+  switchBackgroundOn: computed(([backgroundFilledPrimary]) => backgroundFilledPrimary, ['colors.backgroundFilledPrimary']),
+  switchBackgroundOff: computed(([backgroundFilledText]) => backgroundFilledText, ['colors.backgroundFilledText']),
+  switchUncompressedBackgroundDisabled: computed(([backgroundBaseFormsControlDisabled]) => backgroundBaseFormsControlDisabled, ['colors.backgroundBaseFormsControlDisabled']),
+  switchCompressedBackgroundDisabled: computed(([backgroundBaseFormsControlDisabled]) => backgroundBaseFormsControlDisabled, ['colors.backgroundBaseFormsControlDisabled']),
+  switchMiniBackgroundDisabled: computed(([backgroundBaseFormsControlDisabled]) => backgroundBaseFormsControlDisabled, ['colors.backgroundBaseFormsControlDisabled']),
+  switchThumbBackgroundDisabled: computed(([backgroundBasePlain]) => backgroundBasePlain, ['colors.backgroundBasePlain']),
+  switchThumbBorderOn: computed(([backgroundFilledPrimary]) => backgroundFilledPrimary, ['colors.backgroundFilledPrimary']),
+  switchThumbBorderOff: computed(([backgroundFilledText]) => backgroundFilledText, ['colors.backgroundFilledText']),
+  switchIconDisabled: forms.LIGHT.iconDisabled,
+  tableRowBackgroundHover: computed(([backgroundBaseInteractiveHover]) => backgroundBaseInteractiveHover, ['colors.backgroundBaseInteractiveHover']),
+  tableRowBackgroundSelected: computed(([backgroundBaseInteractiveSelect]) => backgroundBaseInteractiveSelect, ['colors.backgroundBaseInteractiveSelect']),
+  tableRowBackgroundSelectedHover: computed(([backgroundBaseInteractiveSelectHover]) => backgroundBaseInteractiveSelectHover, ['colors.backgroundBaseInteractiveSelectHover']),
+  tableRowInteractiveBackgroundHover: computed(([backgroundBaseInteractiveSelect]) => backgroundBaseInteractiveSelect, ['colors.backgroundBaseInteractiveSelect']),
+  tableRowInteractiveBackgroundFocus: computed(([backgroundBaseInteractiveHover]) => backgroundBaseInteractiveHover, ['colors.backgroundBaseInteractiveHover']),
+  tableRowBackgroundMarked: SEMANTIC_COLORS.warning10,
+  tableRowBackgroundMarkedHover: SEMANTIC_COLORS.warning20,
+  tableCellSortableIconColor: computed(([backgroundFilledText]) => backgroundFilledText, ['colors.backgroundFilledText']),
+  tableFooterBackground: SEMANTIC_COLORS.shade15,
+  tooltipBackground: dark_background_colors.backgroundBaseSubdued,
+  tooltipBorder: dark_border_colors.borderBaseSubdued,
+  tooltipBorderFloating: computed(([borderBaseFloating]) => borderBaseFloating, ['colors.borderBaseFloating']),
+  tourFooterBackground: computed(([backgroundBaseHighlighted]) => backgroundBaseHighlighted, ['colors.backgroundBaseHighlighted']),
+  tourStepIndicatorInactiveColor: SEMANTIC_COLORS.shade50,
+  tourStepIndicatorActiveColor: computed(([backgroundFilledSuccess]) => backgroundFilledSuccess, ['colors.backgroundFilledSuccess']),
+  treeViewItemBackgroundHover: computed(([backgroundBaseInteractiveHover]) => backgroundBaseInteractiveHover, ['colors.backgroundBaseInteractiveHover'])
+};
+const components = {
+  buttons,
+  forms,
+  LIGHT: component_colors,
+  DARK: {
+    ...component_colors,
+    buttonGroupFocusColor: SEMANTIC_COLORS.plainLight,
+    dataGridRowStripesBackgroundHover: SEMANTIC_COLORS.shade130,
+    dataGridRowStripesBackgroundStripedHover: SEMANTIC_COLORS.shade130,
+    dataGridRowBackgroundMarked: SEMANTIC_COLORS.warning140,
+    dataGridRowBackgroundMarkedHover: SEMANTIC_COLORS.warning130,
+    codeInlineBackground: SEMANTIC_COLORS.shade135,
+    codeInlineColor: SEMANTIC_COLORS.assistance60,
+    codeStringColor: SEMANTIC_COLORS.accent60,
+    codeTagColor: SEMANTIC_COLORS.primary60,
+    codeNameColor: SEMANTIC_COLORS.primary60,
+    codeNumberColor: SEMANTIC_COLORS.accentSecondary60,
+    codeInlineCodeKeywordColor: SEMANTIC_COLORS.assistance60,
+    codeKeywordColor: SEMANTIC_COLORS.assistance60,
+    codeTypeColor: SEMANTIC_COLORS.primary60,
+    codeSymbolColor: SEMANTIC_COLORS.danger60,
+    codeTitleColor: SEMANTIC_COLORS.warning60,
+    codeSectionColor: SEMANTIC_COLORS.danger60,
+    codeAdditionColor: SEMANTIC_COLORS.accentSecondary60,
+    codeDeletionColor: SEMANTIC_COLORS.danger60,
+    filterButtonBadgeBackgroundHover: SEMANTIC_COLORS.shade105,
+    loadingSpinnerBorder: dark_border_colors.borderBasePlain,
+    loadingChartMonoBackground0: SEMANTIC_COLORS.shade110,
+    loadingChartMonoBackground1: SEMANTIC_COLORS.shade100,
+    loadingChartMonoBackground2: SEMANTIC_COLORS.shade90,
+    loadingChartMonoBackground3: SEMANTIC_COLORS.shade80,
+    overlayMaskBackgroundHighContrast: `rgba(${SEMANTIC_COLORS.shade140RGB}, 0.9)`,
+    scrollbarTrackColor: SEMANTIC_COLORS.shade145,
+    skeletonBackgroundSkeletonMiddleHighContrast: `rgba(${SEMANTIC_COLORS.plainLightRGB}, 0.3)`,
+    switchIconDisabled: forms.DARK.iconDisabled,
+    // TODO: align table hover states
+    tableRowInteractiveBackgroundHover: computed(([backgroundBaseInteractiveHover]) => backgroundBaseInteractiveHover, ['colors.backgroundBaseInteractiveHover']),
+    tableRowInteractiveBackgroundFocus: computed(([backgroundBaseInteractiveHover]) => backgroundBaseInteractiveHover, ['colors.backgroundBaseInteractiveHover']),
+    tableRowBackgroundMarked: SEMANTIC_COLORS.warning140,
+    tableRowBackgroundMarkedHover: SEMANTIC_COLORS.warning130,
+    tableFooterBackground: SEMANTIC_COLORS.shade135,
+    tourStepIndicatorInactiveColor: SEMANTIC_COLORS.shade100,
+    tourStepIndicatorActiveColor: computed(([backgroundFilledSuccess]) => backgroundFilledSuccess, ['colors.backgroundFilledSuccess'])
+  }
+};
+
+/*
+ * 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 baseColorVis = {
+  euiColorVis0: SEMANTIC_COLORS.accentSecondary110,
+  euiColorVis1: SEMANTIC_COLORS.accentSecondary80,
+  euiColorVis2: SEMANTIC_COLORS.primary110,
+  euiColorVis3: SEMANTIC_COLORS.primary80,
+  euiColorVis4: SEMANTIC_COLORS.accent110,
+  euiColorVis5: SEMANTIC_COLORS.accent80,
+  euiColorVis6: SEMANTIC_COLORS.danger110,
+  euiColorVis7: SEMANTIC_COLORS.danger80,
+  euiColorVis8: SEMANTIC_COLORS.warning110,
+  euiColorVis9: SEMANTIC_COLORS.warning80
+};
+const visColorsLightHighContrast = {
+  ...baseColorVis,
+  euiColorVisBehindText0: baseColorVis.euiColorVis0,
+  euiColorVisBehindText1: baseColorVis.euiColorVis1,
+  euiColorVisBehindText2: baseColorVis.euiColorVis2,
+  euiColorVisBehindText3: baseColorVis.euiColorVis3,
+  euiColorVisBehindText4: baseColorVis.euiColorVis4,
+  euiColorVisBehindText5: baseColorVis.euiColorVis5,
+  euiColorVisBehindText6: baseColorVis.euiColorVis6,
+  euiColorVisBehindText7: baseColorVis.euiColorVis7,
+  euiColorVisBehindText8: baseColorVis.euiColorVis8,
+  euiColorVisBehindText9: baseColorVis.euiColorVis9,
+  euiColorVisText0: SEMANTIC_COLORS.accentSecondary110,
+  euiColorVisText1: SEMANTIC_COLORS.accentSecondary100,
+  euiColorVisText2: SEMANTIC_COLORS.primary110,
+  euiColorVisText3: SEMANTIC_COLORS.primary90,
+  euiColorVisText4: SEMANTIC_COLORS.accent100,
+  euiColorVisText5: SEMANTIC_COLORS.accent80,
+  euiColorVisText6: SEMANTIC_COLORS.danger100,
+  euiColorVisText7: SEMANTIC_COLORS.danger80,
+  euiColorVisText8: SEMANTIC_COLORS.warning110,
+  euiColorVisText9: SEMANTIC_COLORS.warning90,
+  euiColorVisNeutral0: SEMANTIC_COLORS.neutral100,
+  euiColorVisNeutral1: SEMANTIC_COLORS.neutral80,
+  euiColorVisSuccess0: SEMANTIC_COLORS.success100,
+  euiColorVisSuccess1: SEMANTIC_COLORS.success80,
+  euiColorVisWarning0: SEMANTIC_COLORS.warning100,
+  euiColorVisWarning1: SEMANTIC_COLORS.warning80,
+  euiColorVisRisk0: SEMANTIC_COLORS.risk100,
+  euiColorVisRisk1: SEMANTIC_COLORS.risk80,
+  euiColorVisDanger0: SEMANTIC_COLORS.danger100,
+  euiColorVisDanger1: SEMANTIC_COLORS.danger80,
+  // We removed the `mutedGrey` palette in favor of the `blueGrey` palette from the theme
+  // but we need to keep this specific value for visualizations backwards compatibility.
+  // We want to limit its usage to visualizations only, so we're keeping it hardcoded here.
+  euiColorVisBase0: '#F6F9FC',
+  euiColorVisGrey0: PRIMITIVE_COLORS.blueGrey30,
+  euiColorVisGrey1: PRIMITIVE_COLORS.blueGrey60,
+  euiColorVisGrey2: PRIMITIVE_COLORS.blueGrey90,
+  euiColorVisGrey3: PRIMITIVE_COLORS.blueGrey130,
+  euiColorVisWarm0: SEMANTIC_COLORS.danger10,
+  euiColorVisWarm1: SEMANTIC_COLORS.danger50,
+  euiColorVisWarm2: SEMANTIC_COLORS.danger100,
+  euiColorVisCool0: SEMANTIC_COLORS.primary10,
+  euiColorVisCool1: SEMANTIC_COLORS.primary50,
+  euiColorVisCool2: SEMANTIC_COLORS.primary100,
+  euiColorVisComplementary0: SEMANTIC_COLORS.primary80,
+  euiColorVisComplementary1: SEMANTIC_COLORS.warning80
+};
+
+/*
+ * 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 severityColorsLightHighContrast = {
+  unknown: SEMANTIC_COLORS.shade70,
+  neutral: SEMANTIC_COLORS.neutral70,
+  success: SEMANTIC_COLORS.success80,
+  warning: SEMANTIC_COLORS.warning80,
+  risk: SEMANTIC_COLORS.risk70,
+  danger: SEMANTIC_COLORS.danger70,
+  assistance: SEMANTIC_COLORS.assistance70
+};
+
+/*
+ * 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 overrides = {
+  HCM: {
+    colors: {
+      plainDark: PRIMITIVE_COLORS.black,
+      plainLight: PRIMITIVE_COLORS.white,
+      DARK: {
+        textInk: PRIMITIVE_COLORS.black,
+        textGhost: PRIMITIVE_COLORS.white,
+        text: SEMANTIC_COLORS.shade30,
+        textParagraph: SEMANTIC_COLORS.shade30
+      },
+      LIGHT: {
+        textInk: PRIMITIVE_COLORS.black,
+        textGhost: PRIMITIVE_COLORS.white,
+        text: SEMANTIC_COLORS.shade130,
+        textParagraph: SEMANTIC_COLORS.shade130,
+        vis: visColorsLightHighContrast,
+        severity: severityColorsLightHighContrast
+      }
+    }
+  }
+};
+
+/*
+ * 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 EUI_THEME_BOREALIS_KEY = 'EUI_THEME_BOREALIS';
+const euiThemeBorealis = {
+  colors,
+  base,
+  size,
+  border,
+  font,
+  animation,
+  breakpoint,
+  levels,
+  shadows,
+  focus,
+  components,
+  flags: {
+    shadowVariant: 'refresh'
+  },
+  overrides
+};
+const EuiThemeBorealis = buildTheme(euiThemeBorealis, EUI_THEME_BOREALIS_KEY);
 
 /**
  * What `@highContrastMode` accepts: upstream's boolean prop (`true` is