@fremtind/jokul 5.0.0-next.7 → 5.0.0-next.8

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 (139) hide show
  1. package/build/build-stats.html +1 -1
  2. package/build/cjs/components/card/Card.cjs +1 -1
  3. package/build/cjs/components/card/Card.cjs.map +1 -1
  4. package/build/cjs/components/card/index.d.cts +1 -1
  5. package/build/cjs/components/card/types.cjs +1 -1
  6. package/build/cjs/components/card/types.cjs.map +1 -1
  7. package/build/cjs/components/card/types.d.cts +3 -6
  8. package/build/cjs/tokens.cjs +1 -1
  9. package/build/cjs/tokens.cjs.map +1 -1
  10. package/build/cjs/tokens.d.cts +25 -32
  11. package/build/es/components/card/Card.js +1 -1
  12. package/build/es/components/card/Card.js.map +1 -1
  13. package/build/es/components/card/index.d.ts +1 -1
  14. package/build/es/components/card/types.d.ts +3 -6
  15. package/build/es/components/card/types.js +1 -1
  16. package/build/es/components/card/types.js.map +1 -1
  17. package/build/es/tokens.d.ts +25 -32
  18. package/build/es/tokens.js +1 -1
  19. package/build/es/tokens.js.map +1 -1
  20. package/package.json +1 -1
  21. package/styles/base.css +550 -562
  22. package/styles/base.min.css +1 -1
  23. package/styles/components/autosuggest/autosuggest.css +2 -2
  24. package/styles/components/autosuggest/autosuggest.min.css +1 -1
  25. package/styles/components/autosuggest/autosuggest.scss +2 -2
  26. package/styles/components/beta/nav-link/navlink.css +1 -1
  27. package/styles/components/beta/nav-link/navlink.min.css +1 -1
  28. package/styles/components/beta/nav-link/navlink.scss +4 -2
  29. package/styles/components/button/button.css +2 -2
  30. package/styles/components/button/button.min.css +1 -1
  31. package/styles/components/button/button.scss +2 -2
  32. package/styles/components/card/card.css +3 -5
  33. package/styles/components/card/card.min.css +1 -1
  34. package/styles/components/card/card.scss +4 -7
  35. package/styles/components/checkbox/checkbox.css +1 -7
  36. package/styles/components/checkbox/checkbox.min.css +1 -1
  37. package/styles/components/checkbox/checkbox.scss +2 -8
  38. package/styles/components/checkbox-panel/checkbox-panel.css +2 -8
  39. package/styles/components/checkbox-panel/checkbox-panel.min.css +1 -1
  40. package/styles/components/chip/chip.css +4 -4
  41. package/styles/components/chip/chip.min.css +1 -1
  42. package/styles/components/chip/chip.scss +5 -5
  43. package/styles/components/combobox/combobox.css +7 -8
  44. package/styles/components/combobox/combobox.min.css +1 -1
  45. package/styles/components/combobox/combobox.scss +6 -12
  46. package/styles/components/countdown/countdown.css +2 -2
  47. package/styles/components/countdown/countdown.min.css +1 -1
  48. package/styles/components/datepicker/_calendar-date-button.scss +6 -4
  49. package/styles/components/datepicker/datepicker.css +3 -3
  50. package/styles/components/datepicker/datepicker.min.css +1 -1
  51. package/styles/components/expander/expandable.css +5 -2
  52. package/styles/components/expander/expandable.min.css +1 -1
  53. package/styles/components/expander/expandable.scss +6 -2
  54. package/styles/components/feedback/feedback.css +2 -2
  55. package/styles/components/feedback/feedback.min.css +1 -1
  56. package/styles/components/file-input/file-input.css +11 -11
  57. package/styles/components/file-input/file-input.min.css +1 -1
  58. package/styles/components/help/help.css +2 -2
  59. package/styles/components/help/help.min.css +1 -1
  60. package/styles/components/help/help.scss +4 -4
  61. package/styles/components/icon/icon.css +4 -4
  62. package/styles/components/icon/icon.min.css +1 -1
  63. package/styles/components/icon/icon.scss +73 -73
  64. package/styles/components/icon-button/icon-button.css +1 -1
  65. package/styles/components/icon-button/icon-button.min.css +1 -1
  66. package/styles/components/icon-button/icon-button.scss +1 -1
  67. package/styles/components/input-group/input-group.css +2 -2
  68. package/styles/components/input-group/input-group.min.css +1 -1
  69. package/styles/components/input-panel/input-panel.css +1 -1
  70. package/styles/components/input-panel/input-panel.min.css +1 -1
  71. package/styles/components/input-panel/input-panel.scss +2 -3
  72. package/styles/components/link-list/link-list.css +2 -2
  73. package/styles/components/link-list/link-list.min.css +1 -1
  74. package/styles/components/link-list/link-list.scss +2 -2
  75. package/styles/components/loader/loader.css +6 -6
  76. package/styles/components/loader/loader.min.css +1 -1
  77. package/styles/components/loader/skeleton-loader.css +3 -3
  78. package/styles/components/loader/skeleton-loader.min.css +1 -1
  79. package/styles/components/menu/_menu-item.scss +2 -2
  80. package/styles/components/menu/menu.css +2 -2
  81. package/styles/components/menu/menu.min.css +1 -1
  82. package/styles/components/message/message.css +3 -3
  83. package/styles/components/message/message.min.css +1 -1
  84. package/styles/components/message/message.scss +3 -6
  85. package/styles/components/pagination/pagination.css +2 -2
  86. package/styles/components/pagination/pagination.min.css +1 -1
  87. package/styles/components/pagination/pagination.scss +2 -2
  88. package/styles/components/progress-bar/progress-bar.css +1 -1
  89. package/styles/components/progress-bar/progress-bar.min.css +1 -1
  90. package/styles/components/radio-button/radio-button.css +1 -1
  91. package/styles/components/radio-button/radio-button.min.css +1 -1
  92. package/styles/components/radio-button/radio-button.scss +1 -1
  93. package/styles/components/radio-panel/radio-panel.css +1 -1
  94. package/styles/components/radio-panel/radio-panel.min.css +1 -1
  95. package/styles/components/segmented-control/segmented-control.css +13 -13
  96. package/styles/components/segmented-control/segmented-control.min.css +1 -1
  97. package/styles/components/segmented-control/segmented-control.scss +2 -2
  98. package/styles/components/select/select.css +2 -3
  99. package/styles/components/select/select.min.css +1 -1
  100. package/styles/components/select/select.scss +14 -19
  101. package/styles/components/system-message/system-message.css +5 -5
  102. package/styles/components/system-message/system-message.min.css +1 -1
  103. package/styles/components/system-message/system-message.scss +119 -118
  104. package/styles/components/table/_table-row.scss +3 -1
  105. package/styles/components/table/table.css +3 -1
  106. package/styles/components/table/table.min.css +1 -1
  107. package/styles/components/tabs/tabs.css +2 -2
  108. package/styles/components/tabs/tabs.min.css +1 -1
  109. package/styles/components/tabs/tabs.scss +3 -4
  110. package/styles/components/tag/tag.scss +2 -1
  111. package/styles/components/text-area/text-area.css +4 -4
  112. package/styles/components/text-area/text-area.min.css +1 -1
  113. package/styles/components/text-input/text-input.css +4 -4
  114. package/styles/components/text-input/text-input.min.css +1 -1
  115. package/styles/components/toast/toast.css +5 -5
  116. package/styles/components/toast/toast.min.css +1 -1
  117. package/styles/components/toast/toast.scss +4 -6
  118. package/styles/components/toggle-switch/toggle-switch.css +4 -9
  119. package/styles/components/toggle-switch/toggle-switch.min.css +1 -3
  120. package/styles/components/toggle-switch/toggle-switch.scss +4 -9
  121. package/styles/components/tooltip/tooltip.css +4 -4
  122. package/styles/components/tooltip/tooltip.min.css +1 -1
  123. package/styles/components/tooltip/tooltip.scss +4 -4
  124. package/styles/components.css +97 -107
  125. package/styles/components.min.css +1 -3
  126. package/styles/jkl/_tokens.scss +67 -73
  127. package/styles/shared/input/shared-input-styles.scss +5 -9
  128. package/styles/tailwind.css +110 -108
  129. package/styles/theme/_color-scheme.scss +110 -132
  130. package/styles/theme/brands/dnb/_color-scheme.scss +110 -108
  131. package/styles/theme/brands/eika/_color-scheme.scss +110 -108
  132. package/styles/theme/brands/fremtind/_color-scheme.scss +110 -108
  133. package/styles/theme/brands/sparebank1/_color-scheme.scss +110 -108
  134. package/build/cjs/tailwind/colors.cjs +0 -2
  135. package/build/cjs/tailwind/colors.cjs.map +0 -1
  136. package/build/cjs/tailwind/colors.d.cts +0 -39
  137. package/build/es/tailwind/colors.d.ts +0 -39
  138. package/build/es/tailwind/colors.js +0 -2
  139. package/build/es/tailwind/colors.js.map +0 -1
