Tokens, typography, and components for WordPress admin plugins.
Scope: .wads wrapper — Amber Bronze accent — Lora + Plus Jakarta Sans
Color Tokens
Typography
Lead paragraph — This is a lead text that introduces a section with a slightly larger, relaxed line height for comfortable reading in an admin context.
Body text — Regular paragraph with anchor link, bold text, and italic copy. Designed for readability at small sizes in the WordPress admin environment.
Muted text — Used for secondary information, timestamps, and peripheral details that support the main content without competing with it.
Caption label — Table headers, section labels
Inline code: $order->get_meta('_bsale_document_id')
// PHP example
$payload = [
'codeSii' => 39,
'referenceId' => 'woo_' . $order->get_id(),
'dispatch' => 1,
];Blockquote — used for important notes, warnings, or quoted content that needs visual separation from the surrounding text.
Buttons
Badges
Notices
Form Elements
API Configuration
Connect your Bsale account
Tabs
Table
| Order | Document | Type | Status | Attempts | Actions |
|---|---|---|---|---|---|
| #1055 | 3421 / Folio 3421 | Boleta | Issued | 1 | |
| #1054 | — | Factura | Pending | 2 | |
| #1053 | — | Boleta | Failed | 3 | |
| #1052 | 3418 | Nota crédito | Void | 1 |
Settings Page Layout
Configure your WooCommerce integration with Bsale electronic documents.
API Connection
Credentials and environment for the Bsale API.
Stat Cards & Progress
Modal
This will attempt to re-issue the DTE for order #1054 (Factura, 2 previous attempts).
Empty State & Spinner
No documents yet
Documents will appear here once orders are completed and DTEs are generated in Bsale.
Accordion
When a DTE fails to generate, it's queued for automatic retry. The Pro edition retries up to 3 times with exponential backoff: 15 min, 1 hour, and 6 hours. After 3 attempts, the document is marked as permanently failed and an admin notice is shown.
The cpnId is Bsale's company identifier. The first valid webhook registers it automatically. All subsequent webhooks from a different company are rejected with HTTP 403 to prevent data mixing. To reset it, delete the bsale_dte_cpn_id option from the database.
Sandbox uses api.bsale.dev. Documents created there don't go to SII and don't generate real folios. Always test in sandbox before going live. Your sandbox token and production token are different — check your Bsale account.
Dropdown Menu
Search & Chips
Breadcrumbs & Pagination
Key-Value List & Timeline
Document details
Activity timeline
Callout & Steps
Before going live
Make sure to test your full order flow in sandbox mode first. Switch to production only when you've confirmed boletas and facturas generate correctly, stock decrements as expected, and webhook events are received.
Pro feature: Multi-office routing
Map WooCommerce shipping methods to different Bsale offices. Orders shipped via "Store Pickup" can generate documents from a different office than "Home Delivery" orders.
Copy Block & API Reference
require "vendor/autoload.php";
use UserDOMP\WpAdminDS\Components;
add_action("admin_enqueue_scripts", function() {
DesignSystem::enqueue(DesignSystem::assets_url(__FILE__));
});