/** * Ignite UI for Blazor Platform Knowledge * * This module contains platform-specific information for generating * valid Sass theme code for Ignite UI for Blazor applications. * * Key characteristics: * - .NET/C# project using Blazor framework (Server or WebAssembly) * - Uses NuGet package `IgniteUI.Blazor` (not npm) * - Uses `igniteui-theming` npm package for Sass compilation * - Sass files are compiled to CSS and referenced in Blazor components * - Components use CSS variables for theming (--ig-* naming convention) * - Theming approach is similar to Web Components/React */ export declare const BLAZOR_PLATFORM: { readonly id: "blazor"; readonly name: "Ignite UI for Blazor"; readonly packageName: "IgniteUI.Blazor"; /** * The Sass module to import for theming * Note: Blazor projects need to install igniteui-theming via npm * even though the main package is NuGet-based */ readonly themingModule: "igniteui-theming"; /** * Detection patterns - Blazor uses NuGet packages, not npm * Detection is done via .csproj file analysis */ readonly detectionPatterns: readonly ["IgniteUI.Blazor"]; /** * Config files that indicate a Blazor project * .csproj files with IgniteUI.Blazor package reference */ readonly configFiles: readonly [".csproj"]; /** * No required root class (themes apply via CSS variables on :root) */ readonly rootClass: null; }; /** * Example usage documentation for Blazor */ export declare const BLAZOR_USAGE_EXAMPLES: { readonly basic: "\n// Basic Material Light Theme for Blazor\n// In your wwwroot/css/theme.scss file:\n\n@use 'igniteui-theming/sass/color/presets/light/material' as *;\n@use 'igniteui-theming' as *;\n@use 'igniteui-theming/sass/typography/presets/material' as *;\n@use 'igniteui-theming/sass/elevations/presets' as *;\n\n:root {\n --ig-theme: material;\n --ig-theme-variant: light;\n --ig-size-small: 1;\n --ig-size-medium: 2;\n --ig-size-large: 3;\n --ig-scrollbar-size: #{rem(16px)};\n}\n\n@include palette($palette);\n@include elevations($material-elevations);\n@include typography(\n $font-family: $typeface,\n $type-scale: $type-scale\n);\n@include spacing();\n"; readonly projectSetup: "\n// Blazor project setup for custom theming:\n\n// 1. Install NuGet package in your .csproj:\n\n\n// 2. Install npm packages for Sass theming:\nnpm init -y\nnpm install igniteui-theming sass\n\n// 3. Create theme file (wwwroot/css/theme.scss)\n\n// 4. Add npm script to package.json:\n{\n \"scripts\": {\n \"build:theme\": \"sass wwwroot/css/theme.scss wwwroot/css/theme.css\"\n }\n}\n\n// 5. Reference compiled CSS in _Host.cshtml or index.html:\n\n"; readonly csprojExample: "\n\n\n \n net8.0\n \n \n \n \n\n"; readonly customPalette: "\n// Custom Palette Theme\n@use 'igniteui-theming' as *;\n@use 'igniteui-theming/sass/typography/presets/material' as *;\n@use 'igniteui-theming/sass/elevations/presets' as *;\n\n$my-palette: palette(\n $primary: #2ab759,\n $secondary: #f96a88,\n $surface: #ffffff\n);\n\n:root {\n --ig-theme: material;\n --ig-theme-variant: light;\n --ig-size-small: 1;\n --ig-size-medium: 2;\n --ig-size-large: 3;\n}\n\n@include palette($my-palette);\n@include elevations($material-elevations);\n@include typography(\n $font-family: $typeface,\n $type-scale: $type-scale\n);\n@include spacing();\n"; readonly darkTheme: "\n// Dark Indigo Theme for Blazor\n@use 'igniteui-theming' as *;\n@use 'igniteui-theming/sass/color/presets/dark/indigo' as *;\n@use 'igniteui-theming/sass/typography/presets/indigo' as *;\n@use 'igniteui-theming/sass/elevations/presets' as *;\n\n:root {\n --ig-theme: indigo;\n --ig-theme-variant: dark;\n --ig-size-small: 1;\n --ig-size-medium: 2;\n --ig-size-large: 3;\n}\n\n@include palette($dark-indigo-palette);\n@include elevations($indigo-elevations);\n@include typography(\n $font-family: $indigo-typeface,\n $type-scale: $indigo-type-scale\n);\n@include spacing();\n"; }; /** * Note: Blazor uses the same Sass code generation as Web Components/React. * The generateWebComponentsThemeSass function from webcomponents.ts can be reused for Blazor. * The main difference is in the build pipeline (npm + sass CLI vs Angular CLI). */