(core) Polish dark mode and remove beta tag

Summary:
Polishes support for dark mode and enables syncing with the OS theme
by default.

Test Plan: Manual.

Reviewers: JakubSerafin

Reviewed By: JakubSerafin

Subscribers: JakubSerafin

Differential Revision: https://phab.getgrist.com/D4041

test/nbrowser/CellColor.ts

@@ -468,7 +468,9 @@ describe('CellColor', function() {
     await gu.openCellColorPicker();
 
     // check color preview is correct
-    assert.equal(await driver.find('.test-text-hex').value(), '#606060');
+    assert.equal(await driver.find('.test-text-hex').value(), 'default');
+    assert.equal(await driver.find('.test-text-color-square').getCssValue('background-color'),
+      'rgba(96, 96, 96, 1)');
 
     // close color picker
     await driver.sendKeys(Key.ENTER);
@@ -482,7 +484,9 @@ describe('CellColor', function() {
     await gu.openCellColorPicker();
 
     // check color preview is correct
-    assert.equal(await driver.find('.test-text-hex').value(), '#2CB0AF');
+    assert.equal(await driver.find('.test-text-hex').value(), 'default');
+    assert.equal(await driver.find('.test-text-color-square').getCssValue('background-color'),
+      'rgba(44, 176, 175, 1)');
 
     // close picker
     await driver.sendKeys(Key.ESCAPE);

test/nbrowser/ChoiceList.ts

@@ -441,7 +441,7 @@ describe('ChoiceList', function() {
   const convertColumn = stackWrapFunc(async function(typeRe: RegExp) {
     await gu.setType(typeRe);
     await gu.waitForServer();
-    await driver.findContent('.type_transform_prompt button', /Apply/).click();
+    await driver.findContent('.test-type-transform-apply', /Apply/).click();
     await gu.waitForServer();
   });
 

test/nbrowser/CustomWidgets.ts

@@ -278,7 +278,7 @@ describe('CustomWidgets', function () {
     assert.equal(await getWidgetColor(), 'rgba(38, 38, 51, 1)');
 
     // Switch the theme to GristDark.
-    await gu.setGristTheme({appearance: 'dark'});
+    await gu.setGristTheme({appearance: 'dark', syncWithOS: false});
     await driver.navigate().back();
     await gu.waitForDocToLoad();
 
@@ -286,7 +286,7 @@ describe('CustomWidgets', function () {
     assert.equal(await getWidgetColor(), 'rgba(239, 239, 239, 1)');
 
     // Switch back to GristLight.
-    await gu.setGristTheme({appearance: 'light'});
+    await gu.setGristTheme({appearance: 'light', syncWithOS: true});
     await driver.navigate().back();
     await gu.waitForDocToLoad();
 

test/nbrowser/MultiColumn.ts

@@ -260,13 +260,14 @@ describe('MultiColumn', function() {
       assert.isFalse(await deriveDisabled());
       assert.isFalse(await labelDisabled());
       assert.isFalse(await setTriggerDisabled());
-      assert.isFalse(await transformSectionDisabled());
+      assert.isTrue(await transformSectionDisabled());
       assert.isFalse(await addConditionDisabled());
       assert.isFalse(await columnTypeDisabled());
 
       // Make one column a data column, to disable type selector.
       await selectColumns('Test1');
       await gu.changeBehavior('Convert column to data');
+      assert.isFalse(await transformSectionDisabled());
       await selectColumns('Test1', 'Test3');
       assert.isTrue(await columnTypeDisabled());
 
@@ -1287,8 +1288,7 @@ async function setDataDisabled() {
 }
 
 async function transformSectionDisabled() {
-  const elements = await driver.findAll(".test-panel-transform .test-panel-disabled-section");
-  return elements.length === 1;
+  return (await driver.find(".test-fbuilder-edit-transform").getAttribute('disabled')) === 'true';
 }
 
 async function addConditionDisabled() {

test/nbrowser/SelectBy.ts

@@ -154,12 +154,12 @@ describe("SelectBy", function() {
     assert.equal(await gu.getDetailCell({section, rowNum: 1, col: 'A'}).getText(), '1');
 
     // Check there are nav buttons in the card view.
-    assert.equal(await section.find('.btn.detail-left').isPresent(), true);
-    assert.equal(await section.find('.btn.detail-right').isPresent(), true);
+    assert.equal(await section.find('.detail-button.detail-left').isPresent(), true);
+    assert.equal(await section.find('.detail-button.detail-right').isPresent(), true);
     assert.equal(await section.find('.grist-single-record__menu__count').getText(), '1 OF 1');
 
     // Now add a record to the source table using the card view.
-    await section.find('.btn.detail-add-btn').click();
+    await section.find('.detail-button.detail-add-btn').click();
     assert.equal(await gu.getDetailCell({section, rowNum: 1, col: 'A'}).getText(), '');
     await gu.getDetailCell({section, rowNum: 1, col: 'A'}).click();
     await gu.sendKeys('1', Key.ENTER);

test/nbrowser/gristUtils.ts

@@ -3133,16 +3133,27 @@ export async function downloadSectionCsvGridCells(
 
 export async function setGristTheme(options: {
   appearance: 'light' | 'dark',
+  syncWithOS: boolean,
   skipOpenSettingsPage?: boolean,
 }) {
-  const {appearance, skipOpenSettingsPage} = options;
+  const {appearance, syncWithOS, skipOpenSettingsPage} = options;
   if (!skipOpenSettingsPage) {
     await openProfileSettingsPage();
   }
-  await driver.find('.test-theme-config-appearance .test-select-open').click();
-  await driver.findContent('.test-select-menu li', appearance === 'light' ? 'Light' : 'Dark')
-    .click();
-  await waitForServer();
+
+  const syncWithOSCheckbox = await driver.find('.test-theme-config-sync-with-os');
+  const isSyncWithOSChecked = await syncWithOSCheckbox.getAttribute('checked') === 'true';
+  if (syncWithOS !== isSyncWithOSChecked) {
+    await syncWithOSCheckbox.click();
+    await waitForServer();
+  }
+
+  if (!syncWithOS) {
+    await driver.find('.test-theme-config-appearance .test-select-open').click();
+    await driver.findContent('.test-select-menu li', appearance === 'light' ? 'Light' : 'Dark')
+      .click();
+    await waitForServer();
+  }
 }
 
 } // end of namespace gristUtils