The light theme uses the terminal colours intended for the dark themes.
This makes some colours, especially yellow, hard to read.
Example:
Currently:
<img width="677" height="208" alt="before"
src="https://github.com/user-attachments/assets/ddac0e15-fe45-4130-a524-0ace9448e000"
/>
With this PR:
<img width="677" height="208" alt="after"
src="https://github.com/user-attachments/assets/5e4340d8-c14f-4128-914c-032af3df109e"
/>
I believe this was regressed in #7970/#7971 where an `@import` of
`ansi-dark.scss` nested in a `[data-theme='dark']` selector was changed
to an unconditional `@use`, overriding the colours specified for the
default theme.
Add Claude Explain feature for AI-powered code explanations
This PR introduces Claude Explain, a new feature that provides AI-powered explanations of compiler output directly within Compiler Explorer.
Key features:
Claude Explain functionality:
- New explain view pane
- Explains compiler output with full context of source code and compilation output
- Configurable audience level and explanation type
- Response caching to improve performance and reduce API calls
- Usage statistics display showing requests used and token counts
User experience:
- Consent flow on first use explaining data handling and privacy
- AI disclaimer banner warning about potential LLM inaccuracies
- Respects "no-ai" directive in source code for users who don't want AI processing
Privacy and security:
- Data sent to Anthropic's Claude API as documented in privacy policy
- No data used for model training
- Clear consent required before first use
- Support for opting out via "no-ai" directive
The feature is marked as beta and can be enabled via configuration.
Co-authored-by: Claude <noreply@anthropic.com>
## Summary
This PR completes Phase 2 of the SCSS migration to prepare for Dart Sass
3.0.0 compatibility. This phase focused on converting the complex
conditional theme system from deprecated `@import` statements to modern
`@use` statements.
## What Changed
### 🎯 Major Achievements
- **Eliminated 43+ SCSS deprecation warnings** (down from 45+ to only 2
remaining)
- **96% reduction** in deprecation warnings
- **Converted all SCSS-to-SCSS imports** from `@import` to `@use`
- **Modernized all color functions**: `lighten()`, `darken()`,
`adjust-color()`, `transparentize()`, `opacify()` → `color.scale()` and
`color.adjust()`
- **Implemented CSS custom properties** for theme variable sharing
- **Fixed theme isolation** - themes now properly scope their styles
### 🔧 Technical Changes
- Added `@use` statements for all theme files at top of `explorer.scss`
- Wrapped all theme file contents in `html[data-theme='...']` selectors
- Added CSS custom properties (`:root { --lighter: #{$lighter}; }`) for
theme variables
- Scoped custom golden-layout themes within their respective theme
selectors
- Removed all conditional `@import` statements for SCSS files
### 📁 Files Modified
- `static/styles/explorer.scss` - Added theme `@use` statements, removed
conditional imports
- `static/styles/themes/pink-theme.scss` - Scoped all styles, added CSS
custom properties
- `static/styles/themes/one-dark-theme.scss` - Scoped all styles, added
CSS custom properties
- `static/styles/themes/dark-theme.scss` - Scoped all styles
- `static/styles/themes/default-theme.scss` - Scoped all styles
- `static/styles/themes/custom-golden-layout-themes/pink.scss` - Scoped
to pink theme
- `static/styles/themes/custom-golden-layout-themes/one-dark.scss` -
Scoped to one-dark theme
## Remaining Issues (Phase 3)
⚠️ **2 deprecation warnings remain** - these will eventually break in
Dart Sass 3.0.0:
```
Line 1161: @import '~golden-layout/src/css/goldenlayout-light-theme';
Line 1168: @import '~golden-layout/src/css/goldenlayout-dark-theme';
```
These are external CSS imports from the golden-layout library that
cannot be converted to `@use` because:
1. They're CSS files, not SCSS files
2. They use webpack's `~` syntax for node_modules resolution
3. They're conditionally imported based on theme
**Phase 3 will need to address these** by either:
- Converting to regular CSS `@import` at top level
- Using webpack's CSS importing mechanism
- Including CSS files directly in HTML
- Finding alternative golden-layout integration approach
## Testing
- ✅ Webpack build succeeds with only 2 expected warnings
- ✅ Visual testing confirms themes work correctly
- ✅ Pink theme now shows proper light golden-layout theme (was showing
dark before)
- ✅ All theme styles properly isolated - no global style conflicts
- ✅ CSS custom properties working for theme variables
## Build Output
Current warnings (only external CSS imports remain):
```
WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0
Line 1161: @import '~golden-layout/src/css/goldenlayout-light-theme';
Line 1168: @import '~golden-layout/src/css/goldenlayout-dark-theme';
```
All other webpack warnings are performance-related (bundle sizes), not
SCSS deprecations.
## Migration Progress
- ✅ **Phase 1**: Basic color function and simple import conversions
(merged)
- ✅ **Phase 2**: Complex conditional theme system conversion (this PR)
- 🔄 **Phase 3**: External CSS import resolution (future work)
This PR makes Compiler Explorer's SCSS mostly compatible with Dart Sass
3.0.0, with only 2 external library imports remaining to be addressed.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
---------
Co-authored-by: Claude <noreply@anthropic.com>
## Summary
**Phase 1 of systematic SCSS modernization** to prepare for Dart Sass
3.0.0 compatibility. This PR eliminates **all deprecated color function
warnings** and converts straightforward `@import` statements to modern
`@use` syntax.
## What This PR Accomplishes
### ✅ **All Color Function Deprecations Eliminated** (11 instances)
- `adjust-color()` → `color.adjust()` (5 instances in `colours.scss`)
- `lighten()` → `color.scale($lightness: +%)` (2 instances in
`dark-theme.scss`)
- `darken()` → `color.scale($lightness: -%)` (4 instances across themes)
- Added `@use 'sass:color'` imports to all theme files
### ✅ **@import to @use Conversion** (4 instances)
- Internal SCSS-to-SCSS imports converted to modern `@use` syntax
- `ansi-dark.scss` imports in theme files
- Custom golden layout theme imports
- All `@use` statements properly moved to top of files per SCSS
requirements
### ✅ **Zero Visual Changes**
- All themes render identically to before
- Extensive testing across all 4 themes (default, dark, pink, one-dark)
- Build process unchanged, functionality preserved
## Technical Approach
**5 incremental commits** with systematic validation at each step:
1. Add `@use 'sass:color'` imports (preparation)
2. Convert `colours.scss` color functions
3. Convert `dark-theme.scss` color functions
4. Convert remaining theme color functions
5. Convert internal SCSS `@import` to `@use`
Each commit was individually tested for build success and visual
consistency.
## What This PR Does NOT Include
This is **Phase 1 only** - the following complex migrations are
intentionally deferred to **Phase 2**:
### 🔄 **Remaining for Phase 2: Architectural Changes**
- **Complex conditional theme system** in `explorer.scss` (lines
1157-1180)
- Currently uses HTML attribute-based conditional `@import` statements
- Requires architectural redesign (CSS variables or separate entry
points)
- **CSS imports from node_modules** (FontAwesome, Golden Layout)
- Kept as `@import` due to webpack compatibility requirements
- **Theme switching mechanism** updates if needed
### 📊 **Migration Progress**
- ✅ **Phase 1**: Color functions + simple imports (this PR)
- 🔄 **Phase 2**: Conditional theme system redesign
- 🔄 **Phase 3**: Final cleanup and optimization
## Deprecation Warning Reduction
**Before this PR**: 45+ deprecation warnings
**After this PR**: ~15 deprecation warnings (only complex `@import`
statements remain)
All remaining warnings are the challenging conditional imports that
require Phase 2 architectural work.
## Testing
- ✅ Build succeeds: `npm run webpack`, `npm run ts-check`, `npm run
lint`
- ✅ All themes render correctly: default, dark, pink, one-dark
- ✅ No visual regressions or functional changes
- ✅ Theme switching works identically
- ✅ Form controls, scrollbars, and all UI elements maintain proper
styling
## Benefits
1. **Future-proofing**: Ready for Dart Sass 3.0.0 color function changes
2. **Maintainability**: Modern, namespaced color functions are clearer
3. **Performance**: Modern `@use` system loads modules once vs `@import`
duplication
4. **Incremental approach**: Safe, testable changes with easy rollback
if needed
## Follow-up Work
This establishes the foundation for **Phase 2**, which will tackle the
complex conditional theme system. The architectural decisions for Phase
2 can now be made independently without blocking this foundational
modernization.
Closes part of #7112🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
---------
Co-authored-by: Claude <noreply@anthropic.com>
Fixed the SCSS deprecation warnings in three themes - default, one-dark,
and pink.
- Replaced deprecated lighten() and darken() functions with
color.adjust()
- Add @use 'sass:color' imports to all theme files
- Add standard background-clip property alongside
-webkit-background-clip for CSS compatibility
- Fixes the warnings for the files mentioned in #7112: 45 SCSS
deprecation warnings
I tried the automatic migrator mentioned in #7112 and here's how it
went:
What worked perfectly:
Color function migration: npx sass-migrator color successfully converted
all deprecated color functions:
lighten($color, 10%) → color.adjust($color, $lightness: 10%)
darken($color, 15%) → color.adjust($color, $lightness: -15%)
Individual theme file migration: npx sass-migrator module worked well
for standalone theme files like:
static/styles/themes/default-theme.scss
static/styles/themes/pink-theme.scss
static/styles/themes/one-dark-theme.scss
Automatic @use imports: The migrator correctly added @use 'sass:color';
imports at the top of files
However, the migrator couldn't handle:
Complex nested import structures: The conditional theme loading system
in static/styles/explorer.scss was too complex for automatic migration.
and Conditional @import statements in explorer.scss: The migrator failed
on lines like: &[data-theme='pink'] {
@import 'themes/pink-theme';
}
Therefore the migrator can be used in conjunction with manual editing of
files.
Before #7797, elements such as “Toggle full version output” in the
compiler version popup or the share buttons (“Short Link” etc.) would
change the cursor to a pointer on hover (like normal links do), but this
was lost when they were switched to use `link-primary`.
This PR restores the previous behaviour.
## Summary
Fixes issue #7684 where dropdown menus displayed two arrows instead of
one, particularly visible in light theme.
## Root Cause
The double arrows were caused by conflicts between:
1. **TomSelect's Bootstrap 5 theme** - provides automatic dropdown
arrows via `background-image`
2. **Custom legacy CSS** - was adding duplicate arrows using `::after`
pseudo-elements
3. **Bootstrap 4 leftovers** - manual `<b class="caret">` elements in
templates
## Changes
- **Removed conflicting custom TomSelect arrow CSS** from
`explorer.scss`
- **Removed leftover `#[b.caret]` element** from font-size dropdown
template
- **Fixed theme background properties** - changed `background` to
`background-color` to preserve TomSelect's arrow images
- **Added reusable SCSS function** `dropdown-arrow-svg()` for generating
themed dropdown arrows
- **Updated dark themes** to override arrow colors using TomSelect's
exact CSS selector for precision
## Test Plan
- [x] Verify all dropdown menus show only one arrow in default/light
theme
- [x] Test dropdown arrows are visible and correctly colored in all
themes:
- [x] Default theme: dark gray arrow
- [x] Pink theme: dark gray arrow
- [x] Dark theme: light gray arrow
- [x] One-dark theme: medium gray arrow
- [x] Confirm dropdown functionality works correctly across all themes
- [x] Check that font-size dropdown works properly without manual caret
element
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-authored-by: Claude <noreply@anthropic.com>
This PR completes the migration from Bootstrap 4 to Bootstrap 5.3.5
following the plan outlined in
[docs/Bootstrap5Migration.md](https://github.com/compiler-explorer/compiler-explorer/blob/mg/bootstrap5/docs/Bootstrap5Migration.md).
## Migration Process
We followed a phased approach as documented in the migration plan:
1. **Phase 1: Dependency Updates and Basic Setup**
- Updated Bootstrap from 4.6.2 to 5.3.5
- Added @popperjs/core dependency (replacing Popper.js)
- Updated Tom Select theme from bootstrap4 to bootstrap5
2. **Phase 2: Global CSS Class Migration**
- Updated directional utility classes (ml/mr → ms/me)
- Updated floating utility classes (float-left/right → float-start/end)
- Updated text alignment classes (text-left/right → text-start/end)
3. **Phase 3: HTML Attribute Updates**
- Updated data attributes to use Bootstrap 5 prefixes (data-bs-toggle,
data-bs-target, etc.)
- Fixed tab navigation issues
4. **Phase 4: JavaScript API Compatibility Layer**
- Created bootstrap-utils.ts compatibility layer
- Updated component initialization for modals, dropdowns, popovers, etc.
5. **Phase 5: Component Migration**
- Updated and tested specific components (modals, dropdowns, toasts,
etc.)
- Fixed styling issues in cards and button groups
6. **Phase 6: Form System Updates**
- Updated form control classes to Bootstrap 5 standards
- Updated checkbox/radio markup patterns
- Simplified input groups
7. **Phase 7: Navbar Structure Updates**
- Updated navbar structure with container-fluid
- Fixed responsive behavior
8. **Phase 8: SCSS Variables and Theming**
- Added custom CSS fixes for navbar alignment
- Verified theme compatibility
9. **Phase 9: Accessibility Improvements**
- Updated sr-only to visually-hidden
- Added proper ARIA attributes
- Enhanced screen reader support
## Key Changes
- No more jQuery dependency in Bootstrap 5
- New prefix for data attributes (data-bs-*)
- Improved accessibility with ARIA attributes
- Updated positioning classes (start/end instead of left/right)
- Simplified input group structure
## Test Plan
1. **Navigation Testing**
- Verify all dropdown menus open and close properly
- Test mobile menu responsiveness
- Check tab navigation in settings dialog
2. **Component Testing**
- Verify all modals open and close correctly (settings, share,
load/save)
- Test tooltips and popovers
- Check form controls in different dialogs
3. **Layout Testing**
- Test responsiveness on different screen sizes
- Verify proper alignment of elements
- Check dark mode compatibility
4. **Specific Features to Test**
- Compiler selection and options
- Share dialog functionality
- Settings dialog
- Tree view (IDE mode)
- Font selection dropdown
5. **Browser Testing**
- Test in Chrome, Firefox, Safari
- Test in mobile browsers
## Note on Further Improvements
After this migration is stable, we could consider Phase 12: removing
jQuery dependency entirely, as Bootstrap 5 no longer requires it. This
would be a separate effort.
---------
Co-authored-by: Claude <noreply@anthropic.com>
When a new pane (such as the LLVM IR view) is opened using a button in
the “Add new...” or “Add tool...” menu, the button is disabled. This can
be confusing when the pane is not visible (e. g. when it is in a tab in
the background), because it can also be interpreted as “this is not
supported“.
This PR adds an `[already open]` to the button when it is disabled.
Fixed:
- Dropdown menu disabled color
- Dropdown menu active color
- General panel background color
- Separator line for minimap
- Output text-count color
- Remove pure white across theme
- Fix custom-select in popout
Adds a new theme based on the One Dark theme from the Atom text editor.
Adds a new line highlighting theme "Soft Dark Rainbow" that works better
with the One Dark theme.
This adds a Racket optimisation pipeline view by reusing the existing
LLVM-focused optimisation pipeline UI. A Racket-specific pass parser
translates its output into passes for the UI to present.
This new Racket optimisation pipeline view is currently only enabled for
Racket nightly, as it depends on [recent
changes](https://github.com/racket/racket/pull/4842) to Racket's
compiler output to function.
This also extends the opt pipeline view to allow customising the
function selector label as well as the options and filters for each
compiler where needed.
---------
Co-authored-by: Matt Godbolt <matt@godbolt.org>
This prepares for future work that will reuse the opt pipeline view
outside of the LLVM ecosystem by renaming related components to remove
the LLVM prefix.
The pass dumper keep its LLVM prefix, as it is assumed this part is
likely to be customised for each compiler ecosystem.
The historical component name has been preserved in the component list
as an alias to keep old links working.
This PR refactors some common utilities out of lib/ and into shared/ and
eliminates some use of underscore.js, as well as general type
improvements done along the way.
