Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: new light theme / inset theme for light and black theme #1288

Merged
merged 3 commits into from
Mar 27, 2025

Conversation

hiderr
Copy link
Collaborator

@hiderr hiderr commented Mar 24, 2025

Sidebar Components Styling and Theming Update

Key Changes

Sidebar and Navigation

  • Increased icon sizes from 12px to 14px for "More", "User Management", and "Settings" menu items
  • Added Inset mode support for sidebar with corresponding spacing
  • Updated navigation elements styling with light/dark theme support
  • Implemented new submenu spacing system (228px in Inset mode, 220px in regular mode)

Theming

  • Integrated useTheme hook across sidebar components for consistent theme handling
  • Updated color variables in shared-style-variables.css
  • Added new style variants for light theme
  • Implemented special topbar styles for light theme

Components

  • Sheet: added isLightTheme variant for proper theme-based rendering
  • Breadcrumbs: updated hover effects based on current theme
  • NavbarSkeleton: reworked styling system with gradient support for active elements
  • SidebarSearchLegacy: updated logo container margins and padding

Optimization

  • Removed unused code color definitions from Tailwind configuration
  • Simplified certain style definitions for better maintainability
  • Optimized classes for better performance

Technical Details

  • Utilized cn utility for conditional class application
  • Implemented new conditional styling system based on isInset and isLightTheme
  • Updated CSS variable structure for more flexible theming

Impact

These changes improve the overall UI consistency and provide better theme support across the application. The new styling system makes the interface more maintainable and visually cohesive, especially in light theme mode.

Testing Notes

  • Verified in both light and dark themes
  • Tested sidebar behavior in both regular and Inset modes
  • Confirmed proper hover states and active indicators
  • Validated responsive behavior and spacing consistency

Related Changes

  • Updated component documentation
  • Refactored style organization
  • Improved theme switching logic

These updates enhance the user experience while maintaining the application's visual hierarchy and improving code maintainability.

image
image

@CLAassistant
Copy link

CLAassistant commented Mar 24, 2025

CLA assistant check
Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you all sign our Contributor License Agreement before we can accept your contribution.
1 out of 2 committers have signed the CLA.

✅ 3em
❌ hiderr
You have signed the CLA already but the status is still pending? Let us recheck it.

Copy link

netlify bot commented Mar 24, 2025

Deploy Preview for harness-design ready!

Name Link
🔨 Latest commit 0c65aba
🔍 Latest deploy log https://app.netlify.com/sites/harness-design/deploys/67e54badb451660008d91bfc
😎 Deploy Preview https://deploy-preview-1288--harness-design.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

Copy link

netlify bot commented Mar 24, 2025

Deploy Preview for harness-xd-review ready!

Name Link
🔨 Latest commit 0c65aba
🔍 Latest deploy log https://app.netlify.com/sites/harness-xd-review/deploys/67e54bad85f28d0008a6c65e
😎 Deploy Preview https://deploy-preview-1288--harness-xd-review.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@hiderr hiderr force-pushed the update-color-tokens branch 5 times, most recently from 9c8dac4 to 36fbacc Compare March 26, 2025 11:03
@hiderr hiderr marked this pull request as ready for review March 26, 2025 11:07
@hiderr hiderr requested a review from knagurski as a code owner March 26, 2025 11:07
@hiderr hiderr force-pushed the update-color-tokens branch 5 times, most recently from 6abe923 to 6f17bbe Compare March 27, 2025 07:53
@3em 3em force-pushed the update-color-tokens branch from 6f17bbe to ed8b1f7 Compare March 27, 2025 08:25
@3em 3em force-pushed the update-color-tokens branch from 2c0bfd0 to 1b9f4d3 Compare March 27, 2025 12:54
@3em 3em force-pushed the update-color-tokens branch from 1b9f4d3 to 9455319 Compare March 27, 2025 12:59
@3em 3em changed the title added colors to variables feat: new light theme / inset theme for light and black theme Mar 27, 2025
@3em 3em merged commit e54787a into main Mar 27, 2025
16 checks passed
@3em 3em deleted the update-color-tokens branch March 27, 2025 13:11
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants