@bexis2/bexis2-core-ui 0.0.2 → 0.0.4

package/src/lib/components/File/FileUploader.svelte

@@ -0,0 +1,217 @@
+<script type="ts">
+
+import type { FileUploaderModel, FileInfo, Files} from '../../models/Models.js'
+
+
+import DropZone from "svelte-file-dropzone/Dropzone.svelte";
+import {Fa} from 'svelte-fa'
+
+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 description="";
+// export let status=0;
+
+
+//action to load fileupload model
+export let start="";
+//action to save selected file 
+export let submit="";
+
+export let context="";
+
+export let data:FileUploaderModel | undefined;
+
+$:model= data;
+$:submitBt ="submit";
+
+let maxSize=0;
+
+const dispatch = createEventDispatcher();
+
+let fx:FileInfo[]
+
+let files: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
+  }
+
+})
+
+// load modal from server 
+async function load()
+{
+  let url = start+"?id="+id+"&version="+version;
+  
+  // load menu froms server
+  const res = await Api.get(url);
+  model = await res.json();
+
+  console.log("fileupload",model);
+  
+
+}
+
+function handleFilesSelect(e:any) {
+
+  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)
+  {
+    //alert("the dropped file is not supported");
+    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})
+    //list up the errors somewhere
+    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(model);
+    // console.log(url);
+    console.log("SUBMIT");
+
+    if (files.accepted.length > 0) {
+
+      console.log(files);
+
+      const formData = new FormData();
+      formData.append("files","123"); 
+      // Looping over all files and add it to FormData object  
+      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/src/lib/components/ListView.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+
+type x={
+ name:string
+}
+
+let result:x = {name:"david"}
+
+</script>
+ 
+<h1>MyList</h1>
+{result.name}
+<b>from bexis-lib</b>

package/src/lib/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/src/lib/css/core.ui.postcss

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

package/src/lib/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 */
+}

package/src/lib/css/themes/theme-gold-nouveau.css

