datocms-react-ui 2.1.4 → 2.2.0-alpha.1

package/src/Canvas/index.tsx

@@ -34,283 +34,186 @@ export type CanvasProps = {
 };
 
 /**
- * @example Color palette CSS variables
+ * @example Semantic color token CSS variables
  *
- * Within the `Canvas` component, a color palette is made available as a set of
- * CSS variables, allowing you to conform to the theme of the current
- * environment:
+ * Inside `Canvas`, the host exposes a full semantic color palette as CSS
+ * custom properties. Components should reference these tokens directly —
+ * they adapt to the user's active theme (including dark mode)
+ * automatically.
+ *
+ * ### How to read a token name
+ *
+ * ```
+ * --color--{property}                 // standalone (one -- after color)
+ * --color--{context}--{property}      // context pair (two -- after color)
+ * ```
+ *
+ * **Properties** — `surface` (backgrounds), `ink` (text/icons),
+ * `border` (1px lines), `outline` (focus rings), plus `fill` / `track`
+ * for progress bars.
+ *
+ * **Standalone** tokens work on any neutral page. **Contexts** are
+ * self-contained environments: always pair a `surface` with the `ink`,
+ * `border`, and hover states from the *same* context. Never mix — e.g.
+ * don't put `--color--primary--ink` on `--color--danger--surface`.
+ *
+ * Non-color tokens `--shadow--raised` / `--shadow--floating` /
+ * `--shadow--lifted` / `--shadow--ambient` are ready-made `box-shadow`
+ * composites.
  *
  * ```js
  * <Canvas ctx={ctx}>
- *   <Section title="Text colors">
- *     <table>
- *       <tbody>
- *         <tr>
- *           <td>
- *             <code>--base-body-color</code>
- *           </td>
- *           <td width="30%">
- *             <div
- *               style={{
- *                 width: '30px',
- *                 height: '30px',
- *                 background: 'var(--base-body-color)',
- *               }}
- *             />
- *           </td>
+ *   <Section title="Standalone — use on any neutral page">
+ *     <table><tbody>
+ *       {[
+ *         ['--color--surface',          'Default page background'],
+ *         ['--color--surface-hover',    'Hovered row / list item'],
+ *         ['--color--surface-muted',    'Muted section / card background'],
+ *         ['--color--ink',              'Primary text'],
+ *         ['--color--ink-subtle',       'Secondary text / captions'],
+ *         ['--color--ink-hover',        'Text under hover'],
+ *         ['--color--ink-muted',        'De-emphasized text'],
+ *         ['--color--ink-placeholder',  'Input placeholder text'],
+ *         ['--color--ink-primary',      'Brand-highlighted text / icons'],
+ *         ['--color--ink-accent',       'Links / accent text'],
+ *         ['--color--ink-disabled',     'Disabled text'],
+ *         ['--color--border',           'Default 1px border'],
+ *         ['--color--border-hover',     'Border under hover'],
+ *       ].map(([t, d]) => (
+ *         <tr key={t}>
+ *           <td><code>{t}</code></td>
+ *           <td style={{ color: 'var(--color--ink-subtle)' }}>{d}</td>
+ *           <td width="40"><div style={{ width: '30px', height: '30px', background: `var(${t})`, border: '1px solid var(--color--border)' }} /></td>
  *         </tr>
- *         <tr>
- *           <td>
- *             <code>--light-body-color</code>
- *           </td>
- *           <td width="30%">
- *             <div
- *               style={{
- *                 width: '30px',
- *                 height: '30px',
- *                 background: 'var(--light-body-color)',
- *               }}
- *             />
- *           </td>
- *         </tr>
- *         <tr>
- *           <td>
- *             <code>--placeholder-body-color</code>
- *           </td>
- *           <td width="30%">
- *             <div
- *               style={{
- *                 width: '30px',
- *                 height: '30px',
- *                 background: 'var(--placeholder-body-color)',
- *               }}
- *             />
- *           </td>
- *         </tr>
- *       </tbody>
- *     </table>
+ *       ))}
+ *     </tbody></table>
  *   </Section>
- *   <Section title="UI colors">
- *     <table>
- *       <tbody>
- *         <tr>
- *           <td>
- *             <code>--light-bg-color</code>
- *           </td>
- *           <td width="30%">
- *             <div
- *               style={{
- *                 width: '30px',
- *                 height: '30px',
- *                 background: 'var(--light-bg-color)',
- *               }}
- *             />
- *           </td>
- *         </tr>
- *         <tr>
- *           <td>
- *             <code>--lighter-bg-color</code>
- *           </td>
- *           <td width="30%">
- *             <div
- *               style={{
- *                 width: '30px',
- *                 height: '30px',
- *                 background: 'var(--lighter-bg-color)',
- *               }}
- *             />
- *           </td>
- *         </tr>
- *         <tr>
- *           <td>
- *             <code>--disabled-bg-color</code>
- *           </td>
- *           <td width="30%">
- *             <div
- *               style={{
- *                 width: '30px',
- *                 height: '30px',
- *                 background: 'var(--disabled-bg-color)',
- *               }}
- *             />
- *           </td>
- *         </tr>
- *         <tr>
- *           <td>
- *             <code>--border-color</code>
- *           </td>
- *           <td width="30%">
- *             <div
- *               style={{
- *                 width: '30px',
- *                 height: '30px',
- *                 background: 'var(--border-color)',
- *               }}
- *             />
- *           </td>
- *         </tr>
- *         <tr>
- *           <td>
- *             <code>--darker-border-color</code>
- *           </td>
- *           <td width="30%">
- *             <div
- *               style={{
- *                 width: '30px',
- *                 height: '30px',
- *                 background: 'var(--darker-border-color)',
- *               }}
- *             />
- *           </td>
- *         </tr>
- *         <tr>
- *           <td>
- *             <code>--alert-color</code>
- *           </td>
- *           <td width="30%">
- *             <div
- *               style={{
- *                 width: '30px',
- *                 height: '30px',
- *                 background: 'var(--alert-color)',
- *               }}
- *             />
- *           </td>
- *         </tr>
- *         <tr>
- *           <td>
- *             <code>--warning-color</code>
- *           </td>
- *           <td width="30%">
- *             <div
- *               style={{
- *                 width: '30px',
- *                 height: '30px',
- *                 background: 'var(--warning-color)',
- *               }}
- *             />
- *           </td>
- *         </tr>
- *         <tr>
- *           <td>
- *             <code>--notice-color</code>
- *           </td>
- *           <td width="30%">
- *             <div
- *               style={{
- *                 width: '30px',
- *                 height: '30px',
- *                 background: 'var(--notice-color)',
- *               }}
- *             />
- *           </td>
- *         </tr>
- *         <tr>
- *           <td>
- *             <code>--warning-bg-color</code>
- *           </td>
- *           <td width="30%">
- *             <div
- *               style={{
- *                 width: '30px',
- *                 height: '30px',
- *                 background: 'var(--warning-bg-color)',
- *               }}
- *             />
- *           </td>
- *         </tr>
- *         <tr>
- *           <td>
- *             <code>--add-color</code>
- *           </td>
- *           <td width="30%">
- *             <div
- *               style={{
- *                 width: '30px',
- *                 height: '30px',
- *                 background: 'var(--add-color)',
- *               }}
- *             />
- *           </td>
- *         </tr>
- *         <tr>
- *           <td>
- *             <code>--remove-color</code>
- *           </td>
- *           <td width="30%">
- *             <div
- *               style={{
- *                 width: '30px',
- *                 height: '30px',
- *                 background: 'var(--remove-color)',
- *               }}
- *             />
- *           </td>
- *         </tr>
- *       </tbody>
- *     </table>
+ *
+ *   <Section title="Context: raised — modals, dropdowns, popovers">
+ *     <table><tbody>
+ *       {['--color--raised--surface', '--color--raised--surface-hover', '--color--raised--surface-active']
+ *         .map((t) => (<tr key={t}><td><code>{t}</code></td><td width="40"><div style={{ width: '30px', height: '30px', background: `var(${t})`, border: '1px solid var(--color--border)' }} /></td></tr>))}
+ *     </tbody></table>
  *   </Section>
- *   <Section title="Project-specific colors">
- *     <table>
- *       <tbody>
- *         <tr>
- *           <td>
- *             <code>--accent-color</code>
- *           </td>
- *           <td width="30%">
- *             <div
- *               style={{
- *                 width: '30px',
- *                 height: '30px',
- *                 background: 'var(--accent-color)',
- *               }}
- *             />
- *           </td>
- *         </tr>
- *         <tr>
- *           <td>
- *             <code>--primary-color</code>
- *           </td>
- *           <td width="30%">
- *             <div
- *               style={{
- *                 width: '30px',
- *                 height: '30px',
- *                 background: 'var(--primary-color)',
- *               }}
- *             />
- *           </td>
- *         </tr>
- *         <tr>
- *           <td>
- *             <code>--light-color</code>
- *           </td>
- *           <td width="30%">
- *             <div
- *               style={{
- *                 width: '30px',
- *                 height: '30px',
- *                 background: 'var(--light-color)',
- *               }}
- *             />
- *           </td>
- *         </tr>
- *         <tr>
- *           <td>
- *             <code>--dark-color</code>
- *           </td>
- *           <td width="30%">
- *             <div
- *               style={{
- *                 width: '30px',
- *                 height: '30px',
- *                 background: 'var(--dark-color)',
- *               }}
- *             />
- *           </td>
- *         </tr>
- *       </tbody>
- *     </table>
+ *
+ *   <Section title="Context: primary — main call-to-action buttons, badges, nav">
+ *     <table><tbody>
+ *       {['--color--primary--surface', '--color--primary--surface-hover', '--color--primary--surface-active', '--color--primary--surface-muted', '--color--primary--ink', '--color--primary--border']
+ *         .map((t) => (<tr key={t}><td><code>{t}</code></td><td width="40"><div style={{ width: '30px', height: '30px', background: `var(${t})`, border: '1px solid var(--color--border)' }} /></td></tr>))}
+ *     </tbody></table>
+ *   </Section>
+ *
+ *   <Section title="Context: tinted — subtle brand-tinted surfaces">
+ *     <table><tbody>
+ *       {['--color--tinted--surface', '--color--tinted--surface-hover', '--color--tinted--surface-active', '--color--tinted--ink', '--color--tinted--border']
+ *         .map((t) => (<tr key={t}><td><code>{t}</code></td><td width="40"><div style={{ width: '30px', height: '30px', background: `var(${t})`, border: '1px solid var(--color--border)' }} /></td></tr>))}
+ *     </tbody></table>
+ *   </Section>
+ *
+ *   <Section title="Context: accent, selected, disabled, danger">
+ *     <table><tbody>
+ *       {['--color--accent--surface', '--color--accent--ink',
+ *         '--color--selected--surface', '--color--selected--ink', '--color--selected--border',
+ *         '--color--disabled--surface', '--color--disabled--ink',
+ *         '--color--danger--surface', '--color--danger--ink']
+ *         .map((t) => (<tr key={t}><td><code>{t}</code></td><td width="40"><div style={{ width: '30px', height: '30px', background: `var(${t})`, border: '1px solid var(--color--border)' }} /></td></tr>))}
+ *     </tbody></table>
+ *   </Section>
+ *
+ *   <Section title="Context: focus — focus rings and outlines">
+ *     <table><tbody>
+ *       {['--color--focus--border', '--color--focus--outline']
+ *         .map((t) => (<tr key={t}><td><code>{t}</code></td><td width="40"><div style={{ width: '30px', height: '30px', background: `var(${t})`, border: '1px solid var(--color--border)' }} /></td></tr>))}
+ *     </tbody></table>
+ *   </Section>
+ *
+ *   <Section title="Feedback — validation and form states">
+ *     <table><tbody>
+ *       {['--color--feedback-fail--ink', '--color--feedback-fail--border', '--color--feedback-fail--outline', '--color--feedback-fail--surface',
+ *         '--color--feedback-warning--ink', '--color--feedback-warning--border', '--color--feedback-warning--outline', '--color--feedback-warning--surface',
+ *         '--color--feedback-success--ink', '--color--feedback-success--border', '--color--feedback-success--outline', '--color--feedback-success--surface']
+ *         .map((t) => (<tr key={t}><td><code>{t}</code></td><td width="40"><div style={{ width: '30px', height: '30px', background: `var(${t})`, border: '1px solid var(--color--border)' }} /></td></tr>))}
+ *     </tbody></table>
+ *   </Section>
+ *
+ *   <Section title="Context: highlight — rich text inline highlights">
+ *     <table><tbody>
+ *       {['--color--highlight--surface']
+ *         .map((t) => (<tr key={t}><td><code>{t}</code></td><td width="40"><div style={{ width: '30px', height: '30px', background: `var(${t})`, border: '1px solid var(--color--border)' }} /></td></tr>))}
+ *     </tbody></table>
+ *   </Section>
+ *
+ *   <Section title="Diffs — content versioning (added / removed / changed)">
+ *     <table><tbody>
+ *       {['--color--diff-added--surface', '--color--diff-added--outline', '--color--diff-added--ink', '--color--diff-added--ink-subtle',
+ *         '--color--diff-removed--surface', '--color--diff-removed--outline', '--color--diff-removed--ink', '--color--diff-removed--ink-subtle',
+ *         '--color--diff-changed--surface', '--color--diff-changed--outline']
+ *         .map((t) => (<tr key={t}><td><code>{t}</code></td><td width="40"><div style={{ width: '30px', height: '30px', background: `var(${t})`, border: '1px solid var(--color--border)' }} /></td></tr>))}
+ *     </tbody></table>
+ *   </Section>
+ *
+ *   <Section title="Status — publishing workflow badges (ink-only)">
+ *     <table><tbody>
+ *       {['--color--status-draft--ink', '--color--status-outdated--ink', '--color--status-published--ink']
+ *         .map((t) => (<tr key={t}><td><code>{t}</code></td><td><span style={{ color: `var(${t})`, fontWeight: 'bold' }}>Sample text</span></td></tr>))}
+ *     </tbody></table>
+ *   </Section>
+ *
+ *   <Section title="Backdrop & overlay — scrims and floating UI">
+ *     <table><tbody>
+ *       {['--color--backdrop--surface', '--color--backdrop--ink',
+ *         '--color--overlay--surface', '--color--overlay--surface-hover', '--color--overlay--surface-active', '--color--overlay--ink']
+ *         .map((t) => (<tr key={t}><td><code>{t}</code></td><td width="40"><div style={{ width: '30px', height: '30px', background: `var(${t})`, border: '1px solid var(--color--border)' }} /></td></tr>))}
+ *     </tbody></table>
+ *   </Section>
+ *
+ *   <Section title="Stacked — dark layered UI (uploaders, media players)">
+ *     <p>Stacked gives you layered dark surfaces (base → upper) plus action buttons, borders and ink tones. Use it when a dark inline panel needs internal hierarchy.</p>
+ *     <table><tbody>
+ *       {['--color--stacked--surface', '--color--stacked--surface-upper',
+ *         '--color--stacked--surface-action', '--color--stacked--surface-action-hover', '--color--stacked--surface-action-active',
+ *         '--color--stacked--ink', '--color--stacked--ink-subtle', '--color--stacked--border']
+ *         .map((t) => (<tr key={t}><td><code>{t}</code></td><td width="40"><div style={{ width: '30px', height: '30px', background: `var(${t})`, border: '1px solid var(--color--border)' }} /></td></tr>))}
+ *     </tbody></table>
+ *   </Section>
+ *
+ *   <Section title="Progress — bar track and fill">
+ *     <table><tbody>
+ *       {['--color--progress--track', '--color--progress--fill', '--color--progress--fill-hover']
+ *         .map((t) => (<tr key={t}><td><code>{t}</code></td><td width="40"><div style={{ width: '30px', height: '30px', background: `var(${t})`, border: '1px solid var(--color--border)' }} /></td></tr>))}
+ *     </tbody></table>
+ *   </Section>
+ *
+ *   <Section title="Tooltip — small dark floating labels">
+ *     <table><tbody>
+ *       {['--color--tooltip--surface', '--color--tooltip--surface-hover', '--color--tooltip--ink', '--color--tooltip--ink-subtle']
+ *         .map((t) => (<tr key={t}><td><code>{t}</code></td><td width="40"><div style={{ width: '30px', height: '30px', background: `var(${t})`, border: '1px solid var(--color--border)' }} /></td></tr>))}
+ *     </tbody></table>
+ *   </Section>
+ *
+ *   <Section title="Code — dark code blocks, logs, error traces">
+ *     <table><tbody>
+ *       {['--color--code--surface', '--color--code--ink']
+ *         .map((t) => (<tr key={t}><td><code>{t}</code></td><td width="40"><div style={{ width: '30px', height: '30px', background: `var(${t})`, border: '1px solid var(--color--border)' }} /></td></tr>))}
+ *     </tbody></table>
+ *   </Section>
+ *
+ *   <Section title="Scrollbar">
+ *     <table><tbody>
+ *       {['--color--scrollbar--fill']
+ *         .map((t) => (<tr key={t}><td><code>{t}</code></td><td width="40"><div style={{ width: '30px', height: '30px', background: `var(${t})`, border: '1px solid var(--color--border)' }} /></td></tr>))}
+ *     </tbody></table>
+ *   </Section>
+ *
+ *   <Section title="Shadow composites — drop-in box-shadow values">
+ *     <div style={{ display: 'flex', gap: 'var(--spacing-l)', padding: 'var(--spacing-l)' }}>
+ *       {['--shadow--raised', '--shadow--floating', '--shadow--lifted', '--shadow--ambient'].map((t) => (
+ *         <div key={t} style={{ textAlign: 'center' }}>
+ *           <div style={{ width: '80px', height: '80px', background: 'var(--color--surface)', borderRadius: '4px', boxShadow: `var(${t})` }} />
+ *           <code style={{ display: 'block', marginTop: 'var(--spacing-s)', fontSize: 'var(--font-size-xs)' }}>{t}</code>
+ *         </div>
+ *       ))}
+ *     </div>
  *   </Section>
  * </Canvas>;
  * ```
@@ -443,7 +346,7 @@ export type CanvasProps = {
  *         <td>
  *           <div
  *             style={{
- *               background: 'var(--accent-color)',
+ *               background: 'var(--color--accent--surface)',
  *               width: 'var(--spacing-s)',
  *               height: 'var(--spacing-s)',
  *             }}
@@ -457,7 +360,7 @@ export type CanvasProps = {
  *         <td>
  *           <div
  *             style={{
- *               background: 'var(--accent-color)',
+ *               background: 'var(--color--accent--surface)',
  *               width: 'var(--spacing-m)',
  *               height: 'var(--spacing-m)',
  *             }}
@@ -471,7 +374,7 @@ export type CanvasProps = {
  *         <td>
  *           <div
  *             style={{
- *               background: 'var(--accent-color)',
+ *               background: 'var(--color--accent--surface)',
  *               width: 'var(--spacing-l)',
  *               height: 'var(--spacing-l)',
  *             }}
@@ -485,7 +388,7 @@ export type CanvasProps = {
  *         <td>
  *           <div
  *             style={{
- *               background: 'var(--accent-color)',
+ *               background: 'var(--color--accent--surface)',
  *               width: 'var(--spacing-xl)',
  *               height: 'var(--spacing-xl)',
  *             }}
@@ -499,7 +402,7 @@ export type CanvasProps = {
  *         <td>
  *           <div
  *             style={{
- *               background: 'var(--accent-color)',
+ *               background: 'var(--color--accent--surface)',
  *               width: 'var(--spacing-xxl)',
  *               height: 'var(--spacing-xxl)',
  *             }}
@@ -513,7 +416,7 @@ export type CanvasProps = {
  *         <td>
  *           <div
  *             style={{
- *               background: 'var(--accent-color)',
+ *               background: 'var(--color--accent--surface)',
  *               width: 'var(--spacing-xxxl)',
  *               height: 'var(--spacing-xxxl)',
  *             }}

package/src/Canvas/styles.module.css

@@ -1,33 +1,46 @@
 .themeVariables {
-  /* Colors */
+  /**
+   * @deprecated LEGACY COLOR VARIABLES — DO NOT USE IN NEW CODE.
+   *
+   * The color variables below are kept strictly for backward compatibility
+   * with third-party plugins authored before the semantic color token
+   * system. Each one now resolves to its closest semantic token, so it
+   * follows the active theme (including dark mode).
+   *
+   * The colors in this block will be removed in a future major version.
+   * Migrate to the `--color--*` semantic tokens (see the `Canvas` JSDoc
+   * for the full list). The non-color tokens further below (fonts, spacing,
+   * font-sizes, easings) are stable and will remain.
+   */
+  /* Colors (deprecated) */
   --base-body-color-rgb-components: 52, 54, 58;
