Skip to content

Conversation

@JammingBen
Copy link
Contributor

refs #937

@JammingBen JammingBen self-assigned this Aug 25, 2025
@JammingBen JammingBen force-pushed the refactor/tailwind-outline branch from 32d88ed to f41fd73 Compare August 25, 2025 11:50
@JammingBen JammingBen force-pushed the refactor/tailwind-outline branch from f41fd73 to 49e54b6 Compare August 25, 2025 12:08
@JammingBen JammingBen marked this pull request as ready for review August 25, 2025 12:40
Copilot AI review requested due to automatic review settings August 25, 2025 12:40
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

This PR migrates CSS outline declarations from custom SCSS to Tailwind utility classes as part of a broader design system refactor. The changes standardize outline handling across components by removing manual CSS outline rules and replacing them with Tailwind's outline utilities.

  • Replaces custom CSS outline: none declarations with Tailwind's outline-0 class
  • Converts focus outline styles from SCSS to Tailwind utilities with proper focus states
  • Updates component templates and test snapshots to reflect the new Tailwind-based outline classes

Reviewed Changes

Copilot reviewed 30 out of 30 changed files in this pull request and generated 2 comments.

Show a summary per file
File Description
packages/web-runtime/src/components/SkipTo.vue Adds focus:outline-0 class and removes CSS outline: none
packages/web-pkg/src/components/ViewOptions.vue Migrates range input outline from CSS to Tailwind
packages/web-pkg/src/components/SideBar/SideBar.vue Converts sidebar focus outline to Tailwind utilities
packages/web-pkg/src/components/FilesList/ResourceTile.vue Replaces CSS outline with Tailwind classes for tile cards
packages/web-pkg/src/components/FilesList/ResourceListItem.vue Migrates link outline styles to Tailwind
packages/web-pkg/src/components/FilesViewWrapper.vue Converts wrapper focus outline to Tailwind
packages/web-app-files/src/components/FilesViewWrapper.vue Adds focus:outline-0 and outline-0 classes
packages/web-app-app-store/src/views/AppDetails.vue Replaces CSS outline with Tailwind border class
packages/web-app-app-store/src/components/AppTile.vue Converts tile outline from CSS to Tailwind border
packages/design-system/src/styles/theme/oc-form.scss Removes CSS outline declarations for form elements
packages/design-system/src/styles/theme/helper.scss Migrates global focus-visible outline to layers.css
packages/design-system/src/styles/layers.css Adds utilities layer with focus-visible outline styles
packages/design-system/src/components/*/**.vue Updates various design system components to use Tailwind outline utilities
/tests//snapshots/*.snap Updates test snapshots to reflect new Tailwind classes

Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.

@JammingBen JammingBen merged commit 19dc7e0 into main Aug 26, 2025
29 checks passed
@JammingBen JammingBen deleted the refactor/tailwind-outline branch August 26, 2025 09:27
openclouders pushed a commit that referenced this pull request Aug 26, 2025
@openclouders openclouders mentioned this pull request Aug 27, 2025
1 task
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants