@utrecht/form-toggle-css 1.2.1 → 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/CHANGELOG.md +12 -0
  2. package/dist/index.css +5 -29
  3. package/dist/index.min.css +1 -0
  4. package/dist/index.mjs +1 -0
  5. package/dist/index.mjs.d.ts +2 -0
  6. package/dist/tokens.d.mts +4 -0
  7. package/dist/tokens.mjs +372 -0
  8. package/package.json +4 -4
  9. package/src/_mixin.scss +2 -1
  10. package/src/index.scss +2 -1
  11. package/dist/index.js +0 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @utrecht/form-toggle-css
2
2
 
3
+ ## 1.4.0
4
+
5
+ ### Minor Changes
6
+
7
+ - 725617a: Add `tokens.mjs` and `tokens.d.mts` files to CSS packages.
8
+
9
+ ## 1.3.0
10
+
11
+ ### Minor Changes
12
+
13
+ - e497b08: Export CSS string as default export in `dist/index.mjs`.
14
+
3
15
  ## 1.2.1
4
16
 
5
17
  ### Patch Changes
package/dist/index.css CHANGED
@@ -1,17 +1,8 @@
1
1
  /**
2
2
  * @license EUPL-1.2
3
- * Copyright (c) 2021 Robbert Broersma
3
+ * Copyright (c) 2020-2024 Frameless B.V.
4
+ * Copyright (c) 2021-2024 Gemeente Utrecht
4
5
  */
5
- /**
6
- * @license EUPL-1.2
7
- * Copyright (c) 2021 Robbert Broersma
8
- */
9
- /**
10
- * @license EUPL-1.2
11
- * Copyright (c) 2021 Gemeente Utrecht
12
- * Copyright (c) 2021 Robbert Broersma
13
- */
14
- /* stylelint-disable-next-line block-no-empty */
15
6
  .utrecht-form-toggle {
16
7
  align-items: center;
17
8
  block-size: var(--utrecht-form-toggle-height, 2em);
@@ -39,18 +30,12 @@
39
30
  --utrecht-form-toggle-border-radius: var(--utrecht-form-toggle-track-border-radius);
40
31
  --utrecht-form-toggle-thumb-background-color: ButtonText;
41
32
  --utrecht-form-toggle-thumb-disabled-background-color: GrayText;
42
- /* TODO: Apply `GrayText` to the border-color */
43
33
  border-color: var(--utrecht-form-toggle-track-disabled-border-color, var(--utrecht-form-toggle-track-border-color));
44
34
  border-width: min(var(--utrecht-form-toggle-border-width, 1px), 1px);
45
- /* TODO: Find a way to express the `pressed` state */
46
35
  }
47
36
  }
48
37
 
49
38
  .utrecht-form-toggle--focus-visible, .utrecht-form-toggle--html-div:focus-visible {
50
- /* - The browser default focus ring should apply when these CSS custom properties are not set.
51
- * - Make the `box-shadow` value available, so components that have their own `box-shadow`
52
- * can combine it with the focus ring box shadow.
53
- */
54
39
  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
55
40
  var(--utrecht-focus-inverse-outline-color, transparent);
56
41
  box-shadow: var(--_utrecht-focus-ring-box-shadow);
@@ -58,6 +43,7 @@
58
43
  outline-offset: var(--utrecht-focus-outline-offset, revert);
59
44
  outline-style: var(--utrecht-focus-outline-style, revert);
60
45
  outline-width: var(--utrecht-focus-outline-width, revert);
46
+ z-index: 1;
61
47
  }
62
48
 
63
49
  .utrecht-form-toggle--hover {
@@ -73,7 +59,6 @@
73
59
  }
74
60
 
75
61
  .utrecht-form-toggle__thumb {
76
- /* To have a circle or square by default (1:1 aspect ratio) we use the `min-inline-size` design token for both `inline` and `block` direction. */
77
62
  background-color: var(--utrecht-form-toggle-thumb-background-color, currentColor);
78
63
  border-radius: var(--utrecht-form-toggle-thumb-border-radius, 50%);
79
64
  box-shadow: var(--utrecht-form-toggle-thumb-box-shadow);
@@ -120,10 +105,6 @@
120
105
  }
