@progressio_resources/gravity-design-system 1.0.6 → 1.0.7

package/src/lib/styles/_icons.scss

@@ -0,0 +1,11 @@
+svg-icon svg {
+  --icon-color: var(--icon-active-primary);
+  height: 1rem;
+  width: 1rem;
+}
+
+svg-icon {
+  &:hover, *:hover {
+    --icon-color: var(--icon-hover-primary);
+  }
+}

package/src/lib/styles/_link.scss

@@ -0,0 +1,25 @@
+.gravity-link {
+  color: var(--link-color);
+  text-decoration: underline;
+  text-decoration-color: var(--link-underline-color);
+
+  &:not([disabled]) {
+    --link-color: var(--link-active-primary);
+    --link-underline-color: var(--link-active-primary);
+
+    &:hover {
+      background-color: var(--bg-link-hover-primary);
+      --link-color: var(--link-hover-primary);
+    }
+
+    &:active {
+      --link-color: var(--link-pressed-primary);
+    }
+  }
+
+  &[disabled] {
+    --link-color: var(--link-disabled-primary);
+    --link-underline-color: var(--link-disabled-primary);
+    pointer-events: none;
+  }
+}

package/src/lib/styles/_shared.scss

@@ -0,0 +1,19 @@
+$border-radius-system: 0.625rem;
+
+.text-negative {
+  color: var(--negative-primary);
+}
+
+.text-neutro {
+  color: var(--text-primary);
+}
+
+.text-positive {
+  color: var(--positive-primary);
+}
+
+.support-text {
+  margin-left: 0;
+  margin-top: 0.3125rem;
+  padding-inline: 1rem;
+}

package/src/lib/styles/fundamentals/colors/themes/_hero.theme.scss

@@ -22,15 +22,15 @@ $bg-dialog-primary-light: $n900;
 $label-text-full-read-only-primary-dark: $n800;
 $input-text-full-read-only-primary-dark: $n800;
 $input-text-full-disabled-primary-dark: $n300;
-$placeholder-empty-enabled-pressed-primary-dark: $n800;
+$placeholder-full-enabled-pressed-primary-dark: $n800;
 $label-text-full-read-only-primary-light: $n400;
 $bg-field-full-read-only-primary-light: $n800;
 $label-text-full-disabled-primary-light: $n700;
 $bg-field-full-disabled-primary-light: $n800;
-$label-text-empty-enabled-pressed-primary-light: $n400;
-$placeholder-empty-enabled-pressed-primary-light: $n400;
-$outline-field-empty-enabled-pressed-primary-light: $b400;
-$bg-field-empty-enabled-pressed-primary-light: $n900;
+$label-text-full-enabled-pressed-primary-light: $n400;
+$placeholder-full-enabled-pressed-primary-light: $n400;
+$outline-field-full-enabled-pressed-primary-light: $b400;
+$bg-field-full-enabled-pressed-primary-light: $n900;
 $label-text-empty-disabled-primary-light: $n700;
 $placeholder-empty-disabled-primary-light: $n700;
 $bg-field-empty-disabled-primary-light: $n800;
@@ -56,15 +56,15 @@ $input-text-full-enabled-primary-light: $n400;
 $bg-field-empty-enabled-hover-primary-light: $n800;
 $outline-field-empty-enabled-primary-dark: $n800;
 $bg-field-full-read-only-primary-dark: $n300;
-$bg-field-empty-enabled-pressed-primary-dark: $n100;
+$bg-field-full-enabled-pressed-primary-dark: $n100;
 $label-text-empty-disabled-primary-dark: $n300;
 $bg-field-full-disabled-primary-dark: $n200;
 $input-text-full-read-only-primary-light: $n400;
 $input-text-full-disabled-primary-light: $n700;
 $placeholder-empty-disabled-primary-dark: $n300;
 $label-text-full-disabled-primary-dark: $n300;
-$label-text-empty-enabled-pressed-primary-dark: $n800;
-$outline-field-empty-enabled-pressed-primary-dark: $b700;
+$label-text-full-enabled-pressed-primary-dark: $n800;
+$outline-field-full-enabled-pressed-primary-dark: $b700;
 
 // system
 $alternative-primary-light: $o300;
@@ -127,7 +127,7 @@ $bg-link-hover-primary-dark: $n300;
 $link-pressed-primary-dark: $b600;
 
 // notification
