diff --git a/packages/app/src/App.tsx b/packages/app/src/App.tsx
index 4cf2c02e55..089900fb77 100644
--- a/packages/app/src/App.tsx
+++ b/packages/app/src/App.tsx
@@ -70,7 +70,10 @@ import {
techdocsPlugin,
} from '@backstage/plugin-techdocs';
import { TechDocsAddons } from '@backstage/plugin-techdocs-react';
-import { ReportIssue } from '@backstage/plugin-techdocs-module-addons-contrib';
+import {
+ ReportIssue,
+ TextSize,
+} from '@backstage/plugin-techdocs-module-addons-contrib';
import {
UserSettingsPage,
UserSettingsTab,
@@ -183,6 +186,7 @@ const routes = (
{techDocsPage}
+
({
}))(Slider);
const settings = {
- key: 'techdocs.addons.settings',
+ key: 'techdocs.addons.settings.textsize',
defaultValue: 100,
};
@@ -183,8 +182,8 @@ export const TextSizeAddon = () => {
if (!body) return;
const htmlFontSize =
(
- theme.typography as Theme['typography'] & {
- htmlFontSize: number;
+ theme.typography as BackstageTheme['typography'] & {
+ htmlFontSize?: number;
}
)?.htmlFontSize ?? 16;
body.style.setProperty(
diff --git a/plugins/techdocs-module-addons-contrib/src/plugin.ts b/plugins/techdocs-module-addons-contrib/src/plugin.ts
index 0d7f3b8575..0d7743da9e 100644
--- a/plugins/techdocs-module-addons-contrib/src/plugin.ts
+++ b/plugins/techdocs-module-addons-contrib/src/plugin.ts
@@ -50,8 +50,7 @@ export const ReportIssue = techdocsModuleAddonsContribPlugin.provide(
* This TechDocs addon allows users to customize text size on documentation pages, they can select how much they want to increase or decrease the font size via slider or buttons.
*
* @remarks
- * The default value for font size is 100% of the HTML font size and, if the theme does not have an htmlFontSize value in its typography object,
- * the Addon will assume 16px as 100% and this setting is kept in the browser's local storage.
+ * The default value for the font size is 100% of the HTML font size, if the theme does not have a `htmlFontSize` in its typography object, the addon will assume 16px as 100%, and remember, this setting is kept in the browser local storage.
*
* @example
* Here's a simple example: