@amsterdam/design-system-css 0.1.9 → 0.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 (156) hide show
  1. package/CHANGELOG.md +41 -0
  2. package/LICENSE.md +1 -1
  3. package/dist/accordion/accordion.css +1 -1
  4. package/dist/accordion/accordion.css.map +1 -1
  5. package/dist/alert/alert.css +1 -1
  6. package/dist/alert/alert.css.map +1 -1
  7. package/dist/aspect-ratio/aspect-ratio.css.map +1 -1
  8. package/dist/blockquote/blockquote.css +1 -1
  9. package/dist/blockquote/blockquote.css.map +1 -1
  10. package/dist/breadcrumb/breadcrumb.css +1 -1
  11. package/dist/breadcrumb/breadcrumb.css.map +1 -1
  12. package/dist/button/button.css +1 -1
  13. package/dist/button/button.css.map +1 -1
  14. package/dist/card/card.css +1 -1
  15. package/dist/card/card.css.map +1 -1
  16. package/dist/checkbox/checkbox.css +1 -1
  17. package/dist/checkbox/checkbox.css.map +1 -1
  18. package/dist/dialog/dialog.css +1 -1
  19. package/dist/dialog/dialog.css.map +1 -1
  20. package/dist/form-label/form-label.css +1 -1
  21. package/dist/form-label/form-label.css.map +1 -1
  22. package/dist/grid/grid.css +1 -1
  23. package/dist/grid/grid.css.map +1 -1
  24. package/dist/header/header.css +1 -0
  25. package/dist/header/header.css.map +1 -0
  26. package/dist/heading/heading.css +1 -1
  27. package/dist/heading/heading.css.map +1 -1
  28. package/dist/icon/icon.css +1 -1
  29. package/dist/icon/icon.css.map +1 -1
  30. package/dist/image/image.css +1 -1
  31. package/dist/image/image.css.map +1 -1
  32. package/dist/index.css +1 -1
  33. package/dist/index.css.map +1 -1
  34. package/dist/link/link.css +1 -1
  35. package/dist/link/link.css.map +1 -1
  36. package/dist/logo/logo.css +1 -1
  37. package/dist/logo/logo.css.map +1 -1
  38. package/dist/mark/mark.css +1 -0
  39. package/dist/mark/mark.css.map +1 -0
  40. package/dist/ordered-list/ordered-list.css +1 -1
  41. package/dist/ordered-list/ordered-list.css.map +1 -1
  42. package/dist/overlap/overlap.css +1 -0
  43. package/dist/overlap/overlap.css.map +1 -0
  44. package/dist/page-heading/page-heading.css +1 -1
  45. package/dist/page-heading/page-heading.css.map +1 -1
  46. package/dist/page-menu/page-menu.css +1 -1
  47. package/dist/page-menu/page-menu.css.map +1 -1
  48. package/dist/pagination/pagination.css +1 -1
  49. package/dist/pagination/pagination.css.map +1 -1
  50. package/dist/paragraph/paragraph.css +1 -1
  51. package/dist/paragraph/paragraph.css.map +1 -1
  52. package/dist/screen/screen.css.map +1 -1
  53. package/dist/search-field/search-field.css +1 -0
  54. package/dist/search-field/search-field.css.map +1 -0
  55. package/dist/skip-link/skip-link.css +1 -0
  56. package/dist/skip-link/skip-link.css.map +1 -0
  57. package/dist/spotlight/spotlight.css +1 -0
  58. package/dist/spotlight/spotlight.css.map +1 -0
  59. package/dist/switch/switch.css.map +1 -1
  60. package/dist/text-input/text-input.css +1 -0
  61. package/dist/text-input/text-input.css.map +1 -0
  62. package/dist/top-task-link/top-task-link.css +1 -1
  63. package/dist/top-task-link/top-task-link.css.map +1 -1
  64. package/dist/unordered-list/unordered-list.css +1 -1
  65. package/dist/unordered-list/unordered-list.css.map +1 -1
  66. package/dist/visually-hidden/visually-hidden.css +1 -1
  67. package/dist/visually-hidden/visually-hidden.css.map +1 -1
  68. package/package.json +6 -6
  69. package/{utils → src/common}/breakpoint.scss +0 -6
  70. package/src/{accordion → components/accordion}/accordion.scss +5 -6
  71. package/src/{alert → components/alert}/alert.scss +5 -6
  72. package/src/{blockquote → components/blockquote}/blockquote.scss +5 -6
  73. package/src/components/breadcrumb/breadcrumb.scss +57 -0
  74. package/src/{button → components/button}/button.scss +8 -7
  75. package/src/components/card/README.md +25 -0
  76. package/src/{card → components/card}/card.scss +4 -4
  77. package/src/{checkbox → components/checkbox}/checkbox.scss +11 -12
  78. package/src/{dialog → components/dialog}/dialog.scss +6 -6
  79. package/src/{form-label → components/form-label}/form-label.scss +7 -8
  80. package/src/components/grid/README.md +21 -0
  81. package/src/{grid → components/grid}/grid.scss +54 -6
  82. package/src/components/header/README.md +14 -0
  83. package/src/components/header/header.scss +85 -0
  84. package/src/components/heading/heading.scss +84 -0
  85. package/src/components/icon/icon.scss +87 -0
  86. package/src/{image → components/image}/README.md +6 -1
  87. package/src/{image → components/image}/image.scss +4 -0
  88. package/src/{index.scss → components/index.scss} +7 -2
  89. package/src/{link → components/link}/link.scss +18 -26
  90. package/src/{logo → components/logo}/logo.scss +1 -0
  91. package/src/components/mark/README.md +18 -0
  92. package/src/components/mark/mark.scss +8 -0
  93. package/src/{ordered-list → components/ordered-list}/ordered-list.scss +7 -8
  94. package/src/components/overlap/README.md +3 -0
  95. package/src/components/overlap/overlap.scss +12 -0
  96. package/src/{page-heading → components/page-heading}/page-heading.scss +7 -8
  97. package/src/{page-menu → components/page-menu}/README.md +2 -0
  98. package/src/{page-menu → components/page-menu}/page-menu.scss +16 -27
  99. package/src/{pagination → components/pagination}/pagination.scss +9 -9
  100. package/src/components/paragraph/paragraph.scss +49 -0
  101. package/src/{screen → components/screen}/README.md +1 -1
  102. package/src/components/search-field/README.md +33 -0
  103. package/src/components/search-field/search-field.scss +81 -0
  104. package/src/components/skip-link/README.md +33 -0
  105. package/src/components/skip-link/skip-link.scss +28 -0
  106. package/src/{highlight → components/spotlight}/README.md +1 -1
  107. package/src/components/spotlight/spotlight.scss +36 -0
  108. package/src/components/text-input/README.md +12 -0
  109. package/src/components/text-input/text-input.scss +57 -0
  110. package/src/{top-task-link → components/top-task-link}/top-task-link.scss +13 -12
  111. package/src/{unordered-list → components/unordered-list}/unordered-list.scss +7 -8
  112. package/src/{visually-hidden → components/visually-hidden}/visually-hidden.scss +4 -6
  113. package/dist/grid/grid-cell.css +0 -1
  114. package/dist/grid/grid-cell.css.map +0 -1
  115. package/dist/highlight/highlight.css +0 -1
  116. package/dist/highlight/highlight.css.map +0 -1
  117. package/src/breadcrumb/breadcrumb.scss +0 -68
  118. package/src/card/README.md +0 -12
  119. package/src/grid/README.grid-cell.md +0 -14
  120. package/src/grid/README.grid.md +0 -17
  121. package/src/grid/grid-cell.scss +0 -46
  122. package/src/heading/heading.scss +0 -62
  123. package/src/highlight/highlight.scss +0 -36
  124. package/src/icon/icon.scss +0 -104
  125. package/src/paragraph/paragraph.scss +0 -48
  126. /package/{utils → src/common}/calculate-fluid-style.scss +0 -0
  127. /package/src/{accordion → components/accordion}/README.md +0 -0
  128. /package/src/{alert → components/alert}/README.md +0 -0
  129. /package/src/{aspect-ratio → components/aspect-ratio}/README.md +0 -0
  130. /package/src/{aspect-ratio → components/aspect-ratio}/aspect-ratio.scss +0 -0
  131. /package/src/{blockquote → components/blockquote}/README.md +0 -0
  132. /package/src/{breadcrumb → components/breadcrumb}/README.md +0 -0
  133. /package/src/{button → components/button}/README.md +0 -0
  134. /package/src/{button → components/button}/button-css.md +0 -0
  135. /package/src/{checkbox → components/checkbox}/README.md +0 -0
  136. /package/src/{checkbox → components/checkbox}/checkbox-css.md +0 -0
  137. /package/src/{dialog → components/dialog}/README.md +0 -0
  138. /package/src/{footer → components/footer}/README.md +0 -0
  139. /package/src/{footer → components/footer}/footer-css.md +0 -0
  140. /package/src/{form-label → components/form-label}/README.md +0 -0
  141. /package/src/{heading → components/heading}/README.md +0 -0
  142. /package/src/{heading → components/heading}/heading-css.md +0 -0
  143. /package/src/{icon → components/icon}/README.md +0 -0
  144. /package/src/{link → components/link}/README.md +0 -0
  145. /package/src/{logo → components/logo}/README.md +0 -0
  146. /package/src/{ordered-list → components/ordered-list}/README.md +0 -0
  147. /package/src/{page-heading → components/page-heading}/README.md +0 -0
  148. /package/src/{pagination → components/pagination}/README.md +0 -0
  149. /package/src/{paragraph → components/paragraph}/README.md +0 -0
  150. /package/src/{paragraph → components/paragraph}/paragraph-css.md +0 -0
  151. /package/src/{screen → components/screen}/screen.scss +0 -0
  152. /package/src/{switch → components/switch}/README.md +0 -0
  153. /package/src/{switch → components/switch}/switch.scss +0 -0
  154. /package/src/{top-task-link → components/top-task-link}/README.md +0 -0
  155. /package/src/{unordered-list → components/unordered-list}/README.md +0 -0
  156. /package/src/{visually-hidden → components/visually-hidden}/README.md +0 -0
