@utrecht/design-tokens 2.5.0 → 2.5.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 (24) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/_mixin-theme.scss +1 -1
  3. package/dist/_mixin.scss +1 -1
  4. package/dist/_variables.scss +1 -1
  5. package/dist/index.cjs +1 -1
  6. package/dist/index.css +1 -1
  7. package/dist/index.flat.json +1 -1
  8. package/dist/index.json +2 -2
  9. package/dist/index.mjs +1 -1
  10. package/dist/index.tokens.json +1 -1
  11. package/dist/list.json +2 -2
  12. package/dist/list.mjs +2 -2
  13. package/dist/root.css +1 -1
  14. package/dist/theme-prince-xml.css +1 -1
  15. package/dist/theme.css +1 -1
  16. package/dist/tokens.cjs +2 -2
  17. package/dist/tokens.json +2 -2
  18. package/dist/variables.cjs +1 -1
  19. package/dist/variables.css +1 -1
  20. package/dist/variables.json +1 -1
  21. package/dist/variables.less +1 -1
  22. package/dist/variables.mjs +1 -1
  23. package/package.json +1 -1
  24. package/src/component/utrecht/backdrop.tokens.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @utrecht/design-tokens
2
2
 
3
+ ## 2.5.1
4
+
5
+ ### Patch Changes
6
+
7
+ - 965bf7d: Update Backdrop background-color value
8
+
3
9
  ## 2.5.0
4
10
 
5
11
  ### Minor Changes
package/dist/_mixin-theme.scss CHANGED
@@ -388,6 +388,7 @@
388
388
  --utrecht-backdrop-reduced-transparency-opacity: 0.98;
389
389
  --utrecht-backdrop-fade-in-animation-duration: 400ms;
390
390
  --utrecht-backdrop-opacity: 0.8;
391
+ --utrecht-backdrop-background-color: rgb(0 0 0 / 30%);
391
392
  --utrecht-article-max-inline-size: 780px;
392
393
  --utrecht-alert-icon-inset-block-start: 6px;
393
394
  --utrecht-alert-icon-size: 24px;
@@ -912,7 +913,6 @@
912
913
  --utrecht-badge-counter-color: var(--utrecht-color-white); /* Default text color for badge components */
913
914
  --utrecht-badge-counter-background-color: var(--utrecht-color-red-40); /* Default background color for badge components */
914
915
  --utrecht-backdrop-color: var(--utrecht-color-black);
915
- --utrecht-backdrop-background-color: var(--utrecht-color-white);
916
916
  --utrecht-alert-icon-ok-color: var(--utrecht-color-green-40);
917
917
  --utrecht-alert-icon-warning-color: var(--utrecht-color-yellow-40);
918
918
  --utrecht-alert-icon-error-color: var(--utrecht-color-red-40);
package/dist/_mixin.scss CHANGED
@@ -388,6 +388,7 @@
388
388
  --utrecht-backdrop-reduced-transparency-opacity: 0.98;
389
389
  --utrecht-backdrop-fade-in-animation-duration: 400ms;
390
390
  --utrecht-backdrop-opacity: 0.8;
391
+ --utrecht-backdrop-background-color: rgb(0 0 0 / 30%);
391
392
  --utrecht-article-max-inline-size: 780px;
392
393
  --utrecht-alert-icon-inset-block-start: 6px;
393
394
  --utrecht-alert-icon-size: 24px;
@@ -912,7 +913,6 @@
912
913
  --utrecht-badge-counter-color: var(--utrecht-color-white); /* Default text color for badge components */
913
914
  --utrecht-badge-counter-background-color: var(--utrecht-color-red-40); /* Default background color for badge components */
914
915
  --utrecht-backdrop-color: var(--utrecht-color-black);
915
- --utrecht-backdrop-background-color: var(--utrecht-color-white);
916
916
  --utrecht-alert-icon-ok-color: var(--utrecht-color-green-40);
