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