@assure-one/design-system 1.38.0 → 1.40.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +63 -28
- package/codemods/README.md +76 -25
- package/codemods/lib/entry-map.mjs +315 -0
- package/codemods/lib/registry.mjs +28 -0
- package/codemods/lib/runner.mjs +8 -3
- package/codemods/run.mjs +27 -5
- package/codemods/transforms/cm-01-entry-imports.mjs +202 -0
- package/codemods/transforms/cm-15-dom-selectors.mjs +16 -9
- package/dist/brand-scope-BOHId6BY.d.ts +58 -0
- package/dist/brand-theme-ZYM867Jz.d.ts +59 -0
- package/dist/chunk-2MKLYYIY.js +3754 -0
- package/dist/chunk-2MKLYYIY.js.map +1 -0
- package/dist/chunk-6S2R2VWN.js +5527 -0
- package/dist/chunk-6S2R2VWN.js.map +1 -0
- package/dist/chunk-7U3ADR2Q.js +4336 -0
- package/dist/chunk-7U3ADR2Q.js.map +1 -0
- package/dist/chunk-CPOGSNXS.js +389 -0
- package/dist/chunk-CPOGSNXS.js.map +1 -0
- package/dist/chunk-EUHGZA6Q.js +313 -0
- package/dist/chunk-EUHGZA6Q.js.map +1 -0
- package/dist/chunk-KQBYTTAN.js +1829 -0
- package/dist/chunk-KQBYTTAN.js.map +1 -0
- package/dist/chunk-X76J4QSJ.js +164 -0
- package/dist/chunk-X76J4QSJ.js.map +1 -0
- package/dist/css/components.css +1 -1
- package/dist/css/legacy-aliases.css +2 -0
- package/dist/css/tailwind.css +2 -0
- package/dist/css/tokens.css +8 -6
- package/dist/data-table-view-ep8al7P9.d.ts +1132 -0
- package/dist/design-system-provider-CfD2g2lY.d.ts +142 -0
- package/dist/icons/index.d.ts +441 -3
- package/dist/icons/index.js +2 -1835
- package/dist/icons/index.js.map +1 -1
- package/dist/index.d.ts +404 -3847
- package/dist/index.js +8728 -24213
- package/dist/index.js.map +1 -1
- package/dist/legacy/index.d.ts +1464 -0
- package/dist/legacy/index.js +7 -0
- package/dist/legacy/index.js.map +1 -0
- package/dist/next/index.d.ts +2 -1
- package/dist/reference-BkDbrPIB.d.ts +310 -0
- package/dist/styles.css +2 -1
- package/dist/suite/index.d.ts +989 -0
- package/dist/suite/index.js +8 -0
- package/dist/suite/index.js.map +1 -0
- package/dist/{system-CyAVbHhM.d.ts → system-DfJIVBlJ.d.ts} +1 -310
- package/dist/testing/index.cjs +3 -2
- package/dist/testing/index.js +3 -2
- package/dist/tokens/index.d.ts +3 -61
- package/dist/tokens/index.js +3 -856
- package/dist/tokens/index.js.map +1 -1
- package/dist/{design-system-provider-B5MbvbRc.d.ts → types-Coqw8iaS.d.ts} +36 -142
- package/dist/vocab-DornLJbW.d.ts +76 -0
- package/docs/components.md +54 -52
- package/docs/components.registry.json +22 -8
- package/docs/for-ai-agents.md +12 -6
- package/package.json +17 -4
- package/public/brand/assure-audit-mark.svg +6 -0
- package/public/brand/assure-audit.svg +8 -0
- package/public/brand/assure-books-mark.svg +6 -0
- package/public/brand/assure-books.svg +8 -0
- package/public/brand/assure-pro-mark.svg +6 -0
- package/public/brand/assure-pro.svg +8 -0
- package/public/brand/assure-tax-mark.svg +6 -0
- package/public/brand/assure-tax.svg +8 -0
- package/public/brand/mycpe-teams-mark.svg +36 -0
- package/public/brand/mycpe-teams.svg +66 -0
- package/dist/index-vztxMSfl.d.ts +0 -512
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
export { AgreementPaneHeading, AgreementViewer, AssureAuditBrandIcon, AssureBooksBrandIcon, AssureProBrandIcon, AssureTaxBrandIcon, BRAND_PRODUCTS, ClientSelect, ComingSoon, Grid, Logo, ProposalAddOn, ProposalBillingTerms, ProposalConsentGate, ProposalCustomPage, ProposalNote, ProposalPackageCard, ProposalPaymentCapture, ProposalPricingSummary, ProposalServiceRow, ProposalSignatureBlock, ProposalSignerList, QUESTION_TYPES, QUESTION_TYPE_CONTRACT_VERSION, Questions, SidebarBrandSwitcher, SidebarBrandSwitcherTile, brandLabel } from '../chunk-7U3ADR2Q.js';
|
|
3
|
+
export { DocumentDetailActions, DocumentDetailBody, DocumentDetailHeader, DocumentDetailMetaRow, DocumentDetailPanel, DocumentDetailRequester, DocumentDetailTitle, DocumentList, DocumentListSection, DocumentRow } from '../chunk-2MKLYYIY.js';
|
|
4
|
+
import '../chunk-KQBYTTAN.js';
|
|
5
|
+
import '../chunk-EUHGZA6Q.js';
|
|
6
|
+
import '../chunk-X76J4QSJ.js';
|
|
7
|
+
//# sourceMappingURL=index.js.map
|
|
8
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}
|
|
@@ -1,312 +1,3 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Reference tokens — raw palette.
|
|
3
|
-
*
|
|
4
|
-
* Programmatic access for theme switching, Figma sync, design tools, etc.
|
|
5
|
-
* Components should NOT consume these directly; use system tokens (./system.ts)
|
|
6
|
-
* or the CSS variables in ./tokens.css.
|
|
7
|
-
*/
|
|
8
|
-
declare const colors: {
|
|
9
|
-
readonly bg: "#ffffff";
|
|
10
|
-
readonly bg2: "#f1f3f8";
|
|
11
|
-
readonly bg3: "#e7eaf1";
|
|
12
|
-
readonly surface: "#ffffff";
|
|
13
|
-
readonly surface2: "#f7f8fc";
|
|
14
|
-
readonly fg: "#0a0a0a";
|
|
15
|
-
readonly fg2: "#38383b";
|
|
16
|
-
readonly fg3: "#5f5f64";
|
|
17
|
-
readonly fg4: "#6b6b70";
|
|
18
|
-
readonly fg5: "#9a9aa0";
|
|
19
|
-
readonly rule: "#e4e7ef";
|
|
20
|
-
readonly ruleSoft: "#eef0f5";
|
|
21
|
-
readonly ruleStrong: "#d3d8e3";
|
|
22
|
-
readonly accent: "#6c42f8";
|
|
23
|
-
readonly accent2: "#5127e8";
|
|
24
|
-
readonly accentTint: "#efeaff";
|
|
25
|
-
readonly accentHover: "#5e35f2";
|
|
26
|
-
readonly accentActive: "#5127e8";
|
|
27
|
-
readonly proBg: "#f4f1ff";
|
|
28
|
-
readonly proBgHover: "#eee9ff";
|
|
29
|
-
readonly proBgActive: "#e4ddff";
|
|
30
|
-
readonly proFg: "#6c42f8";
|
|
31
|
-
readonly proHover: "#5e35f2";
|
|
32
|
-
readonly proActive: "#5127e8";
|
|
33
|
-
readonly proDisabled: "#b7a7f3";
|
|
34
|
-
readonly proLine: "#7b5bd8";
|
|
35
|
-
readonly fgDisabled: "#a7a7ac";
|
|
36
|
-
readonly bgDisabled: "#f1f2f6";
|
|
37
|
-
readonly successFg: "#1f7a3d";
|
|
38
|
-
readonly successBg: "#eaf6ee";
|
|
39
|
-
readonly successLine: "#c5e5cf";
|
|
40
|
-
readonly warningFg: "#8a4606";
|
|
41
|
-
readonly warningBg: "#fff3e5";
|
|
42
|
-
readonly warningLine: "#f5d5a8";
|
|
43
|
-
readonly dangerFg: "#c43838";
|
|
44
|
-
readonly dangerBg: "#fbeaea";
|
|
45
|
-
readonly dangerLine: "#ecc5c5";
|
|
46
|
-
readonly fgOnAccent: "#ffffff";
|
|
47
|
-
readonly fgOnPro: "#ffffff";
|
|
48
|
-
};
|
|
49
|
-
declare const typography: {
|
|
50
|
-
readonly family: {
|
|
51
|
-
readonly display: "\"Plus Jakarta Sans\", -apple-system, system-ui, sans-serif";
|
|
52
|
-
readonly body: "\"Plus Jakarta Sans\", -apple-system, system-ui, sans-serif";
|
|
53
|
-
readonly mono: "\"Plus Jakarta Sans\", -apple-system, system-ui, sans-serif";
|
|
54
|
-
};
|
|
55
|
-
readonly weight: {
|
|
56
|
-
readonly regular: 400;
|
|
57
|
-
readonly medium: 500;
|
|
58
|
-
readonly semibold: 600;
|
|
59
|
-
readonly bold: 700;
|
|
60
|
-
};
|
|
61
|
-
readonly ease: "cubic-bezier(0.25, 1, 0.5, 1)";
|
|
62
|
-
};
|
|
63
|
-
declare const radii: {
|
|
64
|
-
readonly btn: "7px";
|
|
65
|
-
readonly input: "7px";
|
|
66
|
-
readonly pill: "5px";
|
|
67
|
-
readonly card: "12px";
|
|
68
|
-
readonly icon: "4px";
|
|
69
|
-
readonly full: "9999px";
|
|
70
|
-
};
|
|
71
|
-
declare const shadows: {
|
|
72
|
-
readonly quiet: "0 1px 1px rgba(16, 20, 36, 0.03), 0 1px 3px rgba(16, 20, 36, 0.05)";
|
|
73
|
-
readonly card: "0 1px 2px rgba(16, 20, 36, 0.04), 0 2px 4px -2px rgba(16, 20, 36, 0.04), 0 8px 16px -6px rgba(16, 20, 36, 0.08)";
|
|
74
|
-
readonly pop: "0 0 0 1px rgba(16, 20, 36, 0.04), 0 2px 4px -1px rgba(16, 20, 36, 0.05), 0 6px 12px -3px rgba(16, 20, 36, 0.07), 0 16px 32px -8px rgba(16, 20, 36, 0.12)";
|
|
75
|
-
readonly focusRing: "0 0 0 2px #ffffff, 0 0 0 4px #6c42f8";
|
|
76
|
-
};
|
|
77
|
-
declare const overlays: {
|
|
78
|
-
readonly hover: "rgba(16, 20, 36, 0.04)";
|
|
79
|
-
readonly active: "rgba(16, 20, 36, 0.07)";
|
|
80
|
-
};
|
|
81
|
-
declare const layout: {
|
|
82
|
-
readonly shellSidebarWidth: "200px";
|
|
83
|
-
readonly shellHeaderHeight: "56px";
|
|
84
|
-
readonly contentPad: "32px";
|
|
85
|
-
};
|
|
86
|
-
/**
|
|
87
|
-
* Spacing — 4px base scale. Components mostly use arbitrary values;
|
|
88
|
-
* this scale is exposed for programmatic access (e.g. design-tool sync).
|
|
89
|
-
*/
|
|
90
|
-
declare const spacing: {
|
|
91
|
-
readonly unit: "4px";
|
|
92
|
-
readonly 4: "4px";
|
|
93
|
-
readonly 8: "8px";
|
|
94
|
-
readonly 12: "12px";
|
|
95
|
-
readonly 16: "16px";
|
|
96
|
-
readonly 20: "20px";
|
|
97
|
-
readonly 24: "24px";
|
|
98
|
-
readonly 28: "28px";
|
|
99
|
-
readonly 32: "32px";
|
|
100
|
-
readonly 36: "36px";
|
|
101
|
-
readonly 40: "40px";
|
|
102
|
-
readonly 64: "64px";
|
|
103
|
-
readonly 80: "80px";
|
|
104
|
-
readonly 180: "180px";
|
|
105
|
-
};
|
|
106
|
-
/**
|
|
107
|
-
* Surface palette — the four canonical layers. Mirrors --color-bg / -2 /
|
|
108
|
-
* --color-surface / --color-surface-2.
|
|
109
|
-
*/
|
|
110
|
-
declare const surfaces: {
|
|
111
|
-
readonly bg: "#ffffff";
|
|
112
|
-
readonly bg2: "#f1f3f8";
|
|
113
|
-
readonly surface: "#ffffff";
|
|
114
|
-
readonly surface2: "#f7f8fc";
|
|
115
|
-
};
|
|
116
|
-
declare const motion: {
|
|
117
|
-
readonly ease: {
|
|
118
|
-
readonly outQuart: "cubic-bezier(0.25, 1, 0.5, 1)";
|
|
119
|
-
readonly out: "cubic-bezier(0.16, 1, 0.3, 1)";
|
|
120
|
-
readonly in: "cubic-bezier(0.7, 0, 0.84, 0)";
|
|
121
|
-
readonly inOut: "cubic-bezier(0.65, 0, 0.35, 1)";
|
|
122
|
-
};
|
|
123
|
-
readonly duration: {
|
|
124
|
-
readonly instant: "100ms";
|
|
125
|
-
readonly fast: "150ms";
|
|
126
|
-
readonly normal: "250ms";
|
|
127
|
-
readonly slow: "400ms";
|
|
128
|
-
};
|
|
129
|
-
};
|
|
130
|
-
/**
|
|
131
|
-
* Icon boxes — the four sizes of target architecture §9.3. These are the boxes
|
|
132
|
-
* the library actually draws; `Icon`'s `size` prop maps onto them (W3-18).
|
|
133
|
-
*/
|
|
134
|
-
declare const iconSizes: {
|
|
135
|
-
readonly xs: "12px";
|
|
136
|
-
readonly sm: "14px";
|
|
137
|
-
readonly md: "16px";
|
|
138
|
-
readonly lg: "20px";
|
|
139
|
-
};
|
|
140
|
-
/**
|
|
141
|
-
* Global stacking layers — target architecture §21. Use them only for
|
|
142
|
-
* portalled surfaces and page chrome; anything else creates a local stacking
|
|
143
|
-
* context and uses small local integers.
|
|
144
|
-
*
|
|
145
|
-
* `popover` is the layer the CSS still spells `--z-dropdown`; the legacy name
|
|
146
|
-
* keeps working and resolves to the same value.
|
|
147
|
-
*/
|
|
148
|
-
declare const zIndex: {
|
|
149
|
-
readonly base: 0;
|
|
150
|
-
readonly sticky: 100;
|
|
151
|
-
readonly overlay: 200;
|
|
152
|
-
readonly modal: 300;
|
|
153
|
-
readonly popover: 400;
|
|
154
|
-
readonly toast: 500;
|
|
155
|
-
readonly tooltip: 600;
|
|
156
|
-
};
|
|
157
|
-
/**
|
|
158
|
-
* Breakpoints — Tailwind's defaults, restated so a media query built in JS
|
|
159
|
-
* (`useBreakpoint`, a chart's responsive config) reads the same numbers the
|
|
160
|
-
* `sm:`…`2xl:` variants do.
|
|
161
|
-
*/
|
|
162
|
-
declare const breakpoints: {
|
|
163
|
-
readonly sm: "40rem";
|
|
164
|
-
readonly md: "48rem";
|
|
165
|
-
readonly lg: "64rem";
|
|
166
|
-
readonly xl: "80rem";
|
|
167
|
-
readonly "2xl": "96rem";
|
|
168
|
-
};
|
|
169
|
-
declare const reference: {
|
|
170
|
-
readonly colors: {
|
|
171
|
-
readonly bg: "#ffffff";
|
|
172
|
-
readonly bg2: "#f1f3f8";
|
|
173
|
-
readonly bg3: "#e7eaf1";
|
|
174
|
-
readonly surface: "#ffffff";
|
|
175
|
-
readonly surface2: "#f7f8fc";
|
|
176
|
-
readonly fg: "#0a0a0a";
|
|
177
|
-
readonly fg2: "#38383b";
|
|
178
|
-
readonly fg3: "#5f5f64";
|
|
179
|
-
readonly fg4: "#6b6b70";
|
|
180
|
-
readonly fg5: "#9a9aa0";
|
|
181
|
-
readonly rule: "#e4e7ef";
|
|
182
|
-
readonly ruleSoft: "#eef0f5";
|
|
183
|
-
readonly ruleStrong: "#d3d8e3";
|
|
184
|
-
readonly accent: "#6c42f8";
|
|
185
|
-
readonly accent2: "#5127e8";
|
|
186
|
-
readonly accentTint: "#efeaff";
|
|
187
|
-
readonly accentHover: "#5e35f2";
|
|
188
|
-
readonly accentActive: "#5127e8";
|
|
189
|
-
readonly proBg: "#f4f1ff";
|
|
190
|
-
readonly proBgHover: "#eee9ff";
|
|
191
|
-
readonly proBgActive: "#e4ddff";
|
|
192
|
-
readonly proFg: "#6c42f8";
|
|
193
|
-
readonly proHover: "#5e35f2";
|
|
194
|
-
readonly proActive: "#5127e8";
|
|
195
|
-
readonly proDisabled: "#b7a7f3";
|
|
196
|
-
readonly proLine: "#7b5bd8";
|
|
197
|
-
readonly fgDisabled: "#a7a7ac";
|
|
198
|
-
readonly bgDisabled: "#f1f2f6";
|
|
199
|
-
readonly successFg: "#1f7a3d";
|
|
200
|
-
readonly successBg: "#eaf6ee";
|
|
201
|
-
readonly successLine: "#c5e5cf";
|
|
202
|
-
readonly warningFg: "#8a4606";
|
|
203
|
-
readonly warningBg: "#fff3e5";
|
|
204
|
-
readonly warningLine: "#f5d5a8";
|
|
205
|
-
readonly dangerFg: "#c43838";
|
|
206
|
-
readonly dangerBg: "#fbeaea";
|
|
207
|
-
readonly dangerLine: "#ecc5c5";
|
|
208
|
-
readonly fgOnAccent: "#ffffff";
|
|
209
|
-
readonly fgOnPro: "#ffffff";
|
|
210
|
-
};
|
|
211
|
-
readonly typography: {
|
|
212
|
-
readonly family: {
|
|
213
|
-
readonly display: "\"Plus Jakarta Sans\", -apple-system, system-ui, sans-serif";
|
|
214
|
-
readonly body: "\"Plus Jakarta Sans\", -apple-system, system-ui, sans-serif";
|
|
215
|
-
readonly mono: "\"Plus Jakarta Sans\", -apple-system, system-ui, sans-serif";
|
|
216
|
-
};
|
|
217
|
-
readonly weight: {
|
|
218
|
-
readonly regular: 400;
|
|
219
|
-
readonly medium: 500;
|
|
220
|
-
readonly semibold: 600;
|
|
221
|
-
readonly bold: 700;
|
|
222
|
-
};
|
|
223
|
-
readonly ease: "cubic-bezier(0.25, 1, 0.5, 1)";
|
|
224
|
-
};
|
|
225
|
-
readonly radii: {
|
|
226
|
-
readonly btn: "7px";
|
|
227
|
-
readonly input: "7px";
|
|
228
|
-
readonly pill: "5px";
|
|
229
|
-
readonly card: "12px";
|
|
230
|
-
readonly icon: "4px";
|
|
231
|
-
readonly full: "9999px";
|
|
232
|
-
};
|
|
233
|
-
readonly shadows: {
|
|
234
|
-
readonly quiet: "0 1px 1px rgba(16, 20, 36, 0.03), 0 1px 3px rgba(16, 20, 36, 0.05)";
|
|
235
|
-
readonly card: "0 1px 2px rgba(16, 20, 36, 0.04), 0 2px 4px -2px rgba(16, 20, 36, 0.04), 0 8px 16px -6px rgba(16, 20, 36, 0.08)";
|
|
236
|
-
readonly pop: "0 0 0 1px rgba(16, 20, 36, 0.04), 0 2px 4px -1px rgba(16, 20, 36, 0.05), 0 6px 12px -3px rgba(16, 20, 36, 0.07), 0 16px 32px -8px rgba(16, 20, 36, 0.12)";
|
|
237
|
-
readonly focusRing: "0 0 0 2px #ffffff, 0 0 0 4px #6c42f8";
|
|
238
|
-
};
|
|
239
|
-
readonly overlays: {
|
|
240
|
-
readonly hover: "rgba(16, 20, 36, 0.04)";
|
|
241
|
-
readonly active: "rgba(16, 20, 36, 0.07)";
|
|
242
|
-
};
|
|
243
|
-
readonly layout: {
|
|
244
|
-
readonly shellSidebarWidth: "200px";
|
|
245
|
-
readonly shellHeaderHeight: "56px";
|
|
246
|
-
readonly contentPad: "32px";
|
|
247
|
-
};
|
|
248
|
-
readonly motion: {
|
|
249
|
-
readonly ease: {
|
|
250
|
-
readonly outQuart: "cubic-bezier(0.25, 1, 0.5, 1)";
|
|
251
|
-
readonly out: "cubic-bezier(0.16, 1, 0.3, 1)";
|
|
252
|
-
readonly in: "cubic-bezier(0.7, 0, 0.84, 0)";
|
|
253
|
-
readonly inOut: "cubic-bezier(0.65, 0, 0.35, 1)";
|
|
254
|
-
};
|
|
255
|
-
readonly duration: {
|
|
256
|
-
readonly instant: "100ms";
|
|
257
|
-
readonly fast: "150ms";
|
|
258
|
-
readonly normal: "250ms";
|
|
259
|
-
readonly slow: "400ms";
|
|
260
|
-
};
|
|
261
|
-
};
|
|
262
|
-
readonly spacing: {
|
|
263
|
-
readonly unit: "4px";
|
|
264
|
-
readonly 4: "4px";
|
|
265
|
-
readonly 8: "8px";
|
|
266
|
-
readonly 12: "12px";
|
|
267
|
-
readonly 16: "16px";
|
|
268
|
-
readonly 20: "20px";
|
|
269
|
-
readonly 24: "24px";
|
|
270
|
-
readonly 28: "28px";
|
|
271
|
-
readonly 32: "32px";
|
|
272
|
-
readonly 36: "36px";
|
|
273
|
-
readonly 40: "40px";
|
|
274
|
-
readonly 64: "64px";
|
|
275
|
-
readonly 80: "80px";
|
|
276
|
-
readonly 180: "180px";
|
|
277
|
-
};
|
|
278
|
-
readonly surfaces: {
|
|
279
|
-
readonly bg: "#ffffff";
|
|
280
|
-
readonly bg2: "#f1f3f8";
|
|
281
|
-
readonly surface: "#ffffff";
|
|
282
|
-
readonly surface2: "#f7f8fc";
|
|
283
|
-
};
|
|
284
|
-
readonly iconSizes: {
|
|
285
|
-
readonly xs: "12px";
|
|
286
|
-
readonly sm: "14px";
|
|
287
|
-
readonly md: "16px";
|
|
288
|
-
readonly lg: "20px";
|
|
289
|
-
};
|
|
290
|
-
readonly zIndex: {
|
|
291
|
-
readonly base: 0;
|
|
292
|
-
readonly sticky: 100;
|
|
293
|
-
readonly overlay: 200;
|
|
294
|
-
readonly modal: 300;
|
|
295
|
-
readonly popover: 400;
|
|
296
|
-
readonly toast: 500;
|
|
297
|
-
readonly tooltip: 600;
|
|
298
|
-
};
|
|
299
|
-
readonly breakpoints: {
|
|
300
|
-
readonly sm: "40rem";
|
|
301
|
-
readonly md: "48rem";
|
|
302
|
-
readonly lg: "64rem";
|
|
303
|
-
readonly xl: "80rem";
|
|
304
|
-
readonly "2xl": "96rem";
|
|
305
|
-
};
|
|
306
|
-
};
|
|
307
|
-
type ReferenceTokens = typeof reference;
|
|
308
|
-
type ColorName = keyof typeof colors;
|
|
309
|
-
|
|
310
1
|
/**
|
|
311
2
|
* System tokens — suite semantic mappings as CSS variable references.
|
|
312
3
|
*
|
|
@@ -556,4 +247,4 @@ declare const systemTokens: {
|
|
|
556
247
|
};
|
|
557
248
|
type SystemTokens = typeof systemTokens;
|
|
558
249
|
|
|
559
|
-
export { type
|
|
250
|
+
export { type SystemTokens as S, systemTokens as s };
|
package/dist/testing/index.cjs
CHANGED
|
@@ -208,10 +208,11 @@ function read(el) {
|
|
|
208
208
|
}
|
|
209
209
|
const chip = el.querySelector('span[aria-hidden="true"]');
|
|
210
210
|
const body = chip?.nextElementSibling ?? null;
|
|
211
|
-
const
|
|
211
|
+
const children = Array.from(body?.children ?? []);
|
|
212
|
+
const paragraphs = children.filter((c) => c.tagName === "P");
|
|
212
213
|
const title = paragraphs.find((p) => p.classList.contains(TITLE_CLASS));
|
|
213
214
|
const description = paragraphs.find((p) => p !== title);
|
|
214
|
-
const action =
|
|
215
|
+
const action = children.find((c) => c.tagName === "BUTTON") ?? null;
|
|
215
216
|
let variant = "default";
|
|
216
217
|
if (role === "alert") variant = "destructive";
|
|
217
218
|
else if (hasClass(chip, LOADING_CLASS)) variant = "loading";
|
package/dist/testing/index.js
CHANGED
|
@@ -206,10 +206,11 @@ function read(el) {
|
|
|
206
206
|
}
|
|
207
207
|
const chip = el.querySelector('span[aria-hidden="true"]');
|
|
208
208
|
const body = chip?.nextElementSibling ?? null;
|
|
209
|
-
const
|
|
209
|
+
const children = Array.from(body?.children ?? []);
|
|
210
|
+
const paragraphs = children.filter((c) => c.tagName === "P");
|
|
210
211
|
const title = paragraphs.find((p) => p.classList.contains(TITLE_CLASS));
|
|
211
212
|
const description = paragraphs.find((p) => p !== title);
|
|
212
|
-
const action =
|
|
213
|
+
const action = children.find((c) => c.tagName === "BUTTON") ?? null;
|
|
213
214
|
let variant = "default";
|
|
214
215
|
if (role === "alert") variant = "destructive";
|
|
215
216
|
else if (hasClass(chip, LOADING_CLASS)) variant = "loading";
|
package/dist/tokens/index.d.ts
CHANGED
|
@@ -1,61 +1,3 @@
|
|
|
1
|
-
export { C as ColorName, R as ReferenceTokens,
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
* The seed a host supplies per tenant.
|
|
5
|
-
*
|
|
6
|
-
* @experimental Gated by decision D7.
|
|
7
|
-
*/
|
|
8
|
-
interface BrandThemeSeed {
|
|
9
|
-
/**
|
|
10
|
-
* The brand fill, as `#rgb` or `#rrggbb`. Drives the `action.brand` family,
|
|
11
|
-
* the focus ring and the brand gradient.
|
|
12
|
-
*/
|
|
13
|
-
brand: string;
|
|
14
|
-
/**
|
|
15
|
-
* An optional second hue for the `action.accent` family, as `#rgb` or
|
|
16
|
-
* `#rrggbb`. `undefined` or `null` means "the same as `brand`", which is what
|
|
17
|
-
* the built-in `[data-ds-brand]` scopes do.
|
|
18
|
-
*/
|
|
19
|
-
accent?: string | null;
|
|
20
|
-
}
|
|
21
|
-
/** Every custom property `createBrandTheme()` sets, in output order. */
|
|
22
|
-
declare const BRAND_THEME_PROPERTIES: readonly ["--ds-color-action-brand-bg", "--ds-color-action-brand-bg-hover", "--ds-color-action-brand-bg-active", "--ds-color-action-brand-bg-disabled", "--ds-color-action-brand-subtle-bg", "--ds-color-action-brand-subtle-bg-hover", "--ds-color-action-brand-subtle-bg-active", "--ds-color-action-brand-border", "--ds-color-action-brand-ring", "--ds-color-action-brand-fg", "--ds-color-action-accent-bg", "--ds-color-action-accent-bg-strong", "--ds-color-action-accent-bg-hover", "--ds-color-action-accent-bg-active", "--ds-color-action-accent-subtle-bg", "--ds-color-action-accent-ring", "--ds-color-action-accent-fg", "--ds-color-border-focus", "--ds-focus-ring-color", "--ds-focus-ring-border", "--ds-gradient-brand", "--ds-compat-color-brand-soft", "--ds-compat-color-brand-soft-foreground"];
|
|
23
|
-
/** One of the custom properties `createBrandTheme()` sets. */
|
|
24
|
-
type BrandThemeProperty = (typeof BRAND_THEME_PROPERTIES)[number];
|
|
25
|
-
/**
|
|
26
|
-
* The style object `createBrandTheme()` returns: every property of
|
|
27
|
-
* {@link BRAND_THEME_PROPERTIES} with a CSS value.
|
|
28
|
-
*
|
|
29
|
-
* React types `style` as `CSSProperties`, which has no index signature for
|
|
30
|
-
* custom properties, so spread it or cast it at the call site:
|
|
31
|
-
* `style={{ ...createBrandTheme(seed) }}`.
|
|
32
|
-
*
|
|
33
|
-
* @experimental Gated by decision D7.
|
|
34
|
-
*/
|
|
35
|
-
type BrandTheme = {
|
|
36
|
-
readonly [P in BrandThemeProperty]: string;
|
|
37
|
-
};
|
|
38
|
-
/**
|
|
39
|
-
* Turn a tenant's colours into the design system's brand and accent tokens.
|
|
40
|
-
*
|
|
41
|
-
* ```tsx
|
|
42
|
-
* const theme = createBrandTheme({ brand: firm.primaryColor, accent: firm.accentColor });
|
|
43
|
-
* return <div style={{ ...theme }}>{children}</div>;
|
|
44
|
-
* ```
|
|
45
|
-
*
|
|
46
|
-
* Apply it to the element that scopes the brand — `<body>` for a whole-tenant
|
|
47
|
-
* theme, a wrapper for a preview. The properties are the same ones a built-in
|
|
48
|
-
* `[data-ds-brand]` scope declares, so anything reading them (every design
|
|
49
|
-
* system component, and any application CSS reading `--ds-*`) follows.
|
|
50
|
-
*
|
|
51
|
-
* @param seed - `brand`, and optionally `accent` (decision D7).
|
|
52
|
-
* @returns A frozen object of custom property names to CSS values.
|
|
53
|
-
* @throws TypeError when the seed is not an object, carries an unknown key, or
|
|
54
|
-
* a colour is missing or not `#rgb`/`#rrggbb`.
|
|
55
|
-
*
|
|
56
|
-
* @experimental Gated by decision D7. The property set may grow, and the seed
|
|
57
|
-
* shape may change, until D7 is resolved.
|
|
58
|
-
*/
|
|
59
|
-
declare function createBrandTheme(seed: BrandThemeSeed): BrandTheme;
|
|
60
|
-
|
|
61
|
-
export { BRAND_THEME_PROPERTIES, type BrandTheme, type BrandThemeProperty, type BrandThemeSeed, createBrandTheme };
|
|
1
|
+
export { C as ColorName, R as ReferenceTokens, b as breakpoints, c as colors, i as iconSizes, l as layout, m as motion, o as overlays, r as radii, a as reference, s as shadows, d as spacing, e as surfaces, t as typography, z as zIndex } from '../reference-BkDbrPIB.js';
|
|
2
|
+
export { S as SystemTokens, s as systemTokens } from '../system-DfJIVBlJ.js';
|
|
3
|
+
export { B as BRAND_THEME_PROPERTIES, a as BrandTheme, b as BrandThemeProperty, c as BrandThemeSeed, d as createBrandTheme } from '../brand-theme-ZYM867Jz.js';
|