From d138ec0456e9cc75c604752e2ce55c1668e804aa Mon Sep 17 00:00:00 2001
From: ACTCD <101378590+ACTCD@users.noreply.github.com>
Date: Tue, 20 Feb 2024 20:24:04 +0800
Subject: [PATCH] feat: support ios dynamic type to improve a11y

---
 src/app/variables.css          |  3 +--
 src/ext/action-popup/app.css   | 21 +++++++++++++++++++++
 src/ext/extension-page/app.css | 21 +++++++++++++++++++++
 src/ext/shared/variables.css   |  3 +--
 4 files changed, 44 insertions(+), 4 deletions(-)

diff --git a/src/app/variables.css b/src/app/variables.css
index 0c641d23..04ab9458 100644
--- a/src/app/variables.css
+++ b/src/app/variables.css
@@ -18,8 +18,7 @@
 	--text-color-primary: rgb(255 255 255);
 	--text-color-secondary: rgb(255 255 255 / 0.65);
 	--text-color-disabled: rgb(255 255 255 / 0.4);
-	--font-family: system-ui, -apple-system, "Helvetica Neue", "Helvetica",
-		sans-serif;
+	--font-family: -apple-system, "Helvetica Neue", "Helvetica", sans-serif;
 	--text-default: 1rem/1.5rem var(--font-family);
 	--text-large: 1.25rem/1.5rem var(--font-family);
 	--text-medium: 0.875rem/1.313rem var(--font-family);
diff --git a/src/ext/action-popup/app.css b/src/ext/action-popup/app.css
index e0a88c6e..9ecba94e 100644
--- a/src/ext/action-popup/app.css
+++ b/src/ext/action-popup/app.css
@@ -23,6 +23,20 @@ body {
 		overscroll-behavior: none;
 	}
 
+	/**
+	 * Dynamic Type
+	 * https://support.apple.com/102453
+	 * https://webkit.org/blog/3709/using-the-system-font-in-web-content/
+	 * https://developer.apple.com/library/archive/releasenotes/General/WhatsNewInSafari/Articles/Safari_7_0.html#//apple_ref/doc/uid/TP40014305-CH5-SW10
+	 * https://github.com/w3c/csswg-drafts/issues/3708
+	 */
+	@supports (font: -apple-system-body) {
+		html {
+			/* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
+			font: -apple-system-title3; /* default 20px */
+		}
+	}
+
 	body {
 		width: auto;
 		min-width: 16rem;
@@ -36,6 +50,13 @@ body {
 			min-height: 16rem;
 		}
 	}
+
+	/* Avoid page zoom */
+	input,
+	textarea,
+	select {
+		font-size: max(1rem, 16px);
+	}
 }
 
 noscript {
diff --git a/src/ext/extension-page/app.css b/src/ext/extension-page/app.css
index 61b9195a..4ae66302 100644
--- a/src/ext/extension-page/app.css
+++ b/src/ext/extension-page/app.css
@@ -12,6 +12,27 @@ html {
 		height: auto;
 		overflow: visible;
 	}
+
+	/**
+	 * Dynamic Type
+	 * https://support.apple.com/102453
+	 * https://webkit.org/blog/3709/using-the-system-font-in-web-content/
+	 * https://developer.apple.com/library/archive/releasenotes/General/WhatsNewInSafari/Articles/Safari_7_0.html#//apple_ref/doc/uid/TP40014305-CH5-SW10
+	 * https://github.com/w3c/csswg-drafts/issues/3708
+	 */
+	@supports (font: -apple-system-body) {
+		html {
+			/* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
+			font: -apple-system-body; /* default 17px */
+		}
+	}
+
+	/* Avoid page zoom */
+	input,
+	textarea,
+	select {
+		font-size: max(1rem, 16px);
+	}
 }
 
 body {
diff --git a/src/ext/shared/variables.css b/src/ext/shared/variables.css
index 0c641d23..04ab9458 100644
--- a/src/ext/shared/variables.css
+++ b/src/ext/shared/variables.css
@@ -18,8 +18,7 @@
 	--text-color-primary: rgb(255 255 255);
 	--text-color-secondary: rgb(255 255 255 / 0.65);
 	--text-color-disabled: rgb(255 255 255 / 0.4);
-	--font-family: system-ui, -apple-system, "Helvetica Neue", "Helvetica",
-		sans-serif;
+	--font-family: -apple-system, "Helvetica Neue", "Helvetica", sans-serif;
 	--text-default: 1rem/1.5rem var(--font-family);
 	--text-large: 1.25rem/1.5rem var(--font-family);
 	--text-medium: 0.875rem/1.313rem var(--font-family);