feat: add the global adjustments tab to the theme designer

Author: aradzie

packages/keybr-theme-designer/lib/design/DesignPane.tsx

@@ -15,6 +15,7 @@ import { BackgroundImage } from "./BackgroundImage.tsx";
 import { ChartDesign } from "./ChartDesign.tsx";
 import { useCustomTheme } from "./context.ts";
 import * as styles from "./DesignPane.module.less";
+import { GlobalAdjustments } from "./GlobalAdjustments.tsx";
 import { InterfaceDesign } from "./InterfaceDesign.tsx";
 import { KeyboardDesign } from "./KeyboardDesign.tsx";
 import { LessonKeysDesign } from "./LessonKeysDesign.tsx";
@@ -113,6 +114,7 @@ export function DesignPane() {
         <ProfileDesign />
         <KeyboardDesign />
         <SyntaxDesign />
+        <GlobalAdjustments />
       </div>
       <FieldList>
         <Field>

packages/keybr-theme-designer/lib/design/GlobalAdjustments.tsx

@@ -0,0 +1,60 @@
+import { Field, FieldList, Icon, IconButton } from "@keybr/widget";
+import { mdiMinusCircleOutline, mdiPlusCircleOutline } from "@mdi/js";
+import { adjustColors } from "./adjust-colors.ts";
+import { useCustomTheme } from "./context.ts";
+import { Group } from "./Group.tsx";
+import { PreviewPane } from "./PreviewPane.tsx";
+import { WidgetsPreview } from "./WidgetsPreview.tsx";
+
+export function GlobalAdjustments() {
+  const { theme, setTheme } = useCustomTheme();
+  return (
+    <Group title="Global Adjustments">
+      <FieldList>
+        <Field.Filler />
+        <Field>
+          <IconButton
+            icon={<Icon shape={mdiMinusCircleOutline} />}
+            onClick={() => {
+              setTheme(adjustColors(theme, "saturation", -0.05));
+            }}
+          />
+        </Field>
+        <Field>Saturation</Field>
+        <Field>
+          <IconButton
+            icon={<Icon shape={mdiPlusCircleOutline} />}
+            onClick={() => {
+              setTheme(adjustColors(theme, "saturation", +0.05));
+            }}
+          />
+        </Field>
+        <Field.Filler />
+      </FieldList>
+      <FieldList>
+        <Field.Filler />
+        <Field>
+          <IconButton
+            icon={<Icon shape={mdiMinusCircleOutline} />}
+            onClick={() => {
+              setTheme(adjustColors(theme, "brightness", -0.05));
+            }}
+          />
+        </Field>
+        <Field>Brightness</Field>
+        <Field>
+          <IconButton
+            icon={<Icon shape={mdiPlusCircleOutline} />}
+            onClick={() => {
+              setTheme(adjustColors(theme, "brightness", +0.05));
+            }}
+          />
+        </Field>
+        <Field.Filler />
+      </FieldList>
+      <PreviewPane>
+        <WidgetsPreview />
+      </PreviewPane>
+    </Group>
+  );
+}

packages/keybr-theme-designer/lib/design/adjust-colors.ts

@@ -0,0 +1,23 @@
+import { Color } from "@keybr/color";
+import { type CustomTheme } from "@keybr/themes";
+
+export function adjustColors(
+  theme: CustomTheme,
+  property: "saturation" | "brightness",
+  delta: number,
+) {
+  for (let [prop, value] of theme) {
+    if (value instanceof Color) {
+      switch (property) {
+        case "saturation":
+          value = value.saturate(delta);
+          break;
+        case "brightness":
+          value = value.lighten(delta);
+          break;
+      }
+      theme = theme.set(prop, value);
+    }
+  }
+  return theme;
+}