@@ -0,0 +1,140 @@
+/* =~= Gold Nouveau - made by GitHub user @Sarenor for the Skeleton community theme contest.  =~= */
+/* https://github.com/skeletonlabs/skeleton/discussions/401 */
+
+/* https://fonts.google.com/specimen/Quicksand?query=Quicksand */
+@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap');
+
+/* =~= Gold Nouveau =~= */
+:root {
+	/* =~= Theme Properties =~= */
+	--theme-font-family-base: system-ui, sans-serif;
+	--theme-font-family-heading: 'Quicksand', sans-serif;
+	--theme-font-color-base: var(--color-surface-900);
+	--theme-font-color-dark: var(--color-surface-50);
+	--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: 255 255 255;
+	--on-success: 0 0 0;
+	--on-warning: 0 0 0;
+	--on-error: 255 255 255;
+	--on-surface: 255 255 255;
+	/* =~= Theme Colors  =~= */
+	/* primary | #744aa1 */
+	--color-primary-50: 250 248 252; /* ⬅ #faf8fc */
+	--color-primary-100: 242 238 247; /* ⬅ #f2eef7 */
+	--color-primary-200: 229 220 239; /* ⬅ #e5dcef */
+	--color-primary-300: 209 192 226; /* ⬅ #d1c0e2 */
+	--color-primary-400: 162 129 197; /* ⬅ #a281c5 */
+	--color-primary-500: 116 74 161; /* ⬅ #744aa1 */
+	--color-primary-600: 83 53 115; /* ⬅ #533573 */
+	--color-primary-700: 60 39 84; /* ⬅ #3c2754 */
+	--color-primary-800: 35 22 49; /* ⬅ #231631 */
+	--color-primary-900: 18 11 24; /* ⬅ #120b18 */
+	/* secondary | #0672e5 */
+	--color-secondary-50: 218 234 251; /* ⬅ #daeafb */
+	--color-secondary-100: 205 227 250; /* ⬅ #cde3fa */
+	--color-secondary-200: 193 220 249; /* ⬅ #c1dcf9 */
+	--color-secondary-300: 155 199 245; /* ⬅ #9bc7f5 */
+	--color-secondary-400: 81 156 237; /* ⬅ #519ced */
+	--color-secondary-500: 6 114 229; /* ⬅ #0672e5 */
+	--color-secondary-600: 5 103 206; /* ⬅ #0567ce */
+	--color-secondary-700: 5 86 172; /* ⬅ #0556ac */
+	--color-secondary-800: 4 68 137; /* ⬅ #044489 */
+	--color-secondary-900: 3 56 112; /* ⬅ #033870 */
+	/* tertiary | #7f78dd */
+	--color-tertiary-50: 236 235 250; /* ⬅ #ecebfa */
+	--color-tertiary-100: 229 228 248; /* ⬅ #e5e4f8 */
+	--color-tertiary-200: 223 221 247; /* ⬅ #dfddf7 */
+	--color-tertiary-300: 204 201 241; /* ⬅ #ccc9f1 */
+	--color-tertiary-400: 165 161 231; /* ⬅ #a5a1e7 */
+	--color-tertiary-500: 127 120 221; /* ⬅ #7f78dd */
+	--color-tertiary-600: 114 108 199; /* ⬅ #726cc7 */
+	--color-tertiary-700: 95 90 166; /* ⬅ #5f5aa6 */
+	--color-tertiary-800: 76 72 133; /* ⬅ #4c4885 */
+	--color-tertiary-900: 62 59 108; /* ⬅ #3e3b6c */
+	/* success | #72c585 */
+	--color-success-50: 234 246 237; /* ⬅ #eaf6ed */
+	--color-success-100: 227 243 231; /* ⬅ #e3f3e7 */
+	--color-success-200: 220 241 225; /* ⬅ #dcf1e1 */
+	--color-success-300: 199 232 206; /* ⬅ #c7e8ce */
+	--color-success-400: 156 214 170; /* ⬅ #9cd6aa */
+	--color-success-500: 114 197 133; /* ⬅ #72c585 */
+	--color-success-600: 103 177 120; /* ⬅ #67b178 */
+	--color-success-700: 86 148 100; /* ⬅ #569464 */
+	--color-success-800: 68 118 80; /* ⬅ #447650 */
+	--color-success-900: 56 97 65; /* ⬅ #386141 */
+	/* warning | #e77f08 */
+	--color-warning-50: 251 236 218; /* ⬅ #fbecda */
+	--color-warning-100: 250 229 206; /* ⬅ #fae5ce */
+	--color-warning-200: 249 223 193; /* ⬅ #f9dfc1 */
+	--color-warning-300: 245 204 156; /* ⬅ #f5cc9c */
+	--color-warning-400: 238 165 82; /* ⬅ #eea552 */
+	--color-warning-500: 231 127 8; /* ⬅ #e77f08 */
+	--color-warning-600: 208 114 7; /* ⬅ #d07207 */
+	--color-warning-700: 173 95 6; /* ⬅ #ad5f06 */
+	--color-warning-800: 139 76 5; /* ⬅ #8b4c05 */
+	--color-warning-900: 113 62 4; /* ⬅ #713e04 */
+	/* error | #8f0f22 */
+	--color-error-50: 238 219 222; /* ⬅ #eedbde */
+	--color-error-100: 233 207 211; /* ⬅ #e9cfd3 */
+	--color-error-200: 227 195 200; /* ⬅ #e3c3c8 */
+	--color-error-300: 210 159 167; /* ⬅ #d29fa7 */
+	--color-error-400: 177 87 100; /* ⬅ #b15764 */
+	--color-error-500: 143 15 34; /* ⬅ #8f0f22 */
+	--color-error-600: 129 14 31; /* ⬅ #810e1f */
+	--color-error-700: 107 11 26; /* ⬅ #6b0b1a */
+	--color-error-800: 86 9 20; /* ⬅ #560914 */
+	--color-error-900: 70 7 17; /* ⬅ #460711 */
+	/* surface | #744aa1 */
+	--color-surface-50: 250 248 252; /* ⬅ #faf8fc */
+	--color-surface-100: 242 238 247; /* ⬅ #f2eef7 */
+	--color-surface-200: 229 220 239; /* ⬅ #e5dcef */
+	--color-surface-300: 209 192 226; /* ⬅ #d1c0e2 */
+	--color-surface-400: 162 129 197; /* ⬅ #a281c5 */
+	--color-surface-500: 116 74 161; /* ⬅ #744aa1 */
+	--color-surface-600: 83 53 115; /* ⬅ #533573 */
+	--color-surface-700: 60 39 84; /* ⬅ #3c2754 */
+	--color-surface-800: 35 22 49; /* ⬅ #231631 */
+	--color-surface-900: 18 11 24; /* ⬅ #120b18 */
+}
+
+/* =~= Gold Nouveau (dark mode overrides) =~= */
+.dark [data-theme='gold-nouveau'] {
+	/* =~= Theme On-X Colors =~= */
+	--on-primary: 0 0 0;
+	/* =~= Theme Colors  =~= */
+	/* primary | #e6c833 */
+	--color-primary-50: 251 247 224; /* ⬅ #fbf7e0 */
+	--color-primary-100: 250 244 214; /* ⬅ #faf4d6 */
+	--color-primary-200: 249 241 204; /* ⬅ #f9f1cc */
+	--color-primary-300: 245 233 173; /* ⬅ #f5e9ad */
+	--color-primary-400: 238 217 112; /* ⬅ #eed970 */
+	--color-primary-500: 230 200 51; /* ⬅ #e6c833 */
+	--color-primary-600: 207 180 46; /* ⬅ #cfb42e */
+	--color-primary-700: 173 150 38; /* ⬅ #ad9626 */
+	--color-primary-800: 138 120 31; /* ⬅ #8a781f */
+	--color-primary-900: 113 98 25; /* ⬅ #716219 */
+}
+
+/* Headings */
+[data-theme='gold-nouveau'] h1,
+[data-theme='gold-nouveau'] h2,
+[data-theme='gold-nouveau'] h3,
+[data-theme='gold-nouveau'] h4,
+[data-theme='gold-nouveau'] h5,
+[data-theme='gold-nouveau'] h6 {
+	font-weight: bold;
+}
+
+/* Applied to body with `<body data-theme="gold-nouveau">` */
+/* Created with: https://csshero.org/mesher/ */
+/* prettier-ignore */
+[data-theme='gold-nouveau'] {
+	background-image:
+		radial-gradient(at 0% 100%, rgba(var(--color-secondary-500) / 0.33) 0px, transparent 50%),
+		radial-gradient(at 98% 100%, rgba(var(--color-error-500) / 0.33) 0px, transparent 50%);
+}

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

