refactor: Rename appearance to theme (#3237)

* refactor: Rename appearance to theme

* fix

* update changelog

* rename theme_dark to theme--dark

* add about migration

src/actions/actionAlign.tsx

@@ -58,7 +58,7 @@ export const actionAlignTop = register({
     <ToolButton
       hidden={!enableActionGroup(elements, appState)}
       type="button"
-      icon={<AlignTopIcon appearance={appState.appearance} />}
+      icon={<AlignTopIcon theme={appState.theme} />}
       onClick={() => updateData(null)}
       title={`${t("labels.alignTop")} — ${getShortcutKey(
         "CtrlOrCmd+Shift+Up",
@@ -87,7 +87,7 @@ export const actionAlignBottom = register({
     <ToolButton
       hidden={!enableActionGroup(elements, appState)}
       type="button"
-      icon={<AlignBottomIcon appearance={appState.appearance} />}
+      icon={<AlignBottomIcon theme={appState.theme} />}
       onClick={() => updateData(null)}
       title={`${t("labels.alignBottom")} — ${getShortcutKey(
         "CtrlOrCmd+Shift+Down",
@@ -116,7 +116,7 @@ export const actionAlignLeft = register({
     <ToolButton
       hidden={!enableActionGroup(elements, appState)}
       type="button"
-      icon={<AlignLeftIcon appearance={appState.appearance} />}
+      icon={<AlignLeftIcon theme={appState.theme} />}
       onClick={() => updateData(null)}
       title={`${t("labels.alignLeft")} — ${getShortcutKey(
         "CtrlOrCmd+Shift+Left",
@@ -145,7 +145,7 @@ export const actionAlignRight = register({
     <ToolButton
       hidden={!enableActionGroup(elements, appState)}
       type="button"
-      icon={<AlignRightIcon appearance={appState.appearance} />}
+      icon={<AlignRightIcon theme={appState.theme} />}
       onClick={() => updateData(null)}
       title={`${t("labels.alignRight")} — ${getShortcutKey(
         "CtrlOrCmd+Shift+Right",
@@ -172,7 +172,7 @@ export const actionAlignVerticallyCentered = register({
     <ToolButton
       hidden={!enableActionGroup(elements, appState)}
       type="button"
-      icon={<CenterVerticallyIcon appearance={appState.appearance} />}
+      icon={<CenterVerticallyIcon theme={appState.theme} />}
       onClick={() => updateData(null)}
       title={t("labels.centerVertically")}
       aria-label={t("labels.centerVertically")}
@@ -197,7 +197,7 @@ export const actionAlignHorizontallyCentered = register({
     <ToolButton
       hidden={!enableActionGroup(elements, appState)}
       type="button"
-      icon={<CenterHorizontallyIcon appearance={appState.appearance} />}
+      icon={<CenterHorizontallyIcon theme={appState.theme} />}
       onClick={() => updateData(null)}
       title={t("labels.centerHorizontally")}
       aria-label={t("labels.centerHorizontally")}

src/actions/actionCanvas.tsx

@@ -48,7 +48,7 @@ export const actionClearCanvas = register({
       ),
       appState: {
         ...getDefaultAppState(),
-        appearance: appState.appearance,
+        theme: appState.theme,
         elementLocked: appState.elementLocked,
         exportBackground: appState.exportBackground,
         exportEmbedScene: appState.exportEmbedScene,

src/actions/actionDistribute.tsx

@@ -53,7 +53,7 @@ export const distributeHorizontally = register({
     <ToolButton
       hidden={!enableActionGroup(elements, appState)}
       type="button"
-      icon={<DistributeHorizontallyIcon appearance={appState.appearance} />}
+      icon={<DistributeHorizontallyIcon theme={appState.theme} />}
       onClick={() => updateData(null)}
       title={`${t("labels.distributeHorizontally")} — ${getShortcutKey(
         "Alt+H",
@@ -81,7 +81,7 @@ export const distributeVertically = register({
     <ToolButton
       hidden={!enableActionGroup(elements, appState)}
       type="button"
-      icon={<DistributeVerticallyIcon appearance={appState.appearance} />}
+      icon={<DistributeVerticallyIcon theme={appState.theme} />}
       onClick={() => updateData(null)}
       title={`${t("labels.distributeVertically")} — ${getShortcutKey("Alt+V")}`}
       aria-label={t("labels.distributeVertically")}

src/actions/actionExport.tsx

@@ -225,8 +225,8 @@ export const actionExportWithDarkMode = register({
     >
       <DarkModeToggle
         value={appState.exportWithDarkMode ? "dark" : "light"}
-        onChange={(appearance: Appearence) => {
-          updateData(appearance === "dark");
+        onChange={(theme: Appearence) => {
+          updateData(theme === "dark");
         }}
         title={t("labels.toggleExportColorScheme")}
       />

src/actions/actionGroup.tsx

@@ -134,7 +134,7 @@ export const actionGroup = register({
     <ToolButton
       hidden={!enableActionGroup(elements, appState)}
       type="button"
-      icon={<GroupIcon appearance={appState.appearance} />}
+      icon={<GroupIcon theme={appState.theme} />}
       onClick={() => updateData(null)}
       title={`${t("labels.group")} — ${getShortcutKey("CtrlOrCmd+G")}`}
       aria-label={t("labels.group")}
@@ -181,7 +181,7 @@ export const actionUngroup = register({
     <ToolButton
       type="button"
       hidden={getSelectedGroupIds(appState).length === 0}
-      icon={<UngroupIcon appearance={appState.appearance} />}
+      icon={<UngroupIcon theme={appState.theme} />}
       onClick={() => updateData(null)}
       title={`${t("labels.ungroup")} — ${getShortcutKey("CtrlOrCmd+Shift+G")}`}
       aria-label={t("labels.ungroup")}

src/actions/actionProperties.tsx

@@ -169,17 +169,17 @@ export const actionChangeFillStyle = register({
           {
             value: "hachure",
             text: t("labels.hachure"),
-            icon: <FillHachureIcon appearance={appState.appearance} />,
+            icon: <FillHachureIcon theme={appState.theme} />,
           },
           {
             value: "cross-hatch",
             text: t("labels.crossHatch"),
-            icon: <FillCrossHatchIcon appearance={appState.appearance} />,
+            icon: <FillCrossHatchIcon theme={appState.theme} />,
           },
           {
             value: "solid",
             text: t("labels.solid"),
-            icon: <FillSolidIcon appearance={appState.appearance} />,
+            icon: <FillSolidIcon theme={appState.theme} />,
           },
         ]}
         group="fill"
@@ -219,32 +219,17 @@ export const actionChangeStrokeWidth = register({
           {
             value: 1,
             text: t("labels.thin"),
-            icon: (
-              <StrokeWidthIcon
-                appearance={appState.appearance}
-                strokeWidth={2}
-              />
-            ),
+            icon: <StrokeWidthIcon theme={appState.theme} strokeWidth={2} />,
           },
           {
             value: 2,
             text: t("labels.bold"),
-            icon: (
-              <StrokeWidthIcon
-                appearance={appState.appearance}
-                strokeWidth={6}
-              />
-            ),
+            icon: <StrokeWidthIcon theme={appState.theme} strokeWidth={6} />,
           },
           {
             value: 4,
             text: t("labels.extraBold"),
-            icon: (
-              <StrokeWidthIcon
-                appearance={appState.appearance}
-                strokeWidth={10}
-              />
-            ),
+            icon: <StrokeWidthIcon theme={appState.theme} strokeWidth={10} />,
           },
         ]}
         value={getFormValue(
@@ -282,17 +267,17 @@ export const actionChangeSloppiness = register({
           {
             value: 0,
             text: t("labels.architect"),
-            icon: <SloppinessArchitectIcon appearance={appState.appearance} />,
+            icon: <SloppinessArchitectIcon theme={appState.theme} />,
           },
           {
             value: 1,
             text: t("labels.artist"),
-            icon: <SloppinessArtistIcon appearance={appState.appearance} />,
+            icon: <SloppinessArtistIcon theme={appState.theme} />,
           },
           {
             value: 2,
             text: t("labels.cartoonist"),
-            icon: <SloppinessCartoonistIcon appearance={appState.appearance} />,
+            icon: <SloppinessCartoonistIcon theme={appState.theme} />,
           },
         ]}
         value={getFormValue(
@@ -329,17 +314,17 @@ export const actionChangeStrokeStyle = register({
           {
             value: "solid",
             text: t("labels.strokeStyle_solid"),
-            icon: <StrokeStyleSolidIcon appearance={appState.appearance} />,
+            icon: <StrokeStyleSolidIcon theme={appState.theme} />,
           },
           {
             value: "dashed",
             text: t("labels.strokeStyle_dashed"),
-            icon: <StrokeStyleDashedIcon appearance={appState.appearance} />,
+            icon: <StrokeStyleDashedIcon theme={appState.theme} />,
           },
           {
             value: "dotted",
             text: t("labels.strokeStyle_dotted"),
-            icon: <StrokeStyleDottedIcon appearance={appState.appearance} />,
+            icon: <StrokeStyleDottedIcon theme={appState.theme} />,
           },
         ]}
         value={getFormValue(
@@ -580,12 +565,12 @@ export const actionChangeSharpness = register({
           {
             value: "sharp",
             text: t("labels.sharp"),
-            icon: <EdgeSharpIcon appearance={appState.appearance} />,
+            icon: <EdgeSharpIcon theme={appState.theme} />,
           },
           {
             value: "round",
             text: t("labels.round"),
-            icon: <EdgeRoundIcon appearance={appState.appearance} />,
+            icon: <EdgeRoundIcon theme={appState.theme} />,
           },
         ]}
         value={getFormValue(
@@ -653,40 +638,27 @@ export const actionChangeArrowhead = register({
               {
                 value: null,
                 text: t("labels.arrowhead_none"),
-                icon: <ArrowheadNoneIcon appearance={appState.appearance} />,
+                icon: <ArrowheadNoneIcon theme={appState.theme} />,
                 keyBinding: "q",
               },
               {
                 value: "arrow",
                 text: t("labels.arrowhead_arrow"),
                 icon: (
-                  <ArrowheadArrowIcon
-                    appearance={appState.appearance}
-                    flip={!isRTL}
-                  />
+                  <ArrowheadArrowIcon theme={appState.theme} flip={!isRTL} />
                 ),
                 keyBinding: "w",
               },
               {
                 value: "bar",
                 text: t("labels.arrowhead_bar"),
-                icon: (
-                  <ArrowheadBarIcon
-                    appearance={appState.appearance}
-                    flip={!isRTL}
-                  />
-                ),
+                icon: <ArrowheadBarIcon theme={appState.theme} flip={!isRTL} />,
                 keyBinding: "e",
               },
               {
                 value: "dot",
                 text: t("labels.arrowhead_dot"),
-                icon: (
-                  <ArrowheadDotIcon
-                    appearance={appState.appearance}
-                    flip={!isRTL}
-                  />
-                ),
+                icon: <ArrowheadDotIcon theme={appState.theme} flip={!isRTL} />,
                 keyBinding: "r",
               },
             ]}
@@ -709,40 +681,27 @@ export const actionChangeArrowhead = register({
                 value: null,
                 text: t("labels.arrowhead_none"),
                 keyBinding: "q",
-                icon: <ArrowheadNoneIcon appearance={appState.appearance} />,
+                icon: <ArrowheadNoneIcon theme={appState.theme} />,
               },
               {
                 value: "arrow",
                 text: t("labels.arrowhead_arrow"),
                 keyBinding: "w",
                 icon: (
-                  <ArrowheadArrowIcon
-                    appearance={appState.appearance}
-                    flip={isRTL}
-                  />
+                  <ArrowheadArrowIcon theme={appState.theme} flip={isRTL} />
                 ),
               },
               {
                 value: "bar",
                 text: t("labels.arrowhead_bar"),
                 keyBinding: "e",
-                icon: (
-                  <ArrowheadBarIcon
-                    appearance={appState.appearance}
-                    flip={isRTL}
-                  />
-                ),
+                icon: <ArrowheadBarIcon theme={appState.theme} flip={isRTL} />,
               },
               {
                 value: "dot",
                 text: t("labels.arrowhead_dot"),
                 keyBinding: "r",
-                icon: (
-                  <ArrowheadDotIcon
-                    appearance={appState.appearance}
-                    flip={isRTL}
-                  />
-                ),
+                icon: <ArrowheadDotIcon theme={appState.theme} flip={isRTL} />,
               },
             ]}
             value={getFormValue<Arrowhead | null>(

src/actions/actionZindex.tsx

@@ -38,7 +38,7 @@ export const actionSendBackward = register({
       onClick={() => updateData(null)}
       title={`${t("labels.sendBackward")} — ${getShortcutKey("CtrlOrCmd+[")}`}
     >
-      <SendBackwardIcon appearance={appState.appearance} />
+      <SendBackwardIcon theme={appState.theme} />
     </button>
   ),
 });
@@ -65,7 +65,7 @@ export const actionBringForward = register({
       onClick={() => updateData(null)}
       title={`${t("labels.bringForward")} — ${getShortcutKey("CtrlOrCmd+]")}`}
     >
-      <BringForwardIcon appearance={appState.appearance} />
+      <BringForwardIcon theme={appState.theme} />
     </button>
   ),
 });
@@ -99,7 +99,7 @@ export const actionSendToBack = register({
           : getShortcutKey("CtrlOrCmd+Shift+[")
       }`}
     >
-      <SendToBackIcon appearance={appState.appearance} />
+      <SendToBackIcon theme={appState.theme} />
     </button>
   ),
 });
@@ -133,7 +133,7 @@ export const actionBringToFront = register({
           : getShortcutKey("CtrlOrCmd+Shift+]")
       }`}
     >
-      <BringToFrontIcon appearance={appState.appearance} />
+      <BringToFrontIcon theme={appState.theme} />
     </button>
   ),
 });