@navikt/ds-css 7.4.2 → 7.5.0

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 (20) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/darkside/accordion.darkside.css +122 -138
  3. package/darkside/action-menu.darkside.css +116 -137
  4. package/darkside/alert.darkside.css +66 -64
  5. package/darkside/baseline/theme.darkside.css +12 -9
  6. package/darkside/chat.darkside.css +49 -54
  7. package/darkside/chips.darkside.css +90 -148
  8. package/darkside/copybutton.darkside.css +103 -146
  9. package/dist/component/index.css +2 -1
  10. package/dist/component/index.min.css +2 -2
  11. package/dist/component/table.css +1 -0
  12. package/dist/component/table.min.css +1 -1
  13. package/dist/components.css +2 -1
  14. package/dist/components.min.css +2 -2
  15. package/dist/global/tokens.css +1 -1
  16. package/dist/global/tokens.min.css +1 -1
  17. package/dist/index.css +2 -1
  18. package/dist/index.min.css +2 -2
  19. package/package.json +2 -2
  20. package/table.css +1 -0
package/darkside/alert.darkside.css CHANGED
@@ -1,101 +1,89 @@
1
1
  .navds-alert {
2
- border-radius: var(--a-border-radius-medium);
2
+ border-radius: var(--ax-border-radius-xlarge);
3
3
  border: 1px solid;
4
- padding: var(--a-spacing-4);
4
+ padding: var(--ax-spacing-4);
5
5
  display: flex;
6
- gap: var(--a-spacing-3);
6
+ gap: var(--ax-spacing-3);
7
7
  align-items: center;
8
- }
9
8
 
10
- .navds-alert--small.navds-alert--close-button {
11
- align-items: flex-start;
9
+ @media (forced-colors: active) {
10
+ border: 1px solid canvastext;
11
+ background-color: canvas;
12
+ color: canvastext;
13
+ }
12
14
  }
13
15
 
14
16
  .navds-alert__wrapper--maxwidth {
15
17
  max-width: 43.5rem;
16
18
  }
17
19
 
