pantoken / components

components ​

Beta

@pantoken/components — một thư viện component CSS theo giao diện InstUI, được xây dựng từ các token --instui-*.

Các stylesheet được phân phối:

  • Base (baseCss) — các mặc định toàn cục tùy chọn cho tài liệu lấy từ token (box-sizing, đặt lại body , bề mặt trang, màu/chữ cơ bản, color-scheme). Nó cũng mang theo vòng focus-outline, nên mọi phần tử có thể lấy focus đều có outline :focus-visible truy cập được ngay từ đầu. Tải nó khi pantoken quản lý trang.
  • Prose (proseCss) — style cho markdown/HTML prose đã render (bảng, tiêu đề, liên kết, danh sách, code) được phạm vi hóa tới một gốc nội dung, nên một trang tài liệu hoặc vùng nội dung trông như InstUI mà không cần thay thế DOM bằng các component. Đây là thứ mà các renderer site phát hành như components.css của họ.
  • Components (buttonCss, alertCss, badgeCss, tổng hợp bởi componentsCss) — các style component theo class bạn áp dụng lên markup của riêng bạn (<button class="instui-button">), cho diện mạo InstUI ngoài framework component. Thang độ bóng đổ --instui-elevation-* (elevationCss) dẫn dắt stylesheet này, vì nhiều component nổi đủ để bóng đổ trở thành thuộc tính thiết kế nội tại thay vì một phần bổ sung.
  • Utilities (viewCss, spacingUtilitiesCss, gapCss, layoutUtilitiesCss, cùng một tập token/màu ngữ nghĩa tuyển chọn) — một lớp tùy chọn các class xuyên cắt. Trình phát token→class tổng quát (colorUtilitiesCss, tokenUtilitiesCss) nằm trong @pantoken/utils; gói này cung cấp cho chúng các tên ngữ nghĩa đã tuyển chọn, trong khi @pantoken/plugin-primitives cung cấp bảng màu thô.
  • Fonts (tùy chọn fonts.css) — các quy tắc @font-face cho font thương hiệu Instructure. Base áp dụng font; fonts.css tải các woff2, nên văn bản sẽ xuống cấp một cách duyên dáng khi không có chúng.

Mọi thứ đều là CSS thuần được sinh ra từ IR token, nên nó theo kịp InstUI thông qua các token mà không phụ thuộc vào các package React của InstUI. Để có các component tương tác thực sự, dùng @pantoken/react-markdown (nội dung) hoặc @instructure/ui-* (ứng dụng).

Module này là một barrel: mỗi record có tài liệu nằm trong file riêng dưới components//utilities//rules//declarations/, được soạn thảo bằng API compose lib/. Các registry (COMPONENTS/UTILITIES/RULES/DECLARATIONS) điều khiển việc tổng hợp + bài kiểm tra parity.

Giao diện ​

Biến ​

Hàm ​