datocms-plugin-sdk 2.2.0-alpha.1 → 2.2.0-alpha.3

package/manifest.json

@@ -3130,7 +3130,7 @@
           "theme": {
             "comment": {
               "markdownText": "An object containing the theme colors for the current DatoCMS project.",
-              "deprecatedMarkdownText": "Use `semanticColorTokensTheme` instead. This property is kept\nfor backward compatibility with third-party plugins."
+              "deprecatedMarkdownText": "Use `cssDesignTokens` instead. This property is kept\nfor backward compatibility with third-party plugins."
             },
             "location": {
               "filePath": "src/ctx/base.ts",
@@ -3138,7 +3138,7 @@
             },
             "type": "Theme"
           },
-          "semanticColorTokensTheme": {
+          "cssDesignTokens": {
             "comment": {
               "markdownText": "Semantic color tokens for the current DatoCMS project, pre-computed by\nthe host. A map of CSS custom property names (e.g.\n`--color--raised--surface`) to their resolved values for the current\ncolor scheme."
             },
@@ -3146,15 +3146,15 @@
               "filePath": "src/ctx/base.ts",
               "lineNumber": 119
             },
-            "type": "SemanticColorTokensTheme"
+            "type": "CssDesignTokens"
           },
           "colorScheme": {
             "comment": {
-              "markdownText": "The appearance color scheme the host CMS is currently using. Resolved —\n`'system'` is already expanded to `'light'` or `'dark'` by the host.\n\nThe SDK runtime reflects this onto `document.documentElement` as\n`data-theme=\"light\"` / `data-theme=\"dark\"` so plugin CSS can branch\nwith `[data-theme=\"dark\"] { … }` selectors. For non-CSS decisions\n(choosing a logo asset, a syntax-highlighting preset, …) branch on\n`ctx.colorScheme` directly."
+              "markdownText": "The appearance color scheme the host CMS is currently using. Resolved —\n`'system'` is already expanded to `'light'` or `'dark'` by the host.\n\nThe SDK runtime reflects this onto `document.documentElement` two ways:\nthe `data-color-scheme=\"light\"` / `data-color-scheme=\"dark\"` attribute,\nso plugin CSS can branch with `[data-color-scheme=\"dark\"] { … }`\nselectors; and the actual `color-scheme` CSS property, so `light-dark()`\nresolves to the correct branch (and native form controls / scrollbars\nmatch) everywhere in the plugin frame. For non-CSS decisions (choosing a\nlogo asset, a syntax-highlighting preset, …) branch on `ctx.colorScheme`\ndirectly."
             },
             "location": {
               "filePath": "src/ctx/base.ts",
-              "lineNumber": 131
+              "lineNumber": 134
             },
             "type": "'light' | 'dark'"
           }
@@ -3172,7 +3172,7 @@
             },
             "location": {
               "filePath": "src/ctx/base.ts",
-              "lineNumber": 141
+              "lineNumber": 144
             },
             "type": "Partial<Record<string, ItemType>>"
           },
@@ -3182,7 +3182,7 @@
             },
             "location": {
               "filePath": "src/ctx/base.ts",
-              "lineNumber": 148
+              "lineNumber": 151
             },
             "type": "Partial<Record<string, Field>>"
           },
@@ -3192,7 +3192,7 @@
             },
             "location": {
               "filePath": "src/ctx/base.ts",
-              "lineNumber": 155
+              "lineNumber": 158
             },
             "type": "Partial<Record<string, Fieldset>>"
           },
@@ -3202,7 +3202,7 @@
             },
             "location": {
               "filePath": "src/ctx/base.ts",
-              "lineNumber": 162
+              "lineNumber": 165
             },
             "type": "Partial<Record<string, User>>"
           },
@@ -3212,7 +3212,7 @@
             },
             "location": {
               "filePath": "src/ctx/base.ts",
-              "lineNumber": 169
+              "lineNumber": 172
             },
             "type": "Partial<Record<string, SsoUser>>"
           }
@@ -3233,7 +3233,7 @@
             },
             "location": {
               "filePath": "src/ctx/base.ts",
-              "lineNumber": 232
+              "lineNumber": 235
             },
             "type": "(itemTypeId: string) => Promise<Field[]>"
           },
