@volvo-cars/css 0.27.0 → 0.29.0

package/dist/meta.json

@@ -44,6 +44,7 @@
     "button-group",
     "button-outlined",
     "button-text",
+    "checkbox",
     "checked:border",
     "checked:border-2",
     "checked:border-accent-blue",
@@ -112,6 +113,8 @@
     "hidden",
     "hover:border-primary",
     "hyphens",
+    "icon-mask",
+    "icon-sprite",
     "invisible",
     "items-center",
     "items-end",
@@ -154,6 +157,7 @@
     "lg:text-start",
     "lg:until-xl:hidden",
     "link-inline",
+    "list",
     "m-0",
     "m-16",
     "m-24",
@@ -329,6 +333,7 @@
     "py-l",
     "py-m",
     "py-s",
+    "radio",
     "rounded",
     "rounded-full",
     "selected:border",
@@ -382,6 +387,7 @@
     "v-input-delegate",
     "v-input-floating-label",
     "v-input__password-visibility-control",
+    "v-label",
     "w-lg",
     "w-md",
     "w-sm",
@@ -426,7 +432,10 @@
         "display: flex",
         "container: button-group / inline-size",
         "flex: 1 0 40%",
-        "flex: 1 0 40cqw"
+        "flex: 1 0 40cqw",
+        "--stack-gap: var(--v-space-24)",
+        "--stack-gap: var(--v-space-32)",
+        "--stack-gap: var(--v-space-16)"
       ],
       "layer": "volvo.layout"
     },
@@ -436,10 +445,9 @@
       "declarations": [
         "flex: 1 0 40%",
         "flex: 1 0 40cqw",
-        "--_height: 3rem",
-        "min-width: max-content",
-        "max-width: 100%",
-        "height: var(--_height)",
+        "--stack-gap: var(--v-space-24)",
+        "--stack-gap: var(--v-space-32)",
+        "--stack-gap: var(--v-space-16)",
         "font-size: var(--v-font-16-size)",
         "font-weight: var(--v-font-emphasis-weight)",
         "color: var(--_color)",
@@ -448,13 +456,22 @@
         "background-color: var(--_background)",
         "justify-content: center",
         "align-items: center",
+        "min-width: max-content",
+        "max-width: 100%",
+        "height: 3rem",
         "transition: transform .2s, background-color .2s",
         "display: inline-flex",
         "position: relative",
         "overflow: hidden",
         "--_min-touch-area: 44px",
-        "--_height: 2rem",
+        "content: \"\"",
+        "width: 100%",
+        "height: 44px",
+        "position: absolute",
+        "top: 50%",
+        "transform: translateY(-50%)",
         "font-size: var(--v-font-12-size)",
+        "height: 2rem",
         "color: var(--_color-disabled, var(--_color))",
         "background-color: var(--_background-disabled, var(--_background))",
         "color: var(--_color-hover, var(--_color))",
@@ -474,15 +491,9 @@
         "border-radius: var(--v-radius-4)",
         "width: 1.5rem",
         "height: 1.5rem",
-        "position: absolute",
         "padding-inline: var(--v-space-16)",
         "width: 1rem",
         "height: 1rem",
-        "width: 100%",
-        "height: 44px",
-        "content: \"\"",
-        "top: 50%",
-        "transform: translateY(-50%)",
         "transform: scale(.95)"
       ],
       "layer": "volvo.blocks"
@@ -493,10 +504,9 @@
       "declarations": [
         "flex: 1 0 40%",
         "flex: 1 0 40cqw",
-        "--_height: 3rem",
-        "min-width: max-content",
-        "max-width: 100%",
-        "height: var(--_height)",
+        "--stack-gap: var(--v-space-24)",
+        "--stack-gap: var(--v-space-32)",
+        "--stack-gap: var(--v-space-16)",
         "font-size: var(--v-font-16-size)",
         "font-weight: var(--v-font-emphasis-weight)",
         "color: var(--_color)",
@@ -505,13 +515,22 @@
         "background-color: var(--_background)",
         "justify-content: center",
         "align-items: center",
+        "min-width: max-content",
+        "max-width: 100%",
+        "height: 3rem",
         "transition: transform .2s, background-color .2s",
         "display: inline-flex",
         "position: relative",
         "overflow: hidden",
         "--_min-touch-area: 44px",
-        "--_height: 2rem",
+        "content: \"\"",
+        "width: 100%",
+        "height: 44px",
+        "position: absolute",
+        "top: 50%",
+        "transform: translateY(-50%)",
         "font-size: var(--v-font-12-size)",
+        "height: 2rem",
         "color: var(--_color-disabled, var(--_color))",
         "background-color: var(--_background-disabled, var(--_background))",
         "color: var(--_color-hover, var(--_color))",
@@ -530,15 +549,9 @@
         "border-radius: var(--v-radius-4)",
         "width: 1.5rem",
         "height: 1.5rem",
-        "position: absolute",
         "padding-inline: var(--v-space-16)",
         "width: 1rem",
         "height: 1rem",
-        "width: 100%",
-        "height: 44px",
-        "content: \"\"",
-        "top: 50%",
-        "transform: translateY(-50%)",
         "transform: scale(.95)"
       ],
       "layer": "volvo.blocks"
