@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/accordion.css CHANGED
@@ -1,132 +1,140 @@
1
- @layer fds.accordion {
2
- .fds-accordion {
3
- --fds-accordion-border-radius: var(--fds-border_radius-interactive);
4
- --fds-accordion-border-color: var(--fds-semantic-border-neutral-subtle);
5
-
6
- border-bottom: 1px solid var(--fds-semantic-border-neutral-subtle);
1
+ @layer ds.accordion {
2
+ .ds-accordion {
3
+ --dsc-accordion-border-radius: var(--ds-border-radius-md);
4
+ --dsc-accordion-border-color: var(--ds-color-neutral-border-subtle);
5
+ --dsc-accordion-background: var(--ds-color-neutral-background-default);
6
+ --dsc-accordion-button-background: var(--ds-color-neutral-background-default);
7
+ --dsc-accordion-button-background-open: var(--ds-color-neutral-background-subtle);
8
+ --dsc-accordion-icon-background-hover: var(--ds-color-neutral-surface-default);
9
+ --dsc-accordion-icon-background-active: var(--ds-color-neutral-surface-default);
10
+
11
+ border-bottom: 1px solid var(--dsc-accordion-border-color);
7
12
  box-sizing: border-box;
13
+ background-color: var(--dsc-accordion-background);
8
14
  }
9
15
 
10
- .fds-accordion--border {
11
- border: 1px solid var(--fds-accordion-border-color);
12
- border-radius: var(--fds-accordion-border-radius);
16
+ .ds-accordion--border {
17
+ border: 1px solid var(--dsc-accordion-border-color);
18
+ border-radius: var(--dsc-accordion-border-radius);
13
19
  }
14
20
 
15
- .fds-accordion__expand-icon {
16
- border-radius: var(--fds-border_radius-interactive);
21
+ .ds-accordion__expand-icon {
22
+ border-radius: var(--ds-border-radius-md);
23
+ color: var(--ds-color-neutral-text-default);
17
24
  }
18
25
 
19
- .fds-accordion__content {
20
- padding: var(--fds-spacing-5, 1rem);
26
+ .ds-accordion__content {
27
+ padding: var(--ds-spacing-5, 1rem);
21
28
  overflow: hidden;
22
29
  text-overflow: ellipsis;
23
30
  }
24
31
 
25
- .fds-accordion__header {
32
+ .ds-accordion__header {
26
33
  margin: 0;
34
+ width: 100%;
35
+ display: flex;
36
+ justify-content: flex-start;
37
+ align-items: center;
38
+ gap: var(--ds-spacing-2);
39
+ text-align: left;
40
+ border: none;
41
+ border-top: 1px solid var(--dsc-accordion-border-color);
42
+ background-color: var(--dsc-accordion-button-background);
27
43
  }
28
44
 
29
- .fds-accordion__button {
45
+ .ds-accordion__button {
46
+ cursor: pointer;
30
47
  width: 100%;
31
48
  display: flex;
32
49
  justify-content: flex-start;
33
50
  align-items: center;
34
- gap: var(--fds-spacing-2);
51
+ gap: var(--ds-spacing-2);
35
52
  margin: 0;
36
- text-align: left;
37
- cursor: pointer;
53
+ padding: var(--ds-spacing-4);
54
+ background-color: transparent;
38
55
  border: none;
39
- border-top: 1px solid var(--fds-semantic-border-neutral-subtle);
40
- padding: var(--fds-spacing-4);
41
56
  }
42
57
 
43
- .fds-accordion--border .fds-accordion__button {
44
- border-radius: var(--fds-accordion-border-radius);
58
+ .ds-accordion__item--open .ds-accordion__header {
59
+ background-color: var(--dsc-accordion-button-background-open);
45
60
  }
46
61
 
47
-
48
- .fds-accordion__item:focus-within {
62
+ .ds-accordion__item:focus-within {
49
63
  position: relative;
50
64
  }
51
65
 
52
- .fds-accordion__item:where(.fds-accordion__item--open) .fds-accordion__expand-icon {
66
+ .ds-accordion__item:where(.ds-accordion__item--open) .ds-accordion__expand-icon {
53
67
  transform: rotateZ(180deg);
54
68
  }
55
69
 
56
- .fds-accordion--neutral,
57
- .fds-accordion--neutral .fds-accordion__button {
58
- background-color: var(--fds-semantic-surface-neutral-default);
70
+ .ds-accordion__item:not(:first-child) .ds-accordion__header {
71
+ border-top: 1px solid var(--dsc-accordion-border-color);
59
72
  }
60
73
 
61
- .fds-accordion--subtle,
62
- .fds-accordion--subtle .fds-accordion__button {
63
- background-color: var(--fds-semantic-surface-neutral-subtle);
74
+ .ds-accordion--border .ds-accordion__item:first-child .ds-accordion__header {
75
+ border-top: 0;
64
76
  }
65
77
 
66
- .fds-accordion--first,
67
- .fds-accordion--first .fds-accordion__button {
68
- --fds-accordion-border-color: var(--fds-semantic-border-first-default);
69
-
70
- background: var(--fds-semantic-surface-first-light);
78
+ .ds-accordion--border .ds-accordion__item:first-of-type .ds-accordion__header:first-of-type {
79
+ border-top-left-radius: var(--dsc-accordion-border-radius);
80
+ border-top-right-radius: var(--dsc-accordion-border-radius);
71
81
  }
72
82
 
73
-
74
- .fds-accordion--second,
75
- .fds-accordion--second .fds-accordion__button {
76
- --fds-accordion-border-color: var(--fds-semantic-border-second-default);
77
-
78
- background: var(--fds-semantic-surface-second-light);
83
+ .ds-accordion--border .ds-accordion__item:last-of-type:not(.ds-accordion__item--open) .ds-accordion__header:first-of-type {
84
+ border-bottom-left-radius: var(--dsc-accordion-border-radius);
85
+ border-bottom-right-radius: var(--dsc-accordion-border-radius);
79
86
  }
80
87
 
88
+ @media (hover: hover) and (pointer: fine) {
89
+ .ds-accordion__header:hover .ds-accordion__expand-icon {
90
+ background-color: var(--dsc-accordion-icon-background-hover);
91
+ }
81
92
 
82
- .fds-accordion--third,
83
- .fds-accordion--third .fds-accordion__button {
84
- --fds-accordion-border-color: var(--fds-semantic-border-third-default);
85
-
86
- background: var(--fds-semantic-surface-third-light);
93
+ .ds-accordion__item--open .ds-accordion__header:hover .ds-accordion__expand-icon {
94
+ background-color: var(--dsc-accordion-icon-background-active);
95
+ }
87
96
  }
88
97
 
89
- .fds-accordion--first .fds-accordion__item:where(.fds-accordion__item--open) .fds-accordion__button,
90
- .fds-accordion--second .fds-accordion__item:where(.fds-accordion__item--open) .fds-accordion__button,
91
- .fds-accordion--third .fds-accordion__item:where(.fds-accordion__item--open) .fds-accordion__button {
92
- background-color: rgba(0 0 0 / 0.03);
98
+ .ds-accordion--neutral {
99
+ --dsc-accordion-background: var(--ds-color-neutral-background-default);
100
+ --dsc-accordion-button-background: var(--ds-color-neutral-background-default);
101
+ --dsc-accordion-button-background-open: var(--ds-color-neutral-background-subtle);
102
+ --dsc-accordion-icon-background-hover: var(--ds-color-neutral-surface-default);
93
103
  }
94
104
 
95
- .fds-accordion--neutral .fds-accordion__item:where(.fds-accordion__item--open) .fds-accordion__button,
96
- .fds-accordion--subtle .fds-accordion__item:where(.fds-accordion__item--open) .fds-accordion__button {
97
- background-color: var(--fds-semantic-surface-action-first-no_fill-hover);
105
+ .ds-accordion--subtle {
106
+ --dsc-accordion-background: var(--ds-color-neutral-background-subtle);
107
+ --dsc-accordion-border-color: var(--ds-color-neutral-border-default);
108
+ --dsc-accordion-button-background: var(--ds-color-neutral-background-subtle);
109
+ --dsc-accordion-button-background-open: var(--ds-color-neutral-surface-default);
110
+ --dsc-accordion-icon-background-hover: var(--ds-color-neutral-surface-default);
111
+ --dsc-accordion-icon-background-active: var(--ds-color-neutral-surface-active);
98
112
  }
99
113
 
100
- .fds-accordion--border .fds-accordion__item:first-child .fds-accordion__button {
101
- border-top: 0;
114
+ .ds-accordion--brand1 {
115
+ --dsc-accordion-background: var(--ds-color-brand1-background-subtle);
116
+ --dsc-accordion-border-color: var(--ds-color-brand1-border-subtle);
117
+ --dsc-accordion-button-background: var(--ds-color-brand1-surface-default);
118
+ --dsc-accordion-button-background-open: var(--ds-color-brand1-surface-hover);
119
+ --dsc-accordion-icon-background-hover: var(--ds-color-brand1-surface-active);
120
+ --dsc-accordion-icon-background-active: var(--ds-color-brand1-surface-active);
102
121
  }
103
122
 
104
- .fds-accordion--first .fds-accordion__item:not(:first-child) .fds-accordion__button,
105
- .fds-accordion--second .fds-accordion__item:not(:first-child) .fds-accordion__button,
106
- .fds-accordion--third .fds-accordion__item:not(:first-child) .fds-accordion__button {
107
- border-top: 1px solid var(--fds-semantic-surface-neutral-default);
123
+ .ds-accordion--brand2 {
124
+ --dsc-accordion-background: var(--ds-color-brand2-background-subtle);
125
+ --dsc-accordion-border-color: var(--ds-color-brand2-border-subtle);
126
+ --dsc-accordion-button-background: var(--ds-color-brand2-surface-default);
127
+ --dsc-accordion-button-background-open: var(--ds-color-brand2-surface-hover);
128
+ --dsc-accordion-icon-background-hover: var(--ds-color-brand2-surface-active);
129
+ --dsc-accordion-icon-background-active: var(--ds-color-brand2-surface-active);
108
130
  }
109
131
 
110
- @media (hover: hover) and (pointer: fine) {
111
- .fds-accordion__button:hover .fds-accordion__expand-icon {
112
- background-color: rgba(0 0 0 / 0.1);
113
- }
114
-
115
- .fds-accordion--neutral .fds-accordion__button:hover,
116
- .fds-accordion--subtle .fds-accordion__button:hover {
117
- background-color: var(--fds-semantic-surface-neutral-subtle-hover);
118
- }
119
-
120
- .fds-accordion--first .fds-accordion__button:hover {
121
- background-color: var(--fds-semantic-surface-first-light-hover);
122
- }
123
-
124
- .fds-accordion--second .fds-accordion__button:hover {
125
- background-color: var(--fds-semantic-surface-second-light-hover);
126
- }
127
-
128
- .fds-accordion--third .fds-accordion__button:hover {
129
- background-color: var(--fds-semantic-surface-third-light-hover);
130
- }
132
+ .ds-accordion--brand3 {
133
+ --dsc-accordion-background: var(--ds-color-brand3-background-subtle);
134
+ --dsc-accordion-border-color: var(--ds-color-brand3-border-subtle);
135
+ --dsc-accordion-button-background: var(--ds-color-brand3-surface-default);
136
+ --dsc-accordion-button-background-open: var(--ds-color-brand3-surface-hover);
137
+ --dsc-accordion-icon-background-hover: var(--ds-color-brand3-surface-active);
138
+ --dsc-accordion-icon-background-active: var(--ds-color-brand3-surface-active);
131
139
  }
132
140
  }
package/alert.css CHANGED
@@ -1,72 +1,76 @@
1
- @layer fds.alert {
2
- .fds-alert {
3
- --fds-alert-border-color: var(--fds-semantic-border-info-default);
4
- --fds-alert-border-radius: var(--fds-border_radius-medium);
5
- --fds-alert-color: var(--fds-semantic-text-neutral-default);
6
- --fds-alert-icon-color: var(--fds-alert-border-color);
7
- --fds-alert-icon-size: var(--fds-sizing-7);
8
- --fds-alert-background: var(--fds-semantic-surface-info-subtle);
9
- --fds-alert-padding: var(--fds-spacing-6);
1
+ @layer ds.alert {
2
+ .ds-alert {
3
+ --dsc-alert-border-color: var(--ds-color-info-border-strong);
4
+ --dsc-alert-border-radius: var(--ds-border-radius-md);
5
+ --dsc-alert-color: var(--ds-color-neutral-text-default);
6
+ --dsc-alert-icon-color: var(--dsc-alert-border-color);
7
+ --dsc-alert-icon-size: var(--ds-sizing-7);
8
+ --dsc-alert-background: var(--ds-color-info-surface-default);
9
+ --dsc-alert-padding: var(--ds-spacing-6);
10
10
 
11
- border: 1px solid var(--fds-alert-border-color);
12
- border-radius: var(--fds-alert-border-radius);
13
- background: var(--fds-alert-background);
14
- color: var(--fds-alert-color);
15
- padding: var(--fds-alert-padding);
11
+ border: 1px solid var(--dsc-alert-border-color);
12
+ border-radius: var(--dsc-alert-border-radius);
13
+ background: var(--dsc-alert-background);
14
+ color: var(--dsc-alert-color);
15
+ padding: var(--dsc-alert-padding);
16
16
  display: grid;
17
17
  grid-auto-flow: column;
18
18
  grid-auto-columns: min-content auto;
19
- gap: var(--fds-spacing-2);
20
- font: var(--fds-typography-paragraph-medium);
19
+ gap: var(--ds-spacing-2);
20
+ font: var(--ds-typography-paragraph-md);
21
21
  }
22
22
 
23
- .fds-alert__icon {
24
- height: var(--fds-alert-icon-size);
25
- width: var(--fds-alert-icon-size);
26
- color: var(--fds-alert-icon-color);
23
+ .ds-alert__icon {
24
+ height: var(--dsc-alert-icon-size);
25
+ width: var(--dsc-alert-icon-size);
26
+ color: var(--dsc-alert-icon-color);
27
27
  }
28
28
 
29
- .fds-alert__content {
29
+ .ds-alert__content {
30
30
  display: flex;
31
31
  flex-direction: column;
32
32
  }
33
33
 
34
- .fds-alert--info {
35
- --fds-alert-border-color: var(--fds-semantic-border-info-default);
36
- --fds-alert-background: var(--fds-semantic-surface-info-subtle);
34
+ .ds-alert--info {
35
+ --dsc-alert-border-color: var(--ds-color-info-border-strong);
36
+ --dsc-alert-icon-color: var(--ds-color-info-base-default);
37
+ --dsc-alert-background: var(--ds-color-info-surface-default);
37
38
  }
38
39
 
39
- .fds-alert--warning {
40
- --fds-alert-border-color: var(--fds-semantic-border-warning-default);
41
- --fds-alert-background: var(--fds-semantic-surface-warning-subtle);
40
+ .ds-alert--warning {
41
+ --dsc-alert-border-color: var(--ds-color-warning-border-default);
42
+ --dsc-alert-icon-color: var(--ds-color-warning-base-default);
43
+ --dsc-alert-background: var(--ds-color-warning-surface-default);
42
44
  }
43
45
 
44
- .fds-alert--success {
45
- --fds-alert-border-color: var(--fds-semantic-border-success-default);
46
- --fds-alert-background: var(--fds-semantic-surface-success-subtle);
46
+ .ds-alert--success {
47
+ --dsc-alert-border-color: var(--ds-color-success-border-default);
48
+ --dsc-alert-icon-color: var(--ds-color-success-base-default);
49
+ --dsc-alert-background: var(--ds-color-success-surface-default);
47
50
  }
48
51
 
49
- .fds-alert--danger {
50
- --fds-alert-border-color: var(--fds-semantic-border-danger-default);
51
- --fds-alert-background: var(--fds-semantic-surface-danger-subtle);
52
+ .ds-alert--danger {
53
+ --dsc-alert-border-color: var(--ds-color-danger-border-default);
54
+ --dsc-alert-icon-color: var(--ds-color-danger-base-default);
55
+ --dsc-alert-background: var(--ds-color-danger-surface-default);
52
56
  }
53
57
 
54
- .fds-alert--sm {
55
- --fds-alert-padding: var(--fds-spacing-5);
56
- --fds-alert-icon-size: var(--fds-sizing-6);
58
+ .ds-alert--sm {
59
+ --dsc-alert-padding: var(--ds-spacing-5);
60
+ --dsc-alert-icon-size: var(--ds-sizing-6);
57
61
  }
58
62
 
59
- .fds-alert--md {
60
- --fds-alert-padding: var(--fds-spacing-6);
61
- --fds-alert-icon-size: var(--fds-sizing-7);
63
+ .ds-alert--md {
64
+ --dsc-alert-padding: var(--ds-spacing-6);
65
+ --dsc-alert-icon-size: var(--ds-sizing-7);
62
66
  }
63
67
 
64
- .fds-alert--lg {
65
- --fds-alert-padding: var(--fds-spacing-7);
66
- --fds-alert-icon-size: var(--fds-sizing-8);
68
+ .ds-alert--lg {
69
+ --dsc-alert-padding: var(--ds-spacing-7);
70
+ --dsc-alert-icon-size: var(--ds-sizing-8);
67
71
  }
68
72
 
69
- .fds-alert--elevated {
70
- box-shadow: var(--fds-shadow-small);
73
+ .ds-alert--elevated {
74
+ box-shadow: var(--ds-shadow-sm);
71
75
  }
72
76
  }
package/box.css CHANGED
@@ -1,73 +1,73 @@
1
- @layer fds.box {
2
- .fds-box--xs-shadow {
3
- box-shadow: var(--fds-shadow-xsmall);
1
+ @layer ds.box {
2
+ .ds-box--xs-shadow {
3
+ box-shadow: var(--ds-shadow-xs);
4
4
  }
5
5
 
6
- .fds-box--sm-shadow {
7
- box-shadow: var(--fds-shadow-small);
6
+ .ds-box--sm-shadow {
7
+ box-shadow: var(--ds-shadow-sm);
8
8
  }
9
9
 
10
- .fds-box--md-shadow {
11
- box-shadow: var(--fds-shadow-medium);
10
+ .ds-box--md-shadow {
11
+ box-shadow: var(--ds-shadow-md);
12
12
  }
13
13
 
14
- .fds-box--lg-shadow {
15
- box-shadow: var(--fds-shadow-large);
14
+ .ds-box--lg-shadow {
15
+ box-shadow: var(--ds-shadow-lg);
16
16
  }
17
17
 
18
- .fds-box--xl-shadow {
19
- box-shadow: var(--fds-shadow-xlarge);
18
+ .ds-box--xl-shadow {
19
+ box-shadow: var(--ds-shadow-xl);
20
20
  }
21
21
 
22
- .fds-box--default-border-color {
23
- border: 1px solid var(--fds-semantic-border-neutral-default);
22
+ .ds-box--default-border-color {
23
+ border: 1px solid var(--ds-color-neutral-border-default);
24
24
  }
25
25
 
26
- .fds-box--subtle-border-color {
27
- border: 1px solid var(--fds-semantic-border-neutral-subtle);
26
+ .ds-box--subtle-border-color {
27
+ border: 1px solid var(--ds-color-neutral-border-subtle);
28
28
  }
29
29
 
30
- .fds-box--strong-border-color {
31
- border: 1px solid var(--fds-semantic-border-neutral-strong);
30
+ .ds-box--strong-border-color {
31
+ border: 1px solid var(--ds-color-neutral-base-strong);
32
32
  }
33
33
 
34
- .fds-box--sm-border-radius {
35
- border-radius: var(--fds-border_radius-small);
34
+ .ds-box--sm-border-radius {
35
+ border-radius: var(--ds-border-radius-sm);
36
36
  }
37
37
 
38
- .fds-box--md-border-radius {
39
- border-radius: var(--fds-border_radius-medium);
38
+ .ds-box--md-border-radius {
39
+ border-radius: var(--ds-border-radius-md);
40
40
  }
41
41
 
42
- .fds-box--lg-border-radius {
43
- border-radius: var(--fds-border_radius-large);
42
+ .ds-box--lg-border-radius {
43
+ border-radius: var(--ds-border-radius-lg);
44
44
  }
45
45
 
46
- .fds-box--xl-border-radius {
47
- border-radius: var(--fds-border_radius-xlarge);
46
+ .ds-box--xl-border-radius {
47
+ border-radius: var(--ds-border-radius-xl);
48
48
  }
49
49
 
50
- .fds-box--2xl-border-radius {
51
- border-radius: var(--fds-border_radius-xxlarge);
50
+ .ds-box--2xl-border-radius {
51
+ border-radius: var(--ds-border-radius-2xl);
52
52
  }
53
53
 
54
- .fds-box--3xl-border-radius {
55
- border-radius: var(--fds-border_radius-xxxlarge);
54
+ .ds-box--3xl-border-radius {
55
+ border-radius: var(--ds-border-radius-3xl);
56
56
  }
57
57
 
58
- .fds-box--4xl-border-radius {
59
- border-radius: var(--fds-border_radius-xxxxlarge);
58
+ .ds-box--4xl-border-radius {
59
+ border-radius: var(--ds-border-radius-4xl);
60
60
  }
61
61
 
62
- .fds-box--full-border-radius {
63
- border-radius: var(--fds-border_radius-full);
62
+ .ds-box--full-border-radius {
63
+ border-radius: var(--ds-border-radius-full);
64
64
  }
65
65
 
66
- .fds-box--default-background {
67
- background-color: var(--fds-semantic-background-default);
66
+ .ds-box--default-background {
67
+ background-color: var(--ds-color-neutral-background-default);
68
68
  }
69
69
 
70
- .fds-box--subtle-background {
71
- background-color: var(--fds-semantic-background-subtle);
70
+ .ds-box--subtle-background {
71
+ background-color: var(--ds-color-neutral-background-subtle);
72
72
  }
73
73
  }