@softwareone/spi-sv5-library 1.14.4 → 1.15.1

package/dist/components/progress-wizard/ProgressWizard.svelte

@@ -94,7 +94,7 @@
 					]}
 				>
 					<div class="time-line">
-						<span class="circle">
+						<span class="circle spi-text-bold-1">
 							{circleContent()}
 						</span>
 						<span class="line"></span>
@@ -105,9 +105,9 @@
 						disabled={disabled || readonly}
 						onclick={() => (currentStep = stepIndex)}
 					>
-						<h2>{step.title}</h2>
+						<h2 class="spi-text-bold-3">{step.title}</h2>
 						{#if step.description}
-							<p>{step.description}</p>
+							<p class="spi-text-regular-1">{step.description}</p>
 						{/if}
 					</button>
 				</li>
@@ -147,16 +147,10 @@
 
 <style>
 	.progress-wizard {
-		--primary-color: #472aff;
-		--red-5: #c41e3a;
-		--red-2: #fdedec;
-		--info-1: #eaecff;
-		--gray-1: #f4f6f8;
-		--gray-2: #e0e5e8;
-		--gray-3: #aeb1b9;
-		--gray-4: #6b7180;
-		--border-wizard: 1px solid var(--gray-3);
-		--circle-size: 32px;
+		--border-wizard: var(--spi-border-1) solid var(--spi-color-border-medium);
+		--border-circle: var(--spi-border-2) solid var(--spi-color-primary-base);
+		--border-readonly: var(--spi-border-2) solid var(--spi-color-disabled-bg);
+		--circle-size: var(--spi-size-8);
 
 		display: flex;
 		flex-direction: column;
@@ -180,8 +174,8 @@
 		display: grid;
 		grid-template-columns: auto 1fr;
 		max-height: 70px;
-		padding: 16px 24px;
-		gap: 8px;
+		padding: var(--spi-size-4) var(--spi-size-6);
+		gap: var(--spi-size-2);
 		align-items: center;
 		border: none;
 	}
@@ -199,11 +193,9 @@
 		height: var(--circle-size);
 		align-items: center;
 		justify-content: center;
-		font-size: 12px;
-		font-weight: 600;
 		border-radius: 50%;
-		background: var(--info-1);
-		color: var(--primary-color);
+		background: var(--spi-color-primary-lighter);
+		color: var(--spi-color-primary-base);
 	}
 
 	.line {
@@ -211,8 +203,8 @@
 		top: var(--circle-size);
 		width: 1px;
 		height: 50px;
-		background: var(--gray-2);
-		transition: background 500ms ease;
+		background: var(--spi-color-border-default);
+		transition: background var(--spi-duration-slower) var(--spi-ease-default);
 	}
 
 	.progress-wizard-step:last-child .time-line .line {
@@ -220,56 +212,53 @@
 	}
 
 	.details {
-		padding: 4px 8px;
+		padding: var(--spi-size-1) var(--spi-size-2);
 		text-align: left;
 		border: none;
-		border-radius: 8px;
+		border-radius: var(--spi-rounded-lg);
 		background: transparent;
 		cursor: pointer;
 
 		h2 {
-			font-size: 16px;
-			font-weight: 600;
-			color: #000;
+			color: var(--spi-color-text-primary);
 		}
 
 		p {
-			font-size: 12px;
 			word-break: keep-all;
-			color: var(--gray-4);
+			color: var(--spi-color-text-muted);
 		}
 	}
 
 	.details:hover {
-		background: var(--gray-1);
+		background: var(--spi-color-surface-subtle);
 	}
 
 	.details:focus-visible:not(:disabled) {
-		background: var(--gray-1);
-		box-shadow: 0px 0px 0px 3px var(--info-1);
+		background: var(--spi-color-surface-subtle);
+		box-shadow: 0 0 0 var(--spi-border-2) var(--spi-color-focus-ring);
 		outline: none;
 	}
 
 	.progress-wizard-content {
 		flex: 1;
-		padding: 24px;
+		padding: var(--spi-size-6);
 	}
 
 	.progress-wizard-footer {
 		display: flex;
-		padding: 24px;
+		padding: var(--spi-size-6);
 		border-top: var(--border-wizard);
 
 		.actions {
 			display: flex;
-			gap: 12px;
+			gap: var(--spi-size-3);
 			margin-left: auto;
 		}
 	}
 
 	.progress-wizard-step.active {
 		.time-line .circle {
-			border: 2px solid var(--primary-color);
+			border: var(--border-circle);
 		}
 
 		.details {
@@ -278,7 +267,7 @@
 
 			h2,
 			p {
-				color: var(--primary-color);
+				color: var(--spi-color-primary-base);
 			}
 		}
 	}
