From d388a28b478bf0224e37e292f8bc30fabe2c7059 Mon Sep 17 00:00:00 2001
From: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Date: Wed, 8 Jul 2020 16:15:46 -0700
Subject: Add ability to customize theme styles

Showcases how different themes/styles can be supported using
.env variables. If an environemnt name is specified during
the build process, an overrides file will be pulled in to
allow modifications to color and font definitions.

This commit includes possible style modifications with the openpower
env name as an example. To see the openpower changes, add the variable
definition VUE_APP_NAME="openpower" to your .env.development.local file
or build using 'npm run build -- --mode openpower'

- Moves helper imports into vue config to allow for
  specific import order
- Removed helper imports in SFCs

Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: Iaf7a59c24fda06a7b74e23f2f042fb3300cb2056
---
 src/assets/styles/_obmc-custom.scss                |   7 ---
 src/components/AppHeader/AppHeader.vue             |   2 -
 src/components/AppNavigation/AppNavigation.vue     |   2 -
 src/components/Global/LoadingBar.vue               |   2 -
 src/components/Global/PageContainer.vue            |   2 -
 src/components/Global/PageSection.vue              |   2 -
 src/components/Global/PageTitle.vue                |   2 -
 src/components/Global/Search.vue                   |   2 -
 src/components/Global/StatusIcon.vue               |   2 -
 src/components/Global/TableDateFilter.vue          |   2 -
 src/components/Global/TableFilter.vue              |   2 -
 src/components/Global/TableToolbar.vue             |   2 -
 .../fonts/IBM_Plex_Sans/IBMPlexSans-Italic.woff    | Bin 0 -> 84228 bytes
 .../fonts/IBM_Plex_Sans/IBMPlexSans-Light.woff     | Bin 0 -> 82932 bytes
 .../IBM_Plex_Sans/IBMPlexSans-LightItalic.woff     | Bin 0 -> 88996 bytes
 .../fonts/IBM_Plex_Sans/IBMPlexSans-Regular.woff   | Bin 0 -> 78672 bytes
 .../fonts/IBM_Plex_Sans/IBMPlexSans-SemiBold.woff  | Bin 0 -> 83148 bytes
 .../IBM_Plex_Sans/IBMPlexSans-SemiBoldItalic.woff  | Bin 0 -> 88264 bytes
 src/env/assets/styles/_intel.scss                  |   0
 src/env/assets/styles/_openpower.scss              |  57 +++++++++++++++++++++
 src/layouts/AppLayout.vue                          |   2 -
 src/layouts/LoginLayout.vue                        |   2 -
 src/views/Control/Kvm/KvmConsole.vue               |   1 -
 .../Control/ServerPowerOperations/BootSettings.vue |   2 -
 src/views/Overview/Overview.vue                    |   1 -
 src/views/Overview/OverviewQuickLinks.vue          |   2 -
 26 files changed, 57 insertions(+), 39 deletions(-)
 create mode 100644 src/env/assets/fonts/IBM_Plex_Sans/IBMPlexSans-Italic.woff
 create mode 100644 src/env/assets/fonts/IBM_Plex_Sans/IBMPlexSans-Light.woff
 create mode 100644 src/env/assets/fonts/IBM_Plex_Sans/IBMPlexSans-LightItalic.woff
 create mode 100644 src/env/assets/fonts/IBM_Plex_Sans/IBMPlexSans-Regular.woff
 create mode 100644 src/env/assets/fonts/IBM_Plex_Sans/IBMPlexSans-SemiBold.woff
 create mode 100644 src/env/assets/fonts/IBM_Plex_Sans/IBMPlexSans-SemiBoldItalic.woff
 create mode 100644 src/env/assets/styles/_intel.scss
 create mode 100644 src/env/assets/styles/_openpower.scss

(limited to 'src')

