@flywheel-io/vision 0.16.0 → 1.0.0

package/scss/config/theme.scss

@@ -1,160 +0,0 @@
-// Custom Theming for Angular Material
-// For more information: https://material.angular.io/guide/theming
-@use '@angular/material' as mat;
-
-// Color shades generated with
-// http://mcg.mbitson.com/#!?mcgpalette0=%231b68fa&themename=Flywheel%202022-04
-$flywheel-blue: (
-  50 : #e4edfe,
-  100 : #bbd2fe,
-  200 : #8db4fd,
-  300 : #5f95fc,
-  400 : #3d7ffb,
-  500 : #1b68fa,
-  600 : #1860f9,
-  700 : #1455f9,
-  800 : #104bf8,
-  900 : #083af6,
-  A100 : #ffffff,
-  A200 : #ebefff,
-  A400 : #b8c4ff,
-  A700 : #9fafff,
-  contrast: (
-    50 : #000000,
-    100 : #000000,
-    200 : #000000,
-    300 : #000000,
-    400 : #ffffff,
-    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,
-  )
-);
-$flywheel-red: (
-  50 : #faeae9,
-  100 : #f4cbc9,
-  200 : #eca9a5,
-  300 : #e48781,
-  400 : #df6d66,
-  500 : #d9534b,
-  600 : #d54c44,
-  700 : #cf423b,
-  800 : #ca3933,
-  900 : #c02923,
-  A100 : #fffcfc,
-  A200 : #ffcac9,
-  A400 : #ff9996,
-  A700 : #ff807c,
-  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-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/
-$vision-primary: mat.define-palette($flywheel-blue);
-$vision-accent: mat.define-palette($flywheel-green);
-
-// The warn palette is optional (defaults to red).
-$vision-warn: mat.define-palette($flywheel-red);
-
-// 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,
-  )
-));
-$vision-accent-override: mat.define-light-theme((
-  color: (
-    primary: $vision-primary,
-    accent: $vision-primary,
-    warn: $vision-warn,
-  )
-));

package/scss/config/vision-colors.scss

