diff options
author | Yoshie Muranaka <yoshiemuranaka@gmail.com> | 2020-07-09 02:15:46 +0300 |
---|---|---|
committer | Derick Montague <derick.montague@ibm.com> | 2020-07-27 16:38:28 +0300 |
commit | d388a28b478bf0224e37e292f8bc30fabe2c7059 (patch) | |
tree | ce816f9b249b1eb6ebcf6448d18752f12cbaf9de /src/env/assets | |
parent | 6534e58bc4c46165d846f786804f534aab29912d (diff) | |
download | webui-vue-d388a28b478bf0224e37e292f8bc30fabe2c7059.tar.xz |
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
Diffstat (limited to 'src/env/assets')
-rw-r--r-- | src/env/assets/fonts/IBM_Plex_Sans/IBMPlexSans-Italic.woff | bin | 0 -> 84228 bytes | |||
-rw-r--r-- | src/env/assets/fonts/IBM_Plex_Sans/IBMPlexSans-Light.woff | bin | 0 -> 82932 bytes | |||
-rw-r--r-- | src/env/assets/fonts/IBM_Plex_Sans/IBMPlexSans-LightItalic.woff | bin | 0 -> 88996 bytes | |||
-rw-r--r-- | src/env/assets/fonts/IBM_Plex_Sans/IBMPlexSans-Regular.woff | bin | 0 -> 78672 bytes | |||
-rw-r--r-- | src/env/assets/fonts/IBM_Plex_Sans/IBMPlexSans-SemiBold.woff | bin | 0 -> 83148 bytes | |||
-rw-r--r-- | src/env/assets/fonts/IBM_Plex_Sans/IBMPlexSans-SemiBoldItalic.woff | bin | 0 -> 88264 bytes | |||
-rw-r--r-- | src/env/assets/styles/_intel.scss | 0 | ||||
-rw-r--r-- | src/env/assets/styles/_openpower.scss | 57 |
8 files changed, 57 insertions, 0 deletions
diff --git a/src/env/assets/fonts/IBM_Plex_Sans/IBMPlexSans-Italic.woff b/src/env/assets/fonts/IBM_Plex_Sans/IBMPlexSans-Italic.woff Binary files differnew file mode 100644 index 00000000..7e62ab4e --- /dev/null +++ b/src/env/assets/fonts/IBM_Plex_Sans/IBMPlexSans-Italic.woff diff --git a/src/env/assets/fonts/IBM_Plex_Sans/IBMPlexSans-Light.woff b/src/env/assets/fonts/IBM_Plex_Sans/IBMPlexSans-Light.woff Binary files differnew file mode 100644 index 00000000..8824a0de --- /dev/null +++ b/src/env/assets/fonts/IBM_Plex_Sans/IBMPlexSans-Light.woff diff --git a/src/env/assets/fonts/IBM_Plex_Sans/IBMPlexSans-LightItalic.woff b/src/env/assets/fonts/IBM_Plex_Sans/IBMPlexSans-LightItalic.woff Binary files differnew file mode 100644 index 00000000..b079a5ec --- /dev/null +++ b/src/env/assets/fonts/IBM_Plex_Sans/IBMPlexSans-LightItalic.woff diff --git a/src/env/assets/fonts/IBM_Plex_Sans/IBMPlexSans-Regular.woff b/src/env/assets/fonts/IBM_Plex_Sans/IBMPlexSans-Regular.woff Binary files differnew file mode 100644 index 00000000..79bdeab7 --- /dev/null +++ b/src/env/assets/fonts/IBM_Plex_Sans/IBMPlexSans-Regular.woff diff --git a/src/env/assets/fonts/IBM_Plex_Sans/IBMPlexSans-SemiBold.woff b/src/env/assets/fonts/IBM_Plex_Sans/IBMPlexSans-SemiBold.woff Binary files differnew file mode 100644 index 00000000..ce9534ca --- /dev/null +++ b/src/env/assets/fonts/IBM_Plex_Sans/IBMPlexSans-SemiBold.woff diff --git a/src/env/assets/fonts/IBM_Plex_Sans/IBMPlexSans-SemiBoldItalic.woff b/src/env/assets/fonts/IBM_Plex_Sans/IBMPlexSans-SemiBoldItalic.woff Binary files differnew file mode 100644 index 00000000..f00b6edb --- /dev/null +++ b/src/env/assets/fonts/IBM_Plex_Sans/IBMPlexSans-SemiBoldItalic.woff diff --git a/src/env/assets/styles/_intel.scss b/src/env/assets/styles/_intel.scss new file mode 100644 index 00000000..e69de29b --- /dev/null +++ b/src/env/assets/styles/_intel.scss 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 |