diff --git a/blocks/edit/da-assets/da-assets.js b/blocks/edit/da-assets/da-assets.js index 6e3e73b4..5e85c737 100644 --- a/blocks/edit/da-assets/da-assets.js +++ b/blocks/edit/da-assets/da-assets.js @@ -1,4 +1,4 @@ -import { getNx, nxJS } from '../../../scripts/utils.js'; +import { getNx } from '../../../scripts/utils.js'; import getPathDetails from '../../shared/pathDetails.js'; import { getRepositoryConfig, getResponsiveImageConfig } from './helpers/config.js'; import { @@ -177,9 +177,17 @@ export function buildHandleSelection( } export async function openAssets() { - const { loadStyle } = await import(`${getNx()}${nxJS}`); - const { loadIms, handleSignIn } = await import(`${getNx()}/utils/ims.js`); - const loadScript = (await import(`${getNx()}/utils/script.js`)).default; + const nx = getNx(); + const isNx2 = nx.endsWith('/nx2'); + const { loadStyle } = await import(`${nx}/utils/utils.js`); + // TODO: remove the ternary and the nx v1 branch once nxver=2 is + // rolled out on the CDN. Kept for backward compat during the + // transition: nx v1 exposes loadScript at utils/script.js; nx2 + // re-exports it from utils/utils.js. + const loadScript = isNx2 + ? (await import(`${nx}/utils/utils.js`)).loadScript + : (await import(`${nx}/utils/script.js`)).default; + const { loadIms, handleSignIn } = await import(`${nx}/utils/ims.js`); const details = await loadIms(); if (details.anonymous) handleSignIn(); @@ -195,7 +203,10 @@ export async function openAssets() { return; } - await loadStyle(import.meta.url.replace('.js', '.css')); + const assetSheet = await loadStyle(import.meta.url); + if (assetSheet && !document.adoptedStyleSheets.includes(assetSheet)) { + document.adoptedStyleSheets = [...document.adoptedStyleSheets, assetSheet]; + } await loadScript(ASSET_SELECTOR_URL); dialog = document.createElement('dialog'); diff --git a/blocks/edit/da-content/da-content.css b/blocks/edit/da-content/da-content.css index 3eaeb298..2572099c 100644 --- a/blocks/edit/da-content/da-content.css +++ b/blocks/edit/da-content/da-content.css @@ -12,7 +12,7 @@ position: relative; flex: 0 1 auto; - width: var(--grid-container-width); + width: var(--se-grid-container-width, var(--grid-container-width)); } da-editor { diff --git a/blocks/edit/da-editor/da-editor.css b/blocks/edit/da-editor/da-editor.css index 60954fbd..785001cd 100644 --- a/blocks/edit/da-editor/da-editor.css +++ b/blocks/edit/da-editor/da-editor.css @@ -35,7 +35,7 @@ .da-version-title { margin: 0; - font-family: var(--body-font-family); + font-family: var(--s2-font-family, var(--body-font-family)); font-size: 18px; font-weight: 700; color: #000; @@ -52,14 +52,14 @@ } .da-version-action-area button { - font-family: var(--body-font-family); + font-family: var(--s2-font-family, var(--body-font-family)); display: inline-block; font-style: normal; cursor: pointer; padding: 5px 14px; line-height: 18px; font-size: 15px; - border-radius: var(--s2-radius-300); + border-radius: var(--s2-corner-radius-800, var(--s2-radius-300)); outline-offset: 0; transition: outline-offset .2s; text-decoration: none; @@ -814,7 +814,7 @@ da-library.hide { left: -1px; font-size: 13px; background-color: rgb(250 129 0); - font-family: var(--body-font-family); + font-family: var(--s2-font-family, var(--body-font-family)); border-radius: 2px; font-style: normal; font-weight: normal; diff --git a/blocks/edit/da-library/da-library.css b/blocks/edit/da-library/da-library.css index ea64901a..c86c36be 100644 --- a/blocks/edit/da-library/da-library.css +++ b/blocks/edit/da-library/da-library.css @@ -22,7 +22,7 @@ } input, button { - font-family: var(--body-font-family); + font-family: var(--s2-font-family, var(--body-font-family)); font-weight: 400; } diff --git a/blocks/edit/da-library/da-library.js b/blocks/edit/da-library/da-library.js index 2eaa63b5..2bba8145 100644 --- a/blocks/edit/da-library/da-library.js +++ b/blocks/edit/da-library/da-library.js @@ -15,7 +15,7 @@ import { } from './helpers/helpers.js'; const sheet = await getSheet('/blocks/edit/da-library/da-library.css'); -const buttons = await getSheet(`${getNx()}/styles/buttons.css`); +const buttons = await getSheet(`${getNx().replace(/\/nx2$/, '/nx')}/styles/buttons.css`); const ICONS = [ '/blocks/edit/img/S2_Icon_ExperienceAdd_20_N.svg', diff --git a/blocks/edit/da-not-found/da-not-found.js b/blocks/edit/da-not-found/da-not-found.js index c4528601..26d57bd0 100644 --- a/blocks/edit/da-not-found/da-not-found.js +++ b/blocks/edit/da-not-found/da-not-found.js @@ -1,8 +1,11 @@ import '../../shared/da-dialog/da-dialog.js'; -import { getNx, getNx2Api, nxJS } from '../../../scripts/utils.js'; +import { getNx, getNx2Api } from '../../../scripts/utils.js'; -const { loadStyle } = await import(`${getNx()}${nxJS}`); -await loadStyle('/blocks/edit/da-not-found/da-not-found.css'); +const { loadStyle } = await import(`${getNx()}/utils/utils.js`); +const sheet = await loadStyle('/blocks/edit/da-not-found/da-not-found.css'); +if (sheet && !document.adoptedStyleSheets.includes(sheet)) { + document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet]; +} async function folderHasContents(folderPath) { try { diff --git a/blocks/edit/da-palette/da-palette.css b/blocks/edit/da-palette/da-palette.css index b3888264..047a7d9d 100644 --- a/blocks/edit/da-palette/da-palette.css +++ b/blocks/edit/da-palette/da-palette.css @@ -33,7 +33,7 @@ input { } button { - font-family: var(--body-font-family); + font-family: var(--s2-font-family, var(--body-font-family)); display: block; border: 2px solid #1373e6; background: #1373e6; diff --git a/blocks/edit/da-title/da-title.css b/blocks/edit/da-title/da-title.css index 7660b8b0..28cf46fc 100644 --- a/blocks/edit/da-title/da-title.css +++ b/blocks/edit/da-title/da-title.css @@ -13,7 +13,7 @@ h1 { } button { - font-family: var(--body-font-family); + font-family: var(--s2-font-family, var(--body-font-family)); } da-prepare { @@ -52,7 +52,7 @@ da-dialog { } .da-title-inner { - max-width: var(--grid-container-width); + max-width: var(--se-grid-container-width, var(--grid-container-width)); margin: 0 auto; display: block; justify-content: space-between; diff --git a/blocks/edit/da-versions/da-versions.css b/blocks/edit/da-versions/da-versions.css index e175fdb9..9dbc07cb 100644 --- a/blocks/edit/da-versions/da-versions.css +++ b/blocks/edit/da-versions/da-versions.css @@ -24,7 +24,7 @@ } .da-versions-close-btn { - font-family: var(--body-font-family); + font-family: var(--s2-font-family, var(--body-font-family)); line-height: 32px; font-weight: 700; font-size: 20px; @@ -173,7 +173,7 @@ .da-version-new-input { border: none; border-bottom: 2px solid #C8C8C8; - font-family: var(--body-font-family); + font-family: var(--s2-font-family, var(--body-font-family)); font-size: 18px; font-weight: 700; padding: 6px 0; diff --git a/blocks/edit/edit.css b/blocks/edit/edit.css new file mode 100644 index 00000000..33f6596d --- /dev/null +++ b/blocks/edit/edit.css @@ -0,0 +1,4 @@ +/* TODO: remove once dark-mode styling is complete. */ +.light-scheme, .dark-scheme { + color-scheme: light; +} diff --git a/blocks/edit/edit.js b/blocks/edit/edit.js index 5d3f3a69..2b580c94 100644 --- a/blocks/edit/edit.js +++ b/blocks/edit/edit.js @@ -1,10 +1,14 @@ import getPathDetails from '../shared/pathDetails.js'; import { contentLogin, livePreviewLogin } from '../shared/utils.js'; -import { getNx2Api } from '../../scripts/utils.js'; +import { getNx, getNx2Api } from '../../scripts/utils.js'; import './da-title/da-title.js'; import './da-content/da-content.js'; +const { loadStyle } = await import(`${getNx()}/utils/utils.js`); +const styles = await loadStyle(import.meta.url); +document.adoptedStyleSheets.push(styles); + const EMPTY_DOC = '
'; const DOMPARSER = new DOMParser(); diff --git a/blocks/edit/prose/plugins/focalPointDialog.js b/blocks/edit/prose/plugins/focalPointDialog.js index 0bd87380..854e2ca2 100644 --- a/blocks/edit/prose/plugins/focalPointDialog.js +++ b/blocks/edit/prose/plugins/focalPointDialog.js @@ -1,8 +1,11 @@ import '../../../shared/da-dialog/da-dialog.js'; -import { getNx, nxJS } from '../../../../scripts/utils.js'; +import { getNx } from '../../../../scripts/utils.js'; -const { loadStyle } = await import(`${getNx()}${nxJS}`); -await loadStyle('/blocks/edit/prose/plugins/focalPointDialog.css'); +const { loadStyle } = await import(`${getNx()}/utils/utils.js`); +const focalSheet = await loadStyle('/blocks/edit/prose/plugins/focalPointDialog.css'); +if (focalSheet && !document.adoptedStyleSheets.includes(focalSheet)) { + document.adoptedStyleSheets = [...document.adoptedStyleSheets, focalSheet]; +} let currentDialog = null; let faceApiLoaded = false; diff --git a/blocks/sheet/da-sheet-preview.css b/blocks/sheet/da-sheet-preview.css index 37859987..6fbc333d 100644 --- a/blocks/sheet/da-sheet-preview.css +++ b/blocks/sheet/da-sheet-preview.css @@ -12,7 +12,7 @@ box-shadow: rgb(181 181 181) 0 0 20px 0; border-radius: 12px; height: 500px; - padding: var(--spacing-200); + padding: var(--s2-spacing-200, var(--spacing-200)); overflow: scroll; box-sizing: border-box; } diff --git a/blocks/sheet/da-sheet-preview.js b/blocks/sheet/da-sheet-preview.js index 500dda47..460191ce 100644 --- a/blocks/sheet/da-sheet-preview.js +++ b/blocks/sheet/da-sheet-preview.js @@ -2,9 +2,9 @@ import { LitElement, html, nothing } from 'da-lit'; import { getNx } from '../../scripts/utils.js'; import getPathDetails from '../shared/pathDetails.js'; -const { default: getStyle } = await import(`${getNx()}/utils/styles.js`); +const { loadStyle } = await import(`${getNx()}/utils/utils.js`); -const style = await getStyle('/blocks/sheet/da-sheet-preview.css'); +const style = await loadStyle('/blocks/sheet/da-sheet-preview.css'); class DaSheetPreview extends LitElement { static properties = { @@ -46,7 +46,7 @@ class DaSheetPreview extends LitElement { } renderValue(value) { - if (!(value.startsWith('/') || value.startsWith('http'))) return value; + if (typeof value !== 'string' || !(value.startsWith('/') || value.startsWith('http'))) return value; const links = value.split(',').map((val) => val.replaceAll(' ', '')); return links.map((link) => html`${link} `); } diff --git a/blocks/sheet/da-sheet-tabs.css b/blocks/sheet/da-sheet-tabs.css index 76cc3d94..02da4b1c 100644 --- a/blocks/sheet/da-sheet-tabs.css +++ b/blocks/sheet/da-sheet-tabs.css @@ -1,7 +1,7 @@ :host { display: flex; - gap: var(--spacing-200); - margin-bottom: var(--spacing-200); + gap: var(--s2-spacing-200, var(--spacing-200)); + margin-bottom: var(--s2-spacing-200, var(--spacing-200)); flex-wrap: wrap; } @@ -14,7 +14,7 @@ ul { padding: 0; list-style: none; display: flex; - gap: var(--spacing-200); + gap: var(--s2-spacing-200, var(--spacing-200)); flex-wrap: wrap; } @@ -38,7 +38,7 @@ input { button, input[type="text"] { - font-family: var(--body-font-family); + font-family: var(--s2-font-family, var(--body-font-family)); } li.active { diff --git a/blocks/sheet/da-sheet-tabs.js b/blocks/sheet/da-sheet-tabs.js index 73f56f06..dec6adca 100644 --- a/blocks/sheet/da-sheet-tabs.js +++ b/blocks/sheet/da-sheet-tabs.js @@ -1,11 +1,11 @@ import { LitElement, html, nothing } from 'da-lit'; import { getNx } from '../../scripts/utils.js'; +import inlinesvg from '../shared/inlinesvg.js'; import { handleSave } from './utils/utils.js'; -const { default: getStyle } = await import(`${getNx()}/utils/styles.js`); -const { default: getSvg } = await import(`${getNx()}/utils/svg.js`); +const { loadStyle } = await import(`${getNx()}/utils/utils.js`); -const style = await getStyle(import.meta.url); +const style = await loadStyle(import.meta.url); const SHEET_TEMPLATE = { minDimensions: [20, 20], sheetName: 'data' }; const ICONS = [ @@ -31,7 +31,7 @@ class DaSheetTabs extends LitElement { connectedCallback() { super.connectedCallback(); this.shadowRoot.adoptedStyleSheets = [style]; - getSvg({ parent: this.shadowRoot, paths: ICONS }); + inlinesvg({ parent: this.shadowRoot, paths: ICONS }); this._names = this.getNames(); this.showSheet(0); this.getPermissions(); diff --git a/blocks/sheet/da-version-review.css b/blocks/sheet/da-version-review.css index 82771968..75b95058 100644 --- a/blocks/sheet/da-version-review.css +++ b/blocks/sheet/da-version-review.css @@ -37,7 +37,7 @@ button { padding: 5px 14px; line-height: 18px; font-size: 15px; - border-radius: var(--s2-radius-300); + border-radius: var(--s2-corner-radius-800, var(--s2-radius-300)); outline-offset: 0; transition: outline-offset .2s; text-decoration: none; diff --git a/blocks/sheet/da-version-review.js b/blocks/sheet/da-version-review.js index 1c20e450..196a77d8 100644 --- a/blocks/sheet/da-version-review.js +++ b/blocks/sheet/da-version-review.js @@ -1,9 +1,9 @@ import { LitElement, html } from 'da-lit'; import { getNx } from '../../scripts/utils.js'; -const { default: getStyle } = await import(`${getNx()}/utils/styles.js`); +const { loadStyle } = await import(`${getNx()}/utils/utils.js`); -const style = await getStyle('/blocks/sheet/da-version-review.css'); +const style = await loadStyle('/blocks/sheet/da-version-review.css'); class DaVersionReview extends LitElement { static properties = { data: { type: Object } }; diff --git a/blocks/sheet/sheet.css b/blocks/sheet/sheet.css index 411f9b97..b8ad166b 100644 --- a/blocks/sheet/sheet.css +++ b/blocks/sheet/sheet.css @@ -1,4 +1,10 @@ /* stylelint-disable property-no-vendor-prefix */ + +/* TODO: remove once dark-mode styling is complete. */ +.light-scheme, .dark-scheme { + color-scheme: light; +} + body { background: rgb(250 250 250); } @@ -14,7 +20,7 @@ body { display: flex; justify-content: center; max-width: 83.4%; - margin: 0 auto var(--spacing-600) auto; + margin: 0 auto var(--s2-spacing-600, var(--spacing-600)) auto; } da-versions, diff --git a/blocks/sheet/sheet.js b/blocks/sheet/sheet.js index 49bae136..7ca441de 100644 --- a/blocks/sheet/sheet.js +++ b/blocks/sheet/sheet.js @@ -6,9 +6,12 @@ import { getData } from './utils/index.js'; import { staleCheck, showDaDialog, restoreVersion } from './utils/utils.js'; import { convertSheets } from '../edit/utils/helpers.js'; -const { default: getStyle } = await import(`${getNx()}/utils/styles.js`); +const { loadStyle } = await import(`${getNx()}/utils/utils.js`); -const style = await getStyle('/blocks/sheet/da-sheet-panes.css'); +const blockStyle = await loadStyle(import.meta.url); +document.adoptedStyleSheets = [...document.adoptedStyleSheets, blockStyle]; + +const style = await loadStyle('/blocks/sheet/da-sheet-panes.css'); class DaSheetPanes extends LitElement { static properties = { diff --git a/blocks/sheet/utils/index.js b/blocks/sheet/utils/index.js index d39f3da3..e4e62287 100644 --- a/blocks/sheet/utils/index.js +++ b/blocks/sheet/utils/index.js @@ -1,9 +1,23 @@ -import { getNx, getNx2Api, nxJS } from '../../../scripts/utils.js'; +import { getNx, getNx2Api } from '../../../scripts/utils.js'; import { handleSave, staleCheck } from './utils.js'; import '../da-sheet-tabs.js'; -const { loadStyle } = await import(`${getNx()}${nxJS}`); -const loadScript = (await import(`${getNx()}/utils/script.js`)).default; +const nx = getNx(); +const isNx2 = nx.endsWith('/nx2'); +const { loadStyle } = await import(`${nx}/utils/utils.js`); +// TODO: remove the ternary and the nx v1 branch once nxver=2 is rolled +// out on the CDN. Kept for backward compat during the transition: +// nx v1 exposes loadScript at utils/script.js; nx2 re-exports it from +// utils/utils.js. +const loadScript = isNx2 + ? (await import(`${nx}/utils/utils.js`)).loadScript + : (await import(`${nx}/utils/script.js`)).default; + +async function adoptStyle(href) { + const sheet = await loadStyle(href); + if (!sheet || document.adoptedStyleSheets.includes(sheet)) return; + document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet]; +} const SHEET_TEMPLATE = { minDimensions: [20, 20], sheetName: 'data' }; @@ -151,7 +165,7 @@ export async function getData(input) { export default async function init(el, data) { const suppliedData = data || await getData(el.details); - await loadStyle('/deps/jspreadsheet-ce/dist/jspreadsheet.css'); + await adoptStyle('/deps/jspreadsheet-ce/dist/jspreadsheet.css'); await loadScript('/deps/jspreadsheet-ce/dist/index.js'); await loadScript('/deps/jsuites/dist/jsuites.js'); diff --git a/test/fixtures/nx/utils/styles.js b/test/fixtures/nx/utils/styles.js deleted file mode 100644 index e14ddd64..00000000 --- a/test/fixtures/nx/utils/styles.js +++ /dev/null @@ -1 +0,0 @@ -export default function getStyle() { return new CSSStyleSheet(); } diff --git a/test/fixtures/nx/utils/svg.js b/test/fixtures/nx/utils/svg.js deleted file mode 100644 index f58dc05d..00000000 --- a/test/fixtures/nx/utils/svg.js +++ /dev/null @@ -1 +0,0 @@ -export default function getSvg() { return ''; } diff --git a/test/fixtures/nx/utils/utils.js b/test/fixtures/nx/utils/utils.js index 7524bdb7..b771487b 100644 --- a/test/fixtures/nx/utils/utils.js +++ b/test/fixtures/nx/utils/utils.js @@ -4,6 +4,8 @@ export const loadStyle = async () => { return sheet; }; +export const loadScript = async () => {}; + export const DA_ADMIN = 'https://admin.da.live'; let _hashState = {};