@navikt/ds-css 0.7.4 → 0.8.3

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 (37) hide show
  1. package/accordion-menu.css +19 -6
  2. package/accordion.css +34 -46
  3. package/alert.css +82 -47
  4. package/baseline/utility.css +5 -2
  5. package/button.css +144 -78
  6. package/card.css +25 -11
  7. package/copy-to-clipboard.css +0 -8
  8. package/dist/index.css +1076 -548
  9. package/form/checkbox-group.css +3 -3
  10. package/form/checkbox.css +41 -19
  11. package/form/confirmation-panel.css +46 -10
  12. package/form/error-message.css +5 -1
  13. package/form/error-summary.css +9 -4
  14. package/form/fieldset.css +1 -1
  15. package/form/form.css +2 -2
  16. package/form/radio-group.css +3 -3
  17. package/form/radio.css +49 -22
  18. package/form/search-field.css +18 -5
  19. package/form/select.css +21 -13
  20. package/form/text-field.css +32 -14
  21. package/form/textarea.css +25 -13
  22. package/guide-panel.css +76 -0
  23. package/help-text.css +54 -0
  24. package/index.css +6 -2
  25. package/internal-header.css +12 -6
  26. package/link-panel.css +18 -7
  27. package/link.css +26 -12
  28. package/loader.css +30 -18
  29. package/modal.css +12 -5
  30. package/package.json +6 -6
  31. package/page-header.css +70 -0
  32. package/panel.css +7 -3
  33. package/popover.css +24 -15
  34. package/speech-bubble.css +19 -6
  35. package/tag.css +38 -14
  36. package/typography.css +64 -45
  37. package/header.css +0 -63
package/popover.css CHANGED
@@ -1,9 +1,20 @@
1
+ :root {
2
+ --navds-popover-color-background: var(--navds-color-background);
3
+ --navds-popover-color-border: var(--navds-color-gray-40);
4
+ --navds-popover-color-shadow: var(--navds-color-gray-20);
5
+ }
6
+
1
7
  .navds-popover {
2
- z-index: var(--navds-z-index-popover-default);
3
- background-color: var(--navds-color-background);
4
- box-shadow: 0 0.05rem 0.25rem 0.125rem rgba(0, 0, 0, 0.08);
5
- border: var(--navds-border-default);
6
- border-radius: 2px;
8
+ z-index: var(--navds-z-index-popover);
9
+ background-color: var(--navds-popover-color-background);
10
+ box-shadow: 0 2px 4px 0 var(--navds-popover-color-shadow);
11
+ border: 1px solid;
12
+ border-color: var(--navds-popover-color-border);
13
+ border-radius: 4px;
14
+ }
15
+
16
+ .navds-popover__content {
17
+ padding: var(--navds-spacing-4);
7
18
  }
8
19
 
9
20
  .navds-popover--hidden {
@@ -16,22 +27,20 @@
16
27
  }
17
28
 
18
29
  .navds-popover__arrow {
19
- z-index: var(--navds-z-index-popover-arrow);
30
+ z-index: -1;
20
31
  }
21
32
 
22
33
  .navds-popover__arrow::before {
23
- content: "";
24
34
  display: block;
35
+ content: "";
36
+ transform: rotate(45deg);
37
+ background-color: var(--navds-popover-color-background);
38
+ border: 1px solid;
39
+ border-color: var(--navds-popover-color-border);
25
40
  width: 1rem;
26
41
  height: 1rem;
27
- transform: rotate(45deg);
28
- background-color: var(--navds-color-background);
29
- border: var(--navds-border-default);
30
- }
31
-
32
- .navds-popover__arrow::before .navds-popover--small {
33
- width: 0.67rem;
34
- height: 0.67rem;
42
+ top: 0;
43
+ left: 0;
35
44
  }
36
45
 
