@navikt/ds-css 2.1.7 → 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 (11) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/accordion.css +4 -4
  3. package/alert.css +5 -0
  4. package/button.css +105 -2
  5. package/dist/index.css +148 -41
  6. package/form/radio-checkbox.css +2 -2
  7. package/form/select.css +2 -2
  8. package/link.css +2 -6
  9. package/package.json +2 -2
  10. package/toggle-group.css +28 -2
  11. package/tokens.json +37 -11
package/form/radio-checkbox.css CHANGED
@@ -28,7 +28,7 @@
28
28
  .navds-radio__label::before {
29
29
  content: "";
30
30
  background-color: var(--ac-radio-checkbox-bg, var(--a-surface-default));
31
- box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-strong));
31
+ box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default));
32
32
  width: 1.5rem;
33
33
  height: 1.5rem;
34
34
  border-radius: var(--a-border-radius-medium);
@@ -67,7 +67,7 @@
67
67
 
68
68
  .navds-checkbox__input:focus + .navds-checkbox__label::before,
69
69
  .navds-radio__input:focus + .navds-radio__label::before {
70
- box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-strong)), var(--a-shadow-focus);
70
+ box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default)), var(--a-shadow-focus);
71
71
  }
72
72
 
73
73
  .navds-checkbox__input:hover:focus + .navds-checkbox__label::before,
package/form/select.css CHANGED
@@ -2,7 +2,7 @@
2
2
  appearance: none;
3
3
  background-color: var(--ac-select-bg, var(--a-surface-default));
4
4
  border-radius: var(--a-border-radius-medium);
5
- border: 1px solid var(--ac-select-border, var(--a-border-strong));
5
+ border: 1px solid var(--ac-select-border, var(--a-border-default));
6
6
  width: 100%;
7
7
  box-sizing: border-box;
8
8
  min-height: 48px;
@@ -52,7 +52,7 @@
52
52
 
53
53
  .navds-select__input:disabled {
54
54
  background-color: var(--ac-select-bg, var(--a-surface-default));
55
- border: 1px solid var(--ac-select-border, var(--a-border-strong));
55
+ border: 1px solid var(--ac-select-border, var(--a-border-default));
56
56
  box-shadow: none;
57
57
  cursor: not-allowed;
58
58
  }
package/link.css CHANGED
@@ -6,12 +6,8 @@
6
6
  gap: var(--a-spacing-1);
7
7
  }
8
8
 
