Use standard form buttons and resume entrance effects in 1.10.1

scripts/button-check.mjs

@@ -16,6 +16,10 @@ const server = spawn(php, ['-d', 'memory_limit=256M', '-S', `127.0.0.1:${port}`,
 const report = 'reports/buttons'; await mkdir(report, { recursive: true });
 let browser, page;
 const checks = [], errors = [];
+const buttonStyle = node => {
+  const style = getComputedStyle(node);
+  return Object.fromEntries(['backgroundColor', 'color', 'borderRadius', 'borderColor', 'borderWidth', 'borderStyle', 'paddingTop', 'paddingRight', 'fontFamily', 'fontSize', 'fontWeight', 'letterSpacing', 'textTransform', 'lineHeight', 'textAlign'].map(key => [key, style[key]]));
+};
 
 try {
   for (let attempt = 0; attempt < 60; attempt++) {
@@ -83,12 +87,49 @@ try {
   const plain = await browser.newContext({ javaScriptEnabled: false }); const publicPage = await plain.newPage();
   for (const [width, radius, transparent] of [[1600, '8px', false], [900, '0px', true], [390, '999px', false]]) {
     await publicPage.setViewportSize({ width, height: 900 }); await publicPage.goto(origin);
+    const necessaryCookies = publicPage.getByRole('button', { name: 'Nur notwendige', exact: true });
+    if (await necessaryCookies.count()) await necessaryCookies.click();
     const values = await publicPage.locator('#qa-button').evaluate(el => { const s=getComputedStyle(el);return { radius:s.borderRadius, bg:s.backgroundColor, font:s.fontSize }; });
     assert.equal(values.radius, radius); assert.equal(values.bg === 'rgba(0, 0, 0, 0)', transparent); assert.equal(values.font, '17px');
     assert.equal(await publicPage.locator('#qa-button-default').evaluate(el => getComputedStyle(el).fontSize), '18px');
+    const submit = publicPage.locator('.block-form button[type=submit]').first();
+    const standard = publicPage.locator('#qa-button-default');
+    assert.deepEqual(await submit.evaluate(buttonStyle), await standard.evaluate(buttonStyle), 'Form submit uses global shape, appearance, size, typography and colors');
+    assert.ok(await submit.evaluate(node => node.getBoundingClientRect().width < node.form.getBoundingClientRect().width), 'Submit keeps natural button width');
+    await submit.hover(); await publicPage.waitForTimeout(350);
+    const hoverStyle = await submit.evaluate(buttonStyle);
+    await standard.hover(); await publicPage.waitForTimeout(350);
+    assert.deepEqual(hoverStyle, await standard.evaluate(buttonStyle), 'Submit inherits the global hover colors');
+    await submit.focus();
+    assert.equal(await submit.evaluate(node => getComputedStyle(node).outlineStyle), 'solid', 'Submit has a keyboard focus indicator');
+    await submit.screenshot({ path: `${report}/submit-${width}.png` });
     await publicPage.locator('#qa-buttons-section').screenshot({ path: `${report}/public-${width}.png` });
   }
-  await plain.close(); checks.push('published global defaults and local responsive variants without JavaScript');
+  await page.goto(origin + '/admin/theme');
+  await page.locator('#buttons-shape').selectOption('rounded');
+  await page.locator('#buttons-appearance').selectOption('solid');
+  await page.locator('#buttons-size').selectOption('large');
+  await page.locator('#buttons-fontSize').fill('20');
+  for (const [key, hex] of [['backgroundColor', '#124b36'], ['color', '#ffffff'], ['hoverBackgroundColor', '#092c20'], ['hoverColor', '#fff4cc']]) {
+    await page.locator(`#buttons-${key}`).click();
+    await page.locator(`#buttons-${key}-hex`).fill(hex);
+    await page.locator(`#buttons-${key}-hex`).press('Enter');
+    await page.keyboard.press('Escape');
+  }
+  await page.getByRole('button', { name: 'Design speichern', exact: true }).click();
+  await publicPage.goto(origin);
+  const updatedSubmit = publicPage.locator('.block-form button[type=submit]').first();
+  const updatedDefault = publicPage.locator('#qa-button-default');
+  assert.deepEqual(await updatedSubmit.evaluate(buttonStyle), await updatedDefault.evaluate(buttonStyle), 'A later change to solid global defaults updates existing forms');
+  assert.equal(await updatedSubmit.evaluate(el => getComputedStyle(el).backgroundColor), 'rgb(18, 75, 54)');
+  await updatedSubmit.hover(); await publicPage.waitForTimeout(350);
+  const updatedHover = await updatedSubmit.evaluate(buttonStyle);
+  await updatedDefault.hover(); await publicPage.waitForTimeout(350);
+  assert.deepEqual(updatedHover, await updatedDefault.evaluate(buttonStyle), 'Custom global hover colors update existing forms');
+  await publicPage.setViewportSize({ width: 390, height: 1600 });
+  await updatedSubmit.scrollIntoViewIfNeeded();
+  await publicPage.locator('.block-form').first().screenshot({ path: `${report}/form-standard-button.png` });
+  await plain.close(); checks.push('published global defaults, form submit including hover/focus/natural width, solid and outline theme changes, and local responsive variants without JavaScript');
   assert.deepEqual(errors, []);
   await writeFile(`${report}/result.json`, JSON.stringify({ checks, passed: true }, null, 2));
   console.log('Button checks passed:', checks.length, 'groups.');