@navikt/ds-css 7.4.1 → 7.4.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 (14) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/darkside/alert.darkside.css +66 -64
  3. package/dist/component/index.css +2 -1
  4. package/dist/component/index.min.css +2 -2
  5. package/dist/component/table.css +1 -0
  6. package/dist/component/table.min.css +1 -1
  7. package/dist/components.css +2 -1
  8. package/dist/components.min.css +2 -2
  9. package/dist/global/tokens.css +1 -1
  10. package/dist/global/tokens.min.css +1 -1
  11. package/dist/index.css +2 -1
  12. package/dist/index.min.css +2 -2
  13. package/package.json +2 -2
  14. package/table.css +1 -0
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # @navikt/ds-css
2
2
 
3
+ ## 7.4.3
4
+
5
+ ### Patch Changes
6
+
7
+ - Table.ColumnHeader: Inherit text alignment in button ([#3319](https://github.com/navikt/aksel/pull/3319))
8
+
9
+ ## 7.4.2
10
+
3
11
  ## 7.4.1
4
12
 
5
13
  ### Patch Changes
package/darkside/alert.darkside.css CHANGED
@@ -1,101 +1,89 @@
1
1
  .navds-alert {
2
- border-radius: var(--a-border-radius-medium);
2
+ border-radius: var(--ax-border-radius-xlarge);
3
3
  border: 1px solid;
4
- padding: var(--a-spacing-4);
4
+ padding: var(--ax-spacing-4);
5
5
  display: flex;
6
- gap: var(--a-spacing-3);
6
+ gap: var(--ax-spacing-3);
7
7
  align-items: center;
8
- }
9
8
 
10
- .navds-alert--small.navds-alert--close-button {
11
- align-items: flex-start;
9
+ @media (forced-colors: active) {
10
+ border: 1px solid canvastext;
11
+ background-color: canvas;
12
+ color: canvastext;
13
+ }
12
14
  }
13
15
 
14
16
  .navds-alert__wrapper--maxwidth {
15
17
  max-width: 43.5rem;
16
18
  }
17
19
 
18
- .navds-alert--close-button > .navds-alert__wrapper {
19
- margin-block-start: var(--a-spacing-05);
20
- }
21
-
22
- .navds-alert--small.navds-alert--close-button > .navds-alert__wrapper {
23
- margin-block-start: var(--a-spacing-1);
24
- }
25
-
26
- .navds-alert--small {
27
- padding: var(--a-spacing-2) var(--a-spacing-4);
28
- gap: var(--a-spacing-2);
29
- }
30
-
31
- .navds-alert--full-width {
32
- border-radius: 0;
33
- }
34
-
35
- .navds-alert > .navds-alert__icon {
20
+ .navds-alert__icon {
36
21
  flex-shrink: 0;
37
22
  font-size: 1.5rem;
38
23
  align-self: flex-start;
39
- height: var(--a-font-line-height-xlarge);
40
- background: radial-gradient(circle, var(--a-surface-default) 47%, 0, transparent);
24
+ height: var(--ax-font-line-height-xlarge);
41
25
  }
42
26
 
43
- .navds-alert--small > .navds-alert__icon {
44
- margin-block-start: 0;
45
- height: var(--a-font-line-height-large);
46
- }
27
+ .navds-alert--small {
28
+ padding: var(--ax-spacing-2) var(--ax-spacing-4);
29
+ gap: var(--ax-spacing-2);
47
30
 
48
- .navds-alert--close-button > .navds-alert__icon {
49
- margin-block-start: var(--a-spacing-05);
31
+ > .navds-alert__icon {
32
+ margin-block-start: 0;
33
+ height: var(--ax-font-line-height-large);
34
+ }
50
35
  }
51
36
 
52
- .navds-alert--small.navds-alert--close-button > .navds-alert__icon {
53
- margin-block-start: var(--a-spacing-1);
54
- }
37
+ /* ----------------------------- Alert variants ----------------------------- */
38
+ .navds-alert--info {
39
+ border-color: var(--ax-border-info);
40
+ background-color: var(--ax-bg-info-moderate);
55
41
 
56
- .navds-alert--error {
57
- border-color: var(--ac-alert-error-border, var(--a-border-danger));
58
- background-color: var(--ac-alert-error-bg, var(--a-surface-danger-subtle));
42
+ > .navds-alert__icon {
43
+ color: var(--ax-text-info-icon);
44
+ }
59
45
  }
60
46
 
61
- .navds-alert--error > .navds-alert__icon {
62
- color: var(--ac-alert-icon-error-color, var(--a-icon-danger));
63
- }
47
+ .navds-alert--success {
48
+ border-color: var(--ax-border-success);
49
+ background-color: var(--ax-bg-success-moderate);
64
50
 
65
- .navds-alert--warning {
66
- border-color: var(--ac-alert-warning-border, var(--a-border-warning));
67
- background-color: var(--ac-alert-warning-bg, var(--a-surface-warning-subtle));
51
+ > .navds-alert__icon {
52
+ color: var(--ax-text-success-icon);
53
+ }
68
54
  }
69
55
 
70
- .navds-alert--warning > .navds-alert__icon {
71
- background: radial-gradient(circle at 50% 57%, var(--a-surface-default) 30%, 0, transparent);
72
- color: var(--ac-alert-icon-warning-color, var(--a-icon-warning));
73
- }
56
+ .navds-alert--warning {
57
+ border-color: var(--ax-border-warning);
58
+ background-color: var(--ax-bg-warning-moderate);
74
59
 
75
- .navds-alert--info {
76
- border-color: var(--ac-alert-info-border, var(--a-border-info));
77
- background-color: var(--ac-alert-info-bg, var(--a-surface-info-subtle));
60
+ > .navds-alert__icon {
61
+ color: var(--ax-text-warning-icon);
62
+ }
78
63
  }
79
64
 
80
- .navds-alert--info > .navds-alert__icon {
81
- color: var(--ac-alert-icon-info-color, var(--a-icon-info));
82
- }
65
+ .navds-alert--error {
66
+ border-color: var(--ax-border-danger);
67
+ background-color: var(--ax-bg-danger-moderate);
83
68
 
84
- .navds-alert--success {
85
- border-color: var(--ac-alert-success-border, var(--a-border-success));
86
- background-color: var(--ac-alert-success-bg, var(--a-surface-success-subtle));
69
+ > .navds-alert__icon {
70
+ color: var(--ax-text-danger-icon);
71
+ }
87
72
  }
88
73
 
89
- .navds-alert--success > .navds-alert__icon {
90
- color: var(--ac-alert-icon-success-color, var(--a-icon-success));
74
+ /* ----------------------------- Alert fullwidth ---------------------------- */
75
+ .navds-alert--full-width {
76
+ border-radius: 0;
91
77
  }
92
78
 
79
+ /* ------------------------------ Alert inline ------------------------------ */
93
80
  .navds-alert--inline {
94
81
  background-color: transparent;
95
82
  border: none;
96
83
  padding: 0;
97
84
  }
98
85
 
86
+ /* ------------------------- Alert with close button ------------------------ */
99
87
  .navds-alert__button-wrapper {
100
88
  align-self: flex-start;
101
89
  flex: 1;
@@ -104,10 +92,24 @@
104
92
  justify-content: flex-end;
105
93
  }
106
94
 
107
- @media (forced-colors: active) {
108
- .navds-alert {
109
- border: 1px solid canvastext;
110
- background-color: canvas;
111
- color: canvastext;
95
+ .navds-alert--close-button {
96
+ > .navds-alert__wrapper {
97
+ margin-block-start: var(--ax-spacing-05);
98
+ }
99
+
100
+ > .navds-alert__icon {
101
+ margin-block-start: var(--ax-spacing-05);
102
+ }
103
+
104
+ &.navds-alert--small {
105
+ align-items: flex-start;
106
+
107
+ > .navds-alert__wrapper {
108
+ margin-block-start: var(--ax-spacing-1);
109
+ }
110
+
111
+ > .navds-alert__icon {
112
+ margin-block-start: var(--ax-spacing-1);
113
+ }
112
114
  }
113
115
  }
package/dist/component/index.css CHANGED
@@ -5,7 +5,7 @@
5
5
  */
6
6
 
7
7
  :root, :host {
8
- --a-version: "7.4.1";
8
+ --a-version: "7.4.3";
9
9
  --a-spacing-1-alt: 0.375rem;
10
10
  --a-spacing-05: 0.125rem;
11
11
  --a-spacing-32: 8rem;
@@ -8340,6 +8340,7 @@ button.navds-stepper__step {
8340
8340
  align-items: center;
8341
8341
  line-height: inherit;
8342
8342
  font-weight: inherit;
8343
+ text-align: inherit;
8343
8344
  }
8344
8345
 
8345
8346
  .navds-table--small .navds-table__sort-button {