Convert list.scss to a CSS file

[jholland-livefront]

🎟️ Tracking

PM-27365

📔 Objective

This change migrates list.scss to list.css. I removed the SASS specific portions and expanded some of the selectors to remove SASS style nesting.

⏰ Reminders before review

• Contributor guidelines followed
• All formatters and local linters executed and passed
• Written new unit and / or integration tests where applicable
• Protected functional changes with optionality (feature flags)
• Used internationalization (i18n) for all UI strings
• CI builds passed
• Communicated to DevOps any deployment requirements
• Updated any necessary documentation (Confluence, contributing docs) or informed the documentation team

🦮 Reviewer guidelines

• 👍 (:+1:) or similar for great changes
• 📝 (:memo:) or ℹ️ (:information_source:) for notes or general info
• ❓ (:question:) for questions
• 🤔 (:thinking:) or 💭 (:thought_balloon:) for more open inquiry that's not quite a confirmed issue and could potentially benefit from discussion
• 🎨 (:art:) for suggestions / improvements
• ❌ (:x:) or ⚠️ (:warning:) for more significant problems or concerns needing attention
• 🌱 (:seedling:) or ♻️ (:recycle:) for future improvements or indications of technical debt
• ⛏ (:pick:) for minor or nitpick changes

[claude[bot]]

Claude finished @jholland-livefront's task in 2m 46s —— View job

---

Code Review Complete

I've reviewed this SASS to CSS migration and identified several issues that need to be addressed:

Critical Issues (Breaking)

1. Syntax Error in variables.scss (Line 1)

• Missing semicolon between @import statement and variable declaration
• This will cause SASS compilation to fail
• Fix: Add semicolon after @import "./variables-export.css";

2. Undefined Variable Reference (Line 48)

• References $focus-outline-color which no longer exists in scope
• Should be $focus-outline-color-light
• This will cause compilation errors

Important Issues (Visual Regressions)

3. Missing .bwi:not(.cipher-icon) Selector

• Original SCSS had nested rules for .bwi elements that aren't cipher icons
• These selectors were lost during the CSS conversion
• May affect theming of certain icon elements

4. Scrollbar Track Color Not Applying (Webkit)

• Dan's finding about scrollbar track color is correct
• Root cause: Line 136 sets webkit scrollbar track to transparent, overriding the scrollbar-color property
• Fix: Change background-color: transparent to background-color: var(--autofill-scrollbar-track-color) on line 136

Recommendation

These issues need to be fixed before merging, particularly the two critical SASS compilation errors. The visual issues should also be addressed to ensure no regressions in the UI.

---

[github-actions[bot]]

Checkmarx One – Scan Summary & Details – 0ba34c3d-21ff-4bcf-a487-6ff54d89ff47

Great job! No new security vulnerabilities introduced in this pull request

[codecov[bot]]

Codecov Report

:x: Patch coverage is 0% with 1 line in your changes missing coverage. Please review. :white_check_mark: Project coverage is 42.11%. Comparing base (3735f1c) to head (ddaca54). :warning: Report is 122 commits behind head on main. :white_check_mark: All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
.../pages/list/bootstrap-autofill-inline-menu-list.ts	0.00%	1 Missing :warning:

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #17884      +/-   ##
==========================================
+ Coverage   41.71%   42.11%   +0.39%     
==========================================
  Files        3571     3594      +23     
  Lines      103928   104317     +389     
  Branches    15644    15742      +98     
==========================================
+ Hits        43355    43929     +574     
+ Misses      58734    58521     -213     
- Partials     1839     1867      +28     

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

:rocket: New features to boost your workflow:

• :package: JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[bw-ghapp[bot]]

Changes in this PR impact the Autofill experience of the browser client

BIT has tested the core experience with these changes and the feature flag configuration used by vault.bitwarden.com.

✅ Fortunately, these BIT tests have passed! 🎉

[bw-ghapp[bot]]

Changes in this PR impact the Autofill experience of the browser client

BIT has tested the core experience with these changes and all feature flags disabled.

✅ Fortunately, these BIT tests have passed! 🎉

[Hinton]

FYI there is a theme.css in libs/components/src/ that defines fonts which might be nice to use? And is probably a good place to share variables with the regular design system for colors. We also support postcss with postcss-nested, so nested statements should still work if you prefer that.