@designsystem-se/af 34.2.0 → 34.2.1-beta.1

package/dist/collection/components/_calendar/week-view/calendar-week-view.css

@@ -2,301 +2,6 @@
 v2.0 | 20110126
 License: none (public domain)
 */
-.digi--util--fs--xs {
-  font-size: var(--digi--global--typography--font-size--small) !important;
-}
-
-.digi--util--fs--s {
-  font-size: calc(var(--digi--global--typography--font-size--small) + 1px) !important;
-}
-
-.digi--util--fs--m {
-  font-size: var(--digi--global--typography--font-size--base) !important;
-}
-
-.digi--util--fs--l {
-  font-size: var(--digi--global--typography--font-size--large) !important;
-}
-
-.digi--util--fw--sb {
-  font-weight: var(--digi--global--typography--font-weight--semibold) !important;
-}
-
-.digi--util--pt--1 {
-  padding-top: var(--digi--global--spacing--smallest-2) !important;
-}
-
-.digi--util--pt--10 {
-  padding-top: var(--digi--global--spacing--smallest) !important;
-}
-
-.digi--util--pt--20 {
-  padding-top: var(--digi--global--spacing--base) !important;
-}
-
-.digi--util--pt--30 {
-  padding-top: var(--digi--global--spacing--largest-2) !important;
-}
-
-.digi--util--pt--40 {
-  padding-top: var(--digi--global--spacing--largest-4) !important;
-}
-
-.digi--util--pt--50 {
-  padding-top: 2.5rem !important;
-}
-
-.digi--util--pt--60 {
-  padding-top: var(--digi--global--spacing--largest-5) !important;
-}
-
-.digi--util--pt--70 {
-  padding-top: var(--digi--global--spacing--largest-6) !important;
-}
-
-.digi--util--pt--80 {
-  padding-top: 4.5rem !important;
-}
-
-.digi--util--pt--90 {
-  padding-top: 5rem !important;
-}
-
-.digi--util--pb--1 {
-  padding-bottom: var(--digi--global--spacing--smallest-2) !important;
-}
-
-.digi--util--pb--10 {
-  padding-bottom: var(--digi--global--spacing--smallest) !important;
-}
-
-.digi--util--pb--20 {
-  padding-bottom: var(--digi--global--spacing--base) !important;
-}
-
-.digi--util--pb--30 {
-  padding-bottom: var(--digi--global--spacing--largest-2) !important;
-}
-
-.digi--util--pb--40 {
-  padding-bottom: var(--digi--global--spacing--largest-4) !important;
-}
-
-.digi--util--pb--50 {
-  padding-bottom: 2.5rem !important;
-}
-
-.digi--util--pb--60 {
-  padding-bottom: var(--digi--global--spacing--largest-5) !important;
-}
-
-.digi--util--pb--70 {
-  padding-bottom: var(--digi--global--spacing--largest-6) !important;
-}
-
-.digi--util--pb--80 {
-  padding-bottom: 4.5rem !important;
-}
-
-.digi--util--pb--90 {
-  padding-bottom: 5rem !important;
-}
-
-.digi--util--p--1 {
-  padding: var(--digi--global--spacing--smallest-2) !important;
-}
-
-.digi--util--p--10 {
-  padding: var(--digi--global--spacing--smallest) !important;
-}
-
-.digi--util--p--20 {
-  padding: var(--digi--global--spacing--base) !important;
-}
-
-.digi--util--p--30 {
-  padding: var(--digi--global--spacing--largest-2) !important;
-}
-
-.digi--util--p--40 {
-  padding: var(--digi--global--spacing--largest-4) !important;
-}
-
-.digi--util--p--50 {
-  padding: 2.5rem !important;
-}
-
-.digi--util--p--60 {
-  padding: var(--digi--global--spacing--largest-5) !important;
-}
-
-.digi--util--p--70 {
-  padding: var(--digi--global--spacing--largest-6) !important;
-}
-
-.digi--util--p--80 {
-  padding: 4.5rem !important;
-}
-
-.digi--util--p--90 {
-  padding: 5rem !important;
-}
-
-.digi--util--ptb--1 {
-  padding-top: var(--digi--global--spacing--smallest-2) !important;
-  padding-bottom: var(--digi--global--spacing--smallest-2) !important;
-}
-
-.digi--util--ptb--10 {
-  padding-top: var(--digi--global--spacing--smallest) !important;
-  padding-bottom: var(--digi--global--spacing--smallest) !important;
-}
-
-.digi--util--ptb--20 {
-  padding-top: var(--digi--global--spacing--base) !important;
-  padding-bottom: var(--digi--global--spacing--base) !important;
-}
-
-.digi--util--ptb--30 {
-  padding-top: var(--digi--global--spacing--largest-2) !important;
-  padding-bottom: var(--digi--global--spacing--largest-2) !important;
-}
-
-.digi--util--ptb--40 {
-  padding-top: var(--digi--global--spacing--largest-4) !important;
-  padding-bottom: var(--digi--global--spacing--largest-4) !important;
-}
-
-.digi--util--ptb--50 {
-  padding-top: 2.5rem !important;
-  padding-bottom: 2.5rem !important;
-}
-
-.digi--util--ptb--60 {
-  padding-top: var(--digi--global--spacing--largest-5) !important;
-  padding-bottom: var(--digi--global--spacing--largest-5) !important;
-}
-
-.digi--util--ptb--70 {
-  padding-top: var(--digi--global--spacing--largest-6) !important;
-  padding-bottom: var(--digi--global--spacing--largest-6) !important;
-}
-
-.digi--util--ptb--80 {
-  padding-top: 4.5rem !important;
-  padding-bottom: 4.5rem !important;
-}
-
-.digi--util--ptb--90 {
-  padding-top: 5rem !important;
-  padding-bottom: 5rem !important;
-}
-
-.digi--util--plr--1 {
-  padding-left: var(--digi--global--spacing--smallest-2) !important;
-  padding-right: var(--digi--global--spacing--smallest-2) !important;
-}
-
-.digi--util--plr--10 {
-  padding-left: var(--digi--global--spacing--smallest) !important;
-  padding-right: var(--digi--global--spacing--smallest) !important;
-}
-
-.digi--util--plr--20 {
-  padding-left: var(--digi--global--spacing--base) !important;
-  padding-right: var(--digi--global--spacing--base) !important;
-}
-
-.digi--util--plr--30 {
-  padding-left: var(--digi--global--spacing--largest-2) !important;
-  padding-right: var(--digi--global--spacing--largest-2) !important;
-}
-
-.digi--util--plr--40 {
-  padding-left: var(--digi--global--spacing--largest-4) !important;
-  padding-right: var(--digi--global--spacing--largest-4) !important;
-}
-
-.digi--util--plr--50 {
-  padding-left: 2.5rem !important;
-  padding-right: 2.5rem !important;
-}
-
-.digi--util--plr--60 {
-  padding-left: var(--digi--global--spacing--largest-5) !important;
-  padding-right: var(--digi--global--spacing--largest-5) !important;
-}
-
-.digi--util--plr--70 {
-  padding-left: var(--digi--global--spacing--largest-6) !important;
-  padding-right: var(--digi--global--spacing--largest-6) !important;
-}
-
-.digi--util--plr--80 {
-  padding-left: 4.5rem !important;
-  padding-right: 4.5rem !important;
-}
-
-.digi--util--plr--90 {
-  padding-left: 5rem !important;
-  padding-right: 5rem !important;
-}
-
-.digi--util--sr-only {
-  border: 0;
-  clip: rect(1px, 1px, 1px, 1px);
-  -webkit-clip-path: inset(50%);
-  clip-path: inset(50%);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
-  white-space: nowrap;
-}
-
-.digi--util--hidden {
-  display: none;
-}
-
-/** Do not touch! Autogenerated 
-* @prop --digi--calendar-week-view--button--week--padding: calc(var(--digi--gutter--small) + 1px) var(--digi--gutter--largest-2);
-* @prop --digi--calendar-week-view--button--week--icon--width: var(--digi--gutter--medium);
-* @prop --digi--calendar-week-view--button--week--display: flex;
-* @prop --digi--calendar-week-view--button--week--justify-content: center;
-* @prop --digi--calendar-week-view--button--week--previous-button--border-radius: var(--digi--global--border-radius--base) 0 0 var(--digi--global--border-radius--base);
-* @prop --digi--calendar-week-view--button--week--next-button--border-radius: 0 var(--digi--global--border-radius--base) var(--digi--global--border-radius--base) 0;
-* @prop --digi--calendar-week-view--button--week--width: 9.75rem;
-* @prop --digi--calendar-week-view--button--week--width--small: 7.85rem;
-* @prop --digi--calendar-week-view--button--week--margin: 0.125rem;
-* @prop --digi--calendar-week-view--button--week--font-size: var(--digi--button--font-size--small);
-* @prop --digi--calendar-week-view--button--week--keep-right--margin: 10rem;
-* @prop --digi--calendar-week-view--button--week--keep-right--margin--small: 8.1rem;
-* @prop --digi--calendar-week-view--button--week--background: var(--digi--color--background--primary);
-* @prop --digi--calendar-week-view--button--week--border-color: var(--digi--color--border--secondary);
-* @prop --digi--calendar-week-view--button--date--color: var(--digi--color--text--primary);
-* @prop --digi--calendar-week-view--button--date--color--active: var(--digi--color--text--inverted);
-* @prop --digi--calendar-week-view--button--date--color--no-value: var(--digi--color--text--primary);
-* @prop --digi--calendar-week-view--button--date--background: var(--digi--color--background--primary);
-* @prop --digi--calendar-week-view--button--date--background--active: var(--digi--color--background--complementary-1);
-* @prop --digi--calendar-week-view--button--date--background--no-value: var(--digi--color--background--neutral-6);
-* @prop --digi--calendar-week-view--button--date--border-color: var(--digi--color--border--secondary);
-* @prop --digi--calendar-week-view--button--date--border-color--active: var(--digi--color--border--secondary);
-* @prop --digi--calendar-week-view--button--date--border-color--no-value: var(--digi--color--border--neutral-3);
-* @prop --digi--calendar-week-view--button--date--border-radius: 0;
-* @prop --digi--calendar-week-view--button--date--padding: 16px 10px 25px 10px;
-* @prop --digi--calendar-week-view--button--date--font-size: var(--digi--button--font-size--small);
-* @prop --digi--calendar-week-view--button--date--box-shadow--active: inset 0 0 0 0.1875rem var(--digi--color--background--primary);
-* @prop --digi--calendar-week-view--button--date--width: 3.75rem;
-* @prop --digi--calendar-week-view--button--date--width--small: 3rem;
-* @prop --digi--calendar-week-view--today-circle--size: 0.3125rem;
-* @prop --digi--calendar-week-view--today-circle--background: var(--digi--color--background--complementary-1);
-* @prop --digi--calendar-week-view--today-circle--background--no-value: var(--digi--color--text--primary);
-* @prop --digi--calendar-week-view--today-circle--background--active: var(--digi--color--text--inverted);
-* @prop --digi--calendar-week-view--dates--margin: 0 0 var(--digi--gutter--smaller) 0;
-* @prop --digi--calendar-week-view--dates--gap: var(--digi--gutter--smaller);
-*/
 :host {
   --digi--calendar-week-view--button--week--padding: calc(var(--digi--gutter--small) + 1px) var(--digi--gutter--largest-2);
   --digi--calendar-week-view--button--week--icon--width: var(--digi--gutter--medium);
@@ -305,32 +10,32 @@ License: none (public domain)
   --digi--calendar-week-view--button--week--previous-button--border-radius: var(--digi--global--border-radius--base) 0 0 var(--digi--global--border-radius--base);
   --digi--calendar-week-view--button--week--next-button--border-radius: 0 var(--digi--global--border-radius--base) var(--digi--global--border-radius--base) 0;
   --digi--calendar-week-view--button--week--width: 9.75rem;
-  --digi--calendar-week-view--button--week--width--small: 7.85rem;
   --digi--calendar-week-view--button--week--margin: 0.125rem;
   --digi--calendar-week-view--button--week--font-size: var(--digi--button--font-size--small);
   --digi--calendar-week-view--button--week--keep-right--margin: 10rem;
   --digi--calendar-week-view--button--week--keep-right--margin--small: 8.1rem;
-  --digi--calendar-week-view--button--week--background: var(--digi--color--background--primary);
-  --digi--calendar-week-view--button--week--border-color: var(--digi--color--border--secondary);
-  --digi--calendar-week-view--button--date--color: var(--digi--color--text--primary);
-  --digi--calendar-week-view--button--date--color--active: var(--digi--color--text--inverted);
-  --digi--calendar-week-view--button--date--color--no-value: var(--digi--color--text--primary);
-  --digi--calendar-week-view--button--date--background: var(--digi--color--background--primary);
-  --digi--calendar-week-view--button--date--background--active: var(--digi--color--background--complementary-1);
-  --digi--calendar-week-view--button--date--background--no-value: var(--digi--color--background--neutral-6);
-  --digi--calendar-week-view--button--date--border-color: var(--digi--color--border--secondary);
-  --digi--calendar-week-view--button--date--border-color--active: var(--digi--color--border--secondary);
-  --digi--calendar-week-view--button--date--border-color--no-value: var(--digi--color--border--neutral-3);
+  --digi--calendar-week-view--button--week--background: var(--digi--color--background--interactive--default--secondary);
+  --digi--calendar-week-view--button--week--border-color: var(--digi--color--border--interactive--default--primary);
+  --digi--calendar-week-view--button--date--color: var(--digi--color--text--interactive--tertiary);
+  --digi--calendar-week-view--button--date--color--active: var(--digi--color--text--interactive--secondary);
+  --digi--calendar-week-view--button--date--color--no-value: var(--digi--color--text--interactive--tertiary);
+  --digi--calendar-week-view--button--date--background: var(--digi--color--background--interactive--default--secondary);
+  --digi--calendar-week-view--button--date--background--active: var(--digi--color--background--interactive--selected--primary);
+  --digi--calendar-week-view--button--date--background--no-value: var(--digi--color--background--interactive--default--tertiary);
+  --digi--calendar-week-view--button--date--border-color: var(--digi--color--border--interactive--default--primary);
+  --digi--calendar-week-view--button--date--border-color--active: var(--digi--color--border--interactive--default--primary);
+  --digi--calendar-week-view--button--date--border-color--no-value: var(--digi--color--border--interactive--default--on-input-nuance);
   --digi--calendar-week-view--button--date--border-radius: 0;
   --digi--calendar-week-view--button--date--padding: 16px 10px 25px 10px;
   --digi--calendar-week-view--button--date--font-size: var(--digi--button--font-size--small);
-  --digi--calendar-week-view--button--date--box-shadow--active: inset 0 0 0 0.1875rem var(--digi--color--background--primary);
+  --digi--calendar-week-view--button--date--box-shadow--active: inset 0 0 0 0.1875rem var(--digi--grayscale--0);
   --digi--calendar-week-view--button--date--width: 3.75rem;
   --digi--calendar-week-view--button--date--width--small: 3rem;
   --digi--calendar-week-view--today-circle--size: 0.3125rem;
-  --digi--calendar-week-view--today-circle--background: var(--digi--color--background--complementary-1);
-  --digi--calendar-week-view--today-circle--background--no-value: var(--digi--color--text--primary);
-  --digi--calendar-week-view--today-circle--background--active: var(--digi--color--text--inverted);
+  --digi--calendar-week-view--today-circle--color: var(--digi--color--text--interactive--tertiary);
+  --digi--calendar-week-view--today-circle--fill: var(--digi--color--text--interactive--tertiary);
+  --digi--calendar-week-view--today-circle--fill--no-value: var(--digi--color--text--interactive--tertiary);
+  --digi--calendar-week-view--today-circle--fill--active: var(--digi--color--text--interactive--secondary);
   --digi--calendar-week-view--dates--margin: 0 0 var(--digi--gutter--smaller) 0;
   --digi--calendar-week-view--dates--gap: var(--digi--gutter--smaller);
 }
@@ -342,77 +47,33 @@ License: none (public domain)
 }
 
 .digi-calendar-week-view__week-button {
-  --digi--ui--width--icon: var(
-    --digi--calendar-week-view--button--week--icon--width
-  );
-  --digi--button--padding--medium: var(
-    --digi--calendar-week-view--button--week--padding
-  );
-  --digi--button--display: var(
-    --digi--calendar-week-view--button--week--display
-  );
+  --digi--ui--width--icon: var(--digi--calendar-week-view--button--week--icon--width);
+  --digi--button--padding--medium: var(--digi--calendar-week-view--button--week--padding);
+  --digi--button--display: var(--digi--calendar-week-view--button--week--display);
   --digi--button--width: var(--digi--calendar-week-view--button--week--width);
-  --digi--button--justify-content: var(
-    --digi--calendar-week-view--button--week--justify-content
-  );
-  --digi--button--color--background--secondary--default: var(
-    --digi--calendar-week-view--button--week--background
-  );
-  --digi--button--color--background--secondary--hover: var(
-    --digi--calendar-week-view--button--week--background
-  );
-  --digi--button--color--background--secondary--focus: var(
-    --digi--calendar-week-view--button--week--background
-  );
-  --digi--button--color--background--secondary--active: var(
-    --digi--calendar-week-view--button--week--background
-  );
-  --digi--button--color--border--secondary--hover: var(
-    --digi--calendar-week-view--button--week--border-color
-  );
-  --digi--button--color--border--secondary--focus: var(
-    --digi--calendar-week-view--button--week--border-color
-  );
-  --digi--button--color--border--secondary--active: var(
-    --digi--calendar-week-view--button--week--border-color
-  );
-  --digi--button--font-size--medium: var(
-    --digi--calendar-week-view--button--week--font-size
-  );
+  --digi--button--justify-content: var(--digi--calendar-week-view--button--week--justify-content);
+  --digi--button--color--background--secondary--default: var(--digi--calendar-week-view--button--week--background);
+  --digi--button--color--background--secondary--hover: var(--digi--calendar-week-view--button--week--background);
+  --digi--button--color--background--secondary--focus: var(--digi--calendar-week-view--button--week--background);
+  --digi--button--color--background--secondary--active: var(--digi--calendar-week-view--button--week--background);
+  --digi--button--color--border--secondary--hover: var(--digi--calendar-week-view--button--week--border-color);
+  --digi--button--color--border--secondary--focus: var(--digi--calendar-week-view--button--week--border-color);
+  --digi--button--color--border--secondary--active: var(--digi--calendar-week-view--button--week--border-color);
+  --digi--button--font-size--medium: var(--digi--calendar-week-view--button--week--font-size);
   position: relative;
 }
 .digi-calendar-week-view__week-button--previous {
   margin-right: var(--digi--calendar-week-view--button--week--margin);
-  --digi--button--border-radius--secondary--default: var(
-    --digi--calendar-week-view--button--week--previous-button--border-radius
-  );
-  --digi--button--border-radius--secondary--hover: var(
-    --digi--calendar-week-view--button--week--previous-button--border-radius
-  );
+  --digi--button--border-radius--secondary--default: var(--digi--calendar-week-view--button--week--previous-button--border-radius);
+  --digi--button--border-radius--secondary--hover: var(--digi--calendar-week-view--button--week--previous-button--border-radius);
 }
 .digi-calendar-week-view__week-button--next {
   margin-left: var(--digi--calendar-week-view--button--week--margin);
-  --digi--button--border-radius--secondary--default: var(
-    --digi--calendar-week-view--button--week--next-button--border-radius
-  );
-  --digi--button--border-radius--secondary--hover: var(
-    --digi--calendar-week-view--button--week--next-button--border-radius
-  );
-}
-@media screen and (max-width: 23.375rem) {
-  .digi-calendar-week-view__week-button {
-    --digi--calendar-week-view--button--week--width: var(
-      --digi--calendar-week-view--button--week--width--small
-    );
-    --digi--calendar-week-view--button--week--margin: var(
-      --digi--calendar-week-view--button--week--keep-right--margin--small
-    );
-  }
+  --digi--button--border-radius--secondary--default: var(--digi--calendar-week-view--button--week--next-button--border-radius);
+  --digi--button--border-radius--secondary--hover: var(--digi--calendar-week-view--button--week--next-button--border-radius);
 }
 .digi-calendar-week-view__week-button--keep-left, .digi-calendar-week-view__week-button--keep-right {
-  --digi--calendar-week-view--button--week--margin: var(
-    --digi--calendar-week-view--button--week--keep-right--margin
-  );
+  --digi--calendar-week-view--button--week--margin: var(--digi--calendar-week-view--button--week--keep-right--margin);
 }
 .digi-calendar-week-view__week-button--hidden {
   display: none;
@@ -464,136 +125,52 @@ License: none (public domain)
 
 .digi-calendar-week-view__date-button {
   --digi--button--width: 100%;
-  --digi--button--border-radius--secondary--default: var(
-    --digi--calendar-week-view--button--date--border-radius
-  );
-  --digi--button--border-radius--secondary--hover: var(
-    --digi--calendar-week-view--button--date--border-radius
-  );
-  --digi--button--padding--medium: var(
-    --digi--calendar-week-view--button--date--padding
-  );
-  --digi--button--font-size--medium: var(
-    --digi--calendar-week-view--button--date--font-size
-  );
-  --digi--button--color--text--secondary--default: var(
-    --digi--calendar-week-view--button--date--color
-  );
-  --digi--button--color--text--secondary--hover: var(
-    --digi--calendar-week-view--button--date--color
-  );
-  --digi--button--color--text--secondary--focus: var(
-    --digi--calendar-week-view--button--date--color
-  );
-  --digi--button--color--text--secondary--active: var(
-    --digi--calendar-week-view--button--date--color
-  );
-  --digi--button--color--background--secondary--default: var(
-    --digi--calendar-week-view--button--date--background
-  );
-  --digi--button--color--background--secondary--hover: var(
-    --digi--calendar-week-view--button--date--background
-  );
-  --digi--button--color--background--secondary--focus: var(
-    --digi--calendar-week-view--button--date--background
-  );
-  --digi--button--color--background--secondary--active: var(
-    --digi--calendar-week-view--button--date--background
-  );
-  --digi--button--color--border--secondary--default: var(
-    --digi--calendar-week-view--button--date--border-color
-  );
-  --digi--button--color--border--secondary--hover: var(
-    --digi--calendar-week-view--button--date--border-color
-  );
-  --digi--button--color--border--secondary--focus: var(
-    --digi--calendar-week-view--button--date--border-color
-  );
-  --digi--button--color--border--secondary--active: var(
-    --digi--calendar-week-view--button--date--border-color
-  );
+  --digi--button--border-radius--secondary--default: var(--digi--calendar-week-view--button--date--border-radius);
+  --digi--button--border-radius--secondary--hover: var(--digi--calendar-week-view--button--date--border-radius);
+  --digi--button--padding--medium: var(--digi--calendar-week-view--button--date--padding);
+  --digi--button--font-size--medium: var(--digi--calendar-week-view--button--date--font-size);
+  --digi--button--color--text--secondary--default: var(--digi--calendar-week-view--button--date--color);
+  --digi--button--color--text--secondary--hover: var(--digi--calendar-week-view--button--date--color);
+  --digi--button--color--text--secondary--focus: var(--digi--calendar-week-view--button--date--color);
+  --digi--button--color--text--secondary--active: var(--digi--calendar-week-view--button--date--color);
+  --digi--button--color--background--secondary--default: var(--digi--calendar-week-view--button--date--background);
+  --digi--button--color--background--secondary--hover: var(--digi--calendar-week-view--button--date--background);
+  --digi--button--color--background--secondary--focus: var(--digi--calendar-week-view--button--date--background);
+  --digi--button--color--background--secondary--active: var(--digi--calendar-week-view--button--date--background);
+  --digi--button--color--border--secondary--default: var(--digi--calendar-week-view--button--date--border-color);
+  --digi--button--color--border--secondary--hover: var(--digi--calendar-week-view--button--date--border-color);
+  --digi--button--color--border--secondary--focus: var(--digi--calendar-week-view--button--date--border-color);
+  --digi--button--color--border--secondary--active: var(--digi--calendar-week-view--button--date--border-color);
 }
 .digi-calendar-week-view__date-button--no-value {
-  --digi--button--color--text--secondary--default: var(
-    --digi--calendar-week-view--button--date--color--no-value
-  );
-  --digi--button--color--text--secondary--hover: var(
-    --digi--calendar-week-view--button--date--color--no-value
-  );
-  --digi--button--color--text--secondary--focus: var(
-    --digi--calendar-week-view--button--date--color--no-value
-  );
-  --digi--button--color--text--secondary--active: var(
-    --digi--calendar-week-view--button--date--color--no-value
-  );
-  --digi--button--color--background--secondary--default: var(
-    --digi--calendar-week-view--button--date--background--no-value
-  );
-  --digi--button--color--background--secondary--hover: var(
-    --digi--calendar-week-view--button--date--background--no-value
-  );
-  --digi--button--color--background--secondary--focus: var(
-    --digi--calendar-week-view--button--date--background--no-value
-  );
-  --digi--button--color--background--secondary--active: var(
-    --digi--calendar-week-view--button--date--background--no-value
-  );
-  --digi--button--color--border--secondary--default: var(
-    --digi--calendar-week-view--button--date--border-color--no-value
-  );
-  --digi--button--color--border--secondary--hover: var(
-    --digi--calendar-week-view--button--date--border-color--no-value
-  );
-  --digi--button--color--border--secondary--focus: var(
-    --digi--calendar-week-view--button--date--border-color--no-value
-  );
-  --digi--button--color--border--secondary--active: var(
-    --digi--calendar-week-view--button--date--border-color--no-value
-  );
-  --digi--calendar-week-view--today-circle--background: var(
-    --digi--calendar-week-view--today-circle--background--no-value
-  );
+  --digi--button--color--text--secondary--default: var(--digi--calendar-week-view--button--date--color--no-value);
+  --digi--button--color--text--secondary--hover: var(--digi--calendar-week-view--button--date--color--no-value);
+  --digi--button--color--text--secondary--focus: var(--digi--calendar-week-view--button--date--color--no-value);
+  --digi--button--color--text--secondary--active: var(--digi--calendar-week-view--button--date--color--no-value);
+  --digi--button--color--background--secondary--default: var(--digi--calendar-week-view--button--date--background--no-value);
+  --digi--button--color--background--secondary--hover: var(--digi--calendar-week-view--button--date--background--no-value);
+  --digi--button--color--background--secondary--focus: var(--digi--calendar-week-view--button--date--background--no-value);
+  --digi--button--color--background--secondary--active: var(--digi--calendar-week-view--button--date--background--no-value);
+  --digi--button--color--border--secondary--default: var(--digi--calendar-week-view--button--date--border-color--no-value);
+  --digi--button--color--border--secondary--hover: var(--digi--calendar-week-view--button--date--border-color--no-value);
+  --digi--button--color--border--secondary--focus: var(--digi--calendar-week-view--button--date--border-color--no-value);
+  --digi--button--color--border--secondary--active: var(--digi--calendar-week-view--button--date--border-color--no-value);
+  --digi--calendar-week-view--today-circle--fill: var(--digi--calendar-week-view--today-circle--fill--no-value);
 }
 .digi-calendar-week-view__date-button--active {
-  --digi--button--color--text--secondary--default: var(
-    --digi--calendar-week-view--button--date--color--active
-  );
-  --digi--button--color--text--secondary--hover: var(
-    --digi--calendar-week-view--button--date--color--active
-  );
-  --digi--button--color--text--secondary--focus: var(
-    --digi--calendar-week-view--button--date--color--active
-  );
-  --digi--button--color--text--secondary--active: var(
-    --digi--calendar-week-view--button--date--color--active
-  );
-  --digi--button--color--background--secondary--default: var(
-    --digi--calendar-week-view--button--date--background--active
-  );
-  --digi--button--color--background--secondary--hover: var(
-    --digi--calendar-week-view--button--date--background--active
-  );
-  --digi--button--color--background--secondary--focus: var(
-    --digi--calendar-week-view--button--date--background--active
-  );
-  --digi--button--color--background--secondary--active: var(
-    --digi--calendar-week-view--button--date--background--active
-  );
-  --digi--button--color--border--secondary--default: var(
-    --digi--calendar-week-view--button--date--border-color--active
-  );
-  --digi--button--color--border--secondary--hover: var(
-    --digi--calendar-week-view--button--date--border-color--active
-  );
-  --digi--button--color--border--secondary--focus: var(
-    --digi--calendar-week-view--button--date--border-color--active
-  );
-  --digi--button--color--border--secondary--active: var(
-    --digi--calendar-week-view--button--date--border-color--active
-  );
-  --digi--calendar-week-view--today-circle--background: var(
-    --digi--calendar-week-view--today-circle--background--active
-  );
+  --digi--button--color--text--secondary--default: var(--digi--calendar-week-view--button--date--color--active);
+  --digi--button--color--text--secondary--hover: var(--digi--calendar-week-view--button--date--color--active);
+  --digi--button--color--text--secondary--focus: var(--digi--calendar-week-view--button--date--color--active);
+  --digi--button--color--text--secondary--active: var(--digi--calendar-week-view--button--date--color--active);
+  --digi--button--color--background--secondary--default: var(--digi--calendar-week-view--button--date--background--active);
+  --digi--button--color--background--secondary--hover: var(--digi--calendar-week-view--button--date--background--active);
+  --digi--button--color--background--secondary--focus: var(--digi--calendar-week-view--button--date--background--active);
+  --digi--button--color--background--secondary--active: var(--digi--calendar-week-view--button--date--background--active);
+  --digi--button--color--border--secondary--default: var(--digi--calendar-week-view--button--date--border-color--active);
+  --digi--button--color--border--secondary--hover: var(--digi--calendar-week-view--button--date--border-color--active);
+  --digi--button--color--border--secondary--focus: var(--digi--calendar-week-view--button--date--border-color--active);
+  --digi--button--color--border--secondary--active: var(--digi--calendar-week-view--button--date--border-color--active);
+  --digi--calendar-week-view--today-circle--fill: var(--digi--calendar-week-view--today-circle--fill--active);
 }
 .digi-calendar-week-view__date-button-content {
   display: flex;
@@ -607,7 +184,7 @@ License: none (public domain)
   position: absolute;
   height: var(--digi--calendar-week-view--today-circle--size);
   width: var(--digi--calendar-week-view--today-circle--size);
-  background: var(--digi--calendar-week-view--today-circle--background);
+  background: var(--digi--calendar-week-view--today-circle--fill);
   bottom: 0.875rem;
   left: 50%;
   transform: translateX(-50%);
@@ -648,7 +225,7 @@ License: none (public domain)
   height: 2px;
   top: 29px;
   background-color: #00005a;
-  left: 57px;
+  left: 50px;
 }
 
 ::slotted(* .digi-calendar-week-view__week-button--next .digi-button):hover::after, ::slotted(* .digi-calendar-week-view__week-button--next .digi-button):focus::after {
@@ -658,5 +235,5 @@ License: none (public domain)
   height: 2px;
   top: 29px;
   background-color: #00005a;
-  left: 38px;
+  left: 20px;
 }

package/dist/collection/components/_calendar/week-view/calendar-week-view.js

@@ -130,15 +130,15 @@ export class CalendarWeekView {
                 } }, day), h("span", { class: "digi-calendar-week-view__date-button-date" }, date), h("span", { "aria-hidden": "true", class: {
                     'digi-calendar-week-view__date-button-circle': dateItem === this.todaysDate
                 } })))));
