@volvo-cars/css 0.1.0
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.
- package/LICENSE +1 -0
- package/README.md +357 -0
- package/dist/chunk-Q6P47KLU.js +2 -0
- package/dist/chunk-Q6P47KLU.js.map +1 -0
- package/dist/clsx.d.ts +8 -0
- package/dist/font-face.css +1 -0
- package/dist/styles.cjs +2 -0
- package/dist/styles.cjs.map +1 -0
- package/dist/styles.css +1 -0
- package/dist/styles.d.ts +27 -0
- package/dist/styles.js +2 -0
- package/dist/styles.js.map +1 -0
- package/dist/to-kebab-case.d.ts +1 -0
- package/dist/tokens.cjs +2 -0
- package/dist/tokens.cjs.map +1 -0
- package/dist/tokens.css +1 -0
- package/dist/tokens.d.ts +73 -0
- package/dist/tokens.js +2 -0
- package/dist/tokens.js.map +1 -0
- package/dist/utils.cjs +2 -0
- package/dist/utils.cjs.map +1 -0
- package/dist/utils.d.ts +1 -0
- package/dist/utils.js +2 -0
- package/dist/utils.js.map +1 -0
- package/package.json +102 -0
package/LICENSE
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
Copyright Volvo Car Corporation, All Rights Reserved.
|
package/README.md
ADDED
|
@@ -0,0 +1,357 @@
|
|
|
1
|
+
# @volvo-cars/css
|
|
2
|
+
|
|
3
|
+
Shared CSS for the Volvo Cars Web Design System.
|
|
4
|
+
|
|
5
|
+
Highly generic styles that are needed for almost all components bundled into a small stylesheet to be included globally in your application. These default styles will let you write fewer custom styles without adding a lot of unused styles to every page.
|
|
6
|
+
|
|
7
|
+
The stylesheet is scoped with a parent selector, meaning that it will only affect children of a wrapper with a versioned class name. All element selectors have 0 specificity, meaning that any CSS from the application overrides it regardless of the order of styles. Other selectors have a maximum of 10 (0,1,0) in specificity (20 for pseudo states) and are easily overrideable with class name selectors in application code.
|
|
8
|
+
|
|
9
|
+
Include the styles in your application by loading the following CSS files, for example in your `_app` file in Next.js:
|
|
10
|
+
|
|
11
|
+
```js
|
|
12
|
+
import '@volvo-cars/css/font-face.css';
|
|
13
|
+
import '@volvo-cars/css/tokens.css';
|
|
14
|
+
import '@volvo-cars/css/styles.css';
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
In an upcoming version the stylesheet loading will inline the `@font-face` rules and load other styles from the shared CDN.
|
|
18
|
+
|
|
19
|
+
**Scoping Example**
|
|
20
|
+
|
|
21
|
+
```html
|
|
22
|
+
<style>
|
|
23
|
+
h1 {
|
|
24
|
+
font-size: 10px;
|
|
25
|
+
}
|
|
26
|
+
</style>
|
|
27
|
+
|
|
28
|
+
<h1>10px</h1>
|
|
29
|
+
<h2>Default browser styles</h2>
|
|
30
|
+
<div class="volvo_v0">
|
|
31
|
+
<h1>10px</h1>
|
|
32
|
+
<h1 class="heading-1">Design system styled heading</h1>
|
|
33
|
+
</div>
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
## TypeScript
|
|
37
|
+
|
|
38
|
+
As a convenience for TypeScript developers all class names and CSS variables are exported as JavaScript modules with TypeScript interfaces.
|
|
39
|
+
|
|
40
|
+
```ts
|
|
41
|
+
import vss from '@volvo-cars/css/styles';
|
|
42
|
+
|
|
43
|
+
console.assert(vss.body14 === 'body-14');
|
|
44
|
+
console.assert(vss.heading1 === 'heading-1');
|
|
45
|
+
|
|
46
|
+
document.body.classList.add(vss.body14);
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
```ts
|
|
50
|
+
import vtokens from '@volvo-cars/css/tokens';
|
|
51
|
+
|
|
52
|
+
console.assert(vtokens.fontHeading1Size === 'var(--font-heading-1-size)');
|
|
53
|
+
|
|
54
|
+
document.body.style.font = vtokens.font16;
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
To merge or apply class names conditionally you can use the `clsx` utility.
|
|
58
|
+
|
|
59
|
+
```tsx
|
|
60
|
+
import { clsx } from '@volvo-cars/css/utils';
|
|
61
|
+
import vss from '@volvo-cars/css/styles';
|
|
62
|
+
|
|
63
|
+
<button
|
|
64
|
+
className={clsx(vss.fontBold, isActive && vss.textPrimary, 'my-class-name')}
|
|
65
|
+
>
|
|
66
|
+
Button
|
|
67
|
+
</button>;
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
## Dark mode
|
|
71
|
+
|
|
72
|
+
Light mode is the default color mode of the theme. Use the `data-color-mode` attribute to switch between `dark` and `light` color modes.
|
|
73
|
+
|
|
74
|
+
```html
|
|
75
|
+
<div class="volvo_v0">
|
|
76
|
+
<p>Light mode</p>
|
|
77
|
+
<div data-color-mode="dark">
|
|
78
|
+
<p>Dark mode</p>
|
|
79
|
+
</div>
|
|
80
|
+
</div>
|
|
81
|
+
<html class="volvo_v0" data-color-mode="dark">
|
|
82
|
+
<p>Dark mode</p>
|
|
83
|
+
<div data-color-mode="light">
|
|
84
|
+
<p>Light mode</p>
|
|
85
|
+
</div>
|
|
86
|
+
</div>
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
## Typography
|
|
90
|
+
|
|
91
|
+
Typography class names use the following naming convention:
|
|
92
|
+
|
|
93
|
+
`.{category}-{variant}`
|
|
94
|
+
|
|
95
|
+
**Category** is one of `heading`, `statement`, `title`, `body` and `micro`.
|
|
96
|
+
**Variant** is a name matching the size in pixels or describes the use case (`1-3`, `signature`, etc).
|
|
97
|
+
|
|
98
|
+
### Headings & Statements
|
|
99
|
+
|
|
100
|
+
Heading and Statement font sizes are fluid, with a smaller font-size on smaller viewports.
|
|
101
|
+
|
|
102
|
+
| Class name | Element | Font |
|
|
103
|
+
| --------------------- | ------- | ------------------------------------------- |
|
|
104
|
+
| `heading-1` | `h1` | 32-40 (2rem-2.5rem), Volvo Novum Medium |
|
|
105
|
+
| `heading-2` | `h2` | 24-32 (1.5rem-2rem), Volvo Novum Medium |
|
|
106
|
+
| `heading-3` | `h3` | 24-32 (1.5rem-2rem), Volvo Novum Semi-Light |
|
|
107
|
+
| `statement-1` | | 72-96 (4.5rem-6rem), Volvo Novum Medium |
|
|
108
|
+
| `statement-2` | | 56-72 (3.5rem-4.5rem), Volvo Novum Medium |
|
|
109
|
+
| `statement-3` | | 48-56 (3rem-3.5rem), Volvo Novum Medium |
|
|
110
|
+
| `statement-signature` | | 40-72 (2.5rem-4.5rem), Volvo Broad |
|
|
111
|
+
|
|
112
|
+
Use a suitable semantic heading element and apply the class name matching the desired style.
|
|
113
|
+
|
|
114
|
+
```html example
|
|
115
|
+
<div>
|
|
116
|
+
<h1 className="heading-1">Heading 1</h1>
|
|
117
|
+
<h2 className="heading-2">Heading 2</h2>
|
|
118
|
+
<h3 className="heading-3">Heading 3</h3>
|
|
119
|
+
</div>
|
|
120
|
+
```
|
|
121
|
+
|
|
122
|
+
```html example
|
|
123
|
+
<div>
|
|
124
|
+
<h1 className="statement-1">Statement 1</h1>
|
|
125
|
+
<h2 className="statement-2">Statement 2</h2>
|
|
126
|
+
<h3 className="statement-3">Statement 3</h3>
|
|
127
|
+
<h1 className="statement-signature">Statement Signature</h1>
|
|
128
|
+
</div>
|
|
129
|
+
```
|
|
130
|
+
|
|
131
|
+
To disable the fluid font-size and fix the size, pass the `data-fluid-typography` attribute with values `min` / `max`.
|
|
132
|
+
|
|
133
|
+
```html live
|
|
134
|
+
<h2 class="heading-2" data-fluid-typography="min">
|
|
135
|
+
Heading 2 fixed to min size
|
|
136
|
+
</h2>
|
|
137
|
+
```
|
|
138
|
+
|
|
139
|
+
### Text Styles
|
|
140
|
+
|
|
141
|
+
| Class name | Element | |
|
|
142
|
+
| -------------------- | ------- | ------------------------------------------- |
|
|
143
|
+
| `title-24` | | 24 (1.5rem), Volvo Novum Semi-Light |
|
|
144
|
+
| `title-20` | | 20 (1.25rem), Volvo Novum Semi-Light |
|
|
145
|
+
| `body-16` | `:root` | 16 (1rem), Volvo Novum Semi-Light |
|
|
146
|
+
| `body-14` | | 14 (0.875rem), Volvo Novum Semi-Light |
|
|
147
|
+
| `micro` | `small` | 12 (0.75rem), Volvo Novum Semi-Light |
|
|
148
|
+
| `UNSTABLE_action-14` | | 14 (0.875rem), Uppercase Volvo Novum Medium |
|
|
149
|
+
| `UNSTABLE_tag-12` | | 12 (0.75rem), Uppercase Volvo Novum Medium |
|
|
150
|
+
|
|
151
|
+
```html example
|
|
152
|
+
<div>
|
|
153
|
+
<p className="title-24">Title 24</p>
|
|
154
|
+
<p className="title-20">Title 20</p>
|
|
155
|
+
<p className="body-16">Body 16</p>
|
|
156
|
+
<p className="body-16">Body 14</p>
|
|
157
|
+
<p className="micro">Micro</p>
|
|
158
|
+
<p className="UNSTABLE_action-14">Action 14</p>
|
|
159
|
+
<p className="UNSTABLE_tag-12">Tag 12</p>
|
|
160
|
+
</div>
|
|
161
|
+
```
|
|
162
|
+
|
|
163
|
+
### Links
|
|
164
|
+
|
|
165
|
+
| Class name | Element | Properties |
|
|
166
|
+
| ------------------------- | ------- | ---------------------------------------------------------------------------------- |
|
|
167
|
+
| `link-inline` | `a` | `text-decoration-line: underline;`<br />`color: var(--color-foreground-secondary)` |
|
|
168
|
+
| `UNSTABLE_link-secondary` | | `color: var(--color-foreground-primary)` |
|
|
169
|
+
|
|
170
|
+
```html example
|
|
171
|
+
<div>
|
|
172
|
+
<p><a href="#" className="link-inline">Link - inline</a></p>
|
|
173
|
+
<p><a href="#" className="UNSTABLE_link-secondary">Link - secondary</a></p>
|
|
174
|
+
</div>
|
|
175
|
+
```
|
|
176
|
+
|
|
177
|
+
### Text color
|
|
178
|
+
|
|
179
|
+
| Class name | Element | Properties |
|
|
180
|
+
| ------------------ | ------- | -------------------------------------------- |
|
|
181
|
+
| `text-primary` | | `color: var(--color-foreground-primary)` |
|
|
182
|
+
| `text-secondary` | | `color: var(--color-foreground-secondary)` |
|
|
183
|
+
| `text-accent-blue` | | `color: var(--color-foreground-accent-blue)` |
|
|
184
|
+
|
|
185
|
+
```html example
|
|
186
|
+
<div>
|
|
187
|
+
<p class="text-primary">Text color - primary</p>
|
|
188
|
+
<p class="text-secondary">Text color - secondary</p>
|
|
189
|
+
<p class="text-accent-blue">Text color - accent-blue</p>
|
|
190
|
+
</div>
|
|
191
|
+
```
|
|
192
|
+
|
|
193
|
+
### Lists
|
|
194
|
+
|
|
195
|
+
Makes `ul` and `ol` display as lists with bullets or numbers.
|
|
196
|
+
|
|
197
|
+
| Class name | Element | Properties |
|
|
198
|
+
| ---------- | ------- | --------------------------- |
|
|
199
|
+
| `list` | `ul` | `list-style-type: disc;` |
|
|
200
|
+
| `list` | `ol` | `list-style-type: decimal;` |
|
|
201
|
+
|
|
202
|
+
```html example
|
|
203
|
+
<div>
|
|
204
|
+
<ol>
|
|
205
|
+
<li>List item</li>
|
|
206
|
+
<li>List item</li>
|
|
207
|
+
</ol>
|
|
208
|
+
<ul>
|
|
209
|
+
<li>List item</li>
|
|
210
|
+
<li>List item</li>
|
|
211
|
+
</ul>
|
|
212
|
+
</div>
|
|
213
|
+
```
|
|
214
|
+
|
|
215
|
+
### Utility classes
|
|
216
|
+
|
|
217
|
+
| Class name | Element | Properties |
|
|
218
|
+
| ------------- | ------------- | ------------------ |
|
|
219
|
+
| `font-bold` | `b`, `strong` | `font-weight: 500` |
|
|
220
|
+
| `font-normal` | | `font-weight: 300` |
|
|
221
|
+
|
|
222
|
+
### Default elements
|
|
223
|
+
|
|
224
|
+
To simplify styling of body text, some elements will have default styles applied if they have no other class.
|
|
225
|
+
|
|
226
|
+
```html live
|
|
227
|
+
<div>
|
|
228
|
+
<h2>For a better future.</h2>
|
|
229
|
+
<p>
|
|
230
|
+
We want to provide you with the <a href="#">freedom to move</a> in a
|
|
231
|
+
personal, sustainable and safe way.
|
|
232
|
+
</p>
|
|
233
|
+
</div>
|
|
234
|
+
```
|
|
235
|
+
|
|
236
|
+
As soon as any class is added to the element, default styles no longer apply.
|
|
237
|
+
|
|
238
|
+
```html live
|
|
239
|
+
<div>
|
|
240
|
+
<h2 class="anything">For a better future.</h2>
|
|
241
|
+
<p>
|
|
242
|
+
We want to provide you with the
|
|
243
|
+
<a class="anything" href="#">freedom to move</a> in a personal, sustainable
|
|
244
|
+
and safe way.
|
|
245
|
+
</p>
|
|
246
|
+
</div>
|
|
247
|
+
```
|
|
248
|
+
|
|
249
|
+
You can either remove the custom class or add the corresponding element class name again together with your own class if you still want the styling.
|
|
250
|
+
|
|
251
|
+
```html live
|
|
252
|
+
<div>
|
|
253
|
+
<h2 class="anything heading-2">For a better future.</h2>
|
|
254
|
+
<p>
|
|
255
|
+
We want to provide you with the
|
|
256
|
+
<a class="anything link-inline" href="#">freedom to move</a> in a personal,
|
|
257
|
+
sustainable and safe way.
|
|
258
|
+
</p>
|
|
259
|
+
</div>
|
|
260
|
+
```
|
|
261
|
+
|
|
262
|
+
### Migrating from the `vcc-ui` `<Text>` component
|
|
263
|
+
|
|
264
|
+
| vcc-ui Text | @volvo-cars/css |
|
|
265
|
+
| -------------------------------------------- | ---------------------------------- |
|
|
266
|
+
| `<Text variant="yang">` | `<h1 class="statement-signature">` |
|
|
267
|
+
| `<Text variant="peary">` | `<h1 class="statement-3">` |
|
|
268
|
+
| `<Text variant="cook">` | `<h1>`, `<p class="heading-1">` |
|
|
269
|
+
| `<Text variant="ootah" subStyle="emphasis">` | `<h2>`, `<p class="heading-2">` |
|
|
270
|
+
| `<Text variant="ootah" subStyle="standard">` | `<h3>`, `<p class="heading-3">` |
|
|
271
|
+
| `<Text variant="hillary">` | `<p class="title-20">` |
|
|
272
|
+
| `<Text>`, `<Text variant="columbus">` | `<p>`, `<p class="body-16">` |
|
|
273
|
+
| `<Text variant="kelly">` | `<p class="body-14">` |
|
|
274
|
+
| `<Text variant="bates">` | `<small>`, `<p class="micro">` |
|
|
275
|
+
| `<Text variant="amundsen">` | `<p class="UNSTABLE_action-14">` |
|
|
276
|
+
|
|
277
|
+
**Example change**
|
|
278
|
+
|
|
279
|
+
```diff
|
|
280
|
+
-<Text variant="cook" as="h1">
|
|
281
|
+
+<h1 className="heading-1">
|
|
282
|
+
{title}
|
|
283
|
+
-</Text>
|
|
284
|
+
+</h1>
|
|
285
|
+
```
|
|
286
|
+
|
|
287
|
+
# Design Tokens
|
|
288
|
+
|
|
289
|
+
To be able to apply design system styles without changing the HTML, the design tokens are also delivered as CSS variables. If you only want the design tokens and not the styles, include only these files.
|
|
290
|
+
|
|
291
|
+
```js
|
|
292
|
+
import '@volvo-cars/css/font-face.css';
|
|
293
|
+
import '@volvo-cars/css/tokens.css';
|
|
294
|
+
```
|
|
295
|
+
|
|
296
|
+
Design token variable names consist of the following parts:
|
|
297
|
+
|
|
298
|
+
- **Type** is the main token group such as `color`, `font` or `size`. The names helps with namespacing tokens and with tooling: you can get autocomplete for all colors in your editor by typing `--color..`. Type is the only required part and all other parts vary depending on the type.
|
|
299
|
+
|
|
300
|
+
- **Category** is a category from a fixed list of categories per token type. Typical values are `feedback`, `ornament`, `heading`.
|
|
301
|
+
|
|
302
|
+
- **Property** to apply the token to, such as `background`, `foreground`, `ornament`, `lineheight` or `size`.
|
|
303
|
+
|
|
304
|
+
- **Variant** distinguishes alternative use cases. These can be abstract such as `primary`, `secondary` or enumerated choices of varying size or color such as `blue`, `green`, `14`.
|
|
305
|
+
|
|
306
|
+
Depending on the category, the name consists of different parts.
|
|
307
|
+
|
|
308
|
+
## Typography
|
|
309
|
+
|
|
310
|
+
Naming scheme: `--font-{category}-{variant}-{property}-{modifier}`
|
|
311
|
+
|
|
312
|
+
- **category** is one of `heading`, `statement`, `title` or none.
|
|
313
|
+
- **variant** distinguishes alternative use cases (`1-4`), size in pixels (`20`, `16`) or literal values (`sans`, `broad`).
|
|
314
|
+
- **property** is one of `size` or `lineheight`. If omitted refers to the `font` shorthand CSS property.
|
|
315
|
+
- **modifier** is a property suffix such as `min` or `max`.
|
|
316
|
+
|
|
317
|
+
**Font Family**
|
|
318
|
+
|
|
319
|
+
- `--font-sans-family` (Volvo Novum in supported locales as determined by `<html lang>`, otherwise fallback fonts)
|
|
320
|
+
- `--font-broad-family`
|
|
321
|
+
|
|
322
|
+
**Font Sizes**
|
|
323
|
+
|
|
324
|
+
- `--font-{12,14,16}-size`
|
|
325
|
+
- `--font-{12,14,16}-lineheight`
|
|
326
|
+
- `--font-{12,14,16}` (`font` shorthand with `font-weight: 300`)
|
|
327
|
+
- `--font-title-{20,24}-size`
|
|
328
|
+
- `--font-title-{20,24}-lineheight`
|
|
329
|
+
- `--font-title-{20,24}` (`font` shorthand with `font-weight: 300`)
|
|
330
|
+
- `--font-heading-{1-3}-size-min`
|
|
331
|
+
- `--font-heading-{1-3}-size-max`
|
|
332
|
+
- `--font-heading-{1-3}-size`
|
|
333
|
+
- `--font-heading-{1-3}-lineheight`
|
|
334
|
+
- `--font-heading-{1-3}`
|
|
335
|
+
- `--font-statement-{1-3,signature}-size-min`
|
|
336
|
+
- `--font-statement-{1-3,signature}-size-max`
|
|
337
|
+
- `--font-statement-{1-3,signature}-size`
|
|
338
|
+
- `--font-statement-{1-3,signature}-lineheight`
|
|
339
|
+
- `--font-statement-{1-3,signature}`
|
|
340
|
+
|
|
341
|
+
**Spacing**
|
|
342
|
+
|
|
343
|
+
Rem based spacing tokens for space between elements and components. Names correspond to pixel values at a 16px root font-size.
|
|
344
|
+
|
|
345
|
+
- `--space-4`
|
|
346
|
+
- `--space-8`
|
|
347
|
+
- `--space-12`
|
|
348
|
+
- `--space-16`
|
|
349
|
+
- `--space-20`
|
|
350
|
+
- `--space-24`
|
|
351
|
+
- `--space-32`
|
|
352
|
+
- `--space-40`
|
|
353
|
+
- `--space-48`
|
|
354
|
+
- `--space-64`
|
|
355
|
+
- `--space-80`
|
|
356
|
+
- `--space-96`
|
|
357
|
+
- `--space-128`
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/to-kebab-case.ts"],"sourcesContent":["export function toKebabCase(x: string) {\n return x\n .replace(/([0-9])([A-Z])/g, '$1-$2')\n .replace(/([a-z])([A-Z0-9])/g, '$1-$2')\n .toLowerCase();\n}\n"],"mappings":"AAAO,SAASA,EAAYC,EAAW,CACrC,OAAOA,EACJ,QAAQ,kBAAmB,OAAO,EAClC,QAAQ,qBAAsB,OAAO,EACrC,YAAY,CACjB","names":["toKebabCase","x"]}
|
package/dist/clsx.d.ts
ADDED
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
declare type ClassValue = ClassArray | ClassDictionary | string | number | null | boolean | undefined;
|
|
2
|
+
interface ClassDictionary {
|
|
3
|
+
[id: string]: unknown;
|
|
4
|
+
}
|
|
5
|
+
interface ClassArray extends Array<ClassValue> {
|
|
6
|
+
}
|
|
7
|
+
export declare function clsx(...classes: ClassValue[]): string;
|
|
8
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@font-face{font-display:swap;font-weight:300;unicode-range:U+370-3FF;src:url(https://www.volvocars.com/static/shared/fonts/volvo-novum/volvo-novum-greek-semi-light.woff2)format("woff2");font-family:Volvo Novum}@font-face{font-display:swap;font-weight:300;unicode-range:U+4??;src:url(https://www.volvocars.com/static/shared/fonts/volvo-novum/volvo-novum-cyrillic-semi-light.woff2)format("woff2");font-family:Volvo Novum}@font-face{font-display:swap;font-weight:300;src:url(https://www.volvocars.com/static/shared/fonts/volvo-novum/volvo-novum-semi-light.woff2)format("woff2");font-family:Volvo Novum}@font-face{font-display:swap;font-weight:300;font-style:italic;unicode-range:U+370-3FF;src:url(https://www.volvocars.com/static/shared/fonts/volvo-novum/volvo-novum-greek-semi-light-italic.woff2)format("woff2");font-family:Volvo Novum}@font-face{font-display:swap;font-weight:300;font-style:italic;unicode-range:U+4??;src:url(https://www.volvocars.com/static/shared/fonts/volvo-novum/volvo-novum-cyrillic-semi-light-italic.woff2)format("woff2");font-family:Volvo Novum}@font-face{font-display:swap;font-weight:300;font-style:italic;src:url(https://www.volvocars.com/static/shared/fonts/volvo-novum/volvo-novum-semi-light-italic.woff2)format("woff2");font-family:Volvo Novum}@font-face{font-display:swap;font-weight:500;unicode-range:U+370-3FF;src:url(https://www.volvocars.com/static/shared/fonts/volvo-novum/volvo-novum-greek-medium.woff2)format("woff2");font-family:Volvo Novum}@font-face{font-display:swap;font-weight:500;unicode-range:U+4??;src:url(https://www.volvocars.com/static/shared/fonts/volvo-novum/volvo-novum-cyrillic-medium.woff2)format("woff2");font-family:Volvo Novum}@font-face{font-display:swap;font-weight:500;src:url(https://www.volvocars.com/static/shared/fonts/volvo-novum/volvo-novum-medium.woff2)format("woff2");font-family:Volvo Novum}@font-face{font-display:swap;font-weight:500;font-style:italic;unicode-range:U+370-3FF;src:url(https://www.volvocars.com/static/shared/fonts/volvo-novum/volvo-novum-greek-medium-italic.woff2)format("woff2");font-family:Volvo Novum}@font-face{font-display:swap;font-weight:500;font-style:italic;unicode-range:U+4??;src:url(https://www.volvocars.com/static/shared/fonts/volvo-novum/volvo-novum-cyrillic-medium-italic.woff2)format("woff2");font-family:Volvo Novum}@font-face{font-display:swap;font-weight:500;font-style:italic;src:url(https://www.volvocars.com/static/shared/fonts/volvo-novum/volvo-novum-medium-italic.woff2)format("woff2");font-family:Volvo Novum}@font-face{font-display:swap;font-weight:400;unicode-range:U+4??;src:url(https://www.volvocars.com/static/shared/fonts/volvo-broad/volvo-broad-cyrillic.woff2)format("woff2");font-family:Volvo Broad}@font-face{font-display:swap;font-weight:400;unicode-range:U+370-3FF;src:url(https://www.volvocars.com/static/shared/fonts/volvo-broad/volvo-broad-greek.woff2)format("woff2");font-family:Volvo Broad}@font-face{font-display:swap;font-weight:400;unicode-range:U+20-36F,U+530-FB02;src:url(https://www.volvocars.com/static/shared/fonts/volvo-broad/volvo-broad-latin-rest.woff2)format("woff2");font-family:Volvo Broad}
|
package/dist/styles.cjs
ADDED
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
var s=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var l=Object.getOwnPropertyNames;var p=Object.prototype.hasOwnProperty;var f=(r,t)=>{for(var o in t)s(r,o,{get:t[o],enumerable:!0})},m=(r,t,o,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let e of l(t))!p.call(r,e)&&e!==o&&s(r,e,{get:()=>t[e],enumerable:!(n=c(t,e))||n.enumerable});return r};var u=r=>m(s({},"__esModule",{value:!0}),r);var b={};f(b,{default:()=>N});module.exports=u(b);var i="volvo_v0";function a(r){return r.replace(/([0-9])([A-Z])/g,"$1-$2").replace(/([a-z])([A-Z0-9])/g,"$1-$2").toLowerCase()}function g(r){return r.startsWith("UNSTABLE_")?"UNSTABLE_"+a(r.replace("UNSTABLE_","")):a(r)}var C=new Proxy(Object.create({root:i}),{get(r,t){return t in r?r[t]:g(t)}}),N=C;0&&(module.exports={});
|
|
2
|
+
//# sourceMappingURL=styles.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/styles.ts","../src/root-class-name.js","../src/to-kebab-case.ts"],"sourcesContent":["import { rootClassName } from './root-class-name';\nimport { toKebabCase } from './to-kebab-case';\n\nexport interface ClassNames {\n [key: string]: string;\n}\n\nfunction toClassName(key: string) {\n if (key.startsWith('UNSTABLE_')) {\n return 'UNSTABLE_' + toKebabCase(key.replace('UNSTABLE_', ''));\n }\n return toKebabCase(key);\n}\n\nconst vss = new Proxy(Object.create({ root: rootClassName }), {\n get(target, key: string) {\n if (key in target) {\n return target[key];\n }\n return toClassName(key);\n },\n});\n\nexport default vss;\n","export const rootClassName = 'volvo_v0';\n","export function toKebabCase(x: string) {\n return x\n .replace(/([0-9])([A-Z])/g, '$1-$2')\n .replace(/([a-z])([A-Z0-9])/g, '$1-$2')\n .toLowerCase();\n}\n"],"mappings":"4ZAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GCAO,IAAMI,EAAgB,WCAtB,SAASC,EAAYC,EAAW,CACrC,OAAOA,EACJ,QAAQ,kBAAmB,OAAO,EAClC,QAAQ,qBAAsB,OAAO,EACrC,YAAY,CACjB,CFEA,SAASC,EAAYC,EAAa,CAChC,OAAIA,EAAI,WAAW,WAAW,EACrB,YAAcC,EAAYD,EAAI,QAAQ,YAAa,EAAE,CAAC,EAExDC,EAAYD,CAAG,CACxB,CAEA,IAAME,EAAM,IAAI,MAAM,OAAO,OAAO,CAAE,KAAMC,CAAc,CAAC,EAAG,CAC5D,IAAIC,EAAQJ,EAAa,CACvB,OAAIA,KAAOI,EACFA,EAAOJ,GAETD,EAAYC,CAAG,CACxB,CACF,CAAC,EAEMK,EAAQH","names":["styles_exports","__export","styles_default","__toCommonJS","rootClassName","toKebabCase","x","toClassName","key","toKebabCase","vss","rootClassName","target","styles_default"]}
|
package/dist/styles.css
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
:where(.volvo_v0){font:var(--font-16)}:where(.volvo_v0) :where(button,input,optgroup,select,textarea,h1,h2,h3,h4,h5,h6,small){font:inherit}:where(.volvo_v0) :where(button,input,optgroup,select,label){line-height:1.3}:where(.volvo_v0) :is(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(.volvo_v0) [data-fluid-typography=min]{--_vcc7ec5de:0rem}:where(.volvo_v0) [data-fluid-typography=max]{--_vcc7ec5de:99rem}:where(.volvo_v0) .UNSTABLE_action-14{font-size:var(--font-14-size);line-height:var(--font-14-lineheight);letter-spacing:.02em}:where(.volvo_v0 small:not([class])),:where(.volvo_v0) :is(.UNSTABLE_tag-12,.micro){font-size:var(--font-12-size);line-height:var(--font-12-lineheight);letter-spacing:.02em}:where(.volvo_v0) :is(.UNSTABLE_tag-12,.UNSTABLE_action-14){text-transform:uppercase}:where(.volvo_v0) :is(.UNSTABLE_tag-12,.UNSTABLE_action-14),:where(.volvo_v0) .font-bold,:where(.volvo_v0) :where(b,strong){font-weight:500}:where(.volvo_v0) .font-normal{font-weight:300}:where(.volvo_v0 h1:not([class])),:where(.volvo_v0) .heading-1{font:var(--font-heading-1)}:where(.volvo_v0) .heading-1:where([data-fluid-typography]){font-size:clamp(var(--font-heading-1-size-min),var(--_vcc7ec5de,var(--font-heading-1-size)),var(--font-heading-1-size-max))}:where(.volvo_v0 h2:not([class])),:where(.volvo_v0) .heading-2{font:var(--font-heading-2)}:where(.volvo_v0) .heading-2:where([data-fluid-typography]){font-size:clamp(var(--font-heading-2-size-min),var(--_vcc7ec5de,var(--font-heading-2-size)),var(--font-heading-2-size-max))}:where(.volvo_v0 h3:not([class])),:where(.volvo_v0) .heading-3{font:var(--font-heading-3)}:where(.volvo_v0) .heading-3:where([data-fluid-typography]){font-size:clamp(var(--font-heading-3-size-min),var(--_vcc7ec5de,var(--font-heading-3-size)),var(--font-heading-3-size-max))}:where(.volvo_v0) .statement-1{font:var(--font-statement-1)}:where(.volvo_v0) .statement-1:where([data-fluid-typography]){font-size:clamp(var(--font-statement-1-size-min),var(--_vcc7ec5de),var(--font-statement-1-size-max))}:where(.volvo_v0) .statement-2{font:var(--font-statement-2)}:where(.volvo_v0) .statement-2:where([data-fluid-typography]){font-size:clamp(var(--font-statement-2-size-min),var(--_vcc7ec5de),var(--font-statement-2-size-max))}:where(.volvo_v0) .statement-3{font:var(--font-statement-3)}:where(.volvo_v0) .statement-3:where([data-fluid-typography]){font-size:clamp(var(--font-statement-3-size-min),var(--_vcc7ec5de),var(--font-statement-3-size-max))}:where(.volvo_v0) .statement-signature{font:var(--font-statement-signature);letter-spacing:.02em}:where(.volvo_v0) .statement-signature:where([data-fluid-typography]){font-size:clamp(var(--font-statement-signature-size-min),var(--_vcc7ec5de),var(--font-statement-signature-size-max))}:where(.volvo_v0) .title-24{font-size:var(--font-title-24-size);line-height:var(--font-title-24-lineheight)}:where(.volvo_v0) .title-20{font-size:var(--font-title-20-size);line-height:var(--font-title-20-lineheight)}:where(.volvo_v0) .body-16{font-size:var(--font-16-size);line-height:var(--font-16-lineheight)}:where(.volvo_v0) .body-14{font-size:var(--font-14-size);line-height:var(--font-14-lineheight)}:where(.volvo_v0) *,:where(.volvo_v0) :before,:where(.volvo_v0) :after{box-sizing:border-box}:where(.volvo_v0 body,body.volvo_v0){min-height:100vh;min-height:100dvh;margin:0}:where(.volvo_v0) :where(h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd,ol,ul,pre,input,button,textarea,select){margin:0}:where(.volvo_v0) :where(img,picture,video,canvas,svg){max-width:100%}:where(.volvo_v0) :where(ol,ul){padding:0;list-style:none}:where(.volvo_v0 ul).list,:where(.volvo_v0 ul:not([class])){padding-inline-start:var(--space-32);list-style-type:disc}:where(.volvo_v0 ol).list,:where(.volvo_v0 ol:not([class])){padding-inline-start:var(--space-32);list-style-type:decimal}:where(.volvo_v0) :where(button:not(:disabled),[role=button],[role=link]){cursor:pointer}:where(.volvo_v0 button){-webkit-appearance:button;appearance:button;padding:0}:where(textarea){resize:vertical}:where(.volvo_v0),:where(.volvo_v0 [data-color-mode]){color:var(--color-foreground-primary);color-scheme:light}:where(.volvo_v0[data-color-mode=dark],.volvo_v0 [data-color-mode=dark]){color-scheme:dark}:where(.volvo_v0 body,body.volvo_v0){background-color:var(--color-background-primary)}:where(.volvo_v0) *{border-style:solid;border-width:0}:where(.volvo_v0 :focus-visible){outline:2px solid var(--color-foreground-primary);outline-offset:2px}:where(.volvo_v0 button){background-color:#0000}:where(.volvo_v0 a){color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit;-webkit-text-decoration-skip-ink:auto;text-decoration-skip-ink:auto}:where(.volvo_v0 a[href]:not([class])),:where(.volvo_v0) :where(a[href],button,[role=link],[role=button]).link-inline{color:var(--color-foreground-secondary);-webkit-text-decoration-line:underline;text-decoration-line:underline}:where(.volvo_v0) :where(a[href],button,[role=link],[role=button]).UNSTABLE_link-secondary{color:var(--color-foreground-primary)}:where(.volvo_v0) .text-primary{color:var(--color-foreground-primary)}:where(.volvo_v0) .text-accent-blue{color:var(--color-foreground-accent-blue)}:where(.volvo_v0) .text-secondary{color:var(--color-foreground-secondary)}@media (hover:hover){:where(.volvo_v0 a[href]:not([class]):hover),:where(.volvo_v0) :where(a[href],button,[role=link],[role=button]).link-inline:hover{color:var(--color-foreground-primary);-webkit-text-decoration-line:none;text-decoration-line:none}:where(.volvo_v0) :where(a[href],button,[role=link],[role=button]).UNSTABLE_link-secondary:hover{color:var(--color-foreground-accent-blue)}}
|
package/dist/styles.d.ts
ADDED
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
export interface ClassNames {
|
|
2
|
+
readonly UNSTABLE_action14: 'UNSTABLE_action-14';
|
|
3
|
+
readonly UNSTABLE_linkSecondary: 'UNSTABLE_link-secondary';
|
|
4
|
+
readonly UNSTABLE_tag12: 'UNSTABLE_tag-12';
|
|
5
|
+
readonly body14: 'body-14';
|
|
6
|
+
readonly body16: 'body-16';
|
|
7
|
+
readonly fontBold: 'font-bold';
|
|
8
|
+
readonly fontNormal: 'font-normal';
|
|
9
|
+
readonly heading1: 'heading-1';
|
|
10
|
+
readonly heading2: 'heading-2';
|
|
11
|
+
readonly heading3: 'heading-3';
|
|
12
|
+
readonly linkInline: 'link-inline';
|
|
13
|
+
readonly list: 'list';
|
|
14
|
+
readonly micro: 'micro';
|
|
15
|
+
readonly root: 'root';
|
|
16
|
+
readonly statement1: 'statement-1';
|
|
17
|
+
readonly statement2: 'statement-2';
|
|
18
|
+
readonly statement3: 'statement-3';
|
|
19
|
+
readonly statementSignature: 'statement-signature';
|
|
20
|
+
readonly textAccentBlue: 'text-accent-blue';
|
|
21
|
+
readonly textPrimary: 'text-primary';
|
|
22
|
+
readonly textSecondary: 'text-secondary';
|
|
23
|
+
readonly title20: 'title-20';
|
|
24
|
+
readonly title24: 'title-24';
|
|
25
|
+
}
|
|
26
|
+
declare const vss: ClassNames;
|
|
27
|
+
export default vss;
|
package/dist/styles.js
ADDED
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{a as o}from"./chunk-Q6P47KLU.js";var s="volvo_v0";function e(t){return t.startsWith("UNSTABLE_")?"UNSTABLE_"+o(t.replace("UNSTABLE_","")):o(t)}var n=new Proxy(Object.create({root:s}),{get(t,r){return r in t?t[r]:e(r)}}),c=n;export{c as default};
|
|
2
|
+
//# sourceMappingURL=styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/root-class-name.js","../src/styles.ts"],"sourcesContent":["export const rootClassName = 'volvo_v0';\n","import { rootClassName } from './root-class-name';\nimport { toKebabCase } from './to-kebab-case';\n\nexport interface ClassNames {\n [key: string]: string;\n}\n\nfunction toClassName(key: string) {\n if (key.startsWith('UNSTABLE_')) {\n return 'UNSTABLE_' + toKebabCase(key.replace('UNSTABLE_', ''));\n }\n return toKebabCase(key);\n}\n\nconst vss = new Proxy(Object.create({ root: rootClassName }), {\n get(target, key: string) {\n if (key in target) {\n return target[key];\n }\n return toClassName(key);\n },\n});\n\nexport default vss;\n"],"mappings":"wCAAO,IAAMA,EAAgB,WCO7B,SAASC,EAAYC,EAAa,CAChC,OAAIA,EAAI,WAAW,WAAW,EACrB,YAAcC,EAAYD,EAAI,QAAQ,YAAa,EAAE,CAAC,EAExDC,EAAYD,CAAG,CACxB,CAEA,IAAME,EAAM,IAAI,MAAM,OAAO,OAAO,CAAE,KAAMC,CAAc,CAAC,EAAG,CAC5D,IAAIC,EAAQJ,EAAa,CACvB,OAAIA,KAAOI,EACFA,EAAOJ,GAETD,EAAYC,CAAG,CACxB,CACF,CAAC,EAEMK,EAAQH","names":["rootClassName","toClassName","key","toKebabCase","vss","rootClassName","target","styles_default"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function toKebabCase(x: string): string;
|
package/dist/tokens.cjs
ADDED
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
var o=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var c=Object.getOwnPropertyNames;var i=Object.prototype.hasOwnProperty;var p=(t,e)=>{for(var n in e)o(t,n,{get:e[n],enumerable:!0})},b=(t,e,n,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of c(e))!i.call(t,r)&&r!==n&&o(t,r,{get:()=>e[r],enumerable:!(a=g(e,r))||a.enumerable});return t};var l=t=>b(o({},"__esModule",{value:!0}),t);var f={};p(f,{default:()=>$});module.exports=l(f);function s(t){return t.replace(/([0-9])([A-Z])/g,"$1-$2").replace(/([a-z])([A-Z0-9])/g,"$1-$2").toLowerCase()}var u=new Proxy(Object.create(null),{get(t,e){return`var(--${s(e)})`}}),$=u;0&&(module.exports={});
|
|
2
|
+
//# sourceMappingURL=tokens.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/tokens.ts","../src/to-kebab-case.ts"],"sourcesContent":["import { toKebabCase } from './to-kebab-case';\n\nexport interface Tokens {\n [key: string]: string;\n}\n\nconst tokens: Tokens = new Proxy(Object.create(null), {\n get(_target, key: string) {\n return `var(--${toKebabCase(key)})`;\n },\n});\n\nexport default tokens;\n","export function toKebabCase(x: string) {\n return x\n .replace(/([0-9])([A-Z])/g, '$1-$2')\n .replace(/([a-z])([A-Z0-9])/g, '$1-$2')\n .toLowerCase();\n}\n"],"mappings":"4ZAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GCAO,SAASI,EAAYC,EAAW,CACrC,OAAOA,EACJ,QAAQ,kBAAmB,OAAO,EAClC,QAAQ,qBAAsB,OAAO,EACrC,YAAY,CACjB,CDCA,IAAMC,EAAiB,IAAI,MAAM,OAAO,OAAO,IAAI,EAAG,CACpD,IAAIC,EAASC,EAAa,CACxB,MAAO,SAASC,EAAYD,CAAG,IACjC,CACF,CAAC,EAEME,EAAQJ","names":["tokens_exports","__export","tokens_default","__toCommonJS","toKebabCase","x","tokens","_target","key","toKebabCase","tokens_default"]}
|
package/dist/tokens.css
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.volvo_v0{--font-sans-family:"Volvo Novum","Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;--font-broad-family:"Volvo Broad","Arial Black",sans-serif}[lang|=vi] .volvo_v0,[lang|=vi].volvo_v0{--font-sans-family:"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif}.volvo_v0{--font-16-size:1rem;--font-16-lineheight:1.5;--font-16:300 var(--font-16-size)/var(--font-16-lineheight) var(--font-sans-family);--font-14-size:.875rem;--font-14-lineheight:1.57;--font-14:300 var(--font-14-size)/var(--font-14-lineheight) var(--font-sans-family);--font-12-size:.75rem;--font-12-lineheight:1.67;--font-12:300 var(--font-12-size)/var(--font-12-lineheight) var(--font-sans-family);--_vcc33ac2c:calc(.31rem + 2ex);--font-heading-1-lineheight:var(--_vcc33ac2c);--font-heading-1-size-min:2rem;--font-heading-1-size-max:2.5rem;--font-heading-1-size:clamp( var(--font-heading-1-size-min),1vw + 1.7rem,var(--font-heading-1-size-max));--font-heading-1:500 var(--font-heading-1-size)/var(--font-heading-1-lineheight) var(--font-sans-family);--font-heading-2-lineheight:var(--_vcc33ac2c);--font-heading-2-size-min:1.5rem;--font-heading-2-size-max:2rem;--font-heading-2-size:clamp( var(--font-heading-2-size-min),1vw + 1.2rem,var(--font-heading-2-size-max));--font-heading-2:500 var(--font-heading-2-size)/var(--font-heading-2-lineheight) var(--font-sans-family);--font-heading-3-lineheight:var(--_vcc33ac2c);--font-heading-3-size-min:1.5rem;--font-heading-3-size-max:2rem;--font-heading-3-size:clamp( var(--font-heading-3-size-min),1vw + 1.2rem,var(--font-heading-3-size-max));--font-heading-3:300 var(--font-heading-3-size)/var(--font-heading-3-lineheight) var(--font-sans-family);--font-statement-1-lineheight:var(--_vcc33ac2c);--font-statement-1-size-min:4.5rem;--font-statement-1-size-max:6rem;--font-statement-1-size:clamp( var(--font-statement-1-size-min),3vw + 3.6rem,var(--font-statement-1-size-max));--font-statement-1:500 var(--font-statement-1-size)/var(--font-statement-1-lineheight) var(--font-sans-family);--font-statement-2-lineheight:var(--_vcc33ac2c);--font-statement-2-size-min:3.5rem;--font-statement-2-size-max:4.5rem;--font-statement-2-size:clamp( var(--font-statement-2-size-min),2vw + 2.9rem,var(--font-statement-2-size-max));--font-statement-2:500 var(--font-statement-2-size)/var(--font-statement-2-lineheight) var(--font-sans-family);--font-statement-3-lineheight:var(--_vcc33ac2c);--font-statement-3-size-min:3rem;--font-statement-3-size-max:3.5rem;--font-statement-3-size:clamp( var(--font-statement-3-size-min),1vw + 2.7rem,var(--font-statement-3-size-max));--font-statement-3:500 var(--font-statement-3-size)/var(--font-statement-3-lineheight) var(--font-sans-family);--font-statement-signature-lineheight:1;--font-statement-signature-size-min:2.5rem;--font-statement-signature-size-max:4.5rem;--font-statement-signature-size:clamp( var(--font-statement-signature-size-min),4vw + 1.3rem,var(--font-statement-signature-size-max));--font-statement-signature:500 var(--font-statement-signature-size)/var(--font-statement-signature-lineheight) var(--font-broad-family);--font-title-24-size:1.5rem;--font-title-24-lineheight:1.334;--font-title-24:300 var(--font-title-24-size)/var(--font-title-24-lineheight) var(--font-sans-family);--font-title-20-size:1.25rem;--font-title-20-lineheight:1.4;--font-title-20:300 var(--font-title-20-size)/var(--font-title-20-lineheight) var(--font-sans-family)}.volvo_v0,.volvo_v0 [data-color-mode=light]{--color-foreground-primary:#141414;--color-foreground-secondary:#707070;--color-background-primary:#fff;--color-foreground-accent-blue:#2a609d}.volvo_v0[data-color-mode=dark],.volvo_v0 [data-color-mode=dark]{--color-foreground-primary:#fff;--color-foreground-secondary:#a3a3a3;--color-background-primary:#000;--color-foreground-accent-blue:#2c7ace}.volvo_v0{--space-4:.25rem;--space-8:.5rem;--space-12:.75rem;--space-16:1rem;--space-20:1.25rem;--space-24:1.5rem;--space-32:2rem;--space-40:2.5rem;--space-48:3rem;--space-64:4rem;--space-80:5rem;--space-96:6rem;--space-128:8rem}
|
package/dist/tokens.d.ts
ADDED
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
export interface Tokens {
|
|
2
|
+
readonly fontSansFamily: 'var(--font-sans-family)';
|
|
3
|
+
readonly fontBroadFamily: 'var(--font-broad-family)';
|
|
4
|
+
readonly font16Size: 'var(--font-16-size)';
|
|
5
|
+
readonly font16Lineheight: 'var(--font-16-lineheight)';
|
|
6
|
+
readonly font16: 'var(--font-16)';
|
|
7
|
+
readonly font14Size: 'var(--font-14-size)';
|
|
8
|
+
readonly font14Lineheight: 'var(--font-14-lineheight)';
|
|
9
|
+
readonly font14: 'var(--font-14)';
|
|
10
|
+
readonly font12Size: 'var(--font-12-size)';
|
|
11
|
+
readonly font12Lineheight: 'var(--font-12-lineheight)';
|
|
12
|
+
readonly font12: 'var(--font-12)';
|
|
13
|
+
readonly fontHeading1Lineheight: 'var(--font-heading-1-lineheight)';
|
|
14
|
+
readonly fontHeading1SizeMin: 'var(--font-heading-1-size-min)';
|
|
15
|
+
readonly fontHeading1SizeMax: 'var(--font-heading-1-size-max)';
|
|
16
|
+
readonly fontHeading1Size: 'var(--font-heading-1-size)';
|
|
17
|
+
readonly fontHeading1: 'var(--font-heading-1)';
|
|
18
|
+
readonly fontHeading2Lineheight: 'var(--font-heading-2-lineheight)';
|
|
19
|
+
readonly fontHeading2SizeMin: 'var(--font-heading-2-size-min)';
|
|
20
|
+
readonly fontHeading2SizeMax: 'var(--font-heading-2-size-max)';
|
|
21
|
+
readonly fontHeading2Size: 'var(--font-heading-2-size)';
|
|
22
|
+
readonly fontHeading2: 'var(--font-heading-2)';
|
|
23
|
+
readonly fontHeading3Lineheight: 'var(--font-heading-3-lineheight)';
|
|
24
|
+
readonly fontHeading3SizeMin: 'var(--font-heading-3-size-min)';
|
|
25
|
+
readonly fontHeading3SizeMax: 'var(--font-heading-3-size-max)';
|
|
26
|
+
readonly fontHeading3Size: 'var(--font-heading-3-size)';
|
|
27
|
+
readonly fontHeading3: 'var(--font-heading-3)';
|
|
28
|
+
readonly fontStatement1Lineheight: 'var(--font-statement-1-lineheight)';
|
|
29
|
+
readonly fontStatement1SizeMin: 'var(--font-statement-1-size-min)';
|
|
30
|
+
readonly fontStatement1SizeMax: 'var(--font-statement-1-size-max)';
|
|
31
|
+
readonly fontStatement1Size: 'var(--font-statement-1-size)';
|
|
32
|
+
readonly fontStatement1: 'var(--font-statement-1)';
|
|
33
|
+
readonly fontStatement2Lineheight: 'var(--font-statement-2-lineheight)';
|
|
34
|
+
readonly fontStatement2SizeMin: 'var(--font-statement-2-size-min)';
|
|
35
|
+
readonly fontStatement2SizeMax: 'var(--font-statement-2-size-max)';
|
|
36
|
+
readonly fontStatement2Size: 'var(--font-statement-2-size)';
|
|
37
|
+
readonly fontStatement2: 'var(--font-statement-2)';
|
|
38
|
+
readonly fontStatement3Lineheight: 'var(--font-statement-3-lineheight)';
|
|
39
|
+
readonly fontStatement3SizeMin: 'var(--font-statement-3-size-min)';
|
|
40
|
+
readonly fontStatement3SizeMax: 'var(--font-statement-3-size-max)';
|
|
41
|
+
readonly fontStatement3Size: 'var(--font-statement-3-size)';
|
|
42
|
+
readonly fontStatement3: 'var(--font-statement-3)';
|
|
43
|
+
readonly fontStatementSignatureLineheight: 'var(--font-statement-signature-lineheight)';
|
|
44
|
+
readonly fontStatementSignatureSizeMin: 'var(--font-statement-signature-size-min)';
|
|
45
|
+
readonly fontStatementSignatureSizeMax: 'var(--font-statement-signature-size-max)';
|
|
46
|
+
readonly fontStatementSignatureSize: 'var(--font-statement-signature-size)';
|
|
47
|
+
readonly fontStatementSignature: 'var(--font-statement-signature)';
|
|
48
|
+
readonly fontTitle24Size: 'var(--font-title-24-size)';
|
|
49
|
+
readonly fontTitle24Lineheight: 'var(--font-title-24-lineheight)';
|
|
50
|
+
readonly fontTitle24: 'var(--font-title-24)';
|
|
51
|
+
readonly fontTitle20Size: 'var(--font-title-20-size)';
|
|
52
|
+
readonly fontTitle20Lineheight: 'var(--font-title-20-lineheight)';
|
|
53
|
+
readonly fontTitle20: 'var(--font-title-20)';
|
|
54
|
+
readonly colorForegroundPrimary: 'var(--color-foreground-primary)';
|
|
55
|
+
readonly colorForegroundSecondary: 'var(--color-foreground-secondary)';
|
|
56
|
+
readonly colorBackgroundPrimary: 'var(--color-background-primary)';
|
|
57
|
+
readonly colorForegroundAccentBlue: 'var(--color-foreground-accent-blue)';
|
|
58
|
+
readonly space4: 'var(--space-4)';
|
|
59
|
+
readonly space8: 'var(--space-8)';
|
|
60
|
+
readonly space12: 'var(--space-12)';
|
|
61
|
+
readonly space16: 'var(--space-16)';
|
|
62
|
+
readonly space20: 'var(--space-20)';
|
|
63
|
+
readonly space24: 'var(--space-24)';
|
|
64
|
+
readonly space32: 'var(--space-32)';
|
|
65
|
+
readonly space40: 'var(--space-40)';
|
|
66
|
+
readonly space48: 'var(--space-48)';
|
|
67
|
+
readonly space64: 'var(--space-64)';
|
|
68
|
+
readonly space80: 'var(--space-80)';
|
|
69
|
+
readonly space96: 'var(--space-96)';
|
|
70
|
+
readonly space128: 'var(--space-128)';
|
|
71
|
+
}
|
|
72
|
+
declare const vtokens: Tokens;
|
|
73
|
+
export default vtokens;
|
package/dist/tokens.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/tokens.ts"],"sourcesContent":["import { toKebabCase } from './to-kebab-case';\n\nexport interface Tokens {\n [key: string]: string;\n}\n\nconst tokens: Tokens = new Proxy(Object.create(null), {\n get(_target, key: string) {\n return `var(--${toKebabCase(key)})`;\n },\n});\n\nexport default tokens;\n"],"mappings":"wCAMA,IAAMA,EAAiB,IAAI,MAAM,OAAO,OAAO,IAAI,EAAG,CACpD,IAAIC,EAASC,EAAa,CACxB,MAAO,SAASC,EAAYD,CAAG,IACjC,CACF,CAAC,EAEME,EAAQJ","names":["tokens","_target","key","toKebabCase","tokens_default"]}
|
package/dist/utils.cjs
ADDED
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
var s=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var o=Object.getOwnPropertyNames;var u=Object.prototype.hasOwnProperty;var y=(e,r)=>{for(var l in r)s(e,l,{get:r[l],enumerable:!0})},g=(e,r,l,t)=>{if(r&&typeof r=="object"||typeof r=="function")for(let n of o(r))!u.call(e,n)&&n!==l&&s(e,n,{get:()=>r[n],enumerable:!(t=f(r,n))||t.enumerable});return e};var C=e=>g(s({},"__esModule",{value:!0}),e);var c={};y(c,{clsx:()=>i});module.exports=C(c);function a(e){let r,l,t="";if(typeof e=="string"||typeof e=="number")t+=e;else if(typeof e=="object")if(Array.isArray(e))for(r=0;r<e.length;r++)e[r]&&(l=a(e[r]))&&(t&&(t+=" "),t+=l);else for(r in e)e[r]&&(t&&(t+=" "),t+=r);return t}function i(...e){let r=0,l,t,n="";for(;r<e.length;)(l=e[r++])&&(t=a(l))&&(n&&(n+=" "),n+=t);return n}0&&(module.exports={clsx});
|
|
2
|
+
//# sourceMappingURL=utils.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/utils.ts","../src/clsx.ts"],"sourcesContent":["export { clsx } from './clsx';\n","/*\nMIT License\n\nCopyright (c) Luke Edwards <luke.edwards05@gmail.com> (lukeed.com)\n\nPermission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the \"Software\"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\n*/\n\ntype ClassValue =\n | ClassArray\n | ClassDictionary\n | string\n | number\n | null\n | boolean\n | undefined;\n\ninterface ClassDictionary {\n [id: string]: unknown;\n}\n\ninterface ClassArray extends Array<ClassValue> {}\n\nfunction toVal(mix: NonNullable<ClassValue>) {\n let k: string | number,\n y: string,\n str = '';\n\n if (typeof mix === 'string' || typeof mix === 'number') {\n str += mix;\n } else if (typeof mix === 'object') {\n if (Array.isArray(mix)) {\n for (k = 0; k < mix.length; k++) {\n if (mix[k]) {\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n if ((y = toVal(mix[k]!))) {\n str && (str += ' ');\n str += y;\n }\n }\n }\n } else {\n for (k in mix) {\n if (mix[k]) {\n str && (str += ' ');\n str += k;\n }\n }\n }\n }\n\n return str;\n}\n\nexport function clsx(...classes: ClassValue[]): string {\n let i = 0;\n let tmp: ClassValue;\n let x: string;\n let str = '';\n while (i < classes.length) {\n if ((tmp = classes[i++])) {\n if ((x = toVal(tmp))) {\n str && (str += ' ');\n str += x;\n }\n }\n }\n return str;\n}\n"],"mappings":"4ZAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,UAAAE,IAAA,eAAAC,EAAAH,GC2BA,SAASI,EAAMC,EAA8B,CAC3C,IAAIC,EACFC,EACAC,EAAM,GAER,GAAI,OAAOH,GAAQ,UAAY,OAAOA,GAAQ,SAC5CG,GAAOH,UACE,OAAOA,GAAQ,SACxB,GAAI,MAAM,QAAQA,CAAG,EACnB,IAAKC,EAAI,EAAGA,EAAID,EAAI,OAAQC,IACtBD,EAAIC,KAEDC,EAAIH,EAAMC,EAAIC,EAAG,KACpBE,IAAQA,GAAO,KACfA,GAAOD,OAKb,KAAKD,KAAKD,EACJA,EAAIC,KACNE,IAAQA,GAAO,KACfA,GAAOF,GAMf,OAAOE,CACT,CAEO,SAASC,KAAQC,EAA+B,CACrD,IAAIC,EAAI,EACJC,EACAC,EACAL,EAAM,GACV,KAAOG,EAAID,EAAQ,SACZE,EAAMF,EAAQC,QACZE,EAAIT,EAAMQ,CAAG,KAChBJ,IAAQA,GAAO,KACfA,GAAOK,GAIb,OAAOL,CACT","names":["utils_exports","__export","clsx","__toCommonJS","toVal","mix","k","y","str","clsx","classes","i","tmp","x"]}
|
package/dist/utils.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { clsx } from './clsx';
|
package/dist/utils.js
ADDED
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
function s(e){let r,l,t="";if(typeof e=="string"||typeof e=="number")t+=e;else if(typeof e=="object")if(Array.isArray(e))for(r=0;r<e.length;r++)e[r]&&(l=s(e[r]))&&(t&&(t+=" "),t+=l);else for(r in e)e[r]&&(t&&(t+=" "),t+=r);return t}function a(...e){let r=0,l,t,n="";for(;r<e.length;)(l=e[r++])&&(t=s(l))&&(n&&(n+=" "),n+=t);return n}export{a as clsx};
|
|
2
|
+
//# sourceMappingURL=utils.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/clsx.ts"],"sourcesContent":["/*\nMIT License\n\nCopyright (c) Luke Edwards <luke.edwards05@gmail.com> (lukeed.com)\n\nPermission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the \"Software\"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\n*/\n\ntype ClassValue =\n | ClassArray\n | ClassDictionary\n | string\n | number\n | null\n | boolean\n | undefined;\n\ninterface ClassDictionary {\n [id: string]: unknown;\n}\n\ninterface ClassArray extends Array<ClassValue> {}\n\nfunction toVal(mix: NonNullable<ClassValue>) {\n let k: string | number,\n y: string,\n str = '';\n\n if (typeof mix === 'string' || typeof mix === 'number') {\n str += mix;\n } else if (typeof mix === 'object') {\n if (Array.isArray(mix)) {\n for (k = 0; k < mix.length; k++) {\n if (mix[k]) {\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n if ((y = toVal(mix[k]!))) {\n str && (str += ' ');\n str += y;\n }\n }\n }\n } else {\n for (k in mix) {\n if (mix[k]) {\n str && (str += ' ');\n str += k;\n }\n }\n }\n }\n\n return str;\n}\n\nexport function clsx(...classes: ClassValue[]): string {\n let i = 0;\n let tmp: ClassValue;\n let x: string;\n let str = '';\n while (i < classes.length) {\n if ((tmp = classes[i++])) {\n if ((x = toVal(tmp))) {\n str && (str += ' ');\n str += x;\n }\n }\n }\n return str;\n}\n"],"mappings":"AA2BA,SAASA,EAAMC,EAA8B,CAC3C,IAAIC,EACFC,EACAC,EAAM,GAER,GAAI,OAAOH,GAAQ,UAAY,OAAOA,GAAQ,SAC5CG,GAAOH,UACE,OAAOA,GAAQ,SACxB,GAAI,MAAM,QAAQA,CAAG,EACnB,IAAKC,EAAI,EAAGA,EAAID,EAAI,OAAQC,IACtBD,EAAIC,KAEDC,EAAIH,EAAMC,EAAIC,EAAG,KACpBE,IAAQA,GAAO,KACfA,GAAOD,OAKb,KAAKD,KAAKD,EACJA,EAAIC,KACNE,IAAQA,GAAO,KACfA,GAAOF,GAMf,OAAOE,CACT,CAEO,SAASC,KAAQC,EAA+B,CACrD,IAAIC,EAAI,EACJC,EACAC,EACAL,EAAM,GACV,KAAOG,EAAID,EAAQ,SACZE,EAAMF,EAAQC,QACZE,EAAIT,EAAMQ,CAAG,KAChBJ,IAAQA,GAAO,KACfA,GAAOK,GAIb,OAAOL,CACT","names":["toVal","mix","k","y","str","clsx","classes","i","tmp","x"]}
|
package/package.json
ADDED
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@volvo-cars/css",
|
|
3
|
+
"description": "Volvo Cars shared CSS",
|
|
4
|
+
"version": "0.1.0",
|
|
5
|
+
"license": "UNLICENSED",
|
|
6
|
+
"sideEffects": false,
|
|
7
|
+
"type": "module",
|
|
8
|
+
"exports": {
|
|
9
|
+
"./styles.css": "./dist/styles.css",
|
|
10
|
+
"./tokens.css": "./dist/tokens.css",
|
|
11
|
+
"./font-face.css": "./dist/font-face.css",
|
|
12
|
+
"./utils": {
|
|
13
|
+
"types": "./dist/utils.d.ts",
|
|
14
|
+
"import": "./dist/utils.js",
|
|
15
|
+
"require": "./dist/utils.cjs"
|
|
16
|
+
},
|
|
17
|
+
"./utils.js": {
|
|
18
|
+
"types": "./dist/utils.d.ts",
|
|
19
|
+
"import": "./dist/utils.js",
|
|
20
|
+
"require": "./dist/utils.cjs"
|
|
21
|
+
},
|
|
22
|
+
"./styles": {
|
|
23
|
+
"types": "./dist/styles.d.ts",
|
|
24
|
+
"import": "./dist/styles.js",
|
|
25
|
+
"require": "./dist/styles.cjs"
|
|
26
|
+
},
|
|
27
|
+
"./styles.js": {
|
|
28
|
+
"types": "./dist/styles.d.ts",
|
|
29
|
+
"import": "./dist/styles.js",
|
|
30
|
+
"require": "./dist/styles.cjs"
|
|
31
|
+
},
|
|
32
|
+
"./tokens": {
|
|
33
|
+
"types": "./dist/tokens.d.ts",
|
|
34
|
+
"import": "./dist/tokens.js",
|
|
35
|
+
"require": "./dist/tokens.cjs"
|
|
36
|
+
},
|
|
37
|
+
"./tokens.js": {
|
|
38
|
+
"types": "./dist/tokens.d.ts",
|
|
39
|
+
"import": "./dist/tokens.js",
|
|
40
|
+
"require": "./dist/tokens.cjs"
|
|
41
|
+
}
|
|
42
|
+
},
|
|
43
|
+
"typesVersions": {
|
|
44
|
+
"*": {
|
|
45
|
+
"utils": [
|
|
46
|
+
"./dist/utils.d.ts"
|
|
47
|
+
],
|
|
48
|
+
"utils.js": [
|
|
49
|
+
"./dist/utils.d.ts"
|
|
50
|
+
],
|
|
51
|
+
"styles": [
|
|
52
|
+
"./dist/styles.d.ts"
|
|
53
|
+
],
|
|
54
|
+
"styles.js": [
|
|
55
|
+
"./dist/styles.d.ts"
|
|
56
|
+
],
|
|
57
|
+
"tokens": [
|
|
58
|
+
"./dist/tokens.d.ts"
|
|
59
|
+
],
|
|
60
|
+
"tokens.js": [
|
|
61
|
+
"./dist/tokens.d.ts"
|
|
62
|
+
]
|
|
63
|
+
}
|
|
64
|
+
},
|
|
65
|
+
"files": [
|
|
66
|
+
"dist/**"
|
|
67
|
+
],
|
|
68
|
+
"publishConfig": {
|
|
69
|
+
"access": "public"
|
|
70
|
+
},
|
|
71
|
+
"scripts": {
|
|
72
|
+
"build": "tsup",
|
|
73
|
+
"build:prod": "tsup --clean --sourcemap --minify && yarn run build:dts",
|
|
74
|
+
"build:dts": "tsc -p tsconfig.build.json",
|
|
75
|
+
"build:css": "node scripts/build.js",
|
|
76
|
+
"dev": "tsup --watch",
|
|
77
|
+
"test": "yarn run -T jest packages/css",
|
|
78
|
+
"types:check": "tsc -b tsconfig.src-check.json tsconfig.tests.json --verbose",
|
|
79
|
+
"clean": "rm -rf .turbo dist && rm -rf *.tsbuildinfo"
|
|
80
|
+
},
|
|
81
|
+
"repository": {
|
|
82
|
+
"type": "git",
|
|
83
|
+
"url": "https://github.com/volvo-cars/vcc-ui",
|
|
84
|
+
"directory": "packages/css"
|
|
85
|
+
},
|
|
86
|
+
"devDependencies": {
|
|
87
|
+
"@types/css-tree": "2.0.0",
|
|
88
|
+
"@volvo-cars/browserslist-config": "workspace:*",
|
|
89
|
+
"browserslist": "4.21.4",
|
|
90
|
+
"css-tree": "2.2.1",
|
|
91
|
+
"lightningcss": "1.16.0",
|
|
92
|
+
"lodash": "4.17.21",
|
|
93
|
+
"tsup": "6.2.3",
|
|
94
|
+
"typescript": "4.8.4"
|
|
95
|
+
},
|
|
96
|
+
"browserslist": [
|
|
97
|
+
"extends @volvo-cars/browserslist-config"
|
|
98
|
+
],
|
|
99
|
+
"engines": {
|
|
100
|
+
"node": ">=14.15.0"
|
|
101
|
+
}
|
|
102
|
+
}
|