fix: css variable name prefix (#178)

* refactor: update --rs-foreground to --rs-color-text * refactor: update --rs-background to --rs-color-background * refactor: update --rs-border to --rs-color-border
raystack · Nov 19, 2024 · f43eb36 · f43eb36
1 parent 926a89c
commit f43eb36
Show file tree

Hide file tree

Showing 10 changed files with 393 additions and 326 deletions.
diff --git a/apps/www/content/primitives/components/text.mdx b/apps/www/content/primitives/components/text.mdx
@@ -54,7 +54,7 @@ Install the component from your command line.
     <Text variant="tertiary">tertiary</Text>
     <div
       style={{
-        backgroundColor: "var(--rs-background-neutral-tertiary)",
+        backgroundColor: "var(--rs-color-background-neutral-tertiary)",
         padding: "var(--rs-space-3)",
       }}
     >

diff --git a/apps/www/styles/styles.css b/apps/www/styles/styles.css
@@ -13,8 +13,8 @@ body {
   -moz-osx-font-smoothing: grayscale;
   line-height: 1.5;
 
-  background-color: var(--rs-background-base-primary);
-  color: var(--rs-foreground-base-primary);
+  background-color: var(--rs-color-background-base-primary);
+  color: var(--rs-color-text-base-primary);
 }
 
 svg {
@@ -29,5 +29,5 @@ pre[class*="language-"] {
 
 pre.prism-code {
   background-color: transparent !important;
-  border-left: 2px solid var(--rs-border-base-primary);
+  border-left: 2px solid var(--rs-color-border-base-primary);
 }
diff --git a/packages/raystack/v1/components/avatar/avatar.module.css b/packages/raystack/v1/components/avatar/avatar.module.css
@@ -1,13 +1,13 @@
 .avatar {
-  display: flex; 
+  display: flex;
   align-items: center;
   justify-content: center;
-  overflow: hidden; 
-  position: relative; 
+  overflow: hidden;
+  position: relative;
   border: none;
   border-radius: var(--rs-radius-full);
-  background-color: var(--rs-background-neutral-secondary);
-  color: var(--rs-foreground-base-primary);
+  background-color: var(--rs-color-background-neutral-secondary);
+  color: var(--rs-color-text-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;
@@ -31,23 +31,23 @@
 }
 
 .avatar-color-indigo {
-  --avatar-hue: var(--rs-background-accent-emphasis);
-  --avatar-color: var(--rs-foreground-accent-emphasis);
+  --avatar-hue: var(--rs-color-background-accent-emphasis);
+  --avatar-color: var(--rs-color-text-accent-emphasis);
 }
 
 .avatar-color-orange {
-  --avatar-hue: var(--rs-background-attention-emphasis);
-  --avatar-color: var(--rs-foreground-attention-emphasis);
+  --avatar-hue: var(--rs-color-background-attention-emphasis);
+  --avatar-color: var(--rs-color-text-attention-emphasis);
 }
 
 .avatar-color-mint {
-  --avatar-hue: var(--rs-background-success-emphasis);
-  --avatar-color: var(--rs-foreground-success-emphasis);
+  --avatar-hue: var(--rs-color-background-success-emphasis);
+  --avatar-color: var(--rs-color-text-success-emphasis);
 }
 
 .avatar-color-neutral {
-  --avatar-hue: var(--rs-background-neutral-emphasis);
-  --avatar-color: var(--rs-foreground-base-emphasis);
+  --avatar-hue: var(--rs-color-background-neutral-emphasis);
+  --avatar-color: var(--rs-color-text-base-emphasis);
 }
 
 .avatar-color-sky {
@@ -109,28 +109,28 @@
 .avatar-solid-crimson,
 .avatar-solid-gold {
   background-color: var(--avatar-hue);
-  color: var(--rs-foreground-base-emphasis);
+  color: var(--rs-color-text-base-emphasis);
 }
 
 /* Soft Variants */
 .avatar-soft-indigo {
-  background-color: var(--rs-background-accent-primary);
-  color: var(--rs-foreground-accent-primary);
+  background-color: var(--rs-color-background-accent-primary);
+  color: var(--rs-color-text-accent-primary);
 }
 
 .avatar-soft-orange {
-  background-color: var(--rs-background-attention-primary);
-  color: var(--rs-foreground-attention-primary);
+  background-color: var(--rs-color-background-attention-primary);
+  color: var(--rs-color-text-attention-primary);
 }
 
 .avatar-soft-mint {
-  background-color: var(--rs-background-success-primary);
-  color: var(--rs-foreground-success-primary);
+  background-color: var(--rs-color-background-success-primary);
+  color: var(--rs-color-text-success-primary);
 }
 
 .avatar-soft-neutral {
-  background-color: var(--rs-background-neutral-secondary);
-  color: var(--rs-foreground-base-secondary);
+  background-color: var(--rs-color-background-neutral-secondary);
+  color: var(--rs-color-text-base-secondary);
 }
 
 .avatar-soft-sky {
@@ -179,7 +179,7 @@
 }
 
 .imageWrapper {
-  position: relative;  
+  position: relative;
   height: fit-content;
   width: fit-content;
 }
@@ -319,21 +319,47 @@
 }
 
 .avatarGroup .avatar {
-  border: 1px solid var(--rs-background-base-primary);
+  border: 1px solid var(--rs-color-background-base-primary);
   box-sizing: content-box;
 }
 
 /* Avatar Group Size Variants */
-.avatar-size-1 .avatarWrapper { --avatar-overlap: 0.8em; }
-.avatar-size-2 .avatarWrapper { --avatar-overlap: 0.9em; }
-.avatar-size-3 .avatarWrapper { --avatar-overlap: 1em; }
-.avatar-size-4 .avatarWrapper { --avatar-overlap: 1.1em; }
-.avatar-size-5 .avatarWrapper { --avatar-overlap: 1.2em; }
-.avatar-size-6 .avatarWrapper { --avatar-overlap: 1.3em; }
-.avatar-size-7 .avatarWrapper { --avatar-overlap: 1.4em; }
-.avatar-size-8 .avatarWrapper { --avatar-overlap: 1.5em; }
-.avatar-size-9 .avatarWrapper { --avatar-overlap: 1.6em; }
-.avatar-size-10 .avatarWrapper { --avatar-overlap: 1.7em; }
-.avatar-size-11 .avatarWrapper { --avatar-overlap: 1.8em; }
-.avatar-size-12 .avatarWrapper { --avatar-overlap: 1.9em; }
-.avatar-size-13 .avatarWrapper { --avatar-overlap: 2em; }
+.avatar-size-1 .avatarWrapper {
+  --avatar-overlap: 0.8em;
+}
+.avatar-size-2 .avatarWrapper {
+  --avatar-overlap: 0.9em;
+}
+.avatar-size-3 .avatarWrapper {
+  --avatar-overlap: 1em;
+}
+.avatar-size-4 .avatarWrapper {
+  --avatar-overlap: 1.1em;
+}
+.avatar-size-5 .avatarWrapper {
+  --avatar-overlap: 1.2em;
+}
+.avatar-size-6 .avatarWrapper {
+  --avatar-overlap: 1.3em;
+}
+.avatar-size-7 .avatarWrapper {
+  --avatar-overlap: 1.4em;
+}
+.avatar-size-8 .avatarWrapper {
+  --avatar-overlap: 1.5em;
+}
+.avatar-size-9 .avatarWrapper {
+  --avatar-overlap: 1.6em;
+}
+.avatar-size-10 .avatarWrapper {
+  --avatar-overlap: 1.7em;
+}
+.avatar-size-11 .avatarWrapper {
+  --avatar-overlap: 1.8em;
+}
+.avatar-size-12 .avatarWrapper {
+  --avatar-overlap: 1.9em;
+}
+.avatar-size-13 .avatarWrapper {
+  --avatar-overlap: 2em;
+}
diff --git a/packages/raystack/v1/components/breadcrumb/breadcrumb.module.css b/packages/raystack/v1/components/breadcrumb/breadcrumb.module.css
@@ -28,17 +28,17 @@
 .breadcrumb-link {
   display: flex;
   align-items: center;
-  color: var(--rs-foreground-base-tertiary);
+  color: var(--rs-color-text-base-tertiary);
   text-decoration: none;
   margin-right: var(--rs-space-1);
 }
 
 .breadcrumb-link:hover {
-  color: var(--rs-foreground-base-secondary);
+  color: var(--rs-color-text-base-secondary);
 }
 
 .breadcrumb-link-active {
-  color: var(--rs-foreground-base-primary);
+  color: var(--rs-color-text-base-primary);
   font-weight: 600;
   pointer-events: none;
 }
@@ -50,27 +50,27 @@
 }
 
 .breadcrumb-separator {
-  color: var(--rs-foreground-base-tertiary);
+  color: var(--rs-color-text-base-tertiary);
   margin: 0 var(--rs-space-2);
 }
 
 .breadcrumb-ellipsis {
   display: flex;
   align-items: center;
-  color: var(--rs-foreground-base-secondary);
+  color: var(--rs-color-text-base-secondary);
   margin: 0 var(--rs-space-3) 0 var(--rs-space-2);
 }
 
 .breadcrumb-ellipsis svg {
   width: var(--rs-space-4);
   height: var(--rs-space-4);
-  color: var(--rs-foreground-base-secondary);
+  color: var(--rs-color-text-base-secondary);
 }
 
 .breadcrumb-dropdown-trigger {
   display: flex;
   align-items: center;
-  color: var(--rs-foreground-base-secondary);
+  color: var(--rs-color-text-base-secondary);
   background: none;
   border: none;
   cursor: pointer;
@@ -88,19 +88,19 @@
 }
 
 .breadcrumb-dropdown-content {
-  background-color: var(--rs-background-base-primary);
+  background-color: var(--rs-color-background-base-primary);
   border-radius: var(--rs-radius-2);
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
   min-width: 100px;
-  border: 1px solid var(--rs-border-base-primary);
+  border: 1px solid var(--rs-color-border-base-primary);
   padding: var(--rs-space-1) var(--rs-space-1);
 }
 
 .breadcrumb-dropdown-item {
   cursor: pointer;
-  color: var(--rs-foreground-base-primary);
+  color: var(--rs-color-text-base-primary);
 }
 
 .breadcrumb-dropdown-item:hover {
-  background-color: var(--rs-background-base-primary-hover);
+  background-color: var(--rs-color-background-base-primary-hover);
 }