@sage/design-tokens 8.5.1 → 9.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (328) hide show
  1. package/css/frozenproduct/all.css +41 -51
  2. package/css/frozenproduct/large/components/container.css +20 -10
  3. package/css/frozenproduct/large/components/form.css +20 -20
  4. package/css/frozenproduct/large/dark.css +0 -10
  5. package/css/frozenproduct/large/light.css +1 -11
  6. package/css/frozenproduct/small/components/container.css +20 -10
  7. package/css/frozenproduct/small/components/form.css +20 -20
  8. package/css/frozenproduct/small/dark.css +0 -10
  9. package/css/frozenproduct/small/light.css +1 -11
  10. package/css/marketing/all.css +41 -51
  11. package/css/marketing/large/components/container.css +20 -10
  12. package/css/marketing/large/components/form.css +20 -20
  13. package/css/marketing/large/dark.css +0 -10
  14. package/css/marketing/large/light.css +1 -11
  15. package/css/marketing/small/components/container.css +20 -10
  16. package/css/marketing/small/components/form.css +20 -20
  17. package/css/marketing/small/dark.css +0 -10
  18. package/css/marketing/small/light.css +1 -11
  19. package/css/product/all.css +41 -51
  20. package/css/product/large/components/container.css +20 -10
  21. package/css/product/large/components/form.css +20 -20
  22. package/css/product/large/dark.css +0 -10
  23. package/css/product/large/light.css +1 -11
  24. package/css/product/small/components/container.css +20 -10
  25. package/css/product/small/components/form.css +20 -20
  26. package/css/product/small/dark.css +0 -10
  27. package/css/product/small/light.css +1 -11
  28. package/ios/frozenproduct/large/dark/components/container.h +20 -10
  29. package/ios/frozenproduct/large/dark/components/form.h +20 -20
  30. package/ios/frozenproduct/large/dark/mode.h +0 -10
  31. package/ios/frozenproduct/large/light/components/container.h +20 -10
  32. package/ios/frozenproduct/large/light/components/form.h +22 -22
  33. package/ios/frozenproduct/large/light/mode.h +1 -11
  34. package/ios/frozenproduct/small/dark/components/container.h +20 -10
  35. package/ios/frozenproduct/small/dark/components/form.h +20 -20
  36. package/ios/frozenproduct/small/dark/mode.h +0 -10
  37. package/ios/frozenproduct/small/light/components/container.h +20 -10
  38. package/ios/frozenproduct/small/light/components/form.h +22 -22
  39. package/ios/frozenproduct/small/light/mode.h +1 -11
  40. package/ios/marketing/large/dark/components/container.h +20 -10
  41. package/ios/marketing/large/dark/components/form.h +20 -20
  42. package/ios/marketing/large/dark/mode.h +0 -10
  43. package/ios/marketing/large/light/components/container.h +20 -10
  44. package/ios/marketing/large/light/components/form.h +22 -22
  45. package/ios/marketing/large/light/mode.h +1 -11
  46. package/ios/marketing/small/dark/components/container.h +20 -10
  47. package/ios/marketing/small/dark/components/form.h +20 -20
  48. package/ios/marketing/small/dark/mode.h +0 -10
  49. package/ios/marketing/small/light/components/container.h +20 -10
  50. package/ios/marketing/small/light/components/form.h +22 -22
  51. package/ios/marketing/small/light/mode.h +1 -11
  52. package/ios/product/large/dark/components/container.h +20 -10
  53. package/ios/product/large/dark/components/form.h +20 -20
  54. package/ios/product/large/dark/mode.h +0 -10
  55. package/ios/product/large/light/components/container.h +20 -10
  56. package/ios/product/large/light/components/form.h +22 -22
  57. package/ios/product/large/light/mode.h +1 -11
  58. package/ios/product/small/dark/components/container.h +20 -10
  59. package/ios/product/small/dark/components/form.h +20 -20
  60. package/ios/product/small/dark/mode.h +0 -10
  61. package/ios/product/small/light/components/container.h +20 -10
  62. package/ios/product/small/light/components/form.h +22 -22
  63. package/ios/product/small/light/mode.h +1 -11
  64. package/js/common/frozenproduct/large/dark/components/container.d.ts +10 -0
  65. package/js/common/frozenproduct/large/dark/components/container.js +162 -20
  66. package/js/common/frozenproduct/large/dark/components/form.js +40 -40
  67. package/js/common/frozenproduct/large/dark/mode.d.ts +0 -10
  68. package/js/common/frozenproduct/large/dark/mode.js +0 -130
  69. package/js/common/frozenproduct/large/light/components/container.d.ts +10 -0
  70. package/js/common/frozenproduct/large/light/components/container.js +162 -20
  71. package/js/common/frozenproduct/large/light/components/form.js +42 -42
  72. package/js/common/frozenproduct/large/light/mode.d.ts +0 -10
  73. package/js/common/frozenproduct/large/light/mode.js +1 -131
  74. package/js/common/frozenproduct/small/dark/components/container.d.ts +10 -0
  75. package/js/common/frozenproduct/small/dark/components/container.js +162 -20
  76. package/js/common/frozenproduct/small/dark/components/form.js +40 -40
  77. package/js/common/frozenproduct/small/dark/mode.d.ts +0 -10
  78. package/js/common/frozenproduct/small/dark/mode.js +0 -130
  79. package/js/common/frozenproduct/small/light/components/container.d.ts +10 -0
  80. package/js/common/frozenproduct/small/light/components/container.js +162 -20
  81. package/js/common/frozenproduct/small/light/components/form.js +42 -42
  82. package/js/common/frozenproduct/small/light/mode.d.ts +0 -10
  83. package/js/common/frozenproduct/small/light/mode.js +1 -131
  84. package/js/common/marketing/large/dark/components/container.d.ts +10 -0
  85. package/js/common/marketing/large/dark/components/container.js +162 -20
  86. package/js/common/marketing/large/dark/components/form.js +40 -40
  87. package/js/common/marketing/large/dark/mode.d.ts +0 -10
  88. package/js/common/marketing/large/dark/mode.js +0 -130
  89. package/js/common/marketing/large/light/components/container.d.ts +10 -0
  90. package/js/common/marketing/large/light/components/container.js +162 -20
  91. package/js/common/marketing/large/light/components/form.js +42 -42
  92. package/js/common/marketing/large/light/mode.d.ts +0 -10
  93. package/js/common/marketing/large/light/mode.js +1 -131
  94. package/js/common/marketing/small/dark/components/container.d.ts +10 -0
  95. package/js/common/marketing/small/dark/components/container.js +162 -20
  96. package/js/common/marketing/small/dark/components/form.js +40 -40
  97. package/js/common/marketing/small/dark/mode.d.ts +0 -10
  98. package/js/common/marketing/small/dark/mode.js +0 -130
  99. package/js/common/marketing/small/light/components/container.d.ts +10 -0
  100. package/js/common/marketing/small/light/components/container.js +162 -20
  101. package/js/common/marketing/small/light/components/form.js +42 -42
  102. package/js/common/marketing/small/light/mode.d.ts +0 -10
  103. package/js/common/marketing/small/light/mode.js +1 -131
  104. package/js/common/product/large/dark/components/container.d.ts +10 -0
  105. package/js/common/product/large/dark/components/container.js +162 -20
  106. package/js/common/product/large/dark/components/form.js +40 -40
  107. package/js/common/product/large/dark/mode.d.ts +0 -10
  108. package/js/common/product/large/dark/mode.js +0 -130
  109. package/js/common/product/large/light/components/container.d.ts +10 -0
  110. package/js/common/product/large/light/components/container.js +162 -20
  111. package/js/common/product/large/light/components/form.js +42 -42
  112. package/js/common/product/large/light/mode.d.ts +0 -10
  113. package/js/common/product/large/light/mode.js +1 -131
  114. package/js/common/product/small/dark/components/container.d.ts +10 -0
  115. package/js/common/product/small/dark/components/container.js +162 -20
  116. package/js/common/product/small/dark/components/form.js +40 -40
  117. package/js/common/product/small/dark/mode.d.ts +0 -10
  118. package/js/common/product/small/dark/mode.js +0 -130
  119. package/js/common/product/small/light/components/container.d.ts +10 -0
  120. package/js/common/product/small/light/components/container.js +162 -20
  121. package/js/common/product/small/light/components/form.js +42 -42
  122. package/js/common/product/small/light/mode.d.ts +0 -10
  123. package/js/common/product/small/light/mode.js +1 -131
  124. package/js/es6/frozenproduct/large/dark/components/container.d.ts +10 -0
  125. package/js/es6/frozenproduct/large/dark/components/container.js +20 -10
  126. package/js/es6/frozenproduct/large/dark/components/form.js +20 -20
  127. package/js/es6/frozenproduct/large/dark/mode.d.ts +0 -10
  128. package/js/es6/frozenproduct/large/dark/mode.js +0 -10
  129. package/js/es6/frozenproduct/large/light/components/container.d.ts +10 -0
  130. package/js/es6/frozenproduct/large/light/components/container.js +20 -10
  131. package/js/es6/frozenproduct/large/light/components/form.js +22 -22
  132. package/js/es6/frozenproduct/large/light/mode.d.ts +0 -10
  133. package/js/es6/frozenproduct/large/light/mode.js +1 -11
  134. package/js/es6/frozenproduct/small/dark/components/container.d.ts +10 -0
  135. package/js/es6/frozenproduct/small/dark/components/container.js +20 -10
  136. package/js/es6/frozenproduct/small/dark/components/form.js +20 -20
  137. package/js/es6/frozenproduct/small/dark/mode.d.ts +0 -10
  138. package/js/es6/frozenproduct/small/dark/mode.js +0 -10
  139. package/js/es6/frozenproduct/small/light/components/container.d.ts +10 -0
  140. package/js/es6/frozenproduct/small/light/components/container.js +20 -10
  141. package/js/es6/frozenproduct/small/light/components/form.js +22 -22
  142. package/js/es6/frozenproduct/small/light/mode.d.ts +0 -10
  143. package/js/es6/frozenproduct/small/light/mode.js +1 -11
  144. package/js/es6/marketing/large/dark/components/container.d.ts +10 -0
  145. package/js/es6/marketing/large/dark/components/container.js +20 -10
  146. package/js/es6/marketing/large/dark/components/form.js +20 -20
  147. package/js/es6/marketing/large/dark/mode.d.ts +0 -10
  148. package/js/es6/marketing/large/dark/mode.js +0 -10
  149. package/js/es6/marketing/large/light/components/container.d.ts +10 -0
  150. package/js/es6/marketing/large/light/components/container.js +20 -10
  151. package/js/es6/marketing/large/light/components/form.js +22 -22
  152. package/js/es6/marketing/large/light/mode.d.ts +0 -10
  153. package/js/es6/marketing/large/light/mode.js +1 -11
  154. package/js/es6/marketing/small/dark/components/container.d.ts +10 -0
  155. package/js/es6/marketing/small/dark/components/container.js +20 -10
  156. package/js/es6/marketing/small/dark/components/form.js +20 -20
  157. package/js/es6/marketing/small/dark/mode.d.ts +0 -10
  158. package/js/es6/marketing/small/dark/mode.js +0 -10
  159. package/js/es6/marketing/small/light/components/container.d.ts +10 -0
  160. package/js/es6/marketing/small/light/components/container.js +20 -10
  161. package/js/es6/marketing/small/light/components/form.js +22 -22
  162. package/js/es6/marketing/small/light/mode.d.ts +0 -10
  163. package/js/es6/marketing/small/light/mode.js +1 -11
  164. package/js/es6/product/large/dark/components/container.d.ts +10 -0
  165. package/js/es6/product/large/dark/components/container.js +20 -10
  166. package/js/es6/product/large/dark/components/form.js +20 -20
  167. package/js/es6/product/large/dark/mode.d.ts +0 -10
  168. package/js/es6/product/large/dark/mode.js +0 -10
  169. package/js/es6/product/large/light/components/container.d.ts +10 -0
  170. package/js/es6/product/large/light/components/container.js +20 -10
  171. package/js/es6/product/large/light/components/form.js +22 -22
  172. package/js/es6/product/large/light/mode.d.ts +0 -10
  173. package/js/es6/product/large/light/mode.js +1 -11
  174. package/js/es6/product/small/dark/components/container.d.ts +10 -0
  175. package/js/es6/product/small/dark/components/container.js +20 -10
  176. package/js/es6/product/small/dark/components/form.js +20 -20
  177. package/js/es6/product/small/dark/mode.d.ts +0 -10
  178. package/js/es6/product/small/dark/mode.js +0 -10
  179. package/js/es6/product/small/light/components/container.d.ts +10 -0
  180. package/js/es6/product/small/light/components/container.js +20 -10
  181. package/js/es6/product/small/light/components/form.js +22 -22
  182. package/js/es6/product/small/light/mode.d.ts +0 -10
  183. package/js/es6/product/small/light/mode.js +1 -11
  184. package/js/umd/frozenproduct/large/dark/components/container.js +204 -20
  185. package/js/umd/frozenproduct/large/dark/components/form.js +40 -40
  186. package/js/umd/frozenproduct/large/dark/mode.js +0 -130
  187. package/js/umd/frozenproduct/large/light/components/container.js +204 -20
  188. package/js/umd/frozenproduct/large/light/components/form.js +42 -42
  189. package/js/umd/frozenproduct/large/light/mode.js +1 -131
  190. package/js/umd/frozenproduct/small/dark/components/container.js +204 -20
  191. package/js/umd/frozenproduct/small/dark/components/form.js +40 -40
  192. package/js/umd/frozenproduct/small/dark/mode.js +0 -130
  193. package/js/umd/frozenproduct/small/light/components/container.js +204 -20
  194. package/js/umd/frozenproduct/small/light/components/form.js +42 -42
  195. package/js/umd/frozenproduct/small/light/mode.js +1 -131
  196. package/js/umd/marketing/large/dark/components/container.js +204 -20
  197. package/js/umd/marketing/large/dark/components/form.js +40 -40
  198. package/js/umd/marketing/large/dark/mode.js +0 -130
  199. package/js/umd/marketing/large/light/components/container.js +204 -20
  200. package/js/umd/marketing/large/light/components/form.js +42 -42
  201. package/js/umd/marketing/large/light/mode.js +1 -131
  202. package/js/umd/marketing/small/dark/components/container.js +204 -20
  203. package/js/umd/marketing/small/dark/components/form.js +40 -40
  204. package/js/umd/marketing/small/dark/mode.js +0 -130
  205. package/js/umd/marketing/small/light/components/container.js +204 -20
  206. package/js/umd/marketing/small/light/components/form.js +42 -42
  207. package/js/umd/marketing/small/light/mode.js +1 -131
  208. package/js/umd/product/large/dark/components/container.js +204 -20
  209. package/js/umd/product/large/dark/components/form.js +40 -40
  210. package/js/umd/product/large/dark/mode.js +0 -130
  211. package/js/umd/product/large/light/components/container.js +204 -20
  212. package/js/umd/product/large/light/components/form.js +42 -42
  213. package/js/umd/product/large/light/mode.js +1 -131
  214. package/js/umd/product/small/dark/components/container.js +204 -20
  215. package/js/umd/product/small/dark/components/form.js +40 -40
  216. package/js/umd/product/small/dark/mode.js +0 -130
  217. package/js/umd/product/small/light/components/container.js +204 -20
  218. package/js/umd/product/small/light/components/form.js +42 -42
  219. package/js/umd/product/small/light/mode.js +1 -131
  220. package/json/flat/frozenproduct/large/dark/components/container.json +20 -10
  221. package/json/flat/frozenproduct/large/dark/components/form.json +20 -20
  222. package/json/flat/frozenproduct/large/dark/mode.json +0 -10
  223. package/json/flat/frozenproduct/large/light/components/container.json +20 -10
  224. package/json/flat/frozenproduct/large/light/components/form.json +22 -22
  225. package/json/flat/frozenproduct/large/light/mode.json +1 -11
  226. package/json/flat/frozenproduct/small/dark/components/container.json +20 -10
  227. package/json/flat/frozenproduct/small/dark/components/form.json +20 -20
  228. package/json/flat/frozenproduct/small/dark/mode.json +0 -10
  229. package/json/flat/frozenproduct/small/light/components/container.json +20 -10
  230. package/json/flat/frozenproduct/small/light/components/form.json +22 -22
  231. package/json/flat/frozenproduct/small/light/mode.json +1 -11
  232. package/json/flat/marketing/large/dark/components/container.json +20 -10
  233. package/json/flat/marketing/large/dark/components/form.json +20 -20
  234. package/json/flat/marketing/large/dark/mode.json +0 -10
  235. package/json/flat/marketing/large/light/components/container.json +20 -10
  236. package/json/flat/marketing/large/light/components/form.json +22 -22
  237. package/json/flat/marketing/large/light/mode.json +1 -11
  238. package/json/flat/marketing/small/dark/components/container.json +20 -10
  239. package/json/flat/marketing/small/dark/components/form.json +20 -20
  240. package/json/flat/marketing/small/dark/mode.json +0 -10
  241. package/json/flat/marketing/small/light/components/container.json +20 -10
  242. package/json/flat/marketing/small/light/components/form.json +22 -22
  243. package/json/flat/marketing/small/light/mode.json +1 -11
  244. package/json/flat/product/large/dark/components/container.json +20 -10
  245. package/json/flat/product/large/dark/components/form.json +20 -20
  246. package/json/flat/product/large/dark/mode.json +0 -10
  247. package/json/flat/product/large/light/components/container.json +20 -10
  248. package/json/flat/product/large/light/components/form.json +22 -22
  249. package/json/flat/product/large/light/mode.json +1 -11
  250. package/json/flat/product/small/dark/components/container.json +20 -10
  251. package/json/flat/product/small/dark/components/form.json +20 -20
  252. package/json/flat/product/small/dark/mode.json +0 -10
  253. package/json/flat/product/small/light/components/container.json +20 -10
  254. package/json/flat/product/small/light/components/form.json +22 -22
  255. package/json/flat/product/small/light/mode.json +1 -11
  256. package/json/nested/frozenproduct/large/dark/components/container.json +20 -10
  257. package/json/nested/frozenproduct/large/dark/components/form.json +20 -20
  258. package/json/nested/frozenproduct/large/dark/mode.json +10 -20
  259. package/json/nested/frozenproduct/large/light/components/container.json +20 -10
  260. package/json/nested/frozenproduct/large/light/components/form.json +22 -22
  261. package/json/nested/frozenproduct/large/light/mode.json +11 -21
  262. package/json/nested/frozenproduct/small/dark/components/container.json +20 -10
  263. package/json/nested/frozenproduct/small/dark/components/form.json +20 -20
  264. package/json/nested/frozenproduct/small/dark/mode.json +10 -20
  265. package/json/nested/frozenproduct/small/light/components/container.json +20 -10
  266. package/json/nested/frozenproduct/small/light/components/form.json +22 -22
  267. package/json/nested/frozenproduct/small/light/mode.json +11 -21
  268. package/json/nested/marketing/large/dark/components/container.json +20 -10
  269. package/json/nested/marketing/large/dark/components/form.json +20 -20
  270. package/json/nested/marketing/large/dark/mode.json +10 -20
  271. package/json/nested/marketing/large/light/components/container.json +20 -10
  272. package/json/nested/marketing/large/light/components/form.json +22 -22
  273. package/json/nested/marketing/large/light/mode.json +11 -21
  274. package/json/nested/marketing/small/dark/components/container.json +20 -10
  275. package/json/nested/marketing/small/dark/components/form.json +20 -20
  276. package/json/nested/marketing/small/dark/mode.json +10 -20
  277. package/json/nested/marketing/small/light/components/container.json +20 -10
  278. package/json/nested/marketing/small/light/components/form.json +22 -22
  279. package/json/nested/marketing/small/light/mode.json +11 -21
  280. package/json/nested/product/large/dark/components/container.json +20 -10
  281. package/json/nested/product/large/dark/components/form.json +20 -20
  282. package/json/nested/product/large/dark/mode.json +10 -20
  283. package/json/nested/product/large/light/components/container.json +20 -10
  284. package/json/nested/product/large/light/components/form.json +22 -22
  285. package/json/nested/product/large/light/mode.json +11 -21
  286. package/json/nested/product/small/dark/components/container.json +20 -10
  287. package/json/nested/product/small/dark/components/form.json +20 -20
  288. package/json/nested/product/small/dark/mode.json +10 -20
  289. package/json/nested/product/small/light/components/container.json +20 -10
  290. package/json/nested/product/small/light/components/form.json +22 -22
  291. package/json/nested/product/small/light/mode.json +11 -21
  292. package/package.json +1 -1
  293. package/sage-design-tokens-9.0.0.tgz +0 -0
  294. package/scss/frozenproduct/large/components/container.scss +20 -10
  295. package/scss/frozenproduct/large/components/form.scss +20 -20
  296. package/scss/frozenproduct/large/dark.scss +0 -10
  297. package/scss/frozenproduct/large/light.scss +1 -11
  298. package/scss/frozenproduct/small/components/container.scss +20 -10
  299. package/scss/frozenproduct/small/components/form.scss +20 -20
  300. package/scss/frozenproduct/small/dark.scss +0 -10
  301. package/scss/frozenproduct/small/light.scss +1 -11
  302. package/scss/marketing/large/components/container.scss +20 -10
  303. package/scss/marketing/large/components/form.scss +20 -20
  304. package/scss/marketing/large/components/link.scss +2 -2
  305. package/scss/marketing/large/dark.scss +0 -10
  306. package/scss/marketing/large/light.scss +1 -11
  307. package/scss/marketing/small/components/container.scss +20 -10
  308. package/scss/marketing/small/components/form.scss +20 -20
  309. package/scss/marketing/small/dark.scss +0 -10
  310. package/scss/marketing/small/light.scss +1 -11
  311. package/scss/product/large/components/button.scss +23 -23
  312. package/scss/product/large/components/container.scss +29 -19
  313. package/scss/product/large/components/form.scss +27 -27
  314. package/scss/product/large/components/link.scss +2 -2
  315. package/scss/product/large/components/nav.scss +3 -3
  316. package/scss/product/large/components/page.scss +1 -1
  317. package/scss/product/large/components/popover.scss +2 -2
  318. package/scss/product/large/components/progress.scss +6 -6
  319. package/scss/product/large/components/status.scss +3 -3
  320. package/scss/product/large/components/tab.scss +7 -7
  321. package/scss/product/large/components/table.scss +10 -10
  322. package/scss/product/large/dark.scss +0 -10
  323. package/scss/product/large/light.scss +1 -11
  324. package/scss/product/small/components/container.scss +20 -10
  325. package/scss/product/small/components/form.scss +20 -20
  326. package/scss/product/small/dark.scss +0 -10
  327. package/scss/product/small/light.scss +1 -11
  328. package/sage-design-tokens-8.5.1.tgz +0 -0
