@nl-rvo/css-toggle 1.3.0 → 1.4.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 (11) hide show
  1. package/dist/toggle.css +1 -0
  2. package/dist/toggle.css.map +1 -0
  3. package/package.json +16 -16
  4. package/src/{index.scss → toggle.scss} +24 -46
  5. package/CHANGELOG.md +0 -36
  6. package/README.md +0 -1
  7. package/design-tokens.json +0 -156
  8. package/dist/index.css +0 -285
  9. package/dist/index.min.css +0 -1
  10. package/dist/index.mjs +0 -1
  11. package/dist/index.mjs.d.ts +0 -2
package/dist/toggle.css ADDED
@@ -0,0 +1 @@
1
+ .rvo-toggle{--utrecht-icon-color: var(--rvo-toggle-default-icon-color);border-radius:var(--rvo-toggle-border-radius);cursor:pointer;display:inline-flex;padding-block-end:var(--rvo-toggle-padding-block-end);padding-block-start:var(--rvo-toggle-padding-block-start);padding-inline-end:var(--rvo-toggle-padding-inline-end);padding-inline-start:var(--rvo-toggle-padding-inline-start);background-color:var(--rvo-toggle-default-background-color);border-color:var(--rvo-toggle-default-border-color);border-style:var(--rvo-toggle-default-border-style);border-width:var(--rvo-toggle-default-border-width);color:var(--rvo-toggle-default-color);text-decoration:var(--rvo-toggle-default-text-decoration)}.rvo-toggle--with-icon{flex-direction:row;align-items:center;gap:var(--rvo-space-sm);padding-inline-end:var(--rvo-toggle-padding-inline-end-with-icon);padding-inline-start:var(--rvo-toggle-padding-inline-start-with-icon)}.rvo-toggle--active{--utrecht-icon-color: var(--rvo-toggle-default-active-icon-color);background-color:var(--rvo-toggle-default-active-background-color);border-color:var(--rvo-toggle-default-active-border-color);border-style:var(--rvo-toggle-default-active-border-style);border-width:var(--rvo-toggle-default-active-border-width);color:var(--rvo-toggle-default-active-color)}.rvo-toggle:hover:not(:focus,:focus-visible,.rvo-toggle--focus,.rvo-toggle--active){--utrecht-icon-color: var(--rvo-toggle-default-hover-icon-color);color:var(--rvo-toggle-default-hover-color);background-color:var(--rvo-toggle-default-hover-background-color);text-decoration:var(--rvo-toggle-default-hover-text-decoration)}.rvo-toggle:focus,.rvo-toggle:focus-visible{outline-color:var(--utrecht-focus-outline-color, transparent);outline-offset:var(--utrecht-focus-outline-offset, 0);outline-style:var(--utrecht-focus-outline-style, solid);outline-width:var(--utrecht-focus-outline-width, 0)}/*# sourceMappingURL=toggle.css.map */
package/dist/toggle.css.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sourceRoot":"","sources":["../src/toggle.scss"],"names":[],"mappings":"AAIA,YACE,2DAEA,8CACA,eACA,oBACA,sDACA,0DACA,wDACA,4DACA,4DACA,oDACA,oDACA,oDACA,sCACA,0DAEA,uBACE,mBACA,mBACA,wBACA,kEACA,sEAGF,oBACE,kEAEA,mEACA,2DACA,2DACA,2DACA,6CAGF,oFACE,iEAEA,4CACA,kEACA,gEAGF,4CAEE,8DACA,sDACA,wDACA","file":"toggle.css"}
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "1.3.0",
2
+ "version": "1.4.0",
3
3
  "author": "Community for NL Design System",
4
4
  "license": "CC0-1.0",
5
5
  "name": "@nl-rvo/css-toggle",
@@ -9,26 +9,26 @@
9
9
  "css",
10
10
  "toggle"
11
11
  ],
