feat: [input] add new vars less

[zzcr]

PR

PR Checklist

Please check if your PR fulfills the following requirements:

• The commit message follows our Commit Message Guidelines
• Tests for the changes have been added (for bug fixes / features)
• Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

• Bugfix
• Feature
• Code style update (formatting, local variables)
• Refactoring (no functional changes, no api changes)
• Build related changes
• CI related changes
• Documentation content changes
• Other... Please describe:

What is the current behavior?

Issue Number: N/A

What is the new behavior?

Does this PR introduce a breaking change?

• Yes
• No

Other information

Summary by CodeRabbit

• New Features
  • Introduced a new vars.less file for centralized management of CSS custom properties, enhancing theming capabilities with organized color categories and design tokens.
  • Added additional styling variables for consistent UI design, including colors, fonts, spacing, and shadows.
• Improvements
  • Updated styling framework to include new variables, allowing for easier customization and maintenance of the application’s theme.
  • Removed custom scrollbar styles and refined color variable naming for better clarity and consistency.

[coderabbitai]

Walkthrough

The changes introduce a new vars.less file that defines a comprehensive set of CSS custom properties for theming, including colors, fonts, spacing, and sizes. An import statement for vars.less is added to the existing index.less file, allowing the new variables to be utilized in the theme's styling. Additionally, modifications are made to existing styles, including the removal of custom scrollbar styles and updates to variable naming conventions, enhancing the overall theming structure and consistency.

Changes

File Path	Change Summary
packages/theme/src/base/index.less	Added: @import './vars.less'; to include new CSS variables in the theme styles.
packages/theme/src/base/vars.less	Added: CSS custom properties for colors, fonts, spacing, sizes, and shadows, establishing a centralized theming system.
packages/theme/src/input/index.less	Removed: Custom scrollbar styles; updated various color variables for clarity and consistency.
packages/theme/src/input/vars.less	Modified: Updated variable references to align with the new theming structure, simplifying input component styling.
packages/theme/package.json	Modified: Updated stylelint rules, disabling several rules for more flexible styling guidelines.

Possibly related PRs

• fix(input): [input] fix textarea x-design style #2076: Involves modifications to the styling of input components, which may relate to the overall theming and styling introduced in the main PR.
• feat(button): [button] Adapting to the SMB theme #2079: Adapts the button component to the SMB theme, aligning with the theming changes made in the main PR.
• feat(badge): [badge] Adapting to the SMB theme #2087: Focuses on adapting the badge component to the SMB theme, indicating a shared objective of enhancing theme consistency.
• feat(button-group): [button-group] Adapting to the SMB theme #2088: Adapts the button group component to the SMB theme, reinforcing the theme-related changes seen in the main PR.
• feat(button): [button] Adapting to the SMB theme #2104: Introduces changes to the button component, specifically adapting it to the SMB theme, directly related to the main PR's focus on theming.
• feat(button): [button] Adapting to the SMB theme #2120: Continues the adaptation of the button component to the SMB theme, further aligning with the objectives of the main PR.
• fix(theme):　[tree,tooltip,transfer, cascader] update unsolved smb components #2124: Addresses updates to various components, including tree and tooltip, which may relate to the overall theming efforts initiated in the main PR.

🐰 In the meadow, colors bloom,
With variables bright, dispelling gloom.
A theme so rich, in harmony flows,
Custom tokens, where creativity grows.
Hopping through styles, oh what a sight!
A rabbit's delight in the coding night! 🌈✨

Tip

OpenAI O1 model for chat

• We have deployed OpenAI's latest O1 model for chat.
• OpenAI claims that this model has superior reasoning capabilities than their GPT-4o model.
• Please share any feedback with us in the discussions post.

---

Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL

Commits

Files that changed from the base of the PR and between ae80beb and e80d33b.

Files selected for processing (4)

• packages/theme/package.json (3 hunks)
• packages/theme/src/base/vars.less (1 hunks)
• packages/theme/src/input/index.less (5 hunks)
• packages/theme/src/input/vars.less (1 hunks)

Additional comments not posted (39)

packages/theme/package.json (6)

4-4: Verify if the version should be incremented.

The version number remains unchanged at 3.18.1. Please confirm if the changes introduced in this PR warrant a version bump based on the project's versioning strategy (e.g., SemVer).

---

74-74: Verify the rationale behind disabling the custom-property-pattern rule.

The custom-property-pattern stylelint rule has been set to null, which disables the pattern validation for custom properties (CSS variables). While this allows more flexibility in naming custom properties, it may lead to inconsistencies if not properly managed.

Please provide the rationale behind disabling this rule and ensure that there are guidelines in place to maintain consistency in custom property naming.

---

75-75: Stylelint rule update looks good.

Disabling the custom-property-empty-line-before rule is acceptable as it is a matter of code style preference and does not have a significant impact on the functionality.

---

77-78: Verify the rationale behind disabling the alpha-value-notation and color-hex-length rules.

The alpha-value-notation and color-hex-length stylelint rules have been set to null, which disables the enforcement of a specific notation for alpha values and hex color lengths. While this allows more flexibility in writing color values, it may lead to inconsistencies if not properly managed.

Please provide the rationale behind disabling these rules and ensure that there are guidelines in place to maintain consistency in color value notation.

---

79-79: Good practice: Enforcing single quotes for string values.

Setting the string-quotes stylelint rule to "single" is a good practice for maintaining consistency in the codebase. It ensures that all string values in styles use single quotes.