-        })))), h("digi-button", { key: '43959210674014e4b04ed2cbc9e70732ee6846e5', onClick: () => this.prevWeek(), class: {
+        })))), h("digi-button", { key: '2edb685459c4cbf8a0120ab340672b17d0ea3f9f', onClick: () => this.prevWeek(), class: {
                 'digi-calendar-week-view__week-button digi-calendar-week-view__week-button--previous': true,
                 'digi-calendar-week-view__week-button--keep-left': this.currentWeek == getISOWeek(this.maxDate),
                 'digi-calendar-week-view__week-button--hidden': !(this.currentWeek > getISOWeek(this.minDate))
-            }, "af-variation": "secondary" }, h("digi-icon-chevron-left", { key: 'ea1b1dcf135bb712683cd3fdc7bf547213753010', slot: "icon" }), this.prevWeekText), h("digi-button", { key: 'fae29a610a67d1c14cab55f072deacaf4624eb7b', onClick: () => this.nextWeek(), class: {
+            }, "af-variation": "secondary" }, h("digi-icon-chevron-left", { key: '8948b12a1654f9ef46728ea8de3b1df5f40addcd', slot: "icon" }), this.prevWeekText), h("digi-button", { key: '729ed8eebce68168b66c5365588a52b1279eec3f', onClick: () => this.nextWeek(), class: {
                 'digi-calendar-week-view__week-button digi-calendar-week-view__week-button--next': true,
                 'digi-calendar-week-view__week-button--keep-right': this.currentWeek == getISOWeek(this.minDate),
                 'digi-calendar-week-view__week-button--hidden': !(this.currentWeek < getISOWeek(this.maxDate))
-            }, "af-variation": "secondary" }, h("digi-icon-chevron-right", { key: 'b046daeb46e936e3df4a11c2d91a191d64d1da7e', slot: "icon-secondary" }), this.nextWeekText)), h("div", { key: 'be9ad09c6513830530d5ec8c8f748d16671c9a53', role: "status", "aria-live": "assertive", class: "digi-calendar-week-view__result", id: `${this.afId}-result` }, h("digi-typography", { key: '63520e0dafe2667eff3bc13dcd870022fd922a66' }, h("slot", { key: '90fc838123b2d492207c804405d9a7d3cc2f60e2' })))));
+            }, "af-variation": "secondary" }, h("digi-icon-chevron-right", { key: '75bf1669a5d9dd3f618661c79202dc8e69f6c8ea', slot: "icon-secondary" }), this.nextWeekText)), h("div", { key: 'c7379a321936f28783d2f7a4e1e94d0b119de471', role: "status", "aria-live": "assertive", class: "digi-calendar-week-view__result", id: `${this.afId}-result` }, h("digi-typography", { key: 'f7e55435a94c5bff18a3b4b7bfa5d397291f7e8c' }, h("slot", { key: '7c59e144a47c721f5f4a454b9776c708f6d2f15c' })))));
     }
     static get is() { return "digi-calendar-week-view"; }
     static get encapsulation() { return "scoped"; }