@scania/tegel-lite 0.1.0-dev-test-beta.0 → 0.1.0-focus-ring-beta.1

package/dist/tl-table.css

@@ -323,8 +323,10 @@ body {
   cursor: pointer;
 }
 .tl-table__row--clickable:focus-visible {
-  outline: 2px solid var(--table-header-button-focus);
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
   outline-offset: -2px;
+  z-index: 1;
 }
 .tl-table--zebra-rows-odd .tl-table__body .tl-table__row:nth-child(odd) {
   background-color: var(--table-zebra-mode);
@@ -349,7 +351,7 @@ body {
   transition: background-color 200ms ease;
   min-width: 192px;
 }
-.tl-table__header-cell:hover:not(.tl-table__header-cell--checkbox):not(.tl-table__header-cell--expand) {
+.tl-table__header-cell:hover:not(.tl-table__header-cell--checkbox, .tl-table__header-cell--expand) {
   background-color: var(--table-header-hover);
 }
 .tl-table__header-cell:first-of-type {
@@ -423,8 +425,10 @@ body {
   text-align: left;
 }
 .tl-table__header-button:focus-visible, .tl-table__header-button:focus, .tl-table__header-button:active {
-  outline: 2px solid var(--table-header-button-focus);
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
   outline-offset: -2px;
+  z-index: 1;
 }
 .tl-table--compact .tl-table__header-button {
   padding: 0;
@@ -508,7 +512,7 @@ body {
 .tl-table--no-min-width .tl-table__body-cell {
   min-width: unset;
 }
-.tl-table--vertical-dividers .tl-table__body-cell:not(:last-child):not(.tl-table__body-cell--expand) {
+.tl-table--vertical-dividers .tl-table__body-cell:not(:last-child, .tl-table__body-cell--expand) {
   border-right: 1px solid var(--table-divider);
 }
 .tl-table--zebra-columns-odd .tl-table__body-cell:nth-child(odd) {
@@ -734,9 +738,9 @@ body {
   padding: 0;
 }
 .tl-table__body-cell--expand:has(.tl-table__expand-input:focus), .tl-table__body-cell--expand:has(.tl-table__expand-input:focus-visible), .tl-table__body-cell--expand:has(.tl-table__expand-input:active) {
-  outline: 2px solid var(--table-header-button-focus);
-  box-shadow: 0 0 0 1px var(--color-brand-neutral-white);
-  outline-offset: -1px;
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
+  outline-offset: -2px;
   z-index: 1;
 }
 

package/dist/tl-toast.css

@@ -94,8 +94,8 @@
   cursor: pointer;
 }
 .tl-toast__close:focus-visible {
-  outline: 2px solid var(--tds-focus-outline-color);
-  box-shadow: 0 0 0 1px var(--tds-white);
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
   outline-offset: 1px;
   z-index: 1;
 }

package/dist/tl-toggle.css

@@ -49,8 +49,8 @@
   height: 16px;
 }
 .tl-toggle__input:focus-visible {
-  outline: 2px solid var(--tds-focus-outline-color);
-  box-shadow: 0 0 0 1px var(--tds-white);
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
   outline-offset: 1px;
   z-index: 1;
   border-radius: 16px;

package/dist/tl-tooltip.css

@@ -1,6 +1,8 @@
 .tl-tooltip {
-  --tooltip-text: var(--color-foreground-text-inverse-strong);
-  --tooltip-background: var(--color-background-inverse-layer-03);
+  --tooltip-color: var(--component-tooltip-text-default);
+  --tooltip-background: var(--component-tooltip-background-default);
+  --tooltip-border-radius: calc(var(--component-tooltip-border-radius-default) * 1px);
+  --tooltip-border-radius-none: calc(var(--component-tooltip-border-radius-none) * 1px);
 }
 
 .scania {
@@ -22,19 +24,19 @@
   position: fixed;
   z-index: var(--tds-z-index-tooltip, 1000);
   padding: 8px;
-  max-width: 204px;
+  max-width: 208px;
   width: max-content;
   white-space: normal;
-  word-wrap: break-word;
-  background-color: var(--tooltip-background, #333);
-  color: var(--tooltip-text, #fff);
+  overflow-wrap: break-word;
+  background-color: var(--tooltip-background);
+  color: var(--tooltip-color);
   box-sizing: border-box;
   line-height: var(--tl-tooltip-line-height);
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
   transition: opacity 0.2s ease, visibility 0.2s ease;
-  border-radius: 4px;
+  border-radius: var(--tooltip-border-radius);
 }
 .tl-tooltip--visible {
   opacity: 1;
@@ -42,26 +44,26 @@
   pointer-events: auto;
 }
 .tl-tooltip--top-start {
-  border-radius: 4px 4px 4px 0;
+  border-radius: var(--tooltip-border-radius) var(--tooltip-border-radius) var(--tooltip-border-radius) var(--tooltip-border-radius-none);
 }
 .tl-tooltip--top-end {
-  border-radius: 4px 4px 0;
+  border-radius: var(--tooltip-border-radius) var(--tooltip-border-radius) var(--tooltip-border-radius-none) var(--tooltip-border-radius);
 }
 .tl-tooltip--bottom-start {
-  border-radius: 0 4px 4px;
+  border-radius: var(--tooltip-border-radius-none) var(--tooltip-border-radius) var(--tooltip-border-radius) var(--tooltip-border-radius);
 }
 .tl-tooltip--bottom-end {
-  border-radius: 4px 0 4px 4px;
+  border-radius: var(--tooltip-border-radius) var(--tooltip-border-radius-none) var(--tooltip-border-radius) var(--tooltip-border-radius);
 }
 .tl-tooltip--left-start {
-  border-radius: 4px 0 4px 4px;
+  border-radius: var(--tooltip-border-radius) var(--tooltip-border-radius-none) var(--tooltip-border-radius) var(--tooltip-border-radius);
 }
 .tl-tooltip--left-end {
-  border-radius: 4px 4px 0;
+  border-radius: var(--tooltip-border-radius) var(--tooltip-border-radius) var(--tooltip-border-radius-none) var(--tooltip-border-radius);
 }
 .tl-tooltip--right-start {
-  border-radius: 0 4px 4px;
+  border-radius: var(--tooltip-border-radius-none) var(--tooltip-border-radius) var(--tooltip-border-radius) var(--tooltip-border-radius);
 }
 .tl-tooltip--right-end {
-  border-radius: 4px 4px 4px 0;
+  border-radius: var(--tooltip-border-radius) var(--tooltip-border-radius) var(--tooltip-border-radius) var(--tooltip-border-radius-none);
 }

package/dist/traton-variables.css

@@ -24,74 +24,74 @@
 /* === TRATON Type Display === */
 @font-face {
   font-family: "TRATON Type Display";
-  src: url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-display-medium.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-display-medium.woff") format("woff");
   font-weight: 500;
   font-style: normal;
   font-display: swap;
+  src: url("./assets/fonts/traton/TratonTypeDisplay-Medium.woff") format("woff"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-display-medium.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-display-medium.woff") format("woff");
 }
 @font-face {
   font-family: "TRATON Type Display";
-  src: url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-display-bold.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-display-bold.woff") format("woff");
   font-weight: 700;
   font-style: normal;
   font-display: swap;
+  src: url("./assets/fonts/traton/TratonTypeDisplay-Bold.woff") format("woff"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-display-bold.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-display-bold.woff") format("woff");
 }
 /* === TRATON Type Text === */
 @font-face {
   font-family: "TRATON Type Text";
-  src: url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-regular.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-regular.woff") format("woff");
   font-weight: 400;
   font-style: normal;
   font-display: swap;
+  src: url("./assets/fonts/traton/TratonTypeText-Regular.woff") format("woff"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-regular.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-regular.woff") format("woff");
 }
 @font-face {
   font-family: "TRATON Type Text";
-  src: url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-italic.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-italic.woff") format("woff");
   font-weight: 400;
   font-style: italic;
   font-display: swap;
+  src: url("./assets/fonts/traton/TratonTypeText-Italic.woff") format("woff"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-italic.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-italic.woff") format("woff");
 }
 @font-face {
   font-family: "TRATON Type Text";
-  src: url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-medium.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-medium.woff") format("woff");
   font-weight: 500;
   font-style: normal;
   font-display: swap;
+  src: url("./assets/fonts/traton/TratonTypeText-Medium.woff") format("woff"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-medium.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-medium.woff") format("woff");
 }
 @font-face {
   font-family: "TRATON Type Text";
-  src: url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-medium-italic.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-medium-italic.woff") format("woff");
   font-weight: 500;
   font-style: italic;
   font-display: swap;
+  src: url("./assets/fonts/traton/TratonTypeText-MediumItalic.woff") format("woff"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-medium-italic.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-medium-italic.woff") format("woff");
 }
 @font-face {
   font-family: "TRATON Type Text";
-  src: url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-semibold.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-semibold.woff") format("woff");
   font-weight: 600;
   font-style: normal;
   font-display: swap;
+  src: url("./assets/fonts/traton/TratonTypeText-SemiBold.woff") format("woff"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-semibold.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-semibold.woff") format("woff");
 }
 @font-face {
   font-family: "TRATON Type Text";
-  src: url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-semibold-italic.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-semibold-italic.woff") format("woff");
   font-weight: 600;
   font-style: italic;
   font-display: swap;
+  src: url("./assets/fonts/traton/TratonTypeText-SemiBoldItalic.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-semibold-italic.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-semibold-italic.woff") format("woff");
 }
 @font-face {
   font-family: "TRATON Type Text";
-  src: url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-bold.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-bold.woff") format("woff");
   font-weight: 700;
   font-style: normal;
   font-display: swap;
+  src: url("./assets/fonts/traton/TratonTypeText-Bold.woff") format("woff"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-bold.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-bold.woff") format("woff");
 }
 @font-face {
   font-family: "TRATON Type Text";
-  src: url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-bold-italic.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-bold-italic.woff") format("woff");
   font-weight: 700;
   font-style: italic;
   font-display: swap;
+  src: url("./assets/fonts/traton/TratonTypeText-BoldItalic.woff") format("woff"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-bold-italic.woff2") format("woff2"), url("https://cdn.digitaldesign.scania.com/fonts/traton/1.0.0/traton-type-text-bold-italic.woff") format("woff");
 }
 .traton {
   /* Font size tokens */
@@ -344,16 +344,16 @@
   --traton-color-yellow-900: #302403;
   --traton-color-yellow-950: #241b00;
   --traton-color-yellow-1000: #1a1300;
-  --traton-opacity-0: 0;
-  --traton-opacity-25: 25;
-  --traton-opacity-50: 50;
-  --traton-opacity-75: 75;
-  --traton-opacity-100: 100;
   --traton-font-family-default: traton type text;
   --traton-font-family-display: traton type display;
   --traton-font-weight-semi-bold: 600;
   --traton-font-weight-medium: 500;
   --traton-font-weight-regular: 400;
+  --traton-opacity-0: 0;
+  --traton-opacity-25: 25;
+  --traton-opacity-50: 50;
+  --traton-opacity-75: 75;
+  --traton-opacity-100: 100;
   --traton-unit-0: 0;
   --traton-unit-1: 1;
   --traton-unit-2: 2;
@@ -409,11 +409,15 @@
   --color-border-inverse-disabled: var(--traton-color-transparent-inverse-400);
   --color-border-inverse-discrete: var(--traton-color-transparent-inverse-200);
   --color-border-inverse-none: var(--traton-color-transparent-invisible-dark);
+  --color-icon-base: var(--traton-color-base-black);
+  --color-icon-brand: var(--traton-color-blue-950);
   --color-icon-defined: var(--traton-color-transparent-700);
   --color-icon-soft: var(--traton-color-transparent-600);
   --color-icon-subtle: var(--traton-color-transparent-500);
   --color-icon-disabled: var(--traton-color-transparent-400);
   --color-icon-discrete: var(--traton-color-transparent-200);
+  --color-icon-inverse-base: var(--traton-color-base-black);
+  --color-icon-inverse-brand: var(--traton-color-blue-950);
   --color-icon-inverse-defined: var(--traton-color-transparent-inverse-700);
   --color-icon-inverse-soft: var(--traton-color-transparent-inverse-600);
   --color-icon-inverse-subtle: var(--traton-color-transparent-inverse-500);
@@ -439,24 +443,26 @@
   --color-system-danger-default: var(--traton-color-red-300);
   --color-system-danger-subtle: var(--traton-color-red-200);
   --color-system-danger-discrete: var(--traton-color-red-50);
+  --color-text-base: var(--traton-color-base-black);
+  --color-text-brand: var(--traton-color-blue-950);
   --color-text-defined: var(--traton-color-transparent-700);
   --color-text-soft: var(--traton-color-transparent-600);
   --color-text-subtle: var(--traton-color-transparent-500);
   --color-text-disabled: var(--traton-color-transparent-400);
-  --color-text-brand: var(--traton-color-blue-950);
-  --color-text-base: var(--traton-color-base-black);
+  --color-text-discrete: var(--traton-color-transparent-200);
+  --color-text-inverse-brand: var(--traton-color-base-white);
   --color-text-inverse-defined: var(--traton-color-transparent-inverse-700);
   --color-text-inverse-soft: var(--traton-color-transparent-inverse-600);
   --color-text-inverse-subtle: var(--traton-color-transparent-inverse-500);
   --color-text-inverse-disabled: var(--traton-color-transparent-inverse-400);
-  --color-text-inverse-brand: var(--traton-color-base-white);
+  --color-text-inverse-discrete: var(--traton-color-transparent-inverse-200);
   --color-border-strong: var(--traton-color-transparent-950);
   --color-border-inverse-strong: var(--traton-color-transparent-inverse-950);
   --color-icon-strong: var(--traton-color-transparent-950);
   --color-icon-inverse-strong: var(--traton-color-transparent-inverse-950);
   --color-text-strong: var(--traton-color-transparent-950);
-  --color-text-inverse-strong: var(--traton-color-transparent-inverse-950);
   --color-text-inverse-base: var(--scania-color-base-white);
+  --color-text-inverse-strong: var(--traton-color-transparent-inverse-950);
 }
 
 /**
@@ -490,11 +496,15 @@
   --color-border-inverse-disabled: var(--traton-color-transparent-400);
   --color-border-inverse-discrete: var(--traton-color-transparent-200);
   --color-border-inverse-none: var(--traton-color-transparent-invisible-light);
+  --color-icon-base: var(--traton-color-base-white);
+  --color-icon-brand: var(--traton-color-base-white);
   --color-icon-defined: var(--traton-color-transparent-inverse-700);
   --color-icon-soft: var(--traton-color-transparent-inverse-600);
   --color-icon-subtle: var(--traton-color-transparent-inverse-500);
   --color-icon-disabled: var(--traton-color-transparent-inverse-400);
   --color-icon-discrete: var(--traton-color-transparent-inverse-200);
+  --color-icon-inverse-base: var(--traton-color-base-white);
+  --color-icon-inverse-brand: var(--traton-color-base-white);
   --color-icon-inverse-defined: var(--traton-color-transparent-700);
   --color-icon-inverse-soft: var(--traton-color-transparent-600);
   --color-icon-inverse-subtle: var(--traton-color-transparent-500);
@@ -520,24 +530,26 @@
   --color-system-danger-default: var(--traton-color-red-300);
   --color-system-danger-subtle: var(--traton-color-red-500);
   --color-system-danger-discrete: var(--traton-color-red-850);
+  --color-text-base: var(--traton-color-base-white);
+  --color-text-brand: var(--traton-color-base-white);
   --color-text-defined: var(--traton-color-transparent-inverse-700);
   --color-text-soft: var(--traton-color-transparent-inverse-600);
   --color-text-subtle: var(--traton-color-transparent-inverse-500);
   --color-text-disabled: var(--traton-color-transparent-inverse-400);
-  --color-text-brand: var(--traton-color-base-white);
-  --color-text-base: var(--traton-color-base-white);
+  --color-text-discrete: var(--traton-color-transparent-inverse-200);
+  --color-text-inverse-base: var(--traton-color-base-black);
   --color-text-inverse-defined: var(--traton-color-transparent-700);
   --color-text-inverse-soft: var(--traton-color-transparent-600);
   --color-text-inverse-subtle: var(--traton-color-transparent-500);
   --color-text-inverse-disabled: var(--traton-color-transparent-400);
-  --color-text-inverse-base: var(--traton-color-base-black);
+  --color-text-inverse-discrete: var(--traton-color-transparent-200);
   --color-border-strong: var(--traton-color-transparent-inverse-950);
   --color-border-inverse-strong: var(--traton-color-transparent-950);
   --color-icon-strong: var(--traton-color-transparent-inverse-950);
   --color-icon-inverse-strong: var(--traton-color-transparent-950);
   --color-text-strong: var(--traton-color-transparent-inverse-950);
-  --color-text-inverse-strong: var(--traton-color-transparent-950);
   --color-text-inverse-brand: var(--traton-color-transparent-950);
+  --color-text-inverse-strong: var(--traton-color-transparent-950);
 }
 
 /* Traton logotype tokens */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scania/tegel-lite",
-  "version": "0.1.0-dev-test-beta.0",
+  "version": "0.1.0-focus-ring-beta.1",
   "description": "Styles-only library for Tegel Design System (Beta)",
   "type": "module",
   "keywords": [