@softwareone/spi-sv5-library 1.14.3 → 1.15.0

package/dist/components/waffle/Waffle.svelte

@@ -39,7 +39,7 @@
 		aria-labelledby="waffle-title"
 		aria-modal="true"
 	>
-		<h2 class="waffle-title">SoftwareOne Cloud</h2>
+		<h2 class="waffle-title spi-text-semibold-2">SoftwareOne Cloud</h2>
 
 		<div class="waffle-content">
 			<ul class="waffle-grid" role="list">
@@ -57,7 +57,7 @@
 	.waffle-backdrop {
 		position: fixed;
 		inset: 0;
-		background: rgba(243, 244, 246, 0.5);
+		background: var(--spi-color-backdrop);
 		cursor: pointer;
 		z-index: 30;
 	}
@@ -66,31 +66,27 @@
 		position: absolute;
 		display: flex;
 		flex-direction: column;
-		border-radius: 8px;
-		background: #fff;
-		box-shadow:
-			0 10px 15px -3px rgba(0, 0, 0, 0.1),
-			0 4px 6px -2px rgba(0, 0, 0, 0.05);
-		top: 80px;
+		border-radius: var(--spi-rounded-lg);
+		background: var(--spi-color-surface-default);
+		box-shadow: var(--spi-shadow-dropdown);
+		top: var(--spi-size-20);
 		left: 0;
 		z-index: 40;
 		width: 600px;
 	}
 
 	.waffle-content {
-		padding: 20px 24px 24px 24px;
+		padding: var(--spi-size-5) var(--spi-size-6) var(--spi-size-6) var(--spi-size-6);
 	}
 
 	.waffle-title {
-		padding: 24px 24px 0 24px;
-		font-size: 14px;
-		font-weight: 600;
+		padding: var(--spi-size-6) var(--spi-size-6) 0 var(--spi-size-6);
 		text-align: center;
 	}
 
 	.waffle-grid {
 		display: grid;
 		grid-template-columns: repeat(3, 1fr);
-		gap: 16px;
+		gap: var(--spi-size-4);
 	}
 </style>

package/dist/components/waffle/WaffleItems.svelte

@@ -10,7 +10,7 @@
 
 <button type="button" onclick={onclickwaffleitems} class="waffle-item-button">
 	<img src={iconUrl} alt="" aria-hidden="true" class="waffle-item-img" />
-	<h3 class="waffle-title">
+	<h3 class="waffle-title spi-text-medium-2">
 		{title}
 	</h3>
 </button>
@@ -24,39 +24,36 @@
 		flex-direction: column;
 		align-items: center;
 		justify-content: center;
-		border-radius: 8px;
+		border-radius: var(--spi-rounded-lg);
 		text-align: center;
 		border: none;
 		background: transparent;
 		cursor: pointer;
-		transition: background-color 0.2s ease-in-out;
+		transition: background-color var(--spi-duration-normal) var(--spi-ease-in-out);
 	}
 
 	.waffle-item-button:hover {
-		background: #f4f6f8;
+		background: var(--spi-color-surface-subtle);
 	}
 
 	.waffle-item-button:focus,
 	.waffle-item-button:focus-visible {
-		background: #eaecff;
+		background: var(--spi-color-primary-lighter);
 	}
 
 	.waffle-item-img {
-		width: 40px;
-		height: 40px;
-		margin-bottom: 12px;
+		width: var(--spi-size-10);
+		height: var(--spi-size-10);
+		margin-bottom: var(--spi-size-3);
 		filter: invert(27%) sepia(99%) saturate(4729%) hue-rotate(240deg) brightness(101%)
 			contrast(106%);
 	}
 
 	.waffle-title {
-		color: #000;
-		font-weight: 500;
-		font-size: inherit;
+		color: var(--spi-color-text-primary);
 		word-break: break-words;
-		line-height: 1.25;
 		text-align: center;
-		padding: 0 4px;
+		padding: 0 var(--spi-size-1);
 		margin: 0;
 	}
 </style>

