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/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);
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();