@crisp-ui-kit/crisp 0.47.0 → 0.49.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/dist/avatar.css +3 -3
  2. package/dist/avatar.layered.css +3 -3
  3. package/dist/cjs/components/avatar/avatar.recipe.js +3 -3
  4. package/dist/cjs/components/datatable/datatable.recipe.js +3 -2
  5. package/dist/datatable.css +3 -2
  6. package/dist/datatable.layered.css +3 -2
  7. package/dist/esm/components/avatar/avatar.recipe.js +3 -3
  8. package/dist/esm/components/datatable/datatable.recipe.js +3 -2
  9. package/dist/styles.css +6 -5
  10. package/dist/styles.layered.css +6 -5
  11. package/package.json +1 -1
package/dist/avatar.css CHANGED
@@ -1,5 +1,5 @@
1
1
  .crisp-avatar {
2
- display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: var(--crisp-font-sans); font-weight: var(--crisp-weight-semibold); overflow: hidden; user-select: none;
2
+ display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: var(--crisp-font-sans); font-weight: var(--crisp-weight-medium); overflow: hidden; user-select: none;
3
3
  & img { width: 100%; height: 100%; object-fit: cover; }
4
4
  }
5
5
  .crisp-avatar--size_sm {
@@ -9,7 +9,7 @@
9
9
  height: 20px; width: 20px; font-size: 10px;
10
10
  }
11
11
  .crisp-avatar--size_lg {
12
- height: 24px; width: 24px; font-size: var(--crisp-text-sm);
12
+ height: 24px; width: 24px; font-size: var(--crisp-text-lg);
13
13
  }
14
14
  .crisp-avatar--size_xl {
15
15
  height: 32px; width: 32px; font-size: var(--crisp-text-lg);
@@ -21,7 +21,7 @@
21
21
  border-radius: 30%;
22
22
  }
23
23
  .crisp-avatar--tone_neutral {
24
- background: var(--crisp-bg-raised); color: var(--crisp-fg-muted); box-shadow: inset 0 0 0 1px var(--crisp-border-default);
24
+ background: var(--crisp-bg-raised); color: var(--crisp-fg-neutral-muted); box-shadow: inset 0 0 0 1px var(--crisp-border-default);
25
25
  }
