|
13 | 13 | - [Theming components](https://instructure.design/markdowns/theming-components.md): InstUI has two themes: `canvas` (default) and `canvas-high-contrast`. Colors are layered: primitives (base), contrasts (theme-specific), and UI (curated tokens). Use `InstUISettingsProvider` to set themes. Overrides allow customization but must maintain accessibility. |
14 | 14 | - [Usage](https://instructure.design/markdowns/usage.md): Quick start: Create a React app, add `@instructure/ui`, wrap with `InstUISettingsProvider`, and use components. Integrate with existing projects by adding the dependency and provider. Read about theme overrides and accessibility for best practices. |
15 | 15 |
|
16 | | -#### Patterns |
17 | | - |
18 | | -- [Content alignment](https://instructure.design/markdowns/ContentAlignment.md): Guidelines for main content area alignment with maximum width (948px) for readability, minimum width (320px) for accessibility, and responsive padding (24px/12px). Ensures proper centering, avoids two-dimensional scrolling, and allows exceptions for complex data displays. |
19 | | -- [Destroy action](https://instructure.design/markdowns/DestroyAction.md): A modal used for irreversible actions like deletion. Includes guidelines for usage: use clear language, avoid vague confirmations, and use a danger button for the destructive action. |
20 | | -- [Search](https://instructure.design/markdowns/Search.md): Provides search input patterns including auto-activated, activated, and autocomplete search. Includes guidelines, accessibility support, and clear state management examples. |
21 | | - |
22 | 16 | #### Guides |
23 | 17 |
|
24 | 18 | - [Accessing the dom](https://instructure.design/markdowns/accessing-the-dom.md): Guidance for properly accessing DOM elements in React components using refs instead of findDOMNode to avoid warnings. Examples show good and bad patterns for component ref handling. |
|
33 | 27 | - [Using icons](https://instructure.design/markdowns/UsingIcons.md): Guidelines for using icons with proper accessibility roles, size variants, and color options. Line icons for light backgrounds, solid for dark backgrounds. Icons scale with parent font-size by default. |
34 | 28 | - [Using theme overrides](https://instructure.design/markdowns/using-theme-overrides.md): Customize components via theme overrides while ensuring WCAG compliance. Use nested `InstUISettingsProvider` for subtree themes, override global or component themes, and leverage branding variables for user customization. Deprecated global theming causes issues with multiple InstUI versions. |
35 | 29 |
|
| 30 | +#### Patterns |
| 31 | + |
| 32 | +- [Content alignment](https://instructure.design/markdowns/ContentAlignment.md): Guidelines for main content area alignment with maximum width (948px) for readability, minimum width (320px) for accessibility, and responsive padding (24px/12px). Ensures proper centering, avoids two-dimensional scrolling, and allows exceptions for complex data displays. |
| 33 | +- [Destroy action](https://instructure.design/markdowns/DestroyAction.md): A modal used for irreversible actions like deletion. Includes guidelines for usage: use clear language, avoid vague confirmations, and use a danger button for the destructive action. |
| 34 | +- [Search](https://instructure.design/markdowns/Search.md): Provides search input patterns including auto-activated, activated, and autocomplete search. Includes guidelines, accessibility support, and clear state management examples. |
| 35 | + |
36 | 36 | ### Components |
37 | 37 |
|
38 | 38 | - [InstUISettingsProvider](https://instructure.design/markdowns/InstUISettingsProvider.md): A global configuration component for applying themes and text direction settings across an application. It wraps Emotion's ThemeProvider and supports nested providers for theme inheritance and overrides. Also manages text direction (LTR/RTL) via context for descendant components. |
|
0 commit comments