Update use of Sass variables for better theming
Use Bootstrap color functions for theme-colors and grays instead
of directly referencing Sass variable to allow more flexible
theming.
Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: Id08b77ff6df3bdf99400dcdfe964853706f1070f
diff --git a/src/assets/styles/bmc/custom/_alert.scss b/src/assets/styles/bmc/custom/_alert.scss
index 0b7b518..1d28f2a 100644
--- a/src/assets/styles/bmc/custom/_alert.scss
+++ b/src/assets/styles/bmc/custom/_alert.scss
@@ -2,7 +2,7 @@
display: flex;
padding: $spacer;
border-width: 0 0 0 3px;
- color: $gray-800;
+ color: gray("800");
margin-bottom: $spacer;
&.small {
@@ -45,20 +45,20 @@
}
&.alert-info {
- border-left-color: $info;
+ border-left-color: theme-color("info");
background-color: $info-light;
- fill: $info;
+ fill: theme-color("info");
}
&.alert-danger {
- border-left-color: $danger;
+ border-left-color: theme-color("danger");
background-color: $danger-light;
- fill: $danger;
+ fill: theme-color("danger");
}
&.alert-warning {
- border-left-color: $warning;
+ border-left-color: theme-color("warning");
background-color: $warning-light;
- fill: $warning;
+ fill: theme-color("warning");
}
}
\ No newline at end of file
diff --git a/src/assets/styles/bmc/custom/_badge.scss b/src/assets/styles/bmc/custom/_badge.scss
index 7acd73a..87b96e6 100644
--- a/src/assets/styles/bmc/custom/_badge.scss
+++ b/src/assets/styles/bmc/custom/_badge.scss
@@ -17,5 +17,5 @@
.badge-primary {
background-color: $info-light;
- color: $info;
+ color: theme-color("info");
}
\ No newline at end of file
diff --git a/src/assets/styles/bmc/custom/_base.scss b/src/assets/styles/bmc/custom/_base.scss
index 39a4aaa..5a6a11b 100644
--- a/src/assets/styles/bmc/custom/_base.scss
+++ b/src/assets/styles/bmc/custom/_base.scss
@@ -1,7 +1,7 @@
dt,
legend,
label {
- color: $gray-800;
+ color: gray("800");
font-size: 14px;
font-weight: 400;
}
diff --git a/src/assets/styles/bmc/custom/_buttons.scss b/src/assets/styles/bmc/custom/_buttons.scss
index b9b8073..3f11130 100644
--- a/src/assets/styles/bmc/custom/_buttons.scss
+++ b/src/assets/styles/bmc/custom/_buttons.scss
@@ -21,23 +21,23 @@
}
.btn-link {
- fill: $primary;
+ fill: theme-color("primary");
text-decoration: none !important;
&:focus {
box-shadow: $btn-focus-box-shadow;
}
&:hover {
- fill: darken($primary, 15%);
+ fill: darken(theme-color("primary"), 15%);
}
}
.btn:disabled {
- color: $gray-600;
+ color: gray("600");
fill: currentColor;
&:not(.btn-link) {
- border-color: $gray-400;
- background-color: $gray-400;
+ border-color: gray("400");
+ background-color: gray("400");
}
}
\ No newline at end of file
diff --git a/src/assets/styles/bmc/custom/_calendar.scss b/src/assets/styles/bmc/custom/_calendar.scss
index bf7572e..641e4ed 100644
--- a/src/assets/styles/bmc/custom/_calendar.scss
+++ b/src/assets/styles/bmc/custom/_calendar.scss
@@ -2,7 +2,7 @@
.btn {
&:hover {
background: none;
- color: $dark;
+ color: theme-color("dark");
}
}
}
\ No newline at end of file
diff --git a/src/assets/styles/bmc/custom/_forms.scss b/src/assets/styles/bmc/custom/_forms.scss
index 8d3ed9e..1195f6c 100644
--- a/src/assets/styles/bmc/custom/_forms.scss
+++ b/src/assets/styles/bmc/custom/_forms.scss
@@ -1,11 +1,11 @@
.form-text {
margin-top: -$spacer / 4;
margin-bottom: $spacer / 2;
- color: $gray-800;
+ color: gray("800");
}
.col-form-label {
- color: $gray-800;
+ color: gray("800");
font-size: 14px;
}
@@ -17,12 +17,12 @@
.custom-control-label,
.form-control {
//important needed to override validation colors on radio labels
- color: $dark !important;
+ color: theme-color("dark") !important;
font-size: 16px;
- border-color: $gray-400 !important;
+ border-color: gray("400") !important;
&.is-invalid,
&:invalid {
- border-bottom: 2px solid $danger !important;
+ border-bottom: 2px solid theme-color("danger") !important;
}
}
@@ -31,7 +31,7 @@
& + .custom-control-label {
// Disabled label for checkbox, radio,
// switch bootstrap form components
- color: $gray-700!important;
+ color: gray("700")!important;
}
}
}
@@ -46,11 +46,11 @@
white-space: nowrap;
margin-right: -$spacer;
&.btn-link-primary {
- color: $primary;
+ color: theme-color("primary");
fill: currentColor;
}
}
.form-background {
- background-color: $container-bgd;
+ background-color: gray("200");
}
\ No newline at end of file
diff --git a/src/assets/styles/bmc/custom/_modal.scss b/src/assets/styles/bmc/custom/_modal.scss
index 5d3b601..a34a11b 100644
--- a/src/assets/styles/bmc/custom/_modal.scss
+++ b/src/assets/styles/bmc/custom/_modal.scss
@@ -1,7 +1,7 @@
.modal-header {
.close {
font-weight: normal;
- color: $dark;
+ color: theme-color("dark");
opacity: 1;
}
}
\ No newline at end of file
diff --git a/src/assets/styles/bmc/custom/_pagination.scss b/src/assets/styles/bmc/custom/_pagination.scss
index 4fed21b..0c2ac85 100644
--- a/src/assets/styles/bmc/custom/_pagination.scss
+++ b/src/assets/styles/bmc/custom/_pagination.scss
@@ -12,9 +12,9 @@
.b-pagination {
.page-item.active button {
- color: $dark;
+ color: theme-color("dark");
background-color: $white;
border-color: $border-color;
- box-shadow: inset 0px -3px $primary;
+ box-shadow: inset 0px -3px theme-color("primary");
}
}
\ No newline at end of file
diff --git a/src/assets/styles/bmc/custom/_tables.scss b/src/assets/styles/bmc/custom/_tables.scss
index b20feb0..52bdcff 100644
--- a/src/assets/styles/bmc/custom/_tables.scss
+++ b/src/assets/styles/bmc/custom/_tables.scss
@@ -3,20 +3,20 @@
z-index: $zindex-dropdown;
td {
- border-top: 1px solid $gray-300;
- border-bottom: 1px solid $gray-300;
+ border-top: 1px solid gray("300");
+ border-bottom: 1px solid gray("300");
&:first-of-type {
- border-left: 1px solid $gray-300;
+ border-left: 1px solid gray("300");
}
&:last-of-type {
- border-right: 1px solid $gray-300;
+ border-right: 1px solid gray("300");
}
}
// thead-light added for specificiy
.thead-light th {
border: none;
- color: $dark;
+ color: theme-color("dark");
}
.status-icon svg {
@@ -34,7 +34,7 @@
}
.b-table-details {
- background-color: $light;
+ background-color: theme-color("light");
td {
padding-left: calc(50px + (#{$table-cell-padding} * 2));
}
@@ -57,7 +57,7 @@
width: 50px;
}
svg {
- fill: $dark;
+ fill: theme-color("dark");
}
}
}
\ No newline at end of file
diff --git a/src/assets/styles/bmc/custom/_toasts.scss b/src/assets/styles/bmc/custom/_toasts.scss
index 9295b17..c3e91b8 100644
--- a/src/assets/styles/bmc/custom/_toasts.scss
+++ b/src/assets/styles/bmc/custom/_toasts.scss
@@ -14,31 +14,31 @@
.toast-header {
background-color: inherit!important; //override specificity
border: none;
- color: $dark!important; //override specificity
+ color: theme-color("dark")!important; //override specificity
padding-bottom: 0;
}
.toast-body {
- color: $dark;
+ color: theme-color("dark");
padding-top: 0;
}
.b-toast-success .toast {
- border-left-color: $success!important;
+ border-left-color: theme-color("success")!important;
background-color: $success-light;
}
.b-toast-info .toast {
- border-left-color: $info!important;
+ border-left-color: theme-color("info")!important;
background-color: $info-light;
}
.b-toast-danger .toast {
- border-left-color: $danger!important;
+ border-left-color: theme-color("danger")!important;
background-color: $danger-light;
}
.b-toast-warning .toast {
- border-left-color: $warning!important;
+ border-left-color: theme-color("warning")!important;
background-color: $warning-light;
}
\ No newline at end of file
diff --git a/src/assets/styles/bmc/helpers/_variables.scss b/src/assets/styles/bmc/helpers/_variables.scss
index cbee2df..ea300ec 100644
--- a/src/assets/styles/bmc/helpers/_variables.scss
+++ b/src/assets/styles/bmc/helpers/_variables.scss
@@ -8,6 +8,4 @@
// OpenBMC Custom Variables
$responsive-layout-bp: lg;
$header-height: 56px;
-$navigation-width: 300px;
-$container-bgd: $gray-200;
-$primary-nav-hover: $gray-300;
\ No newline at end of file
+$navigation-width: 300px;
\ No newline at end of file
diff --git a/src/components/AppHeader/AppHeader.vue b/src/components/AppHeader/AppHeader.vue
index a69d6d9..7f18e1d 100644
--- a/src/components/AppHeader/AppHeader.vue
+++ b/src/components/AppHeader/AppHeader.vue
@@ -179,7 +179,7 @@
}
.nav-item {
- fill: $light;
+ fill: theme-color('light');
}
.navbar {
@@ -194,7 +194,7 @@
.helper-menu {
@include media-breakpoint-down(sm) {
- background-color: $gray-800;
+ background-color: gray('800');
width: 100%;
justify-content: flex-end;
@@ -217,7 +217,7 @@
}
.nav-trigger {
- fill: $light;
+ fill: theme-color('light');
width: $header-height;
height: $header-height;
transition: none;
@@ -227,12 +227,12 @@
}
&:hover {
- fill: $light;
- background-color: $dark;
+ fill: theme-color('light');
+ background-color: theme-color('dark');
}
&.open {
- background-color: $gray-800;
+ background-color: gray('800');
}
@include media-breakpoint-up($responsive-layout-bp) {
diff --git a/src/components/AppNavigation/AppNavigation.vue b/src/components/AppNavigation/AppNavigation.vue
index 175b0aa..37f0f71 100644
--- a/src/components/AppNavigation/AppNavigation.vue
+++ b/src/components/AppNavigation/AppNavigation.vue
@@ -212,16 +212,16 @@
font-weight: $headings-font-weight;
padding-left: $spacer; // defining consistent padding for links and buttons
padding-right: $spacer;
- color: $secondary;
+ color: theme-color('secondary');
&:hover {
- background-color: $primary-nav-hover;
- color: $dark;
+ background-color: gray('300');
+ color: theme-color('dark');
}
&:focus {
box-shadow: $btn-focus-box-shadow;
- color: $dark;
+ color: theme-color('dark');
}
}
@@ -229,8 +229,8 @@
.nav-link--current:hover,
.nav-link--current:focus {
font-weight: $headings-font-weight;
- background-color: $secondary;
- color: $light;
+ background-color: theme-color('secondary');
+ color: theme-color('light');
cursor: default;
&::before {
@@ -240,7 +240,7 @@
bottom: 0;
left: 0;
width: 4px;
- background-color: $primary;
+ background-color: theme-color('primary');
}
}
@@ -252,7 +252,7 @@
left: 0;
z-index: $zindex-fixed;
overflow-y: auto;
- background-color: $container-bgd;
+ background-color: gray('200');
transform: translateX(-$navigation-width);
transition: transform $exit-easing--productive $duration--moderate-02;
@include media-breakpoint-down(md) {
diff --git a/src/components/Global/PageSection.vue b/src/components/Global/PageSection.vue
index 5811998..6f44a3a 100644
--- a/src/components/Global/PageSection.vue
+++ b/src/components/Global/PageSection.vue
@@ -31,7 +31,7 @@
content: '';
display: block;
width: 100px;
- border: 1px solid $gray-300;
+ border: 1px solid gray('300');
margin-top: 10px;
}
}
diff --git a/src/components/Global/Search.vue b/src/components/Global/Search.vue
index b4be463..c385740 100644
--- a/src/components/Global/Search.vue
+++ b/src/components/Global/Search.vue
@@ -59,6 +59,6 @@
left: 10px;
top: 12px;
z-index: 4;
- stroke: $gray-400;
+ stroke: gray('400');
}
</style>
diff --git a/src/components/Global/TableToolbar.vue b/src/components/Global/TableToolbar.vue
index 05b9669..2fbbd6c 100644
--- a/src/components/Global/TableToolbar.vue
+++ b/src/components/Global/TableToolbar.vue
@@ -79,7 +79,7 @@
.toolbar-content {
height: $toolbar-height;
- background-color: $primary;
+ background-color: theme-color('primary');
color: $white;
position: absolute;
left: 0;
diff --git a/src/layouts/LoginLayout.vue b/src/layouts/LoginLayout.vue
index bb89f25..8dd741c 100644
--- a/src/layouts/LoginLayout.vue
+++ b/src/layouts/LoginLayout.vue
@@ -32,7 +32,11 @@
.login-container {
@include media-breakpoint-up(md) {
- background: linear-gradient(to right, $light 50%, $container-bgd 50%);
+ background: linear-gradient(
+ to right,
+ theme-color('light') 50%,
+ gray('200') 50%
+ );
}
}
diff --git a/src/views/Overview/OverviewQuickLinks.vue b/src/views/Overview/OverviewQuickLinks.vue
index 5dd71ee..d3a1940 100644
--- a/src/views/Overview/OverviewQuickLinks.vue
+++ b/src/views/Overview/OverviewQuickLinks.vue
@@ -106,7 +106,7 @@
}
.quicklinks {
- background: $container-bgd;
+ background: gray('200');
display: grid;
grid-gap: 1rem;
padding: 1rem;