bpmn-io · pinussilvestrus · Nov 8, 2023 · Nov 7, 2023 · Nov 7, 2023 · Nov 7, 2023
diff --git a/e2e/carbon/carbon.scss b/e2e/carbon/carbon.scss
@@ -0,0 +1,15 @@
+@use '@carbon/styles' as * with (
+  $font-path: 'https://fonts.camunda.io'
+);
+@use '@carbon/styles/scss/themes';
+@use '@carbon/styles/scss/theme';
+
+@import '@bpmn-io/form-js-carbon-styles/src/carbon-styles';
+
+.cds--g10 {
+  @include theme.theme(themes.$g10);
+}
+
+.cds--g100 {
+  @include theme.theme(themes.$g100);
+}
diff --git a/e2e/carbon/index.html b/e2e/carbon/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Forms playground</title>
+    <title>Carbon styles</title>
     <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,400;0,600;1,400&display=swap" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap" rel="stylesheet">
     <style>
@@ -16,7 +16,7 @@
       }
     </style>
 </head>
-<body class="cds--g10">
+<body class="cds--g100">
     <div id="container" role="main"></div>
     <script type="module" src="index.js"></script>
 </body>

diff --git a/e2e/carbon/index.js b/e2e/carbon/index.js
@@ -2,7 +2,7 @@ import '@bpmn-io/form-js/dist/assets/form-js.css';
 import '@bpmn-io/form-js/dist/assets/form-js-editor.css';
 import '@bpmn-io/form-js/dist/assets/form-js-playground.css';
 
-import './theme.scss';
+import './carbon.scss';
 
 import { renderSchema } from '../renderSchema';
 

diff --git a/e2e/theming/index.html b/e2e/theming/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Theming</title>
+    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,400;0,600;1,400&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap" rel="stylesheet">
+    <style>
+      html, body, #container {
+        margin: 0;
+        padding: 0;
+        width: 100vw;
+        height: 100vh;
+      }
+    </style>
+</head>
+<body class="cds--g10">
+    <div id="container" role="main"></div>
+    <script type="module" src="index.js"></script>
+</body>
+</html>
diff --git a/e2e/theming/index.js b/e2e/theming/index.js
@@ -0,0 +1,9 @@
+import '@bpmn-io/form-js/dist/assets/form-js.css';
+import '@bpmn-io/form-js/dist/assets/form-js-editor.css';
+import '@bpmn-io/form-js/dist/assets/form-js-playground.css';
+
+import './theme.scss';
+
+import { renderSchema } from '../renderSchema';
+
+renderSchema();
diff --git a/e2e/carbon/theme.scss → e2e/theming/theme.scss b/e2e/carbon/theme.scss → e2e/theming/theme.scss
diff --git a/e2e/visual/carbon-styles.spec.js b/e2e/visual/carbon-styles.spec.js
@@ -0,0 +1,38 @@
+const { expect } = require('@playwright/test');
+
+const { test } = require('../test-fixtures');
+
+const schema = require('./fixtures/complex.json');
+
+test('carbon styles', async ({ page, makeAxeBuilder }) => {
+
+  // given
+  await page.route('/form', route => {
+
+    route.fulfill({
+      status: 200,
+      body: JSON.stringify({
+        data: {
+          schema,
+          component: 'viewer'
+        }
+      })
+    });
+  });
+
+  // when
+  await page.goto('/carbon');
+
+  await page.waitForSelector('#container', {
+    state: 'visible'
+  });
+
+  // then
+  await expect(page).toHaveScreenshot();
+
+  // and then
+  const results = await makeAxeBuilder().analyze();
+
+  expect(results.violations).toHaveLength(0);
+  expect(results.passes.length).toBeGreaterThan(0);
+});
diff --git a/e2e/visual/carbon-styles.spec.js-snapshots/carbon-styles-1-chromium-linux.png b/e2e/visual/carbon-styles.spec.js-snapshots/carbon-styles-1-chromium-linux.png
diff --git a/e2e/visual/carbon-styles.spec.js-snapshots/carbon-styles-1-firefox-linux.png b/e2e/visual/carbon-styles.spec.js-snapshots/carbon-styles-1-firefox-linux.png
diff --git a/e2e/visual/carbon-styles.spec.js-snapshots/carbon-styles-1-webkit-linux.png b/e2e/visual/carbon-styles.spec.js-snapshots/carbon-styles-1-webkit-linux.png