@ds-autonomie/web-components 2.2.0 → 2.3.1

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

@@ -64,7 +64,6 @@
   --dsa-wc-callout-default-background-color: var(
     --dsa-color-callout-background-default
   );
-  --dsa-wc-dialog-spacing: var(--dsa-spacing-24);
   --dsa-wc-dialog-overlay: var(--dsa-color-surface-overlay);
   --dsa-wc-dialog-overlay-opacity: 0.4;
   --dsa-wc-dialog-font: var(--dsa-font-medium-normal);
@@ -72,10 +71,16 @@
   --dsa-wc-dialog-size-small: 23.125rem;
   --dsa-wc-dialog-size-large: 50rem;
   --dsa-wc-dialog-header-title-font: var(--dsa-font-medium-bold);
+  --dsa-wc-dialog-header-title-padding: 20px 0;
   --dsa-wc-dialog-header-icon-size: 1.5rem;
   --dsa-wc-dialog-header-actions-gap: var(--dsa-spacing-4);
   --dsa-wc-dialog-header-icon-spacing: 0.5rem;
   --dsa-wc-dialog-header-icon-color: var(--dsa-color-icon-on-base-default);
+  --dsa-wc-dialog-header-padding: 16px 20px;
+  --dsa-wc-dialog-header-spacing: 20px;
+  --dsa-wc-dialog-body-padding: 20px;
+  --dsa-wc-dialog-footer-padding: 20px;
+  --dsa-wc-dialog-footer-spacing: 16px;
   --dsa-wc-dialog-scrollbar-width: 0.25rem;
   --dsa-wc-dialog-scrollbar-color: var(--dsa-color-scroll-bar-background);
   --dsa-wc-dialog-scrollbar-radius: var(--dsa-spacing-4);
@@ -84,7 +89,6 @@
   --dsa-wc-dialog-panel-gutter: var(--dsa-spacing-40);
   --dsa-wc-dialog-panel-box-shadow: var(--dsa-wc-shadow-x-large);
   --dsa-wc-dialog-footer-border: 1px solid var(--dsa-color-border-default);
-  --dsa-wc-dialog-footer-content-margin: var(--dsa-spacing-8);
   --dsa-wc-form-font: var(--dsa-font-medium-normal);
   --dsa-wc-form-font-small: var(--dsa-font-small-normal);
   --dsa-wc-form-font-large: var(--dsa-font-large-normal);
@@ -152,11 +156,11 @@
   --dsa-wc-radio-label-color: var(--dsa-color-text-on-base-primary);
   --dsa-wc-radio-label-color-disabled: var(--dsa-color-text-on-base-disabled);
   --dsa-wc-radio-size: 1.125rem;
+  --dsa-wc-radio-inner-size: 0.625rem;
   --dsa-wc-radio-size-small: 0.875rem;
+  --dsa-wc-radio-inner-size-small: 0.5rem;
   --dsa-wc-radio-size-large: 1.375rem;
-  --dsa-wc-radio-icon-size: 0.875rem;
-  --dsa-wc-radio-icon-size-small: 0.75rem;
-  --dsa-wc-radio-icon-size-large: 1.125rem;
+  --dsa-wc-radio-inner-size-large: 0.875rem;
   --dsa-wc-radio-border-width: 0.125rem;
   --dsa-wc-radio-border-width-small: 0.099rem;
   --dsa-wc-toggle-group-spacing-label-toggles: var(--dsa-spacing-16);