package/dist/styles/index.css

@@ -0,0 +1,3 @@
+@import './tokens/index.css';
+@import './reset.css';
+@import './utilities.css';

package/dist/styles/reset.css

@@ -0,0 +1,19 @@
+*,
+*::before,
+*::after {
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+}
+
+ul,
+ol,
+li,
+summary {
+	list-style: none;
+}
+
+a {
+	text-decoration: none;
+	color: inherit;
+}

package/dist/styles/tokens/index.css

@@ -0,0 +1,2 @@
+@import './primitives/index.css';
+@import './semantic/index.css';

package/dist/styles/tokens/primitives/borders.css

@@ -0,0 +1,17 @@
+:root {
+	--spi-border-1: 1px;
+	--spi-border-2: 2px;
+	--spi-border-3: 3px;
+	--spi-border-4: 4px;
+	--spi-border-5: 5px;
+
+	--spi-rounded-none: 0;
+	--spi-rounded-xs: 2px;
+	--spi-rounded-sm: 4px;
+	--spi-rounded-md: 6px;
+	--spi-rounded-lg: 8px;
+	--spi-rounded-xl: 12px;
+	--spi-rounded-2xl: 16px;
+	--spi-rounded-3xl: 24px;
+	--spi-rounded-full: 9999px;
+}

package/dist/styles/tokens/primitives/colors.css

@@ -0,0 +1,41 @@
+:root {
+	--spi-color-violet-1: #eaecff;
+	--spi-color-violet-2: #959bff;
+	--spi-color-violet-3: #472aff;
+	--spi-color-violet-4: #3520bf;
+	--spi-color-violet-5: #2b1999;
+
+	--spi-color-red-1: #fce8ea;
+	--spi-color-red-2: #ee8c96;
+	--spi-color-red-3: #dc182c;
+	--spi-color-red-4: #bb1425;
+	--spi-color-red-5: #8f101d;
+
+	--spi-color-gray-1: #f4f6f8;
+	--spi-color-gray-2: #e0e5e8;
+	--spi-color-gray-3: #aeb1b9;
+	--spi-color-gray-4: #6b7180;
+	--spi-color-gray-5: #434952;
+	--spi-color-gray-6: #25282d;
+
+	--spi-color-green-1: #e6f9f2;
+	--spi-color-green-2: #80e1ae;
+	--spi-color-green-3: #008556;
+	--spi-color-green-4: #00784d;
+	--spi-color-green-5: #005838;
+
+	--spi-color-blue-1: #cae4ff;
+	--spi-color-blue-2: #4da6ff;
+	--spi-color-blue-3: #2775c4;
+	--spi-color-blue-4: #1f5c99;
+	--spi-color-blue-5: #174475;
+
+	--spi-color-orange-1: #fdf2e9;
+	--spi-color-orange-2: #f1b178;
+	--spi-color-orange-3: #e87d1e;
+	--spi-color-orange-4: #733f11;
+	--spi-color-orange-5: #4d2a0b;
+
+	--spi-color-white: #ffffff;
+	--spi-color-black: #000000;
+}

package/dist/styles/tokens/primitives/index.css

@@ -0,0 +1,7 @@
+@import './borders.css';
+@import './colors.css';
+@import './motion.css';
+@import './opacity.css';
+@import './shadows.css';
+@import './sizing.css';
+@import './typography.css';

package/dist/styles/tokens/primitives/motion.css

@@ -0,0 +1,11 @@
+:root {
+	--spi-duration-fast: 100ms;
+	--spi-duration-normal: 200ms;
+	--spi-duration-slow: 300ms;
+	--spi-duration-slower: 500ms;
+
+	--spi-ease-default: ease;
+	--spi-ease-in: ease-in;
+	--spi-ease-out: ease-out;
+	--spi-ease-in-out: ease-in-out;
+}

package/dist/styles/tokens/primitives/opacity.css