121
106
 
122
107
  .utrecht-form-toggle__track--focus-visible {
123
- /* - The browser default focus ring should apply when these CSS custom properties are not set.
124
- * - Make the `box-shadow` value available, so components that have their own `box-shadow`
125
- * can combine it with the focus ring box shadow.
126
- */
127
108
  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
128
109
  var(--utrecht-focus-inverse-outline-color, transparent);
129
110
  box-shadow: var(--_utrecht-focus-ring-box-shadow);
@@ -131,29 +112,23 @@
131
112
  outline-offset: var(--utrecht-focus-outline-offset, revert);
132
113
  outline-style: var(--utrecht-focus-outline-style, revert);
133
114
  outline-width: var(--utrecht-focus-outline-width, revert);
115
+ z-index: 1;
134
116
  }
135
117
 
136
118
  .utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox {
137
- /* Source: https://kittygiraudel.com/snippets/sr-only-class/ */
138
119
  block-size: 1px !important;
139
120
  border: 0 !important;
140
121
  clip: rect(1px, 1px, 1px, 1px) !important;
141
122
  -webkit-clip-path: inset(50%) !important;
142
123
  clip-path: inset(50%) !important;
143
124
  inline-size: 1px !important;
144
- /* stylelint-disable-next-line property-disallowed-list */
145
125
  margin: -1px !important;
146
126
  overflow: hidden !important;
147
- /* stylelint-disable-next-line property-disallowed-list */
148
127
  padding: 0 !important;
149
128
  position: absolute !important;
150
129
  white-space: nowrap !important;
151
130
  }
152
131
  .utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:focus-visible ~ .utrecht-form-toggle__track {
153
- /* - The browser default focus ring should apply when these CSS custom properties are not set.
154
- * - Make the `box-shadow` value available, so components that have their own `box-shadow`
155
- * can combine it with the focus ring box shadow.
156
- */
157
132
  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
158
133
  var(--utrecht-focus-inverse-outline-color, transparent);
159
134
  box-shadow: var(--_utrecht-focus-ring-box-shadow);
@@ -161,4 +136,5 @@
161
136
  outline-offset: var(--utrecht-focus-outline-offset, revert);
162
137
  outline-style: var(--utrecht-focus-outline-style, revert);
163
138
  outline-width: var(--utrecht-focus-outline-width, revert);
139
+ z-index: 1;
164
140
  }
