@navikt/ds-css 1.5.9 → 2.0.0-next.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 (44) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/accordion.css +11 -19
  3. package/alert.css +14 -28
  4. package/baseline/baseline.css +7 -9
  5. package/baseline/fonts.css +27 -0
  6. package/button.css +64 -105
  7. package/chat.css +16 -23
  8. package/chips.css +28 -28
  9. package/content-container.css +2 -2
  10. package/date.css +39 -40
  11. package/dist/index.css +916 -976
  12. package/form/confirmation-panel.css +9 -19
  13. package/form/error-summary.css +12 -18
  14. package/form/fieldset.css +2 -2
  15. package/form/form.css +2 -2
  16. package/form/radio-checkbox.css +43 -34
  17. package/form/search.css +30 -37
  18. package/form/select.css +10 -21
  19. package/form/switch.css +20 -35
  20. package/form/text-field.css +21 -35
  21. package/form/textarea.css +31 -30
  22. package/grid.css +2 -2
  23. package/guide-panel.css +14 -19
  24. package/help-text.css +7 -18
  25. package/link-panel.css +7 -14
  26. package/link.css +10 -23
  27. package/loader.css +16 -27
  28. package/modal.css +10 -17
  29. package/package.json +2 -2
  30. package/pagination.css +12 -18
  31. package/panel.css +4 -10
  32. package/popover.css +9 -15
  33. package/read-more.css +10 -10
  34. package/stepper.css +20 -20
  35. package/table.css +22 -32
  36. package/tabs.css +13 -13
  37. package/tag.css +43 -57
  38. package/toggle-group.css +16 -27
  39. package/tokens.json +302 -0
  40. package/tooltip.css +13 -13
  41. package/typography.css +54 -60
  42. package/baseline/Source-Sans-Pro-600.css +0 -7
  43. package/baseline/Source-Sans-Pro-italic.css +0 -7
  44. package/baseline/Source-Sans-Pro-regular.css +0 -7
package/form/text-field.css CHANGED
@@ -1,35 +1,21 @@
1
- :root,
2
- :host,
3
- [data-theme="light"] {
4
- --navds-text-field-color-text: var(--navds-semantic-color-text);
5
- --navds-text-field-color-background: var(--navds-semantic-color-component-background-light);
6
- --navds-text-field-color-border: var(--navds-semantic-color-border);
7
- --navds-text-field-color-border-hover: var(--navds-semantic-color-interaction-primary);
8
- --navds-text-field-color-border-error: var(--navds-semantic-color-interaction-danger);
9
- --navds-text-field-color-shadow-error: var(--navds-semantic-color-interaction-danger);
10
- --navds-text-field-color-border-disabled: var(--navds-global-color-gray-400);
11
- --navds-text-field-color-background-disabled: var(--navds-semantic-color-component-background-alternate);
12
- --navds-text-field-color-text-disabled: var(--navds-semantic-color-text);
13
- --navds-text-field-color-placeholder-text: var(--navds-semantic-color-text-muted);
14
- }
15
-
16
1
  [data-theme="dark"] {
17
- --navds-text-field-color-text: var(--navds-semantic-color-text-inverted);
18
- --navds-text-field-color-background: var(--navds-semantic-color-component-background-inverted);
19
- --navds-text-field-color-border: var(--navds-semantic-color-border-inverted);
20
- --navds-text-field-color-border-hover: var(--navds-global-color-blue-200);
21
- --navds-text-field-color-placeholder-text: var(--navds-global-color-gray-500);
2
+ --ac-textfield-text: var(--a-text-on-inverted);
3
+ --ac-textfield-bg: var(--a-surface-inverted);
4
+ --ac-textfield-border: var(--a-border-on-inverted);
5
+ --ac-textfield-hover-border: var(--a-blue-200);
6
+ --ac-textfield-placeholder: var(--a-gray-500);
7
+ --ac-textfield-error-border: var(--a-red-300);
22
8
  }
23
9
 
