[MBL-19926][Student] InstUI Design System Foundation#3650
Merged
hermannakos merged 12 commits intomasterfrom Apr 22, 2026
Merged
[MBL-19926][Student] InstUI Design System Foundation#3650hermannakos merged 12 commits intomasterfrom
hermannakos merged 12 commits intomasterfrom
Conversation
Extend the InstUI token generator to produce the third layer: per-component design tokens from instructure-ui's rebrand/component/*.json files (65 files). Component tokens reference the semantic layer and provide: - Composed TextStyle objects with sp font sizes and em/sp line heights - Color tokens as @composable getters delegating to semantic accessors - Font sizes always in sp for Compose accessibility correctness - BorderStyle enum mapping CSS border styles to Compose PathEffect - BoxShadow and Border composites as documentation comments CSS-specific values (currentColor, percentages, multi-value shorthands) are commented out as not directly usable in Compose. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
InstUILayoutTypography.FontSize values now emit sp units (e.g., 16.sp) instead of referencing InstUISizes (which are dp). This ensures font sizes respect the user's accessibility text scaling preference. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Add the first hand-written Compose components for the InstUI design system: - InstUITheme: MaterialTheme wrapper providing InstUI default text style and content color (theme-aware via semantic tokens) - Text: drop-in for Material3 Text with InstUI typography defaults - Heading: heading composable mapping H1-H6 to generated TextStyles - Light/dark preview configurations for all components Also adds Material3 and Compose tooling preview dependencies to the instui module. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Move generated tokens under token/ package (primitives, semantic, component) to separate them from hand-written compose/ code. Add Compose components for the Grades feature: - Pill: status badge with 5 variants (Default, Info, Error, Success, Warning) - ListItem: slots for leading, content, trailing, and bottom areas - SectionHeader: collapsible header with trailing slot for chevron - Separator: themed horizontal divider - Card: elevated surface with configurable padding and border - TopBar: navigation bar with title, subtitle, and icon slots Fix ListItem title to use heading style (Inclusive Sans) with theme-aware color. Fix Card padding to 12dp matching Figma. Fix TopBar subtitle to 12sp (legend style). Add GradesScreenPreview demonstrating all components together matching the Figma "AM Grades" design. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Contributor
🧪 Unit Test Results✅ 📱 Student App
✅ 🌅 Horizon
✅ 📦 Submodules
📊 Summary
Last updated: Wed, 22 Apr 2026 08:40:52 GMT |
Contributor
📊 Code Coverage Report✅ Student
✅ Teacher
✅ Pandautils
📈 Overall Average
|
Contributor
|
Student Install Page |
Add icon generator that fetches SVGs from instructure-ui and produces Compose ImageVector extension properties on InstUIIcons.Line/Solid/Custom. - 386 Line icons, 386 Solid icons, 85 Custom icons - Delta sync via SHA manifest (icons-manifest.json) — subsequent runs only download changed files - Multi-path SVGs supported (e.g., aI-info.svg with 3 paths) - SVG path data parsed at runtime via PathParser (lazy initialization) Update GradesScreenPreview to use real InstUI icons (ArrowLeft, Lock, ArrowOpenDown/Up, Assignment, More) instead of placeholders. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
ListItem: replace generic subtitle/bottom slots with explicit named parameters matching the Figma structure — supportingText, subtext1, subtext2, pill composable slot, and score composable slot. Pill: accept ImageVector instead of composable slot for the icon. The Pill now handles icon sizing (14dp) and tinting (matches variant text color) automatically, simplifying call sites. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
kristofnemere
requested changes
Apr 20, 2026
tamaskozmer
requested changes
Apr 21, 2026
P0 fixes: - Card: replace Column with Box to prevent LazyColumn crash - Add proguard-rules.pro and consumer-rules.pro P1 fixes: - Pill: refactor variant when() to enum-with-properties pattern (PillColors data class + composable lambda per variant) - Pill: extract TextStyle to top-level constant (avoid recomposition alloc) - SectionHeader: replace hardcoded 16.dp/8.dp with token references - SectionHeader: extract TextStyle to top-level constant - TopBar: subtitle contentColor uses Text.inverse() token - Icons: add autoMirror=true for directional icons (arrow, back, etc.) - Icons: add @Preview to each generated icon file Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Add InstUI Icon composable with token-based IconSize enum (XSmall–XXLarge) and IconColor enum (Base, Muted, Error, etc.) with composable lambdas. Two overloads: one with IconColor enum, one with explicit Color tint. Refactor ListItem to mirror Figma component structure: - Leading: sealed class with Icon, Radio, Checkbox, Avatar modes - Trailing: sealed class with Icons, Checkbox, Switch, TextOnly, Accordion modes - Content: add missing text slot (body text between title and subtexts) - Fix padding to 12dp all sides (SpaceMd) and 16dp gap (SpaceLg) Refactor SectionHeader to match Figma: - Built-in chevron icon (ArrowOpenDown) with rotation based on expanded state - Replace generic trailing slot with expanded: Boolean parameter - Rename title to label per Figma naming Update all components and previews to use InstUI Icon instead of M3 Icon. Add previews showing all leading/trailing modes. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
kristofnemere
approved these changes
Apr 21, 2026
tamaskozmer
approved these changes
Apr 21, 2026
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
3 participants
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
Introduces the
libs/instuimodule — a design token system and initial Compose component library for the InstUI design system, synced with instructure-ui (web).Token Generation (3 layers, auto-generated from instructure-ui v11.7.1)
TextStyleobjects,@Composablecolor accessors, andspfont sizesCompose Components (hand-written, thin wrappers)
InstUITheme— MaterialTheme wrapper with InstUI defaultsText/Heading— typography composables using generated TextStylesPill— status badge with 5 variants (Default, Info, Error, Success, Warning)ListItem— leading/content/trailing/bottom slot layoutSectionHeader— collapsible header with trailing slotSeparator— themed horizontal dividerCard— elevated surface with token-based border radius and paddingTopBar— navigation bar with title, subtitle, and icon slotsGradesScreenPreview— dummy preview assembling all components per Figma specOther
BorderStyleenum mapping CSS border styles to ComposePathEffectTest plan
libs/instuiin Android StudioText.kt,Pill.kt,Card.kt,ListItem.kt,SectionHeader.kt,TopBar.ktGradesScreenPreview.ktand verify the full Grades screen preview matches the Figma design./gradlew :instui:compileDebugKotlin— should passcd libs/instui/scripts && npm install && npm run build— should regenerate all token filesrefs: MBL-19926
affects: Student
release note: none (foundation work, no user-facing changes)