-$notification-sucess-highlight-primary-light: $g300;
+$notification-success-highlight-primary-light: $g300;
 $bg-icon-notification-success-primary-light: $g500;
 $notification-error-highlight-primary-light: $r400;
 $notification-warning-highlight-primary-dark: $o400;
@@ -138,7 +138,7 @@ $on-bg-icon-notification-warning-primary-dark: $o200;
 $on-bg-icon-notification-error-primary-light: $r200;
 $bg-icon-notification-error-primary-dark: $r600;
 $on-bg-icon-notification-success-primary-light: $g100;
-$notification-sucess-highlight-primary-dark: $g500;
+$notification-success-highlight-primary-dark: $g500;
 $bg-icon-notification-success-primary-dark: $g500;
 $notification-warning-highlight-primary-light: $o300;
 $notification-error-highlight-primary-dark: $r600;
@@ -389,3 +389,6 @@ $logo-primary-dark: $b700;
 // text
 $text-primary-dark: $n800;
 $text-primary-light: $n400;
+
+$hero-light-theme: (radio-button-on-primary: $radio-button-on-primary-light);
+$hero-dark-theme: (radio-button-on-primary: $radio-button-on-primary-dark);

package/src/lib/styles/fundamentals/colors/tokens/_hero.tokens.scss

@@ -6,9 +6,9 @@
   --input-text-full-read-only-primary: #{$input-text-full-read-only-primary-light};
   --label-text-full-disabled-primary: #{$label-text-full-disabled-primary-light};
   --input-text-full-disabled-primary: #{$input-text-full-disabled-primary-light};
-  --label-text-empty-enabled-pressed-primary: #{$label-text-empty-enabled-pressed-primary-light};
-  --placeholder-empty-enabled-pressed-primary: #{$placeholder-empty-enabled-pressed-primary-light};
-  --bg-field-empty-enabled-pressed-primary: #{$bg-field-empty-enabled-pressed-primary-light};
+  --label-text-full-enabled-pressed-primary: #{$label-text-full-enabled-pressed-primary-light};
+  --placeholder-full-enabled-pressed-primary: #{$placeholder-full-enabled-pressed-primary-light};
+  --bg-field-full-enabled-pressed-primary: #{$bg-field-full-enabled-pressed-primary-light};
   --bg-field-empty-disabled-primary: #{$bg-field-empty-disabled-primary-light};
   --label-text-full-enabled-primary: #{$label-text-full-enabled-primary-light};
   --input-text-full-enabled-primary: #{$input-text-full-enabled-primary-light};
@@ -21,7 +21,7 @@
   --bg-field-empty-enabled-primary: #{$bg-field-empty-enabled-primary-light};
   --bg-field-full-disabled-primary: #{$bg-field-full-disabled-primary-light};
   --bg-field-full-enabled-hover-primary: #{$bg-field-full-enabled-hover-primary-light};
-  --outline-field-empty-enabled-pressed-primary: #{$outline-field-empty-enabled-pressed-primary-light};
+  --outline-field-full-enabled-pressed-primary: #{$outline-field-full-enabled-pressed-primary-light};
   --placeholder-empty-disabled-primary: #{$placeholder-empty-disabled-primary-light};
   --bg-field-full-read-only-primary: #{$bg-field-full-read-only-primary-light};
   --label-text-empty-disabled-primary: #{$label-text-empty-disabled-primary-light};
@@ -107,7 +107,7 @@
   --on-bg-icon-notification-success-primary: #{$on-bg-icon-notification-success-primary-light};
   --bg-icon-notification-warning-primary: #{$bg-icon-notification-warning-primary-light};
   --notification-warning-highlight-primary: #{$notification-warning-highlight-primary-light};
-  --notification-sucess-highlight-primary: #{$notification-sucess-highlight-primary-light};
+  --notification-success-highlight-primary: #{$notification-success-highlight-primary-light};
   --on-bg-icon-notification-warning-primary: #{$on-bg-icon-notification-warning-primary-light};
   --on-bg-notification-primary: #{$on-bg-notification-primary-light};
   --bg-icon-notification-error-primary: #{$bg-icon-notification-error-primary-light};
@@ -226,18 +226,15 @@
   --text-primary: #{$text-primary-light};
 }
 
