@volvo-cars/css 0.1.0 → 0.1.2

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/README.md CHANGED
@@ -4,87 +4,7 @@ Shared CSS for the Volvo Cars Web Design System.
4
4
 
5
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
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
- ```
7
+ The stylesheet includes non-intrusive resets as well as a number of CSS classes for design system compatible typography and links.
88
8
 
89
9
  ## Typography
90
10
 
@@ -153,7 +73,7 @@ To disable the fluid font-size and fix the size, pass the `data-fluid-typography
153
73
  <p className="title-24">Title 24</p>
154
74
  <p className="title-20">Title 20</p>
155
75
  <p className="body-16">Body 16</p>
156
- <p className="body-16">Body 14</p>
76
+ <p className="body-14">Body 14</p>
157
77
  <p className="micro">Micro</p>
158
78
  <p className="UNSTABLE_action-14">Action 14</p>
159
79
  <p className="UNSTABLE_tag-12">Tag 12</p>
@@ -216,8 +136,50 @@ Makes `ul` and `ol` display as lists with bullets or numbers.
216
136
 
217
137
  | Class name | Element | Properties |
218
138
  | ------------- | ------------- | ------------------ |
219
- | `font-bold` | `b`, `strong` | `font-weight: 500` |
220
- | `font-normal` | | `font-weight: 300` |
139
+ | `font-medium` | `b`, `strong` | `font-weight: 500` |
140
+ | `font-light` | | `font-weight: 300` |
141
+
142
+ ### Migrating from the `vcc-ui` `<Text>` component
143
+
144
+ | vcc-ui Text | @volvo-cars/css |
145
+ | -------------------------------------------- | ---------------------------------- |
146
+ | `<Text variant="yang">` | `<h1 class="statement-signature">` |
147
+ | `<Text variant="peary">` | `<h1 class="statement-3">` |
148
+ | `<Text variant="cook">` | `<h1>`, `<p class="heading-1">` |
149
+ | `<Text variant="ootah" subStyle="emphasis">` | `<h2>`, `<p class="heading-2">` |
150
+ | `<Text variant="ootah" subStyle="standard">` | `<h3>`, `<p class="heading-3">` |
151
+ | `<Text variant="hillary">` | `<p class="title-20">` |
152
+ | `<Text>`, `<Text variant="columbus">` | `<p>`, `<p class="body-16">` |
153
+ | `<Text variant="kelly">` | `<p class="body-14">` |
154
+ | `<Text variant="bates">` | `<small>`, `<p class="micro">` |
155
+ | `<Text variant="amundsen">` | `<p class="UNSTABLE_action-14">` |
156
+
157
+ **Example change**
158
+
159
+ ```diff
160
+ -<Text variant="cook" as="h1">
161
+ +<h1 className="heading-1">
162
+ {title}
163
+ -</Text>
164
+ +</h1>
165
+ ```
166
+
167
+ If you need to change the text style depending for different media queries, use tokens to create a custom style.
168
+
169
+ ```jsx
170
+ import vtokens from '@volvo-cars/css/tokens';
171
+
172
+ <Block
173
+ extend={{
174
+ font: vtokens.font14,
175
+ fromM: {
176
+ font: vtokens.font16,
177
+ },
178
+ }}
179
+ >
180
+ Text
181
+ </Block>;
182
+ ```
221
183
 
222
184
  ### Default elements
223
185
 
@@ -259,32 +221,26 @@ You can either remove the custom class or add the corresponding element class na
259
221
  </div>
260
222
  ```
261
223
 
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">` |
224
+ ## Dark mode
276
225
 
277
- **Example change**
226
+ Light mode is the default color mode of the theme. Use the `data-color-mode` attribute to switch between `dark` and `light` color modes.
278
227
 