@@ -0,0 +1,6 @@
+:root {
+	--spi-opacity-0: 0;
+	--spi-opacity-50: 0.5;
+	--spi-opacity-100: 1;
+	--spi-opacity-disabled: 0.4;
+}

package/dist/styles/tokens/primitives/shadows.css

@@ -0,0 +1,11 @@
+:root {
+	--spi-shadow-sm: 0 1px 16px 0 rgba(107, 113, 128, 0.1), 0 1px 3px 0 rgba(107, 113, 128, 0.2);
+
+	--spi-shadow-md:
+		0 1px 10px 0 rgba(51, 56, 64, 0.12), 0 2px 4px -1px rgba(51, 56, 64, 0.2),
+		0 4px 5px 0 rgba(51, 56, 64, 0.14);
+
+	--spi-shadow-lg:
+		0 4px 5px 0 rgba(51, 56, 64, 0.15), 0 1px 3px 0 rgba(51, 56, 64, 0.2),
+		0 1px 16px 0 rgba(51, 56, 64, 0.1);
+}

package/dist/styles/tokens/primitives/sizing.css

@@ -0,0 +1,19 @@
+:root {
+	--spi-size-1: 4px;
+	--spi-size-2: 8px;
+	--spi-size-3: 12px;
+	--spi-size-4: 16px;
+	--spi-size-5: 20px;
+	--spi-size-6: 24px;
+	--spi-size-7: 28px;
+	--spi-size-8: 32px;
+	--spi-size-9: 36px;
+	--spi-size-10: 40px;
+	--spi-size-11: 44px;
+	--spi-size-12: 48px;
+	--spi-size-14: 56px;
+	--spi-size-16: 64px;
+	--spi-size-18: 72px;
+	--spi-size-20: 80px;
+	--spi-size-24: 96px;
+}

package/dist/styles/tokens/primitives/typography.css

@@ -0,0 +1,13 @@
+:root {
+	--spi-font-size-xs: 0.75rem; /* 12px */
+	--spi-font-size-sm: 0.875rem; /* 14px */
+	--spi-font-size-md: 1rem; /* 16px */
+	--spi-font-size-lg: 1.125rem; /* 18px */
+	--spi-font-size-xl: 1.25rem; /* 20px */
+	--spi-font-size-2xl: 1.5rem; /* 24px */
+
+	--spi-font-weight-regular: 400;
+	--spi-font-weight-medium: 500;
+	--spi-font-weight-semibold: 600;
+	--spi-font-weight-bold: 700;
+}

package/dist/styles/tokens/semantic/colors.css

