@open-inwoner/design-tokens 0.0.17 → 0.0.18

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 (5) hide show
  1. package/dist/_variables.scss +16 -7
  2. package/dist/css/index.css +16 -7
  3. package/package.json +1 -1
  4. package/src/brand/openinwoner/color.tokens.json +42 -10
  5. package/src/community/utrecht/button.tokens.json +1 -0
package/dist/_variables.scss CHANGED
@@ -1,18 +1,23 @@
1
1
 
2
2
  // Do not edit directly, this file was auto-generated.
3
3
 
4
- $oip-color-primary: #0065BD; // The primary color makes up a large part of the theme, it is used in buttons for example.
4
+ $oip-color-primary: hsl(var(--oip-color-primary-h), var(--oip-color-primary-s), var(--oip-color-primary-l)); // The primary color #0065BD makes up a large part of the theme, it is used in buttons for example.
5
5
  $oip-color-primary-h: 210; // Primary color hue value
6
6
  $oip-color-primary-s: 100%; // Primary color saturation value
7
7
  $oip-color-primary-l: 37%; // Primary color lightness value
8
8
  $oip-color-primary-lighter: hsl(var(--oip-color-primary-h), var(--oip-color-primary-s), calc(var(--oip-color-primary-l) + 30%)); // Lighter version of primary color
9
9
  $oip-color-primary-darker: hsl(var(--oip-color-primary-h), var(--oip-color-primary-s), calc(var(--oip-color-primary-l) - 10%)); // Darker version of primary color
10
- $oip-color-secondary: #006A0F; // The secondary compliments the primary color and serves as the default for text-links.
10
+ $oip-color-secondary: hsl(var(--oip-color-secondary-h), var(--oip-color-secondary-s), var(--oip-color-secondary-l)); // The secondary color #006A0F compliments the primary color and serves as the default for text-links.
11
11
  $oip-color-secondary-h: 207; // Secondary color hue value
12
12
  $oip-color-secondary-s: 80%; // Secondary color saturation value
13
13
  $oip-color-secondary-l: 35%; // Secondary color lightness value
14
14
  $oip-color-secondary-darker: hsl(var(--oip-color-secondary-h), var(--oip-color-secondary-s), calc(var(--oip-color-secondary-l) - 10%)); // Darker version of secondary color
15
- $oip-color-accent: #E10019; // The accent color is usually the main identity color for a municipality
15
+ $oip-color-accent: hsl(var(--oip-color-accent-h), var(--oip-color-accent-s), var(--oip-color-accent-l)); // The accent color #E10019 is usually the main identity color for a municipality
16
+ $oip-color-accent-h: 50; // Accent color hue value
17
+ $oip-color-accent-s: 94%; // Accent color saturation value
18
+ $oip-color-accent-l: 57%; // Accent color lightness value
19
+ $oip-color-accent-darker: hsl(var(--oip-color-accent-h), var(--oip-color-accent-s), calc(var(--oip-color-accent-l) - 10%)); // Darker version of accent color
20
+ $oip-color-accent-lighter: hsl(var(--oip-color-accent-h), var(--oip-color-accent-s), calc(var(--oip-color-accent-l) + 10%)); // Lighter version of accent color
16
21
  $oip-color-info: #2566A7; // The dark blue text color for informational states and/or messages.
17
22
  $oip-color-info-light: #D5E6F6; // The light blue background color for informational states and/or messages.
18
23
  $oip-color-success: #4A7746; // The dark green text color for success states and/or messages.
@@ -23,13 +28,16 @@ $oip-color-danger: #5c000f; // The dark red text color for error/critical states
23
28
  $oip-color-danger-h: 34; // Danger color hue value
24
29
  $oip-color-danger-s: 100%; // Danger color saturation value
25
30
  $oip-color-danger-l: 27%; // Danger color lightness value
26
- $oip-color-danger-light: #ffdbe1; // The light red background color for error/critical states and/or messages.
31
+ $oip-color-danger-light: hsl(var(--oip-color-danger-h), var(--oip-color-danger-s), calc(var(--oip-color-danger-l) + 13%)); // The light red background color for error/critical states and/or messages.
27
32
  $oip-color-danger-lightest: hsl(var(--oip-color-danger-h), var(--oip-color-danger-s), calc(var(--oip-color-danger-l) + 57%)); // Lightest version of danger color
28
33
  $oip-color-bg: #ffffff; // Background color for the (main) user interface.
