@oslokommune/punkt-css/dist/css/elements/button.css

CSS-rammeverket til Punkt, et designsystem laget av Oslo Origo

/* Button element!
 *
 * Size: small, medium, large
 * Skin: primary, secondary, tertiary
 * State: normal, focus, hover, active, disabled
 * Variant: label-only, icon-left, icon-right, icon-only
 * Background: light, dark
 */
/* 
 * Accessibility
 * https://kittygiraudel.com/2016/10/13/css-hide-and-seek/#undesirable-overflows-18012019
 */
.pkt-btn--icon-only .pkt-btn__text {
  border: 0 !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  -webkit-clip-path: inset(50%) !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  overflow: hidden !important;
  margin: -1px !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
  white-space: nowrap !important;
}

.pkt-btn__icon svg {
  --ring-color: var(--pkt-color-brand-dark-blue-700);
  --spinner-color: var(--pkt-color-brand-blue-1000);
}
[data-mode=dark] .pkt-btn__icon svg {
  --ring-color: var(--pkt-color-brand-neutrals-white);
  --spinner-color: var(--pkt-color-brand-dark-blue-1000);
}

.pkt-btn {
  --pkt-color-button-background-normal: var(--pkt-color-brand-dark-blue-1000);
  --pkt-color-button-border-normal: var(--pkt-color-brand-dark-blue-1000);
  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
  --pkt-color-button-background-focus: var(--pkt-color-brand-warm-blue-1000);
  --pkt-color-button-border-focus: var(--pkt-color-brand-warm-blue-1000);
  --pkt-color-button-text-focus: var(--pkt-color-brand-neutrals-white);
  --pkt-color-border-states-focus: var(--pkt-color-brand-purple-1000);
  --pkt-color-button-background-hover: var(--pkt-color-brand-warm-blue-1000);
  --pkt-color-button-border-hover: var(--pkt-color-brand-warm-blue-1000);
  --pkt-color-button-text-hover: var(--pkt-color-brand-neutrals-white);
  --pkt-color-button-background-active: var(--pkt-color-brand-warm-blue-1000);
  --pkt-color-button-border-active: var(--pkt-color-brand-warm-blue-1000);
  --pkt-color-button-text-active: var(--pkt-color-brand-neutrals-white);
  --pkt-color-button-background-disabled: var(--pkt-color-brand-neutrals-100);
  --pkt-color-button-border-disabled: var(--pkt-color-brand-neutrals-100);
  --pkt-color-button-text-disabled: var(--pkt-color-grays-gray-500);
}

