Update text color variables and add design variables

Author: 1aron

website/app/[locale]/(root)/docs/text-colors/content.mdx

@@ -79,7 +79,15 @@ Apply the defined `text-*` variables using the inherited rules <TextHeirs />.
 -<p class="text:pink">text-fill-color properity</p>
 +<p class="fg:pink">color properity</p>
 ```
-(i) You can use `$(blue)` to apply `variables.blue` instead of `variables.text.blue`:
+
+### Apply text color to any syntax
+Besides inheriting the above rules, you can use `text-*` to access global text color variables in other syntax.
+```html
+<svg class="stroke:**text-light**"></svg>
+```
+
+### Escape inherited text colors
+Use `$(blue)` to apply `variables.blue` instead of `variables.text.blue`.
 ```html
 <p class="fg:**$(blue)**">…</p>
 ```
@@ -98,7 +106,7 @@ export default {
     }
 }
 ```
-Apply it:
+Apply the custom color:
 ```html
 <p class="fg:**primary**"></p>
 ```

website/app/api/og-image/route.tsx

@@ -32,6 +32,11 @@ export async function GET(req: NextRequest, props: any) {
         metadata,
         title,
         description,
-        props
+        props: {
+            ...props,
+            params: {
+                locale
+            }
+        }
     })
 }

website/i18n/tw.json

@@ -12,6 +12,7 @@
     "Comparison": "比較",
     "Production Optimization": "效能優化",
     "Variables & Modes": "變數與模式",
+    "Design Variables": "設計變數",
     "Colors": "色彩",
     "Fonts": "字體",
     "Screen Sizes": "螢幕尺寸",

website/og-image.tsx

@@ -77,7 +77,6 @@ export default async function create({
         Lola: readImage(lolaFilename),
         Monting: readImage(montingFilename),
     }
-
     const $ = await createTranslation(props.params?.locale)
     title = $(title || metadata?.openGraph?.title).replace(' - Master CSS', '') as string
     description = $(description || metadata?.openGraph?.description || metadata?.description) as string