@@ -549,10 +562,8 @@
       "declarations": [
         "flex: 1 0 40%",
         "flex: 1 0 40cqw",
-        "--_height: 3rem",
-        "min-width: max-content",
-        "max-width: 100%",
-        "height: var(--_height)",
+        "--stack-gap: var(--v-space-24)",
+        "--stack-gap: var(--v-space-16)",
         "font-size: var(--v-font-16-size)",
         "font-weight: var(--v-font-emphasis-weight)",
         "color: var(--_color)",
@@ -561,13 +572,22 @@
         "background-color: var(--_background)",
         "justify-content: center",
         "align-items: center",
+        "min-width: max-content",
+        "max-width: 100%",
+        "height: 3rem",
         "transition: transform .2s, background-color .2s",
         "display: inline-flex",
         "position: relative",
         "overflow: hidden",
         "--_min-touch-area: 44px",
-        "--_height: 2rem",
+        "content: \"\"",
+        "width: 100%",
+        "height: 44px",
+        "position: absolute",
+        "top: 50%",
+        "transform: translateY(-50%)",
         "font-size: var(--v-font-12-size)",
+        "height: 2rem",
         "color: var(--_color-disabled, var(--_color))",
         "background-color: var(--_background-disabled, var(--_background))",
         "color: var(--_color-hover, var(--_color))",
@@ -575,24 +595,21 @@
         "--_color: var(--v-color-foreground-primary)",
         "--_color-hover: var(--_v-color-foreground-primary-hover)",
         "--_color-disabled: var(--_v-color-surface-neutral-disabled)",
-        "height: max(var(--_min-touch-area, var(--_height)), var(--_height))",
-        "margin-block: min(0rem, (var(--_height)  - max(var(--_min-touch-area), var(--_height))) / 2)",
         "text-align: start",
         "--_color: var(--v-color-surface-feedback-red)",
         "--_color-disabled: var(--_v-color-surface-feedback-red-disabled)",
         "--_color-hover: var(--_v-color-surface-feedback-red-hover)",
         "--_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='m10 8.707-4-4-4 4L1.293 8 6 3.293 10.707 8 10 8.707Z' clip-rule='evenodd'/%3E%3Cpath stroke='%23000' stroke-linecap='square' stroke-opacity='.96' stroke-width='.4' d='M9.858 8.848 10 8.99l.141-.142.707-.707L10.99 8l-.142-.141L6.141 3.15 6 3.01l-.141.141L1.15 7.86l-.141.14.141.142.708.707.14.142.142-.142L6 4.99l3.858 3.858Z'/%3E%3C/svg%3E\")",
-        "width: .75rem",
-        "height: .75rem",
         "mask: var(--_arrow-icon)",
         "rotate: var(--_arrow-rotation)",
         "flex-shrink: 0",
+        "width: .75em",
+        "height: .75em",
         "margin-top: .125rem",
         "transition: translate .1s",
         "mask-size: cover",
         "width: .5rem",
         "height: .5rem",
-        "content: \"\"",
         "background-color: currentColor",
         "margin-inline-start: var(--v-space-4)",
         "margin-inline-end: var(--v-space-4)",
@@ -612,8 +629,8 @@
         "--_outer-margin: 0px",
         "--_colspan: min(var(--v-grid-columns), var(--_container-colspan, var(--v-grid-columns)))",
         "--_columns-total-width: calc((var(--v-size-gridcolumn) * var(--_colspan))  + var(--v-space-gutter) * (var(--_colspan)  - 1))",
-        "width: 100%",
         "max-width: min(80rem, min(var(--v-size-gridmax), var(--_columns-total-width))  + var(--_outer-margin))",
+        "width: 100%",
         "width: min(var(--v-size-gridmax), var(--_columns-total-width))",
         "--_container-colspan: 4",
         "--_container-colspan: 6"
@@ -627,8 +644,8 @@
         "--_outer-margin: 0px",
         "--_colspan: min(var(--v-grid-columns), var(--_container-colspan, var(--v-grid-columns)))",
         "--_columns-total-width: calc((var(--v-size-gridcolumn) * var(--_colspan))  + var(--v-space-gutter) * (var(--_colspan)  - 1))",
-        "width: 100%",
         "max-width: min(80rem, min(var(--v-size-gridmax), var(--_columns-total-width))  + var(--_outer-margin))",
+        "width: 100%",
         "width: min(var(--v-size-gridmax), var(--_columns-total-width))",
         "--_container-colspan: 4",
         "--_container-colspan: 8",
@@ -643,8 +660,8 @@
         "--_outer-margin: 0px",
         "--_colspan: min(var(--v-grid-columns), var(--_container-colspan, var(--v-grid-columns)))",
         "--_columns-total-width: calc((var(--v-size-gridcolumn) * var(--_colspan))  + var(--v-space-gutter) * (var(--_colspan)  - 1))",
-        "width: 100%",
         "max-width: min(80rem, min(var(--v-size-gridmax), var(--_columns-total-width))  + var(--_outer-margin))",
+        "width: 100%",
         "width: min(var(--v-size-gridmax), var(--_columns-total-width))",
         "--_container-colspan: 10",
         "--_container-colspan: 8"
@@ -658,8 +675,8 @@
         "--_outer-margin: 0px",
         "--_colspan: min(var(--v-grid-columns), var(--_container-colspan, var(--v-grid-columns)))",
         "--_columns-total-width: calc((var(--v-size-gridcolumn) * var(--_colspan))  + var(--v-space-gutter) * (var(--_colspan)  - 1))",
-        "width: 100%",
         "max-width: min(80rem, min(var(--v-size-gridmax), var(--_columns-total-width))  + var(--_outer-margin))",
+        "width: 100%",
         "width: min(var(--v-size-gridmax), var(--_columns-total-width))",
         "--_container-colspan: 10"
       ],
@@ -672,8 +689,8 @@
         "--_outer-margin: 0px",
         "--_colspan: min(var(--v-grid-columns), var(--_container-colspan, var(--v-grid-columns)))",
         "--_columns-total-width: calc((var(--v-size-gridcolumn) * var(--_colspan))  + var(--v-space-gutter) * (var(--_colspan)  - 1))",
-        "width: 100%",
         "max-width: min(80rem, min(var(--v-size-gridmax), var(--_columns-total-width))  + var(--_outer-margin))",
+        "width: 100%",
         "margin-inline: auto",
         "container-type: inline-size"
       ],
@@ -686,8 +703,8 @@
         "--_outer-margin: 0px",
         "--_colspan: min(var(--v-grid-columns), var(--_container-colspan, var(--v-grid-columns)))",
         "--_columns-total-width: calc((var(--v-size-gridcolumn) * var(--_colspan))  + var(--v-space-gutter) * (var(--_colspan)  - 1))",
-        "width: 100%",
         "max-width: min(80rem, min(var(--v-size-gridmax), var(--_columns-total-width))  + var(--_outer-margin))",
+        "width: 100%",
         "margin-inline: auto",
         "container-type: inline-size",
         "--_container-colspan: 4",
@@ -702,8 +719,8 @@
         "--_outer-margin: 0px",
         "--_colspan: min(var(--v-grid-columns), var(--_container-colspan, var(--v-grid-columns)))",
         "--_columns-total-width: calc((var(--v-size-gridcolumn) * var(--_colspan))  + var(--v-space-gutter) * (var(--_colspan)  - 1))",
-        "width: 100%",
         "max-width: min(80rem, min(var(--v-size-gridmax), var(--_columns-total-width))  + var(--_outer-margin))",
+        "width: 100%",
         "margin-inline: auto",
         "container-type: inline-size",
         "--_container-colspan: 4",
@@ -719,8 +736,8 @@
         "--_outer-margin: 0px",
         "--_colspan: min(var(--v-grid-columns), var(--_container-colspan, var(--v-grid-columns)))",
         "--_columns-total-width: calc((var(--v-size-gridcolumn) * var(--_colspan))  + var(--v-space-gutter) * (var(--_colspan)  - 1))",
