igniteui-theming
Version:
A set of Sass variables, mixins, and functions for generating palettes, typography, and elevations used by Ignite UI components.
55 lines (54 loc) • 4.69 kB
TypeScript
/**
* 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<PackageReference Include=\"IgniteUI.Blazor\" Version=\"*\" />\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<link href=\"css/theme.css\" rel=\"stylesheet\" />\n";
readonly csprojExample: "\n<!-- Example .csproj with IgniteUI.Blazor -->\n<Project Sdk=\"Microsoft.NET.Sdk.BlazorWebAssembly\">\n <PropertyGroup>\n <TargetFramework>net8.0</TargetFramework>\n </PropertyGroup>\n <ItemGroup>\n <PackageReference Include=\"IgniteUI.Blazor\" Version=\"24.1.16\" />\n </ItemGroup>\n</Project>\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).
*/