search

monosus / super-static

0 stars 0 forks source link

ボタンスタイルの試し #49

Closed github-actions[bot] closed 7 months ago

github-actions[bot] commented 7 months ago

This is a draft PR for branch feature_issue-48 related to the issue #48.

やったこととしては余白などを相対的に計算してスタイリングした。 特に上下の余白はline-heightから取ることで行高と一貫性を取れる形になっている。

Summary by CodeRabbit

- New Feature: 新しいボタンスタイルが追加されました。これにより、UIの一貫性と使いやすさが向上します。
- Style: `tokens.css`と`ui.css`に新たなCSS変数とクラスが追加され、ボタンのデザインが改善されました。
github-actions[bot] commented 7 months ago

Image description CodeRabbit

ウォークスルー: この差分では、新しいボタンのスタイルが追加されています。CSS変数が定義され、それらを用いたボタンのスタイルが設定されました。また、ボタン要素に対して新しいスタイルを適用するためのクラス名が追加されています。

変更点:

ファイル 要約
src/assets/tokens.css 新たに3つのCSS変数（--line-height、--font-size、--buton-border-radius）が追加され、それぞれ1.5、1rem、0.25emの値が設定されています。
src/assets/ui.css 新しい.buttonクラスが追加され、ボタンの基本的なスタイルとホバー状態でのフィルター効果を定義しています。
src/pages/index.tsx ボタン要素にclassName="button"が追加され、新しいスタイルが適用されています。
Uplevel your code reviews with CodeRabbit Pro ### CodeRabbit Pro If you like this project, please support us by purchasing the [Pro version](https://coderabbit.ai). The Pro version has advanced context, superior noise reduction and several proprietary improvements compared to the open source version. Moreover, CodeRabbit Pro is free for open source projects.