@amsterdam/design-system-css 2.1.0 → 2.2.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 (31) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/dist/avatar/avatar.css +1 -1
  3. package/dist/avatar/avatar.css.map +1 -1
  4. package/dist/button/button.css +1 -101
  5. package/dist/button/button.css.map +1 -1
  6. package/dist/field-set/field-set.css +1 -1
  7. package/dist/field-set/field-set.css.map +1 -1
  8. package/dist/hint/hint.css +1 -1
  9. package/dist/hint/hint.css.map +1 -1
  10. package/dist/index.css +1 -4709
  11. package/dist/index.css.map +1 -1
  12. package/dist/label/label.css +1 -1
  13. package/dist/label/label.css.map +1 -1
  14. package/dist/page/page.css +1 -1
  15. package/dist/page/page.css.map +1 -1
  16. package/dist/page-header/page-header.css +1 -1
  17. package/dist/page-header/page-header.css.map +1 -1
  18. package/package.json +3 -3
  19. package/src/components/avatar/avatar.scss +10 -2
  20. package/src/components/field-set/field-set.scss +4 -0
  21. package/src/components/hint/hint.scss +4 -0
  22. package/src/components/label/label.scss +4 -0
  23. package/src/components/menu/README.md +2 -0
  24. package/src/components/page/README.md +6 -18
  25. package/src/components/page/page.scss +33 -0
  26. package/src/components/page-header/README.md +2 -1
  27. package/src/components/page-header/page-header.scss +16 -23
  28. package/dist/app/app.css +0 -40
  29. package/dist/app/app.css.map +0 -1
  30. package/dist/app-navigation/app-navigation.css +0 -249
  31. package/dist/app-navigation/app-navigation.css.map +0 -1
