@navikt/ds-css 0.7.1 → 0.8.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 (38) hide show
  1. package/LICENCE +31 -0
  2. package/accordion-menu.css +19 -6
  3. package/accordion.css +34 -46
  4. package/alert.css +82 -47
  5. package/baseline/utility.css +5 -2
  6. package/button.css +143 -63
  7. package/card.css +25 -11
  8. package/copy-to-clipboard.css +0 -8
  9. package/dist/index.css +1080 -523
  10. package/form/checkbox-group.css +3 -3
  11. package/form/checkbox.css +41 -19
  12. package/form/confirmation-panel.css +46 -16
  13. package/form/error-message.css +5 -1
  14. package/form/error-summary.css +9 -4
  15. package/form/fieldset.css +1 -1
  16. package/form/form.css +2 -2
  17. package/form/radio-group.css +3 -3
  18. package/form/radio.css +49 -22
  19. package/form/search-field.css +35 -5
  20. package/form/select.css +21 -13
  21. package/form/text-field.css +32 -14
  22. package/form/textarea.css +25 -13
  23. package/guide-panel.css +76 -0
  24. package/help-text.css +54 -0
  25. package/index.css +6 -2
  26. package/internal-header.css +12 -6
  27. package/link-panel.css +18 -6
  28. package/link.css +30 -10
  29. package/loader.css +29 -17
  30. package/modal.css +12 -5
  31. package/package.json +4 -3
  32. package/page-header.css +70 -0
  33. package/panel.css +7 -3
  34. package/popover.css +24 -15
  35. package/speech-bubble.css +15 -5
  36. package/tag.css +38 -14
  37. package/typography.css +64 -45
  38. package/header.css +0 -63
