fix: replace hardcoded css with vars#727
Merged
paanSinghCoder merged 1 commit intomainfrom Apr 2, 2026
Merged
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
📝 WalkthroughWalkthroughThis PR systematically refactors CSS modules across the component library, replacing hardcoded pixel values with design-token-based CSS variables. The changes standardize spacing (via Possibly related issues
Suggested reviewers
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
5 tasks
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 7
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
packages/raystack/components/calendar/calendar.module.css (1)
87-97:⚠️ Potential issue | 🟠 MajorBorder width regression:
1pxbecame2px
--rs-space-1resolves to2px, so these two changes thicken day borders from1pxto2px. This alters day cell visual density and can affect layout/hover geometry.Proposed fix
.day { - border: var(--rs-space-1) solid transparent; + border: var(--rs-border-width-1, 1px) solid transparent; } .day:hover:not(.disabled):not(.outside):not(.selected) { - border: var(--rs-space-1) solid var(--rs-color-border-accent-emphasis-hover); + border: var(--rs-border-width-1, 1px) solid var(--rs-color-border-accent-emphasis-hover); }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/raystack/components/calendar/calendar.module.css` around lines 87 - 97, The hover rule for .day:hover:not(.disabled):not(.outside):not(.selected) unintentionally uses var(--rs-space-1) which resolves to 2px and doubles the border thickness; change that border declaration to an explicit 1px (e.g., border: 1px solid var(--rs-color-border-accent-emphasis-hover)) or to a dedicated 1px token so the hover border matches the original 1px thickness used elsewhere.packages/raystack/components/menu/menu.module.css (1)
11-19:⚠️ Potential issue | 🔴 CriticalRemove duplicate
min-widthdeclaration.The
.contentrule declaresmin-widthtwice: once at line 11 (var(--rs-space-15)) and again at line 19 (var(--anchor-width)). The second declaration overrides the first, making line 11 ineffective.🔧 Proposed fix
box-sizing: border-box; - min-width: var(--rs-space-15); padding: var(--rs-space-2); background-color: var(--rs-color-background-base-primary); border-radius: var(--rs-radius-2); box-shadow: var(--rs-shadow-lifted); border: 0.5px solid var(--rs-color-border-base-primary); color: var(--rs-color-foreground-base-primary); min-width: var(--anchor-width);🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/raystack/components/menu/menu.module.css` around lines 11 - 19, The .content CSS rule contains duplicate min-width declarations (min-width: var(--rs-space-15) and min-width: var(--anchor-width)); remove the unwanted/obsolete one so only the intended value remains (either keep var(--anchor-width) if anchor sizing is required, or keep var(--rs-space-15) if spacing token should control it) and ensure any references to .content rely on the single min-width left to avoid shadowing.
🧹 Nitpick comments (10)
packages/raystack/components/combobox/combobox.module.css (1)
14-15: Replace unresolved hardcoded lengths with variable fallbacks instead of TODO-only markersLine 15 and Line 75 still hardcode pixel values. To keep this PR aligned with its objective, prefer variable + fallback now, then map to final design tokens later.
Proposed patch
.content { @@ - /* Todo: var does not exist for 320px */ - max-height: 320px; + max-height: var(--rs-combobox-content-max-height, 320px); @@ .separator { - /* Todo: var does not exist for 1px */ - height: 1px; + height: var(--rs-combobox-separator-height, 1px); margin: var(--rs-space-2) calc(var(--rs-space-3) * -1); background: var(--rs-color-border-base-primary); }Also applies to: 74-75
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/raystack/components/combobox/combobox.module.css` around lines 14 - 15, Replace the hardcoded pixel values in combobox.module.css with CSS variable fallbacks: replace the occurrences of max-height: 320px and the other hardcoded pixel value (the second occurrence around the same selector block) with var(--combobox-max-height, 320px) and a similarly named variable fallback (e.g., var(--combobox-something, <original-px>)); update the relevant selectors in combobox.module.css so both instances use the new variables (keep the original px value as the fallback) so design tokens can be wired later.packages/raystack/components/callout/callout.module.css (3)
12-13: TODO comments for0.5pxborder-width are inconsistent.TODO comments were added only for lines 13 and 120, but the same
0.5pxborder-width appears in many other places throughout the file (lines 125, 130, 135, 140, 173, 179, 185, 191, 197, 209, 221, 233, 244). Consider either adding TODO comments consistently to all occurrences or removing them entirely and tracking the missing variable in a separate issue.Also applies to: 119-120
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/raystack/components/callout/callout.module.css` around lines 12 - 13, Multiple occurrences of the CSS declaration "border: 0.5px solid transparent" in callout.module.css are inconsistently annotated with a TODO about a missing var for 0.5px; update the file so the treatment is consistent: either add the same TODO comment next to every "border: 0.5px" occurrence (e.g., the instances at lines referenced around the callout styles) or remove all inline TODOs and create a single repository issue to track adding a CSS variable for 0.5px; locate occurrences by searching for the literal "border: 0.5px" in callout.module.css (the rule within the callout styles) and apply one consistent approach across all matches.
84-90: Thegapproperty has no effect on.callout-success.
.callout-successis a modifier class applied to.callout, which is a block-level element (nodisplay: flex). Thegapproperty only applies to flex/grid containers, so this declaration is ineffective. This appears to be a pre-existing issue, but worth cleaning up.♻️ Suggested fix
.callout-success { /* Todo: var does not exist for 318px */ width: 318px; - gap: var(--rs-space-10); background: var(--rs-color-background-success-primary); color: var(--rs-color-foreground-success-primary); }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/raystack/components/callout/callout.module.css` around lines 84 - 90, .callout-success sets gap but .callout (the base block) is not a flex/grid container so gap is ignored; fix by making the container a layout that supports gap or removing the property: update the base .callout to use display:flex (or display:grid) so gap on .callout-success takes effect for its children, or if no layout change is desired, remove the gap from .callout-success and apply appropriate spacing to its child elements instead; target the .callout base class and .callout-success modifier when making this change.
3-4: Consider tracking missing CSS variables in a central issue.Rather than scattering TODO comments throughout CSS files, consider creating a GitHub issue to track missing design tokens (e.g.,
318pxwidth,0.5pxborder-width). This makes it easier to address them systematically and keeps the CSS cleaner.Also applies to: 85-86
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/raystack/components/callout/callout.module.css` around lines 3 - 4, Create a single GitHub issue to track missing design tokens referenced by scattered TODOs (e.g., the 318px width and 0.5px border-width), then update the CSS entries (the TODO comment and the hardcoded width: 318px plus the border-width occurrences) to use CSS variables with sensible fallbacks (e.g., var(--callout-width, 318px) and var(--border-width, 0.5px)) and replace the inline TODOs with a short comment that references the new central issue number so all missing tokens are tracked in one place.packages/raystack/components/container/container.module.css (1)
16-29: Use tokenized fallbacks instead of TODO-only placeholdersThe current TODO comments document missing tokens, but the values remain non-themeable hardcoded widths. Consider switching to component-scoped CSS variables with fallbacks so consumers can override immediately without waiting for new global tokens.
Proposed refactor
.container-small { - /* Todo: var does not exist for 430px */ - max-width: 430px; + max-width: var(--rs-container-small-max-width, 430px); } .container-medium { - /* Todo: var does not exist for 715px */ - max-width: 715px; + max-width: var(--rs-container-medium-max-width, 715px); } .container-large { - /* Todo: var does not exist for 1145px */ - max-width: 1145px; + max-width: var(--rs-container-large-max-width, 1145px); }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/raystack/components/container/container.module.css` around lines 16 - 29, Replace the hardcoded max-widths in .container-small, .container-medium, and .container-large with component-scoped CSS variables that include fallbacks so consumers can override them immediately; e.g., define a base scope (like .container) or :root within this module to declare variables such as --container-small, --container-medium, --container-large with their current pixel values as defaults, then change max-width to use var(--container-small, 430px) / var(--container-medium, 715px) / var(--container-large, 1145px), and remove the TODO comments so the styles are themeable without awaiting global tokens.packages/raystack/components/tooltip/tooltip.module.css (1)
98-98: Pre-existing: Keyframe names should use kebab-case.Stylelint reports that keyframe names like
slideUpAndFadeshould beslide-up-and-fade. While this is a pre-existing issue not introduced by this PR, consider addressing it in a follow-up to maintain linting compliance.Also applies to: 104-104, 111-111, 118-118, 125-125, 135-135, 145-145, 155-155
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/raystack/components/tooltip/tooltip.module.css` at line 98, Rename keyframe identifiers to kebab-case (e.g., change slideUpAndFade to slide-up-and-fade) across tooltip.module.css and update every corresponding animation-name/animation shorthand that references them; ensure all other keyframes mentioned in this file (the ones flagged at lines 104, 111, 118, 125, 135, 145, 155) are similarly renamed and all usages in CSS/JS/TSX that reference those names are updated to the new kebab-case tokens so linting passes without breaking animations.packages/raystack/components/filter-chip/filter-chip.module.css (1)
149-155: Consider tokenizing the remaining hardcoded 18px values.The non-text variant
.inputFieldand.dateFieldstill use hardcoded18pxfor height/min-height. For full consistency with this PR's goal, these could also be tokenized (though no exact match exists in the spacing scale).Also applies to: 173-183
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/raystack/components/filter-chip/filter-chip.module.css` around lines 149 - 155, The .inputField and .dateField rules still use hardcoded min-height/height: 18px; replace these hardcoded values with a design-token CSS variable (create/use a suitable spacing token, e.g. --rs-spacing-xxx) and reference that token in both .inputField and .dateField so they follow the same tokenized spacing approach used elsewhere; also apply the same replacement for the duplicate occurrences noted around lines 173-183 to keep spacing consistent across the module.packages/raystack/components/accordion/accordion.module.css (1)
12-12: Standardize TODO comment format.The comment uses "Todo" (mixed case) instead of the standard "TODO" (all caps) format commonly used in codebases for searchability.
📝 Proposed fix for consistent TODO format
- /* Todo: var does not exist for 36px */ + /* TODO: var does not exist for 36px */🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/raystack/components/accordion/accordion.module.css` at line 12, The inline comment in accordion.module.css currently uses "Todo" instead of the codebase-standard "TODO"; update the comment "/* Todo: var does not exist for 36px */" to use the standardized all-caps prefix "TODO" (e.g., "/* TODO: var does not exist for 36px */") so it is discoverable by tooling and team conventions.packages/raystack/components/data-table/data-table.module.css (1)
11-11: Define missing design tokens across the component library.TODO comments indicate incomplete design token migration. Review of the codebase reveals 21 similar comments across 10+ component files with missing tokens for values like 300px, 160px, 320px, 430px, 715px, 1145px, and sub-pixel values (0.5px, 1px). The current spacing token scale only covers 2px–120px (
--rs-space-1through--rs-space-17).Recommend creating a tracking issue to:
- Define missing spacing tokens and add to the design system
- Map remaining hardcoded values to new or existing tokens
- Complete the migration across all components
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/raystack/components/data-table/data-table.module.css` at line 11, The CSS TODO in data-table.module.css notes a missing spacing token for 300px; the fix is to open a tracking issue to extend the design token scale (current --rs-space-1 through --rs-space-17 covering 2px–120px) to include the missing sizes (160px, 300px, 320px, 430px, 715px, 1145px and sub-pixel values 0.5px/1px), add those new tokens to the global token/variables definition, and then update components (search for TODOs and replace hardcoded values in files referencing --rs-space-* and any direct px values like 300px) to use the new tokens so all instances (including data-table.module.css) are migrated consistently.packages/raystack/components/scroll-area/scroll-area.module.css (1)
3-3: Consider completing the refactor or adding a TODO comment.Line 3 still uses a hardcoded
6pxvalue while line 2 was updated to use a CSS variable. This is inconsistent with the PR's objective to replace hardcoded CSS properties with CSS variables.Since no
--rs-space-*token exists for6px(the spacing scale goes 2px, 4px, 8px, ...), you have two options:
Add a TODO comment noting the design token gap (following the pattern mentioned in the AI summary):
--rs-scrollbar-size-hover: 6px; /* TODO: No equivalent spacing token exists */Use the nearest token (if 8px is acceptable):
--rs-scrollbar-size-hover: var(--rs-space-3); /* 8px */This ensures consistency in the refactoring approach across the file.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/raystack/components/scroll-area/scroll-area.module.css` at line 3, Line 3 still hardcodes --rs-scrollbar-size-hover: 6px while other tokens were converted to CSS variables; update this to be consistent by either adding a TODO comment next to --rs-scrollbar-size-hover noting the missing design token (e.g., "TODO: No equivalent spacing token exists") or replace the hardcoded value with the nearest spacing token var(--rs-space-3) (8px) if acceptable; adjust the declaration of --rs-scrollbar-size-hover accordingly.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@packages/raystack/components/accordion/accordion.module.css`:
- Line 13: The hardcoded min-height: 36px in accordion.module.css should be
tokenized or documented: replace the literal 36px with a new or existing design
token (e.g., --rs-space-9 or a new --rs-size-component-height) and update usages
across navbar, table, and accordion to use that token; if it must remain
component-specific, add an inline comment in accordion.module.css explaining why
this value is intentionally not tokenized and add a note to the design tokens
doc explaining the decision; reference the min-height declaration and the
existing --rs-line-height-t3 token when implementing the change.
In `@packages/raystack/components/code-block/code.module.css`:
- Line 97: The stylelint config is flagging the CSS Modules :global() syntax
used in ".theme :global(.token.bold)"; update the stylelint configuration (the
.stylelintrc.json referenced in the review) to add a plugin that recognizes CSS
Modules scoping (for example add "postcss-modules" or configure "stylelint-scss"
with appropriate rules) or extend a CSS Modules-aware config so :global() is
accepted; ensure the plugin is listed under "plugins" and adjust any rule
overrides to allow the :global pseudo-class so the selector in the code-block
styles no longer triggers an unknown-pseudo-class error.
In `@packages/raystack/components/color-picker/color-picker.module.css`:
- Around line 62-64: The stylelint rule is violated because there is no blank
line between the custom property declaration (--track-checker-size) and the next
declaration (background-image); edit the CSS in color-picker.module.css to
insert a single empty line before the background-image declaration so that the
block has a blank line after --track-checker-size: var(--rs-space-4); and before
background-image: linear-gradient(...).
- Around line 68-73: The checkerboard uses inconsistent
fallbacks—background-size uses var(--track-checker-size, 8px) for width but 12px
for height and multiple background-position calc() calls also use 12px
fallbacks—causing non-square tiles when the token is missing; update all
occurrences of var(--track-checker-size, 12px) to the same fallback as the size
(e.g., var(--track-checker-size, 8px)) so background-size and every
background-position calc() reference the identical var(--track-checker-size,
...) fallback and produce square checker cells.
In `@packages/raystack/components/command/command.module.css`:
- Line 29: The change replaced border-radius: var(--rs-space-2) (4px) with
border-radius: var(--rs-radius-2) which causes a visual regression because
--rs-radius-2 is 16px in the traditional theme; either revert the component to
use the original token var(--rs-space-2) to preserve the 4px radius, or ensure
the radius token stays value-equivalent by setting --rs-radius-2 to 4px in the
traditional theme definition (radius.css) so the visual result remains
unchanged; update the border-radius usage in command.module.css or adjust the
--rs-radius-2 value in radius.css accordingly.
In `@packages/raystack/components/meter/meter.module.css`:
- Around line 56-60: The declaration block for the .circularSvg selector
violates stylelint's empty-line rule because there is no blank line before the
physical property declarations; update the .circularSvg block (the area defining
--rs-meter-track-size, --rs-meter-radius, --rs-meter-circumference) to insert a
single blank line between the last CSS variable declaration
(--rs-meter-circumference) and the first physical property (width) so the block
has an empty line before width and thus satisfies the empty-line-before rule.
In `@packages/raystack/components/progress/progress.module.css`:
- Around line 56-60: The .circularSvg declaration group violates stylelint's
declaration-empty-line-before rule; to fix it open the .circularSvg rule (the
block containing --rs-progress-track-size, --rs-progress-radius,
--rs-progress-circumference) and add a blank line before the width property so
there is an empty line between the custom property declarations (e.g.
--rs-progress-circumference) and the first non-custom declaration (width).
---
Outside diff comments:
In `@packages/raystack/components/calendar/calendar.module.css`:
- Around line 87-97: The hover rule for
.day:hover:not(.disabled):not(.outside):not(.selected) unintentionally uses
var(--rs-space-1) which resolves to 2px and doubles the border thickness; change
that border declaration to an explicit 1px (e.g., border: 1px solid
var(--rs-color-border-accent-emphasis-hover)) or to a dedicated 1px token so the
hover border matches the original 1px thickness used elsewhere.
In `@packages/raystack/components/menu/menu.module.css`:
- Around line 11-19: The .content CSS rule contains duplicate min-width
declarations (min-width: var(--rs-space-15) and min-width: var(--anchor-width));
remove the unwanted/obsolete one so only the intended value remains (either keep
var(--anchor-width) if anchor sizing is required, or keep var(--rs-space-15) if
spacing token should control it) and ensure any references to .content rely on
the single min-width left to avoid shadowing.
---
Nitpick comments:
In `@packages/raystack/components/accordion/accordion.module.css`:
- Line 12: The inline comment in accordion.module.css currently uses "Todo"
instead of the codebase-standard "TODO"; update the comment "/* Todo: var does
not exist for 36px */" to use the standardized all-caps prefix "TODO" (e.g., "/*
TODO: var does not exist for 36px */") so it is discoverable by tooling and team
conventions.
In `@packages/raystack/components/callout/callout.module.css`:
- Around line 12-13: Multiple occurrences of the CSS declaration "border: 0.5px
solid transparent" in callout.module.css are inconsistently annotated with a
TODO about a missing var for 0.5px; update the file so the treatment is
consistent: either add the same TODO comment next to every "border: 0.5px"
occurrence (e.g., the instances at lines referenced around the callout styles)
or remove all inline TODOs and create a single repository issue to track adding
a CSS variable for 0.5px; locate occurrences by searching for the literal
"border: 0.5px" in callout.module.css (the rule within the callout styles) and
apply one consistent approach across all matches.
- Around line 84-90: .callout-success sets gap but .callout (the base block) is
not a flex/grid container so gap is ignored; fix by making the container a
layout that supports gap or removing the property: update the base .callout to
use display:flex (or display:grid) so gap on .callout-success takes effect for
its children, or if no layout change is desired, remove the gap from
.callout-success and apply appropriate spacing to its child elements instead;
target the .callout base class and .callout-success modifier when making this
change.
- Around line 3-4: Create a single GitHub issue to track missing design tokens
referenced by scattered TODOs (e.g., the 318px width and 0.5px border-width),
then update the CSS entries (the TODO comment and the hardcoded width: 318px
plus the border-width occurrences) to use CSS variables with sensible fallbacks
(e.g., var(--callout-width, 318px) and var(--border-width, 0.5px)) and replace
the inline TODOs with a short comment that references the new central issue
number so all missing tokens are tracked in one place.
In `@packages/raystack/components/combobox/combobox.module.css`:
- Around line 14-15: Replace the hardcoded pixel values in combobox.module.css
with CSS variable fallbacks: replace the occurrences of max-height: 320px and
the other hardcoded pixel value (the second occurrence around the same selector
block) with var(--combobox-max-height, 320px) and a similarly named variable
fallback (e.g., var(--combobox-something, <original-px>)); update the relevant
selectors in combobox.module.css so both instances use the new variables (keep
the original px value as the fallback) so design tokens can be wired later.
In `@packages/raystack/components/container/container.module.css`:
- Around line 16-29: Replace the hardcoded max-widths in .container-small,
.container-medium, and .container-large with component-scoped CSS variables that
include fallbacks so consumers can override them immediately; e.g., define a
base scope (like .container) or :root within this module to declare variables
such as --container-small, --container-medium, --container-large with their
current pixel values as defaults, then change max-width to use
var(--container-small, 430px) / var(--container-medium, 715px) /
var(--container-large, 1145px), and remove the TODO comments so the styles are
themeable without awaiting global tokens.
In `@packages/raystack/components/data-table/data-table.module.css`:
- Line 11: The CSS TODO in data-table.module.css notes a missing spacing token
for 300px; the fix is to open a tracking issue to extend the design token scale
(current --rs-space-1 through --rs-space-17 covering 2px–120px) to include the
missing sizes (160px, 300px, 320px, 430px, 715px, 1145px and sub-pixel values
0.5px/1px), add those new tokens to the global token/variables definition, and
then update components (search for TODOs and replace hardcoded values in files
referencing --rs-space-* and any direct px values like 300px) to use the new
tokens so all instances (including data-table.module.css) are migrated
consistently.
In `@packages/raystack/components/filter-chip/filter-chip.module.css`:
- Around line 149-155: The .inputField and .dateField rules still use hardcoded
min-height/height: 18px; replace these hardcoded values with a design-token CSS
variable (create/use a suitable spacing token, e.g. --rs-spacing-xxx) and
reference that token in both .inputField and .dateField so they follow the same
tokenized spacing approach used elsewhere; also apply the same replacement for
the duplicate occurrences noted around lines 173-183 to keep spacing consistent
across the module.
In `@packages/raystack/components/scroll-area/scroll-area.module.css`:
- Line 3: Line 3 still hardcodes --rs-scrollbar-size-hover: 6px while other
tokens were converted to CSS variables; update this to be consistent by either
adding a TODO comment next to --rs-scrollbar-size-hover noting the missing
design token (e.g., "TODO: No equivalent spacing token exists") or replace the
hardcoded value with the nearest spacing token var(--rs-space-3) (8px) if
acceptable; adjust the declaration of --rs-scrollbar-size-hover accordingly.
In `@packages/raystack/components/tooltip/tooltip.module.css`:
- Line 98: Rename keyframe identifiers to kebab-case (e.g., change
slideUpAndFade to slide-up-and-fade) across tooltip.module.css and update every
corresponding animation-name/animation shorthand that references them; ensure
all other keyframes mentioned in this file (the ones flagged at lines 104, 111,
118, 125, 135, 145, 155) are similarly renamed and all usages in CSS/JS/TSX that
reference those names are updated to the new kebab-case tokens so linting passes
without breaking animations.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 2b084f52-8507-449b-b260-a6c90e6001fd
📒 Files selected for processing (34)
packages/raystack/components/accordion/accordion.module.csspackages/raystack/components/announcement-bar/announcement-bar.module.csspackages/raystack/components/badge/badge.module.csspackages/raystack/components/button/button.module.csspackages/raystack/components/calendar/calendar.module.csspackages/raystack/components/callout/callout.module.csspackages/raystack/components/checkbox/checkbox.module.csspackages/raystack/components/chip/chip.module.csspackages/raystack/components/code-block/code.module.csspackages/raystack/components/color-picker/color-picker.module.csspackages/raystack/components/combobox/combobox.module.csspackages/raystack/components/command/command.module.csspackages/raystack/components/container/container.module.csspackages/raystack/components/data-table/data-table.module.csspackages/raystack/components/dialog/dialog.module.csspackages/raystack/components/empty-state/empty-state.module.csspackages/raystack/components/filter-chip/filter-chip.module.csspackages/raystack/components/headline/headline.module.csspackages/raystack/components/indicator/indicator.module.csspackages/raystack/components/input-field/input-field.module.csspackages/raystack/components/menu/menu.module.csspackages/raystack/components/meter/meter.module.csspackages/raystack/components/popover/popover.module.csspackages/raystack/components/preview-card/preview-card.module.csspackages/raystack/components/progress/progress.module.csspackages/raystack/components/scroll-area/scroll-area.module.csspackages/raystack/components/search/search.module.csspackages/raystack/components/select/select.module.csspackages/raystack/components/separator/separator.module.csspackages/raystack/components/slider/slider.module.csspackages/raystack/components/switch/switch.module.csspackages/raystack/components/text-area/text-area.module.csspackages/raystack/components/text/text.module.csspackages/raystack/components/tooltip/tooltip.module.css
Comment on lines
+68
to
73
| background-size: var(--track-checker-size, 8px) var(--track-checker-size, 12px); | ||
| background-position: | ||
| 0 0, | ||
| 0 calc(var(--track-checker-size, 12px) / 2), | ||
| calc(var(--track-checker-size, 12px) / 2) | ||
| calc(var(--track-checker-size, 12px) / -2), | ||
| calc(var(--track-checker-size, 12px) / 2) calc(var(--track-checker-size, 12px) / -2), | ||
| calc(var(--track-checker-size, 12px) / -2) 0px; |
Contributor
There was a problem hiding this comment.
Unify checker-size fallbacks to avoid distorted tiles.
Line 68 uses 8px for width fallback and 12px for height fallback, which can produce non-square checker cells if the token is missing.
Suggested fix
.alphaTrack {
- --track-checker-size: var(--rs-space-4);
+ --track-checker-size: var(--rs-space-4, 12px);
@@
- background-size: var(--track-checker-size, 8px) var(--track-checker-size, 12px);
+ background-size: var(--track-checker-size) var(--track-checker-size);
@@
- 0 calc(var(--track-checker-size, 12px) / 2),
- calc(var(--track-checker-size, 12px) / 2) calc(var(--track-checker-size, 12px) / -2),
- calc(var(--track-checker-size, 12px) / -2) 0px;
+ 0 calc(var(--track-checker-size) / 2),
+ calc(var(--track-checker-size) / 2) calc(var(--track-checker-size) / -2),
+ calc(var(--track-checker-size) / -2) 0px;
}🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@packages/raystack/components/color-picker/color-picker.module.css` around
lines 68 - 73, The checkerboard uses inconsistent fallbacks—background-size uses
var(--track-checker-size, 8px) for width but 12px for height and multiple
background-position calc() calls also use 12px fallbacks—causing non-square
tiles when the token is missing; update all occurrences of
var(--track-checker-size, 12px) to the same fallback as the size (e.g.,
var(--track-checker-size, 8px)) so background-size and every background-position
calc() reference the identical var(--track-checker-size, ...) fallback and
produce square checker cells.
rsbh
reviewed
Apr 1, 2026
| .icon > svg { | ||
| min-height: 16px; | ||
| min-width: 16px; | ||
| min-height: var(--rs-space-5); |
Member
There was a problem hiding this comment.
it will be better to use font-size here
Contributor
Author
There was a problem hiding this comment.
As discussed with design, we can keep this as it is for now.
| width: 16px; | ||
| height: 16px; | ||
| width: var(--rs-space-5); | ||
| height: var(--rs-space-5); |
Contributor
Author
There was a problem hiding this comment.
As discussed with design, we can keep this as it is for now.
paanSinghCoder
changed the title
rsbh
approved these changes
Apr 2, 2026
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
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.
Description
fix: replace hardcoded CSS properties with variables.
Type of Change
How Has This Been Tested?
[Describe the tests that you ran to verify your changes]
Checklist:
Screenshots (if appropriate):
[Add screenshots here]
Related Issues
[Link any related issues here using #issue-number]