@navikt/ds-css 7.4.2 → 7.5.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 (20) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/darkside/accordion.darkside.css +122 -138
  3. package/darkside/action-menu.darkside.css +116 -137
  4. package/darkside/alert.darkside.css +66 -64
  5. package/darkside/baseline/theme.darkside.css +12 -9
  6. package/darkside/chat.darkside.css +49 -54
  7. package/darkside/chips.darkside.css +90 -148
  8. package/darkside/copybutton.darkside.css +103 -146
  9. package/dist/component/index.css +2 -1
  10. package/dist/component/index.min.css +2 -2
  11. package/dist/component/table.css +1 -0
  12. package/dist/component/table.min.css +1 -1
  13. package/dist/components.css +2 -1
  14. package/dist/components.min.css +2 -2
  15. package/dist/global/tokens.css +1 -1
  16. package/dist/global/tokens.min.css +1 -1
  17. package/dist/index.css +2 -1
  18. package/dist/index.min.css +2 -2
  19. package/package.json +2 -2
  20. package/table.css +1 -0
package/darkside/copybutton.darkside.css CHANGED
@@ -1,31 +1,42 @@
1
- [data-theme="dark"] {
2
- --__ac-copybutton-action-text: var(--a-blue-300);
3
- --__ac-copybutton-bg-hover: rgb(214 231 255 /0.13);
4
- --__ac-copybutton-icon-success: rgb(51 170 95 /1);
5
- --__ac-copybutton-neutral-text: rgb(231 240 254 /0.69);
6
- --__ac-copybutton-text: rgb(251 252 254 /0.96);
7
- }
8
-
9
- [data-theme="light"] {
10
- --__ac-copybutton-action-text: initial;
11
- --__ac-copybutton-bg-hover: initial;
12
- --__ac-copybutton-icon-success: initial;
13
- --__ac-copybutton-neutral-text: initial;
14
- --__ac-copybutton-text: initial;
15
- }
16
-
17
1
  .navds-copybutton {
18
- --__ac-copybutton-padding: var(--a-spacing-3) var(--a-spacing-5) var(--a-spacing-3) var(--a-spacing-4);
2
+ --__axc-copybutton-padding: var(--ax-spacing-3) var(--ax-spacing-5) var(--ax-spacing-3) var(--ax-spacing-4);
19
3
 
20
4
  cursor: pointer;
21
5
  margin: 0;
22
6
  text-decoration: none;
23
7
  border: none;
24
- background: none;
25
- border-radius: var(--ac-copybutton-border-radius, var(--a-border-radius-medium));
26
- padding: var(--__ac-copybutton-padding);
8
+ border-radius: var(--ax-border-radius-medium);
9
+ padding: var(--__axc-copybutton-padding);
27
10
  display: grid;
28
11
  place-content: center;
12
+ background-color: transparent;
13
+ transition: color 0.2s cubic-bezier(0.05, 0.7, 0.1, 1);
14
+
15
+ &.navds-copybutton--icon-only {
16
+ --__axc-copybutton-padding: var(--ax-spacing-3);
17
+ }
18
+
19
+ &.navds-copybutton--icon-right {
20
+ --__axc-copybutton-padding: var(--ax-spacing-3) var(--ax-spacing-4) var(--ax-spacing-3) var(--ax-spacing-5);
21
+ }
22
+
23
+ &:hover {
24
+ background-color: var(--ax-bg-neutral-moderate-hover);
25
+ }
26
+
27
+ &:focus-visible {
28
+ outline: 2px solid var(--ax-border-focus);
29
+ outline-offset: 2px;
30
+ }
31
+
32
+ &:disabled {
33
+ cursor: not-allowed;
34
+ opacity: 0.3;
35
+ }
36
+
37
+ &:disabled:hover {
38
+ background-color: transparent;
39
+ }
29
40
  }
30
41
 
31
42
  @media (forced-colors: active) {
@@ -33,76 +44,82 @@
33
44
  background-color: ButtonFace;
34
45
  border: solid 1px ButtonText;
35
46
  color: ButtonText;
36
- }
37
47
 
38
- .navds-copybutton.navds-copybutton:focus-visible {
39
- box-shadow: none;
40
- outline: 2px solid highlight;
41
- outline-offset: 2px;
48
+ &:disabled {
49
+ opacity: 1;
50
+ border-color: GrayText;
51
+ }
42
52
  }
43
53
  }
44
54
 
45
- .navds-copybutton--icon-right {
46
- --__ac-copybutton-padding: var(--a-spacing-3) var(--a-spacing-4) var(--a-spacing-3) var(--a-spacing-5);
47
- }
48
-
55
+ /* -------------------------- CopyButton small size ------------------------- */
49
56
  .navds-copybutton--small {
50
- --__ac-copybutton-padding: var(--a-spacing-1) var(--a-spacing-3) var(--a-spacing-1) var(--a-spacing-2);
51
-
52
57
  min-height: 2rem;
53
58
  min-width: 2rem;
54
- }
55
59
 
