@softwareone/spi-sv5-library 1.14.3 → 1.15.0

package/dist/components/table/ActionsColumn.svelte

@@ -77,14 +77,14 @@
 			onmouseenter={toggleActionsMenu}
 			onmouseleave={toggleActionsMenu}
 		>
-			<span class="actions-trigger">...</span>
+			<span class="actions-trigger spi-text-bold-6">...</span>
 			{#if isOpen}
 				<div
 					class="actions-menu"
 					{@attach autoPosition}
 					transition:fade={{ duration: 100 }}
 				>
-					<ul class="actions-list">
+					<ul class="actions-list spi-text-regular-2">
 						{#each actions as action, index (index)}
 							<li>
 								<button
@@ -111,23 +111,6 @@
 
 <style>
 	.actions-column {
-		--color-primary: #472aff;
-		--color-red-200: #dc182c;
-		--color-gray-200: #e5e7eb;
-		--color-gray-300: #d1d5db;
-		--color-white: #ffffff;
-		--color-text: #000000;
-		--shadow-menu: 0 2px 10px rgba(0, 0, 0, 0.2);
-		--radius-lg: 8px;
-		--spacing-xs: 4px;
-		--spacing-sm: 8px;
-		--spacing-md: 10px;
-		--spacing-lg: 14px;
-		--z-index-menu: 1;
-		--font-size-sm: 14px;
-		--font-size-2xl: 24px;
-		--transition-standard: all 0.3s ease;
-
 		position: relative;
 		display: flex;
 		align-items: center;
@@ -136,33 +119,30 @@
 
 	.actions-trigger {
 		display: inline-block;
-		font-size: var(--font-size-2xl);
-		font-weight: bold;
 		line-height: 0;
 		cursor: default;
 	}
 
 	.actions-menu {
 		position: fixed;
-		z-index: var(--z-index-menu);
+		z-index: 1;
 		width: 108px;
 		left: var(--menu-left);
 		top: var(--menu-top);
-		padding: var(--spacing-md) var(--spacing-lg);
-		background: var(--color-white);
-		border-radius: var(--radius-lg);
-		box-shadow: var(--shadow-menu);
+		padding: var(--spi-size-3) var(--spi-size-4);
+		background: var(--spi-color-surface-default);
+		border-radius: var(--spi-rounded-lg);
+		box-shadow: var(--spi-shadow-dropdown);
 	}
 
 	.actions-list {
 		display: flex;
 		flex-direction: column;
-		gap: var(--spacing-sm);
+		gap: var(--spi-size-2);
 		margin: 0;
 		padding: 0;
 		list-style: none;
 		text-align: left;
-		font-size: var(--font-size-sm);
 	}
 
 	.action-button {
@@ -171,7 +151,7 @@
 		padding: 0;
 		border: none;
 		background: none;
-		color: var(--color-text);
+		color: var(--spi-color-text-primary);
 		font-size: inherit;
 		cursor: pointer;
 	}
@@ -181,13 +161,13 @@
 	}
 
 	.action-button:disabled {
-		color: var(--color-gray-300);
+		color: var(--spi-color-text-disabled);
 		cursor: not-allowed;
 		font-weight: normal;
 	}
 
 	.action-button--delete {
-		color: var(--color-red-200);
+		color: var(--spi-color-text-danger);
 	}
 
 	.action-button--single {
@@ -196,7 +176,7 @@
 	}
 
 	.action-button--primary {
-		color: var(--color-primary);
+		color: var(--spi-color-primary-base);
 	}
 
 	.action-button--primary:hover {
@@ -205,7 +185,7 @@
 
 	.action-divider {
 		border: none;
-		border-top: 1px solid var(--color-gray-200);
+		border-top: var(--spi-border-1) solid var(--spi-color-border-default);
 		margin: 0;
 	}
 </style>

package/dist/components/table/AdvancedFilter.svelte

@@ -88,10 +88,10 @@
 <div class="filter-container">
 	<button
 		type="button"
-		class={['filter-button', hasActiveFilters && 'filter-button--active']}
+		class={['filter-button', 'spi-text-regular-2', hasActiveFilters && 'filter-button--active']}
 		onclick={toggleModal}
 	>
-		<span class="material-icons">filter_list</span>
+		<span class="material-icons spi-text-regular-5">filter_list</span>
 		{#if hasActiveFilters}
 			<strong>{filters.length} {filters.length === 1 ? 'Filter' : 'Filters'}</strong>
 		{:else}
@@ -115,14 +115,14 @@
 			aria-labelledby="filter-dialog-title"
 		>
 			<div class="filter-header">
-				<h2 id="filter-dialog-title" class="filter-title">Filters</h2>
+				<h2 id="filter-dialog-title" class="filter-title spi-text-semibold-4">Filters</h2>
 				<button
 					type="button"
 					onclick={toggleModal}
 					class="filter-close-button"
 					aria-label="Close"
 				>
-					<span class="material-icons">close</span>
+					<span class="material-icons spi-text-regular-5">close</span>
 				</button>
 			</div>
 
@@ -168,7 +168,7 @@
 							class="filter-delete-button"
 							aria-label="Remove filter"
 						>
-							<span class="material-icons-outlined">delete</span>
+							<span class="material-icons-outlined spi-text-regular-5">delete</span>
 						</button>
 					</div>
 				{/each}
@@ -204,55 +204,29 @@
 
 <style>
 	.filter-container {
-		--color-primary: #472aff;
-		--color-primary-light: #eaecff;
-		--color-white: #fff;
-		--color-text-primary: #25282d;
-		--color-text-dark: #111827;
-		--color-text-secondary: #6b7280;
-		--color-text-hover: #374151;
-		--color-bg-hover: #f4f6f8;
-		--color-border: #e5e7eb;
-		--spacing-xs: 4px;
-		--spacing-sm: 8px;
-		--spacing-md: 12px;
-		--spacing-lg: 16px;
-		--spacing-xl: 24px;
-		--font-size-sm: 14px;
-		--font-size-md: 18px;
-		--font-size-icon: 20px;
-		--border-radius-sm: 8px;
-		--border-radius-circle: 50%;
-		--button-size: 40px;
-		--delete-button-size: 48px;
-		--modal-width: 640px;
-		--operation-column-width: 80px;
-		--transition-speed: 0.2s;
-
 		position: relative;
 	}
 
 	.filter-button {
 		display: flex;
 		align-items: center;
-		gap: var(--spacing-sm);
-		padding: var(--spacing-sm) var(--spacing-lg);
+		gap: var(--spi-size-2);
+		padding: var(--spi-size-2) var(--spi-size-4);
 		border: none;
-		border-radius: var(--border-radius-sm);
-		background: var(--color-white);
-		font-size: var(--font-size-sm);
-		color: var(--color-text-primary);
+		border-radius: var(--spi-rounded-lg);
+		background: var(--spi-color-surface-default);
+		color: var(--spi-color-text-primary);
 		cursor: pointer;
-		transition: background-color var(--transition-speed) ease-in-out;
+		transition: background-color var(--spi-duration-normal) var(--spi-ease-in-out);
 	}
 
 	.filter-button:hover {
-		background: var(--color-bg-hover);
+		background: var(--spi-color-surface-subtle);
 	}
 
 	.filter-button--active {
-		background: var(--color-primary-light);
-		color: var(--color-primary);
+		background: var(--spi-color-primary-lighter);
+		color: var(--spi-color-primary-base);
 	}
 
 	.filter-overlay {
@@ -266,58 +240,54 @@
 
 	.filter-modal {
 		position: absolute;
-		top: calc(100% + var(--spacing-sm));
+		top: calc(100% + var(--spi-size-2));
 		right: 0;
 		z-index: 10;
-		width: var(--modal-width);
-		padding: var(--spacing-xl);
-		border: 1px solid var(--color-border);
-		border-radius: var(--border-radius-sm);
-		background: var(--color-white);
-		box-shadow:
-			0 10px 15px -3px rgba(0, 0, 0, 0.1),
-			0 4px 6px -2px rgba(0, 0, 0, 0.05);
+		width: 640px;
+		padding: var(--spi-size-6);
+		border: var(--spi-border-1) solid var(--spi-color-border-default);
+		border-radius: var(--spi-rounded-lg);
+		background: var(--spi-color-surface-default);
+		box-shadow: var(--spi-shadow-dropdown);
 	}
 
 	.filter-header {
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
-		margin-bottom: var(--spacing-xl);
+		margin-bottom: var(--spi-size-6);
 	}
 
 	.filter-title {
-		font-size: var(--font-size-md);
-		font-weight: 600;
-		color: var(--color-text-dark);
+		color: var(--spi-color-text-primary);
 	}
 
 	.filter-close-button {
 		display: flex;
 		align-items: center;
-		padding: var(--spacing-xs);
+		padding: var(--spi-size-1);
 		border: none;
 		background: transparent;
-		color: var(--color-text-secondary);
+		color: var(--spi-color-text-muted);
 		cursor: pointer;
-		transition: color var(--transition-speed) ease-in-out;
+		transition: color var(--spi-duration-normal) var(--spi-ease-in-out);
 	}
 
 	.filter-close-button:hover {
-		color: var(--color-text-hover);
+		color: var(--spi-color-text-secondary);
 	}
 
 	.filter-body {
 		display: flex;
 		flex-direction: column;
-		gap: var(--spacing-lg);
+		gap: var(--spi-size-4);
 	}
 
 	.filter-row {
 		display: grid;
-		grid-template-columns: var(--operation-column-width) 1fr 1fr var(--delete-button-size);
+		grid-template-columns: var(--spi-size-20) 1fr 1fr var(--spi-size-12);
 		align-items: end;
-		gap: var(--spacing-md);
+		gap: var(--spi-size-3);
 	}
 
 	.filter-operation,
@@ -330,36 +300,31 @@
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		padding: var(--spacing-sm);
+		padding: var(--spi-size-2);
 		border: none;
 		background: transparent;
-		color: var(--color-text-primary);
-		border-radius: var(--border-radius-circle);
-		width: var(--button-size);
-		height: var(--button-size);
+		color: var(--spi-color-text-primary);
+		border-radius: var(--spi-rounded-full);
+		width: var(--spi-size-10);
+		height: var(--spi-size-10);
 		cursor: pointer;
-		transition: background-color var(--transition-speed) ease-in-out;
+		transition: background-color var(--spi-duration-normal) var(--spi-ease-in-out);
 	}
 
 	.filter-delete-button:hover {
-		background: var(--color-bg-hover);
+		background: var(--spi-color-surface-subtle);
 	}
 
 	.filter-actions {
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
-		margin-top: var(--spacing-sm);
+		margin-top: var(--spi-size-2);
 	}
 
 	.filter-footer {
 		display: flex;
 		justify-content: flex-end;
-		margin-top: var(--spacing-lg);
-	}
-
-	.material-icons,
-	.material-icons-outlined {
-		font-size: var(--font-size-icon);
+		margin-top: var(--spi-size-4);
 	}
 </style>

package/dist/components/table/Body.svelte

@@ -38,6 +38,7 @@
 				<td
 					class={[
 						'table-cell',
+						'spi-text-regular-2',
 						alignColumn === 'right' && 'table-cell--right',
 						alignColumn === 'center' && 'table-cell--center',
 						!alignColumn && 'table-cell--left'
@@ -54,32 +55,23 @@
 
 <style>
 	.table-body {
-		--color-white: #fff;
-		--color-black: #000;
-		--color-row-selected: #eaecff;
-		--color-gray-300: #e0e5e8;
-		--color-gray-400: #f3f4f6;
-		--spacing-md: 8px;
-		--spacing-lg: 16px;
-		--font-size-sm: 14px;
-
-		background: var(--color-white);
+		background: var(--spi-color-surface-default);
 	}
 
 	.table-row {
-		transition: background-color 100ms ease;
+		transition: background-color var(--spi-duration-fast) var(--spi-ease-default);
 	}
 
 	.table-row:hover {
-		background: var(--color-gray-400);
+		background: var(--spi-color-surface-subtle);
 	}
 
 	.table-row--selected {
-		background: var(--color-row-selected);
+		background: var(--spi-color-primary-lighter);
 	}
 
 	.table-row--selected:hover {
-		background: var(--color-row-selected);
+		background: var(--spi-color-primary-lighter);
 	}
 
 	.table-row--clickable {
@@ -88,10 +80,9 @@
 
 	.table-cell {
 		max-width: 50px;
-		padding: var(--spacing-md) var(--spacing-lg);
-		border-bottom: 0.5px solid var(--color-gray-300);
-		font-size: var(--font-size-sm);
-		color: var(--color-black);
+		padding: var(--spi-size-2) var(--spi-size-4);
+		border-bottom: var(--spi-border-1) solid var(--spi-color-border-default);
+		color: var(--spi-color-text-primary);
 		word-wrap: break-word;
 		white-space: normal;
 	}

package/dist/components/table/ColumnVisibilityDropdown.svelte

@@ -15,17 +15,17 @@
 </script>
 
 <div class="column-visibility">
-	<button type="button" class="column-visibility-toggle" onclick={toggleModal}>
-		<span class="material-icons">table_rows</span>
+	<button type="button" class="column-visibility-toggle spi-text-regular-2" onclick={toggleModal}>
+		<span class="material-icons spi-text-regular-2">table_rows</span>
 		Columns
 	</button>
 
 	{#if isOpen}
 		<div class="column-visibility-dropdown" role="menu">
 			<div class="column-visibility-header">
-				<h2 class="column-visibility-title">Toggle columns</h2>
+				<h2 class="column-visibility-title spi-text-semibold-2">Toggle columns</h2>
 				<button type="button" onclick={toggleModal} class="column-visibility-close">
-					<span class="material-icons">close</span>
+					<span class="material-icons spi-text-regular-2">close</span>
 				</button>
 			</div>
 
@@ -41,7 +41,7 @@
 							checked={column.getIsVisible()}
 							onchange={() => column.toggleVisibility()}
 						/>
-						<span class="column-visibility-label">{header}</span>
+						<span class="column-visibility-label spi-text-regular-2">{header}</span>
 					</label>
 				{/each}
 			</div>
@@ -60,68 +60,45 @@
 
 <style>
 	.column-visibility {
-		--color-white: #ffffff;
-		--color-gray-50: #f9fafb;
-		--color-gray-100: #f3f4f6;
-		--color-gray-500: #6b7280;
-		--color-gray-600: #4b5563;
-		--spacing-xs: 8px;
-		--spacing-sm: 8px;
-		--spacing-md: 16px;
-		--font-size-sm: 14px;
-		--font-size-icon: 14px;
-		--font-semibold: 600;
-		--radius-lg: 8px;
-		--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-		--z-index-dropdown: 10;
-		--z-index-backdrop: 9;
-
 		position: relative;
 	}
 
 	.column-visibility-toggle {
 		display: flex;
 		align-items: center;
-		gap: var(--spacing-xs);
-		padding: var(--spacing-sm) var(--spacing-md);
+		gap: var(--spi-size-2);
+		padding: var(--spi-size-2) var(--spi-size-4);
 		border: none;
-		border-radius: var(--radius-lg);
-		background: var(--color-white);
-		font-size: var(--font-size-sm);
+		border-radius: var(--spi-rounded-lg);
+		background: var(--spi-color-surface-default);
 		cursor: pointer;
 	}
 
 	.column-visibility-toggle:hover {
-		background: var(--color-gray-100);
-	}
-
-	.column-visibility-toggle .material-icons {
-		font-size: var(--font-size-icon);
+		background: var(--spi-color-surface-muted);
 	}
 
 	.column-visibility-dropdown {
 		position: absolute;
-		top: 48px;
+		top: var(--spi-size-12);
 		right: 0;
-		z-index: var(--z-index-dropdown);
+		z-index: 10;
 		width: 224px;
-		padding: var(--spacing-md);
-		background: var(--color-white);
-		border-radius: var(--radius-lg);
-		box-shadow: var(--shadow-lg);
+		padding: var(--spi-size-4);
+		background: var(--spi-color-surface-default);
+		border-radius: var(--spi-rounded-lg);
+		box-shadow: var(--spi-shadow-dropdown);
 	}
 
 	.column-visibility-header {
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
-		margin-bottom: var(--spacing-sm);
+		margin-bottom: var(--spi-size-2);
 	}
 
 	.column-visibility-title {
 		margin: 0;
-		font-size: var(--font-size-sm);
-		font-weight: var(--font-semibold);
 	}
 
 	.column-visibility-close {
@@ -130,16 +107,12 @@
 		padding: 0;
 		border: none;
 		background: none;
-		color: var(--color-gray-500);
+		color: var(--spi-color-text-muted);
 		cursor: pointer;
 	}
 
 	.column-visibility-close:hover {
-		color: var(--color-gray-600);
-	}
-
-	.column-visibility-close .material-icons {
-		font-size: var(--font-size-icon);
+		color: var(--spi-color-text-secondary);
 	}
 
 	.column-visibility-list {
@@ -150,24 +123,20 @@
 	.column-visibility-item {
 		display: flex;
 		align-items: center;
-		gap: var(--spacing-xs);
-		padding: var(--spacing-sm);
-		border-radius: var(--radius-lg);
+		gap: var(--spi-size-2);
+		padding: var(--spi-size-2);
+		border-radius: var(--spi-rounded-lg);
 		cursor: pointer;
 	}
 
 	.column-visibility-item:hover {
-		background: var(--color-gray-50);
-	}
-
-	.column-visibility-label {
-		font-size: var(--font-size-sm);
+		background: var(--spi-color-surface-subtle);
 	}
 
 	.column-visibility-backdrop {
 		position: fixed;
 		inset: 0;
-		z-index: var(--z-index-backdrop);
+		z-index: 9;
 		border: none;
 		background: transparent;
 		cursor: default;

package/dist/components/table/Footer.svelte

@@ -11,7 +11,7 @@
 	let { table, minPageSize }: Props = $props();
 </script>
 
-<footer class="table-footer">
+<footer class="table-footer spi-text-medium-2">
 	<Pagination {table} />
 	<PageSize {table} {minPageSize} />
 </footer>
@@ -21,9 +21,7 @@
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
-		margin-bottom: 20px;
-		font-size: 14px;
-		font-weight: 500;
+		margin-bottom: var(--spi-size-5);
 	}
 
 	@media (max-width: 750px) {