@open-inwoner/design-tokens 0.0.18 → 0.0.19

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 (4) hide show
  1. package/dist/_variables.scss +56 -0
  2. package/dist/css/index.css +56 -0
  3. package/package.json +1 -1
  4. package/src/components/external-link-plugin.tokens.json +77 -0
package/dist/_variables.scss CHANGED
@@ -89,6 +89,60 @@ $oip-combobox-popover-listbox-list-padding-inline-end: 0;
89
89
  $oip-combobox-popover-listbox-list-padding-inline-start: 0;
90
90
  $oip-combobox-popover-listbox-list-option-selected-icon-size: 16px;
91
91
  $oip-combobox-icon-size: 16px;
92
+ $oip-external-link-background-color: transparent;
93
+ $oip-external-link-color: #000000;
94
+ $oip-external-link-border-radius: 3px;
95
+ $oip-external-link-border-style: solid;
96
+ $oip-external-link-border-width: 1px;
97
+ $oip-external-link-box-shadow: none;
98
+ $oip-external-link-display: flex;
99
+ $oip-external-link-flex-direction: row;
100
+ $oip-external-link-align-items: center;
101
+ $oip-external-link-row-gap: 8px;
102
+ $oip-external-link-column-gap: 32px;
103
+ $oip-external-link-text-decoration: none;
104
+ $oip-external-link-hover-background-color: #f3f3f3;
105
+ $oip-external-link-hover-text-decoration-thickness: bold;
106
+ $oip-external-link-focus-visible-background-color: #f3f3f3;
107
+ $oip-external-link-focus-visible-text-decoration-thickness: bold;
108
+ $oip-external-link-body-margin-block-start: 0;
109
+ $oip-external-link-body-margin-block-end: 0;
110
+ $oip-external-link-body-margin-inline-start: 0;
111
+ $oip-external-link-body-margin-inline-end: 0;
112
+ $oip-external-link-body-padding-block-start: 24px;
113
+ $oip-external-link-body-padding-block-end: 24px;
114
+ $oip-external-link-body-padding-inline-start: 24px;
115
+ $oip-external-link-body-padding-inline-end: 24px;
116
+ $oip-external-link-custom-icon-color: #000000;
117
+ $oip-external-link-custom-icon-display: inline-block;
118
+ $oip-external-link-custom-icon-font-size: 24px;
119
+ $oip-external-link-custom-icon-margin-block-start: 8px;
120
+ $oip-external-link-custom-icon-margin-block-end: 0;
121
+ $oip-external-link-custom-icon-margin-inline-start: 0;
122
+ $oip-external-link-custom-icon-margin-inline-end: 8px;
123
+ $oip-external-link-custom-icon-padding-block-start: 0;
124
+ $oip-external-link-custom-icon-padding-block-end: 0;
125
+ $oip-external-link-custom-icon-padding-inline-start: 0;
126
+ $oip-external-link-custom-icon-padding-inline-end: 0;
127
+ $oip-external-link-content-color: #000000;
128
+ $oip-external-link-content-font-size: 20px;
129
+ $oip-external-link-content-margin-block-start: 0;
130
+ $oip-external-link-content-margin-block-end: 0;
131
+ $oip-external-link-content-margin-inline-start: 0;
132
+ $oip-external-link-content-margin-inline-end: 0;
133
+ $oip-external-link-content-padding-block-start: 0;
134
+ $oip-external-link-content-padding-block-end: 0;
135
+ $oip-external-link-content-padding-inline-start: 0;
136
+ $oip-external-link-content-padding-inline-end: 0;
137
+ $oip-external-link-arrow-icon-font-size: 16px;
138
+ $oip-external-link-arrow-icon-margin-block-start: 0;
139
+ $oip-external-link-arrow-icon-margin-block-end: 0;
140
+ $oip-external-link-arrow-icon-margin-inline-start: auto; // Make icon align to the relative end inside a flex-box.
141
+ $oip-external-link-arrow-icon-margin-inline-end: 0;
142
+ $oip-external-link-arrow-icon-padding-block-start: 0;
143
+ $oip-external-link-arrow-icon-padding-block-end: 0;
144
+ $oip-external-link-arrow-icon-padding-inline-start: 0;
145
+ $oip-external-link-arrow-icon-padding-inline-end: 0;
92
146
  $oip-fieldset-horizontal-display: flex;
93
147
  $oip-fieldset-horizontal-flex-direction: row;
94
148
  $oip-fieldset-horizontal-gap: 7px;
@@ -307,6 +361,8 @@ $oip-combobox-popover-border-color: $oip-color-fg;
307
361
  $oip-combobox-popover-color: $oip-color-fg;
