@volvo-cars/css 2.0.0 → 2.1.0

package/dist/meta.json

@@ -1,5 +1,18 @@
 {
-  "deprecatedClasses": [],
+  "deprecatedClasses": [
+    {
+      "name": "layout-4-5"
+    },
+    {
+      "name": "layout-5-4"
+    },
+    {
+      "name": "layout-6-4"
+    },
+    {
+      "name": "layout-4-6"
+    }
+  ],
   "classNames": [
     "-m-12",
     "-m-16",
@@ -203,6 +216,8 @@
     "current:border-primary",
     "current:text-inverted",
     "current:text-primary",
+    "cursor-auto",
+    "cursor-pointer",
     "details-open:rotate-180",
     "dialog-large",
     "dialog-small",
@@ -1438,6 +1453,7 @@
     "my-sm",
     "my-xl",
     "my-xs",
+    "navigation-bar",
     "object-contain",
     "object-cover",
     "object-fill",
@@ -1502,6 +1518,8 @@
     "pl-8",
     "pl-pagemargin",
     "pl-pageoffset",
+    "pointer-events-auto",
+    "pointer-events-none",
     "pr-0",
     "pr-12",
     "pr-16",
@@ -1584,6 +1602,7 @@
     "scale-pressed",
     "scale-zoomed",
     "scrollbar-none",
+    "select-none",
     "selectable-card",
     "selected:bg-accent-blue-medium",
     "selected:bg-surface-neutral",
@@ -2202,7 +2221,7 @@
       "name": "backdrop",
       "prefixes": [],
       "declarations": [
-        "background-color: #000000a3"
+        "background-color: var(--v-color-ornament-scrim)"
       ],
       "layer": "volvo.blocks"
     },
@@ -2383,13 +2402,7 @@
     {
       "name": "dialog-small",
       "prefixes": [],
-      "declarations": [
-        "width: var(--v-size-grid-xs)",
-        "border-end-end-radius: var(--_dialog-radius)",
-        "border-end-start-radius: var(--_dialog-radius)",
-        "max-width: calc(100vw - 3rem)",
-        "margin-bottom: auto"
-      ],
+      "declarations": [],
       "layer": "volvo.blocks"
     },
     {
@@ -2477,6 +2490,15 @@
       "declarations": [],
       "layer": "volvo.blocks"
     },
+    {
+      "name": "input-floating-label",
+      "prefixes": [],
+      "declarations": [
+        "contain: content",
+        "min-width: fit-content"
+      ],
+      "layer": "volvo.layout"
+    },
     {
       "name": "chip-selectable",
       "prefixes": [],
@@ -2488,7 +2510,8 @@
         "max-width: 100%",
         "height: 2.5rem",
         "padding-inline: var(--v-space-16)",
-        "font: var(--v-font-16)",
+        "font-size: var(--v-font-16-size)",
+        "line-height: var(--v-font-16-lineheight)",
         "color: var(--_color)",
         "white-space: nowrap",
         "user-select: none",
@@ -2514,7 +2537,8 @@
         "max-width: 100%",
         "height: 2.5rem",
         "padding-inline: var(--v-space-16)",
-        "font: var(--v-font-16)",
+        "font-size: var(--v-font-16-size)",
+        "line-height: var(--v-font-16-lineheight)",
         "color: var(--_color)",
         "white-space: nowrap",
         "user-select: none",
@@ -2530,15 +2554,6 @@
       ],
       "layer": "volvo.blocks"
     },
-    {
-      "name": "input-floating-label",
-      "prefixes": [],
-      "declarations": [
-        "contain: content",
-        "min-width: fit-content"
-      ],
-      "layer": "volvo.layout"
-    },
     {
       "name": "link-inline",
       "prefixes": [],
@@ -2911,15 +2926,14 @@
         "--_border-color-dark: var(--_dark-toggle) var(--v-color-ornament-primary)",
         "--_border-color: var(--_border-color-dark, transparent)",
         "column-gap: var(--v-space-16)",
-        "width: var(--v-size-grid-sm)",
+        "max-width: min(var(--v-size-overlay-narrow),\n    calc(100vw - calc(2 * var(--v-space-pagemargin))))",
         "background-color: var(--v-color-always-black)",
         "border-radius: var(--v-shape-default)",
         "box-shadow: inset 0 0 0 1px var(--_border-color)",
         "view-transition-class: slide-bottom",
         "grid-template-columns: min-content auto min-content",
         "place-items: center start",
-        "display: grid",
-        "width: var(--v-size-grid-xs)"
+        "display: grid"
       ],
       "layer": "volvo.blocks"
     },
