@flywheel-io/vision 0.7.0 → 0.8.0

package/scss/config/colors.scss

@@ -5,13 +5,37 @@
 // .blue { color: #5871a2; }
 // .fill-blue { background-color: #5871a2; }
 @mixin generateColorClasses($name, $color) {
-  .#{"" + $name} { color: $color !important; }
-  .fill-#{"" + $name} { background-color: $color !important; }
-  .border-#{"" + $name} { border-color: $color !important; }
-  .border-top-#{"" + $name} { border-top: 1px solid; border-color: $color !important; }
-  .border-right-#{"" + $name} { border-right: 1px solid;  border-color: $color !important; }
-  .border-bottom-#{"" + $name} { border-bottom: 1px solid; border-color: $color !important; }
-  .border-left-#{"" + $name} { border-left: 1px solid; border-color: $color !important; }
+  .#{"" + $name} {
+    color: $color !important;
+  }
+
+  .fill-#{"" + $name} {
+    background-color: $color !important;
+  }
+
+  .border-#{"" + $name} {
+    border-color: $color !important;
+  }
+
+  .border-top-#{"" + $name} {
+    border-top: 1px solid;
+    border-color: $color !important;
+  }
+
+  .border-right-#{"" + $name} {
+    border-right: 1px solid;
+    border-color: $color !important;
+  }
+
+  .border-bottom-#{"" + $name} {
+    border-bottom: 1px solid;
+    border-color: $color !important;
+  }
+
+  .border-left-#{"" + $name} {
+    border-left: 1px solid;
+    border-color: $color !important;
+  }
 }
 
 // color naming resource https://chir.ag/projects/name-that-color/#6195ED
@@ -76,6 +100,11 @@ $medium-dark-grey: #999999;
 $dark-grey: #222222;
 @include generateColorClasses(dark-grey, $dark-grey);
 
+$shuttle-gray: #5d6877;
+@include generateColorClasses(shuttle-gray, $shuttle-gray);
+
+$gull-gray: #9ea8b5;
+@include generateColorClasses(gull-gray, $gull-gray);
 
 // blueish greys
 $soft-blue: #eff1f5;
@@ -93,6 +122,14 @@ $light-soft-blue: lighten($soft-blue, 2);
 $lighter-soft-blue: lighten($soft-blue, 3);
 @include generateColorClasses(lighter-soft-blue, $lighter-soft-blue);
 
+$eucalyptus: #1B9E4B;
+@include generateColorClasses(eucalyptus, $eucalyptus);
+
+$gamboge: #dd8e0a;
+@include generateColorClasses(gamboge, $gamboge);
+
+$valencia :#d73d3d;
+@include generateColorClasses(valencia, $valencia);
 
 // border
 $soft-blue-border: darken($soft-blue, 8%);
@@ -100,51 +137,4 @@ $soft-blue-border: darken($soft-blue, 8%);
 
 // text
 $red-text: #de6a6a;
-$orange-text: darken($orange, 10%);
-
-
-// Define global CSS variables
-:root {
-  // Grays
-  --color-gray: var(--color-gray-100);
-  --color-gray-50: #f6f7f8;
-  --color-gray-100: #eff1f4;
-  --color-gray-200: #e3e5e8;
-  --color-gray-300: #d7d9dc;
-  --color-gray-400: #cbcdcf;
-  --color-gray-500: #bfc1c3;
-
-  // Primary
-  --color-primary: var(--color-primary-500);
-  --color-primary-50: #e4edfe;
-  --color-primary-100: #bbd2fe;
-  --color-primary-200: #8db4fd;
-  --color-primary-300: #5f95fc;
-  --color-primary-400: #3d7ffb;
-  --color-primary-500: #1b68fa;
-  --color-primary-600: #1860f9;
-  --color-primary-700: #1455f9;
-  --color-primary-800: #104bf8;
-  --color-primary-900: #083af6;
-  --color-primary-A100: #ffffff;
-  --color-primary-A200: #ebefff;
-  --color-primary-A400: #b8c4ff;
-  --color-primary-A700: #9fafff;
-
-  // Secondary
-  --color-secondary: var(--color-secondary-500);
-  --color-secondary-50: #ebf7ed;
-  --color-secondary-100: #cdead3;
-  --color-secondary-200: #acdcb5;
-  --color-secondary-300: #8bce97;
-  --color-secondary-400: #72c481;
-  --color-secondary-500: #59b96b;
-  --color-secondary-600: #51b263;
-  --color-secondary-700: #48aa58;
-  --color-secondary-800: #3ea24e;
-  --color-secondary-900: #2e933c;
-  --color-secondary-A100: #d9ffde;
-  --color-secondary-A200: #a6ffb1;
-  --color-secondary-A400: #73ff84;
-  --color-secondary-A700: #59ff6e;
-}
+$orange-text: darken($orange, 10%);

package/scss/config/config.scss

@@ -4,6 +4,8 @@ $font-main-2: "Roboto", $font-main;
 $font-alt: "Montserrat", $font-main;
 $font-mono: "Monaco", monospace;
 $font-icon: "FontAwesome";
+$font-inter: "Inter";
+$font-weight-semibold: 500;
 
 // Sizes
 $radius: 4px;
@@ -14,6 +16,8 @@ $larger: 1200px;
 $sidebar-closed: 50px;
 $sidebar-open: 180px;
 $search-state-width: 180px;
+$font-small: 12px;
+$font-medium: 14px;
 
 // Layout
-$box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.15) !important;
+$box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.15) !important;

package/scss/config/theme.scss

@@ -103,6 +103,39 @@ $flywheel-red: (
   )
 );
 
+$flywheel-accent-purple: (
+  50: #f6f0ff,
+  100: #e7d9fe,
+  200: #d8c0fe,
+  300: #c8a6fd,
+  400: #bc93fc,
+  500: #b080fc,
+  600: #a978fc,
+  700: #a06dfb,
+  800: #9763fb,
+  900: #8750fa,
+  A100: #ffffff,
+  A200: #ffffff,
+  A400: #f5f1ff,
+  A700: #e3d7ff,
+  contrast: (
+    50 : #000000,
+    100 : #000000,
+    200 : #000000,
+    300 : #000000,
+    400 : #000000,
+    500 : #ffffff,
+    600 : #ffffff,
+    700 : #ffffff,
+    800 : #ffffff,
+    900 : #ffffff,
+    A100 : #000000,
+    A200 : #000000,
+    A400 : #000000,
+    A700 : #000000,
+  )
+);
+
 // Define the palettes for your theme using the Material Design palettes available in palette.scss
 // (imported above). For each palette, you can optionally specify a default, lighter, and darker
 // hue. Available color palettes: https://material.io/design/color/