@softwareone/spi-sv5-library 1.14.3 → 1.15.0

package/dist/components/controls/select/Select.svelte

@@ -243,7 +243,7 @@
 		<section
 			role="button"
 			tabindex="0"
-			class="dropdown-container"
+			class="dropdown-container spi-text-regular-2"
 			onclick={readonly ? undefined : onToggleListOptions}
 			onkeypress={readonly ? undefined : onToggleListOptions}
 			bind:this={dropdownContainer}
@@ -319,12 +319,12 @@
 		{/if}
 	</div>
 	{#if description}
-		<p class="message-description">
+		<p class="message-description spi-text-regular-1">
 			{description}
 		</p>
 	{/if}
 	{#if isInvalid}
-		<p class="message-error">
+		<p class="message-error spi-text-regular-1">
 			{Array.isArray(error) ? error[0] : error}
 		</p>
 	{/if}
@@ -373,25 +373,10 @@
 
 <style>
 	.form-control {
-		--primary-color: #472aff;
-		--white: #fff;
-		--black: #000;
-		--error: #dc2626;
-		--success: #008556;
-		--info-1: #eaecff;
-		--gray-1: #f4f6f8;
-		--gray-2: #e0e5e8;
-		--gray-3: #aeb1b9;
-		--gray-4: #6b7180;
-		--readonly-bg: #f9fafb;
-		--readonly-border: #d1d5db;
-		--border: 1px solid var(--gray-4);
-
 		display: flex;
 		flex-direction: column;
 		width: 100%;
-		gap: 8px;
-		font-size: 14px;
+		gap: var(--spi-size-2);
 
 		> .label-wrapper {
 			width: fit-content;
@@ -400,24 +385,22 @@
 		}
 
 		> .message-description {
-			font-size: 12px;
-			color: var(--gray-4);
+			color: var(--spi-color-text-muted);
 		}
 
 		> .message-error {
-			font-size: 12px;
-			color: var(--error);
+			color: var(--spi-color-text-danger);
 		}
 	}
 
 	.dropdown {
 		position: relative;
-		border: var(--border);
-		border-radius: 8px;
+		border: var(--spi-border-1) solid var(--spi-color-border-strong);
+		border-radius: var(--spi-rounded-lg);
 		background: transparent;
 		transition:
-			border-color 0.2s ease-in-out,
-			box-shadow 0.2s ease-in-out;
+			border-color var(--spi-duration-normal) var(--spi-ease-in-out),
+			box-shadow var(--spi-duration-normal) var(--spi-ease-in-out);
 	}
 
 	.dropdown.disabled {
@@ -425,7 +408,7 @@
 
 		> .dropdown-container {
 			pointer-events: none;
-			background: var(--gray-2);
+			background: var(--spi-color-surface-muted);
 		}
 	}
 
@@ -434,74 +417,72 @@
 
 		> .dropdown-container {
 			cursor: default;
-			background: var(--readonly-bg);
-			border-color: var(--readonly-border);
+			background: var(--spi-color-surface-subtle);
+			border-color: var(--spi-color-disabled-border);
 		}
 	}
 
 	.dropdown:not(.disabled, .readonly, .invalid, .valid):hover {
-		border: 1px solid var(--primary-color);
+		border: var(--spi-border-1) solid var(--spi-color-primary-base);
 	}
 
 	.dropdown:not(.disabled, .readonly, .invalid, .valid):focus-within {
-		border: 1px solid var(--primary-color);
-		box-shadow: 0 0 0 3px rgba(149, 155, 255, 0.3);
+		border: var(--spi-border-1) solid var(--spi-color-primary-base);
+		box-shadow: var(--spi-shadow-focus-primary);
 	}
 
 	.dropdown.valid {
-		border: 1px solid var(--success);
+		border: var(--spi-border-1) solid var(--spi-color-success-base);
 	}
 
 	.dropdown.valid:focus-within {
-		box-shadow: 0px 0px 0px 3px rgba(16, 185, 129, 0.15);
+		box-shadow: var(--spi-shadow-focus-success);
 	}
 
 	.dropdown.invalid {
-		border: 1px solid var(--error);
+		border: var(--spi-border-1) solid var(--spi-color-danger-base);
 	}
 
 	.dropdown.invalid:focus-within {
-		box-shadow: 0px 0px 0px 3px rgba(220, 38, 38, 0.2);
+		box-shadow: var(--spi-shadow-focus-danger);
 	}
 
 	.dropdown > .dropdown-container {
-		font-size: 14px;
-		line-height: 20px;
 		display: grid;
 		grid-template-columns: 1fr auto;
-		min-height: 36px;
-		padding: 8px 16px;
-		gap: 8px;
+		min-height: var(--spi-size-9);
+		padding: var(--spi-size-2) var(--spi-size-4);
+		gap: var(--spi-size-2);
 		align-items: center;
 		cursor: pointer;
 		outline: none;
 		border: none;
-		border-radius: 8px;
-		background: var(--white);
+		border-radius: var(--spi-rounded-lg);
+		background: var(--spi-color-surface-default);
 	}
 
 	.dropdown > .dropdown-container > .dropdown-container-selected-options {
 		display: flex;
 		flex-wrap: wrap;
 		max-height: 250px;
-		gap: 8px;
+		gap: var(--spi-size-2);
 		align-items: center;
 		overflow-y: auto;
 
 		> .placeholder {
-			color: var(--gray-4);
-			opacity: 1;
+			color: var(--spi-color-text-muted);
+			opacity: var(--spi-opacity-100);
 		}
 
 		> .dropdown-container-selected-option {
 			display: flex;
-			padding: 0px 5px;
-			gap: 4px;
+			padding: 0 var(--spi-size-1);
+			gap: var(--spi-size-1);
 			align-items: center;
 			cursor: default;
-			border-radius: 4px;
-			border: 1px solid var(--gray-2);
-			background: var(--gray-1);
+			border-radius: var(--spi-rounded-sm);
+			border: var(--spi-border-1) solid var(--spi-color-border-default);
+			background: var(--spi-color-surface-subtle);
 		}
 	}
 
@@ -511,19 +492,16 @@
 		flex-direction: column;
 		z-index: 100;
 		width: 100%;
-		padding: 8px;
-		margin-top: 8px;
-		gap: 8px;
-		border-radius: 8px;
-		background: var(--white);
-		box-shadow:
-			0px 4px 5px rgba(51, 56, 64, 0.15),
-			0px 1px 3px rgba(51, 56, 64, 0.2),
-			0px 1px 16px rgba(51, 56, 64, 0.1);
+		padding: var(--spi-size-2);
+		margin-top: var(--spi-size-2);
+		gap: var(--spi-size-2);
+		border-radius: var(--spi-rounded-lg);
+		background: var(--spi-color-surface-default);
+		box-shadow: var(--spi-shadow-card-hover);
 
 		> .dropdown-list-no-options-message {
 			text-align: center;
-			color: var(--gray-4);
+			color: var(--spi-color-text-muted);
 		}
 	}
 
