@blockscout/ui-toolkit 0.0.1-alpha.1 → 0.0.1-alpha.2

package/dist/theme/foundations/typography.js

@@ -1,92 +0,0 @@
-import i from "../../configs/app/index.js";
-var e;
-const n = ((e = i.UI.fonts.body) == null ? void 0 : e.name) ?? "Inter";
-var t;
-const o = ((t = i.UI.fonts.heading) == null ? void 0 : t.name) ?? "Poppins", l = {
-  heading: { value: `${o}, sans-serif` },
-  body: { value: `${n}, sans-serif` }
-}, a = {
-  heading: {
-    xl: {
-      value: {
-        fontSize: "32px",
-        lineHeight: "40px",
-        fontWeight: "500",
-        letterSpacing: "-0.5px",
-        fontFamily: "heading"
-      }
-    },
-    lg: {
-      value: {
-        fontSize: "24px",
-        lineHeight: "32px",
-        fontWeight: "500",
-        fontFamily: "heading"
-      }
-    },
-    md: {
-      value: {
-        fontSize: "18px",
-        lineHeight: "24px",
-        fontWeight: "500",
-        fontFamily: "heading"
-      }
-    },
-    sm: {
-      value: {
-        fontSize: "16px",
-        lineHeight: "24px",
-        fontWeight: "500",
-        fontFamily: "heading"
-      }
-    },
-    xs: {
-      value: {
-        fontSize: "14px",
-        lineHeight: "20px",
-        fontWeight: "600",
-        fontFamily: "heading"
-      }
-    }
-  },
-  text: {
-    xl: {
-      value: {
-        fontSize: "20px",
-        lineHeight: "28px",
-        fontWeight: "400",
-        fontFamily: "body"
-      }
-    },
-    md: {
-      value: {
-        fontSize: "16px",
-        lineHeight: "24px",
-        fontWeight: "400",
-        fontFamily: "body"
-      }
-    },
-    sm: {
-      value: {
-        fontSize: "14px",
-        lineHeight: "20px",
-        fontWeight: "400",
-        fontFamily: "body"
-      }
-    },
-    xs: {
-      value: {
-        fontSize: "12px",
-        lineHeight: "16px",
-        fontWeight: "400",
-        fontFamily: "body"
-      }
-    }
-  }
-};
-export {
-  n as BODY_TYPEFACE,
-  o as HEADING_TYPEFACE,
-  l as fonts,
-  a as textStyles
-};

package/dist/theme/foundations/zIndex.js

@@ -1,24 +0,0 @@
-const e = {
-  hide: { value: -1 },
-  auto: { value: "auto" },
-  base: { value: 0 },
-  docked: { value: 10 },
-  dropdown: { value: 1e3 },
-  sticky: { value: 1100 },
-  sticky1: { value: 1101 },
-  sticky2: { value: 1102 },
-  banner: { value: 1200 },
-  overlay: { value: 1300 },
-  modal: { value: 1400 },
-  popover: { value: 1500 },
-  tooltip: { value: 1550 },
-  // otherwise tooltips will not be visible in modals
-  tooltip2: { value: 1551 },
-  // for tooltips in tooltips
-  skipLink: { value: 1600 },
-  toast: { value: 1700 }
-};
-export {
-  e as default,
-  e as zIndex
-};

package/dist/theme/globalCss.js

@@ -1,51 +0,0 @@
-import e from "./globals/address-entity.js";
-import i from "./globals/recaptcha.js";
-import r from "./globals/scrollbar.js";
-const o = {
-  WebkitTextFillColor: "var(--chakra-colors-input-fg)",
-  "-webkit-box-shadow": "0 0 0px 1000px var(--chakra-colors-input-bg) inset",
-  transition: "background-color 5000s ease-in-out 0s"
-}, t = {
-  "&:-webkit-autofill": o,
-  "&:-webkit-autofill:hover": o,
-  "&:-webkit-autofill:focus": o
-}, s = {
-  body: {
-    bg: "global.body.bg",
-    color: "global.body.fg",
-    WebkitTapHighlightColor: "transparent",
-    fontVariantLigatures: "no-contextual",
-    focusRingStyle: "hidden"
-  },
-  mark: {
-    bg: "global.mark.bg",
-    color: "inherit"
-  },
-  "svg *::selection": {
-    color: "none",
-    background: "none"
-  },
-  form: {
-    w: "100%"
-  },
-  input: {
-    // hide number input arrows in Google Chrome
-    "&::-webkit-outer-spin-button, &::-webkit-inner-spin-button": {
-      WebkitAppearance: "none",
-      margin: 0
-    },
-    ...t
-  },
-  textarea: {
-    ...t
-  },
-  select: {
-    ...t
-  },
-  ...i,
-  ...r,
-  ...e
-};
-export {
-  s as default
-};

