@atlaskit/atlassian-navigation/dist/es2019/theme/theme-generator.js

A horizontal navigation component for Atlassian apps.

import { DEFAULT_THEME_NAME } from './default-theme';
import { defaultThemeBrandRefresh } from './default-theme-brand-refresh';
import { generateTextColor } from './generate-text-color';
import { getBoxShadow } from './get-box-shadow';
import { getContrastColor } from './get-contrast-color';
import { hexToRGBA } from './hex-to-rgba';
const generateOpacityValue = color => color === '#000000' ? 0.3 : 0.6;

// eslint-disable-next-line @repo/internal/react/consistent-types-definitions

const generateButtonCSSStates = (colors, buttonType) => {
  const {
    backgroundColor,
    color,
    highlightColor
  } = colors;

  // Add less opacity for white text so it is still legible.
  const opacityValue = generateOpacityValue(color);
  const isCreateButton = buttonType === 'create';
  return {
    active: {
      backgroundColor: isCreateButton ? hexToRGBA(backgroundColor, 0.65) : getContrastColor(0.3, opacityValue, backgroundColor),
      boxShadow: getBoxShadow('transparent'),
      color
    },
    default: {
      backgroundColor,
      boxShadow: getBoxShadow('transparent'),
      color
    },
    focus: {
      boxShadow: 'none',
      color,
      backgroundColor
    },
    hover: {
      backgroundColor: isCreateButton ? hexToRGBA(backgroundColor, 0.8) : getContrastColor(0.1, opacityValue, backgroundColor),
      boxShadow: getBoxShadow('transparent'),
      color
    },
    selected: {
      color,
      backgroundColor: getContrastColor(0.3, opacityValue, backgroundColor),
      borderColor: highlightColor,
      boxShadow: getBoxShadow('transparent')
    },
    selectedHover: {
      color,
      backgroundColor: getContrastColor(0.3, opacityValue, backgroundColor),
      borderColor: highlightColor,
      boxShadow: getBoxShadow('transparent')
    }
  };
};
const generateCreateButtonColors = (_themeBackground, themeHighlight) => ({
  backgroundColor: themeHighlight,
  color: generateTextColor(themeHighlight),
  highlightColor: themeHighlight
});

/**
 * __generateTheme__
 *
 * @deprecated `@atlaskit/atlassian-navigation` is deprecated. Use `@atlaskit/navigation-system` instead.
 */
export const generateTheme = themeColors => {
  const {
    backgroundColor,
    highlightColor,
    name
  } = themeColors;
  const color = generateTextColor(backgroundColor);
  const colors = {
    ...themeColors,
    color
  };
  if (name === DEFAULT_THEME_NAME) {
    return defaultThemeBrandRefresh;
  }
  return {
    mode: {
      create: generateButtonCSSStates(generateCreateButtonColors(backgroundColor, highlightColor), 'create'),
      iconButton: generateButtonCSSStates(colors, 'iconButton'),
      primaryButton: generateButtonCSSStates(colors, 'primaryButton'),
      navigation: {
        backgroundColor,
        color
      },
      productHome: {
        color,
        iconColor: color,
        textColor: color,
        backgroundColor: highlightColor,
        borderRight: `${"var(--ds-border-width, 1px)"} solid ${hexToRGBA(color, 0.5)}`
      },
      search: {
        default: {
          backgroundColor,
          color,
          borderColor: hexToRGBA(color, 0.5)
        },
        focus: {
          borderColor: hexToRGBA(highlightColor, 0.8),
          boxShadow: getBoxShadow(hexToRGBA(highlightColor, 0.5))
        },
        hover: {
          backgroundColor: getContrastColor(0.1, generateOpacityValue(color), backgroundColor),
          color
        }
      },
      skeleton: {
        backgroundColor: color,
        opacity: 0.08
      }
    }
  };
};