@norges-domstoler/dds-components 21.3.1 → 21.4.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 (9) hide show
  1. package/dist/index.css +116 -22
  2. package/dist/index.css.map +1 -1
  3. package/dist/index.d.mts +64 -61
  4. package/dist/index.d.ts +64 -61
  5. package/dist/index.js +127 -54
  6. package/dist/index.js.map +1 -1
  7. package/dist/index.mjs +126 -54
  8. package/dist/index.mjs.map +1 -1
  9. package/package.json +7 -7
package/dist/index.css CHANGED
@@ -144,9 +144,20 @@
144
144
  --dds-color-text-link-visited: var( --dds-color-text-action-visited-on-inverse );
145
145
  --dds-color-text-label: var(--dds-color-text-on-inverse);
146
146
  --dds-color-text-helper: var(--dds-color-text-on-inverse);
147
- --dds-color-text-placeholder: var(--dds-color-text-subtle);
147
+ --dds-color-text-placeholder: var(--dds-color-text-on-inverse);
148
148
  --dds-color-icon-link: var(--dds-color-text-on-inverse);
149
+ --dds-color-text-default-inversable: var(--dds-color-text-on-inverse);
150
+ --dds-color-text-subtle-inversable: var(--dds-color-text-on-inverse);
151
+ --dds-color-text-medium-inversable: var(--dds-color-text-on-inverse);
152
+ --dds-color-text-action-resting-inversable: var(--dds-color-text-on-inverse);
153
+ --dds-color-text-action-hover-inversable: var(--dds-color-text-on-inverse);
154
+ --dds-color-text-requiredfield-inversable: var(--dds-color-text-on-inverse);
149
155
  color: var(--dds-color-text-on-inverse);
156
+ --dds-color-icon-default-inversable: var(--dds-color-text-on-inverse);
157
+ --dds-color-icon-subtle-inversable: var(--dds-color-text-on-inverse);
158
+ --dds-color-icon-medium-inversable: var(--dds-color-text-on-inverse);
159
+ --dds-color-icon-action-resting-inversable: var(--dds-color-icon-on-inverse);
160
+ --dds-color-icon-action-hover-inversable: var(--dds-color-icon-on-inverse);
150
161
  }
151
162
  :where(.typographyStyles_a) {
152
163
  font: inherit;
@@ -181,7 +192,7 @@
181
192
  }
182
193
  }
183
194
  .typographyStyles_a--visited:visited {
184
- color: var(--dds-color-text-action-visited);
195
+ color: var(--dds-color-text-link-visited);
185
196
  }
186
197
  :where(.typographyStyles_body-xsmall) {
187
198
  margin: 0;
@@ -349,17 +360,89 @@
349
360
  text-decoration: underline;
350
361
  }
351
362
  .typographyStyles_text-color--default {
352
- color: var(--dds-color-text-default);
363
+ color: var(--dds-color-text-default-inversable);
353
364
  }
354
365
  .typographyStyles_text-color--medium {
355
- color: var(--dds-color-text-medium);
366
+ color: var(--dds-color-text-medium-inversable);
356
367
  }
357
368
  .typographyStyles_text-color--subtle {
358
- color: var(--dds-color-text-subtle);
369
+ color: var(--dds-color-text-subtle-inversable);
370
+ }
371
+ .typographyStyles_text-color--requiredfield {
372
+ color: var(--dds-color-text-requiredfield-inversable);
373
+ }
374
+ .typographyStyles_text-color--action-resting {
375
+ color: var(--dds-color-text-action-resting-inversable);
376
+ }
377
+ .typographyStyles_text-color--action-hover:hover {
378
+ color: var(--dds-color-text-action-hover-inversable);
379
+ }
380
+ .typographyStyles_text-color--action-visited:visited {
381
+ color: var(--dds-color-text-link-visited);
382
+ }
383
+ .typographyStyles_text-color--on-action {
384
+ color: var(--dds-color-text-on-action);
385
+ }
386
+ .typographyStyles_text-color--on-status-default {
387
+ color: var(--dds-color-text-on-status-default);
388
+ }
389
+ .typographyStyles_text-color--on-status-strong {
390
+ color: var(--dds-color-text-on-status-strong);
391
+ }
392
+ .typographyStyles_text-color--on-notification {
393
+ color: var(--dds-color-text-on-notification);
359
394
  }
