Update dependencies and add new files

examples/blank/package.json

@@ -14,6 +14,6 @@
     },
     "dependencies": {
         "@master/css-runtime": "workspace:^",
-        "@master/normal.css": "^2.0.0"
+        "@master/normal.css": "^2.1.0"
     }
 }

examples/eslint/collision.html

@@ -1 +1 @@
-<div class="m:10 m:20 m:30 m:40@sm m:12x@sm">...</div>
+<div class="m:10 m:20 m:30 m:40@sm m:50@sm">...</div>

examples/eslint/collision.mdx

@@ -1,3 +1,3 @@
 # Test
 
-<div className="m:10 m:20 m:30 m:40@sm m:12x@sm">...</div>
+<div className="m:10 m:20 m:30 m:40@sm m:50@sm">...</div>

examples/eslint/validation.html

@@ -1 +1 @@
-<div class="bg:indigo width:">...</div>
+<div class="bg:indigo font:">...</div>

package.json

@@ -24,7 +24,7 @@
     },
     "dependencies": {
         "@google-cloud/storage": "^7.7.0",
-        "@master/normal.css": "^2.0.0",
+        "@master/normal.css": "^2.1.0",
         "@swc-node/jest": "^1.7.0",
         "@techor/fs": "^3.0.18",
         "@techor/glob": "^3.0.18",

packages/css/package.json

@@ -64,7 +64,7 @@
     },
     "dependencies": {
         "@master/colors": "^2.0.0",
-        "@master/normal.css": "^2.0.0",
+        "@master/normal.css": "^2.1.0",
         "@techor/extend": "^3.0.18"
     },
     "devDependencies": {

packages/eslint-config/tests/index.html

@@ -1,4 +1,4 @@
-<div class="m:10 m:20 m:30 m:40@sm m:12x@sm">...</div>
+<div class="m:10 m:20 m:30 m:40@sm m:50@sm">...</div>
 <div class="font:12 font:24@sm m:32 block font:32@md mb:48">...</div>
 <button class="btn">...</button>
 <div class="bg:indigo width:">...</div>

website/app/[locale]/(root)/docs/code-linting/content.mdx

@@ -55,9 +55,7 @@ import brands from 'websites/data/brands'
 In practice, you pay less attention to the order of classes, and as the number of classes increases, the template markup becomes less readable.
 
 (i) With the [class order rule](/docs/eslint#class-order), you can enforce a consistent and fixed order for classes.
-<video className="aspect:2/1 r:2x max-w:screen-xs w:full" autoPlay loop muted playsInline>
-    <source src="/videos/consistent-class-order.webm" type="video/webm" />
-</video>
+<Image className="aspect:2/1 r:2x max-w:screen-xs w:full" src={require('~/public/consistent-class-order.webp').default} alt="Consistent class order" unoptimized />
 
 (!) <span className="text:warning">No consistent class order followed.</span>
 ```html
@@ -72,23 +70,19 @@ In practice, you pay less attention to the order of classes, and as the number o
 In the past, you added utility classes to your templates unsafely, lacking the capability to verify their validity or legality directly within the source code.
 
 (i) With the [class validation rule](/docs/eslint#class-order), you can check the validity of classes early as you write them.
-<video className="aspect:2/1 r:2x max-w:screen-xs w:full" autoPlay loop muted playsInline>
-    <source src="/videos/syntax-error-checks.webm" type="video/webm" />
-</video>
+<Image className="aspect:2/1 r:2x max-w:screen-xs w:full" src={require('~/public/syntax-error-checks.webp').default} alt="Syntax error checks" unoptimized />
 
-(x) <span className="text:error">Invalid value for \`width\` property.</span>
+(x) <span className="text:error">Invalid value for \`font\` property.</span>
 ```html
-<div class="**width:**">…</div>
+<div class="**font:**">…</div>
 ```
 This is helpful if you make a typo or are unfamiliar with Master CSS syntax!
 
 ### Disallow unknown classes
 You can also restrict teams to using [configuration](/docs/configuration) to create [styles](/docs/styles) instead of defining classes through traditional `html <style>` or CSS files.
 
 (i) Based on syntax error checking, you can [disallow unknown classes](/docs/eslint#class-validation).
-<video className="aspect:2/1 r:2x max-w:screen-xs w:full" autoPlay loop muted playsInline>
-    <source src="/videos/disallow-unknown-class.webm" type="video/webm" />
-</video>
+<Image className="aspect:2/1 r:2x max-w:screen-xs w:full" src={require('~/public/disallow-unknown-class.webp').default} alt="Disallow unknown classes" unoptimized />
 
 (x) <span className="text:error">"btn" is not a valid or known class.</span>
 ```html
@@ -115,9 +109,7 @@ Restart the VSCode ESLint server to read the modified Master CSS configuration.
 The class you added may collide with existing classes due to human error or having the same declarations as a third-party custom syntax.
 
 (i) With the [class collision rule](/docs/eslint#class-collision), you'll no longer collide with existing classes.
-<video className="aspect:2/1 r:2x max-w:screen-xs w:full" autoPlay loop muted playsInline>
-    <source src="/videos/class-collision-detection.webm" type="video/webm" />
-</video>
+<Image className="aspect:2/1 r:2x max-w:screen-xs w:full" src={require('~/public/class-collision-detection.webp').default} alt="Class collision detection" unoptimized />
 
 (!) <span className="text:warning">"m:10" applies the same CSS declarations as "m:20".</span><br/><span className="text:warning">"m:20" applies the same CSS declarations as "m:10".</span>
 ```html
@@ -129,22 +121,20 @@ The class you added may collide with existing classes due to human error or havi
 ```
 It can also detect whether declarations with the same selector and media query state collide!
 
-(!) <span className="text:warning">"m:40@sm" applies the same CSS declarations as "m:12x@sm".</span><br/><span className="text:warning">"m:12x@sm" applies the same CSS declarations as "m:40@sm".</span>
+(!) <span className="text:warning">"m:40@sm" applies the same CSS declarations as "m:50@sm".</span><br/><span className="text:warning">"m:50@sm" applies the same CSS declarations as "m:40@sm".</span>
 ```html
-<div class="**m:40@sm** **m:12x@sm**">…</div>
+<div class="**m:40@sm** **m:50@sm**">…</div>
 ```
 (o) Fix this @master/css/class-collision problem by removing other colliding classes.
 ```html
-<div class="m:12x@sm">…</div>
+<div class="m:50@sm">…</div>
 ```
 
 ### Supports JS utilities
 You may be using [clsx](https://github.com/lukeed/clsx) or [class variant](https://github.com/master-co/styled) to conditionally apply classes, but unfortunately, they're just pure strings in JavaScript.
 
 (i) You can make arguments of JavaScript [callees](/docs/eslint#calleematching) have Master CSS code linting.
-<video className="aspect:2/1 r:2x max-w:screen-xs w:full" autoPlay loop muted playsInline>
-    <source src="/videos/supports-js-utilities.webm" type="video/webm" />
-</video>
+<Image className="aspect:2/1 r:2x max-w:screen-xs w:full" src={require('~/public/supports-js-utilities.webp').default} alt="Supports JS utilities" unoptimized />
 
 (x) <span className="text:error">Invalid value for `display` property.</span>
 ```tsx

website/app/[locale]/(root)/roadmap/content.mdx

@@ -35,9 +35,12 @@ We will submit it to the Nuxt.js's [modules](https://nuxt.com/modules) 🤩
 
 ### Master CSS ESLint
 One of our proud products, Master CSS ESLint, the first CSS framework with syntax-error checking in template `class=""`.
-<video className="aspect:2/1 r:2x max-w:screen-xs w:full" autoPlay loop muted playsInline>
-    <source src="/videos/syntax-error-checks.webm" type="video/webm" />
-</video>
+<Image className="aspect:2/1 r:2x max-w:screen-xs w:full" src={require('~/public/syntax-error-checks.webp').default} alt="Syntax error checks" unoptimized />
+
+(x) <span className="text:error">Invalid value for \`font\` property.</span>
+```html
+<div class="**font:**">…</div>
+```
 This is just one of the features, see the [Code Linting](/docs/code-linting) for complete details.
 
 ### Master Colors
@@ -78,7 +81,7 @@ The protagonist of v2 is here - a brand-new [configuration API](/docs/configurat
 ### Master Theme Mode
 Used for setting and switching theme modes, the "packages/theme-mode" has been spun off into a new repository [master-co/theme-mode](https://github.com/master-co/theme-mode).
 <figure>
-    <Image src={require('~/public/theme-mode.gif').default} className="r:2x" alt="Master Theme Mode" />
+    <Image src={require('~/public/theme-modes.webp').default} className="r:2x" alt="Master Theme Modes" unoptimized />
     <figcaption>Theme mode switching and system preference synchronization</figcaption>
 </figure>
 In addition to Vanilla, React, and Vue integrations, we also added Svelte support during the migration process ✨
@@ -192,13 +195,13 @@ What's heartening so far is that the community is still eagerly awaiting Master
 
 > Master UI is a **framework-agnostic** and **framework-friendly** UI library.
 
-Just using a basic button provides four different ways of integration.
+Even a basic button provides four different ways of use.
 <Demo>
     <button className="center-content inline-flex bg:indigo fg:white font:14 font:medium h:10x px:4x r:2x">Submit</button>
 </Demo>
 We've designed a solution supporting React, Vue, Svelte, Angular, and more popular frameworks.
 
-(i) 1. Install and import the React integrated button.
+(i) A. Install and import the React integrated button.
 ```tsx name=App.tsx
 import { Button } from '@master/ui.react'
 
@@ -208,21 +211,21 @@ export default function App() {
     )
 }
 ```
-(i) 2. Use CLI to clone the React button into the project and modify the source directly.
+(i) B. Use CLI to clone the React button into the project and modify the source directly.
 ```sh
 npx @master/ui add Button.tsx
 ```
 Great, but what about framework-agnostic?
 
 > Master UI can be an **Atomic CSS** or **Semantic CSS** UI library.
 
-(i) 3. Copy atomic source code from the documentation and modify directly.
+(i) C. Copy atomic source code from the documentation and modify directly.
 ```html
 <button class="inline-flex bg:indigo fg:white font:14 ...">Submit</button>
 ```
 Or embrace semantics again!
 
-(i) 4. Import all Master UI [styles](/docs/styles) in the configuration.
+(i) D. Import all Master UI [styles](/docs/styles) in the configuration.
 ```js name=master.css.js
 export default {
     extends: [

website/app/[locale]/(root)/roadmap/metadata.ts

@@ -4,7 +4,7 @@ import version from '~/version'
 const metadata: Metadata = {
     title: 'Roadmap',
     description: 'v2 is coming soon.',
-    date: '2024-03-12T11:53:08.408Z',
+    date: '2024-03-12T14:16:36.232Z',
     category: 'v' + version,
     authors: [{ name: 'Aron' }]
 }

website/package.json

@@ -20,7 +20,7 @@
         "@master/css.react": "workspace:^",
         "@master/eslint-config-css": "workspace:^",
         "@master/eslint-plugin-css": "workspace:^",
-        "@master/normal.css": "^2.0.0",
+        "@master/normal.css": "^2.1.0",
         "@master/styled.react": "^2.0.2",
         "@master/theme-mode.react": "^1.1.0",
         "@monaco-editor/react": "^4.6.0",