@assure-one/design-system 1.37.0 → 1.39.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 +60 -16
- package/codemods/README.md +90 -16
- package/codemods/lib/entry-map.mjs +315 -0
- package/codemods/lib/registry.mjs +2 -0
- package/codemods/transforms/cm-01-entry-imports.mjs +202 -0
- package/codemods/transforms/cm-18-data-table-parts.mjs +234 -0
- package/dist/brand-theme-B6rem2II.d.ts +59 -0
- package/dist/css/components.css +1 -1
- package/dist/css/legacy-aliases.css +8 -0
- package/dist/css/tokens.css +14 -6
- package/dist/design-system-provider-BM_F1C13.d.ts +143 -0
- package/dist/icons/index.d.ts +441 -3
- package/dist/icons/index.js.map +1 -1
- package/dist/index-BAAuIQqP.d.ts +2579 -0
- package/dist/index-DxBjmBBp.d.ts +1038 -0
- package/dist/index.d.ts +1017 -3293
- package/dist/index.js +7598 -5906
- package/dist/index.js.map +1 -1
- package/dist/legacy/index.d.ts +9 -0
- package/dist/legacy/index.js +3 -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 +1 -1
- package/dist/suite/index.d.ts +4 -0
- package/dist/suite/index.js +3 -0
- package/dist/suite/index.js.map +1 -0
- package/dist/{system-CyAVbHhM.d.ts → system-DfJIVBlJ.d.ts} +1 -310
- package/dist/tokens/index.d.ts +3 -61
- package/dist/tokens/index.js +3 -3
- package/dist/tokens/index.js.map +1 -1
- package/dist/{design-system-provider-C8UlFe52.d.ts → types-k_kjwipx.d.ts} +69 -142
- package/dist/vocab-DornLJbW.d.ts +76 -0
- package/docs/components.md +62 -32
- package/docs/components.registry.json +2415 -465
- package/docs/for-ai-agents.md +2 -0
- package/eslint-config/index.mjs +210 -0
- package/eslint-config/stylelint-rules.mjs +54 -0
- package/eslint-config/stylelint.mjs +73 -0
- package/package.json +21 -3
- 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,4 @@
|
|
|
1
|
+
export { A as AgreementFirm, a as AgreementPaneHeading, b as AgreementPaneHeadingProps, c as AgreementStatus, d as AgreementStep, e as AgreementViewer, f as AgreementViewerProps, g as AssureAuditBrandIcon, h as AssureBooksBrandIcon, i as AssureProBrandIcon, j as AssureTaxBrandIcon, B as BRAND_PRODUCTS, k as BrandIconProps, l as BrandProduct, C as ClientSelect, p as ClientSelectOption, q as ComingSoon, r as ComingSoonProps, D as DocumentDetailActions, s as DocumentDetailActionsProps, t as DocumentDetailBody, u as DocumentDetailBodyProps, v as DocumentDetailHeader, w as DocumentDetailHeaderProps, x as DocumentDetailMetaRow, y as DocumentDetailMetaRowProps, z as DocumentDetailPanel, E as DocumentDetailPanelProps, F as DocumentDetailRequester, G as DocumentDetailRequesterProps, H as DocumentDetailTitle, I as DocumentDetailTitleProps, J as DocumentList, K as DocumentListProps, L as DocumentListSection, M as DocumentListSectionProps, N as DocumentRow, O as DocumentRowProps, P as Grid, Q as GridColumn, R as GridInputType, S as GridProps, T as GridRow, U as GridValue, V as Logo, W as ProposalAddOn, X as ProposalAddOnProps, Y as ProposalBillingMode, Z as ProposalBillingRow, _ as ProposalBillingTerms, $ as ProposalBillingTermsProps, a0 as ProposalConsentGate, a1 as ProposalConsentGateProps, a2 as ProposalCustomPage, a3 as ProposalCustomPageKind, a4 as ProposalCustomPageProps, a5 as ProposalNote, a6 as ProposalNoteProps, a7 as ProposalPackageCard, a8 as ProposalPackageCardProps, a9 as ProposalPackageMode, aa as ProposalPaymentCapture, ab as ProposalPaymentCaptureProps, ac as ProposalPricingSummary, ad as ProposalPricingSummaryProps, ae as ProposalServiceRow, af as ProposalServiceRowProps, ag as ProposalSignatureBlock, ah as ProposalSignatureBlockProps, ai as ProposalSigner, aj as ProposalSignerList, ak as ProposalSignerListProps, al as ProposalSignerStatus, ao as QuestionAddressValue, ap as QuestionFileValue, aq as QuestionHelp, ar as QuestionLabeledColumn, as as QuestionLabeledRow, at as QuestionLabeledValue, au as QuestionNameValue, av as QuestionOption, aw as QuestionTableColumn, ax as QuestionTableRow, ay as QuestionType, az as Questions, aA as QuestionsProps, aB as SidebarBrandSwitcher, aC as SidebarBrandSwitcherExtra, aD as SidebarBrandSwitcherItem, aE as SidebarBrandSwitcherProps, aF as SidebarBrandSwitcherTile, aG as brandLabel } from '../index-DxBjmBBp.js';
|
|
2
|
+
import 'react';
|
|
3
|
+
import 'react/jsx-runtime';
|
|
4
|
+
import '../types-k_kjwipx.js';
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
export { AgreementPaneHeading, AgreementViewer, AssureAuditBrandIcon, AssureBooksBrandIcon, AssureProBrandIcon, AssureTaxBrandIcon, BRAND_PRODUCTS, ClientSelect, ComingSoon, DocumentDetailActions, DocumentDetailBody, DocumentDetailHeader, DocumentDetailMetaRow, DocumentDetailPanel, DocumentDetailRequester, DocumentDetailTitle, DocumentList, DocumentListSection, DocumentRow, Grid, Logo, ProposalAddOn, ProposalBillingTerms, ProposalConsentGate, ProposalCustomPage, ProposalNote, ProposalPackageCard, ProposalPaymentCapture, ProposalPricingSummary, ProposalServiceRow, ProposalSignatureBlock, ProposalSignerList, Questions, SidebarBrandSwitcher, SidebarBrandSwitcherTile, brandLabel } from '@assure-one/design-system';
|
|
2
|
+
//# sourceMappingURL=index.js.map
|
|
3
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js","sourcesContent":[]}
|
|
@@ -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/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-B6rem2II.js';
|
package/dist/tokens/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
// src/tokens/reference.ts
|
|
2
2
|
var colors = {
|
|
3
3
|
/* Surfaces */
|
|
4
|
-
bg: "#
|
|
4
|
+
bg: "#f7f8fa",
|
|
5
5
|
bg2: "#f1f3f8",
|
|
6
6
|
bg3: "#e7eaf1",
|
|
7
7
|
surface: "#ffffff",
|
|
@@ -66,7 +66,7 @@ var typography = {
|
|
|
66
66
|
var radii = {
|
|
67
67
|
btn: "7px",
|
|
68
68
|
input: "7px",
|
|
69
|
-
pill: "
|
|
69
|
+
pill: "6px",
|
|
70
70
|
card: "12px",
|
|
71
71
|
icon: "4px",
|
|
72
72
|
full: "9999px"
|
|
@@ -103,7 +103,7 @@ var spacing = {
|
|
|
103
103
|
180: "180px"
|
|
104
104
|
};
|
|
105
105
|
var surfaces = {
|
|
106
|
-
bg: "#
|
|
106
|
+
bg: "#f7f8fa",
|
|
107
107
|
bg2: "#f1f3f8",
|
|
108
108
|
surface: "#ffffff",
|
|
109
109
|
surface2: "#f7f8fc"
|