@@ -1,131 +0,0 @@
-@mixin define-light-colors() {
-  --typography-base: #000000;
-  --typography-muted: #5d6877;
-  --typography-light: #9ea8b5;
-  --typography-disabled: #b3b3b3;
-  --typography-contrast: #ffffff;
-  --page-light: #ffffff;
-  --page-shaded: #f1f3f4;
-  --card-header: #f9f9f9;
-  --card-background: #ffffff;
-  --separations-base: #e3e6ea;
-  --separations-input: #0000003f;
-  --separations-divider: #00000026;
-  --separations-overlay: #00000040;
-  --primary-base: #1b68fa;
-  --primary-medium: #1653c8;
-  --primary-dark: #103e96;
-  --primary-light: #e8f0ff;
-  --primary-hover: #1b69fa19;
-  --primary-focus: #1b69fa33;
-  --primary-border: #1b69fa66;
-  --secondary-base: #b080fc;
-  --secondary-medium: #8d66ca;
-  --secondary-dark: #6a4d97;
-  --secondary-light: #f7f2ff;
-  --secondary-hover: #b081fc19;
-  --secondary-focus: #b081fc33;
-  --secondary-border: #b081fc66;
-  --red-base: #d73d3d;
-  --red-medium: #a73030;
-  --red-dark: #782222;
-  --red-light: #fdecec;
-  --red-hover: #f0434319;
-  --red-focus: #f0434333;
-  --red-border: #f0434366;
-  --slate-base: #748295;
-  --slate-medium: #5d6877;
-  --slate-dark: #464e59;
-  --slate-light: #f1f3f4;
-  --slate-hover: #74829519;
-  --slate-focus: #7482951a;
-  --slate-border: #74829566;
-  --orange-base: #c47e09;
-  --orange-medium: #ac6f08;
-  --orange-dark: #935f07;
-  --orange-light: #fef5e7;
-  --orange-hover: #f59e0b19;
-  --orange-focus: #f59e0b33;
-  --orange-border: #f59e0b66;
-  --green-base: #14ae5c;
-  --green-medium: #0c924b;
-  --green-dark: #076d37;
-  --green-light: #e9f9ef;
-  --green-hover: #22c55e19;
-  --green-focus: #22c55e33;
-  --green-border: #22c55e66;
-  --sidebar-base: #0a1936;
-}
-
-@mixin define-dark-colors() {
-  --typography-base: #ffffff;
-  --typography-muted: #8894a4;
-  --typography-light: #687586;
-  --typography-disabled: #4e5665;
-  --typography-contrast: #030a19;
-  --page-light: #030d21;
-  --page-shaded: #000104;
-  --card-header: #0a1a36;
-  --card-background: #030e23;
-  --separations-base: #1e3154;
-  --separations-input: #ffffff3f;
-  --separations-divider: #ffffff26;
-  --separations-overlay: #00000059;
-  --primary-base: #76a4fc;
-  --primary-medium: #5b83ce;
-  --primary-dark: #4466a4;
-  --primary-light: #e8f0ff;
-  --primary-hover: #76a4fc19;
-  --primary-focus: #76a4fc;
-  --primary-border: #76a4fc66;
-  --secondary-base: #d0b3fd;
-  --secondary-medium: #b88dfc;
-  --secondary-dark: #9e73e3;
-  --secondary-light: #f7f2ff;
-  --secondary-hover: #d0b3fd19;
-  --secondary-focus: #d0b3fd33;
-  --secondary-border: #d0b3fd66;
-  --red-base: #f15757;
-  --red-medium: #ef4444;
-  --red-dark: #bf3636;
-  --red-light: #fdecec;
-  --red-hover: #f58f8f19;
-  --red-focus: #f58f8f33;
-  --red-border: #f58f8f66;
-  --slate-base: #c7cdd5;
-  --slate-medium: #acb4bf;
-  --slate-dark: #748295;
-  --slate-light: #f1f3f4;
-  --slate-hover: #c7cdd519;
-  --slate-focus: #c7cdd54d;
-  --slate-border: #c7cdd566;
-  --orange-base: #f9c56d;
-  --orange-medium: #f7b13c;
-  --orange-dark: #f59e0b;
-  --orange-light: #fef5e7;
-  --orange-hover: #f9c56d19;
-  --orange-focus: #f9c56d33;
-  --orange-border: #f9c56d66;
-  --green-base: #7adc9e;
-  --green-medium: #4ed17e;
-  --green-dark: #22c55e;
-  --green-light: #e9f9ef;
-  --green-hover: #7adc9e19;
-  --green-focus: #7adc9e33;
-  --green-border: #7adc9e66;
-  --sidebar-base: #0a1936;
-}
-
-.light-theme {
-  @include define-light-colors;
-
-  background-color: var(--page-light);
-  color: var(--typography-base);
-}
-
-.dark-theme {
-  @include define-dark-colors;
-
-  background-color: var(--page-light);
-  color: var(--typography-base);
-}

package/scss/global/variables.scss

@@ -1,79 +0,0 @@
-// 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;
-
-  // shuttle-grey
-  --color-shuttle-gray: var(--color-shuttle-gray-500);
-  --color-shuttle-gray-50: #ecedef;
-  --color-shuttle-gray-100: #ced2d6;
-  --color-shuttle-gray-200: #aeb4bb;
-  --color-shuttle-gray-300: #8e95a0;
-  --color-shuttle-gray-400: #757f8b;
-  --color-shuttle-gray-500: #5d6877;
-  --color-shuttle-gray-600: #55606f;
-  --color-shuttle-gray-700: #4b5564;
-  --color-shuttle-gray-800: #414b5a;
-  --color-shuttle-gray-900: #303a47;
-  --color-shuttle-gray-A100: #97c2ff;
-  --color-shuttle-gray-A200: #64a4ff;
-  --color-shuttle-gray-A400: #3185ff;
-  --color-shuttle-gray-A700: #1876ff;
-
-  // gamboge
-  --color-gamboge: var(--color-gamboge-500);
-  --color-gamboge-50: #fbf1e2;
-  --color-gamboge-100: #f5ddb6;
-  --color-gamboge-200: #eec785;
-  --color-gamboge-300: #e7b054;
-  --color-gamboge-400: #e29f2f;
-  --color-gamboge-500: #dd8e0a;
-  --color-gamboge-600: #d98609;
-  --color-gamboge-700: #d47b07;
-  --color-gamboge-800: #cf7105;
-  --color-gamboge-900: #c75f03;
-  --color-gamboge-A100: #fff6ef;
-  --color-gamboge-A200: #ffd8bc;
-  --color-gamboge-A400: #ffba89;
-  --color-gamboge-A700: #ffab6f;
-}