feat: implement tier 3 color tokens #206

demo/api.md

@@ -1080,4 +1080,41 @@ export function alertValueExample() {
 }
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
+</auro-accordion>
+
+### Theme Support
+
+The component may be restyled using the following code sample and changing the values of the following token(s).
+
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../src/tokens.scss) -->
+<!-- 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-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});
+}
+```
+<!-- AURO-GENERATED-CONTENT:END -->

docs/partials/api.md

@@ -459,3 +459,10 @@ The following example listens for the `auroDatePicker-valueSet` event. Once trig
 <!-- AURO-GENERATED-CONTENT:END -->
 
 </auro-accordion>
+
+### Theme Support
+
+The component may be restyled using the following code sample and changing the values of the following token(s).
+
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../src/tokens.scss) -->
+<!-- AURO-GENERATED-CONTENT:END -->

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",

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
     ];
   }
 

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
     ];
   }
 

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() {

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
+    ];
   }
 
   /**

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});
+  }
+}