package/CHANGELOG.md CHANGED
@@ -3,6 +3,21 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [2.2.0](https://github.com/Amsterdam/design-system/compare/design-system-css-v2.1.0...design-system-css-v2.2.0) (2025-11-21)
7
+
8
+
9
+ ### Features
10
+
11
+ * **Label, Field Set:** Add a lighter variant to Label and Legend to clarify form hierarchy in nested Field Sets ([#2291](https://github.com/Amsterdam/design-system/issues/2291)) ([3bcc039](https://github.com/Amsterdam/design-system/commit/3bcc03901cbe1b37183d774b26367a914e3bda79))
12
+ * **Page Header:** Allow adding an icon to a menu item ([#2285](https://github.com/Amsterdam/design-system/issues/2285)) ([15a830b](https://github.com/Amsterdam/design-system/commit/15a830b6068bb98c405da0013e90ac6697b20f5b))
13
+ * **Page:** Add support for a layout with a Menu ([#2263](https://github.com/Amsterdam/design-system/issues/2263)) ([51a289f](https://github.com/Amsterdam/design-system/commit/51a289fe3012981fff1bfc223a0689b9be3760a7))
14
+
15
+
16
+ ### Bug Fixes
17
+
18
+ * **Avatar:** Prevent a rendering issue in Safari from distorting the image ([#2286](https://github.com/Amsterdam/design-system/issues/2286)) ([42bccd4](https://github.com/Amsterdam/design-system/commit/42bccd478f11995cf98f9115badfb66ecc7c8c08))
19
+ * **Page Header:** Use correct icon for menu button ([#2284](https://github.com/Amsterdam/design-system/issues/2284)) ([f76dec6](https://github.com/Amsterdam/design-system/commit/f76dec61800de00e2c1d3f516cb6ac36420af116))
20
+
6
21
  ## [2.1.0](https://github.com/Amsterdam/design-system/compare/design-system-css-v2.0.1...design-system-css-v2.1.0) (2025-10-31)
7
22
 
8
23
 
package/dist/avatar/avatar.css CHANGED
@@ -1 +1 @@
1
- .ams-avatar{aspect-ratio:var(--ams-avatar-aspect-ratio);background-color:var(--ams-avatar-background-color);border-color:var(--ams-avatar-border-color);border-radius:50%;border-style:var(--ams-avatar-border-style);border-width:var(--ams-avatar-border-width);color:var(--ams-avatar-color);display:inline-flex;font-family:var(--ams-avatar-font-family);font-size:var(--ams-avatar-font-size);inline-size:calc(var(--ams-avatar-line-height)*var(--ams-avatar-font-size));line-height:var(--ams-avatar-line-height);padding-block:var(--ams-avatar-padding-block);padding-inline:var(--ams-avatar-padding-inline);place-content:center}.ams-avatar svg{fill:currentColor}.ams-avatar--has-image{border:none;inline-size:calc(var(--ams-avatar-line-height)*var(--ams-avatar-font-size) + 2*var(--ams-avatar-padding-inline) + 2*var(--ams-border-width-m));overflow:hidden;padding-block:0;padding-inline:0;vertical-align:middle}.ams-avatar--azure{background-color:var(--ams-avatar-azure-background-color);border-color:var(--ams-avatar-azure-border-color);color:var(--ams-avatar-azure-color)}.ams-avatar--green{background-color:var(--ams-avatar-green-background-color);border-color:var(--ams-avatar-green-border-color);color:var(--ams-avatar-green-color)}.ams-avatar--lime{background-color:var(--ams-avatar-lime-background-color);border-color:var(--ams-avatar-lime-border-color);color:var(--ams-avatar-lime-color)}.ams-avatar--magenta{background-color:var(--ams-avatar-magenta-background-color);border-color:var(--ams-avatar-magenta-border-color);color:var(--ams-avatar-magenta-color)}.ams-avatar--orange{background-color:var(--ams-avatar-orange-background-color);border-color:var(--ams-avatar-orange-border-color);color:var(--ams-avatar-orange-color)}.ams-avatar--yellow{background-color:var(--ams-avatar-yellow-background-color);border-color:var(--ams-avatar-yellow-border-color);color:var(--ams-avatar-yellow-color)}/*# sourceMappingURL=avatar.css.map */
1
+ .ams-avatar{aspect-ratio:var(--ams-avatar-aspect-ratio);background-color:var(--ams-avatar-background-color);border-color:var(--ams-avatar-border-color);border-radius:50%;border-style:var(--ams-avatar-border-style);border-width:var(--ams-avatar-border-width);color:var(--ams-avatar-color);display:inline-grid;font-family:var(--ams-avatar-font-family);font-size:var(--ams-avatar-font-size);inline-size:calc(var(--ams-avatar-line-height)*var(--ams-avatar-font-size));line-height:var(--ams-avatar-line-height);padding-block:var(--ams-avatar-padding-block);padding-inline:var(--ams-avatar-padding-inline);place-content:center}.ams-avatar svg{fill:currentColor}.ams-avatar--has-image{border:none;inline-size:calc(var(--ams-avatar-line-height)*var(--ams-avatar-font-size) + 2*var(--ams-avatar-padding-inline) + 2*var(--ams-border-width-m));overflow:hidden;padding-block:0;padding-inline:0;place-content:stretch;vertical-align:middle}.ams-avatar--has-image img{block-size:100%;inline-size:100%;object-fit:cover}.ams-avatar--azure{background-color:var(--ams-avatar-azure-background-color);border-color:var(--ams-avatar-azure-border-color);color:var(--ams-avatar-azure-color)}.ams-avatar--green{background-color:var(--ams-avatar-green-background-color);border-color:var(--ams-avatar-green-border-color);color:var(--ams-avatar-green-color)}.ams-avatar--lime{background-color:var(--ams-avatar-lime-background-color);border-color:var(--ams-avatar-lime-border-color);color:var(--ams-avatar-lime-color)}.ams-avatar--magenta{background-color:var(--ams-avatar-magenta-background-color);border-color:var(--ams-avatar-magenta-border-color);color:var(--ams-avatar-magenta-color)}.ams-avatar--orange{background-color:var(--ams-avatar-orange-background-color);border-color:var(--ams-avatar-orange-border-color);color:var(--ams-avatar-orange-color)}.ams-avatar--yellow{background-color:var(--ams-avatar-yellow-background-color);border-color:var(--ams-avatar-yellow-border-color);color:var(--ams-avatar-yellow-color)}/*# sourceMappingURL=avatar.css.map */
package/dist/avatar/avatar.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../src/components/avatar/avatar.scss"],"names":[],"mappings":"AAKA,YACE,4CACA,oDACA,4CACA,kBACA,4CACA,4CACA,8BACA,oBACA,0CACA,sCACA,4EACA,0CACA,8CACA,gDACA,qBAEA,gBACE,kBAIJ,uBACE,YACA,+IAIA,gBACA,gBACA,iBACA,sBAGF,mBACE,0DACA,kDACA,oCAGF,mBACE,0DACA,kDACA,oCAGF,kBACE,yDACA,iDACA,mCAGF,qBACE,4DACA,oDACA,sCAGF,oBACE,2DACA,mDACA,qCAGF,oBACE,2DACA,mDACA","file":"avatar.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../src/components/avatar/avatar.scss"],"names":[],"mappings":"AAKA,YACE,4CACA,oDACA,4CACA,kBACA,4CACA,4CACA,8BACA,oBACA,0CACA,sCACA,4EACA,0CACA,8CACA,gDACA,qBAEA,gBACE,kBAIJ,uBACE,YACA,+IAIA,gBACA,gBACA,iBACA,sBACA,sBAGA,2BACE,gBACA,iBACA,iBAIJ,mBACE,0DACA,kDACA,oCAGF,mBACE,0DACA,kDACA,oCAGF,kBACE,yDACA,iDACA,mCAGF,qBACE,4DACA,oDACA,sCAGF,oBACE,2DACA,mDACA,qCAGF,oBACE,2DACA,mDACA","file":"avatar.css"}
package/dist/button/button.css CHANGED
@@ -1,101 +1 @@
1
- /**
2
- * @license EUPL-1.2+
3
- * Copyright Gemeente Amsterdam
4
- */
5
- /**
6
- * @license EUPL-1.2+
7
- * Copyright Gemeente Amsterdam
8
- */
9
- /**
10
- * @license EUPL-1.2+
11
- * Copyright Gemeente Amsterdam
12
- */
13
- /**
14
- * Prioritizes legibility over speed when rendering text
15
- * and disables text inflation on some mobile devices.
16
- */
17
- .ams-button {
18
- --ams-icon-line-height: var(--ams-button-line-height);
19
- border-style: var(--ams-button-border-style);
20
- border-width: var(--ams-button-border-width);
21
- cursor: var(--ams-button-cursor);
22
- display: inline-flex;
23
- font-family: var(--ams-button-font-family);
24
- font-size: var(--ams-button-font-size);
25
- font-weight: var(--ams-button-font-weight);
26
- gap: var(--ams-button-gap);
27
- justify-content: center;
28
- line-height: var(--ams-button-line-height);
29
- outline-offset: var(--ams-button-outline-offset);
30
- padding-block: var(--ams-button-padding-block);
31
- padding-inline: var(--ams-button-padding-inline);
32
- touch-action: manipulation;
33
- /* These CSS declarations have a fallback, so it's safe to use them. */
34
- /* stylelint-disable-next-line plugin/use-baseline */
35
- hyphenate-limit-chars: var(--ams-typography-hyphenate-limit-chars);
36
- /* stylelint-disable-next-line plugin/use-baseline */
37
- hyphens: auto;
38
- overflow-wrap: break-word;
39
- text-rendering: optimizeLegibility;
40
- -moz-text-size-adjust: none;
41
- -webkit-text-size-adjust: none;
42
- /* The prefixed declarations increase the support somewhat, and if the property is not supported it is ignored. */
43
- /* stylelint-disable-next-line plugin/use-baseline */
44
- text-size-adjust: none;
45
- margin-block: 0;
46
- margin-inline: 0;
47
- }
48
- .ams-button:disabled, .ams-button[aria-disabled=true] {
49
- cursor: var(--ams-button-disabled-cursor);
50
- }
51
-
52
- .ams-button--primary {
53
- background-color: var(--ams-button-primary-background-color);
54
- border-color: var(--ams-button-primary-border-color);
55
- color: var(--ams-button-primary-color);
56
- }
57
- .ams-button--primary:disabled,
58
- .ams-button--primary [aria-disabled=true] {
59
- background-color: var(--ams-button-primary-disabled-background-color);
60
- border-color: var(--ams-button-primary-disabled-border-color);
61
- }
62
- .ams-button--primary:hover:not(:disabled, [aria-disabled=true]) {
63
- background-color: var(--ams-button-primary-hover-background-color);
64
- border-color: var(--ams-button-primary-hover-border-color);
65
- }
66
-
67
- .ams-button--secondary {
68
- background-color: var(--ams-button-secondary-background-color);
69
- border-color: var(--ams-button-secondary-border-color);
70
- color: var(--ams-button-secondary-color);
71
- }
72
- .ams-button--secondary:disabled,
73
- .ams-button--secondary [aria-disabled=true] {
74
- border-color: var(--ams-button-secondary-disabled-border-color);
75
- color: var(--ams-button-secondary-disabled-color);
76
- }
77
- .ams-button--secondary:hover:not(:disabled, [aria-disabled=true]) {
78
- box-shadow: var(--ams-button-secondary-hover-box-shadow);
79
- color: var(--ams-button-secondary-hover-color);
80
- }
81
-
82
- .ams-button--tertiary {
83
- background-color: var(--ams-button-tertiary-background-color);
84
- border-color: var(--ams-button-tertiary-border-color);
85
- color: var(--ams-button-tertiary-color);
86
- }
87
- .ams-button--tertiary:disabled,
88
- .ams-button--tertiary [aria-disabled=true] {
89
- color: var(--ams-button-tertiary-disabled-color);
90
- }
91
- .ams-button--tertiary:hover:not(:disabled, [aria-disabled=true]) {
92
- border-color: var(--ams-button-tertiary-hover-border-color);
93
- color: var(--ams-button-tertiary-hover-color);
94
- }
95
-
96
- .ams-button--icon-only {
97
- padding-block: var(--ams-button-icon-only-padding-block);
98
- padding-inline: var(--ams-button-icon-only-padding-inline);
99
- }
100
-
101
- /*# sourceMappingURL=button.css.map */
1
+ .ams-button{--ams-icon-line-height: var(--ams-button-line-height);border-style:var(--ams-button-border-style);border-width:var(--ams-button-border-width);cursor:var(--ams-button-cursor);display:inline-flex;font-family:var(--ams-button-font-family);font-size:var(--ams-button-font-size);font-weight:var(--ams-button-font-weight);gap:var(--ams-button-gap);justify-content:center;line-height:var(--ams-button-line-height);outline-offset:var(--ams-button-outline-offset);padding-block:var(--ams-button-padding-block);padding-inline:var(--ams-button-padding-inline);touch-action:manipulation;hyphenate-limit-chars:var(--ams-typography-hyphenate-limit-chars);hyphens:auto;overflow-wrap:break-word;text-rendering:optimizeLegibility;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none;margin-block:0;margin-inline:0}.ams-button:disabled,.ams-button[aria-disabled=true]{cursor:var(--ams-button-disabled-cursor)}.ams-button--primary{background-color:var(--ams-button-primary-background-color);border-color:var(--ams-button-primary-border-color);color:var(--ams-button-primary-color)}.ams-button--primary:disabled,.ams-button--primary [aria-disabled=true]{background-color:var(--ams-button-primary-disabled-background-color);border-color:var(--ams-button-primary-disabled-border-color)}.ams-button--primary:hover:not(:disabled,[aria-disabled=true]){background-color:var(--ams-button-primary-hover-background-color);border-color:var(--ams-button-primary-hover-border-color)}.ams-button--secondary{background-color:var(--ams-button-secondary-background-color);border-color:var(--ams-button-secondary-border-color);color:var(--ams-button-secondary-color)}.ams-button--secondary:disabled,.ams-button--secondary [aria-disabled=true]{border-color:var(--ams-button-secondary-disabled-border-color);color:var(--ams-button-secondary-disabled-color)}.ams-button--secondary:hover:not(:disabled,[aria-disabled=true]){box-shadow:var(--ams-button-secondary-hover-box-shadow);color:var(--ams-button-secondary-hover-color)}.ams-button--tertiary{background-color:var(--ams-button-tertiary-background-color);border-color:var(--ams-button-tertiary-border-color);color:var(--ams-button-tertiary-color)}.ams-button--tertiary:disabled,.ams-button--tertiary [aria-disabled=true]{color:var(--ams-button-tertiary-disabled-color)}.ams-button--tertiary:hover:not(:disabled,[aria-disabled=true]){border-color:var(--ams-button-tertiary-hover-border-color);color:var(--ams-button-tertiary-hover-color)}.ams-button--icon-only{padding-block:var(--ams-button-icon-only-padding-block);padding-inline:var(--ams-button-icon-only-padding-inline)}/*# sourceMappingURL=button.css.map */
package/dist/button/button.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../src/components/button/button.scss","../../src/common/hyphenation.scss","../../src/common/text-rendering.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAKA;AAAA;AAAA;AAAA;AFUA;EAEE;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AC1BA;AACA;EACA;AACA;EACA;EACA;ECDA;EACA;EACA;AAEA;AACA;EACA;EFPA;EACA;;AA4BA;EAEE;;;AAIJ;EACE;EACA;EACA;;AAEA;AAAA;EAEE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;AAAA;EAEE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;AAAA;EAEE;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA","file":"button.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../src/components/button/button.scss","../../src/common/hyphenation.scss","../../src/common/text-rendering.scss"],"names":[],"mappings":"AAeA,YAEE,sDAEA,4CACA,4CACA,gCACA,oBACA,0CACA,sCACA,0CACA,0BACA,uBACA,0CACA,gDACA,8CACA,gDACA,0BCxBA,kEAEA,aACA,yBCDA,kCACA,2BACA,8BAIA,sBFPA,eACA,gBA4BA,qDAEE,yCAIJ,qBACE,4DACA,oDACA,sCAEA,wEAEE,qEACA,6DAGF,+DACE,kEACA,0DAIJ,uBACE,8DACA,sDACA,wCAEA,4EAEE,+DACA,iDAGF,iEACE,wDACA,8CAIJ,sBACE,6DACA,qDACA,uCAEA,0EAEE,gDAGF,gEACE,2DACA,6CAIJ,uBACE,wDACA","file":"button.css"}
package/dist/field-set/field-set.css CHANGED
@@ -1 +1 @@
1
- .ams-field-set{break-inside:avoid;border:none;margin-inline:0;padding-block:0;padding-inline:0}.ams-field-set--invalid{border-inline-start:var(--ams-field-set-invalid-border-inline-start);padding-inline-start:var(--ams-field-set-invalid-padding-inline-start)}.ams-field-set__legend{color:var(--ams-field-set-legend-color);font-family:var(--ams-field-set-legend-font-family);font-size:var(--ams-field-set-legend-font-size);font-weight:var(--ams-field-set-legend-font-weight);line-height:var(--ams-field-set-legend-line-height);margin-block-end:var(--ams-field-set-legend-margin-block-end);text-wrap:var(--ams-field-set-legend-text-wrap);hyphenate-limit-chars:var(--ams-typography-hyphenate-limit-chars);hyphens:auto;overflow-wrap:break-word;text-rendering:optimizeLegibility;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none;float:left;inline-size:100%;padding-inline:0}.ams-field-set__legend+*{clear:both}.ams-field-set__heading{font-size:inherit;font-weight:inherit;margin-block:0}/*# sourceMappingURL=field-set.css.map */
1
+ .ams-field-set{break-inside:avoid;border:none;margin-inline:0;padding-block:0;padding-inline:0}.ams-field-set--invalid{border-inline-start:var(--ams-field-set-invalid-border-inline-start);padding-inline-start:var(--ams-field-set-invalid-padding-inline-start)}.ams-field-set__legend{color:var(--ams-field-set-legend-color);font-family:var(--ams-field-set-legend-font-family);font-size:var(--ams-field-set-legend-font-size);font-weight:var(--ams-field-set-legend-font-weight);line-height:var(--ams-field-set-legend-line-height);margin-block-end:var(--ams-field-set-legend-margin-block-end);text-wrap:var(--ams-field-set-legend-text-wrap);hyphenate-limit-chars:var(--ams-typography-hyphenate-limit-chars);hyphens:auto;overflow-wrap:break-word;text-rendering:optimizeLegibility;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none;float:left;inline-size:100%;padding-inline:0}.ams-field-set__legend+*{clear:both}.ams-field-set__legend--in-fieldset{font-weight:var(--ams-field-set-legend-in-fieldset-font-weight)}.ams-field-set__heading{font-size:inherit;font-weight:inherit;margin-block:0}/*# sourceMappingURL=field-set.css.map */
package/dist/field-set/field-set.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../src/components/field-set/field-set.scss","../../src/common/hyphenation.scss","../../src/common/text-rendering.scss"],"names":[],"mappings":"AAeA,eACE,mBAPA,YACA,gBACA,gBACA,iBASF,wBACE,qEACA,uEAcF,uBACE,wCACA,oDACA,gDACA,oDACA,oDACA,8DAOA,gDC1CA,kEAEA,aACA,yBCDA,kCACA,2BACA,8BAIA,sBFYA,WACA,iBACA,iBAEA,yBACE,WAwBJ,wBACE,kBACA,oBACA","file":"field-set.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../src/components/field-set/field-set.scss","../../src/common/hyphenation.scss","../../src/common/text-rendering.scss"],"names":[],"mappings":"AAeA,eACE,mBAPA,YACA,gBACA,gBACA,iBASF,wBACE,qEACA,uEAcF,uBACE,wCACA,oDACA,gDACA,oDACA,oDACA,8DAOA,gDC1CA,kEAEA,aACA,yBCDA,kCACA,2BACA,8BAIA,sBFYA,WACA,iBACA,iBAEA,yBACE,WAwBJ,oCACE,gEAGF,wBACE,kBACA,oBACA","file":"field-set.css"}
package/dist/hint/hint.css CHANGED
@@ -1 +1 @@
1
- .ams-hint{display:inline-block;font-weight:var(--ams-hint-font-weight)}/*# sourceMappingURL=hint.css.map */
1
+ .ams-hint{display:inline-block;font-weight:var(--ams-hint-font-weight)}.ams-hint--in-fieldset{color:var(--ams-hint-in-fieldset-color)}/*# sourceMappingURL=hint.css.map */
package/dist/hint/hint.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../src/components/hint/hint.scss"],"names":[],"mappings":"AAKA,UACE,qBACA","file":"hint.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../src/components/hint/hint.scss"],"names":[],"mappings":"AAKA,UACE,qBACA,wCAGF,uBACE","file":"hint.css"}