### Setup SaaS Theme Toolkit Development Environment

Source: https://github.com/vinerya/saas-theme/blob/main/README.md

Clones the SaaS Theme Toolkit repository, installs dependencies, builds the project, and runs tests.

```bash
git clone https://github.com/yourusername/saas-theme-toolkit.git
cd saas-theme-toolkit
npm install
npm run build
npm test
```

--------------------------------

### Install SaaS Theme Packages

Source: https://github.com/vinerya/saas-theme/blob/main/README.md

Installs the core theme engine, CLI tools, and Storybook addon for SaaS Theme.

```bash
npm install @saas-theme/core @saas-theme/cli @saas-theme/storybook-addon
```

--------------------------------

### Install saas-theme-core

Source: https://github.com/vinerya/saas-theme/blob/main/packages/core/README.md

Installs the saas-theme-core package using npm.

```bash
npm install saas-theme-core
```

--------------------------------

### Preview Themes in Development Server

Source: https://github.com/vinerya/saas-theme/blob/main/README.md

Starts a development server to preview themes, allowing customization of the port and the directory containing the themes.

```bash
saas-theme preview --port 3000 --dir ./themes
```

--------------------------------

### Open Demo HTML

Source: https://github.com/vinerya/saas-theme/blob/main/examples/advanced-css-demo/README.md

A simple bash command to open the index.html file, which serves as the entry point for viewing the theme demo. This is the first step in getting started with the toolkit.

```bash
open index.html
```

--------------------------------

### Install SaaS Theme CLI Globally or via npx

Source: https://github.com/vinerya/saas-theme/blob/main/packages/cli/README.md

Instructions for installing the SaaS Theme CLI globally using npm or running it directly with npx. This allows access to all CLI commands.

```bash
# Install globally
npm install -g saas-theme-cli

# Or use with npx
npx saas-theme-cli --help
```

--------------------------------

### Add Preset to tailwind.config.js (Quick Start)

Source: https://github.com/vinerya/saas-theme/blob/main/packages/tailwind-preset/README.md

Configures the `tailwind.config.js` file to use the `saas-theme-tailwind-preset` by providing a path to the theme JSON file. This is the basic setup to get started.

```javascript
const saasThemePreset = require("saas-theme-tailwind-preset");

module.exports = {
  presets: [
    saasThemePreset({
      theme: "./path/to/your/theme.json",
    }),
  ],
  content: ["./src/**/*.{html,js,ts,jsx,tsx}"],
};
```

--------------------------------

### CLI Theme Initialization and Watch Commands (Shell)

Source: https://github.com/vinerya/saas-theme/blob/main/examples/modern-features-demo/index.html

Provides examples of using the SaaS Theme Toolkit CLI to initialize a theme from a template and to watch for changes during development.

```bash
$ saas-theme templates
$ saas-theme init --template glassmorphism --tenant my-client
$ saas-theme watch --input ./themes --output ./dist
```

--------------------------------

### Install SaaS Theme Tailwind Preset

Source: https://github.com/vinerya/saas-theme/blob/main/packages/tailwind-preset/README.md

Installs the necessary packages for the SaaS Theme Tailwind Preset, including the preset itself, the core theme library, and Tailwind CSS.

```bash
npm install saas-theme-tailwind-preset saas-theme-core tailwindcss
```

--------------------------------

### Start Theme Watch Mode

Source: https://github.com/vinerya/saas-theme/blob/main/README.md

Initiates a watch process for theme files, rebuilding themes automatically on changes.

```bash
npx saas-theme watch --input ./themes --output ./dist/themes
```

--------------------------------

### Theme JSON Structure Example

Source: https://github.com/vinerya/saas-theme/blob/main/packages/core/README.md

An example of the JSON structure used for defining SaaS themes, including metadata, colors, typography, and spacing tokens.

```json
{
  "metadata": {
    "name": "My SaaS Theme",
    "version": "1.0.0",
    "tenant": "client-a"
  },
  "tokens": {
    "colors": {
      "primary": "#007bff",
      "secondary": "#6c757d",
      "background": {
        "light": "#ffffff",
        "dark": "#1a1a1a"
      }
    },
    "typography": {
      "fontFamily": {
        "sans": ["Inter", "system-ui", "sans-serif"]
      },
      "fontSize": {
        "sm": "0.875rem",
        "base": "1rem",
        "lg": "1.125rem"
      }
    },
    "spacing": {
      "xs": "0.25rem",
      "sm": "0.5rem",
      "md": "1rem",
      "lg": "1.5rem"
    }
  }
}
```

--------------------------------

### SaaS Theme CLI Configuration File

Source: https://github.com/vinerya/saas-theme/blob/main/packages/cli/README.md

Example `saas-theme.config.js` file demonstrating how to configure default build options, modern CSS features, accessibility validation settings, and linting rules.

```javascript
module.exports = {
  // Default build options
  build: {
    format: "css",
    minify: true,
    sourceMaps: true,
    prefix: "--",
  },

  // Modern CSS features
  modern: {
    containerQueries: true,
    cssLayers: true,
    logicalProperties: true,
    colorFunctions: true,
    polyfills: true,
  },

  // Accessibility validation
  accessibility: {
    wcagLevel: "AA",
    enforceContrast: true,
    strictMode: false,
  },

  // Linting rules
  lint: {
    rules: {
      "no-hardcoded-colors": "error",
      "consistent-naming": "warn",
      "accessibility-contrast": "error",
    },
  },
};
```

