@bigtablet/design-system

大表设计系统

统一的UI图书馆为Bigtablet产品提供动力.
工作为明. 以符为所建. 有暗模式的飞船.

文档  • 妇女  故事书  • 妇女  国家预防机制  • 妇女  🇰🇷

import { ThemeProvider, Button, Modal, useToast } from "@bigtablet/design-system";
// No CSS import needed - each component brings its own CSS plus the shared theme variables,
// so a page that uses only Button ships about 3 kB of DS CSS (gzip) instead of 20 kB.
// Next.js with webpack: add the package to `experimental.optimizePackageImports` (Turbopack needs nothing).

export default function App() {
  const toast = useToast();
  return (
    <ThemeProvider>
      <Button onClick={() => toast.success("Saved")}>Save</Button>
    </ThemeProvider>
  );
}

由Bigtablet为内部产品工作维护的完整React + TypeScript设计系统. 开源参考-外部使用欢迎,但小版本可能包括断开更改.

里面的东西

• 40+组件 横跨窗体、显示、反馈、导航、覆盖和布局
  
• 13个符号域 - 颜色、打字、相距、运动、半径、高程等 -- -- 暴露在SCSS变量和CSS自定义属性中(加上只显示SCSS) layout 域名)
  
• 光 + 暗模式 从盒子里出来. [data-theme="dark"] 或者说 prefers-color-scheme,不需要主题提供者(但可通过 ThemeProvider 用于运行时间拖动)
  
• 香草JS捆绑 非反应后端 - Thymeleaf, JSP, PHP, Django
  
• 测试无障碍性 cI 键盘导航中的轴分数

安装

pnpm add @bigtablet/design-system react@^19 react-dom@^19 lucide-react

要求反应19 + 清晰反应 + 0.552. Next.js 是一个可选的对等依赖,时间为 >=15。 。 。 .

curl -fsSL https://raw.githubusercontent.com/Bigtablet/bigtablet-design-system/main/scripts/setup.sh | sh

供应商

import { ThemeProvider, AlertProvider, ToastProvider } from "@bigtablet/design-system";

<ThemeProvider>
  <AlertProvider>
    <ToastProvider>{children}</ToastProvider>
  </AlertProvider>
</ThemeProvider>

随处取用钩:

const toast = useToast();
const { showAlert } = useAlert();

toast.success("Saved");
showAlert({ title: "Delete?", showCancel: true, onConfirm: ... });

构成部分

* 完全API docs/COMPONENTS.md

设计符号

@use "@bigtablet/design-system/scss/token" as token;

.card {
  background: token.$color_bg_solid;
  color: token.$color_text_heading;
  padding: token.$spacing_16;
  border-radius: token.$radius_md;
  box-shadow: token.$elevation_level1;
}

/* from @bigtablet/design-system/style.css */
.card {
  background: var(--bt-color-bg-solid);
  color: var(--bt-color-text-heading);
  border: 1px solid var(--bt-color-border-default);
  box-shadow: var(--bt-elevation-level1);
}

反应条目 style.css 只发出 --bt-color-*, (中文(简体) ), --bt-elevation-*, (中文(简体) ), --bt-focus-*, (中文(简体) ), --bt-sidebar-*, (中文(简体) ), --bt-bottom-nav-*, (中文(简体) ), --bt-bottom-inset*, (中文(简体) ), --bt-scrollbar-width, (中文(简体) ), --bt-z-*, (中文(简体) ), --bt-radius-*, (中文(简体) ), --bt-spacing-*, (中文(简体) ), --bt-font-family字体大小和行高为 仅限SCSS 在本条目上 - 使用 scss/token 打字混音器( x)--bt-font-size-* 仅存在于 香草捆绑) (中文(简体) ).

colors • 妇女 spacing • 妇女 typography • 妇女 radius • 妇女 elevation • 妇女 motion • 妇女 z-index • 妇女 breakpoints • 妇女 border-width • 妇女 opacity • 妇女 skeleton • 妇女 icon • 妇女 a11y • 妇女 layout^{仅限常设委员会}

尾风 CSS (v4)

/* app/globals.css - import before tailwindcss so the layer order is fixed first */
@import "@bigtablet/design-system/tailwind.css";
@import "tailwindcss";

import "@bigtablet/design-system/style.css"; // defines the --bt-* values
<p className="text-bt-text-heading shadow-bt-level2 dark:bg-bt-bg-solid" />

tailwind.css 地图 --bt-color-* 改为 --color-bt-*, (中文(简体) ), --bt-elevation-* 编号 : --bt-focus-ring* 改为 --shadow-bt-*, (中文(简体) ), --bt-radius-* 改为 --radius-bt-* (单位:千美元)rounded-bt-md, (中文(简体) ), --bt-spacing-* 改为 --spacing-bt-* (单位:千美元)p-bt-16和 --bt-font-family 改为 --font-bt (单位:千美元)font-bt(价值不变) var(),因此暗模式和您的覆被随之而来 dark: 匹配主题data-theme="dark",或操作系统在 data-theme 已设置 。 构成部分CSS生活在 bigtablet 级联层 (theme, base, reset, bigtablet, components, utilities所以公用设施 和你自己的无层CSS 超过它 没有特定的战斗: <Button className="bg-bt-text-brand" />。元素选择器重置* { padding: 0 }, (中文(简体) ), button { background: none })和全球焦点风格(:focus-visible { outline: 2px solid ... }必须进去 @layer reset { ... } - 没有层次,他们击败每个DS组件,和一个全球 :focus-visible 大纲被绘制在DS焦点环上方(一双环).

香草联署材料

对于服务器的应用程序(Thymeleaf、JSP、PHP、Django):

<link rel="stylesheet" href="https://unpkg.com/@bigtablet/design-system/dist/vanilla/bigtablet.min.css">
<script src="https://unpkg.com/@bigtablet/design-system/dist/vanilla/bigtablet.min.js"></script>

<button class="bt-button bt-button--md bt-button--filled">Filled</button>

——全向导 docs/VANILLA.md

发展

pnpm install
pnpm storybook        # localhost:6006
pnpm test             # Vitest unit
pnpm test:storybook   # a11y + Playwright
pnpm build            # tsup + SCSS copy

出版的《童话》 bigtablet.github.io/大表设计系统 并调出 main。 。 。 .

文档

许可证

凭 大表牌许可证。 。 。 .