@opensea/ui-kit - npm Package Compare versions

Comparing version 0.0.1 to 0.0.2

dist/index.d.ts

 export { ThemeProvider, useTheme } from './ThemeProvider';
-export { ThemeVariant, Theme } from './theme';
+export { ThemeVariant, Theme } from './types';
 //# sourceMappingURL=index.d.ts.map

dist/index.modern.js

 import { useState, useMemo, useContext, createContext } from 'react';
+import { rgba } from 'polished';
 import { jsx } from 'react/jsx-runtime';
 
+const COLORS = {
+  white: '#ffffff',
+  black: '#000000',
+  // Grays
+  gray1: '#b3b3b3',
+  gray2: '#545454',
+  gray3: '#121212',
+  // Blues
+  blue1: '#8FC7FF',
+  blue2: '#2E8DEE',
+  blue3: '#2081E2',
+  blue4: '#1868B7',
+  blue5: '#235AA3',
+  // Greens
+  green1: '#34C77B',
+  green2: '#0C954E',
+  // Yellows
+  yellow1: '#F6C000',
+  yellow2: '#C59E10',
+  // Reds
+  red1: '#C59E10',
+  red2: '#EB5757',
+  // Accent colors
+  accentRed: '#E62929',
+  accentPurple: '#5D32E9',
+  accentFuscia: '#E932BE',
+  accentOrange: '#F2994A',
+  accentCerulean: '#15B2E5',
+  accentAqua: '#2BCDE4' // aqua
+};
+
+const TYPEFACES = {
+  display: '"Poppins", sans-serif',
+  heading: '"Poppins", sans-serif',
+  body: '"Inter", sans-serif'
+};
+
+({
+  colors: {
+    base1: COLORS.white,
+    base2: `background: linear-gradient(0deg, ${rgba(COLORS.gray3, 0.03)}, rgba(${rgba(COLORS.gray3, 0.04)}), ${COLORS.white};`,
+    components: {
+      background: {
+        transparent: 'transparent',
+        gray1: rgba(COLORS.gray3, 0.04),
+        gray2: rgba(COLORS.gray3, 0.08),
+        gray3: rgba(COLORS.gray3, 0.12)
+      },
+      border: {
+        level1: rgba(COLORS.gray3, 0.08),
+        level2: rgba(COLORS.gray3, 0.12),
+        level3: rgba(COLORS.gray3, 0.32)
+      },
+      elevation: {
+        level1: {
+          subtle: `0px 4px 16px ${rgba(COLORS.black, 0.04)}`,
+          regular: `0px 4px 16px ${rgba(COLORS.black, 0.08)}`
+        },
+        level2: `0px 6px 24px ${rgba(COLORS.black, 0.12)}`,
+        level3: `0px 6px 32px ${rgba(COLORS.black, 0.2)}`
+      }
+    },
+    text: {
+      primary: COLORS.gray3,
+      secondary: COLORS.gray2,
+      interactive: {
+        primary: COLORS.blue3,
+        primaryHover: COLORS.blue5,
+        secondary: COLORS.gray3,
+        secondaryHover: COLORS.gray2
+      }
+    },
+    icons: {
+      primary: COLORS.gray3,
+      primaryHover: COLORS.gray2,
+      secondary: COLORS.gray2,
+      secondaryHover: COLORS.gray3
+    }
+  },
+  typeface: TYPEFACES
+});
+({
+  colors: {
+    base1: COLORS.gray3,
+    base2: COLORS.gray3,
+    components: {
+      background: {
+        transparent: 'transparent',
+        gray1: rgba(COLORS.white, 0.04),
+        gray2: rgba(COLORS.white, 0.08),
+        gray3: rgba(COLORS.white, 0.12)
+      },
+      border: {
+        level1: rgba(COLORS.white, 0.08),
+        level2: rgba(COLORS.white, 0.12),
+        level3: rgba(COLORS.white, 0.32)
+      },
+      elevation: {
+        level1: {
+          subtle: `0px 4px 16px ${rgba(COLORS.black, 0.08)}`,
+          regular: `0px 4px 16px ${rgba(COLORS.black, 0.08)}`
+        },
+        level2: `0px 6px 24px ${rgba(COLORS.black, 0.12)}`,
+        level3: `0px 6px 32px ${rgba(COLORS.black, 0.2)}`
+      }
+    },
+    text: {
+      primary: COLORS.white,
+      secondary: COLORS.gray1,
+      interactive: {
+        primary: COLORS.blue1,
+        primaryHover: COLORS.blue3,
+        secondary: COLORS.white,
+        secondaryHover: COLORS.gray1
+      }
+    },
+    icons: {
+      primary: COLORS.white,
+      primaryHover: COLORS.gray1,
+      secondary: COLORS.gray1,
+      secondaryHover: COLORS.white
+    }
+  },
+  typeface: TYPEFACES
+});
+
 const DEFAULT_THEME = 'light';
