@scania/tegel-lite 0.0.3-rules-beta.7 → 0.1.0-beta.globals-test

package/dist/scania-variables.css

@@ -1345,6 +1345,8 @@ h6 {
   --scania-icon-merge-svg: url(./assets/icons/scania/merge.svg);
   --scania-icon-message_inactive-svg: url(./assets/icons/scania/message_inactive.svg);
   --scania-icon-message-svg: url(./assets/icons/scania/message.svg);
+  --scania-icon-microphone_inactive-svg: url(./assets/icons/scania/microphone_inactive.svg);
+  --scania-icon-microphone-svg: url(./assets/icons/scania/microphone.svg);
   --scania-icon-mileage_inactive-svg: url(./assets/icons/scania/mileage_inactive.svg);
   --scania-icon-mileage-svg: url(./assets/icons/scania/mileage.svg);
   --scania-icon-minimize_fullscreen-svg: url(./assets/icons/scania/minimize_fullscreen.svg);
@@ -1352,9 +1354,11 @@ h6 {
   --scania-icon-navigate_inactive-svg: url(./assets/icons/scania/navigate_inactive.svg);
   --scania-icon-navigate-svg: url(./assets/icons/scania/navigate.svg);
   --scania-icon-notification_inactive-svg: url(./assets/icons/scania/notification_inactive.svg);
+  --scania-icon-notification_snooze-svg: url(./assets/icons/scania/notification_snooze.svg);
   --scania-icon-notification-svg: url(./assets/icons/scania/notification.svg);
   --scania-icon-oil_level_inactive-svg: url(./assets/icons/scania/oil_level_inactive.svg);
   --scania-icon-oil_level-svg: url(./assets/icons/scania/oil_level.svg);
+  --scania-icon-paperclip-svg: url(./assets/icons/scania/paperclip.svg);
   --scania-icon-pause_inactive-svg: url(./assets/icons/scania/pause_inactive.svg);
   --scania-icon-pause-svg: url(./assets/icons/scania/pause.svg);
   --scania-icon-phone_inactive-svg: url(./assets/icons/scania/phone_inactive.svg);
@@ -1601,6 +1605,8 @@ h6 {
   --icon-merge-svg: var(--scania-icon-merge-svg);
   --icon-message_inactive-svg: var(--scania-icon-message_inactive-svg);
   --icon-message-svg: var(--scania-icon-message-svg);
+  --icon-microphone_inactive-svg: var(--scania-icon-microphone_inactive-svg);
+  --icon-microphone-svg: var(--scania-icon-microphone-svg);
   --icon-mileage_inactive-svg: var(--scania-icon-mileage_inactive-svg);
   --icon-mileage-svg: var(--scania-icon-mileage-svg);
   --icon-minimize_fullscreen-svg: var(--scania-icon-minimize_fullscreen-svg);
@@ -1608,9 +1614,11 @@ h6 {
   --icon-navigate_inactive-svg: var(--scania-icon-navigate_inactive-svg);
   --icon-navigate-svg: var(--scania-icon-navigate-svg);
   --icon-notification_inactive-svg: var(--scania-icon-notification_inactive-svg);
+  --icon-notification_snooze-svg: var(--scania-icon-notification_snooze-svg);
   --icon-notification-svg: var(--scania-icon-notification-svg);
   --icon-oil_level_inactive-svg: var(--scania-icon-oil_level_inactive-svg);
   --icon-oil_level-svg: var(--scania-icon-oil_level-svg);
+  --icon-paperclip-svg: var(--scania-icon-paperclip-svg);
   --icon-pause_inactive-svg: var(--scania-icon-pause_inactive-svg);
   --icon-pause-svg: var(--scania-icon-pause-svg);
   --icon-phone_inactive-svg: var(--scania-icon-phone_inactive-svg);

package/dist/tl-badge.css

@@ -1,3 +1,18 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+.tl-badge,
+tds-badge {
+  --component-badge-text: var(--color-brand-neutral-white);
+  --component-badge-background: var(--color-system-danger-subtle);
+}
+
+.traton .tl-badge,
+.traton tds-badge {
+  --component-badge-text: var(--color-brand-neutral-black);
+  --component-badge-background: var(--color-system-warning-subtle);
+}
+
 .tl-badge {
   --badge-background-color: var(--component-badge-background);
   --badge-color-text: var(--component-badge-text);

package/dist/tl-button.css

@@ -1,3 +1,22 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+.tl-button,
+tds-button,
+.tds-mode-light tds-button {
+  --component-button-primary-text: var(--color-brand-neutral-white);
+}
+
+.scania .tds-mode-dark tds-button,
+.scania .tds-mode-dark .tl-button {
+  --component-button-primary-text: var(--color-brand-neutral-white);
+}
+
+.tds-mode-dark tds-button,
+.tds-mode-dark .tl-button {
+  --component-button-primary-text: var(--color-brand-neutral-black);
+}
+
 .tl-button {
   --button-transparent: transparent;
   --button-white: var(--color-brand-neutral-white);

package/dist/tl-card.css

@@ -1,3 +1,13 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+.tl-card,
+tds-card {
+  --component-card-secondary: var(--color-background-layer-02);
+  --component-card-primary: var(--color-background-layer-01);
+  --component-card-padding-padding: var(--scania-unit-16);
+}
+
 .tl-card {
   --card-background: var(--tds-white);
   --card-background-primary: var(--component-card-primary);

package/dist/tl-dropdown.css

@@ -1,3 +1,18 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+.tl-dropdown,
+tds-dropdown {
+  --component-dropdown-list-item-secondary-hover: var(--color-background-layer-03);
+  --component-dropdown-list-item-secondary-focus: var(--color-background-layer-03);
+  --component-dropdown-list-item-focus: var(--color-background-layer-02);
+  --component-dropdown-list-item-hover: var(--color-background-layer-02);
+  --component-dropdown-secondary-hover: var(--color-background-layer-03);
+  --component-dropdown-secondary-focus: var(--color-background-layer-03);
+  --component-dropdown-focus: var(--color-background-surface-300);
+  --component-dropdown-hover: var(--color-background-surface-100);
+}
+
 .tl-dropdown-option {
   --dropdown-option-background: var(--color-background-layer-01);
   --dropdown-option-background-hover: var(--component-dropdown-hover);
@@ -6,6 +21,9 @@
   --dropdown-option-border: var(--color-foreground-border-discrete);
 }
 
+.tl-dropdown {
+  --dropdown-background: var(--color-background-layer-01);
+}
 .tl-dropdown--primary {
   --dropdown-background: var(--color-background-layer-01);
 }
@@ -13,7 +31,6 @@
   --dropdown-background: var(--color-background-layer-02);
 }
 .tl-dropdown {
-  --dropdown-background: var(--color-background-layer-01);
   --dropdown-text: var(--color-foreground-text-strong);
   --dropdown-helper-text: var(--color-foreground-text-defined);
   --dropdown-placeholder: var(--color-foreground-text-subtle);
@@ -166,7 +183,6 @@ body {
 
 .tl-dropdown__select {
   padding-top: 2px;
-  padding-left: calc(var(--tds-spacing-element-16) - 1px);
   cursor: pointer;
   display: block;
 }
@@ -286,6 +302,10 @@ body {
   transition: transform 0.2s;
 }
 
+.tl-dropdown--lg:not(.tl-dropdown--label-inside):has(.tl-dropdown__select:disabled):not(:has(.tl-dropdown__helper))::after {
+  background-color: var(--dropdown-disabled);
+}
+
 .tl-dropdown--md:not(.tl-dropdown--label-inside):has(.tl-dropdown__select):not(:has(.tl-dropdown__helper))::after {
   content: "";
   position: absolute;
@@ -303,6 +323,10 @@ body {
   transition: transform 0.2s;
 }
 
+.tl-dropdown--md:not(.tl-dropdown--label-inside):has(.tl-dropdown__select:disabled):not(:has(.tl-dropdown__helper))::after {
+  background-color: var(--dropdown-disabled);
+}
+
 .tl-dropdown--sm:not(.tl-dropdown--label-inside):has(.tl-dropdown__select):not(:has(.tl-dropdown__helper))::after {
   content: "";
   position: absolute;
@@ -320,6 +344,10 @@ body {
   transition: transform 0.2s;
 }
 
+.tl-dropdown--sm:not(.tl-dropdown--label-inside):has(.tl-dropdown__select:disabled):not(:has(.tl-dropdown__helper))::after {
+  background-color: var(--dropdown-disabled);
+}
+
 .tl-dropdown:not(.tl-dropdown--label-inside):has(.tl-dropdown__label):has(:is(.tl-dropdown__button, .tl-dropdown__input)) .tl-dropdown__button::after,
 .tl-dropdown:not(.tl-dropdown--label-inside):has(.tl-dropdown__label):has(:is(.tl-dropdown__button, .tl-dropdown__input)) .tl-dropdown__input-wrapper::after {
   top: calc(50% + 1px);
@@ -342,6 +370,10 @@ body {
   transition: transform 0.2s;
 }
 
+.tl-dropdown--label-inside:has(.tl-dropdown__select:disabled):not(:has(.tl-dropdown__helper))::after {
+  background-color: var(--dropdown-disabled);
+}
+
 .tl-dropdown:not(:has(.tl-dropdown__label)):has(.tl-dropdown__select):not(:has(.tl-dropdown__helper))::after {
   content: "";
   position: absolute;
@@ -359,6 +391,10 @@ body {
   transition: transform 0.2s;
 }
 
+.tl-dropdown:not(:has(.tl-dropdown__label)):has(.tl-dropdown__select:disabled):not(:has(.tl-dropdown__helper))::after {
+  background-color: var(--dropdown-disabled);
+}
+
 .tl-dropdown--label-inside:has(.tl-dropdown__select):has(.tl-dropdown__helper)::after {
   content: "";
   position: absolute;
@@ -376,6 +412,10 @@ body {
   transition: transform 0.2s;
 }
 
+.tl-dropdown--label-inside:has(.tl-dropdown__select:disabled):has(.tl-dropdown__helper)::after {
+  background-color: var(--dropdown-disabled);
+}
+
 .tl-dropdown:not(:has(.tl-dropdown__label)):has(.tl-dropdown__select):has(.tl-dropdown__helper)::after {
   content: "";
   position: absolute;
@@ -393,6 +433,10 @@ body {
   transition: transform 0.2s;
 }
 
+.tl-dropdown:not(:has(.tl-dropdown__label)):has(.tl-dropdown__select:disabled):has(.tl-dropdown__helper)::after {
+  background-color: var(--dropdown-disabled);
+}
+
 .tl-dropdown:not(.tl-dropdown--label-inside):has(.tl-dropdown__label):has(.tl-dropdown__select):has(.tl-dropdown__helper)::after {
   content: "";
   position: absolute;
@@ -410,6 +454,10 @@ body {
   transition: transform 0.2s;
 }
 
+.tl-dropdown:not(.tl-dropdown--label-inside):has(.tl-dropdown__label):has(.tl-dropdown__select:disabled):has(.tl-dropdown__helper)::after {
+  background-color: var(--dropdown-disabled);
+}
+
 .tl-dropdown--md:not(.tl-dropdown--label-inside):has(.tl-dropdown__label):has(.tl-dropdown__select):has(.tl-dropdown__helper)::after {
   top: calc(50% + 1px);
 }
@@ -763,6 +811,10 @@ body {
   transition: box-shadow 0.2s;
 }
 
+.tl-dropdown:has(.tl-dropdown__select option[value=""]:checked) .tl-dropdown__select {
+  padding-top: 3px;
+}
+
 .tl-dropdown:has(.tl-dropdown__select option[value=""]:checked) .tl-dropdown__select:disabled {
   color: var(--dropdown-disabled);
   cursor: not-allowed;

package/dist/tl-folder-tabs.css

@@ -24,6 +24,70 @@
   --folder-tab-surface-selected: var(--color-background-layer-02);
 }
 
+/* tl-folder-tabs.scss (overlay buttons, no JS) */
+/* Typography Usage mixins */
+.tl-folder-tabs__tab {
+  all: unset;
+  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);
+  box-sizing: border-box;
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  min-inline-size: 142px;
+  inline-size: auto;
+  flex: 0 0 auto;
+  white-space: nowrap;
+  padding: 16px;
+  text-align: left;
+  cursor: pointer;
+  border-left: 1px solid transparent;
+  border-top: 2px solid var(--folder-tab-surface);
+  background-color: var(--folder-tab-surface);
+  color: var(--folder-tab-text);
+}
+.tl-folder-tabs__tab + .tl-folder-tabs__tab {
+  border-left-color: var(--folder-tab-divider);
+}
+.tl-folder-tabs__tab:focus-visible {
+  outline: 2px solid currentcolor;
+  outline-offset: -4px;
+  box-shadow: none;
+}
+.tl-folder-tabs__tab:hover:not(.tl-folder-tabs__tab--disabled):not(.tl-folder-tabs__tab--selected) {
+  background-color: var(--folder-tab-surface-hover);
+  border-top-color: var(--folder-tab-surface-hover);
+  color: var(--folder-tab-text);
+}
+.tl-folder-tabs__tab--selected {
+  background-color: var(--folder-tab-surface-selected);
+  border-top-color: var(--folder-tab-border-selected);
+  color: var(--folder-tab-text);
+}
+.tl-folder-tabs__tab--selected::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: -1px;
+  bottom: 0;
+  width: 1px;
+  background-color: var(--folder-tab-surface-selected);
+  z-index: 1;
+}
+.tl-folder-tabs__tab--disabled {
+  color: var(--folder-tab-text-disabled);
+  cursor: not-allowed;
+  user-select: none;
+}
+.tl-folder-tabs__tab--disabled:focus-visible {
+  outline: none;
+  box-shadow: none;
+}
+
 .tl-folder-tabs {
   box-sizing: border-box;
 }

package/dist/tl-footer.css

@@ -1,4 +1,68 @@
 /* Typography Usage mixins */
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+.tl-footer,
+tds-footer {
+  --component-footer-text-color-copyright: var(--color-foreground-text-soft);
+  --component-footer-text-color-link-text: var(--color-brand-primary-50);
+  --component-footer-primary: var(--scania-color-blue-900);
+  --component-footer-border: var(--scania-color-blue-800);
+}
+
+:root .tl-footer,
+:root tds-footer,
+.scania .tl-footer,
+.scania tds-footer {
+  --component-footer-primary: var(--scania-color-blue-900);
+  --component-footer-border: var(--scania-color-blue-700);
+  --component-footer-text-color-copyright: var(--color-foreground-text-inverse-soft);
+  --component-footer-text-color-link-text: var(--color-foreground-text-brand);
+  --component-footer-logotype-cdn: var(--tds-background-image-scania-wordmark-white-svg);
+  --component-footer-logotype-local: var(--tds-background-image-scania-wordmark-white-svg-local);
+}
+:root .tds-mode-light tds-footer,
+:root .tds-mode-light .tl-footer,
+.scania .tds-mode-light tds-footer,
+.scania .tds-mode-light .tl-footer {
+  --component-footer-text-color-copyright: var(--color-foreground-text-inverse-soft);
+  --component-footer-text-color-link-text: var(--color-foreground-text-brand);
+  --component-footer-logotype-cdn: var(--tds-background-image-scania-wordmark-white-svg);
+  --component-footer-logotype-local: var(--tds-background-image-scania-wordmark-white-svg-local);
+}
+:root .tds-mode-dark tds-footer,
+:root .tds-mode-dark .tl-footer,
+.scania .tds-mode-dark tds-footer,
+.scania .tds-mode-dark .tl-footer {
+  --component-footer-text-color-copyright: var(--color-foreground-text-soft);
+  --component-footer-text-color-link-text: var(--color-brand-primary-50);
+  --component-footer-logotype-cdn: var(--tds-background-image-scania-wordmark-white-svg);
+  --component-footer-logotype-local: var(--tds-background-image-scania-wordmark-white-svg-local);
+}
+
+.traton tds-footer,
+.traton .tl-footer {
+  --component-footer-primary: var(--traton-color-grey-50);
+  --component-footer-border: var(--traton-color-transparent-invisible-light);
+  --component-footer-text-color-copyright: var(--traton-color-transparent-600);
+  --component-footer-text-color-link-text: var(--color-foreground-text-strong);
+  --component-footer-logotype-cdn: var(--traton-logotype-black-svg);
+  --component-footer-logotype-local: var(--traton-logotype-black-svg-local);
+}
+.traton .tds-mode-light tds-footer,
+.traton .tds-mode-light .tl-footer {
+  --component-footer-text-color-copyright: var(--traton-color-transparent-600);
+  --component-footer-logotype-cdn: var(--traton-logotype-black-svg);
+  --component-footer-logotype-local: var(--traton-logotype-black-svg-local);
+}
+.traton .tds-mode-dark tds-footer,
+.traton .tds-mode-dark .tl-footer {
+  --component-footer-text-color-copyright: var(--traton-color-transparent-inverse-600);
+  --component-footer-primary: var(--traton-color-blue-1000);
+  --component-footer-logotype-cdn: var(--traton-logotype-white-svg);
+  --component-footer-logotype-local: var(--traton-logotype-white-svg-local);
+}
+
 .tl-footer {
   --footer-top-background-primary: var(--color-background-layer-01);
   --footer-top-background-secondary: var(--color-background-base);