@softwareone/spi-sv5-library 1.14.4 → 1.15.1

package/dist/components/menu/Sidebar.svelte

@@ -38,14 +38,14 @@
 				<section class="menu-header">
 					<div class="menu-title" class:hidden={isCollapsed}>
 						<div class="menu">
-							<h2 class="menu-span">Menu</h2>
+							<h2 class="menu-span spi-text-semibold-2">Menu</h2>
 						</div>
 					</div>
 					<div class="category-items">
 						<button type="button" class="button" onclick={toggleSidebar}>
-							<span class="material-icons-outlined icon-span">
-								{isCollapsed ? 'menu' : 'menu_open'}
-							</span>
+							<span class="material-icons-outlined icon-span spi-text-regular-5"
+								>{isCollapsed ? 'menu' : 'menu_open'}</span
+							>
 						</button>
 					</div>
 				</section>
@@ -54,7 +54,7 @@
 			<section class="content">
 				{#each subMenuItems as subMenuItem, index (index)}
 					<section class="category-content">
-						<h2 class="category-span" class:hidden={isCollapsed}>
+						<h2 class="category-span spi-text-regular-1" class:hidden={isCollapsed}>
 							{subMenuItem.category}
 						</h2>
 						<menu class="category-items-details">
@@ -79,40 +79,40 @@
 <style>
 	.side-menu {
 		display: inline-flex;
-		transition: width 0.3s ease;
+		transition: width var(--spi-duration-slow) var(--spi-ease-default);
 	}
 
 	.menu-content {
 		width: 100%;
 		height: 100%;
-		padding: 16px;
-		background: white;
-		border-right: 1px #e0e5e8 solid;
+		padding: var(--spi-size-4);
+		background: var(--spi-color-surface-default);
+		border-right: var(--spi-border-1) solid var(--spi-color-border-default);
 		flex-direction: column;
 		justify-content: flex-start;
 		align-items: center;
-		gap: 32px;
+		gap: var(--spi-size-8);
 		display: flex;
 	}
 
 	.header {
 		align-self: stretch;
 		flex-direction: column;
-		gap: 16px;
+		gap: var(--spi-size-4);
 		display: flex;
 	}
 
 	.menu-header {
-		padding-bottom: 8px;
-		border-bottom: 1px #e0e5e8 solid;
+		padding-bottom: var(--spi-size-2);
+		border-bottom: var(--spi-border-1) solid var(--spi-color-border-default);
 		gap: 10px;
 		display: inline-flex;
 	}
 
 	.menu-title {
 		flex: 1 1 0;
-		padding-top: 8px;
-		padding-bottom: 8px;
+		padding-top: var(--spi-size-2);
+		padding-bottom: var(--spi-size-2);
 		display: flex;
 	}
 
@@ -123,35 +123,30 @@
 	}
 
 	.menu-span {
-		color: black;
-		font-size: 14px;
-		font-weight: 600;
-		line-height: 20px;
+		color: var(--spi-color-text-primary);
 		word-wrap: break-word;
 	}
 
 	.category-items {
-		padding: 8px;
-		gap: 8px;
+		padding: var(--spi-size-2);
+		gap: var(--spi-size-2);
 		display: flex;
 	}
 
 	.content {
 		flex-direction: column;
-		gap: 24px;
+		gap: var(--spi-size-6);
 		display: flex;
 	}
 
 	.category-content {
 		flex-direction: column;
-		gap: 8px;
+		gap: var(--spi-size-2);
 		display: flex;
 	}
 
 	.category-span {
-		color: #6b7180;
-		font-size: 12px;
-		font-weight: 400;
+		color: var(--spi-color-text-muted);
 		word-wrap: break-word;
 	}
 
@@ -162,16 +157,13 @@
 	}
 
 	button:focus-visible {
-		box-shadow: 0 0 0 2px #472aff;
-		background-color: #eaecff;
+		box-shadow: 0 0 0 var(--spi-border-2) var(--spi-color-border-focus);
+		background-color: var(--spi-color-primary-lighter);
 		outline: none;
 	}
 
 	.icon-span {
-		color: #25282d;
-		font-size: 20px;
-		font-weight: 400;
-		line-height: 20px;
+		color: var(--spi-color-neutral-darkest);
 		word-wrap: break-word;
 	}
 