--------------------------------

### Gradient Showcase and Demo Styling

Source: https://github.com/vinerya/saas-theme/blob/main/examples/vanilla-css/index.html

Sets up a grid for gradient examples. Each gradient demo box has a height, rounded corners, and uses flexbox for centering content with white, semi-bold text and a text shadow.

```css
.gradient-showcase {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.gradient-demo {
  height: 80px;
  border-radius: var(--border-radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: var(--font-weight-semibold);
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
```

--------------------------------

### Typography Utilities Examples

Source: https://github.com/vinerya/saas-theme/blob/main/packages/tailwind-preset/README.md

Shows examples of using generated typography utilities in HTML for font families, font sizes, and font weights.

```html
<!-- Font families -->
<h1 class="font-heading">Heading font</h1>
<p class="font-body">Body font</p>

<!-- Font sizes -->
<h1 class="text-display-lg">Large display</h1>
<h2 class="text-heading-md">Medium heading</h2>
<p class="text-body-sm">Small body text</p>

<!-- Font weights -->
<p class="font-light">Light weight</p>
<p class="font-medium">Medium weight</p>
<p class="font-bold">Bold weight</p>
```

--------------------------------

### Internationalization-Ready CSS with Logical Properties

Source: https://github.com/vinerya/saas-theme/blob/main/README.md

Example of using logical properties for CSS margins, padding, and borders, making styles more adaptable for different writing modes and languages.

```css
/* Internationalization-ready */
.content {
  margin-inline-start: var(--spacing-md);
  padding-block: var(--spacing-sm);
  border-inline-end: 1px solid var(--border-color);
}
```

--------------------------------

### Generated CSS with Container Queries

Source: https://github.com/vinerya/saas-theme/blob/main/README.md

Example of CSS generated to support container queries, enabling components to adapt their styles based on their container's size.

```css
/* Generated CSS with Container Queries */
.card {
  container-type: inline-size;
  container-name: card;
}

@container card (min-width: 400px) {
  .card-content {
    padding: var(--spacing-lg);
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}
```

--------------------------------

### RTL Support Example

Source: https://github.com/vinerya/saas-theme/blob/main/examples/enhanced-features-demo/index.html

Provides an example of styling adjustments for Right-To-Left (RTL) text direction, specifically for navigation lists.

```css
[dir="rtl"] .nav-list { flex-direction: row-reverse; }
```

--------------------------------

### Spacing Utilities Examples

Source: https://github.com/vinerya/saas-theme/blob/main/packages/tailwind-preset/README.md

Demonstrates the usage of generated spacing utilities in HTML for margins, padding, and gaps, utilizing various size tokens.

```html
<!-- Margins -->
<div class="m-xs">Extra small margin</div>
<div class="m-sm">Small margin</div>
<div class="m-md">Medium margin</div>

<!-- Padding -->
<div class="p-lg">Large padding</div>
<div class="px-xl">Extra large horizontal padding</div>

<!-- Gaps -->
<div class="gap-2xs">Extra extra small gap</div>
```

--------------------------------

### Define Responsive Grid Columns

Source: https://github.com/vinerya/saas-theme/blob/main/examples/advanced-css-demo/index.html

Sets up a grid layout using CSS variables for column definitions. This example demonstrates how to create responsive grid columns that adapt based on available space.

```css
/* Grid Layout Demo */
.grid-demo {
  display: grid;
  grid-template-columns: var(--grid-template-cards);
}
```

--------------------------------

### Container Query ResizeObserver Setup (JavaScript)

Source: https://github.com/vinerya/saas-theme/blob/main/examples/modern-css-demo/index.html

Sets up a `ResizeObserver` to monitor the dimensions of a responsive card element. It logs the card's width whenever it changes, demonstrating how to react to container size changes for dynamic content adjustments.

```javascript
function setupContainerDemo() {
  const card = document.querySelector('.responsive-card');
  if (card) {
    const observer = new ResizeObserver(entries => {
      for (let entry of entries) {
        const width = entry.contentRect.width;
        console.log(`Container width: ${width}px`);
      }
    });
    observer.observe(card);
  }
}
setupContainerDemo();
```

--------------------------------

### Container Query Implementation Details

Source: https://github.com/vinerya/saas-theme/blob/main/examples/enhanced-features-demo/README.md

Provides specific examples of implementing container queries, including defining named containers and using size-based conditions to apply styles. Also shows experimental support for style-based queries.

```css
/* Named containers */
.grid-container {
  container-type: inline-size;
  container-name: grid;
}

/* Size-based queries */
@container grid (min-width: 600px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Style-based queries (experimental) */
@container style(--theme: dark) {
  .card {
    background: #1f2937;
    color: white;
  }
}
```

--------------------------------

### Color Utilities Examples

Source: https://github.com/vinerya/saas-theme/blob/main/packages/tailwind-preset/README.md

Illustrates how to use generated color utilities in HTML for background, text, and border colors, based on theme tokens.

```html
<!-- Background colors -->
<div class="bg-primary">Primary background</div>
<div class="bg-secondary">Secondary background</div>
<div class="bg-surface-light">Light surface</div>

<!-- Text colors -->
<p class="text-primary">Primary text</p>
<p class="text-on-surface">Surface text</p>

<!-- Border colors -->
<div class="border-primary">Primary border</div>
```

--------------------------------

### Theme File Structure Example