@@ -3244,7 +3244,7 @@
             },
             "location": {
               "filePath": "src/ctx/base.ts",
-              "lineNumber": 251
+              "lineNumber": 254
             },
             "type": "(itemTypeId: string) => Promise<Fieldset[]>"
           },
@@ -3255,7 +3255,7 @@
             },
             "location": {
               "filePath": "src/ctx/base.ts",
-              "lineNumber": 268
+              "lineNumber": 271
             },
             "type": "() => Promise<Field[]>"
           },
@@ -3266,7 +3266,7 @@
             },
             "location": {
               "filePath": "src/ctx/base.ts",
-              "lineNumber": 281
+              "lineNumber": 284
             },
             "type": "() => Promise<User[]>"
           },
@@ -3277,7 +3277,7 @@
             },
             "location": {
               "filePath": "src/ctx/base.ts",
-              "lineNumber": 294
+              "lineNumber": 297
             },
             "type": "() => Promise<SsoUser[]>"
           }
@@ -3296,7 +3296,7 @@
             },
             "location": {
               "filePath": "src/ctx/base.ts",
-              "lineNumber": 316
+              "lineNumber": 319
             },
             "type": "(params: Record<string, unknown>) => Promise<void>"
           },
@@ -3307,7 +3307,7 @@
             },
             "location": {
               "filePath": "src/ctx/base.ts",
-              "lineNumber": 367
+              "lineNumber": 370
             },
             "type": "(\n    fieldId: string,\n    changes: FieldAppearanceChange[],\n  ) => Promise<void>"
           }
@@ -3326,7 +3326,7 @@
             },
             "location": {
               "filePath": "src/ctx/base.ts",
-              "lineNumber": 472
+              "lineNumber": 475
             },
             "type": "(message: string) => Promise<void>"
           },
@@ -3337,7 +3337,7 @@
             },
             "location": {
               "filePath": "src/ctx/base.ts",
-              "lineNumber": 487
+              "lineNumber": 490
             },
             "type": "(message: string) => Promise<void>"
           },
@@ -3348,7 +3348,7 @@
             },
             "location": {
               "filePath": "src/ctx/base.ts",
-              "lineNumber": 511
+              "lineNumber": 514
             },
             "type": "<CtaValue = unknown>(\n    toast: Toast<CtaValue>,\n  ) => Promise<CtaValue | null>"
           }
@@ -3367,7 +3367,7 @@
             },
             "location": {
               "filePath": "src/ctx/base.ts",
-              "lineNumber": 397
+              "lineNumber": 400
             },
             "type": "(itemTypeId: string) => Promise<Item | null>"
           },
@@ -3378,7 +3378,7 @@
             },
             "location": {
               "filePath": "src/ctx/base.ts",
-              "lineNumber": 418
+              "lineNumber": 421
             },
             "type": "{\n    (\n      itemTypeId: string,\n      options: { multiple: true; initialLocationQuery?: ItemListLocationQuery },\n    ): Promise<Item[] | null>;\n    (\n      itemTypeId: string,\n      options?: {\n        multiple: false;\n        initialLocationQuery?: ItemListLocationQuery;\n      },\n    ): Promise<Item | null>;\n  }"
           },
@@ -3389,7 +3389,7 @@
             },
             "location": {
               "filePath": "src/ctx/base.ts",
-              "lineNumber": 450
+              "lineNumber": 453
             },
             "type": "(itemId: string) => Promise<Item | null>"
           }
@@ -3408,7 +3408,7 @@
             },
             "location": {
               "filePath": "src/ctx/base.ts",
-              "lineNumber": 538
+              "lineNumber": 541
             },
             "type": "{\n    (options: { multiple: true }): Promise<Upload[] | null>;\n    (options?: { multiple: false }): Promise<Upload | null>;\n  }"
           },
@@ -3419,7 +3419,7 @@
             },
             "location": {
               "filePath": "src/ctx/base.ts",
-              "lineNumber": 566
+              "lineNumber": 569
             },
             "type": "(\n    uploadId: string,\n  ) => Promise<(Upload & { deleted?: true }) | null>"
           },