26
26
  .crisp-avatar--tone_brand {
27
27
  background: var(--crisp-bg-brand-solid); color: #fff;
package/dist/avatar.layered.css CHANGED
@@ -1,6 +1,6 @@
1
1
  @layer crisp-components {
2
2
  .crisp-avatar {
3
- display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: var(--crisp-font-sans); font-weight: var(--crisp-weight-semibold); overflow: hidden; user-select: none;
3
+ display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: var(--crisp-font-sans); font-weight: var(--crisp-weight-medium); overflow: hidden; user-select: none;
4
4
  & img { width: 100%; height: 100%; object-fit: cover; }
5
5
  }
6
6
  .crisp-avatar--size_sm {
@@ -10,7 +10,7 @@
10
10
  height: 20px; width: 20px; font-size: 10px;
11
11
  }
12
12
  .crisp-avatar--size_lg {
13
- height: 24px; width: 24px; font-size: var(--crisp-text-sm);
13
+ height: 24px; width: 24px; font-size: var(--crisp-text-lg);
14
14
  }
15
15
  .crisp-avatar--size_xl {
16
16
  height: 32px; width: 32px; font-size: var(--crisp-text-lg);
@@ -22,7 +22,7 @@
22
22
  border-radius: 30%;
23
23
  }
24
24
  .crisp-avatar--tone_neutral {
25
- background: var(--crisp-bg-raised); color: var(--crisp-fg-muted); box-shadow: inset 0 0 0 1px var(--crisp-border-default);
25
+ background: var(--crisp-bg-raised); color: var(--crisp-fg-neutral-muted); box-shadow: inset 0 0 0 1px var(--crisp-border-default);
26
26
  }
27
27
  .crisp-avatar--tone_brand {
28
28
  background: var(--crisp-bg-brand-solid); color: #fff;
package/dist/cjs/components/avatar/avatar.recipe.js CHANGED
@@ -11,7 +11,7 @@ const spec = (0, core_1.defineSpec)({
11
11
  justifyContent: "center",
12
12
  flexShrink: 0,
13
13
  fontFamily: tokens_1.contract.font.sans,
14
- fontWeight: tokens_1.contract.weight.semibold,
14
+ fontWeight: tokens_1.contract.weight.medium,
15
15
  overflow: "hidden",
16
16
  userSelect: "none",
17
17
  },
@@ -26,7 +26,7 @@ const spec = (0, core_1.defineSpec)({
26
26
  size: {
27
27
  sm: { height: "16px", width: "16px", fontSize: "9px" },
28
28
  md: { height: "20px", width: "20px", fontSize: "10px" },
29
- lg: { height: "24px", width: "24px", fontSize: tokens_1.contract.text.sm },
29
+ lg: { height: "24px", width: "24px", fontSize: tokens_1.contract.text.lg },
30
30
  xl: { height: "32px", width: "32px", fontSize: tokens_1.contract.text.lg },
31
31
  },
32
32
  shape: {
@@ -36,7 +36,7 @@ const spec = (0, core_1.defineSpec)({
36
36
  tone: {
37
37
  neutral: {
38
38
  background: tokens_1.contract.bgRaised,
39
- color: tokens_1.contract.fgMuted,
39
+ color: tokens_1.contract.fgNeutralMuted,
40
40
  boxShadow: `inset 0 0 0 1px ${tokens_1.contract.borderDefault}`,
41
41
  },
42
42
  brand: { background: tokens_1.contract.bgBrandSolid, color: "#fff" },
package/dist/cjs/components/datatable/datatable.recipe.js CHANGED
@@ -51,9 +51,10 @@ const config = (0, core_1.defineRecipe)({
51
51
  & .crisp-datatable-th-rename:focus { box-shadow: inset 0 0 0 1px ${tokens_1.contract.bgBrandSolid}; }
52
52
  & .crisp-datatable-th-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
53
53
  & .crisp-datatable-sort { display: flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; width: 100%; min-width: 0; height: 100%; margin: 0; padding: 0 ${tokens_1.contract.space["2"]}; border: none; background: none; font: inherit; letter-spacing: inherit; color: inherit; text-align: start; cursor: pointer; }
54
- & th[data-align="right"] .crisp-datatable-sort { justify-content: flex-end; }
54
+ & th[data-align="right"] .crisp-datatable-sort { justify-content: flex-end; padding-inline-end: 0; }
55
+ & th[data-align="right"] .crisp-datatable-th-inner { justify-content: flex-end; }
55
56
  & .crisp-datatable-chevron { margin-inline-start: auto; flex-shrink: 0; color: ${tokens_1.contract.fgMuted}; opacity: 0; transition: opacity .12s; }
56
- & th[data-align="right"] .crisp-datatable-chevron { margin-inline-start: 0; }
57
+ & th[data-align="right"] .crisp-datatable-chevron { margin-inline-start: 0; order: -1; }
57
58
  & .crisp-datatable-sort:hover .crisp-datatable-chevron { opacity: 0.6; }
58
59
  & .crisp-datatable-sort[data-sorted] .crisp-datatable-chevron { opacity: 1; color: ${tokens_1.contract.fgPrimary}; }
59
60
  /* sticky first column(s) + horizontal scroll shadow — RecordsTable's feel */
package/dist/datatable.css CHANGED
@@ -32,9 +32,10 @@
32
32
  & .crisp-datatable-th-rename:focus { box-shadow: inset 0 0 0 1px var(--crisp-bg-brand-solid); }
33
33
  & .crisp-datatable-th-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
34
34
  & .crisp-datatable-sort { display: flex; align-items: center; gap: var(--crisp-space-1-5); width: 100%; min-width: 0; height: 100%; margin: 0; padding: 0 var(--crisp-space-2); border: none; background: none; font: inherit; letter-spacing: inherit; color: inherit; text-align: start; cursor: pointer; }
35
- & th[data-align="right"] .crisp-datatable-sort { justify-content: flex-end; }
35
+ & th[data-align="right"] .crisp-datatable-sort { justify-content: flex-end; padding-inline-end: 0; }
36
+ & th[data-align="right"] .crisp-datatable-th-inner { justify-content: flex-end; }
36
37
  & .crisp-datatable-chevron { margin-inline-start: auto; flex-shrink: 0; color: var(--crisp-fg-muted); opacity: 0; transition: opacity .12s; }
37
- & th[data-align="right"] .crisp-datatable-chevron { margin-inline-start: 0; }
38
+ & th[data-align="right"] .crisp-datatable-chevron { margin-inline-start: 0; order: -1; }
38
39
  & .crisp-datatable-sort:hover .crisp-datatable-chevron { opacity: 0.6; }
39
40
  & .crisp-datatable-sort[data-sorted] .crisp-datatable-chevron { opacity: 1; color: var(--crisp-fg-primary); }
40
41
  /* sticky first column(s) + horizontal scroll shadow — RecordsTable's feel */
package/dist/datatable.layered.css CHANGED
@@ -33,9 +33,10 @@
33
33
  & .crisp-datatable-th-rename:focus { box-shadow: inset 0 0 0 1px var(--crisp-bg-brand-solid); }
34
34
  & .crisp-datatable-th-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
35
35
  & .crisp-datatable-sort { display: flex; align-items: center; gap: var(--crisp-space-1-5); width: 100%; min-width: 0; height: 100%; margin: 0; padding: 0 var(--crisp-space-2); border: none; background: none; font: inherit; letter-spacing: inherit; color: inherit; text-align: start; cursor: pointer; }
36
- & th[data-align="right"] .crisp-datatable-sort { justify-content: flex-end; }
36
+ & th[data-align="right"] .crisp-datatable-sort { justify-content: flex-end; padding-inline-end: 0; }
37
+ & th[data-align="right"] .crisp-datatable-th-inner { justify-content: flex-end; }
37
38
  & .crisp-datatable-chevron { margin-inline-start: auto; flex-shrink: 0; color: var(--crisp-fg-muted); opacity: 0; transition: opacity .12s; }
38
- & th[data-align="right"] .crisp-datatable-chevron { margin-inline-start: 0; }
39
+ & th[data-align="right"] .crisp-datatable-chevron { margin-inline-start: 0; order: -1; }
39
40
  & .crisp-datatable-sort:hover .crisp-datatable-chevron { opacity: 0.6; }
40
41
  & .crisp-datatable-sort[data-sorted] .crisp-datatable-chevron { opacity: 1; color: var(--crisp-fg-primary); }
41
42
  /* sticky first column(s) + horizontal scroll shadow — RecordsTable's feel */
package/dist/esm/components/avatar/avatar.recipe.js CHANGED
@@ -8,7 +8,7 @@ const spec = defineSpec({
8
8
  justifyContent: "center",
9
9
  flexShrink: 0,
10
10
  fontFamily: c.font.sans,
11
- fontWeight: c.weight.semibold,
11
+ fontWeight: c.weight.medium,
12
12
  overflow: "hidden",
13
13
  userSelect: "none",
14
14
  },
@@ -23,7 +23,7 @@ const spec = defineSpec({
23
23
  size: {
24
24
  sm: { height: "16px", width: "16px", fontSize: "9px" },
25
25
  md: { height: "20px", width: "20px", fontSize: "10px" },
26
- lg: { height: "24px", width: "24px", fontSize: c.text.sm },
26
+ lg: { height: "24px", width: "24px", fontSize: c.text.lg },
27
27
  xl: { height: "32px", width: "32px", fontSize: c.text.lg },
28
28
  },
29
29
  shape: {
@@ -33,7 +33,7 @@ const spec = defineSpec({
33
33
  tone: {
34
34
  neutral: {
35
35
  background: c.bgRaised,
36
- color: c.fgMuted,
36
+ color: c.fgNeutralMuted,
37
37
  boxShadow: `inset 0 0 0 1px ${c.borderDefault}`,
38
38
  },
39
39
  brand: { background: c.bgBrandSolid, color: "#fff" },
package/dist/esm/components/datatable/datatable.recipe.js CHANGED
@@ -48,9 +48,10 @@ const config = defineRecipe({
48
48
  & .crisp-datatable-th-rename:focus { box-shadow: inset 0 0 0 1px ${c.bgBrandSolid}; }
49
49
  & .crisp-datatable-th-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
50
50
  & .crisp-datatable-sort { display: flex; align-items: center; gap: ${c.space["1.5"]}; width: 100%; min-width: 0; height: 100%; margin: 0; padding: 0 ${c.space["2"]}; border: none; background: none; font: inherit; letter-spacing: inherit; color: inherit; text-align: start; cursor: pointer; }
51
- & th[data-align="right"] .crisp-datatable-sort { justify-content: flex-end; }
51
+ & th[data-align="right"] .crisp-datatable-sort { justify-content: flex-end; padding-inline-end: 0; }
52
+ & th[data-align="right"] .crisp-datatable-th-inner { justify-content: flex-end; }
52
53
  & .crisp-datatable-chevron { margin-inline-start: auto; flex-shrink: 0; color: ${c.fgMuted}; opacity: 0; transition: opacity .12s; }
53
- & th[data-align="right"] .crisp-datatable-chevron { margin-inline-start: 0; }
54
+ & th[data-align="right"] .crisp-datatable-chevron { margin-inline-start: 0; order: -1; }
54
55
  & .crisp-datatable-sort:hover .crisp-datatable-chevron { opacity: 0.6; }
55
56
  & .crisp-datatable-sort[data-sorted] .crisp-datatable-chevron { opacity: 1; color: ${c.fgPrimary}; }
56
57
  /* sticky first column(s) + horizontal scroll shadow — RecordsTable's feel */
package/dist/styles.css CHANGED
@@ -155,7 +155,7 @@
155
155
  }
156
156
 
157
157
  .crisp-avatar {
158
- display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: var(--crisp-font-sans); font-weight: var(--crisp-weight-semibold); overflow: hidden; user-select: none;
158
+ display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: var(--crisp-font-sans); font-weight: var(--crisp-weight-medium); overflow: hidden; user-select: none;
159
159
  & img { width: 100%; height: 100%; object-fit: cover; }
160
160
  }
161
161
  .crisp-avatar--size_sm {
@@ -165,7 +165,7 @@
165
165
  height: 20px; width: 20px; font-size: 10px;
166
166
  }
167
167
  .crisp-avatar--size_lg {
168
- height: 24px; width: 24px; font-size: var(--crisp-text-sm);
168
+ height: 24px; width: 24px; font-size: var(--crisp-text-lg);
169
169
  }
170
170
  .crisp-avatar--size_xl {
171
171
  height: 32px; width: 32px; font-size: var(--crisp-text-lg);
@@ -177,7 +177,7 @@
177
177
  border-radius: 30%;
178
178
  }
179
179
  .crisp-avatar--tone_neutral {
180
- background: var(--crisp-bg-raised); color: var(--crisp-fg-muted); box-shadow: inset 0 0 0 1px var(--crisp-border-default);
180
+ background: var(--crisp-bg-raised); color: var(--crisp-fg-neutral-muted); box-shadow: inset 0 0 0 1px var(--crisp-border-default);
181
181
  }
182
182
  .crisp-avatar--tone_brand {
183
183
  background: var(--crisp-bg-brand-solid); color: #fff;
@@ -548,9 +548,10 @@
548
548
  & .crisp-datatable-th-rename:focus { box-shadow: inset 0 0 0 1px var(--crisp-bg-brand-solid); }
549
549
  & .crisp-datatable-th-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
550
550
  & .crisp-datatable-sort { display: flex; align-items: center; gap: var(--crisp-space-1-5); width: 100%; min-width: 0; height: 100%; margin: 0; padding: 0 var(--crisp-space-2); border: none; background: none; font: inherit; letter-spacing: inherit; color: inherit; text-align: start; cursor: pointer; }
551
- & th[data-align="right"] .crisp-datatable-sort { justify-content: flex-end; }
551
+ & th[data-align="right"] .crisp-datatable-sort { justify-content: flex-end; padding-inline-end: 0; }
552
+ & th[data-align="right"] .crisp-datatable-th-inner { justify-content: flex-end; }
552
553
  & .crisp-datatable-chevron { margin-inline-start: auto; flex-shrink: 0; color: var(--crisp-fg-muted); opacity: 0; transition: opacity .12s; }
553
- & th[data-align="right"] .crisp-datatable-chevron { margin-inline-start: 0; }
554
+ & th[data-align="right"] .crisp-datatable-chevron { margin-inline-start: 0; order: -1; }
554
555
  & .crisp-datatable-sort:hover .crisp-datatable-chevron { opacity: 0.6; }
555
556
  & .crisp-datatable-sort[data-sorted] .crisp-datatable-chevron { opacity: 1; color: var(--crisp-fg-primary); }
556
557
  /* sticky first column(s) + horizontal scroll shadow — RecordsTable's feel */
package/dist/styles.layered.css CHANGED
@@ -156,7 +156,7 @@
156
156
  }
157
157
 
158
158
  .crisp-avatar {
159
- display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: var(--crisp-font-sans); font-weight: var(--crisp-weight-semibold); overflow: hidden; user-select: none;
159
+ display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: var(--crisp-font-sans); font-weight: var(--crisp-weight-medium); overflow: hidden; user-select: none;
160
160
  & img { width: 100%; height: 100%; object-fit: cover; }
161
161
  }
162
162
  .crisp-avatar--size_sm {
@@ -166,7 +166,7 @@
166
166
  height: 20px; width: 20px; font-size: 10px;
167
167
  }
168
168
  .crisp-avatar--size_lg {
169
- height: 24px; width: 24px; font-size: var(--crisp-text-sm);
169
+ height: 24px; width: 24px; font-size: var(--crisp-text-lg);
170
170
  }
171
171
  .crisp-avatar--size_xl {
172
172
  height: 32px; width: 32px; font-size: var(--crisp-text-lg);
@@ -178,7 +178,7 @@
178
178
  border-radius: 30%;
179
179
  }
180
180
  .crisp-avatar--tone_neutral {
181
- background: var(--crisp-bg-raised); color: var(--crisp-fg-muted); box-shadow: inset 0 0 0 1px var(--crisp-border-default);
181
+ background: var(--crisp-bg-raised); color: var(--crisp-fg-neutral-muted); box-shadow: inset 0 0 0 1px var(--crisp-border-default);
182
182
  }
183
183
  .crisp-avatar--tone_brand {
184
184
  background: var(--crisp-bg-brand-solid); color: #fff;
@@ -549,9 +549,10 @@
549
549
  & .crisp-datatable-th-rename:focus { box-shadow: inset 0 0 0 1px var(--crisp-bg-brand-solid); }
550
550
  & .crisp-datatable-th-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
551
551
  & .crisp-datatable-sort { display: flex; align-items: center; gap: var(--crisp-space-1-5); width: 100%; min-width: 0; height: 100%; margin: 0; padding: 0 var(--crisp-space-2); border: none; background: none; font: inherit; letter-spacing: inherit; color: inherit; text-align: start; cursor: pointer; }
552
- & th[data-align="right"] .crisp-datatable-sort { justify-content: flex-end; }
552
+ & th[data-align="right"] .crisp-datatable-sort { justify-content: flex-end; padding-inline-end: 0; }
553
+ & th[data-align="right"] .crisp-datatable-th-inner { justify-content: flex-end; }
553
554
  & .crisp-datatable-chevron { margin-inline-start: auto; flex-shrink: 0; color: var(--crisp-fg-muted); opacity: 0; transition: opacity .12s; }
554
- & th[data-align="right"] .crisp-datatable-chevron { margin-inline-start: 0; }
555
+ & th[data-align="right"] .crisp-datatable-chevron { margin-inline-start: 0; order: -1; }
555
556
  & .crisp-datatable-sort:hover .crisp-datatable-chevron { opacity: 0.6; }
556
557
  & .crisp-datatable-sort[data-sorted] .crisp-datatable-chevron { opacity: 1; color: var(--crisp-fg-primary); }
557
558
  /* sticky first column(s) + horizontal scroll shadow — RecordsTable's feel */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@crisp-ui-kit/crisp",
3
- "version": "0.47.0",
3
+ "version": "0.49.0",
4
4
  "description": "A lean React design system, measured pixel-for-pixel from Attio.",
5
5
  "license": "MIT",
6
6
  "type": "module",