Al/update form selector styles #1050
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
aaronlee777
requested review from
dmortal,
jeffredodd and
serikjensen
as code owners
Contributor
There was a problem hiding this comment.
Pull request overview
This PR refactors theme and component styling to use more specific border/input color tokens and updates a few component visual details (e.g., button weight, spinner/icon colors) for improved consistency.
Changes:
- Introduces
colorBorderPrimary/colorBorderSecondaryin the theme and migrates many components from--g-colorBorderto the new tokens. - Updates input selection controls (Checkbox/Radio) to use
--g-inputBorderColorand tweaks checked/disabled styling. - Adjusts a few presentation details (button typography, focus styles, spinner/icon colors).
Reviewed changes
Copilot reviewed 30 out of 30 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| src/styles/_Popover.scss | Popover border/arrow stroke now uses secondary border token |
| src/styles/_Base.scss | <hr> now uses secondary border token |
| src/contexts/ThemeProvider/theme.ts | Reworks neutral palette and replaces colorBorder with primary/secondary border tokens |
| src/components/Payroll/PayrollReceipts/PayrollReceiptsPresentation.module.scss | Receipt borders now use secondary border token |
| src/components/Payroll/PayrollEditEmployee/PayrollEditEmployeePresentation.module.scss | Section dividers now use secondary border token |
| src/components/Payroll/ConfirmWireDetails/WireInstructions/WireInstructions.module.scss | <hr> now uses secondary border token |
| src/components/InformationRequests/InformationRequestForm/InformationRequestForm.module.scss | Card/divider borders now use secondary border token |
| src/components/Employee/Profile/AdminPersonalDetails.module.scss | Container border now uses secondary border token |
| src/components/Employee/Deductions/IncludeDeductions/IncludeDeductions.module.scss | Borders/border-color now use secondary border token |
| src/components/Contractor/Profile/ContractorProfileForm.module.scss | Container border now uses secondary border token |
| src/components/Contractor/Payments/PaymentStatement/PaymentStatementPresentation.module.scss | Receipt border now uses secondary border token |
| src/components/Common/UI/Tabs/Tabs.stories.tsx | Story inline borders now use secondary border token |
| src/components/Common/UI/Tabs/Tabs.module.scss | Tablist divider now uses secondary border token |
| src/components/Common/UI/Table/Table.module.scss | Table borders/dividers now use secondary border token |
| src/components/Common/UI/Radio/Radio.module.scss | Radio uses input border token; checked state/dot styling updated |
| src/components/Common/UI/Modal/Modal.module.scss | Modal borders/shadows now use secondary border token |
| src/components/Common/UI/FileInput/FileInput.module.scss | FileInput icon color updated to secondary content token |
| src/components/Common/UI/DescriptionList/DescriptionList.module.scss | Row divider now uses secondary border token |
| src/components/Common/UI/DatePicker/DatePicker.module.scss | Calendar borders now use secondary border token; placeholder italic removed |
| src/components/Common/UI/Checkbox/Checkbox.module.scss | Checkbox uses input border token; disabled/checked visuals updated |
| src/components/Common/UI/Card/Card.module.scss | Card border now uses secondary border token |
| src/components/Common/UI/CalendarPreview/CalendarPreview.module.scss | Calendar preview borders/dividers now use secondary border token |
| src/components/Common/UI/Button/Button.module.scss | Button weight/secondary variant styling updated; focus outline offset changed |
| src/components/Common/UI/Banner/Banner.module.scss | Banner borders now use secondary border token |
| src/components/Common/UI/Alert/Alert.module.scss | Alert border token switched to primary border |
| src/components/Common/RequirementsList/RequirementsList.module.scss | Requirements list borders/lines now use secondary border token |
| src/components/Common/ReorderableList/ReorderableList.module.scss | Drag outline now uses secondary border token |
| src/components/Common/InternalError/InternalError.module.scss | Internal error card borders now use secondary border token |
| src/components/Common/InlineSpinner/InlineSpinner.module.scss | Spinner color updated to primary |
| src/components/Common/DocumentViewer/DocumentViewer.module.scss | Document viewer border now uses secondary border token |
Comments suppressed due to low confidence (1)
src/contexts/ThemeProvider/theme.ts:1
- Removing
colorBorderfromdefaultThemeColorsis a breaking change for any external theme overrides typed asGustoSDKThemeColorsand for any existing usage of--g-colorBorder. Consider keeping a backward-compatiblecolorBorderkey (e.g., mapping it tocolorBorderSecondaryorcolorBorderPrimary) and continuing to emit a--g-colorBorderCSS variable alias during a deprecation period.
import { getRootFontSize, toRem } from '@/helpers/rem'
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
aaronlee777
force-pushed
the
al/update-form-selector-styles
branch
from
35ef30e to
5e42558
Compare
serikjensen
requested changes
Feb 6, 2026
Member
serikjensen
left a comment
serikjensen
left a comment
There was a problem hiding this comment.
Looking good! request to update the commit message to ensure this gets tracked as a breaking change. Included cursor prompt to take care of that in the feedback. Once it is merged, i'll coordinate with you on how we message it out to partners
aaronlee777
force-pushed
the
al/update-form-selector-styles
branch
2 times, most recently
from
7af1047 to
f48e30d
Compare
aaronlee777
force-pushed
the
al/update-form-selector-styles
branch
2 times, most recently
from
d9ca108 to
d1cbbb4
Compare
krisxcrash
approved these changes
Feb 9, 2026
serikjensen
approved these changes
Feb 9, 2026
BREAKING CHANGE: colorBorder replaced with colorBorderPrimary/colorBorderSecondary
Migration:
- var(--g-colorBorder) -> var(--g-colorBorderSecondary) for subtle borders
- var(--g-colorBorder) -> var(--g-colorBorderPrimary) for prominent borders
Theme override example:
- Before: { colorBorder: '#E0E0E0' }
- After: { colorBorderPrimary: '#D0D0D0', colorBorderSecondary: '#E8E8E8' }
Defaults:
- colorBorderPrimary: neutral[300]
- colorBorderSecondary: neutral[200]
Co-authored-by: Cursor <cursoragent@cursor.com>
aaronlee777
force-pushed
the
al/update-form-selector-styles
branch
from
d1cbbb4 to
28b03d3
Compare
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This pull request updates the styling across multiple components to improve visual consistency and clarify the use of color variables for borders, backgrounds, and accents. The main theme is the migration from generic border color variables to more specific ones, as well as minor improvements to font weight and component states.
Border Color Refactoring
var(--g-colorBorder)tovar(--g-colorBorderSecondary)for a more consistent and refined appearance:DocumentViewer.module.scss,InternalError.module.scss,ReorderableList.module.scss,RequirementsList.module.scss,Banner.module.scss,CalendarPreview.module.scss,Card.module.scss,Modal.module.scss,Table.module.scss,Tabs.module.scss,Tabs.stories.tsx,PaymentStatementPresentation.module.scss, and others. [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11] [12] [13] [14] [15] [16] [17] [18] [19] [20] [21] [22] [23]Alert.module.scssand button secondary variant styles to usevar(--g-colorBorderPrimary)for improved clarity and separation between primary and secondary elements. [1] [2]Input and Selection Component Improvements
CheckboxandRadiocomponents to usevar(--g-inputBorderColor)and improved disabled states and checked appearance. [1] [2] [3]Radiodot size and color for better visual hierarchy and accessibility.Other Visual Consistency Updates
var(--g-fontWeightSemibold)and secondary button color tovar(--g-colorBodySubContent)for improved readability and consistency. [1] [2]var(--g-colorPrimary)instead of accent for a more neutral loading indicator.FileInputto usevar(--g-colorSecondaryContent)for better contrast.These changes collectively enhance the UI's consistency, accessibility, and maintainability by using more precise and purposeful color variables.
Screenshots