package/css/frozenproduct/all.css CHANGED
@@ -154,36 +154,26 @@
154
154
  --modes-color-brand-copilot-no-bg-monochrome-light: #000000;
155
155
  --modes-color-custom-default-light: #00811F; /* This is the color to replace in white label products. Ensure luminousity of custom color = 46.8 (see hsluv.org). AAA against FFFFFF bg. */
156
156
  --modes-color-custom-frozen-light: #008046; /* This is a derivative of Jade, and is the color to replace in white label products that use the FROZEN theme. Ensure luminousity of custom color = 46.8 (see hsluv.org). AAA against FFFFFF bg. */
157
- --modes-color-colorcode-blue-deep-light: #0071c3;
157
+ --modes-color-colorcode-blue-deep-light: #0071C3;
158
158
  --modes-color-colorcode-blue-muted-light: #CDE5FF;
159
- --modes-color-colorcode-blue-rich-light: #0084E1;
160
159
  --modes-color-colorcode-teal-deep-light: #007C7B;
161
160
  --modes-color-colorcode-teal-muted-light: #C1FBFB;
162
- --modes-color-colorcode-teal-rich-light: #009B99;
163
161
  --modes-color-colorcode-green-deep-light: #00811F;
164
162
  --modes-color-colorcode-green-muted-light: #C5FFC9;
