rift-ds 1.2.0 → 1.4.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 (68) hide show
  1. package/README.md +2 -2
  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/Chart/BarChart.js +1 -1
  18. package/components/Chart/ComboChart.js +1 -1
  19. package/components/Chart/Treemap.js +83 -6
  20. package/components/ChatMessage/ChatMessage.css +24 -0
  21. package/components/ChatMessage/ChatMessage.d.ts +6 -0
  22. package/components/ChatMessage/ChatMessage.js +8 -5
  23. package/components/ColorPicker/ColorPicker.js +1 -1
  24. package/components/Composer/Composer.css +140 -5
  25. package/components/Composer/Composer.d.ts +71 -14
  26. package/components/Composer/Composer.js +204 -11
  27. package/components/DatePicker/DatePicker.css +1 -1
  28. package/components/DocumentChip/DocumentChip.d.ts +7 -5
  29. package/components/EventCalendar/EventCalendar.css +2 -2
  30. package/components/FileInput/FileInput.css +1 -1
  31. package/components/FileInput/FileInput.js +1 -7
  32. package/components/Globe/Globe.d.ts +5 -3
  33. package/components/Globe/Globe.js +18 -2
  34. package/components/Inspector/Inspector.css +108 -3
  35. package/components/Inspector/InspectorColorPicker.d.ts +43 -0
  36. package/components/Inspector/InspectorColorPicker.js +51 -0
  37. package/components/Instructions/Instructions.css +4 -4
  38. package/components/MessageCard/MessageCard.d.ts +1 -1
  39. package/components/Prose/Prose.css +27 -0
  40. package/components/Sparkline/Sparkline.css +2 -2
  41. package/components/Spinner/Spinner.css +1 -1
  42. package/components/Timeline/Timeline.css +1 -1
  43. package/components/WorldMap/land.d.ts +1 -1
  44. package/components/registry.json +48 -3
  45. package/components/registry.json.d.ts +48 -3
  46. package/components/registry.json.js +1 -1
  47. package/index.d.ts +5 -0
  48. package/index.js +21 -0
  49. package/package.json +9 -1
  50. package/tokens/motion.d.ts +2 -0
  51. package/tokens/motion.js +2 -0
  52. package/tokens/presets/contrast.css +2 -4
  53. package/tokens/presets/coral.css +2 -4
  54. package/tokens/presets/forest.css +2 -4
  55. package/tokens/presets/gold.css +4 -4
  56. package/tokens/presets/mono.css +0 -2
  57. package/tokens/presets/pink.css +4 -4
  58. package/tokens/presets/terminal.css +5 -4
  59. package/tokens/presets/violet.css +2 -4
  60. package/tokens/presets/warm.css +3 -4
  61. package/tokens/presets/zest.css +2 -4
  62. package/tokens/registry.json +5 -0
  63. package/tokens/registry.json.d.ts +5 -0
  64. package/tokens/registry.json.js +1 -1
  65. package/tokens/tokens-dark.css +14 -5
  66. package/tokens/tokens-light.css +16 -2
  67. package/tokens/tokens-motion.css +2 -0
  68. package/tokens/tokens-primitives.css +10 -0
package/tokens/presets/gold.css CHANGED
@@ -25,7 +25,6 @@
25
25
  }
26
26
 
