@softwareone/spi-sv5-library 1.14.3 → 1.15.0

package/dist/components/home/Home.svelte

@@ -9,7 +9,7 @@
 	let { title, homeItems }: Props = $props();
 </script>
 
-<h1 class="home-title">
+<h1 class="home-title spi-text-semibold-4">
 	{title}
 </h1>
 
@@ -18,8 +18,8 @@
 		<a href={homeItem.url} class="home-item">
 			<img src={homeItem.homeIcon} alt={homeItem.text} />
 			<div>
-				<h2>{homeItem.text}</h2>
-				<p>{homeItem.detail}</p>
+				<h2 class="spi-text-semibold-3">{homeItem.text}</h2>
+				<p class="spi-text-regular-2">{homeItem.detail}</p>
 			</div>
 		</a>
 	{/each}
@@ -27,20 +27,12 @@
 
 <style>
 	.home-title {
-		padding-bottom: 16px;
-		font-size: 18px;
-		line-height: 1.55;
-		font-weight: 600;
-	}
-
-	.home-container {
-		--black: #000;
-		--white: #fff;
+		padding-bottom: var(--spi-size-4);
 	}
 
 	.home-container.grid {
 		display: grid;
-		gap: 24px;
+		gap: var(--spi-size-6);
 
 		@media (width >= 640px) {
 			grid-template-columns: repeat(1, minmax(0, 1fr));
@@ -59,45 +51,35 @@
 		display: flex;
 		max-height: 190px;
 		max-width: 770px;
-		gap: 16px;
-		padding: 12px;
-		border-radius: 16px;
-		background: var(--white);
+		gap: var(--spi-size-4);
+		padding: var(--spi-size-3);
+		border-radius: var(--spi-rounded-2xl);
+		background: var(--spi-color-surface-default);
 		transition:
-			box-shadow 0.2s ease-in-out,
-			transform 0.2s ease-in-out;
-		box-shadow:
-			0 1px 16px 0 rgba(107, 113, 128, 0.1),
-			0 1px 3px 0 rgba(107, 113, 128, 0.2);
+			box-shadow var(--spi-duration-normal) var(--spi-ease-in-out),
+			transform var(--spi-duration-normal) var(--spi-ease-in-out);
+		box-shadow: var(--spi-shadow-card);
 
 		&:hover {
 			transform: translateY(-2px);
 			box-shadow:
-				0 4px 20px 0 rgba(71, 42, 255, 0.2),
-				0 2px 6px 0 rgba(107, 113, 128, 0.25);
+				0 4px 20px 0 color-mix(in srgb, var(--spi-color-primary-light) 50%, transparent),
+				0 2px 6px 0 color-mix(in srgb, var(--spi-color-neutral-base) 50%, transparent);
 		}
 
 		> img {
-			width: 36px;
-			height: 36px;
+			width: var(--spi-size-9);
+			height: var(--spi-size-9);
 			margin: auto 0;
 			filter: invert(27%) sepia(99%) saturate(4729%) hue-rotate(240deg) brightness(101%)
 				contrast(106%);
 		}
 
 		> div {
-			color: var(--black);
+			color: var(--spi-color-text-primary);
 
 			> h2 {
-				padding-bottom: 8px;
-				font-size: 16px;
-				line-height: 1.5;
-				font-weight: 600;
-			}
-
-			> p {
-				font-size: 14px;
-				line-height: 1.42;
+				padding-bottom: var(--spi-size-2);
 			}
 		}
 	}

package/dist/components/link/Link.svelte

@@ -20,7 +20,7 @@
 
 <style>
 	.link {
-		color: var(--primary-color, #472aff);
+		color: var(--spi-color-text-link);
 		text-decoration: none;
 	}
 

package/dist/components/menu/Menu.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { page } from '$app/state';
 	import { fade } from 'svelte/transition';
 
+	import { existRoute, getFirstPathSegment, getNormalizedPathname } from '../../utils/index.js';
 	import MainMenuItem from './MenuItem.svelte';
 	import type { MenuItem } from './types.js';
 
@@ -20,14 +20,9 @@
 	};
 
 	const isActiveMenuItem = (url: string) => {
-		const pathname = page.url.pathname.replace(/^\/v\d+\//, '/');
-		const firstSegmentUrl = pathname.split('/')[1];
-		return existRoute(`/${firstSegmentUrl}`, url);
-	};
-
-	const existRoute = (url: string, pathname: string) => {
-		const regex = new RegExp(`${url}(?![\\w-])`);
-		return regex.test(pathname);
+		const pathname = getNormalizedPathname();
+		const firstPathSegment = getFirstPathSegment(pathname);
+		return existRoute(firstPathSegment, url);
 	};
 
 	const onHandleMenu = () => {
@@ -70,7 +65,7 @@
 	.menu-backdrop {
 		position: fixed;
 		inset: 0;
-		background-color: rgba(243, 244, 246, 0.5);
+		background-color: var(--spi-color-backdrop);
 		cursor: pointer;
 		z-index: 30;
 		border: none;
@@ -78,16 +73,16 @@
 
 	.menu-nav {
 		position: absolute;
-		top: 80px;
-		left: 24px;
-		bottom: 24px;
+		top: var(--spi-size-20);
+		left: var(--spi-size-6);
+		bottom: var(--spi-size-6);
 		display: flex;
-		border: 1px solid #f3f4f6;
-		border-bottom-left-radius: 10px;
-		border-bottom-right-radius: 10px;
-		background-color: white;
-		box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-		min-height: calc(100vh - 80px - 55px);
+		border: var(--spi-border-1) solid var(--spi-color-border-default);
+		border-bottom-left-radius: var(--spi-rounded-xl);
+		border-bottom-right-radius: var(--spi-rounded-xl);
+		background-color: var(--spi-color-surface-default);
+		box-shadow: var(--spi-shadow-dropdown);
+		min-height: calc(100vh - var(--spi-size-20) - 55px);
 		z-index: 40;
 		width: auto;
 	}
@@ -95,8 +90,8 @@
 	.menu-list {
 		display: flex;
 		flex-direction: column;
-		gap: 0.25rem;
-		padding: 0.7rem;
+		gap: var(--spi-size-1);
+		padding: var(--spi-size-3);
 		width: 150px;
 		overflow-y: auto;
 		overflow-x: hidden;

package/dist/components/menu/MenuItem.svelte

@@ -23,44 +23,41 @@
 			]}
 			onclick={() => onClick?.(item)}
 		>
-			<span class="material-icons-outlined icon-span">{item.icon}</span>
-			<h2 class="item-name-span" class:hidden={isCollapsed}>{item.text}</h2>
+			<span class="material-icons-outlined icon-span spi-text-regular-5">{item.icon}</span>
+			<h2 class="item-name-span spi-text-regular-2" class:hidden={isCollapsed}>
+				{item.text}
+			</h2>
 		</a>
 	</Tooltip>
 </li>
 
 <style>
 	.item {
-		min-height: 28px;
-		padding: 8px;
-		border-radius: 8px;
+		min-height: var(--spi-size-7);
+		padding: var(--spi-size-2);
+		border-radius: var(--spi-rounded-lg);
 		justify-content: flex-start;
 		align-items: center;
-		gap: 8px;
+		gap: var(--spi-size-2);
 		display: inline-flex;
 		background: none;
 		border: none;
 		cursor: pointer;
-		transition: background-color 0.2s ease;
+		transition: background-color var(--spi-duration-normal) var(--spi-ease-default);
 	}
 
 	.item-name-span {
 		text-align: left;
-		color: black;
-		font-size: 14px;
-		font-weight: 400;
-		line-height: 20px;
+		color: var(--spi-color-text-primary);
 		word-wrap: break-word;
 	}
 
 	.icon-span {
-		color: black;
-		font-size: 20px;
-		font-weight: 400;
-		line-height: 20px;
 		word-wrap: break-word;
-		border-radius: 50%;
-		transition: background-color 0.2s ease;
+		line-height: normal;
+		color: var(--spi-color-text-primary);
+		border-radius: var(--spi-rounded-full);
+		transition: background-color var(--spi-duration-normal) var(--spi-ease-default);
 	}
 
 	.expanded {
@@ -68,34 +65,33 @@
 	}
 
 	.expanded:hover:not(.active-expanded) {
-		background-color: #f4f6f8;
+		background-color: var(--spi-color-surface-subtle);
 	}
 
 	.active-expanded {
-		background-color: #eaecff;
-		color: #472aff;
+		background-color: var(--spi-color-primary-lighter);
+		color: var(--spi-color-primary-base);
 		cursor: default;
 	}
 
 	.collapsed {
-		width: 68px;
 		justify-content: center;
 		position: relative;
 		width: 100%;
 	}
 
 	.collapsed .icon-span:hover {
-		background-color: #f4f6f8;
+		background-color: var(--spi-color-surface-subtle);
 	}
 
 	.active-collapsed {
-		background-color: #eaecff;
-		border-radius: 50%;
-		color: #472aff;
+		background-color: var(--spi-color-primary-lighter);
+		border-radius: var(--spi-rounded-full);
+		color: var(--spi-color-primary-base);
 	}
 
 	.active-collapsed:hover {
-		background-color: #eaecff;
+		background-color: var(--spi-color-primary-lighter);
 		cursor: default;
 	}
 
@@ -103,7 +99,7 @@
 	.active-collapsed .icon-span,
 	.active-expanded .item-name-span,
 	.active-collapsed .item-name-span {
-		color: #472aff;
+		color: var(--spi-color-primary-base);
 	}
 
 	.item.collapsed:focus,
@@ -115,8 +111,8 @@
 
 	.item.collapsed:focus-visible .icon-span,
 	.item.expanded:focus-visible {
-		box-shadow: 0 0 0 2px #472aff;
-		background-color: #eaecff;
+		box-shadow: 0 0 0 var(--spi-border-2) var(--spi-color-primary-base);
+		background-color: var(--spi-color-primary-lighter);
 		outline: none;
 	}
 

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/menu/utils.d.ts

@@ -1,2 +1,2 @@
 import type { MainMenu, SubMenuItem } from './types.js';
-export declare const getSubMenuItemsFromMenu: (items: MainMenu[], url: string, excludedRoutes?: string[]) => SubMenuItem[];
+export declare const getSubMenuItemsFromMenu: (items: MainMenu[], excludedRoutes?: string[]) => SubMenuItem[];

package/dist/components/menu/utils.js

@@ -1,12 +1,11 @@
-export const getSubMenuItemsFromMenu = (items, url, excludedRoutes) => {
-    const cleanUrl = url.replace(/^\/v\d+\//, '/');
-    if (excludedRoutes?.includes(cleanUrl))
+import { existRoute, getFirstPathSegment, getNormalizedPathname } from '../../utils/index.js';
+export const getSubMenuItemsFromMenu = (items, excludedRoutes) => {
+    const pathname = getNormalizedPathname();
+    if (excludedRoutes?.includes(pathname))
         return [];
-    const matchedPath = /^\/[^/]+/.exec(cleanUrl);
-    const urlValue = matchedPath?.[0] ?? '';
+    const firstPathSegment = getFirstPathSegment(pathname);
     const matchedMenu = items.find((menu) => {
-        const regex = new RegExp(`${urlValue}(?![\\w-])`);
-        return regex.test(menu.url);
+        return existRoute(firstPathSegment, menu.url);
     });
     return matchedMenu?.children ?? [];
 };

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,20 +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);
+		box-shadow: var(--spi-shadow-card-hover);
 	}
 
 	.modal {
@@ -93,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>