feat: update js themes (#1631)

akveo · Jul 1, 2019 · 4d66419 · 4d66419
1 parent 6373117
commit 4d66419
Show file tree

Hide file tree

Showing 8 changed files with 136 additions and 54 deletions.
diff --git a/src/framework/theme/public_api.ts b/src/framework/theme/public_api.ts
@@ -18,6 +18,7 @@ export * from './services/js-themes-registry.service';
 export * from './services/js-themes/corporate.theme';
 export * from './services/js-themes/cosmic.theme';
 export * from './services/js-themes/default.theme';
+export * from './services/js-themes/dark.theme';
 export * from './services/js-themes/theme.options';
 export * from './components/component-size';
 export * from './components/component-shape';

diff --git a/src/framework/theme/services/js-themes-registry.service.ts b/src/framework/theme/services/js-themes-registry.service.ts
@@ -11,12 +11,14 @@ import { NbJSThemeOptions } from './js-themes/theme.options';
 import { DEFAULT_THEME } from './js-themes/default.theme';
 import { COSMIC_THEME } from './js-themes/cosmic.theme';
 import { CORPORATE_THEME } from './js-themes/corporate.theme';
+import { DARK_THEME } from './js-themes/dark.theme';
 import { NB_BUILT_IN_JS_THEMES, NB_JS_THEMES } from '../theme.options';
 
 export const BUILT_IN_THEMES: NbJSThemeOptions[] = [
   DEFAULT_THEME,
   COSMIC_THEME,
   CORPORATE_THEME,
+  DARK_THEME,
 ];
 
 /**

diff --git a/src/framework/theme/services/js-themes-registry.spec.ts b/src/framework/theme/services/js-themes-registry.spec.ts
@@ -73,11 +73,11 @@ describe('js-themes-registry-service', () => {
 
   it('has built in themes with inherited font', () => {
     expect(jsThemesRegistry.get('default').variables.fontMain)
-      .toEqual('"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif');
+      .toEqual('Open Sans, sans-serif');
     expect(jsThemesRegistry.get('cosmic').variables.fontMain)
-      .toEqual('"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif');
+      .toEqual('Open Sans, sans-serif');
     expect(jsThemesRegistry.get('corporate').variables.fontMain)
-      .toEqual('"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif');
+      .toEqual('Open Sans, sans-serif');
   });
 
   it('has also new themes', () => {

diff --git a/src/framework/theme/services/js-themes/corporate.theme.ts b/src/framework/theme/services/js-themes/corporate.theme.ts
@@ -1,5 +1,4 @@
 import { NbJSThemeOptions } from './theme.options';
-import { NbColorHelper } from '../color.helper';
 
 const palette = {
   primary: '#73a1ff',
@@ -13,24 +12,37 @@ export const CORPORATE_THEME: NbJSThemeOptions = {
   name: 'corporate',
   base: 'default',
   variables: {
-    fg: '#f1f5f8',
+    fontMain: 'Open Sans, sans-serif',
+    fontSecondary: 'Raleway, sans-serif',
+
     bg: '#ffffff',
-    fgHeading: '#181818',
-    fgText: '#4b4b4b',
-    fgHighlight: '#a4abb3',
-    layoutBg: '#f1f5f8',
-    separator: '#cdd5dc',
+    bg2: '#f7f9fc',
+    bg3: '#edf1f7',
+    bg4: '#e4e9f2',
+
+    border: '#ffffff',
+    border2: '#f7f9fc',
+    border3: '#edf1f7',
+    border4: '#e4e9f2',
+    border5: '#c5cee0',
+
+    fg: '#8f9bb3',
+    fgHeading: '#1a2138',
+    fgText: '#1a2138',
+    fgHighlight: palette.primary,
+    layoutBg: '#f7f9fc',
+    separator: '#edf1f7',
 
     primary: palette.primary,
     success: palette.success,
     info: palette.info,
     warning: palette.warning,
     danger: palette.danger,
 
-    primaryLight: NbColorHelper.tint(palette.primary, 15),
-    successLight: NbColorHelper.tint(palette.success, 15),
-    infoLight: NbColorHelper.tint(palette.info, 15),
-    warningLight: NbColorHelper.tint(palette.warning, 15),
-    dangerLight: NbColorHelper.tint(palette.danger, 15),
+    primaryLight: '#598bff',
+    successLight: '#2ce69b',
+    infoLight: '#42aaff',
+    warningLight: '#ffc94d',
+    dangerLight: '#ff708d',
   },
 };
diff --git a/src/framework/theme/services/js-themes/cosmic.theme.ts b/src/framework/theme/services/js-themes/cosmic.theme.ts
@@ -1,36 +1,47 @@
 import { NbJSThemeOptions } from './theme.options';
-import { NbColorHelper } from '../color.helper';
 
 const palette = {
-  primary: '#7659ff',
-  success: '#00d977',
-  info: '#0088ff',
-  warning: '#ffa100',
-  danger: '#ff386a',
+  primary: '#a16eff',
+  success: '#00d68f',
+  info: '#0095ff',
+  warning: '#ffaa00',
+  danger: '#ff3d71',
 };
 
 export const COSMIC_THEME: NbJSThemeOptions = {
   name: 'cosmic',
-  base: 'default',
   variables: {
-    bg: '#3d3780',
-    fg: '#a1a1e5',
+    fontMain: 'Open Sans, sans-serif',
+    fontSecondary: 'Raleway, sans-serif',
+
+    bg: '#323259',
+    bg2: '#252547',
+    bg3: '#1b1b38',
+    bg4: '#13132b',
+
+    border: '#323259',
+    border2: '#252547',
+    border3: '#1b1b38',
+    border4: '#13132b',
+    border5: '#13132b',
+
+    fg: '#b4b4db',
     fgHeading: '#ffffff',
-    fgText: '#d1d1ff',
-    fgHighlight: '#00f9a6',
-    layoutBg: '#2f296b',
-    separator: '#342e73',
+    fgText: '#ffffff',
+    fgHighlight: palette.primary,
+    layoutBg: '#151a30',
+    separator: '#151a30',
 
     primary: palette.primary,
     success: palette.success,
     info: palette.info,
     warning: palette.warning,
     danger: palette.danger,
 
-    primaryLight: NbColorHelper.tint(palette.primary, 20),
-    successLight: NbColorHelper.tint(palette.success, 20),
-    infoLight: NbColorHelper.tint(palette.info, 20),
-    warningLight: NbColorHelper.tint(palette.warning, 20),
-    dangerLight: NbColorHelper.tint(palette.danger, 20),
+    primaryLight: '#b18aff',
+    successLight: '#2ce69b',
+    infoLight: '#42aaff',
+    warningLight: '#ffc94d',
+    dangerLight: '#ff708d',
   },
 };
diff --git a/src/framework/theme/services/js-themes/dark.theme.ts b/src/framework/theme/services/js-themes/dark.theme.ts
@@ -0,0 +1,47 @@
+import { NbJSThemeOptions } from './theme.options';
+
+const palette = {
+  primary: '#3366ff',
+  success: '#00d68f',
+  info: '#0095ff',
+  warning: '#ffaa00',
+  danger: '#ff3d71',
+};
+
+export const DARK_THEME: NbJSThemeOptions = {
+  name: 'dark',
+  variables: {
+    fontMain: 'Open Sans, sans-serif',
+    fontSecondary: 'Raleway, sans-serif',
+
+    bg: '#222b45',
+    bg2: '#1a2138',
+    bg3: '#151a30',
+    bg4: '#101426',
+
+    border: '#222b45',
+    border2: '#1a2138',
+    border3: '#151a30',
+    border4: '#101426',
+    border5: '#101426',
+
+    fg: '#8f9bb3',
+    fgHeading: '#ffffff',
+    fgText: '#ffffff',
+    fgHighlight: palette.primary,
+    layoutBg: '#1b1b38',
+    separator: '#1b1b38',
+
+    primary: palette.primary,
+    success: palette.success,
+    info: palette.info,
+    warning: palette.warning,
+    danger: palette.danger,
+
+    primaryLight: '#598bff',
+    successLight: '#2ce69b',
+    infoLight: '#42aaff',
+    warningLight: '#ffc94d',
+    dangerLight: '#ff708d',
+  },
+};
diff --git a/src/framework/theme/services/js-themes/default.theme.ts b/src/framework/theme/services/js-themes/default.theme.ts
@@ -1,38 +1,47 @@
 import { NbJSThemeOptions } from './theme.options';
-import { NbColorHelper } from '../color.helper';
 
 const palette = {
-  primary: '#8a7fff',
-  success: '#40dc7e',
-  info: '#4ca6ff',
-  warning: '#ffa100',
-  danger: '#ff4c6a',
+  primary: '#3366ff',
+  success: '#00d68f',
+  info: '#0095ff',
+  warning: '#ffaa00',
+  danger: '#ff3d71',
 };
 
 export const DEFAULT_THEME: NbJSThemeOptions = {
   name: 'default',
   variables: {
-    fontMain: '"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
-    fontSecondary: '"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+    fontMain: 'Open Sans, sans-serif',
+    fontSecondary: 'Raleway, sans-serif',
 
     bg: '#ffffff',
-    fg: '#a4abb3',
-    fgHeading: '#2a2a2a',
-    fgText: '#3b3b3b',
-    fgHighlight: '#41d974',
-    layoutBg: '#ebeff5',
-    separator: '#ebeef2',
+    bg2: '#f7f9fc',
+    bg3: '#edf1f7',
+    bg4: '#e4e9f2',
+
+    border: '#ffffff',
+    border2: '#f7f9fc',
+    border3: '#edf1f7',
+    border4: '#e4e9f2',
+    border5: '#c5cee0',
+
+    fg: '#8f9bb3',
+    fgHeading: '#1a2138',
+    fgText: '#1a2138',
+    fgHighlight: palette.primary,
+    layoutBg: '#f7f9fc',
+    separator: '#edf1f7',
 
     primary: palette.primary,
     success: palette.success,
     info: palette.info,
     warning: palette.warning,
     danger: palette.danger,
 
-    primaryLight: NbColorHelper.tint(palette.primary, 15),
-    successLight: NbColorHelper.tint(palette.success, 15),
-    infoLight: NbColorHelper.tint(palette.info, 15),
-    warningLight: NbColorHelper.tint(palette.warning, 15),
-    dangerLight: NbColorHelper.tint(palette.danger, 15),
+    primaryLight: '#598bff',
+    successLight: '#2ce69b',
+    infoLight: '#42aaff',
+    warningLight: '#ffc94d',
+    dangerLight: '#ff708d',
   },
 };
diff --git a/src/framework/theme/services/theme.spec.ts b/src/framework/theme/services/theme.spec.ts
@@ -116,11 +116,11 @@ describe('theme-service', () => {
     try {
       // TODO could be rewrite with usage of done()
       expect(current).not.toBeUndefined();
-      expect(current.fontMain).toEqual('"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif');
+      expect(current.fontMain).toEqual('Open Sans, sans-serif');
       expect(current.bg).toEqual('#ffffff');
 
       themeService.changeTheme('cosmic');
-      expect(current.bg).toEqual('#3d3780');
+      expect(current.bg).toEqual('#323259');
 
       themeService.changeTheme('corporate');
       expect(current.bg).toEqual('#ffffff');