12
- "files": [
13
- "src/index.scss",
14
- "dist/",
15
- "design-tokens.json",
16
- "*.md"
17
- ],
18
- "main": "dist/index.css",
19
- "publishConfig": {
20
- "access": "public"
21
- },
22
12
  "repository": {
23
13
  "type": "git+ssh",
24
14
  "url": "git@github.com:nl-design-system/rvo.git",
25
- "directory": "components/toggle"
15
+ "directory": "components/toggle/style"
26
16
  },
27
- "devDependencies": {
28
- "@nl-rvo/build-utils-css": "0.1.0"
17
+ "files": [
18
+ "src/",
19
+ "dist/"
20
+ ],
21
+ "exports": {
22
+ ".": "./dist/toggle.css",
23
+ "./dist/*": "./dist/*"
24
+ },
25
+ "publishConfig": {
26
+ "access": "public",
27
+ "provenance": true
29
28
  },
30
29
  "scripts": {
31
- "build": "build-css-package",
32
- "clean": "rimraf dist"
30
+ "build": "sass --pkg-importer=node --style=compressed ./src/:./dist/",
31
+ "watch": "sass --pkg-importer=node --style=compressed --watch ./src/:./dist/",
32
+ "clean": "rimraf ./dist/"
33
33
  }
34
34
  }
package/src/{index.scss → toggle.scss} RENAMED
@@ -2,10 +2,9 @@
2
2
  * @license CC0-1.0
3
3
  * Copyright (c) 2021 Community for NL Design System
4
4
  */
5
-
6
- @use "../../layout-flow/src";
7
-
8
5
  .rvo-toggle {
6
+ --utrecht-icon-color: var(--rvo-toggle-default-icon-color);
7
+
9
8
  border-radius: var(--rvo-toggle-border-radius);
10
9
  cursor: pointer;
11
10
  display: inline-flex;
@@ -13,49 +12,22 @@
13
12
  padding-block-start: var(--rvo-toggle-padding-block-start);
14
13
  padding-inline-end: var(--rvo-toggle-padding-inline-end);
15
14
  padding-inline-start: var(--rvo-toggle-padding-inline-start);
16
- }
17
-
18
- .rvo-toggle--with-icon {
19
- padding-inline-end: var(--rvo-toggle-padding-inline-end-with-icon);
20
- padding-inline-start: var(--rvo-toggle-padding-inline-start-with-icon);
21
-
22
- @extend .rvo-layout-row;
23
- @extend .rvo-layout-gap--sm;
24
- }
25
-
26
- // Default appearance
27
- .rvo-toggle--default {
28
- --utrecht-icon-color: var(--rvo-toggle-default-icon-color);
29
-
30
15
  background-color: var(--rvo-toggle-default-background-color);
31
16
  border-color: var(--rvo-toggle-default-border-color);
32
17
  border-style: var(--rvo-toggle-default-border-style);
33
18
  border-width: var(--rvo-toggle-default-border-width);
34
19
  color: var(--rvo-toggle-default-color);
35
20
  text-decoration: var(--rvo-toggle-default-text-decoration);
36
- }
37
-
38
- // Hover
39
- .rvo-toggle--hover:hover:not(:focus, :focus-visible, .rvo-toggle--focus),
40
- .rvo-toggle--show-hover:not(:focus, :focus-visible, .rvo-toggle--focus) {
41
- &.rvo-toggle--default {
42
- --utrecht-icon-color: var(--rvo-toggle-default-hover-icon-color);
43
-
44
- text-decoration: var(--rvo-toggle-default-hover-text-decoration);
45
- }
46
- }
47
21
 
