@navikt/ds-css 1.5.9 → 2.0.0-next.1

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 (44) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/accordion.css +11 -19
  3. package/alert.css +14 -28
  4. package/baseline/baseline.css +7 -9
  5. package/baseline/fonts.css +21 -0
  6. package/button.css +64 -105
  7. package/chat.css +16 -23
  8. package/chips.css +28 -28
  9. package/content-container.css +2 -2
  10. package/date.css +39 -40
  11. package/dist/index.css +913 -978
  12. package/form/confirmation-panel.css +9 -19
  13. package/form/error-summary.css +12 -18
  14. package/form/fieldset.css +2 -2
  15. package/form/form.css +2 -2
  16. package/form/radio-checkbox.css +43 -34
  17. package/form/search.css +30 -37
  18. package/form/select.css +10 -21
  19. package/form/switch.css +20 -35
  20. package/form/text-field.css +21 -35
  21. package/form/textarea.css +31 -30
  22. package/grid.css +2 -2
  23. package/guide-panel.css +14 -19
  24. package/help-text.css +7 -18
  25. package/link-panel.css +7 -14
  26. package/link.css +10 -23
  27. package/loader.css +16 -27
  28. package/modal.css +10 -17
  29. package/package.json +2 -2
  30. package/pagination.css +12 -18
  31. package/panel.css +4 -10
  32. package/popover.css +9 -15
  33. package/read-more.css +10 -10
  34. package/stepper.css +20 -20
  35. package/table.css +24 -33
  36. package/tabs.css +13 -13
  37. package/tag.css +43 -57
  38. package/toggle-group.css +17 -28
  39. package/tokens.json +303 -0
  40. package/tooltip.css +13 -13
  41. package/typography.css +54 -60
  42. package/baseline/Source-Sans-Pro-600.css +0 -7
  43. package/baseline/Source-Sans-Pro-italic.css +0 -7
  44. package/baseline/Source-Sans-Pro-regular.css +0 -7
package/pagination.css CHANGED
@@ -1,54 +1,48 @@
1
- :root,
2
- :host {
3
- --navds-pagination-color-background-selected: var(--navds-semantic-color-interaction-primary-selected);
4
- --navds-pagination-color-text-selected: var(--navds-semantic-color-text-inverted);
5
- }
6
-
7
1
  .navds-pagination__list {
8
2
  margin: 0;
9
3
  padding: 0;
10
4
  list-style: none;
11
5
  display: flex;
12
- gap: var(--navds-spacing-3);
6
+ gap: var(--a-spacing-3);
13
7
  }
14
8
 
15
9
  .navds-pagination__ellipsis {
16
10
  display: flex;
17
11
  align-items: center;
18
12
  justify-content: center;
19
- width: var(--navds-spacing-12);
13
+ width: var(--a-spacing-12);
20
14
  cursor: default;
21
15
  }
22
16
 
23
17
  .navds-pagination--small .navds-pagination__ellipsis {
24
- width: var(--navds-spacing-8);
18
+ width: var(--a-spacing-8);
25
19
  }
26
20
 
27
21
  .navds-pagination--xsmall .navds-pagination__ellipsis {
28
- width: var(--navds-spacing-6);
22
+ width: var(--a-spacing-6);
29
23
  }
30
24
 
31
25
  .navds-pagination__item {
32
- color: var(--navds-semantic-color-text);
26
+ color: var(--ac-pagination-text, var(--a-text-default));
33
27
  }
34
28
 
35
29
  .navds-pagination--medium .navds-pagination__item {
36
- border-radius: var(--navds-border-radius-medium);
30
+ border-radius: var(--a-border-radius-medium);
37
31
  }
38
32
 
39
33
  .navds-pagination__item[aria-current="true"] {
40
- background-color: var(--navds-pagination-color-background-selected);
41
- color: var(--navds-pagination-color-text-selected);
34
+ background-color: var(--ac-pagination-selected-bg, var(--a-surface-action-selected));
35
+ color: var(--ac-pagination-selected-text, var(--a-text-on-action));
42
36
  }
43
37
 