[data-mode=dark] .pkt-btn {
  --pkt-color-button-background-normal: var(--pkt-color-brand-blue-500);
  --pkt-color-button-border-normal: var(--pkt-color-brand-blue-500);
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
  --pkt-color-button-background-focus: var(--pkt-color-brand-blue-1000);
  --pkt-color-button-border-focus: var(--pkt-color-brand-blue-1000);
  --pkt-color-button-text-focus: var(--pkt-color-brand-dark-blue-1000);
  --pkt-color-border-states-focus: var(--pkt-color-brand-purple-1000);
  --pkt-color-button-background-hover: var(--pkt-color-brand-blue-1000);
  --pkt-color-button-border-hover: var(--pkt-color-brand-blue-1000);
  --pkt-color-button-text-hover: var(--pkt-color-brand-dark-blue-1000);
  --pkt-color-button-background-active: var(--pkt-color-brand-blue-1000);
  --pkt-color-button-border-active: var(--pkt-color-brand-blue-1000);
  --pkt-color-button-text-active: var(--pkt-color-brand-dark-blue-1000);
  --pkt-color-button-background-disabled: var(--pkt-color-brand-neutrals-100);
  --pkt-color-button-border-disabled: var(--pkt-color-brand-neutrals-100);
  --pkt-color-button-text-disabled: var(--pkt-color-grays-gray-600);
}
[data-mode=dark] .pkt-btn--green-dark {
  --pkt-color-button-background-normal: var(--pkt-color-brand-dark-green-1000);
  --pkt-color-button-border-normal: var(--pkt-color-brand-dark-green-1000);
  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
}
[data-mode=dark] .pkt-btn--green-dark-outline {
  --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
  --pkt-color-button-border-normal: var(--pkt-color-brand-dark-green-1000);
  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
}
[data-mode=dark] .pkt-btn--green {
  --pkt-color-button-background-normal: var(--pkt-color-brand-green-1000);
  --pkt-color-button-border-normal: var(--pkt-color-brand-green-1000);
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
}
[data-mode=dark] .pkt-btn--green-outline {
  --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
  --pkt-color-button-border-normal: var(--pkt-color-brand-green-1000);
  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
}
[data-mode=dark] .pkt-btn--blue {
  --pkt-color-button-background-normal: var(--pkt-color-brand-blue-1000);
  --pkt-color-button-border-normal: var(--pkt-color-brand-blue-1000);
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
}
[data-mode=dark] .pkt-btn--blue-outline {
  --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
  --pkt-color-button-border-normal: var(--pkt-color-brand-blue-1000);
  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
}
[data-mode=dark] .pkt-btn--beige-light {
  --pkt-color-button-background-normal: var(--pkt-color-brand-light-beige-1000);
  --pkt-color-button-border-normal: var(--pkt-color-brand-light-beige-1000);
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
}
[data-mode=dark] .pkt-btn--beige-dark-outline {
  --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
  --pkt-color-button-border-normal: var(--pkt-color-brand-dark-beige-1000);
  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
}
[data-mode=dark] .pkt-btn--yellow {
  --pkt-color-button-background-normal: var(--pkt-color-brand-yellow-1000);
  --pkt-color-button-border-normal: var(--pkt-color-brand-yellow-1000);
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
}
[data-mode=dark] .pkt-btn--yellow-outline {
  --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
  --pkt-color-button-border-normal: var(--pkt-color-brand-yellow-1000);
  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
}
[data-mode=dark] .pkt-btn--red {
  --pkt-color-button-background-normal: var(--pkt-color-brand-red-1000);
  --pkt-color-button-border-normal: var(--pkt-color-brand-red-1000);
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
}
[data-mode=dark] .pkt-btn--red-outline {
  --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
  --pkt-color-button-border-normal: var(--pkt-color-brand-red-1000);
  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
}

.pkt-btn--secondary {
  --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
  --pkt-color-button-text-disabled: var(--pkt-color-grays-gray-600);
}

[data-mode=dark] .pkt-btn--secondary {
  --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
  --pkt-color-button-border-normal: var(--pkt-color-brand-neutrals-white);
  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
  --pkt-color-button-background-focus: var(--pkt-color-brand-blue-500);
  --pkt-color-button-border-focus: var(--pkt-color-brand-blue-500);
  --pkt-color-button-background-hover: var(--pkt-color-brand-blue-500);
  --pkt-color-button-border-hover: var(--pkt-color-brand-blue-500);
  --pkt-color-button-background-active: var(--pkt-color-brand-blue-500);
  --pkt-color-button-border-active: var(--pkt-color-brand-blue-500);
  --pkt-color-button-background-disabled: var(--pkt-color-grays-gray-100);
  --pkt-color-button-border-disabled: var(--pkt-color-grays-gray-100);
}
[data-mode=dark] .pkt-btn--secondary--green-dark {
  --pkt-color-button-background-normal: var(--pkt-color-brand-dark-green-1000);
  --pkt-color-button-border-normal: var(--pkt-color-brand-dark-green-1000);
  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
}
[data-mode=dark] .pkt-btn--secondary--green-dark-outline {
  --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
  --pkt-color-button-border-normal: var(--pkt-color-brand-dark-green-1000);
  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
}
[data-mode=dark] .pkt-btn--secondary--green {
  --pkt-color-button-background-normal: var(--pkt-color-brand-green-1000);
  --pkt-color-button-border-normal: var(--pkt-color-brand-green-1000);
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
}
[data-mode=dark] .pkt-btn--secondary--green-outline {
  --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
  --pkt-color-button-border-normal: var(--pkt-color-brand-green-1000);
  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
}
[data-mode=dark] .pkt-btn--secondary--blue {
  --pkt-color-button-background-normal: var(--pkt-color-brand-blue-1000);
  --pkt-color-button-border-normal: var(--pkt-color-brand-blue-1000);
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
}
[data-mode=dark] .pkt-btn--secondary--blue-outline {
  --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
  --pkt-color-button-border-normal: var(--pkt-color-brand-blue-1000);
  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
}
[data-mode=dark] .pkt-btn--secondary--beige-light {
  --pkt-color-button-background-normal: var(--pkt-color-brand-light-beige-1000);
  --pkt-color-button-border-normal: var(--pkt-color-brand-light-beige-1000);
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
}
[data-mode=dark] .pkt-btn--secondary--beige-dark-outline {
  --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
  --pkt-color-button-border-normal: var(--pkt-color-brand-dark-beige-1000);
  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
}
[data-mode=dark] .pkt-btn--secondary--yellow {
  --pkt-color-button-background-normal: var(--pkt-color-brand-yellow-1000);
  --pkt-color-button-border-normal: var(--pkt-color-brand-yellow-1000);
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
}
[data-mode=dark] .pkt-btn--secondary--yellow-outline {
  --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
  --pkt-color-button-border-normal: var(--pkt-color-brand-yellow-1000);
  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
}
[data-mode=dark] .pkt-btn--secondary--red {
  --pkt-color-button-background-normal: var(--pkt-color-brand-red-1000);
  --pkt-color-button-border-normal: var(--pkt-color-brand-red-1000);
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
}
[data-mode=dark] .pkt-btn--secondary--red-outline {
  --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
  --pkt-color-button-border-normal: var(--pkt-color-brand-red-1000);
  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
}

