windmill-components 1.558.3 → 1.596.0

package/package/components/Toast.svelte

@@ -1,38 +1,87 @@
+<script lang="ts" module>"use strict";
+const toastStates = $state({});
+let lastTime = 0;
+let isLoopRunning = false;
+function update(time) {
+    isLoopRunning = true;
+    const delta = time - lastTime;
+    let hover = Object.values(toastStates).some((state) => state.hover);
+    for (const toastId in toastStates) {
+        const state = toastStates[toastId];
+        if (hover)
+            continue;
+        if (state.elapsed >= state.duration) {
+            delete toastStates[toastId];
+            continue;
+        }
+        state.elapsed += delta;
+    }
+    lastTime = time;
+    if (Object.values(toastStates).length > 0) {
+        requestAnimationFrame(update);
+    }
+    else {
+        isLoopRunning = false;
+    }
+}
+function registerToast(toastId, duration) {
+    toastStates[toastId] = { hover: false, elapsed: 0, duration };
+    if (!isLoopRunning) {
+        requestAnimationFrame((time) => {
+            lastTime = time;
+            update(time);
+        });
+    }
+}
+</script>
+
 <script lang="ts">import { toast } from '@zerodevx/svelte-toast';
 import { CheckCircle2, XCircleIcon } from 'lucide-svelte';
-import { onMount } from 'svelte';
 import Button from './common/button/Button.svelte';
+import {} from '../toast';
 import { processMessage } from './toast';
+import { onDestroy, untrack } from 'svelte';
 let { message, toastId, error = false, actions = [], errorMessage = undefined, duration = 5000 } = $props();
 function handleClose() {
     toast.pop(toastId);
 }