44
38
  .navds-pagination__item[aria-current="true"]:focus {
45
- box-shadow: inset 0 0 0 1px var(--navds-button-color-tertiary-border-active), var(--navds-shadow-focus);
39
+ box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
46
40
  }
47
41
 
48
42
  .navds-pagination__prev-next {
49
43
  display: flex;
50
44
  align-items: center;
51
- gap: var(--navds-spacing-1);
45
+ gap: var(--a-spacing-1);
52
46
  }
53
47
 
54
48
  .navds-pagination--small .navds-pagination__prev-next:where(.navds-pagination--prev-next--with-text) {
@@ -57,8 +51,8 @@
57
51
  }
58
52
 
59
53
  .navds-pagination--xsmall .navds-pagination__prev-next:where(.navds-pagination--prev-next--with-text) {
60
- padding-left: 0.125rem;
61
- padding-right: 0.125rem;
54
+ padding-left: var(--a-spacing-05);
55
+ padding-right: var(--a-spacing-05);
62
56
  }
63
57
 
64
58
  .navds-pagination--invisible {
package/panel.css CHANGED
@@ -1,16 +1,10 @@
1
- :root,
2
- :host {
3
- --navds-panel-color-background: var(--navds-semantic-color-component-background-light);
4
- --navds-panel-color-border: var(--navds-semantic-color-border-muted);
5
- }
6
-
7
1
  .navds-panel {
8
- background-color: var(--navds-panel-color-background);
9
- padding: var(--navds-spacing-4);
10
- border-radius: var(--navds-border-radius-small);
2
+ background-color: var(--ac-panel-bg, var(--a-surface-default));
3
+ padding: var(--a-spacing-4);
4
+ border-radius: var(--a-border-radius-small);
11
5
  border: 1px solid transparent;
12
6
  }
13
7
 
14
8
  .navds-panel--border {
15
- border-color: var(--navds-panel-color-border);
9
+ border-color: var(--ac-panel-border, var(--a-border-default));
16
10
  }
package/popover.css CHANGED
@@ -1,20 +1,14 @@
1
- :root,
2
- :host {
3
- --navds-popover-color-background: var(--navds-semantic-color-component-background-light);
4
- --navds-popover-color-border: var(--navds-semantic-color-border-muted);
5
- }
6
-
7
1
  .navds-popover {
8
- z-index: var(--navds-z-index-popover);
9
- background-color: var(--navds-popover-color-background);
10
- box-shadow: var(--navds-shadow-medium);
2
+ z-index: var(--a-z-index-popover);
3
+ background-color: var(--ac-popover-bg, var(--a-surface-default));
4
+ box-shadow: var(--a-shadow-medium);
11
5
  border: 1px solid;
12
- border-color: var(--navds-popover-color-border);
13
- border-radius: var(--navds-border-radius-medium);
6
+ border-color: var(--ac-popover-border, var(--a-border-default));
7
+ border-radius: var(--a-border-radius-medium);
14
8
  }
15
9
 
16
10
  .navds-popover__content {
17
- padding: var(--navds-spacing-4);
11
+ padding: var(--a-spacing-4);
18
12
  }
19
13
 
20
14
  .navds-popover--hidden {
@@ -23,16 +17,16 @@
23
17
 
24
18
  .navds-popover:focus {
25
19
  outline: none;
26
- box-shadow: var(--navds-shadow-focus);
20
+ box-shadow: var(--a-shadow-focus);
27
21
  }
28
22
 
29
23
  .navds-popover__arrow {
30
24
  position: absolute;
31
25
  z-index: -1;
32
26
  transform: rotate(45deg);
33
- background-color: var(--navds-popover-color-background);
27
+ background-color: var(--ac-popover-bg, var(--a-surface-default));
34
28
  border: 1px solid;
35
- border-color: var(--navds-popover-color-border);
29
+ border-color: var(--ac-popover-border, var(--a-border-default));
36
30
  width: 1rem;
37
31
  height: 1rem;
38
32
  }
package/read-more.css CHANGED
@@ -5,33 +5,33 @@
5
5
  background: none;
6
6
  display: flex;
7
7
  align-items: flex-start;
8
- gap: 0.125rem;
9
- color: var(--navds-semantic-color-link);
10
- border-radius: var(--navds-border-radius-small);
11
- padding: var(--navds-spacing-1) var(--navds-spacing-1) var(--navds-spacing-1) 2px;
8
+ gap: var(--a-spacing-05);
9
+ color: var(--ac-read-more-text, var(--a-text-action));
10
+ border-radius: var(--a-border-radius-small);
11
+ padding: var(--a-spacing-1) var(--a-spacing-1) var(--a-spacing-1) 2px;
12
12
  text-align: start;
13
13
  }
14
14
 
15
15
  .navds-read-more--small .navds-read-more__button {
16
- padding: 2px var(--navds-spacing-1) 2px 2px;
16
+ padding: 2px var(--a-spacing-1) 2px 2px;
17
17
  }
18
18
 
19
19
  .navds-read-more__button:hover {
20
- background-color: rgba(38 38 38 / 0.06);
20
+ background-color: var(--ac-read-more-hover-bg, var(--a-surface-hover));
21
21
  }
22
22
 
23
23
  .navds-read-more__button:active {
24
- background-color: rgba(38 38 38 / 0.1);
24
+ background-color: var(--ac-read-more-active-bg, var(--a-surface-active));
25
25
  }
26
26
 
27
27
  .navds-read-more__button:focus {
28
28
  outline: none;
29
- box-shadow: var(--navds-shadow-focus);
29
+ box-shadow: var(--a-shadow-focus);
30
30
  }
31
31
 
32
32
  .navds-read-more__content {
33
- margin-top: var(--navds-spacing-1);
34
- border-left: 2px solid rgba(38 38 38 / 0.36);
33
+ margin-top: var(--a-spacing-1);
34
+ border-left: 2px solid var(--ac-read-more-line, var(--a-border-divider));
35
35
  margin-left: 11px;
36
36
  padding-left: 11px;
37
37
  }
package/stepper.css CHANGED
@@ -3,7 +3,7 @@
3
3
  --navds-stepper-border-width: 2px;
4
4
  --navds-stepper-line-length: 1rem;
5
5
 
6
- color: var(--navds-semantic-color-interaction-primary);
6
+ color: var(--ac-stepper-text, var(--a-surface-action));
7
7
  font-weight: 600;
8
8
  line-height: 1;
9
9
  list-style: none;
@@ -28,7 +28,7 @@
28
28
  }
