@crisp-ui-kit/crisp 0.31.5 → 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/cjs/core/dialog-description.js +1 -1
- package/dist/cjs/index.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/esm/core/dialog-description.js +1 -1
- package/dist/esm/index.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/types/core/dialog-description.d.ts +1 -1
- package/dist/types/tokens/elevation.d.ts +4 -4
- package/package.json +1 -1
|
@@ -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);
|
|
@@ -3,10 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.elevation = void 0;
|
|
4
4
|
const contract_1 = require("./contract");
|
|
5
5
|
/**
|
|
6
|
-
*
|
|
6
|
+
* The measured elevation recipes, written **once**.
|
|
7
7
|
*
|
|
8
8
|
* The whole product runs on two elevation tiers plus one control shadow
|
|
9
|
-
* (measured live — see
|
|
9
|
+
* (measured live — see the panels study §4). Before this module each
|
|
10
10
|
* surface carried its own copy of the string: the tier-1 stack appeared in 9
|
|
11
11
|
* places, the control shadow in 12. Copies drift, and every drift was a real
|
|
12
12
|
* bug — `Drawer`/`RecordPanel` grew invented directional shadows, `BulkBar`'s
|
|
@@ -23,14 +23,14 @@ exports.elevation = {
|
|
|
23
23
|
/**
|
|
24
24
|
* Tier 2 — the modal frosted bezel (Dialog, Command). Sits on the
|
|
25
25
|
* `bgOverlayFrost` 60% + `blur(15px)` surface at radius 16, wrapping an inner
|
|
26
|
-
* card at radius 12.
|
|
26
|
+
* card at radius 12. Nothing is dimmed behind it; the blur does the work.
|
|
27
27
|
*/
|
|
28
28
|
modal: `0 8px 28px -6px ${contract_1.contract.shadowOverlay1}, 0 18px 88px -4px ${contract_1.contract.shadowOverlay2}, 0 0 1px ${contract_1.contract.shadowOverlay3}`,
|
|
29
29
|
/**
|
|
30
30
|
* The neutral/outlined control shadow — buttons, inputs, textareas, the
|
|
31
31
|
* sidebar search, record-page actions.
|
|
32
32
|
*
|
|
33
|
-
* The two raw values **are** the measured
|
|
33
|
+
* The two raw values **are** the measured value (Lessons 22 and 29) and
|
|
34
34
|
* must stay raw. `rgba(0,0,0,0.04)` equals `tileActiveShadow`'s light value by
|
|
35
35
|
* coincidence, not by meaning; tokenizing it would delete a measured layer in
|
|
36
36
|
* dark mode. Only the ring is theme-aware, via `ringNeutral`.
|
|
@@ -5,7 +5,7 @@ exports.palette = {
|
|
|
5
5
|
gray00: { light: "#ffffff", dark: "#0a0a0a" },
|
|
6
6
|
white: { light: "#ffffff", dark: "#ffffff" },
|
|
7
7
|
// the counterpart to `white`: ink that does NOT flip with the theme, for text
|
|
8
|
-
// on a bright tone fill. Same value as gray900's light side (
|
|
8
|
+
// on a bright tone fill. Same value as gray900's light side (the measured
|
|
9
9
|
// near-black), named separately because its job is not "primary foreground".
|
|
10
10
|
ink: { light: "#101112", dark: "#101112" },
|
|
11
11
|
gray50: { light: "#f4f4f5", dark: "#101112" },
|
|
@@ -31,7 +31,7 @@ exports.palette = {
|
|
|
31
31
|
// A red dark enough to carry white text. red600 cannot: white on it is
|
|
32
32
|
// 3.91:1 light / 3.05:1 dark, and the solid button's hover DARKENS the fill
|
|
33
33
|
// (filter: brightness), so dark ink fails there instead (4.49 at hover).
|
|
34
|
-
// Measured from
|
|
34
|
+
// Measured from the reference stylesheet, which ships this red alongside the
|
|
35
35
|
// #EB3B3B it uses for destructive menu TEXT. Does not flip: a filled
|
|
36
36
|
// destructive control needs the same white-bearing fill in both themes.
|
|
37
37
|
red700: { light: "#ba2525", dark: "#ba2525" },
|
package/dist/cjs/tokens/scale.js
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
// component sizing. Theme-invariant (identical in light/dark), so it is emitted
|
|
4
4
|
// once into :root, unlike the color tokens which flip per theme.
|
|
5
5
|
//
|
|
6
|
-
// Derived by measuring
|
|
6
|
+
// Derived by measuring a live production app (not taste): its spacing is a
|
|
7
7
|
// 2px-granular / 4px-base scale — the values 1,2,4,6,8,10,12,16 account for
|
|
8
8
|
// nearly every gap/pad/margin in the sidebar. Radii cluster at 6/8/9 + a pill.
|
|
9
9
|
// Recipes MUST reference these through the contract (`c.space[...]`), never a
|
|
@@ -25,10 +25,10 @@ exports.space = {
|
|
|
25
25
|
"6": "24px",
|
|
26
26
|
"8": "32px", // overlay / empty-state padding
|
|
27
27
|
};
|
|
28
|
-
// Corner radius. sm/md/lg are the three
|
|
28
|
+
// Corner radius. sm/md/lg are the three used on stacked surfaces
|
|
29
29
|
// (inputs, rows, tiles); full is the pill.
|
|
30
30
|
exports.radius = {
|
|
31
|
-
chip: "7px", // tag / chip corner — the single most used radius
|
|
31
|
+
chip: "7px", // tag / chip corner — the single most used radius
|
|
32
32
|
sm: "6px", // chips, badges
|
|
33
33
|
md: "8px", // inputs, search box
|
|
34
34
|
lg: "9px", // rows, tiles, list items
|
|
@@ -40,20 +40,20 @@ exports.radius = {
|
|
|
40
40
|
// radius (row height, header height, the nav icon box).
|
|
41
41
|
exports.size = {
|
|
42
42
|
icon: "16px", // nav / control glyph box
|
|
43
|
-
chip: "22px", // tag / chip height —
|
|
43
|
+
chip: "22px", // tag / chip height — the most repeated small control
|
|
44
44
|
row: "28px", // nav item · search · control height
|
|
45
45
|
menuRow: "32px", // overlay row: menu item, select option, bulk-bar button
|
|
46
46
|
tableRow: "36px", // data-grid row height
|
|
47
47
|
tableHeader: "40px", // data-grid header row height
|
|
48
48
|
header: "48px", // workspace-switcher header height
|
|
49
|
-
//
|
|
49
|
+
// The measured date picker: a 32px day with a 2px gap on both axes, so
|
|
50
50
|
// the pitch is 34. The gap is expressed as the cell being 2px taller than the
|
|
51
51
|
// highlight rather than as a grid gap, because crisp's range bridge spans
|
|
52
52
|
// whole cells and a column gap would cut it.
|
|
53
53
|
calendarCell: "34px", // calendar day pitch (32px day + 2px gap)
|
|
54
54
|
calendarPill: "32px", // the day highlight itself
|
|
55
55
|
};
|
|
56
|
-
// Typography —
|
|
56
|
+
// Typography — the measured UI runs entirely on Inter. Sizes measured in the sidebar
|
|
57
57
|
// collapse onto 11/12/13/14/16 (lg = 14px is the default body/label size);
|
|
58
58
|
// weights are 400/500/600 with 500 the UI default.
|
|
59
59
|
exports.font = {
|
|
@@ -51,7 +51,7 @@ exports.semantic = {
|
|
|
51
51
|
bgCyan: "cyan600",
|
|
52
52
|
bgPurple: "purple600",
|
|
53
53
|
bgSidebar: "graySidebar",
|
|
54
|
-
// #fbfbfb —
|
|
54
|
+
// #fbfbfb — the subtle raised fill; the active tab pill uses the same
|
|
55
55
|
// value as the sidebar, so it shares the palette entry under a neutral name.
|
|
56
56
|
bgSubtle: "graySidebar",
|
|
57
57
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Zag's dialog machine always advertises a description: `getContentProps()`
|
|
3
3
|
* returns an `aria-describedby` pointing at the id of a description element.
|
|
4
|
-
* crisp renders no such element —
|
|
4
|
+
* crisp renders no such element — the measured modals have a title and a body, no
|
|
5
5
|
* description line — so the reference dangles, and a dangling id is not a
|
|
6
6
|
* relationship a screen reader can follow.
|
|
7
7
|
*
|
package/dist/esm/index.js
CHANGED
|
@@ -54,7 +54,7 @@ export * from "./components/tooltip/index.js";
|
|
|
54
54
|
export * from "./components/wheelpicker/index.js";
|
|
55
55
|
export * from "./core/index.js";
|
|
56
56
|
// product surfaces (product/) — faithful, pixel-measured rebuilds of specific
|
|
57
|
-
//
|
|
57
|
+
// product screens (Sidebar, RecordsTable, RecordPage, Inbox, …). Use them as-is
|
|
58
58
|
// or as composition references for your own data; `components/` above holds
|
|
59
59
|
// the generic primitives (Table, DataTable, Button, …) to build your own UI from.
|
|
60
60
|
export * from "./product/appshell/index.js";
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { contract as c } from "./contract.js";
|
|
2
2
|
/**
|
|
3
|
-
*
|
|
3
|
+
* The measured elevation recipes, written **once**.
|
|
4
4
|
*
|
|
5
5
|
* The whole product runs on two elevation tiers plus one control shadow
|
|
6
|
-
* (measured live — see
|
|
6
|
+
* (measured live — see the panels study §4). Before this module each
|
|
7
7
|
* surface carried its own copy of the string: the tier-1 stack appeared in 9
|
|
8
8
|
* places, the control shadow in 12. Copies drift, and every drift was a real
|
|
9
9
|
* bug — `Drawer`/`RecordPanel` grew invented directional shadows, `BulkBar`'s
|
|
@@ -20,14 +20,14 @@ export const elevation = {
|
|
|
20
20
|
/**
|
|
21
21
|
* Tier 2 — the modal frosted bezel (Dialog, Command). Sits on the
|
|
22
22
|
* `bgOverlayFrost` 60% + `blur(15px)` surface at radius 16, wrapping an inner
|
|
23
|
-
* card at radius 12.
|
|
23
|
+
* card at radius 12. Nothing is dimmed behind it; the blur does the work.
|
|
24
24
|
*/
|
|
25
25
|
modal: `0 8px 28px -6px ${c.shadowOverlay1}, 0 18px 88px -4px ${c.shadowOverlay2}, 0 0 1px ${c.shadowOverlay3}`,
|
|
26
26
|
/**
|
|
27
27
|
* The neutral/outlined control shadow — buttons, inputs, textareas, the
|
|
28
28
|
* sidebar search, record-page actions.
|
|
29
29
|
*
|
|
30
|
-
* The two raw values **are** the measured
|
|
30
|
+
* The two raw values **are** the measured value (Lessons 22 and 29) and
|
|
31
31
|
* must stay raw. `rgba(0,0,0,0.04)` equals `tileActiveShadow`'s light value by
|
|
32
32
|
* coincidence, not by meaning; tokenizing it would delete a measured layer in
|
|
33
33
|
* dark mode. Only the ring is theme-aware, via `ringNeutral`.
|
|
@@ -2,7 +2,7 @@ export const palette = {
|
|
|
2
2
|
gray00: { light: "#ffffff", dark: "#0a0a0a" },
|
|
3
3
|
white: { light: "#ffffff", dark: "#ffffff" },
|
|
4
4
|
// the counterpart to `white`: ink that does NOT flip with the theme, for text
|
|
5
|
-
// on a bright tone fill. Same value as gray900's light side (
|
|
5
|
+
// on a bright tone fill. Same value as gray900's light side (the measured
|
|
6
6
|
// near-black), named separately because its job is not "primary foreground".
|
|
7
7
|
ink: { light: "#101112", dark: "#101112" },
|
|
8
8
|
gray50: { light: "#f4f4f5", dark: "#101112" },
|
|
@@ -28,7 +28,7 @@ export const palette = {
|
|
|
28
28
|
// A red dark enough to carry white text. red600 cannot: white on it is
|
|
29
29
|
// 3.91:1 light / 3.05:1 dark, and the solid button's hover DARKENS the fill
|
|
30
30
|
// (filter: brightness), so dark ink fails there instead (4.49 at hover).
|
|
31
|
-
// Measured from
|
|
31
|
+
// Measured from the reference stylesheet, which ships this red alongside the
|
|
32
32
|
// #EB3B3B it uses for destructive menu TEXT. Does not flip: a filled
|
|
33
33
|
// destructive control needs the same white-bearing fill in both themes.
|
|
34
34
|
red700: { light: "#ba2525", dark: "#ba2525" },
|
package/dist/esm/tokens/scale.js
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
// component sizing. Theme-invariant (identical in light/dark), so it is emitted
|
|
3
3
|
// once into :root, unlike the color tokens which flip per theme.
|
|
4
4
|
//
|
|
5
|
-
// Derived by measuring
|
|
5
|
+
// Derived by measuring a live production app (not taste): its spacing is a
|
|
6
6
|
// 2px-granular / 4px-base scale — the values 1,2,4,6,8,10,12,16 account for
|
|
7
7
|
// nearly every gap/pad/margin in the sidebar. Radii cluster at 6/8/9 + a pill.
|
|
8
8
|
// Recipes MUST reference these through the contract (`c.space[...]`), never a
|
|
@@ -22,10 +22,10 @@ export const space = {
|
|
|
22
22
|
"6": "24px",
|
|
23
23
|
"8": "32px", // overlay / empty-state padding
|
|
24
24
|
};
|
|
25
|
-
// Corner radius. sm/md/lg are the three
|
|
25
|
+
// Corner radius. sm/md/lg are the three used on stacked surfaces
|
|
26
26
|
// (inputs, rows, tiles); full is the pill.
|
|
27
27
|
export const radius = {
|
|
28
|
-
chip: "7px", // tag / chip corner — the single most used radius
|
|
28
|
+
chip: "7px", // tag / chip corner — the single most used radius
|
|
29
29
|
sm: "6px", // chips, badges
|
|
30
30
|
md: "8px", // inputs, search box
|
|
31
31
|
lg: "9px", // rows, tiles, list items
|
|
@@ -37,20 +37,20 @@ export const radius = {
|
|
|
37
37
|
// radius (row height, header height, the nav icon box).
|
|
38
38
|
export const size = {
|
|
39
39
|
icon: "16px", // nav / control glyph box
|
|
40
|
-
chip: "22px", // tag / chip height —
|
|
40
|
+
chip: "22px", // tag / chip height — the most repeated small control
|
|
41
41
|
row: "28px", // nav item · search · control height
|
|
42
42
|
menuRow: "32px", // overlay row: menu item, select option, bulk-bar button
|
|
43
43
|
tableRow: "36px", // data-grid row height
|
|
44
44
|
tableHeader: "40px", // data-grid header row height
|
|
45
45
|
header: "48px", // workspace-switcher header height
|
|
46
|
-
//
|
|
46
|
+
// The measured date picker: a 32px day with a 2px gap on both axes, so
|
|
47
47
|
// the pitch is 34. The gap is expressed as the cell being 2px taller than the
|
|
48
48
|
// highlight rather than as a grid gap, because crisp's range bridge spans
|
|
49
49
|
// whole cells and a column gap would cut it.
|
|
50
50
|
calendarCell: "34px", // calendar day pitch (32px day + 2px gap)
|
|
51
51
|
calendarPill: "32px", // the day highlight itself
|
|
52
52
|
};
|
|
53
|
-
// Typography —
|
|
53
|
+
// Typography — the measured UI runs entirely on Inter. Sizes measured in the sidebar
|
|
54
54
|
// collapse onto 11/12/13/14/16 (lg = 14px is the default body/label size);
|
|
55
55
|
// weights are 400/500/600 with 500 the UI default.
|
|
56
56
|
export const font = {
|
|
@@ -48,7 +48,7 @@ export const semantic = {
|
|
|
48
48
|
bgCyan: "cyan600",
|
|
49
49
|
bgPurple: "purple600",
|
|
50
50
|
bgSidebar: "graySidebar",
|
|
51
|
-
// #fbfbfb —
|
|
51
|
+
// #fbfbfb — the subtle raised fill; the active tab pill uses the same
|
|
52
52
|
// value as the sidebar, so it shares the palette entry under a neutral name.
|
|
53
53
|
bgSubtle: "graySidebar",
|
|
54
54
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Zag's dialog machine always advertises a description: `getContentProps()`
|
|
3
3
|
* returns an `aria-describedby` pointing at the id of a description element.
|
|
4
|
-
* crisp renders no such element —
|
|
4
|
+
* crisp renders no such element — the measured modals have a title and a body, no
|
|
5
5
|
* description line — so the reference dangles, and a dangling id is not a
|
|
6
6
|
* relationship a screen reader can follow.
|
|
7
7
|
*
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/**
|
|
2
|
-
*
|
|
2
|
+
* The measured elevation recipes, written **once**.
|
|
3
3
|
*
|
|
4
4
|
* The whole product runs on two elevation tiers plus one control shadow
|
|
5
|
-
* (measured live — see
|
|
5
|
+
* (measured live — see the panels study §4). Before this module each
|
|
6
6
|
* surface carried its own copy of the string: the tier-1 stack appeared in 9
|
|
7
7
|
* places, the control shadow in 12. Copies drift, and every drift was a real
|
|
8
8
|
* bug — `Drawer`/`RecordPanel` grew invented directional shadows, `BulkBar`'s
|
|
@@ -19,14 +19,14 @@ export declare const elevation: {
|
|
|
19
19
|
/**
|
|
20
20
|
* Tier 2 — the modal frosted bezel (Dialog, Command). Sits on the
|
|
21
21
|
* `bgOverlayFrost` 60% + `blur(15px)` surface at radius 16, wrapping an inner
|
|
22
|
-
* card at radius 12.
|
|
22
|
+
* card at radius 12. Nothing is dimmed behind it; the blur does the work.
|
|
23
23
|
*/
|
|
24
24
|
readonly modal: `0 8px 28px -6px var(--${string}), 0 18px 88px -4px var(--${string}), 0 0 1px var(--${string})`;
|
|
25
25
|
/**
|
|
26
26
|
* The neutral/outlined control shadow — buttons, inputs, textareas, the
|
|
27
27
|
* sidebar search, record-page actions.
|
|
28
28
|
*
|
|
29
|
-
* The two raw values **are** the measured
|
|
29
|
+
* The two raw values **are** the measured value (Lessons 22 and 29) and
|
|
30
30
|
* must stay raw. `rgba(0,0,0,0.04)` equals `tileActiveShadow`'s light value by
|
|
31
31
|
* coincidence, not by meaning; tokenizing it would delete a measured layer in
|
|
32
32
|
* dark mode. Only the ring is theme-aware, via `ringNeutral`.
|