.pkt-btn--tertiary {
  --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
  --pkt-color-button-border-normal: var(--pkt-color-brand-neutrals-transparent);
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
  --pkt-color-button-background-focus: var(--pkt-color-brand-neutrals-200);
  --pkt-color-button-text-focus: var(--pkt-color-brand-warm-blue-1000);
  --pkt-color-button-background-hover: var(--pkt-color-brand-neutrals-200);
  --pkt-color-button-border-hover: var(--pkt-color-brand-neutrals-200);
  --pkt-color-button-text-hover: var(--pkt-color-brand-warm-blue-1000);
  --pkt-color-button-text-disabled: var(--pkt-color-grays-gray-600);
}

[data-mode=dark] .pkt-btn--tertiary {
  --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
  --pkt-color-button-border-normal: var(--pkt-color-brand-neutrals-transparent);
  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
  --pkt-color-button-background-focus: var(--pkt-color-brand-dark-blue-700);
  --pkt-color-button-border-focus: var(--pkt-color-brand-dark-blue-700);
  --pkt-color-button-text-focus: var(--pkt-color-brand-neutrals-white);
  --pkt-color-button-background-hover: var(--pkt-color-brand-dark-blue-700);
  --pkt-color-button-border-hover: var(--pkt-color-brand-dark-blue-700);
  --pkt-color-button-text-hover: var(--pkt-color-brand-neutrals-white);
  --pkt-color-button-background-active: var(--pkt-color-brand-dark-blue-700);
  --pkt-color-button-border-active: var(--pkt-color-brand-dark-blue-700);
  --pkt-color-button-text-active: var(--pkt-color-brand-neutrals-white);
}
[data-mode=dark] .pkt-btn--tertiary--green-dark {
  --pkt-color-button-background-normal: var(--pkt-color-brand-dark-green-1000);
  --pkt-color-button-border-normal: var(--pkt-color-brand-dark-green-1000);
  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
}
[data-mode=dark] .pkt-btn--tertiary--green-dark-outline {
  --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
  --pkt-color-button-border-normal: var(--pkt-color-brand-dark-green-1000);
  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
}
[data-mode=dark] .pkt-btn--tertiary--green {
  --pkt-color-button-background-normal: var(--pkt-color-brand-green-1000);
  --pkt-color-button-border-normal: var(--pkt-color-brand-green-1000);
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
}
[data-mode=dark] .pkt-btn--tertiary--green-outline {
  --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
  --pkt-color-button-border-normal: var(--pkt-color-brand-green-1000);
  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
}
[data-mode=dark] .pkt-btn--tertiary--blue {
  --pkt-color-button-background-normal: var(--pkt-color-brand-blue-1000);
  --pkt-color-button-border-normal: var(--pkt-color-brand-blue-1000);
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
}
[data-mode=dark] .pkt-btn--tertiary--blue-outline {
  --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
  --pkt-color-button-border-normal: var(--pkt-color-brand-blue-1000);
  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
}
[data-mode=dark] .pkt-btn--tertiary--beige-light {
  --pkt-color-button-background-normal: var(--pkt-color-brand-light-beige-1000);
  --pkt-color-button-border-normal: var(--pkt-color-brand-light-beige-1000);
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
}
[data-mode=dark] .pkt-btn--tertiary--beige-dark-outline {
  --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
  --pkt-color-button-border-normal: var(--pkt-color-brand-dark-beige-1000);
  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
}
[data-mode=dark] .pkt-btn--tertiary--yellow {
  --pkt-color-button-background-normal: var(--pkt-color-brand-yellow-1000);
  --pkt-color-button-border-normal: var(--pkt-color-brand-yellow-1000);
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
}
[data-mode=dark] .pkt-btn--tertiary--yellow-outline {
  --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
  --pkt-color-button-border-normal: var(--pkt-color-brand-yellow-1000);
  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
}
[data-mode=dark] .pkt-btn--tertiary--red {
  --pkt-color-button-background-normal: var(--pkt-color-brand-red-1000);
  --pkt-color-button-border-normal: var(--pkt-color-brand-red-1000);
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
}
[data-mode=dark] .pkt-btn--tertiary--red-outline {
  --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
  --pkt-color-button-border-normal: var(--pkt-color-brand-red-1000);
  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
}

