@crisp-ui-kit/crisp 0.7.2 → 0.7.3

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/cjs/components/datepicker/datepicker.recipe.js +22 -20
  2. package/dist/cjs/tokens/scale.js +6 -2
  3. package/dist/datepicker.css +17 -17
  4. package/dist/esm/components/datepicker/datepicker.recipe.js +22 -20
  5. package/dist/esm/tokens/scale.js +6 -2
  6. package/dist/native/tokens.js +2 -2
  7. package/dist/styles.css +19 -19
  8. package/dist/tokens.css +2 -2
  9. package/dist/tokens.json +2 -2
  10. package/dist/types/tokens/scale.d.ts +2 -2
  11. package/package.json +1 -1
package/dist/cjs/components/datepicker/datepicker.recipe.js CHANGED
@@ -3,9 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.datepickerRecipe = void 0;
4
4
  const core_1 = require("../../core");
5
5
  const tokens_1 = require("../../tokens");
6
- // seed-design's calendar, measured from @seed-design/css. The geometry is a
7
- // 48px rhythm: header, weekday row, month label and every date cell are all
8
- // x12 tall, and the 42px pill inside a cell is inset 3px from its top.
6
+ // seed-design's calendar structure on Attio's measured scale. The behaviour,
7
+ // markup and range model are seed's; every visual value is measured from Attio's
8
+ // own date picker (app.attio.com, task due-date field): a 32px day on a 34px
9
+ // pitch, an 8px-radius highlight rather than a circle, 14/20 medium numerals and
10
+ // the brand blue for the selection.
9
11
  //
10
12
  // The pill and the range bridge are ::before layers behind the numeral
11
13
  // (`isolation: isolate` on the cell keeps their z-index local), which is what
