@volvo-cars/css 0.53.0 → 0.55.0

package/dist/meta.json

@@ -1,4 +1,46 @@
 {
+  "deprecatedClasses": [
+    {
+      "name": "v-label",
+      "replacement": "label"
+    },
+    {
+      "name": "v-input",
+      "replacement": "input"
+    },
+    {
+      "name": "v-input-floating-label",
+      "replacement": "input-floating-label"
+    },
+    {
+      "name": "body-16",
+      "replacement": "font-16"
+    },
+    {
+      "name": "title-20",
+      "replacement": "font-20"
+    },
+    {
+      "name": "title-24",
+      "replacement": "font-24"
+    },
+    {
+      "name": "md:title-20",
+      "replacement": "md:font-20"
+    },
+    {
+      "name": "md:title-24",
+      "replacement": "md:font-24"
+    },
+    {
+      "name": "lg:title-20",
+      "replacement": "lg:font-20"
+    },
+    {
+      "name": "lg:title-24",
+      "replacement": "lg:font-24"
+    }
+  ],
   "classNames": [
     "-m-16",
     "-m-24",
@@ -940,6 +982,9 @@
     "rotate-90",
     "rounded",
     "rounded-full",
+    "rounded-lg",
+    "rounded-md",
+    "rounded-sm",
     "scale-100",
     "scale-110",
     "scale-95",
@@ -1297,13 +1342,7 @@
       "name": "backdrop",
       "prefixes": [],
       "declarations": [
-        "background-color: #000000a3",
-        "z-index: calc(var(--v-index-overlay)  - 1)",
-        "justify-content: center",
-        "align-items: center",
-        "display: flex",
-        "position: fixed",
-        "inset: 0"
+        "background-color: #000000a3"
       ],
       "layer": "volvo.blocks"
     },
@@ -1318,18 +1357,11 @@
         "min-width: max-content",
         "display: inline-flex",
         "position: relative",
-        "opacity: var(--_v-disabled-opacity)",
         "--button-accent-color: var(--v-color-surface-neutral)",
         "--_color: var(--v-color-foreground-inverted)",
         "--_overlay-rate: 0%",
         "color: var(--_color)",
         "background: color-mix(in oklab, var(--button-accent-color), var(--_color) var(--_overlay-rate))",
-        "--button-accent-color: var(--v-color-surface-accent-blue)",
-        "--_color: var(--v-color-always-white)",
-        "--button-accent-color: var(--v-color-surface-feedback-red)",
-        "background: var(--button-accent-color)",
-        "--_overlay-rate: var(--_v-color-mix-strong)",
-        "transform: scale(.95)",
         "border-radius: var(--v-radius-full)",
         "flex-shrink: 0",
         "width: 2.5rem",
@@ -1348,15 +1380,9 @@
         "min-width: max-content",
         "display: inline-flex",
         "position: relative",
-        "opacity: var(--_v-disabled-opacity)",
         "box-shadow: inset 0 0 0 1px var(--button-accent-color)",
-        "color: var(--v-color-foreground-inverted)",
-        "background-color: var(--button-accent-color)",
-        "transform: scale(.95)",
         "--button-accent-color: var(--v-color-foreground-primary)",
         "color: var(--button-accent-color)",
-        "--button-accent-color: var(--v-color-foreground-accent-blue)",
-        "--button-accent-color: var(--v-color-foreground-feedback-red)",
         "border-radius: var(--v-radius-full)",
         "flex-shrink: 0",
         "width: 2.5rem",
@@ -1375,17 +1401,12 @@
         "min-width: max-content",
         "display: inline-flex",
         "position: relative",
-        "opacity: var(--_v-disabled-opacity)",
-        "transform: scale(.95)",
         "--button-accent-color: var(--v-color-foreground-primary)",
         "color: var(--button-accent-color)",
-        "--button-accent-color: var(--v-color-foreground-accent-blue)",
-        "--button-accent-color: var(--v-color-foreground-feedback-red)",
         "border-radius: var(--v-radius-full)",
         "flex-shrink: 0",
         "width: 2.5rem",
-        "height: 2.5rem",
-        "background-color: color-mix(in lab, var(--background-color, var(--v-color-background-primary)), var(--button-accent-color) var(--_v-color-mix-subtle))"
+        "height: 2.5rem"
       ],
       "layer": "volvo.blocks"
     },
@@ -1400,44 +1421,19 @@
         "min-width: max-content",
         "display: inline-flex",
         "position: relative",