-        "width: 100%",
         "max-width: min(80rem, min(var(--v-size-gridmax), var(--_columns-total-width))  + var(--_outer-margin))",
+        "width: 100%",
         "margin-inline: auto",
         "container-type: inline-size",
         "--_outer-margin: calc(var(--v-space-pagemargin) * 2)",
@@ -736,8 +753,8 @@
         "--_outer-margin: 0px",
         "--_colspan: min(var(--v-grid-columns), var(--_container-colspan, var(--v-grid-columns)))",
         "--_columns-total-width: calc((var(--v-size-gridcolumn) * var(--_colspan))  + var(--v-space-gutter) * (var(--_colspan)  - 1))",
-        "width: 100%",
         "max-width: min(80rem, min(var(--v-size-gridmax), var(--_columns-total-width))  + var(--_outer-margin))",
+        "width: 100%",
         "margin-inline: auto",
         "container-type: inline-size",
         "--_outer-margin: calc(var(--v-space-pagemargin) * 2)",
@@ -752,8 +769,8 @@
         "--_outer-margin: 0px",
         "--_colspan: min(var(--v-grid-columns), var(--_container-colspan, var(--v-grid-columns)))",
         "--_columns-total-width: calc((var(--v-size-gridcolumn) * var(--_colspan))  + var(--v-space-gutter) * (var(--_colspan)  - 1))",
-        "width: 100%",
         "max-width: min(80rem, min(var(--v-size-gridmax), var(--_columns-total-width))  + var(--_outer-margin))",
+        "width: 100%",
         "margin-inline: auto",
         "container-type: inline-size",
         "--_outer-margin: calc(var(--v-space-pagemargin) * 2)"
@@ -767,8 +784,8 @@
         "--_outer-margin: 0px",
         "--_colspan: min(var(--v-grid-columns), var(--_container-colspan, var(--v-grid-columns)))",
         "--_columns-total-width: calc((var(--v-size-gridcolumn) * var(--_colspan))  + var(--v-space-gutter) * (var(--_colspan)  - 1))",
-        "width: 100%",
         "max-width: min(80rem, min(var(--v-size-gridmax), var(--_columns-total-width))  + var(--_outer-margin))",
+        "width: 100%",
         "margin-inline: auto",
         "container-type: inline-size",
         "--_outer-margin: calc(var(--v-space-pagemargin) * 2)",
@@ -872,24 +889,158 @@
       "declarations": [
         "margin-top: var(--stack-gap)",
         "--stack-gap: var(--v-space-16)",
-        "--stack-gap: var(--v-space-24)"
+        "--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)"
       ],
       "layer": "volvo.layout"
     },
+    {
+      "name": "heading-1",
+      "prefixes": [],
+      "declarations": [
+        "--stack-gap: var(--v-space-8)",
+        "--stack-gap: calc(var(--v-space-8)  + 1em)",
+        "font: var(--v-font-heading-1)"
+      ],
+      "layer": "volvo.blocks"
+    },
+    {
+      "name": "heading-2",
+      "prefixes": [],
+      "declarations": [
+        "--stack-gap: var(--v-space-8)",
+        "--stack-gap: calc(var(--v-space-8)  + 1em)",
+        "font: var(--v-font-heading-2)"
+      ],
+      "layer": "volvo.blocks"
+    },
+    {
+      "name": "heading-3",
+      "prefixes": [],
+      "declarations": [
+        "--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.blocks"
+    },
+    {
+      "name": "title-20",
+      "prefixes": [],
+      "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)"
+      ],
+      "layer": "volvo.utilities"
+    },
+    {
+      "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)"
+      ],
+      "layer": "volvo.utilities"
+    },
+    {
+      "name": "list",
+      "prefixes": [],
+      "declarations": [
+        "--stack-gap: var(--v-space-8)",
+        "list-style-type: revert",
+        "padding-inline-start: 2rem"
+      ],
+      "layer": "volvo.blocks"
+    },
+    {
+      "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"
+      ],
+      "layer": "volvo.utilities"
+    },
+    {
+      "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",
+      "prefixes": [],
+      "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)"
+      ],
+      "layer": "volvo.utilities"
+    },
     {
       "name": "statement-3",
       "prefixes": [],
       "declarations": [
         "--stack-gap: var(--v-space-24)",
+        "--stack-gap: var(--v-space-32)",
         "font: var(--v-font-statement-3)"
       ],
       "layer": "volvo.blocks"
     },
+    {
+      "name": "v-input-floating-label",
+      "prefixes": [],
+      "declarations": [
+        "--stack-gap: var(--v-space-32)",
+        "position: relative",
+        "--_transform-origin: var(--_rtl-toggle) 100%",
+        "z-index: 1",
+        "color: var(--v-color-foreground-secondary)",
+        "pointer-events: none",
+        "transition: transform var(--v-transition-default)",
+        "transform-origin: var(--_transform-origin, 0)",
+        "top: 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"
+      ],
+      "layer": "volvo.blocks"
+    },
     {
       "name": "backdrop",
       "prefixes": [],
       "declarations": [
-        "background-color: var(--_v-color-black-64)"
+        "background-color: var(--_v-color-black-64)",
+        "z-index: calc(var(--v-index-overlay)  - 1)",
+        "justify-content: center",
+        "align-items: center",
+        "display: flex",
+        "position: fixed",
+        "inset: 0"
       ],
       "layer": "volvo.blocks"
     },
@@ -903,13 +1054,13 @@
         "width: 1rem",
         "height: 1rem",
         "contain: strict",
-        "width: 2.5rem",
-        "height: 2.5rem",
         "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"
