@softwareone/spi-sv5-library 1.14.4 → 1.15.0

package/dist/components/chips/Chips.svelte

@@ -2,70 +2,71 @@
 	import { ChipType } from './enums.js';
 
 	interface Props {
+		text: string;
 		type?: ChipType;
-		text?: string;
 	}
 
-	let { type = ChipType.Info, text = type.charAt(0).toUpperCase() + type.slice(1) }: Props =
-		$props();
+	let { text, type = ChipType.Info }: Props = $props();
 </script>
 
-<div class="chip {type}">
+<div class={['chip', 'spi-text-medium-2', type]}>
 	{text}
 </div>
 
 <style>
 	.chip {
 		display: inline-block;
-		font-size: 14px;
-		font-weight: 500;
-		line-height: 20px;
-		background: var(--chip-bg);
-		color: var(--chip-text);
-		padding: 2px 8px;
-		border-radius: 4px;
+		padding: 2px var(--spi-size-2);
+		border-radius: var(--spi-rounded-sm);
 		cursor: default;
 	}
 
-	.chip:hover {
-		background: var(--chip-bg-hover);
-	}
-
 	.chip:focus {
-		box-shadow: 0px 0px 0px 3px #959bff;
+		box-shadow: var(--spi-shadow-focus-primary);
 	}
+
 	.chip.info {
-		--chip-text: #3520bf;
-		--chip-bg: #eaecff;
-		--chip-text-hover: #2b1999;
-		--chip-bg-hover: #959bff;
+		color: var(--spi-color-primary-dark);
+		background: var(--spi-color-primary-lighter);
+	}
+
+	.chip.info:hover {
+		background: var(--spi-color-primary-light);
 	}
 
 	.chip.success {
-		--chip-text: #00784d;
-		--chip-bg: #e6f9f2;
-		--chip-text-hover: #005838;
-		--chip-bg-hover: #80e1ae;
+		color: var(--spi-color-success-dark);
+		background: var(--spi-color-success-lighter);
+	}
+
+	.chip.success:hover {
+		background: var(--spi-color-success-light);
 	}
 
 	.chip.warning {
-		--chip-text: #a15d26;
-		--chip-bg: #fdf2e9;
-		--chip-text-hover: #733f11;
-		--chip-bg-hover: #f1b178;
+		color: var(--spi-color-warning-dark);
+		background: var(--spi-color-warning-lighter);
+	}
+
+	.chip.warning:hover {
+		background: var(--spi-color-warning-light);
 	}
 
 	.chip.error {
-		--chip-text: #bb1425;
-		--chip-bg: #fce8ea;
-		--chip-text-hover: #8f101d;
-		--chip-bg-hover: #ee8c96;
+		color: var(--spi-color-danger-dark);
+		background: var(--spi-color-danger-lighter);
+	}
+
+	.chip.error:hover {
+		background: var(--spi-color-danger-light);
 	}
 
 	.chip.neutral {
-		--chip-text: #434952;
-		--chip-bg: #f4f6f8;
-		--chip-text-hover: #25282d;
-		--chip-bg-hover: #e0e5e8;
+		color: var(--spi-color-neutral-darker);
+		background: var(--spi-color-neutral-lighter);
+	}
+
+	.chip.neutral:hover {
+		background: var(--spi-color-neutral-light);
 	}
 </style>

package/dist/components/chips/Chips.svelte.d.ts

@@ -1,7 +1,7 @@
 import { ChipType } from './enums.js';
 interface Props {
+    text: string;
     type?: ChipType;
-    text?: string;
 }
 declare const Chips: import("svelte").Component<Props, {}, "">;
 type Chips = ReturnType<typeof Chips>;

package/dist/components/confirmation/Confirmation.svelte

@@ -37,7 +37,7 @@
 
 <Modal {title} bind:show {onclose}>
 	<Spinner show={isLoading} />