-
-
 .hero-dark-theme {
-
   // text-field
   --label-text-full-read-only-primary: #{$label-text-full-read-only-primary-dark};
   --input-text-full-read-only-primary: #{$input-text-full-read-only-primary-dark};
   --label-text-full-disabled-primary: #{$label-text-full-disabled-primary-dark};
   --input-text-full-disabled-primary: #{$input-text-full-disabled-primary-dark};
-  --label-text-empty-enabled-pressed-primary: #{$label-text-empty-enabled-pressed-primary-dark};
-  --placeholder-empty-enabled-pressed-primary: #{$placeholder-empty-enabled-pressed-primary-dark};
-  --bg-field-empty-enabled-pressed-primary: #{$bg-field-empty-enabled-pressed-primary-dark};
+  --label-text-full-enabled-pressed-primary: #{$label-text-full-enabled-pressed-primary-dark};
+  --placeholder-full-enabled-pressed-primary: #{$placeholder-full-enabled-pressed-primary-dark};
+  --bg-field-full-enabled-pressed-primary: #{$bg-field-full-enabled-pressed-primary-dark};
   --bg-field-empty-disabled-primary: #{$bg-field-empty-disabled-primary-dark};
   --label-text-full-enabled-primary: #{$label-text-full-enabled-primary-dark};
   --input-text-full-enabled-primary: #{$input-text-full-enabled-primary-dark};
@@ -250,7 +247,7 @@
   --bg-field-empty-enabled-primary: #{$bg-field-empty-enabled-primary-dark};
   --bg-field-full-disabled-primary: #{$bg-field-full-disabled-primary-dark};
   --bg-field-full-enabled-hover-primary: #{$bg-field-full-enabled-hover-primary-dark};
-  --outline-field-empty-enabled-pressed-primary: #{$outline-field-empty-enabled-pressed-primary-dark};
+  --outline-field-full-enabled-pressed-primary: #{$outline-field-full-enabled-pressed-primary-dark};
   --placeholder-empty-disabled-primary: #{$placeholder-empty-disabled-primary-dark};
   --bg-field-full-read-only-primary: #{$bg-field-full-read-only-primary-dark};
   --label-text-empty-disabled-primary: #{$label-text-empty-disabled-primary-dark};
@@ -336,7 +333,7 @@
   --on-bg-icon-notification-success-primary: #{$on-bg-icon-notification-success-primary-dark};
   --bg-icon-notification-warning-primary: #{$bg-icon-notification-warning-primary-dark};
   --notification-warning-highlight-primary: #{$notification-warning-highlight-primary-dark};
-  --notification-sucess-highlight-primary: #{$notification-sucess-highlight-primary-dark};
+  --notification-success-highlight-primary: #{$notification-success-highlight-primary-dark};
   --on-bg-icon-notification-warning-primary: #{$on-bg-icon-notification-warning-primary-dark};
   --on-bg-notification-primary: #{$on-bg-notification-primary-dark};
   --bg-icon-notification-error-primary: #{$bg-icon-notification-error-primary-dark};
@@ -453,4 +450,9 @@
 
   // text
   --text-primary: #{$text-primary-dark};
+
+  //
+  //@each $name, $value in $hero-dark-theme {
+  //  --#{$name}: #{$value};
+  //}
 }

package/src/lib/styles/fundamentals/typography/_hero.typography.scss

