@digdir/designsystemet-css 0.11.0-alpha.8 → 0.11.0-alpha.9

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 (69) hide show
  1. package/accordion.css +118 -120
  2. package/alert.css +58 -64
  3. package/box.css +70 -72
  4. package/button.css +174 -176
  5. package/card.css +189 -191
  6. package/checkbox.css +157 -159
  7. package/chip.css +140 -142
  8. package/combobox.css +295 -295
  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/utilities.css +1 -0
  43. package/divider.css +13 -15
  44. package/dropdownmenu.css +55 -46
  45. package/error-summary.css +19 -15
  46. package/fieldset.css +42 -44
  47. package/helptext.css +49 -46
  48. package/index.css +39 -39
  49. package/link.css +50 -52
  50. package/list.css +18 -14
  51. package/modal.css +86 -85
  52. package/native-select.css +88 -90
  53. package/package.json +2 -2
  54. package/pagination.css +53 -55
  55. package/popover.css +71 -69
  56. package/radio.css +151 -142
  57. package/search.css +138 -142
  58. package/skeleton.css +46 -47
  59. package/skiplink.css +41 -41
  60. package/spinner.css +51 -49
  61. package/switch.css +190 -192
  62. package/table.css +117 -111
  63. package/tabs.css +69 -75
  64. package/tag.css +57 -59
  65. package/textarea.css +64 -66
  66. package/textfield.css +122 -122
  67. package/togglegroup.css +22 -24
  68. package/tooltip.css +12 -11
  69. package/utilities.css +38 -0
