@volvo-cars/css 0.54.0 → 1.0.0-beta-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",
@@ -54,7 +96,6 @@
     "bg-surface-neutral",
     "bg-transparent",
     "block",
-    "body-16",
     "border",
     "border-2",
     "border-accent-blue",
@@ -204,6 +245,7 @@
     "justify-end",
     "justify-evenly",
     "justify-start",
+    "label",
     "layout-4-5",
     "layout-4-6",
     "layout-5-4",
@@ -460,8 +502,6 @@
     "lg:text-center",
     "lg:text-end",
     "lg:text-start",
-    "lg:title-20",
-    "lg:title-24",
     "lg:until-xl:hidden",
     "lg:w-0",
     "lg:w-16",
@@ -767,8 +807,6 @@
     "md:text-center",
     "md:text-end",
     "md:text-start",
-    "md:title-20",
-    "md:title-24",
     "md:until-lg:hidden",
     "md:until-xl:hidden",
     "md:w-0",
@@ -940,6 +978,9 @@
     "rotate-90",
     "rounded",
     "rounded-full",
+    "rounded-lg",
+    "rounded-md",
+    "rounded-sm",
     "scale-100",
     "scale-110",
     "scale-95",
@@ -999,8 +1040,6 @@
     "text-primary",
     "text-secondary",
     "text-start",
-    "title-20",
-    "title-24",
     "transition-colors",
     "transition-transform",
     "truncate",
@@ -1008,10 +1047,6 @@
     "until-md:hidden",
     "until-xl:hidden",
     "uppercase",
-    "v-input",
-    "v-input-floating-label",
-    "v-label",
-    "volvo_v0",
     "w-0",
     "w-16",
     "w-24",
@@ -1297,13 +1332,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 +1347,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 +1370,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 +1391,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 +1411,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 +1438,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 +1463,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 +1503,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(--v-color-foreground-tertiary)",
-        "--_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 +1537,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,73 +1545,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",
-        "object-position: 0 -999px",
-        "mask-size: cover",
-        "mask-repeat: no-repeat",
-        "width: calc(var(--_height) * 13)",
-        "min-width: calc(var(--_height) * 13)",
-        "mask-size: contain",
-        "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"
     },
     {
@@ -1805,98 +1577,22 @@
       "layer": "volvo.blocks"
     },
     {
-      "name": "v-label",
-      "prefixes": [],
-      "declarations": [
-        "flex-direction: column",
-        "display: inline-flex",
-        "margin-top: var(--v-space-8)"
-      ],
-      "layer": "volvo.blocks"
-    },
-    {
-      "name": "v-input",
+      "name": "label",
       "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)"
-      ],
-      "layer": "volvo.layout"
-    },
     {
       "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"
     },
@@ -1933,11 +1629,7 @@
     {
       "name": "list",
       "prefixes": [],
-      "declarations": [
-        "list-style-type: revert",
-        "padding-inline-start: 2rem",
-        "--stack-gap: var(--v-space-8)"
-      ],
+      "declarations": [],
       "layer": "volvo.layout"
     },
     {
@@ -1960,9 +1652,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"
     },
@@ -1994,12 +1684,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"
     },
@@ -2013,8 +1698,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"
     },
@@ -2028,8 +1712,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"
     },
@@ -2043,8 +1726,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"
     },
@@ -2058,8 +1740,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"
     },
@@ -2073,8 +1754,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"
     },
@@ -2088,8 +1768,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"
     },
@@ -2103,7 +1782,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"
@@ -2138,147 +1816,95 @@
         "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"
     },
     {
-      "name": "title-20",
+      "name": "font-20",
       "prefixes": [
         "lg",
         "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)",
         "line-height: var(--v-font-20-lineheight)"
       ],
       "layer": "volvo.utilities"
     },
     {
-      "name": "body-16",
-      "prefixes": [],
+      "name": "font-16",
+      "prefixes": [
+        "lg",
+        "md"
+      ],
       "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)"
       ],
