@navikt/ds-css 3.3.0 → 3.4.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 (14) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/component/index.css +49 -1
  3. package/dist/component/index.min.css +2 -2
  4. package/dist/component/tag.css +48 -0
  5. package/dist/component/tag.min.css +1 -1
  6. package/dist/components.css +40 -0
  7. package/dist/components.min.css +1 -1
  8. package/dist/global/tokens.css +9 -1
  9. package/dist/global/tokens.min.css +1 -1
  10. package/dist/index.css +49 -1
  11. package/dist/index.min.css +2 -2
  12. package/package.json +2 -2
  13. package/tag.css +48 -0
  14. package/tokens.json +17 -1
package/tag.css CHANGED
@@ -31,6 +31,12 @@
31
31
  color: var(--ac-tag-error-filled-text, var(--a-text-on-danger));
32
32
  }
33
33
 
34
+ .navds-tag--error-moderate {
35
+ border-color: transparent;
36
+ background-color: var(--ac-tag-error-moderate-bg, var(--a-surface-danger-moderate));
37
+ color: var(--ac-tag-error-moderate-text, var(--a-text-default));
38
+ }
39
+
34
40
  .navds-tag--success {
35
41
  border-color: var(--ac-tag-success-border, var(--a-border-success));
36
42
  background-color: var(--ac-tag-success-bg, var(--a-surface-success-subtle));
@@ -43,6 +49,12 @@
43
49
  color: var(--ac-tag-success-filled-text, var(--a-text-on-success));
44
50
  }
45
51
 
52
+ .navds-tag--success-moderate {
53
+ border-color: transparent;
54
+ background-color: var(--ac-tag-success-moderate-bg, var(--a-surface-success-moderate));
55
+ color: var(--ac-tag-success-moderate-text, var(--a-text-default));
56
+ }
57
+
46
58
  .navds-tag--warning {
47
59
  border-color: var(--ac-tag-warning-border, var(--a-border-warning));
48
60
  background-color: var(--ac-tag-warning-bg, var(--a-surface-warning-subtle));
@@ -55,6 +67,12 @@
55
67
  color: var(--ac-tag-warning-filled-text, var(--a-text-on-warning));
56
68
  }
57
69
 
70
+ .navds-tag--warning-moderate {
71
+ border-color: transparent;
72
+ background-color: var(--ac-tag-warning-moderate-bg, var(--a-surface-warning-moderate));
73
+ color: var(--ac-tag-warning-moderate-text, var(--a-text-default));
74
+ }
75
+
58
76
  .navds-tag--info {
59
77
  border-color: var(--ac-tag-info-border, var(--a-border-info));
60
78
  background-color: var(--ac-tag-info-bg, var(--a-surface-info-subtle));
@@ -67,6 +85,12 @@
67
85
  color: var(--ac-tag-info-filled-text, var(--a-text-on-info));
68
86
  }
69
87
 
88
+ .navds-tag--info-moderate {
89
+ border-color: transparent;
90
+ background-color: var(--ac-tag-info-moderate-bg, var(--a-surface-info-moderate));
91
+ color: var(--ac-tag-info-moderate-text, var(--a-text-default));
92
+ }
93
+
70
94
  .navds-tag--neutral {
71
95
  border-color: var(--ac-tag-neutral-border, var(--a-border-default));
72
96
  background-color: var(--ac-tag-neutral-bg, var(--a-surface-neutral-subtle));
@@ -79,6 +103,12 @@
79
103
  color: var(--ac-tag-neutral-filled-text, var(--a-text-on-neutral));
80
104
  }
81
105
 
106
+ .navds-tag--neutral-moderate {
107
+ border-color: transparent;
108
+ background-color: var(--ac-tag-neutral-moderate-bg, var(--a-surface-neutral-moderate));
109
+ color: var(--ac-tag-neutral-moderate-text, var(--a-text-default));
110
+ }
111
+
82
112
  .navds-tag--alt1 {
83
113
  border-color: var(--ac-tag-alt-1-border, var(--a-border-alt-1));
84
114
  background-color: var(--ac-tag-alt-1-bg, var(--a-surface-alt-1-subtle));
@@ -91,6 +121,12 @@
91
121
  color: var(--ac-tag-alt-1-filled-text, var(--a-text-on-alt-1));
92
122
  }
93
123
 
124
+ .navds-tag--alt1-moderate {
125
+ border-color: transparent;
126
+ background-color: var(--ac-tag-alt-1-moderate-bg, var(--a-surface-alt-1-moderate));
127
+ color: var(--ac-tag-alt-1-moderate-text, var(--a-text-default));
128
+ }
129
+
94
130
  .navds-tag--alt2 {
95
131
  border-color: var(--ac-tag-alt-2-border, var(--a-border-alt-2));
96
132
  background-color: var(--ac-tag-alt-2-bg, var(--a-surface-alt-2-subtle));
@@ -103,6 +139,12 @@
103
139
  color: var(--ac-tag-alt-2-filled-text, var(--a-text-on-alt-2));
104
140
  }
105
141
 
