Fix variables colors

[makoto-ogata]

修正前	修正後

What

Qiita CLIで色の変数が当たっておらず、表示くずれが起こっていた

How

もともとQiitaで使用していた色の変数を読み込んでいたので、Qiitaで変更された色の変数がQiita CLIでは変更されずそのまま使われていた。

変更点

• var(--color-gray-0)という変数がQiitaではvar(--color-gray0)になっていてgrayの後のハイフンが削除されていた
  • そのためQiita CLIでは色のスタイルが当たっていなかったのでQiita CLIも同様にハイフンを削除した
  • 追加でgray-5はQiitaでは使われておらず削除されていたので、Qiita CLIでも削除した

Why

Refs

[gemini-code-assist]

Hello @makoto-ogata, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

Summary of Changes

This pull request addresses a color discrepancy issue in the Qiita CLI. The color variables used in the Qiita CLI were outdated compared to the current Qiita website, leading to display inconsistencies. To resolve this, the PR updates the color variables in the Qiita CLI to match the latest Qiita website styles. Specifically, it corrects the variable name for gray-0 and removes the unused gray-5 variable.

Highlights

• Color Variable Update: The primary focus is to synchronize color variables between Qiita and Qiita CLI to ensure consistent styling.
• Gray Color Fix: The var(--color-gray-0) variable is corrected to var(--color-gray0) to align with the current Qiita website.
• Unused Variable Removal: The var(--color-gray-5) variable, which is no longer used in Qiita, is removed from the Qiita CLI.

Changelog

Click here to see the changelog

• src/client/components/SidebarArticles.tsx
  • Replaced Colors.gray5 with Colors.gray10 in the hover background color for article summaries (line 113).
  • Replaced Colors.gray5 with Colors.gray10 in the hover background color for articles list items (line 148).
• src/client/components/SidebarContents.tsx
  • Replaced Colors.gray5 with Colors.gray10 in the hover background color for articles list items (line 657).
• src/client/lib/variables.ts
  • Renamed gray0 from var(--color-gray-0) to var(--color-gray0) (line 20).
  • Removed gray5: var(--color-gray-5) (line 21).
  • Updated gray10 from var(--color-gray-10) to var(--color-gray10) (line 21).
  • Updated green10 from var(--color-green-10) to var(--color-green10) (line 34).
  • Updated yellow10 from var(--color-yellow-10) to var(--color-yellow10) (line 47).
  • Updated red10 from var(--color-red-10) to var(--color-red10) (line 60).
  • Updated blue10 from var(--color-blue-10) to var(--color-blue10) (line 73).
• src/client/templates/Main.tsx
  • Replaced Colors.gray5 with Colors.gray10 as the background color for the main content area (line 15).

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in issue comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist is currently in preview and may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments to provide feedback.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

---

Did you know?

The first version of CSS was proposed by Håkon Wium Lie on October 10, 1994.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

The pull request aims to fix color variable inconsistencies between Qiita and Qiita CLI. The changes involve updating color variables in src/client/lib/variables.ts and applying the updated variables in several components. Overall, the changes seem reasonable and address the described issue.

Summary of Findings

• Color Usage Consistency: The changes ensure that the Qiita CLI uses the same color variables as Qiita, resolving the visual discrepancies. This improves the user experience by providing a consistent look and feel.
• Unused Color Variable: The removal of gray-5 aligns the Qiita CLI with the current color scheme used in Qiita, as this variable is no longer used there.
• Color Variable Naming: The change from var(--color-gray-0) to var(--color-gray0) and similar changes for other colors ensures that the Qiita CLI uses the correct color variables, matching the current Qiita implementation.

Merge Readiness

The pull request appears to be addressing a valid issue and the changes seem reasonable. I am unable to approve the pull request, and other reviewers should review and approve this code before merging. The changes look good and are ready to be merged.

[gemini-code-assist]

The removal of gray5 aligns the Qiita CLI with the current color scheme used in Qiita, as this variable is no longer used there.

[Copilot]

Pull Request Overview

This pull request updates the color variables used throughout the Qiita CLI to match the changes made on Qiita’s side, ensuring that the correct color styles are applied during hover and background rendering. Key changes include:

• Updating hover background colors in SidebarArticles, SidebarContents, and Main components from Colors.gray5 to Colors.gray10.
• Modifying the color variable definitions in variables.ts to remove hyphens (e.g. from "var(--color-gray-0)" to "var(--color-gray0)").
• Removing the unused gray5 color variable to align with Qiita’s updated color system.

Reviewed Changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated no comments.

File	Description
src/client/components/SidebarArticles.tsx	Updated hover styles to use Colors.gray10 instead of Colors.gray5.
src/client/components/SidebarContents.tsx	Updated hover styles to use Colors.gray10 instead of Colors.gray5.
src/client/templates/Main.tsx	Updated main background color to use Colors.gray10 instead of Colors.gray5.
src/client/lib/variables.ts	Updated all color variable definitions to remove hyphens and dropped gray5.

Comments suppressed due to low confidence (5)

src/client/components/SidebarArticles.tsx:113

• Ensure that the new hover background color (Colors.gray10) matches the intended design specifications compared to the previous Colors.gray5.

backgroundColor: Colors.gray10,

src/client/components/SidebarArticles.tsx:148

• Confirm that updating the hover color to Colors.gray10 in this component provides a consistent user experience alongside other parts of the application.

backgroundColor: Colors.gray10,

src/client/components/SidebarContents.tsx:657

• Verify that this updated hover background color aligns with the overall UI design and does not cause any visual regressions.

backgroundColor: Colors.gray10,

src/client/templates/Main.tsx:15

• Double-check that the new main background color (Colors.gray10) is applied as intended and maintains proper visual contrast.

backgroundColor: Colors.gray10,

src/client/lib/variables.ts:20

• Ensure the updated variable naming (without hyphens) consistently reflects Qiita’s changes and that no outdated references (like the removed gray5) remain in the codebase.

gray0: "var(--color-gray0)",

[ohakutsu]

LGTM