165
- --modes-color-colorcode-green-rich-light: #00a128;
166
163
  --modes-color-colorcode-lime-deep-light: #637700;
167
164
  --modes-color-colorcode-lime-muted-light: #FFFF9C;
168
- --modes-color-colorcode-lime-rich-light: #819B00;
169
165
  --modes-color-colorcode-orange-deep-light: #C54300;
170
166
  --modes-color-colorcode-orange-muted-light: #FEEAB0;
171
- --modes-color-colorcode-orange-rich-light: #EA5100;
172
167
  --modes-color-colorcode-red-deep-light: #DC004E;
173
168
  --modes-color-colorcode-red-muted-light: #FFDBCF;
174
- --modes-color-colorcode-red-rich-light: #FE005B;
175
169
  --modes-color-colorcode-pink-deep-light: #C8269A;
176
170
  --modes-color-colorcode-pink-muted-light: #FFD7EE;
177
- --modes-color-colorcode-pink-rich-light: #e62db2;
178
171
  --modes-color-colorcode-purple-deep-light: #8F4CD7;
179
172
  --modes-color-colorcode-purple-muted-light: #E7DEF8;
180
- --modes-color-colorcode-purple-rich-light: #9C66DE;
181
173
  --modes-color-colorcode-slate-deep-light: #527386;
182
174
  --modes-color-colorcode-slate-muted-light: #D4E5F1;
183
- --modes-color-colorcode-slate-rich-light: #60869C;
184
175
  --modes-color-colorcode-gray-deep-light: #6F6F6F;
185
176
  --modes-color-colorcode-gray-muted-light: #E2E2E2;
186
- --modes-color-colorcode-gray-rich-light: #9b9b9b;
187
177
  --modes-color-generic-bg-nought-light: #FFFFFF;
188
178
  --modes-color-generic-bg-faint-light: #f3f3f3;
189
179
  --modes-color-generic-bg-delicate-light: #e8e8e8;
@@ -362,34 +352,24 @@
362
352
  --modes-color-custom-frozen-dark: #00D639; /* Replace this color in white label products that use the FROZEN theme. Ensure luminousity of custom color = 46.8 (see hsluv.org). AAA against FFFFFF bg. */
363
353
  --modes-color-colorcode-blue-deep-dark: #007FD9;
364
354
  --modes-color-colorcode-blue-muted-dark: #00293F;
365
- --modes-color-colorcode-blue-rich-dark: #0071c3;
366
355
  --modes-color-colorcode-teal-deep-dark: #008A89;
367
356
  --modes-color-colorcode-teal-muted-dark: #002B2A;
368
- --modes-color-colorcode-teal-rich-dark: #007C7B;
369
357
  --modes-color-colorcode-green-deep-dark: #009023;
370
358
  --modes-color-colorcode-green-muted-dark: #002D05;
371
- --modes-color-colorcode-green-rich-dark: #00811F;
372
359
  --modes-color-colorcode-lime-deep-dark: #6E8500;
373
360
  --modes-color-colorcode-lime-muted-dark: #171e00;
374
- --modes-color-colorcode-lime-rich-dark: #637700;
375
361
  --modes-color-colorcode-orange-deep-dark: #DB4B00;
376
362
  --modes-color-colorcode-orange-muted-dark: #380D00;
377
- --modes-color-colorcode-orange-rich-dark: #C54300;
378
363
  --modes-color-colorcode-red-deep-dark: #F50058;
379
364
  --modes-color-colorcode-red-muted-dark: #400011;
380
- --modes-color-colorcode-red-rich-dark: #DC004E;
381
365
  --modes-color-colorcode-pink-deep-dark: #DD2BAB;
382
366
  --modes-color-colorcode-pink-muted-dark: #3C002C;
383
- --modes-color-colorcode-pink-rich-dark: #C8269A;
384
367
  --modes-color-colorcode-purple-deep-dark: #985FDC;
385
368
  --modes-color-colorcode-purple-muted-dark: #270E41;
386
- --modes-color-colorcode-purple-rich-dark: #8F4CD7;
387
369
  --modes-color-colorcode-slate-deep-dark: #5C8196;
388
370
  --modes-color-colorcode-slate-muted-dark: #121D23;
389
- --modes-color-colorcode-slate-rich-dark: #527386;
390
371
  --modes-color-colorcode-gray-deep-dark: #7C7C7C;
391
372
  --modes-color-colorcode-gray-muted-dark: #1b1b1b;
392
- --modes-color-colorcode-gray-rich-dark: #6F6F6F;
393
373
  --modes-color-generic-bg-nought-dark: #000000;
394
374
  --modes-color-generic-bg-faint-dark: #0e0e0e;
395
375
  --modes-color-generic-bg-delicate-dark: #181818;
@@ -800,25 +780,35 @@
800
780
  --container-color-ai-nudge-border-ai-vertical: light-dark(var(--modes-color-status-ai-default-vertical-light), var(--modes-color-status-ai-default-vertical-dark)); /* left and right border for AI nudge message component */
801
781
  --container-color-calendar-label-default: light-dark(var(--modes-color-generic-content-extreme-light), var(--modes-color-generic-content-extreme-dark)); /* Accessible on calendar bg-default colors. */
802
782
  --container-color-calendar-blue-bg-default: light-dark(var(--modes-color-colorcode-blue-muted-light), var(--modes-color-colorcode-blue-muted-dark));
803
- --container-color-calendar-blue-pattern: light-dark(var(--modes-color-colorcode-blue-rich-light), var(--modes-color-colorcode-blue-rich-dark));
783
+ --container-color-calendar-blue-border-default: light-dark(var(--modes-color-colorcode-blue-deep-light), var(--modes-color-colorcode-blue-deep-dark));
784
+ --container-color-calendar-blue-pattern: light-dark(var(--modes-color-colorcode-blue-deep-light), var(--modes-color-colorcode-blue-deep-dark));
804
785
  --container-color-calendar-teal-bg-default: light-dark(var(--modes-color-colorcode-teal-muted-light), var(--modes-color-colorcode-teal-muted-dark));
805
- --container-color-calendar-teal-pattern: light-dark(var(--modes-color-colorcode-teal-rich-light), var(--modes-color-colorcode-teal-rich-dark));
786
+ --container-color-calendar-teal-border-default: light-dark(var(--modes-color-colorcode-teal-deep-light), var(--modes-color-colorcode-teal-deep-dark));
787
+ --container-color-calendar-teal-pattern: light-dark(var(--modes-color-colorcode-teal-deep-light), var(--modes-color-colorcode-teal-deep-dark));
806
788
  --container-color-calendar-green-bg-default: light-dark(var(--modes-color-colorcode-green-muted-light), var(--modes-color-colorcode-green-muted-dark));
