@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.
@@ -5,7 +5,7 @@
5
5
  }
6
6
 
7
7
  .navds-toggle-group {
8
- border-radius: 9px;
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: 48px;
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: var(--a-border-radius-medium);
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-action-on-action-subtle));
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: 0.375rem;
110
- min-height: 32px;
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:9px;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--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:var(--a-border-radius-medium);color:var(--ac-toggle-group-button-text,var(--a-text-default));cursor:pointer;display:inline-flex;justify-content:center;min-height:48px;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;padding:var(--a-spacing-3)}.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-action-on-action-subtle))}.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;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))}.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));color:var(--ac-toggle-group-neutral-selected-text,var(--a-text-on-neutral))}.navds-toggle-group--small>.navds-toggle-group__button{min-height:32px;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;padding:.375rem}.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}
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}
@@ -1166,6 +1166,115 @@
1166
1166
  .navds-chips--small .navds-chips--icon-left {
1167
1167
  padding-left: 0.375rem;
1168
1168
  }
1169
+ [data-theme="dark"] .navds-copybutton,
1170
+ [data-theme="dark"].navds-copybutton {
1171
+ --a-text-action: var(--a-blue-300);
1172
+ --a-surface-hover: rgb(214 231 255 /0.13);
1173
+ --a-icon-success: rgb(51 170 95 /1);
1174
+ --a-text-subtle: rgb(231 240 254 /0.69);
1175
+ --a-text-default: rgb(251 252 254 /0.96);
1176
+ }
1177
+ .navds-copybutton {
1178
+ --__ac-copybutton-padding: var(--a-spacing-3) var(--a-spacing-5);
1179
+
1180
+ cursor: pointer;
1181
+ margin: 0;
1182
+ text-decoration: none;
1183
+ border: none;
1184
+ background: none;
1185
+ border-radius: var(--ac-copybutton-border-radius, var(--a-border-radius-medium));
1186
+ padding: var(--__ac-copybutton-padding);
1187
+ display: grid;
1188
+ place-content: center;
1189
+ }
1190
+ .navds-copybutton--small {
1191
+ --__ac-copybutton-padding: var(--a-spacing-1) var(--a-spacing-3);
1192
+
1193
+ min-height: 2rem;
1194
+ }
1195
+ .navds-copybutton--icon-only {
1196
+ --__ac-copybutton-padding: var(--a-spacing-3);
1197
+ }
1198
+ .navds-copybutton--small.navds-copybutton--icon-only {
1199
+ --__ac-copybutton-padding: var(--a-spacing-1);
1200
+ }
1201
+ .navds-copybutton__icon {
1202
+ font-size: 1.5rem;
1203
+ display: flex;
1204
+ margin-left: -4px;
1205
+ }
1206
+ .navds-copybutton__icon:only-child {
1207
+ margin: 0;
1208
+ }
1209
+ .navds-copybutton:focus-visible {
1210
+ outline: none;
1211
+ box-shadow: var(--a-shadow-focus);
1212
+ }
1213
+ @supports not selector(:focus-visible) {
1214
+ .navds-copybutton:focus {
1215
+ outline: none;
1216
+ box-shadow: var(--a-shadow-focus);
1217
+ }
1218
+ }
1219
+ /* Variant/action */
1220
+ .navds-copybutton--action {
1221
+ color: var(--ac-copybutton-action-text, var(--a-text-action));
1222
+ background-color: var(--ac-copybutton-action-bg, var(--a-surface-transparent));
1223
+ }
1224
+ .navds-copybutton--action:hover {
1225
+ color: var(--ac-copybutton-action-hover-text, var(--a-text-action));
1226
+ background-color: var(--ac-copybutton-action-hover-bg, var(--a-surface-hover));
1227
+ }
1228
+ .navds-copybutton--action:where(:disabled),
1229
+ .navds-copybutton--action:hover:where(:disabled) {
1230
+ color: var(--ac-copybutton-action-text, var(--a-text-action));
1231
+ background-color: var(--ac-copybutton-action-bg, var(--a-surface-transparent));
1232
+ box-shadow: none;
1233
+ }
1234
+ .navds-copybutton--active.navds-copybutton--action {
1235
+ color: var(--ac-copybutton-action-active-text, var(--a-icon-success));
1236
+ }
1237
+ /* Variant/neutral */
1238
+ .navds-copybutton--neutral {
1239
+ color: var(--ac-copybutton-neutral-text, var(--a-text-subtle));
1240
+ background-color: var(--ac-copybutton-neutral-bg, var(--a-surface-transparent));
1241
+ }
1242
+ .navds-copybutton--neutral:hover {
1243
+ color: var(--ac-copybutton-neutral-hover-text, var(--a-text-default));
1244
+ background-color: var(--ac-copybutton-neutral-hover-bg, var(--a-surface-hover));
1245
+ }
1246
+ .navds-copybutton--neutral:where(:disabled, .navds-copybutton--disabled),
1247
+ .navds-copybutton--neutral:hover:where(:disabled, .navds-copybutton--disabled) {
1248
+ color: var(--ac-copybutton-neutral-text, var(--a-text-default));
1249
+ background-color: var(--ac-copybutton-neutral-bg, var(--a-surface-transparent));
1250
+ box-shadow: none;
1251
+ }
1252
+ .navds-copybutton--active.navds-copybutton--neutral {
1253
+ color: var(--ac-copybutton-neutral-active-text, var(--a-text-default));
1254
+ }
1255
+ .navds-copybutton__content {
1256
+ display: inline-flex;
1257
+ align-items: center;
1258
+ justify-content: center;
1259
+ gap: var(--a-spacing-2);
1260
+ }
1261
+ .navds-copybutton--active > .navds-copybutton__content {
1262
+ animation: var(--ac-copybutton-animation, akselCopyButtonAnimation 0.4s linear);
1263
+ }
1264
+ @keyframes akselCopyButtonAnimation {
1265
+ 0% {
1266
+ opacity: 0.4;
1267
+ }
1268
+
1269
+ 100% {
1270
+ opacity: 1;
1271
+ }
1272
+ }
1273
+ /* Disabled */
1274
+ .navds-copybutton:where(:disabled) {
1275
+ cursor: not-allowed;
1276
+ opacity: 0.3;
1277
+ }
1169
1278
  .navds-expansioncard {
1170
1279
  --__ac-expansioncard-border-color: var(--ac-expansioncard-border-color, var(--a-border-default));
1171
1280
  --__ac-expansioncard-border-radius: var(--ac-expansioncard-border-radius, var(--a-border-radius-large));
@@ -2957,7 +3066,7 @@
2957
3066
  gap: var(--a-spacing-2);
2958
3067
  }