-        "opacity: var(--_v-disabled-opacity)",
         "font-size: var(--v-font-16-size)",
         "font-weight: var(--v-font-emphasis-weight)",
         "white-space: nowrap",
         "max-width: 100%",
         "height: 3rem",
         "overflow: hidden",
-        "content: \"\"",
-        "width: 100%",
-        "height: 40px",
-        "position: absolute",
-        "top: 50%",
-        "transform: translateY(-50%)",
-        "font-size: var(--v-font-12-size)",
-        "height: 2rem",
         "--button-accent-color: var(--v-color-surface-neutral)",
         "--_color: var(--v-color-foreground-inverted)",
         "--_overlay-rate: 0%",
         "color: var(--_color)",
         "background: color-mix(in oklab, var(--button-accent-color), var(--_color) var(--_overlay-rate))",
-        "--button-accent-color: var(--v-color-surface-accent-blue)",
-        "--_color: var(--v-color-always-white)",
-        "--button-accent-color: var(--v-color-surface-feedback-red)",
-        "background: var(--button-accent-color)",
-        "--_overlay-rate: var(--_v-color-mix-strong)",
-        "transform: scale(.95)",
         "padding-inline: min(var(--v-space-32), 8vw)",
-        "border-radius: var(--v-radius-4)",
-        "width: 1.5rem",
-        "height: 1.5rem",
-        "padding-inline: var(--v-space-16)",
-        "width: 1rem",
-        "height: 1rem",
-        "flex: 1 0 40%",
-        "flex: 1 0 40cqw",
-        "--stack-gap: var(--v-space-24)",
-        "--stack-gap: var(--v-space-32)",
-        "--stack-gap: var(--v-space-16)"
+        "border-radius: var(--v-radius-sm)"
       ],
       "layer": "volvo.layout"
     },
@@ -1452,41 +1448,17 @@
         "min-width: max-content",
         "display: inline-flex",
         "position: relative",
-        "opacity: var(--_v-disabled-opacity)",
         "font-size: var(--v-font-16-size)",
         "font-weight: var(--v-font-emphasis-weight)",
         "white-space: nowrap",
         "max-width: 100%",
         "height: 3rem",
         "overflow: hidden",
-        "content: \"\"",
-        "width: 100%",
-        "height: 40px",
-        "position: absolute",
-        "top: 50%",
-        "transform: translateY(-50%)",
-        "font-size: var(--v-font-12-size)",
-        "height: 2rem",
         "box-shadow: inset 0 0 0 1px var(--button-accent-color)",
-        "color: var(--v-color-foreground-inverted)",
-        "background-color: var(--button-accent-color)",
-        "transform: scale(.95)",
         "padding-inline: min(var(--v-space-32), 8vw)",
-        "border-radius: var(--v-radius-4)",
-        "width: 1.5rem",
-        "height: 1.5rem",
-        "padding-inline: var(--v-space-16)",
-        "width: 1rem",
-        "height: 1rem",
+        "border-radius: var(--v-radius-sm)",
         "--button-accent-color: var(--v-color-foreground-primary)",
-        "color: var(--button-accent-color)",
-        "--button-accent-color: var(--v-color-foreground-accent-blue)",
-        "--button-accent-color: var(--v-color-foreground-feedback-red)",
-        "flex: 1 0 40%",
-        "flex: 1 0 40cqw",
-        "--stack-gap: var(--v-space-24)",
-        "--stack-gap: var(--v-space-32)",
-        "--stack-gap: var(--v-space-16)"
+        "color: var(--button-accent-color)"
       ],
       "layer": "volvo.layout"
     },
@@ -1501,131 +1473,34 @@
         "min-width: max-content",
         "display: inline-flex",
         "position: relative",
-        "opacity: var(--_v-disabled-opacity)",
         "font-size: var(--v-font-16-size)",
         "font-weight: var(--v-font-emphasis-weight)",
         "white-space: nowrap",
         "max-width: 100%",
         "height: 3rem",
         "overflow: hidden",
-        "content: \"\"",
-        "width: 100%",
-        "height: 40px",
-        "position: absolute",
-        "top: 50%",
-        "transform: translateY(-50%)",
-        "font-size: var(--v-font-12-size)",
-        "height: 2rem",
         "--button-accent-color: var(--v-color-foreground-primary)",
         "color: var(--button-accent-color)",
