style: refactor css vars (#250)

* style: refactor css vars

* chore: add opacity comment

* chore: rename -text- vars usage to -foreground-

* chore: revert classname

* fix: iconbutton active state bg color

Author: paanSinghCoder

apps/www/content/primitives/components/iconButton.mdx

@@ -115,7 +115,7 @@ The IconButton uses CSS variables for consistent styling across themes:
 
 - Background color uses `--rs-color-background-base-primary`
 - Border color uses `--rs-color-border-base-primary`
-- Text color uses `--rs-color-text-base-primary`
+- Text color uses `--rs-color-foreground-base-primary`
 - Hover state uses `--rs-color-background-base-primary-hover`
 - Disabled state uses reduced opacity and different background/border colors
 

apps/www/content/primitives/components/radio.mdx

@@ -43,9 +43,9 @@ Install the component from your command line.
 <Radio.Root defaultValue="1" aria-label="Options">
   <Flex gap="small" align="center">
     <Radio.Item value="1" id="r1" />
-    <label htmlFor="r1" style={{ fontSize: '14px', color: 'var(--rs-color-text-base-secondary)' }}>Option 1</label>
+    <label htmlFor="r1" style={{ fontSize: '14px', color: 'var(--rs-color-foreground-base-secondary)' }}>Option 1</label>
     <Radio.Item value="2" id="r2" />
-    <label htmlFor="r2" style={{ fontSize: '14px', color: 'var(--rs-color-text-base-secondary)' }}>Option 2</label>
+    <label htmlFor="r2" style={{ fontSize: '14px', color: 'var(--rs-color-foreground-base-secondary)' }}>Option 2</label>
   </Flex>
 </Radio.Root>
 `} border/>
@@ -85,7 +85,7 @@ Radio buttons support different states to indicate interactivity and selection.
 <Radio.Root defaultValue="1">
   <Flex gap="small" align="center">
     <Radio.Item value="1" id="d1" />
-    <label htmlFor="d1" style={{ fontSize: '14px', color: 'var(--rs-color-text-base-secondary)' }}>Default Option</label>
+    <label htmlFor="d1" style={{ fontSize: '14px', color: 'var(--rs-color-foreground-base-secondary)' }}>Default Option</label>
   </Flex>
 </Radio.Root>`,
     },
@@ -95,7 +95,7 @@ Radio buttons support different states to indicate interactivity and selection.
 <Radio.Root defaultValue="1">
   <Flex gap="small" align="center">
     <Radio.Item value="1" disabled id="dis1" />
