The aim of this pull request is to establish the foundation for CO-DE UI theming and customization.
Approach
I've categorized the UI theming into two classes to ensure consistent design and flexibility.
Class 1: CODE-Editor Components
For editor-specific elements, we've decided on two main themes (Light & Dark) with Tokyo Night Storm and Tokyo Night Light as options. Components exclusive to the editor will adhere closely to the Tokyo Night design system.
Class 2: Non-Editor Components
Other components will maintain Tokyo Night color consistency while allowing slight deviations. Shadcn UI components, utilizing radix ui primitives, lucide icons, and tailwind, provide elegant, copy-paste-ready elements. Variants and conditional classes are easily created through tw-merge and clsx.
Implementation Highlights
Replaced theme-switching implementation with ThemeProvider context.
Extended Tailwind's color names in the configuration.
Utilized alias import "@shadcn..." for clear separation.
Next Steps
In the upcoming PR, I'll finalize the color scheme and naming for the editor post-login screen development. Your feedback is greatly appreciated! Thank you.
Your constructive feedback is welcome as I aim to make further improvements.
Initial CO-DE UI Theming and Component Setup
Goal
The aim of this pull request is to establish the foundation for CO-DE UI theming and customization.
Approach
I've categorized the UI theming into two classes to ensure consistent design and flexibility.
Class 1: CODE-Editor Components
For editor-specific elements, we've decided on two main themes (Light & Dark) with Tokyo Night Storm and Tokyo Night Light as options. Components exclusive to the editor will adhere closely to the Tokyo Night design system.
Class 2: Non-Editor Components
Other components will maintain Tokyo Night color consistency while allowing slight deviations. Shadcn UI components, utilizing radix ui primitives, lucide icons, and tailwind, provide elegant, copy-paste-ready elements. Variants and conditional classes are easily created through tw-merge and clsx.
Implementation Highlights
Next Steps
In the upcoming PR, I'll finalize the color scheme and naming for the editor post-login screen development. Your feedback is greatly appreciated! Thank you.
Your constructive feedback is welcome as I aim to make further improvements.