Source: https://github.com/vinerya/saas-theme/blob/main/packages/tailwind-preset/README.md

Defines the expected structure for a theme JSON file, including metadata and tokens for colors, typography, and spacing.

```json
{
  "metadata": {
    "name": "My SaaS Theme",
    "version": "1.0.0"
  },
  "tokens": {
    "colors": {
      "primary": "#007bff",
      "secondary": "#6c757d",
      "surface": {
        "light": "#ffffff",
        "dark": "#1a1a1a"
      }
    },
    "typography": {
      "fontFamily": {
        "heading": ["Inter", "system-ui"],
        "body": ["Inter", "system-ui"]
      },
      "fontSize": {
        "xs": "0.75rem",
        "sm": "0.875rem",
        "base": "1rem",
        "lg": "1.125rem"
      }
    },
    "spacing": {
      "2xs": "0.125rem",
      "xs": "0.25rem",
      "sm": "0.5rem",
      "md": "1rem"
    }
  }
}
```

--------------------------------

### Container Queries Utilities

Source: https://github.com/vinerya/saas-theme/blob/main/packages/tailwind-preset/README.md

Provides an example of using container query utilities in HTML to apply styles based on the size of a parent container.

```html
<!-- Container query utilities -->
<div class="container-sidebar">
  <div class="@sm:block @md:flex @lg:grid">
    Responsive based on container size
  </div>
</div>
```

--------------------------------

### CSS Nesting Example

Source: https://github.com/vinerya/saas-theme/blob/main/examples/advanced-css-demo/README.md

Illustrates CSS Nesting for styling a card component. It shows how to style nested elements like `.card-header`, including hover states, in a structured and readable manner.

```css
.card {
  background: var(--color-surface);

  & .card-header {
    font-weight: bold;

    &:hover {
      color: var(--color-primary);
    }
  }
}
```

--------------------------------

### Initialize New Theme Project

Source: https://github.com/vinerya/saas-theme/blob/main/README.md

Initializes a new theme project in the specified directory using a chosen template (e.g., 'basic') and tenant identifier.

```bash
saas-theme init --dir . --template basic --tenant my-client
```

--------------------------------

### Initialize New Theme with Template

Source: https://github.com/vinerya/saas-theme/blob/main/README.md

Creates a new theme for a specific tenant using a pre-built template.

```bash
npx saas-theme init --tenant my-client --template corporate
```

--------------------------------

### Preview SaaS Themes in Browser

Source: https://github.com/vinerya/saas-theme/blob/main/packages/cli/README.md

Launches a live preview server for theme development, allowing immediate visualization of changes. Options include specifying the server port and enabling hot reloading.

```bash
# Preview themes in browser
saas-theme preview ./themes/client-a.json

saas-theme preview ./theme.json
saas-theme preview ./theme.json --port 3000
```

--------------------------------

### Initialize a New SaaS Theme

Source: https://github.com/vinerya/saas-theme/blob/main/packages/cli/README.md

Commands to create a new theme, with options to specify a template like 'modern' or 'minimal'. The 'init' command uses interactive prompts to set up the theme structure.

```bash
# Initialize a new theme
saas-theme init my-theme

saas-theme init my-theme --template modern
saas-theme init my-theme --template minimal
```

--------------------------------

### Initialize Minimal SaaS Theme

Source: https://github.com/vinerya/saas-theme/blob/main/packages/cli/README.md

Initializes a new theme project using the 'minimal' template. This template focuses on a minimal color palette, essential typography, and a clean, simple design.

```bash
saas-theme init my-theme --template minimal
```

--------------------------------

### Inline Code Example

Source: https://github.com/vinerya/saas-theme/blob/main/examples/modern-features-demo/font-test.html

Illustrates how a theme variable might be declared or used within JavaScript code.

```javascript
const theme = 'fintech';
```

--------------------------------

### SaaS Theme Basic Template Initialization

Source: https://github.com/vinerya/saas-theme/blob/main/packages/cli/README.md

Command to initialize a new SaaS theme using the 'basic' template. This template includes essential elements like a color palette, typography scale, and spacing system.

```bash
saas-theme init my-theme --template basic
```

--------------------------------

### Manage SaaS Theme Templates (Bash)

Source: https://github.com/vinerya/saas-theme/blob/main/README.md

Command-line interface commands for initializing, applying, and customizing SaaS themes using pre-built templates.

```bash
# Initialize with template
saas-theme init --template healthcare --tenant medical-client

# Apply template to existing theme
saas-theme template apply --template glassmorphism --theme themes/client-a.json

# Customize template
saas-theme template customize --template corporate --primary-color "#e74c3c"
```

--------------------------------

### Logical Properties Utilities

Source: https://github.com/vinerya/saas-theme/blob/main/packages/tailwind-preset/README.md

Shows examples of using logical properties in HTML for spacing and borders, supporting both inline and block directions.

```html
<!-- Logical spacing -->
<div class="mis-4 mie-6">Inline start/end margins</div>
<div class="pbs-2 pbe-4">Block start/end padding</div>

<!-- Logical borders -->
<div class="border-is border-ie-2">Inline borders</div>
```

--------------------------------

### Template Management CLI

Source: https://github.com/vinerya/saas-theme/blob/main/README.md

Commands for initializing, applying, and customizing pre-built themes.