@@ -0,0 +1,78 @@
+:root {
+	/* Primary */
+	--spi-color-primary-lighter: var(--spi-color-violet-1);
+	--spi-color-primary-light: var(--spi-color-violet-2);
+	--spi-color-primary-base: var(--spi-color-violet-3);
+	--spi-color-primary-dark: var(--spi-color-violet-4);
+	--spi-color-primary-darker: var(--spi-color-violet-5);
+
+	/* Danger */
+	--spi-color-danger-lighter: var(--spi-color-red-1);
+	--spi-color-danger-light: var(--spi-color-red-2);
+	--spi-color-danger-base: var(--spi-color-red-3);
+	--spi-color-danger-dark: var(--spi-color-red-4);
+	--spi-color-danger-darker: var(--spi-color-red-5);
+
+	/* Neutral */
+	--spi-color-neutral-lighter: var(--spi-color-gray-1);
+	--spi-color-neutral-light: var(--spi-color-gray-2);
+	--spi-color-neutral-base: var(--spi-color-gray-3);
+	--spi-color-neutral-dark: var(--spi-color-gray-4);
+	--spi-color-neutral-darker: var(--spi-color-gray-5);
+	--spi-color-neutral-darkest: var(--spi-color-gray-6);
+
+	/* Success */
+	--spi-color-success-lighter: var(--spi-color-green-1);
+	--spi-color-success-light: var(--spi-color-green-2);
+	--spi-color-success-base: var(--spi-color-green-3);
+	--spi-color-success-dark: var(--spi-color-green-4);
+	--spi-color-success-darker: var(--spi-color-green-5);
+
+	/* Warning */
+	--spi-color-warning-lighter: var(--spi-color-orange-1);
+	--spi-color-warning-light: var(--spi-color-orange-2);
+	--spi-color-warning-base: var(--spi-color-orange-3);
+	--spi-color-warning-dark: var(--spi-color-orange-4);
+	--spi-color-warning-darker: var(--spi-color-orange-5);
+
+	/* Info */
+	--spi-color-info-lighter: var(--spi-color-blue-1);
+	--spi-color-info-light: var(--spi-color-blue-2);
+	--spi-color-info-base: var(--spi-color-blue-3);
+	--spi-color-info-dark: var(--spi-color-blue-4);
+	--spi-color-info-darker: var(--spi-color-blue-5);
+
+	/* Text */
+	--spi-color-text-primary: var(--spi-color-black);
+	--spi-color-text-secondary: var(--spi-color-gray-5);
+	--spi-color-text-muted: var(--spi-color-gray-4);
+	--spi-color-text-placeholder: var(--spi-color-gray-4);
+	--spi-color-text-disabled: var(--spi-color-gray-3);
+	--spi-color-text-inverse: var(--spi-color-white);
+	--spi-color-text-link: var(--spi-color-violet-3);
+	--spi-color-text-danger: var(--spi-color-red-3);
+	--spi-color-text-success: var(--spi-color-green-3);
+	--spi-color-text-warning: var(--spi-color-orange-3);
+	--spi-color-text-info: var(--spi-color-blue-3);
+
+	/* Surface */
+	--spi-color-surface-default: var(--spi-color-white);
+	--spi-color-surface-subtle: var(--spi-color-gray-1);
+	--spi-color-surface-muted: var(--spi-color-gray-2);
+	--spi-color-surface-inverse: var(--spi-color-gray-5);
+	--spi-color-backdrop: color-mix(in srgb, var(--spi-color-gray-2) 52%, transparent);
+
+	/* Border */
+	--spi-color-border-default: var(--spi-color-gray-2);
+	--spi-color-border-medium: var(--spi-color-gray-3);
+	--spi-color-border-strong: var(--spi-color-gray-4);
+	--spi-color-border-focus: var(--spi-color-violet-3);
+	--spi-color-border-danger: var(--spi-color-red-3);
+	--spi-color-border-success: var(--spi-color-green-3);
+
+	/* Interactive states */
+	--spi-color-focus-ring: var(--spi-color-violet-1);
+	--spi-color-disabled-bg: var(--spi-color-gray-2);
+	--spi-color-disabled-text: var(--spi-color-gray-3);
+	--spi-color-disabled-border: var(--spi-color-gray-4);
+}

package/dist/styles/tokens/semantic/index.css

@@ -0,0 +1,2 @@
+@import './colors.css';
+@import './shadows.css';

package/dist/styles/tokens/semantic/shadows.css

@@ -0,0 +1,9 @@
+:root {
+	--spi-shadow-card: var(--spi-shadow-sm);
+	--spi-shadow-card-hover: var(--spi-shadow-md);
+	--spi-shadow-dropdown: var(--spi-shadow-lg);
+
+	--spi-shadow-focus-primary: 0 0 0 var(--spi-border-3) var(--spi-color-focus-ring);
+	--spi-shadow-focus-danger: 0 0 0 var(--spi-border-3) var(--spi-color-danger-lighter);
+	--spi-shadow-focus-success: 0 0 0 var(--spi-border-3) var(--spi-color-success-lighter);
+}

package/dist/styles/utilities.css

