codeBackground: computed()

in packages/eui/src/themes/amsterdam/global_styling/variables/_components.ts [72:377]

• 284 lines of code
• 1 McCabe index (conditional complexity)

  codeBackground: computed(
    ([lightestShade]) => lightestShade,
    ['colors.lightestShade']
  ),
  codeBackgroundSelected: 'inherit',
  codeColor: computed(
    ([lightestShade, text]) => makeHighContrastColor(text)(lightestShade),
    ['colors.lightestShade', 'colors.text']
  ),
  codeInlineColor: computed(
    ([lightestShade]) =>
      makeHighContrastColor(colorVis.euiColorVis3)(lightestShade),
    ['colors.lightestShade']
  ),
  codeCommentColor: computed(
    ([lightestShade, subduedText]) =>
      makeHighContrastColor(subduedText)(lightestShade),
    ['colors.lightestShade', 'colors.subduedText']
  ),
  codeSelectorColor: 'inherit',
  codeStringColor: computed(
    ([lightestShade]) =>
      makeHighContrastColor(colorVis.euiColorVis2)(lightestShade),
    ['colors.lightestShade']
  ),
  codeTagColor: computed(
    ([lightestShade]) =>
      makeHighContrastColor(colorVis.euiColorVis1)(lightestShade),
    ['colors.lightestShade']
  ),
  codeNameColor: computed(
    ([lightestShade]) =>
      makeHighContrastColor(colorVis.euiColorVis1)(lightestShade),
    ['colors.lightestShade']
  ),
  codeNumberColor: computed(
    ([lightestShade]) =>
      makeHighContrastColor(colorVis.euiColorVis0)(lightestShade),
    ['colors.lightestShade']
  ),
  codeInlineCodeKeywordColor: computed(
    ([lightestShade]) =>
      makeHighContrastColor(colorVis.euiColorVis6)(lightestShade),
    ['colors.lightestShade']
  ),
  codeKeywordColor: computed(
    ([lightestShade]) =>
      makeHighContrastColor(colorVis.euiColorVis3)(lightestShade),
    ['colors.lightestShade']
  ),
  codeFunctionTitleColor: 'inherit',
  codeTypeColor: computed(
    ([lightestShade]) =>
      makeHighContrastColor(colorVis.euiColorVis1)(lightestShade),
    ['colors.lightestShade']
  ),
  codeAttributeColor: 'inherit',
  codeSymbolColor: computed(
    ([lightestShade]) =>
      makeHighContrastColor(colorVis.euiColorVis9)(lightestShade),
    ['colors.lightestShade']
  ),
  codeParamsColor: 'inherit',
  codeMetaColor: computed(
    ([lightestShade, subduedText]) =>
      makeHighContrastColor(subduedText)(lightestShade),
    ['colors.lightestShade', 'colors.subduedText']
  ),
  codeTitleColor: computed(
    ([lightestShade]) =>
      makeHighContrastColor(colorVis.euiColorVis7)(lightestShade),
    ['colors.lightestShade']
  ),
  codeSectionColor: computed(
    ([lightestShade]) =>
      makeHighContrastColor(colorVis.euiColorVis9)(lightestShade),
    ['colors.lightestShade']
  ),
  codeAdditionColor: computed(
    ([lightestShade]) =>
      makeHighContrastColor(colorVis.euiColorVis0)(lightestShade),
    ['colors.lightestShade']
  ),
  codeDeletionColor: computed(
    ([lightestShade, danger]) => makeHighContrastColor(danger)(lightestShade),
    ['colors.lightestShade', 'colors.danger']
  ),
  codeSelectorClassColor: 'inherit',
  codeSelectorIdColor: 'inherit',

  collapsibleNavGroupBackground: computed(([body]) => body, ['colors.body']),
  collapsibleNavGroupBackgroundDark: computed(
    ([darkestShade]) => shade(darkestShade, 0.2),
    ['colors.darkestShade']
  ),

  dataGridBorderColor: computed(([color]) => color, ['border.color']),
  dataGridVerticalLineBorderColor: computed(
    ([color]) => tint(color, 0.3),
    ['border.color']
  ),
  dataGridRowBackgroundStriped: computed(
    ([lightestShade]) => lightestShade,
    ['colors.lightestShade']
  ),
  dataGridRowBackgroundHover: computed(
    ([highlight]) => highlight,
    ['colors.highlight']
  ),
  dataGridRowBackgroundSelect: computed(
    ([highlight]) => highlight,
    ['colors.highlight']
  ),

  dragDropDraggingBackground: computed(
    ([success]) => transparentize(success, 0.1),
    ['colors.success']
  ),
  dragDropDraggingOverBackground: computed(
    ([success]) => transparentize(success, 0.25),
    ['colors.success']
  ),

  filterSelectItemBackgroundFocusDisabled: computed(
    ([disabled]) => transparentize(disabled, 0.1),
    ['colors.disabled']
  ),

  flyoutFooterBackground: computed(
    ([lightestShade]) => lightestShade,
    ['colors.lightestShade']
  ),
  flyoutCloseButtonInsideBackground: computed(
    ([emptyShade]) => transparentize(emptyShade, 0.9),
    ['colors.emptyShade']
  ),

  headerBackground: computed(
    ([emptyShade]) => emptyShade,
    ['colors.emptyShade']
  ),
  headerDarkBackground: computed(
    ([darkestShade]) => shade(darkestShade, 0.28),
    ['colors.darkestShade']
  ),
  headerDarkSearchBorderColor: computed(
    ([ghost]) => transparentize(ghost, 0.3),
    ['colors.ghost']
  ),
  headerDarkSectionItemBackgroundFocus: computed(
    ([primary]) => shade(primary, 0.5),
    ['colors.primary']
  ),

  keyPadMenuItemBackgroundDisabledSelect: computed(
    ([disabled]) => transparentize(disabled, 0.1),
    ['colors.disabled']
  ),

  listGroupItemBackgroundPrimaryActive: computed(
    ([lightShade]) => transparentize(lightShade, 0.2),
    ['colors.lightShade']
  ),
  listGroupItemBackgroundSubduedActive: computed(
    ([primary]) => transparentize(primary, 0.1),
    ['colors.primary']
  ),
  listGroupItemBackgroundHover: computed(
    ([lightShade]) => transparentize(lightShade, 0.2),
    ['colors.lightShade']
  ),
  listGroupItemBackgroundPrimaryHover: computed(
    ([primary]) => transparentize(primary, 0.1),
    ['colors.primary']
  ),

  loadingSpinnerBorder: computed(
    ([lightShade]) => lightShade,
    ['colors.lightShade']
  ),
  loadingSpinnerHighlight: computed(([primary]) => primary, ['colors.primary']),

  loadingChartMonoBackground0: computed(
    ([lightShade]) => lightShade,
    ['colors.lightShade']
  ),
  loadingChartMonoBackground1: computed(
    ([lightShade]) => shade(lightShade, 0.04),
    ['colors.lightShade']
  ),
  loadingChartMonoBackground2: computed(
    ([lightShade]) => shade(lightShade, 0.08),
    ['colors.lightShade']
  ),
  loadingChartMonoBackground3: computed(
    ([lightShade]) => shade(lightShade, 0.12),
    ['colors.lightShade']
  ),

  markBackground: computed(
    ([primary]) => transparentize(primary, 0.1),
    ['colors.primary']
  ),

  markdownFormatTableBorderColor: computed(
    ([fullShade]) => transparentize(fullShade, 0.15),
    ['colors.fullShade']
  ),

  overlayMaskBackground: computed(
    ([backgroundBaseInteractiveOverlay]) => backgroundBaseInteractiveOverlay,
    ['colors.backgroundBaseInteractiveOverlay']
  ),
  overlayMaskBackgroundHighContrast: computed(
    ([ink]) => transparentize(ink, 0.85),
    ['colors.ink']
  ),

  popoverPanelBackground: computed(
    ([emptyShade]) => emptyShade,
    ['colors.emptyShade']
  ),
  popoverFooterBorderColor: computed(([color]) => color, ['border.color']),

  scrollbarTrackColor: computed(([body]) => shade(body, 0.03), ['colors.body']),

  sideNavItemEmphasizedBackground: computed(
    ([lightShade]) => transparentize(lightShade, 0.3),
    ['colors.lightShade']
  ),

  selectableListItemBorderColor: computed(
    ([color]) => transparentize(color, 0.4),
    ['border.color']
  ),

  skeletonBackgroundSkeletonMiddleHighContrast: computed(
    ([emptyShade]) => emptyShade,
    ['colors.emptyShade']
  ),

  superDatePickerBackgroundSuccees: computed(
    ([success]) => tint(success, 0.9),
    ['colors.success']
  ),

  switchBackgroundOn: computed(([primary]) => primary, ['colors.primary']),
  switchBackgroundOff: computed(
    ([lightestShade]) => shade(lightestShade, 0.4),
    ['colors.lightestShade']
  ),
  switchUncompressedBackgroundDisabled: computed(
    ([lightShade]) => tint(lightShade, 0.5),
    ['colors.lightShade']
  ),
  switchCompressedBackgroundDisabled: computed(
    ([lightShade]) => tint(lightShade, 0.25),
    ['colors.lightShade']
  ),
  switchMiniBackgroundDisabled: computed(
    ([lightShade]) => tint(lightShade, 0),
    ['colors.lightShade']
  ),
  switchThumbBackgroundDisabled: 'transparent',
  switchThumbBorderOn: computed(
    ([lightestShade]) => shade(lightestShade, 0.4),
    ['colors.lightestShade']
  ),
  switchThumbBorderOff: computed(
    ([lightestShade]) => shade(lightestShade, 0.4),
    ['colors.lightestShade']
  ),
  switchIconDisabled: computed(
    ([lightestShade]) => shade(lightestShade, 0.4),
    ['colors.lightestShade']
  ),

  tableRowBackgroundHover: computed(
    ([lightestShade]) => tint(lightestShade, 0.5),
    ['colors.lightestShade']
  ),
  tableRowBackgroundSelected: computed(
    ([primary]) => tint(primary, 0.96),
    ['colors.primary']
  ),
  tableRowBackgroundSelectedHover: computed(
    ([primary]) => tint(primary, 0.9),
    ['colors.primary']
  ),
  tableRowInteractiveBackgroundHover: computed(
    ([primary]) => transparentize(primary, 0.05),
    ['colors.primary']
  ),
  tableRowInteractiveBackgroundFocus: computed(
    ([primary]) => transparentize(primary, 0.1),
    ['colors.primary']
  ),
  tableCellSortableIconColor: computed(
    ([emptyShade, subduedText]) => {
      const color = tint(subduedText, 0.9);
      return makeHighContrastColor(
        // Tint it arbitrarily high, the contrast util will take care of lowering back down to WCAG
        color,
        3 // 3:1 ratio from https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html
      )(emptyShade);
    },