@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/theme/_color-scheme.scss CHANGED
@@ -8,141 +8,119 @@
8
8
  color-scheme: light dark;
9
9
 
10
10
  /* stylelint-disable declaration-block-no-duplicate-custom-properties -- fallback and light-dark() declarations are intentionally paired. */
11
- --jkl-color-neutral-background-page: #F4F2EF;
12
- --jkl-color-neutral-background-page: light-dark(#F4F2EF, #1B1917);
13
- --jkl-color-neutral-background-container: #F9F9F9;
14
- --jkl-color-neutral-background-container: light-dark(#F9F9F9, #313030);
15
- --jkl-color-neutral-background-action: #1B1917;
16
- --jkl-color-neutral-background-action: light-dark(#1B1917, #F9F9F9);
17
- --jkl-color-neutral-text-default: #1B1917;
18
- --jkl-color-neutral-text-default: light-dark(#1B1917, #F9F9F9);
19
- --jkl-color-neutral-text-subdued: #636060;
20
- --jkl-color-neutral-text-subdued: light-dark(#636060, #C8C5C3);
21
- --jkl-color-neutral-text-on-action: #F9F9F9;
22
- --jkl-color-neutral-text-on-action: light-dark(#F9F9F9, #1B1917);
23
- --jkl-color-neutral-border-strong: #1B1917;
24
- --jkl-color-neutral-border-strong: light-dark(#1B1917, #F9F9F9);
25
- --jkl-color-neutral-border-default: #636060;
26
- --jkl-color-neutral-border-default: light-dark(#636060, #C8C5C3);
27
- --jkl-color-neutral-border-subdued: #C8C5C3;
28
- --jkl-color-neutral-border-subdued: light-dark(#C8C5C3, #636060);
29
- --jkl-color-accent-background-page: #F4F2EF;
30
- --jkl-color-accent-background-page: light-dark(#F4F2EF, #1B1917);
31
- --jkl-color-accent-background-container: #F9F9F9;
32
- --jkl-color-accent-background-container: light-dark(#F9F9F9, #313030);
33
- --jkl-color-accent-background-action: #1B1917;
34
- --jkl-color-accent-background-action: light-dark(#1B1917, #F9F9F9);
35
- --jkl-color-accent-text-default: #1B1917;
36
- --jkl-color-accent-text-default: light-dark(#1B1917, #F9F9F9);
37
- --jkl-color-accent-text-subdued: #636060;
38
- --jkl-color-accent-text-subdued: light-dark(#636060, #C8C5C3);
39
- --jkl-color-accent-text-on-action: #F9F9F9;
40
- --jkl-color-accent-text-on-action: light-dark(#F9F9F9, #1B1917);
41
- --jkl-color-accent-border-strong: #1B1917;
42
- --jkl-color-accent-border-strong: light-dark(#1B1917, #F9F9F9);
43
- --jkl-color-accent-border-default: #636060;
44
- --jkl-color-accent-border-default: light-dark(#636060, #C8C5C3);
45
- --jkl-color-accent-border-subdued: #C8C5C3;
46
- --jkl-color-accent-border-subdued: light-dark(#C8C5C3, #636060);
47
- --jkl-color-warning-background-page: #FCF7E8;
48
- --jkl-color-warning-background-page: light-dark(#FCF7E8, #392B10);
49
- --jkl-color-warning-background-container: #F7EBC2;
50
- --jkl-color-warning-background-container: light-dark(#F7EBC2, #5A4519);
51
- --jkl-color-warning-background-action: #B98900;
52
- --jkl-color-warning-background-action: light-dark(#B98900, #E4B63A);
53
- --jkl-color-warning-text-default: #5B4200;
54
- --jkl-color-warning-text-default: light-dark(#5B4200, #FFF5D9);
55
- --jkl-color-warning-text-subdued: #8B6B22;
56
- --jkl-color-warning-text-subdued: light-dark(#8B6B22, #EEDFAE);
57
- --jkl-color-warning-text-on-action: #1B1917;
58
- --jkl-color-warning-text-on-action: light-dark(#1B1917, #1B1917);
59
- --jkl-color-warning-border-strong: #B98900;
60
- --jkl-color-warning-border-strong: light-dark(#B98900, #E4B63A);
61
- --jkl-color-warning-border-default: #B98900;
62
- --jkl-color-warning-border-default: light-dark(#B98900, #E4B63A);
63
- --jkl-color-warning-border-subdued: #DECC8D;
64
- --jkl-color-warning-border-subdued: light-dark(#DECC8D, #8B6B22);
65
- --jkl-color-success-background-page: #EEF7F0;
66
- --jkl-color-success-background-page: light-dark(#EEF7F0, #173122);
67
- --jkl-color-success-background-container: #D7EADB;
68
- --jkl-color-success-background-container: light-dark(#D7EADB, #234530);
69
- --jkl-color-success-background-action: #2E8C4A;
70
- --jkl-color-success-background-action: light-dark(#2E8C4A, #67B479);
71
- --jkl-color-success-text-default: #1E5D31;
72
- --jkl-color-success-text-default: light-dark(#1E5D31, #F1FBF3);
73
- --jkl-color-success-text-subdued: #507A5B;
74
- --jkl-color-success-text-subdued: light-dark(#507A5B, #C9DDCE);
75
- --jkl-color-success-text-on-action: #F9F9F9;
76
- --jkl-color-success-text-on-action: light-dark(#F9F9F9, #1B1917);
77
- --jkl-color-success-border-strong: #2E8C4A;
78
- --jkl-color-success-border-strong: light-dark(#2E8C4A, #67B479);
79
- --jkl-color-success-border-default: #2E8C4A;
80
- --jkl-color-success-border-default: light-dark(#2E8C4A, #67B479);
81
- --jkl-color-success-border-subdued: #94B79B;
82
- --jkl-color-success-border-subdued: light-dark(#94B79B, #507A5B);
83
- --jkl-color-info-background-page: #EEF5FE;
84
- --jkl-color-info-background-page: light-dark(#EEF5FE, #162A40);
85
- --jkl-color-info-background-container: #DDEBFB;
86
- --jkl-color-info-background-container: light-dark(#DDEBFB, #264261);
87
- --jkl-color-info-background-action: #4AA3F0;
88
- --jkl-color-info-background-action: light-dark(#4AA3F0, #7EBEF4);
89
- --jkl-color-info-text-default: #1B3B60;
90
- --jkl-color-info-text-default: light-dark(#1B3B60, #F5FAFF);
91
- --jkl-color-info-text-subdued: #4E6C8E;
92
- --jkl-color-info-text-subdued: light-dark(#4E6C8E, #D7E9F8);
93
- --jkl-color-info-text-on-action: #F9F9F9;
94
- --jkl-color-info-text-on-action: light-dark(#F9F9F9, #1B1917);
95
- --jkl-color-info-border-strong: #4AA3F0;
96
- --jkl-color-info-border-strong: light-dark(#4AA3F0, #7EBEF4);
97
- --jkl-color-info-border-default: #4AA3F0;
98
- --jkl-color-info-border-default: light-dark(#4AA3F0, #7EBEF4);
99
- --jkl-color-info-border-subdued: #A9A9CA;
100
- --jkl-color-info-border-subdued: light-dark(#A9A9CA, #4E6C8E);
101
- --jkl-color-error-background-page: #FDEEEE;
102
- --jkl-color-error-background-page: light-dark(#FDEEEE, #3A1C1C);
103
- --jkl-color-error-background-container: #F8D1D1;
104
- --jkl-color-error-background-container: light-dark(#F8D1D1, #5B2828);
105
- --jkl-color-error-background-action: #E84B3C;
106
- --jkl-color-error-background-action: light-dark(#E84B3C, #F27B70);
107
- --jkl-color-error-text-default: #7B1F18;
108
- --jkl-color-error-text-default: light-dark(#7B1F18, #FFF1EF);
109
- --jkl-color-error-text-subdued: #A14E46;
110
- --jkl-color-error-text-subdued: light-dark(#A14E46, #F1C8C4);
111
- --jkl-color-error-text-on-action: #F9F9F9;
112
- --jkl-color-error-text-on-action: light-dark(#F9F9F9, #1B1917);
113
- --jkl-color-error-border-strong: #E84B3C;
114
- --jkl-color-error-border-strong: light-dark(#E84B3C, #F27B70);
115
- --jkl-color-error-border-default: #E84B3C;
116
- --jkl-color-error-border-default: light-dark(#E84B3C, #F27B70);
117
- --jkl-color-error-border-subdued: #DE9E9E;
118
- --jkl-color-error-border-subdued: light-dark(#DE9E9E, #A14E46);
11
+ --jkl-color-background-page: #F3F0ED;
12
+ --jkl-color-background-page: light-dark(#F3F0ED, #0E0D0C);
13
+ --jkl-color-background-container: #FFFFFF;
14
+ --jkl-color-background-container: light-dark(#FFFFFF, #3E3A36);
15
+ --jkl-color-background-container-accent: #E6E2DB;
16
+ --jkl-color-background-container-accent: light-dark(#E6E2DB, #2A2724);
17
+ --jkl-color-background-contrast: #1B1917;
18
+ --jkl-color-background-contrast: light-dark(#1B1917, #F3F0ED);
19
+ --jkl-color-text-default: #1B1917;
20
+ --jkl-color-text-default: light-dark(#1B1917, #F9F9F9);
21
+ --jkl-color-text-subdued: #636060;
22
+ --jkl-color-text-subdued: light-dark(#636060, #C8C5C3);
23
+ --jkl-color-text-accent: #000000;
24
+ --jkl-color-text-accent: light-dark(#000000, #FFFFFF);
25
+ --jkl-color-text-on-contrast: #F9F9F9;
26
+ --jkl-color-text-on-contrast: light-dark(#F9F9F9, #1B1917);
27
+ --jkl-color-border-default: #636060;
28
+ --jkl-color-border-default: light-dark(#636060, #C8C5C3);
29
+ --jkl-color-border-subdued: #C8C5C3;
30
+ --jkl-color-border-subdued: light-dark(#C8C5C3, #636060);
31
+ --jkl-color-border-strong: #1B1917;
32
+ --jkl-color-border-strong: light-dark(#1B1917, #F9F9F9);
33
+ --jkl-color-warning-background-page: #FFFFFF;
34
+ --jkl-color-warning-background-page: light-dark(#FFFFFF, #000000);
35
+ --jkl-color-warning-background-container: #F1DFD1;
36
+ --jkl-color-warning-background-container: light-dark(#F1DFD1, #61441F);
37
+ --jkl-color-warning-background-container-accent: #EAC7A8;
38
+ --jkl-color-warning-background-container-accent: light-dark(#EAC7A8, #75542B);
39
+ --jkl-color-warning-background-contrast: #8B6539;
40
+ --jkl-color-warning-background-contrast: light-dark(#8B6539, #8B6539);
41
+ --jkl-color-warning-text-default: #000000;
42
+ --jkl-color-warning-text-default: light-dark(#000000, #FFFFFF);
43
+ --jkl-color-warning-text-subdued: #3E3A36;
44
+ --jkl-color-warning-text-subdued: light-dark(#3E3A36, #DFD8CE);
45
+ --jkl-color-warning-text-accent: #000000;
46
+ --jkl-color-warning-text-accent: light-dark(#000000, #FFFFFF);
47
+ --jkl-color-warning-text-on-contrast: #FFFFFF;
48
+ --jkl-color-warning-text-on-contrast: light-dark(#FFFFFF, #000000);
49
+ --jkl-color-warning-border-default: #A17747;
50
+ --jkl-color-warning-border-default: light-dark(#A17747, #B68957);
51
+ --jkl-color-warning-border-subdued: #E3B07A;
52
+ --jkl-color-warning-border-subdued: light-dark(#E3B07A, #75542B);
53
+ --jkl-color-warning-border-strong: #61441F;
54
+ --jkl-color-warning-border-strong: light-dark(#61441F, #A17747);
55
+ --jkl-color-success-background-page: #FFFFFF;
56
+ --jkl-color-success-background-page: light-dark(#FFFFFF, #000000);
57
+ --jkl-color-success-background-container: #C6E6CD;
58
+ --jkl-color-success-background-container: light-dark(#C6E6CD, #15341E);
59
+ --jkl-color-success-background-container-accent: #ACD3B5;
60
+ --jkl-color-success-background-container-accent: light-dark(#ACD3B5, #24492E);
61
+ --jkl-color-success-background-contrast: #345F40;
62
+ --jkl-color-success-background-contrast: light-dark(#345F40, #467653);
63
+ --jkl-color-success-text-default: #000000;
64
+ --jkl-color-success-text-default: light-dark(#000000, #FFFFFF);
65
+ --jkl-color-success-text-subdued: #3E3A36;
66
+ --jkl-color-success-text-subdued: light-dark(#3E3A36, #DFD8CE);
67
+ --jkl-color-success-text-accent: #000000;
68
+ --jkl-color-success-text-accent: light-dark(#000000, #FFFFFF);
69
+ --jkl-color-success-text-on-contrast: #FFFFFF;
70
+ --jkl-color-success-text-on-contrast: light-dark(#FFFFFF, #000000);
71
+ --jkl-color-success-border-default: #467653;
72
+ --jkl-color-success-border-default: light-dark(#467653, #598D67);
73
+ --jkl-color-success-border-subdued: #8CBC98;
74
+ --jkl-color-success-border-subdued: light-dark(#8CBC98, #24492E);
75
+ --jkl-color-success-border-strong: #15341E;
76
+ --jkl-color-success-border-strong: light-dark(#15341E, #467653);
77
+ --jkl-color-info-background-page: #FFFFFF;
78
+ --jkl-color-info-background-page: light-dark(#FFFFFF, #000000);
79
+ --jkl-color-info-background-container: #E3E3F4;
80
+ --jkl-color-info-background-container: light-dark(#E3E3F4, #1E1E81);
81
+ --jkl-color-info-background-container-accent: #D3D3F6;
82
+ --jkl-color-info-background-container-accent: light-dark(#D3D3F6, #2D2DB3);
83
+ --jkl-color-info-background-contrast: #4646D1;
84
+ --jkl-color-info-background-contrast: light-dark(#4646D1, #6262DC);
85
+ --jkl-color-info-text-default: #000000;
86
+ --jkl-color-info-text-default: light-dark(#000000, #FFFFFF);
87
+ --jkl-color-info-text-subdued: #3E3A36;
88
+ --jkl-color-info-text-subdued: light-dark(#3E3A36, #DFD8CE);
89
+ --jkl-color-info-text-accent: #000000;
90
+ --jkl-color-info-text-accent: light-dark(#000000, #FFFFFF);
91
+ --jkl-color-info-text-on-contrast: #FFFFFF;
92
+ --jkl-color-info-text-on-contrast: light-dark(#FFFFFF, #000000);
93
+ --jkl-color-info-border-default: #6262DC;
94
+ --jkl-color-info-border-default: light-dark(#6262DC, #7E7EE4);
95
+ --jkl-color-info-border-subdued: #B7B7F0;
96
+ --jkl-color-info-border-subdued: light-dark(#B7B7F0, #2D2DB3);
97
+ --jkl-color-info-border-strong: #1E1E81;
98
+ --jkl-color-info-border-strong: light-dark(#1E1E81, #6262DC);
99
+ --jkl-color-error-background-page: #FFFFFF;
100
+ --jkl-color-error-background-page: light-dark(#FFFFFF, #000000);
101
+ --jkl-color-error-background-container: #F3DEDE;
102
+ --jkl-color-error-background-container: light-dark(#F3DEDE, #610F0F);
103
+ --jkl-color-error-background-container-accent: #F2C9C9;
104
+ --jkl-color-error-background-container-accent: light-dark(#F2C9C9, #891919);
105
+ --jkl-color-error-background-contrast: #B32424;
106
+ --jkl-color-error-background-contrast: light-dark(#B32424, #DF3030);
107
+ --jkl-color-error-text-default: #000000;
108
+ --jkl-color-error-text-default: light-dark(#000000, #FFFFFF);
109
+ --jkl-color-error-text-subdued: #3E3A36;
110
+ --jkl-color-error-text-subdued: light-dark(#3E3A36, #DFD8CE);
111
+ --jkl-color-error-text-accent: #610F0F;
112
+ --jkl-color-error-text-accent: light-dark(#610F0F, #F6B3B3);
113
+ --jkl-color-error-text-on-contrast: #FFFFFF;
114
+ --jkl-color-error-text-on-contrast: light-dark(#FFFFFF, #FFFFFF);
115
+ --jkl-color-error-border-default: #DF3030;
116
+ --jkl-color-error-border-default: light-dark(#DF3030, #F15D5D);
117
+ --jkl-color-error-border-subdued: #F6B3B3;
118
+ --jkl-color-error-border-subdued: light-dark(#F6B3B3, #891919);
119
+ --jkl-color-error-border-strong: #610F0F;
120
+ --jkl-color-error-border-strong: light-dark(#610F0F, #DF3030);
119
121
  /* stylelint-enable declaration-block-no-duplicate-custom-properties */
120
122
  }
121
123
 
122
- :root, [data-variant="neutral"] {
123
- --jkl-color-background-page: var(--jkl-color-neutral-background-page);
124
- --jkl-color-background-container: var(--jkl-color-neutral-background-container);
125
- --jkl-color-background-action: var(--jkl-color-neutral-background-action);
126
- --jkl-color-text-default: var(--jkl-color-neutral-text-default);
127
- --jkl-color-text-subdued: var(--jkl-color-neutral-text-subdued);
128
- --jkl-color-text-on-action: var(--jkl-color-neutral-text-on-action);
129
- --jkl-color-border-strong: var(--jkl-color-neutral-border-strong);
130
- --jkl-color-border-default: var(--jkl-color-neutral-border-default);
131
- --jkl-color-border-subdued: var(--jkl-color-neutral-border-subdued);
132
- }
133
-
134
- [data-variant="accent"] {
135
- --jkl-color-background-page: var(--jkl-color-accent-background-page);
136
- --jkl-color-background-container: var(--jkl-color-accent-background-container);
137
- --jkl-color-background-action: var(--jkl-color-accent-background-action);
138
- --jkl-color-text-default: var(--jkl-color-accent-text-default);
139
- --jkl-color-text-subdued: var(--jkl-color-accent-text-subdued);
140
- --jkl-color-text-on-action: var(--jkl-color-accent-text-on-action);
141
- --jkl-color-border-strong: var(--jkl-color-accent-border-strong);
142
- --jkl-color-border-default: var(--jkl-color-accent-border-default);
143
- --jkl-color-border-subdued: var(--jkl-color-accent-border-subdued);
144
- }
145
-
146
124
  [data-theme="light"] {
147
125
  color-scheme: light;
148
126
  }
package/styles/theme/brands/dnb/_color-scheme.scss CHANGED
@@ -6,114 +6,116 @@
6
6
  @layer jokul.theme {
7
7
  [data-brand="dnb"] {
8
8
  /* stylelint-disable declaration-block-no-duplicate-custom-properties -- fallback and light-dark() declarations are intentionally paired. */
9
- --jkl-color-neutral-background-page: #F8F8F8;
10
- --jkl-color-neutral-background-page: light-dark(#F8F8F8, #000000);
11
- --jkl-color-neutral-background-container: #FFFFFF;
12
- --jkl-color-neutral-background-container: light-dark(#FFFFFF, #333333);
13
- --jkl-color-neutral-background-action: #000000;
14
- --jkl-color-neutral-background-action: light-dark(#000000, #FFFFFF);
15
- --jkl-color-neutral-text-default: #000000;
16
- --jkl-color-neutral-text-default: light-dark(#000000, #FFFFFF);
17
- --jkl-color-neutral-text-subdued: #737373;
18
- --jkl-color-neutral-text-subdued: light-dark(#737373, #CCCCCC);
19
- --jkl-color-neutral-text-on-action: #FFFFFF;
20
- --jkl-color-neutral-text-on-action: light-dark(#FFFFFF, #000000);
21
- --jkl-color-neutral-border-strong: #000000;
22
- --jkl-color-neutral-border-strong: light-dark(#000000, #FFFFFF);
23
- --jkl-color-neutral-border-default: #737373;
24
- --jkl-color-neutral-border-default: light-dark(#737373, #CCCCCC);
25
- --jkl-color-neutral-border-subdued: #CCCCCC;
26
- --jkl-color-neutral-border-subdued: light-dark(#CCCCCC, #737373);
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: #007272;
32
- --jkl-color-accent-background-action: light-dark(#007272, #A5E1D2);
33
- --jkl-color-accent-text-default: #40342C;
34
- --jkl-color-accent-text-default: light-dark(#40342C, #F3E9E0);
35
- --jkl-color-accent-text-subdued: #6B5B4F;
36
- --jkl-color-accent-text-subdued: light-dark(#6B5B4F, #D2BDAE);
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: #007272;
40
- --jkl-color-accent-border-strong: light-dark(#007272, #A5E1D2);
41
- --jkl-color-accent-border-default: #007272;
42
- --jkl-color-accent-border-default: light-dark(#007272, #A5E1D2);
43
- --jkl-color-accent-border-subdued: #B3D5D5;
44
- --jkl-color-accent-border-subdued: light-dark(#B3D5D5, #D2F0E9);
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: #D8F3EC;
12
+ --jkl-color-background-container: light-dark(#D8F3EC, #D8F3EC);
13
+ --jkl-color-background-container-accent: #A5E1D2;
14
+ --jkl-color-background-container-accent: light-dark(#A5E1D2, #A5E1D2);
15
+ --jkl-color-background-contrast: #007272;
16
+ --jkl-color-background-contrast: light-dark(#007272, #007272);
17
+ --jkl-color-text-default: #333333;
18
+ --jkl-color-text-default: light-dark(#333333, #333333);
19
+ --jkl-color-text-subdued: #737373;
20
+ --jkl-color-text-subdued: light-dark(#737373, #737373);
21
+ --jkl-color-text-accent: #FFFFFF;
22
+ --jkl-color-text-accent: light-dark(#FFFFFF, #FFFFFF);
23
+ --jkl-color-text-on-contrast: #FFFFFF;
24
+ --jkl-color-text-on-contrast: light-dark(#FFFFFF, #FFFFFF);
25
+ --jkl-color-border-default: #007272;
26
+ --jkl-color-border-default: light-dark(#007272, #007272);
27
+ --jkl-color-border-subdued: #FFFFFF;
28
+ --jkl-color-border-subdued: light-dark(#FFFFFF, #F7F4F2);
29
+ --jkl-color-border-strong: #FFFFFF;
30
+ --jkl-color-border-strong: light-dark(#FFFFFF, #FFFFFF);
31
+ --jkl-color-warning-background-page: #FFFFFF;
32
+ --jkl-color-warning-background-page: light-dark(#FFFFFF, #FFFFFF);
33
+ --jkl-color-warning-background-container: #FBF6EC;
34
+ --jkl-color-warning-background-container: light-dark(#FBF6EC, #FBF6EC);
35
+ --jkl-color-warning-background-container-accent: #FFFFFF;
36
+ --jkl-color-warning-background-container-accent: light-dark(#FFFFFF, #FFFFFF);
37
+ --jkl-color-warning-background-contrast: #FDBB31;
38
+ --jkl-color-warning-background-contrast: light-dark(#FDBB31, #FDBB31);
39
+ --jkl-color-warning-text-default: #333333;
40
+ --jkl-color-warning-text-default: light-dark(#333333, #333333);
41
+ --jkl-color-warning-text-subdued: #737373;
42
+ --jkl-color-warning-text-subdued: light-dark(#737373, #737373);
43
+ --jkl-color-warning-text-accent: #805B0E;
44
+ --jkl-color-warning-text-accent: light-dark(#805B0E, #805B0E);
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: #FDBB31;
48
+ --jkl-color-warning-border-default: light-dark(#FDBB31, #FDBB31);
49
+ --jkl-color-warning-border-subdued: #FFFFFF;
50
+ --jkl-color-warning-border-subdued: light-dark(#FFFFFF, #FFFFFF);
51
+ --jkl-color-warning-border-strong: #FFFFFF;
52
+ --jkl-color-warning-border-strong: light-dark(#FFFFFF, #FFFFFF);
53
+ --jkl-color-success-background-page: #FFFFFF;
54
+ --jkl-color-success-background-page: light-dark(#FFFFFF, #FFFFFF);
55
+ --jkl-color-success-background-container: #EBF4F2;
56
+ --jkl-color-success-background-container: light-dark(#EBF4F2, #EBF4F2);
57
+ --jkl-color-success-background-container-accent: #FFFFFF;
58
+ --jkl-color-success-background-container-accent: light-dark(#FFFFFF, #FFFFFF);
59
+ --jkl-color-success-background-contrast: #007B5E;
60
+ --jkl-color-success-background-contrast: light-dark(#007B5E, #007B5E);
61
+ --jkl-color-success-text-default: #333333;
62
+ --jkl-color-success-text-default: light-dark(#333333, #333333);
63
+ --jkl-color-success-text-subdued: #737373;
64
+ --jkl-color-success-text-subdued: light-dark(#737373, #737373);
65
+ --jkl-color-success-text-accent: #28B482;
66
+ --jkl-color-success-text-accent: light-dark(#28B482, #28B482);
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: #007B5E;
70
+ --jkl-color-success-border-default: light-dark(#007B5E, #007B5E);
71
+ --jkl-color-success-border-subdued: #FFFFFF;
72
+ --jkl-color-success-border-subdued: light-dark(#FFFFFF, #FFFFFF);
73
+ --jkl-color-success-border-strong: #FFFFFF;
74
+ --jkl-color-success-border-strong: light-dark(#FFFFFF, #FFFFFF);
75
+ --jkl-color-info-background-page: #FFFFFF;
76
+ --jkl-color-info-background-page: light-dark(#FFFFFF, #FFFFFF);
77
+ --jkl-color-info-background-container: #FFFFFF;
78
+ --jkl-color-info-background-container: light-dark(#FFFFFF, #FFFFFF);
79
+ --jkl-color-info-background-container-accent: #FFFFFF;
80
+ --jkl-color-info-background-container-accent: light-dark(#FFFFFF, #FFFFFF);
81
+ --jkl-color-info-background-contrast: #007272;
82
+ --jkl-color-info-background-contrast: light-dark(#007272, #007272);
83
+ --jkl-color-info-text-default: #333333;
84
+ --jkl-color-info-text-default: light-dark(#333333, #333333);
85
+ --jkl-color-info-text-subdued: #737373;
86
+ --jkl-color-info-text-subdued: light-dark(#737373, #737373);
87
+ --jkl-color-info-text-accent: #FFFFFF;
88
+ --jkl-color-info-text-accent: light-dark(#FFFFFF, #FFFFFF);
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: #007272;
92
+ --jkl-color-info-border-default: light-dark(#007272, #007272);
93
+ --jkl-color-info-border-subdued: #FFFFFF;
94
+ --jkl-color-info-border-subdued: light-dark(#FFFFFF, #FFFFFF);
95
+ --jkl-color-info-border-strong: #FFFFFF;
96
+ --jkl-color-info-border-strong: light-dark(#FFFFFF, #FFFFFF);
97
+ --jkl-color-error-background-page: #FFFFFF;
98
+ --jkl-color-error-background-page: light-dark(#FFFFFF, #FFFFFF);
99
+ --jkl-color-error-background-container: #FCEEEE;
100
+ --jkl-color-error-background-container: light-dark(#FCEEEE, #FCEEEE);
101
+ --jkl-color-error-background-container-accent: #FFFFFF;
102
+ --jkl-color-error-background-container-accent: light-dark(#FFFFFF, #FFFFFF);
103
+ --jkl-color-error-background-contrast: #D52525;
104
+ --jkl-color-error-background-contrast: light-dark(#D52525, #D52525);
105
+ --jkl-color-error-text-default: #333333;
106
+ --jkl-color-error-text-default: light-dark(#333333, #333333);
107
+ --jkl-color-error-text-subdued: #737373;
108
+ --jkl-color-error-text-subdued: light-dark(#737373, #737373);
109
+ --jkl-color-error-text-accent: #FFFFFF;
110
+ --jkl-color-error-text-accent: light-dark(#FFFFFF, #FFFFFF);
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: #D52525;
114
+ --jkl-color-error-border-default: light-dark(#D52525, #D52525);
115
+ --jkl-color-error-border-subdued: #FFFFFF;
116
+ --jkl-color-error-border-subdued: light-dark(#FFFFFF, #FFFFFF);
117
+ --jkl-color-error-border-strong: #FFFFFF;
118
+ --jkl-color-error-border-strong: light-dark(#FFFFFF, #FFFFFF);
117
119
  /* stylelint-enable declaration-block-no-duplicate-custom-properties */
118
120
  }
119
121
  }