@opensea/ui-kit - npm Package Compare versions

Comparing version 0.0.4 to 0.0.5

dist/index.modern.js

@@ -60,7 +60,19 @@ import { useState, useMemo, useContext, createContext } from 'react';
         level1: {
-          subtle: `0px 4px 16px ${rgba(COLORS.black, 0.04)}`,
-          regular: `0px 4px 16px ${rgba(COLORS.black, 0.08)}`
+          subtle: {
+            shadow: `0px 4px 16px ${rgba(COLORS.black, 0.04)}`,
+            background: COLORS.white
+          },
+          regular: {
+            shadow: `0px 4px 16px ${rgba(COLORS.black, 0.08)}`,
+            background: COLORS.white
+          }
         },
-        level2: `0px 6px 24px ${rgba(COLORS.black, 0.12)}`,
-        level3: `0px 6px 32px ${rgba(COLORS.black, 0.2)}`
+        level2: {
+          shadow: `0px 6px 24px ${rgba(COLORS.black, 0.12)}`,
+          background: COLORS.white
+        },
+        level3: {
+          shadow: `0px 6px 32px ${rgba(COLORS.black, 0.2)}`,
+          background: COLORS.white
+        }
       }
@@ -105,7 +117,19 @@ },
         level1: {
-          subtle: `0px 4px 16px ${rgba(COLORS.black, 0.08)}`,
-          regular: `0px 4px 16px ${rgba(COLORS.black, 0.08)}`
+          subtle: {
+            shadow: `0px 4px 16px ${rgba(COLORS.black, 0.08)}`,
+            background: `#1B1B1B`
+          },
+          regular: {
+            shadow: `0px 4px 16px ${rgba(COLORS.black, 0.08)}`,
+            background: `#1B1B1B`
+          }
         },
-        level2: `0px 6px 24px ${rgba(COLORS.black, 0.12)}`,
-        level3: `0px 6px 32px ${rgba(COLORS.black, 0.2)}`
+        level2: {
+          shadow: `0px 6px 24px ${rgba(COLORS.black, 0.12)}`,
+          background: `#252525`
+        },
+        level3: {
+          shadow: `0px 6px 32px ${rgba(COLORS.black, 0.2)}`,
+          background: `#2E2E2E`
+        }
       }
@@ -112,0 +136,0 @@ },

dist/index.module.js

@@ -60,7 +60,19 @@ import { useState, useMemo, useContext, createContext } from 'react';
         level1: {
-          subtle: "0px 4px 16px " + rgba(COLORS.black, 0.04),
-          regular: "0px 4px 16px " + rgba(COLORS.black, 0.08)
+          subtle: {
+            shadow: "0px 4px 16px " + rgba(COLORS.black, 0.04),
+            background: COLORS.white
+          },
+          regular: {
+            shadow: "0px 4px 16px " + rgba(COLORS.black, 0.08),
+            background: COLORS.white
+          }
         },
-        level2: "0px 6px 24px " + rgba(COLORS.black, 0.12),
-        level3: "0px 6px 32px " + rgba(COLORS.black, 0.2)
+        level2: {
+          shadow: "0px 6px 24px " + rgba(COLORS.black, 0.12),
+          background: COLORS.white
+        },
+        level3: {
+          shadow: "0px 6px 32px " + rgba(COLORS.black, 0.2),
+          background: COLORS.white
+        }
       }
@@ -105,7 +117,19 @@ },
         level1: {
-          subtle: "0px 4px 16px " + rgba(COLORS.black, 0.08),
-          regular: "0px 4px 16px " + rgba(COLORS.black, 0.08)
+          subtle: {
+            shadow: "0px 4px 16px " + rgba(COLORS.black, 0.08),
+            background: "#1B1B1B"
+          },
+          regular: {
+            shadow: "0px 4px 16px " + rgba(COLORS.black, 0.08),
+            background: "#1B1B1B"
+          }
         },
-        level2: "0px 6px 24px " + rgba(COLORS.black, 0.12),
-        level3: "0px 6px 32px " + rgba(COLORS.black, 0.2)
+        level2: {
+          shadow: "0px 6px 24px " + rgba(COLORS.black, 0.12),
+          background: "#252525"
+        },
+        level3: {
+          shadow: "0px 6px 32px " + rgba(COLORS.black, 0.2),
+          background: "#2E2E2E"
+        }
       }
@@ -112,0 +136,0 @@ },

dist/index.umd.js

@@ -61,7 +61,19 @@ (function (global, factory) {
           level1: {
-            subtle: "0px 4px 16px " + polished.rgba(COLORS.black, 0.04),
-            regular: "0px 4px 16px " + polished.rgba(COLORS.black, 0.08)
+            subtle: {
+              shadow: "0px 4px 16px " + polished.rgba(COLORS.black, 0.04),
+              background: COLORS.white
+            },
+            regular: {
+              shadow: "0px 4px 16px " + polished.rgba(COLORS.black, 0.08),
+              background: COLORS.white
+            }
           },
-          level2: "0px 6px 24px " + polished.rgba(COLORS.black, 0.12),
-          level3: "0px 6px 32px " + polished.rgba(COLORS.black, 0.2)
+          level2: {
+            shadow: "0px 6px 24px " + polished.rgba(COLORS.black, 0.12),
+            background: COLORS.white
+          },
+          level3: {
+            shadow: "0px 6px 32px " + polished.rgba(COLORS.black, 0.2),
+            background: COLORS.white
+          }
         }
@@ -106,7 +118,19 @@ },
           level1: {
-            subtle: "0px 4px 16px " + polished.rgba(COLORS.black, 0.08),
-            regular: "0px 4px 16px " + polished.rgba(COLORS.black, 0.08)
+            subtle: {
+              shadow: "0px 4px 16px " + polished.rgba(COLORS.black, 0.08),
+              background: "#1B1B1B"
+            },
+            regular: {
+              shadow: "0px 4px 16px " + polished.rgba(COLORS.black, 0.08),
+              background: "#1B1B1B"
+            }
           },
