@pablo-amberflo/ui-kit-test/src/components/atoms/ActionButton/styles.js

Amberflo UI Kit

import { theme, sizes } from "../../../styles";

export const styles = () => ({
  container: {
    textTransform: "capitalize",
    display: "flex",
  },
  defaultButton: {
    height: "2.4rem",
    borderRadius: "3px",
  },
  defaultButtonText: {
    textTransform: "capitalize",
  },
  buttonIcon: {
    height: "1.5rem",
    width: "1.5rem",
    marginRight: "0.6rem",
  },
  disabled: {
    opacity: "0.5",
  },
  /* Primary Button */
  primaryButton: {
    //margin: "0 1rem",
    padding: "0.5rem 1rem",
    borderRadius: "3px",
    backgroundColor: theme.action.primary,
    color: theme.text.light,
    "&:hover": {
      backgroundColor: theme.action.primary,
    },
  },
  primaryButtonText: {
    textTransform: "capitalize",
    color: theme.text.light,
  },
  /* Secondary Button */
  secondaryButton: {
    margin: "0 1rem",
    padding: "0.5rem 1rem",
    borderRadius: "3px",
    backgroundColor: "transparent",
    boxShadow: "none",
    "&:hover": {
      backgroundColor: "transparent",
      boxShadow: "none",
    },
    "&.MuiButton-contained.Mui-disabled": {
      backgroundColor: "transparent",
      color: theme.text.disabled,
    },
  },
  secondaryButtonText: {
    textTransform: "capitalize",
    color: theme.text.link,
  },
  secondaryButtonTextDisabled: {
    color: theme.text.disabled,
  },
  /* White Button */
  whiteButton: {
    background: theme.background.clear.light,
    border: "solid 1px #cccccc",
    borderRadius: "4px",
    padding: "0.38rem 1rem",
    boxShadow: "none",
    "&:hover": {
      background: theme.background.clear.light,
    },
  },
  whiteButtonText: {
    textTransform: "capitalize",
    color: theme.text.link,
  },
  whiteButtonDisabled: {
    "&.MuiButton-contained.Mui-disabled": {
      backgroundColor: theme.background.clear.light,
    },
  },
  whiteButtonTextDisabled: {
    color: theme.text.disabled,
  },
  /* Tab Button */
  tabButton: {
    minWidth: "fit-content",
    backgroundColor: "transparent",
    boxShadow: "none",
    justifyContent: "flex-start",
    color: theme.text.secondary,
    margin: "0rem",
    padding: "0rem",
    height: "100%",
    borderRadius: "0px",
    "&:hover": {
      backgroundColor: "transparent",
      boxShadow: "none",
      color: theme.text.secondary,
    },
  },
  selectedTabButton: {
    minWidth: "fit-content",
    backgroundColor: "transparent",
    boxShadow: "none",
    justifyContent: "flex-start",
    color: theme.text.link,
    margin: "0rem",
    padding: "0rem",
    height: "100%",
    borderRadius: "0px",
    borderBottom: `3px solid ${theme.text.link}`,
    "&:hover": {
      backgroundColor: "transparent",
      boxShadow: "none",
      color: theme.text.link,
    },
  },
  tabButtonTitle: {
    fontSize: sizes.typography.h6,
    color: theme.text.secondary,
  },
  selectedTabButtonTitle: {
    fontSize: sizes.typography.h6,
    color: theme.text.link,
  },
});