@bexis2/bexis2-core-ui 0.0.18 → 0.0.19

package/dist/TableView.svelte

@@ -0,0 +1 @@
+<h1>table</h1>

package/dist/TableView.svelte.d.ts

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  TableViewProps */
+/** @typedef {typeof __propDef.events}  TableViewEvents */
+/** @typedef {typeof __propDef.slots}  TableViewSlots */
+export default class TableView extends SvelteComponentTyped<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type TableViewProps = typeof __propDef.props;
+export type TableViewEvents = typeof __propDef.events;
+export type TableViewSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/components/File/FileIcon.svelte

@@ -0,0 +1,49 @@
+<script>
+
+import Fa from 'svelte-fa'
+import { faFileAudio } from '@fortawesome/free-regular-svg-icons'
+import { faFileVideo } from '@fortawesome/free-regular-svg-icons'
+import { faFileWord } from '@fortawesome/free-regular-svg-icons'
+import { faFilePdf } from '@fortawesome/free-regular-svg-icons'
+import { faFileExcel } from '@fortawesome/free-regular-svg-icons'
+import { faFileAlt } from '@fortawesome/free-regular-svg-icons'
+import { faFileImage } from '@fortawesome/free-regular-svg-icons'
+import { faFileArchive } from '@fortawesome/free-regular-svg-icons'
+
+ export let type = "";
+ 
+</script>
+
+{#if type.includes("excel") || type.includes("spreadsheetml")}
+  <Fa icon={faFileExcel} />
+{/if}
+
+{#if type.includes("text")}
+  <Fa icon={faFileAlt} />
+{/if}
+
+{#if type.includes("image")}
+  <Fa icon={faFileImage} />
+{/if}
+
+{#if type.includes("audio")}
+  <Fa icon={faFileAudio} />
+{/if}
+
+{#if type.includes("video")}
+  <Fa icon={faFileVideo} />
+{/if}
+
+{#if type.includes("word")}
+  <Fa icon={faFileWord} />
+{/if}
+
+{#if type.includes("pdf")}
+  <Fa icon={faFilePdf} />
+{/if}
+
+{#if type.includes("zip")}
+  <Fa icon={faFileArchive} />
+{/if}
+
+

package/dist/components/File/FileIcon.svelte.d.ts

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  FileIconProps */
+/** @typedef {typeof __propDef.events}  FileIconEvents */
+/** @typedef {typeof __propDef.slots}  FileIconSlots */
+export default class FileIcon extends SvelteComponentTyped<{
+    type?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type FileIconProps = typeof __propDef.props;
+export type FileIconEvents = typeof __propDef.events;
+export type FileIconSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        type?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/components/File/FileInfo.svelte

@@ -0,0 +1,14 @@
+<script>
+
+import FileIcon from './FileIcon.svelte';
+
+export let name="";
+export let type = "";
+// export let description;
+export let size = "";
+
+</script>
+
+<div style="font-size:{size}">
+ <FileIcon {type} /> {name}
+</div>

package/dist/components/File/FileInfo.svelte.d.ts

@@ -0,0 +1,27 @@
+/** @typedef {typeof __propDef.props}  FileInfoProps */
+/** @typedef {typeof __propDef.events}  FileInfoEvents */
+/** @typedef {typeof __propDef.slots}  FileInfoSlots */
+export default class FileInfo extends SvelteComponentTyped<{
+    type?: string | undefined;
+    name?: string | undefined;
+    size?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type FileInfoProps = typeof __propDef.props;
+export type FileInfoEvents = typeof __propDef.events;
+export type FileInfoSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        type?: string | undefined;
+        name?: string | undefined;
+        size?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/components/File/FileUploader.svelte

@@ -0,0 +1,135 @@
+<script>import DropZone from "svelte-file-dropzone/Dropzone.svelte";
+import Fa from "svelte-fa/src/fa.svelte";
+import Spinner from "../Spinner/Spinner.svelte";
+import { createEventDispatcher } from "svelte";
+import { faTrash } from "@fortawesome/free-solid-svg-icons";
+import { faSave } from "@fortawesome/free-regular-svg-icons";
+import { faFileUpload } from "@fortawesome/free-solid-svg-icons";
+import { Api } from "../../services/Api.js";
+export let id = 0;
+export let version = 1;
+import { onMount } from "svelte";
+export let start = "";
+export let submit = "";
+export let context = "";
+export let data;
+$:
+  model = data;
+$:
+  submitBt = "submit";
+let maxSize = 0;
+const dispatch = createEventDispatcher();
+let fx;
+let files = { accepted: [], rejected: [] };
+$:
+  files;
+onMount(async () => {
+  console.log("fileupload - OnMount", data);
+  if (!data) {
+    load();
+  } else {
+    model = data;
+  }
+  if (model) {
+    submitBt += context;
+    maxSize = model.maxSize * 1024 * 1024;
+  }
+});
+async function load() {
+  let url = start + "?id=" + id + "&version=" + version;
+  const res = await Api.get(url);
+  model = await res.data();
+  console.log("fileupload", model);
+}
+function handleFilesSelect(e) {
+  console.log("handleFilesSelect", e);
+  console.log("files", files);
+  const { acceptedFiles, fileRejections } = e.detail;
+  files.accepted = [...files.accepted, ...acceptedFiles];
+  files.rejected = [...files.rejected, ...fileRejections];
+  console.log("acceptedFiles", acceptedFiles);
+  console.log("files.accepted", files.accepted);
+  if (fileRejections.length > 0) {
+    console.log("the dropped file is not supported.");
+    console.log(files.rejected);
+    let messages = [""];
+    for (let index = 0; index < fileRejections.length; index++) {
+      const element = fileRejections[index];
+      messages.push(getErrorMessage(element));
+    }
+    console.log(messages);
+    dispatch("error", { messages });
+    files.rejected = [];
+  }
+  if (acceptedFiles.length > 0) {
+    document.getElementById(submitBt)?.click();
+  }
+}
+function getErrorMessage(rejected) {
+  let message = "";
+  message = rejected.file.path + " : ";
+  let errors = rejected.errors;
+  for (let index = 0; index < errors.length; index++) {
+    const error = errors[index];
+    message += error.message;
+  }
+  return message;
+}
+async function handleSubmit() {
+  console.log("SUBMIT");
+  dispatch("submit");
+  let url = submit + "?id=" + id;
+  console.log("SUBMIT");
+  if (files.accepted.length > 0) {
+    console.log(files);
+    const formData = new FormData();
+    formData.append("files", "123");
+    for (var i = 0; i < files.accepted.length; i++) {
+      formData.append(files.accepted[i].name, files.accepted[i]);
+    }
+    const response = await Api.post(url, formData);
+    if (response.status == 200) {
+      dispatch("submited");
+      let message = files.accepted.length + " is/are uploaded";
+      dispatch("success", { text: message });
+      files.accepted = [];
+    }
+  }
+}
+</script>
+
+<form on:submit|preventDefault={handleSubmit}>
+    {#if model}
+      <!--if model exist  -->
+      <div>
+
+        <DropZone 
+          on:drop={handleFilesSelect} 
+          accept={model.accept}
+          multiple={model.multiple}
+          {maxSize}>
+
+          <b style="font-size:xx-large"><Fa icon={faFileUpload}/></b>
+          <span><b>Drag 'n' drop some files here, or click to select files</b>
+          <b>max file : {model.maxSize} mb</b></span>
+          <p>
+            {#if model.accept}
+              {#each model.accept as ext}
+              {ext} ,   
+              {/each}
+            {/if}
+          </p>
+        </DropZone>
+
+      </div>
+
+      <button id="{submitBt}" color="primary" style="display:none" ><Fa icon={faSave}/></button>
+
+    {:else} <!-- while data is not loaded show a loading information -->
+
+      <Spinner/>
+    {/if}
+
+</form> 
+
+

package/dist/components/File/FileUploader.svelte.d.ts

@@ -0,0 +1,27 @@
+import { SvelteComponentTyped } from "svelte";
+import type { FileUploaderModel } from '../../models/Models.js';
+declare const __propDef: {
+    props: {
+        id?: number | undefined;
+        version?: number | undefined;
+        start?: string | undefined;
+        submit?: string | undefined;
+        context?: string | undefined;
+        data: FileUploaderModel | undefined;
+    };
+    events: {
+        error: CustomEvent<any>;
+        submit: CustomEvent<any>;
+        submited: CustomEvent<any>;
+        success: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FileUploaderProps = typeof __propDef.props;
+export type FileUploaderEvents = typeof __propDef.events;
+export type FileUploaderSlots = typeof __propDef.slots;
+export default class FileUploader extends SvelteComponentTyped<FileUploaderProps, FileUploaderEvents, FileUploaderSlots> {
+}
+export {};

package/dist/components/ListView.svelte

@@ -0,0 +1,6 @@
+<script>let result = { name: "david" };
+</script>
+ 
+<h1>MyList</h1>
+{result.name}
+<b>from bexis-lib</b>

package/dist/components/ListView.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ListViewProps = typeof __propDef.props;
+export type ListViewEvents = typeof __propDef.events;
+export type ListViewSlots = typeof __propDef.slots;
+export default class ListView extends SvelteComponentTyped<ListViewProps, ListViewEvents, ListViewSlots> {
+}
+export {};

package/dist/components/Spinner/Spinner.svelte

@@ -0,0 +1,8 @@
+<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>

package/dist/components/Spinner/Spinner.svelte.d.ts

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  SpinnerProps */
+/** @typedef {typeof __propDef.events}  SpinnerEvents */
+/** @typedef {typeof __propDef.slots}  SpinnerSlots */
+export default class Spinner extends SvelteComponentTyped<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type SpinnerProps = typeof __propDef.props;
+export type SpinnerEvents = typeof __propDef.events;
+export type SpinnerSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/css/core.ui.css

@@ -0,0 +1,2 @@
+/*place global styles here */
+html, body { @apply h-full; }

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

@@ -0,0 +1,98 @@
+:root {
+	/* =~= Theme Properties =~= */
+	--theme-font-family-base: system-ui;
+	--theme-font-family-heading: system-ui;
+	--theme-font-color-base: 0 0 0;
+	--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: 0 0 0;
+	--on-secondary: 0 0 0;
+	--on-tertiary: 0 0 0;
+	--on-success: 0 0 0;
+	--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 | #ef4444 */
+	--color-warning-50: 253 227 227; /* ⬅ #fde3e3 */
+	--color-warning-100: 252 218 218; /* ⬅ #fcdada */
+	--color-warning-200: 251 208 208; /* ⬅ #fbd0d0 */
+	--color-warning-300: 249 180 180; /* ⬅ #f9b4b4 */
+	--color-warning-400: 244 124 124; /* ⬅ #f47c7c */
+	--color-warning-500: 239 68 68; /* ⬅ #ef4444 */
+	--color-warning-600: 215 61 61; /* ⬅ #d73d3d */
+	--color-warning-700: 179 51 51; /* ⬅ #b33333 */
+	--color-warning-800: 143 41 41; /* ⬅ #8f2929 */
+	--color-warning-900: 117 33 33; /* ⬅ #752121 */
+	/* 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 | #FFFFFF */
+	--color-surface-50: 255 255 255; /* ⬅ #ffffff */
+	--color-surface-100: 255 255 255; /* ⬅ #ffffff */
+	--color-surface-200: 255 255 255; /* ⬅ #ffffff */
+	--color-surface-300: 255 255 255; /* ⬅ #ffffff */
+	--color-surface-400: 255 255 255; /* ⬅ #ffffff */
+	--color-surface-500: 255 255 255; /* ⬅ #FFFFFF */
+	--color-surface-600: 230 230 230; /* ⬅ #e6e6e6 */
+	--color-surface-700: 191 191 191; /* ⬅ #bfbfbf */
+    /* dark mode surface | #1f2937 */
+	--color-surface-800: 19 25 33; /* ⬅ #131921 */
+	--color-surface-900: 15 20 27; /* ⬅ #0f141b */
+	
+}

package/dist/css/themes/theme-crimson.css

@@ -0,0 +1,100 @@
+/* =~= Crimson Theme - made by GitHub user @ak4zh for the Skeleton community theme contest.  =~= */
+/* https://github.com/skeletonlabs/skeleton/discussions/401 */
+
+:root {
+	/* =~= Theme Styles =~= */
+	--theme-font-family-base: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
+		'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+	--theme-font-family-heading: system-ui;
+	--theme-font-color-base: var(--color-surface-900);
+	--theme-font-color-dark: var(--color-surface-50);
+	--theme-rounded-base: 24px;
+	--theme-rounded-container: 24px;
+	--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: 0 0 0;
+	--on-warning: 0 0 0;
+	--on-error: 0 0 0;
+	--on-surface: 255 255 255;
+	/* =~= Theme Colors  =~= */
+	/* primary | #d4163c */
+	--color-primary-50: 249 220 226; /* ⬅ #f9dce2 */
+	--color-primary-100: 246 208 216; /* ⬅ #f6d0d8 */
+	--color-primary-200: 244 197 206; /* ⬅ #f4c5ce */
+	--color-primary-300: 238 162 177; /* ⬅ #eea2b1 */
+	--color-primary-400: 225 92 119; /* ⬅ #e15c77 */
+	--color-primary-500: 212 22 60; /* ⬅ #d4163c */
+	--color-primary-600: 191 20 54; /* ⬅ #bf1436 */
+	--color-primary-700: 159 17 45; /* ⬅ #9f112d */
+	--color-primary-800: 127 13 36; /* ⬅ #7f0d24 */
+	--color-primary-900: 104 11 29; /* ⬅ #680b1d */
+	/* secondary | #4685af */
+	--color-secondary-50: 227 237 243; /* ⬅ #e3edf3 */
+	--color-secondary-100: 218 231 239; /* ⬅ #dae7ef */
+	--color-secondary-200: 209 225 235; /* ⬅ #d1e1eb */
+	--color-secondary-300: 181 206 223; /* ⬅ #b5cedf */
+	--color-secondary-400: 126 170 199; /* ⬅ #7eaac7 */
+	--color-secondary-500: 70 133 175; /* ⬅ #4685af */
+	--color-secondary-600: 63 120 158; /* ⬅ #3f789e */
+	--color-secondary-700: 53 100 131; /* ⬅ #356483 */
+	--color-secondary-800: 42 80 105; /* ⬅ #2a5069 */
+	--color-secondary-900: 34 65 86; /* ⬅ #224156 */
+	/* tertiary | #c0b6b4 */
+	--color-tertiary-50: 246 244 244; /* ⬅ #f6f4f4 */
+	--color-tertiary-100: 242 240 240; /* ⬅ #f2f0f0 */
+	--color-tertiary-200: 239 237 236; /* ⬅ #efedec */
+	--color-tertiary-300: 230 226 225; /* ⬅ #e6e2e1 */
+	--color-tertiary-400: 211 204 203; /* ⬅ #d3cccb */
+	--color-tertiary-500: 192 182 180; /* ⬅ #c0b6b4 */
+	--color-tertiary-600: 173 164 162; /* ⬅ #ada4a2 */
+	--color-tertiary-700: 144 137 135; /* ⬅ #908987 */
+	--color-tertiary-800: 115 109 108; /* ⬅ #736d6c */
+	--color-tertiary-900: 94 89 88; /* ⬅ #5e5958 */
+	/* success | #c1dd97 */
+	--color-success-50: 246 250 239; /* ⬅ #f6faef */
+	--color-success-100: 243 248 234; /* ⬅ #f3f8ea */
+	--color-success-200: 240 247 229; /* ⬅ #f0f7e5 */
+	--color-success-300: 230 241 213; /* ⬅ #e6f1d5 */
+	--color-success-400: 212 231 182; /* ⬅ #d4e7b6 */
+	--color-success-500: 193 221 151; /* ⬅ #c1dd97 */
+	--color-success-600: 174 199 136; /* ⬅ #aec788 */
+	--color-success-700: 145 166 113; /* ⬅ #91a671 */
+	--color-success-800: 116 133 91; /* ⬅ #74855b */
+	--color-success-900: 95 108 74; /* ⬅ #5f6c4a */
+	/* warning | #e4c25e */
+	--color-warning-50: 251 246 231; /* ⬅ #fbf6e7 */
+	--color-warning-100: 250 243 223; /* ⬅ #faf3df */
+	--color-warning-200: 248 240 215; /* ⬅ #f8f0d7 */
+	--color-warning-300: 244 231 191; /* ⬅ #f4e7bf */
+	--color-warning-400: 236 212 142; /* ⬅ #ecd48e */
+	--color-warning-500: 228 194 94; /* ⬅ #e4c25e */
+	--color-warning-600: 205 175 85; /* ⬅ #cdaf55 */
+	--color-warning-700: 171 146 71; /* ⬅ #ab9247 */
+	--color-warning-800: 137 116 56; /* ⬅ #897438 */
+	--color-warning-900: 112 95 46; /* ⬅ #705f2e */
+	/* error | #d27f81 */
+	--color-error-50: 248 236 236; /* ⬅ #f8ecec */
+	--color-error-100: 246 229 230; /* ⬅ #f6e5e6 */
+	--color-error-200: 244 223 224; /* ⬅ #f4dfe0 */
+	--color-error-300: 237 204 205; /* ⬅ #edcccd */
+	--color-error-400: 224 165 167; /* ⬅ #e0a5a7 */
+	--color-error-500: 210 127 129; /* ⬅ #d27f81 */
+	--color-error-600: 189 114 116; /* ⬅ #bd7274 */
+	--color-error-700: 158 95 97; /* ⬅ #9e5f61 */
+	--color-error-800: 126 76 77; /* ⬅ #7e4c4d */
+	--color-error-900: 103 62 63; /* ⬅ #673e3f */
+	/* surface | #2b2e40 */
+	--color-surface-50: 223 224 226; /* ⬅ #dfe0e2 */
+	--color-surface-100: 213 213 217; /* ⬅ #d5d5d9 */
+	--color-surface-200: 202 203 207; /* ⬅ #cacbcf */
+	--color-surface-300: 170 171 179; /* ⬅ #aaabb3 */
+	--color-surface-400: 107 109 121; /* ⬅ #6b6d79 */
+	--color-surface-500: 43 46 64; /* ⬅ #2b2e40 */
+	--color-surface-600: 39 41 58; /* ⬅ #27293a */
+	--color-surface-700: 32 35 48; /* ⬅ #202330 */
+	--color-surface-800: 26 28 38; /* ⬅ #1a1c26 */
+	--color-surface-900: 21 23 31; /* ⬅ #15171f */
+}