```APIDOC
## Pre-built Templates

### Description
Manage and apply pre-built theme templates to your SaaS application. Templates provide a starting point for your UI design.

### Available Templates
- **Minimal**: Clean, simple design.
- **Corporate**: Professional business theme.
- **Healthcare**: Calming, accessible theme for medical applications.
- **Fintech**: Secure, modern theme for financial services.
- **Glassmorphism**: Modern glass-effect design.
- **Dark Mode**: Elegant dark theme with proper contrast.

### Method
Use the `saas-theme` CLI tool.

### Commands

#### Initialize with template
```bash
saas-theme init --template <template-name> --tenant <tenant-name>
```
- **--template** (string) - Required - The name of the template to use (e.g., `healthcare`).
- **--tenant** (string) - Required - The name of your tenant or client.

#### Apply template to existing theme
```bash
saas-theme template apply --template <template-name> --theme <theme-file-path>
```
- **--template** (string) - Required - The name of the template to apply.
- **--theme** (string) - Required - The path to the existing theme JSON file.

#### Customize template
```bash
saas-theme template customize --template <template-name> --primary-color "<color-code>"
```
- **--template** (string) - Required - The name of the template to customize.
- **--primary-color** (string) - Optional - A custom primary color value (e.g., "#e74c3c").

### Example
```bash
# Initialize with the healthcare template for a medical client
saas-theme init --template healthcare --tenant medical-client

# Apply the glassmorphism template to an existing theme file
saas-theme template apply --template glassmorphism --theme themes/client-a.json

# Customize the corporate template with a new primary color
saas-theme template customize --template corporate --primary-color "#e74c3c"
```
```

--------------------------------

### Open Modern Features Demo

Source: https://github.com/vinerya/saas-theme/blob/main/README.md

Opens the HTML file for the modern features demo, which showcases various advanced CSS capabilities and theme switching.

```bash
open examples/modern-features-demo/index.html
```

--------------------------------

### Initialize Enterprise SaaS Theme

Source: https://github.com/vinerya/saas-theme/blob/main/packages/cli/README.md

Initializes a new theme project using the 'enterprise' template. This template offers a comprehensive design system, multiple brand variants, accessibility compliance, and advanced theming features.

```bash
saas-theme init my-theme --template enterprise
```

--------------------------------

### Run SaaS Theme Test Suite

Source: https://github.com/vinerya/saas-theme/blob/main/README.md

Executes the test suite for SaaS Theme using npm test.

```bash
npm test
```

--------------------------------

### React Component for Responsive Card (JSX)

Source: https://github.com/vinerya/saas-theme/blob/main/examples/modern-css-demo/README.md

A React component example demonstrating how to use the 'responsive-card' class and 'data-container' attribute for implementing container query-based styling.

```jsx
import "./modern-theme.css";

function ResponsiveCard({ children }) {
  return (
    <div className="responsive-card" data-container="card">
      {children}
    </div>
  );
}
```

--------------------------------

### Build Themes with All Modern Features and Polyfills

Source: https://github.com/vinerya/saas-theme/blob/main/README.md

Builds themes enabling all modern CSS features, including container queries, CSS layers, logical properties, color functions, and provides polyfills for compatibility.

```bash
saas-theme modern -i themes -o dist --container-queries --css-layers --logical-properties --color-functions --polyfills
```

--------------------------------

### Build SaaS Theme with Modern Features

Source: https://github.com/vinerya/saas-theme/blob/main/packages/cli/README.md

Builds a theme from a JSON configuration file, applying modern features, minification, and generating source maps. It specifies the input theme file and the output directory.

```bash
saas-theme build ./theme.json \
  --output ./dist \
  --modern \
  --minify \
  --sourcemaps
```

--------------------------------

### CSS Nesting Example

Source: https://github.com/vinerya/saas-theme/blob/main/examples/advanced-css-demo/index.html

Demonstrates CSS nesting for more organized and maintainable stylesheets. This feature allows styles to be nested within their selectors, similar to preprocessors.

```css
.primary-button {
  /* styles */
}

.secondary-button {
  /* styles */
}

.outline-button {
  /* styles */
}
```

--------------------------------

### Initialize New Theme with Custom Brand Color

Source: https://github.com/vinerya/saas-theme/blob/main/README.md

Initializes a new theme for a tenant, specifying a custom brand color.

```bash
npx saas-theme init --tenant my-client --brand-color "#007bff"
```

--------------------------------

### Advanced tailwind.config.js Configuration

Source: https://github.com/vinerya/saas-theme/blob/main/packages/tailwind-preset/README.md

Provides an advanced configuration example for `tailwind.config.js` with detailed options for theme loading, output customization, modern CSS features, accessibility, and custom utilities.

```javascript
const saasThemePreset = require("saas-theme-tailwind-preset");

module.exports = {
  presets: [
    saasThemePreset({
      // Theme configuration
      theme: "./theme.json",
      fallbackTheme: "./fallback-theme.json",

      // Output options
      prefix: "saas-",
      important: false,

      // Modern CSS features
      modern: {
        containerQueries: true,
        cssLayers: true,
        logicalProperties: true,
        colorFunctions: true,
      },

      // Accessibility options
      accessibility: {
        wcagLevel: "AA",
        enforceContrast: true,
        generateA11yUtilities: true,
      },

      // Custom utilities
      utilities: {
        spacing: true,
        colors: true,
        typography: true,
        shadows: true,
        borders: true,
      },
    }),
  ],
};
```

--------------------------------