18
- .navds-alert--close-button > .navds-alert__wrapper {
19
- margin-block-start: var(--a-spacing-05);
20
- }
21
-
22
- .navds-alert--small.navds-alert--close-button > .navds-alert__wrapper {
23
- margin-block-start: var(--a-spacing-1);
24
- }
25
-
26
- .navds-alert--small {
27
- padding: var(--a-spacing-2) var(--a-spacing-4);
28
- gap: var(--a-spacing-2);
29
- }
30
-
31
- .navds-alert--full-width {
32
- border-radius: 0;
33
- }
34
-
35
- .navds-alert > .navds-alert__icon {
20
+ .navds-alert__icon {
36
21
  flex-shrink: 0;
37
22
  font-size: 1.5rem;
38
23
  align-self: flex-start;
39
- height: var(--a-font-line-height-xlarge);
40
- background: radial-gradient(circle, var(--a-surface-default) 47%, 0, transparent);
24
+ height: var(--ax-font-line-height-xlarge);
41
25
  }
42
26
 
43
- .navds-alert--small > .navds-alert__icon {
44
- margin-block-start: 0;
45
- height: var(--a-font-line-height-large);
46
- }
27
+ .navds-alert--small {
28
+ padding: var(--ax-spacing-2) var(--ax-spacing-4);
29
+ gap: var(--ax-spacing-2);
47
30
 
48
- .navds-alert--close-button > .navds-alert__icon {
49
- margin-block-start: var(--a-spacing-05);
31
+ > .navds-alert__icon {
32
+ margin-block-start: 0;
33
+ height: var(--ax-font-line-height-large);
34
+ }
50
35
  }
51
36
 
52
- .navds-alert--small.navds-alert--close-button > .navds-alert__icon {
53
- margin-block-start: var(--a-spacing-1);
54
- }
37
+ /* ----------------------------- Alert variants ----------------------------- */
38
+ .navds-alert--info {
39
+ border-color: var(--ax-border-info);
40
+ background-color: var(--ax-bg-info-moderate);
55
41
 
56
- .navds-alert--error {
57
- border-color: var(--ac-alert-error-border, var(--a-border-danger));
58
- background-color: var(--ac-alert-error-bg, var(--a-surface-danger-subtle));
42
+ > .navds-alert__icon {
43
+ color: var(--ax-text-info-icon);
44
+ }
59
45
  }
60
46
 
61
- .navds-alert--error > .navds-alert__icon {
62
- color: var(--ac-alert-icon-error-color, var(--a-icon-danger));
63
- }
47
+ .navds-alert--success {
48
+ border-color: var(--ax-border-success);
49
+ background-color: var(--ax-bg-success-moderate);
64
50
 
65
- .navds-alert--warning {
66
- border-color: var(--ac-alert-warning-border, var(--a-border-warning));
67
- background-color: var(--ac-alert-warning-bg, var(--a-surface-warning-subtle));
51
+ > .navds-alert__icon {
52
+ color: var(--ax-text-success-icon);
53
+ }
68
54
  }
69
55
 
70
- .navds-alert--warning > .navds-alert__icon {
71
- background: radial-gradient(circle at 50% 57%, var(--a-surface-default) 30%, 0, transparent);
72
- color: var(--ac-alert-icon-warning-color, var(--a-icon-warning));
73
- }
56
+ .navds-alert--warning {
57
+ border-color: var(--ax-border-warning);
58
+ background-color: var(--ax-bg-warning-moderate);
74
59
 
75
- .navds-alert--info {
76
- border-color: var(--ac-alert-info-border, var(--a-border-info));
77
- background-color: var(--ac-alert-info-bg, var(--a-surface-info-subtle));
60
+ > .navds-alert__icon {
61
+ color: var(--ax-text-warning-icon);
62
+ }
78
63
  }
79
64
 
80
- .navds-alert--info > .navds-alert__icon {
81
- color: var(--ac-alert-icon-info-color, var(--a-icon-info));
82
- }
65
+ .navds-alert--error {
66
+ border-color: var(--ax-border-danger);
67
+ background-color: var(--ax-bg-danger-moderate);
83
68
 
84
- .navds-alert--success {
85
- border-color: var(--ac-alert-success-border, var(--a-border-success));
86
- background-color: var(--ac-alert-success-bg, var(--a-surface-success-subtle));
69
+ > .navds-alert__icon {
70
+ color: var(--ax-text-danger-icon);
71
+ }
87
72
  }
88
73
 
89
- .navds-alert--success > .navds-alert__icon {
90
- color: var(--ac-alert-icon-success-color, var(--a-icon-success));
74
+ /* ----------------------------- Alert fullwidth ---------------------------- */
75
+ .navds-alert--full-width {
76
+ border-radius: 0;
91
77
  }
92
78
 
79
+ /* ------------------------------ Alert inline ------------------------------ */
93
80
  .navds-alert--inline {
94
81
  background-color: transparent;
95
82
  border: none;
96
83
  padding: 0;
97
84
  }
98
85
 
86
+ /* ------------------------- Alert with close button ------------------------ */
99
87
  .navds-alert__button-wrapper {
100
88
  align-self: flex-start;
101
89
  flex: 1;
@@ -104,10 +92,24 @@
104
92
  justify-content: flex-end;
105
93
  }
106
94
 
107
- @media (forced-colors: active) {
108
- .navds-alert {
109
- border: 1px solid canvastext;
110
- background-color: canvas;
111
- color: canvastext;
95
+ .navds-alert--close-button {
96
+ > .navds-alert__wrapper {
97
+ margin-block-start: var(--ax-spacing-05);
98
+ }
99
+
100
+ > .navds-alert__icon {
101
+ margin-block-start: var(--ax-spacing-05);
102
+ }
103
+
104
+ &.navds-alert--small {
105
+ align-items: flex-start;
106
+
107
+ > .navds-alert__wrapper {
108
+ margin-block-start: var(--ax-spacing-1);
109
+ }
110
+
111
+ > .navds-alert__icon {
112
+ margin-block-start: var(--ax-spacing-1);
113
+ }
112
114
  }
113
115
  }
package/darkside/baseline/theme.darkside.css CHANGED
@@ -1,12 +1,15 @@
1
- /* stylelint-disable csstools/value-no-unknown-custom-properties */
2
-
3
- /* To support nested theming, we want to declare color on each scoped elements */
4
- :root,
5
- :host,
6
- .light {
1
+ .navds-theme {
7
2
  color: var(--ax-text-default);
8
- }
9
3
 
10
- .dark {
11
- color: var(--ax-text-default);
4
+ &[data-background="true"] {
5
+ background-color: var(--ax-bg-default);
6
+ }
7
+
8
+ &.light {
9
+ color-scheme: light;
10
+ }
11
+
12
+ &.dark {
13
+ color-scheme: dark;
14
+ }
12
15
  }
package/darkside/chat.darkside.css CHANGED
@@ -1,33 +1,30 @@
1
1
  .navds-chat {
2
2
  display: flex;
3
3
  align-items: flex-end;
4
- gap: var(--a-spacing-3);
4
+ gap: var(--ax-spacing-3);
5
5
  max-width: 40.75rem;
6
6
  }
7
7
 
8
8
  .navds-chat--right {
9
9
  flex-direction: row-reverse;
10
- }
11
10
 
12
- .navds-chat__bubble-wrapper {
13
- list-style: none;
14
- margin: 0;
15
- padding: 0;
16
- display: flex;
17
- flex-direction: column;
18
- gap: var(--a-spacing-3);
19
- }
11
+ & .navds-chat__bubble-wrapper {
12
+ align-items: flex-end;
13
+ }
20
14
 
21
- .navds-chat--right .navds-chat__bubble-wrapper {
22
- align-items: flex-end;
15
+ & .navds-chat__bubble {
16
+ border-radius: var(--ax-border-radius-xlarge);
17
+ border-bottom-right-radius: var(--ax-border-radius-small);
18
+ }
23
19
  }
24
20
 
21
+ /* ------------------------------- Chat avatar ------------------------------ */
25
22
  .navds-chat__avatar {
26
23
  align-items: center;
27
- box-shadow: var(--a-shadow-xsmall);
28
- background-color: var(--ac-chat-avatar-bg, var(--a-surface-neutral-subtle));
29
- border-radius: var(--a-border-radius-full);
30
- color: var(--ac-chat-avatar-color, var(--a-text-default));
24
+ background-color: var(--ax-bg-raised);
25
+ border-radius: var(--ax-border-radius-full);
26
+ border: 1px solid var(--ax-border-subtleA);
27
+ color: var(--ax-text-default);
31
28
  display: flex;
32
29
  flex-shrink: 0;
33
30
  justify-content: center;
@@ -37,50 +34,61 @@
37
34
  line-height: 2.5rem; /* Makes text properly vertically centered in Chrome */
38
35
  font-size: 1.06rem;
39
36
  letter-spacing: 0.024rem;
37
+
38
+ & svg {
39
+ align-self: center;
40
+ width: 100%;
41
+ max-width: 1.5rem;
42
+ max-height: 1.5rem;
43
+ }
40
44
  }
41
45
 
42
- .navds-chat__avatar svg {
43
- align-self: center;
44
- width: 100%;
45
- max-width: 1.5rem;
46
- max-height: 1.5rem;
46
+ /* ------------------------------- Chat bubble ------------------------------ */
47
+ .navds-chat__bubble-wrapper {
48
+ list-style: none;
49
+ margin: 0;
50
+ padding: 0;
51
+ display: flex;
52
+ flex-direction: column;
53
+ gap: var(--ax-spacing-3);
47
54
  }
48
55
 
49
56
  .navds-chat__bubble {
50
- padding: var(--a-spacing-4);
51
- box-shadow: var(--a-shadow-xsmall);
57
+ padding: var(--ax-spacing-4);
52
58
  width: fit-content;
53
- background-color: var(--ac-chat-bubble-bg, var(--a-surface-neutral-subtle));
54
- border-radius: var(--a-border-radius-xlarge);
55
- border-bottom-left-radius: 2px;
59
+ background-color: var(--ax-bg-raised);
56
60
  display: flex;
57
61
  flex-direction: column;
58
- gap: var(--a-spacing-2);
59
- }
60
-
61
- .navds-chat--right .navds-chat__bubble {
62
- border-radius: var(--a-border-radius-xlarge);
63
- border-bottom-right-radius: 2px;
62
+ gap: var(--ax-spacing-2);
63
+ border-radius: var(--ax-border-radius-xlarge);
64
+ border-bottom-left-radius: var(--ax-border-radius-small);
65
+ border: 1px solid var(--ax-border-subtleA);
64
66
  }
65
67
 
66
68
  .navds-chat--small .navds-chat__bubble {
67
- padding: var(--a-spacing-3);
69
+ padding: var(--ax-spacing-3);
68
70
  }
69
71
 
70
- .navds-chat--info .navds-chat__bubble,
71
- .navds-chat--info .navds-chat__avatar {
72
- background-color: var(--a-surface-info-subtle);
72
+ /* -------------------------- Chat bubble variants -------------------------- */
73
+ .navds-chat--info {
74
+ & .navds-chat__bubble,
75
+ & .navds-chat__avatar {
76
+ background-color: var(--ax-bg-info-raised);
77
+ }
73
78
  }
74
79
 
75
- .navds-chat--subtle .navds-chat__bubble,
76
- .navds-chat--subtle .navds-chat__avatar {
77
- background-color: var(--a-surface-default);
80
+ .navds-chat--neutral {
81
+ & .navds-chat__bubble,
82
+ & .navds-chat__avatar {
83
+ background-color: var(--ax-bg-neutral-raised);
84
+ }
78
85
  }
79
86
 
87
+ /* ------------------------------ Chat top text ----------------------------- */
80
88
  .navds-chat__top-text {
81
- color: var(--ac-chat-top-text, var(--a-text-default));
89
+ color: var(--ax-text-default);
82
90
  display: flex;
83
- gap: var(--a-spacing-2);
91
+ gap: var(--ax-spacing-2);
84
92
  align-items: baseline;
85
93
  font-weight: normal;
86
94
  margin: 0;
@@ -105,16 +113,3 @@
105
113
  .navds-chat--right .navds-chat__top-text--left {
106
114
  align-self: flex-start;
107
115
  }
108
-
109
- @media (forced-colors: active) {
110
- .navds-chat__bubble,
111
- .navds-chat__avatar {
112
- border: 1px solid canvastext;
113
- background-color: canvas;
114
- color: canvastext;
115
- }
116
-
117
- .navds-chat__avatar svg {
118
- forced-color-adjust: none;
119
- }
120
- }
package/darkside/chips.darkside.css CHANGED
@@ -1,13 +1,13 @@
1
1
  .navds-chips {
2
2
  display: flex;
3
- gap: var(--a-spacing-2);
3
+ gap: var(--ax-spacing-2);
4
4
  margin: 0;
5
5
  padding: 0;
6
6
  list-style: none;
7
7
  flex-wrap: wrap;
8
8
  }
9
9
 
10
- .navds-chips :where(li) {
10
+ .navds-chips li {
11
11
  margin: 0;
12
12
  padding: 0;
13
13
  list-style: none;
@@ -20,113 +20,116 @@
20
20
  cursor: pointer;
21
21
  align-items: center;
22
22
  justify-content: center;
23
- gap: var(--a-spacing-05);
23
+ gap: var(--ax-spacing-05);
24
24
  margin: 0;
25
- padding: 0 var(--a-spacing-3);
25
+ padding: 0 var(--ax-spacing-3);
26
26
  text-decoration: none;
27
- border-radius: var(--a-border-radius-full);
27
+ border-radius: var(--ax-border-radius-full);
28
28
  min-height: 2rem;
29
- }
30
29
 
31
- .navds-chips--small .navds-chips__chip {
32
- min-height: 1.5rem;
33
- padding: 0 var(--a-spacing-2);
30
+ &:focus-visible {
31
+ outline: 2px solid var(--ax-border-focus);
32
+ outline-offset: 2px;
33
+ }
34
34
  }
35
35
 
36
- .navds-chips__toggle {
37
- box-shadow: inset 0 0 0 1px var(--ac-chip-toggle-border, var(--a-border-subtle));
38
- background-color: var(--ac-chip-toggle-bg, var(--a-surface-action-subtle));
39
- color: var(--ac-chip-toggle-text, var(--a-text-default));
40
- }
36
+ .navds-chips--small {
37
+ .navds-chips__chip {
38
+ min-height: 1.5rem;
39
+ padding: 0 var(--ax-spacing-2);
40
+ }
41
41
 
42
- .navds-chips__toggle:hover {
43
- box-shadow: inset 0 0 0 1px var(--ac-chip-toggle-hover-border, var(--a-border-subtle-hover));
44
- background-color: var(--ac-chip-toggle-hover-bg, var(--a-surface-action-subtle-hover));
45
- }
42
+ .navds-chips__toggle-icon {
43
+ width: 1rem;
44
+ height: 1rem;
45
+ }
46
46
 
47
- .navds-chips__toggle[aria-pressed="true"] {
48
- box-shadow: none;
49
- background-color: var(--ac-chip-toggle-pressed-bg, var(--a-surface-action-selected));
50
- color: var(--ac-chip-toggle-pressed-text, var(--a-text-on-action));
51
- }
47
+ .navds-chips__toggle--with-checkmark {
48
+ padding-left: var(--ax-spacing-1);
49
+ }
52
50
 
53
- .navds-chips__toggle[aria-pressed="true"]:hover {
54
- background-color: var(--ac-chip-toggle-pressed-hover-bg, var(--a-surface-action-selected-hover));
55
- }
51
+ .navds-chips__removable-icon {
52
+ width: 1.25rem;
53
+ height: 1.25rem;
54
+ }
56
55
 
57
- /* Toggle variant neutral */
58
- .navds-chips__toggle--neutral {
59
- box-shadow: inset 0 0 0 1px var(--ac-chip-toggle-neutral-border, var(--a-border-subtle));
60
- background-color: var(--ac-chip-toggle-neutral-bg, var(--a-surface-neutral-subtle));
61
- color: var(--ac-chip-toggle-neutral-text, var(--a-text-default));
62
- }
56
+ .navds-chips__removable-icon > svg {
57
+ width: 1rem;
58
+ }
63
59
 
64
- .navds-chips__toggle--neutral:hover {
65
- box-shadow: inset 0 0 0 1px var(--ac-chip-toggle-neutral-hover-border, var(--a-border-subtle-hover));
66
- background-color: var(--ac-chip-toggle-neutral-hover-bg, var(--a-surface-neutral-subtle-hover));
60
+ .navds-chips--icon-right {
61
+ padding-right: var(--ax-spacing-05);
62
+ }
67
63
  }
68
64
 
69
- .navds-chips__toggle--neutral[aria-pressed="true"] {
70
- box-shadow: none;
71
- background-color: var(--ac-chip-toggle-neutral-pressed-bg, var(--a-surface-neutral-selected));
72
- color: var(--ac-chip-toggle-neutral-pressed-text, var(--a-text-on-neutral));
73
- }
65
+ /* ------------------------------ Chips Toggle ------------------------------ */
66
+ .navds-chips__toggle--action {
67
+ box-shadow: inset 0 0 0 1px var(--ax-border-accent-subtleA);
68
+ background-color: var(--ax-bg-accent-moderate);
69
+ color: var(--ax-text-default);
74
70
 
75
- .navds-chips__toggle--neutral[aria-pressed="true"]:hover {
76
- background-color: var(--ac-chip-toggle-neutral-pressed-hover-bg, var(--a-surface-neutral-selected));
77
- }
71
+ &:hover {
72
+ background-color: var(--ax-bg-accent-moderate-hover);
73
+ }
78
74
 
79
- .navds-chips__toggle:focus-visible {
80
- box-shadow: 0 0 0 2px var(--ac-chip-toggle-focus, var(--a-border-focus));
81
- }
75
+ &[data-pressed="true"] {
76
+ box-shadow: none;
77
+ background-color: var(--ax-bg-accent-strong-pressed);
78
+ color: var(--ax-text-accent-contrast);
82
79
 
83
- .navds-chips__toggle[aria-pressed="true"]:focus-visible,
84
- .navds-chips__toggle:active:focus-visible {
85
- box-shadow:
86
- inset 0 0 0 1px var(--a-surface-default),
87
- 0 0 0 2px var(--ac-chip-toggle-focus, var(--a-border-focus));
80
+ &:hover {
81
+ background-color: var(--ax-bg-accent-strong-hover);
82
+ }
83
+ }
88
84
  }
89
85
 
90
- @supports not selector(:focus-visible) {
91
- .navds-chips__toggle:focus {
92
- outline: none;
93
- box-shadow: 0 0 0 2px var(--ac-chip-toggle-focus, var(--a-border-focus));
86
+ .navds-chips__toggle--neutral {
87
+ box-shadow: inset 0 0 0 1px var(--ax-border-neutral-subtleA);
88
+ background-color: var(--ax-bg-neutral-moderate);
89
+ color: var(--ax-text-default);
90
+
91
+ &:hover {
92
+ background-color: var(--ax-bg-neutral-moderate-hover);
94
93
  }
95
94
 
96
- .navds-chips__toggle[aria-pressed="true"]:focus,
97
- .navds-chips__toggle:active:focus {
98
- box-shadow:
99
- inset 0 0 0 1px var(--a-surface-default),
100
- 0 0 0 2px var(--ac-chip-toggle-focus, var(--a-border-focus));
95
+ &[data-pressed="true"] {
96
+ box-shadow: none;
97
+ background-color: var(--ax-bg-neutral-strong-pressed);
98
+ color: var(--ax-text-neutral-contrast);
99
+
100
+ &:hover {
101
+ background-color: var(--ax-bg-neutral-strong-hover);
102
+ }
101
103
  }
102
104
  }
103
105
 
104
106
  .navds-chips--medium .navds-chips__toggle--with-checkmark {
105
- padding-left: var(--a-spacing-1-alt);
106
- }
107
-
108
- .navds-chips--small .navds-chips__toggle--with-checkmark {
109
- padding-left: var(--a-spacing-1);
107
+ padding-left: var(--ax-spacing-1-alt);
110
108
  }
111
109
 
112
- .navds-chips--small .navds-chips__toggle-icon {
113
- width: 1rem;
114
- height: 1rem;
115
- }
110
+ /* -------------------------- start old CSS -------------------------- */
116
111
 
112
+ /* ----------------------------- Chips removable ---------------------------- */
117
113
  .navds-chips__removable {
118
114
  gap: 0;
119
115
  }
120
116
 
121
117
  .navds-chips__removable--action {
122
- background-color: var(--ac-chip-removable-action-bg, var(--a-surface-action-selected));
123
- color: var(--ac-chip-removable-action-text, var(--a-text-on-action));
118
+ background: var(--ax-bg-accent-strong-pressed);
119
+ color: var(--ax-text-accent-contrast);
120
+
121
+ &:hover {
122
+ background: var(--ax-bg-accent-strong-hover);
123
+ }
124
124
  }
125
125
 
126
126
  .navds-chips__removable--neutral {
127
- background-color: var(--ac-chip-removable-neutral-bg, var(--a-surface-neutral-subtle));
128
- color: var(--ac-chip-removable-neutral-text, var(--a-text-default));
129
- box-shadow: inset 0 0 0 1px var(--ac-chip-removable-neutral-border, var(--a-border-default));
127
+ background: var(--ax-bg-neutral-strong-pressed);
128
+ color: var(--ax-text-neutral-contrast);
129
+
130
+ &:hover {
131
+ background: var(--ax-bg-neutral-strong-hover);
132
+ }
130
133
  }
131
134
 
132
135
  .navds-chips__removable-icon {
@@ -135,100 +138,39 @@
135
138
  font-size: 1.25rem;
136
139
  display: grid;
137
140
  place-items: center;
138
- border-radius: var(--a-border-radius-full);
139
- }
140
-
141
- .navds-chips--small .navds-chips__removable-icon {
142
- width: 1.25rem;
143
- height: 1.25rem;
144
- }
145
-
146
- .navds-chips--small .navds-chips__removable-icon > svg {
147
- width: 1rem;
148
- }
149
-
150
- .navds-chips__removable--action:focus-visible {
151
- box-shadow:
152
- inset 0 0 0 1px var(--a-surface-default),
153
- 0 0 0 2px var(--a-border-focus);
154
- }
155
-
156
- .navds-chips__removable--neutral:focus-visible {
157
- box-shadow: 0 0 0 2px var(--a-border-focus);
158
- }
159
-
160
- @supports not selector(:focus-visible) {
161
- .navds-chips__removable--action:focus {
162
- outline: none;
163
- box-shadow:
164
- inset 0 0 0 1px var(--a-surface-default),
165
- 0 0 0 2px var(--a-border-focus);
166
- }
167
-
168
- .navds-chips__removable--neutral:focus {
169
- outline: none;
170
- box-shadow: 0 0 0 2px var(--a-border-focus);
171
- }
172
- }
173
-
174
- .navds-chips__removable--action:hover {
175
- background-color: var(--ac-chip-removable-action-hover-bg, var(--a-surface-action-selected-hover));
176
- }
177
-
178
- .navds-chips__removable--neutral:hover {
179
- background-color: var(--ac-chip-removable-neutral-hover-bg, var(--a-surface-neutral-subtle-hover));
180
- box-shadow: inset 0 0 0 1px var(--ac-chip-removable-neutral-hover-border, var(--a-border-strong));
141
+ border-radius: var(--ax-border-radius-full);
181
142
  }
182
143
 
183
144
  .navds-chips--icon-left {
184
- padding-left: var(--a-spacing-1-alt);
145
+ padding-left: var(--ax-spacing-1-alt);
185
146
  }
186
147
 
187
148
  .navds-chips--icon-right {
188
- padding-right: var(--a-spacing-1-alt);
189
- }
190
-
191
- .navds-chips--small .navds-chips--icon-right {
192
- padding-right: var(--a-spacing-05);
149
+ padding-right: var(--ax-spacing-1-alt);
193
150
  }
194
151
 
195
152
  @media (forced-colors: active) {
196
153
  .navds-chips__chip {
197
154
  border: 1px solid transparent;
198
- }
199
-
200
- .navds-chips__chip:hover {
201
- background-color: highlighttext;
202
- color: highlight;
203
- }
204
155
 
205
- .navds-chips__chip:focus-visible {
206
- outline: 2px solid transparent;
207
- outline-offset: 2px;
156
+ &:hover {
157
+ background-color: highlighttext;
158
+ color: highlight;
159
+ }
208
160
  }
209
161
 
210
- .navds-chips__chip:where([aria-pressed="true"], :active, :hover) > span {
162
+ .navds-chips__chip:where([data-pressed="true"], :active, :hover) > span {
211
163
  forced-color-adjust: none;
212
164
  }
213
165
 
214
- .navds-chips__toggle:active {
215
- background-color: highlight;
216
- color: highlighttext;
217
- }
218
-
219
- .navds-chips__toggle[aria-pressed="true"] {
166
+ .navds-chips__toggle[data-pressed="true"] {
220
167
  background-color: selecteditem;
221
168
  color: selecteditemtext;
222
169
  border: 1px solid selecteditem;
223
- }
224
-
225
- .navds-chips__toggle[aria-pressed="true"]:hover {
226
- background-color: selecteditemtext;
227
- color: selecteditem;
228
- }
229
170
 
230
- .navds-chips__toggle[aria-pressed="true"]:active {
231
- background-color: highlight;
232
- color: highlighttext;
171
+ &:hover {
172
+ background-color: selecteditemtext;
173
+ color: selecteditem;
174
+ }
233
175
  }
234
176
  }