@scania/tegel-lite 0.0.3-rules-beta.9 → 0.1.0-tl-header-test

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 (38) hide show
  1. package/README.md +0 -29
  2. package/dist/assets/icons/scania/microphone.svg +4 -0
  3. package/dist/assets/icons/scania/microphone_inactive.svg +7 -0
  4. package/dist/assets/icons/scania/notification_snooze.svg +6 -0
  5. package/dist/assets/icons/scania/paperclip.svg +3 -0
  6. package/dist/components.css +2027 -1798
  7. package/dist/global.css +3 -2
  8. package/dist/scania-variables.css +8 -0
  9. package/dist/tl-button.css +19 -0
  10. package/dist/tl-dropdown.css +36 -1
  11. package/dist/tl-folder-tabs.css +64 -0
  12. package/dist/tl-header.css +206 -50
  13. package/dist/tl-icon.css +16 -0
  14. package/dist/tl-inline-tabs.css +81 -0
  15. package/dist/tl-navigation-tabs.css +81 -0
  16. package/dist/tl-slider.css +1024 -1485
  17. package/dist/tl-text-field.css +32 -13
  18. package/package.json +3 -14
  19. package/.ai/rules/01-design-tokens.mdc +0 -318
  20. package/.ai/rules/02-components-forms.mdc +0 -396
  21. package/.ai/rules/03-components-display.mdc +0 -474
  22. package/.ai/rules/04-components-navigation.mdc +0 -358
  23. package/.ai/rules/05-guidelines.mdc +0 -144
  24. package/.ai/rules/06-patterns.mdc +0 -352
  25. package/.cursor/rules/tegel-lite/01-design-tokens.mdc +0 -317
  26. package/.cursor/rules/tegel-lite/02-components-forms.mdc +0 -395
  27. package/.cursor/rules/tegel-lite/03-components-display.mdc +0 -473
  28. package/.cursor/rules/tegel-lite/04-components-navigation.mdc +0 -357
  29. package/.cursor/rules/tegel-lite/05-guidelines.mdc +0 -143
  30. package/.cursor/rules/tegel-lite/06-patterns.mdc +0 -351
  31. package/.github/copilot-instructions.md +0 -2045
  32. package/AGENTS.md +0 -2045
  33. package/CLAUDE.md +0 -2045
  34. package/bin/setup-ai-rules.js +0 -368
  35. package/dist/tl-folder-tab.css +0 -87
  36. package/dist/tl-inline-tab.css +0 -80
  37. package/dist/tl-navigation-tab.css +0 -114
  38. package/dist/tl-textarea-mixins.css +0 -0
package/dist/tl-inline-tabs.css CHANGED
@@ -34,6 +34,87 @@
34
34
  --inline-tabs-tab-indicator-hover: var(--color-foreground-border-discrete);
35
35
  }
36
36
 
37
+ /* Typography Usage mixins */
38
+ .tl-inline-tabs__tab {
39
+ all: unset;
40
+ margin-right: 32px;
41
+ box-sizing: border-box;
42
+ }
43
+ .tl-inline-tabs__tab * {
44
+ box-sizing: border-box;
45
+ }
46
+ .tl-inline-tabs__tab {
47
+ font-family: var(--headline-07-font-family);
48
+ font-size: var(--headline-07-font-size);
49
+ line-height: var(--headline-07-line-height);
50
+ font-weight: var(--headline-07-font-weight);
51
+ letter-spacing: var(--headline-07-letter-spacing);
52
+ text-transform: var(--headline-07-text-transform);
53
+ color: var(--inline-tabs-tab);
54
+ text-decoration: none;
55
+ display: block;
56
+ position: relative;
57
+ transition: color 0.15s ease-in-out 0s;
58
+ white-space: nowrap;
59
+ background-color: transparent;
60
+ border: 0;
61
+ padding: 20px 4px;
62
+ }
63
+ .tl-inline-tabs__tab:focus-visible {
64
+ outline: none;
65
+ }
66
+ .tl-inline-tabs__tab:focus-visible::before {
67
+ content: "";
68
+ position: absolute;
69
+ inset: 18px 0;
70
+ border-radius: 2px;
71
+ box-shadow: 0 0 0 2px var(--inline-tabs-tab-focus) inset;
72
+ z-index: 2;
73
+ pointer-events: none;
74
+ }
75
+ .tl-inline-tabs__tab::after {
76
+ background-color: var(--inline-tabs-tab-indicator-hover);
77
+ content: " ";
78
+ position: absolute;
79
+ bottom: 0;
80
+ right: 0;
81
+ left: 0;
82
+ margin-left: auto;
83
+ width: 0%;
84
+ margin-right: auto;
85
+ height: 2px;
86
+ z-index: 1;
87
+ transition: width 0.15s ease-in-out 0s;
88
+ }
89
+ .tl-inline-tabs__tab:not(.tl-inline-tabs__tab--selected)::after {
90
+ width: 0%;
91
+ }
92
+ .tl-inline-tabs__tab:hover {
93
+ cursor: pointer;
94
+ color: var(--inline-tabs-tab-hover);
95
+ }
96
+ .tl-inline-tabs__tab:hover::after {
97
+ width: 100%;
98
+ }
99
+ .tl-inline-tabs__tab--selected {
100
+ color: var(--inline-tabs-tab-selected);
101
+ }
102
+ .tl-inline-tabs__tab--selected::after {
103
+ background-color: var(--inline-tabs-tab-indicator-active);
104
+ width: 100%;
105
+ }
106
+ .tl-inline-tabs__tab--disabled {
107
+ color: var(--inline-tabs-tab-disabled);
108
+ pointer-events: none;
109
+ cursor: not-allowed;
110
+ }
111
+ .tl-inline-tabs__tab--disabled::after {
112
+ content: none;
113
+ }
114
+ .tl-inline-tabs__tab--disabled:focus-visible::before {
115
+ box-shadow: none;
116
+ }
117
+
37
118
  .tl-inline-tabs {
38
119
  box-sizing: border-box;
39
120
  }
