@softwareone/spi-sv5-library 1.14.4 → 1.15.1

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) {

package/dist/components/table/Header.svelte

@@ -25,7 +25,7 @@
 	};
 </script>
 
-<thead class="container">
+<thead>
 	{#each headerGroups as headerGroup (headerGroup.id)}
 		<tr class="table-header-row">
 			{#each headerGroup.headers as header (header.id)}
@@ -42,6 +42,7 @@
 					colSpan={header.colSpan}
 					class={[
 						'table-header-cell',
+						'spi-text-bold-2',
 						className,
 						isActive && 'table-header-cell--active'
 					]}
@@ -54,7 +55,7 @@
 						<button
 							type="button"
 							class={[
-								'table-header-button',
+								'table-header-button spi-text-bold-2',
 								canSort && 'table-header-button--sortable',
 								!canSort && 'table-header-button--disabled'
 							]}
@@ -74,7 +75,7 @@
 
 							{#if canSort}
 								<div class="table-header-sort-icon">
-									<span class="material-icons"
+									<span class="material-icons spi-text-regular-2"
 										>{getSortIcon[header.column.getIsSorted().toString()]}</span
 									>
 								</div>
@@ -82,13 +83,18 @@
 
 							{#if isFiltered}
 								<div class="table-header-filtered-icon">
-									<span class="material-icons-outlined">filter_alt</span>
+									<span class="material-icons-outlined spi-text-regular-2"
+										>filter_alt</span
+									>
 								</div>
 							{/if}
 						</button>
 
 						{#if enableColumnSearch && !hideColumnFilter}
-							<div class="table-header-search" style:justify-content={justifyContent}>
+							<div
+								class="table-header-search spi-text-regular-1"
+								style:justify-content={justifyContent}
+							>
 								<Search
 									oninput={({ currentTarget }) =>
 										header.column.setFilterValue(currentTarget.value)}
@@ -105,42 +111,24 @@
 </thead>
 
 <style>
-	.container {
-		--color-primary: #472aff;
-		--color-primary-light: #eaecff;
-		--color-black: #000000;
-		--color-gray-100: #f3f4f6;
-		--color-gray-200: #e5e7eb;
-		--color-gray-300: #e0e5e8;
-		--spacing-xs: 4px;
-		--spacing-sm: 8px;
-		--spacing-md: 16px;
-		--font-size-xs: 12px;
-		--font-size-sm: 14px;
-		--font-bold: 700;
-		--font-normal: 400;
-	}
-
 	.table-header-cell:first-child {
-		border-left: 0.5px solid var(--color-gray-300);
+		border-left: 0.5px solid var(--spi-color-border-default);
 	}
 
 	.table-header-cell {
-		padding: var(--spacing-sm) var(--spacing-md);
-		border-right: 0.5px solid var(--color-gray-300);
-		border-bottom: 2px solid var(--color-black);
+		padding: var(--spi-size-2) var(--spi-size-4);
+		border-right: 0.5px solid var(--spi-color-border-default);
+		border-bottom: var(--spi-border-2) solid var(--spi-color-text-primary);
 		text-align: left;
-		font-size: var(--font-size-sm);
-		font-weight: var(--font-bold);
 	}
 
 	.table-header-cell:hover {
-		background: var(--color-gray-100);
+		background: var(--spi-color-surface-subtle);
 	}
 
 	.table-header-cell--active {
-		background: var(--color-primary-light);
-		color: var(--color-primary);
+		background: var(--spi-color-primary-lighter);
+		color: var(--spi-color-primary-base);
 	}
 
 	.table-header-button {
@@ -151,8 +139,6 @@
 		padding: 0;
 		border: none;
 		background: none;
-		font-size: inherit;
-		font-weight: inherit;
 		color: inherit;
 	}
 
@@ -169,7 +155,7 @@
 	}
 
 	.table-header-label--sortable {
-		margin-right: 16px;
+		margin-right: var(--spi-size-4);
 	}
 
 	@media (max-width: 750px) {
@@ -181,7 +167,7 @@
 	.table-header-sort-icon {
 		position: absolute;
 		right: -8px;
-		margin-top: 4px;
+		margin-top: var(--spi-size-1);
 	}
 
 	.table-header-sort-icon:has(+ .table-header-filtered-icon) {
@@ -191,23 +177,16 @@
 	.table-header-filtered-icon {
 		position: absolute;
 		right: -13px;
-		margin-top: 4px;
-	}
-
-	.table-header-sort-icon .material-icons,
-	.material-icons-outlined {
-		font-size: var(--font-size-sm);
+		margin-top: var(--spi-size-1);
 	}
 
 	.table-header-search {
 		display: flex;
 		min-width: 144px;
-		margin: var(--spacing-xs) 0;
-		font-weight: var(--font-normal);
+		margin: var(--spi-size-1) 0;
 	}
 
 	.table-header-search :global(.search-input) {
-		padding: var(--spacing-xs) 36px;
-		font-size: var(--font-size-xs);
+		padding: var(--spi-size-1) var(--spi-size-9);
 	}
 </style>