-// On mount, close after 5 seconds
-onMount(() => {
-    setTimeout(() => {
+$effect.pre(() => {
+    untrack(() => registerToast(toastId, duration));
+});
+onDestroy(() => {
+    delete toastStates[toastId];
+});
+let state = $derived.by(() => toastStates[toastId]);
+$effect(() => {
+    if (!state) {
         toast.pop(toastId);
-    }, duration);
+    }
 });
+let color = error
+    ? { text: 'text-red-400', bg: 'bg-red-400' }
+    : { text: 'text-green-400', bg: 'bg-green-300' };
+let hover = $derived(Object.values(toastStates).some((state) => state.hover));
 </script>
 
+<!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
-	class="pointer-events-auto w-full max-w-sm overflow-hidden bg-surface shadow-lg ring-1 ring-black ring-opacity-5 border"
+	class="pointer-events-auto w-full max-w-sm overflow-hidden bg-surface-tertiary drop-shadow-base shadow-lg ring-1 ring-black ring-opacity-5 border rounded-md"
+	onmouseenter={() => state && (state.hover = true)}
+	onmouseleave={() => state && (state.hover = false)}
 >
 	<div class="p-2 min-h-[60px] flex flex-col">
 		<div class="flex items-start w-full">
 			<div class="flex-shrink-0 mt-0.5">
 				{#if error}
-					<XCircleIcon class="h-4 w-4 text-red-400" />
+					<XCircleIcon class="h-4 w-4 {color.text}" />
 				{:else}
-					<CheckCircle2 class="h-4 w-4 text-green-400" />
+					<CheckCircle2 class="h-4 w-4 {color.text}" />
 				{/if}
 			</div>
 			<div class="ml-3 flex-1 w-0">
-				<p class="text-sm text-secondary break-words">{@html processMessage(message)}</p>
+				<p class="text-sm text-primary break-words">{@html processMessage(message)}</p>
 				{#if errorMessage}
-					<p
-						class="text-sm text-secondary border bg-surface-secondary p-2 w-full overflow-auto mt-2"
-					>
+					<p class="text-xs {color.text} w-full overflow-auto mt-2">
 						{errorMessage}
 					</p>
 				{/if}
@@ -42,7 +91,7 @@ onMount(() => {
 				<button
 					type="button"
 					onclick={handleClose}
-					class="inline-flex rounded-md bg-surface-secondary text-gray-400 hover:text-tertiary focus:outline-none"
+					class="inline-flex rounded-md text-gray-400 hover:text-primary focus:outline-none"
 				>
 					<span class="sr-only">Close</span>
 					<svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
@@ -53,18 +102,25 @@ onMount(() => {
 				</button>
 			</div>
 		</div>
-		<div class="mt-2 flex flex-col gap-2 h-15 items-center">
+		<div class="mt-2 flex flex-col gap-2 w-full items-center">
 			{#each actions as action, index (index)}
 				<Button
-					on:click={() => {
+					variant={action.buttonType ?? 'default'}
+					onClick={() => {
 						action.callback()
 						toast.pop(toastId)
 					}}
-					class="text-sm !text-primary"
+					wrapperClasses="w-full"
 				>
 					{action.label}
 				</Button>
 			{/each}
 		</div>
 	</div>
+	<!-- Duration indicator -->
+	<div
+		class="h-0.5 transition-colors {hover ? 'bg-gray-300' : color.bg}"
+		style="width: {Math.max(0, 1 - (state?.elapsed ?? duration) / duration) * 100}%"
+	>
+	</div>
 </div>

package/package/components/Toast.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { ToastAction } from '../toast';
+import { type ToastAction } from '../toast';
 interface Props {
     message: string;
     toastId: string;

package/package/components/Toggle.svelte

@@ -1,30 +1,20 @@
-<script lang="ts">import { classNames } from '../utils';
+<script lang="ts">import { createBubbler, stopPropagation } from 'svelte/legacy';
+const bubble = createBubbler();
+import { classNames } from '../utils';
 import { createEventDispatcher } from 'svelte';
 import { twMerge } from 'tailwind-merge';
 import Tooltip from './Tooltip.svelte';
 import { AlertTriangle } from 'lucide-svelte';
 import { triggerableByAI } from '../actions/triggerableByAI.svelte';
 import { inputBorderClass } from './text_input/TextInput.svelte';
-export let options = {};
-export let checked = false;
-export let disabled = false;
-export let textClass = '';
-export let textStyle = '';
-export let color = 'nord';
-export let id = (Math.random() + 1).toString(36).substring(10);
-export let lightMode = false;
-export let eeOnly = false;
-export let aiId = undefined;
-export let aiDescription = undefined;
-export let size = 'sm';
+let { options = {}, checked = $bindable(), disabled = false, textClass = '', textStyle = '', color = 'blue', id = (Math.random() + 1).toString(36).substring(10), lightMode = false, eeOnly = false, aiId = undefined, aiDescription = undefined, class: className = undefined, size = 'sm', textDisabled = false, right } = $props();
 const dispatch = createEventDispatcher();
 const bothOptions = Boolean(options.left) && Boolean(options.right);
-export let textDisabled = false;
 </script>
 
 <label
 	for={id}
-	class="{$$props.class || ''} z-auto flex flex-row items-center duration-50 {disabled
+	class="{className || ''} z-auto flex flex-row items-center duration-50 {disabled
 		? 'grayscale opacity-50'
 		: 'cursor-pointer'}"
 	title={options?.title}
@@ -33,12 +23,8 @@ export let textDisabled = false;
 		<span
 			class={twMerge(
 				'mr-2 font-normal duration-50 select-none',
-				bothOptions || textDisabled
-					? checked
-						? 'text-disabled'
-						: 'text-tertiary'
-					: 'text-tertiary',
-				size === 'xs' || size === '2sm' ? 'text-xs' : size === '2xs' ? 'text-[0.5rem]' : 'text-sm',
+				bothOptions || textDisabled ? (checked ? 'text-disabled' : 'text-primary') : 'text-primary',
+				size === '2xs' ? 'text-2xs' : 'text-xs',
 				textClass
 			)}
 			style={textStyle}
@@ -50,11 +36,11 @@ export let textDisabled = false;
 		</span>
 	{/if}
 
-	<!-- svelte-ignore a11y-click-events-have-key-events -->
-	<!-- svelte-ignore a11y-no-static-element-interactions -->
+	<!-- svelte-ignore a11y_click_events_have_key_events -->
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
 	<div
 		class="relative"
-		on:click|stopPropagation
+		onclick={stopPropagation(bubble('click'))}
 		use:triggerableByAI={{
 			id: aiId,
 			description: aiDescription,
@@ -64,28 +50,28 @@ export let textDisabled = false;
 		}}
 	>
 		<input
-			on:focus
-			on:click
+			onfocus={bubble('focus')}
+			onclick={bubble('click')}
 			{disabled}
 			type="checkbox"
 			{id}
 			class="sr-only peer"
 			bind:checked
-			on:change|stopPropagation={(e) => {
-				dispatch('change', checked)
-			}}
+			onchange={stopPropagation((e) => {
+				dispatch('change', !!checked)
+			})}
 		/>
 		<div
 			class={classNames(
-				"transition-all bg-surface-selected rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute  after:bg-surface after:border-white after:border after:rounded-full after:transition-all items-center",
+				"transition-all bg-surface-sunken rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute  after:bg-surface after:border-white after:border after:rounded-full after:transition-all items-center",
 				color == 'red'
 					? 'peer-checked:bg-red-600'
 					: color == 'blue'
-						? 'peer-checked:bg-blue-600 dark:peer-checked:bg-blue-500'
+						? 'peer-checked:bg-blue-400 '
 						: 'peer-checked:bg-nord-950 dark:peer-checked:bg-nord-900',
-				size === 'sm'
+				size === 'md'
 					? 'w-11 h-6 after:top-0.5 after:left-[2px] after:h-5 after:w-5'
-					: size === '2sm'
+					: size === 'sm'
 						? 'w-9 h-5 after:top-0.5 after:left-[2px] after:h-4 after:w-4'
 						: size === '2xs'
 							? 'w-5 h-3 after:top-0.5 after:left-[2px] after:h-2 after:w-2'
@@ -98,12 +84,8 @@ export let textDisabled = false;
 		<span
 			class={twMerge(
 				'ml-2 font-normal duration-50 select-none',
-				bothOptions || textDisabled
-					? checked
-						? 'text-secondary'
-						: 'text-disabled'
-					: 'text-secondary',
-				size === 'xs' || size === '2sm' ? 'text-xs' : size === '2xs' ? 'text-xs' : 'text-sm',
+				bothOptions || textDisabled ? (checked ? 'text-primary' : 'text-disabled') : 'text-primary',
+				size === '2xs' ? 'text-2xs' : 'text-xs',
 				textClass
 			)}
 			style={textStyle}
@@ -116,7 +98,7 @@ export let textDisabled = false;
 			{/if}
 		</span>
 	{/if}
-	<slot name="right" />
+	{@render right?.()}
 </label>
 {#if eeOnly && disabled}
 	<span class="inline-flex text-xs items-center gap-1 !text-yellow-500 whitespace-nowrap ml-8">

package/package/components/Toggle.svelte.d.ts

@@ -1,3 +1,27 @@
+interface Props {
+    options?: {
+        left?: string;
+        leftTooltip?: string;
+        right?: string;
+        rightTooltip?: string;
+        rightDocumentationLink?: string;
+        title?: string;
+    };
+    checked?: boolean;
+    disabled?: boolean;
+    textClass?: string;
+    textStyle?: string;
+    color?: 'blue' | 'red' | 'nord';
+    id?: any;
+    lightMode?: boolean;
+    eeOnly?: boolean;
+    aiId?: string | undefined;
+    aiDescription?: string | undefined;
+    class?: string | undefined;
+    size?: '2xs' | 'xs' | 'sm' | 'md';
+    textDisabled?: boolean;
+    right?: import('svelte').Snippet;
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
@@ -11,36 +35,10 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const Toggle: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: any;
-    options?: {
-        left?: string;
-        leftTooltip?: string;
-        right?: string;
-        rightTooltip?: string;
-        rightDocumentationLink?: string;
-        title?: string;
-    } | undefined;
-    checked?: boolean | undefined;
-    disabled?: boolean | undefined;
-    textClass?: string | undefined;
-    textStyle?: string | undefined;
-    color?: "blue" | "red" | "nord" | undefined;
-    id?: string | undefined;
-    lightMode?: boolean | undefined;
-    eeOnly?: boolean | undefined;
-    aiId?: string | undefined | undefined;
-    aiDescription?: string | undefined | undefined;
-    size?: "sm" | "xs" | "2xs" | "2sm" | undefined;
-    textDisabled?: boolean | undefined;
-}, {
-    click: PointerEvent;
-    focus: FocusEvent;
+declare const Toggle: $$__sveltets_2_IsomorphicComponent<Props, {
     change: CustomEvent<boolean>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {
-    right: {};
-}, {}, string>;
+}, {}, {}, "checked">;
 type Toggle = InstanceType<typeof Toggle>;
 export default Toggle;

package/package/components/ToggleHubWorkspaceQuick.svelte

@@ -8,9 +8,9 @@ let { selected = $bindable('all') } = $props();
 <div class="max-w-min">
 	<ToggleButtonGroup id="flow-editor-flow-providers" bind:selected>
 		{#snippet children({ item })}
-			<ToggleButton value="all" label="All" light {item} />
-			<ToggleButton value="hub" icon={WindmillIcon2} label="Hub" light {item} />
-			<ToggleButton value="workspace" icon={Building} label="Workspace" light {item} />
+			<ToggleButton size="sm" value="all" label="All" {item} />
+			<ToggleButton size="sm" value="hub" icon={WindmillIcon2} label="Hub" {item} />
+			<ToggleButton size="sm" value="workspace" icon={Building} label="Workspace" {item} />
 		{/snippet}
 	</ToggleButtonGroup>
 </div>

package/package/components/Tooltip.svelte

@@ -1,8 +1,13 @@
-<script lang="ts">import Markdown from 'svelte-exmarkdown';
+<script lang="ts">/**
+ * @deprecated Use `$lib/components/meltComponents/Tooltip.svelte` instead.
+ * This legacy tooltip component will be removed in a future version.
+ */
+import Markdown from 'svelte-exmarkdown';
 import Popover from './Popover.svelte';
-import { ExternalLink, InfoIcon } from 'lucide-svelte';
+import { InfoIcon } from 'lucide-svelte';
 import { gfmPlugin } from 'svelte-exmarkdown/gfm';
 import { getContext, hasContext } from 'svelte';
+import { twMerge } from 'tailwind-merge';
 let { light = false, wrapperClass = '', placement = undefined, documentationLink = undefined, small = false, markdownTooltip = undefined, customSize = '100%', class: classNames = '', children } = $props();
 const plugins = [gfmPlugin()];
 const disableTooltips = hasContext('disableTooltips')
@@ -14,13 +19,14 @@ const disableTooltips = hasContext('disableTooltips')
 	<Popover
 		notClickable
 		{placement}
-		class={wrapperClass}
+		class={twMerge(wrapperClass)}
 		style="transform: scale({parseFloat(customSize) / 100});"
+		{documentationLink}
 	>
 		<div
 			class="inline-flex w-3 mx-0.5 h-3 {light
-				? 'text-tertiary-inverse'
-				: 'text-tertiary'} {classNames} relative"
+				? 'text-primary-inverse'
+				: 'text-primary'} {classNames} relative"
 		>
 			<InfoIcon class="{small ? 'bottom-0' : '-bottom-0.5'} absolute" size={small ? 12 : 14} />
 		</div>
@@ -32,15 +38,6 @@ const disableTooltips = hasContext('disableTooltips')
 			{:else}
 				{@render children?.()}
 			{/if}
-
-			{#if documentationLink}
-				<a href={documentationLink} target="_blank" class="text-blue-300 text-xs">
-					<div class="flex flex-row gap-2 mt-4">
-						See documentation
-						<ExternalLink size="16" />
-					</div>
-				</a>
-			{/if}
 		{/snippet}
 	</Popover>
 {/if}

package/package/components/TooltipInner.svelte

@@ -7,7 +7,7 @@ const plugins = [gfmPlugin()];
 </script>
 
 <div
-	class="shadow max-w-sm break-words py-2 px-3 rounded-md text-sm font-normal !text-gray-300 bg-gray-800 whitespace-normal text-left"
+	class="shadow-lg max-w-sm break-words py-2 px-3 rounded-md text-xs font-normal text-primary bg-surface-secondary whitespace-normal text-left dark:border max-h-64 overflow-y-auto"
 >
 	{#if markdownTooltip}
 		<div class="prose-sm">
@@ -18,7 +18,7 @@ const plugins = [gfmPlugin()];
 	{/if}
 
 	{#if documentationLink}
-		<a href={documentationLink} target="_blank" class="text-blue-300 text-xs">
+		<a href={documentationLink} target="_blank">
 			<div class="flex flex-row gap-2 mt-4">
 				See documentation
 				<ExternalLink size="16" />

package/package/components/Uptodate.svelte

@@ -17,7 +17,7 @@ loadVersion();
 </script>
 
 {#if uptodate}
-	<span class="text-blue-400">
+	<span class="text-accent text-xs">
 		{uptodate} &nbsp;
 		<Tooltip>
 			{#if isCloudHosted()}

package/package/components/UserSettings.svelte

@@ -29,32 +29,38 @@ function handleTokenCreated(token) {
 
 <Drawer bind:this={drawer} size="900px" on:close={removeHash}>
 	<DrawerContent title="User Settings" on:close={closeDrawer}>
-		<div class="flex flex-col h-full">
+		<div class="flex flex-col gap-6 pb-8">
 			{#if scopes == undefined}
-				<div class="text-xs pt-1 pb-2 text-tertiary flex-col flex">
-					Windmill <Version />
-				</div>
-				<div class="font-semibold flex items-baseline">
-					Theme: <DarkModeToggle forcedDarkMode={false} />
+				<div
+					class="flex flex-row justify-between items-start gap-2 border border-border-light p-4 rounded-md"
+				>
+					<div class="font-semibold text-emphasis text-xs flex items-center">
+						Theme <DarkModeToggle forcedDarkMode={false} />
+					</div>
+					<div class="text-xs text-emphasis flex-col flex">
+						Windmill <Version />
+					</div>
 				</div>
-				<div class="flex flex-wrap md:flex-nowrap w-full md:gap-20 gap-10 mt-2">
-					<div class="md:w-[45%]">
+				<div class="grid grid-cols-1 lg:grid-cols-2 w-full gap-4">
+					<div class="min-w-0">
 						<UserInfoSettings />
 					</div>
-					<div class="md:w-[45%]">
+					<div class="min-w-0">
 						<AIUserSettings />
 					</div>
 				</div>
 			{/if}
 
-			<TokensTable
-				{showMcpMode}
-				{openWithMcpMode}
-				defaultNewTokenLabel={newTokenLabel}
-				defaultNewTokenWorkspace={newTokenWorkspace}
-				{scopes}
-				onTokenCreated={handleTokenCreated}
-			/>
+			<div class="grow min-h-0">
+				<TokensTable
+					{showMcpMode}
+					{openWithMcpMode}
+					defaultNewTokenLabel={newTokenLabel}
+					defaultNewTokenWorkspace={newTokenWorkspace}
+					{scopes}
+					onTokenCreated={handleTokenCreated}
+				/>
+			</div>
 		</div>
 	</DrawerContent>
 </Drawer>

package/package/components/VariableEditor.svelte

@@ -12,7 +12,6 @@ import { sendUserToast } from '../toast';
 import { canWrite, isOwner } from '../utils';
 import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte';
 import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte';
-import Section from './Section.svelte';
 import { Loader2, Save } from 'lucide-svelte';
 import autosize from '../autosize';
 const dispatch = createEventDispatcher();
@@ -126,46 +125,53 @@ let editor = $state(undefined);
 					You only have read access to this resource and cannot edit it
 				</Alert>
 			{/if}
-			<Section label="Path">
-				<div class="flex flex-col gap-4">
-					<Path
-						disabled={initialPath != '' && !isOwner(initialPath, $userStore, $workspaceStore)}
-						bind:error={pathError}
-						bind:path
-						{initialPath}
-						namePlaceholder="variable"
-						kind="variable"
-					/>
-					<Toggle
-						on:change={() => edit && loadVariable(initialPath)}
-						bind:checked={variable.is_secret}
-						disabled={edit && $userStore?.operator}
-						options={{ right: 'Secret' }}
-					/>
-					{#if variable.is_secret}
-						<Alert type="warning" title="Audit log for each access">
-							Every secret is encrypted at rest and in transit with a key specific to this
-							workspace. In addition, any read of a secret variable generates an audit log whose
-							operation name is: variables.decrypt_secret
-						</Alert>
-					{/if}
-				</div>
-			</Section>
-			<Section label="Variable value">
-				{#snippet header()}
-					<span class="text-sm text-tertiary mr-4 font-normal">
+
+			<div class="flex flex-col gap-1">
+				<label for="path" class="text-xs font-semibold text-emphasis">Path</label>
+				<Path
+					disabled={initialPath != '' && !isOwner(initialPath, $userStore, $workspaceStore)}
+					bind:error={pathError}
+					bind:path
+					{initialPath}
+					namePlaceholder="variable"
+					kind="variable"
+				/>
+			</div>
+			<label class="flex flex-col gap-1">
+				<span class="text-xs font-semibold text-emphasis">Secret</span>
+				<Toggle
+					on:change={() => edit && loadVariable(initialPath)}
+					bind:checked={variable.is_secret}
+					disabled={edit && $userStore?.operator}
+				/>
+				{#if variable.is_secret}
+					<Alert type="warning" title="Audit log for each access">
+						Every secret is encrypted at rest and in transit with a key specific to this workspace.
+						In addition, any read of a secret variable generates an audit log whose operation name
+						is: variables.decrypt_secret
+					</Alert>
+				{/if}
+			</label>
+
+			<div class="flex flex-col gap-1">
+				<label for="variable-value" class="flex flex-row justify-left items-center">
+					<span class="text-xs font-semibold text-emphasis">Variable value&nbsp;</span>
+
+					<span class="text-xs text-secondary font-normal">
 						({variable.value.length}/{MAX_VARIABLE_LENGTH} characters)
 					</span>
-				{/snippet}
+					{#if edit && variable.is_secret}
+						<div class="ml-3"></div>
+						{#if $userStore?.operator}
+							<div class="p-2 border">Operators cannot load secret value</div>
+						{:else}
+							<Button size="xs" variant="default" on:click={() => loadVariable(initialPath)}>
+								Load secret value<Tooltip>Will generate an audit log</Tooltip>
+							</Button>
+						{/if}
+					{/if}
+				</label>
 				<div>
-					<div class="mb-1">
-						{#if edit && variable.is_secret}{#if $userStore?.operator}
-								<div class="p-2 border">Operators cannot load secret value</div>
-							{:else}
-								<Button variant="border" size="xs" on:click={() => loadVariable(initialPath)}
-									>Load secret value<Tooltip>Will generate an audit log</Tooltip></Button
-								>{/if}{/if}
-					</div>
 					<div class="flex flex-col gap-2">
 						<ToggleButtonGroup bind:selected={editorKind}>
 							{#snippet children({ item })}
@@ -181,6 +187,7 @@ let editor = $state(undefined);
 								use:autosize
 								bind:value={variable.value}
 								placeholder="Update variable value"
+								id="variable-value"
 							></textarea>
 						{:else if editorKind == 'json'}
 							<div class="border rounded mb-4 w-full">
@@ -193,6 +200,7 @@ let editor = $state(undefined);
 										lang="json"
 										bind:code={variable.value}
 										fixedOverflowWidgets={false}
+										class="bg-surface-tertiary"
 									/>
 								{/await}
 							</div>
@@ -207,24 +215,26 @@ let editor = $state(undefined);
 										lang="yaml"
 										bind:code={variable.value}
 										fixedOverflowWidgets={false}
+										class="bg-surface-tertiary"
 									/>
 								{/await}
 							</div>
 						{/if}
 					</div>
 				</div>
-			</Section>
-			<Section label="Description">
+			</div>
+			<label class="flex flex-col gap-1">
+				<span class="text-xs font-semibold text-emphasis">Description</span>
 				<textarea rows="4" use:autosize bind:value={variable.description} placeholder="Used for X"
 				></textarea>
-			</Section>
+			</label>
 		</div>
 		{#snippet actions()}
 			<Button
 				on:click={() => (edit ? updateVariable() : createVariable())}
 				disabled={!can_write || !valid || pathError != ''}
 				startIcon={{ icon: Save }}
-				color="dark"
+				variant="accent"
 				size="sm"
 			>
 				{edit ? 'Update' : 'Save'}

package/package/components/WhitelistIp.svelte

@@ -15,7 +15,7 @@ WorkerService.listWorkers({ pingSince: 300 }).then((workers) => {
 {#if ips}
 	<div class="mt-4"></div>
 	<Alert size="xs" type="info" title="IPs to whitelist">
-		<span class="text-tertiary">If necessary, the workers IPs to whitelist are:</span>
+		<span class="text-primary">If necessary, the workers IPs to whitelist are:</span>
 		{ips.join(', ')}
 	</Alert>
 {/if}