@scania/tegel-lite 0.1.0-beta.globals-test → 0.1.0-var-beta.0

package/README.dev.md

@@ -179,7 +179,7 @@ Set the brand on `<html>` and mode on `<body>`:
 export default function RootLayout({ children }) {
   return (
     <html lang="en" className="scania"> {/* or "traton" */}
-      <body className={isDarkMode ? "tds-mode-dark" : ""}>
+      <body className={isDarkMode ? "tl-mode-dark" : ""}>
         {children}
       </body>
     </html>
@@ -189,7 +189,7 @@ export default function RootLayout({ children }) {
 
 **Important:** 
 - Brand class (`.scania` or `.traton`) goes on the `<html>` element
-- Mode class (`.tds-mode-dark`) goes on the `<body>` element for dark mode
+- Mode class (`.tl-mode-dark`) goes on the `<body>` element for dark mode
 - Light mode is the default and doesn't require a class
 
 Checkout the Tegel Storybook documentation for more examples and usage.

package/dist/components.css

@@ -31,26 +31,26 @@
 }
 
 /* Mode variants */
-.tds-mode-light .tl-accordion--primary,
-.tds-mode-light .tl-accordion .tl-accordion--primary {
+.tl-mode-light .tl-accordion--primary,
+.tl-mode-light .tl-accordion .tl-accordion--primary {
   background-color: var(--accordion-background-hover-secondary);
   --accordion-background-hover: var(--accordion-background-hover-primary);
 }
 
-.tds-mode-light .tl-accordion--secondary,
-.tds-mode-light .tl-accordion .tl-accordion--secondary {
+.tl-mode-light .tl-accordion--secondary,
+.tl-mode-light .tl-accordion .tl-accordion--secondary {
   background-color: var(--accordion-background-hover-primary);
   --accordion-background-hover: var(--accordion-background-hover-secondary);
 }
 
-.tds-mode-dark .tl-accordion--primary,
-.tds-mode-dark .tl-accordion .tl-accordion--primary {
+.tl-mode-dark .tl-accordion--primary,
+.tl-mode-dark .tl-accordion .tl-accordion--primary {
   background-color: var(--accordion-background-hover-secondary);
   --accordion-background-hover: var(--accordion-background-hover-primary);
 }
 
-.tds-mode-dark .tl-accordion--secondary,
-.tds-mode-dark .tl-accordion .tl-accordion--secondary {
+.tl-mode-dark .tl-accordion--secondary,
+.tl-mode-dark .tl-accordion .tl-accordion--secondary {
   background-color: var(--accordion-background-hover-primary);
   --accordion-background-hover: var(--accordion-background-hover-secondary);
 }
@@ -270,21 +270,6 @@
   position: relative;
 }
 
-/**
- * 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);
@@ -330,8 +315,8 @@ tds-badge {
 }
 
 :root,
-.tds-mode-light,
-.tds-mode-dark {
+.tl-mode-light,
+.tl-mode-dark {
   --banner-text: var(--color-foreground-text-strong);
   --banner-close-icon: var(--color-foreground-icon-strong);
   --banner-background-default: var(--color-background-layer-01);
@@ -921,16 +906,6 @@ tds-button,
   width: 100%;
 }
 
-/**
- * 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);
@@ -993,26 +968,26 @@ tds-card {
 }
 
 /* Dark mode */
-.tds-mode-dark {
+.tl-mode-dark {
   --card-background-primary: var(--tds-grey-900);
   --card-background-secondary: var(--tds-grey-850);
 }
-.tds-mode-dark .tl-card {
+.tl-mode-dark .tl-card {
   --card-background: var(--card-background-primary);
 }
-.tds-mode-dark .tl-card--primary {
+.tl-mode-dark .tl-card--primary {
   --card-box: var(--card-box-primary);
   --card-background: var(--card-background-primary);
 }
-.tds-mode-dark .tl-card--secondary {
+.tl-mode-dark .tl-card--secondary {
   --card-box: var(--card-box-primary);
   --card-background: var(--card-background-secondary);
 }
 
-.traton .tds-mode-dark .tl-card--primary {
+.traton .tl-mode-dark .tl-card--primary {
   --card-background: transparent;
 }
-.traton .tds-mode-dark .tl-card--secondary {
+.traton .tl-mode-dark .tl-card--secondary {
   --card-background: transparent;
 }
 
@@ -1181,7 +1156,7 @@ tds-card {
   --checkbox-background-img-indeterminate-disabled: url("data:image/svg+xml;utf8,<svg width='8' height='2' viewBox='0 0 8 2' fill='none' xmlns='http://www.w3.org/2000/svg'><rect y='0.5' width='8' height='1' rx='0.5' fill='%23b0b7c4'/></svg>");
 }
 
-.tds-mode-dark .tl-checkbox {
+.tl-mode-dark .tl-checkbox {
   --checkbox-background-img: url("data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%230D0F13' stroke-linecap='round' stroke-linejoin='round'/></svg>");
   --checkbox-background-img-indeterminate: url("data:image/svg+xml;utf8,<svg width='8' height='2' viewBox='0 0 8 2' fill='none' xmlns='http://www.w3.org/2000/svg'><rect y='0.5' width='8' height='1' rx='0.5' fill='%230D0F13'/></svg>");
   --checkbox-background-img-disabled: url("data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%2356657A' stroke-linecap='round' stroke-linejoin='round'/></svg>");
@@ -1388,15 +1363,15 @@ tds-card {
 .scania .tl-chip {
   --component-chip-border-radius: 16px;
 }
-:root .tds-mode-light .tl-chip,
-.scania .tds-mode-light .tl-chip {
+:root .tl-mode-light .tl-chip,
+.scania .tl-mode-light .tl-chip {
   --component-chip-color-hover: var(--color-background-surface-300);
   --component-chip-foreground-foreground-disabled-selected: var(
     --color-foreground-text-inverse-subtle
   );
 }
-:root .tds-mode-dark .tl-chip,
-.scania .tds-mode-dark .tl-chip {
+:root .tl-mode-dark .tl-chip,
+.scania .tl-mode-dark .tl-chip {
   --component-chip-color-default: var(--color-background-surface-400);
   --component-chip-color-focused-on-selected: var(--color-system-info-discrete);
   --component-chip-color-hover-on-selected: var(--color-system-info-default);
@@ -1407,7 +1382,7 @@ tds-card {
 .traton .tl-chip {
   --component-chip-border-radius: 2px;
 }
-.traton .tds-mode-light .tl-chip {
+.traton .tl-mode-light .tl-chip {
   --component-chip-color-default: var(--color-background-surface-200);
   --component-chip-color-selected: var(--color-background-surface-300);
   --component-chip-color-hover-on-selected: var(--color-background-surface-400);
@@ -1415,7 +1390,7 @@ tds-card {
   --component-chip-color-focused-on-selected: var(--component-chip-color-focused);
   --component-chip-foreground-foreground-disabled-selected: var(--color-background-surface-200);
 }
-.traton .tds-mode-dark .tl-chip {
+.traton .tl-mode-dark .tl-chip {
   --component-chip-color-default: var(--color-background-surface-300);
   --component-chip-color-disabled: var(--color-background-surface-200);
   --component-chip-foreground-inverse: var(--color-foreground-text-inverse-strong);
@@ -1948,21 +1923,6 @@ tds-card {
   width: 1px;
 }
 
-/**
- * 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);
@@ -1971,9 +1931,6 @@ tds-dropdown {
   --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);
 }
@@ -1981,6 +1938,7 @@ tds-dropdown {
   --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);
@@ -2571,7 +2529,7 @@ body {
     scrollbar-width: var(--tl-scrollbar-width-standard);
   }
 }
-.tds-mode-dark .tl-dropdown__list {
+.tl-mode-dark .tl-dropdown__list {
   box-shadow: none;
 }
 .tl-dropdown--dropup .tl-dropdown__list {
@@ -2822,70 +2780,6 @@ body {
   border-color: transparent;
 }
 
-/**
- * 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);
@@ -3311,7 +3205,7 @@ tds-footer {
 .scania {
   /* Light mode - explicit light mode class */
 }
-.scania .tds-mode-light .tl-header {
+.scania .tl-mode-light .tl-header {
   --header-background: var(--color-brand-primary-800);
   --header-nav-item: var(--color-foreground-icon-inverse-strong);
   --header-item-hover: var(--color-brand-primary-700);
@@ -3322,7 +3216,7 @@ tds-footer {
 .scania {
   /* Dark mode - override with dark colors */
 }
-.scania .tds-mode-dark .tl-header {
+.scania .tl-mode-dark .tl-header {
   --header-background: var(--color-brand-primary-900);
   --header-nav-item: var(--color-foreground-icon-strong);
   --header-item-hover: var(--color-brand-primary-800);
@@ -3347,7 +3241,7 @@ tds-footer {
   --header-basic-element-background-selected: var(--color-brand-primary-700);
 }
 
-.traton .tds-mode-dark .tl-header {
+.traton .tl-mode-dark .tl-header {
   /* Brand logo - White for dark mode */
   --header-logotype-local: var(--traton-logotype-white-svg-local);
   --header-logotype-cdn: var(--traton-logotype-white-svg);
@@ -3359,7 +3253,7 @@ tds-footer {
   --header-basic-element-background-pressed: var(--color-background-base);
   --header-basic-element-background-selected: var(--color-background-surface-100);
 }
-.traton .tds-mode-light .tl-header {
+.traton .tl-mode-light .tl-header {
   /* Brand logo - Black for light mode */
   --header-logotype-local: var(--traton-logotype-black-svg-local);
   --header-logotype-cdn: var(--traton-logotype-black-svg);
@@ -5426,41 +5320,6 @@ tds-footer {
   display: none;
 }
 
-/**
- * Do not edit directly, this file was auto-generated.
- */
-:root,
-.tds-mode-light,
-.scania .tds-mode-light {
-  --component-shadow-hover: var(--scania-color-transparent-shadow-250);
-  --component-shadow-default: var(--scania-color-transparent-shadow-150);
-  --component-shadow-pressed: var(--scania-color-transparent-shadow-250);
-  --component-shadow-dragged: var(--scania-color-transparent-shadow-200);
-  --component-shadow-base-modifier: var(--scania-color-transparent-shadow-100);
-  --component-shadow-focus: var(--scania-color-transparent-shadow-350);
-}
-
-.tds-mode-dark,
-.scania .tds-mode-dark {
-  --component-shadow-hover: var(--scania-color-transparent-invisible-dark);
-  --component-shadow-default: var(--scania-color-transparent-invisible-dark);
-  --component-shadow-pressed: var(--scania-color-transparent-invisible-dark);
-  --component-shadow-dragged: var(--scania-color-transparent-invisible-dark);
-  --component-shadow-base-modifier: var(--scania-color-transparent-invisible-dark);
-  --component-shadow-focus: var(--scania-color-transparent-invisible-dark);
-}
-
-.traton,
-.traton .tds-mode-light,
-.traton .tds-mode-dark {
-  --component-shadow-hover: var(--traton-color-transparent-invisible-dark);
-  --component-shadow-default: var(--traton-color-transparent-invisible-dark);
-  --component-shadow-pressed: var(--traton-color-transparent-invisible-dark);
-  --component-shadow-dragged: var(--traton-color-transparent-invisible-dark);
-  --component-shadow-base-modifier: var(--traton-color-transparent-invisible-dark);
-  --component-shadow-focus: var(--traton-color-transparent-invisible-dark);
-}
-
 /* Component variables */
 .tl-modal,
 :root {
@@ -6081,77 +5940,6 @@ tds-footer {
     transform: scale(1);
   }
 }
-/**
- * Do not edit directly, this file was auto-generated.
- */
-:root .tl-side-menu,
-:root tds-side-menu,
-.scania .tl-side-menu,
-.scania tds-side-menu {
-  --component-side-menu-color-divider: var(--color-foreground-border-discrete);
-  --component-side-menu-radius-corner: var(--scania-unit-0);
-  --component-side-menu-size-close-icon-size: var(--scania-unit-20);
-  --component-side-menu-size-icon: var(--scania-unit-24);
-  --component-side-menu-space-collapsed-item-left-right-inner-icon-padding: 22px;
-  --component-side-menu-space-sub-menu-item-chevron-right-padding: var(--scania-unit-16);
-  --component-side-menu-space-sub-menu-item-left: 22px;
-  --component-side-menu-space-sub-menu-item-profile-gap: var(--scania-unit-16);
-  --component-side-menu-space-sub-menu-item-profile-left: var(--scania-unit-16);
-  --component-side-menu-space-sub-menu-item-profile-top-bottom: 18px;
-  --component-side-menu-space-sub-menu-item-selected-marker-height: 68px;
-  --component-side-menu-space-sub-menu-item-top-and-bottom: 22px;
-  --component-side-menu-space-sub-page-left-no-icon: var(--scania-unit-24);
-  --component-side-menu-space-sub-page-left-profile: var(--scania-unit-64);
-  --component-side-menu-space-sub-page-left-with-icon: 58px;
-  --component-side-menu-space-sub-page-selected-marker-height: var(--scania-unit-48);
-  --component-side-menu-space-sub-page-selected-marker-width: var(--scania-unit-4);
-  --component-side-menu-space-sub-page-top-bottom: var(--scania-unit-16);
-  --component-side-menu-space-sub-page-top-group: var(--scania-unit-0);
-  --component-side-menu-space-top-level-bottom-collapsible: var(--scania-unit-0);
-  --component-side-menu-space-top-level-left: var(--scania-unit-0);
-  --component-side-menu-space-top-level-top: var(--scania-unit-0);
-  --component-side-menu-space-top-level-vertical-gap-padding: var(--scania-unit-0);
-  --component-side-menu-text-items-font-family: var(--scania-font-family-semi-condensed);
-  --component-side-menu-text-items-font-weight: var(--scania-font-weight-bold);
-  --component-side-menu-text-items-font-size: 14px;
-  --component-side-menu-text-items-line-height: 16px;
-  --component-side-menu-text-items-letter-spacing: -0.14px;
-  --component-side-menu-text-items-text-transform: none;
-}
-
-.traton .tl-side-menu,
-.traton tds-side-menu {
-  --component-side-menu-color-divider: var(--traton-color-transparent-invisible-light);
-  --component-side-menu-radius-corner: var(--traton-unit-8);
-  --component-side-menu-size-close-icon-size: var(--traton-unit-20);
-  --component-side-menu-size-icon: var(--traton-unit-16);
-  --component-side-menu-space-collapsed-item-left-right-inner-icon-padding: var(--traton-unit-12);
-  --component-side-menu-space-sub-menu-item-chevron-right-padding: var(--traton-unit-12);
-  --component-side-menu-space-sub-menu-item-left: var(--traton-unit-12);
-  --component-side-menu-space-sub-menu-item-profile-gap: var(--traton-unit-8);
-  --component-side-menu-space-sub-menu-item-profile-left: var(--traton-unit-8);
-  --component-side-menu-space-sub-menu-item-profile-top-bottom: var(--traton-unit-4);
-  --component-side-menu-space-sub-menu-item-selected-marker-height: var(--traton-unit-40);
-  --component-side-menu-space-sub-menu-item-top-and-bottom: var(--traton-unit-8);
-  --component-side-menu-space-sub-page-left-no-icon: 14px;
-  --component-side-menu-space-sub-page-left-profile: var(--traton-unit-48);
-  --component-side-menu-space-sub-page-left-with-icon: var(--traton-unit-40);
-  --component-side-menu-space-sub-page-selected-marker-height: 32px;
-  --component-side-menu-space-sub-page-selected-marker-width: var(--traton-unit-8);
-  --component-side-menu-space-sub-page-top-bottom: var(--traton-unit-8);
-  --component-side-menu-space-sub-page-top-group: var(--traton-unit-4);
-  --component-side-menu-space-top-level-bottom-collapsible: var(--traton-unit-16);
-  --component-side-menu-space-top-level-left: var(--traton-unit-16);
-  --component-side-menu-space-top-level-top: var(--traton-unit-14);
-  --component-side-menu-space-top-level-vertical-gap-padding: var(--traton-unit-16);
-  --component-side-menu-text-items-font-family: var(--traton-font-family-default);
-  --component-side-menu-text-items-font-weight: var(--traton-font-weight-medium);
-  --component-side-menu-text-items-font-size: 14px;
-  --component-side-menu-text-items-line-height: 18px;
-  --component-side-menu-text-items-letter-spacing: 0;
-  --component-side-menu-text-items-text-transform: none;
-}
-
 .tl-side-menu {
   --side-menu-background-cover: var(--color-background-base);
   --side-menu-item-state-hover: var(--color-background-layer-01);
@@ -7034,14 +6822,6 @@ tds-footer {
   display: none;
 }
 
-/**
- * Do not edit directly, this file was auto-generated.
- */
-.tl-spinner,
-tds-spinner {
-  --component-spinner-color: var(--color-system-info-default);
-}
-
 /* Component variables  */
 .tl-spinner {
   --tl-spinner-background: var(--component-spinner-color);
@@ -7120,14 +6900,6 @@ tds-spinner {
     stroke-dashoffset: var(--tl-spinner-stroke-dash);
   }
 }
-/**
- * Do not edit directly, this file was auto-generated.
- */
-.tl-stepper,
-tds-stepper {
-  --component-stepper-success: var(--color-system-success-default);
-}
-
 .tl-stepper {
   --stepper-current-number-with-border: var(--color-foreground-border-strong);
   --stepper-icon-step-border-warning: var(--color-system-danger-default);
@@ -7389,23 +7161,6 @@ tds-stepper {
   gap: 36px;
 }
 
-/**
- * Do not edit directly, this file was auto-generated.
- */
-.tl-table,
-tds-table {
-  --component-table-secondary-cell: var(--color-background-layer-02);
-  --component-table-pagination-dropdown: var(--color-background-layer-01);
-  --component-table-pagination-base: var(--color-background-surface-200);
-  --component-table-cell-hover: var(--color-background-surface-100);
-  --component-table-cell: var(--color-background-layer-01);
-}
-
-.traton .tl-table,
-.traton tds-table {
-  --component-table-pagination-base: var(--color-background-surface-300);
-}
-
 .tl-table {
   /* Table-text */
   --table-text: var(--color-foreground-text-strong);
@@ -7462,7 +7217,7 @@ tds-table {
   --table-zebra-mode: var(--component-table-cell);
 }
 
-.tds-mode-dark .tl-table.tl-table--secondary {
+.tl-mode-dark .tl-table.tl-table--secondary {
   --table-body-cell-hover: var(--color-background-surface-300);
   --table-body-row-hover: var(--color-background-surface-300);
 }