package/checkbox.css CHANGED
@@ -1,79 +1,78 @@
1
- @layer ds.checkbox {
2
- .ds-checkbox {
3
- --dsc-checkbox-size: 1.75rem;
4
- --dsc-checkbox-focus-border-width: 3px;
5
- --dsc-checkbox-background: var(--ds-color-neutral-background-default);
6
- --dsc-checkbox-border-color: var(--ds-color-neutral-border-default);
7
- --dsc-checkbox-border__hover--size: calc(var(--ds-spacing-3) / 2);
8
- --dsc-checkbox-border__hover: 0 0 0 var(--dsc-checkbox-border__hover--size) var(--ds-color-accent-surface-hover);
9
- --dsc-checkbox-check_color: transparent;
10
-
11
- display: grid;
12
- }
1
+ .ds-checkbox {
2
+ --dsc-checkbox-size: 1.75rem;
3
+ --dsc-checkbox-focus-border-width: 3px;
4
+ --dsc-checkbox-background: var(--ds-color-neutral-background-default);
5
+ --dsc-checkbox-border-color: var(--ds-color-neutral-border-default);
6
+ --dsc-checkbox-border__hover--size: calc(var(--ds-spacing-3) / 2);
7
+ --dsc-checkbox-border__hover: 0 0 0 var(--dsc-checkbox-border__hover--size) var(--ds-color-accent-surface-hover);
8
+ --dsc-checkbox-check_color: transparent;
9
+
10
+ display: grid;
11
+ }
13
12
 
14
- .ds-checkbox:has(.ds-checkbox__label) {
15
- grid-template-columns: var(--dsc-checkbox-size) auto;
16
- gap: var(--ds-spacing-2);
17
- }
13
+ .ds-checkbox:has(.ds-checkbox__label) {
14
+ grid-template-columns: var(--dsc-checkbox-size) auto;
15
+ gap: var(--ds-spacing-2);
16
+ }
18
17
 
19
- /* Checkbox */
20
- .ds-checkbox__input {
21
- position: relative;
22
- width: var(--dsc-checkbox-size);
23
- height: var(--dsc-checkbox-size);
24
- z-index: 1;
25
- appearance: none;
26
- margin: 0;
27
- align-self: center;
28
- outline: none;
29
- cursor: pointer;
30
- box-shadow: inset 0 0 0 2px var(--dsc-checkbox-border-color);
31
- background: var(--dsc-checkbox-background);
32
- border-radius: min(0.25rem, var(--ds-border-radius-md));
33
- }
18
+ /* Checkbox */
19
+ .ds-checkbox__input {
20
+ position: relative;
21
+ width: var(--dsc-checkbox-size);
22
+ height: var(--dsc-checkbox-size);
23
+ z-index: 1;
24
+ appearance: none;
25
+ margin: 0;
26
+ align-self: center;
27
+ outline: none;
28
+ cursor: pointer;
29
+ box-shadow: inset 0 0 0 2px var(--dsc-checkbox-border-color);
30
+ background: var(--dsc-checkbox-background);
31
+ border-radius: min(0.25rem, var(--ds-border-radius-md));
32
+ }
34
33
 
35
- .ds-checkbox__input::before {
36
- position: absolute;
37
- content: '';
38
- display: block;
39
- width: 2.75rem;
40
- height: 2.75rem;
41
- transform: translate(-50%, -50%);
42
- top: 50%;
43
- left: 50%;
44
- cursor: pointer;
45
- border-radius: var(--ds-border-radius-md);
46
- }
34
+ .ds-checkbox__input::before {
35
+ position: absolute;
36
+ content: '';
37
+ display: block;
38
+ width: 2.75rem;
39
+ height: 2.75rem;
40
+ transform: translate(-50%, -50%);
41
+ top: 50%;
42
+ left: 50%;
43
+ cursor: pointer;
44
+ border-radius: var(--ds-border-radius-md);
45
+ }
47
46
 
48
- .ds-checkbox__label {
49
- /* min-height: var(--ds-sizing-10); */
50
- min-width: min-content;
51
- display: inline-flex;
52
- flex-direction: row;
53
- gap: var(--ds-spacing-1);
54
- align-items: center;
55
- cursor: pointer;
56
- }
47
+ .ds-checkbox__label {
48
+ /* min-height: var(--ds-sizing-10); */
49
+ min-width: min-content;
50
+ display: inline-flex;
51
+ flex-direction: row;
52
+ gap: var(--ds-spacing-1);
53
+ align-items: center;
54
+ cursor: pointer;
55
+ }
57
56
 
58
- .ds-checkbox__description {
59
- margin-top: calc(var(--ds-spacing-2) * -1);
60
- color: var(--ds-color-neutral-text-subtle);
61
- grid-column: 2;
62
- }
57
+ .ds-checkbox__description {
58
+ margin-top: calc(var(--ds-spacing-2) * -1);
59
+ color: var(--ds-color-neutral-text-subtle);
60
+ grid-column: 2;
61
+ }
63
62
 
64
- .ds-checkbox--readonly > .ds-checkbox__label,
65
- .ds-checkbox--readonly > .ds-checkbox__input,
66
- .ds-checkbox--readonly > .ds-checkbox__input::before {
67
- cursor: default;
68
- }
63
+ .ds-checkbox--readonly > .ds-checkbox__label,
64
+ .ds-checkbox--readonly > .ds-checkbox__input,
65
+ .ds-checkbox--readonly > .ds-checkbox__input::before {
66
+ cursor: default;
67
+ }
69
68
 
70
- .ds-checkbox__input:disabled,
71
- .ds-checkbox__input:disabled ~ .ds-checkbox__label,
72
- .ds-checkbox__input:disabled::before {
73
- cursor: not-allowed;
74
- }
69
+ .ds-checkbox__input:disabled,
70
+ .ds-checkbox__input:disabled ~ .ds-checkbox__label,
71
+ .ds-checkbox__input:disabled::before {
72
+ cursor: not-allowed;
73
+ }
75
74
 
76
- /* .ds-checkbox__input:focus-visible {
75
+ /* .ds-checkbox__input:focus-visible {
77
76
  outline-offset: 3px;
78
77
  outline: var(--dsc-checkbox-focus-border-width) solid var(--ds-color-focus-outer);
79
78
  box-shadow:
@@ -81,127 +80,126 @@
81
80
  inset 0 0 0 2px var(--dsc-checkbox-border-color);
82
81
  } */
83
82
 
84
- .ds-checkbox__input::after {
85
- content: '';
86
- width: 100%;
87
- height: 100%;
88
- position: absolute;
89
- top: 50%;
90
- left: 50%;
91
- transform: translate(-50%, -50%);
92
- background-color: var(--dsc-checkbox-check_color);
93
- mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 23 23' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18.5509 6.32414C18.9414 6.71467 18.9414 7.34783 18.5509 7.73836L10.5821 15.7071C10.1916 16.0976 9.55842 16.0976 9.16789 15.7071L4.94914 11.4884C4.55862 11.0978 4.55862 10.4647 4.94914 10.0741C5.33967 9.68362 5.97283 9.68362 6.36336 10.0741L9.875 13.5858L17.1366 6.32414C17.5272 5.93362 18.1603 5.93362 18.5509 6.32414Z' fill='white'/%3E%3C/svg%3E%0A");
94
- }
83
+ .ds-checkbox__input::after {
84
+ content: '';
85
+ width: 100%;
86
+ height: 100%;
87
+ position: absolute;
88
+ top: 50%;
89
+ left: 50%;
90
+ transform: translate(-50%, -50%);
91
+ background-color: var(--dsc-checkbox-check_color);
92
+ mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 23 23' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18.5509 6.32414C18.9414 6.71467 18.9414 7.34783 18.5509 7.73836L10.5821 15.7071C10.1916 16.0976 9.55842 16.0976 9.16789 15.7071L4.94914 11.4884C4.55862 11.0978 4.55862 10.4647 4.94914 10.0741C5.33967 9.68362 5.97283 9.68362 6.36336 10.0741L9.875 13.5858L17.1366 6.32414C17.5272 5.93362 18.1603 5.93362 18.5509 6.32414Z' fill='white'/%3E%3C/svg%3E%0A");
93
+ }
95
94
 
96
- .ds-checkbox__input:checked {
97
- --dsc-checkbox-border-color: var(--ds-color-accent-base-default);
98
- --dsc-checkbox-background: var(--ds-color-accent-base-default);
99
- --dsc-checkbox-check_color: white;
95
+ .ds-checkbox__input:checked {
96
+ --dsc-checkbox-border-color: var(--ds-color-accent-base-default);
97
+ --dsc-checkbox-background: var(--ds-color-accent-base-default);
98
+ --dsc-checkbox-check_color: var(--ds-color-accent-contrast-1);
100
99
 
101
- background: var(--dsc-checkbox-background);
102
- }
100
+ background: var(--dsc-checkbox-background);
101
+ }
103
102
 
104
- .ds-checkbox__input:indeterminate {
105
- --dsc-checkbox-border-color: var(--ds-color-accent-base-default);
106
- --dsc-checkbox-background: var(--ds-color-accent-base-default);
107
- --dsc-checkbox-check_color: white;
108
- }
103
+ .ds-checkbox__input:indeterminate {
104
+ --dsc-checkbox-border-color: var(--ds-color-accent-base-default);
105
+ --dsc-checkbox-background: var(--ds-color-accent-base-default);
106
+ --dsc-checkbox-check_color: var(--ds-color-accent-contrast-1);
107
+ }
109
108
 
110
- .ds-checkbox__input:indeterminate::after {
111
- mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 23 23' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.25 11.25C4.25 10.4216 4.92157 9.75 5.75 9.75H16.75C17.5784 9.75 18.25 10.4216 18.25 11.25C18.25 12.0784 17.5784 12.75 16.75 12.75H5.75C4.92157 12.75 4.25 12.0784 4.25 11.25Z' fill='white' /%3E%3C/svg%3E%0A");
112
- }
109
+ .ds-checkbox__input:indeterminate::after {
110
+ mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 23 23' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.25 11.25C4.25 10.4216 4.92157 9.75 5.75 9.75H16.75C17.5784 9.75 18.25 10.4216 18.25 11.25C18.25 12.0784 17.5784 12.75 16.75 12.75H5.75C4.92157 12.75 4.25 12.0784 4.25 11.25Z' fill='white' /%3E%3C/svg%3E%0A");
111
+ }
113
112
 
114
- .ds-checkbox--readonly > .ds-checkbox__input {
115
- --dsc-checkbox-border-color: var(--ds-color-neutral-border-subtle);
116
- --dsc-checkbox-background: var(--ds-color-neutral-background-subtle);
117
- }
113
+ .ds-checkbox--readonly > .ds-checkbox__input {
114
+ --dsc-checkbox-border-color: var(--ds-color-neutral-border-subtle);
115
+ --dsc-checkbox-background: var(--ds-color-neutral-background-subtle);
116
+ }
118
117
 
119
- .ds-checkbox__input:disabled,
120
- .ds-checkbox__input:disabled ~ .ds-checkbox__label,
121
- .ds-checkbox__input:disabled ~ .ds-checkbox__description {
122
- opacity: var(--ds-disabled-opacity);
123
- }
118
+ .ds-checkbox__input:disabled,
119
+ .ds-checkbox__input:disabled ~ .ds-checkbox__label,
120
+ .ds-checkbox__input:disabled ~ .ds-checkbox__description {
121
+ opacity: var(--ds-disabled-opacity);
122
+ }
124
123
 
125
- /* .ds-checkbox__input:checked:not(:focus-visible) {
124
+ /* .ds-checkbox__input:checked:not(:focus-visible) {
126
125
  box-shadow: inset 0 0 0 2px var(--dsc-checkbox-border-color);
127
126
  } */
128
127
 
129
- .ds-checkbox:has(.ds-checkbox__input:focus-visible) {
130
- --dsc-focus-border-width: 3px;
128
+ .ds-checkbox:has(.ds-checkbox__input:focus-visible) {
129
+ --dsc-focus-border-width: 3px;
131
130
 
132
- outline: var(--dsc-focus-border-width) solid var(--ds-color-focus-outer);
133
- outline-offset: var(--dsc-focus-border-width);
134
- box-shadow: 0 0 0 var(--dsc-focus-border-width) var(--ds-color-focus-inner);
135
- border-radius: var(--ds-border-radius-md);
136
- }
131
+ outline: var(--dsc-focus-border-width) solid var(--ds-color-focus-outer);
132
+ outline-offset: var(--dsc-focus-border-width);
133
+ box-shadow: 0 0 0 var(--dsc-focus-border-width) var(--ds-color-focus-inner);
134
+ border-radius: var(--ds-border-radius-md);
135
+ }
137
136
 
138
- .ds-checkbox--readonly > .ds-checkbox__input:checked {
139
- --dsc-checkbox-check_color: var(--ds-color-neutral-text-subtle);
137
+ .ds-checkbox--readonly > .ds-checkbox__input:checked {
138
+ --dsc-checkbox-check_color: var(--ds-color-neutral-text-subtle);
140
139
 
141
- background: var(--dsc-checkbox-background);
142
- }
140
+ background: var(--dsc-checkbox-background);
141
+ }
143
142
 
144
- .ds-checkbox--readonly > .ds-checkbox__input:indeterminate {
145
- --dsc-checkbox-check_color: var(--ds-color-neutral-text-subtle);
143
+ .ds-checkbox--readonly > .ds-checkbox__input:indeterminate {
144
+ --dsc-checkbox-check_color: var(--ds-color-neutral-text-subtle);
146
145
 
147
- background: var(--dsc-checkbox-background);
148
- }
146
+ background: var(--dsc-checkbox-background);
147
+ }
149
148
 
150
- .ds-checkbox--error > .ds-checkbox__input:not(:disabled, :focus-visible) {
151
- --dsc-checkbox-border-color: var(--ds-color-danger-border-default);
152
- }
149
+ .ds-checkbox--error > .ds-checkbox__input:not(:disabled, :focus-visible) {
150
+ --dsc-checkbox-border-color: var(--ds-color-danger-border-default);
151
+ }
153
152
 
154
- /* Only use hover for non-touch devices to prevent sticky-hovering
153
+ /* Only use hover for non-touch devices to prevent sticky-hovering
155
154
  "input:not(:read-only)" does not work so using ".container:not(.readonly) >" instead */
156
- @media (hover: hover) and (pointer: fine) {
157
- .ds-checkbox:not(.ds-checkbox--readonly) .ds-checkbox__input:not(:disabled) ~ .ds-checkbox__label:hover,
158
- .ds-checkbox:not(.ds-checkbox--readonly) .ds-checkbox__input:hover:not(:disabled) ~ .ds-checkbox__label {
159
- color: var(--ds-color-accent-text-subtle);
160
- }
155
+ @media (hover: hover) and (pointer: fine) {
156
+ .ds-checkbox:not(.ds-checkbox--readonly) .ds-checkbox__input:not(:disabled) ~ .ds-checkbox__label:hover,
157
+ .ds-checkbox:not(.ds-checkbox--readonly) .ds-checkbox__input:hover:not(:disabled) ~ .ds-checkbox__label {
158
+ color: var(--ds-color-accent-text-subtle);
159
+ }
161
160
 
162
- .ds-checkbox:not(.ds-checkbox--readonly) .ds-checkbox__input:hover:not(:checked, :disabled, :focus-visible) {
163
- --dsc-checkbox-border-color: var(--ds-color-accent-border-strong);
161
+ .ds-checkbox:not(.ds-checkbox--readonly) .ds-checkbox__input:hover:not(:checked, :disabled, :focus-visible) {
162
+ --dsc-checkbox-border-color: var(--ds-color-accent-border-strong);
164
163
 
165
- box-shadow:
166
- var(--dsc-checkbox-border__hover),
167
- inset 0 0 0 2px var(--dsc-checkbox-border-color);
168
- }
164
+ box-shadow:
165
+ var(--dsc-checkbox-border__hover),
166
+ inset 0 0 0 2px var(--dsc-checkbox-border-color);
167
+ }
169
168
 
170
- .ds-checkbox:not(.ds-checkbox--readonly) .ds-checkbox__input:indeterminate:hover:not(:focus-visible) {
171
- --dsc-checkbox-border-color: var(--ds-color-accent-border-strong);
169
+ .ds-checkbox:not(.ds-checkbox--readonly) .ds-checkbox__input:indeterminate:hover:not(:focus-visible) {
170
+ --dsc-checkbox-border-color: var(--ds-color-accent-border-strong);
172
171
 
173
- box-shadow: var(--dsc-checkbox-border__hover);
174
- }
172
+ box-shadow: var(--dsc-checkbox-border__hover);
173
+ }
175
174
 
176
- .ds-checkbox:not(.ds-checkbox--readonly) .ds-checkbox__input:hover:checked:not(:disabled, :focus-visible) {
177
- box-shadow: var(--dsc-checkbox-border__hover);
178
- }
175
+ .ds-checkbox:not(.ds-checkbox--readonly) .ds-checkbox__input:hover:checked:not(:disabled, :focus-visible) {
176
+ box-shadow: var(--dsc-checkbox-border__hover);
179
177
  }
178
+ }
180
179
 
181
- /** Sizing */
180
+ /** Sizing */
182
181
 
183
- .ds-checkbox--sm {
184
- --dsc-checkbox-size: var(--ds-sizing-5);
182
+ .ds-checkbox--sm {
183
+ --dsc-checkbox-size: var(--ds-sizing-5);
185
184
 
186
- /* min-height: var(--ds-sizing-10); */
187
- }
185
+ /* min-height: var(--ds-sizing-10); */
186
+ }
188
187
 
189
- .ds-checkbox--md {
190
- --dsc-checkbox-size: var(--ds-sizing-6);
188
+ .ds-checkbox--md {
189
+ --dsc-checkbox-size: var(--ds-sizing-6);
191
190
 
192
- /* min-height: var(--ds-sizing-11); */
193
- }
191
+ /* min-height: var(--ds-sizing-11); */
192
+ }
194
193
 
195
- .ds-checkbox--lg {
196
- --dsc-checkbox-size: var(--ds-sizing-7);
194
+ .ds-checkbox--lg {
195
+ --dsc-checkbox-size: var(--ds-sizing-7);
197
196
 
198
- /* min-height: var(--ds-sizing-12); */
199
- }
197
+ /* min-height: var(--ds-sizing-12); */
198
+ }
200
199
 
201
- .ds-checkbox__group {
202
- display: flex;
203
- flex-direction: column;
204
- gap: var(--ds-spacing-5);
205
- width: fit-content;
206
- }
200
+ .ds-checkbox__group {
201
+ display: flex;
202
+ flex-direction: column;
203
+ gap: var(--ds-spacing-5);
204
+ width: fit-content;
207
205
  }