diff --git a/demo/api.md b/demo/api.md index 5870346..e7acc39 100644 --- a/demo/api.md +++ b/demo/api.md @@ -1080,4 +1080,41 @@ export function alertValueExample() { } ``` - + + +### Theme Support + +The component may be restyled using the following code sample and changing the values of the following token(s). + + + + +```scss +/* stylelint-disable color-function-notation */ + +@import './../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables'; + +:host { + --ds-auro-datepicker-placeholder-color: var(--ds-color-text-secondary-default, #{$ds-color-text-secondary-default}); + --ds-auro-datepicker-range-input-divider-color: var(--ds-color-border-primary-default, #{$ds-color-border-primary-default}); + --ds-auro-calendar-mobile-footer-container-color: var(--ds-color-container-primary-default, #{$ds-color-container-primary-default}); + --ds-auro-calendar-mobile-header-boxshadow-color: rgba(0, 0, 0, .15); + --ds-auro-calendar-mobile-header-container-color: var(--ds-color-container-primary-default, #{$ds-color-container-primary-default}); + --ds-auro-calendar-mobile-header-divider-color: var(--ds-color-border-divider-default, #{$ds-color-border-divider-default}); + --ds-auro-calendar-mobile-header-text-color: var(--ds-color-text-secondary-default, #{$ds-color-text-secondary-default}); + --ds-auro-calendar-nav-btn-border-color: transparent; + --ds-auro-calendar-nav-btn-chevron-color: var(--ds-color-icon-ui-default-default, #{$ds-color-icon-ui-default-default}); + --ds-auro-calendar-nav-btn-container-color: transparent; + --ds-auro-calendar-month-container-color: var(--ds-color-container-primary-default, #{$ds-color-container-primary-default}); + --ds-auro-calendar-month-divider-color: var(--ds-color-border-divider-default, #{$ds-color-border-divider-default}); + --ds-auro-calendar-month-header-color: var(--ds-color-text-primary-default, #{$ds-color-text-primary-default}); + --ds-auro-calendar-cell-border-color: transparent; + --ds-auro-calendar-cell-boxshadow-color-one: rgba(0, 0, 0, .12); + --ds-auro-calendar-cell-boxshadow-color-two: rgba(0, 0, 0, .1); + --ds-auro-calendar-cell-container-color: transparent; + --ds-auro-calendar-cell-in-range-color: var(--ds-color-container-secondary-default, #{$ds-color-container-secondary-default}); + --ds-auro-calendar-cell-price-text-color: var(--ds-color-text-link-default, #{$ds-color-text-link-default}); + --ds-auro-calendar-cell-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 475eed5..ef406b0 100644 --- a/docs/partials/api.md +++ b/docs/partials/api.md @@ -459,3 +459,10 @@ The following example listens for the `auroDatePicker-valueSet` event. Once trig + +### Theme Support + +The component may be restyled using the following code sample and changing the values of the following token(s). + + + diff --git a/package-lock.json b/package-lock.json index c55073e..84f50dc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,20 +1,20 @@ { "name": "@aurodesignsystem/auro-datepicker", - "version": "2.6.0", + "version": "2.6.2", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@aurodesignsystem/auro-datepicker", - "version": "2.6.0", + "version": "2.6.2", "hasInstallScript": true, "license": "Apache-2.0", "dependencies": { "@alaskaairux/icons": "^4.41.1", - "@aurodesignsystem/auro-dropdown": "^2.10.6", + "@aurodesignsystem/auro-dropdown": "^3.0.0-beta.1", "@aurodesignsystem/auro-formvalidation": "^1.0.3", - "@aurodesignsystem/auro-input": "^3.0.1", - "@aurodesignsystem/auro-popover": "^3.2.3", + "@aurodesignsystem/auro-input": "^3.1.0-beta.3", + "@aurodesignsystem/auro-popover": "^3.3.0-beta.1", "@material/mwc-icon-button": "^0.27.0", "@material/mwc-list": "^0.27.0", "@material/mwc-menu": "^0.27.0", @@ -188,22 +188,40 @@ "node": ">=8" } }, + "node_modules/@aurodesignsystem/auro-button": { + "version": "7.3.0-beta.6", + "resolved": "https://registry.npmjs.org/@aurodesignsystem/auro-button/-/auro-button-7.3.0-beta.6.tgz", + "integrity": "sha512-5GFBukUySCAKHQLUpVBV1V8vmzwlnY8tSo8FOmG+HvxiRpVw/kNqsiOEcdS4pMN6IClbhMRkFK/PYumn8owu8w==", + "hasInstallScript": true, + "dependencies": { + "@aurodesignsystem/auro-loader": "^2.1.0-beta.2", + "chalk": "^5.3.0", + "lit": "^3.1.4" + }, + "engines": { + "node": "^18 || ^20" + }, + "peerDependencies": { + "@aurodesignsystem/design-tokens": "^4.3.0", + "@aurodesignsystem/webcorestylesheets": "^5.0.8" + } + }, "node_modules/@aurodesignsystem/auro-dropdown": { - "version": "2.10.6", - "resolved": "https://registry.npmjs.org/@aurodesignsystem/auro-dropdown/-/auro-dropdown-2.10.6.tgz", - "integrity": "sha512-tlrcKNK78JMm4eunI2+PjdrZTg2tvfAUIhj1bTtBCk2+GYg6B9m4DHSHpxp+0uaMPBExwAUpvqYc8R6AWnaZaQ==", + "version": "3.0.0-beta.1", + "resolved": "https://registry.npmjs.org/@aurodesignsystem/auro-dropdown/-/auro-dropdown-3.0.0-beta.1.tgz", + "integrity": "sha512-nu3+L0YKzMSKiwQlyS6ktkYUFBYDM0IJEulyYXbeOnK330KiTdEtlo6drXaPG9IGtrQwBBppkR6QJBpKWbFyrg==", "hasInstallScript": true, "dependencies": { + "@aurodesignsystem/auro-icon": "^5.0.0-beta.1", "@popperjs/core": "^2.11.8", "chalk": "^5.2.0", - "lit": "^3.1.2" + "lit": "^3.1.4" }, "engines": { "node": "^18 || ^20" }, "peerDependencies": { "@alaskaairux/design-tokens": "^3.11.0", - "@aurodesignsystem/auro-icon": "^4.2.0", "@aurodesignsystem/design-tokens": "^4.1.1", "@aurodesignsystem/webcorestylesheets": "^5.0.3" } @@ -218,34 +236,36 @@ } }, "node_modules/@aurodesignsystem/auro-icon": { - "version": "4.2.0", - "resolved": "https://registry.npmjs.org/@aurodesignsystem/auro-icon/-/auro-icon-4.2.0.tgz", - "integrity": "sha512-0jL5YUc5vRpJMx5fKPOafj0YFSTFUp2I1+UsApuOlnqgzv7iIbx4sL60THow+trzrJSKDMBqkA4X8bQkxFkBlg==", + "version": "5.0.0-beta.1", + "resolved": "https://registry.npmjs.org/@aurodesignsystem/auro-icon/-/auro-icon-5.0.0-beta.1.tgz", + "integrity": "sha512-E1dth3K8JiViAdMtNb6ZESPZxIj8pQVlAoozsw6LAAIimWtEay4Mo2Mp22RByIWv2oK/ro3KuAwcyqiSotmQgQ==", "hasInstallScript": true, - "peer": true, "dependencies": { - "chalk": "^5.2.0", - "lit": "^3.1.1" + "chalk": "^5.3.0", + "lit": "^3.1.3" }, "engines": { - "node": "^18 || ^20" + "node": "^18.x || ^20.x" }, "peerDependencies": { - "@aurodesignsystem/design-tokens": "^4.1.1", - "@aurodesignsystem/webcorestylesheets": "^5.0.3" + "@alaskaairux/icons": "^4.36.0", + "@aurodesignsystem/design-tokens": "^4.3.1", + "@aurodesignsystem/webcorestylesheets": "^5.0.8" } }, "node_modules/@aurodesignsystem/auro-input": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/@aurodesignsystem/auro-input/-/auro-input-3.0.1.tgz", - "integrity": "sha512-PrG1xRTrc2ZjDFwz1K5XGVCsQU4i65eFjDZa8SN2Q9I87VpMW4ohBgMi+JTUOCSz6q5H2LjozWE0/kG4bDt05g==", + "version": "3.1.0-beta.3", + "resolved": "https://registry.npmjs.org/@aurodesignsystem/auro-input/-/auro-input-3.1.0-beta.3.tgz", + "integrity": "sha512-MWOZoEG4TFnVV96r05x3LKr/vV3Iy3YOgcf5P+uACst92kHEE1ApaPF31N4mm+RX/HP0EifJQ9UjA6vrm0B2kQ==", "hasInstallScript": true, "dependencies": { + "@aurodesignsystem/auro-button": "^7.3.0-beta.3", "@aurodesignsystem/auro-formvalidation": "^1.0.3", + "@aurodesignsystem/auro-icon": "^5.0.0-beta.1", "@aurodesignsystem/auro-library": "^2.6.0", "chalk": "^5.2.0", "cleave.js": "^1.6.0", - "lit": "^3.1.3" + "lit": "^3.1.4" }, "engines": { "node": "^18 || ^20" @@ -270,15 +290,32 @@ "node": "^18 || ^20" } }, + "node_modules/@aurodesignsystem/auro-loader": { + "version": "2.1.0-beta.2", + "resolved": "https://registry.npmjs.org/@aurodesignsystem/auro-loader/-/auro-loader-2.1.0-beta.2.tgz", + "integrity": "sha512-7x2bjYuROEdZhGWg51uhqsK6DtoEmiBshgmADfdMRZLOwjkC+8YYFtDlMTN50B0K4MauVHEQ+7p82lOzFAfEdg==", + "hasInstallScript": true, + "dependencies": { + "chalk": "^5.3.0", + "lit": "^3.1.4" + }, + "engines": { + "node": "^18.x || ^20.x " + }, + "peerDependencies": { + "@aurodesignsystem/design-tokens": "^4.3.1", + "@aurodesignsystem/webcorestylesheets": "^5.0.8" + } + }, "node_modules/@aurodesignsystem/auro-popover": { - "version": "3.2.3", - "resolved": "https://registry.npmjs.org/@aurodesignsystem/auro-popover/-/auro-popover-3.2.3.tgz", - "integrity": "sha512-hhDajfkTspd3KtsJjCBQk7iz7CS3BP8zwJqzY3d/cxvvILsPsVUVXN3wNXNVmLYOlvu+nVxL4i+P5FZQzR0bwg==", + "version": "3.3.0-beta.1", + "resolved": "https://registry.npmjs.org/@aurodesignsystem/auro-popover/-/auro-popover-3.3.0-beta.1.tgz", + "integrity": "sha512-HEh1KH8HG6daRiO8jDT9X6dgVjw5ApGZg1HXFxBkdw28PAtWJa2taXIHKttz1zD/8n2AoNmvP3331LcjzKyldQ==", "hasInstallScript": true, "dependencies": { "@popperjs/core": "^2.11.8", "chalk": "^5.3.0", - "lit": "^3.1.2" + "lit": "^3.1.4" }, "engines": { "node": "^18.x || ^20.x" diff --git a/package.json b/package.json index 98a85b1..ff1b493 100644 --- a/package.json +++ b/package.json @@ -21,10 +21,10 @@ }, "dependencies": { "@alaskaairux/icons": "^4.41.1", - "@aurodesignsystem/auro-dropdown": "^2.10.6", + "@aurodesignsystem/auro-dropdown": "^3.0.0-beta.1", "@aurodesignsystem/auro-formvalidation": "^1.0.3", - "@aurodesignsystem/auro-input": "^3.0.1", - "@aurodesignsystem/auro-popover": "^3.2.3", + "@aurodesignsystem/auro-input": "^3.1.0-beta.3", + "@aurodesignsystem/auro-popover": "^3.3.0-beta.1", "@material/mwc-icon-button": "^0.27.0", "@material/mwc-list": "^0.27.0", "@material/mwc-menu": "^0.27.0", diff --git a/src/auro-calendar-cell.js b/src/auro-calendar-cell.js index 20ae63a..c468c26 100644 --- a/src/auro-calendar-cell.js +++ b/src/auro-calendar-cell.js @@ -4,6 +4,8 @@ import { format, startOfDay } from 'date-fns'; import { enUS } from 'date-fns/esm/locale'; import styleCss from "./style-auro-calendar-cell-css"; +import colorCss from './color-cell-css'; +import tokensCss from './tokens-css'; import '@aurodesignsystem/auro-popover'; @@ -70,7 +72,9 @@ export class AuroCalendarCell extends LitElement { static get styles() { return [ // ...super.styles, - styleCss + styleCss, + colorCss, + tokensCss ]; } diff --git a/src/auro-calendar-month.js b/src/auro-calendar-month.js index 05654f5..0c9e617 100644 --- a/src/auro-calendar-month.js +++ b/src/auro-calendar-month.js @@ -1,4 +1,7 @@ import styleCss from "./style-auro-calendar-month-css"; +import colorCss from "./color-month-css"; +import tokensCss from "./tokens-css"; + import { html } from 'lit'; import { RangeDatepickerCalendar } from './../vendor/wc-range-datepicker/range-datepicker-calendar'; @@ -12,7 +15,9 @@ export class AuroCalendarMonth extends RangeDatepickerCalendar { static get styles() { return [ // ...super.styles, - styleCss + styleCss, + colorCss, + tokensCss ]; } diff --git a/src/auro-calendar.js b/src/auro-calendar.js index de80db5..c5a5342 100644 --- a/src/auro-calendar.js +++ b/src/auro-calendar.js @@ -1,5 +1,8 @@ import { html } from 'lit'; + import styleCss from "./style-auro-calendar-css"; +import colorCss from "./color-calendar-css"; +import tokensCss from './tokens-css'; import './auro-calendar-month.js'; import { RangeDatepicker } from './../vendor/wc-range-datepicker/range-datepicker.js'; @@ -87,7 +90,11 @@ export class AuroCalendar extends RangeDatepicker { } static get styles() { - return [styleCss]; + return [ + styleCss, + colorCss, + tokensCss + ]; } static get properties() { diff --git a/src/auro-datepicker.js b/src/auro-datepicker.js index 0d7b45c..7d37a4a 100644 --- a/src/auro-datepicker.js +++ b/src/auro-datepicker.js @@ -20,6 +20,9 @@ import AuroLibraryRuntimeUtils from '@aurodesignsystem/auro-library/scripts/util // Import touch detection lib import styleCss from "./style-css.js"; +import colorCss from "./color-css"; +import tokensCss from "./tokens-css"; + import './auro-calendar.js'; import { AuroDropdown } from '@aurodesignsystem/auro-dropdown/src/auro-dropdown.js'; @@ -257,7 +260,11 @@ export class AuroDatePicker extends LitElement { } static get styles() { - return [styleCss]; + return [ + styleCss, + colorCss, + tokensCss + ]; } /** diff --git a/src/color-calendar.scss b/src/color-calendar.scss new file mode 100644 index 0000000..2a2c7f7 --- /dev/null +++ b/src/color-calendar.scss @@ -0,0 +1,51 @@ +// // 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 './../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables'; +@import './../node_modules/@aurodesignsystem/webcorestylesheets/src/breakpoints'; + +.calendarNavBtn { + border-color: var(--ds-auro-calendar-nav-btn-border-color); + background-color: var(--ds-auro-calendar-nav-btn-container-color); + color: var(--ds-auro-calendar-nav-btn-chevron-color); + + &:hover, + &:focus { + --ds-auro-calendar-nav-btn-border-color: var(--ds-color-border-ui-default-default, #{$ds-color-border-ui-default-default}); + } + + &:active { + --ds-auro-calendar-nav-btn-border-color: var(--ds-color-border-ui-default-default, #{$ds-color-border-ui-default-default}); + + box-shadow: inset 0 0 0 1px var(--ds-auro-calendar-nav-btn-border-color); + } +} + +.mobileHeader { + background-color: var(--ds-auro-calendar-mobile-header-container-color); + box-shadow: 0 0 10px var(--ds-auro-calendar-mobile-header-boxshadow-color); +} + +.mobileDateLabel { + color: var(--ds-auro-calendar-mobile-header-text-color); +} + +:host(:not([noRange])) { + .headerDateTo { + &:after { + background-color: var(--ds-auro-calendar-mobile-header-divider-color); + } + } +} + +.mobileFooterActions { + background-color: var(--ds-auro-calendar-mobile-footer-container-color); +} + +@include auro_breakpoint($max: $ds-grid-breakpoint-sm) { + .calendarNavBtn { + --ds-auro-calendar-nav-btn-border-color: var(--ds-color-border-ui-default-default, #{$ds-color-border-ui-default-default}); + } +} diff --git a/src/color-cell.scss b/src/color-cell.scss new file mode 100644 index 0000000..5de2764 --- /dev/null +++ b/src/color-cell.scss @@ -0,0 +1,83 @@ +// // Copyright (c) 2024 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license +// // See LICENSE in the project root for license information. + +// // --------------------------------------------------------------------- + +/* stylelint-disable selector-max-class, */ + +@import './../node_modules/@aurodesignsystem/webcorestylesheets/src/breakpoints'; +@import './../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables'; + +@mixin in-range-pseudo-elem { + background-color: var(--ds-auro-calendar-cell-in-range-color); +} + +:host { + ::slotted([slot^="date_"]) { + color: var(--ds-auro-calendar-cell-price-text-color); + } +} + +.day { + border-color: var(--ds-auro-calendar-cell-border-color); + background-color: var(--ds-auro-calendar-cell-container-color); + color: var(--ds-auro-calendar-cell-text-color); + + + &.disabled { + --ds-auro-calendar-cell-text-color: var(--ds-color-text-ui-disabled-default, #{$ds-color-text-ui-disabled-default}); + } + + &.selected { + --ds-auro-calendar-border-color: var(--ds-color-border-ui-active-default, #{$ds-color-border-ui-active-default}); + --ds-auro-calendar-cell-container-color: var(--ds-color-container-ui-primary-active-default, #{$ds-color-container-ui-primary-active-default}); + --ds-auro-calendar-cell-text-color: var(--ds-color-text-primary-inverse, #{$ds-color-text-primary-inverse}); + + box-shadow: 0 .1px 5px var(--ds-auro-calendar-cell-boxshadow-color-one), 0 5px 10px var(--ds-auro-calendar-cell-boxshadow-color-two); + + &:hover { + --ds-auro-calendar-cell-container-color: var(--ds-color-container-primary-default, $ds-color-container-primary-default); + --ds-auro-calendar-cell-border-color: var(--ds-color-border-ui-focus-default, #{$ds-color-border-ui-focus-default}); + + box-shadow: unset; + } + + &:not(:hover) { + --ds-auro-calendar-cell-price-text-color: var(--ds-color-text-primary-inverse, #{$ds-color-text-primary-inverse}); + } + } + + &:hover { + --ds-auro-calendar-cell-container-color: #f0f0f0; // var(--ds-color-container-ui-secondary-hover-default); - this token was part of the design but caused a problem with the `inRange` date styles so we had to switch to a solid color for hover. + --ds-auro-calendar-cell-text-color: var(--ds-color-text-primary-default, $ds-color-text-primary-default); + } + + &.inRange { + &:before { + @include in-range-pseudo-elem; + } + } + + &.rangeDepartDate { + &:before { + @include in-range-pseudo-elem; + } + } + + &.rangeReturnDate, + &.lastHoveredDate { + :before { + @include in-range-pseudo-elem; + } + } + + &.sameDateTrip { + &:before { + --ds-auro-calendar-cell-in-range-color: transparent; + } + } +} + +:host([disabled]) { + --ds-auro-calendar-cell-price-text-color: var(--ds-color-text-ui-disabled-default, #{$ds-color-text-ui-disabled-default}); +} diff --git a/src/color-month.scss b/src/color-month.scss new file mode 100644 index 0000000..ee40991 --- /dev/null +++ b/src/color-month.scss @@ -0,0 +1,27 @@ +// 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'; +@import './../node_modules/@aurodesignsystem/webcorestylesheets/src/core'; + + +:host { + background-color: var(--ds-auro-calendar-month-container-color); +} + +:host(:not(:last-of-type)) { + @include auro_grid-breakpoint--sm { + &:after { + background-color: var(--ds-auro-calendar-month-divider-color); + } + } +} + +.header { + color: var(--ds-auro-calendar-month-header-color); +} diff --git a/src/color.scss b/src/color.scss new file mode 100644 index 0000000..fe01afd --- /dev/null +++ b/src/color.scss @@ -0,0 +1,30 @@ +// Copyright (c) 2024 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license +// See LICENSE in the project root for license information. + +/* stylelint-disable max-nesting-depth, declaration-no-important, selector-class-pattern, declaration-empty-line-before */ + +@import './../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables'; + +@import './../node_modules/@aurodesignsystem/webcorestylesheets/src/breakpoints'; +@import './../node_modules/@aurodesignsystem/webcorestylesheets/src/utilityClasses/displayProperties'; + +[auro-input] { + &::part(wrapper) { + --ds-auro-input-border-color: transparent !important; + --ds-auro-input-background-color: unset !important; + } +} + +.dpTriggerContent { + [auro-input] { + &:nth-child(2) { + &:before { + background-color: var(--ds-auro-datepicker-range-input-divider-color); + } + } + } +} + +.placeholderDate { + color: var(--ds-auro-datepicker-placeholder-color); +} diff --git a/src/dropdownVersion.js b/src/dropdownVersion.js index 1c73b19..ed30413 100644 --- a/src/dropdownVersion.js +++ b/src/dropdownVersion.js @@ -1 +1 @@ -export default '2.10.6' \ No newline at end of file +export default '3.0.0-beta.1' \ No newline at end of file diff --git a/src/inputVersion.js b/src/inputVersion.js index aabc43a..a596e3c 100644 --- a/src/inputVersion.js +++ b/src/inputVersion.js @@ -1 +1 @@ -export default '3.0.1' \ No newline at end of file +export default '3.1.0-beta.3' \ No newline at end of file diff --git a/src/style-auro-calendar-cell.scss b/src/style-auro-calendar-cell.scss index bbf9813..74c2d56 100644 --- a/src/style-auro-calendar-cell.scss +++ b/src/style-auro-calendar-cell.scss @@ -18,8 +18,6 @@ width: calc(100vw / 7); height: var(--ds-size-600, $ds-size-600); - background-color: var(--ds-color-background-lighter, $ds-color-background-lighter); - content: ''; transform: translate(-50%, -50%); } @@ -41,12 +39,8 @@ border-width: 1px; border-style: solid; - border-color: transparent; border-radius: var(--ds-size-300, $ds-size-300); - background-color: transparent; - color: var(--ds-color-text-primary-default, $ds-color-text-primary-default); - cursor: pointer; font-family: var(--ds-font-family-default, $ds-font-family-default); @@ -55,25 +49,9 @@ user-select: none; &.disabled { - color: var(--ds-color-text-secondary-inverse, $ds-color-text-secondary-inverse); - pointer-events: none; } - &.selected { - border-color: var(--ds-color-background-darker, $ds-color-background-darker); - - background-color: var(--ds-color-background-darker, $ds-color-background-darker); - box-shadow: 0 .1px 5px rgba(0, 0, 0, .12), 0 5px 10px rgba(0, 0, 0, .1); - color: var(--ds-color-background-lightest, $ds-color-background-lightest); - - &:not(:hover) { - ::slotted([slot^="date_"]) { - color: var(--ds-color-text-primary-inverse, $ds-color-text-primary-inverse); - } - } - } - &.inRange::before { @include in-range-pseudo-elem; @@ -108,10 +86,6 @@ width: calc(var(--ds-size-600, $ds-size-600) / 2); } } - - &.sameDateTrip::before { - background-color: unset; - } } .dateSlot { @@ -122,8 +96,6 @@ } ::slotted([slot^="date_"]) { - color: var(--ds-color-text-link-default, $ds-color-text-link-default); - position: absolute; top: 80%; left: 50%; @@ -136,10 +108,6 @@ transform: translate(-50%, -50%); } -:host([disabled]) ::slotted([slot^="date_"]) { - color: var(--ds-color-text-disabled-default, $ds-color-text-disabled-default); -} - ::slotted(auro-icon) { max-height: 24px; max-width: 24px; @@ -166,26 +134,13 @@ height: var(--ds-size-800, $ds-size-800); font-size: var(--ds-text-body-size-lg, $ds-text-body-size-lg); - } - .dateSlot { - font-size: var(--ds-text-body-size-xs, $ds-text-body-size-xs); - } -} - -@media (hover: hover) { - .day { &:hover { - background-color: #f0f0f0; // var(--ds-color-ui-bkg-hover-default); - this token was part of the design but caused a problem with the `inRange` date styles so we had to switch to a solid color for hover. - color: var(--ds-color-text-primary-default, $ds-color-text-primary-default); - cursor: pointer; } + } - &.selected { - &:hover { - background-color: var(--ds-color-background-lightest, $ds-color-background-lightest); - } - } + .dateSlot { + font-size: var(--ds-text-body-size-xs, $ds-text-body-size-xs); } } diff --git a/src/style-auro-calendar-month.scss b/src/style-auro-calendar-month.scss index b5f358e..746a06d 100644 --- a/src/style-auro-calendar-month.scss +++ b/src/style-auro-calendar-month.scss @@ -22,8 +22,6 @@ $calendar-padding-desktop: var(--ds-size-200, $ds-size-200); margin: 0 var(--ds-size-200, $ds-size-200); - background-color: var(--ds-color-background-lightest, $ds-color-background-lightest); - @include auro_grid-breakpoint--sm { width: $calendar-width; @@ -43,7 +41,6 @@ $calendar-padding-desktop: var(--ds-size-200, $ds-size-200); display: block; width: 1px; - background-color: var(--ds-color-border-divider-default, $ds-color-border-divider-default); content: ''; } @@ -59,8 +56,6 @@ $calendar-padding-desktop: var(--ds-size-200, $ds-size-200); padding: $header-padding 0 $header-padding; - color: var(--range-datepicker-month-text); - text-align: center; } @@ -95,22 +90,9 @@ $calendar-padding-desktop: var(--ds-size-200, $ds-size-200); border-width: 1px; border-style: solid; - border-color: transparent; border-radius: 50%; - color: transparent; - cursor: pointer; - - &:focus { - border-color: var(--ds-color-border-active-default, $ds-color-border-active-default); - } - - &:active { - border-color: var(--ds-color-border-active-default, $ds-color-border-active-default); - - box-shadow: inset 0 0 0 1px var(--ds-color-border-active-default, $ds-color-border-active-default); - } } .table { diff --git a/src/style-auro-calendar.scss b/src/style-auro-calendar.scss index cc721df..5c87371 100644 --- a/src/style-auro-calendar.scss +++ b/src/style-auro-calendar.scss @@ -3,8 +3,8 @@ // // --------------------------------------------------------------------- -@import './../node_modules/@aurodesignsystem/webcorestylesheets/src/breakpoints'; @import './../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables'; +@import './../node_modules/@aurodesignsystem/webcorestylesheets/src/breakpoints'; /* stylelint-disable color-function-notation, at-rule-empty-line-before, order/properties-order, declaration-empty-line-before */ @@ -32,12 +32,8 @@ border-width: 1px; border-style: solid; - border-color: transparent; border-radius: 50%; - background-color: transparent; - color: var(--ds-color-border-active-default, $ds-color-border-active-default); - cursor: pointer; } @@ -67,9 +63,6 @@ align-items: center; flex-direction: row; - - background-color: var(--ds-color-background-lightest, $ds-color-background-lightest); - box-shadow: 0 0 10px rgba(0, 0, 0, .15); } .headerDateFrom { @@ -84,8 +77,6 @@ } .mobileDateLabel { - color: var(--ds-color-text-secondary-default, $ds-color-text-secondary-default); - font-size: var(--ds-text-body-size-xs, $ds-text-body-size-xs); } @@ -114,8 +105,6 @@ width: 1px; height: var(--ds-size-300, $ds-size-300); - background-color: var(--ds-color-border-divider-default, $ds-color-border-divider-default); - content: ''; transform: translateY(-50%); } @@ -136,8 +125,6 @@ bottom: 0; left: 50%; - background-color: var(--ds-color-background-lightest, $ds-color-background-lightest); - display: none; width: calc(100% - calc(var(--ds-size-200, $ds-size-200) * 2)); @@ -202,17 +189,3 @@ flex-direction: row; } } - -@include auro_breakpoint($max: $ds-grid-breakpoint-sm) { - .calendarNavBtn { - border-color: var(--ds-color-border-active-default, $ds-color-border-active-default); - } -} - -@media (hover: hover) { - .calendarNavBtn { - &:hover { - border-color: var(--ds-color-border-active-default, $ds-color-border-active-default); - } - } -} diff --git a/src/style.scss b/src/style.scss index 03afee3..f0baf7d 100644 --- a/src/style.scss +++ b/src/style.scss @@ -28,10 +28,6 @@ &::part(wrapper) { border-width: 0 !important; - border-color: unset !important; - background-color: unset !important; - box-shadow: unset !important; - outline: unset !important; } } @@ -79,17 +75,12 @@ display: block; width: 1px; height: 2rem; - background: var(--ds-color-border-primary-default, $ds-color-border-primary-default); content: ''; } } } } -.placeholderDate { - color: var(--ds-color-text-secondary-default, $ds-color-text-secondary-default); -} - :host([range]) { [auro-input] { max-width: 50%; diff --git a/src/tokens.scss b/src/tokens.scss new file mode 100644 index 0000000..6e1f1da --- /dev/null +++ b/src/tokens.scss @@ -0,0 +1,26 @@ +/* stylelint-disable color-function-notation */ + +@import './../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables'; + +:host { + --ds-auro-datepicker-placeholder-color: var(--ds-color-text-secondary-default, #{$ds-color-text-secondary-default}); + --ds-auro-datepicker-range-input-divider-color: var(--ds-color-border-primary-default, #{$ds-color-border-primary-default}); + --ds-auro-calendar-mobile-footer-container-color: var(--ds-color-container-primary-default, #{$ds-color-container-primary-default}); + --ds-auro-calendar-mobile-header-boxshadow-color: rgba(0, 0, 0, .15); + --ds-auro-calendar-mobile-header-container-color: var(--ds-color-container-primary-default, #{$ds-color-container-primary-default}); + --ds-auro-calendar-mobile-header-divider-color: var(--ds-color-border-divider-default, #{$ds-color-border-divider-default}); + --ds-auro-calendar-mobile-header-text-color: var(--ds-color-text-secondary-default, #{$ds-color-text-secondary-default}); + --ds-auro-calendar-nav-btn-border-color: transparent; + --ds-auro-calendar-nav-btn-chevron-color: var(--ds-color-icon-ui-default-default, #{$ds-color-icon-ui-default-default}); + --ds-auro-calendar-nav-btn-container-color: transparent; + --ds-auro-calendar-month-container-color: var(--ds-color-container-primary-default, #{$ds-color-container-primary-default}); + --ds-auro-calendar-month-divider-color: var(--ds-color-border-divider-default, #{$ds-color-border-divider-default}); + --ds-auro-calendar-month-header-color: var(--ds-color-text-primary-default, #{$ds-color-text-primary-default}); + --ds-auro-calendar-cell-border-color: transparent; + --ds-auro-calendar-cell-boxshadow-color-one: rgba(0, 0, 0, .12); + --ds-auro-calendar-cell-boxshadow-color-two: rgba(0, 0, 0, .1); + --ds-auro-calendar-cell-container-color: transparent; + --ds-auro-calendar-cell-in-range-color: var(--ds-color-container-secondary-default, #{$ds-color-container-secondary-default}); + --ds-auro-calendar-cell-price-text-color: var(--ds-color-text-link-default, #{$ds-color-text-link-default}); + --ds-auro-calendar-cell-text-color: var(--ds-color-text-primary-default, #{$ds-color-text-primary-default}); +}