From 3007adfedb10764d0d150aea6176eb786d3eb04f Mon Sep 17 00:00:00 2001 From: Silvano Stralla Date: Wed, 22 Apr 2026 11:57:43 +0200 Subject: [PATCH 1/8] Add support for dark-mode to content-calendar plugin --- content-calendar/package-lock.json | 48 +++++++++++-------- content-calendar/package.json | 6 +-- .../ActiveModelsPanel/styles.module.css | 14 +++--- .../components/CalendarGrid/styles.module.css | 16 +++---- .../components/CalendarItem/styles.module.css | 2 +- .../src/entrypoints/Page/styles.module.css | 5 +- 6 files changed, 50 insertions(+), 41 deletions(-) diff --git a/content-calendar/package-lock.json b/content-calendar/package-lock.json index f1af53c6..8aed188d 100644 --- a/content-calendar/package-lock.json +++ b/content-calendar/package-lock.json @@ -1,12 +1,12 @@ { "name": "datocms-plugin-content-calendar", - "version": "0.1.10", + "version": "0.2.0-0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "datocms-plugin-content-calendar", - "version": "0.1.10", + "version": "0.2.0-0", "dependencies": { "@datocms/cma-client": "^5.3.0", "@fortawesome/fontawesome-svg-core": "^7.2.0", @@ -15,8 +15,8 @@ "classnames": "^2.5.1", "color-hash": "^2.0.2", "date-fns": "^4.1.0", - "datocms-plugin-sdk": "^2.1.1", - "datocms-react-ui": "^2.1.4", + "datocms-plugin-sdk": "3.0.0-alpha.0", + "datocms-react-ui": "3.0.0-alpha.0", "lodash-es": "^4.17.23", "react": "^19.2.4", "react-dom": "^19.2.4" @@ -63,6 +63,7 @@ "integrity": "sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@babel/code-frame": "^7.29.0", "@babel/generator": "^7.29.0", @@ -955,6 +956,7 @@ "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-7.2.0.tgz", "integrity": "sha512-6639htZMjEkwskf3J+e6/iar+4cTNM9qhoWuRfj9F3eJD6r7iCzV1SWnQr2Mdv0QT0suuqU8BoJCZUyCtP9R4Q==", "license": "MIT", + "peer": true, "dependencies": { "@fortawesome/fontawesome-common-types": "7.2.0" }, @@ -1483,6 +1485,7 @@ "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.14.tgz", "integrity": "sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==", "license": "MIT", + "peer": true, "dependencies": { "csstype": "^3.2.2" } @@ -1593,6 +1596,7 @@ } ], "license": "MIT", + "peer": true, "dependencies": { "baseline-browser-mapping": "^2.10.12", "caniuse-lite": "^1.0.30001782", @@ -1678,6 +1682,15 @@ "node": ">=10" } }, + "node_modules/cosmiconfig/node_modules/yaml": { + "version": "1.10.3", + "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.3.tgz", + "integrity": "sha512-vIYeF1u3CjlhAFekPPAk2h/Kv4T3mAkMox5OymRiJQB0spDP10LHvt+K7G9Ny6NuuMAb25/6n1qyUjAcGNf/AA==", + "license": "ISC", + "engines": { + "node": ">= 6" + } + }, "node_modules/cross-env": { "version": "10.1.0", "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-10.1.0.tgz", @@ -1728,9 +1741,9 @@ } }, "node_modules/datocms-plugin-sdk": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/datocms-plugin-sdk/-/datocms-plugin-sdk-2.1.1.tgz", - "integrity": "sha512-W+kWEAgfSwjPHzF4aZNMdhavZANUByEfeOgxZ5ksJq7nrCbhKO+Rh6aSueV85C49mjsmZoDSS0RaGN9fFnM8LQ==", + "version": "3.0.0-alpha.0", + "resolved": "https://registry.npmjs.org/datocms-plugin-sdk/-/datocms-plugin-sdk-3.0.0-alpha.0.tgz", + "integrity": "sha512-XFCcQyfImwG8XQj4rXrkfZTOkGzU/F9NjIvWCqa++EyMGXsJ3gSuRZGONM88nwFyQ1pTPePQB5Iepzuammpc/w==", "license": "MIT", "dependencies": { "@datocms/cma-client": "*", @@ -1761,14 +1774,14 @@ } }, "node_modules/datocms-react-ui": { - "version": "2.1.4", - "resolved": "https://registry.npmjs.org/datocms-react-ui/-/datocms-react-ui-2.1.4.tgz", - "integrity": "sha512-WNZi5tR1U2SPj3AUq/WV39WqTOR17sFhnTCx8VILnwUvOKl0/Nw+MqNX6MbjPr86odCCSeMEWCWEbRqHvEiecA==", + "version": "3.0.0-alpha.0", + "resolved": "https://registry.npmjs.org/datocms-react-ui/-/datocms-react-ui-3.0.0-alpha.0.tgz", + "integrity": "sha512-BVZAJSBMblWNIHyMXvNQDUD8SusLvtsxA+1MCZVaKIatZBGoro+4REZITSrPzwCtbiMcghdtpd7Bm+bZJIH9Dg==", "license": "MIT", "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" @@ -2262,6 +2275,7 @@ "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==", "dev": true, "license": "MIT", + "peer": true, "engines": { "node": ">=12" }, @@ -2314,6 +2328,7 @@ "resolved": "https://registry.npmjs.org/react/-/react-19.2.4.tgz", "integrity": "sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==", "license": "MIT", + "peer": true, "engines": { "node": ">=0.10.0" } @@ -2323,6 +2338,7 @@ "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.4.tgz", "integrity": "sha512-AXJdLo8kgMbimY95O2aKQqsz2iWi9jMgKJhRBAxECE4IFxfcazB2LmzloIoibJI3C12IlY20+KFaLv+71bUJeQ==", "license": "MIT", + "peer": true, "dependencies": { "scheduler": "^0.27.0" }, @@ -2637,6 +2653,7 @@ "integrity": "sha512-w+N7Hifpc3gRjZ63vYBXA56dvvRlNWRczTdmCBBa+CotUzAPf5b7YMdMR/8CQoeYE5LX3W4wj6RYTgonm1b9DA==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "esbuild": "^0.27.0", "fdir": "^6.5.0", @@ -2728,15 +2745,6 @@ "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==", "dev": true, "license": "ISC" - }, - "node_modules/yaml": { - "version": "1.10.3", - "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.3.tgz", - "integrity": "sha512-vIYeF1u3CjlhAFekPPAk2h/Kv4T3mAkMox5OymRiJQB0spDP10LHvt+K7G9Ny6NuuMAb25/6n1qyUjAcGNf/AA==", - "license": "ISC", - "engines": { - "node": ">= 6" - } } } } diff --git a/content-calendar/package.json b/content-calendar/package.json index ed338ce1..dba3da43 100644 --- a/content-calendar/package.json +++ b/content-calendar/package.json @@ -2,7 +2,7 @@ "name": "datocms-plugin-content-calendar", "description": "Explore your editorial calendar, right inside DatoCMS", "homepage": "https://github.com/datocms/plugins/tree/master/content-calendar#readme", - "version": "0.1.10", + "version": "0.2.0-0", "keywords": [ "datocms", "datocms-plugin" @@ -19,8 +19,8 @@ "classnames": "^2.5.1", "color-hash": "^2.0.2", "date-fns": "^4.1.0", - "datocms-plugin-sdk": "^2.1.1", - "datocms-react-ui": "^2.1.4", + "datocms-plugin-sdk": "3.0.0-alpha.0", + "datocms-react-ui": "3.0.0-alpha.0", "lodash-es": "^4.17.23", "react": "^19.2.4", "react-dom": "^19.2.4" diff --git a/content-calendar/src/components/ActiveModelsPanel/styles.module.css b/content-calendar/src/components/ActiveModelsPanel/styles.module.css index ab47f1d9..241003ef 100644 --- a/content-calendar/src/components/ActiveModelsPanel/styles.module.css +++ b/content-calendar/src/components/ActiveModelsPanel/styles.module.css @@ -7,7 +7,7 @@ display: flex; padding: var(--spacing-m) var(--spacing-m) var(--spacing-m) 0; justify-content: space-between; - border-bottom: 1px solid var(--border-color); + border-bottom: 1px solid var(--color--border); } .options > * { @@ -16,23 +16,23 @@ .model { padding: var(--spacing-s) var(--spacing-l) var(--spacing-s) var(--spacing-m); - border-bottom: 1px solid var(--border-color); + border-bottom: 1px solid var(--color--border); display: flex; } .toggler { display: block; cursor: pointer; - color: var(--light-body-color); + color: var(--color--ink-subtle); flex: 1; } .togglerActive { - color: var(--base-body-color); + color: var(--color--ink); } .toggler input[type="checkbox"] { - accent-color: white; + accent-color: var(--color--accent--surface); } .color { @@ -40,7 +40,7 @@ height: 20px; border-radius: 100%; background-color: rgba(var(--color-rgb-components), 0.5); - outline: 1px solid var(--border-color); + outline: 1px solid var(--color--border); border: 2px solid white; } @@ -50,6 +50,6 @@ } .modelActive { - background: var(--light-color); + background: var(--color--tinted--surface); font-weight: bold; } diff --git a/content-calendar/src/components/CalendarGrid/styles.module.css b/content-calendar/src/components/CalendarGrid/styles.module.css index 48f3aea0..5e535b3d 100644 --- a/content-calendar/src/components/CalendarGrid/styles.module.css +++ b/content-calendar/src/components/CalendarGrid/styles.module.css @@ -8,8 +8,8 @@ .calendarWeekDay { padding: var(--spacing-m); - border-bottom: 1px solid var(--border-color); - border-right: 1px solid var(--border-color); + border-bottom: 1px solid var(--color--border); + border-right: 1px solid var(--color--border); font-weight: 500; display: flex; align-items: center; @@ -17,19 +17,19 @@ .calendarDayCell { padding: var(--spacing-s); - border-bottom: 1px solid var(--border-color); - border-right: 1px solid var(--border-color); + border-bottom: 1px solid var(--color--border); + border-right: 1px solid var(--color--border); position: relative; overflow: auto; } .calendarDayCell--inAdjacentMonth { - background: var(--lighter-bg-color); + background: var(--color--surface-muted); } .calendarDayCellHeader { font-size: var(--font-size-s); - color: var(--light-body-color); + color: var(--color--ink-subtle); text-align: right; margin-bottom: 5px; } @@ -49,6 +49,6 @@ } .calendarDayCell--isToday .calendarDayCellHeaderDay { - background: var(--primary-color); - color: white; + background: var(--color--primary--surface); + color: var(--color--primary--ink); } diff --git a/content-calendar/src/components/CalendarItem/styles.module.css b/content-calendar/src/components/CalendarItem/styles.module.css index c02317c4..be9e242c 100644 --- a/content-calendar/src/components/CalendarItem/styles.module.css +++ b/content-calendar/src/components/CalendarItem/styles.module.css @@ -33,6 +33,6 @@ } .type { - color: var(--light-body-color); + color: var(--color--ink-subtle); padding-left: 0.3em; } diff --git a/content-calendar/src/entrypoints/Page/styles.module.css b/content-calendar/src/entrypoints/Page/styles.module.css index 1c5a3b1c..f084cfcb 100644 --- a/content-calendar/src/entrypoints/Page/styles.module.css +++ b/content-calendar/src/entrypoints/Page/styles.module.css @@ -2,10 +2,11 @@ display: flex; position: absolute; inset: 0; + background: var(--color--surface); } .layoutSidebar { - border-right: 1px solid var(--border-color); + border-right: 1px solid var(--color--border); width: 300px; } @@ -29,5 +30,5 @@ .filter svg { display: inline-block; vertical-align: middle; - fill: var(--light-body-color); + fill: var(--color--ink-subtle); } From d0505b6579f5565702edf0f00839cc6edd3da1a0 Mon Sep 17 00:00:00 2001 From: Silvano Stralla Date: Wed, 22 Apr 2026 12:46:25 +0200 Subject: [PATCH 2/8] Add support for dark-mode to web-previews plugin --- web-previews/package-lock.json | 33 +++++++----- web-previews/package.json | 6 +-- web-previews/penpal.d.ts | 21 +++----- .../Browser/IframeContainer/styles.module.css | 6 +-- .../Toolbar/ToolbarButton/styles.module.css | 8 +-- .../Toolbar/ToolbarSlot/styles.module.css | 2 +- .../Browser/Toolbar/styles.module.css | 2 +- .../ViewportCustomizer/styles.module.css | 6 +-- .../components/ButtonGroup/styles.module.css | 10 ++-- .../IconPickerInput/modal-styles.module.css | 21 +++++--- .../IconPickerInput/styles.module.css | 9 ++-- .../ConfigScreen/styles.module.css | 10 ++-- .../Inspector/ContentLinkContext/index.tsx | 5 +- .../useContentLinkConnection.ts | 4 +- .../ContentLinkContext/useMethodProxy.ts | 54 ++++++++----------- .../FrontendSelector/styles.module.css | 6 +-- .../Inspector/UI/AddressBar/index.tsx | 7 ++- .../Inspector/UI/AddressBar/styles.module.css | 26 ++++----- .../UI/EditModeToggle/styles.module.css | 2 +- .../src/entrypoints/Inspector/UI/index.tsx | 2 +- .../Trigger/styles.module.css | 8 +-- .../SidebarPanel/styles.module.css | 4 +- .../WrongEnvironmentPanel/styles.module.css | 16 +++--- web-previews/tsconfig.app.tsbuildinfo | 2 +- web-previews/tsconfig.node.tsbuildinfo | 2 +- 25 files changed, 138 insertions(+), 134 deletions(-) diff --git a/web-previews/package-lock.json b/web-previews/package-lock.json index d303eb3a..7731bf60 100644 --- a/web-previews/package-lock.json +++ b/web-previews/package-lock.json @@ -1,12 +1,12 @@ { "name": "datocms-plugin-web-previews", - "version": "1.0.32", + "version": "1.1.0-0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "datocms-plugin-web-previews", - "version": "1.0.32", + "version": "1.1.0-0", "license": "GPLv3", "dependencies": { "@floating-ui/react": "^0.27.19", @@ -14,8 +14,8 @@ "@fortawesome/react-fontawesome": "^0.2.6", "@types/lodash-es": "^4.17.12", "cuid": "^3.0.0", - "datocms-plugin-sdk": "^2.1.1", - "datocms-react-ui": "^2.1.4", + "datocms-plugin-sdk": "3.0.0-alpha.0", + "datocms-react-ui": "3.0.0-alpha.0", "final-form": "^4.20.10", "final-form-arrays": "^3.1.0", "lodash-es": "^4.17.23", @@ -68,6 +68,7 @@ "integrity": "sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@babel/code-frame": "^7.29.0", "@babel/generator": "^7.29.0", @@ -968,7 +969,6 @@ "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-7.2.0.tgz", "integrity": "sha512-IpR0bER9FY25p+e7BmFH25MZKEwFHTfRAfhOyJubgiDnoJNsSvJ7nigLraHtp4VOG/cy8D7uiV0dLkHOne5Fhw==", "license": "MIT", - "peer": true, "engines": { "node": ">=6" } @@ -1508,6 +1508,7 @@ "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.28.tgz", "integrity": "sha512-z9VXpC7MWrhfWipitjNdgCauoMLRdIILQsAEV+ZesIzBq/oUlxk0m3ApZuMFCXdnS4U7KrI+l3WRUEGQ8K1QKw==", "license": "MIT", + "peer": true, "dependencies": { "@types/prop-types": "*", "csstype": "^3.2.2" @@ -1619,6 +1620,7 @@ } ], "license": "MIT", + "peer": true, "dependencies": { "baseline-browser-mapping": "^2.10.12", "caniuse-lite": "^1.0.30001782", @@ -1755,9 +1757,9 @@ "license": "MIT" }, "node_modules/datocms-plugin-sdk": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/datocms-plugin-sdk/-/datocms-plugin-sdk-2.1.1.tgz", - "integrity": "sha512-W+kWEAgfSwjPHzF4aZNMdhavZANUByEfeOgxZ5ksJq7nrCbhKO+Rh6aSueV85C49mjsmZoDSS0RaGN9fFnM8LQ==", + "version": "3.0.0-alpha.0", + "resolved": "https://registry.npmjs.org/datocms-plugin-sdk/-/datocms-plugin-sdk-3.0.0-alpha.0.tgz", + "integrity": "sha512-XFCcQyfImwG8XQj4rXrkfZTOkGzU/F9NjIvWCqa++EyMGXsJ3gSuRZGONM88nwFyQ1pTPePQB5Iepzuammpc/w==", "license": "MIT", "dependencies": { "@datocms/cma-client": "*", @@ -1779,14 +1781,14 @@ } }, "node_modules/datocms-react-ui": { - "version": "2.1.4", - "resolved": "https://registry.npmjs.org/datocms-react-ui/-/datocms-react-ui-2.1.4.tgz", - "integrity": "sha512-WNZi5tR1U2SPj3AUq/WV39WqTOR17sFhnTCx8VILnwUvOKl0/Nw+MqNX6MbjPr86odCCSeMEWCWEbRqHvEiecA==", + "version": "3.0.0-alpha.0", + "resolved": "https://registry.npmjs.org/datocms-react-ui/-/datocms-react-ui-3.0.0-alpha.0.tgz", + "integrity": "sha512-BVZAJSBMblWNIHyMXvNQDUD8SusLvtsxA+1MCZVaKIatZBGoro+4REZITSrPzwCtbiMcghdtpd7Bm+bZJIH9Dg==", "license": "MIT", "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" @@ -1949,6 +1951,7 @@ "resolved": "https://registry.npmjs.org/final-form/-/final-form-4.20.10.tgz", "integrity": "sha512-TL48Pi1oNHeMOHrKv1bCJUrWZDcD3DIG6AGYVNOnyZPr7Bd/pStN0pL+lfzF5BNoj/FclaoiaLenk4XUIFVYng==", "license": "MIT", + "peer": true, "dependencies": { "@babel/runtime": "^7.10.0" }, @@ -1965,6 +1968,7 @@ "resolved": "https://registry.npmjs.org/final-form-arrays/-/final-form-arrays-3.1.0.tgz", "integrity": "sha512-TWBvun+AopgBLw9zfTFHBllnKMVNEwCEyDawphPuBGGqNsuhGzhT7yewHys64KFFwzIs6KEteGLpKOwvTQEscQ==", "license": "MIT", + "peer": true, "peerDependencies": { "final-form": "^4.20.8" } @@ -2284,6 +2288,7 @@ "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==", "dev": true, "license": "MIT", + "peer": true, "engines": { "node": ">=12" }, @@ -2336,6 +2341,7 @@ "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz", "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==", "license": "MIT", + "peer": true, "dependencies": { "loose-envify": "^1.1.0" }, @@ -2348,6 +2354,7 @@ "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz", "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==", "license": "MIT", + "peer": true, "dependencies": { "loose-envify": "^1.1.0", "scheduler": "^0.23.2" @@ -2361,6 +2368,7 @@ "resolved": "https://registry.npmjs.org/react-final-form/-/react-final-form-6.5.9.tgz", "integrity": "sha512-x3XYvozolECp3nIjly+4QqxdjSSWfcnpGEL5K8OBT6xmGrq5kBqbA6+/tOqoom9NwqIPPbxPNsOViFlbKgowbA==", "license": "MIT", + "peer": true, "dependencies": { "@babel/runtime": "^7.15.4" }, @@ -2758,6 +2766,7 @@ "integrity": "sha512-w+N7Hifpc3gRjZ63vYBXA56dvvRlNWRczTdmCBBa+CotUzAPf5b7YMdMR/8CQoeYE5LX3W4wj6RYTgonm1b9DA==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "esbuild": "^0.27.0", "fdir": "^6.5.0", diff --git a/web-previews/package.json b/web-previews/package.json index dee61307..5b6701f2 100644 --- a/web-previews/package.json +++ b/web-previews/package.json @@ -2,7 +2,7 @@ "name": "datocms-plugin-web-previews", "homepage": "https://github.com/datocms/plugins/tree/master/web-previews#readme", "description": "Add a Visual tab for full-screen side-by-side editing with click-to-edit overlays, preview links in the record sidebar, and inline iframe previews with viewport presets", - "version": "1.0.32", + "version": "1.1.0-0", "author": "DatoCMS ", "license": "GPLv3", "files": [ @@ -29,8 +29,8 @@ "@fortawesome/react-fontawesome": "^0.2.6", "@types/lodash-es": "^4.17.12", "cuid": "^3.0.0", - "datocms-plugin-sdk": "^2.1.1", - "datocms-react-ui": "^2.1.4", + "datocms-plugin-sdk": "3.0.0-alpha.0", + "datocms-react-ui": "3.0.0-alpha.0", "final-form": "^4.20.10", "final-form-arrays": "^3.1.0", "lodash-es": "^4.17.23", diff --git a/web-previews/penpal.d.ts b/web-previews/penpal.d.ts index d2258660..11f1fd0c 100644 --- a/web-previews/penpal.d.ts +++ b/web-previews/penpal.d.ts @@ -1,17 +1,10 @@ declare module 'penpal' { - export type FunctionPropertyNames = { - [K in keyof T]: T[K] extends (...args: unknown[]) => unknown ? K : never; - }[keyof T]; - - export type AsyncMethodReturns< - T, - K extends keyof T = FunctionPropertyNames, - > = { - [KK in K]: T[KK] extends (...args: unknown[]) => PromiseLike - ? T[KK] - : T[KK] extends (...args: infer A) => infer R - ? (...args: A) => Promise - : T[KK]; + export type AsyncMethodReturns = { + [K in keyof T]: T[K] extends (...args: infer A) => infer R + ? R extends PromiseLike + ? T[K] + : (...args: A) => Promise + : T[K]; }; export type CallSender = { @@ -31,7 +24,7 @@ declare module 'penpal' { }; export type Methods = { - [index: string]: (...args: unknown[]) => unknown; + [index: string]: (...args: never[]) => unknown; }; type Options = { diff --git a/web-previews/src/components/Browser/IframeContainer/styles.module.css b/web-previews/src/components/Browser/IframeContainer/styles.module.css index 0e0d31e7..10d3906d 100644 --- a/web-previews/src/components/Browser/IframeContainer/styles.module.css +++ b/web-previews/src/components/Browser/IframeContainer/styles.module.css @@ -4,7 +4,7 @@ display: flex; align-items: center; justify-content: center; - background-color: var(--light-bg-color); + background-color: var(--color--surface-muted); padding: 20px; overflow: hidden; min-height: 0; @@ -44,7 +44,7 @@ top: 0; left: 0; height: 4px; - background-color: var(--light-bg-color); + background-color: var(--color--surface-muted); width: 100%; overflow: hidden; z-index: 2; @@ -53,7 +53,7 @@ .progressBarValue { width: 100%; height: 100%; - background-color: var(--primary-color); + background-color: var(--color--primary--surface); animation: indeterminateAnimation 1s infinite linear; transform-origin: 0% 50%; } diff --git a/web-previews/src/components/Browser/Toolbar/ToolbarButton/styles.module.css b/web-previews/src/components/Browser/Toolbar/ToolbarButton/styles.module.css index 89d5f8a7..0cf9d669 100644 --- a/web-previews/src/components/Browser/Toolbar/ToolbarButton/styles.module.css +++ b/web-previews/src/components/Browser/Toolbar/ToolbarButton/styles.module.css @@ -6,16 +6,16 @@ justify-content: center; background: transparent; cursor: pointer; - color: var(--light-body-color); - border-left: 1px solid var(--border-color); + color: var(--color--ink-subtle); + border-left: 1px solid var(--color--border); aspect-ratio: 1; font-size: 15px; height: 100%; } .toolbarButton:hover { - color: var(--base-body-color); - background-color: var(--light-bg-color); + color: var(--color--ink); + background-color: var(--color--surface-muted); } .toolbarButton:disabled { diff --git a/web-previews/src/components/Browser/Toolbar/ToolbarSlot/styles.module.css b/web-previews/src/components/Browser/Toolbar/ToolbarSlot/styles.module.css index ac1264d5..259735e8 100644 --- a/web-previews/src/components/Browser/Toolbar/ToolbarSlot/styles.module.css +++ b/web-previews/src/components/Browser/Toolbar/ToolbarSlot/styles.module.css @@ -4,7 +4,7 @@ } .slotWithBorder { - border-left: 1px solid var(--border-color); + border-left: 1px solid var(--color--border); } .slotFlex { diff --git a/web-previews/src/components/Browser/Toolbar/styles.module.css b/web-previews/src/components/Browser/Toolbar/styles.module.css index 9146c518..90a14f1f 100644 --- a/web-previews/src/components/Browser/Toolbar/styles.module.css +++ b/web-previews/src/components/Browser/Toolbar/styles.module.css @@ -1,5 +1,5 @@ .toolbar { - border-bottom: 1px solid var(--border-color); + border-bottom: 1px solid var(--color--border); display: flex; align-items: stretch; min-height: 45px; diff --git a/web-previews/src/components/Browser/ViewportCustomizer/styles.module.css b/web-previews/src/components/Browser/ViewportCustomizer/styles.module.css index e4f2f85f..708266a6 100644 --- a/web-previews/src/components/Browser/ViewportCustomizer/styles.module.css +++ b/web-previews/src/components/Browser/ViewportCustomizer/styles.module.css @@ -17,13 +17,13 @@ 0px 0px 16.5px rgba(0, 0, 0, 0.083), 0px 0px 30.9px rgba(0, 0, 0, 0.101), 0px 0px 74px rgba(0, 0, 0, 0.14); - color: var(--light-body-color); + color: var(--color--ink-subtle); } .dimensionInput { width: 60px; padding: 4px 8px; - border: 1px solid var(--border-color); + border: 1px solid var(--color--border); border-radius: 4px; font-size: 14px; color: inherit; @@ -32,5 +32,5 @@ .dimensionInput:focus { outline: none; - border-color: var(--accent-color); + border-color: var(--color--focus--border); } diff --git a/web-previews/src/components/ButtonGroup/styles.module.css b/web-previews/src/components/ButtonGroup/styles.module.css index 882bc921..2566bf84 100644 --- a/web-previews/src/components/ButtonGroup/styles.module.css +++ b/web-previews/src/components/ButtonGroup/styles.module.css @@ -1,7 +1,7 @@ .buttonGroup { display: flex; gap: 0; - border: 1px solid var(--border-color); + border: 1px solid var(--color--border); border-radius: 4px; overflow: hidden; } @@ -14,12 +14,12 @@ margin: 0; background: transparent; cursor: pointer; - color: var(--light-body-color); + color: var(--color--ink-subtle); display: flex; align-items: center; justify-content: center; text-decoration: none; - border-right: 1px solid var(--border-color); + border-right: 1px solid var(--color--border); width: 38px; aspect-ratio: 1.1; } @@ -31,6 +31,6 @@ .buttonGroup > button:hover, .buttonGroup > a:hover { - background: var(--light-bg-color); - color: var(--base-body-color); + background: var(--color--surface-muted); + color: var(--color--ink); } diff --git a/web-previews/src/entrypoints/ConfigScreen/IconPickerInput/modal-styles.module.css b/web-previews/src/entrypoints/ConfigScreen/IconPickerInput/modal-styles.module.css index 6d5bd54a..217a8af9 100644 --- a/web-previews/src/entrypoints/ConfigScreen/IconPickerInput/modal-styles.module.css +++ b/web-previews/src/entrypoints/ConfigScreen/IconPickerInput/modal-styles.module.css @@ -15,7 +15,7 @@ .resultsInfo { font-size: 12px; - color: var(--base-body-color); + color: var(--color--ink); opacity: 0.7; padding: 0 4px; } @@ -35,8 +35,8 @@ justify-content: center; gap: 10px; padding: 8px; - background: var(--light-bg-color); - border: 1px solid var(--border-color); + background: var(--color--surface-muted); + border: 1px solid var(--color--border); border-radius: 6px; cursor: pointer; transition: all 0.15s ease; @@ -44,25 +44,30 @@ } .iconButton:hover { - background: var(--semi-transparent-accent-color); - border-color: var(--accent-color); + background: var(--color--accent--surface); + border-color: var(--color--accent--ink); transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } +.iconButton:hover .icon, +.iconButton:hover .iconLabel { + color: var(--color--accent--ink); +} + .iconButton:active { transform: translateY(0); } .icon { font-size: 20px; - color: var(--base-body-color); + color: var(--color--ink); flex-shrink: 0; } .iconLabel { font-size: var(--font-size-xs); - color: var(--light-body-color); + color: var(--color--ink-subtle); text-align: center; word-break: break-word; line-height: 1.1; @@ -77,6 +82,6 @@ .noResults { text-align: center; padding: var(--spacing-xl); - color: var(--base-body-color); + color: var(--color--ink); opacity: 0.6; } diff --git a/web-previews/src/entrypoints/ConfigScreen/IconPickerInput/styles.module.css b/web-previews/src/entrypoints/ConfigScreen/IconPickerInput/styles.module.css index dd48efe3..d6b24b37 100644 --- a/web-previews/src/entrypoints/ConfigScreen/IconPickerInput/styles.module.css +++ b/web-previews/src/entrypoints/ConfigScreen/IconPickerInput/styles.module.css @@ -5,7 +5,8 @@ justify-content: flex-start; background: transparent; cursor: pointer; - border: 1px solid var(--border-color); + border: 1px solid var(--color--border); + color: var(--color--ink); width: 100%; font-size: var(--font-size-s); font-family: var(--monospaced-font-family); @@ -15,15 +16,15 @@ } .button svg { - color: var(--light-body-color); + color: var(--color--ink-subtle); } .button:hover { - border-color: var(--darker-border-color); + border-color: var(--color--border-hover); } .error { - border-color: var(--alert-color); + border-color: var(--color--feedback-fail--border); } .iconName { diff --git a/web-previews/src/entrypoints/ConfigScreen/styles.module.css b/web-previews/src/entrypoints/ConfigScreen/styles.module.css index bec392b9..9d694e9f 100644 --- a/web-previews/src/entrypoints/ConfigScreen/styles.module.css +++ b/web-previews/src/entrypoints/ConfigScreen/styles.module.css @@ -1,12 +1,12 @@ .group { - border: 1px solid var(--border-color); + border: 1px solid var(--color--border); padding: var(--spacing-l); border-radius: 4px; transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1); } .group:hover { - border-color: var(--darker-border-color); + border-color: var(--color--border-hover); } .deletableItemAction { @@ -37,7 +37,7 @@ } .error { - color: var(--alert-color); + color: var(--color--danger--ink); margin-bottom: var(--spacing-m); } @@ -52,11 +52,11 @@ margin-top: var(--spacing-l); padding: var(--spacing-l); border-radius: 3px; - border: 1px solid var(--border-color); + border: 1px solid var(--color--border); } .indentFields { padding-left: var(--spacing-xl); margin-left: var(--spacing-m); - border-left: 4px solid var(--border-color); + border-left: 4px solid var(--color--border); } diff --git a/web-previews/src/entrypoints/Inspector/ContentLinkContext/index.tsx b/web-previews/src/entrypoints/Inspector/ContentLinkContext/index.tsx index 6b7e992b..5fd1203c 100644 --- a/web-previews/src/entrypoints/Inspector/ContentLinkContext/index.tsx +++ b/web-previews/src/entrypoints/Inspector/ContentLinkContext/index.tsx @@ -1,6 +1,7 @@ import cuid from 'cuid'; import type { RenderInspectorCtx } from 'datocms-plugin-sdk'; import { useCtx } from 'datocms-react-ui'; +import type { AsyncMethodReturns } from 'penpal'; import { createContext, type ReactNode, @@ -30,7 +31,7 @@ interface ContextValue { | { type: 'connected'; state: CleanContentLinkState; - methods: ContentLinkMethods; + methods: AsyncMethodReturns; } | { type: 'error'; reason: 'no-ping' | 'failed-connection' }; @@ -201,7 +202,7 @@ export function ContentLinkContextProvider({ children, frontend }: Props) { scrollToNearestTarget: true, }); } - }, [highlightedItemId, connection.methods.flashItem, connection.type]); + }, [highlightedItemId, connection]); useEffect(() => { const itemId = ctx.highlightedItemId; diff --git a/web-previews/src/entrypoints/Inspector/ContentLinkContext/useContentLinkConnection.ts b/web-previews/src/entrypoints/Inspector/ContentLinkContext/useContentLinkConnection.ts index 99e1a68e..cb86e960 100644 --- a/web-previews/src/entrypoints/Inspector/ContentLinkContext/useContentLinkConnection.ts +++ b/web-previews/src/entrypoints/Inspector/ContentLinkContext/useContentLinkConnection.ts @@ -1,4 +1,4 @@ -import { connectToChild } from 'penpal'; +import { type AsyncMethodReturns, connectToChild } from 'penpal'; import { useCallback, useMemo, useRef, useState } from 'react'; import type { ContentLinkMethods, @@ -11,7 +11,7 @@ import useMethodProxy from './useMethodProxy'; // Connection state for Penpal export type ContentLinkConnectionState = | { type: 'connecting' } - | { type: 'connected'; methods: ContentLinkMethods } + | { type: 'connected'; methods: AsyncMethodReturns } | { type: 'failed' }; export type UseContentLinkConnectionReturn = { diff --git a/web-previews/src/entrypoints/Inspector/ContentLinkContext/useMethodProxy.ts b/web-previews/src/entrypoints/Inspector/ContentLinkContext/useMethodProxy.ts index 63e9e1ea..481debe9 100644 --- a/web-previews/src/entrypoints/Inspector/ContentLinkContext/useMethodProxy.ts +++ b/web-previews/src/entrypoints/Inspector/ContentLinkContext/useMethodProxy.ts @@ -6,47 +6,37 @@ function isPromise(x: unknown): x is Promise { return x !== null && typeof x === 'object' && 'then' in x && 'catch' in x; } -const useMethodProxy = unknown>( - method: Method, +const useMethodProxy = ( + method: (...args: Args) => R, depsList: Array, ) => { // eslint-disable-next-line react-hooks/exhaustive-deps - const methodCb = useMemo(() => { - return method; - // depsList is a runtime-variable deps array; we spread it to satisfy the - // hook call convention while accepting that Biome/ESLint cannot statically - // verify it. The depsList argument is the caller's responsibility. - // biome requires an array literal – we work around this by passing the - // deps individually via the spread pattern captured at call time. - }, [method, ...depsList]); + const methodCb = useMemo(() => method, [method, ...depsList]); - const methodRef = useRef(method); + const methodRef = useRef(methodCb); useEffect(() => { methodRef.current = methodCb; }, [methodCb]); - return useCallback( - (...args: Parameters): Promisify> => { - const result: ReturnType = methodRef.current(...args); - - if (isPromise(result)) { - // our dato api throws object errors (not Error instances) attaching some - // metadata. these kind of objects cannot be passed to the iframe as they're - // not serializable - return result.catch((e: unknown) => { - if (e && typeof e === 'object' && 'error' in e) { - throw e.error; - } - - throw e; - }); - } - - return Promise.resolve(result) as Promisify>; - }, - [], - ); + return useCallback((...args: Args): Promisify => { + const result = methodRef.current(...args); + + if (isPromise(result)) { + // our dato api throws object errors (not Error instances) attaching some + // metadata. these kind of objects cannot be passed to the iframe as they're + // not serializable + return result.catch((e: unknown) => { + if (e && typeof e === 'object' && 'error' in e) { + throw e.error; + } + + throw e; + }) as Promisify; + } + + return Promise.resolve(result) as Promisify; + }, []); }; export default useMethodProxy; diff --git a/web-previews/src/entrypoints/Inspector/UI/AddressBar/FrontendSelector/styles.module.css b/web-previews/src/entrypoints/Inspector/UI/AddressBar/FrontendSelector/styles.module.css index 72dfdc5d..9f975f46 100644 --- a/web-previews/src/entrypoints/Inspector/UI/AddressBar/FrontendSelector/styles.module.css +++ b/web-previews/src/entrypoints/Inspector/UI/AddressBar/FrontendSelector/styles.module.css @@ -8,12 +8,12 @@ background: transparent; cursor: pointer; font-size: var(--font-size-s); - 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); } .trigger:hover { - background: var(--light-bg-color); + background: var(--color--surface-muted); } .label { diff --git a/web-previews/src/entrypoints/Inspector/UI/AddressBar/index.tsx b/web-previews/src/entrypoints/Inspector/UI/AddressBar/index.tsx index 1e276384..94eb5df8 100644 --- a/web-previews/src/entrypoints/Inspector/UI/AddressBar/index.tsx +++ b/web-previews/src/entrypoints/Inspector/UI/AddressBar/index.tsx @@ -44,8 +44,13 @@ function AddressBar({ frontends, onFrontendChange, }: AddressBarProps) { + if (!frontend.visualEditing) { + throw new Error( + `Frontend "${frontend.name}" is missing visualEditing configuration.`, + ); + } const visualEditingOrigin = new URL( - frontend.visualEditing?.enableDraftModeUrl, + frontend.visualEditing.enableDraftModeUrl, ).origin; const { contentLink, iframeState } = useContentLink(); diff --git a/web-previews/src/entrypoints/Inspector/UI/AddressBar/styles.module.css b/web-previews/src/entrypoints/Inspector/UI/AddressBar/styles.module.css index 8fedf5d3..98927bc9 100644 --- a/web-previews/src/entrypoints/Inspector/UI/AddressBar/styles.module.css +++ b/web-previews/src/entrypoints/Inspector/UI/AddressBar/styles.module.css @@ -2,32 +2,32 @@ flex: 1; display: flex; align-items: stretch; - border: 1px solid var(--border-color); + border: 1px solid var(--color--border); transition: border 0.2s var(--material-ease); border-radius: 4px; } .root:hover { - border-color: var(--darker-border-color); + border-color: var(--color--border-hover); } .root:focus-within { 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); } .root.error { - border-color: var(--alert-color); + border-color: var(--color--feedback-fail--border); } .root.error:hover { - border-color: var(--alert-color); + border-color: var(--color--feedback-fail--border); } .root.error:focus-within { - border-color: var(--alert-color); - box-shadow: 0 0 0 3px rgba(var(--alert-color-rgb-components), 0.2); + border-color: var(--color--feedback-fail--border); + box-shadow: 0 0 0 3px var(--color--feedback-fail--outline); } .controls { @@ -42,16 +42,16 @@ border: 0; margin: 0; padding: 0 12px; - background: var(--light-bg-color); - color: var(--light-body-color); + background: var(--color--surface-muted); + color: var(--color--ink-subtle); cursor: pointer; transition: background-color 0.15s ease; font-size: inherit; } .refreshButton:hover { - background: var(--light-color); - color: var(--base-body-color); + background: var(--color--tinted--surface); + color: var(--color--ink); } .input { @@ -69,7 +69,7 @@ } .input::placeholder { - color: var(--placeholder-body-color); + color: var(--color--ink-placeholder); } .input:focus { diff --git a/web-previews/src/entrypoints/Inspector/UI/EditModeToggle/styles.module.css b/web-previews/src/entrypoints/Inspector/UI/EditModeToggle/styles.module.css index 9055dee3..35c9a418 100644 --- a/web-previews/src/entrypoints/Inspector/UI/EditModeToggle/styles.module.css +++ b/web-previews/src/entrypoints/Inspector/UI/EditModeToggle/styles.module.css @@ -9,6 +9,6 @@ .text { font: inherit; - color: var(--base-body-color); + color: var(--color--ink); white-space: nowrap; } diff --git a/web-previews/src/entrypoints/Inspector/UI/index.tsx b/web-previews/src/entrypoints/Inspector/UI/index.tsx index 41174375..8985960a 100644 --- a/web-previews/src/entrypoints/Inspector/UI/index.tsx +++ b/web-previews/src/entrypoints/Inspector/UI/index.tsx @@ -119,7 +119,7 @@ const UI: React.FC = () => { 'Connection to the website has been lost. You may have navigated away from the original site by clicking an external link. Please reload to reconnect.', ); } - }, [contentLink.type, ctx.alert, contentLink.reason]); + }, [contentLink, ctx.alert]); // Handle frontend deletion while Inspector open useEffect(() => { diff --git a/web-previews/src/entrypoints/SidebarFrame/PreviewLinkSelector/Trigger/styles.module.css b/web-previews/src/entrypoints/SidebarFrame/PreviewLinkSelector/Trigger/styles.module.css index 0547febb..f08e6729 100644 --- a/web-previews/src/entrypoints/SidebarFrame/PreviewLinkSelector/Trigger/styles.module.css +++ b/web-previews/src/entrypoints/SidebarFrame/PreviewLinkSelector/Trigger/styles.module.css @@ -17,12 +17,12 @@ } .root:hover { - background-color: var(--light-bg-color); + background-color: var(--color--surface-muted); } .icon { width: 12px; - color: var(--light-body-color); + color: var(--color--ink-subtle); margin-left: 10px; flex-shrink: 0; } @@ -32,10 +32,10 @@ white-space: nowrap; text-overflow: ellipsis; overflow: hidden; - color: var(--light-body-color); + color: var(--color--ink-subtle); } .title { - color: var(--base-body-color); + color: var(--color--ink); font-weight: bold; } diff --git a/web-previews/src/entrypoints/SidebarPanel/styles.module.css b/web-previews/src/entrypoints/SidebarPanel/styles.module.css index b8851969..83fd54d7 100644 --- a/web-previews/src/entrypoints/SidebarPanel/styles.module.css +++ b/web-previews/src/entrypoints/SidebarPanel/styles.module.css @@ -14,7 +14,7 @@ } .previewLink__label { - color: var(--base-body-color); + color: var(--color--ink); padding: 0; margin: 0; font-weight: 500; @@ -45,7 +45,7 @@ .groupName { text-transform: uppercase; - color: var(--light-body-color); + color: var(--color--ink-subtle); font-weight: bold; font-size: var(--font-size-s); margin-bottom: var(--spacing-s); diff --git a/web-previews/src/entrypoints/WrongEnvironmentPanel/styles.module.css b/web-previews/src/entrypoints/WrongEnvironmentPanel/styles.module.css index a85f747b..d4ac7deb 100644 --- a/web-previews/src/entrypoints/WrongEnvironmentPanel/styles.module.css +++ b/web-previews/src/entrypoints/WrongEnvironmentPanel/styles.module.css @@ -8,12 +8,12 @@ align-items: center; justify-content: center; padding: var(--spacing-xl); - background: var(--lighter-bg-color); + background: var(--color--surface-muted); } .container { background: white; - border: 1px solid var(--border-color); + border: 1px solid var(--color--border); border-radius: 8px; padding: var(--spacing-xl); max-width: 560px; @@ -29,20 +29,20 @@ .icon { font-size: 48px; - color: var(--warning-color); + color: var(--color--feedback-warning--ink); } .title { margin: 0 0 var(--spacing-xl) 0; font-size: var(--font-size-xxl); font-weight: 700; - color: var(--base-body-color); + color: var(--color--ink); } .paragraph { margin: 0 0 var(--spacing-l) 0; font-size: var(--font-size-l); - color: var(--light-body-color); + color: var(--color--ink-subtle); text-align: left; } @@ -51,12 +51,12 @@ } .goodNews { - color: var(--notice-color); + color: var(--color--feedback-success--ink); font-weight: 600; } .however { - color: var(--alert-color); + color: var(--color--danger--ink); font-weight: 600; } @@ -66,5 +66,5 @@ .strong { font-weight: 600; - color: var(--base-body-color); + color: var(--color--ink); } diff --git a/web-previews/tsconfig.app.tsbuildinfo b/web-previews/tsconfig.app.tsbuildinfo index da630ae6..c5a67190 100644 --- a/web-previews/tsconfig.app.tsbuildinfo +++ b/web-previews/tsconfig.app.tsbuildinfo @@ -1 +1 @@ -{"root":["./src/main.tsx","./src/types.ts","./src/vite-env.d.ts","./src/components/browser/browserwrapper/index.tsx","./src/components/browser/iframecontainer/iframestyles.ts","./src/components/browser/iframecontainer/index.tsx","./src/components/browser/iframecontainer/useiframescaling.ts","./src/components/browser/toolbar/index.tsx","./src/components/browser/toolbar/toolbarbutton/index.tsx","./src/components/browser/toolbar/toolbarslot/index.tsx","./src/components/browser/viewportcustomizer/index.tsx","./src/components/browser/viewportselector/index.tsx","./src/components/buttongroup/index.tsx","./src/entrypoints/configscreen/index.tsx","./src/entrypoints/configscreen/iconpickerinput/iconpickermodal.tsx","./src/entrypoints/configscreen/iconpickerinput/index.tsx","./src/entrypoints/configscreen/components/customheaderslist.tsx","./src/entrypoints/configscreen/components/frontendfielditem.tsx","./src/entrypoints/configscreen/components/previewlinkssection.tsx","./src/entrypoints/configscreen/components/previewlinkssettings.tsx","./src/entrypoints/configscreen/components/viewportfielditem.tsx","./src/entrypoints/configscreen/components/visualeditingsection.tsx","./src/entrypoints/inspector/index.tsx","./src/entrypoints/inspector/contentlinkcontext/index.tsx","./src/entrypoints/inspector/contentlinkcontext/types.ts","./src/entrypoints/inspector/contentlinkcontext/usecontentlinkconnection.ts","./src/entrypoints/inspector/contentlinkcontext/usemethodproxy.ts","./src/entrypoints/inspector/ui/index.tsx","./src/entrypoints/inspector/ui/addressbar/index.tsx","./src/entrypoints/inspector/ui/addressbar/frontendselector/index.tsx","./src/entrypoints/inspector/ui/editmodetoggle/index.tsx","./src/entrypoints/inspectorloading/index.tsx","./src/entrypoints/sidebarframe/index.tsx","./src/entrypoints/sidebarframe/previewlinkselector/index.tsx","./src/entrypoints/sidebarframe/previewlinkselector/frontendgroup/index.tsx","./src/entrypoints/sidebarframe/previewlinkselector/frontendpreviewlinks/index.tsx","./src/entrypoints/sidebarframe/previewlinkselector/trigger/index.tsx","./src/entrypoints/sidebarpanel/index.tsx","./src/entrypoints/wrongenvironmentpanel/index.tsx","./src/utils/common.ts","./src/utils/persistedwidth.ts","./src/utils/render.tsx","./src/utils/urls.tsx","./penpal.d.ts"],"errors":true,"version":"5.7.2"} \ No newline at end of file +{"root":["./src/main.tsx","./src/types.ts","./src/vite-env.d.ts","./src/components/browser/browserwrapper/index.tsx","./src/components/browser/iframecontainer/iframestyles.ts","./src/components/browser/iframecontainer/index.tsx","./src/components/browser/iframecontainer/useiframescaling.ts","./src/components/browser/toolbar/index.tsx","./src/components/browser/toolbar/toolbarbutton/index.tsx","./src/components/browser/toolbar/toolbarslot/index.tsx","./src/components/browser/viewportcustomizer/index.tsx","./src/components/browser/viewportselector/index.tsx","./src/components/buttongroup/index.tsx","./src/entrypoints/configscreen/index.tsx","./src/entrypoints/configscreen/iconpickerinput/iconpickermodal.tsx","./src/entrypoints/configscreen/iconpickerinput/index.tsx","./src/entrypoints/configscreen/components/customheaderslist.tsx","./src/entrypoints/configscreen/components/frontendfielditem.tsx","./src/entrypoints/configscreen/components/previewlinkssection.tsx","./src/entrypoints/configscreen/components/previewlinkssettings.tsx","./src/entrypoints/configscreen/components/viewportfielditem.tsx","./src/entrypoints/configscreen/components/visualeditingsection.tsx","./src/entrypoints/inspector/index.tsx","./src/entrypoints/inspector/normalizepathforvisualediting.ts","./src/entrypoints/inspector/contentlinkcontext/index.tsx","./src/entrypoints/inspector/contentlinkcontext/types.ts","./src/entrypoints/inspector/contentlinkcontext/usecontentlinkconnection.ts","./src/entrypoints/inspector/contentlinkcontext/usemethodproxy.ts","./src/entrypoints/inspector/ui/index.tsx","./src/entrypoints/inspector/ui/addressbar/index.tsx","./src/entrypoints/inspector/ui/addressbar/frontendselector/index.tsx","./src/entrypoints/inspector/ui/editmodetoggle/index.tsx","./src/entrypoints/inspectorloading/index.tsx","./src/entrypoints/sidebarframe/index.tsx","./src/entrypoints/sidebarframe/previewlinkselector/index.tsx","./src/entrypoints/sidebarframe/previewlinkselector/frontendgroup/index.tsx","./src/entrypoints/sidebarframe/previewlinkselector/frontendpreviewlinks/index.tsx","./src/entrypoints/sidebarframe/previewlinkselector/trigger/index.tsx","./src/entrypoints/sidebarpanel/index.tsx","./src/entrypoints/wrongenvironmentpanel/index.tsx","./src/utils/common.ts","./src/utils/persistedwidth.ts","./src/utils/render.tsx","./src/utils/urls.tsx","./penpal.d.ts"],"version":"5.9.3"} \ No newline at end of file diff --git a/web-previews/tsconfig.node.tsbuildinfo b/web-previews/tsconfig.node.tsbuildinfo index c80538a9..3e17fb3c 100644 --- a/web-previews/tsconfig.node.tsbuildinfo +++ b/web-previews/tsconfig.node.tsbuildinfo @@ -1 +1 @@ -{"root":["./vite.config.ts","./penpal.d.ts"],"version":"5.7.2"} \ No newline at end of file +{"root":["./vite.config.ts","./penpal.d.ts"],"version":"5.9.3"} \ No newline at end of file From f69979249688f2a5a234d8e5344fb9436ef7becf Mon Sep 17 00:00:00 2001 From: Silvano Stralla Date: Wed, 22 Apr 2026 12:52:31 +0200 Subject: [PATCH 3/8] Fix toolbar colors --- web-previews/package-lock.json | 4 ++-- web-previews/package.json | 2 +- web-previews/src/components/Browser/Toolbar/styles.module.css | 2 +- .../components/Browser/ViewportCustomizer/styles.module.css | 2 +- .../src/entrypoints/WrongEnvironmentPanel/styles.module.css | 2 +- 5 files changed, 6 insertions(+), 6 deletions(-) diff --git a/web-previews/package-lock.json b/web-previews/package-lock.json index 7731bf60..c8e085bb 100644 --- a/web-previews/package-lock.json +++ b/web-previews/package-lock.json @@ -1,12 +1,12 @@ { "name": "datocms-plugin-web-previews", - "version": "1.1.0-0", + "version": "1.1.1-0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "datocms-plugin-web-previews", - "version": "1.1.0-0", + "version": "1.1.1-0", "license": "GPLv3", "dependencies": { "@floating-ui/react": "^0.27.19", diff --git a/web-previews/package.json b/web-previews/package.json index 5b6701f2..be7d6c12 100644 --- a/web-previews/package.json +++ b/web-previews/package.json @@ -2,7 +2,7 @@ "name": "datocms-plugin-web-previews", "homepage": "https://github.com/datocms/plugins/tree/master/web-previews#readme", "description": "Add a Visual tab for full-screen side-by-side editing with click-to-edit overlays, preview links in the record sidebar, and inline iframe previews with viewport presets", - "version": "1.1.0-0", + "version": "1.1.1-0", "author": "DatoCMS ", "license": "GPLv3", "files": [ diff --git a/web-previews/src/components/Browser/Toolbar/styles.module.css b/web-previews/src/components/Browser/Toolbar/styles.module.css index 90a14f1f..16e4827f 100644 --- a/web-previews/src/components/Browser/Toolbar/styles.module.css +++ b/web-previews/src/components/Browser/Toolbar/styles.module.css @@ -3,7 +3,7 @@ display: flex; align-items: stretch; min-height: 45px; - background-color: white; + background-color: var(--color--surface); position: relative; z-index: 1; } diff --git a/web-previews/src/components/Browser/ViewportCustomizer/styles.module.css b/web-previews/src/components/Browser/ViewportCustomizer/styles.module.css index 708266a6..dd890c87 100644 --- a/web-previews/src/components/Browser/ViewportCustomizer/styles.module.css +++ b/web-previews/src/components/Browser/ViewportCustomizer/styles.module.css @@ -4,7 +4,7 @@ left: 50%; transform: translateX(-50%); z-index: 10; - background: white; + background: var(--color--raised--surface); border-radius: 20px; padding: 6px 25px; display: flex; diff --git a/web-previews/src/entrypoints/WrongEnvironmentPanel/styles.module.css b/web-previews/src/entrypoints/WrongEnvironmentPanel/styles.module.css index d4ac7deb..a3088d50 100644 --- a/web-previews/src/entrypoints/WrongEnvironmentPanel/styles.module.css +++ b/web-previews/src/entrypoints/WrongEnvironmentPanel/styles.module.css @@ -12,7 +12,7 @@ } .container { - background: white; + background: var(--color--surface); border: 1px solid var(--color--border); border-radius: 8px; padding: var(--spacing-xl); From ed6c517bbac8db0d32736de73b883c18724db818 Mon Sep 17 00:00:00 2001 From: Silvano Stralla Date: Wed, 29 Apr 2026 15:04:14 +0200 Subject: [PATCH 4/8] Add support for dark-mode to ai-translations plugin --- ai-translations/package-lock.json | 40 +++++++++---------- ai-translations/package.json | 6 +-- .../components/TranslationProgressModal.css | 26 ++++++------ .../VendorConfigs/GlossaryPairEditor.tsx | 2 +- .../AIBulkTranslationsPage.module.css | 34 ++++++++-------- .../src/entrypoints/styles.module.css | 12 +++--- 6 files changed, 61 insertions(+), 59 deletions(-) diff --git a/ai-translations/package-lock.json b/ai-translations/package-lock.json index 7f07562c..6fa4e721 100644 --- a/ai-translations/package-lock.json +++ b/ai-translations/package-lock.json @@ -1,18 +1,18 @@ { "name": "datocms-plugin-ai-translations", - "version": "3.4.2", + "version": "3.5.0-0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "datocms-plugin-ai-translations", - "version": "3.4.2", + "version": "3.5.0-0", "dependencies": { "@anthropic-ai/sdk": "^0.78.0", "@datocms/cma-client-browser": "^5.3.0", "@google/generative-ai": "^0.24.1", - "datocms-plugin-sdk": "^2.1.1", - "datocms-react-ui": "^2.1.4", + "datocms-plugin-sdk": "3.0.1-alpha.0", + "datocms-react-ui": "3.0.1-alpha.0", "framer-motion": "^12.38.0", "locale-codes": "^1.3.1", "openai": "^6.33.0", @@ -2248,6 +2248,15 @@ "node": ">=10" } }, + "node_modules/cosmiconfig/node_modules/yaml": { + "version": "1.10.3", + "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.3.tgz", + "integrity": "sha512-vIYeF1u3CjlhAFekPPAk2h/Kv4T3mAkMox5OymRiJQB0spDP10LHvt+K7G9Ny6NuuMAb25/6n1qyUjAcGNf/AA==", + "license": "ISC", + "engines": { + "node": ">= 6" + } + }, "node_modules/css-tree": { "version": "3.2.1", "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-3.2.1.tgz", @@ -2316,9 +2325,9 @@ } }, "node_modules/datocms-plugin-sdk": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/datocms-plugin-sdk/-/datocms-plugin-sdk-2.1.1.tgz", - "integrity": "sha512-W+kWEAgfSwjPHzF4aZNMdhavZANUByEfeOgxZ5ksJq7nrCbhKO+Rh6aSueV85C49mjsmZoDSS0RaGN9fFnM8LQ==", + "version": "3.0.1-alpha.0", + "resolved": "https://registry.npmjs.org/datocms-plugin-sdk/-/datocms-plugin-sdk-3.0.1-alpha.0.tgz", + "integrity": "sha512-G8l8ZZBWWVZodnD9CR6FgtSUrHPD9yV3T/HjrI4+BfD/sle+Z2Cbpc71gHMJTrYguQLete34CnSDYuZ1cfLRIw==", "license": "MIT", "dependencies": { "@datocms/cma-client": "*", @@ -2349,14 +2358,14 @@ } }, "node_modules/datocms-react-ui": { - "version": "2.1.4", - "resolved": "https://registry.npmjs.org/datocms-react-ui/-/datocms-react-ui-2.1.4.tgz", - "integrity": "sha512-WNZi5tR1U2SPj3AUq/WV39WqTOR17sFhnTCx8VILnwUvOKl0/Nw+MqNX6MbjPr86odCCSeMEWCWEbRqHvEiecA==", + "version": "3.0.1-alpha.0", + "resolved": "https://registry.npmjs.org/datocms-react-ui/-/datocms-react-ui-3.0.1-alpha.0.tgz", + "integrity": "sha512-s6d+HKz51fLzSDbm77pFbbo9GI3crYFedTScSy0vpa+vPzVvl40SNtwmLRkNQOa7WT8iKdUnFQYT44bywYZGBw==", "license": "MIT", "dependencies": { "@floating-ui/react": "^0.27.16", "classnames": "^2.3.1", - "datocms-plugin-sdk": "^2.1.1", + "datocms-plugin-sdk": "^3.0.1-alpha.0", "react-intersection-observer": "^8.31.0", "react-select": "^5.2.1", "scroll-into-view-if-needed": "^2.2.20" @@ -4163,15 +4172,6 @@ "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==", "dev": true, "license": "ISC" - }, - "node_modules/yaml": { - "version": "1.10.3", - "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.3.tgz", - "integrity": "sha512-vIYeF1u3CjlhAFekPPAk2h/Kv4T3mAkMox5OymRiJQB0spDP10LHvt+K7G9Ny6NuuMAb25/6n1qyUjAcGNf/AA==", - "license": "ISC", - "engines": { - "node": ">= 6" - } } } } diff --git a/ai-translations/package.json b/ai-translations/package.json index d2f37a1c..443b5811 100644 --- a/ai-translations/package.json +++ b/ai-translations/package.json @@ -1,7 +1,7 @@ { "name": "datocms-plugin-ai-translations", "homepage": "https://github.com/datocms/plugins/tree/master/ai-translations#readme", - "version": "3.4.2", + "version": "3.5.0-0", "author": "DatoCMS ", "description": "Translate fields and records directly on DatoCMS using AI", "keywords": [ @@ -37,8 +37,8 @@ "@anthropic-ai/sdk": "^0.78.0", "@datocms/cma-client-browser": "^5.3.0", "@google/generative-ai": "^0.24.1", - "datocms-plugin-sdk": "^2.1.1", - "datocms-react-ui": "^2.1.4", + "datocms-plugin-sdk": "3.0.1-alpha.0", + "datocms-react-ui": "3.0.1-alpha.0", "framer-motion": "^12.38.0", "locale-codes": "^1.3.1", "openai": "^6.33.0", diff --git a/ai-translations/src/components/TranslationProgressModal.css b/ai-translations/src/components/TranslationProgressModal.css index 87f573d8..b0765aa9 100644 --- a/ai-translations/src/components/TranslationProgressModal.css +++ b/ai-translations/src/components/TranslationProgressModal.css @@ -38,14 +38,14 @@ .TranslationProgressModal__stats { margin: 4px 0 0 0 !important; font-size: 14px; - color: var(--light-body-color); + color: var(--color--ink-subtle); } .TranslationProgressModal__progress-bar { height: 8px; width: 100%; - background-color: var(--light-bg-color); - border: 1px solid var(--border-color); + background-color: var(--color--surface-muted); + border: 1px solid var(--color--border); border-radius: 999px; margin: 8px 0 16px 0; overflow: hidden; @@ -53,7 +53,7 @@ .TranslationProgressModal__progress-bar-fill { height: 100%; - background-color: var(--accent-color); + background-color: var(--color--primary--surface); box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.1); transition: width 0.3s ease-in-out; } @@ -78,9 +78,9 @@ align-items: center; gap: 8px; font-size: var(--font-size-s); - color: var(--base-body-color); + color: var(--color--ink); text-align: left; - border-top: 1px solid var(--border-color); + border-top: 1px solid var(--color--border); } .TranslationProgressModal__update-item:first-child { @@ -96,19 +96,19 @@ .TranslationProgressModal__update-item--completed .TranslationProgressModal__update-status { - color: var(--success-color); + color: var(--color--feedback-success--ink); font-weight: 700; } .TranslationProgressModal__update-item--error .TranslationProgressModal__update-status { - color: var(--alert-color); + color: var(--color--danger--ink); font-weight: 700; } .TranslationProgressModal__update-item--processing .TranslationProgressModal__update-status { - color: var(--accent-color); + color: var(--color--primary--surface); } .TranslationProgressModal__update-message { @@ -118,7 +118,7 @@ .TranslationProgressModal__initializing { padding: 20px; text-align: center; - color: var(--light-body-color); + color: var(--color--ink-subtle); } .TranslationProgressModal__spinner-container { @@ -130,8 +130,8 @@ .TranslationProgressModal__errors { padding: 12px; - background-color: var(--alert-light-bg-color); - color: var(--alert-color); + background-color: var(--color--feedback-fail--outline); + color: var(--color--danger--ink); border-radius: 4px; margin-bottom: 20px; font-size: 14px; @@ -149,7 +149,7 @@ width: 100%; gap: var(--spacing-m); padding-top: var(--spacing-m); - border-top: 1px solid var(--border-color); + border-top: 1px solid var(--color--border); } /* * TranslationProgressModal.css diff --git a/ai-translations/src/entrypoints/Config/VendorConfigs/GlossaryPairEditor.tsx b/ai-translations/src/entrypoints/Config/VendorConfigs/GlossaryPairEditor.tsx index 54f72949..4d46601f 100644 --- a/ai-translations/src/entrypoints/Config/VendorConfigs/GlossaryPairEditor.tsx +++ b/ai-translations/src/entrypoints/Config/VendorConfigs/GlossaryPairEditor.tsx @@ -261,7 +261,7 @@ export default function GlossaryPairEditor({ style={{ flex: 1, minWidth: 0, - border: '1px solid var(--border-color, #e0e0e0)', + border: '1px solid var(--color--border)', borderRadius: 4, padding: '10px 12px', }} diff --git a/ai-translations/src/entrypoints/CustomPage/AIBulkTranslationsPage.module.css b/ai-translations/src/entrypoints/CustomPage/AIBulkTranslationsPage.module.css index 84678b7e..56be77eb 100644 --- a/ai-translations/src/entrypoints/CustomPage/AIBulkTranslationsPage.module.css +++ b/ai-translations/src/entrypoints/CustomPage/AIBulkTranslationsPage.module.css @@ -6,7 +6,7 @@ justify-content: flex-start; align-items: center; flex-direction: column; - background: var(--page-background, #f6f8fb); + background: var(--color--surface); } .container { @@ -16,10 +16,10 @@ .card { position: relative; - background: var(--surface-color, #ffffff); + background: var(--color--surface-muted); border-radius: 18px; padding: 26px 26px 24px; - border: 1px solid rgba(148, 163, 184, 0.15); + border: 1px solid var(--color--border); box-shadow: 0 12px 28px rgba(15, 23, 42, 0.07); display: flex; flex-direction: column; @@ -33,7 +33,7 @@ left: 26px; right: 26px; height: 1px; - background: rgba(148, 163, 184, 0.28); + background: var(--color--border); } .cardHeader { @@ -46,14 +46,14 @@ margin: 0; font-size: var(--font-size-xl); font-weight: 600; - color: var(--base-body-color); + color: var(--color--ink); } .cardCaption { margin: 0; font-size: var(--font-size-xs); line-height: 1.5; - color: var(--light-body-color); + color: var(--color--ink-subtle); } .section { @@ -67,7 +67,7 @@ letter-spacing: 0.08em; font-weight: 600; text-transform: uppercase; - color: rgba(71, 85, 105, 0.78); + color: var(--color--ink-subtle); } .localeRow { @@ -83,7 +83,7 @@ display: flex; align-items: center; justify-content: center; - color: var(--base-body-color); + color: var(--color--ink); font-size: 18px; font-weight: 600; } @@ -99,9 +99,9 @@ border-radius: 999px; font-size: 12px; font-weight: 500; - background: rgba(93, 90, 252, 0.12); - color: var(--accent-color, #5d5afc); - border: 1px solid rgba(93, 90, 252, 0.18); + background: var(--color--accent--surface); + color: var(--color--accent--ink); + border: 1px solid var(--color--accent--ink); } .actions { @@ -112,24 +112,24 @@ .helperText { font-size: 12px; - color: rgba(71, 85, 105, 0.82); + color: var(--color--ink-subtle); text-align: center; } .statusReady { - color: var(--accent-color, #5d5afc); + color: var(--color--accent--ink); font-weight: 600; } .statusPending { - color: #f97316; + color: var(--color--feedback-warning--ink); font-weight: 600; } .loadingOverlay { position: absolute; inset: 0; - background: rgba(246, 248, 251, 0.94); + background: var(--color--overlay--surface); border-radius: 18px; display: flex; flex-direction: column; @@ -140,13 +140,13 @@ .loadingText { font-size: 13px; - color: rgba(71, 85, 105, 0.8); + color: var(--color--ink-subtle); } .footerNote { margin-top: 22px; font-size: 12px; - color: rgba(71, 85, 105, 0.8); + color: var(--color--ink-subtle); text-align: center; } diff --git a/ai-translations/src/entrypoints/styles.module.css b/ai-translations/src/entrypoints/styles.module.css index b2b9b18c..72a6a975 100644 --- a/ai-translations/src/entrypoints/styles.module.css +++ b/ai-translations/src/entrypoints/styles.module.css @@ -148,28 +148,30 @@ outline: none; font-family: inherit; font-size: inherit; + background-color: var(--color-surface); + color: var(--color--ink); } .label { - color: var(--light-body-color); + color: var(--color--ink-subtle); } .hint { font-size: var(--font-size-xs); - color: var(--light-body-color); + color: var(--color--ink-subtle); } .fieldLabelTitle { font-size: var(--font-size-xl); font-weight: 600; - color: var(--base-body-color); + color: var(--color--ink); margin-top: 16px; } .fieldLabelHint { margin-top: -16px; font-size: var(--font-size-m); - color: var(--light-body-color); + color: var(--color--ink-subtle); margin-bottom: 16px; } @@ -210,7 +212,7 @@ display: inline-block; cursor: help; margin-left: 8px; - color: #faad14; + color: var(--color--feedback-warning--ink); } /* Standard tooltip that appears below the info icon */ From 9d0242beaef966b564d77f7a3b81f658f6414cc2 Mon Sep 17 00:00:00 2001 From: Silvano Stralla Date: Wed, 29 Apr 2026 15:04:16 +0200 Subject: [PATCH 5/8] Add support for dark-mode to seo-readability-analysis plugin --- seo-readability-analysis/package-lock.json | 31 +++++++++++------- seo-readability-analysis/package.json | 6 ++-- seo-readability-analysis/src/style.css | 38 +++++++++++----------- 3 files changed, 42 insertions(+), 33 deletions(-) diff --git a/seo-readability-analysis/package-lock.json b/seo-readability-analysis/package-lock.json index 12f5d42b..997604a0 100644 --- a/seo-readability-analysis/package-lock.json +++ b/seo-readability-analysis/package-lock.json @@ -1,17 +1,17 @@ { "name": "datocms-plugin-seo-readability-analysis", - "version": "0.1.21", + "version": "0.2.0-0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "datocms-plugin-seo-readability-analysis", - "version": "0.1.21", + "version": "0.2.0-0", "license": "GPLv3", "dependencies": { "@types/lodash-es": "^4.17.12", - "datocms-plugin-sdk": "^2.1.1", - "datocms-react-ui": "^2.1.4", + "datocms-plugin-sdk": "3.0.1-alpha.0", + "datocms-react-ui": "3.0.1-alpha.0", "final-form": "^5.0.0", "lodash-es": "^4.17.23", "react": "^19.2.4", @@ -67,6 +67,7 @@ "integrity": "sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@babel/code-frame": "^7.29.0", "@babel/generator": "^7.29.0", @@ -1479,6 +1480,7 @@ "integrity": "sha512-jp2P3tQMSxWugkCUKLRPVUpGaL5MVFwF8RDuSRztfwgN1wmqJeMSbKlnEtQqU8UrhTmzEmZdu2I6v2dpp7XIxw==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "undici-types": "~7.18.0" } @@ -1500,6 +1502,7 @@ "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.14.tgz", "integrity": "sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==", "license": "MIT", + "peer": true, "dependencies": { "csstype": "^3.2.2" } @@ -1791,6 +1794,7 @@ } ], "license": "MIT", + "peer": true, "dependencies": { "baseline-browser-mapping": "^2.10.12", "caniuse-lite": "^1.0.30001782", @@ -1958,9 +1962,9 @@ "license": "MIT" }, "node_modules/datocms-plugin-sdk": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/datocms-plugin-sdk/-/datocms-plugin-sdk-2.1.1.tgz", - "integrity": "sha512-W+kWEAgfSwjPHzF4aZNMdhavZANUByEfeOgxZ5ksJq7nrCbhKO+Rh6aSueV85C49mjsmZoDSS0RaGN9fFnM8LQ==", + "version": "3.0.1-alpha.0", + "resolved": "https://registry.npmjs.org/datocms-plugin-sdk/-/datocms-plugin-sdk-3.0.1-alpha.0.tgz", + "integrity": "sha512-G8l8ZZBWWVZodnD9CR6FgtSUrHPD9yV3T/HjrI4+BfD/sle+Z2Cbpc71gHMJTrYguQLete34CnSDYuZ1cfLRIw==", "license": "MIT", "dependencies": { "@datocms/cma-client": "*", @@ -1982,14 +1986,14 @@ } }, "node_modules/datocms-react-ui": { - "version": "2.1.4", - "resolved": "https://registry.npmjs.org/datocms-react-ui/-/datocms-react-ui-2.1.4.tgz", - "integrity": "sha512-WNZi5tR1U2SPj3AUq/WV39WqTOR17sFhnTCx8VILnwUvOKl0/Nw+MqNX6MbjPr86odCCSeMEWCWEbRqHvEiecA==", + "version": "3.0.1-alpha.0", + "resolved": "https://registry.npmjs.org/datocms-react-ui/-/datocms-react-ui-3.0.1-alpha.0.tgz", + "integrity": "sha512-s6d+HKz51fLzSDbm77pFbbo9GI3crYFedTScSy0vpa+vPzVvl40SNtwmLRkNQOa7WT8iKdUnFQYT44bywYZGBw==", "license": "MIT", "dependencies": { "@floating-ui/react": "^0.27.16", "classnames": "^2.3.1", - "datocms-plugin-sdk": "^2.1.1", + "datocms-plugin-sdk": "^3.0.1-alpha.0", "react-intersection-observer": "^8.31.0", "react-select": "^5.2.1", "scroll-into-view-if-needed": "^2.2.20" @@ -2335,6 +2339,7 @@ "resolved": "https://registry.npmjs.org/final-form/-/final-form-5.0.0.tgz", "integrity": "sha512-HByosvP7x3N4bWTCPoBeUeoMatadewRifxaH3qhCQI2DBwFNO0m5wxETLVUXNGWz2yokdSCMdJEvtjfZoXnqDA==", "license": "MIT", + "peer": true, "dependencies": { "@babel/runtime": "^7.10.0" }, @@ -2872,6 +2877,7 @@ "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==", "dev": true, "license": "MIT", + "peer": true, "engines": { "node": ">=12" }, @@ -2953,6 +2959,7 @@ "resolved": "https://registry.npmjs.org/react/-/react-19.2.4.tgz", "integrity": "sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==", "license": "MIT", + "peer": true, "engines": { "node": ">=0.10.0" } @@ -2962,6 +2969,7 @@ "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.4.tgz", "integrity": "sha512-AXJdLo8kgMbimY95O2aKQqsz2iWi9jMgKJhRBAxECE4IFxfcazB2LmzloIoibJI3C12IlY20+KFaLv+71bUJeQ==", "license": "MIT", + "peer": true, "dependencies": { "scheduler": "^0.27.0" }, @@ -3541,6 +3549,7 @@ "integrity": "sha512-Bby3NOsna2jsjfLVOHKes8sGwgl4TT0E6vvpYgnAYDIF/tie7MRaFthmKuHx1NSXjiTueXH3do80FMQgvEktRg==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "esbuild": "^0.27.0", "fdir": "^6.5.0", diff --git a/seo-readability-analysis/package.json b/seo-readability-analysis/package.json index 1d7a11f5..7c1cc35a 100644 --- a/seo-readability-analysis/package.json +++ b/seo-readability-analysis/package.json @@ -1,7 +1,7 @@ { "name": "datocms-plugin-seo-readability-analysis", "homepage": "https://github.com/datocms/plugins/tree/master/seo-readability-analysis#readme", - "version": "0.1.21", + "version": "0.2.0-0", "description": "Run SEO/Readability analysis using YoastSEO.js on your frontend everytime you make a change to the content of a record", "author": "DatoCMS ", "license": "GPLv3", @@ -28,8 +28,8 @@ }, "dependencies": { "@types/lodash-es": "^4.17.12", - "datocms-plugin-sdk": "^2.1.1", - "datocms-react-ui": "^2.1.4", + "datocms-plugin-sdk": "3.0.1-alpha.0", + "datocms-react-ui": "3.0.1-alpha.0", "final-form": "^5.0.0", "lodash-es": "^4.17.23", "react": "^19.2.4", diff --git a/seo-readability-analysis/src/style.css b/seo-readability-analysis/src/style.css index 395cc5d6..887ddaab 100644 --- a/seo-readability-analysis/src/style.css +++ b/seo-readability-analysis/src/style.css @@ -1,13 +1,13 @@ .Plugin { - border: 1px solid var(--border-color); + border: 1px solid var(--color--border); overflow: hidden; border-radius: 4px; - background-color: var(--light-bg-color); + background-color: var(--color--surface-muted); } .Plugin__bar { display: flex; - color: var(--light-body-color); + color: var(--color--ink-subtle); line-height: 1; align-items: flex-end; flex-wrap: wrap; @@ -49,14 +49,14 @@ all: inherit; margin-top: 5px; padding: 15px 15px 10px; - background-color: rgba(255, 255, 255, 0.8); + background-color: var(--color--surface-muted); border-radius: 4px 4px 0 0; border: 0; margin-left: 5px; box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.1) inset; display: block; text-decoration: none; - color: var(--light-body-color); + color: var(--color--ink-subtle); white-space: nowrap; } @@ -77,19 +77,19 @@ .Plugin__bar__option.is-active { box-shadow: none; - color: var(--base-body-color); - background-color: white; + color: var(--color--ink); + background-color: var(--color--surface); } .Plugin__content { - background-color: white; + background-color: var(--color--surface); border-radius: 4px; } .Plugin__seo, .Plugin__readability { padding: 15px; - border-bottom: 1px solid var(--border-color); + border-bottom: 1px solid var(--color--border); } .Plugin__seo:last-child, @@ -109,7 +109,7 @@ } .Plugin__form label { - color: var(--light-body-color); + color: var(--color--ink-subtle); margin-bottom: 4px; } @@ -125,7 +125,7 @@ } .Plugin__line-with-decoration a { - color: var(--base-body-color); + color: var(--color--ink); } .Plugin__line-with-decoration__decoration { @@ -157,12 +157,12 @@ .Plugin__result-group-title { all: unset; - color: var(--light-body-color); + color: var(--color--ink-subtle); cursor: pointer; } .Plugin__result-group-title svg { - stroke: var(--light-body-color); + stroke: var(--color--ink-subtle); } .Plugin__result-item { @@ -174,7 +174,7 @@ margin-right: 4px; width: 12px; height: 12px; - stroke: #333333; + stroke: var(--color--ink); stroke-width: 6px; fill: none; } @@ -184,7 +184,7 @@ } .Plugin__button-wrapper { - border-top: 1px solid #f0f0f0; + border-top: 1px solid var(--color--border); padding-top: 12px; margin-top: 12px; } @@ -194,7 +194,7 @@ } .Plugin__marks { - border: 1px solid var(--border-color); + border: 1px solid var(--color--border); border-radius: 4px; margin-top: 15px; margin-bottom: 25px; @@ -202,7 +202,7 @@ .Plugin__mark { padding: 15px; - border-bottom: 1px solid var(--border-color); + border-bottom: 1px solid var(--color--border); } .Plugin__mark:last-child { @@ -215,7 +215,7 @@ } .Plugin__mark.with-highlights .yoast-text-mark { - background: #fff9b7; + background: var(--color--feedback-warning--surface); padding: 0.1em 0.2em; border-radius: 3px; } @@ -225,7 +225,7 @@ } .Plugin__bar__status-error { - color: var(--alert-color); + color: var(--color--danger--ink); } .Plugin__add-new { From f36e3e17b4a40c925ed50c5d5b9e9f33ff8172e2 Mon Sep 17 00:00:00 2001 From: Silvano Stralla Date: Wed, 29 Apr 2026 15:04:19 +0200 Subject: [PATCH 6/8] Add support for dark-mode to star-rating-editor plugin --- star-rating-editor/package-lock.json | 48 +++++++++++++------ star-rating-editor/package.json | 6 +-- .../src/components/ColorInput.module.css | 3 ++ .../src/components/ColorInput.tsx | 18 ++++++- .../src/entrypoints/StarRatingEditor.tsx | 3 ++ 5 files changed, 59 insertions(+), 19 deletions(-) create mode 100644 star-rating-editor/src/components/ColorInput.module.css diff --git a/star-rating-editor/package-lock.json b/star-rating-editor/package-lock.json index df2144c6..e825f235 100644 --- a/star-rating-editor/package-lock.json +++ b/star-rating-editor/package-lock.json @@ -1,19 +1,19 @@ { "name": "datocms-plugin-star-rating-editor", - "version": "0.2.2", + "version": "0.3.0-0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "datocms-plugin-star-rating-editor", - "version": "0.2.2", + "version": "0.3.0-0", "dependencies": { "@types/lodash-es": "^4.17.12", "@types/react": "^19.2.14", "@types/react-color": "^3.0.13", "@types/react-dom": "^19.2.3", - "datocms-plugin-sdk": "^2.1.1", - "datocms-react-ui": "^2.1.4", + "datocms-plugin-sdk": "3.0.1-alpha.0", + "datocms-react-ui": "3.0.1-alpha.0", "lodash-es": "^4.17.23", "react": "^19.2.4", "react-color": "^2.19.3", @@ -1651,6 +1651,15 @@ "node": ">=10" } }, + "node_modules/cosmiconfig/node_modules/yaml": { + "version": "1.10.3", + "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.3.tgz", + "integrity": "sha512-vIYeF1u3CjlhAFekPPAk2h/Kv4T3mAkMox5OymRiJQB0spDP10LHvt+K7G9Ny6NuuMAb25/6n1qyUjAcGNf/AA==", + "license": "ISC", + "engines": { + "node": ">= 6" + } + }, "node_modules/cross-env": { "version": "10.1.0", "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-10.1.0.tgz", @@ -1691,9 +1700,9 @@ "license": "MIT" }, "node_modules/datocms-plugin-sdk": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/datocms-plugin-sdk/-/datocms-plugin-sdk-2.1.1.tgz", - "integrity": "sha512-W+kWEAgfSwjPHzF4aZNMdhavZANUByEfeOgxZ5ksJq7nrCbhKO+Rh6aSueV85C49mjsmZoDSS0RaGN9fFnM8LQ==", + "version": "3.0.1-alpha.0", + "resolved": "https://registry.npmjs.org/datocms-plugin-sdk/-/datocms-plugin-sdk-3.0.1-alpha.0.tgz", + "integrity": "sha512-G8l8ZZBWWVZodnD9CR6FgtSUrHPD9yV3T/HjrI4+BfD/sle+Z2Cbpc71gHMJTrYguQLete34CnSDYuZ1cfLRIw==", "license": "MIT", "dependencies": { "@datocms/cma-client": "*", @@ -1715,14 +1724,14 @@ } }, "node_modules/datocms-react-ui": { - "version": "2.1.4", - "resolved": "https://registry.npmjs.org/datocms-react-ui/-/datocms-react-ui-2.1.4.tgz", - "integrity": "sha512-WNZi5tR1U2SPj3AUq/WV39WqTOR17sFhnTCx8VILnwUvOKl0/Nw+MqNX6MbjPr86odCCSeMEWCWEbRqHvEiecA==", + "version": "3.0.1-alpha.0", + "resolved": "https://registry.npmjs.org/datocms-react-ui/-/datocms-react-ui-3.0.1-alpha.0.tgz", + "integrity": "sha512-s6d+HKz51fLzSDbm77pFbbo9GI3crYFedTScSy0vpa+vPzVvl40SNtwmLRkNQOa7WT8iKdUnFQYT44bywYZGBw==", "license": "MIT", "dependencies": { "@floating-ui/react": "^0.27.16", "classnames": "^2.3.1", - "datocms-plugin-sdk": "^2.1.1", + "datocms-plugin-sdk": "^3.0.1-alpha.0", "react-intersection-observer": "^8.31.0", "react-select": "^5.2.1", "scroll-into-view-if-needed": "^2.2.20" @@ -2769,12 +2778,21 @@ "license": "ISC" }, "node_modules/yaml": { - "version": "1.10.3", - "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.3.tgz", - "integrity": "sha512-vIYeF1u3CjlhAFekPPAk2h/Kv4T3mAkMox5OymRiJQB0spDP10LHvt+K7G9Ny6NuuMAb25/6n1qyUjAcGNf/AA==", + "version": "2.8.3", + "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.3.tgz", + "integrity": "sha512-AvbaCLOO2Otw/lW5bmh9d/WEdcDFdQp2Z2ZUH3pX9U2ihyUY0nvLv7J6TrWowklRGPYbB/IuIMfYgxaCPg5Bpg==", + "dev": true, "license": "ISC", + "optional": true, + "peer": true, + "bin": { + "yaml": "bin.mjs" + }, "engines": { - "node": ">= 6" + "node": ">= 14.6" + }, + "funding": { + "url": "https://github.com/sponsors/eemeli" } } } diff --git a/star-rating-editor/package.json b/star-rating-editor/package.json index 986fce04..bd4ee371 100644 --- a/star-rating-editor/package.json +++ b/star-rating-editor/package.json @@ -1,6 +1,6 @@ { "name": "datocms-plugin-star-rating-editor", - "version": "0.2.2", + "version": "0.3.0-0", "homepage": "https://github.com/datocms/plugins/tree/master/star-rating-editor#readme", "description": "A plugin that presents integer fields as star rating widgets", "dependencies": { @@ -8,8 +8,8 @@ "@types/react": "^19.2.14", "@types/react-color": "^3.0.13", "@types/react-dom": "^19.2.3", - "datocms-plugin-sdk": "^2.1.1", - "datocms-react-ui": "^2.1.4", + "datocms-plugin-sdk": "3.0.1-alpha.0", + "datocms-react-ui": "3.0.1-alpha.0", "lodash-es": "^4.17.23", "react": "^19.2.4", "react-color": "^2.19.3", diff --git a/star-rating-editor/src/components/ColorInput.module.css b/star-rating-editor/src/components/ColorInput.module.css new file mode 100644 index 00000000..bd826168 --- /dev/null +++ b/star-rating-editor/src/components/ColorInput.module.css @@ -0,0 +1,3 @@ +.wrapper :global(.block-picker) span > div { + box-shadow: 0 0 0 1px var(--color--border) inset; +} diff --git a/star-rating-editor/src/components/ColorInput.tsx b/star-rating-editor/src/components/ColorInput.tsx index a47e38c5..d7a789f9 100644 --- a/star-rating-editor/src/components/ColorInput.tsx +++ b/star-rating-editor/src/components/ColorInput.tsx @@ -1,6 +1,7 @@ import { useCtx } from 'datocms-react-ui'; import { BlockPicker } from 'react-color'; import { defaultStarsColor } from '../utils/globalParams'; +import s from './ColorInput.module.css'; type ColorInputProps = { value: string | undefined; @@ -12,6 +13,7 @@ export default function ColorInput({ value, onChange }: ColorInputProps) { const { accentColor, primaryColor } = ctx.theme; return ( +
onChange(color.hex)} /> +
); } diff --git a/star-rating-editor/src/entrypoints/StarRatingEditor.tsx b/star-rating-editor/src/entrypoints/StarRatingEditor.tsx index 9ecdf04c..20fd518e 100644 --- a/star-rating-editor/src/entrypoints/StarRatingEditor.tsx +++ b/star-rating-editor/src/entrypoints/StarRatingEditor.tsx @@ -22,10 +22,13 @@ const StarRatingEditor = ({ ctx }: PropTypes) => { From fea21ca72c156c4e9943105a41f99d40a4ca7450 Mon Sep 17 00:00:00 2001 From: Silvano Stralla Date: Wed, 29 Apr 2026 15:04:23 +0200 Subject: [PATCH 7/8] Add support for dark-mode to tag-editor plugin --- tag-editor/package-lock.json | 48 +++++++++++++------ tag-editor/package.json | 6 +-- .../FieldExtension/styles.module.css | 19 +++++--- 3 files changed, 49 insertions(+), 24 deletions(-) diff --git a/tag-editor/package-lock.json b/tag-editor/package-lock.json index e140cf9f..64f93e4f 100644 --- a/tag-editor/package-lock.json +++ b/tag-editor/package-lock.json @@ -1,12 +1,12 @@ { "name": "datocms-plugin-tag-editor", - "version": "0.1.9", + "version": "0.2.0-0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "datocms-plugin-tag-editor", - "version": "0.1.9", + "version": "0.2.0-0", "license": "ISC", "dependencies": { "@fortawesome/fontawesome-svg-core": "^7.2.0", @@ -15,8 +15,8 @@ "@types/react": "^19.2.14", "@types/react-dom": "^19.2.3", "@types/react-tag-input": "6.6.6", - "datocms-plugin-sdk": "^2.1.1", - "datocms-react-ui": "^2.1.4", + "datocms-plugin-sdk": "3.0.1-alpha.0", + "datocms-react-ui": "3.0.1-alpha.0", "final-form-arrays": "^4.0.0", "lodash-es": "^4.17.23", "react": "^19.2.4", @@ -1701,6 +1701,15 @@ "node": ">=10" } }, + "node_modules/cosmiconfig/node_modules/yaml": { + "version": "1.10.3", + "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.3.tgz", + "integrity": "sha512-vIYeF1u3CjlhAFekPPAk2h/Kv4T3mAkMox5OymRiJQB0spDP10LHvt+K7G9Ny6NuuMAb25/6n1qyUjAcGNf/AA==", + "license": "ISC", + "engines": { + "node": ">= 6" + } + }, "node_modules/cross-env": { "version": "10.1.0", "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-10.1.0.tgz", @@ -1741,9 +1750,9 @@ "license": "MIT" }, "node_modules/datocms-plugin-sdk": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/datocms-plugin-sdk/-/datocms-plugin-sdk-2.1.1.tgz", - "integrity": "sha512-W+kWEAgfSwjPHzF4aZNMdhavZANUByEfeOgxZ5ksJq7nrCbhKO+Rh6aSueV85C49mjsmZoDSS0RaGN9fFnM8LQ==", + "version": "3.0.1-alpha.0", + "resolved": "https://registry.npmjs.org/datocms-plugin-sdk/-/datocms-plugin-sdk-3.0.1-alpha.0.tgz", + "integrity": "sha512-G8l8ZZBWWVZodnD9CR6FgtSUrHPD9yV3T/HjrI4+BfD/sle+Z2Cbpc71gHMJTrYguQLete34CnSDYuZ1cfLRIw==", "license": "MIT", "dependencies": { "@datocms/cma-client": "*", @@ -1765,14 +1774,14 @@ } }, "node_modules/datocms-react-ui": { - "version": "2.1.4", - "resolved": "https://registry.npmjs.org/datocms-react-ui/-/datocms-react-ui-2.1.4.tgz", - "integrity": "sha512-WNZi5tR1U2SPj3AUq/WV39WqTOR17sFhnTCx8VILnwUvOKl0/Nw+MqNX6MbjPr86odCCSeMEWCWEbRqHvEiecA==", + "version": "3.0.1-alpha.0", + "resolved": "https://registry.npmjs.org/datocms-react-ui/-/datocms-react-ui-3.0.1-alpha.0.tgz", + "integrity": "sha512-s6d+HKz51fLzSDbm77pFbbo9GI3crYFedTScSy0vpa+vPzVvl40SNtwmLRkNQOa7WT8iKdUnFQYT44bywYZGBw==", "license": "MIT", "dependencies": { "@floating-ui/react": "^0.27.16", "classnames": "^2.3.1", - "datocms-plugin-sdk": "^2.1.1", + "datocms-plugin-sdk": "^3.0.1-alpha.0", "react-intersection-observer": "^8.31.0", "react-select": "^5.2.1", "scroll-into-view-if-needed": "^2.2.20" @@ -2884,12 +2893,21 @@ "license": "ISC" }, "node_modules/yaml": { - "version": "1.10.3", - "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.3.tgz", - "integrity": "sha512-vIYeF1u3CjlhAFekPPAk2h/Kv4T3mAkMox5OymRiJQB0spDP10LHvt+K7G9Ny6NuuMAb25/6n1qyUjAcGNf/AA==", + "version": "2.8.3", + "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.3.tgz", + "integrity": "sha512-AvbaCLOO2Otw/lW5bmh9d/WEdcDFdQp2Z2ZUH3pX9U2ihyUY0nvLv7J6TrWowklRGPYbB/IuIMfYgxaCPg5Bpg==", + "dev": true, "license": "ISC", + "optional": true, + "peer": true, + "bin": { + "yaml": "bin.mjs" + }, "engines": { - "node": ">= 6" + "node": ">= 14.6" + }, + "funding": { + "url": "https://github.com/sponsors/eemeli" } } } diff --git a/tag-editor/package.json b/tag-editor/package.json index 39af9b00..85d0031a 100644 --- a/tag-editor/package.json +++ b/tag-editor/package.json @@ -2,7 +2,7 @@ "name": "datocms-plugin-tag-editor", "homepage": "https://github.com/datocms/plugins/tree/master/tag-editor#readme", "description": "A plugin that transforms any string and JSON field into a tag editor", - "version": "0.1.9", + "version": "0.2.0-0", "author": "DatoCMS ", "license": "ISC", "datoCmsPlugin": { @@ -30,8 +30,8 @@ "@types/react": "^19.2.14", "@types/react-dom": "^19.2.3", "@types/react-tag-input": "6.6.6", - "datocms-plugin-sdk": "^2.1.1", - "datocms-react-ui": "^2.1.4", + "datocms-plugin-sdk": "3.0.1-alpha.0", + "datocms-react-ui": "3.0.1-alpha.0", "final-form-arrays": "^4.0.0", "lodash-es": "^4.17.23", "react": "^19.2.4", diff --git a/tag-editor/src/entrypoints/FieldExtension/styles.module.css b/tag-editor/src/entrypoints/FieldExtension/styles.module.css index 61b4da22..ce974773 100644 --- a/tag-editor/src/entrypoints/FieldExtension/styles.module.css +++ b/tag-editor/src/entrypoints/FieldExtension/styles.module.css @@ -21,7 +21,13 @@ height: 31px; margin: 0; width: 100%; - border: 1px solid #eee !important; + border: 1px solid var(--color--border) !important; + background: var(--color--surface); + color: var(--color--ink); +} + +.tagInputField::placeholder { + color: var(--color--ink-placeholder); } .selected { @@ -31,7 +37,7 @@ /* Styles for selected tags */ .tag { - background: var(--light-color); + background: var(--color--tinted--surface); padding: 5px 10px; margin: 4px 0; margin-right: 5px; @@ -40,7 +46,7 @@ } .remove { - color: #aaa; + color: var(--color--ink-subtle); margin-left: 5px; cursor: pointer; text-decoration: none; @@ -55,11 +61,11 @@ .suggestions ul { list-style-type: none; box-shadow: 0.05em 0.01em 0.5em rgba(0, 0, 0, 0.2); - background: white; + background: var(--color--raised--surface); width: 200px; } .suggestions li { - border-bottom: 1px solid #ddd; + border-bottom: 1px solid var(--color--border); padding: 5px 10px; margin: 0; } @@ -70,6 +76,7 @@ } .activeSuggestion { - background: #b7cfe0; + background: var(--color--accent--surface); + color: var(--color--accent--ink); cursor: pointer; } From 19cc479a72c26296f881ddb1983c396e548ce3a4 Mon Sep 17 00:00:00 2001 From: Silvano Stralla Date: Wed, 29 Apr 2026 15:04:27 +0200 Subject: [PATCH 8/8] Bump SDK to 3.0.1-alpha.0 in content-calendar and web-previews --- content-calendar/package-lock.json | 30 ++++++++++----------------- content-calendar/package.json | 6 +++--- web-previews/package-lock.json | 33 +++++++++++------------------- web-previews/package.json | 6 +++--- 4 files changed, 29 insertions(+), 46 deletions(-) diff --git a/content-calendar/package-lock.json b/content-calendar/package-lock.json index 8aed188d..9fe10175 100644 --- a/content-calendar/package-lock.json +++ b/content-calendar/package-lock.json @@ -1,12 +1,12 @@ { "name": "datocms-plugin-content-calendar", - "version": "0.2.0-0", + "version": "0.2.0-1", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "datocms-plugin-content-calendar", - "version": "0.2.0-0", + "version": "0.2.0-1", "dependencies": { "@datocms/cma-client": "^5.3.0", "@fortawesome/fontawesome-svg-core": "^7.2.0", @@ -15,8 +15,8 @@ "classnames": "^2.5.1", "color-hash": "^2.0.2", "date-fns": "^4.1.0", - "datocms-plugin-sdk": "3.0.0-alpha.0", - "datocms-react-ui": "3.0.0-alpha.0", + "datocms-plugin-sdk": "3.0.1-alpha.0", + "datocms-react-ui": "3.0.1-alpha.0", "lodash-es": "^4.17.23", "react": "^19.2.4", "react-dom": "^19.2.4" @@ -63,7 +63,6 @@ "integrity": "sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@babel/code-frame": "^7.29.0", "@babel/generator": "^7.29.0", @@ -956,7 +955,6 @@ "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-7.2.0.tgz", "integrity": "sha512-6639htZMjEkwskf3J+e6/iar+4cTNM9qhoWuRfj9F3eJD6r7iCzV1SWnQr2Mdv0QT0suuqU8BoJCZUyCtP9R4Q==", "license": "MIT", - "peer": true, "dependencies": { "@fortawesome/fontawesome-common-types": "7.2.0" }, @@ -1485,7 +1483,6 @@ "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.14.tgz", "integrity": "sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==", "license": "MIT", - "peer": true, "dependencies": { "csstype": "^3.2.2" } @@ -1596,7 +1593,6 @@ } ], "license": "MIT", - "peer": true, "dependencies": { "baseline-browser-mapping": "^2.10.12", "caniuse-lite": "^1.0.30001782", @@ -1741,9 +1737,9 @@ } }, "node_modules/datocms-plugin-sdk": { - "version": "3.0.0-alpha.0", - "resolved": "https://registry.npmjs.org/datocms-plugin-sdk/-/datocms-plugin-sdk-3.0.0-alpha.0.tgz", - "integrity": "sha512-XFCcQyfImwG8XQj4rXrkfZTOkGzU/F9NjIvWCqa++EyMGXsJ3gSuRZGONM88nwFyQ1pTPePQB5Iepzuammpc/w==", + "version": "3.0.1-alpha.0", + "resolved": "https://registry.npmjs.org/datocms-plugin-sdk/-/datocms-plugin-sdk-3.0.1-alpha.0.tgz", + "integrity": "sha512-G8l8ZZBWWVZodnD9CR6FgtSUrHPD9yV3T/HjrI4+BfD/sle+Z2Cbpc71gHMJTrYguQLete34CnSDYuZ1cfLRIw==", "license": "MIT", "dependencies": { "@datocms/cma-client": "*", @@ -1774,14 +1770,14 @@ } }, "node_modules/datocms-react-ui": { - "version": "3.0.0-alpha.0", - "resolved": "https://registry.npmjs.org/datocms-react-ui/-/datocms-react-ui-3.0.0-alpha.0.tgz", - "integrity": "sha512-BVZAJSBMblWNIHyMXvNQDUD8SusLvtsxA+1MCZVaKIatZBGoro+4REZITSrPzwCtbiMcghdtpd7Bm+bZJIH9Dg==", + "version": "3.0.1-alpha.0", + "resolved": "https://registry.npmjs.org/datocms-react-ui/-/datocms-react-ui-3.0.1-alpha.0.tgz", + "integrity": "sha512-s6d+HKz51fLzSDbm77pFbbo9GI3crYFedTScSy0vpa+vPzVvl40SNtwmLRkNQOa7WT8iKdUnFQYT44bywYZGBw==", "license": "MIT", "dependencies": { "@floating-ui/react": "^0.27.16", "classnames": "^2.3.1", - "datocms-plugin-sdk": "^3.0.0-alpha.0", + "datocms-plugin-sdk": "^3.0.1-alpha.0", "react-intersection-observer": "^8.31.0", "react-select": "^5.2.1", "scroll-into-view-if-needed": "^2.2.20" @@ -2275,7 +2271,6 @@ "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==", "dev": true, "license": "MIT", - "peer": true, "engines": { "node": ">=12" }, @@ -2328,7 +2323,6 @@ "resolved": "https://registry.npmjs.org/react/-/react-19.2.4.tgz", "integrity": "sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==", "license": "MIT", - "peer": true, "engines": { "node": ">=0.10.0" } @@ -2338,7 +2332,6 @@ "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.4.tgz", "integrity": "sha512-AXJdLo8kgMbimY95O2aKQqsz2iWi9jMgKJhRBAxECE4IFxfcazB2LmzloIoibJI3C12IlY20+KFaLv+71bUJeQ==", "license": "MIT", - "peer": true, "dependencies": { "scheduler": "^0.27.0" }, @@ -2653,7 +2646,6 @@ "integrity": "sha512-w+N7Hifpc3gRjZ63vYBXA56dvvRlNWRczTdmCBBa+CotUzAPf5b7YMdMR/8CQoeYE5LX3W4wj6RYTgonm1b9DA==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "esbuild": "^0.27.0", "fdir": "^6.5.0", diff --git a/content-calendar/package.json b/content-calendar/package.json index dba3da43..79dccdc4 100644 --- a/content-calendar/package.json +++ b/content-calendar/package.json @@ -2,7 +2,7 @@ "name": "datocms-plugin-content-calendar", "description": "Explore your editorial calendar, right inside DatoCMS", "homepage": "https://github.com/datocms/plugins/tree/master/content-calendar#readme", - "version": "0.2.0-0", + "version": "0.2.0-1", "keywords": [ "datocms", "datocms-plugin" @@ -19,8 +19,8 @@ "classnames": "^2.5.1", "color-hash": "^2.0.2", "date-fns": "^4.1.0", - "datocms-plugin-sdk": "3.0.0-alpha.0", - "datocms-react-ui": "3.0.0-alpha.0", + "datocms-plugin-sdk": "3.0.1-alpha.0", + "datocms-react-ui": "3.0.1-alpha.0", "lodash-es": "^4.17.23", "react": "^19.2.4", "react-dom": "^19.2.4" diff --git a/web-previews/package-lock.json b/web-previews/package-lock.json index c8e085bb..3cbe2417 100644 --- a/web-previews/package-lock.json +++ b/web-previews/package-lock.json @@ -1,12 +1,12 @@ { "name": "datocms-plugin-web-previews", - "version": "1.1.1-0", + "version": "1.1.1-1", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "datocms-plugin-web-previews", - "version": "1.1.1-0", + "version": "1.1.1-1", "license": "GPLv3", "dependencies": { "@floating-ui/react": "^0.27.19", @@ -14,8 +14,8 @@ "@fortawesome/react-fontawesome": "^0.2.6", "@types/lodash-es": "^4.17.12", "cuid": "^3.0.0", - "datocms-plugin-sdk": "3.0.0-alpha.0", - "datocms-react-ui": "3.0.0-alpha.0", + "datocms-plugin-sdk": "3.0.1-alpha.0", + "datocms-react-ui": "3.0.1-alpha.0", "final-form": "^4.20.10", "final-form-arrays": "^3.1.0", "lodash-es": "^4.17.23", @@ -68,7 +68,6 @@ "integrity": "sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@babel/code-frame": "^7.29.0", "@babel/generator": "^7.29.0", @@ -969,6 +968,7 @@ "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-7.2.0.tgz", "integrity": "sha512-IpR0bER9FY25p+e7BmFH25MZKEwFHTfRAfhOyJubgiDnoJNsSvJ7nigLraHtp4VOG/cy8D7uiV0dLkHOne5Fhw==", "license": "MIT", + "peer": true, "engines": { "node": ">=6" } @@ -1508,7 +1508,6 @@ "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.28.tgz", "integrity": "sha512-z9VXpC7MWrhfWipitjNdgCauoMLRdIILQsAEV+ZesIzBq/oUlxk0m3ApZuMFCXdnS4U7KrI+l3WRUEGQ8K1QKw==", "license": "MIT", - "peer": true, "dependencies": { "@types/prop-types": "*", "csstype": "^3.2.2" @@ -1620,7 +1619,6 @@ } ], "license": "MIT", - "peer": true, "dependencies": { "baseline-browser-mapping": "^2.10.12", "caniuse-lite": "^1.0.30001782", @@ -1757,9 +1755,9 @@ "license": "MIT" }, "node_modules/datocms-plugin-sdk": { - "version": "3.0.0-alpha.0", - "resolved": "https://registry.npmjs.org/datocms-plugin-sdk/-/datocms-plugin-sdk-3.0.0-alpha.0.tgz", - "integrity": "sha512-XFCcQyfImwG8XQj4rXrkfZTOkGzU/F9NjIvWCqa++EyMGXsJ3gSuRZGONM88nwFyQ1pTPePQB5Iepzuammpc/w==", + "version": "3.0.1-alpha.0", + "resolved": "https://registry.npmjs.org/datocms-plugin-sdk/-/datocms-plugin-sdk-3.0.1-alpha.0.tgz", + "integrity": "sha512-G8l8ZZBWWVZodnD9CR6FgtSUrHPD9yV3T/HjrI4+BfD/sle+Z2Cbpc71gHMJTrYguQLete34CnSDYuZ1cfLRIw==", "license": "MIT", "dependencies": { "@datocms/cma-client": "*", @@ -1781,14 +1779,14 @@ } }, "node_modules/datocms-react-ui": { - "version": "3.0.0-alpha.0", - "resolved": "https://registry.npmjs.org/datocms-react-ui/-/datocms-react-ui-3.0.0-alpha.0.tgz", - "integrity": "sha512-BVZAJSBMblWNIHyMXvNQDUD8SusLvtsxA+1MCZVaKIatZBGoro+4REZITSrPzwCtbiMcghdtpd7Bm+bZJIH9Dg==", + "version": "3.0.1-alpha.0", + "resolved": "https://registry.npmjs.org/datocms-react-ui/-/datocms-react-ui-3.0.1-alpha.0.tgz", + "integrity": "sha512-s6d+HKz51fLzSDbm77pFbbo9GI3crYFedTScSy0vpa+vPzVvl40SNtwmLRkNQOa7WT8iKdUnFQYT44bywYZGBw==", "license": "MIT", "dependencies": { "@floating-ui/react": "^0.27.16", "classnames": "^2.3.1", - "datocms-plugin-sdk": "^3.0.0-alpha.0", + "datocms-plugin-sdk": "^3.0.1-alpha.0", "react-intersection-observer": "^8.31.0", "react-select": "^5.2.1", "scroll-into-view-if-needed": "^2.2.20" @@ -1951,7 +1949,6 @@ "resolved": "https://registry.npmjs.org/final-form/-/final-form-4.20.10.tgz", "integrity": "sha512-TL48Pi1oNHeMOHrKv1bCJUrWZDcD3DIG6AGYVNOnyZPr7Bd/pStN0pL+lfzF5BNoj/FclaoiaLenk4XUIFVYng==", "license": "MIT", - "peer": true, "dependencies": { "@babel/runtime": "^7.10.0" }, @@ -1968,7 +1965,6 @@ "resolved": "https://registry.npmjs.org/final-form-arrays/-/final-form-arrays-3.1.0.tgz", "integrity": "sha512-TWBvun+AopgBLw9zfTFHBllnKMVNEwCEyDawphPuBGGqNsuhGzhT7yewHys64KFFwzIs6KEteGLpKOwvTQEscQ==", "license": "MIT", - "peer": true, "peerDependencies": { "final-form": "^4.20.8" } @@ -2288,7 +2284,6 @@ "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==", "dev": true, "license": "MIT", - "peer": true, "engines": { "node": ">=12" }, @@ -2341,7 +2336,6 @@ "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz", "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==", "license": "MIT", - "peer": true, "dependencies": { "loose-envify": "^1.1.0" }, @@ -2354,7 +2348,6 @@ "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz", "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==", "license": "MIT", - "peer": true, "dependencies": { "loose-envify": "^1.1.0", "scheduler": "^0.23.2" @@ -2368,7 +2361,6 @@ "resolved": "https://registry.npmjs.org/react-final-form/-/react-final-form-6.5.9.tgz", "integrity": "sha512-x3XYvozolECp3nIjly+4QqxdjSSWfcnpGEL5K8OBT6xmGrq5kBqbA6+/tOqoom9NwqIPPbxPNsOViFlbKgowbA==", "license": "MIT", - "peer": true, "dependencies": { "@babel/runtime": "^7.15.4" }, @@ -2766,7 +2758,6 @@ "integrity": "sha512-w+N7Hifpc3gRjZ63vYBXA56dvvRlNWRczTdmCBBa+CotUzAPf5b7YMdMR/8CQoeYE5LX3W4wj6RYTgonm1b9DA==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "esbuild": "^0.27.0", "fdir": "^6.5.0", diff --git a/web-previews/package.json b/web-previews/package.json index be7d6c12..a6ac9af7 100644 --- a/web-previews/package.json +++ b/web-previews/package.json @@ -2,7 +2,7 @@ "name": "datocms-plugin-web-previews", "homepage": "https://github.com/datocms/plugins/tree/master/web-previews#readme", "description": "Add a Visual tab for full-screen side-by-side editing with click-to-edit overlays, preview links in the record sidebar, and inline iframe previews with viewport presets", - "version": "1.1.1-0", + "version": "1.1.1-1", "author": "DatoCMS ", "license": "GPLv3", "files": [ @@ -29,8 +29,8 @@ "@fortawesome/react-fontawesome": "^0.2.6", "@types/lodash-es": "^4.17.12", "cuid": "^3.0.0", - "datocms-plugin-sdk": "3.0.0-alpha.0", - "datocms-react-ui": "3.0.0-alpha.0", + "datocms-plugin-sdk": "3.0.1-alpha.0", + "datocms-react-ui": "3.0.1-alpha.0", "final-form": "^4.20.10", "final-form-arrays": "^3.1.0", "lodash-es": "^4.17.23",