9
- .navds-alert--info .navds-link {
10
- color: var(--a-text-default);
11
- }
12
-
13
- .navds-alert--error .navds-link,
14
- .navds-confirmation-panel--error .navds-link {
9
+ .navds-alert .navds-link,
10
+ .navds-confirmation-panel .navds-link {
15
11
  color: var(--a-text-default);
16
12
  }
17
13
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@navikt/ds-css",
3
- "version": "2.1.7",
3
+ "version": "2.2.0",
4
4
  "description": "CSS for NAV Designsystem",
5
5
  "author": "Aksel | NAV designsystem team",
6
6
  "keywords": [
@@ -20,7 +20,7 @@
20
20
  "watch": "postcss --watch --use postcss-import -o dist/index.css index.css"
21
21
  },
22
22
  "devDependencies": {
23
- "@navikt/ds-tokens": "^2.1.7",
23
+ "@navikt/ds-tokens": "^2.2.0",
24
24
  "normalize.css": "^8.0.1",
25
25
  "postcss": "^8.4.0",
26
26
  "postcss-cli": "^9.0.0",
package/toggle-group.css CHANGED
@@ -6,7 +6,7 @@
6
6
 
7
7
  .navds-toggle-group {
8
8
  border-radius: 9px;
9
- background-color: var(--ac-toggle-group-bg, var(--a-surface-default));
9
+ background-color: var(--ac-toggle-group-bg, var(--a-surface-transparent));
10
10
  box-shadow: inset 0 0 0 1px var(--ac-toggle-group-border, var(--a-border-default));
11
11
  padding: calc(var(--a-spacing-1) + 1px);
12
12
  gap: var(--a-spacing-1);
@@ -15,6 +15,11 @@
15
15
  grid-auto-columns: 1fr;
16
16
  }
17
17
 
18
+ .navds-toggle-group--neutral {
19
+ background-color: var(--ac-toggle-group-neutral-bg, var(--a-surface-transparent));
20
+ box-shadow: inset 0 0 0 1px var(--ac-toggle-group-neutral-border, var(--a-border-default));
21
+ }
22
+
18
23
  .navds-toggle-group__button {
19
24
  display: inline-flex;
20
25
  align-items: center;
@@ -23,17 +28,27 @@
23
28
  min-height: 48px;
24
29
  border: none;
25
30
  cursor: pointer;
26
- background-color: var(--ac-toggle-group-button-bg, var(--a-surface-default));
31
+ background-color: var(--ac-toggle-group-button-bg, var(--a-surface-transparent));
27
32
  color: var(--ac-toggle-group-button-text, var(--a-text-default));
28
33
  border-radius: var(--a-border-radius-medium);
29
34
  min-width: fit-content;
30
35
  }
31
36
 
37
+ .navds-toggle-group--neutral > .navds-toggle-group__button {
38
+ background-color: var(--ac-toggle-group-button-neutral-bg, var(--a-surface-transparent));
39
+ color: var(--ac-toggle-group-button-neutral-text, var(c));
40
+ }
41
+
32
42
  .navds-toggle-group__button:hover {
33
43
  background-color: var(--ac-toggle-group-button-hover-bg, var(--a-surface-action-subtle));
34
44
  color: var(--ac-toggle-group-button-hover-text, var(--a-text-action-on-action-subtle));
35
45
  }
36
46
 
47
+ .navds-toggle-group--neutral > .navds-toggle-group__button:hover {
48
+ background-color: var(--ac-toggle-group-button-neutral-hover-bg, var(--a-surface-neutral-subtle-hover));
49
+ color: var(--ac-toggle-group-button-neutral-hover-text, var(--a-text-default));
50
+ }
51
+
37
52
  .navds-toggle-group__button:focus {
38
53
  outline: none;
39
54
  box-shadow: 0 0 0 1px var(--a-surface-default), 0 0 0 4px var(--a-border-focus);
@@ -43,6 +58,11 @@
43
58
  box-shadow: 0 0 0 1px var(--ac-toggle-group-button-hover-bg, var(--a-surface-action-subtle)), 0 0 0 4px var(--a-border-focus);
44
59
  }
45
60
 
61
+ .navds-toggle-group--neutral > .navds-toggle-group__button:focus:hover[aria-pressed="false"] {
62
+ box-shadow: 0 0 0 1px var(--ac-toggle-group-button-neutral-hover-bg, var(--a-surface-neutral-subtle-hover)),
63
+ 0 0 0 4px var(--a-border-focus);
64
+ }
65
+
46
66
  .navds-toggle-group__button-inner {
47
67
  display: flex;
48
68
  align-items: center;
@@ -59,6 +79,12 @@
59
79
  color: var(--ac-toggle-group-selected-text, var(--a-text-on-action));
60
80
  }
61
81
 
82
+ .navds-toggle-group--neutral > .navds-toggle-group__button[aria-pressed="true"],
83
+ .navds-toggle-group--neutral > .navds-toggle-group__button[aria-checked="true"] {
84
+ background-color: var(--ac-toggle-group-neutral-selected-bg, var(--a-surface-neutral));
85
+ color: var(--ac-toggle-group-neutral-selected-text, var(--a-text-on-neutral));
86
+ }
87
+
62
88
  .navds-toggle-group--small > .navds-toggle-group__button {
63
89
  padding: 0.375rem;
64
90
  min-height: 32px;
package/tokens.json CHANGED
@@ -10,13 +10,13 @@
10
10
  "--ac-alert-success-bg": "--a-surface-success-subtle"
11
11
  },
12
12
  "accordion": {
13
- "--ac-accordion-header-border": "--a-border-strong",
13
+ "--ac-accordion-header-border": "--a-border-divider",
14
14
  "--ac-accordion-header-text-hover": "--a-text-action-on-action-subtle",
15
- "--ac-accordion-header-border-hover": "--a-border-strong",
15
+ "--ac-accordion-header-border-hover": "--a-border-default",
16
16
  "--ac-accordion-item-bg-open": "--a-surface-action-subtle",
17
17
  "--ac-accordion-item-border-open": "--a-surface-action-subtle",
18
- "--ac-accordion-content-border": "--a-border-strong",
19
- "--ac-accordion-content-border-open": "--a-border-strong"
18
+ "--ac-accordion-content-border": "--a-border-divider",
19
+ "--ac-accordion-content-border-open": "--a-border-default"
20
20
  },
21
21
  "button": {
22
22
  "--ac-button-primary-bg": "--a-surface-action",
@@ -25,7 +25,7 @@
25
25
  "--ac-button-primary-active-bg": "--a-surface-action-active",
26
26
  "--ac-button-primary-focus-border": "--a-surface-default",
27
27
  "--ac-button-secondary-text": "--a-text-action",
28
- "--ac-button-secondary-bg": "--a-surface-default",
28
+ "--ac-button-secondary-bg": "--a-surface-transparent",
29
29
  "--ac-button-secondary-border": "--a-border-action",
30
30
  "--ac-button-secondary-hover-text": "--a-text-action-on-action-subtle",
31
31
  "--ac-button-secondary-hover-bg": "--a-surface-action-subtle-hover",
@@ -45,7 +45,27 @@
45
45
  "--ac-button-danger-hover-bg": "--a-surface-danger-hover",
46
46
  "--ac-button-danger-active-bg": "--a-surface-danger-active",
47
47
  "--ac-button-loader-stroke": "currentColor",
48
- "--ac-button-primary-loader-stroke-bg": "rgb(255 255 255 / 0.3)"
48
+ "--ac-button-primary-loader-stroke-bg": "rgb(255 255 255 / 0.3)",
49
+ "--ac-button-primary-neutral-bg": "--a-surface-neutral",
50
+ "--ac-button-primary-neutral-text": "--a-text-on-neutral",
51
+ "--ac-button-primary-neutral-hover-bg": "--a-surface-neutral-hover",
52
+ "--ac-button-primary-neutral-active-bg": "--a-surface-neutral-active",
53
+ "--ac-button-primary-neutral-focus-border": "--a-surface-default",
54
+ "--ac-button-secondary-neutral-text": "--a-text-default",
55
+ "--ac-button-secondary-neutral-bg": "--a-surface-transparent",
56
+ "--ac-button-secondary-neutral-border": "--a-border-strong",
57
+ "--ac-button-secondary-neutral-hover-bg": "--a-surface-neutral-subtle-hover",
58
+ "--ac-button-secondary-neutral-focus-border": "--a-border-stron",
59
+ "--ac-button-secondary-neutral-active-text": "--a-text-on-neutral",
60
+ "--ac-button-secondary-neutral-active-bg": "--a-surface-neutral-active",
61
+ "--ac-button-secondary-neutral-active-focus-border": "--a-surface-default",
62
+ "--ac-button-tertiary-neutral-text": "--a-text-default",
63
+ "--ac-button-tertiary-neutral-hover-text": "--a-text-default",
64
+ "--ac-button-tertiary-neutral-hover-bg": "--a-surface-neutral-subtle-hover",
65
+ "--ac-button-tertiary-neutral-focus-border": "--a-border-stron",
66
+ "--ac-button-tertiary-neutral-active-text": "--a-text-on-neutral",
67
+ "--ac-button-tertiary-neutral-active-bg": "--a-surface-neutral-active",
68
+ "--ac-button-tertiary-neutral-active-hover-bg": "--a-surface-neutral-active"
49
69
  },
50
70
  "chat": {
51
71
  "--ac-chat-avatar-bg": "--a-bg-subtle",
@@ -221,14 +241,20 @@
221
241
  "--ac-tag-alt-3-filled-text": "--a-text-on-alt-3"
222
242
  },
223
243
  "togglegroup": {
224
- "--ac-toggle-group-bg": "--a-surface-default",
244
+ "--ac-toggle-group-bg": "--a-surface-transparent",
225
245
  "--ac-toggle-group-border": "--a-border-default",
226
- "--ac-toggle-group-button-bg": "--a-surface-default",
246
+ "--ac-toggle-group-button-bg": "--a-surface-transparent",
227
247
  "--ac-toggle-group-button-text": "--a-text-default",
228
248
  "--ac-toggle-group-button-hover-bg": "--a-surface-action-subtle",
229
249
  "--ac-toggle-group-button-hover-text": "--a-text-action-on-action-subtle",
230
250
  "--ac-toggle-group-selected-bg": "--a-surface-action-selected",
231
- "--ac-toggle-group-selected-text": "--a-text-on-action"
251
+ "--ac-toggle-group-selected-text": "--a-text-on-action",
252
+ "--ac-toggle-group-button-neutral-bg": "--a-surface-transparent",
253
+ "--ac-toggle-group-button-neutral-text": "--ac-toggle-group-button-neutral-text",
254
+ "--ac-toggle-group-button-neutral-hover-bg": "--a-surface-neutral-subtle-hover",
255
+ "--ac-toggle-group-button-neutral-hover-text": "--a-text-default",
256
+ "--ac-toggle-group-neutral-selected-bg": "--a-surface-neutral",
257
+ "--ac-toggle-group-neutral-selected-text": "--a-text-on-neutral"
232
258
  },
233
259
  "tooltip": {
234
260
  "--ac-tooltip-bg": "--a-surface-inverted",
@@ -253,7 +279,7 @@
253
279
  },
254
280
  "checkbox-radio": {
255
281
  "--ac-radio-checkbox-bg": "--a-surface-default",
256
- "--ac-radio-checkbox-border": "--a-border-strong",
282
+ "--ac-radio-checkbox-border": "--a-border-default",
257
283
  "--ac-radio-checkbox-action": "--a-surface-action",
258
284
  "--ac-radio-checkbox-action-hover-bg": "--a-surface-action-subtle",
259
285
  "--ac-radio-checkbox-error-border": "--a-border-danger",
@@ -269,7 +295,7 @@
269
295
  },
270
296
  "select": {
271
297
  "--ac-select-bg": "--a-surface-default",
272
- "--ac-select-border": "--a-border-strong",
298
+ "--ac-select-border": "--a-border-default",
273
299
  "--ac-select-hover-bg": "--a-border-action",
274
300
  "--ac-select-error-border": "--a-surface-danger"
275
301
  },