feat: introduce brand colors and gradients (#252)

* feat: add brand colors from marketing guide * feat: add brand gradients from marketing guide * fix: correctly implement last brand gradient * docs: make gradient swatches responsive * feat: add a few more permutations of dark brand gradients * chore: update changelog * refactor: make color and gradient names more fun
influxdata · Aug 29, 2019 · 546d52b · 546d52b
1 parent 9866db7
commit 546d52b
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 3 deletions.
diff --git a/.storybook/Story.scss b/.storybook/Story.scss
@@ -597,6 +597,11 @@ table.two-axis-table {
   flex: 0 0 calc(33.3333% - 4px);
 }
 
+.gradients-grid--card {
+  margin-right: 0;
+  flex: 0 0 calc(100%);
+}
+
 @media screen and (min-width: 700px) {
   .colors-grid--card {
     flex: 0 0 calc(25% - 4px);
@@ -607,6 +612,10 @@ table.two-axis-table {
   .colors-grid--card {
     flex: 0 0 calc(20% - 4px);
   }
+  .gradients-grid--card {
+    margin-right: 4px;
+    flex: 0 0 calc(33.3333% - 4px);
+  }
 }
 
 @media screen and (min-width: 1100px) {
@@ -627,9 +636,6 @@ table.two-axis-table {
   }
 }
 
-.gradients-grid--card {
-  flex: 0 0 calc(33.3333% - 4px);
-}
 
 .icon-grid {
   display: flex;

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,7 @@
 
 ### 0.0.28 (Unreleased)
 
+- [#252](https://github.com/influxdata/clockface/pull/252): Add new colors and gradients from InfluxData Brand guidelines
 - [#251](https://github.com/influxdata/clockface/pull/251): Introduce `Wand`, `WrenchNav`, and `DisksNav` icons to icon font
 
 ### 0.0.27 - 🆘

diff --git a/src/Constants/colors.ts b/src/Constants/colors.ts
@@ -313,6 +313,42 @@ export const influxGradients = {
     start: InfluxColors.Yeti,
     stop: InfluxColors.Mint,
   },
+  WarpSpeed: {
+    start: InfluxColors.DeepPurple,
+    stop: InfluxColors.Magenta,
+  },
+  OminousFog: {
+    start: InfluxColors.DeepPurple,
+    stop: InfluxColors.Comet,
+  },
+  MilkyWay: {
+    start: InfluxColors.Magenta,
+    stop: InfluxColors.Comet,
+  },
+  LazyAfternoon: {
+    start: InfluxColors.Pool,
+    stop: InfluxColors.Comet,
+  },
+  NineteenEightyFour: {
+    start: InfluxColors.Pool,
+    stop: InfluxColors.Magenta,
+  },
+  Radioactive: {
+    start: InfluxColors.Pool,
+    stop: InfluxColors.Chartreuse,
+  },
+  LostGalaxy: {
+    start: InfluxColors.DeepPurple,
+    stop: InfluxColors.Void,
+  },
+  GrapeSoda: {
+    start: InfluxColors.DeepPurple,
+    stop: InfluxColors.Amethyst,
+  },
+  LavenderLatte: {
+    start: InfluxColors.DeepPurple,
+    stop: InfluxColors.Star,
+  },
 }
 
 export const dropdownScrollColors = {

diff --git a/src/Styles/influx-colors.scss b/src/Styles/influx-colors.scss
@@ -75,3 +75,8 @@ $c-thunder: #FFD255;
 $c-sulfur: #FFE480;
 $c-daisy: #FFF6B8;
 $c-banana: #FFFDDE;
+
+// Marketing Brand Colors
+$c-chartreuse: #D6F622;
+$c-magenta: #BF2FE5;
+$c-deeppurple: #13002D;
diff --git a/src/Types/index.tsx b/src/Types/index.tsx
@@ -74,6 +74,15 @@ export enum Gradients {
   PastryCafe = 'PastryCafe',
   KawaiiDesu = 'KawaiiDesu',
   RobotLogic = 'RobotLogic',
+  WarpSpeed = 'WarpSpeed',
+  OminousFog = 'OminousFog',
+  MilkyWay = 'MilkyWay',
+  LazyAfternoon = 'LazyAfternoon',
+  NineteenEightyFour = 'NineteenEightyFour',
+  Radioactive = 'Radioactive',
+  LostGalaxy = 'LostGalaxy',
+  GrapeSoda = 'GrapeSoda',
+  LavenderLatte = 'LavenderLatte',
 }
 
 export enum DropdownMenuTheme {
@@ -168,6 +177,10 @@ export enum InfluxColors {
   Tungsten = '#FFB6A0',
   Marmelade = '#FFDCCF',
   Flan = '#FFF7F4',
+  // Brand Colors
+  Chartreuse = '#D6F622',
+  DeepPurple = '#13002D',
+  Magenta = '#BF2FE5',
 }
 
 export enum IconFont {