-	<p>{message}</p>
+	<p class="spi-text-regular-2">{message}</p>
 	{#snippet footer()}
 		<Button type="button" onclick={handleConfirm}>{confirmButtonLabel}</Button>
 	{/snippet}

package/dist/components/controls/attach-file/AttachFile.svelte

@@ -152,7 +152,7 @@
 <div class="container">
 	<Notification type="info">
 		{#snippet content()}
-			<ul class="message">
+			<ul class="message spi-text-regular-2">
 				{#each reviewMessages as message, index (index)}
 					<li>{message}</li>
 				{/each}
@@ -167,8 +167,8 @@
 		{infoTooltip}
 	/>
 	<section class="drop-area">
-		<p class="caption">Drag and drop files here</p>
-		<p class="text-small">or</p>
+		<p class="caption spi-text-regular-2">Drag and drop files here</p>
+		<p class="text-small spi-text-regular-1">or</p>
 
 		<input
 			{@attach loadFiles}
@@ -180,12 +180,12 @@
 			{multiple}
 			onchange={({ currentTarget }) => onChangeInputFile(currentTarget.files)}
 		/>
-		<div class="file-select">
+		<div class="file-select spi-text-regular-2">
 			<span>Select file</span>
 		</div>
 	</section>
 	{#if error}
-		<p class="text-error">
+		<p class="text-error spi-text-regular-1">
 			{Array.isArray(error) ? error[0] : error}
 		</p>
 	{/if}
@@ -199,53 +199,31 @@
 
 <style>
 	.container {
-		--color-red: #dc2626;
-		--color-gray-outer: #434952;
-		--color-gray-auro: #6b7180;
-		--color-gray: #e0e5e8;
-		--color-magentablue: #472aff;
-		--color-border: #cccccc;
-		--color-bg-select: #e0e7ff;
-		--color-text-select: var(--color-magentablue);
-		--spacing-md: 20px;
-		--spacing-sm: 10px;
-		--border-radius-md: 5px;
-
 		display: flex;
 		flex-direction: column;
-		gap: 8px;
+		gap: var(--spi-size-2);
 		width: 100%;
 	}
 
-	.message {
-		font-size: 14px;
-		line-height: 20px;
-	}
-
 	.caption {
-		font-size: 14px;
-		line-height: 24px;
-		color: var(--color-gray-outer);
+		color: var(--spi-color-text-secondary);
 	}
 
 	.text-small {
-		font-size: 12px;
-		line-height: 20px;
-		color: var(--color-gray-auro);
-		margin-top: 4px;
-		margin-bottom: 8px;
+		color: var(--spi-color-text-muted);
+		margin-top: var(--spi-size-1);
+		margin-bottom: var(--spi-size-2);
 	}
 
 	.text-error {
-		color: var(--color-red);
-		font-size: 12px;
+		color: var(--spi-color-text-danger);
 	}
 
 	.drop-area {
 		position: relative;
-		padding: var(--spacing-md);
-		border: 2px dashed var(--color-border);
-		border-radius: var(--border-radius-md);
+		padding: var(--spi-size-5);
+		border: var(--spi-border-2) dashed var(--spi-color-border-medium);
+		border-radius: var(--spi-rounded-sm);
 		text-align: center;
 	}
 
@@ -260,11 +238,10 @@
 
 	.file-select {
 		display: inline-block;
-		font-size: 14px;
-		background: var(--color-bg-select);
-		color: var(--color-text-select);
-		padding: var(--spacing-sm) var(--spacing-md);
-		border-radius: var(--border-radius-md);
+		background: var(--spi-color-primary-lighter);
+		color: var(--spi-color-primary-base);
+		padding: var(--spi-size-3) var(--spi-size-5);
+		border-radius: var(--spi-rounded-sm);
 	}
 
 	.drop-area input[type='file']::before {

package/dist/components/controls/attach-file/FileManager.svelte

@@ -21,7 +21,7 @@
 
 <section>
 	{#if fileSizeLimitMB}
-		<p class="header-file">
+		<p class="header-file spi-text-regular-2">
 			{(totalSize / MB_IN_BYTES).toFixed(2)} from {fileSizeLimitMB} MB
 		</p>
 	{/if}
@@ -30,11 +30,11 @@
 		{#if files?.length}
 			{#each Array.from(files) as file, index (index)}
 				<li class="list-detail">
-					<span class="material-icons-outlined">description</span>
+					<span class="material-icons-outlined description-icon">description</span>
 
 					<span class="item-detail">
-						<h3 class="file-name">{file.name}</h3>
-						<p class="file-size">
+						<h3 class="file-name spi-text-medium-1">{file.name}</h3>
+						<p class="file-size spi-text-regular-1">
 							{(file.size / MB_IN_BYTES).toFixed(2)} MB
 						</p>
 					</span>
@@ -45,7 +45,7 @@
 						class="button-icon"
 						aria-label="Remove file"
 					>
-						<span class="material-icons-outlined icon-size">close</span>
+						<span class="material-icons-outlined spi-text-regular-2">close</span>
 					</button>
 				</li>
 			{/each}
@@ -55,14 +55,12 @@
 
 <style>
 	.header-file {
-		color: var(--color-gray-auro);
+		color: var(--spi-color-text-muted);
 		text-align: right;
-		font-size: 14px;
-		line-height: 20px;
 	}
 
 	.container {
-		margin-top: 8px;
+		margin-top: var(--spi-size-2);
 		height: auto;
 		max-height: 208px;
 		overflow-x: hidden;
@@ -70,51 +68,39 @@
 	}
 
 	.list-detail {
-		--color-white-anti: #f5f7f9;
 		display: flex;
 		justify-content: space-between;
-		background-color: var(--color-gray-light, var(--color-white-anti));
-		border-radius: 8px;
-		gap: 8px;
-		padding: 8px;
-		margin-bottom: 8px;
+		background-color: var(--spi-color-surface-subtle);
+		border-radius: var(--spi-rounded-lg);
+		gap: var(--spi-size-2);
+		padding: var(--spi-size-2);
+		margin-bottom: var(--spi-size-2);
 	}
 
 	.item-detail {
 		width: 100%;
-		padding-left: 8px;
-		padding-right: 8px;
+		padding-left: var(--spi-size-2);
+		padding-right: var(--spi-size-2);
 	}
 
 	.file-name {
-		font-size: 12px;
-		line-height: 16px;
-		font-weight: 500;
 		word-break: break-all;
 	}
 
 	.file-size {
-		font-size: 12px;
-		line-height: 16px;
-		color: var(--color-gray-auro);
+		color: var(--spi-color-text-muted);
 	}
 
 	.button-icon {
 		display: flex;
 		flex-direction: column;
 		align-items: center;
-		font-size: 14px;
-		line-height: 20px;
 		border: none;
 		background-color: transparent;
 		cursor: pointer;
 	}
 
-	.material-icons-outlined {
+	.material-icons-outlined.description-icon {
 		font-size: 40px;
 	}
-
-	.icon-size {
-		font-size: 15px;
-	}
 </style>

package/dist/components/controls/attach-file/Warnings.svelte

@@ -8,11 +8,11 @@
 <details class="container">
 	<summary class="header-summary" aria-label="Warnings">
 		<span class="material-icons-outlined">warning</span>
-		<span>Warnings</span>
+		<span class="spi-text-semibold-1">Warnings</span>
 	</summary>
 
 	<section class="detail-section">
-		<ul class="list-inside">
+		<ul class="list-inside spi-text-regular-1">
 			{#each validationMessages as message, index (index)}
 				<li class="item">
 					{message}
@@ -24,32 +24,30 @@
 
 <style>
 	.container {
-		margin-top: 8px;
-		font-size: 12px;
-		line-height: 16px;
+		margin-top: var(--spi-size-2);
 	}
 
 	.header-summary {
 		display: flex;
-		font-weight: 600;
-		gap: 4px;
-		--color: #e67e00;
-		color: var(--color);
+		align-items: center;
+		gap: var(--spi-size-1);
+		color: var(--spi-color-text-warning);
 		cursor: pointer;
-		padding: 4px;
-		border-width: 1px;
-		border-radius: 4px;
+		padding: var(--spi-size-1);
+		border-width: var(--spi-border-1);
+		border-radius: var(--spi-rounded-sm);
 		border-style: solid;
 		width: max-content;
 	}
+
 	.detail-section {
-		margin-top: 4px;
-		margin-left: 8px;
+		margin-top: var(--spi-size-1);
+		margin-left: var(--spi-size-2);
 	}
 
 	.list-inside {
 		list-style-position: inside;
-		padding-left: 16px;
+		padding-left: var(--spi-size-4);
 	}
 
 	.item {

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);
 		}
 	}