-        "--button-accent-color: var(--v-color-foreground-accent-blue)",
-        "--button-accent-color: var(--v-color-foreground-feedback-red)",
-        "text-align: start",
-        "--_arrow-icon: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none'%3E%3Cpath fill='%23000' fill-opacity='.96' fill-rule='evenodd' d='m2.728 10 4-4-4-4L4 .729 9.273 6 4 11.273l-1.272-1.272Z' clip-rule='evenodd'/%3E%3C/svg%3E\")",
-        "mask: var(--_arrow-icon)",
-        "transition: rotate var(--_v-transition-speed-default) ease",
-        "rotate: var(--_arrow-rotation)",
-        "flex-shrink: 0",
-        "width: .75em",
-        "height: .75em",
-        "margin-top: .125rem",
-        "mask-size: cover",
-        "width: .5rem",
-        "height: .5rem",
-        "background-color: currentColor",
-        "margin-inline-start: var(--v-space-4)",
-        "margin-inline-end: var(--v-space-4)",
-        "--_rtl-arrow-rotation: var(--_rtl-toggle) 180deg",
-        "--_arrow-rotation: var(--_rtl-arrow-rotation, 0deg)",
-        "--_rtl-arrow-rotation: var(--_rtl-toggle) 0deg",
-        "--_arrow-rotation: var(--_rtl-arrow-rotation, 180deg)",
-        "--_arrow-rotation: 90deg",
-        "--_arrow-rotation: -90deg",
-        "margin-inline-start: var(--v-space-8)",
-        "text-decoration-line: underline",
-        "flex: 1 0 40%",
-        "flex: 1 0 40cqw",
-        "--stack-gap: var(--v-space-24)",
-        "--stack-gap: var(--v-space-16)"
+        "text-align: start"
       ],
       "layer": "volvo.layout"
     },
     {
       "name": "spinner",
       "prefixes": [],
-      "declarations": [
-        "width: 1.5rem",
-        "height: 1.5rem",
-        "position: absolute",
-        "width: 1rem",
-        "height: 1rem",
-        "contain: strict",
-        "appearance: none",
-        "background: none",
-        "border: 2px solid",
-        "border-bottom-color: #0000",
-        "border-radius: 50%",
-        "width: 2.5rem",
-        "height: 2.5rem",
-        "animation: .7s cubic-bezier(.62, .63, 0, .53) infinite rotate",
-        "display: inline-flex",
-        "display: none"
-      ],
+      "declarations": [],
       "layer": "volvo.blocks"
     },
     {
       "name": "icon-sprite",
       "prefixes": [],
-      "declarations": [
-        "margin-inline-start: var(--v-space-8)",
-        "width: var(--_height)",
-        "min-width: var(--_height)",
-        "height: var(--_height)",
-        "min-height: var(--_height)",
-        "vertical-align: middle",
-        "flex-grow: 0",
-        "flex-shrink: 0",
-        "display: inline-block",
-        "--_height: 5rem",
-        "--_height: 4rem",
-        "--_height: 3rem",
-        "--_height: 2.5rem",
-        "--_height: 2rem",
-        "--_height: 1.5rem",
-        "--_height: 1rem",
-        "--_height: .75rem",
-        "--_height: .5rem",
-        "--_y-offset: var(--_dark-toggle) 7",
-        "fill: currentColor",
-        "object-fit: cover",
-        "object-position: 0 calc(var(--_y-offset, 0) * -1 * var(--_height, 0))",
-        "transform: scaleX(-1)"
-      ],
+      "declarations": [],
       "layer": "volvo.blocks"
     },
     {
       "name": "dialog",
       "prefixes": [],
-      "declarations": [
-        "z-index: var(--v-index-overlay)",
-        "padding-block: var(--v-space-48)",
-        "padding-inline: var(--v-space-24)",
-        "margin: auto",
-        "color: var(--v-color-foreground-primary)",
-        "background-color: var(--v-color-background-secondary)",
-        "width: 100%",
-        "max-width: 100%",
-        "height: fit-content",
-        "max-height: calc(100vh + -1 * min(2rem, 20vh))",
-        "margin-bottom: 0",
-        "position: fixed",
-        "inset: 0",
-        "overflow-y: auto",
-        "padding-inline: var(--v-space-48)",
-        "max-width: min(31rem, 100vw - 2rem)",
-        "margin-bottom: auto",
-        "padding-top: 0"
-      ],
+      "declarations": [],
       "layer": "volvo.blocks"
     },
     {
@@ -1638,71 +1513,33 @@
         "align-items: center",
         "display: flex",
         "position: absolute",
-        "inset-inline-end: 0",
-        "outline-offset: -2px"
+        "inset-inline-end: 0"
       ],
       "layer": "volvo.blocks"
     },
     {
       "name": "radio",
       "prefixes": [],
-      "declarations": [
-        "background-color: var(--_input-background-color, var(--v-color-background-primary))",
-        "border-radius: var(--v-radius-4)",
-        "box-shadow: inset 0 0 0 var(--_input-border-size, 1px) var(--_input-border-color, var(--v-color-foreground-secondary))",
-        "transition: box-shadow var(--v-transition-default)",
-        "place-content: center",
-        "width: 1rem",
-        "height: 1rem",
-        "margin-top: .25em",
-        "display: inline-grid",
-        "position: relative",
-        "border-radius: var(--v-radius-full)"
-      ],
+      "declarations": [],
       "layer": "volvo.blocks"
     },
     {
       "name": "checkbox",
       "prefixes": [],
-      "declarations": [
-        "background-color: var(--_input-background-color, var(--v-color-background-primary))",
-        "border-radius: var(--v-radius-4)",
-        "box-shadow: inset 0 0 0 var(--_input-border-size, 1px) var(--_input-border-color, var(--v-color-foreground-secondary))",
-        "transition: box-shadow var(--v-transition-default)",
-        "place-content: center",
-        "width: 1rem",
-        "height: 1rem",
-        "margin-top: .25em",
-        "display: inline-grid",
-        "position: relative"
-      ],
+      "declarations": [],
       "layer": "volvo.blocks"
     },
     {
       "name": "switch",
       "prefixes": [],
-      "declarations": [
-        "--_background-color: var(--_toggle-background)",
-        "--_indicator-color: var(--v-color-always-white)",
-        "appearance: none",
-        "background-color: var(--_background-color)",
-        "border-radius: var(--v-radius-full)",
-        "flex-shrink: 0",
-        "width: 2.5rem",
-        "height: 1.5rem",
-        "padding: .125rem",
-        "transition: background .25s",
-        "display: inline-flex"
-      ],
+      "declarations": [],
       "layer": "volvo.blocks"
     },
     {
       "name": "heading-1",
       "prefixes": [],
       "declarations": [
-        "font: var(--v-font-heading-1)",
-        "--stack-gap: var(--v-space-8)",
-        "--stack-gap: calc(var(--v-space-8)  + 1em)"
+        "font: var(--v-font-heading-1)"
       ],
       "layer": "volvo.layout"
     },