diff --git a/src/assets/styles/_obmc-custom.scss b/src/assets/styles/_obmc-custom.scss
index c063458c..068364cf 100644
--- a/src/assets/styles/_obmc-custom.scss
+++ b/src/assets/styles/_obmc-custom.scss
@@ -1,10 +1,3 @@
-// BMC Helpers must be imported before Bootstrap helpers to
-// take advantage of Bootstrap's use of the Sass !default
-// statement. Moving this helper after results in Bootstrap
-// variables taking precedence over BMC's
-@import "./bmc/helpers";
-@import "./bootstrap/helpers";
-
 // Vendor styles
 @import "./bootstrap";
 @import "~bootstrap-vue/src/index";
diff --git a/src/components/AppHeader/AppHeader.vue b/src/components/AppHeader/AppHeader.vue
index 4162add8..b977b5f9 100644
--- a/src/components/AppHeader/AppHeader.vue
+++ b/src/components/AppHeader/AppHeader.vue
@@ -160,8 +160,6 @@ export default {
 </script>
 
 <style lang="scss">
-@import 'src/assets/styles/helpers';
-
 .app-header {
   .link-skip-nav {
     position: absolute;
diff --git a/src/components/AppNavigation/AppNavigation.vue b/src/components/AppNavigation/AppNavigation.vue
index e1c6fbf8..be80171b 100644
--- a/src/components/AppNavigation/AppNavigation.vue
+++ b/src/components/AppNavigation/AppNavigation.vue
@@ -213,8 +213,6 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import 'src/assets/styles/helpers';
-
 svg {
   fill: currentColor;
   height: 1.2rem;
diff --git a/src/components/Global/LoadingBar.vue b/src/components/Global/LoadingBar.vue
index d1736d6a..8f7b785c 100644
--- a/src/components/Global/LoadingBar.vue
+++ b/src/components/Global/LoadingBar.vue
@@ -72,8 +72,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import 'src/assets/styles/helpers';
-
 .progress {
   position: absolute;
   left: 0;
diff --git a/src/components/Global/PageContainer.vue b/src/components/Global/PageContainer.vue
index 91bf346f..8396bd5b 100644
--- a/src/components/Global/PageContainer.vue
+++ b/src/components/Global/PageContainer.vue
@@ -11,8 +11,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import 'src/assets/styles/helpers';
-
 main {
   width: 100%;
   height: 100%;
diff --git a/src/components/Global/PageSection.vue b/src/components/Global/PageSection.vue
index 96f7134e..ddf204d3 100644
--- a/src/components/Global/PageSection.vue
+++ b/src/components/Global/PageSection.vue
@@ -18,8 +18,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import 'src/assets/styles/helpers';
-
 .page-section {
   margin-bottom: $spacer * 2;
 }
diff --git a/src/components/Global/PageTitle.vue b/src/components/Global/PageTitle.vue
index dc0738e2..a77e0a07 100644
--- a/src/components/Global/PageTitle.vue
+++ b/src/components/Global/PageTitle.vue
@@ -23,8 +23,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import 'src/assets/styles/helpers';
-
 .page-title {
   margin-bottom: $spacer * 2;
 }
diff --git a/src/components/Global/Search.vue b/src/components/Global/Search.vue
index e3703559..9ebf4680 100644
--- a/src/components/Global/Search.vue
+++ b/src/components/Global/Search.vue
@@ -50,8 +50,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import 'src/assets/styles/helpers';
-
 .search-input {
   padding-left: ($spacer * 2);
 }
diff --git a/src/components/Global/StatusIcon.vue b/src/components/Global/StatusIcon.vue
index 56088050..6de6d310 100644
--- a/src/components/Global/StatusIcon.vue
+++ b/src/components/Global/StatusIcon.vue
@@ -31,8 +31,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import 'src/assets/styles/helpers';
-
 .status-icon {
   vertical-align: text-bottom;
   &.success {
diff --git a/src/components/Global/TableDateFilter.vue b/src/components/Global/TableDateFilter.vue
index e73d7d51..ab501ea3 100644
--- a/src/components/Global/TableDateFilter.vue
+++ b/src/components/Global/TableDateFilter.vue
@@ -165,8 +165,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import 'src/assets/styles/helpers';
-
 .b-form-datepicker {
   position: absolute;
   right: 0;
diff --git a/src/components/Global/TableFilter.vue b/src/components/Global/TableFilter.vue
index b514483f..d6a954be 100644
--- a/src/components/Global/TableFilter.vue
+++ b/src/components/Global/TableFilter.vue
@@ -131,8 +131,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import 'src/assets/styles/helpers';
-
 .badge {
   margin-right: $spacer / 2;
 }
diff --git a/src/components/Global/TableToolbar.vue b/src/components/Global/TableToolbar.vue
index bb18ceb5..70389e8f 100644
--- a/src/components/Global/TableToolbar.vue
+++ b/src/components/Global/TableToolbar.vue
@@ -68,8 +68,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import 'src/assets/styles/helpers';
-
 $toolbar-height: 46px;
 
 .toolbar-container {
diff --git a/src/env/assets/fonts/IBM_Plex_Sans/IBMPlexSans-Italic.woff b/src/env/assets/fonts/IBM_Plex_Sans/IBMPlexSans-Italic.woff
new file mode 100644
index 00000000..7e62ab4e
Binary files /dev/null and b/src/env/assets/fonts/IBM_Plex_Sans/IBMPlexSans-Italic.woff differ
diff --git a/src/env/assets/fonts/IBM_Plex_Sans/IBMPlexSans-Light.woff b/src/env/assets/fonts/IBM_Plex_Sans/IBMPlexSans-Light.woff
new file mode 100644
index 00000000..8824a0de
Binary files /dev/null and b/src/env/assets/fonts/IBM_Plex_Sans/IBMPlexSans-Light.woff differ
diff --git a/src/env/assets/fonts/IBM_Plex_Sans/IBMPlexSans-LightItalic.woff b/src/env/assets/fonts/IBM_Plex_Sans/IBMPlexSans-LightItalic.woff
new file mode 100644
index 00000000..b079a5ec
Binary files /dev/null and b/src/env/assets/fonts/IBM_Plex_Sans/IBMPlexSans-LightItalic.woff differ
diff --git a/src/env/assets/fonts/IBM_Plex_Sans/IBMPlexSans-Regular.woff b/src/env/assets/fonts/IBM_Plex_Sans/IBMPlexSans-Regular.woff
new file mode 100644
index 00000000..79bdeab7
Binary files /dev/null and b/src/env/assets/fonts/IBM_Plex_Sans/IBMPlexSans-Regular.woff differ
diff --git a/src/env/assets/fonts/IBM_Plex_Sans/IBMPlexSans-SemiBold.woff b/src/env/assets/fonts/IBM_Plex_Sans/IBMPlexSans-SemiBold.woff
new file mode 100644
index 00000000..ce9534ca
Binary files /dev/null and b/src/env/assets/fonts/IBM_Plex_Sans/IBMPlexSans-SemiBold.woff differ
diff --git a/src/env/assets/fonts/IBM_Plex_Sans/IBMPlexSans-SemiBoldItalic.woff b/src/env/assets/fonts/IBM_Plex_Sans/IBMPlexSans-SemiBoldItalic.woff
new file mode 100644
index 00000000..f00b6edb
Binary files /dev/null and b/src/env/assets/fonts/IBM_Plex_Sans/IBMPlexSans-SemiBoldItalic.woff differ
diff --git a/src/env/assets/styles/_intel.scss b/src/env/assets/styles/_intel.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/env/assets/styles/_openpower.scss b/src/env/assets/styles/_openpower.scss
new file mode 100644
index 00000000..f1bf4320
--- /dev/null
+++ b/src/env/assets/styles/_openpower.scss
@@ -0,0 +1,57 @@
+@font-face {
+  font-family: 'Plex';
+  src: url('~@/env/assets/fonts/IBM_Plex_Sans/IBMPlexSans-Light.woff') format('woff');
+  font-weight: 200;
+}
+@font-face {
+  font-family: 'Plex';
+  src: url('~@/env/assets/fonts/IBM_Plex_Sans/IBMPlexSans-LightItalic.woff') format('woff');
+  font-weight: 200;
+  font-style: italic;
+}
+@font-face {
+  font-family: 'Plex';
+  src: url('~@/env/assets/fonts/IBM_Plex_Sans/IBMPlexSans-Regular.woff') format('woff');
+  font-weight: 400;
+}
+@font-face {
+  font-family: 'Plex';
+  src: url('~@/env/assets/fonts/IBM_Plex_Sans/IBMPlexSans-Italic.woff') format('woff');
+  font-weight: 400;
+  font-style: italic;
+}
+@font-face {
+  font-family: 'Plex';
+  src: url('~@/env/assets/fonts/IBM_Plex_Sans/IBMPlexSans-SemiBold.woff') format('woff');
+  font-weight: 700;
+}
+@font-face {
+  font-family: 'Plex';
+  src: url('~@/env/assets/fonts/IBM_Plex_Sans/IBMPlexSans-SemiBoldItalic.woff') format('woff');
+  font-weight: 700;
+  font-style: italic;
+}
+
+// IBM Plex with Bootstrap default as fallbacks
+// https://getbootstrap.com/docs/4.4/content/reboot/#native-font-stack
+
+$font-family-base: 'Plex', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+
+// IBM gray palette
+$gray-100: #F4F4F4;
+// $gray-200: #E0E0E0; Use default OpenBMC $gray-200
+// $gray-300: #C6C6C6; Use default OpenBMC $gray-300
+$gray-400: #A8A8A8;
+$gray-500: #8D8D8D;
+$gray-600: #6F6F6F;
+$gray-700: #525252;
+$gray-800: #333333;
+$gray-900: #161616;
+
+// IBM theme colors
+$theme-colors: (
+  "primary": #0F62FE,
+  "danger": #DA1E28,
+  "success": #24A146,
+  "warning": #F1C21B
+);
\ No newline at end of file
diff --git a/src/layouts/AppLayout.vue b/src/layouts/AppLayout.vue
index 6950e338..8edc338d 100644
--- a/src/layouts/AppLayout.vue
+++ b/src/layouts/AppLayout.vue
@@ -54,8 +54,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import 'src/assets/styles/helpers';
-
 .app-container {
   display: grid;
   grid-template-columns: 100%;
diff --git a/src/layouts/LoginLayout.vue b/src/layouts/LoginLayout.vue
index e92cf05e..674f4eb2 100644
--- a/src/layouts/LoginLayout.vue
+++ b/src/layouts/LoginLayout.vue
@@ -33,8 +33,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import 'src/assets/styles/helpers';
-
 .login-container {
   @include media-breakpoint-up(md) {
     background: linear-gradient(
diff --git a/src/views/Control/Kvm/KvmConsole.vue b/src/views/Control/Kvm/KvmConsole.vue
index 080f72e8..6881b690 100644
--- a/src/views/Control/Kvm/KvmConsole.vue
+++ b/src/views/Control/Kvm/KvmConsole.vue
@@ -57,7 +57,6 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import 'src/assets/styles/helpers';
 #terminal {
   height: calc(100vh - 42px);
 }
diff --git a/src/views/Control/ServerPowerOperations/BootSettings.vue b/src/views/Control/ServerPowerOperations/BootSettings.vue
index 16d567a7..8f54cbb8 100644
--- a/src/views/Control/ServerPowerOperations/BootSettings.vue
+++ b/src/views/Control/ServerPowerOperations/BootSettings.vue
@@ -147,8 +147,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import 'src/assets/styles/helpers';
-
 .boot-settings {
   background-color: gray('200');
 }
diff --git a/src/views/Overview/Overview.vue b/src/views/Overview/Overview.vue
index ba934130..46944cc8 100644
--- a/src/views/Overview/Overview.vue
+++ b/src/views/Overview/Overview.vue
@@ -154,7 +154,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import 'src/assets/styles/helpers';
 .quicklinks-section {
   margin-bottom: $spacer * 2;
   margin-left: $spacer * -1;
diff --git a/src/views/Overview/OverviewQuickLinks.vue b/src/views/Overview/OverviewQuickLinks.vue
index d3a19403..8dc1c8eb 100644
--- a/src/views/Overview/OverviewQuickLinks.vue
+++ b/src/views/Overview/OverviewQuickLinks.vue
@@ -98,8 +98,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import 'src/assets/styles/helpers';
-
 dd,
 dl {
   margin: 0;
-- 
cgit v1.2.3