@opensea/ui-kit - npm Package Compare versions

Comparing version 0.0.5 to 0.0.6

dist/index.modern.js

@@ -5,2 +5,17 @@ import { useState, useMemo, useContext, createContext } from 'react';
 
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
+
 const COLORS = {
@@ -44,5 +59,5 @@ white: '#ffffff',
 const lightTheme = {
-  colors: {
+  colors: _extends({
     base1: COLORS.white,
-    base2: `background: linear-gradient(0deg, ${rgba(COLORS.gray3, 0.03)}, rgba(${rgba(COLORS.gray3, 0.04)}), ${COLORS.white};`,
+    base2: '#FDFDFD',
     components: {
@@ -97,7 +112,7 @@ background: {
     }
-  },
+  }, COLORS),
   typeface: TYPEFACES
 };
 const darkTheme = {
-  colors: {
+  colors: _extends({
     base1: COLORS.gray3,
@@ -121,7 +136,7 @@ base2: COLORS.gray3,
             shadow: `0px 4px 16px ${rgba(COLORS.black, 0.08)}`,
-            background: `#1B1B1B`
+            background: `#202020`
           },
           regular: {
             shadow: `0px 4px 16px ${rgba(COLORS.black, 0.08)}`,
-            background: `#1B1B1B`
+            background: `#202020`
           }
@@ -155,3 +170,3 @@ },
     }
-  },
+  }, COLORS),
   typeface: TYPEFACES
@@ -158,0 +173,0 @@ };

dist/index.module.js

@@ -5,2 +5,17 @@ import { useState, useMemo, useContext, createContext } from 'react';
 
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
+
 var COLORS = {
@@ -44,5 +59,5 @@ white: '#ffffff',
 var lightTheme = {
-  colors: {
+  colors: _extends({
     base1: COLORS.white,
-    base2: "background: linear-gradient(0deg, " + rgba(COLORS.gray3, 0.03) + ", rgba(" + rgba(COLORS.gray3, 0.04) + "), " + COLORS.white + ";",
+    base2: '#FDFDFD',
     components: {
@@ -97,7 +112,7 @@ background: {
     }
-  },
+  }, COLORS),
   typeface: TYPEFACES
 };
 var darkTheme = {
-  colors: {
+  colors: _extends({
     base1: COLORS.gray3,
@@ -121,7 +136,7 @@ base2: COLORS.gray3,
             shadow: "0px 4px 16px " + rgba(COLORS.black, 0.08),
-            background: "#1B1B1B"
+            background: "#202020"
           },
           regular: {
             shadow: "0px 4px 16px " + rgba(COLORS.black, 0.08),
-            background: "#1B1B1B"
+            background: "#202020"
           }
@@ -155,3 +170,3 @@ },
     }
-  },
+  }, COLORS),
   typeface: TYPEFACES
@@ -158,0 +173,0 @@ };

dist/index.umd.js

