@crisp-ui-kit/crisp 0.31.4 → 0.31.5
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/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/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/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/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/product/recordstable/recordstable.tag.d.ts +1 -1
- package/package.json +1 -1
|
@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.recordpageRecipe = void 0;
|
|
4
4
|
const core_1 = require("../../core");
|
|
5
5
|
const tokens_1 = require("../../tokens");
|
|
6
|
-
// The full-page company record view
|
|
6
|
+
// The full-page company record view opened when you click into a record —
|
|
7
7
|
// measured from the live app. A slim top bar (breadcrumb · logo · name 16/600 ·
|
|
8
8
|
// actions), then a two-column body: a 320px left "Record Details" attribute
|
|
9
9
|
// column (transparent, border-right) and a flexible main area whose tab bar
|
|
@@ -53,7 +53,7 @@ const config = (0, core_1.defineRecipe)({
|
|
|
53
53
|
& .recordpage-section { padding-top: ${tokens_1.contract.space["2"]}; }
|
|
54
54
|
& .recordpage-section-title { font-size: ${tokens_1.contract.text.sm}; font-weight: ${tokens_1.contract.weight.medium}; letter-spacing: -0.12px; color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 63%, transparent); padding: ${tokens_1.contract.space["1"]}; }
|
|
55
55
|
/* main-area section headers (Highlights / Activity / Emails / Notes / Tasks)
|
|
56
|
-
are 14px
|
|
56
|
+
are 14px; the left column's (Record Details / Lists) stay 12px. */
|
|
57
57
|
& .recordpage-main .recordpage-section-title { font-size: ${tokens_1.contract.text.lg}; }
|
|
58
58
|
& .recordpage-detailhead { display: flex; align-items: center; gap: ${tokens_1.contract.space["0.5"]}; margin-bottom: ${tokens_1.contract.space["3"]}; padding-inline-end: ${tokens_1.contract.space["0.5"]}; }
|
|
59
59
|
& .recordpage-collapse { display: inline-flex; align-items: center; gap: 2px; flex: 1; min-width: 0; margin: 0; border: none; background: none; padding: ${tokens_1.contract.space["1"]}; border-radius: ${tokens_1.contract.radius.md}; font-family: inherit; font-size: ${tokens_1.contract.text.sm}; font-weight: ${tokens_1.contract.weight.medium}; letter-spacing: -0.12px; color: ${tokens_1.contract.fgMuted}; cursor: pointer; text-align: start; }
|
|
@@ -5,7 +5,7 @@ const core_1 = require("../../core");
|
|
|
5
5
|
const tokens_1 = require("../../tokens");
|
|
6
6
|
const recordstable_tag_1 = require("../recordstable/recordstable.tag");
|
|
7
7
|
// A right-side record peek panel — slides in over the main content to show one
|
|
8
|
-
// record's fields, the way
|
|
8
|
+
// record's fields, the way a row peek panel opens. Positioned absolutely inside a
|
|
9
9
|
// relative container (the app main area); slides in via @starting-style.
|
|
10
10
|
const config = (0, core_1.defineRecipe)({
|
|
11
11
|
name: "recordpanel",
|
|
@@ -5,7 +5,7 @@ const tabletoolbar_chrome_1 = require("../../components/tabletoolbar/tabletoolba
|
|
|
5
5
|
const core_1 = require("../../core");
|
|
6
6
|
const tokens_1 = require("../../tokens");
|
|
7
7
|
const recordstable_tag_1 = require("./recordstable.tag");
|
|
8
|
-
//
|
|
8
|
+
// A record grid, measured: 36px rows, 1px borderSubtle (#eeeff1) grid
|
|
9
9
|
// lines on BOTH axes, sticky checkbox + entity (first) columns, entity = 16px
|
|
10
10
|
// avatar + 14px/500 name, 28px toolbar controls, a floating bulk-action bar.
|
|
11
11
|
//
|
|
@@ -115,7 +115,7 @@ ${(0, tabletoolbar_chrome_1.toolbarChromeBody)("recordstable")}
|
|
|
115
115
|
/* box-shadow has no logical form either: the bleed follows the scrolled
|
|
116
116
|
content, which is the opposite side under RTL. */
|
|
117
117
|
[dir="rtl"] & .recordstable-scroll[data-scrolled] .recordstable-col-entity { box-shadow: -6px 0 16px 4px rgba(0,0,0,0.12); }
|
|
118
|
-
/* AI-enriched values carry a purple wash. Measured
|
|
118
|
+
/* AI-enriched values carry a purple wash. Measured live:
|
|
119
119
|
a full-bleed overlay at #9b69ff 4% (== bgPurple), composited OVER
|
|
120
120
|
whatever row-state background the cell already has, which is why it
|
|
121
121
|
is an ::after and not a background. */
|
|
@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.recordTagCss = void 0;
|
|
4
4
|
const tokens_1 = require("../../tokens");
|
|
5
5
|
/**
|
|
6
|
-
* The record tag/chip, measured
|
|
6
|
+
* The record tag/chip, measured live: 22px tall, `padding: 0 4px`,
|
|
7
7
|
* `border-radius: ${c.radius.chip}`, 14px/20px at weight 500, and a 1px inset ring in the
|
|
8
8
|
* tone's colour.
|
|
9
9
|
*
|
|
@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.richtextRecipe = void 0;
|
|
4
4
|
const core_1 = require("../../core");
|
|
5
5
|
const tokens_1 = require("../../tokens");
|
|
6
|
-
// A block rich-text editor — measured from
|
|
6
|
+
// A block rich-text editor — measured from a Notes editor: a large 32/36
|
|
7
7
|
// title, a 14/20 prose body (headings, lists, quote, code, marks, links), and a
|
|
8
8
|
// floating selection toolbar. Built on contentEditable so it stays dependency-
|
|
9
9
|
// free. Placeholders show via [data-empty]::before.
|
|
@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.settingssectionRecipe = void 0;
|
|
4
4
|
const core_1 = require("../../core");
|
|
5
5
|
const tokens_1 = require("../../tokens");
|
|
6
|
-
// A settings section — measured from
|
|
6
|
+
// A settings section — measured from Settings pages: a 16px/600 title
|
|
7
7
|
// with an optional subtitle, then a stack of rows (form fields, toggles…). Rows
|
|
8
8
|
// gap evenly; an optional trailing action sits on the title row.
|
|
9
9
|
const config = (0, core_1.defineRecipe)({
|
|
@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.settingsshellRecipe = void 0;
|
|
4
4
|
const core_1 = require("../../core");
|
|
5
5
|
const tokens_1 = require("../../tokens");
|
|
6
|
-
// The Settings layout — measured from
|
|
6
|
+
// The Settings layout — measured from a Settings screen: a 256px left nav with a
|
|
7
7
|
// back header, a search field, and grouped nav items (active row raised), beside
|
|
8
8
|
// a scrolling content pane. Sits inside whatever height its container gives it.
|
|
9
9
|
const config = (0, core_1.defineRecipe)({
|
|
@@ -18,7 +18,7 @@ const config = (0, core_1.defineRecipe)({
|
|
|
18
18
|
|
|
19
19
|
& .settingsshell-search { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; height: 32px; margin-bottom: ${tokens_1.contract.space["2"]}; padding: 0 ${tokens_1.contract.space["2.5"]}; border-radius: ${tokens_1.contract.radius.md}; background: ${tokens_1.contract.bgSurface}; box-shadow: inset 0 0 0 1px ${tokens_1.contract.borderDefault}; color: ${tokens_1.contract.fgMuted}; }
|
|
20
20
|
/* The field box owns the ring, so focus has to move it -- the inner
|
|
21
|
-
input kills its own outline. Measured
|
|
21
|
+
input kills its own outline. Measured live: a focused field's
|
|
22
22
|
input carries box-shadow: none while its wrapper carries
|
|
23
23
|
inset 0 0 0 1px #266df0. */
|
|
24
24
|
& .settingsshell-search:focus-within { box-shadow: inset 0 0 0 1px ${tokens_1.contract.bgBrandSolid}; }
|
|
@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.tasklistRecipe = void 0;
|
|
4
4
|
const core_1 = require("../../core");
|
|
5
5
|
const tokens_1 = require("../../tokens");
|
|
6
|
-
// A task list — measured from
|
|
6
|
+
// A task list — measured from a Tasks page: optional group headers, then
|
|
7
7
|
// rows of a round complete-checkbox + title + trailing meta (due date, record,
|
|
8
8
|
// assignee). Completed rows strike through; overdue due-dates go red.
|
|
9
9
|
const config = (0, core_1.defineRecipe)({
|
|
@@ -3,9 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.trialbannerRecipe = void 0;
|
|
4
4
|
const core_1 = require("../../core");
|
|
5
5
|
const tokens_1 = require("../../tokens");
|
|
6
|
-
// A compact trial / upgrade banner — measured from
|
|
6
|
+
// A compact trial / upgrade banner — measured from a sidebar footer: an
|
|
7
7
|
// icon + a message on the left and a small action pill on the right, in a 28px
|
|
8
|
-
// row. The action uses
|
|
8
|
+
// row. The action uses the measured soft-glow outlined-button shadow.
|
|
9
9
|
const config = (0, core_1.defineRecipe)({
|
|
10
10
|
name: "trialbanner",
|
|
11
11
|
base: `display: flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; box-sizing: border-box; min-height: 28px;
|
|
@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.viewtoggleRecipe = void 0;
|
|
4
4
|
const core_1 = require("../../core");
|
|
5
5
|
const tokens_1 = require("../../tokens");
|
|
6
|
-
// A compact icon toggle — measured from
|
|
6
|
+
// A compact icon toggle — measured from a list/grid switch: a 28px track
|
|
7
7
|
// (radius 10, ~5% ink) padded 2px, holding 24px icon tiles (radius 8). The
|
|
8
8
|
// selected tile gets a raised surface with a soft shadow.
|
|
9
9
|
const config = (0, core_1.defineRecipe)({
|
package/dist/columncalc.css
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
shrink the button back to its text. Make the wrapper fill too, so the
|
|
5
5
|
whole cell stays clickable. */
|
|
6
6
|
& .menu { width: 100%; height: 100%; }
|
|
7
|
-
/*
|
|
7
|
+
/* The hit target is the WHOLE summary cell -- measured 246x37 with
|
|
8
8
|
padding 0 12px, not a content-sized chip. Clicking anywhere in the cell
|
|
9
9
|
opens the aggregation menu. */
|
|
10
10
|
& .columncalc-trigger { display: flex; align-items: center; gap: var(--space-1); width: 100%; height: 100%; min-height: var(--size-tableRow); margin: 0; padding: 0 var(--space-3); border: none; border-radius: var(--radius-md); background: transparent; color: var(--fg-muted); font-family: inherit; font-size: var(--text-md); font-weight: var(--weight-medium); white-space: nowrap; cursor: pointer; transition: background-color .12s, color .12s; }
|
package/dist/datatable.css
CHANGED
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
& .datatable-search input::placeholder { color: var(--fg-muted); }
|
|
8
8
|
& .datatable-search input:focus { box-shadow: inset 0 0 0 1px var(--bg-brand-solid); }
|
|
9
9
|
& .datatable-count { margin-inline-start: auto; font-size: var(--text-md); color: var(--fg-muted); }
|
|
10
|
-
/*
|
|
10
|
+
/* The header cell has no padding of its own -- the button owns the
|
|
11
11
|
full cell so the whole header is clickable (its own inset is 12px).
|
|
12
12
|
Mirrors the summary-row fix. */
|
|
13
13
|
& th { padding: 0; }
|
|
@@ -21,11 +21,11 @@
|
|
|
21
21
|
& th .menu { width: 100%; height: 100%; }
|
|
22
22
|
& .datatable-th-inner { display: inline-flex; align-items: center; gap: var(--space-1-5); width: 100%; min-width: 0; height: 100%; }
|
|
23
23
|
& .datatable-th-inner > svg { flex-shrink: 0; color: var(--fg-muted); }
|
|
24
|
-
/*
|
|
24
|
+
/* The summary cell has NO padding of its own -- the calculation trigger
|
|
25
25
|
owns the whole 246x37 area so a click anywhere in the cell opens the
|
|
26
26
|
menu. Zero the cell's inset and let ColumnCalc supply the 12px. */
|
|
27
27
|
& tfoot td { padding: 0; }
|
|
28
|
-
/* Group heading row --
|
|
28
|
+
/* Group heading row -- a view is grouped under a subtle label with the
|
|
29
29
|
bucket's count beside it. */
|
|
30
30
|
& .datatable-viewsettings { display: inline-flex; align-items: center; gap: var(--space-1-5); height: var(--size-row); margin: 0; padding: 0 var(--space-2); border: none; border-radius: var(--radius-md); background: transparent; color: var(--fg-muted); font-family: inherit; font-size: var(--text-md); font-weight: var(--weight-medium); white-space: nowrap; cursor: pointer; transition: background-color .12s, color .12s; }
|
|
31
31
|
& .datatable-viewsettings:hover { background: color-mix(in srgb, var(--fg-primary) 4%, transparent); color: var(--fg-primary); }
|
|
@@ -83,13 +83,13 @@
|
|
|
83
83
|
& .datatable-tag[data-tone="orange"] { background: color-mix(in srgb, var(--bg-orange) 16%, transparent); color: color-mix(in srgb, var(--bg-orange) 82%, var(--fg-primary)); }
|
|
84
84
|
& .datatable-num { font-variant-numeric: tabular-nums; }
|
|
85
85
|
& .datatable-muted { color: var(--fg-muted); }
|
|
86
|
-
/* row drag-to-reorder --
|
|
86
|
+
/* row drag-to-reorder -- a Settings > Objects > Attributes screen measures
|
|
87
87
|
a leading 20px grip column, a 16px grip icon, and the row's own
|
|
88
88
|
hairline doubling as the drop indicator (it tints toward the brand
|
|
89
89
|
colour as the active drop target). The affordance + geometry are
|
|
90
90
|
measured; the drag MECHANISM is crisp's existing house idiom -- HTML5
|
|
91
91
|
draggable + dataTransfer, the same one column reorder already uses
|
|
92
|
-
(RecordsTable's reorderColumn) -- not
|
|
92
|
+
(RecordsTable's reorderColumn) -- not a proprietary
|
|
93
93
|
pointer-events implementation. */
|
|
94
94
|
& .datatable-col-grip { width: 20px; padding: 0; text-align: center; }
|
|
95
95
|
& .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: var(--fg-muted); cursor: grab; }
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { defineRecipe, resolveRecipe } from "../../core/index.js";
|
|
2
2
|
import { contract as c } from "../../tokens/index.js";
|
|
3
|
-
// A stack of collapsible sections —
|
|
3
|
+
// A stack of collapsible sections — sidebar sections / "view all".
|
|
4
4
|
// The panel animates height via the grid-template-rows 0fr->1fr technique.
|
|
5
5
|
const config = defineRecipe({
|
|
6
6
|
name: "accordion",
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { defineRecipe, resolveRecipe } from "../../core/index.js";
|
|
2
2
|
import { contract as c } from "../../tokens/index.js";
|
|
3
|
-
// A responsive bar chart — measured from
|
|
3
|
+
// A responsive bar chart — measured from a Reports dashboard: brand bars
|
|
4
4
|
// with rounded tops over dashed horizontal gridlines, a value axis on the left,
|
|
5
5
|
// and category labels below. Pure CSS (no SVG), so it scales with its container.
|
|
6
6
|
const config = defineRecipe({
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { defineRecipe, resolveRecipe, rtlFlipCss } from "../../core/index.js";
|
|
2
2
|
import { contract as c } from "../../tokens/index.js";
|
|
3
|
-
// A breadcrumb trail —
|
|
3
|
+
// A breadcrumb trail — record-page nav ("Companies / Google").
|
|
4
4
|
const config = defineRecipe({
|
|
5
5
|
name: "breadcrumb",
|
|
6
6
|
base: `display: flex; align-items: center; gap: ${c.space["0.5"]}; font-family: ${c.font.sans}; font-size: ${c.text.lg};
|
|
@@ -2,7 +2,7 @@ import { defineRecipe, resolveRecipe } from "../../core/index.js";
|
|
|
2
2
|
import { contract as c, elevation as e } from "../../tokens/index.js";
|
|
3
3
|
// A floating bulk-action bar — the pill that rises from the bottom of a
|
|
4
4
|
// selection surface (a table, a gallery) when one or more rows are selected.
|
|
5
|
-
// Measured from
|
|
5
|
+
// Measured from a records-table bulk bar. The root is an absolutely-
|
|
6
6
|
// positioned anchor that centres the bar with flex (NOT a transform): a resting
|
|
7
7
|
// transform on the bar would reparent any `position: fixed` menu inside it (the
|
|
8
8
|
// "More" overflow), detaching it — the enter slide lives in @starting-style only.
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { defineRecipe, resolveRecipe } from "../../core/index.js";
|
|
2
2
|
import { contract as c } from "../../tokens/index.js";
|
|
3
|
-
// A callout / banner —
|
|
3
|
+
// A callout / banner — inline info notices (e.g. "Changes apply to all
|
|
4
4
|
// workspaces", the trial banner). Tone tints the background + icon.
|
|
5
5
|
const config = defineRecipe({
|
|
6
6
|
name: "callout",
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { defineRecipe, resolveRecipe } from "../../core/index.js";
|
|
2
2
|
import { contract as c } from "../../tokens/index.js";
|
|
3
|
-
// A 16px square checkbox measured from
|
|
3
|
+
// A 16px square checkbox measured from a record grid: r6, a subtle 1px
|
|
4
4
|
// inset ring when empty, brand fill + white check when on. The check is a
|
|
5
5
|
// data-URI SVG background so it renders reliably (input pseudo-content doesn't).
|
|
6
6
|
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\")";
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { defineRecipe, resolveRecipe } from "../../core/index.js";
|
|
2
2
|
import { contract as c } from "../../tokens/index.js";
|
|
3
|
-
//
|
|
3
|
+
// The column footer calculation. The summary row is 36px and sticky at the
|
|
4
4
|
// grid's bottom edge; each cell holds a quiet trigger that reads "Add
|
|
5
5
|
// calculation" until an aggregation is chosen, then shows the value with its
|
|
6
6
|
// operation name beside it.
|
|
@@ -11,7 +11,7 @@ const config = defineRecipe({
|
|
|
11
11
|
shrink the button back to its text. Make the wrapper fill too, so the
|
|
12
12
|
whole cell stays clickable. */
|
|
13
13
|
& .menu { width: 100%; height: 100%; }
|
|
14
|
-
/*
|
|
14
|
+
/* The hit target is the WHOLE summary cell -- measured 246x37 with
|
|
15
15
|
padding 0 12px, not a content-sized chip. Clicking anywhere in the cell
|
|
16
16
|
opens the aggregation menu. */
|
|
17
17
|
& .columncalc-trigger { display: flex; align-items: center; gap: ${c.space["1"]}; width: 100%; height: 100%; min-height: ${c.size.tableRow}; margin: 0; padding: 0 ${c.space["3"]}; border: none; border-radius: ${c.radius.md}; background: transparent; color: ${c.fgMuted}; font-family: inherit; font-size: ${c.text.md}; font-weight: ${c.weight.medium}; white-space: nowrap; cursor: pointer; transition: background-color .12s, color .12s; }
|
|
@@ -14,7 +14,7 @@ const config = defineRecipe({
|
|
|
14
14
|
& .datatable-search input::placeholder { color: ${c.fgMuted}; }
|
|
15
15
|
& .datatable-search input:focus { box-shadow: inset 0 0 0 1px ${c.bgBrandSolid}; }
|
|
16
16
|
& .datatable-count { margin-inline-start: auto; font-size: ${c.text.md}; color: ${c.fgMuted}; }
|
|
17
|
-
/*
|
|
17
|
+
/* The header cell has no padding of its own -- the button owns the
|
|
18
18
|
full cell so the whole header is clickable (its own inset is 12px).
|
|
19
19
|
Mirrors the summary-row fix. */
|
|
20
20
|
& th { padding: 0; }
|
|
@@ -28,11 +28,11 @@ const config = defineRecipe({
|
|
|
28
28
|
& th .menu { width: 100%; height: 100%; }
|
|
29
29
|
& .datatable-th-inner { display: inline-flex; align-items: center; gap: ${c.space["1.5"]}; width: 100%; min-width: 0; height: 100%; }
|
|
30
30
|
& .datatable-th-inner > svg { flex-shrink: 0; color: ${c.fgMuted}; }
|
|
31
|
-
/*
|
|
31
|
+
/* The summary cell has NO padding of its own -- the calculation trigger
|
|
32
32
|
owns the whole 246x37 area so a click anywhere in the cell opens the
|
|
33
33
|
menu. Zero the cell's inset and let ColumnCalc supply the 12px. */
|
|
34
34
|
& tfoot td { padding: 0; }
|
|
35
|
-
/* Group heading row --
|
|
35
|
+
/* Group heading row -- a view is grouped under a subtle label with the
|
|
36
36
|
bucket's count beside it. */
|
|
37
37
|
& .datatable-viewsettings { display: inline-flex; align-items: center; gap: ${c.space["1.5"]}; height: ${c.size.row}; margin: 0; padding: 0 ${c.space["2"]}; border: none; border-radius: ${c.radius.md}; background: transparent; color: ${c.fgMuted}; font-family: inherit; font-size: ${c.text.md}; font-weight: ${c.weight.medium}; white-space: nowrap; cursor: pointer; transition: background-color .12s, color .12s; }
|
|
38
38
|
& .datatable-viewsettings:hover { background: color-mix(in srgb, ${c.fgPrimary} 4%, transparent); color: ${c.fgPrimary}; }
|
|
@@ -90,13 +90,13 @@ const config = defineRecipe({
|
|
|
90
90
|
& .datatable-tag[data-tone="orange"] { background: color-mix(in srgb, ${c.bgOrange} 16%, transparent); color: color-mix(in srgb, ${c.bgOrange} 82%, ${c.fgPrimary}); }
|
|
91
91
|
& .datatable-num { font-variant-numeric: tabular-nums; }
|
|
92
92
|
& .datatable-muted { color: ${c.fgMuted}; }
|
|
93
|
-
/* row drag-to-reorder --
|
|
93
|
+
/* row drag-to-reorder -- a Settings > Objects > Attributes screen measures
|
|
94
94
|
a leading 20px grip column, a 16px grip icon, and the row's own
|
|
95
95
|
hairline doubling as the drop indicator (it tints toward the brand
|
|
96
96
|
colour as the active drop target). The affordance + geometry are
|
|
97
97
|
measured; the drag MECHANISM is crisp's existing house idiom -- HTML5
|
|
98
98
|
draggable + dataTransfer, the same one column reorder already uses
|
|
99
|
-
(RecordsTable's reorderColumn) -- not
|
|
99
|
+
(RecordsTable's reorderColumn) -- not a proprietary
|
|
100
100
|
pointer-events implementation. */
|
|
101
101
|
& .datatable-col-grip { width: 20px; padding: 0; text-align: center; }
|
|
102
102
|
& .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: ${c.fgMuted}; cursor: grab; }
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { defineRecipe, resolveRecipe } from "../../core/index.js";
|
|
2
2
|
import { contract as c } from "../../tokens/index.js";
|
|
3
|
-
// seed-design's calendar structure on
|
|
4
|
-
// markup and range model are seed's; every visual value is measured from
|
|
5
|
-
//
|
|
3
|
+
// seed-design's calendar structure on the measured scale. The behaviour,
|
|
4
|
+
// markup and range model are seed's; every visual value is measured from a
|
|
5
|
+
// live date picker (task due-date field): a 32px day on a 34px
|
|
6
6
|
// pitch, an 8px-radius highlight rather than a circle, 14/20 medium numerals and
|
|
7
7
|
// the brand blue for the selection.
|
|
8
8
|
//
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { defineRecipe, resolveRecipe } from "../../core/index.js";
|
|
2
2
|
import { contract as c } from "../../tokens/index.js";
|
|
3
|
-
// The trigger crisp's DatePicker used to own, measured
|
|
3
|
+
// The trigger crisp's DatePicker used to own, measured live: a 32px
|
|
4
4
|
// outlined chip showing the value, opening a calendar in a popover. Split out
|
|
5
|
-
// when DatePicker became seed-design's bare calendar, so this
|
|
5
|
+
// when DatePicker became seed-design's bare calendar, so this measured
|
|
6
6
|
// field survives unchanged for the consumers already using it.
|
|
7
7
|
const config = defineRecipe({
|
|
8
8
|
name: "datepickerfield",
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { defineRecipe, resolveRecipe } from "../../core/index.js";
|
|
2
2
|
import { contract as c, elevation as e } from "../../tokens/index.js";
|
|
3
|
-
// A modal dialog surface — measured from
|
|
3
|
+
// A modal dialog surface — measured from a create-record modal: a radius-16
|
|
4
4
|
// frosted-glass card (60% tinted background + 15px backdrop blur, both re-measured
|
|
5
5
|
// per theme — light uses a blue-tinted 3-layer shadow, dark drops to a plain
|
|
6
6
|
// 2-layer black shadow) with a bordered header (title + close), a scrollable
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { defineRecipe, resolveRecipe } from "../../core/index.js";
|
|
2
2
|
import { contract as c } from "../../tokens/index.js";
|
|
3
|
-
// A donut / ring chart — measured from
|
|
3
|
+
// A donut / ring chart — measured from Reports breakdown reports: a
|
|
4
4
|
// segmented ring with a centred total, plus a legend of coloured swatches with
|
|
5
5
|
// labels and values. Pure SVG ring; HTML legend.
|
|
6
6
|
const config = defineRecipe({
|
|
@@ -12,9 +12,9 @@ const config = defineRecipe({
|
|
|
12
12
|
variant: {
|
|
13
13
|
// compact icon tile (default)
|
|
14
14
|
default: ``,
|
|
15
|
-
// a large icon on a dotted-grid backdrop —
|
|
15
|
+
// a large icon on a dotted-grid backdrop — a Developers/Reports empty state
|
|
16
16
|
illustrated: `& .emptystate-icon { width: 132px; height: 96px; margin-bottom: ${c.space["2"]}; border-radius: 0; color: color-mix(in srgb, ${c.fgPrimary} 22%, transparent); background: radial-gradient(circle, color-mix(in srgb, ${c.fgPrimary} 12%, transparent) 1.2px, transparent 1.2px) 0 0 / 16px 16px; }`,
|
|
17
|
-
//
|
|
17
|
+
// A full-view empty state (measured from a filtered-to-zero records table):
|
|
18
18
|
// a 45px ringed circle icon, a 20/24 semibold heading, a 14/20 medium muted body,
|
|
19
19
|
// then a primary action. Gaps are 16 / 8 / 16 (icon→title→desc→action).
|
|
20
20
|
page: `gap: ${c.space["2"]};
|
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
import { defineRecipe, resolveRecipe } from "../../core/index.js";
|
|
2
2
|
import { contract as c } from "../../tokens/index.js";
|
|
3
|
-
// seed-design's file-upload behaviour on
|
|
3
|
+
// seed-design's file-upload behaviour on the measured scale.
|
|
4
4
|
//
|
|
5
|
-
// Measured from
|
|
5
|
+
// Measured from a record Files pane (Deal record → Files, empty state):
|
|
6
6
|
// the title is 16/20 at weight 600 in `rgb(16,17,18)` (= gray900 = fgPrimary),
|
|
7
7
|
// the hint 14/20 at weight 500 in `rgba(0,0,0,0.63)`, and the action button is
|
|
8
8
|
// 28px tall with an 8px corner.
|
|
9
9
|
//
|
|
10
|
-
//
|
|
10
|
+
// That pane draws NO boundary around itself -- the whole surface is the drop
|
|
11
11
|
// target -- but a reusable dropzone needs an edge, so the dashed affordance is
|
|
12
12
|
// crisp's own measured one from `sidebar-newlist` (1px dashed borderDefault,
|
|
13
|
-
// r8, bgRaised on hover) rather than a new invention.
|
|
13
|
+
// r8, bgRaised on hover) rather than a new invention. The drag-OVER
|
|
14
14
|
// treatment could not be measured: synthetic DragEvents do not trigger its
|
|
15
15
|
// handlers. The active state therefore reuses the brand emphasis crisp already
|
|
16
16
|
// uses for a live drag affordance (`appshell-resize[data-dragging]`).
|
|
@@ -40,12 +40,12 @@ const config = defineRecipe({
|
|
|
40
40
|
& .fileupload-zone[data-disabled] { opacity: .5; cursor: not-allowed; }
|
|
41
41
|
& .fileupload-zone[data-invalid] { border-color: ${c.bgDanger}; }
|
|
42
42
|
|
|
43
|
-
/*
|
|
43
|
+
/* "No files" 16/20 weight 600 */
|
|
44
44
|
& .fileupload-title {
|
|
45
45
|
color: ${c.fgPrimary}; font-size: ${c.text.xl}; line-height: 20px;
|
|
46
46
|
font-weight: ${c.weight.semibold};
|
|
47
47
|
}
|
|
48
|
-
/*
|
|
48
|
+
/* The hint line, 14/20 weight 500 at 63% of the foreground */
|
|
49
49
|
& .fileupload-hint {
|
|
50
50
|
color: color-mix(in srgb, ${c.fgPrimary} 63%, transparent);
|
|
51
51
|
font-size: ${c.text.lg}; line-height: 20px;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { defineRecipe, resolveRecipe } from "../../core/index.js";
|
|
2
2
|
import { contract as c } from "../../tokens/index.js";
|
|
3
|
-
// A labelled form field — measured from
|
|
3
|
+
// A labelled form field — measured from Settings forms: a 12px/500 muted
|
|
4
4
|
// label above the control, with an optional description or danger error line
|
|
5
5
|
// below. Wraps any control (Input, Select, Textarea…).
|
|
6
6
|
const config = defineRecipe({
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { defineRecipe, resolveRecipe } from "../../core/index.js";
|
|
2
2
|
import { contract as c, elevation as e } from "../../tokens/index.js";
|
|
3
|
-
// Geometry is
|
|
3
|
+
// Geometry is measured: 32/36px tall, r8/r10, 10/12px side padding.
|
|
4
4
|
// The FOCUS TREATMENT is seed-design's, measured from @seed-design/css: a 2px
|
|
5
5
|
// ring on an ::after overlay that is present-but-transparent at rest, so
|
|
6
6
|
// focusing cannot shift layout the way a width change would, and animates
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { defineRecipe, resolveRecipe } from "../../core/index.js";
|
|
2
2
|
import { contract as c } from "../../tokens/index.js";
|
|
3
|
-
// A responsive line chart — measured from
|
|
3
|
+
// A responsive line chart — measured from Reports historical charts: a
|
|
4
4
|
// brand line with a soft area fill over dashed horizontal gridlines, a value
|
|
5
5
|
// axis on the left, and category labels below. The plot is an SVG stretched to
|
|
6
6
|
// its box (non-scaling stroke keeps the line crisp); axes are HTML.
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { defineRecipe, resolveRecipe } from "../../core/index.js";
|
|
2
2
|
import { contract as c, elevation as e } from "../../tokens/index.js";
|
|
3
|
-
// A dropdown menu — same popover surface
|
|
4
|
-
// menus (measured from
|
|
3
|
+
// A dropdown menu — same popover surface used for ⋯ / sort / filter
|
|
4
|
+
// menus (measured from listboxes): radius 12, 4px padding, a layered
|
|
5
5
|
// soft shadow, over 32px items (radius 8, icon + label + optional shortcut /
|
|
6
6
|
// check). The content is rendered inside this relative root so it keeps these
|
|
7
7
|
// nested styles while escaping the trigger's own box.
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { defineRecipe, resolveRecipe } from "../../core/index.js";
|
|
2
2
|
import { contract as c, elevation as e } from "../../tokens/index.js";
|
|
3
|
-
// A multi-select / tag editor — measured from
|
|
3
|
+
// A multi-select / tag editor — measured from a cell tag picker: an
|
|
4
4
|
// outlined trigger showing the selected values as coloured chips, opening a
|
|
5
5
|
// popover with a search field over rows of "[coloured chip] … [checkbox]" that
|
|
6
6
|
// toggle on click. The popover keeps these nested styles by rendering inside
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { defineRecipe, resolveRecipe } from "../../core/index.js";
|
|
2
2
|
import { contract as c } from "../../tokens/index.js";
|
|
3
3
|
// A progress indicator — a continuous brand-filled track, or a segmented row of
|
|
4
|
-
// pills (
|
|
4
|
+
// pills (a "Getting started 3/6" bar).
|
|
5
5
|
const config = defineRecipe({
|
|
6
6
|
name: "progress",
|
|
7
7
|
base: `display: block; box-sizing: border-box; height: 6px; border-radius: ${c.radius.full}; background: color-mix(in srgb, ${c.fgPrimary} 8%, transparent); overflow: hidden;
|
|
@@ -2,8 +2,8 @@ import { defineRecipe, resolveRecipe } from "../../core/index.js";
|
|
|
2
2
|
import { contract as c } from "../../tokens/index.js";
|
|
3
3
|
// seed-design's quantity-picker, shape for shape, in crisp's colours.
|
|
4
4
|
//
|
|
5
|
-
//
|
|
6
|
-
// as with Slider there is nothing
|
|
5
|
+
// No stepper exists — quantity-ish fields are plain number inputs — so
|
|
6
|
+
// as with Slider there is nothing measured to draw from and the GEOMETRY is
|
|
7
7
|
// seed's own, read from `@seed-design/css/recipes/quantity-picker.css`:
|
|
8
8
|
//
|
|
9
9
|
// size root height / button square radius icon text
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { defineRecipe, resolveRecipe } from "../../core/index.js";
|
|
2
2
|
import { contract as c } from "../../tokens/index.js";
|
|
3
|
-
// A radio group with two shapes, measured from
|
|
3
|
+
// A radio group with two shapes, measured from settings: the default is
|
|
4
4
|
// a column of rows (a 16px ring that fills brand when selected + a label); the
|
|
5
5
|
// `card` variant is a row of bordered preview cards (radius 16) whose border
|
|
6
6
|
// turns brand (#266df0) when selected — the Appearance "Theme" picker.
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { defineRecipe, resolveRecipe } from "../../core/index.js";
|
|
2
2
|
import { contract as c, elevation as e } from "../../tokens/index.js";
|
|
3
|
-
//
|
|
4
|
-
//
|
|
3
|
+
// The adjustable-panel primitive (measured live). Two elements carry the
|
|
4
|
+
// layout: an
|
|
5
5
|
// invisible SPACER that reserves flow width (it alone animates `width`, a
|
|
6
6
|
// cheap reflow of a leaf node) and the PANEL, taken out of flow with
|
|
7
7
|
// `position: absolute` and drawn on top of the spacer. That split is what
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { defineRecipe, resolveRecipe } from "../../core/index.js";
|
|
2
2
|
import { contract as c } from "../../tokens/index.js";
|
|
3
|
-
// A segmented control —
|
|
3
|
+
// A segmented control — a view switcher: a subtle track holding options,
|
|
4
4
|
// the selected one raised on a white pill.
|
|
5
5
|
const config = defineRecipe({
|
|
6
6
|
name: "segmented",
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { defineRecipe, resolveRecipe } from "../../core/index.js";
|
|
2
2
|
import { contract as c, elevation as e } from "../../tokens/index.js";
|
|
3
|
-
// A select / dropdown, measured from
|
|
3
|
+
// A select / dropdown, measured from settings: a 32px combobox trigger
|
|
4
4
|
// (radius 9, value + a 16px chevron) over a listbox — radius 12, 4px padding, a
|
|
5
5
|
// layered soft shadow — of 32px options (radius 8, 6/8 padding) that show a
|
|
6
6
|
// check on the selected one and highlight on hover / keyboard. The listbox is
|
|
@@ -54,7 +54,7 @@ const config = defineRecipe({
|
|
|
54
54
|
`,
|
|
55
55
|
variants: {
|
|
56
56
|
// ghost: borderless at rest (transparent), reveals a subtle fill on hover —
|
|
57
|
-
//
|
|
57
|
+
// inline selects (e.g. the sort configurator).
|
|
58
58
|
variant: {
|
|
59
59
|
default: "",
|
|
60
60
|
ghost: `
|
|
@@ -2,9 +2,9 @@ import { defineRecipe, resolveRecipe } from "../../core/index.js";
|
|
|
2
2
|
import { contract as c, elevation as e } from "../../tokens/index.js";
|
|
3
3
|
// seed-design's slider, shape for shape, in crisp's colours.
|
|
4
4
|
//
|
|
5
|
-
//
|
|
5
|
+
// No slider ships anywhere — Records, Reports, Settings and the record
|
|
6
6
|
// pages contain no `input[type=range]` or `[role=slider]` — so there is nothing
|
|
7
|
-
//
|
|
7
|
+
// measured to draw from. The GEOMETRY is therefore seed's own, read from
|
|
8
8
|
// `@seed-design/css/recipes/slider.css`: a 26px control row, a 4px track on
|
|
9
9
|
// `radius.full`, a 20px thumb whose visible disc is an `::after` that scales to
|
|
10
10
|
// 1.2 while dragging, and a 2px focus ring offset 2px.
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { defineRecipe, resolveRecipe } from "../../core/index.js";
|
|
2
2
|
import { contract as c } from "../../tokens/index.js";
|
|
3
|
-
// A pipeline stage indicator —
|
|
3
|
+
// A pipeline stage indicator — a Deal-stage Highlight bar: one segment per
|
|
4
4
|
// stage, each tinted with its stage colour, the current stage at full strength.
|
|
5
5
|
const config = defineRecipe({
|
|
6
6
|
name: "stagebar",
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { defineRecipe, resolveRecipe } from "../../core/index.js";
|
|
2
2
|
import { contract as c } from "../../tokens/index.js";
|
|
3
|
-
// A single-metric KPI tile — measured from
|
|
3
|
+
// A single-metric KPI tile — measured from a Reports "Insight" number
|
|
4
4
|
// report: a small muted label, a large semibold value, and an optional delta
|
|
5
5
|
// pill (green up / red down) with a caption. Fills its container.
|
|
6
6
|
const config = defineRecipe({
|
|
@@ -18,7 +18,7 @@ const config = defineRecipe({
|
|
|
18
18
|
& .statcard-delta[data-trend="flat"] { background: color-mix(in srgb, ${c.fgPrimary} 6%, transparent); color: ${c.fgMuted}; }`,
|
|
19
19
|
variants: {
|
|
20
20
|
// Opt-in chrome for consumers who want the tile self-contained instead of
|
|
21
|
-
// hand-wrapping it in <Card><CardBody>. Not measured as part of the
|
|
21
|
+
// hand-wrapping it in <Card><CardBody>. Not measured as part of the
|
|
22
22
|
// report tile itself (the tile sits bare inside the report's own Card —
|
|
23
23
|
// see the docs page) — reuses Card's exact border/radius/bg rather than
|
|
24
24
|
// inventing a new value, since it is only ever an explicit opt-in.
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { defineRecipe, resolveRecipe } from "../../core/index.js";
|
|
2
2
|
import { contract as c } from "../../tokens/index.js";
|
|
3
|
-
//
|
|
3
|
+
// A settings toggle, measured from the live app: a 24×16 pill track that
|
|
4
4
|
// flips from a muted grey to brand blue (#266df0), with a 12px white thumb
|
|
5
5
|
// (2px inset) that slides 8px across. background + transform both animate .2s.
|
|
6
6
|
const config = defineRecipe({
|
|
@@ -2,7 +2,7 @@ import { defineRecipe, resolveRecipe } from "../../core/index.js";
|
|
|
2
2
|
import { contract as c } from "../../tokens/index.js";
|
|
3
3
|
// A general-purpose, composable data table — the lightweight primitive for
|
|
4
4
|
// arbitrary tabular data (as opposed to `product/recordstable`, which is a
|
|
5
|
-
// faithful rebuild of
|
|
5
|
+
// faithful rebuild of a heavy records grid). It carries the SAME measured
|
|
6
6
|
// grid styling as RecordsTable — 36px rows, a 40px header, hairline vertical +
|
|
7
7
|
// horizontal grid lines — so `DataTable` (built on this) matches that polish.
|
|
8
8
|
const config = defineRecipe({
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { contract as c, elevation as e } from "../../tokens/index.js";
|
|
2
|
-
// The measured chrome of
|
|
2
|
+
// The measured chrome of the table toolbar: the Sort/Filter controls, the
|
|
3
3
|
// menu/popover surface they open into, the sort-condition rows, and the filter
|
|
4
4
|
// chips. It lives here, parameterised by class prefix, because TWO surfaces
|
|
5
5
|
// render it — the standalone `TableToolbar` primitive and `RecordsTable`, whose
|
|
6
6
|
// markup predates it and must keep its own `recordstable-` class names.
|
|
7
7
|
//
|
|
8
8
|
// These strings were MOVED out of `recordstable.recipe.ts` verbatim, not
|
|
9
|
-
// retyped: every value is still the one measured
|
|
9
|
+
// retyped: every value is still the one originally measured. Do not "tidy" them.
|
|
10
10
|
//
|
|
11
11
|
// It comes in two halves because RecordsTable interleaves three rules of its own
|
|
12
12
|
// (the context-menu z-index and the column drop-target) into the middle of the
|