package/dist/theme/globals/address-entity.js

@@ -1,34 +0,0 @@
-const e = {
-  ".address-entity": {
-    "&.address-entity_highlighted": {
-      _before: {
-        content: '" "',
-        position: "absolute",
-        py: 1,
-        pl: 1,
-        pr: 0,
-        top: "-5px",
-        left: "-5px",
-        width: "calc(100% + 6px)",
-        height: "calc(100% + 10px)",
-        borderRadius: "base",
-        borderColor: "address.highlighted.border",
-        borderWidth: "1px",
-        borderStyle: "dashed",
-        bgColor: "address.highlighted.bg",
-        zIndex: -1
-      }
-    }
-  },
-  ".address-entity_no-copy": {
-    "&.address-entity_highlighted": {
-      _before: {
-        pr: 2,
-        width: "calc(100% + 6px + 8px)"
-      }
-    }
-  }
-};
-export {
-  e as default
-};

package/dist/theme/globals/recaptcha.js

@@ -1,21 +0,0 @@
-const e = {
-  ".grecaptcha-badge": {
-    visibility: "hidden"
-  },
-  'div:has(div):has(iframe[title="recaptcha challenge expires in two minutes"])': {
-    "&::after": {
-      content: '" "',
-      display: "block",
-      position: "fixed",
-      top: 0,
-      left: 0,
-      width: "100vw",
-      height: "100vh",
-      zIndex: 1e5,
-      bgColor: "blackAlpha.300"
-    }
-  }
-};
-export {
-  e as default
-};

package/dist/theme/globals/scrollbar.js

@@ -1,33 +0,0 @@
-const r = {
-  "body *::-webkit-scrollbar": {
-    width: "20px"
-  },
-  "body *::-webkit-scrollbar-track": {
-    backgroundColor: "transparent"
-  },
-  "body *::-webkit-scrollbar-thumb": {
-    backgroundColor: "{colors.global.scrollbar.thumb}",
-    borderRadius: "20px",
-    border: "8px solid rgba(0,0,0,0)",
-    backgroundClip: "content-box",
-    minHeight: "32px"
-  },
-  "body *::-webkit-scrollbar-button": {
-    display: "none"
-  },
-  "body *::-webkit-scrollbar-corner": {
-    backgroundColor: "transparent"
-  },
-  "body *::-webkit-resizer": {
-    // FIXME for dark mode we need to use a different image - /static/resizer_dark.png
-    backgroundImage: "url(/static/resizer_light.png)",
-    backgroundSize: "20px"
-  },
-  "body *": {
-    scrollbarWidth: "thin",
-    scrollbarColor: "{colors.global.scrollbar.thumb} transparent"
-  }
-};
-export {
-  r as default
-};

package/dist/theme/index.d.ts

@@ -1 +0,0 @@
-export { default as theme } from './theme';

package/dist/theme/index.ts

@@ -1 +0,0 @@
-export { default as theme } from './theme';

package/dist/theme/recipes/accordion.recipe.js