360
395
  .typographyStyles_text-color--on-inverse {
361
396
  color: var(--dds-color-text-on-inverse);
362
397
  }
398
+ .typographyStyles_icon-color--default {
399
+ color: var(--dds-color-icon-default-inversable);
400
+ }
401
+ .typographyStyles_icon-color--medium {
402
+ color: var(--dds-color-icon-medium-inversable);
403
+ }
404
+ .typographyStyles_icon-color--subtle {
405
+ color: var(--dds-color-icon-subtle-inversable);
406
+ }
407
+ .typographyStyles_icon-color--on-action {
408
+ color: var(--dds-color-icon-on-action);
409
+ }
410
+ .typographyStyles_icon-color--action-resting {
411
+ color: var(--dds-color-icon-action-resting-inversable);
412
+ }
413
+ .typographyStyles_icon-color--action-hover:hover {
414
+ color: var(--dds-color-icon-action-hover-inversable);
415
+ }
416
+ .typographyStyles_icon-color--on-action {
417
+ color: var(--dds-color-icon-on-action);
418
+ }
419
+ .typographyStyles_icon-color--on-info-default {
420
+ color: var(--dds-color-icon-on-info-default);
421
+ }
422
+ .typographyStyles_icon-color--on-info-strong {
423
+ color: var(--dds-color-icon-on-info-strong);
424
+ }
425
+ .typographyStyles_icon-color--on-success-default {
426
+ color: var(--dds-color-icon-on-success-default);
427
+ }
428
+ .typographyStyles_icon-color--on-success-strong {
429
+ color: var(--dds-color-icon-on-success-strong);
430
+ }
431
+ .typographyStyles_icon-color--on-danger-default {
432
+ color: var(--dds-color-icon-on-danger-default);
433
+ }
434
+ .typographyStyles_icon-color--on-danger-strong {
435
+ color: var(--dds-color-icon-on-danger-strong);
436
+ }
437
+ .typographyStyles_icon-color--on-warning-default {
438
+ color: var(--dds-color-icon-on-warning-default);
439
+ }
440
+ .typographyStyles_icon-color--on-warning-strong {
441
+ color: var(--dds-color-icon-on-warning-strong);
442
+ }
443
+ .typographyStyles_icon-color--on-inverse {
444
+ color: var(--dds-color-icon-on-inverse);
445
+ }
363
446
 
364
447
  /* src/components/helpers/styling/utilStyles.module.css */
365
448
  :where(.utilStyles_remove-list-styling) {
@@ -1948,7 +2031,7 @@
1948
2031
  border-color: var(--dds-color-border-subtle);
1949
2032
  }
1950
2033
  .Card_container--navigation:hover,
1951
- .Card_container--selection-control:has(input:enabled:not([aria-readonly])):hover {
2034
+ .Card_container--selection-control:has(input:enabled:not([aria-readonly=true])):hover {
1952
2035
  border-color: var(--dds-color-border-action-hover);
1953
2036
  box-shadow: inset 0 0 0 1px var(--dds-color-border-action-hover);
1954
2037
  }
@@ -1962,7 +2045,7 @@
1962
2045
  top: var(--dds-selection-control-card-control-top);
1963
2046
  }
1964
2047
  input:disabled,