56
- .navds-copybutton--small.navds-copybutton--icon-right {
57
- --__ac-copybutton-padding: var(--a-spacing-1) var(--a-spacing-2) var(--a-spacing-1) var(--a-spacing-3);
60
+ --__axc-copybutton-padding: var(--ax-spacing-1) var(--ax-spacing-3) var(--ax-spacing-1) var(--ax-spacing-2);
61
+
62
+ &.navds-copybutton--icon-right {
63
+ --__axc-copybutton-padding: var(--ax-spacing-1) var(--ax-spacing-2) var(--ax-spacing-1) var(--ax-spacing-3);
64
+ }
65
+
66
+ &.navds-copybutton--icon-only {
67
+ --__axc-copybutton-padding: var(--ax-spacing-1);
68
+ }
69
+
70
+ & .navds-copybutton__icon {
71
+ font-size: 1.25rem;
72
+ }
73
+
74
+ & > .navds-copybutton__content {
75
+ gap: var(--ax-spacing-1-alt);
76
+ }
58
77
  }
59
78
 
79
+ /* ------------------------- CopyButton xsmall size ------------------------- */
60
80
  .navds-copybutton--xsmall {
61
- --__ac-copybutton-padding: var(--a-spacing-05) var(--a-spacing-2) var(--a-spacing-05) var(--a-spacing-1);
62
-
63
81
  min-height: 1.5rem;
64
82
  min-width: 1.5rem;
65
- }
66
83
 
67
- .navds-copybutton--xsmall.navds-copybutton--icon-right {
68
- --__ac-copybutton-padding: var(--a-spacing-05) var(--a-spacing-1) var(--a-spacing-05) var(--a-spacing-2);
69
- }
84
+ --__axc-copybutton-padding: var(--ax-spacing-05) var(--ax-spacing-2) var(--ax-spacing-05) var(--ax-spacing-1);
70
85
 
71
- .navds-copybutton--icon-only {
72
- --__ac-copybutton-padding: var(--a-spacing-3);
73
- }
86
+ &.navds-copybutton--icon-right {
87
+ --__axc-copybutton-padding: var(--ax-spacing-05) var(--ax-spacing-1) var(--ax-spacing-05) var(--ax-spacing-2);
88
+ }
74
89
 
75
- .navds-copybutton--small.navds-copybutton--icon-only {
76
- --__ac-copybutton-padding: var(--a-spacing-1);
77
- }
90
+ &.navds-copybutton--icon-only {
91
+ --__axc-copybutton-padding: var(--ax-spacing-05);
92
+ }
78
93
 
79
- .navds-copybutton--xsmall.navds-copybutton--icon-only {
80
- --__ac-copybutton-padding: var(--a-spacing-05);
94
+ & .navds-copybutton__icon {
95
+ font-size: 1.25rem;
96
+ }
97
+
98
+ & > .navds-copybutton__content {
99
+ gap: var(--ax-spacing-1);
100
+ }
81
101
  }
82
102
 
103
+ /* ----------------------------- CopyButton Icon ---------------------------- */
83
104
  .navds-copybutton__icon {
84
105
  font-size: 1.5rem;
85
106
  display: flex;
86
- }
87
107
 
88
- :where(.navds-copybutton--xsmall, .navds-copybutton--small) .navds-copybutton__icon {
89
- font-size: 1.25rem;
90
- }
91
-
92
- .navds-copybutton__icon:first-of-type {
93
- margin-left: -0.25rem;
94
- }
108
+ &:first-of-type {
109
+ margin-left: -0.25rem;
110
+ }
95
111
 
96
- .navds-copybutton__icon:last-of-type {
97
- margin-right: -0.25rem;
98
- }
112
+ &:last-of-type {
113
+ margin-right: -0.25rem;
114
+ }
99
115
 
100
- .navds-copybutton__icon:only-child {
101
- margin: 0;
116
+ &:only-child {
117
+ margin: 0;
118
+ }
102
119
  }
103
120
 
104
121
  .navds-copybutton--active .navds-copybutton__icon {
105
- animation: akselCopyButtonIconAnimation 2s cubic-bezier(0.215, 0.61, 0.355, 1);
122
+ animation: akselCopyButtonIconAnimation 2s cubic-bezier(0.05, 0.7, 0.1, 1);
106
123
  }
107
124
 
108
125
  @keyframes akselCopyButtonIconAnimation {
@@ -123,104 +140,44 @@
123
140
  }
124
141
  }
125
142
 
