feat(appearance): granular per-size text scaling with live preview

The text-size control now adjusts each size class (Large / Medium / Normal / Small) independently as well as all-at-once. Inline px sizes are mapped to a class by their value, so the per-class sliders reach real content; each class variable = global factor x its per-class factor (no double-scaling with the root font-size that handles rem text). The settings UI gains a live preview that resizes as you drag, and the four size sliders sit behind a clear toggle.
This commit is contained in:
Maurice
2026-06-29 12:15:33 +02:00
committed by Maurice
parent bb8f4d4e5e
commit 741639edf0
136 changed files with 1217 additions and 1002 deletions
+10
View File
@@ -378,6 +378,16 @@ const settings: TranslationStrings = {
'settings.appearance.group.bottomOfPage': 'Bottom of page',
'settings.appearance.sidebarHint': 'The whole right column. Turn off and the dashboard centers.',
'settings.appearance.densityHint': 'Compact tightens spacing and padding for a denser layout that fits more on screen.',
'settings.appearance.textSizeAll': 'Everything',
'settings.appearance.perSize': 'Adjust each size separately',
'settings.appearance.size.large': 'Large',
'settings.appearance.size.medium': 'Medium',
'settings.appearance.size.normal': 'Normal',
'settings.appearance.size.small': 'Small',
'settings.appearance.preview.large': 'Large heading',
'settings.appearance.preview.medium': 'Medium subtitle',
'settings.appearance.preview.normal': 'Normal body text',
'settings.appearance.preview.small': 'Small caption / address',
};
export default settings;
+10
View File
@@ -388,6 +388,16 @@ const settings: TranslationStrings = {
'settings.appearance.group.bottomOfPage': 'Bottom of page',
'settings.appearance.sidebarHint': 'The whole right column. Turn off and the dashboard centers.',
'settings.appearance.densityHint': 'Compact tightens spacing and padding for a denser layout that fits more on screen.',
'settings.appearance.textSizeAll': 'Everything',
'settings.appearance.perSize': 'Adjust each size separately',
'settings.appearance.size.large': 'Large',
'settings.appearance.size.medium': 'Medium',
'settings.appearance.size.normal': 'Normal',
'settings.appearance.size.small': 'Small',
'settings.appearance.preview.large': 'Large heading',
'settings.appearance.preview.medium': 'Medium subtitle',
'settings.appearance.preview.normal': 'Normal body text',
'settings.appearance.preview.small': 'Small caption / address',
};
export default settings;
+10
View File
@@ -385,6 +385,16 @@ const settings: TranslationStrings = {
'settings.appearance.group.bottomOfPage': 'Bottom of page',
'settings.appearance.sidebarHint': 'The whole right column. Turn off and the dashboard centers.',
'settings.appearance.densityHint': 'Compact tightens spacing and padding for a denser layout that fits more on screen.',
'settings.appearance.textSizeAll': 'Everything',
'settings.appearance.perSize': 'Adjust each size separately',
'settings.appearance.size.large': 'Large',
'settings.appearance.size.medium': 'Medium',
'settings.appearance.size.normal': 'Normal',
'settings.appearance.size.small': 'Small',
'settings.appearance.preview.large': 'Large heading',
'settings.appearance.preview.medium': 'Medium subtitle',
'settings.appearance.preview.normal': 'Normal body text',
'settings.appearance.preview.small': 'Small caption / address',
};
export default settings;
+10
View File
@@ -392,6 +392,16 @@ const settings: TranslationStrings = {
'settings.appearance.group.bottomOfPage': 'Seitenende',
'settings.appearance.sidebarHint': 'Die ganze rechte Spalte. Aus → das Dashboard zentriert sich.',
'settings.appearance.densityHint': 'Kompakt verringert Abstände und Innenabstände für ein dichteres Layout.',
'settings.appearance.textSizeAll': 'Alles',
'settings.appearance.perSize': 'Jede Größe einzeln anpassen',
'settings.appearance.size.large': 'Groß',
'settings.appearance.size.medium': 'Mittel',
'settings.appearance.size.normal': 'Normal',
'settings.appearance.size.small': 'Klein',
'settings.appearance.preview.large': 'Große Überschrift',
'settings.appearance.preview.medium': 'Mittlerer Untertitel',
'settings.appearance.preview.normal': 'Normaler Fließtext',
'settings.appearance.preview.small': 'Kleine Beschriftung / Adresse',
};
export default settings;
+10
View File
@@ -386,6 +386,16 @@ const settings: TranslationStrings = {
'settings.appearance.group.bottomOfPage': 'Bottom of page',
'settings.appearance.sidebarHint': 'The whole right column. Turn off and the dashboard centers.',
'settings.appearance.densityHint': 'Compact tightens spacing and padding for a denser layout that fits more on screen.',
'settings.appearance.textSizeAll': 'Everything',
'settings.appearance.perSize': 'Adjust each size separately',
'settings.appearance.size.large': 'Large',
'settings.appearance.size.medium': 'Medium',
'settings.appearance.size.normal': 'Normal',
'settings.appearance.size.small': 'Small',
'settings.appearance.preview.large': 'Large heading',
'settings.appearance.preview.medium': 'Medium subtitle',
'settings.appearance.preview.normal': 'Normal body text',
'settings.appearance.preview.small': 'Small caption / address',
};
export default settings;
+10
View File
@@ -391,6 +391,16 @@ const settings: TranslationStrings = {
'settings.appearance.group.bottomOfPage': 'Bottom of page',
'settings.appearance.sidebarHint': 'The whole right column. Turn off and the dashboard centers.',
'settings.appearance.densityHint': 'Compact tightens spacing and padding for a denser layout that fits more on screen.',
'settings.appearance.textSizeAll': 'Everything',
'settings.appearance.perSize': 'Adjust each size separately',
'settings.appearance.size.large': 'Large',
'settings.appearance.size.medium': 'Medium',
'settings.appearance.size.normal': 'Normal',
'settings.appearance.size.small': 'Small',
'settings.appearance.preview.large': 'Large heading',
'settings.appearance.preview.medium': 'Medium subtitle',
'settings.appearance.preview.normal': 'Normal body text',
'settings.appearance.preview.small': 'Small caption / address',
};
export default settings;
+10
View File
@@ -396,6 +396,16 @@ const settings: TranslationStrings = {
'settings.appearance.group.bottomOfPage': 'Bottom of page',
'settings.appearance.sidebarHint': 'The whole right column. Turn off and the dashboard centers.',
'settings.appearance.densityHint': 'Compact tightens spacing and padding for a denser layout that fits more on screen.',
'settings.appearance.textSizeAll': 'Everything',
'settings.appearance.perSize': 'Adjust each size separately',
'settings.appearance.size.large': 'Large',
'settings.appearance.size.medium': 'Medium',
'settings.appearance.size.normal': 'Normal',
'settings.appearance.size.small': 'Small',
'settings.appearance.preview.large': 'Large heading',
'settings.appearance.preview.medium': 'Medium subtitle',
'settings.appearance.preview.normal': 'Normal body text',
'settings.appearance.preview.small': 'Small caption / address',
};
export default settings;
+10
View File
@@ -397,6 +397,16 @@ const settings: TranslationStrings = {
'settings.appearance.group.bottomOfPage': 'Bottom of page',
'settings.appearance.sidebarHint': 'The whole right column. Turn off and the dashboard centers.',
'settings.appearance.densityHint': 'Compact tightens spacing and padding for a denser layout that fits more on screen.',
'settings.appearance.textSizeAll': 'Everything',
'settings.appearance.perSize': 'Adjust each size separately',
'settings.appearance.size.large': 'Large',
'settings.appearance.size.medium': 'Medium',
'settings.appearance.size.normal': 'Normal',
'settings.appearance.size.small': 'Small',
'settings.appearance.preview.large': 'Large heading',
'settings.appearance.preview.medium': 'Medium subtitle',
'settings.appearance.preview.normal': 'Normal body text',
'settings.appearance.preview.small': 'Small caption / address',
};
export default settings;
+10
View File
@@ -390,6 +390,16 @@ const settings: TranslationStrings = {
'settings.appearance.group.bottomOfPage': 'Bottom of page',
'settings.appearance.sidebarHint': 'The whole right column. Turn off and the dashboard centers.',
'settings.appearance.densityHint': 'Compact tightens spacing and padding for a denser layout that fits more on screen.',
'settings.appearance.textSizeAll': 'Everything',
'settings.appearance.perSize': 'Adjust each size separately',
'settings.appearance.size.large': 'Large',
'settings.appearance.size.medium': 'Medium',
'settings.appearance.size.normal': 'Normal',
'settings.appearance.size.small': 'Small',
'settings.appearance.preview.large': 'Large heading',
'settings.appearance.preview.medium': 'Medium subtitle',
'settings.appearance.preview.normal': 'Normal body text',
'settings.appearance.preview.small': 'Small caption / address',
};
export default settings;
+10
View File
@@ -389,6 +389,16 @@ const settings: TranslationStrings = {
'settings.appearance.group.bottomOfPage': 'Bottom of page',
'settings.appearance.sidebarHint': 'The whole right column. Turn off and the dashboard centers.',
'settings.appearance.densityHint': 'Compact tightens spacing and padding for a denser layout that fits more on screen.',
'settings.appearance.textSizeAll': 'Everything',
'settings.appearance.perSize': 'Adjust each size separately',
'settings.appearance.size.large': 'Large',
'settings.appearance.size.medium': 'Medium',
'settings.appearance.size.normal': 'Normal',
'settings.appearance.size.small': 'Small',
'settings.appearance.preview.large': 'Large heading',
'settings.appearance.preview.medium': 'Medium subtitle',
'settings.appearance.preview.normal': 'Normal body text',
'settings.appearance.preview.small': 'Small caption / address',
};
export default settings;
+10
View File
@@ -389,6 +389,16 @@ const settings: TranslationStrings = {
'settings.appearance.group.bottomOfPage': 'Bottom of page',
'settings.appearance.sidebarHint': 'The whole right column. Turn off and the dashboard centers.',
'settings.appearance.densityHint': 'Compact tightens spacing and padding for a denser layout that fits more on screen.',
'settings.appearance.textSizeAll': 'Everything',
'settings.appearance.perSize': 'Adjust each size separately',
'settings.appearance.size.large': 'Large',
'settings.appearance.size.medium': 'Medium',
'settings.appearance.size.normal': 'Normal',
'settings.appearance.size.small': 'Small',
'settings.appearance.preview.large': 'Large heading',
'settings.appearance.preview.medium': 'Medium subtitle',
'settings.appearance.preview.normal': 'Normal body text',
'settings.appearance.preview.small': 'Small caption / address',
};
export default settings;
+10
View File
@@ -366,6 +366,16 @@ const settings: TranslationStrings = {
'settings.appearance.group.bottomOfPage': 'Bottom of page',
'settings.appearance.sidebarHint': 'The whole right column. Turn off and the dashboard centers.',
'settings.appearance.densityHint': 'Compact tightens spacing and padding for a denser layout that fits more on screen.',
'settings.appearance.textSizeAll': 'Everything',
'settings.appearance.perSize': 'Adjust each size separately',
'settings.appearance.size.large': 'Large',
'settings.appearance.size.medium': 'Medium',
'settings.appearance.size.normal': 'Normal',
'settings.appearance.size.small': 'Small',
'settings.appearance.preview.large': 'Large heading',
'settings.appearance.preview.medium': 'Medium subtitle',
'settings.appearance.preview.normal': 'Normal body text',
'settings.appearance.preview.small': 'Small caption / address',
};
export default settings;
+10
View File
@@ -381,6 +381,16 @@ const settings: TranslationStrings = {
'settings.appearance.group.bottomOfPage': 'Bottom of page',
'settings.appearance.sidebarHint': 'The whole right column. Turn off and the dashboard centers.',
'settings.appearance.densityHint': 'Compact tightens spacing and padding for a denser layout that fits more on screen.',
'settings.appearance.textSizeAll': 'Everything',
'settings.appearance.perSize': 'Adjust each size separately',
'settings.appearance.size.large': 'Large',
'settings.appearance.size.medium': 'Medium',
'settings.appearance.size.normal': 'Normal',
'settings.appearance.size.small': 'Small',
'settings.appearance.preview.large': 'Large heading',
'settings.appearance.preview.medium': 'Medium subtitle',
'settings.appearance.preview.normal': 'Normal body text',
'settings.appearance.preview.small': 'Small caption / address',
};
export default settings;
+10
View File
@@ -389,6 +389,16 @@ const settings: TranslationStrings = {
'settings.appearance.group.bottomOfPage': 'Bottom of page',
'settings.appearance.sidebarHint': 'The whole right column. Turn off and the dashboard centers.',
'settings.appearance.densityHint': 'Compact tightens spacing and padding for a denser layout that fits more on screen.',
'settings.appearance.textSizeAll': 'Everything',
'settings.appearance.perSize': 'Adjust each size separately',
'settings.appearance.size.large': 'Large',
'settings.appearance.size.medium': 'Medium',
'settings.appearance.size.normal': 'Normal',
'settings.appearance.size.small': 'Small',
'settings.appearance.preview.large': 'Large heading',
'settings.appearance.preview.medium': 'Medium subtitle',
'settings.appearance.preview.normal': 'Normal body text',
'settings.appearance.preview.small': 'Small caption / address',
};
export default settings;
+10
View File
@@ -390,6 +390,16 @@ const settings: TranslationStrings = {
'settings.appearance.group.bottomOfPage': 'Bottom of page',
'settings.appearance.sidebarHint': 'The whole right column. Turn off and the dashboard centers.',
'settings.appearance.densityHint': 'Compact tightens spacing and padding for a denser layout that fits more on screen.',
'settings.appearance.textSizeAll': 'Everything',
'settings.appearance.perSize': 'Adjust each size separately',
'settings.appearance.size.large': 'Large',
'settings.appearance.size.medium': 'Medium',
'settings.appearance.size.normal': 'Normal',
'settings.appearance.size.small': 'Small',
'settings.appearance.preview.large': 'Large heading',
'settings.appearance.preview.medium': 'Medium subtitle',
'settings.appearance.preview.normal': 'Normal body text',
'settings.appearance.preview.small': 'Small caption / address',
};
export default settings;
+10
View File
@@ -391,6 +391,16 @@ const settings: TranslationStrings = {
'settings.appearance.group.bottomOfPage': 'Bottom of page',
'settings.appearance.sidebarHint': 'The whole right column. Turn off and the dashboard centers.',
'settings.appearance.densityHint': 'Compact tightens spacing and padding for a denser layout that fits more on screen.',
'settings.appearance.textSizeAll': 'Everything',
'settings.appearance.perSize': 'Adjust each size separately',
'settings.appearance.size.large': 'Large',
'settings.appearance.size.medium': 'Medium',
'settings.appearance.size.normal': 'Normal',
'settings.appearance.size.small': 'Small',
'settings.appearance.preview.large': 'Large heading',
'settings.appearance.preview.medium': 'Medium subtitle',
'settings.appearance.preview.normal': 'Normal body text',
'settings.appearance.preview.small': 'Small caption / address',
};
export default settings;
+10
View File
@@ -386,6 +386,16 @@ const settings: TranslationStrings = {
'settings.appearance.group.bottomOfPage': 'Bottom of page',
'settings.appearance.sidebarHint': 'The whole right column. Turn off and the dashboard centers.',
'settings.appearance.densityHint': 'Compact tightens spacing and padding for a denser layout that fits more on screen.',
'settings.appearance.textSizeAll': 'Everything',
'settings.appearance.perSize': 'Adjust each size separately',
'settings.appearance.size.large': 'Large',
'settings.appearance.size.medium': 'Medium',
'settings.appearance.size.normal': 'Normal',
'settings.appearance.size.small': 'Small',
'settings.appearance.preview.large': 'Large heading',
'settings.appearance.preview.medium': 'Medium subtitle',
'settings.appearance.preview.normal': 'Normal body text',
'settings.appearance.preview.small': 'Small caption / address',
};
export default settings;
+10
View File
@@ -386,6 +386,16 @@ const settings: TranslationStrings = {
'settings.appearance.group.bottomOfPage': 'Bottom of page',
'settings.appearance.sidebarHint': 'The whole right column. Turn off and the dashboard centers.',
'settings.appearance.densityHint': 'Compact tightens spacing and padding for a denser layout that fits more on screen.',
'settings.appearance.textSizeAll': 'Everything',
'settings.appearance.perSize': 'Adjust each size separately',
'settings.appearance.size.large': 'Large',
'settings.appearance.size.medium': 'Medium',
'settings.appearance.size.normal': 'Normal',
'settings.appearance.size.small': 'Small',
'settings.appearance.preview.large': 'Large heading',
'settings.appearance.preview.medium': 'Medium subtitle',
'settings.appearance.preview.normal': 'Normal body text',
'settings.appearance.preview.small': 'Small caption / address',
};
export default settings;
+10
View File
@@ -390,6 +390,16 @@ const settings: TranslationStrings = {
'settings.appearance.group.bottomOfPage': 'Bottom of page',
'settings.appearance.sidebarHint': 'The whole right column. Turn off and the dashboard centers.',
'settings.appearance.densityHint': 'Compact tightens spacing and padding for a denser layout that fits more on screen.',
'settings.appearance.textSizeAll': 'Everything',
'settings.appearance.perSize': 'Adjust each size separately',
'settings.appearance.size.large': 'Large',
'settings.appearance.size.medium': 'Medium',
'settings.appearance.size.normal': 'Normal',
'settings.appearance.size.small': 'Small',
'settings.appearance.preview.large': 'Large heading',
'settings.appearance.preview.medium': 'Medium subtitle',
'settings.appearance.preview.normal': 'Normal body text',
'settings.appearance.preview.small': 'Small caption / address',
};
export default settings;
+10
View File
@@ -370,6 +370,16 @@ const settings: TranslationStrings = {
'settings.appearance.group.bottomOfPage': 'Bottom of page',
'settings.appearance.sidebarHint': 'The whole right column. Turn off and the dashboard centers.',
'settings.appearance.densityHint': 'Compact tightens spacing and padding for a denser layout that fits more on screen.',
'settings.appearance.textSizeAll': 'Everything',
'settings.appearance.perSize': 'Adjust each size separately',
'settings.appearance.size.large': 'Large',
'settings.appearance.size.medium': 'Medium',
'settings.appearance.size.normal': 'Normal',
'settings.appearance.size.small': 'Small',
'settings.appearance.preview.large': 'Large heading',
'settings.appearance.preview.medium': 'Medium subtitle',
'settings.appearance.preview.normal': 'Normal body text',
'settings.appearance.preview.small': 'Small caption / address',
};
export default settings;
+10
View File
@@ -368,6 +368,16 @@ const settings: TranslationStrings = {
'settings.appearance.group.bottomOfPage': 'Bottom of page',
'settings.appearance.sidebarHint': 'The whole right column. Turn off and the dashboard centers.',
'settings.appearance.densityHint': 'Compact tightens spacing and padding for a denser layout that fits more on screen.',
'settings.appearance.textSizeAll': 'Everything',
'settings.appearance.perSize': 'Adjust each size separately',
'settings.appearance.size.large': 'Large',
'settings.appearance.size.medium': 'Medium',
'settings.appearance.size.normal': 'Normal',
'settings.appearance.size.small': 'Small',
'settings.appearance.preview.large': 'Large heading',
'settings.appearance.preview.medium': 'Medium subtitle',
'settings.appearance.preview.normal': 'Normal body text',
'settings.appearance.preview.small': 'Small caption / address',
};
export default settings;