29
- $oip-color-fg: #4b4b4b; // Blackish foreground color for the (main) user interface.
30
- $oip-color-fg-lighter: #676767; // Blackish 90% grey foreground color for lighter text elements (eg date).
34
+ $oip-color-fg: #4b4b4b; // Blackish/gray-dark foreground color for the (main) user interface.
35
+ $oip-color-fg-font-primary: #ffffff; // White font color for texts inside primary buttons.
36
+ $oip-color-fg-font-secondary: #ffffff; // White font color for texts inside secondary buttons.
37
+ $oip-color-fg-font-accent: #4b4b4b; // Dark gray font color for texts inside areas with a very light accent color as a light background-color.
38
+ $oip-color-fg-lighter: #676767; // Blackish 90% gray foreground color for lighter text elements (eg date).
31
39
  $oip-color-fg-muted: #949494; // Font/foreground color for non-actionable or less-important content.
32
- $oip-color-fg-heading: #000000; // Black foreground color for fully black elements.
40
+ $oip-color-fg-heading: #000000; // Black foreground color for fully black elements, like headings.
33
41
  $oip-color-border: #d2d2d2; // Default color for borders.
34
42
  $oip-color-gray: #d2d2d2; // Default 80% gray for borders.
35
43
  $oip-color-gray-lighter: #7a7a7a; // Default light-gray for table text.
@@ -323,6 +331,7 @@ $nl-number-badge-font-family: $oip-typography-sans-serif-font-family;
323
331
  $nl-number-badge-font-size: $oip-text-font-size;
324
332
  $utrecht-button-color: $oip-color-secondary;
325
333
  $utrecht-button-font-size: $oip-text-font-size;
334
+ $utrecht-button-font-family: $oip-typography-sans-serif-font-family;
326
335
  $utrecht-button-line-height: $oip-text-line-height;
327
336
  $utrecht-button-focus-color: $oip-color-secondary;
328
337
  $utrecht-button-hover-color: $oip-color-secondary;
package/dist/css/index.css CHANGED
@@ -3,18 +3,23 @@
3
3
  */
4
4
 