@@ -3430,7 +3430,7 @@
             },
             "location": {
               "filePath": "src/ctx/base.ts",
-              "lineNumber": 594
+              "lineNumber": 597
             },
             "type": "(\n    /** The \"single asset\" field structure */\n    fileFieldValue: FileFieldValue,\n    /** Shows metadata information for a specific locale */\n    locale?: string,\n  ) => Promise<FileFieldValue | null>"
           }
@@ -3449,7 +3449,7 @@
             },
             "location": {
               "filePath": "src/ctx/base.ts",
-              "lineNumber": 625
+              "lineNumber": 628
             },
             "type": "(modal: Modal) => Promise<unknown>"
           },
@@ -3460,7 +3460,7 @@
             },
             "location": {
               "filePath": "src/ctx/base.ts",
-              "lineNumber": 662
+              "lineNumber": 665
             },
             "type": "(options: ConfirmOptions) => Promise<unknown>"
           }
@@ -3479,7 +3479,7 @@
             },
             "location": {
               "filePath": "src/ctx/base.ts",
-              "lineNumber": 676
+              "lineNumber": 679
             },
             "type": "(path: string) => Promise<void>"
           }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "datocms-plugin-sdk",
-  "version": "2.2.0-alpha.1",
+  "version": "2.2.0-alpha.3",
   "description": "DatoCMS Plugin SDK",
   "keywords": [
     "datocms",
@@ -30,7 +30,8 @@
   "scripts": {
     "build": "npm run generate-manifest && tsc && tsc --project ./tsconfig.esnext.json",
     "generate-manifest": "tsx generateManifest.ts && biome format --write src/manifest.ts",
-    "prebuild": "rimraf dist"
+    "prebuild": "rimraf dist",
+    "install-in-place": "npm run build && rm -rf $INSTALL_PATH/node_modules/datocms-plugin-sdk/dist && cp -rf dist manifest.json $INSTALL_PATH/node_modules/datocms-plugin-sdk"
   },
   "bugs": {
     "url": "https://github.com/datocms/plugins-sdk/issues"
@@ -46,5 +47,5 @@
     "glob": "^11.0.0",
     "typescript": "^5.6.2"
   },
-  "gitHead": "998ccd009a2babbc49d883ea4b0ef6539937271c"
+  "gitHead": "3e057045b71d96aaa00ee613c86b6421d5b1c93e"
 }

package/src/connect.ts