@@ -20,18 +22,18 @@ const config = (0, core_1.defineRecipe)({
20
22
  name: "datepicker",
21
23
  base: `
22
24
  position: relative; box-sizing: border-box; width: 100%; min-width: 0;
23
- font-family: ${tokens_1.contract.font.sans}; color: ${tokens_1.contract.fgNeutralMuted}; background: ${tokens_1.contract.bgSurface};
25
+ font-family: ${tokens_1.contract.font.sans}; color: ${tokens_1.contract.fgPrimary}; background: ${tokens_1.contract.bgSurface};
24
26
 
25
27
  & .datepicker-header {
26
28
  display: flex; align-items: center; justify-content: space-between;
27
- height: ${tokens_1.contract.size.calendarCell};
29
+ height: ${tokens_1.contract.size.menuRow};
28
30
  }
29
31
  & .datepicker-header-label {
30
32
  display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1"]};
31
33
  height: 100%; min-width: 0; border: 0; padding: 0 ${tokens_1.contract.space["1"]};
32
34
  border-radius: ${tokens_1.contract.radius.md}; background: transparent; cursor: pointer;
33
35
  color: ${tokens_1.contract.fgPrimary}; font-family: inherit;
34
- font-size: ${tokens_1.contract.text.xl}; line-height: 22px; font-weight: ${tokens_1.contract.weight.bold};
36
+ font-size: ${tokens_1.contract.text.lg}; line-height: 20px; font-weight: ${tokens_1.contract.weight.medium};
35
37
  white-space: nowrap;
36
38
  outline: 2px solid transparent; outline-offset: -2px;
37
39
  transition: outline-color .2s ease;
@@ -60,16 +62,16 @@ const config = (0, core_1.defineRecipe)({
60
62
  & .datepicker-weekday {
61
63
  display: flex; align-items: center; justify-content: center;
62
64
  height: ${tokens_1.contract.size.calendarCell}; color: ${tokens_1.contract.fgNeutralSubtle};
63
- font-size: ${tokens_1.contract.text.lg}; line-height: 19px; font-weight: ${tokens_1.contract.weight.medium};
65
+ font-size: ${tokens_1.contract.text.sm}; line-height: 16px; font-weight: ${tokens_1.contract.weight.medium};
64
66
  }
65
67
 
66
68
  & .datepicker-months { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; min-width: 0; }
67
69
  & .datepicker-months[data-wheel-open] { visibility: hidden; }
68
70
  & .datepicker-month { min-width: 0; }
69
71
  & .datepicker-month-label {
70
- display: flex; align-items: center; height: ${tokens_1.contract.size.calendarCell};
71
- color: ${tokens_1.contract.fgPrimary}; font-size: ${tokens_1.contract.text.xl}; line-height: 22px;
72
- font-weight: ${tokens_1.contract.weight.bold};
72
+ display: flex; align-items: center; height: 24px;
73
+ color: ${tokens_1.contract.fgPrimary}; font-size: ${tokens_1.contract.text.lg}; line-height: 20px;
74
+ font-weight: ${tokens_1.contract.weight.medium};
73
75
  }
74
76
 
75
77
  & .datepicker-grid { display: grid; min-width: 0; }
@@ -108,27 +110,27 @@ const config = (0, core_1.defineRecipe)({
108
110
  min-height: ${tokens_1.contract.size.calendarCell}; min-width: 0;
109
111
  align-items: flex-start; justify-content: center;
110
112
  border: 0; padding: 0; background: transparent; cursor: pointer;
111
- color: ${tokens_1.contract.fgNeutralMuted}; font: inherit; outline: none;
113
+ color: ${tokens_1.contract.fgPrimary}; font: inherit; outline: none;
112
114
  isolation: isolate;
113
115
  }
114
116
  /* the round day highlight, behind the numeral */
115
117
  & .datepicker-date::before {
116
118
  content: ""; position: absolute; z-index: -1; top: ${pillInset}; left: 50%;
117
119
  width: ${tokens_1.contract.size.calendarPill}; height: ${tokens_1.contract.size.calendarPill};
118
- border-radius: ${tokens_1.contract.radius.full};
120
+ border-radius: ${tokens_1.contract.radius.md};
119
121
  background: transparent; transform: translateX(-50%);
120
122
  }
121
123
  & .datepicker-date[data-today]::before { background: ${tokens_1.contract.bgNeutralWeak}; }
122
- & .datepicker-date[data-selected]::before { background: ${tokens_1.contract.bgNeutralInverted}; }
123
- & .datepicker-date[data-selected] { color: ${tokens_1.contract.fgOnNeutralInverted}; }
124
- & .datepicker-date[data-in-range] { color: ${tokens_1.contract.fgNeutralMuted}; }
124
+ & .datepicker-date[data-selected]::before { background: ${tokens_1.contract.bgBrandSolid}; }
125
+ & .datepicker-date[data-selected] { color: ${tokens_1.contract.fgOnBrand}; }
126
+ & .datepicker-date[data-in-range] { color: ${tokens_1.contract.fgPrimary}; }
125
127
  & .datepicker-date[data-in-range]::before { background: transparent; }
126
128
  & .datepicker-date[data-unavailable] { color: ${tokens_1.contract.fgDisabled}; }
127
129
  & .datepicker-date:disabled { color: ${tokens_1.contract.fgDisabled}; cursor: not-allowed; }
128
130
  & .datepicker-date:focus-visible::after {
129
131
  content: ""; position: absolute; top: ${pillInset}; left: 50%;
130
132
  width: ${tokens_1.contract.size.calendarPill}; height: ${tokens_1.contract.size.calendarPill};
131
- transform: translateX(-50%); border-radius: ${tokens_1.contract.radius.full};
133
+ transform: translateX(-50%); border-radius: ${tokens_1.contract.radius.md};
132
134
  outline: 2px solid ${tokens_1.contract.strokeFocusRing}; outline-offset: -2px;
133
135
  }
134
136
 
@@ -137,7 +139,7 @@ const config = (0, core_1.defineRecipe)({
137
139
  min-height: ${tokens_1.contract.size.calendarCell}; min-width: 0; box-sizing: border-box;
138
140
  flex-direction: column; align-items: center; gap: 3px;
139
141
  padding-top: ${pillInset}; color: inherit;
140
- font-size: ${tokens_1.contract.text.xl}; line-height: 22px; font-weight: ${tokens_1.contract.weight.medium};
142
+ font-size: ${tokens_1.contract.text.lg}; line-height: 20px; font-weight: ${tokens_1.contract.weight.medium};
141
143
  font-variant-numeric: tabular-nums;
142
144
  }
143
145
  /* The numeral is its own 42px flex box so it centres on the 42px pill.
@@ -152,7 +154,7 @@ const config = (0, core_1.defineRecipe)({
152
154
  /* the year/month wheel, laid over the grid it replaces */
153
155
  & .datepicker-wheel-container {
154
156
  position: absolute; z-index: 1; inset-inline: 0;
155
- top: ${tokens_1.contract.size.calendarCell}; bottom: 0;
157
+ top: ${tokens_1.contract.size.menuRow}; bottom: 0;
156
158
  display: flex; align-items: center; overflow: hidden;
157
159
  background: ${tokens_1.contract.bgSurface};
158
160
  }
@@ -175,8 +177,8 @@ const config = (0, core_1.defineRecipe)({
175
177
  visibleRange: {
176
178
  month: ``,
177
179
  twoMonths: `& .datepicker-months { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: ${tokens_1.contract.space["6"]}; }
178
- & .datepicker-two-month-header { display: flex; align-items: center; justify-content: space-between; height: ${tokens_1.contract.size.calendarCell}; }
179
- & .datepicker-two-month-label { color: ${tokens_1.contract.fgPrimary}; font-size: ${tokens_1.contract.text.xl}; line-height: 22px; font-weight: ${tokens_1.contract.weight.bold}; }`,
180
+ & .datepicker-two-month-header { display: flex; align-items: center; justify-content: space-between; height: ${tokens_1.contract.size.menuRow}; }
181
+ & .datepicker-two-month-label { color: ${tokens_1.contract.fgPrimary}; font-size: ${tokens_1.contract.text.lg}; line-height: 20px; font-weight: ${tokens_1.contract.weight.medium}; }`,
180
182
  week: ``,
181
183
  continuous: `& .datepicker-weekday-row { position: sticky; top: 0; }`,
182
184
  },
package/dist/cjs/tokens/scale.js CHANGED
@@ -46,8 +46,12 @@ exports.size = {
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
- calendarCell: "48px", // calendar day cell / header rhythm (seed x12)
50
- calendarPill: "42px", // round day highlight inside a calendar cell
49
+ // Attio's date picker, measured: a 32px day with a 2px gap on both axes, so
50
+ // the pitch is 34. The gap is expressed as the cell being 2px taller than the
51
+ // highlight rather than as a grid gap, because crisp's range bridge spans
52
+ // whole cells and a column gap would cut it.
53
+ calendarCell: "34px", // calendar day pitch (32px day + 2px gap)
54
+ calendarPill: "32px", // the day highlight itself
51
55
  };
52
56
  // Typography — Attio's UI runs entirely on Inter. Sizes measured in the sidebar
53
57
  // collapse onto 11/12/13/14/16 (lg = 14px is the default body/label size);
package/dist/datepicker.css CHANGED
@@ -1,18 +1,18 @@
1
1
  .datepicker {
2
2
 
3
3
  position: relative; box-sizing: border-box; width: 100%; min-width: 0;
4
- font-family: var(--font-sans); color: var(--fg-neutral-muted); background: var(--bg-surface);
4
+ font-family: var(--font-sans); color: var(--fg-primary); background: var(--bg-surface);
5
5
 
6
6
  & .datepicker-header {
7
7
  display: flex; align-items: center; justify-content: space-between;
8
- height: var(--size-calendarCell);
8
+ height: var(--size-menuRow);
9
9
  }
10
10
  & .datepicker-header-label {
11
11
  display: inline-flex; align-items: center; gap: var(--space-1);
12
12
  height: 100%; min-width: 0; border: 0; padding: 0 var(--space-1);
13
13
  border-radius: var(--radius-md); background: transparent; cursor: pointer;
14
14
  color: var(--fg-primary); font-family: inherit;
15
- font-size: var(--text-xl); line-height: 22px; font-weight: var(--weight-bold);
15
+ font-size: var(--text-lg); line-height: 20px; font-weight: var(--weight-medium);
16
16
  white-space: nowrap;
17
17
  outline: 2px solid transparent; outline-offset: -2px;
18
18
  transition: outline-color .2s ease;
@@ -41,16 +41,16 @@
41
41
  & .datepicker-weekday {
42
42
  display: flex; align-items: center; justify-content: center;
43
43
  height: var(--size-calendarCell); color: var(--fg-neutral-subtle);
44
- font-size: var(--text-lg); line-height: 19px; font-weight: var(--weight-medium);
44
+ font-size: var(--text-sm); line-height: 16px; font-weight: var(--weight-medium);
45
45
  }
46
46
 
47
47
  & .datepicker-months { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; min-width: 0; }
48
48
  & .datepicker-months[data-wheel-open] { visibility: hidden; }
49
49
  & .datepicker-month { min-width: 0; }
50
50
  & .datepicker-month-label {
51
- display: flex; align-items: center; height: var(--size-calendarCell);
52
- color: var(--fg-primary); font-size: var(--text-xl); line-height: 22px;
53
- font-weight: var(--weight-bold);
51
+ display: flex; align-items: center; height: 24px;
52
+ color: var(--fg-primary); font-size: var(--text-lg); line-height: 20px;
53
+ font-weight: var(--weight-medium);
54
54
  }
55
55
 
56
56
  & .datepicker-grid { display: grid; min-width: 0; }
@@ -89,27 +89,27 @@
89
89
  min-height: var(--size-calendarCell); min-width: 0;
90
90
  align-items: flex-start; justify-content: center;
91
91
  border: 0; padding: 0; background: transparent; cursor: pointer;
92
- color: var(--fg-neutral-muted); font: inherit; outline: none;
92
+ color: var(--fg-primary); font: inherit; outline: none;
93
93
  isolation: isolate;
94
94
  }
95
95
  /* the round day highlight, behind the numeral */
96
96
  & .datepicker-date::before {
97
97
  content: ""; position: absolute; z-index: -1; top: calc((var(--size-calendarCell) - var(--size-calendarPill)) / 2); left: 50%;
98
98
  width: var(--size-calendarPill); height: var(--size-calendarPill);
99
- border-radius: var(--radius-full);
99
+ border-radius: var(--radius-md);
100
100
  background: transparent; transform: translateX(-50%);
101
101
  }
102
102
  & .datepicker-date[data-today]::before { background: var(--bg-neutral-weak); }
103
- & .datepicker-date[data-selected]::before { background: var(--bg-neutral-inverted); }
104
- & .datepicker-date[data-selected] { color: var(--fg-on-neutral-inverted); }
105
- & .datepicker-date[data-in-range] { color: var(--fg-neutral-muted); }
103
+ & .datepicker-date[data-selected]::before { background: var(--bg-brand-solid); }
104
+ & .datepicker-date[data-selected] { color: var(--fg-on-brand); }
105
+ & .datepicker-date[data-in-range] { color: var(--fg-primary); }
106
106
  & .datepicker-date[data-in-range]::before { background: transparent; }
107
107
  & .datepicker-date[data-unavailable] { color: var(--fg-disabled); }
108
108
  & .datepicker-date:disabled { color: var(--fg-disabled); cursor: not-allowed; }
109
109
  & .datepicker-date:focus-visible::after {
110
110
  content: ""; position: absolute; top: calc((var(--size-calendarCell) - var(--size-calendarPill)) / 2); left: 50%;
111
111
  width: var(--size-calendarPill); height: var(--size-calendarPill);
112
- transform: translateX(-50%); border-radius: var(--radius-full);
112
+ transform: translateX(-50%); border-radius: var(--radius-md);
113
113
  outline: 2px solid var(--stroke-focus-ring); outline-offset: -2px;
114
114
  }
115
115
 
@@ -118,7 +118,7 @@
118
118
  min-height: var(--size-calendarCell); min-width: 0; box-sizing: border-box;
119
119
  flex-direction: column; align-items: center; gap: 3px;
120
120
  padding-top: calc((var(--size-calendarCell) - var(--size-calendarPill)) / 2); color: inherit;
121
- font-size: var(--text-xl); line-height: 22px; font-weight: var(--weight-medium);
121
+ font-size: var(--text-lg); line-height: 20px; font-weight: var(--weight-medium);
122
122
  font-variant-numeric: tabular-nums;
123
123
  }
124
124
  /* The numeral is its own 42px flex box so it centres on the 42px pill.
@@ -133,7 +133,7 @@
133
133
  /* the year/month wheel, laid over the grid it replaces */
134
134
  & .datepicker-wheel-container {
135
135
  position: absolute; z-index: 1; inset-inline: 0;
136
- top: var(--size-calendarCell); bottom: 0;
136
+ top: var(--size-menuRow); bottom: 0;
137
137
  display: flex; align-items: center; overflow: hidden;
138
138
  background: var(--bg-surface);
139
139
  }
@@ -158,8 +158,8 @@
158
158
  }
