@utrecht/form-toggle-css 1.0.0 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/index.css +164 -0
  2. package/dist/index.js +1 -0
  3. package/package.json +12 -4
  4. package/src/_mixin.scss +133 -0
  5. package/src/index.scss +108 -0
  6. package/src/tokens.json +162 -0
package/dist/index.css ADDED
@@ -0,0 +1,164 @@
1
+ /**
2
+ * @license EUPL-1.2
3
+ * Copyright (c) 2021 Robbert Broersma
4
+ */
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
+ .utrecht-form-toggle {
16
+ align-items: center;
17
+ block-size: var(--utrecht-form-toggle-height, 2em);
18
+ border-color: var(--utrecht-form-toggle-border-color, currentColor);
19
+ border-radius: var(--utrecht-form-toggle-border-radius, 999rem);
20
+ border-style: var(--utrecht-form-toggle-border-style, solid);
21
+ border-width: var(--utrecht-form-toggle-border-width, 1px);
22
+ color: var(--utrecht-form-toggle-color);
23
+ cursor: var(--utrecht-action-activate-cursor, revert);
24
+ display: flex;
25
+ inline-size: var(--utrecht-form-toggle-width, 6em);
26
+ padding-block-end: var(--utrecht-form-toggle-padding-block-end);
27
+ padding-block-start: var(--utrecht-form-toggle-padding-block-start);
28
+ padding-inline-end: var(--utrecht-form-toggle-padding-inline-end);
29
+ padding-inline-start: var(--utrecht-form-toggle-padding-inline-start);
30
+ position: relative;
31
+ -webkit-user-select: none;
32
+ user-select: none;
33
+ }
34
+ @media screen and (-ms-high-contrast: active), screen and (forced-colors: active) {
35
+ .utrecht-form-toggle {
36
+ --utrecht-form-toggle-background-color: ButtonFace;
37
+ --utrecht-form-toggle-border-color: buttonborder;
38
+ --utrecht-form-toggle-border-width: 1px;
39
+ --utrecht-form-toggle-border-radius: var(--utrecht-form-toggle-track-border-radius);
40
+ --utrecht-form-toggle-thumb-background-color: ButtonText;
41
+ --utrecht-form-toggle-thumb-disabled-background-color: GrayText;
42
+ /* TODO: Apply `GrayText` to the border-color */
43
+ border-color: var(--utrecht-form-toggle-track-disabled-border-color, var(--utrecht-form-toggle-track-border-color));
44
+ border-width: min(var(--utrecht-form-toggle-border-width, 1px), 1px);
45
+ /* TODO: Find a way to express the `pressed` state */
46
+ }
47
+ }
48
+
49
+ .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
+ --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
55
+ var(--utrecht-focus-inverse-outline-color, transparent);
56
+ box-shadow: var(--_utrecht-focus-ring-box-shadow);
57
+ outline-color: var(--utrecht-focus-outline-color, revert);
58
+ outline-offset: var(--utrecht-focus-outline-offset, revert);
59
+ outline-style: var(--utrecht-focus-outline-style, revert);
60
+ outline-width: var(--utrecht-focus-outline-width, revert);
61
+ }
62
+
63
+ .utrecht-form-toggle--hover {
64
+ background-color: var(--utrecht-form-toggle-hover-background-color, var(--utrecht-form-toggle-background-color));
65
+ color: var(--utrecht-form-toggle-hover-color, var(--utrecht-form-toggle-color));
66
+ }
67
+
68
+ .utrecht-form-toggle--disabled, .utrecht-form-toggle--html-div:disabled {
69
+ border-color: var(--utrecht-form-toggle-disabled-border-color, var(--utrecht-form-toggle-border-color, currentColor));
70
+ border-style: var(--utrecht-form-toggle-disabled-border-style, var(--utrecht-form-toggle-border-style, solid));
71
+ border-width: var(--utrecht-form-toggle-disabled-border-width, var(--utrecht-form-toggle-border-width, 1px));
72
+ cursor: var(--utrecht-action-disabled-cursor, not-allowed);
73
+ }
74
+
75
+ .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
+ background-color: var(--utrecht-form-toggle-thumb-background-color, currentColor);
78
+ border-radius: var(--utrecht-form-toggle-thumb-border-radius, 50%);
79
+ box-shadow: var(--utrecht-form-toggle-thumb-box-shadow);
80
+ margin-inline-end: var(--utrecht-form-toggle-thumb-margin-inline-end, 0);
81
+ margin-inline-start: var(--utrecht-form-toggle-thumb-margin-inline-start, 0);
82
+ min-block-size: var(--utrecht-form-toggle-thumb-min-inline-size, 1.5em);
83
+ min-inline-size: var(--utrecht-form-toggle-thumb-min-inline-size, 1.5em);
84
+ z-index: 20;
85
+ }
86
+
87
+ .utrecht-form-toggle__thumb--checked, .utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:checked ~ .utrecht-form-toggle__track .utrecht-form-toggle__thumb {
88
+ margin-inline-start: auto;
89
+ }
90
+
91
+ .utrecht-form-toggle__thumb--not-checked, .utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:not(:checked) ~ .utrecht-form-toggle__track .utrecht-form-toggle__thumb {
92
+ margin-inline-end: auto;
93
+ }
94
+
95
+ .utrecht-form-toggle__thumb--disabled, .utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:disabled ~ .utrecht-form-toggle__track .utrecht-form-toggle__thumb {
96
+ background-color: var(--utrecht-form-toggle-thumb-disabled-background-color, #aaa);
97
+ box-shadow: var(--utrecht-form-toggle-thumb-disabled-box-shadow, 0);
98
+ }
99
+
100
+ .utrecht-form-toggle__track {
101
+ align-items: center;
102
+ background-color: var(--utrecht-form-toggle-accent-color);
103
+ block-size: 100%;
104
+ border-radius: var(--utrecht-form-toggle-track-border-radius, var(--utrecht-form-toggle-border-radius));
105
+ display: flex;
106
+ inline-size: 100%;
107
+ }
108
+
109
+ .utrecht-form-toggle__track--html-label {
110
+ cursor: inherit;
111
+ }
112
+
113
+ .utrecht-form-toggle__track--checked, .utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:checked ~ .utrecht-form-toggle__track {
114
+ background-color: var(--utrecht-form-toggle-checked-accent-color, var(--utrecht-form-toggle-accent-color));
115
+ }
116
+
117
+ .utrecht-form-toggle__track--disabled, .utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:disabled ~ .utrecht-form-toggle__track {
118
+ background-color: var(--utrecht-form-toggle-background-disabled-background-color, #ddd);
119
+ color: var(--utrecht-form-toggle-disabled-color, black);
120
+ }
121
+
122
+ .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
+ --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
128
+ var(--utrecht-focus-inverse-outline-color, transparent);
129
+ box-shadow: var(--_utrecht-focus-ring-box-shadow);
130
+ outline-color: var(--utrecht-focus-outline-color, revert);
131
+ outline-offset: var(--utrecht-focus-outline-offset, revert);
132
+ outline-style: var(--utrecht-focus-outline-style, revert);
133
+ outline-width: var(--utrecht-focus-outline-width, revert);
134
+ }
135
+
136
+ .utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox {
137
+ /* Source: https://kittygiraudel.com/snippets/sr-only-class/ */
138
+ block-size: 1px !important;
139
+ border: 0 !important;
140
+ clip: rect(1px, 1px, 1px, 1px) !important;
141
+ -webkit-clip-path: inset(50%) !important;
142
+ clip-path: inset(50%) !important;
143
+ inline-size: 1px !important;
144
+ /* stylelint-disable-next-line property-disallowed-list */
145
+ margin: -1px !important;
146
+ overflow: hidden !important;
147
+ /* stylelint-disable-next-line property-disallowed-list */
148
+ padding: 0 !important;
149
+ position: absolute !important;
150
+ white-space: nowrap !important;
151
+ }
152
+ .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
+ --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
158
+ var(--utrecht-focus-inverse-outline-color, transparent);
159
+ box-shadow: var(--_utrecht-focus-ring-box-shadow);
160
+ outline-color: var(--utrecht-focus-outline-color, revert);
161
+ outline-offset: var(--utrecht-focus-outline-offset, revert);
162
+ outline-style: var(--utrecht-focus-outline-style, revert);
163
+ outline-width: var(--utrecht-focus-outline-width, revert);
164
+ }
package/dist/index.js ADDED
@@ -0,0 +1 @@
1
+ var undefined$1 = undefined;export{undefined$1 as default};
package/package.json CHANGED
@@ -1,18 +1,26 @@
1
1
  {
2
- "version": "1.0.0",
2
+ "version": "1.1.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",
6
6
  "name": "@utrecht/form-toggle-css",
7
7
  "files": [
8
- "dist/"
8
+ "dist/",
9
+ "src/"
9
10
  ],
10
- "devDependencies": {},
11
+ "main": "dist/index.css",
12
+ "devDependencies": {
13
+ "rollup": "3.29.4",
14
+ "@utrecht/focus-ring-css": "1.1.0"
15
+ },
11
16
  "keywords": [
12
17
  "nl-design-system"
13
18
  ],
14
19
  "publishConfig": {
15
20
  "access": "public"
16
21
  },
17
- "scripts": {}
22
+ "scripts": {
23
+ "build": "rollup -c ../rollup.config.mjs",
24
+ "clean": "rimraf dist"
25
+ }
18
26
  }
