From 67b301879dffb18aa63a28a89b76e6a943678873 Mon Sep 17 00:00:00 2001 From: Anna Tsyganova Date: Fri, 23 Sep 2022 16:27:33 +0300 Subject: SILABMC-263: Dark Theme --- src/assets/styles/bmc/_sila/_alert.scss | 24 ++- src/assets/styles/bmc/_sila/_badge.scss | 4 +- src/assets/styles/bmc/_sila/_base.scss | 16 +- src/assets/styles/bmc/_sila/_buttons.scss | 75 ++++++---- src/assets/styles/bmc/_sila/_card.scss | 21 ++- src/assets/styles/bmc/_sila/_dropdown.scss | 7 +- src/assets/styles/bmc/_sila/_forms.scss | 114 +++++++++----- src/assets/styles/bmc/_sila/_modal.scss | 10 ++ src/assets/styles/bmc/_sila/_pagination.scss | 23 ++- src/assets/styles/bmc/_sila/_section-divider.scss | 24 +-- src/assets/styles/bmc/_sila/_tables.scss | 52 +++++-- src/assets/styles/bmc/_sila/_toasts.scss | 34 +++-- src/components/_sila/AppHeader/AppHeader.vue | 5 + .../_sila/AppNavigation/AppNavigation.vue | 35 +++-- src/components/_sila/Global/Chart.vue | 42 +++++- src/components/_sila/Global/ThemeButton.vue | 58 ++++++++ src/env/assets/styles/_sila.scss | 164 ++++++++++++++++++--- src/layouts/_sila/AppLayout.vue | 3 +- .../_sila/SecurityAndAccess/Policies/Policies.vue | 4 +- 19 files changed, 545 insertions(+), 170 deletions(-) create mode 100644 src/components/_sila/Global/ThemeButton.vue (limited to 'src') diff --git a/src/assets/styles/bmc/_sila/_alert.scss b/src/assets/styles/bmc/_sila/_alert.scss index d85e9127..c986eed6 100644 --- a/src/assets/styles/bmc/_sila/_alert.scss +++ b/src/assets/styles/bmc/_sila/_alert.scss @@ -2,8 +2,10 @@ display: flex; padding: $spacer; border-width: 0 0 0 3px; - color: gray("800"); margin-bottom: $spacer; + @include themify($themes) { + color: themed("text-primary"); + } &.small { padding: $spacer / 2; @@ -46,25 +48,33 @@ &.alert-info { border-left-color: theme-color("info"); - background-color: theme-color-light("info"); fill: theme-color("info"); + @include themify($themes) { + background-color: themed("blue-10"); + } } &.alert-success { border-left-color: theme-color("success"); - background-color: theme-color-light("success"); fill: theme-color("success"); + @include themify($themes) { + background-color: themed("green-10"); + } } &.alert-danger { - border-left-color: theme-color("danger"); - background-color: theme-color-light("danger"); - fill: theme-color("danger"); + @include themify($themes) { + border-left-color: themed("red-40"); + background-color: themed("red-5"); + fill: themed("red-40"); + } } &.alert-warning { border-left-color: theme-color("warning"); - background-color: theme-color-light("warning"); fill: theme-color("warning"); + @include themify($themes) { + background-color: themed("yellow-10"); + } } } diff --git a/src/assets/styles/bmc/_sila/_badge.scss b/src/assets/styles/bmc/_sila/_badge.scss index 7d59e9a6..62ff0e09 100644 --- a/src/assets/styles/bmc/_sila/_badge.scss +++ b/src/assets/styles/bmc/_sila/_badge.scss @@ -16,6 +16,8 @@ } .badge-primary { - background-color: theme-color-light("info"); color: theme-color("info"); + @include themify($themes) { + background-color: themed("blue-10"); + } } diff --git a/src/assets/styles/bmc/_sila/_base.scss b/src/assets/styles/bmc/_sila/_base.scss index fc8365d8..dc1e1508 100644 --- a/src/assets/styles/bmc/_sila/_base.scss +++ b/src/assets/styles/bmc/_sila/_base.scss @@ -4,7 +4,9 @@ /* W3C standard: Firefox only */ * { scrollbar-width: thin; - scrollbar-color: rgba(12, 32, 64, 0.7) transparent; + @include themify($themes) { + scrollbar-color: themed("gray-20") transparent; + } } /* For Chrome/Edge/Safari */ @@ -25,9 +27,11 @@ } *::-webkit-scrollbar-thumb { - background-color: rgba(12, 32, 64, 0.7); border-radius: 2px; border: 2px solid transparent; + @include themify($themes) { + background-color: themed("gray-20"); + } } // @@ -81,19 +85,21 @@ label { } .nav-link--current { - background-color: $red-light-background !important; + background-color: $red-5 !important; color: $red !important; &:hover, &:focus { - background-color: $red-light-background !important; + background-color: $red-5 !important; color: $red !important; } } .btn-link:active, .nav-link:active { - background-color: $red-light-background !important; color: $red !important; + @include themify($themes) { + background-color: themed("red-5") !important; + } } .app-header .navbar-text, diff --git a/src/assets/styles/bmc/_sila/_buttons.scss b/src/assets/styles/bmc/_sila/_buttons.scss index 49d8e642..2ca971f8 100644 --- a/src/assets/styles/bmc/_sila/_buttons.scss +++ b/src/assets/styles/bmc/_sila/_buttons.scss @@ -6,6 +6,9 @@ display: inline-flex; align-items: center; justify-content: space-around; + @include themify($themes) { + color: themed("text-primary"); + } svg { margin-right: $spacer / 4; } @@ -14,8 +17,9 @@ fill: currentColor; box-shadow: none !important; &:not(.btn-link) { - border-color: gray("400"); - background-color: gray("400"); + @include themify($themes) { + background-color: themed("red-disabled"); + } } } } @@ -25,6 +29,7 @@ border-radius: $border-radius; border: none; box-shadow: 1px 2px 2px -1px #4f252566 inset; + color: $white !important; &:hover { background-color: $red-hover; } @@ -36,7 +41,7 @@ } &:focus { border: none; - box-shadow: 0px 0px 0px 4px $red-shadow; + box-shadow: 0px 0px 0px 4px $red-50; background-color: $red; } &:active { @@ -47,30 +52,32 @@ } .btn-secondary { - background-color: $gray-5; color: $red; border-radius: $border-radius; border: none; box-shadow: 1px 2px 4px -1px rgb(79 37 37 / 10%) inset; - &:hover { - background-color: $gray-5-hover; - color: $red; - } - &:focus { - border: none; - box-shadow: 0px 0px 0px 4px $red-shadow; - color: $red; - background-color: $gray-5-hover; - } - &:not(:disabled):not(.disabled):active:focus, - &:focus-visible { - border: none; - box-shadow: none; - color: $red; - background-color: $gray-5-hover; - } - &:active { - background-color: $gray-5-hover; + @include themify($themes) { + background-color: themed("gray-5"); + &:hover { + background-color: themed("gray-5-hover"); + color: $red; + } + &:focus { + border: none; + box-shadow: 0px 0px 0px 4px $red-50; + color: $red; + background-color: themed("gray-5-hover"); + } + &:not(:disabled):not(.disabled):active:focus, + &:focus-visible { + border: none; + box-shadow: none; + color: $red; + background-color: themed("gray-5-hover"); + } + &:active { + background-color: themed("gray-5-hover"); + } } } @@ -132,16 +139,20 @@ // Global style for all button link .btn-link { - color: $text-primary; text-decoration: none !important; border-radius: $border-radius; margin-right: 5px; - &:hover { - background-color: gray("200"); - color: theme-color("primary"); - } - &:active { - background-color: gray("300"); + @include themify($themes) { + color: themed("text-primary"); + + &:hover { + background-color: themed("gray-10"); + color: theme-color("primary"); + } + + &:active { + background-color: themed("gray-20") !important; + } } &:disabled { box-shadow: $btn-focus-box-shadow; @@ -189,7 +200,9 @@ box-shadow: none; } &:hover { - color: $text-primary; + @include themify($themes) { + color: themed("text-primary"); + } } .icon-expand { margin-left: auto; diff --git a/src/assets/styles/bmc/_sila/_card.scss b/src/assets/styles/bmc/_sila/_card.scss index d7ac04d2..f8ae2638 100644 --- a/src/assets/styles/bmc/_sila/_card.scss +++ b/src/assets/styles/bmc/_sila/_card.scss @@ -1,21 +1,34 @@ .card { border-radius: $border-radius; + @include themify($themes) { + color: themed("text-primary"); + background-color: themed("back-light") !important; + border-color: themed("back-light") !important; + .tabs { + background-color: themed("surface-primary") !important; + } + } .bg-success { - background-color: theme-color-light('success')!important; + background-color: theme-color-light("success") !important; } } .card-header { + @include themify($themes) { + background-color: themed("back-light") !important; + } .card-header-tabs { border: none !important; .nav-link { border: none !important; - color: $text-secondary; font-weight: 500 !important; background: none !important; + @include themify($themes) { + color: themed("text-secondary"); + } &:hover { - color: $red-hover + color: $red-hover; } } @@ -32,6 +45,6 @@ .card-buttons > a { font-weight: 500; - font-size: .825rem; + font-size: 0.825rem; vertical-align: baseline; } diff --git a/src/assets/styles/bmc/_sila/_dropdown.scss b/src/assets/styles/bmc/_sila/_dropdown.scss index 02e4e855..261d91f1 100644 --- a/src/assets/styles/bmc/_sila/_dropdown.scss +++ b/src/assets/styles/bmc/_sila/_dropdown.scss @@ -3,6 +3,9 @@ z-index: $zindex-dropdown + 1; padding: $spacer / 2; border-radius: $border-radius; + @include themify($themes) { + background-color: themed("surface-primary"); + } } .dropdown-item { @@ -10,9 +13,11 @@ margin: $spacer / 4; width: auto; border-radius: $border-radius; + @include themify($themes) { + color: themed("text-primary"); + } &:hover { background-color: $red-hover; - color: $white; } &:active { background-color: $red-active; diff --git a/src/assets/styles/bmc/_sila/_forms.scss b/src/assets/styles/bmc/_sila/_forms.scss index f993804f..4bc8f626 100644 --- a/src/assets/styles/bmc/_sila/_forms.scss +++ b/src/assets/styles/bmc/_sila/_forms.scss @@ -4,14 +4,34 @@ line-height: $form-line-height; margin-top: -$spacer / 4; margin-bottom: $spacer / 2; - color: gray("700") !important; + @include themify($themes) { + color: themed("text-tretiatry") !important; + } } // Legend label .col-form-label { - color: gray("800"); font-size: $form-label-font-size; line-height: $form-line-height; + @include themify($themes) { + color: themed("text-secondary"); + } +} + +input:-webkit-autofill, +input:-webkit-autofill:focus { + @include themify($themes) { + -webkit-box-shadow: 0 0 0 50px themed("gray-passwordfield") inset; /*your box-shadow*/ + -webkit-text-fill-color: themed("text-secondary"); + } +} + +input:-webkit-autofill:focus { + @include themify($themes) { + -webkit-box-shadow: 0 0 0 50px themed("gray-passwordfield") inset; /*your box-shadow*/ + -webkit-text-fill-color: themed("text-secondary"); + border: 1px solid theme-color("danger") !important; + } } div:not(.search-global) > .form-group { @@ -33,7 +53,7 @@ div:not(.search-global) > .form-group { right: 10px; top: 0; margin-right: 0; - @include media-breakpoint-down(sm) { + @include media-breakpoint-down(sm) { top: -25px; } } @@ -50,16 +70,12 @@ div:not(.search-global) > .form-group { } } .custom-select { - background-color: $gray-5; border: none; } .custom-select:disabled, .form-control:disabled { position: initial; } - .form-control:disabled:hover { - background-color: #cccccc; - } .input-group-text { border: none; background-color: $gray-5; @@ -84,33 +100,49 @@ div:not(.search-global) > .form-group { } label { position: relative; - color: $text-tretiatry; margin-left: 10px; margin-bottom: $spacer / 4; + @include themify($themes) { + color: themed("text-tretiatry"); + } span { display: block; } } } .b-form-datepicker label { - margin-left: 0px !important; + margin-left: 0px !important; } .custom-select, .form-control, .input-group-text { border-radius: $border-radius; - background-color: $white; + @include themify($themes) { + color: themed("text-secondary"); + background-color: themed("gray-5") !important; + option { + height: 18px; + color: themed("text-secondary"); + background-color: themed("gray-20"); + } + option[disabled="disabled"] { + color: themed("text-primary"); + background-color: themed("gray-20"); + } + } } .custom-select, .form-control { - &:disabled { - background-color: gray("400"); - color: gray("600"); - } - &::placeholder { - color: gray("600"); + @include themify($themes) { + &:disabled { + color: themed("text-quaternary") !important; + background-color: themed("gray-20") !important; + } + &::placeholder { + color: themed("text-quaternary"); + } } &.is-invalid, &:invalid { @@ -128,16 +160,19 @@ div:not(.search-global) > .form-group { } .form-control { - color: $text-secondary; border-radius: $border-radius; border: none; - background-color: $gray-5; - font-size: 0.875rem; - &:focus { - color: $text-secondary; - } - &:hover { - background-color: $gray-5-hover; + @include themify($themes) { + color: themed("text-secondary"); + background-color: themed("gray-5"); + font-size: 0.875rem; + + &:focus { + color: themed("text-secondary"); + } + ul > li > div > input { + color: themed("text-secondary") !important; + } } } @@ -200,9 +235,11 @@ div:not(.search-global) > .form-group { .custom-control-label::before, .custom-control-label::after { border-radius: $border-radius / 2; - background-color: #fff; - border: 2px solid $on-surface-secondary; box-shadow: none; + @include themify($themes) { + border: 2px solid themed("on-surface-secondary"); + background-color: themed("surface-primary"); + } } } @@ -211,20 +248,29 @@ div:not(.search-global) > .form-group { background-image: none; } .custom-control-input:checked ~ .custom-control-label::before { - box-shadow: 0px 0px 0px 3px $white inset; + @include themify($themes) { + box-shadow: 0px 0px 0px 3px themed("surface-primary") inset; + } + } + .custom-control-label::before { + @include themify($themes) { + background-color: themed("surface-primary"); + } } } .custom-switch { width: 28px; height: 16px; - .custom-control-input ~ .custom-control-label::after { - border: 1px solid $gray-20; - background: $white; - } - .custom-control-input ~ .custom-control-label::before { - border: 1px solid $gray-20; - background: rgba(4, 10, 15, 0.3); + @include themify($themes) { + .custom-control-input ~ .custom-control-label::after { + border: 1px solid themed("gray-30"); + background: themed("custom-switch-back"); + } + .custom-control-input ~ .custom-control-label::before { + border: 1px solid themed("gray-30"); + background: themed("gray-30"); + } } } diff --git a/src/assets/styles/bmc/_sila/_modal.scss b/src/assets/styles/bmc/_sila/_modal.scss index e67cb777..53895aa4 100644 --- a/src/assets/styles/bmc/_sila/_modal.scss +++ b/src/assets/styles/bmc/_sila/_modal.scss @@ -4,6 +4,10 @@ .modal-content { border-radius: $border-radius; + @include themify($themes) { + color: themed("text-secondary"); + background-color: themed("surface-primary"); + } } .modal-header { @@ -35,6 +39,12 @@ justify-content: flex-start; } +.modal-footer { + @include themify($themes) { + border-top: 1px solid themed("gray-10"); + } +} + .file-input_container > .custom-file { height: 100%; } diff --git a/src/assets/styles/bmc/_sila/_pagination.scss b/src/assets/styles/bmc/_sila/_pagination.scss index 8183057e..2b36f79b 100644 --- a/src/assets/styles/bmc/_sila/_pagination.scss +++ b/src/assets/styles/bmc/_sila/_pagination.scss @@ -20,10 +20,25 @@ @include media-breakpoint-up(sm) { justify-content: flex-end; } + .page-item button { + @include themify($themes) { + color: themed("text-primary"); + background-color: themed("gray-30"); + border-color: themed("gray-30"); + } + } .page-item.active button { - color: theme-color("dark"); - background-color: color("white"); - border-color: $border-color; - box-shadow: inset 0px -3px theme-color("primary"); + @include themify($themes) { + color: themed("text-primary"); + background-color: themed("surface-primary"); + border-color: themed("gray-30"); + } + } + .page-item.disabled span { + @include themify($themes) { + color: themed("text-primary"); + background-color: themed("surface-secondary"); + border-color: themed("gray-30"); + } } } diff --git a/src/assets/styles/bmc/_sila/_section-divider.scss b/src/assets/styles/bmc/_sila/_section-divider.scss index 9ccdcf49..d09c390b 100644 --- a/src/assets/styles/bmc/_sila/_section-divider.scss +++ b/src/assets/styles/bmc/_sila/_section-divider.scss @@ -1,5 +1,5 @@ .section-divider { - border-bottom: 1px solid gray('400'); + border-bottom: 1px solid gray("400"); } .collapse-divider { @@ -13,7 +13,7 @@ @include media-breakpoint-down(md) { margin-left: 1rem; margin-right: 1rem; - } + } } .btn-collapse { padding-left: 2rem; @@ -37,11 +37,11 @@ width: auto; margin: 0rem -1.95rem 0rem -1.95rem; padding-left: 2rem; - @include media-breakpoint-down(md) { - padding-left: 1rem; - padding-right: 1rem; - margin-left: -0.95rem; - } + @include media-breakpoint-down(md) { + padding-left: 1rem; + padding-right: 1rem; + margin-left: -0.95rem; + } border-bottom: 1px solid $gray-10; gap: 8px; } @@ -51,15 +51,15 @@ margin: 0rem -1.95rem; padding-left: 1rem; padding-bottom: 1rem; - @include media-breakpoint-down(md) { - padding-left: 0rem; - margin: 0rem -0.95rem; - } + @include media-breakpoint-down(md) { + padding-left: 0rem; + margin: 0rem -0.95rem; + } .form-group { margin-bottom: 0 !important; .col-form-label { padding-left: 0.7rem; white-space: nowrap; } - } + } } diff --git a/src/assets/styles/bmc/_sila/_tables.scss b/src/assets/styles/bmc/_sila/_tables.scss index ac35f605..04265261 100644 --- a/src/assets/styles/bmc/_sila/_tables.scss +++ b/src/assets/styles/bmc/_sila/_tables.scss @@ -1,11 +1,14 @@ .table { position: relative; z-index: $zindex-dropdown; - border: 1px solid $gray-30; border-radius: $border-radius; border-collapse: separate; border-spacing: 0px; + @include themify($themes) { + color: themed("text-primary"); + border: 1px solid themed("gray-30"); + } &.b-table > thead > tr { & > [aria-sort="ascending"] { background-image: url("~@/assets/images/_sila/sort-ascending.svg"); @@ -48,6 +51,9 @@ td { vertical-align: middle; font-size: 0.875rem; + @include themify($themes) { + border-top: 1px solid themed("gray-30") !important; + } // Table action buttons .btn-link { width: 40px; @@ -61,10 +67,12 @@ // thead-light added for specificity .thead-light th { - background-color: $gray-light; vertical-align: middle; text-transform: uppercase; - color: $text-primary; + @include themify($themes) { + color: themed("text-primary"); + background-color: themed("gray-10"); + } &:focus { outline: none; } @@ -92,8 +100,10 @@ } .b-table-details { - border-top: 1px solid rgba(26, 62, 91, 0.3); background-color: inherit; + @include themify($themes) { + border-top: 1px solid themed("gray-30"); + } td { padding-left: $table-cell-padding; padding-right: $table-cell-padding; @@ -132,7 +142,9 @@ box-shadow: inset 0 0 0 2px theme-color("primary") !important; } &:hover { - background-color: $gray-5-hover; + @include themify($themes) { + background-color: themed("gray-5-hover"); + } } } .custom-radio, @@ -146,7 +158,10 @@ } .table-hover tbody tr:hover { - background-color: $gray-5; + @include themify($themes) { + color: themed("text-primary"); + background-color: themed("gray-5"); + } } .b-table-sticky-header td { @@ -163,8 +178,10 @@ overflow: auto; width: calc(100vw - 347px); .table { - border-right: 1px solid $gray-30; border-radius: $border-radius; + @include themify($themes) { + border-right: 1px solid themed("gray-30"); + } } .table-accessory, .table-full { @@ -176,8 +193,10 @@ @include media-breakpoint-up(md) { overflow: auto; .table { - border-right: 1px solid $gray-30; border-radius: $border-radius; + @include themify($themes) { + border-right: 1px solid themed("gray-30"); + } } .table-accessory, .table-full { @@ -189,8 +208,8 @@ } // style for table contained in components #page-network { - [class*='table-responsive-'] { - @include media-breakpoint-up(lg) { + [class*="table-responsive-"] { + @include media-breakpoint-up(lg) { width: calc(100vw - 390px); } } @@ -199,8 +218,9 @@ // Table stacked style for small screen only @include media-breakpoint-down(xs) { .b-table-stacked-sm { - border: 1px solid $gray-10; - + @include themify($themes) { + border: 1px solid themed("gray-10"); + } tr { &:not(:first-child) > td[aria-colindex="1"] { padding-top: 0.625rem; @@ -262,7 +282,9 @@ .table-accessory { border: none; thead th { - border-bottom: 1px solid $gray-30; + @include themify($themes) { + border-bottom: 1px solid themed("gray-30"); + } background-color: transparent !important; padding: 5px 0; } @@ -274,7 +296,9 @@ td { white-space: nowrap; font-size: 0.745rem; - color: $text-tretiatry; + @include themify($themes) { + color: themed("text-tretiatry"); + } } .thead-light th > div { font-size: 0.755rem !important; diff --git a/src/assets/styles/bmc/_sila/_toasts.scss b/src/assets/styles/bmc/_sila/_toasts.scss index 482765ce..ab7e36c2 100644 --- a/src/assets/styles/bmc/_sila/_toasts.scss +++ b/src/assets/styles/bmc/_sila/_toasts.scss @@ -1,10 +1,10 @@ .b-toaster { - top: 75px!important; // make sure toasts do not hide top header + top: 75px !important; // make sure toasts do not hide top header } // Toast component and status icon style .toast { - padding: $spacer/2 $spacer/2 $spacer/2 $spacer+2; + padding: $spacer/2 $spacer/2 $spacer/2 $spacer + 2; border-width: 0 0 0 3px; box-shadow: $box-shadow; .close { @@ -16,10 +16,12 @@ .toast-header { display: flex; align-items: flex-start; - background-color: inherit!important; //override specificity + background-color: transparent !important; //override specificity border: none; - color: theme-color("dark")!important; //override specificity padding-bottom: 0; + @include themify($themes) { + color: themed("text-primary") !important; //override specificity + } } .toast-icon { @@ -31,31 +33,35 @@ } + .close { - line-height: .9; + line-height: 0.9; } } .toast-body { - color: theme-color("dark"); + @include themify($themes) { + color: themed("text-primary") !important; + } padding-top: 0; } .b-toast-success .toast { - border-left-color: theme-color("success")!important; - background-color: theme-color-light("success")!important; + border-left-color: theme-color("success") !important; + background-color: theme-color-light("success") !important; } .b-toast-info .toast { - border-left-color: theme-color("info")!important; - background-color: theme-color-light("info")!important; + border-left-color: theme-color("info") !important; + background-color: theme-color-light("info") !important; } .b-toast-danger .toast { - border-left-color: theme-color("danger")!important; - background-color: theme-color-light("danger")!important; + @include themify($themes) { + border-left-color: themed("red-40") !important; + background-color: themed("red-5") !important; + } } .b-toast-warning .toast { - border-left-color: theme-color("warning")!important; - background-color: theme-color-light("warning")!important; + border-left-color: theme-color("warning") !important; + background-color: theme-color-light("warning") !important; } diff --git a/src/components/_sila/AppHeader/AppHeader.vue b/src/components/_sila/AppHeader/AppHeader.vue index 1821c2b4..d26f3b7c 100644 --- a/src/components/_sila/AppHeader/AppHeader.vue +++ b/src/components/_sila/AppHeader/AppHeader.vue @@ -189,6 +189,9 @@ +
  • + +
  • a { @@ -158,18 +159,17 @@ svg { font-weight: $headings-font-weight; padding-left: $spacer; // defining consistent padding for links and buttons padding-right: $spacer; - color: theme-color('secondary'); - - &:hover { - background-color: theme-color-level(dark, -10.5); - color: theme-color('dark'); - } - - &:focus { - background-color: theme-color-level(light, 0); - box-shadow: inset 0 0 0 2px theme-color('primary'); - color: theme-color('dark'); - outline: 0; + @include themify($themes) { + color: themed('text-secondary'); + &:hover { + background-color: themed('nav-hover'); + color: themed('text-secondary'); + } + &:focus { + background-color: themed('nav-focus'); + color: themed('text-secondary'); + outline: 0; + } } &:active { @@ -217,11 +217,16 @@ svg { left: 0; z-index: $zindex-fixed; overflow-y: auto; - background-color: $white; transform: translateX(-$navigation-width); transition: transform $exit-easing--productive $duration--moderate-02; border-right: 1px solid theme-color-level('light', 2.85); + @include themify($themes) { + color: themed('text-primary'); + background-color: themed('surface-primary'); + border-right: 1px solid themed('gray-30'); + } + @include media-breakpoint-down(md) { z-index: $zindex-fixed + 2; } diff --git a/src/components/_sila/Global/Chart.vue b/src/components/_sila/Global/Chart.vue index 2d335636..61331487 100644 --- a/src/components/_sila/Global/Chart.vue +++ b/src/components/_sila/Global/Chart.vue @@ -48,6 +48,11 @@ export default { default: true, }, }, + data() { + return { + key: 0, + }; + }, computed: { readyData() { let filteredData = this.data.map((metric) => { @@ -74,7 +79,6 @@ export default { return transform; }, - step() { return this.timeScale === 'hour' ? 10 : 60; }, @@ -129,6 +133,7 @@ export default { }, chartOptions() { + this.key; return { chart: { type: 'spline', @@ -136,6 +141,7 @@ export default { height: '360px', zoomType: 'xy', animation: true, + backgroundColor: this.changeColor('background'), resetZoomButton: { position: { x: 0, @@ -149,7 +155,11 @@ export default { title: null, labels: { step: this.step, + style: { + color: this.changeColor('text'), + }, }, + gridLineColor: this.changeColor('line'), minorGridLineColor: '#1A3E5B1A', }, yAxis: { @@ -159,9 +169,15 @@ export default { title: null, minRange: this.minRange, minTickInterval: this.minTickInterval, + gridLineColor: this.changeColor('line'), minorGridLineColor: '#1A3E5B1A', plotLines: this.plotLines, plotBands: this.plotBands, + labels: { + style: { + color: this.changeColor('text'), + }, + }, }, series: this.metricData.map((item) => ({ ...item, @@ -351,7 +367,11 @@ export default { return minTickInterval; }, }, - + mounted() { + this.$root.$on('change-theme', () => { + this.key += 1; + }); + }, async created() { this.setOptions(); }, @@ -364,6 +384,24 @@ export default { }, }); }, + changeColor(type) { + const theme = localStorage.getItem('user-theme'); + switch (type) { + case 'background': + return theme === 'light-theme' ? '#ffffff' : '#12191F'; + /* Surface/Primary */ + case 'text': + return theme === 'light-theme' + ? 'rgba(12, 28, 41, 0.6)' + : ' rgba(255, 255, 255, 0.6)'; + /* Text/Tretiatry */ + case 'line': + return theme === 'light-theme' + ? 'rgba(12, 28, 41, 0.6)' + : 'rgba(255, 255, 255, 0.6)'; + /* Text/Tretiatry */ + } + }, setCategories(count, desc) { const arr = [...new Array(count)].map((i, k) => `${k} ${desc}`); return arr; diff --git a/src/components/_sila/Global/ThemeButton.vue b/src/components/_sila/Global/ThemeButton.vue new file mode 100644 index 00000000..e88c948d --- /dev/null +++ b/src/components/_sila/Global/ThemeButton.vue @@ -0,0 +1,58 @@ + + + + + diff --git a/src/env/assets/styles/_sila.scss b/src/env/assets/styles/_sila.scss index 477a4ce4..6af537c2 100644 --- a/src/env/assets/styles/_sila.scss +++ b/src/env/assets/styles/_sila.scss @@ -60,37 +60,153 @@ $success: $green; $warning: $yellow; $dark-hover: #3c506a; +$login-page-description-color: rgba(12, 28, 41, 0.6); + +$border-radius: 8px; +$loading-color: #c11d1d; +$navbar-color: $dark; +$header-height: 56px; +$navigation-width: 280px; -$red-hover: #fc2a2a; -$red-active: #df2323; -$red-disabled: #e17171; -$red-click: #c71414; -$red-shadow: #e1171780; -$red-light-background: #e117170d; - -$gray-2: rgb(251, 251, 252); -$gray-5: rgba(26, 62, 91, 0.05); -$gray-5-hover: rgba(20, 39, 53, 0.1); -$gray-10: rgba(26, 62, 91, 0.1); -$gray-20: rgba(26, 62, 92, 0.2); -$gray-30: rgba(26, 62, 91, 0.3); -$gray-light: rgb(232 235 238); -$red-40: rgba(225, 23, 23, 0.4); +// Light theme +$red-hover: #fc2a2a; /* Red Brand Primary Hover */ +$red-active: #df2323; /* Red Brand Primary Active */ +$red-disabled: rgb(225, 113, 113); /* Red Brand Primary Disabled */ +$red-click: #c71414; /* Red Brand Primary Click */ +$red-5: rgba(225, 23, 23, 0.05); /* Faint Brand Primary/5% */ +$red-40: rgba(225, 23, 23, 0.4); /* Faint Brand Primary/40% */ +$red-50: rgba(225, 23, 23, 0.5); /* Faint Brand Primary/50% */ + +$gray-2: rgb(251, 251, 252); /* Faint Secondary Primary/2% */ +$gray-5-hover: rgba(20, 39, 53, 0.1); /* Faint Secondary Primary Hover/5% */ +$gray-5: rgba(26, 62, 91, 0.05); /* Faint Secondary Primary/5% */ +$gray-10: rgba(26, 62, 91, 0.1); /* Faint Secondary Primary/10% */ +$gray-20: rgba(26, 62, 91, 0.2); /* Faint Secondary Primary/20% */ +$gray-30: rgba(26, 62, 91, 0.3); /* Faint Secondary Primary/30% */ +$gray-light: rgb(232, 235, 238); +$gray-passwordfield: rgb(243 245 247); + +$blue-10: rgb(235 240 253); +$green-10: rgb(236 248 235); +$yellow-10: rgb(254 249 233); + +$surface-primary: #ffffff; $surface-secondary: #f3f4f5; -$on-surface-secondary: #040a0f99; -$on-surface-tretiatry: #040a0f4d; -$text-primary: rgb(12, 28, 41); +$on-surface-primary: #040a0f; +$on-surface-secondary: rgba(4, 10, 15, 0.6); +$on-surface-tretiatry: rgba(4, 10, 15, 0.3); + +$text-primary: rgba(12, 28, 41, 0.9); $text-secondary: rgba(12, 28, 41, 0.8); $text-tretiatry: rgba(12, 28, 41, 0.6); $text-quaternary: rgba(12, 28, 41, 0.3); -$login-page-description-color: rgba(12, 28, 41, 0.6); +// Dark theme +$red-5-dark: rgba(225, 23, 23, 0.1); /* Faint Brand Primary/5% */ +$red-40-dark: rgba(225, 23, 23, 0.5); /* Faint Brand Primary/40% */ +$red-50-dark: rgba(225, 23, 23, 0.6); /* Faint Brand Primary/50% */ -$border-radius: 8px; +$gray-5-hover-dark: rgba(26, 62, 91, 0.7); +$gray-5-dark: rgba(26, 62, 91, 0.2); /* Faint Secondary Primary/5% */ +$gray-10-dark: rgba(26, 62, 91, 0.3); /* Faint Secondary Primary/10% */ +$gray-20-dark: rgba(26, 62, 91, 0.4); /* Faint Secondary Primary/20% */ +$gray-30-dark: rgba(26, 62, 91, 0.5); /* Faint Secondary Primary/30% */ +$gray-passwordfield-dark: rgb(19 32 43); -$loading-color: #c11d1d; -$navbar-color: $dark; -$header-height: 56px; -$navigation-width: 280px; +$blue-10-dark: rgba(45, 96, 229, 0.1); +$green-10-dark: rgba(52, 178, 51, 0.1); +$yellow-10-dark: rgba(245, 189, 31, 0.1); + +$surface-primary-dark: #12191f; +$surface-secondary-dark: #0c1c29; + +$on-surface-primary-dark: #f5f5f5; +$on-surface-secondary-dark: rgba(245, 245, 245, 0.6); +$on-surface-tretiatry-dark: rgba(245, 245, 245, 0.3); + +$text-primary-dark: #e6e6e6; +$text-secondary-dark: rgba(255, 255, 255, 0.9); +$text-tretiatry-dark: rgba(255, 255, 255, 0.6); +$text-quaternary-dark: rgba(255, 255, 255, 0.3); + +$themes: ( + light: ( + surface-primary: $surface-primary, + surface-secondary: $surface-secondary, + on-surface-primary: $on-surface-primary, + on-surface-secondary: $on-surface-secondary, + on-surface-tretiatry-dark: $on-surface-tretiatry, + text-primary: $text-primary, + text-secondary: $text-secondary, + text-tretiatry: $text-tretiatry, + text-quaternary: $text-quaternary, + back-light: $gray-100, + nav-hover: #dde0e5, + nav-focus: #f4f4f4, + gray-5-hover: $gray-5-hover, + gray-5: $gray-5, + gray-10: $gray-10, + gray-20: $gray-20, + gray-30: $gray-30, + gray-passwordfield: $gray-passwordfield, + red-5: $red-5, + red-40: $red-40, + red-50: $red-50, + blue-10: $blue-10, + green-10: $green-10, + yellow-10: $yellow-10, + custom-switch-back: $white, + ), + dark: ( + surface-primary: $surface-primary-dark, + surface-secondary: $surface-secondary-dark, + on-surface-primary: $on-surface-primary-dark, + on-surface-secondary: $on-surface-secondary-dark, + on-surface-tretiatry-dark: $on-surface-tretiatry-dark, + text-primary: $text-primary-dark, + text-secondary: $text-secondary-dark, + text-tretiatry: $text-tretiatry-dark, + text-quaternary: $text-quaternary-dark, + back-light: $gray-30-dark, + nav-hover: $gray-30-dark, + nav-focus: $gray-30-dark, + gray-5-hover: $gray-5-hover-dark, + gray-5: $gray-5-dark, + gray-10: $gray-10-dark, + gray-20: $gray-20-dark, + gray-30: $gray-30-dark, + gray-passwordfield: $gray-passwordfield-dark, + red-5: $red-5-dark, + red-40: $red-40-dark, + red-50: $red-50-dark, + blue-10: $blue-10-dark, + green-10: $green-10-dark, + yellow-10: $yellow-10-dark, + custom-switch-back: $text-primary-dark, + ), +); + +@mixin themify($themes) { + @each $theme, $map in $themes { + .#{$theme}-theme & { + $theme-map: () !global; + @each $key, $submap in $map { + $value: map-get(map-get($themes, $theme), "#{$key}"); + $theme-map: map-merge( + $theme-map, + ( + $key: $value, + ) + ) !global; + } + @content; + $theme-map: null !global; + } + } +} + +@function themed($key) { + @return map-get($theme-map, $key); +} diff --git a/src/layouts/_sila/AppLayout.vue b/src/layouts/_sila/AppLayout.vue index 65e1d5ec..e494dda5 100644 --- a/src/layouts/_sila/AppLayout.vue +++ b/src/layouts/_sila/AppLayout.vue @@ -44,7 +44,8 @@ export default { }, }, mounted() { - this.$root.$on('refresh-application', () => this.refresh()); + this.$root.$on('refresh-application', this.refresh); + this.$root.$on('change-theme', this.refresh); }, methods: { refresh() { diff --git a/src/views/_sila/SecurityAndAccess/Policies/Policies.vue b/src/views/_sila/SecurityAndAccess/Policies/Policies.vue index a9c273b0..cbc0362a 100644 --- a/src/views/_sila/SecurityAndAccess/Policies/Policies.vue +++ b/src/views/_sila/SecurityAndAccess/Policies/Policies.vue @@ -264,6 +264,8 @@ export default { -- cgit v1.2.3