docs: michael changes

Author: jagoral

Diff for: docs/content/guides/7.multistore/3.patterns/5.subpath/1.subpath.md

@@ -52,7 +52,6 @@ This section provides a brief overview of setting up Config Switcher. For comple
 
 | **File-Based Inheritance**              | **Config Switcher**                                              |
 | --------------------------------------- | ---------------------------------------------------------------- |
-| Works **between different stores**      | Works **within a single store**                                  |
 | Creates separate deployable instances   | Uses a single deployable instance                                |
 | Full codebase customization             | Only middleware configuration changes, Storefront code is shared |
 | Requires separate builds for each store | Single build supports multiple configurations                    |
@@ -340,9 +339,13 @@ Make sure that all your internal links and navigation components preserve the st
 
 Without this, users might unexpectedly switch between stores while browsing your site.
 
-## Applying Store-Specific Styling
+## Store-Specific Styling
 
-Now that you have CSS variables defined for each store, you need to apply the store identifier as a CSS class to enable the different styles.
+There are two key steps to implement store-specific styling:
+
+### 1. Applying Store Identifier Class
+
+First, you need to apply the store identifier as a CSS class to enable different styles for each store:
 
 ::tabs{:titles='["Next.js", "Nuxt"]'}
 
@@ -386,9 +389,96 @@ const route = useRoute();
 ```
 ::
 
-## Styling Components for Different Stores
+### 2. Defining Store-Specific CSS Variables
 
-With the store identifier applied as a class, you can now customize components with store-specific styles. You'll need to update your Tailwind configuration to support this.
+Once the store identifier class is applied, you can define CSS variables that change based on the store:
+
+::tabs{:titles='["Next.js", "Nuxt"]'}
+
+#tab-1
+In your Next.js app, add custom CSS variables in your global styles:
+
+```scss
+// apps/storefront-unified-nextjs/app/[locale]/globals.scss
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+// Base styles...
+
+// Electronics store theme
+.electronics {
+  --colors-primary-50: 45 249 255;
+  --colors-primary-100: 233 243 255;
+  --colors-primary-200: 200 224 255;
+  --colors-primary-300: 166 204 255;
+  --colors-primary-400: 110 161 255;
+  --colors-primary-500: 51 117 255;
+  --colors-primary-600: 46 106 230;
+  --colors-primary-700: 38 78 191;
+  --colors-primary-800: 29 63 153;
+  --colors-primary-900: 176 196 244;
+}
+
+// Apparel store theme (different color scheme)
+.apparel {
+  --colors-primary-50: 243 254 249;
+  --colors-primary-100: 224 247 235;
+  --colors-primary-200: 187 235 210;
+  --colors-primary-300: 135 216 177;
+  --colors-primary-400: 77 192 140;
+  --colors-primary-500: 45 165 116;
+  --colors-primary-600: 34 134 95;
+  --colors-primary-700: 31 110 80;
+  --colors-primary-800: 30 86 65;
+  --colors-primary-900: 23 64 49;
+}
+```
+
+#tab-2
+In your Nuxt app, add custom CSS variables in your style.scss:
+
+```scss
+// apps/storefront-unified-nuxt/assets/style.scss
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+// Base styles...
+
+// Electronics store theme
+.electronics {
+  --colors-primary-50: 45 249 255;
+  --colors-primary-100: 233 243 255;
+  --colors-primary-200: 200 224 255;
+  --colors-primary-300: 166 204 255;
+  --colors-primary-400: 110 161 255;
+  --colors-primary-500: 51 117 255;
+  --colors-primary-600: 46 106 230;
+  --colors-primary-700: 38 78 191;
+  --colors-primary-800: 29 63 153;
+  --colors-primary-900: 176 196 244;
+}
+
+// Apparel store theme (different color scheme)
+.apparel {
+  --colors-primary-50: 243 254 249;
+  --colors-primary-100: 224 247 235;
+  --colors-primary-200: 187 235 210;
+  --colors-primary-300: 135 216 177;
+  --colors-primary-400: 77 192 140;
+  --colors-primary-500: 45 165 116;
+  --colors-primary-600: 34 134 95;
+  --colors-primary-700: 31 110 80;
+  --colors-primary-800: 30 86 65;
+  --colors-primary-900: 23 64 49;
+}
+```
+::
+
+### 3. Using Store-Specific Styles
+
+Now you can use these variables in your components through Tailwind's configuration:
 
 ::tabs{:titles='["Next.js", "Nuxt"]'}
 
@@ -417,20 +507,22 @@ const config: Config = {
 export default config;
 ```
 
-Then use these variants (`electronics:`, `apparel:` etc.) in your components:
+Then use these variants in your components:
 
 ```tsx
-// apps/storefront-unified-nextjs/components/navigations/navbar-top.tsx
-export default function NavbarTop({ children, className, filled }: NavbarTopProps) {
+// apps/storefront-unified-nextjs/components/ui/navbar-top.tsx
+export default function NavbarTop({ children, className }: NavbarTopProps) {
   return (
     <header
       className={classNames(
-        'sticky top-0 z-40 flex h-14 bg-primary-800 electronics:!bg-primary-600 apparel:!bg-primary-400 md:-top-5 md:h-20 md:pt-2.5',
-        // other classes...
+        'sticky top-0 z-40 flex h-14 bg-primary-800',
+        'electronics:!bg-primary-600',
+        'apparel:!bg-primary-400',
+        'md:-top-5 md:h-20 md:pt-2.5',
+        className
       )}
-      data-testid="navbar-top"
     >
-      {/* Component content */}
+      {children}
     </header>
   );
 }
@@ -459,25 +551,30 @@ export default {
 } as Config;
 ```
 
-Then use these variants (`electronics:`, `apparel:` etc.) in your components:
+Then use these variants in your components:
 
 ```vue
-// apps/storefront-unified-nuxt/components/ui/NavbarTop/NavbarTop.vue
+<!-- apps/storefront-unified-nuxt/components/ui/NavbarTop.vue -->
 <template>
   <header
     :class="[
-      'h-14 md:h-20 flex z-40 sticky top-0 md:-top-5 md:pt-2.5 md:shadow-md',
-      { 'bg-primary-700 electronics:bg-primary-500 apparel:bg-primary-300 text-white': filled },
-      // other classes...
+      'sticky top-0 z-40 flex h-14',
+      'bg-primary-800',
+      'electronics:!bg-primary-600',
+      'apparel:!bg-primary-400',
+      'md:-top-5 md:h-20 md:pt-2.5',
     ]"
-    data-testid="navbar-top"
   >
-    <!-- Component content -->
+    <slot />
   </header>
 </template>
 ```
 ::
 
+::tip Using CSS Variables with Tailwind
+The CSS variables we defined can be used with Tailwind's color system. For example, `bg-primary-500` will use the store-specific primary color defined in the CSS variables. For more information, see the [Tailwind CSS documentation](https://v3.tailwindcss.com/docs/customizing-colors#using-css-variables).
+::
+
 ## Conditional Components
 
 There are two main approaches to handling store-specific components: