@digdir/designsystemet-css 0.11.0-alpha.8 → 0.11.0-next.10

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 (70) 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 +39 -39
  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 -3
  54. package/pagination.css +53 -55
  55. package/popover.css +71 -69
  56. package/radio.css +151 -142
  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
  70. package/LICENSE +0 -7
package/table.css CHANGED
@@ -1,136 +1,142 @@
1
- @layer ds.table {
2
- .ds-table {
3
- --dsc-table-padding: 0;
4
- --dsc-table-border-radius: min(1rem, var(--ds-border-radius-md));
5
-
6
- position: relative;
7
- border-collapse: separate;
8
- border-spacing: 0;
9
- text-align: left;
10
- color: var(--ds-color-neutral-text-default);
11
- }
1
+ .ds-table {
2
+ --dsc-table-padding: 0;
3
+ --dsc-table-border-radius: min(1rem, var(--ds-border-radius-md));
4
+ --dsc-table-border-color: var(--ds-color-neutral-border-subtle);
5
+ --dsc-table-color: var(--ds-color-neutral-text-default);
6
+ --dsc-table-header-cell-background: var(--ds-color-neutral-background-default);
7
+ --dsc-table-header-sorted-background: var(--ds-color-neutral-background-subtle);
8
+ --dsc-table-header-sorted-hover: var(--ds-color-neutral-surface-default);
9
+ --dsc-table-cell-backround: var(--ds-color-neutral-background-default);
10
+ --dsc-table-cell-zebra-background: var(--ds-color-neutral-background-subtle);
11
+ --dsc-table-cell-hover-backround: var(--ds-color-neutral-surface-default);
12
+
13
+ position: relative;
14
+ border-collapse: separate;
15
+ border-spacing: 0;
16
+ text-align: left;
17
+ color: var(--dsc-table-color);
18
+ }
12
19
 
13
- .ds-table--sticky-header {
14
- overflow: auto;
15
- }
20
+ .ds-table--sticky-header {
21
+ overflow: auto;
22
+ }
16
23
 
17
- .ds-table--border .ds-table__row:last-of-type td {
18
- border-bottom: 0;
19
- }
24
+ .ds-table--border .ds-table__row:last-of-type td {
25
+ border-bottom: 0;
26
+ }
20
27
 
21
- .ds-table--sm {
22
- --dsc-table-padding: var(--ds-spacing-1) var(--ds-spacing-3);
23
- }
28
+ .ds-table--sm {
29
+ --dsc-table-padding: var(--ds-spacing-1) var(--ds-spacing-3);
30
+ }
24
31
 
25
- .ds-table--md {
26
- --dsc-table-padding: var(--ds-spacing-2) var(--ds-spacing-3);
27
- }
32
+ .ds-table--md {
33
+ --dsc-table-padding: var(--ds-spacing-2) var(--ds-spacing-3);
34
+ }
28
35
 
29
- .ds-table--lg {
30
- --dsc-table-padding: var(--ds-spacing-3) var(--ds-spacing-3);
31
- }
36
+ .ds-table--lg {
37
+ --dsc-table-padding: var(--ds-spacing-3) var(--ds-spacing-3);
38
+ }
32
39
 
33
- .ds-table__head {
34
- z-index: 0;
35
- box-sizing: border-box;
36
- font-family: inherit;
37
- border-spacing: 0;
38
- border-bottom: 2px solid var(--ds-color-neutral-border-subtle);
39
- }
40
+ .ds-table__head {
41
+ z-index: 0;
42
+ box-sizing: border-box;
43
+ font-family: inherit;
44
+ border-spacing: 0;
45
+ border-bottom: 2px solid var(--dsc-table-border-color);
46
+ }
40
47
 
41
- .ds-table__header__cell {
42
- padding: var(--dsc-table-padding);
43
- font-family: inherit;
44
- background-color: var(--ds-color-neutral-background-default);
45
- border-spacing: 0;
46
- border-bottom: 2px solid var(--ds-color-neutral-border-subtle);
47
- }
48
+ .ds-table__header__cell {
49
+ padding: var(--dsc-table-padding);
50
+ font-family: inherit;
51
+ background-color: var(--dsc-table-header-cell-background);
52
+ border-spacing: 0;
53
+ border-bottom: 2px solid var(--dsc-table-border-color);
54
+ }
48
55
 
49
- .ds-table--sticky-header .ds-table__head .ds-table__header__cell {
50
- position: sticky;
51
- top: 0;
52
- z-index: 1;
53
- }
56
+ .ds-table--sticky-header .ds-table__head .ds-table__header__cell {
57
+ position: sticky;
58
+ top: 0;
59
+ z-index: 1;
60
+ }
54
61
 
55
- .ds-table__header__cell--sortable {
56
- padding: 0;
57
- }
62
+ .ds-table__header__cell--sortable {
63
+ padding: 0;
64
+ }
58
65
 
59
- .ds-table__header__cell--sortable button {
60
- position: relative;
61
- width: 100%;
62
- border: none;
63
- font-family: inherit;
64
- display: flex;
65
- cursor: pointer;
66
- gap: var(--ds-spacing-1);
67
- align-items: center;
68
- padding: var(--dsc-table-padding);
69
- background-color: transparent;
70
- color: var(--ds-color-neutral-text-default);
71
- z-index: 2;
72
- }
66
+ .ds-table__header__cell--sortable button {
67
+ position: relative;
68
+ width: 100%;
69
+ border: none;
70
+ font-family: inherit;
71
+ display: flex;
72
+ cursor: pointer;
73
+ gap: var(--ds-spacing-1);
74
+ align-items: center;
75
+ padding: var(--dsc-table-padding);
76
+ background-color: transparent;
77
+ color: var(--dsc-table-color);
78
+ z-index: 2;
79
+ }
73
80
 
74
- .ds-table__header__cell--sorted button {
75
- background-color: var(--ds-color-neutral-background-subtle);
76
- }
81
+ .ds-table__header__cell--sorted button {
82
+ background-color: var(--dsc-table-header-sorted-background);
83
+ }
77
84
 
78
- .ds-table__header__cell--sortable button:focus-visible {
79
- z-index: 3;
80
- outline-offset: -3px;
81
- box-shadow: unset;
82
- }
85
+ .ds-table__header__cell--sortable button:focus-visible {
86
+ z-index: 3;
87
+ outline-offset: -3px;
88
+ box-shadow: unset;
89
+ }
83
90
 
84
- .ds-table__header__cell--sortable button svg {
85
- font-size: 1.2em;
86
- }
91
+ .ds-table__header__cell--sortable button svg {
92
+ font-size: 1.2em;
93
+ }
87
94
 
88
- .ds-table__cell {
89
- padding: var(--dsc-table-padding);
90
- border-bottom: 1px solid var(--ds-color-neutral-border-subtle);
91
- background-color: var(--ds-color-neutral-background-default);
92
- }
95
+ .ds-table__cell {
96
+ padding: var(--dsc-table-padding);
97
+ border-bottom: 1px solid var(--dsc-table-border-color);
98
+ background-color: var(--dsc-table-cell-backround);
99
+ }
93
100
 
94
- .ds-table--zebra .ds-table__row {
95
- border-bottom: 0;
96
- }
101
+ .ds-table--zebra .ds-table__row {
102
+ border-bottom: 0;
103
+ }
97
104
 
98
- .ds-table--zebra tr:nth-child(even):not(:hover) .ds-table__cell {
99
- background-color: var(--ds-color-neutral-background-subtle);
100
- }
105
+ .ds-table--zebra tr:nth-child(even):not(:hover) .ds-table__cell {
106
+ background-color: var(--dsc-table-cell-zebra-background);
107
+ }
101
108
 
102
- .ds-table--border {
103
- border-radius: var(--dsc-table-border-radius);
104
- border: 1px solid var(--ds-color-neutral-border-subtle);
105
- }
109
+ .ds-table--border {
110
+ border-radius: var(--dsc-table-border-radius);
111
+ border: 1px solid var(--dsc-table-border-color);
112
+ }
106
113
 
107
- .ds-table--border .ds-table__head .ds-table__header__cell:first-of-type {
108
- border-top-left-radius: var(--dsc-table-border-radius);
109
- overflow: hidden;
110
- }
114
+ .ds-table--border .ds-table__head .ds-table__header__cell:first-of-type {
115
+ border-top-left-radius: var(--dsc-table-border-radius);
116
+ overflow: hidden;
117
+ }
111
118
 
112
- .ds-table--border .ds-table__head .ds-table__header__cell:last-of-type {
113
- border-top-right-radius: var(--dsc-table-border-radius);
114
- overflow: hidden;
115
- }
119
+ .ds-table--border .ds-table__head .ds-table__header__cell:last-of-type {
120
+ border-top-right-radius: var(--dsc-table-border-radius);
121
+ overflow: hidden;
122
+ }
116
123
 
117
- .ds-table--border .ds-table__row:last-of-type .ds-table__cell:first-of-type {
118
- border-bottom-left-radius: var(--dsc-table-border-radius);
119
- overflow: hidden;
120
- }
124
+ .ds-table--border .ds-table__row:last-of-type .ds-table__cell:first-of-type {
125
+ border-bottom-left-radius: var(--dsc-table-border-radius);
126
+ overflow: hidden;
127
+ }
121
128
 
122
- .ds-table--border .ds-table__row:last-of-type .ds-table__cell:last-of-type {
123
- border-bottom-right-radius: var(--dsc-table-border-radius);
124
- overflow: hidden;
125
- }
129
+ .ds-table--border .ds-table__row:last-of-type .ds-table__cell:last-of-type {
130
+ border-bottom-right-radius: var(--dsc-table-border-radius);
131
+ overflow: hidden;
132
+ }
126
133
 
127
- @media (hover: hover) and (pointer: fine) {
128
- .ds-table__row:hover .ds-table__cell {
129
- background-color: var(--ds-color-neutral-surface-default);
130
- }
134
+ @media (hover: hover) and (pointer: fine) {
135
+ .ds-table__row:hover .ds-table__cell {
136
+ background-color: var(--dsc-table-cell-hover-backround);
137
+ }
131
138
 
132
- .ds-table__header__cell--sortable button:hover {
133
- background-color: var(--ds-color-neutral-surface-default);
134
- }
139
+ .ds-table__header__cell--sortable button:hover {
140
+ background-color: var(--dsc-table-header-sorted-hover);
135
141
  }
136
142
  }
package/tabs.css CHANGED
@@ -1,87 +1,81 @@
1
- @layer ds.tabs {
2
- .ds-tabs__tab {
3
- --dsc-tabs__tab-bottom-border-color: transparent;
4
-
5
- display: flex;
6
- flex-direction: row;
7
- box-sizing: border-box;
8
- gap: var(--ds-spacing-1);
9
- justify-content: center;
10
- text-align: center;
11
- align-items: center;
12
- padding: var(--ds-spacing-2) var(--ds-spacing-3);
13
- border: none;
14
- border-radius: 0;
15
- background-color: transparent;
16
- cursor: pointer;
17
- color: var(--ds-color-neutral-text-subtle);
18
- position: relative;
19
- font-family: inherit;
20
- }
21
-
22
- .ds-tabs__content {
23
- padding: var(--ds-spacing-5);
24
- color: var(--ds-color-neutral-text-default);
25
- }
26
-
27
- .ds-tabs--sm .ds-tabs__tab {
28
- padding: var(--ds-spacing-2) var(--ds-spacing-4);
29
- }
30
-
31
- .ds-tabs--md .ds-tabs__tab {
32
- padding: var(--ds-spacing-3) var(--ds-spacing-5);
33
- }
1
+ .ds-tabs {
2
+ --dsc-tabs__tab-bottom-border-color: transparent;
3
+ --dsc-tabs-tab-padding: var(--ds-spacing-3) var(--ds-spacing-5);
4
+ --dsc-tabs-tab-color: var(--ds-color-neutral-text-subtle);
5
+ --dsc-tabs-content-padding: var(--ds-spacing-5);
6
+ --dsc-tabs-content-color: var(--ds-color-neutral-text-default);
7
+ --dsc-tabs-list-border-color: var(--ds-color-neutral-border-subtle);
8
+ }
34
9
 
35
- .ds-tabs--lg .ds-tabs__tab {
36
- padding: var(--ds-spacing-4) var(--ds-spacing-6);
37
- }
10
+ .ds-tabs__tab {
11
+ display: flex;
12
+ flex-direction: row;
13
+ box-sizing: border-box;
14
+ gap: var(--ds-spacing-1);
15
+ justify-content: center;
16
+ text-align: center;
17
+ align-items: center;
18
+ padding: var(--dsc-tabs-tab-padding);
19
+ border: none;
20
+ border-radius: 0;
21
+ background-color: transparent;
22
+ cursor: pointer;
23
+ color: var(--dsc-tabs-tab-color);
24
+ position: relative;
25
+ font-family: inherit;
26
+ }
38
27
 
39
- .ds-tabs--sm .ds-tabs__content {
40
- padding: var(--ds-spacing-4);
41
- }
28
+ .ds-tabs__content {
29
+ padding: var(--dsc-tabs-content-padding);
30
+ color: var(--dsc-tabs-content-color);
31
+ }
42
32
 
43
- .ds-tabs--md .ds-tabs__content {
44
- padding: var(--ds-spacing-5);
45
- }
33
+ .ds-tabs--sm {
34
+ --dsc-tabs-tab-padding: var(--ds-spacing-2) var(--ds-spacing-4);
35
+ --dsc-tabs-content-padding: var(--ds-spacing-4);
36
+ }
46
37
 
47
- .ds-tabs--lg .ds-tabs__content {
48
- padding: var(--ds-spacing-6);
49
- }
38
+ .ds-tabs--md {
39
+ --dsc-tabs-tab-padding: var(--ds-spacing-3) var(--ds-spacing-5);
40
+ --dsc-tabs-content-padding: var(--ds-spacing-5);
41
+ }
50
42
 
51
- @media (hover: hover) and (pointer: fine) {
52
- .ds-tabs__tab:hover:not([aria-selected='true']) {
53
- --dsc-tabs__tab-bottom-border-color: var(--ds-color-neutral-border-subtle);
43
+ .ds-tabs--lg {
44
+ --dsc-tabs-tab-padding: var(--ds-spacing-4) var(--ds-spacing-6);
45
+ --dsc-tabs-content-padding: var(--ds-spacing-6);
46
+ }
54
47
 
55
- color: var(--ds-color-neutral-text-default);
56
- }
48
+ @media (hover: hover) and (pointer: fine) {
49
+ .ds-tabs__tab:hover:not([aria-selected='true']) {
50
+ --dsc-tabs__tab-bottom-border-color: var(--ds-color-neutral-border-subtle);
51
+ --dsc-tabs-tab-color: var(--ds-color-neutral-text-default);
57
52
  }
53
+ }
58
54
 
59
- .ds-tabs__tab[aria-selected='true'] {
60
- --dsc-tabs__tab-bottom-border-color: var(--ds-color-accent-base-default);
61
-
62
- color: var(--ds-color-accent-text-subtle);
63
- }
55
+ .ds-tabs__tab[aria-selected='true'] {
56
+ --dsc-tabs__tab-bottom-border-color: var(--ds-color-accent-base-default);
57
+ --dsc-tabs-tab-color: var(--ds-color-accent-text-subtle);
58
+ }
64
59
 
65
- .ds-tabs__tab:focus {
66
- z-index: 2;
67
- }
60
+ .ds-tabs__tab:focus {
61
+ z-index: 2;
62
+ }
68
63
 
69
- .ds-tabs__tab::after {
70
- content: '';
71
- display: block;
72
- height: 3px;
73
- width: 100%;
74
- border-radius: var(--ds-border-radius-full);
75
- background-color: var(--dsc-tabs__tab-bottom-border-color);
76
- position: absolute;
77
- bottom: 0;
78
- left: 0;
79
- }
64
+ .ds-tabs__tab::after {
65
+ content: '';
66
+ display: block;
67
+ height: 3px;
68
+ width: 100%;
69
+ border-radius: var(--dsc-border-radius-full);
70
+ background-color: var(--dsc-tabs__tab-bottom-border-color);
71
+ position: absolute;
72
+ bottom: 0;
73
+ left: 0;
74
+ }
80
75
 
81
- .ds-tabs__tablist {
82
- display: flex;
83
- flex-direction: row;
84
- border-bottom: var(--ds-border-width-default) solid var(--ds-color-neutral-border-subtle);
85
- position: relative;
86
- }
76
+ .ds-tabs__tablist {
77
+ display: flex;
78
+ flex-direction: row;
79
+ border-bottom: var(--ds-border-width-default) solid var(--dsc-tabs-list-border-color);
80
+ position: relative;
87
81
  }
package/tag.css CHANGED
@@ -1,72 +1,70 @@
1
- @layer ds.tag {
2
- .ds-tag {
3
- --dsc-tag-background: var(--ds-color-neutral-background-subtle);
4
- --dsc-tag-color: var(--ds-color-neutral-text-default);
1
+ .ds-tag {
2
+ --dsc-tag-background: var(--ds-color-neutral-background-subtle);
3
+ --dsc-tag-color: var(--ds-color-neutral-text-default);
5
4
 
6
- color: var(--dsc-tag-color);
7
- padding: 0 var(--ds-spacing-2);
8
- min-height: var(--ds-sizing-8);
9
- background-color: var(--dsc-tag-background);
10
- border-radius: min(1rem, var(--ds-border-radius-sm));
11
- display: flex;
12
- align-items: center;
13
- box-sizing: border-box;
14
- word-break: break-word;
15
- width: max-content;
16
- }
5
+ color: var(--dsc-tag-color);
6
+ padding: 0 var(--ds-spacing-2);
7
+ min-height: var(--ds-sizing-8);
8
+ background-color: var(--dsc-tag-background);
9
+ border-radius: min(1rem, var(--ds-border-radius-sm));
10
+ display: flex;
11
+ align-items: center;
12
+ box-sizing: border-box;
13
+ word-break: break-word;
14
+ width: max-content;
15
+ }
17
16
 
18
- .ds-tag--sm {
19
- padding: 0 var(--ds-spacing-2);
20
- min-height: var(--ds-sizing-7);
21
- }
17
+ .ds-tag--sm {
18
+ padding: 0 var(--ds-spacing-2);
19
+ min-height: var(--ds-sizing-7);
20
+ }
22
21
 
23
- .ds-tag--md {
24
- padding: 0 var(--ds-spacing-2);
25
- min-height: var(--ds-sizing-8);
26
- }
22
+ .ds-tag--md {
23
+ padding: 0 var(--ds-spacing-2);
24
+ min-height: var(--ds-sizing-8);
25
+ }
27
26
 
28
- .ds-tag--lg {
29
- padding: 0 var(--ds-spacing-3);
30
- min-height: var(--ds-sizing-9);
31
- }
27
+ .ds-tag--lg {
28
+ padding: 0 var(--ds-spacing-3);
29
+ min-height: var(--ds-sizing-9);
30
+ }
32
31
 
33
- .ds-tag--neutral {
34
- --dsc-tag-background: var(--ds-color-neutral-surface-default);
35
- --dsc-tag-color: var(--ds-color-neutral-text-default);
36
- }
32
+ .ds-tag--neutral {
33
+ --dsc-tag-background: var(--ds-color-neutral-surface-default);
34
+ --dsc-tag-color: var(--ds-color-neutral-text-default);
35
+ }
37
36
 
38
- .ds-tag--info {
39
- --dsc-tag-background: var(--ds-color-info-surface-default);
40
- --dsc-tag-color: var(--ds-color-info-text-default);
41
- }
37
+ .ds-tag--info {
38
+ --dsc-tag-background: var(--ds-color-info-surface-default);
39
+ --dsc-tag-color: var(--ds-color-info-text-default);
40
+ }
42
41
 
43
- .ds-tag--success {
44
- --dsc-tag-background: var(--ds-color-success-surface-default);
45
- --dsc-tag-color: var(--ds-color-success-text-default);
46
- }
42
+ .ds-tag--success {
43
+ --dsc-tag-background: var(--ds-color-success-surface-default);
44
+ --dsc-tag-color: var(--ds-color-success-text-default);
45
+ }
47
46
 
48
- .ds-tag--warning {
49
- --dsc-tag-background: var(--ds-color-warning-surface-default);
50
- --dsc-tag-color: var(--ds-color-warning-text-default);
51
- }
47
+ .ds-tag--warning {
48
+ --dsc-tag-background: var(--ds-color-warning-surface-default);
49
+ --dsc-tag-color: var(--ds-color-warning-text-default);
50
+ }
52
51
 
53
- .ds-tag--danger {
54
- --dsc-tag-background: var(--ds-color-danger-surface-default);
55
- --dsc-tag-color: var(--ds-color-danger-text-default);
56
- }
52
+ .ds-tag--danger {
53
+ --dsc-tag-background: var(--ds-color-danger-surface-default);
54
+ --dsc-tag-color: var(--ds-color-danger-text-default);
55
+ }
57
56
 
58
- .ds-tag--brand1 {
59
- --dsc-tag-background: var(--ds-color-brand1-surface-default);
60
- --dsc-tag-color: var(--ds-color-brand1-text-default);
61
- }
57
+ .ds-tag--brand1 {
58
+ --dsc-tag-background: var(--ds-color-brand1-surface-default);
59
+ --dsc-tag-color: var(--ds-color-brand1-text-default);
60
+ }
62
61
 
63
- .ds-tag--brand2 {
64
- --dsc-tag-background: var(--ds-color-brand2-surface-default);
65
- --dsc-tag-color: var(--ds-color-brand2-text-default);
66
- }
62
+ .ds-tag--brand2 {
63
+ --dsc-tag-background: var(--ds-color-brand2-surface-default);
64
+ --dsc-tag-color: var(--ds-color-brand2-text-default);
65
+ }
67
66
 
68
- .ds-tag--brand3 {
69
- --dsc-tag-background: var(--ds-color-brand3-surface-default);
70
- --dsc-tag-color: var(--ds-color-brand3-text-default);
71
- }
67
+ .ds-tag--brand3 {
68
+ --dsc-tag-background: var(--ds-color-brand3-surface-default);
69
+ --dsc-tag-color: var(--ds-color-brand3-text-default);
72
70
  }