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

package/src/Canvas/styles.module.css

@@ -30,13 +30,13 @@
   --darker-border-color-rgb-components: 215, 215, 215;
   --darker-border-color: var(--color--border-hover);
   --alert-color-rgb-components: 255, 94, 73;
-  --alert-color: var(--color--feedback-fail--ink);
+  --alert-color: var(--color--ink-danger);
   --warning-color-rgb-components: 255, 215, 0;
-  --warning-color: var(--color--feedback-warning--ink);
+  --warning-color: var(--color--ink-warning);
   --notice-color-rgb-components: 70, 215, 0;
-  --notice-color: var(--color--feedback-success--ink);
+  --notice-color: var(--color--ink-success);
   --warning-bg-color-rgb-components: 255, 255, 229;
-  --warning-bg-color: var(--color--feedback-warning--surface);
+  --warning-bg-color: var(--color--warning-soft--surface);
   --add-color-rgb-components: 76, 176, 109;
   --add-color: var(--color--diff-added--surface);
   --remove-color-rgb-components: 235, 87, 106;

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

@@ -1 +1 @@
-{"themeVariables":"_themeVariables_1evrh_1","canvas":"_canvas_1evrh_85"}
+{"themeVariables":"_themeVariables_1oghx_1","canvas":"_canvas_1oghx_85"}

package/src/Dropdown/styles.module.css

@@ -40,7 +40,7 @@
   &:focus {
     outline: 0;
     border-color: var(--color--focus--border);
-    box-shadow: 0 0 0 3px var(--color--focus--outline);
+    box-shadow: 0 0 0 4px var(--color--focus--outline);
   }
 }
 
@@ -51,7 +51,7 @@
 
 .Dropdown__menu {
   min-width: 200px;
-  background-color: var(--color--raised--surface);
+  background-color: var(--color--surface-raised);
   box-shadow: var(--shadow--floating);
   border-radius: 4px;
   margin-bottom: var(--spacing-xl);
@@ -120,10 +120,10 @@
 }
 
 .Dropdown__menu__option--is-dangerous {
-  color: var(--color--feedback-fail--ink);
+  color: var(--color--danger--ink);
 
   svg {
-    fill: var(--color--feedback-fail--ink);
+    fill: var(--color--danger--ink);
   }
 
   &:hover,
@@ -241,9 +241,9 @@
 }
 
 .Dropdown__menu__option__icon--delete {
-  color: var(--color--feedback-fail--ink);
+  color: var(--color--danger--ink);
   svg {
-    fill: var(--color--feedback-fail--ink);
+    fill: var(--color--danger--ink);
   }
 }
 

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

