@fremtind/jokul 5.0.0-next.6 → 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 (142) hide show
  1. package/README.md +1 -1
  2. package/build/build-stats.html +1 -1
  3. package/build/cjs/components/card/Card.cjs +1 -1
  4. package/build/cjs/components/card/Card.cjs.map +1 -1
  5. package/build/cjs/components/card/index.d.cts +1 -1
  6. package/build/cjs/components/card/types.cjs +1 -1
  7. package/build/cjs/components/card/types.cjs.map +1 -1
  8. package/build/cjs/components/card/types.d.cts +3 -6
  9. package/build/cjs/tokens.cjs +1 -1
  10. package/build/cjs/tokens.cjs.map +1 -1
  11. package/build/cjs/tokens.d.cts +25 -32
  12. package/build/es/components/card/Card.js +1 -1
  13. package/build/es/components/card/Card.js.map +1 -1
  14. package/build/es/components/card/index.d.ts +1 -1
  15. package/build/es/components/card/types.d.ts +3 -6
  16. package/build/es/components/card/types.js +1 -1
  17. package/build/es/components/card/types.js.map +1 -1
  18. package/build/es/tokens.d.ts +25 -32
  19. package/build/es/tokens.js +1 -1
  20. package/build/es/tokens.js.map +1 -1
  21. package/codemods/__tests__/import-paths.test.mjs +189 -0
  22. package/codemods/import-paths.mjs +137 -3
  23. package/package.json +2 -1
  24. package/styles/base.css +550 -562
  25. package/styles/base.min.css +1 -1
  26. package/styles/components/autosuggest/autosuggest.css +2 -2
  27. package/styles/components/autosuggest/autosuggest.min.css +1 -1
  28. package/styles/components/autosuggest/autosuggest.scss +2 -2
  29. package/styles/components/beta/nav-link/navlink.css +1 -1
  30. package/styles/components/beta/nav-link/navlink.min.css +1 -1
  31. package/styles/components/beta/nav-link/navlink.scss +4 -2
  32. package/styles/components/button/button.css +2 -2
  33. package/styles/components/button/button.min.css +1 -1
  34. package/styles/components/button/button.scss +2 -2
  35. package/styles/components/card/card.css +3 -5
  36. package/styles/components/card/card.min.css +1 -1
  37. package/styles/components/card/card.scss +4 -7
  38. package/styles/components/checkbox/checkbox.css +1 -7
  39. package/styles/components/checkbox/checkbox.min.css +1 -1
  40. package/styles/components/checkbox/checkbox.scss +2 -8
  41. package/styles/components/checkbox-panel/checkbox-panel.css +2 -8
  42. package/styles/components/checkbox-panel/checkbox-panel.min.css +1 -1
  43. package/styles/components/chip/chip.css +4 -4
  44. package/styles/components/chip/chip.min.css +1 -1
  45. package/styles/components/chip/chip.scss +5 -5
  46. package/styles/components/combobox/combobox.css +7 -8
  47. package/styles/components/combobox/combobox.min.css +1 -1
  48. package/styles/components/combobox/combobox.scss +6 -12
  49. package/styles/components/countdown/countdown.css +2 -2
  50. package/styles/components/countdown/countdown.min.css +1 -1
  51. package/styles/components/datepicker/_calendar-date-button.scss +6 -4
  52. package/styles/components/datepicker/datepicker.css +3 -3
  53. package/styles/components/datepicker/datepicker.min.css +1 -1
  54. package/styles/components/expander/expandable.css +5 -2
  55. package/styles/components/expander/expandable.min.css +1 -1
  56. package/styles/components/expander/expandable.scss +6 -2
  57. package/styles/components/feedback/feedback.css +2 -2
  58. package/styles/components/feedback/feedback.min.css +1 -1
  59. package/styles/components/file-input/file-input.css +11 -11
  60. package/styles/components/file-input/file-input.min.css +1 -1
  61. package/styles/components/help/help.css +2 -2
  62. package/styles/components/help/help.min.css +1 -1
  63. package/styles/components/help/help.scss +4 -4
  64. package/styles/components/icon/icon.css +4 -4
  65. package/styles/components/icon/icon.min.css +1 -1
  66. package/styles/components/icon/icon.scss +73 -73
  67. package/styles/components/icon-button/icon-button.css +1 -1
  68. package/styles/components/icon-button/icon-button.min.css +1 -1
  69. package/styles/components/icon-button/icon-button.scss +1 -1
  70. package/styles/components/input-group/input-group.css +2 -2
  71. package/styles/components/input-group/input-group.min.css +1 -1
  72. package/styles/components/input-panel/input-panel.css +1 -1
  73. package/styles/components/input-panel/input-panel.min.css +1 -1
  74. package/styles/components/input-panel/input-panel.scss +2 -3
  75. package/styles/components/link-list/link-list.css +2 -2
  76. package/styles/components/link-list/link-list.min.css +1 -1
  77. package/styles/components/link-list/link-list.scss +2 -2
  78. package/styles/components/loader/loader.css +6 -6
  79. package/styles/components/loader/loader.min.css +1 -1
  80. package/styles/components/loader/skeleton-loader.css +3 -3
  81. package/styles/components/loader/skeleton-loader.min.css +1 -1
  82. package/styles/components/menu/_menu-item.scss +2 -2
  83. package/styles/components/menu/menu.css +2 -2
  84. package/styles/components/menu/menu.min.css +1 -1
  85. package/styles/components/message/message.css +3 -3
  86. package/styles/components/message/message.min.css +1 -1
  87. package/styles/components/message/message.scss +3 -6
  88. package/styles/components/pagination/pagination.css +2 -2
  89. package/styles/components/pagination/pagination.min.css +1 -1
  90. package/styles/components/pagination/pagination.scss +2 -2
  91. package/styles/components/progress-bar/progress-bar.css +1 -1
  92. package/styles/components/progress-bar/progress-bar.min.css +1 -1
  93. package/styles/components/radio-button/radio-button.css +1 -1
  94. package/styles/components/radio-button/radio-button.min.css +1 -1
  95. package/styles/components/radio-button/radio-button.scss +1 -1
  96. package/styles/components/radio-panel/radio-panel.css +1 -1
  97. package/styles/components/radio-panel/radio-panel.min.css +1 -1
  98. package/styles/components/segmented-control/segmented-control.css +13 -13
  99. package/styles/components/segmented-control/segmented-control.min.css +1 -1
  100. package/styles/components/segmented-control/segmented-control.scss +2 -2
  101. package/styles/components/select/select.css +2 -3
  102. package/styles/components/select/select.min.css +1 -1
  103. package/styles/components/select/select.scss +14 -19
  104. package/styles/components/system-message/system-message.css +5 -5
  105. package/styles/components/system-message/system-message.min.css +1 -1
  106. package/styles/components/system-message/system-message.scss +119 -118
  107. package/styles/components/table/_table-row.scss +3 -1
  108. package/styles/components/table/table.css +3 -1
  109. package/styles/components/table/table.min.css +1 -1
  110. package/styles/components/tabs/tabs.css +2 -2
  111. package/styles/components/tabs/tabs.min.css +1 -1
  112. package/styles/components/tabs/tabs.scss +3 -4
  113. package/styles/components/tag/tag.scss +2 -1
  114. package/styles/components/text-area/text-area.css +4 -4
  115. package/styles/components/text-area/text-area.min.css +1 -1
  116. package/styles/components/text-input/text-input.css +4 -4
  117. package/styles/components/text-input/text-input.min.css +1 -1
  118. package/styles/components/toast/toast.css +5 -5
  119. package/styles/components/toast/toast.min.css +1 -1
  120. package/styles/components/toast/toast.scss +4 -6
  121. package/styles/components/toggle-switch/toggle-switch.css +4 -9
  122. package/styles/components/toggle-switch/toggle-switch.min.css +1 -3
  123. package/styles/components/toggle-switch/toggle-switch.scss +4 -9
  124. package/styles/components/tooltip/tooltip.css +4 -4
  125. package/styles/components/tooltip/tooltip.min.css +1 -1
  126. package/styles/components/tooltip/tooltip.scss +4 -4
  127. package/styles/components.css +97 -107
  128. package/styles/components.min.css +1 -3
  129. package/styles/jkl/_tokens.scss +67 -73
  130. package/styles/shared/input/shared-input-styles.scss +5 -9
  131. package/styles/tailwind.css +110 -108
  132. package/styles/theme/_color-scheme.scss +110 -132
  133. package/styles/theme/brands/dnb/_color-scheme.scss +110 -108
  134. package/styles/theme/brands/eika/_color-scheme.scss +110 -108
  135. package/styles/theme/brands/fremtind/_color-scheme.scss +110 -108
  136. package/styles/theme/brands/sparebank1/_color-scheme.scss +110 -108
  137. package/build/cjs/tailwind/colors.cjs +0 -2
  138. package/build/cjs/tailwind/colors.cjs.map +0 -1
  139. package/build/cjs/tailwind/colors.d.cts +0 -39
  140. package/build/es/tailwind/colors.d.ts +0 -39
  141. package/build/es/tailwind/colors.js +0 -2
  142. package/build/es/tailwind/colors.js.map +0 -1
