diff --git a/demo/api.md b/demo/api.md index 25cb9bb..1e336b3 100644 --- a/demo/api.md +++ b/demo/api.md @@ -717,4 +717,26 @@ When using the dialog with the `unformatted` attribute, some may want to adjust ``` - + + +### Theme Support + +The component may be restyled using the following code sample and changing the values of the following token(s). + + + + +```scss +:host { + --ds-auro-dialog-background-color: var(--ds-color-background-primary-100-default, $ds-color-background-primary-100-default); + --ds-auro-dialog-boxshadow-color-one: rgb(0 0 0 / 0.12); + --ds-auro-dialog-boxshadow-color-two: rgb(0 0 0 / 0.1); + --ds-auro-dialog-close-button-color: var(--ds-color-icon-primary-default, $ds-color-icon-primary-default); + --ds-auro-dialog-header-action-border-color: transparent; + --ds-auro-dialog-header-action-background-color: transparent; + --ds-auro-dialog-overlay-open-background-color: rgb(0 0 0 / 0.2); + --ds-auro-dialog-overlay-modal-background-color: rgb(0 0 0 / 0.5); + --ds-auro-dialog-text-color: var(--ds-color-text-primary-default, $ds-color-text-primary-default); +} +``` + diff --git a/docs/partials/api.md b/docs/partials/api.md index 57dd19b..faab39d 100644 --- a/docs/partials/api.md +++ b/docs/partials/api.md @@ -143,3 +143,10 @@ When using the dialog with the `unformatted` attribute, some may want to adjust + +### Theme Support + +The component may be restyled using the following code sample and changing the values of the following token(s). + + + diff --git a/src/color.scss b/src/color.scss new file mode 100644 index 0000000..f3b3d39 --- /dev/null +++ b/src/color.scss @@ -0,0 +1,41 @@ +// Copyright (c) 2024 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license +// See LICENSE in the project root for license information. + +// --------------------------------------------------------------------- + +// Import Auro tokens +@import "./../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables"; +@import "./../node_modules/@aurodesignsystem/webcorestylesheets/src/breakpoints"; + +/* stylelint-disable selector-class-pattern */ + +.dialogOverlay { + &--open { + background: var(--ds-auro-dialog-overlay-open-background-color); + } + + &--modal { + background: var(--ds-auro-dialog-overlay-modal-background-color); + } +} + +.dialog { + background: var(--ds-auro-dialog-background-color); + color: var(--ds-auro-dialog-text-color); + + // 1024px breakpoint / large dialog size is default + @include auro_breakpoint--md { + box-shadow: 0 10px 20px 0 var(--ds-auro-dialog-boxshadow-color-one), 0 1px 10px 0 var(--ds-auro-dialog-boxshadow-color-two); + } +} + +.dialog-header--action { + border: 2px solid var(--ds-auro-dialog-header-action-border-color); + border-radius: var(--ds-border-radius, $ds-border-radius); + background-color: var(--ds-auro-dialog-header-action-background-color); + color: var(--ds-auro-dialog-close-button-color); +} + +:host([unformatted][onDark]) { + --ds-auro-dialog-close-button-color: var(--ds-color-icon-primary-inverse, #{$ds-color-icon-primary-inverse}); +} diff --git a/src/componentBase.js b/src/componentBase.js index 3698720..f08a646 100644 --- a/src/componentBase.js +++ b/src/componentBase.js @@ -10,6 +10,9 @@ import { classMap } from 'lit/directives/class-map.js'; import styleCss from "./style-css.js"; import styleUnformattedCss from './style-unformatted-css.js'; +import colorCss from "./color-css.js"; +import tokensCss from "./tokens-css.js"; + import closeIcon from '@alaskaairux/icons/dist/icons/interface/x-lg.mjs'; /* eslint-disable one-var, prefer-destructuring */ @@ -213,7 +216,9 @@ export default class ComponentBase extends LitElement { static get styles() { return [ styleCss, - styleUnformattedCss + styleUnformattedCss, + colorCss, + tokensCss ]; } diff --git a/src/style.scss b/src/style.scss index feb6343..472eff8 100644 --- a/src/style.scss +++ b/src/style.scss @@ -47,8 +47,6 @@ $auro-spacing-options: none; z-index: var(--ds-depth-overlay); transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 0); - - background: rgba(0, 0, 0, 0.2); } // Modal modifier for modal/blocking state @@ -56,8 +54,6 @@ $auro-spacing-options: none; z-index: var(--ds-depth-overlay); transition: background 0.3s cubic-bezier(0.4, 0, 0.5, 0); - - background: rgba(0, 0, 0, 0.5); } } @@ -81,11 +77,10 @@ $auro-spacing-options: none; opacity: 0; border: 0; - background: var(--ds-color-background-lightest, $ds-color-background-lightest); - color: var(--ds-color-text-primary-default, $ds-color-text-primary-default); - // baseline dialog UI / mobile-first + // baseline dialog UI / mobile-first @include auro_transition(all, 0.3s, ease-in-out); + // 1024px breakpoint / large dialog size is default @include auro_breakpoint--md { top: 10%; @@ -98,8 +93,6 @@ $auro-spacing-options: none; transform: scale(0); - box-shadow: 0 10px 20px 0 rgba(0,0,0,0.12), 0 1px 10px 0 rgba(0,0,0,0.1); - &--open { transform: scale(1); } @@ -139,19 +132,10 @@ $auro-spacing-options: none; justify-content: space-between; padding-top: var(--ds-size-800, $ds-size-800); - & svg { - fill: var(--ds-color-text-secondary-default, $ds-color-text-secondary-default); - } - &--action { margin: 0; padding: 0; - border: none; - border: 2px solid transparent; - border-radius: var(--ds-border-radius, $ds-border-radius); - background-color: transparent; - &:hover { cursor: pointer; } @@ -182,13 +166,6 @@ $auro-spacing-options: none; } } -// sets X from black to white -:host([unformatted][onDark]) { - .dialog-header--action { - color: var(--ds-color-base-white, $ds-color-base-white); - } -} - :host([sm]) { .dialog { max-height: 30%; diff --git a/src/tokens.scss b/src/tokens.scss new file mode 100644 index 0000000..0ed711c --- /dev/null +++ b/src/tokens.scss @@ -0,0 +1,11 @@ +:host { + --ds-auro-dialog-background-color: var(--ds-color-background-primary-100-default, $ds-color-background-primary-100-default); + --ds-auro-dialog-boxshadow-color-one: rgb(0 0 0 / 0.12); + --ds-auro-dialog-boxshadow-color-two: rgb(0 0 0 / 0.1); + --ds-auro-dialog-close-button-color: var(--ds-color-icon-primary-default, $ds-color-icon-primary-default); + --ds-auro-dialog-header-action-border-color: transparent; + --ds-auro-dialog-header-action-background-color: transparent; + --ds-auro-dialog-overlay-open-background-color: rgb(0 0 0 / 0.2); + --ds-auro-dialog-overlay-modal-background-color: rgb(0 0 0 / 0.5); + --ds-auro-dialog-text-color: var(--ds-color-text-primary-default, $ds-color-text-primary-default); +}