PrettyJson theme updated

stellar · Apr 17, 2024 · 034d0ca · 034d0ca
1 parent ecf1111
commit 034d0ca
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 4 deletions.
diff --git a/src/components/PrettyJson/index.tsx b/src/components/PrettyJson/index.tsx
@@ -20,6 +20,13 @@ export const PrettyJson = ({ json }: { json: AnyObject }) => {
   const Value = ({ children }: { children: React.ReactNode }) => (
     <div className="PrettyJson__value">{children}</div>
   );
+  const ValueType = ({
+    children,
+    type,
+  }: {
+    children: React.ReactNode;
+    type: string;
+  }) => <span className={`PrettyJson__value--${type}`}>{children}</span>;
   const Quotes = () => <span className="PrettyJson__quotes">{'"'}</span>;
   const Colon = () => <span className="PrettyJson__colon">{":"}</span>;
   const Comma = () => <span className="PrettyJson__comma">{","}</span>;
@@ -147,7 +154,13 @@ export const PrettyJson = ({ json }: { json: AnyObject }) => {
                 <Quotes />
               </>
             ) : (
-              `"${item}"`
+              <>
+                <Quotes />
+                <ValueType type={isNaN(Number(item)) ? "string" : "number"}>
+                  {item}
+                </ValueType>
+                <Quotes />
+              </>
             )}
             <Comma />
           </Value>
@@ -162,7 +175,7 @@ export const PrettyJson = ({ json }: { json: AnyObject }) => {
       default:
         return (
           <Value>
-            {`${item}`}
+            <ValueType type={typeof item}>{`${item}`}</ValueType>
             <Comma />
           </Value>
         );

diff --git a/src/components/PrettyJson/styles.scss b/src/components/PrettyJson/styles.scss
@@ -17,14 +17,30 @@
   }
 
   &__value {
-    color: var(--sds-clr-gray-11);
     white-space: nowrap;
+
+    &--string {
+      color: var(--sds-clr-navy-11);
+    }
+
+    &--number {
+      color: var(--sds-clr-lime-11);
+    }
+
+    &--boolean {
+      color: var(--sds-clr-pink-11);
+    }
   }
 
+  &__value,
   &__comma,
   &__quotes,
   &__bracket,
   &__key {
-    color: var(--sds-clr-gray-11);
+    color: var(--sds-clr-gray-12);
+  }
+
+  .Link {
+    font-family: var(--sds-ff-monospace);
   }
 }