datocms-react-ui 2.1.3 → 3.0.0-alpha.0

package/src/ButtonGroup/Button/styles.module.css

@@ -2,8 +2,8 @@
   font-family: inherit;
   cursor: pointer;
   line-height: inherit;
-  background-color: white;
-  color: var(--base-body-color);
+  background-color: var(--color--surface);
+  color: var(--color--ink);
   -webkit-appearance: none;
   -moz-appearance: none;
   font-size: inherit;
@@ -11,22 +11,20 @@
   border: 0;
   padding: 0;
   padding: 7px 13px;
-  border-right: 1px solid var(--border-color);
-  border: 1px solid var(--border-color);
-  border-left-width: 0;
+  border: 1px solid var(--color--border);
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-column: center;
-  color: rgba(var(--base-body-color-rgb-components, 0.6));
+  color: var(--color--ink-subtle);
 }
 
 .Button:hover {
-  background-color: var(--light-bg-color);
+  background-color: var(--color--surface-hover);
 }
 
 .Button svg {
-  fill: var(--light-body-color);
+  fill: var(--color--ink-subtle);
 }
 
 .Button--s {
@@ -35,31 +33,31 @@
 
 .Button--disabled {
   cursor: not-allowed;
-  color: var(--light-body-color);
+  color: var(--color--disabled--ink);
 }
 
 .Button--disabled:hover {
-  background: white;
+  background: var(--color--surface);
 }
 
 .Button--selected {
-  background-color: var(--accent-color);
-  border-color: var(--accent-color);
-  color: white;
+  background-color: var(--color--accent--surface);
+  border-color: var(--color--selected--border);
+  color: var(--color--accent--ink);
 }
 
 .Button--selected svg {
-  fill: white;
+  fill: var(--color--accent--ink);
 }
 
 .Button--selected:hover {
-  background-color: var(--accent-color);
+  background-color: var(--color--accent--surface);
 }
 
 .Button--selected:hover,
 .Button--selected.Button--disabled {
-  background-color: rgba(var(--accent-color-rgb-components), 0.8);
-  border-color: rgba(var(--accent-color-rgb-components), 0.8);
+  background-color: var(--color--accent--surface);
+  border-color: var(--color--selected--border);
 }
 
 .Button:first-child {

package/src/ButtonGroup/Button/styles.module.css.json

@@ -1 +1 @@
-{"Button":"_Button_1h1w1_1","Button--s":"_Button--s_1h1w1_32","Button--disabled":"_Button--disabled_1h1w1_36","Button--selected":"_Button--selected_1h1w1_45"}
+{"Button":"_Button_9ae1c_1","Button--s":"_Button--s_9ae1c_30","Button--disabled":"_Button--disabled_9ae1c_34","Button--selected":"_Button--selected_9ae1c_43"}

package/src/ButtonGroup/Group/styles.module.css

@@ -1,6 +1,6 @@
 .Group {
   display: flex;
   align-items: stretch;
-  background-color: white;
+  background-color: var(--color--surface);
   overflow: hidden;
 }

package/src/ButtonGroup/Group/styles.module.css.json

@@ -1 +1 @@
-{"Group":"_Group_10mj4_1"}
+{"Group":"_Group_1b5yn_1"}

package/src/Canvas/index.tsx

@@ -34,281 +34,84 @@ 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
+ * Within the `Canvas` component, semantic color tokens are made available as
  * CSS variables, allowing you to conform to the theme of the current
- * environment:
+ * environment (including dark mode):
  *
  * ```js
  * <Canvas ctx={ctx}>
- *   <Section title="Text colors">
+ *   <Section title="Standalone">
  *     <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>
- *         </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>
+ *         {[
+ *           '--color--surface',
+ *           '--color--surface-hover',
+ *           '--color--surface-muted',
+ *           '--color--ink',
+ *           '--color--ink-subtle',
+ *           '--color--ink-placeholder',
+ *           '--color--ink-accent',
+ *           '--color--border',
+ *           '--color--border-hover',
+ *         ].map((v) => (
+ *           <tr key={v}>
+ *             <td><code>{v}</code></td>
+ *             <td width="30%">
+ *               <div style={{ width: '30px', height: '30px', background: `var(${v})` }} />
+ *             </td>
+ *           </tr>
+ *         ))}
  *       </tbody>
  *     </table>
  *   </Section>
- *   <Section title="UI colors">
+ *   <Section title="Contexts">
  *     <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>
+ *         {[
+ *           '--color--primary--surface',
+ *           '--color--primary--ink',
+ *           '--color--tinted--surface',
+ *           '--color--tinted--ink',
+ *           '--color--accent--surface',
+ *           '--color--accent--ink',
+ *           '--color--selected--surface',
+ *           '--color--danger--surface',
+ *           '--color--danger--ink',
+ *           '--color--disabled--surface',
+ *           '--color--disabled--ink',
+ *           '--color--focus--border',
+ *           '--color--focus--outline',
+ *         ].map((v) => (
+ *           <tr key={v}>
+ *             <td><code>{v}</code></td>
+ *             <td width="30%">
+ *               <div style={{ width: '30px', height: '30px', background: `var(${v})` }} />
+ *             </td>
+ *           </tr>
+ *         ))}
  *       </tbody>
  *     </table>
  *   </Section>
- *   <Section title="Project-specific colors">
+ *   <Section title="Feedback">
  *     <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>
+ *         {[
+ *           '--color--feedback-fail--ink',
+ *           '--color--feedback-fail--border',
+ *           '--color--feedback-warning--ink',
+ *           '--color--feedback-warning--surface',
+ *           '--color--feedback-success--ink',
+ *           '--color--feedback-success--border',
+ *         ].map((v) => (
+ *           <tr key={v}>
+ *             <td><code>{v}</code></td>
+ *             <td width="30%">
+ *               <div style={{ width: '30px', height: '30px', background: `var(${v})` }} />
+ *             </td>
+ *           </tr>
+ *         ))}
  *       </tbody>
  *     </table>
  *   </Section>
@@ -443,7 +246,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 +260,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 +274,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 +288,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 +302,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 +316,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,89 @@
 .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), falling back to the
+   * original hardcoded light-mode value if the token is unavailable.
+   *
+   * 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-components));
+  --base-body-color: var(
+    --color--ink,
+    rgb(var(--base-body-color-rgb-components))
+  );
   --light-body-color-rgb-components: 132, 132, 132;
-  --light-body-color: rgb(var(--light-body-color-components));
+  --light-body-color: var(
+    --color--ink-subtle,
+    rgb(var(--light-body-color-rgb-components))
+  );
   --placeholder-body-color-rgb-components: 198, 198, 198;
-  --placeholder-body-color: rgb(var(--placeholder-body-color-components));
+  --placeholder-body-color: var(
+    --color--ink-placeholder,
+    rgb(var(--placeholder-body-color-rgb-components))
+  );
   --light-bg-color-rgb-components: 245, 245, 245;
-  --light-bg-color: rgb(var(--light-bg-color-components));
+  --light-bg-color: var(
+    --color--surface-muted,
+    rgb(var(--light-bg-color-rgb-components))
+  );
   --lighter-bg-color-rgb-components: 248, 248, 248;
-  --lighter-bg-color: rgb(var(--lighter-bg-color-components));
+  --lighter-bg-color: var(
+    --color--surface-muted,
+    rgb(var(--lighter-bg-color-rgb-components))
+  );
   --disabled-bg-color-rgb-components: 237, 237, 237;
-  --disabled-bg-color: rgb(var(--disabled-bg-color-components));
+  --disabled-bg-color: var(
+    --color--disabled--surface,
+    rgb(var(--disabled-bg-color-rgb-components))
+  );
   --border-color-rgb-components: 240, 240, 240;
-  --border-color: rgb(var(--border-color-components));
+  --border-color: var(
+    --color--border,
+    rgb(var(--border-color-rgb-components))
+  );
   --darker-border-color-rgb-components: 215, 215, 215;
-  --darker-border-color: rgb(var(--darker-border-color-components));
+  --darker-border-color: var(
+    --color--border-hover,
+    rgb(var(--darker-border-color-rgb-components))
+  );
   --alert-color-rgb-components: 255, 94, 73;
-  --alert-color: rgb(var(--alert-color-components));
+  --alert-color: var(
+    --color--feedback-fail--ink,
+    rgb(var(--alert-color-rgb-components))
+  );
   --warning-color-rgb-components: 255, 215, 0;
-  --warning-color: rgb(var(--warning-color-components));
+  --warning-color: var(
+    --color--feedback-warning--ink,
+    rgb(var(--warning-color-rgb-components))
+  );
   --notice-color-rgb-components: 70, 215, 0;
-  --notice-color: rgb(var(--notice-color-components));
+  --notice-color: var(
+    --color--feedback-success--ink,
+    rgb(var(--notice-color-rgb-components))
+  );
   --warning-bg-color-rgb-components: 255, 255, 229;
-  --warning-bg-color: rgb(var(--warning-bg-color-components));
+  --warning-bg-color: var(
+    --color--feedback-warning--surface,
+    rgb(var(--warning-bg-color-rgb-components))
+  );
   --add-color-rgb-components: 76, 176, 109;
-  --add-color: rgb(var(--add-color-components));
+  --add-color: var(
+    --color--diff-added--surface,
+    rgb(var(--add-color-rgb-components))
+  );
   --remove-color-rgb-components: 235, 87, 106;
-  --remove-color: rgb(var(--remove-color-components));
+  --remove-color: var(
+    --color--diff-removed--surface,
+    rgb(var(--remove-color-rgb-components))
+  );
 
   /* Fonts */
   --base-font-family:
@@ -39,6 +95,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 +103,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 +129,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_pqxmo_1","canvas":"_canvas_pqxmo_70"}
+{"themeVariables":"_themeVariables_fb3bs_1","canvas":"_canvas_fb3bs_128"}