@@ -141,8 +141,14 @@ function applyColorScheme(properties: unknown): void {
   const next = (properties as { colorScheme?: 'light' | 'dark' } | null)
     ?.colorScheme;
   if (next !== 'light' && next !== 'dark') return;
-  if (document.documentElement.dataset.theme === next) return;
-  document.documentElement.dataset.theme = next;
+  if (document.documentElement.dataset.colorScheme === next) return;
+  document.documentElement.dataset.colorScheme = next;
+  // Also set the actual `color-scheme` CSS property on the root so that
+  // `light-dark()` resolves to the correct branch and native form controls /
+  // scrollbars match — everywhere in the plugin frame, including DOM rendered
+  // outside any `Canvas`/portal. The `data-color-scheme` attribute above is
+  // just a hook for explicit CSS branching; it doesn't drive `light-dark()`.
+  document.documentElement.style.colorScheme = next;
 }
 
 export async function connect(
@@ -176,7 +182,7 @@ export async function connect(
 
   const penpalConnection = connectToParent({
     methods: {
-      sdkVersion: () => '0.3.0',
+      sdkVersion: () => '0.3.1',
       implementedHooks: () =>
         Object.fromEntries(
           Object.keys(rawConfiguration).map((hook) => {

package/src/ctx/base.ts

@@ -105,7 +105,7 @@ type ProjectProperties = {
   /**
    * An object containing the theme colors for the current DatoCMS project
    *
-   * @deprecated Use `semanticColorTokensTheme` instead. This property is kept
+   * @deprecated Use `cssDesignTokens` instead. This property is kept
    *   for backward compatibility with third-party plugins.
    */
   theme: Theme;
@@ -116,17 +116,20 @@ type ProjectProperties = {
    * `--color--raised--surface`) to their resolved values for the current
    * color scheme.
    */
-  semanticColorTokensTheme: SemanticColorTokensTheme;
+  cssDesignTokens: CssDesignTokens;
 
   /**
    * The appearance color scheme the host CMS is currently using. Resolved —
    * `'system'` is already expanded to `'light'` or `'dark'` by the host.
    *
-   * The SDK runtime reflects this onto `document.documentElement` as
-   * `data-theme="light"` / `data-theme="dark"` so plugin CSS can branch
-   * with `[data-theme="dark"] { … }` selectors. For non-CSS decisions
-   * (choosing a logo asset, a syntax-highlighting preset, …) branch on
-   * `ctx.colorScheme` directly.
+   * The SDK runtime reflects this onto `document.documentElement` two ways:
+   * the `data-color-scheme="light"` / `data-color-scheme="dark"` attribute,
+   * so plugin CSS can branch with `[data-color-scheme="dark"] { … }`
+   * selectors; and the actual `color-scheme` CSS property, so `light-dark()`
+   * resolves to the correct branch (and native form controls / scrollbars
+   * match) everywhere in the plugin frame. For non-CSS decisions (choosing a
+   * logo asset, a syntax-highlighting preset, …) branch on `ctx.colorScheme`
+   * directly.
    */
   colorScheme: 'light' | 'dark';
 };
@@ -172,7 +175,7 @@ type EntityReposProperties = {
 /**
  * An object containing the theme colors for the current DatoCMS project
  *
- * @deprecated Use `SemanticColorTokensTheme` instead. This type is kept for
+ * @deprecated Use `cssDesignTokens` instead. This type is kept for
  *   backward compatibility with third-party plugins.
  */
 export type Theme = {
@@ -196,7 +199,7 @@ export type Theme = {
  * The token set is whatever the host sends; it is intentionally untyped so it
  * can evolve on the host without an SDK release.
  */
-export type SemanticColorTokensTheme = Record<string, string>;
+export type CssDesignTokens = Record<string, string>;
 
 export type BaseMethods = LoadDataMethods &
   UpdatePluginParametersMethods &

package/src/manifest.ts

@@ -3363,7 +3363,7 @@ export const manifest: Manifest = {
               markdownText:
                 'An object containing the theme colors for the current DatoCMS project.',
               deprecatedMarkdownText:
-                'Use `semanticColorTokensTheme` instead. This property is kept\nfor backward compatibility with third-party plugins.',
+                'Use `cssDesignTokens` instead. This property is kept\nfor backward compatibility with third-party plugins.',
             },
             location: {
               filePath: 'src/ctx/base.ts',
@@ -3371,7 +3371,7 @@ export const manifest: Manifest = {
             },
             type: 'Theme',
           },
-          semanticColorTokensTheme: {
+          cssDesignTokens: {
             comment: {
               markdownText:
                 'Semantic color tokens for the current DatoCMS project, pre-computed by\nthe host. A map of CSS custom property names (e.g.\n`--color--raised--surface`) to their resolved values for the current\ncolor scheme.',
@@ -3380,16 +3380,16 @@ export const manifest: Manifest = {
               filePath: 'src/ctx/base.ts',
               lineNumber: 119,
             },
-            type: 'SemanticColorTokensTheme',
+            type: 'CssDesignTokens',
           },
           colorScheme: {
             comment: {
               markdownText:
-                'The appearance color scheme the host CMS is currently using. Resolved —\n`\'system\'` is already expanded to `\'light\'` or `\'dark\'` by the host.\n\nThe SDK runtime reflects this onto `document.documentElement` as\n`data-theme="light"` / `data-theme="dark"` so plugin CSS can branch\nwith `[data-theme="dark"] { … }` selectors. For non-CSS decisions\n(choosing a logo asset, a syntax-highlighting preset, …) branch on\n`ctx.colorScheme` directly.',
+                'The appearance color scheme the host CMS is currently using. Resolved —\n`\'system\'` is already expanded to `\'light\'` or `\'dark\'` by the host.\n\nThe SDK runtime reflects this onto `document.documentElement` two ways:\nthe `data-color-scheme="light"` / `data-color-scheme="dark"` attribute,\nso plugin CSS can branch with `[data-color-scheme="dark"] { … }`\nselectors; and the actual `color-scheme` CSS property, so `light-dark()`\nresolves to the correct branch (and native form controls / scrollbars\nmatch) everywhere in the plugin frame. For non-CSS decisions (choosing a\nlogo asset, a syntax-highlighting preset, …) branch on `ctx.colorScheme`\ndirectly.',
             },
             location: {
               filePath: 'src/ctx/base.ts',
-              lineNumber: 131,
+              lineNumber: 134,
             },
             type: "'light' | 'dark'",
           },
@@ -3409,7 +3409,7 @@ export const manifest: Manifest = {
             },
             location: {
               filePath: 'src/ctx/base.ts',
-              lineNumber: 141,
+              lineNumber: 144,
             },
             type: 'Partial<Record<string, ItemType>>',
           },
@@ -3420,7 +3420,7 @@ export const manifest: Manifest = {
             },
             location: {
               filePath: 'src/ctx/base.ts',
-              lineNumber: 148,
+              lineNumber: 151,
             },
             type: 'Partial<Record<string, Field>>',
           },
@@ -3431,7 +3431,7 @@ export const manifest: Manifest = {
             },
             location: {
               filePath: 'src/ctx/base.ts',
-              lineNumber: 155,
+              lineNumber: 158,
             },
             type: 'Partial<Record<string, Fieldset>>',
           },
@@ -3442,7 +3442,7 @@ export const manifest: Manifest = {
             },
             location: {
               filePath: 'src/ctx/base.ts',
-              lineNumber: 162,
+              lineNumber: 165,
             },
             type: 'Partial<Record<string, User>>',
           },
@@ -3453,7 +3453,7 @@ export const manifest: Manifest = {
             },
             location: {
               filePath: 'src/ctx/base.ts',
-              lineNumber: 169,
+              lineNumber: 172,
             },
             type: 'Partial<Record<string, SsoUser>>',
           },
@@ -3477,7 +3477,7 @@ export const manifest: Manifest = {
             },
             location: {
               filePath: 'src/ctx/base.ts',
-              lineNumber: 232,
+              lineNumber: 235,
             },
             type: '(itemTypeId: string) => Promise<Field[]>',
           },
@@ -3490,7 +3490,7 @@ export const manifest: Manifest = {
             },
             location: {
               filePath: 'src/ctx/base.ts',
-              lineNumber: 251,
+              lineNumber: 254,
             },
             type: '(itemTypeId: string) => Promise<Fieldset[]>',
           },
@@ -3503,7 +3503,7 @@ export const manifest: Manifest = {
             },
             location: {
               filePath: 'src/ctx/base.ts',
-              lineNumber: 268,
+              lineNumber: 271,
             },
             type: '() => Promise<Field[]>',
           },
@@ -3516,7 +3516,7 @@ export const manifest: Manifest = {
             },
             location: {
               filePath: 'src/ctx/base.ts',
-              lineNumber: 281,
+              lineNumber: 284,
             },
             type: '() => Promise<User[]>',
           },
@@ -3529,7 +3529,7 @@ export const manifest: Manifest = {
             },
             location: {
               filePath: 'src/ctx/base.ts',
-              lineNumber: 294,
+              lineNumber: 297,
             },
             type: '() => Promise<SsoUser[]>',
           },
@@ -3551,7 +3551,7 @@ export const manifest: Manifest = {
             },
             location: {
               filePath: 'src/ctx/base.ts',
-              lineNumber: 316,
+              lineNumber: 319,
             },
             type: '(params: Record<string, unknown>) => Promise<void>',
           },
@@ -3564,7 +3564,7 @@ export const manifest: Manifest = {
             },
             location: {
               filePath: 'src/ctx/base.ts',
-              lineNumber: 367,
+              lineNumber: 370,
             },
             type: '(\n    fieldId: string,\n    changes: FieldAppearanceChange[],\n  ) => Promise<void>',
           },
@@ -3586,7 +3586,7 @@ export const manifest: Manifest = {
             },
             location: {
               filePath: 'src/ctx/base.ts',
-              lineNumber: 472,
+              lineNumber: 475,
             },
             type: '(message: string) => Promise<void>',
           },
