Conversation
* v2 draft * Build v2 search results page * Implement v2 search results page * Clean up v2 course UI * Update review and card displays * Align course instructor v2 parity * Implement v2 UI cleanup plan * Revamp schedule builder V2 plan * Fix section display and scroll * Fix section display and scrolling * Fix sections scroll and messaging * Fix scheduling and messaging UI * Standardize message display sitewide * Update v2 layout and ads * remove v2 * remove old * lint and fixes * Fix review success message * fixes * Fix modal focus and switching
📝 WalkthroughWalkthroughAdds a mobile nav toggle (template click handler + CSS breakpoint rule) and global click-outside close; introduces design tokens and new component styles (ads, misc) and a centralized Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 1 | ❌ 2❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (1 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@tcf_website/templates/site/components/_header.html`:
- Line 119: Update the mobile menu toggle so it updates ARIA state instead of a
static label: locate the button with id "mobileMenuTrigger" (currently using
onclick to toggle the ".header" classList) and, when toggling, set
aria-expanded="true" when the ".header" has the "is-mobile-open" class and
"false" when it does not; also update aria-label to "Open menu" / "Close menu"
accordingly. Prefer wiring this behavior via an event listener (replacing the
inline onclick) so the code that toggles classList.toggle('is-mobile-open') also
reads the element state and sets aria-expanded and aria-label on the button.
There was a problem hiding this comment.
Actionable comments posted: 6
🤖 Fix all issues with AI agents
In `@tcf_website/static/css/site/components/ads.css`:
- Around line 21-31: Replace the legacy media-feature range notation using
(min-width: Npx) with the modern stylelint-preferred media-feature range
notation (width >= Npx) across this CSS file; specifically update each `@media`
rule that currently reads like `@media` (min-width: 640px) and `@media` (min-width:
1024px) to `@media` (width >= 640px) and `@media` (width >= 1024px) respectively,
and make the same change for the other three occurrences referenced in the
review so selectors such as .leaderboard-ad__inner (and the other responsive
blocks) use the new notation.
In `@tcf_website/static/css/site/components/misc.css`:
- Around line 160-173: Add dark-theme overrides for .badge--success,
.badge--warning, and .badge--danger following the same pattern used for
.badge--primary and .badge--accent (the [data-theme="dark"] blocks) so the
semi-transparent backgrounds remain readable in dark mode; specifically add
[data-theme="dark"] rules targeting .badge--success, .badge--warning, and
.badge--danger to adjust their background-color (use a darker/less transparent
rgba variant) and swap the color token from --color-*-600 to a lighter token
(e.g., --color-*-300/200 or another higher-contrast token) so text meets
contrast in dark theme.
- Around line 140-173: Convert all rgba(...) color functions to the modern
rgb(...) with space-separated components and percentage alpha (e.g. rgba(59,
130, 246, 0.2) -> rgb(59 130 246 / 20%)) across the badge and alert rules;
specifically update [data-theme="dark"] .badge--primary and [data-theme="dark"]
.badge--accent plus the rgba usages in .badge--success, .badge--warning and
.badge--danger (and the alert rules around lines 288–305) to use rgb(r g b / a%)
notation so it conforms to the Stylelint rules color-function-alias-notation,
color-function-notation and alpha-value-notation.
- Around line 292-305: Add dark-theme overrides for .alert--success,
.alert--warning, and .alert--danger similar to the existing .alert--info
dark-mode rules: when the dark theme is active, replace the background-color and
color that currently use rgba(...) and var(--color-*-600) with appropriate
darker-mode tokens (or adjust to -400/-200 tokens) to ensure sufficient
contrast; update the selectors that target dark mode the same way alert--info
does and verify the chosen var(--color-*-600) tokens meet contrast requirements
in dark mode, swapping to different tokens if they do not.
- Around line 326-336: Switch the old min-width media-feature notation to the
modern range syntax: replace `@media` (min-width: 640px) with `@media` (width >=
640px) and `@media` (min-width: 1024px) with `@media` (width >= 1024px) for the
.flash-messages__inner rules so Stylelint’s media-feature-range-notation rule is
satisfied.
In `@tcf_website/static/css/site/main.css`:
- Around line 8-25: The `@import` rules in main.css currently use the url(...)
notation which fails the Stylelint import-notation rule; update each import
(e.g., the lines importing './tokens.css', './reset.css', './base.css',
'./utilities.css' and the component imports like './components/button.css',
'./components/input.css', './components/modal.css', './components/header.css',
'./components/footer.css', './components/search.css', './components/rating.css',
'./components/dropdown.css', './components/search_bar.css',
'./components/misc.css', './components/calendar.css', './components/ads.css') to
use string notation by replacing `@import` url('...') with `@import` '...'.
| @media (min-width: 640px) { | ||
| .leaderboard-ad__inner { | ||
| padding: 0 var(--space-6); | ||
| } | ||
| } | ||
|
|
||
| @media (min-width: 1024px) { | ||
| .leaderboard-ad__inner { | ||
| padding: 0 var(--space-8); | ||
| } | ||
| } |
There was a problem hiding this comment.
Use modern media-feature range notation per Stylelint config.
Stylelint expects @media (width >= 640px) instead of @media (min-width: 640px). This applies to all five media queries in this file (lines 21, 27, 59, 167, 173).
♻️ Proposed fix (showing pattern for all occurrences)
-@media (min-width: 640px) {
+@media (width >= 640px) {-@media (min-width: 1024px) {
+@media (width >= 1024px) {-@media (min-width: 1760px) {
+@media (width >= 1760px) {Also applies to: 59-93, 167-177
🧰 Tools
🪛 Stylelint (17.2.0)
[error] 21-21: Expected "context" media feature range notation (media-feature-range-notation)
(media-feature-range-notation)
[error] 27-27: Expected "context" media feature range notation (media-feature-range-notation)
(media-feature-range-notation)
[error] 22-22: Expected class selector ".leaderboard-ad__inner" to be kebab-case (selector-class-pattern)
(selector-class-pattern)
[error] 28-28: Expected class selector ".leaderboard-ad__inner" to be kebab-case (selector-class-pattern)
(selector-class-pattern)
🤖 Prompt for AI Agents
In `@tcf_website/static/css/site/components/ads.css` around lines 21 - 31, Replace
the legacy media-feature range notation using (min-width: Npx) with the modern
stylelint-preferred media-feature range notation (width >= Npx) across this CSS
file; specifically update each `@media` rule that currently reads like `@media`
(min-width: 640px) and `@media` (min-width: 1024px) to `@media` (width >= 640px) and
`@media` (width >= 1024px) respectively, and make the same change for the other
three occurrences referenced in the review so selectors such as
.leaderboard-ad__inner (and the other responsive blocks) use the new notation.
| .badge--primary { | ||
| background-color: var(--color-primary-100); | ||
| color: var(--color-primary-700); | ||
| } | ||
|
|
||
| [data-theme="dark"] .badge--primary { | ||
| background-color: rgba(59, 130, 246, 0.2); | ||
| color: var(--color-primary-400); | ||
| } | ||
|
|
||
| .badge--accent { | ||
| background-color: var(--color-accent-100); | ||
| color: var(--color-accent-700); | ||
| } | ||
|
|
||
| [data-theme="dark"] .badge--accent { | ||
| background-color: rgba(249, 115, 22, 0.2); | ||
| color: var(--color-accent-400); | ||
| } | ||
|
|
||
| .badge--success { | ||
| background-color: rgba(34, 197, 94, 0.15); | ||
| color: var(--color-success-600); | ||
| } | ||
|
|
||
| .badge--warning { | ||
| background-color: rgba(234, 179, 8, 0.15); | ||
| color: var(--color-warning-600); | ||
| } | ||
|
|
||
| .badge--danger { | ||
| background-color: rgba(239, 68, 68, 0.15); | ||
| color: var(--color-danger-600); | ||
| } |
There was a problem hiding this comment.
Use modern rgb() notation with percentage alpha per Stylelint config.
All rgba(r, g, b, a) calls should use modern rgb(r g b / a%) notation per your Stylelint rules (color-function-alias-notation, color-function-notation, alpha-value-notation). This affects badges (lines 146, 156, 161, 166, 171) and alerts (lines 288, 293, 298, 303).
♻️ Example fix pattern
- background-color: rgba(59, 130, 246, 0.2);
+ background-color: rgb(59 130 246 / 20%);- background-color: rgba(34, 197, 94, 0.15);
+ background-color: rgb(34 197 94 / 15%);- background-color: rgba(234, 179, 8, 0.1);
+ background-color: rgb(234 179 8 / 10%);- background-color: rgba(239, 68, 68, 0.1);
+ background-color: rgb(239 68 68 / 10%);Apply the same transformation to all 9 occurrences.
Also applies to: 282-305
🧰 Tools
🪛 Stylelint (17.2.0)
[error] 146-146: Expected "0.2" to be "20%" (alpha-value-notation)
(alpha-value-notation)
[error] 156-156: Expected "0.2" to be "20%" (alpha-value-notation)
(alpha-value-notation)
[error] 161-161: Expected "0.15" to be "15%" (alpha-value-notation)
(alpha-value-notation)
[error] 166-166: Expected "0.15" to be "15%" (alpha-value-notation)
(alpha-value-notation)
[error] 171-171: Expected "0.15" to be "15%" (alpha-value-notation)
(alpha-value-notation)
[error] 146-146: Expected "rgba" to be "rgb" (color-function-alias-notation)
(color-function-alias-notation)
[error] 156-156: Expected "rgba" to be "rgb" (color-function-alias-notation)
(color-function-alias-notation)
[error] 161-161: Expected "rgba" to be "rgb" (color-function-alias-notation)
(color-function-alias-notation)
[error] 166-166: Expected "rgba" to be "rgb" (color-function-alias-notation)
(color-function-alias-notation)
[error] 171-171: Expected "rgba" to be "rgb" (color-function-alias-notation)
(color-function-alias-notation)
[error] 146-146: Expected modern color-function notation (color-function-notation)
(color-function-notation)
[error] 156-156: Expected modern color-function notation (color-function-notation)
(color-function-notation)
[error] 161-161: Expected modern color-function notation (color-function-notation)
(color-function-notation)
[error] 166-166: Expected modern color-function notation (color-function-notation)
(color-function-notation)
[error] 171-171: Expected modern color-function notation (color-function-notation)
(color-function-notation)
[error] 140-140: Expected class selector ".badge--primary" to be kebab-case (selector-class-pattern)
(selector-class-pattern)
[error] 145-145: Expected class selector ".badge--primary" to be kebab-case (selector-class-pattern)
(selector-class-pattern)
[error] 150-150: Expected class selector ".badge--accent" to be kebab-case (selector-class-pattern)
(selector-class-pattern)
[error] 155-155: Expected class selector ".badge--accent" to be kebab-case (selector-class-pattern)
(selector-class-pattern)
[error] 160-160: Expected class selector ".badge--success" to be kebab-case (selector-class-pattern)
(selector-class-pattern)
[error] 165-165: Expected class selector ".badge--warning" to be kebab-case (selector-class-pattern)
(selector-class-pattern)
[error] 170-170: Expected class selector ".badge--danger" to be kebab-case (selector-class-pattern)
(selector-class-pattern)
🤖 Prompt for AI Agents
In `@tcf_website/static/css/site/components/misc.css` around lines 140 - 173,
Convert all rgba(...) color functions to the modern rgb(...) with
space-separated components and percentage alpha (e.g. rgba(59, 130, 246, 0.2) ->
rgb(59 130 246 / 20%)) across the badge and alert rules; specifically update
[data-theme="dark"] .badge--primary and [data-theme="dark"] .badge--accent plus
the rgba usages in .badge--success, .badge--warning and .badge--danger (and the
alert rules around lines 288–305) to use rgb(r g b / a%) notation so it conforms
to the Stylelint rules color-function-alias-notation, color-function-notation
and alpha-value-notation.
| .badge--success { | ||
| background-color: rgba(34, 197, 94, 0.15); | ||
| color: var(--color-success-600); | ||
| } | ||
|
|
||
| .badge--warning { | ||
| background-color: rgba(234, 179, 8, 0.15); | ||
| color: var(--color-warning-600); | ||
| } | ||
|
|
||
| .badge--danger { | ||
| background-color: rgba(239, 68, 68, 0.15); | ||
| color: var(--color-danger-600); | ||
| } |
There was a problem hiding this comment.
Missing dark-theme overrides for badge--success, badge--warning, and badge--danger.
badge--primary and badge--accent have [data-theme="dark"] overrides (lines 145–148, 155–158), but the success/warning/danger variants do not. Their -600 text color tokens may not read well against the semi-transparent backgrounds in dark mode.
🧰 Tools
🪛 Stylelint (17.2.0)
[error] 161-161: Expected "0.15" to be "15%" (alpha-value-notation)
(alpha-value-notation)
[error] 166-166: Expected "0.15" to be "15%" (alpha-value-notation)
(alpha-value-notation)
[error] 171-171: Expected "0.15" to be "15%" (alpha-value-notation)
(alpha-value-notation)
[error] 161-161: Expected "rgba" to be "rgb" (color-function-alias-notation)
(color-function-alias-notation)
[error] 166-166: Expected "rgba" to be "rgb" (color-function-alias-notation)
(color-function-alias-notation)
[error] 171-171: Expected "rgba" to be "rgb" (color-function-alias-notation)
(color-function-alias-notation)
[error] 161-161: Expected modern color-function notation (color-function-notation)
(color-function-notation)
[error] 166-166: Expected modern color-function notation (color-function-notation)
(color-function-notation)
[error] 171-171: Expected modern color-function notation (color-function-notation)
(color-function-notation)
[error] 160-160: Expected class selector ".badge--success" to be kebab-case (selector-class-pattern)
(selector-class-pattern)
[error] 165-165: Expected class selector ".badge--warning" to be kebab-case (selector-class-pattern)
(selector-class-pattern)
[error] 170-170: Expected class selector ".badge--danger" to be kebab-case (selector-class-pattern)
(selector-class-pattern)
🤖 Prompt for AI Agents
In `@tcf_website/static/css/site/components/misc.css` around lines 160 - 173, Add
dark-theme overrides for .badge--success, .badge--warning, and .badge--danger
following the same pattern used for .badge--primary and .badge--accent (the
[data-theme="dark"] blocks) so the semi-transparent backgrounds remain readable
in dark mode; specifically add [data-theme="dark"] rules targeting
.badge--success, .badge--warning, and .badge--danger to adjust their
background-color (use a darker/less transparent rgba variant) and swap the color
token from --color-*-600 to a lighter token (e.g., --color-*-300/200 or another
higher-contrast token) so text meets contrast in dark theme.
| .alert--success { | ||
| background-color: rgba(34, 197, 94, 0.1); | ||
| color: var(--color-success-600); | ||
| } | ||
|
|
||
| .alert--warning { | ||
| background-color: rgba(234, 179, 8, 0.1); | ||
| color: var(--color-warning-600); | ||
| } | ||
|
|
||
| .alert--danger { | ||
| background-color: rgba(239, 68, 68, 0.1); | ||
| color: var(--color-danger-600); | ||
| } |
There was a problem hiding this comment.
Missing dark-theme overrides for alert--success, alert--warning, and alert--danger.
Same issue as the badges: alert--info has a dark-theme override (lines 287–290), but the other three alert variants don't. Verify that -600 color tokens provide sufficient contrast in dark mode, or add overrides as done for alert--info.
🧰 Tools
🪛 Stylelint (17.2.0)
[error] 293-293: Expected "0.1" to be "10%" (alpha-value-notation)
(alpha-value-notation)
[error] 298-298: Expected "0.1" to be "10%" (alpha-value-notation)
(alpha-value-notation)
[error] 303-303: Expected "0.1" to be "10%" (alpha-value-notation)
(alpha-value-notation)
[error] 293-293: Expected "rgba" to be "rgb" (color-function-alias-notation)
(color-function-alias-notation)
[error] 298-298: Expected "rgba" to be "rgb" (color-function-alias-notation)
(color-function-alias-notation)
[error] 303-303: Expected "rgba" to be "rgb" (color-function-alias-notation)
(color-function-alias-notation)
[error] 293-293: Expected modern color-function notation (color-function-notation)
(color-function-notation)
[error] 298-298: Expected modern color-function notation (color-function-notation)
(color-function-notation)
[error] 303-303: Expected modern color-function notation (color-function-notation)
(color-function-notation)
[error] 292-292: Expected class selector ".alert--success" to be kebab-case (selector-class-pattern)
(selector-class-pattern)
[error] 297-297: Expected class selector ".alert--warning" to be kebab-case (selector-class-pattern)
(selector-class-pattern)
[error] 302-302: Expected class selector ".alert--danger" to be kebab-case (selector-class-pattern)
(selector-class-pattern)
🤖 Prompt for AI Agents
In `@tcf_website/static/css/site/components/misc.css` around lines 292 - 305, Add
dark-theme overrides for .alert--success, .alert--warning, and .alert--danger
similar to the existing .alert--info dark-mode rules: when the dark theme is
active, replace the background-color and color that currently use rgba(...) and
var(--color-*-600) with appropriate darker-mode tokens (or adjust to -400/-200
tokens) to ensure sufficient contrast; update the selectors that target dark
mode the same way alert--info does and verify the chosen var(--color-*-600)
tokens meet contrast requirements in dark mode, swapping to different tokens if
they do not.
| @media (min-width: 640px) { | ||
| .flash-messages__inner { | ||
| padding: 0 var(--space-6); | ||
| } | ||
| } | ||
|
|
||
| @media (min-width: 1024px) { | ||
| .flash-messages__inner { | ||
| padding: 0 var(--space-8); | ||
| } | ||
| } |
There was a problem hiding this comment.
Use modern media-feature range notation.
Same Stylelint media-feature-range-notation issue as the other files.
-@media (min-width: 640px) {
+@media (width >= 640px) {-@media (min-width: 1024px) {
+@media (width >= 1024px) {📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| @media (min-width: 640px) { | |
| .flash-messages__inner { | |
| padding: 0 var(--space-6); | |
| } | |
| } | |
| @media (min-width: 1024px) { | |
| .flash-messages__inner { | |
| padding: 0 var(--space-8); | |
| } | |
| } | |
| `@media` (width >= 640px) { | |
| .flash-messages__inner { | |
| padding: 0 var(--space-6); | |
| } | |
| } | |
| `@media` (width >= 1024px) { | |
| .flash-messages__inner { | |
| padding: 0 var(--space-8); | |
| } | |
| } |
🧰 Tools
🪛 Stylelint (17.2.0)
[error] 326-326: Expected "context" media feature range notation (media-feature-range-notation)
(media-feature-range-notation)
[error] 332-332: Expected "context" media feature range notation (media-feature-range-notation)
(media-feature-range-notation)
[error] 327-327: Expected class selector ".flash-messages__inner" to be kebab-case (selector-class-pattern)
(selector-class-pattern)
[error] 333-333: Expected class selector ".flash-messages__inner" to be kebab-case (selector-class-pattern)
(selector-class-pattern)
🤖 Prompt for AI Agents
In `@tcf_website/static/css/site/components/misc.css` around lines 326 - 336,
Switch the old min-width media-feature notation to the modern range syntax:
replace `@media` (min-width: 640px) with `@media` (width >= 640px) and `@media`
(min-width: 1024px) with `@media` (width >= 1024px) for the .flash-messages__inner
rules so Stylelint’s media-feature-range-notation rule is satisfied.
| @import url('./tokens.css'); | ||
| @import url('./reset.css'); | ||
| @import url('./base.css'); | ||
| @import url('./utilities.css'); | ||
|
|
||
| /* Components */ | ||
| @import url('./components/button.css'); | ||
| @import url('./components/input.css'); | ||
| @import url('./components/modal.css'); | ||
| @import url('./components/header.css'); | ||
| @import url('./components/footer.css'); | ||
| @import url('./components/search.css'); | ||
| @import url('./components/rating.css'); | ||
| @import url('./components/dropdown.css'); | ||
| @import url('./components/search_bar.css'); | ||
| @import url('./components/misc.css'); | ||
| @import url('./components/calendar.css'); | ||
| @import url('./components/ads.css'); |
There was a problem hiding this comment.
Fix @import notation to satisfy Stylelint import-notation rule.
All 16 imports use @import url('...') but your Stylelint config expects the string notation @import '...'.
♻️ Proposed fix
-@import url('./tokens.css');
-@import url('./reset.css');
-@import url('./base.css');
-@import url('./utilities.css');
+@import './tokens.css';
+@import './reset.css';
+@import './base.css';
+@import './utilities.css';
-@import url('./components/button.css');
-@import url('./components/input.css');
-@import url('./components/modal.css');
-@import url('./components/header.css');
-@import url('./components/footer.css');
-@import url('./components/search.css');
-@import url('./components/rating.css');
-@import url('./components/dropdown.css');
-@import url('./components/search_bar.css');
-@import url('./components/misc.css');
-@import url('./components/calendar.css');
-@import url('./components/ads.css');
+@import './components/button.css';
+@import './components/input.css';
+@import './components/modal.css';
+@import './components/header.css';
+@import './components/footer.css';
+@import './components/search.css';
+@import './components/rating.css';
+@import './components/dropdown.css';
+@import './components/search_bar.css';
+@import './components/misc.css';
+@import './components/calendar.css';
+@import './components/ads.css';📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| @import url('./tokens.css'); | |
| @import url('./reset.css'); | |
| @import url('./base.css'); | |
| @import url('./utilities.css'); | |
| /* Components */ | |
| @import url('./components/button.css'); | |
| @import url('./components/input.css'); | |
| @import url('./components/modal.css'); | |
| @import url('./components/header.css'); | |
| @import url('./components/footer.css'); | |
| @import url('./components/search.css'); | |
| @import url('./components/rating.css'); | |
| @import url('./components/dropdown.css'); | |
| @import url('./components/search_bar.css'); | |
| @import url('./components/misc.css'); | |
| @import url('./components/calendar.css'); | |
| @import url('./components/ads.css'); | |
| `@import` './tokens.css'; | |
| `@import` './reset.css'; | |
| `@import` './base.css'; | |
| `@import` './utilities.css'; | |
| /* Components */ | |
| `@import` './components/button.css'; | |
| `@import` './components/input.css'; | |
| `@import` './components/modal.css'; | |
| `@import` './components/header.css'; | |
| `@import` './components/footer.css'; | |
| `@import` './components/search.css'; | |
| `@import` './components/rating.css'; | |
| `@import` './components/dropdown.css'; | |
| `@import` './components/search_bar.css'; | |
| `@import` './components/misc.css'; | |
| `@import` './components/calendar.css'; | |
| `@import` './components/ads.css'; |
🧰 Tools
🪛 Stylelint (17.2.0)
[error] 8-8: Expected "url('./tokens.css')" to be "'./tokens.css'" (import-notation)
(import-notation)
[error] 9-9: Expected "url('./reset.css')" to be "'./reset.css'" (import-notation)
(import-notation)
[error] 10-10: Expected "url('./base.css')" to be "'./base.css'" (import-notation)
(import-notation)
[error] 11-11: Expected "url('./utilities.css')" to be "'./utilities.css'" (import-notation)
(import-notation)
[error] 14-14: Expected "url('./components/button.css')" to be "'./components/button.css'" (import-notation)
(import-notation)
[error] 15-15: Expected "url('./components/input.css')" to be "'./components/input.css'" (import-notation)
(import-notation)
[error] 16-16: Expected "url('./components/modal.css')" to be "'./components/modal.css'" (import-notation)
(import-notation)
[error] 17-17: Expected "url('./components/header.css')" to be "'./components/header.css'" (import-notation)
(import-notation)
[error] 18-18: Expected "url('./components/footer.css')" to be "'./components/footer.css'" (import-notation)
(import-notation)
[error] 19-19: Expected "url('./components/search.css')" to be "'./components/search.css'" (import-notation)
(import-notation)
[error] 20-20: Expected "url('./components/rating.css')" to be "'./components/rating.css'" (import-notation)
(import-notation)
[error] 21-21: Expected "url('./components/dropdown.css')" to be "'./components/dropdown.css'" (import-notation)
(import-notation)
[error] 22-22: Expected "url('./components/search_bar.css')" to be "'./components/search_bar.css'" (import-notation)
(import-notation)
[error] 23-23: Expected "url('./components/misc.css')" to be "'./components/misc.css'" (import-notation)
(import-notation)
[error] 24-24: Expected "url('./components/calendar.css')" to be "'./components/calendar.css'" (import-notation)
(import-notation)
[error] 25-25: Expected "url('./components/ads.css')" to be "'./components/ads.css'" (import-notation)
(import-notation)
🤖 Prompt for AI Agents
In `@tcf_website/static/css/site/main.css` around lines 8 - 25, The `@import` rules
in main.css currently use the url(...) notation which fails the Stylelint
import-notation rule; update each import (e.g., the lines importing
'./tokens.css', './reset.css', './base.css', './utilities.css' and the component
imports like './components/button.css', './components/input.css',
'./components/modal.css', './components/header.css', './components/footer.css',
'./components/search.css', './components/rating.css',
'./components/dropdown.css', './components/search_bar.css',
'./components/misc.css', './components/calendar.css', './components/ads.css') to
use string notation by replacing `@import` url('...') with `@import` '...'.
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 Fix all issues with AI agents
In `@tcf_website/static/css/site/tokens.css`:
- Around line 174-177: Stylelint requires percentage notation for alpha values
in rgb() shadows; update the CSS custom properties --shadow-sm, --shadow-md,
--shadow-lg, --shadow-xl (and the same variables in the [data-theme="dark"] and
`@media` fallback blocks) to use percent alpha values (e.g. replace "rgb(0 0 0 /
0.05)" with "rgb(0 0 0 / 5%)", "0.1" -> "10%", etc.) so every "rgb(... / 0.xx)"
becomes "rgb(... / xx%)".
- Around line 12-13: Update the hex values for the CSS custom properties to use
shorthand notation: in the declarations for --color-white and --color-black (in
tokens.css) replace `#ffffff` with `#fff` and `#000000` with `#000` so they comply with
the stylelint color-hex-length rule; no other changes required.
- Around line 186-189: The --ease-in-out token is incorrectly set identical to
--ease-default; update the --ease-in-out CSS custom property in tokens.css to a
proper symmetric ease-in-out curve (for example set --ease-in-out to
cubic-bezier(0.42, 0, 0.58, 1)) so it reflects a true ease-in-out timing
function rather than duplicating --ease-default.
🧹 Nitpick comments (2)
tcf_website/static/css/site/tokens.css (2)
204-232: Dark theme token overrides are fully duplicated between[data-theme="dark"]and the@mediafallback.This is a maintenance risk — any token change needs to be applied in both blocks. Consider extracting the dark overrides into a shared mixin-like pattern, or using a single selector strategy. One approach: only use the
@mediablock with:root:not([data-theme="light"])as the selector, and change the explicit toggle to setdata-theme="light"instead ofdata-theme="dark". This way the dark tokens live in one place.Also applies to: 236-264
94-95:--font-sansand--font-displayare identical.Understood from the commit message this is temporary (serif font removed). Just flagging so it doesn't get forgotten — once a display font is chosen, update
--font-display.
| --color-white: #ffffff; | ||
| --color-black: #000000; |
There was a problem hiding this comment.
Stylelint: use shorthand hex values.
Per color-hex-length rule: #ffffff → #fff, #000000 → #000.
Proposed fix
- --color-white: `#ffffff`;
- --color-black: `#000000`;
+ --color-white: `#fff`;
+ --color-black: `#000`;📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| --color-white: #ffffff; | |
| --color-black: #000000; | |
| --color-white: `#fff`; | |
| --color-black: `#000`; |
🧰 Tools
🪛 Stylelint (17.2.0)
[error] 12-12: Expected "#ffffff" to be "#fff" (color-hex-length)
(color-hex-length)
[error] 13-13: Expected "#000000" to be "#000" (color-hex-length)
(color-hex-length)
🤖 Prompt for AI Agents
In `@tcf_website/static/css/site/tokens.css` around lines 12 - 13, Update the hex
values for the CSS custom properties to use shorthand notation: in the
declarations for --color-white and --color-black (in tokens.css) replace `#ffffff`
with `#fff` and `#000000` with `#000` so they comply with the stylelint
color-hex-length rule; no other changes required.
| --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); | ||
| --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); | ||
| --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); | ||
| --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); |
There was a problem hiding this comment.
Stylelint: use percentage notation for alpha values in rgb() shadows.
Stylelint's alpha-value-notation rule requires percentage notation. This applies to all shadow definitions in :root, [data-theme="dark"], and the @media fallback.
Example fix for the :root shadows (apply same pattern to dark theme blocks)
- --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
- --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
- --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
- --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+ --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 5%);
+ --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 4px -2px rgb(0 0 0 / 10%);
+ --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -4px rgb(0 0 0 / 10%);
+ --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 10%), 0 8px 10px -6px rgb(0 0 0 / 10%);Also applies to: 228-231, 260-263
🧰 Tools
🪛 Stylelint (17.2.0)
[error] 174-174: Expected "0.05" to be "5%" (alpha-value-notation)
(alpha-value-notation)
[error] 175-175: Expected "0.1" to be "10%" (alpha-value-notation)
(alpha-value-notation)
[error] 175-175: Expected "0.1" to be "10%" (alpha-value-notation)
(alpha-value-notation)
[error] 176-176: Expected "0.1" to be "10%" (alpha-value-notation)
(alpha-value-notation)
[error] 176-176: Expected "0.1" to be "10%" (alpha-value-notation)
(alpha-value-notation)
[error] 177-177: Expected "0.1" to be "10%" (alpha-value-notation)
(alpha-value-notation)
[error] 177-177: Expected "0.1" to be "10%" (alpha-value-notation)
(alpha-value-notation)
🤖 Prompt for AI Agents
In `@tcf_website/static/css/site/tokens.css` around lines 174 - 177, Stylelint
requires percentage notation for alpha values in rgb() shadows; update the CSS
custom properties --shadow-sm, --shadow-md, --shadow-lg, --shadow-xl (and the
same variables in the [data-theme="dark"] and `@media` fallback blocks) to use
percent alpha values (e.g. replace "rgb(0 0 0 / 0.05)" with "rgb(0 0 0 / 5%)",
"0.1" -> "10%", etc.) so every "rgb(... / 0.xx)" becomes "rgb(... / xx%)".
| --ease-default: cubic-bezier(0.4, 0, 0.2, 1); | ||
| --ease-in: cubic-bezier(0.4, 0, 1, 1); | ||
| --ease-out: cubic-bezier(0, 0, 0.2, 1); | ||
| --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); |
There was a problem hiding this comment.
--ease-in-out is identical to --ease-default — likely a copy-paste error.
Both --ease-default and --ease-in-out resolve to cubic-bezier(0.4, 0, 0.2, 1). A standard ease-in-out curve is symmetric (e.g., cubic-bezier(0.42, 0, 0.58, 1)).
Proposed fix
- --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+ --ease-in-out: cubic-bezier(0.42, 0, 0.58, 1);📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| --ease-default: cubic-bezier(0.4, 0, 0.2, 1); | |
| --ease-in: cubic-bezier(0.4, 0, 1, 1); | |
| --ease-out: cubic-bezier(0, 0, 0.2, 1); | |
| --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); | |
| --ease-default: cubic-bezier(0.4, 0, 0.2, 1); | |
| --ease-in: cubic-bezier(0.4, 0, 1, 1); | |
| --ease-out: cubic-bezier(0, 0, 0.2, 1); | |
| --ease-in-out: cubic-bezier(0.42, 0, 0.58, 1); |
🧰 Tools
🪛 Stylelint (17.2.0)
[error] 186-186: Unexpected empty line before custom property (custom-property-empty-line-before)
(custom-property-empty-line-before)
🤖 Prompt for AI Agents
In `@tcf_website/static/css/site/tokens.css` around lines 186 - 189, The
--ease-in-out token is incorrectly set identical to --ease-default; update the
--ease-in-out CSS custom property in tokens.css to a proper symmetric
ease-in-out curve (for example set --ease-in-out to cubic-bezier(0.42, 0, 0.58,
1)) so it reflects a true ease-in-out timing function rather than duplicating
--ease-default.
2 participants
test
Summary by CodeRabbit
New Features
Style
Style