Initial commit/

1 files changed, 209 insertions, 0 deletions

diff --git a/frontend/app/config/darkTheme.js b/frontend/app/config/darkTheme.js
new file mode 100644
index 0000000..4461dcb
--- /dev/null
+++ b/frontend/app/config/darkTheme.js
@@ -0,0 +1,209 @@
+const Colors = {
+  accent: '#ffffff',
+  primary: '#ffffff',
+  success: '#3bd555',
+  disabled: '#686894',
+  danger: '#f53d56',
+
+  foreground: '#ffffff',
+  alterForeground: '#acacd2',
+  inverseForeground: '#ffffff',
+  secondaryForeground: '#bcbcbc',
+  hintForeground: '#969696',
+  fadedForeground: '#ffffffdd',
+
+  boldBackground: '#090f3f',
+  background: '#0a1142',
+  alterBackground: '#12194d',
+  overlayBackground: '#00000057',
+  neutralBackground: '#2f396b',
+  fadedBackground: '#28305a',
+  brandBackground: '#6b35e4',
+
+  border: '#080e36',
+
+  twitter: '#ffffff',
+  google: '#ffffff',
+  facebook: '#ffffff',
+
+  gradientBaseBegin: '#6b35e4',
+  gradientBaseEnd: '#6b35e4',
+  gradientVisaBegin: '#63e2ff',
+  gradientVisaEnd: '#712ec3',
+  gradientMasterBegin: '#febb5b',
+  gradientMasterEnd: '#f24645',
+  gradientAxpBegin: '#42e695',
+  gradientAxpEnd: '#3bb2bb',
+  highlight: '#acacd2',
+
+  faded: '#e5e5e5',
+  icon: '#c2c2c2',
+  neutral: '#f2f2f2',
+
+  info: '#2942ff',
+  warning: '#feb401',
+
+  doughnutFirst: '#d500f9',
+  doughnutSecond: '#7c4dff',
+  doughnutThird: '#40c4ff',
+  doughnutFourth: '#2962ff',
+
+  followersProgress: '#d500f9',
+
+  followersFirst: '#2942ff',
+  followersSecond: '#1b2ba6',
+  followersThird: '#081c6e',
+  followersFourth: '#09103f',
+
+  chartsAreaStroke: '#2942ff',
+  chartsAreaFill: '#0d1238',
+};
+
+const Fonts = {
+  light: 'Roboto-Light',
+  regular: 'Roboto-Regular',
+  bold: 'Roboto-Medium',
+  logo: 'Righteous-Regular',
+};
+
+const FontBaseValue = 18;
+
+export const DarkKittenTheme = {
+  name: 'dark',
+  colors: {
+    accent: Colors.accent,
+    primary: Colors.primary,
+    disabled: Colors.disabled,
+    twitter: Colors.twitter,
+    google: Colors.google,
+    facebook: Colors.facebook,
+    brand: Colors.brandBackground,
+    info: Colors.info,
+    infoActive: Colors.info,
+    text: {
+      base: Colors.foreground,
+      secondary: Colors.foreground,
+      accent: Colors.accent,
+      inverse: Colors.inverseForeground,
+      hint: Colors.alterForeground,
+    },
+    screen: {
+      base: Colors.background,
+      alter: Colors.alterBackground,
+      scroll: Colors.background,
+      bold: Colors.boldBackground,
+      overlay: Colors.overlayBackground,
+    },
+    button: {
+      back: Colors.alterBackground,
+      underlay: Colors.neutralBackground,
+      highlight: Colors.brandBackground,
+    },
+    input: {
+      text: Colors.alterForeground,
+      background: Colors.alterBackground,
+      label: Colors.alterForeground,
+      placeholder: Colors.alterForeground,
+    },
+    border: {
+      base: Colors.border,
+      accent: Colors.alterBackground,
+      secondary: Colors.secondaryForeground,
+      highlight: Colors.highlight,
+    },
+    control: {
+      background: Colors.alterBackground,
+    },
+    badge: {
+      likeBackground: Colors.foreground,
+      likeForeground: Colors.danger,
+      plusBackground: Colors.foreground,
+      plusForeground: Colors.success,
+    },
+    chat: {
+      messageInBackground: Colors.fadedBackground,
+      messageOutBackground: Colors.neutralBackground,
+      text: Colors.fadedForeground,
+    },
+    gradients: {
+      base: [
+        Colors.gradientBaseBegin,
+        Colors.gradientBaseEnd,
+      ],
+      visa: [
+        Colors.gradientVisaBegin,
+        Colors.gradientVisaEnd,
+      ],
+      mastercard: [
+        Colors.gradientMasterBegin,
+        Colors.gradientMasterEnd,
+      ],
+      axp: [
+        Colors.gradientAxpBegin,
+        Colors.gradientAxpEnd,
+      ],
+    },
+    dashboard: {
+      stars: Colors.alterBackground,
+      tweets: Colors.alterBackground,
+      likes: Colors.alterBackground,
+    },
+    charts: {
+      followersProgress: Colors.followersProgress,
+      doughnut: [
+        Colors.doughnutFirst,
+        Colors.doughnutSecond,
+        Colors.doughnutThird,
+        Colors.doughnutFourth,
+      ],
+      followersArea: [
+        Colors.followersFirst,
+        Colors.followersSecond,
+        Colors.followersThird,
+        Colors.followersFourth,
+      ],
+      area: {
+        stroke: Colors.chartsAreaStroke,
+        fill: Colors.chartsAreaFill,
+      },
+    },
+  },
+  fonts: {
+    sizes: {
+      h0: 32,
+      h1: 26,
+      h2: 24,
+      h3: 20,
+      h4: 18,
+      h5: 16,
+      h6: 15,
+      p1: 16,
+      p2: 15,
+      p3: 15,
+      p4: 13,
+      s1: 15,
+      s2: 14,
+      s3: 14,
+      s4: 12,
+      s5: 12,
+      s6: 13,
+      s7: 10,
+      base: FontBaseValue,
+      small: FontBaseValue * 0.8,
+      medium: FontBaseValue,
+      large: FontBaseValue * 1.2,
+      xlarge: FontBaseValue / 0.75,
+      xxlarge: FontBaseValue * 1.6,
+    },
+    lineHeights: {
+      medium: 18,
+      big: 24,
+    },
+    family: {
+      regular: Fonts.regular,
+      light: Fonts.light,
+      bold: Fonts.bold,
+      logo: Fonts.logo,
+    },
+  },
+};