917
917
  --utrecht-alert-icon-warning-color: var(--utrecht-color-yellow-40);
918
918
  --utrecht-alert-icon-error-color: var(--utrecht-color-red-40);
package/dist/_variables.scss CHANGED
@@ -386,6 +386,7 @@ $utrecht-badge-counter-padding-block: 1ex; // Default block padding for badge co
386
386
  $utrecht-backdrop-reduced-transparency-opacity: 0.98;
387
387
  $utrecht-backdrop-fade-in-animation-duration: 400ms;
388
388
  $utrecht-backdrop-opacity: 0.8;
389
+ $utrecht-backdrop-background-color: rgb(0 0 0 / 30%);
389
390
  $utrecht-article-max-inline-size: 780px;
390
391
  $utrecht-alert-icon-inset-block-start: 6px;
391
392
  $utrecht-alert-icon-size: 24px;
@@ -910,7 +911,6 @@ $utrecht-badge-counter-font-size: $utrecht-typography-scale-md-font-size;
910
911
  $utrecht-badge-counter-color: $utrecht-color-white; // Default text color for badge components
911
912
  $utrecht-badge-counter-background-color: $utrecht-color-red-40; // Default background color for badge components
912
913
  $utrecht-backdrop-color: $utrecht-color-black;
913
- $utrecht-backdrop-background-color: $utrecht-color-white;
914
914
  $utrecht-alert-icon-ok-color: $utrecht-color-green-40;
915
915
  $utrecht-alert-icon-warning-color: $utrecht-color-yellow-40;
916
916
  $utrecht-alert-icon-error-color: $utrecht-color-red-40;
package/dist/index.cjs CHANGED
@@ -57,7 +57,7 @@ module.exports = {
57
57
  "utrechtAlertIconWarningColor": "hsl(48 100% 40%)",
58
58
  "utrechtAlertIconOkColor": "hsl(90 30% 38%)",
59
59
  "utrechtArticleMaxInlineSize": "780px",
60
- "utrechtBackdropBackgroundColor": "hsl(0 0% 100%)",
60
+ "utrechtBackdropBackgroundColor": "rgb(0 0 0 / 30%)",
61
61
  "utrechtBackdropColor": "hsl(0 0% 0%)",
62
62
  "utrechtBackdropOpacity": "0.8",
63
63
  "utrechtBackdropFadeInAnimationDuration": "400ms",
package/dist/index.css CHANGED
@@ -415,6 +415,7 @@
415
415
  --utrecht-backdrop-reduced-transparency-opacity: 0.98;
416
416
  --utrecht-backdrop-fade-in-animation-duration: 400ms;
417
417
  --utrecht-backdrop-opacity: 0.8;
418
+ --utrecht-backdrop-background-color: rgb(0 0 0 / 30%);
418
419
  --utrecht-article-max-inline-size: 780px;
419
420
  --utrecht-alert-icon-inset-block-start: 6px;
420
421
  --utrecht-alert-icon-size: 24px;
@@ -939,7 +940,6 @@
939
940
  --utrecht-badge-counter-color: var(--utrecht-color-white); /* Default text color for badge components */
940
941
  --utrecht-badge-counter-background-color: var(--utrecht-color-red-40); /* Default background color for badge components */
941
942
  --utrecht-backdrop-color: var(--utrecht-color-black);
942
- --utrecht-backdrop-background-color: var(--utrecht-color-white);
943
943
  --utrecht-alert-icon-ok-color: var(--utrecht-color-green-40);
944
944
  --utrecht-alert-icon-warning-color: var(--utrecht-color-yellow-40);
945
945
  --utrecht-alert-icon-error-color: var(--utrecht-color-red-40);
package/dist/index.flat.json CHANGED
@@ -172,7 +172,7 @@
172
172
  "utrechtAlertWarningBackgroundColor": "hsl(48 100% 80%)",
173
173
  "utrechtAlertWarningColor": "hsl(0 0% 0%)",
174
174
  "utrechtArticleMaxInlineSize": "780px",
175
- "utrechtBackdropBackgroundColor": "hsl(0 0% 100%)",
175
+ "utrechtBackdropBackgroundColor": "rgb(0 0 0 / 30%)",
176
176
  "utrechtBackdropColor": "hsl(0 0% 0%)",
177
177
  "utrechtBackdropFadeInAnimationDuration": "400ms",
178
178
  "utrechtBackdropOpacity": "0.8",
package/dist/index.json CHANGED
@@ -4601,7 +4601,7 @@
4601
4601
  "nl.nldesignsystem.figma.supports-token": true
4602
4602
  },
