@crisp-ui-kit/crisp 0.47.0 → 0.48.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 (7) 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/esm/components/avatar/avatar.recipe.js +3 -3
  5. package/dist/styles.css +3 -3
  6. package/dist/styles.layered.css +3 -3
  7. 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/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/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;
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;
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.48.0",
4
4
  "description": "A lean React design system, measured pixel-for-pixel from Attio.",
5
5
  "license": "MIT",
6
6
  "type": "module",