@flywheel-io/vision 0.16.1 → 1.0.0

package/global.scss

@@ -1,34 +1,10 @@
-@use '@angular/material' as mat;
-@use './scss/config/theme';
-@use './scss/icons/icons';
 @use './public-api' as vision;
+@use '@angular/material' as mat;
 
-@include vision.global-typography;
-
-// Include the common styles for Angular Material. We include this here so that you only
-// have to load a single css file for Angular Material in your app.
-// Be sure that you only ever include this mixin once!
 @include mat.core;
 
-// Include theme styles for core and each component used in your app.
-// Alternatively, you can import and @include the theme mixins for each component
-// that you are using.
-@include mat.all-component-themes(theme.$vision-theme);
-
-// Override accent color in some components
-@include mat.checkbox-color(theme.$vision-accent-override);
-@include mat.pseudo-checkbox-color(theme.$vision-accent-override); // within lists and stuff
-@include mat.radio-color(theme.$vision-accent-override);
-@include mat.slide-toggle-color(theme.$vision-accent-override);
-@include mat.slider-color(theme.$vision-accent-override);
-
-// Google Fonts
-@import 'https://fonts.googleapis.com/icon?family=Material+Icons';
-
-// Config
-@import './scss/config/colors';
-@import './scss/config/general';
-@import './scss/global/variables';
+@include vision.global-typography;
+@include vision.icons;
+@include vision.mat-theme;
 
-// Material
-@import './scss/material/overrides';
+@import '@angular/cdk/overlay-prebuilt.css';

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@flywheel-io/vision",
-  "version": "0.16.1",
+  "version": "1.0.0",
   "description": "Flywheel UI elements provided as Angular components and native web components",
