@mantine/core/cjs/components/Button/Button.styles.js

React components library focused on usability, accessibility and developer experience

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var Input = require('../Input/Input.js');
var createMemoStyles = require('../../theme/create-memo-styles.js');
var getFontStyles = require('../../theme/utils/get-font-styles/get-font-styles.js');
var getFocusStyles = require('../../theme/utils/get-focus-styles/get-focus-styles.js');
var getSizeValue = require('../../theme/utils/get-size-value/get-size-value.js');
var getThemeColor = require('../../theme/utils/get-theme-color/get-theme-color.js');
var hexToRgba = require('../../theme/utils/hex-to-rgba/hex-to-rgba.js');

var __defProp = Object.defineProperty;
var __defProps = Object.defineProperties;
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
  for (var prop in b || (b = {}))
    if (__hasOwnProp.call(b, prop))
      __defNormalProp(a, prop, b[prop]);
  if (__getOwnPropSymbols)
    for (var prop of __getOwnPropSymbols(b)) {
      if (__propIsEnum.call(b, prop))
        __defNormalProp(a, prop, b[prop]);
    }
  return a;
};
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
const sizes = {
  xs: {
    fontSize: 12,
    height: Input.INPUT_SIZES.xs,
    padding: [0, 14]
  },
  sm: {
    fontSize: 14,
    height: Input.INPUT_SIZES.sm,
    padding: [0, 18]
  },
  md: {
    fontSize: 16,
    height: Input.INPUT_SIZES.md,
    padding: [0, 22]
  },
  lg: {
    fontSize: 18,
    height: Input.INPUT_SIZES.lg,
    padding: [0, 26]
  },
  xl: {
    fontSize: 22,
    height: Input.INPUT_SIZES.xl,
    padding: [0, 32]
  }
};
const heights = Object.keys(sizes).reduce((acc, size) => {
  acc[size] = sizes[size].height;
  return acc;
}, {});
const getWidthStyles = (fullWidth) => ({
  display: fullWidth ? "block" : "inline-block",
  width: fullWidth ? "100%" : "auto"
});
var useStyles = createMemoStyles.createMemoStyles({
  icon: {
    display: "flex",
    alignItems: "center"
  },
  leftIcon: {
    marginRight: 10
  },
  rightIcon: {
    marginLeft: 10
  },
  inner: {
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    height: "100%",
    overflow: "visible"
  },
  label: {
    display: "block",
    whiteSpace: "nowrap",
    overflow: "hidden",
    textOverflow: "ellipsis"
  },
  root: (props) => __spreadProps(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, sizes[props.size]), getFontStyles.getFontStyles(props.theme)), getFocusStyles.getFocusStyles(props.theme)), getWidthStyles(props.fullWidth)), {
    WebkitTapHighlightColor: "transparent",
    userSelect: "none",
    boxSizing: "border-box",
    textDecoration: "none",
    cursor: "pointer",
    appearance: "none",
    WebkitAppearance: "none"
  }),
  outline: ({ color, size, radius, theme }) => ({
    backgroundColor: "transparent",
    borderRadius: getSizeValue.getSizeValue({ size: radius, sizes: theme.radius }),
    fontWeight: 600,
    height: sizes[size].height,
    color: getThemeColor.getThemeColor({ theme, color, shade: theme.colorScheme === "dark" ? 4 : 7 }),
    border: `1px solid ${getThemeColor.getThemeColor({
      theme,
      color,
      shade: theme.colorScheme === "dark" ? 4 : 7
    })}`,
    "&:not(:disabled):active": {
      transform: "translateY(1px)"
    },
    "&:disabled": {
      borderColor: "transparent",
      backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[2],
      color: theme.colorScheme === "dark" ? theme.colors.dark[6] : theme.colors.gray[5],
      cursor: "not-allowed"
    }
  }),
  light: ({ color, size, radius, theme }) => ({
    borderRadius: getSizeValue.getSizeValue({ size: radius, sizes: theme.radius }),
    fontWeight: 600,
    border: "1px solid transparent",
    height: sizes[size].height,
    backgroundColor: hexToRgba.hexToRgba(getThemeColor.getThemeColor({ theme, color, shade: theme.colorScheme === "dark" ? 9 : 0 }), theme.colorScheme === "dark" ? 0.3 : 1),
    color: getThemeColor.getThemeColor({ theme, color, shade: theme.colorScheme === "dark" ? 3 : 9 }),
    "& $inner": {
      height: "100%"
    },
    "&:not(:disabled):active": {
      transform: "translateY(1px)"
    },
    "&:disabled": {
      borderColor: "transparent",
      backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[2],
      color: theme.colorScheme === "dark" ? theme.colors.dark[6] : theme.colors.gray[5],
      textShadow: "none",
      cursor: "not-allowed"
    }
  }),
  filled: ({ color, size, radius, theme }) => ({
    border: "1px solid transparent",
    borderRadius: getSizeValue.getSizeValue({ size: radius, sizes: theme.radius }),
    fontWeight: 600,
    backgroundColor: getThemeColor.getThemeColor({ theme, color, shade: 7 }),
    color: theme.white,
    height: sizes[size].height,
    textShadow: `1px 1px 0 ${getThemeColor.getThemeColor({ theme, color, shade: 9 })}`,
    "& $inner": {
      height: "100%"
    },
    "&:not(:disabled):active": {
      transform: "translateY(1px)"
    },
    "&:disabled": {
      borderColor: "transparent",
      backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[2],
      color: theme.colorScheme === "dark" ? theme.colors.dark[6] : theme.colors.gray[5],
      textShadow: "none",
      cursor: "not-allowed"
    }
  }),
  link: ({ color, radius, theme }) => ({
    padding: 0,
    borderRadius: getSizeValue.getSizeValue({ size: radius, sizes: theme.radius }),
    backgroundColor: "transparent",
    border: 0,
    display: "inline-block",
    color: getThemeColor.getThemeColor({ theme, color, shade: theme.colorScheme === "dark" ? 4 : 6 }),
    cursor: "pointer",
    lineHeight: theme.lineHeight,
    "&:hover": {
      textDecoration: "underline"
    },
    "&:disabled": {
      color: theme.colors.gray[5],
      cursor: "not-allowed",
      "&:hover": {
        textDecoration: "none"
      }
    }
  })
});

exports.default = useStyles;
exports.heights = heights;
//# sourceMappingURL=Button.styles.js.map