@@ -5,0 +132,0 @@ const ThemeContext = /*#__PURE__*/createContext({

dist/index.module.js

 import { useState, useMemo, useContext, createContext } from 'react';
+import { rgba } from 'polished';
 import { jsx } from 'react/jsx-runtime';
 
+var COLORS = {
+  white: '#ffffff',
+  black: '#000000',
+  // Grays
+  gray1: '#b3b3b3',
+  gray2: '#545454',
+  gray3: '#121212',
+  // Blues
+  blue1: '#8FC7FF',
+  blue2: '#2E8DEE',
+  blue3: '#2081E2',
+  blue4: '#1868B7',
+  blue5: '#235AA3',
+  // Greens
+  green1: '#34C77B',
+  green2: '#0C954E',
+  // Yellows
+  yellow1: '#F6C000',
+  yellow2: '#C59E10',
+  // Reds
+  red1: '#C59E10',
+  red2: '#EB5757',
+  // Accent colors
+  accentRed: '#E62929',
+  accentPurple: '#5D32E9',
+  accentFuscia: '#E932BE',
+  accentOrange: '#F2994A',
+  accentCerulean: '#15B2E5',
+  accentAqua: '#2BCDE4' // aqua
+};
+
+var TYPEFACES = {
+  display: '"Poppins", sans-serif',
+  heading: '"Poppins", sans-serif',
+  body: '"Inter", sans-serif'
+};
+
+({
+  colors: {
+    base1: COLORS.white,
+    base2: "background: linear-gradient(0deg, " + rgba(COLORS.gray3, 0.03) + ", rgba(" + rgba(COLORS.gray3, 0.04) + "), " + COLORS.white + ";",
+    components: {
+      background: {
+        transparent: 'transparent',
+        gray1: rgba(COLORS.gray3, 0.04),
+        gray2: rgba(COLORS.gray3, 0.08),
+        gray3: rgba(COLORS.gray3, 0.12)
+      },
+      border: {
+        level1: rgba(COLORS.gray3, 0.08),
+        level2: rgba(COLORS.gray3, 0.12),
+        level3: rgba(COLORS.gray3, 0.32)
+      },
+      elevation: {
+        level1: {
+          subtle: "0px 4px 16px " + rgba(COLORS.black, 0.04),
+          regular: "0px 4px 16px " + rgba(COLORS.black, 0.08)
+        },
+        level2: "0px 6px 24px " + rgba(COLORS.black, 0.12),
+        level3: "0px 6px 32px " + rgba(COLORS.black, 0.2)
+      }
+    },
+    text: {
+      primary: COLORS.gray3,
+      secondary: COLORS.gray2,
+      interactive: {
+        primary: COLORS.blue3,
+        primaryHover: COLORS.blue5,
+        secondary: COLORS.gray3,
+        secondaryHover: COLORS.gray2
+      }
+    },
+    icons: {
+      primary: COLORS.gray3,
+      primaryHover: COLORS.gray2,
+      secondary: COLORS.gray2,
+      secondaryHover: COLORS.gray3
+    }
+  },
+  typeface: TYPEFACES
+});
+({
+  colors: {
+    base1: COLORS.gray3,
+    base2: COLORS.gray3,
+    components: {
+      background: {
+        transparent: 'transparent',
+        gray1: rgba(COLORS.white, 0.04),
+        gray2: rgba(COLORS.white, 0.08),
+        gray3: rgba(COLORS.white, 0.12)
+      },
+      border: {
+        level1: rgba(COLORS.white, 0.08),
+        level2: rgba(COLORS.white, 0.12),
+        level3: rgba(COLORS.white, 0.32)
+      },
+      elevation: {
+        level1: {
+          subtle: "0px 4px 16px " + rgba(COLORS.black, 0.08),
+          regular: "0px 4px 16px " + rgba(COLORS.black, 0.08)
+        },
+        level2: "0px 6px 24px " + rgba(COLORS.black, 0.12),
+        level3: "0px 6px 32px " + rgba(COLORS.black, 0.2)
+      }
+    },
+    text: {
+      primary: COLORS.white,
+      secondary: COLORS.gray1,
+      interactive: {
+        primary: COLORS.blue1,
+        primaryHover: COLORS.blue3,
+        secondary: COLORS.white,
+        secondaryHover: COLORS.gray1
+      }
+    },
+    icons: {
+      primary: COLORS.white,
+      primaryHover: COLORS.gray1,
+      secondary: COLORS.gray1,
+      secondaryHover: COLORS.white
+    }
+  },
+  typeface: TYPEFACES
+});
+
 var DEFAULT_THEME = 'light';
@@ -5,0 +132,0 @@ var ThemeContext = /*#__PURE__*/createContext({

dist/index.umd.js

 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('react/jsx-runtime')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'react', 'react/jsx-runtime'], factory) :
-  (global = global || self, factory(global.uiKit = {}, global.react, global.jsx));
-})(this, (function (exports, react, jsxRuntime) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('polished'), require('react/jsx-runtime')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'react', 'polished', 'react/jsx-runtime'], factory) :
+  (global = global || self, factory(global.uiKit = {}, global.react, global.polished, global.jsx));
+})(this, (function (exports, react, polished, jsxRuntime) {
+  var COLORS = {
+    white: '#ffffff',
+    black: '#000000',
+    // Grays
+    gray1: '#b3b3b3',
+    gray2: '#545454',
+    gray3: '#121212',
+    // Blues
+    blue1: '#8FC7FF',
+    blue2: '#2E8DEE',
+    blue3: '#2081E2',
+    blue4: '#1868B7',
+    blue5: '#235AA3',
+    // Greens
+    green1: '#34C77B',
+    green2: '#0C954E',
+    // Yellows
+    yellow1: '#F6C000',
+    yellow2: '#C59E10',
+    // Reds
+    red1: '#C59E10',
+    red2: '#EB5757',
+    // Accent colors
+    accentRed: '#E62929',
+    accentPurple: '#5D32E9',
+    accentFuscia: '#E932BE',
+    accentOrange: '#F2994A',
+    accentCerulean: '#15B2E5',
+    accentAqua: '#2BCDE4' // aqua
+  };
+
+  var TYPEFACES = {
+    display: '"Poppins", sans-serif',
+    heading: '"Poppins", sans-serif',
+    body: '"Inter", sans-serif'
+  };
+
+  ({
+    colors: {
+      base1: COLORS.white,
+      base2: "background: linear-gradient(0deg, " + polished.rgba(COLORS.gray3, 0.03) + ", rgba(" + polished.rgba(COLORS.gray3, 0.04) + "), " + COLORS.white + ";",
+      components: {
+        background: {
+          transparent: 'transparent',
+          gray1: polished.rgba(COLORS.gray3, 0.04),
+          gray2: polished.rgba(COLORS.gray3, 0.08),
+          gray3: polished.rgba(COLORS.gray3, 0.12)
+        },
+        border: {
+          level1: polished.rgba(COLORS.gray3, 0.08),
+          level2: polished.rgba(COLORS.gray3, 0.12),
+          level3: polished.rgba(COLORS.gray3, 0.32)
+        },
+        elevation: {
+          level1: {
+            subtle: "0px 4px 16px " + polished.rgba(COLORS.black, 0.04),
+            regular: "0px 4px 16px " + polished.rgba(COLORS.black, 0.08)
+          },
+          level2: "0px 6px 24px " + polished.rgba(COLORS.black, 0.12),
+          level3: "0px 6px 32px " + polished.rgba(COLORS.black, 0.2)
+        }
+      },
+      text: {
+        primary: COLORS.gray3,
+        secondary: COLORS.gray2,
+        interactive: {
+          primary: COLORS.blue3,
+          primaryHover: COLORS.blue5,
+          secondary: COLORS.gray3,
+          secondaryHover: COLORS.gray2
+        }
+      },
+      icons: {
+        primary: COLORS.gray3,
+        primaryHover: COLORS.gray2,
+        secondary: COLORS.gray2,
+        secondaryHover: COLORS.gray3
+      }
+    },
+    typeface: TYPEFACES
+  });
+  ({
+    colors: {
+      base1: COLORS.gray3,
+      base2: COLORS.gray3,
+      components: {
+        background: {
+          transparent: 'transparent',
+          gray1: polished.rgba(COLORS.white, 0.04),
+          gray2: polished.rgba(COLORS.white, 0.08),
+          gray3: polished.rgba(COLORS.white, 0.12)
+        },
+        border: {
+          level1: polished.rgba(COLORS.white, 0.08),
+          level2: polished.rgba(COLORS.white, 0.12),
+          level3: polished.rgba(COLORS.white, 0.32)
+        },
+        elevation: {
+          level1: {
+            subtle: "0px 4px 16px " + polished.rgba(COLORS.black, 0.08),
+            regular: "0px 4px 16px " + polished.rgba(COLORS.black, 0.08)
+          },
+          level2: "0px 6px 24px " + polished.rgba(COLORS.black, 0.12),
+          level3: "0px 6px 32px " + polished.rgba(COLORS.black, 0.2)
+        }
+      },
+      text: {
+        primary: COLORS.white,
+        secondary: COLORS.gray1,
+        interactive: {
+          primary: COLORS.blue1,
+          primaryHover: COLORS.blue3,
+          secondary: COLORS.white,
+          secondaryHover: COLORS.gray1
+        }
+      },
+      icons: {
+        primary: COLORS.white,
+        primaryHover: COLORS.gray1,
+        secondary: COLORS.gray1,
+        secondaryHover: COLORS.white
+      }
+    },
+    typeface: TYPEFACES
+  });
+
   var DEFAULT_THEME = 'light';
@@ -7,0 +133,0 @@ var ThemeContext = /*#__PURE__*/react.createContext({

dist/theme.d.ts

@@ -1,15 +0,47 @@
-export type ThemeVariant = 'light' | 'dark';
-export type Theme = {
-    color: {
-        red: string;
-    };
-    font: {
-        body: string;
-    };
-};
+import { ThemeVariant } from './types';
 export declare const getTheme: (theme: ThemeVariant) => {
-    color: {
-        red: string;
+    colors: {
+        base1: string;
+        base2: string;
+        components: {
+            background: {
+                transparent: string;
+                gray1: string;
+                gray2: string;
+                gray3: string;
+            };
+            border: {
+                level1: string;
+                level2: string;
+                level3: string;
+            };
+            elevation: {
+                level1: {
+                    subtle: string;
+                    regular: string;
+                };
+                level2: string;
+                level3: string;
+            };
+        };
+        text: {
+            primary: string;
+            secondary: string;
+            interactive: {
+                primary: string;
+                primaryHover: string;
+                secondary: string;
+                secondaryHover: string;
+            };
+        };
+        icons: {
+            primary: string;
+            primaryHover: string;
+            secondary: string;
+            secondaryHover: string;
+        };
     };
-    font: {
+    typeface: {
+        display: string;
+        heading: string;
         body: string;
@@ -16,0 +48,0 @@ };

dist/ThemeProvider/ThemeProvider.react.d.ts

 import React from 'react';
-import { ThemeVariant } from '../theme';
+import type { ThemeVariant } from '../types';
 type ThemeContext = {
@@ -15,6 +15,46 @@ theme: ThemeVariant;
 export declare const useThemeValues: () => {
-    color: {
-        red: string;
+    colors: {
+        base1: string;
+        base2: string;
+        components: {
+            background: {
+                transparent: string;
+                gray1: string;
+                gray2: string;
+                gray3: string;
+            };
+            border: {
+                level1: string;
+                level2: string;
+                level3: string;
+            };
+            elevation: {
+                level1: {
+                    subtle: string;
+                    regular: string;
+                };
+                level2: string;
+                level3: string;
+            };
+        };
+        text: {
+            primary: string;
+            secondary: string;
+            interactive: {
+                primary: string;
+                primaryHover: string;
+                secondary: string;
+                secondaryHover: string;
+            };
+        };
+        icons: {
+            primary: string;
+            primaryHover: string;
+            secondary: string;
+            secondaryHover: string;
+        };
     };
-    font: {
+    typeface: {
+        display: string;
+        heading: string;
         body: string;
@@ -21,0 +61,0 @@ };

package.json

 {
   "name": "@opensea/ui-kit",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "OpenSea's Design System implementation in React",
@@ -28,3 +28,5 @@ "license": "MIT",
   "types": "./dist/index.d.ts",
-  "dependencies": {},
+  "dependencies": {
+    "polished": "^4.2.2"
+  },
   "peerDependencies": {
@@ -34,10 +36,10 @@ "react": "*"
   "devDependencies": {
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^14.0.0",
-    "@testing-library/user-event": "^14.4.3",
-    "@types/react": "^18.2.6",
-    "@vitejs/plugin-react": "^4.0.0",
-    "jsdom": "^22.0.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "@testing-library/jest-dom": "5.16.5",
+    "@testing-library/react": "14.0.0",
+    "@testing-library/user-event": "14.4.3",
+    "@types/react": "18.2.7",
+    "@vitejs/plugin-react": "4.0.0",
+    "jsdom": "22.1.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
   },
@@ -44,0 +46,0 @@ "source": "src/index.ts",

src/index.ts

 export { ThemeProvider, useTheme } from './ThemeProvider';
-export { ThemeVariant, Theme } from './theme';
+export { ThemeVariant, Theme } from './types';

src/theme.ts

@@ -1,28 +0,97 @@
-export type ThemeVariant = 'light' | 'dark';
+import { COLORS } from './constants/colors';
+import { TYPEFACES } from './constants/typefaces';
+import { rgba } from 'polished';
+import { ThemeVariant, Theme } from './types';
 
-export type Theme = {
-  color: {
-    red: string;
-  };
-  font: {
-    body: string;
-  };
-};
-
 const lightTheme = {
-  color: {
-    red: '#FF0000'
+  colors: {
+    base1: COLORS.white,
+    base2: `background: linear-gradient(0deg, ${rgba(
+      COLORS.gray3,
+      0.03
+    )}, rgba(${rgba(COLORS.gray3, 0.04)}), ${COLORS.white};`,
+    components: {
+      background: {
+        transparent: 'transparent',
+        gray1: rgba(COLORS.gray3, 0.04),
+        gray2: rgba(COLORS.gray3, 0.08),
+        gray3: rgba(COLORS.gray3, 0.12)
+      },
+      border: {
+        level1: rgba(COLORS.gray3, 0.08),
+        level2: rgba(COLORS.gray3, 0.12),
+        level3: rgba(COLORS.gray3, 0.32)
+      },
+      elevation: {
+        level1: {
+          subtle: `0px 4px 16px ${rgba(COLORS.black, 0.04)}`,
+          regular: `0px 4px 16px ${rgba(COLORS.black, 0.08)}`
+        },
+        level2: `0px 6px 24px ${rgba(COLORS.black, 0.12)}`,
+        level3: `0px 6px 32px ${rgba(COLORS.black, 0.2)}`
+      }
+    },
+    text: {
+      primary: COLORS.gray3,
+      secondary: COLORS.gray2,
+      interactive: {
+        primary: COLORS.blue3,
+        primaryHover: COLORS.blue5,
+        secondary: COLORS.gray3,
+        secondaryHover: COLORS.gray2
+      }
+    },
+    icons: {
+      primary: COLORS.gray3,
+      primaryHover: COLORS.gray2,
+      secondary: COLORS.gray2,
+      secondaryHover: COLORS.gray3
+    }
   },
-  font: {
-    body: 'arial'
-  }
+  typeface: TYPEFACES
 } satisfies Theme;
 
 const darkTheme = {
-  color: {
-    red: '#FF0000'
+  colors: {
+    base1: COLORS.gray3,
+    base2: COLORS.gray3,
+    components: {
+      background: {
+        transparent: 'transparent',
+        gray1: rgba(COLORS.white, 0.04),
+        gray2: rgba(COLORS.white, 0.08),
+        gray3: rgba(COLORS.white, 0.12)
+      },
+      border: {
+        level1: rgba(COLORS.white, 0.08),
+        level2: rgba(COLORS.white, 0.12),
+        level3: rgba(COLORS.white, 0.32)
+      },
+      elevation: {
+        level1: {
+          subtle: `0px 4px 16px ${rgba(COLORS.black, 0.08)}`,
+          regular: `0px 4px 16px ${rgba(COLORS.black, 0.08)}`
+        },
+        level2: `0px 6px 24px ${rgba(COLORS.black, 0.12)}`,
+        level3: `0px 6px 32px ${rgba(COLORS.black, 0.2)}`
+      }
+    },
+    text: {
+      primary: COLORS.white,
+      secondary: COLORS.gray1,
+      interactive: {
+        primary: COLORS.blue1,
+        primaryHover: COLORS.blue3,
+        secondary: COLORS.white,
+        secondaryHover: COLORS.gray1
+      }
+    },
+    icons: {
+      primary: COLORS.white,
+      primaryHover: COLORS.gray1,
+      secondary: COLORS.gray1,
+      secondaryHover: COLORS.white
+    }
   },
-  font: {
-    body: 'arial'
-  }
+  typeface: TYPEFACES
 } satisfies Theme;
@@ -29,0 +98,0 @@

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

31212

increased by195.74%

Number of package files

25

increased by38.89%

Lines of code

1019

increased by280.22%

Worsened metrics

Dependency count

2

increased by100%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedpolished@^4.2.2

• + Added@babel/runtime@7.26.7(transitive)

• + Addedpolished@4.3.1(transitive)

• + Addedregenerator-runtime@0.14.1(transitive)