37
46
  .navds-popover[data-popper-placement^="top"] > .navds-popover__arrow {
package/speech-bubble.css CHANGED
@@ -1,3 +1,13 @@
1
+ :root {
2
+ --navds-speechbubble-color-background: var(--navds-color-gray-10);
3
+ --navds-speechbubble-color-shadow: var(--navds-color-gray-20);
4
+ --navds-speechbubble-color-illustration: var(--navds-color-darkgray);
5
+ --navds-speechbubble-color-illustration-background: var(
6
+ --navds-color-gray-20
7
+ );
8
+ --navds-speechbubble-color-detail-text: var(--navds-color-gray-60);
9
+ }
10
+
1
11
  .navds-speechbubble {
2
12
  display: flex;
3
13
  align-items: flex-end;
@@ -23,8 +33,8 @@
23
33
 
24
34
  .navds-speechbubble__illustration {
25
35
  align-items: center;
26
- background: var(--navds-color-gray-20);
27
- color: var(--navds-color-darkgray);
36
+ background: var(--navds-speechbubble-color-illustration-background);
37
+ color: var(--navds-speechbubble-color-illustration);
28
38
  border-radius: 50%;
29
39
  display: flex;
30
40
  flex-shrink: 0;
@@ -42,10 +52,10 @@
42
52
 
43
53
  .navds-speechbubble__bubble {
44
54
  padding: 1rem;
45
- box-shadow: 0 2px 4px 0 var(--navds-color-gray-20);
55
+ box-shadow: 0 2px 4px 0 var(--navds-speechbubble-color-shadow);
46
56
  width: fit-content;
47
57
  max-width: 37.5rem;
48
- background-color: var(--navds-color-gray-10);
58
+ background-color: var(--navds-speechbubble-color-background);
49
59
  border-radius: 12px;
50
60
  border-bottom-left-radius: 2px;
51
61
  display: flex;
@@ -61,9 +71,12 @@
61
71
  .navds-speechbubble--right .navds-speechbubble__bubble {
62
72
  border-radius: 12px;
63
73
  border-bottom-right-radius: 2px;
64
- align-items: flex-end;
65
74
  }
66
75
 
67
76
  .navds-speechbubble__top-text {
68
- color: var(--navds-color-gray-60);
77
+ color: var(--navds-speechbubble-color-detail-text);
78
+ }
79
+
80
+ .navds-speechbubble--right .navds-speechbubble__top-text {
81
+ align-self: flex-end;
69
82
  }
package/tag.css CHANGED
@@ -1,30 +1,54 @@
1
+ :root {
2
+ --navds-tag-color-border: var(--navds-color-gray-40);
3
+ --navds-tag-color-background: var(--navds-color-gray-10);
4
+ --navds-tag-color-info-background: var(--navds-color-tag-info-background);
5
+ --navds-tag-color-info-border: var(--navds-color-tag-info-border);
6
+ --navds-tag-color-warning-background: var(
7
+ --navds-color-tag-warning-background
8
+ );
9
+ --navds-tag-color-warning-border: var(--navds-color-tag-warning-border);
10
+ --navds-tag-color-success-background: var(
11
+ --navds-color-tag-success-background
12
+ );
13
+ --navds-tag-color-success-border: var(--navds-color-tag-success-border);
14
+ --navds-tag-color-error-background: var(--navds-color-tag-error-background);
15
+ --navds-tag-color-error-border: var(--navds-color-tag-error-border);
16
+ }
17
+
1
18
  .navds-tag {
19
+ border: 1px solid;
20
+ border-color: var(--navds-tag-color-border);
2
21
  border-radius: 4px;
3
- border: var(--navds-border-default);
4
- background-color: var(--navds-color-tag-info-background);
5
- border-color: var(--navds-color-tag-info-border);
6
- display: inline-block;
22
+ background-color: var(--navds-tag-color-background);
23
+ display: inline-flex;
24
+ align-items: center;
25
+ justify-content: center;
26
+ padding: 0.125rem var(--navds-spacing-3);
27
+ min-height: 32px;
28
+ }
7
29
 
8
- /* Padding calculated based on 16px font for 24px tall tag */
9
- padding: 0.0625rem var(--navds-spacing-2);
30
+ .navds-tag--small {
31
+ min-height: 24px;
32
+ padding-right: var(--navds-spacing-1);
33
+ padding-left: var(--navds-spacing-1);
10
34
  }
11
35
 
12
36
  .navds-tag--error {
13
- background-color: var(--navds-color-tag-error-background);
14
- border-color: var(--navds-color-tag-error-border);
37
+ background-color: var(--navds-tag-color-error-background);
38
+ border-color: var(--navds-tag-color-error-border);
15
39
  }
16
40
 
17
41
  .navds-tag--success {
18
- background-color: var(--navds-color-tag-success-background);
19
- border-color: var(--navds-color-tag-success-border);
42
+ background-color: var(--navds-tag-color-success-background);
43
+ border-color: var(--navds-tag-color-success-border);
20
44
  }
21
45
 
22
46
  .navds-tag--warning {
23
- background-color: var(--navds-color-tag-warning-background);
24
- border-color: var(--navds-color-tag-warning-border);
47
+ background-color: var(--navds-tag-color-warning-background);
48
+ border-color: var(--navds-tag-color-warning-border);
25
49
  }
26
50
 
27
51
  .navds-tag--info {
28
- background-color: var(--navds-color-tag-info-background);
29
- border-color: var(--navds-color-tag-info-border);
52
+ background-color: var(--navds-tag-color-info-background);
53
+ border-color: var(--navds-tag-color-info-border);
30
54
  }
package/typography.css CHANGED
@@ -1,64 +1,75 @@
1
- /* Title */
2
- .navds-title {
1
+ /* Heading */
2
+ .navds-heading {
3
3
  font-weight: var(--navds-font-weight-bold);
4
4
  margin: 0;
5
5
  }
6
6
 
7
- .navds-title--2xl {
8
- font-size: var(--navds-font-size-title-2xl);
7
+ .navds-heading--2xlarge {
8
+ font-size: var(--navds-font-size-heading-2xl);
9
9
  letter-spacing: -0.01em;
10
- line-height: var(--navds-font-line-height-s);
10
+ line-height: var(--navds-font-line-height-heading-2xl);
11
11
  }
12
12
 
13
- .navds-title--2xl.navds-typo--spacing {
13
+ .navds-heading--2xlarge.navds-typo--spacing {
14
14
  margin-bottom: var(--navds-spacing-5);
15
15
  }
16
16
 
17
- .navds-title--xl {
18
- font-size: var(--navds-font-size-title-xl);
17
+ .navds-heading--xlarge {
18
+ font-size: var(--navds-font-size-heading-xl);
19
19
  letter-spacing: -0.008em;
20
- line-height: var(--navds-font-line-height-s);
20
+ line-height: var(--navds-font-line-height-heading-xl);
21
21
  }
22
22
 
23
- .navds-title--xl.navds-typo--spacing {
23
+ .navds-heading--xlarge.navds-typo--spacing {
24
24
  margin-bottom: var(--navds-spacing-4);
25
25
  }
26
26
 
27
- .navds-title--l {
28
- font-size: var(--navds-font-size-title-l);
27
+ .navds-heading--large {
28
+ font-size: var(--navds-font-size-heading-l);
29
29
  letter-spacing: -0.004em;
30
- line-height: var(--navds-font-line-height-s);
30
+ line-height: var(--navds-font-line-height-heading-l);
31
31
  }
32
32
 
33
- .navds-title--l.navds-typo--spacing {
33
+ .navds-heading--large.navds-typo--spacing {
34
34
  margin-bottom: var(--navds-spacing-3);
35
35
  }
36
36
 
37
- .navds-title--m {
38
- font-size: var(--navds-font-size-title-m);
37
+ .navds-heading--medium {
38
+ font-size: var(--navds-font-size-heading-m);
39
39
  letter-spacing: -0.002em;
40
- line-height: var(--navds-font-line-height-s);
40
+ line-height: var(--navds-font-line-height-heading-m);
41
41
  }
42
42
 
43
- .navds-title--m.navds-typo--spacing {
43
+ .navds-heading--medium.navds-typo--spacing {
44
44
  margin-bottom: var(--navds-spacing-3);
45
45
  }
46
46
 
47
- .navds-title--s {
48
- font-size: var(--navds-font-size-title-s);
47
+ .navds-heading--small {
48
+ font-size: var(--navds-font-size-heading-s);
49
49
  letter-spacing: -0.001em;
50
- line-height: var(--navds-font-line-height-s);
50
+ line-height: var(--navds-font-line-height-heading-s);
51
51
  }
52
52
 
53
- .navds-title--s.navds-typo--spacing {
53
+ .navds-heading--small.navds-typo--spacing {
54
+ margin-bottom: var(--navds-spacing-3);
55
+ }
56
+
57
+ .navds-heading--xsmall {
58
+ font-size: var(--navds-font-size-heading-xs);
59
+ letter-spacing: -0.001em;
60
+ line-height: var(--navds-font-line-height-heading-xs);
61
+ }
62
+
63
+ .navds-heading--xsmall.navds-typo--spacing {
54
64
  margin-bottom: var(--navds-spacing-3);
55
65
  }
56
66
 
57
67
  /* Ingress */
58
68
  .navds-ingress {
59
69
  font-size: var(--navds-font-size-xl);
70
+ font-weight: var(--navds-font-weight-regular);
60
71
  letter-spacing: -0.001em;
61
- line-height: var(--navds-font-line-height-m);
72
+ line-height: var(--navds-font-line-height-xl);
62
73
  margin: 0;
63
74
  }
64
75
 
@@ -69,46 +80,54 @@
69
80
  /* Body */
70
81
  .navds-body-long {
71
82
  font-size: var(--navds-font-size-l);
83
+ font-weight: var(--navds-font-weight-regular);
72
84
  letter-spacing: 0;
73
- line-height: var(--navds-font-line-height-m);
85
+ line-height: var(--navds-font-line-height-xl);
74
86
  margin: 0;
75
87
  }
76
88
 
89
+ .navds-body-long.navds-typo--spacing {
90
+ margin-bottom: var(--navds-spacing-7);
91
+ }
92
+
93
+ .navds-body-long--small {
94
+ font-size: var(--navds-font-size-m);
95
+ letter-spacing: 0.002em;
96
+ line-height: var(--navds-font-line-height-l);
97
+ }
98
+
99
+ .navds-body-long--small.navds-typo--spacing {
100
+ margin-bottom: var(--navds-spacing-6);
101
+ }
102
+
77
103
  .navds-body-short {
78
104
  font-size: var(--navds-font-size-l);
105
+ font-weight: var(--navds-font-weight-regular);
79
106
  letter-spacing: 0;
80
- line-height: var(--navds-font-line-height-s);
107
+ line-height: var(--navds-font-line-height-l);
81
108
  margin: 0;
82
109
  }
83
110
 
84
- .navds-body-long.navds-typo--spacing {
85
- margin-bottom: var(--navds-spacing-7);
86
- }
87
-
88
111
  .navds-body-short.navds-typo--spacing {
89
112
  margin-bottom: var(--navds-spacing-3);
90
113
  }
91
114
 
92
- .navds-body--s {
115
+ .navds-body-short--small {
93
116
  font-size: var(--navds-font-size-m);
94
117
  letter-spacing: 0.002em;
95
- line-height: var(--navds-font-line-height-s);
96
- }
97
-
98
- .navds-body-long.navds-body--s.navds-typo--spacing {
99
- margin-bottom: var(--navds-spacing-6);
118
+ line-height: var(--navds-font-line-height-m);
100
119
  }
101
120
 
102
- .navds-body-short.navds-body--s.navds-typo--spacing {
121
+ .navds-body-short--small.navds-typo--spacing {
103
122
  margin-bottom: var(--navds-spacing-2);
104
123
  }
105
124
 
106
125
  /* Label */
107
126
  .navds-label {
108
127
  font-size: var(--navds-font-size-l);
109
- letter-spacing: 0;
110
- line-height: var(--navds-font-line-height-s);
111
128
  font-weight: var(--navds-font-weight-bold);
129
+ letter-spacing: 0;
130
+ line-height: var(--navds-font-line-height-l);
112
131
  margin: 0;
113
132
  }
114
133
 
@@ -116,22 +135,22 @@
116
135
  margin-bottom: var(--navds-spacing-3);
117
136
  }
118
137
 
119
- .navds-label--s {
138
+ .navds-label--small {
120
139
  font-size: var(--navds-font-size-m);
121
140
  letter-spacing: 0.002em;
122
- line-height: var(--navds-font-line-height-s);
141
+ line-height: var(--navds-font-line-height-m);
123
142
  }
124
143
 
125
- .navds-label--s.navds-typo--spacing {
144
+ .navds-label--small.navds-typo--spacing {
126
145
  margin-bottom: var(--navds-spacing-2);
127
146
  }
128
147
 
129
148
  /* Small text */
130
149
  .navds-detail {
131
150
  font-size: var(--navds-font-size-s);
132
- letter-spacing: 0.004em;
133
- line-height: var(--navds-font-line-height-s);
134
151
  font-weight: var(--navds-font-weight-bold);
152
+ letter-spacing: 0.004em;
153
+ line-height: var(--navds-font-line-height-m);
135
154
  margin: 0;
136
155
  }
137
156
 
@@ -139,10 +158,10 @@
139
158
  margin-bottom: var(--navds-spacing-2);
140
159
  }
141
160
 
142
- .navds-detail--s {
161
+ .navds-detail--small {
143
162
  font-weight: var(--navds-font-weight-regular);
144
163
  }
145
164
 
146
- .navds-detail--s.navds-typo--spacing {
165
+ .navds-detail--small.navds-typo--spacing {
147
166
  margin-bottom: var(--navds-spacing-2);
148
167
  }
package/header.css DELETED
@@ -1,63 +0,0 @@
1
- .navds-header {
2
- display: flex;
3
- justify-content: center;
4
- background-color: var(--navds-color-background);
5
- padding-top: 1.5rem;
6
- padding-bottom: 1.5rem;
7
- padding-left: calc((100vw - 100%) / 2);
8
- padding-right: calc((100vw - 100%) / 2);
9
- margin-left: calc((100vw - 100%) / -2);
10
- margin-right: calc((100vw - 100%) / -2);
11
- }
12
-
13
- .navds-header__wrapper {
14
- width: 100%;
15
- max-width: 56.5rem;
16
- text-align: start;
17
- }
18
-
19
- .navds-header__title {
20
- display: flex;
21
- margin: 0 auto;
22
- width: 100%;
23
- position: relative;
24
- flex-direction: column;
25
- }
26
-
27
- .navds-header--left > .navds-header__wrapper {
28
- text-align: start;
29
- }
30
-
31
- .navds-header--center > .navds-header__wrapper {
32
- text-align: center;
33
- }
34
-
35
- .navds-header__illustration {
36
- margin-right: 1.5rem;
37
- pointer-events: none;
38
- }
39
-
40
- .navds-header__illustration > svg {
41
- width: 5rem;
42
- height: 5rem;
43
- }
44
-
45
- .navds-header--situation {
46
- box-shadow: 0 -4px 0 var(--navds-color-orange-40) inset;
47
- }
48
- .navds-header--product {
49
- box-shadow: 0 -4px 0 var(--navds-color-green-40) inset;
50
- }
51
- .navds-header--guide {
52
- box-shadow: 0 -4px 0 var(--navds-color-deepblue-40) inset;
53
- }
54
-
55
- @media (max-width: 649px) {
56
- .navds-header__illustration > svg {
57
- width: 3rem;
58
- height: 3rem;
59
- }
60
- .navds-header__title {
61
- font-size: var(--navds-font-size-title-xl);
62
- }
63
- }