@0xsequence/design-system - npm Package Compare versions

Comparing version 1.0.21 to 1.1.0

dist/types/components/ThemeProvider/ThemeProvider.d.ts

 import { PropsWithChildren } from 'react';
+import { ColorTokens } from '../../tokens/color';
 declare const THEMES: readonly ["dark", "light"];
 export declare type Theme = (typeof THEMES)[number];
+declare type ThemeOverrides = Partial<ColorTokens>;
 interface ThemeContextValue {
-    theme: Theme;
+    theme: Theme | ThemeOverrides;
     root?: string;
@@ -10,3 +12,3 @@ setTheme: (mode: Theme) => void;
 interface ThemeProviderProps {
-    theme?: Theme;
+    theme?: Theme | ThemeOverrides;
     root?: string;
@@ -13,0 +15,0 @@ scope?: string;

dist/types/css/vars.css.d.ts

@@ -82,25 +82,14 @@ export declare const baseVars: {
     colors: {
-        arbitrumDark: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        avalanceDark: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        bscDark: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        ethereumDark: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        gnosisDark: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        polygonDark: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        arbitrumLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        avalanceLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        bscLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        ethereumLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        gnosisLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        polygonLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        black: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        white: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        inherit: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        transparent: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        positive: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        negative: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        info: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        warning: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        text100: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        text80: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         text50: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        text80: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        text100: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         textInverse100: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        buttonInverse: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        buttonGlass: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        buttonEmphasis: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        borderNormal: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        borderFocus: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        backgroundOverlay: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        backgroundBackdrop: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         backgroundPrimary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -112,41 +101,41 @@ backgroundSecondary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         backgroundInverse: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        backgroundBackdrop: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        backgroundOverlay: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         backgroundRaised: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        borderNormal: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        borderFocus: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        buttonGlass: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        buttonEmphasis: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        buttonInverse: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         gradientBackdrop: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         gradientPrimary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         gradientSecondary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        positive: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        negative: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        info: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        warning: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        black: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        white: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        inherit: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        transparent: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    };
-};
-export declare const vars: {
-    colors: {
         arbitrumDark: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        arbitrumLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         avalanceDark: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        avalanceLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         bscDark: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        bscLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         ethereumDark: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        ethereumLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         gnosisDark: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        gnosisLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         polygonDark: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        arbitrumLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        avalanceLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        bscLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        ethereumLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        gnosisLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         polygonLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+};
+export declare const vars: {
+    colors: {
+        black: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        white: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        inherit: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        transparent: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        positive: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        negative: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        info: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        warning: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        text100: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        text80: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         text50: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        text80: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        text100: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         textInverse100: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        buttonInverse: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        buttonGlass: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        buttonEmphasis: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        borderNormal: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        borderFocus: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        backgroundOverlay: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        backgroundBackdrop: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         backgroundPrimary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -158,14 +147,25 @@ backgroundSecondary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         backgroundInverse: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        backgroundBackdrop: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        backgroundOverlay: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         backgroundRaised: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        borderNormal: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        borderFocus: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        buttonGlass: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        buttonEmphasis: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        buttonInverse: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         gradientBackdrop: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         gradientPrimary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         gradientSecondary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        positive: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        negative: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        info: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        warning: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        black: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        white: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        inherit: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        transparent: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        arbitrumDark: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        arbitrumLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        avalanceDark: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        avalanceLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        bscDark: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        bscLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        ethereumDark: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        ethereumLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        gnosisDark: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        gnosisLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        polygonDark: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        polygonLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
     };
@@ -172,0 +172,0 @@ blur: {

dist/types/tokens/color.d.ts

@@ -1,51 +0,10 @@
-export interface ColorTokens {
-    base: BaseColors;
-    context: ContextColors;
-    network: typeof networkColors;
-    gradient: Gradients;
-    colorSchemes: ColorSchemes;
-}
 export declare type ColorScheme = 'dark' | 'light';
-interface ColorSchemeTokens {
-    background: BackgroundColors;
-    border: BorderColors;
-    button: ButtonColors;
-    text: TextColors;
-}
-declare type ColorSchemes<T = ColorSchemeTokens> = {
+declare type ColorSchemes<T = ColorTokens> = {
     [key in ColorScheme]: T;
 };
-interface BaseColors {
+export interface ColorTokens {
     black: string;
     white: string;
-    inherit: 'inherit';
-    transparent: 'transparent';
-}
-interface BackgroundColors {
-    primary: string;
-    secondary: string;
-    contrast: string;
-    muted: string;
-    control: string;
-    inverse: string;
-    backdrop: string;
-    overlay: string;
-    raised: string;
-}
-interface BorderColors {
-    normal: string;
-    focus: string;
-}
-interface ButtonColors {
-    glass: string;
-    emphasis: string;
-    inverse: string;
-}
-interface TextColors {
-    '100': string;
-    '80': string;
-    '50': string;
-    inverse100: string;
-}
-export interface ContextColors {
+    inherit: string;
+    transparent: string;
     positive: string;
@@ -55,35 +14,37 @@ negative: string;
     warning: string;
+    text100: string;
+    text80: string;
+    text50: string;
+    textInverse100: string;
+    backgroundPrimary: string;
+    backgroundSecondary: string;
+    backgroundContrast: string;
+    backgroundMuted: string;
+    backgroundControl: string;
+    backgroundInverse: string;
+    backgroundBackdrop: string;
+    backgroundOverlay: string;
+    backgroundRaised: string;
+    borderNormal: string;
+    borderFocus: string;
+    buttonGlass: string;
+    buttonEmphasis: string;
+    buttonInverse: string;
+    gradientBackdrop: string;
+    gradientPrimary: string;
+    gradientSecondary: string;
+    arbitrumDark: string;
+    arbitrumLight: string;
+    avalanceDark: string;
+    avalanceLight: string;
+    bscDark: string;
+    bscLight: string;
+    ethereumDark: string;
+    ethereumLight: string;
+    gnosisDark: string;
+    gnosisLight: string;
+    polygonDark: string;
+    polygonLight: string;
 }
-interface Gradients {
-    backdrop: string;
-    primary: string;
-    secondary: string;
-}
-declare const networkColors: {
-    Arbitrum: {
-        dark: string;
-        light: string;
-    };
-    Avalance: {
-        dark: string;
-        light: string;
-    };
-    BSC: {
-        dark: string;
-        light: string;
-    };
-    Ethereum: {
-        dark: string;
-        light: string;
-    };
-    Gnosis: {
-        dark: string;
-        light: string;
-    };
-    Polygon: {
-        dark: string;
-        light: string;
-    };
-};
-export declare const colors: ColorTokens;
+export declare const colors: ColorSchemes;
 export {};

dist/types/tokens/index.d.ts

@@ -11,3 +11,6 @@ export declare const tokens: {
     };
-    colors: import("./color").ColorTokens;
+    colors: {
+        dark: import("./color").ColorTokens;
+        light: import("./color").ColorTokens;
+    };
     fonts: {
@@ -14,0 +17,0 @@ inherit: string;

package.json

 {
   "name": "@0xsequence/design-system",
-  "version": "1.0.21",
+  "version": "1.1.0",
   "license": "Apache-2.0",
@@ -5,0 +5,0 @@ "type": "module",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1833997

increased by0.27%

Worsened metrics

Lines of code

46524

decreased by-0.1%

No dependency changes