@nl-rvo/css-link 1.6.0 → 1.7.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.
Files changed (12) hide show
  1. package/dist/link.css +1 -0
  2. package/dist/link.css.map +1 -0
  3. package/package.json +16 -14
  4. package/src/{index.scss → link.scss} +8 -4
  5. package/CHANGELOG.md +0 -89
  6. package/README.md +0 -20
  7. package/design-tokens.json +0 -100
  8. package/design.md +0 -7
  9. package/dist/index.css +0 -424
  10. package/dist/index.min.css +0 -3
  11. package/dist/index.mjs +0 -1
  12. package/dist/index.mjs.d.ts +0 -2
package/dist/link.css ADDED
@@ -0,0 +1 @@
1
+ @import"@nl-rvo/css-layout-flow/dist/layout-flow.css";.rvo-link{background-color:var(--rvo-link-background-color);color:var(--rvo-link-color);cursor:pointer;display:inline-flex;font-weight:var(--rvo-link-font-weight);text-decoration-line:var(--rvo-link-text-decoration);text-decoration-thickness:var(--rvo-link-text-decoration-thickness);text-underline-offset:var(--rvo-link-text-underline-offset)}.rvo-link__text{display:inline-flex;flex-direction:row;align-items:center;gap:var(--rvo-space-sm)}.rvo-link.rvo-link--normal,.rvo-link.rvo-link--normal:hover:not(:focus,:focus-visible,.rvo-link--focus),.rvo-link.rvo-link--normal.rvo-link--hover:not(:focus,:focus-visible,.rvo-link--focus),.rvo-link.rvo-link--normal:active,.rvo-link.rvo-link--normal.rvo-link--active,.rvo-link.rvo-link--normal:focus,.rvo-link.rvo-link--normal:focus-visible,.rvo-link.rvo-link--normal.rvo-link--focus{font-weight:var(--rvo-font-weight-normal)}.rvo-link--no-underline:not(:focus,:hover,.rvo-link--hover,.rvo-link--focus){text-decoration:none}.rvo-link--with-icon{flex-direction:row;align-items:center;gap:var(--rvo-space-sm)}.rvo-link:hover:not(:focus,:focus-visible,.rvo-link--focus),.rvo-link--hover:not(:focus,:focus-visible,.rvo-link--focus){background-color:var(--rvo-link-hover-background-color);color:var(--rvo-link-hover-color);font-weight:var(--rvo-link-hover-font-weight);text-decoration-thickness:var(--rvo-link-hover-text-decoration-thickness)}.rvo-link--lintblauw:hover:not(:focus,:focus-visible,.rvo-link--focus){color:var(--rvo-color-lintblauw)}.rvo-link:active,.rvo-link--active{background-color:var(--rvo-link-active-background-color);color:var(--rvo-link-active-color);font-weight:var(--rvo-link-active-font-weight);text-decoration-thickness:var(--rvo-link-active-text-decoration-thickness)}.rvo-link--lintblauw:active{color:var(--rvo-color-lintblauw)}.rvo-link:focus,.rvo-link:focus-visible,.rvo-link--focus{color:var(--rvo-link-focus-color);font-weight:var(--rvo-link-focus-font-weight);outline:none;text-decoration-thickness:var(--rvo-link-focus-text-decoration-thickness)}.rvo-link__icon{background-color:var(--rvo-link-icon-background-color)}.rvo-link:hover:not(:focus,:focus-visible,.rvo-link--focus) .rvo-link__icon,.rvo-link--hover:not(:focus,:focus-visible,.rvo-link--focus) .rvo-link__icon{background-color:var(--rvo-link-hover-icon-background-color)}.rvo-link:active .rvo-link__icon,.rvo-link--active .rvo-link__icon{background-color:var(--rvo-link-active-icon-background-color)}.rvo-link:focus .rvo-link__icon,.rvo-link:focus-visible .rvo-link__icon,.rvo-link--focus .rvo-link__icon{background-color:var(--rvo-link-focus-icon-background-color)}.rvo-link--donkerblauw{color:var(--rvo-color-donkerblauw)}.rvo-link--lintblauw{color:var(--rvo-color-lintblauw)}.rvo-link--zwart{color:var(--rvo-color-zwart)}.rvo-link--zwart.rvo-link:hover:not(:focus,:focus-visible,.rvo-link--focus),.rvo-link--zwart .rvo-link--hover:not(:focus,:focus-visible,.rvo-link--focus):hover{color:var(--rvo-color-donkerblauw)}.rvo-link--wit{color:var(--rvo-color-wit)}.rvo-link--wit.rvo-link:hover:not(:focus,:focus-visible,.rvo-link--focus),.rvo-link--wit .rvo-link--hover:not(:focus,:focus-visible,.rvo-link--focus):hover{color:var(--rvo-color-grijs-100)}.rvo-link--grijs-700{color:var(--rvo-color-grijs-700)}.rvo-link--grijs-700.rvo-link:hover:not(:focus,:focus-visible,.rvo-link--focus),.rvo-link--grijs-700 .rvo-link--hover:not(:focus,:focus-visible,.rvo-link--focus):hover{color:var(--rvo-color-donkerblauw)}.rvo-link--call-to-action{align-items:center;background-color:var(--rvo-link-call-to-action-background-color);border-color:var(--rvo-link-call-to-action-border-color);border-radius:var(--rvo-link-call-to-action-border-radius);border-style:var(--rvo-link-call-to-action-border-style);border-width:var(--rvo-link-call-to-action-border-width);box-sizing:border-box;color:var(--rvo-link-call-to-action-color);font-weight:var(--rvo-link-call-to-action-font-weight);min-block-size:var(--rvo-link-call-to-action-min-block-size);padding-block-end:var(--rvo-link-call-to-action-padding-block-end);padding-block-start:var(--rvo-link-call-to-action-padding-block-start);padding-inline-end:var(--rvo-link-call-to-action-padding-inline-end);padding-inline-start:var(--rvo-link-call-to-action-padding-inline-start);text-decoration:underline;text-decoration-color:var(--rvo-link-call-to-action-color);text-decoration-thickness:var(--rvo-link-call-to-action-text-decoration-thickness);text-underline-offset:var(--rvo-link-call-to-action-text-underline-offset)}.rvo-link--call-to-action .rvo-link__icon{background-color:var(--rvo-link-call-to-action-icon-background-color)}.rvo-link--call-to-action.rvo-link:hover:not(:focus,:focus-visible,.rvo-link--focus),.rvo-link--call-to-action.rvo-link--hover:not(:focus,:focus-visible,.rvo-link--focus){background-color:var(--rvo-link-call-to-action-hover-background-color);border-color:var(--rvo-link-call-to-action-hover-border-color);color:var(--rvo-link-call-to-action-hover-color);font-weight:var(--rvo-link-call-to-action-font-weight);text-decoration-thickness:var(--rvo-link-call-to-action-hover-text-decoration-thickness)}.rvo-link--call-to-action.rvo-link:hover:not(:focus,:focus-visible,.rvo-link--focus) .rvo-link__icon,.rvo-link--call-to-action.rvo-link--hover:not(:focus,:focus-visible,.rvo-link--focus) .rvo-link__icon{background-color:var(--rvo-link-call-to-action-hover-icon-background-color)}.rvo-link--call-to-action.rvo-link:focus,.rvo-link--call-to-action.rvo-link:focus-visible,.rvo-link--call-to-action.rvo-link--focus{background-color:var(--rvo-link-call-to-action-background-color);color:var(--rvo-link-call-to-action-color);font-weight:var(--rvo-link-call-to-action-font-weight);outline-color:var(--utrecht-focus-outline-color, revert);outline-offset:var(--utrecht-focus-outline-offset, revert);outline-style:var(--utrecht-focus-outline-style, revert);outline-width:var(--utrecht-focus-outline-width, revert);text-decoration-thickness:var(--rvo-link-call-to-action-focus-text-decoration-thickness)}.rvo-link--call-to-action.rvo-link:focus .rvo-link__icon,.rvo-link--call-to-action.rvo-link:focus-visible .rvo-link__icon,.rvo-link--call-to-action.rvo-link--focus .rvo-link__icon{background-color:var(--rvo-link-call-to-action-icon-background-color)}.rvo-link--call-to-action.rvo-link:active,.rvo-link--call-to-action.rvo-link--active{background-color:var(--rvo-link-call-to-action-active-background-color);border-color:var(--rvo-link-call-to-action-active-border-color);color:var(--rvo-link-call-to-action-active-color);text-decoration-thickness:var(--rvo-link-call-to-action-active-text-decoration-thickness)}.rvo-link--call-to-action-outline{--rvo-link-call-to-action-background-color: var(--rvo-link-call-to-action-outline-background-color);--rvo-link-call-to-action-border-color: var(--rvo-link-call-to-action-outline-border-color);--rvo-link-call-to-action-color: var(--rvo-link-call-to-action-outline-color);--rvo-link-call-to-action-icon-background-color: var(--rvo-link-call-to-action-outline-icon-background-color);--rvo-link-call-to-action-hover-background-color: var(--rvo-link-call-to-action-outline-hover-background-color);--rvo-link-call-to-action-hover-border-color: var(--rvo-link-call-to-action-outline-hover-border-color);--rvo-link-call-to-action-hover-color: var(--rvo-link-call-to-action-outline-hover-color);--rvo-link-call-to-action-hover-icon-background-color: var( --rvo-link-call-to-action-outline-hover-icon-background-color );--rvo-link-call-to-action-active-background-color: var(--rvo-link-call-to-action-outline-active-background-color);--rvo-link-call-to-action-active-border-color: var(--rvo-link-call-to-action-outline-active-border-color);--rvo-link-call-to-action-active-color: var(--rvo-link-call-to-action-outline-active-color)}.rvo-link--full-card-link::after{block-size:100%;content:"";display:inline-block;inline-size:100%;inset-block-start:0;inset-inline-start:0;position:absolute;z-index:1}/*# sourceMappingURL=link.css.map */
package/dist/link.css.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sourceRoot":"","sources":["../src/link.scss"],"names":[],"mappings":"AAKQ,sDAER,UACE,kDACA,4BACA,eACA,oBACA,wCACA,qDACA,oEACA,4DAEA,gBACE,oBACA,mBACA,mBACA,wBAIJ,kYAQE,0CAGF,6EACE,qBAGF,qBACE,mBACA,mBACA,wBAIF,yHAEE,wDACA,kCACA,8CACA,0EAGF,uEACE,iCAIF,mCAEE,yDACA,mCACA,+CACA,2EAGF,4BACE,iCAIF,yDAGE,kCACA,8CACA,aACA,0EAIF,gBACE,uDAGF,yJAEE,6DAGF,mEAEE,8DAGF,yGAGE,6DAGF,uBACE,mCAGF,qBACE,iCAGF,iBACE,6BAEA,gKAEE,mCAIJ,eACE,2BAEA,4JAEE,iCAIJ,qBACE,iCAEA,wKAEE,mCAKJ,0BACE,mBACA,iEACA,yDACA,2DACA,yDACA,yDACA,sBACA,2CACA,uDACA,6DACA,mEACA,uEACA,qEACA,yEACA,0BACA,2DACA,mFACA,2EAEA,0CACE,sEAGF,2KAEE,uEACA,+DACA,iDACA,uDACA,yFAEA,2MACE,4EAIJ,oIAGE,iEACA,2CACA,uDACA,yDACA,2DACA,yDACA,yDACA,yFAEA,oLACE,sEAIJ,qFAEE,wEACA,gEACA,kDACA,0FAKJ,kCACE,oGACA,4FACA,8EACA,8GACA,gHACA,wGACA,0FACA,4HAGA,kHACA,0GACA,4FAGF,iCACE,gBACA,WACA,qBACA,iBACA,oBACA,qBACA,kBACA","file":"link.css"}
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "1.6.0",
2
+ "version": "1.7.0",
3
3
  "author": "Community for NL Design System",