package/form/checkbox-group.css CHANGED
@@ -1,13 +1,13 @@
1
- .navds-checkbox-group--s > .navds-checkboxes {
1
+ .navds-checkbox-group--small > .navds-checkboxes {
2
2
  display: flex;
3
3
  flex-direction: column;
4
4
  gap: 4px;
5
5
  }
6
6
 
7
- .navds-fieldset.navds-checkbox-group--m > .navds-checkboxes {
7
+ .navds-fieldset.navds-checkbox-group--medium > .navds-checkboxes {
8
8
  margin-top: 0;
9
9
  }
10
10
 
11
- .navds-fieldset.navds-checkbox-group--m > .navds-fieldset__error {
11
+ .navds-fieldset.navds-checkbox-group--medium > .navds-fieldset__error {
12
12
  margin-top: 0;
13
13
  }
package/form/checkbox.css CHANGED
@@ -1,3 +1,25 @@
1
+ :root {
2
+ --navds-checkbox-color-background: var(--navds-color-white);
3
+ --navds-checkbox-color-border: var(--navds-color-gray-60);
4
+ --navds-checkbox-color-label-hover: var(--navds-color-blue-50);
5
+ --navds-checkbox-color-border-hover: var(--navds-color-blue-50);
6
+ --navds-checkbox-color-background-hover: var(--navds-color-blue-10);
7
+ --navds-checkbox-color-description: var(--navds-color-gray-80);
8
+ --navds-checkbox-color-border-checked: var(--navds-color-blue-50);
9
+ --navds-checkbox-color-background-checked: var(--navds-color-blue-50);
10
+ --navds-checkbox-color-shadow-error: var(--navds-color-red-50);
11
+ --navds-checkbox-color-border-error: var(--navds-color-red-50);
12
+
13
+ /* Disabled */
14
+ --navds-checkbox-color-label-disabled: var(--navds-color-gray-40);
15
+ --navds-checkbox-color-border-disabled: var(--navds-color-gray-60);
16
+ --navds-checkbox-color-background-disabled: var(--navds-color-gray-10);
17
+ --navds-checkbox-color-border-checked-disabled: var(--navds-color-gray-40);
18
+ --navds-checkbox-color-background-checked-disabled: var(
19
+ --navds-color-gray-40
20
+ );
21
+ }
22
+
1
23
  .navds-checkbox {
2
24
  position: relative;
3
25
  padding: var(--navds-spacing-3) 0;
@@ -24,7 +46,7 @@
24
46
 
25
47
  .navds-checkbox__description {
26
48
  padding-left: calc(48px - 12px);
27
- color: var(--navds-color-gray-80);
49
+ color: var(--navds-checkbox-color-description);
28
50
  }
29
51
 
30
52
  .navds-checkbox--with-description {
@@ -45,37 +67,37 @@
45
67
 
46
68
  .navds-checkbox__label::before {
47
69
  content: "";
48
- background-color: white;
49
- border: 1px solid var(--navds-color-border);
70
+ background-color: var(--navds-checkbox-color-background);
71
+ border: 1px solid var(--navds-checkbox-color-border);
50
72
  width: 1.5rem;
51
73
  height: 1.5rem;
52
74
  border-radius: 4px;
53
75
  flex-shrink: 0;
54
76
  }
55
77
 
56
- .navds-checkbox--s {
78
+ .navds-checkbox--small {
57
79
  padding: var(--navds-spacing-1) 0;
58
80
  }
59
81
 
60
- .navds-checkbox--s > .navds-checkbox__input {
82
+ .navds-checkbox--small > .navds-checkbox__input {
61
83
  width: 24px;
62
84
  height: 24px;
63
85
  top: 2px;
64
86
  left: 0;
65
87
  }
66
88
 
67
- .navds-checkbox--s > .navds-checkbox__label::before {
89
+ .navds-checkbox--small > .navds-checkbox__label::before {
68
90
  margin-top: -2px;
69
91
  margin-bottom: -2px;
70
92
  }
71
93
 
72
94
  .navds-checkbox__input:hover + .navds-checkbox__label {
73
- color: var(--navds-color-blue-50);
95
+ color: var(--navds-checkbox-color-label-hover);
74
96
  }
75
97
 
76
98
  .navds-checkbox__input:hover + .navds-checkbox__label::before {
77
- border-color: var(--navds-color-blue-50);
78
- background-color: var(--navds-color-blue-10);
99
+ border-color: var(--navds-checkbox-color-border-hover);
100
+ background-color: var(--navds-checkbox-color-background-hover);
79
101
  }
80
102
 
81
103
  .navds-checkbox__input:focus + .navds-checkbox__label::before {
@@ -87,8 +109,8 @@
87
109
  background-position: center center;
88
110
  background-repeat: no-repeat;
89
111
  background-size: 75%;
90
- border: 2px solid var(--navds-color-blue-50);
91
- background-color: var(--navds-color-blue-50);
112
+ border: 2px solid var(--navds-checkbox-color-border-checked);
113
+ background-color: var(--navds-checkbox-color-background-checked);
92
114
  }
93
115
 
94
116
  .navds-checkbox__input:checked:focus + .navds-checkbox__label::before {
@@ -99,26 +121,26 @@
99
121
  .navds-checkbox--error
100
122
  > .navds-checkbox__input:not(:hover):not(:focus):not(:disabled):not(:checked)
101
123
  + .navds-checkbox__label::before {
102
- box-shadow: 0 0 0 1px var(--navds-color-red-50);
103
- border-color: var(--navds-color-red-50);
124
+ box-shadow: 0 0 0 1px var(--navds-checkbox-color-shadow-error);
125
+ border-color: var(--navds-checkbox-color-border-error);
104
126
  }
105
127
 
106
- .navds-checkbox--s .navds-error-message {
128
+ .navds-checkbox--small .navds-error-message {
107
129
  margin-top: 4px;
108
130
  }
109
131
 
110
132
  .navds-checkbox__input:disabled,
111
133
  .navds-checkbox__input:disabled + .navds-checkbox__label {
112
- color: var(--navds-color-gray-40);
134
+ color: var(--navds-checkbox-color-label-disabled);
113
135
  cursor: not-allowed;
114
136
  }
115
137
 
116
138
  .navds-checkbox__input:disabled + .navds-checkbox__label::before {
117
- background-color: var(--navds-color-gray-10);
118
- border-color: var(--navds-color-gray-60);
139
+ background-color: var(--navds-checkbox-color-background-disabled);
140
+ border-color: var(--navds-checkbox-color-border-disabled);
119
141
  }
120
142
 
121
143
  .navds-checkbox__input:disabled:checked + .navds-checkbox__label::before {
122
- background-color: var(--navds-color-gray-40);
123
- border-color: var(--navds-color-gray-40);
144
+ background-color: var(--navds-checkbox-color-background-checked-disabled);
145
+ border-color: var(--navds-checkbox-color-border-checked-disabled);
124
146
  }
package/form/confirmation-panel.css CHANGED
@@ -1,10 +1,40 @@
1
+ :root {
2
+ --navds-confirmation-panel-color-background: var(
3
+ --navds-color-warning-background
4
+ );
5
+ --navds-confirmation-panel-color-background-checked: var(
6
+ --navds-color-success-background
7
+ );
8
+ --navds-confirmation-panel-color-border-checked: var(
9
+ --navds-color-success-background
10
+ );
11
+ --navds-confirmation-panel-color-background-error: var(
12
+ --navds-color-error-background
13
+ );
14
+ --navds-confirmation-panel-color-checkbox-background-checked-hover: var(
15
+ --navds-color-green-70
16
+ );
17
+ --navds-confirmation-panel-color-checkbox-border-checked-hover: var(
18
+ --navds-color-green-70
19
+ );
20
+ --navds-confirmation-panel-color-checkbox-background-checked: var(
21
+ --navds-color-green-50
22
+ );
23
+ --navds-confirmation-panel-color-checkbox-border-checked: var(
24
+ --navds-color-green-50
25
+ );
26
+ --navds-confirmation-panel-color-checkbox-label-checked: var(
27
+ --navds-color-darkgray
28
+ );
29
+ }
30
+
1
31
  .navds-confirmation-panel {
2
32
  display: flex;
3
33
  flex-direction: column;
4
34
  gap: var(--navds-spacing-4);
5
35
  padding: var(--navds-spacing-4);
6
36
  border-radius: 4px;
7
- background-color: #ffeccc;
37
+ background-color: var(--navds-confirmation-panel-color-background);
8
38
  transition: background-color linear 100ms;
9
39
  }
10
40
 
@@ -12,27 +42,21 @@
12
42
  max-width: 80ch;
13
43
  }
14
44
 
15
- .navds-confirmation-panel--s {
45
+ .navds-confirmation-panel--small {
16
46
  padding: var(--navds-spacing-3);
17
47
  gap: var(--navds-spacing-2);
18
48
  }
19
49
 
20
50
  .navds-confirmation-panel--checked {
21
- background-color: #ccf1d6;
22
- border-color: #ccf1d6;
51
+ background-color: var(--navds-confirmation-panel-color-background-checked);
52
+ border-color: var(--navds-confirmation-panel-color-border-checked);
23
53
  }
24
54
 
25
55
  .navds-confirmation-panel--error {
26
- background-color: #f3e3e3;
56
+ background-color: var(--navds-confirmation-panel-color-background-error);
27
57
  border: 1px solid transparent;
28
58
  }
29
59
 
30
- .navds-confirmation-panel--checked
31
- > .navds-confirmation-panel__content
32
- .navds-link:not(:focus) {
33
- color: var(--navds-color-darkgray);
34
- }
35
-
36
60
  .navds-confirmation-panel
37
61
  .navds-checkbox__input:hover
38
62
  + .navds-checkbox__label {
@@ -42,23 +66,29 @@
42
66
  .navds-confirmation-panel--checked
43
67
  .navds-checkbox__input:hover
44
68
  + .navds-checkbox__label {
45
- color: var(--navds-color-darkgray);
69
+ color: var(--navds-confirmation-panel-color-checkbox-label-checked);
46
70
  }
47
71
 
48
72
  .navds-confirmation-panel--checked
49
73
  .navds-checkbox__input
50
74
  + .navds-checkbox__label::before {
51
75
  transition: none;
52
- background-color: var(--navds-color-green-50);
53
- border-color: var(--navds-color-green-50);
76
+ background-color: var(
77
+ --navds-confirmation-panel-color-checkbox-background-checked
78
+ );
79
+ border-color: var(--navds-confirmation-panel-color-checkbox-border-checked);
54
80
  background-image: var(--navds-checkmark-image-white);
55
81
  }
56
82
 
57
83
  .navds-confirmation-panel--checked
58
84
  .navds-checkbox__input:hover
59
85
  + .navds-checkbox__label::before {
60
- background-color: var(--navds-color-green-70);
61
- border-color: var(--navds-color-green-70);
86
+ background-color: var(
87
+ --navds-confirmation-panel-color-checkbox-background-checked-hover
88
+ );
89
+ border-color: var(
90
+ --navds-confirmation-panel-color-checkbox-border-checked-hover
91
+ );
62
92
  }
63
93
 
64
94
  .navds-confirmation-panel--checked
package/form/error-message.css CHANGED
@@ -1,4 +1,8 @@
1
+ :root {
2
+ --navds-error-message-color-text: var(--navds-color-text-error);
3
+ }
4
+
1
5
  .navds-error-message {
2
6
  display: block;
3
- color: var(--navds-color-red-50);
7
+ color: var(--navds-error-message-color-text);
4
8
  }
package/form/error-summary.css CHANGED
@@ -1,10 +1,15 @@
1
+ :root {
2
+ --navds-error-summary-color-background: var(--navds-color-white);
3
+ --navds-error-summary-color-border: var(--navds-color-error-border);
4
+ }
5
+
1
6
  .navds-error-summary {
2
- background-color: #fff;
7
+ background-color: var(--navds-error-summary-color-background);
3
8
  padding: var(--navds-spacing-4);
4
- border: 4px solid #ba3a26;
9
+ border: 4px solid var(--navds-error-summary-color-border);
5
10
  }
6
11
 
7
- .navds-error-summary--s {
12
+ .navds-error-summary--small {
8
13
  padding: var(--navds-spacing-2);
9
14
  }
10
15
 
@@ -20,6 +25,6 @@
20
25
  gap: 0.25rem;
21
26
  }
22
27
 
23
- .navds-error-summary--s > .navds-error-summary__list {
28
+ .navds-error-summary--small > .navds-error-summary__list {
24
29
  margin: 0.5rem 0;
25
30
  }
package/form/fieldset.css CHANGED
@@ -9,7 +9,7 @@
9
9
  margin-top: 8px;
10
10
  }
11
11
 
12
- .navds-fieldset--s > :not(:first-child):not(:empty) {
12
+ .navds-fieldset--small > :not(:first-child):not(:empty) {
13
13
  margin-top: 4px;
14
14
  }
15
15
 
package/form/form.css CHANGED
@@ -3,8 +3,8 @@
3
3
  margin-top: 8px;
4
4
  }
5
5
 
6
- .navds-form-field--s > :not(:first-child):not(:empty),
7
- .navds-form-field--s > input:not(:first-child) {
6
+ .navds-form-field--small > :not(:first-child):not(:empty),
7
+ .navds-form-field--small > input:not(:first-child) {
8
8
  margin-top: 4px;
9
9
  }
10
10
 
package/form/radio-group.css CHANGED
@@ -1,13 +1,13 @@
1
- .navds-radio-group--s > .navds-radio-buttons {
1
+ .navds-radio-group--small > .navds-radio-buttons {
2
2
  display: flex;
3
3
  flex-direction: column;
4
4
  gap: 4px;
5
5
  }
6
6
 
7
- .navds-fieldset.navds-radio-group--m > .navds-radio-buttons {
7
+ .navds-fieldset.navds-radio-group--medium > .navds-radio-buttons {
8
8
  margin-top: 0;
9
9
  }
10
10
 
11
- .navds-fieldset.navds-radio-group--m > .navds-fieldset__error {
11
+ .navds-fieldset.navds-radio-group--medium > .navds-fieldset__error {
12
12
  margin-top: 0;
13
13
  }
package/form/radio.css CHANGED
@@ -1,3 +1,27 @@
1
+ :root {
2
+ --navds-radio-color-description: var(--navds-color-gray-80);
3
+ --navds-radio-color-background: var(--navds-color-white);
4
+ --navds-radio-color-border: var(--navds-color-gray-60);
5
+ --navds-radio-color-label-hover: var(--navds-color-blue-50);
6
+ --navds-radio-color-border-hover: var(--navds-color-blue-50);
7
+ --navds-radio-color-background-hover: var(--navds-color-blue-10);
8
+ --navds-radio-color-border-checked: var(--navds-color-blue-50);
9
+ --navds-radio-color-shadow-checked: var(--navds-color-blue-50);
10
+ --navds-radio-color-shadow-checked-focus: var(--navds-color-blue-80);
11
+ --navds-radio-color-shadow-background-checked-focus: var(--navds-color-white);
12
+ --navds-radio-color-shadow-dot-checked-focus: var(--navds-color-blue-50);
13
+ --navds-radio-color-shadow-error: var(--navds-color-red-50);
14
+ --navds-radio-color-border-error: var(--navds-color-red-50);
15
+
16
+ /* Disabled */
17
+ --navds-radio-color-background-disabled: var(--navds-color-gray-10);
18
+ --navds-radio-color-border-disabled: var(--navds-color-gray-60);
19
+ --navds-radio-color-label-disabled: var(--navds-color-gray-40);
20
+ --navds-radio-color-background-disabled-checked: var(--navds-color-gray-40);
21
+ --navds-radio-color-border-disabled-checked: var(--navds-color-gray-40);
22
+ --navds-radio-color-shadow-disabled-checked: var(--navds-color-gray-40);
23
+ }
24
+
1
25
  .navds-radio {
2
26
  position: relative;
3
27
  padding: var(--navds-spacing-3) 0;
@@ -33,7 +57,7 @@
33
57
 
34
58
  .navds-radio__description {
35
59
  padding-left: calc(48px - 12px);
36
- color: var(--navds-color-gray-80);
60
+ color: var(--navds-radio-color-description);
37
61
  }
38
62
 
39
63
  .navds-radio--with-description {
@@ -46,8 +70,8 @@
46
70
 
47
71
  .navds-radio__label::before {
48
72
  content: "";
49
- background-color: white;
50
- border: 1px solid var(--navds-color-border);
73
+ background-color: var(--navds-radio-color-background);
74
+ border: 1px solid var(--navds-radio-color-border);
51
75
  width: 1.5rem;
52
76
  height: 1.5rem;
53
77
  border-radius: 4px;
@@ -55,29 +79,29 @@
55
79
  border-radius: 50%;
56
80
  }
57
81
 
58
- .navds-radio--s {
82
+ .navds-radio--small {
59
83
  padding: var(--navds-spacing-1) 0;
60
84
  }
61
85
 
62
- .navds-radio--s > .navds-radio__input {
86
+ .navds-radio--small > .navds-radio__input {
63
87
  width: 24px;
64
88
  height: 24px;
65
89
  top: 2px;
66
90
  left: 0;
67
91
  }
68
92
 
69
- .navds-radio--s > .navds-radio__label::before {
93
+ .navds-radio--small > .navds-radio__label::before {
70
94
  margin-top: -2px;
71
95
  margin-bottom: -2px;
72
96
  }
73
97
 
74
98
  .navds-radio__input:hover + .navds-radio__label {
75
- color: var(--navds-color-blue-50);
99
+ color: var(--navds-radio-color-label-hover);
76
100
  }
77
101
 
78
102
  .navds-radio__input:hover + .navds-radio__label::before {
79
- border-color: var(--navds-color-blue-50);
80
- background-color: var(--navds-color-blue-10);
103
+ border-color: var(--navds-radio-color-border-hover);
104
+ background-color: var(--navds-radio-color-background-hover);
81
105
  }
82
106
 
83
107
  .navds-radio__input:focus + .navds-radio__label::before {
@@ -85,40 +109,43 @@
85
109
  }
86
110
 
87
111
  .navds-radio__input:checked + .navds-radio__label::before {
88
- border: 2px solid var(--navds-color-blue-50);
89
- box-shadow: 0 0 0 3px #fff inset, 0 0 0 2rem var(--navds-color-blue-50) inset;
112
+ border: 2px solid var(--navds-radio-color-border-checked);
113
+ box-shadow: 0 0 0 3px #fff inset,
114
+ 0 0 0 2rem var(--navds-radio-color-shadow-checked) inset;
90
115
  }
91
116
 
92
117
  .navds-radio__input:checked:focus + .navds-radio__label::before {
93
118
  transition: box-shadow 200ms cubic-bezier(0.465, 0.183, 0.153, 0.946);
94
- box-shadow: 0 0 0 3px var(--navds-color-blue-80), 0 0 0 3px #fff inset,
95
- 0 0 0 2rem var(--navds-color-blue-50) inset;
119
+ box-shadow: 0 0 0 3px var(--navds-radio-color-shadow-checked-focus),
120
+ 0 0 0 3px var(--navds-radio-color-shadow-background-checked-focus) inset,
121
+ 0 0 0 2rem var(--navds-radio-color-shadow-dot-checked-focus) inset;
96
122
  }
97
123
 
98
124
  .navds-radio--error
99
125
  > .navds-radio__input:not(:hover):not(:focus):not(:disabled):not(:checked)
100
126
  + .navds-radio__label::before {
101
- box-shadow: 0 0 0 1px var(--navds-color-red-50);
102
- border-color: var(--navds-color-red-50);
127
+ box-shadow: 0 0 0 1px var(--navds-radio-color-shadow-error);
128
+ border-color: var(--navds-radio-color-border-error);
103
129
  }
104
130
 
105
- .navds-radio--s .navds-error-message {
131
+ .navds-radio--small .navds-error-message {
106
132
  margin-top: 4px;
107
133
  }
108
134
 
109
135
  .navds-radio__input:disabled,
110
136
  .navds-radio__input:disabled + .navds-radio__label {
111
- color: var(--navds-color-gray-40);
137
+ color: var(--navds-radio-color-label-disabled);
112
138
  cursor: not-allowed;
113
139
  }
114
140
 
115
141
  .navds-radio__input:disabled + .navds-radio__label::before {
116
- background-color: var(--navds-color-gray-10);
117
- border-color: var(--navds-color-gray-60);
142
+ background-color: var(--navds-radio-color-background-disabled);
143
+ border-color: var(--navds-radio-color-border-disabled);
118
144
  }
119
145
 
120
146
  .navds-radio__input:disabled:checked + .navds-radio__label::before {
121
- background-color: var(--navds-color-gray-40);
122
- border-color: var(--navds-color-gray-40);
123
- box-shadow: 0 0 0 3px #fff inset, 0 0 0 2rem var(--navds-color-gray-40) inset;
147
+ background-color: var(--navds-radio-color-background-disabled-checked);
148
+ border-color: var(--navds-radio-color-border-disabled-checked);
149
+ box-shadow: 0 0 0 3px #fff inset,
150
+ 0 0 0 2rem var(--navds-radio-color-shadow-disabled-checked) inset;
124
151
  }