@volvo-cars/css 1.37.0 → 1.37.1

package/dist/meta.json

@@ -1930,6 +1930,7 @@
         "--_color: var(--v-color-foreground-inverted)",
         "color: var(--_color)",
         "background: color-mix(in oklab, var(--button-accent-color), var(--_color) var(--_overlay-rate))",
+        "background: var(--button-accent-color)",
         "--_overlay-rate: 0%",
         "border-radius: var(--v-radius-full)",
         "flex-shrink: 0",
@@ -2004,6 +2005,7 @@
         "--_color: var(--v-color-foreground-inverted)",
         "color: var(--_color)",
         "background: color-mix(in oklab, var(--button-accent-color), var(--_color) var(--_overlay-rate))",
+        "background: var(--button-accent-color)",
         "--_overlay-rate: 0%",
         "--spinner-size: 1.5rem",
         "padding-inline: var(--v-space-24)",
@@ -9174,326 +9176,575 @@
   ],
   "tokens": [
     {
-      "css": "--v-transition-default",
-      "type": "transition",
-      "variant": "default",
-      "meta": {},
-      "value": "var(--_v-transition-speed-default) ease"
-    },
-    {
-      "css": "--v-transition-micro",
-      "type": "transition",
-      "variant": "micro",
-      "meta": {},
-      "value": "var(--_v-transition-speed-fast) ease"
-    },
-    {
-      "css": "--v-transition-notable",
-      "type": "transition",
-      "variant": "notable",
-      "meta": {},
-      "value": "var(--_v-transition-speed-slow) ease"
-    },
-    {
-      "css": "--v-space-2",
-      "type": "space",
-      "variant": "2",
+      "css": "--v-color-always-black",
+      "type": "color",
+      "variant": "black",
+      "category": "always",
       "meta": {
-        "property": "margin,padding",
-        "description": "Fixed 2px spacing"
+        "description": "Always black regardless of colour mode."
       },
-      "value": "0.125rem"
+      "value": [
+        "#000000"
+      ]
     },
     {
-      "css": "--v-space-4",
-      "type": "space",
-      "variant": "4",
+      "css": "--v-color-always-white",
+      "type": "color",
+      "variant": "white",
+      "category": "always",
       "meta": {
-        "description": "Fixed 4px spacing"
+        "description": "Always white regardless of color mode."
       },
-      "value": "0.25rem"
+      "value": [
+        "#ffffff"
+      ]
     },
     {
-      "css": "--v-space-8",
-      "type": "space",
-      "variant": "8",
+      "css": "--v-color-background-feedback-gray",
+      "type": "color",
+      "property": "background",
+      "variant": "gray",
+      "category": "feedback",
       "meta": {
-        "description": "Fixed 8px spacing"
+        "description": "Use as a background color to indicate informational messages."
       },
-      "value": "0.5rem"
+      "value": [
+        "#f5f5f5",
+        "#2e2e2e"
+      ]
     },
     {
-      "css": "--v-space-16",
-      "type": "space",
-      "variant": "16",
+      "css": "--v-color-background-feedback-green",
+      "type": "color",
+      "property": "background",
+      "variant": "green",
+      "category": "feedback",
       "meta": {
-        "description": "Fixed 16px spacing"
+        "description": "Use as a background color to highlight successful and positive states."
       },
-      "value": "1rem"
+      "value": [
+        "#d7f9df",
+        "#02310c"
+      ]
     },
     {
-      "css": "--v-space-24",
-      "type": "space",
-      "variant": "24",
+      "css": "--v-color-background-feedback-orange",
+      "type": "color",
+      "property": "background",
+      "variant": "orange",
+      "category": "feedback",
       "meta": {
-        "description": "Fixed 24px spacing"
+        "description": "Use as a background color to highlight warnings, invalid or missing data, and states that require caution."
       },
-      "value": "1.5rem"
+      "value": [
+        "#ffe8d1",
+        "#522900"
+      ]
     },
     {
-      "css": "--v-space-32",
-      "type": "space",
-      "variant": "32",
+      "css": "--v-color-background-feedback-red",
+      "type": "color",
+      "property": "background",
+      "variant": "red",
+      "category": "feedback",
       "meta": {
-        "description": "Fixed 32px spacing"
+        "description": "Use as a background color to highlight errors, invalid data, and destructive states."
       },
-      "value": "2rem"
+      "value": [
+        "#fce5e3",
+        "#4a0d07"
+      ]
     },
     {
-      "css": "--v-space-48",
-      "type": "space",
-      "variant": "48",
+      "css": "--v-color-background-primary",
+      "type": "color",
+      "property": "background",
+      "variant": "primary",
       "meta": {
-        "description": "Fixed 48px spacing"
+        "description": "Use as a primary background color."
       },
-      "value": "3rem"
+      "value": [
+        "#ffffff",
+        "#141414"
+      ]
     },
     {
-      "css": "--v-space-64",
-      "type": "space",
-      "variant": "64",
+      "css": "--v-color-background-secondary",
+      "type": "color",
+      "property": "background",
+      "variant": "secondary",
       "meta": {
-        "description": "Fixed 64px spacing"
+        "description": "Use as a secondary background color for elevated sections."
       },
-      "value": "4rem"
+      "value": [
+        "#fafafa",
+        "#1f1f1f"
+      ]
     },
     {
-      "css": "--v-space-l",
-      "type": "space",
-      "variant": "l",
+      "css": "--v-color-foreground-accent-blue",
+      "type": "color",
+      "property": "foreground",
+      "variant": "blue",
+      "category": "accent",
       "meta": {
-        "direction": "vertical",
-        "description": "Fluid spacing between 64px-96px."
+        "description": "For use in links and as a border in emphasized selected states."
       },
-      "value": "clamp(4rem, 4vw + 2.8rem, 6rem)"
+      "value": [
+        "#1c6eba",
+        "#378fe1"
+      ]
     },
     {
-      "css": "--v-space-m",
-      "type": "space",
-      "variant": "m",
+      "css": "--v-color-foreground-feedback-green",
+      "type": "color",
+      "property": "foreground",
+      "variant": "green",
+      "category": "feedback",
       "meta": {
-        "direction": "vertical",
-        "description": "Fluid spacing between 48px-64px."
+        "description": "Use as a foreground or border color to highlight successful states and positive actions."
       },
-      "value": "clamp(3rem, 3vw + 2rem, 4rem)"
+      "value": [
+        "#04771d",
+        "#07ca31"
+      ]
     },
     {
-      "css": "--v-space-s",
-      "type": "space",
-      "variant": "s",
+      "css": "--v-color-foreground-feedback-orange",
+      "type": "color",
+      "property": "foreground",
+      "variant": "orange",
+      "category": "feedback",
       "meta": {
-        "direction": "vertical",
-        "description": "Fluid spacing between 32px-48px."
+        "description": "Use as a foreground or border color to highlight warnings, invalid or missing data, and actions that require caution."
       },
-      "value": "clamp(2rem, 3vw + 1rem, 3rem)"
+      "value": [
+        "#ce6700",
+        "#ff9933"
+      ]
     },
     {
-      "css": "--v-space-pagemargin",
-      "type": "space",
-      "variant": "pagemargin",
+      "css": "--v-color-foreground-feedback-red",
+      "type": "color",
+      "property": "foreground",
+      "variant": "red",
+      "category": "feedback",
       "meta": {
-        "direction": "horizontal",
-        "property": "margin,padding",
-        "description": "The fluid outer horizontal margins of the main page container.\n375  - 24px\n768  - 24px\n1280 - 28px\n1680 - 128px"
+        "description": "Use as a foreground or border color to highlight errors, invalid data, and destructive actions."
       },
-      "value": "clamp(var(--_pagemargin-min), 22vw - 16.3rem, 8rem)"
+      "value": [
+        "#cd2314",
+        "#ef6658"
+      ]
     },
     {
-      "css": "--v-space-gutter",
-      "type": "space",
-      "variant": "gutter",
+      "css": "--v-color-foreground-inverted",
+      "type": "color",
+      "property": "foreground",
+      "variant": "inverted",
       "meta": {
-        "direction": "horizontal",
-        "property": "gap",
-        "description": "The horizontal gap between grid columns. Fluid between 16px-24px."
+        "description": "The inverse of the primary foreground color. For use on filled surfaces."
       },
-      "value": "clamp(1rem, 2.6vw + 0.3rem, 1.5rem)"
+      "value": [
+        "#ffffff",
+        "#0a0a0a"
+      ]
     },
     {
-      "css": "--v-size-grid-column",
-      "type": "size",
-      "variant": "column",
+      "css": "--v-color-foreground-primary",
+      "type": "color",
+      "property": "foreground",
+      "variant": "primary",
       "meta": {
-        "description": "The width of a single grid column."
+        "description": "Use for primary text, icons and borders."
       },
-      "value": "calc(\n    (\n      var(--v-size-grid-maxwidth) -\n      (var(--v-grid-columns) - 1) *\n      var(--v-space-gutter)\n    ) /\n    var(--v-grid-columns)\n  )"
+      "value": [
+        "#0a0a0a",
+        "#ffffff"
+      ]
     },
     {
-      "css": "--v-size-grid-maxwidth",
-      "type": "size",
-      "variant": "maxwidth",
+      "css": "--v-color-foreground-secondary",
+      "type": "color",
+      "property": "foreground",
+      "variant": "secondary",
       "meta": {
-        "description": "The maximum width of the 12 column grid."
+        "description": "Use for secondary text, icons and borders."
       },
-      "value": "min(81rem, 100vw - var(--_pagemargin-min) * 2)"
+      "value": [
+        "#616161",
+        "#bababa"
+      ]
     },
     {
-      "css": "--v-size-pagemax",
-      "type": "size",
-      "variant": "pagemax",
+      "css": "--v-color-foreground-tertiary",
+      "type": "color",
+      "property": "foreground",
+      "variant": "tertiary",
       "meta": {
-        "description": "The maximum width a page is allowed to grow to."
+        "description": "The lightest possible foreground color acceptable for UI fills. Should not be used for body text."
       },
-      "value": "min(160rem, 100vw)"
-    },
+      "value": [
+        "#838383"
+      ]
+    },
     {
-      "css": "--v-size-grid-xs",
-      "type": "size",
-      "variant": "xs",
+      "css": "--v-color-ornament-primary",
+      "type": "color",
+      "property": "ornament",
+      "variant": "primary",
       "meta": {
-        "description": "Width based on the colspan of the grid for the current viewport size  (4 / 6 / 4)"
+        "description": "Use for strokes or dividers to visually group or separate elements."
       },
-      "value": "calc(\n    (var(--v-size-grid-column) * var(--_xs-cols)) +\n    var(--v-space-gutter) *\n    (var(--_xs-cols) - 1)\n  )"
+      "value": [
+        "rgb(0 0 0 / 12%)",
+        "rgb(255 255 255 / 12%)"
+      ]
     },
     {
-      "css": "--v-size-grid-sm",
-      "type": "size",
-      "variant": "sm",
+      "css": "--v-color-ornament-scrim",
+      "type": "color",
+      "property": "ornament",
+      "variant": "scrim",
       "meta": {
-        "description": "Width based on the colspan of the grid for the current viewport size  (6 / 8 / 6)"
+        "description": "Used as a backdrop that usually sits behind a Side sheet or Dialog component."
       },
-      "value": "calc(\n    (var(--v-size-grid-column) * var(--_sm-cols)) +\n    var(--v-space-gutter) *\n    (var(--_sm-cols) - 1)\n  )"
+      "value": [
+        "rgb(0 0 0 / 64%)"
+      ]
     },
     {
-      "css": "--v-size-grid-md",
-      "type": "size",
-      "variant": "md",
+      "css": "--v-color-state-accent-blue-medium",
+      "type": "color",
+      "property": "state",
+      "scale": "medium",
+      "variant": "blue",
+      "category": "accent",
       "meta": {
-        "description": "Width based on the colspan of the grid for the current viewport size  (8 / 10 / 8)"
+        "description": "Use for state layers with foreground/accent/blue."
       },
-      "value": "calc(\n    (var(--v-size-grid-column) * var(--_md-cols)) +\n    var(--v-space-gutter) *\n    (var(--_md-cols) - 1)\n  )"
+      "value": [
+        "rgb(28 110 186 / 12%)",
+        "rgb(31 120 209 / 16%)"
+      ]
     },
     {
-      "css": "--v-size-grid-lg",
-      "type": "size",
-      "variant": "lg",
+      "css": "--v-color-state-accent-blue-strong",
+      "type": "color",
+      "property": "state",
+      "scale": "strong",
+      "variant": "blue",
+      "category": "accent",
       "meta": {
-        "description": "Width based on the colspan of the grid for the current viewport size  (8 / 10 / 12)"
+        "description": "Use for state layers with foreground/accent/blue."
       },
-      "value": "calc(\n    (var(--v-size-grid-column) * var(--_lg-cols)) +\n    var(--v-space-gutter) *\n    (var(--_lg-cols) - 1)\n  )"
+      "value": [
+        "rgb(28 110 186 / 20%)",
+        "rgb(31 120 209 / 24%)"
+      ]
     },
     {
-      "css": "--v-size-grid-xl",
-      "type": "size",
-      "variant": "xl",
+      "css": "--v-color-state-accent-blue-subtle",
+      "type": "color",
+      "property": "state",
+      "scale": "subtle",
+      "variant": "blue",
+      "category": "accent",
       "meta": {
-        "description": "Width based on the colspan of the grid for the current viewport size  (8 / 12 / 12)"
+        "description": "Use for state layers with foreground/accent/blue."
       },
-      "value": "calc(\n    (var(--v-size-grid-column) * var(--_xl-cols)) +\n    var(--v-space-gutter) *\n    (var(--_xl-cols) - 1)\n  )"
+      "value": [
+        "rgb(28 110 186 / 4%)",
+        "rgb(31 120 209 / 8%)"
+      ]
     },
     {
-      "css": "--v-size-grid-max",
-      "type": "size",
-      "variant": "max",
+      "css": "--v-color-state-always-black-medium",
+      "type": "color",
+      "property": "state",
+      "scale": "medium",
+      "variant": "black",
+      "category": "always",
       "meta": {
-        "description": "Width based on the maximum extent of a `max` container"
+        "description": "Use for state layers with an always/black foreground color."
       },
-      "value": "min(\n    (100vw - var(--v-space-pagemargin) * 2) +\n    var(--_outer-margin, 0rem),\n    160rem\n  )"
+      "value": [
+        "rgb(0 0 0 / 12%)",
+        "rgb(0 0 0 / 16%)"
+      ]
     },
     {
-      "css": "--v-size-contentmax",
-      "type": "size",
-      "variant": "contentmax",
+      "css": "--v-color-state-always-black-strong",
+      "type": "color",
+      "property": "state",
+      "scale": "strong",
+      "variant": "black",
+      "category": "always",
       "meta": {
-        "description": "The maximum width a block of content should be allowed to grow to while maintaining readability\nhttps://baymard.com/blog/line-length-readability"
+        "description": "Use for state layers with an always/black foreground color."
       },
-      "value": "70ch"
+      "value": [
+        "rgb(0 0 0 / 20%)",
+        "rgb(0 0 0 / 24%)"
+      ]
     },
     {
-      "css": "--v-radius-sm",
-      "type": "radius",
-      "variant": "sm",
-      "meta": {},
-      "value": "0.25rem"
+      "css": "--v-color-state-always-black-subtle",
+      "type": "color",
+      "property": "state",
+      "scale": "subtle",
+      "variant": "black",
+      "category": "always",
+      "meta": {
+        "description": "Use for state layers with an always/black foreground color."
+      },
+      "value": [
+        "rgb(0 0 0 / 4%)",
+        "rgb(0 0 0 / 8%)"
+      ]
     },
     {
-      "css": "--v-radius-md",
-      "type": "radius",
-      "variant": "md",
-      "meta": {},
-      "value": "0.5rem"
+      "css": "--v-color-state-always-white-medium",
+      "type": "color",
+      "property": "state",
+      "scale": "medium",
+      "variant": "white",
+      "category": "always",
+      "meta": {
+        "description": "Use for state layers with an always/white foreground color."
+      },
+      "value": [
+        "rgb(255 255 255 / 12%)",
+        "rgb(255 255 255 / 16%)"
+      ]
     },
     {
-      "css": "--v-radius-lg",
-      "type": "radius",
-      "variant": "lg",
-      "meta": {},
-      "value": "1rem"
+      "css": "--v-color-state-always-white-strong",
+      "type": "color",
+      "property": "state",
+      "scale": "strong",
+      "variant": "white",
+      "category": "always",
+      "meta": {
+        "description": "Use for state layers with an always/white foreground color."
+      },
+      "value": [
+        "rgb(255 255 255 / 20%)",
+        "rgb(255 255 255 / 24%)"
+      ]
     },
     {
-      "css": "--v-shape-default",
-      "type": "shape",
-      "variant": "default",
-      "meta": {},
-      "value": "var(--v-radius-sm)"
+      "css": "--v-color-state-always-white-subtle",
+      "type": "color",
+      "property": "state",
+      "scale": "subtle",
+      "variant": "white",
+      "category": "always",
+      "meta": {
+        "description": "Use for state layers with an always/white foreground color."
+      },
+      "value": [
+        "rgb(255 255 255 / 4%)",
+        "rgb(255 255 255 / 8%)"
+      ]
     },
     {
-      "css": "--v-shape-emphasis",
-      "type": "shape",
-      "variant": "emphasis",
-      "meta": {},
-      "value": "var(--v-radius-sm)"
+      "css": "--v-color-state-feedback-red-medium",
+      "type": "color",
+      "property": "state",
+      "scale": "medium",
+      "variant": "red",
+      "category": "feedback",
+      "meta": {
+        "description": "Use for state layers with foreground/feedback/red."
+      },
+      "value": [
+        "rgb(214 36 21 / 12%)",
+        "rgb(239 102 88 / 16%)"
+      ]
     },
     {
-      "css": "--v-radius-full",
-      "type": "radius",
-      "variant": "full",
-      "meta": {},
-      "value": "9999px"
+      "css": "--v-color-state-feedback-red-strong",
+      "type": "color",
+      "property": "state",
+      "scale": "strong",
+      "variant": "red",
+      "category": "feedback",
+      "meta": {
+        "description": "Use for state layers with foreground/feedback/red."
+      },
+      "value": [
+        "rgb(214 36 21 / 20%)",
+        "rgb(239 102 88 / 24%)"
+      ]
     },
     {
-      "css": "--v-index-spinner",
-      "type": "index",
-      "variant": "spinner",
-      "meta": {},
-      "value": "30"
+      "css": "--v-color-state-feedback-red-subtle",
+      "type": "color",
+      "property": "state",
+      "scale": "subtle",
+      "variant": "red",
+      "category": "feedback",
+      "meta": {
+        "description": "Use for state layers with foreground/feedback/red."
+      },
+      "value": [
+        "rgb(214 36 21 / 4%)",
+        "rgb(239 102 88 / 8%)"
+      ]
     },
     {
-      "css": "--v-index-overlay",
-      "type": "index",
-      "variant": "overlay",
-      "meta": {},
-      "value": "20"
+      "css": "--v-color-state-inverted-medium",
+      "type": "color",
+      "property": "state",
+      "scale": "medium",
+      "variant": "inverted",
+      "meta": {
+        "description": "Use for state layers with foreground/inverted."
+      },
+      "value": [
+        "rgb(255 255 255 / 12%)",
+        "rgb(0 0 0 / 16%)"
+      ]
     },
     {
-      "css": "--v-index-navigation",
-      "type": "index",
-      "variant": "navigation",
-      "meta": {},
-      "value": "10"
+      "css": "--v-color-state-inverted-strong",
+      "type": "color",
+      "property": "state",
+      "scale": "strong",
+      "variant": "inverted",
+      "meta": {
+        "description": "Use for state layers with foreground/inverted."
+      },
+      "value": [
+        "rgb(255 255 255 / 20%)",
+        "rgb(0 0 0 / 24%)"
+      ]
     },
     {
-      "css": "--v-index-default",
-      "type": "index",
-      "variant": "default",
-      "meta": {},
-      "value": "0"
+      "css": "--v-color-state-inverted-subtle",
+      "type": "color",
+      "property": "state",
+      "scale": "subtle",
+      "variant": "inverted",
+      "meta": {
+        "description": "Use for state layers with foreground/inverted."
+      },
+      "value": [
+        "rgb(255 255 255 / 4%)",
+        "rgb(0 0 0 / 8%)"
+      ]
     },
     {
-      "css": "--v-index-deep",
-      "type": "index",
-      "variant": "deep",
-      "meta": {},
-      "value": "-1"
+      "css": "--v-color-state-primary-medium",
+      "type": "color",
+      "property": "state",
+      "scale": "medium",
+      "variant": "primary",
+      "meta": {
+        "description": "Use for state layers with foreground/primary."
+      },
+      "value": [
+        "rgb(0 0 0 / 12%)",
+        "rgb(255 255 255 / 16%)"
+      ]
     },
     {
-      "css": "--v-grid-columns",
-      "type": "grid",
-      "variant": "columns",
+      "css": "--v-color-state-primary-strong",
+      "type": "color",
+      "property": "state",
+      "scale": "strong",
+      "variant": "primary",
       "meta": {
-        "description": "The total number of grid columns at the current breakpoint."
+        "description": "Use for state layers with foreground/primary."
       },
-      "value": "8"
+      "value": [
+        "rgb(0 0 0 / 20%)",
+        "rgb(255 255 255 / 24%)"
+      ]
+    },
+    {
+      "css": "--v-color-state-primary-subtle",
+      "type": "color",
+      "property": "state",
+      "scale": "subtle",
+      "variant": "primary",
+      "meta": {
+        "description": "Use for state layers with foreground/primary."
+      },
+      "value": [
+        "rgb(0 0 0 / 4%)",
+        "rgb(255 255 255 / 8%)"
+      ]
+    },
+    {
+      "css": "--v-color-surface-accent-blue",
+      "type": "color",
+      "property": "surface",
+      "variant": "blue",
+      "category": "accent",
+      "meta": {
+        "description": "Used as an emphasized surface fill for UI elements like buttons and form controls."
+      },
+      "value": [
+        "#1c6eba",
+        "#1f78d1"
+      ]
+    },
+    {
+      "css": "--v-color-surface-feedback-green",
+      "type": "color",
+      "property": "surface",
+      "variant": "green",
+      "category": "feedback",
+      "meta": {
+        "description": "Used as a surface fill for UI elements like buttons and form controls to signify positive actions. Combine with Always White foreground color."
+      },
+      "value": [
+        "#04771d",
+        "#048220"
+      ]
+    },
+    {
+      "css": "--v-color-surface-feedback-orange",
+      "type": "color",
+      "property": "surface",
+      "variant": "orange",
+      "category": "feedback",
+      "meta": {
+        "description": "[Deprecated]",
+        "deprecated": "The color will be removed in a future version."
+      },
+      "value": [
+        "#ce6700"
+      ]
+    },
+    {
+      "css": "--v-color-surface-feedback-red",
+      "type": "color",
+      "property": "surface",
+      "variant": "red",
+      "category": "feedback",
+      "meta": {
+        "description": "Used as a surface fill for UI elements like buttons and form controls to signify destructive actions. Combine with Always White foreground color."
+      },
+      "value": [
+        "#cd2314",
+        "#e52715"
+      ]
+    },
+    {
+      "css": "--v-color-surface-neutral",
+      "type": "color",
+      "property": "surface",
+      "variant": "neutral",
+      "meta": {
+        "description": "Used as a surface fill for UI elements like buttons and form controls. Combine with Foreground / Inverted foreground color."
+      },
+      "value": [
+        "#1f1f1f",
+        "#ffffff"
+      ]
     },
     {
       "css": "--v-font-sans-family",
@@ -10036,575 +10287,326 @@
       "value": "var(--v-font-statement-signature-weight)\n    var(--v-font-statement-signature-size) /\n    var(--v-font-statement-signature-lineheight) var(--v-font-broad-family)"
     },
     {
-      "css": "--v-color-always-black",
-      "type": "color",
-      "variant": "black",
-      "category": "always",
+      "css": "--v-space-2",
+      "type": "space",
+      "variant": "2",
       "meta": {
-        "description": "Always black regardless of colour mode."
+        "property": "margin,padding",
+        "description": "Fixed 2px spacing"
       },
-      "value": [
-        "#000000"
-      ]
+      "value": "0.125rem"
     },
     {
-      "css": "--v-color-always-white",
-      "type": "color",
-      "variant": "white",
-      "category": "always",
+      "css": "--v-space-4",
+      "type": "space",
+      "variant": "4",
       "meta": {
-        "description": "Always white regardless of color mode."
+        "description": "Fixed 4px spacing"
       },
-      "value": [
-        "#ffffff"
-      ]
+      "value": "0.25rem"
     },
     {
-      "css": "--v-color-background-feedback-gray",
-      "type": "color",
-      "property": "background",
-      "variant": "gray",
-      "category": "feedback",
+      "css": "--v-space-8",
+      "type": "space",
+      "variant": "8",
       "meta": {
-        "description": "Use as a background color to indicate informational messages."
+        "description": "Fixed 8px spacing"
       },
-      "value": [
-        "#f5f5f5",
-        "#2e2e2e"
-      ]
+      "value": "0.5rem"
     },
     {
-      "css": "--v-color-background-feedback-green",
-      "type": "color",
-      "property": "background",
-      "variant": "green",
-      "category": "feedback",
+      "css": "--v-space-16",
+      "type": "space",
+      "variant": "16",
       "meta": {
-        "description": "Use as a background color to highlight successful and positive states."
+        "description": "Fixed 16px spacing"
       },
-      "value": [
-        "#d7f9df",
-        "#02310c"
-      ]
+      "value": "1rem"
     },
     {
-      "css": "--v-color-background-feedback-orange",
-      "type": "color",
-      "property": "background",
-      "variant": "orange",
-      "category": "feedback",
+      "css": "--v-space-24",
+      "type": "space",
+      "variant": "24",
       "meta": {
-        "description": "Use as a background color to highlight warnings, invalid or missing data, and states that require caution."
+        "description": "Fixed 24px spacing"
       },
-      "value": [
-        "#ffe8d1",
-        "#522900"
-      ]
+      "value": "1.5rem"
     },
     {
-      "css": "--v-color-background-feedback-red",
-      "type": "color",
-      "property": "background",
-      "variant": "red",
-      "category": "feedback",
+      "css": "--v-space-32",
+      "type": "space",
+      "variant": "32",
       "meta": {
-        "description": "Use as a background color to highlight errors, invalid data, and destructive states."
+        "description": "Fixed 32px spacing"
       },
-      "value": [
-        "#fce5e3",
-        "#4a0d07"
-      ]
+      "value": "2rem"
     },
     {
-      "css": "--v-color-background-primary",
-      "type": "color",
-      "property": "background",
-      "variant": "primary",
+      "css": "--v-space-48",
+      "type": "space",
+      "variant": "48",
       "meta": {
-        "description": "Use as a primary background color."
+        "description": "Fixed 48px spacing"
       },
-      "value": [
-        "#ffffff",
-        "#141414"
-      ]
+      "value": "3rem"
     },
     {
-      "css": "--v-color-background-secondary",
-      "type": "color",
-      "property": "background",
-      "variant": "secondary",
+      "css": "--v-space-64",
+      "type": "space",
+      "variant": "64",
       "meta": {
-        "description": "Use as a secondary background color for elevated sections."
+        "description": "Fixed 64px spacing"
       },
-      "value": [
-        "#fafafa",
-        "#1f1f1f"
-      ]
+      "value": "4rem"
     },
     {
-      "css": "--v-color-foreground-accent-blue",
-      "type": "color",
-      "property": "foreground",
-      "variant": "blue",
-      "category": "accent",
+      "css": "--v-space-l",
+      "type": "space",
+      "variant": "l",
       "meta": {
-        "description": "For use in links and as a border in emphasized selected states."
+        "direction": "vertical",
+        "description": "Fluid spacing between 64px-96px."
       },
-      "value": [
-        "#1c6eba",
-        "#378fe1"
-      ]
+      "value": "clamp(4rem, 4vw + 2.8rem, 6rem)"
     },
     {
-      "css": "--v-color-foreground-feedback-green",
-      "type": "color",
-      "property": "foreground",
-      "variant": "green",
-      "category": "feedback",
+      "css": "--v-space-m",
+      "type": "space",
+      "variant": "m",
       "meta": {
-        "description": "Use as a foreground or border color to highlight successful states and positive actions."
+        "direction": "vertical",
+        "description": "Fluid spacing between 48px-64px."
       },
-      "value": [
-        "#04771d",
-        "#07ca31"
-      ]
+      "value": "clamp(3rem, 3vw + 2rem, 4rem)"
     },
     {
-      "css": "--v-color-foreground-feedback-orange",
-      "type": "color",
-      "property": "foreground",
-      "variant": "orange",
-      "category": "feedback",
+      "css": "--v-space-s",
+      "type": "space",
+      "variant": "s",
       "meta": {
-        "description": "Use as a foreground or border color to highlight warnings, invalid or missing data, and actions that require caution."
+        "direction": "vertical",
+        "description": "Fluid spacing between 32px-48px."
       },
-      "value": [
-        "#ce6700",
-        "#ff9933"
-      ]
+      "value": "clamp(2rem, 3vw + 1rem, 3rem)"
     },
     {
-      "css": "--v-color-foreground-feedback-red",
-      "type": "color",
-      "property": "foreground",
-      "variant": "red",
-      "category": "feedback",
+      "css": "--v-space-pagemargin",
+      "type": "space",
+      "variant": "pagemargin",
       "meta": {
-        "description": "Use as a foreground or border color to highlight errors, invalid data, and destructive actions."
+        "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": [
-        "#cd2314",
-        "#ef6658"
-      ]
+      "value": "clamp(var(--_pagemargin-min), 22vw - 16.3rem, 8rem)"
     },
     {
-      "css": "--v-color-foreground-inverted",
-      "type": "color",
-      "property": "foreground",
-      "variant": "inverted",
+      "css": "--v-space-gutter",
+      "type": "space",
+      "variant": "gutter",
       "meta": {
-        "description": "The inverse of the primary foreground color. For use on filled surfaces."
+        "direction": "horizontal",
+        "property": "gap",
+        "description": "The horizontal gap between grid columns. Fluid between 16px-24px."
       },
-      "value": [
-        "#ffffff",
-        "#0a0a0a"
-      ]
+      "value": "clamp(1rem, 2.6vw + 0.3rem, 1.5rem)"
     },
     {
-      "css": "--v-color-foreground-primary",
-      "type": "color",
-      "property": "foreground",
-      "variant": "primary",
+      "css": "--v-size-grid-column",
+      "type": "size",
+      "variant": "column",
       "meta": {
-        "description": "Use for primary text, icons and borders."
+        "description": "The width of a single grid column."
       },
-      "value": [
-        "#0a0a0a",
-        "#ffffff"
-      ]
+      "value": "calc(\n    (\n      var(--v-size-grid-maxwidth) -\n      (var(--v-grid-columns) - 1) *\n      var(--v-space-gutter)\n    ) /\n    var(--v-grid-columns)\n  )"
     },
     {
-      "css": "--v-color-foreground-secondary",
-      "type": "color",
-      "property": "foreground",
-      "variant": "secondary",
+      "css": "--v-size-grid-maxwidth",
+      "type": "size",
+      "variant": "maxwidth",
       "meta": {
-        "description": "Use for secondary text, icons and borders."
+        "description": "The maximum width of the 12 column grid."
       },
-      "value": [
-        "#616161",
-        "#bababa"
-      ]
+      "value": "min(81rem, 100vw - var(--_pagemargin-min) * 2)"
     },
     {
-      "css": "--v-color-foreground-tertiary",
-      "type": "color",
-      "property": "foreground",
-      "variant": "tertiary",
+      "css": "--v-size-pagemax",
+      "type": "size",
+      "variant": "pagemax",
       "meta": {
-        "description": "The lightest possible foreground color acceptable for UI fills. Should not be used for body text."
+        "description": "The maximum width a page is allowed to grow to."
       },
-      "value": [
-        "#838383"
-      ]
+      "value": "min(160rem, 100vw)"
     },
     {
-      "css": "--v-color-ornament-primary",
-      "type": "color",
-      "property": "ornament",
-      "variant": "primary",
+      "css": "--v-size-grid-xs",
+      "type": "size",
+      "variant": "xs",
       "meta": {
-        "description": "Use for strokes or dividers to visually group or separate elements."
+        "description": "Width based on the colspan of the grid for the current viewport size  (4 / 6 / 4)"
       },
-      "value": [
-        "rgb(0 0 0 / 12%)",
-        "rgb(255 255 255 / 12%)"
-      ]
+      "value": "calc(\n    (var(--v-size-grid-column) * var(--_xs-cols)) +\n    var(--v-space-gutter) *\n    (var(--_xs-cols) - 1)\n  )"
     },
     {
-      "css": "--v-color-ornament-scrim",
-      "type": "color",
-      "property": "ornament",
-      "variant": "scrim",
+      "css": "--v-size-grid-sm",
+      "type": "size",
+      "variant": "sm",
       "meta": {
-        "description": "Used as a backdrop that usually sits behind a Side sheet or Dialog component."
+        "description": "Width based on the colspan of the grid for the current viewport size  (6 / 8 / 6)"
       },
-      "value": [
-        "rgb(0 0 0 / 64%)"
-      ]
+      "value": "calc(\n    (var(--v-size-grid-column) * var(--_sm-cols)) +\n    var(--v-space-gutter) *\n    (var(--_sm-cols) - 1)\n  )"
     },
     {
-      "css": "--v-color-state-accent-blue-medium",
-      "type": "color",
-      "property": "state",
-      "scale": "medium",
-      "variant": "blue",
-      "category": "accent",
+      "css": "--v-size-grid-md",
+      "type": "size",
+      "variant": "md",
       "meta": {
-        "description": "Use for state layers with foreground/accent/blue."
+        "description": "Width based on the colspan of the grid for the current viewport size  (8 / 10 / 8)"
       },
-      "value": [
-        "rgb(28 110 186 / 12%)",
-        "rgb(31 120 209 / 16%)"
-      ]
+      "value": "calc(\n    (var(--v-size-grid-column) * var(--_md-cols)) +\n    var(--v-space-gutter) *\n    (var(--_md-cols) - 1)\n  )"
     },
     {
-      "css": "--v-color-state-accent-blue-strong",
-      "type": "color",
-      "property": "state",
-      "scale": "strong",
-      "variant": "blue",
-      "category": "accent",
+      "css": "--v-size-grid-lg",
+      "type": "size",
+      "variant": "lg",
       "meta": {
-        "description": "Use for state layers with foreground/accent/blue."
+        "description": "Width based on the colspan of the grid for the current viewport size  (8 / 10 / 12)"
       },
-      "value": [
-        "rgb(28 110 186 / 20%)",
-        "rgb(31 120 209 / 24%)"
-      ]
+      "value": "calc(\n    (var(--v-size-grid-column) * var(--_lg-cols)) +\n    var(--v-space-gutter) *\n    (var(--_lg-cols) - 1)\n  )"
     },
     {
-      "css": "--v-color-state-accent-blue-subtle",
-      "type": "color",
-      "property": "state",
-      "scale": "subtle",
-      "variant": "blue",
-      "category": "accent",
+      "css": "--v-size-grid-xl",
+      "type": "size",
+      "variant": "xl",
       "meta": {
-        "description": "Use for state layers with foreground/accent/blue."
+        "description": "Width based on the colspan of the grid for the current viewport size  (8 / 12 / 12)"
       },
-      "value": [
-        "rgb(28 110 186 / 4%)",
-        "rgb(31 120 209 / 8%)"
-      ]
+      "value": "calc(\n    (var(--v-size-grid-column) * var(--_xl-cols)) +\n    var(--v-space-gutter) *\n    (var(--_xl-cols) - 1)\n  )"
     },
     {
-      "css": "--v-color-state-always-black-medium",
-      "type": "color",
-      "property": "state",
-      "scale": "medium",
-      "variant": "black",
-      "category": "always",
+      "css": "--v-size-grid-max",
+      "type": "size",
+      "variant": "max",
       "meta": {
-        "description": "Use for state layers with an always/black foreground color."
+        "description": "Width based on the maximum extent of a `max` container"
       },
-      "value": [
-        "rgb(0 0 0 / 12%)",
-        "rgb(0 0 0 / 16%)"
-      ]
+      "value": "min(\n    (100vw - var(--v-space-pagemargin) * 2) +\n    var(--_outer-margin, 0rem),\n    160rem\n  )"
     },
     {
-      "css": "--v-color-state-always-black-strong",
-      "type": "color",
-      "property": "state",
-      "scale": "strong",
-      "variant": "black",
-      "category": "always",
+      "css": "--v-size-contentmax",
+      "type": "size",
+      "variant": "contentmax",
       "meta": {
-        "description": "Use for state layers with an always/black foreground color."
+        "description": "The maximum width a block of content should be allowed to grow to while maintaining readability\nhttps://baymard.com/blog/line-length-readability"
       },
-      "value": [
-        "rgb(0 0 0 / 20%)",
-        "rgb(0 0 0 / 24%)"
-      ]
+      "value": "70ch"
     },
     {
-      "css": "--v-color-state-always-black-subtle",
-      "type": "color",
-      "property": "state",
-      "scale": "subtle",
-      "variant": "black",
-      "category": "always",
-      "meta": {
-        "description": "Use for state layers with an always/black foreground color."
-      },
-      "value": [
-        "rgb(0 0 0 / 4%)",
-        "rgb(0 0 0 / 8%)"
-      ]
+      "css": "--v-radius-sm",
+      "type": "radius",
+      "variant": "sm",
+      "meta": {},
+      "value": "0.25rem"
     },
     {
-      "css": "--v-color-state-always-white-medium",
-      "type": "color",
-      "property": "state",
-      "scale": "medium",
-      "variant": "white",
-      "category": "always",
-      "meta": {
-        "description": "Use for state layers with an always/white foreground color."
-      },
-      "value": [
-        "rgb(255 255 255 / 12%)",
-        "rgb(255 255 255 / 16%)"
-      ]
-    },
-    {
-      "css": "--v-color-state-always-white-strong",
-      "type": "color",
-      "property": "state",
-      "scale": "strong",
-      "variant": "white",
-      "category": "always",
-      "meta": {
-        "description": "Use for state layers with an always/white foreground color."
-      },
-      "value": [
-        "rgb(255 255 255 / 20%)",
-        "rgb(255 255 255 / 24%)"
-      ]
-    },
-    {
-      "css": "--v-color-state-always-white-subtle",
-      "type": "color",
-      "property": "state",
-      "scale": "subtle",
-      "variant": "white",
-      "category": "always",
-      "meta": {
-        "description": "Use for state layers with an always/white foreground color."
-      },
-      "value": [
-        "rgb(255 255 255 / 4%)",
-        "rgb(255 255 255 / 8%)"
-      ]
-    },
-    {
-      "css": "--v-color-state-feedback-red-medium",
-      "type": "color",
-      "property": "state",
-      "scale": "medium",
-      "variant": "red",
-      "category": "feedback",
-      "meta": {
-        "description": "Use for state layers with foreground/feedback/red."
-      },
-      "value": [
-        "rgb(214 36 21 / 12%)",
-        "rgb(239 102 88 / 16%)"
-      ]
+      "css": "--v-radius-md",
+      "type": "radius",
+      "variant": "md",
+      "meta": {},
+      "value": "0.5rem"
     },
     {
-      "css": "--v-color-state-feedback-red-strong",
-      "type": "color",
-      "property": "state",
-      "scale": "strong",
-      "variant": "red",
-      "category": "feedback",
-      "meta": {
-        "description": "Use for state layers with foreground/feedback/red."
-      },
-      "value": [
-        "rgb(214 36 21 / 20%)",
-        "rgb(239 102 88 / 24%)"
-      ]
+      "css": "--v-radius-lg",
+      "type": "radius",
+      "variant": "lg",
+      "meta": {},
+      "value": "1rem"
     },
     {
-      "css": "--v-color-state-feedback-red-subtle",
-      "type": "color",
-      "property": "state",
-      "scale": "subtle",
-      "variant": "red",
-      "category": "feedback",
-      "meta": {
-        "description": "Use for state layers with foreground/feedback/red."
-      },
-      "value": [
-        "rgb(214 36 21 / 4%)",
-        "rgb(239 102 88 / 8%)"
-      ]
+      "css": "--v-shape-default",
+      "type": "shape",
+      "variant": "default",
+      "meta": {},
+      "value": "var(--v-radius-sm)"
     },
     {
-      "css": "--v-color-state-inverted-medium",
-      "type": "color",
-      "property": "state",
-      "scale": "medium",
-      "variant": "inverted",
-      "meta": {
-        "description": "Use for state layers with foreground/inverted."
-      },
-      "value": [
-        "rgb(255 255 255 / 12%)",
-        "rgb(0 0 0 / 16%)"
-      ]
+      "css": "--v-shape-emphasis",
+      "type": "shape",
+      "variant": "emphasis",
+      "meta": {},
+      "value": "var(--v-radius-sm)"
     },
     {
-      "css": "--v-color-state-inverted-strong",
-      "type": "color",
-      "property": "state",
-      "scale": "strong",
-      "variant": "inverted",
-      "meta": {
-        "description": "Use for state layers with foreground/inverted."
-      },
-      "value": [
-        "rgb(255 255 255 / 20%)",
-        "rgb(0 0 0 / 24%)"
-      ]
+      "css": "--v-radius-full",
+      "type": "radius",
+      "variant": "full",
+      "meta": {},
+      "value": "9999px"
     },
     {
-      "css": "--v-color-state-inverted-subtle",
-      "type": "color",
-      "property": "state",
-      "scale": "subtle",
-      "variant": "inverted",
-      "meta": {
-        "description": "Use for state layers with foreground/inverted."
-      },
-      "value": [
-        "rgb(255 255 255 / 4%)",
-        "rgb(0 0 0 / 8%)"
-      ]
+      "css": "--v-index-spinner",
+      "type": "index",
+      "variant": "spinner",
+      "meta": {},
+      "value": "30"
     },
     {
-      "css": "--v-color-state-primary-medium",
-      "type": "color",
-      "property": "state",
-      "scale": "medium",
-      "variant": "primary",
-      "meta": {
-        "description": "Use for state layers with foreground/primary."
-      },
-      "value": [
-        "rgb(0 0 0 / 12%)",
-        "rgb(255 255 255 / 16%)"
-      ]
+      "css": "--v-index-overlay",
+      "type": "index",
+      "variant": "overlay",
+      "meta": {},
+      "value": "20"
     },
     {
-      "css": "--v-color-state-primary-strong",
-      "type": "color",
-      "property": "state",
-      "scale": "strong",
-      "variant": "primary",
-      "meta": {
-        "description": "Use for state layers with foreground/primary."
-      },
-      "value": [
-        "rgb(0 0 0 / 20%)",
-        "rgb(255 255 255 / 24%)"
-      ]
+      "css": "--v-index-navigation",
+      "type": "index",
+      "variant": "navigation",
+      "meta": {},
+      "value": "10"
     },
     {
-      "css": "--v-color-state-primary-subtle",
-      "type": "color",
-      "property": "state",
-      "scale": "subtle",
-      "variant": "primary",
-      "meta": {
-        "description": "Use for state layers with foreground/primary."
-      },
-      "value": [
-        "rgb(0 0 0 / 4%)",
-        "rgb(255 255 255 / 8%)"
-      ]
+      "css": "--v-index-default",
+      "type": "index",
+      "variant": "default",
+      "meta": {},
+      "value": "0"
     },
     {
-      "css": "--v-color-surface-accent-blue",
-      "type": "color",
-      "property": "surface",
-      "variant": "blue",
-      "category": "accent",
-      "meta": {
-        "description": "Used as an emphasized surface fill for UI elements like buttons and form controls."
-      },
-      "value": [
-        "#1c6eba",
-        "#1f78d1"
-      ]
+      "css": "--v-index-deep",
+      "type": "index",
+      "variant": "deep",
+      "meta": {},
+      "value": "-1"
     },
     {
-      "css": "--v-color-surface-feedback-green",
-      "type": "color",
-      "property": "surface",
-      "variant": "green",
-      "category": "feedback",
+      "css": "--v-grid-columns",
+      "type": "grid",
+      "variant": "columns",
       "meta": {
-        "description": "Used as a surface fill for UI elements like buttons and form controls to signify positive actions. Combine with Always White foreground color."
+        "description": "The total number of grid columns at the current breakpoint."
       },
-      "value": [
-        "#04771d",
-        "#048220"
-      ]
+      "value": "8"
     },
     {
-      "css": "--v-color-surface-feedback-orange",
-      "type": "color",
-      "property": "surface",
-      "variant": "orange",
-      "category": "feedback",
-      "meta": {
-        "description": "[Deprecated]",
-        "deprecated": "The color will be removed in a future version."
-      },
-      "value": [
-        "#ce6700"
-      ]
+      "css": "--v-transition-default",
+      "type": "transition",
+      "variant": "default",
+      "meta": {},
+      "value": "var(--_v-transition-speed-default) ease"
     },
     {
-      "css": "--v-color-surface-feedback-red",
-      "type": "color",
-      "property": "surface",
-      "variant": "red",
-      "category": "feedback",
-      "meta": {
-        "description": "Used as a surface fill for UI elements like buttons and form controls to signify destructive actions. Combine with Always White foreground color."
-      },
-      "value": [
-        "#cd2314",
-        "#e52715"
-      ]
+      "css": "--v-transition-micro",
+      "type": "transition",
+      "variant": "micro",
+      "meta": {},
+      "value": "var(--_v-transition-speed-fast) ease"
     },
     {
-      "css": "--v-color-surface-neutral",
-      "type": "color",
-      "property": "surface",
-      "variant": "neutral",
-      "meta": {
-        "description": "Used as a surface fill for UI elements like buttons and form controls. Combine with Foreground / Inverted foreground color."
-      },
-      "value": [
-        "#1f1f1f",
-        "#ffffff"
-      ]
+      "css": "--v-transition-notable",
+      "type": "transition",
+      "variant": "notable",
+      "meta": {},
+      "value": "var(--_v-transition-speed-slow) ease"
     }
   ],
   "customMedia": [