5
5
  .openinwoner-theme {
6
- --oip-color-primary: #0065BD; /** The primary color makes up a large part of the theme, it is used in buttons for example. */
6
+ --oip-color-primary: hsl(var(--oip-color-primary-h), var(--oip-color-primary-s), var(--oip-color-primary-l)); /** The primary color #0065BD makes up a large part of the theme, it is used in buttons for example. */
7
7
  --oip-color-primary-h: 210; /** Primary color hue value */
8
8
  --oip-color-primary-s: 100%; /** Primary color saturation value */
9
9
  --oip-color-primary-l: 37%; /** Primary color lightness value */
10
10
  --oip-color-primary-lighter: hsl(var(--oip-color-primary-h), var(--oip-color-primary-s), calc(var(--oip-color-primary-l) + 30%)); /** Lighter version of primary color */
11
11
  --oip-color-primary-darker: hsl(var(--oip-color-primary-h), var(--oip-color-primary-s), calc(var(--oip-color-primary-l) - 10%)); /** Darker version of primary color */
12
- --oip-color-secondary: #006A0F; /** The secondary compliments the primary color and serves as the default for text-links. */
12
+ --oip-color-secondary: hsl(var(--oip-color-secondary-h), var(--oip-color-secondary-s), var(--oip-color-secondary-l)); /** The secondary color #006A0F compliments the primary color and serves as the default for text-links. */
13
13
  --oip-color-secondary-h: 207; /** Secondary color hue value */
14
14
  --oip-color-secondary-s: 80%; /** Secondary color saturation value */
15
15
  --oip-color-secondary-l: 35%; /** Secondary color lightness value */
16
16
  --oip-color-secondary-darker: hsl(var(--oip-color-secondary-h), var(--oip-color-secondary-s), calc(var(--oip-color-secondary-l) - 10%)); /** Darker version of secondary color */
17
- --oip-color-accent: #E10019; /** The accent color is usually the main identity color for a municipality */
17
+ --oip-color-accent: hsl(var(--oip-color-accent-h), var(--oip-color-accent-s), var(--oip-color-accent-l)); /** The accent color #E10019 is usually the main identity color for a municipality */
18
+ --oip-color-accent-h: 50; /** Accent color hue value */
19
+ --oip-color-accent-s: 94%; /** Accent color saturation value */
20
+ --oip-color-accent-l: 57%; /** Accent color lightness value */
21
+ --oip-color-accent-darker: hsl(var(--oip-color-accent-h), var(--oip-color-accent-s), calc(var(--oip-color-accent-l) - 10%)); /** Darker version of accent color */
22
+ --oip-color-accent-lighter: hsl(var(--oip-color-accent-h), var(--oip-color-accent-s), calc(var(--oip-color-accent-l) + 10%)); /** Lighter version of accent color */
18
23
  --oip-color-info: #2566A7; /** The dark blue text color for informational states and/or messages. */
19
24
  --oip-color-info-light: #D5E6F6; /** The light blue background color for informational states and/or messages. */
20
25
  --oip-color-success: #4A7746; /** The dark green text color for success states and/or messages. */
@@ -25,13 +30,16 @@
25
30
  --oip-color-danger-h: 34; /** Danger color hue value */
26
31
  --oip-color-danger-s: 100%; /** Danger color saturation value */
27
32
  --oip-color-danger-l: 27%; /** Danger color lightness value */
28
- --oip-color-danger-light: #ffdbe1; /** The light red background color for error/critical states and/or messages. */
33
+ --oip-color-danger-light: hsl(var(--oip-color-danger-h), var(--oip-color-danger-s), calc(var(--oip-color-danger-l) + 13%)); /** The light red background color for error/critical states and/or messages. */
29
34
  --oip-color-danger-lightest: hsl(var(--oip-color-danger-h), var(--oip-color-danger-s), calc(var(--oip-color-danger-l) + 57%)); /** Lightest version of danger color */
30
35
  --oip-color-bg: #ffffff; /** Background color for the (main) user interface. */
31
- --oip-color-fg: #4b4b4b; /** Blackish foreground color for the (main) user interface. */
32
- --oip-color-fg-lighter: #676767; /** Blackish 90% grey foreground color for lighter text elements (eg date). */
36
+ --oip-color-fg: #4b4b4b; /** Blackish/gray-dark foreground color for the (main) user interface. */
37
+ --oip-color-fg-font-primary: #ffffff; /** White font color for texts inside primary buttons. */
38
+ --oip-color-fg-font-secondary: #ffffff; /** White font color for texts inside secondary buttons. */
39
+ --oip-color-fg-font-accent: #4b4b4b; /** Dark gray font color for texts inside areas with a very light accent color as a light background-color. */
40
+ --oip-color-fg-lighter: #676767; /** Blackish 90% gray foreground color for lighter text elements (eg date). */
33
41
  --oip-color-fg-muted: #949494; /** Font/foreground color for non-actionable or less-important content. */
34
- --oip-color-fg-heading: #000000; /** Black foreground color for fully black elements. */
42
+ --oip-color-fg-heading: #000000; /** Black foreground color for fully black elements, like headings. */
35
43
  --oip-color-border: #d2d2d2; /** Default color for borders. */
36
44
  --oip-color-gray: #d2d2d2; /** Default 80% gray for borders. */
37
45
  --oip-color-gray-lighter: #7a7a7a; /** Default light-gray for table text. */
@@ -325,6 +333,7 @@
325
333
  --nl-number-badge-font-size: var(--oip-text-font-size);
326
334
  --utrecht-button-color: var(--oip-color-secondary);
327
335
  --utrecht-button-font-size: var(--oip-text-font-size);
336
+ --utrecht-button-font-family: var(--oip-typography-sans-serif-font-family);
328
337
  --utrecht-button-line-height: var(--oip-text-line-height);
329
338
  --utrecht-button-focus-color: var(--oip-color-secondary);
330
339
  --utrecht-button-hover-color: var(--oip-color-secondary);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@open-inwoner/design-tokens",
3
- "version": "0.0.17",
3
+ "version": "0.0.18",
4
4
  "description": "Design tokens for Open Inwoner",
5
5
  "scripts": {
6
6
  "test": "echo \"Error: no test specified\" && exit 1",
package/src/brand/openinwoner/color.tokens.json CHANGED
@@ -7,8 +7,8 @@
7
7
  }
8
8
  },