@@ -3599,7 +3599,7 @@ export const manifest: Manifest = {
             },
             location: {
               filePath: 'src/ctx/base.ts',
-              lineNumber: 487,
+              lineNumber: 490,
             },
             type: '(message: string) => Promise<void>',
           },
@@ -3612,7 +3612,7 @@ export const manifest: Manifest = {
             },
             location: {
               filePath: 'src/ctx/base.ts',
-              lineNumber: 511,
+              lineNumber: 514,
             },
             type: '<CtaValue = unknown>(\n    toast: Toast<CtaValue>,\n  ) => Promise<CtaValue | null>',
           },
@@ -3634,7 +3634,7 @@ export const manifest: Manifest = {
             },
             location: {
               filePath: 'src/ctx/base.ts',
-              lineNumber: 397,
+              lineNumber: 400,
             },
             type: '(itemTypeId: string) => Promise<Item | null>',
           },
@@ -3647,7 +3647,7 @@ export const manifest: Manifest = {
             },
             location: {
               filePath: 'src/ctx/base.ts',
-              lineNumber: 418,
+              lineNumber: 421,
             },
             type: '{\n    (\n      itemTypeId: string,\n      options: { multiple: true; initialLocationQuery?: ItemListLocationQuery },\n    ): Promise<Item[] | null>;\n    (\n      itemTypeId: string,\n      options?: {\n        multiple: false;\n        initialLocationQuery?: ItemListLocationQuery;\n      },\n    ): Promise<Item | null>;\n  }',
           },
