design-system-silkhaus 2.14.0-beta.tabbed-menu.5 → 2.14.0-beta.tabbed-menu.7

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 (7) hide show
  1. package/dist/index.cjs +40 -40
  2. package/dist/index.js +5727 -5750
  3. package/dist/style.css +1 -1
  4. package/lib/base.scss +13 -0
  5. package/lib/utilities.scss +1167 -0
  6. package/lib/variables.scss +331 -0
  7. package/package.json +16 -5
package/lib/variables.scss ADDED
@@ -0,0 +1,331 @@
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
+ }
package/package.json CHANGED
@@ -1,13 +1,16 @@
1
1
  {
2
2
  "name": "design-system-silkhaus",
3
3
  "private": false,
4
- "version": "2.14.0-beta.tabbed-menu.5",
4
+ "version": "2.14.0-beta.tabbed-menu.7",
5
5
  "description": "Design system for Silkhaus built with Typescript, React and Tailwind",
6
6
  "author": "silkhaus",
7
7
  "license": "MIT",
8
8
  "type": "module",
9
9
  "files": [
10
- "dist"
10
+ "dist",
11
+ "lib/base.scss",
12
+ "lib/utilities.scss",
13
+ "lib/variables.scss"
11
14
  ],
12
15
  "sideEffects": [
13
16
  "**/*.css"
@@ -30,9 +33,17 @@
30
33
  "import": "./dist/style.css",
31
34
  "require": "./dist/style.css"
32
35
  },
33
- "./tailwind-config": {
34
- "import": "./dist/tailwind.config.js",
35
- "require": "./dist/tailwind.config.js"
36
+ "./base-scss": {
37
+ "import": "./lib/base.scss",
38
+ "require": "./lib/base.scss"
39
+ },
40
+ "./utilities-scss": {
41
+ "import": "./lib/utilities.scss",
42
+ "require": "./lib/utilities.scss"
43
+ },
44
+ "./variables-scss": {
45
+ "import": "./lib/variables.scss",
46
+ "require": "./lib/variables.scss"
36
47
  }
37
48
  },
38
49
  "scripts": {