igniteui-theming/dist/mcp/knowledge/docs/layout/overview.js

A set of Sass variables, mixins, and functions for generating palettes, typography, and elevations used by Ignite UI components.

//#region src/knowledge/docs/layout/overview.md?raw
var overview_default = "# Layout scale overview\n\nIgnite UI components expose sizing, spacing, and roundness through CSS custom properties.\nYou can set them globally on :root or locally on a specific component selector.\n\n## Size\n--ig-size is the primary control. Components map it into --component-size internally:\n--component-size: var(--ig-size, <default-size-from-theme>).\n\nSize affects any styles that use sizable() or pad() functions.\n\nSuggested values:\n- 1 = small\n- 2 = medium (default in mosts components)\n- 3 = large\n- fractional values are NOT ALLOWED (0.75, 1.5)\n\n## Spacing\n--ig-spacing scales spacing used by pad(), pad-inline(), and pad-block().\n\nSuggested values:\n- 0 = no spacing\n- 1 = default\n- 2 = double\n- fractional values are ALLOWED (0.75, 1.5)\n\nYou can override inline or block independently:\n- --ig-spacing\n- --ig-spacing-inline\n- --ig-spacing-block\n\n## Roundness\n--ig-radius-factor scales border radius values when border-radius() is used.\n- 0 = minimum radius\n- 1 = maximum radius\n- values between 0 and 1 interpolate between min and max\n\n## Examples\n\n### CSS (global)\n```css\n:root {\n  --ig-size: 2;\n  --ig-spacing: 0.75;\n  --ig-radius-factor: 0.8;\n}\n```\n\n### CSS (component scope)\n```css\nigx-calendar,\nigc-calendar {\n  --ig-size: 1; // small calendar\n  --ig-spacing: 0.5; // tighter spacing in calendar 50% of default\n  --ig-radius-factor: 0.9; // more rounded calendar with radius closer to max\n}\n```\n\n### Sass notes\n- To react to --ig-size, component styles must include @include sizable() and --component-size.\n- To use pad(), pad-inline(), or pad-block(), include @include spacing() once.\n- border-radius() responds to --ig-radius-factor without extra mixins.\n";
//#endregion
export { overview_default as default };