@digdir/designsystemet-css 0.10.0 → 0.11.0-alpha.2

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 +89 -81
  2. package/alert.css +48 -44
  3. package/box.css +37 -37
  4. package/button.css +133 -196
  5. package/card.css +129 -91
  6. package/checkbox.css +118 -86
  7. package/chip.css +93 -93
  8. package/combobox.css +138 -125
  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 +8 -8
  49. package/dropdownmenu.css +20 -19
  50. package/error-message.css +19 -19
  51. package/error-summary.css +12 -8
  52. package/fieldset.css +13 -13
  53. package/heading.css +27 -27
  54. package/helptext.css +22 -21
  55. package/index.css +5 -5
  56. package/ingress.css +18 -18
  57. package/label.css +17 -17
  58. package/link.css +46 -18
  59. package/list.css +10 -10
  60. package/modal.css +35 -33
  61. package/native-select.css +62 -45
  62. package/package.json +2 -2
  63. package/pagination.css +32 -32
  64. package/paragraph.css +37 -37
  65. package/popover.css +43 -40
  66. package/radio.css +88 -81
  67. package/search.css +66 -61
  68. package/skeleton.css +14 -14
  69. package/skiplink.css +32 -8
  70. package/spinner.css +15 -23
  71. package/switch.css +121 -91
  72. package/table.css +54 -50
  73. package/tabs.css +44 -46
  74. package/tag.css +42 -42
  75. package/textarea.css +34 -32
  76. package/textfield.css +64 -62
  77. package/togglegroup.css +11 -10
  78. package/tooltip.css +11 -18
  79. package/utils.css +11 -11
