@navikt/ds-css 3.1.2 → 3.1.3
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 +9 -0
- package/dist/component/index.css +23 -9
- package/dist/component/index.min.css +1 -1
- package/dist/component/togglegroup.css +25 -8
- package/dist/component/togglegroup.min.css +1 -1
- package/dist/components.css +22 -8
- package/dist/components.min.css +1 -1
- package/dist/global/tokens.css +1 -1
- package/dist/index.css +23 -9
- package/dist/index.min.css +1 -1
- package/package.json +2 -2
- package/toggle-group.css +25 -8
- package/tokens.json +2 -2
|
@@ -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
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.navds-toggle-group__wrapper{display:grid;gap:var(--a-spacing-2);justify-items:start}.navds-toggle-group{background-color:var(--ac-toggle-group-bg,var(--a-surface-transparent));border-radius:
|
|
1
|
+
.navds-toggle-group__wrapper{display:grid;gap:var(--a-spacing-2);justify-items:start}.navds-toggle-group{background-color:var(--ac-toggle-group-bg,var(--a-surface-transparent));border-radius:var(--a-border-radius-medium);box-shadow:inset 0 0 0 1px var(--ac-toggle-group-border,var(--a-border-default));display:inline-grid;gap:var(--a-spacing-1);grid-auto-columns:1fr;grid-auto-flow:column;padding:calc(var(--a-spacing-1) + 1px)}.navds-toggle-group--small{padding:calc(var(--a-spacing-05) + 1px)}.navds-toggle-group--neutral{background-color:var(--ac-toggle-group-neutral-bg,var(--a-surface-transparent));box-shadow:inset 0 0 0 1px var(--ac-toggle-group-neutral-border,var(--a-border-default))}.navds-toggle-group__button{align-items:center;background-color:var(--ac-toggle-group-button-bg,var(--a-surface-transparent));border:none;border-radius:2px;color:var(--ac-toggle-group-button-text,var(--a-text-default));cursor:pointer;display:inline-flex;font-weight:var(--a-font-weight-regular);justify-content:center;min-height:38px;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;padding:var(--a-spacing-1) var(--a-spacing-3)}.navds-toggle-group--medium>:where(.navds-toggle-group__button:first-of-type:focus-visible){border-end-start-radius:1px;border-start-start-radius:1px}.navds-toggle-group--medium>:where(.navds-toggle-group__button:last-of-type:focus-visible){border-end-end-radius:1px;border-start-end-radius:1px}.navds-toggle-group--neutral>.navds-toggle-group__button{background-color:var(--ac-toggle-group-button-neutral-bg,var(--a-surface-transparent));color:var(--ac-toggle-group-button-neutral-text,var(--a-text-default))}.navds-toggle-group__button:hover{background-color:var(--ac-toggle-group-button-hover-bg,var(--a-surface-action-subtle));color:var(--ac-toggle-group-button-hover-text,var(--a-text-default))}.navds-toggle-group--neutral>.navds-toggle-group__button:hover{background-color:var(--ac-toggle-group-button-neutral-hover-bg,var(--a-surface-neutral-subtle-hover));color:var(--ac-toggle-group-button-neutral-hover-text,var(--a-text-default))}.navds-toggle-group__button:focus-visible{box-shadow:0 0 0 1px var(--a-surface-default),0 0 0 4px var(--a-border-focus);outline:none}@supports not selector(:focus-visible){.navds-toggle-group__button:focus{box-shadow:0 0 0 1px var(--a-surface-default),0 0 0 4px var(--a-border-focus);outline:none}}.navds-toggle-group__button:focus-visible:hover[aria-pressed=false]{box-shadow:0 0 0 1px var(--ac-toggle-group-button-hover-bg,var(--a-surface-action-subtle)),0 0 0 4px var(--a-border-focus)}@supports not selector(:focus-visible){.navds-toggle-group__button:focus:hover[aria-pressed=false]{box-shadow:0 0 0 1px var(--ac-toggle-group-button-hover-bg,var(--a-surface-action-subtle)),0 0 0 4px var(--a-border-focus)}}.navds-toggle-group--neutral>.navds-toggle-group__button:focus:hover[aria-pressed=false]{box-shadow:0 0 0 1px var(--ac-toggle-group-button-neutral-hover-bg,var(--a-surface-neutral-subtle-hover)),0 0 0 4px var(--a-border-focus)}@supports not selector(:focus-visible){.navds-toggle-group--neutral>.navds-toggle-group__button:focus-visible:hover[aria-pressed=false]{box-shadow:0 0 0 1px var(--ac-toggle-group-button-neutral-hover-bg,var(--a-surface-neutral-subtle-hover)),0 0 0 4px var(--a-border-focus)}}.navds-toggle-group__button-inner{align-items:center;display:flex;font-weight:inherit;gap:var(--a-spacing-2)}.navds-toggle-group__button-inner>*{flex-shrink:0}.navds-toggle-group__button[aria-checked=true],.navds-toggle-group__button[aria-pressed=true]{background-color:var(--ac-toggle-group-selected-bg,var(--a-surface-action-selected));color:var(--ac-toggle-group-selected-text,var(--a-text-on-action));font-weight:var(--a-font-weight-bold)}.navds-toggle-group--neutral>.navds-toggle-group__button[aria-checked=true],.navds-toggle-group--neutral>.navds-toggle-group__button[aria-pressed=true]{background-color:var(--ac-toggle-group-neutral-selected-bg,var(--a-surface-neutral-selected));color:var(--ac-toggle-group-neutral-selected-text,var(--a-text-on-neutral))}.navds-toggle-group--small>.navds-toggle-group__button{min-height:26px;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;padding:var(--a-spacing-05) var(--a-spacing-3)}.navds-toggle-group__button>.navds-toggle-group__button-inner>svg{font-size:1.5rem}.navds-toggle-group--small>.navds-toggle-group__button>.navds-toggle-group__button-inner>svg{font-size:1.125rem}
|
package/dist/components.css
CHANGED
|
@@ -2957,7 +2957,7 @@
|
|
|
2957
2957
|
gap: var(--a-spacing-2);
|
|
2958
2958
|
}
|
|
2959
2959
|
.navds-toggle-group {
|
|
2960
|
-
border-radius:
|
|
2960
|
+
border-radius: var(--a-border-radius-medium);
|
|
2961
2961
|
background-color: var(--ac-toggle-group-bg, var(--a-surface-transparent));
|
|
2962
2962
|
box-shadow: inset 0 0 0 1px var(--ac-toggle-group-border, var(--a-border-default));
|
|
2963
2963
|
padding: calc(var(--a-spacing-1) + 1px);
|
|
@@ -2966,6 +2966,9 @@
|
|
|
2966
2966
|
grid-auto-flow: column;
|
|
2967
2967
|
grid-auto-columns: 1fr;
|
|
2968
2968
|
}
|
|
2969
|
+
.navds-toggle-group--small {
|
|
2970
|
+
padding: calc(var(--a-spacing-05) + 1px);
|
|
2971
|
+
}
|
|
2969
2972
|
.navds-toggle-group--neutral {
|
|
2970
2973
|
background-color: var(--ac-toggle-group-neutral-bg, var(--a-surface-transparent));
|
|
2971
2974
|
box-shadow: inset 0 0 0 1px var(--ac-toggle-group-neutral-border, var(--a-border-default));
|
|
@@ -2974,14 +2977,23 @@
|
|
|
2974
2977
|
display: inline-flex;
|
|
2975
2978
|
align-items: center;
|
|
2976
2979
|
justify-content: center;
|
|
2977
|
-
padding: var(--a-spacing-3);
|
|
2978
|
-
min-height:
|
|
2980
|
+
padding: var(--a-spacing-1) var(--a-spacing-3);
|
|
2981
|
+
min-height: 38px;
|
|
2979
2982
|
border: none;
|
|
2980
2983
|
cursor: pointer;
|
|
2981
2984
|
background-color: var(--ac-toggle-group-button-bg, var(--a-surface-transparent));
|
|
2982
2985
|
color: var(--ac-toggle-group-button-text, var(--a-text-default));
|
|
2983
|
-
border-radius:
|
|
2986
|
+
border-radius: 2px;
|
|
2984
2987
|
min-width: fit-content;
|
|
2988
|
+
font-weight: var(--a-font-weight-regular);
|
|
2989
|
+
}
|
|
2990
|
+
.navds-toggle-group--medium > :where(.navds-toggle-group__button:first-of-type:focus-visible) {
|
|
2991
|
+
border-start-start-radius: 1px;
|
|
2992
|
+
border-end-start-radius: 1px;
|
|
2993
|
+
}
|
|
2994
|
+
.navds-toggle-group--medium > :where(.navds-toggle-group__button:last-of-type:focus-visible) {
|
|
2995
|
+
border-start-end-radius: 1px;
|
|
2996
|
+
border-end-end-radius: 1px;
|
|
2985
2997
|
}
|
|
2986
2998
|
.navds-toggle-group--neutral > .navds-toggle-group__button {
|
|
2987
2999
|
background-color: var(--ac-toggle-group-button-neutral-bg, var(--a-surface-transparent));
|
|
@@ -2989,7 +3001,7 @@
|
|
|
2989
3001
|
}
|
|
2990
3002
|
.navds-toggle-group__button:hover {
|
|
2991
3003
|
background-color: var(--ac-toggle-group-button-hover-bg, var(--a-surface-action-subtle));
|
|
2992
|
-
color: var(--ac-toggle-group-button-hover-text, var(--a-text-
|
|
3004
|
+
color: var(--ac-toggle-group-button-hover-text, var(--a-text-default));
|
|
2993
3005
|
}
|
|
2994
3006
|
.navds-toggle-group--neutral > .navds-toggle-group__button:hover {
|
|
2995
3007
|
background-color: var(--ac-toggle-group-button-neutral-hover-bg, var(--a-surface-neutral-subtle-hover));
|
|
@@ -3027,6 +3039,7 @@
|
|
|
3027
3039
|
display: flex;
|
|
3028
3040
|
align-items: center;
|
|
3029
3041
|
gap: var(--a-spacing-2);
|
|
3042
|
+
font-weight: inherit;
|
|
3030
3043
|
}
|
|
3031
3044
|
.navds-toggle-group__button-inner > * {
|
|
3032
3045
|
flex-shrink: 0;
|
|
@@ -3035,15 +3048,16 @@
|
|
|
3035
3048
|
.navds-toggle-group__button[aria-checked="true"] {
|
|
3036
3049
|
background-color: var(--ac-toggle-group-selected-bg, var(--a-surface-action-selected));
|
|
3037
3050
|
color: var(--ac-toggle-group-selected-text, var(--a-text-on-action));
|
|
3051
|
+
font-weight: var(--a-font-weight-bold);
|
|
3038
3052
|
}
|
|
3039
3053
|
.navds-toggle-group--neutral > .navds-toggle-group__button[aria-pressed="true"],
|
|
3040
3054
|
.navds-toggle-group--neutral > .navds-toggle-group__button[aria-checked="true"] {
|
|
3041
|
-
background-color: var(--ac-toggle-group-neutral-selected-bg, var(--a-surface-neutral));
|
|
3055
|
+
background-color: var(--ac-toggle-group-neutral-selected-bg, var(--a-surface-neutral-selected));
|
|
3042
3056
|
color: var(--ac-toggle-group-neutral-selected-text, var(--a-text-on-neutral));
|
|
3043
3057
|
}
|
|
3044
3058
|
.navds-toggle-group--small > .navds-toggle-group__button {
|
|
3045
|
-
padding:
|
|
3046
|
-
min-height:
|
|
3059
|
+
padding: var(--a-spacing-05) var(--a-spacing-3);
|
|
3060
|
+
min-height: 26px;
|
|
3047
3061
|
min-width: fit-content;
|
|
3048
3062
|
}
|
|
3049
3063
|
.navds-toggle-group__button > .navds-toggle-group__button-inner > svg {
|