fix: replace hardcoded css with vars (#727)

fix: replace hardcoded css with css vars

Author: paanSinghCoder

packages/raystack/components/accordion/accordion.module.css

@@ -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;
@@ -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;
 }
@@ -76,4 +78,4 @@
   align-self: stretch;
   padding: var(--rs-space-5) var(--rs-space-4);
   border-top: 0px;
-}
+}

packages/raystack/components/announcement-bar/announcement-bar.module.css

@@ -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);
 }
 
@@ -36,8 +36,8 @@
 
 .icon,
 .icon > svg {
-  min-height: 16px;
-  min-width: 16px;
+  min-height: var(--rs-space-5);
+  min-width: var(--rs-space-5);
 }
 
 .action-btn {

packages/raystack/components/badge/badge.module.css

@@ -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 */
@@ -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;
@@ -96,4 +101,4 @@
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   border: 0;
-}
+}

packages/raystack/components/button/button.module.css

@@ -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;
 }
@@ -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;
@@ -597,4 +600,4 @@
 .button-text-success:disabled:hover,
 .button-text-success.button-loading:hover {
   color: var(--rs-color-foreground-success-primary);
-}
+}

packages/raystack/components/calendar/calendar.module.css

@@ -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);
@@ -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);
@@ -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);
 }
 
@@ -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;
 }
 
@@ -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;
@@ -250,7 +252,7 @@
 
 .dayInfo {
   position: absolute;
-  top: -2px;
+  top: calc(-1 * var(--rs-space-1));
   left: 50%;
   transform: translateX(-50%);
   display: flex;
@@ -290,4 +292,4 @@
 
 .datePickerInput {
   text-align: left;
-}
+}

packages/raystack/components/callout/callout.module.css

@@ -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);
@@ -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;
 }
 
@@ -16,7 +18,7 @@
   justify-content: space-between;
   align-items: center;
   width: 100%;
-  gap: 40px;
+  gap: var(--rs-space-10);
 }
 
 .messageContainer {
@@ -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;
 }
@@ -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);
 }
@@ -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);
 }
 
@@ -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);
-}
+}

packages/raystack/components/checkbox/checkbox.module.css

@@ -68,4 +68,4 @@
 .icon {
   width: var(--rs-space-5);
   height: var(--rs-space-5);
-}
+}

packages/raystack/components/chip/chip.module.css

@@ -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 {
@@ -124,4 +124,4 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-}
+}

packages/raystack/components/code-block/code.module.css

@@ -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) {

packages/raystack/components/color-picker/color-picker.module.css

@@ -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 {
@@ -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;
 }
+
 .alphaTrackGradient {
   position: absolute;
   inset: 0;