279
- ```diff
280
- -<Text variant="cook" as="h1">
281
- +<h1 className="heading-1">
282
- {title}
283
- -</Text>
284
- +</h1>
228
+ ```html
229
+ <div class="volvo_v0">
230
+ <p>Light mode</p>
231
+ <div data-color-mode="dark">
232
+ <p>Dark mode</p>
233
+ </div>
234
+ </div>
235
+ <html class="volvo_v0" data-color-mode="dark">
236
+ <p>Dark mode</p>
237
+ <div data-color-mode="light">
238
+ <p>Light mode</p>
239
+ </div>
240
+ </div>
285
241
  ```
286
242
 
287
- # Design Tokens
243
+ ## Design Tokens
288
244
 
289
245
  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
246
 
@@ -305,7 +261,7 @@ Design token variable names consist of the following parts:
305
261
 
306
262
  Depending on the category, the name consists of different parts.
307
263
 
308
- ## Typography
264
+ ### Typography
309
265
 
310
266
  Naming scheme: `--font-{category}-{variant}-{property}-{modifier}`
311
267
 
@@ -355,3 +311,82 @@ Rem based spacing tokens for space between elements and components. Names corres
355
311
  - `--space-80`
356
312
  - `--space-96`
357
313
  - `--space-128`
314
+
315
+ ## Usage
316
+
317
+ Include the styles in your application rendering the following in your `head`. For example in `_document` in Next.js
318
+
319
+ ```js
320
+ <Head>
321
+ {links().map((link) => (
322
+ <link key={link.href} {...link} />
323
+ ))}
324
+ </Head>
325
+ ```
326
+
327
+ This creates links to required CSS files hosted on the shared volvocars.com CDN.
328
+
329
+ In development environments such as Storybook or on deployments not on www.volvocars.com, you can also import the CSS files directly from the npm package.
330
+
331
+ ```js
332
+ import '@volvo-cars/css/font-face.css';
333
+ import '@volvo-cars/css/tokens.css';
334
+ import '@volvo-cars/css/styles.css';
335
+ ```
336
+
337
+ # Scoping
338
+
339
+ 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.
340
+
341
+ You typically want to apply the root class name to your `<html>` element but you can also apply it to parts of your page.
342
+
343
+ **Example**
344
+
345
+ ```html
346
+ <style>
347
+ h1 {
348
+ font-size: 10px;
349
+ }
350
+ </style>
351
+
352
+ <h1>10px</h1>
353
+ <h2>Default browser styles</h2>
354
+ <div class="volvo_v0">
355
+ <h1>10px</h1>
356
+ <h1 class="heading-1">Design system styled heading</h1>
357
+ </div>
358
+ ```
359
+
360
+ # TypeScript
361
+
362
+ As a convenience for TypeScript developers all class names and CSS variables are exported as JavaScript modules with TypeScript interfaces.
363
+
364
+ ```ts
365
+ import vss from '@volvo-cars/css/styles';
366
+
367
+ console.assert(vss.body14 === 'body-14');
368
+ console.assert(vss.heading1 === 'heading-1');
369
+
370
+ document.body.classList.add(vss.body14);
371
+ ```
372
+
373
+ ```ts
374
+ import vtokens from '@volvo-cars/css/tokens';
375
+
376
+ console.assert(vtokens.fontHeading1Size === 'var(--font-heading-1-size)');
377
+
378
+ document.body.style.font = vtokens.font16;
379
+ ```
380
+
381
+ To merge or apply class names conditionally you can use the `clsx` utility.
382
+
383
+ ```tsx
384
+ import { clsx } from '@volvo-cars/css/utils';
385
+ import vss from '@volvo-cars/css/styles';
386
+
387
+ <button
388
+ className={clsx(vss.fontMedium, isActive && vss.textPrimary, 'my-class-name')}
389
+ >
390
+ Button
391
+ </button>;
392
+ ```
@@ -0,0 +1,2 @@
1
+ var e={"font-face.css":"css/v0/font-face.6dafba9a.css","styles.css":"css/v0/styles.04a69853.css","styles_hover.css":"css/v0/styles_hover.36ae5a79.css","tokens.css":"css/v0/tokens.dba93bff.css"};export{e as a};
2
+ //# sourceMappingURL=chunk-BZXPLQYB.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
@@ -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}
@@ -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-medium,:where(.volvo_v0) :where(b,strong){font-weight:500}:where(.volvo_v0) .font-light{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)}
@@ -0,0 +1 @@
1
+ :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)}
@@ -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}
@@ -0,0 +1,8 @@
1
+ {
2
+ "imports": {
3
+ "font-face.css": "css/v0/font-face.6dafba9a.css",
4
+ "styles.css": "css/v0/styles.04a69853.css",
5
+ "styles_hover.css": "css/v0/styles_hover.36ae5a79.css",
6
+ "tokens.css": "css/v0/tokens.dba93bff.css"
7
+ }
8
+ }
package/dist/links.cjs ADDED
@@ -0,0 +1,2 @@
1
+ var n=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var a=Object.getOwnPropertyNames;var f=Object.prototype.hasOwnProperty;var p=(s,t)=>{for(var e in t)n(s,e,{get:t[e],enumerable:!0})},l=(s,t,e,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of a(t))!f.call(s,o)&&o!==e&&n(s,o,{get:()=>t[o],enumerable:!(r=c(t,o))||r.enumerable});return s};var h=s=>l(n({},"__esModule",{value:!0}),s);var g={};p(g,{links:()=>y});module.exports=h(g);var i={"font-face.css":"css/v0/font-face.6dafba9a.css","styles.css":"css/v0/styles.04a69853.css","styles_hover.css":"css/v0/styles_hover.36ae5a79.css","tokens.css":"css/v0/tokens.dba93bff.css"};var d="https://www.volvocars.com/static/shared/pkg/";function y({base:s=d}={}){if(s&&typeof s!="string"&&(s=s.href),typeof s=="string"&&s!==""&&!s.endsWith("/"))throw new TypeError("Missing trailing slash in base URL");return Object.entries(i).map(([t,e])=>{let r={rel:"stylesheet",href:s+e,"data-volvo-css-name":t};return t.endsWith("_hover.css")&&(r.media="(hover:hover)"),r})}0&&(module.exports={links});
2
+ //# sourceMappingURL=links.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/links.ts"],"sourcesContent":["import { imports } from './imports.json' assert { type: 'json' };\n\nconst defaultBase = 'https://www.volvocars.com/static/shared/pkg/';\n\nexport function links({\n base = defaultBase,\n}: { base?: URL | string } = {}): LinkProps[] {\n if (base && typeof base !== 'string') {\n base = base.href;\n }\n if (typeof base === 'string' && base !== '' && !base.endsWith('/')) {\n throw new TypeError('Missing trailing slash in base URL');\n }\n return Object.entries(imports).map(([name, filename]) => {\n const props: LinkProps = {\n rel: 'stylesheet',\n href: base + filename,\n 'data-volvo-css-name': name,\n };\n if (name.endsWith('_hover.css')) {\n props.media = '(hover:hover)';\n }\n return props;\n });\n}\n\nexport interface LinkProps {\n href: string;\n media?: string;\n 'data-volvo-css-name': string;\n rel: 'stylesheet' | 'preload';\n as?: 'style';\n}\n"],"mappings":"4ZAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,WAAAE,IAAA,eAAAC,EAAAH,qMAEA,IAAMI,EAAc,+CAEb,SAASC,EAAM,CACpB,KAAAC,EAAOF,CACT,EAA6B,CAAC,EAAgB,CAI5C,GAHIE,GAAQ,OAAOA,GAAS,WAC1BA,EAAOA,EAAK,MAEV,OAAOA,GAAS,UAAYA,IAAS,IAAM,CAACA,EAAK,SAAS,GAAG,EAC/D,MAAM,IAAI,UAAU,oCAAoC,EAE1D,OAAO,OAAO,QAAQC,CAAO,EAAE,IAAI,CAAC,CAACC,EAAMC,CAAQ,IAAM,CACvD,IAAMC,EAAmB,CACvB,IAAK,aACL,KAAMJ,EAAOG,EACb,sBAAuBD,CACzB,EACA,OAAIA,EAAK,SAAS,YAAY,IAC5BE,EAAM,MAAQ,iBAETA,CACT,CAAC,CACH","names":["links_exports","__export","links","__toCommonJS","defaultBase","links","base","imports","name","filename","props"]}
@@ -0,0 +1,10 @@
1
+ export declare function links({ base, }?: {
2
+ base?: URL | string;
3
+ }): LinkProps[];
4
+ export interface LinkProps {
5
+ href: string;
6
+ media?: string;
7
+ 'data-volvo-css-name': string;
8
+ rel: 'stylesheet' | 'preload';
9
+ as?: 'style';
10
+ }
package/dist/links.js ADDED
@@ -0,0 +1,2 @@
1
+ import{a as e}from"./chunk-BZXPLQYB.js";var o="https://www.volvocars.com/static/shared/pkg/";function p({base:r=o}={}){if(r&&typeof r!="string"&&(r=r.href),typeof r=="string"&&r!==""&&!r.endsWith("/"))throw new TypeError("Missing trailing slash in base URL");return Object.entries(e).map(([t,i])=>{let s={rel:"stylesheet",href:r+i,"data-volvo-css-name":t};return t.endsWith("_hover.css")&&(s.media="(hover:hover)"),s})}export{p as links};
2
+ //# sourceMappingURL=links.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/links.ts"],"sourcesContent":["import { imports } from './imports.json' assert { type: 'json' };\n\nconst defaultBase = 'https://www.volvocars.com/static/shared/pkg/';\n\nexport function links({\n base = defaultBase,\n}: { base?: URL | string } = {}): LinkProps[] {\n if (base && typeof base !== 'string') {\n base = base.href;\n }\n if (typeof base === 'string' && base !== '' && !base.endsWith('/')) {\n throw new TypeError('Missing trailing slash in base URL');\n }\n return Object.entries(imports).map(([name, filename]) => {\n const props: LinkProps = {\n rel: 'stylesheet',\n href: base + filename,\n 'data-volvo-css-name': name,\n };\n if (name.endsWith('_hover.css')) {\n props.media = '(hover:hover)';\n }\n return props;\n });\n}\n\nexport interface LinkProps {\n href: string;\n media?: string;\n 'data-volvo-css-name': string;\n rel: 'stylesheet' | 'preload';\n as?: 'style';\n}\n"],"mappings":"wCAEA,IAAMA,EAAc,+CAEb,SAASC,EAAM,CACpB,KAAAC,EAAOF,CACT,EAA6B,CAAC,EAAgB,CAI5C,GAHIE,GAAQ,OAAOA,GAAS,WAC1BA,EAAOA,EAAK,MAEV,OAAOA,GAAS,UAAYA,IAAS,IAAM,CAACA,EAAK,SAAS,GAAG,EAC/D,MAAM,IAAI,UAAU,oCAAoC,EAE1D,OAAO,OAAO,QAAQC,CAAO,EAAE,IAAI,CAAC,CAACC,EAAMC,CAAQ,IAAM,CACvD,IAAMC,EAAmB,CACvB,IAAK,aACL,KAAMJ,EAAOG,EACb,sBAAuBD,CACzB,EACA,OAAIA,EAAK,SAAS,YAAY,IAC5BE,EAAM,MAAQ,iBAETA,CACT,CAAC,CACH","names":["defaultBase","links","base","imports","name","filename","props"]}
@@ -0,0 +1,2 @@
1
+ var l=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var i=Object.getOwnPropertyNames;var e=Object.prototype.hasOwnProperty;var c=(o,t)=>{for(var f in t)l(o,f,{get:t[f],enumerable:!0})},w=(o,t,f,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of i(t))!e.call(o,a)&&a!==f&&l(o,a,{get:()=>t[a],enumerable:!(s=v(t,a))||s.enumerable});return o};var m=o=>w(l({},"__esModule",{value:!0}),o);var y={};c(y,{links:()=>h});module.exports=m(y);var n="QGZvbnQtZmFjZXtmb250LWRpc3BsYXk6c3dhcDtmb250LXdlaWdodDozMDA7dW5pY29kZS1yYW5nZTpVKzM3MC0zRkY7c3JjOnVybChodHRwczovL3d3dy52b2x2b2NhcnMuY29tL3N0YXRpYy9zaGFyZWQvZm9udHMvdm9sdm8tbm92dW0vdm9sdm8tbm92dW0tZ3JlZWstc2VtaS1saWdodC53b2ZmMilmb3JtYXQoIndvZmYyIik7Zm9udC1mYW1pbHk6Vm9sdm8gTm92dW19QGZvbnQtZmFjZXtmb250LWRpc3BsYXk6c3dhcDtmb250LXdlaWdodDozMDA7dW5pY29kZS1yYW5nZTpVKzQ/PztzcmM6dXJsKGh0dHBzOi8vd3d3LnZvbHZvY2Fycy5jb20vc3RhdGljL3NoYXJlZC9mb250cy92b2x2by1ub3Z1bS92b2x2by1ub3Z1bS1jeXJpbGxpYy1zZW1pLWxpZ2h0LndvZmYyKWZvcm1hdCgid29mZjIiKTtmb250LWZhbWlseTpWb2x2byBOb3Z1bX1AZm9udC1mYWNle2ZvbnQtZGlzcGxheTpzd2FwO2ZvbnQtd2VpZ2h0OjMwMDtzcmM6dXJsKGh0dHBzOi8vd3d3LnZvbHZvY2Fycy5jb20vc3RhdGljL3NoYXJlZC9mb250cy92b2x2by1ub3Z1bS92b2x2by1ub3Z1bS1zZW1pLWxpZ2h0LndvZmYyKWZvcm1hdCgid29mZjIiKTtmb250LWZhbWlseTpWb2x2byBOb3Z1bX1AZm9udC1mYWNle2ZvbnQtZGlzcGxheTpzd2FwO2ZvbnQtd2VpZ2h0OjMwMDtmb250LXN0eWxlOml0YWxpYzt1bmljb2RlLXJhbmdlOlUrMzcwLTNGRjtzcmM6dXJsKGh0dHBzOi8vd3d3LnZvbHZvY2Fycy5jb20vc3RhdGljL3NoYXJlZC9mb250cy92b2x2by1ub3Z1bS92b2x2by1ub3Z1bS1ncmVlay1zZW1pLWxpZ2h0LWl0YWxpYy53b2ZmMilmb3JtYXQoIndvZmYyIik7Zm9udC1mYW1pbHk6Vm9sdm8gTm92dW19QGZvbnQtZmFjZXtmb250LWRpc3BsYXk6c3dhcDtmb250LXdlaWdodDozMDA7Zm9udC1zdHlsZTppdGFsaWM7dW5pY29kZS1yYW5nZTpVKzQ/PztzcmM6dXJsKGh0dHBzOi8vd3d3LnZvbHZvY2Fycy5jb20vc3RhdGljL3NoYXJlZC9mb250cy92b2x2by1ub3Z1bS92b2x2by1ub3Z1bS1jeXJpbGxpYy1zZW1pLWxpZ2h0LWl0YWxpYy53b2ZmMilmb3JtYXQoIndvZmYyIik7Zm9udC1mYW1pbHk6Vm9sdm8gTm92dW19QGZvbnQtZmFjZXtmb250LWRpc3BsYXk6c3dhcDtmb250LXdlaWdodDozMDA7Zm9udC1zdHlsZTppdGFsaWM7c3JjOnVybChodHRwczovL3d3dy52b2x2b2NhcnMuY29tL3N0YXRpYy9zaGFyZWQvZm9udHMvdm9sdm8tbm92dW0vdm9sdm8tbm92dW0tc2VtaS1saWdodC1pdGFsaWMud29mZjIpZm9ybWF0KCJ3b2ZmMiIpO2ZvbnQtZmFtaWx5OlZvbHZvIE5vdnVtfUBmb250LWZhY2V7Zm9udC1kaXNwbGF5OnN3YXA7Zm9udC13ZWlnaHQ6NTAwO3VuaWNvZGUtcmFuZ2U6VSszNzAtM0ZGO3NyYzp1cmwoaHR0cHM6Ly93d3cudm9sdm9jYXJzLmNvbS9zdGF0aWMvc2hhcmVkL2ZvbnRzL3ZvbHZvLW5vdnVtL3ZvbHZvLW5vdnVtLWdyZWVrLW1lZGl1bS53b2ZmMilmb3JtYXQoIndvZmYyIik7Zm9udC1mYW1pbHk6Vm9sdm8gTm92dW19QGZvbnQtZmFjZXtmb250LWRpc3BsYXk6c3dhcDtmb250LXdlaWdodDo1MDA7dW5pY29kZS1yYW5nZTpVKzQ/PztzcmM6dXJsKGh0dHBzOi8vd3d3LnZvbHZvY2Fycy5jb20vc3RhdGljL3NoYXJlZC9mb250cy92b2x2by1ub3Z1bS92b2x2by1ub3Z1bS1jeXJpbGxpYy1tZWRpdW0ud29mZjIpZm9ybWF0KCJ3b2ZmMiIpO2ZvbnQtZmFtaWx5OlZvbHZvIE5vdnVtfUBmb250LWZhY2V7Zm9udC1kaXNwbGF5OnN3YXA7Zm9udC13ZWlnaHQ6NTAwO3NyYzp1cmwoaHR0cHM6Ly93d3cudm9sdm9jYXJzLmNvbS9zdGF0aWMvc2hhcmVkL2ZvbnRzL3ZvbHZvLW5vdnVtL3ZvbHZvLW5vdnVtLW1lZGl1bS53b2ZmMilmb3JtYXQoIndvZmYyIik7Zm9udC1mYW1pbHk6Vm9sdm8gTm92dW19QGZvbnQtZmFjZXtmb250LWRpc3BsYXk6c3dhcDtmb250LXdlaWdodDo1MDA7Zm9udC1zdHlsZTppdGFsaWM7dW5pY29kZS1yYW5nZTpVKzM3MC0zRkY7c3JjOnVybChodHRwczovL3d3dy52b2x2b2NhcnMuY29tL3N0YXRpYy9zaGFyZWQvZm9udHMvdm9sdm8tbm92dW0vdm9sdm8tbm92dW0tZ3JlZWstbWVkaXVtLWl0YWxpYy53b2ZmMilmb3JtYXQoIndvZmYyIik7Zm9udC1mYW1pbHk6Vm9sdm8gTm92dW19QGZvbnQtZmFjZXtmb250LWRpc3BsYXk6c3dhcDtmb250LXdlaWdodDo1MDA7Zm9udC1zdHlsZTppdGFsaWM7dW5pY29kZS1yYW5nZTpVKzQ/PztzcmM6dXJsKGh0dHBzOi8vd3d3LnZvbHZvY2Fycy5jb20vc3RhdGljL3NoYXJlZC9mb250cy92b2x2by1ub3Z1bS92b2x2by1ub3Z1bS1jeXJpbGxpYy1tZWRpdW0taXRhbGljLndvZmYyKWZvcm1hdCgid29mZjIiKTtmb250LWZhbWlseTpWb2x2byBOb3Z1bX1AZm9udC1mYWNle2ZvbnQtZGlzcGxheTpzd2FwO2ZvbnQtd2VpZ2h0OjUwMDtmb250LXN0eWxlOml0YWxpYztzcmM6dXJsKGh0dHBzOi8vd3d3LnZvbHZvY2Fycy5jb20vc3RhdGljL3NoYXJlZC9mb250cy92b2x2by1ub3Z1bS92b2x2by1ub3Z1bS1tZWRpdW0taXRhbGljLndvZmYyKWZvcm1hdCgid29mZjIiKTtmb250LWZhbWlseTpWb2x2byBOb3Z1bX1AZm9udC1mYWNle2ZvbnQtZGlzcGxheTpzd2FwO2ZvbnQtd2VpZ2h0OjQwMDt1bmljb2RlLXJhbmdlOlUrND8/O3NyYzp1cmwoaHR0cHM6Ly93d3cudm9sdm9jYXJzLmNvbS9zdGF0aWMvc2hhcmVkL2ZvbnRzL3ZvbHZvLWJyb2FkL3ZvbHZvLWJyb2FkLWN5cmlsbGljLndvZmYyKWZvcm1hdCgid29mZjIiKTtmb250LWZhbWlseTpWb2x2byBCcm9hZH1AZm9udC1mYWNle2ZvbnQtZGlzcGxheTpzd2FwO2ZvbnQtd2VpZ2h0OjQwMDt1bmljb2RlLXJhbmdlOlUrMzcwLTNGRjtzcmM6dXJsKGh0dHBzOi8vd3d3LnZvbHZvY2Fycy5jb20vc3RhdGljL3NoYXJlZC9mb250cy92b2x2by1icm9hZC92b2x2by1icm9hZC1ncmVlay53b2ZmMilmb3JtYXQoIndvZmYyIik7Zm9udC1mYW1pbHk6Vm9sdm8gQnJvYWR9QGZvbnQtZmFjZXtmb250LWRpc3BsYXk6c3dhcDtmb250LXdlaWdodDo0MDA7dW5pY29kZS1yYW5nZTpVKzIwLTM2RixVKzUzMC1GQjAyO3NyYzp1cmwoaHR0cHM6Ly93d3cudm9sdm9jYXJzLmNvbS9zdGF0aWMvc2hhcmVkL2ZvbnRzL3ZvbHZvLWJyb2FkL3ZvbHZvLWJyb2FkLWxhdGluLXJlc3Qud29mZjIpZm9ybWF0KCJ3b2ZmMiIpO2ZvbnQtZmFtaWx5OlZvbHZvIEJyb2FkfQ==";var r={"font-face.css":"css/v0/font-face.6dafba9a.css","styles.css":"css/v0/styles.04a69853.css","styles_hover.css":"css/v0/styles_hover.36ae5a79.css","tokens.css":"css/v0/tokens.dba93bff.css"};var p="https://www.volvocars.com/static/shared/pkg/";function h({base:o=p}={}){if(o&&typeof o!="string"&&(o=o.href),typeof o=="string"&&o!==""&&!o.endsWith("/"))throw new TypeError("Missing trailing slash in base URL");return Object.entries(r).flatMap(([t,f])=>{let s={href:o+f,"data-volvo-css-name":t,rel:"stylesheet"};return t.endsWith("_hover.css")&&(s.media="(hover:hover)"),t==="font-face.css"?{...s,href:`data:text/css;base64,${n}`}:[{...s,rel:"preload",as:"style"},s]}).sort((t,f)=>t.rel==="preload"&&f.rel==="preload"?0:t.rel==="preload"?-1:1)}0&&(module.exports={links});
2
+ //# sourceMappingURL=links.server.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/links.server.ts"],"sourcesContent":["// @ts-ignore\nimport fontFaceCss from './font-face.base64css';\nimport { imports } from './imports.json' assert { type: 'json' };\nimport type { LinkProps } from './links';\n\nconst defaultBase = 'https://www.volvocars.com/static/shared/pkg/';\n\nexport function links({\n base = defaultBase,\n}: { base?: URL | string } = {}): LinkProps[] {\n if (base && typeof base !== 'string') {\n base = base.href;\n }\n if (typeof base === 'string' && base !== '' && !base.endsWith('/')) {\n throw new TypeError('Missing trailing slash in base URL');\n }\n return Object.entries(imports)\n .flatMap(([name, filename]) => {\n const props: LinkProps = {\n href: base + filename,\n 'data-volvo-css-name': name,\n rel: 'stylesheet',\n };\n if (name.endsWith('_hover.css')) {\n props.media = '(hover:hover)';\n }\n // Return @font-face rules as base64 encoded inline CSS to start downloading fonts earlier,\n // improving LCP.\n if (name === 'font-face.css') {\n return {\n ...props,\n href: `data:text/css;base64,${fontFaceCss}`,\n };\n }\n return [\n {\n ...props,\n rel: 'preload',\n as: 'style',\n },\n props,\n ];\n })\n .sort((a, b) =>\n a.rel === 'preload' && b.rel === 'preload'\n ? 0\n : a.rel === 'preload'\n ? -1\n : 1\n ) as LinkProps[];\n}\n"],"mappings":"4ZAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,WAAAE,IAAA,eAAAC,EAAAH,kyIAKA,IAAMI,EAAc,+CAEb,SAASC,EAAM,CACpB,KAAAC,EAAOF,CACT,EAA6B,CAAC,EAAgB,CAI5C,GAHIE,GAAQ,OAAOA,GAAS,WAC1BA,EAAOA,EAAK,MAEV,OAAOA,GAAS,UAAYA,IAAS,IAAM,CAACA,EAAK,SAAS,GAAG,EAC/D,MAAM,IAAI,UAAU,oCAAoC,EAE1D,OAAO,OAAO,QAAQC,CAAO,EAC1B,QAAQ,CAAC,CAACC,EAAMC,CAAQ,IAAM,CAC7B,IAAMC,EAAmB,CACvB,KAAMJ,EAAOG,EACb,sBAAuBD,EACvB,IAAK,YACP,EAMA,OALIA,EAAK,SAAS,YAAY,IAC5BE,EAAM,MAAQ,iBAIZF,IAAS,gBACJ,CACL,GAAGE,EACH,KAAM,wBAAwBC,GAChC,EAEK,CACL,CACE,GAAGD,EACH,IAAK,UACL,GAAI,OACN,EACAA,CACF,CACF,CAAC,EACA,KAAK,CAACE,EAAGC,IACRD,EAAE,MAAQ,WAAaC,EAAE,MAAQ,UAC7B,EACAD,EAAE,MAAQ,UACV,GACA,CACN,CACJ","names":["links_server_exports","__export","links","__toCommonJS","defaultBase","links","base","imports","name","filename","props","font_face_default","a","b"]}
@@ -0,0 +1,4 @@
1
+ import type { LinkProps } from './links';
2
+ export declare function links({ base, }?: {
3
+ base?: URL | string;
4
+ }): LinkProps[];
@@ -0,0 +1,2 @@
1
+ import{a}from"./chunk-BZXPLQYB.js";var l="QGZvbnQtZmFjZXtmb250LWRpc3BsYXk6c3dhcDtmb250LXdlaWdodDozMDA7dW5pY29kZS1yYW5nZTpVKzM3MC0zRkY7c3JjOnVybChodHRwczovL3d3dy52b2x2b2NhcnMuY29tL3N0YXRpYy9zaGFyZWQvZm9udHMvdm9sdm8tbm92dW0vdm9sdm8tbm92dW0tZ3JlZWstc2VtaS1saWdodC53b2ZmMilmb3JtYXQoIndvZmYyIik7Zm9udC1mYW1pbHk6Vm9sdm8gTm92dW19QGZvbnQtZmFjZXtmb250LWRpc3BsYXk6c3dhcDtmb250LXdlaWdodDozMDA7dW5pY29kZS1yYW5nZTpVKzQ/PztzcmM6dXJsKGh0dHBzOi8vd3d3LnZvbHZvY2Fycy5jb20vc3RhdGljL3NoYXJlZC9mb250cy92b2x2by1ub3Z1bS92b2x2by1ub3Z1bS1jeXJpbGxpYy1zZW1pLWxpZ2h0LndvZmYyKWZvcm1hdCgid29mZjIiKTtmb250LWZhbWlseTpWb2x2byBOb3Z1bX1AZm9udC1mYWNle2ZvbnQtZGlzcGxheTpzd2FwO2ZvbnQtd2VpZ2h0OjMwMDtzcmM6dXJsKGh0dHBzOi8vd3d3LnZvbHZvY2Fycy5jb20vc3RhdGljL3NoYXJlZC9mb250cy92b2x2by1ub3Z1bS92b2x2by1ub3Z1bS1zZW1pLWxpZ2h0LndvZmYyKWZvcm1hdCgid29mZjIiKTtmb250LWZhbWlseTpWb2x2byBOb3Z1bX1AZm9udC1mYWNle2ZvbnQtZGlzcGxheTpzd2FwO2ZvbnQtd2VpZ2h0OjMwMDtmb250LXN0eWxlOml0YWxpYzt1bmljb2RlLXJhbmdlOlUrMzcwLTNGRjtzcmM6dXJsKGh0dHBzOi8vd3d3LnZvbHZvY2Fycy5jb20vc3RhdGljL3NoYXJlZC9mb250cy92b2x2by1ub3Z1bS92b2x2by1ub3Z1bS1ncmVlay1zZW1pLWxpZ2h0LWl0YWxpYy53b2ZmMilmb3JtYXQoIndvZmYyIik7Zm9udC1mYW1pbHk6Vm9sdm8gTm92dW19QGZvbnQtZmFjZXtmb250LWRpc3BsYXk6c3dhcDtmb250LXdlaWdodDozMDA7Zm9udC1zdHlsZTppdGFsaWM7dW5pY29kZS1yYW5nZTpVKzQ/PztzcmM6dXJsKGh0dHBzOi8vd3d3LnZvbHZvY2Fycy5jb20vc3RhdGljL3NoYXJlZC9mb250cy92b2x2by1ub3Z1bS92b2x2by1ub3Z1bS1jeXJpbGxpYy1zZW1pLWxpZ2h0LWl0YWxpYy53b2ZmMilmb3JtYXQoIndvZmYyIik7Zm9udC1mYW1pbHk6Vm9sdm8gTm92dW19QGZvbnQtZmFjZXtmb250LWRpc3BsYXk6c3dhcDtmb250LXdlaWdodDozMDA7Zm9udC1zdHlsZTppdGFsaWM7c3JjOnVybChodHRwczovL3d3dy52b2x2b2NhcnMuY29tL3N0YXRpYy9zaGFyZWQvZm9udHMvdm9sdm8tbm92dW0vdm9sdm8tbm92dW0tc2VtaS1saWdodC1pdGFsaWMud29mZjIpZm9ybWF0KCJ3b2ZmMiIpO2ZvbnQtZmFtaWx5OlZvbHZvIE5vdnVtfUBmb250LWZhY2V7Zm9udC1kaXNwbGF5OnN3YXA7Zm9udC13ZWlnaHQ6NTAwO3VuaWNvZGUtcmFuZ2U6VSszNzAtM0ZGO3NyYzp1cmwoaHR0cHM6Ly93d3cudm9sdm9jYXJzLmNvbS9zdGF0aWMvc2hhcmVkL2ZvbnRzL3ZvbHZvLW5vdnVtL3ZvbHZvLW5vdnVtLWdyZWVrLW1lZGl1bS53b2ZmMilmb3JtYXQoIndvZmYyIik7Zm9udC1mYW1pbHk6Vm9sdm8gTm92dW19QGZvbnQtZmFjZXtmb250LWRpc3BsYXk6c3dhcDtmb250LXdlaWdodDo1MDA7dW5pY29kZS1yYW5nZTpVKzQ/PztzcmM6dXJsKGh0dHBzOi8vd3d3LnZvbHZvY2Fycy5jb20vc3RhdGljL3NoYXJlZC9mb250cy92b2x2by1ub3Z1bS92b2x2by1ub3Z1bS1jeXJpbGxpYy1tZWRpdW0ud29mZjIpZm9ybWF0KCJ3b2ZmMiIpO2ZvbnQtZmFtaWx5OlZvbHZvIE5vdnVtfUBmb250LWZhY2V7Zm9udC1kaXNwbGF5OnN3YXA7Zm9udC13ZWlnaHQ6NTAwO3NyYzp1cmwoaHR0cHM6Ly93d3cudm9sdm9jYXJzLmNvbS9zdGF0aWMvc2hhcmVkL2ZvbnRzL3ZvbHZvLW5vdnVtL3ZvbHZvLW5vdnVtLW1lZGl1bS53b2ZmMilmb3JtYXQoIndvZmYyIik7Zm9udC1mYW1pbHk6Vm9sdm8gTm92dW19QGZvbnQtZmFjZXtmb250LWRpc3BsYXk6c3dhcDtmb250LXdlaWdodDo1MDA7Zm9udC1zdHlsZTppdGFsaWM7dW5pY29kZS1yYW5nZTpVKzM3MC0zRkY7c3JjOnVybChodHRwczovL3d3dy52b2x2b2NhcnMuY29tL3N0YXRpYy9zaGFyZWQvZm9udHMvdm9sdm8tbm92dW0vdm9sdm8tbm92dW0tZ3JlZWstbWVkaXVtLWl0YWxpYy53b2ZmMilmb3JtYXQoIndvZmYyIik7Zm9udC1mYW1pbHk6Vm9sdm8gTm92dW19QGZvbnQtZmFjZXtmb250LWRpc3BsYXk6c3dhcDtmb250LXdlaWdodDo1MDA7Zm9udC1zdHlsZTppdGFsaWM7dW5pY29kZS1yYW5nZTpVKzQ/PztzcmM6dXJsKGh0dHBzOi8vd3d3LnZvbHZvY2Fycy5jb20vc3RhdGljL3NoYXJlZC9mb250cy92b2x2by1ub3Z1bS92b2x2by1ub3Z1bS1jeXJpbGxpYy1tZWRpdW0taXRhbGljLndvZmYyKWZvcm1hdCgid29mZjIiKTtmb250LWZhbWlseTpWb2x2byBOb3Z1bX1AZm9udC1mYWNle2ZvbnQtZGlzcGxheTpzd2FwO2ZvbnQtd2VpZ2h0OjUwMDtmb250LXN0eWxlOml0YWxpYztzcmM6dXJsKGh0dHBzOi8vd3d3LnZvbHZvY2Fycy5jb20vc3RhdGljL3NoYXJlZC9mb250cy92b2x2by1ub3Z1bS92b2x2by1ub3Z1bS1tZWRpdW0taXRhbGljLndvZmYyKWZvcm1hdCgid29mZjIiKTtmb250LWZhbWlseTpWb2x2byBOb3Z1bX1AZm9udC1mYWNle2ZvbnQtZGlzcGxheTpzd2FwO2ZvbnQtd2VpZ2h0OjQwMDt1bmljb2RlLXJhbmdlOlUrND8/O3NyYzp1cmwoaHR0cHM6Ly93d3cudm9sdm9jYXJzLmNvbS9zdGF0aWMvc2hhcmVkL2ZvbnRzL3ZvbHZvLWJyb2FkL3ZvbHZvLWJyb2FkLWN5cmlsbGljLndvZmYyKWZvcm1hdCgid29mZjIiKTtmb250LWZhbWlseTpWb2x2byBCcm9hZH1AZm9udC1mYWNle2ZvbnQtZGlzcGxheTpzd2FwO2ZvbnQtd2VpZ2h0OjQwMDt1bmljb2RlLXJhbmdlOlUrMzcwLTNGRjtzcmM6dXJsKGh0dHBzOi8vd3d3LnZvbHZvY2Fycy5jb20vc3RhdGljL3NoYXJlZC9mb250cy92b2x2by1icm9hZC92b2x2by1icm9hZC1ncmVlay53b2ZmMilmb3JtYXQoIndvZmYyIik7Zm9udC1mYW1pbHk6Vm9sdm8gQnJvYWR9QGZvbnQtZmFjZXtmb250LWRpc3BsYXk6c3dhcDtmb250LXdlaWdodDo0MDA7dW5pY29kZS1yYW5nZTpVKzIwLTM2RixVKzUzMC1GQjAyO3NyYzp1cmwoaHR0cHM6Ly93d3cudm9sdm9jYXJzLmNvbS9zdGF0aWMvc2hhcmVkL2ZvbnRzL3ZvbHZvLWJyb2FkL3ZvbHZvLWJyb2FkLWxhdGluLXJlc3Qud29mZjIpZm9ybWF0KCJ3b2ZmMiIpO2ZvbnQtZmFtaWx5OlZvbHZvIEJyb2FkfQ==";var r="https://www.volvocars.com/static/shared/pkg/";function c({base:o=r}={}){if(o&&typeof o!="string"&&(o=o.href),typeof o=="string"&&o!==""&&!o.endsWith("/"))throw new TypeError("Missing trailing slash in base URL");return Object.entries(a).flatMap(([t,s])=>{let f={href:o+s,"data-volvo-css-name":t,rel:"stylesheet"};return t.endsWith("_hover.css")&&(f.media="(hover:hover)"),t==="font-face.css"?{...f,href:`data:text/css;base64,${l}`}:[{...f,rel:"preload",as:"style"},f]}).sort((t,s)=>t.rel==="preload"&&s.rel==="preload"?0:t.rel==="preload"?-1:1)}export{c as links};
2
+ //# sourceMappingURL=links.server.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/links.server.ts"],"sourcesContent":["// @ts-ignore\nimport fontFaceCss from './font-face.base64css';\nimport { imports } from './imports.json' assert { type: 'json' };\nimport type { LinkProps } from './links';\n\nconst defaultBase = 'https://www.volvocars.com/static/shared/pkg/';\n\nexport function links({\n base = defaultBase,\n}: { base?: URL | string } = {}): LinkProps[] {\n if (base && typeof base !== 'string') {\n base = base.href;\n }\n if (typeof base === 'string' && base !== '' && !base.endsWith('/')) {\n throw new TypeError('Missing trailing slash in base URL');\n }\n return Object.entries(imports)\n .flatMap(([name, filename]) => {\n const props: LinkProps = {\n href: base + filename,\n 'data-volvo-css-name': name,\n rel: 'stylesheet',\n };\n if (name.endsWith('_hover.css')) {\n props.media = '(hover:hover)';\n }\n // Return @font-face rules as base64 encoded inline CSS to start downloading fonts earlier,\n // improving LCP.\n if (name === 'font-face.css') {\n return {\n ...props,\n href: `data:text/css;base64,${fontFaceCss}`,\n };\n }\n return [\n {\n ...props,\n rel: 'preload',\n as: 'style',\n },\n props,\n ];\n })\n .sort((a, b) =>\n a.rel === 'preload' && b.rel === 'preload'\n ? 0\n : a.rel === 'preload'\n ? -1\n : 1\n ) as LinkProps[];\n}\n"],"mappings":"goIAKA,IAAMA,EAAc,+CAEb,SAASC,EAAM,CACpB,KAAAC,EAAOF,CACT,EAA6B,CAAC,EAAgB,CAI5C,GAHIE,GAAQ,OAAOA,GAAS,WAC1BA,EAAOA,EAAK,MAEV,OAAOA,GAAS,UAAYA,IAAS,IAAM,CAACA,EAAK,SAAS,GAAG,EAC/D,MAAM,IAAI,UAAU,oCAAoC,EAE1D,OAAO,OAAO,QAAQC,CAAO,EAC1B,QAAQ,CAAC,CAACC,EAAMC,CAAQ,IAAM,CAC7B,IAAMC,EAAmB,CACvB,KAAMJ,EAAOG,EACb,sBAAuBD,EACvB,IAAK,YACP,EAMA,OALIA,EAAK,SAAS,YAAY,IAC5BE,EAAM,MAAQ,iBAIZF,IAAS,gBACJ,CACL,GAAGE,EACH,KAAM,wBAAwBC,GAChC,EAEK,CACL,CACE,GAAGD,EACH,IAAK,UACL,GAAI,OACN,EACAA,CACF,CACF,CAAC,EACA,KAAK,CAACE,EAAGC,IACRD,EAAE,MAAQ,WAAaC,EAAE,MAAQ,UAC7B,EACAD,EAAE,MAAQ,UACV,GACA,CACN,CACJ","names":["defaultBase","links","base","imports","name","filename","props","font_face_default","a","b"]}
package/dist/styles.cjs CHANGED
@@ -1,2 +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={});
1
+ var s=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var l=Object.prototype.hasOwnProperty;var f=(r,t)=>{for(var o in t)s(r,o,{get:t[o],enumerable:!0})},m=(r,t,o,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let e of p(t))!l.call(r,e)&&e!==o&&s(r,e,{get:()=>t[e],enumerable:!(a=c(t,e))||a.enumerable});return r};var u=r=>m(s({},"__esModule",{value:!0}),r);var b={};f(b,{default:()=>x});module.exports=u(b);var g="v0",i=`volvo_${g}`;function n(r){return r.replace(/([0-9])([A-Z])/g,"$1-$2").replace(/([a-z])([A-Z0-9])/g,"$1-$2").toLowerCase()}function C(r){return r.startsWith("UNSTABLE_")?"UNSTABLE_"+n(r.replace("UNSTABLE_","")):n(r)}var N=new Proxy(Object.create({root:i}),{get(r,t){return t in r?r[t]:C(t)}}),x=N;0&&(module.exports={});
2
2
  //# sourceMappingURL=styles.cjs.map
@@ -1 +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"]}
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","// Bump this version for any backward incompatible changes to the\n// CSS itself, such as if something would break if several versions\n// of the CSS are applied to the same elements.\nexport const cssVersion = 'v0';\n\nexport const rootClassName = `volvo_${cssVersion}`;\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,GCGO,IAAMI,EAAa,KAEbC,EAAgB,SAASD,ICL/B,SAASE,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","cssVersion","rootClassName","toKebabCase","x","toClassName","key","toKebabCase","vss","rootClassName","target","styles_default"]}
package/dist/styles.css CHANGED
@@ -1 +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)}}
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-medium,:where(.volvo_v0) :where(b,strong){font-weight:500}:where(.volvo_v0) .font-light{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)}
package/dist/styles.d.ts CHANGED
@@ -4,8 +4,8 @@ export interface ClassNames {
4
4
  readonly UNSTABLE_tag12: 'UNSTABLE_tag-12';
5
5
  readonly body14: 'body-14';
6
6
  readonly body16: 'body-16';
7
- readonly fontBold: 'font-bold';
8
- readonly fontNormal: 'font-normal';
7
+ readonly fontLight: 'font-light';
8
+ readonly fontMedium: 'font-medium';
9
9
  readonly heading1: 'heading-1';
10
10
  readonly heading2: 'heading-2';
11
11
  readonly heading3: 'heading-3';
package/dist/styles.js CHANGED
@@ -1,2 +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};
1
+ import{a as o}from"./chunk-Q6P47KLU.js";var e="v0",s=`volvo_${e}`;function n(t){return t.startsWith("UNSTABLE_")?"UNSTABLE_"+o(t.replace("UNSTABLE_","")):o(t)}var a=new Proxy(Object.create({root:s}),{get(t,r){return r in t?t[r]:n(r)}}),f=a;export{f as default};
2
2
  //# sourceMappingURL=styles.js.map
@@ -1 +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"]}
1
+ {"version":3,"sources":["../src/root-class-name.js","../src/styles.ts"],"sourcesContent":["// Bump this version for any backward incompatible changes to the\n// CSS itself, such as if something would break if several versions\n// of the CSS are applied to the same elements.\nexport const cssVersion = 'v0';\n\nexport const rootClassName = `volvo_${cssVersion}`;\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":"wCAGO,IAAMA,EAAa,KAEbC,EAAgB,SAASD,ICEtC,SAASE,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":["cssVersion","rootClassName","toClassName","key","toKebabCase","vss","rootClassName","target","styles_default"]}
@@ -0,0 +1 @@
1
+ :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)}
@@ -0,0 +1,7 @@
1
+ export interface ClassNames {
2
+ readonly UNSTABLE_linkSecondary: 'UNSTABLE_link-secondary';
3
+ readonly linkInline: 'link-inline';
4
+ readonly root: 'root';
5
+ }
6
+ declare const vss: ClassNames;
7
+ export default vss;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@volvo-cars/css",
3
3
  "description": "Volvo Cars shared CSS",
4
- "version": "0.1.0",
4
+ "version": "0.1.2",
5
5
  "license": "UNLICENSED",
6
6
  "sideEffects": false,
7
7
  "type": "module",
@@ -9,6 +9,24 @@
9
9
  "./styles.css": "./dist/styles.css",
10
10
  "./tokens.css": "./dist/tokens.css",
11
11
  "./font-face.css": "./dist/font-face.css",
12
+ "./links": {
13
+ "types": "./dist/links.d.ts",
14
+ "node": {
15
+ "import": "./dist/links.server.js",
16
+ "require": "./dist/links.server.cjs"
17
+ },
18
+ "import": "./dist/links.js",
19
+ "require": "./dist/links.cjs"
20
+ },
21
+ "./links.js": {
22
+ "types": "./dist/links.d.ts",
23
+ "node": {
24
+ "import": "./dist/links.server.js",
25
+ "require": "./dist/links.server.cjs"
26
+ },
27
+ "import": "./dist/links.js",
28
+ "require": "./dist/links.cjs"
29
+ },
12
30
  "./utils": {
13
31
  "types": "./dist/utils.d.ts",
14
32
  "import": "./dist/utils.js",
@@ -42,6 +60,12 @@
42
60
  },
43
61
  "typesVersions": {
44
62
  "*": {
63
+ "links": [
64
+ "./dist/links.d.ts"
65
+ ],
66
+ "links.js": [
67
+ "./dist/links.d.ts"
68
+ ],
45
69
  "utils": [
46
70
  "./dist/utils.d.ts"
47
71
  ],
@@ -69,11 +93,12 @@
69
93
  "access": "public"
70
94
  },
71
95
  "scripts": {
72
- "build": "tsup",
73
- "build:prod": "tsup --clean --sourcemap --minify && yarn run build:dts",
96
+ "build": "yarn run build:css && tsup",
97
+ "build:prod": "rm -rf dist && yarn run build:css && tsup --sourcemap --minify && yarn run build:dts",
74
98
  "build:dts": "tsc -p tsconfig.build.json",
75
- "build:css": "node scripts/build.js",
76
- "dev": "tsup --watch",
99
+ "build:css": "node scripts/build-css.js",
100
+ "build:css-types": "node scripts/build-types.js",
101
+ "dev": "yarn run build:css && tsup --watch",
77
102
  "test": "yarn run -T jest packages/css",
78
103
  "types:check": "tsc -b tsconfig.src-check.json tsconfig.tests.json --verbose",
79
104
  "clean": "rm -rf .turbo dist && rm -rf *.tsbuildinfo"
@@ -88,9 +113,9 @@
88
113
  "@volvo-cars/browserslist-config": "workspace:*",
89
114
  "browserslist": "4.21.4",
90
115
  "css-tree": "2.2.1",
91
- "lightningcss": "1.16.0",
116
+ "lightningcss": "1.16.1",
92
117
  "lodash": "4.17.21",
93
- "tsup": "6.2.3",
118
+ "tsup": "6.4.0",
94
119
  "typescript": "4.8.4"
95
120
  },
96
121
  "browserslist": [