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

refactor: migrate tenant bootstrap to use SSR state caching and update button components to use CSS tenant variables

Browse Source
This commit is contained in:
Nahuel Eghar Coronel
2026-06-28 23:09:26 +00:00
parent 7ee103b77b
commit 2cbe681995
27 changed files with 1042 additions and 189 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,7 +1,3 @@
@use "sass:color";
@import "../../../../_theme";
:host {
display: inline-block;
}
@@ -9,13 +5,15 @@
.btn {
min-height: 40px;
font-weight: 700;
font-size:15px;
min-width:216px;
font-size: 15px;
min-width: 216px;
}
.btn-primary,
.btn-secondary,
.btn-danger {
--bs-btn-bg: transparent;
--bs-btn-border-color: transparent;
--bs-btn-color: #fff;
--bs-btn-hover-color: #fff;
--bs-btn-active-color: #fff;
@@ -23,44 +21,68 @@
.btn-outline-primary,
.btn-outline-danger {
--bs-btn-bg: transparent;
--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-bg: var(--tenant-primary);
--bs-btn-border-color: var(--tenant-primary);
--bs-btn-hover-bg: color-mix(in srgb, black 40%, var(--tenant-primary));
--bs-btn-hover-border-color: color-mix(in srgb, black 40%, var(--tenant-primary));
--bs-btn-active-bg: color-mix(in srgb, black 44%, var(--tenant-primary));
--bs-btn-active-border-color: color-mix(in srgb, black 44%, var(--tenant-primary));
--bs-btn-disabled-color: #fff;
--bs-btn-disabled-bg: #{$primary-disabled-bg};
--bs-btn-disabled-border-color: #{$primary-disabled-bg};
--bs-btn-disabled-bg: color-mix(in srgb, white 50%, var(--tenant-primary));
--bs-btn-disabled-border-color: color-mix(in srgb, white 50%, var(--tenant-primary));
--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-bg: var(--tenant-secondary);
--bs-btn-border-color: var(--tenant-secondary);
--bs-btn-hover-bg: color-mix(in srgb, black 26%, var(--tenant-secondary));
--bs-btn-hover-border-color: color-mix(in srgb, black 26%, var(--tenant-secondary));
--bs-btn-active-bg: color-mix(in srgb, black 30%, var(--tenant-secondary));
--bs-btn-active-border-color: color-mix(in srgb, black 30%, var(--tenant-secondary));
--bs-btn-disabled-color: #fff;
--bs-btn-disabled-bg: #{$secondary-disabled-bg};
--bs-btn-disabled-border-color: #{$secondary-disabled-bg};
--bs-btn-disabled-bg: color-mix(in srgb, transparent 50%, var(--tenant-secondary));
--bs-btn-disabled-border-color: color-mix(in srgb, transparent 50%, var(--tenant-secondary));
--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-bg: var(--tenant-danger);
--bs-btn-border-color: var(--tenant-danger);
--bs-btn-hover-bg: color-mix(in srgb, black 38%, var(--tenant-danger));
--bs-btn-hover-border-color: color-mix(in srgb, black 38%, var(--tenant-danger));
--bs-btn-active-bg: color-mix(in srgb, black 44%, var(--tenant-danger));
--bs-btn-active-border-color: color-mix(in srgb, black 44%, var(--tenant-danger));
--bs-btn-disabled-color: #fff;
--bs-btn-disabled-bg: #{$danger-disabled-bg};
--bs-btn-disabled-border-color: #{$danger-disabled-bg};
--bs-btn-disabled-bg: color-mix(in srgb, transparent 50%, var(--tenant-danger));
--bs-btn-disabled-border-color: color-mix(in srgb, transparent 50%, var(--tenant-danger));
--bs-btn-disabled-opacity: 1;
}
.btn-outline-primary {
--bs-btn-color: var(--tenant-primary);
--bs-btn-border-color: var(--tenant-primary);
--bs-btn-hover-bg: var(--tenant-primary);
--bs-btn-hover-border-color: var(--tenant-primary);
--bs-btn-active-bg: color-mix(in srgb, black 12%, var(--tenant-primary));
--bs-btn-active-border-color: color-mix(in srgb, black 12%, var(--tenant-primary));
--bs-btn-disabled-color: color-mix(in srgb, transparent 35%, var(--tenant-primary));
--bs-btn-disabled-border-color: color-mix(in srgb, transparent 35%, var(--tenant-primary));
}
.btn-outline-danger {
--bs-btn-color: var(--tenant-danger);
--bs-btn-border-color: var(--tenant-danger);
--bs-btn-hover-bg: var(--tenant-danger);
--bs-btn-hover-border-color: var(--tenant-danger);
--bs-btn-active-bg: color-mix(in srgb, black 12%, var(--tenant-danger));
--bs-btn-active-border-color: color-mix(in srgb, black 12%, var(--tenant-danger));
--bs-btn-disabled-color: color-mix(in srgb, transparent 35%, var(--tenant-danger));
--bs-btn-disabled-border-color: color-mix(in srgb, transparent 35%, var(--tenant-danger));
}