Update website app metadata and add new text colors component

master-co · Feb 1, 2024 · 06f27d9 · 06f27d9
1 parent 8270288
commit 06f27d9
Show file tree

Hide file tree

Showing 8 changed files with 62 additions and 37 deletions.
diff --git a/website/app/[locale]/(root)/docs/base-colors/content.mdx b/website/app/[locale]/(root)/docs/base-colors/content.mdx
@@ -28,18 +28,18 @@
 By default, theme modes [drive](/docs/configuration#themedriver) base color variables meticulously adjusted in light and dark modes.
 <Demo $py={0} $px={0}>
     <DemoLight>
-        <div className="bg:yellow aspect:5/1 size:full|40 r:1x"></div>
+        <div className="bg:yellow aspect:2/1 size:full|12x r:1x"></div>
     </DemoLight>
     <DemoDark>
-        <div className="bg:yellow aspect:5/1 size:full|40 r:1x"></div>
+        <div className="bg:yellow aspect:2/1 size:full|12x r:1x"></div>
     </DemoDark>
 </Demo>
 ```html
-<div class="**light**">
-    <div class="bg:yellow"></div>
+<div class="light">
+    <div class="bg:**yellow**"></div>
 </div>
-<div class="**dark**">
-    <div class="bg:yellow"></div>
+<div class="dark">
+    <div class="bg:**yellow**"></div>
 </div>
 ```
 [View the default variables on GitHub](https://github.com/master-co/css/blob/rc/packages/css/src/config/variables.ts)

diff --git a/...ite/app/[locale]/(root)/docs/introduction/components/CriticalCSSForDocsSitesBenchmark.tsx b/...ite/app/[locale]/(root)/docs/introduction/components/CriticalCSSForDocsSitesBenchmark.tsx
@@ -35,9 +35,9 @@ export default () => (
                                             animated
                                             icon={<Image src={brand?.src} width={24} height={24} alt={result.name} className={clsx('mx:0', brand?.className)} />}>
                                             {/* @ts-expect-error masterCSSResult?.totalCSSSize */}
-                                            {result.name !== 'Master CSS' && <div className='flex:1 font:12'><span className='hide@<sm'>{result.name}, </span> {(result?.totalCSSSize / masterCSSResult?.totalCSSSize).toFixed(1)}x larger</div>}
+                                            {result.name !== 'Master CSS' && <div className='flex:1 font:10'><span className='hide@<sm'>{result.name}, </span> {(result?.totalCSSSize / masterCSSResult?.totalCSSSize).toFixed(1)}x larger</div>}
                                             {result.name === 'Master CSS' && (
-                                                <div className='flex:1 font:12'>( Main {(result?.internals[1].size / 1000).toFixed(1)} kB + Font {(result?.internals[0].size / 1000).toFixed(1)} kB + Normalize {(result?.externals[0].size / 1000).toFixed(1)} kB )</div>
+                                                <div className='flex:1 font:10'>( {(result?.internals[1].size / 1000).toFixed(1)} kB + Font {(result?.internals[0].size / 1000).toFixed(1)} kB + Normal {(result?.externals[0].size / 1000).toFixed(1)} kB )</div>
                                             )}
                                         </Bar>
                                     )
@@ -66,9 +66,9 @@ export default () => (
                                             animated
                                             icon={<Image src={brand?.src} width={24} height={24} alt={result.name} className={clsx('mx:0', brand?.className)} />}>
                                             {/* @ts-expect-error masterCSSResult?.totalCSSSize */}
-                                            {result.name !== 'Master CSS' && <div className='flex:1 font:12'>{result.name}, {(result?.totalCSSBrotliSize / masterCSSResult?.totalCSSBrotliSize).toFixed(1)}x larger</div>}
+                                            {result.name !== 'Master CSS' && <div className='flex:1 font:10'>{result.name}, {(result?.totalCSSBrotliSize / masterCSSResult?.totalCSSBrotliSize).toFixed(1)}x larger</div>}
                                             {result.name === 'Master CSS' && (
-                                                <div className='flex:1 font:12'>( Main {(result?.internals[1].brotliSize / 1000).toFixed(1)} kB + Font {(result?.internals[0].brotliSize / 1000).toFixed(1)} kB + Normalize {(result?.externals[0].brotliSize / 1000).toFixed(1)} kB )</div>
+                                                <div className='flex:1 font:10'>( {(result?.internals[1].brotliSize / 1000).toFixed(1)} kB + Font {(result?.internals[0].brotliSize / 1000).toFixed(1)} kB + Normal {(result?.externals[0].brotliSize / 1000).toFixed(1)} kB )</div>
                                             )}
                                         </Bar>
                                     )

diff --git a/website/app/[locale]/(root)/docs/introduction/content.mdx b/website/app/[locale]/(root)/docs/introduction/content.mdx
@@ -56,18 +56,42 @@ One of the most unique, [progressive rendering](/docs/rendering-modes/progressiv
 </body>
 </html>
 ```
-This ensures the page generates the [ultra-lightweight CSS](#minimal-css-on-the-market) and the fastest first-page render.
+This ensures the page generates the [ultra-lightweight CSS](#minimal-css-on-the-market) and the fastest first-page render, unlike traditionally bundling styles across the entire application.
+
+### Design System
+Master CSS has built-in a neutral design system, Master Design System, including simplified syntax aliases, a crafted [color palette](/docs/colors), visually beautiful [color tokens](/docs/base-colors), universal responsive [breakpoints](/docs/responsive-design), 4 pixels base of [spacing and sizing](/docs/spacing-and-sizing), dark [modes](/docs/variables-and-modes), and more.
+
+import TextColorsOverview from '../text-colors/components/Overview.mdx'
+
+<TextColorsOverview />
+All features are implemented through powerful [configuration](/docs/configuration), and you can build your design system on top of it or use it as a quick starting point.
+
+### Syntax Highlighting
+Master CSS is the first language to highlight class names fully, making identifying their properties, appearance, and state faster.
+
+(!) Do you find writing utility classes sometimes seem lengthy or hard to read?
+<Demo $py={0}>
+    <DemoPanel>
+        <code className="font:16@sm token language-html">
+            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>sm:hover:bg-[#ceb195] …<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
+        </code>
+    </DemoPanel>
+</Demo>
+(o) Light up your class names in markup from now on!
+<Demo $py={0}>
+    <DemoPanel>
+        <InlineCode lang="html" className="font:16@sm">{'<div class="bg:#ceb195:hover@sm …">'}</InlineCode>
+    </DemoPanel>
+</Demo>
 
-### 🚧 Design System
-### 🚧 Syntax Highlighting
 ### 🚧 Code Linting
 
 ---
 
 ## Benchmarks
 Initially, Master CSS was intended to create a CSS engine for production browser runtimes, so we concentrated on performance such as syntax parsing, rule generation, cache sharing, and even browser rendering.
 
-Master CSS doesn't use heavy-duty build tools like [PostCSS](https://postcss.org), [Autoprefixer](https://github.com/postcss/autoprefixer), or any CSS minifiers, and includes these optimizations in the early stages of rule generation.
+Master CSS doesn't use heavy-duty build tools like [PostCSS](https://postcss.org), [Autoprefixer](https://github.com/postcss/autoprefixer), or any CSS minifiers, as these rules are generated with optimization.
 
 ### Minimal CSS on the market
 This is a real-world benchmark of critical CSS on page load for well-known official documentation websites.
@@ -78,7 +102,7 @@ Reducing [critical CSS](https://web.dev/articles/codelab-extract-and-inline-crit
 
 ---
 
-## 🚧 Tech comparisons
+## 🚧 Comparisons
 {/* <DocTable className="font:14_p overflow-x:auto {px:30;mx:-30}@<sm">
     <thead>
         <tr>

diff --git a/website/app/[locale]/(root)/docs/minimization/metadata.ts b/website/app/[locale]/(root)/docs/minimization/metadata.ts
@@ -1,7 +1,7 @@
 import { Metadata } from 'websites/types/Metadata'
 
 const metadata: Metadata = {
-    title: 'Development strategies for minimizing CSS',
+    title: 'Minimizing CSS',
     description: 'Reduce on-page CSS output and complexity using Master CSS APIs.',
     category: 'Production Optimization',
     unfinished: true,

diff --git a/website/app/[locale]/(root)/docs/text-colors/components/Overview.mdx b/website/app/[locale]/(root)/docs/text-colors/components/Overview.mdx
@@ -0,0 +1,16 @@
+<Demo $py={0} $px={0}>
+    <DemoLight>
+        <div className="fg:yellow font:heavy font:96">M</div>
+    </DemoLight>
+    <DemoDark>
+        <div className="fg:yellow font:heavy font:96">M</div>
+    </DemoDark>
+</Demo>
+```html
+<div class="light">
+    <span class="fg:**yellow**">M</span>
+</div>
+<div class="dark">
+    <span class="fg:**yellow**">M</span>
+</div>
+```
diff --git a/website/app/[locale]/(root)/docs/text-colors/content.mdx b/website/app/[locale]/(root)/docs/text-colors/content.mdx
@@ -30,22 +30,7 @@
 | <Aa className="fg:red" />`text-red`               | bold, energetic, attention-grabbing                                       |
 
 By default, theme modes [drive](/docs/configuration#themedriver) text variables meticulously adjusted in light and dark modes.
-<Demo $py={0} $px={0}>
-    <DemoLight>
-        <div className="fg:yellow font:heavy font:96">A</div>
-    </DemoLight>
-    <DemoDark>
-        <div className="fg:yellow font:heavy font:96">A</div>
-    </DemoDark>
-</Demo>
-```html
-<div class="**light**">
-    <span class="fg:yellow">A</span>
-</div>
-<div class="**dark**">
-    <span class="fg:yellow">A</span>
-</div>
-```
+<Overview />
 [View the default variables on GitHub](https://github.com/master-co/css/blob/rc/packages/css/src/config/variables.ts)
 
 ---

diff --git a/website/components/Bar.tsx b/website/components/Bar.tsx
@@ -9,9 +9,9 @@ export default function Bar({ className, width, animated, children, color = 'tex
     return (
         <div ref={ref} className={clsx('flex align-items:center flex-wrap:nowrap gap:10 ml:-1', className)}>
             {/* eslint-disable-next-line @master/css/class-validation */}
-            <div className={clsx(className, 'b:1|frame contain:strict h:24 rr:1x', animated && '~width|2s|ease-out will-change:width', `bg:${color}`)}
-                style={{ width: inView ? `calc(${width} - (${max} - ${value}) / ${max} * ${width})` : width }}>
-            </div>
+            <svg height="24" xmlns="http://www.w3.org/2000/svg" style={{ width: inView ? `calc(${width} - (${max} - ${value}) / ${max} * ${width})` : width }} className={clsx(className, animated && '~width|2s|ease-out will-change:width')}>
+                <rect x="-4" y="0" height="24" width="100%" rx="4" ry="4" className={clsx(`fill:${color}`, 'stroke:1 stroke:frame calc(100%+4)')} />
+            </svg>
             {icon}
             {/* eslint-disable-next-line @master/css/class-validation */}
             <b className={`fg:${color} white-space:nowrap`}>
@@ -25,7 +25,7 @@ export default function Bar({ className, width, animated, children, color = 'tex
                         return -c * t * (t - 2) + b
                     }} />
             </b>
-            <div className={clsx(animated && '~opacity|.5s|ease-out transition-delay:2s will-change:opacity')}
+            <div className={clsx(animated && '~opacity|.5s|ease-out transition-delay:2s will-change:opacity white-space:nowrap')}
                 style={{ opacity: inView ? 1 : 0 }}>
                 {children}
             </div>

diff --git a/website/components/IconButtons.tsx b/website/components/IconButtons.tsx
@@ -16,7 +16,7 @@ export default ({ children, className, url }: any) =>
                 target={item.target}
                 disabled={item.disabled}
                 rel="noreferrer noopener">
-                <Image className={clsx('square w:40%', item.className)} src={item.src} alt={item.name} width={48} height={48} />
+                <Image src={item.src} className={clsx('square w:40%', item.className)} alt={item.name} width={48} height={48} />
                 <div className={clsx('font:10 mt:10', item.name.length < 17 && 'font:12@sm', item.disabled && 'fg:lightest')}>{item.name}</div>
             </Link>
         )