feat/global-css-management #13
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Added webp format background images: - bg-all-1.webp - bg-blue-1.webp - bg-blue-2.webp - bg-purple-1.webp note* WebP image with a quality range of 80
Export svg from Figma Component Asset and use as reusable popup Ref:[FD] setup global component -> เทรุ ``` โหลดภาพ popup ทำเป็น component ที่ใส่ <slot /> ไปตรงกลาง variance size : large, small color : ตั้งชื่อได้เลยๆ แต่อยากได้ doc แปะชื่อคู่สีที่แสดง ``` Docs and example will be added later
add docs for Commit 2ef3e01
- Add 8 frame SVG assets - Add reusable Frame.astro component with size and color props - Add frame-demo and frame-test pages for testing Ref:[FD] setup global component -> เทรุ ``` frame : RPKM ทำเหมือน popup ```
- Add @fontsource packages for Orbitron, IBM Plex Sans Thai, and Zen Dots fonts - Import fonts in MainLayout for global availability Remarks* I rely on design token in figma first but the h1 is typically larger than the h2 and so on. but in figma design, the h5 is larger than h4 and so on krub.
- Add @lucide/astro package for icon components Ref: [FD] setup global component -> เทรุ ``` icon -> (maybe lucide icon?) ```
After discussion about H1-H5 hierarchy conflict between Design System and CSS Settings, the typography will be removed and will be using Tailwind System.
- Add ButtonFd component - SVG-based styling with glow effects and transitions - Slot-based icon system for flexible icon placement - Add ButtonRpkm component with RPKM design system styling *Remarks Button behavior still needs to be fixed.
- add docstring for each components - rm redundant css styling and use tailwind
MasterIceZ
requested changes
Jul 7, 2025
|
Resolved conflicts, please review. |
MasterIceZ
requested changes
Jul 7, 2025
src/layouts/MainLayout.astro
Outdated
Comment on lines
5
to
7
| import "@fontsource-variable/orbitron"; | ||
| import "@fontsource/ibm-plex-sans-thai"; | ||
| import "@fontsource/zen-dots" |
There was a problem hiding this comment.
Please move these to global.css
- Remove font imports from MainLayout.astro
Change @fontsource-variable/ibm-plex-sans-thai to @fontsource/ibm-plex-sans-thai
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
Implement global CSS management and design system components with Tailwind integration
• Design System Components: Add ButtonFd, ButtonRpkm, Frame, and Popup components with SVG-based styling
• Typography System: Implement Figma-based design tokens with IBM Plex Sans Thai font support use fontsource
• Icon Integration: Add Lucide icons support across components
Key Features