Update color variable structure to use 'color' namespace in CSS and JS files

Author: 1aron

packages/cli/tests/extract/watch/test.ts

@@ -40,7 +40,9 @@ const config: Config = {
         btn: 'bg:red'
     },
     variables: {
-        primary: '$(blue)'
+        color: {
+            primary: '$(color-blue)'
+        }
     }
 }
 
@@ -92,7 +94,7 @@ if (!process.env.CI) {
             waitForDataMatch(subprocess, (data) => data.includes('exported'))
         ])
         const fileCSSText = fs.readFileSync(virtualCSSFilepath, { encoding: 'utf8' })
-        expect(fileCSSText).toContain('.btn{background-color:rgb(var(--blue))')
+        expect(fileCSSText).toContain('.btn{background-color:var(--color-blue)')
     }, 120000)
 
     it('change html file class attr and update', async () => {

site/app/[locale]/guide/cascade-layers/tests/overview/generated.css

@@ -1,10 +1,14 @@
 export default {
     modes: {
         light: {
-            primary: '#000000',
+            color: {
+                primary: '#000000',
+            }
         },
         dark: {
-            primary: '#ffffff',
+            color: {
+                primary: '#ffffff',
+            }
         }
     },
     components: {

site/app/[locale]/guide/cascade-layers/tests/overview/master.css.js

@@ -45,9 +45,9 @@ This will generate only the relevant CSS based on the usage:
 ## Bloated CSS variables
 (!) Defining CSS variables the traditional way.
 ```css name=main.css
---primary: #000;
---secondary: #fff;
---tertiary: #f00;
+--color-primary: #000;
+--color-secondary: #fff;
+--color-tertiary: #f00;
 ... /* Hundreds of CSS variables here... */
 ```
 Although this works, unused variables still end up in the final stylesheet, increasing the CSS payload unnecessarily.
@@ -58,13 +58,15 @@ Master CSS [variables](/guide/variables) are generated by analyzing class declar
 ```js name=master.css.js
 export default {
     variables: {
-        primary: '#000', /* [!code ++] */
-        secondary: '#fff', /* [!code ++] */
-        tertiary: '#f00' /* [!code ++] */
+        color: {
+            primary: '#000', /* [!code ++] */
+            secondary: '#fff', /* [!code ++] */
+            tertiary: '#f00' /* [!code ++] */
+        }
     }
 }
 ```
-To use a variable like `primary`, simply reference it in a class. Master CSS will automatically generate the corresponding `--primary` declaration:
+To use a variable like `primary`, simply reference it in a class. Master CSS will automatically generate the corresponding `--color-primary` declaration:
 ```html
 <!-- @MARK primary -->
 <div class="bg:primary"></div><!-- [!code focus] -->