Added support for using .light or .dark class inside the DOM at any l…

…evel, added dialog options
near · Jan 28, 2025 · 4916c56 · 4916c56
1 parent e4be0c2
commit 4916c56
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 58 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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;
 }