4603
4603
  "type": "color",
4604
- "value": "hsl(0 0% 100%)",
4604
+ "value": "rgb(0 0 0 / 30%)",
4605
4605
  "filePath": "src/component/utrecht/backdrop.tokens.json",
4606
4606
  "isSource": true,
4607
4607
  "original": {
@@ -4613,7 +4613,7 @@
4613
4613
  "nl.nldesignsystem.figma.supports-token": true
4614
4614
  },
4615
4615
  "type": "color",
4616
- "value": "{utrecht.color.white}"
4616
+ "value": "rgb(0 0 0 / 30%)"
4617
4617
  },
4618
4618
  "name": "utrechtBackdropBackgroundColor",
4619
4619
  "attributes": {},
package/dist/index.mjs CHANGED
@@ -56,7 +56,7 @@ export const utrechtAlertIconErrorColor = "hsl(0 100% 40%)";
56
56
  export const utrechtAlertIconWarningColor = "hsl(48 100% 40%)";
57
57
  export const utrechtAlertIconOkColor = "hsl(90 30% 38%)";
58
58
  export const utrechtArticleMaxInlineSize = "780px";
59
- export const utrechtBackdropBackgroundColor = "hsl(0 0% 100%)";
59
+ export const utrechtBackdropBackgroundColor = "rgb(0 0 0 / 30%)";
60
60
  export const utrechtBackdropColor = "hsl(0 0% 0%)";
61
61
  export const utrechtBackdropOpacity = "0.8";
62
62
  export const utrechtBackdropFadeInAnimationDuration = "400ms";
package/dist/index.tokens.json CHANGED
@@ -410,7 +410,7 @@
410
410
  "max-inline-size": "780px"
411
411
  },
412
412
  "backdrop": {
413
- "background-color": "hsl(0 0% 100%)",
413
+ "background-color": "rgb(0 0 0 / 30%)",
414
414
  "color": "hsl(0 0% 0%)",
415
415
  "opacity": "0.8",
416
416
  "z-index": {
package/dist/list.json CHANGED
@@ -4601,7 +4601,7 @@
4601
4601
  "nl.nldesignsystem.figma.supports-token": true
4602
4602
  },
4603
4603
  "type": "color",
4604
- "value": "hsl(0 0% 100%)",
4604
+ "value": "rgb(0 0 0 / 30%)",
4605
4605
  "filePath": "src/component/utrecht/backdrop.tokens.json",
4606
4606
  "isSource": true,
4607
4607
  "original": {
@@ -4613,7 +4613,7 @@
4613
4613
  "nl.nldesignsystem.figma.supports-token": true
4614
4614
  },
4615
4615
  "type": "color",
4616
- "value": "{utrecht.color.white}"
4616
+ "value": "rgb(0 0 0 / 30%)"
4617
4617
  },
4618
4618
  "name": "utrechtBackdropBackgroundColor",
4619
4619
  "attributes": {},
package/dist/list.mjs CHANGED
@@ -4601,7 +4601,7 @@ export default [
4601
4601
  "nl.nldesignsystem.figma.supports-token": true
4602
4602
  },
4603
4603
  "type": "color",
4604
- "value": "hsl(0 0% 100%)",
4604
+ "value": "rgb(0 0 0 / 30%)",
4605
4605
  "filePath": "src/component/utrecht/backdrop.tokens.json",
