refactor: restructure more css (#252)

* refactor: restructure more css

* chore: remove duplicate var

Author: paanSinghCoder

packages/raystack/v1/styles/colors.css

@@ -1,3 +1,7 @@
+/* 
+ * Note: Use variables from this file only. Do not use variables from other files in the styles folder directly. 
+ */
+
 :root {
   /* Base Foreground Colors */
   --rs-color-foreground-base-primary: var(--rs-neutral-12);
@@ -55,34 +59,34 @@
   --rs-color-border-success-emphasis: var(--rs-success-9);
 
   /* Overlay Colors */
-  --overlay-base-primary: var(--rs-overlay-1);
+  --rs-color-overlay-base-primary: var(--rs-overlay-1);
   /* Black Overlay */
-  --rs-overlay-black-a1: #0000000D; /* 5% opacity */
-  --rs-overlay-black-a2: #0000001A; /* 10% opacity */
-  --rs-overlay-black-a3: #00000026; /* 15% opacity */
-  --rs-overlay-black-a4: #00000033; /* 20% opacity */
-  --rs-overlay-black-a5: #0000004D; /* 30% opacity */
-  --rs-overlay-black-a6: #00000066; /* 40% opacity */
-  --rs-overlay-black-a7: #00000080; /* 50% opacity */
-  --rs-overlay-black-a8: #00000099; /* 60% opacity */
-  --rs-overlay-black-a9: #000000B3; /* 70% opacity */
-  --rs-overlay-black-a10: #000000CC; /* 80% opacity */
-  --rs-overlay-black-a11: #000000E6; /* 90% opacity */
-  --rs-overlay-black-a12: #000000F2; /* 95% opacity */
+  --rs-color-overlay-black-a1: #0000000D; /* 5% opacity */
+  --rs-color-overlay-black-a2: #0000001A; /* 10% opacity */
+  --rs-color-overlay-black-a3: #00000026; /* 15% opacity */
+  --rs-color-overlay-black-a4: #00000033; /* 20% opacity */
+  --rs-color-overlay-black-a5: #0000004D; /* 30% opacity */
+  --rs-color-overlay-black-a6: #00000066; /* 40% opacity */
+  --rs-color-overlay-black-a7: #00000080; /* 50% opacity */
+  --rs-color-overlay-black-a8: #00000099; /* 60% opacity */
+  --rs-color-overlay-black-a9: #000000B3; /* 70% opacity */
+  --rs-color-overlay-black-a10: #000000CC; /* 80% opacity */
+  --rs-color-overlay-black-a11: #000000E6; /* 90% opacity */
+  --rs-color-overlay-black-a12: #000000F2; /* 95% opacity */
 
   /* White Overlay */
-  --rs-overlay-white-a1: #ffffff0D; /* 5% opacity */
-  --rs-overlay-white-a2: #ffffff1A; /* 10% opacity */
-  --rs-overlay-white-a3: #ffffff26; /* 15% opacity */
-  --rs-overlay-white-a4: #ffffff33; /* 20% opacity */
-  --rs-overlay-white-a5: #ffffff4D; /* 30% opacity */
-  --rs-overlay-white-a6: #ffffff66; /* 40% opacity */
-  --rs-overlay-white-a7: #ffffff80; /* 50% opacity */
-  --rs-overlay-white-a8: #ffffff99; /* 60% opacity */
-  --rs-overlay-white-a9: #ffffffB3; /* 70% opacity */
-  --rs-overlay-white-a10: #ffffffCC; /* 80% opacity */
-  --rs-overlay-white-a11: #ffffffE6; /* 90% opacity */
-  --rs-overlay-white-a12: #ffffffF2; /* 95% opacity */
+  --rs-color-overlay-white-a1: #ffffff0D; /* 5% opacity */
+  --rs-color-overlay-white-a2: #ffffff1A; /* 10% opacity */
+  --rs-color-overlay-white-a3: #ffffff26; /* 15% opacity */
+  --rs-color-overlay-white-a4: #ffffff33; /* 20% opacity */
+  --rs-color-overlay-white-a5: #ffffff4D; /* 30% opacity */
+  --rs-color-overlay-white-a6: #ffffff66; /* 40% opacity */
+  --rs-color-overlay-white-a7: #ffffff80; /* 50% opacity */
+  --rs-color-overlay-white-a8: #ffffff99; /* 60% opacity */
+  --rs-color-overlay-white-a9: #ffffffB3; /* 70% opacity */
+  --rs-color-overlay-white-a10: #ffffffCC; /* 80% opacity */
+  --rs-color-overlay-white-a11: #ffffffE6; /* 90% opacity */
+  --rs-color-overlay-white-a12: #ffffffF2; /* 95% opacity */
 
   /* Additional Background Colors */
   --rs-color-background-neutral-primary: var(--rs-neutral-3);
@@ -104,89 +108,88 @@
   --rs-color-foreground-attention-emphasis: var(--rs-attention-contrast);
   --rs-color-foreground-success-emphasis: var(--rs-success-contrast);
 
-
   /* Visualization Colors */
   /* Sky */
-  --rs-visualization-sky-11: var(--rs-viz-sky-11);
-  --rs-visualization-sky-9: var(--rs-viz-sky-9);
-  --rs-visualization-sky-8: var(--rs-viz-sky-8);
-  --rs-visualization-sky-6: var(--rs-viz-sky-6);
+  --rs-color-viz-sky-11: var(--rs-viz-sky-11);
+  --rs-color-viz-sky-9: var(--rs-viz-sky-9);
+  --rs-color-viz-sky-8: var(--rs-viz-sky-8);
+  --rs-color-viz-sky-6: var(--rs-viz-sky-6);
 
   /* Mint */
-  --rs-visualization-mint-11: var(--rs-viz-mint-11);
-  --rs-visualization-mint-9: var(--rs-viz-mint-9);
-  --rs-visualization-mint-8: var(--rs-viz-mint-8);
-  --rs-visualization-mint-6: var(--rs-viz-mint-6);
+  --rs-color-viz-mint-11: var(--rs-viz-mint-11);
+  --rs-color-viz-mint-9: var(--rs-viz-mint-9);
+  --rs-color-viz-mint-8: var(--rs-viz-mint-8);
+  --rs-color-viz-mint-6: var(--rs-viz-mint-6);
 
   /* Lime */
-  --rs-visualization-lime-11: var(--rs-viz-lime-11);
-  --rs-visualization-lime-9: var(--rs-viz-lime-9);
-  --rs-visualization-lime-8: var(--rs-viz-lime-8);
-  --rs-visualization-lime-6: var(--rs-viz-lime-6);
+  --rs-color-viz-lime-11: var(--rs-viz-lime-11);
+  --rs-color-viz-lime-9: var(--rs-viz-lime-9);
+  --rs-color-viz-lime-8: var(--rs-viz-lime-8);
+  --rs-color-viz-lime-6: var(--rs-viz-lime-6);
 
   /* Grass */
-  --rs-visualization-grass-11: var(--rs-viz-grass-11);
-  --rs-visualization-grass-9: var(--rs-viz-grass-9);
-  --rs-visualization-grass-8: var(--rs-viz-grass-8);
-  --rs-visualization-grass-6: var(--rs-viz-grass-6);
+  --rs-color-viz-grass-11: var(--rs-viz-grass-11);
+  --rs-color-viz-grass-9: var(--rs-viz-grass-9);
+  --rs-color-viz-grass-8: var(--rs-viz-grass-8);
+  --rs-color-viz-grass-6: var(--rs-viz-grass-6);
 
   /* Green */
-  --rs-visualization-green-11: var(--rs-viz-green-11);
-  --rs-visualization-green-9: var(--rs-viz-green-9);
-  --rs-visualization-green-8: var(--rs-viz-green-8);
-  --rs-visualization-green-6: var(--rs-viz-green-6);
+  --rs-color-viz-green-11: var(--rs-viz-green-11);
+  --rs-color-viz-green-9: var(--rs-viz-green-9);
+  --rs-color-viz-green-8: var(--rs-viz-green-8);
+  --rs-color-viz-green-6: var(--rs-viz-green-6);
 
   /* Jade */
-  --rs-visualization-jade-11: var(--rs-viz-jade-11);
-  --rs-visualization-jade-9: var(--rs-viz-jade-9);
-  --rs-visualization-jade-8: var(--rs-viz-jade-8);
-  --rs-visualization-jade-6: var(--rs-viz-jade-6);
+  --rs-color-viz-jade-11: var(--rs-viz-jade-11);
+  --rs-color-viz-jade-9: var(--rs-viz-jade-9);
+  --rs-color-viz-jade-8: var(--rs-viz-jade-8);
+  --rs-color-viz-jade-6: var(--rs-viz-jade-6);
 
   /* Cyan */
-  --rs-visualization-cyan-11: var(--rs-viz-cyan-11);
-  --rs-visualization-cyan-9: var(--rs-viz-cyan-9);
-  --rs-visualization-cyan-8: var(--rs-viz-cyan-8);
-  --rs-visualization-cyan-6: var(--rs-viz-cyan-6);
+  --rs-color-viz-cyan-11: var(--rs-viz-cyan-11);
+  --rs-color-viz-cyan-9: var(--rs-viz-cyan-9);
+  --rs-color-viz-cyan-8: var(--rs-viz-cyan-8);
+  --rs-color-viz-cyan-6: var(--rs-viz-cyan-6);
 
   /* Blue */
-  --rs-visualization-blue-11: var(--rs-viz-blue-11);
-  --rs-visualization-blue-9: var(--rs-viz-blue-9);
-  --rs-visualization-blue-8: var(--rs-viz-blue-8);
-  --rs-visualization-blue-6: var(--rs-viz-blue-6);
+  --rs-color-viz-blue-11: var(--rs-viz-blue-11);
+  --rs-color-viz-blue-9: var(--rs-viz-blue-9);
+  --rs-color-viz-blue-8: var(--rs-viz-blue-8);
+  --rs-color-viz-blue-6: var(--rs-viz-blue-6);
 
   /* Iris */
-  --rs-visualization-iris-11: var(--rs-viz-iris-11);
-  --rs-visualization-iris-9: var(--rs-viz-iris-9);
-  --rs-visualization-iris-8: var(--rs-viz-iris-8);
-  --rs-visualization-iris-6: var(--rs-viz-iris-6);
+  --rs-color-viz-iris-11: var(--rs-viz-iris-11);
+  --rs-color-viz-iris-9: var(--rs-viz-iris-9);
+  --rs-color-viz-iris-8: var(--rs-viz-iris-8);
+  --rs-color-viz-iris-6: var(--rs-viz-iris-6);
 
   /* Purple */
-  --rs-visualization-purple-11: var(--rs-viz-purple-11);
-  --rs-visualization-purple-9: var(--rs-viz-purple-9);
-  --rs-visualization-purple-8: var(--rs-viz-purple-8);
-  --rs-visualization-purple-6: var(--rs-viz-purple-6);
+  --rs-color-viz-purple-11: var(--rs-viz-purple-11);
+  --rs-color-viz-purple-9: var(--rs-viz-purple-9);
+  --rs-color-viz-purple-8: var(--rs-viz-purple-8);
+  --rs-color-viz-purple-6: var(--rs-viz-purple-6);
 
   /* Pink */
-  --rs-visualization-pink-11: var(--rs-viz-pink-11);
-  --rs-visualization-pink-9: var(--rs-viz-pink-9);
-  --rs-visualization-pink-8: var(--rs-viz-pink-8);
-  --rs-visualization-pink-6: var(--rs-viz-pink-6);
+  --rs-color-viz-pink-11: var(--rs-viz-pink-11);
+  --rs-color-viz-pink-9: var(--rs-viz-pink-9);
+  --rs-color-viz-pink-8: var(--rs-viz-pink-8);
+  --rs-color-viz-pink-6: var(--rs-viz-pink-6);
 
   /* Crimson */
-  --rs-visualization-crimson-11: var(--rs-viz-crimson-11);
-  --rs-visualization-crimson-9: var(--rs-viz-crimson-9);
-  --rs-visualization-crimson-8: var(--rs-viz-crimson-8);
-  --rs-visualization-crimson-6: var(--rs-viz-crimson-6);
+  --rs-color-viz-crimson-11: var(--rs-viz-crimson-11);
+  --rs-color-viz-crimson-9: var(--rs-viz-crimson-9);
+  --rs-color-viz-crimson-8: var(--rs-viz-crimson-8);
+  --rs-color-viz-crimson-6: var(--rs-viz-crimson-6);
 
   /* Orange */
-  --rs-visualization-orange-11: var(--rs-viz-orange-11);
-  --rs-visualization-orange-9: var(--rs-viz-orange-9);
-  --rs-visualization-orange-8: var(--rs-viz-orange-8);
-  --rs-visualization-orange-6: var(--rs-viz-orange-6);
+  --rs-color-viz-orange-11: var(--rs-viz-orange-11);
+  --rs-color-viz-orange-9: var(--rs-viz-orange-9);
+  --rs-color-viz-orange-8: var(--rs-viz-orange-8);
+  --rs-color-viz-orange-6: var(--rs-viz-orange-6);
 
   /* Gold */
-  --rs-visualization-gold-11: var(--rs-viz-gold-11);
-  --rs-visualization-gold-9: var(--rs-viz-gold-9);
-  --rs-visualization-gold-8: var(--rs-viz-gold-8);
-  --rs-visualization-gold-6: var(--rs-viz-gold-6);
+  --rs-color-viz-gold-11: var(--rs-viz-gold-11);
+  --rs-color-viz-gold-9: var(--rs-viz-gold-9);
+  --rs-color-viz-gold-8: var(--rs-viz-gold-8);
+  --rs-color-viz-gold-6: var(--rs-viz-gold-6);
 }

packages/raystack/v1/styles/primitives/accent.css

@@ -1,3 +1,9 @@
+/* 
+ * Note: Do not use this file directly. 
+ * It is used for generating the final colors file. 
+ * All variables must be used from colors.css file only.
+ */
+
 /* [data-accent-color='indigo']  { */
 :root {
     --rs-accent-1: #fdfdfe;

packages/raystack/v1/styles/primitives/appearance.css

@@ -1,3 +1,9 @@
+/* 
+ * Note: Do not use this file directly. 
+ * It is used for generating the final colors file. 
+ * All variables must be used from colors.css file only.
+ */
+
 /* Light Theme Colors */
 :root {
     /* Smooth theme switch transition */

packages/raystack/v1/styles/primitives/gray.css

@@ -1,3 +1,9 @@
+/* 
+ * Note: Do not use this file directly. 
+ * It is used for generating the final colors.css file. 
+ * All variables must be used from colors.css file only.
+ */
+
 
 [data-gray-color='gray'] {
     --rs-gray-1: #fcfcfc;