package/dist/index.min.css ADDED
@@ -0,0 +1 @@
1
+ .utrecht-form-toggle{align-items:center;block-size:var(--utrecht-form-toggle-height,2em);border-color:var(--utrecht-form-toggle-border-color,currentColor);border-radius:var(--utrecht-form-toggle-border-radius,999rem);border-style:var(--utrecht-form-toggle-border-style,solid);border-width:var(--utrecht-form-toggle-border-width,1px);color:var(--utrecht-form-toggle-color);cursor:var(--utrecht-action-activate-cursor,revert);display:flex;inline-size:var(--utrecht-form-toggle-width,6em);padding-block-end:var(--utrecht-form-toggle-padding-block-end);padding-block-start:var(--utrecht-form-toggle-padding-block-start);padding-inline-end:var(--utrecht-form-toggle-padding-inline-end);padding-inline-start:var(--utrecht-form-toggle-padding-inline-start);position:relative;-webkit-user-select:none;user-select:none}@media screen and (-ms-high-contrast:active),screen and (forced-colors:active){.utrecht-form-toggle{--utrecht-form-toggle-background-color:ButtonFace;--utrecht-form-toggle-border-color:buttonborder;--utrecht-form-toggle-border-width:1px;--utrecht-form-toggle-border-radius:var(--utrecht-form-toggle-track-border-radius);--utrecht-form-toggle-thumb-background-color:ButtonText;--utrecht-form-toggle-thumb-disabled-background-color:GrayText;border-color:var(--utrecht-form-toggle-track-disabled-border-color,var(--utrecht-form-toggle-track-border-color));border-width:min(var(--utrecht-form-toggle-border-width,1px),1px)}}.utrecht-form-toggle--focus-visible,.utrecht-form-toggle--html-div:focus-visible{--_utrecht-focus-ring-box-shadow:0 0 0 var(--utrecht-focus-outline-width,0) var(--utrecht-focus-inverse-outline-color,transparent);box-shadow:var(--_utrecht-focus-ring-box-shadow);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);z-index:1}.utrecht-form-toggle--hover{background-color:var(--utrecht-form-toggle-hover-background-color,var(--utrecht-form-toggle-background-color));color:var(--utrecht-form-toggle-hover-color,var(--utrecht-form-toggle-color))}.utrecht-form-toggle--disabled,.utrecht-form-toggle--html-div:disabled{border-color:var(--utrecht-form-toggle-disabled-border-color,var(--utrecht-form-toggle-border-color,currentColor));border-style:var(--utrecht-form-toggle-disabled-border-style,var(--utrecht-form-toggle-border-style,solid));border-width:var(--utrecht-form-toggle-disabled-border-width,var(--utrecht-form-toggle-border-width,1px));cursor:var(--utrecht-action-disabled-cursor,not-allowed)}.utrecht-form-toggle__thumb{background-color:var(--utrecht-form-toggle-thumb-background-color,currentColor);border-radius:var(--utrecht-form-toggle-thumb-border-radius,50%);box-shadow:var(--utrecht-form-toggle-thumb-box-shadow);margin-inline-end:var(--utrecht-form-toggle-thumb-margin-inline-end,0);margin-inline-start:var(--utrecht-form-toggle-thumb-margin-inline-start,0);min-block-size:var(--utrecht-form-toggle-thumb-min-inline-size,1.5em);min-inline-size:var(--utrecht-form-toggle-thumb-min-inline-size,1.5em);z-index:20}.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:checked~.utrecht-form-toggle__track .utrecht-form-toggle__thumb,.utrecht-form-toggle__thumb--checked{margin-inline-start:auto}.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:not(:checked)~.utrecht-form-toggle__track .utrecht-form-toggle__thumb,.utrecht-form-toggle__thumb--not-checked{margin-inline-end:auto}.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:disabled~.utrecht-form-toggle__track .utrecht-form-toggle__thumb,.utrecht-form-toggle__thumb--disabled{background-color:var(--utrecht-form-toggle-thumb-disabled-background-color,#aaa);box-shadow:var(--utrecht-form-toggle-thumb-disabled-box-shadow,0)}.utrecht-form-toggle__track{align-items:center;background-color:var(--utrecht-form-toggle-accent-color);block-size:100%;border-radius:var(--utrecht-form-toggle-track-border-radius,var(--utrecht-form-toggle-border-radius));display:flex;inline-size:100%}.utrecht-form-toggle__track--html-label{cursor:inherit}.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:checked~.utrecht-form-toggle__track,.utrecht-form-toggle__track--checked{background-color:var(--utrecht-form-toggle-checked-accent-color,var(--utrecht-form-toggle-accent-color))}.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:disabled~.utrecht-form-toggle__track,.utrecht-form-toggle__track--disabled{background-color:var(--utrecht-form-toggle-disabled-background-color,#ddd);color:var(--utrecht-form-toggle-disabled-color,#000)}.utrecht-form-toggle__track--focus-visible{--_utrecht-focus-ring-box-shadow:0 0 0 var(--utrecht-focus-outline-width,0) var(--utrecht-focus-inverse-outline-color,transparent);box-shadow:var(--_utrecht-focus-ring-box-shadow);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);z-index:1}.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox{block-size:1px!important;border:0!important;clip:rect(1px,1px,1px,1px)!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;inline-size:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important}.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:focus-visible~.utrecht-form-toggle__track{--_utrecht-focus-ring-box-shadow:0 0 0 var(--utrecht-focus-outline-width,0) var(--utrecht-focus-inverse-outline-color,transparent);box-shadow:var(--_utrecht-focus-ring-box-shadow);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);z-index:1}
package/dist/index.mjs ADDED
@@ -0,0 +1 @@
1
+ export default ".utrecht-form-toggle{align-items:center;block-size:var(--utrecht-form-toggle-height,2em);border-color:var(--utrecht-form-toggle-border-color,currentColor);border-radius:var(--utrecht-form-toggle-border-radius,999rem);border-style:var(--utrecht-form-toggle-border-style,solid);border-width:var(--utrecht-form-toggle-border-width,1px);color:var(--utrecht-form-toggle-color);cursor:var(--utrecht-action-activate-cursor,revert);display:flex;inline-size:var(--utrecht-form-toggle-width,6em);padding-block-end:var(--utrecht-form-toggle-padding-block-end);padding-block-start:var(--utrecht-form-toggle-padding-block-start);padding-inline-end:var(--utrecht-form-toggle-padding-inline-end);padding-inline-start:var(--utrecht-form-toggle-padding-inline-start);position:relative;-webkit-user-select:none;user-select:none}@media screen and (-ms-high-contrast:active),screen and (forced-colors:active){.utrecht-form-toggle{--utrecht-form-toggle-background-color:ButtonFace;--utrecht-form-toggle-border-color:buttonborder;--utrecht-form-toggle-border-width:1px;--utrecht-form-toggle-border-radius:var(--utrecht-form-toggle-track-border-radius);--utrecht-form-toggle-thumb-background-color:ButtonText;--utrecht-form-toggle-thumb-disabled-background-color:GrayText;border-color:var(--utrecht-form-toggle-track-disabled-border-color,var(--utrecht-form-toggle-track-border-color));border-width:min(var(--utrecht-form-toggle-border-width,1px),1px)}}.utrecht-form-toggle--focus-visible,.utrecht-form-toggle--html-div:focus-visible{--_utrecht-focus-ring-box-shadow:0 0 0 var(--utrecht-focus-outline-width,0) var(--utrecht-focus-inverse-outline-color,transparent);box-shadow:var(--_utrecht-focus-ring-box-shadow);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);z-index:1}.utrecht-form-toggle--hover{background-color:var(--utrecht-form-toggle-hover-background-color,var(--utrecht-form-toggle-background-color));color:var(--utrecht-form-toggle-hover-color,var(--utrecht-form-toggle-color))}.utrecht-form-toggle--disabled,.utrecht-form-toggle--html-div:disabled{border-color:var(--utrecht-form-toggle-disabled-border-color,var(--utrecht-form-toggle-border-color,currentColor));border-style:var(--utrecht-form-toggle-disabled-border-style,var(--utrecht-form-toggle-border-style,solid));border-width:var(--utrecht-form-toggle-disabled-border-width,var(--utrecht-form-toggle-border-width,1px));cursor:var(--utrecht-action-disabled-cursor,not-allowed)}.utrecht-form-toggle__thumb{background-color:var(--utrecht-form-toggle-thumb-background-color,currentColor);border-radius:var(--utrecht-form-toggle-thumb-border-radius,50%);box-shadow:var(--utrecht-form-toggle-thumb-box-shadow);margin-inline-end:var(--utrecht-form-toggle-thumb-margin-inline-end,0);margin-inline-start:var(--utrecht-form-toggle-thumb-margin-inline-start,0);min-block-size:var(--utrecht-form-toggle-thumb-min-inline-size,1.5em);min-inline-size:var(--utrecht-form-toggle-thumb-min-inline-size,1.5em);z-index:20}.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:checked~.utrecht-form-toggle__track .utrecht-form-toggle__thumb,.utrecht-form-toggle__thumb--checked{margin-inline-start:auto}.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:not(:checked)~.utrecht-form-toggle__track .utrecht-form-toggle__thumb,.utrecht-form-toggle__thumb--not-checked{margin-inline-end:auto}.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:disabled~.utrecht-form-toggle__track .utrecht-form-toggle__thumb,.utrecht-form-toggle__thumb--disabled{background-color:var(--utrecht-form-toggle-thumb-disabled-background-color,#aaa);box-shadow:var(--utrecht-form-toggle-thumb-disabled-box-shadow,0)}.utrecht-form-toggle__track{align-items:center;background-color:var(--utrecht-form-toggle-accent-color);block-size:100%;border-radius:var(--utrecht-form-toggle-track-border-radius,var(--utrecht-form-toggle-border-radius));display:flex;inline-size:100%}.utrecht-form-toggle__track--html-label{cursor:inherit}.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:checked~.utrecht-form-toggle__track,.utrecht-form-toggle__track--checked{background-color:var(--utrecht-form-toggle-checked-accent-color,var(--utrecht-form-toggle-accent-color))}.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:disabled~.utrecht-form-toggle__track,.utrecht-form-toggle__track--disabled{background-color:var(--utrecht-form-toggle-disabled-background-color,#ddd);color:var(--utrecht-form-toggle-disabled-color,#000)}.utrecht-form-toggle__track--focus-visible{--_utrecht-focus-ring-box-shadow:0 0 0 var(--utrecht-focus-outline-width,0) var(--utrecht-focus-inverse-outline-color,transparent);box-shadow:var(--_utrecht-focus-ring-box-shadow);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);z-index:1}.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox{block-size:1px!important;border:0!important;clip:rect(1px,1px,1px,1px)!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;inline-size:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important}.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:focus-visible~.utrecht-form-toggle__track{--_utrecht-focus-ring-box-shadow:0 0 0 var(--utrecht-focus-outline-width,0) var(--utrecht-focus-inverse-outline-color,transparent);box-shadow:var(--_utrecht-focus-ring-box-shadow);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);z-index:1}";
package/dist/index.mjs.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ declare const css: string;
2
+ export default css;
package/dist/tokens.d.mts ADDED
@@ -0,0 +1,4 @@
1
+
2
+ declare const tokens: any;
3
+
4
+ export default tokens;
package/dist/tokens.mjs ADDED
@@ -0,0 +1,372 @@
1
+ export default {
2
+ "utrecht": {
3
+ "form-toggle": {
4
+ "accent-color": {
5
+ "$extensions": {
6
+ "nl.nldesignsystem.css.property": {
7
+ "syntax": "<color>",
8
+ "inherits": true
9
+ },
10
+ "nl.nldesignsystem.figma.supports-token": false
11
+ },
12
+ "type": "color"
13
+ },
14
+ "background-color": {
15
+ "$extensions": {
16
+ "nl.nldesignsystem.css.property": {
17
+ "syntax": "<color>",
18
+ "inherits": true
19
+ },
20
+ "nl.nldesignsystem.figma.supports-token": false
21
+ },
22
+ "type": "color"
23
+ },
24
+ "border-color": {
25
+ "$extensions": {
26
+ "nl.nldesignsystem.css.property": {
27
+ "syntax": "<color>",
28
+ "inherits": true
29
+ },
30
+ "nl.nldesignsystem.figma.supports-token": false
31
+ },
32
+ "type": "color"
33
+ },
34
+ "border-style": {
35
+ "$extensions": {
36
+ "nl.nldesignsystem.css.property": {
37
+ "syntax": "*",
38
+ "inherits": true
39
+ },
40
+ "nl.nldesignsystem.figma.supports-token": false
41
+ },
42
+ "type": "other"
43
+ },
44
+ "border-radius": {
45
+ "$extensions": {
46
+ "nl.nldesignsystem.css.property": {
47
+ "syntax": "<length-percentage>",
48
+ "inherits": true
49
+ },
50
+ "nl.nldesignsystem.figma.supports-token": false
51
+ },
52
+ "type": "borderRadius"
53
+ },
54
+ "border-width": {
55
+ "$extensions": {
56
+ "nl.nldesignsystem.css.property": {
57
+ "syntax": "<length>",
58
+ "inherits": true
59
+ },
60
+ "nl.nldesignsystem.figma.supports-token": false
61
+ },
62
+ "type": "borderWidth"
63
+ },
64
+ "color": {
65
+ "$extensions": {
66
+ "nl.nldesignsystem.css.property": {
67
+ "syntax": "<color>",
68
+ "inherits": true
69
+ },
70
+ "nl.nldesignsystem.figma.supports-token": false
71
+ },
72
+ "type": "color"
73
+ },
74
+ "height": {
75
+ "$extensions": {
76
+ "nl.nldesignsystem.css.property": {
77
+ "syntax": "<length>",
78
+ "inherits": true
79
+ },
80
+ "nl.nldesignsystem.figma.supports-token": false
81
+ },
82
+ "type": "sizing"
83
+ },
84
+ "padding-inline-end": {
85
+ "$extensions": {
86
+ "nl.nldesignsystem.css.property": {
87
+ "syntax": "<length>",
88
+ "inherits": true
89
+ },
90
+ "nl.nldesignsystem.figma.supports-token": true
91
+ },
92
+ "type": "spacing"
93
+ },
94
+ "padding-inline-start": {
95
+ "$extensions": {
96
+ "nl.nldesignsystem.css.property": {
97
+ "syntax": "<length>",
98
+ "inherits": true
99
+ },
100
+ "nl.nldesignsystem.figma.supports-token": true
101
+ },
102
+ "type": "spacing"
103
+ },
104
+ "padding-block-end": {
105
+ "$extensions": {
106
+ "nl.nldesignsystem.css.property": {
107
+ "syntax": "<length>",
108
+ "inherits": true
109
+ },
110
+ "nl.nldesignsystem.figma.supports-token": true
111
+ },
112
+ "type": "spacing"
113
+ },
114
+ "padding-block-start": {
115
+ "$extensions": {
116
+ "nl.nldesignsystem.css.property": {
117
+ "syntax": "<length>",
118
+ "inherits": true
119
+ },
120
+ "nl.nldesignsystem.figma.supports-token": true
121
+ },
122
+ "type": "spacing"
123
+ },
124
+ "width": {
125
+ "$extensions": {
126
+ "nl.nldesignsystem.css.property": {
127
+ "syntax": "<length>",
128
+ "inherits": true
129
+ },
130
+ "nl.nldesignsystem.figma.supports-token": false
131
+ },
132
+ "type": "sizing"
133
+ },
134
+ "track": {
135
+ "border-color": {
136
+ "$extensions": {
137
+ "nl.nldesignsystem.css.property": {
138
+ "syntax": "<color>",
139
+ "inherits": true
140
+ },
141
+ "nl.nldesignsystem.figma.supports-token": false
142
+ },
143
+ "type": "color"
144
+ },
145
+ "border-radius": {
146
+ "$extensions": {
147
+ "nl.nldesignsystem.css.property": {
148
+ "syntax": "<length-percentage>",
149
+ "inherits": true
150
+ },
151
+ "nl.nldesignsystem.figma.supports-token": false
152
+ },
153
+ "type": "borderRadius"
154
+ },
155
+ "disabled": {
156
+ "background-color": {
157
+ "$extensions": {
158
+ "nl.nldesignsystem.css.property": {
159
+ "syntax": "<color>",
160
+ "inherits": true
161
+ },
162
+ "nl.nldesignsystem.figma.supports-token": false
163
+ },
164
+ "type": "color"
165
+ },
166
+ "border-color": {
167
+ "$extensions": {
168
+ "nl.nldesignsystem.css.property": {
169
+ "syntax": "<color>",
170
+ "inherits": true
171
+ },
172
+ "nl.nldesignsystem.figma.supports-token": false
173
+ },
174
+ "type": "color"
175
+ }
176
+ }
177
+ },
178
+ "thumb": {
179
+ "background-color": {
180
+ "$extensions": {
181
+ "nl.nldesignsystem.css.property": {
182
+ "syntax": "<color>",
183
+ "inherits": true
184
+ },
185
+ "nl.nldesignsystem.figma.supports-token": false
186
+ },
187
+ "type": "color"
188
+ },
189
+ "border-radius": {
190
+ "$extensions": {
191
+ "nl.nldesignsystem.css.property": {
192
+ "syntax": "<length-percentage>",
193
+ "inherits": true
194
+ },
195
+ "nl.nldesignsystem.figma.supports-token": false
196
+ },
197
+ "type": "borderRadius"
198
+ },
199
+ "box-shadow": {
200
+ "$extensions": {
201
+ "nl.nldesignsystem.css.property": {
202
+ "syntax": "*",
203
+ "inherits": true
204
+ },
205
+ "nl.nldesignsystem.figma.supports-token": false
206
+ },
207
+ "type": "boxShadow"
208
+ },
209
+ "margin-inline-start": {
210
+ "$extensions": {
211
+ "nl.nldesignsystem.css.property": {
212
+ "syntax": "<length>",
213
+ "inherits": true
214
+ },
215
+ "nl.nldesignsystem.figma.supports-token": false
216
+ },
217
+ "type": "spacing"
218
+ },
219
+ "margin-inline-end": {
220
+ "$extensions": {
221
+ "nl.nldesignsystem.css.property": {
222
+ "syntax": "<length>",
223
+ "inherits": true
224
+ },
225
+ "nl.nldesignsystem.figma.supports-token": false
226
+ },
227
+ "type": "spacing"
228
+ },
229
+ "min-inline-size": {
230
+ "$extensions": {
231
+ "nl.nldesignsystem.css.property": {
232
+ "syntax": "<length>",
233
+ "inherits": true
234
+ },
235
+ "nl.nldesignsystem.figma.supports-token": false
236
+ },
237
+ "type": "sizing"
238
+ },
239
+ "disabled": {
240
+ "box-shadow": {
241
+ "$extensions": {
242
+ "nl.nldesignsystem.css.property": {
243
+ "syntax": "*",
244
+ "inherits": true
245
+ },
246
+ "nl.nldesignsystem.figma.supports-token": false
247
+ },
248
+ "type": "boxShadow"
249
+ },
250
+ "background-color": {
251
+ "$extensions": {
252
+ "nl.nldesignsystem.css.property": {
253
+ "syntax": "<color>",
254
+ "inherits": true
255
+ },
256
+ "nl.nldesignsystem.figma.supports-token": false
257
+ },
258
+ "type": "color"
259
+ }
260
+ }
261
+ },
262
+ "checked": {
263
+ "accent-color": {
264
+ "$extensions": {
265
+ "nl.nldesignsystem.css.property": {
266
+ "syntax": "<color>",
267
+ "inherits": true
268
+ },
269
+ "nl.nldesignsystem.figma.supports-token": false
270
+ },
271
+ "type": "color"
272
+ }
273
+ },
274
+ "disabled": {
275
+ "border-color": {
276
+ "$extensions": {
277
+ "nl.nldesignsystem.css.property": {
278
+ "syntax": "<color>",
279
+ "inherits": true
280
+ },
281
+ "nl.nldesignsystem.figma.supports-token": false
282
+ },
283
+ "type": "color"
284
+ },
285
+ "border-style": {
286
+ "$extensions": {
287
+ "nl.nldesignsystem.css.property": {
288
+ "syntax": "*",
289
+ "inherits": true
290
+ },
291
+ "nl.nldesignsystem.figma.supports-token": false
292
+ },
293
+ "type": "other"
294
+ },
295
+ "border-width": {
296
+ "$extensions": {
297
+ "nl.nldesignsystem.css.property": {
298
+ "syntax": "<length>",
299
+ "inherits": true
300
+ },
301
+ "nl.nldesignsystem.figma.supports-token": false
302
+ },
303
+ "type": "borderWidth"
304
+ },
305
+ "color": {
306
+ "$extensions": {
307
+ "nl.nldesignsystem.css.property": {
308
+ "syntax": "<color>",
309
+ "inherits": true
310
+ },
311
+ "nl.nldesignsystem.figma.supports-token": false
312
+ },
313
+ "type": "color"
314
+ }
315
+ },
316
+ "focus": {
317
+ "border-color": {
318
+ "$extensions": {
319
+ "nl.nldesignsystem.css.property": {
320
+ "syntax": "<color>",
321
+ "inherits": true
322
+ },
323
+ "nl.nldesignsystem.figma.supports-token": false
324
+ },
325
+ "type": "color"
326
+ },
327
+ "border-style": {
328
+ "$extensions": {
329
+ "nl.nldesignsystem.css.property": {
330
+ "syntax": "*",
331
+ "inherits": true
332
+ },
333
+ "nl.nldesignsystem.figma.supports-token": false
334
+ },
335
+ "type": "other"
336
+ },
337
+ "border-width": {
338
+ "$extensions": {
339
+ "nl.nldesignsystem.css.property": {
340
+ "syntax": "<length>",
341
+ "inherits": true
342
+ },
343
+ "nl.nldesignsystem.figma.supports-token": false
344
+ },
345
+ "type": "borderWidth"
346
+ }
347
+ },
348
+ "hover": {
349
+ "background-color": {
350
+ "$extensions": {
351
+ "nl.nldesignsystem.css.property": {
352
+ "syntax": "<color>",
353
+ "inherits": true
354
+ },
355
+ "nl.nldesignsystem.figma.supports-token": false
356
+ },
357
+ "type": "color"
358
+ },
359
+ "color": {
360
+ "$extensions": {
361
+ "nl.nldesignsystem.css.property": {
362
+ "syntax": "<color>",
363
+ "inherits": true
364
+ },
365
+ "nl.nldesignsystem.figma.supports-token": false
366
+ },
367
+ "type": "color"
368
+ }
369
+ }
370
+ }
371
+ }
372
+ };
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "1.2.1",
2
+ "version": "1.4.0",
3
3
  "author": "Community for NL Design System",
4
4
  "description": "Form toggle component for the Municipality of Utrecht based on the NL Design System architecture",
5
5
  "license": "EUPL-1.2",
@@ -12,8 +12,8 @@
12
12
  ],
13
13
  "main": "dist/index.css",
14
14
  "devDependencies": {
15
- "rollup": "4.18.0",
16
- "@utrecht/focus-ring-css": "1.2.0"
15
+ "@utrecht/focus-ring-css": "2.3.0",
16
+ "@utrecht/build-utils-css": "0.0.1"
17
17
  },
18
18
  "keywords": [
19
19
  "nl-design-system"
@@ -27,7 +27,7 @@
27
27
  "directory": "components/form-toggle"
28
28
  },
29
29
  "scripts": {
30
- "build": "rollup -c ../rollup.config.mjs",
30
+ "build": "build-css-package",
31
31
  "clean": "rimraf dist"
32
32
  }
33
33
  }
package/src/_mixin.scss CHANGED
@@ -1,6 +1,7 @@
1
1
  /**
2
2
  * @license EUPL-1.2
3
- * Copyright (c) 2021 Robbert Broersma
3
+ * Copyright (c) 2020-2024 Frameless B.V.
4
+ * Copyright (c) 2021-2024 Gemeente Utrecht
4
5
  */
5
6
 
6
7
  @import "~@utrecht/focus-ring-css/src/mixin";
package/src/index.scss CHANGED
@@ -1,6 +1,7 @@
1
1
  /**
2
2
  * @license EUPL-1.2
3
- * Copyright (c) 2021 Robbert Broersma
3
+ * Copyright (c) 2020-2024 Frameless B.V.
4
+ * Copyright (c) 2021-2024 Gemeente Utrecht
4
5
  */
5
6
 
6
7
  @import "./mixin";
package/dist/index.js DELETED
@@ -1 +0,0 @@
1
- var undefined$1 = undefined;export{undefined$1 as default};