@crisp-ui-kit/crisp 0.52.3 → 0.52.4

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.
Files changed (7) hide show
  1. package/dist/cjs/product/inbox/inbox.recipe.js +6 -1
  2. package/dist/esm/product/inbox/inbox.recipe.js +7 -2
  3. package/dist/inbox.css +1 -1
  4. package/dist/inbox.layered.css +1 -1
  5. package/dist/styles.css +1 -1
  6. package/dist/styles.layered.css +1 -1
  7. package/package.json +1 -1
package/dist/cjs/product/inbox/inbox.recipe.js CHANGED
@@ -7,11 +7,16 @@ const tokens_1 = require("../../tokens");
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.
10
+ //
11
+ // The shadow is `elevation.floating` (crisp#464) — this is a tier-1
12
+ // floating-and-attached surface, the exact class that token exists for
13
+ // (AUTHORING.md Lesson 31); it used to carry its own hand-typed 3-layer
14
+ // guess instead of the measured 4-layer value.
10
15
  const config = (0, core_1.defineRecipe)({
11
16
  name: "inbox",
12
17
  base: `display: flex; flex-direction: column; box-sizing: border-box; width: 380px; max-height: 588px;
13
18
  border-radius: ${tokens_1.contract.radius.xl}; background: ${tokens_1.contract.bgSurface}; font-family: ${tokens_1.contract.font.sans}; overflow: hidden;
14
- box-shadow: inset 0 0 0 1px color-mix(in srgb, ${tokens_1.contract.fgPrimary} 6%, transparent), 0 8px 28px -6px rgba(28,40,64,0.16), 0 2px 6px -2px rgba(28,40,64,0.10);
19
+ box-shadow: ${tokens_1.elevation.floating};
15
20
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
16
21
 
17
22
  & .crisp-inbox-head { padding: ${tokens_1.contract.space["3"]} ${tokens_1.contract.space["3"]} 0; }
package/dist/esm/product/inbox/inbox.recipe.js CHANGED
@@ -1,14 +1,19 @@
1
1
  import { defineRecipe, resolveRecipe } from "../../core/index.js";
2
- import { contract as c } from "../../tokens/index.js";
2
+ import { contract as c, elevation as e } from "../../tokens/index.js";
3
3
  // A notifications inbox panel — measured from a notification flyout: a
4
4
  // ~380px rounded panel with a title, "Notifications / Requests" tabs (with
5
5
  // counts), then notification rows (avatar + message + time + unread dot) or a
6
6
  // centred empty state. Drop it in a Popover for the flyout, or use standalone.
7
+ //
8
+ // The shadow is `elevation.floating` (crisp#464) — this is a tier-1
9
+ // floating-and-attached surface, the exact class that token exists for
10
+ // (AUTHORING.md Lesson 31); it used to carry its own hand-typed 3-layer
11
+ // guess instead of the measured 4-layer value.
7
12
  const config = defineRecipe({
8
13
  name: "inbox",
9
14
  base: `display: flex; flex-direction: column; box-sizing: border-box; width: 380px; max-height: 588px;
10
15
  border-radius: ${c.radius.xl}; background: ${c.bgSurface}; font-family: ${c.font.sans}; overflow: hidden;
11
- box-shadow: inset 0 0 0 1px color-mix(in srgb, ${c.fgPrimary} 6%, transparent), 0 8px 28px -6px rgba(28,40,64,0.16), 0 2px 6px -2px rgba(28,40,64,0.10);
16
+ box-shadow: ${e.floating};
12
17
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
13
18
 
14
19
  & .crisp-inbox-head { padding: ${c.space["3"]} ${c.space["3"]} 0; }
package/dist/inbox.css CHANGED
@@ -1,5 +1,5 @@
1
1
  .crisp-inbox {
2
- display: flex; flex-direction: column; box-sizing: border-box; width: 380px; max-height: 588px; border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-surface); font-family: var(--crisp-font-sans); overflow: hidden; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent), 0 8px 28px -6px rgba(28,40,64,0.16), 0 2px 6px -2px rgba(28,40,64,0.10); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
2
+ display: flex; flex-direction: column; box-sizing: border-box; width: 380px; max-height: 588px; border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-surface); font-family: var(--crisp-font-sans); overflow: hidden; box-shadow: inset 0 0 0 1px var(--crisp-ring-popover), 0 0 0 1px var(--crisp-shadow-popover1), 0 4px 8px -4px var(--crisp-shadow-popover2), 0 4px 12px -2px var(--crisp-shadow-popover3); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
3
3
  & .crisp-inbox-head { padding: var(--crisp-space-3) var(--crisp-space-3) 0; }
4
4
  & .crisp-inbox-title { font-size: var(--crisp-text-xl); line-height: 28px; font-weight: var(--crisp-weight-semibold); letter-spacing: -0.3px; color: var(--crisp-fg-primary); }
