tbianchini/shopit-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: refactor button styles and theme variables for improved consistency

Browse Source
This commit is contained in:
ncoronel
2026-06-26 08:43:04 -03:00
parent a6a9f4e5e3
commit def3a04548
3 changed files with 67 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/_theme.scss Normal file
View File

@@ -0,0 +1,10 @@
$primary:#6376F3;
$danger: #FF8888;
$secondary:#A0A0A0;
$primary-button-hover-shade-amount: 40%;
$primary-button-disabled-tint-amount: 50%;
$secondary-button-hover-active-shade-amount: 25.625%;
$secondary-button-disabled-alpha: 0.5;
$danger-button-hover-active-bg: #9D5252;
$danger-button-disabled-alpha: 0.5;

56
src/app/shared/components/button/button.component.scss
View File

@@ -1,3 +1,7 @@
@use "sass:color";
@import "../../../../_theme";
:host { :host {
display: inline-block; display: inline-block;
} }
@@ -6,3 +10,55 @@
min-height: 40px; min-height: 40px;
font-weight: 600; font-weight: 600;
} }
.btn-primary,
.btn-secondary,
.btn-danger {
--bs-btn-color: #fff;
--bs-btn-hover-color: #fff;
--bs-btn-active-color: #fff;
}
.btn-outline-primary,
.btn-outline-danger {
--bs-btn-hover-color: #fff;
--bs-btn-active-color: #fff;
}
.btn-primary {
$primary-disabled-bg: color.mix(white, $primary, $weight: $primary-button-disabled-tint-amount);
--bs-btn-hover-bg: #{color.mix(black, $primary, $weight: $primary-button-hover-shade-amount)};
--bs-btn-hover-border-color: #{color.mix(black, $primary, $weight: $primary-button-hover-shade-amount)};
--bs-btn-disabled-color: #fff;
--bs-btn-disabled-bg: #{$primary-disabled-bg};
--bs-btn-disabled-border-color: #{$primary-disabled-bg};
--bs-btn-disabled-opacity: 1;
}
.btn-secondary {
$secondary-hover-active-bg: color.mix(black, $secondary, $weight: $secondary-button-hover-active-shade-amount);
$secondary-disabled-bg: color.change($secondary, $alpha: $secondary-button-disabled-alpha);
--bs-btn-hover-bg: #{$secondary-hover-active-bg};
--bs-btn-hover-border-color: #{$secondary-hover-active-bg};
--bs-btn-active-bg: #{$secondary-hover-active-bg};
--bs-btn-active-border-color: #{$secondary-hover-active-bg};
--bs-btn-disabled-color: #fff;
--bs-btn-disabled-bg: #{$secondary-disabled-bg};
--bs-btn-disabled-border-color: #{$secondary-disabled-bg};
--bs-btn-disabled-opacity: 1;
}
.btn-danger {
$danger-disabled-bg: color.change($danger, $alpha: $danger-button-disabled-alpha);
--bs-btn-hover-bg: #{$danger-button-hover-active-bg};
--bs-btn-hover-border-color: #{$danger-button-hover-active-bg};
--bs-btn-active-bg: #{$danger-button-hover-active-bg};
--bs-btn-active-border-color: #{$danger-button-hover-active-bg};
--bs-btn-disabled-color: #fff;
--bs-btn-disabled-bg: #{$danger-disabled-bg};
--bs-btn-disabled-border-color: #{$danger-disabled-bg};
--bs-btn-disabled-opacity: 1;
}

27
src/styles.scss
View File

@@ -1,33 +1,8 @@
@import "./theme";
$primary:#6376F3;
$danger: #FF8888;
$secondary:#A0A0A0;
$primary-button-hover-shade-amount: 40%;
$primary-button-disabled-tint-amount: 50%;
@import "../node_modules/bootstrap/scss/bootstrap"; @import "../node_modules/bootstrap/scss/bootstrap";
.btn-primary,
.btn-secondary,
.btn-danger {
--bs-btn-color: #fff;
--bs-btn-hover-color: #fff;
--bs-btn-active-color: #fff;
}
.btn-primary {
$primary-disabled-bg: tint-color($primary, $primary-button-disabled-tint-amount);
--bs-btn-hover-bg: #{shade-color($primary, $primary-button-hover-shade-amount)};
--bs-btn-hover-border-color: #{shade-color($primary, $primary-button-hover-shade-amount)};
--bs-btn-disabled-color: #{color-contrast($primary-disabled-bg)};
--bs-btn-disabled-bg: #{$primary-disabled-bg};
--bs-btn-disabled-border-color: #{$primary-disabled-bg};
--bs-btn-disabled-opacity: 1;
}
:root { :root {
--bs-body-font-family: "Gotham", sans-serif; --bs-body-font-family: "Gotham", sans-serif;