-  --base-body-color: rgb(var(--base-body-color-rgb-components));
+  --base-body-color: var(--color--ink);
   --light-body-color-rgb-components: 132, 132, 132;
-  --light-body-color: rgb(var(--light-body-color-rgb-components));
+  --light-body-color: var(--color--ink-subtle);
   --placeholder-body-color-rgb-components: 198, 198, 198;
-  --placeholder-body-color: rgb(var(--placeholder-body-color-rgb-components));
+  --placeholder-body-color: var(--color--ink-placeholder);
   --light-bg-color-rgb-components: 245, 245, 245;
-  --light-bg-color: rgb(var(--light-bg-color-rgb-components));
+  --light-bg-color: var(--color--surface-muted);
   --lighter-bg-color-rgb-components: 248, 248, 248;
-  --lighter-bg-color: rgb(var(--lighter-bg-color-rgb-components));
+  --lighter-bg-color: var(--color--surface-muted);
   --disabled-bg-color-rgb-components: 237, 237, 237;
-  --disabled-bg-color: rgb(var(--disabled-bg-color-rgb-components));
+  --disabled-bg-color: var(--color--disabled--surface);
   --border-color-rgb-components: 240, 240, 240;
-  --border-color: rgb(var(--border-color-rgb-components));
+  --border-color: var(--color--border);
   --darker-border-color-rgb-components: 215, 215, 215;
