@flywheel-io/vision 1.3.3 → 1.5.0

package/styles.css

@@ -1,65 +1,64 @@
 @import 'https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700';
-@import '@angular/cdk/overlay-prebuilt.css';
 /******************************************************
 Color Palettes for use with vision's theming system
 *******************************************************/
 .vision-light-theme {
-  --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;
+  --card-background: #ffffffff;
+  --card-header: #f9f9f9ff;
+  --green-base: #14ae5cff;
+  --green-border: #14ae5c66;
+  --green-dark: #076d37ff;
+  --green-focus: #14ae5c1a;
+  --green-hover: #14ae5c0d;
+  --green-light: #e9f9efff;
+  --green-medium: #0c924bff;
+  --orange-base: #c47e09ff;
+  --orange-border: #f59e0b66;
+  --orange-dark: #935f07ff;
+  --orange-focus: #f59e0b1a;
+  --orange-hover: #f59e0b0d;
+  --orange-light: #fef5e7ff;
+  --orange-medium: #ac6f08ff;
+  --page-light: #ffffffff;
+  --page-shaded: #f1f3f4ff;
+  --primary-base: #1b68faff;
   --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;
+  --primary-dark: #103e96ff;
+  --primary-focus: #1b69fa1a;
+  --primary-hover: #1b69fa0d;
+  --primary-light: #e8f0ffff;
+  --primary-medium: #1653c8ff;
+  --red-base: #d73d3dff;
   --red-border: #f0434366;
-  --slate-base: #748295;
-  --slate-medium: #5d6877;
-  --slate-dark: #464e59;
-  --slate-light: #f1f3f4;
-  --slate-hover: #74829519;
-  --slate-focus: #7482951a;
+  --red-dark: #782222ff;
+  --red-focus: #f043431a;
+  --red-hover: #f043430d;
+  --red-light: #fdececff;
+  --red-medium: #a73030ff;
+  --secondary-base: #b080fcff;
+  --secondary-border: #b081fc66;
+  --secondary-dark: #6a4d97ff;
+  --secondary-focus: #b081fc1a;
+  --secondary-hover: #b081fc0d;
+  --secondary-light: #f7f2ffff;
+  --secondary-medium: #8d66caff;
+  --separations-base: #e3e6eaff;
+  --separations-divider: #00000026;
+  --separations-input: #00000040;
+  --separations-overlay: #00000040;
+  --sidebar-base: #0a1936ff;
+  --slate-base: #748295ff;
   --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;
+  --slate-dark: #464e59ff;
+  --slate-focus: #7482951a;
+  --slate-hover: #7482950d;
+  --slate-light: #f1f3f4ff;
+  --slate-medium: #5d6877ff;
+  --typography-base: #000000ff;
+  --typography-contrast: #ffffffff;
+  --typography-disabled: #c4c4c4ff;
+  --typography-light: #8996a9ff;
+  --typography-muted: #5d6877ff;
   background-color: var(--page-light);
   color: var(--typography-base);
 }
@@ -1904,62 +1903,62 @@ Color Palettes for use with vision's theming system
 }
 
 .vision-dark-theme {
-  --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;
+  --card-background: #030e23ff;
+  --card-header: #0a1a36ff;
+  --green-base: #7adc9eff;
+  --green-border: #7adc9e80;
+  --green-dark: #22c55eff;
+  --green-focus: #7adc9e4d;
+  --green-hover: #7adc9e33;
+  --green-light: #e9f9efff;
+  --green-medium: #4ed17eff;
+  --orange-base: #f9c56dff;
+  --orange-border: #f9c56d80;
+  --orange-dark: #f59e0bff;
+  --orange-focus: #f9c56d4d;
+  --orange-hover: #f9c56d33;
+  --orange-light: #fef5e7ff;
+  --orange-medium: #f7b13cff;
+  --page-light: #000102ff;
+  --page-shaded: #000104ff;
+  --primary-base: #76a4fcff;
+  --primary-border: #76a4fc80;
+  --primary-dark: #4466a4ff;
+  --primary-focus: #76a4fc4d;
+  --primary-hover: #76a4fc33;
+  --primary-light: #e8f0ffff;
+  --primary-medium: #5b83ceff;
+  --red-base: #f15757ff;
+  --red-border: #f58f8f80;
+  --red-dark: #bf3636ff;
+  --red-focus: #f58f8f4d;
+  --red-hover: #f58f8f33;
+  --red-light: #fdececff;
+  --red-medium: #ef4444ff;
+  --secondary-base: #d0b3fdff;
+  --secondary-border: #d0b3fd80;
+  --secondary-dark: #9e73e3ff;
+  --secondary-focus: #d0b3fd4d;
+  --secondary-hover: #d0b3fd33;
+  --secondary-light: #f7f2ffff;
+  --secondary-medium: #b88dfcff;
+  --separations-base: #1e3154ff;
+  --separations-divider: #ffffff33;
+  --separations-input: #ffffff59;
   --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;
+  --sidebar-base: #0a1936ff;
+  --slate-base: #c7cdd5ff;
+  --slate-border: #c7cdd580;
+  --slate-dark: #748295ff;
   --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;
+  --slate-hover: #c7cdd533;
+  --slate-light: #f1f3f4ff;
+  --slate-medium: #acb4bfff;
+  --typography-base: #ffffffff;
+  --typography-contrast: #030a19ff;
+  --typography-disabled: #4e5665ff;
+  --typography-light: #8595abff;
+  --typography-muted: #cad7e7ff;
   background-color: var(--page-light);
   color: var(--typography-base);
 }