### Build Themes with Modern Features

Source: https://github.com/vinerya/saas-theme/blob/main/README.md

Compiles theme files from an input directory to an output directory, enabling modern CSS features.

```bash
npx saas-theme build --input ./themes --output ./dist/themes --modern
```

--------------------------------

### Initialize Modern SaaS Theme

Source: https://github.com/vinerya/saas-theme/blob/main/packages/cli/README.md

Initializes a new theme project using the 'modern' template. This template includes advanced features like container queries, CSS layers, logical properties, advanced color functions, and responsive grids.

```bash
saas-theme init my-theme --template modern
```

--------------------------------

### Build Themes with Modern CSS and Polyfills

Source: https://github.com/vinerya/saas-theme/blob/main/README.md

Builds a theme with support for modern CSS features and includes polyfills for browsers that do not support them. This ensures broader compatibility.

```bash
saas-theme build --modern --polyfills --feature-detection
```

--------------------------------

### CSS Container Queries Implementation

Source: https://github.com/vinerya/saas-theme/blob/main/examples/enhanced-features-demo/README.md

Provides an example of implementing CSS container queries. It defines a container with `container-type` and `container-name`, and then applies styles to elements within that container based on a minimum width condition.

```css
.new-container {
  container-type: inline-size;
  container-name: new-component;
}

@container new-component (min-width: 500px) {
  .responsive-element {
    /* Styles for larger containers */
  }
}
```

--------------------------------

### Build SaaS Theme to CSS

Source: https://github.com/vinerya/saas-theme/blob/main/packages/cli/README.md

Builds a theme file (e.g., JSON) into CSS, with options for output directory, format (css, scss, less), minification, source maps, and enabling modern CSS features.

```bash
# Build a theme
saas-theme build ./themes/client-a.json --output ./dist

saas-theme build ./theme.json
saas-theme build ./theme.json --output ./dist --format css --minify
```

--------------------------------

### Webpack Configuration for PostCSS with Tailwind

Source: https://github.com/vinerya/saas-theme/blob/main/packages/tailwind-preset/README.md

Configures Webpack to process CSS files using PostCSS, including Tailwind CSS and Autoprefixer. This setup is essential for applying Tailwind's utility classes and ensuring browser compatibility.

```javascript
// webpack.config.js
const path = require("path");

module.exports = {
  // ... other config
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [require("tailwindcss"), require("autoprefixer")],
              },
            },
          },
        ],
      },
    ],
  },
};
```

--------------------------------

### Compare Two SaaS Themes

Source: https://github.com/vinerya/saas-theme/blob/main/packages/cli/README.md

Compares two theme files and displays the differences. The output format can be specified as 'table', 'json', or 'markdown', and the diff can be saved to a file.

```bash
# Compare themes
saas-theme diff ./theme-v1.json ./theme-v2.json

saas-theme diff ./theme-v1.json ./theme-v2.json --format table
```

--------------------------------

### Smooth Scrolling for Anchor Links (JavaScript)

Source: https://github.com/vinerya/saas-theme/blob/main/examples/enhanced-features-demo/index.html

This code snippet implements smooth scrolling for anchor links (links starting with '#'). It prevents the default jump behavior and scrolls the target element into view with a smooth animation.

```javascript
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  anchor.addEventListener('click', function (e) {
    e.preventDefault();
    const target = document.querySelector(this.getAttribute('href'));
    if (target) {
      target.scrollIntoView({
        behavior: 'smooth',
        block: 'start'
      });
    }
  });
});
```

--------------------------------

### Container Query Manager for Responsive Styling

Source: https://github.com/vinerya/saas-theme/blob/main/README.md

Manages container queries using the core library, allowing registration of query breakpoints and application of responsive styles to components.

```javascript
import { ContainerQueryManager } from "@saas-theme/core";

const cqManager = new ContainerQueryManager();

// Register container queries
cqManager.register("card", {
  small: "(max-width: 300px)",
  medium: "(min-width: 301px) and (max-width: 600px)",
  large: "(min-width: 601px)",
});

// Apply responsive styling
cqManager.applyStyles("card", {
  small: { padding: "var(--spacing-sm)" },
  medium: { padding: "var(--spacing-md)" },
  large: { padding: "var(--spacing-lg)" },
});
```

--------------------------------

### CI/CD Pipeline for Theme Validation

Source: https://github.com/vinerya/saas-theme/blob/main/packages/cli/README.md

A GitHub Actions workflow for validating SaaS themes on push or pull request events. It checks out the code, sets up Node.js, installs the CLI globally, and runs theme validation with strict WCAG AAA checks.

```yaml
# .github/workflows/themes.yml
name: Theme Validation
on: [push, pull_request]
jobs:
  validate:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v2
      - run: npm install -g saas-theme-cli
      - run: saas-theme validate ./themes/*.json --strict --wcag AAA
```

--------------------------------

### CSS Anchor Positioning Example

Source: https://github.com/vinerya/saas-theme/blob/main/examples/advanced-css-demo/README.md

Demonstrates CSS Anchor Positioning by defining an anchor element and then positioning another element relative to it. The `.tooltip` element is positioned at the top inset area of the element identified by `--tooltip-anchor`.

```css
.tooltip-trigger {
  anchor-name: --tooltip-anchor;
}

.tooltip {
  position-anchor: --tooltip-anchor;
  inset-area: top;
}
```

--------------------------------

### CSS: Style Queries for Theming