807
- --container-color-calendar-green-pattern: light-dark(var(--modes-color-colorcode-green-rich-light), var(--modes-color-colorcode-green-rich-dark));
789
+ --container-color-calendar-green-border-default: light-dark(var(--modes-color-colorcode-green-deep-light), var(--modes-color-colorcode-green-deep-dark));
790
+ --container-color-calendar-green-pattern: light-dark(var(--modes-color-colorcode-green-deep-light), var(--modes-color-colorcode-green-deep-dark));
808
791
  --container-color-calendar-lime-bg-default: light-dark(var(--modes-color-colorcode-lime-muted-light), var(--modes-color-colorcode-lime-muted-dark));
809
- --container-color-calendar-lime-pattern: light-dark(var(--modes-color-colorcode-lime-rich-light), var(--modes-color-colorcode-lime-rich-dark));
792
+ --container-color-calendar-lime-border-default: light-dark(var(--modes-color-colorcode-lime-deep-light), var(--modes-color-colorcode-lime-deep-dark));
793
+ --container-color-calendar-lime-pattern: light-dark(var(--modes-color-colorcode-lime-deep-light), var(--modes-color-colorcode-lime-deep-dark));
810
794
  --container-color-calendar-orange-bg-default: light-dark(var(--modes-color-colorcode-orange-muted-light), var(--modes-color-colorcode-orange-muted-dark));
811
- --container-color-calendar-orange-pattern: light-dark(var(--modes-color-colorcode-orange-rich-light), var(--modes-color-colorcode-orange-rich-dark));
795
+ --container-color-calendar-orange-border-default: light-dark(var(--modes-color-colorcode-orange-deep-light), var(--modes-color-colorcode-orange-deep-dark));
796
+ --container-color-calendar-orange-pattern: light-dark(var(--modes-color-colorcode-orange-deep-light), var(--modes-color-colorcode-orange-deep-dark));
812
797
  --container-color-calendar-red-bg-default: light-dark(var(--modes-color-colorcode-red-muted-light), var(--modes-color-colorcode-red-muted-dark));
813
- --container-color-calendar-red-pattern: light-dark(var(--modes-color-colorcode-red-rich-light), var(--modes-color-colorcode-red-rich-dark));
798
+ --container-color-calendar-red-border-default: light-dark(var(--modes-color-colorcode-red-deep-light), var(--modes-color-colorcode-red-deep-dark));
799
+ --container-color-calendar-red-pattern: light-dark(var(--modes-color-colorcode-red-deep-light), var(--modes-color-colorcode-red-deep-dark));
814
800
  --container-color-calendar-pink-bg-default: light-dark(var(--modes-color-colorcode-pink-muted-light), var(--modes-color-colorcode-pink-muted-dark));
815
- --container-color-calendar-pink-pattern: light-dark(var(--modes-color-colorcode-pink-rich-light), var(--modes-color-colorcode-pink-rich-dark));
801
+ --container-color-calendar-pink-border-default: light-dark(var(--modes-color-colorcode-pink-deep-light), var(--modes-color-colorcode-pink-deep-dark));
802
+ --container-color-calendar-pink-pattern: light-dark(var(--modes-color-colorcode-pink-deep-light), var(--modes-color-colorcode-pink-deep-dark));
816
803
  --container-color-calendar-purple-bg-default: light-dark(var(--modes-color-colorcode-purple-muted-light), var(--modes-color-colorcode-purple-muted-dark));
817
- --container-color-calendar-purple-pattern: light-dark(var(--modes-color-colorcode-purple-rich-light), var(--modes-color-colorcode-purple-rich-dark));
804
+ --container-color-calendar-purple-border-default: light-dark(var(--modes-color-colorcode-purple-deep-light), var(--modes-color-colorcode-purple-deep-dark));
805
+ --container-color-calendar-purple-pattern: light-dark(var(--modes-color-colorcode-purple-deep-light), var(--modes-color-colorcode-purple-deep-dark));
818
806
  --container-color-calendar-slate-bg-default: light-dark(var(--modes-color-colorcode-slate-muted-light), var(--modes-color-colorcode-slate-muted-dark));
819
- --container-color-calendar-slate-pattern: light-dark(var(--modes-color-colorcode-slate-rich-light), var(--modes-color-colorcode-slate-rich-dark));
807
+ --container-color-calendar-slate-border-default: light-dark(var(--modes-color-colorcode-slate-deep-light), var(--modes-color-colorcode-slate-deep-dark));
808
+ --container-color-calendar-slate-pattern: light-dark(var(--modes-color-colorcode-slate-deep-light), var(--modes-color-colorcode-slate-deep-dark));
820
809
  --container-color-calendar-gray-bg-default: light-dark(var(--modes-color-colorcode-gray-muted-light), var(--modes-color-colorcode-gray-muted-dark));
821
- --container-color-calendar-gray-pattern: light-dark(var(--modes-color-colorcode-gray-rich-light), var(--modes-color-colorcode-gray-rich-dark));
810
+ --container-color-calendar-gray-border-default: light-dark(var(--modes-color-colorcode-gray-deep-light), var(--modes-color-colorcode-gray-deep-dark));
811
+ --container-color-calendar-gray-pattern: light-dark(var(--modes-color-colorcode-gray-deep-light), var(--modes-color-colorcode-gray-deep-dark));
822
812
  --container-color-interactive-bg-footer-activated: light-dark(var(--modes-color-status-positive-default-light), var(--modes-color-status-positive-default-dark)); /* */
823
813
  --container-color-interactive-border-activated: light-dark(var(--modes-color-status-positive-default-light), var(--modes-color-status-positive-default-dark));
824
814
  --container-color-interactive-bg-footer-default: light-dark(var(--modes-color-generic-bg-nought-light), var(--modes-color-generic-bg-nought-dark)); /* tile footer bg color */
@@ -1106,55 +1096,55 @@
1106
1096
  --form-radius-calendar-none: var(--global-radius-none); /* Calendar (start and end duration) */
1107
1097
  --form-radius-calendar-date: var(--global-radius-circle); /* Calendar date (hover & selected), */
1108
1098
  --form-color-colorpicker-label-default: light-dark(var(--modes-color-generic-content-extreme-light), var(--modes-color-generic-content-extreme-dark)); /* Accessible on colorpicker bg-default colors. */
1109
- --form-color-colorpicker-blue-border: light-dark(var(--modes-color-colorcode-blue-rich-light), var(--modes-color-colorcode-blue-rich-dark));
1099
+ --form-color-colorpicker-blue-border: light-dark(var(--modes-color-colorcode-blue-deep-light), var(--modes-color-colorcode-blue-deep-dark));
1110
1100
  --form-color-colorpicker-blue-bg-alt: light-dark(var(--modes-color-colorcode-blue-deep-light), var(--modes-color-colorcode-blue-deep-dark));
1111
1101
  --form-color-colorpicker-blue-bg-default: light-dark(var(--modes-color-colorcode-blue-muted-light), var(--modes-color-colorcode-blue-muted-dark));
1112
- --form-color-colorpicker-blue-pattern: light-dark(var(--modes-color-colorcode-blue-rich-light), var(--modes-color-colorcode-blue-rich-dark));
1102
+ --form-color-colorpicker-blue-pattern: light-dark(var(--modes-color-colorcode-blue-deep-light), var(--modes-color-colorcode-blue-deep-dark));
1113
1103
  --form-color-colorpicker-blue-label-default: light-dark(var(--modes-color-colorcode-blue-deep-light), var(--modes-color-colorcode-blue-deep-dark)); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
1114
- --form-color-colorpicker-teal-border: light-dark(var(--modes-color-colorcode-teal-rich-light), var(--modes-color-colorcode-teal-rich-dark));
1104
+ --form-color-colorpicker-teal-border: light-dark(var(--modes-color-colorcode-teal-deep-light), var(--modes-color-colorcode-teal-deep-dark));
1115
1105
  --form-color-colorpicker-teal-bg-alt: light-dark(var(--modes-color-colorcode-teal-deep-light), var(--modes-color-colorcode-teal-deep-dark));
1116
1106
  --form-color-colorpicker-teal-bg-default: light-dark(var(--modes-color-colorcode-teal-muted-light), var(--modes-color-colorcode-teal-muted-dark));
1117
- --form-color-colorpicker-teal-pattern: light-dark(var(--modes-color-colorcode-teal-rich-light), var(--modes-color-colorcode-teal-rich-dark));
1107
+ --form-color-colorpicker-teal-pattern: light-dark(var(--modes-color-colorcode-teal-deep-light), var(--modes-color-colorcode-teal-deep-dark));
1118
1108
  --form-color-colorpicker-teal-label-default: light-dark(var(--modes-color-colorcode-teal-deep-light), var(--modes-color-colorcode-teal-deep-dark)); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
1119
- --form-color-colorpicker-green-border: light-dark(var(--modes-color-colorcode-green-rich-light), var(--modes-color-colorcode-green-rich-dark));
1109
+ --form-color-colorpicker-green-border: light-dark(var(--modes-color-colorcode-green-deep-light), var(--modes-color-colorcode-green-deep-dark));
1120
1110
  --form-color-colorpicker-green-bg-alt: light-dark(var(--modes-color-colorcode-green-deep-light), var(--modes-color-colorcode-green-deep-dark));
1121
1111
  --form-color-colorpicker-green-bg-default: light-dark(var(--modes-color-colorcode-green-muted-light), var(--modes-color-colorcode-green-muted-dark));
1122
- --form-color-colorpicker-green-pattern: light-dark(var(--modes-color-colorcode-green-rich-light), var(--modes-color-colorcode-green-rich-dark));
1112
+ --form-color-colorpicker-green-pattern: light-dark(var(--modes-color-colorcode-green-deep-light), var(--modes-color-colorcode-green-deep-dark));
1123
1113
  --form-color-colorpicker-green-label-default: light-dark(var(--modes-color-colorcode-green-deep-light), var(--modes-color-colorcode-green-deep-dark)); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
1124
- --form-color-colorpicker-lime-border: light-dark(var(--modes-color-colorcode-lime-rich-light), var(--modes-color-colorcode-lime-rich-dark));
1114
+ --form-color-colorpicker-lime-border: light-dark(var(--modes-color-colorcode-lime-deep-light), var(--modes-color-colorcode-lime-deep-dark));
1125
1115
  --form-color-colorpicker-lime-bg-alt: light-dark(var(--modes-color-colorcode-lime-deep-light), var(--modes-color-colorcode-lime-deep-dark));