@@ -1710,9 +1547,7 @@
       "name": "heading-2",
       "prefixes": [],
       "declarations": [
-        "font: var(--v-font-heading-2)",
-        "--stack-gap: var(--v-space-8)",
-        "--stack-gap: calc(var(--v-space-8)  + 1em)"
+        "font: var(--v-font-heading-2)"
       ],
       "layer": "volvo.layout"
     },
@@ -1720,72 +1555,20 @@
       "name": "heading-3",
       "prefixes": [],
       "declarations": [
-        "font: var(--v-font-heading-3)",
-        "--stack-gap: var(--v-space-8)",
-        "--stack-gap: calc(var(--v-space-8)  + 1em)",
-        "--stack-gap: var(--v-space-24)"
+        "font: var(--v-font-heading-3)"
       ],
       "layer": "volvo.layout"
     },
     {
       "name": "wordmark",
       "prefixes": [],
-      "declarations": [
-        "width: var(--_height)",
-        "min-width: var(--_height)",
-        "height: var(--_height)",
-        "min-height: var(--_height)",
-        "vertical-align: middle",
-        "flex-grow: 0",
-        "flex-shrink: 0",
-        "display: inline-block",
-        "--_height: 5rem",
-        "--_height: 4rem",
-        "--_height: 3rem",
-        "--_height: 2.5rem",
-        "--_height: 2rem",
-        "--_height: 1.5rem",
-        "--_height: 1rem",
-        "--_height: .75rem",
-        "--_height: .5rem",
-        "width: calc(var(--_height) * 13)",
-        "min-width: calc(var(--_height) * 13)",
-        "object-position: 0 -999px",
-        "mask-size: cover",
-        "mask-repeat: no-repeat",
-        "mask-image: var(--mask-url, var(--icon-url))",
-        "background-color: currentColor"
-      ],
+      "declarations": [],
       "layer": "volvo.blocks"
     },
     {
       "name": "icon-mask",
       "prefixes": [],
-      "declarations": [
-        "width: var(--_height)",
-        "min-width: var(--_height)",
-        "height: var(--_height)",
-        "min-height: var(--_height)",
-        "vertical-align: middle",
-        "flex-grow: 0",
-        "flex-shrink: 0",
-        "display: inline-block",
-        "--_height: 5rem",
-        "--_height: 4rem",
-        "--_height: 3rem",
-        "--_height: 2.5rem",
-        "--_height: 2rem",
-        "--_height: 1.5rem",
-        "--_height: 1rem",
-        "--_height: .75rem",
-        "--_height: .5rem",
-        "object-position: 0 -999px",
-        "mask-size: cover",
-        "mask-repeat: no-repeat",
-        "mask-image: var(--mask-url, var(--icon-url))",
-        "background-color: currentColor",
-        "transform: scaleX(-1)"
-      ],
+      "declarations": [],
       "layer": "volvo.blocks"
     },
     {
@@ -1806,73 +1589,26 @@
     {
       "name": "v-label",
       "prefixes": [],
-      "declarations": [
-        "flex-direction: column",
-        "display: inline-flex",
-        "margin-top: var(--v-space-8)"
-      ],
+      "declarations": [],
       "layer": "volvo.blocks"
     },
     {
       "name": "v-input",
       "prefixes": [],
-      "declarations": [
-        "padding: var(--v-space-16)",
-        "background-color: var(--_input-background-color, var(--v-color-background-primary))",
-        "border-radius: var(--v-radius-4)",
-        "box-shadow: inset 0 0 0 var(--_input-border-size, 1px) var(--_input-border-color, var(--v-color-ornament-primary))",
-        "transition: box-shadow var(--v-transition-default)",
-        "outline: none",
-        "height: 3rem",
-        "width: 100%",
-        "--_bg-pos-x: var(--_rtl-toggle) left",
-        "background-image: var(--_icon-chevrondown)",
-        "background-repeat: no-repeat",
-        "background-position: center var(--_bg-pos-x, right) var(--v-space-16)",
-        "background-size: 1rem 1rem"
-      ],
+      "declarations": [],
       "layer": "volvo.blocks"
     },
     {
       "name": "input",
       "prefixes": [],
-      "declarations": [
-        "padding: var(--v-space-16)",
-        "background-color: var(--_input-background-color, var(--v-color-background-primary))",
-        "border-radius: var(--v-radius-4)",
-        "box-shadow: inset 0 0 0 var(--_input-border-size, 1px) var(--_input-border-color, var(--v-color-ornament-primary))",
-        "transition: box-shadow var(--v-transition-default)",
-        "outline: none",
-        "height: 3rem",
-        "width: 100%",
-        "--_bg-pos-x: var(--_rtl-toggle) left",
-        "background-image: var(--_icon-chevrondown)",
-        "background-repeat: no-repeat",
-        "background-position: center var(--_bg-pos-x, right) var(--v-space-16)",
-        "background-size: 1rem 1rem"
-      ],
+      "declarations": [],
       "layer": "volvo.blocks"
     },
     {
       "name": "v-input-floating-label",
       "prefixes": [],
       "declarations": [
-        "position: relative",
-        "--_transform-origin: var(--_rtl-toggle) 100%",
-        "z-index: 1",
-        "color: var(--v-color-foreground-secondary)",
-        "pointer-events: none",
-        "top: 0",
-        "transition: transform var(--v-transition-default)",
-        "transform-origin: var(--_transform-origin, 0)",
-        "position: absolute",
-        "inset-inline-start: var(--v-space-16)",
-        "transform: translateY(5px)scale(.75)",
-        "color: var(--v-color-foreground-feedback-red)",
-        "height: 3.5rem",
-        "padding-top: 1.625rem",
-        "padding-bottom: .625rem",
-        "--stack-gap: var(--v-space-32)"
+        "position: relative"
       ],
       "layer": "volvo.layout"
     },
@@ -1880,22 +1616,7 @@
       "name": "input-floating-label",
       "prefixes": [],
       "declarations": [
-        "position: relative",
-        "--_transform-origin: var(--_rtl-toggle) 100%",
-        "z-index: 1",
-        "color: var(--v-color-foreground-secondary)",
-        "pointer-events: none",
-        "top: 0",
-        "transition: transform var(--v-transition-default)",
-        "transform-origin: var(--_transform-origin, 0)",
-        "position: absolute",
-        "inset-inline-start: var(--v-space-16)",
-        "transform: translateY(5px)scale(.75)",
-        "color: var(--v-color-foreground-feedback-red)",
-        "height: 3.5rem",
-        "padding-top: 1.625rem",
-        "padding-bottom: .625rem",
-        "--stack-gap: var(--v-space-32)"
+        "position: relative"
       ],
       "layer": "volvo.layout"
     },
