From 4916c56cf8b88e6ec10a721bdd0ec94306121ee3 Mon Sep 17 00:00:00 2001
From: Caleb Jacob <thecalebjacob@gmail.com>
Date: Tue, 28 Jan 2025 14:36:14 -0700
Subject: [PATCH] Added support for using .light or .dark class inside the DOM
 at any level, added dialog options

---
 package.json                             |   2 +-
 src/components/Dialog/Dialog.module.scss |   5 ++
 src/components/Dialog/Dialog.tsx         |  15 +++-
 src/styles/_theme.scss                   | 108 ++++++++++++-----------
 4 files changed, 72 insertions(+), 58 deletions(-)

diff --git a/package.json b/package.json
index 05743fd..290f175 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@near-pagoda/ui",
-  "version": "3.1.0",
+  "version": "3.1.1",
   "description": "A React component library that implements the official NEAR design system.",
   "license": "MIT",
   "repository": {
diff --git a/src/components/Dialog/Dialog.module.scss b/src/components/Dialog/Dialog.module.scss
index 32bb07a..510a9e1 100644
--- a/src/components/Dialog/Dialog.module.scss
+++ b/src/components/Dialog/Dialog.module.scss
@@ -94,6 +94,11 @@
       padding: var(--gap-m);
     }
   }