1126
1116
  --form-color-colorpicker-lime-bg-default: light-dark(var(--modes-color-colorcode-lime-muted-light), var(--modes-color-colorcode-lime-muted-dark));
1127
- --form-color-colorpicker-lime-pattern: light-dark(var(--modes-color-colorcode-lime-rich-light), var(--modes-color-colorcode-lime-rich-dark));
1117
+ --form-color-colorpicker-lime-pattern: light-dark(var(--modes-color-colorcode-lime-deep-light), var(--modes-color-colorcode-lime-deep-dark));
1128
1118
  --form-color-colorpicker-lime-label-default: light-dark(var(--modes-color-colorcode-lime-deep-light), var(--modes-color-colorcode-lime-deep-dark)); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
1129
- --form-color-colorpicker-orange-border: light-dark(var(--modes-color-colorcode-orange-rich-light), var(--modes-color-colorcode-orange-rich-dark));
1119
+ --form-color-colorpicker-orange-border: light-dark(var(--modes-color-colorcode-orange-deep-light), var(--modes-color-colorcode-orange-deep-dark));
1130
1120
  --form-color-colorpicker-orange-bg-alt: light-dark(var(--modes-color-colorcode-orange-deep-light), var(--modes-color-colorcode-orange-deep-dark));
1131
1121
  --form-color-colorpicker-orange-bg-default: light-dark(var(--modes-color-colorcode-orange-muted-light), var(--modes-color-colorcode-orange-muted-dark));
1132
- --form-color-colorpicker-orange-pattern: light-dark(var(--modes-color-colorcode-orange-rich-light), var(--modes-color-colorcode-orange-rich-dark));
1122
+ --form-color-colorpicker-orange-pattern: light-dark(var(--modes-color-colorcode-orange-deep-light), var(--modes-color-colorcode-orange-deep-dark));
1133
1123
  --form-color-colorpicker-orange-label-default: light-dark(var(--modes-color-colorcode-orange-deep-light), var(--modes-color-colorcode-orange-deep-dark)); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
1134
- --form-color-colorpicker-red-border: light-dark(var(--modes-color-colorcode-red-rich-light), var(--modes-color-colorcode-red-rich-dark));
1124
+ --form-color-colorpicker-red-border: light-dark(var(--modes-color-colorcode-red-deep-light), var(--modes-color-colorcode-red-deep-dark));
1135
1125
  --form-color-colorpicker-red-bg-alt: light-dark(var(--modes-color-colorcode-red-deep-light), var(--modes-color-colorcode-red-deep-dark));
1136
1126
  --form-color-colorpicker-red-bg-default: light-dark(var(--modes-color-colorcode-red-muted-light), var(--modes-color-colorcode-red-muted-dark));
1137
- --form-color-colorpicker-red-pattern: light-dark(var(--modes-color-colorcode-red-rich-light), var(--modes-color-colorcode-red-rich-dark));
1127
+ --form-color-colorpicker-red-pattern: light-dark(var(--modes-color-colorcode-red-deep-light), var(--modes-color-colorcode-red-deep-dark));
1138
1128
  --form-color-colorpicker-red-label-default: light-dark(var(--modes-color-colorcode-red-deep-light), var(--modes-color-colorcode-red-deep-dark)); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
1139
- --form-color-colorpicker-pink-border: light-dark(var(--modes-color-colorcode-pink-rich-light), var(--modes-color-colorcode-pink-rich-dark));
1129
+ --form-color-colorpicker-pink-border: light-dark(var(--modes-color-colorcode-pink-deep-light), var(--modes-color-colorcode-pink-deep-dark));
1140
1130
  --form-color-colorpicker-pink-bg-alt: light-dark(var(--modes-color-colorcode-pink-deep-light), var(--modes-color-colorcode-pink-deep-dark));
1141
1131
  --form-color-colorpicker-pink-bg-default: light-dark(var(--modes-color-colorcode-pink-muted-light), var(--modes-color-colorcode-pink-muted-dark));
1142
- --form-color-colorpicker-pink-pattern: light-dark(var(--modes-color-colorcode-pink-rich-light), var(--modes-color-colorcode-pink-rich-dark));
1132
+ --form-color-colorpicker-pink-pattern: light-dark(var(--modes-color-colorcode-pink-deep-light), var(--modes-color-colorcode-pink-deep-dark));
1143
1133
  --form-color-colorpicker-pink-label-default: light-dark(var(--modes-color-colorcode-pink-deep-light), var(--modes-color-colorcode-pink-deep-dark)); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
1144
- --form-color-colorpicker-purple-border: light-dark(var(--modes-color-colorcode-purple-rich-light), var(--modes-color-colorcode-purple-rich-dark));
1134
+ --form-color-colorpicker-purple-border: light-dark(var(--modes-color-colorcode-purple-deep-light), var(--modes-color-colorcode-purple-deep-dark));
1145
1135
  --form-color-colorpicker-purple-bg-alt: light-dark(var(--modes-color-colorcode-purple-deep-light), var(--modes-color-colorcode-purple-deep-dark));
1146
1136
  --form-color-colorpicker-purple-bg-default: light-dark(var(--modes-color-colorcode-purple-muted-light), var(--modes-color-colorcode-purple-muted-dark));
1147
- --form-color-colorpicker-purple-pattern: light-dark(var(--modes-color-colorcode-purple-rich-light), var(--modes-color-colorcode-purple-rich-dark));
1137
+ --form-color-colorpicker-purple-pattern: light-dark(var(--modes-color-colorcode-purple-deep-light), var(--modes-color-colorcode-purple-deep-dark));
1148
1138
  --form-color-colorpicker-purple-label-default: light-dark(var(--modes-color-colorcode-purple-deep-light), var(--modes-color-colorcode-purple-deep-dark)); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
1149
- --form-color-colorpicker-slate-border: light-dark(var(--modes-color-colorcode-slate-rich-light), var(--modes-color-colorcode-slate-rich-dark));
1139
+ --form-color-colorpicker-slate-border: light-dark(var(--modes-color-colorcode-slate-deep-light), var(--modes-color-colorcode-slate-deep-dark));
1150
1140
  --form-color-colorpicker-slate-bg-alt: light-dark(var(--modes-color-colorcode-slate-deep-light), var(--modes-color-colorcode-slate-deep-dark));
1151
1141
  --form-color-colorpicker-slate-bg-default: light-dark(var(--modes-color-colorcode-slate-muted-light), var(--modes-color-colorcode-slate-muted-dark));
1152
- --form-color-colorpicker-slate-pattern: light-dark(var(--modes-color-colorcode-slate-rich-light), var(--modes-color-colorcode-slate-rich-dark));
1142
+ --form-color-colorpicker-slate-pattern: light-dark(var(--modes-color-colorcode-slate-deep-light), var(--modes-color-colorcode-slate-deep-dark));
1153
1143
  --form-color-colorpicker-slate-label-default: light-dark(var(--modes-color-colorcode-slate-deep-light), var(--modes-color-colorcode-slate-deep-dark)); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
1154
- --form-color-colorpicker-gray-border: light-dark(var(--modes-color-colorcode-gray-rich-light), var(--modes-color-colorcode-gray-rich-dark));
1144
+ --form-color-colorpicker-gray-border: light-dark(var(--modes-color-colorcode-gray-deep-light), var(--modes-color-colorcode-gray-deep-dark));
1155
1145
  --form-color-colorpicker-gray-bg-alt: light-dark(var(--modes-color-colorcode-gray-deep-light), var(--modes-color-colorcode-gray-deep-dark));
1156
1146
  --form-color-colorpicker-gray-bg-default: light-dark(var(--modes-color-colorcode-gray-muted-light), var(--modes-color-colorcode-gray-muted-dark));
1157
- --form-color-colorpicker-gray-pattern: light-dark(var(--modes-color-colorcode-gray-rich-light), var(--modes-color-colorcode-gray-rich-dark));
1147
+ --form-color-colorpicker-gray-pattern: light-dark(var(--modes-color-colorcode-gray-deep-light), var(--modes-color-colorcode-gray-deep-dark));
1158
1148
  --form-color-colorpicker-gray-label-default: light-dark(var(--modes-color-colorcode-gray-deep-light), var(--modes-color-colorcode-gray-deep-dark)); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
1159
1149
  --form-color-labelset-label-required: light-dark(var(--modes-color-interactive-danger-default-light), var(--modes-color-interactive-danger-default-dark));
1160
1150
  --form-color-validation-border-error: light-dark(var(--modes-color-status-negative-default-light), var(--modes-color-status-negative-default-dark));
package/css/frozenproduct/large/components/container.css CHANGED
@@ -15,25 +15,35 @@
15
15
  --container-color-ai-nudge-border-ai-vertical: var(--modes-color-status-ai-default-vertical); /* left and right border for AI nudge message component */
16
16
  --container-color-calendar-label-default: var(--modes-color-generic-content-extreme); /* Accessible on calendar bg-default colors. */
17
17
  --container-color-calendar-blue-bg-default: var(--modes-color-colorcode-blue-muted);
18
- --container-color-calendar-blue-pattern: var(--modes-color-colorcode-blue-rich);
18
+ --container-color-calendar-blue-border-default: var(--modes-color-colorcode-blue-deep);
19
+ --container-color-calendar-blue-pattern: var(--modes-color-colorcode-blue-deep);
19
20
  --container-color-calendar-teal-bg-default: var(--modes-color-colorcode-teal-muted);
20
- --container-color-calendar-teal-pattern: var(--modes-color-colorcode-teal-rich);
21
+ --container-color-calendar-teal-border-default: var(--modes-color-colorcode-teal-deep);
22
+ --container-color-calendar-teal-pattern: var(--modes-color-colorcode-teal-deep);
21
23
  --container-color-calendar-green-bg-default: var(--modes-color-colorcode-green-muted);
22
- --container-color-calendar-green-pattern: var(--modes-color-colorcode-green-rich);
24
+ --container-color-calendar-green-border-default: var(--modes-color-colorcode-green-deep);
25
+ --container-color-calendar-green-pattern: var(--modes-color-colorcode-green-deep);
23
26
  --container-color-calendar-lime-bg-default: var(--modes-color-colorcode-lime-muted);
24
- --container-color-calendar-lime-pattern: var(--modes-color-colorcode-lime-rich);
27
+ --container-color-calendar-lime-border-default: var(--modes-color-colorcode-lime-deep);
28
+ --container-color-calendar-lime-pattern: var(--modes-color-colorcode-lime-deep);
25
29
  --container-color-calendar-orange-bg-default: var(--modes-color-colorcode-orange-muted);
