aws-samples / aws-samples/bedrock-chat
[Feature Request] I would like to organize the structure to allow for color scalability.
- Dominant language
- TypeScript
- Stars
- 1.3k
- Forks
- 535
- Avg merge
- 1d 12h
- Merged PRs (30d)
- 10
Description
## Describe the solution you'd like
`tailwind.config.jsのextend.colors`配下の命名を以下のように整理し、色の追加や削除をしやすい構造にしたいです。
現在は`font-color`や`sea-blue-hover`など、フォントへのみ使用することが適切な色やホバー時のみ使用することが適切な色など、管理が複雑化しやすくなっているように見受けられます。
なので色の拡張性を持たせられるような構造に整理したいです。
I would like to organize the naming under `extend.colors` in `tailwind.config.js` as follows to make the structure easier to add and remove colors.
Currently, it seems that colors such as `font-color` and `sea-blue-hover` are more complicated to manage, such as colors that are appropriate to be used only for fonts and colors that are appropriate to be used only when hovering.
Therefore, we would like to organize the structure so that colors can be scalable.
```js
// before
aws-sea-blue: '',
aws-sea-blue-hover: '',
aws-font-color: '',
red: '',
yellow: '',
gray: '',
```
↓
```js
// after
aws-red: {
DEFAULT: '',
},
aws-sea-blue: {
DEFAULT: '',
hover: '', // どうしてもホバー時のみに使いたい色なら、このように定義することができます
// If you really want to use a color only when hovering, you can define it like this
},
aws-yellow: {
DEFAULT: '',
},
aws-gray: {
DEFAULT: '',
},
aws-black: {
DEFAULT: '',
},
```
## Why the solution needed
UIやデザインを洗練するために必要な工数を削減するため
To reduce man-hours required to refine UI and design.
## Additional context
Add any other context or screenshots about the feature request here.
## Implementation feasibility
Are you willing to collaborate with us to discuss the solution, decide on the approach, and assist with the implementation?
- [x] Yes, I am able to implement the feature and create a pull request.
- [ ] No, I am unable to implement the feature, but I am open to discussing the solution.
Contributor guide
Research direction
Start with tailwind.config.js and audit every usage of the existing extend.colors names, including font-color and sea-blue-hover. Compare those usages with the proposed DEFAULT and hover structure, then update the naming consistently. Done means colors can be added or removed without role-specific top-level names and the UI retains its current appearance.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- tailwindcss, typescript
- Domain
- design, frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100