2959
3068
  .navds-toggle-group {
2960
- border-radius: 9px;
3069
+ border-radius: var(--a-border-radius-medium);
2961
3070
  background-color: var(--ac-toggle-group-bg, var(--a-surface-transparent));
2962
3071
  box-shadow: inset 0 0 0 1px var(--ac-toggle-group-border, var(--a-border-default));
2963
3072
  padding: calc(var(--a-spacing-1) + 1px);
@@ -2966,6 +3075,9 @@
2966
3075
  grid-auto-flow: column;
2967
3076
  grid-auto-columns: 1fr;
2968
3077
  }
3078
+ .navds-toggle-group--small {
3079
+ padding: calc(var(--a-spacing-05) + 1px);
3080
+ }
2969
3081
  .navds-toggle-group--neutral {
2970
3082
  background-color: var(--ac-toggle-group-neutral-bg, var(--a-surface-transparent));
2971
3083
  box-shadow: inset 0 0 0 1px var(--ac-toggle-group-neutral-border, var(--a-border-default));
@@ -2974,14 +3086,23 @@
2974
3086
  display: inline-flex;
2975
3087
  align-items: center;
2976
3088
  justify-content: center;
2977
- padding: var(--a-spacing-3);
2978
- min-height: 48px;
3089
+ padding: var(--a-spacing-1) var(--a-spacing-3);
3090
+ min-height: 38px;
2979
3091
  border: none;
2980
3092
  cursor: pointer;
2981
3093
  background-color: var(--ac-toggle-group-button-bg, var(--a-surface-transparent));
2982
3094
  color: var(--ac-toggle-group-button-text, var(--a-text-default));
2983
- border-radius: var(--a-border-radius-medium);
3095
+ border-radius: 2px;
2984
3096
  min-width: fit-content;
3097
+ font-weight: var(--a-font-weight-regular);
3098
+ }
3099
+ .navds-toggle-group--medium > :where(.navds-toggle-group__button:first-of-type:focus-visible) {
3100
+ border-start-start-radius: 1px;
3101
+ border-end-start-radius: 1px;
3102
+ }
3103
+ .navds-toggle-group--medium > :where(.navds-toggle-group__button:last-of-type:focus-visible) {
3104
+ border-start-end-radius: 1px;
3105
+ border-end-end-radius: 1px;
2985
3106
  }
2986
3107
  .navds-toggle-group--neutral > .navds-toggle-group__button {
2987
3108
  background-color: var(--ac-toggle-group-button-neutral-bg, var(--a-surface-transparent));
@@ -2989,7 +3110,7 @@
2989
3110
  }
2990
3111
  .navds-toggle-group__button:hover {
2991
3112
  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-action-on-action-subtle));
3113
+ color: var(--ac-toggle-group-button-hover-text, var(--a-text-default));
2993
3114
  }
2994
3115
  .navds-toggle-group--neutral > .navds-toggle-group__button:hover {
2995
3116
  background-color: var(--ac-toggle-group-button-neutral-hover-bg, var(--a-surface-neutral-subtle-hover));
@@ -3027,6 +3148,7 @@
3027
3148
  display: flex;
3028
3149
  align-items: center;
3029
3150
  gap: var(--a-spacing-2);
3151
+ font-weight: inherit;
3030
3152
  }
3031
3153
  .navds-toggle-group__button-inner > * {
3032
3154
  flex-shrink: 0;
@@ -3035,15 +3157,16 @@
3035
3157
  .navds-toggle-group__button[aria-checked="true"] {
3036
3158
  background-color: var(--ac-toggle-group-selected-bg, var(--a-surface-action-selected));
3037
3159
  color: var(--ac-toggle-group-selected-text, var(--a-text-on-action));
3160
+ font-weight: var(--a-font-weight-bold);
3038
3161
  }
3039
3162
  .navds-toggle-group--neutral > .navds-toggle-group__button[aria-pressed="true"],
3040
3163
  .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));
3164
+ background-color: var(--ac-toggle-group-neutral-selected-bg, var(--a-surface-neutral-selected));
3042
3165
  color: var(--ac-toggle-group-neutral-selected-text, var(--a-text-on-neutral));
3043
3166
  }
3044
3167
  .navds-toggle-group--small > .navds-toggle-group__button {
3045
- padding: 0.375rem;
3046
- min-height: 32px;
3168
+ padding: var(--a-spacing-05) var(--a-spacing-3);
3169
+ min-height: 26px;
3047
3170
  min-width: fit-content;
3048
3171
  }
3049
3172
  .navds-toggle-group__button > .navds-toggle-group__button-inner > svg {