diff --git a/src/app/@theme/components/header/header.component.html b/src/app/@theme/components/header/header.component.html index 28c3e36b..5aa0a235 100644 --- a/src/app/@theme/components/header/header.component.html +++ b/src/app/@theme/components/header/header.component.html @@ -7,7 +7,9 @@ [matRippleUnbounded]="true" [matRippleCentered]="true" (click)="toggleSidebar()" - > + > + + = new Subject(); + public readonly materialTheme$: Observable; userPictureOnly: boolean = false; user: any; - public currentTheme = 'material-light'; - public readonly themes = [ - { value: 'material-light', name: 'Material Light' }, - { value: 'material-dark', name: 'Material Dark' }, + 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', + }, ]; + currentTheme = 'default'; + userMenu = [ { title: 'Profile' }, { title: 'Log out' } ]; public constructor( @@ -34,7 +58,13 @@ 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 deleted file mode 100644 index bbcbcdf7..00000000 --- a/src/app/@theme/styles/_angular-material.scss +++ /dev/null @@ -1,15 +0,0 @@ -@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/_overrides.scss b/src/app/@theme/styles/_overrides.scss index 79164996..8ba44121 100644 --- a/src/app/@theme/styles/_overrides.scss +++ b/src/app/@theme/styles/_overrides.scss @@ -12,33 +12,4 @@ .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-dark.scss b/src/app/@theme/styles/material/_material-dark.scss similarity index 97% rename from src/app/@theme/styles/_material-dark.scss rename to src/app/@theme/styles/material/_material-dark.scss index d495f21d..6f7bead5 100644 --- a/src/app/@theme/styles/_material-dark.scss +++ b/src/app/@theme/styles/material/_material-dark.scss @@ -363,8 +363,6 @@ $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( @@ -377,6 +375,8 @@ $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,7 +387,6 @@ $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), @@ -396,20 +395,6 @@ $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), @@ -508,4 +493,4 @@ $theme: ( option-giant-text-font-weight: material-regular-font-weight ); -$nb-themes: nb-register-theme($theme, material-dark, default); +$nb-themes: nb-register-theme($theme, material-dark, dark); diff --git a/src/app/@theme/styles/_material-light.scss b/src/app/@theme/styles/material/_material-light.scss similarity index 97% rename from src/app/@theme/styles/_material-light.scss rename to src/app/@theme/styles/material/_material-light.scss index 36a5b0ae..169fdb19 100644 --- a/src/app/@theme/styles/_material-light.scss +++ b/src/app/@theme/styles/material/_material-light.scss @@ -363,8 +363,6 @@ $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( @@ -377,6 +375,8 @@ $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,7 +386,6 @@ $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), @@ -394,20 +393,6 @@ $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/material/_material.scss b/src/app/@theme/styles/material/_material.scss new file mode 100644 index 00000000..4d228533 --- /dev/null +++ b/src/app/@theme/styles/material/_material.scss @@ -0,0 +1,57 @@ +@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/theme.material-dark.ts b/src/app/@theme/styles/material/theme.material-dark.ts similarity index 99% rename from src/app/@theme/styles/theme.material-dark.ts rename to src/app/@theme/styles/material/theme.material-dark.ts index 680174e5..28fad118 100644 --- a/src/app/@theme/styles/theme.material-dark.ts +++ b/src/app/@theme/styles/material/theme.material-dark.ts @@ -10,7 +10,7 @@ const palette = { export const baseTheme: NbJSThemeOptions = { name: 'material-dark', - base: 'default', + base: 'dark', variables: { fontMain: 'Roboto, sans-serif', fontSecondary: 'Roboto, sans-serif', diff --git a/src/app/@theme/styles/theme.material-light.ts b/src/app/@theme/styles/material/theme.material-light.ts similarity index 100% rename from src/app/@theme/styles/theme.material-light.ts rename to src/app/@theme/styles/material/theme.material-light.ts diff --git a/src/app/@theme/styles/styles.scss b/src/app/@theme/styles/styles.scss index d9aa10d8..42369947 100644 --- a/src/app/@theme/styles/styles.scss +++ b/src/app/@theme/styles/styles.scss @@ -4,8 +4,6 @@ // 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'; @@ -20,12 +18,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(); @@ -33,6 +31,5 @@ // 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 new file mode 100644 index 00000000..ea360a1e --- /dev/null +++ b/src/app/@theme/styles/theme.corporate.ts @@ -0,0 +1,308 @@ +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 new file mode 100644 index 00000000..0add1e2d --- /dev/null +++ b/src/app/@theme/styles/theme.cosmic.ts @@ -0,0 +1,308 @@ +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 new file mode 100644 index 00000000..8280791e --- /dev/null +++ b/src/app/@theme/styles/theme.dark.ts @@ -0,0 +1,314 @@ +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 new file mode 100644 index 00000000..30e5d9e5 --- /dev/null +++ b/src/app/@theme/styles/theme.default.ts @@ -0,0 +1,314 @@ +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/themes.scss b/src/app/@theme/styles/themes.scss index 75e2f81d..0be07815 100644 --- a/src/app/@theme/styles/themes.scss +++ b/src/app/@theme/styles/themes.scss @@ -2,5 +2,132 @@ @import '~@nebular/theme/styles/theming'; // @nebular out of the box themes @import '~@nebular/theme/styles/themes'; -@import './material-dark'; -@import './material-light'; +// 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); diff --git a/src/app/@theme/theme.module.ts b/src/app/@theme/theme.module.ts index 89c3a467..f5731098 100644 --- a/src/app/@theme/theme.module.ts +++ b/src/app/@theme/theme.module.ts @@ -35,8 +35,12 @@ import { ThreeColumnsLayoutComponent, TwoColumnsLayoutComponent, } from './layouts'; -import { MATERIAL_LIGHT_THEME } from './styles/theme.material-light'; -import { MATERIAL_DARK_THEME } from './styles/theme.material-dark'; +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'; const NB_MODULES = [ NbLayoutModule, @@ -80,8 +84,10 @@ export class ThemeModule { ngModule: ThemeModule, providers: [ ...NbThemeModule.forRoot( - { name: 'material-light' }, - [MATERIAL_LIGHT_THEME, MATERIAL_DARK_THEME], + { + name: 'default', + }, + [ DEFAULT_THEME, COSMIC_THEME, CORPORATE_THEME, DARK_THEME, 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 0809bebc..083d3bdd 100644 --- a/src/app/pages/dashboard/dashboard.component.ts +++ b/src/app/pages/dashboard/dashboard.component.ts @@ -50,9 +50,34 @@ 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 62a35f18..7e0639a7 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,12 +1,19 @@ -import { Component, EventEmitter, Output } from '@angular/core'; +import { Component, EventEmitter, HostBinding, OnDestroy, OnInit, 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 { +export class RoomSelectorComponent implements OnInit, OnDestroy { + + private destroy$ = new Subject(); + private hideGrid: boolean; + @Output() select: EventEmitter = new EventEmitter(); selectedRoom = null; @@ -59,10 +66,35 @@ export class RoomSelectorComponent { ], }; - constructor(private location: Location, private locationStrategy: LocationStrategy) { + @HostBinding('style.background') + get background(): 'none' | null { + return this.hideGrid ? 'none' : null; + } + + constructor( + private location: Location, + private locationStrategy: LocationStrategy, + private themeService: NbThemeService, + ) { 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 a242f51d..8235f4d5 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 === 'material-dark')) + .pipe(map(({ name }) => name === 'cosmic' || name === '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 c1dd2df9..a4673f5d 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 2108b9f2..52e8506b 100644 --- a/src/app/pages/forms/buttons/buttons.component.ts +++ b/src/app/pages/forms/buttons/buttons.component.ts @@ -1,5 +1,7 @@ import { Component } from '@angular/core'; -import { NbComponentShape, NbComponentSize, NbComponentStatus } from '@nebular/theme'; +import { NbComponentShape, NbComponentSize, NbComponentStatus, NbThemeService } from '@nebular/theme'; +import { Observable } from 'rxjs'; +import { map } from 'rxjs/operators'; @Component({ selector: 'ngx-buttons', @@ -7,7 +9,18 @@ import { NbComponentShape, NbComponentSize, NbComponentStatus } from '@nebular/t 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 20684dda..b0adf3a2 100644 --- a/src/app/pages/forms/form-inputs/form-inputs.component.html +++ b/src/app/pages/forms/form-inputs/form-inputs.component.html @@ -10,6 +10,10 @@ + + + + @@ -83,7 +87,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 3b9c5161..5ede35ff 100644 --- a/src/app/pages/forms/form-inputs/form-inputs.component.ts +++ b/src/app/pages/forms/form-inputs/form-inputs.component.ts @@ -1,4 +1,7 @@ import { Component } from '@angular/core'; +import { NbThemeService } from '@nebular/theme'; +import { Observable } from 'rxjs'; +import { map } from 'rxjs/operators'; @Component({ selector: 'ngx-form-inputs', @@ -6,6 +9,16 @@ import { Component } from '@angular/core'; 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';