@crisp-ui-kit/crisp 0.31.4 → 0.31.6
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/dist/authshell.css +1 -1
- package/dist/cjs/components/accordion/accordion.recipe.js +1 -1
- package/dist/cjs/components/barchart/barchart.recipe.js +1 -1
- package/dist/cjs/components/breadcrumb/breadcrumb.recipe.js +1 -1
- package/dist/cjs/components/bulkbar/bulkbar.recipe.js +1 -1
- package/dist/cjs/components/callout/callout.recipe.js +1 -1
- package/dist/cjs/components/checkbox/checkbox.recipe.js +1 -1
- package/dist/cjs/components/columncalc/columncalc.recipe.js +2 -2
- package/dist/cjs/components/datatable/datatable.recipe.js +5 -5
- package/dist/cjs/components/datepicker/datepicker.recipe.js +3 -3
- package/dist/cjs/components/datepickerfield/datepickerfield.recipe.js +2 -2
- package/dist/cjs/components/dialog/dialog.recipe.js +1 -1
- package/dist/cjs/components/donutchart/donutchart.recipe.js +1 -1
- package/dist/cjs/components/emptystate/emptystate.recipe.js +2 -2
- package/dist/cjs/components/fileupload/fileupload.recipe.js +6 -6
- package/dist/cjs/components/formfield/formfield.recipe.js +1 -1
- package/dist/cjs/components/input/input.recipe.js +1 -1
- package/dist/cjs/components/linechart/linechart.recipe.js +1 -1
- package/dist/cjs/components/menu/menu.recipe.js +2 -2
- package/dist/cjs/components/multiselect/multiselect.recipe.js +1 -1
- package/dist/cjs/components/progress/progress.recipe.js +1 -1
- package/dist/cjs/components/quantitypicker/quantitypicker.recipe.js +2 -2
- package/dist/cjs/components/radiogroup/radiogroup.recipe.js +1 -1
- package/dist/cjs/components/resizablepanel/resizablepanel.recipe.js +2 -2
- package/dist/cjs/components/segmented/segmented.recipe.js +1 -1
- package/dist/cjs/components/select/select.recipe.js +2 -2
- package/dist/cjs/components/slider/slider.recipe.js +2 -2
- package/dist/cjs/components/stagebar/stagebar.recipe.js +1 -1
- package/dist/cjs/components/statcard/statcard.recipe.js +2 -2
- package/dist/cjs/components/switch/switch.recipe.js +1 -1
- package/dist/cjs/components/table/table.recipe.js +1 -1
- package/dist/cjs/components/tabletoolbar/tabletoolbar.chrome.js +2 -2
- package/dist/cjs/components/tabletoolbar/tabletoolbar.recipe.js +1 -1
- package/dist/cjs/components/tabs/tabs.recipe.js +1 -1
- package/dist/cjs/components/textarea/textarea.recipe.js +1 -1
- package/dist/cjs/components/tooltip/tooltip.recipe.js +1 -1
- package/dist/cjs/core/dialog-description.js +1 -1
- package/dist/cjs/index.js +1 -1
- package/dist/cjs/product/appshell/appshell.recipe.js +1 -1
- package/dist/cjs/product/authshell/authshell.recipe.js +3 -3
- package/dist/cjs/product/board/board.recipe.js +1 -1
- package/dist/cjs/product/entitycard/entitycard.recipe.js +1 -1
- package/dist/cjs/product/flowcanvas/flowcanvas.recipe.js +1 -1
- package/dist/cjs/product/inbox/inbox.recipe.js +1 -1
- package/dist/cjs/product/listpage/listpage.recipe.js +1 -1
- package/dist/cjs/product/onboarding/onboarding.recipe.js +1 -1
- package/dist/cjs/product/recordpage/recordpage.recipe.js +2 -2
- package/dist/cjs/product/recordpanel/recordpanel.recipe.js +1 -1
- package/dist/cjs/product/recordstable/recordstable.recipe.js +2 -2
- package/dist/cjs/product/recordstable/recordstable.tag.js +1 -1
- package/dist/cjs/product/richtext/richtext.recipe.js +1 -1
- package/dist/cjs/product/settingssection/settingssection.recipe.js +1 -1
- package/dist/cjs/product/settingsshell/settingsshell.recipe.js +2 -2
- package/dist/cjs/product/tasklist/tasklist.recipe.js +1 -1
- package/dist/cjs/product/trialbanner/trialbanner.recipe.js +2 -2
- package/dist/cjs/product/viewtoggle/viewtoggle.recipe.js +1 -1
- package/dist/cjs/tokens/elevation.js +4 -4
- package/dist/cjs/tokens/palette.js +2 -2
- package/dist/cjs/tokens/scale.js +6 -6
- package/dist/cjs/tokens/semantic.js +1 -1
- package/dist/columncalc.css +1 -1
- package/dist/datatable.css +5 -5
- package/dist/esm/components/accordion/accordion.recipe.js +1 -1
- package/dist/esm/components/barchart/barchart.recipe.js +1 -1
- package/dist/esm/components/breadcrumb/breadcrumb.recipe.js +1 -1
- package/dist/esm/components/bulkbar/bulkbar.recipe.js +1 -1
- package/dist/esm/components/callout/callout.recipe.js +1 -1
- package/dist/esm/components/checkbox/checkbox.recipe.js +1 -1
- package/dist/esm/components/columncalc/columncalc.recipe.js +2 -2
- package/dist/esm/components/datatable/datatable.recipe.js +5 -5
- package/dist/esm/components/datepicker/datepicker.recipe.js +3 -3
- package/dist/esm/components/datepickerfield/datepickerfield.recipe.js +2 -2
- package/dist/esm/components/dialog/dialog.recipe.js +1 -1
- package/dist/esm/components/donutchart/donutchart.recipe.js +1 -1
- package/dist/esm/components/emptystate/emptystate.recipe.js +2 -2
- package/dist/esm/components/fileupload/fileupload.recipe.js +6 -6
- package/dist/esm/components/formfield/formfield.recipe.js +1 -1
- package/dist/esm/components/input/input.recipe.js +1 -1
- package/dist/esm/components/linechart/linechart.recipe.js +1 -1
- package/dist/esm/components/menu/menu.recipe.js +2 -2
- package/dist/esm/components/multiselect/multiselect.recipe.js +1 -1
- package/dist/esm/components/progress/progress.recipe.js +1 -1
- package/dist/esm/components/quantitypicker/quantitypicker.recipe.js +2 -2
- package/dist/esm/components/radiogroup/radiogroup.recipe.js +1 -1
- package/dist/esm/components/resizablepanel/resizablepanel.recipe.js +2 -2
- package/dist/esm/components/segmented/segmented.recipe.js +1 -1
- package/dist/esm/components/select/select.recipe.js +2 -2
- package/dist/esm/components/slider/slider.recipe.js +2 -2
- package/dist/esm/components/stagebar/stagebar.recipe.js +1 -1
- package/dist/esm/components/statcard/statcard.recipe.js +2 -2
- package/dist/esm/components/switch/switch.recipe.js +1 -1
- package/dist/esm/components/table/table.recipe.js +1 -1
- package/dist/esm/components/tabletoolbar/tabletoolbar.chrome.js +2 -2
- package/dist/esm/components/tabletoolbar/tabletoolbar.recipe.js +1 -1
- package/dist/esm/components/tabs/tabs.recipe.js +1 -1
- package/dist/esm/components/textarea/textarea.recipe.js +1 -1
- package/dist/esm/components/tooltip/tooltip.recipe.js +1 -1
- package/dist/esm/core/dialog-description.js +1 -1
- package/dist/esm/index.js +1 -1
- package/dist/esm/product/appshell/appshell.recipe.js +1 -1
- package/dist/esm/product/authshell/authshell.recipe.js +3 -3
- package/dist/esm/product/board/board.recipe.js +1 -1
- package/dist/esm/product/entitycard/entitycard.recipe.js +1 -1
- package/dist/esm/product/flowcanvas/flowcanvas.recipe.js +1 -1
- package/dist/esm/product/inbox/inbox.recipe.js +1 -1
- package/dist/esm/product/listpage/listpage.recipe.js +1 -1
- package/dist/esm/product/onboarding/onboarding.recipe.js +1 -1
- package/dist/esm/product/recordpage/recordpage.recipe.js +2 -2
- package/dist/esm/product/recordpanel/recordpanel.recipe.js +1 -1
- package/dist/esm/product/recordstable/recordstable.recipe.js +2 -2
- package/dist/esm/product/recordstable/recordstable.tag.js +1 -1
- package/dist/esm/product/richtext/richtext.recipe.js +1 -1
- package/dist/esm/product/settingssection/settingssection.recipe.js +1 -1
- package/dist/esm/product/settingsshell/settingsshell.recipe.js +2 -2
- package/dist/esm/product/tasklist/tasklist.recipe.js +1 -1
- package/dist/esm/product/trialbanner/trialbanner.recipe.js +2 -2
- package/dist/esm/product/viewtoggle/viewtoggle.recipe.js +1 -1
- package/dist/esm/tokens/elevation.js +4 -4
- package/dist/esm/tokens/palette.js +2 -2
- package/dist/esm/tokens/scale.js +6 -6
- package/dist/esm/tokens/semantic.js +1 -1
- package/dist/fileupload.css +2 -2
- package/dist/recordpage.css +1 -1
- package/dist/recordstable.css +1 -1
- package/dist/settingsshell.css +1 -1
- package/dist/styles.css +12 -12
- package/dist/types/core/dialog-description.d.ts +1 -1
- package/dist/types/product/recordstable/recordstable.tag.d.ts +1 -1
- package/dist/types/tokens/elevation.d.ts +4 -4
- package/package.json +1 -1
package/dist/authshell.css
CHANGED
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
& .authshell-body .button { height: 36px; padding-inline: var(--space-3); border-radius: 10px; }
|
|
39
39
|
& .authshell-body .button--intent_primary { box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06), 0 2px 4px -2px rgba(38,109,240,0.12), 0 3px 6px -2px rgba(38,109,240,0.08); }
|
|
40
40
|
|
|
41
|
-
/*
|
|
41
|
+
/* The preview pane drops out in JS on narrow viewports (measured: two
|
|
42
42
|
panes at 1393px, one at 954px), so 1200px is a chosen threshold inside
|
|
43
43
|
that bracket, not a measured value. A CONTAINER query, not a media
|
|
44
44
|
query: the shell is embedded in the docs inside an ~800px column, where
|
|
@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.accordionRecipe = void 0;
|
|
4
4
|
const core_1 = require("../../core");
|
|
5
5
|
const tokens_1 = require("../../tokens");
|
|
6
|
-
// A stack of collapsible sections —
|
|
6
|
+
// A stack of collapsible sections — sidebar sections / "view all".
|
|
7
7
|
// The panel animates height via the grid-template-rows 0fr->1fr technique.
|
|
8
8
|
const config = (0, core_1.defineRecipe)({
|
|
9
9
|
name: "accordion",
|
|
@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.barchartRecipe = void 0;
|
|
4
4
|
const core_1 = require("../../core");
|
|
5
5
|
const tokens_1 = require("../../tokens");
|
|
6
|
-
// A responsive bar chart — measured from
|
|
6
|
+
// A responsive bar chart — measured from a Reports dashboard: brand bars
|
|
7
7
|
// with rounded tops over dashed horizontal gridlines, a value axis on the left,
|
|
8
8
|
// and category labels below. Pure CSS (no SVG), so it scales with its container.
|
|
9
9
|
const config = (0, core_1.defineRecipe)({
|
|
@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.breadcrumbRecipe = void 0;
|
|
4
4
|
const core_1 = require("../../core");
|
|
5
5
|
const tokens_1 = require("../../tokens");
|
|
6
|
-
// A breadcrumb trail —
|
|
6
|
+
// A breadcrumb trail — record-page nav ("Companies / Google").
|
|
7
7
|
const config = (0, core_1.defineRecipe)({
|
|
8
8
|
name: "breadcrumb",
|
|
9
9
|
base: `display: flex; align-items: center; gap: ${tokens_1.contract.space["0.5"]}; font-family: ${tokens_1.contract.font.sans}; font-size: ${tokens_1.contract.text.lg};
|
|
@@ -5,7 +5,7 @@ const core_1 = require("../../core");
|
|
|
5
5
|
const tokens_1 = require("../../tokens");
|
|
6
6
|
// A floating bulk-action bar — the pill that rises from the bottom of a
|
|
7
7
|
// selection surface (a table, a gallery) when one or more rows are selected.
|
|
8
|
-
// Measured from
|
|
8
|
+
// Measured from a records-table bulk bar. The root is an absolutely-
|
|
9
9
|
// positioned anchor that centres the bar with flex (NOT a transform): a resting
|
|
10
10
|
// transform on the bar would reparent any `position: fixed` menu inside it (the
|
|
11
11
|
// "More" overflow), detaching it — the enter slide lives in @starting-style only.
|
|
@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.calloutRecipe = void 0;
|
|
4
4
|
const core_1 = require("../../core");
|
|
5
5
|
const tokens_1 = require("../../tokens");
|
|
6
|
-
// A callout / banner —
|
|
6
|
+
// A callout / banner — inline info notices (e.g. "Changes apply to all
|
|
7
7
|
// workspaces", the trial banner). Tone tints the background + icon.
|
|
8
8
|
const config = (0, core_1.defineRecipe)({
|
|
9
9
|
name: "callout",
|
|
@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.checkboxRecipe = void 0;
|
|
4
4
|
const core_1 = require("../../core");
|
|
5
5
|
const tokens_1 = require("../../tokens");
|
|
6
|
-
// A 16px square checkbox measured from
|
|
6
|
+
// A 16px square checkbox measured from a record grid: r6, a subtle 1px
|
|
7
7
|
// inset ring when empty, brand fill + white check when on. The check is a
|
|
8
8
|
// data-URI SVG background so it renders reliably (input pseudo-content doesn't).
|
|
9
9
|
const CHECK = "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.5 5 9l4.5-5'/%3E%3C/svg%3E\")";
|
|
@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.columncalcRecipe = void 0;
|
|
4
4
|
const core_1 = require("../../core");
|
|
5
5
|
const tokens_1 = require("../../tokens");
|
|
6
|
-
//
|
|
6
|
+
// The column footer calculation. The summary row is 36px and sticky at the
|
|
7
7
|
// grid's bottom edge; each cell holds a quiet trigger that reads "Add
|
|
8
8
|
// calculation" until an aggregation is chosen, then shows the value with its
|
|
9
9
|
// operation name beside it.
|
|
@@ -14,7 +14,7 @@ const config = (0, core_1.defineRecipe)({
|
|
|
14
14
|
shrink the button back to its text. Make the wrapper fill too, so the
|
|
15
15
|
whole cell stays clickable. */
|
|
16
16
|
& .menu { width: 100%; height: 100%; }
|
|
17
|
-
/*
|
|
17
|
+
/* The hit target is the WHOLE summary cell -- measured 246x37 with
|
|
18
18
|
padding 0 12px, not a content-sized chip. Clicking anywhere in the cell
|
|
19
19
|
opens the aggregation menu. */
|
|
20
20
|
& .columncalc-trigger { display: flex; align-items: center; gap: ${tokens_1.contract.space["1"]}; width: 100%; height: 100%; min-height: ${tokens_1.contract.size.tableRow}; margin: 0; padding: 0 ${tokens_1.contract.space["3"]}; border: none; border-radius: ${tokens_1.contract.radius.md}; background: transparent; color: ${tokens_1.contract.fgMuted}; font-family: inherit; font-size: ${tokens_1.contract.text.md}; font-weight: ${tokens_1.contract.weight.medium}; white-space: nowrap; cursor: pointer; transition: background-color .12s, color .12s; }
|
|
@@ -17,7 +17,7 @@ const config = (0, core_1.defineRecipe)({
|
|
|
17
17
|
& .datatable-search input::placeholder { color: ${tokens_1.contract.fgMuted}; }
|
|
18
18
|
& .datatable-search input:focus { box-shadow: inset 0 0 0 1px ${tokens_1.contract.bgBrandSolid}; }
|
|
19
19
|
& .datatable-count { margin-inline-start: auto; font-size: ${tokens_1.contract.text.md}; color: ${tokens_1.contract.fgMuted}; }
|
|
20
|
-
/*
|
|
20
|
+
/* The header cell has no padding of its own -- the button owns the
|
|
21
21
|
full cell so the whole header is clickable (its own inset is 12px).
|
|
22
22
|
Mirrors the summary-row fix. */
|
|
23
23
|
& th { padding: 0; }
|
|
@@ -31,11 +31,11 @@ const config = (0, core_1.defineRecipe)({
|
|
|
31
31
|
& th .menu { width: 100%; height: 100%; }
|
|
32
32
|
& .datatable-th-inner { display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; width: 100%; min-width: 0; height: 100%; }
|
|
33
33
|
& .datatable-th-inner > svg { flex-shrink: 0; color: ${tokens_1.contract.fgMuted}; }
|
|
34
|
-
/*
|
|
34
|
+
/* The summary cell has NO padding of its own -- the calculation trigger
|
|
35
35
|
owns the whole 246x37 area so a click anywhere in the cell opens the
|
|
36
36
|
menu. Zero the cell's inset and let ColumnCalc supply the 12px. */
|
|
37
37
|
& tfoot td { padding: 0; }
|
|
38
|
-
/* Group heading row --
|
|
38
|
+
/* Group heading row -- a view is grouped under a subtle label with the
|
|
39
39
|
bucket's count beside it. */
|
|
40
40
|
& .datatable-viewsettings { display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; height: ${tokens_1.contract.size.row}; margin: 0; padding: 0 ${tokens_1.contract.space["2"]}; border: none; border-radius: ${tokens_1.contract.radius.md}; background: transparent; color: ${tokens_1.contract.fgMuted}; font-family: inherit; font-size: ${tokens_1.contract.text.md}; font-weight: ${tokens_1.contract.weight.medium}; white-space: nowrap; cursor: pointer; transition: background-color .12s, color .12s; }
|
|
41
41
|
& .datatable-viewsettings:hover { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 4%, transparent); color: ${tokens_1.contract.fgPrimary}; }
|
|
@@ -93,13 +93,13 @@ const config = (0, core_1.defineRecipe)({
|
|
|
93
93
|
& .datatable-tag[data-tone="orange"] { background: color-mix(in srgb, ${tokens_1.contract.bgOrange} 16%, transparent); color: color-mix(in srgb, ${tokens_1.contract.bgOrange} 82%, ${tokens_1.contract.fgPrimary}); }
|
|
94
94
|
& .datatable-num { font-variant-numeric: tabular-nums; }
|
|
95
95
|
& .datatable-muted { color: ${tokens_1.contract.fgMuted}; }
|
|
96
|
-
/* row drag-to-reorder --
|
|
96
|
+
/* row drag-to-reorder -- a Settings > Objects > Attributes screen measures
|
|
97
97
|
a leading 20px grip column, a 16px grip icon, and the row's own
|
|
98
98
|
hairline doubling as the drop indicator (it tints toward the brand
|
|
99
99
|
colour as the active drop target). The affordance + geometry are
|
|
100
100
|
measured; the drag MECHANISM is crisp's existing house idiom -- HTML5
|
|
101
101
|
draggable + dataTransfer, the same one column reorder already uses
|
|
102
|
-
(RecordsTable's reorderColumn) -- not
|
|
102
|
+
(RecordsTable's reorderColumn) -- not a proprietary
|
|
103
103
|
pointer-events implementation. */
|
|
104
104
|
& .datatable-col-grip { width: 20px; padding: 0; text-align: center; }
|
|
105
105
|
& .datatable-grip { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; margin: 0; border: none; border-radius: 0; background: none; font-family: inherit; color: ${tokens_1.contract.fgMuted}; cursor: grab; }
|
|
@@ -3,9 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.datepickerRecipe = void 0;
|
|
4
4
|
const core_1 = require("../../core");
|
|
5
5
|
const tokens_1 = require("../../tokens");
|
|
6
|
-
// seed-design's calendar structure on
|
|
7
|
-
// markup and range model are seed's; every visual value is measured from
|
|
8
|
-
//
|
|
6
|
+
// seed-design's calendar structure on the measured scale. The behaviour,
|
|
7
|
+
// markup and range model are seed's; every visual value is measured from a
|
|
8
|
+
// live date picker (task due-date field): a 32px day on a 34px
|
|
9
9
|
// pitch, an 8px-radius highlight rather than a circle, 14/20 medium numerals and
|
|
10
10
|
// the brand blue for the selection.
|
|
11
11
|
//
|
|
@@ -3,9 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.datepickerfieldRecipe = void 0;
|
|
4
4
|
const core_1 = require("../../core");
|
|
5
5
|
const tokens_1 = require("../../tokens");
|
|
6
|
-
// The trigger crisp's DatePicker used to own, measured
|
|
6
|
+
// The trigger crisp's DatePicker used to own, measured live: a 32px
|
|
7
7
|
// outlined chip showing the value, opening a calendar in a popover. Split out
|
|
8
|
-
// when DatePicker became seed-design's bare calendar, so this
|
|
8
|
+
// when DatePicker became seed-design's bare calendar, so this measured
|
|
9
9
|
// field survives unchanged for the consumers already using it.
|
|
10
10
|
const config = (0, core_1.defineRecipe)({
|
|
11
11
|
name: "datepickerfield",
|
|
@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.dialogRecipe = void 0;
|
|
4
4
|
const core_1 = require("../../core");
|
|
5
5
|
const tokens_1 = require("../../tokens");
|
|
6
|
-
// A modal dialog surface — measured from
|
|
6
|
+
// A modal dialog surface — measured from a create-record modal: a radius-16
|
|
7
7
|
// frosted-glass card (60% tinted background + 15px backdrop blur, both re-measured
|
|
8
8
|
// per theme — light uses a blue-tinted 3-layer shadow, dark drops to a plain
|
|
9
9
|
// 2-layer black shadow) with a bordered header (title + close), a scrollable
|
|
@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.donutchartRecipe = void 0;
|
|
4
4
|
const core_1 = require("../../core");
|
|
5
5
|
const tokens_1 = require("../../tokens");
|
|
6
|
-
// A donut / ring chart — measured from
|
|
6
|
+
// A donut / ring chart — measured from Reports breakdown reports: a
|
|
7
7
|
// segmented ring with a centred total, plus a legend of coloured swatches with
|
|
8
8
|
// labels and values. Pure SVG ring; HTML legend.
|
|
9
9
|
const config = (0, core_1.defineRecipe)({
|
|
@@ -15,9 +15,9 @@ const config = (0, core_1.defineRecipe)({
|
|
|
15
15
|
variant: {
|
|
16
16
|
// compact icon tile (default)
|
|
17
17
|
default: ``,
|
|
18
|
-
// a large icon on a dotted-grid backdrop —
|
|
18
|
+
// a large icon on a dotted-grid backdrop — a Developers/Reports empty state
|
|
19
19
|
illustrated: `& .emptystate-icon { width: 132px; height: 96px; margin-bottom: ${tokens_1.contract.space["2"]}; border-radius: 0; color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 22%, transparent); background: radial-gradient(circle, color-mix(in srgb, ${tokens_1.contract.fgPrimary} 12%, transparent) 1.2px, transparent 1.2px) 0 0 / 16px 16px; }`,
|
|
20
|
-
//
|
|
20
|
+
// A full-view empty state (measured from a filtered-to-zero records table):
|
|
21
21
|
// a 45px ringed circle icon, a 20/24 semibold heading, a 14/20 medium muted body,
|
|
22
22
|
// then a primary action. Gaps are 16 / 8 / 16 (icon→title→desc→action).
|
|
23
23
|
page: `gap: ${tokens_1.contract.space["2"]};
|
|
@@ -3,17 +3,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.fileuploadRecipe = void 0;
|
|
4
4
|
const core_1 = require("../../core");
|
|
5
5
|
const tokens_1 = require("../../tokens");
|
|
6
|
-
// seed-design's file-upload behaviour on
|
|
6
|
+
// seed-design's file-upload behaviour on the measured scale.
|
|
7
7
|
//
|
|
8
|
-
// Measured from
|
|
8
|
+
// Measured from a record Files pane (Deal record → Files, empty state):
|
|
9
9
|
// the title is 16/20 at weight 600 in `rgb(16,17,18)` (= gray900 = fgPrimary),
|
|
10
10
|
// the hint 14/20 at weight 500 in `rgba(0,0,0,0.63)`, and the action button is
|
|
11
11
|
// 28px tall with an 8px corner.
|
|
12
12
|
//
|
|
13
|
-
//
|
|
13
|
+
// That pane draws NO boundary around itself -- the whole surface is the drop
|
|
14
14
|
// target -- but a reusable dropzone needs an edge, so the dashed affordance is
|
|
15
15
|
// crisp's own measured one from `sidebar-newlist` (1px dashed borderDefault,
|
|
16
|
-
// r8, bgRaised on hover) rather than a new invention.
|
|
16
|
+
// r8, bgRaised on hover) rather than a new invention. The drag-OVER
|
|
17
17
|
// treatment could not be measured: synthetic DragEvents do not trigger its
|
|
18
18
|
// handlers. The active state therefore reuses the brand emphasis crisp already
|
|
19
19
|
// uses for a live drag affordance (`appshell-resize[data-dragging]`).
|
|
@@ -43,12 +43,12 @@ const config = (0, core_1.defineRecipe)({
|
|
|
43
43
|
& .fileupload-zone[data-disabled] { opacity: .5; cursor: not-allowed; }
|
|
44
44
|
& .fileupload-zone[data-invalid] { border-color: ${tokens_1.contract.bgDanger}; }
|
|
45
45
|
|
|
46
|
-
/*
|
|
46
|
+
/* "No files" 16/20 weight 600 */
|
|
47
47
|
& .fileupload-title {
|
|
48
48
|
color: ${tokens_1.contract.fgPrimary}; font-size: ${tokens_1.contract.text.xl}; line-height: 20px;
|
|
49
49
|
font-weight: ${tokens_1.contract.weight.semibold};
|
|
50
50
|
}
|
|
51
|
-
/*
|
|
51
|
+
/* The hint line, 14/20 weight 500 at 63% of the foreground */
|
|
52
52
|
& .fileupload-hint {
|
|
53
53
|
color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 63%, transparent);
|
|
54
54
|
font-size: ${tokens_1.contract.text.lg}; line-height: 20px;
|
|
@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.formfieldRecipe = void 0;
|
|
4
4
|
const core_1 = require("../../core");
|
|
5
5
|
const tokens_1 = require("../../tokens");
|
|
6
|
-
// A labelled form field — measured from
|
|
6
|
+
// A labelled form field — measured from Settings forms: a 12px/500 muted
|
|
7
7
|
// label above the control, with an optional description or danger error line
|
|
8
8
|
// below. Wraps any control (Input, Select, Textarea…).
|
|
9
9
|
const config = (0, core_1.defineRecipe)({
|
|
@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.inputRecipe = void 0;
|
|
4
4
|
const core_1 = require("../../core");
|
|
5
5
|
const tokens_1 = require("../../tokens");
|
|
6
|
-
// Geometry is
|
|
6
|
+
// Geometry is measured: 32/36px tall, r8/r10, 10/12px side padding.
|
|
7
7
|
// The FOCUS TREATMENT is seed-design's, measured from @seed-design/css: a 2px
|
|
8
8
|
// ring on an ::after overlay that is present-but-transparent at rest, so
|
|
9
9
|
// focusing cannot shift layout the way a width change would, and animates
|
|
@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.linechartRecipe = void 0;
|
|
4
4
|
const core_1 = require("../../core");
|
|
5
5
|
const tokens_1 = require("../../tokens");
|
|
6
|
-
// A responsive line chart — measured from
|
|
6
|
+
// A responsive line chart — measured from Reports historical charts: a
|
|
7
7
|
// brand line with a soft area fill over dashed horizontal gridlines, a value
|
|
8
8
|
// axis on the left, and category labels below. The plot is an SVG stretched to
|
|
9
9
|
// its box (non-scaling stroke keeps the line crisp); axes are HTML.
|
|
@@ -3,8 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.menuRecipe = void 0;
|
|
4
4
|
const core_1 = require("../../core");
|
|
5
5
|
const tokens_1 = require("../../tokens");
|
|
6
|
-
// A dropdown menu — same popover surface
|
|
7
|
-
// menus (measured from
|
|
6
|
+
// A dropdown menu — same popover surface used for ⋯ / sort / filter
|
|
7
|
+
// menus (measured from listboxes): radius 12, 4px padding, a layered
|
|
8
8
|
// soft shadow, over 32px items (radius 8, icon + label + optional shortcut /
|
|
9
9
|
// check). The content is rendered inside this relative root so it keeps these
|
|
10
10
|
// nested styles while escaping the trigger's own box.
|
|
@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.multiselectRecipe = void 0;
|
|
4
4
|
const core_1 = require("../../core");
|
|
5
5
|
const tokens_1 = require("../../tokens");
|
|
6
|
-
// A multi-select / tag editor — measured from
|
|
6
|
+
// A multi-select / tag editor — measured from a cell tag picker: an
|
|
7
7
|
// outlined trigger showing the selected values as coloured chips, opening a
|
|
8
8
|
// popover with a search field over rows of "[coloured chip] … [checkbox]" that
|
|
9
9
|
// toggle on click. The popover keeps these nested styles by rendering inside
|
|
@@ -4,7 +4,7 @@ exports.progressRecipe = void 0;
|
|
|
4
4
|
const core_1 = require("../../core");
|
|
5
5
|
const tokens_1 = require("../../tokens");
|
|
6
6
|
// A progress indicator — a continuous brand-filled track, or a segmented row of
|
|
7
|
-
// pills (
|
|
7
|
+
// pills (a "Getting started 3/6" bar).
|
|
8
8
|
const config = (0, core_1.defineRecipe)({
|
|
9
9
|
name: "progress",
|
|
10
10
|
base: `display: block; box-sizing: border-box; height: 6px; border-radius: ${tokens_1.contract.radius.full}; background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 8%, transparent); overflow: hidden;
|
|
@@ -5,8 +5,8 @@ const core_1 = require("../../core");
|
|
|
5
5
|
const tokens_1 = require("../../tokens");
|
|
6
6
|
// seed-design's quantity-picker, shape for shape, in crisp's colours.
|
|
7
7
|
//
|
|
8
|
-
//
|
|
9
|
-
// as with Slider there is nothing
|
|
8
|
+
// No stepper exists — quantity-ish fields are plain number inputs — so
|
|
9
|
+
// as with Slider there is nothing measured to draw from and the GEOMETRY is
|
|
10
10
|
// seed's own, read from `@seed-design/css/recipes/quantity-picker.css`:
|
|
11
11
|
//
|
|
12
12
|
// size root height / button square radius icon text
|
|
@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.radiogroupRecipe = void 0;
|
|
4
4
|
const core_1 = require("../../core");
|
|
5
5
|
const tokens_1 = require("../../tokens");
|
|
6
|
-
// A radio group with two shapes, measured from
|
|
6
|
+
// A radio group with two shapes, measured from settings: the default is
|
|
7
7
|
// a column of rows (a 16px ring that fills brand when selected + a label); the
|
|
8
8
|
// `card` variant is a row of bordered preview cards (radius 16) whose border
|
|
9
9
|
// turns brand (#266df0) when selected — the Appearance "Theme" picker.
|
|
@@ -3,8 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.resizablepanelRecipe = void 0;
|
|
4
4
|
const core_1 = require("../../core");
|
|
5
5
|
const tokens_1 = require("../../tokens");
|
|
6
|
-
//
|
|
7
|
-
//
|
|
6
|
+
// The adjustable-panel primitive (measured live). Two elements carry the
|
|
7
|
+
// layout: an
|
|
8
8
|
// invisible SPACER that reserves flow width (it alone animates `width`, a
|
|
9
9
|
// cheap reflow of a leaf node) and the PANEL, taken out of flow with
|
|
10
10
|
// `position: absolute` and drawn on top of the spacer. That split is what
|
|
@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.segmentedRecipe = void 0;
|
|
4
4
|
const core_1 = require("../../core");
|
|
5
5
|
const tokens_1 = require("../../tokens");
|
|
6
|
-
// A segmented control —
|
|
6
|
+
// A segmented control — a view switcher: a subtle track holding options,
|
|
7
7
|
// the selected one raised on a white pill.
|
|
8
8
|
const config = (0, core_1.defineRecipe)({
|
|
9
9
|
name: "segmented",
|
|
@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.selectRecipe = void 0;
|
|
4
4
|
const core_1 = require("../../core");
|
|
5
5
|
const tokens_1 = require("../../tokens");
|
|
6
|
-
// A select / dropdown, measured from
|
|
6
|
+
// A select / dropdown, measured from settings: a 32px combobox trigger
|
|
7
7
|
// (radius 9, value + a 16px chevron) over a listbox — radius 12, 4px padding, a
|
|
8
8
|
// layered soft shadow — of 32px options (radius 8, 6/8 padding) that show a
|
|
9
9
|
// check on the selected one and highlight on hover / keyboard. The listbox is
|
|
@@ -57,7 +57,7 @@ const config = (0, core_1.defineRecipe)({
|
|
|
57
57
|
`,
|
|
58
58
|
variants: {
|
|
59
59
|
// ghost: borderless at rest (transparent), reveals a subtle fill on hover —
|
|
60
|
-
//
|
|
60
|
+
// inline selects (e.g. the sort configurator).
|
|
61
61
|
variant: {
|
|
62
62
|
default: "",
|
|
63
63
|
ghost: `
|
|
@@ -5,9 +5,9 @@ const core_1 = require("../../core");
|
|
|
5
5
|
const tokens_1 = require("../../tokens");
|
|
6
6
|
// seed-design's slider, shape for shape, in crisp's colours.
|
|
7
7
|
//
|
|
8
|
-
//
|
|
8
|
+
// No slider ships anywhere — Records, Reports, Settings and the record
|
|
9
9
|
// pages contain no `input[type=range]` or `[role=slider]` — so there is nothing
|
|
10
|
-
//
|
|
10
|
+
// measured to draw from. The GEOMETRY is therefore seed's own, read from
|
|
11
11
|
// `@seed-design/css/recipes/slider.css`: a 26px control row, a 4px track on
|
|
12
12
|
// `radius.full`, a 20px thumb whose visible disc is an `::after` that scales to
|
|
13
13
|
// 1.2 while dragging, and a 2px focus ring offset 2px.
|
|
@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.stagebarRecipe = void 0;
|
|
4
4
|
const core_1 = require("../../core");
|
|
5
5
|
const tokens_1 = require("../../tokens");
|
|
6
|
-
// A pipeline stage indicator —
|
|
6
|
+
// A pipeline stage indicator — a Deal-stage Highlight bar: one segment per
|
|
7
7
|
// stage, each tinted with its stage colour, the current stage at full strength.
|
|
8
8
|
const config = (0, core_1.defineRecipe)({
|
|
9
9
|
name: "stagebar",
|
|
@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.statcardRecipe = void 0;
|
|
4
4
|
const core_1 = require("../../core");
|
|
5
5
|
const tokens_1 = require("../../tokens");
|
|
6
|
-
// A single-metric KPI tile — measured from
|
|
6
|
+
// A single-metric KPI tile — measured from a Reports "Insight" number
|
|
7
7
|
// report: a small muted label, a large semibold value, and an optional delta
|
|
8
8
|
// pill (green up / red down) with a caption. Fills its container.
|
|
9
9
|
const config = (0, core_1.defineRecipe)({
|
|
@@ -21,7 +21,7 @@ const config = (0, core_1.defineRecipe)({
|
|
|
21
21
|
& .statcard-delta[data-trend="flat"] { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 6%, transparent); color: ${tokens_1.contract.fgMuted}; }`,
|
|
22
22
|
variants: {
|
|
23
23
|
// Opt-in chrome for consumers who want the tile self-contained instead of
|
|
24
|
-
// hand-wrapping it in <Card><CardBody>. Not measured as part of the
|
|
24
|
+
// hand-wrapping it in <Card><CardBody>. Not measured as part of the
|
|
25
25
|
// report tile itself (the tile sits bare inside the report's own Card —
|
|
26
26
|
// see the docs page) — reuses Card's exact border/radius/bg rather than
|
|
27
27
|
// inventing a new value, since it is only ever an explicit opt-in.
|
|
@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.switchRecipe = void 0;
|
|
4
4
|
const core_1 = require("../../core");
|
|
5
5
|
const tokens_1 = require("../../tokens");
|
|
6
|
-
//
|
|
6
|
+
// A settings toggle, measured from the live app: a 24×16 pill track that
|
|
7
7
|
// flips from a muted grey to brand blue (#266df0), with a 12px white thumb
|
|
8
8
|
// (2px inset) that slides 8px across. background + transform both animate .2s.
|
|
9
9
|
const config = (0, core_1.defineRecipe)({
|
|
@@ -5,7 +5,7 @@ const core_1 = require("../../core");
|
|
|
5
5
|
const tokens_1 = require("../../tokens");
|
|
6
6
|
// A general-purpose, composable data table — the lightweight primitive for
|
|
7
7
|
// arbitrary tabular data (as opposed to `product/recordstable`, which is a
|
|
8
|
-
// faithful rebuild of
|
|
8
|
+
// faithful rebuild of a heavy records grid). It carries the SAME measured
|
|
9
9
|
// grid styling as RecordsTable — 36px rows, a 40px header, hairline vertical +
|
|
10
10
|
// horizontal grid lines — so `DataTable` (built on this) matches that polish.
|
|
11
11
|
const config = (0, core_1.defineRecipe)({
|
|
@@ -2,14 +2,14 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.toolbarChromeBody = exports.toolbarChromeHead = void 0;
|
|
4
4
|
const tokens_1 = require("../../tokens");
|
|
5
|
-
// The measured chrome of
|
|
5
|
+
// The measured chrome of the table toolbar: the Sort/Filter controls, the
|
|
6
6
|
// menu/popover surface they open into, the sort-condition rows, and the filter
|
|
7
7
|
// chips. It lives here, parameterised by class prefix, because TWO surfaces
|
|
8
8
|
// render it — the standalone `TableToolbar` primitive and `RecordsTable`, whose
|
|
9
9
|
// markup predates it and must keep its own `recordstable-` class names.
|
|
10
10
|
//
|
|
11
11
|
// These strings were MOVED out of `recordstable.recipe.ts` verbatim, not
|
|
12
|
-
// retyped: every value is still the one measured
|
|
12
|
+
// retyped: every value is still the one originally measured. Do not "tidy" them.
|
|
13
13
|
//
|
|
14
14
|
// It comes in two halves because RecordsTable interleaves three rules of its own
|
|
15
15
|
// (the context-menu z-index and the column drop-target) into the middle of the
|
|
@@ -4,7 +4,7 @@ exports.tabletoolbarRecipe = void 0;
|
|
|
4
4
|
const core_1 = require("../../core");
|
|
5
5
|
const tokens_1 = require("../../tokens");
|
|
6
6
|
const tabletoolbar_chrome_1 = require("./tabletoolbar.chrome");
|
|
7
|
-
//
|
|
7
|
+
// The table toolbar, measured: 28px controls, the Sort/Filter buttons and
|
|
8
8
|
// the menus they open, sort-condition rows, and the filter chips. The chrome
|
|
9
9
|
// itself lives in ./tabletoolbar.chrome.ts because RecordsTable renders the
|
|
10
10
|
// same measured surface under its own class prefix — one source, two prefixes,
|
|
@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.tabsRecipe = void 0;
|
|
4
4
|
const core_1 = require("../../core");
|
|
5
5
|
const tokens_1 = require("../../tokens");
|
|
6
|
-
//
|
|
6
|
+
// Record-view tabs: a row of segmented tab buttons over a 1px baseline.
|
|
7
7
|
// The active tab is a light pill — bg #fbfbfb + inset ring borderSubtle, r8 —
|
|
8
8
|
// with a 2px ink underline that slides along the baseline; inactive tabs are
|
|
9
9
|
// muted and fill to a subtle pill on hover. Each tab carries a 16px leading icon
|
|
@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.textareaRecipe = void 0;
|
|
4
4
|
const core_1 = require("../../core");
|
|
5
5
|
const tokens_1 = require("../../tokens");
|
|
6
|
-
// A multiline text field, measured from
|
|
6
|
+
// A multiline text field, measured from a settings "Personal context" field: an
|
|
7
7
|
// inset 1px ring (radius 8), 14px text, 6/10 padding, and an optional character
|
|
8
8
|
// counter pinned bottom-right (12px, muted). Focus rings the field brand.
|
|
9
9
|
const config = (0, core_1.defineRecipe)({
|
|
@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.tooltipRecipe = void 0;
|
|
4
4
|
const core_1 = require("../../core");
|
|
5
5
|
const tokens_1 = require("../../tokens");
|
|
6
|
-
// The floating bubble for a Tooltip —
|
|
6
|
+
// The floating bubble for a Tooltip — a dark hint chip. Applied to the
|
|
7
7
|
// portaled bubble itself (not a wrapper), so its styles survive the portal.
|
|
8
8
|
const config = (0, core_1.defineRecipe)({
|
|
9
9
|
name: "tooltip",
|
|
@@ -4,7 +4,7 @@ exports.withDescribedBy = withDescribedBy;
|
|
|
4
4
|
/**
|
|
5
5
|
* Zag's dialog machine always advertises a description: `getContentProps()`
|
|
6
6
|
* returns an `aria-describedby` pointing at the id of a description element.
|
|
7
|
-
* crisp renders no such element —
|
|
7
|
+
* crisp renders no such element — the measured modals have a title and a body, no
|
|
8
8
|
* description line — so the reference dangles, and a dangling id is not a
|
|
9
9
|
* relationship a screen reader can follow.
|
|
10
10
|
*
|
package/dist/cjs/index.js
CHANGED
|
@@ -70,7 +70,7 @@ __exportStar(require("./components/tooltip"), exports);
|
|
|
70
70
|
__exportStar(require("./components/wheelpicker"), exports);
|
|
71
71
|
__exportStar(require("./core"), exports);
|
|
72
72
|
// product surfaces (product/) — faithful, pixel-measured rebuilds of specific
|
|
73
|
-
//
|
|
73
|
+
// product screens (Sidebar, RecordsTable, RecordPage, Inbox, …). Use them as-is
|
|
74
74
|
// or as composition references for your own data; `components/` above holds
|
|
75
75
|
// the generic primitives (Table, DataTable, Button, …) to build your own UI from.
|
|
76
76
|
__exportStar(require("./product/appshell"), exports);
|
|
@@ -4,7 +4,7 @@ exports.appshellRecipe = void 0;
|
|
|
4
4
|
const core_1 = require("../../core");
|
|
5
5
|
const tokens_1 = require("../../tokens");
|
|
6
6
|
// App-shell layout: a collapsible + resizable sidebar pane next to a main pane,
|
|
7
|
-
// mirroring
|
|
7
|
+
// mirroring a familiar app-window layout. The sidebar pane clips (never squishes)
|
|
8
8
|
// when collapsing, and a drag handle on its edge resizes it.
|
|
9
9
|
const config = (0, core_1.defineRecipe)({
|
|
10
10
|
name: "appshell",
|
|
@@ -3,12 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.authshellRecipe = void 0;
|
|
4
4
|
const core_1 = require("../../core");
|
|
5
5
|
const tokens_1 = require("../../tokens");
|
|
6
|
-
//
|
|
6
|
+
// A welcome/auth surface — measured live,
|
|
7
7
|
// 2026-09-15. A centered page frame holding a two-pane card: the form on the
|
|
8
8
|
// left, an optional product preview on the right, with an optional top
|
|
9
9
|
// progress bar and a footer under the card. Every value below is measured
|
|
10
10
|
// from the live app, EXCEPT the 1200px preview-hiding breakpoint (called out
|
|
11
|
-
// at the container query below) —
|
|
11
|
+
// at the container query below) — the pane drops out in JS somewhere between a
|
|
12
12
|
// measured 954px and 1393px viewport width, so 1200px is chosen, not measured.
|
|
13
13
|
const config = (0, core_1.defineRecipe)({
|
|
14
14
|
name: "authshell",
|
|
@@ -51,7 +51,7 @@ const config = (0, core_1.defineRecipe)({
|
|
|
51
51
|
& .authshell-body .button { height: 36px; padding-inline: ${tokens_1.contract.space["3"]}; border-radius: 10px; }
|
|
52
52
|
& .authshell-body .button--intent_primary { box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06), 0 2px 4px -2px rgba(38,109,240,0.12), 0 3px 6px -2px rgba(38,109,240,0.08); }
|
|
53
53
|
|
|
54
|
-
/*
|
|
54
|
+
/* The preview pane drops out in JS on narrow viewports (measured: two
|
|
55
55
|
panes at 1393px, one at 954px), so 1200px is a chosen threshold inside
|
|
56
56
|
that bracket, not a measured value. A CONTAINER query, not a media
|
|
57
57
|
query: the shell is embedded in the docs inside an ~800px column, where
|
|
@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.boardRecipe = void 0;
|
|
4
4
|
const core_1 = require("../../core");
|
|
5
5
|
const tokens_1 = require("../../tokens");
|
|
6
|
-
// A kanban board — measured from
|
|
6
|
+
// A kanban board — measured from a Deals pipeline: horizontally scrolling
|
|
7
7
|
// columns (dot + title + count header, a "New" button, a stack of draggable
|
|
8
8
|
// cards), with the hovered drop column highlighted.
|
|
9
9
|
const config = (0, core_1.defineRecipe)({
|
|
@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.entitycardRecipe = void 0;
|
|
4
4
|
const core_1 = require("../../core");
|
|
5
5
|
const tokens_1 = require("../../tokens");
|
|
6
|
-
// A note / entity card — measured from
|
|
6
|
+
// A note / entity card — measured from a Notes grid: a bordered white card
|
|
7
7
|
// with an author row (avatar + name) at the top, a title, a clamped excerpt,
|
|
8
8
|
// and a footer row (avatar + name … date). The whole card is clickable.
|
|
9
9
|
const config = (0, core_1.defineRecipe)({
|
|
@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.flowcanvasRecipe = void 0;
|
|
4
4
|
const core_1 = require("../../core");
|
|
5
5
|
const tokens_1 = require("../../tokens");
|
|
6
|
-
// A pannable, zoomable node canvas — measured from
|
|
6
|
+
// A pannable, zoomable node canvas — measured from a Workflows editor:
|
|
7
7
|
// a dotted-grid background, draggable node cards, and connecting edges with dots.
|
|
8
8
|
const config = (0, core_1.defineRecipe)({
|
|
9
9
|
name: "flowcanvas",
|
|
@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.inboxRecipe = void 0;
|
|
4
4
|
const core_1 = require("../../core");
|
|
5
5
|
const tokens_1 = require("../../tokens");
|
|
6
|
-
// A notifications inbox panel — measured from
|
|
6
|
+
// A notifications inbox panel — measured from a notification flyout: a
|
|
7
7
|
// ~380px rounded panel with a title, "Notifications / Requests" tabs (with
|
|
8
8
|
// counts), then notification rows (avatar + message + time + unread dot) or a
|
|
9
9
|
// centred empty state. Drop it in a Popover for the flyout, or use standalone.
|
|
@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.listpageRecipe = void 0;
|
|
4
4
|
const core_1 = require("../../core");
|
|
5
5
|
const tokens_1 = require("../../tokens");
|
|
6
|
-
// The entity-list page shell — measured from
|
|
6
|
+
// The entity-list page shell — measured from Reports / Sequences / Tasks
|
|
7
7
|
// / Notes list views: a view-bar toolbar (leading Sort/Filter, trailing view
|
|
8
8
|
// toggle / settings / New, and a record count), an optional dashed "Favorites"
|
|
9
9
|
// region, then a list with column headers and time-grouped 52px rows.
|