@scania/tegel-lite 0.1.0-variables-beta.1 → 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (62) hide show
  1. package/README.dev.md +1 -5
  2. package/README.md +12 -12
  3. package/dist/assets/fonts/traton/TratonTypeDisplay-Bold.woff +0 -0
  4. package/dist/assets/fonts/traton/TratonTypeDisplay-Bold.woff2 +0 -0
  5. package/dist/assets/fonts/traton/TratonTypeDisplay-Medium.woff +0 -0
  6. package/dist/assets/fonts/traton/TratonTypeDisplay-Medium.woff2 +0 -0
  7. package/dist/assets/fonts/traton/TratonTypeText-Bold.woff +0 -0
  8. package/dist/assets/fonts/traton/TratonTypeText-Bold.woff2 +0 -0
  9. package/dist/assets/fonts/traton/TratonTypeText-BoldItalic.woff +0 -0
  10. package/dist/assets/fonts/traton/TratonTypeText-BoldItalic.woff2 +0 -0
  11. package/dist/assets/fonts/traton/TratonTypeText-Italic.woff +0 -0
  12. package/dist/assets/fonts/traton/TratonTypeText-Italic.woff2 +0 -0
  13. package/dist/assets/fonts/traton/TratonTypeText-Medium.woff +0 -0
  14. package/dist/assets/fonts/traton/TratonTypeText-Medium.woff2 +0 -0
  15. package/dist/assets/fonts/traton/TratonTypeText-MediumItalic.woff +0 -0
  16. package/dist/assets/fonts/traton/TratonTypeText-MediumItalic.woff2 +0 -0
  17. package/dist/assets/fonts/traton/TratonTypeText-Regular.woff +0 -0
  18. package/dist/assets/fonts/traton/TratonTypeText-Regular.woff2 +0 -0
  19. package/dist/assets/fonts/traton/TratonTypeText-SemiBold.woff +0 -0
  20. package/dist/assets/fonts/traton/TratonTypeText-SemiBold.woff2 +0 -0
  21. package/dist/assets/fonts/traton/TratonTypeText-SemiBoldItalic.woff2 +0 -0
  22. package/dist/assets/icons/traton/placeholder.svg +3 -0
  23. package/dist/components.css +3552 -7157
  24. package/dist/global.css +134 -11
  25. package/dist/scania-variables.css +357 -136
  26. package/dist/tl-accordion.css +88 -35
  27. package/dist/tl-banner.css +88 -13
  28. package/dist/tl-block.css +62 -7
  29. package/dist/tl-breadcrumbs.css +55 -6
  30. package/dist/tl-button.css +192 -160
  31. package/dist/tl-card.css +54 -66
  32. package/dist/tl-checkbox.css +195 -115
  33. package/dist/tl-divider.css +61 -3
  34. package/dist/tl-footer.css +98 -38
  35. package/dist/tl-icon.css +4 -0
  36. package/dist/tl-link.css +114 -16
  37. package/dist/tl-message.css +128 -14
  38. package/dist/tl-modal.css +123 -20
  39. package/dist/tl-radio-button.css +158 -96
  40. package/dist/tl-text-field.css +256 -76
  41. package/dist/tl-textarea.css +274 -76
  42. package/dist/tl-toast.css +119 -10
  43. package/dist/tl-toggle.css +149 -44
  44. package/dist/tl-tooltip.css +17 -15
  45. package/dist/traton-variables.css +365 -23
  46. package/package.json +5 -26
  47. package/dist/tl-badge.css +0 -45
  48. package/dist/tl-checkbox-vars.css +0 -38
  49. package/dist/tl-chip.css +0 -99
  50. package/dist/tl-dropdown.css +0 -913
  51. package/dist/tl-folder-tabs.css +0 -139
  52. package/dist/tl-header.css +0 -935
  53. package/dist/tl-inline-tabs.css +0 -173
  54. package/dist/tl-navigation-tabs.css +0 -171
  55. package/dist/tl-popover-canvas.css +0 -70
  56. package/dist/tl-popover-menu.css +0 -123
  57. package/dist/tl-side-menu.css +0 -695
  58. package/dist/tl-slider.css +0 -2242
  59. package/dist/tl-spinner.css +0 -78
  60. package/dist/tl-step.css +0 -239
  61. package/dist/tl-stepper.css +0 -83
  62. package/dist/tl-table.css +0 -849
