@softwareone/spi-sv5-library 1.14.3 → 1.15.0

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

@@ -68,6 +68,7 @@
 			{readonly}
 			class={[
 				'form-input',
+				'spi-text-regular-2',
 				disabled && 'form-input-disabled',
 				readonly && 'form-input-readonly',
 				(showIcon || showDatePicker) && 'form-input-with-icon',
@@ -77,7 +78,7 @@
 		/>
 
 		{#if type === 'money' && currency}
-			<div class="form-input-currency">{currency}</div>
+			<div class="form-input-currency spi-text-regular-1">{currency}</div>
 		{/if}
 
 		{#if showIcon}
@@ -102,12 +103,12 @@
 	</div>
 
 	{#if description}
-		<p class="form-message form-message-description">
+		<p class="form-message form-message-description spi-text-regular-1">
 			{description}
 		</p>
 	{/if}
 	{#if isInvalid}
-		<p class="form-message form-message-error">
+		<p class="form-message form-message-error spi-text-regular-1">
 			{Array.isArray(error) ? error[0] : error}
 		</p>
 	{/if}
@@ -117,13 +118,7 @@
 	.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-input-wrapper {
@@ -131,38 +126,30 @@
 		display: flex;
 		align-items: center;
 		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);
 	}
 
 	.form-input-wrapper:hover:not(:has(.form-input:disabled)):not(:has(.form-input:read-only)),
 	.form-input-wrapper:focus-within {
-		border-color: #472aff;
-	}
-
-	.form-input-wrapper:focus-within,
-	.form-input-wrapper:not(.money-with-icon):not(.error):not(.success) .form-input:focus-visible {
-		box-shadow: 0px 0px 0px 3px rgba(149, 155, 255, 0.3);
+		border-color: var(--spi-color-border-focus);
 	}
 
-	.form-input-wrapper:not(.money-with-icon):not(.error):not(.success) .form-input:focus-visible {
-		outline: none;
-		border-color: #472aff;
+	.form-input-wrapper:focus-within {
+		box-shadow: var(--spi-shadow-focus-primary);
 	}
 
 	.form-input {
-		font-size: 14px;
-		line-height: 20px;
 		display: flex;
 		width: 100%;
-		padding: 8px 16px;
+		padding: var(--spi-size-2) var(--spi-size-4);
 		align-items: center;
 		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);
 		text-overflow: ellipsis;
 		white-space: nowrap;
 		overflow: hidden;
@@ -177,15 +164,15 @@
 	}
 
 	.form-input-disabled {
-		background-color: #e0e5e8;
-		border-color: #6b7180;
-		color: #000;
+		background-color: var(--spi-color-disabled-bg);
+		border-color: var(--spi-color-disabled-border);
+		color: var(--spi-color-text-primary);
 		cursor: not-allowed;
 	}
 
 	.form-input-readonly {
-		background-color: #f9fafb;
-		border-color: #d1d5db;
+		background-color: var(--spi-color-surface-subtle);
+		border-color: var(--spi-color-border-default);
 		cursor: default;
 	}
 
@@ -195,10 +182,10 @@
 	}
 
 	.form-input-date::-webkit-calendar-picker-indicator {
-		opacity: 1;
+		opacity: var(--spi-opacity-100);
 		cursor: pointer;
-		width: 20px;
-		height: 20px;
+		width: var(--spi-size-5);
+		height: var(--spi-size-5);
 		position: absolute;
 		right: 10px;
 		top: 50%;
@@ -206,10 +193,10 @@
 	}
 
 	.form-input-date::-moz-calendar-picker-indicator {
-		opacity: 1;
+		opacity: var(--spi-opacity-100);
 		cursor: pointer;
-		width: 20px;
-		height: 20px;
+		width: var(--spi-size-5);
+		height: var(--spi-size-5);
 		position: absolute;
 		right: 12px;
 		top: 50%;
@@ -234,22 +221,22 @@
 		top: 0;
 		bottom: 0;
 		width: 0.5px;
-		background-color: #6b7180;
+		background-color: var(--spi-color-border-strong);
 		z-index: 1;
 	}
 
 	.form-input::placeholder,
 	.form-input:disabled::placeholder {
-		color: #6b7180;
-		opacity: 1;
+		color: var(--spi-color-text-placeholder);
+		opacity: var(--spi-opacity-100);
 	}
 
 	.form-message-error {
-		color: #dc2626;
+		color: var(--spi-color-text-danger);
 	}
 
 	.form-message-description {
-		color: #6b7180;
+		color: var(--spi-color-text-muted);
 	}
 
 	.form-input-icon-container {
@@ -260,12 +247,12 @@
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		gap: 24px;
+		gap: var(--spi-size-6);
 		pointer-events: none;
 	}
 
 	.form-input-icon-container-password {
-		gap: 8px;
+		gap: var(--spi-size-2);
 	}
 
 	.form-input-wrapper:has(.form-input-icon-container-password) .form-input {
@@ -277,19 +264,11 @@
 		transform: none;
 	}
 
-	.form-input-wrapper:not(.money-with-icon):not(.error):not(.success) .form-input:focus-visible {
-		outline: none;
-		border-color: #472aff;
-		box-shadow: 0px 0px 0px 3px rgba(149, 155, 255, 0.3);
-	}
-
 	.form-input-currency {
 		display: flex;
 		align-items: center;
-		padding: 0 10px 0 10px;
-		color: #000;
-		font-size: 12px;
-		font-weight: 400;
+		padding: 0 10px;
+		color: var(--spi-color-text-primary);
 		height: 100%;
 		flex-shrink: 0;
 		position: relative;
@@ -299,28 +278,23 @@
 		content: '';
 		position: absolute;
 		left: 0;
-		top: -8px;
-		bottom: -8px;
+		top: -10px;
+		bottom: -10px;
 		width: 0.5px;
-		background-color: #6b7180;
+		background-color: var(--spi-color-border-strong);
 		z-index: 1;
 	}
 
-	.form-input-wrapper:focus-within {
-		border-color: #472aff;
-		box-shadow: 0px 0px 0px 3px rgba(149, 155, 255, 0.3);
-	}
-
 	.form-input-wrapper.error,
 	.form-input-wrapper.error:hover:not(:has(.form-input:disabled)):not(
 			:has(.form-input:read-only)
 		),
 	.form-input-wrapper.error:focus-within {
-		border-color: #dc2626;
+		border-color: var(--spi-color-border-danger);
 	}
 
 	.form-input-wrapper.error:focus-within {
-		box-shadow: 0px 0px 0px 3px rgba(220, 38, 38, 0.2);
+		box-shadow: var(--spi-shadow-focus-danger);
 	}
 
 	.form-input-wrapper.success,
@@ -328,11 +302,11 @@
 			:has(.form-input:read-only)
 		),
 	.form-input-wrapper.success:focus-within {
-		border-color: #008556;
+		border-color: var(--spi-color-border-success);
 	}
 
 	.form-input-wrapper.success:focus-within {
-		box-shadow: 0px 0px 0px 3px rgba(16, 185, 129, 0.15);
+		box-shadow: var(--spi-shadow-focus-success);
 	}
 
 	.form-input-wrapper:has(.form-input-currency) .form-input-icon-container {
@@ -356,12 +330,12 @@
 
 	@media (prefers-contrast: high) {
 		.form-input {
-			border-width: 2px;
+			border-width: var(--spi-border-2);
 		}
 
 		.form-input:focus {
-			outline: 2px solid;
-			outline-offset: 2px;
+			outline: var(--spi-border-2) solid;
+			outline-offset: var(--spi-border-2);
 		}
 	}
 

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>