@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/button.css CHANGED
@@ -1,203 +1,201 @@
1
- @layer ds.btn {
2
- .ds-btn {
3
- --dsc-btn-padding: var(--ds-spacing-2) var(--ds-spacing-4);
4
- --dsc-btn-primary-background: var(--ds-color-accent-base-default);
5
- --dsc-btn-primary-hover-background: var(--ds-color-accent-base-hover);
6
- --dsc-btn-primary-active-background: var(--ds-color-accent-base-active);
7
- --dsc-btn-primary-hover-color: var(--ds-color-accent-contrast-default);
8
- --dsc-btn-secondary-color: var(--ds-color-accent-text-default);
9
- --dsc-btn-secondary-hover-color: var(--ds-color-accent-text-default);
10
- --dsc-btn-secondary-active-color: var(--ds-color-accent-text-default);
11
- --dsc-btn-secondary-border-color: var(--ds-color-accent-border-strong);
12
- --dsc-btn-secondary-hover-background: var(--ds-color-accent-surface-hover);
13
- --dsc-btn-secondary-active-background: var(--ds-color-accent-surface-hover);
14
- --dsc-btn-tertiary-color: var(--ds-color-accent-text-default);
15
- --dsc-btn-tertiary-hover-color: var(--ds-color-accent-text-default);
16
- --dsc-btn-tertiary-active-color: var(--ds-color-accent-text-default);
17
- --dsc-btn-tertiary-hover-background: var(--ds-color-accent-surface-hover);
18
- --dsc-btn-tertiary-active-background: var(--ds-color-accent-surface-hover);
19
-
20
- display: flex;
21
- align-items: center;
22
- border: var(--ds-border-width-default) solid transparent;
23
- background-color: var(--dsc-btn-primary-background);
24
- color: var(--dsc-btn-primary-color);
25
- min-width: 2.5em;
26
- padding: var(--dsc-btn-padding);
27
- box-sizing: border-box;
28
- cursor: pointer;
29
- font-family: inherit;
30
- justify-content: center;
31
- text-align: center;
32
- text-decoration: none;
33
- position: relative;
34
- border-radius: var(--ds-border-radius-md);
35
- min-height: var(--ds-sizing-10);
36
- }
1
+ .ds-btn {
2
+ --dsc-btn-padding: var(--ds-spacing-2) var(--ds-spacing-4);
3
+ --dsc-btn-primary-background: var(--ds-color-accent-base-default);
4
+ --dsc-btn-primary-hover-background: var(--ds-color-accent-base-hover);
5
+ --dsc-btn-primary-active-background: var(--ds-color-accent-base-active);
6
+ --dsc-btn-primary-hover-color: var(--ds-color-accent-contrast-default);
7
+ --dsc-btn-secondary-color: var(--ds-color-accent-text-default);
8
+ --dsc-btn-secondary-hover-color: var(--ds-color-accent-text-default);
9
+ --dsc-btn-secondary-active-color: var(--ds-color-accent-text-default);
10
+ --dsc-btn-secondary-border-color: var(--ds-color-accent-border-strong);
11
+ --dsc-btn-secondary-hover-background: var(--ds-color-accent-surface-hover);
12
+ --dsc-btn-secondary-active-background: var(--ds-color-accent-surface-hover);
13
+ --dsc-btn-tertiary-color: var(--ds-color-accent-text-default);
14
+ --dsc-btn-tertiary-hover-color: var(--ds-color-accent-text-default);
15
+ --dsc-btn-tertiary-active-color: var(--ds-color-accent-text-default);
16
+ --dsc-btn-tertiary-hover-background: var(--ds-color-accent-surface-hover);
17
+ --dsc-btn-tertiary-active-background: var(--ds-color-accent-surface-hover);
18
+
19
+ display: flex;
20
+ align-items: center;
21
+ border: var(--ds-border-width-default) solid transparent;
22
+ background-color: var(--dsc-btn-primary-background);
23
+ color: var(--dsc-btn-primary-color);
24
+ min-width: 2.5em;
25
+ padding: var(--dsc-btn-padding);
26
+ box-sizing: border-box;
27
+ cursor: pointer;
28
+ font-family: inherit;
29
+ justify-content: center;
30
+ text-align: center;
31
+ text-decoration: none;
32
+ position: relative;
33
+ border-radius: var(--ds-border-radius-md);
34
+ min-height: var(--ds-sizing-10);
35
+ }
37
36
 
38
- .ds-btn svg {
39
- overflow: visible;
40
- }
37
+ .ds-btn svg {
38
+ overflow: visible;
39
+ }
41
40
 
42
- .ds-btn:disabled,
43
- .ds-btn[aria-disabled='true'] {
44
- cursor: not-allowed;
45
- opacity: var(--ds-disabled-opacity);
46
- }
41
+ .ds-btn:disabled,
42
+ .ds-btn[aria-disabled='true'] {
43
+ cursor: not-allowed;
44
+ opacity: var(--ds-disabled-opacity);
45
+ }
47
46
 
48
- .ds-btn--sm {
49
- --dsc-btn-padding: var(--ds-spacing-2) var(--ds-spacing-3);
47
+ .ds-btn--sm {
48
+ --dsc-btn-padding: var(--ds-spacing-2) var(--ds-spacing-3);
50
49
 
51
- gap: var(--ds-sizing-1);
52
- min-height: var(--ds-sizing-10);
53
- }
50
+ gap: var(--ds-sizing-1);
51
+ min-height: var(--ds-sizing-10);
52
+ }
54
53
 
55
- .ds-btn--sm::before {
56
- position: absolute;
57
- top: 0;
58
- left: 0;
59
- width: auto;
60
- min-height: auto;
61
- content: '';
62
- }
54
+ .ds-btn--sm::before {
55
+ position: absolute;
56
+ top: 0;
57
+ left: 0;
58
+ width: auto;
59
+ min-height: auto;
60
+ content: '';
61
+ }
63
62
 
64
- .ds-btn--sm::after {
65
- position: absolute;
66
- top: -5px;
67
- left: 0;
68
- width: 100%;
69
- height: 44px;
70
- content: '';
71
- }
63
+ .ds-btn--sm::after {
64
+ position: absolute;
65
+ top: -5px;
66
+ left: 0;
67
+ width: 100%;
68
+ height: 44px;
69
+ content: '';
70
+ }
72
71
 
73
- .ds-btn--md {
74
- --dsc-btn-padding: var(--ds-spacing-2) var(--ds-spacing-4);
72
+ .ds-btn--md {
73
+ --dsc-btn-padding: var(--ds-spacing-2) var(--ds-spacing-4);
75
74
 
76
- gap: var(--ds-sizing-2);
77
- min-height: var(--ds-sizing-12);
78
- }
75
+ gap: var(--ds-sizing-2);
76
+ min-height: var(--ds-sizing-12);
77
+ }
79
78
 
80
- .ds-btn--lg {
81
- --dsc-btn-padding: var(--ds-spacing-3) var(--ds-spacing-5);
79
+ .ds-btn--lg {
80
+ --dsc-btn-padding: var(--ds-spacing-3) var(--ds-spacing-5);
82
81
 
83
- gap: var(--ds-sizing-2);
84
- min-height: var(--ds-sizing-14);
85
- }
82
+ gap: var(--ds-sizing-2);
83
+ min-height: var(--ds-sizing-14);
84
+ }
86
85
 
87
- .ds-btn--full-width {
88
- width: 100%;
89
- }
86
+ .ds-btn--full-width {
87
+ width: 100%;
88
+ }
90
89
 
91
- .ds-btn--secondary,
92
- .ds-btn--tertiary {
93
- background-color: transparent;
94
- }
90
+ .ds-btn--secondary,
91
+ .ds-btn--tertiary {
92
+ background-color: transparent;
93
+ }
95
94
 
96
- .ds-btn--icon-only {
97
- --dsc-btn-padding: 0;
98
- }
95
+ .ds-btn--icon-only {
96
+ --dsc-btn-padding: 0;
97
+ }
99
98
 
100
- /* Only use hover for non-touch devices to prevent sticky-hovering */
101
- @media (hover: hover) and (pointer: fine) {
102
- .ds-btn--primary:not([aria-disabled='true'], :disabled):hover {
103
- background-color: var(--dsc-btn-primary-hover-background);
104
- }
105
-
106
- .ds-btn--secondary:not([aria-disabled='true'], :disabled):hover {
107
- color: var(--dsc-btn-secondary-hover-color);
108
- border-color: var(--dsc-btn-secondary-border-color);
109
- background-color: var(--dsc-btn-secondary-hover-background);
110
- }
111
-
112
- .ds-btn--tertiary:not([aria-disabled='true'], :disabled):hover {
113
- color: var(--dsc-btn-tertiary-hover-color);
114
- background-color: var(--dsc-btn-tertiary-hover-background);
115
- }
99
+ /* Only use hover for non-touch devices to prevent sticky-hovering */
100
+ @media (hover: hover) and (pointer: fine) {
101
+ .ds-btn--primary:not([aria-disabled='true'], :disabled):hover {
102
+ background-color: var(--dsc-btn-primary-hover-background);
116
103
  }
117
104
 
118
- /* Primary button colors */
119
- .ds-btn--primary {
120
- background-color: var(--dsc-btn-primary-background);
105
+ .ds-btn--secondary:not([aria-disabled='true'], :disabled):hover {
106
+ color: var(--dsc-btn-secondary-hover-color);
107
+ border-color: var(--dsc-btn-secondary-border-color);
108
+ background-color: var(--dsc-btn-secondary-hover-background);
121
109
  }
122
110
 
123
- .ds-btn--primary:not([aria-disabled='true'], :disabled):active {
124
- background-color: var(--dsc-btn-primary-active-background);
111
+ .ds-btn--tertiary:not([aria-disabled='true'], :disabled):hover {
112
+ color: var(--dsc-btn-tertiary-hover-color);
113
+ background-color: var(--dsc-btn-tertiary-hover-background);
125
114
  }
115
+ }
126
116
 
127
- /* Secondary button colors */
128
- .ds-btn--secondary {
129
- color: var(--dsc-btn-secondary-color);
130
- border-color: var(--dsc-btn-secondary-border-color);
131
- background-color: transparent;
132
- }
117
+ /* Primary button colors */
118
+ .ds-btn--primary {
119
+ background-color: var(--dsc-btn-primary-background);
120
+ }
133
121
 
134
- .ds-btn--secondary:not([aria-disabled='true'], :disabled):active {
135
- color: var(--dsc-btn-secondary-active-color);
136
- border-color: var(--dsc-btn-secondary-border-color);
137
- background-color: var(--dsc-btn-secondary-active-background);
138
- }
122
+ .ds-btn--primary:not([aria-disabled='true'], :disabled):active {
123
+ background-color: var(--dsc-btn-primary-active-background);
124
+ }
139
125
 
140
- /* Tertiary button colors */
141
- .ds-btn--tertiary {
142
- color: var(--dsc-btn-tertiary-color);
143
- }
126
+ /* Secondary button colors */
127
+ .ds-btn--secondary {
128
+ color: var(--dsc-btn-secondary-color);
129
+ border-color: var(--dsc-btn-secondary-border-color);
130
+ background-color: transparent;
131
+ }
144
132
 
145
- .ds-btn--tertiary:not([aria-disabled='true'], :disabled):active {
146
- color: var(--dsc-btn-tertiary-active-color);
147
- background-color: var(--dsc-btn-tertiary-active-background);
148
- }
133
+ .ds-btn--secondary:not([aria-disabled='true'], :disabled):active {
134
+ color: var(--dsc-btn-secondary-active-color);
135
+ border-color: var(--dsc-btn-secondary-border-color);
136
+ background-color: var(--dsc-btn-secondary-active-background);
137
+ }
149
138
 
150
- .ds-btn--accent {
151
- --dsc-btn-primary-background: var(--ds-color-accent-base-default);
152
- --dsc-btn-primary-color: var(--ds-color-accent-contrast-default);
153
- --dsc-btn-primary-hover-background: var(--ds-color-accent-base-hover);
154
- --dsc-btn-primary-active-background: var(--ds-color-accent-base-active);
155
- --dsc-btn-secondary-color: var(--ds-color-accent-text-subtle);
156
- --dsc-btn-secondary-hover-color: var(--ds-color-accent-text-default);
157
- --dsc-btn-secondary-active-color: var(--ds-color-accent-text-default);
158
- --dsc-btn-secondary-border-color: var(--ds-color-accent-border-strong);
159
- --dsc-btn-secondary-hover-background: var(--ds-color-accent-surface-default);
160
- --dsc-btn-secondary-active-background: var(--ds-color-accent-surface-hover);
161
- --dsc-btn-tertiary-color: var(--ds-color-accent-text-subtle);
162
- --dsc-btn-tertiary-hover-color: var(--ds-color-accent-text-default);
163
- --dsc-btn-tertiary-active-color: var(--ds-color-accent-text-default);
164
- --dsc-btn-tertiary-hover-background: var(--ds-color-accent-surface-default);
165
- --dsc-btn-tertiary-active-background: var(--ds-color-accent-surface-hover);
166
- }
139
+ /* Tertiary button colors */
140
+ .ds-btn--tertiary {
141
+ color: var(--dsc-btn-tertiary-color);
142
+ }
167
143
 
168
- .ds-btn--neutral {
169
- --dsc-btn-primary-background: var(--ds-color-neutral-base-default);
170
- --dsc-btn-primary-color: var(--ds-color-neutral-contrast-default);
171
- --dsc-btn-primary-hover-background: var(--ds-color-neutral-base-hover);
172
- --dsc-btn-primary-active-background: var(--ds-color-neutral-base-active);
173
- --dsc-btn-secondary-color: var(--ds-color-neutral-text-subtle);
174
- --dsc-btn-secondary-hover-color: var(--ds-color-neutral-text-default);
175
- --dsc-btn-secondary-active-color: var(--ds-color-neutral-text-default);
176
- --dsc-btn-secondary-border-color: var(--ds-color-neutral-border-strong);
177
- --dsc-btn-secondary-hover-background: var(--ds-color-neutral-surface-default);
178
- --dsc-btn-secondary-active-background: var(--ds-color-neutral-surface-hover);
179
- --dsc-btn-tertiary-color: var(--ds-color-neutral-text-subtle);
180
- --dsc-btn-tertiary-hover-color: var(--ds-color-neutral-text-default);
181
- --dsc-btn-tertiary-active-color: var(--ds-color-neutral-text-default);
182
- --dsc-btn-tertiary-hover-background: var(--ds-color-neutral-surface-default);
183
- --dsc-btn-tertiary-active-background: var(--ds-color-neutral-surface-hover);
184
- }
144
+ .ds-btn--tertiary:not([aria-disabled='true'], :disabled):active {
145
+ color: var(--dsc-btn-tertiary-active-color);
146
+ background-color: var(--dsc-btn-tertiary-active-background);
147
+ }
185
148
 
186
- .ds-btn--danger {
187
- --dsc-btn-primary-background: var(--ds-color-danger-base-default);
188
- --dsc-btn-primary-color: var(--ds-color-danger-contrast-default);
189
- --dsc-btn-primary-hover-background: var(--ds-color-danger-base-hover);
190
- --dsc-btn-primary-active-background: var(--ds-color-danger-base-active);
191
- --dsc-btn-secondary-color: var(--ds-color-danger-text-subtle);
192
- --dsc-btn-secondary-hover-color: var(--ds-color-danger-text-default);
193
- --dsc-btn-secondary-active-color: var(--ds-color-danger-text-default);
194
- --dsc-btn-secondary-border-color: var(--ds-color-danger-border-strong);
195
- --dsc-btn-secondary-hover-background: var(--ds-color-danger-surface-default);
196
- --dsc-btn-secondary-active-background: var(--ds-color-danger-surface-hover);
197
- --dsc-btn-tertiary-color: var(--ds-color-danger-text-subtle);
198
- --dsc-btn-tertiary-hover-color: var(--ds-color-danger-text-default);
199
- --dsc-btn-tertiary-active-color: var(--ds-color-danger-text-default);
200
- --dsc-btn-tertiary-hover-background: var(--ds-color-danger-surface-default);
201
- --dsc-btn-tertiary-active-background: var(--ds-color-danger-surface-hover);
202
- }
149
+ .ds-btn--accent {
150
+ --dsc-btn-primary-background: var(--ds-color-accent-base-default);
151
+ --dsc-btn-primary-color: var(--ds-color-accent-contrast-default);
152
+ --dsc-btn-primary-hover-background: var(--ds-color-accent-base-hover);
153
+ --dsc-btn-primary-active-background: var(--ds-color-accent-base-active);
154
+ --dsc-btn-secondary-color: var(--ds-color-accent-text-subtle);
155
+ --dsc-btn-secondary-hover-color: var(--ds-color-accent-text-default);
156
+ --dsc-btn-secondary-active-color: var(--ds-color-accent-text-default);
157
+ --dsc-btn-secondary-border-color: var(--ds-color-accent-border-strong);
158
+ --dsc-btn-secondary-hover-background: var(--ds-color-accent-surface-default);
159
+ --dsc-btn-secondary-active-background: var(--ds-color-accent-surface-hover);
160
+ --dsc-btn-tertiary-color: var(--ds-color-accent-text-subtle);
161
+ --dsc-btn-tertiary-hover-color: var(--ds-color-accent-text-default);
162
+ --dsc-btn-tertiary-active-color: var(--ds-color-accent-text-default);
163
+ --dsc-btn-tertiary-hover-background: var(--ds-color-accent-surface-default);
164
+ --dsc-btn-tertiary-active-background: var(--ds-color-accent-surface-hover);
165
+ }
166
+
167
+ .ds-btn--neutral {
168
+ --dsc-btn-primary-background: var(--ds-color-neutral-base-default);
169
+ --dsc-btn-primary-color: var(--ds-color-neutral-contrast-default);
170
+ --dsc-btn-primary-hover-background: var(--ds-color-neutral-base-hover);
171
+ --dsc-btn-primary-active-background: var(--ds-color-neutral-base-active);
172
+ --dsc-btn-secondary-color: var(--ds-color-neutral-text-subtle);
173
+ --dsc-btn-secondary-hover-color: var(--ds-color-neutral-text-default);
174
+ --dsc-btn-secondary-active-color: var(--ds-color-neutral-text-default);
175
+ --dsc-btn-secondary-border-color: var(--ds-color-neutral-border-strong);
176
+ --dsc-btn-secondary-hover-background: var(--ds-color-neutral-surface-default);
177
+ --dsc-btn-secondary-active-background: var(--ds-color-neutral-surface-hover);
178
+ --dsc-btn-tertiary-color: var(--ds-color-neutral-text-subtle);
179
+ --dsc-btn-tertiary-hover-color: var(--ds-color-neutral-text-default);
180
+ --dsc-btn-tertiary-active-color: var(--ds-color-neutral-text-default);
181
+ --dsc-btn-tertiary-hover-background: var(--ds-color-neutral-surface-default);
182
+ --dsc-btn-tertiary-active-background: var(--ds-color-neutral-surface-hover);
183
+ }
184
+
185
+ .ds-btn--danger {
186
+ --dsc-btn-primary-background: var(--ds-color-danger-base-default);
187
+ --dsc-btn-primary-color: var(--ds-color-danger-contrast-default);
188
+ --dsc-btn-primary-hover-background: var(--ds-color-danger-base-hover);
189
+ --dsc-btn-primary-active-background: var(--ds-color-danger-base-active);
190
+ --dsc-btn-secondary-color: var(--ds-color-danger-text-subtle);
191
+ --dsc-btn-secondary-hover-color: var(--ds-color-danger-text-default);
192
+ --dsc-btn-secondary-active-color: var(--ds-color-danger-text-default);
193
+ --dsc-btn-secondary-border-color: var(--ds-color-danger-border-strong);
194
+ --dsc-btn-secondary-hover-background: var(--ds-color-danger-surface-default);
195
+ --dsc-btn-secondary-active-background: var(--ds-color-danger-surface-hover);
196
+ --dsc-btn-tertiary-color: var(--ds-color-danger-text-subtle);
197
+ --dsc-btn-tertiary-hover-color: var(--ds-color-danger-text-default);
198
+ --dsc-btn-tertiary-active-color: var(--ds-color-danger-text-default);
199
+ --dsc-btn-tertiary-hover-background: var(--ds-color-danger-surface-default);
200
+ --dsc-btn-tertiary-active-background: var(--ds-color-danger-surface-hover);
203
201
  }