package/dist/tl-accordion.css CHANGED
@@ -1,45 +1,96 @@
1
- .tl-accordion {
2
- /* Border & Background */
3
- --accordion-border: var(--color-foreground-border-discrete);
4
- --accordion-background: transparent;
5
- /* Hover backgrounds */
6
- --accordion-background-hover-primary: var(--color-background-layer-01);
7
- --accordion-background-hover-secondary: var(--color-background-layer-02);
8
- --accordion-background-hover: var(--accordion-background-hover-primary);
9
- /* Focus & Active states */
10
- --accordion-background-focus: var(--color-background-layer-01);
11
- --accordion-background-active: var(--color-background-layer-02);
12
- /* Text & Icon colours */
13
- --accordion-text: var(--color-foreground-text-strong);
14
- --accordion-icon: var(--color-foreground-icon-strong);
15
- /* Borders & Disabled */
16
- --accordion-border-focus: var(--color-foreground-border-strong);
17
- --accordion-text-disabled: var(--color-foreground-text-disabled);
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+ :root,
5
+ .tds-mode-light,
6
+ .scania .tds-mode-light,
7
+ .scania.tds-mode-light,
8
+ .scania .tl-mode-light,
9
+ .scania.tl-mode-light {
10
+ --component-accordion-background-primary-default: var(--color-background-none);
11
+ --component-accordion-background-primary-hover: var(--color-background-layer-01);
12
+ --component-accordion-background-primary-active: var(--scania-color-grey-100);
13
+ --component-accordion-background-secondary-default: var(--color-background-none);
14
+ --component-accordion-background-secondary-hover: var(--scania-color-grey-100);
15
+ --component-accordion-background-secondary-active: var(--scania-color-grey-150);
16
+ --component-accordion-text-default: var(--color-text-strong);
17
+ --component-accordion-icon-default: var(--color-icon-strong);
18
+ --component-accordion-opacity-disabled: var(--scania-opacity-25);
18
19
  }
19
20
 
20
- /* Mode variants */
21
- .tl-mode-light .tl-accordion--primary,
22
- .tl-mode-light .tl-accordion .tl-accordion--primary {
23
- background-color: var(--accordion-background-hover-secondary);
24
- --accordion-background-hover: var(--accordion-background-hover-primary);
21
+ .traton .tds-mode-light,
22
+ .traton.tds-mode-light,
23
+ .traton .tl-mode-light,
24
+ .traton.tl-mode-light {
25
+ --component-accordion-background-primary-default: var(--color-background-none);
26
+ --component-accordion-background-primary-hover: var(--color-background-layer-01);
27
+ --component-accordion-background-primary-active: var(--traton-color-grey-150);
28
+ --component-accordion-background-secondary-default: var(--color-background-none);
29
+ --component-accordion-background-secondary-hover: var(--traton-color-grey-150);
30
+ --component-accordion-background-secondary-active: var(--traton-color-grey-200);
31
+ --component-accordion-text-default: var(--color-text-strong);
32
+ --component-accordion-icon-default: var(--color-icon-strong);
33
+ --component-accordion-opacity-disabled: var(--traton-opacity-25);
25
34
  }
26
35
 
27
- .tl-mode-light .tl-accordion--secondary,
28
- .tl-mode-light .tl-accordion .tl-accordion--secondary {
29
- background-color: var(--accordion-background-hover-primary);
30
- --accordion-background-hover: var(--accordion-background-hover-secondary);
36
+ .tds-mode-dark,
37
+ .scania .tds-mode-dark,
38
+ .scania.tds-mode-dark,
39
+ .scania .tl-mode-dark,
40
+ .scania.tl-mode-dark {
41
+ --component-accordion-background-primary-default: var(--color-background-none);
42
+ --component-accordion-background-primary-hover: var(--color-background-layer-01);
43
+ --component-accordion-background-primary-active: var(--scania-color-grey-850);
44
+ --component-accordion-background-secondary-default: var(--color-background-none);
45
+ --component-accordion-background-secondary-hover: var(--scania-color-grey-800);
46
+ --component-accordion-background-secondary-active: var(--scania-color-grey-750);
47
+ --component-accordion-text-default: var(--color-text-strong);
48
+ --component-accordion-icon-default: var(--color-icon-strong);
49
+ --component-accordion-opacity-disabled: var(--scania-opacity-25);
50
+ }
51
+
52
+ .traton .tds-mode-dark,
53
+ .traton.tds-mode-dark,
54
+ .traton .tl-mode-dark,
55
+ .traton.tl-mode-dark {
56
+ --component-accordion-background-primary-default: var(--color-background-none);
57
+ --component-accordion-background-primary-hover: var(--color-background-layer-01);
58
+ --component-accordion-background-primary-active: var(--traton-color-blue-900);
59
+ --component-accordion-background-secondary-default: var(--color-background-none);
60
+ --component-accordion-background-secondary-hover: var(--traton-color-blue-900);
61
+ --component-accordion-background-secondary-active: var(--traton-color-blue-850);
62
+ --component-accordion-text-default: var(--color-text-strong);
63
+ --component-accordion-icon-default: var(--color-icon-strong);
64
+ --component-accordion-opacity-disabled: var(--traton-opacity-25);
65
+ }
66
+
67
+ /* Component variables */
68
+ .tl-accordion {
69
+ --accordion-background: var(--component-accordion-background-primary-default);
70
+ --accordion-background-hover-primary: var(--component-accordion-background-primary-hover);
71
+ --accordion-background-hover-secondary: var(--component-accordion-background-secondary-hover);
72
+ --accordion-background-hover: var(--accordion-background-hover-primary);
73
+ --accordion-background-focus: var(--color-background-none);
74
+ --accordion-background-active: var(--component-accordion-background-primary-active);
75
+ --accordion-text: var(--component-accordion-text-default);
76
+ --accordion-icon: var(--component-accordion-icon-default);
77
+ --accordion-text-disabled: var(--color-text-disabled);
78
+ --accordion-border: var(--color-border-subtle);
79
+ --accordion-opacity-disabled: calc(var(--component-accordion-opacity-disabled) / 100);
31
80
  }
32
81
 
33
- .tl-mode-dark .tl-accordion--primary,
34
- .tl-mode-dark .tl-accordion .tl-accordion--primary {
35
- background-color: var(--accordion-background-hover-secondary);
82
+ .tl-accordion--primary,
83
+ .tl-accordion .tl-accordion--primary {
84
+ --accordion-background: var(--component-accordion-background-primary-default);
36
85
  --accordion-background-hover: var(--accordion-background-hover-primary);
86
+ --accordion-background-active: var(--component-accordion-background-primary-active);
37
87
  }
38
88
 
39
- .tl-mode-dark .tl-accordion--secondary,
40
- .tl-mode-dark .tl-accordion .tl-accordion--secondary {
41
- background-color: var(--accordion-background-hover-primary);
89
+ .tl-accordion--secondary,
90
+ .tl-accordion .tl-accordion--secondary {
91
+ --accordion-background: var(--component-accordion-background-secondary-default);
42
92
  --accordion-background-hover: var(--accordion-background-hover-secondary);
93
+ --accordion-background-active: var(--component-accordion-background-secondary-active);
43
94
  }
44
95
 
45
96
  /* Typography Usage mixins */
@@ -63,8 +114,8 @@
63
114
  margin-bottom: -1px;
64
115
  border-bottom: 1px solid var(--accordion-border);
65
116
  }
66
- .tl-accordion__item:hover:not(.tl-accordion__item--expanded):not(.tl-accordion__item--disabled) .tl-accordion__header-icon-start,
67
- .tl-accordion__item:hover:not(.tl-accordion__item--expanded):not(.tl-accordion__item--disabled) .tl-accordion__header-icon-end {
117
+ .tl-accordion__item:hover:not(.tl-accordion__item--expanded, .tl-accordion__item--disabled) .tl-accordion__header-icon-start,
118
+ .tl-accordion__item:hover:not(.tl-accordion__item--expanded, .tl-accordion__item--disabled) .tl-accordion__header-icon-end {
68
119
  background-color: var(--accordion-background-hover);
69
120
  }
70
121
  .tl-accordion__item:active:not(.tl-accordion__item--disabled) .tl-accordion__header-icon-start,
@@ -75,8 +126,10 @@
75
126
  /* Focus state */
76
127
  }
77
128
  .tl-accordion__item:has(.tl-accordion__header-icon-start:focus-visible), .tl-accordion__item:has(.tl-accordion__header-icon-end:focus-visible) {
78
- outline: 2px solid var(--color-foreground-border-accent-focus);
129
+ outline: 2px solid var(--component--focus-ring-color-strong);
130
+ box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
79
131
  outline-offset: 1px;
132
+ z-index: 1;
80
133
  background-color: var(--accordion-background-focus);
81
134
  }
82
135
  .tl-accordion__item--disabled:hover, .tl-accordion__item--disabled:active {
package/dist/tl-banner.css CHANGED
@@ -1,21 +1,89 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
1
4
  :root,
2
- .tl-mode-light,
3
- .tl-mode-dark {
4
- --banner-text: var(--color-foreground-text-strong);
5
- --banner-close-icon: var(--color-foreground-icon-strong);
6
- --banner-background-default: var(--color-background-layer-01);
7
- --banner-prefix-default: var(--color-foreground-icon-strong);
8
- --banner-background-info: var(--color-system-info-discrete);
9
- --banner-prefix-info: var(--color-system-info-default);
10
- --banner-background-error: var(--color-system-danger-discrete);
11
- --banner-prefix-error: var(--color-system-danger-default);
5
+ .tds-mode-light,
6
+ .scania .tds-mode-light,
7
+ .scania.tds-mode-light,
8
+ .scania .tl-mode-light,
9
+ .scania.tl-mode-light {
10
+ --component-banner-background-neutral-default: var(--scania-color-grey-150);
11
+ --component-banner-background-information-default: var(--scania-color-blue-100);
12
+ --component-banner-background-error-default: var(--color-system-danger-discrete);
13
+ --component-banner-text-neutral-default: var(--color-text-strong);
14
+ --component-banner-text-information-default: var(--color-text-strong);
15
+ --component-banner-text-error-default: var(--color-text-strong);
16
+ --component-banner-icon-neutral-default: var(--color-icon-strong);
17
+ --component-banner-icon-information-default: var(--color-system-info-default);
18
+ --component-banner-icon-error-default: var(--color-system-danger-default);
19
+ --component-banner-icon-dismiss-default: var(--color-icon-strong);
20
+ }
21
+
22
+ .traton .tds-mode-light,
23
+ .traton.tds-mode-light,
24
+ .traton .tl-mode-light,
25
+ .traton.tl-mode-light {
26
+ --component-banner-background-neutral-default: var(--color-background-layer-01);
27
+ --component-banner-background-information-default: var(--color-system-info-discrete);
28
+ --component-banner-background-error-default: var(--color-system-danger-discrete);
29
+ --component-banner-text-neutral-default: var(--color-text-strong);
30
+ --component-banner-text-information-default: var(--color-text-strong);
31
+ --component-banner-text-error-default: var(--color-text-strong);
32
+ --component-banner-icon-neutral-default: var(--color-icon-strong);
33
+ --component-banner-icon-information-default: var(--color-system-info-default);
34
+ --component-banner-icon-error-default: var(--color-system-danger-default);
35
+ --component-banner-icon-dismiss-default: var(--color-icon-strong);
36
+ }
37
+
38
+ .tds-mode-dark,
39
+ .scania .tds-mode-dark,
40
+ .scania.tds-mode-dark,
41
+ .scania .tl-mode-dark,
42
+ .scania.tl-mode-dark {
43
+ --component-banner-background-neutral-default: var(--color-background-layer-02);
44
+ --component-banner-background-information-default: var(--scania-color-blue-700);
45
+ --component-banner-background-error-default: var(--color-system-danger-discrete);
46
+ --component-banner-text-neutral-default: var(--color-text-strong);
47
+ --component-banner-text-information-default: var(--color-text-strong);
48
+ --component-banner-text-error-default: var(--color-text-strong);
49
+ --component-banner-icon-neutral-default: var(--color-icon-strong);
50
+ --component-banner-icon-information-default: var(--color-system-info-default);
51
+ --component-banner-icon-error-default: var(--color-system-danger-default);
52
+ --component-banner-icon-dismiss-default: var(--color-icon-strong);
53
+ }
54
+
55
+ .traton .tds-mode-dark,
56
+ .traton.tds-mode-dark,
57
+ .traton .tl-mode-dark,
58
+ .traton.tl-mode-dark {
59
+ --component-banner-background-neutral-default: var(--color-background-layer-01);
60
+ --component-banner-background-information-default: var(--color-system-info-discrete);
61
+ --component-banner-background-error-default: var(--color-system-danger-discrete);
62
+ --component-banner-text-neutral-default: var(--color-text-strong);
63
+ --component-banner-text-information-default: var(--color-text-strong);
64
+ --component-banner-text-error-default: var(--color-text-strong);
65
+ --component-banner-icon-neutral-default: var(--color-icon-strong);
66
+ --component-banner-icon-information-default: var(--color-system-info-default);
67
+ --component-banner-icon-error-default: var(--color-system-danger-default);
68
+ --component-banner-icon-dismiss-default: var(--color-icon-strong);
69
+ }
70
+
71
+ .tl-banner {
72
+ --banner-text: var(--component-banner-text-neutral-default);
73
+ --banner-close-icon: var(--component-banner-icon-dismiss-default);
74
+ --banner-background-default: var(--component-banner-background-neutral-default);
75
+ --banner-prefix-default: var(--component-banner-icon-neutral-default);
76
+ --banner-background-info: var(--component-banner-background-information-default);
77
+ --banner-prefix-info: var(--component-banner-icon-information-default);
78
+ --banner-background-error: var(--component-banner-background-error-default);
79
+ --banner-prefix-error: var(--component-banner-icon-error-default);
12
80
  }
13
81
 
14
82
  /* Typography Usage mixins */
15
83
  .tl-banner {
16
84
  display: flex;
17
85
  background-color: var(--banner-background-default);
18
- padding: 16px 20px;
86
+ padding: 16px;
19
87
  position: relative;
20
88
  }
21
89
  .tl-banner--error {
@@ -87,8 +155,15 @@
87
155
  width: 20px;
88
156
  }
89
157
  .tl-banner__close:focus-visible {
90
- outline: 2px solid var(--tds-focus-outline-color);
91
- box-shadow: 0 0 0 1px var(--tds-white);
158
+ outline: 2px solid var(--component--focus-ring-color-strong);
159
+ box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
92
160
  outline-offset: 1px;
93
161
  z-index: 1;
162
+ }
163
+
164
+ .tl-banner .tl-link {
165
+ text-decoration: underline;
166
+ }
167
+ .tl-banner .tl-link:hover {
168
+ text-decoration: none;
94
169
  }
package/dist/tl-block.css CHANGED
@@ -1,12 +1,67 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+ :root,
5
+ .tds-mode-light,
6
+ .scania .tds-mode-light,
7
+ .scania.tds-mode-light,
8
+ .scania .tl-mode-light,
9
+ .scania.tl-mode-light {
10
+ --component-block-background-primary: var(--color-background-layer-01);
11
+ --component-block-background-secondary: var(--color-background-layer-02);
12
+ --component-block-background-nested-even: var(--component-block-background-primary);
13
+ --component-block-background-nested-odd: var(--component-block-background-secondary);
14
+ --component-block-border-radius-default: var(--scania-unit-4);
15
+ --component-block-border-radius-none: var(--scania-unit-0);
16
+ }
17
+
18
+ .traton .tds-mode-light,
19
+ .traton.tds-mode-light,
20
+ .traton .tl-mode-light,
21
+ .traton.tl-mode-light {
22
+ --component-block-background-primary: var(--color-background-layer-01);
23
+ --component-block-background-secondary: var(--color-background-layer-02);
24
+ --component-block-background-nested-even: var(--component-block-background-primary);
25
+ --component-block-background-nested-odd: var(--component-block-background-secondary);
26
+ --component-block-border-radius-default: var(--traton-unit-4);
27
+ --component-block-border-radius-none: var(--traton-unit-0);
28
+ }
29
+
30
+ .tds-mode-dark,
31
+ .scania .tds-mode-dark,
32
+ .scania.tds-mode-dark,
33
+ .scania .tl-mode-dark,
34
+ .scania.tl-mode-dark {
35
+ --component-block-background-primary: var(--color-background-layer-01);
36
+ --component-block-background-secondary: var(--color-background-layer-02);
37
+ --component-block-background-nested-even: var(--component-block-background-primary);
38
+ --component-block-background-nested-odd: var(--component-block-background-secondary);
39
+ --component-block-border-radius-default: var(--scania-unit-4);
40
+ --component-block-border-radius-none: var(--scania-unit-0);
41
+ }
42
+
43
+ .traton .tds-mode-dark,
44
+ .traton.tds-mode-dark,
45
+ .traton .tl-mode-dark,
46
+ .traton.tl-mode-dark {
47
+ --component-block-background-primary: var(--color-background-layer-01);
48
+ --component-block-background-secondary: var(--color-background-layer-02);
49
+ --component-block-background-nested-even: var(--component-block-background-primary);
50
+ --component-block-background-nested-odd: var(--component-block-background-secondary);
51
+ --component-block-border-radius-default: var(--traton-unit-4);
52
+ --component-block-border-radius-none: var(--traton-unit-0);
53
+ }
54
+
55
+ /* Component variables */
1
56
  .tl-block {
2
- --block-background: var(--color-background-layer-01);
3
- --block-text-color: var(--color-foreground-text-strong);
4
- --block-background-mode-primary: var(--color-background-layer-01);
5
- --block-background-mode-secondary: var(--color-background-layer-02);
6
- --block-background-even: var(--color-background-layer-01);
7
- --block-background-odd: var(--color-background-layer-02);
57
+ --block-background: var(--component-block-background-primary);
58
+ --block-text-color: var(--color-text-strong);
59
+ --block-background-mode-primary: var(--component-block-background-primary);
60
+ --block-background-mode-secondary: var(--component-block-background-secondary);
61
+ --block-background-even: var(--component-block-background-nested-even);
62
+ --block-background-odd: var(--component-block-background-nested-odd);
8
63
  --block-padding: 16px;
9
- --block-border-radius: 4px;
64
+ --block-border-radius: calc(var(--component-block-border-radius-default) * 1px);
10
65
  }
11
66
 
12
67
  /* Typography Usage mixins */
package/dist/tl-breadcrumbs.css CHANGED
@@ -1,13 +1,59 @@
1
1
  @charset "UTF-8";
2
+ /**
3
+ * Do not edit directly, this file was auto-generated.
4
+ */
5
+ :root,
6
+ .tds-mode-light,
7
+ .scania .tds-mode-light,
8
+ .scania.tds-mode-light,
9
+ .scania .tl-mode-light,
10
+ .scania.tl-mode-light {
11
+ --component-breadcrumbs-text-link-default: var(--color-text-strong);
12
+ --component-breadcrumbs-text-link-hover: var(--color-text-strong);
13
+ --component-breadcrumbs-text-current-default: var(--color-text-soft);
14
+ --component-breadcrumbs-text-separator-default: var(--color-text-strong);
15
+ }
16
+
17
+ .traton .tds-mode-light,
18
+ .traton.tds-mode-light,
19
+ .traton .tl-mode-light,
20
+ .traton.tl-mode-light {
21
+ --component-breadcrumbs-text-link-default: var(--color-text-strong);
22
+ --component-breadcrumbs-text-link-hover: var(--color-text-strong);
23
+ --component-breadcrumbs-text-current-default: var(--color-text-soft);
24
+ --component-breadcrumbs-text-separator-default: var(--color-text-strong);
25
+ }
26
+
27
+ .tds-mode-dark,
28
+ .scania .tds-mode-dark,
29
+ .scania.tds-mode-dark,
30
+ .scania .tl-mode-dark,
31
+ .scania.tl-mode-dark {
32
+ --component-breadcrumbs-text-link-default: var(--color-text-strong);
33
+ --component-breadcrumbs-text-link-hover: var(--color-text-strong);
34
+ --component-breadcrumbs-text-current-default: var(--color-text-soft);
35
+ --component-breadcrumbs-text-separator-default: var(--color-text-strong);
36
+ }
37
+
38
+ .traton .tds-mode-dark,
39
+ .traton.tds-mode-dark,
40
+ .traton .tl-mode-dark,
41
+ .traton.tl-mode-dark {
42
+ --component-breadcrumbs-text-link-default: var(--color-text-strong);
43
+ --component-breadcrumbs-text-link-hover: var(--color-text-strong);
44
+ --component-breadcrumbs-text-current-default: var(--color-text-soft);
45
+ --component-breadcrumbs-text-separator-default: var(--color-text-strong);
46
+ }
47
+
2
48
  .tl-breadcrumbs {
3
- --breadcrumb-label: var(--color-foreground-text-strong);
4
- --breadcrumb-hover: var(--color-foreground-text-strong);
5
- --breadcrumb-current: var(--color-foreground-text-subtle);
6
- --breadcrumb-separator-color: var(--color-foreground-text-strong);
49
+ --breadcrumb-label: var(--component-breadcrumbs-text-link-default);
50
+ --breadcrumb-hover: var(--component-breadcrumbs-text-link-hover);
51
+ --breadcrumb-current: var(--component-breadcrumbs-text-current-default);
52
+ --breadcrumb-separator-color: var(--component-breadcrumbs-text-separator-default);
7
53
  --breadcrumb-separator-margin: 4px;
8
54
  --breadcrumb-separator-width: 4px;
9
55
  --breadcrumb-separator-height: 8px;
10
- --breadcrumb-focus-outline-color: var(--color-foreground-border-accent-focus);
56
+ --breadcrumb-focus-outline-color: var(--color-system-info-default);
11
57
  --breadcrumb-focus-outline-width: 2px;
12
58
  }
13
59
 
@@ -62,7 +108,10 @@
62
108
  text-decoration: underline;
63
109
  }
64
110
  .tl-breadcrumbs a:focus-visible {
65
- outline: var(--breadcrumb-focus-outline-width) solid var(--breadcrumb-focus-outline-color);
111
+ outline: 2px solid var(--component--focus-ring-color-strong);
112
+ box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
113
+ outline-offset: 1px;
114
+ z-index: 1;
66
115
  }
67
116
  .tl-breadcrumbs a[aria-current=page] {
68
117
  pointer-events: none;