@@ -57,7 +57,6 @@ body {
 }
 
 .hr-title {
-
   &.sm-regular {
     font-size: $font-size-16px;
     font-weight: 420;

package/src/lib/styles/gravity-design-system.scss

@@ -0,0 +1,7 @@
+@import "./fundamentals/colors/tokens/hero.tokens";
+@import "./fundamentals/typography/hero.typography";
+@import "./overwrite/pretty-checkbox/pretty-checkbox.scss";
+@import "./card_highlight";
+@import "./datepicker";
+@import "./icons";
+@import "./link";

package/src/lib/styles/overwrite/pretty-checkbox/_core.scss

@@ -0,0 +1,120 @@
+@charset "utf-8";
+
+.#{$pretty--class-name} * {
+  box-sizing: border-box;
+}
+
+//Throw error on invalid input types.
+.#{$pretty--class-name} input:not([type='checkbox']):not([type='radio']) {
+  display: none;
+
+  @if $pretty--debug {
+    + *:after {
+      content: $pretty--err-message;
+      border: 1px solid #dedede;
+      border-left: 3px solid #d9534f;
+      padding: 9px;
+      font-size: 1em;
+      font-weight: 600;
+      color: #d9534f;
+      position: absolute;
+      z-index: 3;
+      background: #fbfbfb;
+      top: 0;
+      left: 0;
+    }
+  }
+}
+
+.#{$pretty--class-name} {
+  position: relative;
+  display: inline-block;
+  margin-right: 1em;
+  white-space: nowrap;
+  line-height: 1;
+
+  &:not(.p-switch){
+      input[type="checkbox"] {
+        &:not(:checked) ~ .state label:before {
+          border-color: var(--outline-checkbox-off-primary);
+        }
+
+        &:checked ~ .state {
+          label:after {
+            background-color: var(--bg-checkbox-on-primary);
+          }
+
+          svg-icon svg path {
+            fill: var(--on-bg-checkbox-on-primary);
+            stroke: var(--on-bg-checkbox-on-primary);
+          }
+        }
+        &:disabled ~ .state {
+          label:before {
+            border-color: var(--bg-button-disabled);
+          }
+        }
+        &:disabled:checked ~ .state {
+          label:after {
+            background-color: var(--bg-button-disabled);
+          }
+
+          svg-icon svg path {
+            fill: var(--on-bg-disabled);
+            stroke: var(--on-bg-disabled);
+          }
+        }
+
+      }
+  }
+
+  input {
+    position: absolute;
+    left: 0;
+    top: 0;
+    min-width: 1em;
+    width: 100%;
+    height: 100%;
+    z-index: $pretty--z-index-front;
+    opacity: 0;
+    margin: 0;
+    padding: 0;
+    cursor: pointer;
+  }
+
+  .state {
+    label {
+      position: initial;
+      display: inline-block;
+      font-weight: normal;
+      margin: 0;
+      text-indent: $pretty--label-text-offset;
+      min-width: $pretty--box-size;
+
+      &:before,
+      &:after {
+        content: '';
+        width: $pretty--box-size;
+        height: $pretty--box-size;
+        display: block;
+        box-sizing: border-box;
+        border-radius: 0;
+        border: 1px solid transparent;
+        z-index: $pretty--z-index-back;
+        position: absolute;
+        left: 0;
+        top: $pretty-top-offset;
+        background-color: transparent;
+      }
+
+      &:before {
+        border-color: $pretty--color-default;
+      }
+    }
+
+    &.p-is-hover,
+    &.p-is-indeterminate {
+      display: none;
+    }
+  }
+}

package/src/lib/styles/overwrite/pretty-checkbox/_variables.scss

@@ -0,0 +1,39 @@
+$pretty--class-name: pretty !default;
+
+// colors
+$pretty--color-default: #bdc3c7 !default;
+$pretty--color-primary: #428bca !default;
+$pretty--color-info: #5bc0de !default;
+$pretty--color-success: #5cb85c !default;
+$pretty--color-warning: #f0ad4e !default;
+$pretty--color-danger: #d9534f !default;
+$pretty--color-dark: #5a656b !default;
+
+// z-index
+$pretty--z-index-back: 0 !default;
+$pretty--z-index-between: 1 !default;
+$pretty--z-index-front: 2 !default;
+
+// box
+$pretty--curve-radius: 20% !default;
+$pretty--box-size: calc(1em + 2px) !default;
+
+// text
+$pretty--label-text-offset: 1.5em !default;
+$pretty--label-text-offset-switch: 2.5em !default;
+
+// scale
+$pretty--2x: 1.2em !default;
+
+// color set
+$pretty--colors: (primary, $pretty--color-primary), (info, $pretty--color-info), (success, $pretty--color-success), (warning, $pretty--color-warning), (danger, $pretty--color-danger) !default;
+
+// position
+$pretty-top: 7;
+$pretty-top-switch: ($pretty-top * 2) * 1%;
+$pretty-top-offset: calc((0% - (100% - 1em)) - #{$pretty-top * 1%});
+$pretty-top-offset-switch: calc((0% - (100% - 1em)) - #{$pretty-top-switch});
+
+// dev 
+$pretty--debug: false !default;
+$pretty--err-message: 'Error: Invalid input type!' !default;

package/src/lib/styles/overwrite/pretty-checkbox/elements/default/_outline.scss

@@ -0,0 +1,41 @@
+.#{$pretty--class-name}.p-default {
+  .state label {
+    &:after {
+      transform: scale(0.6);
+    }
+  }
+
+  input:checked ~ .state label {
+    &:after {
+      background-color: $pretty--color-default !important;
+    }
+  }
+
+  input[type='radio'] {
+    &:not(:checked) ~ .state label:before {
+      border-color: var(--radio-button-off-primary);
+    }
+
+    &:checked ~ .state label {
+      &:before {
+        border-color: var(--radio-button-on-primary);
+      }
+
+      &:after {
+        background-color: var(--radio-button-on-primary) !important;
+      }
+    }
+
+    &:disabled ~ .state {
+      label:before {
+        border-color: var(--outline-disabled);
+      }
+    }
+    &:disabled:checked ~ .state {
+      label:after {
+        background-color: var(--outline-disabled);
+      }
+    }
+
+  }
+}

package/src/lib/styles/overwrite/pretty-checkbox/elements/switch/_fill.scss

@@ -0,0 +1,7 @@
+@use 'mixin';
+
+.#{$pretty--class-name}.p-switch.p-fill {
+  input:checked:not(:disabled) ~ .state {
+      @include mixin.switchColor(bg-switch-on-primary);
+  }
+}

