@utrecht/form-toggle-css 2.0.1 → 3.0.1

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 (9) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/index.css +1 -3
  3. package/dist/index.min.css +1 -1
  4. package/dist/index.mjs +1 -1
  5. package/dist/tokens.mjs +105 -210
  6. package/package.json +4 -3
  7. package/src/_mixin.scss +6 -4
  8. package/src/index.scss +1 -1
  9. package/src/tokens.json +105 -210
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @utrecht/form-toggle-css
2
2
 
3
+ ## 3.0.1
4
+
5
+ ### Patch Changes
6
+
7
+ - 0f759fc: Ensure package is published with provenance
8
+
9
+ ## 3.0.0
10
+
11
+ ### Major Changes
12
+
13
+ - eabbf23: Publish `tokens.json` in DTCG format: `$value` instead of `value`, standard `$type`, etcetera.
14
+
3
15
  ## 2.0.1
4
16
 
5
17
  ### Patch Changes
package/dist/index.css CHANGED
@@ -117,9 +117,7 @@
117
117
 
118
118
  .utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox {
119
119
  block-size: 1px !important;
120
- border: 0 !important;
121
- clip: rect(1px, 1px, 1px, 1px) !important;
122
- -webkit-clip-path: inset(50%) !important;
120
+ border-width: 0 !important;
123
121
  clip-path: inset(50%) !important;
124
122
  inline-size: 1px !important;
125
123
  margin: -1px !important;
package/dist/index.min.css CHANGED
@@ -1 +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}
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-width:0!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 CHANGED
@@ -1 +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}";
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-width:0!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/tokens.mjs CHANGED
@@ -3,368 +3,263 @@ export default {
3
3
  "form-toggle": {
4
4
  "accent-color": {
5
5
  "$extensions": {
6
- "nl.nldesignsystem.css.property": {
7
- "syntax": "<color>",
8
- "inherits": true
9
- },
10
- "nl.nldesignsystem.figma.supports-token": false
6
+ "nl.nldesignsystem.css-property-syntax": "<color>",
7
+ "nl.nldesignsystem.figma-implementation": false
11
8
  },
12
- "type": "color"
9
+ "$type": "color"
13
10
  },
14
11
  "background-color": {
15
12
  "$extensions": {
16
- "nl.nldesignsystem.css.property": {
17
- "syntax": "<color>",
18
- "inherits": true
19
- },
20
- "nl.nldesignsystem.figma.supports-token": false
13
+ "nl.nldesignsystem.css-property-syntax": "<color>",
14
+ "nl.nldesignsystem.figma-implementation": false
21
15
  },
22
- "type": "color"
16
+ "$type": "color"
23
17
  },
24
18
  "border-color": {
25
19
  "$extensions": {
26
- "nl.nldesignsystem.css.property": {
27
- "syntax": "<color>",
28
- "inherits": true
29
- },
30
- "nl.nldesignsystem.figma.supports-token": false
20
+ "nl.nldesignsystem.css-property-syntax": "<color>",
21
+ "nl.nldesignsystem.figma-implementation": false
31
22
  },
32
- "type": "color"
23
+ "$type": "color"
33
24
  },
34
25
  "border-style": {
35
26
  "$extensions": {
36
- "nl.nldesignsystem.css.property": {
37
- "syntax": "*",
38
- "inherits": true
39
- },
40
- "nl.nldesignsystem.figma.supports-token": false
27
+ "nl.nldesignsystem.css-property-syntax": "*",
28
+ "nl.nldesignsystem.figma-implementation": false
41
29
  },
42
- "type": "other"
30
+ "$type": "other"
43
31
  },
44
32
  "border-radius": {
45
33
  "$extensions": {
46
- "nl.nldesignsystem.css.property": {
47
- "syntax": "<length-percentage>",
48
- "inherits": true
49
- },
50
- "nl.nldesignsystem.figma.supports-token": false
34
+ "nl.nldesignsystem.css-property-syntax": "<length-percentage>",
35
+ "nl.nldesignsystem.figma-implementation": false
51
36
  },
52
- "type": "borderRadius"
37
+ "$type": "dimension"
53
38
  },
54
39
  "border-width": {
55
40
  "$extensions": {
56
- "nl.nldesignsystem.css.property": {
57
- "syntax": "<length>",
58
- "inherits": true
59
- },
60
- "nl.nldesignsystem.figma.supports-token": false
41
+ "nl.nldesignsystem.css-property-syntax": "<length>",
42
+ "nl.nldesignsystem.figma-implementation": false
61
43
  },
62
- "type": "borderWidth"
44
+ "$type": "dimension"
63
45
  },
64
46
  "color": {
65
47
  "$extensions": {
66
- "nl.nldesignsystem.css.property": {
67
- "syntax": "<color>",
68
- "inherits": true
69
- },
70
- "nl.nldesignsystem.figma.supports-token": false
48
+ "nl.nldesignsystem.css-property-syntax": "<color>",
49
+ "nl.nldesignsystem.figma-implementation": false
71
50
  },
72
- "type": "color"
51
+ "$type": "color"
73
52
  },
74
53
  "height": {
75
54
  "$extensions": {
76
- "nl.nldesignsystem.css.property": {
77
- "syntax": "<length>",
78
- "inherits": true
79
- },
80
- "nl.nldesignsystem.figma.supports-token": false
55
+ "nl.nldesignsystem.css-property-syntax": "<length>",
56
+ "nl.nldesignsystem.figma-implementation": false
81
57
  },
82
- "type": "sizing"
58
+ "$type": "dimension"
83
59
  },
84
60
  "padding-inline-end": {
85
61
  "$extensions": {
86
- "nl.nldesignsystem.css.property": {
87
- "syntax": "<length>",
88
- "inherits": true
89
- },
90
- "nl.nldesignsystem.figma.supports-token": false
62
+ "nl.nldesignsystem.css-property-syntax": "<length>",
63
+ "nl.nldesignsystem.figma-implementation": false
91
64
  },
92
- "type": "spacing"
65
+ "$type": "dimension"
93
66
  },
94
67
  "padding-inline-start": {
95
68
  "$extensions": {
96
- "nl.nldesignsystem.css.property": {
97
- "syntax": "<length>",
98
- "inherits": true
99
- },
100
- "nl.nldesignsystem.figma.supports-token": false
69
+ "nl.nldesignsystem.css-property-syntax": "<length>",
70
+ "nl.nldesignsystem.figma-implementation": false
101
71
  },
102
- "type": "spacing"
72
+ "$type": "dimension"
103
73
  },
104
74
  "padding-block-end": {
105
75
  "$extensions": {
106
- "nl.nldesignsystem.css.property": {
107
- "syntax": "<length>",
108
- "inherits": true
109
- },
110
- "nl.nldesignsystem.figma.supports-token": false
76
+ "nl.nldesignsystem.css-property-syntax": "<length>",
77
+ "nl.nldesignsystem.figma-implementation": false
111
78
  },
112
- "type": "spacing"
79
+ "$type": "dimension"
113
80
  },
114
81
  "padding-block-start": {
115
82
  "$extensions": {
116
- "nl.nldesignsystem.css.property": {
117
- "syntax": "<length>",
118
- "inherits": true
119
- },
120
- "nl.nldesignsystem.figma.supports-token": false
83
+ "nl.nldesignsystem.css-property-syntax": "<length>",
84
+ "nl.nldesignsystem.figma-implementation": false
121
85
  },
122
- "type": "spacing"
86
+ "$type": "dimension"
123
87
  },
124
88
  "width": {
125
89
  "$extensions": {
126
- "nl.nldesignsystem.css.property": {
127
- "syntax": "<length>",
128
- "inherits": true
129
- },
130
- "nl.nldesignsystem.figma.supports-token": false
90
+ "nl.nldesignsystem.css-property-syntax": "<length>",
91
+ "nl.nldesignsystem.figma-implementation": false
131
92
  },
132
- "type": "sizing"
93
+ "$type": "dimension"
133
94
  },
134
95
  "track": {
135
96
  "border-color": {
136
97
  "$extensions": {
137
- "nl.nldesignsystem.css.property": {
138
- "syntax": "<color>",
139
- "inherits": true
140
- },
141
- "nl.nldesignsystem.figma.supports-token": false
98
+ "nl.nldesignsystem.css-property-syntax": "<color>",
99
+ "nl.nldesignsystem.figma-implementation": false
142
100
  },
143
- "type": "color"
101
+ "$type": "color"
144
102
  },
145
103
  "border-radius": {
146
104
  "$extensions": {
147
- "nl.nldesignsystem.css.property": {
148
- "syntax": "<length-percentage>",
149
- "inherits": true
150
- },
151
- "nl.nldesignsystem.figma.supports-token": false
105
+ "nl.nldesignsystem.css-property-syntax": "<length-percentage>",
106
+ "nl.nldesignsystem.figma-implementation": false
152
107
  },
153
- "type": "borderRadius"
108
+ "$type": "dimension"
154
109
  },
155
110
  "disabled": {
156
111
  "background-color": {
157
112
  "$extensions": {
158
- "nl.nldesignsystem.css.property": {
159
- "syntax": "<color>",
160
- "inherits": true
161
- },
162
- "nl.nldesignsystem.figma.supports-token": false
113
+ "nl.nldesignsystem.css-property-syntax": "<color>",
114
+ "nl.nldesignsystem.figma-implementation": false
163
115
  },
164
- "type": "color"
116
+ "$type": "color"
165
117
  },
166
118
  "border-color": {
167
119
  "$extensions": {
168
- "nl.nldesignsystem.css.property": {
169
- "syntax": "<color>",
170
- "inherits": true
171
- },
172
- "nl.nldesignsystem.figma.supports-token": false
120
+ "nl.nldesignsystem.css-property-syntax": "<color>",
121
+ "nl.nldesignsystem.figma-implementation": false
173
122
  },
174
- "type": "color"
123
+ "$type": "color"
175
124
  }
176
125
  }
177
126
  },
178
127
  "thumb": {
179
128
  "background-color": {
180
129
  "$extensions": {
181
- "nl.nldesignsystem.css.property": {
182
- "syntax": "<color>",
183
- "inherits": true
184
- },
185
- "nl.nldesignsystem.figma.supports-token": false
130
+ "nl.nldesignsystem.css-property-syntax": "<color>",
131
+ "nl.nldesignsystem.figma-implementation": false
186
132
  },
187
- "type": "color"
133
+ "$type": "color"
188
134
  },
189
135
  "border-radius": {
190
136
  "$extensions": {
191
- "nl.nldesignsystem.css.property": {
192
- "syntax": "<length-percentage>",
193
- "inherits": true
194
- },
195
- "nl.nldesignsystem.figma.supports-token": false
137
+ "nl.nldesignsystem.css-property-syntax": "<length-percentage>",
138
+ "nl.nldesignsystem.figma-implementation": false
196
139
  },
197
- "type": "borderRadius"
140
+ "$type": "dimension"
198
141
  },
199
142
  "box-shadow": {
200
143
  "$extensions": {
201
- "nl.nldesignsystem.css.property": {
202
- "syntax": "*",
203
- "inherits": true
204
- },
205
- "nl.nldesignsystem.figma.supports-token": false
144
+ "nl.nldesignsystem.css-property-syntax": "*",
145
+ "nl.nldesignsystem.figma-implementation": false
206
146
  },
207
- "type": "boxShadow"
147
+ "$type": "shadow"
208
148
  },
209
149
  "margin-inline-start": {
210
150
  "$extensions": {
211
- "nl.nldesignsystem.css.property": {
212
- "syntax": "<length>",
213
- "inherits": true
214
- },
215
- "nl.nldesignsystem.figma.supports-token": false
151
+ "nl.nldesignsystem.css-property-syntax": "<length>",
152
+ "nl.nldesignsystem.figma-implementation": false
216
153
  },
217
- "type": "spacing"
154
+ "$type": "dimension"
218
155
  },
219
156
  "margin-inline-end": {
220
157
  "$extensions": {
221
- "nl.nldesignsystem.css.property": {
222
- "syntax": "<length>",
223
- "inherits": true
224
- },
225
- "nl.nldesignsystem.figma.supports-token": false
158
+ "nl.nldesignsystem.css-property-syntax": "<length>",
159
+ "nl.nldesignsystem.figma-implementation": false
226
160
  },
227
- "type": "spacing"
161
+ "$type": "dimension"
228
162
  },
229
163
  "min-inline-size": {
230
164
  "$extensions": {
231
- "nl.nldesignsystem.css.property": {
232
- "syntax": "<length>",
233
- "inherits": true
234
- },
235
- "nl.nldesignsystem.figma.supports-token": false
165
+ "nl.nldesignsystem.css-property-syntax": "<length>",
166
+ "nl.nldesignsystem.figma-implementation": false
236
167
  },
237
- "type": "sizing"
168
+ "$type": "dimension"
238
169
  },
239
170
  "disabled": {
240
171
  "box-shadow": {
241
172
  "$extensions": {
242
- "nl.nldesignsystem.css.property": {
243
- "syntax": "*",
244
- "inherits": true
245
- },
246
- "nl.nldesignsystem.figma.supports-token": false
173
+ "nl.nldesignsystem.css-property-syntax": "*",
174
+ "nl.nldesignsystem.figma-implementation": false
247
175
  },
248
- "type": "boxShadow"
176
+ "$type": "shadow"
249
177
  },
250
178
  "background-color": {
251
179
  "$extensions": {
252
- "nl.nldesignsystem.css.property": {
253
- "syntax": "<color>",
254
- "inherits": true
255
- },
256
- "nl.nldesignsystem.figma.supports-token": false
180
+ "nl.nldesignsystem.css-property-syntax": "<color>",
181
+ "nl.nldesignsystem.figma-implementation": false
257
182
  },
258
- "type": "color"
183
+ "$type": "color"
259
184
  }
260
185
  }
261
186
  },
262
187
  "checked": {
263
188
  "accent-color": {
264
189
  "$extensions": {
265
- "nl.nldesignsystem.css.property": {
266
- "syntax": "<color>",
267
- "inherits": true
268
- },
269
- "nl.nldesignsystem.figma.supports-token": false
190
+ "nl.nldesignsystem.css-property-syntax": "<color>",
191
+ "nl.nldesignsystem.figma-implementation": false
270
192
  },
271
- "type": "color"
193
+ "$type": "color"
272
194
  }
273
195
  },
274
196
  "disabled": {
275
197
  "border-color": {
276
198
  "$extensions": {
277
- "nl.nldesignsystem.css.property": {
278
- "syntax": "<color>",
279
- "inherits": true
280
- },
281
- "nl.nldesignsystem.figma.supports-token": false
199
+ "nl.nldesignsystem.css-property-syntax": "<color>",
200
+ "nl.nldesignsystem.figma-implementation": false
282
201
  },
283
- "type": "color"
202
+ "$type": "color"
284
203
  },
285
204
  "border-style": {
286
205
  "$extensions": {
287
- "nl.nldesignsystem.css.property": {
288
- "syntax": "*",
289
- "inherits": true
290
- },
291
- "nl.nldesignsystem.figma.supports-token": false
206
+ "nl.nldesignsystem.css-property-syntax": "*",
207
+ "nl.nldesignsystem.figma-implementation": false
292
208
  },
293
- "type": "other"
209
+ "$type": "other"
294
210
  },
295
211
  "border-width": {
296
212
  "$extensions": {
297
- "nl.nldesignsystem.css.property": {
298
- "syntax": "<length>",
299
- "inherits": true
300
- },
301
- "nl.nldesignsystem.figma.supports-token": false
213
+ "nl.nldesignsystem.css-property-syntax": "<length>",
214
+ "nl.nldesignsystem.figma-implementation": false
302
215
  },
303
- "type": "borderWidth"
216
+ "$type": "dimension"
304
217
  },
305
218
  "color": {
306
219
  "$extensions": {
307
- "nl.nldesignsystem.css.property": {
308
- "syntax": "<color>",
309
- "inherits": true
310
- },
311
- "nl.nldesignsystem.figma.supports-token": false
220
+ "nl.nldesignsystem.css-property-syntax": "<color>",
221
+ "nl.nldesignsystem.figma-implementation": false
312
222
  },
313
- "type": "color"
223
+ "$type": "color"
314
224
  }
315
225
  },
316
226
  "focus": {
317
227
  "border-color": {
318
228
  "$extensions": {
319
- "nl.nldesignsystem.css.property": {
320
- "syntax": "<color>",
321
- "inherits": true
322
- },
323
- "nl.nldesignsystem.figma.supports-token": false
229
+ "nl.nldesignsystem.css-property-syntax": "<color>",
230
+ "nl.nldesignsystem.figma-implementation": false
324
231
  },
325
- "type": "color"
232
+ "$type": "color"
326
233
  },
327
234
  "border-style": {
328
235
  "$extensions": {
329
- "nl.nldesignsystem.css.property": {
330
- "syntax": "*",
331
- "inherits": true
332
- },
333
- "nl.nldesignsystem.figma.supports-token": false
236
+ "nl.nldesignsystem.css-property-syntax": "*",
237
+ "nl.nldesignsystem.figma-implementation": false
334
238
  },
335
- "type": "other"
239
+ "$type": "other"
336
240
  },
337
241
  "border-width": {
338
242
  "$extensions": {
339
- "nl.nldesignsystem.css.property": {
340
- "syntax": "<length>",
341
- "inherits": true
342
- },
343
- "nl.nldesignsystem.figma.supports-token": false
243
+ "nl.nldesignsystem.css-property-syntax": "<length>",
244
+ "nl.nldesignsystem.figma-implementation": false
344
245
  },
345
- "type": "borderWidth"
246
+ "$type": "dimension"
346
247
  }
347
248
  },
348
249
  "hover": {
349
250
  "background-color": {
350
251
  "$extensions": {
351
- "nl.nldesignsystem.css.property": {
352
- "syntax": "<color>",
353
- "inherits": true
354
- },
355
- "nl.nldesignsystem.figma.supports-token": false
252
+ "nl.nldesignsystem.css-property-syntax": "<color>",
253
+ "nl.nldesignsystem.figma-implementation": false
356
254
  },
357
- "type": "color"
255
+ "$type": "color"
358
256
  },
359
257
  "color": {
360
258
  "$extensions": {
361
- "nl.nldesignsystem.css.property": {
362
- "syntax": "<color>",
363
- "inherits": true
364
- },
365
- "nl.nldesignsystem.figma.supports-token": false
259
+ "nl.nldesignsystem.css-property-syntax": "<color>",
260
+ "nl.nldesignsystem.figma-implementation": false
366
261
  },
367
- "type": "color"
262
+ "$type": "color"
368
263
  }
369
264
  }
370
265
  }
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "2.0.1",
2
+ "version": "3.0.1",
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,14 +12,15 @@
12
12
  ],
