@bexis2/bexis2-core-ui 0.0.17 → 0.0.19
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/File/FileUploader.svelte +2 -2
- package/package.json +5 -4
- package/src/app.d.ts +11 -0
- package/src/app.html +15 -0
- package/src/app.postcss +2 -0
- package/src/index.test.ts +7 -0
- package/src/lib/TableView.svelte +1 -0
- package/src/lib/components/File/FileIcon.svelte +49 -0
- package/src/lib/components/File/FileInfo.svelte +14 -0
- package/src/lib/components/File/FileUploader.svelte +217 -0
- package/src/lib/components/ListView.svelte +13 -0
- package/src/lib/components/Spinner/Spinner.svelte +8 -0
- package/src/lib/css/core.ui.css +2 -0
- package/src/lib/css/themes/theme-bexis2.css +98 -0
- package/src/lib/css/themes/theme-crimson.css +100 -0
- package/src/lib/css/themes/theme-gold-nouveau.css +140 -0
- package/src/lib/css/themes/theme-hamlindigo.css +111 -0
- package/src/lib/css/themes/theme-modern.css +127 -0
- package/src/lib/css/themes/theme-rocket.css +119 -0
- package/src/lib/css/themes/theme-sahara.css +128 -0
- package/src/lib/css/themes/theme-seafoam.css +121 -0
- package/src/lib/css/themes/theme-seasonal.css +115 -0
- package/src/lib/css/themes/theme-skeleton.css +118 -0
- package/src/lib/css/themes/theme-vintage.css +125 -0
- package/src/lib/index.ts +15 -0
- package/src/lib/models/Models.ts +39 -0
- package/src/lib/services/Api.ts +58 -0
- package/src/lib/stores/apistore.ts +32 -0
- package/src/routes/+layout.js +5 -0
- package/src/routes/+layout.svelte +10 -0
- package/src/routes/+page.svelte +0 -0
- package/src/routes/test/+page.svelte +1 -0
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<script>import DropZone from "svelte-file-dropzone/Dropzone.svelte";
|
|
2
|
-
import
|
|
2
|
+
import Fa from "svelte-fa/src/fa.svelte";
|
|
3
3
|
import Spinner from "../Spinner/Spinner.svelte";
|
|
4
4
|
import { createEventDispatcher } from "svelte";
|
|
5
5
|
import { faTrash } from "@fortawesome/free-solid-svg-icons";
|
|
@@ -38,7 +38,7 @@ onMount(async () => {
|
|
|
38
38
|
async function load() {
|
|
39
39
|
let url = start + "?id=" + id + "&version=" + version;
|
|
40
40
|
const res = await Api.get(url);
|
|
41
|
-
model = await res.
|
|
41
|
+
model = await res.data();
|
|
42
42
|
console.log("fileupload", model);
|
|
43
43
|
}
|
|
44
44
|
function handleFilesSelect(e) {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bexis2/bexis2-core-ui",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.19",
|
|
4
4
|
"private": false,
|
|
5
5
|
"scripts": {
|
|
6
6
|
"dev": "vite dev",
|
|
@@ -22,9 +22,10 @@
|
|
|
22
22
|
"@playwright/test": "^1.28.1",
|
|
23
23
|
"@skeletonlabs/skeleton": "^1.2.5",
|
|
24
24
|
"@sveltejs/adapter-auto": "^2.0.0",
|
|
25
|
+
"@sveltejs/adapter-static": "^2.0.2",
|
|
25
26
|
"@sveltejs/kit": "^1.5.0",
|
|
26
27
|
"@sveltejs/package": "^2.0.2",
|
|
27
|
-
"
|
|
28
|
+
"svelte-fa": "^3.0.3",
|
|
28
29
|
"@typescript-eslint/eslint-plugin": "^5.45.0",
|
|
29
30
|
"@typescript-eslint/parser": "^5.45.0",
|
|
30
31
|
"autoprefixer": "^10.4.14",
|
|
@@ -51,7 +52,8 @@
|
|
|
51
52
|
"test": "tests"
|
|
52
53
|
},
|
|
53
54
|
"files": [
|
|
54
|
-
"dist"
|
|
55
|
+
"dist",
|
|
56
|
+
"src"
|
|
55
57
|
],
|
|
56
58
|
"dependencies": {
|
|
57
59
|
"@fortawesome/fontawesome-free": "^6.2.1",
|
|
@@ -60,7 +62,6 @@
|
|
|
60
62
|
"@fortawesome/free-solid-svg-icons": "^6.2.1",
|
|
61
63
|
"axios": "^1.2.1",
|
|
62
64
|
"svelte": "^3.54.0",
|
|
63
|
-
"svelte-fa": "^3.0.3",
|
|
64
65
|
"svelte-file-dropzone": "^2.0.1"
|
|
65
66
|
},
|
|
66
67
|
"author": "David Schöne",
|
package/src/app.d.ts
ADDED
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
/// <reference types="@sveltejs/kit" />
|
|
2
|
+
|
|
3
|
+
// See https://kit.svelte.dev/docs/types#app
|
|
4
|
+
// for information about these interfaces
|
|
5
|
+
// and what to do when importing types
|
|
6
|
+
declare namespace App {
|
|
7
|
+
// interface Error {}
|
|
8
|
+
// interface Locals {}
|
|
9
|
+
// interface PageData {}
|
|
10
|
+
// interface Platform {}
|
|
11
|
+
}
|
package/src/app.html
ADDED
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8" />
|
|
5
|
+
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
10
|
+
%sveltekit.head%
|
|
11
|
+
</head>
|
|
12
|
+
<body>
|
|
13
|
+
<div>%sveltekit.body%</div>
|
|
14
|
+
</body>
|
|
15
|
+
</html>
|
package/src/app.postcss
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<h1>table</h1>
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
|
|
3
|
+
import Fa from 'svelte-fa'
|
|
4
|
+
import { faFileAudio } from '@fortawesome/free-regular-svg-icons'
|
|
5
|
+
import { faFileVideo } from '@fortawesome/free-regular-svg-icons'
|
|
6
|
+
import { faFileWord } from '@fortawesome/free-regular-svg-icons'
|
|
7
|
+
import { faFilePdf } from '@fortawesome/free-regular-svg-icons'
|
|
8
|
+
import { faFileExcel } from '@fortawesome/free-regular-svg-icons'
|
|
9
|
+
import { faFileAlt } from '@fortawesome/free-regular-svg-icons'
|
|
10
|
+
import { faFileImage } from '@fortawesome/free-regular-svg-icons'
|
|
11
|
+
import { faFileArchive } from '@fortawesome/free-regular-svg-icons'
|
|
12
|
+
|
|
13
|
+
export let type = "";
|
|
14
|
+
|
|
15
|
+
</script>
|
|
16
|
+
|
|
17
|
+
{#if type.includes("excel") || type.includes("spreadsheetml")}
|
|
18
|
+
<Fa icon={faFileExcel} />
|
|
19
|
+
{/if}
|
|
20
|
+
|
|
21
|
+
{#if type.includes("text")}
|
|
22
|
+
<Fa icon={faFileAlt} />
|
|
23
|
+
{/if}
|
|
24
|
+
|
|
25
|
+
{#if type.includes("image")}
|
|
26
|
+
<Fa icon={faFileImage} />
|
|
27
|
+
{/if}
|
|
28
|
+
|
|
29
|
+
{#if type.includes("audio")}
|
|
30
|
+
<Fa icon={faFileAudio} />
|
|
31
|
+
{/if}
|
|
32
|
+
|
|
33
|
+
{#if type.includes("video")}
|
|
34
|
+
<Fa icon={faFileVideo} />
|
|
35
|
+
{/if}
|
|
36
|
+
|
|
37
|
+
{#if type.includes("word")}
|
|
38
|
+
<Fa icon={faFileWord} />
|
|
39
|
+
{/if}
|
|
40
|
+
|
|
41
|
+
{#if type.includes("pdf")}
|
|
42
|
+
<Fa icon={faFilePdf} />
|
|
43
|
+
{/if}
|
|
44
|
+
|
|
45
|
+
{#if type.includes("zip")}
|
|
46
|
+
<Fa icon={faFileArchive} />
|
|
47
|
+
{/if}
|
|
48
|
+
|
|
49
|
+
|
|
@@ -0,0 +1,217 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
|
|
3
|
+
import type { FileUploaderModel, FileInfo, Files} from '../../models/Models.js'
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
import DropZone from "svelte-file-dropzone/Dropzone.svelte";
|
|
7
|
+
import Fa from 'svelte-fa/src/fa.svelte'
|
|
8
|
+
|
|
9
|
+
import Spinner from '../Spinner/Spinner.svelte';
|
|
10
|
+
import { createEventDispatcher } from 'svelte';
|
|
11
|
+
import { faTrash } from '@fortawesome/free-solid-svg-icons'
|
|
12
|
+
import { faSave } from '@fortawesome/free-regular-svg-icons'
|
|
13
|
+
import { faFileUpload } from '@fortawesome/free-solid-svg-icons'
|
|
14
|
+
|
|
15
|
+
import { Api } from '../../services/Api.js'
|
|
16
|
+
|
|
17
|
+
export let id=0;
|
|
18
|
+
export let version=1;
|
|
19
|
+
|
|
20
|
+
import { onMount } from 'svelte'
|
|
21
|
+
|
|
22
|
+
// export let description="";
|
|
23
|
+
// export let status=0;
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
//action to load fileupload model
|
|
27
|
+
export let start="";
|
|
28
|
+
//action to save selected file
|
|
29
|
+
export let submit="";
|
|
30
|
+
|
|
31
|
+
export let context="";
|
|
32
|
+
|
|
33
|
+
export let data:FileUploaderModel | undefined;
|
|
34
|
+
|
|
35
|
+
$:model= data;
|
|
36
|
+
$:submitBt ="submit";
|
|
37
|
+
|
|
38
|
+
let maxSize=0;
|
|
39
|
+
|
|
40
|
+
const dispatch = createEventDispatcher();
|
|
41
|
+
|
|
42
|
+
let fx:FileInfo[]
|
|
43
|
+
|
|
44
|
+
let files:Files = {accepted:[], rejected:[]};
|
|
45
|
+
$:files;
|
|
46
|
+
|
|
47
|
+
onMount(async () => {
|
|
48
|
+
|
|
49
|
+
console.log("fileupload - OnMount", data);
|
|
50
|
+
|
|
51
|
+
|
|
52
|
+
if(!data)
|
|
53
|
+
{
|
|
54
|
+
load();
|
|
55
|
+
}
|
|
56
|
+
else
|
|
57
|
+
{
|
|
58
|
+
model = data;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
if(model)
|
|
62
|
+
{
|
|
63
|
+
submitBt += context;
|
|
64
|
+
maxSize = (model.maxSize*1024)*1024
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
})
|
|
68
|
+
|
|
69
|
+
// load modal from server
|
|
70
|
+
async function load()
|
|
71
|
+
{
|
|
72
|
+
let url = start+"?id="+id+"&version="+version;
|
|
73
|
+
|
|
74
|
+
// load menu froms server
|
|
75
|
+
const res = await Api.get(url);
|
|
76
|
+
model = await res.data();
|
|
77
|
+
|
|
78
|
+
console.log("fileupload",model);
|
|
79
|
+
|
|
80
|
+
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
function handleFilesSelect(e:any) {
|
|
84
|
+
|
|
85
|
+
console.log("handleFilesSelect", e);
|
|
86
|
+
console.log("files", files);
|
|
87
|
+
|
|
88
|
+
|
|
89
|
+
const { acceptedFiles, fileRejections } = e.detail;
|
|
90
|
+
|
|
91
|
+
|
|
92
|
+
files.accepted = [...files.accepted, ...acceptedFiles];
|
|
93
|
+
files.rejected = [...files.rejected, ...fileRejections];
|
|
94
|
+
|
|
95
|
+
|
|
96
|
+
console.log("acceptedFiles", acceptedFiles);
|
|
97
|
+
console.log("files.accepted", files.accepted);
|
|
98
|
+
|
|
99
|
+
|
|
100
|
+
if(fileRejections.length>0)
|
|
101
|
+
{
|
|
102
|
+
//alert("the dropped file is not supported");
|
|
103
|
+
console.log("the dropped file is not supported.");
|
|
104
|
+
console.log(files.rejected);
|
|
105
|
+
|
|
106
|
+
let messages = [""];
|
|
107
|
+
|
|
108
|
+
for (let index = 0; index < fileRejections.length; index++) {
|
|
109
|
+
const element = fileRejections[index];
|
|
110
|
+
messages.push(getErrorMessage(element))
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
console.log(messages);
|
|
114
|
+
|
|
115
|
+
dispatch("error", {messages})
|
|
116
|
+
//list up the errors somewhere
|
|
117
|
+
files.rejected = []
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
if(acceptedFiles.length>0)
|
|
121
|
+
{
|
|
122
|
+
document.getElementById(submitBt)?.click();
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
function getErrorMessage(rejected)
|
|
128
|
+
{
|
|
129
|
+
let message = "";
|
|
130
|
+
message = rejected.file.path+" : ";
|
|
131
|
+
let errors = rejected.errors;
|
|
132
|
+
for (let index = 0; index < errors.length; index++) {
|
|
133
|
+
const error = errors[index];
|
|
134
|
+
message+=error.message
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
return message;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
async function handleSubmit() {
|
|
141
|
+
|
|
142
|
+
console.log("SUBMIT");
|
|
143
|
+
|
|
144
|
+
dispatch('submit')
|
|
145
|
+
|
|
146
|
+
let url = submit+"?id="+id;
|
|
147
|
+
|
|
148
|
+
// console.log(model);
|
|
149
|
+
// console.log(url);
|
|
150
|
+
console.log("SUBMIT");
|
|
151
|
+
|
|
152
|
+
if (files.accepted.length > 0) {
|
|
153
|
+
|
|
154
|
+
console.log(files);
|
|
155
|
+
|
|
156
|
+
const formData = new FormData();
|
|
157
|
+
formData.append("files","123");
|
|
158
|
+
// Looping over all files and add it to FormData object
|
|
159
|
+
for (var i = 0; i < files.accepted.length; i++) {
|
|
160
|
+
|
|
161
|
+
|
|
162
|
+
formData.append(files.accepted[i].name, files.accepted[i]);
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
|
|
166
|
+
const response = await Api.post(url, formData);
|
|
167
|
+
|
|
168
|
+
if(response.status==200)
|
|
169
|
+
{
|
|
170
|
+
dispatch('submited');
|
|
171
|
+
|
|
172
|
+
let message = files.accepted.length +" is/are uploaded";
|
|
173
|
+
dispatch('success', {text:message})
|
|
174
|
+
|
|
175
|
+
files.accepted = [];
|
|
176
|
+
|
|
177
|
+
}
|
|
178
|
+
}
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
</script>
|
|
182
|
+
|
|
183
|
+
<form on:submit|preventDefault={handleSubmit}>
|
|
184
|
+
{#if model}
|
|
185
|
+
<!--if model exist -->
|
|
186
|
+
<div>
|
|
187
|
+
|
|
188
|
+
<DropZone
|
|
189
|
+
on:drop={handleFilesSelect}
|
|
190
|
+
accept={model.accept}
|
|
191
|
+
multiple={model.multiple}
|
|
192
|
+
{maxSize}>
|
|
193
|
+
|
|
194
|
+
<b style="font-size:xx-large"><Fa icon={faFileUpload}/></b>
|
|
195
|
+
<span><b>Drag 'n' drop some files here, or click to select files</b>
|
|
196
|
+
<b>max file : {model.maxSize} mb</b></span>
|
|
197
|
+
<p>
|
|
198
|
+
{#if model.accept}
|
|
199
|
+
{#each model.accept as ext}
|
|
200
|
+
{ext} ,
|
|
201
|
+
{/each}
|
|
202
|
+
{/if}
|
|
203
|
+
</p>
|
|
204
|
+
</DropZone>
|
|
205
|
+
|
|
206
|
+
</div>
|
|
207
|
+
|
|
208
|
+
<button id="{submitBt}" color="primary" style="display:none" ><Fa icon={faSave}/></button>
|
|
209
|
+
|
|
210
|
+
{:else} <!-- while data is not loaded show a loading information -->
|
|
211
|
+
|
|
212
|
+
<Spinner/>
|
|
213
|
+
{/if}
|
|
214
|
+
|
|
215
|
+
</form>
|
|
216
|
+
|
|
217
|
+
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
<div
|
|
2
|
+
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]"
|
|
3
|
+
role="status">
|
|
4
|
+
<span
|
|
5
|
+
class="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]"
|
|
6
|
+
>Loading...</span
|
|
7
|
+
>
|
|
8
|
+
</div>
|
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
/* =~= Theme Properties =~= */
|
|
3
|
+
--theme-font-family-base: system-ui;
|
|
4
|
+
--theme-font-family-heading: system-ui;
|
|
5
|
+
--theme-font-color-base: 0 0 0;
|
|
6
|
+
--theme-font-color-dark: 255 255 255;
|
|
7
|
+
--theme-rounded-base: 4px;
|
|
8
|
+
--theme-rounded-container: 4px;
|
|
9
|
+
--theme-border-base: 1px;
|
|
10
|
+
/* =~= Theme On-X Colors =~= */
|
|
11
|
+
--on-primary: 0 0 0;
|
|
12
|
+
--on-secondary: 0 0 0;
|
|
13
|
+
--on-tertiary: 0 0 0;
|
|
14
|
+
--on-success: 0 0 0;
|
|
15
|
+
--on-warning: 255 255 255;
|
|
16
|
+
--on-error: 255 255 255;
|
|
17
|
+
--on-surface: 0 0 0;
|
|
18
|
+
/* =~= Theme Colors =~= */
|
|
19
|
+
/* primary | #45b2a1 */
|
|
20
|
+
--color-primary-50: 227 243 241; /* ⬅ #e3f3f1 */
|
|
21
|
+
--color-primary-100: 218 240 236; /* ⬅ #daf0ec */
|
|
22
|
+
--color-primary-200: 209 236 232; /* ⬅ #d1ece8 */
|
|
23
|
+
--color-primary-300: 181 224 217; /* ⬅ #b5e0d9 */
|
|
24
|
+
--color-primary-400: 125 201 189; /* ⬅ #7dc9bd */
|
|
25
|
+
--color-primary-500: 69 178 161; /* ⬅ #45b2a1 */
|
|
26
|
+
--color-primary-600: 62 160 145; /* ⬅ #3ea091 */
|
|
27
|
+
--color-primary-700: 52 134 121; /* ⬅ #348679 */
|
|
28
|
+
--color-primary-800: 41 107 97; /* ⬅ #296b61 */
|
|
29
|
+
--color-primary-900: 34 87 79; /* ⬅ #22574f */
|
|
30
|
+
/* secondary | #ff9700 */
|
|
31
|
+
--color-secondary-50: 255 239 217; /* ⬅ #ffefd9 */
|
|
32
|
+
--color-secondary-100: 255 234 204; /* ⬅ #ffeacc */
|
|
33
|
+
--color-secondary-200: 255 229 191; /* ⬅ #ffe5bf */
|
|
34
|
+
--color-secondary-300: 255 213 153; /* ⬅ #ffd599 */
|
|
35
|
+
--color-secondary-400: 255 182 77; /* ⬅ #ffb64d */
|
|
36
|
+
--color-secondary-500: 255 151 0; /* ⬅ #ff9700 */
|
|
37
|
+
--color-secondary-600: 230 136 0; /* ⬅ #e68800 */
|
|
38
|
+
--color-secondary-700: 191 113 0; /* ⬅ #bf7100 */
|
|
39
|
+
--color-secondary-800: 153 91 0; /* ⬅ #995b00 */
|
|
40
|
+
--color-secondary-900: 125 74 0; /* ⬅ #7d4a00 */
|
|
41
|
+
/* tertiary | #bee1da */
|
|
42
|
+
--color-tertiary-50: 245 251 249; /* ⬅ #f5fbf9 */
|
|
43
|
+
--color-tertiary-100: 242 249 248; /* ⬅ #f2f9f8 */
|
|
44
|
+
--color-tertiary-200: 239 248 246; /* ⬅ #eff8f6 */
|
|
45
|
+
--color-tertiary-300: 229 243 240; /* ⬅ #e5f3f0 */
|
|
46
|
+
--color-tertiary-400: 210 234 229; /* ⬅ #d2eae5 */
|
|
47
|
+
--color-tertiary-500: 190 225 218; /* ⬅ #bee1da */
|
|
48
|
+
--color-tertiary-600: 171 203 196; /* ⬅ #abcbc4 */
|
|
49
|
+
--color-tertiary-700: 143 169 164; /* ⬅ #8fa9a4 */
|
|
50
|
+
--color-tertiary-800: 114 135 131; /* ⬅ #728783 */
|
|
51
|
+
--color-tertiary-900: 93 110 107; /* ⬅ #5d6e6b */
|
|
52
|
+
/* success | #4BB543 */
|
|
53
|
+
--color-success-50: 228 244 227; /* ⬅ #e4f4e3 */
|
|
54
|
+
--color-success-100: 219 240 217; /* ⬅ #dbf0d9 */
|
|
55
|
+
--color-success-200: 210 237 208; /* ⬅ #d2edd0 */
|
|
56
|
+
--color-success-300: 183 225 180; /* ⬅ #b7e1b4 */
|
|
57
|
+
--color-success-400: 129 203 123; /* ⬅ #81cb7b */
|
|
58
|
+
--color-success-500: 75 181 67; /* ⬅ #4BB543 */
|
|
59
|
+
--color-success-600: 68 163 60; /* ⬅ #44a33c */
|
|
60
|
+
--color-success-700: 56 136 50; /* ⬅ #388832 */
|
|
61
|
+
--color-success-800: 45 109 40; /* ⬅ #2d6d28 */
|
|
62
|
+
--color-success-900: 37 89 33; /* ⬅ #255921 */
|
|
63
|
+
/* warning | #ef4444 */
|
|
64
|
+
--color-warning-50: 253 227 227; /* ⬅ #fde3e3 */
|
|
65
|
+
--color-warning-100: 252 218 218; /* ⬅ #fcdada */
|
|
66
|
+
--color-warning-200: 251 208 208; /* ⬅ #fbd0d0 */
|
|
67
|
+
--color-warning-300: 249 180 180; /* ⬅ #f9b4b4 */
|
|
68
|
+
--color-warning-400: 244 124 124; /* ⬅ #f47c7c */
|
|
69
|
+
--color-warning-500: 239 68 68; /* ⬅ #ef4444 */
|
|
70
|
+
--color-warning-600: 215 61 61; /* ⬅ #d73d3d */
|
|
71
|
+
--color-warning-700: 179 51 51; /* ⬅ #b33333 */
|
|
72
|
+
--color-warning-800: 143 41 41; /* ⬅ #8f2929 */
|
|
73
|
+
--color-warning-900: 117 33 33; /* ⬅ #752121 */
|
|
74
|
+
/* error | #FF0000 */
|
|
75
|
+
--color-error-50: 255 217 217; /* ⬅ #ffd9d9 */
|
|
76
|
+
--color-error-100: 255 204 204; /* ⬅ #ffcccc */
|
|
77
|
+
--color-error-200: 255 191 191; /* ⬅ #ffbfbf */
|
|
78
|
+
--color-error-300: 255 153 153; /* ⬅ #ff9999 */
|
|
79
|
+
--color-error-400: 255 77 77; /* ⬅ #ff4d4d */
|
|
80
|
+
--color-error-500: 255 0 0; /* ⬅ #FF0000 */
|
|
81
|
+
--color-error-600: 230 0 0; /* ⬅ #e60000 */
|
|
82
|
+
--color-error-700: 191 0 0; /* ⬅ #bf0000 */
|
|
83
|
+
--color-error-800: 153 0 0; /* ⬅ #990000 */
|
|
84
|
+
--color-error-900: 125 0 0; /* ⬅ #7d0000 */
|
|
85
|
+
/* surface | #FFFFFF */
|
|
86
|
+
--color-surface-50: 255 255 255; /* ⬅ #ffffff */
|
|
87
|
+
--color-surface-100: 255 255 255; /* ⬅ #ffffff */
|
|
88
|
+
--color-surface-200: 255 255 255; /* ⬅ #ffffff */
|
|
89
|
+
--color-surface-300: 255 255 255; /* ⬅ #ffffff */
|
|
90
|
+
--color-surface-400: 255 255 255; /* ⬅ #ffffff */
|
|
91
|
+
--color-surface-500: 255 255 255; /* ⬅ #FFFFFF */
|
|
92
|
+
--color-surface-600: 230 230 230; /* ⬅ #e6e6e6 */
|
|
93
|
+
--color-surface-700: 191 191 191; /* ⬅ #bfbfbf */
|
|
94
|
+
/* dark mode surface | #1f2937 */
|
|
95
|
+
--color-surface-800: 19 25 33; /* ⬅ #131921 */
|
|
96
|
+
--color-surface-900: 15 20 27; /* ⬅ #0f141b */
|
|
97
|
+
|
|
98
|
+
}
|
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
/* =~= Crimson Theme - made by GitHub user @ak4zh for the Skeleton community theme contest. =~= */
|
|
2
|
+
/* https://github.com/skeletonlabs/skeleton/discussions/401 */
|
|
3
|
+
|
|
4
|
+
:root {
|
|
5
|
+
/* =~= Theme Styles =~= */
|
|
6
|
+
--theme-font-family-base: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
|
|
7
|
+
'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
|
8
|
+
--theme-font-family-heading: system-ui;
|
|
9
|
+
--theme-font-color-base: var(--color-surface-900);
|
|
10
|
+
--theme-font-color-dark: var(--color-surface-50);
|
|
11
|
+
--theme-rounded-base: 24px;
|
|
12
|
+
--theme-rounded-container: 24px;
|
|
13
|
+
--theme-border-base: 1px;
|
|
14
|
+
/* =~= Theme On-X Colors =~= */
|
|
15
|
+
--on-primary: 255 255 255;
|
|
16
|
+
--on-secondary: 255 255 255;
|
|
17
|
+
--on-tertiary: 0 0 0;
|
|
18
|
+
--on-success: 0 0 0;
|
|
19
|
+
--on-warning: 0 0 0;
|
|
20
|
+
--on-error: 0 0 0;
|
|
21
|
+
--on-surface: 255 255 255;
|
|
22
|
+
/* =~= Theme Colors =~= */
|
|
23
|
+
/* primary | #d4163c */
|
|
24
|
+
--color-primary-50: 249 220 226; /* ⬅ #f9dce2 */
|
|
25
|
+
--color-primary-100: 246 208 216; /* ⬅ #f6d0d8 */
|
|
26
|
+
--color-primary-200: 244 197 206; /* ⬅ #f4c5ce */
|
|
27
|
+
--color-primary-300: 238 162 177; /* ⬅ #eea2b1 */
|
|
28
|
+
--color-primary-400: 225 92 119; /* ⬅ #e15c77 */
|
|
29
|
+
--color-primary-500: 212 22 60; /* ⬅ #d4163c */
|
|
30
|
+
--color-primary-600: 191 20 54; /* ⬅ #bf1436 */
|
|
31
|
+
--color-primary-700: 159 17 45; /* ⬅ #9f112d */
|
|
32
|
+
--color-primary-800: 127 13 36; /* ⬅ #7f0d24 */
|
|
33
|
+
--color-primary-900: 104 11 29; /* ⬅ #680b1d */
|
|
34
|
+
/* secondary | #4685af */
|
|
35
|
+
--color-secondary-50: 227 237 243; /* ⬅ #e3edf3 */
|
|
36
|
+
--color-secondary-100: 218 231 239; /* ⬅ #dae7ef */
|
|
37
|
+
--color-secondary-200: 209 225 235; /* ⬅ #d1e1eb */
|
|
38
|
+
--color-secondary-300: 181 206 223; /* ⬅ #b5cedf */
|
|
39
|
+
--color-secondary-400: 126 170 199; /* ⬅ #7eaac7 */
|
|
40
|
+
--color-secondary-500: 70 133 175; /* ⬅ #4685af */
|
|
41
|
+
--color-secondary-600: 63 120 158; /* ⬅ #3f789e */
|
|
42
|
+
--color-secondary-700: 53 100 131; /* ⬅ #356483 */
|
|
43
|
+
--color-secondary-800: 42 80 105; /* ⬅ #2a5069 */
|
|
44
|
+
--color-secondary-900: 34 65 86; /* ⬅ #224156 */
|
|
45
|
+
/* tertiary | #c0b6b4 */
|
|
46
|
+
--color-tertiary-50: 246 244 244; /* ⬅ #f6f4f4 */
|
|
47
|
+
--color-tertiary-100: 242 240 240; /* ⬅ #f2f0f0 */
|
|
48
|
+
--color-tertiary-200: 239 237 236; /* ⬅ #efedec */
|
|
49
|
+
--color-tertiary-300: 230 226 225; /* ⬅ #e6e2e1 */
|
|
50
|
+
--color-tertiary-400: 211 204 203; /* ⬅ #d3cccb */
|
|
51
|
+
--color-tertiary-500: 192 182 180; /* ⬅ #c0b6b4 */
|
|
52
|
+
--color-tertiary-600: 173 164 162; /* ⬅ #ada4a2 */
|
|
53
|
+
--color-tertiary-700: 144 137 135; /* ⬅ #908987 */
|
|
54
|
+
--color-tertiary-800: 115 109 108; /* ⬅ #736d6c */
|
|
55
|
+
--color-tertiary-900: 94 89 88; /* ⬅ #5e5958 */
|
|
56
|
+
/* success | #c1dd97 */
|
|
57
|
+
--color-success-50: 246 250 239; /* ⬅ #f6faef */
|
|
58
|
+
--color-success-100: 243 248 234; /* ⬅ #f3f8ea */
|
|
59
|
+
--color-success-200: 240 247 229; /* ⬅ #f0f7e5 */
|
|
60
|
+
--color-success-300: 230 241 213; /* ⬅ #e6f1d5 */
|
|
61
|
+
--color-success-400: 212 231 182; /* ⬅ #d4e7b6 */
|
|
62
|
+
--color-success-500: 193 221 151; /* ⬅ #c1dd97 */
|
|
63
|
+
--color-success-600: 174 199 136; /* ⬅ #aec788 */
|
|
64
|
+
--color-success-700: 145 166 113; /* ⬅ #91a671 */
|
|
65
|
+
--color-success-800: 116 133 91; /* ⬅ #74855b */
|
|
66
|
+
--color-success-900: 95 108 74; /* ⬅ #5f6c4a */
|
|
67
|
+
/* warning | #e4c25e */
|
|
68
|
+
--color-warning-50: 251 246 231; /* ⬅ #fbf6e7 */
|
|
69
|
+
--color-warning-100: 250 243 223; /* ⬅ #faf3df */
|
|
70
|
+
--color-warning-200: 248 240 215; /* ⬅ #f8f0d7 */
|
|
71
|
+
--color-warning-300: 244 231 191; /* ⬅ #f4e7bf */
|
|
72
|
+
--color-warning-400: 236 212 142; /* ⬅ #ecd48e */
|
|
73
|
+
--color-warning-500: 228 194 94; /* ⬅ #e4c25e */
|
|
74
|
+
--color-warning-600: 205 175 85; /* ⬅ #cdaf55 */
|
|
75
|
+
--color-warning-700: 171 146 71; /* ⬅ #ab9247 */
|
|
76
|
+
--color-warning-800: 137 116 56; /* ⬅ #897438 */
|
|
77
|
+
--color-warning-900: 112 95 46; /* ⬅ #705f2e */
|
|
78
|
+
/* error | #d27f81 */
|
|
79
|
+
--color-error-50: 248 236 236; /* ⬅ #f8ecec */
|
|
80
|
+
--color-error-100: 246 229 230; /* ⬅ #f6e5e6 */
|
|
81
|
+
--color-error-200: 244 223 224; /* ⬅ #f4dfe0 */
|
|
82
|
+
--color-error-300: 237 204 205; /* ⬅ #edcccd */
|
|
83
|
+
--color-error-400: 224 165 167; /* ⬅ #e0a5a7 */
|
|
84
|
+
--color-error-500: 210 127 129; /* ⬅ #d27f81 */
|
|
85
|
+
--color-error-600: 189 114 116; /* ⬅ #bd7274 */
|
|
86
|
+
--color-error-700: 158 95 97; /* ⬅ #9e5f61 */
|
|
87
|
+
--color-error-800: 126 76 77; /* ⬅ #7e4c4d */
|
|
88
|
+
--color-error-900: 103 62 63; /* ⬅ #673e3f */
|
|
89
|
+
/* surface | #2b2e40 */
|
|
90
|
+
--color-surface-50: 223 224 226; /* ⬅ #dfe0e2 */
|
|
91
|
+
--color-surface-100: 213 213 217; /* ⬅ #d5d5d9 */
|
|
92
|
+
--color-surface-200: 202 203 207; /* ⬅ #cacbcf */
|
|
93
|
+
--color-surface-300: 170 171 179; /* ⬅ #aaabb3 */
|
|
94
|
+
--color-surface-400: 107 109 121; /* ⬅ #6b6d79 */
|
|
95
|
+
--color-surface-500: 43 46 64; /* ⬅ #2b2e40 */
|
|
96
|
+
--color-surface-600: 39 41 58; /* ⬅ #27293a */
|
|
97
|
+
--color-surface-700: 32 35 48; /* ⬅ #202330 */
|
|
98
|
+
--color-surface-800: 26 28 38; /* ⬅ #1a1c26 */
|
|
99
|
+
--color-surface-900: 21 23 31; /* ⬅ #15171f */
|
|
100
|
+
}
|