@scania/tegel 1.33.0 → 1.34.0-design.tokens.beta.test.0

package/dist/collection/components/icon/tratonIconsArray.js

@@ -1,5 +1,5 @@
 export const iconsCollection =
-  '[{"name":"arrow_diagonal","definition":"M24 5.75H10v2h12.59L6 24.34l1.41 1.41L24 9.16v12.59h2v-16h-2Z","viewbox":"0 0 32 32"},{"name":"arrow_down","definition":"M24.59 16.59 17 24.17V4h-2v20.17L7.41 16.6 6 18l10 10 10-10-1.41-1.41Z","viewbox":"0 0 32 32"},{"name":"arrow_left","definition":"m4 16 10 10 1.41-1.41L7.83 17H28v-2H7.83l7.58-7.59L14 6 4 16Z","viewbox":"0 0 32 32"},{"name":"arrow_right","definition":"M28 16 18 6l-1.41 1.41L24.17 15H4v2h20.17l-7.58 7.59L18 26l10-10Z","viewbox":"0 0 32 32"},{"name":"arrow_up","definition":"M7.41 15.41 15 7.83V28h2V7.83l7.59 7.58L26 14 16 4 6 14l1.41 1.41Z","viewbox":"0 0 32 32"},{"name":"bento","definition":"M6 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm10 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm10 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4ZM6 18a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm10 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm10 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4ZM6 28a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm10 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm10 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z","viewbox":"0 0 32 32"},{"name":"burger","definition":"M30 6H2v2h28V6Zm0 9H2v2h28v-2Zm0 9H2v2h28v-2Z","viewbox":"0 0 32 32"},{"name":"calendar","definition":"M26.47 4H22V2h-2v2h-8V2h-2v2H5.53L4 7v18l1.53 3h20.94L28 25V7l-1.53-3ZM10 6v2h2V6h8v2h2V6h3.25L26 7.48V10H6V7.48L6.75 6H10ZM6.75 26 6 24.52V12h20v12.52L25.25 26H6.75Z","viewbox":"0 0 32 32"},{"name":"chevron_down","definition":"m7.13 10.29-1.41 1.42 10 10 10-10-1.41-1.42-8.59 8.59-8.59-8.59Z","viewbox":"0 0 32 32"},{"name":"chevron_left","definition":"M21.41 7.41 20 6 10 16l10 10 1.41-1.41L12.83 16l8.58-8.59Z","viewbox":"0 0 32 32"},{"name":"chevron_right","definition":"M10.59 7.41 12 6l10 10-10 10-1.41-1.41L19.17 16 10.6 7.41Z","viewbox":"0 0 32 32"},{"name":"chevron_up","definition":"m24.89 21.7 1.4-1.4-10-10-10 10 1.42 1.4 8.59-8.58 8.59 8.58Z","viewbox":"0 0 32 32"},{"name":"cross","definition":"M25 8.41 23.59 7 16 14.59 8.41 7 7 8.41 14.59 16 7 23.59 8.41 25 16 17.41 23.59 25 25 23.59 17.41 16 25 8.41Z","viewbox":"0 0 32 32"},{"name":"edit","definition":"m23 3-6 6L4.13 21.87 3 29l7.13-1.13L23 15l6-6-6-6ZM9.18 26l-3.77.6.59-3.77 12.41-12.42 3.17 3.18L9.18 26ZM23 12.17 19.83 9 23 5.83 26.17 9 23 12.17Z","viewbox":"0 0 32 32"},{"name":"error","definition":"M16 30C8.28 30 2 23.72 2 16S8.28 2 16 2s14 6.28 14 14-6.28 14-14 14Zm0-26C9.38 4 4 9.38 4 16s5.38 12 12 12 12-5.38 12-12S22.62 4 16 4ZM17 9h-2v10h2V9Zm0 12h-2v2h2v-2Z","viewbox":"0 0 32 32"},{"name":"info","definition":"M16 30C8.28 30 2 23.72 2 16S8.28 2 16 2s14 6.28 14 14-6.28 14-14 14Zm0-26C9.38 4 4 9.38 4 16s5.38 12 12 12 12-5.38 12-12S22.62 4 16 4ZM17 13h-2v10h2V13Zm0-4h-2v2h2V9Z","viewbox":"0 0 32 32"},{"name":"minus","definition":"M28 15H4v2h24v-2Z","viewbox":"0 0 32 32"},{"name":"notification","definition":"M25 19.55V13a9 9 0 0 0-8-8.94V2h-2v2.06A9 9 0 0 0 7 13v6.55L5 21v5h22v-5l-2-1.45ZM25 24H7v-1.98l.03-.02L9 20.57V13a7 7 0 0 1 14 0v7.57L24.97 22l.03.02V24Zm-5 4h-8v2h8v-2Z","viewbox":"0 0 32 32"},{"name":"plus","definition":"M28 15H17V4h-2v11H4v2h11v11h2V17h11v-2Z","viewbox":"0 0 32 32"},{"name":"print","definition":"M28 9h-3V3H7v6H4l-2 3.93V23h5v6h18v-6h5V12.93L28 9ZM9 5h14v4H9V5Zm14 22H9v-9h14v9Zm5-6h-3v-5H7v5H4v-7.59L5.23 11h21.54L28 13.41V21Z","viewbox":"0 0 32 32"},{"name":"refresh","definition":"M19 10h4.98C22.11 7.5 19.2 6 16 6 10.49 6 6 10.49 6 16H4a12.01 12.01 0 0 1 21-7.94V4h2v8h-8v-2Zm-6 12H8.02c1.87 2.5 4.79 4 7.98 4 5.51 0 10-4.49 10-10h2a12.01 12.01 0 0 1-21 7.93V28H5v-8h8v2Z","viewbox":"0 0 32 32"},{"name":"search","definition":"m28 26.59-6.26-6.27A10.01 10.01 0 1 0 4 14a10.01 10.01 0 0 0 16.32 7.74L26.6 28l1.4-1.41ZM14 22a8 8 0 0 1 0-16 8 8 0 0 1 0 16Z","viewbox":"0 0 32 32"},{"name":"share","definition":"M25.1 21a4.08 4.08 0 0 0-3.15 1.48L10.83 16.9a3.75 3.75 0 0 0 .02-1.74l11.12-5.61a4.05 4.05 0 0 0 6.91-1.15 3.96 3.96 0 0 0-1.76-4.85 4.08 4.08 0 0 0-5.13.9 3.97 3.97 0 0 0-.88 3.29L9.93 13.36A4.05 4.05 0 0 0 2.86 16a3.97 3.97 0 0 0 2.61 3.74 4.09 4.09 0 0 0 4.46-1.09l11.2 5.65a3.97 3.97 0 0 0 2.42 4.38 4.08 4.08 0 0 0 4.4-.86A3.99 3.99 0 0 0 25.1 21Zm0-16a2.04 2.04 0 0 1 1.86 1.24 1.98 1.98 0 0 1-.44 2.18 2.03 2.03 0 0 1-3.45-1.41 2.03 2.03 0 0 1 2.02-2ZM6.9 18a2.04 2.04 0 0 1-1.87-1.23 1.98 1.98 0 0 1 .44-2.18A2.03 2.03 0 0 1 8.92 16a2.03 2.03 0 0 1-2.02 2Zm18.2 9a2.04 2.04 0 0 1-1.88-1.23 1.98 1.98 0 0 1 .44-2.18A2.03 2.03 0 0 1 27.11 25c0 .53-.2 1.04-.59 1.42-.38.37-.9.58-1.43.58Z","viewbox":"0 0 32 32"},{"name":"sorting","definition":"M27.6 20.6 24 24.2V8h-2v16.2l-3.6-3.6L17 22l6 6 6-6-1.4-1.4ZM9 4l-6 6 1.4 1.4L8 7.8V24h2V7.8l3.6 3.6L15 10 9 4Z","viewbox":"0 0 32 32"},{"name":"star","definition":"m30.07 13.39-.63-1.87-8.89-.87L17 2h-2l-3.55 8.65-8.89.87-.63 1.87 6.75 6.24-2 9.23L8.33 30 16 25.21 23.67 30l1.63-1.14-2-9.23 6.77-6.24Zm-13 10.13L16 22.85l-1.06.67-5.83 3.64 1.52-7.11.24-1.12-.87-.77-5.21-4.85 6.86-.67 1.2-.11.46-1.12L16 4.83l2.69 6.58.46 1.12 1.2.11 6.86.67L22 18.16l-.83.77.24 1.12 1.52 7.11-5.86-3.64Z","viewbox":"0 0 32 32"},{"name":"tick","definition":"m28 9-1.41-1.41L13 21.17 5.41 13.6 4 15l9 9L28 9Z","viewbox":"0 0 32 32"},{"name":"truck","definition":"M22 8H10v2h12V8ZM30 8h-4V6.52L23.7 2H8.3L6 6.52V8H2v2h4v20h5.2l1.03-2h7.55l1.02 2H26V10h4V8Zm-7.98 20L21 26H11l-1.02 2H8v-4h3l-1.02-2H8V7l1.53-3h12.94L24 7v15h-1.98L21 24h3v4h-1.98ZM23 16H9l4.08 8h5.84L23 16Zm-5.3 6h-3.4l-2.04-4h7.48l-2.04 4Z","viewbox":"0 0 32 32"},{"name":"warning","definition":"M27.68 23 18 4h-4L4.32 23l-.32.62V28h24v-4.38l-.32-.62ZM6 26v-1.9L15.22 6h1.56L26 24.1V26H6ZM17 11h-2v9h2v-9Zm0 11h-2v2h2v-2Z","viewbox":"0 0 32 32"}]';
+  '[{"name":"arrow_diagonal","definition":"M24 5.75H10v2h12.59L6 24.34l1.41 1.41L24 9.16v12.59h2v-16h-2Z","viewbox":"0 0 32 32"},{"name":"arrow_down","definition":"M24.59 16.59 17 24.17V4h-2v20.17L7.41 16.6 6 18l10 10 10-10-1.41-1.41Z","viewbox":"0 0 32 32"},{"name":"arrow_left","definition":"m4 16 10 10 1.41-1.41L7.83 17H28v-2H7.83l7.58-7.59L14 6 4 16Z","viewbox":"0 0 32 32"},{"name":"arrow_right","definition":"M28 16 18 6l-1.41 1.41L24.17 15H4v2h20.17l-7.58 7.59L18 26l10-10Z","viewbox":"0 0 32 32"},{"name":"arrow_up","definition":"M7.41 15.41 15 7.83V28h2V7.83l7.59 7.58L26 14 16 4 6 14l1.41 1.41Z","viewbox":"0 0 32 32"},{"name":"bento","definition":"M6 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm10 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm10 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4ZM6 18a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm10 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm10 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4ZM6 28a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm10 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm10 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z","viewbox":"0 0 32 32"},{"name":"burger","definition":"M30 6H2v2h28V6Zm0 9H2v2h28v-2Zm0 9H2v2h28v-2Z","viewbox":"0 0 32 32"},{"name":"calendar","definition":"M26.47 4H22V2h-2v2h-8V2h-2v2H5.53L4 7v18l1.53 3h20.94L28 25V7l-1.53-3ZM10 6v2h2V6h8v2h2V6h3.25L26 7.48V10H6V7.48L6.75 6H10ZM6.75 26 6 24.52V12h20v12.52L25.25 26H6.75Z","viewbox":"0 0 32 32"},{"name":"chevron_down","definition":"m7.13 10.29-1.41 1.42 10 10 10-10-1.41-1.42-8.59 8.59-8.59-8.59Z","viewbox":"0 0 32 32"},{"name":"chevron_left","definition":"M21.41 7.41 20 6 10 16l10 10 1.41-1.41L12.83 16l8.58-8.59Z","viewbox":"0 0 32 32"},{"name":"chevron_right","definition":"M10.59 7.41 12 6l10 10-10 10-1.41-1.41L19.17 16 10.6 7.41Z","viewbox":"0 0 32 32"},{"name":"chevron_up","definition":"m24.89 21.7 1.4-1.4-10-10-10 10 1.42 1.4 8.59-8.58 8.59 8.58Z","viewbox":"0 0 32 32"},{"name":"cross","definition":"M25 8.41 23.59 7 16 14.59 8.41 7 7 8.41 14.59 16 7 23.59 8.41 25 16 17.41 23.59 25 25 23.59 17.41 16 25 8.41Z","viewbox":"0 0 32 32"},{"name":"edit_inactive","definition":"m21.8 17.3 5.6-5.6c.8-.8.8-2 0-2.8l-4.2-4.2c-.8-.8-2-.8-2.8 0l-5.6 5.6 1.4 1.4 2.1-2.1 4.2 4.2-2.1 2.1 1.4 1.4zm0-11.3 4.2 4.2-2.1 2.1-4.2-4.2L21.8 6zm-9.9 9.9L8 19.7l-1.6 5.8 5.8-1.6 3.9-3.9 1.4 1.4-3.9 3.9c-.2.2-.6.4-.9.5L5.3 28c-.3.1-.7 0-1-.3-.3-.3-.4-.6-.3-1l2.1-7.5c.1-.3.3-.6.5-.9l3.9-3.9 1.4 1.5zM2.3 2.3c.4-.4 1-.4 1.4 0l26 26c.4.4.4 1 0 1.4-.4.4-1 .4-1.4 0l-26-26c-.4-.4-.4-1 0-1.4z","viewbox":"0 0 32 32"},{"name":"edit","definition":"m23 3-6 6L4.13 21.87 3 29l7.13-1.13L23 15l6-6-6-6ZM9.18 26l-3.77.6.59-3.77 12.41-12.42 3.17 3.18L9.18 26ZM23 12.17 19.83 9 23 5.83 26.17 9 23 12.17Z","viewbox":"0 0 32 32"},{"name":"error","definition":"M16 30C8.28 30 2 23.72 2 16S8.28 2 16 2s14 6.28 14 14-6.28 14-14 14Zm0-26C9.38 4 4 9.38 4 16s5.38 12 12 12 12-5.38 12-12S22.62 4 16 4ZM17 9h-2v10h2V9Zm0 12h-2v2h2v-2Z","viewbox":"0 0 32 32"},{"name":"info","definition":"M16 30C8.28 30 2 23.72 2 16S8.28 2 16 2s14 6.28 14 14-6.28 14-14 14Zm0-26C9.38 4 4 9.38 4 16s5.38 12 12 12 12-5.38 12-12S22.62 4 16 4ZM17 13h-2v10h2V13Zm0-4h-2v2h2V9Z","viewbox":"0 0 32 32"},{"name":"minus","definition":"M28 15H4v2h24v-2Z","viewbox":"0 0 32 32"},{"name":"notification","definition":"M25 19.55V13a9 9 0 0 0-8-8.94V2h-2v2.06A9 9 0 0 0 7 13v6.55L5 21v5h22v-5l-2-1.45ZM25 24H7v-1.98l.03-.02L9 20.57V13a7 7 0 0 1 14 0v7.57L24.97 22l.03.02V24Zm-5 4h-8v2h8v-2Z","viewbox":"0 0 32 32"},{"name":"plus","definition":"M28 15H17V4h-2v11H4v2h11v11h2V17h11v-2Z","viewbox":"0 0 32 32"},{"name":"print","definition":"M28 9h-3V3H7v6H4l-2 3.93V23h5v6h18v-6h5V12.93L28 9ZM9 5h14v4H9V5Zm14 22H9v-9h14v9Zm5-6h-3v-5H7v5H4v-7.59L5.23 11h21.54L28 13.41V21Z","viewbox":"0 0 32 32"},{"name":"refresh","definition":"M19 10h4.98C22.11 7.5 19.2 6 16 6 10.49 6 6 10.49 6 16H4a12.01 12.01 0 0 1 21-7.94V4h2v8h-8v-2Zm-6 12H8.02c1.87 2.5 4.79 4 7.98 4 5.51 0 10-4.49 10-10h2a12.01 12.01 0 0 1-21 7.93V28H5v-8h8v2Z","viewbox":"0 0 32 32"},{"name":"search","definition":"m28 26.59-6.26-6.27A10.01 10.01 0 1 0 4 14a10.01 10.01 0 0 0 16.32 7.74L26.6 28l1.4-1.41ZM14 22a8 8 0 0 1 0-16 8 8 0 0 1 0 16Z","viewbox":"0 0 32 32"},{"name":"share","definition":"M25.1 21a4.08 4.08 0 0 0-3.15 1.48L10.83 16.9a3.75 3.75 0 0 0 .02-1.74l11.12-5.61a4.05 4.05 0 0 0 6.91-1.15 3.96 3.96 0 0 0-1.76-4.85 4.08 4.08 0 0 0-5.13.9 3.97 3.97 0 0 0-.88 3.29L9.93 13.36A4.05 4.05 0 0 0 2.86 16a3.97 3.97 0 0 0 2.61 3.74 4.09 4.09 0 0 0 4.46-1.09l11.2 5.65a3.97 3.97 0 0 0 2.42 4.38 4.08 4.08 0 0 0 4.4-.86A3.99 3.99 0 0 0 25.1 21Zm0-16a2.04 2.04 0 0 1 1.86 1.24 1.98 1.98 0 0 1-.44 2.18 2.03 2.03 0 0 1-3.45-1.41 2.03 2.03 0 0 1 2.02-2ZM6.9 18a2.04 2.04 0 0 1-1.87-1.23 1.98 1.98 0 0 1 .44-2.18A2.03 2.03 0 0 1 8.92 16a2.03 2.03 0 0 1-2.02 2Zm18.2 9a2.04 2.04 0 0 1-1.88-1.23 1.98 1.98 0 0 1 .44-2.18A2.03 2.03 0 0 1 27.11 25c0 .53-.2 1.04-.59 1.42-.38.37-.9.58-1.43.58Z","viewbox":"0 0 32 32"},{"name":"skip_backwards","definition":"M25.708 4.292a.998.998 0 0 1 0 1.412l-9.872 9.872a.6.6 0 0 0 0 .848l9.872 9.872a.998.998 0 1 1-1.412 1.412l-9.872-9.872a2.596 2.596 0 0 1 0-3.671l9.872-9.873a.998.998 0 0 1 1.412 0ZM7 4.02a1 1 0 0 1 1 1v22a1 1 0 1 1-2 0v-22a1 1 0 0 1 1-1Z","viewbox":"0 0 32 32"},{"name":"skip_forward","definition":"M6.292 27.708a.998.998 0 0 1 0-1.412l9.873-9.872a.6.6 0 0 0 0-.848L6.292 5.704a.998.998 0 0 1 1.412-1.412l9.872 9.873a2.596 2.596 0 0 1 0 3.67l-9.872 9.873a.998.998 0 0 1-1.412 0ZM25 4a1 1 0 0 1 1 1v22a1 1 0 1 1-2 0V5a1 1 0 0 1 1-1Z","viewbox":"0 0 32 32"},{"name":"sorting","definition":"M27.6 20.6 24 24.2V8h-2v16.2l-3.6-3.6L17 22l6 6 6-6-1.4-1.4ZM9 4l-6 6 1.4 1.4L8 7.8V24h2V7.8l3.6 3.6L15 10 9 4Z","viewbox":"0 0 32 32"},{"name":"star","definition":"m30.07 13.39-.63-1.87-8.89-.87L17 2h-2l-3.55 8.65-8.89.87-.63 1.87 6.75 6.24-2 9.23L8.33 30 16 25.21 23.67 30l1.63-1.14-2-9.23 6.77-6.24Zm-13 10.13L16 22.85l-1.06.67-5.83 3.64 1.52-7.11.24-1.12-.87-.77-5.21-4.85 6.86-.67 1.2-.11.46-1.12L16 4.83l2.69 6.58.46 1.12 1.2.11 6.86.67L22 18.16l-.83.77.24 1.12 1.52 7.11-5.86-3.64Z","viewbox":"0 0 32 32"},{"name":"tick","definition":"m28 9-1.41-1.41L13 21.17 5.41 13.6 4 15l9 9L28 9Z","viewbox":"0 0 32 32"},{"name":"truck","definition":"M22 8H10v2h12V8ZM30 8h-4V6.52L23.7 2H8.3L6 6.52V8H2v2h4v20h5.2l1.03-2h7.55l1.02 2H26V10h4V8Zm-7.98 20L21 26H11l-1.02 2H8v-4h3l-1.02-2H8V7l1.53-3h12.94L24 7v15h-1.98L21 24h3v4h-1.98ZM23 16H9l4.08 8h5.84L23 16Zm-5.3 6h-3.4l-2.04-4h7.48l-2.04 4Z","viewbox":"0 0 32 32"},{"name":"warning","definition":"M27.68 23 18 4h-4L4.32 23l-.32.62V28h24v-4.38l-.32-.62ZM6 26v-1.9L15.22 6h1.56L26 24.1V26H6ZM17 11h-2v9h2v-9Zm0 11h-2v2h2v-2Z","viewbox":"0 0 32 32"}]';
 export const iconsNames = [
   'arrow_diagonal',
   'arrow_down',
@@ -14,6 +14,7 @@ export const iconsNames = [
   'chevron_right',
   'chevron_up',
   'cross',
+  'edit_inactive',
   'edit',
   'error',
   'info',
@@ -24,6 +25,8 @@ export const iconsNames = [
   'refresh',
   'search',
   'share',
+  'skip_backwards',
+  'skip_forward',
   'sorting',
   'star',
   'tick',

package/dist/collection/components/link/link.css

@@ -1,3 +1,6 @@
+/* Typography Usage mixins */
+/* Centralized map of typography types */
+/* Utility mixin */
 :host {
   display: inline;
 }
@@ -5,34 +8,36 @@
   all: unset;
   cursor: pointer;
   outline: none;
-  color: var(--tds-link);
+  color: var(--link);
   text-decoration: underline;
 }
 :host ::slotted(*:focus-visible) {
-  color: var(--tds-link-focus);
+  outline: var(--dimension-radius-focus-width) solid var(--color-foreground-border-accent-focus);
+  box-shadow: 0 0 0 1px var(--color-brand-neutral-white);
+  outline-offset: 1px;
+  outline-width: var(--link-focus-outline-width);
+  color: var(--link);
   text-decoration: none;
-  outline: 2px solid var(--tds-link-focus);
-  outline-offset: -2px;
 }
 :host ::slotted(*:active) {
-  color: var(--tds-link);
+  color: var(--link);
   text-decoration: underline;
-  text-decoration-color: var(--tds-link);
+  text-decoration-color: var(--link);
 }
 :host ::slotted(*:hover) {
-  color: var(--tds-link-hover);
+  color: var(--link-hover);
   text-decoration: underline;
-  text-decoration-color: var(--tds-link-hover);
+  text-decoration-color: var(--link-hover);
 }
 :host ::slotted(*:visited) {
-  color: var(--tds-link-visited);
-  text-decoration-color: var(--tds-link-visited);
+  color: var(--link-visited);
+  text-decoration-color: var(--link-visited);
 }
 
 .disabled ::slotted(*),
 .disabled ::slotted(*:visited) {
-  color: var(--tds-link-disabled);
-  text-decoration-color: var(--tds-link-disabled);
+  color: var(--link-disabled);
+  text-decoration-color: var(--link-disabled);
   pointer-events: none;
 }
 
@@ -45,6 +50,10 @@
 }
 
 .standalone ::slotted(*) {
-  font: var(--tds-detail-02);
-  letter-spacing: var(--tds-detail-02-ls);
+  font-family: var(--detail-02-font-family);
+  font-size: var(--detail-02-font-size);
+  line-height: var(--detail-02-line-height);
+  font-weight: var(--detail-02-font-weight);
+  letter-spacing: var(--detail-02-letter-spacing);
+  text-transform: var(--detail-02-text-transform);
 }

package/dist/collection/components/message/message.css

@@ -2,57 +2,73 @@
 /* Centralized map of typography types */
 /* Utility mixin */
 :host {
-  /* Default values */
-  --tds-message-background: var(--background-elevation-layer-03);
-  --tds-message-background-error: var(--system-danger-subtle-03);
-  --tds-message-background-warning: var(--background-elevation-layer-03);
-  --tds-message-background-success: var(--background-elevation-layer-03);
   /* Variant values */
 }
 :host .tds-mode-variant-primary {
-  --tds-message-background: var(--background-elevation-layer-03);
-  --tds-message-background-error: var(--system-danger-subtle-03);
-  --tds-message-background-warning: var(--background-elevation-layer-03);
-  --tds-message-background-success: var(--background-elevation-layer-03);
+  --message-main-background: var(--message-mode-primary-background);
 }
 :host .tds-mode-variant-secondary {
-  --tds-message-background: var(--background-elevation-layer-02);
-  --tds-message-background-error: var(--system-danger-subtle-02);
-  --tds-message-background-warning: var(--background-elevation-layer-02);
-  --tds-message-background-success: var(--background-elevation-layer-02);
+  --message-main-background: var(--message-mode-secondary-background);
+}
+:host tds-icon {
+  padding-right: 16px;
+}
+:host .content {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  color: var(--message-main-text-color);
+  padding: 2px 0;
+}
+:host .content .header {
+  font-family: var(--headline-07-font-family);
+  font-size: var(--headline-07-font-size);
+  line-height: var(--headline-07-line-height);
+  font-weight: var(--headline-07-font-weight);
+  letter-spacing: var(--headline-07-letter-spacing);
+  text-transform: var(--headline-07-text-transform);
+}
+:host .content .extended-message {
+  font-family: var(--detail-02-font-family);
+  font-size: var(--detail-02-font-size);
+  line-height: var(--detail-02-line-height);
+  font-weight: var(--detail-02-font-weight);
+  letter-spacing: var(--detail-02-letter-spacing);
+  text-transform: var(--detail-02-text-transform);
+  color: var(--message-main-text-color);
 }
 :host .wrapper {
   display: flex;
   padding: 16px;
-  background-color: var(--tds-message-background);
+  background-color: var(--message-main-background);
   border-radius: 4px;
+  border-left-width: 4px;
+  border-left-style: solid;
 }
 :host .wrapper.information {
-  border-left: 4px solid var(--system-info-default);
+  border-left-color: var(--message-info-border-color);
 }
 :host .wrapper.information tds-icon {
-  color: var(--system-info-default);
+  color: var(--message-info-icon-color);
 }
 :host .wrapper.success {
-  background-color: var(--tds-message-background-success);
-  border-left: 4px solid var(--system-success-default);
+  border-left-color: var(--message-success-border-color);
 }
 :host .wrapper.success tds-icon {
-  color: var(--system-success-default);
+  color: var(--message-success-icon-color);
 }
 :host .wrapper.error {
-  background-color: var(--tds-message-background-error);
-  border-left: 4px solid var(--system-danger-default);
+  border-left-color: var(--message-error-border-color);
+  background-color: var(--message-error-background);
 }
 :host .wrapper.error tds-icon {
-  color: var(--system-danger-default);
+  color: var(--message-error-icon-color);
 }
 :host .wrapper.warning {
-  background-color: var(--tds-message-background-warning);
-  border-left: 4px solid var(--system-warning-default);
+  border-left-color: var(--message-warning-border-color);
 }
 :host .wrapper.warning tds-icon {
-  color: var(--system-warning-default);
+  color: var(--message-warning-icon-color);
 }
 :host .wrapper.minimal {
   border: none;
@@ -68,32 +84,5 @@
   text-transform: var(--detail-02-text-transform);
 }
 :host .wrapper.minimal.error .header {
-  color: var(--system-danger-default);
-}
-:host tds-icon {
-  padding-right: 16px;
-}
-:host .content {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  color: var(--foreground-text-strong);
-  padding: 2px 0;
-}
-:host .content .header {
-  font-family: var(--headline-07-font-family);
-  font-size: var(--headline-07-font-size);
-  line-height: var(--headline-07-line-height);
-  font-weight: var(--headline-07-font-weight);
-  letter-spacing: var(--headline-07-letter-spacing);
-  text-transform: var(--headline-07-text-transform);
-}
-:host .content .extended-message {
-  color: var(--foreground-text-strong);
-  font-family: var(--detail-02-font-family);
-  font-size: var(--detail-02-font-size);
-  line-height: var(--detail-02-line-height);
-  font-weight: var(--detail-02-font-weight);
-  letter-spacing: var(--detail-02-letter-spacing);
-  text-transform: var(--detail-02-text-transform);
+  color: var(--message-error-header-text-color);
 }

package/dist/collection/components/modal/modal.css

@@ -5,11 +5,11 @@
 /* MODAL STYLING */
 .tds-modal {
   box-sizing: border-box;
-  box-shadow: var(--tds-modal-box-shadow);
-  background-color: var(--background-elevation-layer-02);
+  background-color: var(--modal-background);
+  box-shadow: var(--modal-shadow);
   margin: auto;
   position: relative;
-  border-radius: var(--radius-narrow);
+  border-radius: 4px;
   max-height: 85vh;
   overflow-y: auto;
   pointer-events: auto;
@@ -25,7 +25,7 @@
   background-color: transparent;
 }
 .tds-modal::-webkit-scrollbar-thumb {
-  background-color: var(--foreground-elements-transparparent-discrete);
+  background-color: var(--modal-scroll-bar-thumb);
   border-radius: 3px;
 }
 .tds-modal__actions-sticky {
@@ -47,13 +47,13 @@
   bottom: -1px;
   left: 0;
   right: 0;
-  background-color: var(--background-elevation-layer-02);
+  background-color: var(--modal-background);
   padding: 24px 16px 16px;
   display: flex;
   gap: 16px;
 }
 .tds-modal__actions-static slot[name=actions] {
-  background-color: var(--background-elevation-layer-02);
+  background-color: var(--modal-background);
   display: flex;
   gap: 16px;
   padding: 24px 16px 16px;
@@ -147,7 +147,7 @@
   padding: 16px;
   position: sticky;
   top: 0;
-  background-color: var(--background-elevation-layer-02);
+  background-color: var(--modal-background);
   z-index: 1;
 }
 
@@ -159,7 +159,7 @@ slot[name=header]::slotted(*) {
   font-weight: var(--headline-05-font-weight);
   letter-spacing: var(--headline-05-letter-spacing);
   text-transform: var(--headline-05-text-transform);
-  color: var(--foreground-text-strong);
+  color: var(--modal-text);
   margin: 0;
   flex: 1;
 }
@@ -171,7 +171,7 @@ slot[name=header]::slotted(*) {
   font-weight: var(--body-01-font-weight);
   letter-spacing: var(--body-01-letter-spacing);
   text-transform: var(--body-01-text-transform);
-  color: var(--foreground-text-strong);
+  color: var(--modal-text);
   overflow-y: visible;
   padding: 0 16px 16px;
 }
@@ -183,7 +183,7 @@ slot[name=header]::slotted(*) {
   background-color: transparent;
 }
 .body::-webkit-scrollbar-thumb {
-  background-color: var(--foreground-elements-transparparent-discrete);
+  background-color: var(--modal-scroll-bar-thumb);
   border-radius: 3px;
 }
 
@@ -194,7 +194,7 @@ slot[name=header]::slotted(*) {
   right: 0;
   bottom: 0;
   left: 0;
-  background-color: var(--tds-modal-backdrop-background);
+  background-color: var(--modal-backdrop);
   pointer-events: auto;
 }
 .tds-modal-backdrop * {
@@ -212,14 +212,13 @@ button.tds-modal-close {
 .tds-modal-close {
   display: inline-block;
   height: auto;
-  color: var(--foreground-text-strong);
+  color: var(--modal-text);
   cursor: pointer;
 }
 .tds-modal-close:focus {
-  outline: 2px solid var(--tds-focus-outline-color);
-  box-shadow: 0 0 0 1px var(--tds-white);
+  outline: var(--dimension-radius-focus-width) solid var(--color-foreground-border-accent-focus);
+  box-shadow: 0 0 0 1px var(--color-brand-neutral-white);
   outline-offset: 1px;
-  z-index: 1;
 }
 @media (min-width: 320px) {
   .tds-modal-close {
@@ -249,7 +248,7 @@ button.tds-modal-close {
   }
 }
 .tds-modal-close-btn svg {
-  fill: var(--foreground-text-strong);
+  fill: var(--modal-cross-svg);
 }
 
 .tds-modal-overflow {

package/dist/collection/components/popover-canvas/popover-canvas.css

@@ -1,8 +1,8 @@
 .tds-popover-canvas {
   box-sizing: border-box;
   display: inline-block;
-  color: var(--tds-popover-canvas-color);
-  background-color: var(--tds-popover-canvas-background);
+  color: var(--popover-canvas-text);
+  background-color: var(--popover-canvas-background);
   box-shadow: 0 3px 3px rgba(0, 0, 0, 0.15), 0 -1px 1px rgba(0, 0, 0, 0.1);
   border-radius: 4px;
   z-index: 900;

package/dist/collection/components/popover-menu/popover-menu-item/popover-menu-item.css

@@ -1,3 +1,6 @@
+/* Typography Usage mixins */
+/* Centralized map of typography types */
+/* Utility mixin */
 :host {
   box-sizing: border-box;
   display: block;
@@ -6,9 +9,13 @@
   box-sizing: border-box;
 }
 :host .wrapper {
-  font: var(--tds-detail-02);
-  letter-spacing: var(--tds-detail-02-ls);
-  color: var(--tds-popover-menu-color);
+  font-family: var(--detail-02-font-family);
+  font-size: var(--detail-02-font-size);
+  line-height: var(--detail-02-line-height);
+  font-weight: var(--detail-02-font-weight);
+  letter-spacing: var(--detail-02-letter-spacing);
+  text-transform: var(--detail-02-text-transform);
+  color: var(--popover-menu-text);
   position: relative;
   width: 100%;
   display: flex;
@@ -17,17 +24,17 @@
 }
 :host .wrapper:hover {
   cursor: pointer;
-  background-color: var(--tds-popover-menu-background-hover);
+  background-color: var(--popover-menu-background-hover);
 }
 :host .wrapper.disabled {
   cursor: not-allowed;
-  color: var(--tds-popover-menu-divider-disabled-color);
+  color: var(--popover-menu-item-disabled);
 }
 :host .wrapper.disabled:hover {
   background-color: inherit;
 }
 :host .wrapper.disabled ::slotted(tds-icon) {
-  color: var(--tds-popover-menu-divider-disabled-icon-color);
+  color: var(--popover-menu-item-icon-disabled);
 }
 :host .wrapper.disabled ::slotted(*) {
   pointer-events: none;
@@ -50,6 +57,6 @@
   height: 100%;
   top: 0;
   left: 2px;
-  outline: 1px solid var(--tds-blue-400);
+  outline: 1px solid var(--popover-menu-item-outline-focus);
   outline-offset: 1px;
 }

package/dist/collection/components/popover-menu/popover-menu.css

@@ -2,7 +2,7 @@
   box-sizing: border-box;
   overflow: hidden;
   width: 160px;
-  background-color: var(--tds-popover-menu-background);
+  background-color: var(--popover-menu-background);
   padding: 16px 6px;
   box-shadow: 0 3px 3px rgba(0, 0, 0, 0.15), 0 -1px 1px rgba(0, 0, 0, 0.1);
   border-radius: 4px;

package/dist/collection/components/popover-menu/popover-menu.js

@@ -15,6 +15,7 @@ export class TdsPopoverMenu {
         this.offsetSkidding = 0;
         this.offsetDistance = 8;
         this.fluidWidth = false;
+        this.modeVariant = null;
         this.childRef = undefined;
     }
     /** Property for closing popover programmatically */
@@ -27,13 +28,15 @@ export class TdsPopoverMenu {
     }
     render() {
         var _a;
-        return (h(Host, { key: '4f285ba1fb6b12ad66c09bbf3d109aa4cdff82cf' }, h("tds-popover-core", { key: 'bd1fb62cbeb25ec8a0a5bfa580cef36c950e0fa3', class: {
+        return (h(Host, { key: '78e4ee3b0d6eb7c41f724582278b3de4b2227502', class: {
+                [`tds-mode-variant-${this.modeVariant}`]: Boolean(this.modeVariant),
+            } }, h("tds-popover-core", { key: 'f16d1d2d97dfa081fbbc13f1da6eb01f15d3e1e8', class: {
                 'tds-popover-menu': true,
                 [(_a = this.inheritedAttributes.class) !== null && _a !== void 0 ? _a : '']: true,
                 'fluid-width': this.fluidWidth,
             }, selector: this.selector, referenceEl: this.referenceEl, show: this.show, placement: this.placement, offsetSkidding: this.offsetSkidding, offsetDistance: this.offsetDistance, ref: (el) => {
                 this.childRef = el;
-            }, defaultShow: this.defaultShow, animation: this.animation }, h("div", { key: 'c79034c0d9f06bc429d30c51e6c5b70edd404052', role: "menu" }, h("slot", { key: '7e10d182c7529d716734317a5cca5087f30c1a9b' })))));
+            }, defaultShow: this.defaultShow, animation: this.animation }, h("div", { key: '2c413ca26bb977c971e3206ce7ac79da5107d35e', role: "menu" }, h("slot", { key: 'f9a0da937b2c038ec83e3a8e803fb858a42ab94b' })))));
     }
     static get is() { return "tds-popover-menu"; }
     static get encapsulation() { return "scoped"; }
@@ -217,6 +220,24 @@ export class TdsPopoverMenu {
                 "attribute": "fluid-width",
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "modeVariant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'primary' | 'secondary'",
+                    "resolved": "\"primary\" | \"secondary\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Mode variant of the component, based on current mode."
+                },
+                "attribute": "mode-variant",
+                "reflect": false,
+                "defaultValue": "null"
             }
         };
     }

package/dist/collection/components/radio-button/radio-button.css

@@ -1,11 +1,18 @@
+/* Typography Usage mixins */
+/* Centralized map of typography types */
+/* Utility mixin */
 .tds-radio-button {
   box-sizing: border-box;
+  font-family: var(--detail-02-font-family);
+  font-size: var(--detail-02-font-size);
+  line-height: var(--detail-02-line-height);
+  font-weight: var(--detail-02-font-weight);
+  letter-spacing: var(--detail-02-letter-spacing);
+  text-transform: var(--detail-02-text-transform);
+  color: var(--radio-button-label);
   display: flex;
   align-items: center;
   margin-left: -4px;
-  font: var(--tds-detail-02);
-  letter-spacing: var(--tds-detail-02-ls);
-  color: var(--tds-radio-button-color);
 }
 .tds-radio-button * {
   box-sizing: border-box;
@@ -24,7 +31,7 @@
   align-self: flex-start;
 }
 .tds-radio-button .tds-form-input[type=radio] + label {
-  padding: var(--tds-spacing-element-4) 0 var(--tds-spacing-element-4) var(--tds-spacing-element-4);
+  padding: var(--radio-button-spacing-4);
   cursor: pointer;
 }
 .tds-radio-button .tds-form-input[type=radio]::before, .tds-radio-button .tds-form-input[type=radio]::after {
@@ -40,52 +47,61 @@
   top: 1px;
 }
 .tds-radio-button .tds-form-input[type=radio]::after {
-  border: 1px solid var(--tds-radio-button-interaction-01);
-  background-color: var(--tds-radio-button-interaction-02);
+  background-color: var(--radio-button-background-inverse);
+  border: 1px solid var(--radio-button-border);
   width: 16px;
   height: 16px;
   left: 4px;
   top: 4px;
 }
-.tds-radio-button .tds-form-input[type=radio]:hover::before {
-  background-color: var(--tds-radio-button-background-hover);
+.tds-radio-button .tds-form-input[type=radio]:hover::after {
+  outline: 2px solid var(--radio-button-background-hover);
 }
 .tds-radio-button .tds-form-input[type=radio]:focus::before {
-  background-color: var(--tds-radio-button-background-focus);
+  background-color: var(--radio-button-focus);
   animation: rb-focus 0.4s cubic-bezier(0.65, 0.05, 0.38, 0.95) forwards;
 }
+.tds-radio-button .tds-form-input[type=radio]:focus::after {
+  outline: 1px solid var(--tds-radio-button-interaction-outline);
+}
 .tds-radio-button .tds-form-input[type=radio]:disabled, .tds-radio-button .tds-form-input[type=radio].disabled {
   cursor: not-allowed;
 }
+.tds-radio-button .tds-form-input[type=radio]:disabled::before, .tds-radio-button .tds-form-input[type=radio].disabled::before {
+  outline: 1px solid var(--radio-button-border-disabled);
+  outline-offset: -4px;
+}
 .tds-radio-button .tds-form-input[type=radio]:disabled::after, .tds-radio-button .tds-form-input[type=radio].disabled::after {
-  border-color: var(--tds-radio-button-border-color-disabled-after);
-  background-color: var(--tds-radio-button-interaction-02);
+  background-color: var(--radio-button-background-disabled);
+  border-color: var(--radio-button-background-disabled);
 }
 .tds-radio-button .tds-form-input[type=radio]:disabled + label, .tds-radio-button .tds-form-input[type=radio].disabled + label {
-  color: var(--tds-radio-button-disabled);
+  color: var(--radio-button-label-disabled);
   cursor: not-allowed;
 }
-.tds-radio-button .tds-form-input[type=radio]:disabled:hover::before, .tds-radio-button .tds-form-input[type=radio].disabled:hover::before {
-  display: none;
-  opacity: 1;
+.tds-radio-button .tds-form-input[type=radio]:disabled:hover::after, .tds-radio-button .tds-form-input[type=radio].disabled:hover::after {
+  outline: none;
+}
+.tds-radio-button .tds-form-input[type=radio]:checked:focus::after {
+  outline: 4px solid var(--radio-button-focus);
 }
 .tds-radio-button .tds-form-input[type=radio]:checked::after {
-  border: 4px solid var(--tds-radio-button-interaction-01);
+  border: 4px solid var(--radio-button-border);
 }
-.tds-radio-button .tds-form-input[type=radio]:checked:disabled:hover::before, .tds-radio-button .tds-form-input[type=radio]:checked:disabled::before, .tds-radio-button .tds-form-input[type=radio]:checked.disabled:hover::before, .tds-radio-button .tds-form-input[type=radio]:checked.disabled::before {
+.tds-radio-button .tds-form-input[type=radio]:checked:disabled::before {
+  border: 1px solid var(--radio-button-border-disabled);
   display: block;
   width: 16px;
   height: 16px;
-  left: 4px;
-  top: 4px;
-  border: 1px solid var(--tds-radio-button-color-disabled-before);
+  left: 3px;
+  top: 3px;
   box-sizing: content-box;
 }
-.tds-radio-button .tds-form-input[type=radio]:checked:disabled::after, .tds-radio-button .tds-form-input[type=radio]:checked.disabled::after {
-  border: 4px solid var(--tds-radio-button-interaction-02);
-  background-color: var(--tds-radio-button-color-disabled-after);
-  left: 5px;
-  top: 5px;
+.tds-radio-button .tds-form-input[type=radio]:checked:disabled::after {
+  border: 4px solid var(--radio-button-background-disabled);
+  background-color: var(--radio-button-checked-disabled);
+  left: 4px;
+  top: 4px;
 }
 @keyframes rb-focus {
   0% {

package/dist/collection/components/radio-button/radio-button.js

@@ -27,7 +27,9 @@ export class TdsRadioButton {
         }
     }
     render() {
-        return (h("div", { key: '6f44a40cb5ccf890bdee47d36f47a79d5f8b603c', class: "tds-radio-button" }, h("input", { key: '1da8f9df168c631a634172385c3471a5c6bb03aa', ref: (inputEl) => (this.inputElement = inputEl), "aria-label": this.tdsAriaLabel, class: "tds-form-input", type: "radio", role: "radio", name: this.name, id: this.radioId, value: this.value, checked: this.checked, "aria-checked": this.checked, required: this.required, disabled: this.disabled, onChange: () => this.handleChange(), tabIndex: this.tdsTabIndex }), h("label", { key: '0acf59236ffd3ee0136f2bdef9db8a36afe666ff', htmlFor: this.radioId }, h("slot", { key: 'add4ebdebbb4d5e15126a876c0c0940734b7b068', name: "label" }))));
+        return (h("div", { key: '6f44a40cb5ccf890bdee47d36f47a79d5f8b603c', class: "tds-radio-button" }, h("input", { key: '9f40ae91078cf4ebaff05897d792423b95e5b123', ref: (inputEl) => {
+                this.inputElement = inputEl;
+            }, "aria-label": this.tdsAriaLabel, class: "tds-form-input", type: "radio", role: "radio", name: this.name, id: this.radioId, value: this.value, checked: this.checked, "aria-checked": this.checked, required: this.required, disabled: this.disabled, onChange: () => this.handleChange(), tabIndex: this.tdsTabIndex }), h("label", { key: '7309cddb34f1e3bb734e26d534f330d1f7b18fd1', htmlFor: this.radioId }, h("slot", { key: '068c0375f5f8c66bbe8159533a629c8adb21d152', name: "label" }))));
     }
     static get is() { return "tds-radio-button"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/side-menu/side-menu-dropdown-list-item/side-menu-dropdown-list-item.css

@@ -35,10 +35,9 @@
   cursor: pointer;
 }
 :host .component ::slotted(a:focus-visible) {
-  outline: 2px solid var(--tds-focus-outline-color);
-  box-shadow: 0 0 0 1px var(--tds-white);
+  outline: var(--dimension-radius-focus-width) solid var(--color-foreground-border-accent-focus);
+  box-shadow: 0 0 0 1px var(--color-brand-neutral-white);
   outline-offset: 1px;
-  z-index: 1;
 }
 :host .component.component-selected ::slotted(a),
 :host .component.component-selected ::slotted(button) {

package/dist/collection/components/side-menu/side-menu-item/side-menu-item.css

@@ -42,10 +42,9 @@
 }
 :host .component ::slotted(a:focus-visible),
 :host .component ::slotted(button:focus-visible) {
-  outline: 2px solid var(--tds-focus-outline-color);
-  box-shadow: 0 0 0 1px var(--tds-white);
+  outline: var(--dimension-radius-focus-width) solid var(--color-foreground-border-accent-focus);
+  box-shadow: 0 0 0 1px var(--color-brand-neutral-white);
   outline-offset: 1px;
-  z-index: 1;
 }
 :host .component:hover ::slotted(a),
 :host .component:hover ::slotted(button) {