308
362
  $oip-combobox-popover-listbox-list-option-selected-icon-color: $oip-color-fg;
309
363
  $oip-combobox-icon-color: $oip-color-fg;
364
+ $oip-external-link-border-color: $oip-color-border;
365
+ $oip-external-link-arrow-icon-color: $oip-color-primary;
310
366
  $oip-utrecht-paragraph-muted-color: $oip-color-fg-muted;
311
367
  $denhaag-action-background-color: $oip-color-bg;
312
368
  $denhaag-action-color: $oip-color-fg;
package/dist/css/index.css CHANGED
@@ -91,6 +91,60 @@
91
91
  --oip-combobox-popover-listbox-list-padding-inline-start: 0;
92
92
  --oip-combobox-popover-listbox-list-option-selected-icon-size: 16px;
93
93
  --oip-combobox-icon-size: 16px;
94
+ --oip-external-link-background-color: transparent;
95
+ --oip-external-link-color: #000000;
96
+ --oip-external-link-border-radius: 3px;
97
+ --oip-external-link-border-style: solid;
98
+ --oip-external-link-border-width: 1px;
99
+ --oip-external-link-box-shadow: none;
100
+ --oip-external-link-display: flex;
101
+ --oip-external-link-flex-direction: row;
102
+ --oip-external-link-align-items: center;
103
+ --oip-external-link-row-gap: 8px;
104
+ --oip-external-link-column-gap: 32px;
105
+ --oip-external-link-text-decoration: none;
106
+ --oip-external-link-hover-background-color: #f3f3f3;
107
+ --oip-external-link-hover-text-decoration-thickness: bold;
108
+ --oip-external-link-focus-visible-background-color: #f3f3f3;
109
+ --oip-external-link-focus-visible-text-decoration-thickness: bold;
110
+ --oip-external-link-body-margin-block-start: 0;
111
+ --oip-external-link-body-margin-block-end: 0;
112
+ --oip-external-link-body-margin-inline-start: 0;
113
+ --oip-external-link-body-margin-inline-end: 0;
114
+ --oip-external-link-body-padding-block-start: 24px;
115
+ --oip-external-link-body-padding-block-end: 24px;
116
+ --oip-external-link-body-padding-inline-start: 24px;
117
+ --oip-external-link-body-padding-inline-end: 24px;
118
+ --oip-external-link-custom-icon-color: #000000;
119
+ --oip-external-link-custom-icon-display: inline-block;
120
+ --oip-external-link-custom-icon-font-size: 24px;
121
+ --oip-external-link-custom-icon-margin-block-start: 8px;
122
+ --oip-external-link-custom-icon-margin-block-end: 0;
123
+ --oip-external-link-custom-icon-margin-inline-start: 0;
124
+ --oip-external-link-custom-icon-margin-inline-end: 8px;
125
+ --oip-external-link-custom-icon-padding-block-start: 0;
126
+ --oip-external-link-custom-icon-padding-block-end: 0;
127
+ --oip-external-link-custom-icon-padding-inline-start: 0;
128
+ --oip-external-link-custom-icon-padding-inline-end: 0;
129
+ --oip-external-link-content-color: #000000;
130
+ --oip-external-link-content-font-size: 20px;
131
+ --oip-external-link-content-margin-block-start: 0;
132
+ --oip-external-link-content-margin-block-end: 0;
133
+ --oip-external-link-content-margin-inline-start: 0;
134
+ --oip-external-link-content-margin-inline-end: 0;
135
+ --oip-external-link-content-padding-block-start: 0;
136
+ --oip-external-link-content-padding-block-end: 0;
137
+ --oip-external-link-content-padding-inline-start: 0;
138
+ --oip-external-link-content-padding-inline-end: 0;
139
+ --oip-external-link-arrow-icon-font-size: 16px;
140
+ --oip-external-link-arrow-icon-margin-block-start: 0;
141
+ --oip-external-link-arrow-icon-margin-block-end: 0;
142
+ --oip-external-link-arrow-icon-margin-inline-start: auto; /** Make icon align to the relative end inside a flex-box. */
143
+ --oip-external-link-arrow-icon-margin-inline-end: 0;
144
+ --oip-external-link-arrow-icon-padding-block-start: 0;
145
+ --oip-external-link-arrow-icon-padding-block-end: 0;
146
+ --oip-external-link-arrow-icon-padding-inline-start: 0;
147
+ --oip-external-link-arrow-icon-padding-inline-end: 0;
94
148
  --oip-fieldset-horizontal-display: flex;
95
149
  --oip-fieldset-horizontal-flex-direction: row;