26
- --container-color-calendar-orange-pattern: var(--modes-color-colorcode-orange-rich);
30
+ --container-color-calendar-orange-border-default: var(--modes-color-colorcode-orange-deep);
31
+ --container-color-calendar-orange-pattern: var(--modes-color-colorcode-orange-deep);
27
32
  --container-color-calendar-red-bg-default: var(--modes-color-colorcode-red-muted);
28
- --container-color-calendar-red-pattern: var(--modes-color-colorcode-red-rich);
33
+ --container-color-calendar-red-border-default: var(--modes-color-colorcode-red-deep);
34
+ --container-color-calendar-red-pattern: var(--modes-color-colorcode-red-deep);
29
35
  --container-color-calendar-pink-bg-default: var(--modes-color-colorcode-pink-muted);
30
- --container-color-calendar-pink-pattern: var(--modes-color-colorcode-pink-rich);
36
+ --container-color-calendar-pink-border-default: var(--modes-color-colorcode-pink-deep);
37
+ --container-color-calendar-pink-pattern: var(--modes-color-colorcode-pink-deep);
31
38
  --container-color-calendar-purple-bg-default: var(--modes-color-colorcode-purple-muted);
32
- --container-color-calendar-purple-pattern: var(--modes-color-colorcode-purple-rich);
39
+ --container-color-calendar-purple-border-default: var(--modes-color-colorcode-purple-deep);
40
+ --container-color-calendar-purple-pattern: var(--modes-color-colorcode-purple-deep);
33
41
  --container-color-calendar-slate-bg-default: var(--modes-color-colorcode-slate-muted);
34
- --container-color-calendar-slate-pattern: var(--modes-color-colorcode-slate-rich);
42
+ --container-color-calendar-slate-border-default: var(--modes-color-colorcode-slate-deep);
43
+ --container-color-calendar-slate-pattern: var(--modes-color-colorcode-slate-deep);
35
44
  --container-color-calendar-gray-bg-default: var(--modes-color-colorcode-gray-muted);
36
- --container-color-calendar-gray-pattern: var(--modes-color-colorcode-gray-rich);
45
+ --container-color-calendar-gray-border-default: var(--modes-color-colorcode-gray-deep);
46
+ --container-color-calendar-gray-pattern: var(--modes-color-colorcode-gray-deep);
37
47
  --container-color-interactive-bg-footer-activated: var(--modes-color-status-positive-default); /* */
38
48
  --container-color-interactive-border-activated: var(--modes-color-status-positive-default);
39
49
  --container-color-interactive-bg-footer-default: var(--modes-color-generic-bg-nought); /* tile footer bg color */
package/css/frozenproduct/large/components/form.css CHANGED
@@ -12,55 +12,55 @@
12
12
  --form-radius-calendar-none: var(--global-radius-none); /* Calendar (start and end duration) */
13
13
  --form-radius-calendar-date: var(--global-radius-circle); /* Calendar date (hover & selected), */
14
14
  --form-color-colorpicker-label-default: var(--modes-color-generic-content-extreme); /* Accessible on colorpicker bg-default colors. */
15
- --form-color-colorpicker-blue-border: var(--modes-color-colorcode-blue-rich);
15
+ --form-color-colorpicker-blue-border: var(--modes-color-colorcode-blue-deep);
16
16
  --form-color-colorpicker-blue-bg-alt: var(--modes-color-colorcode-blue-deep);
17
17
  --form-color-colorpicker-blue-bg-default: var(--modes-color-colorcode-blue-muted);
18
- --form-color-colorpicker-blue-pattern: var(--modes-color-colorcode-blue-rich);
18
+ --form-color-colorpicker-blue-pattern: var(--modes-color-colorcode-blue-deep);
19
19
  --form-color-colorpicker-blue-label-default: var(--modes-color-colorcode-blue-deep); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
20
- --form-color-colorpicker-teal-border: var(--modes-color-colorcode-teal-rich);
20
+ --form-color-colorpicker-teal-border: var(--modes-color-colorcode-teal-deep);
21
21
  --form-color-colorpicker-teal-bg-alt: var(--modes-color-colorcode-teal-deep);
22
22
  --form-color-colorpicker-teal-bg-default: var(--modes-color-colorcode-teal-muted);
23
- --form-color-colorpicker-teal-pattern: var(--modes-color-colorcode-teal-rich);
23
+ --form-color-colorpicker-teal-pattern: var(--modes-color-colorcode-teal-deep);
24
24
  --form-color-colorpicker-teal-label-default: var(--modes-color-colorcode-teal-deep); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
25
- --form-color-colorpicker-green-border: var(--modes-color-colorcode-green-rich);
25
+ --form-color-colorpicker-green-border: var(--modes-color-colorcode-green-deep);
26
26
  --form-color-colorpicker-green-bg-alt: var(--modes-color-colorcode-green-deep);
27
27
  --form-color-colorpicker-green-bg-default: var(--modes-color-colorcode-green-muted);
28
- --form-color-colorpicker-green-pattern: var(--modes-color-colorcode-green-rich);
28
+ --form-color-colorpicker-green-pattern: var(--modes-color-colorcode-green-deep);
29
29
  --form-color-colorpicker-green-label-default: var(--modes-color-colorcode-green-deep); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
30
- --form-color-colorpicker-lime-border: var(--modes-color-colorcode-lime-rich);
30
+ --form-color-colorpicker-lime-border: var(--modes-color-colorcode-lime-deep);
31
31
  --form-color-colorpicker-lime-bg-alt: var(--modes-color-colorcode-lime-deep);
32
32
  --form-color-colorpicker-lime-bg-default: var(--modes-color-colorcode-lime-muted);
33
- --form-color-colorpicker-lime-pattern: var(--modes-color-colorcode-lime-rich);
33
+ --form-color-colorpicker-lime-pattern: var(--modes-color-colorcode-lime-deep);
34
34
  --form-color-colorpicker-lime-label-default: var(--modes-color-colorcode-lime-deep); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
35
- --form-color-colorpicker-orange-border: var(--modes-color-colorcode-orange-rich);
35
+ --form-color-colorpicker-orange-border: var(--modes-color-colorcode-orange-deep);
36
36
  --form-color-colorpicker-orange-bg-alt: var(--modes-color-colorcode-orange-deep);
37
37
  --form-color-colorpicker-orange-bg-default: var(--modes-color-colorcode-orange-muted);
38
- --form-color-colorpicker-orange-pattern: var(--modes-color-colorcode-orange-rich);
38
+ --form-color-colorpicker-orange-pattern: var(--modes-color-colorcode-orange-deep);
39
39
  --form-color-colorpicker-orange-label-default: var(--modes-color-colorcode-orange-deep); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
40
- --form-color-colorpicker-red-border: var(--modes-color-colorcode-red-rich);
40
+ --form-color-colorpicker-red-border: var(--modes-color-colorcode-red-deep);
41
41
  --form-color-colorpicker-red-bg-alt: var(--modes-color-colorcode-red-deep);
42
42
  --form-color-colorpicker-red-bg-default: var(--modes-color-colorcode-red-muted);
43
- --form-color-colorpicker-red-pattern: var(--modes-color-colorcode-red-rich);
43
+ --form-color-colorpicker-red-pattern: var(--modes-color-colorcode-red-deep);
44
44
  --form-color-colorpicker-red-label-default: var(--modes-color-colorcode-red-deep); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
45
- --form-color-colorpicker-pink-border: var(--modes-color-colorcode-pink-rich);
45
+ --form-color-colorpicker-pink-border: var(--modes-color-colorcode-pink-deep);
46
46
  --form-color-colorpicker-pink-bg-alt: var(--modes-color-colorcode-pink-deep);
47
47
  --form-color-colorpicker-pink-bg-default: var(--modes-color-colorcode-pink-muted);
48
- --form-color-colorpicker-pink-pattern: var(--modes-color-colorcode-pink-rich);
48
+ --form-color-colorpicker-pink-pattern: var(--modes-color-colorcode-pink-deep);
49
49
  --form-color-colorpicker-pink-label-default: var(--modes-color-colorcode-pink-deep); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
50
- --form-color-colorpicker-purple-border: var(--modes-color-colorcode-purple-rich);
50
+ --form-color-colorpicker-purple-border: var(--modes-color-colorcode-purple-deep);
51
51
  --form-color-colorpicker-purple-bg-alt: var(--modes-color-colorcode-purple-deep);
52
52
  --form-color-colorpicker-purple-bg-default: var(--modes-color-colorcode-purple-muted);
53
- --form-color-colorpicker-purple-pattern: var(--modes-color-colorcode-purple-rich);
53
+ --form-color-colorpicker-purple-pattern: var(--modes-color-colorcode-purple-deep);
54
54
  --form-color-colorpicker-purple-label-default: var(--modes-color-colorcode-purple-deep); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
55
- --form-color-colorpicker-slate-border: var(--modes-color-colorcode-slate-rich);
55
+ --form-color-colorpicker-slate-border: var(--modes-color-colorcode-slate-deep);
56
56
  --form-color-colorpicker-slate-bg-alt: var(--modes-color-colorcode-slate-deep);
57
57
  --form-color-colorpicker-slate-bg-default: var(--modes-color-colorcode-slate-muted);
58
- --form-color-colorpicker-slate-pattern: var(--modes-color-colorcode-slate-rich);
58
+ --form-color-colorpicker-slate-pattern: var(--modes-color-colorcode-slate-deep);
59
59
  --form-color-colorpicker-slate-label-default: var(--modes-color-colorcode-slate-deep); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
60
- --form-color-colorpicker-gray-border: var(--modes-color-colorcode-gray-rich);
60
+ --form-color-colorpicker-gray-border: var(--modes-color-colorcode-gray-deep);
61
61
  --form-color-colorpicker-gray-bg-alt: var(--modes-color-colorcode-gray-deep);
62
62
  --form-color-colorpicker-gray-bg-default: var(--modes-color-colorcode-gray-muted);
63
- --form-color-colorpicker-gray-pattern: var(--modes-color-colorcode-gray-rich);
63
+ --form-color-colorpicker-gray-pattern: var(--modes-color-colorcode-gray-deep);
64
64
  --form-color-colorpicker-gray-label-default: var(--modes-color-colorcode-gray-deep); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
