@softwareone/spi-sv5-library 1.14.4 → 1.15.1

package/dist/components/controls/input/InputIcon.svelte

@@ -23,13 +23,15 @@
 			onclick={() => (isPasswordVisible = !isPasswordVisible)}
 			aria-label={isPasswordVisible ? 'Hide password' : 'Show password'}
 		>
-			<span class="material-icons-outlined form-input-icon form-input-icon--password">
+			<span
+				class="material-icons-outlined form-input-icon spi-text-regular-4 form-input-icon--password"
+			>
 				{isPasswordVisible ? 'visibility_off' : 'visibility'}
 			</span>
 		</button>
 	{:else}
 		<span
-			class="material-icons-outlined form-input-icon form-input-icon--{type}"
+			class="material-icons-outlined form-input-icon spi-text-regular-4 form-input-icon--{type}"
 			class:form-input-icon--date-status={isDateInput &&
 				(type === 'error' || type === 'success')}>{icons[type]}</span
 		>
@@ -41,19 +43,17 @@
 		display: inline-flex;
 		align-items: center;
 		justify-content: center;
-		font-size: 18px;
 		height: 18px;
-		line-height: 1;
 		position: static;
 		transform: none;
 	}
 
 	.form-input-icon--error {
-		color: #dc2626;
+		color: var(--spi-color-text-danger);
 	}
 
 	.form-input-icon--success {
-		color: #059669;
+		color: var(--spi-color-text-success);
 	}
 
 	.form-input-icon--password {
@@ -61,7 +61,7 @@
 	}
 
 	.form-input-icon--date-status {
-		margin-right: 40px;
+		margin-right: var(--spi-size-10);
 	}
 
 	@-moz-document url-prefix() {
@@ -73,16 +73,16 @@
 	.form-input-icon-button {
 		background: none;
 		border: none;
-		padding: 4px;
+		padding: var(--spi-size-1);
 		cursor: pointer;
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		color: #000;
-		transition: color 0.2s ease;
-		width: 24px;
-		height: 24px;
-		border-radius: 4px;
+		color: var(--spi-color-text-primary);
+		transition: color var(--spi-duration-normal) var(--spi-ease-default);
+		width: var(--spi-size-6);
+		height: var(--spi-size-6);
+		border-radius: var(--spi-rounded-sm);
 		position: relative;
 		z-index: 1;
 		pointer-events: auto;

package/dist/components/controls/label/Label.svelte

@@ -6,7 +6,7 @@
 </script>
 
 {#if label}
-	<div class="form-label-container">
+	<div class="form-label-container spi-text-medium-2">
 		<label for={id}>{label}</label>
 		{#if required}
 			<span class="form-label-required">Required</span>
@@ -15,7 +15,7 @@
 		{/if}
 		{#if infoTooltip}
 			<Tooltip content={infoTooltip} width="sm">
-				<span class="material-icons-outlined">info</span>
+				<span class="material-icons-outlined spi-text-medium-2">info</span>
 			</Tooltip>
 		{/if}
 	</div>
@@ -24,22 +24,18 @@
 <style>
 	.form-label-container {
 		display: flex;
-		gap: 8px;
-		font-weight: 500;
-		font-size: 14px;
-		line-height: 20px;
+		gap: var(--spi-size-2);
 	}
 
 	.form-label-optional {
-		color: #6b7180;
+		color: var(--spi-color-text-muted);
 	}
 
 	.form-label-required {
-		color: #dc2626;
+		color: var(--spi-color-text-danger);
 	}
 
 	.material-icons-outlined {
-		font-size: 14px;
 		vertical-align: middle;
 	}
 </style>

package/dist/components/controls/radio-group/RadioGroup.svelte

@@ -37,10 +37,10 @@
 	);
 </script>
 
-<div class="form-container">
+<div class="form-container spi-text-regular-2">
 	<Label {label} {required} {optional} {infoTooltip} />
 	{#if description}
-		<p class="message-description">{description}</p>
+		<p class="message-description spi-text-regular-1">{description}</p>
 	{/if}
 	<div class={['radio-group', row && 'row']} role="radiogroup">
 		{#each normalizedOptions as option, index (option.value)}
@@ -62,7 +62,7 @@
 						disabled && 'disabled'
 					]}
 				></span>
-				<span class="radio-label">{option.label}</span>
+				<span class="radio-label spi-text-regular-2">{option.label}</span>
 			</label>
 		{/each}
 	</div>
@@ -70,47 +70,38 @@
 
 <style>
 	.form-container {
-		--primary-color: #472aff;
-		--primary-focus: rgba(149, 155, 255, 0.3);
-		--gray-4: #6b7180;
-		--gray-2: #e0e5e8;
-		--white: #fff;
-
 		display: flex;
 		flex-direction: column;
-		gap: 8px;
-		font-size: 14px;
-		line-height: 20px;
+		gap: var(--spi-size-2);
 	}
 
 	.message-description {
-		font-size: 12px;
-		color: var(--gray-4);
+		color: var(--spi-color-text-muted);
 	}
 
 	.radio-group {
 		display: flex;
 		flex-direction: column;
-		gap: 8px;
+		gap: var(--spi-size-2);
 	}
 
 	.radio-group.row {
 		flex-direction: row;
 		flex-wrap: wrap;
-		gap: 8px 24px;
+		gap: var(--spi-size-2) var(--spi-size-6);
 	}
 
 	.radio-option {
 		display: flex;
 		align-items: center;
-		gap: 8px;
+		gap: var(--spi-size-2);
 		cursor: pointer;
 		user-select: none;
 	}
 
 	.radio-option.disabled {
 		cursor: not-allowed;
-		color: var(--gray-4);
+		color: var(--spi-color-text-muted);
 	}
 
 	.radio-input {
@@ -127,50 +118,45 @@
 		width: 18px;
 		height: 18px;
 		min-width: 18px;
-		border-radius: 50%;
-		border: 2px solid var(--gray-4);
-		background: var(--white);
-		transition: all 0.2s ease-in-out;
+		border-radius: var(--spi-rounded-full);
+		border: var(--spi-border-2) solid var(--spi-color-border-strong);
+		background: var(--spi-color-surface-default);
+		transition: all var(--spi-duration-normal) var(--spi-ease-in-out);
 	}
 
 	.radio-indicator::after {
 		content: '';
-		width: 8px;
-		height: 8px;
-		border-radius: 50%;
+		width: var(--spi-size-2);
+		height: var(--spi-size-2);
+		border-radius: var(--spi-rounded-full);
 		background: transparent;
-		transition: background 0.2s ease-in-out;
+		transition: background var(--spi-duration-normal) var(--spi-ease-in-out);
 	}
 
 	.radio-option:not(.disabled):hover .radio-indicator {
-		border-color: var(--primary-color);
+		border-color: var(--spi-color-border-focus);
 	}
 
 	.radio-input:focus-visible + .radio-indicator {
-		box-shadow: 0px 0px 0px 3px var(--primary-focus);
-		border-color: var(--primary-color);
+		box-shadow: var(--spi-shadow-focus-primary);
+		border-color: var(--spi-color-border-focus);
 	}
 
 	.radio-indicator.checked {
-		border-color: var(--primary-color);
+		border-color: var(--spi-color-border-focus);
 	}
 
 	.radio-indicator.checked::after {
-		background: var(--primary-color);
+		background: var(--spi-color-primary-base);
 	}
 
 	.radio-indicator.disabled {
-		border-color: var(--gray-4);
-		background: var(--gray-2);
+		border-color: var(--spi-color-disabled-border);
+		background: var(--spi-color-surface-muted);
 		cursor: not-allowed;
 	}
 
 	.radio-indicator.disabled.checked::after {
-		background: var(--gray-4);
-	}
-
-	.radio-label {
-		font-size: 14px;
-		line-height: 20px;
+		background: var(--spi-color-text-muted);
 	}
 </style>

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>