update the palette

Author: carlosabadia

assets/custom-colors.css

@@ -15,6 +15,30 @@
   --c-slate-10: #80838D;
   --c-slate-11: #60646C;
   --c-slate-12: #1C2024;
+  --slate-1: #FBFCFE;
+  --slate-2: #F7FAFD;
+  --slate-3: #EDF1F6;
+  --slate-4: #E4E9F1;
+  --slate-5: #DBE1EB;
+  --slate-6: #D3DAE6;
+  --slate-7: #C7D0DE;
+  --slate-8: #B1BDCF;
+  --slate-9: #838FA1;
+  --slate-10: #798495;
+  --slate-11: #5C6573;
+  --slate-12: #1B212A;
+  --slate-a1: #0040c004;
+  --slate-a2: #0040c008;
+  --slate-a3: #00398e12;
+  --slate-a4: #0037801c;
+  --slate-a5: #00327924;
+  --slate-a6: #002e772d;
+  --slate-a7: #002d7039;
+  --slate-a8: #0028634e;
+  --slate-a9: #00193c7c;
+  --slate-a10: #00153686;
+  --slate-a11: #001027a4;
+  --slate-a12: #000711e5;
   /* Violet */
   --c-violet-1: #FDFCFE;
   --c-violet-2: #FAFBFF;
