@volvo-cars/css 0.29.0 → 0.30.0

package/dist/meta.json

@@ -8,6 +8,7 @@
     "bg-feedback-orange",
     "bg-feedback-red",
     "bg-inherit",
+    "bg-neutral",
     "bg-primary",
     "bg-secondary",
     "bg-transparent",
@@ -63,6 +64,7 @@
     "current:border-primary",
     "current:text-primary",
     "dialog",
+    "dialog__close",
     "empty:hidden",
     "expanded:border-accent-blue",
     "expanded:border-primary",
@@ -112,6 +114,7 @@
     "heading-3",
     "hidden",
     "hover:border-primary",
+    "hover:text-primary",
     "hyphens",
     "icon-mask",
     "icon-sprite",
@@ -157,6 +160,8 @@
     "lg:text-start",
     "lg:until-xl:hidden",
     "link-inline",
+    "link-plain",
+    "link-underlined",
     "list",
     "m-0",
     "m-16",
@@ -364,6 +369,7 @@
     "statement-2",
     "statement-3",
     "statement-signature",
+    "tap-area",
     "text-accent-blue",
     "text-always-black",
     "text-always-white",
@@ -373,6 +379,7 @@
     "text-feedback-orange",
     "text-feedback-red",
     "text-inherit",
+    "text-inverted",
     "text-primary",
     "text-secondary",
     "text-start",
@@ -448,12 +455,12 @@
         "--stack-gap: var(--v-space-24)",
         "--stack-gap: var(--v-space-32)",
         "--stack-gap: var(--v-space-16)",
+        "--button-accent-color: var(--v-color-surface-neutral)",
+        "--_accent-disabled: color-mix(in oklab, var(--button-accent-color), var(--background-color, var(--v-color-background-primary)) var(--_v-color-mix-strongest))",
         "font-size: var(--v-font-16-size)",
         "font-weight: var(--v-font-emphasis-weight)",
-        "color: var(--_color)",
         "white-space: nowrap",
         "user-select: none",
-        "background-color: var(--_background)",
         "justify-content: center",
         "align-items: center",
         "min-width: max-content",
@@ -463,30 +470,27 @@
         "display: inline-flex",
         "position: relative",
         "overflow: hidden",
+        "--button-accent-color: var(--v-color-surface-feedback-red)",
+        "--_accent-disabled: var(--button-accent-color)",
+        "opacity: .36",
         "--_min-touch-area: 44px",
+        "height: var(--_min-touch-area)",
         "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))",
-        "background-color: var(--_background-hover, var(--_background))",
-        "--_background: var(--v-color-surface-neutral)",
-        "--_background-disabled: var(--_v-color-surface-neutral-disabled)",
-        "--_background-hover: var(--_v-color-surface-neutral-hover)",
-        "--_color: var(--v-color-background-primary)",
-        "--_background: var(--v-color-surface-feedback-red)",
-        "--_background-disabled: var(--_v-color-surface-feedback-red-disabled)",
-        "--_background-hover: var(--_v-color-surface-feedback-red-hover)",
+        "--_overlay-rate: 0%",
         "--_color: var(--v-color-always-white)",
-        "--_background: var(--v-color-surface-accent-blue)",
-        "--_background-disabled: var(--_v-color-surface-accent-blue-disabled)",
-        "--_background-hover: var(--_v-color-surface-accent-blue-hover)",
+        "color: var(--_color)",
+        "background: color-mix(in oklab, var(--button-accent-color), var(--_color) var(--_overlay-rate))",
+        "--_color: var(--v-color-foreground-inverted)",
+        "--button-accent-color: var(--v-color-surface-accent-blue)",
+        "background: var(--button-accent-color)",
+        "--_overlay-rate: var(--_v-color-mix-strong)",
+        "background: var(--_accent-disabled)",
         "padding-inline: min(var(--v-space-32), 8vw)",
         "border-radius: var(--v-radius-4)",
         "width: 1.5rem",
@@ -494,6 +498,7 @@
         "padding-inline: var(--v-space-16)",
         "width: 1rem",
         "height: 1rem",
+        "height: 44px",
         "transform: scale(.95)"
       ],
       "layer": "volvo.blocks"
@@ -507,12 +512,12 @@
         "--stack-gap: var(--v-space-24)",
         "--stack-gap: var(--v-space-32)",
         "--stack-gap: var(--v-space-16)",