126
- :where(.navds-copybutton--small, .navds-copybutton--xsmall):where(:not(:only-child)) {
127
- margin: -0.125rem;
128
- }
143
+ /* ---------------------------- CopyButton Action --------------------------- */
144
+ .navds-copybutton--action {
145
+ color: var(--ax-text-accent);
129
146
 
130
- .navds-copybutton:focus-visible {
131
- outline: none;
132
- box-shadow: var(--a-shadow-focus);
133
- }
147
+ &.navds-copybutton--active {
148
+ color: var(--ax-text-success);
134
149
 
135
- @supports not selector(:focus-visible) {
136
- .navds-copybutton:focus {
137
- outline: none;
138
- box-shadow: var(--a-shadow-focus);
150
+ &:hover {
151
+ color: var(--ax-text-success-strong);
152
+ }
139
153
  }
140
- }
141
154
 
142
- /* Variant/action */
143
- .navds-copybutton--action {
144
- color: var(--ac-copybutton-action-text, var(--__ac-copybutton-action-text, var(--a-text-action)));
145
- background-color: var(--ac-copybutton-action-bg, var(--a-surface-transparent));
146
- }
147
-
148
- .navds-copybutton--action:hover {
149
- color: var(--ac-copybutton-action-hover-text, var(--__ac-copybutton-action-text, var(--a-text-action-hover)));
150
- background-color: var(--ac-copybutton-action-hover-bg, var(--__ac-copybutton-bg-hover, var(--a-surface-hover)));
151
- }
152
-
153
- .navds-copybutton--action:where(:disabled),
154
- .navds-copybutton--action:hover:where(:disabled) {
155
- color: var(--ac-copybutton-action-text, var(--__ac-copybutton-action-text, var(--a-text-action)));
156
- background-color: var(--ac-copybutton-action-bg, var(--a-surface-transparent));
157
- box-shadow: none;
158
- }
155
+ &:hover {
156
+ color: var(--ax-text-accent-strong);
157
+ }
159
158
 
160
- .navds-copybutton--active.navds-copybutton--action {
161
- color: var(--ac-copybutton-action-active-text, var(--__ac-copybutton-icon-success, var(--a-icon-success)));
159
+ &:disabled {
160
+ color: var(--ax-text-accent);
161
+ }
162
162
  }
163
163
 
164
- /* Variant/neutral */
164
+ /* --------------------------- CopyButton Neutral --------------------------- */
165
165
  .navds-copybutton--neutral {
166
- color: var(--ac-copybutton-neutral-text, var(--__ac-copybutton-neutral-text, var(--a-text-subtle)));
167
- background-color: var(--ac-copybutton-neutral-bg, var(--a-surface-transparent));
168
- }
169
-
170
- .navds-copybutton--neutral:hover {
171
- color: var(--ac-copybutton-neutral-hover-text, var(--__ac-copybutton-text, var(--a-text-default)));
172
- background-color: var(--ac-copybutton-neutral-hover-bg, var(--__ac-copybutton-bg-hover, var(--a-surface-hover)));
173
- }
166
+ color: var(--ax-text-subtle);
174
167
 
175
- .navds-copybutton--neutral:where(:disabled, .navds-copybutton--disabled),
176
- .navds-copybutton--neutral:hover:where(:disabled, .navds-copybutton--disabled) {
177
- color: var(--ac-copybutton-neutral-text, var(--__ac-copybutton-text, var(--a-text-default)));
178
- background-color: var(--ac-copybutton-neutral-bg, var(--a-surface-transparent));
179
- box-shadow: none;
180
- }
168
+ &:hover,
169
+ &.navds-copybutton--active {
170
+ color: var(--ax-text-default);
171
+ }
181
172
 
182
- .navds-copybutton--active.navds-copybutton--neutral {
183
- color: var(--ac-copybutton-neutral-active-text, var(--__ac-copybutton-text, var(--a-text-default)));
173
+ &:disabled {
174
+ color: var(--ax-text-subtle);
175
+ }
184
176
  }
185
177
 
186
178
  .navds-copybutton__content {
187
179
  display: inline-flex;
188
180
  align-items: center;
189
181
  justify-content: center;
190
- gap: var(--a-spacing-2);
191
- }
192
-
193
- .navds-copybutton--small > .navds-copybutton__content {
194
- gap: var(--a-spacing-1-alt);
195
- }
196
-
197
- .navds-copybutton--xsmall > .navds-copybutton__content {
198
- gap: var(--a-spacing-1);
199
- }
200
-
201
- .navds-copybutton--active > .navds-copybutton__content {
202
- animation: var(--ac-copybutton-animation, akselCopyButtonAnimation 0.4s linear);
203
- }
204
-
205
- @keyframes akselCopyButtonAnimation {
206
- 0% {
207
- opacity: 0.4;
208
- }
209
-
210
- 100% {
211
- opacity: 1;
212
- }
213
- }
214
-
215
- /* Disabled */
216
- .navds-copybutton:where(:disabled) {
217
- cursor: not-allowed;
218
- opacity: 0.3;
219
- }
220
-
221
- @media (forced-colors: active) {
222
- .navds-copybutton:where(:disabled) {
223
- opacity: 1;
224
- border-color: GrayText;
225
- }
182
+ gap: var(--ax-spacing-2);
226
183
  }
package/dist/component/index.css CHANGED
@@ -5,7 +5,7 @@
5
5
  */
6
6
 
7
7
  :root, :host {
8
- --a-version: "7.4.2";
8
+ --a-version: "7.5.0";
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 {