@helsenorge/designsystem-react 13.1.0 → 13.2.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.
Files changed (7) hide show
  1. package/lib/CHANGELOG.md +13 -1
  2. package/lib/components/ListEditMode/styles.module.scss +11 -3
  3. package/lib/components/Tile/styles.module.scss +15 -15
  4. package/lib/designsystem-react.css +8 -2
  5. package/lib/scss/supernova/styles/colors.css +8 -2
  6. package/package.json +1 -1
  7. package/scss/supernova/styles/colors.css +8 -2
package/lib/CHANGELOG.md CHANGED
@@ -1,3 +1,15 @@
1
+ ## [13.2.0](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv13.1.0&targetVersion=GTv13.2.0) (2025-12-04)
2
+
3
+
4
+ ### Features
5
+
6
+ * **listeditmode:** nye tokens for hover og active states og endret spacing ([040271e](https://github.com/helsenorge/designsystem/commit/040271ea24fb71319e85fb54ddab56f011476ac0)), closes [#365898](https://github.com/helsenorge/designsystem/issues/365898)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * **tile:** hairline får justering for bedre kontrast ([15c2e40](https://github.com/helsenorge/designsystem/commit/15c2e40b4f4f8de92d0a8566feb89cfef389f159)), closes [#358926](https://github.com/helsenorge/designsystem/issues/358926)
12
+
1
13
  ## [13.1.0](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv13.0.2&targetVersion=GTv13.1.0) (2025-12-02)
2
14
 
3
15
 
@@ -152,7 +164,7 @@
152
164
 
153
165
  * lib mappen ble ikke med i den publiserte pakken ([1c5409e](https://github.com/helsenorge/designsystem/commit/1c5409eeaf05524c315650ea11a839a70b7dfaa3)), closes [#362474](https://github.com/helsenorge/designsystem/issues/362474)
154
166
 
155
- ## [12.12.2](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv12.12.1&targetVersion=GTv12.12.2) (2025-11-06)
167
+ ## [12.12.2](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv12.12.1&targetVersion=GTv12.12.2) (2025-11-07)
156
168
 
157
169
  ## [12.12.1](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv12.11.1&targetVersion=GTv12.12.1) (2025-11-06)
158
170
 
package/lib/components/ListEditMode/styles.module.scss CHANGED
@@ -17,9 +17,17 @@
17
17
  background-color: transparent;
18
18
  outline: none;
19
19
  padding: 0;
20
- margin: 4px;
20
+ margin: var(--core-space-3xs) 0 var(--core-space-3xs) var(--core-space-2xs);
21
21
  cursor: pointer;
22
22
 
23
+ &:hover {
24
+ background-color: var(--color-action-background-transparent-onmulticolor-hover);
25
+ }
26
+
27
+ &:active {
28
+ background-color: var(--color-action-background-transparent-onmulticolor-active);
29
+ }
30
+
23
31
  &:focus-visible {
24
32
  outline: 4px solid var(--color-action-border-onlight-focus);
25
33
  }
@@ -64,8 +72,8 @@
64
72
 
65
73
  &--fill {
66
74
  > * {
67
- margin-top: 8px !important;
68
- margin-bottom: 8px !important;
75
+ margin-top: var(--core-space-2xs) !important;
76
+ margin-bottom: var(--core-space-2xs) !important;
69
77
  }
70
78
  }
71
79
 
package/lib/components/Tile/styles.module.scss CHANGED
@@ -1,10 +1,10 @@
1
1
  @use 'sass:map';
2
2
  @use '../../scss/font-settings' as font-settings;
3
3
  @use '../../scss/palette' as palette;
4
- @use '../../scss/spacers' as spacers;
5
4
  @use '../../scss/screen-reader' as *;
6
5
  @use '../../scss/breakpoints' as breakpoints;
7
6
  @import '../../scss/supernova/styles/colors.css';
7
+ @import '../../scss/supernova/styles/spacers.css';
8
8
 
9
9
  .tile {
10
10
  // Referanse for grandparent selection i underklassene lenger nede
@@ -12,23 +12,23 @@
12
12
 
13
13
  display: flex;
14
14
  width: inherit;
15
- padding: spacers.getSpacer(2xs) spacers.getSpacer(2xs) spacers.getSpacer(xs);
15
+ padding: var(--core-space-2xs) var(--core-space-2xs) var(--core-space-xs);
16
16
  flex-direction: column;
17
17
  justify-content: center;
18
18
  background-color: var(--core-color-white);
19
- color: palette.$black;
19
+ color: var(--core-color-black);
20
20
  text-decoration: none;
21
21
  cursor: pointer;
22
- border: 1px solid var(--color-base-border-blueberry);
22
+ border: 1px solid var(--color-action-border-onlight);
23
23
  outline: none;
24
24
 
25
25
  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
26
- padding: spacers.getSpacer(l) spacers.getSpacer(m) spacers.getSpacer(l) spacers.getSpacer(s);
26
+ padding: var(--core-space-l) var(--core-space-m) var(--core-space-l) var(--core-space-s);
27
27
  justify-content: flex-start;
28
28
  }
29
29
 
30
30
  @media print {
31
- border: 1px solid palette.$black;
31
+ border: 1px solid var(--core-color-black);
32
32
  }
33
33
 
34
34
  &--fixed {
@@ -37,10 +37,10 @@
37
37
  }
38
38
 
39
39
  &--compact {
40
- padding: spacers.getSpacer(2xs) spacers.getSpacer(2xs) spacers.getSpacer(xs);
40
+ padding: var(--core-space-2xs) var(--core-space-2xs) var(--core-space-xs);
41
41
 
42
42
  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
43
- padding: spacers.getSpacer(s) spacers.getSpacer(m) spacers.getSpacer(s) spacers.getSpacer(s);
43
+ padding: var(--core-space-s) var(--core-space-m) var(--core-space-s) var(--core-space-s);
44
44
  }
45
45
  }
46
46
 
@@ -81,22 +81,22 @@
81
81
  text-align: center;
82
82
  line-height: 1.74rem;
83
83
  font-weight: 400;
84
- margin: spacers.getSpacer(3xs) 0 0;
84
+ margin: var(--core-space-3xs) 0 0;
85
85
 
86
86
  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
87
87
  text-align: left;
88
88
  font-weight: 600;
89
89
  font-size: font-settings.$font-size-md;
90
90
  line-height: 1.625rem;
91
- margin: spacers.getSpacer(s) 0 0 spacers.getSpacer(2xs);
91
+ margin: var(--core-space-s) 0 0 var(--core-space-2xs);
92
92
  }
93
93
 
94
94
  &--compact {
95
- margin: 0 0 0 spacers.getSpacer(3xs);
95
+ margin: 0 0 0 var(--core-space-3xs);
96
96
  text-align: left;
97
97
 
98
98
  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
99
- margin-left: spacers.getSpacer(2xs);
99
+ margin-left: var(--core-space-2xs);
100
100
  }
101
101
  }
102
102
  }
