nocode-js · b4rtaz · Jun 8, 2025 · Jun 8, 2025 · Jun 8, 2025
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,7 @@
+# 0.29.2
+
+Added a new theme: `soft`.
+
 # 0.29.1
 
 This release includes a small code refactor.

diff --git a/README.md b/README.md
@@ -104,10 +104,10 @@ Add the below code to your head section in HTML document.
 ```html
 <head>
 ...
-<link href="https://cdn.jsdelivr.net/npm/[email protected].1/css/designer.css" rel="stylesheet">
-<link href="https://cdn.jsdelivr.net/npm/[email protected].1/css/designer-light.css" rel="stylesheet">
-<link href="https://cdn.jsdelivr.net/npm/[email protected].1/css/designer-dark.css" rel="stylesheet">
-<script src="https://cdn.jsdelivr.net/npm/[email protected].1/dist/index.umd.js"></script>
+<link href="https://cdn.jsdelivr.net/npm/[email protected].2/css/designer.css" rel="stylesheet">
+<link href="https://cdn.jsdelivr.net/npm/[email protected].2/css/designer-light.css" rel="stylesheet">
+<link href="https://cdn.jsdelivr.net/npm/[email protected].2/css/designer-dark.css" rel="stylesheet">
+<script src="https://cdn.jsdelivr.net/npm/[email protected].2/dist/index.umd.js"></script>
 ```
 
 Call the designer by:

diff --git a/angular/designer/package.json b/angular/designer/package.json
@@ -1,7 +1,7 @@
 {
 	"name": "sequential-workflow-designer-angular",
 	"description": "Angular wrapper for Sequential Workflow Designer component.",
-	"version": "0.29.1",
+	"version": "0.29.2",
 	"author": {
 		"name": "NoCode JS",
 		"url": "https://nocode-js.com/"
@@ -15,7 +15,7 @@
 	"peerDependencies": {
 		"@angular/common": "12 - 19",
 		"@angular/core": "12 - 19",
-		"sequential-workflow-designer": "^0.29.1"
+		"sequential-workflow-designer": "^0.29.2"
 	},
 	"dependencies": {
 		"tslib": "^2.3.0"

diff --git a/demos/angular-app/package.json b/demos/angular-app/package.json
@@ -26,8 +26,8 @@
 		"@angular/platform-browser-dynamic": "^17.3.9",
 		"@angular/router": "^17.3.9",
 		"rxjs": "~7.8.0",
-		"sequential-workflow-designer": "^0.29.1",
-		"sequential-workflow-designer-angular": "^0.29.1",
+		"sequential-workflow-designer": "^0.29.2",
+		"sequential-workflow-designer-angular": "^0.29.2",
 		"tslib": "^2.3.0",
 		"zone.js": "~0.14.6"
 	},

diff --git a/demos/angular-app/yarn.lock b/demos/angular-app/yarn.lock
@@ -6744,17 +6744,17 @@ [email protected]:
     range-parser "~1.2.1"
     statuses "2.0.1"
 
-sequential-workflow-designer-angular@^0.29.1:
-  version "0.29.1"
-  resolved "https://registry.yarnpkg.com/sequential-workflow-designer-angular/-/sequential-workflow-designer-angular-0.29.1.tgz#dd8e5f873d96c414fed7a7588dbf396dc5490b06"
-  integrity sha512-IN4lkR16Mw3/uOOnwwwdzgY8Fy+1BgBgkaz11aN5PzmiRE/6qaFsHAsG9WenRsYx1dVGnSvjQMePMjeDN8WD2A==
+sequential-workflow-designer-angular@^0.29.2:
+  version "0.29.2"
+  resolved "https://registry.yarnpkg.com/sequential-workflow-designer-angular/-/sequential-workflow-designer-angular-0.29.2.tgz#04a12899ea6daf50e12bae286bd2d792519f55c2"
+  integrity sha512-IiOi46UrE31EUe4DL9ZT1MwswDIsmpq/qIgC5GBEeI5kKENXL09e4KbePhJQXurnpSJCzcX7cUCnRuoFsMsCdg==
   dependencies:
     tslib "^2.3.0"
 
-sequential-workflow-designer@^0.29.1:
-  version "0.29.1"
-  resolved "https://registry.yarnpkg.com/sequential-workflow-designer/-/sequential-workflow-designer-0.29.1.tgz#f619c4647e106efa3f50c7d63b93705d4c7c6e4f"
-  integrity sha512-0XfHlkhoVc/nvMNXg80dVP8N/MBRnjrWbsPPlfRl+dd1HmSF+AlE9YgO4nuhTHUHi3seI81TC5Kf8RwjZ4mTYw==
+sequential-workflow-designer@^0.29.2:
+  version "0.29.2"
+  resolved "https://registry.yarnpkg.com/sequential-workflow-designer/-/sequential-workflow-designer-0.29.2.tgz#bdb610325396baab5f5e91f95bb846159cb0cb0b"
+  integrity sha512-yPxMLLZUV529HQIAVSEWHEjOLDWn+abEZ+E7VIq3vIAs9ew3fG7U/StUz+mA8+zr7iTSp9wlGUXdZi8ZRtQ1Qw==
   dependencies:
     sequential-workflow-model "^0.2.0"
 

diff --git a/demos/react-app/package.json b/demos/react-app/package.json
@@ -6,8 +6,8 @@
 	"dependencies": {
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
-		"sequential-workflow-designer": "^0.29.1",
-		"sequential-workflow-designer-react": "^0.29.1"
+		"sequential-workflow-designer": "^0.29.2",
+		"sequential-workflow-designer-react": "^0.29.2"
 	},
 	"devDependencies": {
 		"@types/jest": "^29.2.5",

diff --git a/demos/svelte-app/package.json b/demos/svelte-app/package.json
@@ -16,8 +16,8 @@
 		"eslint": "eslint ./src --ext .ts"
 	},
 	"dependencies": {
-		"sequential-workflow-designer": "^0.29.1",
-		"sequential-workflow-designer-svelte": "^0.29.1"
+		"sequential-workflow-designer": "^0.29.2",
+		"sequential-workflow-designer-svelte": "^0.29.2"
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-static": "^2.0.3",

diff --git a/designer/package.json b/designer/package.json
@@ -1,7 +1,7 @@
 {
 	"name": "sequential-workflow-designer",
 	"description": "Customizable no-code component for building flow-based programming applications.",
-	"version": "0.29.1",
+	"version": "0.29.2",
 	"type": "module",
 	"main": "./lib/esm/index.js",
 	"types": "./lib/index.d.ts",
@@ -22,6 +22,9 @@
 		"./css/designer-light.css": {
 			"default": "./css/designer-light.css"
 		},
+		"./css/designer-soft.css": {
+			"default": "./css/designer-soft.css"
+		},
 		"./css/designer-dark.css": {
 			"default": "./css/designer-dark.css"
 		},
@@ -34,6 +37,9 @@
 		"./sass/designer-light.scss": {
 			"default": "./sass/designer-light.scss"
 		},
+		"./sass/designer-soft.scss": {
+			"default": "./sass/designer-soft.scss"
+		},
 		"./sass/designer-dark.scss": {
 			"default": "./sass/designer-dark.scss"
 		}

diff --git a/designer/sass/designer-soft.scss b/designer/sass/designer-soft.scss
@@ -0,0 +1,47 @@
+@import './designer-theme.scss';
+
+$joinColor: #2a2a2a;
+
+@include sqd-theme-ui-toolbox(
+	'soft',
+	$groupBackgroundColor: #efefef,
+	$filterBorder: 1px solid #dbdbdb,
+	$filterBorderColorFocused: #c3c3c3,
+	$panelBoxShadow: (0 1px 4px rgba(0, 0, 0, 0.15))
+);
+@include sqd-theme-ui-toolbox-item(
+	'soft',
+	$itemBorder: 1px solid #dbdbdb,
+	$itemBorderHovered: #cfcfcf,
+	$itemBoxShadow: (0 1px 3px rgba(0, 0, 0, 0.1)),
+	$noIconBackgroundColor: #e9e9e9
+);
+@include sqd-theme-ui-control-bar('soft', $panelBoxShadow: (0 1px 4px rgba(0, 0, 0, 0.15)));
+@include sqd-theme-ui-editor('soft', $panelBoxShadow: (0 1px 4px rgba(0, 0, 0, 0.15)), $toggleBoxShadow: (0 1px 4px rgba(0, 0, 0, 0.1)));
+@include sqd-theme-ui-context-menu('soft');
+
+@include sqd-theme-workspace('soft');
+@include sqd-theme-line-grid('soft', $strokeColor: #ebebeb);
+@include sqd-theme-join('soft', $joinStrokeColor: $joinColor);
+@include sqd-theme-region('soft', $strokeColor: #e9e9e9);
+@include sqd-theme-placeholder('soft', $rectFillColor: #e9e9e9, $rectStrokeColor: #707070);
+@include sqd-theme-validation-error-badge('soft');
+
+@include sqd-theme-start-stop-root-component('soft', $circleFillColor: #3747dd);
+
+@include sqd-theme-task-step-component(
+	'soft',
+	$rectStrokeColor: #dbdbdb,
+	$rectShadow: (0 1px 3px rgba(0, 0, 0, 0.1)),
+	$emptyIconColor: #e9e9e9,
+	$inputStrokeColor: $joinColor,
+	$outputFillColor: $joinColor
+);
+@include sqd-theme-switch-step-component(
+	'soft',
+	$labelPrimaryFillColor: #3747dd,
+	$labelSecondaryTextColor: #555555,
+	$labelSecondaryFillColor: #e9e9e9,
+	$inputStrokeColor: $joinColor
+);
+@include sqd-theme-container-step-component('soft', $labelFillColor: #3747dd, $inputStrokeColor: $joinColor);
diff --git a/designer/src/workspace/switch-step/switch-step-component-view.ts b/designer/src/workspace/switch-step/switch-step-component-view.ts
@@ -86,12 +86,12 @@ export const createSwitchStepComponentViewFactory =
 			let maxBranchesHeight = 0;
 
 			branchNames.forEach(branchName => {
-				const component = viewContext.createSequenceComponent(g, step.branches[branchName]);
-
 				const labelY = paddingTop + cfg.nameLabel.height + cfg.connectionHeight;
 				const translatedBranchName = viewContext.i18n(`stepComponent.${step.type}.branchName`, branchName);
 				const labelView = LabelView.create(g, labelY, cfg.branchNameLabel, translatedBranchName, 'secondary');
 
+				const component = viewContext.createSequenceComponent(g, step.branches[branchName]);
+
 				const halfOfWidestBranchElement = Math.max(labelView.width, cfg.minBranchWidth) / 2;
 
 				const branchOffsetLeft = Math.max(halfOfWidestBranchElement - component.view.joinX, 0) + cfg.paddingX;

diff --git a/examples/assets/auto-select.js b/examples/assets/auto-select.js
@@ -2,6 +2,7 @@
 
 function init(id, isAutoSelectDisabled) {
 	const configuration = {
+		theme: 'soft',
 		steps: {
 			iconUrlProvider: () => './assets/icon-task.svg',
 			isAutoSelectDisabled

diff --git a/examples/assets/code-generator.js b/examples/assets/code-generator.js
@@ -182,6 +182,7 @@ function reload(definition) {
 }
 
 const configuration = {
+	theme: 'soft',
 	toolbox: {
 		groups: [
 			{

diff --git a/examples/assets/common.css b/examples/assets/common.css
@@ -1,8 +1,9 @@
+html,
 body,
 h1,
 select {
 	font:
-		13px/1.3em 'Open Sans',
+		14px/1.3em 'Open Sans',
 		Arial,
 		Verdana,
 		Serif;
@@ -12,15 +13,15 @@ select {
 
 .title-bar {
 	display: flex;
-	min-height: 40px;
-	background: #242424;
+	min-height: 60px;
 	align-items: center;
 	width: 100%;
-	box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
+	background: #fff;
+	box-shadow: inset 0 -2px 2px rgba(0, 0, 0, 0.06);
 }
 .title-bar,
 .title-bar a {
-	color: #fff;
+	color: #000;
 	text-decoration: none;
 }
 .title-bar a:hover {
@@ -31,11 +32,15 @@ select {
 }
 .title-bar select,
 .title-bar button {
-	background: #fff;
+	background: #efefef;
 	color: #000;
 	border: 0;
-	padding: 5px;
-	border-radius: 5px;
+	padding: 6px 12px;
+	border-radius: 10px;
+}
+.title-bar select:hover,
+.title-bar button:hover {
+	background: #e8e8e8;
 }
 .title-bar button {
 	cursor: pointer;
@@ -47,6 +52,9 @@ select {
 .text-end {
 	text-align: end;
 }
+.text-gray {
+	color: #d7d7d7;
+}
 @media only screen and (max-width: 700px) {
 	.hidden-mobile {
 		display: none;

diff --git a/examples/assets/editing-restrictions.js b/examples/assets/editing-restrictions.js
@@ -57,6 +57,7 @@ function load() {
 	};
 	let designer;
 	const configuration = {
+		theme: 'soft',
 		undoStackSize: 10,
 		toolbox: {
 			isCollapsed: true,

diff --git a/examples/assets/fullscreen.js b/examples/assets/fullscreen.js
@@ -88,7 +88,7 @@ let validationStatusText;
 const localStorageKey = 'sqdFullscreen';
 
 function refreshValidationStatus() {
-	validationStatusText.innerText = designer.isValid() ? 'Definition is valid' : 'Definition is invalid';
+	validationStatusText.innerText = designer.isValid() ? '✅ Definition is valid' : '❌ Definition is invalid';
 }
 
 function loadState() {
@@ -111,6 +111,7 @@ function saveState() {
 const initialState = loadState();
 
 const configuration = {
+	theme: 'soft',
 	undoStackSize: 20,
 	undoStack: initialState.undoStack,
 
@@ -178,7 +179,7 @@ function getStartDefinition() {
 			createIfStep(
 				'00000000000000000000000000000001',
 				[createTaskStep('00000000000000000000000000000002', 'save', 'Save file', { isInvalid: true })],
-				[createTaskStep('00000000000000000000000000000003', 'text', 'Send email')]
+				[createTaskStep('00000000000000000000000000000003', 'text', 'Ask AI')]
 			),
 			createContainerStep('00000000000000000000000000000004', [
 				createTaskStep('00000000000000000000000000000005', 'task', 'Create task')

diff --git a/examples/assets/i18n.js b/examples/assets/i18n.js
@@ -78,6 +78,7 @@ function mount(lang) {
 		return (LANG[lang] && LANG[lang][key]) || defaultValue;
 	};
 	const configuration = {
+		theme: 'soft',
 		undoStackSize: 5,
 		toolbox: {
 			groups: [

diff --git a/examples/assets/lib.js b/examples/assets/lib.js
@@ -13,9 +13,10 @@ function embedStylesheet(url) {
 	document.write(`<link href="${url}" rel="stylesheet">`);
 }
 
-const baseUrl = isTestEnv() ? '../designer' : '//cdn.jsdelivr.net/npm/[email protected].1';
+const baseUrl = isTestEnv() ? '../designer' : '//cdn.jsdelivr.net/npm/[email protected].2';
 
 embedScript(`${baseUrl}/dist/index.umd.js`);
 embedStylesheet(`${baseUrl}/css/designer.css`);
 embedStylesheet(`${baseUrl}/css/designer-light.css`);
+embedStylesheet(`${baseUrl}/css/designer-soft.css`);
 embedStylesheet(`${baseUrl}/css/designer-dark.css`);
diff --git a/examples/assets/light-dark.js b/examples/assets/light-dark.js
@@ -59,6 +59,6 @@ function install(placeholder, theme) {
 }
 
 window.addEventListener('load', () => {
-	install(document.getElementById('light'), 'light');
+	install(document.getElementById('light'), 'soft');
 	install(document.getElementById('dark'), 'dark');
 });
diff --git a/examples/assets/live-testing.js b/examples/assets/live-testing.js
@@ -173,6 +173,7 @@ function stepEditorProvider(step, editorContext, _definition, isReadonly) {
 }
 
 const configuration = {
+	theme: 'soft',
 	undoStackSize: 5,
 
 	toolbox: {

diff --git a/examples/assets/multi-conditional-switch.js b/examples/assets/multi-conditional-switch.js
@@ -211,6 +211,7 @@ function load() {
 		properties: {}
 	};
 	const configuration = {
+		theme: 'soft',
 		toolbox: {
 			groups: [
 				{

diff --git a/examples/assets/particles.js b/examples/assets/particles.js
@@ -182,6 +182,7 @@ class Popup {
 		popupCloseButton.innerText = 'Save ' + particle.colorA;
 
 		const designer = sequentialWorkflowDesigner.Designer.create(popupPlaceholder, particle.definition, {
+			theme: 'soft',
 			toolbox: {
 				groups: [
 					{

diff --git a/examples/assets/rendering-test.js b/examples/assets/rendering-test.js
@@ -133,6 +133,7 @@ function initDesigner(testCaseName) {
 
 	const definition = testCases[testCaseName];
 	const configuration = {
+		theme: 'soft',
 		toolbox: false,
 
 		steps: {

diff --git a/examples/assets/scrollable-page.js b/examples/assets/scrollable-page.js
@@ -37,6 +37,7 @@ const definition = {
 	properties: {}
 };
 const configuration = {
+	theme: 'soft',
 	toolbox: {
 		groups: [
 			{

diff --git a/examples/assets/stress-test.js b/examples/assets/stress-test.js
@@ -29,6 +29,7 @@ class Steps {
 }
 
 const configuration = {
+	theme: 'soft',
 	steps: {
 		iconUrlProvider: (_, type) => {
 			return `./assets/icon-${type}.svg`;

diff --git a/examples/auto-select.html b/examples/auto-select.html
@@ -54,8 +54,9 @@
 			<div class="column">
 				<h1>🌀 Auto-Select Example</h1>
 			</div>
-			<div class="column text-end flex-1">
-				<a href="https://github.com/nocode-js/sequential-workflow-designer" target="_blank">GitHub</a>
+			<div class="column text-end flex-1 text-gray">
+				<a href="https://github.com/nocode-js/sequential-workflow-designer" target="_blank">GitHub</a> |
+				<a href="https://nocode-js.com" target="_blank">NoCode JS</a>
 			</div>
 		</header>