Initial commit/

1 files changed, 210 insertions, 0 deletions

diff --git a/frontend/app/config/theme.js b/frontend/app/config/theme.js
new file mode 100644
index 0000000..b3f4225
--- /dev/null
+++ b/frontend/app/config/theme.js
@@ -0,0 +1,210 @@
+import { scale } from '../utils/scale';
+
+const Colors = {
+  accent: '#5c9b3a',
+  primary: '#f64e59',
+  success: '#3bd555',
+  disabled: '#cacaca',
+
+  foreground: '#212121',
+  alterForeground: '#707070',
+  inverseForeground: '#ffffff',
+  secondaryForeground: '#bcbcbc',
+  hintForeground: '#969696',
+  highlight: '#bcbcbc',
+
+  background: '#ffffff',
+  alterBackground: '#f2f2f2',
+  overlayBackground: '#00000057',
+  neutralBackground: '#f2f2f2',
+  fadedBackground: '#e5e5e5',
+
+  border: '#f2f2f2',
+
+  twitter: '#41abe1',
+  google: '#e94335',
+  facebook: '#3b5998',
+
+  gradientBaseBegin: '#69b338',
+  gradientBaseEnd: '#0d712a',
+  gradientVisaBegin: '#63e2ff',
+  gradientVisaEnd: '#712ec3',
+  gradientMasterBegin: '#febb5b',
+  gradientMasterEnd: '#f24645',
+  gradientAxpBegin: '#42e695',
+  gradientAxpEnd: '#3bb2bb',
+
+  faded: '#e5e5e5',
+  icon: '#c2c2c2',
+  neutral: '#f2f2f2',
+
+  info: '#19bfe5',
+  warning: '#feb401',
+  danger: '#ed1c4d',
+
+  starsStat: '#2ab5fa',
+  tweetsStat: '#ffc61c',
+  likesStat: '#5468ff',
+
+  doughnutFirst: '#8a98ff',
+  doughnutSecond: '#ffd146',
+  doughnutThird: '#c2d521',
+  doughnutFourth: '#ff6b5c',
+
+  followersProgress: '#c2d521',
+
+  followersFirst: '#b3e5fc',
+  followersSecond: '#81d4fa',
+  followersThird: '#4fc3f7',
+  followersFourth: '#42a5f5',
+
+  chartsAreaStroke: '#097fe5',
+  chartsAreaFill: '#d6ecff',
+};
+
+const Fonts = {
+  light: 'Roboto-Light',
+  regular: 'Roboto-Regular',
+  bold: 'Roboto-Medium',
+  logo: 'Righteous-Regular',
+};
+
+const FontBaseValue = scale(18);
+
+export const KittenTheme = {
+  name: 'light',
+  colors: {
+    accent: Colors.accent,
+    primary: Colors.primary,
+    disabled: Colors.disabled,
+    twitter: Colors.twitter,
+    google: Colors.google,
+    facebook: Colors.facebook,
+    brand: Colors.accent,
+    text: {
+      base: Colors.foreground,
+      secondary: Colors.secondaryForeground,
+      accent: Colors.accent,
+      inverse: Colors.inverseForeground,
+      hint: Colors.alterForeground,
+    },
+    input: {
+      text: Colors.alterForeground,
+      background: Colors.background,
+      label: Colors.secondaryForeground,
+      placeholder: Colors.secondaryForeground,
+    },
+    screen: {
+      base: Colors.background,
+      alter: Colors.alterBackground,
+      scroll: Colors.alterBackground,
+      bold: Colors.alterBackground,
+      overlay: Colors.overlayBackground,
+    },
+    button: {
+      back: Colors.background,
+      underlay: Colors.neutralBackground,
+      highlight: Colors.primary,
+    },
+    border: {
+      base: Colors.border,
+      accent: Colors.accent,
+      secondary: Colors.secondaryForeground,
+      highlight: Colors.highlight,
+    },
+    control: {
+      background: Colors.background,
+    },
+    badge: {
+      likeBackground: Colors.primary,
+      likeForeground: Colors.inverseForeground,
+      plusBackground: Colors.success,
+      plusForeground: Colors.inverseForeground,
+    },
+    chat: {
+      messageInBackground: Colors.neutralBackground,
+      messageOutBackground: Colors.fadedBackground,
+      text: Colors.foreground,
+    },
+    gradients: {
+      base: [
+        Colors.gradientBaseBegin,
+        Colors.gradientBaseEnd,
+      ],
+      visa: [
+        Colors.gradientVisaBegin,
+        Colors.gradientVisaEnd,
+      ],
+      mastercard: [
+        Colors.gradientMasterBegin,
+        Colors.gradientMasterEnd,
+      ],
+      axp: [
+        Colors.gradientAxpBegin,
+        Colors.gradientAxpEnd,
+      ],
+    },
+    dashboard: {
+      stars: Colors.starsStat,
+      tweets: Colors.tweetsStat,
+      likes: Colors.likesStat,
+    },
+    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: scale(32),
+      h1: scale(26),
+      h2: scale(24),
+      h3: scale(20),
+      h4: scale(18),
+      h5: scale(16),
+      h6: scale(15),
+      p1: scale(16),
+      p2: scale(15),
+      p3: scale(15),
+      p4: scale(13),
+      s1: scale(15),
+      s2: scale(13),
+      s3: scale(13),
+      s4: scale(12),
+      s5: scale(12),
+      s6: scale(13),
+      s7: scale(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,
+    },
+  },
+};