@softwareone/spi-sv5-library 1.14.3 → 1.15.0

package/dist/components/notification/Notification.svelte

@@ -15,9 +15,9 @@
 
 <aside class={['notification-container', !disableBorder && 'border']}>
 	<span class="status-indicator {type}"></span>
-	<div class="notification-content">
+	<div class="notification-content spi-text-regular-2">
 		{#if title}
-			<span class="title">{title}</span>
+			<span class="title spi-text-bold-2">{title}</span>
 		{/if}
 		{@render content()}
 	</div>
@@ -27,52 +27,45 @@
 	.notification-container {
 		width: 100%;
 		height: 100%;
-		gap: 16px;
+		gap: var(--spi-size-4);
 		display: flex;
 	}
 
 	.border {
-		border: 1px solid #e0e5e8;
-		border-radius: 8px;
-		padding: 16px;
+		border: var(--spi-border-1) solid var(--spi-color-border-default);
+		border-radius: var(--spi-rounded-lg);
+		padding: var(--spi-size-4);
 	}
 
 	.status-indicator {
-		width: 8px;
-		border-radius: 4px;
-		background-color: var(--toast-bg);
-	}
-
-	.notification-content {
-		flex-direction: column;
-		flex: 1 1 0;
-		gap: 4px;
-		display: flex;
-		font-size: 14px;
-		line-height: 20px;
-	}
-
-	.title {
-		font-weight: 700;
+		width: var(--spi-size-2);
+		border-radius: var(--spi-rounded-sm);
 	}
 
 	.status-indicator.info {
-		--toast-bg: #472aff;
+		background-color: var(--spi-color-primary-base);
 	}
 
 	.status-indicator.warning {
-		--toast-bg: #e87d1e;
+		background-color: var(--spi-color-warning-base);
 	}
 
 	.status-indicator.danger {
-		--toast-bg: #dc182c;
+		background-color: var(--spi-color-danger-base);
 	}
 
 	.status-indicator.neutral {
-		--toast-bg: #6b7180;
+		background-color: var(--spi-color-neutral-dark);
 	}
 
 	.status-indicator.success {
-		--toast-bg: #008556;
+		background-color: var(--spi-color-success-base);
+	}
+
+	.notification-content {
+		flex-direction: column;
+		flex: 1 1 0;
+		gap: var(--spi-size-1);
+		display: flex;
 	}
 </style>

package/dist/components/processing/Processing.svelte

@@ -28,9 +28,9 @@
 		>
 			<defs>
 				<linearGradient id="processingGradient" x1="1.5%" y1="38%" x2="98.5%" y2="62%">
-					<stop offset="0%" stop-color="#472aff" />
-					<stop offset="65.86%" stop-color="#392d9c" />
-					<stop offset="100%" stop-color="#000000" />
+					<stop offset="0%" style="stop-color: var(--spi-color-primary-base)" />
+					<stop offset="65.86%" style="stop-color: var(--spi-color-primary-dark)" />
+					<stop offset="100%" style="stop-color: var(--spi-color-text-primary)" />
 				</linearGradient>
 			</defs>
 			<path
@@ -38,9 +38,9 @@
 			/>
 		</svg>
 		<div class="processing-content">
-			<h2 class="processing-title">{title}</h2>
+			<h2 class="processing-title spi-text-bold-4">{title}</h2>
 			{#if text}
-				<p class="processing-text">{text}</p>
+				<p class="processing-text spi-text-regular-3">{text}</p>
 			{/if}
 		</div>
 	</div>
@@ -64,29 +64,22 @@
 		flex-direction: column;
 		align-items: center;
 		text-align: center;
-		gap: 24px;
+		gap: var(--spi-size-6);
 	}
 
 	.processing-content {
 		display: flex;
 		flex-direction: column;
-		gap: 8px;
-	}
-
-	.processing-title {
-		font-size: 18px;
-		font-weight: 700;
+		gap: var(--spi-size-2);
 	}
 
 	.processing-text {
-		font-size: 16px;
 		white-space: pre-line;
-		line-height: 1.5;
 	}
 
 	.processing-icon {
-		width: 32px;
-		height: 32px;
+		width: var(--spi-size-8);
+		height: var(--spi-size-8);
 		animation: rotate 2s linear infinite;
 	}
 

package/dist/components/progress-page/ProgressPage.svelte

@@ -23,12 +23,12 @@
 <article class="progress-page">
 	<span class="material-icons-outlined progress-icon">{iconName}</span>
 	<div class="progress-content">
-		<p class="progress-title">{title}</p>
+		<p class="progress-title spi-text-bold-4">{title}</p>
 		{#if description}
-			<p class="progress-description">{description}</p>
+			<p class="progress-description spi-text-regular-2">{description}</p>
 		{/if}
 		{#if documentationUrl}
-			<p class="progress-documentation">
+			<p class="progress-documentation spi-text-regular-2">
 				To see more details check
 				<a rel="noreferrer" class="progress-link" href={documentationUrl} target="_blank">
 					our documentation.
@@ -47,13 +47,13 @@
 		display: flex;
 		flex-direction: column;
 		align-items: center;
-		padding: 24px;
+		padding: var(--spi-size-6);
 		max-width: 350px;
-		gap: 24px;
+		gap: var(--spi-size-6);
 	}
 
 	.progress-icon {
-		color: #472aff;
+		color: var(--spi-color-primary-base);
 		font-size: 32px;
 	}
 
@@ -61,25 +61,20 @@
 		display: flex;
 		flex-direction: column;
 		text-align: center;
-		gap: 8px;
+		gap: var(--spi-size-2);
 	}
 
 	.progress-title {
-		font-size: 18px;
-		font-weight: 700;
-		color: #000;
-		line-height: 1.4;
+		color: var(--spi-color-text-primary);
 	}
 
 	.progress-description,
 	.progress-documentation {
-		font-size: 14px;
-		color: #000;
-		line-height: 1.4;
+		color: var(--spi-color-text-primary);
 	}
 
 	.progress-link {
-		color: #472aff;
+		color: var(--spi-color-primary-base);
 		text-decoration: none;
 	}
 
@@ -88,8 +83,8 @@
 	}
 
 	.progress-link:focus {
-		outline: 2px solid #472aff;
-		outline-offset: 2px;
-		border-radius: 2px;
+		outline: var(--spi-border-2) solid var(--spi-color-primary-base);
+		outline-offset: var(--spi-border-2);
+		border-radius: var(--spi-rounded-xs);
 	}
 </style>

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>