Add sizing guide with XScale component and metadata; update spacing overview

Author: 1aron

internal

@@ -0,0 +1,44 @@
+import ExpandContent from '~/internal/components/ExpandContent'
+
+export default () => {
+    return (
+        <figure>
+            <ExpandContent>
+                <div className='doc-table'>
+                    <table>
+                        <thead>
+                            <tr>
+                                <th>Token</th>
+                                <th>Pixels</th>
+                                <th>REM</th>
+                                <th>Representation</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {
+                                Array.from({ length: 32 }, (_, index) => ({
+                                    token: `${index + 1}x`,
+                                    px: `${(index + 1) * 4}px`,
+                                    value: `${(index + 1) * 0.25}rem`,
+                                }))
+                                    .map((row, index) => (
+                                        <tr key={index}>
+                                            <th>{row.token}</th>
+                                            <td>{row.px}</td>
+                                            <td>{row.value}</td>
+                                            <td>
+                                                <div className='inline-block bg:primary h:1em v:middle' style={{ width: row.value }}></div>
+                                            </td>
+                                        </tr>
+                                    ))
+                            }
+                            <tr>
+                                <td colSpan={4}>...</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </ExpandContent>
+        </figure>
+    )
+}

site/app/[locale]/guide/sizing/components/XScale.tsx

@@ -0,0 +1,6 @@
+## Overview [sr-only]
+<XScale />
+```html
+<!-- @MARK 6x -->
+<div class="size:6x">24px, width: 1.5rem; height: 1.5rem</div>
+```

site/app/[locale]/guide/sizing/content.mdx

@@ -0,0 +1,10 @@
+import define from 'internal/utils/metadata'
+
+const metadata = define({
+    title: 'Sizing',
+    description: 'A guide to the sizing system and how to apply it in your project.',
+    category: 'Fundations',
+    fileURL: import.meta.url
+})
+
+export default metadata

site/app/[locale]/guide/sizing/metadata.ts

@@ -0,0 +1,15 @@
+import createPage from '~/internal/factories/create-page'
+import Layout from 'internal/layouts/doc'
+import metadata from './metadata'
+import dictionaries from '~/site/dictionaries'
+import categories from '~/site/.categories/guide.json'
+
+export const { Page, dynamic, revalidate, generateMetadata } = createPage({
+    metadata,
+    dictionaries,
+    categories,
+    content: import('./content.mdx'),
+    Layout,
+})
+
+export default Page

site/app/[locale]/guide/sizing/page.tsx

@@ -8,8 +8,8 @@ export default () => {
                     <thead>
                         <tr>
                             <th>Token</th>
-                            <th className='text:center'>Pixels</th>
-                            <th className='text:center'>REM</th>
+                            <th>Pixels</th>
+                            <th>REM</th>
                             <th>Representation</th>
                         </tr>
                     </thead>
@@ -19,8 +19,8 @@ export default () => {
                                 .map(([key, value], index) => (
                                     <tr key={index}>
                                         <th>{key}</th>
-                                        <td className='text:right'>{value}px</td>
-                                        <td className='text:right'>{value / 16}rem</td>
+                                        <td>{value}px</td>
+                                        <td>{value / 16}rem</td>
                                         <td>
                                             <div className='inline-flex bg:stripe-pink w:fit outline:1|lighter outline-offset:-1 v:middle' style={{ gap: value / 16 + 'rem' }}>
                                                 {Array.from({ length: 14 - index }, (_, index) => <div className='inline-block bg:base size:1.5em'></div>)}

site/app/[locale]/guide/spacing/components/Overview.tsx

@@ -1,3 +1,5 @@
+import XScale from '../sizing/components/XScale'
+
 ## Overview [sr-only]
 This spacing scale ranges from `4xs` to `5xl`, allowing fine-tuned control over both compact and expansive layouts.
 <Overview />
@@ -59,9 +61,9 @@ Apply the custom spacing tokens in your markup:
 
 ---
 
-## Using multiplier `x`
+## Using spacing multiplier
 The spacing system is grounded on a consistent and scalable design token foundation. It uses a [base unit](/guide/configuration#baseunit) of **4 pixels**, which acts as the smallest scalable measurement across your interface.
-
+<XScale />
 Use the `x` suffix to indicate a multiplier of the base unit.
 ```html
 <!-- @MARK 1x -->

site/app/[locale]/guide/spacing/content.mdx

@@ -4,7 +4,7 @@ import { rules } from '@master/css'
 export default () => <>
     {
         Object.keys(rules)
-            .filter((ruleName) => (rules as any)[ruleName].variables?.find((variable: string) => variable.includes('frame')))
+            .filter((ruleName) => (rules as any)[ruleName].namespaces?.find((variable: string) => variable.includes('frame')))
             .map((ruleName, index, arr) =>
                 <Fragment key={ruleName}>
                     <code>{ruleName}</code>

site/app/[locale]/reference/border-color/components/FrameHeirs.tsx

@@ -4,7 +4,7 @@ import { rules } from '@master/css'
 export default () => <>
     {
         Object.keys(rules)
-            .filter((ruleName) => (rules as any)[ruleName].variables?.find((variable: string) => variable.includes('text')))
+            .filter((ruleName) => (rules as any)[ruleName].namespaces?.find((variable: string) => variable.includes('text')))
             .map((ruleName, index, arr) =>
                 <Fragment key={ruleName}>
                     <code>{ruleName}</code>