@@ -921,89 +1072,154 @@
       "prefixes": [],
       "declarations": [
         "z-index: var(--v-index-overlay)",
-        "width: 100%",
-        "max-width: 100%",
-        "height: fit-content",
-        "max-height: 80vh",
         "padding-block: var(--v-space-48)",
         "padding-inline: var(--v-space-24)",
         "color: var(--v-color-foreground-primary)",
         "background-color: var(--v-color-background-secondary)",
         "margin: auto",
+        "width: 100%",
+        "max-width: 100%",
+        "height: fit-content",
+        "max-height: 80vh",
         "margin-bottom: 0",
         "position: fixed",
         "inset: 0",
-        "max-width: 496px",
         "padding: var(--v-space-48)",
+        "max-width: 496px",
         "margin-bottom: auto"
       ],
       "layer": "volvo.blocks"
     },
     {
-      "name": "heading-1",
+      "name": "radio",
       "prefixes": [],
       "declarations": [
-        "font: var(--v-font-heading-1)"
+        "width: var(--v-space-16)",
+        "height: 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-foreground-secondary))",
+        "transition: box-shadow var(--v-transition-default)",
+        "place-content: center",
+        "margin-top: .25em",
+        "display: inline-grid",
+        "position: relative",
+        "border-radius: var(--v-radius-full)"
       ],
       "layer": "volvo.blocks"
     },
     {
-      "name": "heading-2",
+      "name": "checkbox",
       "prefixes": [],
       "declarations": [
-        "font: var(--v-font-heading-2)"
+        "width: var(--v-space-16)",
+        "height: 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-foreground-secondary))",
+        "transition: box-shadow var(--v-transition-default)",
+        "place-content: center",
+        "margin-top: .25em",
+        "display: inline-grid",
+        "position: relative"
       ],
       "layer": "volvo.blocks"
     },
     {
-      "name": "heading-3",
+      "name": "icon-sprite",
       "prefixes": [],
       "declarations": [
-        "font: var(--v-font-heading-3)"
+        "width: var(--_icon-size)",
+        "height: var(--_icon-size)",
+        "vertical-align: middle",
+        "flex-grow: 0",
+        "flex-shrink: 0",
+        "display: inline-block",
+        "--_icon-size: 5rem",
+        "--_icon-size: 4rem",
+        "--_icon-size: 3rem",
+        "--_icon-size: 2.5rem",
+        "--_icon-size: 2rem",
+        "--_icon-size: 1.5rem",
+        "--_icon-size: 1rem",
+        "--_icon-size: .75rem",
+        "--_y-offset: var(--_dark-toggle) 7",
+        "fill: currentColor",
+        "object-fit: cover",
+        "object-position: 0 calc(var(--_y-offset, 0) * -1 * var(--_icon-size, 0))",
+        "transform: scaleX(-1)"
       ],
       "layer": "volvo.blocks"
     },
     {
-      "name": "v-input",
+      "name": "icon-mask",
       "prefixes": [],
       "declarations": [
-        "--_input-border-color: var(--v-color-ornament-primary)",
-        "--_input-background-color: var(--v-color-background-secondary)"
+        "width: var(--_icon-size)",
+        "height: var(--_icon-size)",
+        "vertical-align: middle",
+        "flex-grow: 0",
+        "flex-shrink: 0",
+        "display: inline-block",
+        "--_icon-size: 5rem",
+        "--_icon-size: 4rem",
+        "--_icon-size: 3rem",
+        "--_icon-size: 2.5rem",
+        "--_icon-size: 2rem",
+        "--_icon-size: 1.5rem",
+        "--_icon-size: 1rem",
+        "--_icon-size: .75rem",
+        "object-position: 0 -999px",
+        "mask-repeat: no-repeat",
+        "mask-image: var(--icon-url)",
+        "background-color: currentColor",
+        "transform: scaleX(-1)"
       ],
       "layer": "volvo.blocks"
     },
     {
-      "name": "v-input__password-visibility-control",
+      "name": "v-label",
       "prefixes": [],
       "declarations": [
-        "width: 1.5rem",
-        "height: 1.5rem",
-        "background-image: var(--_icon-eye-slash)",
-        "background-position: center",
+        "flex-direction: column",
+        "display: inline-flex",
+        "margin-top: var(--v-space-8)"
+      ],
+      "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%",
+        "--_input-border-color: var(--v-color-ornament-primary)",
+        "--_input-background-color: var(--v-color-background-secondary)",
+        "--_bg-pos-x: var(--_rtl-toggle) left",
+        "background-image: var(--_icon-chevrondown)",
         "background-repeat: no-repeat",
-        "background-size: 1.5rem 1.5rem",
-        "flex-shrink: 0"
+        "background-position: center var(--_bg-pos-x, right) var(--v-space-16)",
+        "background-size: 1.5rem 1.5rem"
       ],
       "layer": "volvo.blocks"
     },
     {
-      "name": "v-input-floating-label",
+      "name": "v-input__password-visibility-control",
       "prefixes": [],
       "declarations": [
-        "position: relative",
-        "--_transform-origin: var(--_rtl-toggle) 100%",
-        "z-index: 1",
-        "color: var(--v-color-foreground-secondary)",
-        "pointer-events: none",
-        "transition: transform var(--v-transition-default)",
-        "transform-origin: var(--_transform-origin, 0)",
-        "top: 0",
-        "position: absolute",
-        "inset-inline-start: var(--v-space-16)",
-        "transform: translateY(5px)scale(.75)",
-        "height: 3.5rem",
-        "padding-top: 1.625rem",
-        "padding-bottom: .625rem"
+        "background-image: var(--_icon-eye-slash)",
+        "background-position: center",
+        "background-repeat: no-repeat",
+        "background-size: 1.5rem 1.5rem",
+        "flex-shrink: 0",
+        "width: 1.5rem",
+        "height: 1.5rem"
       ],
       "layer": "volvo.blocks"
     },
@@ -1681,51 +1897,6 @@
       ],
       "layer": "volvo.utilities"
     },
