@bexis2/bexis2-core-ui 0.3.0 → 0.3.2

package/src/lib/components/page/HelpPopUp.svelte

@@ -1,72 +1,72 @@
-<script lang="ts">
-	import { helpStore } from '$store/pageStores';
-	import type { helpItemType, helpStoreType } from '$models/Models';
-	import Fa from 'svelte-fa/src/fa.svelte';
-	import { faQuestion } from '@fortawesome/free-solid-svg-icons';
-
-	//popup
-	import { popup } from '@skeletonlabs/skeleton';
-	import type { PopupSettings } from '@skeletonlabs/skeleton';
-	//import { computePosition, autoUpdate, offset, shift, flip, arrow } from '@floating-ui/dom';
-	//import { storePopup } from '@skeletonlabs/skeleton';
-	import delay from 'delay';
-
-	export let active: boolean = false;
-
-	let hs: helpStoreType;
-	$: helpStore.subscribe((value) => {
-		hs = value;
-	});
-	let helpItem: helpItemType = { id: undefined, name: '', description: '' };
-	$: helpItem =
-		active === true
-			? hs.itemId == ''
-				? { id: undefined, name: '', description: '' }
-				: hs.helpItems.find((h) => h.id === hs.itemId)!
-			: { id: undefined, name: '', description: '' };
-
-	const helpClick: PopupSettings = {
-		event: 'click',
-		target: 'helpTarget',
-		placement: 'top',
-		state: (s) => {
-			if (s != true) {
-				resetItemId();
-			}
-		}
-	};
-
-	async function resetItemId() {
-		await delay(100);
-		helpStore.resetItemId();
-	}
-</script>
-
-{#if active}
-	<button
-		id="helpButton"
-		class="chip variant-filled-warning fixed bottom-5 right-10 shadow-md"
-		use:popup={helpClick}><Fa icon={faQuestion} /></button
-	>
-
-	<div
-		class="card bg-primary-300 border-solid border-2 border-primary-500 shadow-md"
-		data-popup="helpTarget"
-	>
-		{#if helpItem && helpItem.id}
-			<div class="p-5 w-96 space-y-4" id={'helpPopup.' + helpItem.id}>
-				<h3 class="h3">{helpItem.name}</h3>
-				<p>{@html helpItem.description}</p>
-				{#if helpItem.link}
-					<p><a class="anchor" href={helpItem.link}>... read more</a></p>
-				{/if}
-			</div>
-		{:else}
-			<div class="p-5 w-96 space-y-4" id="helpPopup">
-				<h3 class="h3">Help</h3>
-				<p>Hover over the Element, you like to know more about.</p>
-			</div>
-		{/if}
-		<div class="arrow variant-filled-primary" />
-	</div>
-{/if}
+<script lang="ts">
+	import { helpStore } from '$store/pageStores';
+	import type { helpItemType, helpStoreType } from '$models/Models';
+	import Fa from 'svelte-fa/src/fa.svelte';
+	import { faQuestion } from '@fortawesome/free-solid-svg-icons';
+
+	//popup
+	import { popup } from '@skeletonlabs/skeleton';
+	import type { PopupSettings } from '@skeletonlabs/skeleton';
+	//import { computePosition, autoUpdate, offset, shift, flip, arrow } from '@floating-ui/dom';
+	//import { storePopup } from '@skeletonlabs/skeleton';
+	import delay from 'delay';
+
+	export let active: boolean = false;
+
+	let hs: helpStoreType;
+	$: helpStore.subscribe((value) => {
+		hs = value;
+	});
+	let helpItem: helpItemType = { id: undefined, name: '', description: '' };
+	$: helpItem =
+		active === true
+			? hs.itemId == ''
+				? { id: undefined, name: '', description: '' }
+				: hs.helpItems.find((h) => h.id === hs.itemId)!
+			: { id: undefined, name: '', description: '' };
+
+	const helpClick: PopupSettings = {
+		event: 'click',
+		target: 'helpTarget',
+		placement: 'top',
+		state: (s) => {
+			if (s != true) {
+				resetItemId();
+			}
+		}
+	};
+
+	async function resetItemId() {
+		await delay(100);
+		helpStore.resetItemId();
+	}
+</script>
+
+{#if active}
+	<button
+		id="helpButton"
+		class="chip variant-filled-warning fixed bottom-5 right-10 shadow-md"
+		use:popup={helpClick}><Fa icon={faQuestion} /></button
+	>
+
+	<div
+		class="card bg-primary-300 border-solid border-2 border-primary-500 shadow-md"
+		data-popup="helpTarget"
+	>
+		{#if helpItem && helpItem.id}
+			<div class="p-5 w-96 space-y-4" id={'helpPopup.' + helpItem.id}>
+				<h3 class="h3">{helpItem.name}</h3>
+				<p>{@html helpItem.description}</p>
+				{#if helpItem.link}
+					<p><a class="anchor" href={helpItem.link}>... read more</a></p>
+				{/if}
+			</div>
+		{:else}
+			<div class="p-5 w-96 space-y-4" id="helpPopup">
+				<h3 class="h3">Help</h3>
+				<p>Hover over the Element, you like to know more about.</p>
+			</div>
+		{/if}
+		<div class="arrow variant-filled-primary" />
+	</div>
+{/if}

package/src/lib/components/page/Notification.svelte

@@ -3,9 +3,9 @@
 	import { Toast, getToastStore, type ToastSettings } from '@skeletonlabs/skeleton';
 	import { notificationStore } from '$store/pageStores';
 	import type { notificationStoreType } from '$models/Models';
-	import {notificationType} from '$models/Enums'
+	import { notificationType } from '$models/Enums';
 
-	const toastStore = getToastStore()
+	const toastStore = getToastStore();
 
 	let btnStyle: string;
 	$: btnStyle =
@@ -13,55 +13,50 @@
 			? notificationStore.getBtnStyle()
 			: $notificationStore.btnStyle;
 
+	$: $notificationStore, triggerToast();
+
+	onMount(() => {
+		toastStore.clear();
+	});
+
+	function triggerToast() {
+		toastStore.clear();
+
+		const timeout = 30000;
+		let classes = '';
+
+		if ($notificationStore.message != undefined && $notificationStore.message != '') {
+			switch ($notificationStore.notificationType) {
+				case notificationType.success:
+					classes =
+						'bg-success-300 border-solid border-2 border-success-500 shadow-md text-surface-900';
+					break;
+				case notificationType.warning:
+					classes =
+						'bg-warning-300 border-solid border-2 border-warning-500 shadow-md text-surface-900';
+					break;
+				case notificationType.error:
+					classes =
+						'bg-error-300 border-solid border-2 border-error-500 shadow-md text-surface-900';
+					break;
+				case notificationType.surface:
+					classes =
+						'bg-surface-300 border-solid border-2 border-surface-500 shadow-md text-surface-900';
+					break;
+			}
 
-$:$notificationStore, triggerToast(); 
-
-onMount(()=>{
-	toastStore.clear()
-})
-
-function triggerToast(){
-			toastStore.clear()
-
-			const timeout = 30000;
-			let classes = '';
-			
-			if($notificationStore.message != undefined && $notificationStore.message != '')
-			{
-				switch ($notificationStore.notificationType) {
-					case notificationType.success:
-						classes =
-							'bg-success-300 border-solid border-2 border-success-500 shadow-md text-surface-900';
-						break;
-					case notificationType.warning:
-						classes =
-							'bg-warning-300 border-solid border-2 border-warning-500 shadow-md text-surface-900';
-						break;
-					case notificationType.error:
-						classes =
-							'bg-error-300 border-solid border-2 border-error-500 shadow-md text-surface-900';
-						break;
-					case notificationType.surface:
-						classes =
-							'bg-surface-300 border-solid border-2 border-surface-500 shadow-md text-surface-900';
-						break;
+			const notificationToast: ToastSettings = {
+				classes: classes,
+				message: $notificationStore.message,
+				timeout: timeout,
+				callback: () => {
+					toastStore.clear();
 				}
+			};
 
-				const notificationToast: ToastSettings = {
-					classes: classes,
-					message: $notificationStore.message,
-					timeout: timeout,
-					callback: () => {toastStore.clear()}
-				};
-
-				toastStore.trigger(notificationToast);
-			
-			}
-	
+			toastStore.trigger(notificationToast);
+		}
 	}
-
-
-
 </script>
 
 <Toast position="t" buttonDismiss={btnStyle} />

package/src/lib/components/page/Page.svelte

@@ -20,7 +20,6 @@
 
 	storePopup.set({ computePosition, autoUpdate, offset, shift, flip, arrow });
 
-
 	import Docs from './Docs.svelte';
 
 	export let title = '';

package/src/lib/components/page/PageCaller.js

@@ -1,19 +1,19 @@
-import { Api } from '$lib/services/Api';
-
-export const getFooter = async () => {
-	try {
-		const response = await Api.get('/footer');
-		return response.data;
-	} catch (error) {
-		console.error(error);
-	}
-};
-
-export const getHeader = async () => {
-	try {
-		const response = await Api.get('/header');
-		return response.data;
-	} catch (error) {
-		console.error(error);
-	}
-};
+import { Api } from '$lib/services/Api';
+
+export const getFooter = async () => {
+	try {
+		const response = await Api.get('/footer');
+		return response.data;
+	} catch (error) {
+		console.error(error);
+	}
+};
+
+export const getHeader = async () => {
+	try {
+		const response = await Api.get('/header');
+		return response.data;
+	} catch (error) {
+		console.error(error);
+	}
+};

package/src/lib/components/page/Spinner.svelte

@@ -1,20 +1,20 @@
-<script lang="ts">
-	import { positionType } from '$lib/models/Enums';
-
-	export let textCss = 'text-surface-600';
-	export let label = '';
-	export let position: positionType = positionType.center;
-</script>
-
-<div class="flex justify-{position} items-{position} h-full w-full gap-5 pt-2 {textCss}">
-	<div
-		class="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-current border-r-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite]"
-		role="status"
-	>
-		<span
-			class="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]"
-			>Loading...</span
-		>
-	</div>
-	<span>{label}</span>
-</div>
+<script lang="ts">
+	import { positionType } from '$lib/models/Enums';
+
+	export let textCss = 'text-surface-600';
+	export let label = '';
+	export let position: positionType = positionType.center;
+</script>
+
+<div class="flex justify-{position} items-{position} h-full w-full gap-5 pt-2 {textCss}">
+	<div
+		class="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-current border-r-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite]"
+		role="status"
+	>
+		<span
+			class="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]"
+			>Loading...</span
+		>
+	</div>
+	<span>{label}</span>
+</div>

package/src/lib/components/page/menu/MenuDataCaller.js

@@ -1,10 +1,10 @@
-import { Api } from '$lib/services/Api';
-
-export const getMenuItems = async () => {
-	try {
-		const response = await Api.get('/menu');
-		return response.data;
-	} catch (error) {
-		console.error(error);
-	}
-};
+import { Api } from '$lib/services/Api';
+
+export const getMenuItems = async () => {
+	try {
+		const response = await Api.get('/menu');
+		return response.data;
+	} catch (error) {
+		console.error(error);
+	}
+};

package/src/lib/css/core.ui.postcss

@@ -1,17 +1,17 @@
-/*place global styles here */
-html,
-body {
-	@apply h-full;
-}
-
-h1 {
-	@apply text-primary-500;
-}
-
-:root {
-	--background: rgb(var(--color-surface-200));
-}
-
-[type='text']:focus {
-	--tw-ring-color: #00000;
-}
+/*place global styles here */
+html,
+body {
+	@apply h-full;
+}
+
+h1 {
+	@apply text-primary-500;
+}
+
+:root {
+	--background: rgb(var(--color-surface-200));
+}
+
+[type='text']:focus {
+	--tw-ring-color: #00000;
+}

package/src/lib/css/themes/theme-bexis2.css

@@ -1,96 +1,96 @@
-:root {
-	/* =~= Theme Properties =~= */
-	--theme-font-family-base: system-ui;
-	--theme-font-family-heading: system-ui;
-	--theme-font-color-base: var(--color-surface-900);
-	--theme-font-color-dark: 255 255 255;
-	--theme-rounded-base: 4px;
-	--theme-rounded-container: 4px;
-	--theme-border-base: 1px;
-	/* =~= Theme On-X Colors =~= */
-	--on-primary: 255 255 255;
-	--on-secondary: 255 255 255;
-	--on-tertiary: 0 0 0;
-	--on-success: 255 255 255;
-	--on-warning: 255 255 255;
-	--on-error: 255 255 255;
-	--on-surface: 0 0 0;
-	/* =~= Theme Colors  =~= */
-	/* primary | #45b2a1 */
-	--color-primary-50: 227 243 241; /* ⬅ #e3f3f1 */
-	--color-primary-100: 218 240 236; /* ⬅ #daf0ec */
-	--color-primary-200: 209 236 232; /* ⬅ #d1ece8 */
-	--color-primary-300: 181 224 217; /* ⬅ #b5e0d9 */
-	--color-primary-400: 125 201 189; /* ⬅ #7dc9bd */
-	--color-primary-500: 69 178 161; /* ⬅ #45b2a1 */
-	--color-primary-600: 62 160 145; /* ⬅ #3ea091 */
-	--color-primary-700: 52 134 121; /* ⬅ #348679 */
-	--color-primary-800: 41 107 97; /* ⬅ #296b61 */
-	--color-primary-900: 34 87 79; /* ⬅ #22574f */
-	/* secondary | #ff9700 */
-	--color-secondary-50: 255 239 217; /* ⬅ #ffefd9 */
-	--color-secondary-100: 255 234 204; /* ⬅ #ffeacc */
-	--color-secondary-200: 255 229 191; /* ⬅ #ffe5bf */
-	--color-secondary-300: 255 213 153; /* ⬅ #ffd599 */
-	--color-secondary-400: 255 182 77; /* ⬅ #ffb64d */
-	--color-secondary-500: 255 151 0; /* ⬅ #ff9700 */
-	--color-secondary-600: 230 136 0; /* ⬅ #e68800 */
-	--color-secondary-700: 191 113 0; /* ⬅ #bf7100 */
-	--color-secondary-800: 153 91 0; /* ⬅ #995b00 */
-	--color-secondary-900: 125 74 0; /* ⬅ #7d4a00 */
-	/* tertiary | #bee1da */
-	--color-tertiary-50: 245 251 249; /* ⬅ #f5fbf9 */
-	--color-tertiary-100: 242 249 248; /* ⬅ #f2f9f8 */
-	--color-tertiary-200: 239 248 246; /* ⬅ #eff8f6 */
-	--color-tertiary-300: 229 243 240; /* ⬅ #e5f3f0 */
-	--color-tertiary-400: 210 234 229; /* ⬅ #d2eae5 */
-	--color-tertiary-500: 190 225 218; /* ⬅ #bee1da */
-	--color-tertiary-600: 171 203 196; /* ⬅ #abcbc4 */
-	--color-tertiary-700: 143 169 164; /* ⬅ #8fa9a4 */
-	--color-tertiary-800: 114 135 131; /* ⬅ #728783 */
-	--color-tertiary-900: 93 110 107; /* ⬅ #5d6e6b */
-	/* success | #4BB543 */
-	--color-success-50: 228 244 227; /* ⬅ #e4f4e3 */
-	--color-success-100: 219 240 217; /* ⬅ #dbf0d9 */
-	--color-success-200: 210 237 208; /* ⬅ #d2edd0 */
-	--color-success-300: 183 225 180; /* ⬅ #b7e1b4 */
-	--color-success-400: 129 203 123; /* ⬅ #81cb7b */
-	--color-success-500: 75 181 67; /* ⬅ #4BB543 */
-	--color-success-600: 68 163 60; /* ⬅ #44a33c */
-	--color-success-700: 56 136 50; /* ⬅ #388832 */
-	--color-success-800: 45 109 40; /* ⬅ #2d6d28 */
-	--color-success-900: 37 89 33; /* ⬅ #255921 */
-	/* warning | #EAB308 */
-	--color-warning-50: 252 244 218; /* ⬅ #fcf4da */
-	--color-warning-100: 251 240 206; /* ⬅ #fbf0ce */
-	--color-warning-200: 250 236 193; /* ⬅ #faecc1 */
-	--color-warning-300: 247 225 156; /* ⬅ #f7e19c */
-	--color-warning-400: 240 202 82; /* ⬅ #f0ca52 */
-	--color-warning-500: 234 179 8; /* ⬅ #EAB308 */
-	--color-warning-600: 211 161 7; /* ⬅ #d3a107 */
-	--color-warning-700: 176 134 6; /* ⬅ #b08606 */
-	--color-warning-800: 140 107 5; /* ⬅ #8c6b05 */
-	--color-warning-900: 115 88 4; /* ⬅ #735804 */
-	/* error | #FF0000 */
-	--color-error-50: 255 217 217; /* ⬅ #ffd9d9 */
-	--color-error-100: 255 204 204; /* ⬅ #ffcccc */
-	--color-error-200: 255 191 191; /* ⬅ #ffbfbf */
-	--color-error-300: 255 153 153; /* ⬅ #ff9999 */
-	--color-error-400: 255 77 77; /* ⬅ #ff4d4d */
-	--color-error-500: 255 0 0; /* ⬅ #FF0000 */
-	--color-error-600: 230 0 0; /* ⬅ #e60000 */
-	--color-error-700: 191 0 0; /* ⬅ #bf0000 */
-	--color-error-800: 153 0 0; /* ⬅ #990000 */
-	--color-error-900: 125 0 0; /* ⬅ #7d0000 */
-	/* surface | #c7c7c7 */
-	--color-surface-50: 247 247 247; /* ⬅ #f7f7f7 */
-	--color-surface-100: 244 244 244; /* ⬅ #f4f4f4 */
-	--color-surface-200: 241 241 241; /* ⬅ #f1f1f1 */
-	--color-surface-300: 233 233 233; /* ⬅ #e9e9e9 */
-	--color-surface-400: 216 216 216; /* ⬅ #d8d8d8 */
-	--color-surface-500: 199 199 199; /* ⬅ #c7c7c7 */
-	--color-surface-600: 179 179 179; /* ⬅ #b3b3b3 */
-	--color-surface-700: 149 149 149; /* ⬅ #959595 */
-	--color-surface-800: 119 119 119; /* ⬅ #777777 */
-	--color-surface-900: 98 98 98; /* ⬅ #626262 */
-}
+:root {
+	/* =~= Theme Properties =~= */
+	--theme-font-family-base: system-ui;
+	--theme-font-family-heading: system-ui;
+	--theme-font-color-base: var(--color-surface-900);
+	--theme-font-color-dark: 255 255 255;
+	--theme-rounded-base: 4px;
+	--theme-rounded-container: 4px;
+	--theme-border-base: 1px;
+	/* =~= Theme On-X Colors =~= */
+	--on-primary: 255 255 255;
+	--on-secondary: 255 255 255;
+	--on-tertiary: 0 0 0;
+	--on-success: 255 255 255;
+	--on-warning: 255 255 255;
+	--on-error: 255 255 255;
+	--on-surface: 0 0 0;
+	/* =~= Theme Colors  =~= */
+	/* primary | #45b2a1 */
+	--color-primary-50: 227 243 241; /* ⬅ #e3f3f1 */
+	--color-primary-100: 218 240 236; /* ⬅ #daf0ec */
+	--color-primary-200: 209 236 232; /* ⬅ #d1ece8 */
+	--color-primary-300: 181 224 217; /* ⬅ #b5e0d9 */
+	--color-primary-400: 125 201 189; /* ⬅ #7dc9bd */
+	--color-primary-500: 69 178 161; /* ⬅ #45b2a1 */
+	--color-primary-600: 62 160 145; /* ⬅ #3ea091 */
+	--color-primary-700: 52 134 121; /* ⬅ #348679 */
+	--color-primary-800: 41 107 97; /* ⬅ #296b61 */
+	--color-primary-900: 34 87 79; /* ⬅ #22574f */
+	/* secondary | #ff9700 */
+	--color-secondary-50: 255 239 217; /* ⬅ #ffefd9 */
+	--color-secondary-100: 255 234 204; /* ⬅ #ffeacc */
+	--color-secondary-200: 255 229 191; /* ⬅ #ffe5bf */
+	--color-secondary-300: 255 213 153; /* ⬅ #ffd599 */
+	--color-secondary-400: 255 182 77; /* ⬅ #ffb64d */
+	--color-secondary-500: 255 151 0; /* ⬅ #ff9700 */
+	--color-secondary-600: 230 136 0; /* ⬅ #e68800 */
+	--color-secondary-700: 191 113 0; /* ⬅ #bf7100 */
+	--color-secondary-800: 153 91 0; /* ⬅ #995b00 */
+	--color-secondary-900: 125 74 0; /* ⬅ #7d4a00 */
+	/* tertiary | #bee1da */
+	--color-tertiary-50: 245 251 249; /* ⬅ #f5fbf9 */
+	--color-tertiary-100: 242 249 248; /* ⬅ #f2f9f8 */
+	--color-tertiary-200: 239 248 246; /* ⬅ #eff8f6 */
+	--color-tertiary-300: 229 243 240; /* ⬅ #e5f3f0 */
+	--color-tertiary-400: 210 234 229; /* ⬅ #d2eae5 */
+	--color-tertiary-500: 190 225 218; /* ⬅ #bee1da */
+	--color-tertiary-600: 171 203 196; /* ⬅ #abcbc4 */
+	--color-tertiary-700: 143 169 164; /* ⬅ #8fa9a4 */
+	--color-tertiary-800: 114 135 131; /* ⬅ #728783 */
+	--color-tertiary-900: 93 110 107; /* ⬅ #5d6e6b */
+	/* success | #4BB543 */
+	--color-success-50: 228 244 227; /* ⬅ #e4f4e3 */
+	--color-success-100: 219 240 217; /* ⬅ #dbf0d9 */
+	--color-success-200: 210 237 208; /* ⬅ #d2edd0 */
+	--color-success-300: 183 225 180; /* ⬅ #b7e1b4 */
+	--color-success-400: 129 203 123; /* ⬅ #81cb7b */
+	--color-success-500: 75 181 67; /* ⬅ #4BB543 */
+	--color-success-600: 68 163 60; /* ⬅ #44a33c */
+	--color-success-700: 56 136 50; /* ⬅ #388832 */
+	--color-success-800: 45 109 40; /* ⬅ #2d6d28 */
+	--color-success-900: 37 89 33; /* ⬅ #255921 */
+	/* warning | #EAB308 */
+	--color-warning-50: 252 244 218; /* ⬅ #fcf4da */
+	--color-warning-100: 251 240 206; /* ⬅ #fbf0ce */
+	--color-warning-200: 250 236 193; /* ⬅ #faecc1 */
+	--color-warning-300: 247 225 156; /* ⬅ #f7e19c */
+	--color-warning-400: 240 202 82; /* ⬅ #f0ca52 */
+	--color-warning-500: 234 179 8; /* ⬅ #EAB308 */
+	--color-warning-600: 211 161 7; /* ⬅ #d3a107 */
+	--color-warning-700: 176 134 6; /* ⬅ #b08606 */
+	--color-warning-800: 140 107 5; /* ⬅ #8c6b05 */
+	--color-warning-900: 115 88 4; /* ⬅ #735804 */
+	/* error | #FF0000 */
+	--color-error-50: 255 217 217; /* ⬅ #ffd9d9 */
+	--color-error-100: 255 204 204; /* ⬅ #ffcccc */
+	--color-error-200: 255 191 191; /* ⬅ #ffbfbf */
+	--color-error-300: 255 153 153; /* ⬅ #ff9999 */
+	--color-error-400: 255 77 77; /* ⬅ #ff4d4d */
+	--color-error-500: 255 0 0; /* ⬅ #FF0000 */
+	--color-error-600: 230 0 0; /* ⬅ #e60000 */
+	--color-error-700: 191 0 0; /* ⬅ #bf0000 */
+	--color-error-800: 153 0 0; /* ⬅ #990000 */
+	--color-error-900: 125 0 0; /* ⬅ #7d0000 */
+	/* surface | #c7c7c7 */
+	--color-surface-50: 247 247 247; /* ⬅ #f7f7f7 */
+	--color-surface-100: 244 244 244; /* ⬅ #f4f4f4 */
+	--color-surface-200: 241 241 241; /* ⬅ #f1f1f1 */
+	--color-surface-300: 233 233 233; /* ⬅ #e9e9e9 */
+	--color-surface-400: 216 216 216; /* ⬅ #d8d8d8 */
+	--color-surface-500: 199 199 199; /* ⬅ #c7c7c7 */
+	--color-surface-600: 179 179 179; /* ⬅ #b3b3b3 */
+	--color-surface-700: 149 149 149; /* ⬅ #959595 */
+	--color-surface-800: 119 119 119; /* ⬅ #777777 */
+	--color-surface-900: 98 98 98; /* ⬅ #626262 */
+}