@@ -0,0 +1,111 @@
+/* =~= Hamlindigo Theme - made by GitHub user @rcgy for the Skeleton community. Go watch Better Call Saul.  =~= */
+/* https://github.com/skeletonlabs/skeleton/discussions/401 */
+
+@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800&display=swap');
+
+:root {
+	/* =~= Hamlindigo Theme | Custom =~= */
+	--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: 'Playfair Display', serif;
+	--theme-font-color-base: 0 0 0;
+	--theme-font-color-dark: 255 255 255;
+	--theme-rounded-base: 2px;
+	--theme-rounded-container: 2px;
+	--theme-border-base: 2px;
+	/* =~= Theme On-X Colors =~= */
+	--on-primary: 0 0 0;
+	--on-secondary: 255 255 255;
+	--on-tertiary: 255 255 255;
+	--on-success: 255 255 255;
+	--on-warning: 0 0 0;
+	--on-error: 255 255 255;
+	--on-surface: 255 255 255;
+	/* =~= Theme Colors  =~= */
+	/* primary | #a8bef1 */
+	--color-primary-50: 242 245 253; /* ⬅ #f2f5fd */
+	--color-primary-100: 238 242 252; /* ⬅ #eef2fc */
+	--color-primary-200: 233 239 252; /* ⬅ #e9effc */
+	--color-primary-300: 220 229 249; /* ⬅ #dce5f9 */
+	--color-primary-400: 194 210 245; /* ⬅ #c2d2f5 */
+	--color-primary-500: 168 190 241; /* ⬅ #a8bef1 */
+	--color-primary-600: 151 171 217; /* ⬅ #97abd9 */
+	--color-primary-700: 126 143 181; /* ⬅ #7e8fb5 */
+	--color-primary-800: 101 114 145; /* ⬅ #657291 */
+	--color-primary-900: 82 93 118; /* ⬅ #525d76 */
+	/* secondary | #a48e5b */
+	--color-secondary-50: 241 238 230; /* ⬅ #f1eee6 */
+	--color-secondary-100: 237 232 222; /* ⬅ #ede8de */
+	--color-secondary-200: 232 227 214; /* ⬅ #e8e3d6 */
+	--color-secondary-300: 219 210 189; /* ⬅ #dbd2bd */
+	--color-secondary-400: 191 176 140; /* ⬅ #bfb08c */
+	--color-secondary-500: 164 142 91; /* ⬅ #a48e5b */
+	--color-secondary-600: 148 128 82; /* ⬅ #948052 */
+	--color-secondary-700: 123 107 68; /* ⬅ #7b6b44 */
+	--color-secondary-800: 98 85 55; /* ⬅ #625537 */
+	--color-secondary-900: 80 70 45; /* ⬅ #50462d */
+	/* tertiary | #6197a3 */
+	--color-tertiary-50: 231 239 241; /* ⬅ #e7eff1 */
+	--color-tertiary-100: 223 234 237; /* ⬅ #dfeaed */
+	--color-tertiary-200: 216 229 232; /* ⬅ #d8e5e8 */
+	--color-tertiary-300: 192 213 218; /* ⬅ #c0d5da */
+	--color-tertiary-400: 144 182 191; /* ⬅ #90b6bf */
+	--color-tertiary-500: 97 151 163; /* ⬅ #6197a3 */
+	--color-tertiary-600: 87 136 147; /* ⬅ #578893 */
+	--color-tertiary-700: 73 113 122; /* ⬅ #49717a */
+	--color-tertiary-800: 58 91 98; /* ⬅ #3a5b62 */
+	--color-tertiary-900: 48 74 80; /* ⬅ #304a50 */
+	/* success | #47947d */
+	--color-success-50: 227 239 236; /* ⬅ #e3efec */
+	--color-success-100: 218 234 229; /* ⬅ #daeae5 */
+	--color-success-200: 209 228 223; /* ⬅ #d1e4df */
+	--color-success-300: 181 212 203; /* ⬅ #b5d4cb */
+	--color-success-400: 126 180 164; /* ⬅ #7eb4a4 */
+	--color-success-500: 71 148 125; /* ⬅ #47947d */
+	--color-success-600: 64 133 113; /* ⬅ #408571 */
+	--color-success-700: 53 111 94; /* ⬅ #356f5e */
+	--color-success-800: 43 89 75; /* ⬅ #2b594b */
+	--color-success-900: 35 73 61; /* ⬅ #23493d */
+	/* warning | #daa93e */
+	--color-warning-50: 249 242 226; /* ⬅ #f9f2e2 */
+	--color-warning-100: 248 238 216; /* ⬅ #f8eed8 */
+	--color-warning-200: 246 234 207; /* ⬅ #f6eacf */
+	--color-warning-300: 240 221 178; /* ⬅ #f0ddb2 */
+	--color-warning-400: 229 195 120; /* ⬅ #e5c378 */
+	--color-warning-500: 218 169 62; /* ⬅ #daa93e */
+	--color-warning-600: 196 152 56; /* ⬅ #c49838 */
+	--color-warning-700: 164 127 47; /* ⬅ #a47f2f */
+	--color-warning-800: 131 101 37; /* ⬅ #836525 */
+	--color-warning-900: 107 83 30; /* ⬅ #6b531e */
+	/* error | #a26175 */
+	--color-error-50: 241 231 234; /* ⬅ #f1e7ea */
+	--color-error-100: 236 223 227; /* ⬅ #ecdfe3 */
+	--color-error-200: 232 216 221; /* ⬅ #e8d8dd */
+	--color-error-300: 218 192 200; /* ⬅ #dac0c8 */
+	--color-error-400: 190 144 158; /* ⬅ #be909e */
+	--color-error-500: 162 97 117; /* ⬅ #a26175 */
+	--color-error-600: 146 87 105; /* ⬅ #925769 */
+	--color-error-700: 122 73 88; /* ⬅ #7a4958 */
+	--color-error-800: 97 58 70; /* ⬅ #613a46 */
+	--color-error-900: 79 48 57; /* ⬅ #4f3039 */
+	/* surface | #6376a3 */
+	--color-surface-50: 232 234 241; /* ⬅ #e8eaf1 */
+	--color-surface-100: 224 228 237; /* ⬅ #e0e4ed */
+	--color-surface-200: 216 221 232; /* ⬅ #d8dde8 */
+	--color-surface-300: 193 200 218; /* ⬅ #c1c8da */
+	--color-surface-400: 146 159 191; /* ⬅ #929fbf */
+	--color-surface-500: 99 118 163; /* ⬅ #6376a3 */
+	--color-surface-600: 89 106 147; /* ⬅ #596a93 */
+	--color-surface-700: 74 89 122; /* ⬅ #4a597a */
+	--color-surface-800: 59 71 98; /* ⬅ #3b4762 */
+	--color-surface-900: 49 58 80; /* ⬅ #313a50 */
+}
+
+/* Applied to body with `<body data-theme="hamlindigo">` */
+/* Generated via: https://heropatterns.com/ */
+[data-theme='hamlindigo'] {
+	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cg fill='%23e0e4ed' fill-opacity='0.5'%3E%3Cpath fill-rule='evenodd' d='M0 0h4v4H0V0zm4 4h4v4H4V4z'/%3E%3C/g%3E%3C/svg%3E");
+}
+.dark [data-theme='hamlindigo'] {
+	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cg fill='%233b4762' fill-opacity='0.2'%3E%3Cpath fill-rule='evenodd' d='M0 0h4v4H0V0zm4 4h4v4H4V4z'/%3E%3C/g%3E%3C/svg%3E");
+}