---

80-80: Verify the rationale behind disabling the color-function-notation rule.

The color-function-notation stylelint rule has been set to null, which disables the enforcement of a specific notation for color functions (e.g., rgb(), hsl()). While this allows more flexibility in writing color functions, it may lead to inconsistencies if not properly managed.

Please provide the rationale behind disabling this rule and ensure that there are guidelines in place to maintain consistency in color function notation.

packages/theme/src/input/vars.less (23)

3-3: LGTM!

The copyright notice has been correctly updated.

---

7-9: LGTM!

The open source software disclaimer has been correctly added.

---

14-14: LGTM!

The CSS variable has been correctly updated to align with the new theming structure.

---

16-16: LGTM!

The CSS variable has been correctly updated to align with the new theming structure.

---

18-18: LGTM!

The CSS variable has been correctly updated to align with the new theming structure.

---

20-20: LGTM!

The CSS variable has been correctly updated to align with the new theming structure.

---

22-22: LGTM!

The CSS variable has been correctly updated to align with the new theming structure.

---

24-24: LGTM!

The CSS variable has been correctly updated to align with the new theming structure.

---

26-26: LGTM!

The CSS variable has been correctly updated to align with the new theming structure.

---

28-28: LGTM!

The CSS variable has been correctly updated to align with the new theming structure.

---

30-30: LGTM!

The CSS variable has been correctly updated to align with the new theming structure.

---

32-32: LGTM!

The CSS variable has been correctly updated to align with the new theming structure.

---

33-34: LGTM!

The new CSS variable for the input icon hover state has been correctly added and aligns with the new theming structure.

---

36-36: LGTM!

The CSS variable has been correctly updated to align with the new theming structure.

---

38-38: LGTM!

The CSS variable for the input suffix top position has been correctly updated to a fixed value.

---

40-40: LGTM!

The CSS variable for the input suffix top position in the medium size has been correctly updated to a fixed value.

---

42-42: LGTM!

The CSS variable for the input suffix top position in the small size has been correctly updated to a fixed value.

---

44-44: LGTM!

The CSS variable for the input suffix top position in the mini size has been correctly updated to a fixed value.

---

46-46: LGTM!

The CSS variable has been correctly updated to align with the new theming structure.

---

48-48: LGTM!

The CSS variable has been correctly updated to align with the new theming structure.

---

50-50: LGTM!

The CSS variable has been correctly updated to align with the new theming structure.

---

52-52: LGTM!

The CSS variable has been correctly updated to align with the new theming structure.

---

54-54: LGTM!

The

packages/theme/src/input/index.less (5)

43-43: LGTM!

The placeholder color variable has been appropriately renamed to --ti-input-placeholder-text-color, improving clarity and consistency with the naming convention.

---

86-89: LGTM!

The fill color variables for the clear icon have been appropriately renamed to more generic names:

• --ti-input-icon-color
• --ti-input-icon-color-hover

This makes them applicable to all icons and improves consistency with the naming convention.

---

99-99: LGTM!

The input count color variable has been appropriately renamed to --ti-input-count-font-color, improving clarity and consistency with the naming convention.

---

110-110: LGTM!

The input count text length color variable has been appropriately renamed to a more generic name --ti-input-text-color, making it applicable to all input text and improving consistency with the naming convention.

---

Line range hint 328-406:
This code segment is unchanged. Skipping review.

packages/theme/src/base/vars.less (5)

1-510: Excellent structure and organization!

The file is well-structured and organized into clear sections for different categories of variables. The logical grouping of variables based on their purpose and usage makes it easy to navigate and understand the purpose of each variable. The inclusion of comments provides additional context and improves the overall readability and maintainability of the code.

---

1-298: Comprehensive color variable definitions!

The file defines a comprehensive set of color variables for various purposes, such as brand colors, neutral colors, and functional colors. The color variables are organized into a logical hierarchy, with a consistent naming convention that makes it easy to understand the purpose of each color. The use of hexadecimal notation for color values is a standard practice and ensures compatibility across different browsers.

---

396-427: Well-defined font variables!

The font variables provide a solid foundation for consistent typography throughout the application. The use of fallback fonts ensures that the text remains readable even if the primary font is not available. The range of font sizes caters to different content hierarchies and helps maintain visual consistency. The inclusion of line height and font weight variables allows for fine-grained control over the typography.

---

474-497: Consistent spacing and size variables!

The spacing and size variables promote consistency and maintainability by centralizing the values for commonly used spacings and sizes. The use of a base unit allows for easy scaling and adjustment of the values if needed. The predefined sizes for component heights ensure a consistent look and feel across the application.

---

436-460: Comprehensive shadow variables!

The shadow variables provide a consistent way to apply shadows to elements throughout the application. The different levels of shadows allow for visual hierarchy and depth. The naming convention of the shadow variables makes it clear which shadow to use based on the desired intensity and direction. The use of rgba() notation for the shadow color allows for transparency and flexibility in customizing the shadow appearance.

---

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

Share

• X
• Mastodon
• Reddit
• LinkedIn

Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai generate interesting stats about this repository and render them as a table.
  • @coderabbitai show all the console.log statements in this repository.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[github-actions]

[e2e-test-warn]
The component to be tested is missing.

The title of the Pull request should look like "fix(vue-renderless): [action-menu, alert] fix xxx bug".

Please make sure you've read our contributing guide