package/src/_mixin.scss ADDED
@@ -0,0 +1,133 @@
1
+ /**
2
+ * @license EUPL-1.2
3
+ * Copyright (c) 2021 Robbert Broersma
4
+ */
5
+
6
+ @import "~@utrecht/focus-ring-css/src/mixin";
7
+
8
+ @mixin invisible-but-focusable {
9
+ /* Source: https://kittygiraudel.com/snippets/sr-only-class/ */
10
+ block-size: 1px !important;
11
+ border: 0 !important;
12
+ clip: rect(1px, 1px, 1px, 1px) !important;
13
+ -webkit-clip-path: inset(50%) !important;
14
+ clip-path: inset(50%) !important;
15
+ inline-size: 1px !important;
16
+ /* stylelint-disable-next-line property-disallowed-list */
17
+ margin: -1px !important;
18
+ overflow: hidden !important;
19
+ /* stylelint-disable-next-line property-disallowed-list */
20
+ padding: 0 !important;
21
+ position: absolute !important;
22
+ white-space: nowrap !important;
23
+ }
24
+
25
+ @mixin utrecht-form-toggle {
26
+ align-items: center;
27
+ block-size: var(--utrecht-form-toggle-height, 2em);
28
+ border-color: var(--utrecht-form-toggle-border-color, currentColor);
29
+ border-radius: var(--utrecht-form-toggle-border-radius, 999rem);
30
+ border-style: var(--utrecht-form-toggle-border-style, solid);
31
+ border-width: var(--utrecht-form-toggle-border-width, 1px);
32
+ color: var(--utrecht-form-toggle-color);
33
+ cursor: var(--utrecht-action-activate-cursor, revert);
34
+ display: flex;
35
+ inline-size: var(--utrecht-form-toggle-width, 6em);
36
+ padding-block-end: var(--utrecht-form-toggle-padding-block-end);
37
+ padding-block-start: var(--utrecht-form-toggle-padding-block-start);
38
+ padding-inline-end: var(--utrecht-form-toggle-padding-inline-end);
39
+ padding-inline-start: var(--utrecht-form-toggle-padding-inline-start);
40
+ position: relative;
41
+ -webkit-user-select: none;
42
+ user-select: none;
43
+ }
44
+
45
+ @mixin utrecht-form-toggle--media-query-forced-colors {
46
+ @media screen and (-ms-high-contrast: active), screen and (forced-colors: active) {
47
+ --utrecht-form-toggle-background-color: ButtonFace;
48
+ --utrecht-form-toggle-border-color: buttonborder;
49
+ --utrecht-form-toggle-border-width: 1px;
50
+ --utrecht-form-toggle-border-radius: var(--utrecht-form-toggle-track-border-radius);
51
+ --utrecht-form-toggle-thumb-background-color: ButtonText;
52
+ --utrecht-form-toggle-thumb-disabled-background-color: GrayText;
53
+
54
+ /* TODO: Apply `GrayText` to the border-color */
55
+ border-color: var(--utrecht-form-toggle-track-disabled-border-color, var(--utrecht-form-toggle-track-border-color));
56
+ border-width: min(var(--utrecht-form-toggle-border-width, 1px), 1px);
57
+
58
+ /* TODO: Find a way to express the `pressed` state */
59
+ }
60
+ }
61
+
62
+ @mixin utrecht-form-toggle--disabled {
63
+ border-color: var(--utrecht-form-toggle-disabled-border-color, var(--utrecht-form-toggle-border-color, currentColor));
64
+ border-style: var(--utrecht-form-toggle-disabled-border-style, var(--utrecht-form-toggle-border-style, solid));
65
+ border-width: var(--utrecht-form-toggle-disabled-border-width, var(--utrecht-form-toggle-border-width, 1px));
66
+ cursor: var(--utrecht-action-disabled-cursor, not-allowed);
67
+ }
68
+
69
+ @mixin utrecht-form-toggle--focus {
70
+ // border-color: var(--utrecht-form-toggle-focus-border-color, var(--utrecht-form-toggle-border-color, currentColor));
71
+ // border-style: var(--utrecht-form-toggle-focus-border-style, var(--utrecht-form-toggle-border-style, solid));
72
+ // border-width: var(--utrecht-form-toggle-focus-border-width, var(--utrecht-form-toggle-border-width, 1px));
73
+ }
74
+
75
+ @mixin utrecht-form-toggle--focus-visible {
76
+ @include utrecht-focus-visible;
77
+ }
78
+
79
+ @mixin utrecht-form-toggle--hover {
80
+ background-color: var(--utrecht-form-toggle-hover-background-color, var(--utrecht-form-toggle-background-color));
81
+ color: var(--utrecht-form-toggle-hover-color, var(--utrecht-form-toggle-color));
82
+ }
83
+
84
+ @mixin utrecht-form-toggle__thumb {
85
+ /* 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. */
86
+ background-color: var(--utrecht-form-toggle-thumb-background-color, currentColor);
87
+ border-radius: var(--utrecht-form-toggle-thumb-border-radius, 50%);
88
+ box-shadow: var(--utrecht-form-toggle-thumb-box-shadow);
89
+ margin-inline-end: var(--utrecht-form-toggle-thumb-margin-inline-end, 0);
90
+ margin-inline-start: var(--utrecht-form-toggle-thumb-margin-inline-start, 0);
91
+ min-block-size: var(--utrecht-form-toggle-thumb-min-inline-size, 1.5em);
92
+ min-inline-size: var(--utrecht-form-toggle-thumb-min-inline-size, 1.5em);
93
+ z-index: 20;
94
+ }
95
+
96
+ @mixin utrecht-form-toggle__track--html-label {
97
+ cursor: inherit;
98
+ }
99
+
100
+ @mixin utrecht-form-toggle__thumb--checked {
101
+ margin-inline-start: auto;
102
+ }
103
+
104
+ @mixin utrecht-form-toggle__track {
105
+ align-items: center;
106
+ background-color: var(--utrecht-form-toggle-accent-color);
107
+ block-size: 100%;
108
+ border-radius: var(--utrecht-form-toggle-track-border-radius, var(--utrecht-form-toggle-border-radius));
109
+ display: flex;
110
+ inline-size: 100%;
111
+ }
112
+
113
+ @mixin utrecht-form-toggle__track--checked {
114
+ background-color: var(--utrecht-form-toggle-checked-accent-color, var(--utrecht-form-toggle-accent-color));
115
+ }
116
+
117
+ @mixin utrecht-form-toggle__track--disabled {
118
+ background-color: var(--utrecht-form-toggle-background-disabled-background-color, #ddd);
119
+ color: var(--utrecht-form-toggle-disabled-color, black);
120
+ }
121
+
122
+ @mixin utrecht-form-toggle__track--focus-visible {
123
+ @include utrecht-focus-ring;
124
+ }
125
+
126
+ @mixin utrecht-form-toggle__thumb--not-checked {
127
+ margin-inline-end: auto;
128
+ }
129
+
130
+ @mixin utrecht-form-toggle__thumb--disabled {
131
+ background-color: var(--utrecht-form-toggle-thumb-disabled-background-color, #aaa);
132
+ box-shadow: var(--utrecht-form-toggle-thumb-disabled-box-shadow, 0);
133
+ }
package/src/index.scss ADDED
@@ -0,0 +1,108 @@
1
+ /**
2
+ * @license EUPL-1.2
3
+ * Copyright (c) 2021 Robbert Broersma
4
+ */
5
+
6
+ @import "./mixin";
7
+
8
+ .utrecht-form-toggle {
9
+ @include utrecht-form-toggle;
10
+ @include utrecht-form-toggle--media-query-forced-colors;
11
+ }
12
+
13
+ .utrecht-form-toggle--focus {
14
+ @include utrecht-form-toggle--focus;
15
+ }
16
+
17
+ .utrecht-form-toggle--focus-visible {
18
+ @include utrecht-form-toggle--focus-visible;
19
+ }
20
+
21
+ .utrecht-form-toggle--hover {
22
+ @include utrecht-form-toggle--hover;
23
+ }
24
+
25
+ .utrecht-form-toggle--disabled {
26
+ @include utrecht-form-toggle--disabled;
27
+ }
28
+
29
+ .utrecht-form-toggle__thumb {
30
+ @include utrecht-form-toggle__thumb;
31
+ }
32
+
33
+ .utrecht-form-toggle__thumb--checked {
34
+ @include utrecht-form-toggle__thumb--checked;
35
+ }
36
+
37
+ .utrecht-form-toggle__thumb--not-checked {
38
+ @include utrecht-form-toggle__thumb--not-checked;
39
+ }
40
+
41
+ .utrecht-form-toggle__thumb--disabled {
42
+ @include utrecht-form-toggle__thumb--disabled;
43
+ }
44
+
45
+ .utrecht-form-toggle__track {
46
+ @include utrecht-form-toggle__track;
47
+ }
48
+
49
+ .utrecht-form-toggle__track--html-label {
50
+ @include utrecht-form-toggle__track--html-label;
51
+ }
52
+
53
+ .utrecht-form-toggle__track--checked {
54
+ @include utrecht-form-toggle__track--checked;
55
+ }
56
+
57
+ .utrecht-form-toggle__track--disabled {
58
+ @include utrecht-form-toggle__track--disabled;
59
+ }
60
+
61
+ .utrecht-form-toggle__track--focus-visible {
62
+ @include utrecht-form-toggle__track--focus-visible;
63
+ }
64
+
65
+ .utrecht-form-toggle--html-checkbox {
66
+ .utrecht-form-toggle__checkbox {
67
+ @include invisible-but-focusable;
68
+
69
+ &:focus-visible ~ .utrecht-form-toggle__track {
70
+ @include utrecht-form-toggle__track--focus-visible;
71
+ }
72
+
73
+ &:checked ~ .utrecht-form-toggle__track {
74
+ @extend .utrecht-form-toggle__track--checked;
75
+ }
76
+
77
+ &:checked ~ .utrecht-form-toggle__track .utrecht-form-toggle__thumb {
78
+ @extend .utrecht-form-toggle__thumb--checked;
79
+ }
80
+
81
+ &:not(:checked) ~ .utrecht-form-toggle__track .utrecht-form-toggle__thumb {
82
+ @extend .utrecht-form-toggle__thumb--not-checked;
83
+ }
84
+
85
+ &:disabled ~ .utrecht-form-toggle__track {
86
+ @extend .utrecht-form-toggle__track--disabled;
87
+ }
88
+
89
+ &:disabled ~ .utrecht-form-toggle__track .utrecht-form-toggle__thumb {
90
+ @extend .utrecht-form-toggle__thumb--disabled;
91
+ }
92
+ }
93
+ }
94
+
95
+ .utrecht-form-toggle--html-div {
96
+ &:focus {
97
+ @extend .utrecht-form-toggle--focus;
98
+ }
99
+ &:focus-visible {
100
+ @extend .utrecht-form-toggle--focus-visible;
101
+ }
102
+ &:hover {
103
+ @extend .utrecht-form-toggle--focus;
104
+ }
105
+ &:disabled {
106
+ @extend .utrecht-form-toggle--disabled;
107
+ }
108
+ }
package/src/tokens.json ADDED
@@ -0,0 +1,162 @@
1
+ {
2
+ "utrecht": {
3
+ "form-toggle": {
4
+ "accent-color": {
5
+ "$extensions": {
6
+ "nl.nldesignsystem.css.property": {
7
+ "syntax": "<color>",
8
+ "inherits": true
9
+ }
10
+ }
11
+ },
12
+ "background-color": {
13
+ "$extensions": {
14
+ "nl.nldesignsystem.css.property": {
15
+ "syntax": "<color>",
16
+ "inherits": true
17
+ }
18
+ }
19
+ },
20
+ "border-color": {
21
+ "$extensions": {
22
+ "nl.nldesignsystem.css.property": {
23
+ "syntax": "<color>",
24
+ "inherits": true
25
+ }
26
+ }
27
+ },
28
+ "border-radius": {
29
+ "$extensions": {
30
+ "nl.nldesignsystem.css.property": {
31
+ "syntax": "<length>",
32
+ "inherits": true
33
+ }
34
+ }
35
+ },
36
+ "border-width": {
37
+ "$extensions": {
38
+ "nl.nldesignsystem.css.property": {
39
+ "syntax": "<length>",
40
+ "inherits": true
41
+ }
42
+ }
43
+ },
44
+ "color": {
45
+ "$extensions": {
46
+ "nl.nldesignsystem.css.property": {
47
+ "syntax": "<color>",
48
+ "inherits": true
49
+ }
50
+ }
51
+ },
52
+ "track": {
53
+ "border-radius": {
54
+ "$extensions": {
55
+ "nl.nldesignsystem.css.property": {
56
+ "syntax": "<length>",
57
+ "inherits": true
58
+ }
59
+ }
60
+ },
61
+ "disabled": {
62
+ "background-color": {
63
+ "$extensions": {
64
+ "nl.nldesignsystem.css.property": {
65
+ "syntax": "<color>",
66
+ "inherits": true
67
+ }
68
+ }
69
+ }
70
+ }
71
+ },
72
+ "thumb": {
73
+ "background-color": {
74
+ "$extensions": {
75
+ "nl.nldesignsystem.css.property": {
76
+ "syntax": "<color>",
77
+ "inherits": true
78
+ }
79
+ }
80
+ },
81
+ "margin-inline-start": {
82
+ "$extensions": {
83
+ "nl.nldesignsystem.css.property": {
84
+ "syntax": "<length>",
85
+ "inherits": true
86
+ }
87
+ }
88
+ },
89
+ "margin-inline-end": {
90
+ "$extensions": {
91
+ "nl.nldesignsystem.css.property": {
92
+ "syntax": "<length>",
93
+ "inherits": true
94
+ }
95
+ }
96
+ },
97
+ "min-inline-size": {
98
+ "$extensions": {
99
+ "nl.nldesignsystem.css.property": {
100
+ "syntax": "<length>",
101
+ "inherits": true
102
+ }
103
+ }
104
+ },
105
+ "disabled": {
106
+ "box-shadow": {
107
+ "$extensions": {
108
+ "nl.nldesignsystem.css.property": {
109
+ "syntax": "*",
110
+ "inherits": true
111
+ }
112
+ }
113
+ },
114
+ "background-color": {
115
+ "$extensions": {
116
+ "nl.nldesignsystem.css.property": {
117
+ "syntax": "<color>",
118
+ "inherits": true
119
+ }
120
+ }
121
+ }
122
+ }
123
+ },
124
+ "checked": {
125
+ "accent-color": {
126
+ "$extensions": {
127
+ "nl.nldesignsystem.css.property": {
128
+ "syntax": "<color>",
129
+ "inherits": true
130
+ }
131
+ }
132
+ }
133
+ },
134
+ "focus": {
135
+ "border-color": {
136
+ "$extensions": {
137
+ "nl.nldesignsystem.css.property": {
138
+ "syntax": "<color>",
139
+ "inherits": true
140
+ }
141
+ }
142
+ },
143
+ "border-style": {
144
+ "$extensions": {
145
+ "nl.nldesignsystem.css.property": {
146
+ "syntax": "*",
147
+ "inherits": true
148
+ }
149
+ }
150
+ },
151
+ "border-width": {
152
+ "$extensions": {
153
+ "nl.nldesignsystem.css.property": {
154
+ "syntax": "<length>",
155
+ "inherits": true
156
+ }
157
+ }
158
+ }
159
+ }
160
+ }
161
+ }
162
+ }