@bexis2/bexis2-core-ui 0.4.99 → 0.4.100

package/README.md

@@ -1,5 +1,12 @@
 # bexis-core-ui
 
+## 0.4.100
+- Big Table
+  - support DB changes
+
+## 0.4.99
+- Support label and titel in each form component
+
 ## 0.4.98
 - Table:
    - fix column read detection

package/dist/components/Table/TableContent.svelte

@@ -68,6 +68,7 @@ const serverSide = server !== void 0 || clientDb;
 let _clientDbInstance = null;
 let clientDbEnabled = clientDb;
 let clientDbReady = false;
+let clientDbInitPromise = null;
 let clientDbInitSource = [];
 let clientDbSeedSize = 0;
 const { sendModel = new Send() } = server ?? {};
@@ -298,6 +299,9 @@ const sortServer = (order, id) => {
 const updateTableWithParams = async () => {
   if (clientDbEnabled) {
     isFetching = true;
+    if (!clientDbReady && clientDbInitPromise) {
+      await clientDbInitPromise;
+    }
     const filtersNormalized = utils.normalizeFilters($filters);
     const q = sendModel?.q || "";
     const offset2 = $pageSize * $pageIndex;
@@ -305,106 +309,6 @@ const updateTableWithParams = async () => {
     if (!_clientDbInstance) {
       _clientDbInstance = new ClientDB(tableId);
     }
-    if (!clientDbReady) {
-      const source = clientDbInitSource.length > 0 ? clientDbInitSource : $data;
-      const getValue = (row, column) => {
-        const dot = String(column || "").replaceAll("%%%", ".");
-        return row[dot] ?? row[column] ?? row[dot.replaceAll(".", "%%%")];
-      };
-      const localMatches = (row) => {
-        if (q && q.length > 0) {
-          const ql = String(q).toLowerCase();
-          let found = false;
-          for (const k in row) {
-            const v = row[k];
-            if (v == null) continue;
-            if (String(v).toLowerCase().includes(ql)) {
-              found = true;
-              break;
-            }
-          }
-          if (!found) return false;
-        }
-        for (const f of filtersNormalized) {
-          const actual = getValue(row, f.column);
-          const val = f.value;
-          if (val == null) continue;
-          const aStr = String(actual ?? "").toLowerCase();
-          const vStr = String(val ?? "").toLowerCase();
-          const aNum = Number(actual);
-          const vNum = Number(val);
-          const aDate = new Date(actual).getTime();
-          const vDate = new Date(val).getTime();
-          switch (f.filterBy) {
-            case "c":
-              if (!aStr.includes(vStr)) return false;
-              break;
-            case "nc":
-              if (aStr.includes(vStr)) return false;
-              break;
-            case "sw":
-              if (!aStr.startsWith(vStr)) return false;
-              break;
-            case "ew":
-              if (!aStr.endsWith(vStr)) return false;
-              break;
-            case "e":
-              if (actual != val) return false;
-              break;
-            case "ne":
-              if (actual == val) return false;
-              break;
-            case "gt":
-              if (Number.isNaN(aNum) || Number.isNaN(vNum) || !(aNum > vNum)) return false;
-              break;
-            case "lt":
-              if (Number.isNaN(aNum) || Number.isNaN(vNum) || !(aNum < vNum)) return false;
-              break;
-            case "gte":
-              if (Number.isNaN(aNum) || Number.isNaN(vNum) || !(aNum >= vNum)) return false;
-              break;
-            case "lte":
-              if (Number.isNaN(aNum) || Number.isNaN(vNum) || !(aNum <= vNum)) return false;
-              break;
-            case "o":
-              if (Number.isNaN(aDate) || Number.isNaN(vDate) || aDate !== vDate) return false;
-              break;
-            case "sf":
-            case "a":
-              if (Number.isNaN(aDate) || Number.isNaN(vDate) || !(aDate >= vDate)) return false;
-              break;
-            case "u":
-            case "b":
-              if (Number.isNaN(aDate) || Number.isNaN(vDate) || !(aDate <= vDate)) return false;
-              break;
-            case "no":
-              if (Number.isNaN(aDate) || Number.isNaN(vDate) || aDate === vDate) return false;
-              break;
-          }
-        }
-        return true;
-      };
-      const filtered = source.filter(localMatches);
-      const order = sendModel?.order || [];
-      if (order.length > 0) {
-        const { column, direction } = order[0];
-        const dir = direction === "desc" ? -1 : 1;
-        filtered.sort((a, b) => {
-          const av = getValue(a, column);
-          const bv = getValue(b, column);
-          if (av == null && bv == null) return 0;
-          if (av == null) return -1 * dir;
-          if (bv == null) return 1 * dir;
-          if (typeof av === "number" && typeof bv === "number") return (av - bv) * dir;
-          return String(av).localeCompare(String(bv)) * dir;
-        });
-      }
-      const localRows = filtered.slice(offset2, offset2 + limit);
-      serverItems?.set(filtered.length);
-      data.set(localRows);
-      isFetching = false;
-      return { rows: localRows, total: filtered.length };
-    }
     const res = await _clientDbInstance.query({
       q,
       filters: filtersNormalized,
@@ -516,10 +420,10 @@ onMount(async () => {
       serverItems?.set(clientDbInitSource.length);
       data.set(firstPage);
       _clientDbInstance = new ClientDB(tableId);
-      _clientDbInstance.init(clientDbInitSource).then(async () => {
-        const result = await updateTableWithParams();
+      clientDbInitPromise = _clientDbInstance.init(clientDbInitSource).then(async () => {
         clientDbReady = true;
         clientDbInitSource = [];
+        const result = await updateTableWithParams();
         return result;
       }).catch(() => {
         clientDbReady = false;

package/dist/components/Table/clientDB.js

@@ -3,7 +3,7 @@ const DB_PREFIX = 'table-db-';
 
 function openDB(name) {
   return new Promise((resolve, reject) => {
-    const req = indexedDB.open(DB_PREFIX + name, 1);
+    const req = indexedDB.open(DB_PREFIX + name);
     req.onupgradeneeded = () => {
       const db = req.result;
       if (!db.objectStoreNames.contains('rows')) {

package/dist/components/Table/tableWorker.js

@@ -4,7 +4,7 @@ const DB_PREFIX = 'table-db-';
 
 function openDB(name) {
   return new Promise((resolve, reject) => {
-    const req = indexedDB.open(DB_PREFIX + name, 1);
+    const req = indexedDB.open(DB_PREFIX + name);
     req.onupgradeneeded = () => {
       const db = req.result;
       if (!db.objectStoreNames.contains('rows')) {

package/dist/css/themes/theme-bexis2.css_old

@@ -0,0 +1,100 @@
+[data-theme='bexis2theme'] {
+	/* =~= Theme Properties =~= */
+	--base-font-family: system-ui;
+	--base-font-color: var(--color-surface-900);
+	--base-font-color-dark: 255 255 255;
+	/*--theme-rounded-base: 4px;
+	--theme-rounded-container: 4px;
+	--theme-border-base: 1px;*/
+	--radius-base: 4px;
+	--radius-container: 4px;
+	--default-border-width: 1px;
+	--default-divide-width: 1px;
+	--default-ring-width: 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: #e3f3f1;
+	--color-primary-100: #daf0ec;
+	--color-primary-200: #d1ece8;
+	--color-primary-300: #b5e0d9;
+	--color-primary-400: #7dc9bd;
+	--color-primary-500: #45b2a1;
+	--color-primary-600: #3ea091;
+	--color-primary-700: #348679;
+	--color-primary-800: #296b61;
+	--color-primary-900: #22574f;
+	/* secondary | #ff9700 */
+	--color-secondary-50: #ffefd9;
+	--color-secondary-100: #ffeacc;
+	--color-secondary-200: #ffe5bf;
+	--color-secondary-300: #ffd599;
+	--color-secondary-400: #ffb64d;
+	--color-secondary-500: #ff9700;
+	--color-secondary-600: #e68800;
+	--color-secondary-700: #bf7100;
+	--color-secondary-800: #995b00;
+	--color-secondary-900: #7d4a00;
+	/* tertiary | #bee1da */
+	--color-tertiary-50: #f5fbf9;
+	--color-tertiary-100: #f2f9f8;
+	--color-tertiary-200: #eff8f6;
+	--color-tertiary-300: #e5f3f0;
+	--color-tertiary-400: #d2eae5;
+	--color-tertiary-500: #bee1da;
+	--color-tertiary-600: #abcbc4;
+	--color-tertiary-700: #8fa9a4;
+	--color-tertiary-800: #728783;
+	--color-tertiary-900: #5d6e6b;
+	/* success | #4BB543 */
+	--color-success-50: #e4f4e3;
+	--color-success-100: #dbf0d9;
+	--color-success-200: #d2edd0;
+	--color-success-300: #b7e1b4;
+	--color-success-400: #81cb7b;
+	--color-success-500: #4bb543;
+	--color-success-600: #44a33c;
+	--color-success-700: #388832;
+	--color-success-800: #2d6d28;
+	--color-success-900: #255921;
+	/* warning | #EAB308 */
+	--color-warning-50: #fcf4da;
+	--color-warning-100: #fbf0ce;
+	--color-warning-200: #faecc1;
+	--color-warning-300: #f7e19c;
+	--color-warning-400: #f0ca52;
+	--color-warning-500: #eab308;
+	--color-warning-600: #d3a107;
+	--color-warning-700: #b08606;
+	--color-warning-800: #8c6b05;
+	--color-warning-900: #735804;
+	/* error | #FF0000 */
+	--color-error-50: #ffd9d9;
+	--color-error-100: #ffcccc;
+	--color-error-200: #ffbfbf;
+	--color-error-300: #ff9999;
+	--color-error-400: #ff4d4d;
+	--color-error-500: #ff0000;
+	--color-error-600: #e60000;
+	--color-error-700: #bf0000;
+	--color-error-800: #990000;
+	--color-error-900: #7d0000;
+	/* surface | #c7c7c7 */
+	--color-surface-50: #f7f7f7;
+	--color-surface-100: #f4f4f4;
+	--color-surface-200: #f1f1f1;
+	--color-surface-300: #e9e9e9;
+	--color-surface-400: #d8d8d8;
+	--color-surface-500: #c7c7c7;
+	--color-surface-600: #b3b3b3;
+	--color-surface-700: #959595;
+	--color-surface-800: #777777;
+	--color-surface-900: #626262;
+}

package/dist/themes/theme-bexis2 copy.d.ts

@@ -0,0 +1,2 @@
+import type { CustomThemeConfig } from '@skeletonlabs/tw-plugin';
+export declare const bexis2theme: CustomThemeConfig;

package/dist/themes/theme-bexis2 copy.js

@@ -0,0 +1,112 @@
+export const bexis2theme = {
+    name: 'bexis2theme',
+    properties: {
+        // =~= 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': '#ffffff',
+        '--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': '255 255 255',
+        // =~= Theme Colors  =~=
+        // primary | #45b2a1
+        '--color-primary-50': '#e3f3f1',
+        '--color-primary-100': '#daf0ec',
+        '--color-primary-200': '#d1ece8',
+        '--color-primary-300': '#b5e0d9',
+        '--color-primary-400': '#7dc9bd',
+        '--color-primary-500': '#45b2a1',
+        '--color-primary-600': '#3ea091',
+        '--color-primary-700': '#348679',
+        '--color-primary-800': '#296b61',
+        '--color-primary-900': '#22574f',
+        // secondary | #ff9700
+        '--color-secondary-50': '#ffefd9',
+        '--color-secondary-100': '#ffeacc',
+        '--color-secondary-200': '#ffe5bf',
+        '--color-secondary-300': '#ffd599',
+        '--color-secondary-400': '#ffb64d',
+        '--color-secondary-500': '#ff9700',
+        '--color-secondary-600': '#e68800',
+        '--color-secondary-700': '#bf7100',
+        '--color-secondary-800': '#995b00',
+        '--color-secondary-900': '#7d4a00',
+        // tertiary | #bee1da
+        '--color-tertiary-50': '#f5fbf9',
+        '--color-tertiary-100': '#f2f9f8',
+        '--color-tertiary-200': '#eff8f6',
+        '--color-tertiary-300': '#e5f3f0',
+        '--color-tertiary-400': '#d2eae5',
+        '--color-tertiary-500': '#bee1da',
+        '--color-tertiary-600': '#abcbc4',
+        '--color-tertiary-700': '#8fa9a4',
+        '--color-tertiary-800': '#728783',
+        '--color-tertiary-900': '#5d6e6b',
+        // success | #4BB543
+        '--color-success-50': '#e4f4e3',
+        '--color-success-100': '#dbf0d9',
+        '--color-success-200': '#d2edd0',
+        '--color-success-300': '#b7e1b4',
+        '--color-success-400': '#81cb7b',
+        '--color-success-500': '#4bb543',
+        '--color-success-600': '#44a33c',
+        '--color-success-700': '#388832',
+        '--color-success-800': '#2d6d28',
+        '--color-success-900': '#255921',
+        // warning | #EAB308
+        '--color-warning-50': '#fcf4da',
+        '--color-warning-100': '#fbf0ce',
+        '--color-warning-200': '#faecc1',
+        '--color-warning-300': '#f7e19c',
+        '--color-warning-400': '#f0ca52',
+        '--color-warning-500': '#eab308',
+        '--color-warning-600': '#d3a107',
+        '--color-warning-700': '#b08606',
+        '--color-warning-800': '#8c6b05',
+        '--color-warning-900': '#735804',
+        // error | #FF0000
+        '--color-error-50': '#ffd9d9',
+        '--color-error-100': '#ffcccc',
+        '--color-error-200': '#ffbfbf',
+        '--color-error-300': '#ff9999',
+        '--color-error-400': '#ff4d4d',
+        '--color-error-500': '#ff0000',
+        '--color-error-600': '#e60000',
+        '--color-error-700': '#bf0000',
+        '--color-error-800': '#990000',
+        '--color-error-900': '#7d0000',
+        // surface | #c7c7c7
+        '--color-surface-50': '#f7f7f7',
+        '--color-surface-100': '#f4f4f4',
+        '--color-surface-200': '#f1f1f1',
+        '--color-surface-300': '#e9e9e9',
+        '--color-surface-400': '#d8d8d8',
+        '--color-surface-500': '#c7c7c7',
+        '--color-surface-600': '#b3b3b3',
+        '--color-surface-700': '#959595',
+        '--color-surface-800': '#777777',
+        '--color-surface-900': '#626262'
+    },
+    properties_dark: {
+        // surface | #2e2e2e
+        '--color-surface-50': '#e0e0e0',
+        '--color-surface-100': '#d5d5d5',
+        '--color-surface-200': '#cbcbcb',
+        '--color-surface-300': '#ababab',
+        '--color-surface-400': '#6d6d6d',
+        '--color-surface-500': '#2e2e2e',
+        '--color-surface-600': '#292929',
+        '--color-surface-700': '#232323',
+        '--color-surface-800': '#1c1c1c',
+        '--color-surface-900': '#171717'
+    }
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@bexis2/bexis2-core-ui",
-	"version": "0.4.99",
+	"version": "0.4.100",
 	"private": false,
 	"description": "Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).",
 	"keywords": [

package/src/lib/components/Table/TableContent.svelte

@@ -67,6 +67,7 @@
 	let _clientDbInstance: any = null;
 	let clientDbEnabled = clientDb;
 	let clientDbReady = false;
+	let clientDbInitPromise: Promise<any> | null = null;
 	let clientDbInitSource: any[] = [];
 	let clientDbSeedSize = 0;
 	const { sendModel = new Send() } = server ?? {};
@@ -367,6 +368,9 @@
 		// If we're using a client-side DB (worker + IndexedDB), route queries there
 		if (clientDbEnabled) {
 			isFetching = true;
+			if (!clientDbReady && clientDbInitPromise) {
+				await clientDbInitPromise;
+			}
 			const filtersNormalized = utils.normalizeFilters($filters);
 			const q = sendModel?.q || '';
 			const offset = $pageSize * $pageIndex;
@@ -376,116 +380,6 @@
 				_clientDbInstance = new ClientDB(tableId);
 			}
 
-			if (!clientDbReady) {
-				// Fallback while DB is still importing: apply local search/filter/sort for responsiveness.
-				const source = clientDbInitSource.length > 0 ? clientDbInitSource : $data;
-
-				const getValue = (row, column) => {
-					const dot = String(column || '').replaceAll('%%%', '.');
-					return row[dot] ?? row[column] ?? row[dot.replaceAll('.', '%%%')];
-				};
-
-				const localMatches = (row) => {
-					if (q && q.length > 0) {
-						const ql = String(q).toLowerCase();
-						let found = false;
-						for (const k in row) {
-							const v = row[k];
-							if (v == null) continue;
-							if (String(v).toLowerCase().includes(ql)) {
-								found = true;
-								break;
-							}
-						}
-						if (!found) return false;
-					}
-
-					for (const f of filtersNormalized) {
-						const actual = getValue(row, f.column);
-						const val = f.value;
-						if (val == null) continue;
-
-						const aStr = String(actual ?? '').toLowerCase();
-						const vStr = String(val ?? '').toLowerCase();
-						const aNum = Number(actual);
-						const vNum = Number(val);
-						const aDate = new Date(actual as any).getTime();
-						const vDate = new Date(val as any).getTime();
-
-						switch (f.filterBy) {
-							case 'c':
-								if (!aStr.includes(vStr)) return false;
-								break;
-							case 'nc':
-								if (aStr.includes(vStr)) return false;
-								break;
-							case 'sw':
-								if (!aStr.startsWith(vStr)) return false;
-								break;
-							case 'ew':
-								if (!aStr.endsWith(vStr)) return false;
-								break;
-							case 'e':
-								if (actual != val) return false;
-								break;
-							case 'ne':
-								if (actual == val) return false;
-								break;
-							case 'gt':
-								if (Number.isNaN(aNum) || Number.isNaN(vNum) || !(aNum > vNum)) return false;
-								break;
-							case 'lt':
-								if (Number.isNaN(aNum) || Number.isNaN(vNum) || !(aNum < vNum)) return false;
-								break;
-							case 'gte':
-								if (Number.isNaN(aNum) || Number.isNaN(vNum) || !(aNum >= vNum)) return false;
-								break;
-							case 'lte':
-								if (Number.isNaN(aNum) || Number.isNaN(vNum) || !(aNum <= vNum)) return false;
-								break;
-							case 'o':
-								if (Number.isNaN(aDate) || Number.isNaN(vDate) || aDate !== vDate) return false;
-								break;
-							case 'sf':
-							case 'a':
-								if (Number.isNaN(aDate) || Number.isNaN(vDate) || !(aDate >= vDate)) return false;
-								break;
-							case 'u':
-							case 'b':
-								if (Number.isNaN(aDate) || Number.isNaN(vDate) || !(aDate <= vDate)) return false;
-								break;
-							case 'no':
-								if (Number.isNaN(aDate) || Number.isNaN(vDate) || aDate === vDate) return false;
-								break;
-						}
-					}
-
-					return true;
-				};
-
-				const filtered = source.filter(localMatches);
-				const order = sendModel?.order || [];
-				if (order.length > 0) {
-					const { column, direction } = order[0];
-					const dir = direction === 'desc' ? -1 : 1;
-					filtered.sort((a, b) => {
-						const av = getValue(a, column);
-						const bv = getValue(b, column);
-						if (av == null && bv == null) return 0;
-						if (av == null) return -1 * dir;
-						if (bv == null) return 1 * dir;
-						if (typeof av === 'number' && typeof bv === 'number') return (av - bv) * dir;
-						return String(av).localeCompare(String(bv)) * dir;
-					});
-				}
-
-				const localRows = filtered.slice(offset, offset + limit);
-				serverItems?.set(filtered.length);
-				data.set(localRows);
-				isFetching = false;
-				return { rows: localRows, total: filtered.length };
-			}
-
 			const res = await _clientDbInstance.query({
 				q,
 				filters: filtersNormalized,
@@ -626,13 +520,13 @@
 				data.set(firstPage);
 
 				_clientDbInstance = new ClientDB(tableId);
-				_clientDbInstance
+				clientDbInitPromise = _clientDbInstance
 					.init(clientDbInitSource)
 					.then(async () => {
-						// Only mark ready and release seed after the first DB-backed query succeeds.
-						const result = await updateTableWithParams();
 						clientDbReady = true;
+						// Release the seed before refreshing so paging and filtering always query IndexedDB.
 						clientDbInitSource = [];
+						const result = await updateTableWithParams();
 						return result;
 					})
 					.catch(() => {

package/src/lib/components/Table/clientDB.js

@@ -3,7 +3,7 @@ const DB_PREFIX = 'table-db-';
 
 function openDB(name) {
   return new Promise((resolve, reject) => {
-    const req = indexedDB.open(DB_PREFIX + name, 1);
+    const req = indexedDB.open(DB_PREFIX + name);
     req.onupgradeneeded = () => {
       const db = req.result;
       if (!db.objectStoreNames.contains('rows')) {

package/src/lib/components/Table/tableWorker.js

@@ -4,7 +4,7 @@ const DB_PREFIX = 'table-db-';
 
 function openDB(name) {
   return new Promise((resolve, reject) => {
-    const req = indexedDB.open(DB_PREFIX + name, 1);
+    const req = indexedDB.open(DB_PREFIX + name);
     req.onupgradeneeded = () => {
       const db = req.result;
       if (!db.objectStoreNames.contains('rows')) {

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

@@ -0,0 +1,100 @@
+[data-theme='bexis2theme'] {
+	/* =~= Theme Properties =~= */
+	--base-font-family: system-ui;
+	--base-font-color: var(--color-surface-900);
+	--base-font-color-dark: 255 255 255;
+	/*--theme-rounded-base: 4px;
+	--theme-rounded-container: 4px;
+	--theme-border-base: 1px;*/
+	--radius-base: 4px;
+	--radius-container: 4px;
+	--default-border-width: 1px;
+	--default-divide-width: 1px;
+	--default-ring-width: 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: #e3f3f1;
+	--color-primary-100: #daf0ec;
+	--color-primary-200: #d1ece8;
+	--color-primary-300: #b5e0d9;
+	--color-primary-400: #7dc9bd;
+	--color-primary-500: #45b2a1;
+	--color-primary-600: #3ea091;
+	--color-primary-700: #348679;
+	--color-primary-800: #296b61;
+	--color-primary-900: #22574f;
+	/* secondary | #ff9700 */
+	--color-secondary-50: #ffefd9;
+	--color-secondary-100: #ffeacc;
+	--color-secondary-200: #ffe5bf;
+	--color-secondary-300: #ffd599;
+	--color-secondary-400: #ffb64d;
+	--color-secondary-500: #ff9700;
+	--color-secondary-600: #e68800;
+	--color-secondary-700: #bf7100;
+	--color-secondary-800: #995b00;
+	--color-secondary-900: #7d4a00;
+	/* tertiary | #bee1da */
+	--color-tertiary-50: #f5fbf9;
+	--color-tertiary-100: #f2f9f8;
+	--color-tertiary-200: #eff8f6;
+	--color-tertiary-300: #e5f3f0;
+	--color-tertiary-400: #d2eae5;
+	--color-tertiary-500: #bee1da;
+	--color-tertiary-600: #abcbc4;
+	--color-tertiary-700: #8fa9a4;
+	--color-tertiary-800: #728783;
+	--color-tertiary-900: #5d6e6b;
+	/* success | #4BB543 */
+	--color-success-50: #e4f4e3;
+	--color-success-100: #dbf0d9;
+	--color-success-200: #d2edd0;
+	--color-success-300: #b7e1b4;
+	--color-success-400: #81cb7b;
+	--color-success-500: #4bb543;
+	--color-success-600: #44a33c;
+	--color-success-700: #388832;
+	--color-success-800: #2d6d28;
+	--color-success-900: #255921;
+	/* warning | #EAB308 */
+	--color-warning-50: #fcf4da;
+	--color-warning-100: #fbf0ce;
+	--color-warning-200: #faecc1;
+	--color-warning-300: #f7e19c;
+	--color-warning-400: #f0ca52;
+	--color-warning-500: #eab308;
+	--color-warning-600: #d3a107;
+	--color-warning-700: #b08606;
+	--color-warning-800: #8c6b05;
+	--color-warning-900: #735804;
+	/* error | #FF0000 */
+	--color-error-50: #ffd9d9;
+	--color-error-100: #ffcccc;
+	--color-error-200: #ffbfbf;
+	--color-error-300: #ff9999;
+	--color-error-400: #ff4d4d;
+	--color-error-500: #ff0000;
+	--color-error-600: #e60000;
+	--color-error-700: #bf0000;
+	--color-error-800: #990000;
+	--color-error-900: #7d0000;
+	/* surface | #c7c7c7 */
+	--color-surface-50: #f7f7f7;
+	--color-surface-100: #f4f4f4;
+	--color-surface-200: #f1f1f1;
+	--color-surface-300: #e9e9e9;
+	--color-surface-400: #d8d8d8;
+	--color-surface-500: #c7c7c7;
+	--color-surface-600: #b3b3b3;
+	--color-surface-700: #959595;
+	--color-surface-800: #777777;
+	--color-surface-900: #626262;
+}

package/src/lib/themes/theme-bexis2 copy.ts

@@ -0,0 +1,114 @@
+import type { CustomThemeConfig } from '@skeletonlabs/tw-plugin';
+
+export const bexis2theme: CustomThemeConfig = {
+	name: 'bexis2theme',
+	properties: {
+		// =~= 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': '#ffffff',
+		'--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': '255 255 255',
+		// =~= Theme Colors  =~=
+		// primary | #45b2a1
+		'--color-primary-50': '#e3f3f1',
+		'--color-primary-100': '#daf0ec',
+		'--color-primary-200': '#d1ece8',
+		'--color-primary-300': '#b5e0d9',
+		'--color-primary-400': '#7dc9bd',
+		'--color-primary-500': '#45b2a1',
+		'--color-primary-600': '#3ea091',
+		'--color-primary-700': '#348679',
+		'--color-primary-800': '#296b61',
+		'--color-primary-900': '#22574f',
+		// secondary | #ff9700
+		'--color-secondary-50': '#ffefd9',
+		'--color-secondary-100': '#ffeacc',
+		'--color-secondary-200': '#ffe5bf',
+		'--color-secondary-300': '#ffd599',
+		'--color-secondary-400': '#ffb64d',
+		'--color-secondary-500': '#ff9700',
+		'--color-secondary-600': '#e68800',
+		'--color-secondary-700': '#bf7100',
+		'--color-secondary-800': '#995b00',
+		'--color-secondary-900': '#7d4a00',
+		// tertiary | #bee1da
+		'--color-tertiary-50': '#f5fbf9',
+		'--color-tertiary-100': '#f2f9f8',
+		'--color-tertiary-200': '#eff8f6',
+		'--color-tertiary-300': '#e5f3f0',
+		'--color-tertiary-400': '#d2eae5',
+		'--color-tertiary-500': '#bee1da',
+		'--color-tertiary-600': '#abcbc4',
+		'--color-tertiary-700': '#8fa9a4',
+		'--color-tertiary-800': '#728783',
+		'--color-tertiary-900': '#5d6e6b',
+		// success | #4BB543
+		'--color-success-50': '#e4f4e3',
+		'--color-success-100': '#dbf0d9',
+		'--color-success-200': '#d2edd0',
+		'--color-success-300': '#b7e1b4',
+		'--color-success-400': '#81cb7b',
+		'--color-success-500': '#4bb543',
+		'--color-success-600': '#44a33c',
+		'--color-success-700': '#388832',
+		'--color-success-800': '#2d6d28',
+		'--color-success-900': '#255921',
+		// warning | #EAB308
+		'--color-warning-50': '#fcf4da',
+		'--color-warning-100': '#fbf0ce',
+		'--color-warning-200': '#faecc1',
+		'--color-warning-300': '#f7e19c',
+		'--color-warning-400': '#f0ca52',
+		'--color-warning-500': '#eab308',
+		'--color-warning-600': '#d3a107',
+		'--color-warning-700': '#b08606',
+		'--color-warning-800': '#8c6b05',
+		'--color-warning-900': '#735804',
+		// error | #FF0000
+		'--color-error-50': '#ffd9d9',
+		'--color-error-100': '#ffcccc',
+		'--color-error-200': '#ffbfbf',
+		'--color-error-300': '#ff9999',
+		'--color-error-400': '#ff4d4d',
+		'--color-error-500': '#ff0000',
+		'--color-error-600': '#e60000',
+		'--color-error-700': '#bf0000',
+		'--color-error-800': '#990000',
+		'--color-error-900': '#7d0000',
+		// surface | #c7c7c7
+		'--color-surface-50': '#f7f7f7',
+		'--color-surface-100': '#f4f4f4',
+		'--color-surface-200': '#f1f1f1',
+		'--color-surface-300': '#e9e9e9',
+		'--color-surface-400': '#d8d8d8',
+		'--color-surface-500': '#c7c7c7',
+		'--color-surface-600': '#b3b3b3',
+		'--color-surface-700': '#959595',
+		'--color-surface-800': '#777777',
+		'--color-surface-900': '#626262'
+	},
+	properties_dark: {
+		// surface | #2e2e2e
+		'--color-surface-50': '#e0e0e0',
+		'--color-surface-100': '#d5d5d5',
+		'--color-surface-200': '#cbcbcb',
+		'--color-surface-300': '#ababab',
+		'--color-surface-400': '#6d6d6d',
+		'--color-surface-500': '#2e2e2e',
+		'--color-surface-600': '#292929',
+		'--color-surface-700': '#232323',
+		'--color-surface-800': '#1c1c1c',
+		'--color-surface-900': '#171717'
+	}
+};