@@ -2944,7 +2958,8 @@
         "width: fit-content",
         "padding-block: var(--v-space-2)",
         "padding-inline: var(--v-space-8)",
-        "font: var(--v-font-12)",
+        "font-size: var(--v-font-12-size)",
+        "line-height: var(--v-font-12-lineheight)",
         "border-radius: var(--v-shape-default)",
         "color: var(--v-color-foreground-inverted)",
         "background-color: var(--v-color-surface-neutral)"
@@ -2958,7 +2973,8 @@
         "width: fit-content",
         "padding-block: var(--v-space-2)",
         "padding-inline: var(--v-space-8)",
-        "font: var(--v-font-12)",
+        "font-size: var(--v-font-12-size)",
+        "line-height: var(--v-font-12-lineheight)",
         "border-radius: var(--v-shape-default)",
         "box-shadow: inset 0 0 0 1px\n    var(--_border-color, var(--v-color-ornament-primary))"
       ],
@@ -2971,7 +2987,8 @@
         "width: fit-content",
         "padding-block: var(--v-space-2)",
         "padding-inline: var(--v-space-8)",
-        "font: var(--v-font-12)",
+        "font-size: var(--v-font-12-size)",
+        "line-height: var(--v-font-12-lineheight)",
         "border-radius: var(--v-shape-default)",
         "background-color: var(--v-color-surface-gray)"
       ],
@@ -3400,6 +3417,24 @@
       ],
       "layer": "volvo.layout"
     },
+    {
+      "name": "navigation-bar",
+      "prefixes": [],
+      "declarations": [
+        "position: var(--navigation-bar-position, sticky)",
+        "z-index: var(--v-index-navigation)",
+        "column-gap: var(--v-space-16)",
+        "min-height: var(--v-size-navigation-bar-height)",
+        "max-height: var(--v-size-navigation-bar-height)",
+        "padding-inline: var(--v-space-pageoffset)",
+        "background-color: var(--v-color-background-primary)",
+        "grid-template-columns: 1fr auto 1fr",
+        "align-items: center",
+        "display: grid",
+        "top: 0"
+      ],
+      "layer": "volvo.layout"
+    },
     {
       "name": "fade-in",
       "prefixes": [],
@@ -9647,6 +9682,38 @@
       ],
       "layer": "volvo.utilities"
     },
+    {
+      "name": "pointer-events-none",
+      "prefixes": [],
+      "declarations": [
+        "pointer-events: none"
+      ],
+      "layer": "volvo.utilities"
+    },
+    {
+      "name": "pointer-events-auto",
+      "prefixes": [],
+      "declarations": [
+        "pointer-events: auto"
+      ],
+      "layer": "volvo.utilities"
+    },
+    {
+      "name": "cursor-pointer",
+      "prefixes": [],
+      "declarations": [
+        "cursor: pointer"
+      ],
+      "layer": "volvo.utilities"
+    },
+    {
+      "name": "cursor-auto",
+      "prefixes": [],
+      "declarations": [
+        "cursor: auto"
+      ],
+      "layer": "volvo.utilities"
+    },
     {
       "name": "static",
       "prefixes": [],
@@ -9768,6 +9835,14 @@
       ],
       "layer": "volvo.utilities"
     },
+    {
+      "name": "select-none",
+      "prefixes": [],
+      "declarations": [
+        "user-select: none"
+      ],
+      "layer": "volvo.utilities"
+    },
     {
       "name": "scrollbar-none",
       "prefixes": [],
@@ -10656,6 +10731,13 @@
       "meta": {},
       "value": "-1"
     },
