@aurodesignsystem/auro-formkit 2.2.1 → 3.0.0

package/components/datepicker/README.md

@@ -104,7 +104,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@2.2.1-beta.3/auro-datepicker/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@2.2.1/auro-datepicker/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/datepicker/demo/api.html

@@ -22,10 +22,8 @@
       type="text/css"
       href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"
     />
-    <!-- legacy reference is still needed to support auro-accordion's use of legacy toke vales at this time -->
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/tokens/CSSCustomProperties.css">
-
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/tokens/CSSCustomProperties.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/auro-classic/CSSCustomProperties.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/alaska/CSSCustomProperties--alaska.css">
     <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
     <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
   </head>

package/components/datepicker/demo/api.md

@@ -22,6 +22,7 @@
 | [noFlip](#noFlip)                          | `noFlip`                          |           | `boolean`  | "false"                                          | If declared, the bib will NOT flip to an alternate position<br />when there isn't enough space in the specified `placement`. |
 | [noValidate](#noValidate)                      | `noValidate`                      |           | `boolean`  | false                                            | If set, disables auto-validation on blur.        |
 | [offset](#offset)                          | `offset`                          |           | `number`   | "0"                                              | Gap between the trigger element and bib.         |
+| [onDark](#onDark)                          | `onDark`                          |           | `boolean`  | false                                            | If declared, onDark styles will be applied to the trigger. |
 | [placement](#placement)                       | `placement`                       |           | `string`   | "bottom-start"                                   | Position where the bib should appear relative to the trigger.<br />Accepted values:<br />"top" \| "right" \| "bottom" \| "left" \|<br />"bottom-start" \| "top-start" \| "top-end" \|<br />"right-start" \| "right-end" \| "bottom-end" \|<br />"left-start" \| "left-end" |
 | [range](#range)                           | `range`                           |           | `boolean`  | false                                            | If set, turns on date range functionality in auro-calendar. |
 | [required](#required)                        | `required`                        |           | `boolean`  | false                                            | Populates the `required` attribute on the input. Used for client-side validation. |
@@ -1422,26 +1423,26 @@ The component may be restyled using the following code sample and changing the v
 ```scss
 /* stylelint-disable color-function-notation */
 
-@import '@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables';
+@import "@aurodesignsystem/design-tokens/dist/alaska/SCSSVariables--alaska";
+@import "@aurodesignsystem/design-tokens/dist/auro-classic/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-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-datepicker-placeholder-color: var(--ds-basic-color-texticon-default, #{$ds-basic-color-texticon-default});
+  --ds-auro-datepicker-range-input-divider-color: var(--ds-basic-color-border-bold, #{$ds-basic-color-border-bold});
+  --ds-auro-calendar-mobile-header-container-color: var(--ds-basic-color-surface-default, #{$ds-basic-color-surface-default});
+  --ds-auro-calendar-mobile-header-divider-color: var(--ds-basic-color-border-divider, #{$ds-basic-color-border-divider});
+  --ds-auro-calendar-mobile-header-text-color: var(--ds-basic-color-texticon-muted, #{$ds-basic-color-texticon-muted});
   --ds-auro-calendar-nav-btn-border-color: transparent;
-  --ds-auro-calendar-nav-btn-chevron-color: var(--ds-color-icon-ui-primary-default-default, #{$ds-color-icon-ui-primary-default-default});
+  --ds-auro-calendar-nav-btn-chevron-color: var(--ds-basic-color-brand-primary, #{$ds-basic-color-brand-primary});
   --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-month-container-color: var(--ds-basic-color-surface-default, #{$ds-basic-color-surface-default});
+  --ds-auro-calendar-month-divider-color: var(--ds-basic-color-border-divider, #{$ds-basic-color-border-divider});
+  --ds-auro-calendar-month-header-color: var(--ds-basic-color-texticon-default, #{$ds-basic-color-texticon-default});
   --ds-auro-calendar-cell-border-color: transparent;
-  --ds-auro-calendar-cell-boxshadow-color: var(--ds-elevation-200, #{$ds-elevation-200});
   --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-primary-default, #{$ds-color-text-primary-default});
-  --ds-auro-calendar-cell-text-color: var(--ds-color-text-primary-default, #{$ds-color-text-primary-default});
+  --ds-auro-calendar-cell-in-range-color: var(--ds-advanced-color-shared-background-muted, #{$ds-advanced-color-shared-background-muted});
+  --ds-auro-calendar-cell-price-text-color: var(--ds-basic-color-texticon-default, #{$ds-basic-color-texticon-default});
+  --ds-auro-calendar-cell-text-color: var(--ds-basic-color-texticon-default, #{$ds-basic-color-texticon-default});
 }
 ```
 <!-- AURO-GENERATED-CONTENT:END -->