// BTN API
$button-font-weight: $eps-font-weight-medium;
$button-line-height: 16px;
$button-padding-y: 0.5em;
$button-padding-x: 1.5em;
$button-border-radius: $eps-radius;
$button-hover-constant: 5%;
$button-active-constant: 3%;
// sizing
// -- sm
$button-sm-font-size: type(text,xs);
$button-sm-line-height: 14px;
// --lg
$button-lg-font-size: type(text,lg);
$button-lg-line-height: 18px;
//Semantic Colors
$button-primary-background-color: theme-colors(success);
$button-primary-hover-background-color: darken($button-primary-background-color, $button-hover-constant);
$button-primary-active-background-color: darken($button-primary-background-color, $button-active-constant);
$button-primary-color: theme-colors(light);
$button-secondary-background-color: tints(500);
$button-secondary-hover-background-color: darken($button-secondary-background-color, $button-hover-constant);
$button-secondary-active-background-color: darken($button-secondary-background-color, $button-active-constant);
$button-secondary-color: theme-colors(light);
$button-danger-background-color: theme-colors(danger);
$button-danger-hover-background-color: darken($button-danger-background-color, $button-hover-constant);
$button-danger-active-background-color: darken($button-danger-background-color, $button-active-constant);
$button-danger-color: theme-colors(light);
$button-cta-background-color: theme-colors(cta);
$button-cta-hover-background-color: darken($button-cta-background-color, $button-hover-constant);
$button-cta-active-background-color: darken($button-cta-background-color, $button-active-constant);
$button-cta-color: theme-colors(light);
$button-link-background-color: theme-elements-colors(link-color);
$button-link-hover-background-color: darken($button-link-background-color, $button-hover-constant);
$button-link-active-background-color: darken($button-link-background-color, $button-active-constant);
$button-link-color: theme-colors(light);
$button-disabled-background-color: theme-colors(disabled);
$button-disabled-hover-background-color: darken($button-disabled-background-color, $button-hover-constant);
$button-disabled-active-background-color: darken($button-disabled-background-color, $button-active-constant);
$button-disabled-color: theme-colors(light);
// -- dark
$button-dark-primary-background-color: dark-theme-colors(success);
$button-dark-primary-color: dark-theme-colors(light);
$button-dark-primary-hover-background-color: darken($button-dark-primary-background-color, $button-hover-constant);
$button-dark-primary-active-background-color: darken($button-dark-primary-background-color, $button-active-constant);
$button-dark-secondary-background-color: dark-tints(200);
$button-dark-secondary-hover-background-color: darken($button-dark-secondary-background-color, $button-hover-constant);
$button-dark-secondary-active-background-color: darken($button-dark-secondary-background-color, $button-active-constant);
$button-dark-secondary-color: dark-theme-colors(light);
$button-dark-danger-background-color: dark-theme-colors(danger);
$button-dark-danger-hover-background-color: darken($button-dark-danger-background-color, $button-hover-constant);
$button-dark-danger-active-background-color: darken($button-dark-danger-background-color, $button-active-constant);
$button-dark-danger-color: dark-theme-colors(light);
$button-dark-cta-background-color: dark-theme-colors(cta);
$button-dark-cta-hover-background-color: darken($button-dark-cta-background-color, $button-hover-constant);
$button-dark-cta-active-background-color: darken($button-dark-cta-background-color, $button-active-constant);
$button-dark-cta-color: dark-theme-colors(light);
$button-dark-link-background-color: theme-elements-colors(link-color);
$button-dark-link-hover-background-color: darken($button-dark-link-background-color, $button-hover-constant);
$button-dark-link-active-background-color: darken($button-dark-link-background-color, $button-active-constant);
$button-dark-link-color: theme-colors(light);
$button-dark-disabled-background-color: dark-theme-colors(disabled);
$button-dark-disabled-hover-background-color: darken($button-dark-disabled-background-color, $button-hover-constant);
$button-dark-disabled-active-background-color: darken($button-dark-disabled-background-color, $button-active-constant);
$button-dark-disabled-color: dark-theme-colors(light);
// using mixing to transfer custom properties
@mixin button-custom-properties() {
--button-line-height: #{$button-line-height};
--button-padding-y: #{$button-padding-y};
--button-padding-x: #{$button-padding-x};
// primary
--button-primary-background-color: #{$button-primary-background-color};
--button-primary-hover-background-color: #{$button-primary-hover-background-color};
--button-primary-active-background-color: #{$button-primary-active-background-color};
--button-primary-color: #{$button-primary-color};
// secondary
--button-secondary-background-color: #{$button-secondary-background-color};
--button-secondary-hover-background-color: #{$button-secondary-hover-background-color};
--button-secondary-active-background-color: #{$button-secondary-active-background-color};
--button-secondary-color: #{$button-secondary-color};
// danger
--button-danger-background-color: #{$button-danger-background-color};
--button-danger-hover-background-color: #{$button-danger-hover-background-color};
--button-danger-active-background-color: #{$button-danger-active-background-color};
--button-danger-color: #{$button-danger-color};
// cta
--button-cta-background-color: #{$button-cta-background-color};
--button-cta-hover-background-color: #{$button-cta-hover-background-color};
--button-cta-active-background-color: #{$button-cta-active-background-color};
--button-cta-color: #{$button-cta-color};
// link
--button-link-background-color: #{$button-link-background-color};
--button-link-hover-background-color: #{$button-link-hover-background-color};
--button-link-active-background-color: #{$button-link-active-background-color};
--button-link-color: #{$button-link-color};
// disabled
--button-disabled-background-color: #{$button-disabled-background-color};
--button-disabled-hover-background-color: #{$button-disabled-hover-background-color};
--button-disabled-active-background-color: #{$button-disabled-active-background-color};
--button-disabled-color: #{$button-disabled-color};
}
@mixin button-dark-custom-properties() {
// primary
--button-primary-background-color: #{$button-dark-primary-background-color};
--button-primary-color: #{$button-dark-primary-color};
--button-primary-hover-background-color: #{$button-dark-primary-hover-background-color};
--button-primary-active-background-color: #{$button-dark-primary-active-background-color};
// secondary
--button-secondary-background-color: #{$button-dark-secondary-background-color};
--button-secondary-color: #{$button-dark-secondary-color};
--button-secondary-hover-background-color: #{$button-dark-secondary-hover-background-color};
--button-secondary-active-background-color: #{$button-dark-secondary-active-background-color};
// cta
--button-cta-background-color: #{$button-dark-cta-background-color};
--button-cta-hover-background-color: #{$button-dark-cta-hover-background-color};
--button-cta-active-background-color: #{$button-dark-cta-active-background-color};
--button-cta-color: #{$button-dark-cta-color};
// link
--button-link-background-color: #{$button-dark-link-background-color};
--button-link-hover-background-color: #{$button-dark-link-hover-background-color};
--button-link-active-background-color: #{$button-dark-link-active-background-color};
--button-link-color: #{$button-dark-link-color};
// disabled
--button-disabled-background-color: #{$button-dark-disabled-background-color};
--button-disabled-hover-background-color: #{$button-dark-disabled-hover-background-color};
--button-disabled-active-background-color: #{$button-dark-disabled-active-background-color};
--button-disabled-color: #{$button-dark-disabled-color};
}