Source: https://github.com/vinerya/saas-theme/blob/main/examples/enhanced-features-demo/index.html

Demonstrates style queries to change component styles based on custom properties defined on a container. This example changes the card background and text color when a `--theme: dark` style is applied.

```css
/* Style-based container queries */ @container style(--theme: dark) { .card { background: oklch(0.15 0 0); background: #1f2937; /* Fallback */ color: white; } }
```

--------------------------------

### Enable Runtime Performance Monitoring (JavaScript)

Source: https://github.com/vinerya/saas-theme/blob/main/README.md

Enables runtime performance monitoring for theme switching and CSS loading, reporting metrics.

```javascript
// Enable performance monitoring
import { enablePerformanceMonitoring } from "@saas-theme/core";

enablePerformanceMonitoring({
  trackThemeSwitching: true,
  trackCSSLoading: true,
  reportMetrics: true,
});
```

--------------------------------

### CLI Build with Specific Modern CSS Flags

Source: https://github.com/vinerya/saas-theme/blob/main/README.md

Builds themes using the CLI, explicitly enabling Container Queries, CSS Layers, Logical Properties, and Color Functions.

```bash
saas-theme build --modern --container-queries --css-layers --logical-properties --color-functions
```

--------------------------------

### Theme Structure JSON

Source: https://github.com/vinerya/saas-theme/blob/main/examples/advanced-css-demo/README.md

Defines the structure of a theme, including metadata and advanced CSS token configurations for features like anchor positioning, view transitions, CSS nesting, and Houdini worklets. This JSON schema guides theme creation.

```json
{
  "metadata": {
    "name": "Theme Name",
    "version": "1.0.0",
    "tenant": "theme-id"
  },
  "tokens": {
    "modern": {
      "advanced": {
        "anchorPositioning": {
          /* Anchor configurations */
        },
        "viewTransitions": {
          /* Transition definitions */
        },
        "cssNesting": {
          /* Nested rule structures */
        },
        "houdiniWorklets": {
          /* Custom worklet definitions */
        }
      }
    }
  }
}
```

--------------------------------

### CSS Logical Properties with Fallbacks

Source: https://github.com/vinerya/saas-theme/blob/main/examples/enhanced-features-demo/README.md

Demonstrates the use of CSS logical properties (e.g., margin-inline-start, padding-block-start) alongside their physical property fallbacks (e.g., margin-left, padding-top) for better browser compatibility and RTL support. Includes an example of overriding flex direction for RTL layouts.

```css
.element {
  /* Fallback for older browsers */
  margin-left: 1rem;
  padding-top: 0.5rem;

  /* Modern logical properties */
  margin-inline-start: 1rem;
  padding-block-start: 0.5rem;
}

/* RTL support */
[dir="rtl"] .nav-list {
  flex-direction: row-reverse;
}
```

--------------------------------

### View Transitions API Usage

Source: https://github.com/vinerya/saas-theme/blob/main/examples/advanced-css-demo/README.md

Initiates a view transition for applying a new theme. The `document.startViewTransition` function wraps the theme application logic, enabling smooth visual transitions between states.

```javascript
document.startViewTransition(() => {
  applyTheme(newTheme);
});
```

--------------------------------

### Troubleshoot Build Errors

Source: https://github.com/vinerya/saas-theme/blob/main/packages/cli/README.md

Offers commands to diagnose and resolve build errors in SaaS themes. This includes enabling debug mode for detailed logs and validating the theme's structure.

```bash
# Enable debug mode
DEBUG=saas-theme:* saas-theme build ./theme.json

# Check theme structure
saas-theme validate ./theme.json
```

--------------------------------

### Compare Theme Versions

Source: https://github.com/vinerya/saas-theme/blob/main/README.md

Compares two theme JSON files to highlight the differences between different versions of a theme.

```bash
saas-theme diff themes/old.json themes/new.json
```

--------------------------------

### Enable and Load Modern Theme Features at Runtime

Source: https://github.com/vinerya/saas-theme/blob/main/README.md

Enables modern CSS features like container queries, CSS layers, and logical properties in the core library. It also demonstrates loading and switching themes dynamically with modern feature support.

```javascript
import { loadTheme, switchTheme, enableModernFeatures } from "@saas-theme/core";

// Enable modern CSS features
enableModernFeatures({
  containerQueries: true,
  cssLayers: true,
  logicalProperties: true,
});

// Load theme with modern features
await loadTheme("client-a", { modern: true });

// Switch themes dynamically
await switchTheme("client-b", { modern: true });
```

--------------------------------

### Storybook Configuration for SaaS Theme Addon

Source: https://github.com/vinerya/saas-theme/blob/main/README.md

Configures the Storybook main file to include the '@saas-theme/storybook-addon' and enable modern inline rendering features.

```javascript
// .storybook/main.js
module.exports = {
  addons: ["@saas-theme/storybook-addon"],
  features: {
    modernInlineRender: true,
  },
};
```

--------------------------------

### Load, Resolve, and Build Theme CSS

Source: https://github.com/vinerya/saas-theme/blob/main/packages/core/README.md

Demonstrates how to use the ThemeBuilder to load a theme from a JSON file, resolve its properties, and build the CSS output.

```typescript
import { ThemeBuilder } from "saas-theme-core";

const builder = new ThemeBuilder();

// Load and build a theme
const theme = await builder.loadTheme("./my-theme.json");
const resolvedTheme = await builder.resolveTheme(theme);
const css = await builder.buildCSS(resolvedTheme, {
  outputDir: "./dist",
  format: "css",
  minify: true,
});

console.log(css);
```