pkt-button[disabled],
pkt-button[data-disabled],
pkt-button[isLoading] {
  pointer-events: none;
}

.pkt-btn {
  border-radius: 0;
  cursor: pointer;
  display: inline-flex;
  font-family: inherit;
  font-weight: normal;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  vertical-align: top;
  background-color: var(--pkt-color-button-background-normal);
  border: 2px solid var(--pkt-color-button-border-normal);
  color: var(--pkt-color-button-text-normal);
  text-decoration: none;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  text-align: left;
  align-items: center;
  column-gap: 0.5rem;
  -webkit-appearance: none;
  appearance: none;
  width: fit-content;
}
@media screen and (max-width: 36rem) {
  .pkt-btn--full-small, .pkt-btn--full-small .pkt-btn {
    display: flex;
    width: 100%;
    justify-content: center;
  }
}
.pkt-btn {
  height: 3rem;
  padding: 0 1rem;
  line-height: 1.1;
  letter-spacing: -0.2px;
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.pkt-btn__icon, .pkt-btn__icon .pkt-icon {
  height: 1.5rem;
  width: 1.5rem;
}
.pkt-btn--label-only .pkt-btn__icon:not(.pkt-btn__spinner) {
  display: none;
}
.pkt-btn--icon-left {
  flex-direction: row;
}
.pkt-btn--icon-right {
  flex-direction: row-reverse;
}
.pkt-btn--icons-right-and-left {
  flex-direction: row;
}
.pkt-btn--icon-only {
  padding: 0 0.625rem;
}
.pkt-btn--small {
  height: 2.625rem;
  padding: 0 0.5rem;
  line-height: 1.1;
  letter-spacing: -0.2px;
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.375rem;
}
.pkt-btn--small .pkt-btn__icon, .pkt-btn--small .pkt-btn__icon .pkt-icon {
  height: 1.25rem;
  width: 1.25rem;
}
.pkt-btn--small.pkt-btn--icon-only {
  padding: 0 0.5625rem;
}
.pkt-btn--large {
  height: 4rem;
  padding: 0 1rem;
  line-height: 1.1;
  letter-spacing: -0.2px;
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 2.25rem;
}
.pkt-btn--large .pkt-btn__icon, .pkt-btn--large .pkt-btn__icon .pkt-icon {
  height: 2rem;
  width: 2rem;
}
.pkt-btn--large.pkt-btn--icon-only {
  padding: 0 0.875rem;
}
.pkt-btn[class*=pkt-btn--icon] > .pkt-btn__icon {
  display: flex;
}
.pkt-btn__icon {
  --fg-color: currentColor;
  display: none;
  flex-shrink: 0;
}
.pkt-btn:link, .pkt-btn:visited {
  color: var(--pkt-color-button-text-normal);
}
.pkt-btn:focus {
  outline: none;
}
a.pkt-btn:focus-visible,
div.pkt-btn:not([data-disabled]):focus-visible, .pkt-btn:enabled:focus-visible, .pkt-btn.pkt-btn:focus-visible, .pkt-btn.pkt-btn--focus, .pkt-btn--focus .pkt-btn {
  background-color: var(--pkt-color-button-background-focus);
  color: var(--pkt-color-button-text-focus);
  border-color: var(--pkt-color-button-border-focus);
  outline: 4px solid var(--pkt-color-border-states-focus);
  text-decoration: none;
}

a.pkt-btn:hover,
div.pkt-btn:not([data-disabled]):hover, .pkt-btn:enabled:hover, .pkt-btn:hover:not(:disabled):not([disabled]):not([data-disabled]), .pkt-btn.pkt-btn--hover, .pkt-btn--hover .pkt-btn {
  background-color: var(--pkt-color-button-background-hover);
  border-color: var(--pkt-color-button-border-hover);
  color: var(--pkt-color-button-text-hover);
  outline: 0;
  text-decoration: underline;
}

a.pkt-btn:active,
div.pkt-btn:not([data-disabled]):active, .pkt-btn:enabled:active, .pkt-btn:active:not(:disabled):not([disabled]):not([data-disabled]), .pkt-btn.pkt-btn--active:not(:disabled):not([disabled]):not([data-disabled]), .pkt-btn.pkt-btn--active:not(:disabled):not([disabled]):not([data-disabled]):hover, .pkt-btn--active .pkt-btn {
  background-color: var(--pkt-color-button-background-active);
  border-color: var(--pkt-color-button-border-active);
  color: var(--pkt-color-button-text-active);
  text-decoration: none;
  cursor: inherit;
}

.pkt-btn.pkt-btn--isLoading, .pkt-btn--isLoading .pkt-btn {
  pointer-events: none;
  cursor: inherit;
}
.pkt-btn:disabled, .pkt-btn[disabled], .pkt-btn[data-disabled], .pkt-btn:disabled .pkt-btn {
  background-color: var(--pkt-color-button-background-disabled);
  border-color: var(--pkt-color-button-border-disabled);
  color: var(--pkt-color-button-text-disabled);
  cursor: inherit;
  pointer-events: none;
}
.pkt-btn::-moz-focus-inner {
  border: 0;
}
.pkt-btn--green-dark {
  --pkt-color-button-background-normal: var(--pkt-color-brand-dark-green-1000);
  --pkt-color-button-border-normal: var(--pkt-color-brand-dark-green-1000);
  --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
}
.pkt-btn--green-dark-outline {
  --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
  --pkt-color-button-border-normal: var(--pkt-color-brand-dark-green-1000);
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
}
.pkt-btn--green {
  --pkt-color-button-background-normal: var(--pkt-color-brand-green-1000);
  --pkt-color-button-border-normal: var(--pkt-color-brand-green-1000);
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
}
.pkt-btn--green-outline {
  --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
  --pkt-color-button-border-normal: var(--pkt-color-brand-green-1000);
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
}
.pkt-btn--blue {
  --pkt-color-button-background-normal: var(--pkt-color-brand-blue-1000);
  --pkt-color-button-border-normal: var(--pkt-color-brand-blue-1000);
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
}
.pkt-btn--blue-outline {
  --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
  --pkt-color-button-border-normal: var(--pkt-color-brand-blue-1000);
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
}
.pkt-btn--beige-light {
  --pkt-color-button-background-normal: var(--pkt-color-brand-light-beige-1000);
  --pkt-color-button-border-normal: var(--pkt-color-brand-light-beige-1000);
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
}
.pkt-btn--beige-dark-outline {
  --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
  --pkt-color-button-border-normal: var(--pkt-color-brand-dark-beige-1000);
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
}
.pkt-btn--yellow {
  --pkt-color-button-background-normal: var(--pkt-color-brand-yellow-1000);
  --pkt-color-button-border-normal: var(--pkt-color-brand-yellow-1000);
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
}
.pkt-btn--yellow-outline {
  --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
  --pkt-color-button-border-normal: var(--pkt-color-brand-yellow-1000);
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
}
.pkt-btn--red {
  --pkt-color-button-background-normal: var(--pkt-color-brand-red-1000);
  --pkt-color-button-border-normal: var(--pkt-color-brand-red-1000);
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
}
.pkt-btn--red-outline {
  --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
  --pkt-color-button-border-normal: var(--pkt-color-brand-red-1000);
  --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
}