27
27
  html[data-brand="gold"] {
28
- --color-action-icon-active: var(--primitive-yellow-11);
29
28
  --color-action-primary-bg: var(--primitive-neutral-08);
30
29
  --color-action-primary-bg-active: var(--primitive-neutral-10);
31
30
  --color-action-primary-bg-hover: var(--primitive-neutral-09);
@@ -51,6 +50,7 @@ html[data-brand="gold"] {
51
50
  --motion-duration-base: 180ms;
52
51
  --motion-duration-deliberate: 360ms;
53
52
  --motion-duration-fast: 135ms;
53
+ --motion-duration-orbit: 108000ms;
54
54
  --motion-duration-slow: 270ms;
55
55
  --motion-duration-slower: 540ms;
56
56
  --primitive-blue-00: #FAFBFE;
@@ -164,10 +164,9 @@ html[data-brand="gold"] {
164
164
  }
165
165
 
166
166
  html[data-brand="gold"][data-theme="dark"] {
167
- --color-action-icon-active: var(--primitive-yellow-11);
168
167
  --color-action-primary-bg: var(--primitive-yellow-07);
169
- --color-action-primary-bg-active: var(--primitive-yellow-09);
170
- --color-action-primary-bg-hover: var(--primitive-yellow-08);
168
+ --color-action-primary-bg-active: var(--primitive-yellow-03);
169
+ --color-action-primary-bg-hover: var(--primitive-yellow-04);
171
170
  --color-action-primary-border: var(--primitive-yellow-07);
172
171
  --color-action-primary-border-secondary: var(--primitive-yellow-08);
173
172
  --color-action-primary-border-tertiary: var(--primitive-yellow-07);
@@ -190,6 +189,7 @@ html[data-brand="gold"][data-theme="dark"] {
190
189
  --motion-duration-base: 180ms;
191
190
  --motion-duration-deliberate: 360ms;
192
191
  --motion-duration-fast: 135ms;
192
+ --motion-duration-orbit: 108000ms;
193
193
  --motion-duration-slow: 270ms;
194
194
  --motion-duration-slower: 540ms;
195
195
  --primitive-blue-00: #FAFBFE;
package/tokens/presets/mono.css CHANGED
@@ -43,7 +43,6 @@
43
43
  }
44
44
 
45
45
  html[data-brand="mono"] {
46
- --color-action-icon-active: var(--primitive-neutral-02);
47
46
  --color-action-primary-bg: var(--primitive-neutral-08);
48
47
  --color-action-primary-bg-active: var(--primitive-neutral-10);
49
48
  --color-action-primary-bg-hover: var(--primitive-neutral-09);
@@ -164,7 +163,6 @@ html[data-brand="mono"] {
164
163
  }
165
164
 
166
165
  html[data-brand="mono"][data-theme="dark"] {
167
- --color-action-icon-active: var(--primitive-neutral-07);
168
166
  --color-action-primary-bg: var(--primitive-neutral-01);
169
167
  --color-action-primary-bg-active: var(--primitive-neutral-03);
170
168
  --color-action-primary-bg-hover: var(--primitive-neutral-02);
package/tokens/presets/pink.css CHANGED
@@ -43,7 +43,6 @@
43
43
  }
44
44
 
45
45
  html[data-brand="pink"] {
46
- --color-action-icon-active: var(--primitive-red-02);
47
46
  --color-action-primary-bg: var(--primitive-red-07);
48
47
  --color-action-primary-bg-active: var(--primitive-red-09);
49
48
  --color-action-primary-bg-hover: var(--primitive-red-08);
@@ -70,6 +69,7 @@ html[data-brand="pink"] {
70
69
  --motion-duration-base: 180ms;
71
70
  --motion-duration-deliberate: 360ms;
72
71
  --motion-duration-fast: 135ms;
72
+ --motion-duration-orbit: 108000ms;
73
73
  --motion-duration-slow: 270ms;
74
74
  --motion-duration-slower: 540ms;
75
75
  --primitive-blue-00: #FBFCFF;
@@ -196,10 +196,9 @@ html[data-brand="pink"] {
196
196
  }
197
197
 
198
198
  html[data-brand="pink"][data-theme="dark"] {
199
- --color-action-icon-active: var(--primitive-red-02);
200
199
  --color-action-primary-bg: var(--primitive-red-07);
201
- --color-action-primary-bg-active: var(--primitive-red-05);
202
- --color-action-primary-bg-hover: var(--primitive-red-06);
200
+ --color-action-primary-bg-active: var(--primitive-red-09);
201
+ --color-action-primary-bg-hover: var(--primitive-red-08);
203
202
  --color-action-primary-border: var(--primitive-red-07);
204
203
  --color-action-primary-border-secondary: var(--primitive-red-08);
205
204
  --color-action-primary-border-tertiary: var(--primitive-red-07);
@@ -223,6 +222,7 @@ html[data-brand="pink"][data-theme="dark"] {
223
222
  --motion-duration-base: 180ms;
224
223
  --motion-duration-deliberate: 360ms;
225
224
  --motion-duration-fast: 135ms;
225
+ --motion-duration-orbit: 108000ms;
226
226
  --motion-duration-slow: 270ms;
227
227
  --motion-duration-slower: 540ms;
228
228
  --primitive-blue-00: #FBFCFF;
package/tokens/presets/terminal.css CHANGED
@@ -97,14 +97,14 @@
97
97
  }
98
98
 
99
99
  html[data-brand="terminal"] {
100
- --color-action-icon-active: var(--primitive-green-11);
101
100
  --color-action-primary-bg: var(--primitive-green-07);
102
- --color-action-primary-bg-active: var(--primitive-green-09);
103
- --color-action-primary-bg-hover: var(--primitive-green-08);
101
+ --color-action-primary-bg-active: var(--primitive-green-05);
102
+ --color-action-primary-bg-hover: var(--primitive-green-06);
104
103
  --color-action-primary-border: var(--primitive-green-10);
105
104
  --color-action-primary-border-secondary: var(--primitive-green-07);
106
105
  --color-action-primary-border-tertiary: var(--primitive-green-07);
107
106
  --color-action-primary-text: var(--primitive-green-11);
107
+ --color-action-primary-text-active: var(--primitive-green-11);
108
108
  --color-action-primary-text-secondary: var(--primitive-green-10);
109
109
  --color-action-primary-text-tertiary: var(--primitive-green-08);
110
110
  --color-ai-gradient-end: var(--primitive-green-07);
@@ -122,6 +122,7 @@ html[data-brand="terminal"] {
122
122
  --motion-duration-base: 160ms;
123
123
  --motion-duration-deliberate: 320ms;
124
124
  --motion-duration-fast: 120ms;
125
+ --motion-duration-orbit: 96000ms;
125
126
  --motion-duration-slow: 240ms;
126
127
  --motion-duration-slower: 480ms;
127
128
  --primitive-blue-00: #FAFBFD;
@@ -237,7 +238,6 @@ html[data-brand="terminal"] {
237
238
  }
238
239
 
239
240
  html[data-brand="terminal"][data-theme="dark"] {
240
- --color-action-icon-active: var(--primitive-green-11);
241
241
  --color-action-primary-bg: var(--primitive-green-07);
242
242
  --color-action-primary-bg-active: var(--primitive-green-05);
243
243
  --color-action-primary-bg-hover: var(--primitive-green-06);
@@ -263,6 +263,7 @@ html[data-brand="terminal"][data-theme="dark"] {
263
263
  --motion-duration-base: 160ms;
264
264
  --motion-duration-deliberate: 320ms;
265
265
  --motion-duration-fast: 120ms;
266
+ --motion-duration-orbit: 96000ms;
266
267
  --motion-duration-slow: 240ms;
267
268
  --motion-duration-slower: 480ms;
268
269
  --primitive-blue-00: #FAFBFD;
package/tokens/presets/violet.css CHANGED
@@ -43,7 +43,6 @@
43
43
  }
44
44
 
45
45
  html[data-brand="violet"] {
46
- --color-action-icon-active: var(--primitive-purple-02);
47
46
  --color-action-primary-bg: var(--primitive-purple-08);
48
47
  --color-action-primary-bg-active: var(--primitive-purple-10);
49
48
  --color-action-primary-bg-hover: var(--primitive-purple-09);
@@ -178,10 +177,9 @@ html[data-brand="violet"] {
178
177
  }
179
178
 
180
179
  html[data-brand="violet"][data-theme="dark"] {
181
- --color-action-icon-active: var(--primitive-purple-02);
182
180
  --color-action-primary-bg: var(--primitive-purple-08);
183
- --color-action-primary-bg-active: var(--primitive-purple-06);
184
- --color-action-primary-bg-hover: var(--primitive-purple-07);
181
+ --color-action-primary-bg-active: var(--primitive-purple-10);
182
+ --color-action-primary-bg-hover: var(--primitive-purple-09);
185
183
  --color-action-primary-border: var(--primitive-purple-08);
186
184
  --color-action-primary-border-secondary: var(--primitive-purple-09);
187
185
  --color-action-primary-border-tertiary: var(--primitive-purple-08);
package/tokens/presets/warm.css CHANGED
@@ -43,14 +43,14 @@
43
43
  }
44
44
 
45
45
  html[data-brand="warm"] {
46
- --color-action-icon-active: var(--primitive-orange-11);
47
46
  --color-action-primary-bg: var(--primitive-orange-07);
48
- --color-action-primary-bg-active: var(--primitive-orange-09);
49
- --color-action-primary-bg-hover: var(--primitive-orange-08);
47
+ --color-action-primary-bg-active: var(--primitive-orange-05);
48
+ --color-action-primary-bg-hover: var(--primitive-orange-06);
50
49
  --color-action-primary-border: var(--primitive-orange-10);
51
50
  --color-action-primary-border-secondary: var(--primitive-orange-07);
52
51
  --color-action-primary-border-tertiary: var(--primitive-orange-07);
53
52
  --color-action-primary-text: var(--primitive-orange-11);
53
+ --color-action-primary-text-active: var(--primitive-orange-11);
54
54
  --color-action-primary-text-secondary: var(--primitive-orange-10);
55
55
  --color-action-primary-text-tertiary: var(--primitive-orange-08);
56
56
  --color-ai-gradient-end: var(--primitive-orange-07);
@@ -181,7 +181,6 @@ html[data-brand="warm"] {
181
181
  }
182
182
 
183
183
  html[data-brand="warm"][data-theme="dark"] {
184
- --color-action-icon-active: var(--primitive-orange-11);
185
184
  --color-action-primary-bg: var(--primitive-orange-07);
186
185
  --color-action-primary-bg-active: var(--primitive-orange-05);
187
186
  --color-action-primary-bg-hover: var(--primitive-orange-06);
package/tokens/presets/zest.css CHANGED
@@ -43,10 +43,9 @@
43
43
  }
44
44
 
45
45
  html[data-brand="zest"] {
46
- --color-action-icon-active: var(--primitive-green-11);
47
46
  --color-action-primary-bg: var(--primitive-green-07);
48
- --color-action-primary-bg-active: var(--primitive-green-09);
49
- --color-action-primary-bg-hover: var(--primitive-green-08);
47
+ --color-action-primary-bg-active: var(--primitive-green-05);
48
+ --color-action-primary-bg-hover: var(--primitive-green-06);
50
49
  --color-action-primary-border: var(--primitive-green-10);
51
50
  --color-action-primary-border-secondary: var(--primitive-green-07);
52
51
  --color-action-primary-border-tertiary: var(--primitive-green-07);
@@ -201,7 +200,6 @@ html[data-brand="zest"] {
201
200
  }
202
201
 
203
202
  html[data-brand="zest"][data-theme="dark"] {
204
- --color-action-icon-active: var(--primitive-green-11);
205
203
  --color-action-primary-bg: var(--primitive-green-07);
206
204
  --color-action-primary-bg-active: var(--primitive-green-05);
207
205
  --color-action-primary-bg-hover: var(--primitive-green-06);
package/tokens/registry.json CHANGED
@@ -68,6 +68,10 @@
68
68
  "--color-core-ui-primary",
69
69
  "--color-core-ui-secondary",
70
70
  "--color-divider",
71
+ "--color-file-document",
72
+ "--color-file-pdf",
73
+ "--color-file-presentation",
74
+ "--color-file-spreadsheet",
71
75
  "--color-icon-primary",
72
76
  "--color-icon-secondary",
73
77
  "--color-input-bg-disabled",
@@ -264,6 +268,7 @@
264
268
  "--motion-duration-loop-matrix",
265
269
  "--motion-duration-loop-shimmer",
266
270
  "--motion-duration-loop-spin",
271
+ "--motion-duration-orbit",
267
272
  "--motion-duration-slow",
268
273
  "--motion-duration-slower",
269
274
  "--motion-ease-emphasized",
package/tokens/registry.json.d.ts CHANGED
@@ -68,6 +68,10 @@ declare const _default: {
68
68
  "--color-core-ui-primary",
69
69
  "--color-core-ui-secondary",
70
70
  "--color-divider",
71
+ "--color-file-document",
72
+ "--color-file-pdf",
73
+ "--color-file-presentation",
74
+ "--color-file-spreadsheet",
71
75
  "--color-icon-primary",
72
76
  "--color-icon-secondary",
73
77
  "--color-input-bg-disabled",
@@ -264,6 +268,7 @@ declare const _default: {
264
268
  "--motion-duration-loop-matrix",
265
269
  "--motion-duration-loop-shimmer",
266
270
  "--motion-duration-loop-spin",
271
+ "--motion-duration-orbit",
267
272
  "--motion-duration-slow",
268
273
  "--motion-duration-slower",
269
274
  "--motion-ease-emphasized",
package/tokens/registry.json.js CHANGED
@@ -1,4 +1,4 @@
1
- const categories = { "colour": ["--color-action-icon-active", "--color-action-icon-default", "--color-action-neutral-bg", "--color-action-neutral-bg-active", "--color-action-neutral-bg-hover", "--color-action-neutral-text", "--color-action-passive-bg", "--color-action-passive-bg-active", "--color-action-passive-bg-hover", "--color-action-passive-text", "--color-action-primary-bg", "--color-action-primary-bg-active", "--color-action-primary-bg-hover", "--color-action-primary-border", "--color-action-primary-border-secondary", "--color-action-primary-border-tertiary", "--color-action-primary-text", "--color-action-primary-text-active", "--color-action-primary-text-secondary", "--color-action-primary-text-tertiary", "--color-ai-button-bg", "--color-ai-gradient-end", "--color-ai-gradient-mid", "--color-ai-gradient-start", "--color-bg-container-border", "--color-bg-container-inverse", "--color-bg-container-primary", "--color-bg-container-primary-semi", "--color-bg-container-primary-transparent", "--color-bg-container-secondary", "--color-bg-container-tertiary", "--color-bg-glass", "--color-bg-page-inverse", "--color-bg-page-primary", "--color-calendar-cell-bg", "--color-calendar-cell-bg-hover", "--color-calendar-event-bg", "--color-calendar-event-bg-hover", "--color-calendar-event-border", "--color-chart-contribution-0", "--color-chart-contribution-1", "--color-chart-contribution-2", "--color-chart-contribution-3", "--color-chart-contribution-4", "--color-chart-series-1", "--color-chart-series-2", "--color-chart-series-3", "--color-chart-series-4", "--color-chart-series-5", "--color-chart-series-6", "--color-chart-series-7", "--color-chat-bubble-received-bg", "--color-chat-bubble-received-text", "--color-chat-bubble-sent-bg", "--color-chat-bubble-sent-text", "--color-chat-context-bg", "--color-control-thumb", "--color-core-accent-amber", "--color-core-accent-cobalt", "--color-core-accent-coral", "--color-core-accent-gold", "--color-core-accent-mint", "--color-core-accent-violet", "--color-core-ui-primary", "--color-core-ui-secondary", "--color-divider", "--color-icon-primary", "--color-icon-secondary", "--color-input-bg-disabled", "--color-input-bg-primary", "--color-input-border-disabled", "--color-input-border-hover", "--color-input-border-primary", "--color-input-border-selected", "--color-input-text-disabled", "--color-input-text-inverse", "--color-input-text-placeholder", "--color-input-text-primary", "--color-scrim", "--color-status-error-bg", "--color-status-error-border", "--color-status-error-icon", "--color-status-error-text", "--color-status-info-bg", "--color-status-info-border", "--color-status-info-icon", "--color-status-info-text", "--color-status-neutral-bg", "--color-status-neutral-border", "--color-status-neutral-icon", "--color-status-neutral-text", "--color-status-positive-bg", "--color-status-positive-border", "--color-status-positive-icon", "--color-status-positive-text", "--color-status-warning-bg", "--color-status-warning-border", "--color-status-warning-icon", "--color-status-warning-text", "--color-text-inverse", "--color-text-on-inverse", "--color-text-primary", "--color-text-secondary", "--color-text-tertiary", "--color-trend-down", "--color-trend-up"], "typography": ["--font-caption-family", "--font-caption-letter-spacing", "--font-caption-line-height", "--font-caption-size", "--font-caption-weight", "--font-display-1-family", "--font-display-1-letter-spacing", "--font-display-1-line-height", "--font-display-1-size", "--font-display-1-weight", "--font-display-2-family", "--font-display-2-letter-spacing", "--font-display-2-line-height", "--font-display-2-size", "--font-display-2-weight", "--font-family-body", "--font-family-code", "--font-family-heading", "--font-family-primary", "--font-heading-1-family", "--font-heading-1-letter-spacing", "--font-heading-1-line-height", "--font-heading-1-size", "--font-heading-1-weight", "--font-heading-2-family", "--font-heading-2-letter-spacing", "--font-heading-2-line-height", "--font-heading-2-size", "--font-heading-2-weight", "--font-heading-3-family", "--font-heading-3-letter-spacing", "--font-heading-3-line-height", "--font-heading-3-size", "--font-heading-3-weight", "--font-line-height-1100", "--font-line-height-400", "--font-line-height-500", "--font-line-height-600", "--font-line-height-700", "--font-line-height-800", "--font-line-height-900", "--font-mega-1-family", "--font-mega-1-letter-spacing", "--font-mega-1-line-height", "--font-mega-1-size", "--font-mega-1-weight", "--font-mega-2-family", "--font-mega-2-letter-spacing", "--font-mega-2-line-height", "--font-mega-2-size", "--font-mega-2-weight", "--font-overline-family", "--font-overline-letter-spacing", "--font-overline-line-height", "--font-overline-size", "--font-overline-weight", "--font-paragraph-emphasis-family", "--font-paragraph-emphasis-letter-spacing", "--font-paragraph-emphasis-line-height", "--font-paragraph-emphasis-size", "--font-paragraph-emphasis-weight", "--font-paragraph-family", "--font-paragraph-letter-spacing", "--font-paragraph-line-height", "--font-paragraph-size", "--font-paragraph-sm-emphasis-family", "--font-paragraph-sm-emphasis-letter-spacing", "--font-paragraph-sm-emphasis-line-height", "--font-paragraph-sm-emphasis-size", "--font-paragraph-sm-emphasis-weight", "--font-paragraph-sm-family", "--font-paragraph-sm-letter-spacing", "--font-paragraph-sm-line-height", "--font-paragraph-sm-size", "--font-paragraph-sm-weight", "--font-paragraph-weight", "--font-size-1000", "--font-size-1200", "--font-size-1400", "--font-size-1600", "--font-size-2400", "--font-size-2900", "--font-size-300", "--font-size-3300", "--font-size-350", "--font-size-400", "--font-size-550", "--font-size-600", "--font-size-650", "--font-size-750", "--font-sub-display-family", "--font-sub-display-letter-spacing", "--font-sub-display-line-height", "--font-sub-display-size", "--font-sub-display-weight", "--font-title-body-family", "--font-title-body-letter-spacing", "--font-title-body-line-height", "--font-title-body-size", "--font-title-body-weight"], "spacing": ["--gap-050", "--gap-100", "--gap-1000", "--gap-1500", "--gap-200", "--gap-2000", "--gap-300", "--gap-3000", "--gap-400", "--gap-500", "--padding-050", "--padding-100", "--padding-1000", "--padding-150", "--padding-1500", "--padding-200", "--padding-300", "--padding-400", "--padding-500"], "radius": ["--radius-050", "--radius-100", "--radius-1200", "--radius-200", "--radius-300", "--radius-400", "--radius-600", "--radius-pill"], "border": ["--border-025", "--border-050"], "shadow": ["--shadow-floating", "--shadow-modal"], "icons": ["--icon-size-1200", "--icon-size-500", "--icon-size-600", "--icon-size-800"], "motion": ["--motion-duration-base", "--motion-duration-deliberate", "--motion-duration-fast", "--motion-duration-instant", "--motion-duration-loop-matrix", "--motion-duration-loop-shimmer", "--motion-duration-loop-spin", "--motion-duration-slow", "--motion-duration-slower", "--motion-ease-emphasized", "--motion-ease-entrance", "--motion-ease-linear", "--motion-ease-spring", "--motion-ease-standard"] };
1
+ const categories = { "colour": ["--color-action-icon-active", "--color-action-icon-default", "--color-action-neutral-bg", "--color-action-neutral-bg-active", "--color-action-neutral-bg-hover", "--color-action-neutral-text", "--color-action-passive-bg", "--color-action-passive-bg-active", "--color-action-passive-bg-hover", "--color-action-passive-text", "--color-action-primary-bg", "--color-action-primary-bg-active", "--color-action-primary-bg-hover", "--color-action-primary-border", "--color-action-primary-border-secondary", "--color-action-primary-border-tertiary", "--color-action-primary-text", "--color-action-primary-text-active", "--color-action-primary-text-secondary", "--color-action-primary-text-tertiary", "--color-ai-button-bg", "--color-ai-gradient-end", "--color-ai-gradient-mid", "--color-ai-gradient-start", "--color-bg-container-border", "--color-bg-container-inverse", "--color-bg-container-primary", "--color-bg-container-primary-semi", "--color-bg-container-primary-transparent", "--color-bg-container-secondary", "--color-bg-container-tertiary", "--color-bg-glass", "--color-bg-page-inverse", "--color-bg-page-primary", "--color-calendar-cell-bg", "--color-calendar-cell-bg-hover", "--color-calendar-event-bg", "--color-calendar-event-bg-hover", "--color-calendar-event-border", "--color-chart-contribution-0", "--color-chart-contribution-1", "--color-chart-contribution-2", "--color-chart-contribution-3", "--color-chart-contribution-4", "--color-chart-series-1", "--color-chart-series-2", "--color-chart-series-3", "--color-chart-series-4", "--color-chart-series-5", "--color-chart-series-6", "--color-chart-series-7", "--color-chat-bubble-received-bg", "--color-chat-bubble-received-text", "--color-chat-bubble-sent-bg", "--color-chat-bubble-sent-text", "--color-chat-context-bg", "--color-control-thumb", "--color-core-accent-amber", "--color-core-accent-cobalt", "--color-core-accent-coral", "--color-core-accent-gold", "--color-core-accent-mint", "--color-core-accent-violet", "--color-core-ui-primary", "--color-core-ui-secondary", "--color-divider", "--color-file-document", "--color-file-pdf", "--color-file-presentation", "--color-file-spreadsheet", "--color-icon-primary", "--color-icon-secondary", "--color-input-bg-disabled", "--color-input-bg-primary", "--color-input-border-disabled", "--color-input-border-hover", "--color-input-border-primary", "--color-input-border-selected", "--color-input-text-disabled", "--color-input-text-inverse", "--color-input-text-placeholder", "--color-input-text-primary", "--color-scrim", "--color-status-error-bg", "--color-status-error-border", "--color-status-error-icon", "--color-status-error-text", "--color-status-info-bg", "--color-status-info-border", "--color-status-info-icon", "--color-status-info-text", "--color-status-neutral-bg", "--color-status-neutral-border", "--color-status-neutral-icon", "--color-status-neutral-text", "--color-status-positive-bg", "--color-status-positive-border", "--color-status-positive-icon", "--color-status-positive-text", "--color-status-warning-bg", "--color-status-warning-border", "--color-status-warning-icon", "--color-status-warning-text", "--color-text-inverse", "--color-text-on-inverse", "--color-text-primary", "--color-text-secondary", "--color-text-tertiary", "--color-trend-down", "--color-trend-up"], "typography": ["--font-caption-family", "--font-caption-letter-spacing", "--font-caption-line-height", "--font-caption-size", "--font-caption-weight", "--font-display-1-family", "--font-display-1-letter-spacing", "--font-display-1-line-height", "--font-display-1-size", "--font-display-1-weight", "--font-display-2-family", "--font-display-2-letter-spacing", "--font-display-2-line-height", "--font-display-2-size", "--font-display-2-weight", "--font-family-body", "--font-family-code", "--font-family-heading", "--font-family-primary", "--font-heading-1-family", "--font-heading-1-letter-spacing", "--font-heading-1-line-height", "--font-heading-1-size", "--font-heading-1-weight", "--font-heading-2-family", "--font-heading-2-letter-spacing", "--font-heading-2-line-height", "--font-heading-2-size", "--font-heading-2-weight", "--font-heading-3-family", "--font-heading-3-letter-spacing", "--font-heading-3-line-height", "--font-heading-3-size", "--font-heading-3-weight", "--font-line-height-1100", "--font-line-height-400", "--font-line-height-500", "--font-line-height-600", "--font-line-height-700", "--font-line-height-800", "--font-line-height-900", "--font-mega-1-family", "--font-mega-1-letter-spacing", "--font-mega-1-line-height", "--font-mega-1-size", "--font-mega-1-weight", "--font-mega-2-family", "--font-mega-2-letter-spacing", "--font-mega-2-line-height", "--font-mega-2-size", "--font-mega-2-weight", "--font-overline-family", "--font-overline-letter-spacing", "--font-overline-line-height", "--font-overline-size", "--font-overline-weight", "--font-paragraph-emphasis-family", "--font-paragraph-emphasis-letter-spacing", "--font-paragraph-emphasis-line-height", "--font-paragraph-emphasis-size", "--font-paragraph-emphasis-weight", "--font-paragraph-family", "--font-paragraph-letter-spacing", "--font-paragraph-line-height", "--font-paragraph-size", "--font-paragraph-sm-emphasis-family", "--font-paragraph-sm-emphasis-letter-spacing", "--font-paragraph-sm-emphasis-line-height", "--font-paragraph-sm-emphasis-size", "--font-paragraph-sm-emphasis-weight", "--font-paragraph-sm-family", "--font-paragraph-sm-letter-spacing", "--font-paragraph-sm-line-height", "--font-paragraph-sm-size", "--font-paragraph-sm-weight", "--font-paragraph-weight", "--font-size-1000", "--font-size-1200", "--font-size-1400", "--font-size-1600", "--font-size-2400", "--font-size-2900", "--font-size-300", "--font-size-3300", "--font-size-350", "--font-size-400", "--font-size-550", "--font-size-600", "--font-size-650", "--font-size-750", "--font-sub-display-family", "--font-sub-display-letter-spacing", "--font-sub-display-line-height", "--font-sub-display-size", "--font-sub-display-weight", "--font-title-body-family", "--font-title-body-letter-spacing", "--font-title-body-line-height", "--font-title-body-size", "--font-title-body-weight"], "spacing": ["--gap-050", "--gap-100", "--gap-1000", "--gap-1500", "--gap-200", "--gap-2000", "--gap-300", "--gap-3000", "--gap-400", "--gap-500", "--padding-050", "--padding-100", "--padding-1000", "--padding-150", "--padding-1500", "--padding-200", "--padding-300", "--padding-400", "--padding-500"], "radius": ["--radius-050", "--radius-100", "--radius-1200", "--radius-200", "--radius-300", "--radius-400", "--radius-600", "--radius-pill"], "border": ["--border-025", "--border-050"], "shadow": ["--shadow-floating", "--shadow-modal"], "icons": ["--icon-size-1200", "--icon-size-500", "--icon-size-600", "--icon-size-800"], "motion": ["--motion-duration-base", "--motion-duration-deliberate", "--motion-duration-fast", "--motion-duration-instant", "--motion-duration-loop-matrix", "--motion-duration-loop-shimmer", "--motion-duration-loop-spin", "--motion-duration-orbit", "--motion-duration-slow", "--motion-duration-slower", "--motion-ease-emphasized", "--motion-ease-entrance", "--motion-ease-linear", "--motion-ease-spring", "--motion-ease-standard"] };
2
2
  const registry = {
3
3
  categories
4
4
  };
package/tokens/tokens-dark.css CHANGED
@@ -79,10 +79,10 @@
79
79
  --color-action-primary-border-secondary: var(--primitive-teal-06);
80
80
  --color-action-primary-border-tertiary: var(--primitive-teal-04);
81
81
 
82
- /* Action - Icon. The active icon sits on the hover/active fills, which
83
- are the light half of the ramp here — so it inverts with the label. */
82
+ /* Action - Icon. The active icon follows the active label (see
83
+ tokens-light.css), which inverts with the fill here. */
84
84
  --color-action-icon-default: var(--primitive-neutral-01);
85
- --color-action-icon-active: var(--primitive-teal-10);
85
+ --color-action-icon-active: var(--color-action-primary-text-active);
86
86
 
87
87
  /* Action - Passive (Secondary button) */
88
88
  --color-action-passive-text: var(--primitive-neutral-01);
@@ -92,11 +92,14 @@
92
92
 
93
93
  /* Action - Neutral (grey filled buttons). The fill stays visible at
94
94
  rest, one step above the container greys; hover and active brighten
95
- toward the page's opposite, like the primary family. */
95
+ toward the page's opposite, like the primary family. The label is
96
+ the ramp's white end, not neutral-01: the pressed fill (neutral-06)
97
+ leaves neutral-01 only 4.58:1, and the tint lever pulls the near-white
98
+ down further, which sank every tinted preset below AA. */
96
99
  --color-action-neutral-bg: var(--primitive-neutral-08);
97
100
  --color-action-neutral-bg-hover: var(--primitive-neutral-07);
98
101
  --color-action-neutral-bg-active: var(--primitive-neutral-06);
99
- --color-action-neutral-text: var(--primitive-neutral-01);
102
+ --color-action-neutral-text: var(--primitive-neutral-00);
100
103
 
101
104
  /* Status - Positive */
102
105
  --color-status-positive-bg: var(--primitive-green-10);
@@ -183,4 +186,10 @@
183
186
  --color-core-accent-mint: var(--primitive-green-07);
184
187
  --color-trend-up: var(--primitive-green-07);
185
188
  --color-trend-down: var(--primitive-red-07);
189
+
190
+ /* File type: the same fixed format colours as light mode */
191
+ --color-file-pdf: var(--primitive-file-pdf);
192
+ --color-file-spreadsheet: var(--primitive-file-spreadsheet);
193
+ --color-file-document: var(--primitive-file-document);
194
+ --color-file-presentation: var(--primitive-file-presentation);
186
195
  }
package/tokens/tokens-light.css CHANGED
@@ -97,9 +97,11 @@
97
97
  --color-action-primary-border-secondary: var(--primitive-teal-08);
98
98
  --color-action-primary-border-tertiary: var(--primitive-teal-08);
99
99
 
100
- /* Action - Icon */
100
+ /* Action - Icon. The active icon sits on the same hover/active fills as
101
+ the active label, so it IS the active label: a theme that repaints
102
+ those fills repairs labels and icons in one declaration. */
101
103
  --color-action-icon-default: var(--primitive-neutral-10);
102
- --color-action-icon-active: var(--primitive-teal-02);
104
+ --color-action-icon-active: var(--color-action-primary-text-active);
103
105
 
104
106
  /* Action - Passive (Secondary button) */
105
107
  --color-action-passive-text: var(--primitive-neutral-10);
@@ -132,6 +134,18 @@
132
134
  --color-trend-up: var(--primitive-green-10);
133
135
  --color-trend-down: var(--primitive-red-10);
134
136
 
137
+ /* File type: "what kind of document is this" on an attachment's type
138
+ mark. One role per well-known format; every other file wears the
139
+ neutral extension badge. Wired to the fixed file-format primitives,
140
+ not to a ramp or the accents: the colour is how a person recognises
141
+ the format, so it is the same in every theme and both modes. The
142
+ mark's lettering is drawn in a text colour, never in these, so
143
+ nothing has to be read against them. */
144
+ --color-file-pdf: var(--primitive-file-pdf);
145
+ --color-file-spreadsheet: var(--primitive-file-spreadsheet);
146
+ --color-file-document: var(--primitive-file-document);
147
+ --color-file-presentation: var(--primitive-file-presentation);
148
+
135
149
  /* Status - Positive */
136
150
  --color-status-positive-bg: var(--primitive-green-01);
137
151
  --color-status-positive-border: var(--primitive-green-07);
package/tokens/tokens-motion.css CHANGED
@@ -26,6 +26,7 @@
26
26
 
27
27
  --motion-duration-instant: 75ms; /* Sub-threshold: takes the edge off a size change without reading as motion (Composer grow/shrink) */
28
28
  --motion-duration-deliberate: 400ms; /* Carousel slide */
29
+ --motion-duration-orbit: 120000ms; /* One full turn of an auto-rotating surface (Globe): a tempo, so it paces with the schedule durations */
29
30
  --motion-duration-loop-spin: 1000ms; /* Spinner rotation */
30
31
  --motion-duration-loop-shimmer: 1800ms; /* Skeleton shimmer, agent label sweep */
31
32
  --motion-duration-loop-matrix: 1400ms; /* Agent dot-matrix cycle (twelve slots) */
@@ -56,6 +57,7 @@
56
57
  --motion-duration-slower: 0.01ms;
57
58
  --motion-duration-instant: 0.01ms;
58
59
  --motion-duration-deliberate: 0.01ms;
60
+ --motion-duration-orbit: 0.01ms;
59
61
  --motion-duration-loop-spin: 0.01ms;
60
62
  --motion-duration-loop-shimmer: 0.01ms;
61
63
  --motion-duration-loop-matrix: 0.01ms;
package/tokens/tokens-primitives.css CHANGED
@@ -157,6 +157,16 @@
157
157
  --primitive-true-black-semi: rgba(0, 0, 0, 0.5);
158
158
  --primitive-true-black-strong: rgba(0, 0, 0, 0.7);
159
159
 
160
+ /* File-format colours: the hues each document format wears everywhere
161
+ else a person meets it (a PDF's red, a spreadsheet's green, a
162
+ document's blue, a presentation's yellow). Recognition is the whole
163
+ job, so they are fixed values, not steps on a ramp: a theme that
164
+ re-keys the chromatic ramps leaves them alone. */
165
+ --primitive-file-pdf: #FF2116;
166
+ --primitive-file-spreadsheet: #00AC47;
167
+ --primitive-file-document: #2684FC;
168
+ --primitive-file-presentation: #FFBA00;
169
+
160
170
  /* ============================================
161
171
  SPACING PRIMITIVES
162
172
  ============================================ */