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

package/src/SplitView/SplitViewSash/styles.module.css

@@ -3,7 +3,7 @@
   position: absolute;
   top: 0;
   transition: background-color 0.2s 0.15s;
-  background-color: rgba(var(--light-color-components), 0);
+  background-color: transparent;
   width: 100%;
   z-index: 2;
   display: flex;
@@ -13,7 +13,7 @@
 
 .SplitViewSash:hover,
 .SplitViewSash--dragging {
-  background-color: var(--light-color);
+  background-color: var(--color--tinted--surface);
 }
 
 .SplitViewSash:hover:has(.SplitViewSash__content:hover),
@@ -47,14 +47,14 @@
   width: 20px;
   height: 20px;
   border-radius: 6px;
-  border: 1px solid var(--border-color);
-  background: white;
+  border: 1px solid var(--color--border);
+  background: var(--color--surface);
   z-index: 2;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 10px;
-  color: var(--light-body-color);
+  color: var(--color--ink-subtle);
 }
 
 .SplitViewSash__content__button svg {
@@ -63,6 +63,6 @@
 }
 
 .SplitViewSash__content:hover .SplitViewSash__content__button {
-  background: var(--light-bg-color);
-  color: var(--base-body-color);
+  background: var(--color--surface-hover);
+  color: var(--color--ink);
 }

package/src/SplitView/SplitViewSash/styles.module.css.json

@@ -1 +1 @@
-{"SplitViewSash":"_SplitViewSash_tds51_1","SplitViewSash--dragging":"_SplitViewSash--dragging_tds51_15","SplitViewSash__content":"_SplitViewSash__content_tds51_19","SplitViewSash--no-resize":"_SplitViewSash--no-resize_tds51_24","SplitViewSash--vertical":"_SplitViewSash--vertical_tds51_28","SplitViewSash--horizontal":"_SplitViewSash--horizontal_tds51_32","SplitViewSash__content__button":"_SplitViewSash__content__button_tds51_46"}
+{"SplitViewSash":"_SplitViewSash_5k1ng_1","SplitViewSash--dragging":"_SplitViewSash--dragging_5k1ng_15","SplitViewSash__content":"_SplitViewSash__content_5k1ng_19","SplitViewSash--no-resize":"_SplitViewSash--no-resize_5k1ng_24","SplitViewSash--vertical":"_SplitViewSash--vertical_5k1ng_28","SplitViewSash--horizontal":"_SplitViewSash--horizontal_5k1ng_32","SplitViewSash__content__button":"_SplitViewSash__content__button_5k1ng_46"}

package/src/SwitchField/styles.module.css

@@ -16,7 +16,7 @@
   -ms-user-select: text;
   user-select: text;
   margin-bottom: 0;
