From 02c0e8665334d1c735d3209478f8e6632443fc01 Mon Sep 17 00:00:00 2001 From: Vinicius Goulart Date: Wed, 4 Sep 2024 18:33:40 +0300 Subject: [PATCH 1/2] fix: fix carbonization --- packages/form-js-carbon-styles/src/carbon-styles.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/form-js-carbon-styles/src/carbon-styles.scss b/packages/form-js-carbon-styles/src/carbon-styles.scss index f4cb5dedc..4568b1293 100644 --- a/packages/form-js-carbon-styles/src/carbon-styles.scss +++ b/packages/form-js-carbon-styles/src/carbon-styles.scss @@ -66,7 +66,7 @@ // Themed icons ///////////// -.cds--g10 { +[data-carbon-theme='g10'] { .fjs-container { .fjs-form-field-number .fjs-input-group { .fjs-number-arrow-container { @@ -114,7 +114,7 @@ } } -.cds--g100 { +[data-carbon-theme='g100'] { .fjs-container { .fjs-form-field-number .fjs-input-group { .fjs-number-arrow-container { @@ -1269,7 +1269,7 @@ } .fjs-table-th { - color: var(--cds-color-primary); + color: var(--cds-text-primary); font-size: var(--cds-heading-compact-01-font-size); font-weight: var(--cds-heading-compact-01-font-weight); line-height: var(--cds-heading-compact-01-line-height); From 92f069e1a079b332661e9a6d95acf8ab7984aec7 Mon Sep 17 00:00:00 2001 From: Vinicius Goulart Date: Wed, 11 Sep 2024 16:36:18 +0300 Subject: [PATCH 2/2] test: fix theming --- e2e/carbon/carbon.scss | 6 +++--- e2e/carbon/index.html | 4 ++-- e2e/carbon/theme.scss | 6 +++--- e2e/theming/index.html | 2 +- e2e/theming/theme.scss | 6 +++--- e2e/visual/theming.spec.js | 8 ++------ .../test/spec/carbon-styles.spec.js | 15 +++++++++------ .../form-js-carbon-styles/test/spec/theme.scss | 6 +++--- .../form-js-editor/test/spec/FormEditor.spec.js | 4 ++-- packages/form-js-viewer/test/spec/Form.spec.js | 4 ++-- 10 files changed, 30 insertions(+), 31 deletions(-) diff --git a/e2e/carbon/carbon.scss b/e2e/carbon/carbon.scss index 67361e221..cc3bde228 100644 --- a/e2e/carbon/carbon.scss +++ b/e2e/carbon/carbon.scss @@ -1,15 +1,15 @@ @use '@carbon/styles' as * with ( - $font-path: 'https://fonts.camunda.io' + $font-path: '@ibm/plex' ); @use '@carbon/styles/scss/themes'; @use '@carbon/styles/scss/theme'; @import '@bpmn-io/form-js-carbon-styles/src/carbon-styles'; -.cds--g10 { +[data-carbon-theme='g10'] { @include theme.theme(themes.$g10); } -.cds--g100 { +[data-carbon-theme='g100'] { @include theme.theme(themes.$g100); } diff --git a/e2e/carbon/index.html b/e2e/carbon/index.html index 1f8d57e61..25b8e8781 100644 --- a/e2e/carbon/index.html +++ b/e2e/carbon/index.html @@ -1,5 +1,5 @@ - + @@ -20,7 +20,7 @@ } - +
diff --git a/e2e/carbon/theme.scss b/e2e/carbon/theme.scss index 53c3f9e64..0e1fab312 100644 --- a/e2e/carbon/theme.scss +++ b/e2e/carbon/theme.scss @@ -1,13 +1,13 @@ @use '@carbon/styles' as * with ( - $font-path: 'https://fonts.camunda.io' + $font-path: '@ibm/plex' ); @use '@carbon/styles/scss/themes'; @use '@carbon/styles/scss/theme'; -.cds--g10 { +[data-carbon-theme='g10'] { @include theme.theme(themes.$g10); } -.cds--g100 { +[data-carbon-theme='g100'] { @include theme.theme(themes.$g100); } diff --git a/e2e/theming/index.html b/e2e/theming/index.html index 0eb2e8efa..2619553e9 100644 --- a/e2e/theming/index.html +++ b/e2e/theming/index.html @@ -20,7 +20,7 @@ } - +
diff --git a/e2e/theming/theme.scss b/e2e/theming/theme.scss index 53c3f9e64..0e1fab312 100644 --- a/e2e/theming/theme.scss +++ b/e2e/theming/theme.scss @@ -1,13 +1,13 @@ @use '@carbon/styles' as * with ( - $font-path: 'https://fonts.camunda.io' + $font-path: '@ibm/plex' ); @use '@carbon/styles/scss/themes'; @use '@carbon/styles/scss/theme'; -.cds--g10 { +[data-carbon-theme='g10'] { @include theme.theme(themes.$g10); } -.cds--g100 { +[data-carbon-theme='g100'] { @include theme.theme(themes.$g100); } diff --git a/e2e/visual/theming.spec.js b/e2e/visual/theming.spec.js index 5f1627300..16f958638 100644 --- a/e2e/visual/theming.spec.js +++ b/e2e/visual/theming.spec.js @@ -26,9 +26,7 @@ test('theming - viewer', async ({ page, makeAxeBuilder }) => { }); await page.evaluate(() => { - const container = document.querySelector('body'); - container.classList.remove('cds--g10'); - container.classList.add('cds--g100'); + document.documentElement.setAttribute('data-carbon-theme', 'g100'); }); // then @@ -63,9 +61,7 @@ test('theming - editor', async ({ page, makeAxeBuilder }) => { }); await page.evaluate(() => { - const container = document.querySelector('body'); - container.classList.remove('cds--g10'); - container.classList.add('cds--g100'); + document.documentElement.setAttribute('data-carbon-theme', 'g100'); }); // then diff --git a/packages/form-js-carbon-styles/test/spec/carbon-styles.spec.js b/packages/form-js-carbon-styles/test/spec/carbon-styles.spec.js index bf104b2f5..f3865bf16 100644 --- a/packages/form-js-carbon-styles/test/spec/carbon-styles.spec.js +++ b/packages/form-js-carbon-styles/test/spec/carbon-styles.spec.js @@ -50,9 +50,9 @@ describe('Carbon styles', function () { beforeEach(function () { container = document.createElement('div'); - container.classList.add('cds--g100'); document.body.appendChild(container); + document.documentElement.setAttribute('data-carbon-theme', 'g100'); }); !singleStart && @@ -107,7 +107,7 @@ describe('Carbon styles', function () { }); toggle.addEventListener('click', () => { - toggleTheme(container); + toggleTheme(); theme = theme === 'dark' ? 'light' : 'dark'; createFormView( { @@ -191,7 +191,7 @@ describe('Carbon styles', function () { }); toggle.addEventListener('click', () => { - toggleTheme(container); + toggleTheme(); theme = theme === 'dark' ? 'light' : 'dark'; createFormView( { @@ -284,7 +284,10 @@ function WithTheme(props) { return {props.children}; } -function toggleTheme(node) { - node.classList.toggle('cds--g100'); - node.classList.toggle('cds--g10'); +function toggleTheme() { + if (document.documentElement.dataset.carbonTheme === 'cds--g100') { + document.documentElement.setAttribute('data-carbon-theme', 'g10'); + } else { + document.documentElement.setAttribute('data-carbon-theme', 'g100'); + } } diff --git a/packages/form-js-carbon-styles/test/spec/theme.scss b/packages/form-js-carbon-styles/test/spec/theme.scss index 071860b8c..3cf02f843 100644 --- a/packages/form-js-carbon-styles/test/spec/theme.scss +++ b/packages/form-js-carbon-styles/test/spec/theme.scss @@ -1,14 +1,14 @@ @use '@carbon/react' as * with ( - $font-path: 'https://fonts.camunda.io' + $font-path: '@ibm/plex' ); @use '@carbon/react/scss/themes'; @use '@carbon/react/scss/theme'; -.cds--g10 { +[data-carbon-theme='g10'] { @include theme.theme(themes.$g10); } -.cds--g100 { +[data-carbon-theme='g100'] { @include theme.theme(themes.$g100); } diff --git a/packages/form-js-editor/test/spec/FormEditor.spec.js b/packages/form-js-editor/test/spec/FormEditor.spec.js index 36241cc6d..ffee132c8 100644 --- a/packages/form-js-editor/test/spec/FormEditor.spec.js +++ b/packages/form-js-editor/test/spec/FormEditor.spec.js @@ -86,7 +86,7 @@ describe('FormEditor', function () { (singleStartTheme ? it.only : it)('should render theme', async function () { // given - container.classList.add('cds--g100'); + document.documentElement.setAttribute('data-carbon-theme', 'g100'); insertTheme(); // when @@ -104,7 +104,7 @@ describe('FormEditor', function () { (singleStartNoTheme ? it.only : it)('should render with no theme', async function () { // given - container.classList.add('cds--g10'); + document.documentElement.setAttribute('data-carbon-theme', 'g10'); container.style.backgroundColor = 'white'; insertTheme(); diff --git a/packages/form-js-viewer/test/spec/Form.spec.js b/packages/form-js-viewer/test/spec/Form.spec.js index 26ad2fcc2..de5c24a8e 100644 --- a/packages/form-js-viewer/test/spec/Form.spec.js +++ b/packages/form-js-viewer/test/spec/Form.spec.js @@ -162,7 +162,7 @@ describe('Form', function () { (singleStartTheme ? it.only : it)('should render theme', async function () { // given - container.classList.add('cds--g100'); + document.documentElement.setAttribute('data-carbon-theme', 'g100'); insertTheme(); const data = { @@ -199,7 +199,7 @@ describe('Form', function () { (singleStartNoTheme ? it.only : it)('should render with no theme', async function () { // given - container.classList.add('cds--g10'); + document.documentElement.setAttribute('data-carbon-theme', 'g100'); container.style.backgroundColor = 'white'; insertTheme();