@heycar-uikit/core/button/cssm/styles/variant.module.css

The React UI library from HeyCar

:root {
  /* heycar mint color */

  /* mica blue color */
  --color-mica-blue-500: #164ca3;
  --color-mica-blue-600: #123d82;
  --color-mica-blue-700: #052962;

  /* sunbeam blue color */
  --color-sunbeam-blue-500: #c0e6ff;
  --color-sunbeam-blue-600: #9bd1f4;
  --color-sunbeam-blue-700: #73b6e1;

  /* mustang yellow color */

  /* old ferrari red color */

  /* -- fantasy name of "green" color to be defined -- */

  /* -- fantasy name of "whatsapp" color to be defined -- */
  --color-whatsapp-500: #59ce72;
  --color-whatsapp-600: #33a84c;
  --color-whatsapp-700: #148a2d;

  /* -- fantasy name of "red" color to be defined -- */

  /* tarmac grey color */
  --color-tarmac-grey-50: #f3f3f3;
  --color-tarmac-grey-300: #b5b5b5;
  --color-tarmac-grey-700: #303030;

  /* brand colors */
}
/* Depricated. Do Not Use */
:root {
  /* Font families */

  /* Font weights */
}
/*
  Heading
*/
/*
  Sub-Heading
*/
/*
  Body
*/
/*
  Caption
*/
/*
  Overline
*/
/*
  Button
*/
/*
  Button Old - DO NOT USE
*/
/* If this is ever changed please update breakpoints.json as well */
/* Mobile */
/* Tablet */
/* Desktop */
/* Default theme (light) */
:root {
  /*
    Colors
  */
  --color-primary-500: var(--color-mica-blue-500);
  --color-primary-600: var(--color-mica-blue-600);
  --color-primary-700: var(--color-mica-blue-700);
  --color-tertiary-500: var(--color-sunbeam-blue-500);
  --color-tertiary-600: var(--color-sunbeam-blue-600);
  --color-tertiary-700: var(--color-sunbeam-blue-700);
  --color-neutral-50: var(--color-tarmac-grey-50);
  --color-neutral-300: var(--color-tarmac-grey-300);
  --color-neutral-700: var(--color-tarmac-grey-700);

  /*
    Sizes
  */
}
body {
  color: var(--color-neutral-700);
}
/*
* Vars
*/
:root {
  /* disabled */
  --button-disabled-color: var(--color-neutral-300);
  --button-disabled-bg-color: var(--color-neutral-50);

  /* primary */
  --button-primary-color: #fff;
  --button-primary-base-bg-color: var(--color-primary-500);
  --button-primary-hover-bg-color: var(--color-primary-600);
  --button-primary-active-bg-color: var(--color-primary-700);

  /* tertiary */
  --button-tertiary-color: var(--color-neutral-700);
  --button-tertiary-base-bg-color: var(--color-tertiary-500);
  --button-tertiary-hover-bg-color: var(--color-tertiary-600);
  --button-tertiary-active-bg-color: var(--color-tertiary-700);

  /* whatsapp */
  --button-whatsapp-base-bg-color: var(--color-whatsapp-500);
  --button-whatsapp-hover-bg-color: var(--color-whatsapp-600);
  --button-whatsapp-active-bg-color: var(--color-whatsapp-700);
}
/*
* Mixins
*/
/*
* Colors
*/
/* primary */
.primary {
  background: var(--button-primary-base-bg-color);
  border-color: var(--button-primary-base-bg-color);
  color: var(--button-primary-base-bg-color);
}
.primary:after {
    border-color: var(--button-primary-base-bg-color);
  }
.primary:hover {
    background: var(--button-primary-hover-bg-color);
    border-color: var(--button-primary-hover-bg-color);
    color: var(--button-primary-hover-bg-color);
  }
.primary:hover:after {
    border-color: var(--button-primary-hover-bg-color);
  }
