Conversation
matyasf
requested review from
HerrTopi and
joyenjoyer
and removed request for
joyenjoyer
September 28, 2026 14:25
Contributor
|
Contributor
Visual regression reportCypress suite: ✅ Passing Visual diff: ✅ No changes.
Accessibility (axe): ✅ No violations. 📊 View full report — click a screenshot's ⚠ badge to see each violation boxed on the image, with the offending element named and contrast failures shown as color swatches. Baselines come from the |
matyasf
commented
Sep 28, 2026
| | Canvas (legacy) | `import { canvas } from '@instructure/ui-themes'` | `v11_6` and `v11_7+` | | ||
| | Canvas high contrast (legacy) | `import { canvasHighContrast } from '@instructure/ui-themes'` | `v11_6` and `v11_7+` | | ||
|
|
||
| v11.6 components fall back to the `canvas` theme when one tried to apply the `light` and `dark` themes. See [Component versioning](/#component-versioning) for details. |
matyasf
force-pushed
the
INSTUI-5198-theming-guide
branch
from
September 28, 2026 14:47
d5d112a to
ce080f2
Compare
Add a guide on applying themes and styling custom layouts with the theme. Expose useComputedTheme to live doc examples and note in its JSDoc that sharedTokens is the only part with a stable shape across themes. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
matyasf
force-pushed
the
INSTUI-5198-theming-guide
branch
from
September 28, 2026 15:24
ce080f2 to
f7848de
Compare
matyasf
commented
Sep 28, 2026
Comment on lines
+84
to
+108
| // declared variables, do not import these, e.g. const XYZ | ||
| const declared = new Set( | ||
| [...code.matchAll(LOCAL_DECLARATION_PATTERN)].map((m) => m[1]) | ||
| [...code.matchAll(/\b(?:class|function|const|let)\s+([A-Z]\w*)/g)].map( | ||
| (m) => m[1] | ||
| ) | ||
| ) | ||
| // icons: IconXYZLine, IconXYZSolid, XYZInstUIIcon | ||
| // contexts: XYZContext | ||
| // JSX tags: <XYZ> | ||
| const used = new Set( | ||
| [...code.matchAll(USED_NAME_PATTERN)].map((m) => m[1] ?? m[2]) | ||
| [ | ||
| ...code.matchAll( | ||
| /<([A-Z]\w+)|\b(Icon[A-Z]\w*(?:Line|Solid)|[A-Z]\w*InstUIIcon|[A-Z]\w+Context)\b/g | ||
| ) | ||
| ].map((m) => m[1] ?? m[2]) | ||
| ) | ||
| // light, dark, canvasHighContrast, canvas, useComputedTheme | ||
| const specials = new Set( | ||
| [ | ||
| ...code.matchAll( | ||
| /(?<!['"])\b(light|dark|canvasHighContrast|canvas|useComputedTheme)\b(?!['"])/g | ||
| ) | ||
| ].map((m) => m[1] ?? m[2]) | ||
| ) | ||
| return [...used].filter((name) => !declared.has(name)) | ||
| return [...used, ...specials].filter((name) => !declared.has(name)) |
Collaborator
Author
There was a problem hiding this comment.
cleaned up this code a bit, and now it imports light|dark|canvasHighContrast|canvas|useComputedTheme when its in the examples
This branch has not been deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Test Plan
Fixes INSTUI-5198
🤖 Generated with Claude Code