--------------------------------

### Migrate SaaS Themes to Version 2.0

Source: https://github.com/vinerya/saas-theme/blob/main/README.md

Executes the theme migration script to update themes from version 1.x to 2.0, specifying the source and destination versions and the theme directory.

```bash
saas-theme migrate --from 1.x --to 2.0 --themes ./themes/
```

--------------------------------

### Organized CSS with CSS Layers

Source: https://github.com/vinerya/saas-theme/blob/main/README.md

Demonstrates the use of CSS Layers to organize styles, defining base, component, and utility layers for better cascade control.

```css
/* Organized with CSS Layers */
@layer base, components, utilities;

@layer base {
  :root {
    --primary-500: #007bff;
    --spacing-md: 1rem;
  }
}

@layer components {
  .button {
    background: var(--primary-500);
    padding: var(--spacing-md);
  }
}
```

--------------------------------

### DOM Content Loaded and Feature Initialization (JavaScript)

Source: https://github.com/vinerya/saas-theme/blob/main/examples/modern-features-demo/index.html

Initializes the SaaS Theme Toolkit 2.0 on DOMContentLoaded, logs loaded features, and adds hover effects to feature cards for an interactive demo experience.

```javascript
// Add some interactive features
document.addEventListener('DOMContentLoaded', function() {
  console.log('🚀 SaaS Theme Toolkit 2.0 - Modern Features Demo');
  console.log('Features loaded:');
  console.log(' ✅ Storybook Addon');
  console.log(' ✅ Modern CSS Features');
  console.log(' ✅ Enhanced CLI');
  console.log(' ✅ Container Queries');
  console.log(' ✅ CSS Layers');
  console.log(' ✅ Advanced Animations');

  // Add hover effects to feature cards
  const featureCards = document.querySelectorAll('.feature-card');
  featureCards.forEach(card => {
    card.addEventListener('mouseenter', function() {
      this.style.transform = 'translateY(-4px) scale(1.02)';
    });
    card.addEventListener('mouseleave', function() {
      this.style.transform = 'translateY(0) scale(1)';
    });
  });
});
```

--------------------------------

### Build SaaS Theme with Modern CSS (Bash)

Source: https://github.com/vinerya/saas-theme/blob/main/examples/modern-css-demo/README.md

Commands to build the SaaS theme enabling modern CSS features like container queries, CSS layers, logical properties, and color functions. It also shows how to use the 'modern' command alias and detect browser support.

```bash
# Navigate to the demo directory
cd examples/modern-css-demo

# Build with modern CSS features enabled
npx saas-theme build -i . -o . --modern --container-queries --css-layers --logical-properties --color-functions

# Or use the modern command
npx saas-theme modern -i . -o . --container-queries --css-layers --logical-properties --color-functions
```

```bash
# Open in default browser (macOS)
open index.html

# Or serve with a local server
npx serve .
```

```bash
npx saas-theme modern --detect
```

```bash
# Enable all modern features
saas-theme build --modern

# Enable specific features
saas-theme build --container-queries --css-layers

# Build with polyfills
saas-theme build --modern --polyfills

# Generate feature detection CSS
saas-theme build --modern --feature-detection
```

```bash
# Detect browser support
saas-theme modern --detect

# Build with modern features
saas-theme modern -i themes -o dist --container-queries --css-layers

# Enable all features with polyfills
saas-theme modern -i themes -o dist --container-queries --css-layers --logical-properties --color-functions --polyfills
```

--------------------------------

### Watch and Rebuild Theme with Hot Reloading

Source: https://github.com/vinerya/saas-theme/blob/main/packages/cli/README.md

Watches for changes in theme files, rebuilds them, and enables hot reloading for live preview. This command is split into two parts: watching and then previewing with hot reload.

```bash
saas-theme watch ./themes --output ./dist --modern &
saas-theme preview ./themes/main.json --hot --port 3000
```

--------------------------------

### Update SaaS Theme Build Commands

Source: https://github.com/vinerya/saas-theme/blob/main/README.md

Demonstrates the change in the build command for SaaS Theme from version 1.x to 2.0, adding the `--modern` flag.

```bash
# Old
saas-theme build

# New
saas-theme build --modern
```

--------------------------------

### Implement Container Queries for Responsive Components

Source: https://github.com/vinerya/saas-theme/blob/main/examples/advanced-css-demo/index.html

Demonstrates container queries by styling a demo element based on its container's inline size. It adjusts font sizes and padding within the container at different breakpoints, showcasing component-level responsiveness.

```css
/* Container Queries Demo */
.container-query-demo {
  container-type: inline-size;
  container-name: demo;
  border: 2px solid var(--color-primary);
  border-radius: var(--border-radius-lg);
  padding: var(--spacing-md);
  margin: var(--spacing-lg) 0;
  resize: horizontal;
  overflow: auto;
  min-width: 200px;
  max-width: 100%;
}

@container demo (max-width: 300px) {
  .container-content {
    font-size: var(--font-size-sm);
    padding: var(--spacing-sm);
  }
  .container-content h3 {
    font-size: var(--font-size-lg);
  }
}

@container demo (min-width: 400px) {
  .container-content {
    font-size: var(--font-size-lg);
    padding: var(--spacing-lg);
  }
  .container-content h3 {
    font-size: var(--font-size-2xl);
  }
}
```

