rift-ds 1.3.0 → 1.5.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 (71) hide show
  1. package/README.md +3 -3
  2. package/components/Attachment/Attachment.css +1036 -0
  3. package/components/Attachment/AttachmentDropZone.d.ts +39 -0
  4. package/components/Attachment/AttachmentDropZone.js +76 -0
  5. package/components/Attachment/AttachmentGroup.d.ts +60 -0
  6. package/components/Attachment/AttachmentGroup.js +179 -0
  7. package/components/Attachment/AttachmentTile.d.ts +80 -0
  8. package/components/Attachment/AttachmentTile.js +143 -0
  9. package/components/Attachment/AttachmentViewer.d.ts +66 -0
  10. package/components/Attachment/AttachmentViewer.js +215 -0
  11. package/components/Attachment/fileTypes.d.ts +101 -0
  12. package/components/Attachment/fileTypes.js +182 -0
  13. package/components/Attachment/typeMark.d.ts +11 -0
  14. package/components/Attachment/typeMark.js +51 -0
  15. package/components/Attachment/useAttachments.d.ts +65 -0
  16. package/components/Attachment/useAttachments.js +201 -0
  17. package/components/ChatMessage/ChatMessage.css +24 -0
  18. package/components/ChatMessage/ChatMessage.d.ts +6 -0
  19. package/components/ChatMessage/ChatMessage.js +8 -5
  20. package/components/Composer/Composer.css +95 -2
  21. package/components/Composer/Composer.d.ts +57 -8
  22. package/components/Composer/Composer.js +179 -6
  23. package/components/ContextMenu/ContextMenu.css +25 -0
  24. package/components/ContextMenu/ContextMenu.js +14 -6
  25. package/components/DocumentChip/DocumentChip.d.ts +7 -5
  26. package/components/DropdownMenu/DropdownMenu.css +29 -0
  27. package/components/DropdownMenu/DropdownMenu.d.ts +2 -0
  28. package/components/DropdownMenu/DropdownMenu.js +15 -7
  29. package/components/FileInput/FileInput.js +1 -7
  30. package/components/MessageCard/MessageCard.d.ts +1 -1
  31. package/components/Quote/Quote.css +2 -2
  32. package/components/ShaderField/useShaderField.d.ts +4 -4
  33. package/components/Stat/Stat.css +2 -2
  34. package/components/registry.json +38 -2
  35. package/components/registry.json.d.ts +38 -2
  36. package/components/registry.json.js +1 -1
  37. package/fonts/presets/fredoka-300-700-latin-ext.woff2 +0 -0
  38. package/fonts/presets/fredoka-300-700-latin.woff2 +0 -0
  39. package/fonts/presets/manrope-300-800-latin-ext.woff2 +0 -0
  40. package/fonts/presets/manrope-300-800-latin.woff2 +0 -0
  41. package/fonts/presets/nunito-300-800-latin-ext.woff2 +0 -0
  42. package/fonts/presets/nunito-300-800-latin.woff2 +0 -0
  43. package/fonts/presets/playfair-display-400-800-latin-ext.woff2 +0 -0
  44. package/fonts/presets/playfair-display-400-800-latin.woff2 +0 -0
  45. package/fonts/presets/plus-jakarta-sans-300-800-latin-ext.woff2 +0 -0
  46. package/fonts/presets/plus-jakarta-sans-300-800-latin.woff2 +0 -0
  47. package/fonts/presets/source-sans-3-300-700-latin.woff2 +0 -0
  48. package/index.d.ts +4 -0
  49. package/index.js +19 -0
  50. package/package.json +9 -1
  51. package/tokens/presets/contrast.css +9 -9
  52. package/tokens/presets/coral.css +6 -6
  53. package/tokens/presets/forest.css +10 -10
  54. package/tokens/presets/gold.css +119 -11
  55. package/tokens/presets/mono.css +2 -2
  56. package/tokens/presets/pink.css +104 -24
  57. package/tokens/presets/terminal.css +13 -13
  58. package/tokens/presets/violet.css +114 -26
  59. package/tokens/presets/warm.css +10 -10
  60. package/tokens/presets/zest.css +10 -10
  61. package/tokens/registry.json +4 -0
  62. package/tokens/registry.json.d.ts +4 -0
  63. package/tokens/registry.json.js +1 -1
  64. package/tokens/tokens-dark.css +6 -0
  65. package/tokens/tokens-light.css +12 -0
  66. package/tokens/tokens-primitives.css +10 -0
  67. package/tokens/tokens-typography.css +1 -1
  68. package/fonts/presets/fraunces-300-700-latin-ext.woff2 +0 -0
  69. package/fonts/presets/fraunces-300-700-latin.woff2 +0 -0
  70. package/fonts/presets/work-sans-300-700-latin-ext.woff2 +0 -0
  71. package/fonts/presets/work-sans-300-700-latin.woff2 +0 -0