@@ -1932,11 +1653,7 @@
     {
       "name": "list",
       "prefixes": [],
-      "declarations": [
-        "list-style-type: revert",
-        "padding-inline-start: 2rem",
-        "--stack-gap: var(--v-space-8)"
-      ],
+      "declarations": [],
       "layer": "volvo.layout"
     },
     {
@@ -1959,9 +1676,7 @@
       "name": "statement-3",
       "prefixes": [],
       "declarations": [
-        "font: var(--v-font-statement-3)",
-        "--stack-gap: var(--v-space-24)",
-        "--stack-gap: var(--v-space-32)"
+        "font: var(--v-font-statement-3)"
       ],
       "layer": "volvo.layout"
     },
@@ -1993,12 +1708,7 @@
         "gap: var(--v-space-16)",
         "flex-wrap: wrap",
         "display: flex",
-        "container: button-group / inline-size",
-        "flex: 1 0 40%",
-        "flex: 1 0 40cqw",
-        "--stack-gap: var(--v-space-24)",
-        "--stack-gap: var(--v-space-32)",
-        "--stack-gap: var(--v-space-16)"
+        "container: button-group / inline-size"
       ],
       "layer": "volvo.layout"
     },
@@ -2012,8 +1722,7 @@
         "scroll-padding-inline: calc(var(--_outer-margin) / 2)",
         "width: 100%",
         "margin-inline: auto",
