igniteui-theming/dist/mcp/knowledge/docs/layout/functions/sizable.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/functions/sizable.md?raw
var sizable_default = "# The sizable() function\n\nReturns a size-aware value based on the values --ig-size and a user-declared --component-size CSS variables.\n\n## Mechanism\nThe sizable() function chooses between small/medium/large values using:\n- --component-size (user declared and liked to --ig-size)\n- --ig-size-small/medium/large (set by @include sizing())\n- --is-small/medium/large from @include sizable()\n\n## Sass example\n```scss\n.my-avatar {\n  @include sizable(); // Include --is-small/medium/large flags\n\n  --component-size: var(--ig-size, var(--ig-size-medium)); // Link component size to --ig-size with a default of 2 (medium)\n  --size: #{sizable(32px, 40px, 48px)};\n\n  width: var(--size);\n  height: var(--size);\n}\n```\n\n## Change the global size to medium, which will make the wid\n```scss\n:root {\n  --ig-size: 2;\n}\n```\n\n## Notes\n- Requires `@include sizable()` in component styles.\n- Requires `@include sizing()` once to set size variables.\n";
//#endregion
export { sizable_default as default };