@@ -1 +1 @@
-{"Dropdown":"_Dropdown_1bzh8_1","Dropdown__spacer":"_Dropdown__spacer_1bzh8_5","Dropdown__menu__search":"_Dropdown__menu__search_1bzh8_11","Dropdown__menu__search__input":"_Dropdown__menu__search__input_1bzh8_16","Dropdown__menu-container":"_Dropdown__menu-container_1bzh8_47","Dropdown__menu":"_Dropdown__menu_1bzh8_11","Dropdown__menu__inner":"_Dropdown__menu__inner_1bzh8_63","Dropdown__menu__group__title":"_Dropdown__menu__group__title_1bzh8_67","Dropdown__menu__group__content":"_Dropdown__menu__group__content_1bzh8_75","Dropdown__menu__text":"_Dropdown__menu__text_1bzh8_79","Dropdown__menu__option":"_Dropdown__menu__option_1bzh8_88","Dropdown__menu__option--is-selected":"_Dropdown__menu__option--is-selected_1bzh8_110","Dropdown__menu__option--is-disabled":"_Dropdown__menu__option--is-disabled_1bzh8_114","Dropdown__menu__option__content":"_Dropdown__menu__option__content_1bzh8_117","Dropdown__menu__option--is-dangerous":"_Dropdown__menu__option--is-dangerous_1bzh8_122","Dropdown__menu__option--is-active":"_Dropdown__menu__option--is-active_1bzh8_140","Dropdown__menu__option--is-valid":"_Dropdown__menu__option--is-valid_1bzh8_149","Dropdown__menu__option--is-invalid":"_Dropdown__menu__option--is-invalid_1bzh8_153","Dropdown__menu__option__icons":"_Dropdown__menu__option__icons_1bzh8_196","Dropdown__menu__option__icon":"_Dropdown__menu__option__icon_1bzh8_196","Dropdown__menu__option__icon--delete":"_Dropdown__menu__option__icon--delete_1bzh8_243","Dropdown__menu__separator":"_Dropdown__menu__separator_1bzh8_250"}
+{"Dropdown":"_Dropdown_1mqss_1","Dropdown__spacer":"_Dropdown__spacer_1mqss_5","Dropdown__menu__search":"_Dropdown__menu__search_1mqss_11","Dropdown__menu__search__input":"_Dropdown__menu__search__input_1mqss_16","Dropdown__menu-container":"_Dropdown__menu-container_1mqss_47","Dropdown__menu":"_Dropdown__menu_1mqss_11","Dropdown__menu__inner":"_Dropdown__menu__inner_1mqss_63","Dropdown__menu__group__title":"_Dropdown__menu__group__title_1mqss_67","Dropdown__menu__group__content":"_Dropdown__menu__group__content_1mqss_75","Dropdown__menu__text":"_Dropdown__menu__text_1mqss_79","Dropdown__menu__option":"_Dropdown__menu__option_1mqss_88","Dropdown__menu__option--is-selected":"_Dropdown__menu__option--is-selected_1mqss_110","Dropdown__menu__option--is-disabled":"_Dropdown__menu__option--is-disabled_1mqss_114","Dropdown__menu__option__content":"_Dropdown__menu__option__content_1mqss_117","Dropdown__menu__option--is-dangerous":"_Dropdown__menu__option--is-dangerous_1mqss_122","Dropdown__menu__option--is-active":"_Dropdown__menu__option--is-active_1mqss_140","Dropdown__menu__option--is-valid":"_Dropdown__menu__option--is-valid_1mqss_149","Dropdown__menu__option--is-invalid":"_Dropdown__menu__option--is-invalid_1mqss_153","Dropdown__menu__option__icons":"_Dropdown__menu__option__icons_1mqss_196","Dropdown__menu__option__icon":"_Dropdown__menu__option__icon_1mqss_196","Dropdown__menu__option__icon--delete":"_Dropdown__menu__option__icon--delete_1mqss_243","Dropdown__menu__separator":"_Dropdown__menu__separator_1mqss_250"}

package/src/FieldError/styles.module.css