@@ -247,6 +251,106 @@
   );
   --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-control-border-color: var(
+    --dsa-color-primitive-colors-identity-purple-500
+  );
+  --dsa-wc-switch-control-border-width: 2px;
+  --dsa-wc-switch-control-background-color-hover: var(
+    --dsa-color-background-hover
+  );
+  --dsa-wc-switch-control-background-color-active: var(
+    --dsa-color-background-active-default
+  );
+  --dsa-wc-switch-thumb-background-color-active: var(
+    --dsa-color-primitive-colors-identity-purple-100
+  );
+  --dsa-wc-switch-control-background-color-active-hover: var(
+    --dsa-color-background-active-hover
+  );
+  --dsa-wc-switch-control-border-color-disabled: var(
+    --dsa-color-primitive-colors-neutral-500
+  );
+  --dsa-wc-switch-control-background-color-active-disabled: var(
+    --dsa-color-primitive-colors-neutral-200
+  );
+  --dsa-wc-switch-control-border-color-readonly: var(
+    --dsa-color-primitive-colors-neutral-700
+  );
+  --dsa-wc-switch-control-background-color-active-readonly: var(
+    --dsa-color-primitive-colors-neutral-500
+  );
+  --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-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);
+  --dsa-wc-switch-size-small: 1.75rem;
+  --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-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);
+  --dsa-wc-selectable-card-horizontal-padding: var(--dsa-spacing-16)
+    var(--dsa-spacing-16);
+  --dsa-wc-selectable-card-horizontal-gap: var(--dsa-spacing-16);
+  --dsa-wc-selectable-card-vertical-padding: var(--dsa-spacing-16)
+    var(--dsa-spacing-16) var(--dsa-spacing-40);
+  --dsa-wc-selectable-card-vertical-gap: 12.5px;
+  --dsa-wc-selectable-card-content-gap: var(--dsa-spacing-16);
+  --dsa-wc-selectable-card-text-gap: var(--dsa-spacing-4);
+  --dsa-wc-selectable-card-label-font: var(--dsa-font-medium-bold);
+  --dsa-wc-selectable-card-label-color: var(--dsa-color-text-on-base-primary);
+  --dsa-wc-selectable-card-description-font: var(--dsa-font-small-normal);
+  --dsa-wc-selectable-card-description-color: var(
+    --dsa-color-text-on-base-secondary
+  );
+  --dsa-wc-selectable-card-hover-background-color: var(
+    --dsa-color-background-hover
+  );
+  --dsa-wc-selectable-card-hover-border-color: var(--dsa-color-border-hover);
+  --dsa-wc-selectable-card-hover-radio-color: var(--dsa-color-radio-hover);
+  --dsa-wc-selectable-card-checked-background-color: var(
+    --dsa-color-background-selected
+  );
+  --dsa-wc-selectable-card-checked-border-color: var(
+    --dsa-color-border-selected-default
+  );
+  --dsa-wc-selectable-card-checked-radio-color: var(--dsa-color-radio-checked);
+  --dsa-wc-selectable-card-checked-hover-background-color: var(
+    --dsa-color-background-hover
+  );
+  --dsa-wc-selectable-card-checked-hover-border-color: var(
+    --dsa-color-border-selected-hover
+  );
+  --dsa-wc-selectable-card-disabled-background-color: var(
+    --dsa-color-background-disabled
+  );
+  --dsa-wc-selectable-card-disabled-border-color: var(
+    --dsa-color-border-disabled
+  );
+  --dsa-wc-selectable-card-disabled-color: var(
+    --dsa-color-text-on-base-disabled
+  );
+  --dsa-wc-selectable-card-disabled-radio-color: var(
+    --dsa-color-radio-disabled
+  );
+  --dsa-wc-selectable-card-read-only-background-color: var(
+    --dsa-color-background-read-only
+  );
+  --dsa-wc-selectable-card-read-only-border-color: var(
+    --dsa-color-primitive-colors-neutral-650
+  );
+  --dsa-wc-selectable-card-error-border-color: var(
+    --dsa-color-checkbox-button-unchecked-error-border
+  );
   --dsa-wc-tab-font: var(--dsa-font-small-normal);
   --dsa-wc-tab-font-active-tab: var(--dsa-font-small-bold);
   --dsa-wc-tab-border-radius: 0px;
@@ -687,15 +791,27 @@
   --dsa-wc-button-tertiary-on-base-font-color: var(
     --dsa-color-button-on-base-tertiary-default
   );
+  --dsa-wc-button-tertiary-on-base-border-color: var(
+    --dsa-color-button-on-base-tertiary-default
+  );
   --dsa-wc-button-tertiary-on-base-hover-color: transparent;
+  --dsa-wc-button-tertiary-on-base-hover-border-color: var(
+    --dsa-color-button-on-base-tertiary-hover
+  );
   --dsa-wc-button-tertiary-on-base-hover-font-color: var(
     --dsa-color-button-on-base-tertiary-hover
   );
   --dsa-wc-button-tertiary-on-base-active-color: transparent;
+  --dsa-wc-button-tertiary-on-base-active-border-color: var(
+    --dsa-color-button-on-base-tertiary-active
+  );
   --dsa-wc-button-tertiary-on-base-active-font-color: var(
     --dsa-color-button-on-base-tertiary-active
   );
   --dsa-wc-button-tertiary-on-base-disabled-color: transparent;
+  --dsa-wc-button-tertiary-on-base-disabled-border-color: var(
+    --dsa-color-button-on-base-tertiary-disabled
+  );
   --dsa-wc-button-tertiary-on-base-disabled-font-color: var(
     --dsa-color-button-on-base-tertiary-disabled
   );
@@ -710,18 +826,30 @@
     --dsa-color-spinner-on-base-primary-on-background
   );
   --dsa-wc-button-tertiary-on-floating-menu-color: transparent;