@@ -112,11 +112,11 @@
112
112
  &__description {
113
113
  font-size: 1.125rem;
114
114
  line-height: 1.75rem;
115
- margin: spacers.getSpacer(2xs) 0 0 spacers.getSpacer(2xs);
115
+ margin: var(--core-space-2xs) 0 0 var(--core-space-2xs);
116
116
  }
117
117
 
118
118
  &__children {
119
- margin: spacers.getSpacer(s) 0 0 spacers.getSpacer(2xs);
119
+ margin: var(--core-space-s) 0 0 var(--core-space-2xs);
120
120
  }
121
121
  }
122
122
 
@@ -136,7 +136,7 @@
136
136
  &--compact {
137
137
  flex-direction: row;
138
138
  align-items: center;
139
- padding-right: spacers.getSpacer(s);
139
+ padding-right: var(--core-space-s);
140
140
  padding-bottom: 0;
141
141
 
142
142
  svg {
package/lib/designsystem-react.css CHANGED
@@ -129,11 +129,13 @@
129
129
  --color-action-background-onlight: #188097;
130
130
  --color-action-background-onlight-hover: #08667c;
131
131
 
132
- /* Hoverfarge for bakgrunn på interaktive elementer - onDark */
132
+ /* Hoverfarge for bakgrunn på interaktive elementer - hvor hover skal eksistere på forskjellige fargebakgrunner */
133
133
  --color-action-background-transparent-ondark-hover: #00000026;
134
+ --color-action-background-transparent-onmulticolor-hover: #00000013;
134
135
 
135
- /* Hoverfarge for bakgrunn på interaktive elementer - onDark selected */
136
+ /* Activefarge for bakgrunn på interaktive elementer - hvor hover skal eksistere på forskjellige fargebakgrunner */
136
137
  --color-action-background-transparent-ondark-hoverselected: #000000bf;
138
+ --color-action-background-transparent-onmulticolor-active: #00000026;
137
139
  --color-base-background-blueberry: #e4f7f9;
138
140
  --color-base-background-cherry: #fff2ea;
139
141
  --color-base-background-neutral: #f5f3f3;
@@ -263,5 +265,9 @@
263
265
  --color-notification-background-warning-active: #f9ea9f;
264
266
  --color-notification-background-success-hover: #c2edd6;
265
267
  --color-notification-background-success-active: #9de2bf;
268
+ --color-lightbox-background-transparent-ondark-hover: #00000026;
269
+ --color-lightbox-background-transparent-ondark-hoverselected: #000000bf;
270
+ --component-lightbox-background-transparent-ondark-hover: #00000026;
271
+ --component-lightbox-background-transparent-ondark-hoverselected: #000000bf;
266
272
  }
267
273
  /*$vite$:1*/
package/lib/scss/supernova/styles/colors.css CHANGED
@@ -129,11 +129,13 @@
129
129
  --color-action-background-onlight: #188097;
130
130
  --color-action-background-onlight-hover: #08667c;
131
131
 
132
- /* Hoverfarge for bakgrunn på interaktive elementer - onDark */
132
+ /* Hoverfarge for bakgrunn på interaktive elementer - hvor hover skal eksistere på forskjellige fargebakgrunner */
133
133
  --color-action-background-transparent-ondark-hover: #00000026;
134
+ --color-action-background-transparent-onmulticolor-hover: #00000013;
134
135
 
135
- /* Hoverfarge for bakgrunn på interaktive elementer - onDark selected */
136
+ /* Activefarge for bakgrunn på interaktive elementer - hvor hover skal eksistere på forskjellige fargebakgrunner */
136
137
  --color-action-background-transparent-ondark-hoverselected: #000000bf;
138
+ --color-action-background-transparent-onmulticolor-active: #00000026;
137
139
  --color-base-background-blueberry: #e4f7f9;
138
140
  --color-base-background-cherry: #fff2ea;
139
141
  --color-base-background-neutral: #f5f3f3;
@@ -263,4 +265,8 @@
263
265
  --color-notification-background-warning-active: #f9ea9f;
264
266
  --color-notification-background-success-hover: #c2edd6;
265
267
  --color-notification-background-success-active: #9de2bf;
268
+ --color-lightbox-background-transparent-ondark-hover: #00000026;
269
+ --color-lightbox-background-transparent-ondark-hoverselected: #000000bf;
270
+ --component-lightbox-background-transparent-ondark-hover: #00000026;
271
+ --component-lightbox-background-transparent-ondark-hoverselected: #000000bf;
266
272
  }
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@helsenorge/designsystem-react",
3
3
  "sideEffects": false,