@@ -1,5 +1,5 @@
 .fieldError {
-  color: var(--color--feedback-fail--ink);
+  color: var(--color--ink-danger);
   line-height: 1.2;
   font-size: var(--font-size-xs);
   margin-top: var(--spacing-s);

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

@@ -1 +1 @@
-{"fieldError":"_fieldError_93pv2_1"}
+{"fieldError":"_fieldError_kqzsn_1"}

package/src/FormLabel/styles.module.css

@@ -12,7 +12,7 @@
 }
 
 .formLabel--error {
-  color: var(--color--feedback-fail--ink);
+  color: var(--color--ink-danger);
 }
 
 .formLabel__label {

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

@@ -1 +1 @@
-{"formLabel":"_formLabel_1qzmk_1","formLabel__code":"_formLabel__code_1qzmk_8","formLabel--error":"_formLabel--error_1qzmk_14","formLabel__label":"_formLabel__label_1qzmk_18","formLabel__required":"_formLabel__required_1qzmk_30"}
+{"formLabel":"_formLabel_12h4v_1","formLabel__code":"_formLabel__code_12h4v_8","formLabel--error":"_formLabel--error_12h4v_14","formLabel__label":"_formLabel__label_12h4v_18","formLabel__required":"_formLabel__required_12h4v_30"}

package/src/HotKey/styles.module.css

@@ -17,6 +17,6 @@
 
 .hotKeyKey {
   padding: 5px 8px;
-  background: var(--color--tinted--surface);
+  background: var(--color--primary-soft--surface);
   border-radius: 3px;
 }

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

@@ -1 +1 @@
-{"hotKey":"_hotKey_hlj7l_1","label":"_label_hlj7l_7","keys":"_keys_hlj7l_12","hotKeyKey":"_hotKeyKey_hlj7l_18"}
+{"hotKey":"_hotKey_17bh5_1","label":"_label_17bh5_7","keys":"_keys_17bh5_12","hotKeyKey":"_hotKeyKey_17bh5_18"}

package/src/Section/index.tsx

@@ -75,27 +75,28 @@ export function Section({
       className={cn(s.Section, { [s['Section--highlighted']]: highlighted })}
     >
       <div
-        className={cn(s.Section__header, headerClassName)}
+        className={cn(
+          s.Section__header,
+          { [s['Section__header--clickable']]: collapsible },
+          headerClassName,
+        )}
         style={headerStyle}
+        onClick={collapsible ? collapsible.onToggle : undefined}
       >
         <div
-          className={cn(
-            s.Section__title,
-
-            titleClassName,
-          )}
+          className={cn(s.Section__title, titleClassName)}
           style={titleStyle}
         >
-          {collapsible && (
-            <button
-              type="button"
-              className={cn(s.Section__arrow, {
-                [s['Section__arrow--is-open']]: collapsible.isOpen,
-              })}
-              onClick={collapsible.onToggle}
-            />
-          )}
-          <div className={s.Section__title__content}>{title}</div>
+          <span className={s.Section__title__content}>
+            {collapsible && (
+              <div
+                className={cn(s.Section__arrow, {
+                  [s['Section__arrow--is-open']]: collapsible.isOpen,
+                })}
+              />
+            )}
+            {title}
+          </span>
         </div>
       </div>
       {(!collapsible || collapsible.isOpen) && children}

package/src/Section/styles.module.css

@@ -1,5 +1,8 @@
 .Section {
   position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-m);
 }
 
 .Section--highlighted:before {
@@ -19,44 +22,51 @@
 .Section__header {
   margin-left: var(--negative-spacing-l);
   margin-right: var(--negative-spacing-l);
-  margin-bottom: var(--spacing-l);
-  position: relative;
+}
 
-  &:before {
-    content: '';
-    display: block;
-    position: absolute;
-    top: 50%;
-    left: 0;
-    right: 0;
-    height: 1px;
-    background-color: var(--color--border);
-    z-index: 1;
+.Section__header--clickable {
+  cursor: pointer;
+  user-select: none;
+
+  &:hover .Section__arrow:before {
+    opacity: 0.7;
   }
 }
 
 .Section__title {
-  font-size: var(--font-size-l);
-  font-weight: var(--font-weight-bold);
-  margin-left: var(--spacing-m);
-  margin-right: var(--spacing-l);
-  padding-left: var(--spacing-m);
-  padding-right: var(--spacing-m);
-  background-color: var(--color--surface);
-  position: relative;
-  z-index: 2;
-  display: inline-flex;
+  display: flex;
+  gap: var(--spacing-m);
   align-items: center;
+
+  &:before,
+  &:after {
+    height: 1px;
+    content: '';
+    background-color: var(--color--border);
+  }
+
+  &:before {
+    width: calc(var(--spacing-l) - var(--spacing-m));
+  }
+
+  &:after {
+    flex: 1;
+    margin-right: var(--spacing-l);
+  }
 }
 
 .Section__title__content {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  font-size: var(--font-size-l);
+  font-weight: var(--font-weight-bold);
 }
 
 .Section__arrow {
-  all: initial;
+  position: relative;
   width: 15px;
   align-self: stretch;
-  cursor: pointer;
   margin-right: 0.3em;
 
   &:before {
@@ -67,16 +77,12 @@
     border-top: 6px solid transparent;
     border-bottom: 6px solid transparent;
     border-left: 6px solid var(--color--ink);
-    left: 14px;
+    left: 6px;
     top: 50%;
     margin-top: -6px;
     transition: transform 0.2s ease-out;
     transform-origin: 50% 50%;
   }
-
-  &:hover:before {
-    opacity: 0.7;
-  }
 }
 
 .Section__arrow--is-open:before {

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

@@ -1 +1 @@
-{"Section":"_Section_17d0k_1","Section--highlighted":"_Section--highlighted_17d0k_5","pageContentSectionHighligh":"_pageContentSectionHighligh_17d0k_1","Section__header":"_Section__header_17d0k_19","Section__title":"_Section__title_17d0k_38","Section__title__content":"_Section__title__content_17d0k_52","Section__arrow":"_Section__arrow_17d0k_55","Section__arrow--is-open":"_Section__arrow--is-open_17d0k_82"}
+{"Section":"_Section_12uz1_1","Section--highlighted":"_Section--highlighted_12uz1_8","pageContentSectionHighligh":"_pageContentSectionHighligh_12uz1_1","Section__header":"_Section__header_12uz1_22","Section__header--clickable":"_Section__header--clickable_12uz1_27","Section__arrow":"_Section__arrow_12uz1_31","Section__title":"_Section__title_12uz1_36","Section__title__content":"_Section__title__content_12uz1_58","Section__arrow--is-open":"_Section__arrow--is-open_12uz1_88"}

package/src/SelectInput/index.tsx

@@ -56,19 +56,19 @@ const useStyles = (isDisabled?: boolean, error?: boolean) => {
           return {
             ...result,
             borderColor: error
-              ? 'var(--color--feedback-fail--border)'
+              ? 'var(--color--danger-soft--border)'
               : 'var(--color--focus--border)',
             backgroundColor: isDisabled
               ? 'var(--color--disabled--surface)'
               : 'var(--color--surface)',
-            boxShadow: `0 0 0 3px ${
+            boxShadow: `0 0 0 4px ${
               error
-                ? 'var(--color--feedback-fail--outline)'
+                ? 'var(--color--danger-soft--outline)'
                 : 'var(--color--focus--outline)'
             }`,
             '&:hover': {
               borderColor: error
-                ? 'var(--color--feedback-fail--border)'
+                ? 'var(--color--danger-soft--border)'
                 : 'var(--color--focus--border)',
             },
           };
@@ -77,14 +77,14 @@ const useStyles = (isDisabled?: boolean, error?: boolean) => {
         return {
           ...result,
           borderColor: error
-            ? 'var(--color--feedback-fail--border)'
+            ? 'var(--color--danger-soft--border)'
             : 'var(--color--border)',
           backgroundColor: isDisabled
             ? 'var(--color--disabled--surface)'
             : 'var(--color--surface)',
           '&:hover': {
             borderColor: error
-              ? 'var(--color--feedback-fail--border)'
+              ? 'var(--color--danger-soft--border)'
               : 'var(--color--border-hover)',
           },
         };
@@ -92,10 +92,10 @@ const useStyles = (isDisabled?: boolean, error?: boolean) => {
       multiValueRemove: (provided) => ({
         ...provided,
         cursor: 'pointer',
-        color: 'var(--color--tinted--ink)',
+        color: 'var(--color--primary-soft--ink)',
         ':hover': {
-          backgroundColor: 'var(--color--tinted--surface-hover)',
-          color: 'var(--color--tinted--ink)',
+          backgroundColor: 'var(--color--primary-soft--surface-hover)',
+          color: 'var(--color--primary-soft--ink)',
         },
       }),
       menu: (provided) => {
@@ -103,7 +103,7 @@ const useStyles = (isDisabled?: boolean, error?: boolean) => {
           ...provided,
           zIndex: 1000,
           minWidth: 250,
-          backgroundColor: 'var(--color--raised--surface)',
+          backgroundColor: 'var(--color--surface-raised)',
           boxShadow: 'var(--shadow--floating)',
         };
       },
@@ -132,7 +132,7 @@ const useStyles = (isDisabled?: boolean, error?: boolean) => {
         return {
           ...provided,
           zIndex: 100,
-          backgroundColor: 'var(--color--tinted--surface)',
+          backgroundColor: 'var(--color--primary-soft--surface)',
           userSelect: 'none',
         };
       },
@@ -140,7 +140,7 @@ const useStyles = (isDisabled?: boolean, error?: boolean) => {
         ...provided,
         fontSize: 'inherit',
         padding: 3,
-        color: 'var(--color--tinted--ink)',
+        color: 'var(--color--primary-soft--ink)',
       }),
     };
   }, [isDisabled, error]);

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

@@ -13,7 +13,7 @@
 
 .SplitViewSash:hover,
 .SplitViewSash--dragging {
-  background-color: var(--color--tinted--surface);
+  background-color: var(--color--primary-soft--surface);
 }
 
 .SplitViewSash:hover:has(.SplitViewSash__content:hover),

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

@@ -1 +1 @@
-{"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"}
+{"SplitViewSash":"_SplitViewSash_9ds0h_1","SplitViewSash--dragging":"_SplitViewSash--dragging_9ds0h_15","SplitViewSash__content":"_SplitViewSash__content_9ds0h_19","SplitViewSash--no-resize":"_SplitViewSash--no-resize_9ds0h_24","SplitViewSash--vertical":"_SplitViewSash--vertical_9ds0h_28","SplitViewSash--horizontal":"_SplitViewSash--horizontal_9ds0h_32","SplitViewSash__content__button":"_SplitViewSash__content__button_9ds0h_46"}

package/src/TextInput/styles.module.css

@@ -25,7 +25,7 @@
   &:focus {
     outline: 0;
     border-color: var(--color--focus--border);
-    box-shadow: 0 0 0 3px var(--color--focus--outline);
+    box-shadow: 0 0 0 4px var(--color--focus--outline);
   }
 }
 
@@ -41,14 +41,14 @@
 }
 
 .TextInput--error {
-  border-color: var(--color--feedback-fail--border);
+  border-color: var(--color--danger-soft--border);
 
   &:hover,
   &:focus {
-    border-color: var(--color--feedback-fail--border);
+    border-color: var(--color--danger-soft--border);
   }
 
   &:focus {
-    box-shadow: 0 0 0 3px var(--color--feedback-fail--outline);
+    box-shadow: 0 0 0 4px var(--color--danger-soft--outline);
   }
 }

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

@@ -1 +1 @@
-{"TextInput":"_TextInput_it0d0_1","TextInput--monospaced":"_TextInput--monospaced_it0d0_32","TextInput--disabled":"_TextInput--disabled_it0d0_37","TextInput--error":"_TextInput--error_it0d0_43"}
+{"TextInput":"_TextInput_1kqkh_1","TextInput--monospaced":"_TextInput--monospaced_1kqkh_32","TextInput--disabled":"_TextInput--disabled_1kqkh_37","TextInput--error":"_TextInput--error_1kqkh_43"}

package/src/TextareaInput/styles.module.css

@@ -25,7 +25,7 @@
   &:focus {
     outline: 0;
     border-color: var(--color--focus--border);
-    box-shadow: 0 0 0 3px var(--color--focus--outline);
+    box-shadow: 0 0 0 4px var(--color--focus--outline);
   }
 }
 
@@ -41,14 +41,14 @@
 }
 
 .TextareaInput--error {
-  border-color: var(--color--feedback-fail--border);
+  border-color: var(--color--danger-soft--border);
 
   &:hover,
   &:focus {
-    border-color: var(--color--feedback-fail--border);
+    border-color: var(--color--danger-soft--border);
   }
 
   &:focus {
-    box-shadow: 0 0 0 3px var(--color--feedback-fail--outline);
+    box-shadow: 0 0 0 4px var(--color--danger-soft--outline);
   }
 }

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

@@ -1 +1 @@
-{"TextareaInput":"_TextareaInput_3v51p_1","TextareaInput--monospaced":"_TextareaInput--monospaced_3v51p_32","TextareaInput--disabled":"_TextareaInput--disabled_3v51p_37","TextareaInput--error":"_TextareaInput--error_3v51p_43"}
+{"TextareaInput":"_TextareaInput_1xr0a_1","TextareaInput--monospaced":"_TextareaInput--monospaced_1xr0a_32","TextareaInput--disabled":"_TextareaInput--disabled_1xr0a_37","TextareaInput--error":"_TextareaInput--error_1xr0a_43"}

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

@@ -0,0 +1,5 @@
+{
+  "Badge": "_Badge_6qzz8_1",
+  "Badge--accent": "_Badge--accent_6qzz8_13",
+  "Badge--enterprise": "_Badge--enterprise_6qzz8_18"
+}

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

@@ -0,0 +1,4 @@
+{
+  "DotsDropdown": "_DotsDropdown_1no0l_1",
+  "DotsDropdown--open": "_DotsDropdown--open_1no0l_23"
+}

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

@@ -0,0 +1 @@
+{ "GoBack": "_GoBack_th663_1" }

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

@@ -0,0 +1 @@
+{ "Pagination": "_Pagination_13njh_1" }

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

@@ -0,0 +1,5 @@
+{
+  "PrimaryButton": "_PrimaryButton_1mqcx_1",
+  "PrimaryButton__main": "_PrimaryButton__main_1mqcx_6",
+  "PrimaryButton__caret": "_PrimaryButton__caret_1mqcx_11"
+}

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

@@ -0,0 +1 @@
+{ "Space": "_Space_oaqyk_1" }

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

@@ -0,0 +1 @@
+{ "Subtitle": "_Subtitle_1pjsy_1" }

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

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

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

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

package/src/base.css

@@ -87,3 +87,20 @@ body {
   padding: 0;
   margin: 0;
 }
+
+/**
+ * Theme the page-level (viewport) scrollbar to match the canvas.
+ *
+ * `html`/`body` live outside the `Canvas` wrapper, so they don't inherit the
+ * canvas color variables. The `Canvas` component mirrors the
+ * `--color--scrollbar--fill` token onto `document.documentElement` (see
+ * `Canvas/index.tsx`) so this rule can resolve it. `scrollbar-color` is
+ * inherited, so this also covers `body` and anything scrolling at the page
+ * level. Kept in a layer so a plugin developer's own unlayered
+ * `scrollbar-color` rule always wins, regardless of specificity.
+ */
+@layer datocms-react-ui {
+  html {
+    scrollbar-color: var(--color--scrollbar--fill) transparent;
+  }
+}

package/src/generateStyleFromCtx/index.ts

@@ -27,9 +27,9 @@ 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
+    // name (e.g. `--color--surface-raised`), 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,
+    ...ctx.cssDesignTokens,
   };
 }