65
65
  --form-color-labelset-label-required: var(--modes-color-interactive-danger-default);
66
66
  --form-color-validation-border-error: var(--modes-color-status-negative-default);
package/css/frozenproduct/large/dark.css CHANGED
@@ -14,34 +14,24 @@
14
14
  --modes-color-custom-frozen: #00D639; /* Replace this color in white label products that use the FROZEN theme. Ensure luminousity of custom color = 46.8 (see hsluv.org). AAA against FFFFFF bg. */
15
15
  --modes-color-colorcode-blue-deep: #007FD9;
16
16
  --modes-color-colorcode-blue-muted: #00293F;
17
- --modes-color-colorcode-blue-rich: #0071c3;
18
17
  --modes-color-colorcode-teal-deep: #008A89;
19
18
  --modes-color-colorcode-teal-muted: #002B2A;
20
- --modes-color-colorcode-teal-rich: #007C7B;
21
19
  --modes-color-colorcode-green-deep: #009023;
22
20
  --modes-color-colorcode-green-muted: #002D05;
23
- --modes-color-colorcode-green-rich: #00811F;
24
21
  --modes-color-colorcode-lime-deep: #6E8500;
25
22
  --modes-color-colorcode-lime-muted: #171e00;
26
- --modes-color-colorcode-lime-rich: #637700;
27
23
  --modes-color-colorcode-orange-deep: #DB4B00;
28
24
  --modes-color-colorcode-orange-muted: #380D00;
29
- --modes-color-colorcode-orange-rich: #C54300;
30
25
  --modes-color-colorcode-red-deep: #F50058;
31
26
  --modes-color-colorcode-red-muted: #400011;
32
- --modes-color-colorcode-red-rich: #DC004E;
33
27
  --modes-color-colorcode-pink-deep: #DD2BAB;
34
28
  --modes-color-colorcode-pink-muted: #3C002C;
35
- --modes-color-colorcode-pink-rich: #C8269A;
36
29
  --modes-color-colorcode-purple-deep: #985FDC;
37
30
  --modes-color-colorcode-purple-muted: #270E41;
38
- --modes-color-colorcode-purple-rich: #8F4CD7;
39
31
  --modes-color-colorcode-slate-deep: #5C8196;
40
32
  --modes-color-colorcode-slate-muted: #121D23;
41
- --modes-color-colorcode-slate-rich: #527386;
42
33
  --modes-color-colorcode-gray-deep: #7C7C7C;
43
34
  --modes-color-colorcode-gray-muted: #1b1b1b;
44
- --modes-color-colorcode-gray-rich: #6F6F6F;
45
35
  --modes-color-generic-bg-nought: #000000;
46
36
  --modes-color-generic-bg-faint: #0e0e0e;
47
37
  --modes-color-generic-bg-delicate: #181818;
package/css/frozenproduct/large/light.css CHANGED
@@ -12,36 +12,26 @@
12
12
  --modes-color-brand-copilot-no-bg-monochrome: #000000;
13
13
  --modes-color-custom-default: #00811F; /* This is the color to replace in white label products. Ensure luminousity of custom color = 46.8 (see hsluv.org). AAA against FFFFFF bg. */
14
14
  --modes-color-custom-frozen: #008046; /* This is a derivative of Jade, and is the color to replace in white label products that use the FROZEN theme. Ensure luminousity of custom color = 46.8 (see hsluv.org). AAA against FFFFFF bg. */
15
- --modes-color-colorcode-blue-deep: #0071c3;
15
+ --modes-color-colorcode-blue-deep: #0071C3;
16
16
  --modes-color-colorcode-blue-muted: #CDE5FF;
17
- --modes-color-colorcode-blue-rich: #0084E1;
18
17
  --modes-color-colorcode-teal-deep: #007C7B;
19
18
  --modes-color-colorcode-teal-muted: #C1FBFB;
20
- --modes-color-colorcode-teal-rich: #009B99;
21
19
  --modes-color-colorcode-green-deep: #00811F;
22
20
  --modes-color-colorcode-green-muted: #C5FFC9;
23
- --modes-color-colorcode-green-rich: #00a128;
24
21
  --modes-color-colorcode-lime-deep: #637700;
25
22
  --modes-color-colorcode-lime-muted: #FFFF9C;
26
- --modes-color-colorcode-lime-rich: #819B00;
27
23
  --modes-color-colorcode-orange-deep: #C54300;
28
24
  --modes-color-colorcode-orange-muted: #FEEAB0;
29
- --modes-color-colorcode-orange-rich: #EA5100;
30
25
  --modes-color-colorcode-red-deep: #DC004E;
31
26
  --modes-color-colorcode-red-muted: #FFDBCF;
32
- --modes-color-colorcode-red-rich: #FE005B;
33
27
  --modes-color-colorcode-pink-deep: #C8269A;
34
28
  --modes-color-colorcode-pink-muted: #FFD7EE;
35
- --modes-color-colorcode-pink-rich: #e62db2;
36
29
  --modes-color-colorcode-purple-deep: #8F4CD7;
37
30
  --modes-color-colorcode-purple-muted: #E7DEF8;
38
- --modes-color-colorcode-purple-rich: #9C66DE;
39
31
  --modes-color-colorcode-slate-deep: #527386;
40
32
  --modes-color-colorcode-slate-muted: #D4E5F1;
41
- --modes-color-colorcode-slate-rich: #60869C;
42
33
  --modes-color-colorcode-gray-deep: #6F6F6F;
43
34
  --modes-color-colorcode-gray-muted: #E2E2E2;
44
- --modes-color-colorcode-gray-rich: #9b9b9b;
45
35
  --modes-color-generic-bg-nought: #FFFFFF;
46
36
  --modes-color-generic-bg-faint: #f3f3f3;
47
37
  --modes-color-generic-bg-delicate: #e8e8e8;
package/css/frozenproduct/small/components/container.css CHANGED
@@ -15,25 +15,35 @@
15
15
  --container-color-ai-nudge-border-ai-vertical: var(--modes-color-status-ai-default-vertical); /* left and right border for AI nudge message component */
16
16
  --container-color-calendar-label-default: var(--modes-color-generic-content-extreme); /* Accessible on calendar bg-default colors. */
17
17
  --container-color-calendar-blue-bg-default: var(--modes-color-colorcode-blue-muted);
18
- --container-color-calendar-blue-pattern: var(--modes-color-colorcode-blue-rich);
18
+ --container-color-calendar-blue-border-default: var(--modes-color-colorcode-blue-deep);
19
+ --container-color-calendar-blue-pattern: var(--modes-color-colorcode-blue-deep);
19
20
  --container-color-calendar-teal-bg-default: var(--modes-color-colorcode-teal-muted);
20
- --container-color-calendar-teal-pattern: var(--modes-color-colorcode-teal-rich);
21
+ --container-color-calendar-teal-border-default: var(--modes-color-colorcode-teal-deep);
22
+ --container-color-calendar-teal-pattern: var(--modes-color-colorcode-teal-deep);
21
23
  --container-color-calendar-green-bg-default: var(--modes-color-colorcode-green-muted);
22
- --container-color-calendar-green-pattern: var(--modes-color-colorcode-green-rich);
24
+ --container-color-calendar-green-border-default: var(--modes-color-colorcode-green-deep);
25
+ --container-color-calendar-green-pattern: var(--modes-color-colorcode-green-deep);
23
26
  --container-color-calendar-lime-bg-default: var(--modes-color-colorcode-lime-muted);
24
- --container-color-calendar-lime-pattern: var(--modes-color-colorcode-lime-rich);
27
+ --container-color-calendar-lime-border-default: var(--modes-color-colorcode-lime-deep);
28
+ --container-color-calendar-lime-pattern: var(--modes-color-colorcode-lime-deep);
25
29
  --container-color-calendar-orange-bg-default: var(--modes-color-colorcode-orange-muted);
26
- --container-color-calendar-orange-pattern: var(--modes-color-colorcode-orange-rich);
30
+ --container-color-calendar-orange-border-default: var(--modes-color-colorcode-orange-deep);
31
+ --container-color-calendar-orange-pattern: var(--modes-color-colorcode-orange-deep);
27
32
  --container-color-calendar-red-bg-default: var(--modes-color-colorcode-red-muted);
28
- --container-color-calendar-red-pattern: var(--modes-color-colorcode-red-rich);
33
+ --container-color-calendar-red-border-default: var(--modes-color-colorcode-red-deep);
34
+ --container-color-calendar-red-pattern: var(--modes-color-colorcode-red-deep);
29
35
  --container-color-calendar-pink-bg-default: var(--modes-color-colorcode-pink-muted);
30
- --container-color-calendar-pink-pattern: var(--modes-color-colorcode-pink-rich);
36
+ --container-color-calendar-pink-border-default: var(--modes-color-colorcode-pink-deep);
37
+ --container-color-calendar-pink-pattern: var(--modes-color-colorcode-pink-deep);
31
38
  --container-color-calendar-purple-bg-default: var(--modes-color-colorcode-purple-muted);
32
- --container-color-calendar-purple-pattern: var(--modes-color-colorcode-purple-rich);
39
+ --container-color-calendar-purple-border-default: var(--modes-color-colorcode-purple-deep);
40
+ --container-color-calendar-purple-pattern: var(--modes-color-colorcode-purple-deep);
33
41
  --container-color-calendar-slate-bg-default: var(--modes-color-colorcode-slate-muted);
34
- --container-color-calendar-slate-pattern: var(--modes-color-colorcode-slate-rich);
42
+ --container-color-calendar-slate-border-default: var(--modes-color-colorcode-slate-deep);
43
+ --container-color-calendar-slate-pattern: var(--modes-color-colorcode-slate-deep);
35
44
  --container-color-calendar-gray-bg-default: var(--modes-color-colorcode-gray-muted);
36
- --container-color-calendar-gray-pattern: var(--modes-color-colorcode-gray-rich);
45
+ --container-color-calendar-gray-border-default: var(--modes-color-colorcode-gray-deep);
46
+ --container-color-calendar-gray-pattern: var(--modes-color-colorcode-gray-deep);
37
47
  --container-color-interactive-bg-footer-activated: var(--modes-color-status-positive-default); /* */
38
48
  --container-color-interactive-border-activated: var(--modes-color-status-positive-default);
39
49
  --container-color-interactive-bg-footer-default: var(--modes-color-generic-bg-nought); /* tile footer bg color */