@@ -72,6 +96,18 @@
 .dark,
 .dark-theme {
   /* Slate */
+  --slate-1: #141619;
+  --slate-2: #1B1D20;
+  --slate-3: #22252A;
+  --slate-4: #282B31;
+  --slate-5: #2E3238;
+  --slate-6: #353A42;
+  --slate-7: #414852;
+  --slate-8: #58616F;
+  --slate-9: #656E7D;
+  --slate-10: #737C8A;
+  --slate-11: #ADB4BF;
+  --slate-12: #ECEEF1;
   /* #151618 */
   --c-slate-2: #1A1B1D;
   /* #1A1B1D */
@@ -115,7 +151,7 @@
   --c-red-9: #E5484D;
   --c-red-10: #DC3E42;
   /* White */
-  --c-white-1: #0E0F10;
+  --c-white-1: #1B1D20;
   --glow: #261958;
   --wave-line-1: #2F1C78;
   --wave-line-2: #261958;

case-studies/ansa.md

@@ -44,15 +44,11 @@ meta: [
 ```python exec
 import reflex as rx
 from pcweb.constants import REFLEX_ASSETS_CDN
-from reflex_image_zoom import image_zoom
+from pcweb.pages.customers.views.app_preview_card import app_preview_card
 ```
 
 ```python eval
-rx.vstack(
-    image_zoom(rx.image(src=f"{REFLEX_ASSETS_CDN}case_studies/ansa_app.webp", border_radius="10px", alt="Ansa App")),
-    rx.text("Ansa App built with Reflex"),
-    width="100%",
-)
+app_preview_card(f"{REFLEX_ASSETS_CDN}case_studies/ansa_app.webp", text="Ansa App built with Reflex")
 ```
 
 Meet [Ansa](https://www.ansa.co), a venture capital firm based in New York City that invests in companies from Series A to C. They have invested in companies like Defense Unicorns, Bland, Gradient, and Selector and prior to founding the firm, supported investments in many of the venture-capital industry’s largest outcomes including Crowdstrike, Coinbase, and SurveyMonkey to name a few.

case-studies/autodesk.md

@@ -48,17 +48,12 @@ meta: [
 ```python exec
 import reflex as rx
 from pcweb.constants import REFLEX_ASSETS_CDN
-from reflex_image_zoom import image_zoom
-from pcweb.pages.docs import library
+from pcweb.pages.customers.views.app_preview_card import app_preview_card
 ```
 
-<!-- ```python eval
-rx.vstack(
-    image_zoom(rx.image(src=f"{REFLEX_ASSETS_CDN}case_studies/bayesline_app.webp", border_radius="10px", alt="Bayesline App")),
-    rx.text("Bayesline App built with Reflex"),
-    width="100%",
-)
-``` -->
+```python eval
+app_preview_card(f"{REFLEX_ASSETS_CDN}case_studies/apps/case_studies_autodesk_app.webp", text="Autodesk App built with Reflex")
+```
 
 
 Meet Autodesk a globally recognized leader in design and engineering software, known for its innovative solutions that empower professionals across industries to bring their creative visions to life. Autodesk has established itself as a trusted partner for millions of users worldwide, helping them achieve greater efficiency, precision, and creativity in their projects.

case-studies/bayesline.md

@@ -48,14 +48,11 @@ import reflex as rx
 from pcweb.constants import REFLEX_ASSETS_CDN
 from reflex_image_zoom import image_zoom
 from pcweb.pages.docs import enterprise
+from pcweb.pages.customers.views.app_preview_card import app_preview_card
 ```
 
 ```python eval
-rx.vstack(
-    image_zoom(rx.image(src=f"{REFLEX_ASSETS_CDN}case_studies/bayesline_app.webp", border_radius="10px", alt="Bayesline App")),
-    rx.text("Bayesline App built with Reflex"),
-    width="100%",
-)
+app_preview_card(f"{REFLEX_ASSETS_CDN}case_studies/bayesline_app.webp", text="Bayesline App built with Reflex")
 ```
 
 ## What Bayesline is building

case-studies/sellerx.md

@@ -41,20 +41,11 @@ meta: [
 ```python exec
 import reflex as rx
 from pcweb.constants import REFLEX_ASSETS_CDN
-from reflex_image_zoom import image_zoom
-from pcweb.pages.docs import library
+from pcweb.pages.customers.views.app_preview_card import app_preview_card
 ```
 
 ```python eval
-rx.vstack(
-    image_zoom(rx.image(src=f"{REFLEX_ASSETS_CDN}case_studies/sellerx_app.webp", border_radius="10px", alt="SellerX App")),
-    rx.text("SellerX App built with Reflex"),
-    width="100%",
-)
-```
-
-```python eval
-rx.box(height="30px")
+app_preview_card(f"{REFLEX_ASSETS_CDN}case_studies/sellerx_app.webp", text="SellerX App built with Reflex")
 ```
 
 

pcweb/flexdown.py

@@ -419,11 +419,11 @@ def _author(self, name: str, role: str, class_name: str = "") -> rx.Component:
         return rx.el.div(
             rx.el.span(
                 name,
-                class_name="text-xs font-mono uppercase font-[415] text-m-slate-12 dark:text-m-slate-3",
+                class_name="text-xs font-mono uppercase font-[415] text-secondary-12",
             ),
             rx.el.span(
                 role,
-                class_name="text-xs font-mono font-[415] text-m-slate-7 dark:text-m-slate-6 uppercase",
+                class_name="text-xs font-mono font-[415] text-secondary-11 uppercase",
             ),
             class_name=ui.cn("flex flex-col gap-0.5", class_name),
         )
@@ -444,38 +444,38 @@ def _render_medium(self, data: dict[str, str]) -> rx.Component:
         return rx.el.div(
             rx.el.div(
                 self._avatar(data["name"], data["image"], class_name="size-6"),
-                class_name="p-4 shrink-0 lg:border-r border-m-slate-6 dark:border-m-slate-7 border-dashed max-lg:border-b",
+                class_name="p-4 shrink-0 lg:border-r border-secondary-8 border-dashed max-lg:border-b bg-secondary-1",
             ),
             rx.el.span(
                 f'"{data["quote_text"]}"',
-                class_name="text-m-slate-12 dark:text-m-slate-3 text-base font-[575] p-4  bg-white-1 dark:bg-m-slate-11",
+                class_name="text-secondary-12 text-base font-[575] p-4 bg-white-1 w-full",
             ),
-            class_name="flex lg:flex-row flex-col border border-dashed border-m-slate-6 dark:border-m-slate-7 mt-2 mb-6 rounded-lg overflow-hidden",
+            class_name="flex lg:flex-row flex-col border border-dashed border-secondary-8 mt-2 mb-6 rounded-lg overflow-hidden box-border bg-white-1",
         )
 
     def _render_small(self, data: dict[str, str]) -> rx.Component:
         return rx.el.div(
             rx.el.span(
                 f'"{data["quote_text"]}"',
-                class_name="text-m-slate-12 dark:text-m-slate-3 text-lg font-[575] p-6 lg:border-r border-m-slate-6 dark:border-m-slate-7 border-dashed max-lg:border-b bg-white-1 dark:bg-m-slate-11",
+                class_name="text-secondary-12 text-lg font-[575] p-6 lg:border-r border-secondary-8 border-dashed max-lg:border-b bg-white-1",
             ),
             rx.el.div(
                 rx.el.div(
                     self._author(data["name"], data["role"]),
                     class_name="text-end text-nowrap",
                 ),
                 self._avatar(data["name"], data["image"], class_name="size-14"),
-                class_name="flex flex-row gap-6 items-center p-6 shrink-0",
+                class_name="flex flex-row gap-6 items-center p-6 shrink-0 bg-secondary-1",
             ),
-            class_name="flex lg:flex-row flex-col border border-dashed border-m-slate-6 dark:border-m-slate-7 mt-2 mb-6 rounded-lg overflow-hidden",
+            class_name="flex lg:flex-row flex-col border border-dashed border-secondary-8 mt-2 mb-6 rounded-lg overflow-hidden box-border bg-white-1",
         )
 
     def _render_big(self, data: dict[str, str]) -> rx.Component:
         return rx.el.div(
             rx.el.div(
                 rx.el.span(
                     f"{data['quote_text']}",
-                    class_name="text-m-slate-12 dark:text-m-slate-3 text-2xl font-[575]",
+                    class_name="text-secondary-12 text-2xl font-[575]",
                 ),
                 rx.el.div(
                     self._avatar(data["name"], data["image"], class_name="size-6"),
@@ -494,7 +494,7 @@ def _render_big(self, data: dict[str, str]) -> rx.Component:
                 alt="Quote icon",
                 class_name="absolute right-0 inset-y-0 h-[calc(100%)] min-h-full w-auto origin-right pointer-events-none object-contain object-right",
             ),
-            class_name="flex flex-col dark:border bg-white-1 dark:bg-m-slate-11 dark:border-m-slate-9 mt-2 mb-6 overflow-hidden shadow-[0_0_0_1px_rgba(0,0,0,0.12)_inset,0_6px_12px_0_rgba(0,0,0,0.06),0_1px_1px_0_rgba(0,0,0,0.01),0_4px_6px_0_rgba(0,0,0,0.02)] rounded-xl py-8 px-8 relative",
+            class_name="flex flex-col dark:border bg-white-1 dark:border-secondary-4 mt-2 mb-6 overflow-hidden shadow-[0_0_0_1px_rgba(0,0,0,0.12)_inset,0_6px_12px_0_rgba(0,0,0,0.06),0_1px_1px_0_rgba(0,0,0,0.01),0_4px_6px_0_rgba(0,0,0,0.02)] rounded-xl py-8 px-8 relative",
         )
 
     def render(self, env) -> rx.Component:

pcweb/pages/customers/views/app_preview_card.py

@@ -0,0 +1,39 @@
+import reflex as rx
+from reflex_image_zoom import image_zoom
+
+
+def app_preview_card(image_url: str, text: str) -> rx.Component:
+    return rx.el.div(
+        rx.el.div(
+            rx.el.div(
+                rx.el.div(
+                    rx.el.div(
+                        rx.el.div(
+                            class_name="size-2 shadow-[0_0_0_0.5px_rgba(0,0,0,0.06)_inset] dark:shadow-[0_0_0_0.5px_rgba(255,255,255,0.06)_inset] bg-secondary-4 rounded-full"
+                        ),
+                        rx.el.div(
+                            class_name="size-2 shadow-[0_0_0_0.5px_rgba(0,0,0,0.06)_inset] dark:shadow-[0_0_0_0.5px_rgba(255,255,255,0.06)_inset] bg-secondary-4 rounded-full"
+                        ),
+                        rx.el.div(
+                            class_name="size-2 shadow-[0_0_0_0.5px_rgba(0,0,0,0.06)_inset] dark:shadow-[0_0_0_0.5px_rgba(255,255,255,0.06)_inset] bg-secondary-4 rounded-full"
+                        ),
+                        class_name="flex shrink-0 flex-row items-center gap-1",
+                    ),
+                    rx.el.p(
+                        text,
+                        class_name="absolute left-1/2 top-1/2 max-w-[calc(100%-5rem)] -translate-x-1/2 -translate-y-1/2 truncate text-center text-sm font-medium text-secondary-11",
+                    ),
+                    class_name="relative flex min-h-8 w-full shrink-0 flex-row items-center dark:border-b border-secondary-4 p-3 shadow-[0_0_0_1px_rgba(0,0,0,0.03),0_4px_4px_0_rgba(0,0,0,0.03),0_1px_2px_0_rgba(0,0,0,0.04)] dark:shadow-none",
+                ),
+                image_zoom(
+                    rx.image(
+                        src=image_url,
+                        alt="App preview",
+                        class_name="w-full h-full object-cover object-top h-full",
+                    ),
+                ),
+                class_name="flex flex-col rounded-tl-xl w-full bg-white-1",
+            ),
+            class_name="list-inside flex flex-row relative rounded-xl bg-white-1 w-full overflow-hidden border border-black/10 dark:border-secondary-4 shadow-medium dark:shadow-none w-full mb-8",
+        ),
+    )

pcweb/pages/customers/views/customer_cards.py

@@ -61,24 +61,24 @@ def customer_card(customer: CustomerCard) -> rx.Component:
             rx.el.div(
                 rx.el.div(
                     rx.el.div(
-                        class_name="size-2 shadow-[0_0_0_0.5px_rgba(0,0,0,0.16)_inset] dark:shadow-none dark:border dark:border-m-slate-9 bg-m-slate-4 dark:bg-m-slate-7 rounded-full"
+                        class_name="size-2 shadow-[0_0_0_0.5px_rgba(0,0,0,0.06)_inset] dark:shadow-[0_0_0_0.5px_rgba(255,255,255,0.06)_inset] bg-secondary-4 rounded-full"
                     ),
                     rx.el.div(
-                        class_name="size-2 shadow-[0_0_0_0.5px_rgba(0,0,0,0.16)_inset] dark:shadow-none dark:border dark:border-m-slate-9 bg-m-slate-4 dark:bg-m-slate-7 rounded-full"
+                        class_name="size-2 shadow-[0_0_0_0.5px_rgba(0,0,0,0.06)_inset] dark:shadow-[0_0_0_0.5px_rgba(255,255,255,0.06)_inset] bg-secondary-4 rounded-full"
                     ),
                     rx.el.div(
-                        class_name="size-2 shadow-[0_0_0_0.5px_rgba(0,0,0,0.16)_inset] dark:shadow-none dark:border dark:border-m-slate-9 bg-m-slate-4 dark:bg-m-slate-7 rounded-full"
+                        class_name="size-2 shadow-[0_0_0_0.5px_rgba(0,0,0,0.06)_inset] dark:shadow-[0_0_0_0.5px_rgba(255,255,255,0.06)_inset] bg-secondary-4 rounded-full"
                     ),
-                    class_name="h-8 flex flex-row items-center gap-1 p-3 w-full border-b border-m-slate-4 dark:border-m-slate-9",
+                    class_name="h-8 flex flex-row items-center gap-1 p-3 w-full border-b border-secondary-4",
                 ),
                 rx.image(
                     src=f"{REFLEX_ASSETS_CDN}case_studies/apps/case_studies_{customer['name'].lower().replace(' ', '_')}_app.webp",
                     alt=customer["name"],
                     class_name="w-full h-full object-cover object-top-left min-h-[24.125rem]",
                 ),
-                class_name="flex flex-col border-l border-t border-m-slate-4 dark:border-m-slate-9 rounded-tl-xl w-full bg-white-1 dark:bg-m-slate-11 [box-shadow:0_0_0_1px_rgba(0,_0,_0,_0.06),_0_8px_24px_rgba(0,_0,_0,_0.06),_0_24px_48px_rgba(0,_0,_0,_0.04)] dark:shadow-none",
+                class_name="flex flex-col border-l border-t border-secondary-4 rounded-tl-xl w-full bg-white-1 [box-shadow:0_0_0_1px_rgba(0,_0,_0,_0.06),_0_8px_24px_rgba(0,_0,_0,_0.06),_0_24px_48px_rgba(0,_0,_0,_0.04)] dark:shadow-none",
             ),
-            class_name="list-inside flex flex-row lg:gap-12 gap-4 lg:pl-8 lg:pt-8 pl-6 pt-6 relative rounded-xl bg-white-1 dark:bg-m-slate-11 w-full overflow-hidden h-[25rem] cursor-pointer border border-black/10 dark:border-white/10 [box-shadow:0_6px_12px_0_rgba(0,_0,_0,_0.06),_0_1px_1px_0_rgba(0,_0,_0,_0.01),_0_4px_6px_0_rgba(0,_0,_0,_0.02)] dark:shadow-none xl:w-[42rem] w-full",
+            class_name="list-inside flex flex-row lg:gap-12 gap-4 lg:pl-8 lg:pt-8 pl-6 pt-6 relative rounded-xl bg-white-1 w-full overflow-hidden h-[25rem] cursor-pointer border border-black/10 dark:border-secondary-4 [box-shadow:0_6px_12px_0_rgba(0,_0,_0,_0.06),_0_1px_1px_0_rgba(0,_0,_0,_0.01),_0_4px_6px_0_rgba(0,_0,_0,_0.02)] dark:shadow-none xl:w-[42rem] w-full",
         ),
         to=customer["url"],
         class_name="-m-px h-[25rem] min-w-[42rem]",

pcweb/templates/storypage.py

@@ -411,7 +411,7 @@ def wrapper(*children, **props) -> rx.Component:
                         ),
                     ),
                 ),
-                class_name="flex flex-col w-full justify-center items-center relative dark:bg-m-slate-12 bg-m-slate-1",
+                class_name="flex flex-col w-full justify-center items-center relative bg-secondary-1",
             )
 
         return Route(