design-system-silkhaus 2.14.0-beta.tabbed-menu.9 → 2.14.0-beta.tabbed-menu.10

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 (5) hide show
  1. package/dist/style.css +1 -1
  2. package/package.json +5 -16
  3. package/lib/base.scss +0 -13
  4. package/lib/utilities.scss +0 -1167
  5. package/lib/variables.scss +0 -331
package/lib/variables.scss DELETED
@@ -1,331 +0,0 @@
1
- :root {
2
- /* COLORS */
3
-
4
- --white: #fff;
5
- --black: #000;
6
-
7
- --text-primary: #000;
8
- --text-secondary: rgba(0, 0, 0, 0.5);
9
- --text-tertiary: rgba(0, 0, 0, 0.25);
10
- --text-secondary-dark: rgba(255, 255, 255, 0.5);
11
- --text-tertiary-dark: rgba(255, 255, 255, 0.25);
12
- --text-secondary-plus-dark: rgba(255, 255, 255, 0.8);
13
- --text-primary-dark: #fff;
14
-
15
- --fills-black: #000;
16
- --fills-white: #fff;
17
- --fills-secondary: rgba(0, 0, 0, 0.5);
18
- --fills-terciary: rgba(0, 0, 0, 0.25);
19
- --fills-quadrutery: rgba(0, 0, 0, 0.1);
20
- --fills-quintiary: rgba(0, 0, 0, 0.05);
21
-
22
- --accent-eggplant-100: #542686;
23
- --accent-eggplant-50: rgba(84, 38, 134, 0.5);
24
- --accent-eggplant-20: rgba(84, 38, 134, 0.2);
25
- --accent-eggplant-5: rgba(84, 38, 134, 0.05);
26
-
27
- --accent-eggplant-highlight: #6d36a9;
28
- --accent-eggplant-darkened: #341a53;
29
-
30
- --accent-mustard-100: #ffe267;
31
- --accent-mustard-50: rgba(255, 226, 103, 0.5);
32
- --accent-mustard-25: rgba(255, 226, 103, 0.25);
33
-
34
- --accent-teal-100: #25afa5;
35
- --accent-teal-50: rgba(37, 175, 165, 0.5);
36
- --accent-teal-25: rgba(37, 175, 165, 0.25);
37
-
38
- --accent-carrot-100: #ff813c;
39
- --accent-carrot-50: rgba(255, 129, 60, 0.5);
40
- --accent-carrot-25: rgba(255, 129, 60, 0.25);
41
-
42
- --system-red: #ff453a;
43
- --system-green: #28cd41;
44
-
45
- /* SHADOW */
46
- --shadow-default: 0 4px 4px 0 rgba(0, 0, 0, 0.04);
47
-
48
- /* SPACING */
49
- --space-0: 0;
50
- --space-025: 2px;
51
- --space-050: 4px;
52
- --space-075: 6px;
53
- --space-100: 8px;
54
- --space-150: 12px;
55
- --space-200: 16px;
56
- --space-250: 20px;
57
- --space-300: 24px;
58
- --space-400: 32px;
59
- --space-500: 40px;
60
- --space-600: 48px;
61
- --space-800: 64px;
62
- --space-1000: 80px;
63
- --space-1200: 96px;
64
- --space-1600: 128px;
65
-
66
- /** Font family **/
67
- --font-family-default: 'Plus Jakarta Sans', sans-serif;
68
- --font-family-hero: 'DM Serif Display', sans-serif;
69
-
70
- /* Font weights */
71
- --font-weight-normal: 400;
72
- --font-weight-semibold: 600;
73
- --font-weight-bold: 700;
74
- --font-weight-bolder: bolder;
75
- --font-weight-lighter: lighter;
76
-
77
- /* xLarge */
78
- --xLargeHero-TitleRegular-font-size: 42px;
79
- --xLargeHero-TitleRegular-line-height: 38px;
80
- --xLargeHero-TitleRegular-font-weight: var(--font-weight-normal);
81
-
82
- --xLargeHero-TitleEmphasized-font-size: 36px;
83
- --xLargeHero-TitleEmphasized-line-height: 43px;
84
- --xLargeHero-TitleEmphasized-font-weight: var(--font-weight-semibold);
85
-
86
- --xLargeTitle-1Regular-font-size: 30px;
87
- --xLargeTitle-1Regular-line-height: 36px;
88
- --xLargeTitle-1Regular-font-weight: var(--font-weight-normal);
89
-
90
- --xLargeTitle-1Emphasized-font-size: 30px;
91
- --xLargeTitle-1Emphasized-line-height: 36px;
92
- --xLargeTitle-1Emphasized-font-weight: var(--font-weight-semibold);
93
-
94
- --xLargeTitle-2Regular-font-size: 24px;
95
- --xLargeTitle-2Regular-line-height: 30px;
96
- --xLargeTitle-2Regular-font-weight: var(--font-weight-normal);
97
-
98
- --xLargeTitle-2Emphasized-font-size: 24px;
99
- --xLargeTitle-2Emphasized-line-height: 30px;
100
- --xLargeTitle-2Emphasized-font-weight: var(--font-weight-semibold);
101
-
102
- --xLargeTitle-3Regular-font-size: 22px;
103
- --xLargeTitle-3Regular-line-height: 28px;
104
-
105
- --xLargeBody-1Regular-font-size: 18px;
106
- --xLargeBody-1Regular-line-height: 28px;
107
- --xLargeBody-1Regular-font-weight: var(--font-weight-normal);
108
-
109
- --xLargeBody-2Regular-font-size: 17px;
110
- --xLargeBody-2Regular-line-height: 24px;
111
- --xLargeBody-2Regular-font-weight: var(--font-weight-normal);
112
-
113
- --xLargeHeadLine-Regular-font-size: 19px;
114
- --xLargeHeadLine-Regular-line-height: 24px;
115
-
116
- --xLargeCallout-Regular-font-size: 18px;
117
- --xLargeCallout-Regular-line-height: 23px;
118
-
119
- /* Large */
120
- --LargeHero-TitleRegular-font-size: 40px;
121
- --LargeHero-TitleRegular-line-height: 38px;
122
- --LargeHero-TitleRegular-font-weight: var(--font-weight-normal);
123
-
124
- --LargeHero-TitleEmphasized-font-size: 34px;
125
- --LargeHero-TitleEmphasized-line-height: 42px;
126
- --LargeHero-TitleEmphasized-font-weight: var(--font-weight-semibold);
127
-
128
- --LargeTitle-1Regular-font-size: 28px;
129
- --LargeTitle-1Regular-line-height: 36px;
130
- --LargeTitle-1Regular-font-weight: var(--font-weight-normal);
131
-
132
- --LargeTitle-1Emphasized-font-size: 28px;
133
- --LargeTitle-1Emphasized-line-height: 36px;
134
- --LargeTitle-1Emphasized-font-weight: var(--font-weight-semibold);
135
-
136
- --LargeTitle-2Regular-font-size: 22px;
137
- --LargeTitle-2Regular-line-height: 28px;
138
- --LargeTitle-2Regular-font-weight: var(--font-weight-normal);
139
-
140
- --LargeTitle-2Emphasized-font-size: 22px;
141
- --LargeTitle-2Emphasized-line-height: 28px;
142
- --LargeTitle-2Emphasized-font-weight: var(--font-weight-semibold);
143
-
144
- --LargeTitle-3Regular-font-size: 20px;
145
- --LargeTitle-3Regular-line-height: 25px;
146
-
147
- --LargeBody-1Regular-font-size: 18px;
148
- --LargeBody-1Regular-line-height: 28px;
149
- --LargeBody-1Regular-font-weight: var(--font-weight-normal);
150
-
151
- --LargeBody-2Regular-font-size: 17px;
152
- --LargeBody-2Regular-line-height: 24px;
153
- --LargeBody-2Regular-font-weight: var(--font-weight-normal);
154
-
155
- --LargeHeadLine-Regular-font-size: 17px;
156
- --LargeHeadLine-Regular-line-height: 22px;
157
-
158
- --LargeCallout-Regular-font-size: 16px;
159
- --LargeCallout-Regular-line-height: 21px;
160
-
161
- /* Medium */
162
- --MediumHero-TitleRegular-font-size: 39px;
163
- --MediumHero-TitleRegular-line-height: 42px;
164
- --MediumHero-TitleRegular-font-weight: var(--font-weight-normal);
165
-
166
- --MediumHero-TitleEmphasized-font-size: 33px;
167
- --MediumHero-TitleEmphasized-line-height: 44px;
168
- --MediumHero-TitleEmphasized-font-weight: var(--font-weight-semibold);
169
-
170
- --MediumTitle-1Regular-font-size: 27px;
171
- --MediumTitle-1Regular-line-height: 37px;
172
- --MediumTitle-1Regular-font-weight: var(--font-weight-normal);
173
-
174
- --MediumTitle-1Emphasized-font-size: 27px;
175
- --MediumTitle-1Emphasized-line-height: 37px;
176
- --MediumTitle-1Emphasized-font-weight: var(--font-weight-semibold);
177
-
178
- --MediumTitle-2Regular-font-size: 21px;
179
- --MediumTitle-2Regular-line-height: 32px;
180
- --MediumTitle-2Regular-font-weight: var(--font-weight-normal);
181
-
182
- --MediumTitle-2Emphasized-font-size: 21px;
183
- --MediumTitle-2Emphasized-line-height: 32px;
184
- --MediumTitle-2Emphasized-font-weight: var(--font-weight-semibold);
185
-
186
- --MediumTitle-2Emphasized-font-size: 21px;
187
- --MediumTitle-2Emphasized-line-height: 32px;
188
- --MediumTitle-2Emphasized-font-weight: var(--font-weight-semibold);
189
-
190
- --MediumTitle-3Regular-font-size: 19px;
191
- --MediumTitle-3Regular-line-height: 28px;
192
-
193
- --MediumHeadLine-Regular-font-size: 16px;
194
- --MediumHeadLine-Regular-line-height: 25px;
195
-
196
- --MediumSubHead-Regular-font-size: 14px;
197
- --MediumSubHead-Regular-line-height: 23px;
198
- --MediumSubHead-Regular-font-weight: var(--font-weight-normal);
199
-
200
- --MediumCaption-1Regular-font-size: 11px;
201
- --MediumCaption-1Regular-line-height: 17px;
202
- --MediumCaption-1Regular-font-weight: var(--font-weight-normal);
203
-
204
- --MediumCaption-2Regular-font-size: 11px;
205
- --MediumCaption-2Regular-line-height: 17px;
206
-
207
- --MediumBody-Regular-font-size: 16px;
208
- --MediumBody-Regular-line-height: 25px;
209
-
210
- --MediumBody-Emphasized-font-size: 16px;
211
- --MediumBody-Emphasized-line-height: 25px;
212
- --MediumBody-Emphasized-font-weight: var(--font-weight-semibold);
213
-
214
- --MediumBody-1Regular-font-size: 18px;
215
- --MediumBody-1Regular-line-height: 28px;
216
- --MediumBody-1Regular-font-weight: var(--font-weight-normal);
217
-
218
- --MediumBody-2Regular-font-size: 17px;
219
- --MediumBody-2Regular-line-height: 24px;
220
- --MediumBody-2Regular-font-weight: var(--font-weight-normal);
221
-
222
- --MediumFootnote-Regular-font-size: 12px;
223
- --MediumFootnote-Regular-line-height: 20px;
224
- --MediumFootnote-Regular-font-weight: var(--font-weight-normal);
225
-
226
- --MediumCallout-Regular-font-size: 15px;
227
- --MediumCallout-Regular-line-height: 20px;
228
-
229
- /* Small */
230
- --SmallHero-TitleRegular-font-size: 38px;
231
- --SmallHero-TitleRegular-line-height: 44px;
232
- --SmallHero-TitleRegular-font-weight: var(--font-weight-normal);
233
-
234
- --SmallHero-TitleEmphasized-font-size: 32px;
235
- --SmallHero-TitleEmphasized-line-height: 43px;
236
- --SmallHero-TitleEmphasized-font-weight: var(--font-weight-semibold);
237
-
238
- --SmallTitle-1Regular-font-size: 26px;
239
- --SmallTitle-1Regular-line-height: 36px;
240
- --SmallTitle-1Regular-font-weight: var(--font-weight-normal);
241
-
242
- --SmallTitle-1Emphasized-font-size: 26px;
243
- --SmallTitle-1Emphasized-line-height: 36px;
244
- --SmallTitle-1Emphasized-font-weight: var(--font-weight-semibold);
245
-
246
- --SmallTitle-2Regular-font-size: 20px;
247
- --SmallTitle-2Regular-line-height: 28px;
248
- --SmallTitle-2Regular-font-weight: var(--font-weight-normal);
249
-
250
- --SmallTitle-2Emphasized-font-size: 20px;
251
- --SmallTitle-2Emphasized-line-height: 28px;
252
- --SmallTitle-2Emphasized-font-weight: var(--font-weight-semibold);
253
-
254
- --SmallTitle-3Regular-font-size: 18px;
255
- --SmallTitle-3Regular-line-height: 27px;
256
-
257
- --SmallBody-1Regular-font-size: 18px;
258
- --SmallBody-1Regular-line-height: 28px;
259
- --SmallBody-1Regular-font-weight: var(--font-weight-normal);
260
-
261
- --SmallBody-2Regular-font-size: 17px;
262
- --SmallBody-2Regular-line-height: 24px;
263
- --SmallBody-2Regular-font-weight: var(--font-weight-normal);
264
-
265
- --SmallSubhead-Regular-font-size: 13px;
266
- --SmallSubhead-Regular-line-height: 22px;
267
-
268
- --SmallCaption-1Regular-font-size: 11px;
269
- --SmallCaption-1Regular-line-height: 17px;
270
-
271
- --SmallHeadLine-Regular-font-size: 15px;
272
- --SmallHeadLine-Regular-line-height: 24px;
273
-
274
- --SmallCallout-Regular-font-size: 14px;
275
- --SmallCallout-Regular-line-height: 23px;
276
-
277
- /* xSmall */
278
- --xSmallHero-TitleRegular-font-size: 37px;
279
- --xSmallHero-TitleRegular-line-height: 38px;
280
- --xSmallHero-TitleRegular-font-weight: var(--font-weight-normal);
281
-
282
- --xSmallHero-TitleEmphasized-font-size: 31px;
283
- --xSmallHero-TitleEmphasized-line-height: 38px;
284
- --xSmallHero-TitleEmphasized-font-weight: var(--font-weight-semibold);
285
-
286
- --xSmallTitle-1Regular-font-size: 25px;
287
- --xSmallTitle-1Regular-line-height: 31px;
288
- --xSmallTitle-1Regular-font-weight: var(--font-weight-normal);
289
-
290
- --xSmallTitle-1Emphasized-font-size: 25px;
291
- --xSmallTitle-1Emphasized-line-height: 31px;
292
- --xSmallTitle-1Emphasized-font-weight: var(--font-weight-semibold);
293
-
294
- --xSmallTitle-2Regular-font-size: 19px;
295
- --xSmallTitle-2Regular-line-height: 24px;
296
- --xSmallTitle-2Regular-font-weight: var(--font-weight-normal);
297
-
298
- --xSmallTitle-2Emphasized-font-size: 19px;
299
- --xSmallTitle-2Emphasized-line-height: 24px;
300
- --xSmallTitle-2Emphasized-font-weight: var(--font-weight-semibold);
301
-
302
- --xSmallTitle-3Regular-font-size: 17px;
303
- --xSmallTitle-3Regular-line-height: 23px;
304
-
305
- --xSmallBody-Regular-font-size: 14px;
306
- --xSmallBody-Regular-line-height: 20px;
307
-
308
- --xSmallBody-1Regular-font-size: 18px;
309
- --xSmallBody-1Regular-line-height: 28px;
310
- --xSmallBody-1Regular-font-weight: var(--font-weight-normal);
311
-
312
- --xSmallBody-2Regular-font-size: 17px;
313
- --xSmallBody-2Regular-line-height: 24px;
314
- --xSmallBody-2Regular-font-weight: var(--font-weight-normal);
315
-
316
- --xSmallSubhead-Regular-font-size: 12px;
317
- --xSmallSubhead-Regular-line-height: 18px;
318
-
319
- --xSmallCallout-Regular-font-size: 13px;
320
- --xSmallCallout-Regular-line-height: 19px;
321
-
322
- --xSmallCaption-1Regular-font-size: 11px;
323
- --xSmallCaption-1Regular-line-height: 17px;
324
-
325
- --xSmallHeadLine-Regular-font-size: 14px;
326
- --xSmallHeadLine-Regular-line-height: 20px;
327
-
328
- --callout-Regular-font-size: 11.67px;
329
- --callout-Regular-line-height: 23.34px;
330
- --callout-Regular-font-weight: var(--font-weight-normal);
331
- }