1965
- input[aria-readonly] {
2048
+ input[aria-readonly=true] {
1966
2049
  & ~ span {
1967
2050
  background-color: var(--dds-color-surface-field-disabled);
1968
2051
  }
@@ -1977,7 +2060,7 @@
1977
2060
  box-shadow: inset 0 0 0 1px var(--dds-color-border-danger);
1978
2061
  }
1979
2062
  &:has(input:disabled),
1980
- &:has(input[aria-readonly]) {
2063
+ &:has(input[aria-readonly=true]) {
1981
2064
  box-shadow: none;
1982
2065
  background-color: var(--dds-color-surface-selected-default);
1983
2066
  background-color: var(--dds-color-surface-field-disabled);
@@ -2046,16 +2129,16 @@
2046
2129
  -webkit-user-select: none;
2047
2130
  -moz-user-select: none;
2048
2131
  user-select: none;
2049
- &:not(:hover) input[aria-invalid]:enabled:not([aria-readonly]):not(:focus-visible):not(:checked) ~ .SelectionControl_selection-control {
2132
+ &:not(:hover) input[aria-invalid]:enabled:not([aria-readonly=true]):not(:focus-visible):not(:checked) ~ .SelectionControl_selection-control {
2050
2133
  background-color: var(--dds-color-surface-danger-default);
2051
2134
  }
2052
2135
  }
2053
2136
  .SelectionControl_label:has(input:enabled) {
2054
- input[aria-invalid]:not([aria-readonly]):not(:focus-visible) ~ .SelectionControl_selection-control {
2137
+ input[aria-invalid]:not([aria-readonly=true]):not(:focus-visible) ~ .SelectionControl_selection-control {
2055
2138
  border-color: var(--dds-color-border-danger);
2056
2139
  box-shadow: inset 0 0 0 1px var(--dds-color-border-danger);
2057
2140
  }
2058
- &:hover input:not(:checked):not([aria-readonly]) ~ .SelectionControl_selection-control {
2141
+ &:hover input:not(:checked):not([aria-readonly=true]) ~ .SelectionControl_selection-control {
2059
2142
  background-color: var(--dds-color-surface-hover-default);
2060
2143
  box-shadow: inset 0 0 0 1px var(--dds-color-border-action-hover);
2061
2144
  border-color: var(--dds-color-border-action-hover);
@@ -2065,13 +2148,13 @@
2065
2148
  border-color: var(--dds-color-surface-action-selected);
2066
2149
  background-color: var(--dds-color-surface-action-selected);
2067
2150
  }
2068
- input:checked[aria-readonly] ~ .SelectionControl_selection-control,
2069
- input[data-indeterminate][aria-readonly] ~ .SelectionControl_selection-control {
2151
+ input:checked[aria-readonly=true] ~ .SelectionControl_selection-control,
2152
+ input[data-indeterminate][aria-readonly=true] ~ .SelectionControl_selection-control {
2070
2153
  border-color: var(--dds-color-surface-action-selected-disabled);
2071
2154
  background-color: var(--dds-color-surface-action-selected-disabled);
2072
2155
  }
2073
2156
  &:hover {
2074
- input:enabled:not([aria-readonly]) {
2157
+ input:enabled:not([aria-readonly=true]) {
2075
2158
  &:checked[type=checkbox],
2076
2159
  &[data-indeterminate] {
2077
2160
  ~ .SelectionControl_selection-control {
@@ -2126,7 +2209,7 @@ input[data-indeterminate] ~ .SelectionControl_selection-control:after {
2126
2209
  border-color: var(--dds-color-surface-action-selected-disabled);
2127
2210
  background-color: var(--dds-color-surface-action-selected-disabled);
2128
2211
  }
2129
- .SelectionControl_label:has(input[aria-readonly]) {
2212
+ .SelectionControl_label:has(input[aria-readonly=true]) {
2130
2213
  cursor: default;
2131
2214
  color: var(--dds-color-text-medium);
2132
2215
  input ~ .SelectionControl_selection-control {
@@ -2390,6 +2473,17 @@ input[data-indeterminate] ~ .SelectionControl_selection-control:after {
2390
2473
  --dds-color-text-placeholder: var(--dds-color-text-subtle);
2391
2474
  --dds-color-text-helper: var(--dds-color-text-subtle);
2392
2475
  --dds-color-icon-link: var(--dds-color-text-action-resting);
2476
+ --dds-color-text-subtle-inversable: var(--dds-color-text-subtle);
2477
+ --dds-color-text-default-inversable: var(--dds-color-text-default);
2478
+ --dds-color-text-medium-inversable: var(--dds-color-text-medium);
2479
+ --dds-color-text-action-resting-inversable: var( --dds-color-text-action-resting );
2480
+ --dds-color-text-action-hover-inversable: var(--dds-color-text-action-hover);
2481
+ --dds-color-text-requiredfield-inversable: var( --dds-color-text-requiredfield );
2482
+ --dds-color-icon-subtle-inversable: var(--dds-color-icon-subtle);
2483
+ --dds-color-icon-default-inversable: var(--dds-color-icon-default);
2484
+ --dds-color-icon-medium-inversable: var(--dds-color-icon-medium);
2485
+ --dds-color-icon-action-resting-inversable: var( --dds-color-icon-action-resting );
2486
+ --dds-color-icon-action-hover-inversable: var(--dds-color-icon-action-hover);
2393
2487
  --dds-focus-outline: var(--dds-color-focus-outside) 2px solid;
2394
2488
  --dds-focus-outline-offset: var(--dds-spacing-x0-125);
2395
2489
  --dds-focus-outline-inset: calc(0px - var(--dds-spacing-x0-25));
@@ -3977,10 +4071,10 @@ select:hover {
3977
4071
  input:checked ~ .Toggle_track > .Toggle_thumb {
3978
4072
  transform: translateX(1.25rem);
3979
4073
  }
3980
- input:checked:enabled:active:not([aria-disabled]):not([aria-readonly]) ~ .Toggle_track > .Toggle_thumb {
4074
+ input:checked:enabled:active:not([aria-disabled]):not([aria-readonly=true]) ~ .Toggle_track > .Toggle_thumb {
3981
4075
  transform: translateX(var(--dds-spacing-x1));
3982
4076
  }
3983
- input:enabled:active:not([aria-disabled]):not([aria-readonly]) ~ .Toggle_track > .Toggle_thumb {
4077
+ input:enabled:active:not([aria-disabled]):not([aria-readonly=true]) ~ .Toggle_track > .Toggle_thumb {
3984
4078
  width: 1.5rem;
3985
4079
  }
3986
4080
  }
@@ -3997,16 +4091,16 @@ select:hover {
3997
4091
  input:checked ~ .Toggle_track > .Toggle_thumb {
3998
4092
  transform: translateX(var(--dds-spacing-x1));
3999
4093
  }
4000
- input:checked:enabled:active:not([aria-disabled]):not([aria-readonly]) ~ .Toggle_track > .Toggle_thumb {
4094
+ input:checked:enabled:active:not([aria-disabled]):not([aria-readonly=true]) ~ .Toggle_track > .Toggle_thumb {
4001
4095
  transform: translateX(var(--dds-spacing-x0-75));
4002
4096
  }
4003
- input:enabled:active:not([aria-disabled]):not([aria-readonly]) ~ .Toggle_track > .Toggle_thumb {
4097
+ input:enabled:active:not([aria-disabled]):not([aria-readonly=true]) ~ .Toggle_track > .Toggle_thumb {
4004
4098
  width: var(--dds-spacing-x2);
4005
4099
  }
4006
4100
  }
4007
4101
  .Toggle_label,
4008
4102
  .Toggle_label--is-loading {
4009
- input:checked:enabled:not([aria-readonly]) ~ .Toggle_track {
4103
+ input:checked:enabled:not([aria-readonly=true]) ~ .Toggle_track {
4010
4104
  background-color: var(--dds-color-surface-action-selected);
4011
4105
  border-color: var(--dds-color-border-action-default);
4012
4106
  & > .Toggle_thumb {
@@ -4020,14 +4114,14 @@ select:hover {
4020
4114
  }
4021
4115
  .Toggle_label {
4022
4116
  cursor: pointer;
4023
- &:hover input:enabled:checked:not([aria-disabled]):not([aria-readonly]) ~ .Toggle_track {
4117
+ &:hover input:enabled:checked:not([aria-disabled]):not([aria-readonly=true]) ~ .Toggle_track {
4024
4118
  background-color: var(--dds-color-surface-action-hover);
4025
4119
  border-color: var(--dds-color-border-action-hover);
4026
4120
  .Toggle_thumb {
4027
4121
  border-color: var(--dds-color-border-action-hover);
4028
4122
  }
4029
4123
  }
4030
- &:hover input:enabled:not([aria-disabled]):not([aria-readonly]) ~ .Toggle_track {
4124
+ &:hover input:enabled:not([aria-disabled]):not([aria-readonly=true]) ~ .Toggle_track {
4031
4125
  background-color: var(--dds-color-surface-hover-default);
4032
4126
  border-color: var(--dds-color-border-action-hover);
4033
4127
  .Toggle_thumb {