48
- .rvo-toggle--hover:hover:not(:focus, :focus-visible, .rvo-toggle--focus, .rvo-toggle--active),
49
- .rvo-toggle--show-hover:not(:focus, :focus-visible, .rvo-toggle--focus, .rvo-toggle--active) {
50
- &.rvo-toggle--default {
51
- background-color: var(--rvo-toggle-default-hover-background-color);
52
- color: var(--rvo-toggle-default-hover-color);
22
+ &--with-icon {
23
+ flex-direction: row;
24
+ align-items: center;
25
+ gap: var(--rvo-space-sm);
26
+ padding-inline-end: var(--rvo-toggle-padding-inline-end-with-icon);
27
+ padding-inline-start: var(--rvo-toggle-padding-inline-start-with-icon);
53
28
  }
54
- }
55
29
 
56
- // Active
57
- .rvo-toggle--active {
58
- &.rvo-toggle--default {
30
+ &--active {
59
31
  --utrecht-icon-color: var(--rvo-toggle-default-active-icon-color);
60
32
 
61
33
  background-color: var(--rvo-toggle-default-active-background-color);
@@ -64,14 +36,20 @@
64
36
  border-width: var(--rvo-toggle-default-active-border-width);
65
37
  color: var(--rvo-toggle-default-active-color);
66
38
  }
67
- }
68
39
 
69
- // Focus
70
- .rvo-toggle:focus,
71
- .rvo-toggle:focus-visible,
72
- .rvo-toggle--focus {
73
- outline-color: var(--utrecht-focus-outline-color, transparent);
74
- outline-offset: var(--utrecht-focus-outline-offset, 0);
75
- outline-style: var(--utrecht-focus-outline-style, solid);
76
- outline-width: var(--utrecht-focus-outline-width, 0);
40
+ &:hover:not(:focus, :focus-visible, .rvo-toggle--focus, .rvo-toggle--active) {
41
+ --utrecht-icon-color: var(--rvo-toggle-default-hover-icon-color);
42
+
43
+ color: var(--rvo-toggle-default-hover-color);
44
+ background-color: var(--rvo-toggle-default-hover-background-color);
45
+ text-decoration: var(--rvo-toggle-default-hover-text-decoration);
46
+ }
47
+
48
+ &:focus,
49
+ &:focus-visible {
50
+ outline-color: var(--utrecht-focus-outline-color, transparent);
51
+ outline-offset: var(--utrecht-focus-outline-offset, 0);
52
+ outline-style: var(--utrecht-focus-outline-style, solid);
53
+ outline-width: var(--utrecht-focus-outline-width, 0);
54
+ }
77
55
  }
package/CHANGELOG.md DELETED
@@ -1,36 +0,0 @@
1
- # `@nl-rvo/css-toggle`
2
-
3
- ## 1.3.0
4
-
5
- ### Minor Changes
6
-
7
- - fa36e07: Project structure updates
8
-
9
- - Moved all Storybook stories to the /stories directory.
10
- - Moved all documentation files to the /docs directory.
11
- - Removed React components from library-component-react and moved them into this package.
12
- - Update all .stories imports to the right react package "component-library-react"
13
- - Fix all Redundant / PascalCase lint warnings for .stories files.
14
-
15
- ## 1.2.1
16
-
17
- ### Patch Changes
18
-
19
- - 11eb258: Update imports to support storybook v10
20
-
21
- ## 1.2.0
22
-
23
- ### Minor Changes
24
-
25
- - 0cdf4eb: Remove utrecht-components-css reference and include utrecht css per component when needed
26
-
27
- ## 1.0.0
28
-
29
- ### Major Changes
30
-
31
- - daa0537: Create npm package for each component.
32
-
33
- ## Pre-releases
34
-
35
- _@nl-rvo/component-library-css@1.0.0-alpha.384_:
36
- Added component
package/README.md DELETED
@@ -1 +0,0 @@
1
- Documentatie voor toggle
package/design-tokens.json DELETED
@@ -1,156 +0,0 @@
1
- {
2
- "rvo": {
3
- "toggle": {
4
- "border-radius": {
5
- "css": {
6
- "syntax": "<length>",
7
- "inherits": true
8
- }
9
- },
10
- "padding-block-end": {
11
- "css": {
12
- "syntax": "<length>",
13
- "inherits": true
14
- }
15
- },
16
- "padding-block-start": {
17
- "css": {
18
- "syntax": "<length>",
19
- "inherits": true
20
- }
21
- },
22
- "padding-inline-end": {
23
- "css": {
24
- "syntax": "<length>",
25
- "inherits": true
26
- }
27
- },
28
- "padding-inline-start": {
29
- "css": {
30
- "syntax": "<length>",
31
- "inherits": true
32
- }
33
- },
34
- "padding-inline-end-with-icon": {
35
- "css": {
36
- "syntax": "<length>",
37
- "inherits": true
38
- }
39
- },
40
- "padding-inline-start-with-icon": {
41
- "css": {
42
- "syntax": "<length>",
43
- "inherits": true
44
- }
45
- },
46
- "default": {
47
- "background-color": {
48
- "css": {
49
- "syntax": "<color>",
50
- "inherits": true
51
- }
52
- },
53
- "border-color": {
54
- "css": {
55
- "syntax": "<color>",
56
- "inherits": true
57
- }
58
- },
59
- "border-width": {
60
- "css": {
61
- "syntax": "<length>",
62
- "inherits": true
63
- }
64
- },
65
- "border-style": {
66
- "css": {
67
- "syntax": "<*>",
68
- "inherits": true
69
- }
70
- },
71
- "color": {
72
- "css": {
73
- "syntax": "<color>",
74
- "inherits": true
75
- }
76
- },
77
- "icon-color": {
78
- "css": {
79
- "syntax": "<color>",
80
- "inherits": true
81
- }
82
- },
83
- "text-decoration": {
84
- "css": {
85
- "syntax": "<*>",
86
- "inherits": true
87
- }
88
- },
89
- "hover": {
90
- "background-color": {
91
- "css": {
92
- "syntax": "<color>",
93
- "inherits": true
94
- }
95
- },
96
- "text-decoration": {
97
- "css": {
98
- "syntax": "<*>",
99
- "inherits": true
100
- }
101
- },
102
- "color": {
103
- "css": {
104
- "syntax": "<length>",
105
- "inherits": true
106
- }
107
- },
108
- "icon-color": {
109
- "css": {
110
- "syntax": "<color>",
111
- "inherits": true
112
- }
113
- }
114
- },
115
- "active": {
116
- "background-color": {
117
- "css": {
118
- "syntax": "<color>",
119
- "inherits": true
120
- }
121
- },
122
- "border-color": {
123
- "css": {
124
- "syntax": "<color>",
125
- "inherits": true
126
- }
127
- },
128
- "border-width": {
129
- "css": {
130
- "syntax": "<length>",
131
- "inherits": true
132
- }
133
- },
134
- "border-style": {
135
- "css": {
136
- "syntax": "<*>",
137
- "inherits": true
138
- }
139
- },
140
- "color": {
141
- "css": {
142
- "syntax": "<color>",
143
- "inherits": true
144
- }
145
- },
146
- "icon-color": {
147
- "css": {
148
- "syntax": "<color>",
149
- "inherits": true
150
- }
151
- }
152
- }
153
- }
154
- }
155
- }
156
- }
package/dist/index.css DELETED
@@ -1,285 +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-toggle--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-toggle--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-toggle {
233
- border-radius: var(--rvo-toggle-border-radius);
234
- cursor: pointer;
235
- display: inline-flex;
236
- padding-block-end: var(--rvo-toggle-padding-block-end);
237
- padding-block-start: var(--rvo-toggle-padding-block-start);
238
- padding-inline-end: var(--rvo-toggle-padding-inline-end);
239
- padding-inline-start: var(--rvo-toggle-padding-inline-start);
240
- }
241
-
242
- .rvo-toggle--with-icon {
243
- padding-inline-end: var(--rvo-toggle-padding-inline-end-with-icon);
244
- padding-inline-start: var(--rvo-toggle-padding-inline-start-with-icon);
245
- }
246
-
247
- .rvo-toggle--default {
248
- --utrecht-icon-color: var(--rvo-toggle-default-icon-color);
249
- background-color: var(--rvo-toggle-default-background-color);
250
- border-color: var(--rvo-toggle-default-border-color);
251
- border-style: var(--rvo-toggle-default-border-style);
252
- border-width: var(--rvo-toggle-default-border-width);
253
- color: var(--rvo-toggle-default-color);
254
- text-decoration: var(--rvo-toggle-default-text-decoration);
255
- }
256
-
257
- .rvo-toggle--hover:hover:not(:focus, :focus-visible, .rvo-toggle--focus).rvo-toggle--default,
258
- .rvo-toggle--show-hover:not(:focus, :focus-visible, .rvo-toggle--focus).rvo-toggle--default {
259
- --utrecht-icon-color: var(--rvo-toggle-default-hover-icon-color);
260
- text-decoration: var(--rvo-toggle-default-hover-text-decoration);
261
- }
262
-
263
- .rvo-toggle--hover:hover:not(:focus, :focus-visible, .rvo-toggle--focus, .rvo-toggle--active).rvo-toggle--default,
264
- .rvo-toggle--show-hover:not(:focus, :focus-visible, .rvo-toggle--focus, .rvo-toggle--active).rvo-toggle--default {
265
- background-color: var(--rvo-toggle-default-hover-background-color);
266
- color: var(--rvo-toggle-default-hover-color);
267
- }
268
-
269
- .rvo-toggle--active.rvo-toggle--default {
270
- --utrecht-icon-color: var(--rvo-toggle-default-active-icon-color);
271
- background-color: var(--rvo-toggle-default-active-background-color);
272
- border-color: var(--rvo-toggle-default-active-border-color);
273
- border-style: var(--rvo-toggle-default-active-border-style);
274
- border-width: var(--rvo-toggle-default-active-border-width);
275
- color: var(--rvo-toggle-default-active-color);
276
- }
277
-
278
- .rvo-toggle:focus,
279
- .rvo-toggle:focus-visible,
280
- .rvo-toggle--focus {
281
- outline-color: var(--utrecht-focus-outline-color, transparent);
282
- outline-offset: var(--utrecht-focus-outline-offset, 0);
283
- outline-style: var(--utrecht-focus-outline-style, solid);
284
- outline-width: var(--utrecht-focus-outline-width, 0);
285
- }
package/dist/index.min.css DELETED
@@ -1 +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-toggle--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-toggle--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-toggle{border-radius:var(--rvo-toggle-border-radius);cursor:pointer;display:inline-flex;padding-block-end:var(--rvo-toggle-padding-block-end);padding-block-start:var(--rvo-toggle-padding-block-start);padding-inline-end:var(--rvo-toggle-padding-inline-end);padding-inline-start:var(--rvo-toggle-padding-inline-start)}.rvo-toggle--with-icon{padding-inline-end:var(--rvo-toggle-padding-inline-end-with-icon);padding-inline-start:var(--rvo-toggle-padding-inline-start-with-icon)}.rvo-toggle--default{--utrecht-icon-color:var(--rvo-toggle-default-icon-color);background-color:var(--rvo-toggle-default-background-color);border-color:var(--rvo-toggle-default-border-color);border-style:var(--rvo-toggle-default-border-style);border-width:var(--rvo-toggle-default-border-width);color:var(--rvo-toggle-default-color);text-decoration:var(--rvo-toggle-default-text-decoration)}.rvo-toggle--hover:hover:not(:focus,:focus-visible,.rvo-toggle--focus).rvo-toggle--default,.rvo-toggle--show-hover:not(:focus,:focus-visible,.rvo-toggle--focus).rvo-toggle--default{--utrecht-icon-color:var(--rvo-toggle-default-hover-icon-color);text-decoration:var(--rvo-toggle-default-hover-text-decoration)}.rvo-toggle--hover:hover:not(:focus,:focus-visible,.rvo-toggle--focus,.rvo-toggle--active).rvo-toggle--default,.rvo-toggle--show-hover:not(:focus,:focus-visible,.rvo-toggle--focus,.rvo-toggle--active).rvo-toggle--default{background-color:var(--rvo-toggle-default-hover-background-color);color:var(--rvo-toggle-default-hover-color)}.rvo-toggle--active.rvo-toggle--default{--utrecht-icon-color:var(--rvo-toggle-default-active-icon-color);background-color:var(--rvo-toggle-default-active-background-color);border-color:var(--rvo-toggle-default-active-border-color);border-style:var(--rvo-toggle-default-active-border-style);border-width:var(--rvo-toggle-default-active-border-width);color:var(--rvo-toggle-default-active-color)}.rvo-toggle--focus,.rvo-toggle:focus,.rvo-toggle:focus-visible{outline-color:var(--utrecht-focus-outline-color,transparent);outline-offset:var(--utrecht-focus-outline-offset,0);outline-style:var(--utrecht-focus-outline-style,solid);outline-width:var(--utrecht-focus-outline-width,0)}
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-toggle--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-toggle--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-toggle{border-radius:var(--rvo-toggle-border-radius);cursor:pointer;display:inline-flex;padding-block-end:var(--rvo-toggle-padding-block-end);padding-block-start:var(--rvo-toggle-padding-block-start);padding-inline-end:var(--rvo-toggle-padding-inline-end);padding-inline-start:var(--rvo-toggle-padding-inline-start)}.rvo-toggle--with-icon{padding-inline-end:var(--rvo-toggle-padding-inline-end-with-icon);padding-inline-start:var(--rvo-toggle-padding-inline-start-with-icon)}.rvo-toggle--default{--utrecht-icon-color:var(--rvo-toggle-default-icon-color);background-color:var(--rvo-toggle-default-background-color);border-color:var(--rvo-toggle-default-border-color);border-style:var(--rvo-toggle-default-border-style);border-width:var(--rvo-toggle-default-border-width);color:var(--rvo-toggle-default-color);text-decoration:var(--rvo-toggle-default-text-decoration)}.rvo-toggle--hover:hover:not(:focus,:focus-visible,.rvo-toggle--focus).rvo-toggle--default,.rvo-toggle--show-hover:not(:focus,:focus-visible,.rvo-toggle--focus).rvo-toggle--default{--utrecht-icon-color:var(--rvo-toggle-default-hover-icon-color);text-decoration:var(--rvo-toggle-default-hover-text-decoration)}.rvo-toggle--hover:hover:not(:focus,:focus-visible,.rvo-toggle--focus,.rvo-toggle--active).rvo-toggle--default,.rvo-toggle--show-hover:not(:focus,:focus-visible,.rvo-toggle--focus,.rvo-toggle--active).rvo-toggle--default{background-color:var(--rvo-toggle-default-hover-background-color);color:var(--rvo-toggle-default-hover-color)}.rvo-toggle--active.rvo-toggle--default{--utrecht-icon-color:var(--rvo-toggle-default-active-icon-color);background-color:var(--rvo-toggle-default-active-background-color);border-color:var(--rvo-toggle-default-active-border-color);border-style:var(--rvo-toggle-default-active-border-style);border-width:var(--rvo-toggle-default-active-border-width);color:var(--rvo-toggle-default-active-color)}.rvo-toggle--focus,.rvo-toggle:focus,.rvo-toggle:focus-visible{outline-color:var(--utrecht-focus-outline-color,transparent);outline-offset:var(--utrecht-focus-outline-offset,0);outline-style:var(--utrecht-focus-outline-style,solid);outline-width:var(--utrecht-focus-outline-width,0)}";
package/dist/index.mjs.d.ts DELETED
@@ -1,2 +0,0 @@
1
- declare const css: string;
2
- export default css;