4
4
  "license": "CC0-1.0",
5
5
  "name": "@nl-rvo/css-link",
@@ -9,27 +9,29 @@
9
9
  "css",
10
10
  "link"
11
11
  ],
12
+ "repository": {
13
+ "type": "git+ssh",
14
+ "url": "git@github.com:nl-design-system/rvo.git",
15
+ "directory": "components/link/style"
16
+ },
12
17
  "files": [
13
- "src/index.scss",
14
- "dist/",
15
- "design-tokens.json",
16
- "*.md"
18
+ "src/",
19
+ "dist/"
17
20
  ],
18
- "main": "dist/index.css",
21
+ "exports": {
22
+ ".": "./dist/link.css",
23
+ "./dist/*": "./dist/*"
24
+ },
19
25
  "publishConfig": {
20
26
  "access": "public",
21
27
  "provenance": true
22
28
  },
23
- "repository": {
24
- "type": "git+ssh",
25
- "url": "git@github.com:nl-design-system/rvo.git",
26
- "directory": "components/link"
27
- },
28
29
  "devDependencies": {
29
- "@nl-rvo/build-utils-css": "0.1.0"
30
+ "@nl-rvo/css-layout-flow": "1.6.0"
30
31
  },
31
32
  "scripts": {
32
- "build": "build-css-package",
33
- "clean": "rimraf dist"
33
+ "build": "sass --pkg-importer=node --style=compressed ./src/:./dist/",
34
+ "watch": "sass --pkg-importer=node --style=compressed --watch ./src/:./dist/",
35
+ "clean": "rimraf ./dist/"
34
36
  }
35
37
  }
package/src/{index.scss → link.scss} RENAMED
@@ -3,7 +3,7 @@
3
3
  * Copyright (c) 2021 Community for NL Design System
4
4
  */
5
5
 
6
- @use "../../layout-flow/src";
6
+ @import "@nl-rvo/css-layout-flow/dist/layout-flow.css";
7
7
 
8
8
  .rvo-link {
9
9
  background-color: var(--rvo-link-background-color);
@@ -16,7 +16,10 @@
16
16
  text-underline-offset: var(--rvo-link-text-underline-offset);
17
17
 
18
18
  &__text {
19
- display: block;
19
+ display: inline-flex;
20
+ flex-direction: row;
21
+ align-items: center;
22
+ gap: var(--rvo-space-sm);
20
23
  }
21
24
  }
22
25
 
@@ -36,8 +39,9 @@
36
39
  }
37
40
 
38
41
  .rvo-link--with-icon {
39
- @extend .rvo-layout-row;
40
- @extend .rvo-layout-gap--sm;
42
+ flex-direction: row;
43
+ align-items: center;
44
+ gap: var(--rvo-space-sm);
41
45
  }
42
46
 
43
47
  // Hover