142
+ .navds-tag--alt2-moderate {
143
+ border-color: transparent;
144
+ background-color: var(--ac-tag-alt-2-moderate-bg, var(--a-surface-alt-2-moderate));
145
+ color: var(--ac-tag-alt-2-moderate-text, var(--a-text-default));
146
+ }
147
+
106
148
  .navds-tag--alt3 {
107
149
  border-color: var(--ac-tag-alt-3-border, var(--a-border-alt-3));
108
150
  background-color: var(--ac-tag-alt-3-bg, var(--a-surface-alt-3-subtle));
@@ -114,3 +156,9 @@
114
156
  background-color: var(--ac-tag-alt-3-filled-bg, var(--a-surface-alt-3));
115
157
  color: var(--ac-tag-alt-3-filled-text, var(--a-text-on-alt-3));
116
158
  }
159
+
160
+ .navds-tag--alt3-moderate {
161
+ border-color: transparent;
162
+ background-color: var(--ac-tag-alt-3-moderate-bg, var(--a-surface-alt-3-moderate));
163
+ color: var(--ac-tag-alt-3-moderate-text, var(--a-text-default));
164
+ }
package/tokens.json CHANGED
@@ -251,41 +251,57 @@
251
251
  "--ac-tag-error-text": "--a-text-default",
252
252
  "--ac-tag-error-filled-bg": "--a-surface-danger",
253
253
  "--ac-tag-error-filled-text": "--a-text-on-danger",
254
+ "--ac-tag-error-moderate-bg": "--a-surface-danger-moderate",
255
+ "--ac-tag-error-moderate-text": "--a-text-default",
254
256
  "--ac-tag-success-border": "--a-border-success",
255
257
  "--ac-tag-success-bg": "--a-surface-success-subtle",
256
258
  "--ac-tag-success-text": "--a-text-default",
257
259
  "--ac-tag-success-filled-bg": "--a-surface-success",
258
260
  "--ac-tag-success-filled-text": "--a-text-on-success",
261
+ "--ac-tag-success-moderate-bg": "--a-surface-success-moderate",
262
+ "--ac-tag-success-moderate-text": "--a-text-default",
259
263
  "--ac-tag-warning-border": "--a-border-warning",
260
264
  "--ac-tag-warning-bg": "--a-surface-warning-subtle",
261
265
  "--ac-tag-warning-text": "--a-text-default",
262
266
  "--ac-tag-warning-filled-bg": "--a-surface-warning",
263
267
  "--ac-tag-warning-filled-text": "--a-text-on-warning",
268
+ "--ac-tag-warning-moderate-bg": "--a-surface-warning-moderate",
269
+ "--ac-tag-warning-moderate-text": "--a-text-default",
264
270
  "--ac-tag-info-border": "--a-border-info",
265
271
  "--ac-tag-info-bg": "--a-surface-info-subtle",
266
272
  "--ac-tag-info-text": "--a-text-default",
267
273
  "--ac-tag-info-filled-bg": "--a-surface-info",
268
274
  "--ac-tag-info-filled-text": "--a-text-on-info",
275
+ "--ac-tag-info-moderate-bg": "--a-surface-info-moderate",
276
+ "--ac-tag-info-moderate-text": "--a-text-default",
269
277
  "--ac-tag-neutral-border": "--a-border-default",
270
278
  "--ac-tag-neutral-bg": "--a-surface-neutral-subtle",
271
279
  "--ac-tag-neutral-text": "--a-text-default",
272
280
  "--ac-tag-neutral-filled-bg": "--a-surface-neutral",
273
281
  "--ac-tag-neutral-filled-text": "--a-text-on-neutral",
282
+ "--ac-tag-neutral-moderate-bg": "--a-surface-neutral-moderate",
283
+ "--ac-tag-neutral-moderate-text": "--a-text-default",
274
284
  "--ac-tag-alt-1-border": "--a-border-alt-1",
275
285
  "--ac-tag-alt-1-bg": "--a-surface-alt-1-subtle",
276
286
  "--ac-tag-alt-1-text": "--a-text-default",
277
287
  "--ac-tag-alt-1-filled-bg": "--a-surface-alt-1",
278
288
  "--ac-tag-alt-1-filled-text": "--a-text-on-alt-1",
289
+ "--ac-tag-alt-1-moderate-bg": "--a-surface-alt-1-moderate",
290
+ "--ac-tag-alt-1-moderate-text": "--a-text-default",
279
291
  "--ac-tag-alt-2-border": "--a-border-alt-2",
280
292
  "--ac-tag-alt-2-bg": "--a-surface-alt-2-subtle",
281
293
  "--ac-tag-alt-2-text": "--a-text-default",
282
294
  "--ac-tag-alt-2-filled-bg": "--a-surface-alt-2",
283
295
  "--ac-tag-alt-2-filled-text": "--a-text-on-alt-2",
296
+ "--ac-tag-alt-2-moderate-bg": "--a-surface-alt-2-moderate",
297
+ "--ac-tag-alt-2-moderate-text": "--a-text-default",
284
298
  "--ac-tag-alt-3-border": "--a-border-alt-3",
285
299
  "--ac-tag-alt-3-bg": "--a-surface-alt-3-subtle",
286
300
  "--ac-tag-alt-3-text": "--a-text-default",
287
301
  "--ac-tag-alt-3-filled-bg": "--a-surface-alt-3",
288
- "--ac-tag-alt-3-filled-text": "--a-text-on-alt-3"
302
+ "--ac-tag-alt-3-filled-text": "--a-text-on-alt-3",
303
+ "--ac-tag-alt-3-moderate-bg": "--a-surface-alt-3-moderate",
304
+ "--ac-tag-alt-3-moderate-text": "--a-text-default"
289
305
  },
290
306
  "togglegroup": {
291
307
  "--ac-toggle-group-bg": "--a-surface-transparent",