-        "container-type: inline-size",
-        "--_outer-margin: calc(var(--v-space-pagemargin) * 2)"
+        "container-type: inline-size"
       ],
       "layer": "volvo.layout"
     },
@@ -2027,8 +1736,7 @@
         "scroll-padding-inline: calc(var(--_outer-margin) / 2)",
         "width: 100%",
         "margin-inline: auto",
-        "container-type: inline-size",
-        "--_outer-margin: calc(var(--v-space-pagemargin) * 2)"
+        "container-type: inline-size"
       ],
       "layer": "volvo.layout"
     },
@@ -2042,8 +1750,7 @@
         "scroll-padding-inline: calc(var(--_outer-margin) / 2)",
         "width: 100%",
         "margin-inline: auto",
-        "container-type: inline-size",
-        "--_outer-margin: calc(var(--v-space-pagemargin) * 2)"
+        "container-type: inline-size"
       ],
       "layer": "volvo.layout"
     },
@@ -2057,8 +1764,7 @@
         "scroll-padding-inline: calc(var(--_outer-margin) / 2)",
         "width: 100%",
         "margin-inline: auto",
-        "container-type: inline-size",
-        "--_outer-margin: calc(var(--v-space-pagemargin) * 2)"
+        "container-type: inline-size"
       ],
       "layer": "volvo.layout"
     },
@@ -2072,8 +1778,7 @@
         "scroll-padding-inline: calc(var(--_outer-margin) / 2)",
         "width: 100%",
         "margin-inline: auto",
-        "container-type: inline-size",
-        "--_outer-margin: calc(var(--v-space-pagemargin) * 2)"
+        "container-type: inline-size"
       ],
       "layer": "volvo.layout"
     },
@@ -2087,8 +1792,7 @@
         "scroll-padding-inline: calc(var(--_outer-margin) / 2)",
         "width: 100%",
         "margin-inline: auto",
-        "container-type: inline-size",
-        "--_outer-margin: calc(var(--v-space-pagemargin) * 2)"
+        "container-type: inline-size"
       ],
       "layer": "volvo.layout"
     },
@@ -2102,7 +1806,6 @@
         "width: 100%",
         "margin-inline: auto",
         "container-type: inline-size",
-        "--_outer-margin: calc(var(--v-space-pagemargin) * 2)",
         "max-width: min((100vw - var(--v-space-pagemargin) * 2)  + var(--_outer-margin), 160rem)"
       ],
       "layer": "volvo.layout"
@@ -2137,120 +1840,74 @@
         "justify-content: center",
         "column-gap: .25rem",
         "margin-block: 2rem",