package/CHANGELOG.md DELETED
@@ -1,89 +0,0 @@
1
- # `@nl-rvo/css-link`
2
-
3
- ## 1.6.0
4
-
5
- ### Minor Changes
6
-
7
- - b4c00c9: Add outline call-to-action variant to Link component
8
-
9
- - New `call-to-action-outline` variant with white background and violet text/border, for use alongside the existing `call-to-action` variant
10
- - Tokens follow the `--rvo-link-call-to-action-outline-*` naming pattern
11
-
12
- - c6093de: ROOS-349: refactor Link component, moved defaultArgs to storybook components
13
-
14
- ### Patch Changes
15
-
16
- - 83a85f5: Implement the updated Icon component
17
- - 084a230: Ensure package is published with provenance
18
-
19
- ## 1.5.1
20
-
21
- ### Patch Changes
22
-
23
- - 93fdefc: Use CSS Logical properties, to support both `dir=ltr` and `dir=rtl`.
24
- - 57730f6: Link component text set in own span section to resolve child html structures
25
-
26
- ## 1.5.0
27
-
28
- ### Minor Changes
29
-
30
- - fa36e07: Project structure updates
31
-
32
- - Moved all Storybook stories to the /stories directory.
33
- - Moved all documentation files to the /docs directory.
34
- - Removed React components from library-component-react and moved them into this package.
35
- - Update all .stories imports to the right react package "component-library-react"
36
- - Fix all Redundant / PascalCase lint warnings for .stories files.
37
-
38
- ## 1.4.1
39
-
40
- ### Patch Changes
41
-
42
- - 11eb258: Update imports to support storybook v10
43
-
44
- ## 1.4.0
45
-
46
- ### Minor Changes
47
-
48
- - dae7f09: design token and css name changes from logoblauw to lintblauw
49
-
50
- ## 1.3.0
51
-
52
- ### Minor Changes
53
-
54
- - a0061d6: Allow for client side navigation via LinkComponent prop on Link and Card and added CardExperimental compound component
55
-
56
- ## 1.2.1
57
-
58
- ### Patch Changes
59
-
60
- - 8ad586f: Fixed issue with full-card-link not applying proper styling
61
-
62
- ## 1.2.0
63
-
64
- ### Minor Changes
65
-
66
- - 0cdf4eb: Remove utrecht-components-css reference and include utrecht css per component when needed
67
-
68
- ## 1.0.0
69
-
70
- ### Major Changes
71
-
72
- - daa0537: Create npm package for each component.
73
-
74
- ## Pre-releases
75
-
76
- _@nl-rvo/component-library-css@1.0.0-alpha.389_:
77
- Added normal link option (not bold) (use `.rvo-link--normal`)
78
-
79
- _@nl-rvo/component-library-css@1.0.0-alpha.282_:
80
- Added grijs-700 link color (use `.rvo-link--grijs-700`)
81
-
82
- _@nl-rvo/component-library-css@1.0.0-alpha.282_:
83
- Added full-container link option using `.rvo-link--full-container`
84
-
85
- _@nl-rvo/component-library-css@1.0.0-alpha.282_:
86
- Simplified snippet by removing `.rvo-layout-row` and `.rvo-layout-gap--sm`
87
-
88
- _@nl-rvo/component-library-css@1.0.0-alpha.17_:
89
- Added component
package/README.md DELETED
@@ -1,20 +0,0 @@
1
- # Link
2
-
3
- ## Wanneer gebruik je het component
4
-
5
- Gebruik een link om naar een andere pagina of een andere locatie binnen dezelfde pagina te verwijzen.
6
-
7
- ## Anatomie van een link
8
-
9
- Een link bestaat uit:
10
-
11
- - Linktekst
12
- - Icoon (niet verplicht)
13
-
14
- ## Richtlijnen
15
-
16
- - Een link gebruik je om te verwijzen naar een andere pagina. Om een actie uit laten te voeren gebruik je het Button component.
17
- - Voorzie links naar websites of applicaties die niet van RVO zijn altijd van externe link icoon. Bijvoorbeeld: een link van de RVO website naar de Kamer van Koophandel krijgt een externe link icoon. Een link van de RVO website naar mijn.rvo.nl krijgt geen externe link icoon.
18
- - Standaard heeft een link een underline. Deze is voornamelijk handig in lopende tekst waar er duidelijk onderscheid gemaakt moet worden tussen dik gedrukte tekst en een link.
19
- - Links in menu items of met een icoon hoeven geen underline te hebben omdat er vanuit de context herleid kan worden dat het om een link gaat.
20
- - Gebruik de `rvo-link--full-container` class om het klikgebied van de link te vergroten tot de eerste container met `position: relative`.
package/design-tokens.json DELETED
@@ -1,100 +0,0 @@
1
- {
2
- "rvo": {
3
- "link": {
4
- "background-color": { "css": { "syntax": "<color>", "inherits": true } },
5
- "color": { "css": { "syntax": "<color>", "inherits": true } },
6
- "font-weight": { "css": { "syntax": "*", "inherits": true } },
7
- "text-decoration": { "css": { "syntax": "*", "inherits": true } },
8
- "text-decoration-thickness": { "css": { "syntax": "*", "inherits": true } },
9
- "text-underline-offset": { "css": { "syntax": "<length>", "inherits": true } },
10
- "icon": {
11
- "background-color": { "css": { "syntax": "<color>", "inherits": true } }
12
- },
13
- "hover": {
14
- "background-color": { "css": { "syntax": "<color>", "inherits": true } },
15
- "color": { "css": { "syntax": "<color>", "inherits": true } },
16
- "font-weight": { "css": { "syntax": "*", "inherits": true } },
17
- "text-decoration-thickness": { "css": { "syntax": "*", "inherits": true } },
18
- "icon": {
19
- "background-color": { "css": { "syntax": "<color>", "inherits": true } }
20
- }
21
- },
22
- "active": {
23
- "background-color": { "css": { "syntax": "<color>", "inherits": true } },
24
- "color": { "css": { "syntax": "<color>", "inherits": true } },
25
- "font-weight": { "css": { "syntax": "*", "inherits": true } },
26
- "text-decoration-thickness": { "css": { "syntax": "*", "inherits": true } },
27
- "icon": {
28
- "background-color": { "css": { "syntax": "<color>", "inherits": true } }
29
- }
30
- },
31
- "focus": {
32
- "background-color": { "css": { "syntax": "<color>", "inherits": true } },
33
- "color": { "css": { "syntax": "<color>", "inherits": true } },
34
- "font-weight": { "css": { "syntax": "*", "inherits": true } },
35
- "text-decoration-thickness": { "css": { "syntax": "*", "inherits": true } },
36
- "icon": {
37
- "background-color": { "css": { "syntax": "<color>", "inherits": true } }
38
- }
39
- },
40
- "call-to-action": {
41
- "background-color": { "css": { "syntax": "<color>", "inherits": true } },
42
- "border-color": { "css": { "syntax": "<color>", "inherits": true } },
43
- "border-radius": { "css": { "syntax": "*", "inherits": true } },
44
- "border-style": { "css": { "syntax": "*", "inherits": true } },
45
- "border-width": { "css": { "syntax": "<length>", "inherits": true } },
46
- "color": { "css": { "syntax": "<color>", "inherits": true } },
47
- "font-weight": { "css": { "syntax": "*", "inherits": true } },
48
- "min-block-size": { "css": { "syntax": "*", "inherits": true } },
49
- "icon": {
50
- "background-color": { "css": { "syntax": "<color>", "inherits": true } }
51
- },
52
- "padding-block-end": { "css": { "syntax": "<length>", "inherits": true } },
53
- "padding-block-start": { "css": { "syntax": "<length>", "inherits": true } },
54
- "padding-inline-end": { "css": { "syntax": "<length>", "inherits": true } },
55
- "padding-inline-start": { "css": { "syntax": "<length>", "inherits": true } },
56
- "text-decoration-thickness": { "css": { "syntax": "*", "inherits": true } },
57
- "text-underline-offset": { "css": { "syntax": "*", "inherits": true } },
58
- "hover": {
59
- "background-color": { "css": { "syntax": "<color>", "inherits": true } },
60
- "border-color": { "css": { "syntax": "<color>", "inherits": true } },
61
- "color": { "css": { "syntax": "<color>", "inherits": true } },
62
- "icon": {
63
- "background-color": { "css": { "syntax": "<color>", "inherits": true } }
64
- },
65
- "text-decoration-thickness": { "css": { "syntax": "*", "inherits": true } }
66
- },
67
- "active": {
68
- "background-color": { "css": { "syntax": "<color>", "inherits": true } },
69
- "border-color": { "css": { "syntax": "<color>", "inherits": true } },
70
- "color": { "css": { "syntax": "<color>", "inherits": true } },
71
- "text-decoration-thickness": { "css": { "syntax": "*", "inherits": true } }
72
- },
73
- "focus": {
74
- "text-decoration-thickness": { "css": { "syntax": "*", "inherits": true } }
75
- },
76
- "outline": {
77
- "background-color": { "css": { "syntax": "<color>", "inherits": true } },
78
- "border-color": { "css": { "syntax": "<color>", "inherits": true } },
79
- "color": { "css": { "syntax": "<color>", "inherits": true } },
80
- "icon": {
81
- "background-color": { "css": { "syntax": "<color>", "inherits": true } }
82
- },
83
- "hover": {
84
- "background-color": { "css": { "syntax": "<color>", "inherits": true } },
85
- "border-color": { "css": { "syntax": "<color>", "inherits": true } },
86
- "color": { "css": { "syntax": "<color>", "inherits": true } },
87
- "icon": {
88
- "background-color": { "css": { "syntax": "<color>", "inherits": true } }
89
- }
90
- },
91
- "active": {
92
- "background-color": { "css": { "syntax": "<color>", "inherits": true } },
93
- "border-color": { "css": { "syntax": "<color>", "inherits": true } },
94
- "color": { "css": { "syntax": "<color>", "inherits": true } }
95
- }
96
- }
97
- }
98
- }
99
- }
100
- }
package/design.md DELETED
@@ -1,7 +0,0 @@
1
- <!-- @license CC0-1.0 -->
2
-
3
- <!-- markdownlint-disable first-line-h1 -->
4
-
5
- ## Design
6
-
7
- Not yet available in Figma.
package/dist/index.css DELETED
@@ -1,424 +0,0 @@
1
- /**
2
- * @license CC0-1.0
3
- * Copyright (c) 2021 Community for NL Design System
4
- */
5
- .rvo-layout-column {
6
- align-items: stretch;
7
- display: flex;
8
- flex-direction: column;
9
- }
10
-
11
- .rvo-layout-column-inline {
12
- align-items: stretch;
13
- display: inline-flex;
14
- flex-direction: column;
15
- }
16
-
17
- .rvo-layout-row, .rvo-link--with-icon {
18
- align-items: center;
19
- display: flex;
20
- flex-direction: row;
21
- }
22
-
23
- .rvo-layout-row-inline {
24
- align-items: stretch;
25
- display: inline-flex;
26
- flex-direction: row;
27
- }
28
-
29
- .rvo-layout-align-items-start {
30
- align-items: flex-start;
31
- }
32
-
33
- .rvo-layout-align-items-center {
34
- align-items: center;
35
- }
36
-
37
- .rvo-layout-align-items-end {
38
- align-items: flex-end;
39
- }
40
-
41
- .rvo-layout-align-content-start {
42
- align-content: flex-start;
43
- }
44
-
45
- .rvo-layout-align-content-center {
46
- align-content: center;
47
- }
48
-
49
- .rvo-layout-align-content-end {
50
- align-content: flex-end;
51
- }
52
-
53
- .rvo-layout-align-content-space-between {
54
- align-content: space-between;
55
- }
56
-
57
- .rvo-layout-justify-content-start {
58
- justify-content: flex-start;
59
- }
60
-
61
- .rvo-layout-justify-content-center {
62
- justify-content: center;
63
- }
64
-
65
- .rvo-layout-justify-content-end {
66
- justify-content: flex-end;
67
- }
68
-
69
- .rvo-layout-justify-content-space-between {
70
- justify-content: space-between;
71
- }
72
-
73
- .rvo-layout-justify-items-start {
74
- justify-items: flex-start;
75
- }
76
-
77
- .rvo-layout-justify-items-center {
78
- justify-items: center;
79
- }
80
-
81
- .rvo-layout-justify-items-end {
82
- justify-items: flex-end;
83
- }
84
-
85
- .rvo-layout--wrap {
86
- flex-wrap: wrap;
87
- }
88
-
89
- .rvo-layout-gap--0 {
90
- gap: 0;
91
- }
92
-
93
- .rvo-layout-gap--3xs {
94
- gap: var(--rvo-space-3xs);
95
- }
96
-
97
- .rvo-layout-gap--2xs {
98
- gap: var(--rvo-space-2xs);
99
- }
100
-
101
- .rvo-layout-gap--xs {
102
- gap: var(--rvo-space-xs);
103
- }
104
-
105
- .rvo-layout-gap--sm, .rvo-link--with-icon {
106
- gap: var(--rvo-space-sm);
107
- }
108
-
109
- .rvo-layout-gap--md {
110
- gap: var(--rvo-space-md);
111
- }
112
-
113
- .rvo-layout-gap--lg {
114
- gap: var(--rvo-space-lg);
115
- }
116
-
117
- .rvo-layout-gap--xl {
118
- gap: var(--rvo-space-xl);
119
- }
120
-
121
- .rvo-layout-gap--2xl {
122
- gap: var(--rvo-space-2xl);
123
- }
124
-
125
- .rvo-layout-gap--3xl {
126
- gap: var(--rvo-space-3xl);
127
- }
128
-
129
- .rvo-layout-gap--4xl {
130
- gap: var(--rvo-space-4xl);
131
- }
132
-
133
- .rvo-layout-gap--5xl {
134
- gap: var(--rvo-space-5xl);
135
- }
136
-
137
- .rvo-layout-margin-horizontal--0 {
138
- margin-inline: 0;
139
- }
140
-
141
- .rvo-layout-margin-vertical--0 {
142
- margin-block: 0;
143
- }
144
-
145
- .rvo-layout-margin-horizontal--3xs {
146
- margin-inline: var(--rvo-space-3xs);
147
- }
148
-
149
- .rvo-layout-margin-vertical--3xs {
150
- margin-block: var(--rvo-space-3xs);
151
- }
152
-
153
- .rvo-layout-margin-horizontal--2xs {
154
- margin-inline: var(--rvo-space-2xs);
155
- }
156
-
157
- .rvo-layout-margin-vertical--2xs {
158
- margin-block: var(--rvo-space-2xs);
159
- }
160
-
161
- .rvo-layout-margin-horizontal--xs {
162
- margin-inline: var(--rvo-space-xs);
163
- }
164
-
165
- .rvo-layout-margin-vertical--xs {
166
- margin-block: var(--rvo-space-xs);
167
- }
168
-
169
- .rvo-layout-margin-horizontal--sm {
170
- margin-inline: var(--rvo-space-sm);
171
- }
172
-
173
- .rvo-layout-margin-vertical--sm {
174
- margin-block: var(--rvo-space-sm);
175
- }
176
-
177
- .rvo-layout-margin-horizontal--md {
178
- margin-inline: var(--rvo-space-md);
179
- }
180
-
181
- .rvo-layout-margin-vertical--md {
182
- margin-block: var(--rvo-space-md);
183
- }
184
-
185
- .rvo-layout-margin-horizontal--lg {
186
- margin-inline: var(--rvo-space-lg);
187
- }
188
-
189
- .rvo-layout-margin-vertical--lg {
190
- margin-block: var(--rvo-space-lg);
191
- }
192
-
193
- .rvo-layout-margin-horizontal--xl {
194
- margin-inline: var(--rvo-space-xl);
195
- }
196
-
197
- .rvo-layout-margin-vertical--xl {
198
- margin-block: var(--rvo-space-xl);
199
- }
200
-
201
- .rvo-layout-margin-horizontal--2xl {
202
- margin-inline: var(--rvo-space-2xl);
203
- }
204
-
205
- .rvo-layout-margin-vertical--2xl {
206
- margin-block: var(--rvo-space-2xl);
207
- }
208
-
209
- .rvo-layout-margin-horizontal--3xl {
210
- margin-inline: var(--rvo-space-3xl);
211
- }
212
-
213
- .rvo-layout-margin-vertical--3xl {
214
- margin-block: var(--rvo-space-3xl);
215
- }
216
-
217
- .rvo-layout-margin-horizontal--4xl {
218
- margin-inline: var(--rvo-space-4xl);
219
- }
220
-
221
- .rvo-layout-margin-vertical--4xl {
222
- margin-block: var(--rvo-space-4xl);
223
- }
224
-
225
- .rvo-layout-margin-horizontal--5xl {
226
- margin-inline: var(--rvo-space-5xl);
227
- }
228
-
229
- .rvo-layout-margin-vertical--5xl {
230
- margin-block: var(--rvo-space-5xl);
231
- }
232
- .rvo-link {
233
- background-color: var(--rvo-link-background-color);
234
- color: var(--rvo-link-color);
235
- cursor: pointer;
236
- display: inline-flex;
237
- font-weight: var(--rvo-link-font-weight);
238
- text-decoration-line: var(--rvo-link-text-decoration);
239
- text-decoration-thickness: var(--rvo-link-text-decoration-thickness);
240
- text-underline-offset: var(--rvo-link-text-underline-offset);
241
- }
242
- .rvo-link__text {
243
- display: block;
244
- }
245
-
246
- .rvo-link.rvo-link--normal,
247
- .rvo-link.rvo-link--normal:hover:not(:focus, :focus-visible, .rvo-link--focus),
248
- .rvo-link.rvo-link--normal.rvo-link--hover:not(:focus, :focus-visible, .rvo-link--focus),
249
- .rvo-link.rvo-link--normal:active,
250
- .rvo-link.rvo-link--normal.rvo-link--active,
251
- .rvo-link.rvo-link--normal:focus,
252
- .rvo-link.rvo-link--normal:focus-visible,
253
- .rvo-link.rvo-link--normal.rvo-link--focus {
254
- font-weight: var(--rvo-font-weight-normal);
255
- }
256
-
257
- .rvo-link--no-underline:not(:focus, :hover, .rvo-link--hover, .rvo-link--focus) {
258
- text-decoration: none;
259
- }
260
-
261
- .rvo-link:hover:not(:focus, :focus-visible, .rvo-link--focus),
262
- .rvo-link--hover:not(:focus, :focus-visible, .rvo-link--focus) {
263
- background-color: var(--rvo-link-hover-background-color);
264
- color: var(--rvo-link-hover-color);
265
- font-weight: var(--rvo-link-hover-font-weight);
266
- text-decoration-thickness: var(--rvo-link-hover-text-decoration-thickness);
267
- }
268
-
269
- .rvo-link--lintblauw:hover:not(:focus, :focus-visible, .rvo-link--focus) {
270
- color: var(--rvo-color-lintblauw);
271
- }
272
-
273
- .rvo-link:active,
274
- .rvo-link--active {
275
- background-color: var(--rvo-link-active-background-color);
276
- color: var(--rvo-link-active-color);
277
- font-weight: var(--rvo-link-active-font-weight);
278
- text-decoration-thickness: var(--rvo-link-active-text-decoration-thickness);
279
- }
280
-
281
- .rvo-link--lintblauw:active {
282
- color: var(--rvo-color-lintblauw);
283
- }
284
-
285
- .rvo-link:focus,
286
- .rvo-link:focus-visible,
287
- .rvo-link--focus {
288
- color: var(--rvo-link-focus-color);
289
- font-weight: var(--rvo-link-focus-font-weight);
290
- outline: none;
291
- text-decoration-thickness: var(--rvo-link-focus-text-decoration-thickness);
292
- }
293
-
294
- .rvo-link__icon {
295
- background-color: var(--rvo-link-icon-background-color);
296
- }
297
-
298
- .rvo-link:hover:not(:focus, :focus-visible, .rvo-link--focus) .rvo-link__icon,
299
- .rvo-link--hover:not(:focus, :focus-visible, .rvo-link--focus) .rvo-link__icon {
300
- background-color: var(--rvo-link-hover-icon-background-color);
301
- }
302
-
303
- .rvo-link:active .rvo-link__icon,
304
- .rvo-link--active .rvo-link__icon {
305
- background-color: var(--rvo-link-active-icon-background-color);
306
- }
307
-
308
- .rvo-link:focus .rvo-link__icon,
309
- .rvo-link:focus-visible .rvo-link__icon,
310
- .rvo-link--focus .rvo-link__icon {
311
- background-color: var(--rvo-link-focus-icon-background-color);
312
- }
313
-
314
- .rvo-link--donkerblauw {
315
- color: var(--rvo-color-donkerblauw);
316
- }
317
-
318
- .rvo-link--lintblauw {
319
- color: var(--rvo-color-lintblauw);
320
- }
321
-
322
- .rvo-link--zwart {
323
- color: var(--rvo-color-zwart);
324
- }
325
- .rvo-link--zwart.rvo-link:hover:not(:focus, :focus-visible, .rvo-link--focus),
326
- .rvo-link--zwart .rvo-link--hover:not(:focus, :focus-visible, .rvo-link--focus):hover {
327
- color: var(--rvo-color-donkerblauw);
328
- }
329
-
330
- .rvo-link--wit {
331
- color: var(--rvo-color-wit);
332
- }
333
- .rvo-link--wit.rvo-link:hover:not(:focus, :focus-visible, .rvo-link--focus),
334
- .rvo-link--wit .rvo-link--hover:not(:focus, :focus-visible, .rvo-link--focus):hover {
335
- color: var(--rvo-color-grijs-100);
336
- }
337
-
338
- .rvo-link--grijs-700 {
339
- color: var(--rvo-color-grijs-700);
340
- }
341
- .rvo-link--grijs-700.rvo-link:hover:not(:focus, :focus-visible, .rvo-link--focus),
342
- .rvo-link--grijs-700 .rvo-link--hover:not(:focus, :focus-visible, .rvo-link--focus):hover {
343
- color: var(--rvo-color-donkerblauw);
344
- }
345
-
346
- .rvo-link--call-to-action {
347
- align-items: center;
348
- background-color: var(--rvo-link-call-to-action-background-color);
349
- border-color: var(--rvo-link-call-to-action-border-color);
350
- border-radius: var(--rvo-link-call-to-action-border-radius);
351
- border-style: var(--rvo-link-call-to-action-border-style);
352
- border-width: var(--rvo-link-call-to-action-border-width);
353
- box-sizing: border-box;
354
- color: var(--rvo-link-call-to-action-color);
355
- font-weight: var(--rvo-link-call-to-action-font-weight);
356
- min-block-size: var(--rvo-link-call-to-action-min-block-size);
357
- padding-block-end: var(--rvo-link-call-to-action-padding-block-end);
358
- padding-block-start: var(--rvo-link-call-to-action-padding-block-start);
359
- padding-inline-end: var(--rvo-link-call-to-action-padding-inline-end);
360
- padding-inline-start: var(--rvo-link-call-to-action-padding-inline-start);
361
- text-decoration: underline;
362
- text-decoration-color: var(--rvo-link-call-to-action-color);
363
- text-decoration-thickness: var(--rvo-link-call-to-action-text-decoration-thickness);
364
- text-underline-offset: var(--rvo-link-call-to-action-text-underline-offset);
365
- }
366
- .rvo-link--call-to-action .rvo-link__icon {
367
- background-color: var(--rvo-link-call-to-action-icon-background-color);
368
- }
369
- .rvo-link--call-to-action.rvo-link:hover:not(:focus, :focus-visible, .rvo-link--focus), .rvo-link--call-to-action.rvo-link--hover:not(:focus, :focus-visible, .rvo-link--focus) {
370
- background-color: var(--rvo-link-call-to-action-hover-background-color);
371
- border-color: var(--rvo-link-call-to-action-hover-border-color);
372
- color: var(--rvo-link-call-to-action-hover-color);
373
- font-weight: var(--rvo-link-call-to-action-font-weight);
374
- text-decoration-thickness: var(--rvo-link-call-to-action-hover-text-decoration-thickness);
375
- }
376
- .rvo-link--call-to-action.rvo-link:hover:not(:focus, :focus-visible, .rvo-link--focus) .rvo-link__icon, .rvo-link--call-to-action.rvo-link--hover:not(:focus, :focus-visible, .rvo-link--focus) .rvo-link__icon {
377
- background-color: var(--rvo-link-call-to-action-hover-icon-background-color);
378
- }
379
- .rvo-link--call-to-action.rvo-link:focus, .rvo-link--call-to-action.rvo-link:focus-visible, .rvo-link--call-to-action.rvo-link--focus {
380
- background-color: var(--rvo-link-call-to-action-background-color);
381
- color: var(--rvo-link-call-to-action-color);
382
- font-weight: var(--rvo-link-call-to-action-font-weight);
383
- outline-color: var(--utrecht-focus-outline-color, revert);
384
- outline-offset: var(--utrecht-focus-outline-offset, revert);
385
- outline-style: var(--utrecht-focus-outline-style, revert);
386
- outline-width: var(--utrecht-focus-outline-width, revert);
387
- text-decoration-thickness: var(--rvo-link-call-to-action-focus-text-decoration-thickness);
388
- }
389
- .rvo-link--call-to-action.rvo-link:focus .rvo-link__icon, .rvo-link--call-to-action.rvo-link:focus-visible .rvo-link__icon, .rvo-link--call-to-action.rvo-link--focus .rvo-link__icon {
390
- background-color: var(--rvo-link-call-to-action-icon-background-color);
391
- }
392
- .rvo-link--call-to-action.rvo-link:active, .rvo-link--call-to-action.rvo-link--active {
393
- background-color: var(--rvo-link-call-to-action-active-background-color);
394
- border-color: var(--rvo-link-call-to-action-active-border-color);
395
- color: var(--rvo-link-call-to-action-active-color);
396
- text-decoration-thickness: var(--rvo-link-call-to-action-active-text-decoration-thickness);
397
- }
398
-
399
- .rvo-link--call-to-action-outline {
400
- --rvo-link-call-to-action-background-color: var(--rvo-link-call-to-action-outline-background-color);
401
- --rvo-link-call-to-action-border-color: var(--rvo-link-call-to-action-outline-border-color);
402
- --rvo-link-call-to-action-color: var(--rvo-link-call-to-action-outline-color);
403
- --rvo-link-call-to-action-icon-background-color: var(--rvo-link-call-to-action-outline-icon-background-color);
404
- --rvo-link-call-to-action-hover-background-color: var(--rvo-link-call-to-action-outline-hover-background-color);
405
- --rvo-link-call-to-action-hover-border-color: var(--rvo-link-call-to-action-outline-hover-border-color);
406
- --rvo-link-call-to-action-hover-color: var(--rvo-link-call-to-action-outline-hover-color);
407
- --rvo-link-call-to-action-hover-icon-background-color: var(
408
- --rvo-link-call-to-action-outline-hover-icon-background-color
409
- );
410
- --rvo-link-call-to-action-active-background-color: var(--rvo-link-call-to-action-outline-active-background-color);
411
- --rvo-link-call-to-action-active-border-color: var(--rvo-link-call-to-action-outline-active-border-color);
412
- --rvo-link-call-to-action-active-color: var(--rvo-link-call-to-action-outline-active-color);
413
- }
414
-
415
- .rvo-link--full-card-link::after {
416
- block-size: 100%;
417
- content: "";
418
- display: inline-block;
419
- inline-size: 100%;
420
- inset-block-start: 0;
421
- inset-inline-start: 0;
422
- position: absolute;
423
- z-index: 1;
424
- }
package/dist/index.min.css DELETED
@@ -1,3 +0,0 @@
1
- .rvo-layout-column{align-items:stretch;display:flex;flex-direction:column}.rvo-layout-column-inline{align-items:stretch;display:inline-flex;flex-direction:column}.rvo-layout-row,.rvo-link--with-icon{align-items:center;display:flex;flex-direction:row}.rvo-layout-row-inline{align-items:stretch;display:inline-flex;flex-direction:row}.rvo-layout-align-items-start{align-items:flex-start}.rvo-layout-align-items-center{align-items:center}.rvo-layout-align-items-end{align-items:flex-end}.rvo-layout-align-content-start{align-content:flex-start}.rvo-layout-align-content-center{align-content:center}.rvo-layout-align-content-end{align-content:flex-end}.rvo-layout-align-content-space-between{align-content:space-between}.rvo-layout-justify-content-start{justify-content:flex-start}.rvo-layout-justify-content-center{justify-content:center}.rvo-layout-justify-content-end{justify-content:flex-end}.rvo-layout-justify-content-space-between{justify-content:space-between}.rvo-layout-justify-items-start{justify-items:flex-start}.rvo-layout-justify-items-center{justify-items:center}.rvo-layout-justify-items-end{justify-items:flex-end}.rvo-layout--wrap{flex-wrap:wrap}.rvo-layout-gap--0{gap:0}.rvo-layout-gap--3xs{gap:var(--rvo-space-3xs)}.rvo-layout-gap--2xs{gap:var(--rvo-space-2xs)}.rvo-layout-gap--xs{gap:var(--rvo-space-xs)}.rvo-layout-gap--sm,.rvo-link--with-icon{gap:var(--rvo-space-sm)}.rvo-layout-gap--md{gap:var(--rvo-space-md)}.rvo-layout-gap--lg{gap:var(--rvo-space-lg)}.rvo-layout-gap--xl{gap:var(--rvo-space-xl)}.rvo-layout-gap--2xl{gap:var(--rvo-space-2xl)}.rvo-layout-gap--3xl{gap:var(--rvo-space-3xl)}.rvo-layout-gap--4xl{gap:var(--rvo-space-4xl)}.rvo-layout-gap--5xl{gap:var(--rvo-space-5xl)}.rvo-layout-margin-horizontal--0{margin-inline:0}.rvo-layout-margin-vertical--0{margin-block:0}.rvo-layout-margin-horizontal--3xs{margin-inline:var(--rvo-space-3xs)}.rvo-layout-margin-vertical--3xs{margin-block:var(--rvo-space-3xs)}.rvo-layout-margin-horizontal--2xs{margin-inline:var(--rvo-space-2xs)}.rvo-layout-margin-vertical--2xs{margin-block:var(--rvo-space-2xs)}.rvo-layout-margin-horizontal--xs{margin-inline:var(--rvo-space-xs)}.rvo-layout-margin-vertical--xs{margin-block:var(--rvo-space-xs)}.rvo-layout-margin-horizontal--sm{margin-inline:var(--rvo-space-sm)}.rvo-layout-margin-vertical--sm{margin-block:var(--rvo-space-sm)}.rvo-layout-margin-horizontal--md{margin-inline:var(--rvo-space-md)}.rvo-layout-margin-vertical--md{margin-block:var(--rvo-space-md)}.rvo-layout-margin-horizontal--lg{margin-inline:var(--rvo-space-lg)}.rvo-layout-margin-vertical--lg{margin-block:var(--rvo-space-lg)}.rvo-layout-margin-horizontal--xl{margin-inline:var(--rvo-space-xl)}.rvo-layout-margin-vertical--xl{margin-block:var(--rvo-space-xl)}.rvo-layout-margin-horizontal--2xl{margin-inline:var(--rvo-space-2xl)}.rvo-layout-margin-vertical--2xl{margin-block:var(--rvo-space-2xl)}.rvo-layout-margin-horizontal--3xl{margin-inline:var(--rvo-space-3xl)}.rvo-layout-margin-vertical--3xl{margin-block:var(--rvo-space-3xl)}.rvo-layout-margin-horizontal--4xl{margin-inline:var(--rvo-space-4xl)}.rvo-layout-margin-vertical--4xl{margin-block:var(--rvo-space-4xl)}.rvo-layout-margin-horizontal--5xl{margin-inline:var(--rvo-space-5xl)}.rvo-layout-margin-vertical--5xl{margin-block:var(--rvo-space-5xl)}.rvo-link{background-color:var(--rvo-link-background-color);color:var(--rvo-link-color);cursor:pointer;display:inline-flex;font-weight:var(--rvo-link-font-weight);text-decoration-line:var(--rvo-link-text-decoration);text-decoration-thickness:var(--rvo-link-text-decoration-thickness);text-underline-offset:var(--rvo-link-text-underline-offset)}.rvo-link__text{display:block}.rvo-link.rvo-link--normal,.rvo-link.rvo-link--normal.rvo-link--active,.rvo-link.rvo-link--normal.rvo-link--focus,.rvo-link.rvo-link--normal.rvo-link--hover:not(:focus,:focus-visible,.rvo-link--focus),.rvo-link.rvo-link--normal:active,.rvo-link.rvo-link--normal:focus,.rvo-link.rvo-link--normal:focus-visible,.rvo-link.rvo-link--normal:hover:not(:focus,:focus-visible,.rvo-link--focus){font-weight:var(--rvo-font-weight-normal)}.rvo-link--no-underline:not(:focus,:hover,.rvo-link--hover,.rvo-link--focus){text-decoration:none}.rvo-link--hover:not(:focus,:focus-visible,.rvo-link--focus),.rvo-link:hover:not(:focus,:focus-visible,.rvo-link--focus){background-color:var(--rvo-link-hover-background-color);color:var(--rvo-link-hover-color);font-weight:var(--rvo-link-hover-font-weight);text-decoration-thickness:var(--rvo-link-hover-text-decoration-thickness)}.rvo-link--lintblauw:hover:not(:focus,:focus-visible,.rvo-link--focus){color:var(--rvo-color-lintblauw)}.rvo-link--active,.rvo-link:active{background-color:var(--rvo-link-active-background-color);color:var(--rvo-link-active-color);font-weight:var(--rvo-link-active-font-weight);text-decoration-thickness:var(--rvo-link-active-text-decoration-thickness)}.rvo-link--lintblauw:active{color:var(--rvo-color-lintblauw)}.rvo-link--focus,.rvo-link:focus,.rvo-link:focus-visible{color:var(--rvo-link-focus-color);font-weight:var(--rvo-link-focus-font-weight);outline:none;text-decoration-thickness:var(--rvo-link-focus-text-decoration-thickness)}.rvo-link__icon{background-color:var(--rvo-link-icon-background-color)}.rvo-link--hover:not(:focus,:focus-visible,.rvo-link--focus) .rvo-link__icon,.rvo-link:hover:not(:focus,:focus-visible,.rvo-link--focus) .rvo-link__icon{background-color:var(--rvo-link-hover-icon-background-color)}.rvo-link--active .rvo-link__icon,.rvo-link:active .rvo-link__icon{background-color:var(--rvo-link-active-icon-background-color)}.rvo-link--focus .rvo-link__icon,.rvo-link:focus .rvo-link__icon,.rvo-link:focus-visible .rvo-link__icon{background-color:var(--rvo-link-focus-icon-background-color)}.rvo-link--donkerblauw{color:var(--rvo-color-donkerblauw)}.rvo-link--lintblauw{color:var(--rvo-color-lintblauw)}.rvo-link--zwart{color:var(--rvo-color-zwart)}.rvo-link--zwart .rvo-link--hover:not(:focus,:focus-visible,.rvo-link--focus):hover,.rvo-link--zwart.rvo-link:hover:not(:focus,:focus-visible,.rvo-link--focus){color:var(--rvo-color-donkerblauw)}.rvo-link--wit{color:var(--rvo-color-wit)}.rvo-link--wit .rvo-link--hover:not(:focus,:focus-visible,.rvo-link--focus):hover,.rvo-link--wit.rvo-link:hover:not(:focus,:focus-visible,.rvo-link--focus){color:var(--rvo-color-grijs-100)}.rvo-link--grijs-700{color:var(--rvo-color-grijs-700)}.rvo-link--grijs-700 .rvo-link--hover:not(:focus,:focus-visible,.rvo-link--focus):hover,.rvo-link--grijs-700.rvo-link:hover:not(:focus,:focus-visible,.rvo-link--focus){color:var(--rvo-color-donkerblauw)}.rvo-link--call-to-action{align-items:center;background-color:var(--rvo-link-call-to-action-background-color);border-color:var(--rvo-link-call-to-action-border-color);border-radius:var(--rvo-link-call-to-action-border-radius);border-style:var(--rvo-link-call-to-action-border-style);border-width:var(--rvo-link-call-to-action-border-width);box-sizing:border-box;color:var(--rvo-link-call-to-action-color);font-weight:var(--rvo-link-call-to-action-font-weight);min-block-size:var(--rvo-link-call-to-action-min-block-size);padding-block-end:var(--rvo-link-call-to-action-padding-block-end);padding-block-start:var(--rvo-link-call-to-action-padding-block-start);padding-inline-end:var(--rvo-link-call-to-action-padding-inline-end);padding-inline-start:var(--rvo-link-call-to-action-padding-inline-start);text-decoration:underline;text-decoration-color:var(--rvo-link-call-to-action-color);text-decoration-thickness:var(--rvo-link-call-to-action-text-decoration-thickness);text-underline-offset:var(--rvo-link-call-to-action-text-underline-offset)}.rvo-link--call-to-action .rvo-link__icon{background-color:var(--rvo-link-call-to-action-icon-background-color)}.rvo-link--call-to-action.rvo-link--hover:not(:focus,:focus-visible,.rvo-link--focus),.rvo-link--call-to-action.rvo-link:hover:not(:focus,:focus-visible,.rvo-link--focus){background-color:var(--rvo-link-call-to-action-hover-background-color);border-color:var(--rvo-link-call-to-action-hover-border-color);color:var(--rvo-link-call-to-action-hover-color);font-weight:var(--rvo-link-call-to-action-font-weight);text-decoration-thickness:var(--rvo-link-call-to-action-hover-text-decoration-thickness)}.rvo-link--call-to-action.rvo-link--hover:not(:focus,:focus-visible,.rvo-link--focus) .rvo-link__icon,.rvo-link--call-to-action.rvo-link:hover:not(:focus,:focus-visible,.rvo-link--focus) .rvo-link__icon{background-color:var(--rvo-link-call-to-action-hover-icon-background-color)}.rvo-link--call-to-action.rvo-link--focus,.rvo-link--call-to-action.rvo-link:focus,.rvo-link--call-to-action.rvo-link:focus-visible{background-color:var(--rvo-link-call-to-action-background-color);color:var(--rvo-link-call-to-action-color);font-weight:var(--rvo-link-call-to-action-font-weight);outline-color:var(--utrecht-focus-outline-color,revert);outline-offset:var(--utrecht-focus-outline-offset,revert);outline-style:var(--utrecht-focus-outline-style,revert);outline-width:var(--utrecht-focus-outline-width,revert);text-decoration-thickness:var(--rvo-link-call-to-action-focus-text-decoration-thickness)}.rvo-link--call-to-action.rvo-link--focus .rvo-link__icon,.rvo-link--call-to-action.rvo-link:focus .rvo-link__icon,.rvo-link--call-to-action.rvo-link:focus-visible .rvo-link__icon{background-color:var(--rvo-link-call-to-action-icon-background-color)}.rvo-link--call-to-action.rvo-link--active,.rvo-link--call-to-action.rvo-link:active{background-color:var(--rvo-link-call-to-action-active-background-color);border-color:var(--rvo-link-call-to-action-active-border-color);color:var(--rvo-link-call-to-action-active-color);text-decoration-thickness:var(--rvo-link-call-to-action-active-text-decoration-thickness)}.rvo-link--call-to-action-outline{--rvo-link-call-to-action-background-color:var(--rvo-link-call-to-action-outline-background-color);--rvo-link-call-to-action-border-color:var(--rvo-link-call-to-action-outline-border-color);--rvo-link-call-to-action-color:var(--rvo-link-call-to-action-outline-color);--rvo-link-call-to-action-icon-background-color:var(--rvo-link-call-to-action-outline-icon-background-color);--rvo-link-call-to-action-hover-background-color:var(--rvo-link-call-to-action-outline-hover-background-color);--rvo-link-call-to-action-hover-border-color:var(--rvo-link-call-to-action-outline-hover-border-color);--rvo-link-call-to-action-hover-color:var(--rvo-link-call-to-action-outline-hover-color);--rvo-link-call-to-action-hover-icon-background-color:var(
2
- --rvo-link-call-to-action-outline-hover-icon-background-color
3
- );--rvo-link-call-to-action-active-background-color:var(--rvo-link-call-to-action-outline-active-background-color);--rvo-link-call-to-action-active-border-color:var(--rvo-link-call-to-action-outline-active-border-color);--rvo-link-call-to-action-active-color:var(--rvo-link-call-to-action-outline-active-color)}.rvo-link--full-card-link:after{block-size:100%;content:"";display:inline-block;inline-size:100%;inset-block-start:0;inset-inline-start:0;position:absolute;z-index:1}
package/dist/index.mjs DELETED
@@ -1 +0,0 @@
1
- export default ".rvo-layout-column{align-items:stretch;display:flex;flex-direction:column}.rvo-layout-column-inline{align-items:stretch;display:inline-flex;flex-direction:column}.rvo-layout-row,.rvo-link--with-icon{align-items:center;display:flex;flex-direction:row}.rvo-layout-row-inline{align-items:stretch;display:inline-flex;flex-direction:row}.rvo-layout-align-items-start{align-items:flex-start}.rvo-layout-align-items-center{align-items:center}.rvo-layout-align-items-end{align-items:flex-end}.rvo-layout-align-content-start{align-content:flex-start}.rvo-layout-align-content-center{align-content:center}.rvo-layout-align-content-end{align-content:flex-end}.rvo-layout-align-content-space-between{align-content:space-between}.rvo-layout-justify-content-start{justify-content:flex-start}.rvo-layout-justify-content-center{justify-content:center}.rvo-layout-justify-content-end{justify-content:flex-end}.rvo-layout-justify-content-space-between{justify-content:space-between}.rvo-layout-justify-items-start{justify-items:flex-start}.rvo-layout-justify-items-center{justify-items:center}.rvo-layout-justify-items-end{justify-items:flex-end}.rvo-layout--wrap{flex-wrap:wrap}.rvo-layout-gap--0{gap:0}.rvo-layout-gap--3xs{gap:var(--rvo-space-3xs)}.rvo-layout-gap--2xs{gap:var(--rvo-space-2xs)}.rvo-layout-gap--xs{gap:var(--rvo-space-xs)}.rvo-layout-gap--sm,.rvo-link--with-icon{gap:var(--rvo-space-sm)}.rvo-layout-gap--md{gap:var(--rvo-space-md)}.rvo-layout-gap--lg{gap:var(--rvo-space-lg)}.rvo-layout-gap--xl{gap:var(--rvo-space-xl)}.rvo-layout-gap--2xl{gap:var(--rvo-space-2xl)}.rvo-layout-gap--3xl{gap:var(--rvo-space-3xl)}.rvo-layout-gap--4xl{gap:var(--rvo-space-4xl)}.rvo-layout-gap--5xl{gap:var(--rvo-space-5xl)}.rvo-layout-margin-horizontal--0{margin-inline:0}.rvo-layout-margin-vertical--0{margin-block:0}.rvo-layout-margin-horizontal--3xs{margin-inline:var(--rvo-space-3xs)}.rvo-layout-margin-vertical--3xs{margin-block:var(--rvo-space-3xs)}.rvo-layout-margin-horizontal--2xs{margin-inline:var(--rvo-space-2xs)}.rvo-layout-margin-vertical--2xs{margin-block:var(--rvo-space-2xs)}.rvo-layout-margin-horizontal--xs{margin-inline:var(--rvo-space-xs)}.rvo-layout-margin-vertical--xs{margin-block:var(--rvo-space-xs)}.rvo-layout-margin-horizontal--sm{margin-inline:var(--rvo-space-sm)}.rvo-layout-margin-vertical--sm{margin-block:var(--rvo-space-sm)}.rvo-layout-margin-horizontal--md{margin-inline:var(--rvo-space-md)}.rvo-layout-margin-vertical--md{margin-block:var(--rvo-space-md)}.rvo-layout-margin-horizontal--lg{margin-inline:var(--rvo-space-lg)}.rvo-layout-margin-vertical--lg{margin-block:var(--rvo-space-lg)}.rvo-layout-margin-horizontal--xl{margin-inline:var(--rvo-space-xl)}.rvo-layout-margin-vertical--xl{margin-block:var(--rvo-space-xl)}.rvo-layout-margin-horizontal--2xl{margin-inline:var(--rvo-space-2xl)}.rvo-layout-margin-vertical--2xl{margin-block:var(--rvo-space-2xl)}.rvo-layout-margin-horizontal--3xl{margin-inline:var(--rvo-space-3xl)}.rvo-layout-margin-vertical--3xl{margin-block:var(--rvo-space-3xl)}.rvo-layout-margin-horizontal--4xl{margin-inline:var(--rvo-space-4xl)}.rvo-layout-margin-vertical--4xl{margin-block:var(--rvo-space-4xl)}.rvo-layout-margin-horizontal--5xl{margin-inline:var(--rvo-space-5xl)}.rvo-layout-margin-vertical--5xl{margin-block:var(--rvo-space-5xl)}.rvo-link{background-color:var(--rvo-link-background-color);color:var(--rvo-link-color);cursor:pointer;display:inline-flex;font-weight:var(--rvo-link-font-weight);text-decoration-line:var(--rvo-link-text-decoration);text-decoration-thickness:var(--rvo-link-text-decoration-thickness);text-underline-offset:var(--rvo-link-text-underline-offset)}.rvo-link__text{display:block}.rvo-link.rvo-link--normal,.rvo-link.rvo-link--normal.rvo-link--active,.rvo-link.rvo-link--normal.rvo-link--focus,.rvo-link.rvo-link--normal.rvo-link--hover:not(:focus,:focus-visible,.rvo-link--focus),.rvo-link.rvo-link--normal:active,.rvo-link.rvo-link--normal:focus,.rvo-link.rvo-link--normal:focus-visible,.rvo-link.rvo-link--normal:hover:not(:focus,:focus-visible,.rvo-link--focus){font-weight:var(--rvo-font-weight-normal)}.rvo-link--no-underline:not(:focus,:hover,.rvo-link--hover,.rvo-link--focus){text-decoration:none}.rvo-link--hover:not(:focus,:focus-visible,.rvo-link--focus),.rvo-link:hover:not(:focus,:focus-visible,.rvo-link--focus){background-color:var(--rvo-link-hover-background-color);color:var(--rvo-link-hover-color);font-weight:var(--rvo-link-hover-font-weight);text-decoration-thickness:var(--rvo-link-hover-text-decoration-thickness)}.rvo-link--lintblauw:hover:not(:focus,:focus-visible,.rvo-link--focus){color:var(--rvo-color-lintblauw)}.rvo-link--active,.rvo-link:active{background-color:var(--rvo-link-active-background-color);color:var(--rvo-link-active-color);font-weight:var(--rvo-link-active-font-weight);text-decoration-thickness:var(--rvo-link-active-text-decoration-thickness)}.rvo-link--lintblauw:active{color:var(--rvo-color-lintblauw)}.rvo-link--focus,.rvo-link:focus,.rvo-link:focus-visible{color:var(--rvo-link-focus-color);font-weight:var(--rvo-link-focus-font-weight);outline:none;text-decoration-thickness:var(--rvo-link-focus-text-decoration-thickness)}.rvo-link__icon{background-color:var(--rvo-link-icon-background-color)}.rvo-link--hover:not(:focus,:focus-visible,.rvo-link--focus) .rvo-link__icon,.rvo-link:hover:not(:focus,:focus-visible,.rvo-link--focus) .rvo-link__icon{background-color:var(--rvo-link-hover-icon-background-color)}.rvo-link--active .rvo-link__icon,.rvo-link:active .rvo-link__icon{background-color:var(--rvo-link-active-icon-background-color)}.rvo-link--focus .rvo-link__icon,.rvo-link:focus .rvo-link__icon,.rvo-link:focus-visible .rvo-link__icon{background-color:var(--rvo-link-focus-icon-background-color)}.rvo-link--donkerblauw{color:var(--rvo-color-donkerblauw)}.rvo-link--lintblauw{color:var(--rvo-color-lintblauw)}.rvo-link--zwart{color:var(--rvo-color-zwart)}.rvo-link--zwart .rvo-link--hover:not(:focus,:focus-visible,.rvo-link--focus):hover,.rvo-link--zwart.rvo-link:hover:not(:focus,:focus-visible,.rvo-link--focus){color:var(--rvo-color-donkerblauw)}.rvo-link--wit{color:var(--rvo-color-wit)}.rvo-link--wit .rvo-link--hover:not(:focus,:focus-visible,.rvo-link--focus):hover,.rvo-link--wit.rvo-link:hover:not(:focus,:focus-visible,.rvo-link--focus){color:var(--rvo-color-grijs-100)}.rvo-link--grijs-700{color:var(--rvo-color-grijs-700)}.rvo-link--grijs-700 .rvo-link--hover:not(:focus,:focus-visible,.rvo-link--focus):hover,.rvo-link--grijs-700.rvo-link:hover:not(:focus,:focus-visible,.rvo-link--focus){color:var(--rvo-color-donkerblauw)}.rvo-link--call-to-action{align-items:center;background-color:var(--rvo-link-call-to-action-background-color);border-color:var(--rvo-link-call-to-action-border-color);border-radius:var(--rvo-link-call-to-action-border-radius);border-style:var(--rvo-link-call-to-action-border-style);border-width:var(--rvo-link-call-to-action-border-width);box-sizing:border-box;color:var(--rvo-link-call-to-action-color);font-weight:var(--rvo-link-call-to-action-font-weight);min-block-size:var(--rvo-link-call-to-action-min-block-size);padding-block-end:var(--rvo-link-call-to-action-padding-block-end);padding-block-start:var(--rvo-link-call-to-action-padding-block-start);padding-inline-end:var(--rvo-link-call-to-action-padding-inline-end);padding-inline-start:var(--rvo-link-call-to-action-padding-inline-start);text-decoration:underline;text-decoration-color:var(--rvo-link-call-to-action-color);text-decoration-thickness:var(--rvo-link-call-to-action-text-decoration-thickness);text-underline-offset:var(--rvo-link-call-to-action-text-underline-offset)}.rvo-link--call-to-action .rvo-link__icon{background-color:var(--rvo-link-call-to-action-icon-background-color)}.rvo-link--call-to-action.rvo-link--hover:not(:focus,:focus-visible,.rvo-link--focus),.rvo-link--call-to-action.rvo-link:hover:not(:focus,:focus-visible,.rvo-link--focus){background-color:var(--rvo-link-call-to-action-hover-background-color);border-color:var(--rvo-link-call-to-action-hover-border-color);color:var(--rvo-link-call-to-action-hover-color);font-weight:var(--rvo-link-call-to-action-font-weight);text-decoration-thickness:var(--rvo-link-call-to-action-hover-text-decoration-thickness)}.rvo-link--call-to-action.rvo-link--hover:not(:focus,:focus-visible,.rvo-link--focus) .rvo-link__icon,.rvo-link--call-to-action.rvo-link:hover:not(:focus,:focus-visible,.rvo-link--focus) .rvo-link__icon{background-color:var(--rvo-link-call-to-action-hover-icon-background-color)}.rvo-link--call-to-action.rvo-link--focus,.rvo-link--call-to-action.rvo-link:focus,.rvo-link--call-to-action.rvo-link:focus-visible{background-color:var(--rvo-link-call-to-action-background-color);color:var(--rvo-link-call-to-action-color);font-weight:var(--rvo-link-call-to-action-font-weight);outline-color:var(--utrecht-focus-outline-color,revert);outline-offset:var(--utrecht-focus-outline-offset,revert);outline-style:var(--utrecht-focus-outline-style,revert);outline-width:var(--utrecht-focus-outline-width,revert);text-decoration-thickness:var(--rvo-link-call-to-action-focus-text-decoration-thickness)}.rvo-link--call-to-action.rvo-link--focus .rvo-link__icon,.rvo-link--call-to-action.rvo-link:focus .rvo-link__icon,.rvo-link--call-to-action.rvo-link:focus-visible .rvo-link__icon{background-color:var(--rvo-link-call-to-action-icon-background-color)}.rvo-link--call-to-action.rvo-link--active,.rvo-link--call-to-action.rvo-link:active{background-color:var(--rvo-link-call-to-action-active-background-color);border-color:var(--rvo-link-call-to-action-active-border-color);color:var(--rvo-link-call-to-action-active-color);text-decoration-thickness:var(--rvo-link-call-to-action-active-text-decoration-thickness)}.rvo-link--call-to-action-outline{--rvo-link-call-to-action-background-color:var(--rvo-link-call-to-action-outline-background-color);--rvo-link-call-to-action-border-color:var(--rvo-link-call-to-action-outline-border-color);--rvo-link-call-to-action-color:var(--rvo-link-call-to-action-outline-color);--rvo-link-call-to-action-icon-background-color:var(--rvo-link-call-to-action-outline-icon-background-color);--rvo-link-call-to-action-hover-background-color:var(--rvo-link-call-to-action-outline-hover-background-color);--rvo-link-call-to-action-hover-border-color:var(--rvo-link-call-to-action-outline-hover-border-color);--rvo-link-call-to-action-hover-color:var(--rvo-link-call-to-action-outline-hover-color);--rvo-link-call-to-action-hover-icon-background-color:var(\n --rvo-link-call-to-action-outline-hover-icon-background-color\n );--rvo-link-call-to-action-active-background-color:var(--rvo-link-call-to-action-outline-active-background-color);--rvo-link-call-to-action-active-border-color:var(--rvo-link-call-to-action-outline-active-border-color);--rvo-link-call-to-action-active-color:var(--rvo-link-call-to-action-outline-active-color)}.rvo-link--full-card-link:after{block-size:100%;content:\"\";display:inline-block;inline-size:100%;inset-block-start:0;inset-inline-start:0;position:absolute;z-index:1}";
package/dist/index.mjs.d.ts DELETED
@@ -1,2 +0,0 @@
1
- declare const css: string;
2
- export default css;