@digdir/designsystemet-css 0.11.0-alpha.7 → 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 +40 -40
  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 -146
  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/chip.css CHANGED
@@ -1,173 +1,171 @@
1
- @layer ds.chip {
2
- /*
1
+ /*
3
2
  The class is unused. There is no root chip component?
4
3
  .chip {
5
4
  display: flex;
6
5
  }
7
6
  */
8
7
 
9
- .ds-chip--button {
10
- --dsc-chip-height: var(--ds-sizing-7);
11
- --dsc-chip-padding: var(--ds-spacing-3);
12
- --dsc-chip-background: var(--ds-color-accent-surface-default);
13
- --dsc-chip-text-color: var(--ds-color-neutral-text-default);
14
- --dsc-chip-border: var(--ds-color-accent-border-subtle);
15
- --dsc-chip-border-radius: var(--ds-border-radius-full);
16
-
17
- background: var(--dsc-chip-background);
18
- padding: 0 var(--dsc-chip-padding);
19
- min-height: var(--dsc-chip-height);
20
- border-radius: var(--dsc-chip-border-radius);
21
- border: 1px solid var(--dsc-chip-border);
22
- color: var(--dsc-chip-text-color);
23
- text-decoration: none;
24
- font-family: inherit;
25
- display: inline-flex;
26
- align-items: center;
27
- }
8
+ .ds-chip--button {
9
+ --dsc-chip-height: var(--ds-sizing-7);
10
+ --dsc-chip-padding: 0 var(--ds-spacing-3);
11
+ --dsc-chip-background: var(--ds-color-accent-surface-default);
12
+ --dsc-chip-text-color: var(--ds-color-neutral-text-default);
13
+ --dsc-chip-border: var(--ds-color-accent-border-subtle);
14
+ --dsc-chip-border-radius: var(--ds-border-radius-full);
15
+
16
+ background: var(--dsc-chip-background);
17
+ padding: var(--dsc-chip-padding);
18
+ min-height: var(--dsc-chip-height);
19
+ border-radius: var(--dsc-chip-border-radius);
20
+ border: 1px solid var(--dsc-chip-border);
21
+ color: var(--dsc-chip-text-color);
22
+ text-decoration: none;
23
+ font-family: inherit;
24
+ display: inline-flex;
25
+ align-items: center;
26
+ }
28
27
 
29
- .ds-chip--button:disabled,
30
- .ds-chip--button[aria-disabled='true'] {
31
- cursor: not-allowed;
32
- opacity: var(--ds-disabled-opacity);
33
- }
28
+ .ds-chip--button:disabled,
29
+ .ds-chip--button[aria-disabled='true'] {
30
+ cursor: not-allowed;
31
+ opacity: var(--ds-disabled-opacity);
32
+ }
34
33
 
35
- .ds-chip--button .ds-chip__label {
36
- color: inherit;
37
- line-height: normal;
38
- display: flex;
39
- align-items: center;
40
- flex-direction: row;
41
- gap: var(--ds-spacing-2);
42
- }
34
+ .ds-chip--button .ds-chip__label {
35
+ color: inherit;
36
+ line-height: normal;
37
+ display: flex;
38
+ align-items: center;
39
+ flex-direction: row;
40
+ gap: var(--ds-spacing-2);
41
+ }
43
42
 
44
- .ds-chip--removable {
45
- --dsc-removable-background: var(--ds-color-accent-base-default);
46
- --dsc-removable-text-color: var(--ds-color-neutral-contrast-default);
47
- --dsc-removable-chip-size: var(--ds-sizing-7);
48
- --dsc-removable-chip-xmark-color: var(--ds-color-neutral-contrast-default);
49
- --dsc-removable-chip-xmark-padding_right: var(--ds-spacing-1);
50
- --dsc-removable-chip-xmark-size: var(--ds-sizing-6);
51
- --dsc-removable-chip-xmark-wrapper-width: calc(var(--dsc-removable-chip-xmark-size) + var(--dsc-removable-chip-xmark-padding_right));
52
-
53
- color: var(--dsc-removable-text-color);
54
- background: var(--dsc-removable-background);
55
- border: 0;
56
- padding-right: var(--ds-spacing-2);
57
- min-height: var(--dsc-chip-height);
58
- }
43
+ .ds-chip--removable {
44
+ --dsc-removable-background: var(--ds-color-accent-base-default);
45
+ --dsc-removable-text-color: var(--ds-color-neutral-contrast-default);
46
+ --dsc-removable-chip-size: var(--ds-sizing-7);
47
+ --dsc-removable-chip-xmark-color: var(--ds-color-neutral-contrast-default);
48
+ --dsc-removable-chip-xmark-padding_right: var(--ds-spacing-1);
49
+ --dsc-removable-chip-xmark-size: var(--ds-sizing-6);
50
+ --dsc-removable-chip-xmark-wrapper-width: calc(var(--dsc-removable-chip-xmark-size) + var(--dsc-removable-chip-xmark-padding_right));
51
+
52
+ color: var(--dsc-removable-text-color);
53
+ background: var(--dsc-removable-background);
54
+ border: 0;
55
+ padding-right: var(--ds-spacing-2);
56
+ min-height: var(--dsc-chip-height);
57
+ }
59
58
 
60
- .ds-chip--removable.ds-chip--sm {
61
- padding-right: var(--ds-spacing-1);
62
- }
59
+ .ds-chip--removable.ds-chip--sm {
60
+ padding-right: var(--ds-spacing-1);
61
+ }
63
62
 
64
- .ds-chip--removable.ds-chip--lg {
65
- padding-right: var(--ds-spacing-2);
66
- }
63
+ .ds-chip--removable.ds-chip--lg {
64
+ padding-right: var(--ds-spacing-2);
65
+ }
67
66
 
68
- .ds-chip__x-mark {
69
- color: var(--dsc-removable-chip-xmark-color);
70
- height: var(--dsc-removable-chip-xmark-size);
71
- width: var(--dsc-removable-chip-xmark-size);
72
- }
67
+ .ds-chip__x-mark {
68
+ color: var(--dsc-removable-chip-xmark-color);
69
+ height: var(--dsc-removable-chip-xmark-size);
70
+ width: var(--dsc-removable-chip-xmark-size);
71
+ }
73
72
 
74
- .ds-chip__x-mark .ds-chip__icon {
75
- height: var(--dsc-removable-chip-xmark-size);
76
- width: var(--dsc-removable-chip-xmark-size);
77
- }
73
+ .ds-chip__x-mark .ds-chip__icon {
74
+ height: var(--dsc-removable-chip-xmark-size);
75
+ width: var(--dsc-removable-chip-xmark-size);
76
+ }
78
77
 
79
- .ds-chip--spacing {
80
- padding-left: var(--ds-spacing-2) !important;
81
- }
78
+ .ds-chip--spacing {
79
+ padding-left: var(--ds-spacing-2) !important;
80
+ }
82
81
 
83
- .ds-chip--sm .ds-chip__checkmark-icon {
84
- height: var(--ds-sizing-5);
85
- width: auto;
86
- }
82
+ .ds-chip--sm .ds-chip__checkmark-icon {
83
+ height: var(--ds-sizing-5);
84
+ width: auto;
85
+ }
87
86
 
88
- .ds-chip--md .ds-chip__checkmark-icon {
89
- height: 24px;
90
- width: auto;
91
- }
87
+ .ds-chip--md .ds-chip__checkmark-icon {
88
+ height: 24px;
89
+ width: auto;
90
+ }
92
91
 
93
- .ds-chip--lg .ds-chip__checkmark-icon {
94
- height: 26px;
95
- width: auto;
96
- }
92
+ .ds-chip--lg .ds-chip__checkmark-icon {
93
+ height: 26px;
94
+ width: auto;
95
+ }
97
96
 
98
- .ds-chip--group-container {
99
- --dsc-chip-group-gap: var(--ds-spacing-2);
97
+ .ds-chip--group-container {
98
+ --dsc-chip-group-gap: var(--ds-spacing-2);
100
99
 
101
- display: flex;
102
- gap: var(--dsc-chip-group-gap);
103
- list-style-type: none;
104
- padding: 0;
105
- margin: 0;
106
- }
100
+ display: flex;
101
+ gap: var(--dsc-chip-group-gap);
102
+ list-style-type: none;
103
+ padding: 0;
104
+ margin: 0;
105
+ }
107
106
 
108
- .ds-chip--group-container.ds-chip--sm {
109
- --dsc-chip-group-gap: var(--ds-spacing-2);
110
- }
107
+ .ds-chip--group-container.ds-chip--sm {
108
+ --dsc-chip-group-gap: var(--ds-spacing-2);
109
+ }
111
110
 
112
- .ds-chip--group-container.ds-chip--md {
113
- --dsc-chip-group-gap: var(--ds-spacing-2);
114
- }
111
+ .ds-chip--group-container.ds-chip--md {
112
+ --dsc-chip-group-gap: var(--ds-spacing-2);
113
+ }
115
114
 
116
- .ds-chip--group-container.ds-chip--lg {
117
- --dsc-chip-group-gap: var(--ds-spacing-2);
118
- }
115
+ .ds-chip--group-container.ds-chip--lg {
116
+ --dsc-chip-group-gap: var(--ds-spacing-2);
117
+ }
119
118
 
120
- /* Only use hover for non-touch devices to prevent sticky-hovering */
121
- @media (hover: hover) and (pointer: fine) {
122
- .ds-chip--button:not(:disabled, [aria-disabled='true']):hover {
123
- --dsc-chip-background: var(--ds-color-accent-surface-hover);
124
- --dsc-chip-text-color: var(--ds-color-neutral-text-default);
125
- --dsc-chip-border: var(--ds-color-accent-border-default);
126
-
127
- cursor: pointer;
128
- }
129
-
130
- .ds-chip--button:not(:disabled, [aria-disabled='true']):is([aria-pressed='true']):hover {
131
- --dsc-chip-background: var(--ds-color-accent-surface-hover);
132
- --dsc-chip-text-color: var(--ds-color-neutral-text-default);
133
- }
134
-
135
- .ds-chip--removable:not(:disabled, [aria-disabled='true']):hover,
136
- .ds-chip--removable:not(:disabled, [aria-disabled='true']):focus {
137
- --dsc-removable-background: var(--ds-color-accent-base-hover);
138
- --dsc-removable-chip-xmark-color: var(--ds-color-neutral-contrast-default);
139
- }
140
- }
119
+ /* Only use hover for non-touch devices to prevent sticky-hovering */
120
+ @media (hover: hover) and (pointer: fine) {
121
+ .ds-chip--button:not(:disabled, [aria-disabled='true']):hover {
122
+ --dsc-chip-background: var(--ds-color-accent-surface-hover);
123
+ --dsc-chip-text-color: var(--ds-color-neutral-text-default);
124
+ --dsc-chip-border: var(--ds-color-accent-border-default);
141
125
 
142
- .ds-chip--button:is([aria-pressed='true']),
143
- .ds-chip--button:not(:disabled, [aria-disabled='true']):active,
144
- .ds-chip--removable:is([aria-pressed='true']),
145
- .ds-chip--removable:not(:disabled, [aria-disabled='true']):active {
146
- --dsc-chip-background: var(--ds-color-accent-base-active);
147
- --dsc-chip-text-color: var(--ds-color-neutral-contrast-default);
148
- --dsc-chip-border: var(--ds-color-accent-base-active);
149
- --dsc-removable-background: var(--ds-color-accent-base-active);
150
- --dsc-removable-text-color: var(--ds-color-neutral-contrast-default);
126
+ cursor: pointer;
151
127
  }
152
128
 
153
- .ds-chip--sm {
154
- --dsc-chip-height: var(--ds-sizing-7);
155
- --dsc-chip-padding: var(--ds-spacing-3);
156
- --dsc-removable-chip-xmark-size: var(--ds-sizing-5);
157
- --dsc-removable-chip-xmark-padding_right: var(--ds-spacing-1);
129
+ .ds-chip--button:not(:disabled, [aria-disabled='true']):is([aria-pressed='true']):hover {
130
+ --dsc-chip-background: var(--ds-color-accent-surface-hover);
131
+ --dsc-chip-text-color: var(--ds-color-neutral-text-default);
158
132
  }
159
133
 
160
- .ds-chip--md {
161
- --dsc-chip-height: var(--ds-sizing-8);
162
- --dsc-chip-padding: var(--ds-spacing-3);
163
- --dsc-removable-chip-xmark-size: var(--ds-sizing-6);
164
- --dsc-removable-chip-xmark-padding_right: var(--ds-spacing-2);
134
+ .ds-chip--removable:not(:disabled, [aria-disabled='true']):hover,
135
+ .ds-chip--removable:not(:disabled, [aria-disabled='true']):focus {
136
+ --dsc-removable-background: var(--ds-color-accent-base-hover);
137
+ --dsc-removable-chip-xmark-color: var(--ds-color-neutral-contrast-default);
165
138
  }
139
+ }
166
140
 
167
- .ds-chip--lg {
168
- --dsc-chip-height: var(--ds-sizing-9);
169
- --dsc-chip-padding: var(--ds-spacing-4);
170
- --dsc-removable-chip-xmark-size: var(--ds-sizing-7);
171
- --dsc-removable-chip-xmark-padding_right: var(--ds-spacing-3);
172
- }
141
+ .ds-chip--button:is([aria-pressed='true']),
142
+ .ds-chip--button:not(:disabled, [aria-disabled='true']):active,
143
+ .ds-chip--removable:is([aria-pressed='true']),
144
+ .ds-chip--removable:not(:disabled, [aria-disabled='true']):active {
145
+ --dsc-chip-background: var(--ds-color-accent-base-active);
146
+ --dsc-chip-text-color: var(--ds-color-neutral-contrast-default);
147
+ --dsc-chip-border: var(--ds-color-accent-base-active);
148
+ --dsc-removable-background: var(--ds-color-accent-base-active);
149
+ --dsc-removable-text-color: var(--ds-color-neutral-contrast-default);
150
+ }
151
+
152
+ .ds-chip--sm {
153
+ --dsc-chip-height: var(--ds-sizing-7);
154
+ --dsc-chip-padding: 0 var(--ds-spacing-3);
155
+ --dsc-removable-chip-xmark-size: var(--ds-sizing-5);
156
+ --dsc-removable-chip-xmark-padding_right: var(--ds-spacing-1);
157
+ }
158
+
159
+ .ds-chip--md {
160
+ --dsc-chip-height: var(--ds-sizing-8);
161
+ --dsc-chip-padding: 0 var(--ds-spacing-3);
162
+ --dsc-removable-chip-xmark-size: var(--ds-sizing-6);
163
+ --dsc-removable-chip-xmark-padding_right: var(--ds-spacing-2);
164
+ }
165
+
166
+ .ds-chip--lg {
167
+ --dsc-chip-height: var(--ds-sizing-9);
168
+ --dsc-chip-padding: 0 var(--ds-spacing-4);
169
+ --dsc-removable-chip-xmark-size: var(--ds-sizing-7);
170
+ --dsc-removable-chip-xmark-padding_right: var(--ds-spacing-3);
173
171
  }