-          level2: "0px 6px 24px " + polished.rgba(COLORS.black, 0.12),
-          level3: "0px 6px 32px " + polished.rgba(COLORS.black, 0.2)
+          level2: {
+            shadow: "0px 6px 24px " + polished.rgba(COLORS.black, 0.12),
+            background: "#252525"
+          },
+          level3: {
+            shadow: "0px 6px 32px " + polished.rgba(COLORS.black, 0.2),
+            background: "#2E2E2E"
+          }
         }
@@ -113,0 +137,0 @@ },

dist/theme.d.ts

@@ -20,7 +20,19 @@ import { ThemeVariant } from './types';
                 level1: {
-                    subtle: string;
-                    regular: string;
+                    subtle: {
+                        shadow: string;
+                        background: string;
+                    };
+                    regular: {
+                        shadow: string;
+                        background: string;
+                    };
                 };
-                level2: string;
-                level3: string;
+                level2: {
+                    shadow: string;
+                    background: string;
+                };
+                level3: {
+                    shadow: string;
+                    background: string;
+                };
             };
@@ -27,0 +39,0 @@ };

dist/ThemeProvider/ThemeProvider.react.d.ts

@@ -32,7 +32,19 @@ import React from 'react';
                 level1: {
-                    subtle: string;
-                    regular: string;
+                    subtle: {
+                        shadow: string;
+                        background: string;
+                    };
+                    regular: {
+                        shadow: string;
+                        background: string;
+                    };
                 };
-                level2: string;
-                level3: string;
+                level2: {
+                    shadow: string;
+                    background: string;
+                };
+                level3: {
+                    shadow: string;
+                    background: string;
+                };
             };
@@ -39,0 +51,0 @@ };

package.json

 {
   "name": "@opensea/ui-kit",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "OpenSea's Design System implementation in React",
@@ -5,0 +5,0 @@ "license": "MIT",

src/theme.ts

@@ -27,7 +27,19 @@ import { COLORS } from './constants/colors';
         level1: {
-          subtle: `0px 4px 16px ${rgba(COLORS.black, 0.04)}`,
-          regular: `0px 4px 16px ${rgba(COLORS.black, 0.08)}`
+          subtle: {
+            shadow: `0px 4px 16px ${rgba(COLORS.black, 0.04)}`,
+            background: COLORS.white
+          },
+          regular: {
+            shadow: `0px 4px 16px ${rgba(COLORS.black, 0.08)}`,
+            background: COLORS.white
+          }
         },
-        level2: `0px 6px 24px ${rgba(COLORS.black, 0.12)}`,
-        level3: `0px 6px 32px ${rgba(COLORS.black, 0.2)}`
+        level2: {
+          shadow: `0px 6px 24px ${rgba(COLORS.black, 0.12)}`,
+          background: COLORS.white
+        },
+        level3: {
+          shadow: `0px 6px 32px ${rgba(COLORS.black, 0.2)}`,
+          background: COLORS.white
+        }
       }
@@ -73,7 +85,19 @@ },
         level1: {
-          subtle: `0px 4px 16px ${rgba(COLORS.black, 0.08)}`,
-          regular: `0px 4px 16px ${rgba(COLORS.black, 0.08)}`
+          subtle: {
+            shadow: `0px 4px 16px ${rgba(COLORS.black, 0.08)}`,
+            background: `#1B1B1B`
+          },
+          regular: {
+            shadow: `0px 4px 16px ${rgba(COLORS.black, 0.08)}`,
+            background: `#1B1B1B`
+          }
         },
-        level2: `0px 6px 24px ${rgba(COLORS.black, 0.12)}`,
-        level3: `0px 6px 32px ${rgba(COLORS.black, 0.2)}`
+        level2: {
+          shadow: `0px 6px 24px ${rgba(COLORS.black, 0.12)}`,
+          background: `#252525`
+        },
+        level3: {
+          shadow: `0px 6px 32px ${rgba(COLORS.black, 0.2)}`,
+          background: `#2E2E2E`
+        }
       }
@@ -80,0 +104,0 @@ },

src/types.ts

 export type ThemeVariant = 'light' | 'dark';
 
+type Elevation = {
+  background: string;
+  shadow: string;
+};
+
 export type Theme = {
@@ -21,7 +26,7 @@ colors: {
         level1: {
-          subtle: string;
-          regular: string;
+          subtle: Elevation;
+          regular: Elevation;
         };
-        level2: string;
-        level3: string;
+        level2: Elevation;
+        level3: Elevation;
       };
@@ -28,0 +33,0 @@ };

No alert changes

Improved metrics

Total package byte prevSize

36214

increased by11.14%

Lines of code

1206

increased by13.99%

No dependency changes