@volvo-cars/css 1.53.0 → 2.0.0

package/dist/tokens.css

@@ -1 +1 @@
-:host,:root,[data-color-mode],::backdrop{--v-color-always-black:#000;--v-color-always-white:#fff;--v-color-background-feedback-gray:#f5f5f5;--v-color-background-feedback-green:#d7f9df;--v-color-background-feedback-orange:#ffe8d1;--v-color-background-feedback-red:#fce5e3;--v-color-background-primary:#fff;--v-color-background-secondary:#fafafa;--v-color-foreground-accent-blue:#1c6eba;--v-color-foreground-feedback-green:#04771d;--v-color-foreground-feedback-orange:#ce6700;--v-color-foreground-feedback-red:#cd2314;--v-color-foreground-inverted:#fff;--v-color-foreground-primary:#0a0a0a;--v-color-foreground-secondary:#616161;--v-color-foreground-tertiary:#838383;--v-color-ornament-primary:#0000001f;--v-color-ornament-scrim:#000000a3;--v-color-state-accent-blue-medium:#1c6eba1f;--v-color-state-accent-blue-strong:#1c6eba33;--v-color-state-accent-blue-subtle:#1c6eba0a;--v-color-state-always-black-medium:#0000001f;--v-color-state-always-black-strong:#0003;--v-color-state-always-black-subtle:#0000000a;--v-color-state-always-white-medium:#ffffff1f;--v-color-state-always-white-strong:#fff3;--v-color-state-always-white-subtle:#ffffff0a;--v-color-state-feedback-red-medium:#d624151f;--v-color-state-feedback-red-strong:#d6241533;--v-color-state-feedback-red-subtle:#d624150a;--v-color-state-inverted-medium:#ffffff1f;--v-color-state-inverted-strong:#fff3;--v-color-state-inverted-subtle:#ffffff0a;--v-color-state-primary-medium:#0000001f;--v-color-state-primary-strong:#0003;--v-color-state-primary-subtle:#0000000a;--v-color-surface-accent-blue:#1c6eba;--v-color-surface-feedback-green:#04771d;--v-color-surface-feedback-orange:#ce6700;--v-color-surface-feedback-red:#cd2314;--v-color-surface-neutral:#1f1f1f}[data-color-mode=dark],:host([data-color-mode=dark]){--v-color-background-feedback-gray:#2e2e2e;--v-color-background-feedback-green:#02310c;--v-color-background-feedback-orange:#522900;--v-color-background-feedback-red:#4a0d07;--v-color-background-primary:#141414;--v-color-background-secondary:#1f1f1f;--v-color-foreground-accent-blue:#378fe1;--v-color-foreground-feedback-green:#07ca31;--v-color-foreground-feedback-orange:#f93;--v-color-foreground-feedback-red:#ef6658;--v-color-foreground-inverted:#0a0a0a;--v-color-foreground-primary:#fff;--v-color-foreground-secondary:#bababa;--v-color-ornament-primary:#ffffff1f;--v-color-ornament-scrim:#000000a3;--v-color-state-accent-blue-medium:#1f78d129;--v-color-state-accent-blue-strong:#1f78d13d;--v-color-state-accent-blue-subtle:#1f78d114;--v-color-state-always-black-medium:#00000029;--v-color-state-always-black-strong:#0000003d;--v-color-state-always-black-subtle:#00000014;--v-color-state-always-white-medium:#ffffff29;--v-color-state-always-white-strong:#ffffff3d;--v-color-state-always-white-subtle:#ffffff14;--v-color-state-feedback-red-medium:#ef665829;--v-color-state-feedback-red-strong:#ef66583d;--v-color-state-feedback-red-subtle:#ef665814;--v-color-state-inverted-medium:#00000029;--v-color-state-inverted-strong:#0000003d;--v-color-state-inverted-subtle:#00000014;--v-color-state-primary-medium:#ffffff29;--v-color-state-primary-strong:#ffffff3d;--v-color-state-primary-subtle:#ffffff14;--v-color-surface-accent-blue:#1f78d1;--v-color-surface-feedback-green:#048220;--v-color-surface-feedback-red:#e52715;--v-color-surface-neutral:#fff}@media (prefers-color-scheme:dark){[data-color-mode=auto],:host([data-color-mode=auto]){--v-color-background-feedback-gray:#2e2e2e;--v-color-background-feedback-green:#02310c;--v-color-background-feedback-orange:#522900;--v-color-background-feedback-red:#4a0d07;--v-color-background-primary:#141414;--v-color-background-secondary:#1f1f1f;--v-color-foreground-accent-blue:#378fe1;--v-color-foreground-feedback-green:#07ca31;--v-color-foreground-feedback-orange:#f93;--v-color-foreground-feedback-red:#ef6658;--v-color-foreground-inverted:#0a0a0a;--v-color-foreground-primary:#fff;--v-color-foreground-secondary:#bababa;--v-color-ornament-primary:#ffffff1f;--v-color-ornament-scrim:#000000a3;--v-color-state-accent-blue-medium:#1f78d129;--v-color-state-accent-blue-strong:#1f78d13d;--v-color-state-accent-blue-subtle:#1f78d114;--v-color-state-always-black-medium:#00000029;--v-color-state-always-black-strong:#0000003d;--v-color-state-always-black-subtle:#00000014;--v-color-state-always-white-medium:#ffffff29;--v-color-state-always-white-strong:#ffffff3d;--v-color-state-always-white-subtle:#ffffff14;--v-color-state-feedback-red-medium:#ef665829;--v-color-state-feedback-red-strong:#ef66583d;--v-color-state-feedback-red-subtle:#ef665814;--v-color-state-inverted-medium:#00000029;--v-color-state-inverted-strong:#0000003d;--v-color-state-inverted-subtle:#00000014;--v-color-state-primary-medium:#ffffff29;--v-color-state-primary-strong:#ffffff3d;--v-color-state-primary-subtle:#ffffff14;--v-color-surface-accent-blue:#1f78d1;--v-color-surface-feedback-green:#048220;--v-color-surface-feedback-red:#e52715;--v-color-surface-neutral:#fff}}:host,:root,[data-color-mode],::backdrop{--_ve73fe1:0;--_v01aeb4:initial;--_v142aa7: ;--_v580f4a:4%;--_v462cee:12%;--_vce294a:20%;--_vd9113b:.32;--_vfb96e0:var(--v-color-surface-accent-blue)}[data-color-mode=dark],:host([data-color-mode=dark]){--_ve73fe1:1;--_v01aeb4: ;--_v142aa7:initial;--_v580f4a:8%;--_v462cee:16%;--_vce294a:24%;--_vd9113b:.4}@media (prefers-color-scheme:dark){[data-color-mode=auto],:host([data-color-mode=auto]){--_ve73fe1:1;--_v01aeb4: ;--_v142aa7:initial;--_v580f4a:8%;--_v462cee:16%;--_vce294a:24%;--_vd9113b:.4}}:host([data-theme=centenary]),[data-theme=centenary],[data-theme=centenary] [data-color-mode]{--_vfb96e0:var(--v-color-surface-neutral)}:host,:root{--v-font-sans-family:"Volvo Novum", "Helvetica Neue", "Helvetica", "Noto Sans", "Segoe UI", "Arial", sans-serif;--v-font-broad-family:"Volvo Broad", "Arial Black", sans-serif;--v-font-mono-family:monospace;--v-font-regular-weight:300;--v-font-emphasis-weight:500;--v-font-24-size:1.5rem;--v-font-24-lineheight:1.334;--v-font-24:var(--v-font-regular-weight) var(--v-font-24-size) / var(--v-font-24-lineheight) var(--v-font-sans-family);--v-font-20-size:1.25rem;--v-font-20-lineheight:1.4;--v-font-20:var(--v-font-regular-weight) var(--v-font-20-size) / var(--v-font-20-lineheight) var(--v-font-sans-family);--v-font-16-size:1rem;--v-font-16-lineheight:1.5;--v-font-16:var(--v-font-regular-weight) var(--v-font-16-size) / var(--v-font-16-lineheight) var(--v-font-sans-family);--v-font-14-size:.875rem;--v-font-14-lineheight:1.57;--v-font-14:var(--v-font-regular-weight) var(--v-font-14-size) / var(--v-font-14-lineheight) var(--v-font-sans-family);--v-font-12-size:.75rem;--v-font-12-lineheight:1.67;--v-font-12:var(--v-font-regular-weight) var(--v-font-12-size) / var(--v-font-12-lineheight) var(--v-font-sans-family);--_v942f76:calc(.31rem + 2ex);--v-font-heading-1-weight:var(--v-font-emphasis-weight);--v-font-heading-1-lineheight:var(--_v942f76);--v-font-heading-1-size-min:2rem;--v-font-heading-1-size-max:2.5rem;--v-font-heading-1-size:clamp(var(--v-font-heading-1-size-min), 1vw + 1.7rem, var(--v-font-heading-1-size-max));--v-font-heading-1:var(--v-font-heading-1-weight) var(--v-font-heading-1-size) / var(--v-font-heading-1-lineheight) var(--v-font-sans-family);--v-font-heading-2-weight:var(--v-font-emphasis-weight);--v-font-heading-2-lineheight:var(--_v942f76);--v-font-heading-2-size-min:1.5rem;--v-font-heading-2-size-max:2rem;--v-font-heading-2-size:clamp(var(--v-font-heading-2-size-min), 1vw + 1.2rem, var(--v-font-heading-2-size-max));--v-font-heading-2:var(--v-font-heading-2-weight) var(--v-font-heading-2-size) / var(--v-font-heading-2-lineheight) var(--v-font-sans-family);--v-font-heading-3-weight:var(--v-font-regular-weight);--v-font-heading-3-lineheight:var(--_v942f76);--v-font-heading-3-size-min:1.5rem;--v-font-heading-3-size-max:2rem;--v-font-heading-3-size:clamp(var(--v-font-heading-3-size-min), 1vw + 1.2rem, var(--v-font-heading-3-size-max));--v-font-heading-3:var(--v-font-heading-3-weight) var(--v-font-heading-3-size) / var(--v-font-heading-3-lineheight) var(--v-font-sans-family);--v-font-statement-1-weight:var(--v-font-emphasis-weight);--v-font-statement-1-lineheight:var(--_v942f76);--v-font-statement-1-size-min:4rem;--v-font-statement-1-size-max:6rem;--v-font-statement-1-size:clamp(var(--v-font-statement-1-size-min), 4vw + 2.8rem, var(--v-font-statement-1-size-max));--v-font-statement-1:var(--v-font-statement-1-weight) var(--v-font-statement-1-size) / var(--v-font-statement-1-lineheight) var(--v-font-sans-family);--v-font-statement-2-weight:var(--v-font-emphasis-weight);--v-font-statement-2-lineheight:var(--_v942f76);--v-font-statement-2-size-min:3.5rem;--v-font-statement-2-size-max:4.5rem;--v-font-statement-2-size:clamp(var(--v-font-statement-2-size-min), 2vw + 2.9rem, var(--v-font-statement-2-size-max));--v-font-statement-2:var(--v-font-statement-2-weight) var(--v-font-statement-2-size) / var(--v-font-statement-2-lineheight) var(--v-font-sans-family);--v-font-statement-3-weight:var(--v-font-emphasis-weight);--v-font-statement-3-lineheight:var(--_v942f76);--v-font-statement-3-size-min:3rem;--v-font-statement-3-size-max:3.5rem;--v-font-statement-3-size:clamp(var(--v-font-statement-3-size-min), 1vw + 2.7rem, var(--v-font-statement-3-size-max));--v-font-statement-3:var(--v-font-statement-3-weight) var(--v-font-statement-3-size) / var(--v-font-statement-3-lineheight) var(--v-font-sans-family);--v-font-statement-signature-weight:var(--v-font-emphasis-weight);--v-font-statement-signature-lineheight:1;--v-font-statement-signature-size-min:2.5rem;--v-font-statement-signature-size-max:4.5rem;--v-font-statement-signature-size:clamp(var(--v-font-statement-signature-size-min), 4vw + 1.3rem, var(--v-font-statement-signature-size-max));--v-font-statement-signature:var(--v-font-statement-signature-weight) var(--v-font-statement-signature-size) / var(--v-font-statement-signature-lineheight) var(--v-font-broad-family)}:root:is(:lang(az),:lang(vi)),:host(:lang(az,vi)){--v-font-sans-family:"Helvetica Neue", "Helvetica", "Noto Sans", "Segoe UI", "Arial", sans-serif;--v-font-regular-weight:400;--v-font-emphasis-weight:600}:root:is(:lang(ja),:lang(ko),:lang(zh)),:host(:lang(ja,ko,zh)){--v-font-heading-1-size-min:1.8em;--v-font-heading-1-size-max:2.25rem;--v-font-heading-2-size-min:1.35rem;--v-font-heading-2-size-max:1.8rem;--v-font-heading-3-size-min:1.35rem;--v-font-heading-3-size-max:1.8rem;--v-font-statement-1-size-min:4.05rem;--v-font-statement-1-size-max:5.4rem;--v-font-statement-2-size-min:3.15rem;--v-font-statement-2-size-max:4.05rem;--v-font-statement-3-size-min:2.7rem;--v-font-statement-3-size-max:3.15rem;--v-font-statement-signature-size-min:2.25rem;--v-font-statement-signature-size-max:4.05rem}:host([data-theme=centenary]) :is(.container,.container-xs,.container-sm,.container-md,.container-lg,.container-xl):not(.pagelayout *),[data-theme=centenary] :is(.container,.container-xs,.container-sm,.container-md,.container-lg,.container-xl):not(.pagelayout *){--v-font-heading-1-size-max:3rem;--v-font-heading-2-size-max:2rem;--v-font-heading-3-size-max:2rem;--v-font-statement-1-size-max:8rem;--v-font-statement-2-size-max:6rem;--v-font-statement-3-size-max:4.5rem;--v-font-statement-signature-size-max:4.5rem}:host,:root{--_vff1a2e:url(https://www.volvocars.com/static/shared/icons/v4/checkmark-16.svg)}:host,:root,[data-color-mode=light]{--_v3ba278:url(https://www.volvocars.com/static/shared/icons/v2/navigation-chevrondown-16.svg#light-primary);--_v421db2:url(https://www.volvocars.com/static/shared/icons/v5/chevron-forward-24.svg#light-primary)}[data-color-mode=dark],:host([data-color-mode=dark]){--_v3ba278:url(https://www.volvocars.com/static/shared/icons/v2/navigation-chevrondown-16.svg#dark-primary);--_v421db2:url(https://www.volvocars.com/static/shared/icons/v5/chevron-forward-24.svg#dark-primary)}@media (prefers-color-scheme:dark){[data-color-mode=auto],:host([data-color-mode=auto]){--_v3ba278:url(https://www.volvocars.com/static/shared/icons/v2/navigation-chevrondown-16.svg#dark-primary);--_v421db2:url(https://www.volvocars.com/static/shared/icons/v5/chevron-forward-24.svg#dark-primary)}}:host,:root,:where(.pagelayout){--v-space-l:var(--v-space-xl);--v-space-m:var(--v-space-lg);--v-space-s:var(--v-space-md);--_va4350f:calc(env(safe-area-inset-left,0px) + clamp(1.5rem, .8vw + 1.1rem, 1.75rem));--v-size-grid-column:calc(( var(--v-size-grid-maxwidth) - (var(--v-grid-columns) - 1) * var(--v-space-gutter) ) / var(--v-grid-columns));--v-size-grid-maxwidth:min(81rem, 100vw - var(--_va4350f) * 2);--v-size-pagemax:min(160rem, 100vw);--v-space-pageoffset:max(var(--v-space-pagemargin), calc((100% - var(--v-size-pagemax)) / 2 + var(--v-space-pagemargin)));--v-size-grid-xs:calc((var(--v-size-grid-column) * var(--_vf6c8b5)) + var(--v-space-gutter) * (var(--_vf6c8b5) - 1));--v-size-grid-sm:calc((var(--v-size-grid-column) * var(--_v0bb1b3)) + var(--v-space-gutter) * (var(--_v0bb1b3) - 1));--v-size-grid-md:calc((var(--v-size-grid-column) * var(--_v55f8aa)) + var(--v-space-gutter) * (var(--_v55f8aa) - 1));--v-size-grid-lg:calc((var(--v-size-grid-column) * var(--_vbd64de)) + var(--v-space-gutter) * (var(--_vbd64de) - 1));--v-size-grid-xl:calc((var(--v-size-grid-column) * var(--_v1c7adc)) + var(--v-space-gutter) * (var(--_v1c7adc) - 1));--v-size-grid-max:min((100vw - var(--v-space-pagemargin) * 2) + var(--_vf7c86e,0rem), 160rem);--v-size-contentmax:70ch;--v-radius-sm:.25rem;--v-radius-md:.5rem;--v-radius-lg:1rem;--v-radius-full:9999px;--v-index-spinner:30;--v-index-overlay:20;--v-index-navigation:10;--v-index-default:0;--v-index-deep:-1;--v-grid-columns:8;--_vf6c8b5:6;--_v0bb1b3:8;--_v55f8aa:8;--_vbd64de:8;--_v1c7adc:8}dialog{--v-size-grid-xs:min(21.75rem, 100vw);--v-size-grid-sm:min(29.5rem, 100vw);--v-size-grid-md:min(45rem, 100vw);--v-size-grid-lg:min(45rem, 100vw);--v-size-grid-xl:min(81rem, 100vw)}@media (width>=30rem){:root,:host,:where(.pagelayout){--v-grid-columns:12;--_vf6c8b5:6;--_v0bb1b3:8;--_v55f8aa:10;--_vbd64de:10;--_v1c7adc:12}}@media (width>=64rem){:root,:host,:where(.pagelayout){--_vf6c8b5:4;--_v0bb1b3:6;--_v55f8aa:8}dialog{--v-size-grid-xs:min(26rem, 100vw);--v-size-grid-sm:min(39.75rem, 100vw);--v-size-grid-md:min(53.5rem, 100vw);--v-size-grid-lg:min(67.25rem, 100vw)}}:root,:host,[dir=ltr]{--_v386612:1}[dir=rtl]{--_v386612:-1}:host(:not([data-theme=centenary])),:root:not([data-theme=centenary]){--v-space-pagemargin:clamp(var(--_va4350f), 22vw - 16.3rem, 8rem);--v-space-l:clamp(4rem, 4vw + 2.8rem, 6rem);--v-space-m:clamp(3rem, 3vw + 2rem, 4rem);--v-space-s:clamp(2rem, 3vw + 1rem, 3rem);--v-space-gutter:clamp(1rem, 2.6vw + .3rem, 1.5rem);--v-shape-default:var(--v-radius-sm);--v-shape-emphasis:var(--v-radius-sm)}:host,:root,::backdrop{--_va2d762:.8s;--_v57fab3:.22s;--_vba04ca:.11s;--v-transition-default:var(--_v57fab3) ease;--v-transition-micro:var(--_vba04ca) ease;--v-transition-notable:var(--_va2d762) ease}@media (prefers-reduced-motion:reduce){:host,:root,::backdrop{--_va2d762:50ms;--_v57fab3:25ms;--_vba04ca:12ms}}:host([data-theme=centenary]),[data-theme=centenary],[data-theme=centenary] [data-color-mode]{--v-color-foreground-primary:#000;--v-color-foreground-secondary:#5e5e5e;--v-color-foreground-tertiary:#787878;--v-color-foreground-inverted:#fff;--v-color-foreground-accent-blue:#0b2ded;--v-color-foreground-feedback-green:#04771d;--v-color-foreground-feedback-red:#cd2314;--v-color-foreground-feedback-orange:#ce6700;--v-color-surface-neutral:#000;--v-color-surface-gray:#e3e3e3;--v-color-surface-accent-blue:#0b2ded;--v-color-surface-accent-safety:#fc6408;--v-color-surface-feedback-green:#048220;--v-color-surface-feedback-orange:#ce6700;--v-color-surface-feedback-red:#e52715;--v-color-background-primary:#fff;--v-color-background-secondary:#fafafa;--v-color-background-feedback-green:#d7f9df;--v-color-background-feedback-red:#fce5e3;--v-color-background-feedback-orange:#ffe8d1;--v-color-background-feedback-gray:#f0f0f0;--v-color-always-white:#fff;--v-color-always-black:#000;--v-color-ornament-primary:#0000001f;--v-color-ornament-scrim:#000000a3;--v-color-state-primary-strong:#0003;--v-color-state-primary-medium:#0000001f;--v-color-state-primary-subtle:#0000000a;--v-color-state-inverted-strong:#fff3;--v-color-state-inverted-medium:#ffffff1f;--v-color-state-inverted-subtle:#ffffff0a;--v-color-state-accent-blue-strong:#0b2ded33;--v-color-state-accent-blue-medium:#0b2ded1f;--v-color-state-accent-blue-subtle:#0b2ded0a;--v-color-state-feedback-red-strong:#e5271533;--v-color-state-feedback-red-medium:#e527151f;--v-color-state-feedback-red-subtle:#e527150a;--v-color-state-always-black-strong:#0003;--v-color-state-always-black-medium:#0000001f;--v-color-state-always-black-subtle:#0000000a;--v-color-state-always-white-strong:#fff3;--v-color-state-always-white-medium:#ffffff1f;--v-color-state-always-white-subtle:#ffffff0a}@media (prefers-color-scheme:dark){:host([data-theme=centenary][data-color-mode=auto]),[data-theme=centenary][data-color-mode=auto],[data-theme=centenary] [data-color-mode=auto]{--v-color-foreground-primary:#fff;--v-color-foreground-secondary:#969696;--v-color-foreground-tertiary:#787878;--v-color-foreground-inverted:#000;--v-color-foreground-accent-blue:#3354ff;--v-color-foreground-feedback-green:#07ca31;--v-color-foreground-feedback-red:#ef6658;--v-color-foreground-feedback-orange:#f93;--v-color-surface-neutral:#fff;--v-color-surface-gray:#3b3b3b;--v-color-surface-accent-blue:#3354ff;--v-color-surface-accent-safety:#fc6408;--v-color-surface-feedback-green:#048220;--v-color-surface-feedback-orange:#ce6700;--v-color-surface-feedback-red:#e52715;--v-color-background-primary:#000;--v-color-background-secondary:#171717;--v-color-background-feedback-gray:#242424;--v-color-background-feedback-green:#02310c;--v-color-background-feedback-red:#4a0d07;--v-color-background-feedback-orange:#522900;--v-color-always-white:#fff;--v-color-always-black:#000;--v-color-ornament-primary:#ffffff29;--v-color-ornament-scrim:#000000a3;--v-color-state-primary-strong:#ffffff3d;--v-color-state-primary-medium:#ffffff29;--v-color-state-primary-subtle:#ffffff14;--v-color-state-inverted-strong:#0000003d;--v-color-state-inverted-medium:#00000029;--v-color-state-inverted-subtle:#00000014;--v-color-state-accent-blue-strong:#3354ff3d;--v-color-state-accent-blue-medium:#3354ff29;--v-color-state-accent-blue-subtle:#3354ff14;--v-color-state-feedback-red-strong:#e527153d;--v-color-state-feedback-red-medium:#e5271529;--v-color-state-feedback-red-subtle:#e5271514;--v-color-state-always-black-strong:#0000003d;--v-color-state-always-black-medium:#00000029;--v-color-state-always-black-subtle:#00000014;--v-color-state-always-white-strong:#ffffff3d;--v-color-state-always-white-medium:#ffffff29;--v-color-state-always-white-subtle:#ffffff14}}:host([data-theme=centenary][data-color-mode=dark]),[data-theme=centenary][data-color-mode=dark],[data-theme=centenary] [data-color-mode=dark]{--v-color-foreground-primary:#fff;--v-color-foreground-secondary:#969696;--v-color-foreground-tertiary:#787878;--v-color-foreground-inverted:#000;--v-color-foreground-accent-blue:#3354ff;--v-color-foreground-feedback-green:#07ca31;--v-color-foreground-feedback-red:#ef6658;--v-color-foreground-feedback-orange:#f93;--v-color-surface-neutral:#fff;--v-color-surface-gray:#3b3b3b;--v-color-surface-accent-blue:#3354ff;--v-color-surface-accent-safety:#fc6408;--v-color-surface-feedback-green:#048220;--v-color-surface-feedback-orange:#ce6700;--v-color-surface-feedback-red:#e52715;--v-color-background-primary:#000;--v-color-background-secondary:#171717;--v-color-background-feedback-gray:#242424;--v-color-background-feedback-green:#02310c;--v-color-background-feedback-red:#4a0d07;--v-color-background-feedback-orange:#522900;--v-color-always-white:#fff;--v-color-always-black:#000;--v-color-ornament-primary:#ffffff29;--v-color-ornament-scrim:#000000a3;--v-color-state-primary-strong:#ffffff3d;--v-color-state-primary-medium:#ffffff29;--v-color-state-primary-subtle:#ffffff14;--v-color-state-inverted-strong:#0000003d;--v-color-state-inverted-medium:#00000029;--v-color-state-inverted-subtle:#00000014;--v-color-state-accent-blue-strong:#3354ff3d;--v-color-state-accent-blue-medium:#3354ff29;--v-color-state-accent-blue-subtle:#3354ff14;--v-color-state-feedback-red-strong:#e527153d;--v-color-state-feedback-red-medium:#e5271529;--v-color-state-feedback-red-subtle:#e5271514;--v-color-state-always-black-strong:#0000003d;--v-color-state-always-black-medium:#00000029;--v-color-state-always-black-subtle:#00000014;--v-color-state-always-white-strong:#ffffff3d;--v-color-state-always-white-medium:#ffffff29;--v-color-state-always-white-subtle:#ffffff14}:host([data-theme=centenary]),[data-theme=centenary]{--v-font-12-size:.75rem;--v-font-12-lineheight:1.667;--v-font-14-size:.875rem;--v-font-14-lineheight:1.572;--v-font-16-size:1rem;--v-font-16-lineheight:1.5;--v-font-20-size:1.25rem;--v-font-20-lineheight:1.4;--v-font-24-size:1.5rem;--v-font-24-lineheight:1.334;--v-font-heading-3-weight:400;--v-font-heading-3-size:round(down, clamp(var(--v-font-heading-3-size-min), 1.071vw + 1.179rem, var(--v-font-heading-3-size-max)), 2px);--v-font-heading-3-lineheight:calc(1em + .5rem);--v-font-heading-3-size-min:1.5rem;--v-font-heading-3-size-max:2.25rem;--v-font-heading-2-weight:400;--v-font-heading-2-size:round(down, clamp(var(--v-font-heading-2-size-min), 1.071vw + 1.179rem, var(--v-font-heading-2-size-max)), 2px);--v-font-heading-2-size-min:1.5rem;--v-font-heading-2-size-max:2.25rem;--v-font-heading-2-lineheight:calc(1em + .5rem);--v-font-heading-1-weight:400;--v-font-heading-1-size:round(down, clamp(var(--v-font-heading-1-size-min), 2.143vw + 1.357rem, var(--v-font-heading-1-size-max)), 2px);--v-font-heading-1-lineheight:calc(1em + .5rem);--v-font-heading-1-size-min:2rem;--v-font-heading-1-size-max:3.5rem;--v-font-statement-3-weight:400;--v-font-statement-3-size:round(down, clamp(var(--v-font-statement-3-size-min), 2.143vw + 2.357rem, var(--v-font-statement-3-size-max)), 2px);--v-font-statement-3-size-min:3rem;--v-font-statement-3-size-max:4.5rem;--v-font-statement-3-lineheight:calc(1em + .5rem);--v-font-statement-2-weight:400;--v-font-statement-2-size:round(down, clamp(var(--v-font-statement-2-size-min), 5vw + 2rem, var(--v-font-statement-2-size-max)), 2px);--v-font-statement-2-size-min:3.5rem;--v-font-statement-2-size-max:7rem;--v-font-statement-2-lineheight:calc(1em + .5rem);--v-font-statement-1-weight:400;--v-font-statement-1-size:round(down, clamp(var(--v-font-statement-1-size-min), 6.786vw + 2.464rem, var(--v-font-statement-1-size-max)), 2px);--v-font-statement-1-size-min:4.5rem;--v-font-statement-1-size-max:9.25rem;--v-font-statement-1-lineheight:calc(1em + .5rem);--v-font-statement-signature-weight:400;--v-font-statement-signature-size:round(down, clamp(var(--v-font-statement-signature-size-min), 3.929vw + 1.321rem, var(--v-font-statement-signature-size-max)), 2px);--v-font-statement-signature-size-min:2.5rem;--v-font-statement-signature-size-max:5.25rem;--v-font-statement-signature-lineheight:calc(1em + .5rem);--v-font-regular-weight:400;--v-font-emphasis-weight:600;--v-font-sans-family:"Volvo Centum", "Helvetica Neue", "Helvetica", "Noto Sans", "Segoe UI", "Arial", sans-serif;--v-font-broad-family:"Volvo Broad Pro", "Volvo Broad", "Arial Black", sans-serif}:host,:root{--v-space-2:.125rem;--v-space-4:.25rem;--v-space-8:.5rem;--v-space-12:.75rem;--v-space-16:1rem;--v-space-24:1.5rem;--v-space-32:2rem;--v-space-48:3rem;--v-space-64:4rem;--v-space-gridded-element-gap:var(--v-space-2);--v-space-pagemargin:round(clamp(1rem, 4.286vw + -.286rem, 4rem), 2px);--v-space-xs:round(clamp(.5rem, 1.071vw + .179rem, 1.25rem), 2px);--v-space-sm:round(clamp(1rem, 1.429vw + .571rem, 2rem), 2px);--v-space-md:round(clamp(1.5rem, 2.143vw + .857rem, 3rem), 2px);--v-space-lg:round(clamp(2rem, 2.143vw + 1.357rem, 3.5rem), 2px);--v-space-xl:round(clamp(3rem, 2.143vw + 2.357rem, 4.5rem), 2px);--v-space-2xl:round(clamp(4rem, 5.714vw + 2.286rem, 8rem), 2px);--v-space-gutter:round(clamp(1rem, 1.429vw + .571rem, 2rem), 2px);--v-border-width-default:1px;--v-border-width-selected:2px;--v-size-sidebar-narrow:round(clamp(15rem, 11.111vw + 7.889rem, 19rem), 2px);--v-size-sidebar-wide:round(clamp(23rem, 16.667vw + 12.333rem, 29rem), 2px);--v-shape-default:0px;--v-shape-emphasis:9999px}
+:host,:root,[data-color-mode],::backdrop{--_ve73fe1:0;--_v01aeb4:initial;--_v142aa7: ;--_v580f4a:4%;--_v462cee:12%;--_vce294a:20%;--_vd9113b:.32;--_vfb96e0:var(--v-color-surface-neutral)}[data-color-mode=dark],:host([data-color-mode=dark]){--_ve73fe1:1;--_v01aeb4: ;--_v142aa7:initial;--_v580f4a:8%;--_v462cee:16%;--_vce294a:24%;--_vd9113b:.4}@media (prefers-color-scheme:dark){[data-color-mode=auto],:host([data-color-mode=auto]){--_ve73fe1:1;--_v01aeb4: ;--_v142aa7:initial;--_v580f4a:8%;--_v462cee:16%;--_vce294a:24%;--_vd9113b:.4}}:host,:root{--_vff1a2e:url(https://www.volvocars.com/static/shared/icons/v5/checkmark-16.svg)}:host,:root,[data-color-mode=light]{--_v3ba278:url(https://www.volvocars.com/static/shared/icons/v5/navigation-chevrondown-16.svg#light-primary);--_v421db2:url(https://www.volvocars.com/static/shared/icons/v5/chevron-forward-24.svg#light-primary)}[data-color-mode=dark],:host([data-color-mode=dark]){--_v3ba278:url(https://www.volvocars.com/static/shared/icons/v5/navigation-chevrondown-16.svg#dark-primary);--_v421db2:url(https://www.volvocars.com/static/shared/icons/v5/chevron-forward-24.svg#dark-primary)}@media (prefers-color-scheme:dark){[data-color-mode=auto],:host([data-color-mode=auto]){--_v3ba278:url(https://www.volvocars.com/static/shared/icons/v5/navigation-chevrondown-16.svg#dark-primary);--_v421db2:url(https://www.volvocars.com/static/shared/icons/v5/chevron-forward-24.svg#dark-primary)}}:host,:root,:where(.pagelayout){--v-space-l:var(--v-space-xl);--v-space-m:var(--v-space-lg);--v-space-s:var(--v-space-md);--_va4350f:calc(env(safe-area-inset-left,0px) + clamp(1.5rem, .8vw + 1.1rem, 1.75rem));--v-size-grid-column:calc(( var(--v-size-grid-maxwidth) - (var(--v-grid-columns) - 1) * var(--v-space-gutter) ) / var(--v-grid-columns));--v-size-grid-maxwidth:min(81rem, 100vw - var(--_va4350f) * 2);--v-size-pagemax:min(160rem, 100vw);--v-space-pageoffset:max(var(--v-space-pagemargin), calc((100% - var(--v-size-pagemax)) / 2 + var(--v-space-pagemargin)));--v-size-grid-xs:calc((var(--v-size-grid-column) * var(--_vf6c8b5)) + var(--v-space-gutter) * (var(--_vf6c8b5) - 1));--v-size-grid-sm:calc((var(--v-size-grid-column) * var(--_v0bb1b3)) + var(--v-space-gutter) * (var(--_v0bb1b3) - 1));--v-size-grid-md:calc((var(--v-size-grid-column) * var(--_v55f8aa)) + var(--v-space-gutter) * (var(--_v55f8aa) - 1));--v-size-grid-lg:calc((var(--v-size-grid-column) * var(--_vbd64de)) + var(--v-space-gutter) * (var(--_vbd64de) - 1));--v-size-grid-xl:calc((var(--v-size-grid-column) * var(--_v1c7adc)) + var(--v-space-gutter) * (var(--_v1c7adc) - 1));--v-size-grid-max:min((100vw - var(--v-space-pagemargin) * 2) + var(--_vf7c86e,0rem), 160rem);--v-size-contentmax:70ch;--v-radius-sm:.25rem;--v-radius-md:.5rem;--v-radius-lg:1rem;--v-radius-full:9999px;--v-index-spinner:30;--v-index-overlay:20;--v-index-navigation:10;--v-index-default:0;--v-index-deep:-1;--v-grid-columns:8;--_vf6c8b5:6;--_v0bb1b3:8;--_v55f8aa:8;--_vbd64de:8;--_v1c7adc:8}dialog{--v-size-grid-xs:min(21.75rem, 100vw);--v-size-grid-sm:min(29.5rem, 100vw);--v-size-grid-md:min(45rem, 100vw);--v-size-grid-lg:min(45rem, 100vw);--v-size-grid-xl:min(81rem, 100vw)}@media (width>=30rem){:root,:host,:where(.pagelayout){--v-grid-columns:12;--_vf6c8b5:6;--_v0bb1b3:8;--_v55f8aa:10;--_vbd64de:10;--_v1c7adc:12}}@media (width>=64rem){:root,:host,:where(.pagelayout){--_vf6c8b5:4;--_v0bb1b3:6;--_v55f8aa:8}dialog{--v-size-grid-xs:min(26rem, 100vw);--v-size-grid-sm:min(39.75rem, 100vw);--v-size-grid-md:min(53.5rem, 100vw);--v-size-grid-lg:min(67.25rem, 100vw)}}:root,:host,[dir=ltr]{--_v386612:1}[dir=rtl]{--_v386612:-1}:is(:root,:host) :is(.container,.container-xs,.container-sm,.container-md,.container-lg,.container-xl):not(.pagelayout *){--v-font-heading-1-size-max:3rem;--v-font-heading-2-size-max:2rem;--v-font-heading-3-size-max:2rem;--v-font-statement-1-size-max:8rem;--v-font-statement-2-size-max:6rem;--v-font-statement-3-size-max:4.5rem;--v-font-statement-signature-size-max:4.5rem}:host,:root,::backdrop{--_va2d762:.8s;--_v57fab3:.22s;--_vba04ca:.11s;--v-transition-default:var(--_v57fab3) ease;--v-transition-micro:var(--_vba04ca) ease;--v-transition-notable:var(--_va2d762) ease}@media (prefers-reduced-motion:reduce){:host,:root,::backdrop{--_va2d762:50ms;--_v57fab3:25ms;--_vba04ca:12ms}}:host,:root,[data-color-mode]{--v-color-foreground-primary:#000;--v-color-foreground-secondary:#5e5e5e;--v-color-foreground-tertiary:#787878;--v-color-foreground-inverted:#fff;--v-color-foreground-accent-blue:#0b2ded;--v-color-foreground-feedback-green:#04771d;--v-color-foreground-feedback-red:#cd2314;--v-color-foreground-feedback-orange:#ce6700;--v-color-surface-neutral:#000;--v-color-surface-gray:#e3e3e3;--v-color-surface-accent-blue:#0b2ded;--v-color-surface-accent-safety:#fc6408;--v-color-surface-feedback-green:#048220;--v-color-surface-feedback-orange:#ce6700;--v-color-surface-feedback-red:#e52715;--v-color-background-primary:#fff;--v-color-background-secondary:#fafafa;--v-color-background-feedback-green:#d7f9df;--v-color-background-feedback-red:#fce5e3;--v-color-background-feedback-orange:#ffe8d1;--v-color-background-feedback-gray:#f0f0f0;--v-color-always-white:#fff;--v-color-always-black:#000;--v-color-ornament-primary:#0000001f;--v-color-ornament-scrim:#171717a3;--v-color-state-primary-strong:#0003;--v-color-state-primary-medium:#0000001f;--v-color-state-primary-subtle:#0000000a;--v-color-state-inverted-strong:#fff3;--v-color-state-inverted-medium:#ffffff1f;--v-color-state-inverted-subtle:#ffffff0a;--v-color-state-accent-blue-strong:#0b2ded33;--v-color-state-accent-blue-medium:#0b2ded1f;--v-color-state-accent-blue-subtle:#0b2ded0a;--v-color-state-feedback-red-strong:#e5271533;--v-color-state-feedback-red-medium:#e527151f;--v-color-state-feedback-red-subtle:#e527150a;--v-color-state-always-black-strong:#0003;--v-color-state-always-black-medium:#0000001f;--v-color-state-always-black-subtle:#0000000a;--v-color-state-always-white-strong:#fff3;--v-color-state-always-white-medium:#ffffff1f;--v-color-state-always-white-subtle:#ffffff0a}@media (prefers-color-scheme:dark){:host([data-color-mode=auto]),[data-color-mode=auto]{--v-color-foreground-primary:#fff;--v-color-foreground-secondary:#969696;--v-color-foreground-tertiary:#787878;--v-color-foreground-inverted:#000;--v-color-foreground-accent-blue:#3354ff;--v-color-foreground-feedback-green:#07ca31;--v-color-foreground-feedback-red:#ef6658;--v-color-foreground-feedback-orange:#f93;--v-color-surface-neutral:#fff;--v-color-surface-gray:#3b3b3b;--v-color-surface-accent-blue:#3354ff;--v-color-surface-accent-safety:#fc6408;--v-color-surface-feedback-green:#048220;--v-color-surface-feedback-orange:#ce6700;--v-color-surface-feedback-red:#e52715;--v-color-background-primary:#000;--v-color-background-secondary:#171717;--v-color-background-feedback-gray:#242424;--v-color-background-feedback-green:#02310c;--v-color-background-feedback-red:#4a0d07;--v-color-background-feedback-orange:#522900;--v-color-always-white:#fff;--v-color-always-black:#000;--v-color-ornament-primary:#ffffff29;--v-color-ornament-scrim:#171717a3;--v-color-state-primary-strong:#ffffff3d;--v-color-state-primary-medium:#ffffff29;--v-color-state-primary-subtle:#ffffff14;--v-color-state-inverted-strong:#0000003d;--v-color-state-inverted-medium:#00000029;--v-color-state-inverted-subtle:#00000014;--v-color-state-accent-blue-strong:#3354ff3d;--v-color-state-accent-blue-medium:#3354ff29;--v-color-state-accent-blue-subtle:#3354ff14;--v-color-state-feedback-red-strong:#e527153d;--v-color-state-feedback-red-medium:#e5271529;--v-color-state-feedback-red-subtle:#e5271514;--v-color-state-always-black-strong:#0000003d;--v-color-state-always-black-medium:#00000029;--v-color-state-always-black-subtle:#00000014;--v-color-state-always-white-strong:#ffffff3d;--v-color-state-always-white-medium:#ffffff29;--v-color-state-always-white-subtle:#ffffff14}}:host([data-color-mode=dark]),[data-color-mode=dark]{--v-color-foreground-primary:#fff;--v-color-foreground-secondary:#969696;--v-color-foreground-tertiary:#787878;--v-color-foreground-inverted:#000;--v-color-foreground-accent-blue:#3354ff;--v-color-foreground-feedback-green:#07ca31;--v-color-foreground-feedback-red:#ef6658;--v-color-foreground-feedback-orange:#f93;--v-color-surface-neutral:#fff;--v-color-surface-gray:#3b3b3b;--v-color-surface-accent-blue:#3354ff;--v-color-surface-accent-safety:#fc6408;--v-color-surface-feedback-green:#048220;--v-color-surface-feedback-orange:#ce6700;--v-color-surface-feedback-red:#e52715;--v-color-background-primary:#000;--v-color-background-secondary:#171717;--v-color-background-feedback-gray:#242424;--v-color-background-feedback-green:#02310c;--v-color-background-feedback-red:#4a0d07;--v-color-background-feedback-orange:#522900;--v-color-always-white:#fff;--v-color-always-black:#000;--v-color-ornament-primary:#ffffff29;--v-color-ornament-scrim:#171717a3;--v-color-state-primary-strong:#ffffff3d;--v-color-state-primary-medium:#ffffff29;--v-color-state-primary-subtle:#ffffff14;--v-color-state-inverted-strong:#0000003d;--v-color-state-inverted-medium:#00000029;--v-color-state-inverted-subtle:#00000014;--v-color-state-accent-blue-strong:#3354ff3d;--v-color-state-accent-blue-medium:#3354ff29;--v-color-state-accent-blue-subtle:#3354ff14;--v-color-state-feedback-red-strong:#e527153d;--v-color-state-feedback-red-medium:#e5271529;--v-color-state-feedback-red-subtle:#e5271514;--v-color-state-always-black-strong:#0000003d;--v-color-state-always-black-medium:#00000029;--v-color-state-always-black-subtle:#00000014;--v-color-state-always-white-strong:#ffffff3d;--v-color-state-always-white-medium:#ffffff29;--v-color-state-always-white-subtle:#ffffff14}:host,:root{--v-font-12-size:.75rem;--v-font-12-lineheight:1.667;--v-font-14-size:.875rem;--v-font-14-lineheight:1.572;--v-font-16-size:1rem;--v-font-16-lineheight:1.5;--v-font-20-size:1.25rem;--v-font-20-lineheight:1.4;--v-font-24-size:1.5rem;--v-font-24-lineheight:1.334;--v-font-heading-3-weight:400;--v-font-heading-3-size:round(down, clamp(var(--v-font-heading-3-size-min), 1.071vw + 1.179rem, var(--v-font-heading-3-size-max)), 2px);--v-font-heading-3-lineheight:calc(1em + .5rem);--v-font-heading-3-size-min:1.5rem;--v-font-heading-3-size-max:2.25rem;--v-font-heading-2-weight:400;--v-font-heading-2-size:round(down, clamp(var(--v-font-heading-2-size-min), 1.071vw + 1.179rem, var(--v-font-heading-2-size-max)), 2px);--v-font-heading-2-size-min:1.5rem;--v-font-heading-2-size-max:2.25rem;--v-font-heading-2-lineheight:calc(1em + .5rem);--v-font-heading-1-weight:400;--v-font-heading-1-size:round(down, clamp(var(--v-font-heading-1-size-min), 2.143vw + 1.357rem, var(--v-font-heading-1-size-max)), 2px);--v-font-heading-1-lineheight:calc(1em + .5rem);--v-font-heading-1-size-min:2rem;--v-font-heading-1-size-max:3.5rem;--v-font-statement-3-weight:400;--v-font-statement-3-size:round(down, clamp(var(--v-font-statement-3-size-min), 2.143vw + 2.357rem, var(--v-font-statement-3-size-max)), 2px);--v-font-statement-3-size-min:3rem;--v-font-statement-3-size-max:4.5rem;--v-font-statement-3-lineheight:calc(1em + .5rem);--v-font-statement-2-weight:400;--v-font-statement-2-size:round(down, clamp(var(--v-font-statement-2-size-min), 5vw + 2rem, var(--v-font-statement-2-size-max)), 2px);--v-font-statement-2-size-min:3.5rem;--v-font-statement-2-size-max:7rem;--v-font-statement-2-lineheight:calc(1em + .5rem);--v-font-statement-1-weight:400;--v-font-statement-1-size:round(down, clamp(var(--v-font-statement-1-size-min), 6.786vw + 2.464rem, var(--v-font-statement-1-size-max)), 2px);--v-font-statement-1-size-min:4.5rem;--v-font-statement-1-size-max:9.25rem;--v-font-statement-1-lineheight:calc(1em + .5rem);--v-font-statement-signature-weight:400;--v-font-statement-signature-size:round(down, clamp(var(--v-font-statement-signature-size-min), 3.929vw + 1.321rem, var(--v-font-statement-signature-size-max)), 2px);--v-font-statement-signature-size-min:2.5rem;--v-font-statement-signature-size-max:5.25rem;--v-font-statement-signature-lineheight:calc(1em + .5rem);--v-font-regular-weight:400;--v-font-emphasis-weight:600;--v-font-sans-family:"Volvo Centum", "Helvetica Neue", "Helvetica", "Noto Sans", "Segoe UI", "Arial", sans-serif;--v-font-broad-family:"Volvo Broad Pro", "Volvo Broad", "Arial Black", sans-serif;--v-font-mono-family:monospace;--v-space-2:.125rem;--v-space-4:.25rem;--v-space-8:.5rem;--v-space-12:.75rem;--v-space-16:1rem;--v-space-24:1.5rem;--v-space-32:2rem;--v-space-48:3rem;--v-space-64:4rem;--v-space-gridded-element-gap:var(--v-space-2);--v-space-pagemargin:round(clamp(1rem, 4.286vw + -.286rem, 4rem), 2px);--v-space-xs:round(clamp(.5rem, 1.071vw + .179rem, 1.25rem), 2px);--v-space-sm:round(clamp(1rem, 1.429vw + .571rem, 2rem), 2px);--v-space-md:round(clamp(1.5rem, 2.143vw + .857rem, 3rem), 2px);--v-space-lg:round(clamp(2rem, 2.143vw + 1.357rem, 3.5rem), 2px);--v-space-xl:round(clamp(3rem, 2.143vw + 2.357rem, 4.5rem), 2px);--v-space-2xl:round(clamp(4rem, 5.714vw + 2.286rem, 8rem), 2px);--v-space-gutter:round(clamp(1rem, 1.429vw + .571rem, 2rem), 2px);--v-border-width-default:1px;--v-border-width-selected:2px;--v-size-overlay-narrow:45ch;--v-size-overlay-wide:60ch;--v-size-sidebar-narrow:round(clamp(15rem, 11.111vw + 7.889rem, 19rem), 2px);--v-size-sidebar-wide:round(clamp(23rem, 16.667vw + 12.333rem, 29rem), 2px);--v-shape-default:0px;--v-shape-emphasis:9999px}

package/dist/tokens.d.ts

@@ -1,203 +1,139 @@
 export interface Tokens {
     /**
-     * Always black regardless of colour mode. */ readonly colorAlwaysBlack: 'var(--v-color-always-black)';
+     * --v-space-{l,m,s} will be deprecated. These are fallbacks for the new spacing system */ readonly spaceL: 'var(--v-space-l)';
+    readonly spaceM: 'var(--v-space-m)';
+    readonly spaceS: 'var(--v-space-s)';
     /**
-     * Always white regardless of color mode. */ readonly colorAlwaysWhite: 'var(--v-color-always-white)';
-    /**
-     * Use as a background color to indicate informational messages. */ readonly colorBackgroundFeedbackGray: 'var(--v-color-background-feedback-gray)';
-    /**
-     * Use as a background color to highlight successful and positive states. */ readonly colorBackgroundFeedbackGreen: 'var(--v-color-background-feedback-green)';
-    /**
-     * Use as a background color to highlight warnings, invalid or missing data, and states that require caution. */ readonly colorBackgroundFeedbackOrange: 'var(--v-color-background-feedback-orange)';
-    /**
-     * Use as a background color to highlight errors, invalid data, and destructive states. */ readonly colorBackgroundFeedbackRed: 'var(--v-color-background-feedback-red)';
-    /**
-     * Use as a primary background color. */ readonly colorBackgroundPrimary: 'var(--v-color-background-primary)';
+     * The width of a single grid column. */ readonly sizeGridColumn: 'var(--v-size-grid-column)';
     /**
-     * Use as a secondary background color for elevated sections. */ readonly colorBackgroundSecondary: 'var(--v-color-background-secondary)';
+     * The maximum width of the 12 column grid. */ readonly sizeGridMaxwidth: 'var(--v-size-grid-maxwidth)';
     /**
-     * For use in links and as a border in emphasized selected states. */ readonly colorForegroundAccentBlue: 'var(--v-color-foreground-accent-blue)';
+     * The maximum width a page is allowed to grow to. */ readonly sizePagemax: 'var(--v-size-pagemax)';
     /**
-     * Use as a foreground or border color to highlight successful states and positive actions. */ readonly colorForegroundFeedbackGreen: 'var(--v-color-foreground-feedback-green)';
+     * The inline offset from the viewport edge to the content area,
+     * matching the page layout. On viewports within pagemax this equals
+     * pagemargin; on wider viewports it adds the extra centering space. */ readonly spacePageoffset: 'var(--v-space-pageoffset)';
     /**
-     * Use as a foreground or border color to highlight warnings, invalid or missing data, and actions that require caution. */ readonly colorForegroundFeedbackOrange: 'var(--v-color-foreground-feedback-orange)';
+     * Width based on the colspan of the grid for the current viewport size  (4 / 6 / 4) */ readonly sizeGridXs: 'var(--v-size-grid-xs)';
     /**
-     * Use as a foreground or border color to highlight errors, invalid data, and destructive actions. */ readonly colorForegroundFeedbackRed: 'var(--v-color-foreground-feedback-red)';
+     * Width based on the colspan of the grid for the current viewport size  (6 / 8 / 6) */ readonly sizeGridSm: 'var(--v-size-grid-sm)';
     /**
-     * The inverse of the primary foreground color. For use on filled surfaces. */ readonly colorForegroundInverted: 'var(--v-color-foreground-inverted)';
+     * Width based on the colspan of the grid for the current viewport size  (8 / 10 / 8) */ readonly sizeGridMd: 'var(--v-size-grid-md)';
     /**
-     * Use for primary text, icons and borders. */ readonly colorForegroundPrimary: 'var(--v-color-foreground-primary)';
+     * Width based on the colspan of the grid for the current viewport size  (8 / 10 / 12) */ readonly sizeGridLg: 'var(--v-size-grid-lg)';
     /**
-     * Use for secondary text, icons and borders. */ readonly colorForegroundSecondary: 'var(--v-color-foreground-secondary)';
+     * Width based on the colspan of the grid for the current viewport size  (8 / 12 / 12) */ readonly sizeGridXl: 'var(--v-size-grid-xl)';
     /**
-     * The lightest possible foreground color acceptable for UI fills. Should not be used for body text. */ readonly colorForegroundTertiary: 'var(--v-color-foreground-tertiary)';
+     * Width based on the maximum extent of a `max` container */ readonly sizeGridMax: 'var(--v-size-grid-max)';
     /**
-     * Use for strokes or dividers to visually group or separate elements. */ readonly colorOrnamentPrimary: 'var(--v-color-ornament-primary)';
+     * The maximum width a block of content should be allowed to grow to while maintaining readability
+     * https://baymard.com/blog/line-length-readability */ readonly sizeContentmax: 'var(--v-size-contentmax)';
+    readonly radiusSm: 'var(--v-radius-sm)';
+    readonly radiusMd: 'var(--v-radius-md)';
+    readonly radiusLg: 'var(--v-radius-lg)';
+    readonly radiusFull: 'var(--v-radius-full)';
+    readonly indexSpinner: 'var(--v-index-spinner)';
+    readonly indexOverlay: 'var(--v-index-overlay)';
+    readonly indexNavigation: 'var(--v-index-navigation)';
+    readonly indexDefault: 'var(--v-index-default)';
+    readonly indexDeep: 'var(--v-index-deep)';
     /**
-     * Used as a backdrop that usually sits behind a Side sheet or Dialog component. */ readonly colorOrnamentScrim: 'var(--v-color-ornament-scrim)';
+     * The total number of grid columns at the current breakpoint. */ readonly gridColumns: 'var(--v-grid-columns)';
+    readonly fontHeading1SizeMax: 'var(--v-font-heading-1-size-max)';
+    readonly fontHeading2SizeMax: 'var(--v-font-heading-2-size-max)';
+    readonly fontHeading3SizeMax: 'var(--v-font-heading-3-size-max)';
+    readonly fontStatement1SizeMax: 'var(--v-font-statement-1-size-max)';
+    readonly fontStatement2SizeMax: 'var(--v-font-statement-2-size-max)';
+    readonly fontStatement3SizeMax: 'var(--v-font-statement-3-size-max)';
+    readonly fontStatementSignatureSizeMax: 'var(--v-font-statement-signature-size-max)';
+    readonly transitionDefault: 'var(--v-transition-default)';
+    readonly transitionMicro: 'var(--v-transition-micro)';
+    readonly transitionNotable: 'var(--v-transition-notable)';
+    readonly colorForegroundPrimary: 'var(--v-color-foreground-primary)';
     /**
-     * Use for state layers with foreground/accent/blue. */ readonly colorStateAccentBlueMedium: 'var(--v-color-state-accent-blue-medium)';
+     * Use for primary text, icons and borders. */ readonly colorForegroundSecondary: 'var(--v-color-foreground-secondary)';
     /**
-     * Use for state layers with foreground/accent/blue. */ readonly colorStateAccentBlueStrong: 'var(--v-color-state-accent-blue-strong)';
+     * Use for secondary text, icons and borders. */ readonly colorForegroundTertiary: 'var(--v-color-foreground-tertiary)';
     /**
-     * Use for state layers with foreground/accent/blue. */ readonly colorStateAccentBlueSubtle: 'var(--v-color-state-accent-blue-subtle)';
+     * The lightest possible foreground color acceptable for UI fills. Should not be used for body text. */ readonly colorForegroundInverted: 'var(--v-color-foreground-inverted)';
     /**
-     * Use for state layers with an always/black foreground color. */ readonly colorStateAlwaysBlackMedium: 'var(--v-color-state-always-black-medium)';
+     * The inverse of the primary foreground color. For use on filled surfaces. */ readonly colorForegroundAccentBlue: 'var(--v-color-foreground-accent-blue)';
     /**
-     * Use for state layers with an always/black foreground color. */ readonly colorStateAlwaysBlackStrong: 'var(--v-color-state-always-black-strong)';
+     * For emphasized selection borders and graphic accents (icons, illustrations). */ readonly colorForegroundFeedbackGreen: 'var(--v-color-foreground-feedback-green)';
     /**
-     * Use for state layers with an always/black foreground color. */ readonly colorStateAlwaysBlackSubtle: 'var(--v-color-state-always-black-subtle)';
+     * Use as a foreground or border color to highlight successful states and positive actions. */ readonly colorForegroundFeedbackRed: 'var(--v-color-foreground-feedback-red)';
     /**
-     * Use for state layers with an always/white foreground color. */ readonly colorStateAlwaysWhiteMedium: 'var(--v-color-state-always-white-medium)';
+     * Use as a foreground or border color to highlight errors, invalid data, and destructive actions. */ readonly colorForegroundFeedbackOrange: 'var(--v-color-foreground-feedback-orange)';
     /**
-     * Use for state layers with an always/white foreground color. */ readonly colorStateAlwaysWhiteStrong: 'var(--v-color-state-always-white-strong)';
+     * Use as a foreground or border color to highlight warnings, invalid or missing data, and actions that require caution. */ readonly colorSurfaceNeutral: 'var(--v-color-surface-neutral)';
     /**
-     * Use for state layers with an always/white foreground color. */ readonly colorStateAlwaysWhiteSubtle: 'var(--v-color-state-always-white-subtle)';
+     * Used as a surface fill for UI elements like buttons and form controls. Combine with Foreground / Inverted foreground color. */ readonly colorSurfaceGray: 'var(--v-color-surface-gray)';
     /**
-     * Use for state layers with foreground/feedback/red. */ readonly colorStateFeedbackRedMedium: 'var(--v-color-state-feedback-red-medium)';
+     * Used as surface fill. */ readonly colorSurfaceAccentBlue: 'var(--v-color-surface-accent-blue)';
     /**
-     * Use for state layers with foreground/feedback/red. */ readonly colorStateFeedbackRedStrong: 'var(--v-color-state-feedback-red-strong)';
+     * Used as an emphasized surface fill for UI elements like buttons and form controls. */ readonly colorSurfaceAccentSafety: 'var(--v-color-surface-accent-safety)';
     /**
-     * Use for state layers with foreground/feedback/red. */ readonly colorStateFeedbackRedSubtle: 'var(--v-color-state-feedback-red-subtle)';
+     * Used as an emphasized surface fill for UI elements like buttons and form controls. */ readonly colorSurfaceFeedbackGreen: 'var(--v-color-surface-feedback-green)';
     /**
-     * Use for state layers with foreground/inverted. */ readonly colorStateInvertedMedium: 'var(--v-color-state-inverted-medium)';
+     * Used as a surface fill for UI elements like buttons and form controls to signify positive actions. Combine with Always White foreground color. */ readonly colorSurfaceFeedbackOrange: 'var(--v-color-surface-feedback-orange)';
     /**
-     * Use for state layers with foreground/inverted. */ readonly colorStateInvertedStrong: 'var(--v-color-state-inverted-strong)';
+     * [Deprecated] */ readonly colorSurfaceFeedbackRed: 'var(--v-color-surface-feedback-red)';
     /**
-     * Use for state layers with foreground/inverted. */ readonly colorStateInvertedSubtle: 'var(--v-color-state-inverted-subtle)';
+     * Used as a surface fill for UI elements like buttons and form controls to signify destructive actions. Combine with Always White foreground color. */ readonly colorBackgroundPrimary: 'var(--v-color-background-primary)';
     /**
-     * Use for state layers with foreground/primary. */ readonly colorStatePrimaryMedium: 'var(--v-color-state-primary-medium)';
+     * Use as a primary background color. */ readonly colorBackgroundSecondary: 'var(--v-color-background-secondary)';
     /**
-     * Use for state layers with foreground/primary. */ readonly colorStatePrimaryStrong: 'var(--v-color-state-primary-strong)';
+     * Use as a background color to highlight warnings, invalid or missing data, and states that require caution. */ readonly colorBackgroundFeedbackGray: 'var(--v-color-background-feedback-gray)';
     /**
-     * Use for state layers with foreground/primary. */ readonly colorStatePrimarySubtle: 'var(--v-color-state-primary-subtle)';
+     * Use as a secondary background color for elevated sections. */ readonly colorBackgroundFeedbackGreen: 'var(--v-color-background-feedback-green)';
     /**
-     * Used as an emphasized surface fill for UI elements like buttons and form controls. */ readonly colorSurfaceAccentBlue: 'var(--v-color-surface-accent-blue)';
+     * Use as a background color to highlight successful and positive states. */ readonly colorBackgroundFeedbackRed: 'var(--v-color-background-feedback-red)';
     /**
-     * Used as a surface fill for UI elements like buttons and form controls to signify positive actions. Combine with Always White foreground color. */ readonly colorSurfaceFeedbackGreen: 'var(--v-color-surface-feedback-green)';
+     * Use as a background color to highlight errors, invalid data, and destructive states. */ readonly colorBackgroundFeedbackOrange: 'var(--v-color-background-feedback-orange)';
     /**
-     * [Deprecated] */ readonly colorSurfaceFeedbackOrange: 'var(--v-color-surface-feedback-orange)';
+     * Use as a background color to indicate informational messages. */ readonly colorAlwaysWhite: 'var(--v-color-always-white)';
     /**
-     * Used as a surface fill for UI elements like buttons and form controls to signify destructive actions. Combine with Always White foreground color. */ readonly colorSurfaceFeedbackRed: 'var(--v-color-surface-feedback-red)';
+     * Always white regardless of color mode. */ readonly colorAlwaysBlack: 'var(--v-color-always-black)';
     /**
-     * Used as a surface fill for UI elements like buttons and form controls. Combine with Foreground / Inverted foreground color. */ readonly colorSurfaceNeutral: 'var(--v-color-surface-neutral)';
-    readonly fontSansFamily: 'var(--v-font-sans-family)';
-    readonly fontBroadFamily: 'var(--v-font-broad-family)';
-    readonly fontMonoFamily: 'var(--v-font-mono-family)';
-    readonly fontRegularWeight: 'var(--v-font-regular-weight)';
-    readonly fontEmphasisWeight: 'var(--v-font-emphasis-weight)';
-    readonly font24Size: 'var(--v-font-24-size)';
-    readonly font24Lineheight: 'var(--v-font-24-lineheight)';
-    readonly font24: 'var(--v-font-24)';
-    readonly font20Size: 'var(--v-font-20-size)';
-    readonly font20Lineheight: 'var(--v-font-20-lineheight)';
-    readonly font20: 'var(--v-font-20)';
-    readonly font16Size: 'var(--v-font-16-size)';
-    readonly font16Lineheight: 'var(--v-font-16-lineheight)';
-    readonly font16: 'var(--v-font-16)';
-    readonly font14Size: 'var(--v-font-14-size)';
-    readonly font14Lineheight: 'var(--v-font-14-lineheight)';
-    readonly font14: 'var(--v-font-14)';
-    readonly font12Size: 'var(--v-font-12-size)';
-    readonly font12Lineheight: 'var(--v-font-12-lineheight)';
-    readonly font12: 'var(--v-font-12)';
-    readonly fontHeading1Weight: 'var(--v-font-heading-1-weight)';
-    readonly fontHeading1Lineheight: 'var(--v-font-heading-1-lineheight)';
-    readonly fontHeading1SizeMin: 'var(--v-font-heading-1-size-min)';
-    readonly fontHeading1SizeMax: 'var(--v-font-heading-1-size-max)';
-    readonly fontHeading1Size: 'var(--v-font-heading-1-size)';
-    readonly fontHeading1: 'var(--v-font-heading-1)';
-    readonly fontHeading2Weight: 'var(--v-font-heading-2-weight)';
-    readonly fontHeading2Lineheight: 'var(--v-font-heading-2-lineheight)';
-    readonly fontHeading2SizeMin: 'var(--v-font-heading-2-size-min)';
-    readonly fontHeading2SizeMax: 'var(--v-font-heading-2-size-max)';
-    readonly fontHeading2Size: 'var(--v-font-heading-2-size)';
-    readonly fontHeading2: 'var(--v-font-heading-2)';
-    readonly fontHeading3Weight: 'var(--v-font-heading-3-weight)';
-    readonly fontHeading3Lineheight: 'var(--v-font-heading-3-lineheight)';
-    readonly fontHeading3SizeMin: 'var(--v-font-heading-3-size-min)';
-    readonly fontHeading3SizeMax: 'var(--v-font-heading-3-size-max)';
-    readonly fontHeading3Size: 'var(--v-font-heading-3-size)';
-    readonly fontHeading3: 'var(--v-font-heading-3)';
-    readonly fontStatement1Weight: 'var(--v-font-statement-1-weight)';
-    readonly fontStatement1Lineheight: 'var(--v-font-statement-1-lineheight)';
-    readonly fontStatement1SizeMin: 'var(--v-font-statement-1-size-min)';
-    readonly fontStatement1SizeMax: 'var(--v-font-statement-1-size-max)';
-    readonly fontStatement1Size: 'var(--v-font-statement-1-size)';
-    readonly fontStatement1: 'var(--v-font-statement-1)';
-    readonly fontStatement2Weight: 'var(--v-font-statement-2-weight)';
-    readonly fontStatement2Lineheight: 'var(--v-font-statement-2-lineheight)';
-    readonly fontStatement2SizeMin: 'var(--v-font-statement-2-size-min)';
-    readonly fontStatement2SizeMax: 'var(--v-font-statement-2-size-max)';
-    readonly fontStatement2Size: 'var(--v-font-statement-2-size)';
-    readonly fontStatement2: 'var(--v-font-statement-2)';
-    readonly fontStatement3Weight: 'var(--v-font-statement-3-weight)';
-    readonly fontStatement3Lineheight: 'var(--v-font-statement-3-lineheight)';
-    readonly fontStatement3SizeMin: 'var(--v-font-statement-3-size-min)';
-    readonly fontStatement3SizeMax: 'var(--v-font-statement-3-size-max)';
-    readonly fontStatement3Size: 'var(--v-font-statement-3-size)';
-    readonly fontStatement3: 'var(--v-font-statement-3)';
-    readonly fontStatementSignatureWeight: 'var(--v-font-statement-signature-weight)';
-    readonly fontStatementSignatureLineheight: 'var(--v-font-statement-signature-lineheight)';
-    readonly fontStatementSignatureSizeMin: 'var(--v-font-statement-signature-size-min)';
-    readonly fontStatementSignatureSizeMax: 'var(--v-font-statement-signature-size-max)';
-    readonly fontStatementSignatureSize: 'var(--v-font-statement-signature-size)';
-    readonly fontStatementSignature: 'var(--v-font-statement-signature)';
+     * Always black regardless of colour mode. */ readonly colorOrnamentPrimary: 'var(--v-color-ornament-primary)';
     /**
-     * Fluid spacing between 64px-96px. */ readonly spaceL: 'var(--v-space-l)';
+     * Use for strokes or dividers to visually group or separate elements. */ readonly colorOrnamentScrim: 'var(--v-color-ornament-scrim)';
     /**
-     * Fluid spacing between 48px-64px. */ readonly spaceM: 'var(--v-space-m)';
+     * Used as a backdrop that usually sits behind a Side sheet or Dialog component. */ readonly colorStatePrimaryStrong: 'var(--v-color-state-primary-strong)';
     /**
-     * Fluid spacing between 32px-48px. */ readonly spaceS: 'var(--v-space-s)';
+     * Use for state layers with foreground/primary. */ readonly colorStatePrimaryMedium: 'var(--v-color-state-primary-medium)';
     /**
-     * The width of a single grid column. */ readonly sizeGridColumn: 'var(--v-size-grid-column)';
+     * Use for state layers with foreground/primary. */ readonly colorStatePrimarySubtle: 'var(--v-color-state-primary-subtle)';
     /**
-     * The maximum width of the 12 column grid. */ readonly sizeGridMaxwidth: 'var(--v-size-grid-maxwidth)';
+     * Use for state layers with foreground/primary. */ readonly colorStateInvertedStrong: 'var(--v-color-state-inverted-strong)';
     /**
-     * The maximum width a page is allowed to grow to. */ readonly sizePagemax: 'var(--v-size-pagemax)';
+     * Use for state layers with foreground/inverted. */ readonly colorStateInvertedMedium: 'var(--v-color-state-inverted-medium)';
     /**
-     * The inline offset from the viewport edge to the content area,
-     * matching the page layout. On viewports within pagemax this equals
-     * pagemargin; on wider viewports it adds the extra centering space. */ readonly spacePageoffset: 'var(--v-space-pageoffset)';
+     * Use for state layers with foreground/inverted. */ readonly colorStateInvertedSubtle: 'var(--v-color-state-inverted-subtle)';
     /**
-     * Width based on the colspan of the grid for the current viewport size  (4 / 6 / 4) */ readonly sizeGridXs: 'var(--v-size-grid-xs)';
+     * Use for state layers with foreground/inverted. */ readonly colorStateAccentBlueStrong: 'var(--v-color-state-accent-blue-strong)';
     /**
-     * Width based on the colspan of the grid for the current viewport size  (6 / 8 / 6) */ readonly sizeGridSm: 'var(--v-size-grid-sm)';
+     * Use for state layers with foreground/accent/blue. */ readonly colorStateAccentBlueMedium: 'var(--v-color-state-accent-blue-medium)';
     /**
-     * Width based on the colspan of the grid for the current viewport size  (8 / 10 / 8) */ readonly sizeGridMd: 'var(--v-size-grid-md)';
+     * Use for state layers with foreground/accent/blue. */ readonly colorStateAccentBlueSubtle: 'var(--v-color-state-accent-blue-subtle)';
     /**
-     * Width based on the colspan of the grid for the current viewport size  (8 / 10 / 12) */ readonly sizeGridLg: 'var(--v-size-grid-lg)';
+     * Use for state layers with foreground/accent/blue. */ readonly colorStateFeedbackRedStrong: 'var(--v-color-state-feedback-red-strong)';
     /**
-     * Width based on the colspan of the grid for the current viewport size  (8 / 12 / 12) */ readonly sizeGridXl: 'var(--v-size-grid-xl)';
+     * Use for state layers with foreground/feedback/red. */ readonly colorStateFeedbackRedMedium: 'var(--v-color-state-feedback-red-medium)';
     /**
-     * Width based on the maximum extent of a `max` container */ readonly sizeGridMax: 'var(--v-size-grid-max)';
+     * Use for state layers with foreground/feedback/red. */ readonly colorStateFeedbackRedSubtle: 'var(--v-color-state-feedback-red-subtle)';
     /**
-     * The maximum width a block of content should be allowed to grow to while maintaining readability
-     * https://baymard.com/blog/line-length-readability */ readonly sizeContentmax: 'var(--v-size-contentmax)';
-    readonly radiusSm: 'var(--v-radius-sm)';
-    readonly radiusMd: 'var(--v-radius-md)';
-    readonly radiusLg: 'var(--v-radius-lg)';
-    readonly radiusFull: 'var(--v-radius-full)';
-    readonly indexSpinner: 'var(--v-index-spinner)';
-    readonly indexOverlay: 'var(--v-index-overlay)';
-    readonly indexNavigation: 'var(--v-index-navigation)';
-    readonly indexDefault: 'var(--v-index-default)';
-    readonly indexDeep: 'var(--v-index-deep)';
+     * Use for state layers with foreground/feedback/red. */ readonly colorStateAlwaysBlackStrong: 'var(--v-color-state-always-black-strong)';
     /**
-     * The total number of grid columns at the current breakpoint. */ readonly gridColumns: 'var(--v-grid-columns)';
+     * Use for state layers with an always/black foreground color. */ readonly colorStateAlwaysBlackMedium: 'var(--v-color-state-always-black-medium)';
     /**
-     * The fluid outer horizontal margins of the main page container.
-     * 402  - 16px
-     * 1600  - 64px */ readonly spacePagemargin: 'var(--v-space-pagemargin)';
+     * Use for state layers with an always/black foreground color. */ readonly colorStateAlwaysBlackSubtle: 'var(--v-color-state-always-black-subtle)';
     /**
-     * The horizontal gap between grid columns. Fluid between 16px-32px. */ readonly spaceGutter: 'var(--v-space-gutter)';
+     * Use for state layers with an always/black foreground color. */ readonly colorStateAlwaysWhiteStrong: 'var(--v-color-state-always-white-strong)';
     /**
-     * Use as default value for all all non-interactive UI elements. */ readonly shapeDefault: 'var(--v-shape-default)';
+     * Use for state layers with an always/white foreground color. */ readonly colorStateAlwaysWhiteMedium: 'var(--v-color-state-always-white-medium)';
     /**
-     * Use for interactive UI, and elements that need to draw attention and create visual contrast from the rest of the page. */ readonly shapeEmphasis: 'var(--v-shape-emphasis)';
-    readonly transitionDefault: 'var(--v-transition-default)';
-    readonly transitionMicro: 'var(--v-transition-micro)';
-    readonly transitionNotable: 'var(--v-transition-notable)';
+     * Use for state layers with an always/white foreground color. */ readonly colorStateAlwaysWhiteSubtle: 'var(--v-color-state-always-white-subtle)';
     /**
      * Fixed 2px spacing */ readonly space2: 'var(--v-space-2)';
     /**
@@ -218,6 +154,10 @@ export interface Tokens {
      * Fixed 64px spacing */ readonly space64: 'var(--v-space-64)';
     /**
      * Divider between gridded elements. Do not use for text. */ readonly spaceGriddedElementGap: 'var(--v-space-gridded-element-gap)';
+    /**
+     * The fluid outer horizontal margins of the main page container.
+     * 402  - 16px
+     * 1600  - 64px */ readonly spacePagemargin: 'var(--v-space-pagemargin)';
     /**
      * Fluid spacing between 8px-20px. */ readonly spaceXs: 'var(--v-space-xs)';
     /**
@@ -230,14 +170,67 @@ export interface Tokens {
      * Fluid spacing between 48px-72px. */ readonly spaceXl: 'var(--v-space-xl)';
     /**
      * Fluid spacing between 64px-128px. */ readonly space2xl: 'var(--v-space-2xl)';
+    /**
+     * The horizontal gap between grid columns. Fluid between 16px-32px. */ readonly spaceGutter: 'var(--v-space-gutter)';
     /**
      * Use for any UI element that needs a border in the default state. */ readonly borderWidthDefault: 'var(--v-border-width-default)';
     /**
      * Use for any UI element that needs a border in the selected state. */ readonly borderWidthSelected: 'var(--v-border-width-selected)';
+    /**
+     * Used to set the width of small overlays such as small dialogs, toasts */ readonly sizeOverlayNarrow: 'var(--v-size-overlay-narrow)';
+    /**
+     * Used to set the width of large overlays such as sheet, large dialogs */ readonly sizeOverlayWide: 'var(--v-size-overlay-wide)';
     /**
      * Narrow sidebar width is 240 to 304 between lg and xl */ readonly sizeSidebarNarrow: 'var(--v-size-sidebar-narrow)';
     /**
      * Wide sidebar width is 368 to 464 between lg and xl */ readonly sizeSidebarWide: 'var(--v-size-sidebar-wide)';
+    /**
+     * Use as default value for all all non-interactive UI elements. */ readonly shapeDefault: 'var(--v-shape-default)';
+    /**
+     * Use for interactive UI, and elements that need to draw attention and create visual contrast from the rest of the page. */ readonly shapeEmphasis: 'var(--v-shape-emphasis)';
+    readonly font12Size: 'var(--v-font-12-size)';
+    readonly font12Lineheight: 'var(--v-font-12-lineheight)';
+    readonly font14Size: 'var(--v-font-14-size)';
+    readonly font14Lineheight: 'var(--v-font-14-lineheight)';
+    readonly font16Size: 'var(--v-font-16-size)';
+    readonly font16Lineheight: 'var(--v-font-16-lineheight)';
+    readonly font20Size: 'var(--v-font-20-size)';
+    readonly font20Lineheight: 'var(--v-font-20-lineheight)';
+    readonly font24Size: 'var(--v-font-24-size)';
+    readonly font24Lineheight: 'var(--v-font-24-lineheight)';
+    readonly fontHeading3Weight: 'var(--v-font-heading-3-weight)';
+    readonly fontHeading3Size: 'var(--v-font-heading-3-size)';
+    readonly fontHeading3Lineheight: 'var(--v-font-heading-3-lineheight)';
+    readonly fontHeading3SizeMin: 'var(--v-font-heading-3-size-min)';
+    readonly fontHeading2Weight: 'var(--v-font-heading-2-weight)';
+    readonly fontHeading2Size: 'var(--v-font-heading-2-size)';
+    readonly fontHeading2SizeMin: 'var(--v-font-heading-2-size-min)';
+    readonly fontHeading2Lineheight: 'var(--v-font-heading-2-lineheight)';
+    readonly fontHeading1Weight: 'var(--v-font-heading-1-weight)';
+    readonly fontHeading1Size: 'var(--v-font-heading-1-size)';
+    readonly fontHeading1Lineheight: 'var(--v-font-heading-1-lineheight)';
+    readonly fontHeading1SizeMin: 'var(--v-font-heading-1-size-min)';
+    readonly fontStatement3Weight: 'var(--v-font-statement-3-weight)';
+    readonly fontStatement3Size: 'var(--v-font-statement-3-size)';
+    readonly fontStatement3SizeMin: 'var(--v-font-statement-3-size-min)';
+    readonly fontStatement3Lineheight: 'var(--v-font-statement-3-lineheight)';
+    readonly fontStatement2Weight: 'var(--v-font-statement-2-weight)';
+    readonly fontStatement2Size: 'var(--v-font-statement-2-size)';
+    readonly fontStatement2SizeMin: 'var(--v-font-statement-2-size-min)';
+    readonly fontStatement2Lineheight: 'var(--v-font-statement-2-lineheight)';
+    readonly fontStatement1Weight: 'var(--v-font-statement-1-weight)';
+    readonly fontStatement1Size: 'var(--v-font-statement-1-size)';
+    readonly fontStatement1SizeMin: 'var(--v-font-statement-1-size-min)';
+    readonly fontStatement1Lineheight: 'var(--v-font-statement-1-lineheight)';
+    readonly fontStatementSignatureWeight: 'var(--v-font-statement-signature-weight)';
+    readonly fontStatementSignatureSize: 'var(--v-font-statement-signature-size)';
+    readonly fontStatementSignatureSizeMin: 'var(--v-font-statement-signature-size-min)';
+    readonly fontStatementSignatureLineheight: 'var(--v-font-statement-signature-lineheight)';
+    readonly fontRegularWeight: 'var(--v-font-regular-weight)';
+    readonly fontEmphasisWeight: 'var(--v-font-emphasis-weight)';
+    readonly fontSansFamily: 'var(--v-font-sans-family)';
+    readonly fontBroadFamily: 'var(--v-font-broad-family)';
+    readonly fontMonoFamily: 'var(--v-font-mono-family)';
 }
 declare const vtokens: Tokens;
 export default vtokens;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@volvo-cars/css",
   "description": "Volvo Cars shared CSS",
-  "version": "1.53.0",
+  "version": "2.0.0",
   "license": "UNLICENSED",
   "sideEffects": false,
   "type": "module",
@@ -116,7 +116,6 @@
     "types:check": "tsc -b tsconfig.src-check.json tsconfig.tests.json tsconfig.docs.json --verbose",
     "watch:css": "chokidar \"src/**/*.css\" -c 'yarn run build:css'",
     "watch:js": "tsup --watch",
-    "sync:colors": "yarn run css-scripts-sync-colors --core",
     "build:css": "yarn run css-scripts-build-css",
     "build:css-types": "yarn run css-scripts-build-types",
     "spacing": "yarn run css-scripts-spacing --with-additions",
@@ -131,12 +130,12 @@
     "@types/react": "19.2.14",
     "@vcc/css-scripts": "workspace:*",
     "@volvo-cars/browserslist-config": "1.4.8",
-    "@volvo-cars/design-tokens-web": "0.0.28",
+    "@volvo-cars/design-tokens-web": "0.1.1",
     "chokidar-cli": "3.0.0",
     "react": "19.2.6",
     "tsup": "8.5.1",
     "typescript": "6.0.3",
-    "vitest": "4.1.5"
+    "vitest": "4.1.6"
   },
   "engines": {
     "node": ">=14.15.0"

package/dist/chunk-CELME2EF.js

@@ -1,2 +0,0 @@
-import{a as c}from"./chunk-BBIFT7L4.js";var n={"font-face.css":"css/v1/font-face.8324f4d8.css","tokens.css":"css/v1/tokens.435f99f1.css","styles.css":"css/v1/styles.ffb585ca.css","styles_md.css":"css/v1/styles_md.53438709.css","styles_xl.css":"css/v1/styles_xl.dc799dcd.css","styles_hover.css":"css/v1/styles_hover.13f2c48a.css"};var f="https://www.volvocars.com/static/shared/pkg/";function l({fonts:s=!0,tokens:e=!0}={}){return([t])=>t==="font-face.css"?s:t.endsWith("tokens.css")?e:!0}function d(s){let e=s.split("_").pop()?.replace(".css","");return c[e]}export{n as a,f as b,l as c,d};
-//# sourceMappingURL=chunk-CELME2EF.js.map