package/card.css CHANGED
@@ -1,157 +1,195 @@
1
- @layer fds.card {
2
- .fds-card__media {
1
+ @layer ds.card {
2
+ .ds-card {
3
+ --dsc-card-border-color: var(--ds-color-neutral-border-subtle);
4
+ --dsc-card-backround: var(--ds-color-neutral-surface-default);
5
+ --dsc-card-color: var(--ds-color-neutral-text-default);
6
+
7
+ display: flex;
8
+ flex-direction: column;
9
+ width: 100%;
10
+ box-sizing: border-box;
11
+ position: relative;
12
+ overflow: hidden;
13
+ color: var(--dsc-card-color);
14
+ border-radius: var(--ds-border-radius-md);
15
+ border: 1px solid var(--dsc-card-border-color);
16
+ background: var(--dsc-card-backround);
17
+ }
18
+
19
+ .ds-card a,
20
+ .ds-card a:visited {
21
+ color: var(--ds-color-neutral-text-default);
22
+ }
23
+
24
+ .ds-card > hr {
25
+ width: 100%;
26
+ margin: var(--ds-spacing-3) 0;
27
+ }
28
+
29
+ .ds-card__media {
3
30
  width: auto;
4
31
  }
5
32
 
6
- .fds-card__media > * {
33
+ .ds-card__media > * {
7
34
  display: flex;
8
35
  flex-direction: column;
9
36
  width: 100%;
10
37
  border: 0;
11
38
  }
12
39
 
13
- .fds-card__footer,
14
- .fds-card__content {
40
+ .ds-card > *:not(.ds-card__media, hr) {
41
+ padding-left: var(--ds-spacing-6);
42
+ padding-right: var(--ds-spacing-6);
43
+ }
44
+
45
+ .ds-card > *:not(.ds-card__media):first-child {
46
+ padding-top: var(--ds-spacing-6);
47
+ }
48
+
49
+ .ds-card > *:not(.ds-card__media):last-child {
50
+ padding-bottom: var(--ds-spacing-6);
51
+ }
52
+
53
+ .ds-card__media:first-child {
54
+ padding-bottom: var(--ds-spacing-4);
55
+ }
56
+
57
+ .ds-card__media:last-child {
58
+ padding-top: var(--ds-spacing-6);
59
+ }
60
+
61
+ .ds-card--link {
62
+ --dsc-card-border-color: var(--ds-color-neutral-border-default);
63
+
64
+ text-decoration: none;
65
+ }
66
+
67
+ .ds-card__footer,
68
+ .ds-card__content {
15
69
  display: flex;
16
70
  justify-content: flex-start;
17
- gap: var(--fds-spacing-4);
71
+ gap: var(--ds-spacing-4);
18
72
  flex-wrap: wrap;
19
73
  word-wrap: break-word;
20
- font: var(--fds-typography-paragraph-medium);
74
+ font: var(--ds-typography-paragraph-md);
21
75
  font-family: inherit;
22
- padding: var(--fds-spacing-2) 0;
76
+ padding: var(--ds-spacing-2) 0;
77
+ color: inherit;
23
78
  }
24
79
 
25
- .fds-card__content {
80
+ .ds-card__content {
26
81
  flex-direction: column;
27
82
  }
28
83
 
29
- .fds-card__header {
84
+ .ds-card__header {
30
85
  display: flex;
31
86
  flex-direction: column;
32
87
  flex-wrap: wrap;
33
88
  word-wrap: break-word;
34
- font: var(--fds-typography-heading-medium);
89
+ font: var(--ds-typography-heading-md);
35
90
  font-family: inherit;
36
- padding: var(--fds-spacing-2) 0;
91
+ padding: var(--ds-spacing-2) 0;
37
92
  }
38
93
 
39
- .fds-card {
40
- display: flex;
41
- flex-direction: column;
42
- width: 100%;
43
- box-sizing: border-box;
44
- position: relative;
45
- overflow: hidden;
46
- color: var(--fds-semantic-text-neutral-default);
47
- border-radius: var(--fds-border_radius-medium);
94
+ .ds-card__header h1,
95
+ .ds-card__header h2,
96
+ .ds-card__header h3,
97
+ .ds-card__header h4,
98
+ .ds-card__header h5,
99
+ .ds-card__header h6 {
100
+ color: inherit;
48
101
  }
49
102
 
50
- .fds-card a,
51
- .fds-card a:visited {
52
- color: var(--fds-semantic-text-neutral-default);
53
- }
54
-
55
- .fds-card > hr {
56
- width: 100%;
57
- margin: var(--fds-spacing-3) 0;
58
- }
59
-
60
- .fds-card > *:not(.fds-card__media, hr) {
61
- padding-left: var(--fds-spacing-6);
62
- padding-right: var(--fds-spacing-6);
63
- }
64
-
65
- .fds-card > *:not(.fds-card__media):first-child {
66
- padding-top: var(--fds-spacing-6);
103
+ .ds-card--link h1,
104
+ .ds-card--link h2,
105
+ .ds-card--link h3,
106
+ .ds-card--link h4,
107
+ .ds-card--link h5,
108
+ .ds-card--link h6 {
109
+ text-decoration: underline;
110
+ text-decoration-thickness: max(1px, 0.0625rem, 0.1025em);
111
+ text-underline-offset: max(6px, 0.25rem, 0.22em);
67
112
  }
68
113
 
69
- .fds-card > *:not(.fds-card__media):last-child {
70
- padding-bottom: var(--fds-spacing-6);
114
+ .ds-card--neutral {
115
+ --dsc-card-border-color: var(--ds-color-neutral-border-subtle);
116
+ --dsc-card-backround: var(--ds-color-neutral-background-default);
71
117
  }
72
118
 
73
- .fds-card__media:first-child {
74
- padding-bottom: var(--fds-spacing-4);
119
+ .ds-card--neutral.ds-card--link:hover {
120
+ --dsc-card-border-color: var(--ds-color-neutral-border-subtle);
121
+ --dsc-card-backround: var(--ds-color-neutral-background-subtle);
75
122
  }
76
123
 
77
- .fds-card__media:last-child {
78
- padding-top: var(--fds-spacing-6);
124
+ .ds-card--neutral.ds-card--link:active {
125
+ --dsc-card-backround: var(--ds-color-neutral-surface-default);
79
126
  }
80
127
 
81
- .fds-card--link {
82
- text-decoration: none;
128
+ .ds-card--subtle {
129
+ --dsc-card-border-color: var(--ds-color-neutral-border-subtle);
130
+ --dsc-card-backround: var(--ds-color-neutral-background-subtle);
83
131
  }
84
132
 
85
- .fds-card--link h1,
86
- .fds-card--link h2,
87
- .fds-card--link h3,
88
- .fds-card--link h4,
89
- .fds-card--link h5,
90
- .fds-card--link h6 {
91
- text-decoration: underline;
92
- text-decoration-thickness: max(1px, 0.0625rem, 0.1025em);
93
- text-underline-offset: max(4px, 0.25rem, 0.22em);
133
+ .ds-card--subtle.ds-card--link:hover {
134
+ --dsc-card-border-color: var(--ds-color-neutral-border-default);
135
+ --dsc-card-backround: var(--ds-color-neutral-surface-default);
94
136
  }
95
137
 
96
- .fds-card--neutral {
97
- background-color: var(--fds-semantic-surface-neutral-default);
98
- border: 1px solid var(--fds-semantic-border-neutral-subtle);
138
+ .ds-card--subtle.ds-card--link:active {
139
+ --dsc-card-backround: var(--ds-color-neutral-surface-hover);
99
140
  }
100
141
 
101
- .fds-card--subtle {
102
- background-color: var(--fds-semantic-surface-neutral-subtle);
103
- border: 1px solid var(--fds-semantic-border-neutral-subtle);
142
+ .ds-card--brand1 {
143
+ --dsc-card-border-color: var(--ds-color-brand1-border-subtle);
144
+ --dsc-card-backround: var(--ds-color-brand1-surface-default);
145
+ --dsc-card-color: var(--ds-color-brand1-text-default);
104
146
  }
105
147
 
106
- .fds-card--neutral.fds-card--link:hover,
107
- .fds-card--subtle.fds-card--link:hover {
108
- background-color: var(--fds-semantic-surface-neutral-subtle-hover);
148
+ .ds-card--brand1.ds-card--link {
149
+ --dsc-card-border-color: var(--ds-color-brand1-border-default);
109
150
  }
110
151
 
111
- /*
112
- --fds surface-neutral-subtle-active does not exist? Old style
113
- .fds-card--neutral.fds-card--link:active,
114
- .fds-card--subtle.fds-card--link:active {
115
- background-color: var(--fds-semantic-surface-neutral-subtle-active);
152
+ .ds-card--brand1.ds-card--link:hover {
153
+ --dsc-card-backround: var(--ds-color-brand1-surface-hover);
116
154
  }
117
- */
118
155
 
119
- .fds-card--first {
120
- background-color: var(--fds-semantic-surface-first-light);
121
- border: 1px solid var(--fds-semantic-border-neutral-subtle);
156
+ .ds-card--brand1.ds-card--link:active {
157
+ --dsc-card-backround: var(--ds-color-brand1-surface-active);
122
158
  }
123
159
 
124
- .fds-card--first.fds-card--link:hover {
125
- background-color: var(--fds-semantic-surface-first-light-hover);
160
+ .ds-card--brand2 {
161
+ --dsc-card-border-color: var(--ds-color-brand2-border-subtle);
162
+ --dsc-card-backround: var(--ds-color-brand2-surface-default);
163
+ --dsc-card-color: var(--ds-color-brand2-text-default);
126
164
  }
127
165
 
128
- .fds-card--first.fds-card--link:active {
129
- background-color: var(--fds-semantic-surface-first-light-active);
166
+ .ds-card--brand2.ds-card--link {
167
+ --dsc-card-border-color: var(--ds-color-brand2-border-default);
130
168
  }
131
169
 
132
- .fds-card--second {
133
- background-color: var(--fds-semantic-surface-second-light);
134
- border: 1px solid var(--fds-semantic-border-neutral-subtle);
170
+ .ds-card--brand2.ds-card--link:hover {
171
+ --dsc-card-backround: var(--ds-color-brand2-surface-hover);
135
172
  }
136
173
 
137
- .fds-card--second.fds-card--link:hover {
138
- background-color: var(--fds-semantic-surface-second-light-hover);
174
+ .ds-card--brand2.ds-card--link:active {
175
+ --dsc-card-backround: var(--ds-color-brand2-surface-active);
139
176
  }
140
177
 
141
- .fds-card--second.fds-card--link:active {
142
- background-color: var(--fds-semantic-surface-second-light-active);
178
+ .ds-card--brand3 {
179
+ --dsc-card-border-color: var(--ds-color-brand3-border-subtle);
180
+ --dsc-card-backround: var(--ds-color-brand3-surface-default);
181
+ --dsc-card-color: var(--ds-color-brand3-text-default);
143
182
  }
144
183
 
145
- .fds-card--third {
146
- background-color: var(--fds-semantic-surface-third-light);
147
- border: 1px solid var(--fds-semantic-border-neutral-subtle);
184
+ .ds-card--brand3.ds-card--link {
185
+ --dsc-card-border-color: var(--ds-color-brand3-border-default);
148
186
  }
149
187
 
150
- .fds-card--third.fds-card--link:hover {
151
- background-color: var(--fds-semantic-surface-third-light-hover);
188
+ .ds-card--brand3.ds-card--link:hover {
189
+ --dsc-card-backround: var(--ds-color-brand3-surface-hover);
152
190
  }
153
191
 
154
- .fds-card--third.fds-card--link:active {
155
- background-color: var(--fds-semantic-surface-third-light-active);
192
+ .ds-card--brand3.ds-card--link:active {
193
+ --dsc-card-backround: var(--ds-color-brand3-surface-active);
156
194
  }
157
195
  }
package/checkbox.css CHANGED
@@ -1,36 +1,38 @@
1
- @layer fds.checkbox {
2
- .fds-checkbox {
3
- --fds-checkbox-size: 1.75rem;
4
- --fds-checkbox-focus-border-width: 3px;
5
- --fds-checkbox-background: var(--fds-semantic-background-default);
6
- --fds-checkbox-border-color: var(--fds-semantic-border-input-default);
7
- --fds-checkbox-border__hover: 0 0 0 var(--fds-spacing-2) var(--fds-semantic-surface-info-subtle-hover);
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;
8
10
 
9
11
  display: grid;
10
12
  }
11
13
 
12
- .fds-checkbox:has(.fds-checkbox__label) {
13
- grid-template-columns: var(--fds-checkbox-size) auto;
14
- gap: var(--fds-spacing-2);
14
+ .ds-checkbox:has(.ds-checkbox__label) {
15
+ grid-template-columns: var(--dsc-checkbox-size) auto;
16
+ gap: var(--ds-spacing-2);
15
17
  }
16
18
 
17
19
  /* Checkbox */
18
- .fds-checkbox__input {
20
+ .ds-checkbox__input {
19
21
  position: relative;
20
- width: var(--fds-checkbox-size);
21
- height: var(--fds-checkbox-size);
22
+ width: var(--dsc-checkbox-size);
23
+ height: var(--dsc-checkbox-size);
22
24
  z-index: 1;
23
25
  appearance: none;
24
26
  margin: 0;
25
27
  align-self: center;
26
28
  outline: none;
27
29
  cursor: pointer;
28
- box-shadow: inset 0 0 0 2px var(--fds-checkbox-border-color);
29
- background: var(--fds-checkbox-background);
30
- border-radius: var(--fds-border_radius-medium);
30
+ box-shadow: inset 0 0 0 2px var(--dsc-checkbox-border-color);
31
+ background: var(--dsc-checkbox-background);
32
+ border-radius: var(--ds-border-radius-md);
31
33
  }
32
34
 
33
- .fds-checkbox__input::before {
35
+ .ds-checkbox__input::before {
34
36
  position: absolute;
35
37
  content: '';
36
38
  display: block;
@@ -40,136 +42,166 @@
40
42
  top: 50%;
41
43
  left: 50%;
42
44
  cursor: pointer;
43
- border-radius: var(--fds-border_radius-medium);
45
+ border-radius: var(--ds-border-radius-md);
44
46
  }
45
47
 
46
- .fds-checkbox__label {
47
- min-height: var(--fds-sizing-10);
48
+ .ds-checkbox__label {
49
+ /* min-height: var(--ds-sizing-10); */
48
50
  min-width: min-content;
49
51
  display: inline-flex;
50
52
  flex-direction: row;
51
- gap: var(--fds-spacing-1);
53
+ gap: var(--ds-spacing-1);
52
54
  align-items: center;
53
55
  cursor: pointer;
54
56
  }
55
57
 
56
- .fds-checkbox__description {
57
- margin-top: calc(var(--fds-spacing-3) * -1);
58
- color: var(--fds-semantic-text-neutral-subtle);
58
+ .ds-checkbox__description {
59
+ margin-top: calc(var(--ds-spacing-3) * -1);
60
+ color: var(--ds-color-neutral-text-subtle);
59
61
  grid-column: 2;
60
62
  }
61
63
 
62
- .fds-checkbox--readonly > .fds-checkbox__label,
63
- .fds-checkbox--readonly > .fds-checkbox__input,
64
- .fds-checkbox--readonly > .fds-checkbox__input::before {
64
+ .ds-checkbox--readonly > .ds-checkbox__label,
65
+ .ds-checkbox--readonly > .ds-checkbox__input,
66
+ .ds-checkbox--readonly > .ds-checkbox__input::before {
65
67
  cursor: default;
66
68
  }
67
69
 
68
- .fds-checkbox__input:disabled,
69
- .fds-checkbox__input:disabled ~ .fds-checkbox__label,
70
- .fds-checkbox__input:disabled::before {
70
+ .ds-checkbox__input:disabled,
71
+ .ds-checkbox__input:disabled ~ .ds-checkbox__label,
72
+ .ds-checkbox__input:disabled::before {
71
73
  cursor: not-allowed;
72
74
  }
73
75
 
74
- .fds-checkbox__input:focus-visible {
75
- outline-offset: 0;
76
- outline: var(--fds-checkbox-focus-border-width) solid var(--fds-semantic-border-focus-outline);
77
- box-shadow: inset 0 0 0 var(--fds-checkbox-focus-border-width) var(--fds-semantic-border-focus-boxshadow);
76
+ /* .ds-checkbox__input:focus-visible {
77
+ outline-offset: 3px;
78
+ outline: var(--dsc-checkbox-focus-border-width) solid var(--ds-focus-outer);
79
+ box-shadow:
80
+ 0 0 0 var(--dsc-checkbox-focus-border-width) var(--ds-focus-inner),
81
+ inset 0 0 0 2px var(--dsc-checkbox-border-color);
82
+ } */
83
+
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");
78
94
  }
79
95
 
80
- .fds-checkbox__input:checked {
81
- --fds-checkbox-border-color: var(--fds-semantic-border-input-hover);
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;
82
100
 
83
- background: var(--fds-checkbox-border-color);
84
- background-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");
101
+ background: var(--dsc-checkbox-background);
85
102
  }
86
103
 
87
- .fds-checkbox__input:indeterminate {
88
- --fds-checkbox-border-color: var(--fds-semantic-border-input-hover);
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
+ }
89
109
 
90
- background-color: var(--fds-checkbox-border-color);
91
- background-repeat: no-repeat;
92
- background-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");
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");
93
112
  }
94
113
 
95
- .fds-checkbox--readonly > .fds-checkbox__input {
96
- --fds-checkbox-border-color: var(--fds-semantic-border-neutral-subtle);
97
- --fds-checkbox-background: var(--fds-semantic-surface-neutral-subtle);
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);
98
117
  }
99
118
 
100
- .fds-checkbox__input:disabled,
101
- .fds-checkbox__input:disabled ~ .fds-checkbox__label,
102
- .fds-checkbox__input:disabled ~ .fds-checkbox__description {
103
- opacity: var(--fds-opacity-disabled);
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);
104
123
  }
105
124
 
106
- .fds-checkbox__input:checked:not(:focus-visible) {
107
- box-shadow: inset 0 0 0 2px var(--fds-checkbox-border-color);
125
+ /* .ds-checkbox__input:checked:not(:focus-visible) {
126
+ box-shadow: inset 0 0 0 2px var(--dsc-checkbox-border-color);
127
+ } */
128
+
129
+ .ds-checkbox:has(.ds-checkbox__input:focus-visible) {
130
+ --dsc-focus-border-width: 3px;
131
+
132
+ outline: var(--dsc-focus-border-width) solid var(--ds-focus-outer);
133
+ outline-offset: var(--dsc-focus-border-width);
134
+ box-shadow: 0 0 0 var(--dsc-focus-border-width) var(--ds-focus-inner);
135
+ border-radius: var(--ds-border-radius-md);
108
136
  }
109
137
 
110
- .fds-checkbox--readonly > .fds-checkbox__input:checked {
111
- background: var(--fds-checkbox-background);
112
- background-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='%2368707c'/%3E%3C/svg%3E%0A");
138
+ .ds-checkbox--readonly > .ds-checkbox__input:checked {
139
+ --dsc-checkbox-check_color: var(--ds-color-neutral-text-subtle);
140
+
141
+ background: var(--dsc-checkbox-background);
113
142
  }
114
143
 
115
- .fds-checkbox--readonly > .fds-checkbox__input:indeterminate {
116
- background: var(--fds-checkbox-background);
117
- background-repeat: no-repeat;
118
- background-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='%2368707c' /%3E%3C/svg%3E%0A");
144
+ .ds-checkbox--readonly > .ds-checkbox__input:indeterminate {
145
+ --dsc-checkbox-check_color: var(--ds-color-neutral-text-subtle);
146
+
147
+ background: var(--dsc-checkbox-background);
119
148
  }
120
149
 
121
- .fds-checkbox--error > .fds-checkbox__input:not(:disabled, :focus-visible) {
122
- --fds-checkbox-border-color: var(--fds-semantic-border-danger-default);
150
+ .ds-checkbox--error > .ds-checkbox__input:not(:disabled, :focus-visible) {
151
+ --dsc-checkbox-border-color: var(--ds-color-danger-border-default);
123
152
  }
124
153
 
125
154
  /* Only use hover for non-touch devices to prevent sticky-hovering
126
155
  "input:not(:read-only)" does not work so using ".container:not(.readonly) >" instead */
127
156
  @media (hover: hover) and (pointer: fine) {
128
- .fds-checkbox:not(.fds-checkbox--readonly) .fds-checkbox__input:not(:disabled) ~ .fds-checkbox__label:hover,
129
- .fds-checkbox:not(.fds-checkbox--readonly) .fds-checkbox__input:hover:not(:disabled) ~ .fds-checkbox__label {
130
- color: var(--fds-semantic-text-action-hover);
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);
131
160
  }
132
161
 
133
- .fds-checkbox:not(.fds-checkbox--readonly) .fds-checkbox__input:hover:not(:checked, :disabled) {
134
- --fds-checkbox-border-color: var(--fds-semantic-border-input-hover);
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);
135
164
 
136
165
  box-shadow:
137
- var(--fds-checkbox-border__hover),
138
- inset 0 0 0 2px var(--fds-checkbox-border-color);
166
+ var(--dsc-checkbox-border__hover),
167
+ inset 0 0 0 2px var(--dsc-checkbox-border-color);
139
168
  }
140
169
 
141
- .fds-checkbox:not(.fds-checkbox--readonly) .fds-checkbox__input:hover:checked:not(:disabled) {
142
- --fds-checkbox-border-color: var(--fds-semantic-border-input-hover);
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);
143
172
 
144
- box-shadow:
145
- var(--fds-checkbox-border__hover),
146
- inset 0 0 0 2px var(--fds-checkbox-border-color);
173
+ box-shadow: var(--dsc-checkbox-border__hover);
147
174
  }
148
175
 
149
- .fds-checkbox:not(.fds-checkbox--readonly) .fds-checkbox__input:hover:checked:focus-visible:not(:disabled) {
150
- box-shadow:
151
- var(--fds-checkbox-border__hover),
152
- inset 0 0 0 var(--fds-checkbox-focus-border-width) var(--fds-semantic-border-focus-boxshadow);
176
+ .ds-checkbox:not(.ds-checkbox--readonly) .ds-checkbox__input:hover:checked:not(:disabled, :focus-visible) {
177
+ box-shadow: var(--dsc-checkbox-border__hover);
153
178
  }
154
179
  }
155
180
 
156
181
  /** Sizing */
157
182
 
158
- .fds-checkbox--sm {
159
- --fds-checkbox-size: var(--fds-sizing-5);
183
+ .ds-checkbox--sm {
184
+ --dsc-checkbox-size: var(--ds-sizing-5);
160
185
 
161
- min-height: var(--fds-sizing-10);
186
+ /* min-height: var(--ds-sizing-10); */
162
187
  }
163
188
 
164
- .fds-checkbox--md {
165
- --fds-checkbox-size: var(--fds-sizing-6);
189
+ .ds-checkbox--md {
190
+ --dsc-checkbox-size: var(--ds-sizing-6);
166
191
 
167
- min-height: var(--fds-sizing-11);
192
+ /* min-height: var(--ds-sizing-11); */
168
193
  }
169
194
 
170
- .fds-checkbox--lg {
171
- --fds-checkbox-size: var(--fds-sizing-7);
195
+ .ds-checkbox--lg {
196
+ --dsc-checkbox-size: var(--ds-sizing-7);
197
+
198
+ /* min-height: var(--ds-sizing-12); */
199
+ }
172
200
 
173
- min-height: var(--fds-sizing-12);
201
+ .ds-checkbox__group {
202
+ display: flex;
203
+ flex-direction: column;
204
+ gap: var(--ds-spacing-5);
205
+ width: fit-content;
174
206
  }
175
207
  }