@flywheel-io/vision 0.16.1 → 1.0.0

package/scss/material/theme.scss

@@ -0,0 +1,239 @@
+// Custom Theming for Angular Material
+// For more information: https://material.angular.io/guide/theming
+@use '@angular/material' as mat;
+
+// Color shades defined here:
+// https://www.figma.com/file/mZTokUWUl6DF2adktIW454/Angular-Material-Audit?node-id=2%3A327&mode=dev
+$flywheel-blue: (
+  50 : #E8F0FF,
+  100 : #D1E1FE,
+  200 : #A4C3FD,
+  300 : #76A4FC,
+  400 : #4986FB,
+  500 : #1B68FA,
+  600 : #1653C8,
+  700 : #103E96,
+  800 : #0E2D65,
+  900 : #051532,
+  A100 : #ffffff,
+  A200 : #E1EBFF,
+  A400 : #C0D6FF,
+  A700 : #A3C3FF,
+  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,
+  )
+);
+
+$flywheel-red: (
+  50 : #FDECEC,
+  100 : #FCDADA,
+  200 : #F9B4B4,
+  300 : #F58F8F,
+  400 : #F26969,
+  500 : #EF4444,
+  600 : #BF3636,
+  700 : #8F2929,
+  800 : #601B1B,
+  900 : #300E0E,
+  A100 : #FFF7F7,
+  A200 : #FFD9D9,
+  A400 : #FBA6A6,
+  A700 : #F67E7E,
+  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,
+  )
+);
+
+$flywheel-purple: (
+  50: #F7F2FF,
+  100: #EFE6FE,
+  200: #DFCCFE,
+  300: #D0B3FD,
+  400: #C099FD,
+  500: #B080FC,
+  600: #8D66CA,
+  700: #6A4D97,
+  800: #463365,
+  900: #231A32,
+  A100: #FCFAFF,
+  A200: #F5EFFF,
+  A400: #E9DCFF,
+  A700: #DCC5FF,
+  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,
+  )
+);
+
+$flywheel-green: (
+  50 : #ebf7ed,
+  100 : #cdead3,
+  200 : #acdcb5,
+  300 : #8bce97,
+  400 : #72c481,
+  500 : #59b96b,
+  600 : #51b263,
+  700 : #48aa58,
+  800 : #3ea24e,
+  900 : #2e933c,
+  A100 : #d9ffde,
+  A200 : #a6ffb1,
+  A400 : #73ff84,
+  A700 : #59ff6e,
+  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/
+$vision-primary: mat.define-palette($flywheel-blue);
+$vision-accent: mat.define-palette($flywheel-purple);
+$vision-warn: mat.define-palette($flywheel-red);
+
+// typography config
+// Docs here: https://v14.material.angular.io/guide/typography
+// Definitions here: https://www.figma.com/file/mZTokUWUl6DF2adktIW454/Angular-Material-Audit?node-id=2%3A310&mode=dev
+$vision-typography: mat.define-typography-config(
+  $font-family: 'Inter, sans-serif',
+);
+
+// Create the theme object. A theme consists of configurations for individual
+// theming systems such as "color" or "typography".
+$vision-theme: mat.define-light-theme((
+  color: (
+    primary: $vision-primary,
+    accent: $vision-accent,
+    warn: $vision-warn,
+  ),
+  typography: $vision-typography,
+));
+
+$vision-accent-override: mat.define-light-theme((
+  color: (
+    primary: $vision-primary,
+    accent: $vision-primary,
+    warn: $vision-warn,
+  ),
+  typography: $vision-typography,
+));
+
+$vision-dark-theme: mat.define-dark-theme((
+  color: (
+    primary: $vision-primary,
+    accent: $vision-accent,
+    warn: $vision-warn,
+  ),
+  typography: $vision-typography,
+));
+
+$vision-dark-accent-override: mat.define-dark-theme((
+  color: (
+    primary: $vision-primary,
+    accent: $vision-primary,
+    warn: $vision-warn,
+  ),
+  typography: $vision-typography,
+));
+
+// for top level theme selection, includes non color theme styles
+@mixin mat-theme {
+  @include mat.all-component-themes($vision-theme);
+
+  // Override accent color in some components
+  @include mat.checkbox-color($vision-accent-override);
+  @include mat.pseudo-checkbox-color($vision-accent-override); // within lists and stuff
+  @include mat.radio-color($vision-accent-override);
+  @include mat.slide-toggle-color($vision-accent-override);
+  @include mat.slider-color($vision-accent-override);
+}
+
+// for top level theme selection, includes non color theme styles
+@mixin mat-dark-theme {
+  @include mat.all-component-themes($vision-dark-theme);
+
+  // Override accent color in some components
+  @include mat.checkbox-color($vision-dark-accent-override);
+  @include mat.pseudo-checkbox-color($vision-dark-accent-override); // within lists and stuff
+  @include mat.radio-color($vision-dark-accent-override);
+  @include mat.slide-toggle-color($vision-dark-accent-override);
+  @include mat.slider-color($vision-dark-accent-override);
+}
+
+// just the theme  colors
+@mixin mat-theme-colors {
+  @include mat.all-component-colors($vision-theme);
+
+  // Override accent color in some components
+  @include mat.checkbox-color($vision-accent-override);
+  @include mat.pseudo-checkbox-color($vision-accent-override); // within lists and stuff
+  @include mat.radio-color($vision-accent-override);
+  @include mat.slide-toggle-color($vision-accent-override);
+  @include mat.slider-color($vision-accent-override);
+}
+
+// just the theme  colors
+@mixin mat-dark-theme-colors {
+  @include mat.all-component-colors($vision-dark-theme);
+
+  // Override accent color in some components
+  @include mat.checkbox-color($vision-dark-accent-override);
+  @include mat.pseudo-checkbox-color($vision-dark-accent-override); // within lists and stuff
+  @include mat.radio-color($vision-dark-accent-override);
+  @include mat.slide-toggle-color($vision-dark-accent-override);
+  @include mat.slider-color($vision-dark-accent-override);
+}
+
+