Improve: Responsive breakpoints are automatically derived from `varia…

…bles.screen`

packages/core/src/config/variables.ts

@@ -1,11 +1,23 @@
 import colors from '@master/colors'
-import screenSizes from '../tokens/screen-sizes'
 
 const variables = {
     full: '100%',
     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',
@@ -42,7 +54,6 @@ const variables = {
             'serif'
         ]
     },
-    screen: screenSizes,
     'font-weight': {
         thin: 100,
         extralight: 200,

website/app/[locale]/reference/screens/content.mdx

@@ -8,33 +8,53 @@
         </Code>
     </div>
 </details>
-Apply the default screen variables using any syntax:
-```html
-<div class="**w:screen-sm** **max-w:screen-lg**">…</div>
-```
+The `screen` in the variable is a reserved section. In addition to being used as a property value token `screen-*`, it also serves as a responsive breakpoint `@*`.
 
 ---
 
 ## Basic usage
-### Add a screen size
-Customize your screen size tokens by defining [variables](/reference/variables).
-```js name=master.css.js
-export default {
-    variables: {
-        screen: {
-+            desktop: 1280
-        }
-    }
-}
+### Apply a screen size
+Apply default screen variables using any syntax, such as [`width`](/reference/width) and [`max-width`](/reference/max-width).
+```html
+<div class="**w:screen-sm** **max-w:screen-lg**">…</div>
 ```
-Apply the defined `screen` variables anywhere:
+
+### Apply a responsive breakpoint
+Conditionally apply styles using default screen variables as responsive breakpoints.
 ```html
-<div class="**max-w:screen-desktop** mx:auto">…</div>
+<div class="font:24 font:32**@sm** font:48**@md**">…</div>
 ```
+The responsive breakpoints can be flexibly used with operators, see the [responsive design](/guide/responsive-design) documentation.
 
 ### Create a responsive container
 Fixed element width to a screen size as a responsive container.
 ```html
 <div class="**max-w:screen-sm@sm** **max-w:screen-md@md** **max-w:screen-lg@lg** …">…</div>
 ```
-To customize the responsive breakpoints, like `@sm`, define [media queries](/reference/at).
+
+---
+
+## Customization
+### Add a screen size
+Customize your screen size tokens by defining [variables](/reference/variables).
+<Code lang="js" name="master.css.js">{require('!!raw-loader!./tests/add-a-screen-size/master.css.js').default}</Code>
+Apply the defined screen variables anywhere:
+<Code lang="html">{require('!!raw-loader!./tests/add-a-screen-size/template.html').default}</Code>
+<details>
+    <summary>Generated CSS</summary>
+    <div>
+        <Code lang="css" beautify>{require('!!raw-loader!./tests/add-a-screen-size/generated.css').default}</Code>
+    </div>
+</details>
+
+### Add a responsive breakpoint
+Create a responsive breakpoint, such as `@desktop`.
+<Code lang="js" name="master.css.js">{require('!!raw-loader!./tests/add-a-responsive-breakpoint/master.css.js').default}</Code>
+Apply them:
+<Code lang="html">{require('!!raw-loader!./tests/add-a-responsive-breakpoint/template.html').default}</Code>
+<details>
+    <summary>Generated CSS</summary>
+    <div>
+        <Code lang="css" beautify>{require('!!raw-loader!./tests/add-a-responsive-breakpoint/generated.css').default}</Code>
+    </div>
+</details>

website/app/[locale]/reference/screens/tests/add-a-responsive-breakpoint/master.css.js

@@ -0,0 +1,7 @@
+export default {
+    variables: {
+        screen: {
+/*+*/       desktop: 1280   // @desktop
+        }
+    }
+}

website/app/[locale]/reference/screens/tests/add-a-responsive-breakpoint/template.html

@@ -0,0 +1 @@
+<div class="font:24 font:32**@tablet** font:48**@desktop**">…</div>

website/app/[locale]/reference/screens/tests/add-a-screen-size/generated.css

@@ -0,0 +1 @@
+.mx\:auto{margin-left:auto;margin-right:auto}.max-w\:screen-desktop{max-width:80rem}

website/app/[locale]/reference/screens/tests/add-a-screen-size/master.css.js

@@ -0,0 +1,7 @@
+export default {
+    variables: {
+        screen: {
+/*+*/       desktop: 1280   // screen-desktop
+        }
+    }
+}

website/app/[locale]/reference/screens/tests/add-a-screen-size/template.html

@@ -0,0 +1 @@
+<div class="**max-w:screen-desktop** mx:auto">…</div>