@navikt/ds-css 5.7.3 → 5.7.5

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 +8 -0
  2. package/dist/component/form.css +38 -33
  3. package/dist/component/form.min.css +1 -1
  4. package/dist/component/index.css +39 -34
  5. package/dist/component/index.min.css +1 -1
  6. package/dist/components.css +38 -33
  7. package/dist/components.min.css +1 -1
  8. package/dist/global/tokens.css +1 -1
  9. package/dist/index.css +39 -34
  10. package/dist/index.min.css +1 -1
  11. package/form/radio-checkbox.css +38 -33
  12. package/package.json +2 -2
package/form/radio-checkbox.css CHANGED
@@ -31,11 +31,13 @@
31
31
  .navds-radio__label::before {
32
32
  content: "";
33
33
  background-color: var(--ac-radio-checkbox-bg, var(--a-surface-default));
34
- box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default));
35
- width: 1.5rem;
36
- height: 1.5rem;
37
- border-radius: var(--a-border-radius-medium);
34
+ border-radius: var(--a-border-radius-small);
38
35
  flex-shrink: 0;
36
+ box-shadow: 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default));
37
+ width: calc(1.5rem - 0.25rem);
38
+ height: calc(1.5rem - 0.25rem);
39
+ margin-block: 2px;
40
+ margin-inline: 2px;
39
41
  }
40
42
 
41
43
  .navds-radio__label::before {
@@ -64,36 +66,37 @@
64
66
 
65
67
  .navds-checkbox--small > .navds-checkbox__label::before,
66
68
  .navds-radio--small > .navds-radio__label::before {
67
- width: 1.25rem;
68
- height: 1.25rem;
69
+ width: calc(1.25rem - 0.25rem);
70
+ height: calc(1.25rem - 0.25rem);
69
71
  }
70
72
 
71
73
  .navds-checkbox__input:focus-visible + .navds-checkbox__label::before,
72
74
  .navds-radio__input:focus-visible + .navds-radio__label::before {
73
- box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default)), var(--a-shadow-focus);
75
+ box-shadow: 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default)),
76
+ 0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)), 0 0 0 4px var(--a-border-focus);
74
77
  }
75
78
 
76
79
  @supports not selector(:focus-visible) {
77
80
  .navds-checkbox__input:focus + .navds-checkbox__label::before,
78
81
  .navds-radio__input:focus + .navds-radio__label::before {
79
- box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default)), var(--a-shadow-focus);
82
+ box-shadow: 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default)), 0 0 0 4px var(--a-border-focus);
80
83
  }
81
84
  }
82
85
 
83
86
  .navds-checkbox__input:hover:focus-visible + .navds-checkbox__label::before,
84
87
  .navds-radio__input:hover:focus-visible + .navds-radio__label::before {
85
- box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)), var(--a-shadow-focus);
88
+ box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)), 0 0 0 4px var(--a-border-focus);
86
89
  }
87
90
 
88
91
  @supports not selector(:focus-visible) {
89
92
  .navds-checkbox__input:hover:focus + .navds-checkbox__label::before,
90
93
  .navds-radio__input:hover:focus + .navds-radio__label::before {
91
- box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)), var(--a-shadow-focus);
94
+ box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)), 0 0 0 4px var(--a-border-focus);
92
95
  }
93
96
  }
94
97
 
95
98
  .navds-checkbox__input:indeterminate + .navds-checkbox__label::before {
96
- box-shadow: none;
99
+ box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action));
97
100
  background-color: var(--ac-radio-checkbox-action, var(--a-surface-action));
98
101
  }
99
102
 
@@ -114,7 +117,7 @@
114
117
  }
115
118
 
116
119
  .navds-checkbox__input:checked + .navds-checkbox__label::before {
117
- box-shadow: none;
120
+ box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action));
118
121
  background-color: var(--ac-radio-checkbox-action, var(--a-surface-action));
119
122
  }
120
123
 
@@ -146,31 +149,33 @@
146
149
 
147
150
  .navds-checkbox__input:indeterminate:focus-visible + .navds-checkbox__label::before,
148
151
  .navds-checkbox__input:checked:focus-visible + .navds-checkbox__label::before {
149
- box-shadow: inset 0 0 0 1px var(--ac-radio-checkbox-bg, var(--a-surface-default)), var(--a-shadow-focus);
152
+ box-shadow: 0 0 0 1px var(--ac-radio-checkbox-action, var(--a-surface-action)),
153
+ 0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)), 0 0 0 4px var(--a-border-focus);
150
154
  }
