Skip to content

fix: replace hardcoded css with vars #727

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
paanSinghCoder merged 1 commit into from
Apr 2, 2026
Merged

fix: replace hardcoded css with vars #727

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion packages/raystack/components/accordion/accordion.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@

.accordion-trigger {
display: flex;
/* Todo: var does not exist for 36px */
min-height: 36px;
padding: 0 var(--rs-space-4);
justify-content: space-between;
Expand All @@ -25,6 +26,7 @@
line-height: var(--rs-line-height-regular);
letter-spacing: var(--rs-letter-spacing-regular);
}

.accordion-item:not(:first-child) .accordion-trigger {
border-top: none;
}
Expand Down Expand Up @@ -76,4 +78,4 @@
align-self: stretch;
padding: var(--rs-space-5) var(--rs-space-4);
border-top: 0px;
}
}
6 changes: 3 additions & 3 deletions packages/raystack/components/announcement-bar/announcement-bar.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
.announcement-bar {
width: 100%;
min-height: 40px;
min-height: var(--rs-space-10);
padding: var(--rs-space-3) var(--rs-space-7);
}

Expand Down Expand Up @@ -36,8 +36,8 @@

.icon,
.icon > svg {
min-height: 16px;
min-width: 16px;
min-height: var(--rs-space-5);
Copy link
Copy Markdown
Member

@rsbh rsbh Apr 1, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it will be better to use font-size here

Copy link
Copy Markdown
Contributor Author

@paanSinghCoder paanSinghCoder Apr 2, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As discussed with design, we can keep this as it is for now.

min-width: var(--rs-space-5);
}

.action-btn {
Expand Down
13 changes: 9 additions & 4 deletions packages/raystack/components/badge/badge.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,21 +15,23 @@
font-size: var(--rs-font-size-micro);
line-height: var(--rs-line-height-micro);
letter-spacing: var(--rs-letter-spacing-micro);
/* Todo: var does not exist for 18px */
height: 18px;
}

.badge-small {
font-size: var(--rs-font-size-small);
line-height: var(--rs-line-height-small);
letter-spacing: var(--rs-letter-spacing-small);
/* Todo: var does not exist for 22px */
height: 22px;
}

.badge-regular {
font-size: var(--rs-font-size-regular);
line-height: var(--rs-line-height-regular);
letter-spacing: var(--rs-letter-spacing-regular);
height: 28px;
height: var(--rs-space-8);
}

/* Variants */
Expand Down Expand Up @@ -72,22 +74,25 @@
}

.badge-micro .icon {
/* Todo: var does not exist for 10px */
width: 10px;
height: 10px;
}

.badge-small .icon {
width: 12px;
height: 12px;
width: var(--rs-space-4);
height: var(--rs-space-4);
}

.badge-regular .icon {
/* Todo: var does not exist for 14px */
width: 14px;
height: 14px;
}

.sr-only {
position: absolute;
/* Todo: var does not exist for 1px */
width: 1px;
height: 1px;
padding: 0;
Expand All @@ -96,4 +101,4 @@
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
}
9 changes: 6 additions & 3 deletions packages/raystack/components/button/button.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,10 @@
}

.button:focus-visible {
/* Todo: var does not exist for 1px */
outline: 1px solid var(--rs-color-border-accent-emphasis);
}

.button:focus {
outline: none;
}
Expand Down Expand Up @@ -245,9 +247,10 @@
}

.loader {
border: 2px solid var(--rs-color-background-base-primary);
border-top: 2px solid var(--rs-color-foreground-base-primary);
border: var(--rs-space-1) solid var(--rs-color-background-base-primary);
border-top: var(--rs-space-1) solid var(--rs-color-foreground-base-primary);
border-radius: 50%;
/* Todo: var does not exist for 10px */
width: 10px;
height: 10px;
animation: spin 1s linear infinite;
Expand Down Expand Up @@ -597,4 +600,4 @@
.button-text-success:disabled:hover,
.button-text-success.button-loading:hover {
color: var(--rs-color-foreground-success-primary);
}
}
14 changes: 8 additions & 6 deletions packages/raystack/components/calendar/calendar.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,12 @@
border-radius: var(--rs-radius-4);
background: var(--rs-color-background-base-primary);
width: fit-content;
/* Todo: var does not exist for 346px */
min-height: 346px;
}

.captionLabel,
.dropdowns > span,
.dropdowns>span,
.dropdown_trigger {
font-weight: var(--rs-font-weight-medium);
font-size: var(--rs-font-size-mini);
Expand All @@ -26,6 +27,7 @@
.navButton {
position: absolute;
top: 0;
/* Todo: var does not exist for 0px */
border: 0px;
color: var(--rs-color-foreground-base-primary);
background: var(--rs-color-background-base-primary);
Expand Down Expand Up @@ -82,7 +84,7 @@
display: flex;
justify-content: center;
align-items: center;
border: 1px solid transparent;
border: var(--rs-space-1) solid transparent;
margin-bottom: var(--rs-space-1);
}

Expand All @@ -91,7 +93,7 @@
height: var(--rs-space-10, 40px);
flex-shrink: 0;
border-radius: var(--rs-radius-5);
border: 1px solid var(--rs-color-border-accent-emphasis-hover);
border: var(--rs-space-1) solid var(--rs-color-border-accent-emphasis-hover);
background-color: transparent;
}