package/src/lib/styles/overwrite/pretty-checkbox/elements/switch/_general.scss

@@ -0,0 +1,47 @@
+@use 'mixin';
+
+.#{$pretty--class-name}.p-switch {
+  input{
+    min-width:2em;
+    &:checked ~ .state, &:disabled ~ .state {
+      @include mixin.switchColor(bg-switch-disabled-primary);
+    }
+  }
+
+  .state {
+    position: relative;
+
+    &:before {
+      content: '';
+      border: 1px solid var(--bg-switch-off-primary);
+      background-color: var(--bg-switch-off-primary);
+      border-radius: 60px;
+      width: 2em;
+      box-sizing: unset;
+      height: $pretty--box-size;
+      position: absolute;
+      top: 0;
+      top: $pretty-top-offset-switch;
+      z-index: $pretty--z-index-back;
+      transition: all 0.5s ease;
+    }
+
+    label {
+      text-indent: $pretty--label-text-offset-switch;
+
+      &:before,
+      &:after {
+        transition: all 0.5s ease;
+        border-radius: 100%;
+        left: 0;
+        border-color: transparent;
+        transform: scale(0.8);
+      }
+
+      &:before{
+        border: 1px solid var(--on-bg-switch-off-primary);
+        background-color: var(--on-bg-switch-off-primary);
+      }
+    }
+  }
+}

package/src/lib/styles/overwrite/pretty-checkbox/elements/switch/_mixin.scss

