igniteui-theming
Version:
A set of Sass variables, mixins, and functions for generating palettes, typography, and elevations used by Ignite UI components.
50 lines (49 loc) • 4.13 kB
TypeScript
/**
* Ignite UI for React Platform Knowledge
*
* This module contains platform-specific information for generating
* valid Sass theme code for Ignite UI for React applications.
*
* Key characteristics:
* - Uses `igniteui-theming` directly (same as Web Components)
* - No `core()` or `theme()` mixins - uses individual mixins: `palette()`, `typography()`, `elevations()`
* - Commonly used with Vite, Next.js, or Create React App
* - Components use CSS variables for theming (--ig-* naming convention)
* - Theming approach is identical to Web Components
*/
export declare const REACT_PLATFORM: {
readonly id: "react";
readonly name: "Ignite UI for React";
readonly packageName: "igniteui-react";
/**
* The Sass module to import for theming
*/
readonly themingModule: "igniteui-theming";
/**
* Detection patterns in package.json dependencies
*/
readonly detectionPatterns: readonly ["igniteui-react", "@infragistics/igniteui-react"];
/**
* Config files that indicate a React project
*/
readonly configFiles: readonly ["vite.config.ts", "vite.config.js", "next.config.js", "next.config.mjs"];
/**
* No required root class (themes apply via CSS variables on :root)
*/
readonly rootClass: null;
};
/**
* Example usage documentation for React
*/
export declare const REACT_USAGE_EXAMPLES: {
readonly basic: "\n// Basic Material Light Theme for React (Vite)\n// In your styles.scss or 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 viteConfig: "\n// vite.config.ts - Sass configuration for Ignite UI theming\nimport { defineConfig } from 'vite';\nimport react from '@vitejs/plugin-react';\n\nexport default defineConfig({\n plugins: [react()],\n css: {\n preprocessorOptions: {\n scss: {\n // Add node_modules to load paths for @use statements\n loadPaths: ['node_modules'],\n },\n },\n },\n});\n";
readonly nextjsConfig: "\n// next.config.js - Sass configuration for Next.js\nconst path = require('path');\n\nmodule.exports = {\n sassOptions: {\n loadPaths: [path.join(__dirname, 'node_modules')],\n },\n};\n";
readonly customPalette: "\n// Custom Palette Theme for React\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 React\n@use 'igniteui-theming' 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($palette);\n@include elevations($indigo-elevations);\n@include typography(\n $font-family: $typeface,\n $type-scale: $type-scale\n);\n@include spacing();\n";
};
/**
* Note: React uses the same Sass code generation as Web Components.
* The generateWebComponentsThemeSass function from webcomponents.ts can be reused for React.
* The only difference is in how the Sass files are imported and bundled (Vite vs Angular CLI).
*/