-  "author": "Jody Zeitler <jody.zeitler@gmail.com>",
+  "author": "Flywheel",
   "license": "MIT",
   "dependencies": {
     "document-register-element": "^1.7.2",

package/public-api.d.ts

@@ -4,6 +4,11 @@ export * from './components/app-icon/app-icon.component';
 export * from './components/app-icon/app-icon.module';
 export * from './components/avatar/avatar.component';
 export * from './components/avatar/avatar.module';
+export * from './components/badge/badge.component';
+export * from './components/badge/badge.module';
+export * from './components/breadcrumbs/breadcrumbs.component';
+export * from './components/breadcrumbs/breadcrumbs.module';
+export * from './components/breadcrumbs/crumb.component';
 export * from './components/button/button.component';
 export * from './components/button/button.directives';
 export * from './components/button/button.module';
@@ -17,6 +22,7 @@ export * from './components/card/card-header/card-header.component';
 export * from './components/chip/chip.component';
 export * from './components/chip/chip.module';
 export * from './components/dialog/dialog.component';
+export * from './components/dialog/dialog.service';
 export * from './components/dialog/dialog-confirm.component';
 export * from './components/dialog/dialog-simple.component';
 export * from './components/dialog/dialogs.module';
@@ -25,6 +31,7 @@ export * from './components/icon/icon.module';
 export * from './components/icon-button/icon-button.component';
 export * from './components/icon-button/icon-button.module';
 export * from './components/layouts/context/context.component';
+export * from './components/layouts/grid/grid.component';
 export * from './components/layouts/layout-group.component';
 export * from './components/layouts/layouts.module';
 export * from './components/layouts/toolbar/toolbar.component';
@@ -39,18 +46,19 @@ export * from './components/legacy/notification/notification.service';
 export * from './components/legacy/notification/notification/notification.component';
 export * from './components/legacy/notification/notification/notification.model';
 export * from './components/legacy/notification/notification-container/notification-container.component';
-export * from './components/legacy/popover/popover.component';
-export * from './components/legacy/popover/popover.module';
-export * from './components/legacy/popover/popover-trigger.component';
-export * from './components/legacy/popover/popover-trigger.directive';
 export * from './components/menu/menu.component';
 export * from './components/menu/menu.module';
 export * from './components/menu/menu-container/menu-container.component';
 export * from './components/menu/menu-header/menu-header.component';
 export * from './components/menu/menu-item/menu-item.component';
 export * from './components/menu/menu-separator/menu-separator.component';
+export * from './components/popover/popover.component';
+export * from './components/popover/popover.module';
+export * from './components/popover/popover-panel/popover-panel.component';
 export * from './components/section-heading/section-heading.component';
 export * from './components/section-heading/section-heading.module';
+export * from './components/section-heading/subsection-heading/subsection-heading.component';
+export * from './components/section-heading/subsection-heading/subsection-heading.component';
 export * from './components/select-menu/multi-select-menu/multi-select-menu.component';
 export * from './components/select-menu/select-menu.component';
 export * from './components/select-menu/select-menu.module';
@@ -63,5 +71,12 @@ export * from './components/snackbar/snackbar-message.model';
 export * from './components/stepper/step.component';
 export * from './components/stepper/stepper.component';
 export * from './components/stepper/stepper.module';
+export * from './components/tabs/tab/tab.component';
+export * from './components/tabs/tab-panel/tab-panel.component';
+export * from './components/tabs/tabs.component';
+export * from './components/tabs/tabs.module';
 export * from './components/text-input/text-input.component';
 export * from './components/text-input/text-input.module';
+export * from './components/tooltip/tooltip.component';
+export * from './components/tooltip/tooltip.module';
+export * from './components/tooltip/tooltip-panel/tooltip-panel.component';

package/public-api.scss

@@ -1,2 +1,5 @@
-@forward './scss/config/vision-colors';
+@forward './scss/config/colors';
 @forward './scss/config/typography';
+@forward './scss/config/shadows';
+@forward './scss/material/theme.scss';
+@forward './scss/icons/icons.scss';

package/scss/config/colors.scss

@@ -1,171 +1,146 @@
-@use "sass:map";
-@use "sass:color";
-@use './theme';
-
-// generates classes used for applying either 'color' or 'background-color' properties
-// for example:
-// .blue { color: #5871a2; }
-// .fill-blue { background-color: #5871a2; }
-@mixin generate-color-classes($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;
+/******************************************************
+Color Palettes for use with vision's theming system
+*******************************************************/
+@use '../material/theme.scss' as theme;
+
+@mixin colors($theme: light) {
+  html {
+    @include define-colors($theme);
   }
+}
 
-  .border-left-#{"" + $name} {
-    border-left: 1px solid;
-    border-color: $color !important;
+@mixin define-colors($theme: light) {
+  @if $theme == light {
+    --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;
+  } @else if $theme == dark {
+    --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: #76A4FC4D;
+    --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;
   }
 }
 
-// color naming resource https://chir.ag/projects/name-that-color/#6195ED
-
-// general purpose colors
-$white: #ffffff;
-
-@include generate-color-classes(white, $white);
-
-$black: #000000;
-
-@include generate-color-classes(black, $black);
-
-$green: #59b96b;
-
-@include generate-color-classes(green, $green);
-
-$orange: #f7941d;
-
-@include generate-color-classes(orange, $orange);
-
-$red: #de584c;
-
-@include generate-color-classes(red, $red);
-
-$light-red: #f8e5e4;
-
-@include generate-color-classes(light-red, $light-red);
-
-$blue: #5871a2;
-
-@include generate-color-classes(blue, $blue);
-
-$focus-blue: #23527c;
-
-@include generate-color-classes(focus-blue, $focus-blue);
-
-$dark-blue: #394256;
-
-@include generate-color-classes(dark-blue, $dark-blue);
-
-$light-blue: #e7effe;
-
-@include generate-color-classes(light-blue, $light-blue);
-
-$bright-blue: map.get($map: theme.$flywheel-blue, $key: 500);
-
-@include generate-color-classes(bright-blue, $bright-blue);
-
-$admin-black: #01010a;
-
-@include generate-color-classes(admin-black, $admin-black);
+.vision-light-theme {
+  @include define-colors(light);
 
-$accent-purple: #b080fc;
+  @include theme.mat-theme-colors;
 
-@include generate-color-classes(accent-purple, $accent-purple);
-
-
-// greys
-$grey: #58595b;
-
-@include generate-color-classes(grey, $grey);
-
-$soft-grey: #dddede;
-
-@include generate-color-classes(soft-grey, $soft-grey);
-
-$light-grey: #eeeeee;
-
-@include generate-color-classes(light-grey, $light-grey);
-
-$medium-grey: #cccccc;
-
-@include generate-color-classes(medium-grey, $medium-grey);
-
-$medium-dark-grey: #999999;
-
-@include generate-color-classes(medium-dark-grey, $medium-dark-grey);
-
-$dark-grey: #222222;
-
-@include generate-color-classes(dark-grey, $dark-grey);
-
-$shuttle-gray: #5d6877;
-
-@include generate-color-classes(shuttle-gray, $shuttle-gray);
-
-$gull-gray: #9ea8b5;
-
-@include generate-color-classes(gull-gray, $gull-gray);
-
-// blueish greys
-$soft-blue: #eff1f5;
-
-@include generate-color-classes(soft-blue, $soft-blue);
-
-$dark-soft-blue: color.adjust($soft-blue, $lightness: -2%);
-
-@include generate-color-classes(dark-soft-blue, $dark-soft-blue);
-
-$darker-soft-blue: color.adjust($soft-blue, $lightness: -3%);
-
-@include generate-color-classes(darker-soft-blue, $darker-soft-blue);
-
-$light-soft-blue: color.adjust($soft-blue, $lightness: -2%);
-
-@include generate-color-classes(light-soft-blue, $light-soft-blue);
-
-$lighter-soft-blue: color.adjust($soft-blue, $lightness: -3%);
-
-@include generate-color-classes(lighter-soft-blue, $lighter-soft-blue);
-
-$eucalyptus: #1b9e4b;
-
-@include generate-color-classes(eucalyptus, $eucalyptus);
-
-$gamboge: #dd8e0a;
-
-@include generate-color-classes(gamboge, $gamboge);
-
-$valencia: #d73d3d;
-
-@include generate-color-classes(valencia, $valencia);
+  background-color: var(--page-light);
+  color: var(--typography-base);
+}
 
-// border
-$soft-blue-border: color.adjust($soft-blue, $lightness: -8%);
+.vision-dark-theme {
+  @include define-colors(dark);
 
+  @include theme.mat-dark-theme-colors;
 
-// text
-$red-text: #de6a6a;
-$orange-text: color.adjust($orange, $lightness: -10%);
+  background-color: var(--page-light);
+  color: var(--typography-base);
+}

package/scss/config/shadows.scss

@@ -0,0 +1,23 @@
+.vision-shadow-extra-large {
+  box-shadow: 0 8px 25px 0 rgba(0, 0, 0, 0.10);
+}
+
+.vision-shadow-large {
+  box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.10);
+}
+
+.vision-shadow-medium {
+  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.10);
+}
+
+.vision-shadow-small {
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+}
+
+.vision-shadow-inner {
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08) inset;
+}
+
+.vision-overlay {
+  background-color: var(--separations-overlay);
+}