@@ -2288,8 +1914,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"
@@ -2300,23 +1924,17 @@
       "name": "font-medium",
       "prefixes": [],
       "declarations": [
-        "--stack-gap: var(--v-space-4)",
-        "--stack-gap: var(--v-space-16)",
         "font-weight: 500"
       ],
       "layer": "volvo.utilities"
     },
     {
-      "name": "title-24",
+      "name": "font-24",
       "prefixes": [
         "lg",
         "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)",
         "line-height: var(--v-font-24-lineheight)"
       ],
@@ -2331,7 +1949,6 @@
         "grid-template-columns: 1fr",
         "margin-inline: auto",
         "display: grid",
-        "margin-inline: var(--v-space-pagemargin)",
         "--_outer-margin: 0px",
         "grid-template-columns: 1fr 1fr"
       ],
@@ -2346,7 +1963,6 @@
         "grid-template-columns: 1fr",
         "margin-inline: auto",
         "display: grid",
-        "margin-inline: var(--v-space-pagemargin)",
         "--_outer-margin: 0px",
         "grid-template-columns: 1fr 1fr"
       ],
@@ -2871,7 +2487,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"
     },
@@ -3188,46 +2828,6 @@
       ],
       "layer": "volvo.utilities"
     },
-    {
-      "name": "font-24",
-      "prefixes": [
-        "lg",
-        "md"
-      ],
-      "declarations": [
-        "font-size: var(--v-font-title-24-size)",
-        "line-height: var(--v-font-title-24-lineheight)",
-        "font-size: var(--v-font-24-size)",
-        "line-height: var(--v-font-24-lineheight)"
-      ],
-      "layer": "volvo.utilities"
-    },
-    {
-      "name": "font-20",
-      "prefixes": [
-        "lg",
-        "md"
-      ],
-      "declarations": [
-        "font-size: var(--v-font-title-20-size)",
-        "line-height: var(--v-font-title-20-lineheight)",
-        "font-size: var(--v-font-20-size)",
-        "line-height: var(--v-font-20-lineheight)"
-      ],
-      "layer": "volvo.utilities"
-    },
-    {
-      "name": "font-16",
-      "prefixes": [
-        "lg",
-        "md"
-      ],
-      "declarations": [
-        "font-size: var(--v-font-16-size)",
-        "line-height: var(--v-font-16-lineheight)"
-      ],
-      "layer": "volvo.utilities"
-    },
     {
       "name": "font-light",
       "prefixes": [],
@@ -6905,11 +6505,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"
     },
     {
@@ -7440,60 +7063,6 @@
       "meta": {},
       "value": "var(--v-font-emphasis-weight)\n    var(--v-font-statement-signature-size) /\n    var(--v-font-statement-signature-lineheight) var(--v-font-broad-family)"
     },
-    {
-      "css": "--v-font-title-24-size",
-      "type": "font",
-      "property": "size",
-      "variant": "24",
-      "category": "title",
-      "meta": {
-        "deprecated": "Use --v-font-24-size instead."
-      },
-      "value": "1.5rem"
-    },
-    {
-      "css": "--v-font-title-24-lineheight",
-      "type": "font",
-      "property": "lineheight",
-      "variant": "24",
-      "category": "title",
-      "meta": {},
-      "value": "1.334"
-    },
-    {
-      "css": "--v-font-title-24",
-      "type": "font",
-      "variant": "24",
-      "category": "title",
-      "meta": {},
-      "value": "var(--v-font-regular-weight) var(--v-font-title-24-size) /\n    var(--v-font-title-24-lineheight) var(--v-font-sans-family)"
-    },
-    {
-      "css": "--v-font-title-20-size",
-      "type": "font",
-      "property": "size",
-      "variant": "20",
-      "category": "title",
-      "meta": {},
-      "value": "1.25rem"
-    },
-    {
-      "css": "--v-font-title-20-lineheight",
-      "type": "font",
-      "property": "lineheight",
-      "variant": "20",
-      "category": "title",
-      "meta": {},
-      "value": "1.4"
-    },
-    {
-      "css": "--v-font-title-20",
-      "type": "font",
-      "variant": "20",
-      "category": "title",
-      "meta": {},
-      "value": "var(--v-font-regular-weight) var(--v-font-title-20-size) /\n    var(--v-font-title-20-lineheight) var(--v-font-sans-family)"
-    },
     {
       "css": "--v-color-always-black",
       "type": "color",