package/tokens/presets/gold.css CHANGED
@@ -6,6 +6,24 @@
6
6
  * Regenerate: node scripts/generate-preset-stylesheets.mjs
7
7
  * Import after tokens.css, then set data-brand="gold" on <html>.
8
8
  */
9
+ @font-face {
10
+ font-family: 'Manrope';
11
+ font-style: normal;
12
+ font-weight: 300 800;
13
+ font-display: swap;
14
+ src: url('../../fonts/presets/manrope-300-800-latin.woff2') format('woff2');
15
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
16
+ }
17
+
18
+ @font-face {
19
+ font-family: 'Manrope';
20
+ font-style: normal;
21
+ font-weight: 300 800;
22
+ font-display: swap;
23
+ src: url('../../fonts/presets/manrope-300-800-latin-ext.woff2') format('woff2');
24
+ unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
25
+ }
26
+
9
27
  @font-face {
10
28
  font-family: 'Space Grotesk';
11
29
  font-style: normal;
@@ -21,7 +39,7 @@
21
39
  font-weight: 300 700;
22
40
  font-display: swap;
23
41
  src: url('../../fonts/presets/space-grotesk-300-700-latin-ext.woff2') format('woff2');
24
- unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
42
+ unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
25
43
  }
26
44
 
27
45
  html[data-brand="gold"] {
@@ -46,7 +64,33 @@ html[data-brand="gold"] {
46
64
  --color-core-ui-secondary: var(--primitive-yellow-10);
47
65
  --color-input-border-hover: var(--primitive-yellow-08);
48
66
  --color-input-border-selected: var(--primitive-yellow-07);
49
- --font-family-primary: 'Space Grotesk', sans-serif;
67
+ --font-caption-letter-spacing: -0.01em;
68
+ --font-display-1-letter-spacing: 0.01em;
69
+ --font-display-1-weight: 500;
70
+ --font-display-2-letter-spacing: 0.005em;
71
+ --font-display-2-weight: 500;
72
+ --font-family-heading: 'Space Grotesk', sans-serif;
73
+ --font-family-primary: 'Manrope', sans-serif;
74
+ --font-heading-1-letter-spacing: 0.005em;
75
+ --font-heading-1-weight: 700;
76
+ --font-heading-2-letter-spacing: 0.005em;
77
+ --font-heading-2-weight: 700;
78
+ --font-heading-3-letter-spacing: 0.005em;
79
+ --font-heading-3-weight: 700;
80
+ --font-mega-1-letter-spacing: 0.01em;
81
+ --font-mega-1-weight: 500;
82
+ --font-mega-2-letter-spacing: 0.01em;
83
+ --font-mega-2-weight: 500;
84
+ --font-overline-letter-spacing: 0.07em;
85
+ --font-paragraph-emphasis-letter-spacing: -0.02em;
86
+ --font-paragraph-letter-spacing: -0.01em;
87
+ --font-paragraph-sm-emphasis-letter-spacing: -0.01em;
88
+ --font-paragraph-sm-letter-spacing: -0.01em;
89
+ --font-sub-display-letter-spacing: 0.005em;
90
+ --font-sub-display-weight: 500;
91
+ --font-title-body-letter-spacing: -0.02em;
92
+ --font-title-body-weight: 700;
93
+ --material-symbols-weight: 500;
50
94
  --motion-duration-base: 180ms;
51
95
  --motion-duration-deliberate: 360ms;
52
96
  --motion-duration-fast: 135ms;
@@ -65,6 +109,16 @@ html[data-brand="gold"] {
65
109
  --primitive-blue-09: #1B2C71;
66
110
  --primitive-blue-10: #0F193E;
67
111
  --primitive-blue-11: #0A112B;
112
+ --primitive-gap-050: 2px;
113
+ --primitive-gap-100: 4px;
114
+ --primitive-gap-1000: 38px;
115
+ --primitive-gap-1500: 57px;
116
+ --primitive-gap-200: 8px;
117
+ --primitive-gap-2000: 76px;
118
+ --primitive-gap-300: 11px;
119
+ --primitive-gap-3000: 114px;
120
+ --primitive-gap-400: 15px;
121
+ --primitive-gap-500: 19px;
68
122
  --primitive-green-00: #F8FDFB;
69
123
  --primitive-green-01: #EFFAF6;
70
124
  --primitive-green-02: #D1F1E6;
@@ -77,14 +131,14 @@ html[data-brand="gold"] {
77
131
  --primitive-green-09: #1A6A50;
78
132
  --primitive-green-10: #0F3E2F;
79
133
  --primitive-green-11: #0C3024;
80
- --primitive-neutral-00: #FFFDF9;
81
- --primitive-neutral-00-a01: rgba(255, 253, 249, 0.01);
82
- --primitive-neutral-00-a60: rgba(255, 253, 249, 0.6);
83
- --primitive-neutral-00-a90: rgba(255, 253, 249, 0.9);
84
- --primitive-neutral-01: #F2F0EB;
85
- --primitive-neutral-01-a01: rgba(242, 240, 235, 0.01);
86
- --primitive-neutral-01-a60: rgba(242, 240, 235, 0.6);
87
- --primitive-neutral-01-a82: rgba(242, 240, 235, 0.82);
134
+ --primitive-neutral-00: #FFFEFC;
135
+ --primitive-neutral-00-a01: rgba(255, 254, 252, 0.01);
136
+ --primitive-neutral-00-a60: rgba(255, 254, 252, 0.6);
137
+ --primitive-neutral-00-a90: rgba(255, 254, 252, 0.9);
138
+ --primitive-neutral-01: #F1F0EE;
139
+ --primitive-neutral-01-a01: rgba(241, 240, 238, 0.01);
140
+ --primitive-neutral-01-a60: rgba(241, 240, 238, 0.6);
141
+ --primitive-neutral-01-a82: rgba(241, 240, 238, 0.82);
88
142
  --primitive-neutral-02: #D8D6D2;
89
143
  --primitive-neutral-02-a80: rgba(216, 214, 210, 0.8);
90
144
  --primitive-neutral-03: #BFBDB9;
@@ -117,6 +171,15 @@ html[data-brand="gold"] {
117
171
  --primitive-orange-09: #8A5321;
118
172
  --primitive-orange-10: #523214;
119
173
  --primitive-orange-11: #3D250F;
174
+ --primitive-padding-050: 2px;
175
+ --primitive-padding-100: 4px;
176
+ --primitive-padding-1000: 38px;
177
+ --primitive-padding-150: 6px;
178
+ --primitive-padding-1500: 57px;
179
+ --primitive-padding-200: 8px;
180
+ --primitive-padding-300: 11px;
181
+ --primitive-padding-400: 15px;
182
+ --primitive-padding-500: 19px;
120
183
  --primitive-purple-00: #FCFAFE;
121
184
  --primitive-purple-01: #F6F2FD;
122
185
  --primitive-purple-02: #E2D2F9;
@@ -185,7 +248,33 @@ html[data-brand="gold"][data-theme="dark"] {
185
248
  --color-core-ui-secondary: var(--primitive-yellow-09);
186
249
  --color-input-border-hover: var(--primitive-yellow-08);
187
250
  --color-input-border-selected: var(--primitive-yellow-08);
188
- --font-family-primary: 'Space Grotesk', sans-serif;
251
+ --font-caption-letter-spacing: -0.01em;
252
+ --font-display-1-letter-spacing: 0.01em;
253
+ --font-display-1-weight: 500;
254
+ --font-display-2-letter-spacing: 0.005em;
255
+ --font-display-2-weight: 500;
256
+ --font-family-heading: 'Space Grotesk', sans-serif;
257
+ --font-family-primary: 'Manrope', sans-serif;
258
+ --font-heading-1-letter-spacing: 0.005em;
259
+ --font-heading-1-weight: 700;
260
+ --font-heading-2-letter-spacing: 0.005em;
261
+ --font-heading-2-weight: 700;
262
+ --font-heading-3-letter-spacing: 0.005em;
263
+ --font-heading-3-weight: 700;
264
+ --font-mega-1-letter-spacing: 0.01em;
265
+ --font-mega-1-weight: 500;
266
+ --font-mega-2-letter-spacing: 0.01em;
267
+ --font-mega-2-weight: 500;
268
+ --font-overline-letter-spacing: 0.07em;
269
+ --font-paragraph-emphasis-letter-spacing: -0.02em;
270
+ --font-paragraph-letter-spacing: -0.01em;
271
+ --font-paragraph-sm-emphasis-letter-spacing: -0.01em;
272
+ --font-paragraph-sm-letter-spacing: -0.01em;
273
+ --font-sub-display-letter-spacing: 0.005em;
274
+ --font-sub-display-weight: 500;
275
+ --font-title-body-letter-spacing: -0.02em;
276
+ --font-title-body-weight: 700;
277
+ --material-symbols-weight: 500;
189
278
  --motion-duration-base: 180ms;
190
279
  --motion-duration-deliberate: 360ms;
191
280
  --motion-duration-fast: 135ms;
@@ -204,6 +293,16 @@ html[data-brand="gold"][data-theme="dark"] {
204
293
  --primitive-blue-09: #1B2C71;
205
294
  --primitive-blue-10: #0F193E;
206
295
  --primitive-blue-11: #0A112B;
296
+ --primitive-gap-050: 2px;
297
+ --primitive-gap-100: 4px;
298
+ --primitive-gap-1000: 38px;
299
+ --primitive-gap-1500: 57px;
300
+ --primitive-gap-200: 8px;
301
+ --primitive-gap-2000: 76px;
302
+ --primitive-gap-300: 11px;
303
+ --primitive-gap-3000: 114px;
304
+ --primitive-gap-400: 15px;
305
+ --primitive-gap-500: 19px;
207
306
  --primitive-green-00: #F8FDFB;
208
307
  --primitive-green-01: #EFFAF6;
209
308
  --primitive-green-02: #D1F1E6;
@@ -256,6 +355,15 @@ html[data-brand="gold"][data-theme="dark"] {
256
355
  --primitive-orange-09: #8A5321;
257
356
  --primitive-orange-10: #523214;
258
357
  --primitive-orange-11: #3D250F;
358
+ --primitive-padding-050: 2px;
359
+ --primitive-padding-100: 4px;
360
+ --primitive-padding-1000: 38px;
361
+ --primitive-padding-150: 6px;
362
+ --primitive-padding-1500: 57px;
363
+ --primitive-padding-200: 8px;
364
+ --primitive-padding-300: 11px;
365
+ --primitive-padding-400: 15px;
366
+ --primitive-padding-500: 19px;
259
367
  --primitive-purple-00: #FCFAFE;
260
368
  --primitive-purple-01: #F6F2FD;
261
369
  --primitive-purple-02: #E2D2F9;
package/tokens/presets/mono.css CHANGED
@@ -21,7 +21,7 @@
21
21
  font-weight: 300 700;
22
22
  font-display: swap;
23
23
  src: url('../../fonts/presets/inter-300-700-latin-ext.woff2') format('woff2');
24
- unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
24
+ unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
25
25
  }
26
26
 
27
27
  @font-face {
@@ -39,7 +39,7 @@
39
39
  font-weight: 300 700;
40
40
  font-display: swap;
41
41
  src: url('../../fonts/presets/montserrat-300-700-latin-ext.woff2') format('woff2');
42
- unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
42
+ unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
43
43
  }
44
44
 
45
45
  html[data-brand="mono"] {
package/tokens/presets/pink.css CHANGED
@@ -7,39 +7,39 @@
7
7
  * Import after tokens.css, then set data-brand="pink" on <html>.
8
8
  */
9
9
  @font-face {
10
- font-family: 'Inter';
10
+ font-family: 'Nunito';
11
11
  font-style: normal;
12
- font-weight: 300 700;
12
+ font-weight: 300 800;
13
13
  font-display: swap;
14
- src: url('../../fonts/presets/inter-300-700-latin.woff2') format('woff2');
14
+ src: url('../../fonts/presets/nunito-300-800-latin.woff2') format('woff2');
15
15
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
16
16
  }
17
17
 
18
18
  @font-face {
19
- font-family: 'Inter';
19
+ font-family: 'Nunito';
20
20
  font-style: normal;
21
- font-weight: 300 700;
21
+ font-weight: 300 800;
22
22
  font-display: swap;
23
- src: url('../../fonts/presets/inter-300-700-latin-ext.woff2') format('woff2');
24
- unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
23
+ src: url('../../fonts/presets/nunito-300-800-latin-ext.woff2') format('woff2');
24
+ unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
25
25
  }
26
26
 
27
27
  @font-face {
28
- font-family: 'Fraunces';
28
+ font-family: 'Fredoka';
29
29
  font-style: normal;
30
30
  font-weight: 300 700;
31
31
  font-display: swap;
32
- src: url('../../fonts/presets/fraunces-300-700-latin.woff2') format('woff2');
32
+ src: url('../../fonts/presets/fredoka-300-700-latin.woff2') format('woff2');
33
33
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
34
34
  }
35
35
 
36
36
  @font-face {
37
- font-family: 'Fraunces';
37
+ font-family: 'Fredoka';
38
38
  font-style: normal;
39
39
  font-weight: 300 700;
40
40
  font-display: swap;
41
- src: url('../../fonts/presets/fraunces-300-700-latin-ext.woff2') format('woff2');
42
- unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
41
+ src: url('../../fonts/presets/fredoka-300-700-latin-ext.woff2') format('woff2');
42
+ unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
43
43
  }
44
44
 
45
45
  html[data-brand="pink"] {
@@ -64,8 +64,29 @@ html[data-brand="pink"] {
64
64
  --color-core-ui-secondary: var(--primitive-red-10);
65
65
  --color-input-border-hover: var(--primitive-red-05);
66
66
  --color-input-border-selected: var(--primitive-red-07);
67
- --font-family-heading: 'Fraunces', serif;
68
- --font-family-primary: 'Inter', sans-serif;
67
+ --font-caption-letter-spacing: 0.005em;
68
+ --font-display-1-letter-spacing: 0.025em;
69
+ --font-display-1-weight: 400;
70
+ --font-display-2-letter-spacing: 0.02em;
71
+ --font-display-2-weight: 400;
72
+ --font-family-heading: 'Fredoka', sans-serif;
73
+ --font-family-primary: 'Nunito', sans-serif;
74
+ --font-heading-1-letter-spacing: 0.02em;
75
+ --font-heading-2-letter-spacing: 0.02em;
76
+ --font-heading-3-letter-spacing: 0.02em;
77
+ --font-mega-1-letter-spacing: 0.025em;
78
+ --font-mega-1-weight: 400;
79
+ --font-mega-2-letter-spacing: 0.025em;
80
+ --font-mega-2-weight: 400;
81
+ --font-overline-letter-spacing: 0.085em;
82
+ --font-paragraph-emphasis-letter-spacing: -0.005em;
83
+ --font-paragraph-letter-spacing: 0.005em;
84
+ --font-paragraph-sm-emphasis-letter-spacing: 0.005em;
85
+ --font-paragraph-sm-letter-spacing: 0.005em;
86
+ --font-sub-display-letter-spacing: 0.02em;
87
+ --font-sub-display-weight: 400;
88
+ --font-title-body-letter-spacing: -0.005em;
89
+ --material-symbols-weight: 400;
69
90
  --motion-duration-base: 180ms;
70
91
  --motion-duration-deliberate: 360ms;
71
92
  --motion-duration-fast: 135ms;
@@ -84,6 +105,16 @@ html[data-brand="pink"] {
84
105
  --primitive-blue-09: #283885;
85
106
  --primitive-blue-10: #161F4A;
86
107
  --primitive-blue-11: #0F1533;
108
+ --primitive-gap-050: 2px;
109
+ --primitive-gap-100: 4px;
110
+ --primitive-gap-1000: 42px;
111
+ --primitive-gap-1500: 63px;
112
+ --primitive-gap-200: 8px;
113
+ --primitive-gap-2000: 84px;
114
+ --primitive-gap-300: 13px;
115
+ --primitive-gap-3000: 126px;
116
+ --primitive-gap-400: 17px;
117
+ --primitive-gap-500: 21px;
87
118
  --primitive-green-00: #F8FEFB;
88
119
  --primitive-green-01: #EFFCF6;
89
120
  --primitive-green-02: #D1F7E5;
@@ -96,14 +127,14 @@ html[data-brand="pink"] {
96
127
  --primitive-green-09: #1A794D;
97
128
  --primitive-green-10: #0F472D;
98
129
  --primitive-green-11: #0C3723;
99
- --primitive-neutral-00: #FCF1F7;
100
- --primitive-neutral-00-a01: rgba(252, 241, 247, 0.01);
101
- --primitive-neutral-00-a60: rgba(252, 241, 247, 0.6);
102
- --primitive-neutral-00-a90: rgba(252, 241, 247, 0.9);
103
- --primitive-neutral-01: #EFE4EA;
104
- --primitive-neutral-01-a01: rgba(239, 228, 234, 0.01);
105
- --primitive-neutral-01-a60: rgba(239, 228, 234, 0.6);
106
- --primitive-neutral-01-a82: rgba(239, 228, 234, 0.82);
130
+ --primitive-neutral-00: #FEF8FB;
131
+ --primitive-neutral-00-a01: rgba(254, 248, 251, 0.01);
132
+ --primitive-neutral-00-a60: rgba(254, 248, 251, 0.6);
133
+ --primitive-neutral-00-a90: rgba(254, 248, 251, 0.9);
134
+ --primitive-neutral-01: #F0EAEE;
135
+ --primitive-neutral-01-a01: rgba(240, 234, 238, 0.01);
136
+ --primitive-neutral-01-a60: rgba(240, 234, 238, 0.6);
137
+ --primitive-neutral-01-a82: rgba(240, 234, 238, 0.82);
107
138
  --primitive-neutral-02: #D6CAD1;
108
139
  --primitive-neutral-02-a80: rgba(214, 202, 209, 0.8);
109
140
  --primitive-neutral-03: #BDB2B8;
@@ -136,6 +167,15 @@ html[data-brand="pink"] {
136
167
  --primitive-orange-09: #8A4221;
137
168
  --primitive-orange-10: #522714;
138
169
  --primitive-orange-11: #3D1D0F;
170
+ --primitive-padding-050: 2px;
171
+ --primitive-padding-100: 4px;
172
+ --primitive-padding-1000: 42px;
173
+ --primitive-padding-150: 6px;
174
+ --primitive-padding-1500: 63px;
175
+ --primitive-padding-200: 8px;
176
+ --primitive-padding-300: 13px;
177
+ --primitive-padding-400: 17px;
178
+ --primitive-padding-500: 21px;
139
179
  --primitive-purple-00: #FDFAFF;
140
180
  --primitive-purple-01: #F9F2FE;
141
181
  --primitive-purple-02: #ECD2FB;
@@ -217,8 +257,29 @@ html[data-brand="pink"][data-theme="dark"] {
217
257
  --color-core-ui-secondary: var(--primitive-red-09);
218
258
  --color-input-border-hover: var(--primitive-red-08);
219
259
  --color-input-border-selected: var(--primitive-red-08);
220
- --font-family-heading: 'Fraunces', serif;
221
- --font-family-primary: 'Inter', sans-serif;
260
+ --font-caption-letter-spacing: 0.005em;
261
+ --font-display-1-letter-spacing: 0.025em;
262
+ --font-display-1-weight: 400;
263
+ --font-display-2-letter-spacing: 0.02em;
264
+ --font-display-2-weight: 400;
265
+ --font-family-heading: 'Fredoka', sans-serif;
266
+ --font-family-primary: 'Nunito', sans-serif;
267
+ --font-heading-1-letter-spacing: 0.02em;
268
+ --font-heading-2-letter-spacing: 0.02em;
269
+ --font-heading-3-letter-spacing: 0.02em;
270
+ --font-mega-1-letter-spacing: 0.025em;
271
+ --font-mega-1-weight: 400;
272
+ --font-mega-2-letter-spacing: 0.025em;
273
+ --font-mega-2-weight: 400;
274
+ --font-overline-letter-spacing: 0.085em;
275
+ --font-paragraph-emphasis-letter-spacing: -0.005em;
276
+ --font-paragraph-letter-spacing: 0.005em;
277
+ --font-paragraph-sm-emphasis-letter-spacing: 0.005em;
278
+ --font-paragraph-sm-letter-spacing: 0.005em;
279
+ --font-sub-display-letter-spacing: 0.02em;
280
+ --font-sub-display-weight: 400;
281
+ --font-title-body-letter-spacing: -0.005em;
282
+ --material-symbols-weight: 400;
222
283
  --motion-duration-base: 180ms;
223
284
  --motion-duration-deliberate: 360ms;
224
285
  --motion-duration-fast: 135ms;
@@ -237,6 +298,16 @@ html[data-brand="pink"][data-theme="dark"] {
237
298
  --primitive-blue-09: #283885;
238
299
  --primitive-blue-10: #161F4A;
239
300
  --primitive-blue-11: #0F1533;
301
+ --primitive-gap-050: 2px;
302
+ --primitive-gap-100: 4px;
303
+ --primitive-gap-1000: 42px;
304
+ --primitive-gap-1500: 63px;
305
+ --primitive-gap-200: 8px;
306
+ --primitive-gap-2000: 84px;
307
+ --primitive-gap-300: 13px;
308
+ --primitive-gap-3000: 126px;
309
+ --primitive-gap-400: 17px;
310
+ --primitive-gap-500: 21px;
240
311
  --primitive-green-00: #F8FEFB;
241
312
  --primitive-green-01: #EFFCF6;
242
313
  --primitive-green-02: #D1F7E5;
@@ -289,6 +360,15 @@ html[data-brand="pink"][data-theme="dark"] {
289
360
  --primitive-orange-09: #8A4221;
290
361
  --primitive-orange-10: #522714;
291
362
  --primitive-orange-11: #3D1D0F;
363
+ --primitive-padding-050: 2px;
364
+ --primitive-padding-100: 4px;
365
+ --primitive-padding-1000: 42px;
366
+ --primitive-padding-150: 6px;
367
+ --primitive-padding-1500: 63px;
368
+ --primitive-padding-200: 8px;
369
+ --primitive-padding-300: 13px;
370
+ --primitive-padding-400: 17px;
371
+ --primitive-padding-500: 21px;
292
372
  --primitive-purple-00: #FDFAFF;
293
373
  --primitive-purple-01: #F9F2FE;
294
374
  --primitive-purple-02: #ECD2FB;
package/tokens/presets/terminal.css CHANGED
@@ -57,7 +57,7 @@
57
57
  font-weight: 300;
58
58
  font-display: swap;
59
59
  src: url('../../fonts/presets/ibm-plex-mono-300-latin-ext.woff2') format('woff2');
60
- unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
60
+ unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
61
61
  }
62
62
 
63
63
  @font-face {
@@ -66,7 +66,7 @@
66
66
  font-weight: 400;
67
67
  font-display: swap;
68
68
  src: url('../../fonts/presets/ibm-plex-mono-400-latin-ext.woff2') format('woff2');
69
- unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
69
+ unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
70
70
  }
71
71
 
72
72
  @font-face {
@@ -75,7 +75,7 @@
75
75
  font-weight: 500;
76
76
  font-display: swap;
77
77
  src: url('../../fonts/presets/ibm-plex-mono-500-latin-ext.woff2') format('woff2');
78
- unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
78
+ unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
79
79
  }
80
80
 
81
81
  @font-face {
@@ -84,7 +84,7 @@
84
84
  font-weight: 600;
85
85
  font-display: swap;
86
86
  src: url('../../fonts/presets/ibm-plex-mono-600-latin-ext.woff2') format('woff2');
87
- unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
87
+ unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
88
88
  }
89
89
 
90
90
  @font-face {
@@ -93,7 +93,7 @@
93
93
  font-weight: 700;
94
94
  font-display: swap;
95
95
  src: url('../../fonts/presets/ibm-plex-mono-700-latin-ext.woff2') format('woff2');
96
- unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
96
+ unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
97
97
  }
98
98
 
99
99
  html[data-brand="terminal"] {
@@ -137,14 +137,14 @@ html[data-brand="terminal"] {
137
137
  --primitive-blue-09: #162F55;
138
138
  --primitive-blue-10: #0C1A2F;
139
139
  --primitive-blue-11: #091221;
140
- --primitive-neutral-00: #F5FDFB;
141
- --primitive-neutral-00-a01: rgba(245, 253, 251, 0.01);
142
- --primitive-neutral-00-a60: rgba(245, 253, 251, 0.6);
143
- --primitive-neutral-00-a90: rgba(245, 253, 251, 0.9);
144
- --primitive-neutral-01: #E8F0EE;
145
- --primitive-neutral-01-a01: rgba(232, 240, 238, 0.01);
146
- --primitive-neutral-01-a60: rgba(232, 240, 238, 0.6);
147
- --primitive-neutral-01-a82: rgba(232, 240, 238, 0.82);
140
+ --primitive-neutral-00: #FAFEFD;
141
+ --primitive-neutral-00-a01: rgba(250, 254, 253, 0.01);
142
+ --primitive-neutral-00-a60: rgba(250, 254, 253, 0.6);
143
+ --primitive-neutral-00-a90: rgba(250, 254, 253, 0.9);
144
+ --primitive-neutral-01: #ECF0EF;
145
+ --primitive-neutral-01-a01: rgba(236, 240, 239, 0.01);
146
+ --primitive-neutral-01-a60: rgba(236, 240, 239, 0.6);
147
+ --primitive-neutral-01-a82: rgba(236, 240, 239, 0.82);
148
148
  --primitive-neutral-02: #CED6D4;
149
149
  --primitive-neutral-02-a80: rgba(206, 214, 212, 0.8);
150
150
  --primitive-neutral-03: #B5BDBB;