9
9
  "primary": {
10
- "value": "#0065BD",
11
- "comment": "The primary color makes up a large part of the theme, it is used in buttons for example.",
10
+ "value": "hsl(var(--oip-color-primary-h), var(--oip-color-primary-s), var(--oip-color-primary-l))",
11
+ "comment": "The primary color #0065BD makes up a large part of the theme, it is used in buttons for example.",
12
12
  "$extensions": {
13
13
  "dte.metadata": {
14
14
  "isCurated": true,
@@ -37,8 +37,8 @@
37
37
  "comment": "Darker version of primary color"
38
38
  },
39
39
  "secondary": {
40
- "value": "#006A0F",
41
- "comment": "The secondary compliments the primary color and serves as the default for text-links.",
40
+ "value": "hsl(var(--oip-color-secondary-h), var(--oip-color-secondary-s), var(--oip-color-secondary-l))",
41
+ "comment": "The secondary color #006A0F compliments the primary color and serves as the default for text-links.",
42
42
  "$extensions": {
43
43
  "dte.metadata": {
44
44
  "isCurated": true,
@@ -63,8 +63,8 @@
63
63
  "comment": "Darker version of secondary color"
64
64
  },
65
65
  "accent": {
66
- "value": "#E10019",
67
- "comment": "The accent color is usually the main identity color for a municipality",
66
+ "value": "hsl(var(--oip-color-accent-h), var(--oip-color-accent-s), var(--oip-color-accent-l))",
67
+ "comment": "The accent color #E10019 is usually the main identity color for a municipality",
68
68
  "$extensions": {
69
69
  "dte.metadata": {
70
70
  "isCurated": true,
@@ -72,6 +72,26 @@
72
72
  }
73
73
  }
74
74
  },
75
+ "accent-h": {
76
+ "value": "50",
77
+ "comment": "Accent color hue value"
78
+ },
79
+ "accent-s": {
80
+ "value": "94%",
81
+ "comment": "Accent color saturation value"
82
+ },
83
+ "accent-l": {
84
+ "value": "57%",
85
+ "comment": "Accent color lightness value"
86
+ },
87
+ "accent-darker": {
88
+ "value": "hsl(var(--oip-color-accent-h), var(--oip-color-accent-s), calc(var(--oip-color-accent-l) - 10%))",
89
+ "comment": "Darker version of accent color"
90
+ },
91
+ "accent-lighter": {
92
+ "value": "hsl(var(--oip-color-accent-h), var(--oip-color-accent-s), calc(var(--oip-color-accent-l) + 10%))",
93
+ "comment": "Lighter version of accent color"
94
+ },
75
95
  "info": {
76
96
  "value": "#2566A7",
77
97
  "comment": "The dark blue text color for informational states and/or messages.",
@@ -125,7 +145,7 @@
125
145
  "comment": "Danger color lightness value"
126
146
  },
127
147
  "danger-light": {
128
- "value": "#ffdbe1",
148
+ "value": "hsl(var(--oip-color-danger-h), var(--oip-color-danger-s), calc(var(--oip-color-danger-l) + 13%))",
129
149
  "comment": "The light red background color for error/critical states and/or messages."
130
150
  },
131
151
  "danger-lightest": {
@@ -138,11 +158,23 @@
138
158
  },
139
159
  "fg": {
140
160
  "value": "#4b4b4b",
141
- "comment": "Blackish foreground color for the (main) user interface."
161
+ "comment": "Blackish/gray-dark foreground color for the (main) user interface."
162
+ },
163
+ "fg-font-primary": {
164
+ "value": "#ffffff",
165
+ "comment": "White font color for texts inside primary buttons."
166
+ },
167
+ "fg-font-secondary": {
168
+ "value": "#ffffff",
169
+ "comment": "White font color for texts inside secondary buttons."
170
+ },
171
+ "fg-font-accent": {
172
+ "value": "#4b4b4b",
173
+ "comment": "Dark gray font color for texts inside areas with a very light accent color as a light background-color."
142
174
  },
143
175
  "fg-lighter": {
144
176
  "value": "#676767",
145
- "comment": "Blackish 90% grey foreground color for lighter text elements (eg date)."
177
+ "comment": "Blackish 90% gray foreground color for lighter text elements (eg date)."
146
178
  },
147
179
  "fg-muted": {
148
180
  "value": "#949494",
@@ -150,7 +182,7 @@
150
182
  },
151
183
  "fg-heading": {
152
184
  "value": "#000000",
153
- "comment": "Black foreground color for fully black elements."
185
+ "comment": "Black foreground color for fully black elements, like headings."
154
186
  },
155
187
  "border": {
156
188
  "value": "#d2d2d2",
package/src/community/utrecht/button.tokens.json CHANGED
@@ -8,6 +8,7 @@
8
8
  "color": {"value": "{oip.color.secondary}"},
9
9
  "cursor": {"value": "pointer"},
10
10
  "font-size": {"value": "{oip.text.font-size}"},
11
+ "font-family": {"value": "{oip.typography.sans-serif.font-family}"},
11
12
  "line-height": {"value": "{oip.text.line-height}"},
12
13
  "min-block-size": {"value": "0"},
13
14
  "min-inline-size": {"value": "0"},