Expand Down Expand Up @@ -170,7 +172,7 @@

.calendarPopover {
padding: var(--rs-space-3) !important;
/* border: none !important; */
/* Todo: var does not exist for 0.5px */
border: 0.5px solid var(--rs-color-border-base-primary) !important;
min-width: max-content;
width: fit-content;
Expand Down Expand Up @@ -250,7 +252,7 @@

.dayInfo {
position: absolute;
top: -2px;
top: calc(-1 * var(--rs-space-1));
left: 50%;
transform: translateX(-50%);
display: flex;
Expand Down Expand Up @@ -290,4 +292,4 @@

.datePickerInput {
text-align: left;
}
}
14 changes: 9 additions & 5 deletions packages/raystack/components/callout/callout.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
.callout {
position: relative;
/* Todo: var does not exist for 318px */
width: 318px;
padding: var(--rs-space-3);
border-radius: var(--rs-radius-2);
Expand All @@ -8,6 +9,7 @@
font-size: var(--rs-font-size-small);
line-height: var(--rs-line-height-small);
letter-spacing: var(--rs-letter-spacing-small);
/* Todo: var does not exist for 0.5px */
border: 0.5px solid transparent;
}

Expand All @@ -16,7 +18,7 @@
justify-content: space-between;
align-items: center;
width: 100%;
gap: 40px;
gap: var(--rs-space-10);
}

.messageContainer {
Expand All @@ -30,8 +32,8 @@
display: flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
width: var(--rs-space-5);
height: var(--rs-space-5);
flex-shrink: 0;
color: currentColor;
}
Expand Down Expand Up @@ -80,8 +82,9 @@
}

.callout-success {
/* Todo: var does not exist for 318px */
width: 318px;
gap: 40px;
gap: var(--rs-space-10);
background: var(--rs-color-background-success-primary);
color: var(--rs-color-foreground-success-primary);
}
Expand Down Expand Up @@ -113,6 +116,7 @@

.callout-outline.callout-grey {
background: var(--rs-color-background-neutral-primary);
/* Todo: var does not exist for 0.5px */
border: 0.5px solid var(--rs-color-border-base-primary);
}

Expand Down Expand Up @@ -239,4 +243,4 @@
background: var(--rs-color-background-base-primary);
border: 0.5px solid var(--rs-color-border-base-tertiary);
color: var(--rs-color-foreground-base-primary);
}
}
2 changes: 1 addition & 1 deletion packages/raystack/components/checkbox/checkbox.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,4 +68,4 @@
.icon {
width: var(--rs-space-5);
height: var(--rs-space-5);
}
}
6 changes: 3 additions & 3 deletions packages/raystack/components/chip/chip.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,8 +111,8 @@
display: inline-flex;
align-items: center;
justify-content: center;
width: 12px;
height: 12px;
width: var(--rs-space-4);
height: var(--rs-space-4);
}

.dismiss-button {
Expand All @@ -124,4 +124,4 @@
display: inline-flex;
align-items: center;
justify-content: center;
}
}
4 changes: 2 additions & 2 deletions packages/raystack/components/code-block/code.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,11 +91,11 @@
}

.theme :global(.token.important) {
font-weight: 500;
font-weight: var(--rs-font-weight-medium);
}

.theme :global(.token.bold) {
font-weight: 500;
font-weight: var(--rs-font-weight-medium);
}

.theme :global(.token.italic) {
Expand Down
40 changes: 20 additions & 20 deletions packages/raystack/components/color-picker/color-picker.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,46 +6,47 @@
user-select: none;
align-items: center;
}

.sliderControl {
display: flex;
align-items: center;
width: 100%;
}

.sliderRange {
position: absolute;
height: 100%;
border-radius: var(--rs-radius-full);
background: transparent;
}

.sliderTrack {
position: relative;
height: 12px;
height: var(--rs-space-4);
width: 100%;
flex-grow: 1;
border-radius: var(--rs-radius-3);
}

.hueTrack {
background: linear-gradient(
90deg,
#ff0000,
#ffff00,
#00ff00,
#00ffff,
#0000ff,
#ff00ff,
#ff0000
);
background: linear-gradient(90deg,
#ff0000,
#ffff00,
#00ff00,
#00ffff,
#0000ff,
#ff00ff,
#ff0000);
}

.sliderThumb {
position: absolute;
display: block;
height: 12px;
width: 12px;
height: var(--rs-space-4);
width: var(--rs-space-4);
border-radius: var(--rs-radius-full);
border: 3px solid var(--rs-color-foreground-base-emphasis);
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.02))
drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.06));
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.02)) drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.06));
}

.sliderThumb:focus-visible {
Expand All @@ -58,21 +59,20 @@
}

.alphaTrack {
--track-checker-size: 12px;
--track-checker-size: var(--rs-space-4);
background-image:
linear-gradient(45deg, #ddd 25%, transparent 25%),
linear-gradient(-45deg, #ddd 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #ddd 75%),
linear-gradient(-45deg, transparent 75%, #ddd 75%);
background-size: var(--track-checker-size, 8px)
var(--track-checker-size, 12px);
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;
Comment on lines +68 to 73
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai bot Apr 1, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

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.

}

.alphaTrackGradient {
position: absolute;
inset: 0;
Expand Down
Loading
Loading