@@ -531,7 +509,7 @@
 		top: auto;
 		transform-origin: bottom;
 		bottom: 100%;
-		margin-bottom: 8px;
+		margin-bottom: var(--spi-size-2);
 	}
 
 	.dropdown > .dropdown-list.position-fixed {
@@ -545,7 +523,7 @@
 		display: flex;
 		flex-direction: column;
 		max-height: 200px;
-		gap: 8px;
+		gap: var(--spi-size-2);
 		overflow-y: auto;
 
 		.dropdown-list-option {
@@ -554,8 +532,8 @@
 				align-items: center;
 				text-align: left;
 				width: 100%;
-				min-height: 40px;
-				padding: 0px 8px;
+				min-height: var(--spi-size-10);
+				padding: 0 var(--spi-size-2);
 				cursor: pointer;
 				outline: none;
 				border: none;
@@ -565,25 +543,25 @@
 
 		.dropdown-list-option:not(.active) > button:focus-visible,
 		.dropdown-list-option:not(.active) > button:hover {
-			background: var(--gray-1);
+			background: var(--spi-color-surface-subtle);
 		}
 
 		.dropdown-list-option.active {
-			background: var(--info-1);
+			background: var(--spi-color-primary-lighter);
 		}
 	}
 
 	.clear-button {
 		outline: none;
 		border: none;
-		color: var(--gray-4);
+		color: var(--spi-color-text-muted);
 		background: transparent;
-		transition: color 0.2s ease-in-out;
+		transition: color var(--spi-duration-normal) var(--spi-ease-in-out);
 	}
 
 	.clear-button:focus-visible,
 	.clear-button:hover {
 		cursor: pointer;
-		color: var(--black);
+		color: var(--spi-color-text-primary);
 	}
 </style>

package/dist/components/controls/textarea/TextArea.svelte

@@ -55,6 +55,7 @@
 			bind:value
 			class={[
 				'form-textarea',
+				'spi-text-regular-2',
 				props.disabled && 'form-textarea-disabled',
 				props.readonly && 'form-textarea-readonly',
 				!resize && 'form-textarea-no-resize'
@@ -67,18 +68,18 @@
 		<div class="form-footer">
 			<div class="form-messages">
 				{#if description}
-					<p class="form-message form-message-description">
+					<p class="form-message form-message-description spi-text-regular-1">
 						{description}
 					</p>
 				{/if}
 				{#if errorMessage}
-					<p class="form-message form-message-error">
+					<p class="form-message form-message-error spi-text-regular-1">
 						{Array.isArray(errorMessage) ? errorMessage[0] : errorMessage}
 					</p>
 				{/if}
 			</div>
 			{#if maximumCharactersAllowed}
-				<div class={['form-character-count', isOverLimit && 'error']}>
+				<div class={['form-character-count', 'spi-text-regular-1', isOverLimit && 'error']}>
 					{currentTextLength} / {maximumCharactersAllowed}
 				</div>
 			{/if}
@@ -90,23 +91,17 @@
 	.form-container {
 		display: flex;
 		flex-direction: column;
-		gap: 8px;
-		font-size: 14px;
-		line-height: 20px;
-	}
-
-	.form-message {
-		font-size: 12px;
+		gap: var(--spi-size-2);
 	}
 
 	.form-textarea-wrapper {
 		position: relative;
 		display: flex;
 		width: 100%;
-		border-radius: 8px;
-		border: 1px solid #6b7180;
-		background: #fff;
-		transition: all 0.2s ease-in-out;
+		border-radius: var(--spi-rounded-lg);
+		border: var(--spi-border-1) solid var(--spi-color-border-strong);
+		background: var(--spi-color-surface-default);
+		transition: all var(--spi-duration-normal) var(--spi-ease-in-out);
 		overflow: hidden;
 	}
 
@@ -114,24 +109,22 @@
 			:has(.form-textarea:read-only)
 		),
 	.form-textarea-wrapper:focus-within {
-		border-color: #472aff;
+		border-color: var(--spi-color-border-focus);
 	}
 
 	.form-textarea-wrapper:focus-within {
-		box-shadow: 0px 0px 0px 3px rgba(149, 155, 255, 0.3);
+		box-shadow: var(--spi-shadow-focus-primary);
 	}
 
 	.form-textarea {
-		font-size: 14px;
-		line-height: 20px;
 		display: flex;
 		width: 100%;
-		min-height: 80px;
-		padding: 8px 16px;
+		min-height: var(--spi-size-20);
+		padding: var(--spi-size-2) var(--spi-size-4);
 		border: none;
-		border-radius: 8px;
-		color: #000;
-		transition: all 0.2s ease-in-out;
+		border-radius: var(--spi-rounded-lg);
+		color: var(--spi-color-text-primary);
+		transition: all var(--spi-duration-normal) var(--spi-ease-in-out);
 		font-family: inherit;
 	}
 
@@ -140,15 +133,14 @@
 	}
 
 	.form-textarea-disabled {
-		background-color: #f3f4f6;
-		border-color: #d1d5db;
-		color: #6b7180;
+		background-color: var(--spi-color-disabled-bg);
+		border-color: var(--spi-color-disabled-border);
 		cursor: not-allowed;
 	}
 
 	.form-textarea-readonly {
-		background-color: #f9fafb;
-		border-color: #d1d5db;
+		background-color: var(--spi-color-surface-subtle);
+		border-color: var(--spi-color-border-default);
 		cursor: default;
 	}
 
@@ -158,41 +150,40 @@
 
 	.form-textarea::placeholder,
 	.form-textarea:disabled::placeholder {
-		color: #6b7180;
-		opacity: 1;
+		color: var(--spi-color-text-placeholder);
+		opacity: var(--spi-opacity-100);
 	}
 
 	.form-footer {
 		display: flex;
 		justify-content: space-between;
 		align-items: flex-start;
-		gap: 8px;
+		gap: var(--spi-size-2);
 	}
 
 	.form-messages {
 		display: flex;
 		flex-direction: column;
-		gap: 4px;
+		gap: var(--spi-size-1);
 		flex: 1;
 	}
 
 	.form-message-error {
-		color: #dc2626;
+		color: var(--spi-color-text-danger);
 	}
 
 	.form-message-description {
-		color: #6b7180;
+		color: var(--spi-color-text-muted);
 	}
 
 	.form-character-count {
-		font-size: 12px;
-		color: #6b7180;
 		white-space: nowrap;
+		color: var(--spi-color-text-muted);
 		flex-shrink: 0;
 	}
 
 	.form-character-count.error {
-		color: #dc2626;
+		color: var(--spi-color-text-danger);
 	}
 
 	.form-textarea-wrapper.error,
@@ -200,11 +191,11 @@
 			:has(.form-textarea:read-only)
 		),
 	.form-textarea-wrapper.error:focus-within {
-		border-color: #dc2626;
+		border-color: var(--spi-color-border-danger);
 	}
 
 	.form-textarea-wrapper.error:focus-within {
-		box-shadow: 0px 0px 0px 3px rgba(220, 38, 38, 0.2);
+		box-shadow: var(--spi-shadow-focus-danger);
 	}
 
 	.form-textarea-wrapper.success,
@@ -212,27 +203,27 @@
 			:has(.form-textarea:read-only)
 		),
 	.form-textarea-wrapper.success:focus-within {
-		border-color: #008556;
+		border-color: var(--spi-color-border-success);
 	}
 
 	.form-textarea-wrapper.success:focus-within {
-		box-shadow: 0px 0px 0px 3px rgba(16, 185, 129, 0.15);
+		box-shadow: var(--spi-shadow-focus-success);
 	}
 
 	.form-textarea-wrapper:has(.form-textarea:disabled),
 	.form-textarea-wrapper:has(.form-textarea:read-only) {
-		border-color: #d1d5db !important;
+		border-color: var(--spi-color-disabled-border) !important;
 		box-shadow: none !important;
 	}
 
 	@media (prefers-contrast: high) {
 		.form-textarea {
-			border-width: 2px;
+			border-width: var(--spi-border-2);
 		}
 
 		.form-textarea:focus {
-			outline: 2px solid;
-			outline-offset: 2px;
+			outline: var(--spi-border-2) solid;
+			outline-offset: var(--spi-border-2);
 		}
 	}
 

package/dist/components/controls/toggle/Toggle.svelte

@@ -32,7 +32,7 @@
 			role="switch"
 		/>
 		<div class={['toggle-slider', checked && 'checked', disabled && 'disabled']}>
-			<span class="material-icons-outlined toggle-icon">
+			<span class="material-icons-outlined toggle-icon spi-text-regular-1">
 				{#if checked}
 					done
 				{:else}
@@ -49,7 +49,7 @@
 		display: flex;
 		flex-direction: row;
 		align-items: center;
-		gap: 8px;
+		gap: var(--spi-size-2);
 	}
 
 	.container.vertical {
@@ -64,90 +64,88 @@
 	.container.vertical label {
 		order: 1;
 	}
+
 	.toggle-container {
 		position: relative;
 	}
 
 	.toggle-input {
 		position: absolute;
-		opacity: 0;
+		opacity: var(--spi-opacity-0);
 		width: 0;
 		height: 0;
 	}
 
 	.toggle-slider {
 		display: flex;
-		width: 40px;
+		width: var(--spi-size-10);
 		padding: 2px;
 		align-items: center;
-		border-radius: 12px;
-		border: 2px solid #6b7180;
-		background: #fff;
-		transition: all 0.3s ease;
+		border-radius: var(--spi-rounded-xl);
+		border: var(--spi-border-2) solid var(--spi-color-neutral-dark);
+		background: var(--spi-color-surface-default);
+		transition: all var(--spi-duration-slow) var(--spi-ease-default);
 		cursor: pointer;
 	}
 
 	.toggle-slider.checked {
 		justify-content: flex-end;
-		border: 2px solid #472aff;
-		background: #472aff;
+		border: var(--spi-border-2) solid var(--spi-color-primary-base);
+		background: var(--spi-color-primary-base);
 	}
 
 	.toggle-slider.disabled {
 		cursor: not-allowed;
-		border: 2px solid #6b7180;
-		background: #e0e5e8;
+		border: var(--spi-border-2) solid var(--spi-color-neutral-dark);
+		background: var(--spi-color-surface-muted);
 	}
 
 	.toggle-slider.disabled.checked {
-		border: 2px solid #6b7180;
-		background: #6b7180;
+		border: var(--spi-border-2) solid var(--spi-color-neutral-dark);
+		background: var(--spi-color-neutral-dark);
 	}
 
 	.toggle-icon {
 		display: flex;
-		font-size: 12px;
-		flex-direction: column;
 		align-items: center;
-		justify-content: center;
-		border-radius: 16px;
-		border: 2px solid #6b7180;
-		background: #6b7180;
-		color: #fff;
-		transition: all 0.3s ease;
-		cursor: pointer;
+		line-height: normal;
+		border-radius: var(--spi-rounded-2xl);
+		border: var(--spi-border-2) solid var(--spi-color-neutral-dark);
+		background: var(--spi-color-neutral-dark);
+		color: var(--spi-color-text-inverse);
+		transition: all var(--spi-duration-slow) var(--spi-ease-default);
 	}
 
 	.toggle-slider.checked .toggle-icon {
-		border: 2px solid #fff;
-		background: #fff;
-		color: #472aff;
+		border: var(--spi-border-2) solid var(--spi-color-surface-default);
+		background: var(--spi-color-surface-default);
+		color: var(--spi-color-primary-base);
 	}
 
 	.toggle-slider.disabled .toggle-icon {
 		cursor: not-allowed;
-		border: 2px solid #6b7180;
-		background: #6b7180;
-		color: #fff;
+		border: var(--spi-border-2) solid var(--spi-color-neutral-dark);
+		background: var(--spi-color-neutral-dark);
+		color: var(--spi-color-text-inverse);
 	}
 
 	.toggle-slider.disabled.checked .toggle-icon {
-		border: 2px solid #fff;
-		background: #fff;
-		color: #6b7180;
+		border: var(--spi-border-2) solid var(--spi-color-surface-default);
+		background: var(--spi-color-surface-default);
+		color: var(--spi-color-neutral-dark);
 	}
 
 	.toggle-container:hover .toggle-slider:not(.disabled).checked {
-		background: #3520bf;
-		border: 2px solid #3520bf;
+		background: var(--spi-color-primary-dark);
+		border: var(--spi-border-2) solid var(--spi-color-primary-dark);
 	}
 
 	.toggle-container:hover .toggle-slider:not(.disabled):not(.checked) {
-		border: 2px solid #434952;
+		border: var(--spi-border-2) solid var(--spi-color-neutral-darker);
 	}
 
 	.toggle-container:hover .toggle-slider:not(.disabled):not(.checked) .toggle-icon {
-		border: 2px solid #434952;
-		background: #434952;
+		border: var(--spi-border-2) solid var(--spi-color-neutral-darker);
+		background: var(--spi-color-neutral-darker);
 	}
 </style>

package/dist/components/delete-confirmation/DeleteConfirmation.svelte

@@ -17,9 +17,7 @@
 		onclose
 	}: Props = $props();
 
-	let confirmationText = $derived(
-		`Are you sure you want to delete ${confirmationName || 'this item'}?`
-	);
+	let message = $derived(`Are you sure you want to delete ${confirmationName || 'this item'}?`);
 	let value = $state('');
 	let isLoading = $state(false);
 	let enableButton = $derived(!enableDoubleConfirmation || confirmationName === value);
@@ -41,7 +39,7 @@
 <Modal title="Delete confirmation" bind:show {onclose}>
 	<Spinner show={isLoading} />
 	<div class="content">
-		<p>{confirmationText}</p>
+		<p>{message}</p>
 		{#if enableDoubleConfirmation}
 			<p>
 				To confirm, type "<strong>{confirmationName}</strong>" in the box below
@@ -73,7 +71,7 @@
 	.content {
 		display: flex;
 		flex-direction: column;
-		gap: 16px;
+		gap: var(--spi-size-4);
 		width: 100%;
 	}