package/css/frozenproduct/small/components/form.css CHANGED
@@ -12,55 +12,55 @@
12
12
  --form-radius-calendar-none: var(--global-radius-none); /* Calendar (start and end duration) */
13
13
  --form-radius-calendar-date: var(--global-radius-circle); /* Calendar date (hover & selected), */
14
14
  --form-color-colorpicker-label-default: var(--modes-color-generic-content-extreme); /* Accessible on colorpicker bg-default colors. */
15
- --form-color-colorpicker-blue-border: var(--modes-color-colorcode-blue-rich);
15
+ --form-color-colorpicker-blue-border: var(--modes-color-colorcode-blue-deep);
16
16
  --form-color-colorpicker-blue-bg-alt: var(--modes-color-colorcode-blue-deep);
17
17
  --form-color-colorpicker-blue-bg-default: var(--modes-color-colorcode-blue-muted);
18
- --form-color-colorpicker-blue-pattern: var(--modes-color-colorcode-blue-rich);
18
+ --form-color-colorpicker-blue-pattern: var(--modes-color-colorcode-blue-deep);
19
19
  --form-color-colorpicker-blue-label-default: var(--modes-color-colorcode-blue-deep); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
20
- --form-color-colorpicker-teal-border: var(--modes-color-colorcode-teal-rich);
20
+ --form-color-colorpicker-teal-border: var(--modes-color-colorcode-teal-deep);
21
21
  --form-color-colorpicker-teal-bg-alt: var(--modes-color-colorcode-teal-deep);
22
22
  --form-color-colorpicker-teal-bg-default: var(--modes-color-colorcode-teal-muted);
23
- --form-color-colorpicker-teal-pattern: var(--modes-color-colorcode-teal-rich);
23
+ --form-color-colorpicker-teal-pattern: var(--modes-color-colorcode-teal-deep);
24
24
  --form-color-colorpicker-teal-label-default: var(--modes-color-colorcode-teal-deep); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
25
- --form-color-colorpicker-green-border: var(--modes-color-colorcode-green-rich);
25
+ --form-color-colorpicker-green-border: var(--modes-color-colorcode-green-deep);
26
26
  --form-color-colorpicker-green-bg-alt: var(--modes-color-colorcode-green-deep);
27
27
  --form-color-colorpicker-green-bg-default: var(--modes-color-colorcode-green-muted);
28
- --form-color-colorpicker-green-pattern: var(--modes-color-colorcode-green-rich);
28
+ --form-color-colorpicker-green-pattern: var(--modes-color-colorcode-green-deep);
29
29
  --form-color-colorpicker-green-label-default: var(--modes-color-colorcode-green-deep); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
30
- --form-color-colorpicker-lime-border: var(--modes-color-colorcode-lime-rich);
30
+ --form-color-colorpicker-lime-border: var(--modes-color-colorcode-lime-deep);
31
31
  --form-color-colorpicker-lime-bg-alt: var(--modes-color-colorcode-lime-deep);
32
32
  --form-color-colorpicker-lime-bg-default: var(--modes-color-colorcode-lime-muted);
33
- --form-color-colorpicker-lime-pattern: var(--modes-color-colorcode-lime-rich);
33
+ --form-color-colorpicker-lime-pattern: var(--modes-color-colorcode-lime-deep);
34
34
  --form-color-colorpicker-lime-label-default: var(--modes-color-colorcode-lime-deep); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
35
- --form-color-colorpicker-orange-border: var(--modes-color-colorcode-orange-rich);
35
+ --form-color-colorpicker-orange-border: var(--modes-color-colorcode-orange-deep);
36
36
  --form-color-colorpicker-orange-bg-alt: var(--modes-color-colorcode-orange-deep);
37
37
  --form-color-colorpicker-orange-bg-default: var(--modes-color-colorcode-orange-muted);
38
- --form-color-colorpicker-orange-pattern: var(--modes-color-colorcode-orange-rich);
38
+ --form-color-colorpicker-orange-pattern: var(--modes-color-colorcode-orange-deep);
39
39
  --form-color-colorpicker-orange-label-default: var(--modes-color-colorcode-orange-deep); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
40
- --form-color-colorpicker-red-border: var(--modes-color-colorcode-red-rich);
40
+ --form-color-colorpicker-red-border: var(--modes-color-colorcode-red-deep);
41
41
  --form-color-colorpicker-red-bg-alt: var(--modes-color-colorcode-red-deep);
42
42
  --form-color-colorpicker-red-bg-default: var(--modes-color-colorcode-red-muted);
43
- --form-color-colorpicker-red-pattern: var(--modes-color-colorcode-red-rich);
43
+ --form-color-colorpicker-red-pattern: var(--modes-color-colorcode-red-deep);
44
44
  --form-color-colorpicker-red-label-default: var(--modes-color-colorcode-red-deep); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
45
- --form-color-colorpicker-pink-border: var(--modes-color-colorcode-pink-rich);
45
+ --form-color-colorpicker-pink-border: var(--modes-color-colorcode-pink-deep);
46
46
  --form-color-colorpicker-pink-bg-alt: var(--modes-color-colorcode-pink-deep);
47
47
  --form-color-colorpicker-pink-bg-default: var(--modes-color-colorcode-pink-muted);
48
- --form-color-colorpicker-pink-pattern: var(--modes-color-colorcode-pink-rich);
48
+ --form-color-colorpicker-pink-pattern: var(--modes-color-colorcode-pink-deep);
49
49
  --form-color-colorpicker-pink-label-default: var(--modes-color-colorcode-pink-deep); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
50
- --form-color-colorpicker-purple-border: var(--modes-color-colorcode-purple-rich);
50
+ --form-color-colorpicker-purple-border: var(--modes-color-colorcode-purple-deep);
51
51
  --form-color-colorpicker-purple-bg-alt: var(--modes-color-colorcode-purple-deep);
52
52
  --form-color-colorpicker-purple-bg-default: var(--modes-color-colorcode-purple-muted);
53
- --form-color-colorpicker-purple-pattern: var(--modes-color-colorcode-purple-rich);
53
+ --form-color-colorpicker-purple-pattern: var(--modes-color-colorcode-purple-deep);
54
54
  --form-color-colorpicker-purple-label-default: var(--modes-color-colorcode-purple-deep); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
55
- --form-color-colorpicker-slate-border: var(--modes-color-colorcode-slate-rich);
55
+ --form-color-colorpicker-slate-border: var(--modes-color-colorcode-slate-deep);
56
56
  --form-color-colorpicker-slate-bg-alt: var(--modes-color-colorcode-slate-deep);
57
57
  --form-color-colorpicker-slate-bg-default: var(--modes-color-colorcode-slate-muted);
58
- --form-color-colorpicker-slate-pattern: var(--modes-color-colorcode-slate-rich);
58
+ --form-color-colorpicker-slate-pattern: var(--modes-color-colorcode-slate-deep);
59
59
  --form-color-colorpicker-slate-label-default: var(--modes-color-colorcode-slate-deep); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
60
- --form-color-colorpicker-gray-border: var(--modes-color-colorcode-gray-rich);
60
+ --form-color-colorpicker-gray-border: var(--modes-color-colorcode-gray-deep);
61
61
  --form-color-colorpicker-gray-bg-alt: var(--modes-color-colorcode-gray-deep);
62
62
  --form-color-colorpicker-gray-bg-default: var(--modes-color-colorcode-gray-muted);
63
- --form-color-colorpicker-gray-pattern: var(--modes-color-colorcode-gray-rich);
63
+ --form-color-colorpicker-gray-pattern: var(--modes-color-colorcode-gray-deep);
64
64
  --form-color-colorpicker-gray-label-default: var(--modes-color-colorcode-gray-deep); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
65
65
  --form-color-labelset-label-required: var(--modes-color-interactive-danger-default);
66
66
  --form-color-validation-border-error: var(--modes-color-status-negative-default);
package/css/frozenproduct/small/dark.css CHANGED
@@ -14,34 +14,24 @@
14
14
  --modes-color-custom-frozen: #00D639; /* Replace this color in white label products that use the FROZEN theme. Ensure luminousity of custom color = 46.8 (see hsluv.org). AAA against FFFFFF bg. */
15
15
  --modes-color-colorcode-blue-deep: #007FD9;
16
16
  --modes-color-colorcode-blue-muted: #00293F;
17
- --modes-color-colorcode-blue-rich: #0071c3;
18
17
  --modes-color-colorcode-teal-deep: #008A89;
19
18
  --modes-color-colorcode-teal-muted: #002B2A;
20
- --modes-color-colorcode-teal-rich: #007C7B;
21
19
  --modes-color-colorcode-green-deep: #009023;
22
20
  --modes-color-colorcode-green-muted: #002D05;
23
- --modes-color-colorcode-green-rich: #00811F;
24
21
  --modes-color-colorcode-lime-deep: #6E8500;
25
22
  --modes-color-colorcode-lime-muted: #171e00;
26
- --modes-color-colorcode-lime-rich: #637700;
27
23
  --modes-color-colorcode-orange-deep: #DB4B00;
28
24
  --modes-color-colorcode-orange-muted: #380D00;
29
- --modes-color-colorcode-orange-rich: #C54300;
30
25
  --modes-color-colorcode-red-deep: #F50058;
31
26
  --modes-color-colorcode-red-muted: #400011;
32
- --modes-color-colorcode-red-rich: #DC004E;
33
27
  --modes-color-colorcode-pink-deep: #DD2BAB;
34
28
  --modes-color-colorcode-pink-muted: #3C002C;
35
- --modes-color-colorcode-pink-rich: #C8269A;
36
29
  --modes-color-colorcode-purple-deep: #985FDC;
37
30
  --modes-color-colorcode-purple-muted: #270E41;
38
- --modes-color-colorcode-purple-rich: #8F4CD7;
39
31
  --modes-color-colorcode-slate-deep: #5C8196;
40
32
  --modes-color-colorcode-slate-muted: #121D23;
41
- --modes-color-colorcode-slate-rich: #527386;
42
33
  --modes-color-colorcode-gray-deep: #7C7C7C;
43
34
  --modes-color-colorcode-gray-muted: #1b1b1b;
44
- --modes-color-colorcode-gray-rich: #6F6F6F;
45
35
  --modes-color-generic-bg-nought: #000000;
46
36
  --modes-color-generic-bg-faint: #0e0e0e;
47
37
  --modes-color-generic-bg-delicate: #181818;