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

A horizontal navigation component for Atlassian apps.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.generateTheme = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _defaultTheme = require("./default-theme");
var _defaultThemeBrandRefresh = require("./default-theme-brand-refresh");
var _generateTextColor = require("./generate-text-color");
var _getBoxShadow = require("./get-box-shadow");
var _getContrastColor = require("./get-contrast-color");
var _hexToRgba = require("./hex-to-rgba");
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
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 ? (0, _hexToRgba.hexToRGBA)(backgroundColor, 0.65) : (0, _getContrastColor.getContrastColor)(0.3, opacityValue, backgroundColor),
      boxShadow: (0, _getBoxShadow.getBoxShadow)('transparent'),
      color: color
    },
    default: {
      backgroundColor: backgroundColor,
      boxShadow: (0, _getBoxShadow.getBoxShadow)('transparent'),
      color: color
    },
    focus: {
      boxShadow: 'none',
      color: color,
      backgroundColor: backgroundColor
    },
    hover: {
      backgroundColor: isCreateButton ? (0, _hexToRgba.hexToRGBA)(backgroundColor, 0.8) : (0, _getContrastColor.getContrastColor)(0.1, opacityValue, backgroundColor),
      boxShadow: (0, _getBoxShadow.getBoxShadow)('transparent'),
      color: color
    },
    selected: {
      color: color,
      backgroundColor: (0, _getContrastColor.getContrastColor)(0.3, opacityValue, backgroundColor),
      borderColor: highlightColor,
      boxShadow: (0, _getBoxShadow.getBoxShadow)('transparent')
    },
    selectedHover: {
      color: color,
      backgroundColor: (0, _getContrastColor.getContrastColor)(0.3, opacityValue, backgroundColor),
      borderColor: highlightColor,
      boxShadow: (0, _getBoxShadow.getBoxShadow)('transparent')
    }
  };
};
var generateCreateButtonColors = function generateCreateButtonColors(_themeBackground, themeHighlight) {
  return {
    backgroundColor: themeHighlight,
    color: (0, _generateTextColor.generateTextColor)(themeHighlight),
    highlightColor: themeHighlight
  };
};

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