@@ -1,143 +0,0 @@
-import { defineSlotRecipe as i } from "@chakra-ui/react";
-const e = i({
-  className: "chakra-accordion",
-  slots: ["root", "item", "itemTrigger", "itemContent", "itemBody", "itemIndicator"],
-  base: {
-    root: {
-      width: "full",
-      "--accordion-radius": "none"
-    },
-    item: {
-      overflowAnchor: "none",
-      borderColor: "border.divider"
-    },
-    itemTrigger: {
-      display: "flex",
-      alignItems: "center",
-      width: "full",
-      outline: "0",
-      gap: "1",
-      fontWeight: "medium",
-      borderRadius: "var(--accordion-radius)",
-      cursor: "pointer",
-      _focusVisible: {
-        outline: "2px solid",
-        outlineColor: "colorPalette.focusRing"
-      }
-    },
-    itemBody: {
-      pt: "0",
-      pb: "var(--accordion-padding-y)"
-    },
-    itemContent: {
-      overflow: "hidden",
-      borderRadius: "var(--accordion-radius)",
-      _open: {
-        animationName: "expand-height, fade-in",
-        animationDuration: "moderate"
-      },
-      _closed: {
-        animationName: "collapse-height, fade-out",
-        animationDuration: "moderate"
-      }
-    },
-    itemIndicator: {
-      transition: "rotate 0.2s ease-in-out",
-      transformOrigin: "center"
-    }
-  },
-  variants: {
-    noAnimation: {
-      true: {
-        itemContent: {
-          _open: {
-            animationName: "none"
-          },
-          _closed: {
-            animationName: "none"
-          }
-        },
-        itemIndicator: {
-          transition: "none"
-        }
-      }
-    },
-    variant: {
-      outline: {
-        item: {
-          borderBottomWidth: "1px"
-        },
-        itemIndicator: {
-          color: "gray.500"
-        }
-      },
-      faq: {
-        item: {
-          borderBottomWidth: "1px"
-        },
-        itemTrigger: {
-          textStyle: "heading.md"
-        },
-        itemIndicator: {
-          color: "link.primary",
-          _groupHover: {
-            color: "link.primary.hover"
-          }
-        }
-      }
-    },
-    size: {
-      sm: {
-        root: {
-          "--accordion-padding-x": "0",
-          "--accordion-padding-y": "spacing.2"
-        },
-        itemTrigger: {
-          textStyle: "sm",
-          py: "var(--accordion-padding-y)"
-        },
-        itemIndicator: {
-          boxSize: "5"
-        }
-      },
-      md: {
-        root: {
-          "--accordion-padding-x": "0",
-          "--accordion-padding-y": "spacing.3"
-        },
-        itemTrigger: {
-          textStyle: "md",
-          py: "var(--accordion-padding-y)"
-        },
-        itemIndicator: {
-          boxSize: "5"
-        }
-      }
-    }
-  },
-  compoundVariants: [
-    {
-      variant: "faq",
-      size: "md",
-      css: {
-        itemIndicator: {
-          boxSize: "14px",
-          margin: "5px"
-        },
-        itemBody: {
-          paddingLeft: "36px"
-        },
-        itemTrigger: {
-          gap: "3"
-        }
-      }
-    }
-  ],
-  defaultVariants: {
-    size: "md",
-    variant: "outline"
-  }
-});
-export {
-  e as recipe
-};

package/dist/theme/recipes/alert.recipe.js

@@ -1,134 +0,0 @@
-import { defineSlotRecipe as t } from "@chakra-ui/react";
-const r = t({
-  slots: ["root", "title", "description", "indicator", "content"],
-  base: {
-    root: {
-      width: "full",
-      display: "flex",
-      alignItems: "flex-start",
-      position: "relative",
-      borderRadius: "base",
-      color: "alert.fg",
-      _loading: {
-        bgColor: "unset"
-      }
-    },
-    title: {
-      fontWeight: "600"
-    },
-    description: {
-      display: "inline"
-    },
-    indicator: {
-      display: "inline-flex",
-      alignItems: "center",
-      justifyContent: "center",
-      flexShrink: "0",
-      width: "5",
-      height: "5",
-      _icon: { boxSize: "full" },
-      color: "alert.fg"
-    },
-    content: {
-      display: "flex",
-      flex: "1"
-    }
-  },
-  variants: {
-    status: {
-      info: {
-        root: {
-          bgColor: "alert.bg.info",
-          "&:not([data-loading], [aria-busy=true])": {
-            bgColor: "alert.bg.info"
-          },
-          color: "alert.fg"
-        }
-      },
-      warning: {
-        root: {
-          bgColor: "alert.bg.warning",
-          "&:not([data-loading], [aria-busy=true])": {
-            bgColor: "alert.bg.warning"
-          },
-          color: "alert.fg"
-        }
-      },
-      warning_table: {
-        root: {
-          bgColor: "alert.bg.warning_table",
-          "&:not([data-loading], [aria-busy=true])": {
-            bgColor: "alert.bg.warning_table"
-          },
-          color: "alert.fg"
-        }
-      },
-      success: {
-        root: {
-          bgColor: "alert.bg.success",
-          "&:not([data-loading], [aria-busy=true])": {
-            bgColor: "alert.bg.success"
-          },
-          color: "alert.fg"
-        }
-      },
-      error: {
-        root: {
-          bgColor: "alert.bg.error",
-          "&:not([data-loading], [aria-busy=true])": {
-            bgColor: "alert.bg.error"
-          },
-          color: "alert.fg"
-        }
-      }
-    },
-    variant: {
-      subtle: {
-        root: {
-          color: "alert.fg"
-        }
-      }
-    },
-    inline: {
-      true: {
-        root: {
-          alignItems: "flex-start"
-        },
-        content: {
-          display: "inline-flex",
-          flexDirection: "row",
-          alignItems: "center"
-        }
-      },
-      false: {
-        content: {
-          display: "flex",
-          flexDirection: "column"
-        }
-      }
-    },
-    size: {
-      md: {
-        root: {
-          gap: "2",
-          px: "3",
-          py: "2",
-          textStyle: "md"
-        },
-        indicator: {
-          boxSize: "5",
-          my: "2px"
-        }
-      }
-    }
-  },
-  defaultVariants: {
-    status: "info",
-    size: "md",
-    inline: !0,
-    variant: "subtle"
-  }
-});
-export {
-  r as recipe
-};