-        "display: flex",
-        "display: none",
-        "background-color: var(--v-color-ornament-primary)",
-        "border-radius: 9999px",
-        "width: .5rem",
-        "height: .5rem",
-        "transition: background-color .2s",
-        "background-color: var(--v-color-surface-neutral)"
+        "display: flex"
       ],
       "layer": "volvo.layout"
     },
     {
       "name": "stack-4",
       "prefixes": [],
-      "declarations": [
-        "margin-top: var(--stack-gap)",
-        "--stack-gap: var(--v-space-4)"
-      ],
+      "declarations": [],
       "layer": "volvo.layout"
     },
     {
       "name": "stack-8",
       "prefixes": [],
-      "declarations": [
-        "margin-top: var(--stack-gap)",
-        "--stack-gap: var(--v-space-8)"
-      ],
+      "declarations": [],
       "layer": "volvo.layout"
     },
     {
       "name": "stack-16",
       "prefixes": [],
-      "declarations": [
-        "margin-top: var(--stack-gap)",
-        "--stack-gap: var(--v-space-16)"
-      ],
+      "declarations": [],
       "layer": "volvo.layout"
     },
     {
       "name": "stack-24",
       "prefixes": [],
-      "declarations": [
-        "margin-top: var(--stack-gap)",
-        "--stack-gap: var(--v-space-24)"
-      ],
+      "declarations": [],
       "layer": "volvo.layout"
     },
     {
       "name": "stack-32",
       "prefixes": [],
-      "declarations": [
-        "margin-top: var(--stack-gap)",
-        "--stack-gap: var(--v-space-32)"
-      ],
+      "declarations": [],
       "layer": "volvo.layout"
     },
     {
       "name": "stack-48",
       "prefixes": [],
-      "declarations": [
-        "margin-top: var(--stack-gap)",
-        "--stack-gap: var(--v-space-48)"
-      ],
+      "declarations": [],
       "layer": "volvo.layout"
     },
     {
       "name": "stack-64",
       "prefixes": [],
-      "declarations": [
-        "margin-top: var(--stack-gap)",
-        "--stack-gap: var(--v-space-64)"
-      ],
+      "declarations": [],
       "layer": "volvo.layout"
     },
     {
       "name": "stack-s",
       "prefixes": [],
-      "declarations": [
-        "margin-top: var(--stack-gap)",
-        "--stack-gap: var(--v-space-s)"
-      ],
+      "declarations": [],
       "layer": "volvo.layout"
     },
     {
       "name": "stack-m",
       "prefixes": [],
-      "declarations": [
-        "margin-top: var(--stack-gap)",
-        "--stack-gap: var(--v-space-m)"
-      ],
+      "declarations": [],
       "layer": "volvo.layout"
     },
     {
       "name": "stack-l",
       "prefixes": [],
-      "declarations": [
-        "margin-top: var(--stack-gap)",
-        "--stack-gap: var(--v-space-l)"
-      ],
+      "declarations": [],
       "layer": "volvo.layout"
     },
     {
       "name": "stack-text",
       "prefixes": [],
-      "declarations": [
-        "margin-top: var(--stack-gap)",
-        "--stack-gap: var(--v-space-16)",
-        "--stack-gap: var(--v-space-8)",
-        "--stack-gap: var(--v-space-4)",
-        "--stack-gap: calc(var(--v-space-8)  + 1em)",
-        "--stack-gap: var(--v-space-24)",
-        "--stack-gap: 0rem",
-        "--stack-gap: var(--v-space-32)"
-      ],
+      "declarations": [],
       "layer": "volvo.layout"
     },
     {
@@ -2260,10 +1917,6 @@
         "md"
       ],
       "declarations": [
-        "--stack-gap: var(--v-space-8)",
-        "--stack-gap: var(--v-space-4)",
-        "--stack-gap: var(--v-space-24)",
-        "--stack-gap: var(--v-space-16)",
         "font-size: var(--v-font-title-20-size)",
         "line-height: var(--v-font-title-20-lineheight)",
         "font-size: var(--v-font-20-size)",
@@ -2275,9 +1928,6 @@
       "name": "body-16",
       "prefixes": [],
       "declarations": [
-        "--stack-gap: var(--v-space-8)",
-        "--stack-gap: var(--v-space-4)",
-        "--stack-gap: var(--v-space-16)",
         "font-size: var(--v-font-16-size)",
         "line-height: var(--v-font-16-lineheight)"
       ],
@@ -2287,8 +1937,6 @@
       "name": "micro",
       "prefixes": [],
       "declarations": [
-        "--stack-gap: var(--v-space-8)",
-        "--stack-gap: 0rem",
         "font-size: var(--v-font-12-size)",
         "line-height: var(--v-font-12-lineheight)",
         "letter-spacing: .02em"
@@ -2299,8 +1947,6 @@
       "name": "font-medium",
       "prefixes": [],
       "declarations": [
-        "--stack-gap: var(--v-space-4)",
-        "--stack-gap: var(--v-space-16)",
         "font-weight: 500"
       ],
       "layer": "volvo.utilities"
@@ -2312,8 +1958,6 @@
         "md"
       ],
       "declarations": [
-        "--stack-gap: var(--v-space-4)",
-        "--stack-gap: var(--v-space-16)",
         "font-size: var(--v-font-title-24-size)",
         "line-height: var(--v-font-title-24-lineheight)",
         "font-size: var(--v-font-24-size)",
@@ -2330,7 +1974,6 @@
         "grid-template-columns: 1fr",
         "margin-inline: auto",
         "display: grid",
-        "margin-inline: var(--v-space-pagemargin)",
         "--_outer-margin: 0px",
         "grid-template-columns: 1fr 1fr"
       ],
@@ -2345,7 +1988,6 @@
         "grid-template-columns: 1fr",
         "margin-inline: auto",
         "display: grid",
-        "margin-inline: var(--v-space-pagemargin)",
         "--_outer-margin: 0px",
         "grid-template-columns: 1fr 1fr"
       ],
