@digdir/designsystemet-css 0.10.0 → 0.11.0-alpha.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 (79) hide show
  1. package/accordion.css +90 -81
  2. package/alert.css +47 -44
  3. package/box.css +37 -37
  4. package/button.css +130 -199
  5. package/card.css +127 -92
  6. package/checkbox.css +118 -86
  7. package/chip.css +93 -93
  8. package/combobox.css +113 -160
  9. package/dist/accordion.css +1 -1
  10. package/dist/alert.css +1 -1
  11. package/dist/box.css +1 -1
  12. package/dist/button.css +1 -1
  13. package/dist/card.css +1 -1
  14. package/dist/checkbox.css +1 -1
  15. package/dist/chip.css +1 -1
  16. package/dist/combobox.css +1 -1
  17. package/dist/divider.css +1 -1
  18. package/dist/dropdownmenu.css +1 -1
  19. package/dist/error-summary.css +1 -1
  20. package/dist/fieldset.css +1 -1
  21. package/dist/helptext.css +1 -1
  22. package/dist/index.css +1 -1
  23. package/dist/link.css +1 -1
  24. package/dist/list.css +1 -1
  25. package/dist/modal.css +1 -1
  26. package/dist/native-select.css +1 -1
  27. package/dist/pagination.css +1 -1
  28. package/dist/popover.css +1 -1
  29. package/dist/radio.css +1 -1
  30. package/dist/search.css +1 -1
  31. package/dist/skeleton.css +1 -1
  32. package/dist/skiplink.css +1 -1
  33. package/dist/spinner.css +1 -1
  34. package/dist/switch.css +1 -1
  35. package/dist/table.css +1 -1
  36. package/dist/tabs.css +1 -1
  37. package/dist/tag.css +1 -1
  38. package/dist/textarea.css +1 -1
  39. package/dist/textfield.css +1 -1
  40. package/dist/togglegroup.css +1 -1
  41. package/dist/tooltip.css +1 -1
  42. package/dist/utils.css +1 -1
  43. package/divider.css +8 -8
  44. package/dropdownmenu.css +20 -19
  45. package/error-summary.css +12 -8
  46. package/fieldset.css +13 -13
  47. package/helptext.css +21 -22
  48. package/index.css +6 -6
  49. package/link.css +42 -18
  50. package/list.css +10 -10
  51. package/modal.css +35 -33
  52. package/native-select.css +62 -46
  53. package/package.json +2 -2
  54. package/pagination.css +32 -32
  55. package/popover.css +43 -40
  56. package/radio.css +88 -81
  57. package/search.css +66 -62
  58. package/skeleton.css +14 -14
  59. package/skiplink.css +32 -8
  60. package/spinner.css +15 -23
  61. package/switch.css +121 -91
  62. package/table.css +54 -53
  63. package/tabs.css +36 -52
  64. package/tag.css +42 -42
  65. package/textarea.css +34 -33
  66. package/textfield.css +64 -63
  67. package/togglegroup.css +11 -10
  68. package/tooltip.css +9 -18
  69. package/utils.css +11 -11
  70. package/dist/error-message.css +0 -1
  71. package/dist/heading.css +0 -1
  72. package/dist/ingress.css +0 -1
  73. package/dist/label.css +0 -1
  74. package/dist/paragraph.css +0 -1
  75. package/error-message.css +0 -43
  76. package/heading.css +0 -61
  77. package/ingress.css +0 -40
  78. package/label.css +0 -46
  79. package/paragraph.css +0 -82
