@icoms-detection/ui/src/stitches/button.ts

This is the OFFICIAL UI library created by Icoms Detection to design their apps.

import { SizeProps } from "../utils/types";

// Button Compounds
const buttonCompounds = [
  {
    variant: "primary",
    color: "primary",
    css: {
      color: "$primary_50",
      backgroundColor: "$primary_500",
      "&:focus": {
        boxShadow: "0 0 0 2px white, 0 0 0 4px $colors$primary_500",
      },
    },
  },
  {
    variant: "primary",
    color: "secondary",
    css: {
      color: "$secondary_50",
      backgroundColor: "$secondary_500",
      "&:focus": {
        boxShadow: "0 0 0 2px white, 0 0 0 4px $colors$secondary_500",
      },
    },
  },
  {
    variant: "secondary",
    color: "primary",
    css: {
      color: "$primary_500",
      backgroundColor: "$primary_100",
    },
  },
  {
    variant: "secondary",
    color: "secondary",
    css: {
      color: "$secondary_600",
      backgroundColor: "$secondary_100",
    },
  },
  {
    variant: "ghost",
    color: "primary",
    css: {
      stroke: "$primary_500",
      color: "$primary_500",
      "&:hover": { backgroundColor: "$primary_100" },
    },
  },
  {
    variant: "ghost",
    color: "secondary",
    css: {
      stroke: "$secondary_500",
      color: "$secondary_500",
      "&:hover": { backgroundColor: "$secondary_100" },
    },
  },
  {
    variant: "outline",
    color: "primary",
    css: {
      stroke: "$primary_500",
      color: "$primary_500",
      ringColor: "$primary_500",
      "&:hover": {
        backgroundColor: "$primary_100",
        ringColor: "$primary_500",
      },
    },
  },
  {
    variant: "outline",
    color: "secondary",
    css: {
      stroke: "$secondary_500",
      color: "$secondary_500",
      ringColor: "$secondary_500",
      "&:hover": {
        backgroundColor: "$secondary_100",
        ringColor: "$secondary_500",
      },
    },
  },
  {
    variant: "text",
    color: "primary",
    css: {
      color: "$primary_500",
      "&:hover": { color: "$primary_600" },
    },
  },
  {
    variant: "text",
    color: "secondary",
    css: {
      color: "$secondary_500",
      "&:hover": { color: "$secondary_600" },
    },
  },
];

// Variants
const variants = {
  primary: {
    color: "$neutral_50",
    backgroundColor: "$neutral_700",
    transitionDuration: ".1s",
    "&:hover": {
      filter: "brightness(1.05)",
    },
    "&:focus": {
      boxShadow: "0 0 0 2px white, 0 0 0 4px $colors$neutral_700",
    },
  },
  secondary: {
    color: "$neutral_700",
    backgroundColor: "$neutral_50",
    transitionDuration: ".1s",
    "&:hover": {
      filter: "brightness(.95)",
    },
  },
  ghost: {
    stroke: "$neutral_500",
    color: "$neutral_500",
    backgroundColor: "transparent",
    transitionDuration: ".1s",
    "&:hover": {
      backgroundColor: "$neutral_100",
    },
  },
  outline: {
    stroke: "$neutral_500",
    color: "$neutral_500",
    ringColor: "$neutral_500",
    backgroundColor: "transparent",
    transitionDuration: ".1s",
    "&:hover": {
      backgroundColor: "$neutral_100",
      ringColor: "$neutral_500",
    },
  },
  text: {
    color: "$neutral_500",
    backgroundColor: "transparent",
    padding: "0px",
    transitionDuration: ".1s",
    "&:hover": {
      color: "$neutral_600",
    },
  },
};

// Sizes
const sizes: Record<SizeProps, any> = {
  "2xs": {
    fontSize: "0.75rem",
    lineHeight: "0.75rem",
    padding: "0.375rem 0.625rem",
  },
  xs: {
    fontSize: "0.75rem",
    lineHeight: "0.75rem",
    padding: "0.375rem 0.625rem",
  },
  sm: {
    fontSize: "0.875rem",
    lineHeight: "1rem",
    padding: "0.5rem 0.75rem",
  },
  base: {
    fontSize: "1rem",
    lineHeight: "1.25rem",
    padding: "0.5rem 1rem",
  },
  lg: {
    fontSize: "1.125rem",
    lineHeight: "1.25rem",
    padding: "0.5rem 1rem",
  },
  xl: {
    fontSize: "1.25rem",
    lineHeight: "1.25rem",
    padding: "0.75rem 1.25rem",
  },
  "2xl": {
    fontSize: "1.5rem",
    lineHeight: "2rem",
    padding: "1rem 1.5rem",
  },
};

// Squared
const squared: Record<SizeProps, any> = {
  "2xs": {
    width: "1.5rem",
    height: "1.5rem",
  },
  xs: {
    width: "1.75rem",
    height: "1.75rem",
  },
  sm: {
    width: "2rem",
    height: "2rem",
  },
  base: {
    width: "2.25rem",
    height: "2.25rem",
  },
  lg: {
    width: "2.5rem",
    height: "2.5rem",
  },
  xl: {
    width: "3rem",
    height: "3rem",
  },
  "2xl": {
    width: "3.5rem",
    height: "3.5rem",
  },
};

// Rounded
const rounded: Record<SizeProps, any> = {
  "2xs": {
    borderRadius: "0.25rem",
  },
  xs: {
    borderRadius: "0.25rem",
  },
  sm: { borderRadius: "0.25rem" },
  base: { borderRadius: "0.375rem" },
  lg: { borderRadius: "0.375rem" },
  xl: { borderRadius: "0.375rem" },
  "2xl": { borderRadius: "0.5rem" },
};

// Default styles applied
const defaultStyle = {
  borderRadius: "5px",
  display: "flex",
  justifyContent: "center",
  alignItems: "center",
  border: "none",
  color: "$neutral_700",
  backgroundColor: "$neutral_100",
  fontWeight: 400,
  fontFamily: "$header",
  paddingTop: "10px",
  fontSize: "1rem",
  lineHeight: "1.25rem",
  padding: "0.5rem 1rem",
  paddingBottom: "10px",
  paddingLeft: "16px",
  paddingRight: "16px",
  "&:hover": {
    cursor: "pointer",
  },
};

// Button styles
export const stitchesButtonStyles = {
  ...defaultStyle,
  variants: {
    variant: variants,
    color: { primary: {}, secondary: {} },
    size: sizes,
    squared: squared,
    rounded: rounded,
    icon: {
      true: {
        padding: "0px",
        justifyContent: "center",
      },
    },
    round: {
      true: {
        borderRadius: "9999px",
      },
    },
    loading: {
      true: { "&:hover": { cursor: "wait" } },
    },
  },
  compoundVariants: buttonCompounds,
};