package/styles/theme/brands/eika/_color-scheme.scss CHANGED
@@ -6,114 +6,116 @@
6
6
  @layer jokul.theme {
7
7
  [data-brand="eika"] {
8
8
  /* stylelint-disable declaration-block-no-duplicate-custom-properties -- fallback and light-dark() declarations are intentionally paired. */
9
- --jkl-color-neutral-background-page: #F4F2EF;
10
- --jkl-color-neutral-background-page: light-dark(#F4F2EF, #1B1917);
11
- --jkl-color-neutral-background-container: #F9F9F9;
12
- --jkl-color-neutral-background-container: light-dark(#F9F9F9, #313030);
13
- --jkl-color-neutral-background-action: #1B1917;
14
- --jkl-color-neutral-background-action: light-dark(#1B1917, #F9F9F9);
15
- --jkl-color-neutral-text-default: #1B1917;
16
- --jkl-color-neutral-text-default: light-dark(#1B1917, #F9F9F9);
17
- --jkl-color-neutral-text-subdued: #636060;
18
- --jkl-color-neutral-text-subdued: light-dark(#636060, #C8C5C3);
19
- --jkl-color-neutral-text-on-action: #F9F9F9;
20
- --jkl-color-neutral-text-on-action: light-dark(#F9F9F9, #1B1917);
21
- --jkl-color-neutral-border-strong: #1B1917;
22
- --jkl-color-neutral-border-strong: light-dark(#1B1917, #F9F9F9);
23
- --jkl-color-neutral-border-default: #636060;
24
- --jkl-color-neutral-border-default: light-dark(#636060, #C8C5C3);
25
- --jkl-color-neutral-border-subdued: #C8C5C3;
26
- --jkl-color-neutral-border-subdued: light-dark(#C8C5C3, #636060);
27
- --jkl-color-accent-background-page: #F4F2EF;
28
- --jkl-color-accent-background-page: light-dark(#F4F2EF, #1B1917);
29
- --jkl-color-accent-background-container: #F9F9F9;
30
- --jkl-color-accent-background-container: light-dark(#F9F9F9, #313030);
31
- --jkl-color-accent-background-action: #90D000;
32
- --jkl-color-accent-background-action: light-dark(#90D000, #D3EC99);
33
- --jkl-color-accent-text-default: #1B1917;
34
- --jkl-color-accent-text-default: light-dark(#1B1917, #F9F9F9);
35
- --jkl-color-accent-text-subdued: #636060;
36
- --jkl-color-accent-text-subdued: light-dark(#636060, #C8C5C3);
37
- --jkl-color-accent-text-on-action: #00383D;
38
- --jkl-color-accent-text-on-action: light-dark(#00383D, #00383D);
39
- --jkl-color-accent-border-strong: #90D000;
40
- --jkl-color-accent-border-strong: light-dark(#90D000, #D3EC99);
41
- --jkl-color-accent-border-default: #90D000;
42
- --jkl-color-accent-border-default: light-dark(#90D000, #D3EC99);
43
- --jkl-color-accent-border-subdued: #D3EC99;
44
- --jkl-color-accent-border-subdued: light-dark(#D3EC99, #F4FAE6);
45
- --jkl-color-warning-background-page: #FCF7E8;
46
- --jkl-color-warning-background-page: light-dark(#FCF7E8, #392B10);
47
- --jkl-color-warning-background-container: #F7EBC2;
48
- --jkl-color-warning-background-container: light-dark(#F7EBC2, #5A4519);
49
- --jkl-color-warning-background-action: #B98900;
50
- --jkl-color-warning-background-action: light-dark(#B98900, #E4B63A);
51
- --jkl-color-warning-text-default: #5B4200;
52
- --jkl-color-warning-text-default: light-dark(#5B4200, #FFF5D9);
53
- --jkl-color-warning-text-subdued: #8B6B22;
54
- --jkl-color-warning-text-subdued: light-dark(#8B6B22, #EEDFAE);
55
- --jkl-color-warning-text-on-action: #1B1917;
56
- --jkl-color-warning-text-on-action: light-dark(#1B1917, #1B1917);
57
- --jkl-color-warning-border-strong: #B98900;
58
- --jkl-color-warning-border-strong: light-dark(#B98900, #E4B63A);
59
- --jkl-color-warning-border-default: #B98900;
60
- --jkl-color-warning-border-default: light-dark(#B98900, #E4B63A);
61
- --jkl-color-warning-border-subdued: #DECC8D;
62
- --jkl-color-warning-border-subdued: light-dark(#DECC8D, #8B6B22);
63
- --jkl-color-success-background-page: #EEF7F0;
64
- --jkl-color-success-background-page: light-dark(#EEF7F0, #173122);
65
- --jkl-color-success-background-container: #D7EADB;
66
- --jkl-color-success-background-container: light-dark(#D7EADB, #234530);
67
- --jkl-color-success-background-action: #2E8C4A;
68
- --jkl-color-success-background-action: light-dark(#2E8C4A, #67B479);
69
- --jkl-color-success-text-default: #1E5D31;
70
- --jkl-color-success-text-default: light-dark(#1E5D31, #F1FBF3);
71
- --jkl-color-success-text-subdued: #507A5B;
72
- --jkl-color-success-text-subdued: light-dark(#507A5B, #C9DDCE);
73
- --jkl-color-success-text-on-action: #F9F9F9;
74
- --jkl-color-success-text-on-action: light-dark(#F9F9F9, #1B1917);
75
- --jkl-color-success-border-strong: #2E8C4A;
76
- --jkl-color-success-border-strong: light-dark(#2E8C4A, #67B479);
77
- --jkl-color-success-border-default: #2E8C4A;
78
- --jkl-color-success-border-default: light-dark(#2E8C4A, #67B479);
79
- --jkl-color-success-border-subdued: #94B79B;
80
- --jkl-color-success-border-subdued: light-dark(#94B79B, #507A5B);
81
- --jkl-color-info-background-page: #EEF5FE;
82
- --jkl-color-info-background-page: light-dark(#EEF5FE, #162A40);
83
- --jkl-color-info-background-container: #DDEBFB;
84
- --jkl-color-info-background-container: light-dark(#DDEBFB, #264261);
85
- --jkl-color-info-background-action: #4AA3F0;
86
- --jkl-color-info-background-action: light-dark(#4AA3F0, #7EBEF4);
87
- --jkl-color-info-text-default: #1B3B60;
88
- --jkl-color-info-text-default: light-dark(#1B3B60, #F5FAFF);
89
- --jkl-color-info-text-subdued: #4E6C8E;
90
- --jkl-color-info-text-subdued: light-dark(#4E6C8E, #D7E9F8);
91
- --jkl-color-info-text-on-action: #F9F9F9;
92
- --jkl-color-info-text-on-action: light-dark(#F9F9F9, #1B1917);
93
- --jkl-color-info-border-strong: #4AA3F0;
94
- --jkl-color-info-border-strong: light-dark(#4AA3F0, #7EBEF4);
95
- --jkl-color-info-border-default: #4AA3F0;
96
- --jkl-color-info-border-default: light-dark(#4AA3F0, #7EBEF4);
97
- --jkl-color-info-border-subdued: #A9A9CA;
98
- --jkl-color-info-border-subdued: light-dark(#A9A9CA, #4E6C8E);
99
- --jkl-color-error-background-page: #FDEEEE;
100
- --jkl-color-error-background-page: light-dark(#FDEEEE, #3A1C1C);
101
- --jkl-color-error-background-container: #F8D1D1;
102
- --jkl-color-error-background-container: light-dark(#F8D1D1, #5B2828);
103
- --jkl-color-error-background-action: #E84B3C;
104
- --jkl-color-error-background-action: light-dark(#E84B3C, #F27B70);
105
- --jkl-color-error-text-default: #7B1F18;
106
- --jkl-color-error-text-default: light-dark(#7B1F18, #FFF1EF);
107
- --jkl-color-error-text-subdued: #A14E46;
108
- --jkl-color-error-text-subdued: light-dark(#A14E46, #F1C8C4);
109
- --jkl-color-error-text-on-action: #F9F9F9;
110
- --jkl-color-error-text-on-action: light-dark(#F9F9F9, #1B1917);
111
- --jkl-color-error-border-strong: #E84B3C;
112
- --jkl-color-error-border-strong: light-dark(#E84B3C, #F27B70);
113
- --jkl-color-error-border-default: #E84B3C;
114
- --jkl-color-error-border-default: light-dark(#E84B3C, #F27B70);
115
- --jkl-color-error-border-subdued: #DE9E9E;
116
- --jkl-color-error-border-subdued: light-dark(#DE9E9E, #A14E46);
9
+ --jkl-color-background-page: #FFFFFF;
10
+ --jkl-color-background-page: light-dark(#FFFFFF, #FFFFFF);
11
+ --jkl-color-background-container: #FBFAFA;
12
+ --jkl-color-background-container: light-dark(#FBFAFA, #ECE5E0);
13
+ --jkl-color-background-container-accent: #ECE5E0;
14
+ --jkl-color-background-container-accent: light-dark(#ECE5E0, #ECE5E0);
15
+ --jkl-color-background-contrast: #00383D;
16
+ --jkl-color-background-contrast: light-dark(#00383D, #00383D);
17
+ --jkl-color-text-default: #00383D;
18
+ --jkl-color-text-default: light-dark(#00383D, #00383D);
19
+ --jkl-color-text-subdued: #4D7477;
20
+ --jkl-color-text-subdued: light-dark(#4D7477, #4D7477);
21
+ --jkl-color-text-accent: #00383D;
22
+ --jkl-color-text-accent: light-dark(#00383D, #00383D);
23
+ --jkl-color-text-on-contrast: #FFFFFF;
24
+ --jkl-color-text-on-contrast: light-dark(#FFFFFF, #FFFFFF);
25
+ --jkl-color-border-default: #ECE5E0;
26
+ --jkl-color-border-default: light-dark(#ECE5E0, #ECE5E0);
27
+ --jkl-color-border-subdued: #F7F4F2;
28
+ --jkl-color-border-subdued: light-dark(#F7F4F2, #F7F4F2);
29
+ --jkl-color-border-strong: #4D7477;
30
+ --jkl-color-border-strong: light-dark(#4D7477, #4D7477);
31
+ --jkl-color-warning-background-page: #FFFFFF;
32
+ --jkl-color-warning-background-page: light-dark(#FFFFFF, #FFFFFF);
33
+ --jkl-color-warning-background-container: #FFE5C7;
34
+ --jkl-color-warning-background-container: light-dark(#FFE5C7, #FFE5C7);
35
+ --jkl-color-warning-background-container-accent: #ECE5E0;
36
+ --jkl-color-warning-background-container-accent: light-dark(#ECE5E0, #ECE5E0);
37
+ --jkl-color-warning-background-contrast: #FFBD74;
38
+ --jkl-color-warning-background-contrast: light-dark(#FFBD74, #FFBD74);
39
+ --jkl-color-warning-text-default: #00383D;
40
+ --jkl-color-warning-text-default: light-dark(#00383D, #00383D);
41
+ --jkl-color-warning-text-subdued: #4D7477;
42
+ --jkl-color-warning-text-subdued: light-dark(#4D7477, #4D7477);
43
+ --jkl-color-warning-text-accent: #00383D;
44
+ --jkl-color-warning-text-accent: light-dark(#00383D, #00383D);
45
+ --jkl-color-warning-text-on-contrast: #FFFFFF;
46
+ --jkl-color-warning-text-on-contrast: light-dark(#FFFFFF, #FFFFFF);
47
+ --jkl-color-warning-border-default: #ECE5E0;
48
+ --jkl-color-warning-border-default: light-dark(#ECE5E0, #ECE5E0);
49
+ --jkl-color-warning-border-subdued: #F7F4F2;
50
+ --jkl-color-warning-border-subdued: light-dark(#F7F4F2, #F7F4F2);
51
+ --jkl-color-warning-border-strong: #4D7477;
52
+ --jkl-color-warning-border-strong: light-dark(#4D7477, #4D7477);
53
+ --jkl-color-success-background-page: #FFFFFF;
54
+ --jkl-color-success-background-page: light-dark(#FFFFFF, #FFFFFF);
55
+ --jkl-color-success-background-container: #ECF7D4;
56
+ --jkl-color-success-background-container: light-dark(#ECF7D4, #ECF7D4);
57
+ --jkl-color-success-background-container-accent: #ECE5E0;
58
+ --jkl-color-success-background-container-accent: light-dark(#ECE5E0, #ECE5E0);
59
+ --jkl-color-success-background-contrast: #00383D;
60
+ --jkl-color-success-background-contrast: light-dark(#00383D, #00383D);
61
+ --jkl-color-success-text-default: #00383D;
62
+ --jkl-color-success-text-default: light-dark(#00383D, #00383D);
63
+ --jkl-color-success-text-subdued: #4D7477;
64
+ --jkl-color-success-text-subdued: light-dark(#4D7477, #4D7477);
65
+ --jkl-color-success-text-accent: #00383D;
66
+ --jkl-color-success-text-accent: light-dark(#00383D, #00383D);
67
+ --jkl-color-success-text-on-contrast: #FFFFFF;
68
+ --jkl-color-success-text-on-contrast: light-dark(#FFFFFF, #FFFFFF);
69
+ --jkl-color-success-border-default: #ECE5E0;
70
+ --jkl-color-success-border-default: light-dark(#ECE5E0, #ECE5E0);
71
+ --jkl-color-success-border-subdued: #F7F4F2;
72
+ --jkl-color-success-border-subdued: light-dark(#F7F4F2, #F7F4F2);
73
+ --jkl-color-success-border-strong: #4D7477;
74
+ --jkl-color-success-border-strong: light-dark(#4D7477, #4D7477);
75
+ --jkl-color-info-background-page: #FFFFFF;
76
+ --jkl-color-info-background-page: light-dark(#FFFFFF, #FFFFFF);
77
+ --jkl-color-info-background-container: #E6F3F5;
78
+ --jkl-color-info-background-container: light-dark(#E6F3F5, #E6F3F5);
79
+ --jkl-color-info-background-container-accent: #ECE5E0;
80
+ --jkl-color-info-background-container-accent: light-dark(#ECE5E0, #ECE5E0);
81
+ --jkl-color-info-background-contrast: #00383D;
82
+ --jkl-color-info-background-contrast: light-dark(#00383D, #00383D);
83
+ --jkl-color-info-text-default: #00383D;
84
+ --jkl-color-info-text-default: light-dark(#00383D, #00383D);
85
+ --jkl-color-info-text-subdued: #4D7477;
86
+ --jkl-color-info-text-subdued: light-dark(#4D7477, #4D7477);
87
+ --jkl-color-info-text-accent: #00383D;
88
+ --jkl-color-info-text-accent: light-dark(#00383D, #00383D);
89
+ --jkl-color-info-text-on-contrast: #FFFFFF;
90
+ --jkl-color-info-text-on-contrast: light-dark(#FFFFFF, #FFFFFF);
91
+ --jkl-color-info-border-default: #ECE5E0;
92
+ --jkl-color-info-border-default: light-dark(#ECE5E0, #ECE5E0);
93
+ --jkl-color-info-border-subdued: #F7F4F2;
94
+ --jkl-color-info-border-subdued: light-dark(#F7F4F2, #F7F4F2);
95
+ --jkl-color-info-border-strong: #4D7477;
96
+ --jkl-color-info-border-strong: light-dark(#4D7477, #4D7477);
97
+ --jkl-color-error-background-page: #FFFFFF;
98
+ --jkl-color-error-background-page: light-dark(#FFFFFF, #FFFFFF);
99
+ --jkl-color-error-background-container: #FDDEE6;
100
+ --jkl-color-error-background-container: light-dark(#FDDEE6, #FDDEE6);
101
+ --jkl-color-error-background-container-accent: #ECE5E0;
102
+ --jkl-color-error-background-container-accent: light-dark(#ECE5E0, #ECE5E0);
103
+ --jkl-color-error-background-contrast: #B83653;
104
+ --jkl-color-error-background-contrast: light-dark(#B83653, #B83653);
105
+ --jkl-color-error-text-default: #00383D;
106
+ --jkl-color-error-text-default: light-dark(#00383D, #00383D);
107
+ --jkl-color-error-text-subdued: #4D7477;
108
+ --jkl-color-error-text-subdued: light-dark(#4D7477, #4D7477);
109
+ --jkl-color-error-text-accent: #00383D;
110
+ --jkl-color-error-text-accent: light-dark(#00383D, #00383D);
111
+ --jkl-color-error-text-on-contrast: #FFFFFF;
112
+ --jkl-color-error-text-on-contrast: light-dark(#FFFFFF, #FFFFFF);
113
+ --jkl-color-error-border-default: #ECE5E0;
114
+ --jkl-color-error-border-default: light-dark(#ECE5E0, #ECE5E0);
115
+ --jkl-color-error-border-subdued: #F7F4F2;
116
+ --jkl-color-error-border-subdued: light-dark(#F7F4F2, #F7F4F2);
117
+ --jkl-color-error-border-strong: #4D7477;
118
+ --jkl-color-error-border-strong: light-dark(#4D7477, #4D7477);
117
119
  /* stylelint-enable declaration-block-no-duplicate-custom-properties */
118
120
  }
119
121
  }
package/styles/theme/brands/fremtind/_color-scheme.scss CHANGED
@@ -6,114 +6,116 @@
6
6
  @layer jokul.theme {
7
7
  [data-brand="fremtind"] {
8
8
  /* stylelint-disable declaration-block-no-duplicate-custom-properties -- fallback and light-dark() declarations are intentionally paired. */
9
- --jkl-color-neutral-background-page: #F4F2EF;
10
- --jkl-color-neutral-background-page: light-dark(#F4F2EF, #1B1917);
11
- --jkl-color-neutral-background-container: #F9F9F9;
12
- --jkl-color-neutral-background-container: light-dark(#F9F9F9, #313030);
13
- --jkl-color-neutral-background-action: #1B1917;
14
- --jkl-color-neutral-background-action: light-dark(#1B1917, #F9F9F9);
15
- --jkl-color-neutral-text-default: #1B1917;
16
- --jkl-color-neutral-text-default: light-dark(#1B1917, #F9F9F9);
17
- --jkl-color-neutral-text-subdued: #636060;
18
- --jkl-color-neutral-text-subdued: light-dark(#636060, #C8C5C3);
19
- --jkl-color-neutral-text-on-action: #F9F9F9;
20
- --jkl-color-neutral-text-on-action: light-dark(#F9F9F9, #1B1917);
21
- --jkl-color-neutral-border-strong: #1B1917;
22
- --jkl-color-neutral-border-strong: light-dark(#1B1917, #F9F9F9);
23
- --jkl-color-neutral-border-default: #636060;
24
- --jkl-color-neutral-border-default: light-dark(#636060, #C8C5C3);
25
- --jkl-color-neutral-border-subdued: #C8C5C3;
26
- --jkl-color-neutral-border-subdued: light-dark(#C8C5C3, #636060);
27
- --jkl-color-accent-background-page: #F4F2EF;
28
- --jkl-color-accent-background-page: light-dark(#F4F2EF, #1B1917);
29
- --jkl-color-accent-background-container: #F9F9F9;
30
- --jkl-color-accent-background-container: light-dark(#F9F9F9, #313030);
31
- --jkl-color-accent-background-action: #1B1917;
32
- --jkl-color-accent-background-action: light-dark(#1B1917, #F9F9F9);
33
- --jkl-color-accent-text-default: #1B1917;
34
- --jkl-color-accent-text-default: light-dark(#1B1917, #F9F9F9);
35
- --jkl-color-accent-text-subdued: #636060;
36
- --jkl-color-accent-text-subdued: light-dark(#636060, #C8C5C3);
37
- --jkl-color-accent-text-on-action: #F9F9F9;
38
- --jkl-color-accent-text-on-action: light-dark(#F9F9F9, #1B1917);
39
- --jkl-color-accent-border-strong: #1B1917;
40
- --jkl-color-accent-border-strong: light-dark(#1B1917, #F9F9F9);
41
- --jkl-color-accent-border-default: #636060;
42
- --jkl-color-accent-border-default: light-dark(#636060, #C8C5C3);
43
- --jkl-color-accent-border-subdued: #C8C5C3;
44
- --jkl-color-accent-border-subdued: light-dark(#C8C5C3, #636060);
45
- --jkl-color-warning-background-page: #FCF7E8;
46
- --jkl-color-warning-background-page: light-dark(#FCF7E8, #392B10);
47
- --jkl-color-warning-background-container: #F7EBC2;
48
- --jkl-color-warning-background-container: light-dark(#F7EBC2, #5A4519);
49
- --jkl-color-warning-background-action: #B98900;
50
- --jkl-color-warning-background-action: light-dark(#B98900, #E4B63A);
51
- --jkl-color-warning-text-default: #5B4200;
52
- --jkl-color-warning-text-default: light-dark(#5B4200, #FFF5D9);
53
- --jkl-color-warning-text-subdued: #8B6B22;
54
- --jkl-color-warning-text-subdued: light-dark(#8B6B22, #EEDFAE);
55
- --jkl-color-warning-text-on-action: #1B1917;
56
- --jkl-color-warning-text-on-action: light-dark(#1B1917, #1B1917);
57
- --jkl-color-warning-border-strong: #B98900;
58
- --jkl-color-warning-border-strong: light-dark(#B98900, #E4B63A);
59
- --jkl-color-warning-border-default: #B98900;
60
- --jkl-color-warning-border-default: light-dark(#B98900, #E4B63A);
61
- --jkl-color-warning-border-subdued: #DECC8D;
62
- --jkl-color-warning-border-subdued: light-dark(#DECC8D, #8B6B22);
63
- --jkl-color-success-background-page: #EEF7F0;
64
- --jkl-color-success-background-page: light-dark(#EEF7F0, #173122);
65
- --jkl-color-success-background-container: #D7EADB;
66
- --jkl-color-success-background-container: light-dark(#D7EADB, #234530);
67
- --jkl-color-success-background-action: #2E8C4A;
68
- --jkl-color-success-background-action: light-dark(#2E8C4A, #67B479);
69
- --jkl-color-success-text-default: #1E5D31;
70
- --jkl-color-success-text-default: light-dark(#1E5D31, #F1FBF3);
71
- --jkl-color-success-text-subdued: #507A5B;
72
- --jkl-color-success-text-subdued: light-dark(#507A5B, #C9DDCE);
73
- --jkl-color-success-text-on-action: #F9F9F9;
74
- --jkl-color-success-text-on-action: light-dark(#F9F9F9, #1B1917);
75
- --jkl-color-success-border-strong: #2E8C4A;
76
- --jkl-color-success-border-strong: light-dark(#2E8C4A, #67B479);
77
- --jkl-color-success-border-default: #2E8C4A;
78
- --jkl-color-success-border-default: light-dark(#2E8C4A, #67B479);
79
- --jkl-color-success-border-subdued: #94B79B;
80
- --jkl-color-success-border-subdued: light-dark(#94B79B, #507A5B);
81
- --jkl-color-info-background-page: #EEF5FE;
82
- --jkl-color-info-background-page: light-dark(#EEF5FE, #162A40);
83
- --jkl-color-info-background-container: #DDEBFB;
84
- --jkl-color-info-background-container: light-dark(#DDEBFB, #264261);
85
- --jkl-color-info-background-action: #4AA3F0;
86
- --jkl-color-info-background-action: light-dark(#4AA3F0, #7EBEF4);
87
- --jkl-color-info-text-default: #1B3B60;
88
- --jkl-color-info-text-default: light-dark(#1B3B60, #F5FAFF);
89
- --jkl-color-info-text-subdued: #4E6C8E;
90
- --jkl-color-info-text-subdued: light-dark(#4E6C8E, #D7E9F8);
91
- --jkl-color-info-text-on-action: #F9F9F9;
92
- --jkl-color-info-text-on-action: light-dark(#F9F9F9, #1B1917);
93
- --jkl-color-info-border-strong: #4AA3F0;
94
- --jkl-color-info-border-strong: light-dark(#4AA3F0, #7EBEF4);
95
- --jkl-color-info-border-default: #4AA3F0;
96
- --jkl-color-info-border-default: light-dark(#4AA3F0, #7EBEF4);
97
- --jkl-color-info-border-subdued: #A9A9CA;
98
- --jkl-color-info-border-subdued: light-dark(#A9A9CA, #4E6C8E);
99
- --jkl-color-error-background-page: #FDEEEE;
100
- --jkl-color-error-background-page: light-dark(#FDEEEE, #3A1C1C);
101
- --jkl-color-error-background-container: #F8D1D1;
102
- --jkl-color-error-background-container: light-dark(#F8D1D1, #5B2828);
103
- --jkl-color-error-background-action: #E84B3C;
104
- --jkl-color-error-background-action: light-dark(#E84B3C, #F27B70);
105
- --jkl-color-error-text-default: #7B1F18;
106
- --jkl-color-error-text-default: light-dark(#7B1F18, #FFF1EF);
107
- --jkl-color-error-text-subdued: #A14E46;
108
- --jkl-color-error-text-subdued: light-dark(#A14E46, #F1C8C4);
109
- --jkl-color-error-text-on-action: #F9F9F9;
110
- --jkl-color-error-text-on-action: light-dark(#F9F9F9, #1B1917);
111
- --jkl-color-error-border-strong: #E84B3C;
112
- --jkl-color-error-border-strong: light-dark(#E84B3C, #F27B70);
113
- --jkl-color-error-border-default: #E84B3C;
114
- --jkl-color-error-border-default: light-dark(#E84B3C, #F27B70);
115
- --jkl-color-error-border-subdued: #DE9E9E;
116
- --jkl-color-error-border-subdued: light-dark(#DE9E9E, #A14E46);
9
+ --jkl-color-background-page: #F3F0ED;
10
+ --jkl-color-background-page: light-dark(#F3F0ED, #0E0D0C);
11
+ --jkl-color-background-container: #FFFFFF;
12
+ --jkl-color-background-container: light-dark(#FFFFFF, #3E3A36);
13
+ --jkl-color-background-container-accent: #E6E2DB;
14
+ --jkl-color-background-container-accent: light-dark(#E6E2DB, #2A2724);
15
+ --jkl-color-background-contrast: #1B1917;
16
+ --jkl-color-background-contrast: light-dark(#1B1917, #F3F0ED);
17
+ --jkl-color-text-default: #1B1917;
18
+ --jkl-color-text-default: light-dark(#1B1917, #F9F9F9);
19
+ --jkl-color-text-subdued: #636060;
20
+ --jkl-color-text-subdued: light-dark(#636060, #C8C5C3);
21
+ --jkl-color-text-accent: #000000;
22
+ --jkl-color-text-accent: light-dark(#000000, #FFFFFF);
23
+ --jkl-color-text-on-contrast: #F9F9F9;
24
+ --jkl-color-text-on-contrast: light-dark(#F9F9F9, #1B1917);
25
+ --jkl-color-border-default: #636060;
26
+ --jkl-color-border-default: light-dark(#636060, #C8C5C3);
27
+ --jkl-color-border-subdued: #C8C5C3;
28
+ --jkl-color-border-subdued: light-dark(#C8C5C3, #636060);
29
+ --jkl-color-border-strong: #1B1917;
30
+ --jkl-color-border-strong: light-dark(#1B1917, #F9F9F9);
31
+ --jkl-color-warning-background-page: #FFFFFF;
32
+ --jkl-color-warning-background-page: light-dark(#FFFFFF, #000000);
33
+ --jkl-color-warning-background-container: #F1DFD1;
34
+ --jkl-color-warning-background-container: light-dark(#F1DFD1, #61441F);
35
+ --jkl-color-warning-background-container-accent: #EAC7A8;
36
+ --jkl-color-warning-background-container-accent: light-dark(#EAC7A8, #75542B);
37
+ --jkl-color-warning-background-contrast: #8B6539;
38
+ --jkl-color-warning-background-contrast: light-dark(#8B6539, #8B6539);
39
+ --jkl-color-warning-text-default: #000000;
40
+ --jkl-color-warning-text-default: light-dark(#000000, #FFFFFF);
41
+ --jkl-color-warning-text-subdued: #3E3A36;
42
+ --jkl-color-warning-text-subdued: light-dark(#3E3A36, #DFD8CE);
43
+ --jkl-color-warning-text-accent: #000000;
44
+ --jkl-color-warning-text-accent: light-dark(#000000, #FFFFFF);
45
+ --jkl-color-warning-text-on-contrast: #FFFFFF;
46
+ --jkl-color-warning-text-on-contrast: light-dark(#FFFFFF, #000000);
47
+ --jkl-color-warning-border-default: #A17747;
48
+ --jkl-color-warning-border-default: light-dark(#A17747, #B68957);
49
+ --jkl-color-warning-border-subdued: #E3B07A;
50
+ --jkl-color-warning-border-subdued: light-dark(#E3B07A, #75542B);
51
+ --jkl-color-warning-border-strong: #61441F;
52
+ --jkl-color-warning-border-strong: light-dark(#61441F, #A17747);
53
+ --jkl-color-success-background-page: #FFFFFF;
54
+ --jkl-color-success-background-page: light-dark(#FFFFFF, #000000);
55
+ --jkl-color-success-background-container: #C6E6CD;
56
+ --jkl-color-success-background-container: light-dark(#C6E6CD, #15341E);
57
+ --jkl-color-success-background-container-accent: #ACD3B5;
58
+ --jkl-color-success-background-container-accent: light-dark(#ACD3B5, #24492E);
59
+ --jkl-color-success-background-contrast: #345F40;
60
+ --jkl-color-success-background-contrast: light-dark(#345F40, #467653);
61
+ --jkl-color-success-text-default: #000000;
62
+ --jkl-color-success-text-default: light-dark(#000000, #FFFFFF);
63
+ --jkl-color-success-text-subdued: #3E3A36;
64
+ --jkl-color-success-text-subdued: light-dark(#3E3A36, #DFD8CE);
65
+ --jkl-color-success-text-accent: #000000;
66
+ --jkl-color-success-text-accent: light-dark(#000000, #FFFFFF);
67
+ --jkl-color-success-text-on-contrast: #FFFFFF;
68
+ --jkl-color-success-text-on-contrast: light-dark(#FFFFFF, #000000);
69
+ --jkl-color-success-border-default: #467653;
70
+ --jkl-color-success-border-default: light-dark(#467653, #598D67);
71
+ --jkl-color-success-border-subdued: #8CBC98;
72
+ --jkl-color-success-border-subdued: light-dark(#8CBC98, #24492E);
73
+ --jkl-color-success-border-strong: #15341E;
74
+ --jkl-color-success-border-strong: light-dark(#15341E, #467653);
75
+ --jkl-color-info-background-page: #FFFFFF;
76
+ --jkl-color-info-background-page: light-dark(#FFFFFF, #000000);
77
+ --jkl-color-info-background-container: #E3E3F4;
78
+ --jkl-color-info-background-container: light-dark(#E3E3F4, #1E1E81);
79
+ --jkl-color-info-background-container-accent: #D3D3F6;
80
+ --jkl-color-info-background-container-accent: light-dark(#D3D3F6, #2D2DB3);
81
+ --jkl-color-info-background-contrast: #4646D1;
82
+ --jkl-color-info-background-contrast: light-dark(#4646D1, #6262DC);
83
+ --jkl-color-info-text-default: #000000;
84
+ --jkl-color-info-text-default: light-dark(#000000, #FFFFFF);
85
+ --jkl-color-info-text-subdued: #3E3A36;
86
+ --jkl-color-info-text-subdued: light-dark(#3E3A36, #DFD8CE);
87
+ --jkl-color-info-text-accent: #000000;
88
+ --jkl-color-info-text-accent: light-dark(#000000, #FFFFFF);
89
+ --jkl-color-info-text-on-contrast: #FFFFFF;
90
+ --jkl-color-info-text-on-contrast: light-dark(#FFFFFF, #000000);
91
+ --jkl-color-info-border-default: #6262DC;
92
+ --jkl-color-info-border-default: light-dark(#6262DC, #7E7EE4);
93
+ --jkl-color-info-border-subdued: #B7B7F0;
94
+ --jkl-color-info-border-subdued: light-dark(#B7B7F0, #2D2DB3);
95
+ --jkl-color-info-border-strong: #1E1E81;
96
+ --jkl-color-info-border-strong: light-dark(#1E1E81, #6262DC);
97
+ --jkl-color-error-background-page: #FFFFFF;
98
+ --jkl-color-error-background-page: light-dark(#FFFFFF, #000000);
99
+ --jkl-color-error-background-container: #F3DEDE;
100
+ --jkl-color-error-background-container: light-dark(#F3DEDE, #610F0F);
101
+ --jkl-color-error-background-container-accent: #F2C9C9;
102
+ --jkl-color-error-background-container-accent: light-dark(#F2C9C9, #891919);
103
+ --jkl-color-error-background-contrast: #B32424;
104
+ --jkl-color-error-background-contrast: light-dark(#B32424, #DF3030);
105
+ --jkl-color-error-text-default: #000000;
106
+ --jkl-color-error-text-default: light-dark(#000000, #FFFFFF);
107
+ --jkl-color-error-text-subdued: #3E3A36;
108
+ --jkl-color-error-text-subdued: light-dark(#3E3A36, #DFD8CE);
109
+ --jkl-color-error-text-accent: #610F0F;
110
+ --jkl-color-error-text-accent: light-dark(#610F0F, #F6B3B3);
111
+ --jkl-color-error-text-on-contrast: #FFFFFF;
112
+ --jkl-color-error-text-on-contrast: light-dark(#FFFFFF, #FFFFFF);
113
+ --jkl-color-error-border-default: #DF3030;
114
+ --jkl-color-error-border-default: light-dark(#DF3030, #F15D5D);
115
+ --jkl-color-error-border-subdued: #F6B3B3;
116
+ --jkl-color-error-border-subdued: light-dark(#F6B3B3, #891919);
117
+ --jkl-color-error-border-strong: #610F0F;
118
+ --jkl-color-error-border-strong: light-dark(#610F0F, #DF3030);
117
119
  /* stylelint-enable declaration-block-no-duplicate-custom-properties */
118
120
  }
119
121
  }