@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/card.css CHANGED
@@ -1,31 +1,45 @@
1
+ :root {
2
+ --navds-card-micro-color-text: var(--navds-color-text-primary);
3
+ --navds-card-micro-color-background: var(--navds-color-orange-20);
4
+ --navds-card-micro-color-border: transparent;
5
+ --navds-card-micro-color-text-hover: var(--navds-color-blue-50);
6
+ --navds-card-micro-color-background-hover: var(--navds-color-white);
7
+ --navds-card-micro-color-border-hover: var(--navds-color-blue-50);
8
+ --navds-card-micro-color-text-focus: var(--navds-color-blue-50);
9
+ --navds-card-micro-color-background-focus: var(--navds-color-white);
10
+ --navds-card-micro-color-shadow-focus: var(--navds-color-blue-80);
11
+ --navds-card-micro-color-background-active: var(--navds-color-blue-70);
12
+ --navds-card-micro-color-text-active: var(--navds-color-white);
13
+ }
14
+
1
15
  /*
2
16
  MicroCard
3
17
  */
4
18
 
5
19
  .navds-card__micro {
6
20
  border-radius: 1rem;
7
- color: var(--navds-color-text-primary);
21
+ color: var(--navds-card-micro-color-text);
8
22
  display: inline-flex;
9
23
  padding: var(--navds-spacing-1) var(--navds-spacing-2);
10
24
  text-decoration: none;
11
- background-color: var(--navds-color-orange-20);
12
- border: 1px solid transparent;
25
+ background-color: var(--navds-card-micro-color-background);
26
+ border: 1px solid var(--navds-card-micro-color-border);
13
27
  }
14
28
 
15
29
  .navds-card__micro:hover {
16
- background-color: var(--navds-color-white);
17
- border-color: var(--navds-color-blue-50);
18
- color: var(--navds-color-blue-50);
30
+ background-color: var(--navds-card-micro-color-background-hover);
31
+ border-color: var(--navds-card-micro-color-border-hover);
32
+ color: var(--navds-card-micro-color-text-hover);
19
33
  }
20
34
 
21
35
  .navds-card__micro:focus {
22
- background-color: var(--navds-color-white);
23
- color: var(--navds-color-blue-50);
36
+ background-color: var(--navds-card-micro-color-background-focus);
37
+ color: var(--navds-card-micro-color-text-focus);
24
38
  outline: none;
25
- box-shadow: var(--navds-shadow-focus);
39
+ box-shadow: 0 0 0 3px var(--navds-card-micro-color-shadow-focus);
26
40
  }
27
41
 
28
42
  .navds-card__micro:active {
29
- background-color: var(--navds-color-blue-70);
30
- color: var(--navds-color-white);
43
+ background-color: var(--navds-card-micro-color-background-active);
44
+ color: var(--navds-card-micro-color-text-active);
31
45
  }
package/copy-to-clipboard.css CHANGED
@@ -1,11 +1,3 @@
1
- .navds-copy-to-clipboard {
2
- display: inline-flex;
3
- align-items: center;
4
- column-gap: 0.5em;
5
- padding: var(--navds-spacing-1);
6
- min-height: 32px;
7
- }
8
-
9
1
  .navds-copy-to-clipboard__popover {
10
2
  padding: var(--navds-spacing-1);
11
3
  }