@utrecht/form-toggle-css 1.2.0 → 1.3.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 (9) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/dist/index.css +3 -30
  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/package.json +4 -4
  7. package/src/_mixin.scss +3 -2
  8. package/src/index.scss +2 -1
  9. package/dist/index.js +0 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,19 @@
1
1
  # @utrecht/form-toggle-css
2
2
 
3
+ ## 1.3.0
4
+
5
+ ### Minor Changes
6
+
7
+ - e497b08: Export CSS string as default export in `dist/index.mjs`.
8
+
9
+ ## 1.2.1
10
+
11
+ ### Patch Changes
12
+
13
+ - 7814d98: Fixed form toggle token variable name to be in line with our naming convention.
14
+
15
+ `--utrecht-form-toggle-background-disabled-background-color` to `--utrecht-form-toggle-disabled-background-color`
16
+
3
17
  ## 1.2.0
4
18
 
5
19
  ### Minor 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);
@@ -73,7 +58,6 @@
73
58
  }
74
59
 
75
60
  .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
61
  background-color: var(--utrecht-form-toggle-thumb-background-color, currentColor);
78
62
  border-radius: var(--utrecht-form-toggle-thumb-border-radius, 50%);
79
63
  box-shadow: var(--utrecht-form-toggle-thumb-box-shadow);
@@ -115,15 +99,11 @@
115
99
  }
116
100
 
117
101
  .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);
102
+ background-color: var(--utrecht-form-toggle-disabled-background-color, #ddd);
119
103
  color: var(--utrecht-form-toggle-disabled-color, black);
120
104
  }
121
105
 
122
106
  .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
107
  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
128
108
  var(--utrecht-focus-inverse-outline-color, transparent);
129
109
  box-shadow: var(--_utrecht-focus-ring-box-shadow);
@@ -134,26 +114,19 @@
134
114
  }
135
115
 
136
116
  .utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox {
137
- /* Source: https://kittygiraudel.com/snippets/sr-only-class/ */
138
117
  block-size: 1px !important;
139
118
  border: 0 !important;
140
119
  clip: rect(1px, 1px, 1px, 1px) !important;
141
120
  -webkit-clip-path: inset(50%) !important;
142
121
  clip-path: inset(50%) !important;
143
122
  inline-size: 1px !important;
144
- /* stylelint-disable-next-line property-disallowed-list */
145
123
  margin: -1px !important;
146
124
  overflow: hidden !important;
147
- /* stylelint-disable-next-line property-disallowed-list */
148
125
  padding: 0 !important;
149
126
  position: absolute !important;
150
127
  white-space: nowrap !important;
151
128
  }
152
129
  .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
130
  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
158
131
  var(--utrecht-focus-inverse-outline-color, transparent);
159
132
  box-shadow: var(--_utrecht-focus-ring-box-shadow);
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)}.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)}.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)}
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)}.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)}.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)}";
package/dist/index.mjs.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ declare const css: string;
2
+ export default css;
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "1.2.0",
2
+ "version": "1.3.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.1.0"
15
+ "@utrecht/focus-ring-css": "2.1.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";
@@ -115,7 +116,7 @@
115
116
  }
116
117
 
117
118
  @mixin utrecht-form-toggle__track--disabled {
118
- background-color: var(--utrecht-form-toggle-background-disabled-background-color, #ddd);
119
+ background-color: var(--utrecht-form-toggle-disabled-background-color, #ddd);
119
120
  color: var(--utrecht-form-toggle-disabled-color, black);
120
121
  }
121
122
 
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};