-    {
-      "name": "title-24",
-      "prefixes": [],
-      "declarations": [
-        "font-size: var(--v-font-title-24-size)",
-        "line-height: var(--v-font-title-24-lineheight)"
-      ],
-      "layer": "volvo.utilities"
-    },
-    {
-      "name": "title-20",
-      "prefixes": [],
-      "declarations": [
-        "font-size: var(--v-font-title-20-size)",
-        "line-height: var(--v-font-title-20-lineheight)"
-      ],
-      "layer": "volvo.utilities"
-    },
-    {
-      "name": "body-16",
-      "prefixes": [],
-      "declarations": [
-        "font-size: var(--v-font-16-size)",
-        "line-height: var(--v-font-16-lineheight)"
-      ],
-      "layer": "volvo.utilities"
-    },
-    {
-      "name": "micro",
-      "prefixes": [],
-      "declarations": [
-        "font-size: var(--v-font-12-size)",
-        "line-height: var(--v-font-12-lineheight)",
-        "letter-spacing: .02em"
-      ],
-      "layer": "volvo.utilities"
-    },
-    {
-      "name": "font-medium",
-      "prefixes": [],
-      "declarations": [
-        "font-weight: 500"
-      ],
-      "layer": "volvo.utilities"
-    },
     {
       "name": "font-light",
       "prefixes": [],
@@ -3314,11 +3485,11 @@
       "name": "sr-only",
       "prefixes": [],
       "declarations": [
-        "width: 1px",
-        "height: 1px",
         "clip: rect(0, 0, 0, 0)",
         "white-space: nowrap",
         "border-width: 0",
+        "width: 1px",
+        "height: 1px",
         "margin: -1px",
         "padding: 0",
         "position: absolute",
@@ -3348,13 +3519,15 @@
       "css": "--v-transition-default",
       "type": "transition",
       "variant": "default",
-      "meta": {}
+      "meta": {},
+      "value": "var(--_v-transition-speed-default) ease"
     },
     {
       "css": "--v-transition-micro",
       "type": "transition",
       "variant": "micro",
-      "meta": {}
+      "meta": {},
+      "value": "var(--_v-transition-speed-fast) ease"
     },
     {
       "css": "--v-space-4",
@@ -3362,7 +3535,8 @@
       "variant": "4",
       "meta": {
         "description": "Fixed 4px spacing"
-      }
+      },
+      "value": "0.25rem"
     },
     {
       "css": "--v-space-8",
@@ -3370,7 +3544,8 @@
       "variant": "8",
       "meta": {
         "description": "Fixed 8px spacing"
-      }
+      },
+      "value": "0.5rem"
     },
     {
       "css": "--v-space-16",
@@ -3378,7 +3553,8 @@
       "variant": "16",
       "meta": {
         "description": "Fixed 16px spacing"
-      }
+      },
+      "value": "1rem"
     },
     {
       "css": "--v-space-24",
@@ -3386,7 +3562,8 @@
       "variant": "24",
       "meta": {
         "description": "Fixed 24px spacing"
-      }
+      },
+      "value": "1.5rem"
     },
     {
       "css": "--v-space-32",
@@ -3394,7 +3571,8 @@
       "variant": "32",
       "meta": {
         "description": "Fixed 32px spacing"
-      }
+      },
+      "value": "2rem"
     },
     {
       "css": "--v-space-48",
@@ -3402,7 +3580,8 @@
       "variant": "48",
       "meta": {
         "description": "Fixed 48px spacing"
-      }
+      },
+      "value": "3rem"
     },
     {
       "css": "--v-space-64",
@@ -3410,7 +3589,8 @@
       "variant": "64",
       "meta": {
         "description": "Fixed 64px spacing"
-      }
+      },
+      "value": "4rem"
     },
     {
       "css": "--v-space-l",
@@ -3419,7 +3599,8 @@
       "meta": {
         "direction": "vertical",
         "description": "Fluid spacing between 64px-96px."
-      }
+      },
+      "value": "clamp(4rem, 4vw + 2.8rem, 6rem)"
     },
     {
       "css": "--v-space-m",
@@ -3428,7 +3609,8 @@
       "meta": {
         "direction": "vertical",
         "description": "Fluid spacing between 48px-64px."
-      }
+      },
+      "value": "clamp(3rem, 3vw + 2rem, 4rem)"
     },
     {
       "css": "--v-space-s",
@@ -3437,7 +3619,8 @@
       "meta": {
         "direction": "vertical",
         "description": "Fluid spacing between 32px-48px."
-      }
+      },
+      "value": "clamp(2rem, 3vw + 1rem, 3rem)"
     },
     {
       "css": "--v-space-pagemargin",
@@ -3447,7 +3630,8 @@
         "direction": "horizontal",
         "property": "margin,padding",
         "description": "The fluid outer horizontal margins of the main page container.\n375  - 24px\n768  - 24px\n1280 - 28px\n1680 - 128px"
-      }
+      },
+      "value": "clamp(var(--_pagemargin-min), 22vw - 16.3rem, 8rem)"
     },
     {
       "css": "--v-space-gutter",
@@ -3457,7 +3641,8 @@
         "direction": "horizontal",
         "property": "gap",
         "description": "The horizontal gap between grid columns. Fluid between 16px-24px."
-      }
+      },
+      "value": "clamp(1rem, 2.6vw + 0.3rem, 1.5rem)"
     },
     {
       "css": "--v-grid-columns",
@@ -3465,7 +3650,8 @@
       "variant": "columns",
       "meta": {
         "description": "The total number of grid columns at the current breakpoint."
-      }
+      },
+      "value": "8"
     },
     {
       "css": "--v-size-gridcolumn",
@@ -3473,7 +3659,8 @@
       "variant": "gridcolumn",
       "meta": {
         "description": "The width of a single grid column."
-      }
+      },
+      "value": "calc(\n    (\n        var(--v-size-gridmax) - (var(--v-grid-columns) - 1) *\n          var(--v-space-gutter)\n      ) / var(--v-grid-columns)\n  )"
     },
     {
       "css": "--v-size-gridmax",
@@ -3481,7 +3668,8 @@
       "variant": "gridmax",
       "meta": {
         "description": "The maximum width of the 12 column grid."
-      }
+      },
+      "value": "min(80rem, 100vw - var(--_pagemargin-min) * 2)"
     },
     {
       "css": "--v-size-pagemax",
@@ -3489,144 +3677,166 @@
       "variant": "pagemax",
       "meta": {
         "description": "The maximum width a page is allowed to grow to."
-      }
+      },
+      "value": "min(160rem, 100vw)"
     },
     {
       "css": "--v-radius-4",
       "type": "radius",
       "variant": "4",
-      "meta": {}
+      "meta": {},
+      "value": "0.25rem"
     },
     {
       "css": "--v-radius-full",
       "type": "radius",
       "variant": "full",
-      "meta": {}
+      "meta": {},
+      "value": "9999px"
     },
     {
       "css": "--v-index-spinner",
       "type": "index",
       "variant": "spinner",
-      "meta": {}
+      "meta": {},
+      "value": "30"
     },
     {
       "css": "--v-index-overlay",
       "type": "index",
       "variant": "overlay",
-      "meta": {}
+      "meta": {},
+      "value": "20"
     },
     {
       "css": "--v-index-navigation",
       "type": "index",
       "variant": "navigation",
-      "meta": {}
+      "meta": {},
+      "value": "10"
     },
     {
       "css": "--v-index-default",
       "type": "index",
       "variant": "default",
-      "meta": {}
+      "meta": {},
+      "value": "0"
     },
     {
       "css": "--v-index-deep",
       "type": "index",
       "variant": "deep",
-      "meta": {}
+      "meta": {},
+      "value": "-1"
     },
     {
       "css": "--v-font-sans-family",
       "type": "font",
       "property": "family",
       "variant": "sans",
-      "meta": {}
+      "meta": {},
+      "value": "'Volvo Novum', 'Segoe UI', 'Helvetica Neue', 'Helvetica',\n    'Arial', sans-serif"
     },
     {
       "css": "--v-font-broad-family",
       "type": "font",
       "property": "family",
       "variant": "broad",
-      "meta": {}
+      "meta": {},
+      "value": "'Volvo Broad', 'Arial Black', sans-serif"
     },
     {
       "css": "--v-font-mono-family",
       "type": "font",
       "property": "family",
       "variant": "mono",
-      "meta": {}
+      "meta": {},
+      "value": "monospace"
     },
     {
       "css": "--v-font-regular-weight",
       "type": "font",
       "property": "weight",
       "variant": "regular",
-      "meta": {}
+      "meta": {},
+      "value": "300"
     },
     {
       "css": "--v-font-emphasis-weight",
       "type": "font",
       "property": "weight",
       "variant": "emphasis",
-      "meta": {}
+      "meta": {},
+      "value": "500"
     },
     {
       "css": "--v-font-16-size",
       "type": "font",
       "property": "size",
       "variant": "16",
-      "meta": {}
+      "meta": {},
+      "value": "1rem"
     },
     {
       "css": "--v-font-16-lineheight",
       "type": "font",
       "property": "lineheight",
       "variant": "16",
-      "meta": {}
+      "meta": {},
+      "value": "1.5"
     },
     {
       "css": "--v-font-16",
       "type": "font",
       "variant": "16",
-      "meta": {}
+      "meta": {},
+      "value": "var(--v-font-regular-weight) var(--v-font-16-size) /\n    var(--v-font-16-lineheight) var(--v-font-sans-family)"
     },
     {
       "css": "--v-font-14-size",
       "type": "font",
       "property": "size",
       "variant": "14",
-      "meta": {}
+      "meta": {},
+      "value": "0.875rem"
     },
     {
       "css": "--v-font-14-lineheight",
       "type": "font",
       "property": "lineheight",
       "variant": "14",
-      "meta": {}
+      "meta": {},
+      "value": "1.57"
     },
     {
       "css": "--v-font-14",
       "type": "font",
       "variant": "14",
-      "meta": {}
+      "meta": {},
+      "value": "var(--v-font-regular-weight) var(--v-font-14-size) /\n    var(--v-font-14-lineheight) var(--v-font-sans-family)"
     },
     {
       "css": "--v-font-12-size",
       "type": "font",
       "property": "size",
       "variant": "12",
-      "meta": {}
+      "meta": {},
+      "value": "0.75rem"
     },
     {
       "css": "--v-font-12-lineheight",
       "type": "font",
       "property": "lineheight",
       "variant": "12",
-      "meta": {}
+      "meta": {},
+      "value": "1.67"
     },
     {
       "css": "--v-font-12",
       "type": "font",
       "variant": "12",
-      "meta": {}
+      "meta": {},
+      "value": "var(--v-font-regular-weight) var(--v-font-12-size) /\n    var(--v-font-12-lineheight) var(--v-font-sans-family)"
     },
     {
       "css": "--v-font-heading-1-lineheight",
@@ -3634,7 +3844,8 @@
       "property": "lineheight",
       "variant": "1",
       "category": "heading",
-      "meta": {}
+      "meta": {},
+      "value": "var(--_heading-lineheight)"
     },
     {
       "css": "--v-font-heading-1-size-min",
@@ -3643,7 +3854,8 @@
       "property": "size",
       "variant": "1",
       "category": "heading",
-      "meta": {}
+      "meta": {},
+      "value": "2rem"
     },
     {
       "css": "--v-font-heading-1-size-max",
@@ -3652,7 +3864,8 @@
       "property": "size",
       "variant": "1",
       "category": "heading",
-      "meta": {}
+      "meta": {},
+      "value": "2.5rem"
     },
     {
       "css": "--v-font-heading-1-size",
@@ -3660,14 +3873,16 @@
       "property": "size",
       "variant": "1",
       "category": "heading",
-      "meta": {}
+      "meta": {},
+      "value": "clamp(\n    var(--v-font-heading-1-size-min),\n    1vw + 1.7rem,\n    var(--v-font-heading-1-size-max)\n  )"
     },
     {
       "css": "--v-font-heading-1",
       "type": "font",
       "variant": "1",
       "category": "heading",
-      "meta": {}
+      "meta": {},
+      "value": "var(--v-font-emphasis-weight) var(--v-font-heading-1-size) /\n    var(--v-font-heading-1-lineheight) var(--v-font-sans-family)"
     },
     {
       "css": "--v-font-heading-2-lineheight",
@@ -3675,7 +3890,8 @@
       "property": "lineheight",
       "variant": "2",
       "category": "heading",
-      "meta": {}
+      "meta": {},
+      "value": "var(--_heading-lineheight)"
     },
     {
       "css": "--v-font-heading-2-size-min",
@@ -3684,7 +3900,8 @@
       "property": "size",
       "variant": "2",
       "category": "heading",
-      "meta": {}
+      "meta": {},
+      "value": "1.5rem"
     },
     {
       "css": "--v-font-heading-2-size-max",
@@ -3693,7 +3910,8 @@
       "property": "size",
       "variant": "2",
       "category": "heading",
-      "meta": {}
+      "meta": {},
+      "value": "2rem"
     },
     {
       "css": "--v-font-heading-2-size",
@@ -3701,14 +3919,16 @@
       "property": "size",
       "variant": "2",
       "category": "heading",
-      "meta": {}
+      "meta": {},
+      "value": "clamp(\n    var(--v-font-heading-2-size-min),\n    1vw + 1.2rem,\n    var(--v-font-heading-2-size-max)\n  )"
     },
     {
       "css": "--v-font-heading-2",
       "type": "font",
       "variant": "2",
       "category": "heading",
-      "meta": {}
+      "meta": {},
+      "value": "var(--v-font-emphasis-weight) var(--v-font-heading-2-size) /\n    var(--v-font-heading-2-lineheight) var(--v-font-sans-family)"
     },
     {
       "css": "--v-font-heading-3-lineheight",
@@ -3716,7 +3936,8 @@
       "property": "lineheight",
       "variant": "3",
       "category": "heading",
-      "meta": {}
+      "meta": {},
+      "value": "var(--_heading-lineheight)"
     },
     {
       "css": "--v-font-heading-3-size-min",
@@ -3725,7 +3946,8 @@
       "property": "size",
       "variant": "3",
       "category": "heading",
-      "meta": {}
+      "meta": {},
+      "value": "1.5rem"
     },
     {
       "css": "--v-font-heading-3-size-max",
@@ -3734,7 +3956,8 @@
       "property": "size",
       "variant": "3",
       "category": "heading",
-      "meta": {}
+      "meta": {},
+      "value": "2rem"
     },
     {
       "css": "--v-font-heading-3-size",
@@ -3742,14 +3965,16 @@
       "property": "size",
       "variant": "3",
       "category": "heading",
-      "meta": {}
+      "meta": {},
+      "value": "clamp(\n    var(--v-font-heading-3-size-min),\n    1vw + 1.2rem,\n    var(--v-font-heading-3-size-max)\n  )"
     },
     {
       "css": "--v-font-heading-3",
       "type": "font",
       "variant": "3",
       "category": "heading",
-      "meta": {}
+      "meta": {},
+      "value": "var(--v-font-regular-weight) var(--v-font-heading-3-size) /\n    var(--v-font-heading-3-lineheight) var(--v-font-sans-family)"
     },
     {
       "css": "--v-font-statement-1-lineheight",
@@ -3757,7 +3982,8 @@
       "property": "lineheight",
       "variant": "1",
       "category": "statement",
-      "meta": {}
+      "meta": {},
+      "value": "var(--_heading-lineheight)"
     },
     {
       "css": "--v-font-statement-1-size-min",
@@ -3766,7 +3992,8 @@
       "property": "size",
       "variant": "1",
       "category": "statement",
-      "meta": {}
+      "meta": {},
+      "value": "4rem"
     },
     {
       "css": "--v-font-statement-1-size-max",
@@ -3775,7 +4002,8 @@
       "property": "size",
       "variant": "1",
       "category": "statement",
-      "meta": {}
+      "meta": {},
+      "value": "6rem"
     },
     {
       "css": "--v-font-statement-1-size",
@@ -3783,14 +4011,16 @@
       "property": "size",
       "variant": "1",
       "category": "statement",
-      "meta": {}
+      "meta": {},
+      "value": "clamp(\n    var(--v-font-statement-1-size-min),\n    4vw + 2.8rem,\n    var(--v-font-statement-1-size-max)\n  )"
     },
     {
       "css": "--v-font-statement-1",
       "type": "font",
       "variant": "1",
       "category": "statement",
-      "meta": {}
+      "meta": {},
+      "value": "var(--v-font-emphasis-weight)\n    var(--v-font-statement-1-size) / var(--v-font-statement-1-lineheight)\n    var(--v-font-sans-family)"
     },
     {
       "css": "--v-font-statement-2-lineheight",
@@ -3798,7 +4028,8 @@
       "property": "lineheight",
       "variant": "2",
       "category": "statement",
-      "meta": {}
+      "meta": {},
+      "value": "var(--_heading-lineheight)"
     },
     {
       "css": "--v-font-statement-2-size-min",
@@ -3807,7 +4038,8 @@
       "property": "size",
       "variant": "2",
       "category": "statement",
-      "meta": {}
+      "meta": {},
+      "value": "3.5rem"
     },
     {
       "css": "--v-font-statement-2-size-max",
@@ -3816,7 +4048,8 @@
       "property": "size",
       "variant": "2",
       "category": "statement",
-      "meta": {}
+      "meta": {},
+      "value": "4.5rem"
     },
     {
       "css": "--v-font-statement-2-size",
@@ -3824,14 +4057,16 @@
       "property": "size",
       "variant": "2",
       "category": "statement",
-      "meta": {}
+      "meta": {},
+      "value": "clamp(\n    var(--v-font-statement-2-size-min),\n    2vw + 2.9rem,\n    var(--v-font-statement-2-size-max)\n  )"
     },
     {
       "css": "--v-font-statement-2",
       "type": "font",
       "variant": "2",
       "category": "statement",
-      "meta": {}
+      "meta": {},
+      "value": "var(--v-font-emphasis-weight)\n    var(--v-font-statement-2-size) / var(--v-font-statement-2-lineheight)\n    var(--v-font-sans-family)"
     },
     {
       "css": "--v-font-statement-3-lineheight",
@@ -3839,7 +4074,8 @@
       "property": "lineheight",
       "variant": "3",
       "category": "statement",
-      "meta": {}
+      "meta": {},
+      "value": "var(--_heading-lineheight)"
     },
     {
       "css": "--v-font-statement-3-size-min",
@@ -3848,7 +4084,8 @@
       "property": "size",
       "variant": "3",
       "category": "statement",
-      "meta": {}
+      "meta": {},
+      "value": "3rem"
     },
     {
       "css": "--v-font-statement-3-size-max",
@@ -3857,7 +4094,8 @@
       "property": "size",
       "variant": "3",
       "category": "statement",
-      "meta": {}
+      "meta": {},
+      "value": "3.5rem"
     },
     {
       "css": "--v-font-statement-3-size",
@@ -3865,14 +4103,16 @@
       "property": "size",
       "variant": "3",
       "category": "statement",
-      "meta": {}
+      "meta": {},
+      "value": "clamp(\n    var(--v-font-statement-3-size-min),\n    1vw + 2.7rem,\n    var(--v-font-statement-3-size-max)\n  )"
     },
     {
       "css": "--v-font-statement-3",
       "type": "font",
       "variant": "3",
       "category": "statement",
-      "meta": {}
+      "meta": {},
+      "value": "var(--v-font-emphasis-weight)\n    var(--v-font-statement-3-size) / var(--v-font-statement-3-lineheight)\n    var(--v-font-sans-family)"
     },
     {
       "css": "--v-font-statement-signature-lineheight",
@@ -3880,7 +4120,8 @@
       "property": "lineheight",
       "variant": "signature",
       "category": "statement",
-      "meta": {}
+      "meta": {},
+      "value": "1"
     },
     {
       "css": "--v-font-statement-signature-size-min",
@@ -3889,7 +4130,8 @@
       "property": "size",
       "variant": "signature",
       "category": "statement",
-      "meta": {}
+      "meta": {},
+      "value": "2.5rem"
     },
     {
       "css": "--v-font-statement-signature-size-max",
@@ -3898,7 +4140,8 @@
       "property": "size",
       "variant": "signature",
       "category": "statement",
-      "meta": {}
+      "meta": {},
+      "value": "4.5rem"
     },
     {
       "css": "--v-font-statement-signature-size",
@@ -3906,14 +4149,16 @@
       "property": "size",
       "variant": "signature",
       "category": "statement",
-      "meta": {}
+      "meta": {},
+      "value": "clamp(\n    var(--v-font-statement-signature-size-min),\n    4vw + 1.3rem,\n    var(--v-font-statement-signature-size-max)\n  )"
     },
     {
       "css": "--v-font-statement-signature",
       "type": "font",
       "variant": "signature",
       "category": "statement",
-      "meta": {}
+      "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",
@@ -3921,7 +4166,8 @@
       "property": "size",
       "variant": "24",
       "category": "title",
-      "meta": {}
+      "meta": {},
+      "value": "1.5rem"
     },
     {
       "css": "--v-font-title-24-lineheight",
@@ -3929,14 +4175,16 @@
       "property": "lineheight",
       "variant": "24",
       "category": "title",
-      "meta": {}
+      "meta": {},
+      "value": "1.334"
     },
     {
       "css": "--v-font-title-24",
       "type": "font",
       "variant": "24",
       "category": "title",
-      "meta": {}
+      "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",
@@ -3944,7 +4192,8 @@
       "property": "size",
       "variant": "20",
       "category": "title",
-      "meta": {}
+      "meta": {},
+      "value": "1.25rem"
     },
     {
       "css": "--v-font-title-20-lineheight",
@@ -3952,14 +4201,16 @@
       "property": "lineheight",
       "variant": "20",
       "category": "title",
-      "meta": {}
+      "meta": {},
+      "value": "1.4"
     },
     {
       "css": "--v-font-title-20",
       "type": "font",
       "variant": "20",
       "category": "title",
-      "meta": {}
+      "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",
@@ -3968,7 +4219,10 @@
       "category": "always",
       "meta": {
         "description": "Always black regardless of colour mode."
-      }
+      },
+      "value": [
+        "#141414"
+      ]
     },
     {
       "css": "--v-color-always-white",
@@ -3977,7 +4231,10 @@
       "category": "always",
       "meta": {
         "description": "Always white regardless of colour mode."
-      }
+      },
+      "value": [
+        "#ffffff"
+      ]
     },
     {
       "css": "--v-color-foreground-primary",
@@ -3986,7 +4243,11 @@
       "variant": "primary",
       "meta": {
         "description": "Use for primary text and icons."
-      }
+      },
+      "value": [
+        "#1f1f1f",
+        "#ffffff"
+      ]
     },
     {
       "css": "--v-color-foreground-secondary",
@@ -3995,7 +4256,11 @@
       "variant": "secondary",
       "meta": {
         "description": "Use for secondary text and icons."
-      }
+      },
+      "value": [
+        "var(--_v-color-black-64)",
+        "rgb(255 255 255 / 64%)"
+      ]
     },
     {
       "css": "--v-color-foreground-inverted",
@@ -4004,7 +4269,11 @@
       "variant": "inverted",
       "meta": {
         "description": "Inverse of the primary foreground colour."
-      }
+      },
+      "value": [
+        "#ffffff",
+        "#000000"
+      ]
     },
     {
       "css": "--v-color-foreground-accent-blue",
@@ -4014,7 +4283,11 @@
       "category": "accent",
       "meta": {
         "description": "Use for links and selected states."
-      }
+      },
+      "value": [
+        "#2a609d",
+        "#2387eb"
+      ]
     },
     {
       "css": "--v-color-foreground-feedback-green",
@@ -4024,7 +4297,11 @@
       "category": "feedback",
       "meta": {
         "description": "Use to signify positive actions."
-      }
+      },
+      "value": [
+        "#048220",
+        "#07a62b"
+      ]
     },
     {
       "css": "--v-color-foreground-feedback-orange",
@@ -4034,7 +4311,11 @@
       "category": "feedback",
       "meta": {
         "description": "Use for highlighting errors, invalid data, and destructive actions for caution."
-      }
+      },
+      "value": [
+        "#eb7400",
+        "#ff9400"
+      ]
     },
     {
       "css": "--v-color-foreground-feedback-red",
@@ -4044,7 +4325,11 @@
       "category": "feedback",
       "meta": {
         "description": "Use for highlighting errors, invalid data, and destructive actions."
-      }
+      },
+      "value": [
+        "#bf2012",
+        "#ff3320"
+      ]
     },
     {
       "css": "--v-color-ornament-primary",
@@ -4053,7 +4338,11 @@
       "variant": "primary",
       "meta": {
         "description": "Use to visually group or separate UI elements."
-      }
+      },
+      "value": [
+        "var(--_v-color-black-16)",
+        "rgb(255 255 255 / 12%)"
+      ]
     },
     {
       "css": "--v-color-surface-neutral",
@@ -4062,7 +4351,11 @@
       "variant": "neutral",
       "meta": {
         "description": "Use for neutral surfaces."
-      }
+      },
+      "value": [
+        "#1f1f1f",
+        "#ffffff"
+      ]
     },
     {
       "css": "--v-color-surface-accent-blue",
@@ -4072,7 +4365,11 @@
       "category": "accent",
       "meta": {
         "description": "Use for CTA backgrounds."
-      }
+      },
+      "value": [
+        "#2a609d",
+        "#1f78d1"
+      ]
     },
     {
       "css": "--v-color-surface-feedback-green",
@@ -4082,7 +4379,11 @@
       "category": "feedback",
       "meta": {
         "description": "Use for positive and actionable states."
-      }
+      },
+      "value": [
+        "#048220",
+        "#088924"
+      ]
     },
     {
       "css": "--v-color-surface-feedback-orange",
@@ -4092,7 +4393,11 @@
       "category": "feedback",
       "meta": {
         "description": "Use for cautionary background states."
-      }
+      },
+      "value": [
+        "#eb7400",
+        "#ff9400"
+      ]
     },
     {
       "css": "--v-color-surface-feedback-red",
@@ -4102,7 +4407,11 @@
       "category": "feedback",
       "meta": {
         "description": "Use for errors, invalid and destructive background states."
-      }
+      },
+      "value": [
+        "#bf2012",
+        "#cc2617"
+      ]
     },
     {
       "css": "--v-color-background-primary",
@@ -4111,7 +4420,11 @@
       "variant": "primary",
       "meta": {
         "description": "Use as the primary background."
-      }
+      },
+      "value": [
+        "#ffffff",
+        "#000000"
+      ]
     },
     {
       "css": "--v-color-background-secondary",
@@ -4120,7 +4433,49 @@
       "variant": "secondary",
       "meta": {
         "description": "Use as the secondary background."
-      }
+      },
+      "value": [
+        "#fafafa",
+        "#141414"
+      ]
+    }
+  ],
+  "customMedia": [
+    {
+      "name": "--v-until-md",
+      "value": "(width < 30rem)"
+    },
+    {
+      "name": "--v-only-md",
+      "value": "(30rem <= width < 64rem)"
+    },
+    {
+      "name": "--v-from-md",
+      "value": "(width >= 30rem)"
+    },
+    {
+      "name": "--v-until-lg",
+      "value": "(width < 64rem)"
+    },
+    {
+      "name": "--v-only-lg",
+      "value": "(64rem <= width < 100rem)"
+    },
+    {
+      "name": "--v-from-lg",
+      "value": "(width >= 64rem)"
+    },
+    {
+      "name": "--v-until-xl",
+      "value": "(width < 100rem)"
+    },
+    {
+      "name": "--v-only-xl",
+      "value": "(width >= 100rem)"
+    },
+    {
+      "name": "--v-from-xl",
+      "value": "(width >= 100rem)"
     }
   ]
 }