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

A horizontal navigation component for Atlassian products.

import defaultTheme, { DEFAULT_THEME_NAME } from './default-theme';
import { generateTextColor, getBoxShadow, getContrastColor, hexToRGBA } from './theme-helpers';
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: getBoxShadow(hexToRGBA(highlightColor, 0.5)),
      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
});
export const generateTheme = themeColors => {
  const {
    backgroundColor,
    highlightColor,
    name
  } = themeColors;
  const color = generateTextColor(backgroundColor);
  const colors = {
    ...themeColors,
    color
  };
  if (name === DEFAULT_THEME_NAME) {
    return defaultTheme;
  }
  return {
    mode: {
      create: generateButtonCSSStates(generateCreateButtonColors(backgroundColor, highlightColor), 'create'),
      iconButton: generateButtonCSSStates(colors, 'iconButton'),
      primaryButton: generateButtonCSSStates(colors, 'primaryButton'),
      navigation: {
        backgroundColor,
        color
      },
      productHome: {
        color,
        backgroundColor: highlightColor,
        borderRight: `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
      }
    }
  };
};
export default generateTheme;