+    {
+      "css": "--v-size-navigation-bar-height",
+      "type": "size",
+      "category": "navigation-bar-height",
+      "meta": {},
+      "value": "var(--v-space-48)"
+    },
     {
       "css": "--v-grid-columns",
       "type": "grid",
@@ -10761,7 +10843,9 @@
       "type": "color",
       "property": "foreground",
       "variant": "primary",
-      "meta": {},
+      "meta": {
+        "description": "Use for primary text, icons and borders."
+      },
       "value": [
         "#ffffff",
         "#000000"
@@ -10773,7 +10857,7 @@
       "property": "foreground",
       "variant": "secondary",
       "meta": {
-        "description": "Use for primary text, icons and borders."
+        "description": "Use for secondary text, icons and borders."
       },
       "value": [
         "#969696",
@@ -10786,7 +10870,7 @@
       "property": "foreground",
       "variant": "tertiary",
       "meta": {
-        "description": "Use for secondary text, icons and borders."
+        "description": "The lightest possible foreground color acceptable for UI fills. Should not be used for body text."
       },
       "value": [
         "#787878"
@@ -10798,7 +10882,7 @@
       "property": "foreground",
       "variant": "inverted",
       "meta": {
-        "description": "The lightest possible foreground color acceptable for UI fills. Should not be used for body text."
+        "description": "The inverse of the primary foreground color. For use on filled surfaces."
       },
       "value": [
         "#000000",
@@ -10812,7 +10896,7 @@
       "variant": "blue",
       "category": "accent",
       "meta": {
-        "description": "The inverse of the primary foreground color. For use on filled surfaces."
+        "description": "For emphasized selection borders and graphic accents (icons, illustrations)."
       },
       "value": [
         "#3354ff",
@@ -10826,7 +10910,7 @@
       "variant": "green",
       "category": "feedback",
       "meta": {
-        "description": "For emphasized selection borders and graphic accents (icons, illustrations)."
+        "description": "Use as a foreground or border color to highlight successful states and positive actions."
       },
       "value": [
         "#07ca31",
@@ -10840,7 +10924,7 @@
       "variant": "red",
       "category": "feedback",
       "meta": {
-        "description": "Use as a foreground or border color to highlight successful states and positive actions."
+        "description": "Use as a foreground or border color to highlight errors, invalid data, and destructive actions."
       },
       "value": [
         "#ef6658",
@@ -10854,7 +10938,7 @@
       "variant": "orange",
       "category": "feedback",
       "meta": {
-        "description": "Use as a foreground or border color to highlight errors, invalid data, and destructive actions."
+        "description": "Use as a foreground or border color to highlight warnings, invalid or missing data, and actions that require caution."
       },
       "value": [
         "#ff9933",
@@ -10867,7 +10951,7 @@
       "property": "surface",
       "variant": "neutral",
       "meta": {
-        "description": "Use as a foreground or border color to highlight warnings, invalid or missing data, and actions that require caution."
+        "description": "Used as a surface fill for UI elements like buttons and form controls. Combine with Foreground / Inverted foreground color."
       },
       "value": [
         "#ffffff",
@@ -10880,7 +10964,7 @@
       "property": "surface",
       "variant": "gray",
       "meta": {
-        "description": "Used as a surface fill for UI elements like buttons and form controls. Combine with Foreground / Inverted foreground color."
+        "description": "Used as surface fill."
       },
       "value": [
         "#3b3b3b",
@@ -10894,7 +10978,7 @@
       "variant": "blue",
       "category": "accent",
       "meta": {
-        "description": "Used as surface fill."
+        "description": "Used as an emphasized surface fill for UI elements like buttons and form controls."
       },
       "value": [
         "#3354ff",
@@ -10921,7 +11005,7 @@
       "variant": "green",
       "category": "feedback",
       "meta": {
-        "description": "Used as an emphasized surface fill for UI elements like buttons and form controls."
+        "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": [
         "#048220"
@@ -10934,7 +11018,7 @@
       "variant": "orange",
       "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."
+        "description": "[Deprecated]"
       },
       "value": [
         "#ce6700"
@@ -10947,7 +11031,7 @@
       "variant": "red",
       "category": "feedback",
       "meta": {
-        "description": "[Deprecated]"
+        "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": [
         "#e52715"
@@ -10959,7 +11043,7 @@
       "property": "background",
       "variant": "primary",
       "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."
+        "description": "Use as a primary background color."
       },
       "value": [
         "#000000",
@@ -10972,7 +11056,7 @@
       "property": "background",
       "variant": "secondary",
       "meta": {
-        "description": "Use as a primary background color."
+        "description": "Use as a secondary background color for elevated sections."
       },
       "value": [
         "#171717",
@@ -10986,7 +11070,7 @@
       "variant": "gray",
       "category": "feedback",
       "meta": {
-        "description": "Use as a background color to highlight warnings, invalid or missing data, and states that require caution."
+        "description": "Use as a background color to indicate informational messages."
       },
       "value": [
         "#242424",
@@ -11000,7 +11084,7 @@
       "variant": "green",
       "category": "feedback",
       "meta": {
-        "description": "Use as a secondary background color for elevated sections."
+        "description": "Use as a background color to highlight successful and positive states."
       },
       "value": [
         "#02310c",
@@ -11014,7 +11098,7 @@
       "variant": "red",
       "category": "feedback",
       "meta": {
-        "description": "Use as a background color to highlight successful and positive states."
+        "description": "Use as a background color to highlight errors, invalid data, and destructive states."
       },
       "value": [
         "#4a0d07",
@@ -11028,7 +11112,7 @@
       "variant": "orange",
       "category": "feedback",
       "meta": {
-        "description": "Use as a background color to highlight errors, invalid data, and destructive states."
+        "description": "Use as a background color to highlight warnings, invalid or missing data, and states that require caution."
       },
       "value": [
         "#522900",
@@ -11041,7 +11125,7 @@
       "variant": "white",
       "category": "always",
       "meta": {
-        "description": "Use as a background color to indicate informational messages."
+        "description": "Always white regardless of color mode."
       },
       "value": [
         "#ffffff"
@@ -11053,7 +11137,7 @@
       "variant": "black",
       "category": "always",
       "meta": {
-        "description": "Always white regardless of color mode."
+        "description": "Always black regardless of colour mode."
       },
       "value": [
         "#000000"
@@ -11065,7 +11149,7 @@
       "property": "ornament",
       "variant": "primary",
       "meta": {
-        "description": "Always black regardless of colour mode."
+        "description": "Use for strokes or dividers to visually group or separate elements."
       },
       "value": [
         "rgb(100% 100% 100% / 0.16)",
@@ -11078,7 +11162,7 @@
       "property": "ornament",
       "variant": "scrim",
       "meta": {
-        "description": "Use for strokes or dividers to visually group or separate elements."
+        "description": "Used as a backdrop that usually sits behind a Side sheet or Dialog component."
       },
       "value": [
         "rgb(9.0196% 9.0196% 9.0196% / 0.64)"
@@ -11091,7 +11175,7 @@
       "scale": "strong",
       "variant": "primary",
       "meta": {
-        "description": "Used as a backdrop that usually sits behind a Side sheet or Dialog component."
+        "description": "Use for state layers with foreground/primary."
       },
       "value": [
         "rgb(100% 100% 100% / 0.24)",
@@ -11133,7 +11217,7 @@
       "scale": "strong",
       "variant": "inverted",
       "meta": {
-        "description": "Use for state layers with foreground/primary."
+        "description": "Use for state layers with foreground/inverted."
       },
       "value": [
         "rgb(0% 0% 0% / 0.24)",
@@ -11176,7 +11260,7 @@
       "variant": "blue",
       "category": "accent",
       "meta": {
-        "description": "Use for state layers with foreground/inverted."
+        "description": "Use for state layers with foreground/accent/blue."
       },
       "value": [
         "rgb(20% 32.941% 100% / 0.24)",
@@ -11221,7 +11305,7 @@
       "variant": "red",
       "category": "feedback",
       "meta": {
-        "description": "Use for state layers with foreground/accent/blue."
+        "description": "Use for state layers with foreground/feedback/red."
       },
       "value": [
         "rgb(89.804% 15.294% 8.2353% / 0.24)",
@@ -11266,7 +11350,7 @@
       "variant": "black",
       "category": "always",
       "meta": {
-        "description": "Use for state layers with foreground/feedback/red."
+        "description": "Use for state layers with an always/black foreground color."
       },
       "value": [
         "rgb(0% 0% 0% / 0.24)",
@@ -11311,7 +11395,7 @@
       "variant": "white",
       "category": "always",
       "meta": {
-        "description": "Use for state layers with an always/black foreground color."
+        "description": "Use for state layers with an always/white foreground color."
       },
       "value": [
         "rgb(100% 100% 100% / 0.24)",
@@ -11348,6 +11432,24 @@
         "rgb(100% 100% 100% / 0.04)"
       ]
     },
+    {
+      "css": "--v-border-width-default",
+      "type": "border",
+      "variant": "width-default",
+      "meta": {
+        "description": "Use for any UI element that needs a border in the default state."
+      },
+      "value": "1px"
+    },
+    {
+      "css": "--v-border-width-selected",
+      "type": "border",
+      "variant": "width-selected",
+      "meta": {
+        "description": "Use for any UI element that needs a border in the selected state."
+      },
+      "value": "2px"
+    },
     {
       "css": "--v-space-2",
       "type": "space",
@@ -11522,24 +11624,6 @@
       },
       "value": "round(clamp(1rem, 1.429vw + 0.571rem, 2rem), 2px)"
     },
-    {
-      "css": "--v-border-width-default",
-      "type": "border",
-      "variant": "width-default",
-      "meta": {
-        "description": "Use for any UI element that needs a border in the default state."
-      },
-      "value": "1px"
-    },
-    {
-      "css": "--v-border-width-selected",
-      "type": "border",
-      "variant": "width-selected",
-      "meta": {
-        "description": "Use for any UI element that needs a border in the selected state."
-      },
-      "value": "2px"
-    },
     {
       "css": "--v-size-overlay-narrow",
       "type": "size",
@@ -11558,7 +11642,7 @@
       "meta": {
         "description": "Used to set the width of large overlays such as sheet, large dialogs"
       },
-      "value": "60ch"
+      "value": "65ch"
     },
     {
       "css": "--v-size-sidebar-narrow",