+        "--button-accent-color: var(--v-color-surface-neutral)",
+        "--_accent-disabled: color-mix(in oklab, var(--button-accent-color), var(--background-color, var(--v-color-background-primary)) var(--_v-color-mix-strongest))",
         "font-size: var(--v-font-16-size)",
         "font-weight: var(--v-font-emphasis-weight)",
-        "color: var(--_color)",
         "white-space: nowrap",
         "user-select: none",
-        "background-color: var(--_background)",
         "justify-content: center",
         "align-items: center",
         "min-width: max-content",
@@ -522,29 +527,21 @@
         "display: inline-flex",
         "position: relative",
         "overflow: hidden",
+        "--button-accent-color: var(--v-color-surface-feedback-red)",
+        "--_accent-disabled: var(--button-accent-color)",
+        "opacity: .36",
         "--_min-touch-area: 44px",
+        "height: var(--_min-touch-area)",
         "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))",
-        "background-color: var(--_background-hover, var(--_background))",
-        "--_background-hover: var(--v-color-surface-neutral)",
-        "--_color: var(--v-color-foreground-primary)",
-        "--_color-disabled: var(--_v-color-surface-neutral-disabled)",
-        "--_color-hover: var(--v-color-background-primary)",
-        "box-shadow: inset 0 0 0 1px var(--_color)",
-        "--_background-hover: var(--v-color-surface-feedback-red)",
-        "--_color: var(--v-color-surface-feedback-red)",
-        "--_color-disabled: var(--_v-color-surface-feedback-red-disabled)",
-        "--_color-hover: var(--v-color-always-white)",
-        "box-shadow: inset 0 0 0 1px var(--_color-disabled)",
+        "color: var(--v-color-foreground-primary)",
+        "box-shadow: inset 0 0 0 1px var(--button-accent-color)",
+        "box-shadow: inset 0 0 0 1px var(--_accent-disabled)",
         "padding-inline: min(var(--v-space-32), 8vw)",
         "border-radius: var(--v-radius-4)",
         "width: 1.5rem",
@@ -552,7 +549,11 @@
         "padding-inline: var(--v-space-16)",
         "width: 1rem",
         "height: 1rem",
-        "transform: scale(.95)"
+        "height: 44px",
+        "transform: scale(.95)",
+        "--_overlay-rate: 0%",
+        "color: var(--button-accent-color)",
+        "color: var(--_accent-disabled)"
       ],
       "layer": "volvo.blocks"
     },
@@ -564,12 +565,12 @@
         "flex: 1 0 40cqw",
         "--stack-gap: var(--v-space-24)",
         "--stack-gap: var(--v-space-16)",
+        "--button-accent-color: var(--v-color-surface-neutral)",
+        "--_accent-disabled: color-mix(in oklab, var(--button-accent-color), var(--background-color, var(--v-color-background-primary)) var(--_v-color-mix-strongest))",
         "font-size: var(--v-font-16-size)",
         "font-weight: var(--v-font-emphasis-weight)",
-        "color: var(--_color)",
         "white-space: nowrap",
         "user-select: none",
-        "background-color: var(--_background)",
         "justify-content: center",
         "align-items: center",
         "min-width: max-content",
@@ -579,26 +580,22 @@
         "display: inline-flex",
         "position: relative",
         "overflow: hidden",
+        "--button-accent-color: var(--v-color-surface-feedback-red)",
+        "--_accent-disabled: var(--button-accent-color)",
+        "opacity: .36",
         "--_min-touch-area: 44px",
+        "height: var(--_min-touch-area)",
         "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))",
-        "background-color: var(--_background-hover, var(--_background))",
-        "--_color: var(--v-color-foreground-primary)",
-        "--_color-hover: var(--_v-color-foreground-primary-hover)",
-        "--_color-disabled: var(--_v-color-surface-neutral-disabled)",
+        "--_overlay-rate: 0%",
+        "color: var(--button-accent-color)",
+        "color: var(--_accent-disabled)",
         "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\")",
         "mask: var(--_arrow-icon)",
         "rotate: var(--_arrow-rotation)",
@@ -618,7 +615,8 @@
         "--_rtl-arrow-rotation: var(--_rtl-toggle) 90deg",
         "--_arrow-rotation: var(--_rtl-arrow-rotation, -90deg)",
         "--_arrow-rotation: 180deg",
-        "--_arrow-rotation: 0deg"
+        "--_arrow-rotation: 0deg",
+        "text-decoration-line: underline"
       ],
       "layer": "volvo.blocks"
     },
@@ -1080,16 +1078,38 @@
         "width: 100%",
         "max-width: 100%",
         "height: fit-content",
