@momentum-design/components 0.129.8 → 0.129.9

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 (9) hide show
  1. package/dist/browser/index.js +48 -96
  2. package/dist/browser/index.js.map +2 -2
  3. package/dist/components/tab/tab.component.d.ts +17 -65
  4. package/dist/components/tab/tab.component.js +17 -65
  5. package/dist/components/tab/tab.styles.js +48 -96
  6. package/dist/custom-elements.json +26 -174
  7. package/dist/react/tab/index.d.ts +17 -65
  8. package/dist/react/tab/index.js +17 -65
  9. package/package.json +1 -1
package/dist/components/tab/tab.component.d.ts CHANGED
@@ -34,71 +34,23 @@ declare const Tab_base: import("../../utils/mixins/index.types").Constructor<imp
34
34
  *
35
35
  * @tagname mdc-tab
36
36
  *
37
- * @cssproperty --mdc-button-height - Height for button size
38
- * @cssproperty --mdc-tab-content-gap - Gap between the badge(if provided), icon and text.
39
- * @cssproperty --mdc-tab-height - Height of the tab.
40
- * @cssproperty --mdc-tab-glass-active-background-color-disabled - Background color for active glass tab
41
- * in disabled state.
42
- * @cssproperty --mdc-tab-glass-active-background-color-hover - Background color for active glass tab in hover state.
43
- * @cssproperty --mdc-tab-glass-active-background-color-normal - Background color for active glass tab in rest state.
44
- * @cssproperty --mdc-tab-glass-active-background-color-pressed - Background color for active glass tab
45
- * in pressed state.
46
- * @cssproperty --mdc-tab-glass-active-color - Text and icon color for active glass tab.
47
- * @cssproperty --mdc-tab-glass-active-color-disabled - Text and icon color for active glass tab in disabled state.
48
- * @cssproperty --mdc-tab-glass-border-radius - Border radius for glass tab.
49
- * @cssproperty --mdc-tab-glass-inactive-background-color-disabled - Background color for inactive glass tab
50
- * in disabled state.
51
- * @cssproperty --mdc-tab-glass-inactive-background-color-hover - Background color for inactive glass tab
52
- * in hover state.
53
- * @cssproperty --mdc-tab-glass-inactive-background-color-normal - Background color for inactive glass tab
54
- * in rest state.
55
- * @cssproperty --mdc-tab-glass-inactive-background-color-pressed - Background color for inactive glass tab
56
- * in pressed state.
57
- * @cssproperty --mdc-tab-glass-inactive-color - Text and icon color for inactive glass tab.
58
- * @cssproperty --mdc-tab-glass-inactive-color-disabled - Text and icon color for inactive glass tab in disabled state.
59
- * @cssproperty --mdc-tab-line-active-background-color-pressed - Background color for active line tab in pressed state.
60
- * @cssproperty --mdc-tab-line-active-background-color-disabled - Background color for active line tab
61
- * in disabled state.
62
- * @cssproperty --mdc-tab-line-active-background-color-hover - Background color for active line tab in hover state.
63
- * @cssproperty --mdc-tab-line-active-background-color-normal - Background color for active line tab in rest state.
64
- * @cssproperty --mdc-tab-line-active-color - Text and icon color for active line tab.
65
- * @cssproperty --mdc-tab-line-active-color-disabled - Text and icon color for active line tab in disabled state.
66
- * @cssproperty --mdc-tab-line-active-indicator-color - color for indicator in active line tab.
67
- * @cssproperty --mdc-tab-line-active-indicator-color-disabled - Color for indicator in active line tab
68
- * in disabled state.
69
- * @cssproperty --mdc-tab-line-active-indicator-height - Height for indicator in active line tab.
70
- * @cssproperty --mdc-tab-line-active-indicator-width - Width for indicator in active line tab.
71
- * @cssproperty --mdc-tab-line-border-bottom-left-radius - Bottom left border radius for line tab.
72
- * @cssproperty --mdc-tab-line-border-bottom-right-radius - Bottom right border radius for line tab.
73
- * @cssproperty --mdc-tab-line-border-top-left-radius - Top left border radius for line tab.
74
- * @cssproperty --mdc-tab-line-border-top-right-radius - Top right border radius for line tab.
75
- * @cssproperty --mdc-tab-line-inactive-background-color-pressed - Background color for inactive line tab
76
- * in pressed state.
77
- * @cssproperty --mdc-tab-line-inactive-background-color-disabled - Background color for inactive line tab
78
- * in disabled state
79
- * @cssproperty --mdc-tab-line-inactive-background-color-hover - Background color for inactive line tab in hover state.
80
- * @cssproperty --mdc-tab-line-inactive-background-color-normal - Background color for inactive line tab
81
- * in rest state.
82
- * @cssproperty --mdc-tab-line-inactive-color - Text and icon color for inactive line tab.
83
- * @cssproperty --mdc-tab-line-inactive-color-disabled - Text and icon color for inactive line tab in disabled state.
84
- * @cssproperty --mdc-tab-padding-left - Padding left for the tab.
85
- * @cssproperty --mdc-tab-padding-right - Padding right for the tab.
86
- * @cssproperty --mdc-tab-pill-active-background-color-pressed - Background color for active pill tab in pressed state.
87
- * @cssproperty --mdc-tab-pill-active-background-color-disabled - Background color for active pill tab
88
- * in disabled state.
89
- * @cssproperty --mdc-tab-pill-active-background-color-hover - Background color for active pill tab in hover state.
90
- * @cssproperty --mdc-tab-pill-active-background-color-normal - Background color for active pill tab in rest state.
91
- * @cssproperty --mdc-tab-pill-active-color - Text and icon color for active pill tab.
92
- * @cssproperty --mdc-tab-pill-active-color-disabled - Text and icon color for active pill tab in disabled state.
93
- * @cssproperty --mdc-tab-pill-border-radius - Border radius for pill tab.
94
- * @cssproperty --mdc-tab-pill-inactive-background-color-pressed - Background color for inactive pill tab
95
- * in pressed state.
96
- * @cssproperty --mdc-tab-pill-inactive-background-color-disabled - Background color for inactive pill tab
97
- * in disabled state.
98
- * @cssproperty --mdc-tab-pill-inactive-background-color-hover - Background color for inactive pill tab in hover state.
99
- * @cssproperty --mdc-tab-pill-inactive-background-color-normal - Background color for inactive pill tab in rest state.
100
- * @cssproperty --mdc-tab-pill-inactive-color - Text and icon color for inactive pill tab.
101
- * @cssproperty --mdc-tab-pill-inactive-color-disabled - Text and icon color for inactive pill tab in disabled state.
37
+ * @cssproperty --mdc-tab-height - The height of the tab.
38
+ * @cssproperty --mdc-tab-padding-left - The left padding of the tab.
39
+ * @cssproperty --mdc-tab-padding-right - The right padding of the tab.
40
+ * @cssproperty --mdc-tab-content-gap - The gap between the icon and text in the tab.
41
+ * @cssproperty --mdc-tab-background-color - The background color of the tab.
42
+ * @cssproperty --mdc-tab-color - The text color of the tab.
43
+ * @cssproperty --mdc-tab-border-radius - The border radius of the tab.
44
+ *
45
+ * @cssproperty --mdc-tab-line-active-indicator-height - The height of the active indicator line.
46
+ * @cssproperty --mdc-tab-line-active-indicator-width - The width of the active indicator line.
47
+ *
48
+ * @cssproperty --mdc-tab-line-border-bottom-left-radius - The border bottom left radius of the active indicator line.
49
+ * @cssproperty --mdc-tab-line-border-bottom-right-radius - The border bottom right radius of the active indicator line.
50
+ * @cssproperty --mdc-tab-line-border-top-left-radius - The border top left radius of the active indicator line.
51
+ * @cssproperty --mdc-tab-line-border-top-right-radius - The border top right radius of the active indicator line.
52
+ *
53
+ *
102
54
  *