4606
4606
  "isSource": true,
4607
4607
  "original": {
@@ -4613,7 +4613,7 @@ export default [
4613
4613
  "nl.nldesignsystem.figma.supports-token": true
4614
4614
  },
4615
4615
  "type": "color",
4616
- "value": "{utrecht.color.white}"
4616
+ "value": "rgb(0 0 0 / 30%)"
4617
4617
  },
4618
4618
  "name": "utrechtBackdropBackgroundColor",
4619
4619
  "attributes": {},
package/dist/root.css CHANGED
@@ -372,6 +372,7 @@
372
372
  --utrecht-backdrop-reduced-transparency-opacity: 0.98;
373
373
  --utrecht-backdrop-opacity: 0.8;
374
374
  --utrecht-backdrop-fade-in-animation-duration: 400ms;
375
+ --utrecht-backdrop-background-color: rgb(0 0 0 / 30%);
375
376
  --utrecht-article-max-inline-size: 780px;
376
377
  --utrecht-alert-icon-size: 24px;
377
378
  --utrecht-alert-icon-inset-block-start: 6px;
@@ -825,7 +826,6 @@
825
826
  --utrecht-badge-counter-background-color: var(--utrecht-color-red-40); /* Default background color for badge components */
826
827
  --utrecht-badge-border-radius: var(--nl-data-badge-border-radius); /* Default corner radius for badge components */
827
828
  --utrecht-backdrop-color: var(--utrecht-color-black);
828
- --utrecht-backdrop-background-color: var(--utrecht-color-white);
829
829
  --utrecht-alert-warning-color: var(--utrecht-color-black);
830
830
  --utrecht-alert-warning-background-color: var(--utrecht-color-yellow-80);
831
831
  --utrecht-alert-padding-inline-start: var(--utrecht-space-block-lg);
package/dist/theme-prince-xml.css CHANGED
@@ -388,6 +388,7 @@
388
388
  --utrecht-backdrop-reduced-transparency-opacity: 0.98;
389
389
  --utrecht-backdrop-fade-in-animation-duration: 400ms;
390
390
  --utrecht-backdrop-opacity: 0.8;
391
+ --utrecht-backdrop-background-color: rgb(0 0 0 / 30%);
391
392
  --utrecht-article-max-inline-size: 780px;
392
393
  --utrecht-alert-icon-inset-block-start: 6px;
393
394
  --utrecht-alert-icon-size: 24px;
@@ -912,7 +913,6 @@
912
913
  --utrecht-badge-counter-color: var(--utrecht-color-white); /* Default text color for badge components */
913
914
  --utrecht-badge-counter-background-color: var(--utrecht-color-red-40); /* Default background color for badge components */
914
915
  --utrecht-backdrop-color: var(--utrecht-color-black);
915
- --utrecht-backdrop-background-color: var(--utrecht-color-white);
916
916
  --utrecht-alert-icon-ok-color: var(--utrecht-color-green-40);
917
917
  --utrecht-alert-icon-warning-color: var(--utrecht-color-yellow-40);
918
918
  --utrecht-alert-icon-error-color: var(--utrecht-color-red-40);
package/dist/theme.css CHANGED
@@ -372,6 +372,7 @@
372
372
  --utrecht-backdrop-reduced-transparency-opacity: 0.98;
373
373
  --utrecht-backdrop-opacity: 0.8;
374
374
  --utrecht-backdrop-fade-in-animation-duration: 400ms;
375
+ --utrecht-backdrop-background-color: rgb(0 0 0 / 30%);
375
376
  --utrecht-article-max-inline-size: 780px;
376
377
  --utrecht-alert-icon-size: 24px;
377
378
  --utrecht-alert-icon-inset-block-start: 6px;
@@ -825,7 +826,6 @@
825
826
  --utrecht-badge-counter-background-color: var(--utrecht-color-red-40); /* Default background color for badge components */