13
13
  "main": "dist/index.css",
14
14
  "devDependencies": {
15
- "@utrecht/focus-ring-css": "3.0.1",
15
+ "@utrecht/focus-ring-css": "4.0.1",
16
16
  "@utrecht/build-utils-css": "0.0.4"
17
17
  },
18
18
  "keywords": [
19
19
  "nl-design-system"
20
20
  ],
21
21
  "publishConfig": {
22
- "access": "public"
22
+ "access": "public",
23
+ "provenance": true
23
24
  },
24
25
  "repository": {
25
26
  "type": "git+ssh",
package/src/_mixin.scss CHANGED
@@ -6,12 +6,14 @@
6
6
 
7
7
  @use "~@utrecht/focus-ring-css/src/mixin" as *;
8
8
 
9
- @mixin invisible-but-focusable {
9
+ /**
10
+ * Source:
11
+ * https://github.com/nl-design-system/candidate/blob/a0246970175883a874aacc9431a1596c429e6319/packages/components-css/number-badge-css/src/_mixin.scss#L5-L16
12
+ */
13
+ @mixin invisible-but-accessible {
10
14
  /* Source: https://kittygiraudel.com/snippets/sr-only-class/ */
11
15
  block-size: 1px !important;
12
- border: 0 !important;
13
- clip: rect(1px, 1px, 1px, 1px) !important;
14
- -webkit-clip-path: inset(50%) !important;
16
+ border-width: 0 !important;
15
17
  clip-path: inset(50%) !important;
16
18
  inline-size: 1px !important;
17
19
  /* stylelint-disable-next-line property-disallowed-list */
package/src/index.scss CHANGED
@@ -65,7 +65,7 @@
65
65
 
66
66
  .utrecht-form-toggle--html-checkbox {
67
67
  .utrecht-form-toggle__checkbox {
68
- @include invisible-but-focusable;
68
+ @include invisible-but-accessible;
69
69
 
70
70
  &:focus-visible ~ .utrecht-form-toggle__track {
71
71
  @include utrecht-form-toggle__track--focus-visible;
package/src/tokens.json CHANGED
@@ -3,368 +3,263 @@
3
3
  "form-toggle": {
4
4
  "accent-color": {
5
5
  "$extensions": {
6
- "nl.nldesignsystem.css.property": {
7
- "syntax": "<color>",
8
- "inherits": true
9
- },
10
- "nl.nldesignsystem.figma.supports-token": false
6
+ "nl.nldesignsystem.css-property-syntax": "<color>",
7
+ "nl.nldesignsystem.figma-implementation": false
11
8
  },
12
- "type": "color"
9
+ "$type": "color"
13
10
  },
14
11
  "background-color": {
15
12
  "$extensions": {
16
- "nl.nldesignsystem.css.property": {
17
- "syntax": "<color>",
18
- "inherits": true
19
- },
20
- "nl.nldesignsystem.figma.supports-token": false
13
+ "nl.nldesignsystem.css-property-syntax": "<color>",
14
+ "nl.nldesignsystem.figma-implementation": false
21
15
  },
22
- "type": "color"
16
+ "$type": "color"
23
17
  },
24
18
  "border-color": {
25
19
  "$extensions": {
26
- "nl.nldesignsystem.css.property": {
27
- "syntax": "<color>",
28
- "inherits": true
29
- },
30
- "nl.nldesignsystem.figma.supports-token": false
20
+ "nl.nldesignsystem.css-property-syntax": "<color>",
21
+ "nl.nldesignsystem.figma-implementation": false
31
22
  },
32
- "type": "color"
23
+ "$type": "color"
33
24
  },
34
25
  "border-style": {
35
26
  "$extensions": {
36
- "nl.nldesignsystem.css.property": {
37
- "syntax": "*",
38
- "inherits": true
39
- },
40
- "nl.nldesignsystem.figma.supports-token": false
27
+ "nl.nldesignsystem.css-property-syntax": "*",
28
+ "nl.nldesignsystem.figma-implementation": false
41
29
  },
42
- "type": "other"
30
+ "$type": "other"
43
31
  },
44
32
  "border-radius": {
45
33
  "$extensions": {
46
- "nl.nldesignsystem.css.property": {
47
- "syntax": "<length-percentage>",
48
- "inherits": true
49
- },
50
- "nl.nldesignsystem.figma.supports-token": false
34
+ "nl.nldesignsystem.css-property-syntax": "<length-percentage>",
35
+ "nl.nldesignsystem.figma-implementation": false
51
36
  },
52
- "type": "borderRadius"
37
+ "$type": "dimension"
53
38
  },
54
39
  "border-width": {
55
40
  "$extensions": {
56
- "nl.nldesignsystem.css.property": {
57
- "syntax": "<length>",
58
- "inherits": true
59
- },
60
- "nl.nldesignsystem.figma.supports-token": false
41
+ "nl.nldesignsystem.css-property-syntax": "<length>",
42
+ "nl.nldesignsystem.figma-implementation": false
61
43
  },
62
- "type": "borderWidth"
44
+ "$type": "dimension"
63
45
  },
64
46
  "color": {
65
47
  "$extensions": {
66
- "nl.nldesignsystem.css.property": {
67
- "syntax": "<color>",
68
- "inherits": true
69
- },
70
- "nl.nldesignsystem.figma.supports-token": false
48
+ "nl.nldesignsystem.css-property-syntax": "<color>",
49
+ "nl.nldesignsystem.figma-implementation": false
71
50
  },
72
- "type": "color"
51
+ "$type": "color"
73
52
  },
74
53
  "height": {
75
54
  "$extensions": {
76
- "nl.nldesignsystem.css.property": {
77
- "syntax": "<length>",
78
- "inherits": true
79
- },
80
- "nl.nldesignsystem.figma.supports-token": false
55
+ "nl.nldesignsystem.css-property-syntax": "<length>",
56
+ "nl.nldesignsystem.figma-implementation": false
81
57
  },
82
- "type": "sizing"
58
+ "$type": "dimension"
83
59
  },
84
60
  "padding-inline-end": {
85
61
  "$extensions": {
86
- "nl.nldesignsystem.css.property": {
87
- "syntax": "<length>",
88
- "inherits": true
89
- },
90
- "nl.nldesignsystem.figma.supports-token": false
62
+ "nl.nldesignsystem.css-property-syntax": "<length>",
63
+ "nl.nldesignsystem.figma-implementation": false
91
64
  },
92
- "type": "spacing"
65
+ "$type": "dimension"
93
66
  },
94
67
  "padding-inline-start": {
95
68
  "$extensions": {
96
- "nl.nldesignsystem.css.property": {
97
- "syntax": "<length>",
98
- "inherits": true
99
- },
100
- "nl.nldesignsystem.figma.supports-token": false
69
+ "nl.nldesignsystem.css-property-syntax": "<length>",
70
+ "nl.nldesignsystem.figma-implementation": false
101
71
  },
102
- "type": "spacing"
72
+ "$type": "dimension"
103
73
  },
104
74
  "padding-block-end": {
105
75
  "$extensions": {
106
- "nl.nldesignsystem.css.property": {
107
- "syntax": "<length>",
108
- "inherits": true
109
- },
110
- "nl.nldesignsystem.figma.supports-token": false
76
+ "nl.nldesignsystem.css-property-syntax": "<length>",
77
+ "nl.nldesignsystem.figma-implementation": false
111
78
  },
112
- "type": "spacing"
79
+ "$type": "dimension"
113
80
  },
114
81
  "padding-block-start": {
115
82
  "$extensions": {
116
- "nl.nldesignsystem.css.property": {
117
- "syntax": "<length>",
118
- "inherits": true
119
- },
120
- "nl.nldesignsystem.figma.supports-token": false
83
+ "nl.nldesignsystem.css-property-syntax": "<length>",
84
+ "nl.nldesignsystem.figma-implementation": false
121
85
  },
122
- "type": "spacing"
86
+ "$type": "dimension"
123
87
  },
124
88
  "width": {
125
89
  "$extensions": {
126
- "nl.nldesignsystem.css.property": {
127
- "syntax": "<length>",
128
- "inherits": true
129
- },
130
- "nl.nldesignsystem.figma.supports-token": false
90
+ "nl.nldesignsystem.css-property-syntax": "<length>",
91
+ "nl.nldesignsystem.figma-implementation": false
131
92
  },
132
- "type": "sizing"
93
+ "$type": "dimension"
133
94
  },
134
95
  "track": {
135
96
  "border-color": {
136
97
  "$extensions": {
137
- "nl.nldesignsystem.css.property": {
138
- "syntax": "<color>",
139
- "inherits": true
140
- },
141
- "nl.nldesignsystem.figma.supports-token": false
98
+ "nl.nldesignsystem.css-property-syntax": "<color>",
99
+ "nl.nldesignsystem.figma-implementation": false
142
100
  },
143
- "type": "color"
101
+ "$type": "color"
144
102
  },
145
103
  "border-radius": {
146
104
  "$extensions": {
147
- "nl.nldesignsystem.css.property": {
148
- "syntax": "<length-percentage>",
149
- "inherits": true
150
- },
151
- "nl.nldesignsystem.figma.supports-token": false
105
+ "nl.nldesignsystem.css-property-syntax": "<length-percentage>",
106
+ "nl.nldesignsystem.figma-implementation": false
152
107
  },
153
- "type": "borderRadius"
108
+ "$type": "dimension"
154
109
  },
155
110
  "disabled": {
156
111
  "background-color": {
157
112
  "$extensions": {
158
- "nl.nldesignsystem.css.property": {
159
- "syntax": "<color>",
160
- "inherits": true
161
- },
162
- "nl.nldesignsystem.figma.supports-token": false
113
+ "nl.nldesignsystem.css-property-syntax": "<color>",
114
+ "nl.nldesignsystem.figma-implementation": false
163
115
  },
164
- "type": "color"
116
+ "$type": "color"
165
117
  },
166
118
  "border-color": {
167
119
  "$extensions": {
168
- "nl.nldesignsystem.css.property": {
169
- "syntax": "<color>",
170
- "inherits": true
171
- },
172
- "nl.nldesignsystem.figma.supports-token": false
120
+ "nl.nldesignsystem.css-property-syntax": "<color>",
121
+ "nl.nldesignsystem.figma-implementation": false
173
122
  },
174
- "type": "color"
123
+ "$type": "color"
175
124
  }
176
125
  }
177
126
  },
178
127
  "thumb": {
179
128
  "background-color": {
180
129
  "$extensions": {
181
- "nl.nldesignsystem.css.property": {
182
- "syntax": "<color>",
183
- "inherits": true
184
- },
185
- "nl.nldesignsystem.figma.supports-token": false
130
+ "nl.nldesignsystem.css-property-syntax": "<color>",
131
+ "nl.nldesignsystem.figma-implementation": false
186
132
  },
187
- "type": "color"
133
+ "$type": "color"
188
134
  },
189
135
  "border-radius": {
190
136
  "$extensions": {
191
- "nl.nldesignsystem.css.property": {
192
- "syntax": "<length-percentage>",
193
- "inherits": true
194
- },
195
- "nl.nldesignsystem.figma.supports-token": false
137
+ "nl.nldesignsystem.css-property-syntax": "<length-percentage>",
138
+ "nl.nldesignsystem.figma-implementation": false
196
139
  },
197
- "type": "borderRadius"
140
+ "$type": "dimension"
198
141
  },
199
142
  "box-shadow": {
200
143
  "$extensions": {
201
- "nl.nldesignsystem.css.property": {
202
- "syntax": "*",
203
- "inherits": true
204
- },
205
- "nl.nldesignsystem.figma.supports-token": false
144
+ "nl.nldesignsystem.css-property-syntax": "*",
145
+ "nl.nldesignsystem.figma-implementation": false
206
146
  },
207
- "type": "boxShadow"
147
+ "$type": "shadow"
208
148
  },
209
149
  "margin-inline-start": {
210
150
  "$extensions": {
211
- "nl.nldesignsystem.css.property": {
212
- "syntax": "<length>",
213
- "inherits": true
214
- },
215
- "nl.nldesignsystem.figma.supports-token": false
151
+ "nl.nldesignsystem.css-property-syntax": "<length>",
152
+ "nl.nldesignsystem.figma-implementation": false
216
153
  },
217
- "type": "spacing"
154
+ "$type": "dimension"
218
155
  },
219
156
  "margin-inline-end": {
220
157
  "$extensions": {
221
- "nl.nldesignsystem.css.property": {
222
- "syntax": "<length>",
223
- "inherits": true
224
- },
225
- "nl.nldesignsystem.figma.supports-token": false
158
+ "nl.nldesignsystem.css-property-syntax": "<length>",
159
+ "nl.nldesignsystem.figma-implementation": false
226
160
  },
227
- "type": "spacing"
161
+ "$type": "dimension"
228
162
  },
229
163
  "min-inline-size": {
230
164
  "$extensions": {
231
- "nl.nldesignsystem.css.property": {
232
- "syntax": "<length>",
233
- "inherits": true
234
- },
235
- "nl.nldesignsystem.figma.supports-token": false
165
+ "nl.nldesignsystem.css-property-syntax": "<length>",
166
+ "nl.nldesignsystem.figma-implementation": false
236
167
  },
237
- "type": "sizing"
168
+ "$type": "dimension"
238
169
  },
239
170
  "disabled": {
240
171
  "box-shadow": {
241
172
  "$extensions": {
242
- "nl.nldesignsystem.css.property": {
243
- "syntax": "*",
244
- "inherits": true
245
- },
246
- "nl.nldesignsystem.figma.supports-token": false
173
+ "nl.nldesignsystem.css-property-syntax": "*",
174
+ "nl.nldesignsystem.figma-implementation": false
247
175
  },
248
- "type": "boxShadow"
176
+ "$type": "shadow"
249
177
  },
250
178
  "background-color": {
251
179
  "$extensions": {
252
- "nl.nldesignsystem.css.property": {
253
- "syntax": "<color>",
254
- "inherits": true
255
- },
256
- "nl.nldesignsystem.figma.supports-token": false
180
+ "nl.nldesignsystem.css-property-syntax": "<color>",
181
+ "nl.nldesignsystem.figma-implementation": false
257
182
  },
258
- "type": "color"
183
+ "$type": "color"
259
184
  }
260
185
  }
261
186
  },
262
187
  "checked": {
263
188
  "accent-color": {
264
189
  "$extensions": {
265
- "nl.nldesignsystem.css.property": {
266
- "syntax": "<color>",
267
- "inherits": true
268
- },
269
- "nl.nldesignsystem.figma.supports-token": false
190
+ "nl.nldesignsystem.css-property-syntax": "<color>",
191
+ "nl.nldesignsystem.figma-implementation": false
270
192
  },
271
- "type": "color"
193
+ "$type": "color"
272
194
  }
273
195
  },
274
196
  "disabled": {
275
197
  "border-color": {
276
198
  "$extensions": {
277
- "nl.nldesignsystem.css.property": {
278
- "syntax": "<color>",
279
- "inherits": true
280
- },
281
- "nl.nldesignsystem.figma.supports-token": false
199
+ "nl.nldesignsystem.css-property-syntax": "<color>",
200
+ "nl.nldesignsystem.figma-implementation": false
282
201
  },
283
- "type": "color"
202
+ "$type": "color"
284
203
  },
285
204
  "border-style": {
286
205
  "$extensions": {
287
- "nl.nldesignsystem.css.property": {
288
- "syntax": "*",
289
- "inherits": true
290
- },
291
- "nl.nldesignsystem.figma.supports-token": false
206
+ "nl.nldesignsystem.css-property-syntax": "*",
207
+ "nl.nldesignsystem.figma-implementation": false
292
208
  },
293
- "type": "other"
209
+ "$type": "other"
294
210
  },
295
211
  "border-width": {
296
212
  "$extensions": {
297
- "nl.nldesignsystem.css.property": {
298
- "syntax": "<length>",
299
- "inherits": true
300
- },
301
- "nl.nldesignsystem.figma.supports-token": false
213
+ "nl.nldesignsystem.css-property-syntax": "<length>",
214
+ "nl.nldesignsystem.figma-implementation": false
302
215
  },
303
- "type": "borderWidth"
216
+ "$type": "dimension"
304
217
  },
305
218
  "color": {
306
219
  "$extensions": {
307
- "nl.nldesignsystem.css.property": {
308
- "syntax": "<color>",
309
- "inherits": true
310
- },
311
- "nl.nldesignsystem.figma.supports-token": false
220
+ "nl.nldesignsystem.css-property-syntax": "<color>",
221
+ "nl.nldesignsystem.figma-implementation": false
312
222
  },
313
- "type": "color"
223
+ "$type": "color"
314
224
  }
315
225
  },
316
226
  "focus": {
317
227
  "border-color": {
318
228
  "$extensions": {
319
- "nl.nldesignsystem.css.property": {
320
- "syntax": "<color>",
321
- "inherits": true
322
- },
323
- "nl.nldesignsystem.figma.supports-token": false
229
+ "nl.nldesignsystem.css-property-syntax": "<color>",
230
+ "nl.nldesignsystem.figma-implementation": false
324
231
  },
325
- "type": "color"
232
+ "$type": "color"
326
233
  },
327
234
  "border-style": {
328
235
  "$extensions": {
329
- "nl.nldesignsystem.css.property": {
330
- "syntax": "*",
331
- "inherits": true
332
- },
333
- "nl.nldesignsystem.figma.supports-token": false
236
+ "nl.nldesignsystem.css-property-syntax": "*",
237
+ "nl.nldesignsystem.figma-implementation": false
334
238
  },
335
- "type": "other"
239
+ "$type": "other"
336
240
  },
337
241
  "border-width": {
338
242
  "$extensions": {
339
- "nl.nldesignsystem.css.property": {
340
- "syntax": "<length>",
341
- "inherits": true
342
- },
343
- "nl.nldesignsystem.figma.supports-token": false
243
+ "nl.nldesignsystem.css-property-syntax": "<length>",
244
+ "nl.nldesignsystem.figma-implementation": false
344
245
  },
345
- "type": "borderWidth"
246
+ "$type": "dimension"
346
247
  }
347
248
  },
348
249
  "hover": {
349
250
  "background-color": {
350
251
  "$extensions": {
351
- "nl.nldesignsystem.css.property": {
352
- "syntax": "<color>",
353
- "inherits": true
354
- },
355
- "nl.nldesignsystem.figma.supports-token": false
252
+ "nl.nldesignsystem.css-property-syntax": "<color>",
253
+ "nl.nldesignsystem.figma-implementation": false
356
254
  },
357
- "type": "color"
255
+ "$type": "color"
358
256
  },
359
257
  "color": {
360
258
  "$extensions": {
361
- "nl.nldesignsystem.css.property": {
362
- "syntax": "<color>",
363
- "inherits": true
364
- },
365
- "nl.nldesignsystem.figma.supports-token": false
259
+ "nl.nldesignsystem.css-property-syntax": "<color>",
260
+ "nl.nldesignsystem.figma-implementation": false
366
261
  },
367
- "type": "color"
262
+ "$type": "color"
368
263
  }
369
264
  }
370
265
  }