103
55
  * @csspart container - The container of the tab.
104
56
  * @csspart icon - The icon of the tab.
package/dist/components/tab/tab.component.js CHANGED
@@ -48,71 +48,23 @@ import styles from './tab.styles';
48
48
  *
49
49
  * @tagname mdc-tab
50
50
  *
51
- * @cssproperty --mdc-button-height - Height for button size
52
- * @cssproperty --mdc-tab-content-gap - Gap between the badge(if provided), icon and text.
53
- * @cssproperty --mdc-tab-height - Height of the tab.
54
- * @cssproperty --mdc-tab-glass-active-background-color-disabled - Background color for active glass tab
55
- * in disabled state.
56
- * @cssproperty --mdc-tab-glass-active-background-color-hover - Background color for active glass tab in hover state.
57
- * @cssproperty --mdc-tab-glass-active-background-color-normal - Background color for active glass tab in rest state.
58
- * @cssproperty --mdc-tab-glass-active-background-color-pressed - Background color for active glass tab
59
- * in pressed state.
60
- * @cssproperty --mdc-tab-glass-active-color - Text and icon color for active glass tab.
61
- * @cssproperty --mdc-tab-glass-active-color-disabled - Text and icon color for active glass tab in disabled state.
62
- * @cssproperty --mdc-tab-glass-border-radius - Border radius for glass tab.
63
- * @cssproperty --mdc-tab-glass-inactive-background-color-disabled - Background color for inactive glass tab
64
- * in disabled state.
65
- * @cssproperty --mdc-tab-glass-inactive-background-color-hover - Background color for inactive glass tab
66
- * in hover state.
67
- * @cssproperty --mdc-tab-glass-inactive-background-color-normal - Background color for inactive glass tab
68
- * in rest state.
69
- * @cssproperty --mdc-tab-glass-inactive-background-color-pressed - Background color for inactive glass tab
70
- * in pressed state.
71
- * @cssproperty --mdc-tab-glass-inactive-color - Text and icon color for inactive glass tab.
72
- * @cssproperty --mdc-tab-glass-inactive-color-disabled - Text and icon color for inactive glass tab in disabled state.
73
- * @cssproperty --mdc-tab-line-active-background-color-pressed - Background color for active line tab in pressed state.
74
- * @cssproperty --mdc-tab-line-active-background-color-disabled - Background color for active line tab
75
- * in disabled state.
76
- * @cssproperty --mdc-tab-line-active-background-color-hover - Background color for active line tab in hover state.
77
- * @cssproperty --mdc-tab-line-active-background-color-normal - Background color for active line tab in rest state.
78
- * @cssproperty --mdc-tab-line-active-color - Text and icon color for active line tab.
79
- * @cssproperty --mdc-tab-line-active-color-disabled - Text and icon color for active line tab in disabled state.
80
- * @cssproperty --mdc-tab-line-active-indicator-color - color for indicator in active line tab.
81
- * @cssproperty --mdc-tab-line-active-indicator-color-disabled - Color for indicator in active line tab
82
- * in disabled state.
83
- * @cssproperty --mdc-tab-line-active-indicator-height - Height for indicator in active line tab.
84
- * @cssproperty --mdc-tab-line-active-indicator-width - Width for indicator in active line tab.
85
- * @cssproperty --mdc-tab-line-border-bottom-left-radius - Bottom left border radius for line tab.
86
- * @cssproperty --mdc-tab-line-border-bottom-right-radius - Bottom right border radius for line tab.
87
- * @cssproperty --mdc-tab-line-border-top-left-radius - Top left border radius for line tab.
88
- * @cssproperty --mdc-tab-line-border-top-right-radius - Top right border radius for line tab.
89
- * @cssproperty --mdc-tab-line-inactive-background-color-pressed - Background color for inactive line tab
90
- * in pressed state.
91
- * @cssproperty --mdc-tab-line-inactive-background-color-disabled - Background color for inactive line tab
92
- * in disabled state
93
- * @cssproperty --mdc-tab-line-inactive-background-color-hover - Background color for inactive line tab in hover state.
94
- * @cssproperty --mdc-tab-line-inactive-background-color-normal - Background color for inactive line tab
95
- * in rest state.
96
- * @cssproperty --mdc-tab-line-inactive-color - Text and icon color for inactive line tab.
97
- * @cssproperty --mdc-tab-line-inactive-color-disabled - Text and icon color for inactive line tab in disabled state.
98
- * @cssproperty --mdc-tab-padding-left - Padding left for the tab.
99
- * @cssproperty --mdc-tab-padding-right - Padding right for the tab.
100
- * @cssproperty --mdc-tab-pill-active-background-color-pressed - Background color for active pill tab in pressed state.
101
- * @cssproperty --mdc-tab-pill-active-background-color-disabled - Background color for active pill tab
102
- * in disabled state.
103
- * @cssproperty --mdc-tab-pill-active-background-color-hover - Background color for active pill tab in hover state.
104
- * @cssproperty --mdc-tab-pill-active-background-color-normal - Background color for active pill tab in rest state.
105
- * @cssproperty --mdc-tab-pill-active-color - Text and icon color for active pill tab.
106
- * @cssproperty --mdc-tab-pill-active-color-disabled - Text and icon color for active pill tab in disabled state.
107
- * @cssproperty --mdc-tab-pill-border-radius - Border radius for pill tab.
108
- * @cssproperty --mdc-tab-pill-inactive-background-color-pressed - Background color for inactive pill tab
109
- * in pressed state.
110
- * @cssproperty --mdc-tab-pill-inactive-background-color-disabled - Background color for inactive pill tab
111
- * in disabled state.
112
- * @cssproperty --mdc-tab-pill-inactive-background-color-hover - Background color for inactive pill tab in hover state.
113
- * @cssproperty --mdc-tab-pill-inactive-background-color-normal - Background color for inactive pill tab in rest state.
114
- * @cssproperty --mdc-tab-pill-inactive-color - Text and icon color for inactive pill tab.
115
- * @cssproperty --mdc-tab-pill-inactive-color-disabled - Text and icon color for inactive pill tab in disabled state.
51
+ * @cssproperty --mdc-tab-height - The height of the tab.
52
+ * @cssproperty --mdc-tab-padding-left - The left padding of the tab.
53
+ * @cssproperty --mdc-tab-padding-right - The right padding of the tab.
54
+ * @cssproperty --mdc-tab-content-gap - The gap between the icon and text in the tab.
55
+ * @cssproperty --mdc-tab-background-color - The background color of the tab.
56
+ * @cssproperty --mdc-tab-color - The text color of the tab.
57
+ * @cssproperty --mdc-tab-border-radius - The border radius of the tab.
58
+ *
59
+ * @cssproperty --mdc-tab-line-active-indicator-height - The height of the active indicator line.
60
+ * @cssproperty --mdc-tab-line-active-indicator-width - The width of the active indicator line.
61
+ *
62
+ * @cssproperty --mdc-tab-line-border-bottom-left-radius - The border bottom left radius of the active indicator line.
63
+ * @cssproperty --mdc-tab-line-border-bottom-right-radius - The border bottom right radius of the active indicator line.
64
+ * @cssproperty --mdc-tab-line-border-top-left-radius - The border top left radius of the active indicator line.
65
+ * @cssproperty --mdc-tab-line-border-top-right-radius - The border top right radius of the active indicator line.
66
+ *
67
+ *
116
68
  *