-  color: var(--base-body-color);
+  color: var(--color--ink);
 }
 
 .switchField__below {

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

@@ -1 +1 @@
-{"switchField__flex":"_switchField__flex_16z4j_1","switchField__switchInput":"_switchField__switchInput_16z4j_6","switchField__label":"_switchField__label_16z4j_10","switchField__below":"_switchField__below_16z4j_22"}
+{"switchField__flex":"_switchField__flex_ietsf_1","switchField__switchInput":"_switchField__switchInput_ietsf_6","switchField__label":"_switchField__label_ietsf_10","switchField__below":"_switchField__below_ietsf_22"}

package/src/SwitchInput/styles.module.css

@@ -1,8 +1,9 @@
 .switchInput__inner {
-  color: #fff;
+  color: var(--color--primary--ink);
   font-size: 12px;
   position: absolute;
   left: 24px;
+  transition: left 0.3s cubic-bezier(0.35, 0, 0.25, 1);
 }
 
 .switchInput {
@@ -14,8 +15,8 @@
   line-height: 20px;
   vertical-align: middle;
   border-radius: 20px 20px;
-  border: 1px solid #ccc;
-  background-color: #ccc;
+  border: 1px solid var(--color--border);
+  background-color: var(--color--ink-muted);
   cursor: pointer;
   transition: all 0.3s cubic-bezier(0.35, 0, 0.25, 1);
 
@@ -26,18 +27,20 @@
     left: 2px;
     top: 1px;
     border-radius: 50% 50%;
-    background-color: #ffffff;
+    background-color: var(--color--surface);
     content: ' ';
     cursor: pointer;
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
+    box-shadow: var(--shadow--raised);
     transform: scale(1);
-    transition: left 0.3s cubic-bezier(0.35, 0, 0.25, 1);
+    transition:
+      left 0.3s cubic-bezier(0.35, 0, 0.25, 1),
+      transform 0.3s cubic-bezier(0.35, 0, 0.25, 1);
     animation-timing-function: cubic-bezier(0.35, 0, 0.25, 1);
     animation-duration: 0.3s;
     animation-name: switchInput__off;
   }
 
-  &:hover,
+  &:hover:after,
   &:focus:after {
     transform: scale(1.1);
     animation-name: switchInput__on;
@@ -45,8 +48,7 @@
 }
 
 .switchInput__checked {
-  border: 1px solid var(--accent-color);
-  background-color: var(--accent-color);
+  background-color: var(--color--primary--surface);
 
   .switchInput__inner {
     left: 6px;
@@ -59,16 +61,16 @@
 
 .switchInput__disabled {
   cursor: no-drop;
-  background: #ccc;
-  border-color: #ccc;
+  background: var(--color--disabled--surface);
+  border-color: var(--color--border);
 
   &:after {
-    background: #9e9e9e;
+    background: var(--color--disabled--ink);
     animation-name: none;
     cursor: no-drop;
   }
 
-  &:hover,
+  &:hover:after,
   &:focus:after {
     transform: scale(1);
     animation-name: none;

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

@@ -1 +1 @@
-{"switchInput__inner":"_switchInput__inner_1knbg_1","switchInput":"_switchInput_1knbg_1","switchInput__off":"_switchInput__off_1knbg_1","switchInput__on":"_switchInput__on_1knbg_1","switchInput__checked":"_switchInput__checked_1knbg_47","switchInput__disabled":"_switchInput__disabled_1knbg_60","none":"_none_1knbg_1"}
+{"switchInput__inner":"_switchInput__inner_11cgl_1","switchInput":"_switchInput_11cgl_1","switchInput__off":"_switchInput__off_11cgl_1","switchInput__on":"_switchInput__on_11cgl_1","switchInput__checked":"_switchInput__checked_11cgl_50","switchInput__disabled":"_switchInput__disabled_11cgl_62","none":"_none_11cgl_1"}

package/src/TextInput/styles.module.css

@@ -3,27 +3,29 @@
   box-sizing: border-box;
   width: 100%;
   padding: 10px;
-  border: 1px solid var(--border-color);
+  border: 1px solid var(--color--border);
   appearance: none;
   border-radius: 0;
+  background-color: var(--color--surface);
   background-image: none;
   transition: border 0.2s var(--material-ease);
   font-size: var(--font-size-m);
   resize: none;
   font-family: inherit;
+  color: inherit;
 
   &::placeholder {
-    color: var(--placeholder-body-color);
+    color: var(--color--ink-placeholder);
   }
 
   &:hover {
-    border-color: var(--darker-border-color);
+    border-color: var(--color--border-hover);
   }
 
   &:focus {
     outline: 0;
-    border-color: var(--accent-color);
-    box-shadow: 0 0 0 3px var(--semi-transparent-accent-color);
+    border-color: var(--color--focus--border);
+    box-shadow: 0 0 0 3px var(--color--focus--outline);
   }
 }
 
@@ -33,20 +35,20 @@
 }
 
 .TextInput--disabled {
-  color: var(--light-body-color);
-  border-color: var(--border-color);
-  background: var(--lighter-bg-color);
+  color: var(--color--disabled--ink);
+  border-color: var(--color--border);
+  background: var(--color--disabled--surface);
 }
 
 .TextInput--error {
-  border-color: var(--alert-color);
+  border-color: var(--color--feedback-fail--border);
 
   &:hover,
   &:focus {
-    border-color: var(--alert-color);
+    border-color: var(--color--feedback-fail--border);
   }
 
   &:focus {
-    box-shadow: 0 0 0 3px rgba(var(--alert-color-rgb-components), 0.2);
+    box-shadow: 0 0 0 3px var(--color--feedback-fail--outline);
   }
 }

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

@@ -1 +1 @@
-{"TextInput":"_TextInput_x2oj2_1","TextInput--monospaced":"_TextInput--monospaced_x2oj2_30","TextInput--disabled":"_TextInput--disabled_x2oj2_35","TextInput--error":"_TextInput--error_x2oj2_41"}
+{"TextInput":"_TextInput_it0d0_1","TextInput--monospaced":"_TextInput--monospaced_it0d0_32","TextInput--disabled":"_TextInput--disabled_it0d0_37","TextInput--error":"_TextInput--error_it0d0_43"}

package/src/TextareaInput/styles.module.css

@@ -3,27 +3,29 @@
   box-sizing: border-box;
   width: 100%;
   padding: 10px;
-  border: 1px solid var(--border-color);
+  border: 1px solid var(--color--border);
   appearance: none;
   border-radius: 0;
+  background-color: var(--color--surface);
   background-image: none;
   transition: border 0.2s var(--material-ease);
   font-size: var(--font-size-m);
   resize: none;
   font-family: inherit;
+  color: inherit;
 
   &::placeholder {
-    color: var(--placeholder-body-color);
+    color: var(--color--ink-placeholder);
   }
 
   &:hover {
-    border-color: var(--darker-border-color);
+    border-color: var(--color--border-hover);
   }
 
   &:focus {
     outline: 0;
-    border-color: var(--accent-color);
-    box-shadow: 0 0 0 3px var(--semi-transparent-accent-color);
+    border-color: var(--color--focus--border);
+    box-shadow: 0 0 0 3px var(--color--focus--outline);
   }
 }
 
@@ -33,20 +35,20 @@
 }
 
 .TextareaInput--disabled {
-  color: var(--light-body-color);
-  border-color: var(--border-color);
-  background: var(--lighter-bg-color);
+  color: var(--color--disabled--ink);
+  border-color: var(--color--border);
+  background: var(--color--disabled--surface);
 }
 
 .TextareaInput--error {
-  border-color: var(--alert-color);
+  border-color: var(--color--feedback-fail--border);
 
   &:hover,
   &:focus {
-    border-color: var(--alert-color);
+    border-color: var(--color--feedback-fail--border);
   }
 
   &:focus {
-    box-shadow: 0 0 0 3px rgba(var(--alert-color-rgb-components), 0.2);
+    box-shadow: 0 0 0 3px var(--color--feedback-fail--outline);
   }
 }

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

@@ -1 +1 @@
-{"TextareaInput":"_TextareaInput_1wnu9_1","TextareaInput--monospaced":"_TextareaInput--monospaced_1wnu9_30","TextareaInput--disabled":"_TextareaInput--disabled_1wnu9_35","TextareaInput--error":"_TextareaInput--error_1wnu9_41"}
+{"TextareaInput":"_TextareaInput_3v51p_1","TextareaInput--monospaced":"_TextareaInput--monospaced_3v51p_32","TextareaInput--disabled":"_TextareaInput--disabled_3v51p_37","TextareaInput--error":"_TextareaInput--error_3v51p_43"}

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

@@ -3,7 +3,7 @@
   cursor: pointer;
   line-height: inherit;
   background-color: transparent;
-  color: var(--base-body-color);
+  color: var(--color--ink);
   -webkit-appearance: none;
   -moz-appearance: none;
   box-sizing: border-box;
@@ -14,13 +14,13 @@
   justify-content: center;
   width: 49px;
   min-height: 49px;
-  border-left: 1px solid var(--border-color);
-  border-right: 1px solid var(--border-color);
+  border-left: 1px solid var(--color--border);
+  border-right: 1px solid var(--color--border);
 }
 
 .Button:hover,
 .Button:focus {
-  background-color: var(--light-bg-color);
+  background-color: var(--color--surface-hover);
 }
 
 .Button:first-child {

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

@@ -1 +1 @@
-{"Button":"_Button_fy6g6_1"}
+{"Button":"_Button_36kvr_1"}

package/src/Toolbar/Toolbar/index.tsx

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

package/src/Toolbar/Toolbar/styles.module.css

@@ -1,7 +1,7 @@
 .Toolbar {
   display: flex;
-  border-bottom: 1px solid var(--border-color);
-  border-top: 1px solid var(--border-color);
+  border-bottom: 1px solid var(--color--border);
+  border-top: 1px solid var(--color--border);
   align-items: stretch;
   position: relative;
 }

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

@@ -1 +1 @@
-{"Toolbar":"_Toolbar_1cwb8_1"}
+{"Toolbar":"_Toolbar_50246_1"}

package/src/Tooltip/TooltipContent/styles.module.css

@@ -1,7 +1,7 @@
 .tooltip {
   padding: 10px 15px;
-  box-shadow: 0 1px 9px rgba(0, 0, 0, 0.2);
-  background: white;
+  box-shadow: var(--shadow--raised);
+  background: var(--color--raised--surface);
   border-radius: 4px;
   max-width: 400px;
   word-wrap: break-word;

package/src/Tooltip/TooltipContent/styles.module.css.json

@@ -1 +1 @@
-{"tooltip":"_tooltip_3z5rn_1"}
+{"tooltip":"_tooltip_rsbox_1"}

package/src/Tooltip/TooltipDelayGroup/index.tsx

@@ -87,8 +87,8 @@ export 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/src/VerticalSplit/index.tsx

@@ -61,7 +61,7 @@ function calculateSizes({
  *           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>
@@ -108,7 +108,7 @@ function calculateSizes({
  *           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>
@@ -168,7 +168,7 @@ function calculateSizes({
  *                display: 'flex',
  *                flexDirection: 'column',
  *                height: '100%',
- *                borderLeft: '1px solid var(--border-color)',
+ *                borderLeft: '1px solid var(--color--border)',
  *              }}
  *            >
  *              <Toolbar>
@@ -233,7 +233,7 @@ function calculateSizes({
  *                display: 'flex',
  *                flexDirection: 'column',
  *                height: '100%',
- *                borderLeft: '1px solid var(--border-color)',
+ *                borderLeft: '1px solid var(--color--border)',
  *              }}
  *            >
  *              <Toolbar>

package/src/VerticalSplit/styles.module.css

@@ -1,6 +1,6 @@
 .VerticalSplitPane__expand {
   transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
-  background: white;
+  background: var(--color--surface);
   cursor: pointer;
   position: absolute;
   top: 0;
@@ -10,12 +10,12 @@
 }
 
 .VerticalSplitPane__expand:hover {
-  background: var(--light-bg-color);
+  background: var(--color--surface-hover);
   animation: VerticalSplitPane__expand 0.6s cubic-bezier(0.55, 0, 0.1, 1);
 }
 
 .VerticalSplitPane__expand.VerticalSplitPane__expand {
-  border-right: 1px solid var(--border-color);
+  border-right: 1px solid var(--color--border);
   transform-origin: left;
 }
 
@@ -23,7 +23,7 @@
 }
 
 .VerticalSplitPane__expand.VerticalSplitPane__expand--right {
-  border-left: 1px solid var(--border-color);
+  border-left: 1px solid var(--color--border);
   transform-origin: right;
 }
 
@@ -45,11 +45,8 @@
   left: 0;
   right: 0;
   bottom: 0;
-  background: linear-gradient(
-    to bottom,
-    rgba(48, 48, 47, 0.5),
-    rgba(48, 48, 47, 0.3)
-  );
+  background: var(--color--backdrop--surface);
+  backdrop-filter: blur(4px);
   z-index: 12;
   height: 100%;
   overflow: hidden;
@@ -76,8 +73,8 @@
   position: absolute;
   top: 0;
   bottom: 0;
-  background: white;
-  box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
+  background: var(--color--surface);
+  box-shadow: var(--shadow--ambient);
 }
 
 .VerticalSplitPaneOverlay__secondary--left {

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

@@ -1 +1 @@
-{"VerticalSplitPane__expand":"_VerticalSplitPane__expand_80tii_1","VerticalSplitPane__expand--left":"_VerticalSplitPane__expand--left_80tii_22","VerticalSplitPane__expand--right":"_VerticalSplitPane__expand--right_80tii_25","VerticalSplitPaneOverlay":"_VerticalSplitPaneOverlay_80tii_42","VerticalSplitPaneOverlay__primary":"_VerticalSplitPaneOverlay__primary_80tii_58","VerticalSplitPaneOverlay__primary--left":"_VerticalSplitPaneOverlay__primary--left_80tii_67","VerticalSplitPaneOverlay__primary--right":"_VerticalSplitPaneOverlay__primary--right_80tii_71","VerticalSplitPaneOverlay__secondary":"_VerticalSplitPaneOverlay__secondary_80tii_75","VerticalSplitPaneOverlay__secondary--left":"_VerticalSplitPaneOverlay__secondary--left_80tii_83","VerticalSplitPaneOverlay__secondary--right":"_VerticalSplitPaneOverlay__secondary--right_80tii_87","VerticalSplitPaneOverlay__sash":"_VerticalSplitPaneOverlay__sash_80tii_91"}
+{"VerticalSplitPane__expand":"_VerticalSplitPane__expand_28erb_1","VerticalSplitPane__expand--left":"_VerticalSplitPane__expand--left_28erb_22","VerticalSplitPane__expand--right":"_VerticalSplitPane__expand--right_28erb_25","VerticalSplitPaneOverlay":"_VerticalSplitPaneOverlay_28erb_42","VerticalSplitPaneOverlay__primary":"_VerticalSplitPaneOverlay__primary_28erb_55","VerticalSplitPaneOverlay__primary--left":"_VerticalSplitPaneOverlay__primary--left_28erb_64","VerticalSplitPaneOverlay__primary--right":"_VerticalSplitPaneOverlay__primary--right_28erb_68","VerticalSplitPaneOverlay__secondary":"_VerticalSplitPaneOverlay__secondary_28erb_72","VerticalSplitPaneOverlay__secondary--left":"_VerticalSplitPaneOverlay__secondary--left_28erb_80","VerticalSplitPaneOverlay__secondary--right":"_VerticalSplitPaneOverlay__secondary--right_28erb_84","VerticalSplitPaneOverlay__sash":"_VerticalSplitPaneOverlay__sash_28erb_88"}

package/src/generateStyleFromCtx/index.ts

@@ -1,5 +1,5 @@
 import type { CSSProperties } from 'react';
-import { BaseCtx } from '../Canvas';
+import type { BaseCtx } from '../Canvas';
 
 function camelToDash(str: string) {
   if (str === str.toLowerCase()) {
@@ -16,6 +16,7 @@ export function generateStyleFromCtx(
     padding: noBodyPadding
       ? undefined
       : ctx.bodyPadding.map((p) => `${p}px`).join(' '),
+    // Legacy, deprecated color tokens
     ...Object.fromEntries(
       Object.entries(ctx.theme).flatMap(([k, v]) => [
         [`--${camelToDash(k)}`, v],
@@ -25,5 +26,10 @@ export function generateStyleFromCtx(
         ],
       ]),
     ),
+    // Semantic color tokens arrive keyed by their final CSS custom property
+    // name (e.g. `--color--raised--surface`), so they're applied verbatim. The
+    // SDK stays agnostic of the token vocabulary: whatever the host sends ends
+    // up on the canvas, and plugin CSS references it with `var(--…)`.
+    ...ctx.semanticColorTokensTheme,
   };
 }

package/src/icons.tsx

@@ -16,6 +16,7 @@ export function BackIcon({
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
+      fill="currentColor"
       viewBox="0 0 256 512"
       width={width}
       height={height}
@@ -36,6 +37,7 @@ export function SidebarLeftArrowIcon({
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
+      fill="currentColor"
       viewBox="0 0 448 512"
       width={width}
       height={height}
@@ -56,6 +58,7 @@ export function SidebarRightArrowIcon({
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
+      fill="currentColor"
       viewBox="0 0 448 512"
       width={width}
       height={height}
@@ -76,6 +79,7 @@ export function CaretDownIcon({
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
+      fill="currentColor"
       viewBox="0 0 320 512"
       width={width}
       height={height}
@@ -96,6 +100,7 @@ export function CaretUpIcon({
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
+      fill="currentColor"
       viewBox="0 0 320 512"
       width={width}
       height={height}
@@ -116,6 +121,7 @@ export function ChevronsLeftIcon({
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
+      fill="currentColor"
       viewBox="0 0 512 512"
       width={width}
       height={height}
@@ -136,6 +142,7 @@ export function ChevronsRightIcon({
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
+      fill="currentColor"
       viewBox="0 0 512 512"
       width={width}
       height={height}
@@ -156,6 +163,7 @@ export function SidebarFlipIcon({
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
+      fill="currentColor"
       viewBox="0 0 512 512"
       width={width}
       height={height}