From c2e319499f56239c76b004ed20105c761ffe0140 Mon Sep 17 00:00:00 2001 From: eugene-sinitsyn Date: Tue, 10 Mar 2020 15:57:33 +0300 Subject: [PATCH] Remove non-material themes --- .../components/header/header.component.html | 4 +- .../components/header/header.component.scss | 12 + .../components/header/header.component.ts | 42 +-- src/app/@theme/styles/_angular-material.scss | 15 + .../styles/{material => }/_material-dark.scss | 21 +- .../{material => }/_material-light.scss | 19 +- src/app/@theme/styles/_overrides.scss | 29 ++ src/app/@theme/styles/material/_material.scss | 57 ---- src/app/@theme/styles/styles.scss | 5 +- src/app/@theme/styles/theme.corporate.ts | 308 ----------------- src/app/@theme/styles/theme.cosmic.ts | 308 ----------------- src/app/@theme/styles/theme.dark.ts | 314 ------------------ src/app/@theme/styles/theme.default.ts | 314 ------------------ .../{material => }/theme.material-dark.ts | 2 +- .../{material => }/theme.material-light.ts | 0 src/app/@theme/styles/themes.scss | 131 +------- src/app/@theme/theme.module.ts | 14 +- .../pages/dashboard/dashboard.component.ts | 25 -- .../room-selector/room-selector.component.ts | 38 +-- .../pages/dashboard/rooms/rooms.component.ts | 2 +- .../forms/buttons/buttons.component.html | 2 +- .../pages/forms/buttons/buttons.component.ts | 15 +- .../form-inputs/form-inputs.component.html | 6 +- .../form-inputs/form-inputs.component.ts | 13 - 24 files changed, 116 insertions(+), 1580 deletions(-) create mode 100644 src/app/@theme/styles/_angular-material.scss rename src/app/@theme/styles/{material => }/_material-dark.scss (97%) rename src/app/@theme/styles/{material => }/_material-light.scss (97%) delete mode 100644 src/app/@theme/styles/material/_material.scss delete mode 100644 src/app/@theme/styles/theme.corporate.ts delete mode 100644 src/app/@theme/styles/theme.cosmic.ts delete mode 100644 src/app/@theme/styles/theme.dark.ts delete mode 100644 src/app/@theme/styles/theme.default.ts rename src/app/@theme/styles/{material => }/theme.material-dark.ts (99%) rename src/app/@theme/styles/{material => }/theme.material-light.ts (100%) diff --git a/src/app/@theme/components/header/header.component.html b/src/app/@theme/components/header/header.component.html index b228cde1f0..a752809ce2 100644 --- a/src/app/@theme/components/header/header.component.html +++ b/src/app/@theme/components/header/header.component.html @@ -7,9 +7,7 @@ [matRippleUnbounded]="true" [matRippleCentered]="true" (click)="toggleSidebar()" - > - - + > = new Subject(); - public readonly materialTheme$: Observable; userPictureOnly: boolean = false; user: any; - themes = [ - { - value: 'default', - name: 'Light', - }, - { - value: 'dark', - name: 'Dark', - }, - { - value: 'cosmic', - name: 'Cosmic', - }, - { - value: 'corporate', - name: 'Corporate', - }, - { - value: 'material-light', - name: 'Material Light', - }, - { - value: 'material-dark', - name: 'Material Dark', - }, + public currentTheme = 'material-light'; + public readonly themes = [ + { value: 'material-light', name: 'Material Light' }, + { value: 'material-dark', name: 'Material Dark' }, ]; - currentTheme = 'default'; - userMenu = [ { title: 'Profile' }, { title: 'Log out' } ]; public constructor( @@ -58,13 +34,7 @@ export class HeaderComponent implements OnInit, OnDestroy { private layoutService: LayoutService, private breakpointService: NbMediaBreakpointsService, private rippleService: RippleService, - ) { - this.materialTheme$ = this.themeService.onThemeChange() - .pipe(map(theme => { - const themeName: string = theme?.name || ''; - return themeName.startsWith('material'); - })); - } + ) {} ngOnInit() { this.currentTheme = this.themeService.currentTheme; diff --git a/src/app/@theme/styles/_angular-material.scss b/src/app/@theme/styles/_angular-material.scss new file mode 100644 index 0000000000..bbcbcdf739 --- /dev/null +++ b/src/app/@theme/styles/_angular-material.scss @@ -0,0 +1,15 @@ +@import '~@angular/material/theming'; + +@mixin angular-material() { + @include mat-core(); + + @include nb-for-theme(material-dark) { + $custom-dark-theme: mat-dark-theme(mat-palette($mat-pink), mat-palette($mat-blue-grey)); + @include angular-material-theme($custom-dark-theme); + } + + @include nb-for-theme(material-light) { + $custom-light-theme: mat-light-theme(mat-palette($mat-indigo), mat-palette($mat-pink)); + @include angular-material-theme($custom-light-theme); + } +} diff --git a/src/app/@theme/styles/material/_material-dark.scss b/src/app/@theme/styles/_material-dark.scss similarity index 97% rename from src/app/@theme/styles/material/_material-dark.scss rename to src/app/@theme/styles/_material-dark.scss index 6f7bead56a..d495f21d7b 100644 --- a/src/app/@theme/styles/material/_material-dark.scss +++ b/src/app/@theme/styles/_material-dark.scss @@ -363,6 +363,8 @@ $theme: ( font-family-primary: unquote('Roboto, sans-serif'), + layout-padding-top: 2.25rem, + shadow: unquote('0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12)'), card-shadow: shadow, header-shadow: unquote( @@ -375,8 +377,6 @@ $theme: ( footer-text-color: text-basic-color, footer-text-highlight-color: footer-text-color, sidebar-background-color: background-basic-color-2, - actions-icon-color: text-basic-color, - actions-text-color: text-basic-color, material-regular-font-weight: 400, menu-text-font-weight: material-regular-font-weight, @@ -387,6 +387,7 @@ $theme: ( menu-item-icon-color: rgba(255, 255, 255, 0.7), menu-item-icon-hover-color: rgba(255, 255, 255, 0.7), + menu-item-icon-margin: 0 0.5rem 0 0, menu-submenu-item-hover-background-color: rgba(255, 255, 255, 0.04), menu-submenu-item-active-hover-background-color: rgba(255, 255, 255, 0.1), @@ -395,6 +396,20 @@ $theme: ( card-border-style: none, card-background-color: color-basic-800, card-divider-color: color-basic-700, + card-height-tiny: 13.5rem, + card-height-small: 21.1875rem, + card-height-medium: 28.875rem, + card-height-large: 36.5625rem, + card-height-giant: 44.25rem, + card-margin-bottom: 1.875rem, + card-header-with-select-padding-top: 0.5rem, + card-header-with-select-padding-bottom: 0.5rem, + + select-min-width: 6rem, + + slide-out-background: linear-gradient(270deg, #1f1f1f 0%, #292929 100%), + slide-out-shadow-color: 0 4px 14px 0 #292929, + slide-out-shadow-color-rtl: 0 4px 14px 0 #292929, input-border-width: 0 0 1px 0, input-basic-border-color: rgba(255, 255, 255, 0.7), @@ -493,4 +508,4 @@ $theme: ( option-giant-text-font-weight: material-regular-font-weight ); -$nb-themes: nb-register-theme($theme, material-dark, dark); +$nb-themes: nb-register-theme($theme, material-dark, default); diff --git a/src/app/@theme/styles/material/_material-light.scss b/src/app/@theme/styles/_material-light.scss similarity index 97% rename from src/app/@theme/styles/material/_material-light.scss rename to src/app/@theme/styles/_material-light.scss index 169fdb1956..36a5b0ae3c 100644 --- a/src/app/@theme/styles/material/_material-light.scss +++ b/src/app/@theme/styles/_material-light.scss @@ -363,6 +363,8 @@ $theme: ( font-family-primary: unquote('Roboto, sans-serif'), + layout-padding-top: 2.25rem, + shadow: unquote('0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12)'), card-shadow: shadow, header-shadow: unquote( @@ -375,8 +377,6 @@ $theme: ( footer-text-color: text-alternate-color, footer-text-highlight-color: footer-text-color, sidebar-background-color: background-basic-color-2, - actions-icon-color: text-alternate-color, - actions-text-color: text-alternate-color, menu-text-font-weight: 400, menu-text-color: rgba(0, 0, 0, 0.87), @@ -386,6 +386,7 @@ $theme: ( menu-item-icon-color: rgba(0, 0, 0, 0.87), menu-item-icon-hover-color: rgba(0, 0, 0, 0.87), + menu-item-icon-margin: 0 0.5rem 0 0, menu-submenu-item-hover-background-color: rgba(0, 0, 0, 0.04), menu-submenu-item-active-hover-background-color: rgba(0, 0, 0, 0.1), @@ -393,6 +394,20 @@ $theme: ( card-border-style: none, card-divider-color: color-basic-200, + card-height-tiny: 13.5rem, + card-height-small: 21.1875rem, + card-height-medium: 28.875rem, + card-height-large: 36.5625rem, + card-height-giant: 44.25rem, + card-margin-bottom: 1.875rem, + card-header-with-select-padding-top: 0.5rem, + card-header-with-select-padding-bottom: 0.5rem, + + select-min-width: 6rem, + + slide-out-background: linear-gradient(270deg, #e0e0e0 0%, #ebebeb 100%), + slide-out-shadow-color: 0 4px 14px 0 #ebebeb, + slide-out-shadow-color-rtl: 0 4px 14px 0 #ebebeb, input-border-width: 0 0 1px 0, input-basic-border-color: rgba(0, 0, 0, 0.42), diff --git a/src/app/@theme/styles/_overrides.scss b/src/app/@theme/styles/_overrides.scss index 8ba441215d..791649961b 100644 --- a/src/app/@theme/styles/_overrides.scss +++ b/src/app/@theme/styles/_overrides.scss @@ -12,4 +12,33 @@ .table { color: nb-theme(text-basic-color) !important; } + + nb-sidebar { + transition: width 0.3s; + + .main-container { + transition: width 0.3s; + } + } + + nb-card { + border-bottom-left-radius: 0.125rem; + border-bottom-right-radius: 0.125rem; + + nb-card-header, .tabset { + background-color: nb-theme(card-divider-color); + } + } + + [nbinput] { + font-weight: 400; + + &.status-basic:focus:hover { + border-color: nb-theme(color-primary-focus) !important; + } + } + + [nbbutton] { + box-shadow: none !important; + } } diff --git a/src/app/@theme/styles/material/_material.scss b/src/app/@theme/styles/material/_material.scss deleted file mode 100644 index 4d228533c5..0000000000 --- a/src/app/@theme/styles/material/_material.scss +++ /dev/null @@ -1,57 +0,0 @@ -@import '~@angular/material/theming'; - -@include nb-install() { - @include nb-for-theme(material-dark) { - $custom-dark-theme: mat-dark-theme(mat-palette($mat-pink), mat-palette($mat-blue-grey)); - @include angular-material-theme($custom-dark-theme); - } - - @include nb-for-theme(material-light) { - $custom-light-theme: mat-light-theme(mat-palette($mat-indigo), mat-palette($mat-pink)); - @include angular-material-theme($custom-light-theme); - } - - @include nb-for-themes(material-dark, material-light) { - @include mat-core(); - - nb-layout-header { - .logo-container nb-icon { - color: nb-theme(text-control-color); - } - - .select-button { - background-color: nb-theme(background-basic-color-3) !important; - } - } - - - nb-sidebar { - transition: width 0.3s; - - .main-container { - transition: width 0.3s; - } - } - - nb-card { - border-bottom-left-radius: 0.125rem; - border-bottom-right-radius: 0.125rem; - - nb-card-header, .tabset { - background-color: nb-theme(card-divider-color); - } - } - - [nbinput] { - font-weight: 400; - - &.status-basic:focus:hover { - border-color: nb-theme(color-primary-focus) !important; - } - } - - [nbbutton] { - box-shadow: none !important; - } - } -} diff --git a/src/app/@theme/styles/styles.scss b/src/app/@theme/styles/styles.scss index 42369947ac..d9aa10d8ab 100644 --- a/src/app/@theme/styles/styles.scss +++ b/src/app/@theme/styles/styles.scss @@ -4,6 +4,8 @@ // themes - our custom or/and out of the box themes @import 'themes'; +@import 'angular-material'; + // framework component themes (styles tied to theme variables) @import '~@nebular/theme/styles/globals'; @import '~@nebular/auth/styles/all'; @@ -18,12 +20,12 @@ @import './layout'; @import './overrides'; -@import './material/material'; // install the framework and custom global styles @include nb-install() { // framework global styles + @include angular-material(); @include nb-theme-global(); @include nb-auth-global(); @@ -31,5 +33,6 @@ // loading progress bar @include ngx-pace-theme(); + @include nb-overrides(); }; diff --git a/src/app/@theme/styles/theme.corporate.ts b/src/app/@theme/styles/theme.corporate.ts deleted file mode 100644 index ea360a1e33..0000000000 --- a/src/app/@theme/styles/theme.corporate.ts +++ /dev/null @@ -1,308 +0,0 @@ -import { NbJSThemeOptions, CORPORATE_THEME as baseTheme } from '@nebular/theme'; - -const baseThemeVariables = baseTheme.variables; - -export const CORPORATE_THEME = { - name: 'corporate', - base: 'corporate', - variables: { - temperature: { - arcFill: [ '#ffa36b', '#ffa36b', '#ff9e7a', '#ff9888', '#ff8ea0' ], - arcEmpty: baseThemeVariables.bg2, - thumbBg: baseThemeVariables.bg2, - thumbBorder: '#ffa36b', - }, - - solar: { - gradientLeft: baseThemeVariables.primary, - gradientRight: baseThemeVariables.primary, - shadowColor: 'rgba(0, 0, 0, 0)', - secondSeriesFill: baseThemeVariables.bg2, - radius: ['80%', '90%'], - }, - - traffic: { - tooltipBg: baseThemeVariables.bg, - tooltipBorderColor: baseThemeVariables.border2, - tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;', - tooltipTextColor: baseThemeVariables.fgText, - tooltipFontWeight: 'normal', - - yAxisSplitLine: 'rgba(0, 0, 0, 0)', - - lineBg: baseThemeVariables.primary, - lineShadowBlur: '0', - itemColor: baseThemeVariables.border4, - itemBorderColor: baseThemeVariables.border4, - itemEmphasisBorderColor: baseThemeVariables.primaryLight, - shadowLineDarkBg: 'rgba(0, 0, 0, 0)', - shadowLineShadow: 'rgba(0, 0, 0, 0)', - gradFrom: baseThemeVariables.bg, - gradTo: baseThemeVariables.bg, - }, - - electricity: { - tooltipBg: baseThemeVariables.bg, - tooltipLineColor: baseThemeVariables.fgText, - tooltipLineWidth: '0', - tooltipBorderColor: baseThemeVariables.border2, - tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;', - tooltipTextColor: baseThemeVariables.fgText, - tooltipFontWeight: 'normal', - - axisLineColor: baseThemeVariables.border3, - xAxisTextColor: baseThemeVariables.fg, - yAxisSplitLine: baseThemeVariables.separator, - - itemBorderColor: baseThemeVariables.primary, - lineStyle: 'solid', - lineWidth: '4', - lineGradFrom: baseThemeVariables.primary, - lineGradTo: baseThemeVariables.primary, - lineShadow: 'rgba(0, 0, 0, 0)', - - areaGradFrom: 'rgba(0, 0, 0, 0)', - areaGradTo: 'rgba(0, 0, 0, 0)', - shadowLineDarkBg: 'rgba(0, 0, 0, 0)', - }, - - bubbleMap: { - titleColor: baseThemeVariables.fgText, - areaColor: baseThemeVariables.bg4, - areaHoverColor: baseThemeVariables.fgHighlight, - areaBorderColor: baseThemeVariables.border5, - }, - - profitBarAnimationEchart: { - textColor: baseThemeVariables.fgText, - - firstAnimationBarColor: baseThemeVariables.primary, - secondAnimationBarColor: baseThemeVariables.success, - - splitLineStyleOpacity: '1', - splitLineStyleWidth: '1', - splitLineStyleColor: baseThemeVariables.separator, - - tooltipTextColor: baseThemeVariables.fgText, - tooltipFontWeight: 'normal', - tooltipFontSize: '16', - tooltipBg: baseThemeVariables.bg, - tooltipBorderColor: baseThemeVariables.border2, - tooltipBorderWidth: '1', - tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;', - }, - - trafficBarEchart: { - gradientFrom: baseThemeVariables.warningLight, - gradientTo: baseThemeVariables.warning, - shadow: baseThemeVariables.warningLight, - shadowBlur: '0', - - axisTextColor: baseThemeVariables.fgText, - axisFontSize: '12', - - tooltipBg: baseThemeVariables.bg, - tooltipBorderColor: baseThemeVariables.border2, - tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;', - tooltipTextColor: baseThemeVariables.fgText, - tooltipFontWeight: 'normal', - }, - - countryOrders: { - countryBorderColor: baseThemeVariables.border4, - countryFillColor: baseThemeVariables.bg4, - countryBorderWidth: '1', - hoveredCountryBorderColor: baseThemeVariables.primary, - hoveredCountryFillColor: baseThemeVariables.primaryLight, - hoveredCountryBorderWidth: '1', - - chartAxisLineColor: baseThemeVariables.border4, - chartAxisTextColor: baseThemeVariables.fg, - chartAxisFontSize: '16', - chartGradientTo: baseThemeVariables.primary, - chartGradientFrom: baseThemeVariables.primaryLight, - chartAxisSplitLine: baseThemeVariables.separator, - chartShadowLineColor: baseThemeVariables.primaryLight, - - chartLineBottomShadowColor: baseThemeVariables.primary, - - chartInnerLineColor: baseThemeVariables.bg2, - }, - - echarts: { - bg: baseThemeVariables.bg, - textColor: baseThemeVariables.fgText, - axisLineColor: baseThemeVariables.fgText, - splitLineColor: baseThemeVariables.separator, - itemHoverShadowColor: 'rgba(0, 0, 0, 0.5)', - tooltipBackgroundColor: baseThemeVariables.primary, - areaOpacity: '0.7', - }, - - chartjs: { - axisLineColor: baseThemeVariables.separator, - textColor: baseThemeVariables.fgText, - }, - - orders: { - tooltipBg: baseThemeVariables.bg, - tooltipLineColor: 'rgba(0, 0, 0, 0)', - tooltipLineWidth: '0', - tooltipBorderColor: baseThemeVariables.border2, - tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;', - tooltipTextColor: baseThemeVariables.fgText, - tooltipFontWeight: 'normal', - tooltipFontSize: '20', - - axisLineColor: baseThemeVariables.border4, - axisFontSize: '16', - axisTextColor: baseThemeVariables.fg, - yAxisSplitLine: baseThemeVariables.separator, - - itemBorderColor: baseThemeVariables.primary, - lineStyle: 'solid', - lineWidth: '4', - - // first line - firstAreaGradFrom: baseThemeVariables.bg3, - firstAreaGradTo: baseThemeVariables.bg3, - firstShadowLineDarkBg: 'rgba(0, 0, 0, 0)', - - // second line - secondLineGradFrom: baseThemeVariables.primary, - secondLineGradTo: baseThemeVariables.primary, - - secondAreaGradFrom: 'rgba(0, 0, 0, 0)', - secondAreaGradTo: 'rgba(0, 0, 0, 0)', - secondShadowLineDarkBg: 'rgba(0, 0, 0, 0)', - - // third line - thirdLineGradFrom: baseThemeVariables.success, - thirdLineGradTo: baseThemeVariables.successLight, - - thirdAreaGradFrom: 'rgba(0, 0, 0, 0)', - thirdAreaGradTo: 'rgba(0, 0, 0, 0)', - thirdShadowLineDarkBg: 'rgba(0, 0, 0, 0)', - }, - - profit: { - bg: baseThemeVariables.bg, - textColor: baseThemeVariables.fgText, - axisLineColor: baseThemeVariables.border4, - splitLineColor: baseThemeVariables.separator, - areaOpacity: '1', - - axisFontSize: '16', - axisTextColor: baseThemeVariables.fg, - - // first bar - firstLineGradFrom: baseThemeVariables.bg3, - firstLineGradTo: baseThemeVariables.bg3, - firstLineShadow: 'rgba(0, 0, 0, 0)', - - // second bar - secondLineGradFrom: baseThemeVariables.primary, - secondLineGradTo: baseThemeVariables.primary, - secondLineShadow: 'rgba(0, 0, 0, 0)', - - // third bar - thirdLineGradFrom: baseThemeVariables.success, - thirdLineGradTo: baseThemeVariables.success, - thirdLineShadow: 'rgba(0, 0, 0, 0)', - }, - - orderProfitLegend: { - firstItem: baseThemeVariables.success, - secondItem: baseThemeVariables.primary, - thirdItem: baseThemeVariables.bg3, - }, - - visitors: { - tooltipBg: baseThemeVariables.bg, - tooltipLineColor: 'rgba(0, 0, 0, 0)', - tooltipLineWidth: '1', - tooltipBorderColor: baseThemeVariables.border2, - tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;', - tooltipTextColor: baseThemeVariables.fgText, - tooltipFontWeight: 'normal', - tooltipFontSize: '20', - - axisLineColor: baseThemeVariables.border4, - axisFontSize: '16', - axisTextColor: baseThemeVariables.fg, - yAxisSplitLine: baseThemeVariables.separator, - - itemBorderColor: baseThemeVariables.primary, - lineStyle: 'dotted', - lineWidth: '6', - lineGradFrom: '#ffffff', - lineGradTo: '#ffffff', - lineShadow: 'rgba(0, 0, 0, 0)', - - areaGradFrom: baseThemeVariables.primary, - areaGradTo: baseThemeVariables.primaryLight, - - innerLineStyle: 'solid', - innerLineWidth: '1', - - innerAreaGradFrom: baseThemeVariables.success, - innerAreaGradTo: baseThemeVariables.success, - }, - - visitorsLegend: { - firstIcon: baseThemeVariables.success, - secondIcon: baseThemeVariables.primary, - }, - - visitorsPie: { - firstPieGradientLeft: baseThemeVariables.success, - firstPieGradientRight: baseThemeVariables.success, - firstPieShadowColor: 'rgba(0, 0, 0, 0)', - firstPieRadius: ['65%', '90%'], - - secondPieGradientLeft: baseThemeVariables.warning, - secondPieGradientRight: baseThemeVariables.warningLight, - secondPieShadowColor: 'rgba(0, 0, 0, 0)', - secondPieRadius: ['63%', '92%'], - shadowOffsetX: '-4', - shadowOffsetY: '-4', - }, - - visitorsPieLegend: { - firstSection: baseThemeVariables.warning, - secondSection: baseThemeVariables.success, - }, - - earningPie: { - radius: ['65%', '100%'], - center: ['50%', '50%'], - - fontSize: '22', - - firstPieGradientLeft: baseThemeVariables.success, - firstPieGradientRight: baseThemeVariables.success, - firstPieShadowColor: 'rgba(0, 0, 0, 0)', - - secondPieGradientLeft: baseThemeVariables.primary, - secondPieGradientRight: baseThemeVariables.primary, - secondPieShadowColor: 'rgba(0, 0, 0, 0)', - - thirdPieGradientLeft: baseThemeVariables.warning, - thirdPieGradientRight: baseThemeVariables.warning, - thirdPieShadowColor: 'rgba(0, 0, 0, 0)', - }, - - earningLine: { - gradFrom: baseThemeVariables.primary, - gradTo: baseThemeVariables.primary, - - tooltipTextColor: baseThemeVariables.fgText, - tooltipFontWeight: 'normal', - tooltipFontSize: '16', - tooltipBg: baseThemeVariables.bg, - tooltipBorderColor: baseThemeVariables.border2, - tooltipBorderWidth: '1', - tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;', - }, - }, -} as NbJSThemeOptions; diff --git a/src/app/@theme/styles/theme.cosmic.ts b/src/app/@theme/styles/theme.cosmic.ts deleted file mode 100644 index 0add1e2da6..0000000000 --- a/src/app/@theme/styles/theme.cosmic.ts +++ /dev/null @@ -1,308 +0,0 @@ -import { NbJSThemeOptions, COSMIC_THEME as baseTheme } from '@nebular/theme'; - -const baseThemeVariables = baseTheme.variables; - -export const COSMIC_THEME = { - name: 'cosmic', - base: 'cosmic', - variables: { - temperature: { - arcFill: [ '#2ec7fe', '#31ffad', '#7bff24', '#fff024', '#f7bd59' ], - arcEmpty: baseThemeVariables.bg2, - thumbBg: '#ffffff', - thumbBorder: '#ffffff', - }, - - solar: { - gradientLeft: baseThemeVariables.primary, - gradientRight: baseThemeVariables.primary, - shadowColor: 'rgba(0, 0, 0, 0)', - secondSeriesFill: baseThemeVariables.bg2, - radius: ['70%', '90%'], - }, - - traffic: { - tooltipBg: baseThemeVariables.bg, - tooltipBorderColor: baseThemeVariables.border2, - tooltipExtraCss: 'box-shadow: 0px 2px 46px 0 rgba(50, 50, 89); border-radius: 10px; padding: 4px 16px;', - tooltipTextColor: baseThemeVariables.fgText, - tooltipFontWeight: 'normal', - - yAxisSplitLine: baseThemeVariables.separator, - - lineBg: baseThemeVariables.border2, - lineShadowBlur: '14', - itemColor: baseThemeVariables.border2, - itemBorderColor: baseThemeVariables.border2, - itemEmphasisBorderColor: baseThemeVariables.primary, - shadowLineDarkBg: baseThemeVariables.border3, - shadowLineShadow: baseThemeVariables.border3, - gradFrom: baseThemeVariables.bg, - gradTo: baseThemeVariables.bg2, - }, - - electricity: { - tooltipBg: baseThemeVariables.bg, - tooltipLineColor: baseThemeVariables.fgText, - tooltipLineWidth: '0', - tooltipBorderColor: baseThemeVariables.border2, - tooltipExtraCss: 'box-shadow: 0px 2px 46px 0 rgba(0, 255, 170, 0.35); border-radius: 10px; padding: 8px 24px;', - tooltipTextColor: baseThemeVariables.fgText, - tooltipFontWeight: 'normal', - - axisLineColor: baseThemeVariables.border3, - xAxisTextColor: baseThemeVariables.fg, - yAxisSplitLine: baseThemeVariables.separator, - - itemBorderColor: baseThemeVariables.border2, - lineStyle: 'dotted', - lineWidth: '6', - lineGradFrom: baseThemeVariables.success, - lineGradTo: baseThemeVariables.warning, - lineShadow: baseThemeVariables.bg4, - - areaGradFrom: baseThemeVariables.bg2, - areaGradTo: baseThemeVariables.bg3, - shadowLineDarkBg: baseThemeVariables.bg3, - }, - - bubbleMap: { - titleColor: baseThemeVariables.fgText, - areaColor: baseThemeVariables.bg4, - areaHoverColor: baseThemeVariables.fgHighlight, - areaBorderColor: baseThemeVariables.border5, - }, - - profitBarAnimationEchart: { - textColor: baseThemeVariables.fgText, - - firstAnimationBarColor: baseThemeVariables.primary, - secondAnimationBarColor: baseThemeVariables.success, - - splitLineStyleOpacity: '1', - splitLineStyleWidth: '1', - splitLineStyleColor: baseThemeVariables.border2, - - tooltipTextColor: baseThemeVariables.fgText, - tooltipFontWeight: 'normal', - tooltipFontSize: '16', - tooltipBg: baseThemeVariables.bg, - tooltipBorderColor: baseThemeVariables.border2, - tooltipBorderWidth: '1', - tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;', - }, - - trafficBarEchart: { - gradientFrom: baseThemeVariables.warningLight, - gradientTo: baseThemeVariables.warning, - shadow: baseThemeVariables.warningLight, - shadowBlur: '5', - - axisTextColor: baseThemeVariables.fgText, - axisFontSize: '12', - - tooltipBg: baseThemeVariables.bg, - tooltipBorderColor: baseThemeVariables.border2, - tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;', - tooltipTextColor: baseThemeVariables.fgText, - tooltipFontWeight: 'normal', - }, - - countryOrders: { - countryBorderColor: baseThemeVariables.border4, - countryFillColor: baseThemeVariables.bg3, - countryBorderWidth: '1', - hoveredCountryBorderColor: baseThemeVariables.primary, - hoveredCountryFillColor: baseThemeVariables.primaryLight, - hoveredCountryBorderWidth: '1', - - chartAxisLineColor: baseThemeVariables.border4, - chartAxisTextColor: baseThemeVariables.fg, - chartAxisFontSize: '16', - chartGradientTo: baseThemeVariables.primary, - chartGradientFrom: baseThemeVariables.primaryLight, - chartAxisSplitLine: baseThemeVariables.separator, - chartShadowLineColor: baseThemeVariables.primaryLight, - - chartLineBottomShadowColor: baseThemeVariables.primary, - - chartInnerLineColor: baseThemeVariables.bg2, - }, - - echarts: { - bg: baseThemeVariables.bg, - textColor: baseThemeVariables.fgText, - axisLineColor: baseThemeVariables.fgText, - splitLineColor: baseThemeVariables.separator, - itemHoverShadowColor: 'rgba(0, 0, 0, 0.5)', - tooltipBackgroundColor: baseThemeVariables.primary, - areaOpacity: '1', - }, - - chartjs: { - axisLineColor: baseThemeVariables.separator, - textColor: baseThemeVariables.fgText, - }, - - orders: { - tooltipBg: baseThemeVariables.bg, - tooltipLineColor: 'rgba(0, 0, 0, 0)', - tooltipLineWidth: '0', - tooltipBorderColor: baseThemeVariables.border2, - tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;', - tooltipTextColor: baseThemeVariables.fgText, - tooltipFontWeight: 'normal', - tooltipFontSize: '20', - - axisLineColor: baseThemeVariables.border4, - axisFontSize: '16', - axisTextColor: baseThemeVariables.fg, - yAxisSplitLine: baseThemeVariables.separator, - - itemBorderColor: baseThemeVariables.primary, - lineStyle: 'solid', - lineWidth: '4', - - // first line - firstAreaGradFrom: baseThemeVariables.bg2, - firstAreaGradTo: baseThemeVariables.bg2, - firstShadowLineDarkBg: baseThemeVariables.bg2, - - // second line - secondLineGradFrom: baseThemeVariables.primary, - secondLineGradTo: baseThemeVariables.primary, - - secondAreaGradFrom: 'rgba(161, 110, 255, 0.8)', - secondAreaGradTo: 'rgba(161, 110, 255, 0.5)', - secondShadowLineDarkBg: baseThemeVariables.primary, - - // third line - thirdLineGradFrom: baseThemeVariables.success, - thirdLineGradTo: baseThemeVariables.successLight, - - thirdAreaGradFrom: 'rgba(0, 214, 143, 0.7)', - thirdAreaGradTo: 'rgba(0, 214, 143, 0.4)', - thirdShadowLineDarkBg: baseThemeVariables.success, - }, - - profit: { - bg: baseThemeVariables.bg, - textColor: baseThemeVariables.fgText, - axisLineColor: baseThemeVariables.border4, - splitLineColor: baseThemeVariables.separator, - areaOpacity: '1', - - axisFontSize: '16', - axisTextColor: baseThemeVariables.fg, - - // first bar - firstLineGradFrom: baseThemeVariables.bg2, - firstLineGradTo: baseThemeVariables.bg2, - firstLineShadow: 'rgba(0, 0, 0, 0)', - - // second bar - secondLineGradFrom: baseThemeVariables.primary, - secondLineGradTo: baseThemeVariables.primary, - secondLineShadow: 'rgba(0, 0, 0, 0)', - - // third bar - thirdLineGradFrom: baseThemeVariables.success, - thirdLineGradTo: baseThemeVariables.successLight, - thirdLineShadow: 'rgba(0, 0, 0, 0)', - }, - - orderProfitLegend: { - firstItem: baseThemeVariables.success, - secondItem: baseThemeVariables.primary, - thirdItem: baseThemeVariables.bg2, - }, - - visitors: { - tooltipBg: baseThemeVariables.bg, - tooltipLineColor: 'rgba(0, 0, 0, 0)', - tooltipLineWidth: '1', - tooltipBorderColor: baseThemeVariables.border2, - tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;', - tooltipTextColor: baseThemeVariables.fgText, - tooltipFontWeight: 'normal', - tooltipFontSize: '20', - - axisLineColor: baseThemeVariables.border4, - axisFontSize: '16', - axisTextColor: baseThemeVariables.fg, - yAxisSplitLine: baseThemeVariables.separator, - - itemBorderColor: baseThemeVariables.primary, - lineStyle: 'dotted', - lineWidth: '6', - lineGradFrom: '#ffffff', - lineGradTo: '#ffffff', - lineShadow: 'rgba(0, 0, 0, 0)', - - areaGradFrom: baseThemeVariables.primary, - areaGradTo: baseThemeVariables.primaryLight, - - innerLineStyle: 'solid', - innerLineWidth: '1', - - innerAreaGradFrom: baseThemeVariables.success, - innerAreaGradTo: baseThemeVariables.success, - }, - - visitorsLegend: { - firstIcon: baseThemeVariables.success, - secondIcon: baseThemeVariables.primary, - }, - - visitorsPie: { - firstPieGradientLeft: baseThemeVariables.success, - firstPieGradientRight: baseThemeVariables.successLight, - firstPieShadowColor: 'rgba(0, 0, 0, 0)', - firstPieRadius: ['70%', '90%'], - - secondPieGradientLeft: baseThemeVariables.warning, - secondPieGradientRight: baseThemeVariables.warningLight, - secondPieShadowColor: 'rgba(0, 0, 0, 0)', - secondPieRadius: ['60%', '95%'], - shadowOffsetX: '0', - shadowOffsetY: '3', - }, - - visitorsPieLegend: { - firstSection: baseThemeVariables.warning, - secondSection: baseThemeVariables.success, - }, - - earningPie: { - radius: ['65%', '100%'], - center: ['50%', '50%'], - - fontSize: '22', - - firstPieGradientLeft: baseThemeVariables.success, - firstPieGradientRight: baseThemeVariables.success, - firstPieShadowColor: 'rgba(0, 0, 0, 0)', - - secondPieGradientLeft: baseThemeVariables.primary, - secondPieGradientRight: baseThemeVariables.primary, - secondPieShadowColor: 'rgba(0, 0, 0, 0)', - - thirdPieGradientLeft: baseThemeVariables.warning, - thirdPieGradientRight: baseThemeVariables.warning, - thirdPieShadowColor: 'rgba(0, 0, 0, 0)', - }, - - earningLine: { - gradFrom: baseThemeVariables.primary, - gradTo: baseThemeVariables.primary, - - tooltipTextColor: baseThemeVariables.fgText, - tooltipFontWeight: 'normal', - tooltipFontSize: '16', - tooltipBg: baseThemeVariables.bg, - tooltipBorderColor: baseThemeVariables.border2, - tooltipBorderWidth: '1', - tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;', - }, - }, -} as NbJSThemeOptions; diff --git a/src/app/@theme/styles/theme.dark.ts b/src/app/@theme/styles/theme.dark.ts deleted file mode 100644 index 8280791ed0..0000000000 --- a/src/app/@theme/styles/theme.dark.ts +++ /dev/null @@ -1,314 +0,0 @@ -import { NbJSThemeOptions, DARK_THEME as baseTheme } from '@nebular/theme'; - -const baseThemeVariables = baseTheme.variables; - -export const DARK_THEME = { - name: 'dark', - base: 'dark', - variables: { - temperature: { - arcFill: [ - baseThemeVariables.primary, - baseThemeVariables.primary, - baseThemeVariables.primary, - baseThemeVariables.primary, - baseThemeVariables.primary, - ], - arcEmpty: baseThemeVariables.bg2, - thumbBg: baseThemeVariables.bg2, - thumbBorder: baseThemeVariables.primary, - }, - - solar: { - gradientLeft: baseThemeVariables.primary, - gradientRight: baseThemeVariables.primary, - shadowColor: 'rgba(0, 0, 0, 0)', - secondSeriesFill: baseThemeVariables.bg2, - radius: ['80%', '90%'], - }, - - traffic: { - tooltipBg: baseThemeVariables.bg, - tooltipBorderColor: baseThemeVariables.border2, - tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;', - tooltipTextColor: baseThemeVariables.fgText, - tooltipFontWeight: 'normal', - - yAxisSplitLine: baseThemeVariables.separator, - - lineBg: baseThemeVariables.border4, - lineShadowBlur: '1', - itemColor: baseThemeVariables.border4, - itemBorderColor: baseThemeVariables.border4, - itemEmphasisBorderColor: baseThemeVariables.primary, - shadowLineDarkBg: 'rgba(0, 0, 0, 0)', - shadowLineShadow: 'rgba(0, 0, 0, 0)', - gradFrom: baseThemeVariables.bg2, - gradTo: baseThemeVariables.bg2, - }, - - electricity: { - tooltipBg: baseThemeVariables.bg, - tooltipLineColor: baseThemeVariables.fgText, - tooltipLineWidth: '0', - tooltipBorderColor: baseThemeVariables.border2, - tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;', - tooltipTextColor: baseThemeVariables.fgText, - tooltipFontWeight: 'normal', - - axisLineColor: baseThemeVariables.border3, - xAxisTextColor: baseThemeVariables.fg, - yAxisSplitLine: baseThemeVariables.separator, - - itemBorderColor: baseThemeVariables.primary, - lineStyle: 'solid', - lineWidth: '4', - lineGradFrom: baseThemeVariables.primary, - lineGradTo: baseThemeVariables.primary, - lineShadow: 'rgba(0, 0, 0, 0)', - - areaGradFrom: baseThemeVariables.bg2, - areaGradTo: baseThemeVariables.bg2, - shadowLineDarkBg: 'rgba(0, 0, 0, 0)', - }, - - bubbleMap: { - titleColor: baseThemeVariables.fgText, - areaColor: baseThemeVariables.bg4, - areaHoverColor: baseThemeVariables.fgHighlight, - areaBorderColor: baseThemeVariables.border5, - }, - - profitBarAnimationEchart: { - textColor: baseThemeVariables.fgText, - - firstAnimationBarColor: baseThemeVariables.primary, - secondAnimationBarColor: baseThemeVariables.success, - - splitLineStyleOpacity: '1', - splitLineStyleWidth: '1', - splitLineStyleColor: baseThemeVariables.separator, - - tooltipTextColor: baseThemeVariables.fgText, - tooltipFontWeight: 'normal', - tooltipFontSize: '16', - tooltipBg: baseThemeVariables.bg, - tooltipBorderColor: baseThemeVariables.border2, - tooltipBorderWidth: '1', - tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;', - }, - - trafficBarEchart: { - gradientFrom: baseThemeVariables.warningLight, - gradientTo: baseThemeVariables.warning, - shadow: baseThemeVariables.warningLight, - shadowBlur: '0', - - axisTextColor: baseThemeVariables.fgText, - axisFontSize: '12', - - tooltipBg: baseThemeVariables.bg, - tooltipBorderColor: baseThemeVariables.border2, - tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;', - tooltipTextColor: baseThemeVariables.fgText, - tooltipFontWeight: 'normal', - }, - - countryOrders: { - countryBorderColor: baseThemeVariables.border4, - countryFillColor: baseThemeVariables.bg3, - countryBorderWidth: '1', - hoveredCountryBorderColor: baseThemeVariables.primary, - hoveredCountryFillColor: baseThemeVariables.primaryLight, - hoveredCountryBorderWidth: '1', - - chartAxisLineColor: baseThemeVariables.border4, - chartAxisTextColor: baseThemeVariables.fg, - chartAxisFontSize: '16', - chartGradientTo: baseThemeVariables.primary, - chartGradientFrom: baseThemeVariables.primaryLight, - chartAxisSplitLine: baseThemeVariables.separator, - chartShadowLineColor: baseThemeVariables.primaryLight, - - chartLineBottomShadowColor: baseThemeVariables.primary, - - chartInnerLineColor: baseThemeVariables.bg2, - }, - - echarts: { - bg: baseThemeVariables.bg, - textColor: baseThemeVariables.fgText, - axisLineColor: baseThemeVariables.fgText, - splitLineColor: baseThemeVariables.separator, - itemHoverShadowColor: 'rgba(0, 0, 0, 0.5)', - tooltipBackgroundColor: baseThemeVariables.primary, - areaOpacity: '0.7', - }, - - chartjs: { - axisLineColor: baseThemeVariables.separator, - textColor: baseThemeVariables.fgText, - }, - - orders: { - tooltipBg: baseThemeVariables.bg, - tooltipLineColor: 'rgba(0, 0, 0, 0)', - tooltipLineWidth: '0', - tooltipBorderColor: baseThemeVariables.border2, - tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;', - tooltipTextColor: baseThemeVariables.fgText, - tooltipFontWeight: 'normal', - tooltipFontSize: '20', - - axisLineColor: baseThemeVariables.border4, - axisFontSize: '16', - axisTextColor: baseThemeVariables.fg, - yAxisSplitLine: baseThemeVariables.separator, - - itemBorderColor: baseThemeVariables.primary, - lineStyle: 'solid', - lineWidth: '4', - - // first line - firstAreaGradFrom: baseThemeVariables.bg3, - firstAreaGradTo: baseThemeVariables.bg3, - firstShadowLineDarkBg: 'rgba(0, 0, 0, 0)', - - // second line - secondLineGradFrom: baseThemeVariables.primary, - secondLineGradTo: baseThemeVariables.primary, - - secondAreaGradFrom: 'rgba(51, 102, 255, 0.2)', - secondAreaGradTo: 'rgba(51, 102, 255, 0)', - secondShadowLineDarkBg: 'rgba(0, 0, 0, 0)', - - // third line - thirdLineGradFrom: baseThemeVariables.success, - thirdLineGradTo: baseThemeVariables.successLight, - - thirdAreaGradFrom: 'rgba(0, 214, 143, 0.2)', - thirdAreaGradTo: 'rgba(0, 214, 143, 0)', - thirdShadowLineDarkBg: 'rgba(0, 0, 0, 0)', - }, - - profit: { - bg: baseThemeVariables.bg, - textColor: baseThemeVariables.fgText, - axisLineColor: baseThemeVariables.border4, - splitLineColor: baseThemeVariables.separator, - areaOpacity: '1', - - axisFontSize: '16', - axisTextColor: baseThemeVariables.fg, - - // first bar - firstLineGradFrom: baseThemeVariables.bg3, - firstLineGradTo: baseThemeVariables.bg3, - firstLineShadow: 'rgba(0, 0, 0, 0)', - - // second bar - secondLineGradFrom: baseThemeVariables.primary, - secondLineGradTo: baseThemeVariables.primary, - secondLineShadow: 'rgba(0, 0, 0, 0)', - - // third bar - thirdLineGradFrom: baseThemeVariables.success, - thirdLineGradTo: baseThemeVariables.successLight, - thirdLineShadow: 'rgba(0, 0, 0, 0)', - }, - - orderProfitLegend: { - firstItem: baseThemeVariables.success, - secondItem: baseThemeVariables.primary, - thirdItem: baseThemeVariables.bg3, - }, - - visitors: { - tooltipBg: baseThemeVariables.bg, - tooltipLineColor: 'rgba(0, 0, 0, 0)', - tooltipLineWidth: '0', - tooltipBorderColor: baseThemeVariables.border2, - tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;', - tooltipTextColor: baseThemeVariables.fgText, - tooltipFontWeight: 'normal', - tooltipFontSize: '20', - - axisLineColor: baseThemeVariables.border4, - axisFontSize: '16', - axisTextColor: baseThemeVariables.fg, - yAxisSplitLine: baseThemeVariables.separator, - - itemBorderColor: baseThemeVariables.primary, - lineStyle: 'dotted', - lineWidth: '6', - lineGradFrom: '#ffffff', - lineGradTo: '#ffffff', - lineShadow: 'rgba(0, 0, 0, 0)', - - areaGradFrom: baseThemeVariables.primary, - areaGradTo: baseThemeVariables.primaryLight, - - innerLineStyle: 'solid', - innerLineWidth: '1', - - innerAreaGradFrom: baseThemeVariables.success, - innerAreaGradTo: baseThemeVariables.success, - }, - - visitorsLegend: { - firstIcon: baseThemeVariables.success, - secondIcon: baseThemeVariables.primary, - }, - - visitorsPie: { - firstPieGradientLeft: baseThemeVariables.success, - firstPieGradientRight: baseThemeVariables.success, - firstPieShadowColor: 'rgba(0, 0, 0, 0)', - firstPieRadius: ['70%', '90%'], - - secondPieGradientLeft: baseThemeVariables.warning, - secondPieGradientRight: baseThemeVariables.warningLight, - secondPieShadowColor: 'rgba(0, 0, 0, 0)', - secondPieRadius: ['60%', '97%'], - shadowOffsetX: '0', - shadowOffsetY: '0', - }, - - visitorsPieLegend: { - firstSection: baseThemeVariables.warning, - secondSection: baseThemeVariables.success, - }, - - earningPie: { - radius: ['65%', '100%'], - center: ['50%', '50%'], - - fontSize: '22', - - firstPieGradientLeft: baseThemeVariables.success, - firstPieGradientRight: baseThemeVariables.success, - firstPieShadowColor: 'rgba(0, 0, 0, 0)', - - secondPieGradientLeft: baseThemeVariables.primary, - secondPieGradientRight: baseThemeVariables.primary, - secondPieShadowColor: 'rgba(0, 0, 0, 0)', - - thirdPieGradientLeft: baseThemeVariables.warning, - thirdPieGradientRight: baseThemeVariables.warning, - thirdPieShadowColor: 'rgba(0, 0, 0, 0)', - }, - - earningLine: { - gradFrom: baseThemeVariables.primary, - gradTo: baseThemeVariables.primary, - - tooltipTextColor: baseThemeVariables.fgText, - tooltipFontWeight: 'normal', - tooltipFontSize: '16', - tooltipBg: baseThemeVariables.bg, - tooltipBorderColor: baseThemeVariables.border2, - tooltipBorderWidth: '1', - tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;', - }, - }, -} as NbJSThemeOptions; diff --git a/src/app/@theme/styles/theme.default.ts b/src/app/@theme/styles/theme.default.ts deleted file mode 100644 index 30e5d9e5ed..0000000000 --- a/src/app/@theme/styles/theme.default.ts +++ /dev/null @@ -1,314 +0,0 @@ -import { NbJSThemeOptions, DEFAULT_THEME as baseTheme } from '@nebular/theme'; - -const baseThemeVariables = baseTheme.variables; - -export const DEFAULT_THEME = { - name: 'default', - base: 'default', - variables: { - temperature: { - arcFill: [ - baseThemeVariables.primary, - baseThemeVariables.primary, - baseThemeVariables.primary, - baseThemeVariables.primary, - baseThemeVariables.primary, - ], - arcEmpty: baseThemeVariables.bg2, - thumbBg: baseThemeVariables.bg2, - thumbBorder: baseThemeVariables.primary, - }, - - solar: { - gradientLeft: baseThemeVariables.primary, - gradientRight: baseThemeVariables.primary, - shadowColor: 'rgba(0, 0, 0, 0)', - secondSeriesFill: baseThemeVariables.bg2, - radius: ['80%', '90%'], - }, - - traffic: { - tooltipBg: baseThemeVariables.bg, - tooltipBorderColor: baseThemeVariables.border2, - tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;', - tooltipTextColor: baseThemeVariables.fgText, - tooltipFontWeight: 'normal', - - yAxisSplitLine: baseThemeVariables.separator, - - lineBg: baseThemeVariables.border4, - lineShadowBlur: '1', - itemColor: baseThemeVariables.border4, - itemBorderColor: baseThemeVariables.border4, - itemEmphasisBorderColor: baseThemeVariables.primary, - shadowLineDarkBg: 'rgba(0, 0, 0, 0)', - shadowLineShadow: 'rgba(0, 0, 0, 0)', - gradFrom: baseThemeVariables.bg2, - gradTo: baseThemeVariables.bg2, - }, - - electricity: { - tooltipBg: baseThemeVariables.bg, - tooltipLineColor: baseThemeVariables.fgText, - tooltipLineWidth: '0', - tooltipBorderColor: baseThemeVariables.border2, - tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;', - tooltipTextColor: baseThemeVariables.fgText, - tooltipFontWeight: 'normal', - - axisLineColor: baseThemeVariables.border3, - xAxisTextColor: baseThemeVariables.fg, - yAxisSplitLine: baseThemeVariables.separator, - - itemBorderColor: baseThemeVariables.primary, - lineStyle: 'solid', - lineWidth: '4', - lineGradFrom: baseThemeVariables.primary, - lineGradTo: baseThemeVariables.primary, - lineShadow: 'rgba(0, 0, 0, 0)', - - areaGradFrom: baseThemeVariables.bg2, - areaGradTo: baseThemeVariables.bg2, - shadowLineDarkBg: 'rgba(0, 0, 0, 0)', - }, - - bubbleMap: { - titleColor: baseThemeVariables.fgText, - areaColor: baseThemeVariables.bg4, - areaHoverColor: baseThemeVariables.fgHighlight, - areaBorderColor: baseThemeVariables.border5, - }, - - profitBarAnimationEchart: { - textColor: baseThemeVariables.fgText, - - firstAnimationBarColor: baseThemeVariables.primary, - secondAnimationBarColor: baseThemeVariables.success, - - splitLineStyleOpacity: '1', - splitLineStyleWidth: '1', - splitLineStyleColor: baseThemeVariables.separator, - - tooltipTextColor: baseThemeVariables.fgText, - tooltipFontWeight: 'normal', - tooltipFontSize: '16', - tooltipBg: baseThemeVariables.bg, - tooltipBorderColor: baseThemeVariables.border2, - tooltipBorderWidth: '1', - tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;', - }, - - trafficBarEchart: { - gradientFrom: baseThemeVariables.warningLight, - gradientTo: baseThemeVariables.warning, - shadow: baseThemeVariables.warningLight, - shadowBlur: '0', - - axisTextColor: baseThemeVariables.fgText, - axisFontSize: '12', - - tooltipBg: baseThemeVariables.bg, - tooltipBorderColor: baseThemeVariables.border2, - tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;', - tooltipTextColor: baseThemeVariables.fgText, - tooltipFontWeight: 'normal', - }, - - countryOrders: { - countryBorderColor: baseThemeVariables.border4, - countryFillColor: baseThemeVariables.bg3, - countryBorderWidth: '1', - hoveredCountryBorderColor: baseThemeVariables.primary, - hoveredCountryFillColor: baseThemeVariables.primaryLight, - hoveredCountryBorderWidth: '1', - - chartAxisLineColor: baseThemeVariables.border4, - chartAxisTextColor: baseThemeVariables.fg, - chartAxisFontSize: '16', - chartGradientTo: baseThemeVariables.primary, - chartGradientFrom: baseThemeVariables.primaryLight, - chartAxisSplitLine: baseThemeVariables.separator, - chartShadowLineColor: baseThemeVariables.primaryLight, - - chartLineBottomShadowColor: baseThemeVariables.primary, - - chartInnerLineColor: baseThemeVariables.bg2, - }, - - echarts: { - bg: baseThemeVariables.bg, - textColor: baseThemeVariables.fgText, - axisLineColor: baseThemeVariables.fgText, - splitLineColor: baseThemeVariables.separator, - itemHoverShadowColor: 'rgba(0, 0, 0, 0.5)', - tooltipBackgroundColor: baseThemeVariables.primary, - areaOpacity: '0.7', - }, - - chartjs: { - axisLineColor: baseThemeVariables.separator, - textColor: baseThemeVariables.fgText, - }, - - orders: { - tooltipBg: baseThemeVariables.bg, - tooltipLineColor: 'rgba(0, 0, 0, 0)', - tooltipLineWidth: '0', - tooltipBorderColor: baseThemeVariables.border2, - tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;', - tooltipTextColor: baseThemeVariables.fgText, - tooltipFontWeight: 'normal', - tooltipFontSize: '20', - - axisLineColor: baseThemeVariables.border4, - axisFontSize: '16', - axisTextColor: baseThemeVariables.fg, - yAxisSplitLine: baseThemeVariables.separator, - - itemBorderColor: baseThemeVariables.primary, - lineStyle: 'solid', - lineWidth: '4', - - // first line - firstAreaGradFrom: baseThemeVariables.bg3, - firstAreaGradTo: baseThemeVariables.bg3, - firstShadowLineDarkBg: 'rgba(0, 0, 0, 0)', - - // second line - secondLineGradFrom: baseThemeVariables.primary, - secondLineGradTo: baseThemeVariables.primary, - - secondAreaGradFrom: 'rgba(51, 102, 255, 0.2)', - secondAreaGradTo: 'rgba(51, 102, 255, 0)', - secondShadowLineDarkBg: 'rgba(0, 0, 0, 0)', - - // third line - thirdLineGradFrom: baseThemeVariables.success, - thirdLineGradTo: baseThemeVariables.successLight, - - thirdAreaGradFrom: 'rgba(0, 214, 143, 0.2)', - thirdAreaGradTo: 'rgba(0, 214, 143, 0)', - thirdShadowLineDarkBg: 'rgba(0, 0, 0, 0)', - }, - - profit: { - bg: baseThemeVariables.bg, - textColor: baseThemeVariables.fgText, - axisLineColor: baseThemeVariables.border4, - splitLineColor: baseThemeVariables.separator, - areaOpacity: '1', - - axisFontSize: '16', - axisTextColor: baseThemeVariables.fg, - - // first bar - firstLineGradFrom: baseThemeVariables.bg3, - firstLineGradTo: baseThemeVariables.bg3, - firstLineShadow: 'rgba(0, 0, 0, 0)', - - // second bar - secondLineGradFrom: baseThemeVariables.primary, - secondLineGradTo: baseThemeVariables.primary, - secondLineShadow: 'rgba(0, 0, 0, 0)', - - // third bar - thirdLineGradFrom: baseThemeVariables.success, - thirdLineGradTo: baseThemeVariables.successLight, - thirdLineShadow: 'rgba(0, 0, 0, 0)', - }, - - orderProfitLegend: { - firstItem: baseThemeVariables.success, - secondItem: baseThemeVariables.primary, - thirdItem: baseThemeVariables.bg3, - }, - - visitors: { - tooltipBg: baseThemeVariables.bg, - tooltipLineColor: 'rgba(0, 0, 0, 0)', - tooltipLineWidth: '1', - tooltipBorderColor: baseThemeVariables.border2, - tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;', - tooltipTextColor: baseThemeVariables.fgText, - tooltipFontWeight: 'normal', - tooltipFontSize: '20', - - axisLineColor: baseThemeVariables.border4, - axisFontSize: '16', - axisTextColor: baseThemeVariables.fg, - yAxisSplitLine: baseThemeVariables.separator, - - itemBorderColor: baseThemeVariables.primary, - lineStyle: 'dotted', - lineWidth: '6', - lineGradFrom: '#ffffff', - lineGradTo: '#ffffff', - lineShadow: 'rgba(0, 0, 0, 0)', - - areaGradFrom: baseThemeVariables.primary, - areaGradTo: baseThemeVariables.primaryLight, - - innerLineStyle: 'solid', - innerLineWidth: '1', - - innerAreaGradFrom: baseThemeVariables.success, - innerAreaGradTo: baseThemeVariables.success, - }, - - visitorsLegend: { - firstIcon: baseThemeVariables.success, - secondIcon: baseThemeVariables.primary, - }, - - visitorsPie: { - firstPieGradientLeft: baseThemeVariables.success, - firstPieGradientRight: baseThemeVariables.success, - firstPieShadowColor: 'rgba(0, 0, 0, 0)', - firstPieRadius: ['70%', '90%'], - - secondPieGradientLeft: baseThemeVariables.warning, - secondPieGradientRight: baseThemeVariables.warningLight, - secondPieShadowColor: 'rgba(0, 0, 0, 0)', - secondPieRadius: ['60%', '97%'], - shadowOffsetX: '0', - shadowOffsetY: '0', - }, - - visitorsPieLegend: { - firstSection: baseThemeVariables.warning, - secondSection: baseThemeVariables.success, - }, - - earningPie: { - radius: ['65%', '100%'], - center: ['50%', '50%'], - - fontSize: '22', - - firstPieGradientLeft: baseThemeVariables.success, - firstPieGradientRight: baseThemeVariables.success, - firstPieShadowColor: 'rgba(0, 0, 0, 0)', - - secondPieGradientLeft: baseThemeVariables.primary, - secondPieGradientRight: baseThemeVariables.primary, - secondPieShadowColor: 'rgba(0, 0, 0, 0)', - - thirdPieGradientLeft: baseThemeVariables.warning, - thirdPieGradientRight: baseThemeVariables.warning, - thirdPieShadowColor: 'rgba(0, 0, 0, 0)', - }, - - earningLine: { - gradFrom: baseThemeVariables.primary, - gradTo: baseThemeVariables.primary, - - tooltipTextColor: baseThemeVariables.fgText, - tooltipFontWeight: 'normal', - tooltipFontSize: '16', - tooltipBg: baseThemeVariables.bg, - tooltipBorderColor: baseThemeVariables.border2, - tooltipBorderWidth: '1', - tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;', - }, - }, -} as NbJSThemeOptions; diff --git a/src/app/@theme/styles/material/theme.material-dark.ts b/src/app/@theme/styles/theme.material-dark.ts similarity index 99% rename from src/app/@theme/styles/material/theme.material-dark.ts rename to src/app/@theme/styles/theme.material-dark.ts index 28fad118b9..680174e570 100644 --- a/src/app/@theme/styles/material/theme.material-dark.ts +++ b/src/app/@theme/styles/theme.material-dark.ts @@ -10,7 +10,7 @@ const palette = { export const baseTheme: NbJSThemeOptions = { name: 'material-dark', - base: 'dark', + base: 'default', variables: { fontMain: 'Roboto, sans-serif', fontSecondary: 'Roboto, sans-serif', diff --git a/src/app/@theme/styles/material/theme.material-light.ts b/src/app/@theme/styles/theme.material-light.ts similarity index 100% rename from src/app/@theme/styles/material/theme.material-light.ts rename to src/app/@theme/styles/theme.material-light.ts diff --git a/src/app/@theme/styles/themes.scss b/src/app/@theme/styles/themes.scss index 0be0781578..75e2f81d70 100644 --- a/src/app/@theme/styles/themes.scss +++ b/src/app/@theme/styles/themes.scss @@ -2,132 +2,5 @@ @import '~@nebular/theme/styles/theming'; // @nebular out of the box themes @import '~@nebular/theme/styles/themes'; -// material themes -@import './material/material-dark'; -@import './material/material-light'; - -$nb-themes: nb-register-theme(( - layout-padding-top: 2.25rem, - - menu-item-icon-margin: 0 0.5rem 0 0, - - card-height-tiny: 13.5rem, - card-height-small: 21.1875rem, - card-height-medium: 28.875rem, - card-height-large: 36.5625rem, - card-height-giant: 44.25rem, - card-margin-bottom: 1.875rem, - card-header-with-select-padding-top: 0.5rem, - card-header-with-select-padding-bottom: 0.5rem, - - select-min-width: 6rem, - - slide-out-background: #f7f9fc, - slide-out-shadow-color: 0 4px 14px 0 #8f9bb3, - slide-out-shadow-color-rtl: 0 4px 14px 0 #8f9bb3, -), default, default); - -$nb-themes: nb-register-theme(( - layout-padding-top: 2.25rem, - - menu-item-icon-margin: 0 0.5rem 0 0, - - card-height-tiny: 13.5rem, - card-height-small: 21.1875rem, - card-height-medium: 28.875rem, - card-height-large: 36.5625rem, - card-height-giant: 44.25rem, - card-margin-bottom: 1.875rem, - card-header-with-select-padding-top: 0.5rem, - card-header-with-select-padding-bottom: 0.5rem, - - select-min-width: 6rem, - - slide-out-background: #252547, - slide-out-shadow-color: 2px 0 3px #29157a, - slide-out-shadow-color-rtl: -2px 0 3px #29157a, -), cosmic, cosmic); - -$nb-themes: nb-register-theme(( - layout-padding-top: 2.25rem, - - menu-item-icon-margin: 0 0.5rem 0 0, - - card-height-tiny: 13.5rem, - card-height-small: 21.1875rem, - card-height-medium: 28.875rem, - card-height-large: 36.5625rem, - card-height-giant: 44.25rem, - card-margin-bottom: 1.875rem, - card-header-with-select-padding-top: 0.5rem, - card-header-with-select-padding-bottom: 0.5rem, - - select-min-width: 6rem, - - slide-out-background: linear-gradient(270deg, #edf1f7 0%, #e4e9f2 100%), - slide-out-shadow-color: 0 4px 14px 0 #8f9bb3, - slide-out-shadow-color-rtl: 0 4px 14px 0 #8f9bb3, -), corporate, corporate); - -$nb-themes: nb-register-theme(( - layout-padding-top: 2.25rem, - - menu-item-icon-margin: 0 0.5rem 0 0, - - card-height-tiny: 13.5rem, - card-height-small: 21.1875rem, - card-height-medium: 28.875rem, - card-height-large: 36.5625rem, - card-height-giant: 44.25rem, - card-margin-bottom: 1.875rem, - card-header-with-select-padding-top: 0.5rem, - card-header-with-select-padding-bottom: 0.5rem, - - select-min-width: 6rem, - - slide-out-background: linear-gradient(270deg, #222b45 0%, #151a30 100%), - slide-out-shadow-color: 0 4px 14px 0 #8f9bb3, - slide-out-shadow-color-rtl: 0 4px 14px 0 #8f9bb3, -), dark, dark); - -$nb-themes: nb-register-theme(( - layout-padding-top: 2.25rem, - - menu-item-icon-margin: 0 0.5rem 0 0, - - card-height-tiny: 13.5rem, - card-height-small: 21.1875rem, - card-height-medium: 28.875rem, - card-height-large: 36.5625rem, - card-height-giant: 44.25rem, - card-margin-bottom: 1.875rem, - card-header-with-select-padding-top: 0.5rem, - card-header-with-select-padding-bottom: 0.5rem, - - select-min-width: 6rem, - - slide-out-background: linear-gradient(270deg, #e0e0e0 0%, #ebebeb 100%), - slide-out-shadow-color: 0 4px 14px 0 #ebebeb, - slide-out-shadow-color-rtl: 0 4px 14px 0 #ebebeb, -), material-light, material-light); - -$nb-themes: nb-register-theme(( - layout-padding-top: 2.25rem, - - menu-item-icon-margin: 0 0.5rem 0 0, - - card-height-tiny: 13.5rem, - card-height-small: 21.1875rem, - card-height-medium: 28.875rem, - card-height-large: 36.5625rem, - card-height-giant: 44.25rem, - card-margin-bottom: 1.875rem, - card-header-with-select-padding-top: 0.5rem, - card-header-with-select-padding-bottom: 0.5rem, - - select-min-width: 6rem, - - slide-out-background: linear-gradient(270deg, #1f1f1f 0%, #292929 100%), - slide-out-shadow-color: 0 4px 14px 0 #292929, - slide-out-shadow-color-rtl: 0 4px 14px 0 #292929, -), material-dark, material-dark); +@import './material-dark'; +@import './material-light'; diff --git a/src/app/@theme/theme.module.ts b/src/app/@theme/theme.module.ts index f573109874..89c3a467a9 100644 --- a/src/app/@theme/theme.module.ts +++ b/src/app/@theme/theme.module.ts @@ -35,12 +35,8 @@ import { ThreeColumnsLayoutComponent, TwoColumnsLayoutComponent, } from './layouts'; -import { DEFAULT_THEME } from './styles/theme.default'; -import { COSMIC_THEME } from './styles/theme.cosmic'; -import { CORPORATE_THEME } from './styles/theme.corporate'; -import { DARK_THEME } from './styles/theme.dark'; -import { MATERIAL_LIGHT_THEME } from './styles/material/theme.material-light'; -import { MATERIAL_DARK_THEME } from './styles/material/theme.material-dark'; +import { MATERIAL_LIGHT_THEME } from './styles/theme.material-light'; +import { MATERIAL_DARK_THEME } from './styles/theme.material-dark'; const NB_MODULES = [ NbLayoutModule, @@ -84,10 +80,8 @@ export class ThemeModule { ngModule: ThemeModule, providers: [ ...NbThemeModule.forRoot( - { - name: 'default', - }, - [ DEFAULT_THEME, COSMIC_THEME, CORPORATE_THEME, DARK_THEME, MATERIAL_LIGHT_THEME, MATERIAL_DARK_THEME ], + { name: 'material-light' }, + [MATERIAL_LIGHT_THEME, MATERIAL_DARK_THEME], ).providers, ], }; diff --git a/src/app/pages/dashboard/dashboard.component.ts b/src/app/pages/dashboard/dashboard.component.ts index 083d3bdd09..0809bebc68 100644 --- a/src/app/pages/dashboard/dashboard.component.ts +++ b/src/app/pages/dashboard/dashboard.component.ts @@ -50,34 +50,9 @@ export class DashboardComponent implements OnDestroy { ]; statusCardsByThemes: { - default: CardSettings[]; - cosmic: CardSettings[]; - corporate: CardSettings[]; - dark: CardSettings[]; 'material-dark': CardSettings[]; 'material-light': CardSettings[]; } = { - default: this.commonStatusCardsSet, - cosmic: this.commonStatusCardsSet, - corporate: [ - { - ...this.lightCard, - type: 'warning', - }, - { - ...this.rollerShadesCard, - type: 'primary', - }, - { - ...this.wirelessAudioCard, - type: 'danger', - }, - { - ...this.coffeeMakerCard, - type: 'info', - }, - ], - dark: this.commonStatusCardsSet, 'material-dark': this.commonStatusCardsSet, 'material-light': this.commonStatusCardsSet, }; diff --git a/src/app/pages/dashboard/rooms/room-selector/room-selector.component.ts b/src/app/pages/dashboard/rooms/room-selector/room-selector.component.ts index 7e0639a78c..62a35f1888 100644 --- a/src/app/pages/dashboard/rooms/room-selector/room-selector.component.ts +++ b/src/app/pages/dashboard/rooms/room-selector/room-selector.component.ts @@ -1,19 +1,12 @@ -import { Component, EventEmitter, HostBinding, OnDestroy, OnInit, Output } from '@angular/core'; +import { Component, EventEmitter, Output } from '@angular/core'; import { Location, LocationStrategy } from '@angular/common'; -import { NbThemeService } from '@nebular/theme'; -import { map, takeUntil } from 'rxjs/operators'; -import { Subject } from 'rxjs'; @Component({ selector: 'ngx-room-selector', templateUrl: './room-selector.component.html', styleUrls: ['./room-selector.component.scss'], }) -export class RoomSelectorComponent implements OnInit, OnDestroy { - - private destroy$ = new Subject(); - private hideGrid: boolean; - +export class RoomSelectorComponent { @Output() select: EventEmitter = new EventEmitter(); selectedRoom = null; @@ -66,35 +59,10 @@ export class RoomSelectorComponent implements OnInit, OnDestroy { ], }; - @HostBinding('style.background') - get background(): 'none' | null { - return this.hideGrid ? 'none' : null; - } - - constructor( - private location: Location, - private locationStrategy: LocationStrategy, - private themeService: NbThemeService, - ) { + constructor(private location: Location, private locationStrategy: LocationStrategy) { this.selectRoom('2'); } - ngOnInit() { - this.hideGrid = this.themeService.currentTheme === 'corporate'; - - this.themeService.onThemeChange() - .pipe( - map(({ name }) => name === 'corporate'), - takeUntil(this.destroy$), - ) - .subscribe((hideGrid: boolean) => this.hideGrid = hideGrid); - } - - ngOnDestroy() { - this.destroy$.next(); - this.destroy$.complete(); - } - private sortRooms() { this.sortedRooms = this.roomSvg.rooms.slice(0).sort((a, b) => { if (a.id === this.selectedRoom) { diff --git a/src/app/pages/dashboard/rooms/rooms.component.ts b/src/app/pages/dashboard/rooms/rooms.component.ts index 8235f4d5bf..a242f51db5 100644 --- a/src/app/pages/dashboard/rooms/rooms.component.ts +++ b/src/app/pages/dashboard/rooms/rooms.component.ts @@ -40,7 +40,7 @@ export class RoomsComponent implements OnDestroy { }); this.themeChangeSubscription = this.themeService.onThemeChange() - .pipe(map(({ name }) => name === 'cosmic' || name === 'dark')) + .pipe(map(({ name }) => name === 'material-dark')) .subscribe((isDark: boolean) => this.isDarkTheme = isDark); } diff --git a/src/app/pages/forms/buttons/buttons.component.html b/src/app/pages/forms/buttons/buttons.component.html index a4673f5dba..c1dd2df993 100644 --- a/src/app/pages/forms/buttons/buttons.component.html +++ b/src/app/pages/forms/buttons/buttons.component.html @@ -120,7 +120,7 @@ - + diff --git a/src/app/pages/forms/buttons/buttons.component.ts b/src/app/pages/forms/buttons/buttons.component.ts index 52e8506b3b..2108b9f29c 100644 --- a/src/app/pages/forms/buttons/buttons.component.ts +++ b/src/app/pages/forms/buttons/buttons.component.ts @@ -1,7 +1,5 @@ import { Component } from '@angular/core'; -import { NbComponentShape, NbComponentSize, NbComponentStatus, NbThemeService } from '@nebular/theme'; -import { Observable } from 'rxjs'; -import { map } from 'rxjs/operators'; +import { NbComponentShape, NbComponentSize, NbComponentStatus } from '@nebular/theme'; @Component({ selector: 'ngx-buttons', @@ -9,18 +7,7 @@ import { map } from 'rxjs/operators'; templateUrl: './buttons.component.html', }) export class ButtonsComponent { - public constructor(private readonly themeService: NbThemeService) { - this.materialTheme$ = this.themeService.onThemeChange() - .pipe(map(theme => { - const themeName: string = theme?.name || ''; - return themeName.startsWith('material'); - })); - } - - public readonly materialTheme$: Observable; - public readonly statuses: NbComponentStatus[] = [ 'primary', 'success', 'info', 'warning', 'danger' ]; public readonly shapes: NbComponentShape[] = [ 'rectangle', 'semi-round', 'round' ]; public readonly sizes: NbComponentSize[] = [ 'tiny', 'small', 'medium', 'large', 'giant' ]; - } diff --git a/src/app/pages/forms/form-inputs/form-inputs.component.html b/src/app/pages/forms/form-inputs/form-inputs.component.html index b0adf3a23d..20684dda04 100644 --- a/src/app/pages/forms/form-inputs/form-inputs.component.html +++ b/src/app/pages/forms/form-inputs/form-inputs.component.html @@ -10,10 +10,6 @@ - - - - @@ -87,7 +83,7 @@ -
+
diff --git a/src/app/pages/forms/form-inputs/form-inputs.component.ts b/src/app/pages/forms/form-inputs/form-inputs.component.ts index 5ede35ff41..3b9c5161fb 100644 --- a/src/app/pages/forms/form-inputs/form-inputs.component.ts +++ b/src/app/pages/forms/form-inputs/form-inputs.component.ts @@ -1,7 +1,4 @@ import { Component } from '@angular/core'; -import { NbThemeService } from '@nebular/theme'; -import { Observable } from 'rxjs'; -import { map } from 'rxjs/operators'; @Component({ selector: 'ngx-form-inputs', @@ -9,16 +6,6 @@ import { map } from 'rxjs/operators'; templateUrl: './form-inputs.component.html', }) export class FormInputsComponent { - public constructor(private readonly themeService: NbThemeService) { - this.materialTheme$ = this.themeService.onThemeChange() - .pipe(map(theme => { - const themeName: string = theme?.name || ''; - return themeName.startsWith('material'); - })); - } - - public readonly materialTheme$: Observable; - public starRate: number = 2; public heartRate: number = 4; public radioGroupValue: string = 'This is value 2';