@open-inwoner/design-tokens 0.0.17 → 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.
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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-
|
|
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.
|
|
@@ -81,6 +89,60 @@ $oip-combobox-popover-listbox-list-padding-inline-end: 0;
|
|
|
81
89
|
$oip-combobox-popover-listbox-list-padding-inline-start: 0;
|
|
82
90
|
$oip-combobox-popover-listbox-list-option-selected-icon-size: 16px;
|
|
83
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;
|
|
84
146
|
$oip-fieldset-horizontal-display: flex;
|
|
85
147
|
$oip-fieldset-horizontal-flex-direction: row;
|
|
86
148
|
$oip-fieldset-horizontal-gap: 7px;
|
|
@@ -299,6 +361,8 @@ $oip-combobox-popover-border-color: $oip-color-fg;
|
|
|
299
361
|
$oip-combobox-popover-color: $oip-color-fg;
|
|
300
362
|
$oip-combobox-popover-listbox-list-option-selected-icon-color: $oip-color-fg;
|
|
301
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;
|
|
302
366
|
$oip-utrecht-paragraph-muted-color: $oip-color-fg-muted;
|
|
303
367
|
$denhaag-action-background-color: $oip-color-bg;
|
|
304
368
|
$denhaag-action-color: $oip-color-fg;
|
|
@@ -323,6 +387,7 @@ $nl-number-badge-font-family: $oip-typography-sans-serif-font-family;
|
|
|
323
387
|
$nl-number-badge-font-size: $oip-text-font-size;
|
|
324
388
|
$utrecht-button-color: $oip-color-secondary;
|
|
325
389
|
$utrecht-button-font-size: $oip-text-font-size;
|
|
390
|
+
$utrecht-button-font-family: $oip-typography-sans-serif-font-family;
|
|
326
391
|
$utrecht-button-line-height: $oip-text-line-height;
|
|
327
392
|
$utrecht-button-focus-color: $oip-color-secondary;
|
|
328
393
|
$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:
|
|
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:
|
|
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:
|
|
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:
|
|
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-
|
|
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. */
|
|
@@ -83,6 +91,60 @@
|
|
|
83
91
|
--oip-combobox-popover-listbox-list-padding-inline-start: 0;
|
|
84
92
|
--oip-combobox-popover-listbox-list-option-selected-icon-size: 16px;
|
|
85
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;
|
|
86
148
|
--oip-fieldset-horizontal-display: flex;
|
|
87
149
|
--oip-fieldset-horizontal-flex-direction: row;
|
|
88
150
|
--oip-fieldset-horizontal-gap: 7px;
|
|
@@ -301,6 +363,8 @@
|
|
|
301
363
|
--oip-combobox-popover-color: var(--oip-color-fg);
|
|
302
364
|
--oip-combobox-popover-listbox-list-option-selected-icon-color: var(--oip-color-fg);
|
|
303
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);
|
|
304
368
|
--oip-utrecht-paragraph-muted-color: var(--oip-color-fg-muted);
|
|
305
369
|
--denhaag-action-background-color: var(--oip-color-bg);
|
|
306
370
|
--denhaag-action-color: var(--oip-color-fg);
|
|
@@ -325,6 +389,7 @@
|
|
|
325
389
|
--nl-number-badge-font-size: var(--oip-text-font-size);
|
|
326
390
|
--utrecht-button-color: var(--oip-color-secondary);
|
|
327
391
|
--utrecht-button-font-size: var(--oip-text-font-size);
|
|
392
|
+
--utrecht-button-font-family: var(--oip-typography-sans-serif-font-family);
|
|
328
393
|
--utrecht-button-line-height: var(--oip-text-line-height);
|
|
329
394
|
--utrecht-button-focus-color: var(--oip-color-secondary);
|
|
330
395
|
--utrecht-button-hover-color: var(--oip-color-secondary);
|
package/package.json
CHANGED
|
@@ -7,8 +7,8 @@
|
|
|
7
7
|
}
|
|
8
8
|
},
|
|
9
9
|
"primary": {
|
|
10
|
-
"value": "
|
|
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": "
|
|
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": "
|
|
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": "
|
|
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%
|
|
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",
|
|
@@ -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"},
|
|
@@ -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
|
+
}
|