+
+  &[data-transparent='true'] {
+    box-shadow: none;
+    background: transparent;
+  }
 }
 
 .body {
diff --git a/src/components/Dialog/Dialog.tsx b/src/components/Dialog/Dialog.tsx
index b3a1748..1ae5419 100644
--- a/src/components/Dialog/Dialog.tsx
+++ b/src/components/Dialog/Dialog.tsx
@@ -19,15 +19,16 @@ type ContentProps = Omit<ComponentProps<typeof Primitive.Content>, 'title'> & {
   header?: ReactNode;
   size?: 's' | 'm' | 'l';
   title?: string | null;
+  transparentHeader?: boolean;
 };
 
 export const Content = forwardRef<HTMLDivElement, ContentProps>(
-  ({ align, children, header, size = 'm', title, ...props }, ref) => {
+  ({ align, children, className = '', header, size = 'm', title, transparentHeader, ...props }, ref) => {
     return (
       <Primitive.Portal>
         <Primitive.Overlay className={s.overlay}>
           <Primitive.Content
-            className={s.content}
+            className={`${s.content} ${className}`}
             data-align={align}
             data-size={size}
             ref={ref}
@@ -41,7 +42,7 @@ export const Content = forwardRef<HTMLDivElement, ContentProps>(
             }}
             aria-describedby=""
           >
-            <div className={s.header}>
+            <div className={s.header} data-transparent={transparentHeader}>
               <Flex align="center" gap="m" style={{ marginRight: 'auto', flexGrow: 1 }}>
                 {title && (
                   <Primitive.Title asChild>
@@ -53,7 +54,13 @@ export const Content = forwardRef<HTMLDivElement, ContentProps>(
               </Flex>
 
               <Primitive.Close asChild>
-                <Button label="Close" size="small" variant="secondary" fill="outline" icon={<X weight="bold" />} />
+                <Button
+                  label="Close"
+                  size="small"
+                  variant="secondary"
+                  fill={transparentHeader ? 'solid' : 'outline'}
+                  icon={<X weight="bold" />}
+                />
               </Primitive.Close>
             </div>
 
diff --git a/src/styles/_theme.scss b/src/styles/_theme.scss
index 53bbc81..fa55dda 100644
--- a/src/styles/_theme.scss
+++ b/src/styles/_theme.scss
@@ -57,6 +57,32 @@
   --text-hero-l: 500 72px/1 'FK Grotesk', 'Mona Sans', sans-serif;
   --text-hero-xl: 500 100px/1 'FK Grotesk', 'Mona Sans', sans-serif;
 
+  & {
+    @media (max-width: $tabletBreakpointMaxWidth) {
+      --gap-l: 1.5rem;
+      --gap-xl: 2rem;
+      --gap-2xl: 4rem;
+      --gap-3xl: 6rem;
+
+      --text-l: 700 16px/1.3 'FK Grotesk', 'Mona Sans', sans-serif;
+      --text-xl: 700 20px/1.3 'FK Grotesk', 'Mona Sans', sans-serif;
+      --text-2xl: 700 24px/1.3 'FK Grotesk', 'Mona Sans', sans-serif;
+      --text-3xl: 700 28px/1.2 'FK Grotesk', 'Mona Sans', sans-serif;
+      --text-hero-m: 500 36px/1.2 'FK Grotesk', 'Mona Sans', sans-serif;
+      --text-hero-l: 500 48px/1.2 'FK Grotesk', 'Mona Sans', sans-serif;
+      --text-hero-xl: 500 72px/1.2 'FK Grotesk', 'Mona Sans', sans-serif;
+    }
+  }
+
+  & {
+    @media (max-width: $phoneBreakpointMaxWidth) {
+      --gap-2xl: 3rem;
+      --gap-3xl: 4rem;
+    }
+  }
+}
+
+.light {
   --sand-0: #fff;
 
   --green-1: #f9fffb;
@@ -86,58 +112,34 @@
   --violet-11: #5b56b8;
   --violet-12: #2b226d;
   --violet-brand: #9797ff;
+}
 
-  & {
-    @media (max-width: $tabletBreakpointMaxWidth) {
-      --gap-l: 1.5rem;
-      --gap-xl: 2rem;
-      --gap-2xl: 4rem;
-      --gap-3xl: 6rem;
-
-      --text-l: 700 16px/1.3 'FK Grotesk', 'Mona Sans', sans-serif;
-      --text-xl: 700 20px/1.3 'FK Grotesk', 'Mona Sans', sans-serif;
-      --text-2xl: 700 24px/1.3 'FK Grotesk', 'Mona Sans', sans-serif;
-      --text-3xl: 700 28px/1.2 'FK Grotesk', 'Mona Sans', sans-serif;
-      --text-hero-m: 500 36px/1.2 'FK Grotesk', 'Mona Sans', sans-serif;
-      --text-hero-l: 500 48px/1.2 'FK Grotesk', 'Mona Sans', sans-serif;
-      --text-hero-xl: 500 72px/1.2 'FK Grotesk', 'Mona Sans', sans-serif;
-    }
-  }
-
-  & {
-    @media (max-width: $phoneBreakpointMaxWidth) {
-      --gap-2xl: 3rem;
-      --gap-3xl: 4rem;
-    }
-  }
-
-  &.dark {
-    --sand-0: #0b0b0a;
-
-    --green-1: #0b130f;
-    --green-2: #111b15;
-    --green-3: #102d1e;
-    --green-4: #093c25;
-    --green-5: #0d4a2f;
-    --green-6: #155939;
-    --green-7: #1b6a45;
-    --green-8: #1d7e52;
-    --green-9: #00ec97;
-    --green-10: #00e18d;
-    --green-11: #00db87;
-    --green-12: #a8f4c8;
-
-    --violet-1: #0f101c;
-    --violet-2: #151526;
-    --violet-3: #22204b;
-    --violet-4: #2c256a;
-    --violet-5: #352f7b;
-    --violet-6: #3f3a89;
-    --violet-7: #4b469d;
-    --violet-8: #5a54bb;
-    --violet-9: #9797ff;
-    --violet-10: #8c8cf2;
-    --violet-11: #a8aaff;
-    --violet-12: #dddfff;
-  }
+.dark {
+  --sand-0: #0b0b0a;
+
+  --green-1: #0b130f;
+  --green-2: #111b15;
+  --green-3: #102d1e;
+  --green-4: #093c25;
+  --green-5: #0d4a2f;
+  --green-6: #155939;
+  --green-7: #1b6a45;
+  --green-8: #1d7e52;
+  --green-9: #00ec97;
+  --green-10: #00e18d;
+  --green-11: #00db87;
+  --green-12: #a8f4c8;
+
+  --violet-1: #0f101c;
+  --violet-2: #151526;
+  --violet-3: #22204b;
+  --violet-4: #2c256a;
+  --violet-5: #352f7b;
+  --violet-6: #3f3a89;
+  --violet-7: #4b469d;
+  --violet-8: #5a54bb;
+  --violet-9: #9797ff;
+  --violet-10: #8c8cf2;
+  --violet-11: #a8aaff;
+  --violet-12: #dddfff;
 }