96
150
  --oip-fieldset-horizontal-gap: 7px;
@@ -309,6 +363,8 @@
309
363
  --oip-combobox-popover-color: var(--oip-color-fg);
310
364
  --oip-combobox-popover-listbox-list-option-selected-icon-color: var(--oip-color-fg);
311
365
  --oip-combobox-icon-color: var(--oip-color-fg);
366
+ --oip-external-link-border-color: var(--oip-color-border);
367
+ --oip-external-link-arrow-icon-color: var(--oip-color-primary);
312
368
  --oip-utrecht-paragraph-muted-color: var(--oip-color-fg-muted);
313
369
  --denhaag-action-background-color: var(--oip-color-bg);
314
370
  --denhaag-action-color: var(--oip-color-fg);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@open-inwoner/design-tokens",
3
- "version": "0.0.18",
3
+ "version": "0.0.19",
4
4
  "description": "Design tokens for Open Inwoner",
5
5
  "scripts": {
6
6
  "test": "echo \"Error: no test specified\" && exit 1",
package/src/components/external-link-plugin.tokens.json ADDED
@@ -0,0 +1,77 @@
1
+ {
2
+ "oip": {
3
+ "external-link": {
4
+ "background-color": {"value": "transparent"},
5
+ "color": {"value": "#000000"},
6
+ "border-color": {"value": "{oip.color.border}"},
7
+ "border-radius": {"value": "3px"},
8
+ "border-style": {"value": "solid"},
9
+ "border-width": {"value": "1px"},
10
+ "box-shadow": {"value": "none"},
11
+ "display": {"value": "flex"},
12
+ "flex-direction": {"value": "row"},
13
+ "align-items": {"value": "center"},
14
+ "row-gap": {"value": "8px"},
15
+ "column-gap": {"value": "32px"},
16
+ "text-decoration": {"value": "none"},
17
+ "hover": {
18
+ "background-color": {"value": "#f3f3f3"},
19
+ "text-decoration-thickness": {"value": "bold"}
20
+ },
21
+ "focus-visible": {
22
+ "background-color": {"value": "#f3f3f3"},
23
+ "text-decoration-thickness": {"value": "bold"}
24
+ },
25
+ "body": {
26
+ "margin-block-start": {"value": "0"},
27
+ "margin-block-end": {"value": "0"},
28
+ "margin-inline-start": {"value": "0"},
29
+ "margin-inline-end": {"value": "0"},
30
+ "padding-block-start": {"value": "24px"},
31
+ "padding-block-end": {"value": "24px"},
32
+ "padding-inline-start": {"value": "24px"},
33
+ "padding-inline-end": {"value": "24px"}
34
+ },
35
+ "custom-icon": {
36
+ "color": {"value": "#000000"},
37
+ "display": {"value": "inline-block"},
38
+ "font-size": {"value": "24px"},
39
+ "margin-block-start": {"value": "8px"},
40
+ "margin-block-end": {"value": "0"},
41
+ "margin-inline-start": {"value": "0"},
42
+ "margin-inline-end": {"value": "8px"},
43
+ "padding-block-start": {"value": "0"},
44
+ "padding-block-end": {"value": "0"},
45
+ "padding-inline-start": {"value": "0"},
46
+ "padding-inline-end": {"value": "0"}
47
+ },
48
+ "content": {
49
+ "color": {"value": "#000000"},
50
+ "font-size": {"value": "20px"},
51
+ "margin-block-start": {"value": "0"},
52
+ "margin-block-end": {"value": "0"},
53
+ "margin-inline-start": {"value": "0"},
54
+ "margin-inline-end": {"value": "0"},
55
+ "padding-block-start": {"value": "0"},
56
+ "padding-block-end": {"value": "0"},
57
+ "padding-inline-start": {"value": "0"},
58
+ "padding-inline-end": {"value": "0"}
59
+ },
60
+ "arrow-icon": {
61
+ "color": {"value": "{oip.color.primary}"},
62
+ "font-size": {"value": "16px"},
63
+ "margin-block-start": {"value": "0"},
64
+ "margin-block-end": {"value": "0"},
65
+ "margin-inline-start": {
66
+ "value": "auto",
67
+ "comment": "Make icon align to the relative end inside a flex-box."
68
+ },
69
+ "margin-inline-end": {"value": "0"},
70
+ "padding-block-start": {"value": "0"},
71
+ "padding-block-end": {"value": "0"},
72
+ "padding-inline-start": {"value": "0"},
73
+ "padding-inline-end": {"value": "0"}
74
+ }
75
+ }
76
+ }
77
+ }