package/dist/tl-navigation-tabs.css CHANGED
@@ -32,6 +32,87 @@
32
32
  --navigation-tabs-tab-background-secondary: var(--traton-color-transparent-invisible-dark);
33
33
  }
34
34
 
35
+ /* Typography Usage mixins */
36
+ .tl-navigation-tabs__tab {
37
+ all: unset;
38
+ margin-right: 32px;
39
+ box-sizing: border-box;
40
+ }
41
+ .tl-navigation-tabs__tab * {
42
+ box-sizing: border-box;
43
+ }
44
+ .tl-navigation-tabs__tab {
45
+ font-family: var(--headline-07-font-family);
46
+ font-size: var(--headline-07-font-size);
47
+ line-height: var(--headline-07-line-height);
48
+ font-weight: var(--headline-07-font-weight);
49
+ letter-spacing: var(--headline-07-letter-spacing);
50
+ text-transform: var(--headline-07-text-transform);
51
+ color: var(--navigation-tabs-tab);
52
+ text-decoration: none;
53
+ display: block;
54
+ position: relative;
55
+ transition: color 0.15s ease-in-out 0s;
56
+ white-space: nowrap;
57
+ background-color: transparent;
58
+ border: 0;
59
+ padding: 26px 4px;
60
+ }
61
+ .tl-navigation-tabs__tab:focus-visible {
62
+ outline: none;
63
+ }
64
+ .tl-navigation-tabs__tab:focus-visible::before {
65
+ content: "";
66
+ position: absolute;
67
+ inset: 18px 0;
68
+ border-radius: 2px;
69
+ box-shadow: 0 0 0 2px var(--navigation-tabs-tab-focus) inset;
70
+ z-index: 2;
71
+ pointer-events: none;
72
+ }
73
+ .tl-navigation-tabs__tab::after {
74
+ background-color: var(--navigation-tabs-tab-indicator-hover);
75
+ content: " ";
76
+ position: absolute;
77
+ bottom: 0;
78
+ right: 0;
79
+ left: 0;
80
+ margin-left: auto;
81
+ width: 0%;
82
+ margin-right: auto;
83
+ height: 2px;
84
+ z-index: 1;
85
+ transition: width 0.15s ease-in-out 0s;
86
+ }
87
+ .tl-navigation-tabs__tab:not(.tl-navigation-tabs__tab--selected)::after {
88
+ width: 0%;
89
+ }
90
+ .tl-navigation-tabs__tab:hover {
91
+ cursor: pointer;
92
+ color: var(--navigation-tabs-tab-hover);
93
+ }
94
+ .tl-navigation-tabs__tab:hover::after {
95
+ width: 100%;
96
+ }
97
+ .tl-navigation-tabs__tab--selected {
98
+ color: var(--navigation-tabs-tab-selected);
99
+ }
100
+ .tl-navigation-tabs__tab--selected::after {
101
+ background-color: var(--navigation-tabs-tab-indicator-active);
102
+ width: 100%;
103
+ }
104
+ .tl-navigation-tabs__tab--disabled {
105
+ color: var(--navigation-tabs-tab-disabled);
106
+ pointer-events: none;
107
+ cursor: not-allowed;
108
+ }
109
+ .tl-navigation-tabs__tab--disabled::after {
110
+ content: none;
111
+ }
112
+ .tl-navigation-tabs__tab--disabled:focus-visible::before {
113
+ box-shadow: none;
114
+ }
115
+
35
116
  .tl-navigation-tabs {
36
117
  box-sizing: border-box;
37
118
  }