-    <label htmlFor="dis1" style={{ fontSize: '14px', color: 'var(--rs-color-text-base-secondary)' }}>Disabled Option</label>
+    <label htmlFor="dis1" style={{ fontSize: '14px', color: 'var(--rs-color-foreground-base-secondary)' }}>Disabled Option</label>
   </Flex>
 </Radio.Root>`,
     },
@@ -113,15 +113,15 @@ Radio buttons should always be accompanied by labels for accessibility and usabi
   <Flex direction="column" gap="small">
     <Flex gap="small" align="center">
       <Radio.Item value="1" id="l1" />
-      <label htmlFor="l1" style={{ fontSize: '14px', color: 'var(--rs-color-text-base-secondary)' }}>Option One</label>
+      <label htmlFor="l1" style={{ fontSize: '14px', color: 'var(--rs-color-foreground-base-secondary)' }}>Option One</label>
     </Flex>
     <Flex gap="small" align="center">
       <Radio.Item value="2" id="l2" />
-      <label htmlFor="l2" style={{ fontSize: '14px', color: 'var(--rs-color-text-base-secondary)' }}>Option Two</label>
+      <label htmlFor="l2" style={{ fontSize: '14px', color: 'var(--rs-color-foreground-base-secondary)' }}>Option Two</label>
     </Flex>
     <Flex gap="small" align="center">
       <Radio.Item value="3" id="l3" />
-      <label htmlFor="l3" style={{ fontSize: '14px', color: 'var(--rs-color-text-base-secondary)' }}>Option Three</label>
+      <label htmlFor="l3" style={{ fontSize: '14px', color: 'var(--rs-color-foreground-base-secondary)' }}>Option Three</label>
     </Flex>
   </Flex>
 </Radio.Root>
@@ -144,11 +144,11 @@ Radio buttons can be used in forms with proper validation and submission handlin
     <Flex direction="column" gap="small">
       <Flex gap="small" align="center">
         <Radio.Item value="monthly" id="mp" />
-        <label htmlFor="mp" style={{ fontSize: '14px', color: 'var(--rs-color-text-base-secondary)' }}>Monthly Plan</label>
+        <label htmlFor="mp" style={{ fontSize: '14px', color: 'var(--rs-color-foreground-base-secondary)' }}>Monthly Plan</label>
       </Flex>
       <Flex gap="small" align="center">
         <Radio.Item value="yearly" id="yp" />
-        <label htmlFor="yp" style={{ fontSize: '14px', color: 'var(--rs-color-text-base-secondary)' }}>Yearly Plan</label>
+        <label htmlFor="yp" style={{ fontSize: '14px', color: 'var(--rs-color-foreground-base-secondary)' }}>Yearly Plan</label>
       </Flex>
     </Flex>
   </Radio.Root>

apps/www/styles/styles.css

@@ -14,7 +14,7 @@ body {
   line-height: 1.5;
 
   background-color: var(--rs-color-background-base-primary);
-  color: var(--rs-color-text-base-primary);
+  color: var(--rs-color-foreground-base-primary);
 }
 
 svg {

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

@@ -13,7 +13,7 @@
 }
 
 .announcement-bar-normal {
-  background: var(--rs-color-text-base-primary);
+  background: var(--rs-color-foreground-base-primary);
 }
 
 .announcement-bar-error {
@@ -26,12 +26,12 @@
 .announcement-bar-error > .icon,
 .announcement-bar-normal > .action-btn,
 .announcement-bar-error > .action-btn {
-  color: var(--rs-color-text-base-emphasis);
+  color: var(--rs-color-foreground-base-emphasis);
 }
 
 .announcement-bar-gradient > .text,
 .announcement-bar-gradient > .icon {
-  color: var(--rs-color-text-base-primary);
+  color: var(--rs-color-foreground-base-primary);
 }
 
 .icon,

packages/raystack/v1/components/avatar/avatar.module.css

@@ -7,7 +7,7 @@
   border: none;
   border-radius: var(--rs-radius-full);
   background-color: var(--rs-color-background-neutral-secondary);
-  color: var(--rs-color-text-base-primary);
+  color: var(--rs-color-foreground-base-primary);
   width: var(--rs-space-9, 32px);
   height: var(--rs-space-9, 32px);
   --fallback-font-size: calc(var(--rs-space-9, 32px)) * 0.4;
@@ -28,27 +28,27 @@
 
 .avatar-soft {
   --avatar-opacity: 0.2;
-  color: var(--rs-color-text-base-primary);
+  color: var(--rs-color-foreground-base-primary);
 }
 
 .avatar-color-indigo {
   --avatar-hue: var(--rs-color-background-accent-emphasis);
-  --avatar-color: var(--rs-color-text-accent-emphasis);
+  --avatar-color: var(--rs-color-foreground-accent-emphasis);
 }
 
 .avatar-color-orange {
   --avatar-hue: var(--rs-color-background-attention-emphasis);
-  --avatar-color: var(--rs-color-text-attention-emphasis);
+  --avatar-color: var(--rs-color-foreground-attention-emphasis);
 }
 
 .avatar-color-mint {
   --avatar-hue: var(--rs-color-background-success-emphasis);
-  --avatar-color: var(--rs-color-text-success-emphasis);
+  --avatar-color: var(--rs-color-foreground-success-emphasis);
 }
 
 .avatar-color-neutral {
   --avatar-hue: var(--rs-color-background-neutral-emphasis);
-  --avatar-color: var(--rs-color-text-base-emphasis);
+  --avatar-color: var(--rs-color-foreground-base-emphasis);
 }
 
 .avatar-color-sky {
@@ -98,22 +98,22 @@
 
 .avatar-solid-indigo {
   background-color: var(--rs-color-background-accent-emphasis);
-  color: var(--rs-color-text-accent-emphasis);
+  color: var(--rs-color-foreground-accent-emphasis);
 }
 
 .avatar-solid-orange {
   background-color: var(--rs-color-background-attention-emphasis);
-  color: var(--rs-color-text-attention-primary-hover);
+  color: var(--rs-color-foreground-attention-primary-hover);
 }
 
 .avatar-solid-mint {
   background-color: var(--rs-color-background-success-emphasis);
-  color: var(--rs-color-text-success-primary-hover);
+  color: var(--rs-color-foreground-success-primary-hover);
 }
 
 .avatar-solid-neutral {
   background-color: var(--rs-color-background-neutral-emphasis);
-  color: var(--rs-color-text-base-primary);
+  color: var(--rs-color-foreground-base-primary);
 }
 
 .avatar-solid-sky {

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

@@ -33,27 +33,27 @@
 /* Variants */
 .badge-neutral {
   background: var(--rs-color-background-neutral-secondary);
-  color: var(--rs-color-text-base-primary);
+  color: var(--rs-color-foreground-base-primary);
 }
 
 .badge-accent {
   background: var(--rs-color-background-accent-primary);
-  color: var(--rs-color-text-base-primary);
+  color: var(--rs-color-foreground-base-primary);
 }
 
 .badge-warning {
   background: var(--rs-color-background-attention-primary);
-  color: var(--rs-color-text-base-primary);
+  color: var(--rs-color-foreground-base-primary);
 }
 
 .badge-danger {
   background: var(--rs-color-background-danger-primary);
-  color: var(--rs-color-text-base-primary);
+  color: var(--rs-color-foreground-base-primary);
 }
 
 .badge-success {
   background: var(--rs-color-background-success-primary);
-  color: var(--rs-color-text-base-primary);
+  color: var(--rs-color-foreground-base-primary);
 }
 
 .badge-gradient {
@@ -62,15 +62,15 @@
     #AD00E933 0%,
     #EF040433 100%
   );
-  color: var(--rs-color-text-base-primary);
+  color: var(--rs-color-foreground-base-primary);
 }
 
 /* Icon */
 .icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  color: var(--rs-color-text-base-primary);
+  color: var(--rs-color-foreground-base-primary);
 }
 
 .badge-micro .icon {

packages/raystack/v1/components/breadcrumb/breadcrumb.module.css

@@ -28,17 +28,17 @@
 .breadcrumb-link {
   display: flex;
   align-items: center;
-  color: var(--rs-color-text-base-tertiary);
+  color: var(--rs-color-foreground-base-tertiary);
   text-decoration: none;
   text-wrap: nowrap;
 }
 
 .breadcrumb-link:hover {
-  color: var(--rs-color-text-base-secondary);
+  color: var(--rs-color-foreground-base-secondary);
 }
 
 .breadcrumb-link-active {
-  color: var(--rs-color-text-base-primary);
+  color: var(--rs-color-foreground-base-primary);
   font-weight: 600;
   pointer-events: none;
 }
@@ -50,26 +50,26 @@
 }
 
 .breadcrumb-separator {
-  color: var(--rs-color-text-base-tertiary);
+  color: var(--rs-color-foreground-base-tertiary);
   margin: 0 var(--rs-space-3);
 }
 
 .breadcrumb-ellipsis {
   display: flex;
   align-items: center;
-  color: var(--rs-color-text-base-secondary);
+  color: var(--rs-color-foreground-base-secondary);
 }
 
 .breadcrumb-ellipsis svg {
   width: var(--rs-space-4);
   height: var(--rs-space-4);
-  color: var(--rs-color-text-base-secondary);
+  color: var(--rs-color-foreground-base-secondary);
 }
 
 .breadcrumb-dropdown-trigger {
   display: flex;
   align-items: center;
-  color: var(--rs-color-text-base-secondary);
+  color: var(--rs-color-foreground-base-secondary);
   background: none;
   border: none;
   cursor: pointer;
@@ -95,7 +95,7 @@
 
 .breadcrumb-dropdown-item {
   cursor: pointer;
-  color: var(--rs-color-text-base-primary);
+  color: var(--rs-color-foreground-base-primary);
 }
 
 .breadcrumb-dropdown-item:hover {