@navikt/ds-css 3.1.2 → 3.2.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.
- package/CHANGELOG.md +18 -0
- package/config/_mappings.js +5 -0
- package/copybutton.css +129 -0
- package/dist/component/copybutton.css +132 -0
- package/dist/component/copybutton.min.css +1 -0
- package/dist/component/index.css +132 -9
- package/dist/component/index.min.css +2 -2
- package/dist/component/togglegroup.css +25 -8
- package/dist/component/togglegroup.min.css +1 -1
- package/dist/components.css +131 -8
- package/dist/components.min.css +2 -2
- package/dist/global/tokens.css +1 -1
- package/dist/index.css +132 -9
- package/dist/index.min.css +2 -2
- package/index.css +1 -0
- package/package.json +2 -2
- package/toggle-group.css +25 -8
- package/tokens.json +16 -2
package/toggle-group.css
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
}
|
|
6
6
|
|
|
7
7
|
.navds-toggle-group {
|
|
8
|
-
border-radius:
|
|
8
|
+
border-radius: var(--a-border-radius-medium);
|
|
9
9
|
background-color: var(--ac-toggle-group-bg, var(--a-surface-transparent));
|
|
10
10
|
box-shadow: inset 0 0 0 1px var(--ac-toggle-group-border, var(--a-border-default));
|
|
11
11
|
padding: calc(var(--a-spacing-1) + 1px);
|
|
@@ -15,6 +15,10 @@
|
|
|
15
15
|
grid-auto-columns: 1fr;
|
|
16
16
|
}
|
|
17
17
|
|
|
18
|
+
.navds-toggle-group--small {
|
|
19
|
+
padding: calc(var(--a-spacing-05) + 1px);
|
|
20
|
+
}
|
|
21
|
+
|
|
18
22
|
.navds-toggle-group--neutral {
|
|
19
23
|
background-color: var(--ac-toggle-group-neutral-bg, var(--a-surface-transparent));
|
|
20
24
|
box-shadow: inset 0 0 0 1px var(--ac-toggle-group-neutral-border, var(--a-border-default));
|
|
@@ -24,14 +28,25 @@
|
|
|
24
28
|
display: inline-flex;
|
|
25
29
|
align-items: center;
|
|
26
30
|
justify-content: center;
|
|
27
|
-
padding: var(--a-spacing-3);
|
|
28
|
-
min-height:
|
|
31
|
+
padding: var(--a-spacing-1) var(--a-spacing-3);
|
|
32
|
+
min-height: 38px;
|
|
29
33
|
border: none;
|
|
30
34
|
cursor: pointer;
|
|
31
35
|
background-color: var(--ac-toggle-group-button-bg, var(--a-surface-transparent));
|
|
32
36
|
color: var(--ac-toggle-group-button-text, var(--a-text-default));
|
|
33
|
-
border-radius:
|
|
37
|
+
border-radius: 2px;
|
|
34
38
|
min-width: fit-content;
|
|
39
|
+
font-weight: var(--a-font-weight-regular);
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.navds-toggle-group--medium > :where(.navds-toggle-group__button:first-of-type:focus-visible) {
|
|
43
|
+
border-start-start-radius: 1px;
|
|
44
|
+
border-end-start-radius: 1px;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.navds-toggle-group--medium > :where(.navds-toggle-group__button:last-of-type:focus-visible) {
|
|
48
|
+
border-start-end-radius: 1px;
|
|
49
|
+
border-end-end-radius: 1px;
|
|
35
50
|
}
|
|
36
51
|
|
|
37
52
|
.navds-toggle-group--neutral > .navds-toggle-group__button {
|
|
@@ -41,7 +56,7 @@
|
|
|
41
56
|
|
|
42
57
|
.navds-toggle-group__button:hover {
|
|
43
58
|
background-color: var(--ac-toggle-group-button-hover-bg, var(--a-surface-action-subtle));
|
|
44
|
-
color: var(--ac-toggle-group-button-hover-text, var(--a-text-
|
|
59
|
+
color: var(--ac-toggle-group-button-hover-text, var(--a-text-default));
|
|
45
60
|
}
|
|
46
61
|
|
|
47
62
|
.navds-toggle-group--neutral > .navds-toggle-group__button:hover {
|
|
@@ -87,6 +102,7 @@
|
|
|
87
102
|
display: flex;
|
|
88
103
|
align-items: center;
|
|
89
104
|
gap: var(--a-spacing-2);
|
|
105
|
+
font-weight: inherit;
|
|
90
106
|
}
|
|
91
107
|
|
|
92
108
|
.navds-toggle-group__button-inner > * {
|
|
@@ -97,17 +113,18 @@
|
|
|
97
113
|
.navds-toggle-group__button[aria-checked="true"] {
|
|
98
114
|
background-color: var(--ac-toggle-group-selected-bg, var(--a-surface-action-selected));
|
|
99
115
|
color: var(--ac-toggle-group-selected-text, var(--a-text-on-action));
|
|
116
|
+
font-weight: var(--a-font-weight-bold);
|
|
100
117
|
}
|
|
101
118
|
|
|
102
119
|
.navds-toggle-group--neutral > .navds-toggle-group__button[aria-pressed="true"],
|
|
103
120
|
.navds-toggle-group--neutral > .navds-toggle-group__button[aria-checked="true"] {
|
|
104
|
-
background-color: var(--ac-toggle-group-neutral-selected-bg, var(--a-surface-neutral));
|
|
121
|
+
background-color: var(--ac-toggle-group-neutral-selected-bg, var(--a-surface-neutral-selected));
|
|
105
122
|
color: var(--ac-toggle-group-neutral-selected-text, var(--a-text-on-neutral));
|
|
106
123
|
}
|
|
107
124
|
|
|
108
125
|
.navds-toggle-group--small > .navds-toggle-group__button {
|
|
109
|
-
padding:
|
|
110
|
-
min-height:
|
|
126
|
+
padding: var(--a-spacing-05) var(--a-spacing-3);
|
|
127
|
+
min-height: 26px;
|
|
111
128
|
min-width: fit-content;
|
|
112
129
|
}
|
|
113
130
|
|
package/tokens.json
CHANGED
|
@@ -104,6 +104,20 @@
|
|
|
104
104
|
"--ac-chip-removable-neutral-hover-bg": "--a-surface-neutral-subtle-hover",
|
|
105
105
|
"--ac-chip-removable-neutral-hover-border": "--a-border-strong"
|
|
106
106
|
},
|
|
107
|
+
"copybutton": {
|
|
108
|
+
"--ac-copybutton-border-radius": "--a-border-radius-medium",
|
|
109
|
+
"--ac-copybutton-action-text": "--a-text-action",
|
|
110
|
+
"--ac-copybutton-action-bg": "--a-surface-transparent",
|
|
111
|
+
"--ac-copybutton-action-hover-text": "--a-text-action",
|
|
112
|
+
"--ac-copybutton-action-hover-bg": "--a-surface-hover",
|
|
113
|
+
"--ac-copybutton-action-active-text": "--a-icon-success",
|
|
114
|
+
"--ac-copybutton-neutral-text": "--a-text-subtle",
|
|
115
|
+
"--ac-copybutton-neutral-bg": "--a-surface-transparent",
|
|
116
|
+
"--ac-copybutton-neutral-hover-text": "--a-text-default",
|
|
117
|
+
"--ac-copybutton-neutral-hover-bg": "--a-surface-hover",
|
|
118
|
+
"--ac-copybutton-neutral-active-text": "--a-text-default",
|
|
119
|
+
"--ac-copybutton-animation": "akselCopyButtonAnimation 0.4s linear"
|
|
120
|
+
},
|
|
107
121
|
"date": {
|
|
108
122
|
"--ac-date-middle-text": "--a-text-on-action",
|
|
109
123
|
"--ac-date-middle-bg": "--a-surface-action-selected",
|
|
@@ -277,14 +291,14 @@
|
|
|
277
291
|
"--ac-toggle-group-button-bg": "--a-surface-transparent",
|
|
278
292
|
"--ac-toggle-group-button-text": "--a-text-default",
|
|
279
293
|
"--ac-toggle-group-button-hover-bg": "--a-surface-action-subtle",
|
|
280
|
-
"--ac-toggle-group-button-hover-text": "--a-text-
|
|
294
|
+
"--ac-toggle-group-button-hover-text": "--a-text-default",
|
|
281
295
|
"--ac-toggle-group-selected-bg": "--a-surface-action-selected",
|
|
282
296
|
"--ac-toggle-group-selected-text": "--a-text-on-action",
|
|
283
297
|
"--ac-toggle-group-button-neutral-bg": "--a-surface-transparent",
|
|
284
298
|
"--ac-toggle-group-button-neutral-text": "--a-text-default",
|
|
285
299
|
"--ac-toggle-group-button-neutral-hover-bg": "--a-surface-neutral-subtle-hover",
|
|
286
300
|
"--ac-toggle-group-button-neutral-hover-text": "--a-text-default",
|
|
287
|
-
"--ac-toggle-group-neutral-selected-bg": "--a-surface-neutral",
|
|
301
|
+
"--ac-toggle-group-neutral-selected-bg": "--a-surface-neutral-selected",
|
|
288
302
|
"--ac-toggle-group-neutral-selected-text": "--a-text-on-neutral"
|
|
289
303
|
},
|
|
290
304
|
"tooltip": {
|