@momentum-design/components 0.8.0 → 0.8.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (4) hide show
  1. package/dist/browser/index.js +47 -39
  2. package/dist/browser/index.js.map +2 -2
  3. package/dist/components/text/fonts.styles.js +37 -29
  4. package/package.json +1 -1
package/dist/components/text/fonts.styles.js CHANGED
@@ -1,6 +1,14 @@
1
1
  import { css } from 'lit';
2
2
  export const fontsStyles = css `
3
- :host([type="headline-small-regular"])::part(text) {
3
+ :host([tagname])::part(text) {
4
+ font-size: unset;
5
+ font-weight: unset;
6
+ line-height: unset;
7
+ text-decoration: unset;
8
+ text-transform: unset;
9
+ }
10
+
11
+ :host([type="headline-small-regular"]) {
4
12
  font-size: var(--mds-font-apps-headline-small-regular-font-size);
5
13
  font-weight: var(--mds-font-apps-headline-small-regular-font-weight);
6
14
  line-height: var(--mds-font-apps-headline-small-regular-line-height);
@@ -8,7 +16,7 @@ export const fontsStyles = css `
8
16
  text-transform: var(--mds-font-apps-headline-small-regular-text-case);
9
17
  }
10
18
 
11
- :host([type="headline-small-light"])::part(text) {
19
+ :host([type="headline-small-light"]) {
12
20
  font-size: var(--mds-font-apps-headline-small-light-font-size);
13
21
  font-weight: var(--mds-font-apps-headline-small-light-font-weight);
14
22
  line-height: var(--mds-font-apps-headline-small-light-line-height);
@@ -16,7 +24,7 @@ export const fontsStyles = css `
16
24
  text-transform: var(--mds-font-apps-headline-small-light-text-case);
17
25
  }
18
26
 
19
- :host([type="heading-xlarge-bold"])::part(text) {
27
+ :host([type="heading-xlarge-bold"]) {
20
28
  font-size: var(--mds-font-apps-heading-xlarge-bold-font-size);
21
29
  font-weight: var(--mds-font-apps-heading-xlarge-bold-font-weight);
22
30
  line-height: var(--mds-font-apps-heading-xlarge-bold-line-height);
@@ -24,7 +32,7 @@ export const fontsStyles = css `
24
32
  text-transform: var(--mds-font-apps-heading-xlarge-bold-text-case);
25
33
  }
26
34
 
27
- :host([type="heading-xlarge-medium"])::part(text) {
35
+ :host([type="heading-xlarge-medium"]) {
28
36
  font-size: var(--mds-font-apps-heading-xlarge-medium-font-size);
29
37
  font-weight: var(--mds-font-apps-heading-xlarge-medium-font-weight);
30
38
  line-height: var(--mds-font-apps-heading-xlarge-medium-line-height);
@@ -32,7 +40,7 @@ export const fontsStyles = css `
32
40
  text-transform: var(--mds-font-apps-heading-xlarge-medium-text-case);
33
41
  }
34
42
 
35
- :host([type="heading-xlarge-regular"])::part(text) {
43
+ :host([type="heading-xlarge-regular"]) {
36
44
  font-size: var(--mds-font-apps-heading-xlarge-regular-font-size);
37
45
  font-weight: var(--mds-font-apps-heading-xlarge-regular-font-weight);
38
46
  line-height: var(--mds-font-apps-heading-xlarge-regular-line-height);
@@ -40,7 +48,7 @@ export const fontsStyles = css `
40
48
  text-transform: var(--mds-font-apps-heading-xlarge-regular-text-case);
41
49
  }
42
50
 
43
- :host([type="heading-large-bold"])::part(text) {
51
+ :host([type="heading-large-bold"]) {
44
52
  font-size: var(--mds-font-apps-heading-large-bold-font-size);
45
53
  font-weight: var(--mds-font-apps-heading-large-bold-font-weight);
46
54
  line-height: var(--mds-font-apps-heading-large-bold-line-height);
@@ -48,7 +56,7 @@ export const fontsStyles = css `
48
56
  text-transform: var(--mds-font-apps-heading-large-bold-text-case);
49
57
  }
50
58
 
51
- :host([type="heading-large-medium"])::part(text) {
59
+ :host([type="heading-large-medium"]) {
52
60
  font-size: var(--mds-font-apps-heading-large-medium-font-size);
53
61
  font-weight: var(--mds-font-apps-heading-large-medium-font-weight);
54
62
  line-height: var(--mds-font-apps-heading-large-medium-line-height);
@@ -56,7 +64,7 @@ export const fontsStyles = css `
56
64
  text-transform: var(--mds-font-apps-heading-large-medium-text-case);
57
65
  }
58
66
 
59
- :host([type="heading-large-regular"])::part(text) {
67
+ :host([type="heading-large-regular"]) {
60
68
  font-size: var(--mds-font-apps-heading-large-regular-font-size);
61
69
  font-weight: var(--mds-font-apps-heading-large-regular-font-weight);
62
70
  line-height: var(--mds-font-apps-heading-large-regular-line-height);
@@ -64,7 +72,7 @@ export const fontsStyles = css `
64
72
  text-transform: var(--mds-font-apps-heading-large-regular-text-case);
65
73
  }
66
74
 
67
- :host([type="heading-midsize-bold"])::part(text) {
75
+ :host([type="heading-midsize-bold"]) {
68
76
  font-size: var(--mds-font-apps-heading-midsize-bold-font-size);
69
77
  font-weight: var(--mds-font-apps-heading-midsize-bold-font-weight);
70
78
  line-height: var(--mds-font-apps-heading-midsize-bold-line-height);
@@ -72,7 +80,7 @@ export const fontsStyles = css `
72
80
  text-transform: var(--mds-font-apps-heading-midsize-bold-text-case);
73
81
  }
74
82
 
75
- :host([type="heading-midsize-medium"])::part(text) {
83
+ :host([type="heading-midsize-medium"]) {
76
84
  font-size: var(--mds-font-apps-heading-midsize-medium-font-size);
77
85
  font-weight: var(--mds-font-apps-heading-midsize-medium-font-weight);
78
86
  line-height: var(--mds-font-apps-heading-midsize-medium-line-height);
@@ -80,7 +88,7 @@ export const fontsStyles = css `
80
88
  text-transform: var(--mds-font-apps-heading-midsize-medium-text-case);
81
89
  }
82
90
 
83
- :host([type="heading-midsize-regular"])::part(text) {
91
+ :host([type="heading-midsize-regular"]) {
84
92
  font-size: var(--mds-font-apps-heading-midsize-regular-font-size);
85
93
  font-weight: var(--mds-font-apps-heading-midsize-regular-font-weight);
86
94
  line-height: var(--mds-font-apps-heading-midsize-regular-line-height);
@@ -88,7 +96,7 @@ export const fontsStyles = css `
88
96
  text-transform: var(--mds-font-apps-heading-midsize-regular-text-case);
89
97
  }
90
98
 
91
- :host([type="heading-small-bold"])::part(text) {
99
+ :host([type="heading-small-bold"]) {
92
100
  font-size: var(--mds-font-apps-heading-small-bold-font-size);
93
101
  font-weight: var(--mds-font-apps-heading-small-bold-font-weight);
94
102
  line-height: var(--mds-font-apps-heading-small-bold-line-height);
@@ -96,7 +104,7 @@ export const fontsStyles = css `
96
104
  text-transform: var(--mds-font-apps-heading-small-bold-text-case);
97
105
  }
98
106
 
99
- :host([type="heading-small-medium"])::part(text) {
107
+ :host([type="heading-small-medium"]) {
100
108
  font-size: var(--mds-font-apps-heading-small-medium-font-size);
101
109
  font-weight: var(--mds-font-apps-heading-small-medium-font-weight);
102
110
  line-height: var(--mds-font-apps-heading-small-medium-line-height);
@@ -104,7 +112,7 @@ export const fontsStyles = css `
104
112
  text-transform: var(--mds-font-apps-heading-small-medium-text-case);
105
113
  }
106
114
 
107
- :host([type="heading-small-regular"])::part(text) {
115
+ :host([type="heading-small-regular"]) {
108
116
  font-size: var(--mds-font-apps-heading-small-regular-font-size);
109
117
  font-weight: var(--mds-font-apps-heading-small-regular-font-weight);
110
118
  line-height: var(--mds-font-apps-heading-small-regular-line-height);
@@ -112,7 +120,7 @@ export const fontsStyles = css `
112
120
  text-transform: var(--mds-font-apps-heading-small-regular-text-case);
113
121
  }
114
122
 
115
- :host([type="body-large-bold"])::part(text) {
123
+ :host([type="body-large-bold"]) {
116
124
  font-size: var(--mds-font-apps-body-large-bold-font-size);
117
125
  font-weight: var(--mds-font-apps-body-large-bold-font-weight);
118
126
  line-height: var(--mds-font-apps-body-large-bold-line-height);
@@ -120,7 +128,7 @@ export const fontsStyles = css `
120
128
  text-transform: var(--mds-font-apps-body-large-bold-text-case);
121
129
  }
122
130
 
123
- :host([type="body-large-medium-underline"])::part(text) {
131
+ :host([type="body-large-medium-underline"]) {
124
132
  font-size: var(--mds-font-apps-body-large-medium-underline-font-size);
125
133
  font-weight: var(--mds-font-apps-body-large-medium-underline-font-weight);
126
134
  line-height: var(--mds-font-apps-body-large-medium-underline-line-height);
@@ -128,7 +136,7 @@ export const fontsStyles = css `
128
136
  text-transform: var(--mds-font-apps-body-large-medium-underline-text-case);
129
137
  }
130
138
 
131
- :host([type="body-large-medium"])::part(text) {
139
+ :host([type="body-large-medium"]) {
132
140
  font-size: var(--mds-font-apps-body-large-medium-font-size);
133
141
  font-weight: var(--mds-font-apps-body-large-medium-font-weight);
134
142
  line-height: var(--mds-font-apps-body-large-medium-line-height);
@@ -136,7 +144,7 @@ export const fontsStyles = css `
136
144
  text-transform: var(--mds-font-apps-body-large-medium-text-case);
137
145
  }
138
146
 
139
- :host([type="body-large-regular-underline"])::part(text) {
147
+ :host([type="body-large-regular-underline"]) {
140
148
  font-size: var(--mds-font-apps-body-large-regular-underline-font-size);
141
149
  font-weight: var(--mds-font-apps-body-large-regular-underline-font-weight);
142
150
  line-height: var(--mds-font-apps-body-large-regular-underline-line-height);
@@ -144,7 +152,7 @@ export const fontsStyles = css `
144
152
  text-transform: var(--mds-font-apps-body-large-regular-underline-text-case);
145
153
  }
146
154
 
147
- :host([type="body-large-regular"])::part(text) {
155
+ :host([type="body-large-regular"]) {
148
156
  font-size: var(--mds-font-apps-body-large-regular-font-size);
149
157
  font-weight: var(--mds-font-apps-body-large-regular-font-weight);
150
158
  line-height: var(--mds-font-apps-body-large-regular-line-height);
@@ -152,7 +160,7 @@ export const fontsStyles = css `
152
160
  text-transform: var(--mds-font-apps-body-large-regular-text-case);
153
161
  }
154
162
 
155
- :host([type="body-midsize-bold"])::part(text) {
163
+ :host([type="body-midsize-bold"]) {
156
164
  font-size: var(--mds-font-apps-body-midsize-bold-font-size);
157
165
  font-weight: var(--mds-font-apps-body-midsize-bold-font-weight);
158
166
  line-height: var(--mds-font-apps-body-midsize-bold-line-height);
@@ -160,7 +168,7 @@ export const fontsStyles = css `
160
168
  text-transform: var(--mds-font-apps-body-midsize-bold-text-case);
161
169
  }
162
170
 
163
- :host([type="body-midsize-medium-underline"])::part(text) {
171
+ :host([type="body-midsize-medium-underline"]) {
164
172
  font-size: var(--mds-font-apps-body-midsize-medium-underline-font-size);
165
173
  font-weight: var(--mds-font-apps-body-midsize-medium-underline-font-weight);
166
174
  line-height: var(--mds-font-apps-body-midsize-medium-underline-line-height);
@@ -168,7 +176,7 @@ export const fontsStyles = css `
168
176
  text-transform: var(--mds-font-apps-body-midsize-medium-underline-text-case);
169
177
  }
170
178
 
171
- :host([type="body-midsize-medium"])::part(text) {
179
+ :host([type="body-midsize-medium"]) {
172
180
  font-size: var(--mds-font-apps-body-midsize-medium-font-size);
173
181
  font-weight: var(--mds-font-apps-body-midsize-medium-font-weight);
174
182
  line-height: var(--mds-font-apps-body-midsize-medium-line-height);
@@ -176,7 +184,7 @@ export const fontsStyles = css `
176
184
  text-transform: var(--mds-font-apps-body-midsize-medium-text-case);
177
185
  }
178
186
 
179
- :host([type="body-midsize-regular-underline"])::part(text) {
187
+ :host([type="body-midsize-regular-underline"]) {
180
188
  font-size: var(--mds-font-apps-body-midsize-regular-underline-font-size);
181
189
  font-weight: var(--mds-font-apps-body-midsize-regular-underline-font-weight);
182
190
  line-height: var(--mds-font-apps-body-midsize-regular-underline-line-height);
@@ -184,7 +192,7 @@ export const fontsStyles = css `
184
192
  text-transform: var(--mds-font-apps-body-midsize-regular-underline-text-case);
185
193
  }
186
194
 
187
- :host([type="body-midsize-regular"])::part(text) {
195
+ :host([type="body-midsize-regular"]) {
188
196
  font-size: var(--mds-font-apps-body-midsize-regular-font-size);
189
197
  font-weight: var(--mds-font-apps-body-midsize-regular-font-weight);
190
198
  line-height: var(--mds-font-apps-body-midsize-regular-line-height);
@@ -192,7 +200,7 @@ export const fontsStyles = css `
192
200
  text-transform: var(--mds-font-apps-body-midsize-regular-text-case);
193
201
  }
194
202
 
195
- :host([type="body-small-bold"])::part(text) {
203
+ :host([type="body-small-bold"]) {
196
204
  font-size: var(--mds-font-apps-body-small-bold-font-size);
197
205
  font-weight: var(--mds-font-apps-body-small-bold-font-weight);
198
206
  line-height: var(--mds-font-apps-body-small-bold-line-height);
@@ -200,7 +208,7 @@ export const fontsStyles = css `
200
208
  text-transform: var(--mds-font-apps-body-small-bold-text-case);
201
209
  }
202
210
 
203
- :host([type="body-small-medium-underline"])::part(text) {
211
+ :host([type="body-small-medium-underline"]) {
204
212
  font-size: var(--mds-font-apps-body-small-medium-underline-font-size);
205
213
  font-weight: var(--mds-font-apps-body-small-medium-underline-font-weight);
206
214
  line-height: var(--mds-font-apps-body-small-medium-underline-line-height);
@@ -208,7 +216,7 @@ export const fontsStyles = css `
208
216
  text-transform: var(--mds-font-apps-body-small-medium-underline-text-case);
209
217
  }
210
218
 
211
- :host([type="body-small-medium"])::part(text) {
219
+ :host([type="body-small-medium"]) {
212
220
  font-size: var(--mds-font-apps-body-small-medium-font-size);
213
221
  font-weight: var(--mds-font-apps-body-small-medium-font-weight);
214
222
  line-height: var(--mds-font-apps-body-small-medium-line-height);
@@ -216,7 +224,7 @@ export const fontsStyles = css `
216
224
  text-transform: var(--mds-font-apps-body-small-medium-text-case);
217
225
  }
218
226
 
219
- :host([type="body-small-regular-underline"])::part(text) {
227
+ :host([type="body-small-regular-underline"]) {
220
228
  font-size: var(--mds-font-apps-body-small-regular-underline-font-size);
221
229
  font-weight: var(--mds-font-apps-body-small-regular-underline-font-weight);
222
230
  line-height: var(--mds-font-apps-body-small-regular-underline-line-height);
@@ -224,7 +232,7 @@ export const fontsStyles = css `
224
232
  text-transform: var(--mds-font-apps-body-small-regular-underline-text-case);
225
233
  }
226
234
 
227
- :host([type="body-small-regular"])::part(text) {
235
+ :host([type="body-small-regular"]) {
228
236
  font-size: var(--mds-font-apps-body-small-regular-font-size);
229
237
  font-weight: var(--mds-font-apps-body-small-regular-font-weight);
230
238
  line-height: var(--mds-font-apps-body-small-regular-line-height);
package/package.json CHANGED
@@ -37,5 +37,5 @@
37
37
  "@momentum-design/icons": "*",
38
38
  "@momentum-design/tokens": "*"
39
39
  },
40
- "version": "0.8.0"
40
+ "version": "0.8.1"
41
41
  }