@@ -192,10 +184,10 @@
 	}
 
 	.collapsed .menu-content {
-		padding: 8px;
+		padding: var(--spi-size-2);
 	}
 	.collapsed .content {
-		padding: 8px;
+		padding: var(--spi-size-2);
 	}
 	.collapsed .menu-header {
 		align-items: center;
@@ -204,24 +196,24 @@
 	.collapsed .menu-header {
 		justify-content: flex-start;
 		align-items: center;
-		padding: 8px;
+		padding: var(--spi-size-2);
 	}
 
 	.button {
 		background: transparent;
 		border: none;
 		cursor: pointer;
-		border-radius: 50%;
-		width: 36px;
-		height: 36px;
+		border-radius: var(--spi-rounded-full);
+		width: var(--spi-size-9);
+		height: var(--spi-size-9);
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		transition: background-color 0.2s ease;
+		transition: background-color var(--spi-duration-normal) var(--spi-ease-default);
 	}
 
 	.button:hover {
-		background-color: #f4f6f8;
+		background-color: var(--spi-color-surface-subtle);
 	}
 
 	@media (max-width: 768px) {

package/dist/components/modal/Modal.svelte

@@ -26,7 +26,7 @@
 </script>
 
 <div class="modal-backdrop">
-	<div class="modal-container {width}">
+	<div class="modal-container {width} spi-text-regular-2">
 		<div
 			onclose={onHandleClose}
 			class="modal"
@@ -52,21 +52,17 @@
 		justify-content: center;
 		width: 100%;
 		height: 100%;
-		background-color: #e0e5e880;
+		background-color: var(--spi-color-backdrop);
 	}
 
 	.modal-container {
 		width: var(--modal-width);
 		max-height: 90%;
-		border-radius: 16px;
-		background-color: #ffffff;
+		border-radius: var(--spi-rounded-2xl);
+		background-color: var(--spi-color-surface-default);
 		margin: auto;
 		overflow-y: auto;
-		box-shadow:
-			0px 1px 10px 0px rgba(51, 56, 64, 0.12),
-			0px 2px 4px -1px rgba(51, 56, 64, 0.2),
-			0px 4px 5px 0px rgba(51, 56, 64, 0.14);
-		font-size: 14px;
+		box-shadow: var(--spi-shadow-card-hover);
 	}
 
 	.modal {
@@ -94,12 +90,12 @@
 	}
 
 	.modal-container::-webkit-scrollbar-thumb {
-		background: #888;
-		border-radius: 10px;
+		background: var(--spi-color-neutral-dark);
+		border-radius: var(--spi-rounded-full);
 	}
 
 	.modal-container::-webkit-scrollbar-thumb:hover {
-		background: #555;
+		background: var(--spi-color-neutral-darker);
 	}
 
 	:global(html:has(.modal-backdrop)) {

package/dist/components/modal/ModalContent.svelte

@@ -19,12 +19,12 @@
 		display: flex;
 		flex-direction: column;
 		align-items: flex-start;
-		gap: 24px;
+		gap: var(--spi-size-6);
 		align-self: stretch;
-		background: #fff;
+		background: var(--spi-color-surface-default);
 	}
 
 	.padding {
-		padding: 24px;
+		padding: var(--spi-size-6);
 	}
 </style>

package/dist/components/modal/ModalFooter.svelte

@@ -18,14 +18,14 @@
 	.modal-footer,
 	.button-section {
 		display: flex;
-		gap: 16px;
+		gap: var(--spi-size-4);
 	}
 	.modal-footer {
 		width: 100%;
-		padding: 24px;
+		padding: var(--spi-size-6);
 		justify-content: space-between;
-		border-radius: 0px 0px 16px 16px;
-		border-top: 1px solid #aeb1b9;
-		background: #fff;
+		border-radius: 0 0 var(--spi-rounded-2xl) var(--spi-rounded-2xl);
+		border-top: var(--spi-border-1) solid var(--spi-color-border-medium);
+		background: var(--spi-color-surface-default);
 	}
 </style>

package/dist/components/modal/ModalHeader.svelte

@@ -15,7 +15,7 @@
 			{#if errorIcon}
 				<span class="icon error material-icons-outlined">report</span>
 			{/if}
-			<h2>{title}</h2>
+			<h2 class="spi-text-semibold-4">{title}</h2>
 		</div>
 		<button type="button" class="close-button material-icons-outlined" onclick={onclose}
 			>close</button
@@ -28,12 +28,12 @@
 	.modal-header-title {
 		display: flex;
 		justify-content: space-between;
-		gap: 16px;
+		gap: var(--spi-size-4);
 	}
 	.modal-header {
-		padding: 24px;
+		padding: var(--spi-size-6);
 		align-self: stretch;
-		border-bottom: 1px solid #aeb1b9;
+		border-bottom: var(--spi-border-1) solid var(--spi-color-border-medium);
 	}
 
 	.modal-header-title > .icon {
@@ -45,11 +45,6 @@
 		align-items: center;
 	}
 
-	.modal-header-title h2 {
-		font-size: 18px;
-		font-weight: 600;
-	}
-
 	.modal-header > .close-button {
 		background: none;
 		border: none;
@@ -57,7 +52,7 @@
 
 	.modal-header > .close-button:hover {
 		cursor: pointer;
-		color: #434952;
+		color: var(--spi-color-text-secondary);
 	}
 
 	.modal-header > .close-button:focus {
@@ -65,6 +60,6 @@
 	}
 
 	.icon.error {
-		--color-icon: #dc182c;
+		--color-icon: var(--spi-color-danger-base);
 	}
 </style>

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>