@@ -286,21 +275,21 @@
 	.progress-wizard-steps:is(.readonly) {
 		.progress-wizard-step:not(.active) {
 			.line {
-				background: var(--gray-2);
+				background: var(--spi-color-border-default);
 			}
 
 			.circle {
-				border: 2px solid var(--gray-2);
-				background: var(--gray-2);
-				color: var(--gray-4);
+				border: var(--border-readonly);
+				background: var(--spi-color-disabled-bg);
+				color: var(--spi-color-text-muted);
 			}
 
 			.details {
 				h2 {
-					color: var(--gray-4);
+					color: var(--spi-color-text-muted);
 				}
 				p {
-					color: var(--gray-3);
+					color: var(--spi-color-text-disabled);
 				}
 			}
 
@@ -313,28 +302,28 @@
 
 	.progress-wizard-steps:is(.editing-mode) {
 		.progress-wizard-step.previous .time-line .line {
-			background: var(--primary-color);
+			background: var(--spi-color-primary-base);
 		}
 
 		.progress-wizard-step.previous.valid .time-line .circle {
-			color: white;
-			background: var(--primary-color);
-			border: 2px solid var(--primary-color);
+			color: var(--spi-color-text-inverse);
+			background: var(--spi-color-primary-base);
+			border: var(--border-circle);
 		}
 
 		.progress-wizard-step.previous.invalid .time-line .circle {
-			color: var(--red-5);
-			background: var(--red-2);
-			border: 2px solid var(--red-5);
+			color: var(--spi-color-text-danger);
+			background: var(--spi-color-danger-lighter);
+			border: var(--spi-border-2) solid var(--spi-color-border-danger);
 		}
 
 		.progress-wizard-step:is(.disabled, .previous.disabled) {
 			.details {
 				h2 {
-					color: var(--gray-4);
+					color: var(--spi-color-text-muted);
 				}
 				p {
-					color: var(--gray-3);
+					color: var(--spi-color-text-disabled);
 				}
 			}
 			.details:hover {
@@ -344,9 +333,9 @@
 
 			.time-line {
 				.circle {
-					color: var(--gray-4);
-					background: var(--gray-2);
-					border: 2px solid var(--gray-2);
+					color: var(--spi-color-text-muted);
+					background: var(--spi-color-disabled-bg);
+					border: var(--border-readonly);
 				}
 			}
 		}

package/dist/components/search/Search.svelte

@@ -32,7 +32,7 @@
 	};
 </script>
 
-<div class="search-container" class:disabled>
+<div class="search-container spi-text-regular-2" class:disabled>
 	<div class="search-wrapper">
 		<svg
 			class="search-icon"
@@ -62,7 +62,9 @@
 				onclick={handleClear}
 				aria-label="Clear search"
 			>
-				<span class="material-icons-outlined" aria-hidden="true">close</span>
+				<span class="material-icons-outlined spi-text-regular-3" aria-hidden="true"
+					>close</span
+				>
 			</button>
 		{/if}
 	</div>
@@ -71,8 +73,6 @@
 <style>
 	.search-container {
 		position: relative;
-		font-size: 14px;
-		line-height: 20px;
 	}
 
 	.search-wrapper {
@@ -80,30 +80,29 @@
 		display: flex;
 		align-items: center;
 		width: 100%;
-		border-radius: 8px;
-		border: 1px solid #6b7180;
-		background: #fff;
+		border-radius: var(--spi-rounded-lg);
+		border: var(--spi-border-1) solid var(--spi-color-border-strong);
+		background: var(--spi-color-surface-default);
 		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);
 	}
 
 	.search-wrapper:hover:not(:has(.search-input:disabled)),
 	.search-wrapper:focus-within {
-		border-color: #472aff;
+		border-color: var(--spi-color-border-focus);
 	}
 
 	.search-wrapper:focus-within {
-		box-shadow: 0 0 0 3px rgba(149, 155, 255, 0.3);
+		box-shadow: var(--spi-shadow-focus-primary);
 	}
 
 	.search-input {
 		width: 100%;
-		padding: 8px 40px 8px 40px;
+		padding: var(--spi-size-2) var(--spi-size-10);
 		border: none;
 		background: transparent;
-		font-size: 14px;
-		color: #000;
+		color: var(--spi-color-text-primary);
 	}
 
 	.search-input:focus {
@@ -111,7 +110,7 @@
 	}
 
 	.search-input::placeholder {
-		color: #6b7180;
+		color: var(--spi-color-text-placeholder);
 	}
 
 	.search-input::-webkit-search-cancel-button,
@@ -124,26 +123,26 @@
 		position: absolute;
 		top: 50%;
 		transform: translateY(-50%);
-		color: #6b7180;
+		color: var(--spi-color-text-muted);
 	}
 
 	.search-icon {
-		left: 12px;
+		left: var(--spi-size-3);
 		pointer-events: none;
 		width: 18px;
 		height: 18px;
 	}
 
 	.clear-button {
-		right: 12px;
+		right: var(--spi-size-3);
 		background: none;
 		border: none;
-		padding: 4px;
+		padding: var(--spi-size-1);
 		cursor: pointer;
-		border-radius: 4px;
+		border-radius: var(--spi-rounded-sm);
 		transition:
-			color 0.2s ease-in-out,
-			background-color 0.2s ease-in-out;
+			color var(--spi-duration-normal) var(--spi-ease-in-out),
+			background-color var(--spi-duration-normal) var(--spi-ease-in-out);
 		display: flex;
 		align-items: center;
 		justify-content: center;
@@ -151,20 +150,16 @@
 
 	.clear-button:hover,
 	.clear-button:focus {
-		color: #000;
+		color: var(--spi-color-text-primary);
 		outline: none;
 	}
 
-	.clear-button span {
-		font-size: 16px;
-	}
 	.disabled .search-wrapper {
-		border-color: #d1d5db;
-		background-color: #f3f4f6;
+		border-color: var(--spi-color-disabled-border);
+		background-color: var(--spi-color-disabled-bg);
 	}
 
 	.disabled .search-input {
-		color: #6b7180;
 		cursor: not-allowed;
 	}
 

package/dist/components/spinner/Spinner.svelte

@@ -40,7 +40,7 @@
 		height: 100%;
 		top: 0;
 		left: 0;
-		background-color: rgba(255, 255, 255, 0.8);
+		background-color: color-mix(in srgb, var(--spi-color-surface-default) 80%, transparent);
 		z-index: 1000;
 	}
 

package/dist/components/switcher/Switcher.svelte

@@ -22,7 +22,7 @@
 	{#each originalOptions as option, index (index)}
 		<button
 			type="button"
-			class={['switcher-option', option.value === value && 'active']}
+			class={['switcher-option spi-text-medium-2', option.value === value && 'active']}
 			onclick={() => (value = option.value)}
 		>
 			{option.label}
@@ -32,49 +32,40 @@
 
 <style>
 	.switcher-container {
-		--primary-color: #472aff;
-		--white: #fff;
-		--info-1: #eaecff;
-		--gray-1: #f4f6f8;
-		--gray-3: #aeb1b9;
-		--gray-4: #6b7180;
-
 		display: flex;
 		flex-wrap: wrap;
 		width: fit-content;
-		padding: 4px;
-		gap: 12px;
-		border: 1px solid var(--gray-3);
-		border-radius: 8px;
+		padding: var(--spi-size-1);
+		gap: var(--spi-size-3);
+		border: var(--spi-border-1) solid var(--spi-color-border-medium);
+		border-radius: var(--spi-rounded-lg);
 	}
 
 	.switcher-container > .switcher-option {
 		cursor: pointer;
 		border: none;
-		padding: 4px 20px;
-		font-size: 14px;
-		color: var(--gray-4);
-		font-weight: 500;
-		border-radius: 8px;
+		padding: var(--spi-size-1) var(--spi-size-5);
+		color: var(--spi-color-text-muted);
+		border-radius: var(--spi-rounded-lg);
 		background: none;
 	}
 
 	.switcher-container > .switcher-option:hover {
-		background: var(--gray-1);
+		background: var(--spi-color-surface-subtle);
 	}
 
 	.switcher-container > .switcher-option:focus-visible {
-		box-shadow: 0px 0px 0px 3px #959bff;
+		box-shadow: var(--spi-shadow-focus-primary);
 		outline: none;
 	}
 
 	.switcher-container > .switcher-option.active {
-		color: var(--white);
-		background: var(--primary-color);
-		transition: background 0.2s ease-in-out;
+		color: var(--spi-color-text-inverse);
+		background: var(--spi-color-primary-base);
+		transition: background var(--spi-duration-normal) var(--spi-ease-in-out);
 	}
 
 	.switcher-container > .switcher-option.active:hover {
-		background: #3520bf;
+		background: var(--spi-color-primary-dark);
 	}
 </style>

package/dist/components/table/ActionsColumn.svelte

@@ -77,14 +77,14 @@
 			onmouseenter={toggleActionsMenu}
 			onmouseleave={toggleActionsMenu}
 		>
-			<span class="actions-trigger">...</span>
+			<span class="actions-trigger spi-text-bold-6">...</span>
 			{#if isOpen}
 				<div
 					class="actions-menu"
 					{@attach autoPosition}
 					transition:fade={{ duration: 100 }}
 				>
-					<ul class="actions-list">
+					<ul class="actions-list spi-text-regular-2">
 						{#each actions as action, index (index)}
 							<li>
 								<button
@@ -111,23 +111,6 @@
 
 <style>
 	.actions-column {
-		--color-primary: #472aff;
-		--color-red-200: #dc182c;
-		--color-gray-200: #e5e7eb;
-		--color-gray-300: #d1d5db;
-		--color-white: #ffffff;
-		--color-text: #000000;
-		--shadow-menu: 0 2px 10px rgba(0, 0, 0, 0.2);
-		--radius-lg: 8px;
-		--spacing-xs: 4px;
-		--spacing-sm: 8px;
-		--spacing-md: 10px;
-		--spacing-lg: 14px;
-		--z-index-menu: 1;
-		--font-size-sm: 14px;
-		--font-size-2xl: 24px;
-		--transition-standard: all 0.3s ease;
-
 		position: relative;
 		display: flex;
 		align-items: center;
@@ -136,33 +119,30 @@
 
 	.actions-trigger {
 		display: inline-block;
-		font-size: var(--font-size-2xl);
-		font-weight: bold;
 		line-height: 0;
 		cursor: default;
 	}
 
 	.actions-menu {
 		position: fixed;
-		z-index: var(--z-index-menu);
+		z-index: 1;
 		width: 108px;
 		left: var(--menu-left);
 		top: var(--menu-top);
-		padding: var(--spacing-md) var(--spacing-lg);
-		background: var(--color-white);
-		border-radius: var(--radius-lg);
-		box-shadow: var(--shadow-menu);
+		padding: var(--spi-size-3) var(--spi-size-4);
+		background: var(--spi-color-surface-default);
+		border-radius: var(--spi-rounded-lg);
+		box-shadow: var(--spi-shadow-dropdown);
 	}
 
 	.actions-list {
 		display: flex;
 		flex-direction: column;
-		gap: var(--spacing-sm);
+		gap: var(--spi-size-2);
 		margin: 0;
 		padding: 0;
 		list-style: none;
 		text-align: left;
-		font-size: var(--font-size-sm);
 	}
 
 	.action-button {
@@ -171,7 +151,7 @@
 		padding: 0;
 		border: none;
 		background: none;
-		color: var(--color-text);
+		color: var(--spi-color-text-primary);
 		font-size: inherit;
 		cursor: pointer;
 	}
@@ -181,13 +161,13 @@
 	}
 
 	.action-button:disabled {
-		color: var(--color-gray-300);
+		color: var(--spi-color-text-disabled);
 		cursor: not-allowed;
 		font-weight: normal;
 	}
 
 	.action-button--delete {
-		color: var(--color-red-200);
+		color: var(--spi-color-text-danger);
 	}
 
 	.action-button--single {
@@ -196,7 +176,7 @@
 	}
 
 	.action-button--primary {
-		color: var(--color-primary);
+		color: var(--spi-color-primary-base);
 	}
 
 	.action-button--primary:hover {
@@ -205,7 +185,7 @@
 
 	.action-divider {
 		border: none;
-		border-top: 1px solid var(--color-gray-200);
+		border-top: var(--spi-border-1) solid var(--spi-color-border-default);
 		margin: 0;
 	}
 </style>