@@ -0,0 +1,15 @@
+@mixin switchColor($varColorName) {
+  &:before {
+    border-color: var(--#{$varColorName});
+    background-color: var(--#{$varColorName});
+  }
+
+  label:before {
+    opacity: 0;
+  }
+
+  label:after {
+    background-color: var(--on-#{$varColorName}) !important;
+    left: 1em;
+  }
+}

package/src/lib/styles/overwrite/pretty-checkbox/pretty-checkbox.scss

@@ -0,0 +1,29 @@
+@import './variables';
+@import './core';
+
+
+@import 'node_modules/pretty-checkbox/src/scss/essentials/keyframes';
+@import 'node_modules/pretty-checkbox/src/scss/essentials/functions';
+@import 'node_modules/pretty-checkbox/src/scss/essentials/mixins';
+@import 'node_modules/pretty-checkbox/src/scss/elements/default/fill';
+@import './elements/default/outline';
+@import 'node_modules/pretty-checkbox/src/scss/elements/default/thick';
+@import 'node_modules/pretty-checkbox/src/scss/elements/font-icon/general';
+@import 'node_modules/pretty-checkbox/src/scss/elements/svg/general';
+@import 'node_modules/pretty-checkbox/src/scss/elements/image/general';
+@import './elements/switch/general';
+@import './elements/switch/fill';
+@import 'node_modules/pretty-checkbox/src/scss/elements/switch/slim';
+@import 'node_modules/pretty-checkbox/src/scss/states/hover';
+@import 'node_modules/pretty-checkbox/src/scss/states/focus';
+@import 'node_modules/pretty-checkbox/src/scss/states/indeterminate';
+@import 'node_modules/pretty-checkbox/src/scss/extras/toggle';
+@import 'node_modules/pretty-checkbox/src/scss/extras/plain';
+@import 'node_modules/pretty-checkbox/src/scss/extras/round';
+@import 'node_modules/pretty-checkbox/src/scss/extras/curve';
+@import 'node_modules/pretty-checkbox/src/scss/extras/animation';
+@import 'node_modules/pretty-checkbox/src/scss/extras/disabled';
+@import 'node_modules/pretty-checkbox/src/scss/extras/locked';
+@import 'node_modules/pretty-checkbox/src/scss/extras/colors';
+@import 'node_modules/pretty-checkbox/src/scss/extras/bigger';
+@import 'node_modules/pretty-checkbox/src/scss/extras/print';

package/src/lib/vendor/gravity-tooltip/gravity-tooltip.component.html

@@ -0,0 +1,9 @@
+<div *ngIf="isThemeLight" class="tooltip-arrow"></div>
+
+<div *ngIf="options['contentType'] === 'template' else htmlOrStringTemplate">
+  <ng-container *ngTemplateOutlet="value"></ng-container>
+</div>
+
+<ng-template #htmlOrStringTemplate>
+  <div [innerHTML]="value"></div>
+</ng-template>

package/src/lib/vendor/gravity-tooltip/gravity-tooltip.component.sass

@@ -0,0 +1,134 @@
+\:host
+  max-width: 200px
+  background-color: var(--bg-tooltip-primary)
+  color: var(--on-bg-tooltip-primary)
+  text-align: center
+  border-radius: 6px
+  padding: 5px 8px
+  position: absolute
+  pointer-events: none
+  z-index: 1000
+  display: block
+  opacity: 0
+  -webkit-transition: opacity 300ms
+  -moz-transition: opacity 300ms
+  -o-transition: opacity 300ms
+  transition: opacity 300ms
+  top: 0
+  left: 0
+
+\:host.tooltip-show
+  opacity: 1
+
+\:host.tooltip-shadow
+  box-shadow: 0 7px 15px -5px rgba(0, 0, 0, 0.4)
+
+\:host.tooltip-light.tooltip-shadow
+  box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.4)
+
+\:host.tooltip::after
+  content: ""
+  position: absolute
+  border-style: solid
+
+\:host.tooltip-top::after
+  top: 100%
+  left: 50%
+  margin-left: -5px
+  border-width: 5px
+  border-color: var(--bg-tooltip-primary) transparent transparent transparent
+
+\:host.tooltip-bottom::after
+  bottom: 100%
+  left: 50%
+  margin-left: -5px
+  border-width: 5px
+  border-color: transparent transparent var(--bg-tooltip-primary) transparent
+
+\:host.tooltip-left::after
+  top: 50%
+  left: 100%
+  margin-top: -5px
+  border-width: 5px
+  border-color: transparent transparent transparent var(--bg-tooltip-primary)
+
+\:host.tooltip-right::after
+  top: 50%
+  right: 100%
+  margin-top: -5px
+  border-width: 5px
+  border-color: transparent var(--bg-tooltip-primary) transparent transparent
+
+// Light
+\:host.tooltip-light::after
+  display: none
+
+\:host.tooltip-light
+  border: 1px solid rgba(0, 0, 0, .06)
+  background-color: #fff
+  color: black
+
+  .tooltip-arrow
+    position: absolute
+    width: 10px
+    height: 10px
+    transform: rotate(135deg)
+    background-color: rgba(0, 0, 0, .07)
+
+  .tooltip-arrow::after
+    background-color: #fff
+    content: ''
+    display: block
+    position: absolute
+    width: 10px
+    height: 10px
+
+\:host.tooltip-top.tooltip-light
+  margin-top: -2px
+
+  .tooltip-arrow
+    top: 100%
+    left: 50%
+    margin-top: -4px
+    margin-left: -5px
+    background: linear-gradient(to bottom left, rgba(0, 0, 0, .07) 50%, transparent 50%)
+
+  .tooltip-arrow::after
+    top: 1px
+    right: 1px
+
+\:host.tooltip-bottom.tooltip-light
+  .tooltip-arrow
+    bottom: 100%
+    left: 50%
+    margin-bottom: -4px
+    margin-left: -5px
+    background: linear-gradient(to top right, rgba(0, 0, 0, .1) 50%, transparent 50%)
+
+  .tooltip-arrow::after
+    top: -1px
+    right: -1px
+
+\:host.tooltip-left.tooltip-light
+  .tooltip-arrow
+    top: 50%
+    left: 100%
+    margin-top: -5px
+    margin-left: -4px
+    background: linear-gradient(to bottom right, rgba(0, 0, 0, .07) 50%, transparent 50%)
+
+  .tooltip-arrow::after
+    top: 1px
+    right: -1px
+
+\:host.tooltip-right.tooltip-light
+  .tooltip-arrow
+    top: 50%
+    right: 100%
+    margin-top: -5px
+    margin-right: -4px
+    background: linear-gradient(to top left, rgba(0, 0, 0, .07) 50%, transparent 50%)
+
+  .tooltip-arrow::after
+    top: -1px
+    right: 1px