4
4
  "private": false,
5
- "version": "13.1.0",
5
+ "version": "13.2.0",
6
6
  "description": "The official design system for Helsenorge built with React.",
7
7
  "repository": {
8
8
  "type": "git",
package/scss/supernova/styles/colors.css CHANGED
@@ -129,11 +129,13 @@
129
129
  --color-action-background-onlight: #188097;
130
130
  --color-action-background-onlight-hover: #08667c;
131
131
 
132
- /* Hoverfarge for bakgrunn på interaktive elementer - onDark */
132
+ /* Hoverfarge for bakgrunn på interaktive elementer - hvor hover skal eksistere på forskjellige fargebakgrunner */
133
133
  --color-action-background-transparent-ondark-hover: #00000026;
134
+ --color-action-background-transparent-onmulticolor-hover: #00000013;
134
135
 
135
- /* Hoverfarge for bakgrunn på interaktive elementer - onDark selected */
136
+ /* Activefarge for bakgrunn på interaktive elementer - hvor hover skal eksistere på forskjellige fargebakgrunner */
136
137
  --color-action-background-transparent-ondark-hoverselected: #000000bf;
138
+ --color-action-background-transparent-onmulticolor-active: #00000026;
137
139
  --color-base-background-blueberry: #e4f7f9;
138
140
  --color-base-background-cherry: #fff2ea;
139
141
  --color-base-background-neutral: #f5f3f3;
@@ -263,4 +265,8 @@
263
265
  --color-notification-background-warning-active: #f9ea9f;
264
266
  --color-notification-background-success-hover: #c2edd6;
265
267
  --color-notification-background-success-active: #9de2bf;
268
+ --color-lightbox-background-transparent-ondark-hover: #00000026;
269
+ --color-lightbox-background-transparent-ondark-hoverselected: #000000bf;
270
+ --component-lightbox-background-transparent-ondark-hover: #00000026;
271
+ --component-lightbox-background-transparent-ondark-hoverselected: #000000bf;
266
272
  }