+  --dsa-wc-button-tertiary-on-floating-menu-border-color: var(
+    --dsa-color-button-on-floating-menu-tertiary-default
+  );
   --dsa-wc-button-tertiary-on-floating-menu-font-color: var(
     --dsa-color-button-on-floating-menu-tertiary-default
   );
   --dsa-wc-button-tertiary-on-floating-menu-hover-color: transparent;
+  --dsa-wc-button-tertiary-on-floating-menu-hover-border-color: var(
+    --dsa-color-button-on-floating-menu-tertiary-hover
+  );
   --dsa-wc-button-tertiary-on-floating-menu-hover-font-color: var(
     --dsa-color-button-on-floating-menu-tertiary-hover
   );
   --dsa-wc-button-tertiary-on-floating-menu-active-color: transparent;
+  --dsa-wc-button-tertiary-on-floating-menu-active-border-color: var(
+    --dsa-color-button-on-floating-menu-tertiary-active
+  );
   --dsa-wc-button-tertiary-on-floating-menu-active-font-color: var(
     --dsa-color-button-on-floating-menu-tertiary-active
   );
   --dsa-wc-button-tertiary-on-floating-menu-disabled-color: transparent;
+  --dsa-wc-button-tertiary-on-floating-menu-disabled-border-color: var(
+    --dsa-color-button-on-floating-menu-tertiary-disabled
+  );
   --dsa-wc-button-tertiary-on-floating-menu-disabled-font-color: var(
     --dsa-color-button-on-floating-menu-tertiary-disabled
   );
@@ -736,18 +864,30 @@
     --dsa-color-spinner-on-floatting-menu-on-background
   );
   --dsa-wc-button-tertiary-on-contrasted-menu-color: transparent;
+  --dsa-wc-button-tertiary-on-contrasted-menu-border-color: var(
+    --dsa-color-button-on-contrasted-neutral-tertiary-default
+  );
   --dsa-wc-button-tertiary-on-contrasted-menu-font-color: var(
     --dsa-color-button-on-contrasted-neutral-tertiary-default
   );
   --dsa-wc-button-tertiary-on-contrasted-menu-hover-color: transparent;
+  --dsa-wc-button-tertiary-on-contrasted-menu-hover-border-color: var(
+    --dsa-color-button-on-contrasted-neutral-tertiary-hover
+  );
   --dsa-wc-button-tertiary-on-contrasted-menu-hover-font-color: var(
     --dsa-color-button-on-contrasted-neutral-tertiary-hover
   );
   --dsa-wc-button-tertiary-on-contrasted-menu-active-color: transparent;
+  --dsa-wc-button-tertiary-on-contrasted-menu-active-border-color: var(
+    --dsa-color-button-on-contrasted-neutral-tertiary-active
+  );
   --dsa-wc-button-tertiary-on-contrasted-menu-active-font-color: var(
     --dsa-color-button-on-contrasted-neutral-tertiary-active
   );
   --dsa-wc-button-tertiary-on-contrasted-menu-disabled-color: transparent;
+  --dsa-wc-button-tertiary-on-contrasted-menu-disabled-border-color: var(
+    --dsa-color-button-on-contrasted-neutral-tertiary-disabled
+  );
   --dsa-wc-button-tertiary-on-contrasted-menu-disabled-font-color: var(
     --dsa-color-button-on-contrasted-neutral-tertiary-disabled
   );
@@ -1387,6 +1527,21 @@
   --dsa-wc-input-phone-small-height: 1.875rem;
   --dsa-wc-input-phone-large-height: 3.125rem;
   --dsa-wc-input-phone-prefix-margin-inline-end: 0.4rem;
+  --dsa-wc-input-time-picker-unit-size: 3rem;
+  --dsa-wc-input-time-panel-border-color: var(--dsa-color-border-default);
+  --dsa-wc-input-time-panel-border-radius: var(--dsa-radius-4);
+  --dsa-wc-input-time-picker-unit-radius: var(--dsa-radius-4);
+  --dsa-wc-input-time-picker-unit-hover-color: var(
+    --dsa-color-primitive-colors-identity-purple-200
+  );
+  --dsa-wc-input-time-picker-unit-current-color: var(
+    --dsa-color-primitive-colors-identity-purple-500
+  );
+  --dsa-wc-input-time-picker-unit-selected-color: var(
+    --dsa-color-primitive-colors-identity-purple-500
+  );
+  --dsa-wc-input-time-picker-unit-font: var(--dsa-font-small-normal);
+  --dsa-wc-input-time-picker-unit-color: var(--dsa-color-text-on-base-primary);
   --dsa-wc-input-otp-single-fields-gap: var(--dsa-spacing-8);
   --dsa-wc-input-otp-single-field-width-small: 1.5rem;
   --dsa-wc-input-otp-single-field-width-medium: 2rem;