package/dist/theme/recipes/badge.recipe.js

@@ -1,119 +0,0 @@
-import { defineRecipe as a } from "@chakra-ui/react";
-const g = a({
-  base: {
-    display: "inline-flex",
-    alignItems: "center",
-    borderRadius: "sm",
-    gap: "1",
-    fontWeight: "500",
-    width: "fit-content",
-    maxWidth: "100%",
-    whiteSpace: "nowrap",
-    fontVariantNumeric: "normal",
-    userSelect: "none",
-    _loading: {
-      borderRadius: "sm",
-      bgColor: "unset"
-    }
-  },
-  variants: {
-    variant: {
-      subtle: {}
-    },
-    colorPalette: {
-      gray: {
-        bgColor: "badge.gray.bg",
-        "&:not([data-loading], [aria-busy=true])": {
-          bgColor: "badge.gray.bg"
-        },
-        color: "badge.gray.fg"
-      },
-      green: {
-        bgColor: "badge.green.bg",
-        "&:not([data-loading], [aria-busy=true])": {
-          bgColor: "badge.green.bg"
-        },
-        color: "badge.green.fg"
-      },
-      red: {
-        bgColor: "badge.red.bg",
-        "&:not([data-loading], [aria-busy=true])": {
-          bgColor: "badge.red.bg"
-        },
-        color: "badge.red.fg"
-      },
-      purple: {
-        bgColor: "badge.purple.bg",
-        "&:not([data-loading], [aria-busy=true])": {
-          bgColor: "badge.purple.bg"
-        },
-        color: "badge.purple.fg"
-      },
-      orange: {
-        bgColor: "badge.orange.bg",
-        "&:not([data-loading], [aria-busy=true])": {
-          bgColor: "badge.orange.bg"
-        },
-        color: "badge.orange.fg"
-      },
-      blue: {
-        bgColor: "badge.blue.bg",
-        "&:not([data-loading], [aria-busy=true])": {
-          bgColor: "badge.blue.bg"
-        },
-        color: "badge.blue.fg"
-      },
-      yellow: {
-        bgColor: "badge.yellow.bg",
-        "&:not([data-loading], [aria-busy=true])": {
-          bgColor: "badge.yellow.bg"
-        },
-        color: "badge.yellow.fg"
-      },
-      teal: {
-        bgColor: "badge.teal.bg",
-        "&:not([data-loading], [aria-busy=true])": {
-          bgColor: "badge.teal.bg"
-        },
-        color: "badge.teal.fg"
-      },
-      cyan: {
-        bgColor: "badge.cyan.bg",
-        "&:not([data-loading], [aria-busy=true])": {
-          bgColor: "badge.cyan.bg"
-        },
-        color: "badge.cyan.fg"
-      },
-      purple_alt: {
-        bgColor: "badge.purple_alt.bg",
-        "&:not([data-loading], [aria-busy=true])": {
-          bgColor: "badge.purple_alt.bg"
-        },
-        color: "badge.purple_alt.fg"
-      },
-      blue_alt: {
-        bgColor: "badge.blue_alt.bg",
-        "&:not([data-loading], [aria-busy=true])": {
-          bgColor: "badge.blue_alt.bg"
-        },
-        color: "badge.blue_alt.fg"
-      }
-    },
-    size: {
-      md: {
-        textStyle: "sm",
-        px: "1",
-        py: "0.5",
-        minH: "6"
-      }
-    }
-  },
-  defaultVariants: {
-    variant: "subtle",
-    colorPalette: "gray",
-    size: "md"
-  }
-});
-export {
-  g as recipe
-};