29
29
 
30
30
  .navds-stepper__line {
31
- background-color: var(--navds-semantic-color-border-muted);
31
+ background-color: var(--ac-stepper-line, var(--a-border-default));
32
32
  width: var(--navds-stepper-border-width);
33
33
  height: 100%;
34
34
  min-height: var(--navds-stepper-line-length);
@@ -37,7 +37,7 @@
37
37
  }
38
38
 
39
39
  .navds-stepper__step--behind.navds-stepper__step--completed + .navds-stepper__line {
40
- background-color: var(--navds-global-color-blue-500);
40
+ background-color: var(--ac-stepper-line-completed, var(--a-border-selected));
41
41
  }
42
42
 
43
43
  .navds-stepper__line--1 {
@@ -58,7 +58,7 @@
58
58
  grid-column: 1 / -1;
59
59
  display: grid;
60
60
  grid-template-columns: [circle] var(--navds-stepper-circle-size) [content] auto;
61
- gap: var(--navds-spacing-2);
61
+ gap: var(--a-spacing-2);
62
62
  justify-content: flex-start;
63
63
  text-decoration: none;
64
64
  cursor: pointer;
@@ -76,13 +76,13 @@ button.navds-stepper__step {
76
76
  }
77
77
 
78
78
  .navds-stepper__step--non-interactive {
79
- color: var(--navds-global-color-gray-600);
79
+ color: var(--ac-stepper-non-interactive, var(--a-text-subtle));
80
80
  cursor: default;
81
81
  }
82
82
 
83
83
  :where(.navds-stepper__step):focus {
84
84
  outline: none;
85
- box-shadow: var(--navds-shadow-focus);
85
+ box-shadow: var(--a-shadow-focus);
86
86
  isolation: isolate;
87
87
  }
88
88
 
@@ -94,7 +94,7 @@ button.navds-stepper__step {
94
94
  width: var(--navds-stepper-circle-size);
95
95
  height: var(--navds-stepper-circle-size);
96
96
  border: var(--navds-stepper-border-width) solid currentColor;
97
- border-radius: var(--navds-border-radius-full);
97
+ border-radius: var(--a-border-radius-full);
98
98
  line-height: 1;
99
99
  }
100
100
 
@@ -168,7 +168,7 @@ button.navds-stepper__step {
168
168
 
169
169
  /* Active step */
170
170
  :where(.navds-stepper__step--active) .navds-stepper__content {
171
- color: var(--navds-semantic-color-interaction-primary-selected);
171
+ color: var(--ac-stepper-active, var(--a-text-action-selected));
172
172
  }
173
173
 
174
174
  :where(.navds-stepper__step:hover) .navds-stepper__content {
@@ -180,28 +180,28 @@ button.navds-stepper__step {
180
180
  }
181
181
 
182
182
  :where(.navds-stepper__step--active) .navds-stepper__circle {
183
- background-color: var(--navds-semantic-color-interaction-primary-selected);
184
- border-color: var(--navds-semantic-color-interaction-primary-selected);
185
- color: var(--navds-semantic-color-text-inverted);
183
+ background-color: var(--ac-stepper-active-bg, var(--a-surface-action-selected));
184
+ border-color: var(--ac-stepper-active-border, var(--a-border-action-selected));
185
+ color: var(--ac-stepper-active-text, var(--a-text-on-action));
186
186
  }
187
187
 
188
188
  :where(.navds-stepper__step:not(.navds-stepper__step--active):hover) .navds-stepper__circle {
189
- background-color: var(--navds-semantic-color-interaction-primary-hover-subtle);
189
+ background-color: var(--ac-stepper-hover-bg, var(--a-surface-action-subtle-hover));
190
190
  }
191
191
 
192
192
  /* Non-interactive */
193
193
  :where(.navds-stepper__step--non-interactive.navds-stepper__step--active) .navds-stepper__content {
194
- color: var(--navds-global-color-gray-900);
194
+ color: var(--ac-stepper-non-interactive-active, var(--a-text-default));
195
195
  }
196
196
 
197
197
  .navds-stepper__step--non-interactive.navds-stepper__step--behind.navds-stepper__step--completed + .navds-stepper__line {
198
- background-color: var(--navds-global-color-gray-600);
198
+ background-color: var(--ac-stepper-non-interactive-line-completed, var(--a-border-strong));
199
199
  }
200
200
 
201
201
  :where(.navds-stepper__step--non-interactive.navds-stepper__step--active) .navds-stepper__circle {
202
- background-color: var(--navds-global-color-gray-900);
203
- border-color: var(--navds-global-color-gray-900);
204
- color: var(--navds-global-color-white);
202
+ background-color: var(--ac-stepper-non-interactive-active-bg, var(--a-surface-inverted));
203
+ border-color: var(--ac-stepper-non-interactive-active-border, var(--a-surface-inverted));
204
+ color: var(--ac-stepper-non-interactive-active-text, var(--a-text-on-inverted));
205
205
  }
206
206
 
207
207
  :where(.navds-stepper__step--non-interactive:hover) .navds-stepper__circle {
@@ -209,14 +209,14 @@ button.navds-stepper__step {
209
209
  }
210
210
 
211
211
  :where(.navds-stepper__step--non-interactive.navds-stepper__step--active:hover) .navds-stepper__circle {
212
- background-color: var(--navds-global-color-gray-900);
212
+ background-color: var(--ac-stepper-non-interactive-active-bg, var(--a-surface-inverted));
213
213
  }
214
214
 
215
215
  :where(.navds-stepper__step--completed.navds-stepper__step--active) .navds-stepper__circle {
216
216
  background-color: inherit;
217
- color: var(--navds-global-color-deepblue-500);
217
+ color: var(--ac-stepper-active-completed, var(--a-text-action-selected));
218
218
  }
219
219
 
220
220
  :where(.navds-stepper__step--completed.navds-stepper__step--active.navds-stepper__step--non-interactive) .navds-stepper__circle {
221
- color: var(--navds-global-color-gray-900);
221
+ color: var(--ac-stepper-non-interactive-active-completed, var(--a-text-default));
222
222
  }
package/table.css CHANGED
@@ -1,13 +1,3 @@
1
- :root,
2
- :host {
3
- --navds-table-cell-color-border: var(--navds-semantic-color-border-muted);
4
- --navds-table-row-color-background-hover: var(--navds-semantic-color-canvas-background);
5
- --navds-table-row-color-background-selected: var(--navds-semantic-color-interaction-primary-hover-subtle);
6
- --navds-table-row-color-background-selected-hover: var(--navds-global-color-blue-100);
7
- --navds-table-row-color-background-zebra: var(--navds-semantic-color-component-background-alternate);
8
- --navds-table-cell-color-border-hover: var(--navds-semantic-color-border);
9
- }
10
-
11
1
  .navds-table {
12
2
  width: 100%;
13
3
  border-collapse: collapse;
@@ -27,19 +17,19 @@
27
17
  }
28
18
 
29
19
  .navds-table__body .navds-table__row--shade-on-hover:hover {
30
- background-color: var(--navds-table-row-color-background-hover);
20
+ background-color: var(--ac-table-row-hover, var(--a-bg-subtle));
31
21
  }
32
22
 
33
23
  .navds-table__row--selected {
34
- background-color: var(--navds-table-row-color-background-selected);
24
+ background-color: var(--ac-table-row-selected, var(--a-surface-action-subtle));
35
25
  }
36
26
 
37
27
  .navds-table__body .navds-table__row--shade-on-hover.navds-table__row--selected:hover {
38
- background-color: var(--navds-table-row-color-background-selected-hover);
28
+ background-color: var(--ac-table-row-selected-hover, var(--a-surface-action-subtle-hover));
39
29
  }
40
30
 
41
31
  .navds-table--zebra-stripes .navds-table__body :where(.navds-table__row:nth-child(odd):not(.navds-table__row--selected)) {
42
- background-color: var(--navds-table-row-color-background-zebra);
32
+ background-color: var(--ac-table-row-zebra, var(--a-surface-subtle));
43
33
  }
44
34
 
45
35
  .navds-table--zebra-stripes
@@ -49,14 +39,14 @@
49
39
  }
50
40
 
51
41
  .navds-table--zebra-stripes .navds-table__body .navds-table__expanded-row:nth-child(4n) {
52
- background-color: var(--navds-table-row-color-background-zebra);
42
+ background-color: var(--ac-table-row-zebra, var(--a-surface-subtle));
53
43
  }
54
44
 
55
45
  .navds-table__header-cell,
56
46
  .navds-table__data-cell {
57
47
  display: table-cell;
58
- padding: var(--navds-spacing-4) var(--navds-spacing-3);
59
- border-bottom: 1px solid var(--navds-table-cell-color-border);
48
+ padding: var(--a-spacing-4) var(--a-spacing-3);
49
+ border-bottom: 1px solid var(--ac-table-row-border, var(--a-border-default));
60
50
  text-align: left;
61
51
  }
62
52
 
@@ -77,7 +67,7 @@
77
67
 
78
68
  :where(.navds-table__body .navds-table__row--shade-on-hover:hover) .navds-table__header-cell,
79
69
  :where(.navds-table__body .navds-table__row--shade-on-hover:hover) .navds-table__data-cell {
80
- border-color: var(--navds-table-cell-color-border-hover);
70
+ border-color: var(--ac-table-cell-hover-border, var(--a-border-strong));
81
71
  }
82
72
 
83
73
  :where(.navds-table__expandable-row--open:hover) .navds-table__data-cell {
@@ -86,7 +76,7 @@
86
76
 
87
77
  .navds-table--small .navds-table__header-cell,
88
78
  .navds-table--small .navds-table__data-cell {
89
- padding: var(--navds-spacing-2) var(--navds-spacing-3);
79
+ padding: var(--a-spacing-2) var(--a-spacing-3);
90
80
  }
91
81
 
92
82
  .navds-table .navds-checkbox .navds-checkbox__input {
@@ -108,35 +98,36 @@
108
98
  .navds-table__sort-button {
109
99
  appearance: none;
110
100
  background: none;
111
- color: var(--navds-semantic-color-link);
101
+ color: var(--ac-table-sort-button-text, var(--a-text-action));
112
102
  border: none;
113
103
  cursor: pointer;
114
104
  margin: 0;
115
- padding: var(--navds-spacing-4) var(--navds-spacing-3);
105
+ padding: var(--a-spacing-4) var(--a-spacing-3);
116
106
  width: 100%;
117
107
  display: flex;
118
- gap: 0.5rem;
108
+ gap: var(--a-spacing-2);
119
109
  align-items: center;
120
110
  line-height: inherit;
121
111
  font-weight: inherit;
122
112
  }
123
113
 
124
114
  .navds-table--small .navds-table__sort-button {
125
- padding: var(--navds-spacing-2) var(--navds-spacing-3);
115
+ padding: var(--a-spacing-2) var(--a-spacing-3);
126
116
  }
127
117
 
128
118
  .navds-table__sort-button:hover {
129
- background-color: var(--navds-semantic-color-canvas-background);
119
+ background-color: var(--ac-table-sort-button-hover-bg, var(--a-bg-subtle));
130
120
  }
131
121
 
132
122
  .navds-table__sort-button:focus {
133
123
  outline: none;
134
- box-shadow: inset 0 0 0 2px var(--navds-semantic-color-focus);
124
+ box-shadow: inset 0 0 0 2px var(--a-border-focus);
135
125
  }
136
126
 
137
127
  .navds-table__header-cell[aria-sort="ascending"] .navds-table__sort-button,
138
128
  .navds-table__header-cell[aria-sort="descending"] .navds-table__sort-button {
139
- background-color: var(--navds-global-color-blue-50);
129
+ background-color: var(--ac-table-sort-button-sorted-bg, var(--a-surface-selected));
130
+ color: var(--a-table-sort-button-sorted-text, var(--a-text-action-on-action-subtle));
140
131
  }
141
132
 
142
133
  .navds-table__header-cell--align-right .navds-table__sort-button {
@@ -161,7 +152,7 @@
161
152
  }
162
153
 
163
154
  .navds-table__expandable-row--open .navds-table__header-cell {
164
- border-color: var(--navds-semantic-color-border-muted);
155
+ border-color: var(--ac-table-row-border, var(--a-border-default));
165
156
  }
166
157
 
167
158
  .navds-table__expandable-row--open .navds-table__toggle-expand-cell--open {
@@ -183,15 +174,15 @@
183
174
  display: flex;
184
175
  align-items: center;
185
176
  cursor: pointer;
186
- padding: var(--navds-spacing-4);
177
+ padding: var(--a-spacing-4);
187
178
  }
188
179
 
189
180
  .navds-table--small .navds-table__toggle-expand-button {
190
- padding: var(--navds-spacing-2);
181
+ padding: var(--a-spacing-2);
191
182
  }
192
183
 
193
184
  .navds-table__toggle-expand-button:focus {
194
- box-shadow: inset var(--navds-shadow-focus);
185
+ box-shadow: inset var(--a-shadow-focus);
195
186
  }
196
187
 
197
188
  .navds-table__expandable-icon {
@@ -224,13 +215,13 @@
224
215
  }
225
216
 
226
217
  .navds-table__expanded-row-collapse:not([style*="height: 0px;"]) {
227
- border-bottom: 1px solid var(--navds-table-cell-color-border);
218
+ border-bottom: 1px solid var(--ac-table-row-border, var(--a-border-default));
228
219
  }
229
220
 
230
221
  .navds-table__expanded-row-content {
231
- padding: var(--navds-spacing-4) 4.25rem;
222
+ padding: var(--a-spacing-4) 4.25rem;
232
223
  }
233
224
 
234
225
  .navds-table--small .navds-table__expanded-row-content {
235
- padding: var(--navds-spacing-2) var(--navds-spacing-12);
226
+ padding: var(--a-spacing-2) var(--a-spacing-12);
236
227
  }
package/tabs.css CHANGED
@@ -1,5 +1,5 @@
1
1
  .navds-tabs__tablist-wrapper {
2
- box-shadow: inset 0 -1px 0 0 var(--navds-global-color-gray-300);
2
+ box-shadow: inset 0 -1px 0 0 var(--ac-tabs-border, var(--a-border-divider));
3
3
  width: 100%;
4
4
  display: flex;
5
5
  }
@@ -19,7 +19,7 @@
19
19
  }
20
20
 
21
21
  .navds-tabs__scroll-button {
22
- padding: var(--navds-spacing-3) var(--navds-spacing-4);
22
+ padding: var(--a-spacing-3) var(--a-spacing-4);
23
23
  width: 44px;
24
24
  display: flex;
25
25
  justify-content: center;
@@ -37,41 +37,41 @@
37
37
  }
38
38
 
39
39
  .navds-tabs--small .navds-tabs__scroll-button {
40
- padding: 0.375rem var(--navds-spacing-4);
40
+ padding: 0.375rem var(--a-spacing-4);
41
41
  width: 32px;
42
42
  }
43
43
 
44
44
  .navds-tabs__tab {
45
45
  min-height: 48px;
46
- padding: var(--navds-spacing-3) var(--navds-spacing-4);
46
+ padding: var(--a-spacing-3) var(--a-spacing-4);
47
47
  display: inline-flex;
48
48
  justify-content: center;
49
49
  align-items: center;
50
50
  background: none;
51
51
  border: none;
52
- color: var(--navds-semantic-color-text-muted);
52
+ color: var(--ac-tabs-text, var(--a-text-subtle));
53
53
  cursor: pointer;
54
54
  }
55
55
 
56
56
  .navds-tabs__tab:hover {
57
- box-shadow: inset 0 -3px 0 0 var(--navds-global-color-gray-300);
57
+ box-shadow: inset 0 -3px 0 0 var(--ac-tabs-hover-border, var(--a-border-subtle-hover));
58
58
  }
59
59
 
60
60
  .navds-tabs__tab[aria-selected="true"] {
61
- box-shadow: inset 0 -3px 0 0 var(--navds-semantic-color-interaction-primary);
62
- color: var(--navds-semantic-color-text);
61
+ box-shadow: inset 0 -3px 0 0 var(--ac-tabs-selected-border, var(--a-border-action));
62
+ color: var(--ac-tabs-selected-text, var(--a-text-default));
63
63
  }
64
64
 
65
65
  .navds-tabs__tab:focus {
66
66
  outline: none;
67
- box-shadow: inset var(--navds-shadow-focus);
68
- color: var(--navds-semantic-color-text);
67
+ box-shadow: inset var(--a-shadow-focus);
68
+ color: var(--ac-tabs-focus-text, var(--a-text-default));
69
69
  }
70
70
 
71
71
  .navds-tabs__tab-inner {
72
72
  display: flex;
73
73
  align-items: center;
74
- gap: var(--navds-spacing-1);
74
+ gap: var(--a-spacing-1);
75
75
  }
76
76
 
77
77
  .navds-tabs__tab-inner svg {
@@ -85,12 +85,12 @@
85
85
 
86
86
  .navds-tabs__tab--small {
87
87
  min-height: 32px;
88
- padding: 0.375rem var(--navds-spacing-4);
88
+ padding: 0.375rem var(--a-spacing-4);
89
89
  }
90
90
 
91
91
  .navds-tabs__tab-icon--top,
92
92
  .navds-tabs__tab--small.navds-tabs__tab-icon--top {
93
- padding: var(--navds-spacing-1) var(--navds-spacing-4);
93
+ padding: var(--a-spacing-1) var(--a-spacing-4);
94
94
  }
95
95
 
96
96
  .navds-tabs__tab svg,