--------------------------------

### CSS Architecture with Layers and Container Queries

Source: https://github.com/vinerya/saas-theme/blob/main/examples/enhanced-features-demo/README.md

Demonstrates organizing CSS using @layer for cascade control and implementing container queries for responsive layouts based on container size. Includes usage of logical properties for modern layout adaptation.

```css
/* Organized using CSS Layers */
@layer reset, base, layout, components, utilities;

@layer reset {
  /* CSS reset styles */
}

@layer base {
  /* Base typography, colors, and variables */
  :root {
    --primary: oklch(0.7 0.15 220);
    --spacing-md: 1rem;
  }
}

@layer layout {
  /* Container definitions and layout structure */
  .container {
    container-type: inline-size;
    container-name: main;
  }
}

@layer components {
  /* UI components with container queries */
  @container grid (min-width: 600px) {
    .grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }
}

@layer utilities {
  /* Utility classes using logical properties */
  .mx-auto {
    margin-inline: auto;
  }
}
```

--------------------------------

### OKLCH Color Mixing and Relative Color Syntax (CSS)

Source: https://github.com/vinerya/saas-theme/blob/main/examples/modern-css-demo/index.html

Demonstrates the use of the OKLCH color space for perceptual uniformity and showcases CSS color mixing and the relative color syntax for creating tints, shades, and lighter/more vibrant color variations.

```css
/* OKLCH color space - more perceptually uniform */
--color-primary: oklch(0.5 0.2 250);
/* Color mixing in OKLCH space */
--color-tint: color-mix(in oklch, var(--color-primary) 80%, white);
--color-shade: color-mix(in oklch, var(--color-primary) 80%, black);
/* Relative color syntax */
--color-lighter: from var(--color-primary) l(+20%);
--color-more-vibrant: from var(--color-primary) c(+30%);
```

--------------------------------

### Lint SaaS Theme for Best Practices

Source: https://github.com/vinerya/saas-theme/blob/main/packages/cli/README.md

Lints a theme file to enforce best practices and identify potential issues. Supports auto-fixing issues and ignoring specific patterns or using custom rule files.

```bash
# Lint a theme
saas-theme lint ./theme.json

saas-theme lint ./themes/*.json --fix
```

--------------------------------

### CSS: Layout Containers with Container Queries

Source: https://github.com/vinerya/saas-theme/blob/main/examples/enhanced-features-demo/index.html

Defines layout containers using `container-type` and `container-name`. Demonstrates how to apply styles based on the inline size of these containers using `@container` rules, enabling responsive component behavior.

```css
@layer layout { .container { container-type: inline-size; container-name: main; max-inline-size: 1200px; margin-inline: auto; padding-inline: var(--spacing-md); } .grid-container { container-type: inline-size; container-name: grid; } .sidebar-container { container-type: inline-size; container-name: sidebar; } }
```

--------------------------------

### SaaS Theme JSON Configuration

Source: https://github.com/vinerya/saas-theme/blob/main/README.md

Defines theme tokens, metadata, and feature flags for a specific client tenant.

```json
{
  "$schema": "../schemas/theme.schema.json",
  "metadata": {
    "name": "My Client Theme",
    "version": "2.0.0",
    "tenant": "my-client"
  },
  "tokens": {
    "colors": {
      "primary": {
        "50": "#eff6ff",
        "100": "#dbeafe",
        "500": "#007bff",
        "900": "#1e3a8a"
      },
      "semantic": {
        "success": "#10b981",
        "warning": "#f59e0b",
        "error": "#ef4444"
      }
    },
    "typography": {
      "fontFamily": {
        "sans": ["Inter", "system-ui", "sans-serif"],
        "mono": ["JetBrains Mono", "Consolas", "monospace"]
      },
      "fontSize": {
        "xs": "0.75rem",
        "sm": "0.875rem",
        "base": "1rem",
        "lg": "1.125rem",
        "xl": "1.25rem",
        "2xl": "1.5rem"
      }
    },
    "spacing": {
      "xs": "0.25rem",
      "sm": "0.5rem",
      "md": "1rem",
      "lg": "1.5rem",
      "xl": "2rem"
    },
    "modernFeatures": {
      "containerQueries": true,
      "cssLayers": true,
      "logicalProperties": true,
      "colorFunctions": true
    }
  }
}
```

--------------------------------

### Build Themes with Specific Modern CSS Features

Source: https://github.com/vinerya/saas-theme/blob/main/README.md

Builds themes incorporating specified modern CSS features like container queries and CSS layers. It allows granular control over feature inclusion.

```bash
saas-theme modern -i themes -o dist --container-queries --css-layers
```

--------------------------------

### Analyze Theme Build Performance (JavaScript)

Source: https://github.com/vinerya/saas-theme/blob/main/README.md

Analyzes the performance metrics of a theme file using the PerformanceAnalyzer from @saas-theme/core.

```javascript
import { PerformanceAnalyzer } from "@saas-theme/core";

const analyzer = new PerformanceAnalyzer();

// Analyze theme performance
const metrics = await analyzer.analyzeTheme("themes/client-a.json");
console.log(metrics);
// {
//   cssSize: "45.2kb",
//   gzippedSize: "12.1kb",
//   variableCount: 156,
//   buildTime: "234ms",
//   optimizationSuggestions: [...] 
// }
```