151
155
 
152
156
  @supports not selector(:focus-visible) {
153
157
  .navds-checkbox__input:indeterminate:focus + .navds-checkbox__label::before,
154
158
  .navds-checkbox__input:checked:focus + .navds-checkbox__label::before {
155
- box-shadow: inset 0 0 0 1px var(--ac-radio-checkbox-bg, var(--a-surface-default)), var(--a-shadow-focus);
159
+ box-shadow: 0 0 0 1px var(--ac-radio-checkbox-action, var(--a-surface-action)),
160
+ 0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)), 0 0 0 4px var(--a-border-focus);
156
161
  }
157
162
  }
158
163
 
159
164
  .navds-radio__input:checked + .navds-radio__label::before {
160
- box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
161
- inset 0 0 0 4px var(--ac-radio-checkbox-bg, var(--a-surface-default));
165
+ box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
166
+ inset 0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default));
162
167
  background-color: var(--ac-radio-checkbox-action, var(--a-surface-action));
163
168
  }
164
169
 
165
170
  .navds-radio__input:checked:focus-visible + .navds-radio__label::before {
166
- box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
167
- inset 0 0 0 4px var(--ac-radio-checkbox-bg, var(--a-surface-default)), var(--a-shadow-focus);
171
+ box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
172
+ inset 0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)), 0 0 0 4px var(--a-border-focus);
168
173
  }
169
174
 
170
175
  @supports not selector(:focus-visible) {
171
176
  .navds-radio__input:checked:focus + .navds-radio__label::before {
172
- box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
173
- inset 0 0 0 4px var(--ac-radio-checkbox-bg, var(--a-surface-default)), var(--a-shadow-focus);
177
+ box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
178
+ inset 0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)), 0 0 0 4px var(--a-border-focus);
174
179
  }
175
180
  }
176
181
 
@@ -182,13 +187,13 @@
182
187
  .navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus-visible)
183
188
  + .navds-checkbox__label::before,
184
189
  .navds-radio__input:hover:not(:disabled):not(:checked):not(:focus-visible) + .navds-radio__label::before {
185
- box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action));
190
+ box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action));
186
191
  }
187
192
 
188
193
  @supports not selector(:focus-visible) {
189
194
  .navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus) + .navds-checkbox__label::before,
190
195
  .navds-radio__input:hover:not(:disabled):not(:checked):not(:focus) + .navds-radio__label::before {
191
- box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action));
196
+ box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action));
192
197
  }
193
198
  }
194
199
 
@@ -201,14 +206,14 @@
201
206
  > .navds-checkbox__input:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
202
207
  + .navds-checkbox__label::before,
203
208
  .navds-radio--error > .navds-radio__input:not(:hover):not(:disabled):not(:checked) + .navds-radio__label::before {
204
- box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger));
209
+ box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger));
205
210
  }
206
211
 
207
212
  .navds-checkbox--error
208
213
  > .navds-checkbox__input:focus-visible:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
209
214
  + .navds-checkbox__label::before,
210
215
  .navds-radio--error > .navds-radio__input:focus-visible:not(:hover):not(:disabled):not(:checked) + .navds-radio__label::before {
211
- box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), var(--a-shadow-focus);
216
+ box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), 0 0 0 4px var(--a-border-focus);
212
217
  }
213
218
 
214
219
  @supports not selector(:focus-visible) {
@@ -216,7 +221,7 @@
216
221
  > .navds-checkbox__input:focus:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
217
222
  + .navds-checkbox__label::before,
218
223
  .navds-radio--error > .navds-radio__input:focus:not(:hover):not(:disabled):not(:checked) + .navds-radio__label::before {
219
- box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), var(--a-shadow-focus);
224
+ box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), 0 0 0 4px var(--a-border-focus);
220
225
  }
221
226
  }
222
227
 
@@ -225,7 +230,7 @@
225
230
  + .navds-checkbox__label::before,
226
231
  .navds-radio--error > .navds-radio__input:hover:not(:disabled):not(:checked):not(:focus-visible) + .navds-radio__label::before {
227
232
  background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
228
- box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger));
233
+ box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger));
229
234
  }
230
235
 
231
236
  .navds-checkbox--error