package/utils.css CHANGED
@@ -1,8 +1,8 @@
1
- @layer fds.utils {
1
+ @layer ds.utils {
2
2
  /**
3
3
  * Visually hide an element, but leave it available for screen readers
4
4
  */
5
- .fds-sr-only {
5
+ .ds-sr-only {
6
6
  border: 0;
7
7
  clip: rect(0 0 0 0);
8
8
  height: 1px;
@@ -16,25 +16,25 @@
16
16
  /**
17
17
  * Apply a focus outline on an element when it is focused with keyboard
18
18
  */
19
- .fds-focus:focus-visible {
20
- --fds-focus-border-width: 3px;
19
+ .ds-focus:focus-visible {
20
+ --dsc-focus-border-width: 3px;
21
21
 
22
- outline: var(--fds-focus-border-width) solid var(--fds-semantic-border-focus-outline);
23
- outline-offset: var(--fds-focus-border-width);
24
- box-shadow: 0 0 0 var(--fds-focus-border-width) var(--fds-semantic-border-focus-boxshadow);
22
+ outline: var(--dsc-focus-border-width) solid var(--ds-color-focus-outer);
23
+ outline-offset: var(--dsc-focus-border-width);
24
+ box-shadow: 0 0 0 var(--dsc-focus-border-width) var(--ds-color-focus-inner);
25
25
  }
26
26
 
27
27
  @layer animate-height {
28
- .fds-animate-height--openingOrClosing,
29
- .fds-animate-height--closed {
28
+ .ds-animate-height--openingOrClosing,
29
+ .ds-animate-height--closed {
30
30
  overflow: hidden;
31
31
  }
32
32
 
33
- .fds-animate-height--open .fds-animate-height__content {
33
+ .ds-animate-height--open .ds-animate-height__content {
34
34
  height: auto;
35
35
  }
36
36
 
37
- .fds-animate-height--closed .fds-animate-height__content {
37
+ .ds-animate-height--closed .ds-animate-height__content {
38
38
  height: 0;
39
39
  display: none;
40
40
  }
package/dist/error-message.css DELETED
@@ -1 +0,0 @@
1
- @layer fds.typography.error-message{.fds-error-message{--fdsc-bottom-spacing:var(--fds-spacing-5);margin:0}.fds-error-message--error{color:var(--fds-semantic-text-danger-default)}.fds-error-message--spacing{margin-bottom:var(--fdsc-bottom-spacing)}.fds-error-message--lg{--fdsc-bottom-spacing:var(--fds-spacing-5);font:var(--fds-typography-error_message-large);font-family:inherit}.fds-error-message--md{--fdsc-bottom-spacing:var(--fds-spacing-5);font:var(--fds-typography-error_message-medium);font-family:inherit}.fds-error-message--sm{--fdsc-bottom-spacing:var(--fds-spacing-4);font:var(--fds-typography-error_message-small);font-family:inherit}.fds-error-message--xs{--fdsc-bottom-spacing:var(--fds-spacing-3);font:var(--fds-typography-error_message-xsmall);font-family:inherit}}
package/dist/heading.css DELETED
@@ -1 +0,0 @@
1
- @layer fds.typography.heading{.fds-heading{--fdsc-bottom-spacing:var(--fds-spacing-6);color:var(--fds-semantic-text-neutral-default);margin:0}.fds-heading--spacing{margin-bottom:var(--fdsc-bottom-spacing)}.fds-heading--2xl{--fdsc-bottom-spacing:var(--fds-spacing-7);font:var(--fds-typography-heading-2xlarge);font-family:inherit}.fds-heading--xl{--fdsc-bottom-spacing:var(--fds-spacing-6);font:var(--fds-typography-heading-xlarge);font-family:inherit}.fds-heading--lg{--fdsc-bottom-spacing:var(--fds-spacing-5);font:var(--fds-typography-heading-large);font-family:inherit}.fds-heading--md{--fdsc-bottom-spacing:var(--fds-spacing-4);font:var(--fds-typography-heading-medium);font-family:inherit}.fds-heading--sm{--fdsc-bottom-spacing:var(--fds-spacing-3);font:var(--fds-typography-heading-small);font-family:inherit}.fds-heading--xs{--fdsc-bottom-spacing:var(--fds-spacing-2);font:var(--fds-typography-heading-xsmall);font-family:inherit}.fds-heading--2xs{--fdsc-bottom-spacing:var(--fds-spacing-1);font:var(--fds-typography-heading-xxsmall);font-family:inherit}}
package/dist/ingress.css DELETED
@@ -1 +0,0 @@
1
- @layer fds.typography.ingress{.fds-ingress{--fdsc-bottom-spacing:var(--fds-spacing-5);color:var(--fds-semantic-text-neutral-default);margin:0}.fds-ingress--spacing{margin-bottom:var(--fdsc-bottom-spacing)}.fds-ingress--md{--fdsc-bottom-spacing:var(--fds-spacing-5);font:var(--fds-typography-ingress-medium);font-family:inherit}.fds-ingress--lg{--fdsc-bottom-spacing:var(--fds-spacing-6);font:var(--fds-typography-ingress-large);font-family:inherit}.fds-ingress--sm{--fdsc-bottom-spacing:var(--fds-spacing-7);font:var(--fds-typography-ingress-small);font-family:inherit}.fds-ingress--xs{--fdsc-bottom-spacing:var(--fds-spacing-8);font:var(--fds-typography-ingress-xsmall);font-family:inherit}}
package/dist/label.css DELETED
@@ -1 +0,0 @@
1
- @layer fds.typography.label{.fds-label{--fdsc-bottom-spacing:var(--fds-spacing-1);color:var(--fds-semantic-text-neutral-default);display:inline-block;margin:0;padding:0}.fds-label--spacing{margin-bottom:var(--fdsc-bottom-spacing)}.fds-label--lg{font:var(--fds-typography-label-large);font-family:inherit}.fds-label--md{font:var(--fds-typography-label-medium);font-family:inherit}.fds-label--sm{font:var(--fds-typography-label-small);font-family:inherit}.fds-label--xs{font:var(--fds-typography-label-xsmall);font-family:inherit}.fds-label--regular-weight{font-weight:400}.fds-label--medium-weight{font-weight:500}.fds-label--semibold-weight{font-weight:600}}
package/dist/paragraph.css DELETED
@@ -1 +0,0 @@
1
- @layer fds.typography.paragraph{.fds-paragraph{--fdsc-bottom-spacing:var(--fds-spacing-5);color:var(--fds-semantic-text-neutral-default);margin:0}.fds-paragraph--spacing{margin-bottom:var(--fdsc-bottom-spacing)}.fds-paragraph--lg{--fdsc-bottom-spacing:var(--fds-spacing-6);font:var(--fds-typography-paragraph-large);font-family:inherit}.fds-paragraph--lg.fds-paragraph--short{font:var(--fds-typography-paragraph-short-large);font-family:inherit}.fds-paragraph--lg.fds-paragraph--long{line-height:var(--fds-typography-paragraph-long-large)}.fds-paragraph--md{--fdsc-bottom-spacing:var(--fds-spacing-5);font:var(--fds-typography-paragraph-medium);font-family:inherit}.fds-paragraph--md.fds-paragraph--short{--fdsc-bottom-spacing:var(--fds-spacing-5);font:var(--fds-typography-paragraph-short-medium);font-family:inherit}.fds-paragraph--md.fds-paragraph--long{line-height:var(--fds-typography-paragraph-long-medium)}.fds-paragraph--sm{--fdsc-bottom-spacing:var(--fds-spacing-4);font:var(--fds-typography-paragraph-small);font-family:inherit}.fds-paragraph--sm.fds-paragraph--short{--fdsc-bottom-spacing:var(--fds-spacing-4);font:var(--fds-typography-paragraph-short-small);font-family:inherit}.fds-paragraph--sm.fds-paragraph--long{line-height:var(--fds-typography-paragraph-long-small)}.fds-paragraph--xs{--fdsc-bottom-spacing:var(--fds-spacing-3);font:var(--fds-typography-paragraph-xsmall);font-family:inherit}.fds-paragraph--xs.fds-paragraph--short{--fdsc-bottom-spacing:var(--fds-spacing-3);font:var(--fds-typography-paragraph-short-xsmall);font-family:inherit}.fds-paragraph--xs.fds-paragraph--long{line-height:var(--fds-typography-paragraph-long-xsmall)}}
package/error-message.css DELETED
@@ -1,43 +0,0 @@
1
- @layer fds.typography.error-message {
2
- .fds-error-message {
3
- --fdsc-bottom-spacing: var(--fds-spacing-5);
4
-
5
- margin: 0;
6
- }
7
-
8
- .fds-error-message--error {
9
- color: var(--fds-semantic-text-danger-default);
10
- }
11
-
12
- .fds-error-message--spacing {
13
- margin-bottom: var(--fdsc-bottom-spacing);
14
- }
15
-
16
- .fds-error-message--lg {
17
- --fdsc-bottom-spacing: var(--fds-spacing-5);
18
-
19
- font: var(--fds-typography-error_message-large);
20
- font-family: inherit;
21
- }
22
-
23
- .fds-error-message--md {
24
- --fdsc-bottom-spacing: var(--fds-spacing-5);
25
-
26
- font: var(--fds-typography-error_message-medium);
27
- font-family: inherit;
28
- }
29
-
30
- .fds-error-message--sm {
31
- --fdsc-bottom-spacing: var(--fds-spacing-4);
32
-
33
- font: var(--fds-typography-error_message-small);
34
- font-family: inherit;
35
- }
36
-
37
- .fds-error-message--xs {
38
- --fdsc-bottom-spacing: var(--fds-spacing-3);
39
-
40
- font: var(--fds-typography-error_message-xsmall);
41
- font-family: inherit;
42
- }
43
- }
package/heading.css DELETED
@@ -1,61 +0,0 @@
1
- @layer fds.typography.heading {
2
- .fds-heading {
3
- --fdsc-bottom-spacing: var(--fds-spacing-6);
4
-
5
- margin: 0;
6
- color: var(--fds-semantic-text-neutral-default);
7
- }
8
-
9
- .fds-heading--spacing {
10
- margin-bottom: var(--fdsc-bottom-spacing);
11
- }
12
-
13
- .fds-heading--2xl {
14
- --fdsc-bottom-spacing: var(--fds-spacing-7);
15
-
16
- font: var(--fds-typography-heading-2xlarge);
17
- font-family: inherit;
18
- }
19
-
20
- .fds-heading--xl {
21
- --fdsc-bottom-spacing: var(--fds-spacing-6);
22
-
23
- font: var(--fds-typography-heading-xlarge);
24
- font-family: inherit;
25
- }
26
-
27
- .fds-heading--lg {
28
- --fdsc-bottom-spacing: var(--fds-spacing-5);
29
-
30
- font: var(--fds-typography-heading-large);
31
- font-family: inherit;
32
- }
33
-
34
- .fds-heading--md {
35
- --fdsc-bottom-spacing: var(--fds-spacing-4);
36
-
37
- font: var(--fds-typography-heading-medium);
38
- font-family: inherit;
39
- }
40
-
41
- .fds-heading--sm {
42
- --fdsc-bottom-spacing: var(--fds-spacing-3);
43
-
44
- font: var(--fds-typography-heading-small);
45
- font-family: inherit;
46
- }
47
-
48
- .fds-heading--xs {
49
- --fdsc-bottom-spacing: var(--fds-spacing-2);
50
-
51
- font: var(--fds-typography-heading-xsmall);
52
- font-family: inherit;
53
- }
54
-
55
- .fds-heading--2xs {
56
- --fdsc-bottom-spacing: var(--fds-spacing-1);
57
-
58
- font: var(--fds-typography-heading-xxsmall);
59
- font-family: inherit;
60
- }
61
- }
package/ingress.css DELETED
@@ -1,40 +0,0 @@
1
- @layer fds.typography.ingress {
2
- .fds-ingress {
3
- --fdsc-bottom-spacing: var(--fds-spacing-5);
4
-
5
- margin: 0;
6
- color: var(--fds-semantic-text-neutral-default);
7
- }
8
-
9
- .fds-ingress--spacing {
10
- margin-bottom: var(--fdsc-bottom-spacing);
11
- }
12
-
13
- .fds-ingress--md {
14
- --fdsc-bottom-spacing: var(--fds-spacing-5);
15
-
16
- font: var(--fds-typography-ingress-medium);
17
- font-family: inherit;
18
- }
19
-
20
- .fds-ingress--lg {
21
- --fdsc-bottom-spacing: var(--fds-spacing-6);
22
-
23
- font: var(--fds-typography-ingress-large);
24
- font-family: inherit;
25
- }
26
-
27
- .fds-ingress--sm {
28
- --fdsc-bottom-spacing: var(--fds-spacing-7);
29
-
30
- font: var(--fds-typography-ingress-small);
31
- font-family: inherit;
32
- }
33
-
34
- .fds-ingress--xs {
35
- --fdsc-bottom-spacing: var(--fds-spacing-8);
36
-
37
- font: var(--fds-typography-ingress-xsmall);
38
- font-family: inherit;
39
- }
40
- }
package/label.css DELETED
@@ -1,46 +0,0 @@
1
- @layer fds.typography.label {
2
- .fds-label {
3
- --fdsc-bottom-spacing: var(--fds-spacing-1);
4
-
5
- display: inline-block;
6
- margin: 0;
7
- padding: 0;
8
- color: var(--fds-semantic-text-neutral-default);
9
- }
10
-
11
- .fds-label--spacing {
12
- margin-bottom: var(--fdsc-bottom-spacing);
13
- }
14
-
15
- .fds-label--lg {
16
- font: var(--fds-typography-label-large);
17
- font-family: inherit;
18
- }
19
-
20
- .fds-label--md {
21
- font: var(--fds-typography-label-medium);
22
- font-family: inherit;
23
- }
24
-
25
- .fds-label--sm {
26
- font: var(--fds-typography-label-small);
27
- font-family: inherit;
28
- }
29
-
30
- .fds-label--xs {
31
- font: var(--fds-typography-label-xsmall);
32
- font-family: inherit;
33
- }
34
-
35
- .fds-label--regular-weight {
36
- font-weight: 400;
37
- }
38
-
39
- .fds-label--medium-weight {
40
- font-weight: 500;
41
- }
42
-
43
- .fds-label--semibold-weight {
44
- font-weight: 600;
45
- }
46
- }
package/paragraph.css DELETED
@@ -1,82 +0,0 @@
1
- @layer fds.typography.paragraph {
2
- .fds-paragraph {
3
- --fdsc-bottom-spacing: var(--fds-spacing-5);
4
-
5
- color: var(--fds-semantic-text-neutral-default);
6
- margin: 0;
7
- }
8
-
9
- .fds-paragraph--spacing {
10
- margin-bottom: var(--fdsc-bottom-spacing);
11
- }
12
-
13
- .fds-paragraph--lg {
14
- --fdsc-bottom-spacing: var(--fds-spacing-6);
15
-
16
- font: var(--fds-typography-paragraph-large);
17
- font-family: inherit;
18
- }
19
-
20
- .fds-paragraph--lg.fds-paragraph--short {
21
- font: var(--fds-typography-paragraph-short-large);
22
- font-family: inherit;
23
- }
24
-
25
- .fds-paragraph--lg.fds-paragraph--long {
26
- line-height: var(--fds-typography-paragraph-long-large);
27
- }
28
-
29
- .fds-paragraph--md {
30
- --fdsc-bottom-spacing: var(--fds-spacing-5);
31
-
32
- font: var(--fds-typography-paragraph-medium);
33
- font-family: inherit;
34
- }
35
-
36
- .fds-paragraph--md.fds-paragraph--short {
37
- --fdsc-bottom-spacing: var(--fds-spacing-5);
38
-
39
- font: var(--fds-typography-paragraph-short-medium);
40
- font-family: inherit;
41
- }
42
-
43
- .fds-paragraph--md.fds-paragraph--long {
44
- line-height: var(--fds-typography-paragraph-long-medium);
45
- }
46
-
47
- .fds-paragraph--sm {
48
- --fdsc-bottom-spacing: var(--fds-spacing-4);
49
-
50
- font: var(--fds-typography-paragraph-small);
51
- font-family: inherit;
52
- }
53
-
54
- .fds-paragraph--sm.fds-paragraph--short {
55
- --fdsc-bottom-spacing: var(--fds-spacing-4);
56
-
57
- font: var(--fds-typography-paragraph-short-small);
58
- font-family: inherit;
59
- }
60
-
61
- .fds-paragraph--sm.fds-paragraph--long {
62
- line-height: var(--fds-typography-paragraph-long-small);
63
- }
64
-
65
- .fds-paragraph--xs {
66
- --fdsc-bottom-spacing: var(--fds-spacing-3);
67
-
68
- font: var(--fds-typography-paragraph-xsmall);
69
- font-family: inherit;
70
- }
71
-
72
- .fds-paragraph--xs.fds-paragraph--short {
73
- --fdsc-bottom-spacing: var(--fds-spacing-3);
74
-
75
- font: var(--fds-typography-paragraph-short-xsmall);
76
- font-family: inherit;
77
- }
78
-
79
- .fds-paragraph--xs.fds-paragraph--long {
80
- line-height: var(--fds-typography-paragraph-long-xsmall);
81
- }
82
- }