package/src/heading/heading.scss DELETED
@@ -1,62 +0,0 @@
1
- /**
2
- * @license EUPL-1.2+
3
- * Copyright (c) 2023 Gemeente Amsterdam
4
- */
5
-
6
- @import "../../utils/breakpoint";
7
-
8
- @mixin reset {
9
- box-sizing: border-box;
10
- margin-block: 0;
11
- -webkit-text-size-adjust: 100%;
12
- }
13
-
14
- .amsterdam-heading {
15
- break-after: avoid;
16
- break-inside: avoid;
17
- color: var(--amsterdam-heading-color);
18
- font-family: var(--amsterdam-heading-font-family);
19
- font-weight: var(--amsterdam-heading-font-weight);
20
-
21
- @include reset;
22
- }
23
-
24
- .amsterdam-heading--1 {
25
- font-size: var(--amsterdam-heading-1-narrow-font-size);
26
- line-height: var(--amsterdam-heading-1-line-height);
27
-
28
- @media screen and (min-width: $amsterdam-breakpoint-typography) {
29
- font-size: var(--amsterdam-heading-1-wide-font-size);
30
- }
31
- }
32
-
33
- .amsterdam-heading--2 {
34
- font-size: var(--amsterdam-heading-2-narrow-font-size);
35
- line-height: var(--amsterdam-heading-2-line-height);
36
-
37
- @media screen and (min-width: $amsterdam-breakpoint-typography) {
38
- font-size: var(--amsterdam-heading-2-wide-font-size);
39
- }
40
- }
41
-
42
- .amsterdam-heading--3 {
43
- font-size: var(--amsterdam-heading-3-narrow-font-size);
44
- line-height: var(--amsterdam-heading-3-line-height);
45
-
46
- @media screen and (min-width: $amsterdam-breakpoint-typography) {
47
- font-size: var(--amsterdam-heading-3-wide-font-size);
48
- }
49
- }
50
-
51
- .amsterdam-heading--4 {
52
- font-size: var(--amsterdam-heading-4-narrow-font-size);
53
- line-height: var(--amsterdam-heading-4-line-height);
54
-
55
- @media screen and (min-width: $amsterdam-breakpoint-typography) {
56
- font-size: var(--amsterdam-heading-4-wide-font-size);
57
- }
58
- }
59
-
60
- .amsterdam-heading--inverse-color {
61
- color: var(--amsterdam-heading-inverse-color);
62
- }
package/src/highlight/highlight.scss DELETED
@@ -1,36 +0,0 @@
1
- /**
2
- * @license EUPL-1.2+
3
- * Copyright (c) 2023 Gemeente Amsterdam
4
- */
5
-
6
- .amsterdam-highlight--blue {
7
- background-color: var(--amsterdam-highlight-blue-background-color);
8
- }
9
-
10
- .amsterdam-highlight--dark-green {
11
- background-color: var(--amsterdam-highlight-dark-green-background-color);
12
- }
13
-
14
- .amsterdam-highlight--green {
15
- background-color: var(--amsterdam-highlight-green-background-color);
16
- }
17
-
18
- .amsterdam-highlight--light-blue {
19
- background-color: var(--amsterdam-highlight-light-blue-background-color);
20
- }
21
-
22
- .amsterdam-highlight--magenta {
23
- background-color: var(--amsterdam-highlight-magenta-background-color);
24
- }
25
-
26
- .amsterdam-highlight--orange {
27
- background-color: var(--amsterdam-highlight-orange-background-color);
28
- }
29
-
30
- .amsterdam-highlight--purple {
31
- background-color: var(--amsterdam-highlight-purple-background-color);
32
- }
33
-
34
- .amsterdam-highlight--yellow {
35
- background-color: var(--amsterdam-highlight-yellow-background-color);
36
- }
package/src/icon/icon.scss DELETED
@@ -1,104 +0,0 @@
1
- /**
2
- * @license EUPL-1.2+
3
- * Copyright (c) 2023 Gemeente Amsterdam
4
- */
5
-
6
- @import "../../utils/breakpoint";
7
-
8
- .amsterdam-icon {
9
- align-items: center;
10
- display: inline-flex;
11
- }
12
-
13
- .amsterdam-icon svg {
14
- fill: currentColor;
15
- }
16
-
17
- .amsterdam-icon--size-3 {
18
- height: calc(var(--amsterdam-icon-size-3-icon-size-narrow) * var(--amsterdam-icon-size-3-container-multiplier));
19
-
20
- @media screen and (min-width: $amsterdam-breakpoint-typography) {
21
- height: calc(var(--amsterdam-icon-size-3-icon-size-wide) * var(--amsterdam-icon-size-3-container-multiplier));
22
- }
23
- }
24
-
25
- .amsterdam-icon--size-3 svg {
26
- height: var(--amsterdam-icon-size-3-icon-size-narrow);
27
- width: var(--amsterdam-icon-size-3-icon-size-narrow);
28
-
29
- @media screen and (min-width: $amsterdam-breakpoint-typography) {
30
- height: var(--amsterdam-icon-size-3-icon-size-wide);
31
- width: var(--amsterdam-icon-size-3-icon-size-wide);
32
- }
33
- }
34
- .amsterdam-icon--size-4 {
35
- height: calc(var(--amsterdam-icon-size-4-icon-size-narrow) * var(--amsterdam-icon-size-4-container-multiplier));
36
-
37
- @media screen and (min-width: $amsterdam-breakpoint-typography) {
38
- height: calc(var(--amsterdam-icon-size-4-icon-size-wide) * var(--amsterdam-icon-size-4-container-multiplier));
39
- }
40
- }
41
-
42
- .amsterdam-icon--size-4 svg {
43
- height: var(--amsterdam-icon-size-4-icon-size-narrow);
44
- width: var(--amsterdam-icon-size-4-icon-size-narrow);
45
-
46
- @media screen and (min-width: $amsterdam-breakpoint-typography) {
47
- height: var(--amsterdam-icon-size-4-icon-size-wide);
48
- width: var(--amsterdam-icon-size-4-icon-size-wide);
49
- }
50
- }
51
-
52
- .amsterdam-icon--size-5 {
53
- height: calc(var(--amsterdam-icon-size-5-icon-size-narrow) * var(--amsterdam-icon-size-5-container-multiplier));
54
-
55
- @media screen and (min-width: $amsterdam-breakpoint-typography) {
56
- height: calc(var(--amsterdam-icon-size-5-icon-size-wide) * var(--amsterdam-icon-size-5-container-multiplier));
57
- }
58
- }
59
-
60
- .amsterdam-icon--size-5 svg {
61
- height: var(--amsterdam-icon-size-5-icon-size-narrow);
62
- width: var(--amsterdam-icon-size-5-icon-size-narrow);
63
-
64
- @media screen and (min-width: $amsterdam-breakpoint-typography) {
65
- height: var(--amsterdam-icon-size-5-icon-size-wide);
66
- width: var(--amsterdam-icon-size-5-icon-size-wide);
67
- }
68
- }
69
-
70
- .amsterdam-icon--size-6 {
71
- height: calc(var(--amsterdam-icon-size-6-icon-size-narrow) * var(--amsterdam-icon-size-6-container-multiplier));
72
-
73
- @media screen and (min-width: $amsterdam-breakpoint-typography) {
74
- height: calc(var(--amsterdam-icon-size-6-icon-size-wide) * var(--amsterdam-icon-size-6-container-multiplier));
75
- }
76
- }
77
-
78
- .amsterdam-icon--size-6 svg {
79
- height: var(--amsterdam-icon-size-6-icon-size-narrow);
80
- width: var(--amsterdam-icon-size-6-icon-size-narrow);
81
-
82
- @media screen and (min-width: $amsterdam-breakpoint-typography) {
83
- height: var(--amsterdam-icon-size-6-icon-size-wide);
84
- width: var(--amsterdam-icon-size-6-icon-size-wide);
85
- }
86
- }
87
-
88
- .amsterdam-icon--size-7 {
89
- height: calc(var(--amsterdam-icon-size-7-icon-size-narrow) * var(--amsterdam-icon-size-7-container-multiplier));
90
-
91
- @media screen and (min-width: $amsterdam-breakpoint-typography) {
92
- height: calc(var(--amsterdam-icon-size-7-icon-size-wide) * var(--amsterdam-icon-size-7-container-multiplier));
93
- }
94
- }
95
-
96
- .amsterdam-icon--size-7 svg {
97
- height: var(--amsterdam-icon-size-7-icon-size-narrow);
98
- width: var(--amsterdam-icon-size-7-icon-size-narrow);
99
-
100
- @media screen and (min-width: $amsterdam-breakpoint-typography) {
101
- height: var(--amsterdam-icon-size-7-icon-size-wide);
102
- width: var(--amsterdam-icon-size-7-icon-size-wide);
103
- }
104
- }
package/src/paragraph/paragraph.scss DELETED
@@ -1,48 +0,0 @@
1
- /**
2
- * @license EUPL-1.2+
3
- * Copyright (c) 2023 Gemeente Amsterdam
4
- */
5
-
6
- @import "../../utils/breakpoint";
7
-
8
- @mixin reset {
9
- box-sizing: border-box;
10
- margin-block: 0;
11
- -webkit-text-size-adjust: 100%;
12
- }
13
-
14
- .amsterdam-paragraph {
15
- color: var(--amsterdam-paragraph-color);
16
- font-family: var(--amsterdam-paragraph-font-family);
17
- font-size: var(--amsterdam-paragraph-narrow-font-size);
18
- font-weight: var(--amsterdam-paragraph-font-weight);
19
- line-height: var(--amsterdam-paragraph-line-height);
20
-
21
- @media screen and (min-width: $amsterdam-breakpoint-typography) {
22
- font-size: var(--amsterdam-paragraph-wide-font-size);
23
- }
24
-
25
- @include reset;
26
- }
27
-
28
- .amsterdam-paragraph--small {
29
- font-size: var(--amsterdam-paragraph-small-narrow-font-size);
30
- line-height: var(--amsterdam-paragraph-small-line-height);
31
-
32
- @media screen and (min-width: $amsterdam-breakpoint-typography) {
33
- font-size: var(--amsterdam-paragraph-small-wide-font-size);
34
- }
35
- }
36
-
37
- .amsterdam-paragraph--large {
38
- font-size: var(--amsterdam-paragraph-large-narrow-font-size);
39
- line-height: var(--amsterdam-paragraph-large-line-height);
40
-
41
- @media screen and (min-width: $amsterdam-breakpoint-typography) {
42
- font-size: var(--amsterdam-paragraph-large-wide-font-size);
43
- }
44
- }
45
-
46
- .amsterdam-paragraph--inverse-color {
47
- color: var(--amsterdam-paragraph-inverse-color);
48
- }
/package/src/{alert → components/alert}/README.md RENAMED
File without changes
/package/src/{button → components/button}/README.md RENAMED
File without changes
/package/src/{button → components/button}/button-css.md RENAMED
File without changes
/package/src/{checkbox → components/checkbox}/README.md RENAMED
File without changes
/package/src/{dialog → components/dialog}/README.md RENAMED
File without changes
/package/src/{footer → components/footer}/README.md RENAMED
File without changes
/package/src/{footer → components/footer}/footer-css.md RENAMED
File without changes
/package/src/{heading → components/heading}/README.md RENAMED
File without changes
/package/src/{icon → components/icon}/README.md RENAMED
File without changes
/package/src/{link → components/link}/README.md RENAMED
File without changes
/package/src/{logo → components/logo}/README.md RENAMED
File without changes
/package/src/{screen → components/screen}/screen.scss RENAMED
File without changes
/package/src/{switch → components/switch}/README.md RENAMED
File without changes
/package/src/{switch → components/switch}/switch.scss RENAMED
File without changes