@@ -233,7 +238,7 @@
233
238
  + .navds-checkbox__label::before,
234
239
  .navds-radio--error > .navds-radio__input:focus-visible:hover:not(:disabled):not(:checked) + .navds-radio__label::before {
235
240
  background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
236
- box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), var(--a-shadow-focus);
241
+ box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), 0 0 0 4px var(--a-border-focus);
237
242
  }
238
243
 
239
244
  @supports not selector(:focus-visible) {
@@ -242,7 +247,7 @@
242
247
  + .navds-checkbox__label::before,
243
248
  .navds-radio--error > .navds-radio__input:hover:not(:disabled):not(:checked):not(:focus) + .navds-radio__label::before {
244
249
  background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
245
- box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger));
250
+ box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger));
246
251
  }
247
252
 
248
253
  .navds-checkbox--error
@@ -250,7 +255,7 @@
250
255
  + .navds-checkbox__label::before,
251
256
  .navds-radio--error > .navds-radio__input:focus:hover:not(:disabled):not(:checked) + .navds-radio__label::before {
252
257
  background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
253
- box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), var(--a-shadow-focus);
258
+ box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), 0 0 0 4px var(--a-border-focus);
254
259
  }
255
260
  }
256
261
 
@@ -290,7 +295,7 @@
290
295
  .navds-radio--readonly > .navds-radio__input:not(:disabled):not(:checked) + .navds-radio__label::before,
291
296
  .navds-radio--readonly > .navds-radio__input:hover:not(:checked):not(:focus-visible) + .navds-radio__label::before {
292
297
  background-color: var(--__ac-radio-checkbox-readonly-bg);
293
- box-shadow: inset 0 0 0 2px var(--__ac-radio-checkbox-readonly-border);
298
+ box-shadow: 0 0 0 2px var(--__ac-radio-checkbox-readonly-border);
294
299
  }
295
300
 
296
301
  .navds-checkbox--readonly > .navds-checkbox__input:focus-visible + .navds-checkbox__label::before,
@@ -299,8 +304,8 @@
299
304
  }
300
305
 
301
306
  .navds-checkbox--readonly > .navds-checkbox__input:checked + .navds-checkbox__label::before {
302
- box-shadow: inset 0 0 0 2px var(--__ac-radio-checkbox-readonly-border);
303
307
  background-color: var(--__ac-radio-checkbox-readonly-bg);
308
+ box-shadow: 0 0 0 2px var(--__ac-radio-checkbox-readonly-border);
304
309
  }
305
310
 
306
311
  .navds-checkbox--readonly > .navds-checkbox__input:checked + .navds-checkbox__label > .navds-checkbox__icon {
@@ -308,12 +313,12 @@
308
313
  }
309
314
 
310
315
  .navds-radio--readonly > .navds-radio__input:checked + .navds-radio__label::before {
311
- box-shadow: inset 0 0 0 2px var(--__ac-radio-checkbox-readonly-border), inset 0 0 0 4px var(--__ac-radio-checkbox-readonly-bg);
312
316
  background-color: var(--a-icon-subtle);
317
+ box-shadow: 0 0 0 2px var(--__ac-radio-checkbox-readonly-border), inset 0 0 0 2px var(--__ac-radio-checkbox-readonly-bg);
313
318
  }
314
319
 
315
320
  .navds-checkbox--readonly > .navds-checkbox__input:indeterminate + .navds-checkbox__label::before {
316
- box-shadow: inset 0 0 0 2px var(--__ac-radio-checkbox-readonly-border);
321
+ box-shadow: 0 0 0 2px var(--__ac-radio-checkbox-readonly-border);
317
322
  background-color: var(--__ac-radio-checkbox-readonly-bg);
318
323
  }
319
324
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@navikt/ds-css",
3
- "version": "5.7.3",
3
+ "version": "5.7.5",
4
4
  "description": "CSS for NAV Designsystem",
5
5
  "author": "Aksel | NAV designsystem team",
6
6
  "keywords": [
@@ -27,7 +27,7 @@
27
27
  "css:get-version": "node config/get-version.js"
28
28
  },
29
29
  "devDependencies": {
30
- "@navikt/ds-tokens": "^5.7.3",
30
+ "@navikt/ds-tokens": "^5.7.5",
31
31
  "cssnano": "6.0.0",
32
32
  "fast-glob": "3.2.11",
33
33
  "lodash": "4.17.21",