@helsenorge/designsystem-react 12.5.0 → 12.7.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.
- package/CHANGELOG.md +40 -0
- package/FormFieldTag.js +48 -0
- package/FormFieldTag.js.map +1 -0
- package/FormGroup.js +11 -3
- package/FormGroup.js.map +1 -1
- package/Label.js +3 -0
- package/Label.js.map +1 -1
- package/components/FormFieldTag/FormFieldTag.d.ts +15 -0
- package/components/FormFieldTag/FormFieldTag.test.d.ts +1 -0
- package/components/FormFieldTag/index.d.ts +3 -0
- package/components/FormFieldTag/index.js +5 -0
- package/components/FormFieldTag/index.js.map +1 -0
- package/components/FormFieldTag/resourceHelper.d.ts +3 -0
- package/components/FormFieldTag/styles.module.scss +23 -0
- package/components/FormFieldTag/styles.module.scss.d.ts +10 -0
- package/components/FormGroup/FormGroup.d.ts +2 -0
- package/components/FormGroup/styles.module.scss +3 -0
- package/components/Label/Label.d.ts +2 -0
- package/components/StickyNote/Close.d.ts +11 -0
- package/components/StickyNote/Triangle.d.ts +5 -1
- package/components/StickyNote/index.js +100 -49
- package/components/StickyNote/index.js.map +1 -1
- package/components/StickyNote/styles.module.scss +106 -34
- package/components/StickyNote/styles.module.scss.d.ts +6 -1
- package/constants.d.ts +1 -0
- package/constants.js +1 -0
- package/constants.js.map +1 -1
- package/designsystem-react.css +136 -98
- package/package.json +1 -1
- package/resources/HN.Designsystem.FormFieldTag.nb-NO.json.d.ts +8 -0
- package/scss/supernova/styles/colors.css +136 -98
- package/scss/supernova/styles/typography.css +2 -2
|
@@ -8,93 +8,8 @@
|
|
|
8
8
|
*/
|
|
9
9
|
|
|
10
10
|
:root {
|
|
11
|
-
--core-color-black: #000000;
|
|
12
|
-
--core-color-white: #ffffff;
|
|
13
|
-
--core-color-blueberry-50: #e4f7f9;
|
|
14
|
-
--core-color-neutral-500: #989693;
|
|
15
|
-
--core-color-neutral-700: #62625f;
|
|
16
|
-
--color-action-text-ondark: #ffffff;
|
|
17
|
-
|
|
18
|
-
/* Hoverfarge for bakgrunn på interaktive elementer - onLight */
|
|
19
|
-
--color-action-background-transparent-onlight-hover: #126f8721;
|
|
20
|
-
|
|
21
|
-
/* Hoverfarge for bakgrunn på interaktive elementer - onLight selected */
|
|
22
|
-
--color-action-background-transparent-onlight-hoverselected: #126f872b;
|
|
23
|
-
--color-notification-background-info: #e4f7f9;
|
|
24
|
-
--color-notification-background-error: #fff2ea;
|
|
25
|
-
--color-destructive-graphics-normal: #c83521;
|
|
26
|
-
--color-base-text-onlight: #000000;
|
|
27
|
-
--color-action-background-ondark: #ffffff;
|
|
28
|
-
--color-action-border-ondark: #ffffff;
|
|
29
|
-
--color-action-border-ondark-focus: #ffffff;
|
|
30
|
-
--color-action-graphics-ondark: #ffffff;
|
|
31
|
-
--color-base-text-ondark: #ffffff;
|
|
32
|
-
--color-base-background-neutral: #f5f3f3;
|
|
33
|
-
--color-base-background-white: #ffffff;
|
|
34
|
-
--color-base-graphics-ondark: #ffffff;
|
|
35
|
-
--color-disabled-text-ondark: #ffffff;
|
|
36
|
-
--color-action-border-onlight: #188097;
|
|
37
|
-
--color-action-border-onlight-hover: #08667c;
|
|
38
|
-
--color-action-border-onlight-focus: #000000;
|
|
39
|
-
--color-action-text-onlight: #126f87;
|
|
40
|
-
--color-action-text-onlight-hover: #08667c;
|
|
41
11
|
--color-action-graphics-onlight: #188097;
|
|
42
12
|
--color-action-graphics-onlight-hover: #126f87;
|
|
43
|
-
--color-action-graphics-ondark-hover: #e4f7f9;
|
|
44
|
-
--color-action-background-ondark-hover: #e4f7f9;
|
|
45
|
-
--color-action-background-ondark-selected: #cae7ed;
|
|
46
|
-
--color-action-background-ondark-hoverselected: #afdae3;
|
|
47
|
-
--color-action-background-onlight: #188097;
|
|
48
|
-
--color-action-background-onlight-hover: #08667c;
|
|
49
|
-
--color-notification-background-warning: #fdf8df;
|
|
50
|
-
--color-notification-background-success: #e6f8ee;
|
|
51
|
-
--color-notification-border-info: #08667c;
|
|
52
|
-
--color-notification-border-error: #a31f0e;
|
|
53
|
-
--color-notification-border-warning: #ab7c00;
|
|
54
|
-
--color-notification-border-success: #078141;
|
|
55
|
-
--color-notification-graphics-info: #08667c;
|
|
56
|
-
--color-notification-graphics-error: #a31f0e;
|
|
57
|
-
--color-notification-graphics-warning: #ab7c00;
|
|
58
|
-
--color-notification-graphics-success: #078141;
|
|
59
|
-
--color-notification-status-warning: #ebc840;
|
|
60
|
-
--color-notification-status-success: #099150;
|
|
61
|
-
--color-destructive-graphics-hover: #b62e1c;
|
|
62
|
-
--color-destructive-text-normal: #b62e1c;
|
|
63
|
-
--color-destructive-text-hover: #a31f0e;
|
|
64
|
-
--color-disabled-background: #d6d4d3;
|
|
65
|
-
--color-disabled-text: #62625f;
|
|
66
|
-
--color-disabled-border: #7d7c79;
|
|
67
|
-
--color-disabled-graphics: #62625f;
|
|
68
|
-
--color-disabled-border-ondark: #d6d4d3;
|
|
69
|
-
--color-disabled-graphics-ondark: #d6d4d3;
|
|
70
|
-
--color-base-background-blueberry: #e4f7f9;
|
|
71
|
-
--color-base-background-cherry: #fff2ea;
|
|
72
|
-
--color-base-background-dark-blueberry: #188097;
|
|
73
|
-
--color-base-background-dark-cherry: #c83521;
|
|
74
|
-
--color-base-graphics-onlight: #000000;
|
|
75
|
-
--color-base-border-ondark: #d6d4d3;
|
|
76
|
-
--color-base-border-onlight: #7d7c79;
|
|
77
|
-
--color-base-border-onlight-emphasized: #62625f;
|
|
78
|
-
--color-help-background-normal: #f4ecfe;
|
|
79
|
-
--color-help-graphics-normal: #5b22a6;
|
|
80
|
-
--color-help-border-normal: #5b22a6;
|
|
81
|
-
--core-color-blueberry-100: #cae7ed;
|
|
82
|
-
--core-color-blueberry-200: #afdae3;
|
|
83
|
-
--core-color-blueberry-300: #7abecc;
|
|
84
|
-
--core-color-blueberry-400: #58aabb;
|
|
85
|
-
--core-color-blueberry-500: #188097;
|
|
86
|
-
--core-color-blueberry-600: #126f87;
|
|
87
|
-
--core-color-blueberry-700: #08667c;
|
|
88
|
-
--core-color-blueberry-800: #06596c;
|
|
89
|
-
--core-color-blueberry-900: #084350;
|
|
90
|
-
--core-color-neutral-50: #f5f3f3;
|
|
91
|
-
--core-color-neutral-100: #eae7e7;
|
|
92
|
-
--core-color-neutral-200: #d6d4d3;
|
|
93
|
-
--core-color-neutral-300: #bdbab9;
|
|
94
|
-
--core-color-neutral-400: #aaa8a6;
|
|
95
|
-
--core-color-neutral-600: #7d7c79;
|
|
96
|
-
--core-color-neutral-800: #474745;
|
|
97
|
-
--core-color-neutral-900: #2b2c2b;
|
|
98
13
|
--core-color-banana-50: #fdf8df;
|
|
99
14
|
--core-color-banana-100: #fcf2bf;
|
|
100
15
|
--core-color-banana-200: #f9ea9f;
|
|
@@ -105,6 +20,16 @@
|
|
|
105
20
|
--core-color-banana-700: #ab7c00;
|
|
106
21
|
--core-color-banana-800: #916500;
|
|
107
22
|
--core-color-banana-900: #764f00;
|
|
23
|
+
--core-color-blueberry-50: #e4f7f9;
|
|
24
|
+
--core-color-blueberry-100: #cae7ed;
|
|
25
|
+
--core-color-blueberry-200: #afdae3;
|
|
26
|
+
--core-color-blueberry-300: #7abecc;
|
|
27
|
+
--core-color-blueberry-400: #58aabb;
|
|
28
|
+
--core-color-blueberry-500: #188097;
|
|
29
|
+
--core-color-blueberry-600: #126f87;
|
|
30
|
+
--core-color-blueberry-700: #08667c;
|
|
31
|
+
--core-color-blueberry-800: #06596c;
|
|
32
|
+
--core-color-blueberry-900: #084350;
|
|
108
33
|
--core-color-cherry-50: #fff2ea;
|
|
109
34
|
--core-color-cherry-100: #f7e1d2;
|
|
110
35
|
--core-color-cherry-200: #eec0a5;
|
|
@@ -125,6 +50,16 @@
|
|
|
125
50
|
--core-color-kiwi-700: #0ca161;
|
|
126
51
|
--core-color-kiwi-800: #099150;
|
|
127
52
|
--core-color-kiwi-900: #078141;
|
|
53
|
+
--core-color-neutral-50: #f5f3f3;
|
|
54
|
+
--core-color-neutral-100: #eae7e7;
|
|
55
|
+
--core-color-neutral-200: #d6d4d3;
|
|
56
|
+
--core-color-neutral-300: #bdbab9;
|
|
57
|
+
--core-color-neutral-400: #aaa8a6;
|
|
58
|
+
--core-color-neutral-500: #989693;
|
|
59
|
+
--core-color-neutral-600: #7d7c79;
|
|
60
|
+
--core-color-neutral-700: #62625f;
|
|
61
|
+
--core-color-neutral-800: #474745;
|
|
62
|
+
--core-color-neutral-900: #2b2c2b;
|
|
128
63
|
--core-color-plum-50: #f4ecfe;
|
|
129
64
|
--core-color-plum-100: #e5d5fb;
|
|
130
65
|
--core-color-plum-200: #cfb1f6;
|
|
@@ -135,8 +70,84 @@
|
|
|
135
70
|
--core-color-plum-700: #5c27a1;
|
|
136
71
|
--core-color-plum-800: #4c1b8c;
|
|
137
72
|
--core-color-plum-900: #3c1471;
|
|
73
|
+
--core-color-black: #000000;
|
|
74
|
+
--core-color-white: #ffffff;
|
|
75
|
+
--color-action-border-ondark: #ffffff;
|
|
76
|
+
--color-action-text-ondark: #ffffff;
|
|
77
|
+
--color-action-graphics-ondark: #ffffff;
|
|
78
|
+
--color-notification-background-info: #e4f7f9;
|
|
79
|
+
--color-notification-background-error: #fff2ea;
|
|
80
|
+
--color-notification-background-warning: #fdf8df;
|
|
81
|
+
--color-notification-background-success: #e6f8ee;
|
|
82
|
+
--color-notification-border-info: #08667c;
|
|
83
|
+
--color-notification-border-error: #a31f0e;
|
|
84
|
+
--color-notification-border-warning: #ab7c00;
|
|
85
|
+
--color-notification-border-success: #078141;
|
|
86
|
+
--color-notification-graphics-info: #08667c;
|
|
87
|
+
--color-notification-graphics-error: #a31f0e;
|
|
88
|
+
--color-notification-graphics-warning: #ab7c00;
|
|
89
|
+
--color-notification-graphics-success: #078141;
|
|
90
|
+
--color-notification-status-info: #188097;
|
|
91
|
+
--color-notification-status-error: #c83521;
|
|
92
|
+
--color-notification-status-warning: #ebc840;
|
|
93
|
+
--color-notification-status-success: #099150;
|
|
94
|
+
--color-disabled-background: #d6d4d3;
|
|
95
|
+
--color-disabled-text: #62625f;
|
|
96
|
+
--color-disabled-border: #7d7c79;
|
|
138
97
|
--color-destructive-background-emphasized: #f7e1d2;
|
|
139
98
|
--color-destructive-background-normal: #fff2ea;
|
|
99
|
+
--color-destructive-graphics-normal: #c83521;
|
|
100
|
+
--color-destructive-graphics-hover: #b62e1c;
|
|
101
|
+
--color-destructive-text-normal: #b62e1c;
|
|
102
|
+
--color-destructive-text-hover: #a31f0e;
|
|
103
|
+
--color-help-background-normal: #f4ecfe;
|
|
104
|
+
--color-help-graphics-normal: #5c27a1;
|
|
105
|
+
--color-help-border-normal: #5c27a1;
|
|
106
|
+
--color-disabled-graphics: #62625f;
|
|
107
|
+
--color-destructive-border-normal: #c83521;
|
|
108
|
+
--color-action-border-ondark-hover: #e4f7f9;
|
|
109
|
+
--color-action-graphics-ondark-hover: #e4f7f9;
|
|
110
|
+
|
|
111
|
+
/* Hoverfarge for bakgrunn på interaktive elementer - onLight */
|
|
112
|
+
--color-action-background-transparent-onlight-hover: #126f8721;
|
|
113
|
+
|
|
114
|
+
/* Hoverfarge for bakgrunn på interaktive elementer - onLight selected */
|
|
115
|
+
--color-action-background-transparent-onlight-hoverselected: #126f872b;
|
|
116
|
+
--color-action-border-ondark-focus: #ffffff;
|
|
117
|
+
--color-disabled-border-ondark: #d6d4d3;
|
|
118
|
+
--color-disabled-graphics-ondark: #d6d4d3;
|
|
119
|
+
--color-disabled-text-ondark: #ffffff;
|
|
120
|
+
--color-action-text-onlight: #126f87;
|
|
121
|
+
--color-action-text-onlight-hover: #08667c;
|
|
122
|
+
--color-action-border-onlight: #188097;
|
|
123
|
+
--color-action-border-onlight-hover: #08667c;
|
|
124
|
+
--color-action-border-onlight-focus: #000000;
|
|
125
|
+
--color-action-background-ondark: #ffffff;
|
|
126
|
+
--color-action-background-ondark-hover: #e4f7f9;
|
|
127
|
+
--color-action-background-ondark-selected: #cae7ed;
|
|
128
|
+
--color-action-background-ondark-hoverselected: #afdae3;
|
|
129
|
+
--color-action-background-onlight: #188097;
|
|
130
|
+
--color-action-background-onlight-hover: #08667c;
|
|
131
|
+
|
|
132
|
+
/* Hoverfarge for bakgrunn på interaktive elementer - onDark */
|
|
133
|
+
--color-action-background-transparent-ondark-hover: #00000026;
|
|
134
|
+
|
|
135
|
+
/* Hoverfarge for bakgrunn på interaktive elementer - onDark selected */
|
|
136
|
+
--color-action-background-transparent-ondark-hoverselected: #000000bf;
|
|
137
|
+
--color-base-background-blueberry: #e4f7f9;
|
|
138
|
+
--color-base-background-cherry: #fff2ea;
|
|
139
|
+
--color-base-background-neutral: #f5f3f3;
|
|
140
|
+
--color-base-background-white: #ffffff;
|
|
141
|
+
--color-base-background-dark-blueberry: #188097;
|
|
142
|
+
--color-base-background-dark-cherry: #c83521;
|
|
143
|
+
--color-base-background-dark-neutral: #2b2c2b;
|
|
144
|
+
--color-base-text-onlight: #000000;
|
|
145
|
+
--color-base-text-ondark: #ffffff;
|
|
146
|
+
--color-base-border-ondark: #d6d4d3;
|
|
147
|
+
--color-base-border-onlight: #7d7c79;
|
|
148
|
+
--color-base-border-onlight-emphasized: #62625f;
|
|
149
|
+
--color-base-graphics-onlight: #000000;
|
|
150
|
+
--color-base-graphics-ondark: #ffffff;
|
|
140
151
|
--brandcolor-white: #ffffff;
|
|
141
152
|
--brandcolor-black: #000000;
|
|
142
153
|
--brandcolor-neutral-verylight: #f5f3f3;
|
|
@@ -156,17 +167,6 @@
|
|
|
156
167
|
--brandcolor-cherry-medium: #c83521;
|
|
157
168
|
--brandcolor-cherry-mediumdark: #b62e1c;
|
|
158
169
|
--brandcolor-cherry-dark: #a31f0e;
|
|
159
|
-
--color-notification-status-info: #188097;
|
|
160
|
-
--color-notification-status-error: #c83521;
|
|
161
|
-
--color-destructive-border-normal: #c83521;
|
|
162
|
-
--color-action-border-ondark-hover: #e4f7f9;
|
|
163
|
-
|
|
164
|
-
/* Hoverfarge for bakgrunn på interaktive elementer - onDark */
|
|
165
|
-
--color-action-background-transparent-ondark-hover: #00000026;
|
|
166
|
-
|
|
167
|
-
/* Hoverfarge for bakgrunn på interaktive elementer - onDark selected */
|
|
168
|
-
--color-action-background-transparent-ondark-hoverselected: #000000bf;
|
|
169
|
-
--color-base-background-dark-neutral: #2b2c2b;
|
|
170
170
|
|
|
171
171
|
/* Placeholdertext in input- and textarea-controls */
|
|
172
172
|
--color-placeholder-text-onlight: #62625f;
|
|
@@ -177,10 +177,10 @@
|
|
|
177
177
|
|
|
178
178
|
/* In a few cases where coloured text is required to stress the semantics of an information notification text */
|
|
179
179
|
--color-notification-text-info: #08667c;
|
|
180
|
-
--color-notification-text-warning: #916500;
|
|
181
180
|
|
|
182
181
|
/* In a few cases where coloured text is required to stress the semantics of an error notification text */
|
|
183
182
|
--color-notification-text-error: #a31f0e;
|
|
183
|
+
--color-notification-text-warning: #916500;
|
|
184
184
|
--color-notification-text-success: #078141;
|
|
185
185
|
--color-base-border-neutral-emphasized: #bdbab9;
|
|
186
186
|
--color-notification-status-draft: #7d7c79;
|
|
@@ -193,9 +193,47 @@
|
|
|
193
193
|
|
|
194
194
|
/* Background outside of modal and bottomsheet to mask inactive screen-area */
|
|
195
195
|
--color-shadow-pagemask: #2c2b2cb8;
|
|
196
|
-
--color-help-border-subtle-wcag: #
|
|
196
|
+
--color-help-border-subtle-wcag: #9862df;
|
|
197
197
|
--color-help-graphics-dark: #4c1b8c;
|
|
198
198
|
--color-help-border-dark: #4c1b8c;
|
|
199
199
|
--color-help-graphics-verydark: #3c1471;
|
|
200
200
|
--color-help-border-verydark: #3c1471;
|
|
201
|
+
--color-action-background-onlight-active: #06596c;
|
|
202
|
+
--color-action-background-like-transparent-but-opaque-onlight-hover: #e0ecef;
|
|
203
|
+
--color-action-background-like-transparent-but-opaque-onlight-hoverselected: #d7e7eb;
|
|
204
|
+
--color-action-background-stroke-onlight: #126f87;
|
|
205
|
+
--component-stickynote-background-normal-light: #fdf8df;
|
|
206
|
+
--component-stickynote-background-normal-medium: #fcf2bf;
|
|
207
|
+
--component-stickynote-background-normal-dark: #f9ea9f;
|
|
208
|
+
--component-stickynote-border-normal: #916500;
|
|
209
|
+
--component-stickynote-border-error: #d56147;
|
|
210
|
+
--component-stickynote-background-error-dark: #eec0a5;
|
|
211
|
+
--component-stickynote-background-error-medium: #f7e1d2;
|
|
212
|
+
--component-stickynote-background-error-light: #fff2ea;
|
|
213
|
+
--color-base-text-onlight-subdued: #000000;
|
|
214
|
+
--component-stickynote-background-fold-error-dark: #e39376;
|
|
215
|
+
--component-stickynote-background-fold-error-light: #f7e1d2;
|
|
216
|
+
--component-stickynote-background-fold-error-medium: #eec0a5;
|
|
217
|
+
--component-stickynote-background-fold-normal-light: #fcf2bf;
|
|
218
|
+
--component-stickynote-background-fold-normal-medium: #f9ea9f;
|
|
219
|
+
--component-stickynote-background-fold-normal-dark: #ebc840;
|
|
220
|
+
--component-stickynote-background-transparent-onlight-hover: #ebc84021;
|
|
221
|
+
--component-stickynote-background-transparent-onlight-active: #ebc8404d;
|
|
222
|
+
--component-stickynote-background-transparent-error-hover: #d5614721;
|
|
223
|
+
--component-stickynote-background-transparent-error-active: #d5614740;
|
|
224
|
+
--component-listelements-background-neutral-light: #f5f3f3;
|
|
225
|
+
--component-listelements-background-neutral-medium: #eae7e7;
|
|
226
|
+
--component-listelements-background-neutral-dark: #d6d4d3;
|
|
227
|
+
--component-listelements-border-neutral-light: #eae7e7;
|
|
228
|
+
--component-listelements-background-blueberry-light: #e4f7f9;
|
|
229
|
+
--component-listelements-background-blueberry-medium: #cae7ed;
|
|
230
|
+
--component-listelements-border-blueberry-light: #cae7ed;
|
|
231
|
+
--component-listelements-background-blueberry-dark: #afdae3;
|
|
232
|
+
--component-listelements-border-blueberry-normal: #188097;
|
|
233
|
+
--component-listelements-background-cherry-light: #fff2ea;
|
|
234
|
+
--component-listelements-background-cherry-medium: #f7e1d2;
|
|
235
|
+
--component-listelements-border-cherry-light: #f7e1d2;
|
|
236
|
+
--component-listelements-background-cherry-dark: #eec0a5;
|
|
237
|
+
--component-listelements-border-cherry-normal: #d56147;
|
|
238
|
+
--component-listelements-border-neutral-normal: #7d7c79;
|
|
201
239
|
}
|
|
@@ -68,11 +68,11 @@
|
|
|
68
68
|
/* Vis status/tidskoder - lav linjehøyde for kompakt visning */
|
|
69
69
|
--mobile-status-time-stamp-time: 400 1rem/110% "Source Sans Pro";
|
|
70
70
|
--mobile-h5-title5: 700 1rem/140% "Source Sans Pro";
|
|
71
|
-
--desktop-h6-title6:
|
|
71
|
+
--desktop-h6-title6: 600 1.125rem/140% "Source Sans Pro";
|
|
72
72
|
--desktop-label-subdued: 400 1.25rem/130% "Source Sans Pro";
|
|
73
73
|
--desktop-sublabel: 600 1.125rem/130% "Source Sans 3";
|
|
74
74
|
--desktop-sublabel-subdued: 400 1.125rem/130% "Source Sans 3";
|
|
75
|
-
--mobile-h6-title6:
|
|
75
|
+
--mobile-h6-title6: 600 1rem/140% "Source Sans Pro";
|
|
76
76
|
--mobile-label-subdued: 400 1.125rem/120% "Source Sans Pro";
|
|
77
77
|
--mobile-sublabel: 600 1rem/120% "Source Sans 3";
|
|
78
78
|
|