@open-inwoner/design-tokens 0.0.22 → 0.0.23

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.
@@ -51,6 +51,23 @@ $oip-text-big-font-size: 24px;
51
51
  $oip-text-line-height: 24px;
52
52
  $oip-typography-sans-serif-font-family: "Body", "Arial", sans-serif;
53
53
  $oip-typography-heading-font-family: "Heading", "Arial", sans-serif;
54
+ $oip-accordion-margin-block-start: 40px;
55
+ $oip-accordion-margin-block-end: 0;
56
+ $oip-accordion-heading-font-size: 20px;
57
+ $oip-accordion-heading-font-weight: bold;
58
+ $oip-accordion-heading-line-height: initial;
59
+ $oip-accordion-heading-margin-block-start: 0;
60
+ $oip-accordion-heading-margin-block-end: 0;
61
+ $oip-accordion-heading-margin-inline-start: 0;
62
+ $oip-accordion-heading-margin-inline-end: 0;
63
+ $oip-accordion-summary-border-bottom-width: 1px;
64
+ $oip-accordion-summary-border-bottom-style: solid;
65
+ $oip-accordion-summary-font-size: 16px;
66
+ $oip-accordion-summary-font-weight: normal;
67
+ $oip-accordion-summary-line-height: initial;
68
+ $oip-accordion-summary-margin-block-end: 16px;
69
+ $oip-accordion-summary-padding-block-start: 0;
70
+ $oip-accordion-summary-padding-block-end: 8px;
54
71
  $oip-combobox-border-radius: 3px;
55
72
  $oip-combobox-border-style: solid;
56
73
  $oip-combobox-border-width: 1px;
@@ -392,6 +409,11 @@ $utrecht-unordered-list-item-margin-block-end: 0;
392
409
  $utrecht-unordered-list-item-padding-inline-start: 0;
393
410
  $utrecht-unordered-list-marker-color: transparent;
394
411
  $oip-heading-fg: $oip-color-fg;
412
+ $oip-accordion-heading-color: $oip-color-fg;
413
+ $oip-accordion-heading-font-family: $oip-typography-heading-font-family;
414
+ $oip-accordion-summary-border-bottom-color: $oip-color-gray;
415
+ $oip-accordion-summary-color: $oip-color-fg;
416
+ $oip-accordion-summary-font-family: $oip-typography-sans-serif-font-family; // If summary is not a true heading, the body font is used.
395
417
  $oip-combobox-border-color: $oip-color-fg;
396
418
  $oip-combobox-font-family: $oip-typography-sans-serif-font-family;
397
419
  $oip-combobox-font-size: $oip-text-font-size;
@@ -53,6 +53,23 @@
53
53
  --oip-text-line-height: 24px;
54
54
  --oip-typography-sans-serif-font-family: "Body", "Arial", sans-serif;
55
55
  --oip-typography-heading-font-family: "Heading", "Arial", sans-serif;
56
+ --oip-accordion-margin-block-start: 40px;
57
+ --oip-accordion-margin-block-end: 0;
58
+ --oip-accordion-heading-font-size: 20px;
59
+ --oip-accordion-heading-font-weight: bold;
60
+ --oip-accordion-heading-line-height: initial;
61
+ --oip-accordion-heading-margin-block-start: 0;
62
+ --oip-accordion-heading-margin-block-end: 0;
63
+ --oip-accordion-heading-margin-inline-start: 0;
64
+ --oip-accordion-heading-margin-inline-end: 0;
65
+ --oip-accordion-summary-border-bottom-width: 1px;
66
+ --oip-accordion-summary-border-bottom-style: solid;
67
+ --oip-accordion-summary-font-size: 16px;
68
+ --oip-accordion-summary-font-weight: normal;
69
+ --oip-accordion-summary-line-height: initial;
70
+ --oip-accordion-summary-margin-block-end: 16px;
71
+ --oip-accordion-summary-padding-block-start: 0;
72
+ --oip-accordion-summary-padding-block-end: 8px;
56
73
  --oip-combobox-border-radius: 3px;
57
74
  --oip-combobox-border-style: solid;
58
75
  --oip-combobox-border-width: 1px;
@@ -394,6 +411,11 @@
394
411
  --utrecht-unordered-list-item-padding-inline-start: 0;
395
412
  --utrecht-unordered-list-marker-color: transparent;
396
413
  --oip-heading-fg: var(--oip-color-fg);
414
+ --oip-accordion-heading-color: var(--oip-color-fg);
415
+ --oip-accordion-heading-font-family: var(--oip-typography-heading-font-family);
416
+ --oip-accordion-summary-border-bottom-color: var(--oip-color-gray);
417
+ --oip-accordion-summary-color: var(--oip-color-fg);
418
+ --oip-accordion-summary-font-family: var(--oip-typography-sans-serif-font-family); /** If summary is not a true heading, the body font is used. */
397
419
  --oip-combobox-border-color: var(--oip-color-fg);
398
420
  --oip-combobox-font-family: var(--oip-typography-sans-serif-font-family);
399
421
  --oip-combobox-font-size: var(--oip-text-font-size);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@open-inwoner/design-tokens",
3
- "version": "0.0.22",
3
+ "version": "0.0.23",
4
4
  "description": "Design tokens for Open Inwoner",
5
5
  "scripts": {
6
6
  "test": "echo \"Error: no test specified\" && exit 1",
@@ -0,0 +1,35 @@
1
+ {
2
+ "oip": {
3
+ "accordion": {
4
+ "margin-block-start": {"value": "40px"},
5
+ "margin-block-end": {"value": "0"},
6
+ "heading": {
7
+ "color": {"value": "{oip.color.fg}"},
8
+ "font-family": {"value": "{oip.typography.heading.font-family}"},
9
+ "font-size": {"value": "20px"},
10
+ "font-weight": {"value": "bold"},
11
+ "line-height": {"value": "initial"},
12
+ "margin-block-start": {"value": "0"},
13
+ "margin-block-end": {"value": "0"},
14
+ "margin-inline-start": {"value": "0"},
15
+ "margin-inline-end": {"value": "0"}
16
+ },
17
+ "summary": {
18
+ "border-bottom-width": {"value": "1px"},
19
+ "border-bottom-style": {"value": "solid"},
20
+ "border-bottom-color": {"value": "{oip.color.gray}"},
21
+ "color": {"value": "{oip.color.fg}"},
22
+ "font-family": {
23
+ "value": "{oip.typography.sans-serif.font-family}",
24
+ "comment": "If summary is not a true heading, the body font is used."
25
+ },
26
+ "font-size": {"value": "16px"},
27
+ "font-weight": {"value": "normal"},
28
+ "line-height": {"value": "initial"},
29
+ "margin-block-end": {"value": "16px"},
30
+ "padding-block-start": {"value": "0"},
31
+ "padding-block-end": {"value": "8px"}
32
+ }
33
+ }
34
+ }
35
+ }