826
827
  --utrecht-badge-border-radius: var(--nl-data-badge-border-radius); /* Default corner radius for badge components */
827
828
  --utrecht-backdrop-color: var(--utrecht-color-black);
828
- --utrecht-backdrop-background-color: var(--utrecht-color-white);
829
829
  --utrecht-alert-warning-color: var(--utrecht-color-black);
830
830
  --utrecht-alert-warning-background-color: var(--utrecht-color-yellow-80);
831
831
  --utrecht-alert-padding-inline-start: var(--utrecht-space-block-lg);
package/dist/tokens.cjs CHANGED
@@ -2314,7 +2314,7 @@ module.exports = {
2314
2314
  "nl.nldesignsystem.figma.supports-token": true
2315
2315
  },
2316
2316
  "type": "color",
2317
- "value": "hsl(0 0% 100%)",
2317
+ "value": "rgb(0 0 0 / 30%)",
2318
2318
  "filePath": "src/component/utrecht/backdrop.tokens.json",
2319
2319
  "isSource": true,
2320
2320
  "original": {
@@ -2326,7 +2326,7 @@ module.exports = {
2326
2326
  "nl.nldesignsystem.figma.supports-token": true
2327
2327
  },
2328
2328
  "type": "color",
2329
- "value": "{utrecht.color.white}"
2329
+ "value": "rgb(0 0 0 / 30%)"
2330
2330
  },
2331
2331
  "name": "background-color",
2332
2332
  "attributes": {},
package/dist/tokens.json CHANGED
@@ -2310,7 +2310,7 @@
2310
2310
  "nl.nldesignsystem.figma.supports-token": true
2311
2311
  },
2312
2312
  "type": "color",
2313
- "value": "hsl(0 0% 100%)",
2313
+ "value": "rgb(0 0 0 / 30%)",
2314
2314
  "filePath": "src/component/utrecht/backdrop.tokens.json",
2315
2315
  "isSource": true,
2316
2316
  "original": {
@@ -2322,7 +2322,7 @@
2322
2322
  "nl.nldesignsystem.figma.supports-token": true
2323
2323
  },
2324
2324
  "type": "color",
2325
- "value": "{utrecht.color.white}"
2325
+ "value": "rgb(0 0 0 / 30%)"
2326
2326
  },
2327
2327
  "name": "utrechtBackdropBackgroundColor",
2328
2328
  "attributes": {},
