@navikt/ds-css 0.16.5 → 0.16.8

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 (21) hide show
  1. package/alert.css +15 -37
  2. package/button.css +1 -1
  3. package/card.css +1 -1
  4. package/dist/index.css +48 -67
  5. package/form/confirmation-panel.css +1 -1
  6. package/form/radio-checkbox.css +3 -3
  7. package/form/select.css +1 -1
  8. package/form/switch.css +2 -2
  9. package/form/text-field.css +1 -1
  10. package/form/textarea.css +1 -1
  11. package/guide-panel.css +2 -2
  12. package/help-text.css +2 -2
  13. package/modal.css +1 -1
  14. package/package.json +2 -2
  15. package/pagination.css +6 -2
  16. package/panel.css +1 -1
  17. package/popover.css +1 -1
  18. package/speech-bubble.css +3 -3
  19. package/step-indicator.css +2 -2
  20. package/tag.css +1 -1
  21. package/toggle-group.css +2 -2
package/alert.css CHANGED
@@ -3,53 +3,32 @@
3
3
  --navds-alert-color-error-border: var(
4
4
  --navds-semantic-color-feedback-danger-border
5
5
  );
6
- --navds-alert-color-error-background: var(
7
- --navds-semantic-color-feedback-danger-background
8
- );
6
+ --navds-alert-color-error-background: var(--navds-global-color-red-50);
9
7
  --navds-alert-color-warning-border: var(
10
8
  --navds-semantic-color-feedback-warning-border
11
9
  );
12
- --navds-alert-color-warning-background: var(
13
- --navds-semantic-color-feedback-warning-background
14
- );
10
+ --navds-alert-color-warning-background: var(--navds-global-color-orange-50);
15
11
  --navds-alert-color-info-border: var(
16
12
  --navds-semantic-color-feedback-info-border
17
13
  );
18
- --navds-alert-color-info-background: var(
19
- --navds-semantic-color-feedback-info-background
20
- );
14
+ --navds-alert-color-info-background: var(--navds-global-color-lightblue-50);
21
15
  --navds-alert-color-success-border: var(
22
16
  --navds-semantic-color-feedback-success-border
23
17
  );
24
- --navds-alert-color-success-background: var(
25
- --navds-semantic-color-feedback-success-background
26
- );
18
+ --navds-alert-color-success-background: var(--navds-global-color-green-50);
27
19
  --navds-alert-color-error-icon: var(
28
20
  --navds-semantic-color-feedback-danger-icon
29
21
  );
30
- --navds-alert-color-error-icon-background: var(
31
- --navds-semantic-color-component-background-light
32
- );
33
- --navds-alert-color-warning-icon: var(
34
- --navds-semantic-color-feedback-warning-icon
35
- );
36
- --navds-alert-color-warning-icon-background: var(
37
- --navds-semantic-color-component-background-inverted
38
- );
22
+ --navds-alert-color-warning-icon: var(--navds-global-color-orange-600);
39
23
  --navds-alert-color-info-icon: var(--navds-semantic-color-feedback-info-icon);
40
- --navds-alert-color-info-icon-background: var(
41
- --navds-semantic-color-component-background-light
42
- );
43
24
  --navds-alert-color-success-icon: var(
44
25
  --navds-semantic-color-feedback-success-icon
45
26
  );
46
- --navds-alert-color-success-icon-background: var(
47
- --navds-semantic-color-component-background-light
48
- );
27
+ --navds-alert-color-icon-background: var(--navds-global-color-white);
49
28
  }
50
29
 
51
30
  .navds-alert {
52
- border-radius: 4px;
31
+ border-radius: var(--navds-border-radius-medium);
53
32
  border: 1px solid;
54
33
  border-color: var(--navds-alert-color-border);
55
34
  padding: calc(var(--navds-spacing-4) + 1px) calc(var(--navds-spacing-4) + 1px);
@@ -91,7 +70,7 @@
91
70
  color: var(--navds-alert-color-error-icon);
92
71
  background: radial-gradient(
93
72
  circle,
94
- var(--navds-alert-color-error-icon-background) 50%,
73
+ var(--navds-alert-color-icon-background) 50%,
95
74
  0,
96
75
  transparent
97
76
  );
@@ -104,12 +83,11 @@
104
83
 
105
84
  .navds-alert--warning > .navds-alert__icon {
106
85
  color: var(--navds-alert-color-warning-icon);
107
- background: radial-gradient(
108
- circle,
109
- var(--navds-alert-color-warning-icon-background) 50%,
110
- 0,
111
- transparent
112
- );
86
+ background: linear-gradient(
87
+ var(--navds-alert-color-icon-background),
88
+ var(--navds-alert-color-icon-background)
89
+ )
90
+ center / 16% 60% no-repeat;
113
91
  }
114
92
 
115
93
  .navds-alert--info {
@@ -121,7 +99,7 @@
121
99
  color: var(--navds-alert-color-info-icon);
122
100
  background: radial-gradient(
123
101
  circle,
124
- var(--navds-alert-color-info-icon-background) 50%,
102
+ var(--navds-alert-color-icon-background) 50%,
125
103
  0,
126
104
  transparent
127
105
  );
@@ -136,7 +114,7 @@
136
114
  color: var(--navds-alert-color-success-icon);
137
115
  background: radial-gradient(
138
116
  circle,
139
- var(--navds-alert-color-success-icon-background) 50%,
117
+ var(--navds-alert-color-icon-background) 50%,
140
118
  0,
141
119
  transparent
142
120
  );
package/button.css CHANGED
@@ -88,7 +88,7 @@
88
88
  text-decoration: none;
89
89
  border: none;
90
90
  background: none;
91
- border-radius: 2px;
91
+ border-radius: var(--navds-border-radius-small);
92
92
  min-width: 48px;
93
93
  padding: var(--navds-spacing-3);
94
94
  }
package/card.css CHANGED
@@ -27,7 +27,7 @@
27
27
  */
28
28
 
29
29
  .navds-card__micro {
30
- border-radius: 1rem;
30
+ border-radius: var(--navds-border-radius-full);
31
31
  color: var(--navds-card-micro-color-text);
32
32
  display: inline-flex;
33
33
  padding: var(--navds-spacing-1) var(--navds-spacing-2);