@@ -3660,7 +3660,7 @@ export const manifest: Manifest = {
             },
             location: {
               filePath: 'src/ctx/base.ts',
-              lineNumber: 450,
+              lineNumber: 453,
             },
             type: '(itemId: string) => Promise<Item | null>',
           },
@@ -3682,7 +3682,7 @@ export const manifest: Manifest = {
             },
             location: {
               filePath: 'src/ctx/base.ts',
-              lineNumber: 538,
+              lineNumber: 541,
             },
             type: '{\n    (options: { multiple: true }): Promise<Upload[] | null>;\n    (options?: { multiple: false }): Promise<Upload | null>;\n  }',
           },
@@ -3695,7 +3695,7 @@ export const manifest: Manifest = {
             },
             location: {
               filePath: 'src/ctx/base.ts',
-              lineNumber: 566,
+              lineNumber: 569,
             },
             type: '(\n    uploadId: string,\n  ) => Promise<(Upload & { deleted?: true }) | null>',
           },
@@ -3708,7 +3708,7 @@ export const manifest: Manifest = {
             },
             location: {
               filePath: 'src/ctx/base.ts',
-              lineNumber: 594,
+              lineNumber: 597,
             },
             type: '(\n    /** The "single asset" field structure */\n    fileFieldValue: FileFieldValue,\n    /** Shows metadata information for a specific locale */\n    locale?: string,\n  ) => Promise<FileFieldValue | null>',
           },
@@ -3730,7 +3730,7 @@ export const manifest: Manifest = {
             },
             location: {
               filePath: 'src/ctx/base.ts',
-              lineNumber: 625,
+              lineNumber: 628,
             },
             type: '(modal: Modal) => Promise<unknown>',
           },
@@ -3743,7 +3743,7 @@ export const manifest: Manifest = {
             },
             location: {
               filePath: 'src/ctx/base.ts',
-              lineNumber: 662,
+              lineNumber: 665,
             },
             type: '(options: ConfirmOptions) => Promise<unknown>',
           },
@@ -3764,7 +3764,7 @@ export const manifest: Manifest = {
             },
             location: {
               filePath: 'src/ctx/base.ts',
-              lineNumber: 676,
+              lineNumber: 679,
             },
             type: '(path: string) => Promise<void>',
           },