24
10
  .navds-text-field__input {
25
11
  appearance: none;
26
- padding: var(--navds-spacing-2);
27
- background-color: var(--navds-text-field-color-background);
28
- border-radius: var(--navds-border-radius-medium);
29
- border: 1px solid var(--navds-text-field-color-border);
12
+ padding: var(--a-spacing-2);
13
+ background-color: var(--ac-textfield-bg, var(--a-surface-default));
14
+ border-radius: var(--a-border-radius-medium);
15
+ border: 1px solid var(--ac-textfield-border, var(--a-border-default));
30
16
  min-height: 48px;
31
17
  width: 100%;
32
- color: var(--navds-text-field-color-text);
18
+ color: var(--ac-textfield-text, var(--a-text-default));
33
19
  }
34
20
 
35
21
  .navds-text-field__input[size] {
@@ -37,7 +23,7 @@
37
23
  }
38
24
 
39
25
  .navds-text-field__input::placeholder {
40
- color: var(--navds-text-field-color-placeholder-text);
26
+ color: var(--ac-textfield-placeholder, var(--a-text-subtle));
41
27
  }
42
28
 
43
29
  .navds-form-field--small .navds-text-field__input {
@@ -46,37 +32,37 @@
46
32
  }
47
33
 
48
34
  .navds-text-field__input:hover {
49
- border-color: var(--navds-text-field-color-border-hover);
35
+ border-color: var(--ac-textfield-hover-border, var(--a-border-action));
50
36
  }
51
37
 
52
38
  .navds-text-field__input:focus {
53
39
  outline: none;
54
- box-shadow: var(--navds-shadow-focus);
40
+ box-shadow: var(--a-shadow-focus);
55
41
  }
56
42
 
57
43
  /**
58
44
  Error handling
59
45
  */
60
46
  .navds-text-field--error > .navds-text-field__input:not(:hover):not(:disabled) {
61
- border-color: var(--navds-text-field-color-border-error);
62
- box-shadow: 0 0 0 1px var(--navds-text-field-color-border-error);
47
+ border-color: var(--ac-textfield-error-border, var(--a-border-danger));
48
+ box-shadow: 0 0 0 1px var(--ac-textfield-error-border, var(--a-border-danger));
63
49
  }
64
50
 
65
51
  .navds-text-field--error > .navds-text-field__input:focus:not(:hover):not(:disabled) {
66
- box-shadow: 0 0 0 1px var(--navds-text-field-color-border-error), var(--navds-shadow-focus);
52
+ box-shadow: 0 0 0 1px var(--a-border-danger), var(--a-shadow-focus);
67
53
  }
68
54
 
69
55
  /* Disabled handling */
70
56
  .navds-text-field__input:disabled {
71
- background-color: var(--navds-text-field-color-background);
72
- border-color: var(--navds-text-field-color-border);
57
+ background-color: var(--ac-textfield-bg, var(--a-surface-default));
58
+ border-color: var(--ac-textfield-border, var(--a-border-default));
73
59
  box-shadow: none;
74
60
  cursor: not-allowed;
75
61
  }
76
62
 
77
63
  .navds-text-field__input[readonly] {
78
- background-color: var(--navds-text-field-color-background);
79
- border-color: var(--navds-text-field-color-border);
64
+ background-color: var(--ac-textfield-bg, var(--a-surface-default));
65
+ border-color: var(--ac-textfield-border, var(--a-border-default));
80
66
  box-shadow: none;
81
67
  cursor: not-allowed;
82
68
  }
