Add: Frame Colors

master-co · Jun 20, 2024 · 3498089 · 3498089
1 parent 35e975e
commit 3498089
Show file tree

Hide file tree

Showing 54 changed files with 218 additions and 70 deletions.
diff --git a/internal b/internal
diff --git a/packages/core/src/config/syntaxes.ts b/packages/core/src/config/syntaxes.ts
@@ -763,7 +763,6 @@ const syntaxes = {
         ambiguousKeys: ['text-stroke'],
         ambiguousValues: [COLOR_VALUE_REGEX],
         layer: Layer.Native,
-        variables: ['text'],
         declare(value) {
             return {
                 '-webkit-text-stroke-color': value
@@ -920,26 +919,31 @@ const syntaxes = {
         ambiguousKeys: ['bt', 'border-top'],
         ambiguousValues: [COLOR_VALUE_REGEX],
         layer: Layer.Native,
+        variables: ['frame'],
     } as SyntaxDefinition,
     'border-bottom-color': {
         ambiguousKeys: ['bb', 'border-bottom'],
         ambiguousValues: [COLOR_VALUE_REGEX],
         layer: Layer.Native,
+        variables: ['frame'],
     } as SyntaxDefinition,
     'border-left-color': {
         ambiguousKeys: ['bl', 'border-left'],
         ambiguousValues: [COLOR_VALUE_REGEX],
         layer: Layer.Native,
+        variables: ['frame'],
     } as SyntaxDefinition,
     'border-right-color': {
         ambiguousKeys: ['br', 'border-right'],
         ambiguousValues: [COLOR_VALUE_REGEX],
         layer: Layer.Native,
+        variables: ['frame'],
     } as SyntaxDefinition,
     'border-x-color': {
         ambiguousKeys: ['bx', 'border-x'],
         ambiguousValues: [COLOR_VALUE_REGEX],
         layer: Layer.Shorthand,
+        variables: ['frame'],
         declare(value) {
             return {
                 'border-left-color': value,
@@ -951,6 +955,7 @@ const syntaxes = {
         ambiguousKeys: ['by', 'border-y'],
         ambiguousValues: [COLOR_VALUE_REGEX],
         layer: Layer.Shorthand,
+        variables: ['frame'],
         declare(value) {
             return {
                 'border-top-color': value,
@@ -962,6 +967,7 @@ const syntaxes = {
         ambiguousKeys: ['b', 'border'],
         ambiguousValues: [COLOR_VALUE_REGEX],
         layer: Layer.NativeShorthand,
+        variables: ['frame'],
     } as SyntaxDefinition,
     // border radius
     'border-top-left-radius': {
@@ -1172,30 +1178,35 @@ const syntaxes = {
         layer: Layer.NativeShorthand,
         unit: 'rem',
         transformValueComponents: autofillSolidStyle,
+        variables: ['frame'],
     } as SyntaxDefinition,
     'border-bottom': {
         key: 'bb',
         layer: Layer.NativeShorthand,
         unit: 'rem',
         transformValueComponents: autofillSolidStyle,
+        variables: ['frame'],
     } as SyntaxDefinition,
     'border-left': {
         key: 'bl',
         layer: Layer.NativeShorthand,
         unit: 'rem',
         transformValueComponents: autofillSolidStyle,
+        variables: ['frame'],
     } as SyntaxDefinition,
     'border-right': {
         key: 'br',
         layer: Layer.NativeShorthand,
         unit: 'rem',
         transformValueComponents: autofillSolidStyle,
+        variables: ['frame'],
     } as SyntaxDefinition,
     'border-x': {
         key: 'bx',
         unit: 'rem',
         layer: Layer.Shorthand,
         transformValueComponents: autofillSolidStyle,
+        variables: ['frame'],
         declare(value) {
             return {
                 'border-left': value,
@@ -1208,6 +1219,7 @@ const syntaxes = {
         unit: 'rem',
         layer: Layer.Shorthand,
         transformValueComponents: autofillSolidStyle,
+        variables: ['frame'],
         declare(value) {
             return {
                 'border-top': value,
@@ -1220,6 +1232,7 @@ const syntaxes = {
         unit: 'rem',
         layer: Layer.NativeShorthand,
         transformValueComponents: autofillSolidStyle,
+        variables: ['frame'],
     } as SyntaxDefinition,
     'background-attachment': {
         ambiguousKeys: ['bg'],
@@ -1539,6 +1552,7 @@ const syntaxes = {
         ambiguousKeys: ['outline'],
         ambiguousValues: [COLOR_VALUE_REGEX],
         layer: Layer.Native,
+        variables: ['frame'],
     } as SyntaxDefinition,
     'outline-offset': {
         unit: 'rem',
@@ -1563,7 +1577,8 @@ const syntaxes = {
             'outline-width',
             'outline-style',
             'outline-offset',
-            'outline-color'
+            'outline-color',
+            'frame'
         ],
         transformValueComponents: autofillSolidStyle
     } as SyntaxDefinition,

diff --git a/packages/core/src/config/variables.ts b/packages/core/src/config/variables.ts
@@ -120,6 +120,24 @@ const _variables = {
         view: 'view-box'
     },
     current: 'currentColor',
+    frame: {
+        neutral: {
+            '@light': '$(slate-60)',
+            '@dark': '$(gray-30)'
+        },
+        light: {
+            '@light': '$(slate-60)/.2',
+            '@dark': '$(gray-30)/.2'
+        },
+        lighter: {
+            '@light': '$(slate-60)/.16',
+            '@dark': '$(gray-30)/.16'
+        },
+        lightest: {
+            '@light': '$(slate-60)/.12',
+            '@dark': '$(gray-30)/.12'
+        }
+    },
     // from figma
     white: '#ffffff',
     black: '#000000',
@@ -139,12 +157,6 @@ const _variables = {
         '@light': '$(black)',
         '@dark': '$(white)',
     },
-    frame: {
-        neutral: {
-            '@light': '$(slate-60)',
-            '@dark': '$(gray-30)',
-        },
-    },
     gray: {
         '@light': '$(gray-30)',
         '@dark': '$(gray-40)',

diff --git a/site/app/[locale]/blog/v2/content.mdx b/site/app/[locale]/blog/v2/content.mdx
@@ -16,7 +16,7 @@ Vestibulum fringilla varius semper. Sed in placerat est, in iaculis urna. Sed at
 ## New Configuration API
 
 ### `.animations`
-You can now customize CSS [animations](/reference/configuration#animations) in `master.css.js`:
+You can now customize CSS [animations](/guide/configuration#animations) in `master.css.js`:
 ```js name=master.css.js
 export default {
     animations: {

diff --git a/site/app/[locale]/guide/code-linting/content.mdx b/site/app/[locale]/guide/code-linting/content.mdx
@@ -40,7 +40,7 @@ In the past, you added utility classes to your templates unsafely, lacking the c
 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](/reference/configuration) to create [styles](/guide/styles) instead of defining classes through traditional `html <style>` or CSS files.
+You can also restrict teams to using [configuration](/guide/configuration) to create [styles](/guide/styles) instead of defining classes through traditional `html <style>` or CSS files.
 
 (i) Based on syntax error checking, you can [disallow unknown classes](/reference/eslint#class-validation).
 <Image className="aspect:2/1 r:2x max-w:screen-xs w:full" src={require('~/site/public/disallow-unknown-class.webp').default} alt="Disallow unknown classes" unoptimized />

diff --git a/site/app/[locale]/guide/installation/(tabs)/general/content.mdx b/site/app/[locale]/guide/installation/(tabs)/general/content.mdx
@@ -17,7 +17,7 @@ The easiest way to use Master CSS from scratch is to initialize the [runtime eng
     <Step $row>
         <StepL>
             ### <StepNum />Initialize configuration file
-            Run `npm create @master/css@rc` to create a configuration file [master.css.js](/reference/configuration).
+            Run `npm create @master/css@rc` to create a configuration file [master.css.js](/guide/configuration).
         </StepL>
         <StepR>
             ```bash name=Terminal

diff --git a/site/app/[locale]/guide/installation/angular/content.mdx b/site/app/[locale]/guide/installation/angular/content.mdx
@@ -47,7 +47,7 @@ import ProgressiveRenderingIntro from '../../rendering-modes/components/Progress
     <Step $row>
         <StepL>
             ### <StepNum />Initialize configuration file
-            Run `npm create @master/css@rc` to create a configuration file [master.css.ts](/reference/configuration).
+            Run `npm create @master/css@rc` to create a configuration file [master.css.ts](/guide/configuration).
         </StepL>
         <StepR>
             ```bash name=Terminal

diff --git a/site/app/[locale]/guide/installation/angular/runtime-rendering/content.mdx b/site/app/[locale]/guide/installation/angular/runtime-rendering/content.mdx
@@ -57,7 +57,7 @@ import RuntimeRenderingIntro from '../../../rendering-modes/components/RuntimeRe
     <Step $row>
         <StepL>
             ### <StepNum />Initialize configuration file
-            Run `npm create @master/css@rc` to create a configuration file [master.css.ts](/reference/configuration).
+            Run `npm create @master/css@rc` to create a configuration file [master.css.ts](/guide/configuration).
         </StepL>
         <StepR>
             ```bash name=Terminal

diff --git a/site/app/[locale]/guide/installation/angular/static-extraction/content.mdx b/site/app/[locale]/guide/installation/angular/static-extraction/content.mdx
@@ -57,7 +57,7 @@ import StaticExtractionIntro from '../../../rendering-modes/components/StaticExt
     <Step $row>
         <StepL>
             ### <StepNum />Initialize configuration file
-            Run `npm create @master/css@rc` to create a configuration file [master.css.ts](/reference/configuration).
+            Run `npm create @master/css@rc` to create a configuration file [master.css.ts](/guide/configuration).
         </StepL>
         <StepR>
             ```bash name=Terminal

diff --git a/site/app/[locale]/guide/installation/astro/content.mdx b/site/app/[locale]/guide/installation/astro/content.mdx
@@ -47,7 +47,7 @@ import RuntimeRenderingIntro from '../../rendering-modes/components/RuntimeRende
     <Step $row>
         <StepL>
             ### <StepNum />Initialize configuration file
-            Run `npm create @master/css@rc` to create a configuration file [master.css.ts](/reference/configuration).
+            Run `npm create @master/css@rc` to create a configuration file [master.css.ts](/guide/configuration).
         </StepL>
         <StepR>
             ```bash name=Terminal

diff --git a/site/app/[locale]/guide/installation/astro/static-extraction/content.mdx b/site/app/[locale]/guide/installation/astro/static-extraction/content.mdx
@@ -48,7 +48,7 @@ import StaticExtractionIntro from '../../../rendering-modes/components/StaticExt
     <Step $row>
         <StepL>
             ### <StepNum />Initialize configuration file
-            Run `npm create @master/css@rc` to create a configuration file [master.css.ts](/reference/configuration).
+            Run `npm create @master/css@rc` to create a configuration file [master.css.ts](/guide/configuration).
         </StepL>
         <StepR>
             ```bash name=Terminal

diff --git a/site/app/[locale]/guide/installation/blazor/content.mdx b/site/app/[locale]/guide/installation/blazor/content.mdx
@@ -70,7 +70,7 @@ import RuntimeRenderingIntro from '../../rendering-modes/components/RuntimeRende
     <Step $row>
         <StepL>
             ### <StepNum />Initialize configuration file
-            Run `npm create @master/css@rc` to create a configuration file [master.css.ts](/reference/configuration).
+            Run `npm create @master/css@rc` to create a configuration file [master.css.ts](/guide/configuration).
         </StepL>
         <StepR>
             ```bash name=Terminal

diff --git a/site/app/[locale]/guide/installation/blazor/static-extraction/content.mdx b/site/app/[locale]/guide/installation/blazor/static-extraction/content.mdx
@@ -30,7 +30,7 @@ import StaticExtractionIntro from '../../../rendering-modes/components/StaticExt
     <Step $row>
         <StepL>
             ### <StepNum />Initialize configuration file
-            Run `npm create @master/css@rc` to create a configuration file [master.css.ts](/reference/configuration).
+            Run `npm create @master/css@rc` to create a configuration file [master.css.ts](/guide/configuration).
         </StepL>
         <StepR>
             ```bash name=Terminal

diff --git a/site/app/[locale]/guide/installation/laravel/content.mdx b/site/app/[locale]/guide/installation/laravel/content.mdx
@@ -68,7 +68,7 @@ import RuntimeRenderingIntro from '../../rendering-modes/components/RuntimeRende
     <Step $row>
         <StepL>
             ### <StepNum />Initialize configuration file
-            Run `npm create @master/css@rc` to create a configuration file [master.css.js](/reference/configuration).
+            Run `npm create @master/css@rc` to create a configuration file [master.css.js](/guide/configuration).
         </StepL>
         <StepR>
             ```bash name=Terminal

diff --git a/site/app/[locale]/guide/installation/laravel/static-extraction/content.mdx b/site/app/[locale]/guide/installation/laravel/static-extraction/content.mdx
@@ -68,7 +68,7 @@ import StaticExtractionIntro from '../../../rendering-modes/components/StaticExt
     <Step $row>
         <StepL>
             ### <StepNum />Initialize configuration file
-            Run `npm create @master/css@rc` to create a configuration file [master.css.js](/reference/configuration).
+            Run `npm create @master/css@rc` to create a configuration file [master.css.js](/guide/configuration).
         </StepL>
         <StepR>
             ```bash name=Terminal

diff --git a/site/app/[locale]/guide/installation/nextjs/content.mdx b/site/app/[locale]/guide/installation/nextjs/content.mdx
@@ -64,7 +64,7 @@ import ProgressiveRenderingIntro from '../../rendering-modes/components/Progress
     <Step $row>
         <StepL>
             ### <StepNum />Initialize configuration file
-            Run `npm create @master/css@rc` to create a configuration file [master.css.ts](/reference/configuration).
+            Run `npm create @master/css@rc` to create a configuration file [master.css.ts](/guide/configuration).
         </StepL>
         <StepR>
             ```bash name=Terminal

diff --git a/site/app/[locale]/guide/installation/nextjs/runtime-rendering/content.mdx b/site/app/[locale]/guide/installation/nextjs/runtime-rendering/content.mdx
@@ -64,7 +64,7 @@ import RuntimeRenderingIntro from '../../../rendering-modes/components/RuntimeRe
     <Step $row>
         <StepL>
             ### <StepNum />Initialize configuration file
-            Run `npm create @master/css@rc` to create a configuration file [master.css.ts](/reference/configuration).
+            Run `npm create @master/css@rc` to create a configuration file [master.css.ts](/guide/configuration).
         </StepL>
         <StepR>
             ```bash name=Terminal

diff --git a/site/app/[locale]/guide/installation/nextjs/static-extraction/content.mdx b/site/app/[locale]/guide/installation/nextjs/static-extraction/content.mdx
@@ -65,7 +65,7 @@ import StaticExtractionIntro from '../../../rendering-modes/components/StaticExt
     <Step $row>
         <StepL>
             ### <StepNum />Initialize configuration file
-            Run `npm create @master/css@rc` to create a configuration file [master.css.ts](/reference/configuration).
+            Run `npm create @master/css@rc` to create a configuration file [master.css.ts](/guide/configuration).
         </StepL>
         <StepR>
             ```bash name=Terminal

diff --git a/site/app/[locale]/guide/installation/nuxtjs/content.mdx b/site/app/[locale]/guide/installation/nuxtjs/content.mdx
@@ -49,7 +49,7 @@ import ProgressiveRenderingIntro from '../../rendering-modes/components/Progress
     <Step $row>
         <StepL>
             ### <StepNum />Initialize configuration file
-            Run `npm create @master/css@rc` to create a configuration file [master.css.ts](/reference/configuration).
+            Run `npm create @master/css@rc` to create a configuration file [master.css.ts](/guide/configuration).
         </StepL>
         <StepR>
             ```bash name=Terminal

diff --git a/site/app/[locale]/guide/installation/nuxtjs/runtime-rendering/content.mdx b/site/app/[locale]/guide/installation/nuxtjs/runtime-rendering/content.mdx
@@ -49,7 +49,7 @@ import RuntimeRenderingIntro from '../../../rendering-modes/components/RuntimeRe
     <Step $row>
         <StepL>
             ### <StepNum />Initialize configuration file
-            Run `npm create @master/css@rc` to create a configuration file [master.css.ts](/reference/configuration).
+            Run `npm create @master/css@rc` to create a configuration file [master.css.ts](/guide/configuration).
         </StepL>
         <StepR>
             ```bash name=Terminal

diff --git a/site/app/[locale]/guide/installation/nuxtjs/static-extraction/content.mdx b/site/app/[locale]/guide/installation/nuxtjs/static-extraction/content.mdx
@@ -49,7 +49,7 @@ import StaticExtractionIntro from '../../../rendering-modes/components/StaticExt
     <Step $row>
         <StepL>
             ### <StepNum />Initialize configuration file
-            Run `npm create @master/css@rc` to create a configuration file [master.css.ts](/reference/configuration).
+            Run `npm create @master/css@rc` to create a configuration file [master.css.ts](/guide/configuration).
         </StepL>
         <StepR>
             ```bash name=Terminal

diff --git a/site/app/[locale]/guide/installation/react/content.mdx b/site/app/[locale]/guide/installation/react/content.mdx
@@ -52,7 +52,7 @@ A full-stack framework, such as [Next.js](/guide/installation/nextjs), [Remix](/
     <Step $row>
         <StepL>
             ### <StepNum />Initialize configuration file
-            Run `npm create @master/css@rc` to create a configuration file [master.css.ts](/reference/configuration).
+            Run `npm create @master/css@rc` to create a configuration file [master.css.ts](/guide/configuration).
         </StepL>
         <StepR>
             ```bash name=Terminal

diff --git a/site/app/[locale]/guide/installation/react/static-extraction/content.mdx b/site/app/[locale]/guide/installation/react/static-extraction/content.mdx
@@ -49,7 +49,7 @@ import StaticExtractionIntro from '../../../rendering-modes/components/StaticExt
     <Step $row>
         <StepL>
             ### <StepNum />Initialize configuration file
-            Run `npm create @master/css@rc` to create a configuration file [master.css.ts](/reference/configuration).
+            Run `npm create @master/css@rc` to create a configuration file [master.css.ts](/guide/configuration).
         </StepL>
         <StepR>
             ```bash name=Terminal

diff --git a/site/app/[locale]/guide/installation/svelte/content.mdx b/site/app/[locale]/guide/installation/svelte/content.mdx
@@ -49,7 +49,7 @@ import ProgressiveRenderingIntro from '../../rendering-modes/components/Progress
     <Step $row>
         <StepL>
             ### <StepNum />Initialize configuration file
-            Run `npm create @master/css@rc` to create a configuration file [master.css.ts](/reference/configuration).
+            Run `npm create @master/css@rc` to create a configuration file [master.css.ts](/guide/configuration).
         </StepL>
         <StepR>
             ```bash name=Terminal

diff --git a/site/app/[locale]/guide/installation/svelte/runtime-rendering/content.mdx b/site/app/[locale]/guide/installation/svelte/runtime-rendering/content.mdx
@@ -49,7 +49,7 @@ import RuntimeRenderingIntro from '../../../rendering-modes/components/RuntimeRe
     <Step $row>
         <StepL>
             ### <StepNum />Initialize configuration file
-            Run `npm create @master/css@rc` to create a configuration file [master.css.ts](/reference/configuration).
+            Run `npm create @master/css@rc` to create a configuration file [master.css.ts](/guide/configuration).
         </StepL>
         <StepR>
             ```bash name=Terminal

diff --git a/site/app/[locale]/guide/installation/svelte/static-extraction/content.mdx b/site/app/[locale]/guide/installation/svelte/static-extraction/content.mdx
@@ -50,7 +50,7 @@ import StaticExtractionIntro from '../../../rendering-modes/components/StaticExt
     <Step $row>
         <StepL>
             ### <StepNum />Initialize configuration file
-            Run `npm create @master/css@rc` to create a configuration file [master.css.ts](/reference/configuration).
+            Run `npm create @master/css@rc` to create a configuration file [master.css.ts](/guide/configuration).
         </StepL>
         <StepR>
             ```bash name=Terminal

diff --git a/site/app/[locale]/guide/installation/vite/content.mdx b/site/app/[locale]/guide/installation/vite/content.mdx
@@ -58,7 +58,7 @@ import RuntimeRenderingIntro from '../../rendering-modes/components/RuntimeRende
     <Step $row>
         <StepL>
             ### <StepNum />Initialize configuration file
-            Run `npm create @master/css@rc` to create a configuration file [master.css.ts](/reference/configuration).
+            Run `npm create @master/css@rc` to create a configuration file [master.css.ts](/guide/configuration).
         </StepL>
         <StepR>
             ```bash name=Terminal

diff --git a/site/app/[locale]/guide/installation/vite/static-extraction/content.mdx b/site/app/[locale]/guide/installation/vite/static-extraction/content.mdx
@@ -69,7 +69,7 @@ import StaticExtractionIntro from '../../../rendering-modes/components/StaticExt
     <Step $row>
         <StepL>
             ### <StepNum />Initialize configuration file
-            Run `npm create @master/css@rc` to create a configuration file [master.css.ts](/reference/configuration).
+            Run `npm create @master/css@rc` to create a configuration file [master.css.ts](/guide/configuration).
         </StepL>
         <StepR>
             ```bash name=Terminal