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

A horizontal navigation component for Atlassian products.

import _defineProperty from "@babel/runtime/helpers/defineProperty";
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
import defaultTheme, { DEFAULT_THEME_NAME } from './default-theme';
import { generateTextColor, getBoxShadow, getContrastColor, hexToRGBA } from './theme-helpers';
var generateOpacityValue = function generateOpacityValue(color) {
  return color === '#000000' ? 0.3 : 0.6;
};

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

var generateButtonCSSStates = function generateButtonCSSStates(colors, buttonType) {
  var backgroundColor = colors.backgroundColor,
    color = colors.color,
    highlightColor = colors.highlightColor;

  // Add less opacity for white text so it is still legible.
  var opacityValue = generateOpacityValue(color);
  var isCreateButton = buttonType === 'create';
  return {
    active: {
      backgroundColor: isCreateButton ? hexToRGBA(backgroundColor, 0.65) : getContrastColor(0.3, opacityValue, backgroundColor),
      boxShadow: getBoxShadow('transparent'),
      color: color
    },
    default: {
      backgroundColor: backgroundColor,
      boxShadow: getBoxShadow('transparent'),
      color: color
    },
    focus: {
      boxShadow: getBoxShadow(hexToRGBA(highlightColor, 0.5)),
      color: color,
      backgroundColor: backgroundColor
    },
    hover: {
      backgroundColor: isCreateButton ? hexToRGBA(backgroundColor, 0.8) : getContrastColor(0.1, opacityValue, backgroundColor),
      boxShadow: getBoxShadow('transparent'),
      color: color
    },
    selected: {
      color: color,
      backgroundColor: getContrastColor(0.3, opacityValue, backgroundColor),
      borderColor: highlightColor,
      boxShadow: getBoxShadow('transparent')
    },
    selectedHover: {
      color: color,
      backgroundColor: getContrastColor(0.3, opacityValue, backgroundColor),
      borderColor: highlightColor,
      boxShadow: getBoxShadow('transparent')
    }
  };
};
var generateCreateButtonColors = function generateCreateButtonColors(themeBackground, themeHighlight) {
  return {
    backgroundColor: themeHighlight,
    color: generateTextColor(themeHighlight),
    highlightColor: themeHighlight
  };
};
export var generateTheme = function generateTheme(themeColors) {
  var backgroundColor = themeColors.backgroundColor,
    highlightColor = themeColors.highlightColor,
    name = themeColors.name;
  var color = generateTextColor(backgroundColor);
  var colors = _objectSpread(_objectSpread({}, themeColors), {}, {
    color: 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: backgroundColor,
        color: color
      },
      productHome: {
        color: color,
        backgroundColor: highlightColor,
        borderRight: "1px solid ".concat(hexToRGBA(color, 0.5))
      },
      search: {
        default: {
          backgroundColor: backgroundColor,
          color: 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: color
        }
      },
      skeleton: {
        backgroundColor: color,
        opacity: 0.08
      }
    }
  };
};
export default generateTheme;