@softwareone/spi-sv5-library 1.14.3 → 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

@@ -3,8 +3,8 @@
 
 	interface Props {
 		title: string;
-		confirmationText: string;
-		confirmButtonText?: string;
+		message: string;
+		confirmButtonLabel?: string;
 		show?: boolean;
 		onconfirm: () => Promise<string | void> | string | void;
 		onclose?: VoidFunction;
@@ -12,8 +12,8 @@
 
 	let {
 		title,
-		confirmationText,
-		confirmButtonText = 'Proceed',
+		message,
+		confirmButtonLabel = 'Proceed',
 		show = $bindable(false),
 		onconfirm,
 		onclose
@@ -37,8 +37,8 @@
 
 <Modal {title} bind:show {onclose}>
 	<Spinner show={isLoading} />
-	<p>{confirmationText}</p>
+	<p class="spi-text-regular-2">{message}</p>
 	{#snippet footer()}
-		<Button type="button" onclick={handleConfirm}>{confirmButtonText}</Button>
+		<Button type="button" onclick={handleConfirm}>{confirmButtonLabel}</Button>
 	{/snippet}
 </Modal>

package/dist/components/confirmation/Confirmation.svelte.d.ts

@@ -1,7 +1,7 @@
 interface Props {
     title: string;
-    confirmationText: string;
-    confirmButtonText?: string;
+    message: string;
+    confirmButtonLabel?: string;
     show?: boolean;
     onconfirm: () => Promise<string | void> | string | void;
     onclose?: VoidFunction;

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 {