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/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;