feat: Adds variable default value handling in build theme #3122
Conversation
WalkthroughThis pull request introduces new files and updates to the build process to transform LESS variables into a JavaScript object format. A function in one file reads and processes a LESS file and outputs a JavaScript file containing CSS variables, while another file processes default values for these variables. The build process script is updated to import and invoke these new functions, integrating the LESS variable transformation into the overall build flow. Changes
Sequence Diagram(s)sequenceDiagram
participant GulpDist as gulp-dist.js
participant BVar as buildVarToObj.js
participant WValue as writeDefaultValue.js
participant FS as File System
GulpDist->>BVar: Import & invoke buildVarToObj()
BVar->>FS: Read ../src/base/vars.less (UTF-8)
BVar->>BVar: Transform LESS variables (replace, format)
BVar->>FS: Write transformed content to mapVar.js
GulpDist->>WValue: Import & invoke writeDefaultValue()
WValue->>FS: Check for vars.less and process defaults across directories
Possibly related PRs
Suggested reviewers
Poem
Warning There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure. 🔧 ESLint
ERR_PNPM_OPTIONAL_DEPS_REQUIRE_PROD_DEPS Optional dependencies cannot be installed without production dependencies Tip ⚡🧪 Multi-step agentic review comment chat (experimental)
✨ Finishing Touches
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
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)
Other keywords and placeholders
CodeRabbit Configuration File (
|
|
[e2e-test-warn] 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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (15)
packages/theme/build/buildVarToObj.js (2)
1-13: Consider making the path resolution more robustThe function effectively converts LESS variables to a JavaScript object, which enables theme variables to be used in JavaScript. However, the relative file paths could cause issues depending on where this script is executed from.
Consider using path resolution from the project root:
-import fs from 'node:fs' +import fs from 'node:fs' +import path from 'node:path' export default () => { - let varsString = fs.readFileSync('../src/base/vars.less', {encoding: 'utf-8'}) + const basePath = path.resolve(__dirname, '..') + let varsString = fs.readFileSync(path.resolve(basePath, 'src/base/vars.less'), {encoding: 'utf-8'}) varsString = varsString.replace(':root', 'export const mapVar =') .replaceAll(' --tv', ' "--tv') .replaceAll(': ', ':') .replaceAll(':', '": "') .replaceAll(';', '",') - fs.writeFileSync('./mapVar.js', varsString) + fs.writeFileSync(path.resolve(basePath, 'build/mapVar.js'), varsString) }
4-12: Add error handling for file operationsThe file reading and writing operations should include error handling to gracefully manage potential failures during the build process.
Add try-catch blocks to handle potential errors:
export default () => { - let varsString = fs.readFileSync('../src/base/vars.less', {encoding: 'utf-8'}) + try { + let varsString = fs.readFileSync('../src/base/vars.less', {encoding: 'utf-8'}) + + varsString = varsString.replace(':root', 'export const mapVar =') + .replaceAll(' --tv', ' "--tv') + .replaceAll(': ', ':') + .replaceAll(':', '": "') + .replaceAll(';', '",') + + fs.writeFileSync('./mapVar.js', varsString) + console.log('Successfully generated mapVar.js') + } catch (error) { + console.error('Error generating mapVar.js:', error) + process.exit(1) + } - varsString = varsString.replace(':root', 'export const mapVar =') - .replaceAll(' --tv', ' "--tv') - .replaceAll(': ', ':') - .replaceAll(':', '": "') - .replaceAll(';', '",') - - fs.writeFileSync('./mapVar.js', varsString) }packages/theme/src/tooltip/vars.less (1)
64-66: Consistent Light Theme Fallbacks
Light theme tooltip defaults now fall back to a white background and a text color of#191919.
Note: There’s a minor extra space in line 66 after the comma which could be cleaned up for consistency.packages/theme/src/user/vars.less (1)
15-21: Enhance fallback values for User variables.
The updated properties now include fallback values, which improves the robustness of the theme. Ensure that these default values (e.g. 14px, #f5f5f5, #808080, #c2c2c2) align with your overall design system and provide a consistent look when the primary variables are undefined.packages/theme/src/upload-dragger/vars.less (1)
19-35: Robust fallback configuration for UploadDragger variables.
The modifications correctly add fallback values for essential CSS properties (background color, border color, border radius, hover text color, icon color, text color, and font size) within the UploadDragger component. Please verify that these defaults are in line with the design specifications used elsewhere in the project.packages/theme/src/user-head/vars.less (1)
14-19: Consistent fallback values for UserHead styling.
The updates for the font size and border radius now include fallback values, ensuring that components render properly even if the base theme variables are missing. Confirm that a 14px font size and 2px border radius fit within your visual design standards.packages/theme/src/dept/vars.less (1)
14-19: Improved fallback settings for Dept variables.
Each department-related variable now has a fallback value—this improves reliability by ensuring that, if the primary theme variable isn’t set, a sensible default is applied. Double-check that the provided defaults (e.g. 14px, #191919, 600, #f5f5f5, 6px) are consistent with the rest of your theme.packages/theme/src/card-template/vars.less (2)
15-26: Updated CardTemplate variable definitions with fallbacks.
The changes add fallback values for the tool icon size and header font size, ensuring consistency even when corresponding variables are undefined. Please verify that a default of 16px for both properties fits well with your component's design.
31-31: Box-shadow fallback for CardTemplate.
The updated--tv-CardTemplate-more-box-shadownow specifies a default value. It’s a good practice to include such fallbacks, but ensure that this shadow style remains consistent with other shadow definitions across the project as your theme evolves.packages/theme/src/image-viewer/vars.less (1)
13-27: Consistent Fallback Defaults for ImageViewer VariablesThe fallback values added for the CSS custom properties improve resilience when the primary theme variables aren’t defined. One small note: the property
--tv-ImageViewer-next-font-sizeon line 20 is hard-coded to24pxand doesn’t use thevar()fallback construct as the other properties do. Please confirm if this is an intentional design decision for consistency in default sizing.packages/theme/src/statistic/vars.less (1)
1-31: Improved Resiliency in Statistic Variables through FallbacksThe updates provide sensible default values for typography and layout in the Statistic component, ensuring proper display even when theme variables are missing. One suggestion: consider whether the margin values (lines 13, 15, and 17) could also be defined using
var()with fallbacks, to maintain maximum consistency across the theming system.packages/theme/src/numeric/vars.less (1)
50-56: Fallbacks for Disabled State Styling:
The new default values for disabled text (--tv-Numeric-input-disabled-text-color), background (--tv-Numeric-input-disabled-bg-color), border (--tv-Numeric-input-border-color-disabled), and button background (--tv-Numeric-input-btn-disabled-bg-color) ensure that even when custom values aren’t provided, the component presents a consistently styled disabled state.packages/theme/src/form-item/vars.less (1)
43-45: Large Form Item Sizing Defaults
The modifications for large form items (using fallbacks of40pxfor height and24pxfor margin-bottom) are effective. It’s worthwhile to verify these numbers against the design system for full consistency.packages/theme/src/bulletin-board/vars.less (1)
15-57: Consider Inline Explanations for Non-Obvious DefaultsWhile the fallbacks are clear, a brief inline comment explaining choices—especially for values that might not be immediately intuitive (e.g., why
#191919is preferred for text versus other shades)—could help future maintainers better understand the design rationale.packages/theme/src/tree-menu/vars.less (1)
17-79: Comprehensive Fallback Values in Tree Menu VarsThe Tree Menu component benefits from a thorough update of fallback definitions covering dimensions, colors, and spacing. This attention to detail enhances the overall styling resilience. It might be worthwhile to double-check that the fallback source variables (e.g.,
--tv-size-height-md,--tv-space-xl) are uniformly defined across the theme configuration to avoid unexpected overrides.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (101)
packages/theme/build/buildVarToObj.js(1 hunks)packages/theme/build/gulp-dist.js(1 hunks)packages/theme/build/mapVar.js(1 hunks)packages/theme/build/writeDefaultValue.js(1 hunks)packages/theme/src/action-menu/vars.less(1 hunks)packages/theme/src/alert/vars.less(2 hunks)packages/theme/src/amount/vars.less(1 hunks)packages/theme/src/badge/vars.less(1 hunks)packages/theme/src/base-select/vars.less(1 hunks)packages/theme/src/base/vars.less(4 hunks)packages/theme/src/breadcrumb/vars.less(1 hunks)packages/theme/src/bulletin-board/vars.less(1 hunks)packages/theme/src/button-group/vars.less(1 hunks)packages/theme/src/button/vars.less(3 hunks)packages/theme/src/calendar-view/vars.less(1 hunks)packages/theme/src/calendar/vars.less(1 hunks)packages/theme/src/card-template/vars.less(2 hunks)packages/theme/src/card/vars.less(3 hunks)packages/theme/src/carousel-item/vars.less(1 hunks)packages/theme/src/carousel/vars.less(1 hunks)packages/theme/src/cascader-menu/vars.less(1 hunks)packages/theme/src/cascader/vars.less(1 hunks)packages/theme/src/chart-core/vars.less(1 hunks)packages/theme/src/checkbox-button/vars.less(1 hunks)packages/theme/src/checkbox/vars.less(1 hunks)packages/theme/src/collapse-item/vars.less(1 hunks)packages/theme/src/collapse/vars.less(1 hunks)packages/theme/src/color-picker/vars.less(1 hunks)packages/theme/src/color-select-panel/vars.less(1 hunks)packages/theme/src/crop/vars.less(1 hunks)packages/theme/src/dept/vars.less(1 hunks)packages/theme/src/dialog-box/vars.less(1 hunks)packages/theme/src/divider/vars.less(1 hunks)packages/theme/src/drawer/vars.less(1 hunks)packages/theme/src/drop-times/vars.less(1 hunks)packages/theme/src/dropdown-menu/vars.less(1 hunks)packages/theme/src/espace/vars.less(1 hunks)packages/theme/src/fall-menu/vars.less(1 hunks)packages/theme/src/file-upload/vars.less(1 hunks)packages/theme/src/filter-box/vars.less(1 hunks)packages/theme/src/filter-panel/vars.less(1 hunks)packages/theme/src/floatbar/vars.less(1 hunks)packages/theme/src/fluent-editor/vars.less(1 hunks)packages/theme/src/form-item/vars.less(1 hunks)packages/theme/src/form/vars.less(1 hunks)packages/theme/src/grid/vars.less(1 hunks)packages/theme/src/guide/vars.less(1 hunks)packages/theme/src/hrapprover/vars.less(1 hunks)packages/theme/src/image-viewer/vars.less(1 hunks)packages/theme/src/image/vars.less(1 hunks)packages/theme/src/input/vars.less(2 hunks)packages/theme/src/ip-address/vars.less(1 hunks)packages/theme/src/link-menu/vars.less(1 hunks)packages/theme/src/link/vars.less(1 hunks)packages/theme/src/loading/vars.less(1 hunks)packages/theme/src/modal/vars.less(2 hunks)packages/theme/src/nav-menu/vars.less(1 hunks)packages/theme/src/notify/vars.less(1 hunks)packages/theme/src/numeric/vars.less(3 hunks)packages/theme/src/pager/vars.less(1 hunks)packages/theme/src/pop-upload/vars.less(1 hunks)packages/theme/src/popconfirm/vars.less(1 hunks)packages/theme/src/popeditor/vars.less(1 hunks)packages/theme/src/popover/vars.less(1 hunks)packages/theme/src/qr-code/vars.less(1 hunks)packages/theme/src/radio-button/vars.less(1 hunks)packages/theme/src/radio/vars.less(1 hunks)packages/theme/src/rate/vars.less(1 hunks)packages/theme/src/rich-text-editor/vars.less(1 hunks)packages/theme/src/roles/vars.less(1 hunks)packages/theme/src/scroll-text/vars.less(1 hunks)packages/theme/src/scrollbar/vars.less(1 hunks)packages/theme/src/search/vars.less(1 hunks)packages/theme/src/skeleton-item/vars.less(2 hunks)packages/theme/src/slider/vars.less(1 hunks)packages/theme/src/split/vars.less(1 hunks)packages/theme/src/statistic/vars.less(1 hunks)packages/theme/src/steps/vars.less(1 hunks)packages/theme/src/switch/vars.less(3 hunks)packages/theme/src/table/vars.less(1 hunks)packages/theme/src/tag-group/vars.less(1 hunks)packages/theme/src/tag/vars.less(4 hunks)packages/theme/src/tall-storage/vars.less(1 hunks)packages/theme/src/text-popup/vars.less(1 hunks)packages/theme/src/textarea/vars.less(1 hunks)packages/theme/src/time-select/vars.less(1 hunks)packages/theme/src/time-spinner/vars.less(1 hunks)packages/theme/src/toggle-menu/vars.less(1 hunks)packages/theme/src/tooltip/vars.less(1 hunks)packages/theme/src/top-box/vars.less(1 hunks)packages/theme/src/transfer/vars.less(1 hunks)packages/theme/src/tree-menu/vars.less(1 hunks)packages/theme/src/tree/vars.less(1 hunks)packages/theme/src/upload-dragger/vars.less(1 hunks)packages/theme/src/upload-list/vars.less(1 hunks)packages/theme/src/upload/vars.less(1 hunks)packages/theme/src/user-card/vars.less(1 hunks)packages/theme/src/user-contact/vars.less(1 hunks)packages/theme/src/user-head/vars.less(1 hunks)packages/theme/src/user-link/vars.less(1 hunks)packages/theme/src/user/vars.less(1 hunks)
🧰 Additional context used
🪛 Biome (1.9.4)
packages/theme/build/writeDefaultValue.js
[error] 93-93: eval() exposes to security risks and performance issues.
See the MDN web docs for more details.
Refactor the code so that it doesn't need to call eval().
(lint/security/noGlobalEval)
🔇 Additional comments (293)
packages/theme/src/collapse/vars.less (1)
14-14: Good enhancement of CSS variable robustnessAdding a fallback value of
#f0f0f0to the CSS variable ensures that the divider line will have a sensible default color if the primary variable--tv-color-border-divideris not defined. This improves the reliability of the component's styling.packages/theme/src/qr-code/vars.less (1)
3-3: Appropriate fallback value for QR code backgroundAdding a white (
#ffffff) fallback value for the QR code container background is a good choice, as it ensures proper contrast for the QR code to remain scannable even if the primary variable is missing.packages/theme/src/file-upload/vars.less (1)
14-14: Good default font size choiceAdding the fallback value of
14pxfor font size is appropriate and follows the pattern of providing sensible defaults across the codebase.packages/theme/src/steps/vars.less (1)
254-254: Consistent fallback implementation for spacingThe addition of the
24pxfallback for the XXL spacing variable is consistent with the approach used in other files and provides a good default padding value for the timeline items.packages/theme/build/gulp-dist.js (1)
12-16: Well-structured integration of theme variable processingThe addition of
buildVarToObjandwriteDefaultValuefunctions streamlines the theme variable processing pipeline. Calling these functions at the module level ensures they execute before any Gulp tasks run, which is appropriate for setting up the necessary theme variable transformations.packages/theme/src/dropdown-menu/vars.less (1)
15-15: Good enhancement with fallback valueAdding the fallback value
0 4px 16px 0 rgba(0, 0, 0, 0.08)to the box shadow variable ensures the dropdown menu maintains proper styling even when the primary variable--tv-shadow-3-downis not defined. This improves the component's visual consistency across different themes.packages/theme/src/tree/vars.less (1)
68-68: Appropriate fallback for highlight backgroundThe addition of
#f5f5f5as a fallback value for the tree node highlight background color provides a sensible default that ensures visual feedback remains functional even when the primary variable--tv-color-bg-activeis unavailable.packages/theme/src/cascader/vars.less (2)
51-51: Good fallback for text color consistencyAdding
#191919as a fallback for the list text color ensures consistent typography even when the primary variable--tv-color-textis not defined, maintaining readability across themes.
55-55: Appropriate hover state fallbackThe addition of
#f5f5f5as a fallback for the hover background color ensures users still get visual feedback during interactions even when the primary variable--tv-color-bg-hoveris not available. This maintains a consistent user experience across different theme configurations.packages/theme/src/textarea/vars.less (1)
15-63: Consistent Fallback Values Added to Textarea Variables.
The update systematically adds fallback values to each CSS custom property, ensuring that the Textarea component renders with predictable styling even when a primary theme variable is missing. The provided default values (e.g.,#191919for text color,14pxfor font size) align well with typical design expectations.packages/theme/src/link/vars.less (1)
15-94: Enhanced Fallbacks for Link Styling Properties.
Each link-related property now includes a fallback value (for instance, font size is set asvar(--tv-font-size-default, 14px)and colors use defaults like#1476ff), which helps ensure uniform styling across different usage scenarios. The changes are consistent and improve the robustness of the Link component’s styling.packages/theme/src/carousel-item/vars.less (1)
14-18: Robust Fallbacks for Carousel Item Variables.
The carousel item's key style properties—such as the title height, text color, background color, and font size—now use fallback values (e.g.,40px,#ffffff,#191919,14px). This ensures that the component maintains its intended design even when custom variables are not provided.packages/theme/src/cascader-menu/vars.less (1)
15-17: Fallback Value Added for Cascader Menu Border Color.
Modifying the border color to include a fallback (var(--tv-color-border-divider, #f0f0f0)) guarantees that the Cascader Menu maintains a defined border style even when the primary variable isn’t set. This change is consistent with the overall theme strategy.packages/theme/src/modal/vars.less (1)
15-123: Comprehensive Fallbacks for Modal Component Variables.
An extensive range of modal-related properties—spanning the mask, global box styling, status icon colors, header paddings, title styles, body content, footer, and message block—now include fallback values. This comprehensive approach enhances the resilience of the modal styling. One point to verify is the fallback for the mask background (rgba(0, 0, 0, 20%)); please confirm that your CSS processor and target browsers fully support percentage-based alpha values.packages/theme/src/badge/vars.less (1)
15-43: Robust Fallbacks for Badge Variables
The updated declarations now include explicit fallback values (e.g.999pxfor border-radius,4pxfor horizontal padding, etc.), ensuring that the component displays a consistent style even when the primary variables are not defined. Please confirm that these fallback values fully align with your design specifications and overall theme configuration.packages/theme/src/amount/vars.less (1)
14-15: Enhanced Fallbacks for Amount Variables
The changes correctly add fallbacks for the Amount component variables with#808080for icon color and16pxfor icon size. This practice enhances robustness in scenarios where the primary tokens might be missing.packages/theme/src/action-menu/vars.less (1)
28-28: Default Fallback for Action Menu Icon (Card Type)
The update to include a fallback value (#191919) for--tv-ActionMenu-icon-color-cardensures that the card icon always displays a valid color. This improvement boosts resilience and visual consistency.packages/theme/src/form/vars.less (1)
15-17: Consistent Fallbacks for Form Variables
By updating--tv-Form-icon-sizeto include16pxand--tv-Form-icon-color-errorto include#f23030, the changes ensure that form elements maintain expected styling even when primary tokens are absent. This is consistent with similar updates across other components.packages/theme/src/time-spinner/vars.less (1)
41-41: Improved Fallback for Time Spinner Hover Background
The modification to set--tv-TimeSpinner-item-bg-color-hoverwith a fallback of#deecffensures that a defined hover state is maintained, even if the primary variable isn’t available. This small but effective change enhances user interaction consistency.packages/theme/src/breadcrumb/vars.less (2)
15-23: Enhance Breadcrumb Variable Robustness
The fallback values added for font size, text line height, text color, last text color, and separator icon color (e.g.,14px,1.5,#191919, and#808080) improve resilience when the primary variables are missing. Please verify these defaults align with the overall design guidelines.
31-31: Consistent Fallback for Font Weight
The fallback for the text font weight (600) is applied correctly usingvar(--tv-font-weight-bold, 600).packages/theme/src/image/vars.less (1)
15-21: Solid Fallbacks for Image Error Styling
The updated declarations now provide sensible fallback values for the error font size (14px), text color (#808080), background color (#f5f5f5), and line height (1.5). This ensures that even if the primary CSS variables aren’t defined, the image error state remains styled consistently.packages/theme/src/tooltip/vars.less (8)
15-19: Tooltip Typography & Dimension Defaults
Fallback values for line height (1.5), border radius (8px), and font size (14px) are clearly defined for the tooltip. This ensures robust typography and proper sizing even when parent variables are unavailable.
22-24: Default Styling for Tooltip Normal State
The normal tooltip background (#ffffff) and text color (#191919) now have explicit fallbacks, which will help maintain visual consistency if the primary theme variables are undefined.
29-33: Reliable Fallbacks for Tooltip Info Variant
The info-type tooltip now includes fallbacks for background (#1476ff), text (#ffffff), and border colors (#1476ff), ensuring that the info styling renders reliably under all conditions.
36-40: Clear Fallbacks for Tooltip Error Variant
Error tooltips are safeguarded with defaults for background (#f23030), text (#ffffff), and border (#f23030). These choices should provide a consistent error indication regardless of external variable definitions.
43-47: Sensible Defaults for Tooltip Warning Variant
The warning tooltip’s background (#ff8800), text (#ffffff), and border (#ff8800) colors now include fallback values, which reinforces clarity and consistency in warning states.
50-54: Robust Fallbacks for Tooltip Success Variant
With fallbacks for background (#5cb300), text (#ffffff), and border (#5cb300), the success tooltip styling is now better insulated against missing primary values.
57-61: Fallbacks Supporting Dark Theme Consistency
The dark tooltip settings now include clear defaults for background (#191919), text (#ffffff), and border (#191919via--tv-color-border-hover), ensuring that dark-themed tooltips remain visually effective.
71-77: Comprehensive Container Styling Defaults
The tooltip box shadow, vertical and horizontal padding, and validate icon color now include fallback values, which help ensure the popup’s container styling remains intact even when parent variables are missing.packages/theme/src/scroll-text/vars.less (1)
14-15: Enhanced ScrollText Defaults
Fallbacks for ScrollText now define a height of24pxand a background color of#f5f5f5for cases when--tv-size-height-xsor--tv-color-bg-active-darkare undefined. This addition improves consistency in the component’s appearance.packages/theme/src/text-popup/vars.less (2)
15-19: TextPopup Sizing Fallbacks
The fallback values for the TextPopup’s border radius (6px), height (32px), and font size (14px) ensure that the component maintains consistent sizing despite any missing primary variable definitions.
21-27: Robust Border & Focus Styling for TextPopup
Fallback defaults for the border color (#c2c2c2), box shadow (0 0 0 0 rgba(0, 0, 0, 0)), hover border color (#191919), and focus border color (#191919) are now in place. These choices provide clear visual feedback on user interactions and ensure consistency across different states.packages/theme/src/crop/vars.less (1)
15-29: Robust Fallback Defaults for Crop VariablesThe fallback values for properties like modal background, center, face, select colors, and box effects are well integrated and enhance styling robustness. One point of caution: the fallback value
rgba(0, 0, 0, 20%)on line 15 might not be standard since CSS typically expects the alpha value as a decimal (e.g.,0.2) rather than a percentage. Please verify that this syntax is supported across your target browsers.packages/theme/src/rate/vars.less (1)
13-22: Enhanced Robustness with Fallbacks in Rate VariablesThe updates introducing fallback values for text margins and font sizes (lines 15, 17, 19, and 21) are consistent and align well with the overall theming strategy. These changes ensure that if the primary CSS variables are undefined, the design still follows the intended visual spacing and typography.
packages/theme/src/espace/vars.less (1)
14-17: Fallback Enhancements for Espace Icon ColorsThe modifications update the icon color variables to include fallback values (
#808080for--tv-Espace-icon-colorand#191919for--tv-Espace-icon-color-hover). This change will help maintain visual consistency if the primary color variables are absent. Please double-check that the fallback hover color meets your accessibility contrast requirements.packages/theme/src/roles/vars.less (4)
15-15: Add fallback value for poplist item height
The fallback value of32pxfor--tv-Roles-poplist-item-heightensures that the component maintains a consistent height even if--tv-size-height-mdis missing.
17-17: Add fallback value for poplist item text color
The fallback#191919for--tv-Roles-poplist-item-text-coloris appropriate to ensure text remains legible if--tv-color-textis not provided.
19-19: Add fallback value for poplist item font size
Including a fallback14pxfor--tv-Roles-poplist-item-font-sizereinforces consistent typography across components.
21-21: Add fallback value for poplist item hover background color
The fallback#f5f5f5for--tv-Roles-poplist-item-hover-bg-colorhelps maintain a clear hover effect when--tv-color-bg-hoveris undefined.packages/theme/src/color-select-panel/vars.less (8)
3-3: Introduce fallback for large border radius
The fallback value8pxin--tv-ColorSelectPanel-border-radius-lgensures a consistent rounded corner appearance even if the primary variable isn’t set.
5-5: Introduce fallback for medium border radius
The fallback value6pxfor--tv-ColorSelectPanel-border-radius-mdis clear and consistent with related component styles.
7-7: Introduce fallback for small border radius
Using4pxas a fallback for--tv-ColorSelectPanel-border-radius-smis a good choice to maintain style consistency.
9-9: Set fallback for vertical padding
The fallback8pxfor--tv-ColorSelectPanel-padding-yguarantees adequate spacing even when--tv-space-mdisn’t defined.
11-11: Set fallback for horizontal padding
Similarly, the fallback8pxfor--tv-ColorSelectPanel-padding-xprovides consistency in horizontal spacing.
13-13: Add fallback for alpha margin top
The fallback value8pxfor--tv-ColorSelectPanel-alpha-margin-topreinforces spacing standards in the alpha selection area.
15-15: Add fallback for panel box-shadow
The fallback0 2px 12px 0 rgba(0, 0, 0, 0.16)in--tv-ColorSelectPanel-box-shadowis well chosen to provide a subtle shadow effect when--tv-shadow-2-downis not available.
17-17: Add fallback for background color
Providing#ffffffas the fallback in--tv-ColorSelectPanel-bg-colorensures the panel remains clear and neutral if--tv-color-bg-3is missing.packages/theme/src/divider/vars.less (9)
3-3: Add fallback for divider color
The fallback#dbdbdbfor--tv-Divider-dividing-linehelps maintain a subtle divider appearance when the primary color variable is undefined.
5-5: Add fallback for text background color
Using#f0f0f0as a fallback for--tv-Divider-text-bg-colorensures that text blocks remain distinct and clear.
7-7: Add fallback for text color
The fallback#191919for--tv-Divider-text-coloris an excellent choice for readability when--tv-color-textis missing.
9-9: Add fallback for success color
The fallback#5cb300for--tv-Divider-success-colorproperly reflects positive statuses.
11-11: Add fallback for default color
Using#dbdbdbfor--tv-Divider-default-colormaintains a neutral, clean appearance when no specific state color is defined.
13-13: Add fallback for warning color
The fallback#ff8800for--tv-Divider-warning-colorensures that warnings are appropriately emphasized even if--tv-color-warn-borderis absent.
15-15: Add fallback for info color
Including#1476ffas a fallback for--tv-Divider-info-colormaintains clarity for informational messages.
17-17: Add fallback for error color
The fallback#f23030for--tv-Divider-error-coloris spot on for clearly indicating error states.
19-19: Add fallback for border width
Using a fallback of1pxfor--tv-Divider-border-widthpreserves consistency in divider line thickness.packages/theme/src/filter-panel/vars.less (3)
14-14: Add fallback for panel top margin
The fallback value8pxfor--tv-FilterPanel-margin-topensures that the panel maintains a consistent top margin if--tv-space-mdis not defined.
20-20: Add fallback for bottom box-shadow
The fallback0 8px 24px 0 rgba(0, 0, 0, 0.16)for--tv-FilterPanel-bottom-box-shadowprovides a robust shadow effect for the panel’s lower edge, improving visual depth.
22-22: Add fallback for top box-shadow
The fallback0 -8px 24px 0 rgba(0, 0, 0, 0.16)for--tv-FilterPanel-top-box-shadowhelps ensure a balanced shadow effect on the panel’s top edge.packages/theme/src/split/vars.less (5)
15-15: Add fallback for wrapper border color
The fallback#c2c2c2in--tv-Split-wrapper-border-colorguarantees a consistent border even when--tv-color-borderis not set.
17-17: Add fallback for trigger icon line color
The fallback#808080for--tv-Split-trigger-icon-line-colorensures that the icon lines render with adequate visibility.
19-19: Add fallback for trigger icon line hover color
Using#191919as the fallback for--tv-Split-trigger-icon-line-color-hoverprovides a clear hover state when--tv-color-icon-hoveris missing.
21-21: Add fallback for wrapper radius size
The fallback value8pxin--tv-Split-wrapper-radius-sizemaintains the intended rounded corner effect if--tv-border-radius-lgisn’t available.
23-23: Add fallback for trigger line background hover
The fallback#1476fffor--tv-Split-trigger-line-bg-hoverensures that the hover state is clearly indicated even when--tv-color-border-active-controlis undefined.packages/theme/src/base-select/vars.less (1)
65-71: Ensure Consistent Fallback Defaults for Tag Heights
The updated calculations for the tag height variables now include explicit fallback values (40px, 32px, 28px, and 24px) to ensure that meaningful defaults are applied when the primary size variables are absent. Please verify that these fallback dimensions align with the intended design guidelines.packages/theme/src/hrapprover/vars.less (1)
14-22: Robust Fallback Values for Hrapprover Component
The injection function now consistently applies fallback values to critical properties (e.g., error border color, font size, background colors, etc.). This approach ensures that the Hrapprover component maintains its styling even when certain primary variables are missing. Confirm that the selected default values (such as#f23030for error border and14pxfor font size) meet the design requirements.packages/theme/src/user-card/vars.less (1)
15-25: User Card Fallback Defaults Enhance Consistency
The update now specifies fallback values for border color, image border radius, and various state text colors. This change prevents unexpected styling issues if the main variables are undefined. Please double-check that the fallback colors (e.g.,#c2c2c2,#5cb300,#f23030,#ff8800) match the component’s overall design aesthetic.packages/theme/src/popeditor/vars.less (2)
15-25: Icon and Input Fallback Values in Popeditor
The properties governing the input icon—such as font size, color, disabled state, hover state, and height—now include sensible fallback values. This addition significantly improves the resilience of the Popeditor component in scenarios where the main variables might be missing. Please ensure that values like14pxfor font size and32pxfor icon height are aligned with the overarching theme.
29-29: Consistent Text and Tab Fallbacks in Popeditor
Fallback defaults have been applied to key header and tab properties such as selected text color, line height, font size, and font weight. These updates help ensure that the component's typography remains consistent and reliable. Confirm that the defaults (e.g.,#191919for text color and1.5for line height) are consistent with the design specifications.Also applies to: 33-33, 35-35, 37-37, 39-39
packages/theme/src/floatbar/vars.less (1)
15-27: Floatbar Fallback Defaults for Enhanced Styling Robustness
The Floatbar variables now include explicit fallback values for properties such as border radius, font size, background color, and text colors. This ensures that the component maintains a consistent look even when the primary variables are not set. Please verify that the fallback values (e.g.,8pxfor border radius and#fffffffor background color) align with the overall theme design.packages/theme/src/time-select/vars.less (1)
15-27: Enhanced CSS Fall-backs for TimeSelect ComponentThe update adds clear fallback values for every key CSS variable (text color, font size, padding, disabled color, hover background, selected text color, and top padding). This ensures that the TimeSelect component remains visually consistent even when its primary variables are missing.
packages/theme/src/search/vars.less (2)
15-29: Robust Fall-backs for Search Input PropertiesThe changes for the search input properties—including font size, height, left padding, border colors, and text colors—now include fallback values. This adjustment strengthens the input styling by ensuring that a consistent design is maintained even if the theme’s primary variables are not provided.
31-69: Consistent Defaults for Search Selector & Auxiliary ElementsThe selector and additional search properties (background color, placeholder color, icon settings, disabled states, and more) now implement fallback values. This consistency across the search component improves reliability and reduces the possibility of visual breakage in varied environments.
packages/theme/src/calendar-view/vars.less (1)
15-105: Comprehensive Fallback Integration in CalendarViewThis extensive update introduces fallback values for a broad range of CalendarView styling properties—from container backgrounds and padding to font sizes, colors, borders, and spacing. The careful inclusion of defaults (e.g., #ffffff, 32px, 14px, etc.) across key elements significantly enhances the component’s resilience and ensures design consistency across themes.
packages/theme/src/drawer/vars.less (1)
19-43: Enhanced Fallback Defaults for the Drawer ComponentBy assigning fallback values for background color, padding, border divider, border radius, mask background, shadow, and text/icon properties, these changes ensure that the Drawer component gracefully degrades when primary variables are missing. This contributes to a stable and predictable UI styling.
packages/theme/src/drop-times/vars.less (1)
15-25: Consistent Default Values for DropTimesThe DropTimes component now benefits from appropriate fallback values for font size, padding, font weight, text color, and hover background. These improvements align its styling behavior with the overall theme design, ensuring consistency and reliability across different environments.
packages/theme/src/upload/vars.less (1)
15-29: Ensuring Robust Fallback Values for Upload Vars
All updated CSS properties now include sensible fallback values. This guarantees that if the corresponding primary custom properties are not defined, default values (e.g., font-size, colors, border-radius) are automatically applied. Overall, the approach improves consistency and resilience in component styling.packages/theme/src/user-link/vars.less (1)
14-17: Consistent Fallback Defaults for UserLink Vars
The fallback values for font size, text color, font weight, and border-radius now ensure that the UserLink component displays appropriate defaults when custom values are absent. This update aligns well with the overall design improvements across the theme variables.packages/theme/src/user-contact/vars.less (1)
15-33: Robust Fallbacks for UserContact Vars
The updated properties across the UserContact variables now include fallback values for text sizes, colors, and border details. Using defaults such as14pxfor font sizes and specific hex color codes greatly boosts the reliability of component rendering even in the absence of primary variable definitions. Ensure that these default choices align with the overall design guidelines.packages/theme/src/tall-storage/vars.less (1)
15-23: Fallback Enhancements for TallStorage Vars
The modifications introduce clear fallback values (e.g.,#fffffffor background color,6pxfor border-radius,32pxfor item height, and a specific box shadow) that promote design consistency and prevent layout issues if the primary custom properties are missing. This refactoring is well-aligned with the PR objectives.packages/theme/src/top-box/vars.less (1)
14-20: Improved Default Handling for TopBox Vars
By including fallback values for background color and the various icon colors (success, error, warning, help, and info), the changes mitigate potential styling issues when primary variables are undefined. These updates not only enhance visual consistency but also align the TopBox component with the broader theme improvements.packages/theme/src/tag-group/vars.less (1)
16-20: Great improvement adding fallback values to CSS variables!Adding explicit fallback values (
12pxand8px) to these CSS variables makes the component more robust. If the global theme variables (--tv-space-lgor--tv-space-md) are unavailable or not loaded yet, the component will still display with proper spacing.packages/theme/src/scrollbar/vars.less (1)
27-35: Excellent enhancement with fallback values!Adding fallback values to scrollbar variables ensures consistent styling even when theme variables are undefined. The fallbacks match what appears to be the design system's intended values:
- 4px for spacing and border radius
- 8px for width
- #dbdbdb for colors
This change greatly improves component reliability across different environments.
packages/theme/src/fluent-editor/vars.less (1)
15-35: Strong improvement with comprehensive fallback values!Adding fallback values to all Fluent Editor variables ensures consistent styling when theme variables aren't defined. The fallbacks appear to be closely aligned with the design system:
- Color values like
#808080for icons#fffffffor background colors- Appropriate hover/active states
- Border radius and box shadow values
This significantly improves the component's visual stability across implementations.
packages/theme/src/chart-core/vars.less (1)
14-16: Good addition of fallbacks for empty state styling!Adding fallback values for the empty data state ensures the chart displays appropriately even when theme variables are undefined. The selected values (
#808080,14px, and#ffffff) provide sensible defaults that should work in most contexts.packages/theme/build/mapVar.js (1)
1-519: Well-structured theme variable mapping!This comprehensive JavaScript export of CSS variables creates a bridge between CSS and JavaScript, allowing theme variables to be accessed programmatically. The organization is clear with sections for:
- Brand colors
- Neutral colors
- Functional colors (success, error, warning, info)
- Text colors
- Background colors
- Border colors
- Typography
- Spacing
- Shadows
The detailed comments on each variable provide excellent context about their intended use.
packages/theme/src/collapse-item/vars.less (1)
15-39: LGTM! Fallback values improve theme robustness.The addition of fallback values to all CSS variables is an excellent improvement. This ensures that the component will have appropriate styling even if the theme variables are not defined, making the component more robust.
packages/theme/src/table/vars.less (1)
15-37: LGTM! Fallback values enhance theme consistency.The addition of fallback values to all CSS variables is a great improvement. This ensures that the table component will maintain consistent styling even if the theme variables are not defined elsewhere.
packages/theme/src/loading/vars.less (1)
15-53: LGTM! Fallback values provide graceful degradation.The addition of default values to all CSS variables is an excellent enhancement. This ensures that the loading component will maintain proper appearance even when theme variables are undefined, providing graceful degradation.
packages/theme/src/transfer/vars.less (1)
49-57: Enhance Transfer Button Styling with FallbacksAdding fallback values for the transfer button’s background color and padding ensures a consistent appearance, even if primary variables aren’t defined. Please verify that the chosen defaults (#1476ff for background and 2px for all paddings) align with the design guidelines for Transfer components.
packages/theme/src/popover/vars.less (1)
15-35: Robust Fallbacks for Popover ComponentThe update adds fallback values for key properties such as background color, text color, border radius, font size, line height, box shadow, and padding. This improves resilience when primary variables are absent. Just ensure these defaults (e.g., #ffffff, 8px, 14px, 1.5, etc.) meet the overall theme design expectations.
packages/theme/src/radio-button/vars.less (1)
15-39: Consistent Fallback Values for RadioButton StylingFallback values for text color, border radius, font size, and sizing are now provided. One point to note: the fallback for the font size is set using
var(--tv-font-size-default, 14px)(line 19), whereas some documentation hinted at 12px. Please verify that 14px is the desired default.packages/theme/src/notify/vars.less (1)
18-70: Comprehensive Fallbacks for Notify ComponentDefault values have been added across a broad range of properties—from layout dimensions (line height, padding) to colors (background, text, border, icon colors) and effects (box shadow). This should reinforce the consistency of notification styling. Confirm that these defaults integrate smoothly with the overall theme.
packages/theme/src/checkbox-button/vars.less (1)
15-51: Robust Default Values for CheckboxButton StylingEvery crucial property (background, font sizes, colors, borders, dimensions, etc.) now includes a fallback value, strengthening the component’s resilience. Please double-check that defaults like the 14px font size (line 17) and other sizing values align with the intended design system.
packages/theme/src/numeric/vars.less (9)
17-19: Fallbacks for Dimension & Radius:
The updated declarations for--tv-Numeric-input-normal-heightand--tv-Numeric-input-border-radiusnow include fallback values (32pxand6pxrespectively). This ensures that, even if the primary theme tokens (--tv-size-height-mdand--tv-border-radius-md) are missing, the component will render with consistent sizing.
21-23: Fallbacks for Border Colors:
The additions for--tv-Numeric-input-normal-border-colorand--tv-Numeric-input-dividing-border-colorprovide sensible default colors (#c2c2c2and#f0f0f0). This enhances robustness by ensuring that the borders display proper colors even in the absence of theme definitions.
27-29: Fallbacks for Typography in Input Fields:
Including fallback values for--tv-Numeric-input-normal-font-sizeand--tv-Numeric-input-normal-text-color(with defaults14pxand#191919) guarantees that text remains legible and styled consistently regardless of custom theme availability.
31-31: Default Background Color Fallback:
The declaration for--tv-Numeric-input-normal-bg-colornow includes a fallback (#ffffff), ensuring that the input background is set even if--tv-color-bg-secondaryis undefined.
35-39: Fallbacks for Interactive and Placeholder States:
The changes add fallbacks for--tv-Numeric-input-normal-active-border-color,--tv-Numeric-input-icon-color, and--tv-Numeric-input-placeholder-text-color, which help maintain a consistent visual feedback (with defaults like#191919and#808080) during interactive states and for placeholder text.
41-47: Additional Fallbacks for Icon & Focus Effects:
The updates now ensure that properties such as--tv-Numeric-input-icon-color-hover,--tv-Numeric-input-icon-color-disabled,--tv-Numeric-input-border-color-active, and--tv-Numeric-input-icon-sizehave meaningful fallback values. This collectively guarantees that hover effects, disabled states, and icon sizing remain uniform.
61-65: Medium Size Variant Consistency:
By introducing fallbacks for the medium-sized input’s height (--tv-Numeric-input-height-medium) and icon size (--tv-Numeric-input-icon-size-medium), the changes help ensure that the medium variant adheres to expected dimensions even in varied theme setups.
72-72: Small & Mini Size Fallbacks:
The updates for--tv-Numeric-input-height-smalland--tv-Numeric-input-height-mininow include fallbacks (28pxand24pxrespectively), which guarantees that both small and mini versions have proper default heights when primary variables are not defined.Also applies to: 83-83
94-100: Unit Styling Fallbacks:
Fallback values for unit-related properties—such as text color (--tv-Numeric-input-unit-text-color), font size (--tv-Numeric-input-unit-font-size), border left color (--tv-Numeric-input-unit-border-left-color), and background color (--tv-Numeric-input-unit-bg-color)—ensure uniform appearance in elements that use unit measurements.packages/theme/src/skeleton-item/vars.less (2)
3-11: Skeleton Item Core Fallbacks:
The addition of fallback values for key skeleton item properties—including background color, border radius, image icon color, square height, and circle border radius—ensures that the skeleton loading components maintain a consistent look even when custom tokens aren’t provided.
31-31: Linear Gradient Fallback:
By defining a fallback for the linear gradient (--tv-SkeletonItem-linear-gradient), the implementation secures a consistent gradient effect for skeleton items in environments where primary color variables may be absent.packages/theme/src/alert/vars.less (8)
25-29: Global Alert Variable Enhancements:
Fallback values for properties such as--tv-Alert-border-radius,--tv-Alert-padding-x, and--tv-Alert-padding-yensure that the alert component has a consistent base style with defaults (8pxand16px) even if the corresponding theme tokens are not set.
40-40: Alert Icon Margin Fallback:
The update to--tv-Alert-icon-margin-rightintroduces a fallback (8px) that helps maintain consistent spacing next to the alert icon.
45-51: Alert Title Styling Fallbacks:
The fallback values for the alert title—including font size, weight, color, and bottom margin—ensure that the title text is rendered appropriately with defaults (16px,600,#191919, and4px) in the absence of custom theme variables.
54-58: Alert Description Styling Fallbacks:
Setting fallback values for the description’s font size, weight, and text color (with defaults14px,400, and#595959) guarantees consistent readability and alignment with design standards regardless of upstream theme definitions.
63-71: Alert Close Icon Fallbacks:
The new fallback values for the close icon’s font size, color, hover color, and positioning (using defaults such as16px,#808080,#191919, and spacing12px) help preserve a consistent and accessible user interface for dismissible alerts.
74-74: Close Text Font Size Fallback:
Adding a fallback for--tv-Alert-close-text-font-size(defaulting to14px) is a good move to ensure that even the close text maintains visual consistency with the rest of the alert component.
79-87: Normal State Alert Settings:
Fallbacks for the Normal variant of the alert (covering properties like--tv-Alert-icon-size-normal,--tv-Alert-padding-x-normal, and--tv-Alert-margin-y-normal) secure a standardized look for alerts intended to be rendered in their default state.
92-110: Theme-Specific Alert Fallbacks:
The comprehensive fallback definitions for alert variations (success, error, warning, info, and simple) ensure that each themed alert correctly conveys its intent through colors. Defaults such as#e6f2d5for success and#fce3e1for error help maintain stylistic consistency even when the primary tokens are missing.packages/theme/src/filter-box/vars.less (3)
14-32: FilterBox Button Styling Fallbacks:
The fallback values for button properties—including height, background color, hover background, padding, text color (and its placeholder/active/disabled variants), font size, and line height—are comprehensively defined. This ensures that FilterBox buttons have a consistent appearance even when primary theme variables are not provided.
35-37: Help Button Spacing Fallbacks:
The adjustments to--tv-FilterBox-help-btn-margin-rightand--tv-FilterBox-help-btn-position-topprovide default spacing (4px), guaranteeing that helper icons are positioned consistently within the FilterBox component.
40-46: FilterBox Icon Styling Fallbacks:
The fallback values for icon color (--tv-FilterBox-icon-color), hover variant, disabled state, and size are well defined. This ensures that icons in the FilterBox maintain uniform visual styling even in the absence of explicit theme definitions.packages/theme/src/rich-text-editor/vars.less (2)
3-9: Rich Text Editor Core Fallbacks:
Fallback values for properties such as--tv-RichTextEditor-border-color,--tv-RichTextEditor-line-height, and for icon colors in hover and disabled states ensure that the basic styling of the rich text editor’s container remains intact even if the overriding tokens are missing.
13-19: Options Dropdown Fallbacks:
The dropdown options for the rich text editor now include fallbacks for the box shadow, border radius, text color, and item background color. These defaults (for example, a box shadow of0 4px 16px 0 rgba(0, 0, 0, 0.08)and a border radius of6px) help deliver a consistent and polished dropdown appearance.packages/theme/src/color-picker/vars.less (5)
3-11: Robust Basic Variable Fallbacks for Color Picker
The fallback values for properties such as border color, border radii, and padding (lines 3, 5, 7, 9, and 11) ensure that the color picker remains visually consistent even when the primary CSS variables are not defined. The chosen defaults (e.g.#808080,6px,2px, and4px) are sensible and appear to align with typical design standards.
14-16: Consistent Defaults for Large Component Dimensions
The large size variables (lines 14–16) now include fallback values of48pxfor both height and width. This uniformity helps maintain the intended proportions for larger UI elements in the color picker.
19-21: Validated Defaults for Medium Sizing
Fallback values for medium-sized components (lines 19–21) are clearly set to40px, supporting a balanced and proportional design. It is recommended to verify that these defaults are aligned with the overall design system.
24-26: Appropriate Fallbacks for Small Dimensions
The small size settings (lines 24–26) use28pxfor both height and width, ensuring that the component scales down gracefully.
29-31: Defined Mini-Sized Fallbacks
For mini components (lines 29–31), the fallback value of24pxis applied consistently, which should help maintain visual consistency at reduced scales.packages/theme/src/link-menu/vars.less (1)
15-43: Comprehensive Fallbacks for Link Menu Styling
The updates in this mixin (lines 15–43) add explicit fallback default values to every key property—from text and border colors to font sizes and padding—for the Link Menu component. These changes ensure that if the primary theme variables are missing, the component will still render with clear and consistent styling.packages/theme/src/switch/vars.less (1)
15-17: Robust Fallback Definitions for Switch Component
The switch component now benefits from a full set of fallback values across its various states and sub-components. Key updates (lines 15, 17, 19, 23, 25, 27, 37, 45, 47, 61, 65, and 67) use clear defaults for background colors, text colors, and font sizes—for instance, defaulting to#1476fffor the active background and#dbdbdbfor disabled states. This comprehensive approach significantly enhances the resilience of the switch styling in the absence of primary theme definitions.Also applies to: 19-19, 23-23, 25-25, 27-27, 37-37, 45-47, 61-61, 65-65, 67-67
packages/theme/src/toggle-menu/vars.less (1)
17-37: Enhanced Fallback Defaults for Toggle Menu Variables
Within the Toggle Menu mixin (lines 17–37), fallback values have been systematically added for font sizes, text colors, icon sizes, background colors, and font weights. These defaults—such as14pxfor font size,#191919for text color, and#e6e6e6for button backgrounds—will ensure that the toggle menu displays correctly even in scenarios where the primary variables are not provided.packages/theme/src/dialog-box/vars.less (1)
15-58: Comprehensive Fallback Settings for Dialog Box Components
The dialog box variables (lines 15–58) have been updated to include fallback values for an extensive range of properties including background color, border radius, shadows, padding, and various font and icon settings. These enhancements guarantee that the dialog box retains its intended appearance even if any of the primary theme variables are absent, thereby reinforcing the design system's resilience.packages/theme/src/form-item/vars.less (5)
15-29: Consistent Fallbacks for Base Form Item Properties
The added fallback values for key typography and color properties (line height, font size, text colors, error indicators, etc.) enhance robustness if the primary tokens are absent. All fallback values appear consistent with design expectations.
31-37: Dimension and Spacing Fallbacks
Fallbacks for component dimensions—such as height, margin, and padding—ensure uniform spacing across form items. These numbers (e.g., 32px for height, 24px for margins, 8px for padding) are clear and should work well with the overall layout.
40-40: Label Padding Fallback
The fallback value (24px) for the label’s right padding is appropriate and fits the spacing scale used elsewhere in the theme.
48-50: Small Form Item Sizing Fallbacks
Applying fallback defaults for small form item height (28px) and margin (24px) helps maintain consistency at smaller sizes.
53-55: Mini Form Item Defaults
The fallback values for mini form items (height of24pxand margin-bottom of16px) seem well chosen. Ensure these values render as intended across different devices.packages/theme/src/fall-menu/vars.less (5)
15-21: Fallbacks for FallMenu Basic Styling
The introduction of fallback defaults for menu height, background color, hover background, and icon font size provides a robust baseline when underlying tokens are missing.
23-29: Text and Title Fallback Enhancements
Fallbacks for menu text color and title font size ensure that textual elements render consistently. The provided defaults (e.g.,#191919for text color and16pxfor title font size) are appropriate.
31-37: Dropdown Box Styling Defaults
The fallbacks for box text color, font size, and height (e.g.,14pxfor font size,24px/28pxfor heights) ensure that dropdown boxes are consistently styled.
39-47: Interactive State Defaults for FallMenu
The fallback values governing hover states (text color and font weight) effectively enhance the interactive feedback. The defaults (#191919for hover text and600for font weight) align with common design practices.
49-51: Icon and Border Appearance
The fallback values for the icon fill color (#808080) and the border radius (6px) round out the visual presentation, ensuring that even in the absence of primary variables, the component retains a refined look.packages/theme/src/popconfirm/vars.less (7)
15-17: Typography Fallbacks for Popconfirm Titles & Content
The fallback line heights (1.5) for both the title and content sections of the popconfirm component promote consistency in text rendering.
19-21: Footer Font Defaults
Setting fallback defaults of14pxfor font size and#191919for font color in the popconfirm footer guarantees legible text even if the primary styling isn’t provided.
23-26: Container Padding and Icon Margin Fallbacks
The defaults for vertical container padding (4px) and icon margins (2pxand4px) help maintain a consistent and balanced spacing layout.
28-29: Footer Margin and Title Styling Introduction
The fallback for the footer’s top margin (16px) and the subsequent title styling contribute to a clear separation of content.
30-32: Enhanced Title Text Defaults
The fallback settings for the popconfirm title—16pxfor font size and a font weight of600—will ensure that the title stands out appropriately.
34-35: Spacing Between Title and Content
The default bottom margin (8px) and the confirm button’s left margin (8px) help secure the necessary visual breathing room between content sections.
37-40: Consistent Icon Color Defaults
Fallback colors for various icon states (info, error, warning, success) are well defined and will ensure that iconography adheres to the intended color scheme.packages/theme/src/upload-list/vars.less (9)
15-17: Core Typography and Color Defaults for Upload List
The fallback values for item font size (14px) and text color (#595959) ensure that file list items are rendered with a consistent and clear appearance.
19-21: Border and Hover Background for Upload Items
Applying fallback defaults for the border radius (8px) and hover background color (#f5f5f5) creates a uniform look for interactive states in the upload list.
23-27: Icon Defaults in the Upload List
The inclusion of fallback values for the item’s leading icon (color#191919and font size16px) ensures that icons consistently match the overall theme style.
29-33: Close Icon and General Icon Sizing
Fallback defaults for the close icon color (#808080) and the general icon font size (16px) help maintain visual consistency and clarity for user interactions.
35-35: Successful Icon Sizing
Setting the fallback for the successful icon font size to14pxaligns it with the primary text size, ensuring visual balance.
37-41: Picture Card Item Styling Fallbacks
The fallback settings for picture card elements—border color (#c2c2c2), background color (#ffffff), and icon color (#ffffff)—provide a solid baseline for photo wall layouts.
43-43: Successful Status Background Color
The fallback for the successful status background (#5cb300) clearly indicates a successful state and is consistent with common success indicators.
45-49: New Picture Card Layout Variables
The introduction of fixed dimensions for picture card width (100px), height (100px), and progress size (68px) is a welcome addition for standardizing the layout in picture card mode.
51-55: Non-Picturecard Item Spacing and Error Color Fallbacks
The fallback values for the non-picturecard text line height (1.5), top margin (8px), and error text color (#f23030) ensure that list items display proper spacing and clear error signaling.packages/theme/src/radio/vars.less (10)
15-17: Radio Text and Font Size Defaults
The fallback for radio button text color (#191919) paired with a small font size (12px) is appropriate for maintaining readability in radio components.
19-21: Border Radius and Border Color for Radios
The fallbacks for the bordered radio’s radius (6px) and its default border color (#c2c2c2) ensure that form elements have a neat and consistent outline.
23-25: Disabled and Checked Border Color Fallbacks
The inclusion of fallback defaults for the disabled border color (#dbdbdb) and the checked state border color (#1476ff) supports better visual differentiation of states.
27-29: Hover and Checked Hover Border Colors
Fallback colors for the hover state (#191919) and for the checked-hover state (#1476ff) maintain consistency in interactive feedback.
31-31: Active Border Color Fallback
Setting the active border color fallback to#1476ffaligns this state with the checked state, keeping the visual language uniform.
33-35: Disabled Background and Checked Background Defaults
The selected fallback colors—light background (#f0f0f0) for disabled and white (#ffffff) for checked disabled states—ensure clarity and appropriate contrast in diverse states.
39-39: Disabled Text Color for Radios
The fallback text color for disabled radio inputs (#c2c2c2) increases legibility and conforms to the overall disabled state styling.
41-43: Radio Inner Button Visual Defaults
The inner radio’s fallback background (#ffffff) and its checked state color (#1476ff) are well chosen to delineate active versus inactive states clearly.
49-49: Inner Button Border Radius
Applying a fallback of999pxfor the inner radio button border radius is a classic technique for achieving a perfectly circular button.
57-57: Radio Button Bottom Margin Fallback
The fallback for the radio button’s bottom margin (16px) provides consistent spacing within grouped radio elements.packages/theme/src/bulletin-board/vars.less (1)
15-57: Robust Fallback Values in Bulletin Board VarsThe fallback values are consistently applied across all Bulletin Board variables, ensuring that the component retains predictable styling even when the primary theme variables are absent. The chosen defaults (e.g., font sizes, colors, and spacing) look sensible and align well with common UI standards.
packages/theme/src/carousel/vars.less (1)
19-59: Consistent Fallbacks in Carousel VarsThe carousel component variables have been updated with well-chosen fallback defaults that ensure visual consistency even when the primary theme variables are not defined. The use of specific fallback values such as
16pxfor font size and#e6e6e6for background colors aligns nicely with the overall theme strategy.packages/theme/src/pop-upload/vars.less (1)
15-43: Effective Fallbacks in PopUpload VarsThe PopUpload component now reliably falls back to default values for key properties (e.g., font size, header colors, and background colors). This enhancement will improve consistency, especially in cases where the primary variables might be missing or misconfigured.
packages/theme/src/ip-address/vars.less (1)
15-57: Strong Fallback Configuration in IP Address VarsThe IP Address component variables now include robust fallbacks, along with precise height adjustments using
calc(). This ensures that the input fields maintain a consistent look even when the referenced primary variables are not defined.packages/theme/src/input/vars.less (5)
14-22: Consistent Fallbacks for Text, Background & Font Sizes
The updated fallback values for properties such as--tv-Input-text-color,--tv-Input-bg-color,--tv-Input-font-size,--tv-Input-count-font-size, and--tv-Input-small-font-sizeensure that sensible defaults are applied if the primary tokens are undefined. This enhances styling robustness and consistency.
24-32: Robust Dimension and Border Settings
The modifications for--tv-Input-height,--tv-Input-border-radius,--tv-Input-border-color,--tv-Input-hover-border-color, and--tv-Input-active-border-colornow include explicit fallbacks. This guarantees that the input component maintains its intended visual dimensions and border styling even when theme tokens are missing.
34-42: Improved Icon and Placeholder Color Defaults
Updating properties like--tv-Input-icon-color,--tv-Input-icon-color-hover,--tv-Input-focus-icon-color,--tv-Input-suffix-icon-color, and--tv-Input-placeholder-text-colorby adding fallback values (e.g.,#808080or#191919) makes the input component more resilient to missing configurations.
44-60: Enhanced Disabled & Size Variant Fallbacks
Properties for disabled states and size-related dimensions—such as--tv-Input-disabled-text-color,--tv-Input-medium-height,--tv-Input-small-height,--tv-Input-mini-height,--tv-Input-disabled-bg-color,--tv-Input-disabled-border-color,--tv-Input-exceed-text-color,--tv-Input-icon-font-size, and--tv-Input-count-font-color—now specify clear fallback values. This update ensures predictable behavior and appearance across various input states and sizes.
80-80: Reliable Line Height Fallback
The inclusion of a fallback in--tv-Input-display-content-line-height(defaulting to1.5) guarantees that text alignment remains consistent even if the primary line-height token is absent.packages/theme/src/checkbox/vars.less (1)
15-49: Robust Fallbacks for Checkbox Styling
Each CSS custom property in the checkbox theme—from icon size and font properties to border, background, and color settings—has been updated with an appropriate fallback value. This consistent approach (for example, usingvar(--tv-icon-size, 16px)andvar(--tv-color-bg-disabled, #f0f0f0)) minimizes the risk of styling issues when design tokens are unavailable.packages/theme/src/guide/vars.less (4)
7-17: Enhanced Header and Title Fallbacks for Guide Component
The modifications to properties like--tv-Guide-header-border-radius,--tv-Guide-header-line-height, and--tv-Guide-header-bg-coloras well as the title’s text color, line height, font weight, and font size now include fallback values. This ensures that the guide component’s header and title display consistently in cases where primary variables are not defined.
21-27: Reliable Icon and Button Defaults
By adding fallbacks for the cancel icon dimensions and colors (e.g.,--tv-Guide-cancel-icon-width,--tv-Guide-cancel-icon-height,--tv-Guide-cancel-icon-color, and--tv-Guide-cancel-hover-icon-color), the guide component’s interactive elements are rendered with predictable and consistent styling.
29-39: Consistent Text and Scrollbar Styling
The updates for properties such as--tv-Guide-text-text-color,--tv-Guide-text-line-height,--tv-Guide-text-font-size, and--tv-Guide-text-scrollbar-border-colornow offer defaults. This not only improves consistency in content presentation but also enhances overall user experience in case of missing theme tokens.
41-66: Uniform Footer, Button, and Shepherd Element Defaults
The fallback values for properties affecting the guide’s footer, progress, and button styles (e.g.,--tv-Guide-footer-border-bottom-right-radius,--tv-Guide-button-text-color,--tv-Guide-button-border-color,--tv-Guide-button-border-radius,--tv-Guide-button-bg-color,--tv-Guide-button-hover-border-color,--tv-Guide-button-disable-bg-color,--tv-Guide-button-disable-text-color,--tv-Guide-button-font-size,--tv-Guide-button-height, and--tv-Guide-shepherd-element-border-radius) are well chosen. They contribute to making the component robust against any missing higher-level tokens.packages/theme/src/pager/vars.less (5)
15-21: Fallbacks for Core Pager Text and Font Properties
With properties like--tv-Pager-font-size,--tv-Pager-text-color,--tv-Pager-text-color-disabled, and--tv-Pager-text-color-secondarynow including explicit fallback values (e.g.,14px,#191919,#c2c2c2,#595959), the pagination component benefits from a consistent base typography and color scheme even if theme-level variables are undefined.
25-33: Reliable Icon and Border Color Settings for Pager
The updates for icon colors (--tv-Pager-icon-color,--tv-Pager-icon-color-hover,--tv-Pager-icon-color-disabled) and border colors (--tv-Pager-border-color,--tv-Pager-border-color-hover,--tv-Pager-border-color-active,--tv-Pager-border-color-disabled) now include fallbacks, ensuring that interactive elements and inactive states of the pager maintain their intended styling.
39-47: Enhanced Background and Sizing Defaults
Adding fallback values for properties controlling background colors and dimensions—including--tv-Pager-bg-color-hover,--tv-Pager-bg-color-disabled,--tv-Pager-height,--tv-Pager-padding-y,--tv-Pager-font-size-xs, and--tv-Pager-input-height-xs—guarantees a predictable appearance across different pager states and sizes.
55-65: Consistent Styling for Page Items and Navigation Controls
The fallback defaults for page item border radius, padding, font weight (hover), and text colors (active and hover) have been updated. Moreover, navigation control properties for previous/next buttons and the "goto" input now specify explicit fallbacks, strengthening the component’s resilience.
91-109: Robust Defaults for Pager Input and Sizes Panel
The final chunk of changes—including fallbacks for the pager input’s border radius, height, and related dropdown panel properties—ensures that even complex UI elements behave correctly when theme variables are missing.packages/theme/src/card/vars.less (5)
15-17: Improved Card Background and Size Defaults
The update for--tv-Card-bg-colornow provides a clear fallback (#ffffff) ensuring the card component always has a consistent background, regardless of external variable definitions. Additionally, the width calculations for various card sizes remain clear and predictable.
27-33: Consistent Border Radius Enhancements
The new fallback values for border radii (--tv-Card-large-border-radius,--tv-Card-medium-border-radius,--tv-Card-small-border-radius, and--tv-Card-mini-border-radius) ensure that cards display with the intended rounded corners even if the primary tokens are missing.
35-49: Robust Border and Disabled State Styling
Fallback values for border colors corresponding to various card states (success, warning, alerting, danger, default, checked, and disabled) enhance the component’s robustness. The chosen default colors (e.g.,#5cb300for success and#f23030for danger) align well with expected visual semantics.
51-57: Appropriate Padding and Typography Settings for Card Content
The updated spacing and font properties—such as body padding for different card sizes, title font size, text colors, and font weights—are now equipped with fallbacks. This ensures that even in the absence of external theme values, the card presents a visually coherent layout and typography.
59-81: Solid Defaults for Card Interaction Elements
The fallbacks for additional properties including option text colors, option font size, border colors, and the "more" text color collectively ensure consistent interactive feedback and visual hierarchy across card states.packages/theme/src/button-group/vars.less (10)
15-17: Fallback values for basic layout properties
The declarations for the button group border radius and line-height now include fallback values, ensuring consistent styling even when the primary tokens are missing.
19-23: Enhancing background and text color robustness
Fallback values for the default background color, button-text color, and empty text color are correctly set to guarantee a predictable appearance.
25-27: Dimension defaults for button group items
The properties for button height and font size now include design-token fallbacks, which helps maintain a uniform look regardless of theme overrides.
29-31: Disabled state color fallbacks
Defining fallback values for disabled background and text colors ensures that the button group clearly indicates disabled states even if custom values are omitted.
33-35: Hover state enhancements
Fallbacks for the hover background and text colors have been introduced properly, supporting reliable interactive feedback.
38-44: Plain style fallback definitions
The plain style properties—including text, background, and border colors—now receive fallback values, which aids in supporting alternative styling modes.
47-51: Active state style defaults
Active state properties for background, disabled background, and text color now have fallbacks. This ensures components display the intended active styling reliably across contexts.
57-61: Mini size and supplementary text configurations
Fallback values for the mini border radius and supplementary (sup) text color and size are present. This makes the button group adaptable to responsive or alternative size variants.
64-70: Size variable adjustments for varied component sizes
The medium, small, and mini sizes—including the mini font size—receive consistent fallback values. This contributes to a coherent sizing system across button variants.
75-75: Additional fallback for more item hover background
The fallback value for the “more” dropdown hover background color is correctly added, ensuring that even optional elements adhere to the design system.packages/theme/src/calendar/vars.less (5)
15-23: Calendar component primary color fallbacks
Fallback values for the calendar background, list item selected text color, primary text color, and hover text color have been set properly. This ensures that the calendar displays a consistent color scheme even when custom variables are missing.
25-27: Calendar day selected and hover background defaults
The fallback definitions for the selected and hover background colors of calendar days provide reliable defaults that enhance visual stability.
29-35: Status color definitions for the calendar
Fallbacks for success, warning, danger, and info state colors are in place. These settings ensure that status indications are visible and conform to the design tokens.
37-45: Input and header typography fallbacks
The calendar header and input elements now use fallbacks for font size, border radius, and hover border color. This creates consistency in form and header presentation.
47-59: Calendar list and disabled state color defaults
Fallbacks for list item hover and selected backgrounds, as well as disabled text and background colors, have been provided. These defaults guarantee clear visual feedback in various states.packages/theme/src/slider/vars.less (10)
15-17: Slider basic properties fallbacks
The slider font size and the default background color now include fallback tokens. This ensures that, even if primary design variables are missing, the slider will render with consistent typography and background.
19-19: Slider disabled background color fallback
A fallback for the disabled slider background color is specified, which helps indicate the control’s inactive state clearly.
25-30: Slider border radius and range radius defaults
Both the slider’s line border radius and the range’s border radius are set with fallback values drawn from the small border radius token. This promotes consistency in rounded corners.
32-34: Slider range color fallbacks
Fallbacks for the slider range background and its hover state are defined using the active control color, ensuring proper visual feedback during interaction.
38-38: Slider range disabled background
The fallback for the disabled state of the slider range background is configured, providing a clear look when the control is inactive.
45-51: Slider handle styling defaults
Fallback values for the slider handle’s background, disabled background, border color, and roundness (via border radius) ensure that the handle is rendered as designed regardless of missing primary tokens.
54-58: Slider handle interactivity fallbacks
The properties governing the slider handle’s interactive aspects (hover text color, hover border color, and shadow) now have fallback values to guarantee consistent interactive styling.
61-79: Slider input field fallback definitions
Multiple input field properties—such as height, border radius, border color, text and background colors, and spacing—are now provided with fallback tokens. This comprehensive setup maintains consistency across slider input rendering.
81-88: Slider mark fallback configurations
Fallbacks for the slider mark’s background, text color, font size, and margin are appropriately set. These ensure that the slider’s tick marks are displayed clearly and consistently.
90-100: Slider tooltip styling defaults
Fallback values for the slider tooltip (background, border radius, text color, and shadow) are defined to ensure that tooltip feedback remains visible and style-consistent.packages/theme/src/nav-menu/vars.less (9)
17-19: Navigation menu basic color and typography fallbacks
The fallback values for the navigation menu’s background color and item font size are accurately provided, ensuring a stable base appearance for the menu.
21-23: Navigation menu spacing defaults
By setting fallbacks for individual menu item margins and overall menu padding, the layout maintains proper spacing even in the absence of customized variables.
25-27: Navigation menu text and icon color fallbacks
The default text color for menu items and the icon fill for the “more” button now incorporate fallback values, which helps maintain legibility and visual consistency.
29-33: Navigation menu selection and hover styling defaults
Fallback values for selected text font weight, hover background, and underline color are provided, ensuring that selection states are clearly communicated.
35-37: Popup menu styling fallbacks
The dropdown menu receives fallback tokens for box shadow and selected text color, supporting a uniform pop-up experience.
39-43: Additional popmenu defaults
Fallbacks for the dropdown menu’s background, selected font weight, and text color are defined to maintain consistency in drop-down presentation.
53-57: Dropdown list item style fallbacks
The properties governing dropdown text height, item icon color, and item text color now include fallback values, which aid in ensuring readability in the nav-menu’s dropdown list.
59-69: Dropdown interaction feedback defaults
Fallbacks for normal text color, hover icon, hover text, and selected background colors in the dropdown are well integrated, ensuring responsive and clear interaction feedback.
71-77: Navigation dropdown typography defaults
The fallback definitions for node title font size, dropdown text font size, and border radius contribute to a consistent typographic hierarchy in the navigation dropdown.packages/theme/src/base/vars.less (16)
100-108: Success color tokens with fallback defaults
The success-themed properties for text, background, border, and icon colors now have robust fallback values (e.g., using #5cb300) that align well with the design language.
110-118: Error color tokens with defined fallbacks
Fallback values for error-themed properties (such as text and background colors using #f23030) are appropriately integrated, ensuring that error states are visually distinguished even without customized values.
120-128: Warning color tokens with fallback values
The warning properties are now equipped with fallback tokens (e.g., #ff8800) covering text, background, and border settings. This guarantees visual clarity for warning states.
130-138: Info color tokens enhanced with fallbacks
Info-related properties now include fallback values that ensure consistent styling—using defaults like #1476ff—across informational elements.
143-169: Primary interactive color definitions with robust fallbacks
The interactive properties for primary actions—including text (both inverse and regular), background, and border colors—are fortified with fallback values. These settings support both standard and inverse themes for buttons and links reliably.
173-197: Success interactive color tokens with coherent fallbacks
Interactive styles for success states (covering hover and active variants) now have well-chosen fallback values, ensuring that success interactions are consistently rendered across components.
204-232: Warning interactive styles with fallback integrations
The warning interactive tokens—including those for text, background, and borders—are enhanced with fallback values that clearly communicate warning states during interaction.
235-263: Danger interactive color tokens with refined fallbacks
Fallback values for danger states (including for text, background, and border colors) ensure that the representation of critical or dangerous interactions remains clear and consistent.
266-293: Info interactive styles fortified with fallback defaults
The interactive color tokens for informational actions now include fallback values that support consistent styling, especially in components like tooltips and badges.
296-320: Text color tokens with fallback values
A full hierarchy of text colors—from primary to placeholder and disabled—is now backed by fallback values, ensuring that all textual elements display consistently regardless of external overrides.
322-328: Icon color tokens enhanced via fallbacks
Fallback values for icons—including default, hover, active, and disabled states—provide a predictable and uniform appearance for iconography across the UI.
340-393: Background color tokens uniformly updated with fallbacks
Background color properties across common, primary, secondary, and disabled contexts now include fallback values. These ensure that component backgrounds remain consistent even when theme variables are missing.
396-415: Border and divider tokens with consistent fallbacks
Borders and divider colors—spanning from normal to hover and active states—are now defined with fallback tokens, ensuring a coherent look for component boundaries and separators.
429-429: Font size default fallback update
Defining the default font size with a fallback to the medium font size token guarantees consistent typography when external overrides are not provided.
460-466: Spacing variables utilizing fallback values
The spacing tokens (from small to xxxl) are now calculated based on a base unit with fallbacks. This design decision bolsters layout consistency across various components.
513-518: Scrollbar styling tokens with fallback enhancements
Scrollbar dimensions and colors now include fallback values, ensuring that even scrollable components adhere to the overall design system in the absence of explicit settings.packages/theme/src/grid/vars.less (13)
15-55: Solid fallback enhancements for grid base styles
The added fallback values for typography (e.g. font size of 14px, line height of 1.5) and for colors (e.g. text and icon colors) ensure that the grid styling remains robust even when primary theme variables are not provided.
58-72: Enhanced default fallbacks for grid header styling
The fallback values for header properties (height, background color, text color, divider color, etc.) are well chosen to keep header elements consistent and legible across the application.
75-83: Improved error and validation style defaults
Fallback values for error text, border, and background colors provide a clear and consistent look for error states within grid components.
85-89: Consistent success state fallbacks
The defaults for success indicators (border, icon, and background colors) align well with standard design practices, ensuring that positive states are clearly communicated.
91-100: Adequate defaults for warning and primary backgrounds
The warning background (#ff8800) and primary background fallback (#191919via--tv-color-info-text-primary) provide a clear visual hierarchy. It’s worth double-checking that these chosen colors match the overall design system.
96-102: Robust fallbacks for grid cell dimensions
The use of fallback values (e.g. cell height: 48px, and computed padding) ensures consistent layout across different grid cell variants. The use ofcalc()with space variables is both flexible and appropriate.
105-119: Enhanced defaults for checkbox styling
The fallback values for checkbox icon size, colors (normal, hover, disabled), padding, and border-radius are clear and consistently applied, which will help maintain uniformity in multi-select UI elements.
122-132: Solid radio button styling defaults
Consistent fallback values for radio icon size and colors ensure that radio buttons are styled appropriately even when custom theme values are missing.
135-141: Improved fallbacks for filter input styling
The fallback definitions for filter component background, hover states, and input border radii contribute to a cohesive design for filtering interfaces.
144-152: Enhanced toolbar styling defaults
By setting fallback values for toolbar padding, button container size, and icon colors, the updated variables help maintain consistency in the grid’s toolbar components.
161-175: Robust defaults for mini/small grid variations
The fallback values for mini and small grid components (e.g. header height, cell height, padding) support responsive design goals while ensuring visual consistency.
178-186: Solid fallbacks for miscellaneous grid component styles
The added defaults for tree node icon padding, input dimensions, and even the empty state image contribute to a well-rounded and resilient grid styling approach.
188-190: Review of empty state image fallback
Embedding an SVG (via a data URL) as a fallback for the “no data” state is a practical choice. It is recommended to verify that the SVG design meets the overall visual standards defined by the design system.packages/theme/src/tag/vars.less (13)
16-16: Consistent fallback for tag line height
The fallback value of1.5for the tag’s line height is a sensible default that should work well for most tag text sizes.
25-31: Solid fallback values for mini tag sizing
Usingvar(--tv-font-size-sm, 12px)for the mini tag font size and a fallback border radius of2pxensures a compact and consistent appearance for mini tags.
37-44: Good default fallbacks for small tag variables
The fallback values provided for small tag properties (such as font size and border radius) maintain clarity and usability within the component.
50-57: Effective fallback defaults for default tag dimensions
The choice of defaults—12px for the default tag font size and 4px for the border radius—ensures that tags appear uniform even if the theme does not explicitly override these values.
63-70: Robust fallback defaults for medium tag styling
Fallbacks for medium tag typography and spacing (14px font size and 6px border radius) are well aligned with overall design guidelines.
80-97: Well-defined color fallbacks for tag themes
The fallback settings for text, background, and border colors across light, dark, and plain tag variants provide a consistent visual language. It may be useful to cross-check these values with the design tokens to ensure complete consistency.
99-115: Clear fallback defaults for success-themed tags
The fallback values for a “success” theme (for example, text color and background color) are appropriately selected to convey a positive state in a visually distinct manner.
117-134: Strong default fallbacks for danger/error tag themes
The fallbacks for danger (or error) themed tags—with contrasts provided by colors such as#f23030—ensure that error states are obvious to the user.
136-153: Good default fallbacks for warning-themed tags
The warning theme’s fallback values (including text color and transparent background for plain tags) are well chosen to ensure that these tags retain emphasis without overwhelming the interface.
155-172: Robust fallback values for info-themed tags
The defaults for info-tag properties balance clarity and subtlety and are consistent with other theme definitions, which helps in maintaining a coherent design system.
174-206: Consistent hard-coded color definitions for various tag colors
While these colors are hard-coded, they appear to adhere to the specified design requirements. It is recommended to verify that all of the chosen colors meet accessibility standards (contrast ratios, etc.).
209-211: Solid fallback defaults for disabled tag states
The defaults for disabled text and background colors ensure that disabled tags are visibly distinct from interactive ones.
214-227: Effective fallbacks for tag close icon and slot icon styling
Fallback values for icon sizes and margins are consistent and help guarantee that icons render with proper spacing and alignment, regardless of theming.packages/theme/src/button/vars.less (29)
15-20: Strong fallback defaults for button global styles
The fallback values for global button properties—such as a font weight of 400, a 1px border width, and a 1.5 line height—help maintain consistent button appearance when theme overrides are absent.
22-28: Consistent circle and rounded button defaults
Using sensible fallback values for border radii (6px for default and 999px for round/circle variants) is a pragmatic solution to ensure buttons keep their intended shapes.
31-39: Adequate fallback defaults for standard button dimensions
Fallbacks for default button font size, height, padding, and minimum width provide a robust baseline ensuring that buttons render uniformly across various contexts.
41-49: Solid defaults for large button styling
The fallback values (such as a 14px font size, 48px height, and a 28px icon size) for large buttons clearly distinguish them from the default variant and support a clear visual hierarchy.
50-59: Consistent fallback defaults for medium button dimensions
The medium button settings using a fallback font size of 14px, height of 40px, and adjusted padding and width help to maintain design consistency across button sizes.
61-69: Good fallback values for small button styling
The fallbacks for small buttons (with a 12px font size and 28px height, among other values) ensure that the small variant is appropriately scaled and remains legible.
71-79: Appropriate defaults for mini button dimensions
The mini button fallback values (including a 12px font size and a 24px height) are well chosen for achieving a compact, space-efficient design.
85-93: Default color fallbacks for button states
Fallbacks for default button text color, background, border, and icon color (e.g.#191919for text and#fffffffor background) are clearly specified and contribute to a cohesive visual style.
94-101: Robust primary theme fallback defaults
Employing fallback values for the primary button state—with contrasting white text and dark background—effectively reinforces the importance of primary actions.
103-111: Effective fallback defaults for success button states
The success theme settings (such as a background color of#5cb300and inverse text/icon colors) correctly indicate successful or positive actions in the UI.
112-120: Appropriate fallback values for warning button styling
Warning buttons make use of a vibrant background (#ff8800) and corresponding fallback colors to clearly alert users, maintaining consistency with the theme.
121-129: Good fallback defaults for danger-themed buttons
The fallback choices for danger buttons (using a prominent#f23030color) deliver a clear visual warning, making the button state immediately recognizable.
130-138: Coherent fallback values for info button styling
The fallback settings for info buttons—with blue hues and white text—are consistent and provide a distinct informational cue to the user.
141-147: Solid fallback defaults for plain button styling
The fallback values provided for plain button variants (e.g. for default and primary) create a subtle appearance while still complying with overall theme guidelines.
155-161: Effective fallback values for plain success button variant
Plain success buttons now have designated fallback colors that balance visibility and subtlety, ensuring a softer visual cue for success states.
162-168: Appropriate defaults for plain warning button variant
Fallback values for the plain warning state provide a light, non-intrusive feedback style while preserving the thematic elements of warning.
169-175: Clear fallback defaults for plain danger button styling
The plain danger button settings maintain sufficient contrast and clarity even in a subdued style, ensuring the danger intent remains visible.
176-182: Robust fallback defaults for plain info buttons
The fallback configuration for plain info buttons—using shifts in background and text colors—supports a consistent, yet distinct, presentation in line with the info theme.
188-192: Consistent ghost button fallback defaults
The ghost state definitions, with their transparent backgrounds and subtle border colors, blend well with the overall design system and support a minimalist style.
220-234: Enhanced default active state fallback defaults
Fallbacks for the active state (background, border, and text adjustments) provide clear visual feedback during user interaction and conform to design expectations.
235-244: Robust fallback defaults for primary active state
Primary active state settings use a darker background and complementary text colors to clearly denote interactivity and focus on primary action buttons.
250-259: Sound fallback adjustments for success active state
The active state for success-themed buttons is well supported by modified background and border colors that accentuate the active feedback without clashing with the success theme.
265-274: Cohesive fallback values for warning active state
The chosen fallback values for warning active buttons yield a noticeable interactive effect while preserving the overall warm tone of the warning theme.
280-289: Appropriate fallback defaults for danger active state
The danger active state is clearly delineated by a shift to a more intense color tone, ensuring a distinct visual cue during interaction.
295-304: Consistent fallback defaults for info active state
The fallback properties for info active state (adjustments in background and border colors) effectively maintain both legibility and thematic cohesion during active interactions.
305-308: Clear fallback for info active plain text
The text color modifications for the active plain info state maintain design continuity and readable contrast during user interactions.
310-319: Robust fallback defaults for disabled button state
The disabled state uses subdued fallback colors for text, background, and icons to signal non-interactivity effectively. These ensure that disabled buttons remain distinct without drawing undue attention.
322-345: Well-defined fallback defaults for icon and text-only button variants
Fallback settings for icon-only and ontext configurations (such as border colors for only-icon states and text color adjustments) contribute to a cohesive, accessible design for varied button presentations.
346-371: Effective fallback defaults for button spacing
The margin and padding fallback values between button elements (for differing sizes such as default and large buttons) are thoughtfully chosen to enhance layout consistency across the interface.
chenxi-20
force-pushed
the
feat/theme-value-20250313
branch
from
f9a801d to
e0e3bf9
Compare
chenxi-20
changed the title
chenxi-20
changed the title
chenxi-20
force-pushed
the
feat/theme-value-20250313
branch
from
e0e3bf9 to
c9a2d5e
Compare
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (1)
packages/theme/build/writeDefaultValue.js (1)
25-28:⚠️ Potential issueReplace
eval()with a safer alternative for expression evaluationUsing
eval()poses significant security risks, even when inputs seem controlled. An attacker might be able to inject malicious code if they can influence the content of LESS files or variable values.Replace with a safer arithmetic expression evaluator:
- subVar = eval(subVar) + 'px' + // Use Function constructor (still safer than eval) or math expression parser + subVar = Function('"use strict"; return (' + subVar + ')')() + 'px'For even better security, consider using a dedicated math expression parser library or implementing a simple parser for the limited set of operations needed.
🧰 Tools
🪛 Biome (1.9.4)
[error] 27-27: eval() exposes to security risks and performance issues.
See the MDN web docs for more details.
Refactor the code so that it doesn't need to call eval().(lint/security/noGlobalEval)
🧹 Nitpick comments (6)
packages/theme/build/mapVar.js (4)
3-21: Consider translating Chinese comments to English for better international collaboration.The brand color section is well-structured with appropriate variable naming, but the section comments are in Chinese, which might create barriers for non-Chinese speaking developers.
- /* 1.1品牌色 */ + /* 1.1 Brand Colors */ - /* 品牌主色 */ + /* Primary Brand Color */
22-36: The neutral color scale is well-defined but could benefit from English translation.The neutral colors section provides a comprehensive grayscale palette with detailed usage comments, but would be more accessible with English comments.
- /* 1.2 中立色 */ + /* 1.2 Neutral Colors */ - /* 公用灰色系，用于文本、图标、线条、背景色 */ + /* Common grayscale, used for text, icons, lines, and background colors */
38-95: Functional colors are well-structured, but could use more consistent naming.The functional color sections (success, error, warning, info) follow a good pattern, but there's a slight inconsistency in naming where "--tv-base-color-error-" and "--tv-base-color-warn-" are used instead of something more consistently named like "--tv-base-color-danger-" and "--tv-base-color-warning-".
1-518: Consider adding documentation on variable usage patterns.The file contains a comprehensive set of variables, but lacks documentation on how developers should use them. Consider adding a comment section at the top that explains variable categories, naming conventions, and usage patterns to help new developers understand the system.
/* prettier-ignore */ +/* + * Theme Variables + * + * This file contains CSS custom properties (variables) for the application theme. + * + * Naming Convention: + * --tv-[category]-[property]-[variant] + * + * Categories: + * - base-color: Base color palette + * - color: Component-specific colors + * - font: Typography + * - border: Border properties + * - space: Spacing system + * - size: Sizing system + * - shadow: Shadow effects + * + * Usage: + * 1. Use semantic variables (--tv-color-*) instead of base colors (--tv-base-color-*) in components + * 2. Prefer using existing variables over creating new ones + * 3. For new components, map desired styles to existing variables where possible + */ export const mapVar = {packages/theme/build/writeDefaultValue.js (2)
1-5: Use the path module for robust path handlingString concatenation for paths can be error-prone across different operating systems. The Node.js
pathmodule provides cross-platform compatibility.import fs from 'node:fs' + import path from 'node:path' import { mapVar } from './mapVar.js' const originFilePath = 'vars.less' const originRootPath = '../src/'Then update all path concatenations to use
path.join():- const varsPath = `${originRootPath}/${fileDir}/${originFilePath}` + const varsPath = path.join(originRootPath, fileDir, originFilePath)
66-68: Document the reason for skipping the 'base' directoryThe code skips processing the 'base' directory without explanation. Adding a comment explaining why would improve maintainability.
const mkStat = (fileDir) => { if(fileDir === 'base') { + // Skip 'base' directory because [reason why it should be skipped] return }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
packages/theme/build/buildVarToObj.js(1 hunks)packages/theme/build/gulp-dist.js(1 hunks)packages/theme/build/mapVar.js(1 hunks)packages/theme/build/writeDefaultValue.js(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- packages/theme/build/buildVarToObj.js
- packages/theme/build/gulp-dist.js
🧰 Additional context used
🪛 Biome (1.9.4)
packages/theme/build/writeDefaultValue.js
[error] 27-27: eval() exposes to security risks and performance issues.
See the MDN web docs for more details.
Refactor the code so that it doesn't need to call eval().
(lint/security/noGlobalEval)
🔇 Additional comments (13)
packages/theme/build/mapVar.js (12)
1-2: Code structure looks good.The file properly starts with a comment to disable prettier formatting, which is appropriate for this type of configuration file where specific formatting is important.
97-139: Alert component variable names follow a logical pattern.The variables for alert components and status indicators are well-organized, making good use of the base color variables defined earlier, which promotes consistency across the UI.
140-317: Interactive component variables are comprehensive and well-organized.The variables for buttons, links, and text elements provide detailed states (hover, active, disabled) which is excellent for maintaining consistent interactions. The comments provide useful context for each variable's intended use.
318-335: Icon color variables provide good coverage for different states.The icon color variables account for various states and contexts, which is good for consistency across the application.
336-393: Background color variables are well-categorized.The background color variables are logically grouped by state (normal, disabled, hover, active) which makes them easier to use consistently across components.
394-416: Border color variables provide comprehensive coverage.The border and divider color variables cover all necessary states and use cases, making them practical for consistent styling.
417-445: Font variables follow a logical sizing system.The font family, size, line height, and weight variables follow a consistent and logical pattern, making typography management easier across the application.
446-455: Border radius variables use a sensible scale.The border radius variables follow a size scale that's consistent with other spacing variables, and the note about avoiding percentage-based border-radius is a good practice to prevent oval shapes.
457-468: Space variables use a smart mathematical approach.The spacing system uses a base unit (4px) and mathematical calculations to derive other values, which creates a consistent visual rhythm across the UI. This is an excellent approach to spacing.
469-482: Component sizing follows a logical progression.The size variables for component heights and icons follow a consistent pattern that aligns with the spacing system.
484-509: Shadow variables provide directional options.The shadow system is comprehensive, offering options for different elevations and directions (up, down, left, right), which is useful for creating consistent depth across the UI.
510-518: Scrollbar styling is thoughtfully included.Including scrollbar styling variables is a good practice that's often overlooked. These variables will help maintain consistency in scrollable containers.
packages/theme/build/writeDefaultValue.js (1)
7-84: Consider refactoring to async/await for better performanceThe code uses synchronous file operations which block the Node.js event loop. For better performance, especially with large directories, consider using async versions with async/await.
This would align with modern Node.js practices and improve scalability. The previous review already provided a good async/await refactoring example that you could adopt.
🧰 Tools
🪛 Biome (1.9.4)
[error] 27-27: eval() exposes to security risks and performance issues.
See the MDN web docs for more details.
Refactor the code so that it doesn't need to call eval().(lint/security/noGlobalEval)
PR
PR Checklist
Please check if your PR fulfills the following requirements:
PR Type
What kind of change does this PR introduce?
What is the current behavior?
Issue Number: N/A
What is the new behavior?
Does this PR introduce a breaking change?
Other information
Summary by CodeRabbit
New Features
Chores
These updates contribute to a more unified and polished user interface experience.