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

package/dist/collection/components/_form/form-checkbox/form-checkbox.css

@@ -1,310 +1,755 @@
-/** Do not touch! Autogenerated 
-* @prop --digi--form-checkbox--border-color: var(--digi--color--border--primary);
-* @prop --digi--form-checkbox--border-color--primary: var(--digi--color--border--checkbox-primary);
-* @prop --digi--form-checkbox--border-color--secondary: var(--digi--color--border--checkbox-secondary);
-* @prop --digi--form-checkbox--border-color--error: var(--digi--color--border--danger);
-* @prop --digi--form-checkbox--border-color--warning: var(--digi--color--border--warning-2);
-* @prop --digi--form-checkbox--box-shadow--error: var(--digi--color--border--danger);
-* @prop --digi--form-checkbox--box-shadow--warning: var(--digi--color--border--warning-2);
-* @prop --digi--form-checkbox--background-color: var(--digi--color--background--primary);
-* @prop --digi--form-checkbox--background-color--primary: var(--digi--color--background--checkbox-primary);
-* @prop --digi--form-checkbox--background-color--secondary: var(--digi--color--background--checkbox-secondary);
-* @prop --digi--form-checkbox--background-color--error: var(--digi--color--background--danger-2);
-* @prop --digi--form-checkbox--background-color--warning: var(--digi--color--background--warning-3);
-* @prop --digi--form-checkbox--label--background-color--hover: var(--digi--color--background--input-empty);
-* @prop --digi--form-checkbox--input--focus--shadow: var(--digi--shadow--input-focus);
-* @prop --digi--form-checkbox--border-width: var(--digi--border-width--primary);
-* @prop --digi--form-checkbox--color--marker: var(--digi--color--background--checkbox-marker);
-* @prop --digi--form-checkbox--size: 1.25rem;
-* @prop --digi--form-checkbox--height: var(--digi--input-height--large);
-* @prop --digi--form-checkbox--border-radius: var(--digi--border-radius--tertiary);
-* @prop --digi--form-checkbox--padding--block: var(--digi--gutter--small);
-* @prop --digi--form-checkbox--padding--inline: var(--digi--gutter--icon);
-*/
-/* Calculations with sin() isn't supported in many browsers yet, but this is how you calculate the invisible-height with sin()
- * $lower-triangle-height: calc(sin($check-rotation) * $check-width);
- * $border-height: calc(sin($check-rotation) * $check-border-width);
- * $invisible-height: calc($lower-triangle-height - $border-height);
- */
 /* http://meyerweb.com/eric/tools/css/reset/
 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;
+:root {
+  --digi--grayscale--0: #ffffff;
+  --digi--grayscale--50: #fbfbfb;
+  --digi--grayscale--100: #f4f4f4;
+  --digi--grayscale--200: #ededed;
+  --digi--grayscale--300: #e4e4e4;
+  --digi--grayscale--400: #dddddd;
+  --digi--grayscale--500: #cacaca;
+  --digi--grayscale--600: #acacac;
+  --digi--grayscale--700: #757575;
+  --digi--grayscale--800: #5c5c5c;
+  --digi--grayscale--900: #333333;
+  --digi--grayscale--1000: #000000;
+  --digi--sentiment--informative--200: #e9e9ff;
+  --digi--sentiment--informative--500: #0000ff;
+  --digi--sentiment--informative--700: #0058a3;
+  --digi--sentiment--error--200: #fdeded;
+  --digi--sentiment--error--500: #da0000;
+  --digi--sentiment--error--700: #c7311a;
+  --digi--sentiment--success--200: #e9f6ec;
+  --digi--sentiment--success--500: #009322;
+  --digi--sentiment--success--700: #02703c;
+  --digi--sentiment--warning--200: #fff398;
+  --digi--sentiment--warning--50: #fffbdd;
+  --digi--sentiment--warning--500: #ffe200;
+  --digi--sentiment--warning--700: #ffc108;
+  --digi--sentiment--warning--900: #664d00;
+  --digi--misc--transparent: #ffffff00;
+  --digi--animation--duration--base: var(--digi--global--animation--duration--base);
+  --digi--animation--duration--small: var(--digi--global--animation--duration--short);
+  --digi--animation--duration--large: var(--digi--global--animation--duration--longer);
+  --digi--animation--duration--reduced: var(--digi--global--animation--duration--shortest);
+  --digi--animation--duration--sweep: var(--digi--global--animation--duration--longest);
+  --digi--animation--rotation--45: var(--digi--global--animation--rotation--smallest-2);
+  --digi--animation--rotation--90: var(--digi--global--animation--rotation--smallest);
+  --digi--animation--rotation--135: var(--digi--global--animation--rotation--smaller);
+  --digi--animation--rotation--180: var(--digi--global--animation--rotation--small);
+  --digi--animation--rotation--225: var(--digi--global--animation--rotation--base);
+  --digi--animation--rotation--270: var(--digi--global--animation--rotation--large);
+  --digi--animation--rotation--315: var(--digi--global--animation--rotation--larger);
+  --digi--animation--rotation--360: var(--digi--global--animation--rotation--largest);
+  --digi--global--animation--duration--base: .3s;
+  --digi--global--animation--duration--short: .2s;
+  --digi--global--animation--duration--shorter: .1s;
+  --digi--global--animation--duration--shortest: .01s;
+  --digi--global--animation--duration--long: .4s;
+  --digi--global--animation--duration--longer: .5s;
+  --digi--global--animation--duration--longest: 4s;
+  --digi--global--animation--rotation--smallest-2: 0deg;
+  --digi--global--animation--rotation--smallest: 45deg;
+  --digi--global--animation--rotation--smaller: 90deg;
+  --digi--global--animation--rotation--small: 135deg;
+  --digi--global--animation--rotation--base: 180deg;
+  --digi--global--animation--rotation--large: 225deg;
+  --digi--global--animation--rotation--larger: 270deg;
+  --digi--global--animation--rotation--largest: 315deg;
+  --digi--global--animation--rotation--largest-2: 360deg;
+  --digi--global--border-radius--base: 6px;
+  --digi--global--border-radius--small: 4px;
+  --digi--global--border-radius--smaller: 3px;
+  --digi--global--border-radius--smallest: 2px;
+  --digi--global--border-radius--smallest-2: 1px;
+  --digi--global--border-radius--smallest-3: 0px;
+  --digi--global--border-radius--large: 8px;
+  --digi--global--border-radius--larger: 16px;
+  --digi--global--border-radius--largest: 32px;
+  --digi--global--border-radius--largest-2: 64px;
+  --digi--global--border-width--base: 2px;
+  --digi--global--border-width--small: 1px;
+  --digi--global--border-width--smaller: 0px;
+  --digi--global--border-width--large: 4px;
+  --digi--global--border-width--larger: 6px;
+  --digi--global--border-width--largest: 8px;
+  --digi--global--border-width--largest-2: 10px;
+  --digi--global--border-style--solid: solid;
+  --digi--global--border-style--none: none;
+  --digi--global--border-style--dashed: dashed;
+  --digi--global--spacing--base: 16px;
+  --digi--global--spacing--small: 14px;
+  --digi--global--spacing--smaller: 12px;
+  --digi--global--spacing--smallest: 10px;
+  --digi--global--spacing--smallest-2: 8px;
+  --digi--global--spacing--smallest-3: 6px;
+  --digi--global--spacing--smallest-4: 4px;
+  --digi--global--spacing--smallest-5: 3px;
+  --digi--global--spacing--smallest-6: 2px;
+  --digi--global--spacing--smallest-7: 1px;
+  --digi--global--spacing--large: 18px;
+  --digi--global--spacing--larger: 20px;
+  --digi--global--spacing---: 22px;
+  --digi--global--spacing--largest-2: 24px;
+  --digi--global--spacing--largest-3: 28px;
+  --digi--global--spacing--largest-4: 32px;
+  --digi--global--spacing--largest-5: 40px;
+  --digi--global--spacing--largest-6: 48px;
+  --digi--global--spacing--largest-7: 56px;
+  --digi--global--spacing--largest-8: 64px;
+  --digi--global--spacing--largest: 22px;
+  --digi--global--spacing--largest-3-5: 30px;
+  --digi--global--spacing--largest-9: 72px;
+  --digi--global--spacing--largest-10: 80px;
+  --digi--global--breakpoint--smallest-3: 374px;
+  --digi--global--breakpoint--smallest-2: 375px;
+  --digi--global--breakpoint--smallest: 575px;
+  --digi--global--breakpoint--smaller: 576px;
+  --digi--global--breakpoint--small: 767px;
+  --digi--global--breakpoint--medium: 768px;
+  --digi--global--breakpoint--large: 991px;
+  --digi--global--breakpoint--larger: 992px;
+  --digi--global--breakpoint--largest: 1199px;
+  --digi--global--breakpoint--largest-2: 1200px;
+  --digi--global--breakpoint--largest-3: 1399px;
+  --digi--global--breakpoint--largest-4: 1400px;
+  --digi--global--size--smaller: auto;
+  --digi--global--size--small: 36rem;
+  --digi--global--size--base: 48rem;
+  --digi--global--size--large: 62rem;
+  --digi--global--size--larger: 75rem;
+  --digi--global--size--largest: 87.5rem;
+  --digi--global--text-width--small: 31rem;
+  --digi--global--text-width--base: 35rem;
+  --digi--global--text-width--large: 40rem;
+  --digi--global--text-width--larger: 44rem;
+  --digi--global--text-width--largest: 48rem;
+  --digi--global--text-width--largest-2: 53rem;
+  --digi--global--text-width--largest-3: 61rem;
+  --digi--global--text-width--largest-4: 70rem;
+  --digi--global--typography--line-height--base: 1.5;
+  --digi--global--typography--line-height--small: 1;
+  --digi--global--typography--line-height--large: 2;
+  --digi--global--typography--font-size--base: 1rem;
+  --digi--global--typography--font-size--small: 0.875rem;
+  --digi--global--typography--font-size--smaller: 0.75rem;
+  --digi--global--typography--font-size--large: 1.125rem;
+  --digi--global--typography--font-size--larger: 1.25rem;
+  --digi--global--typography--font-size--largest: 1.375rem;
+  --digi--global--typography--font-size--largest-2: 1.5rem;
+  --digi--global--typography--font-size--largest-3: 1.75rem;
+  --digi--global--typography--font-size--largest-4: 2rem;
+  --digi--global--typography--font-size--largest-5: 2.25rem;
+  --digi--global--typography--font-size--interaction-small: 0.875rem;
+  --digi--global--typography--font-size--interaction-medium: 1rem;
+  --digi--global--typography--font-size--interaction-large: 1.125rem;
+  --digi--global--typography--font-size--largest-6: 2.5rem;
+  --digi--global--typography--font-weight--regular: 400;
+  --digi--global--typography--font-weight--light: 300;
+  --digi--global--typography--font-weight--semibold: 600;
+  --digi--global--typography--font-weight--bold: 700;
+  --digi--global--typography--font-family--default: "Open Sans";
+  --digi--global--typography--font-family--mono: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
+  --digi--global--typography--text-decoration--default: none;
+  --digi--global--typography--text-decoration--link: underline;
+  --digi--border-radius--primary: var(--digi--global--border-radius--smallest-3);
+  --digi--border-radius--secondary: var(--digi--global--border-radius--base);
+  --digi--border-radius--tertiary: var(--digi--global--border-radius--smaller);
+  --digi--border-radius--complementary-1: var(--digi--global--border-radius--largest);
+  --digi--border-radius--complementary-2: var(--digi--global--border-radius--largest-2);
+  --digi--border-radius--button: var(--digi--global--border-radius--base);
+  --digi--border-radius--input: var(--digi--global--border-radius--smallest-3);
+  --digi--border-radius--input-search: var(--digi--global--border-radius--base);
+  --digi--border-radius--complementary-3: var(--digi--global--border-radius--larger);
+  --digi--border-width--primary: var(--digi--global--border-width--small);
+  --digi--border-width--secondary: var(--digi--global--border-width--base);
+  --digi--border-width--complementary-1: var(--digi--global--border-width--largest);
+  --digi--border-width--complementary-2: var(--digi--global--border-width--largest-2);
+  --digi--border-width--input-regular: var(--digi--global--border-width--small);
+  --digi--border-width--input-validation: var(--digi--global--border-width--base);
+  --digi--border-width--button: var(--digi--global--border-width--small);
+  --digi--border-style--primary: var(--digi--global--border-style--solid);
+  --digi--border-style--secondary: var(--digi--global--border-style--none);
+  --digi--padding--medium: var(--digi--global--spacing--base);
+  --digi--padding--smaller: var(--digi--global--spacing--smallest-2);
+  --digi--padding--small: var(--digi--global--spacing--smaller);
+  --digi--padding--large: var(--digi--global--spacing--largest-2);
+  --digi--padding--larger: var(--digi--global--spacing--largest-3);
+  --digi--padding--largest: var(--digi--global--spacing--largest-4);
+  --digi--padding--largest-2: var(--digi--global--spacing--largest-5);
+  --digi--padding--largest-3: var(--digi--global--spacing--largest-6);
+  --digi--margin--smaller: var(--digi--global--spacing--smallest-2);
+  --digi--margin--small: var(--digi--global--spacing--smallest);
+  --digi--margin--medium: var(--digi--global--spacing--base);
+  --digi--margin--large: var(--digi--global--spacing--largest-2);
+  --digi--margin--larger: var(--digi--global--spacing--largest-3);
+  --digi--margin--largest: var(--digi--global--spacing--largest-4);
+  --digi--margin--h1-small: var(--digi--global--spacing--base);
+  --digi--margin--h1-medium: var(--digi--global--spacing--largest-2);
+  --digi--margin--h1-large: var(--digi--global--spacing--largest-4);
+  --digi--margin--h2-small: var(--digi--global--spacing--base);
+  --digi--margin--h2-large: var(--digi--global--spacing--base);
+  --digi--margin--h3-small: var(--digi--global--spacing--smallest-2);
+  --digi--margin--h3-large: var(--digi--global--spacing--smallest-2);
+  --digi--margin--h4-h6-small: var(--digi--global--spacing--smallest-2);
+  --digi--margin--h4-h6-large: var(--digi--global--spacing--smallest-2);
+  --digi--margin--text-small: var(--digi--global--spacing--largest-2);
+  --digi--margin--text-large: var(--digi--global--spacing--largest-2);
+  --digi--gutter--largest-3: var(--digi--global--spacing--largest-2);
+  --digi--gutter--largest-2: var(--digi--global--spacing--larger);
+  --digi--gutter--largest: var(--digi--global--spacing--base);
+  --digi--gutter--larger: var(--digi--global--spacing--smaller);
+  --digi--gutter--large: var(--digi--global--spacing--smallest);
+  --digi--gutter--medium: var(--digi--global--spacing--smallest-2);
+  --digi--gutter--small: var(--digi--global--spacing--smallest-3);
+  --digi--gutter--smaller: var(--digi--global--spacing--smallest-4);
+  --digi--gutter--smallest: var(--digi--global--spacing--smallest-5);
+  --digi--gutter--smallest-2: var(--digi--global--spacing--smallest-6);
+  --digi--gutter--smallest-3: var(--digi--global--spacing--smallest-7);
+  --digi--gutter--button-block-small: var(--digi--global--spacing--smallest-3);
+  --digi--gutter--button-block-medium: var(--digi--global--spacing--smallest-2);
+  --digi--gutter--button-block-large: var(--digi--global--spacing--smallest);
+  --digi--gutter--button-inline-small: var(--digi--global--spacing--smallest-2);
+  --digi--gutter--button-inline-medium: var(--digi--global--spacing--base);
+  --digi--gutter--button-inline-large: var(--digi--global--spacing--largest-2);
+  --digi--gutter--icon: var(--digi--global--spacing--smallest);
+  --digi--breakpoint--small-below: var(--digi--global--breakpoint--smallest);
+  --digi--breakpoint--small: var(--digi--global--breakpoint--smaller);
+  --digi--breakpoint--medium-below: var(--digi--global--breakpoint--small);
+  --digi--breakpoint--medium: var(--digi--global--breakpoint--medium);
+  --digi--breakpoint--large-below: var(--digi--global--breakpoint--large);
+  --digi--breakpoint--large: var(--digi--global--breakpoint--larger);
+  --digi--breakpoint--x-large-below: var(--digi--global--breakpoint--largest);
+  --digi--breakpoint--x-large: var(--digi--global--breakpoint--largest-2);
+  --digi--breakpoint--xx-large-below: var(--digi--global--breakpoint--largest-3);
+  --digi--breakpoint--xx-large: var(--digi--global--breakpoint--largest-4);
+  --digi--container-width--smaller: var(--digi--global--size--smaller);
+  --digi--container-width--small: var(--digi--global--size--small);
+  --digi--container-width--base: var(--digi--global--size--base);
+  --digi--container-width--medium: var(--digi--global--size--base);
+  --digi--container-width--large: var(--digi--global--size--large);
+  --digi--container-width--larger: var(--digi--global--size--larger);
+  --digi--container-width--largest: var(--digi--global--size--largest);
+  --digi--container-gutter--smaller: var(--digi--global--spacing--base);
+  --digi--container-gutter--small: var(--digi--global--spacing--large);
+  --digi--container-gutter--base: var(--digi--global--spacing--base);
+  --digi--container-gutter--medium: var(--digi--global--spacing--largest-2);
+  --digi--container-gutter--large: var(--digi--global--spacing--base);
+  --digi--container-gutter--larger: var(--digi--global--spacing--largest-3-5);
+  --digi--container-gutter--largest: var(--digi--global--spacing--largest-5);
+  --digi--paragraph-width--medium: var(--digi--global--text-width--base);
+  --digi--paragraph-width--large: var(--digi--global--text-width--large);
+  --digi--input-height--small: var(--digi--global--spacing--largest-4);
+  --digi--input-height--medium: var(--digi--global--spacing--largest-5);
+  --digi--input-height--large: var(--digi--global--spacing--largest-6);
+  --digi--typography--body--font-size--desktop: var(--digi--global--typography--font-size--base);
+  --digi--typography--body--font-size--desktop-large: var(--digi--global--typography--font-size--large);
+  --digi--typography--body--font-size--mobile: var(--digi--global--typography--font-size--base);
+  --digi--typography--body--font-weight--desktop: var(--digi--global--typography--font-weight--regular);
+  --digi--typography--body--font-weight--desktop-large: var(--digi--global--typography--font-weight--regular);
+  --digi--typography--body--font-weight--mobile: var(--digi--global--typography--font-weight--regular);
+  --digi--typography--body--line-height--desktop: var(--digi--global--typography--line-height--base);
+  --digi--typography--body--line-height--desktop-large: var(--digi--global--typography--line-height--base);
+  --digi--typography--body--line-height--mobile: var(--digi--global--typography--line-height--base);
+  --digi--typography--body--text-decoration--desktop: var(--digi--global--typography--text-decoration--default);
+  --digi--typography--body--text-decoration--desktop-large: var(--digi--global--typography--text-decoration--default);
+  --digi--typography--body--text-decoration--mobile: var(--digi--global--typography--text-decoration--default);
+  --digi--typography--description--font-size--desktop: var(--digi--global--typography--font-size--base);
+  --digi--typography--description--font-size--desktop-large: var(--digi--global--typography--font-size--large);
+  --digi--typography--description--font-weight--desktop: var(--digi--global--typography--font-weight--semibold);
+  --digi--typography--heading-1--font-size--desktop: var(--digi--global--typography--font-size--largest-4);
+  --digi--typography--heading-1--font-size--desktop-large: var(--digi--global--typography--font-size--largest-6);
+  --digi--typography--heading-1--font-size--mobile: var(--digi--global--typography--font-size--largest-3);
+  --digi--typography--heading-1--font-weight--desktop: var(--digi--global--typography--font-weight--semibold);
+  --digi--typography--heading-1--font-weight--desktop-large: var(--digi--global--typography--font-weight--semibold);
+  --digi--typography--heading-1--font-weight--mobile: var(--digi--global--typography--font-weight--semibold);
+  --digi--typography--heading-1--line-height--desktop: var(--digi--global--typography--line-height--base);
+  --digi--typography--heading-1--line-height--desktop-large: var(--digi--global--typography--line-height--base);
+  --digi--typography--heading-1--line-height--mobile: var(--digi--global--typography--line-height--base);
+  --digi--typography--heading-1--text-decoration--desktop: var(--digi--global--typography--text-decoration--default);
+  --digi--typography--heading-1--text-decoration--desktop-large: var(--digi--global--typography--text-decoration--default);
+  --digi--typography--heading-1--text-decoration--mobile: var(--digi--global--typography--text-decoration--default);
+  --digi--typography--heading-2--font-size--desktop: var(--digi--global--typography--font-size--largest-2);
+  --digi--typography--heading-2--font-size--desktop-large: var(--digi--global--typography--font-size--largest-3);
+  --digi--typography--heading-2--font-size--mobile: var(--digi--global--typography--font-size--largest);
+  --digi--typography--heading-2--font-weight--desktop: var(--digi--global--typography--font-weight--semibold);
+  --digi--typography--heading-2--font-weight--desktop-large: var(--digi--global--typography--font-weight--semibold);
+  --digi--typography--heading-2--font-weight--mobile: var(--digi--global--typography--font-weight--semibold);
+  --digi--typography--heading-2--line-height--desktop: var(--digi--global--typography--line-height--base);
+  --digi--typography--heading-2--line-height--desktop-large: var(--digi--global--typography--line-height--base);
+  --digi--typography--heading-2--line-height--mobile: var(--digi--global--typography--line-height--base);
+  --digi--typography--heading-2--text-decoration--desktop: var(--digi--global--typography--text-decoration--default);
+  --digi--typography--heading-2--text-decoration--desktop-large: var(--digi--global--typography--text-decoration--default);
+  --digi--typography--heading-2--text-decoration--mobile: var(--digi--global--typography--text-decoration--default);
+  --digi--typography--heading-3--font-size--desktop: var(--digi--global--typography--font-size--larger);
+  --digi--typography--heading-3--font-size--desktop-large: var(--digi--global--typography--font-size--largest);
+  --digi--typography--heading-3--font-size--mobile: var(--digi--global--typography--font-size--large);
+  --digi--typography--heading-3--font-weight--desktop: var(--digi--global--typography--font-weight--semibold);
+  --digi--typography--heading-3--font-weight--desktop-large: var(--digi--global--typography--font-weight--semibold);
+  --digi--typography--heading-3--font-weight--mobile: var(--digi--global--typography--font-weight--semibold);
+  --digi--typography--heading-3--line-height--desktop: var(--digi--global--typography--line-height--base);
+  --digi--typography--heading-3--line-height--desktop-large: var(--digi--global--typography--line-height--base);
+  --digi--typography--heading-3--line-height--mobile: var(--digi--global--typography--line-height--base);
+  --digi--typography--heading-3--text-decoration--desktop: var(--digi--global--typography--text-decoration--default);
+  --digi--typography--heading-3--text-decoration--desktop-large: var(--digi--global--typography--text-decoration--default);
+  --digi--typography--heading-3--text-decoration--mobile: var(--digi--global--typography--text-decoration--default);
+  --digi--typography--heading-4--font-size--desktop: var(--digi--global--typography--font-size--base);
+  --digi--typography--heading-4--font-size--desktop-large: var(--digi--global--typography--font-size--large);
+  --digi--typography--heading-4--font-size--mobile: var(--digi--global--typography--font-size--base);
+  --digi--typography--heading-4--font-weight--desktop: var(--digi--global--typography--font-weight--semibold);
+  --digi--typography--heading-4--font-weight--desktop-large: var(--digi--global--typography--font-weight--semibold);
+  --digi--typography--heading-4--font-weight--mobile: var(--digi--global--typography--font-weight--semibold);
+  --digi--typography--heading-4--line-height--desktop: var(--digi--global--typography--line-height--base);
+  --digi--typography--heading-4--line-height--desktop-large: var(--digi--global--typography--line-height--base);
+  --digi--typography--heading-4--line-height--mobile: var(--digi--global--typography--line-height--base);
+  --digi--typography--heading-4--text-decoration--desktop: var(--digi--global--typography--text-decoration--default);
+  --digi--typography--heading-4--text-decoration--desktop-large: var(--digi--global--typography--text-decoration--default);
+  --digi--typography--heading-4--text-decoration--mobile: var(--digi--global--typography--text-decoration--default);
+  --digi--typography--heading-jumbo--font-size--desktop: var(--digi--global--typography--font-size--largest-4);
+  --digi--typography--heading-jumbo--font-size--desktop-large: var(--digi--global--typography--font-size--largest-6);
+  --digi--typography--heading-jumbo--font-weight--desktop: var(--digi--global--typography--font-weight--semibold);
+  --digi--typography--input--font-size--desktop-large: var(--digi--global--typography--font-size--large);
+  --digi--typography--label--font-size--desktop: var(--digi--global--typography--font-size--base);
+  --digi--typography--label--font-weight--desktop: var(--digi--global--typography--font-weight--semibold);
+  --digi--typography--label--font-weight--mobile: var(--digi--global--typography--font-weight--semibold);
+  --digi--typography--label--line-height--desktop: var(--digi--global--typography--line-height--base);
+  --digi--typography--label-description--font-size--desktop: var(--digi--global--typography--font-size--base);
+  --digi--typography--label-description--line-height--desktop: var(--digi--global--typography--line-height--base);
+  --digi--typography--link--font-size--desktop: var(--digi--global--typography--font-size--base);
+  --digi--typography--link--font-size--desktop-large: var(--digi--global--typography--font-size--large);
+  --digi--typography--link--font-size--mobile: var(--digi--global--typography--font-size--base);
+  --digi--typography--link--font-weight--desktop: var(--digi--global--typography--font-weight--regular);
+  --digi--typography--link--font-weight--desktop-large: var(--digi--global--typography--font-weight--regular);
+  --digi--typography--link--font-weight--mobile: var(--digi--global--typography--font-weight--regular);
+  --digi--typography--link--line-height--desktop: var(--digi--global--typography--line-height--base);
+  --digi--typography--link--line-height--desktop-large: var(--digi--global--typography--line-height--base);
+  --digi--typography--link--line-height--mobile: var(--digi--global--typography--line-height--base);
+  --digi--typography--link--text-decoration--desktop: var(--digi--global--typography--text-decoration--link);
+  --digi--typography--link--text-decoration--desktop-large: var(--digi--global--typography--text-decoration--link);
+  --digi--typography--link--text-decoration--mobile: var(--digi--global--typography--text-decoration--link);
+  --digi--typography--link-bold--font-weight--desktop: var(--digi--global--typography--font-weight--semibold);
+  --digi--typography--preamble--font-size--desktop: var(--digi--global--typography--font-size--base);
+  --digi--typography--preamble--font-size--mobile: var(--digi--global--typography--font-size--base);
+  --digi--typography--preamble--font-weight--desktop: var(--digi--global--typography--font-weight--semibold);
+  --digi--typography--preamble--line-height--mobile: var(--digi--global--typography--line-height--base);
+  --digi--typography--preamble--line-height--desktop: var(--digi--global--typography--line-height--base);
+  --digi--typography--accordion--font-size--desktop: var(--digi--global--typography--font-size--base);
+  --digi--typography--accordion--font-size--mobile: var(--digi--global--typography--font-size--base);
+  --digi--typography--accordion--font-weight--desktop: var(--digi--global--typography--font-weight--semibold);
+  --digi--typography--tag--font-size--desktop: var(--digi--global--typography--font-size--small);
+  --digi--typography--tag--font-size--mobile: var(--digi--global--typography--font-size--small);
+  --digi--typography--tag--font-weight--desktop: var(--digi--global--typography--font-weight--regular);
+  --digi--typography--breadcrumbs--font-size--desktop: var(--digi--global--typography--font-size--small);
+  --digi--typography--breadcrumbs--text-decoration--desktop: var(--digi--global--typography--text-decoration--default);
+  --digi--typography--title-logo--font-size--desktop: var(--digi--global--typography--font-size--largest-5);
+  --digi--typography--title-logo--font-size--desktop-large: var(--digi--global--typography--font-size--largest-5);
+  --digi--typography--title-logo--font-size--mobile: var(--digi--global--typography--font-size--largest-3);
+  --digi--typography--title-logo--font-weight--desktop: var(--digi--global--typography--font-weight--bold);
+  --digi--typography--button--font-size--desktop: var(--digi--global--typography--font-size--base);
+  --digi--typography--button--font-size--desktop-large: var(--digi--global--typography--font-size--large);
+  --digi--typography--button--font-weight--desktop: var(--digi--global--typography--font-weight--semibold);
+  --digi--color--logotype-color: var(--digi--color--logotype-color--light);
+  --digi--color--infographic--lineart: var(--digi--color--infographic--lineart--light);
+  --digi--color--infographic--background: var(--digi--color--infographic--background--light);
+  --digi--color--infographic--brand--primary: var(--digi--color--infographic--brand--primary--light);
+  --digi--color--infographic--brand--secondary: var(--digi--color--infographic--brand--secondary--light);
+  --digi--color--infographic--brand--tertiary: var(--digi--color--infographic--brand--tertiary--light);
+  --digi--color--text--primary: var(--digi--color--text--primary--light);
+  --digi--color--text--secondary: var(--digi--color--text--secondary--light);
+  --digi--color--text--description: var(--digi--color--text--description--light);
+  --digi--color--text--interactive--primary: var(--digi--color--text--interactive--primary--light);
+  --digi--color--text--interactive--secondary: var(--digi--color--text--interactive--secondary--light);
+  --digi--color--text--interactive--tertiary: var(--digi--color--text--interactive--tertiary--light);
+  --digi--color--text--interactive--brand-primary: var(--digi--color--text--interactive--brand-primary--light);
+  --digi--color--text--interactive--brand-secondary: var(--digi--color--text--interactive--brand-secondary--light);
+  --digi--color--text--interactive--visited: var(--digi--color--text--interactive--visited--light);
+  --digi--color--background--primary: var(--digi--color--background--primary--light);
+  --digi--color--background--secondary: var(--digi--color--background--secondary--light);
+  --digi--color--background--secondary-muted: var(--digi--color--background--secondary-muted--light);
+  --digi--color--background--secondary-accent: var(--digi--color--background--secondary-accent--light);
+  --digi--color--background--pop-out: var(--digi--color--background--pop-out--light);
+  --digi--color--background--brand-primary: var(--digi--color--background--brand-primary--light);
+  --digi--color--background--transparent: var(--digi--color--background--transparent--light);
+  --digi--color--background--notification: var(--digi--color--background--notification--light);
+  --digi--color--background--interactive--default--primary: var(--digi--color--background--interactive--default--primary--light);
+  --digi--color--background--interactive--default--primary-inverted: var(--digi--color--background--interactive--default--primary-inverted--light);
+  --digi--color--background--interactive--default--secondary: var(--digi--color--background--interactive--default--secondary--light);
+  --digi--color--background--interactive--default--secondary-inverted: var(--digi--color--background--interactive--default--secondary-inverted--light);
+  --digi--color--background--interactive--default--tertiary: var(--digi--color--background--interactive--default--tertiary--light);
+  --digi--color--background--interactive--default--quaternary: var(--digi--color--background--interactive--default--quaternary--light);
+  --digi--color--background--interactive--default--input-elements: var(--digi--color--background--interactive--default--input-elements--light);
+  --digi--color--background--interactive--default--pop-out: var(--digi--color--background--interactive--default--pop-out--light);
+  --digi--color--background--interactive--hover--primary: var(--digi--color--background--interactive--hover--primary--light);
+  --digi--color--background--interactive--hover--secondary: var(--digi--color--background--interactive--hover--secondary--light);
+  --digi--color--background--interactive--hover--tertiary: var(--digi--color--background--interactive--hover--tertiary--light);
+  --digi--color--background--interactive--hover--quarternary: var(--digi--color--background--interactive--hover--quarternary--light);
+  --digi--color--background--interactive--hover--inverted: var(--digi--color--background--interactive--hover--inverted--light);
+  --digi--color--background--interactive--selected--primary: var(--digi--color--background--interactive--selected--primary--light);
+  --digi--color--background--interactive--selected--secondary: var(--digi--color--background--interactive--selected--secondary--light);
+  --digi--color--background--interactive--selected--tertiary: var(--digi--color--background--interactive--selected--tertiary--light);
+  --digi--color--background--interactive--selected--on-menu-minus-button: var(--digi--color--background--interactive--selected--on-menu-minus-button--light);
+  --digi--color--background--interactive--validation--success: var(--digi--color--background--interactive--validation--success--light);
+  --digi--color--background--interactive--validation--warning: var(--digi--color--background--interactive--validation--warning--light);
+  --digi--color--background--interactive--validation--error: var(--digi--color--background--interactive--validation--error--light);
+  --digi--color--background--sentiment--error--primary: var(--digi--color--background--sentiment--error--primary--light);
+  --digi--color--background--sentiment--error--secondary: var(--digi--color--background--sentiment--error--secondary--light);
+  --digi--color--background--sentiment--error--tertiary: var(--digi--color--background--sentiment--error--tertiary--light);
+  --digi--color--background--sentiment--success--primary: var(--digi--color--background--sentiment--success--primary--light);
+  --digi--color--background--sentiment--success--secondary: var(--digi--color--background--sentiment--success--secondary--light);
+  --digi--color--background--sentiment--success--tertiary: var(--digi--color--background--sentiment--success--tertiary--light);
+  --digi--color--background--sentiment--warning--primary: var(--digi--color--background--sentiment--warning--primary--light);
+  --digi--color--background--sentiment--warning--secondary: var(--digi--color--background--sentiment--warning--secondary--light);
+  --digi--color--background--sentiment--warning--tertiary: var(--digi--color--background--sentiment--warning--tertiary--light);
+  --digi--color--background--sentiment--warning--quarternary: var(--digi--color--background--sentiment--warning--quarternary--light);
+  --digi--color--background--sentiment--info--primary: var(--digi--color--background--sentiment--info--primary--light);
+  --digi--color--background--sentiment--info--secondary: var(--digi--color--background--sentiment--info--secondary--light);
+  --digi--color--background--sentiment--info--tertiary: var(--digi--color--background--sentiment--info--tertiary--light);
+  --digi--color--background--sentiment--neutral--primary: var(--digi--color--background--sentiment--neutral--primary--light);
+  --digi--color--background--sentiment--neutral--secondary: var(--digi--color--background--sentiment--neutral--secondary--light);
+  --digi--color--background--sentiment--neutral--tertiary: var(--digi--color--background--sentiment--neutral--tertiary--light);
+  --digi--color--background--sentiment--beta--primary: var(--digi--color--background--sentiment--beta--primary--light);
+  --digi--color--background--sentiment--beta--secondary: var(--digi--color--background--sentiment--beta--secondary--light);
+  --digi--color--border--notification: var(--digi--color--border--notification--light);
+  --digi--color--border--transparent: var(--digi--color--border--transparent--light);
+  --digi--color--border--interactive--default--primary: var(--digi--color--border--interactive--default--primary--light);
+  --digi--color--border--interactive--default--on-input: var(--digi--color--border--interactive--default--on-input--light);
+  --digi--color--border--interactive--default--on-input-nuance: var(--digi--color--border--interactive--default--on-input-nuance--light);
+  --digi--color--border--interactive--default--inverted: var(--digi--color--border--interactive--default--inverted--light);
+  --digi--color--border--interactive--hover--primary: var(--digi--color--border--interactive--hover--primary--light);
+  --digi--color--border--interactive--hover--secondary: var(--digi--color--border--interactive--hover--secondary--light);
+  --digi--color--border--interactive--hover--inverted: var(--digi--color--border--interactive--hover--inverted--light);
+  --digi--color--border--interactive--validation--success: var(--digi--color--border--interactive--validation--success--light);
+  --digi--color--border--interactive--validation--warning: var(--digi--color--border--interactive--validation--warning--light);
+  --digi--color--border--interactive--validation--error: var(--digi--color--border--interactive--validation--error--light);
+  --digi--color--border--interactive--selected--primary: var(--digi--color--border--interactive--selected--primary--light);
+  --digi--color--border--interactive--selected--secondary: var(--digi--color--border--interactive--selected--secondary--light);
+  --digi--color--border--sentiment--error: var(--digi--color--border--sentiment--error--light);
+  --digi--color--border--sentiment--success: var(--digi--color--border--sentiment--success--light);
+  --digi--color--border--sentiment--warning: var(--digi--color--border--sentiment--warning--light);
+  --digi--color--border--sentiment--info: var(--digi--color--border--sentiment--info--light);
+  --digi--color--border--accent--primary: var(--digi--color--border--accent--primary--light);
+  --digi--color--border--accent--secondary: var(--digi--color--border--accent--secondary--light);
+  --digi--color--marking--navigation--selected: var(--digi--color--marking--navigation--selected--light);
+  --digi--color--marking--navigation--level-active: var(--digi--color--marking--navigation--level-active--light);
+  --digi--color--marking--navigation--level-inactive: var(--digi--color--marking--navigation--level-inactive--light);
+  --digi--color--marking--indication--primary: var(--digi--color--marking--indication--primary--light);
+  --digi--color--marking--indication--secondary: var(--digi--color--marking--indication--secondary--light);
+  --digi--color--marking--indication--tertiary: var(--digi--color--marking--indication--tertiary--light);
+  --digi--color--divider--primary: var(--digi--color--divider--primary--light);
+  --digi--color--divider--secondary: var(--digi--color--divider--secondary--light);
+  --digi--color--divider--on-brand-primary: var(--digi--color--divider--on-brand-primary--light);
+  --digi--color--divider--cta: var(--digi--color--divider--cta--light);
+  --digi--color--icon--primary: var(--digi--color--icon--primary--light);
+  --digi--color--icon--secondary: var(--digi--color--icon--secondary--light);
+  --digi--color--icon--cta: var(--digi--color--icon--cta--light);
+  --digi--color--icon--brand-primary: var(--digi--color--icon--brand-primary--light);
+  --digi--color--icon--brand-secondary: var(--digi--color--icon--brand-secondary--light);
+  --digi--color--icon--validation--success: var(--digi--color--icon--validation--success--light);
+  --digi--color--icon--validation--warning: var(--digi--color--icon--validation--warning--light);
+  --digi--color--icon--validation--error: var(--digi--color--icon--validation--error--light);
+  --digi--color--misc--spinner-path: var(--digi--color--misc--spinner-path--light);
+  --digi--color--misc--skeleton: var(--digi--color--misc--skeleton--light);
+  --digi--amethyst--500: #822998;
+  --digi--granskott--150: #f2faf2;
+  --digi--granskott--200: #ebf8eb;
+  --digi--granskott--250: #ddf4dd;
+  --digi--granskott--300: #cbecc9;
+  --digi--granskott--350: #ace4ad;
+  --digi--granskott--650: #1db920;
+  --digi--granskott--700: #02a704;
+  --digi--granskott--750: #018903;
+  --digi--granskott--800: #016503;
+  --digi--natthimmel--200: #e9f6fd;
+  --digi--natthimmel--250: #ddf1fc;
+  --digi--natthimmel--300: #c9e9fa;
+  --digi--natthimmel--350: #abdef7;
+  --digi--natthimmel--700: #043982;
+  --digi--natthimmel--800: #091d54;
+  --digi--natthimmel--900: #071744;
+  --digi--norrsken--400: #aaf5ab;
+  --digi--norrsken--500: #67ee6a;
+  --digi--rallarros--300: #f8ddf5;
+  --digi--rallarros--500: #ce1cbd;
+  --digi--sapphire--500: #1616b2;
+  --digi--color--logotype-color--light: var(--digi--granskott--700);
+  --digi--color--infographic--lineart--light: var(--digi--grayscale--900);
+  --digi--color--infographic--background--light: var(--digi--grayscale--0);
+  --digi--color--infographic--brand--primary--light: var(--digi--granskott--700);
+  --digi--color--infographic--brand--secondary--light: var(--digi--granskott--250);
+  --digi--color--infographic--brand--tertiary--light: var(--digi--rallarros--500);
+  --digi--color--text--primary--light: var(--digi--grayscale--900);
+  --digi--color--text--secondary--light: var(--digi--grayscale--0);
+  --digi--color--text--description--light: var(--digi--grayscale--800);
+  --digi--color--text--interactive--primary--light: var(--digi--sapphire--500);
+  --digi--color--text--interactive--secondary--light: var(--digi--grayscale--0);
+  --digi--color--text--interactive--tertiary--light: var(--digi--grayscale--900);
+  --digi--color--text--interactive--brand-primary--light: var(--digi--natthimmel--800);
+  --digi--color--text--interactive--brand-secondary--light: var(--digi--norrsken--500);
+  --digi--color--text--interactive--visited--light: var(--digi--amethyst--500);
+  --digi--color--background--primary--light: var(--digi--grayscale--0);
+  --digi--color--background--secondary--light: var(--digi--grayscale--100);
+  --digi--color--background--secondary-muted--light: var(--digi--grayscale--50);
+  --digi--color--background--secondary-accent--light: var(--digi--grayscale--400);
+  --digi--color--background--pop-out--light: var(--digi--granskott--200);
+  --digi--color--background--brand-primary--light: var(--digi--natthimmel--800);
+  --digi--color--background--transparent--light: var(--digi--misc--transparent);
+  --digi--color--background--notification--light: var(--digi--sentiment--error--500);
+  --digi--color--background--interactive--default--primary--light: var(--digi--natthimmel--800);
+  --digi--color--background--interactive--default--primary-inverted--light: var(--digi--norrsken--500);
+  --digi--color--background--interactive--default--secondary--light: var(--digi--grayscale--0);
+  --digi--color--background--interactive--default--secondary-inverted--light: var(--digi--misc--transparent);
+  --digi--color--background--interactive--default--tertiary--light: var(--digi--grayscale--200);
+  --digi--color--background--interactive--default--quaternary--light: var(--digi--grayscale--100);
+  --digi--color--background--interactive--default--input-elements--light: var(--digi--grayscale--0);
+  --digi--color--background--interactive--default--pop-out--light: var(--digi--granskott--150);
+  --digi--color--background--interactive--hover--primary--light: var(--digi--natthimmel--700);
+  --digi--color--background--interactive--hover--secondary--light: var(--digi--natthimmel--250);
+  --digi--color--background--interactive--hover--tertiary--light: var(--digi--sapphire--500);
+  --digi--color--background--interactive--hover--quarternary--light: var(--digi--grayscale--200);
+  --digi--color--background--interactive--hover--inverted--light: var(--digi--norrsken--400);
+  --digi--color--background--interactive--selected--primary--light: var(--digi--sentiment--success--500);
+  --digi--color--background--interactive--selected--secondary--light: var(--digi--natthimmel--800);
+  --digi--color--background--interactive--selected--tertiary--light: var(--digi--grayscale--200);
+  --digi--color--background--interactive--selected--on-menu-minus-button--light: var(--digi--granskott--250);
+  --digi--color--background--interactive--validation--success--light: var(--digi--sentiment--success--200);
+  --digi--color--background--interactive--validation--warning--light: var(--digi--sentiment--warning--50);
+  --digi--color--background--interactive--validation--error--light: var(--digi--sentiment--error--200);
+  --digi--color--background--sentiment--error--primary--light: var(--digi--sentiment--error--500);
+  --digi--color--background--sentiment--error--secondary--light: var(--digi--sentiment--error--700);
+  --digi--color--background--sentiment--error--tertiary--light: var(--digi--sentiment--error--200);
+  --digi--color--background--sentiment--success--primary--light: var(--digi--sentiment--success--500);
+  --digi--color--background--sentiment--success--secondary--light: var(--digi--sentiment--success--700);
+  --digi--color--background--sentiment--success--tertiary--light: var(--digi--sentiment--success--200);
+  --digi--color--background--sentiment--warning--primary--light: var(--digi--sentiment--warning--500);
+  --digi--color--background--sentiment--warning--secondary--light: var(--digi--sentiment--warning--700);
+  --digi--color--background--sentiment--warning--tertiary--light: var(--digi--sentiment--warning--200);
+  --digi--color--background--sentiment--warning--quarternary--light: var(--digi--sentiment--warning--50);
+  --digi--color--background--sentiment--info--primary--light: var(--digi--sentiment--informative--500);
+  --digi--color--background--sentiment--info--secondary--light: var(--digi--sentiment--informative--700);
+  --digi--color--background--sentiment--info--tertiary--light: var(--digi--sentiment--informative--200);
+  --digi--color--background--sentiment--neutral--primary--light: var(--digi--grayscale--700);
+  --digi--color--background--sentiment--neutral--secondary--light: var(--digi--grayscale--400);
+  --digi--color--background--sentiment--neutral--tertiary--light: var(--digi--grayscale--900);
+  --digi--color--background--sentiment--beta--primary--light: var(--digi--rallarros--500);
+  --digi--color--background--sentiment--beta--secondary--light: var(--digi--rallarros--300);
+  --digi--color--border--notification--light: var(--digi--grayscale--0);
+  --digi--color--border--transparent--light: var(--digi--misc--transparent);
+  --digi--color--border--interactive--default--primary--light: var(--digi--natthimmel--800);
+  --digi--color--border--interactive--default--on-input--light: var(--digi--grayscale--900);
+  --digi--color--border--interactive--default--on-input-nuance--light: var(--digi--grayscale--800);
+  --digi--color--border--interactive--default--inverted--light: var(--digi--norrsken--500);
+  --digi--color--border--interactive--hover--primary--light: var(--digi--natthimmel--700);
+  --digi--color--border--interactive--hover--secondary--light: var(--digi--natthimmel--800);
+  --digi--color--border--interactive--hover--inverted--light: var(--digi--norrsken--400);
+  --digi--color--border--interactive--validation--success--light: var(--digi--sentiment--success--500);
+  --digi--color--border--interactive--validation--warning--light: var(--digi--sentiment--warning--900);
+  --digi--color--border--interactive--validation--error--light: var(--digi--sentiment--error--500);
+  --digi--color--border--interactive--selected--primary--light: var(--digi--sentiment--success--500);
+  --digi--color--border--interactive--selected--secondary--light: var(--digi--natthimmel--800);
+  --digi--color--border--sentiment--error--light: var(--digi--sentiment--error--500);
+  --digi--color--border--sentiment--success--light: var(--digi--sentiment--success--500);
+  --digi--color--border--sentiment--warning--light: var(--digi--sentiment--warning--500);
+  --digi--color--border--sentiment--info--light: var(--digi--sentiment--informative--500);
+  --digi--color--border--accent--primary--light: var(--digi--natthimmel--800);
+  --digi--color--border--accent--secondary--light: var(--digi--granskott--700);
+  --digi--color--marking--navigation--selected--light: var(--digi--granskott--700);
+  --digi--color--marking--navigation--level-active--light: var(--digi--granskott--250);
+  --digi--color--marking--navigation--level-inactive--light: var(--digi--grayscale--100);
+  --digi--color--marking--indication--primary--light: var(--digi--sentiment--success--500);
+  --digi--color--marking--indication--secondary--light: var(--digi--natthimmel--800);
+  --digi--color--marking--indication--tertiary--light: var(--digi--grayscale--700);
+  --digi--color--divider--primary--light: var(--digi--grayscale--400);
+  --digi--color--divider--secondary--light: var(--digi--grayscale--200);
+  --digi--color--divider--on-brand-primary--light: var(--digi--natthimmel--350);
+  --digi--color--divider--cta--light: var(--digi--sapphire--500);
+  --digi--color--icon--primary--light: var(--digi--grayscale--900);
+  --digi--color--icon--secondary--light: var(--digi--grayscale--0);
+  --digi--color--icon--cta--light: var(--digi--sapphire--500);
+  --digi--color--icon--brand-primary--light: var(--digi--natthimmel--800);
+  --digi--color--icon--brand-secondary--light: var(--digi--granskott--700);
+  --digi--color--icon--validation--success--light: var(--digi--sentiment--success--500);
+  --digi--color--icon--validation--warning--light: var(--digi--sentiment--warning--500);
+  --digi--color--icon--validation--error--light: var(--digi--sentiment--error--500);
+  --digi--color--misc--spinner-path--light: var(--digi--grayscale--400);
+  --digi--color--misc--skeleton--light: var(--digi--grayscale--400);
+  --digi--color--amber--200: #fff398;
+  --digi--color--amber--50: #fffbdd;
+  --digi--color--amber--500: #ffe200;
+  --digi--color--amber--700: #ffc108;
+  --digi--color--amber--900: #664d00;
+  --digi--color--amethyst--500: #822998;
+  --digi--color--forest--200: #e9f6ec;
+  --digi--color--forest--500: #009322;
+  --digi--color--forest--700: #02703c;
+  --digi--color--indigo--200: #e9e9ff;
+  --digi--color--indigo--500: #0000ff;
+  --digi--color--indigo--700: #0058a3;
+  --digi--color--jade--100: #bddfda;
+  --digi--color--jade--200: #7fc1b6;
+  --digi--color--jade--400: #379d8d;
+  --digi--color--jade--50: #ddeeec;
+  --digi--color--jade--500: #058470;
+  --digi--color--jade--600: #046a5a;
+  --digi--color--jade--700: #035548;
+  --digi--color--jade--900: #02372f;
+  --digi--color--leaf--100: #f1f7e5;
+  --digi--color--leaf--200: #ddebc1;
+  --digi--color--leaf--400: #aace65;
+  --digi--color--leaf--500: #95c23e;
+  --digi--color--leaf--600: #779b32;
+  --digi--color--moon--0: #ffffff;
+  --digi--color--pear--500: #b7ee4a;
+  --digi--color--pear--600: #a7d943;
+  --digi--color--rose--100: #f4cada;
+  --digi--color--rose--200: #e997b7;
+  --digi--color--rose--400: #dd5c8e;
+  --digi--color--rose--50: #f9e4ec;
+  --digi--color--rose--500: #d43372;
+  --digi--color--rose--600: #bd2e65;
+  --digi--color--rose--700: #882149;
+  --digi--color--rose--900: #54172e;
+  --digi--color--ruby--200: #fdeded;
+  --digi--color--ruby--500: #da0000;
+  --digi--color--ruby--700: #c7311a;
+  --digi--color--sapphire--500: #1616b2;
+  --digi--color--stratos--100: #dddde9;
+  --digi--color--stratos--400: #33337b;
+  --digi--color--stratos--500: #00005a;
+  --digi--color--stratos--600: #000048;
+  --digi--color--water--200: #f1f8fe;
+  --digi--color--water--500: #bdd3e7;
+  --digi--color--water--700: #0058a3;
+  --digi--color--logotype-color--light--af18: var(--digi--color--leaf--500);
+  --digi--color--infographic--lineart--light--af18: var(--digi--grayscale--900);
+  --digi--color--infographic--background--light--af18: var(--digi--grayscale--0);
+  --digi--color--infographic--brand--primary--light--af18: var(--digi--color--leaf--500);
+  --digi--color--infographic--brand--secondary--light--af18: var(--digi--color--leaf--200);
+  --digi--color--infographic--brand--tertiary--light--af18: var(--digi--color--rose--500);
+  --digi--color--text--primary--light--af18: var(--digi--grayscale--900);
+  --digi--color--text--secondary--light--af18: var(--digi--grayscale--0);
+  --digi--color--text--description--light--af18: var(--digi--grayscale--800);
+  --digi--color--text--interactive--primary--light--af18: var(--digi--color--sapphire--500);
+  --digi--color--text--interactive--secondary--light--af18: var(--digi--grayscale--0);
+  --digi--color--text--interactive--tertiary--light--af18: var(--digi--grayscale--900);
+  --digi--color--text--interactive--brand-primary--light--af18: var(--digi--color--stratos--500);
+  --digi--color--text--interactive--brand-secondary--light--af18: var(--digi--color--leaf--500);
+  --digi--color--text--interactive--visited--light--af18: var(--digi--color--amethyst--500);
+  --digi--color--background--primary--light--af18: var(--digi--grayscale--0);
+  --digi--color--background--secondary--light--af18: var(--digi--grayscale--100);
+  --digi--color--background--secondary-muted--light--af18: var(--digi--grayscale--50);
+  --digi--color--background--secondary-accent--light--af18: var(--digi--grayscale--400);
+  --digi--color--background--pop-out--light--af18: var(--digi--color--leaf--100);
+  --digi--color--background--brand-primary--light--af18: var(--digi--color--stratos--500);
+  --digi--color--background--transparent--light--af18: var(--digi--misc--transparent);
+  --digi--color--background--notification--light--af18: var(--digi--sentiment--error--500);
+  --digi--color--background--interactive--default--primary--light--af18: var(--digi--color--stratos--500);
+  --digi--color--background--interactive--default--primary-inverted--light--af18: var(--digi--color--leaf--500);
+  --digi--color--background--interactive--default--secondary--light--af18: var(--digi--grayscale--0);
+  --digi--color--background--interactive--default--secondary-inverted--light--af18: var(--digi--misc--transparent);
+  --digi--color--background--interactive--default--tertiary--light--af18: var(--digi--grayscale--200);
+  --digi--color--background--interactive--default--quaternary--light--af18: var(--digi--grayscale--100);
+  --digi--color--background--interactive--default--input-elements--light--af18: var(--digi--grayscale--0);
+  --digi--color--background--interactive--default--pop-out--light--af18: var(--digi--color--leaf--100);
+  --digi--color--background--interactive--hover--primary--light--af18: var(--digi--color--water--700);
+  --digi--color--background--interactive--hover--secondary--light--af18: var(--digi--color--water--500);
+  --digi--color--background--interactive--hover--tertiary--light--af18: var(--digi--color--sapphire--500);
+  --digi--color--background--interactive--hover--quarternary--light--af18: var(--digi--grayscale--200);
+  --digi--color--background--interactive--hover--inverted--light--af18: var(--digi--color--pear--500);
+  --digi--color--background--interactive--selected--primary--light--af18: var(--digi--sentiment--success--500);
+  --digi--color--background--interactive--selected--secondary--light--af18: var(--digi--color--stratos--500);
+  --digi--color--background--interactive--selected--tertiary--light--af18: var(--digi--grayscale--200);
+  --digi--color--background--interactive--selected--on-menu-minus-button--light--af18: var(--digi--color--leaf--200);
+  --digi--color--background--interactive--validation--success--light--af18: var(--digi--sentiment--success--200);
+  --digi--color--background--interactive--validation--warning--light--af18: var(--digi--sentiment--warning--50);
+  --digi--color--background--interactive--validation--error--light--af18: var(--digi--sentiment--error--200);
+  --digi--color--background--sentiment--error--primary--light--af18: var(--digi--sentiment--error--500);
+  --digi--color--background--sentiment--error--secondary--light--af18: var(--digi--sentiment--error--700);
+  --digi--color--background--sentiment--error--tertiary--light--af18: var(--digi--sentiment--error--200);
+  --digi--color--background--sentiment--success--primary--light--af18: var(--digi--sentiment--success--500);
+  --digi--color--background--sentiment--success--secondary--light--af18: var(--digi--sentiment--success--700);
+  --digi--color--background--sentiment--success--tertiary--light--af18: var(--digi--sentiment--success--200);
+  --digi--color--background--sentiment--warning--primary--light--af18: var(--digi--sentiment--warning--500);
+  --digi--color--background--sentiment--warning--secondary--light--af18: var(--digi--sentiment--warning--700);
+  --digi--color--background--sentiment--warning--tertiary--light--af18: var(--digi--sentiment--warning--200);
+  --digi--color--background--sentiment--warning--quarternary--light--af18: var(--digi--sentiment--warning--50);
+  --digi--color--background--sentiment--info--primary--light--af18: var(--digi--sentiment--informative--500);
+  --digi--color--background--sentiment--info--secondary--light--af18: var(--digi--sentiment--informative--700);
+  --digi--color--background--sentiment--info--tertiary--light--af18: var(--digi--sentiment--informative--200);
+  --digi--color--background--sentiment--neutral--primary--light--af18: var(--digi--grayscale--700);
+  --digi--color--background--sentiment--neutral--secondary--light--af18: var(--digi--grayscale--400);
+  --digi--color--background--sentiment--neutral--tertiary--light--af18: var(--digi--grayscale--900);
+  --digi--color--background--sentiment--beta--primary--light--af18: var(--digi--color--rose--500);
+  --digi--color--background--sentiment--beta--secondary--light--af18: var(--digi--color--rose--100);
+  --digi--color--border--notification--light--af18: var(--digi--grayscale--0);
+  --digi--color--border--transparent--light--af18: var(--digi--misc--transparent);
+  --digi--color--border--interactive--default--primary--light--af18: var(--digi--color--stratos--500);
+  --digi--color--border--interactive--default--on-input--light--af18: var(--digi--grayscale--900);
+  --digi--color--border--interactive--default--on-input-nuance--light--af18: var(--digi--grayscale--800);
+  --digi--color--border--interactive--default--inverted--light--af18: var(--digi--color--leaf--500);
+  --digi--color--border--interactive--hover--primary--light--af18: var(--digi--color--water--700);
+  --digi--color--border--interactive--hover--secondary--light--af18: var(--digi--color--stratos--500);
+  --digi--color--border--interactive--hover--inverted--light--af18: var(--digi--color--pear--500);
+  --digi--color--border--interactive--validation--success--light--af18: var(--digi--sentiment--success--500);
+  --digi--color--border--interactive--validation--warning--light--af18: var(--digi--sentiment--warning--900);
+  --digi--color--border--interactive--validation--error--light--af18: var(--digi--sentiment--error--500);
+  --digi--color--border--interactive--selected--primary--light--af18: var(--digi--sentiment--success--500);
+  --digi--color--border--interactive--selected--secondary--light--af18: var(--digi--color--stratos--500);
+  --digi--color--border--sentiment--error--light--af18: var(--digi--sentiment--error--500);
+  --digi--color--border--sentiment--success--light--af18: var(--digi--sentiment--success--500);
+  --digi--color--border--sentiment--warning--light--af18: var(--digi--sentiment--warning--500);
+  --digi--color--border--sentiment--info--light--af18: var(--digi--sentiment--informative--500);
+  --digi--color--border--accent--primary--light--af18: var(--digi--color--stratos--500);
+  --digi--color--border--accent--secondary--light--af18: var(--digi--color--leaf--500);
+  --digi--color--marking--navigation--selected--light--af18: var(--digi--color--leaf--500);
+  --digi--color--marking--navigation--level-active--light--af18: var(--digi--color--leaf--200);
+  --digi--color--marking--navigation--level-inactive--light--af18: var(--digi--grayscale--100);
+  --digi--color--marking--indication--primary--light--af18: var(--digi--sentiment--success--500);
+  --digi--color--marking--indication--secondary--light--af18: var(--digi--color--stratos--500);
+  --digi--color--marking--indication--tertiary--light--af18: var(--digi--grayscale--700);
+  --digi--color--divider--primary--light--af18: var(--digi--grayscale--400);
+  --digi--color--divider--secondary--light--af18: var(--digi--grayscale--200);
+  --digi--color--divider--on-brand-primary--light--af18: var(--digi--color--stratos--400);
+  --digi--color--divider--cta--light--af18: var(--digi--color--sapphire--500);
+  --digi--color--icon--primary--light--af18: var(--digi--grayscale--900);
+  --digi--color--icon--secondary--light--af18: var(--digi--grayscale--0);
+  --digi--color--icon--cta--light--af18: var(--digi--color--sapphire--500);
+  --digi--color--icon--brand-primary--light--af18: var(--digi--color--stratos--500);
+  --digi--color--icon--brand-secondary--light--af18: var(--digi--color--leaf--500);
+  --digi--color--icon--validation--success--light--af18: var(--digi--sentiment--success--500);
+  --digi--color--icon--validation--warning--light--af18: var(--digi--sentiment--warning--500);
+  --digi--color--icon--validation--error--light--af18: var(--digi--sentiment--error--500);
+  --digi--color--misc--spinner-path--light--af18: var(--digi--grayscale--400);
+  --digi--color--misc--skeleton--light--af18: var(--digi--grayscale--400);
+}
+
+body {
+  font-size: 1rem;
+  font-family: "Open Sans", Arial, sans-serif;
 }
 
+/* Calculations with sin() isn't supported in many browsers yet, but this is how you calculate the invisible-height with sin()
+ * $lower-triangle-height: calc(sin($check-rotation) * $check-width);
+ * $border-height: calc(sin($check-rotation) * $check-border-width);
+ * $invisible-height: calc($lower-triangle-height - $border-height);
+ */
 :host {
-  --digi--form-checkbox--border-color: var(--digi--color--border--primary);
-  --digi--form-checkbox--border-color--primary: var(--digi--color--border--checkbox-primary);
-  --digi--form-checkbox--border-color--secondary: var(--digi--color--border--checkbox-secondary);
-  --digi--form-checkbox--border-color--error: var(--digi--color--border--danger);
-  --digi--form-checkbox--border-color--warning: var(--digi--color--border--warning-2);
-  --digi--form-checkbox--box-shadow--error: var(--digi--color--border--danger);
-  --digi--form-checkbox--box-shadow--warning: var(--digi--color--border--warning-2);
+  --digi--form-checkbox--border-color: var(--digi--color--border--interactive--default--on-input);
+  --digi--form-checkbox--border-color--primary: var(--digi--color--border--interactive--default--on-input);
+  --digi--form-checkbox--border-color--secondary: var(--digi--color--border--interactive--default--on-input);
+  --digi--form-checkbox--border-color--error: var(--digi--color--border--interactive--validation--error);
+  --digi--form-checkbox--border-color--warning: var(--digi--color--border--interactive--validation--warning);
+  --digi--form-checkbox--box-shadow--error: var(--digi--color--border--interactive--validation--error);
+  --digi--form-checkbox--box-shadow--warning: var(--digi--color--border--interactive--validation--warning);
   --digi--form-checkbox--background-color: var(--digi--color--background--primary);
-  --digi--form-checkbox--background-color--primary: var(--digi--color--background--checkbox-primary);
-  --digi--form-checkbox--background-color--secondary: var(--digi--color--background--checkbox-secondary);
-  --digi--form-checkbox--background-color--error: var(--digi--color--background--danger-2);
-  --digi--form-checkbox--background-color--warning: var(--digi--color--background--warning-3);
-  --digi--form-checkbox--label--background-color--hover: var(--digi--color--background--input-empty);
-  --digi--form-checkbox--input--focus--shadow: var(--digi--shadow--input-focus);
+  --digi--form-checkbox--background-color--primary: var(--digi--color--background--interactive--selected--primary);
+  --digi--form-checkbox--background-color--secondary: var(--digi--color--background--interactive--selected--secondary);
+  --digi--form-checkbox--background-color--error: var(--digi--color--background--interactive--validation--error);
+  --digi--form-checkbox--background-color--warning: var(--digi--color--background--interactive--validation--warning);
+  --digi--form-checkbox--label--background-color--hover: var(--digi--color--background--primary);
   --digi--form-checkbox--border-width: var(--digi--border-width--primary);
-  --digi--form-checkbox--color--marker: var(--digi--color--background--checkbox-marker);
+  --digi--form-checkbox--color--marker: var(--digi--color--icon--secondary);
   --digi--form-checkbox--size: 1.25rem;
   --digi--form-checkbox--height: var(--digi--input-height--large);
   --digi--form-checkbox--border-radius: var(--digi--border-radius--tertiary);
@@ -321,9 +766,7 @@ License: none (public domain)
   --BORDER-COLOR--CHECKED: var(--digi--form-checkbox--border-color--primary);
 }
 :host .digi-form-checkbox--secondary {
-  --BACKGROUND--CHECKED: var(
-    --digi--form-checkbox--background-color--secondary
-  );
+  --BACKGROUND--CHECKED: var(--digi--form-checkbox--background-color--secondary);
   --BORDER-COLOR--CHECKED: var(--digi--form-checkbox--border-color--secondary);
 }
 :host .digi-form-checkbox--error .digi-form-checkbox__input:not(:checked) ~ .digi-form-checkbox__label .digi-form-checkbox__box {