@knime/kds-code-editor 5.0.0 → 6.0.0

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @knime/kds-code-editor
 
+## 6.0.0
+
+### Patch Changes
+
+- 3041c30: `KdsCodeEditor` and `KdsConsole` now theme from the effective dark-mode state (`useKdsDarkMode().isDark`), so they follow the `system` (OS) preference instead of only an explicit dark/light preference.
+- Updated dependencies [3041c30]
+  - @knime/kds-components@6.0.0
+  - @knime/kds-styles@6.0.0
+
 ## 5.0.0
 
 ### Patch Changes

package/dist/index.css

@@ -1,13 +1,13 @@
 
 .kds-code-editor {
-&[data-v-26f569f5] {
+&[data-v-b08b3037] {
   display: flex;
   flex-direction: column;
 
   /* No row bounds set: fill the width and height of the container. */
 }
 .editor {
-&[data-v-26f569f5] {
+&[data-v-b08b3037] {
     display: flex;
     flex-direction: column;
     overflow: hidden;
@@ -21,12 +21,12 @@
     /* Keeps its natural height — in fill mode only the code area grows /
        shrinks with the container. */
 }
-&.focused[data-v-26f569f5] {
+&.focused[data-v-b08b3037] {
       outline: var(--kds-border-action-focused);
       outline-offset: var(--kds-spacing-offset-focus);
 }
 .header {
-&[data-v-26f569f5] {
+&[data-v-b08b3037] {
       display: flex;
       align-items: center;
       justify-content: space-between;
@@ -34,7 +34,7 @@
         var(--kds-spacing-container-0-5x) var(--kds-spacing-container-0-25x)
         var(--kds-spacing-container-0-75x);
 }
-.left-block[data-v-26f569f5] {
+.left-block[data-v-b08b3037] {
         display: flex;
         flex: 1;
         gap: var(--kds-spacing-container-0-25x);
@@ -45,13 +45,13 @@
            buttons are present (matches the small button height). */
         min-height: var(--kds-dimension-component-height-1-5x);
 }
-.action-buttons[data-v-26f569f5] {
+.action-buttons[data-v-b08b3037] {
         display: flex;
         flex-shrink: 0;
         gap: var(--kds-spacing-container-0-12x);
         align-items: center;
 }
-.title[data-v-26f569f5] {
+.title[data-v-b08b3037] {
         overflow: hidden;
         text-overflow: ellipsis;
         font: var(--kds-font-base-interactive-small);
@@ -59,27 +59,27 @@
         white-space: nowrap;
 }
 }
-&.error .header[data-v-26f569f5] {
+&.error .header[data-v-b08b3037] {
       background-color: var(--kds-color-background-static-danger-muted);
 }
-&.warning .header[data-v-26f569f5] {
+&.warning .header[data-v-b08b3037] {
       background-color: var(--kds-color-background-static-warning-muted);
 }
-.code[data-v-26f569f5] {
+.code[data-v-b08b3037] {
       width: 100%;
 }
-.footer[data-v-26f569f5] {
+.footer[data-v-b08b3037] {
       flex-shrink: 0;
       width: 100%;
 }
 }
 &.fill {
-&[data-v-26f569f5] {
+&[data-v-b08b3037] {
     width: 100%;
     height: 100%;
 }
-.editor[data-v-26f569f5],
-    .code[data-v-26f569f5] {
+.editor[data-v-b08b3037],
+    .code[data-v-b08b3037] {
       flex: 1 1 auto;
       min-height: 0;
 }
@@ -305,7 +305,7 @@
 }
 
 .terminal {
-&[data-v-c23d8d58] {
+&[data-v-646b2bdc] {
   height: 100%;
   overflow: hidden;
   border-radius: var(--kds-border-radius-container-0-12x);
@@ -313,7 +313,7 @@
   /* Only paint a focus ring when the user navigated to the terminal with the
      keyboard (mouse focus doesn't need the extra ring). */
 }
-&.focus-painted[data-v-c23d8d58]:focus-within {
+&.focus-painted[data-v-646b2bdc]:focus-within {
     outline: var(--kds-border-action-focused);
     outline-offset: var(--kds-spacing-offset-focus);
 }

package/dist/index.js

@@ -5184,8 +5184,8 @@ var KdsCodeEditor_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 			return `${lineHeight.value * rows + EXTRA_PADDING}px`;
 		});
 		const codeFont = font.base.code.small;
-		const getMonacoTheme = (isDark) => isDark ? MONACO_THEME_DARK : MONACO_THEME_LIGHT;
-		const { isDarkMode } = useKdsDarkMode();
+		const getMonacoTheme = (dark) => dark ? MONACO_THEME_DARK : MONACO_THEME_LIGHT;
+		const { isDark } = useKdsDarkMode();
 		const getEditorInputElement = () => container.value?.querySelector("[role=\"textbox\"]");
 		const syncEditorInputAria = () => {
 			const input = getEditorInputElement();
@@ -5221,7 +5221,7 @@ var KdsCodeEditor_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 				overflowWidgetsDomNode,
 				scrollbar: { alwaysConsumeMouseWheel: false },
 				readOnly: __props.readOnly,
-				theme: getMonacoTheme(isDarkMode.value),
+				theme: getMonacoTheme(isDark.value),
 				ariaLabel: editorAriaLabel.value,
 				accessibilitySupport: "on"
 			});
@@ -5259,8 +5259,8 @@ var KdsCodeEditor_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 				isEditorFocused.value = false;
 			});
 		});
-		watch(isDarkMode, (isDark) => {
-			if (editorInstance) editorInstance.updateOptions({ theme: getMonacoTheme(isDark) });
+		watch(isDark, (dark) => {
+			if (editorInstance) editorInstance.updateOptions({ theme: getMonacoTheme(dark) });
 		});
 		watch(() => __props.readOnly, (isReadOnly) => {
 			editorInstance?.updateOptions({ readOnly: isReadOnly });
@@ -5356,7 +5356,7 @@ var _plugin_vue_export_helper_default = (sfc, props) => {
 };
 //#endregion
 //#region src/CodeEditor/KdsCodeEditor.vue
-var KdsCodeEditor_default = /*#__PURE__*/ _plugin_vue_export_helper_default(KdsCodeEditor_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-26f569f5"]]);
+var KdsCodeEditor_default = /*#__PURE__*/ _plugin_vue_export_helper_default(KdsCodeEditor_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-b08b3037"]]);
 //#endregion
 //#region src/Console/utils/buildTheme.ts
 /**
@@ -5491,7 +5491,7 @@ var KdsConsole_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 	emits: ["console-created"],
 	setup(__props, { emit: __emit }) {
 		const emit = __emit;
-		const { isDarkMode } = useKdsDarkMode();
+		const { isDark } = useKdsDarkMode();
 		const codeFont = font.base.code.small;
 		const term = new Terminal({
 			letterSpacing: 0,
@@ -5501,7 +5501,7 @@ var KdsConsole_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			convertEol: true,
 			disableStdin: true,
 			cursorBlink: false,
-			theme: buildTheme(isDarkMode.value ? "dark" : "light")
+			theme: buildTheme(isDark.value ? "dark" : "light")
 		});
 		const unicode11Addon = new Unicode11Addon();
 		term.loadAddon(unicode11Addon);
@@ -5532,7 +5532,7 @@ var KdsConsole_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 		});
 		term.onWriteParsed(() => term.scrollToBottom());
 		watchEffect(() => {
-			term.options.theme = buildTheme(isDarkMode.value ? "dark" : "light");
+			term.options.theme = buildTheme(isDark.value ? "dark" : "light");
 		});
 		const format = (text) => {
 			if ("error" in text) return `\x1b[31m[ERROR] ${text.error}\x1b[0m`;
@@ -5562,7 +5562,7 @@ var KdsConsole_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			}, null, 2);
 		};
 	}
-}), [["__scopeId", "data-v-c23d8d58"]]);
+}), [["__scopeId", "data-v-646b2bdc"]]);
 //#endregion
 export { KdsCodeEditor_default as KdsCodeEditor, KdsConsole_default as KdsConsole, kdsCodeEditorState, kdsCodeEditorStates, setupMonacoEnvironment };