diff --git a/README.md b/README.md index b4624bd..b662b22 100644 --- a/README.md +++ b/README.md @@ -60,15 +60,6 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens]( -### CSS Custom Property fallbacks - - -[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. - - - ### Define dependency in project component diff --git a/demo/api.md b/demo/api.md index a01a61d..3d0286d 100644 --- a/demo/api.md +++ b/demo/api.md @@ -299,10 +299,14 @@ The component may be restyled using the following code sample and changing the v ```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}); } ``` diff --git a/src/color.scss b/src/color.scss index 305a1cc..720320a 100644 --- a/src/color.scss +++ b/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 { diff --git a/src/style.scss b/src/style.scss index a2320e9..a14dd2f 100644 --- a/src/style.scss +++ b/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); } diff --git a/src/tokens.scss b/src/tokens.scss index 6901186..d485a82 100644 --- a/src/tokens.scss +++ b/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}); }