117
69
  * @csspart container - The container of the tab.
118
70
  * @csspart icon - The icon of the tab.
package/dist/components/tab/tab.styles.js CHANGED
@@ -7,70 +7,20 @@ const styles = [
7
7
  --mdc-tab-content-gap: 0.5rem;
8
8
  --mdc-tab-height: 2rem;
9
9
 
10
- --mdc-tab-glass-active-background-color-disabled: var(--mds-color-theme-button-primary-disabled);
11
- --mdc-tab-glass-active-background-color-hover: var(--mds-color-theme-button-primary-hover);
12
- --mdc-tab-glass-active-background-color-normal: var(--mds-color-theme-button-primary-normal);
13
- --mdc-tab-glass-active-background-color-pressed: var(--mds-color-theme-button-primary-pressed);
14
-
15
- --mdc-tab-glass-active-color: var(--mds-color-theme-inverted-text-primary-normal);
16
- --mdc-tab-glass-active-color-disabled: var(--mds-color-theme-inverted-text-primary-disabled);
17
-
18
- --mdc-tab-glass-border-radius: 0.5rem;
19
-
20
- --mdc-tab-glass-inactive-background-color-disabled: var(--mds-color-theme-button-secondary-disabled);
21
- --mdc-tab-glass-inactive-background-color-hover: var(--mds-color-theme-button-secondary-hover);
22
- --mdc-tab-glass-inactive-background-color-normal: var(--mds-color-theme-button-secondary-normal);
23
- --mdc-tab-glass-inactive-background-color-pressed: var(--mds-color-theme-button-secondary-pressed);
24
-
25
- --mdc-tab-glass-inactive-color: var(--mds-color-theme-text-secondary-normal);
26
- --mdc-tab-glass-inactive-color-disabled: var(--mds-color-theme-text-primary-disabled);
27
-
28
- --mdc-tab-line-active-background-color-disabled: var(--mds-color-theme-button-secondary-disabled);
29
- --mdc-tab-line-active-background-color-hover: var(--mds-color-theme-button-secondary-hover);
30
- --mdc-tab-line-active-background-color-normal: var(--mds-color-theme-button-secondary-normal);
31
- --mdc-tab-line-active-background-color-pressed: var(--mds-color-theme-button-secondary-pressed);
32
-
33
- --mdc-tab-line-active-color: var(--mds-color-theme-text-primary-normal);
34
- --mdc-tab-line-active-color-disabled: var(--mds-color-theme-text-primary-disabled);
35
-
36
- --mdc-tab-line-active-indicator-color: var(--mds-color-theme-outline-input-active);
37
- --mdc-tab-line-active-indicator-color-disabled: var(--mds-color-theme-outline-primary-disabled);
38
10
  --mdc-tab-line-active-indicator-height: 0.125rem;
39
11
  --mdc-tab-line-active-indicator-width: 100%;
40
12
 
13
+ --mdc-tab-padding-left: 0.75rem;
14
+ --mdc-tab-padding-right: 0.75rem;
15
+
41
16
  --mdc-tab-line-border-bottom-left-radius: 0;
42
17
  --mdc-tab-line-border-bottom-right-radius: 0;
43
18
  --mdc-tab-line-border-top-left-radius: 0.25rem;
44
19
  --mdc-tab-line-border-top-right-radius: 0.25rem;
45
20
 
46
- --mdc-tab-line-inactive-background-color-disabled: var(--mds-color-theme-button-secondary-disabled);
47
- --mdc-tab-line-inactive-background-color-hover: var(--mds-color-theme-button-secondary-hover);
48
- --mdc-tab-line-inactive-background-color-normal: var(--mds-color-theme-button-secondary-normal);
49
- --mdc-tab-line-inactive-background-color-pressed: var(--mds-color-theme-button-secondary-pressed);
50
-
51
- --mdc-tab-line-inactive-color: var(--mds-color-theme-text-secondary-normal);
52
- --mdc-tab-line-inactive-color-disabled: var(--mds-color-theme-text-primary-disabled);
53
-
54
- --mdc-tab-padding-left: 0.75rem;
55
- --mdc-tab-padding-right: 0.75rem;
56
-
57
- --mdc-tab-pill-active-background-color-disabled: var(--mds-color-theme-button-secondary-active-normal);
58
- --mdc-tab-pill-active-background-color-hover: var(--mds-color-theme-button-secondary-active-hover);
59
- --mdc-tab-pill-active-background-color-normal: var(--mds-color-theme-button-secondary-active-normal);
60
- --mdc-tab-pill-active-background-color-pressed: var(--mds-color-theme-button-secondary-active-pressed);
61
-
62
- --mdc-tab-pill-active-color: var(--mds-color-theme-text-primary-normal);
63
- --mdc-tab-pill-active-color-disabled: var(--mds-color-theme-text-primary-disabled);
64
-
65
- --mdc-tab-pill-border-radius: 0.5rem;
66
-
67
- --mdc-tab-pill-inactive-background-color-disabled: var(--mds-color-theme-button-secondary-disabled);
68
- --mdc-tab-pill-inactive-background-color-hover: var(--mds-color-theme-button-secondary-hover);
69
- --mdc-tab-pill-inactive-background-color-normal: var(--mds-color-theme-button-secondary-normal);
70
- --mdc-tab-pill-inactive-background-color-pressed: var(--mds-color-theme-button-secondary-pressed);
71
-
72
- --mdc-tab-pill-inactive-color: var(--mds-color-theme-text-secondary-normal);
73
- --mdc-tab-pill-inactive-color-disabled: var(--mds-color-theme-text-primary-disabled);
21
+ --mdc-tab-background-color: var(--mds-color-theme-button-secondary-normal);
22
+ --mdc-tab-color: var(--mds-color-theme-text-secondary-normal);
23
+ --mdc-tab-border-radius: 0.5rem;
74
24
 
75
25
  flex-direction: column;
76
26
  flex-shrink: 0;
@@ -79,6 +29,9 @@ const styles = [
79
29
  padding-right: var(--mdc-tab-padding-right);
80
30
  position: relative;
81
31
  border: none;
32
+ background-color: var(--mdc-tab-background-color);
33
+ color: var(--mdc-tab-color);
34
+ border-radius: var(--mdc-tab-border-radius);
82
35
  }
83
36
 
84
37
  :host::part(container) {
@@ -113,6 +66,7 @@ const styles = [
113
66
  :host::part(indicator) {
114
67
  width: var(--mdc-tab-line-active-indicator-width);
115
68
  height: var(--mdc-tab-line-active-indicator-height);
69
+ background-color: var(--mdc-tab-background-color);
116
70
  bottom: 0;
117
71
  position: absolute;
118
72
  visibility: hidden;
@@ -124,133 +78,131 @@ const styles = [
124
78
  }
125
79
 
126
80
  :host([variant='glass']) {
127
- background-color: var(--mdc-tab-glass-inactive-background-color-normal);
128
- border-radius: var(--mdc-tab-glass-border-radius);
129
- color: var(--mdc-tab-glass-inactive-color);
81
+ --mdc-tab-background-color: var(--mds-color-theme-button-secondary-normal);
82
+ --mdc-tab-color: var(--mds-color-theme-text-secondary-normal);
130
83
  }
131
84
 
132
85
  :host([variant='glass']:hover) {
133
- background-color: var(--mdc-tab-glass-inactive-background-color-hover);
86
+ --mdc-tab-background-color: var(--mds-color-theme-button-secondary-hover);
134
87
  }
135
88
 
136
89
  :host([variant='glass']:active) {
137
- background-color: var(--mdc-tab-glass-inactive-background-color-pressed);
90
+ --mdc-tab-background-color: var(--mds-color-theme-button-secondary-pressed);
138
91
  }
139
92
 
140
93
  :host([variant='glass'][disabled]),
141
94
  :host([variant='glass'][soft-disabled]) {
142
- background-color: var(--mdc-tab-glass-inactive-background-color-disabled);
143
- color: var(--mdc-tab-glass-inactive-color-disabled);
95
+ --mdc-tab-background-color: var(--mds-color-theme-button-secondary-disabled);
96
+ --mdc-tab-color: var(--mds-color-theme-text-primary-disabled);
144
97
  }
145
98
 
146
99
  :host([variant='glass'][active]) {
147
- background-color: var(--mdc-tab-glass-active-background-color-normal);
148
- color: var(--mdc-tab-glass-active-color);
100
+ --mdc-tab-background-color: var(--mds-color-theme-button-primary-normal);
101
+ --mdc-tab-color: var(--mds-color-theme-inverted-text-primary-normal);
149
102
  }
150
103
 
151
104
  :host([variant='glass'][active]:hover) {
152
- background-color: var(--mdc-tab-glass-active-background-color-hover);
105
+ --mdc-tab-background-color: var(--mds-color-theme-button-primary-hover);
153
106
  }
154
107
 
155
108
  :host([variant='glass'][active]:active) {
156
- background-color: var(--mdc-tab-glass-active-background-color-pressed);
109
+ --mdc-tab-background-color: var(--mds-color-theme-button-primary-pressed);
157
110
  }
158
111
 
159
112
  :host([variant='glass'][active][disabled]),
160
113
  :host([variant='glass'][active][soft-disabled]) {
161
- background-color: var(--mdc-tab-glass-active-background-color-disabled);
162
- color: var(--mdc-tab-glass-active-color-disabled);
114
+ --mdc-tab-background-color: var(--mds-color-theme-button-primary-disabled);
115
+ --mdc-tab-color: var(--mds-color-theme-inverted-text-primary-disabled);
163
116
  }
164
117
 
165
118
  :host([variant='line']) {
166
- background-color: var(--mdc-tab-line-inactive-background-color-normal);
119
+ --mdc-tab-background-color: var(--mds-color-theme-button-secondary-normal);
167
120
  border-top-left-radius: var(--mdc-tab-line-border-top-left-radius);
168
121
  border-top-right-radius: var(--mdc-tab-line-border-top-right-radius);
169
122
  border-bottom-left-radius: var(--mdc-tab-line-border-bottom-left-radius);
170
123
  border-bottom-right-radius: var(--mdc-tab-line-border-bottom-right-radius);
171
- color: var(--mdc-tab-line-inactive-color);
124
+ --mdc-tab-color: var(--mds-color-theme-text-secondary-normal);
172
125
  }
173
126
 
174
127
  :host([variant='line']:hover) {
175
- background-color: var(--mdc-tab-line-inactive-background-color-hover);
128
+ --mdc-tab-background-color: var(--mds-color-theme-button-secondary-hover);
176
129
  }
177
130
 
178
131
  :host([variant='line']:active) {
179
- background-color: var(--mdc-tab-line-inactive-background-color-pressed);
132
+ --mdc-tab-background-color: var(--mds-color-theme-button-secondary-pressed);
180
133
  }
181
134
 
182
135
  :host([variant='line'][disabled]),
183
136
  :host([variant='line'][soft-disabled]) {
184
- background-color: var(--mdc-tab-line-inactive-background-color-disabled);
185
- color: var(--mdc-tab-line-inactive-color-disabled);
137
+ --mdc-tab-background-color: var(--mds-color-theme-button-secondary-disabled);
138
+ --mdc-tab-color: var(--mds-color-theme-text-primary-disabled);
186
139
  }
187
140
 
188
141
  :host([variant='line'][active]) {
189
- background-color: var(--mdc-tab-line-active-background-color-normal);
190
- color: var(--mdc-tab-line-active-color);
142
+ --mdc-tab-background-color: var(--mds-color-theme-button-secondary-normal);
143
+ --mdc-tab-color: var(--mds-color-theme-text-primary-normal);
191
144
  }
192
145
 
193
146
  :host([variant='line'][active])::part(indicator) {
194
- background-color: var(--mdc-tab-line-active-indicator-color);
147
+ --mdc-tab-background-color: var(--mds-color-theme-outline-input-active);
195
148
  visibility: visible;
196
149
  }
197
150
 
198
151
  :host([variant='line'][active]:hover) {
199
- background-color: var(--mdc-tab-line-active-background-color-hover);
152
+ --mdc-tab-background-color: var(--mds-color-theme-button-secondary-hover);
200
153
  }
201
154
 
202
155
  :host([variant='line'][active]:active) {
203
- background-color: var(--mdc-tab-line-active-background-color-pressed);
156
+ --mdc-tab-background-color: var(--mds-color-theme-button-secondary-pressed);
204
157
  }
205
158
 
206
159
  :host([variant='line'][active][disabled]),
207
160
  :host([variant='line'][active][soft-disabled]) {
208
- background-color: var(--mdc-tab-line-active-background-color-disabled);
209
- color: var(--mdc-tab-line-active-color-disabled);
161
+ --mdc-tab-background-color: var(--mds-color-theme-button-secondary-disabled);
162
+ --mdc-tab-color: var(--mds-color-theme-text-primary-disabled);
210
163
  }
211
164
 
212
165
  :host([variant='line'][active][disabled])::part(indicator),
213
166
  :host([variant='line'][active][soft-disabled])::part(indicator) {
214
- background-color: var(--mdc-tab-line-active-indicator-color-disabled);
167
+ --mdc-tab-background-color: var(--mds-color-theme-outline-primary-disabled);
215
168
  }
216
169
 
217
170
  :host([variant='pill']) {
218
- background-color: var(--mdc-tab-pill-inactive-background-color-normal);
219
- border-radius: var(--mdc-tab-pill-border-radius);
220
- color: var(--mdc-tab-pill-inactive-color);
171
+ --mdc-tab-background-color: var(--mds-color-theme-button-secondary-normal);
172
+ --mdc-tab-color: var(--mds-color-theme-text-secondary-normal);
221
173
  }
222
174
 
223
175
  :host([variant='pill']:hover) {
224
- background-color: var(--mdc-tab-pill-inactive-background-color-hover);
176
+ --mdc-tab-background-color: var(--mds-color-theme-button-secondary-hover);
225
177
  }
226
178
 
227
179
  :host([variant='pill']:active) {
228
- background-color: var(--mdc-tab-pill-inactive-background-color-pressed);
180
+ --mdc-tab-background-color: var(--mds-color-theme-button-secondary-pressed);
229
181
  }
230
182
 
231
183
  :host([variant='pill'][disabled]),
232
184
  :host([variant='pill'][soft-disabled]) {
233
- background-color: var(--mdc-tab-pill-inactive-background-color-disabled);
234
- color: var(--mdc-tab-pill-inactive-color-disabled);
185
+ --mdc-tab-background-color: var(--mds-color-theme-button-secondary-disabled);
186
+ --mdc-tab-color: var(--mds-color-theme-text-primary-disabled);
235
187
  }
236
188
 
237
189
  :host([variant='pill'][active]) {
238
- background-color: var(--mdc-tab-pill-active-background-color-normal);
239
- color: var(--mdc-tab-pill-active-color);
190
+ --mdc-tab-background-color: var(--mds-color-theme-button-secondary-active-normal);
191
+ --mdc-tab-color: var(--mds-color-theme-text-primary-normal);
240
192
  }
241
193
 
242
194
  :host([variant='pill'][active]:hover) {
243
- background-color: var(--mdc-tab-pill-active-background-color-hover);
195
+ --mdc-tab-background-color: var(--mds-color-theme-button-secondary-active-hover);
244
196
  }
245
197
 
246
198
  :host([variant='pill'][active]:active) {
247
- background-color: var(--mdc-tab-pill-active-background-color-pressed);
199
+ --mdc-tab-background-color: var(--mds-color-theme-button-secondary-active-pressed);
248
200
  }
249
201
 
250
202
  :host([variant='pill'][active][disabled]),
251
203
  :host([variant='pill'][active][soft-disabled]) {
252
- background-color: var(--mdc-tab-pill-active-background-color-disabled);
253
- color: var(--mdc-tab-pill-active-color-disabled);
204
+ --mdc-tab-background-color: var(--mds-color-theme-button-secondary-active-normal);
205
+ --mdc-tab-color: var(--mds-color-theme-text-primary-disabled);
254
206
  }
255
207
  `,
256
208
  ...hostFocusRingStyles(),