.primary:active,
  .primary:focus-visible {
    background: var(--button-primary-active-bg-color);
    border-color: var(--button-primary-active-bg-color);
    color: var(--button-primary-active-bg-color);
  }
.primary:active:after, .primary:focus-visible:after {
    border-color: var(--button-primary-active-bg-color);
  }
/* tertiary */
.tertiary {
  background: var(--button-tertiary-base-bg-color);
  border-color: var(--button-tertiary-base-bg-color);
  color: var(--button-tertiary-base-bg-color);
}
.tertiary:after {
    border-color: var(--button-tertiary-base-bg-color);
  }
.tertiary:hover {
    background: var(--button-tertiary-hover-bg-color);
    border-color: var(--button-tertiary-hover-bg-color);
    color: var(--button-tertiary-hover-bg-color);
  }
.tertiary:hover:after {
    border-color: var(--button-tertiary-hover-bg-color);
  }
.tertiary:active,
  .tertiary:focus-visible {
    background: var(--button-tertiary-active-bg-color);
    border-color: var(--button-tertiary-active-bg-color);
    color: var(--button-tertiary-active-bg-color);
  }
.tertiary:active:after, .tertiary:focus-visible:after {
    border-color: var(--button-tertiary-active-bg-color);
  }
/* whatsapp */
.whatsapp {
  background: var(--button-whatsapp-base-bg-color);
  border-color: var(--button-whatsapp-base-bg-color);
  color: var(--button-whatsapp-base-bg-color);
}
.whatsapp:after {
    border-color: var(--button-whatsapp-base-bg-color);
  }
.whatsapp:hover {
    background: var(--button-whatsapp-hover-bg-color);
    border-color: var(--button-whatsapp-hover-bg-color);
    color: var(--button-whatsapp-hover-bg-color);
  }
.whatsapp:hover:after {
    border-color: var(--button-whatsapp-hover-bg-color);
  }
.whatsapp:active,
  .whatsapp:focus-visible {
    background: var(--button-whatsapp-active-bg-color);
    border-color: var(--button-whatsapp-active-bg-color);
    color: var(--button-whatsapp-active-bg-color);
  }
.whatsapp:active:after, .whatsapp:focus-visible:after {
    border-color: var(--button-whatsapp-active-bg-color);
  }
/*
* Variants
*/
/* contained */
.contained.primary {
    color: var(--button-primary-color);
  }
.contained.tertiary {
    color: var(--button-tertiary-color);
  }
.contained.whatsapp {
    color: var(--button-primary-color);
  }
.contained:disabled,
  .contained[disabled] {
    background: var(--button-disabled-bg-color);
    border-color: var(--button-disabled-bg-color);
    color: var(--button-disabled-color);
  }
/* outlined */
.outlined {
  background: transparent;
}
.outlined:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-style: solid;
    border-width: 1px;
    border-color: currentColor;
    box-sizing: border-box;
    z-index: 0;
  }
.outlined:hover {
    background: transparent;
  }
.outlined:hover:after {
      border-width: 2px;
    }
.outlined:active,
  .outlined:focus-visible {
    background: none;
  }
.outlined:active:after, .outlined:focus-visible:after {
      border-width: 2px;
    }
.outlined.tertiary {
    color: var(--button-tertiary-color);
  }
.outlined:disabled,
  .outlined[disabled] {
    color: var(--button-disabled-color);
    background: none;
  }
.outlined:disabled:after, .outlined[disabled]:after {
      border-color: var(--button-disabled-bg-color);
    }
.link {
  min-height: auto;
  padding: 0;
  background: transparent;
  text-decoration: underline;
  text-underline-offset: 1px;
}
.link:hover {
    background: transparent;
    text-decoration-thickness: 2px;
  }
.link:active,
  .link:focus-visible {
    background: transparent;
  }
.link:disabled,
  .link[disabled] {
    border-color: var(--button-disabled-color);
    color: var(--button-disabled-color);
  }