5
5
  & .crisp-inbox-tabs { display: flex; gap: var(--crisp-space-3); margin-top: var(--crisp-space-2); box-shadow: inset 0 -1px 0 var(--crisp-border-subtle); }
package/dist/inbox.layered.css CHANGED
@@ -1,6 +1,6 @@
1
1
  @layer crisp-components {
2
2
  .crisp-inbox {
3
- display: flex; flex-direction: column; box-sizing: border-box; width: 380px; max-height: 588px; border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-surface); font-family: var(--crisp-font-sans); overflow: hidden; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent), 0 8px 28px -6px rgba(28,40,64,0.16), 0 2px 6px -2px rgba(28,40,64,0.10); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
3
+ display: flex; flex-direction: column; box-sizing: border-box; width: 380px; max-height: 588px; border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-surface); font-family: var(--crisp-font-sans); overflow: hidden; box-shadow: inset 0 0 0 1px var(--crisp-ring-popover), 0 0 0 1px var(--crisp-shadow-popover1), 0 4px 8px -4px var(--crisp-shadow-popover2), 0 4px 12px -2px var(--crisp-shadow-popover3); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
4
4
  & .crisp-inbox-head { padding: var(--crisp-space-3) var(--crisp-space-3) 0; }
5
5
  & .crisp-inbox-title { font-size: var(--crisp-text-xl); line-height: 28px; font-weight: var(--crisp-weight-semibold); letter-spacing: -0.3px; color: var(--crisp-fg-primary); }
6
6
  & .crisp-inbox-tabs { display: flex; gap: var(--crisp-space-3); margin-top: var(--crisp-space-2); box-shadow: inset 0 -1px 0 var(--crisp-border-subtle); }
package/dist/styles.css CHANGED
@@ -1968,7 +1968,7 @@
1968
1968
  }
1969
1969
 
1970
1970
  .crisp-inbox {
1971
- display: flex; flex-direction: column; box-sizing: border-box; width: 380px; max-height: 588px; border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-surface); font-family: var(--crisp-font-sans); overflow: hidden; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent), 0 8px 28px -6px rgba(28,40,64,0.16), 0 2px 6px -2px rgba(28,40,64,0.10); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
1971
+ display: flex; flex-direction: column; box-sizing: border-box; width: 380px; max-height: 588px; border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-surface); font-family: var(--crisp-font-sans); overflow: hidden; box-shadow: inset 0 0 0 1px var(--crisp-ring-popover), 0 0 0 1px var(--crisp-shadow-popover1), 0 4px 8px -4px var(--crisp-shadow-popover2), 0 4px 12px -2px var(--crisp-shadow-popover3); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
1972
1972
  & .crisp-inbox-head { padding: var(--crisp-space-3) var(--crisp-space-3) 0; }
1973
1973
  & .crisp-inbox-title { font-size: var(--crisp-text-xl); line-height: 28px; font-weight: var(--crisp-weight-semibold); letter-spacing: -0.3px; color: var(--crisp-fg-primary); }
1974
1974
  & .crisp-inbox-tabs { display: flex; gap: var(--crisp-space-3); margin-top: var(--crisp-space-2); box-shadow: inset 0 -1px 0 var(--crisp-border-subtle); }
package/dist/styles.layered.css CHANGED
@@ -1969,7 +1969,7 @@
1969
1969
  }
1970
1970
 
1971
1971
  .crisp-inbox {
1972
- display: flex; flex-direction: column; box-sizing: border-box; width: 380px; max-height: 588px; border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-surface); font-family: var(--crisp-font-sans); overflow: hidden; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent), 0 8px 28px -6px rgba(28,40,64,0.16), 0 2px 6px -2px rgba(28,40,64,0.10); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
1972
+ display: flex; flex-direction: column; box-sizing: border-box; width: 380px; max-height: 588px; border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-surface); font-family: var(--crisp-font-sans); overflow: hidden; box-shadow: inset 0 0 0 1px var(--crisp-ring-popover), 0 0 0 1px var(--crisp-shadow-popover1), 0 4px 8px -4px var(--crisp-shadow-popover2), 0 4px 12px -2px var(--crisp-shadow-popover3); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
1973
1973
  & .crisp-inbox-head { padding: var(--crisp-space-3) var(--crisp-space-3) 0; }
1974
1974
  & .crisp-inbox-title { font-size: var(--crisp-text-xl); line-height: 28px; font-weight: var(--crisp-weight-semibold); letter-spacing: -0.3px; color: var(--crisp-fg-primary); }
1975
1975
  & .crisp-inbox-tabs { display: flex; gap: var(--crisp-space-3); margin-top: var(--crisp-space-2); box-shadow: inset 0 -1px 0 var(--crisp-border-subtle); }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@crisp-ui-kit/crisp",
3
- "version": "0.52.3",
3
+ "version": "0.52.4",
4
4
  "description": "A lean React design system, measured pixel-for-pixel from Attio.",
5
5
  "license": "MIT",
6
6
  "type": "module",