@navikt/ds-css 2.1.6 → 2.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 (12) hide show
  1. package/CHANGELOG.md +18 -10
  2. package/README.md +4 -4
  3. package/accordion.css +4 -4
  4. package/alert.css +5 -0
  5. package/button.css +105 -2
  6. package/dist/index.css +148 -41
  7. package/form/radio-checkbox.css +2 -2
  8. package/form/select.css +2 -2
  9. package/link.css +2 -6
  10. package/package.json +3 -3
  11. package/toggle-group.css +28 -2
  12. package/tokens.json +37 -11
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # @navikt/ds-css
2
2
 
3
+ ## 2.2.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#1789](https://github.com/navikt/aksel/pull/1789) [`c0929a534`](https://github.com/navikt/aksel/commit/c0929a534dc8effece5435f8be550cb7931a52b1) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Button og ToggleGroup har nå en neutral-variant, oppdatert neutral-tokens
8
+
9
+ ## 2.1.7
10
+
3
11
  ## 2.1.6
4
12
 
5
13
  ## 2.1.5
@@ -12,7 +20,7 @@
12
20
 
13
21
  ### Patch Changes
14
22
 
15
- - [`62f36da5e`](https://github.com/navikt/Designsystemet/commit/62f36da5e74fc7f53414d42b310c3b57597795bc) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Small textfield har nå 8px horisontal padding (4px før)
23
+ - [`62f36da5e`](https://github.com/navikt/aksel/commit/62f36da5e74fc7f53414d42b310c3b57597795bc) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Small textfield har nå 8px horisontal padding (4px før)
16
24
 
17
25
  ## 2.1.1
18
26
 
@@ -28,7 +36,7 @@
28
36
 
29
37
  ### Patch Changes
30
38
 
31
- - [#1748](https://github.com/navikt/Designsystemet/pull/1748) [`22dfd8e60`](https://github.com/navikt/Designsystemet/commit/22dfd8e60315c421749394d35e41f412a00a7593) Thanks [@KenAJoh](https://github.com/KenAJoh)! - toptextPosition prop i Chat for horisontal plassering av navn og dato.
39
+ - [#1748](https://github.com/navikt/aksel/pull/1748) [`22dfd8e60`](https://github.com/navikt/aksel/commit/22dfd8e60315c421749394d35e41f412a00a7593) Thanks [@KenAJoh](https://github.com/KenAJoh)! - toptextPosition prop i Chat for horisontal plassering av navn og dato.
32
40
 
33
41
  ## 2.0.14
34
42
 
@@ -38,7 +46,7 @@
38
46
 
39
47
  ### Patch Changes
40
48
 
41
- - [#1737](https://github.com/navikt/Designsystemet/pull/1737) [`8a1ef5e7e`](https://github.com/navikt/Designsystemet/commit/8a1ef5e7e2c066cb80c13e14329e1585e2c427f8) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :bug: Fikset default visuell error-state for radio
49
+ - [#1737](https://github.com/navikt/aksel/pull/1737) [`8a1ef5e7e`](https://github.com/navikt/aksel/commit/8a1ef5e7e2c066cb80c13e14329e1585e2c427f8) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :bug: Fikset default visuell error-state for radio
42
50
 
43
51
  ## 2.0.11
44
52
 
@@ -68,13 +76,13 @@
68
76
 
69
77
  ### Patch Changes
70
78
 
71
- - [`e8007328d`](https://github.com/navikt/Designsystemet/commit/e8007328db3f6d5be696cf24f03304c79be0f3f7) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Bugfixer ved bruk av tokens
79
+ - [`e8007328d`](https://github.com/navikt/aksel/commit/e8007328db3f6d5be696cf24f03304c79be0f3f7) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Bugfixer ved bruk av tokens
72
80
 
73
81
  ## 2.0.0
74
82
 
75
83
  ### Major Changes
76
84
 
77
- - [`6b96e4833`](https://github.com/navikt/Designsystemet/commit/6b96e48330c2e013a1acee85cefccd9ccc1aece4) Thanks [@KenAJoh](https://github.com/KenAJoh)! - v2: Tokens update and font-loading
85
+ - [`6b96e4833`](https://github.com/navikt/aksel/commit/6b96e48330c2e013a1acee85cefccd9ccc1aece4) Thanks [@KenAJoh](https://github.com/KenAJoh)! - v2: Tokens update and font-loading
78
86
 
79
87
  ## 1.5.10
80
88
 
@@ -96,7 +104,7 @@
96
104
 
97
105
  ### Patch Changes
98
106
 
99
- - [#1709](https://github.com/navikt/Designsystemet/pull/1709) [`77302a30b`](https://github.com/navikt/Designsystemet/commit/77302a30b8eef8dc00b2d2e9c904a3f57da81a11) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Oppdatert ikoner
107
+ - [#1709](https://github.com/navikt/aksel/pull/1709) [`77302a30b`](https://github.com/navikt/aksel/commit/77302a30b8eef8dc00b2d2e9c904a3f57da81a11) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Oppdatert ikoner
100
108
 
101
109
  ## 1.5.3
102
110
 
@@ -120,9 +128,9 @@
120
128
 
121
129
  ### Minor Changes
122
130
 
123
- - [#1684](https://github.com/navikt/Designsystemet/pull/1684) [`e19bf67b3`](https://github.com/navikt/Designsystemet/commit/e19bf67b337dea39989c68b5e9c2591cf0d5b40f) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :sparkles: Oppdaterte tag-varianter
131
+ - [#1684](https://github.com/navikt/aksel/pull/1684) [`e19bf67b3`](https://github.com/navikt/aksel/commit/e19bf67b337dea39989c68b5e9c2591cf0d5b40f) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :sparkles: Oppdaterte tag-varianter
124
132
 
125
- - [#1668](https://github.com/navikt/Designsystemet/pull/1668) [`97c5f60e9`](https://github.com/navikt/Designsystemet/commit/97c5f60e9111da7e08f55c8d0aa29581f0a9b1ca) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Chips komponent :sparkles:
133
+ - [#1668](https://github.com/navikt/aksel/pull/1668) [`97c5f60e9`](https://github.com/navikt/aksel/commit/97c5f60e9111da7e08f55c8d0aa29581f0a9b1ca) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Chips komponent :sparkles:
126
134
 
127
135
  ## 1.4.4
128
136
 
@@ -138,7 +146,7 @@
138
146
 
139
147
  ### Patch Changes
140
148
 
141
- - [`3c08651df`](https://github.com/navikt/Designsystemet/commit/3c08651df28c3e19dd8c8a7a1d0032200bec473d) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Date-komponenter følger språkrådets dato-formatering for måneder.
149
+ - [`3c08651df`](https://github.com/navikt/aksel/commit/3c08651df28c3e19dd8c8a7a1d0032200bec473d) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Date-komponenter følger språkrådets dato-formatering for måneder.
142
150
 
143
151
  ## 1.4.0
144
152
 
@@ -146,6 +154,6 @@
146
154
 
147
155
  ### Patch Changes
148
156
 
149
- - [`40f0b3340`](https://github.com/navikt/Designsystemet/commit/40f0b3340d01bf85fecc04f2f3a8e8b2acf996f1) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Bump for latest-tag
157
+ - [`40f0b3340`](https://github.com/navikt/aksel/commit/40f0b3340d01bf85fecc04f2f3a8e8b2acf996f1) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Bump for latest-tag
150
158
 
151
159
  ## 1.3.38
package/README.md CHANGED
@@ -34,10 +34,10 @@ But you can import it in a .css-file
34
34
 
35
35
  ## Learn more
36
36
 
37
- - [Designsystem documentation](https://aksel.nav.no/designsystem)
38
- - [Storybook](https://master--5f801fb2aea7820022de2936.chromatic.com/)
39
- - [ds-react README](https://github.com/navikt/Designsystemet/blob/master/%40navikt/core/react/README.md)
37
+ - [Docs](https://aksel.nav.no/komponenter)
38
+ - [Storybook](https://aksel.nav.no/storybook/)
39
+ - [ds-react README](https://github.com/navikt/aksel/blob/main/%40navikt/core/react/README.md)
40
40
 
41
41
  ## License
42
42
 
43
- [MIT](https://github.com/navikt/Designsystemet/blob/master/LICENCE)
43
+ [MIT](https://github.com/navikt/aksel/blob/main/LICENCE)
package/accordion.css CHANGED
@@ -14,7 +14,7 @@
14
14
  background: transparent;
15
15
  cursor: pointer;
16
16
  border: none;
17
- border-bottom: 2px solid var(--ac-accordion-header-border, var(--a-border-strong));
17
+ border-bottom: 2px solid var(--ac-accordion-header-border, var(--a-border-divider));
18
18
  }
19
19
 
20
20
  .navds-accordion__header:focus {
@@ -24,7 +24,7 @@
24
24
 
25
25
  .navds-accordion__header:hover {
26
26
  color: var(--ac-accordion-header-text-hover, var(--a-text-action-on-action-subtle));
27
- border-color: var(--ac-accordion-header-border-hover, var(--a-border-strong));
27
+ border-color: var(--ac-accordion-header-border-hover, var(--a-border-default));
28
28
  }
29
29
 
30
30
  .navds-accordion__header-content {
@@ -39,11 +39,11 @@
39
39
 
40
40
  .navds-accordion__content {
41
41
  padding: var(--a-spacing-3) var(--a-spacing-3) 18px;
42
- border-bottom: 2px solid var(--ac-accordion-content-border, var(--a-border-strong));
42
+ border-bottom: 2px solid var(--ac-accordion-content-border, var(--a-border-divider));
43
43
  }
44
44
 
45
45
  .navds-accordion__item--open > .navds-accordion__header:hover + * .navds-accordion__content {
46
- border-color: var(--ac-accordion-content-border-open, var(--a-border-strong));
46
+ border-color: var(--ac-accordion-content-border-open, var(--a-border-default));
47
47
  }
48
48
 
49
49
  .navds-accordion__expand-icon {
package/alert.css CHANGED
@@ -24,6 +24,7 @@
24
24
  font-size: 1.5rem;
25
25
  align-self: flex-start;
26
26
  height: var(--a-font-line-height-xlarge);
27
+ background: radial-gradient(circle, var(--a-surface-default) 50%, 0, transparent);
27
28
  }
28
29
 
29
30
  .navds-alert--small > .navds-alert__icon {
@@ -41,6 +42,10 @@
41
42
  background-color: var(--ac-alert-warning-bg, var(--a-surface-warning-subtle));
42
43
  }
43
44
 
45
+ .navds-alert--warning > .navds-alert__icon {
46
+ background: radial-gradient(circle at 50% 57%, var(--a-surface-default) 32%, 0, transparent);
47
+ }
48
+
44
49
  .navds-alert--info {
45
50
  border-color: var(--ac-alert-info-border, var(--a-border-info));
46
51
  background-color: var(--ac-alert-info-bg, var(--a-surface-info-subtle));
package/button.css CHANGED
@@ -112,13 +112,39 @@
112
112
  background-color: var(--ac-button-primary-bg, var(--a-surface-action));
113
113
  }
114
114
 
115
+ /*************************
116
+ * .navds-button--primary-neutral *
117
+ *************************/
118
+
119
+ .navds-button--primary-neutral {
120
+ background-color: var(--ac-button-primary-neutral-bg, var(--a-surface-neutral));
121
+ color: var(--ac-button-primary-neutral-text, var(--a-text-on-neutral));
122
+ }
123
+
124
+ .navds-button--primary-neutral:hover {
125
+ background-color: var(--ac-button-primary-neutral-hover-bg, var(--a-surface-neutral-hover));
126
+ }
127
+
128
+ .navds-button--primary-neutral:active {
129
+ background-color: var(--ac-button-primary-neutral-active-bg, var(--a-surface-neutral-active));
130
+ }
131
+
132
+ .navds-button--primary-neutral:focus {
133
+ box-shadow: inset 0 0 0 1px var(--ac-button-primary-neutral-focus-border, var(--a-surface-default)), var(--a-shadow-focus);
134
+ }
135
+
136
+ .navds-button--primary-neutral:hover:where(:disabled, .navds-button--disabled),
137
+ .navds-button--primary-neutral:active:where(:disabled, .navds-button--disabled) {
138
+ background-color: var(--ac-button-primary-neutral-bg, var(--a-surface-neutral));
139
+ }
140
+
115
141
  /**************************
116
142
  * .navds-button--secondary *
117
143
  **************************/
118
144
 
119
145
  .navds-button--secondary {
120
146
  color: var(--ac-button-secondary-text, var(--a-text-action));
121
- background-color: var(--ac-button-secondary-bg, var(--a-surface-default));
147
+ background-color: var(--ac-button-secondary-bg, var(--a-surface-transparent));
122
148
  box-shadow: inset 0 0 0 2px var(--ac-button-secondary-border, var(--a-border-action));
123
149
  }
124
150
 
@@ -144,10 +170,47 @@
144
170
  .navds-button--secondary:where(:disabled, .navds-button--disabled),
145
171
  .navds-button--secondary:hover:where(:disabled, .navds-button--disabled) {
146
172
  color: var(--ac-button-secondary-text, var(--a-text-action));
147
- background-color: var(--ac-button-secondary-bg, var(--a-surface-default));
173
+ background-color: var(--ac-button-secondary-bg, var(--a-surface-transparent));
148
174
  box-shadow: inset 0 0 0 2px var(--ac-button-secondary-border, var(--a-border-action));
149
175
  }
150
176
 
177
+ /**************************
178
+ * .navds-button--secondary-neutral *
179
+ **************************/
180
+
181
+ .navds-button--secondary-neutral {
182
+ color: var(--ac-button-secondary-neutral-text, var(--a-text-default));
183
+ background-color: var(--ac-button-secondary-neutral-bg, var(--a-surface-transparent));
184
+ box-shadow: inset 0 0 0 2px var(--ac-button-secondary-neutral-border, var(--a-border-strong));
185
+ }
186
+
187
+ .navds-button--secondary-neutral:hover {
188
+ background-color: var(--ac-button-secondary-neutral-hover-bg, var(--a-surface-neutral-subtle-hover));
189
+ }
190
+
191
+ .navds-button--secondary-neutral:focus {
192
+ color: var(--ac-button-secondary-neutral-text, var(--a-text-default));
193
+ box-shadow: inset 0 0 0 2px var(--ac-button-secondary-neutral-focus-border, var(--a-border-strong)), var(--a-shadow-focus);
194
+ }
195
+
196
+ .navds-button--secondary-neutral:active {
197
+ color: var(--ac-button-secondary-neutral-active-text, var(--a-text-on-neutral));
198
+ background-color: var(--ac-button-secondary-neutral-active-bg, var(--a-surface-neutral-active));
199
+ box-shadow: none;
200
+ }
201
+
202
+ .navds-button--secondary-neutral:focus:active {
203
+ box-shadow: inset 0 0 0 1px var(--ac-button-secondary-neutral-active-focus-border, var(--a-surface-default)),
204
+ var(--a-shadow-focus);
205
+ }
206
+
207
+ .navds-button--secondary-neutral:where(:disabled, .navds-button--disabled),
208
+ .navds-button--secondary-neutral:hover:where(:disabled, .navds-button--disabled) {
209
+ color: var(--ac-button-secondary-neutral-text, var(--a-text-default));
210
+ background-color: var(--ac-button-secondary-neutral-bg, var(--a-surface-transparent));
211
+ box-shadow: inset 0 0 0 2px var(--ac-button-secondary-neutral-border, var(--a-border-strong));
212
+ }
213
+
151
214
  /****************************
152
215
  * .navds-button--tertiary *
153
216
  ****************************/
@@ -188,6 +251,46 @@
188
251
  box-shadow: none;
189
252
  }
190
253
 
254
+ /****************************
255
+ * .navds-button--tertiary-neutral *
256
+ ****************************/
257
+
258
+ .navds-button--tertiary-neutral {
259
+ color: var(--ac-button-tertiary-neutral-text, var(--a-text-default));
260
+ }
261
+
262
+ .navds-button--tertiary-neutral:hover {
263
+ color: var(--ac-button-tertiary-neutral-hover-text, var(--a-text-default));
264
+ background-color: var(--ac-button-tertiary-neutral-hover-bg, var(--a-surface-neutral-subtle-hover));
265
+ }
266
+
267
+ .navds-button--tertiary-neutral:focus {
268
+ box-shadow: inset 0 0 0 2px var(--ac-button-tertiary-neutral-focus-border, var(--a-border-strong)), var(--a-shadow-focus);
269
+ }
270
+
271
+ .navds-button--tertiary-neutral:active {
272
+ color: var(--ac-button-tertiary-neutral-active-text, var(--a-text-on-neutral));
273
+ background-color: var(--ac-button-tertiary-neutral-active-bg, var(--a-surface-neutral-active));
274
+ box-shadow: inset 0 0 0 1px var(--a-surface-default);
275
+ }
276
+
277
+ .navds-button--tertiary-neutral:active:hover {
278
+ background-color: var(--ac-button-tertiary-neutral-active-hover-bg, var(--a-surface-neutral-active));
279
+ }
280
+
281
+ .navds-button--tertiary-neutral:active:focus {
282
+ box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
283
+ }
284
+
285
+ .navds-button--tertiary-neutral:where(:disabled, .navds-button--disabled),
286
+ .navds-button--tertiary-neutral:hover:where(:disabled, .navds-button--disabled),
287
+ .navds-button--tertiary-neutral:active:where(:disabled, .navds-button--disabled),
288
+ .navds-button--tertiary-neutral:active:hover:where(:disabled, .navds-button--disabled) {
289
+ color: var(--ac-button-tertiary-neutral-text, var(--a-text-default));
290
+ background: none;
291
+ box-shadow: none;
292
+ }
293
+
191
294
  /*************************
192
295
  * .navds-button--danger *
193
296
  *************************/