@digdir/designsystemet-css 0.8.0 → 0.9.1-alpha.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 (79) hide show
  1. package/accordion.css +40 -43
  2. package/alert.css +39 -35
  3. package/box.css +30 -30
  4. package/button.css +107 -107
  5. package/card.css +41 -49
  6. package/checkbox.css +70 -58
  7. package/chip.css +76 -76
  8. package/combobox.css +86 -87
  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-message.css +1 -1
  20. package/dist/error-summary.css +1 -1
  21. package/dist/fieldset.css +1 -1
  22. package/dist/heading.css +1 -1
  23. package/dist/helptext.css +1 -1
  24. package/dist/index.css +1 -1
  25. package/dist/ingress.css +1 -1
  26. package/dist/label.css +1 -1
  27. package/dist/link.css +1 -1
  28. package/dist/list.css +1 -1
  29. package/dist/modal.css +1 -1
  30. package/dist/native-select.css +1 -1
  31. package/dist/pagination.css +1 -1
  32. package/dist/paragraph.css +1 -1
  33. package/dist/popover.css +1 -1
  34. package/dist/radio.css +1 -1
  35. package/dist/search.css +1 -1
  36. package/dist/skeleton.css +1 -1
  37. package/dist/skiplink.css +1 -1
  38. package/dist/spinner.css +1 -1
  39. package/dist/switch.css +1 -1
  40. package/dist/table.css +1 -1
  41. package/dist/tabs.css +1 -1
  42. package/dist/tag.css +1 -1
  43. package/dist/textarea.css +1 -1
  44. package/dist/textfield.css +1 -1
  45. package/dist/togglegroup.css +1 -1
  46. package/dist/tooltip.css +1 -1
  47. package/dist/utils.css +1 -1
  48. package/divider.css +3 -3
  49. package/dropdownmenu.css +13 -13
  50. package/error-message.css +15 -15
  51. package/error-summary.css +4 -4
  52. package/fieldset.css +3 -3
  53. package/heading.css +24 -31
  54. package/helptext.css +13 -13
  55. package/index.css +1 -1
  56. package/ingress.css +15 -15
  57. package/label.css +11 -11
  58. package/link.css +13 -13
  59. package/list.css +7 -7
  60. package/modal.css +19 -19
  61. package/native-select.css +28 -28
  62. package/package.json +2 -2
  63. package/pagination.css +24 -24
  64. package/paragraph.css +34 -34
  65. package/popover.css +29 -29
  66. package/radio.css +51 -54
  67. package/search.css +42 -42
  68. package/skeleton.css +4 -4
  69. package/skiplink.css +3 -3
  70. package/spinner.css +5 -5
  71. package/switch.css +77 -61
  72. package/table.css +33 -29
  73. package/tabs.css +35 -43
  74. package/tag.css +35 -35
  75. package/textarea.css +20 -20
  76. package/textfield.css +42 -42
  77. package/togglegroup.css +5 -5
  78. package/tooltip.css +11 -9
  79. package/utils.css +4 -4
