fix(popover): update styles to reconfigure trigger and box-shadow

README.md

@@ -60,15 +60,6 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 
 <!-- AURO-GENERATED-CONTENT:END -->
 
-### CSS Custom Property fallbacks
-
-<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/cssFallbacks.md) -->
-[CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) are [not supported](https://auro.alaskaair.com/support/custom-properties) in older browsers. For this, fallback properties are pre-generated and included with the npm.
-
-Any update to the Auro Design Tokens will be immediately reflected with browsers that support CSS custom properties, legacy browsers will require updated components with pre-generated fallback properties.
-
-<!-- AURO-GENERATED-CONTENT:END -->
-
 ### Define dependency in project component
 
 <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/componentImportDescription.md) -->

demo/api.md

@@ -299,10 +299,14 @@ The component may be restyled using the following code sample and changing the v
 <!-- The below code snippet is automatically added from ./../../src/tokens.scss -->
 
 ```scss
+/* stylelint-disable color-function-notation */
+
+@import './../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables';
+
 :host {
-  --ds-auro-popover-boxshadow-color: var(--ds-color-border-divider-default, $ds-color-border-divider-default);
-  --ds-auro-popover-container-color: var(--ds-color-container-primary-default, $ds-color-container-primary-default);
-  --ds-auro-popover-text-color: var(--ds-color-text-primary-default, $ds-color-text-primary-default);
+  --ds-auro-popover-boxshadow-color: var(--ds-color-base-black-300, #{$ds-color-base-black-300});
+  --ds-auro-popover-container-color: var(--ds-color-container-primary-default, #{$ds-color-container-primary-default});
+  --ds-auro-popover-text-color: var(--ds-color-text-primary-default, #{$ds-color-text-primary-default});
 }
 ```
 <!-- AURO-GENERATED-CONTENT:END -->

src/color.scss

@@ -14,7 +14,7 @@
 
 .popover {
   background-color: var(--ds-auro-popover-container-color);
-  box-shadow: -2px 0 5px 2px var(--ds-auro-popover-boxshadow-color)  0 2px 5px 1px var(--ds-auro-popover-boxshadow-color);
+  box-shadow: -2px 0 5px 2px var(--ds-auro-popover-boxshadow-color), 0 2px 5px 1px var(--ds-auro-popover-boxshadow-color);
 }
 
 .arrow {

src/style.scss

@@ -127,8 +127,11 @@ $auro-inset-directions: '';
   bottom: calc(-1 * calc(var(--ds-size-100, $ds-size-100) + var(--ds-size-25, $ds-size-25)));
 
   &:before {
-    top: -16px;
-    left: calc(-1 * var(--ds-size-200, $ds-size-200));
+    // calc = -16px
+    top: calc(-1 * var(--ds-size-200, $ds-size-200));
+
+    // calc = -6px
+    left: calc(-1 * var(--ds-size-75, $ds-size-75));
 
     transform: rotate(45deg);
   }

src/tokens.scss

@@ -1,5 +1,9 @@
+/* stylelint-disable color-function-notation */
+
+@import './../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables';
+
 :host {
-  --ds-auro-popover-boxshadow-color: var(--ds-color-border-divider-default, $ds-color-border-divider-default);
-  --ds-auro-popover-container-color: var(--ds-color-container-primary-default, $ds-color-container-primary-default);
-  --ds-auro-popover-text-color: var(--ds-color-text-primary-default, $ds-color-text-primary-default);
+  --ds-auro-popover-boxshadow-color: var(--ds-color-base-black-300, #{$ds-color-base-black-300});
+  --ds-auro-popover-container-color: var(--ds-color-container-primary-default, #{$ds-color-container-primary-default});
+  --ds-auro-popover-text-color: var(--ds-color-text-primary-default, #{$ds-color-text-primary-default});
 }