@ds-autonomie/web-components 2.7.0 → 2.7.1

package/cdn/internal/components/button-group/button-group.js

@@ -7,8 +7,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { html } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { ifDefinedAndNotEmpty } from '../../../utilities/directives';
 import { ShoelaceElement } from '../../shoelace-element';
+import { ifDefinedAndNotEmpty } from '../../../utilities/directives';
 import styles from './button-group.styles';
 /**
  * @summary Button groups can be used to group related buttons into sections.

package/cdn/internal/components/date-field/date-field.js

@@ -17,13 +17,13 @@ import { html } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { live } from 'lit/directives/live.js';
-import { defaultValue } from '../../../internal/default-value';
-import { getDateFromISO, isValidDate, monthLength, } from '../../../utilities/date';
-import { ifDefinedAndNotEmpty } from '../../../utilities/directives';
-import { LocalizeController } from '../../../utilities/localize';
+import { defaultValue } from '../../default-value';
 import { FormControlController } from '../../form';
 import { ShoelaceElement } from '../../shoelace-element';
 import { watch } from '../../watch';
+import { getDateFromISO, isValidDate, monthLength } from '../../../utilities/date';
+import { ifDefinedAndNotEmpty } from '../../../utilities/directives';
+import { LocalizeController } from '../../../utilities/localize';
 import styles from './date-field.styles';
 import { isInvalidSpinbuttonKey } from './date-field.utils';
 /**

package/cdn/internal/components/date-field/date-field.styles.js

@@ -48,7 +48,13 @@ export default css `
   input[type='number']:focus {
     background: var(--dsa-color-primitive-colors-identity-purple-500);
     border-radius: 2px;
-    color: var(--dsa-color-primitive-colors-neutral-100);
+    color: var(--dsa-color-primitive-colors-neutral-0);
+  }
+  input[type='number']:not([disabled])::placeholder {
+    color: var(--dsa-wc-input-on-base-text-field-placeholder-color);
+  }
+  input[type='number'][disabled]::placeholder {
+    color: var(--dsa-wc-input-label-color-disabled);
   }
   input[type='number']:focus::placeholder {
     color: white;

package/cdn/internal/components/filter-base/filter-base.d.ts

@@ -4,8 +4,8 @@ import '../../../components/filter-button/filter-button';
 import type DSAIconButton from '../../../components/icon-button/icon-button';
 import type DSAPopup from '../../../components/popup/popup';
 import '../../../components/popup/popup';
-import { LocalizeController } from '../../../utilities/localize';
 import { ShoelaceElement } from '../../shoelace-element';
+import { LocalizeController } from '../../../utilities/localize';
 export declare class FilterBase extends ShoelaceElement {
     protected readonly localize: LocalizeController;
     popup: DSAPopup;

package/cdn/internal/components/filter-base/filter-base.js

@@ -18,13 +18,13 @@ import { property, query, state } from 'lit/decorators.js';
 import { renderFormElementErrors } from '../../../components/error-text/error-text.utils';
 import '../../../components/filter-button/filter-button';
 import '../../../components/popup/popup';
-import { getAnimation, setDefaultAnimation, } from '../../../utilities/animation-registry';
-import { LocalizeController } from '../../../utilities/localize';
 import { a11yWarning } from '../../a11y-warning';
 import { animateTo, stopAnimations, shimKeyframesHeightAuto, } from '../../animate';
 import { waitForEvent } from '../../event';
 import { ShoelaceElement } from '../../shoelace-element';
 import { watch } from '../../watch';
+import { getAnimation, setDefaultAnimation, } from '../../../utilities/animation-registry';
+import { LocalizeController } from '../../../utilities/localize';
 export class FilterBase extends ShoelaceElement {
     constructor() {
         super(...arguments);

package/cdn/internal/components/form-selectable-card/form-selectable-card.d.ts

@@ -1,8 +1,8 @@
 import type { CSSResultGroup } from 'lit';
 import '../../../components/icon/icon';
+import '../../components/checkbox-box/checkbox-box';
+import '../../components/radio-icon/radio-icon';
 import { ShoelaceElement } from '../../shoelace-element';
-import '../checkbox-box/checkbox-box';
-import '../radio-icon/radio-icon';
 export declare class FormSelectableCard extends ShoelaceElement {
     static styles: CSSResultGroup;
     button: HTMLInputElement;

package/cdn/internal/components/form-selectable-card/form-selectable-card.js

@@ -9,10 +9,10 @@ import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { html } from 'lit/static-html.js';
 import '../../../components/icon/icon';
+import '../../components/checkbox-box/checkbox-box';
+import '../../components/radio-icon/radio-icon';
 import { ShoelaceElement } from '../../shoelace-element';
 import { watch } from '../../watch';
-import '../checkbox-box/checkbox-box';
-import '../radio-icon/radio-icon';
 import styles from './form-selectable-card.styles';
 export class FormSelectableCard extends ShoelaceElement {
     constructor() {

package/cdn/internal/components/form-toggle-button/form-toggle-button.styles.js

@@ -97,6 +97,7 @@ export default css `
   }
 
   .button--toggle.button--disabled {
+    opacity: 0.5;
     background-color: var(--dsa-wc-toggle-button-disabled-background-color);
     border-color: var(--dsa-wc-toggle-button-disabled-border-color);
     color: var(--dsa-wc-toggle-button-disabled-color);

package/cdn/internal/components/input-base/input-base-stories.js

@@ -1,5 +1,5 @@
 import { successArgTypes, successMessageArgTypes, } from '../../../components/success-text/success-text-stories';
-import { formControlLayoutArgTypes } from '../form-control/form-control-layout-stories';
+import { formControlLayoutArgTypes } from '../../components/form-control/form-control-layout-stories';
 export const inputBaseGlobalArgTypes = Object.assign(Object.assign({}, formControlLayoutArgTypes), { '?success': successArgTypes, 'success-message': successMessageArgTypes, value: {
         name: 'value',
         description: 'The current value of the input, submitted as a name/value pair with form data',

package/cdn/internal/components/input-base/input-base.d.ts

@@ -1,8 +1,8 @@
 import '../../../components/success-text/success-text';
+import type DSAInternalDateField from '../../components/date-field/date-field';
+import { FormControlLayout } from '../../components/form-control/form-control-layout';
 import { FormControlController } from '../../form';
 import type { ShoelaceFormControl } from '../../shoelace-element';
-import type DSAInternalDateField from '../date-field/date-field';
-import { FormControlLayout } from '../form-control/form-control-layout';
 import type { DSAInputTypes } from './input-base.utils';
 /** InputBase communalizes common functionality between the inputs. */
 export declare class InputBase extends FormControlLayout implements ShoelaceFormControl {

package/cdn/internal/components/input-base/input-base.js

@@ -16,10 +16,10 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 import { html } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
 import '../../../components/success-text/success-text';
+import { FormControlLayout } from '../../components/form-control/form-control-layout';
 import { defaultValue } from '../../default-value';
 import { FormControlController } from '../../form';
 import { watch } from '../../watch';
-import { FormControlLayout } from '../form-control/form-control-layout';
 /** InputBase communalizes common functionality between the inputs. */
 export class InputBase extends FormControlLayout {
     constructor() {

package/cdn/internal/components/input-base/input-base.styles.js

@@ -31,6 +31,11 @@ export default css `
     outline-offset: var(--dsa-wc-focus-ring-offset);
   }
 
+  .input--disabled .input__control,
+  .input--disabled .input__control::placeholder {
+    color: var(--dsa-wc-input-label-color-disabled);
+  }
+
   /* On Layer inputs */
   .input--on-layer {
     background-color: var(--dsa-wc-input-on-layer-background-color);
@@ -50,7 +55,6 @@ export default css `
   .input--on-layer.input--disabled {
     background-color: var(--dsa-wc-input-on-layer-background-color-disabled);
     border-color: var(--dsa-wc-input-on-layer-border-color-disabled);
-    opacity: 0.5;
     cursor: not-allowed;
   }
 
@@ -77,7 +81,7 @@ export default css `
     border-color: var(--dsa-wc-input-success-border-color);
   }
 
-  .input--on-layer .input__control::placeholder {
+  .input--on-layer:not(.input--disabled) .input__control::placeholder {
     color: var(--dsa-wc-input-on-layer-text-field-placeholder-color);
     user-select: none;
   }
@@ -97,7 +101,6 @@ export default css `
   .input--on-base.input--disabled {
     border-color: var(--dsa-wc-input-on-base-border-color-disabled);
     background-color: var(--dsa-wc-input-on-base-background-color-disabled);
-    opacity: 0.5;
     cursor: not-allowed;
   }
 
@@ -121,7 +124,7 @@ export default css `
     border-color: var(--dsa-wc-input-success-border-color);
   }
 
-  .input--on-base .input__control::placeholder {
+  .input--on-base:not(.input--disabled) .input__control::placeholder {
     color: var(--dsa-wc-input-on-base-text-field-placeholder-color);
     user-select: none;
   }

package/cdn/internal/form.d.ts

@@ -1,6 +1,6 @@
 import type { ReactiveController, ReactiveControllerHost } from 'lit';
 import type SlButton from '../components/button/button';
-import type { ShoelaceFormControl } from '../internal/shoelace-element';
+import type { ShoelaceFormControl } from './shoelace-element';
 export declare const formCollections: WeakMap<HTMLFormElement, Set<ShoelaceFormControl>>;
 export interface FormControlControllerOptions {
     /** A function that returns the form containing the form control. */

package/cdn/themes/dsa-wc-theme.css

@@ -20,31 +20,45 @@
   --dsa-wc-alert-title-color: var(--dsa-color-alert-on-background-title);
   --dsa-wc-alert-title-padding-top: 0.125rem;
   --dsa-wc-alert-message-font: var(--dsa-font-medium-normal);
-  --dsa-wc-alert-message-color: var(--dsa-color-alert-on-background-text);
   --dsa-wc-alert-message-padding: 1.25rem;
   --dsa-wc-alert-primary-icon-color: var(--dsa-color-alert-on-background-info);
+  --dsa-wc-alert-primary-message-color: var(
+    --dsa-color-alert-on-background-text-default
+  );
   --dsa-wc-alert-primary-background-color: var(
     --dsa-color-alert-background-info
   );
   --dsa-wc-alert-danger-icon-color: var(--dsa-color-alert-on-background-danger);
+  --dsa-wc-alert-danger-message-color: var(
+    --dsa-color-alert-on-background-text-danger
+  );
   --dsa-wc-alert-danger-background-color: var(
     --dsa-color-alert-background-danger
   );
   --dsa-wc-alert-success-icon-color: var(
     --dsa-color-alert-on-background-success
   );
+  --dsa-wc-alert-success-message-color: var(
+    --dsa-color-alert-on-background-text-success
+  );
   --dsa-wc-alert-success-background-color: var(
     --dsa-color-alert-background-success
   );
   --dsa-wc-alert-warning-icon-color: var(
     --dsa-color-alert-on-background-warning
   );
+  --dsa-wc-alert-warning-message-color: var(
+    --dsa-color-alert-on-background-text-warning
+  );
   --dsa-wc-alert-warning-background-color: var(
     --dsa-color-alert-background-warning
   );
   --dsa-wc-alert-neutral-icon-color: var(
     --dsa-color-alert-on-background-neutral
   );
+  --dsa-wc-alert-neutral-message-color: var(
+    --dsa-color-alert-on-background-text-default
+  );
   --dsa-wc-alert-neutral-background-color: var(
     --dsa-color-alert-background-neutral
   );
@@ -256,40 +270,46 @@
   );
   --dsa-wc-toggle-button-icon-spacing: var(--dsa-spacing-8);
   --dsa-wc-toggle-button-icon-padding-x: var(--dsa-spacing-8);
-  --dsa-wc-switch-label-color: var(--dsa-color-text-on-base-primary);
-  --dsa-wc-switch-control-background-color: var(--dsa-color-background-base);
-  --dsa-wc-switch-thumb-background-color: var(--dsa-color-background-base);
+  --dsa-wc-switch-label-color: var(--dsa-color-switch-label);
+  --dsa-wc-switch-control-background-color: var(
+    --dsa-color-switch-control-inactive-background-default
+  );
+  --dsa-wc-switch-thumb-background-color: var(
+    --dsa-color-switch-control-inactive-thumb-default
+  );
   --dsa-wc-switch-control-border-color: var(
-    --dsa-color-primitive-colors-identity-purple-500
+    --dsa-color-switch-control-inactive-border-default
   );
   --dsa-wc-switch-control-border-width: 2px;
   --dsa-wc-switch-control-background-color-hover: var(
-    --dsa-color-background-hover
+    --dsa-color-switch-control-inactive-background-hover
   );
   --dsa-wc-switch-control-background-color-active: var(
-    --dsa-color-background-active-default
+    --dsa-color-switch-control-active-background-default
   );
   --dsa-wc-switch-thumb-background-color-active: var(
-    --dsa-color-primitive-colors-identity-purple-100
+    --dsa-color-switch-control-active-thumb-default
   );
   --dsa-wc-switch-control-background-color-active-hover: var(
-    --dsa-color-background-active-hover
+    --dsa-color-switch-control-active-background-hover
   );
   --dsa-wc-switch-control-border-color-disabled: var(
-    --dsa-color-primitive-colors-neutral-500
+    --dsa-color-primitive-colors-neutral-300
   );
   --dsa-wc-switch-control-background-color-active-disabled: var(
-    --dsa-color-primitive-colors-neutral-200
+    --dsa-color-primitive-colors-neutral-50
   );
   --dsa-wc-switch-control-border-color-readonly: var(
-    --dsa-color-primitive-colors-neutral-700
+    --dsa-color-switch-control-inactive-border-read-only
   );
   --dsa-wc-switch-control-background-color-active-readonly: var(
-    --dsa-color-primitive-colors-neutral-500
+    --dsa-color-switch-control-active-background-read-only
   );
   --dsa-switch-padding: var(--dsa-spacing-8);
-  --dsa-wc-switch-background-color-hover: var(--dsa-color-background-hover);
-  --dsa-wc-switch-border-color-hover: var(--dsa-color-border-hover);
+  --dsa-wc-switch-background-color-hover: var(
+    --dsa-color-switch-background-hover
+  );
+  --dsa-wc-switch-border-color-hover: var(--dsa-color-switch-border-hover);
   --dsa-wc-switch-font-small: var(--dsa-font-small-normal);
   --dsa-wc-switch-font-medium: var(--dsa-font-medium-normal);
   --dsa-wc-switch-font-large: var(--dsa-font-large-normal);
@@ -297,9 +317,7 @@
   --dsa-wc-switch-size-medium: 2rem;
   --dsa-wc-switch-size-large: 2.5rem;
   --dsa-wc-selectable-card-background-color: var(--dsa-color-background-base);
-  --dsa-wc-selectable-card-border-color: var(
-    --dsa-color-primitive-colors-neutral-650
-  );
+  --dsa-wc-selectable-card-border-color: var(--dsa-color-border-default);
   --dsa-wc-selectable-card-color: var(--dsa-color-text-on-base-primary);
   --dsa-wc-selectable-card-border-width: 1px;
   --dsa-wc-selectable-card-border-radius: var(--dsa-radius-8);
@@ -351,7 +369,7 @@
     --dsa-color-background-read-only
   );
   --dsa-wc-selectable-card-read-only-border-color: var(
-    --dsa-color-primitive-colors-neutral-650
+    --dsa-color-border-default
   );
   --dsa-wc-selectable-card-error-border-color: var(
     --dsa-color-checkbox-button-unchecked-error-border
@@ -414,7 +432,7 @@
   --dsa-wc-card-content-large-title-font: var(--dsa-font-x-large-bold);
   --dsa-wc-card-content-small-title-font: var(--dsa-font-large-bold);
   --dsa-wc-card-content-subtitle-font: var(--dsa-font-medium-bold);
-  --dsa-wc-card-content-content-font: var(---dsa-font-medium-normal);
+  --dsa-wc-card-content-content-font: var(--dsa-font-medium-normal);
   --dsa-wc-card-content-title-color: var(--dsa-color-text-on-base-primary);
   --dsa-wc-card-content-subtitle-text-color: var(
     --dsa-color-text-on-base-secondary
@@ -1272,7 +1290,7 @@
   );
   --dsa-wc-tag-green-600-base: var(--dsa-color-tag-simple-green-background-6);
   --dsa-wc-tag-green-500-on-base: var(
-    --dsa-color-tag-simple-green-on-light-background
+    --dsa-color-tag-simple-green-on-dark-background
   );
   --dsa-wc-tag-green-500-base: var(--dsa-color-tag-simple-green-background-5);
   --dsa-wc-tag-green-400-on-base: var(
@@ -1300,7 +1318,7 @@
   );
   --dsa-wc-tag-yellow-600-base: var(--dsa-color-tag-simple-yellow-background-6);
   --dsa-wc-tag-yellow-500-on-base: var(
-    --dsa-color-tag-simple-yellow-on-light-background
+    --dsa-color-tag-simple-yellow-on-dark-background
   );
   --dsa-wc-tag-yellow-500-base: var(--dsa-color-tag-simple-yellow-background-5);
   --dsa-wc-tag-yellow-400-on-base: var(
@@ -1324,7 +1342,7 @@
   );
   --dsa-wc-tag-pink-500-base: var(--dsa-color-tag-simple-pink-background-5);
   --dsa-wc-tag-pink-400-on-base: var(
-    --dsa-color-tag-simple-pink-on-light-background
+    --dsa-color-tag-simple-pink-on-dark-background
   );
   --dsa-wc-tag-pink-400-base: var(--dsa-color-tag-simple-pink-background-4);
   --dsa-wc-tag-pink-300-on-base: var(
@@ -1368,7 +1386,7 @@
   );
   --dsa-wc-tag-blue-600-base: var(--dsa-color-tag-simple-blue-background-6);
   --dsa-wc-tag-blue-500-on-base: var(
-    --dsa-color-tag-simple-blue-on-light-background
+    --dsa-color-tag-simple-blue-on-dark-background
   );
   --dsa-wc-tag-blue-500-base: var(--dsa-color-tag-simple-blue-background-5);
   --dsa-wc-tag-blue-400-on-base: var(
@@ -1512,6 +1530,9 @@
   --dsa-wc-input-label-font-small: var(--dsa-font-x-small-normal);
   --dsa-wc-input-label-font-large: var(--dsa-font-medium-normal);
   --dsa-wc-input-label-color-error: var(--dsa-color-text-on-base-error);
+  --dsa-wc-input-label-color-disabled: var(
+    --dsa-color-input-text-field-disabled
+  );
   --dsa-wc-input-helper-font: var(--dsa-font-small-normal);
   --dsa-wc-input-helper-font-small: var(--dsa-font-x-small-normal);
   --dsa-wc-input-helper-font-large: var(--dsa-font-medium-normal);
@@ -1613,7 +1634,7 @@
     --dsa-color-primitive-colors-feedback-success-500
   );
   --dsa-wc-input-success-background-color: var(
-    --dsa-color-primitive-colors-feedback-success-200
+    --dsa-color-primitive-colors-feedback-success-100
   );
   --dsa-wc-input-mask-clear-icon-margin-inline-start: 0.5em;
   --dsa-wc-input-mask-clear-icon-z-index: 1;
@@ -1720,7 +1741,7 @@
     --dsa-color-primitive-colors-neutral-600
   );
   --dsa-wc-accordion-filled-disabled-background-color: var(
-    --dsa-color-primitive-colors-neutral-400
+    --dsa-color-primitive-colors-neutral-200
   );
   --dsa-wc-accordion-summary-padding: 7px 0px;
   --dsa-wc-accordion-summary-font: var(--dsa-font-large-bold);
@@ -1749,7 +1770,7 @@
   --dsa-wc-select-icon-size: 1rem;
   --dsa-wc-multiselect-tag-margin-inline-start: 0.25rem;
   --dsa-wc-multiselect-tag-background: var(
-    --dsa-color-tag-multiselect-background
+    --dsa-color-tag-multiselect-background-default
   );
   --dsa-wc-multiselect-tag-color: var(
     --dsa-color-tag-multiselect-default-on-background-text
@@ -1947,13 +1968,13 @@
   --dsa-wc-link-font-x-small: var(--dsa-font-x-small-normal);
   --dsa-wc-link-font-2x-small: var(--dsa-font-2x-small-normal);
   --dsa-wc-range-slider-background: var(
-    --dsa-color-primitive-colors-neutral-500
+    --dsa-color-primitive-colors-neutral-200
   );
   --dsa-wc-range-slider-thumb-background: var(
     --dsa-color-primitive-colors-identity-purple-500
   );
   --dsa-wc-range-slider-thumb-border-color: var(
-    --dsa-color-primitive-colors-neutral-100
+    --dsa-color-primitive-colors-neutral-0
   );
   --dsa-wc-range-slider-thumb-size: 24px;
   --dsa-wc-range-slider-thumb-border-radius: 3px;
@@ -2081,7 +2102,7 @@
   --dsa-wc-profile-button-font: var(--dsa-font-small-normal);
   --dsa-wc-profile-button-background: var(--dsa-color-background-base);
   --dsa-wc-profile-button-background-hover: var(
-    --dsa-color-primitive-colors-neutral-300
+    --dsa-color-primitive-colors-neutral-100
   );
   --dsa-wc-profile-button-background-active: var(
     --dsa-color-primitive-colors-identity-purple-200
@@ -2094,18 +2115,18 @@
   --dsa-wc-table-header-cell-padding-x: var(--dsa-spacing-8);
   --dsa-wc-table-header-cell-skeleton-padding-inline-end: var(--dsa-spacing-40);
   --dsa-wc-table-header-cell-background-hover: var(
-    --dsa-color-primitive-colors-neutral-400
+    --dsa-color-primitive-colors-neutral-200
   );
   --dsa-wc-table-header-cell-background-active: var(
-    --dsa-color-primitive-colors-neutral-500
+    --dsa-color-primitive-colors-neutral-300
   );
   --dsa-wc-table-header-cell-sort-icon-size: 1rem;
   --dsa-wc-table-header-cell-sort-button-outline-offset: -3px;
   --dsa-wc-table-header-cell-skeleton-color: var(
-    --dsa-color-primitive-colors-neutral-400
+    --dsa-color-primitive-colors-neutral-200
   );
   --dsa-wc-table-header-cell-skeleton-sheen-color: var(
-    --dsa-color-primitive-colors-neutral-500
+    --dsa-color-primitive-colors-neutral-300
   );
   --dsa-wc-table-header-row-font: var(--dsa-font-small-bold);
   --dsa-wc-table-header-row-background: var(
@@ -2129,9 +2150,6 @@
   --dsa-wc-table-row-hover-error-background: var(
     --dsa-color-primitive-colors-feedback-error-200
   );
-  --dsa-wc-table-row-hover-selected-error-background: var(
-    --dsa-color-primitive-colors-feedback-error-300
-  );
   --dsa-wc-table-row-error-border-color: var(
     --dsa-color-primitive-colors-feedback-error-500
   );
@@ -2141,7 +2159,7 @@
   --dsa-wc-table-row-selectable-cell-width: 40px;
   --dsa-wc-table-row-expandable-cell-width: 40px;
   --dsa-wc-table-expanded-row-background: var(
-    --dsa-color-primitive-colors-neutral-300
+    --dsa-color-primitive-colors-neutral-100
   );
   --dsa-wc-table-expanded-row-transition: all var(--dsa-wc-transition-fast)
     cubic-bezier(0.2, 0, 0.38, 0.9) 0s;
@@ -2159,7 +2177,7 @@
   --dsa-wc-pagination-button-size: 2rem;
   --dsa-wc-pagination-button-padding: 8px;
   --dsa-wc-pagination-button-background-color: var(
-    --dsa-color-primitive-colors-neutral-100
+    --dsa-color-primitive-colors-neutral-0
   );
   --dsa-wc-pagination-button-hover-background-color: var(
     --dsa-color-pagination-page-number-hover-background
@@ -2169,9 +2187,6 @@
   --dsa-wc-pagination-button-disabled-color: hsla(0, 0%, 40%, 1);
   --dsa-wc-pagination-select-border-color: var(--dsa-color-border-default);
   --dsa-wc-pagination-select-font: var(--dsa-font-x-small-normal);
-  --dsa-wc-pagination-select-color: var(
-    --dsa-color-primitive-colors-neutral-650
-  );
   --dsa-wc-pagination-compact-font: var(--dsa-font-medium-normal);
   --dsa-wc-pagination-compact-button-size: 40px;
   --dsa-wc-filter-button-label-font: var(--dsa-font-small-normal);
@@ -2199,7 +2214,7 @@
     --dsa-color-input-on-base-disabled-border
   );
   --dsa-wc-filter-button-readonly-background-color: var(
-    --dsa-color-primitive-colors-neutral-400
+    --dsa-color-primitive-colors-neutral-200
   );
   --dsa-wc-filter-button-readonly-border-color: var(
     --dsa-color-input-on-base-read-only-border
@@ -2220,13 +2235,13 @@
   --dsa-wc-calendar-font: var(--dsa-font-small-normal);
   --dsa-wc-calendar-header-padding: var(--dsa-spacing-16);
   --dsa-wc-calendar-header-font: var(--dsa-font-small-normal);
-  --dsa-wc-calendar-header-color: var(--dsa-color-text-on-base-secondary);
+  --dsa-wc-calendar-header-color: var(--dsa-color-datepicker-on-background-day);
   --dsa-wc-calendar-cell-font: var(--dsa-font-small-normal);
   --dsa-wc-calendar-cell-color: var(--dsa-color-text-on-base-primary);
   --dsa-wc-calendar-cell-size: 2.25rem;
   --dsa-wc-calendar-cell-padding: var(--dsa-spacing-8);
   --dsa-wc-calendar-cell-overflow-color: var(
-    --dsa-color-primitive-colors-neutral-650
+    --dsa-color-datepicker-on-background-not-current
   );
   --dsa-wc-calendar-cell-in-range-hover-color: var(
     --dsa-color-primitive-colors-identity-purple-300