package/textarea.css CHANGED
@@ -1,7 +1,7 @@
1
1
  @layer fds.textarea {
2
2
  .fds-textarea {
3
3
  display: grid;
4
- gap: var(--fds-spacing-2);
4
+ gap: var(--ds-spacing-2);
5
5
  }
6
6
 
7
7
  .fds-textarea__readonly__icon {
@@ -17,13 +17,13 @@
17
17
  min-width: min-content;
18
18
  display: inline-flex;
19
19
  flex-direction: row;
20
- gap: var(--fds-spacing-1);
20
+ gap: var(--ds-spacing-1);
21
21
  align-items: center;
22
22
  }
23
23
 
24
24
  .fds-textarea__description {
25
- color: var(--fds-semantic-text-neutral-subtle);
26
- margin-top: calc(var(--fds-spacing-2) * -1);
25
+ color: var(--ds-color-neutral-text-subtle);
26
+ margin-top: calc(var(--ds-spacing-2) * -1);
27
27
  }
28
28
 
29
29
  .fds-textarea__input {
@@ -35,26 +35,26 @@
35
35
  min-height: 2.5em;
36
36
  width: 100%;
37
37
  appearance: none;
38
- padding: var(--fds-spacing-3);
39
- border: solid 1px var(--fds-semantic-border-input-default);
40
- border-radius: var(--fds-border_radius-medium);
38
+ padding: var(--ds-spacing-3);
39
+ border: solid 1px var(--ds-color-neutral-border-default);
40
+ border-radius: var(--ds-border-radius-md);
41
41
  resize: vertical;
42
42
  }
43
43
 
44
- .fds-textarea--small .fds-textarea__input {
45
- padding: var(--fds-spacing-2);
44
+ .fds-textarea--sm .fds-textarea__input {
45
+ padding: var(--ds-spacing-2);
46
46
  }
47
47
 
48
- .fds-textarea--medium .fds-textarea__input {
49
- padding: var(--fds-spacing-3);
48
+ .fds-textarea--md .fds-textarea__input {
49
+ padding: var(--ds-spacing-3);
50
50
  }
51
51
 
52
- .fds-textarea--large .fds-textarea__input {
53
- padding: var(--fds-spacing-4);
52
+ .fds-textarea--lg .fds-textarea__input {
53
+ padding: var(--ds-spacing-4);
54
54
  }
55
55
 
56
56
  .fds-textarea--disabled {
57
- opacity: var(--fds-opacity-disabled);
57
+ opacity: var(--ds-opacity-disabled);
58
58
  }
59
59
 
60
60
  .fds-textarea--disabled .fds-textarea__input {
@@ -62,19 +62,19 @@
62
62
  }
63
63
 
64
64
  .fds-textarea--readonly .fds-textarea__input {
65
- background: var(--fds-semantic-surface-neutral-subtle);
66
- border-color: var(--fds-semantic-border-neutral-default);
65
+ background: var(--ds-color-neutral-background-subtle);
66
+ border-color: var(--ds-color-neutral-border-strong);
67
67
  }
68
68
 
69
69
  .fds-textarea--error > .fds-textarea__input:not(:focus-visible) {
70
- border-color: var(--fds-semantic-border-danger-default);
71
- box-shadow: inset 0 0 0 1px var(--fds-semantic-border-danger-default);
70
+ border-color: var(--ds-color-danger-border-default);
71
+ box-shadow: inset 0 0 0 1px var(--ds-color-danger-border-default);
72
72
  }
73
73
 
74
74
  @media (hover: hover) and (pointer: fine) {
75
75
  .fds-textarea__input:not(:focus-visible, :disabled, [aria-disabled]):hover {
76
- border-color: var(--fds-semantic-border-input-hover);
77
- box-shadow: inset 0 0 0 1px var(--fds-semantic-border-input-hover);
76
+ border-color: var(--ds-color-accent-border-strong);
77
+ box-shadow: inset 0 0 0 1px var(--ds-color-accent-border-strong);
78
78
  }
79
79
  }
80
80
  }
package/textfield.css CHANGED
@@ -1,15 +1,15 @@
1
1
  @layer fds.textfield {
2
2
  .fds-textfield {
3
3
  display: grid;
4
- gap: var(--fds-spacing-2);
4
+ gap: var(--ds-spacing-2);
5
5
  }
6
6
 
7
7
  .fds-textfield__adornment {
8
- color: var(--fds-semantic-border-neutral-default);
9
- background: var(--fds-semantic-surface-neutral-subtle);
10
- padding: 9px var(--fds-spacing-4);
11
- border-radius: var(--fds-border_radius-medium);
12
- border: solid 1px var(--fds-semantic-border-neutral-default);
8
+ color: var(--ds-color-neutral-border-strong);
9
+ background: var(--ds-color-neutral-background-subtle);
10
+ padding: 9px var(--ds-spacing-4);
11
+ border-radius: var(--ds-border-radius-md);
12
+ border: solid 1px var(--ds-color-neutral-border-strong);
13
13
  box-sizing: border-box;
14
14
  display: inline-block;
15
15
  }
@@ -22,9 +22,9 @@
22
22
  flex: 0 1 auto;
23
23
  width: 100%;
24
24
  appearance: none;
25
- padding: 0 var(--fds-spacing-3);
26
- border: solid 1px var(--fds-semantic-border-input-default);
27
- border-radius: var(--fds-border_radius-medium);
25
+ padding: 0 var(--ds-spacing-3);
26
+ border: solid 1px var(--ds-color-neutral-border-default);
27
+ border-radius: var(--ds-border-radius-md);
28
28
  }
29
29
 
30
30
  .fds-textfield--disabled .fds-textfield__input {
@@ -32,88 +32,88 @@
32
32
  }
33
33
 
34
34
  .fds-textfield--readonly .fds-textfield__input {
35
- background: var(--fds-semantic-surface-neutral-subtle);
36
- border-color: var(--fds-semantic-border-neutral-default);
35
+ background: var(--ds-color-neutral-background-subtle);
36
+ border-color: var(--ds-color-neutral-border-strong);
37
37
  }
38
38
 
39
39
  .fds-textfield__field {
40
40
  display: flex;
41
41
  align-items: stretch;
42
- border-radius: var(--fds-border_radius-medium);
42
+ border-radius: var(--ds-border-radius-md);
43
43
  }
44
44
 
45
45
  .fds-textfield__field > *:first-child {
46
- border-top-left-radius: var(--fds-border_radius-medium);
47
- border-bottom-left-radius: var(--fds-border_radius-medium);
46
+ border-top-left-radius: var(--ds-border-radius-md);
47
+ border-bottom-left-radius: var(--ds-border-radius-md);
48
48
  }
49
49
 
50
50
  .fds-textfield__field > *:last-child {
51
- border-top-right-radius: var(--fds-border_radius-medium);
52
- border-bottom-right-radius: var(--fds-border_radius-medium);
51
+ border-top-right-radius: var(--ds-border-radius-md);
52
+ border-bottom-right-radius: var(--ds-border-radius-md);
53
53
  }
54
54
 
55
- .fds-textfield--small .fds-textfield__adornment {
56
- padding: var(--fds-sizing-2) var(--fds-spacing-3);
55
+ .fds-textfield--sm .fds-textfield__adornment {
56
+ padding: var(--ds-sizing-2) var(--ds-spacing-3);
57
57
  }
58
58
 
59
- .fds-textfield--medium .fds-textfield__adornment {
60
- padding: 0.65rem var(--fds-spacing-4);
59
+ .fds-textfield--md .fds-textfield__adornment {
60
+ padding: 0.65rem var(--ds-spacing-4);
61
61
  }
62
62
 
63
- .fds-textfield--large .fds-textfield__adornment {
64
- padding: 0.85rem var(--fds-spacing-5);
63
+ .fds-textfield--lg .fds-textfield__adornment {
64
+ padding: 0.85rem var(--ds-spacing-5);
65
65
  }
66
66
 
67
- .fds-textfield--small .fds-textfield__field {
68
- height: var(--fds-sizing-10);
67
+ .fds-textfield--sm .fds-textfield__field {
68
+ height: var(--ds-sizing-10);
69
69
  }
70
70
 
71
- .fds-textfield--medium .fds-textfield__field {
72
- height: var(--fds-sizing-12);
71
+ .fds-textfield--md .fds-textfield__field {
72
+ height: var(--ds-sizing-12);
73
73
  }
74
74
 
75
- .fds-textfield--large .fds-textfield__field {
76
- height: var(--fds-sizing-14);
75
+ .fds-textfield--lg .fds-textfield__field {
76
+ height: var(--ds-sizing-14);
77
77
  }
78
78
 
79
- .fds-textfield--small .fds-textfield__input {
80
- padding: 0 var(--fds-spacing-2);
79
+ .fds-textfield--sm .fds-textfield__input {
80
+ padding: 0 var(--ds-spacing-2);
81
81
  }
82
82
 
83
- .fds-textfield--medium .fds-textfield__input {
84
- padding: 0 var(--fds-spacing-3);
83
+ .fds-textfield--md .fds-textfield__input {
84
+ padding: 0 var(--ds-spacing-3);
85
85
  }
86
86
 
87
- .fds-textfield--large .fds-textfield__input {
88
- padding: 0 var(--fds-spacing-4);
87
+ .fds-textfield--lg .fds-textfield__input {
88
+ padding: 0 var(--ds-spacing-4);
89
89
  }
90
90
 
91
91
  .fds-textfield__label {
92
92
  min-width: min-content;
93
93
  display: inline-flex;
94
94
  flex-direction: row;
95
- gap: var(--fds-spacing-1);
95
+ gap: var(--ds-spacing-1);
96
96
  align-items: center;
97
97
  }
98
98
 
99
99
  .fds-textfield__description {
100
- color: var(--fds-semantic-text-neutral-subtle);
101
- margin-top: calc(var(--fds-spacing-2) * -1);
100
+ color: var(--ds-color-neutral-text-subtle);
101
+ margin-top: calc(var(--ds-spacing-2) * -1);
102
102
  }
103
103
 
104
104
  .fds-textfield--disabled {
105
- opacity: var(--fds-opacity-disabled);
105
+ opacity: var(--ds-opacity-disabled);
106
106
  }
107
107
 
108
108
  .fds-textfield--error .fds-textfield__input:not(:focus-visible) {
109
- border-color: var(--fds-semantic-border-danger-default);
110
- box-shadow: inset 0 0 0 1px var(--fds-semantic-border-danger-default);
109
+ border-color: var(--ds-color-danger-border-default);
110
+ box-shadow: inset 0 0 0 1px var(--ds-color-danger-border-default);
111
111
  }
112
112
 
113
113
  @media (hover: hover) and (pointer: fine) {
114
114
  .fds-textfield__input:not(:focus-visible, :disabled, [aria-disabled]):hover {
115
- border-color: var(--fds-semantic-border-input-hover);
116
- box-shadow: inset 0 0 0 1px var(--fds-semantic-border-input-hover);
115
+ border-color: var(--ds-color-accent-border-strong);
116
+ box-shadow: inset 0 0 0 1px var(--ds-color-accent-border-strong);
117
117
  }
118
118
  }
119
119
 
package/togglegroup.css CHANGED
@@ -1,17 +1,17 @@
1
1
  @layer fds.togglegroup {
2
2
  .fds-togglegroup {
3
- background-color: var(--fds-semantic-background-default);
4
- border: var(--fds-semantic-border-neutral-default) solid var(--fds-border_width-default);
5
- border-radius: var(--fds-border_radius-large);
3
+ background-color: var(--ds-color-neutral-background-default);
4
+ border: var(--ds-color-neutral-border-strong) solid var(--ds-border-width-default);
5
+ border-radius: var(--ds-border-radius-lg);
6
6
  width: fit-content;
7
7
  }
8
8
 
9
9
  .fds-togglegroup__content {
10
10
  display: inline-grid;
11
- gap: var(--fds-spacing-1);
11
+ gap: var(--ds-spacing-1);
12
12
  grid-auto-columns: 1fr;
13
13
  grid-auto-flow: column;
14
- padding: var(--fds-spacing-1);
14
+ padding: var(--ds-spacing-1);
15
15
  }
16
16
 
17
17
  .fds-togglegroup__input {
package/tooltip.css CHANGED
@@ -1,23 +1,25 @@
1
1
  @layer fds.tooltip {
2
2
  .fds-tooltip {
3
- background: var(--fds-semantic-surface-neutral-inverted);
4
- padding: var(--fds-spacing-1) var(--fds-spacing-2);
5
- color: var(--fds-semantic-text-neutral-on_inverted);
6
- border-radius: var(--fds-border_radius-medium);
7
- font: var(--fds-typography-paragraph-xsmall);
3
+ --dsc-tooltip-background: var(--ds-color-neutral-background-default);
4
+
5
+ background: var(--dsc-tooltip-background);
6
+ padding: var(--ds-spacing-1) var(--ds-spacing-2);
7
+ color: var(--ds-color-neutral-text-default);
8
+ border-radius: var(--ds-border-radius-md);
9
+ font: var(--ds-typography-paragraph-xs);
8
10
  font-family: inherit;
9
11
  }
10
12
 
11
13
  .fds-tooltip--inverted {
12
- background: var(--fds-semantic-surface-neutral-subtle);
13
- color: var(--fds-semantic-text-neutral-default);
14
+ background: var(--ds-color-neutral-background-subtle);
15
+ color: var(--ds-color-neutral-text-default);
14
16
  }
15
17
 
16
18
  .fds-tooltip__arrow {
17
- fill: var(--fds-semantic-surface-neutral-inverted);
19
+ fill: var(--dsc-tooltip-background);
18
20
  }
19
21
 
20
22
  .fds-tooltip--inverted .fds-tooltip__arrow {
21
- fill: var(--fds-semantic-surface-neutral-subtle);
23
+ fill: var(--ds-color-neutral-background-subtle);
22
24
  }
23
25
  }
package/utils.css CHANGED
@@ -17,11 +17,11 @@
17
17
  * Apply a focus outline on an element when it is focused with keyboard
18
18
  */
19
19
  .fds-focus:focus-visible {
20
- --fds-focus-border-width: 3px;
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-neutral-text-default);
23
+ outline-offset: var(--dsc-focus-border-width);
24
+ box-shadow: 0 0 0 var(--dsc-focus-border-width) var(--ds-color-neutral-background-default);
25
25
  }
26
26
 
27
27
  @layer animate-height {