refactor: origin colors again (#1175)

* refactor: origin colors again

* fix: issue with on-origin-dark

* fix: issue with pressed color

Author: nmerget

src/components/Customization/Settings/ColorSelection/ColorInputs/color-inputs.tsx

@@ -13,27 +13,41 @@ const ColorInputs = ({
   onColorChange,
   error,
   alternative,
-  contrasts,
+  contrastGroups,
 }: ColorInputsType) => {
   const { t } = useTranslation();
   return (
     <>
       <DBDivider />
-      <p className="font-bold">{name}</p>
-      <div className="flex flex-wrap gap-fix-sm">
-        {contrasts?.map((contrast, index) => (
-          <DBInfotext
-            key={`${name}-contrast-${index}`}
-            semantic={
-              contrast.value < (contrast.min ?? 3) ? "critical" : "successful"
-            }
-            size="small"
-          >
-            {contrast.name ? `${contrast.name}: ` : ""}
-            {contrast.value.toFixed(2)}:1
-          </DBInfotext>
-        ))}
-      </div>
+      <span className="font-bold">{name}</span>
+      {contrastGroups?.map((contrastGroup, indexGroup) => (
+        <div
+          className="flex flex-col gap-fix-2xs"
+          key={`${name}-contrast-group-${indexGroup}`}
+        >
+          {contrastGroup.groupName && (
+            <small className="text-adaptive-on-basic-emphasis-80-default">
+              {contrastGroup.groupName}
+            </small>
+          )}
+          <div className="flex flex-wrap gap-fix-sm">
+            {contrastGroup.contrasts.map((contrast, index) => (
+              <DBInfotext
+                key={`${name}-contrast-${index}`}
+                semantic={
+                  contrast.value < (contrast.min ?? 3)
+                    ? "critical"
+                    : "successful"
+                }
+                size="small"
+              >
+                {contrast.name ? `${contrast.name}: ` : ""}
+                {contrast.value.toFixed(2)}:1
+              </DBInfotext>
+            ))}
+          </div>
+        </div>
+      ))}
       <div className="grid grid-cols-2 gap-fix-md">
         <DBInput
           label={t("colorInputPicker")}

src/components/Customization/Settings/ColorSelection/ColorInputs/data.ts

@@ -1,8 +1,14 @@
+export type ContrastType = {
+  value: number;
+  min?: number;
+  name?: string;
+};
+
 export type ColorInputsType = {
   name: string;
   color: string;
   onColorChange: (color: string) => void;
   error?: string;
   alternative?: string;
-  contrasts?: { value: number; min?: number; name?: string }[];
+  contrastGroups?: { groupName?: string; contrasts: ContrastType[] }[];
 };