@@ -2870,7 +2512,31 @@
       "name": "rounded",
       "prefixes": [],
       "declarations": [
-        "border-radius: var(--v-radius-4)"
+        "border-radius: var(--v-radius-sm)"
+      ],
+      "layer": "volvo.utilities"
+    },
+    {
+      "name": "rounded-sm",
+      "prefixes": [],
+      "declarations": [
+        "border-radius: var(--v-radius-sm)"
+      ],
+      "layer": "volvo.utilities"
+    },
+    {
+      "name": "rounded-md",
+      "prefixes": [],
+      "declarations": [
+        "border-radius: var(--v-radius-md)"
+      ],
+      "layer": "volvo.utilities"
+    },
+    {
+      "name": "rounded-lg",
+      "prefixes": [],
+      "declarations": [
+        "border-radius: var(--v-radius-lg)"
       ],
       "layer": "volvo.utilities"
     },
@@ -6904,11 +6570,34 @@
       },
       "value": "70ch"
     },
+    {
+      "css": "--v-radius-sm",
+      "type": "radius",
+      "variant": "sm",
+      "meta": {},
+      "value": "0.25rem"
+    },
+    {
+      "css": "--v-radius-md",
+      "type": "radius",
+      "variant": "md",
+      "meta": {},
+      "value": "0.5rem"
+    },
+    {
+      "css": "--v-radius-lg",
+      "type": "radius",
+      "variant": "lg",
+      "meta": {},
+      "value": "1rem"
+    },
     {
       "css": "--v-radius-4",
       "type": "radius",
       "variant": "4",
-      "meta": {},
+      "meta": {
+        "description": "TODO: Remove these values when the migration is complete"
+      },
       "value": "0.25rem"
     },
     {
@@ -7523,7 +7212,7 @@
       "property": "foreground",
       "variant": "primary",
       "meta": {
-        "description": "Use for primary text and icons."
+        "description": "Use for primary text, icons and borders."
       },
       "value": [
         "rgb(0 0 0 / 96%)",
@@ -7536,13 +7225,26 @@
       "property": "foreground",
       "variant": "secondary",
       "meta": {
-        "description": "Use for secondary text and icons."
+        "description": "Use for secondary text, icons and borders."
       },
       "value": [
         "rgb(0 0 0 / 64%)",
         "rgb(255 255 255 / 64%)"
       ]
     },
+    {
+      "css": "--v-color-foreground-tertiary",
+      "type": "color",
+      "property": "foreground",
+      "variant": "tertiary",
+      "meta": {
+        "description": "The lightest possible foreground color acceptable for UI fills. Should not be used for body text."
+      },
+      "value": [
+        "rgb(0 0 0 / 44%)",
+        "rgb(255 255 255 / 44%)"
+      ]
+    },
     {
       "css": "--v-color-foreground-inverted",
       "type": "color",