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

package/dist/types/Canvas/index.d.ts

@@ -9,281 +9,84 @@ export declare type CanvasProps = {
     children: ReactNode;
 };
 /**
- * @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>
@@ -418,7 +221,7 @@ export declare type CanvasProps = {
  *         <td>
  *           <div
  *             style={{
- *               background: 'var(--accent-color)',
+ *               background: 'var(--color--accent--surface)',
  *               width: 'var(--spacing-s)',
  *               height: 'var(--spacing-s)',
  *             }}
@@ -432,7 +235,7 @@ export declare type CanvasProps = {
  *         <td>
  *           <div
  *             style={{
- *               background: 'var(--accent-color)',
+ *               background: 'var(--color--accent--surface)',
  *               width: 'var(--spacing-m)',
  *               height: 'var(--spacing-m)',
  *             }}
@@ -446,7 +249,7 @@ export declare type CanvasProps = {
  *         <td>
  *           <div
  *             style={{
- *               background: 'var(--accent-color)',
+ *               background: 'var(--color--accent--surface)',
  *               width: 'var(--spacing-l)',
  *               height: 'var(--spacing-l)',
  *             }}
@@ -460,7 +263,7 @@ export declare type CanvasProps = {
  *         <td>
  *           <div
  *             style={{
- *               background: 'var(--accent-color)',
+ *               background: 'var(--color--accent--surface)',
  *               width: 'var(--spacing-xl)',
  *               height: 'var(--spacing-xl)',
  *             }}
@@ -474,7 +277,7 @@ export declare type CanvasProps = {
  *         <td>
  *           <div
  *             style={{
- *               background: 'var(--accent-color)',
+ *               background: 'var(--color--accent--surface)',
  *               width: 'var(--spacing-xxl)',
  *               height: 'var(--spacing-xxl)',
  *             }}
@@ -488,7 +291,7 @@ export declare type CanvasProps = {
  *         <td>
  *           <div
  *             style={{
- *               background: 'var(--accent-color)',
+ *               background: 'var(--color--accent--surface)',
  *               width: 'var(--spacing-xxxl)',
  *               height: 'var(--spacing-xxxl)',
  *             }}

package/dist/types/SidebarPanel/index.d.ts

@@ -14,7 +14,7 @@ export declare type SidebarPanelProps = {
  *     <div
  *       style={{
  *         width: '300px',
- *         borderRight: '1px solid var(--border-color)',
+ *         borderRight: '1px solid var(--color--border)',
  *       }}
  *     >
  *       <SidebarPanel title="Default">Content</SidebarPanel>
@@ -31,7 +31,7 @@ export declare type SidebarPanelProps = {
  *         display: 'flex',
  *         justifyContent: 'center',
  *         alignItems: 'center',
- *         background: 'var(--light-bg-color)',
+ *         background: 'var(--color--surface-muted)',
  *       }}
  *     >
  *       Main content

package/dist/types/Toolbar/Toolbar/index.d.ts

@@ -19,7 +19,7 @@ export declare type ToolbarProps = {
  *       display: 'flex',
  *       justifyContent: 'center',
  *       alignItems: 'center',
- *       background: 'var(--light-bg-color)',
+ *       background: 'var(--color--surface-muted)',
  *       height: '150px',
  *     }}
  *   >
@@ -50,7 +50,7 @@ export declare type ToolbarProps = {
  *       display: 'flex',
  *       justifyContent: 'center',
  *       alignItems: 'center',
- *       background: 'var(--light-bg-color)',
+ *       background: 'var(--color--surface-muted)',
  *       height: '150px',
  *     }}
  *   >
@@ -79,7 +79,7 @@ export declare type ToolbarProps = {
  *       display: 'flex',
  *       justifyContent: 'center',
  *       alignItems: 'center',
- *       background: 'var(--light-bg-color)',
+ *       background: 'var(--color--surface-muted)',
  *       height: '150px',
  *     }}
  *   >

package/dist/types/Tooltip/TooltipDelayGroup/index.d.ts

@@ -87,8 +87,8 @@ export declare type TooltipDelayGroupProps = {
  *       display: 'flex',
  *       gap: 'var(--spacing-xs)',
  *       padding: 'var(--spacing-s)',
- *       borderRadius: 'var(--border-radius-m)',
- *       backgroundColor: 'var(--light-bg-color)'
+ *       borderRadius: '4px',
+ *       backgroundColor: 'var(--color--surface-muted)'
  *     }}>
  *       <Tooltip>
  *         <TooltipTrigger>

package/dist/types/VerticalSplit/index.d.ts

@@ -36,7 +36,7 @@ export declare type VerticalSplitProps = {
  *           Main content
  *         </div>
  *       </div>
- *       <div style={{ display: 'flex', flexDirection: 'column', height: '100%', borderLeft: '1px solid var(--border-color)' }}>
+ *       <div style={{ display: 'flex', flexDirection: 'column', height: '100%', borderLeft: '1px solid var(--color--border)' }}>
  *         <Toolbar>
  *           <ToolbarStack stackSize="l">
  *             <ToolbarTitle>Secondary</ToolbarTitle>
@@ -83,7 +83,7 @@ export declare type VerticalSplitProps = {
  *           Sidebar
  *         </div>
  *       </div>
- *       <div style={{ display: 'flex', flexDirection: 'column', height: '100%', borderLeft: '1px solid var(--border-color)' }}>
+ *       <div style={{ display: 'flex', flexDirection: 'column', height: '100%', borderLeft: '1px solid var(--color--border)' }}>
  *         <Toolbar>
  *           <ToolbarStack stackSize="l">
  *             <ToolbarTitle>Primary</ToolbarTitle>
@@ -143,7 +143,7 @@ export declare type VerticalSplitProps = {
  *                display: 'flex',
  *                flexDirection: 'column',
  *                height: '100%',
- *                borderLeft: '1px solid var(--border-color)',
+ *                borderLeft: '1px solid var(--color--border)',
  *              }}
  *            >
  *              <Toolbar>
@@ -208,7 +208,7 @@ export declare type VerticalSplitProps = {
  *                display: 'flex',
  *                flexDirection: 'column',
  *                height: '100%',
- *                borderLeft: '1px solid var(--border-color)',
+ *                borderLeft: '1px solid var(--color--border)',
  *              }}
  *            >
  *              <Toolbar>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "datocms-react-ui",
-  "version": "2.1.3",
+  "version": "3.0.0-alpha.0",
   "description": "React components to use inside DatoCMS plugins",
   "keywords": [
     "datocms",
@@ -42,7 +42,7 @@
   "dependencies": {
     "@floating-ui/react": "^0.27.16",
     "classnames": "^2.3.1",
-    "datocms-plugin-sdk": "^2.1.1",
+    "datocms-plugin-sdk": "^3.0.0-alpha.0",
     "react-intersection-observer": "^8.31.0",
     "react-select": "^5.2.1",
     "scroll-into-view-if-needed": "^2.2.20"
@@ -58,5 +58,5 @@
     "postcss-nested": "^5.0.6",
     "typedoc": "^0.26.7"
   },
-  "gitHead": "4c6cd7553d6237badf42343decd255dfce4bc603"
+  "gitHead": "01c46332e40377d305c3abd262c3d1840385ec49"
 }

package/src/Button/styles.module.css

@@ -7,7 +7,7 @@
   cursor: pointer;
   line-height: inherit;
   background-color: transparent;
-  color: var(--base-body-color);
+  color: var(--color--ink);
   -webkit-appearance: none;
   -moz-appearance: none;
   border-radius: 4px;
@@ -32,56 +32,56 @@
 }
 
 .buttonType-muted {
-  background-color: var(--light-color);
-  color: var(--accent-color);
+  background-color: var(--color--tinted--surface);
+  color: var(--color--tinted--ink);
 
   &.disabled {
-    background-color: var(--light-bg-color);
-    color: rgba(0, 0, 0, 0.2);
+    background-color: var(--color--disabled--surface);
+    color: var(--color--disabled--ink);
 
     &:hover,
     &:focus,
     &:active {
-      color: rgba(0, 0, 0, 0.2);
+      color: var(--color--disabled--ink);
     }
   }
 }
 
 .buttonType-primary {
-  background-color: var(--accent-color);
-  color: white;
+  background-color: var(--color--primary--surface);
+  color: var(--color--primary--ink);
 
   &:hover,
   &:focus,
   &:active {
-    color: white;
+    color: var(--color--primary--ink);
   }
 
   &.disabled {
-    background-color: var(--disabled-bg-color);
-    color: rgba(0, 0, 0, 0.2);
+    background-color: var(--color--disabled--surface);
+    color: var(--color--disabled--ink);
     &:hover,
     &:focus,
     &:active {
-      color: rgba(0, 0, 0, 0.2);
+      color: var(--color--disabled--ink);
     }
   }
 }
 
 .buttonType-negative {
-  background-color: var(--alert-color);
-  color: white;
+  background-color: var(--color--danger--surface);
+  color: var(--color--danger--ink);
 
   &:hover,
   &:focus,
   &:active {
-    color: white;
-    background-color: var(--alert-color);
+    color: var(--color--danger--ink);
+    background-color: var(--color--danger--surface);
   }
 
   &.disabled {
-    background-color: var(--disabled-bg-color);
-    color: rgba(0, 0, 0, 0.2);
+    background-color: var(--color--disabled--surface);
+    color: var(--color--disabled--ink);
   }
 }
 
@@ -128,7 +128,7 @@
   line-height: 0.6;
 
   svg {
-    fill: var(--accent-color);
+    fill: var(--color--ink-accent);
   }
 }
 

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

@@ -1 +1 @@
-{"button":"_button_474wk_1","disabled":"_disabled_474wk_30","buttonType-muted":"_buttonType-muted_474wk_34","buttonType-primary":"_buttonType-primary_474wk_50","buttonType-negative":"_buttonType-negative_474wk_71","buttonSize-xxs":"_buttonSize-xxs_474wk_88","buttonSize-xs":"_buttonSize-xs_474wk_93","buttonSize-s":"_buttonSize-s_474wk_98","buttonSize-m":"_buttonSize-m_474wk_103","buttonSize-l":"_buttonSize-l_474wk_108","buttonSize-xl":"_buttonSize-xl_474wk_113","fullWidth":"_fullWidth_474wk_118","button__leftIcon":"_button__leftIcon_474wk_124","button__rightIcon":"_button__rightIcon_474wk_125"}
+{"button":"_button_1kk5u_1","disabled":"_disabled_1kk5u_30","buttonType-muted":"_buttonType-muted_1kk5u_34","buttonType-primary":"_buttonType-primary_1kk5u_50","buttonType-negative":"_buttonType-negative_1kk5u_71","buttonSize-xxs":"_buttonSize-xxs_1kk5u_88","buttonSize-xs":"_buttonSize-xs_1kk5u_93","buttonSize-s":"_buttonSize-s_1kk5u_98","buttonSize-m":"_buttonSize-m_1kk5u_103","buttonSize-l":"_buttonSize-l_1kk5u_108","buttonSize-xl":"_buttonSize-xl_1kk5u_113","fullWidth":"_fullWidth_1kk5u_118","button__leftIcon":"_button__leftIcon_1kk5u_124","button__rightIcon":"_button__rightIcon_1kk5u_125"}