package/scss/icons/_icon-font-face.scss

@@ -1,9 +1,11 @@
-@font-face {
-  font-family: Flywheel-Vision-Icons;
-  src: url('../../assets/fonts/Flywheel-Vision-Icons.ttf?loixto') format('truetype'),
-  url('../../assets/fonts/Flywheel-Vision-Icons.woff?loixto') format('woff'),
-  url('../../assets/fonts/Flywheel-Vision-Icons.svg?loixto#Flywheel-Vision-Icons') format('svg');
-  font-weight: normal;
-  font-style: normal;
-  font-display: block;
+@mixin define-icon-font-face() {
+  @font-face {
+    font-family: Flywheel-Vision-Icons;
+    src: url('../../assets/fonts/Flywheel-Vision-Icons.ttf?loixto') format('truetype'),
+    url('../../assets/fonts/Flywheel-Vision-Icons.woff?loixto') format('woff'),
+    url('../../assets/fonts/Flywheel-Vision-Icons.svg?loixto#Flywheel-Vision-Icons') format('svg');
+    font-weight: normal;
+    font-style: normal;
+    font-display: block;
+  }
 }

package/scss/icons/icons.scss

@@ -1,4 +1,11 @@
-@use './icon-font-face';
 @use './icon-glyphs' as glyphs;
+@use './icon-font-face' as font-face;
+
+@mixin icons ($include-font-face: true) {
+  @include glyphs.icon-glyphs;
+
+  @if $include-font-face {
+    @include font-face.define-icon-font-face;
+  }
+}
 
-@include glyphs.icon-glyphs;