-        "max-height: 80vh",
+        "max-height: calc(100vh + -1 * min(2rem, 20vh))",
         "margin-bottom: 0",
         "position: fixed",
         "inset: 0",
-        "padding: var(--v-space-48)",
-        "max-width: 496px",
+        "overflow-y: auto",
+        "padding-top: 0",
+        "padding-inline: var(--v-space-48)",
+        "max-width: min(31rem, 100vw - 2rem)",
         "margin-bottom: auto"
       ],
       "layer": "volvo.blocks"
     },
+    {
+      "name": "dialog__close",
+      "prefixes": [],
+      "declarations": [
+        "height: var(--v-space-48)",
+        "top: 0",
+        "justify-content: flex-end",
+        "display: flex",
+        "position: absolute",
+        "inset-inline-end: 0",
+        "outline-offset: -2px",
+        "border-radius: 50%",
+        "justify-content: center",
+        "align-items: center",
+        "width: 2.5rem",
+        "height: 2.5rem",
+        "line-height: 0"
+      ],
+      "layer": "volvo.blocks"
+    },
     {
       "name": "radio",
       "prefixes": [],
@@ -1130,7 +1150,9 @@
       "prefixes": [],
       "declarations": [
         "width: var(--_icon-size)",
+        "min-width: var(--_icon-size)",
         "height: var(--_icon-size)",
+        "min-height: var(--_icon-size)",
         "vertical-align: middle",
         "flex-grow: 0",
         "flex-shrink: 0",
@@ -1156,7 +1178,9 @@
       "prefixes": [],
       "declarations": [
         "width: var(--_icon-size)",
+        "min-width: var(--_icon-size)",
         "height: var(--_icon-size)",
+        "min-height: var(--_icon-size)",
         "vertical-align: middle",
         "flex-grow: 0",
         "flex-shrink: 0",
@@ -1202,10 +1226,11 @@
         "--_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-image: var(--_icon-calendar)",
         "background-repeat: no-repeat",
         "background-position: center var(--_bg-pos-x, right) var(--v-space-16)",
-        "background-size: 1.5rem 1.5rem"
+        "background-size: 1.5rem 1.5rem",
+        "background-image: var(--_icon-chevrondown)"
       ],
       "layer": "volvo.blocks"
     },
@@ -1227,11 +1252,27 @@
       "name": "link-inline",
       "prefixes": [],
       "declarations": [
-        "color: var(--v-color-foreground-secondary)",
         "text-decoration-line: underline"
       ],
       "layer": "volvo.blocks"
     },
+    {
+      "name": "link-underlined",
+      "prefixes": [],
+      "declarations": [
+        "text-decoration-line: underline",
+        "position: relative"
+      ],
+      "layer": "volvo.blocks"
+    },
+    {
+      "name": "link-plain",
+      "prefixes": [],
+      "declarations": [
+        "position: relative"
+      ],
+      "layer": "volvo.blocks"
+    },
     {
       "name": "statement-1",
       "prefixes": [],
@@ -1257,6 +1298,17 @@
       ],
       "layer": "volvo.blocks"
     },
+    {
+      "name": "tap-area",
+      "prefixes": [],
+      "declarations": [
+        "border-radius: var(--v-radius-4)",
+        "transition: color, background-color, border-color, box-shadow, text-decoration-color, fill, stroke",
+        "transition-duration: var(--_v-transition-speed-default)",
+        "display: block"
+      ],
+      "layer": "volvo.blocks"
+    },
     {
       "name": "bg-inherit",
       "prefixes": [],
@@ -1277,7 +1329,8 @@
       "name": "bg-always-black",
       "prefixes": [],
       "declarations": [
-        "background-color: var(--v-color-always-black)"
+        "--background-color: var(--v-color-always-black)",
+        "background-color: var(--background-color)"
       ],
       "layer": "volvo.utilities"
     },
@@ -1285,7 +1338,8 @@
       "name": "bg-always-white",
       "prefixes": [],
       "declarations": [
-        "background-color: var(--v-color-always-white)"
+        "--background-color: var(--v-color-always-white)",
+        "background-color: var(--background-color)"
       ],
       "layer": "volvo.utilities"
     },
@@ -1293,7 +1347,8 @@
       "name": "bg-primary",
       "prefixes": [],
       "declarations": [
-        "background-color: var(--v-color-background-primary)"
+        "--background-color: var(--v-color-background-primary)",
+        "background-color: var(--background-color)"
       ],
       "layer": "volvo.utilities"
     },