@@ -6,2 +6,17 @@ (function (global, factory) {
 })(this, (function (exports, react, polished, jsxRuntime) {
+  function _extends() {
+    _extends = Object.assign ? Object.assign.bind() : function (target) {
+      for (var i = 1; i < arguments.length; i++) {
+        var source = arguments[i];
+        for (var key in source) {
+          if (Object.prototype.hasOwnProperty.call(source, key)) {
+            target[key] = source[key];
+          }
+        }
+      }
+      return target;
+    };
+    return _extends.apply(this, arguments);
+  }
+
   var COLORS = {
@@ -45,5 +60,5 @@ white: '#ffffff',
   var lightTheme = {
-    colors: {
+    colors: _extends({
       base1: COLORS.white,
-      base2: "background: linear-gradient(0deg, " + polished.rgba(COLORS.gray3, 0.03) + ", rgba(" + polished.rgba(COLORS.gray3, 0.04) + "), " + COLORS.white + ";",
+      base2: '#FDFDFD',
       components: {
@@ -98,7 +113,7 @@ background: {
       }
-    },
+    }, COLORS),
     typeface: TYPEFACES
   };
   var darkTheme = {
-    colors: {
+    colors: _extends({
       base1: COLORS.gray3,
@@ -122,7 +137,7 @@ base2: COLORS.gray3,
               shadow: "0px 4px 16px " + polished.rgba(COLORS.black, 0.08),
-              background: "#1B1B1B"
+              background: "#202020"
             },
             regular: {
               shadow: "0px 4px 16px " + polished.rgba(COLORS.black, 0.08),
-              background: "#1B1B1B"
+              background: "#202020"
             }
@@ -156,3 +171,3 @@ },
       }
-    },
+    }, COLORS),
     typeface: TYPEFACES
@@ -159,0 +174,0 @@ };

dist/theme.d.ts

 import { ThemeVariant } from './types';
 export declare const getTheme: (theme: ThemeVariant) => {
     colors: {
+        white: string;
+        black: string;
+        gray1: string;
+        gray2: string;
+        gray3: string;
+        blue1: string;
+        blue2: string;
+        blue3: string;
+        blue4: string;
+        blue5: string;
+        green1: string;
+        green2: string;
+        yellow1: string;
+        yellow2: string;
+        red1: string;
+        red2: string;
+        accentRed: string;
+        accentPurple: string;
+        accentFuscia: string;
+        accentOrange: string;
+        accentCerulean: string;
+        accentAqua: string;
         base1: string;
@@ -5,0 +27,0 @@ base2: string;

dist/ThemeProvider/ThemeProvider.react.d.ts

@@ -16,2 +16,24 @@ import React from 'react';
     colors: {
+        white: string;
+        black: string;
+        gray1: string;
+        gray2: string;
+        gray3: string;
+        blue1: string;
+        blue2: string;
+        blue3: string;
+        blue4: string;
+        blue5: string;
+        green1: string;
+        green2: string;
+        yellow1: string;
+        yellow2: string;
+        red1: string;
+        red2: string;
+        accentRed: string;
+        accentPurple: string;
+        accentFuscia: string;
+        accentOrange: string;
+        accentCerulean: string;
+        accentAqua: string;
         base1: string;
@@ -18,0 +40,0 @@ base2: string;

package.json

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

src/theme.ts

@@ -9,6 +9,3 @@ import { COLORS } from './constants/colors';
     base1: COLORS.white,
-    base2: `background: linear-gradient(0deg, ${rgba(
-      COLORS.gray3,
-      0.03
-    )}, rgba(${rgba(COLORS.gray3, 0.04)}), ${COLORS.white};`,
+    base2: '#FDFDFD',
     components: {
@@ -62,3 +59,4 @@ background: {
       secondaryHover: COLORS.gray3
-    }
+    },
+    ...COLORS
   },
@@ -88,7 +86,7 @@ typeface: TYPEFACES
             shadow: `0px 4px 16px ${rgba(COLORS.black, 0.08)}`,
-            background: `#1B1B1B`
+            background: `#202020`
           },
           regular: {
             shadow: `0px 4px 16px ${rgba(COLORS.black, 0.08)}`,
-            background: `#1B1B1B`
+            background: `#202020`
           }
@@ -121,3 +119,4 @@ },
       secondaryHover: COLORS.white
-    }
+    },
+    ...COLORS
   },
@@ -124,0 +123,0 @@ typeface: TYPEFACES

src/types.ts

@@ -0,1 +1,3 @@
+import { COLORS } from './constants/colors';
+
 export type ThemeVariant = 'light' | 'dark';
@@ -49,3 +51,3 @@
     };
-  };
+  } & typeof COLORS;
   typeface: {
@@ -52,0 +54,0 @@ display: string;

No alert changes

Improved metrics

Total package byte prevSize

38642

increased by6.7%

Lines of code

1306

increased by8.29%

No dependency changes