159
159
  .datepicker--visibleRange_twoMonths {
160
160
  & .datepicker-months { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-6); }
161
- & .datepicker-two-month-header { display: flex; align-items: center; justify-content: space-between; height: var(--size-calendarCell); }
162
- & .datepicker-two-month-label { color: var(--fg-primary); font-size: var(--text-xl); line-height: 22px; font-weight: var(--weight-bold); }
161
+ & .datepicker-two-month-header { display: flex; align-items: center; justify-content: space-between; height: var(--size-menuRow); }
162
+ & .datepicker-two-month-label { color: var(--fg-primary); font-size: var(--text-lg); line-height: 20px; font-weight: var(--weight-medium); }
163
163
  }
164
164
  .datepicker--visibleRange_week {
165
165
 
package/dist/esm/components/datepicker/datepicker.recipe.js CHANGED
@@ -1,8 +1,10 @@
1
1
  import { defineRecipe, resolveRecipe } from "../../core/index.js";
2
2
  import { contract as c } from "../../tokens/index.js";
3
- // seed-design's calendar, measured from @seed-design/css. The geometry is a
4
- // 48px rhythm: header, weekday row, month label and every date cell are all
5
- // x12 tall, and the 42px pill inside a cell is inset 3px from its top.
3
+ // seed-design's calendar structure on Attio's measured scale. The behaviour,
4
+ // markup and range model are seed's; every visual value is measured from Attio's
5
+ // own date picker (app.attio.com, task due-date field): a 32px day on a 34px
6
+ // pitch, an 8px-radius highlight rather than a circle, 14/20 medium numerals and
7
+ // the brand blue for the selection.
6
8
  //
7
9
  // The pill and the range bridge are ::before layers behind the numeral
8
10
  // (`isolation: isolate` on the cell keeps their z-index local), which is what
@@ -17,18 +19,18 @@ const config = defineRecipe({
17
19
  name: "datepicker",
18
20
  base: `
19
21
  position: relative; box-sizing: border-box; width: 100%; min-width: 0;
20
- font-family: ${c.font.sans}; color: ${c.fgNeutralMuted}; background: ${c.bgSurface};
22
+ font-family: ${c.font.sans}; color: ${c.fgPrimary}; background: ${c.bgSurface};
21
23
 
22
24
  & .datepicker-header {
23
25
  display: flex; align-items: center; justify-content: space-between;
24
- height: ${c.size.calendarCell};
26
+ height: ${c.size.menuRow};
25
27
  }
26
28
  & .datepicker-header-label {
27
29
  display: inline-flex; align-items: center; gap: ${c.space["1"]};
28
30
  height: 100%; min-width: 0; border: 0; padding: 0 ${c.space["1"]};
29
31
  border-radius: ${c.radius.md}; background: transparent; cursor: pointer;
30
32
  color: ${c.fgPrimary}; font-family: inherit;
31
- font-size: ${c.text.xl}; line-height: 22px; font-weight: ${c.weight.bold};
33
+ font-size: ${c.text.lg}; line-height: 20px; font-weight: ${c.weight.medium};
32
34
  white-space: nowrap;
33
35
  outline: 2px solid transparent; outline-offset: -2px;
34
36
  transition: outline-color .2s ease;
@@ -57,16 +59,16 @@ const config = defineRecipe({
57
59
  & .datepicker-weekday {
58
60
  display: flex; align-items: center; justify-content: center;
59
61
  height: ${c.size.calendarCell}; color: ${c.fgNeutralSubtle};
60
- font-size: ${c.text.lg}; line-height: 19px; font-weight: ${c.weight.medium};
62
+ font-size: ${c.text.sm}; line-height: 16px; font-weight: ${c.weight.medium};
61
63
  }
62
64
 
63
65
  & .datepicker-months { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; min-width: 0; }
64
66
  & .datepicker-months[data-wheel-open] { visibility: hidden; }
65
67
  & .datepicker-month { min-width: 0; }
66
68
  & .datepicker-month-label {
67
- display: flex; align-items: center; height: ${c.size.calendarCell};
68
- color: ${c.fgPrimary}; font-size: ${c.text.xl}; line-height: 22px;
69
- font-weight: ${c.weight.bold};
69
+ display: flex; align-items: center; height: 24px;
70
+ color: ${c.fgPrimary}; font-size: ${c.text.lg}; line-height: 20px;
71
+ font-weight: ${c.weight.medium};
70
72
  }
71
73
 
72
74
  & .datepicker-grid { display: grid; min-width: 0; }
@@ -105,27 +107,27 @@ const config = defineRecipe({
105
107
  min-height: ${c.size.calendarCell}; min-width: 0;
106
108
  align-items: flex-start; justify-content: center;
107
109
  border: 0; padding: 0; background: transparent; cursor: pointer;
108
- color: ${c.fgNeutralMuted}; font: inherit; outline: none;
110
+ color: ${c.fgPrimary}; font: inherit; outline: none;
109
111
  isolation: isolate;
110
112
  }
111
113
  /* the round day highlight, behind the numeral */
112
114
  & .datepicker-date::before {
113
115
  content: ""; position: absolute; z-index: -1; top: ${pillInset}; left: 50%;
114
116
  width: ${c.size.calendarPill}; height: ${c.size.calendarPill};
115
- border-radius: ${c.radius.full};
117
+ border-radius: ${c.radius.md};
116
118
  background: transparent; transform: translateX(-50%);
117
119
  }
118
120
  & .datepicker-date[data-today]::before { background: ${c.bgNeutralWeak}; }
119
- & .datepicker-date[data-selected]::before { background: ${c.bgNeutralInverted}; }
120
- & .datepicker-date[data-selected] { color: ${c.fgOnNeutralInverted}; }
121
- & .datepicker-date[data-in-range] { color: ${c.fgNeutralMuted}; }
121
+ & .datepicker-date[data-selected]::before { background: ${c.bgBrandSolid}; }
122
+ & .datepicker-date[data-selected] { color: ${c.fgOnBrand}; }
123
+ & .datepicker-date[data-in-range] { color: ${c.fgPrimary}; }
122
124
  & .datepicker-date[data-in-range]::before { background: transparent; }
123
125
  & .datepicker-date[data-unavailable] { color: ${c.fgDisabled}; }
124
126
  & .datepicker-date:disabled { color: ${c.fgDisabled}; cursor: not-allowed; }
125
127
  & .datepicker-date:focus-visible::after {
126
128
  content: ""; position: absolute; top: ${pillInset}; left: 50%;
127
129
  width: ${c.size.calendarPill}; height: ${c.size.calendarPill};
128
- transform: translateX(-50%); border-radius: ${c.radius.full};
130
+ transform: translateX(-50%); border-radius: ${c.radius.md};
129
131
  outline: 2px solid ${c.strokeFocusRing}; outline-offset: -2px;
130
132
  }
131
133
 
@@ -134,7 +136,7 @@ const config = defineRecipe({
134
136
  min-height: ${c.size.calendarCell}; min-width: 0; box-sizing: border-box;
135
137
  flex-direction: column; align-items: center; gap: 3px;
136
138
  padding-top: ${pillInset}; color: inherit;
137
- font-size: ${c.text.xl}; line-height: 22px; font-weight: ${c.weight.medium};
139
+ font-size: ${c.text.lg}; line-height: 20px; font-weight: ${c.weight.medium};
138
140
  font-variant-numeric: tabular-nums;
139
141
  }
140
142
  /* The numeral is its own 42px flex box so it centres on the 42px pill.
@@ -149,7 +151,7 @@ const config = defineRecipe({
149
151
  /* the year/month wheel, laid over the grid it replaces */
150
152
  & .datepicker-wheel-container {
151
153
  position: absolute; z-index: 1; inset-inline: 0;
152
- top: ${c.size.calendarCell}; bottom: 0;
154
+ top: ${c.size.menuRow}; bottom: 0;
153
155
  display: flex; align-items: center; overflow: hidden;
154
156
  background: ${c.bgSurface};
155
157
  }
@@ -172,8 +174,8 @@ const config = defineRecipe({
172
174
  visibleRange: {
173
175
  month: ``,
174
176
  twoMonths: `& .datepicker-months { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: ${c.space["6"]}; }
175
- & .datepicker-two-month-header { display: flex; align-items: center; justify-content: space-between; height: ${c.size.calendarCell}; }
176
- & .datepicker-two-month-label { color: ${c.fgPrimary}; font-size: ${c.text.xl}; line-height: 22px; font-weight: ${c.weight.bold}; }`,
177
+ & .datepicker-two-month-header { display: flex; align-items: center; justify-content: space-between; height: ${c.size.menuRow}; }
178
+ & .datepicker-two-month-label { color: ${c.fgPrimary}; font-size: ${c.text.lg}; line-height: 20px; font-weight: ${c.weight.medium}; }`,
177
179
  week: ``,
178
180
  continuous: `& .datepicker-weekday-row { position: sticky; top: 0; }`,
179
181
  },
package/dist/esm/tokens/scale.js CHANGED
@@ -43,8 +43,12 @@ export const size = {
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
- calendarCell: "48px", // calendar day cell / header rhythm (seed x12)
47
- calendarPill: "42px", // round day highlight inside a calendar cell
46
+ // Attio's date picker, measured: a 32px day with a 2px gap on both axes, so
47
+ // the pitch is 34. The gap is expressed as the cell being 2px taller than the
48
+ // highlight rather than as a grid gap, because crisp's range bridge spans
49
+ // whole cells and a column gap would cut it.
50
+ calendarCell: "34px", // calendar day pitch (32px day + 2px gap)
51
+ calendarPill: "32px", // the day highlight itself
48
52
  };
49
53
  // Typography — Attio's UI runs entirely on Inter. Sizes measured in the sidebar
50
54
  // collapse onto 11/12/13/14/16 (lg = 14px is the default body/label size);
package/dist/native/tokens.js CHANGED
@@ -198,8 +198,8 @@ export const tokens = {
198
198
  "tableRow": 36,
199
199
  "tableHeader": 40,
200
200
  "header": 48,
201
- "calendarCell": 48,
202
- "calendarPill": 42
201
+ "calendarCell": 34,
202
+ "calendarPill": 32
203
203
  },
204
204
  "text": {
205
205
  "xs": 11,
package/dist/styles.css CHANGED
@@ -108,8 +108,8 @@
108
108
  --size-tableRow: 36px;
109
109
  --size-tableHeader: 40px;
110
110
  --size-header: 48px;
111
- --size-calendarCell: 48px;
112
- --size-calendarPill: 42px;
111
+ --size-calendarCell: 34px;
112
+ --size-calendarPill: 32px;
113
113
  --text-xs: 11px;
114
114
  --text-sm: 12px;
115
115
  --text-md: 13px;
@@ -571,18 +571,18 @@
571
571
  .datepicker {
572
572
 
573
573
  position: relative; box-sizing: border-box; width: 100%; min-width: 0;
574
- font-family: var(--font-sans); color: var(--fg-neutral-muted); background: var(--bg-surface);
574
+ font-family: var(--font-sans); color: var(--fg-primary); background: var(--bg-surface);
575
575
 
576
576
  & .datepicker-header {
577
577
  display: flex; align-items: center; justify-content: space-between;
578
- height: var(--size-calendarCell);
578
+ height: var(--size-menuRow);
579
579
  }
580
580
  & .datepicker-header-label {
581
581
  display: inline-flex; align-items: center; gap: var(--space-1);
582
582
  height: 100%; min-width: 0; border: 0; padding: 0 var(--space-1);
583
583
  border-radius: var(--radius-md); background: transparent; cursor: pointer;
584
584
  color: var(--fg-primary); font-family: inherit;
585
- font-size: var(--text-xl); line-height: 22px; font-weight: var(--weight-bold);
585
+ font-size: var(--text-lg); line-height: 20px; font-weight: var(--weight-medium);
586
586
  white-space: nowrap;
587
587
  outline: 2px solid transparent; outline-offset: -2px;
588
588
  transition: outline-color .2s ease;
@@ -611,16 +611,16 @@
611
611
  & .datepicker-weekday {
612
612
  display: flex; align-items: center; justify-content: center;
613
613
  height: var(--size-calendarCell); color: var(--fg-neutral-subtle);
614
- font-size: var(--text-lg); line-height: 19px; font-weight: var(--weight-medium);
614
+ font-size: var(--text-sm); line-height: 16px; font-weight: var(--weight-medium);
615
615
  }
616
616
 
617
617
  & .datepicker-months { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; min-width: 0; }
618
618
  & .datepicker-months[data-wheel-open] { visibility: hidden; }
619
619
  & .datepicker-month { min-width: 0; }
620
620
  & .datepicker-month-label {
621
- display: flex; align-items: center; height: var(--size-calendarCell);
622
- color: var(--fg-primary); font-size: var(--text-xl); line-height: 22px;
623
- font-weight: var(--weight-bold);
621
+ display: flex; align-items: center; height: 24px;
622
+ color: var(--fg-primary); font-size: var(--text-lg); line-height: 20px;
623
+ font-weight: var(--weight-medium);
624
624
  }
625
625
 
626
626
  & .datepicker-grid { display: grid; min-width: 0; }
@@ -659,27 +659,27 @@
659
659
  min-height: var(--size-calendarCell); min-width: 0;
660
660
  align-items: flex-start; justify-content: center;
661
661
  border: 0; padding: 0; background: transparent; cursor: pointer;
662
- color: var(--fg-neutral-muted); font: inherit; outline: none;
662
+ color: var(--fg-primary); font: inherit; outline: none;
663
663
  isolation: isolate;
664
664
  }
665
665
  /* the round day highlight, behind the numeral */
666
666
  & .datepicker-date::before {
667
667
  content: ""; position: absolute; z-index: -1; top: calc((var(--size-calendarCell) - var(--size-calendarPill)) / 2); left: 50%;
668
668
  width: var(--size-calendarPill); height: var(--size-calendarPill);
669
- border-radius: var(--radius-full);
669
+ border-radius: var(--radius-md);
670
670
  background: transparent; transform: translateX(-50%);
671
671
  }
672
672
  & .datepicker-date[data-today]::before { background: var(--bg-neutral-weak); }
673
- & .datepicker-date[data-selected]::before { background: var(--bg-neutral-inverted); }
674
- & .datepicker-date[data-selected] { color: var(--fg-on-neutral-inverted); }
675
- & .datepicker-date[data-in-range] { color: var(--fg-neutral-muted); }
673
+ & .datepicker-date[data-selected]::before { background: var(--bg-brand-solid); }
674
+ & .datepicker-date[data-selected] { color: var(--fg-on-brand); }
675
+ & .datepicker-date[data-in-range] { color: var(--fg-primary); }
676
676
  & .datepicker-date[data-in-range]::before { background: transparent; }
677
677
  & .datepicker-date[data-unavailable] { color: var(--fg-disabled); }
678
678
  & .datepicker-date:disabled { color: var(--fg-disabled); cursor: not-allowed; }
679
679
  & .datepicker-date:focus-visible::after {
680
680
  content: ""; position: absolute; top: calc((var(--size-calendarCell) - var(--size-calendarPill)) / 2); left: 50%;
681
681
  width: var(--size-calendarPill); height: var(--size-calendarPill);
682
- transform: translateX(-50%); border-radius: var(--radius-full);
682
+ transform: translateX(-50%); border-radius: var(--radius-md);
683
683
  outline: 2px solid var(--stroke-focus-ring); outline-offset: -2px;
684
684
  }
685
685
 
@@ -688,7 +688,7 @@
688
688
  min-height: var(--size-calendarCell); min-width: 0; box-sizing: border-box;
689
689
  flex-direction: column; align-items: center; gap: 3px;
690
690
  padding-top: calc((var(--size-calendarCell) - var(--size-calendarPill)) / 2); color: inherit;
691
- font-size: var(--text-xl); line-height: 22px; font-weight: var(--weight-medium);
691
+ font-size: var(--text-lg); line-height: 20px; font-weight: var(--weight-medium);
692
692
  font-variant-numeric: tabular-nums;
693
693
  }
694
694
  /* The numeral is its own 42px flex box so it centres on the 42px pill.
@@ -703,7 +703,7 @@
703
703
  /* the year/month wheel, laid over the grid it replaces */
704
704
  & .datepicker-wheel-container {
705
705
  position: absolute; z-index: 1; inset-inline: 0;
706
- top: var(--size-calendarCell); bottom: 0;
706
+ top: var(--size-menuRow); bottom: 0;
707
707
  display: flex; align-items: center; overflow: hidden;
708
708
  background: var(--bg-surface);
709
709
  }
@@ -728,8 +728,8 @@
728
728
  }
729
729
  .datepicker--visibleRange_twoMonths {
730
730
  & .datepicker-months { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-6); }
731
- & .datepicker-two-month-header { display: flex; align-items: center; justify-content: space-between; height: var(--size-calendarCell); }
732
- & .datepicker-two-month-label { color: var(--fg-primary); font-size: var(--text-xl); line-height: 22px; font-weight: var(--weight-bold); }
731
+ & .datepicker-two-month-header { display: flex; align-items: center; justify-content: space-between; height: var(--size-menuRow); }
732
+ & .datepicker-two-month-label { color: var(--fg-primary); font-size: var(--text-lg); line-height: 20px; font-weight: var(--weight-medium); }
733
733
  }
734
734
  .datepicker--visibleRange_week {
735
735
 
package/dist/tokens.css CHANGED
@@ -108,8 +108,8 @@
108
108
  --size-tableRow: 36px;
109
109
  --size-tableHeader: 40px;
110
110
  --size-header: 48px;
111
- --size-calendarCell: 48px;
112
- --size-calendarPill: 42px;
111
+ --size-calendarCell: 34px;
112
+ --size-calendarPill: 32px;
113
113
  --text-xs: 11px;
114
114
  --text-sm: 12px;
115
115
  --text-md: 13px;
package/dist/tokens.json CHANGED
@@ -195,8 +195,8 @@
195
195
  "tableRow": 36,
196
196
  "tableHeader": 40,
197
197
  "header": 48,
198
- "calendarCell": 48,
199
- "calendarPill": 42
198
+ "calendarCell": 34,
199
+ "calendarPill": 32
200
200
  },
201
201
  "text": {
202
202
  "xs": 11,
package/dist/types/tokens/scale.d.ts CHANGED
@@ -28,8 +28,8 @@ export declare const size: {
28
28
  readonly tableRow: "36px";
29
29
  readonly tableHeader: "40px";
30
30
  readonly header: "48px";
31
- readonly calendarCell: "48px";
32
- readonly calendarPill: "42px";
31
+ readonly calendarCell: "34px";
32
+ readonly calendarPill: "32px";
33
33
  };
34
34
  export declare const font: {
35
35
  readonly sans: '"Inter", system-ui, -apple-system, "Segoe UI", sans-serif';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@crisp-ui-kit/crisp",
3
- "version": "0.7.2",
3
+ "version": "0.7.3",
4
4
  "description": "A lean React design system, measured pixel-for-pixel from Attio.",
5
5
  "license": "MIT",
6
6
  "type": "module",