Tailwind 4 followup #505
Tailwind 4 followup #505
Conversation
WalkthroughThis pull request updates project dependencies and configurations. In the Changes
Possibly related PRs
Suggested reviewers
Warning Review ran into problems🔥 ProblemsGitHub Actions and Pipeline Checks: Resource not accessible by integration - https://docs.github.com/rest/actions/workflow-runs#list-workflow-runs-for-a-repository. Please grant the required permissions to the CodeRabbit GitHub App under the organization or repository settings. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro (Legacy)
⛔ Files ignored due to path filters (1)
frontend/package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (5)
frontend/package.json(1 hunks)frontend/postcss.config.js(0 hunks)frontend/src/app.css(1 hunks)frontend/tailwind.config.js(1 hunks)frontend/vite.config.ts(1 hunks)
💤 Files with no reviewable changes (1)
- frontend/postcss.config.js
🧰 Additional context used
🪛 Biome (1.9.4)
frontend/src/app.css
[error] 11-11: expected , but instead found .5
Remove .5
(parse)
[error] 11-11: expected , but instead found x
Remove x
(parse)
[error] 11-11: Expected a compound selector but instead found '2'.
Expected a compound selector here.
(parse)
[error] 11-11: expected , but instead found s
Remove s
(parse)
[error] 11-11: expected , but instead found ;
Remove ;
(parse)
[error] 12-12: expected , but instead found --animate-dashoffset-1x
Remove --animate-dashoffset-1x
(parse)
[error] 12-12: Expected a compound selector but instead found '1'.
Expected a compound selector here.
(parse)
[error] 12-12: expected , but instead found s
Remove s
(parse)
[error] 12-12: expected , but instead found ;
Remove ;
(parse)
[error] 13-13: expected , but instead found --animate-dashoffset-2x
Remove --animate-dashoffset-2x
(parse)
[error] 13-13: Expected a compound selector but instead found '0.5'.
Expected a compound selector here.
(parse)
[error] 13-13: expected , but instead found s
Remove s
(parse)
[error] 13-13: expected , but instead found ;
Remove ;
(parse)
[error] 14-14: expected , but instead found --animate-dashoffset-3x
Remove --animate-dashoffset-3x
(parse)
[error] 14-14: Expected a compound selector but instead found '0.25'.
Expected a compound selector here.
(parse)
[error] 14-14: expected , but instead found s
Remove s
(parse)
[error] 14-14: expected , but instead found ;
Remove ;
(parse)
[error] 15-15: expected , but instead found --animate-dashoffset-4x
Remove --animate-dashoffset-4x
(parse)
[error] 15-15: Expected a compound selector but instead found '0.125'.
Expected a compound selector here.
(parse)
[error] 15-15: expected , but instead found s
Remove s
(parse)
[error] 15-15: expected , but instead found ;
Remove ;
(parse)
[error] 16-16: expected , but instead found --animate-dashoffset-5x
Remove --animate-dashoffset-5x
(parse)
[error] 16-16: Expected a compound selector but instead found '0.0625'.
Expected a compound selector here.
(parse)
[error] 16-16: expected , but instead found s
Remove s
(parse)
[error] 16-16: expected , but instead found ;
Remove ;
(parse)
[error] 18-18: expected , but instead found keyframes
Remove keyframes
(parse)
[error] 19-19: Expected a declaration, or an at rule but instead found '100% {'.
Expected a declaration, or an at rule here.
(parse)
[error] 22-23: Expected a qualified rule, or an at rule but instead found '}'.
Expected a qualified rule, or an at rule here.
(parse)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: enforce_triggered_workflows
🔇 Additional comments (7)
frontend/vite.config.ts (2)
2-3: Added Tailwind CSS Vite pluginIntegration of Tailwind via Vite plugin instead of PostCSS.
9-9: Plugin order is correctTailwind plugin positioned before SvelteKit as expected.
frontend/tailwind.config.js (2)
3-3: Typography plugin removedImport and usage of typography plugin removed as part of Tailwind 4 upgrade.
5-6:❓ Verification inconclusive
Check content array configuration
The content array for pattern scanning has been removed. Make sure this is now properly configured in the Vite plugin.
🏁 Script executed:
#!/bin/bash # Check if content configuration exists in Vite plugin or any documentation grep -r "content:" --include="*.js" --include="*.ts" frontend/Length of output: 151
🏁 Script executed:
#!/bin/bash # Look for Vite plugin configuration with content array setup rg "content:\s*\[" -n frontend/vite.config.jsLength of output: 111
Action: Verify Vite Plugin Content Setup
The Tailwind config now shows a "content:" set for CSS values (e.g. colors) rather than a file scan array. We didn't find a Vite configuration file (vite.config.js). Please manually verify that the Vite plugin is correctly set up with the necessary content array for pattern scanning.
frontend/package.json (1)
65-65: Added Tailwind CSS Vite plugin dependencyNew dependency aligns with the Vite config changes.
frontend/src/app.css (2)
3-4: Added direct source importsSources correctly imported from node_modules for updated dependencies.
6-6: Migration in progressComment indicates this is temporary until full migration is complete.
…ailwind 4 and later Svelte 5)
… `app.css` (css directives)
…font sizes (most unused))
…wind-merge` and `clsx` dependencies
…wind indirection)
…, and `success` theme colors
…`MetadataTable` usage with simple `<div>`
sean-zlai
force-pushed
the
sean/tailwind-4
branch
from
ebe253c to
848c644
Compare
|
@nikhil-zlai Sorry to throw such a big PR to review for you're first frontend. It's mostly a continuation of #430 with some simplifications and recommendations applied. |
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (1)
frontend/src/app.css (1)
115-120:⚠️ Potential issueFix animation variable syntax errors.
Variable names with dots cause CSS parsing errors.
Replace dots with underscores in animation variable names:
- --animate-dashoffset-0.5x: animated-dash 2s linear infinite; - --animate-dashoffset-1x: animated-dash 1s linear infinite; - --animate-dashoffset-2x: animated-dash 0.5s linear infinite; - --animate-dashoffset-3x: animated-dash 0.25s linear infinite; - --animate-dashoffset-4x: animated-dash 0.125s linear infinite; - --animate-dashoffset-5x: animated-dash 0.0625s linear infinite; + --animate-dashoffset-0_5x: animated-dash 2s linear infinite; + --animate-dashoffset-1x: animated-dash 1s linear infinite; + --animate-dashoffset-2x: animated-dash 0.5s linear infinite; + --animate-dashoffset-3x: animated-dash 0.25s linear infinite; + --animate-dashoffset-4x: animated-dash 0.125s linear infinite; + --animate-dashoffset-5x: animated-dash 0.0625s linear infinite;🧰 Tools
🪛 Biome (1.9.4)
[error] 115-115: expected
,but instead found.5Remove .5
(parse)
[error] 115-115: expected
,but instead foundxRemove x
(parse)
[error] 115-115: Expected a compound selector but instead found '2'.
Expected a compound selector here.
(parse)
[error] 115-115: expected
,but instead foundsRemove s
(parse)
[error] 115-115: expected
,but instead found;Remove ;
(parse)
[error] 116-116: expected
,but instead found--animate-dashoffset-1xRemove --animate-dashoffset-1x
(parse)
[error] 116-116: Expected a compound selector but instead found '1'.
Expected a compound selector here.
(parse)
[error] 116-116: expected
,but instead foundsRemove s
(parse)
[error] 116-116: expected
,but instead found;Remove ;
(parse)
[error] 117-117: expected
,but instead found--animate-dashoffset-2xRemove --animate-dashoffset-2x
(parse)
[error] 117-117: Expected a compound selector but instead found '0.5'.
Expected a compound selector here.
(parse)
[error] 117-117: expected
,but instead foundsRemove s
(parse)
[error] 117-117: expected
,but instead found;Remove ;
(parse)
[error] 118-118: expected
,but instead found--animate-dashoffset-3xRemove --animate-dashoffset-3x
(parse)
[error] 118-118: Expected a compound selector but instead found '0.25'.
Expected a compound selector here.
(parse)
[error] 118-118: expected
,but instead foundsRemove s
(parse)
[error] 118-118: expected
,but instead found;Remove ;
(parse)
[error] 119-119: expected
,but instead found--animate-dashoffset-4xRemove --animate-dashoffset-4x
(parse)
[error] 119-119: Expected a compound selector but instead found '0.125'.
Expected a compound selector here.
(parse)
[error] 119-119: expected
,but instead foundsRemove s
(parse)
[error] 119-119: expected
,but instead found;Remove ;
(parse)
[error] 120-120: expected
,but instead found--animate-dashoffset-5xRemove --animate-dashoffset-5x
(parse)
[error] 120-120: Expected a compound selector but instead found '0.0625'.
Expected a compound selector here.
(parse)
[error] 120-120: expected
,but instead foundsRemove s
(parse)
[error] 120-120: expected
,but instead found;Remove ;
(parse)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro (Legacy)
⛔ Files ignored due to path filters (1)
frontend/package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (117)
frontend/package.json(1 hunks)frontend/postcss.config.js(0 hunks)frontend/src/app.css(4 hunks)frontend/src/lib/components/BreadcrumbNav.svelte(1 hunks)frontend/src/lib/components/CollapsibleSection.svelte(1 hunks)frontend/src/lib/components/DateRangeSelector.svelte(3 hunks)frontend/src/lib/components/MetadataTable/MetadataTable.svelte(1 hunks)frontend/src/lib/components/MetadataTable/MetadataTableSection.svelte(0 hunks)frontend/src/lib/components/NavigationBar.svelte(6 hunks)frontend/src/lib/components/PageHeader.svelte(1 hunks)frontend/src/lib/components/ResetZoomButton.svelte(1 hunks)frontend/src/lib/components/StatusBar.svelte(1 hunks)frontend/src/lib/components/StatusCell.svelte(2 hunks)frontend/src/lib/components/charts/TransformControls.svelte(2 hunks)frontend/src/lib/components/charts/common.ts(1 hunks)frontend/src/lib/components/ui/alert/alert-description.svelte(1 hunks)frontend/src/lib/components/ui/alert/alert-title.svelte(2 hunks)frontend/src/lib/components/ui/alert/alert.svelte(2 hunks)frontend/src/lib/components/ui/avatar/avatar-fallback.svelte(2 hunks)frontend/src/lib/components/ui/avatar/avatar-image.svelte(2 hunks)frontend/src/lib/components/ui/avatar/avatar.svelte(2 hunks)frontend/src/lib/components/ui/badge/badge.svelte(2 hunks)frontend/src/lib/components/ui/breadcrumb/breadcrumb-ellipsis.svelte(2 hunks)frontend/src/lib/components/ui/breadcrumb/breadcrumb-item.svelte(2 hunks)frontend/src/lib/components/ui/breadcrumb/breadcrumb-link.svelte(2 hunks)frontend/src/lib/components/ui/breadcrumb/breadcrumb-list.svelte(2 hunks)frontend/src/lib/components/ui/breadcrumb/breadcrumb-page.svelte(2 hunks)frontend/src/lib/components/ui/breadcrumb/breadcrumb-separator.svelte(2 hunks)frontend/src/lib/components/ui/button/button.svelte(2 hunks)frontend/src/lib/components/ui/button/index.ts(2 hunks)frontend/src/lib/components/ui/calendar/calendar-cell.svelte(2 hunks)frontend/src/lib/components/ui/calendar/calendar-day.svelte(2 hunks)frontend/src/lib/components/ui/calendar/calendar-grid-body.svelte(1 hunks)frontend/src/lib/components/ui/calendar/calendar-grid-head.svelte(1 hunks)frontend/src/lib/components/ui/calendar/calendar-grid-row.svelte(1 hunks)frontend/src/lib/components/ui/calendar/calendar-grid.svelte(1 hunks)frontend/src/lib/components/ui/calendar/calendar-head-cell.svelte(2 hunks)frontend/src/lib/components/ui/calendar/calendar-header.svelte(2 hunks)frontend/src/lib/components/ui/calendar/calendar-heading.svelte(2 hunks)frontend/src/lib/components/ui/calendar/calendar-months.svelte(2 hunks)frontend/src/lib/components/ui/calendar/calendar-next-button.svelte(2 hunks)frontend/src/lib/components/ui/calendar/calendar-prev-button.svelte(2 hunks)frontend/src/lib/components/ui/calendar/calendar.svelte(2 hunks)frontend/src/lib/components/ui/checkbox/checkbox.svelte(3 hunks)frontend/src/lib/components/ui/command/command-empty.svelte(1 hunks)frontend/src/lib/components/ui/command/command-group.svelte(1 hunks)frontend/src/lib/components/ui/command/command-input.svelte(2 hunks)frontend/src/lib/components/ui/command/command-item.svelte(2 hunks)frontend/src/lib/components/ui/command/command-list.svelte(1 hunks)frontend/src/lib/components/ui/command/command-separator.svelte(1 hunks)frontend/src/lib/components/ui/command/command-shortcut.svelte(2 hunks)frontend/src/lib/components/ui/command/command.svelte(2 hunks)frontend/src/lib/components/ui/dialog/dialog-content.svelte(2 hunks)frontend/src/lib/components/ui/dialog/dialog-description.svelte(2 hunks)frontend/src/lib/components/ui/dialog/dialog-footer.svelte(2 hunks)frontend/src/lib/components/ui/dialog/dialog-header.svelte(1 hunks)frontend/src/lib/components/ui/dialog/dialog-overlay.svelte(2 hunks)frontend/src/lib/components/ui/dialog/dialog-title.svelte(2 hunks)frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte(2 hunks)frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte(2 hunks)frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte(2 hunks)frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte(2 hunks)frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte(2 hunks)frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte(2 hunks)frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte(1 hunks)frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte(2 hunks)frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte(2 hunks)frontend/src/lib/components/ui/input/input.svelte(2 hunks)frontend/src/lib/components/ui/popover/popover-content.svelte(2 hunks)frontend/src/lib/components/ui/range-calendar/range-calendar-cell.svelte(2 hunks)frontend/src/lib/components/ui/range-calendar/range-calendar-day.svelte(2 hunks)frontend/src/lib/components/ui/range-calendar/range-calendar-grid-body.svelte(1 hunks)frontend/src/lib/components/ui/range-calendar/range-calendar-grid-head.svelte(1 hunks)frontend/src/lib/components/ui/range-calendar/range-calendar-grid-row.svelte(1 hunks)frontend/src/lib/components/ui/range-calendar/range-calendar-grid.svelte(2 hunks)frontend/src/lib/components/ui/range-calendar/range-calendar-head-cell.svelte(2 hunks)frontend/src/lib/components/ui/range-calendar/range-calendar-header.svelte(2 hunks)frontend/src/lib/components/ui/range-calendar/range-calendar-heading.svelte(2 hunks)frontend/src/lib/components/ui/range-calendar/range-calendar-months.svelte(2 hunks)frontend/src/lib/components/ui/range-calendar/range-calendar-next-button.svelte(2 hunks)frontend/src/lib/components/ui/range-calendar/range-calendar-prev-button.svelte(2 hunks)frontend/src/lib/components/ui/range-calendar/range-calendar.svelte(2 hunks)frontend/src/lib/components/ui/select/select-content.svelte(2 hunks)frontend/src/lib/components/ui/select/select-item.svelte(2 hunks)frontend/src/lib/components/ui/select/select-label.svelte(1 hunks)frontend/src/lib/components/ui/select/select-separator.svelte(1 hunks)frontend/src/lib/components/ui/select/select-trigger.svelte(2 hunks)frontend/src/lib/components/ui/separator/separator.svelte(2 hunks)frontend/src/lib/components/ui/sheet/sheet-content.svelte(2 hunks)frontend/src/lib/components/ui/sheet/sheet-description.svelte(1 hunks)frontend/src/lib/components/ui/sheet/sheet-footer.svelte(2 hunks)frontend/src/lib/components/ui/sheet/sheet-header.svelte(1 hunks)frontend/src/lib/components/ui/sheet/sheet-overlay.svelte(2 hunks)frontend/src/lib/components/ui/sheet/sheet-portal.svelte(1 hunks)frontend/src/lib/components/ui/sheet/sheet-title.svelte(2 hunks)frontend/src/lib/components/ui/table/index.ts(1 hunks)frontend/src/lib/components/ui/table/table-body.svelte(1 hunks)frontend/src/lib/components/ui/table/table-caption.svelte(1 hunks)frontend/src/lib/components/ui/table/table-cell.svelte(2 hunks)frontend/src/lib/components/ui/table/table-footer.svelte(1 hunks)frontend/src/lib/components/ui/table/table-head.svelte(2 hunks)frontend/src/lib/components/ui/table/table-header.svelte(1 hunks)frontend/src/lib/components/ui/table/table-row.svelte(2 hunks)frontend/src/lib/components/ui/table/table.svelte(2 hunks)frontend/src/lib/components/ui/tabs/tabs-content.svelte(2 hunks)frontend/src/lib/components/ui/tabs/tabs-list.svelte(2 hunks)frontend/src/lib/components/ui/tabs/tabs-trigger.svelte(2 hunks)frontend/src/lib/components/ui/tooltip/tooltip-content.svelte(2 hunks)frontend/src/lib/job/status.ts(0 hunks)frontend/src/lib/util/colors.ts(0 hunks)frontend/src/lib/utils.ts(0 hunks)frontend/src/routes/[conf]/[name]/job-tracking/+page.svelte(2 hunks)frontend/src/routes/[conf]/[name]/observability/drift/+page.svelte(4 hunks)frontend/src/routes/[conf]/[name]/observability/summary/+page.svelte(1 hunks)frontend/src/routes/[conf]/[name]/overview/+page.svelte(7 hunks)frontend/tailwind.config.js(0 hunks)frontend/vite.config.ts(1 hunks)
💤 Files with no reviewable changes (6)
- frontend/src/lib/components/MetadataTable/MetadataTableSection.svelte
- frontend/src/lib/util/colors.ts
- frontend/postcss.config.js
- frontend/src/lib/utils.ts
- frontend/tailwind.config.js
- frontend/src/lib/job/status.ts
✅ Files skipped from review due to trivial changes (9)
- frontend/src/lib/components/PageHeader.svelte
- frontend/src/lib/components/ui/dialog/dialog-footer.svelte
- frontend/src/lib/components/ui/table/table-footer.svelte
- frontend/src/lib/components/ui/checkbox/checkbox.svelte
- frontend/src/lib/components/ui/range-calendar/range-calendar-header.svelte
- frontend/src/lib/components/ui/select/select-item.svelte
- frontend/src/lib/components/ui/range-calendar/range-calendar.svelte
- frontend/src/lib/components/charts/TransformControls.svelte
- frontend/src/lib/components/ui/table/table-row.svelte
🚧 Files skipped from review as they are similar to previous changes (2)
- frontend/vite.config.ts
- frontend/package.json
🧰 Additional context used
🪛 Biome (1.9.4)
frontend/src/app.css
[error] 115-115: expected , but instead found .5
Remove .5
(parse)
[error] 115-115: expected , but instead found x
Remove x
(parse)
[error] 115-115: Expected a compound selector but instead found '2'.
Expected a compound selector here.
(parse)
[error] 115-115: expected , but instead found s
Remove s
(parse)
[error] 115-115: expected , but instead found ;
Remove ;
(parse)
[error] 116-116: expected , but instead found --animate-dashoffset-1x
Remove --animate-dashoffset-1x
(parse)
[error] 116-116: Expected a compound selector but instead found '1'.
Expected a compound selector here.
(parse)
[error] 116-116: expected , but instead found s
Remove s
(parse)
[error] 116-116: expected , but instead found ;
Remove ;
(parse)
[error] 117-117: expected , but instead found --animate-dashoffset-2x
Remove --animate-dashoffset-2x
(parse)
[error] 117-117: Expected a compound selector but instead found '0.5'.
Expected a compound selector here.
(parse)
[error] 117-117: expected , but instead found s
Remove s
(parse)
[error] 117-117: expected , but instead found ;
Remove ;
(parse)
[error] 118-118: expected , but instead found --animate-dashoffset-3x
Remove --animate-dashoffset-3x
(parse)
[error] 118-118: Expected a compound selector but instead found '0.25'.
Expected a compound selector here.
(parse)
[error] 118-118: expected , but instead found s
Remove s
(parse)
[error] 118-118: expected , but instead found ;
Remove ;
(parse)
[error] 119-119: expected , but instead found --animate-dashoffset-4x
Remove --animate-dashoffset-4x
(parse)
[error] 119-119: Expected a compound selector but instead found '0.125'.
Expected a compound selector here.
(parse)
[error] 119-119: expected , but instead found s
Remove s
(parse)
[error] 119-119: expected , but instead found ;
Remove ;
(parse)
[error] 120-120: expected , but instead found --animate-dashoffset-5x
Remove --animate-dashoffset-5x
(parse)
[error] 120-120: Expected a compound selector but instead found '0.0625'.
Expected a compound selector here.
(parse)
[error] 120-120: expected , but instead found s
Remove s
(parse)
[error] 120-120: expected , but instead found ;
Remove ;
(parse)
[error] 122-122: expected , but instead found keyframes
Remove keyframes
(parse)
[error] 123-123: Expected a declaration, or an at rule but instead found '100% {'.
Expected a declaration, or an at rule here.
(parse)
[error] 126-127: Expected a qualified rule, or an at rule but instead found '}'.
Expected a qualified rule, or an at rule here.
(parse)
[error] 247-247: expected , but instead found (
Remove (
(parse)
[error] 247-247: expected , but instead found --color-scroll-thumb
Remove --color-scroll-thumb
(parse)
[error] 247-247: expected , but instead found )
Remove )
(parse)
[error] 247-247: expected , but instead found var
Remove var
(parse)
[error] 247-247: expected , but instead found (
Remove (
(parse)
[error] 247-247: expected , but instead found --color-scroll-track
Remove --color-scroll-track
(parse)
[error] 247-247: expected , but instead found )
Remove )
(parse)
[error] 247-247: expected , but instead found ;
Remove ;
(parse)
🔇 Additional comments (178)
frontend/src/routes/[conf]/[name]/observability/summary/+page.svelte (1)
73-73: Font size updated to use Tailwind's standard sizeChanged from
text-regulartotext-smfor trigger element.frontend/src/lib/components/ui/table/table-body.svelte (2)
3-3: Import updated to use @layerstack/tailwindReplaced
cnutility withclsfrom@layerstack/tailwind.
11-11: Class utility function changedUpdated class utility from
cntoclswhile maintaining the same functionality.frontend/src/lib/components/charts/common.ts (1)
46-46: Tooltip text style standardizedChanged from custom
text-smallto Tailwind'stext-sm/4with line height specification.frontend/src/lib/components/CollapsibleSection.svelte (2)
33-33: Small title size standardizedUpdated from custom
text-regularto Tailwind's standardtext-sm.
37-37: Default title size standardizedUpdated from custom
text-large-mediumto Tailwind's standardtext-base.frontend/src/lib/components/ResetZoomButton.svelte (1)
8-8: Class binding simplified.Direct use of className prop improves readability.
frontend/src/lib/components/ui/command/command-group.svelte (2)
3-3: Import updated to use cls from @layerstack/tailwind.Standardizes utility functions across codebase.
11-11: Using cls instead of cn for class composition.Maintains consistent approach with other components.
frontend/src/lib/components/ui/badge/badge.svelte (2)
3-3: Import updated to use cls from @layerstack/tailwind.Aligns with Tailwind 4 migration strategy.
14-14: Using cls instead of cn for class composition.Consistent with overall pattern changes throughout the codebase.
frontend/src/lib/components/ui/breadcrumb/breadcrumb-list.svelte (2)
3-3: Import updated to use cls from @layerstack/tailwind.Part of standardizing class utility functions.
16-17: Class utility and text size updated.Text class changed from text-small to text-sm/3, embracing Tailwind's default sizing for better consistency.
frontend/src/lib/components/ui/calendar/calendar-heading.svelte (1)
3-3: Import change looks good.From
cntocls- part of Tailwind 4 upgrade.Also applies to: 13-13
frontend/src/lib/components/ui/breadcrumb/breadcrumb-separator.svelte (1)
4-4:cn→clstransition implemented properly.Consistent with project-wide Tailwind 4 migration.
Also applies to: 18-18
frontend/src/lib/components/ui/alert/alert.svelte (1)
4-4: Utility function swap looks good.
clsfrom@layerstack/tailwindcorrectly replacescn.Also applies to: 15-15
frontend/src/lib/components/ui/dialog/dialog-header.svelte (1)
3-3: Import and usage change is correct.Properly migrated to new Tailwind utility.
Also applies to: 11-11
frontend/src/lib/components/ui/table/table-caption.svelte (2)
3-3: Utility function import updated.Changed from
cntoclsfrom Tailwind package.
11-11: Function call updated to match import.Maintains same styling parameters.
frontend/src/lib/components/ui/avatar/avatar.svelte (2)
3-3: Updated import to use Tailwind utility.Using
clsfrom Tailwind package.
14-14: Updated class utility function.Class parameters unchanged.
frontend/src/lib/components/ui/select/select-label.svelte (2)
3-3: Import updated to new Tailwind utility.Switched to
clsfunction.
11-11: Updated class utility function call.Styling remains consistent.
frontend/src/lib/components/ui/sheet/sheet-description.svelte (2)
3-3: Updated to use Tailwind utility.Uses
clsfrom Tailwind package.
11-14: Updated component styling with new utility.Function name updated while preserving styling.
frontend/src/lib/components/ui/sheet/sheet-portal.svelte (1)
3-3: Import and usage of cls looks goodClean transition from local
cnto@layerstack/tailwindclsutility.Also applies to: 11-11
frontend/src/lib/components/ui/breadcrumb/breadcrumb-item.svelte (1)
3-3: Import and usage of cls looks goodProper transition from local utility to
@layerstack/tailwind.Also applies to: 14-14
frontend/src/lib/components/ui/calendar/calendar-next-button.svelte (1)
5-5: Import and cls function usage looks goodConsistent implementation in the class binding.
Also applies to: 16-20
frontend/src/lib/components/ui/table/table-header.svelte (1)
3-3: Import and usage of cls looks goodClean migration to
@layerstack/tailwindutility.Also applies to: 11-11
frontend/src/lib/components/ui/range-calendar/range-calendar-heading.svelte (2)
3-3: Import change from utils to layerstack librarySwitched from local utility to external library.
13-13: Function name updated to match importUpdated class utility usage.
frontend/src/lib/components/ui/dialog/dialog-overlay.svelte (2)
4-4: Import updated to layerstack libraryConsistent with other component changes.
19-19: Function name updated to match importFunction replacement maintains same functionality.
frontend/src/lib/components/ui/breadcrumb/breadcrumb-link.svelte (2)
3-3: Import updated to layerstack libraryPart of systematic replacement across codebase.
19-19: Function name updated in attrs definitionCorrectly replaced utility function while maintaining classes.
frontend/src/lib/components/BreadcrumbNav.svelte (1)
15-15: Simplified class bindingRemoved unnecessary function wrapper for class binding.
frontend/src/lib/components/ui/calendar/calendar-grid-row.svelte (1)
3-3: Utility function change looks good.Import and usage of
clscorrectly replacescn.Also applies to: 11-11
frontend/src/lib/components/ui/calendar/calendar-grid.svelte (1)
3-3: Utility function change looks good.Import and usage of
clscorrectly replacescn.Also applies to: 11-11
frontend/src/lib/components/ui/range-calendar/range-calendar-grid-row.svelte (1)
3-3: Utility function change looks good.Import and usage of
clscorrectly replacescn.Also applies to: 11-11
frontend/src/lib/components/ui/range-calendar/range-calendar-grid-head.svelte (1)
3-3: Utility function change looks good.Import and usage of
clscorrectly replacescn.Also applies to: 11-11
frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte (2)
3-3: Import utility replaced correctlyImport changed from
cntoclsper Tailwind 4 migration.
11-11: Function usage updated properly
clsfunction replacescnwith identical parameters.frontend/src/lib/components/ui/sheet/sheet-content.svelte (2)
12-12: Import utility replaced correctlyImport changed from
cntoclsper Tailwind 4 migration.
43-43: Function usage updated properly
clsfunction replacescnwith identical parameters.frontend/src/lib/components/ui/command/command-separator.svelte (2)
3-3: Import utility replaced correctlyImport changed from
cntoclsper Tailwind 4 migration.
10-10: Function usage updated properly
clsfunction replacescnwith identical parameters.frontend/src/lib/components/StatusCell.svelte (2)
24-24: StatusBar props simplifiedProps
includeHoverandisActiveremoved, simplifying component usage.
35-35: Text size updated to Tailwind defaultChanged from custom
text-small!to standard Tailwindtext-xs!for better consistency.frontend/src/lib/components/ui/select/select-separator.svelte (2)
3-3: Updated utility function importChanged from local
cnto@layerstack/tailwindpackage'scls.
11-11: Function call updatedChanged from
cn()tocls()while maintaining same parameters.frontend/src/lib/components/ui/range-calendar/range-calendar-head-cell.svelte (2)
3-3: Updated utility function importChanged from local
cnto@layerstack/tailwindpackage'scls.
12-12: Function call updatedChanged from
cn()tocls()while maintaining same class strings.frontend/src/lib/components/ui/sheet/sheet-header.svelte (2)
3-3: Updated utility function importChanged from local
cnto@layerstack/tailwindpackage'scls.
11-11: Function call updatedChanged from
cn()tocls()while preserving class parameters.frontend/src/lib/components/ui/dialog/dialog-description.svelte (2)
3-3: Updated utility function importChanged from local
cnto@layerstack/tailwindpackage'scls.
12-12: Function call updatedChanged from
cn()tocls()with identical class parameters.frontend/src/lib/components/ui/input/input.svelte (1)
4-4: Changed class utility from cn to cls.Import and usage updated consistently from local utils to @layerstack/tailwind.
Also applies to: 19-19
frontend/src/lib/components/ui/calendar/calendar-grid-head.svelte (1)
3-3: Updated class utility.Consistent change to cls from @layerstack/tailwind.
Also applies to: 11-11
frontend/src/lib/components/ui/range-calendar/range-calendar-grid-body.svelte (1)
3-3: Switched to @layerstack/tailwind cls utility.Change aligns with other components.
Also applies to: 11-11
frontend/src/lib/components/ui/command/command-shortcut.svelte (1)
3-3: Updated to cls utility function.Consistent with other changes throughout the codebase.
Also applies to: 12-12
frontend/src/lib/components/ui/command/command-input.svelte (2)
4-4: Import updated to use cls from layerstackCorrectly replaced local utility with package function.
16-17: Text size standardized to Tailwind defaultChanged from custom
text-regularto Tailwind's standardtext-sm.frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte (2)
3-4: Updated imports for utility functionsKept flyAndScale from local utils while migrating class utility to layerstack.
20-20: Updated class utility functionChanged from cn to cls for class composition.
frontend/src/lib/components/ui/calendar/calendar-grid-body.svelte (2)
3-3: Import updated for class utilitySwitched to layerstack implementation.
11-11: Updated class composition functionCorrectly migrated to cls utility.
frontend/src/lib/components/ui/breadcrumb/breadcrumb-page.svelte (2)
3-3: Updated import for class utilityReplaced local cn with layerstack cls.
19-19: Updated class composition implementationSuccessfully migrated to use cls function.
frontend/src/lib/components/ui/tooltip/tooltip-content.svelte (2)
3-4: Updated imports correctly.Switched from
cntoclsfunction as part of Tailwind 4 migration.
22-25: Class utility updated.Function changed from
cntoclswhile preserving class names.frontend/src/lib/components/ui/breadcrumb/breadcrumb-ellipsis.svelte (2)
4-4: Import updated correctly.Changed from
cntoclsimport for Tailwind 4 compatibility.
19-19: Class utility updated.Function changed from
cntoclswhile preserving styling.frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte (2)
4-4: Import updated correctly.Changed from
cntoclsimport as part of Tailwind 4 migration.
16-19: Class utility updated.Function changed from
cntoclswhile maintaining class structure.frontend/src/lib/components/ui/table/table-head.svelte (2)
3-3: Import updated correctly.Changed from
cntoclsimport for Tailwind 4 compatibility.
16-18: Updated class utility and text size.Function changed from
cntoclsand text size updated fromtext-regulartotext-smto align with Tailwind's default sizing.frontend/src/lib/components/ui/command/command.svelte (1)
3-3: Import and usage of cls function correctly implemented.Changed from cn to cls as part of Tailwind 4 migration.
Also applies to: 14-14
frontend/src/lib/components/ui/alert/alert-description.svelte (1)
3-3: Import and usage of cls function correctly implemented.Changed from cn to cls as part of Tailwind 4 migration.
Also applies to: 11-11
frontend/src/lib/components/ui/sheet/sheet-footer.svelte (1)
3-3: Import and usage of cls function correctly implemented.Changed from cn to cls as part of Tailwind 4 migration.
Also applies to: 12-12
frontend/src/lib/components/ui/command/command-list.svelte (1)
3-3: Import and usage of cls function correctly implemented.Changed from cn to cls as part of Tailwind 4 migration.
Also applies to: 11-11
frontend/src/lib/components/ui/sheet/sheet-overlay.svelte (1)
4-4: Import and usage updated to @layerstack/tailwindSwitched from
cntoclsfunction.Also applies to: 19-19
frontend/src/lib/components/ui/tabs/tabs-content.svelte (1)
3-3: Updated to use cls from @layerstack/tailwindImport and usage changed from
cntocls.Also applies to: 13-13
frontend/src/lib/components/ui/range-calendar/range-calendar-cell.svelte (1)
3-3: Migrated to @layerstack/tailwind cls utilityReplaced
cnwithclsfor className handling.Also applies to: 14-14
frontend/src/lib/components/ui/calendar/calendar.svelte (1)
4-4: Switched to cls from @layerstack/tailwindUpdated className utility consistently with other components.
Also applies to: 21-21
frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte (2)
3-3: Function import updated.Import changed from local utility to @layerstack/tailwind package.
15-15: Updated class application function.Replaced 'cn' with 'cls' while preserving class structure.
frontend/src/lib/components/ui/dialog/dialog-title.svelte (2)
3-3: Utility function import updated.Consistent switch from '$lib/utils.js' to '@layerstack/tailwind' package.
12-12: Class function updated.Replaced 'cn' with 'cls' consistently with other components.
frontend/src/lib/components/ui/table/index.ts (1)
16-17: Table text size classes updated.Font size classes updated for better consistency:
- 'text-small' → 'text-[13px]' for compact variant
- 'text-regular' → 'text-sm' for default variant
These changes align with PR objectives to use Tailwind's default sizes.
frontend/src/lib/components/ui/calendar/calendar-header.svelte (2)
3-3: Updated utility import.Consistent change to use @layerstack/tailwind utilities.
12-12: Updated class function.Function name updated from 'cn' to 'cls' while maintaining identical class structure.
frontend/src/lib/components/ui/calendar/calendar-months.svelte (1)
3-3: Utility migration looks goodSwitched from local
cnto package-basedclsfunction.Also applies to: 12-12
frontend/src/lib/components/ui/range-calendar/range-calendar-months.svelte (1)
3-3: Utility migration looks goodSwitched from local
cnto package-basedclsfunction.Also applies to: 12-12
frontend/src/lib/components/ui/command/command-item.svelte (1)
3-3: Utility migration and text size updateSwitched from local
cnto package-basedclsfunction and updated text size totext-sm.Also applies to: 15-16
frontend/src/lib/components/ui/avatar/avatar-image.svelte (1)
3-3: Utility migration looks goodSwitched from local
cnto package-basedclsfunction.Also applies to: 16-16
frontend/src/lib/components/ui/separator/separator.svelte (2)
3-3: Import updated to use cls from @layerstack/tailwind.Consistent with Tailwind 4 migration approach.
16-16: Function call updated from cn to cls.Matches the import change.
frontend/src/lib/components/ui/tabs/tabs-list.svelte (2)
3-3: Updated import to use cls utility.Part of standardizing on @layerstack/tailwind utilities.
12-12: Replaced cn with cls function.Consistent implementation with import change.
frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte (2)
3-3: Updated to use cls from @layerstack/tailwind.Part of Tailwind 4 migration.
12-12: Changed to cls function call.Matches import change.
frontend/src/lib/components/ui/command/command-empty.svelte (2)
3-3: Updated import to use cls utility.Consistent with other component changes.
10-10: Switched to cls function for class composition.Properly implements the import change.
frontend/src/lib/components/ui/button/button.svelte (1)
4-4: Import and usage updated to @layerstack/tailwind.Changed from
cntoclsfor class concatenation, aligning with Tailwind 4 updates.Also applies to: 19-19
frontend/src/lib/components/ui/range-calendar/range-calendar-grid.svelte (1)
3-3: Switched to @layerstack/tailwind for class handling.Consistent with other components, updated from
cntocls.Also applies to: 12-12
frontend/src/lib/components/ui/range-calendar/range-calendar-prev-button.svelte (1)
5-5: Migrated to @layerstack/tailwind utility.Changed class utility from
cntoclsas part of Tailwind 4 upgrade.Also applies to: 16-16
frontend/src/lib/components/ui/calendar/calendar-cell.svelte (1)
3-3: Updated to use @layerstack/tailwind.Class concatenation now uses
clsinstead ofcn, maintaining identical functionality.Also applies to: 14-17
frontend/src/lib/components/ui/calendar/calendar-head-cell.svelte (1)
3-3: Utility function replaced correctly.Consistent replacement of
cnwithclsfor class management.Also applies to: 12-12
frontend/src/lib/components/ui/table/table-cell.svelte (1)
3-3: Utility function replaced correctly.
clsreplacescnwhile maintaining existing class structure.Also applies to: 12-15
frontend/src/lib/components/ui/range-calendar/range-calendar-next-button.svelte (1)
5-5: Utility function replaced correctly.
clsnow handles class concatenation with buttonVariants.Also applies to: 16-16
frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte (1)
4-4: Utility function replaced correctly.Consistent replacement with identical class string behavior.
Also applies to: 17-21
frontend/src/lib/components/ui/avatar/avatar-fallback.svelte (2)
3-3: Utility function migrationSwitched from local
cnto tailwind-specificclsfunction.
12-12: Updated class assignmentFunction changed while maintaining same styling.
frontend/src/lib/components/ui/button/index.ts (2)
6-6: Font styling standardizationReplaced custom
text-smallwith standardtext-smand updated font weight classes.
21-22: Size variant adjustmentsUpdated text classes for consistent sizing across button variants:
sm: Precise sizing withtext-[13px]md: Standard Tailwind sizing withtext-smThese changes align with PR objectives to improve design consistency.
frontend/src/lib/components/ui/sheet/sheet-title.svelte (2)
3-3: Utility function migrationSwitched from local
cnto tailwind-specificclsfunction.
12-12: Updated class assignmentFunction changed while maintaining same styling.
frontend/src/lib/components/ui/dialog/dialog-content.svelte (2)
5-6: Import restructuringSplit utility imports to separate local and package functions:
- Kept
flyAndScalefrom local utils- Imported
clsfrom external packageThis supports the Tailwind 4 migration.
23-27: Updated class assignmentFunction changed while maintaining same styling implementation.
frontend/src/lib/components/ui/alert/alert-title.svelte (1)
4-4: Updated utility function for class handlingImport and usage of
clsfrom@layerstack/tailwindreplaces the previouscnutility.Also applies to: 17-17
frontend/src/lib/components/NavigationBar.svelte (8)
133-133: Button text size adjustedChanged from
text-regulartotext-smfor better consistency.
138-138: Dataset header text styling updatedMore explicit styling with
text-xs font-mediuminstead of combined class.
147-147: Standardized button text sizeApplied
text-smclass for consistency with other navigation elements.
158-158: Resources header text styling updatedMore explicit styling with
text-xs font-mediuminstead of combined class.
161-162: Resource link text size standardizedUpdated to
text-smfor consistent text sizing across navigation elements.
173-174: Support link text size standardizedUpdated to
text-smfor consistent text sizing across navigation elements.
186-188: Feedback button styling adjustedChanged to
size="sm"with precisetext-[13px]size instead of generictext-small.
206-206: User name text size standardizedAdded
text-smclass for consistent text sizing.frontend/src/lib/components/ui/tabs/tabs-trigger.svelte (1)
3-3: Updated utility function and text sizingChanged from
cntoclsand replacedtext-regularwithtext-smfor consistent sizing.Also applies to: 17-18
frontend/src/lib/components/ui/table/table.svelte (1)
3-3: Updated utility function for class handlingReplaced
cnwithclsfrom@layerstack/tailwindacross all class assignments.Also applies to: 21-21, 24-24
frontend/src/lib/components/ui/popover/popover-content.svelte (2)
4-4: Utility function import updated.Replaced
cnwithclsfrom@layerstack/tailwind.
25-30: Updated class utility function.Modified class binding to use
clsinstead ofcnwhile maintaining the same styling logic.frontend/src/lib/components/DateRangeSelector.svelte (4)
19-19: Utility import updated.Changed from
cntoclsfor class name composition.
102-105: Updated button styling.Replaced
cnwithclsand addedfont-normalfor better typography consistency.
109-109: Improved border styling.Consistent border styling for better visual appearance.
154-158: Updated calendar button styling.Replaced
cnwithclswhile maintaining the existing styling logic.frontend/src/lib/components/ui/select/select-trigger.svelte (2)
4-4: Updated utility import.Replaced
cnwithclsfrom@layerstack/tailwind.
14-17: Updated class binding.Switched to
clsfunction while preserving the same class structure.frontend/src/lib/components/ui/calendar/calendar-day.svelte (2)
4-4: Updated utility import.Replaced
cnwithclsfrom Tailwind layer stack.
19-33: Updated class binding mechanism.Switched to
clsfunction while maintaining the same comprehensive styling rules.frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte (2)
3-3: Import updated to useclsfrom@layerstack/tailwind.This change aligns with the Tailwind 4 migration.
16-16: Changed fromcntoclsfunction.Function call updated to match the new import.
frontend/src/lib/components/ui/calendar/calendar-prev-button.svelte (2)
5-5: Import updated to useclsfrom@layerstack/tailwind.Consistent with other component changes in this PR.
16-16: Changed fromcntoclsfunction.Function call updated correctly.
frontend/src/lib/components/MetadataTable/MetadataTable.svelte (3)
2-2: Added Table components import.Imports Table components needed for the new implementation.
5-5: Simplified props.Removed
columnsandclassNameprops, keeping onlychildren.
8-14: Refactored to use Table components.Simplified implementation using Table components with consistent styling.
frontend/src/lib/components/ui/select/select-content.svelte (2)
4-5: Updated imports for animation and class utilities.Maintains the
flyAndScaleimport while addingclsfrom the Tailwind package.
28-28: Changed fromcntoclsfunction.Function call updated to match the new import.
frontend/src/lib/components/ui/range-calendar/range-calendar-day.svelte (2)
4-4: Updated import source for class utility.
clsfrom@layerstack/tailwindreplaces previous import ofcn.
19-19: Function call updated to match new import.Changed from
cn(tocls(while preserving same functionality.frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte (2)
4-4: Updated import source for class utility.
clsfrom@layerstack/tailwindreplaces previous import ofcn.
15-15: Function call updated to match new import.Changed from
cn(tocls(while preserving same functionality.frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte (2)
3-4: Updated imports for utility functions.Removed
cnimport and addedclsfrom@layerstack/tailwind.
19-19: Function call updated to match new import.Changed from
cn(tocls(while preserving same functionality.frontend/src/routes/[conf]/[name]/observability/drift/+page.svelte (4)
28-28: Updated import source for class utility.
clsfrom@layerstack/tailwindreplaces previous import ofcn.
172-173: Function call updated to match new import.Changed from
cn(tocls(while preserving same functionality.
224-224: Updated text styling for better consistency.Changed from
text-xl-mediumtotext-xl font-mediumto use standard Tailwind classes.
411-411: Function call updated to match new import.Changed from
cn(tocls(while preserving same functionality.frontend/src/routes/[conf]/[name]/job-tracking/+page.svelte (5)
186-186: Improved section initialization.Direct
openattribute simplifies code by removing unnecessary state binding.
188-188: Text size class updated to align with Tailwind 4.Changed from
text-small!totext-sm!for consistency.
195-206: Improved metadata layout with grid.Replaced
MetadataTableSectionwith simpler grid layout containing twoMetadataTablecomponents.
212-212: Simplified timeline section initialization.Direct
openattribute improves code clarity.
256-256: Updated table header text size class.Changed from
text-regulartotext-smfor consistency with Tailwind 4.frontend/src/lib/components/StatusBar.svelte (4)
3-3: Switched toclsutility.Aligns with project-wide migration from
cntoclsfor className generation.
5-7: Simplified component props API.Removed
isActiveandincludeHoverprops for a cleaner interface.
10-10: Simplified status bar rendering.Uses
clsfunction and status-based class names for more maintainable styling.
12-151: Added comprehensive status styling.Moved from utility functions to CSS classes with proper light/dark variants for each status.
frontend/src/routes/[conf]/[name]/overview/+page.svelte (5)
32-32: Switched toclsutility.Replaced
cnwith@layerstack/tailwindutility.
228-232: Updated class name generation.
clsfunction now handles class concatenation.
280-284: Consistent class utility usage.Updated Spline components to use
cls.Also applies to: 295-301
387-387: Updated tooltip class generation.Used
clsfor consistent class handling in tooltip items.Also applies to: 412-412
503-512: Improved theme variable references.Updated CSS variable assignments to use more maintainable CSS variable references.
frontend/src/app.css (5)
3-4: Added external style sources.Imported styles from svelte-ux and layerchart packages.
6-6: Added custom dark mode variant.Streamlined dark mode targeting with custom variant.
8-113: Added comprehensive theme variables.Structured color system with consistent naming patterns.
167-230: Updated dark mode theme variables.Consistent variable structure between light and dark themes.
283-289: Added unrestricted Geist Mono font face.Complements the numbers-only variant for wider usage.
Summary
This PR is mostly a continuation of the initial Tailwind 4 upgrade with some additional best practices and simplification applied and has the goal of introducing minimal visual changes.
With that said, there are some minor visual changes due to the removal of all the custom font sizes. This removal helps to simplify the config and usage (Tailwind already provides many sizes and weights by default). We can still refine the sizing if desired with 1-off custom sizes (ex.
text-[13px]) but the simplification improved readability. I did manually refine a few sizes already to tighten up the design.@tailwindcss/postcssto@tailwindcss/vite(recommended)tailwind.config.js(js-based) toapp.css(css-first with directives)@tailwindcss/typographypluginMetadataTableSectiontoMetadataTableand replaceMetadataTableusage with simple divMetadataTableSectionwas the actualTablegrid-col-{$columns}class string which isn't supported by Tailwind (especially withoutsafelistsupport)2.0.0@next(improved compat with Tailwind 4 and later Svelte 5)Screenshots
Dark mode
Light mode
Checklist
Summary by CodeRabbit
New Features
Style
Chores