package/styles/base.css CHANGED
@@ -428,138 +428,118 @@
428
428
  :root {
429
429
  color-scheme: light dark;
430
430
  /* stylelint-disable declaration-block-no-duplicate-custom-properties -- fallback and light-dark() declarations are intentionally paired. */
431
- --jkl-color-neutral-background-page: #F4F2EF;
432
- --jkl-color-neutral-background-page: light-dark(#F4F2EF, #1B1917);
433
- --jkl-color-neutral-background-container: #F9F9F9;
434
- --jkl-color-neutral-background-container: light-dark(#F9F9F9, #313030);
435
- --jkl-color-neutral-background-action: #1B1917;
436
- --jkl-color-neutral-background-action: light-dark(#1B1917, #F9F9F9);
437
- --jkl-color-neutral-text-default: #1B1917;
438
- --jkl-color-neutral-text-default: light-dark(#1B1917, #F9F9F9);
439
- --jkl-color-neutral-text-subdued: #636060;
440
- --jkl-color-neutral-text-subdued: light-dark(#636060, #C8C5C3);
441
- --jkl-color-neutral-text-on-action: #F9F9F9;
442
- --jkl-color-neutral-text-on-action: light-dark(#F9F9F9, #1B1917);
443
- --jkl-color-neutral-border-strong: #1B1917;
444
- --jkl-color-neutral-border-strong: light-dark(#1B1917, #F9F9F9);
445
- --jkl-color-neutral-border-default: #636060;
446
- --jkl-color-neutral-border-default: light-dark(#636060, #C8C5C3);
447
- --jkl-color-neutral-border-subdued: #C8C5C3;
448
- --jkl-color-neutral-border-subdued: light-dark(#C8C5C3, #636060);
449
- --jkl-color-accent-background-page: #F4F2EF;
450
- --jkl-color-accent-background-page: light-dark(#F4F2EF, #1B1917);
451
- --jkl-color-accent-background-container: #F9F9F9;
452
- --jkl-color-accent-background-container: light-dark(#F9F9F9, #313030);
453
- --jkl-color-accent-background-action: #1B1917;
454
- --jkl-color-accent-background-action: light-dark(#1B1917, #F9F9F9);
455
- --jkl-color-accent-text-default: #1B1917;
456
- --jkl-color-accent-text-default: light-dark(#1B1917, #F9F9F9);
457
- --jkl-color-accent-text-subdued: #636060;
458
- --jkl-color-accent-text-subdued: light-dark(#636060, #C8C5C3);
459
- --jkl-color-accent-text-on-action: #F9F9F9;
460
- --jkl-color-accent-text-on-action: light-dark(#F9F9F9, #1B1917);
461
- --jkl-color-accent-border-strong: #1B1917;
462
- --jkl-color-accent-border-strong: light-dark(#1B1917, #F9F9F9);
463
- --jkl-color-accent-border-default: #636060;
464
- --jkl-color-accent-border-default: light-dark(#636060, #C8C5C3);
465
- --jkl-color-accent-border-subdued: #C8C5C3;
466
- --jkl-color-accent-border-subdued: light-dark(#C8C5C3, #636060);
467
- --jkl-color-warning-background-page: #FCF7E8;
468
- --jkl-color-warning-background-page: light-dark(#FCF7E8, #392B10);
469
- --jkl-color-warning-background-container: #F7EBC2;
470
- --jkl-color-warning-background-container: light-dark(#F7EBC2, #5A4519);
471
- --jkl-color-warning-background-action: #B98900;
472
- --jkl-color-warning-background-action: light-dark(#B98900, #E4B63A);
473
- --jkl-color-warning-text-default: #5B4200;
474
- --jkl-color-warning-text-default: light-dark(#5B4200, #FFF5D9);
475
- --jkl-color-warning-text-subdued: #8B6B22;
476
- --jkl-color-warning-text-subdued: light-dark(#8B6B22, #EEDFAE);
477
- --jkl-color-warning-text-on-action: #1B1917;
478
- --jkl-color-warning-text-on-action: light-dark(#1B1917, #1B1917);
479
- --jkl-color-warning-border-strong: #B98900;
480
- --jkl-color-warning-border-strong: light-dark(#B98900, #E4B63A);
481
- --jkl-color-warning-border-default: #B98900;
482
- --jkl-color-warning-border-default: light-dark(#B98900, #E4B63A);
483
- --jkl-color-warning-border-subdued: #DECC8D;
484
- --jkl-color-warning-border-subdued: light-dark(#DECC8D, #8B6B22);
485
- --jkl-color-success-background-page: #EEF7F0;
486
- --jkl-color-success-background-page: light-dark(#EEF7F0, #173122);
487
- --jkl-color-success-background-container: #D7EADB;
488
- --jkl-color-success-background-container: light-dark(#D7EADB, #234530);
489
- --jkl-color-success-background-action: #2E8C4A;
490
- --jkl-color-success-background-action: light-dark(#2E8C4A, #67B479);
491
- --jkl-color-success-text-default: #1E5D31;
492
- --jkl-color-success-text-default: light-dark(#1E5D31, #F1FBF3);
493
- --jkl-color-success-text-subdued: #507A5B;
494
- --jkl-color-success-text-subdued: light-dark(#507A5B, #C9DDCE);
495
- --jkl-color-success-text-on-action: #F9F9F9;
496
- --jkl-color-success-text-on-action: light-dark(#F9F9F9, #1B1917);
497
- --jkl-color-success-border-strong: #2E8C4A;
498
- --jkl-color-success-border-strong: light-dark(#2E8C4A, #67B479);
499
- --jkl-color-success-border-default: #2E8C4A;
500
- --jkl-color-success-border-default: light-dark(#2E8C4A, #67B479);
501
- --jkl-color-success-border-subdued: #94B79B;
502
- --jkl-color-success-border-subdued: light-dark(#94B79B, #507A5B);
503
- --jkl-color-info-background-page: #EEF5FE;
504
- --jkl-color-info-background-page: light-dark(#EEF5FE, #162A40);
505
- --jkl-color-info-background-container: #DDEBFB;
506
- --jkl-color-info-background-container: light-dark(#DDEBFB, #264261);
507
- --jkl-color-info-background-action: #4AA3F0;
508
- --jkl-color-info-background-action: light-dark(#4AA3F0, #7EBEF4);
509
- --jkl-color-info-text-default: #1B3B60;
510
- --jkl-color-info-text-default: light-dark(#1B3B60, #F5FAFF);
511
- --jkl-color-info-text-subdued: #4E6C8E;
512
- --jkl-color-info-text-subdued: light-dark(#4E6C8E, #D7E9F8);
513
- --jkl-color-info-text-on-action: #F9F9F9;
514
- --jkl-color-info-text-on-action: light-dark(#F9F9F9, #1B1917);
515
- --jkl-color-info-border-strong: #4AA3F0;
516
- --jkl-color-info-border-strong: light-dark(#4AA3F0, #7EBEF4);
517
- --jkl-color-info-border-default: #4AA3F0;
518
- --jkl-color-info-border-default: light-dark(#4AA3F0, #7EBEF4);
519
- --jkl-color-info-border-subdued: #A9A9CA;
520
- --jkl-color-info-border-subdued: light-dark(#A9A9CA, #4E6C8E);
521
- --jkl-color-error-background-page: #FDEEEE;
522
- --jkl-color-error-background-page: light-dark(#FDEEEE, #3A1C1C);
523
- --jkl-color-error-background-container: #F8D1D1;
524
- --jkl-color-error-background-container: light-dark(#F8D1D1, #5B2828);
525
- --jkl-color-error-background-action: #E84B3C;
526
- --jkl-color-error-background-action: light-dark(#E84B3C, #F27B70);
527
- --jkl-color-error-text-default: #7B1F18;
528
- --jkl-color-error-text-default: light-dark(#7B1F18, #FFF1EF);
529
- --jkl-color-error-text-subdued: #A14E46;
530
- --jkl-color-error-text-subdued: light-dark(#A14E46, #F1C8C4);
531
- --jkl-color-error-text-on-action: #F9F9F9;
532
- --jkl-color-error-text-on-action: light-dark(#F9F9F9, #1B1917);
533
- --jkl-color-error-border-strong: #E84B3C;
534
- --jkl-color-error-border-strong: light-dark(#E84B3C, #F27B70);
535
- --jkl-color-error-border-default: #E84B3C;
536
- --jkl-color-error-border-default: light-dark(#E84B3C, #F27B70);
537
- --jkl-color-error-border-subdued: #DE9E9E;
538
- --jkl-color-error-border-subdued: light-dark(#DE9E9E, #A14E46);
431
+ --jkl-color-background-page: #F3F0ED;
432
+ --jkl-color-background-page: light-dark(#F3F0ED, #0E0D0C);
433
+ --jkl-color-background-container: #FFFFFF;
434
+ --jkl-color-background-container: light-dark(#FFFFFF, #3E3A36);
435
+ --jkl-color-background-container-accent: #E6E2DB;
436
+ --jkl-color-background-container-accent: light-dark(#E6E2DB, #2A2724);
437
+ --jkl-color-background-contrast: #1B1917;
438
+ --jkl-color-background-contrast: light-dark(#1B1917, #F3F0ED);
439
+ --jkl-color-text-default: #1B1917;
440
+ --jkl-color-text-default: light-dark(#1B1917, #F9F9F9);
441
+ --jkl-color-text-subdued: #636060;
442
+ --jkl-color-text-subdued: light-dark(#636060, #C8C5C3);
443
+ --jkl-color-text-accent: #000000;
444
+ --jkl-color-text-accent: light-dark(#000000, #FFFFFF);
445
+ --jkl-color-text-on-contrast: #F9F9F9;
446
+ --jkl-color-text-on-contrast: light-dark(#F9F9F9, #1B1917);
447
+ --jkl-color-border-default: #636060;
448
+ --jkl-color-border-default: light-dark(#636060, #C8C5C3);
449
+ --jkl-color-border-subdued: #C8C5C3;
450
+ --jkl-color-border-subdued: light-dark(#C8C5C3, #636060);
451
+ --jkl-color-border-strong: #1B1917;
452
+ --jkl-color-border-strong: light-dark(#1B1917, #F9F9F9);
453
+ --jkl-color-warning-background-page: #FFFFFF;
454
+ --jkl-color-warning-background-page: light-dark(#FFFFFF, #000000);
455
+ --jkl-color-warning-background-container: #F1DFD1;
456
+ --jkl-color-warning-background-container: light-dark(#F1DFD1, #61441F);
457
+ --jkl-color-warning-background-container-accent: #EAC7A8;
458
+ --jkl-color-warning-background-container-accent: light-dark(#EAC7A8, #75542B);
459
+ --jkl-color-warning-background-contrast: #8B6539;
460
+ --jkl-color-warning-background-contrast: light-dark(#8B6539, #8B6539);
461
+ --jkl-color-warning-text-default: #000000;
462
+ --jkl-color-warning-text-default: light-dark(#000000, #FFFFFF);
463
+ --jkl-color-warning-text-subdued: #3E3A36;
464
+ --jkl-color-warning-text-subdued: light-dark(#3E3A36, #DFD8CE);
465
+ --jkl-color-warning-text-accent: #000000;
466
+ --jkl-color-warning-text-accent: light-dark(#000000, #FFFFFF);
467
+ --jkl-color-warning-text-on-contrast: #FFFFFF;
468
+ --jkl-color-warning-text-on-contrast: light-dark(#FFFFFF, #000000);
469
+ --jkl-color-warning-border-default: #A17747;
470
+ --jkl-color-warning-border-default: light-dark(#A17747, #B68957);
471
+ --jkl-color-warning-border-subdued: #E3B07A;
472
+ --jkl-color-warning-border-subdued: light-dark(#E3B07A, #75542B);
473
+ --jkl-color-warning-border-strong: #61441F;
474
+ --jkl-color-warning-border-strong: light-dark(#61441F, #A17747);
475
+ --jkl-color-success-background-page: #FFFFFF;
476
+ --jkl-color-success-background-page: light-dark(#FFFFFF, #000000);
477
+ --jkl-color-success-background-container: #C6E6CD;
478
+ --jkl-color-success-background-container: light-dark(#C6E6CD, #15341E);
479
+ --jkl-color-success-background-container-accent: #ACD3B5;
480
+ --jkl-color-success-background-container-accent: light-dark(#ACD3B5, #24492E);
481
+ --jkl-color-success-background-contrast: #345F40;
482
+ --jkl-color-success-background-contrast: light-dark(#345F40, #467653);
483
+ --jkl-color-success-text-default: #000000;
484
+ --jkl-color-success-text-default: light-dark(#000000, #FFFFFF);
485
+ --jkl-color-success-text-subdued: #3E3A36;
486
+ --jkl-color-success-text-subdued: light-dark(#3E3A36, #DFD8CE);
487
+ --jkl-color-success-text-accent: #000000;
488
+ --jkl-color-success-text-accent: light-dark(#000000, #FFFFFF);
489
+ --jkl-color-success-text-on-contrast: #FFFFFF;
490
+ --jkl-color-success-text-on-contrast: light-dark(#FFFFFF, #000000);
491
+ --jkl-color-success-border-default: #467653;
492
+ --jkl-color-success-border-default: light-dark(#467653, #598D67);
493
+ --jkl-color-success-border-subdued: #8CBC98;
494
+ --jkl-color-success-border-subdued: light-dark(#8CBC98, #24492E);
495
+ --jkl-color-success-border-strong: #15341E;
496
+ --jkl-color-success-border-strong: light-dark(#15341E, #467653);
497
+ --jkl-color-info-background-page: #FFFFFF;
498
+ --jkl-color-info-background-page: light-dark(#FFFFFF, #000000);
499
+ --jkl-color-info-background-container: #E3E3F4;
500
+ --jkl-color-info-background-container: light-dark(#E3E3F4, #1E1E81);
501
+ --jkl-color-info-background-container-accent: #D3D3F6;
502
+ --jkl-color-info-background-container-accent: light-dark(#D3D3F6, #2D2DB3);
503
+ --jkl-color-info-background-contrast: #4646D1;
504
+ --jkl-color-info-background-contrast: light-dark(#4646D1, #6262DC);
505
+ --jkl-color-info-text-default: #000000;
506
+ --jkl-color-info-text-default: light-dark(#000000, #FFFFFF);
507
+ --jkl-color-info-text-subdued: #3E3A36;
508
+ --jkl-color-info-text-subdued: light-dark(#3E3A36, #DFD8CE);
509
+ --jkl-color-info-text-accent: #000000;
510
+ --jkl-color-info-text-accent: light-dark(#000000, #FFFFFF);
511
+ --jkl-color-info-text-on-contrast: #FFFFFF;
512
+ --jkl-color-info-text-on-contrast: light-dark(#FFFFFF, #000000);
513
+ --jkl-color-info-border-default: #6262DC;
514
+ --jkl-color-info-border-default: light-dark(#6262DC, #7E7EE4);
515
+ --jkl-color-info-border-subdued: #B7B7F0;
516
+ --jkl-color-info-border-subdued: light-dark(#B7B7F0, #2D2DB3);
517
+ --jkl-color-info-border-strong: #1E1E81;
518
+ --jkl-color-info-border-strong: light-dark(#1E1E81, #6262DC);
519
+ --jkl-color-error-background-page: #FFFFFF;
520
+ --jkl-color-error-background-page: light-dark(#FFFFFF, #000000);
521
+ --jkl-color-error-background-container: #F3DEDE;
522
+ --jkl-color-error-background-container: light-dark(#F3DEDE, #610F0F);
523
+ --jkl-color-error-background-container-accent: #F2C9C9;
524
+ --jkl-color-error-background-container-accent: light-dark(#F2C9C9, #891919);
525
+ --jkl-color-error-background-contrast: #B32424;
526
+ --jkl-color-error-background-contrast: light-dark(#B32424, #DF3030);
527
+ --jkl-color-error-text-default: #000000;
528
+ --jkl-color-error-text-default: light-dark(#000000, #FFFFFF);
529
+ --jkl-color-error-text-subdued: #3E3A36;
530
+ --jkl-color-error-text-subdued: light-dark(#3E3A36, #DFD8CE);
531
+ --jkl-color-error-text-accent: #610F0F;
532
+ --jkl-color-error-text-accent: light-dark(#610F0F, #F6B3B3);
533
+ --jkl-color-error-text-on-contrast: #FFFFFF;
534
+ --jkl-color-error-text-on-contrast: light-dark(#FFFFFF, #FFFFFF);
535
+ --jkl-color-error-border-default: #DF3030;
536
+ --jkl-color-error-border-default: light-dark(#DF3030, #F15D5D);
537
+ --jkl-color-error-border-subdued: #F6B3B3;
538
+ --jkl-color-error-border-subdued: light-dark(#F6B3B3, #891919);
539
+ --jkl-color-error-border-strong: #610F0F;
540
+ --jkl-color-error-border-strong: light-dark(#610F0F, #DF3030);
539
541
  /* stylelint-enable declaration-block-no-duplicate-custom-properties */
540
542
  }
541
- :root, [data-variant=neutral] {
542
- --jkl-color-background-page: var(--jkl-color-neutral-background-page);
543
- --jkl-color-background-container: var(--jkl-color-neutral-background-container);
544
- --jkl-color-background-action: var(--jkl-color-neutral-background-action);
545
- --jkl-color-text-default: var(--jkl-color-neutral-text-default);
546
- --jkl-color-text-subdued: var(--jkl-color-neutral-text-subdued);
547
- --jkl-color-text-on-action: var(--jkl-color-neutral-text-on-action);
548
- --jkl-color-border-strong: var(--jkl-color-neutral-border-strong);
549
- --jkl-color-border-default: var(--jkl-color-neutral-border-default);
550
- --jkl-color-border-subdued: var(--jkl-color-neutral-border-subdued);
551
- }
552
- [data-variant=accent] {
553
- --jkl-color-background-page: var(--jkl-color-accent-background-page);
554
- --jkl-color-background-container: var(--jkl-color-accent-background-container);
555
- --jkl-color-background-action: var(--jkl-color-accent-background-action);
556
- --jkl-color-text-default: var(--jkl-color-accent-text-default);
557
- --jkl-color-text-subdued: var(--jkl-color-accent-text-subdued);
558
- --jkl-color-text-on-action: var(--jkl-color-accent-text-on-action);
559
- --jkl-color-border-strong: var(--jkl-color-accent-border-strong);
560
- --jkl-color-border-default: var(--jkl-color-accent-border-default);
561
- --jkl-color-border-subdued: var(--jkl-color-accent-border-subdued);
562
- }
563
543
  [data-theme=light] {
564
544
  color-scheme: light;
565
545
  }
@@ -714,114 +694,116 @@
714
694
  @layer jokul.theme {
715
695
  [data-brand=dnb] {
716
696
  /* stylelint-disable declaration-block-no-duplicate-custom-properties -- fallback and light-dark() declarations are intentionally paired. */
717
- --jkl-color-neutral-background-page: #F8F8F8;
718
- --jkl-color-neutral-background-page: light-dark(#F8F8F8, #000000);
719
- --jkl-color-neutral-background-container: #FFFFFF;
720
- --jkl-color-neutral-background-container: light-dark(#FFFFFF, #333333);
721
- --jkl-color-neutral-background-action: #000000;
722
- --jkl-color-neutral-background-action: light-dark(#000000, #FFFFFF);
723
- --jkl-color-neutral-text-default: #000000;
724
- --jkl-color-neutral-text-default: light-dark(#000000, #FFFFFF);
725
- --jkl-color-neutral-text-subdued: #737373;
726
- --jkl-color-neutral-text-subdued: light-dark(#737373, #CCCCCC);
727
- --jkl-color-neutral-text-on-action: #FFFFFF;
728
- --jkl-color-neutral-text-on-action: light-dark(#FFFFFF, #000000);
729
- --jkl-color-neutral-border-strong: #000000;
730
- --jkl-color-neutral-border-strong: light-dark(#000000, #FFFFFF);
731
- --jkl-color-neutral-border-default: #737373;
732
- --jkl-color-neutral-border-default: light-dark(#737373, #CCCCCC);
733
- --jkl-color-neutral-border-subdued: #CCCCCC;
734
- --jkl-color-neutral-border-subdued: light-dark(#CCCCCC, #737373);
735
- --jkl-color-accent-background-page: #F4F2EF;
736
- --jkl-color-accent-background-page: light-dark(#F4F2EF, #1B1917);
737
- --jkl-color-accent-background-container: #F9F9F9;
738
- --jkl-color-accent-background-container: light-dark(#F9F9F9, #313030);
739
- --jkl-color-accent-background-action: #007272;
740
- --jkl-color-accent-background-action: light-dark(#007272, #A5E1D2);
741
- --jkl-color-accent-text-default: #40342C;
742
- --jkl-color-accent-text-default: light-dark(#40342C, #F3E9E0);
743
- --jkl-color-accent-text-subdued: #6B5B4F;
744
- --jkl-color-accent-text-subdued: light-dark(#6B5B4F, #D2BDAE);
745
- --jkl-color-accent-text-on-action: #F9F9F9;
746
- --jkl-color-accent-text-on-action: light-dark(#F9F9F9, #1B1917);
747
- --jkl-color-accent-border-strong: #007272;
748
- --jkl-color-accent-border-strong: light-dark(#007272, #A5E1D2);
749
- --jkl-color-accent-border-default: #007272;
750
- --jkl-color-accent-border-default: light-dark(#007272, #A5E1D2);
751
- --jkl-color-accent-border-subdued: #B3D5D5;
752
- --jkl-color-accent-border-subdued: light-dark(#B3D5D5, #D2F0E9);
753
- --jkl-color-warning-background-page: #FCF7E8;
754
- --jkl-color-warning-background-page: light-dark(#FCF7E8, #392B10);
755
- --jkl-color-warning-background-container: #F7EBC2;
756
- --jkl-color-warning-background-container: light-dark(#F7EBC2, #5A4519);
757
- --jkl-color-warning-background-action: #B98900;
758
- --jkl-color-warning-background-action: light-dark(#B98900, #E4B63A);
759
- --jkl-color-warning-text-default: #5B4200;
760
- --jkl-color-warning-text-default: light-dark(#5B4200, #FFF5D9);
761
- --jkl-color-warning-text-subdued: #8B6B22;
762
- --jkl-color-warning-text-subdued: light-dark(#8B6B22, #EEDFAE);
763
- --jkl-color-warning-text-on-action: #1B1917;
764
- --jkl-color-warning-text-on-action: light-dark(#1B1917, #1B1917);
765
- --jkl-color-warning-border-strong: #B98900;
766
- --jkl-color-warning-border-strong: light-dark(#B98900, #E4B63A);
767
- --jkl-color-warning-border-default: #B98900;
768
- --jkl-color-warning-border-default: light-dark(#B98900, #E4B63A);
769
- --jkl-color-warning-border-subdued: #DECC8D;
770
- --jkl-color-warning-border-subdued: light-dark(#DECC8D, #8B6B22);
771
- --jkl-color-success-background-page: #EEF7F0;
772
- --jkl-color-success-background-page: light-dark(#EEF7F0, #173122);
773
- --jkl-color-success-background-container: #D7EADB;
774
- --jkl-color-success-background-container: light-dark(#D7EADB, #234530);
775
- --jkl-color-success-background-action: #2E8C4A;
776
- --jkl-color-success-background-action: light-dark(#2E8C4A, #67B479);
777
- --jkl-color-success-text-default: #1E5D31;
778
- --jkl-color-success-text-default: light-dark(#1E5D31, #F1FBF3);
779
- --jkl-color-success-text-subdued: #507A5B;
780
- --jkl-color-success-text-subdued: light-dark(#507A5B, #C9DDCE);
781
- --jkl-color-success-text-on-action: #F9F9F9;
782
- --jkl-color-success-text-on-action: light-dark(#F9F9F9, #1B1917);
783
- --jkl-color-success-border-strong: #2E8C4A;
784
- --jkl-color-success-border-strong: light-dark(#2E8C4A, #67B479);
785
- --jkl-color-success-border-default: #2E8C4A;
786
- --jkl-color-success-border-default: light-dark(#2E8C4A, #67B479);
787
- --jkl-color-success-border-subdued: #94B79B;
788
- --jkl-color-success-border-subdued: light-dark(#94B79B, #507A5B);
789
- --jkl-color-info-background-page: #EEF5FE;
790
- --jkl-color-info-background-page: light-dark(#EEF5FE, #162A40);
791
- --jkl-color-info-background-container: #DDEBFB;
792
- --jkl-color-info-background-container: light-dark(#DDEBFB, #264261);
793
- --jkl-color-info-background-action: #4AA3F0;
794
- --jkl-color-info-background-action: light-dark(#4AA3F0, #7EBEF4);
795
- --jkl-color-info-text-default: #1B3B60;
796
- --jkl-color-info-text-default: light-dark(#1B3B60, #F5FAFF);
797
- --jkl-color-info-text-subdued: #4E6C8E;
798
- --jkl-color-info-text-subdued: light-dark(#4E6C8E, #D7E9F8);
799
- --jkl-color-info-text-on-action: #F9F9F9;
800
- --jkl-color-info-text-on-action: light-dark(#F9F9F9, #1B1917);
801
- --jkl-color-info-border-strong: #4AA3F0;
802
- --jkl-color-info-border-strong: light-dark(#4AA3F0, #7EBEF4);
803
- --jkl-color-info-border-default: #4AA3F0;
804
- --jkl-color-info-border-default: light-dark(#4AA3F0, #7EBEF4);
805
- --jkl-color-info-border-subdued: #A9A9CA;
806
- --jkl-color-info-border-subdued: light-dark(#A9A9CA, #4E6C8E);
807
- --jkl-color-error-background-page: #FDEEEE;
808
- --jkl-color-error-background-page: light-dark(#FDEEEE, #3A1C1C);
809
- --jkl-color-error-background-container: #F8D1D1;
810
- --jkl-color-error-background-container: light-dark(#F8D1D1, #5B2828);
811
- --jkl-color-error-background-action: #E84B3C;
812
- --jkl-color-error-background-action: light-dark(#E84B3C, #F27B70);
813
- --jkl-color-error-text-default: #7B1F18;
814
- --jkl-color-error-text-default: light-dark(#7B1F18, #FFF1EF);
815
- --jkl-color-error-text-subdued: #A14E46;
816
- --jkl-color-error-text-subdued: light-dark(#A14E46, #F1C8C4);
817
- --jkl-color-error-text-on-action: #F9F9F9;
818
- --jkl-color-error-text-on-action: light-dark(#F9F9F9, #1B1917);
819
- --jkl-color-error-border-strong: #E84B3C;
820
- --jkl-color-error-border-strong: light-dark(#E84B3C, #F27B70);
821
- --jkl-color-error-border-default: #E84B3C;
822
- --jkl-color-error-border-default: light-dark(#E84B3C, #F27B70);
823
- --jkl-color-error-border-subdued: #DE9E9E;
824
- --jkl-color-error-border-subdued: light-dark(#DE9E9E, #A14E46);
697
+ --jkl-color-background-page: #FFFFFF;
698
+ --jkl-color-background-page: light-dark(#FFFFFF, #FFFFFF);
699
+ --jkl-color-background-container: #D8F3EC;
700
+ --jkl-color-background-container: light-dark(#D8F3EC, #D8F3EC);
701
+ --jkl-color-background-container-accent: #A5E1D2;
702
+ --jkl-color-background-container-accent: light-dark(#A5E1D2, #A5E1D2);
703
+ --jkl-color-background-contrast: #007272;
704
+ --jkl-color-background-contrast: light-dark(#007272, #007272);
705
+ --jkl-color-text-default: #333333;
706
+ --jkl-color-text-default: light-dark(#333333, #333333);
707
+ --jkl-color-text-subdued: #737373;
708
+ --jkl-color-text-subdued: light-dark(#737373, #737373);
709
+ --jkl-color-text-accent: #FFFFFF;
710
+ --jkl-color-text-accent: light-dark(#FFFFFF, #FFFFFF);
711
+ --jkl-color-text-on-contrast: #FFFFFF;
712
+ --jkl-color-text-on-contrast: light-dark(#FFFFFF, #FFFFFF);
713
+ --jkl-color-border-default: #007272;
714
+ --jkl-color-border-default: light-dark(#007272, #007272);
715
+ --jkl-color-border-subdued: #FFFFFF;
716
+ --jkl-color-border-subdued: light-dark(#FFFFFF, #F7F4F2);
717
+ --jkl-color-border-strong: #FFFFFF;
718
+ --jkl-color-border-strong: light-dark(#FFFFFF, #FFFFFF);
719
+ --jkl-color-warning-background-page: #FFFFFF;
720
+ --jkl-color-warning-background-page: light-dark(#FFFFFF, #FFFFFF);
721
+ --jkl-color-warning-background-container: #FBF6EC;
722
+ --jkl-color-warning-background-container: light-dark(#FBF6EC, #FBF6EC);
723
+ --jkl-color-warning-background-container-accent: #FFFFFF;
724
+ --jkl-color-warning-background-container-accent: light-dark(#FFFFFF, #FFFFFF);
725
+ --jkl-color-warning-background-contrast: #FDBB31;
726
+ --jkl-color-warning-background-contrast: light-dark(#FDBB31, #FDBB31);
727
+ --jkl-color-warning-text-default: #333333;
728
+ --jkl-color-warning-text-default: light-dark(#333333, #333333);
729
+ --jkl-color-warning-text-subdued: #737373;
730
+ --jkl-color-warning-text-subdued: light-dark(#737373, #737373);
731
+ --jkl-color-warning-text-accent: #805B0E;
732
+ --jkl-color-warning-text-accent: light-dark(#805B0E, #805B0E);
733
+ --jkl-color-warning-text-on-contrast: #FFFFFF;
734
+ --jkl-color-warning-text-on-contrast: light-dark(#FFFFFF, #FFFFFF);
735
+ --jkl-color-warning-border-default: #FDBB31;
736
+ --jkl-color-warning-border-default: light-dark(#FDBB31, #FDBB31);
737
+ --jkl-color-warning-border-subdued: #FFFFFF;
738
+ --jkl-color-warning-border-subdued: light-dark(#FFFFFF, #FFFFFF);
739
+ --jkl-color-warning-border-strong: #FFFFFF;
740
+ --jkl-color-warning-border-strong: light-dark(#FFFFFF, #FFFFFF);
741
+ --jkl-color-success-background-page: #FFFFFF;
742
+ --jkl-color-success-background-page: light-dark(#FFFFFF, #FFFFFF);
743
+ --jkl-color-success-background-container: #EBF4F2;
744
+ --jkl-color-success-background-container: light-dark(#EBF4F2, #EBF4F2);
745
+ --jkl-color-success-background-container-accent: #FFFFFF;
746
+ --jkl-color-success-background-container-accent: light-dark(#FFFFFF, #FFFFFF);
747
+ --jkl-color-success-background-contrast: #007B5E;
748
+ --jkl-color-success-background-contrast: light-dark(#007B5E, #007B5E);
749
+ --jkl-color-success-text-default: #333333;
750
+ --jkl-color-success-text-default: light-dark(#333333, #333333);
751
+ --jkl-color-success-text-subdued: #737373;
752
+ --jkl-color-success-text-subdued: light-dark(#737373, #737373);
753
+ --jkl-color-success-text-accent: #28B482;
754
+ --jkl-color-success-text-accent: light-dark(#28B482, #28B482);
755
+ --jkl-color-success-text-on-contrast: #FFFFFF;
756
+ --jkl-color-success-text-on-contrast: light-dark(#FFFFFF, #FFFFFF);
757
+ --jkl-color-success-border-default: #007B5E;
758
+ --jkl-color-success-border-default: light-dark(#007B5E, #007B5E);
759
+ --jkl-color-success-border-subdued: #FFFFFF;
760
+ --jkl-color-success-border-subdued: light-dark(#FFFFFF, #FFFFFF);
761
+ --jkl-color-success-border-strong: #FFFFFF;
762
+ --jkl-color-success-border-strong: light-dark(#FFFFFF, #FFFFFF);
763
+ --jkl-color-info-background-page: #FFFFFF;
764
+ --jkl-color-info-background-page: light-dark(#FFFFFF, #FFFFFF);
765
+ --jkl-color-info-background-container: #FFFFFF;
766
+ --jkl-color-info-background-container: light-dark(#FFFFFF, #FFFFFF);
767
+ --jkl-color-info-background-container-accent: #FFFFFF;
768
+ --jkl-color-info-background-container-accent: light-dark(#FFFFFF, #FFFFFF);
769
+ --jkl-color-info-background-contrast: #007272;
770
+ --jkl-color-info-background-contrast: light-dark(#007272, #007272);
771
+ --jkl-color-info-text-default: #333333;
772
+ --jkl-color-info-text-default: light-dark(#333333, #333333);
773
+ --jkl-color-info-text-subdued: #737373;
774
+ --jkl-color-info-text-subdued: light-dark(#737373, #737373);
775
+ --jkl-color-info-text-accent: #FFFFFF;
776
+ --jkl-color-info-text-accent: light-dark(#FFFFFF, #FFFFFF);
777
+ --jkl-color-info-text-on-contrast: #FFFFFF;
778
+ --jkl-color-info-text-on-contrast: light-dark(#FFFFFF, #FFFFFF);
779
+ --jkl-color-info-border-default: #007272;
780
+ --jkl-color-info-border-default: light-dark(#007272, #007272);
781
+ --jkl-color-info-border-subdued: #FFFFFF;
782
+ --jkl-color-info-border-subdued: light-dark(#FFFFFF, #FFFFFF);
783
+ --jkl-color-info-border-strong: #FFFFFF;
784
+ --jkl-color-info-border-strong: light-dark(#FFFFFF, #FFFFFF);
785
+ --jkl-color-error-background-page: #FFFFFF;
786
+ --jkl-color-error-background-page: light-dark(#FFFFFF, #FFFFFF);
787
+ --jkl-color-error-background-container: #FCEEEE;
788
+ --jkl-color-error-background-container: light-dark(#FCEEEE, #FCEEEE);
789
+ --jkl-color-error-background-container-accent: #FFFFFF;
790
+ --jkl-color-error-background-container-accent: light-dark(#FFFFFF, #FFFFFF);
791
+ --jkl-color-error-background-contrast: #D52525;
792
+ --jkl-color-error-background-contrast: light-dark(#D52525, #D52525);
793
+ --jkl-color-error-text-default: #333333;
794
+ --jkl-color-error-text-default: light-dark(#333333, #333333);
795
+ --jkl-color-error-text-subdued: #737373;
796
+ --jkl-color-error-text-subdued: light-dark(#737373, #737373);
797
+ --jkl-color-error-text-accent: #FFFFFF;
798
+ --jkl-color-error-text-accent: light-dark(#FFFFFF, #FFFFFF);
799
+ --jkl-color-error-text-on-contrast: #FFFFFF;
800
+ --jkl-color-error-text-on-contrast: light-dark(#FFFFFF, #FFFFFF);
801
+ --jkl-color-error-border-default: #D52525;
802
+ --jkl-color-error-border-default: light-dark(#D52525, #D52525);
803
+ --jkl-color-error-border-subdued: #FFFFFF;
804
+ --jkl-color-error-border-subdued: light-dark(#FFFFFF, #FFFFFF);
805
+ --jkl-color-error-border-strong: #FFFFFF;
806
+ --jkl-color-error-border-strong: light-dark(#FFFFFF, #FFFFFF);
825
807
  /* stylelint-enable declaration-block-no-duplicate-custom-properties */
826
808
  }
827
809
  }
@@ -869,114 +851,116 @@
869
851
  @layer jokul.theme {
870
852
  [data-brand=eika] {
871
853
  /* stylelint-disable declaration-block-no-duplicate-custom-properties -- fallback and light-dark() declarations are intentionally paired. */
872
- --jkl-color-neutral-background-page: #F4F2EF;
873
- --jkl-color-neutral-background-page: light-dark(#F4F2EF, #1B1917);
874
- --jkl-color-neutral-background-container: #F9F9F9;
875
- --jkl-color-neutral-background-container: light-dark(#F9F9F9, #313030);
876
- --jkl-color-neutral-background-action: #1B1917;
877
- --jkl-color-neutral-background-action: light-dark(#1B1917, #F9F9F9);
878
- --jkl-color-neutral-text-default: #1B1917;
879
- --jkl-color-neutral-text-default: light-dark(#1B1917, #F9F9F9);
880
- --jkl-color-neutral-text-subdued: #636060;
881
- --jkl-color-neutral-text-subdued: light-dark(#636060, #C8C5C3);
882
- --jkl-color-neutral-text-on-action: #F9F9F9;
883
- --jkl-color-neutral-text-on-action: light-dark(#F9F9F9, #1B1917);
884
- --jkl-color-neutral-border-strong: #1B1917;
885
- --jkl-color-neutral-border-strong: light-dark(#1B1917, #F9F9F9);
886
- --jkl-color-neutral-border-default: #636060;
887
- --jkl-color-neutral-border-default: light-dark(#636060, #C8C5C3);
888
- --jkl-color-neutral-border-subdued: #C8C5C3;
889
- --jkl-color-neutral-border-subdued: light-dark(#C8C5C3, #636060);
890
- --jkl-color-accent-background-page: #F4F2EF;
891
- --jkl-color-accent-background-page: light-dark(#F4F2EF, #1B1917);
892
- --jkl-color-accent-background-container: #F9F9F9;
893
- --jkl-color-accent-background-container: light-dark(#F9F9F9, #313030);
894
- --jkl-color-accent-background-action: #90D000;
895
- --jkl-color-accent-background-action: light-dark(#90D000, #D3EC99);
896
- --jkl-color-accent-text-default: #1B1917;
897
- --jkl-color-accent-text-default: light-dark(#1B1917, #F9F9F9);
898
- --jkl-color-accent-text-subdued: #636060;
899
- --jkl-color-accent-text-subdued: light-dark(#636060, #C8C5C3);
900
- --jkl-color-accent-text-on-action: #00383D;
901
- --jkl-color-accent-text-on-action: light-dark(#00383D, #00383D);
902
- --jkl-color-accent-border-strong: #90D000;
903
- --jkl-color-accent-border-strong: light-dark(#90D000, #D3EC99);
904
- --jkl-color-accent-border-default: #90D000;
905
- --jkl-color-accent-border-default: light-dark(#90D000, #D3EC99);
906
- --jkl-color-accent-border-subdued: #D3EC99;
907
- --jkl-color-accent-border-subdued: light-dark(#D3EC99, #F4FAE6);
908
- --jkl-color-warning-background-page: #FCF7E8;
909
- --jkl-color-warning-background-page: light-dark(#FCF7E8, #392B10);
910
- --jkl-color-warning-background-container: #F7EBC2;
911
- --jkl-color-warning-background-container: light-dark(#F7EBC2, #5A4519);
912
- --jkl-color-warning-background-action: #B98900;
913
- --jkl-color-warning-background-action: light-dark(#B98900, #E4B63A);
914
- --jkl-color-warning-text-default: #5B4200;
915
- --jkl-color-warning-text-default: light-dark(#5B4200, #FFF5D9);
916
- --jkl-color-warning-text-subdued: #8B6B22;
917
- --jkl-color-warning-text-subdued: light-dark(#8B6B22, #EEDFAE);
918
- --jkl-color-warning-text-on-action: #1B1917;
919
- --jkl-color-warning-text-on-action: light-dark(#1B1917, #1B1917);
920
- --jkl-color-warning-border-strong: #B98900;
921
- --jkl-color-warning-border-strong: light-dark(#B98900, #E4B63A);
922
- --jkl-color-warning-border-default: #B98900;
923
- --jkl-color-warning-border-default: light-dark(#B98900, #E4B63A);
924
- --jkl-color-warning-border-subdued: #DECC8D;
925
- --jkl-color-warning-border-subdued: light-dark(#DECC8D, #8B6B22);
926
- --jkl-color-success-background-page: #EEF7F0;
927
- --jkl-color-success-background-page: light-dark(#EEF7F0, #173122);
928
- --jkl-color-success-background-container: #D7EADB;
929
- --jkl-color-success-background-container: light-dark(#D7EADB, #234530);
930
- --jkl-color-success-background-action: #2E8C4A;
931
- --jkl-color-success-background-action: light-dark(#2E8C4A, #67B479);
932
- --jkl-color-success-text-default: #1E5D31;
933
- --jkl-color-success-text-default: light-dark(#1E5D31, #F1FBF3);
934
- --jkl-color-success-text-subdued: #507A5B;
935
- --jkl-color-success-text-subdued: light-dark(#507A5B, #C9DDCE);
936
- --jkl-color-success-text-on-action: #F9F9F9;
937
- --jkl-color-success-text-on-action: light-dark(#F9F9F9, #1B1917);
938
- --jkl-color-success-border-strong: #2E8C4A;
939
- --jkl-color-success-border-strong: light-dark(#2E8C4A, #67B479);
940
- --jkl-color-success-border-default: #2E8C4A;
941
- --jkl-color-success-border-default: light-dark(#2E8C4A, #67B479);
942
- --jkl-color-success-border-subdued: #94B79B;
943
- --jkl-color-success-border-subdued: light-dark(#94B79B, #507A5B);
944
- --jkl-color-info-background-page: #EEF5FE;
945
- --jkl-color-info-background-page: light-dark(#EEF5FE, #162A40);
946
- --jkl-color-info-background-container: #DDEBFB;
947
- --jkl-color-info-background-container: light-dark(#DDEBFB, #264261);
948
- --jkl-color-info-background-action: #4AA3F0;
949
- --jkl-color-info-background-action: light-dark(#4AA3F0, #7EBEF4);
950
- --jkl-color-info-text-default: #1B3B60;
951
- --jkl-color-info-text-default: light-dark(#1B3B60, #F5FAFF);
952
- --jkl-color-info-text-subdued: #4E6C8E;
953
- --jkl-color-info-text-subdued: light-dark(#4E6C8E, #D7E9F8);
954
- --jkl-color-info-text-on-action: #F9F9F9;
955
- --jkl-color-info-text-on-action: light-dark(#F9F9F9, #1B1917);
956
- --jkl-color-info-border-strong: #4AA3F0;
957
- --jkl-color-info-border-strong: light-dark(#4AA3F0, #7EBEF4);
958
- --jkl-color-info-border-default: #4AA3F0;
959
- --jkl-color-info-border-default: light-dark(#4AA3F0, #7EBEF4);
960
- --jkl-color-info-border-subdued: #A9A9CA;
961
- --jkl-color-info-border-subdued: light-dark(#A9A9CA, #4E6C8E);
962
- --jkl-color-error-background-page: #FDEEEE;
963
- --jkl-color-error-background-page: light-dark(#FDEEEE, #3A1C1C);
964
- --jkl-color-error-background-container: #F8D1D1;
965
- --jkl-color-error-background-container: light-dark(#F8D1D1, #5B2828);
966
- --jkl-color-error-background-action: #E84B3C;
967
- --jkl-color-error-background-action: light-dark(#E84B3C, #F27B70);
968
- --jkl-color-error-text-default: #7B1F18;
969
- --jkl-color-error-text-default: light-dark(#7B1F18, #FFF1EF);
970
- --jkl-color-error-text-subdued: #A14E46;
971
- --jkl-color-error-text-subdued: light-dark(#A14E46, #F1C8C4);
972
- --jkl-color-error-text-on-action: #F9F9F9;
973
- --jkl-color-error-text-on-action: light-dark(#F9F9F9, #1B1917);
974
- --jkl-color-error-border-strong: #E84B3C;
975
- --jkl-color-error-border-strong: light-dark(#E84B3C, #F27B70);
976
- --jkl-color-error-border-default: #E84B3C;
977
- --jkl-color-error-border-default: light-dark(#E84B3C, #F27B70);
978
- --jkl-color-error-border-subdued: #DE9E9E;
979
- --jkl-color-error-border-subdued: light-dark(#DE9E9E, #A14E46);
854
+ --jkl-color-background-page: #FFFFFF;
855
+ --jkl-color-background-page: light-dark(#FFFFFF, #FFFFFF);
856
+ --jkl-color-background-container: #FBFAFA;
857
+ --jkl-color-background-container: light-dark(#FBFAFA, #ECE5E0);
858
+ --jkl-color-background-container-accent: #ECE5E0;
859
+ --jkl-color-background-container-accent: light-dark(#ECE5E0, #ECE5E0);
860
+ --jkl-color-background-contrast: #00383D;
861
+ --jkl-color-background-contrast: light-dark(#00383D, #00383D);
862
+ --jkl-color-text-default: #00383D;
863
+ --jkl-color-text-default: light-dark(#00383D, #00383D);
864
+ --jkl-color-text-subdued: #4D7477;
865
+ --jkl-color-text-subdued: light-dark(#4D7477, #4D7477);
866
+ --jkl-color-text-accent: #00383D;
867
+ --jkl-color-text-accent: light-dark(#00383D, #00383D);
868
+ --jkl-color-text-on-contrast: #FFFFFF;
869
+ --jkl-color-text-on-contrast: light-dark(#FFFFFF, #FFFFFF);
870
+ --jkl-color-border-default: #ECE5E0;
871
+ --jkl-color-border-default: light-dark(#ECE5E0, #ECE5E0);
872
+ --jkl-color-border-subdued: #F7F4F2;
873
+ --jkl-color-border-subdued: light-dark(#F7F4F2, #F7F4F2);
874
+ --jkl-color-border-strong: #4D7477;
875
+ --jkl-color-border-strong: light-dark(#4D7477, #4D7477);
876
+ --jkl-color-warning-background-page: #FFFFFF;
877
+ --jkl-color-warning-background-page: light-dark(#FFFFFF, #FFFFFF);
878
+ --jkl-color-warning-background-container: #FFE5C7;
879
+ --jkl-color-warning-background-container: light-dark(#FFE5C7, #FFE5C7);
880
+ --jkl-color-warning-background-container-accent: #ECE5E0;
881
+ --jkl-color-warning-background-container-accent: light-dark(#ECE5E0, #ECE5E0);
882
+ --jkl-color-warning-background-contrast: #FFBD74;
883
+ --jkl-color-warning-background-contrast: light-dark(#FFBD74, #FFBD74);
884
+ --jkl-color-warning-text-default: #00383D;
885
+ --jkl-color-warning-text-default: light-dark(#00383D, #00383D);
886
+ --jkl-color-warning-text-subdued: #4D7477;
887
+ --jkl-color-warning-text-subdued: light-dark(#4D7477, #4D7477);
888
+ --jkl-color-warning-text-accent: #00383D;
889
+ --jkl-color-warning-text-accent: light-dark(#00383D, #00383D);
890
+ --jkl-color-warning-text-on-contrast: #FFFFFF;
891
+ --jkl-color-warning-text-on-contrast: light-dark(#FFFFFF, #FFFFFF);
892
+ --jkl-color-warning-border-default: #ECE5E0;
893
+ --jkl-color-warning-border-default: light-dark(#ECE5E0, #ECE5E0);
894
+ --jkl-color-warning-border-subdued: #F7F4F2;
895
+ --jkl-color-warning-border-subdued: light-dark(#F7F4F2, #F7F4F2);
896
+ --jkl-color-warning-border-strong: #4D7477;
897
+ --jkl-color-warning-border-strong: light-dark(#4D7477, #4D7477);
898
+ --jkl-color-success-background-page: #FFFFFF;
899
+ --jkl-color-success-background-page: light-dark(#FFFFFF, #FFFFFF);
900
+ --jkl-color-success-background-container: #ECF7D4;
901
+ --jkl-color-success-background-container: light-dark(#ECF7D4, #ECF7D4);
902
+ --jkl-color-success-background-container-accent: #ECE5E0;
903
+ --jkl-color-success-background-container-accent: light-dark(#ECE5E0, #ECE5E0);
904
+ --jkl-color-success-background-contrast: #00383D;
905
+ --jkl-color-success-background-contrast: light-dark(#00383D, #00383D);
906
+ --jkl-color-success-text-default: #00383D;
907
+ --jkl-color-success-text-default: light-dark(#00383D, #00383D);
908
+ --jkl-color-success-text-subdued: #4D7477;
909
+ --jkl-color-success-text-subdued: light-dark(#4D7477, #4D7477);
910
+ --jkl-color-success-text-accent: #00383D;
911
+ --jkl-color-success-text-accent: light-dark(#00383D, #00383D);
912
+ --jkl-color-success-text-on-contrast: #FFFFFF;
913
+ --jkl-color-success-text-on-contrast: light-dark(#FFFFFF, #FFFFFF);
914
+ --jkl-color-success-border-default: #ECE5E0;
915
+ --jkl-color-success-border-default: light-dark(#ECE5E0, #ECE5E0);
916
+ --jkl-color-success-border-subdued: #F7F4F2;
917
+ --jkl-color-success-border-subdued: light-dark(#F7F4F2, #F7F4F2);
918
+ --jkl-color-success-border-strong: #4D7477;
919
+ --jkl-color-success-border-strong: light-dark(#4D7477, #4D7477);
920
+ --jkl-color-info-background-page: #FFFFFF;
921
+ --jkl-color-info-background-page: light-dark(#FFFFFF, #FFFFFF);
922
+ --jkl-color-info-background-container: #E6F3F5;
923
+ --jkl-color-info-background-container: light-dark(#E6F3F5, #E6F3F5);
924
+ --jkl-color-info-background-container-accent: #ECE5E0;
925
+ --jkl-color-info-background-container-accent: light-dark(#ECE5E0, #ECE5E0);
926
+ --jkl-color-info-background-contrast: #00383D;
927
+ --jkl-color-info-background-contrast: light-dark(#00383D, #00383D);
928
+ --jkl-color-info-text-default: #00383D;
929
+ --jkl-color-info-text-default: light-dark(#00383D, #00383D);
930
+ --jkl-color-info-text-subdued: #4D7477;
931
+ --jkl-color-info-text-subdued: light-dark(#4D7477, #4D7477);
932
+ --jkl-color-info-text-accent: #00383D;
933
+ --jkl-color-info-text-accent: light-dark(#00383D, #00383D);
934
+ --jkl-color-info-text-on-contrast: #FFFFFF;
935
+ --jkl-color-info-text-on-contrast: light-dark(#FFFFFF, #FFFFFF);
936
+ --jkl-color-info-border-default: #ECE5E0;
937
+ --jkl-color-info-border-default: light-dark(#ECE5E0, #ECE5E0);
938
+ --jkl-color-info-border-subdued: #F7F4F2;
939
+ --jkl-color-info-border-subdued: light-dark(#F7F4F2, #F7F4F2);
940
+ --jkl-color-info-border-strong: #4D7477;
941
+ --jkl-color-info-border-strong: light-dark(#4D7477, #4D7477);
942
+ --jkl-color-error-background-page: #FFFFFF;
943
+ --jkl-color-error-background-page: light-dark(#FFFFFF, #FFFFFF);
944
+ --jkl-color-error-background-container: #FDDEE6;
945
+ --jkl-color-error-background-container: light-dark(#FDDEE6, #FDDEE6);
946
+ --jkl-color-error-background-container-accent: #ECE5E0;
947
+ --jkl-color-error-background-container-accent: light-dark(#ECE5E0, #ECE5E0);
948
+ --jkl-color-error-background-contrast: #B83653;
949
+ --jkl-color-error-background-contrast: light-dark(#B83653, #B83653);
950
+ --jkl-color-error-text-default: #00383D;
951
+ --jkl-color-error-text-default: light-dark(#00383D, #00383D);
952
+ --jkl-color-error-text-subdued: #4D7477;
953
+ --jkl-color-error-text-subdued: light-dark(#4D7477, #4D7477);
954
+ --jkl-color-error-text-accent: #00383D;
955
+ --jkl-color-error-text-accent: light-dark(#00383D, #00383D);
956
+ --jkl-color-error-text-on-contrast: #FFFFFF;
957
+ --jkl-color-error-text-on-contrast: light-dark(#FFFFFF, #FFFFFF);
958
+ --jkl-color-error-border-default: #ECE5E0;
959
+ --jkl-color-error-border-default: light-dark(#ECE5E0, #ECE5E0);
960
+ --jkl-color-error-border-subdued: #F7F4F2;
961
+ --jkl-color-error-border-subdued: light-dark(#F7F4F2, #F7F4F2);
962
+ --jkl-color-error-border-strong: #4D7477;
963
+ --jkl-color-error-border-strong: light-dark(#4D7477, #4D7477);
980
964
  /* stylelint-enable declaration-block-no-duplicate-custom-properties */
981
965
  }
982
966
  }
@@ -1024,114 +1008,116 @@
1024
1008
  @layer jokul.theme {
1025
1009
  [data-brand=sparebank1] {
1026
1010
  /* stylelint-disable declaration-block-no-duplicate-custom-properties -- fallback and light-dark() declarations are intentionally paired. */
1027
- --jkl-color-neutral-background-page: #F4F2EF;
1028
- --jkl-color-neutral-background-page: light-dark(#F4F2EF, #1B1917);
1029
- --jkl-color-neutral-background-container: #F9F9F9;
1030
- --jkl-color-neutral-background-container: light-dark(#F9F9F9, #313030);
1031
- --jkl-color-neutral-background-action: #1B1917;
1032
- --jkl-color-neutral-background-action: light-dark(#1B1917, #F9F9F9);
1033
- --jkl-color-neutral-text-default: #1B1917;
1034
- --jkl-color-neutral-text-default: light-dark(#1B1917, #F9F9F9);
1035
- --jkl-color-neutral-text-subdued: #636060;
1036
- --jkl-color-neutral-text-subdued: light-dark(#636060, #C8C5C3);
1037
- --jkl-color-neutral-text-on-action: #F9F9F9;
1038
- --jkl-color-neutral-text-on-action: light-dark(#F9F9F9, #1B1917);
1039
- --jkl-color-neutral-border-strong: #1B1917;
1040
- --jkl-color-neutral-border-strong: light-dark(#1B1917, #F9F9F9);
1041
- --jkl-color-neutral-border-default: #636060;
1042
- --jkl-color-neutral-border-default: light-dark(#636060, #C8C5C3);
1043
- --jkl-color-neutral-border-subdued: #C8C5C3;
1044
- --jkl-color-neutral-border-subdued: light-dark(#C8C5C3, #636060);
1045
- --jkl-color-accent-background-page: #F4F2EF;
1046
- --jkl-color-accent-background-page: light-dark(#F4F2EF, #1B1917);
1047
- --jkl-color-accent-background-container: #F9F9F9;
1048
- --jkl-color-accent-background-container: light-dark(#F9F9F9, #313030);
1049
- --jkl-color-accent-background-action: #005AA4;
1050
- --jkl-color-accent-background-action: light-dark(#005AA4, #9EC2E5);
1051
- --jkl-color-accent-text-default: #1B1917;
1052
- --jkl-color-accent-text-default: light-dark(#1B1917, #F9F9F9);
1053
- --jkl-color-accent-text-subdued: #636060;
1054
- --jkl-color-accent-text-subdued: light-dark(#636060, #C8C5C3);
1055
- --jkl-color-accent-text-on-action: #F9F9F9;
1056
- --jkl-color-accent-text-on-action: light-dark(#F9F9F9, #1B1917);
1057
- --jkl-color-accent-border-strong: #005AA4;
1058
- --jkl-color-accent-border-strong: light-dark(#005AA4, #9EC2E5);
1059
- --jkl-color-accent-border-default: #005AA4;
1060
- --jkl-color-accent-border-default: light-dark(#005AA4, #9EC2E5);
1061
- --jkl-color-accent-border-subdued: #C3D9EF;
1062
- --jkl-color-accent-border-subdued: light-dark(#C3D9EF, #D7E7F4);
1063
- --jkl-color-warning-background-page: #FCF7E8;
1064
- --jkl-color-warning-background-page: light-dark(#FCF7E8, #392B10);
1065
- --jkl-color-warning-background-container: #F7EBC2;
1066
- --jkl-color-warning-background-container: light-dark(#F7EBC2, #5A4519);
1067
- --jkl-color-warning-background-action: #B98900;
1068
- --jkl-color-warning-background-action: light-dark(#B98900, #E4B63A);
1069
- --jkl-color-warning-text-default: #5B4200;
1070
- --jkl-color-warning-text-default: light-dark(#5B4200, #FFF5D9);
1071
- --jkl-color-warning-text-subdued: #8B6B22;
1072
- --jkl-color-warning-text-subdued: light-dark(#8B6B22, #EEDFAE);
1073
- --jkl-color-warning-text-on-action: #1B1917;
1074
- --jkl-color-warning-text-on-action: light-dark(#1B1917, #1B1917);
1075
- --jkl-color-warning-border-strong: #B98900;
1076
- --jkl-color-warning-border-strong: light-dark(#B98900, #E4B63A);
1077
- --jkl-color-warning-border-default: #B98900;
1078
- --jkl-color-warning-border-default: light-dark(#B98900, #E4B63A);
1079
- --jkl-color-warning-border-subdued: #DECC8D;
1080
- --jkl-color-warning-border-subdued: light-dark(#DECC8D, #8B6B22);
1081
- --jkl-color-success-background-page: #EEF7F0;
1082
- --jkl-color-success-background-page: light-dark(#EEF7F0, #173122);
1083
- --jkl-color-success-background-container: #D7EADB;
1084
- --jkl-color-success-background-container: light-dark(#D7EADB, #234530);
1085
- --jkl-color-success-background-action: #2E8C4A;
1086
- --jkl-color-success-background-action: light-dark(#2E8C4A, #67B479);
1087
- --jkl-color-success-text-default: #1E5D31;
1088
- --jkl-color-success-text-default: light-dark(#1E5D31, #F1FBF3);
1089
- --jkl-color-success-text-subdued: #507A5B;
1090
- --jkl-color-success-text-subdued: light-dark(#507A5B, #C9DDCE);
1091
- --jkl-color-success-text-on-action: #F9F9F9;
1092
- --jkl-color-success-text-on-action: light-dark(#F9F9F9, #1B1917);
1093
- --jkl-color-success-border-strong: #2E8C4A;
1094
- --jkl-color-success-border-strong: light-dark(#2E8C4A, #67B479);
1095
- --jkl-color-success-border-default: #2E8C4A;
1096
- --jkl-color-success-border-default: light-dark(#2E8C4A, #67B479);
1097
- --jkl-color-success-border-subdued: #94B79B;
1098
- --jkl-color-success-border-subdued: light-dark(#94B79B, #507A5B);
1099
- --jkl-color-info-background-page: #EEF5FE;
1100
- --jkl-color-info-background-page: light-dark(#EEF5FE, #162A40);
1101
- --jkl-color-info-background-container: #DDEBFB;
1102
- --jkl-color-info-background-container: light-dark(#DDEBFB, #264261);
1103
- --jkl-color-info-background-action: #4AA3F0;
1104
- --jkl-color-info-background-action: light-dark(#4AA3F0, #7EBEF4);
1105
- --jkl-color-info-text-default: #1B3B60;
1106
- --jkl-color-info-text-default: light-dark(#1B3B60, #F5FAFF);
1107
- --jkl-color-info-text-subdued: #4E6C8E;
1108
- --jkl-color-info-text-subdued: light-dark(#4E6C8E, #D7E9F8);
1109
- --jkl-color-info-text-on-action: #F9F9F9;
1110
- --jkl-color-info-text-on-action: light-dark(#F9F9F9, #1B1917);
1111
- --jkl-color-info-border-strong: #4AA3F0;
1112
- --jkl-color-info-border-strong: light-dark(#4AA3F0, #7EBEF4);
1113
- --jkl-color-info-border-default: #4AA3F0;
1114
- --jkl-color-info-border-default: light-dark(#4AA3F0, #7EBEF4);
1115
- --jkl-color-info-border-subdued: #A9A9CA;
1116
- --jkl-color-info-border-subdued: light-dark(#A9A9CA, #4E6C8E);
1117
- --jkl-color-error-background-page: #FDEEEE;
1118
- --jkl-color-error-background-page: light-dark(#FDEEEE, #3A1C1C);
1119
- --jkl-color-error-background-container: #F8D1D1;
1120
- --jkl-color-error-background-container: light-dark(#F8D1D1, #5B2828);
1121
- --jkl-color-error-background-action: #E84B3C;
1122
- --jkl-color-error-background-action: light-dark(#E84B3C, #F27B70);
1123
- --jkl-color-error-text-default: #7B1F18;
1124
- --jkl-color-error-text-default: light-dark(#7B1F18, #FFF1EF);
1125
- --jkl-color-error-text-subdued: #A14E46;
1126
- --jkl-color-error-text-subdued: light-dark(#A14E46, #F1C8C4);
1127
- --jkl-color-error-text-on-action: #F9F9F9;
1128
- --jkl-color-error-text-on-action: light-dark(#F9F9F9, #1B1917);
1129
- --jkl-color-error-border-strong: #E84B3C;
1130
- --jkl-color-error-border-strong: light-dark(#E84B3C, #F27B70);
1131
- --jkl-color-error-border-default: #E84B3C;
1132
- --jkl-color-error-border-default: light-dark(#E84B3C, #F27B70);
1133
- --jkl-color-error-border-subdued: #DE9E9E;
1134
- --jkl-color-error-border-subdued: light-dark(#DE9E9E, #A14E46);
1011
+ --jkl-color-background-page: #FDF7F3;
1012
+ --jkl-color-background-page: light-dark(#FDF7F3, #131313);
1013
+ --jkl-color-background-container: #FFFFFF;
1014
+ --jkl-color-background-container: light-dark(#FFFFFF, #222222);
1015
+ --jkl-color-background-container-accent: #E1EEF3;
1016
+ --jkl-color-background-container-accent: light-dark(#E1EEF3, #0F1F2C);
1017
+ --jkl-color-background-contrast: #0C4686;
1018
+ --jkl-color-background-contrast: light-dark(#0C4686, #00509A);
1019
+ --jkl-color-text-default: #191919;
1020
+ --jkl-color-text-default: light-dark(#191919, #FFFFFF);
1021
+ --jkl-color-text-subdued: #484848;
1022
+ --jkl-color-text-subdued: light-dark(#484848, #BABABA);
1023
+ --jkl-color-text-accent: #0C2053;
1024
+ --jkl-color-text-accent: light-dark(#0C2053, #D1E3F2);
1025
+ --jkl-color-text-on-contrast: #FFFFFF;
1026
+ --jkl-color-text-on-contrast: light-dark(#FFFFFF, #060D0D);
1027
+ --jkl-color-border-default: #CDCFCF;
1028
+ --jkl-color-border-default: light-dark(#CDCFCF, #383D3D);
1029
+ --jkl-color-border-subdued: #ECEDED;
1030
+ --jkl-color-border-subdued: light-dark(#ECEDED, #191F1F);
1031
+ --jkl-color-border-strong: #0C4686;
1032
+ --jkl-color-border-strong: light-dark(#0C4686, #94BAE1);
1033
+ --jkl-color-warning-background-page: #FFFFFF;
1034
+ --jkl-color-warning-background-page: light-dark(#FFFFFF, #060D0D);
1035
+ --jkl-color-warning-background-container: #FDEBCD;
1036
+ --jkl-color-warning-background-container: light-dark(#FDEBCD, #401A00);
1037
+ --jkl-color-warning-background-container-accent: #FDEBCD;
1038
+ --jkl-color-warning-background-container-accent: light-dark(#FDEBCD, #401A00);
1039
+ --jkl-color-warning-background-contrast: #0C4686;
1040
+ --jkl-color-warning-background-contrast: light-dark(#0C4686, #00509A);
1041
+ --jkl-color-warning-text-default: #5D2700;
1042
+ --jkl-color-warning-text-default: light-dark(#5D2700, #FFBF6A);
1043
+ --jkl-color-warning-text-subdued: #484848;
1044
+ --jkl-color-warning-text-subdued: light-dark(#484848, #BABABA);
1045
+ --jkl-color-warning-text-accent: #5D2700;
1046
+ --jkl-color-warning-text-accent: light-dark(#5D2700, #FFBF6A);
1047
+ --jkl-color-warning-text-on-contrast: #FFFFFF;
1048
+ --jkl-color-warning-text-on-contrast: light-dark(#FFFFFF, #060D0D);
1049
+ --jkl-color-warning-border-default: #C56709;
1050
+ --jkl-color-warning-border-default: light-dark(#C56709, #C56709);
1051
+ --jkl-color-warning-border-subdued: #ECEDED;
1052
+ --jkl-color-warning-border-subdued: light-dark(#ECEDED, #191F1F);
1053
+ --jkl-color-warning-border-strong: #0C4686;
1054
+ --jkl-color-warning-border-strong: light-dark(#0C4686, #94BAE1);
1055
+ --jkl-color-success-background-page: #FFFFFF;
1056
+ --jkl-color-success-background-page: light-dark(#FFFFFF, #060D0D);
1057
+ --jkl-color-success-background-container: #DAF5E8;
1058
+ --jkl-color-success-background-container: light-dark(#DAF5E8, #0D3B2A);
1059
+ --jkl-color-success-background-container-accent: #DAF5E8;
1060
+ --jkl-color-success-background-container-accent: light-dark(#DAF5E8, #0D3B2A);
1061
+ --jkl-color-success-background-contrast: #0C4686;
1062
+ --jkl-color-success-background-contrast: light-dark(#0C4686, #00509A);
1063
+ --jkl-color-success-text-default: #0D4430;
1064
+ --jkl-color-success-text-default: light-dark(#0D4430, #A9E2C6);
1065
+ --jkl-color-success-text-subdued: #484848;
1066
+ --jkl-color-success-text-subdued: light-dark(#484848, #BABABA);
1067
+ --jkl-color-success-text-accent: #0D4430;
1068
+ --jkl-color-success-text-accent: light-dark(#0D4430, #A9E2C6);
1069
+ --jkl-color-success-text-on-contrast: #FFFFFF;
1070
+ --jkl-color-success-text-on-contrast: light-dark(#FFFFFF, #060D0D);
1071
+ --jkl-color-success-border-default: #3F9D76;
1072
+ --jkl-color-success-border-default: light-dark(#3F9D76, #3F9D76);
1073
+ --jkl-color-success-border-subdued: #ECEDED;
1074
+ --jkl-color-success-border-subdued: light-dark(#ECEDED, #191F1F);
1075
+ --jkl-color-success-border-strong: #0C4686;
1076
+ --jkl-color-success-border-strong: light-dark(#0C4686, #94BAE1);
1077
+ --jkl-color-info-background-page: #FFFFFF;
1078
+ --jkl-color-info-background-page: light-dark(#FFFFFF, #060D0D);
1079
+ --jkl-color-info-background-container: #E1EEF3;
1080
+ --jkl-color-info-background-container: light-dark(#E1EEF3, #163149);
1081
+ --jkl-color-info-background-container-accent: #C4DEE8;
1082
+ --jkl-color-info-background-container-accent: light-dark(#C4DEE8, #204666);
1083
+ --jkl-color-info-background-contrast: #0C4686;
1084
+ --jkl-color-info-background-contrast: light-dark(#0C4686, #00509A);
1085
+ --jkl-color-info-text-default: #204666;
1086
+ --jkl-color-info-text-default: light-dark(#204666, #BBDAE7);
1087
+ --jkl-color-info-text-subdued: #484848;
1088
+ --jkl-color-info-text-subdued: light-dark(#484848, #BABABA);
1089
+ --jkl-color-info-text-accent: #204666;
1090
+ --jkl-color-info-text-accent: light-dark(#204666, #BBDAE7);
1091
+ --jkl-color-info-text-on-contrast: #FFFFFF;
1092
+ --jkl-color-info-text-on-contrast: light-dark(#FFFFFF, #060D0D);
1093
+ --jkl-color-info-border-default: #558BB5;
1094
+ --jkl-color-info-border-default: light-dark(#558BB5, #558BB5);
1095
+ --jkl-color-info-border-subdued: #ECEDED;
1096
+ --jkl-color-info-border-subdued: light-dark(#ECEDED, #191F1F);
1097
+ --jkl-color-info-border-strong: #0C4686;
1098
+ --jkl-color-info-border-strong: light-dark(#0C4686, #94BAE1);
1099
+ --jkl-color-error-background-page: #FFFFFF;
1100
+ --jkl-color-error-background-page: light-dark(#FFFFFF, #060D0D);
1101
+ --jkl-color-error-background-container: #FFDFDB;
1102
+ --jkl-color-error-background-container: light-dark(#FFDFDB, #591011);
1103
+ --jkl-color-error-background-container-accent: #FFB6AF;
1104
+ --jkl-color-error-background-container-accent: light-dark(#FFB6AF, #711314);
1105
+ --jkl-color-error-background-contrast: #0C4686;
1106
+ --jkl-color-error-background-contrast: light-dark(#0C4686, #00509A);
1107
+ --jkl-color-error-text-default: #711314;
1108
+ --jkl-color-error-text-default: light-dark(#711314, #FFA49E);
1109
+ --jkl-color-error-text-subdued: #484848;
1110
+ --jkl-color-error-text-subdued: light-dark(#484848, #BABABA);
1111
+ --jkl-color-error-text-accent: #711314;
1112
+ --jkl-color-error-text-accent: light-dark(#711314, #FFA49E);
1113
+ --jkl-color-error-text-on-contrast: #FFFFFF;
1114
+ --jkl-color-error-text-on-contrast: light-dark(#FFFFFF, #060D0D);
1115
+ --jkl-color-error-border-default: #E03A3C;
1116
+ --jkl-color-error-border-default: light-dark(#E03A3C, #E03A3C);
1117
+ --jkl-color-error-border-subdued: #ECEDED;
1118
+ --jkl-color-error-border-subdued: light-dark(#ECEDED, #191F1F);
1119
+ --jkl-color-error-border-strong: #0C4686;
1120
+ --jkl-color-error-border-strong: light-dark(#0C4686, #94BAE1);
1135
1121
  /* stylelint-enable declaration-block-no-duplicate-custom-properties */
1136
1122
  }
1137
1123
  }
@@ -1172,114 +1158,116 @@
1172
1158
  @layer jokul.theme {
1173
1159
  [data-brand=fremtind] {
1174
1160
  /* stylelint-disable declaration-block-no-duplicate-custom-properties -- fallback and light-dark() declarations are intentionally paired. */
1175
- --jkl-color-neutral-background-page: #F4F2EF;
1176
- --jkl-color-neutral-background-page: light-dark(#F4F2EF, #1B1917);
1177
- --jkl-color-neutral-background-container: #F9F9F9;
1178
- --jkl-color-neutral-background-container: light-dark(#F9F9F9, #313030);
1179
- --jkl-color-neutral-background-action: #1B1917;
1180
- --jkl-color-neutral-background-action: light-dark(#1B1917, #F9F9F9);
1181
- --jkl-color-neutral-text-default: #1B1917;
1182
- --jkl-color-neutral-text-default: light-dark(#1B1917, #F9F9F9);
1183
- --jkl-color-neutral-text-subdued: #636060;
1184
- --jkl-color-neutral-text-subdued: light-dark(#636060, #C8C5C3);
1185
- --jkl-color-neutral-text-on-action: #F9F9F9;
1186
- --jkl-color-neutral-text-on-action: light-dark(#F9F9F9, #1B1917);
1187
- --jkl-color-neutral-border-strong: #1B1917;
1188
- --jkl-color-neutral-border-strong: light-dark(#1B1917, #F9F9F9);
1189
- --jkl-color-neutral-border-default: #636060;
1190
- --jkl-color-neutral-border-default: light-dark(#636060, #C8C5C3);
1191
- --jkl-color-neutral-border-subdued: #C8C5C3;
1192
- --jkl-color-neutral-border-subdued: light-dark(#C8C5C3, #636060);
1193
- --jkl-color-accent-background-page: #F4F2EF;
1194
- --jkl-color-accent-background-page: light-dark(#F4F2EF, #1B1917);
1195
- --jkl-color-accent-background-container: #F9F9F9;
1196
- --jkl-color-accent-background-container: light-dark(#F9F9F9, #313030);
1197
- --jkl-color-accent-background-action: #1B1917;
1198
- --jkl-color-accent-background-action: light-dark(#1B1917, #F9F9F9);
1199
- --jkl-color-accent-text-default: #1B1917;
1200
- --jkl-color-accent-text-default: light-dark(#1B1917, #F9F9F9);
1201
- --jkl-color-accent-text-subdued: #636060;
1202
- --jkl-color-accent-text-subdued: light-dark(#636060, #C8C5C3);
1203
- --jkl-color-accent-text-on-action: #F9F9F9;
1204
- --jkl-color-accent-text-on-action: light-dark(#F9F9F9, #1B1917);
1205
- --jkl-color-accent-border-strong: #1B1917;
1206
- --jkl-color-accent-border-strong: light-dark(#1B1917, #F9F9F9);
1207
- --jkl-color-accent-border-default: #636060;
1208
- --jkl-color-accent-border-default: light-dark(#636060, #C8C5C3);
1209
- --jkl-color-accent-border-subdued: #C8C5C3;
1210
- --jkl-color-accent-border-subdued: light-dark(#C8C5C3, #636060);
1211
- --jkl-color-warning-background-page: #FCF7E8;
1212
- --jkl-color-warning-background-page: light-dark(#FCF7E8, #392B10);
1213
- --jkl-color-warning-background-container: #F7EBC2;
1214
- --jkl-color-warning-background-container: light-dark(#F7EBC2, #5A4519);
1215
- --jkl-color-warning-background-action: #B98900;
1216
- --jkl-color-warning-background-action: light-dark(#B98900, #E4B63A);
1217
- --jkl-color-warning-text-default: #5B4200;
1218
- --jkl-color-warning-text-default: light-dark(#5B4200, #FFF5D9);
1219
- --jkl-color-warning-text-subdued: #8B6B22;
1220
- --jkl-color-warning-text-subdued: light-dark(#8B6B22, #EEDFAE);
1221
- --jkl-color-warning-text-on-action: #1B1917;
1222
- --jkl-color-warning-text-on-action: light-dark(#1B1917, #1B1917);
1223
- --jkl-color-warning-border-strong: #B98900;
1224
- --jkl-color-warning-border-strong: light-dark(#B98900, #E4B63A);
1225
- --jkl-color-warning-border-default: #B98900;
1226
- --jkl-color-warning-border-default: light-dark(#B98900, #E4B63A);
1227
- --jkl-color-warning-border-subdued: #DECC8D;
1228
- --jkl-color-warning-border-subdued: light-dark(#DECC8D, #8B6B22);
1229
- --jkl-color-success-background-page: #EEF7F0;
1230
- --jkl-color-success-background-page: light-dark(#EEF7F0, #173122);
1231
- --jkl-color-success-background-container: #D7EADB;
1232
- --jkl-color-success-background-container: light-dark(#D7EADB, #234530);
1233
- --jkl-color-success-background-action: #2E8C4A;
1234
- --jkl-color-success-background-action: light-dark(#2E8C4A, #67B479);
1235
- --jkl-color-success-text-default: #1E5D31;
1236
- --jkl-color-success-text-default: light-dark(#1E5D31, #F1FBF3);
1237
- --jkl-color-success-text-subdued: #507A5B;
1238
- --jkl-color-success-text-subdued: light-dark(#507A5B, #C9DDCE);
1239
- --jkl-color-success-text-on-action: #F9F9F9;
1240
- --jkl-color-success-text-on-action: light-dark(#F9F9F9, #1B1917);
1241
- --jkl-color-success-border-strong: #2E8C4A;
1242
- --jkl-color-success-border-strong: light-dark(#2E8C4A, #67B479);
1243
- --jkl-color-success-border-default: #2E8C4A;
1244
- --jkl-color-success-border-default: light-dark(#2E8C4A, #67B479);
1245
- --jkl-color-success-border-subdued: #94B79B;
1246
- --jkl-color-success-border-subdued: light-dark(#94B79B, #507A5B);
1247
- --jkl-color-info-background-page: #EEF5FE;
1248
- --jkl-color-info-background-page: light-dark(#EEF5FE, #162A40);
1249
- --jkl-color-info-background-container: #DDEBFB;
1250
- --jkl-color-info-background-container: light-dark(#DDEBFB, #264261);
1251
- --jkl-color-info-background-action: #4AA3F0;
1252
- --jkl-color-info-background-action: light-dark(#4AA3F0, #7EBEF4);
1253
- --jkl-color-info-text-default: #1B3B60;
1254
- --jkl-color-info-text-default: light-dark(#1B3B60, #F5FAFF);
1255
- --jkl-color-info-text-subdued: #4E6C8E;
1256
- --jkl-color-info-text-subdued: light-dark(#4E6C8E, #D7E9F8);
1257
- --jkl-color-info-text-on-action: #F9F9F9;
1258
- --jkl-color-info-text-on-action: light-dark(#F9F9F9, #1B1917);
1259
- --jkl-color-info-border-strong: #4AA3F0;
1260
- --jkl-color-info-border-strong: light-dark(#4AA3F0, #7EBEF4);
1261
- --jkl-color-info-border-default: #4AA3F0;
1262
- --jkl-color-info-border-default: light-dark(#4AA3F0, #7EBEF4);
1263
- --jkl-color-info-border-subdued: #A9A9CA;
1264
- --jkl-color-info-border-subdued: light-dark(#A9A9CA, #4E6C8E);
1265
- --jkl-color-error-background-page: #FDEEEE;
1266
- --jkl-color-error-background-page: light-dark(#FDEEEE, #3A1C1C);
1267
- --jkl-color-error-background-container: #F8D1D1;
1268
- --jkl-color-error-background-container: light-dark(#F8D1D1, #5B2828);
1269
- --jkl-color-error-background-action: #E84B3C;
1270
- --jkl-color-error-background-action: light-dark(#E84B3C, #F27B70);
1271
- --jkl-color-error-text-default: #7B1F18;
1272
- --jkl-color-error-text-default: light-dark(#7B1F18, #FFF1EF);
1273
- --jkl-color-error-text-subdued: #A14E46;
1274
- --jkl-color-error-text-subdued: light-dark(#A14E46, #F1C8C4);
1275
- --jkl-color-error-text-on-action: #F9F9F9;
1276
- --jkl-color-error-text-on-action: light-dark(#F9F9F9, #1B1917);
1277
- --jkl-color-error-border-strong: #E84B3C;
1278
- --jkl-color-error-border-strong: light-dark(#E84B3C, #F27B70);
1279
- --jkl-color-error-border-default: #E84B3C;
1280
- --jkl-color-error-border-default: light-dark(#E84B3C, #F27B70);
1281
- --jkl-color-error-border-subdued: #DE9E9E;
1282
- --jkl-color-error-border-subdued: light-dark(#DE9E9E, #A14E46);
1161
+ --jkl-color-background-page: #F3F0ED;
1162
+ --jkl-color-background-page: light-dark(#F3F0ED, #0E0D0C);
1163
+ --jkl-color-background-container: #FFFFFF;
1164
+ --jkl-color-background-container: light-dark(#FFFFFF, #3E3A36);
1165
+ --jkl-color-background-container-accent: #E6E2DB;
1166
+ --jkl-color-background-container-accent: light-dark(#E6E2DB, #2A2724);
1167
+ --jkl-color-background-contrast: #1B1917;
1168
+ --jkl-color-background-contrast: light-dark(#1B1917, #F3F0ED);
1169
+ --jkl-color-text-default: #1B1917;
1170
+ --jkl-color-text-default: light-dark(#1B1917, #F9F9F9);
1171
+ --jkl-color-text-subdued: #636060;
1172
+ --jkl-color-text-subdued: light-dark(#636060, #C8C5C3);
1173
+ --jkl-color-text-accent: #000000;
1174
+ --jkl-color-text-accent: light-dark(#000000, #FFFFFF);
1175
+ --jkl-color-text-on-contrast: #F9F9F9;
1176
+ --jkl-color-text-on-contrast: light-dark(#F9F9F9, #1B1917);
1177
+ --jkl-color-border-default: #636060;
1178
+ --jkl-color-border-default: light-dark(#636060, #C8C5C3);
1179
+ --jkl-color-border-subdued: #C8C5C3;
1180
+ --jkl-color-border-subdued: light-dark(#C8C5C3, #636060);
1181
+ --jkl-color-border-strong: #1B1917;
1182
+ --jkl-color-border-strong: light-dark(#1B1917, #F9F9F9);
1183
+ --jkl-color-warning-background-page: #FFFFFF;
1184
+ --jkl-color-warning-background-page: light-dark(#FFFFFF, #000000);
1185
+ --jkl-color-warning-background-container: #F1DFD1;
1186
+ --jkl-color-warning-background-container: light-dark(#F1DFD1, #61441F);
1187
+ --jkl-color-warning-background-container-accent: #EAC7A8;
1188
+ --jkl-color-warning-background-container-accent: light-dark(#EAC7A8, #75542B);
1189
+ --jkl-color-warning-background-contrast: #8B6539;
1190
+ --jkl-color-warning-background-contrast: light-dark(#8B6539, #8B6539);
1191
+ --jkl-color-warning-text-default: #000000;
1192
+ --jkl-color-warning-text-default: light-dark(#000000, #FFFFFF);
1193
+ --jkl-color-warning-text-subdued: #3E3A36;
1194
+ --jkl-color-warning-text-subdued: light-dark(#3E3A36, #DFD8CE);
1195
+ --jkl-color-warning-text-accent: #000000;
1196
+ --jkl-color-warning-text-accent: light-dark(#000000, #FFFFFF);
1197
+ --jkl-color-warning-text-on-contrast: #FFFFFF;
1198
+ --jkl-color-warning-text-on-contrast: light-dark(#FFFFFF, #000000);
1199
+ --jkl-color-warning-border-default: #A17747;
1200
+ --jkl-color-warning-border-default: light-dark(#A17747, #B68957);
1201
+ --jkl-color-warning-border-subdued: #E3B07A;
1202
+ --jkl-color-warning-border-subdued: light-dark(#E3B07A, #75542B);
1203
+ --jkl-color-warning-border-strong: #61441F;
1204
+ --jkl-color-warning-border-strong: light-dark(#61441F, #A17747);
1205
+ --jkl-color-success-background-page: #FFFFFF;
1206
+ --jkl-color-success-background-page: light-dark(#FFFFFF, #000000);
1207
+ --jkl-color-success-background-container: #C6E6CD;
1208
+ --jkl-color-success-background-container: light-dark(#C6E6CD, #15341E);
1209
+ --jkl-color-success-background-container-accent: #ACD3B5;
1210
+ --jkl-color-success-background-container-accent: light-dark(#ACD3B5, #24492E);
1211
+ --jkl-color-success-background-contrast: #345F40;
1212
+ --jkl-color-success-background-contrast: light-dark(#345F40, #467653);
1213
+ --jkl-color-success-text-default: #000000;
1214
+ --jkl-color-success-text-default: light-dark(#000000, #FFFFFF);
1215
+ --jkl-color-success-text-subdued: #3E3A36;
1216
+ --jkl-color-success-text-subdued: light-dark(#3E3A36, #DFD8CE);
1217
+ --jkl-color-success-text-accent: #000000;
1218
+ --jkl-color-success-text-accent: light-dark(#000000, #FFFFFF);
1219
+ --jkl-color-success-text-on-contrast: #FFFFFF;
1220
+ --jkl-color-success-text-on-contrast: light-dark(#FFFFFF, #000000);
1221
+ --jkl-color-success-border-default: #467653;
1222
+ --jkl-color-success-border-default: light-dark(#467653, #598D67);
1223
+ --jkl-color-success-border-subdued: #8CBC98;
1224
+ --jkl-color-success-border-subdued: light-dark(#8CBC98, #24492E);
1225
+ --jkl-color-success-border-strong: #15341E;
1226
+ --jkl-color-success-border-strong: light-dark(#15341E, #467653);
1227
+ --jkl-color-info-background-page: #FFFFFF;
1228
+ --jkl-color-info-background-page: light-dark(#FFFFFF, #000000);
1229
+ --jkl-color-info-background-container: #E3E3F4;
1230
+ --jkl-color-info-background-container: light-dark(#E3E3F4, #1E1E81);
1231
+ --jkl-color-info-background-container-accent: #D3D3F6;
1232
+ --jkl-color-info-background-container-accent: light-dark(#D3D3F6, #2D2DB3);
1233
+ --jkl-color-info-background-contrast: #4646D1;
1234
+ --jkl-color-info-background-contrast: light-dark(#4646D1, #6262DC);
1235
+ --jkl-color-info-text-default: #000000;
1236
+ --jkl-color-info-text-default: light-dark(#000000, #FFFFFF);
1237
+ --jkl-color-info-text-subdued: #3E3A36;
1238
+ --jkl-color-info-text-subdued: light-dark(#3E3A36, #DFD8CE);
1239
+ --jkl-color-info-text-accent: #000000;
1240
+ --jkl-color-info-text-accent: light-dark(#000000, #FFFFFF);
1241
+ --jkl-color-info-text-on-contrast: #FFFFFF;
1242
+ --jkl-color-info-text-on-contrast: light-dark(#FFFFFF, #000000);
1243
+ --jkl-color-info-border-default: #6262DC;
1244
+ --jkl-color-info-border-default: light-dark(#6262DC, #7E7EE4);
1245
+ --jkl-color-info-border-subdued: #B7B7F0;
1246
+ --jkl-color-info-border-subdued: light-dark(#B7B7F0, #2D2DB3);
1247
+ --jkl-color-info-border-strong: #1E1E81;
1248
+ --jkl-color-info-border-strong: light-dark(#1E1E81, #6262DC);
1249
+ --jkl-color-error-background-page: #FFFFFF;
1250
+ --jkl-color-error-background-page: light-dark(#FFFFFF, #000000);
1251
+ --jkl-color-error-background-container: #F3DEDE;
1252
+ --jkl-color-error-background-container: light-dark(#F3DEDE, #610F0F);
1253
+ --jkl-color-error-background-container-accent: #F2C9C9;
1254
+ --jkl-color-error-background-container-accent: light-dark(#F2C9C9, #891919);
1255
+ --jkl-color-error-background-contrast: #B32424;
1256
+ --jkl-color-error-background-contrast: light-dark(#B32424, #DF3030);
1257
+ --jkl-color-error-text-default: #000000;
1258
+ --jkl-color-error-text-default: light-dark(#000000, #FFFFFF);
1259
+ --jkl-color-error-text-subdued: #3E3A36;
1260
+ --jkl-color-error-text-subdued: light-dark(#3E3A36, #DFD8CE);
1261
+ --jkl-color-error-text-accent: #610F0F;
1262
+ --jkl-color-error-text-accent: light-dark(#610F0F, #F6B3B3);
1263
+ --jkl-color-error-text-on-contrast: #FFFFFF;
1264
+ --jkl-color-error-text-on-contrast: light-dark(#FFFFFF, #FFFFFF);
1265
+ --jkl-color-error-border-default: #DF3030;
1266
+ --jkl-color-error-border-default: light-dark(#DF3030, #F15D5D);
1267
+ --jkl-color-error-border-subdued: #F6B3B3;
1268
+ --jkl-color-error-border-subdued: light-dark(#F6B3B3, #891919);
1269
+ --jkl-color-error-border-strong: #610F0F;
1270
+ --jkl-color-error-border-strong: light-dark(#610F0F, #DF3030);
1283
1271
  /* stylelint-enable declaration-block-no-duplicate-custom-properties */
1284
1272
  }
1285
1273
  }