Improve: Use config.screens instead of config.variables.screens

Author: 1aron

packages/core/src/config/index.ts

@@ -6,6 +6,7 @@ import variables from './variables'
 import rules from './rules'
 import modes from './modes'
 import functions from './functions'
+import screens from './screens'
 import { Config } from '../types/config'
 
 const config: Config = {
@@ -17,6 +18,7 @@ const config: Config = {
     animations,
     variables,
     modes,
+    screens,
     scope: '',
     rootSize: 16,
     baseUnit: 4,
@@ -34,5 +36,6 @@ export {
     functions,
     animations,
     variables,
-    modes
+    modes,
+    screens
 }

packages/core/src/config/screens.ts

@@ -0,0 +1,17 @@
+import type { ScreenDefinitions } from '../types/config'
+
+const screens = {
+    '4xs': 360,
+    '3xs': 480,
+    '2xs': 600,
+    'xs': 768,
+    'sm': 834,
+    'md': 1024,
+    'lg': 1280,
+    'xl': 1440,
+    '2xl': 1600,
+    '3xl': 1920,
+    '4xl': 2560,
+} satisfies ScreenDefinitions
+
+export default screens

packages/core/src/config/variables.ts

@@ -6,19 +6,6 @@ const _variables = {
     fit: 'fit-content',
     max: 'max-content',
     min: 'min-content',
-    screen: {
-        '4xs': 360,
-        '3xs': 480,
-        '2xs': 600,
-        'xs': 768,
-        'sm': 834,
-        'md': 1024,
-        'lg': 1280,
-        'xl': 1440,
-        '2xl': 1600,
-        '3xl': 1920,
-        '4xl': 2560,
-    },
     'font-family': {
         mono: [
             'ui-monospace',

…]/reference/screens/_opengraph-image.tsx …cale]/guide/screens/_opengraph-image.tsxsite/app/[locale]/reference/screens/_opengraph-image.tsx renamed to site/app/[locale]/guide/screens/_opengraph-image.tsx site/app/[locale]/reference/screens/_opengraph-image.tsx renamed to site/app/[locale]/guide/screens/_opengraph-image.tsx

@@ -1,5 +1,6 @@
 import DocTable from 'internal/components/DocTable'
-import { variables } from '@master/css'
+import { screens, variables } from '@master/css'
+import InlineCode from '~/internal/components/InlineCode'
 
 const descriptions = {
     '4xs': 'iPhone 6, 7, 8, X, 11, 12 / Galaxy S8 / HTC One…',
@@ -20,20 +21,22 @@ export default () => {
         <DocTable>
             <thead>
                 <tr>
-                    <th className='w:0'>Token</th>
+                    <th className='w:0'>At</th>
+                    <th className='w:0'>Variable</th>
                     <th className='w:0'>Value</th>
-                    <th className='w:0'>REM</th>
+                    <th className='w:0'></th>
                     <th>Description</th>
                 </tr>
             </thead>
             <tbody>
                 {
-                    Object.entries(variables.screen)
+                    Object.entries(screens)
                         .map(([name, value], index) => (
                             <tr key={index}>
-                                <td className="white-space:nowrap"><code>screen-{name}</code></td>
-                                <td><code className='token number'>{value}</code></td>
-                                <td><code className='token number'>{value / 16}<span className='token unit'>rem</span></code></td>
+                                <th className="white-space:nowrap"><InlineCode>{`@${name}`}</InlineCode></th>
+                                <th className="white-space:nowrap"><InlineCode>{`screen-${name}`}</InlineCode></th>
+                                <td><InlineCode>{`${value}`}</InlineCode></td>
+                                <td><InlineCode>{`(${value / 16}rem)`}</InlineCode></td>
                                 <td>{descriptions[name as keyof typeof descriptions]}</td>
                             </tr>
                         ))

…reference/screens/components/Default.tsx …le]/guide/screens/components/Default.tsxsite/app/[locale]/reference/screens/components/Default.tsx renamed to site/app/[locale]/guide/screens/components/Default.tsx site/app/[locale]/reference/screens/components/Default.tsx renamed to site/app/[locale]/guide/screens/components/Default.tsx

@@ -0,0 +1,16 @@
+```js name=master.css.js
+export default {
+    screens: {
+        md: 1024, // [!code highlight]
+        lg: 1280, // [!code highlight]
+    }
+}
+```
+For example, a screen size token can be used in the following ways:
+```html
+<!-- @MARK @md -->
+<div class="font:32@md">…</div>
+<!-- @MARK screen-md -->
+<div class="max-w:screen-md">…</div>
+<!-- @MARK @container(md) -->
+<div class="hidden@container(md)">…</div>

site/app/[locale]/guide/screens/components/Overview.mdx

@@ -0,0 +1,32 @@
+## Overview [sr-only]
+<Default />
+In Master CSS, the [screen sizes](/guide/screens) are simultaneously used as *responsive breakpoints*, *screen size variables*, and *container query sizes*.
+<Overview />
+
+---
+
+## Basic usage
+### Add a screen size
+Add a screen size token to `config.screens`.
+```js name=master.css.js
+export default {
+    screens: {
+        md: 1024, // [!code highlight]
+    }
+}
+```
+Apply the screen size `screen-md` as a variable:
+```html
+<!-- @MARK @screen-md -->
+<div class="w:screen-md">…</div>
+```
+Apply the screen size `@md` as a responsive breakpoint:
+```html
+<!-- @MARK @md -->
+<div class="font:32@md">…</div>
+```
+Apply the screen size `(md)` as a container query:
+```html
+<!-- @MARK (md) -->
+<div class="hidden@container(md)">…</div>
+```

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

@@ -0,0 +1,13 @@
+import define from 'internal/utils/metadata'
+
+const metadata = define({
+    title: 'Customizing Screen Sizes',
+    description: 'A guide to adding custom screen sizes for breakpoints, containers, and variables.',
+    category: 'Customization',
+    other: {
+        subject: 'Screen Sizes',
+    },
+    fileURL: import.meta.url
+})
+
+export default metadata

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

@@ -11,7 +11,7 @@ export async function generateMetadata(props: any, parent: any) {
     return await generate(metadata, props, parent)
 }
 
-import pageCategories from '~/site/.categories/reference.json'
+import pageCategories from '~/site/.categories/guide.json'
 
 export default async function Page(props: any) {
     return (