@@ -0,0 +1,73 @@
+:is(.spi-text-regular-1, .spi-text-medium-1, .spi-text-semibold-1, .spi-text-bold-1) {
+	font-size: var(--spi-font-size-xs);
+	line-height: 1.33;
+}
+
+:is(.spi-text-regular-2, .spi-text-medium-2, .spi-text-semibold-2, .spi-text-bold-2) {
+	font-size: var(--spi-font-size-sm);
+	line-height: 1.42;
+}
+
+:is(.spi-text-regular-3, .spi-text-medium-3, .spi-text-semibold-3, .spi-text-bold-3) {
+	font-size: var(--spi-font-size-md);
+	line-height: 1.5;
+}
+
+:is(.spi-text-regular-4, .spi-text-medium-4, .spi-text-semibold-4, .spi-text-bold-4) {
+	font-size: var(--spi-font-size-lg);
+	line-height: 1.555556;
+}
+
+:is(.spi-text-regular-5, .spi-text-medium-5, .spi-text-semibold-5, .spi-text-bold-5) {
+	font-size: var(--spi-font-size-xl);
+	line-height: 1.4;
+}
+
+:is(.spi-text-regular-6, .spi-text-medium-6, .spi-text-semibold-6, .spi-text-bold-6) {
+	font-size: var(--spi-font-size-2xl);
+	line-height: 1.333333;
+}
+
+:is(
+	.spi-text-regular-1,
+	.spi-text-regular-2,
+	.spi-text-regular-3,
+	.spi-text-regular-4,
+	.spi-text-regular-5,
+	.spi-text-regular-6
+) {
+	font-weight: var(--spi-font-weight-regular);
+}
+
+:is(
+	.spi-text-medium-1,
+	.spi-text-medium-2,
+	.spi-text-medium-3,
+	.spi-text-medium-4,
+	.spi-text-medium-5,
+	.spi-text-medium-6
+) {
+	font-weight: var(--spi-font-weight-medium);
+}
+
+:is(
+	.spi-text-semibold-1,
+	.spi-text-semibold-2,
+	.spi-text-semibold-3,
+	.spi-text-semibold-4,
+	.spi-text-semibold-5,
+	.spi-text-semibold-6
+) {
+	font-weight: var(--spi-font-weight-semibold);
+}
+
+:is(
+	.spi-text-bold-1,
+	.spi-text-bold-2,
+	.spi-text-bold-3,
+	.spi-text-bold-4,
+	.spi-text-bold-5,
+	.spi-text-bold-6
+) {
+	font-weight: var(--spi-font-weight-bold);
+}

package/dist/utils/index.d.ts

@@ -0,0 +1 @@
+export * from './url.js';

package/dist/utils/index.js

@@ -0,0 +1 @@
+export * from './url.js';

package/dist/utils/url.d.ts

@@ -0,0 +1,3 @@
+export declare const getNormalizedPathname: () => string;
+export declare const getFirstPathSegment: (pathname: string) => string;
+export declare const existRoute: (url: string, pathname: string) => boolean;

package/dist/utils/url.js

@@ -0,0 +1,15 @@
+import { base } from '$app/paths';
+import { page } from '$app/state';
+export const getNormalizedPathname = () => {
+    const pathname = page.url.pathname;
+    const withoutBase = base && pathname.startsWith(base) ? pathname.slice(base.length) : pathname;
+    return withoutBase.replace(/^\/v\d+\//, '/');
+};
+export const getFirstPathSegment = (pathname) => {
+    const matchedPath = /^\/[^/]+/.exec(pathname);
+    return matchedPath?.[0] ?? '/';
+};
+export const existRoute = (url, pathname) => {
+    const regex = new RegExp(`${url}(?![\\w-])`);
+    return regex.test(pathname);
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@softwareone/spi-sv5-library",
-	"version": "1.14.3",
+	"version": "1.15.0",
 	"description": "Svelte components",
 	"keywords": [
 		"svelte",
@@ -46,7 +46,8 @@
 		"./table": {
 			"types": "./dist/components/table/index.d.ts",
 			"svelte": "./dist/components/table/index.js"
-		}
+		},
+		"./styles": "./dist/styles/index.css"
 	},
 	"peerDependencies": {
 		"@tanstack/table-core": "^8.21.3",