@@ -3873,6 +3872,64 @@ Color Palettes for use with vision's theming system
   font-weight: 400;
 }
 
+.vision-link {
+  text-decoration: underline;
+  color: var(--primary-base);
+  cursor: pointer;
+}
+.vision-link:hover {
+  text-decoration: none;
+}
+.vision-link:active {
+  text-decoration: none;
+  outline: 2px solid var(--primary-dark);
+  border-radius: 4px;
+}
+.vision-link:visited {
+  color: var(--secondary-base);
+}
+
+.vision-link-inherited {
+  text-decoration: underline;
+  color: var(--primary-base);
+  cursor: pointer;
+  color: inherit;
+}
+.vision-link-inherited:hover {
+  text-decoration: none;
+}
+.vision-link-inherited:active {
+  text-decoration: none;
+  outline: 2px solid var(--primary-dark);
+  border-radius: 4px;
+}
+.vision-link-inherited:visited {
+  color: var(--secondary-base);
+}
+.vision-link-inherited:visited {
+  color: inherit;
+}
+
+.vision-link-no-visited {
+  text-decoration: underline;
+  color: var(--primary-base);
+  cursor: pointer;
+}
+.vision-link-no-visited:hover {
+  text-decoration: none;
+}
+.vision-link-no-visited:active {
+  text-decoration: none;
+  outline: 2px solid var(--primary-dark);
+  border-radius: 4px;
+}
+.vision-link-no-visited:visited {
+  color: var(--secondary-base);
+}
+.vision-link-no-visited:visited {
+  color: var(--primary-base);
+}
+
 .vision-shadow-extra-large {
   box-shadow: 0 8px 25px 0 rgba(0, 0, 0, 0.1);
 }
@@ -3893,10 +3950,6 @@ Color Palettes for use with vision's theming system
   box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08) inset;
 }
 
-.vision-overlay {
-  background-color: var(--separations-overlay);
-}
-
 .mat-badge-content {
   font-weight: 600;
   font-size: 12px;
@@ -4721,6 +4774,23 @@ p {
   font-weight: 400;
 }
 
+a {
+  text-decoration: underline;
+  color: var(--primary-base);
+  cursor: pointer;
+}
+a:hover {
+  text-decoration: none;
+}
+a:active {
+  text-decoration: none;
+  outline: 2px solid var(--primary-dark);
+  border-radius: 4px;
+}
+a:visited {
+  color: var(--secondary-base);
+}
+
 .vision-icon, [class^=icon-], [class*=" icon-"] { /* use !important to prevent issues with browser extensions that change fonts */
   font-family: Flywheel-Vision-Icons, emoji !important;
   speak: never;
@@ -5926,6 +5996,95 @@ p {
   font-style: normal;
   font-display: block;
 }
+.vision-overlay {
+  background-color: var(--separations-overlay);
+}
+
+.cdk-overlay-container, .cdk-global-overlay-wrapper {
+  pointer-events: none;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+}
+
+.cdk-overlay-container {
+  position: fixed;
+  z-index: 1100;
+}
+
+.cdk-overlay-container:empty {
+  display: none;
+}
+
+.cdk-global-overlay-wrapper {
+  display: flex;
+  position: absolute;
+  z-index: 1100;
+}
+
+.cdk-overlay-pane {
+  position: absolute;
+  pointer-events: auto;
+  box-sizing: border-box;
+  z-index: 1100;
+  display: flex;
+  max-width: 100%;
+  max-height: 100%;
+}
+
+.cdk-overlay-backdrop {
+  position: absolute;
+  inset: 0;
+  z-index: 1100;
+  pointer-events: auto;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
+  opacity: 0;
+}
+
+.cdk-overlay-backdrop.cdk-overlay-backdrop-showing {
+  opacity: 1;
+}
+
+.cdk-high-contrast-active .cdk-overlay-backdrop.cdk-overlay-backdrop-showing {
+  opacity: 0.6;
+}
+
+.cdk-overlay-dark-backdrop {
+  background: rgba(0, 0, 0, 0.32);
+}
+
+.cdk-overlay-transparent-backdrop {
+  transition: visibility 1ms linear, opacity 1ms linear;
+  visibility: hidden;
+  opacity: 1;
+}
+
+.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing {
+  opacity: 0;
+  visibility: visible;
+}
+
+.cdk-overlay-backdrop-noop-animation {
+  transition: none;
+}
+
+.cdk-overlay-connected-position-bounding-box {
+  position: absolute;
+  z-index: 1100;
+  display: flex;
+  flex-direction: column;
+  min-width: 1px;
+  min-height: 1px;
+}
+
+.cdk-global-scrollblock {
+  position: fixed;
+  width: 100%;
+  overflow-y: scroll;
+}
+
 .mat-ripple-element {
   background-color: rgba(0, 0, 0, 0.1);
 }