package/form/textarea.css CHANGED
@@ -1,15 +1,12 @@
1
- :root,
2
- :host {
3
- --navds-textarea-color-background: var(--navds-semantic-color-component-background-light);
4
- --navds-textarea-color-border: var(--navds-semantic-color-border);
5
- --navds-textarea-color-border-hover: var(--navds-semantic-color-interaction-primary);
6
- --navds-textarea-color-border-error: var(--navds-semantic-color-interaction-danger);
7
- --navds-textarea-color-shadow-error: var(--navds-semantic-color-interaction-danger);
8
- --navds-textarea-color-counter-text: var(--navds-semantic-color-text-muted);
9
- --navds-textarea-color-counter-text-error: var(--navds-semantic-color-interaction-danger);
10
- --navds-textarea-color-text-disabled: var(--navds-semantic-color-text);
11
- --navds-textarea-color-border-disabled: var(--navds-global-color-gray-400);
12
- --navds-textarea-color-background-disabled: var(--navds-semantic-color-component-background-alternate);
1
+ [data-theme="dark"] {
2
+ --ac-textarea-text: var(--a-text-on-inverted);
3
+ --ac-textarea-bg: var(--a-transparent);
4
+ --ac-textarea-border: var(--a-border-on-inverted);
5
+ --ac-textarea-hover-border: var(--a-blue-200);
6
+ --ac-textarea-placeholder: var(--a-gray-500);
7
+ --ac-textarea-error-border: var(--a-red-300);
8
+ --ac-textarea-counter-text: var(--a-gray-300);
9
+ --ac-textarea-counter-error-text: var(--a-red-300);
13
10
  }
14
11
 
15
12
  .navds-textarea__wrapper {
@@ -19,27 +16,31 @@
19
16
 
20
17
  .navds-textarea__input {
21
18
  appearance: none;
22
- padding: var(--navds-spacing-2);
23
- background-color: var(--navds-textarea-color-background);
24
- border-radius: var(--navds-border-radius-medium);
25
- border: 1px solid var(--navds-textarea-color-border);
19
+ padding: var(--a-spacing-2);
20
+ background-color: var(--ac-textarea-bg, var(--a-surface-default));
21
+ border-radius: var(--a-border-radius-medium);
22
+ border: 1px solid var(--ac-textarea-border, var(--a-border-default));
26
23
  resize: none;
27
24
  width: 100%;
28
25
  display: block;
29
- color: var(--navds-text-field-color-text);
26
+ color: var(--ac-textarea-text, var(--a-text-default));
30
27
  }
31
28
 
32
29
  .navds-textarea--counter {
33
- padding-bottom: var(--navds-spacing-8);
30
+ padding-bottom: var(--a-spacing-8);
31
+ }
32
+
33
+ .navds-textarea__input::placeholder {
34
+ color: var(--ac-textarea-placeholder, var(--a-text-subtle));
34
35
  }
35
36
 
36
37
  .navds-textarea__input:hover {
37
- border-color: var(--navds-textarea-color-border-hover);
38
+ border-color: var(--ac-textarea-hover-border, var(--a-border-action));
38
39
  }
39
40
 
40
41
  .navds-textarea__input:focus {
41
42
  outline: none;
42
- box-shadow: var(--navds-shadow-focus);
43
+ box-shadow: var(--a-shadow-focus);
43
44
  }
44
45
 
45
46
  .navds-form-field--small .navds-textarea__input {
@@ -47,22 +48,22 @@
47
48
  }
48
49
 
49
50
  .navds-form-field--small .navds-textarea--counter.navds-textarea__input {
50
- padding-bottom: var(--navds-spacing-7);
51
+ padding-bottom: var(--a-spacing-7);
51
52
  }
52
53
 
53
54
  .navds-textarea__counter {
54
55
  pointer-events: none;
55
- color: var(--navds-textarea-color-counter-text);
56
+ color: var(--ac-textarea-counter-text, var(--a-text-subtle));
56
57
  font-style: italic;
57
58
  position: absolute;
58
59
  text-align: left;
59
60
  left: 1px;
60
61
  bottom: 1px;
61
- padding: var(--navds-spacing-1) var(--navds-spacing-2);
62
+ padding: var(--a-spacing-1) var(--a-spacing-2);
62
63
  }
63
64
 
64
65
  .navds-textarea__counter--error {
65
- color: var(--navds-textarea-color-counter-text-error);
66
+ color: var(--ac-textarea-counter-error-text, var(--a-surface-danger));
66
67
  }
67
68
 
68
69
  .navds-textarea--resize .navds-textarea__input {
@@ -73,20 +74,20 @@
73
74
  Error handling
74
75
  */
75
76
  .navds-textarea--error .navds-textarea__input:not(:hover):not(:focus):not(:disabled) {
76
- box-shadow: 0 0 0 1px var(--navds-textarea-color-shadow-error);
77
- border-color: var(--navds-textarea-color-border-error);
77
+ box-shadow: 0 0 0 1px var(--ac-textarea-error-border, var(--a-border-danger));
78
+ border-color: var(--ac-textarea-error-border, var(--a-border-danger));
78
79
  }
79
80
 
80
81
  .navds-textarea__input:disabled {
81
- background-color: var(--navds-textarea-color-background);
82
- border-color: var(--navds-textarea-color-border);
82
+ background-color: var(--ac-textarea-bg, var(--a-surface-default));
83
+ border-color: var(--ac-textarea-border, var(--a-border-default));
83
84
  box-shadow: none;
84
85
  cursor: not-allowed;
85
86
  }
86
87
 
87
88
  .navds-textarea__input[readonly] {
88
- background-color: var(--navds-textarea-color-background);
89
- border-color: var(--navds-textarea-color-border);
89
+ background-color: var(--ac-textarea-bg, var(--a-surface-default));
90
+ border-color: var(--ac-textarea-border, var(--a-border-default));
90
91
  box-shadow: none;
91
92
  cursor: not-allowed;
92
93
  }
package/grid.css CHANGED
@@ -5,12 +5,12 @@
5
5
  .navds-grid {
6
6
  display: grid;
7
7
  grid-template-columns: repeat(12, minmax(0, 1fr));
8
- grid-gap: var(--navds-spacing-4);
8
+ grid-gap: var(--a-spacing-4);
9
9
  }
10
10
 
11
11
  @media (min-width: 448px) {
12
12
  .navds-grid {
13
- grid-gap: var(--navds-spacing-6);
13
+ grid-gap: var(--a-spacing-6);
14
14
  }
15
15
  }
16
16
 
package/guide-panel.css CHANGED
@@ -1,41 +1,35 @@
1
- :root,
2
- :host {
3
- --navds-guide-panel-color-background: var(--navds-semantic-color-component-background-light);
4
- --navds-guide-panel-color-border: var(--navds-global-color-blue-400);
5
- --navds-guide-panel-color-illustration-background: var(--navds-global-color-blue-200);
6
- }
7
-
8
1
  /**
9
2
  * GuidePanel component
10
3
  */
11
4
  .navds-guide-panel {
12
5
  position: relative;
13
- padding-left: var(--navds-spacing-10);
6
+ padding-left: var(--a-spacing-10);
14
7
  }
15
8
 
16
9
  .navds-guide-panel__content {
17
- background-color: var(--navds-guide-panel-color-background);
18
- border-radius: var(--navds-border-radius-medium);
19
- border: 2px solid var(--navds-guide-panel-color-border);
10
+ background-color: var(--ac-guide-panel-bg, var(--a-surface-default));
11
+ border-radius: var(--a-border-radius-medium);
12
+ border: 2px solid var(--ac-guide-panel-border, var(--a-border-action));
20
13
  min-height: 7.25rem;
21
- padding: var(--navds-spacing-6);
22
- padding-left: var(--navds-spacing-14);
14
+ padding: var(--a-spacing-6);
15
+ padding-left: var(--a-spacing-14);
23
16
  }
24
17
 
25
18
  .navds-guide-panel--poster {
26
19
  padding-left: 0;
27
- padding-top: var(--navds-spacing-12);
20
+ padding-top: var(--a-spacing-12);
28
21
  }
29
22
 
30
23
  .navds-guide-panel--poster .navds-guide-panel__content {
31
- padding: var(--navds-spacing-8);
32
- padding-top: var(--navds-spacing-16);
24
+ padding: var(--a-spacing-8);
25
+ padding-top: var(--a-spacing-16);
33
26
  }
34
27
 
35
28
  .navds-guide-panel .navds-guide {
36
29
  position: absolute;
37
- top: var(--navds-spacing-4);
30
+ top: var(--a-spacing-4);
38
31
  transform: translateX(-50%);
32
+ border: 2px solid var(--ac-guide-panel-border, var(--a-border-action));
39
33
  }
40
34
 
41
35
  .navds-guide-panel--poster .navds-guide {
@@ -50,12 +44,13 @@
50
44
  display: flex;
51
45
  align-items: center;
52
46
  justify-content: center;
47
+ border-radius: var(--a-border-radius-full);
53
48
  }
54
49
 
55
50
  /* Guide illustration frame */
56
51
  .navds-guide__illustration {
57
- background: var(--navds-guide-panel-color-illustration-background);
58
- border-radius: var(--navds-border-radius-full);
52
+ background: var(--ac-guide-panel-illustration-bg, var(--a-surface-action-subtle));
53
+ border-radius: var(--a-border-radius-full);
59
54
  overflow: hidden;
60
55
  }
61
56
 
package/help-text.css CHANGED
@@ -1,46 +1,35 @@
1
- :root,
2
- :host {
3
- --navds-help-text-color: var(--navds-semantic-color-interaction-primary);
4
- --navds-help-text-color-hover: var(--navds-semantic-color-component-background-light);
5
- --navds-help-text-color-focus: var(--navds-semantic-color-component-background-light);
6
- --navds-help-text-color-background-hover: var(--navds-semantic-color-interaction-primary);
7
- --navds-help-text-color-background-focus: var(--navds-semantic-color-interaction-primary);
8
- --navds-help-text-color-shadow-hover: var(--navds-semantic-color-interaction-primary);
9
- --navds-help-text-color-popover-background: var(--navds-semantic-color-feedback-info-background);
10
- }
11
-
12
1
  .navds-help-text__button {
13
2
  margin: 0;
14
3
  padding: 0;
15
4
  border: 0;
16
5
  cursor: pointer;
17
6
  background-color: transparent;
18
- border-radius: var(--navds-border-radius-full);
7
+ border-radius: var(--a-border-radius-full);
19
8
  display: flex;
20
9
  justify-content: center;
21
10
  align-items: center;
22
- color: var(--navds-help-text-color);
11
+ color: var(--ac-help-text-button-color, var(--a-surface-action));
23
12
  font-size: 1.5rem;
24
13
  }
25
14
 
26
15
  .navds-help-text__button:focus {
27
16
  outline: none;
28
- box-shadow: 0 0 0 1px var(--navds-global-color-white), 0 0 0 4px var(--navds-semantic-color-focus);
17
+ box-shadow: 0 0 0 1px var(--a-surface-default), 0 0 0 4px var(--a-border-focus);
29
18
  }
30
19
 
31
20
  .navds-help-text__icon {
32
- border-radius: var(--navds-border-radius-full);
21
+ border-radius: var(--a-border-radius-full);
33
22
  }
34
23
 
35
24
  .navds-help-text__popover > .navds-popover__arrow {
36
- background-color: var(--navds-help-text-color-popover-background);
25
+ background-color: var(--ac-help-text-popover-bg, var(--a-surface-info-subtle));
37
26
  }
38
27
 
39
28
  .navds-help-text__popover.navds-popover {
40
- background-color: var(--navds-help-text-color-popover-background);
29
+ background-color: var(--ac-help-text-popover-bg, var(--a-surface-info-subtle));
41
30
  max-width: 65ch;
42
31
 
43
- --navds-popover-color-border: rgba(38 38 38 / 0.22);
32
+ --ac-popover-border: var(--a-border-info);
44
33
  }
45
34
 
46
35
  .navds-help-text__icon--filled {
package/link-panel.css CHANGED
@@ -1,31 +1,24 @@
1
- :root,
2
- :host {
3
- --navds-link-panel-color-text: var(--navds-semantic-color-text);
4
- --navds-link-panel-color-border-hover: var(--navds-semantic-color-interaction-primary);
5
- --navds-link-panel-color-title-hover: var(--navds-semantic-color-link);
6
- }
7
-
8
1
  .navds-link-panel {
9
2
  text-decoration: none;
10
- color: var(--navds-link-panel-color-text);
3
+ color: var(--ac-link-panel-text, var(--a-text-default));
11
4
  display: flex;
12
5
  align-items: center;
13
6
  justify-content: space-between;
14
- gap: var(--navds-spacing-4);
7
+ gap: var(--a-spacing-4);
15
8
  }
16
9
 
17
10
  .navds-link-panel:hover .navds-link-panel__title {
18
11
  text-decoration: underline;
19
- color: var(--navds-link-panel-color-title-hover);
12
+ color: var(--ac-link-panel-hover-text, var(--a-text-action));
20
13
  }
21
14
 
22
15
  .navds-link-panel:hover {
23
- box-shadow: var(--navds-shadow-medium);
24
- border-color: var(--navds-link-panel-color-border-hover);
16
+ box-shadow: var(--a-shadow-medium);
17
+ border-color: var(--ac-link-panel-hover-border, var(--a-border-action));
25
18
  }
26
19
 
27
20
  .navds-link-panel:focus {
28
- box-shadow: var(--navds-shadow-focus);
21
+ box-shadow: var(--a-shadow-focus);
29
22
  outline: none;
30
23
  }
31
24
 
@@ -41,5 +34,5 @@
41
34
  }
42
35
 
43
36
  .navds-link-panel__description {
44
- margin-top: var(--navds-spacing-1);
37
+ margin-top: var(--a-spacing-1);
45
38
  }
package/link.css CHANGED
@@ -1,31 +1,18 @@
1
- :root,
2
- :host {
3
- --navds-link-color-text: var(--navds-semantic-color-link);
4
- --navds-link-color-text-focus: var(--navds-semantic-color-text-inverted);
5
- --navds-link-color-text-active: var(--navds-semantic-color-text-inverted);
6
- --navds-link-color-background-focus: var(--navds-semantic-color-focus);
7
- --navds-link-color-background-active: var(--navds-semantic-color-focus);
8
- --navds-link-color-icon: var(--navds-semantic-color-link);
9
- --navds-link-color-icon-focus: var(--navds-semantic-color-text-inverted);
10
- --navds-link-color-on-info-background: var(--navds-semantic-color-text);
11
- --navds-link-color-on-error-background: var(--navds-semantic-color-text);
12
- }
13
-
14
1
  .navds-link {
15
- color: var(--navds-link-color-text);
2
+ color: var(--ac-link-text, var(--a-text-action));
16
3
  text-decoration: underline;
17
4
  display: inline-flex;
18
5
  align-items: center;
19
- gap: var(--navds-spacing-1);
6
+ gap: var(--a-spacing-1);
20
7
  }
21
8
 
22
9
  .navds-alert--info .navds-link {
23
- color: var(--navds-link-color-on-info-background);
10
+ color: var(--a-text-default);
24
11
  }
25
12
 
26
13
  .navds-alert--error .navds-link,
27
14
  .navds-confirmation-panel--error .navds-link {
28
- color: var(--navds-link-color-on-error-background);
15
+ color: var(--a-text-default);
29
16
  }
30
17
 
31
18
  .navds-link:hover {
@@ -34,18 +21,18 @@
34
21
 
35
22
  .navds-link:focus {
36
23
  outline: none;
37
- color: var(--navds-link-color-text-focus);
24
+ color: var(--ac-link-focus-text, var(--a-text-on-action));
38
25
  text-decoration: none;
39
- background-color: var(--navds-link-color-background-focus);
40
- box-shadow: 0 0 0 2px var(--navds-semantic-color-focus);
26
+ background-color: var(--ac-link-focus-bg, var(--a-border-focus));
27
+ box-shadow: 0 0 0 2px var(--ac-link-focus-border, var(--a-border-focus));
41
28
  }
42
29
 
43
30
  .navds-link:active {
44
31
  outline: none;
45
- color: var(--navds-link-color-text-active);
32
+ color: var(--ac-link-active-text, var(--a-text-on-action));
46
33
  text-decoration: none;
47
- background-color: var(--navds-link-color-background-active);
48
- box-shadow: 0 0 0 2px var(--navds-semantic-color-focus);
34
+ background-color: var(--ac-link-active-bg, var(--a-border-focus));
35
+ box-shadow: 0 0 0 2px var(--ac-link-active-border, var(--a-border-focus));
49
36
  }
50
37
 
51
38
  .navds-link svg {
package/loader.css CHANGED
@@ -1,14 +1,3 @@
1
- :root,
2
- :host {
3
- --navds-loader-color-foreground: var(--navds-global-color-gray-400);
4
- --navds-loader-color-background: rgb(0 0 0 / 0.05);
5
- --navds-loader-color-neutral-foreground: var(--navds-global-color-gray-400);
6
- --navds-loader-color-interaction-foreground: var(--navds-global-color-blue-500);
7
- --navds-loader-color-inverted-foreground: var(--navds-global-color-white);
8
- --navds-loader-color-inverted-background: rgb(255 255 255 / 0.25);
9
- --navds-loader-color-transparent-background: transparent;
10
- }
11
-
12
1
  .navds-loader {
13
2
  width: 1.5rem;
14
3
  display: inline-block;
@@ -16,88 +5,88 @@
16
5
  animation: loader-rotate 1.8s linear infinite;
17
6
  stroke-width: 6;
18
7
 
19
- --navds-loader-background-stroke-width: 5.9;
8
+ --ac-loader-background-stroke-width: 5.9;
20
9
  }
21
10
 
22
11
  .navds-loader__foreground {
23
12
  animation: loader-dasharray 1.8s ease-in-out infinite;
24
13
  stroke-dasharray: 80px, 200px;
25
14
  stroke-dashoffset: 0;
26
- stroke: var(--navds-loader-color-foreground);
15
+ stroke: var(--ac-loader-stroke, var(--a-border-default));
27
16
  }
28
17
 
29
18
  .navds-loader__background {
30
- stroke: var(--navds-loader-color-background);
31
- stroke-width: var(--navds-loader-background-stroke-width);
19
+ stroke: var(--ac-loader-stroke-bg, var(--a-surface-active));
20
+ stroke-width: var(--ac-loader-background-stroke-width);
32
21
  }
33
22
 
34
23
  .navds-loader--neutral .navds-loader__foreground {
35
- stroke: var(--navds-loader-color-neutral-foreground);
24
+ stroke: var(--ac-loader-neutral-stroke, var(--a-border-default));
36
25
  }
37
26
 
38
27
  .navds-loader--interaction .navds-loader__foreground {
39
- stroke: var(--navds-loader-color-interaction-foreground);
28
+ stroke: var(--ac-loader-interaction-stroke, var(--a-border-action));
40
29
  }
41
30
 
42
31
  .navds-loader--inverted .navds-loader__foreground {
43
- stroke: var(--navds-loader-color-inverted-foreground);
32
+ stroke: var(--ac-loader-inverted-stroke, var(--a-border-on-inverted));
44
33
  }
45
34
 
46
35
  .navds-loader--inverted .navds-loader__background {
47
- stroke: var(--navds-loader-color-inverted-background);
36
+ stroke: var(--ac-loader-inverted-stroke-bg, var(--a-border-on-inverted-subtle));
48
37
  }
49
38
 
50
39
  .navds-loader--transparent .navds-loader__background {
51
- stroke: var(--navds-loader-color-transparent-background);
40
+ stroke: var(--a-surface-transparent);
52
41
  }
53
42
 
54
43
  .navds-loader--3xlarge {
55
44
  width: 5.5rem;
56
45
  stroke-width: 5;
57
46
 
58
- --navds-loader-background-stroke-width: 4.8;
47
+ --ac-loader-background-stroke-width: 4.8;
59
48
  }
60
49
 
61
50
  .navds-loader--2xlarge {
62
51
  width: 4rem;
63
52
  stroke-width: 6;
64
53
 
65
- --navds-loader-background-stroke-width: 5.8;
54
+ --ac-loader-background-stroke-width: 5.8;
66
55
  }
67
56
 
68
57
  .navds-loader--xlarge {
69
58
  width: 2.5rem;
70
59
  stroke-width: 6;
71
60
 
72
- --navds-loader-background-stroke-width: 5.8;
61
+ --ac-loader-background-stroke-width: 5.8;
73
62
  }
74
63
 
75
64
  .navds-loader--large {
76
65
  width: 2rem;
77
66
  stroke-width: 7;
78
67
 
79
- --navds-loader-background-stroke-width: 6.8;
68
+ --ac-loader-background-stroke-width: 6.8;
80
69
  }
81
70
 
82
71
  .navds-loader--medium {
83
72
  width: 1.5rem;
84
73
  stroke-width: 7;
85
74
 
86
- --navds-loader-background-stroke-width: 6.8;
75
+ --ac-loader-background-stroke-width: 6.8;
87
76
  }
88
77
 
89
78
  .navds-loader--small {
90
79
  width: 1.25rem;
91
80
  stroke-width: 8;
92
81
 
93
- --navds-loader-background-stroke-width: 7.8;
82
+ --ac-loader-background-stroke-width: 7.8;
94
83
  }
95
84
 
96
85
  .navds-loader--xsmall {
97
86
  width: 1rem;
98
87
  stroke-width: 8;
99
88
 
100
- --navds-loader-background-stroke-width: 7.8;
89
+ --ac-loader-background-stroke-width: 7.8;
101
90
  }
102
91
 
103
92
  @keyframes loader-rotate {
package/modal.css CHANGED
@@ -1,16 +1,10 @@
1
- :root,
2
- :host {
3
- --navds-modal-color-background: var(--navds-semantic-color-component-background-light);
4
- --navds-modal-color-overlay: rgb(38 38 38 / 0.7);
5
- }
6
-
7
1
  .ReactModal__Body--open {
8
2
  overflow: hidden;
9
3
  }
10
4
 
11
5
  .navds-modal {
12
- background-color: var(--navds-modal-color-background);
13
- border-radius: var(--navds-border-radius-medium);
6
+ background-color: var(--ac-modal-bg, var(--a-surface-default));
7
+ border-radius: var(--a-border-radius-medium);
14
8
  display: block;
15
9
  position: relative;
16
10
  overflow: auto;
@@ -18,24 +12,24 @@
18
12
  }
19
13
 
20
14
  .navds-modal__content {
21
- padding: var(--navds-spacing-4);
15
+ padding: var(--a-spacing-4);
22
16
  }
23
17
 
24
18
  .navds-modal:focus,
25
19
  .navds-modal--focus {
26
- box-shadow: var(--navds-shadow-focus);
20
+ box-shadow: var(--a-shadow-focus);
27
21
  outline: none;
28
22
  }
29
23
 
30
24
  .navds-modal__overlay {
31
25
  position: fixed;
32
- z-index: var(--navds-z-index-modal);
26
+ z-index: var(--a-z-index-modal);
33
27
  top: 0;
34
28
  bottom: 0;
35
29
  left: 0;
36
30
  right: 0;
37
- background-color: var(--navds-modal-color-overlay);
38
- padding: var(--navds-spacing-4);
31
+ background-color: var(--ac-modal-backdrop, var(--a-surface-backdrop));
32
+ padding: var(--a-spacing-4);
39
33
  display: flex;
40
34
  align-items: center;
41
35
  justify-content: center;
@@ -54,14 +48,13 @@
54
48
 
55
49
  .navds-modal__button {
56
50
  position: absolute;
57
- top: var(--navds-spacing-4);
58
- right: var(--navds-spacing-4);
51
+ top: var(--a-spacing-4);
52
+ right: var(--a-spacing-4);
59
53
  display: flex;
60
- padding: var(--navds-spacing-2);
54
+ padding: var(--a-spacing-2);
61
55
  }
62
56
 
63
57
  .navds-modal__button svg {
64
- /* 24x24px */
65
58
  height: 1.5rem;
66
59
  width: 1.5rem;
67
60
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@navikt/ds-css",
3
- "version": "1.5.9",
3
+ "version": "2.0.0-next.0",
4
4
  "description": "Css for NAV Designsystem components",
5
5
  "author": "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": "^1.5.9",
23
+ "@navikt/ds-tokens": "^2.0.0-next.0",
24
24
  "normalize.css": "^8.0.1",
25
25
  "postcss": "^8.4.0",
26
26
  "postcss-cli": "^9.0.0",