package/dist/variables.cjs CHANGED
@@ -57,7 +57,7 @@ module.exports = {
57
57
  "utrechtAlertIconWarningColor": "hsl(48 100% 40%)",
58
58
  "utrechtAlertIconOkColor": "hsl(90 30% 38%)",
59
59
  "utrechtArticleMaxInlineSize": "780px",
60
- "utrechtBackdropBackgroundColor": "hsl(0 0% 100%)",
60
+ "utrechtBackdropBackgroundColor": "rgb(0 0 0 / 30%)",
61
61
  "utrechtBackdropColor": "hsl(0 0% 0%)",
62
62
  "utrechtBackdropOpacity": "0.8",
63
63
  "utrechtBackdropFadeInAnimationDuration": "400ms",
package/dist/variables.css CHANGED
@@ -372,6 +372,7 @@
372
372
  --utrecht-backdrop-reduced-transparency-opacity: 0.98;
373
373
  --utrecht-backdrop-opacity: 0.8;
374
374
  --utrecht-backdrop-fade-in-animation-duration: 400ms;
375
+ --utrecht-backdrop-background-color: rgb(0 0 0 / 30%);
375
376
  --utrecht-article-max-inline-size: 780px;
376
377
  --utrecht-alert-icon-size: 24px;
377
378
  --utrecht-alert-icon-inset-block-start: 6px;
@@ -825,7 +826,6 @@
825
826
  --utrecht-badge-counter-background-color: var(--utrecht-color-red-40); /* Default background color for badge components */
826
827
  --utrecht-badge-border-radius: var(--nl-data-badge-border-radius); /* Default corner radius for badge components */
827
828
  --utrecht-backdrop-color: var(--utrecht-color-black);
828
- --utrecht-backdrop-background-color: var(--utrecht-color-white);
829
829
  --utrecht-alert-warning-color: var(--utrecht-color-black);
830
830
  --utrecht-alert-warning-background-color: var(--utrecht-color-yellow-80);
831
831
  --utrecht-alert-padding-inline-start: var(--utrecht-space-block-lg);
package/dist/variables.json CHANGED
@@ -172,7 +172,7 @@
172
172
  "utrechtAlertWarningBackgroundColor": "hsl(48 100% 80%)",
173
173
  "utrechtAlertWarningColor": "hsl(0 0% 0%)",
174
174
  "utrechtArticleMaxInlineSize": "780px",
175
- "utrechtBackdropBackgroundColor": "hsl(0 0% 100%)",
175
+ "utrechtBackdropBackgroundColor": "rgb(0 0 0 / 30%)",
176
176
  "utrechtBackdropColor": "hsl(0 0% 0%)",
177
177
  "utrechtBackdropFadeInAnimationDuration": "400ms",
178
178
  "utrechtBackdropOpacity": "0.8",
package/dist/variables.less CHANGED
@@ -386,6 +386,7 @@
386
386
  @utrecht-backdrop-reduced-transparency-opacity: 0.98;
387
387
  @utrecht-backdrop-fade-in-animation-duration: 400ms;
388
388
  @utrecht-backdrop-opacity: 0.8;
389
+ @utrecht-backdrop-background-color: rgb(0 0 0 / 30%);
389
390
  @utrecht-article-max-inline-size: 780px;
390
391
  @utrecht-alert-icon-inset-block-start: 6px;
391
392
  @utrecht-alert-icon-size: 24px;
@@ -910,7 +911,6 @@
910
911
  @utrecht-badge-counter-color: @utrecht-color-white; // Default text color for badge components
911
912
  @utrecht-badge-counter-background-color: @utrecht-color-red-40; // Default background color for badge components
912
913
  @utrecht-backdrop-color: @utrecht-color-black;
913
- @utrecht-backdrop-background-color: @utrecht-color-white;
914
914
  @utrecht-alert-icon-ok-color: @utrecht-color-green-40;
915
915
  @utrecht-alert-icon-warning-color: @utrecht-color-yellow-40;
916
916
  @utrecht-alert-icon-error-color: @utrecht-color-red-40;
package/dist/variables.mjs CHANGED
@@ -56,7 +56,7 @@ export const utrechtAlertIconErrorColor = "hsl(0 100% 40%)";
56
56
  export const utrechtAlertIconWarningColor = "hsl(48 100% 40%)";
57
57
  export const utrechtAlertIconOkColor = "hsl(90 30% 38%)";
58
58
  export const utrechtArticleMaxInlineSize = "780px";
59
- export const utrechtBackdropBackgroundColor = "hsl(0 0% 100%)";
59
+ export const utrechtBackdropBackgroundColor = "rgb(0 0 0 / 30%)";
60
60
  export const utrechtBackdropColor = "hsl(0 0% 0%)";
61
61
  export const utrechtBackdropOpacity = "0.8";
62
62
  export const utrechtBackdropFadeInAnimationDuration = "400ms";
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "2.5.0",
2
+ "version": "2.5.1",
3
3
  "author": "Community for NL Design System",
4
4
  "description": "Design Tokens for the Municipality of Utrecht based on the NL Design System architecture",
5
5
  "license": "SEE LICENSE IN ./LICENSE.md",
package/src/component/utrecht/backdrop.tokens.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "utrecht": {
3
3
  "backdrop": {
4
4
  "background-color": {
5
- "value": "{utrecht.color.white}"
5
+ "value": "rgb(0 0 0 / 30%)"
6
6
  },
7
7
  "color": {
8
8
  "value": "{utrecht.color.black}"