@@ -1301,7 +1356,17 @@
       "name": "bg-secondary",
       "prefixes": [],
       "declarations": [
-        "background-color: var(--v-color-background-secondary)"
+        "--background-color: var(--v-color-background-secondary)",
+        "background-color: var(--background-color)"
+      ],
+      "layer": "volvo.utilities"
+    },
+    {
+      "name": "bg-neutral",
+      "prefixes": [],
+      "declarations": [
+        "--background-color: var(--v-color-surface-neutral)",
+        "background-color: var(--background-color)"
       ],
       "layer": "volvo.utilities"
     },
@@ -1309,7 +1374,8 @@
       "name": "bg-accent-blue",
       "prefixes": [],
       "declarations": [
-        "background-color: var(--v-color-surface-accent-blue)"
+        "--background-color: var(--v-color-surface-accent-blue)",
+        "background-color: var(--background-color)"
       ],
       "layer": "volvo.utilities"
     },
@@ -1317,7 +1383,8 @@
       "name": "bg-feedback-green",
       "prefixes": [],
       "declarations": [
-        "background-color: var(--v-color-surface-feedback-green)"
+        "--background-color: var(--v-color-surface-feedback-green)",
+        "background-color: var(--background-color)"
       ],
       "layer": "volvo.utilities"
     },
@@ -1325,7 +1392,8 @@
       "name": "bg-feedback-orange",
       "prefixes": [],
       "declarations": [
-        "background-color: var(--v-color-surface-feedback-orange)"
+        "--background-color: var(--v-color-surface-feedback-orange)",
+        "background-color: var(--background-color)"
       ],
       "layer": "volvo.utilities"
     },
@@ -1333,7 +1401,8 @@
       "name": "bg-feedback-red",
       "prefixes": [],
       "declarations": [
-        "background-color: var(--v-color-surface-feedback-red)"
+        "--background-color: var(--v-color-surface-feedback-red)",
+        "background-color: var(--background-color)"
       ],
       "layer": "volvo.utilities"
     },
@@ -3398,6 +3467,7 @@
       "name": "text-always-black",
       "prefixes": [],
       "declarations": [
+        "--color: var(--v-color-always-black)",
         "color: var(--v-color-always-black)"
       ],
       "layer": "volvo.utilities"
@@ -3406,18 +3476,30 @@
       "name": "text-always-white",
       "prefixes": [],
       "declarations": [
+        "--color: var(--v-color-always-white)",
         "color: var(--v-color-always-white)"
       ],
       "layer": "volvo.utilities"
     },
+    {
+      "name": "text-inverted",
+      "prefixes": [],
+      "declarations": [
+        "--color: var(--v-color-foreground-inverted)",
+        "color: var(--v-color-foreground-inverted)"
+      ],
+      "layer": "volvo.utilities"
+    },
     {
       "name": "text-primary",
       "prefixes": [
         "current",
         "checked",
-        "selected"
+        "selected",
+        "hover"
       ],
       "declarations": [
+        "--color: var(--v-color-foreground-primary)",
         "color: var(--v-color-foreground-primary)"
       ],
       "layer": "volvo.utilities"
@@ -3426,6 +3508,7 @@
       "name": "text-secondary",
       "prefixes": [],
       "declarations": [
+        "--color: var(--v-color-foreground-secondary)",
         "color: var(--v-color-foreground-secondary)"
       ],
       "layer": "volvo.utilities"
@@ -3434,6 +3517,7 @@
       "name": "text-accent-blue",
       "prefixes": [],
       "declarations": [
+        "--color: var(--v-color-foreground-accent-blue)",
         "color: var(--v-color-foreground-accent-blue)"
       ],
       "layer": "volvo.utilities"
@@ -3442,6 +3526,7 @@
       "name": "text-feedback-green",
       "prefixes": [],
       "declarations": [
+        "--color: var(--v-color-foreground-feedback-green)",
         "color: var(--v-color-foreground-feedback-green)"
       ],
       "layer": "volvo.utilities"
@@ -3450,6 +3535,7 @@
       "name": "text-feedback-orange",
       "prefixes": [],
       "declarations": [
+        "--color: var(--v-color-foreground-feedback-orange)",
         "color: var(--v-color-foreground-feedback-orange)"
       ],
       "layer": "volvo.utilities"
@@ -3458,6 +3544,7 @@
       "name": "text-feedback-red",
       "prefixes": [],
       "declarations": [
+        "--color: var(--v-color-foreground-feedback-red)",
         "color: var(--v-color-foreground-feedback-red)"
       ],
       "layer": "volvo.utilities"