-  --darker-border-color: rgb(var(--darker-border-color-rgb-components));
+  --darker-border-color: var(--color--border-hover);
   --alert-color-rgb-components: 255, 94, 73;
-  --alert-color: rgb(var(--alert-color-rgb-components));
+  --alert-color: var(--color--feedback-fail--ink);
   --warning-color-rgb-components: 255, 215, 0;
-  --warning-color: rgb(var(--warning-color-rgb-components));
+  --warning-color: var(--color--feedback-warning--ink);
   --notice-color-rgb-components: 70, 215, 0;
-  --notice-color: rgb(var(--notice-color-rgb-components));
+  --notice-color: var(--color--feedback-success--ink);
   --warning-bg-color-rgb-components: 255, 255, 229;
-  --warning-bg-color: rgb(var(--warning-bg-color-rgb-components));
+  --warning-bg-color: var(--color--feedback-warning--surface);
   --add-color-rgb-components: 76, 176, 109;
-  --add-color: rgb(var(--add-color-rgb-components));
+  --add-color: var(--color--diff-added--surface);
   --remove-color-rgb-components: 235, 87, 106;
-  --remove-color: rgb(var(--remove-color-rgb-components));
+  --remove-color: var(--color--diff-removed--surface);
 
   /* Fonts */
   --base-font-family:
@@ -39,6 +52,7 @@
   --font-weight-bold: 500;
 
   /* Spacing */
+  --spacing-xs: calc(0.25 * 12 * 0.0625rem);
   --spacing-s: calc(0.5 * 12 * 0.0625rem);
   --spacing-m: calc(1 * 12 * 0.0625rem);
   --spacing-l: calc(2 * 12 * 0.0625rem);
@@ -46,6 +60,7 @@
   --spacing-xxl: calc(5 * 12 * 0.0625rem);
   --spacing-xxxl: calc(8 * 12 * 0.0625rem);
 
+  --negative-spacing-xs: calc(-0.25 * 12 * 0.0625rem);
   --negative-spacing-s: calc(-0.5 * 12 * 0.0625rem);
   --negative-spacing-m: calc(-1 * 12 * 0.0625rem);
   --negative-spacing-l: calc(-2 * 12 * 0.0625rem);
@@ -71,7 +86,8 @@
   font-family: var(--base-font-family);
   -webkit-text-size-adjust: 100%;
   line-height: 1.5;
-  color: var(--base-body-color);
+  color: var(--color--ink);
+  background: var(--color--surface);
   font-size: var(--font-size-m);
   text-rendering: optimizeLegibility;
 }

package/src/Canvas/styles.module.css.json

@@ -1 +1 @@
-{"themeVariables":"_themeVariables_2dr1w_1","canvas":"_canvas_2dr1w_70"}
+{"themeVariables":"_themeVariables_1evrh_1","canvas":"_canvas_1evrh_85"}