@bexis2/bexis2-core-ui 0.4.97 → 0.4.99
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/README.md +5 -0
- package/dist/components/Table/TableContent.svelte +10 -9
- package/dist/components/form/Checkbox.svelte +10 -0
- package/dist/components/form/Checkbox.svelte.d.ts +1 -0
- package/dist/components/form/CheckboxKvPList.svelte +10 -1
- package/dist/components/form/CheckboxKvPList.svelte.d.ts +1 -0
- package/dist/components/form/CheckboxList.svelte +9 -1
- package/dist/components/form/CheckboxList.svelte.d.ts +1 -0
- package/dist/components/form/DateInput.svelte +9 -0
- package/dist/components/form/DateInput.svelte.d.ts +1 -0
- package/dist/components/form/DatePickerInput.svelte +8 -0
- package/dist/components/form/DatePickerInput.svelte.d.ts +1 -0
- package/dist/components/form/Dropdown.svelte +13 -1
- package/dist/components/form/Dropdown.svelte.d.ts +2 -0
- package/dist/components/form/DropdownKvP.svelte +12 -1
- package/dist/components/form/DropdownKvP.svelte.d.ts +2 -0
- package/dist/components/form/MultiSelect.svelte +11 -1
- package/dist/components/form/MultiSelect.svelte.d.ts +2 -0
- package/dist/components/form/NumberInput.svelte +9 -0
- package/dist/components/form/NumberInput.svelte.d.ts +1 -0
- package/dist/components/form/TextArea.svelte +9 -0
- package/dist/components/form/TextArea.svelte.d.ts +1 -0
- package/dist/components/form/TextInput.svelte +9 -0
- package/dist/components/form/TextInput.svelte.d.ts +1 -0
- package/package.json +1 -1
- package/src/lib/components/Table/TableContent.svelte +12 -10
- package/src/lib/components/form/Checkbox.svelte +14 -0
- package/src/lib/components/form/CheckboxKvPList.svelte +11 -1
- package/src/lib/components/form/CheckboxList.svelte +11 -1
- package/src/lib/components/form/DateInput.svelte +12 -0
- package/src/lib/components/form/DatePickerInput.svelte +10 -0
- package/src/lib/components/form/Dropdown.svelte +13 -1
- package/src/lib/components/form/DropdownKvP.svelte +12 -1
- package/src/lib/components/form/MultiSelect.svelte +11 -1
- package/src/lib/components/form/NumberInput.svelte +10 -0
- package/src/lib/components/form/TextArea.svelte +10 -0
- package/src/lib/components/form/TextInput.svelte +11 -0
- package/dist/css/themes/theme-bexis2.css_old +0 -100
- package/dist/themes/theme-bexis2 copy.d.ts +0 -2
- package/dist/themes/theme-bexis2 copy.js +0 -112
- package/src/lib/css/themes/theme-bexis2.css_old +0 -100
- package/src/lib/themes/theme-bexis2 copy.ts +0 -114
|
@@ -6,6 +6,7 @@
|
|
|
6
6
|
|
|
7
7
|
export let id: string = '';
|
|
8
8
|
export let label: string = '';
|
|
9
|
+
export let title: string = '';
|
|
9
10
|
export let value: string = '';
|
|
10
11
|
export let valid: boolean = false;
|
|
11
12
|
export let invalid: boolean = false;
|
|
@@ -37,6 +38,15 @@
|
|
|
37
38
|
if (mode === 'datetime') {
|
|
38
39
|
width = 'w-64';
|
|
39
40
|
}
|
|
41
|
+
|
|
42
|
+
$: {
|
|
43
|
+
if ((!label || label.trim() === '') && title && title.trim() !== '') {
|
|
44
|
+
label = title;
|
|
45
|
+
} else if ((!title || title.trim() === '') && label && label.trim() !== '') {
|
|
46
|
+
title = label;
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
|
|
40
50
|
</script>
|
|
41
51
|
|
|
42
52
|
<InputContainer
|
|
@@ -5,6 +5,7 @@
|
|
|
5
5
|
export let source;
|
|
6
6
|
export let target;
|
|
7
7
|
export let title;
|
|
8
|
+
export let label;
|
|
8
9
|
export let valid = false;
|
|
9
10
|
export let invalid = false;
|
|
10
11
|
export let feedback = [''];
|
|
@@ -27,11 +28,21 @@
|
|
|
27
28
|
function updatedTarget(value) {
|
|
28
29
|
target = value;
|
|
29
30
|
}
|
|
31
|
+
|
|
32
|
+
$: {
|
|
33
|
+
if ((!label || label.trim() === '') && title && title.trim() !== '') {
|
|
34
|
+
label = title;
|
|
35
|
+
} else if ((!title || title.trim() === '') && label && label.trim() !== '') {
|
|
36
|
+
title = label;
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
|
|
30
41
|
</script>
|
|
31
42
|
|
|
32
43
|
<InputContainer
|
|
33
44
|
{id}
|
|
34
|
-
label
|
|
45
|
+
{label}
|
|
35
46
|
{feedback}
|
|
36
47
|
{required}
|
|
37
48
|
{help}
|
|
@@ -43,6 +54,7 @@
|
|
|
43
54
|
>
|
|
44
55
|
<select
|
|
45
56
|
{id}
|
|
57
|
+
{title}
|
|
46
58
|
class="select variant-form-material dark:bg-zinc-700 bg-zinc-50 placeholder:text-gray-400"
|
|
47
59
|
class:input-success={valid}
|
|
48
60
|
class:input-error={invalid}
|
|
@@ -5,6 +5,7 @@
|
|
|
5
5
|
export let source;
|
|
6
6
|
export let target;
|
|
7
7
|
export let title;
|
|
8
|
+
export let label;
|
|
8
9
|
export let valid = false;
|
|
9
10
|
export let invalid = false;
|
|
10
11
|
export let feedback = [''];
|
|
@@ -36,11 +37,20 @@
|
|
|
36
37
|
target = id;
|
|
37
38
|
}
|
|
38
39
|
}
|
|
40
|
+
|
|
41
|
+
$: {
|
|
42
|
+
if ((!label || label.trim() === '') && title && title.trim() !== '') {
|
|
43
|
+
label = title;
|
|
44
|
+
} else if ((!title || title.trim() === '') && label && label.trim() !== '') {
|
|
45
|
+
title = label;
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
|
|
39
49
|
</script>
|
|
40
50
|
|
|
41
51
|
<InputContainer
|
|
42
52
|
{id}
|
|
43
|
-
label
|
|
53
|
+
{label}
|
|
44
54
|
{feedback}
|
|
45
55
|
{required}
|
|
46
56
|
{help}
|
|
@@ -52,6 +62,7 @@
|
|
|
52
62
|
>
|
|
53
63
|
<select
|
|
54
64
|
{id}
|
|
65
|
+
{title}
|
|
55
66
|
class="select variant-form-material dark:bg-zinc-700 bg-zinc-50 placeholder:text-gray-400"
|
|
56
67
|
class:input-success={valid}
|
|
57
68
|
class:input-error={invalid}
|
|
@@ -9,6 +9,7 @@
|
|
|
9
9
|
export let target;
|
|
10
10
|
export let id;
|
|
11
11
|
export let title;
|
|
12
|
+
export let label;
|
|
12
13
|
export let itemId = 'value';
|
|
13
14
|
export let itemLabel = 'label';
|
|
14
15
|
export let itemGroup = '';
|
|
@@ -30,6 +31,15 @@
|
|
|
30
31
|
|
|
31
32
|
let isLoaded = false;
|
|
32
33
|
|
|
34
|
+
$: {
|
|
35
|
+
if ((!label || label.trim() === '') && title && title.trim() !== '') {
|
|
36
|
+
label = title;
|
|
37
|
+
} else if ((!title || title.trim() === '') && label && label.trim() !== '') {
|
|
38
|
+
title = label;
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
|
|
33
43
|
$: value = '';
|
|
34
44
|
$: updateTarget(value);
|
|
35
45
|
$: (target, setValue(target));
|
|
@@ -303,7 +313,7 @@
|
|
|
303
313
|
|
|
304
314
|
<InputContainer
|
|
305
315
|
{id}
|
|
306
|
-
label
|
|
316
|
+
{label}
|
|
307
317
|
{feedback}
|
|
308
318
|
{required}
|
|
309
319
|
{help}
|
|
@@ -5,6 +5,7 @@
|
|
|
5
5
|
|
|
6
6
|
export let id: string = '';
|
|
7
7
|
export let label: string = '';
|
|
8
|
+
export let title: string = '';
|
|
8
9
|
export let value: string = '';
|
|
9
10
|
|
|
10
11
|
export let valid: boolean = false;
|
|
@@ -20,6 +21,14 @@
|
|
|
20
21
|
export let min: number | undefined = undefined;
|
|
21
22
|
export let max: number | undefined = undefined;
|
|
22
23
|
|
|
24
|
+
$: {
|
|
25
|
+
if ((!label || label.trim() === '') && title && title.trim() !== '') {
|
|
26
|
+
label = title;
|
|
27
|
+
} else if ((!title || title.trim() === '') && label && label.trim() !== '') {
|
|
28
|
+
title = label;
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
|
|
23
32
|
// Diese Zeile wird jedes Mal ausgeführt, wenn sich "menge" ändert
|
|
24
33
|
$: if (max != undefined && parseInt(value) > max) {
|
|
25
34
|
value = max.toString();
|
|
@@ -44,6 +53,7 @@
|
|
|
44
53
|
>
|
|
45
54
|
<input
|
|
46
55
|
{id}
|
|
56
|
+
{title}
|
|
47
57
|
class="input variant-form-material dark:bg-zinc-700 bg-zinc-50 placeholder:text-gray-400"
|
|
48
58
|
type="number"
|
|
49
59
|
class:input-success={valid}
|
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
|
|
4
4
|
export let id: string = '';
|
|
5
5
|
export let label: string = '';
|
|
6
|
+
export let title: string = '';
|
|
6
7
|
export let value: string = '';
|
|
7
8
|
|
|
8
9
|
export let valid: boolean = false;
|
|
@@ -15,6 +16,14 @@
|
|
|
15
16
|
export let description: string = '';
|
|
16
17
|
export let showDescription: boolean = false;
|
|
17
18
|
export let showIcon: boolean = false;
|
|
19
|
+
|
|
20
|
+
$: {
|
|
21
|
+
if ((!label || label.trim() === '') && title && title.trim() !== '') {
|
|
22
|
+
label = title;
|
|
23
|
+
} else if ((!title || title.trim() === '') && label && label.trim() !== '') {
|
|
24
|
+
title = label;
|
|
25
|
+
}
|
|
26
|
+
}
|
|
18
27
|
</script>
|
|
19
28
|
|
|
20
29
|
<InputContainer
|
|
@@ -31,6 +40,7 @@
|
|
|
31
40
|
>
|
|
32
41
|
<textarea
|
|
33
42
|
{id}
|
|
43
|
+
{title}
|
|
34
44
|
class="textarea variant-form-material dark:bg-zinc-700 bg-zinc-50 placeholder:text-gray-400"
|
|
35
45
|
class:input-success={valid}
|
|
36
46
|
class:input-error={invalid}
|
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
|
|
4
4
|
export let id: string = '';
|
|
5
5
|
export let label: string = '';
|
|
6
|
+
export let title: string = '';
|
|
6
7
|
export let value: string = '';
|
|
7
8
|
export let valid: boolean = false;
|
|
8
9
|
export let invalid: boolean = false;
|
|
@@ -14,6 +15,15 @@
|
|
|
14
15
|
export let description: string = '';
|
|
15
16
|
export let showDescription: boolean = false;
|
|
16
17
|
export let showIcon: boolean = false;
|
|
18
|
+
|
|
19
|
+
$: {
|
|
20
|
+
if ((!label || label.trim() === '') && title && title.trim() !== '') {
|
|
21
|
+
label = title;
|
|
22
|
+
} else if ((!title || title.trim() === '') && label && label.trim() !== '') {
|
|
23
|
+
title = label;
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
|
|
17
27
|
</script>
|
|
18
28
|
|
|
19
29
|
<InputContainer
|
|
@@ -30,6 +40,7 @@
|
|
|
30
40
|
>
|
|
31
41
|
<input
|
|
32
42
|
{id}
|
|
43
|
+
{title}
|
|
33
44
|
class="input variant-form-material dark:bg-zinc-700 bg-zinc-50 placeholder:text-gray-400"
|
|
34
45
|
type="text"
|
|
35
46
|
class:input-success={valid}
|
|
@@ -1,100 +0,0 @@
|
|
|
1
|
-
[data-theme='bexis2theme'] {
|
|
2
|
-
/* =~= Theme Properties =~= */
|
|
3
|
-
--base-font-family: system-ui;
|
|
4
|
-
--base-font-color: var(--color-surface-900);
|
|
5
|
-
--base-font-color-dark: 255 255 255;
|
|
6
|
-
/*--theme-rounded-base: 4px;
|
|
7
|
-
--theme-rounded-container: 4px;
|
|
8
|
-
--theme-border-base: 1px;*/
|
|
9
|
-
--radius-base: 4px;
|
|
10
|
-
--radius-container: 4px;
|
|
11
|
-
--default-border-width: 1px;
|
|
12
|
-
--default-divide-width: 1px;
|
|
13
|
-
--default-ring-width: 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: 255 255 255;
|
|
19
|
-
--on-warning: 255 255 255;
|
|
20
|
-
--on-error: 255 255 255;
|
|
21
|
-
--on-surface: 0 0 0;
|
|
22
|
-
/* =~= Theme Colors =~= */
|
|
23
|
-
/* primary | #45b2a1 */
|
|
24
|
-
--color-primary-50: #e3f3f1;
|
|
25
|
-
--color-primary-100: #daf0ec;
|
|
26
|
-
--color-primary-200: #d1ece8;
|
|
27
|
-
--color-primary-300: #b5e0d9;
|
|
28
|
-
--color-primary-400: #7dc9bd;
|
|
29
|
-
--color-primary-500: #45b2a1;
|
|
30
|
-
--color-primary-600: #3ea091;
|
|
31
|
-
--color-primary-700: #348679;
|
|
32
|
-
--color-primary-800: #296b61;
|
|
33
|
-
--color-primary-900: #22574f;
|
|
34
|
-
/* secondary | #ff9700 */
|
|
35
|
-
--color-secondary-50: #ffefd9;
|
|
36
|
-
--color-secondary-100: #ffeacc;
|
|
37
|
-
--color-secondary-200: #ffe5bf;
|
|
38
|
-
--color-secondary-300: #ffd599;
|
|
39
|
-
--color-secondary-400: #ffb64d;
|
|
40
|
-
--color-secondary-500: #ff9700;
|
|
41
|
-
--color-secondary-600: #e68800;
|
|
42
|
-
--color-secondary-700: #bf7100;
|
|
43
|
-
--color-secondary-800: #995b00;
|
|
44
|
-
--color-secondary-900: #7d4a00;
|
|
45
|
-
/* tertiary | #bee1da */
|
|
46
|
-
--color-tertiary-50: #f5fbf9;
|
|
47
|
-
--color-tertiary-100: #f2f9f8;
|
|
48
|
-
--color-tertiary-200: #eff8f6;
|
|
49
|
-
--color-tertiary-300: #e5f3f0;
|
|
50
|
-
--color-tertiary-400: #d2eae5;
|
|
51
|
-
--color-tertiary-500: #bee1da;
|
|
52
|
-
--color-tertiary-600: #abcbc4;
|
|
53
|
-
--color-tertiary-700: #8fa9a4;
|
|
54
|
-
--color-tertiary-800: #728783;
|
|
55
|
-
--color-tertiary-900: #5d6e6b;
|
|
56
|
-
/* success | #4BB543 */
|
|
57
|
-
--color-success-50: #e4f4e3;
|
|
58
|
-
--color-success-100: #dbf0d9;
|
|
59
|
-
--color-success-200: #d2edd0;
|
|
60
|
-
--color-success-300: #b7e1b4;
|
|
61
|
-
--color-success-400: #81cb7b;
|
|
62
|
-
--color-success-500: #4bb543;
|
|
63
|
-
--color-success-600: #44a33c;
|
|
64
|
-
--color-success-700: #388832;
|
|
65
|
-
--color-success-800: #2d6d28;
|
|
66
|
-
--color-success-900: #255921;
|
|
67
|
-
/* warning | #EAB308 */
|
|
68
|
-
--color-warning-50: #fcf4da;
|
|
69
|
-
--color-warning-100: #fbf0ce;
|
|
70
|
-
--color-warning-200: #faecc1;
|
|
71
|
-
--color-warning-300: #f7e19c;
|
|
72
|
-
--color-warning-400: #f0ca52;
|
|
73
|
-
--color-warning-500: #eab308;
|
|
74
|
-
--color-warning-600: #d3a107;
|
|
75
|
-
--color-warning-700: #b08606;
|
|
76
|
-
--color-warning-800: #8c6b05;
|
|
77
|
-
--color-warning-900: #735804;
|
|
78
|
-
/* error | #FF0000 */
|
|
79
|
-
--color-error-50: #ffd9d9;
|
|
80
|
-
--color-error-100: #ffcccc;
|
|
81
|
-
--color-error-200: #ffbfbf;
|
|
82
|
-
--color-error-300: #ff9999;
|
|
83
|
-
--color-error-400: #ff4d4d;
|
|
84
|
-
--color-error-500: #ff0000;
|
|
85
|
-
--color-error-600: #e60000;
|
|
86
|
-
--color-error-700: #bf0000;
|
|
87
|
-
--color-error-800: #990000;
|
|
88
|
-
--color-error-900: #7d0000;
|
|
89
|
-
/* surface | #c7c7c7 */
|
|
90
|
-
--color-surface-50: #f7f7f7;
|
|
91
|
-
--color-surface-100: #f4f4f4;
|
|
92
|
-
--color-surface-200: #f1f1f1;
|
|
93
|
-
--color-surface-300: #e9e9e9;
|
|
94
|
-
--color-surface-400: #d8d8d8;
|
|
95
|
-
--color-surface-500: #c7c7c7;
|
|
96
|
-
--color-surface-600: #b3b3b3;
|
|
97
|
-
--color-surface-700: #959595;
|
|
98
|
-
--color-surface-800: #777777;
|
|
99
|
-
--color-surface-900: #626262;
|
|
100
|
-
}
|
|
@@ -1,112 +0,0 @@
|
|
|
1
|
-
export const bexis2theme = {
|
|
2
|
-
name: 'bexis2theme',
|
|
3
|
-
properties: {
|
|
4
|
-
// =~= Theme Properties =~=
|
|
5
|
-
'--theme-font-family-base': `system-ui`,
|
|
6
|
-
'--theme-font-family-heading': `system-ui`,
|
|
7
|
-
'--theme-font-color-base': 'var(--color-surface-900)',
|
|
8
|
-
'--theme-font-color-dark': '#ffffff',
|
|
9
|
-
'--theme-rounded-base': '4px',
|
|
10
|
-
'--theme-rounded-container': '4px',
|
|
11
|
-
'--theme-border-base': '1px',
|
|
12
|
-
// =~= Theme On-X Colors =~=
|
|
13
|
-
'--on-primary': '255 255 255',
|
|
14
|
-
'--on-secondary': '255 255 255',
|
|
15
|
-
'--on-tertiary': '0 0 0',
|
|
16
|
-
'--on-success': '255 255 255',
|
|
17
|
-
'--on-warning': '255 255 255',
|
|
18
|
-
'--on-error': '255 255 255',
|
|
19
|
-
'--on-surface': '255 255 255',
|
|
20
|
-
// =~= Theme Colors =~=
|
|
21
|
-
// primary | #45b2a1
|
|
22
|
-
'--color-primary-50': '#e3f3f1',
|
|
23
|
-
'--color-primary-100': '#daf0ec',
|
|
24
|
-
'--color-primary-200': '#d1ece8',
|
|
25
|
-
'--color-primary-300': '#b5e0d9',
|
|
26
|
-
'--color-primary-400': '#7dc9bd',
|
|
27
|
-
'--color-primary-500': '#45b2a1',
|
|
28
|
-
'--color-primary-600': '#3ea091',
|
|
29
|
-
'--color-primary-700': '#348679',
|
|
30
|
-
'--color-primary-800': '#296b61',
|
|
31
|
-
'--color-primary-900': '#22574f',
|
|
32
|
-
// secondary | #ff9700
|
|
33
|
-
'--color-secondary-50': '#ffefd9',
|
|
34
|
-
'--color-secondary-100': '#ffeacc',
|
|
35
|
-
'--color-secondary-200': '#ffe5bf',
|
|
36
|
-
'--color-secondary-300': '#ffd599',
|
|
37
|
-
'--color-secondary-400': '#ffb64d',
|
|
38
|
-
'--color-secondary-500': '#ff9700',
|
|
39
|
-
'--color-secondary-600': '#e68800',
|
|
40
|
-
'--color-secondary-700': '#bf7100',
|
|
41
|
-
'--color-secondary-800': '#995b00',
|
|
42
|
-
'--color-secondary-900': '#7d4a00',
|
|
43
|
-
// tertiary | #bee1da
|
|
44
|
-
'--color-tertiary-50': '#f5fbf9',
|
|
45
|
-
'--color-tertiary-100': '#f2f9f8',
|
|
46
|
-
'--color-tertiary-200': '#eff8f6',
|
|
47
|
-
'--color-tertiary-300': '#e5f3f0',
|
|
48
|
-
'--color-tertiary-400': '#d2eae5',
|
|
49
|
-
'--color-tertiary-500': '#bee1da',
|
|
50
|
-
'--color-tertiary-600': '#abcbc4',
|
|
51
|
-
'--color-tertiary-700': '#8fa9a4',
|
|
52
|
-
'--color-tertiary-800': '#728783',
|
|
53
|
-
'--color-tertiary-900': '#5d6e6b',
|
|
54
|
-
// success | #4BB543
|
|
55
|
-
'--color-success-50': '#e4f4e3',
|
|
56
|
-
'--color-success-100': '#dbf0d9',
|
|
57
|
-
'--color-success-200': '#d2edd0',
|
|
58
|
-
'--color-success-300': '#b7e1b4',
|
|
59
|
-
'--color-success-400': '#81cb7b',
|
|
60
|
-
'--color-success-500': '#4bb543',
|
|
61
|
-
'--color-success-600': '#44a33c',
|
|
62
|
-
'--color-success-700': '#388832',
|
|
63
|
-
'--color-success-800': '#2d6d28',
|
|
64
|
-
'--color-success-900': '#255921',
|
|
65
|
-
// warning | #EAB308
|
|
66
|
-
'--color-warning-50': '#fcf4da',
|
|
67
|
-
'--color-warning-100': '#fbf0ce',
|
|
68
|
-
'--color-warning-200': '#faecc1',
|
|
69
|
-
'--color-warning-300': '#f7e19c',
|
|
70
|
-
'--color-warning-400': '#f0ca52',
|
|
71
|
-
'--color-warning-500': '#eab308',
|
|
72
|
-
'--color-warning-600': '#d3a107',
|
|
73
|
-
'--color-warning-700': '#b08606',
|
|
74
|
-
'--color-warning-800': '#8c6b05',
|
|
75
|
-
'--color-warning-900': '#735804',
|
|
76
|
-
// error | #FF0000
|
|
77
|
-
'--color-error-50': '#ffd9d9',
|
|
78
|
-
'--color-error-100': '#ffcccc',
|
|
79
|
-
'--color-error-200': '#ffbfbf',
|
|
80
|
-
'--color-error-300': '#ff9999',
|
|
81
|
-
'--color-error-400': '#ff4d4d',
|
|
82
|
-
'--color-error-500': '#ff0000',
|
|
83
|
-
'--color-error-600': '#e60000',
|
|
84
|
-
'--color-error-700': '#bf0000',
|
|
85
|
-
'--color-error-800': '#990000',
|
|
86
|
-
'--color-error-900': '#7d0000',
|
|
87
|
-
// surface | #c7c7c7
|
|
88
|
-
'--color-surface-50': '#f7f7f7',
|
|
89
|
-
'--color-surface-100': '#f4f4f4',
|
|
90
|
-
'--color-surface-200': '#f1f1f1',
|
|
91
|
-
'--color-surface-300': '#e9e9e9',
|
|
92
|
-
'--color-surface-400': '#d8d8d8',
|
|
93
|
-
'--color-surface-500': '#c7c7c7',
|
|
94
|
-
'--color-surface-600': '#b3b3b3',
|
|
95
|
-
'--color-surface-700': '#959595',
|
|
96
|
-
'--color-surface-800': '#777777',
|
|
97
|
-
'--color-surface-900': '#626262'
|
|
98
|
-
},
|
|
99
|
-
properties_dark: {
|
|
100
|
-
// surface | #2e2e2e
|
|
101
|
-
'--color-surface-50': '#e0e0e0',
|
|
102
|
-
'--color-surface-100': '#d5d5d5',
|
|
103
|
-
'--color-surface-200': '#cbcbcb',
|
|
104
|
-
'--color-surface-300': '#ababab',
|
|
105
|
-
'--color-surface-400': '#6d6d6d',
|
|
106
|
-
'--color-surface-500': '#2e2e2e',
|
|
107
|
-
'--color-surface-600': '#292929',
|
|
108
|
-
'--color-surface-700': '#232323',
|
|
109
|
-
'--color-surface-800': '#1c1c1c',
|
|
110
|
-
'--color-surface-900': '#171717'
|
|
111
|
-
}
|
|
112
|
-
};
|
|
@@ -1,100 +0,0 @@
|
|
|
1
|
-
[data-theme='bexis2theme'] {
|
|
2
|
-
/* =~= Theme Properties =~= */
|
|
3
|
-
--base-font-family: system-ui;
|
|
4
|
-
--base-font-color: var(--color-surface-900);
|
|
5
|
-
--base-font-color-dark: 255 255 255;
|
|
6
|
-
/*--theme-rounded-base: 4px;
|
|
7
|
-
--theme-rounded-container: 4px;
|
|
8
|
-
--theme-border-base: 1px;*/
|
|
9
|
-
--radius-base: 4px;
|
|
10
|
-
--radius-container: 4px;
|
|
11
|
-
--default-border-width: 1px;
|
|
12
|
-
--default-divide-width: 1px;
|
|
13
|
-
--default-ring-width: 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: 255 255 255;
|
|
19
|
-
--on-warning: 255 255 255;
|
|
20
|
-
--on-error: 255 255 255;
|
|
21
|
-
--on-surface: 0 0 0;
|
|
22
|
-
/* =~= Theme Colors =~= */
|
|
23
|
-
/* primary | #45b2a1 */
|
|
24
|
-
--color-primary-50: #e3f3f1;
|
|
25
|
-
--color-primary-100: #daf0ec;
|
|
26
|
-
--color-primary-200: #d1ece8;
|
|
27
|
-
--color-primary-300: #b5e0d9;
|
|
28
|
-
--color-primary-400: #7dc9bd;
|
|
29
|
-
--color-primary-500: #45b2a1;
|
|
30
|
-
--color-primary-600: #3ea091;
|
|
31
|
-
--color-primary-700: #348679;
|
|
32
|
-
--color-primary-800: #296b61;
|
|
33
|
-
--color-primary-900: #22574f;
|
|
34
|
-
/* secondary | #ff9700 */
|
|
35
|
-
--color-secondary-50: #ffefd9;
|
|
36
|
-
--color-secondary-100: #ffeacc;
|
|
37
|
-
--color-secondary-200: #ffe5bf;
|
|
38
|
-
--color-secondary-300: #ffd599;
|
|
39
|
-
--color-secondary-400: #ffb64d;
|
|
40
|
-
--color-secondary-500: #ff9700;
|
|
41
|
-
--color-secondary-600: #e68800;
|
|
42
|
-
--color-secondary-700: #bf7100;
|
|
43
|
-
--color-secondary-800: #995b00;
|
|
44
|
-
--color-secondary-900: #7d4a00;
|
|
45
|
-
/* tertiary | #bee1da */
|
|
46
|
-
--color-tertiary-50: #f5fbf9;
|
|
47
|
-
--color-tertiary-100: #f2f9f8;
|
|
48
|
-
--color-tertiary-200: #eff8f6;
|
|
49
|
-
--color-tertiary-300: #e5f3f0;
|
|
50
|
-
--color-tertiary-400: #d2eae5;
|
|
51
|
-
--color-tertiary-500: #bee1da;
|
|
52
|
-
--color-tertiary-600: #abcbc4;
|
|
53
|
-
--color-tertiary-700: #8fa9a4;
|
|
54
|
-
--color-tertiary-800: #728783;
|
|
55
|
-
--color-tertiary-900: #5d6e6b;
|
|
56
|
-
/* success | #4BB543 */
|
|
57
|
-
--color-success-50: #e4f4e3;
|
|
58
|
-
--color-success-100: #dbf0d9;
|
|
59
|
-
--color-success-200: #d2edd0;
|
|
60
|
-
--color-success-300: #b7e1b4;
|
|
61
|
-
--color-success-400: #81cb7b;
|
|
62
|
-
--color-success-500: #4bb543;
|
|
63
|
-
--color-success-600: #44a33c;
|
|
64
|
-
--color-success-700: #388832;
|
|
65
|
-
--color-success-800: #2d6d28;
|
|
66
|
-
--color-success-900: #255921;
|
|
67
|
-
/* warning | #EAB308 */
|
|
68
|
-
--color-warning-50: #fcf4da;
|
|
69
|
-
--color-warning-100: #fbf0ce;
|
|
70
|
-
--color-warning-200: #faecc1;
|
|
71
|
-
--color-warning-300: #f7e19c;
|
|
72
|
-
--color-warning-400: #f0ca52;
|
|
73
|
-
--color-warning-500: #eab308;
|
|
74
|
-
--color-warning-600: #d3a107;
|
|
75
|
-
--color-warning-700: #b08606;
|
|
76
|
-
--color-warning-800: #8c6b05;
|
|
77
|
-
--color-warning-900: #735804;
|
|
78
|
-
/* error | #FF0000 */
|
|
79
|
-
--color-error-50: #ffd9d9;
|
|
80
|
-
--color-error-100: #ffcccc;
|
|
81
|
-
--color-error-200: #ffbfbf;
|
|
82
|
-
--color-error-300: #ff9999;
|
|
83
|
-
--color-error-400: #ff4d4d;
|
|
84
|
-
--color-error-500: #ff0000;
|
|
85
|
-
--color-error-600: #e60000;
|
|
86
|
-
--color-error-700: #bf0000;
|
|
87
|
-
--color-error-800: #990000;
|
|
88
|
-
--color-error-900: #7d0000;
|
|
89
|
-
/* surface | #c7c7c7 */
|
|
90
|
-
--color-surface-50: #f7f7f7;
|
|
91
|
-
--color-surface-100: #f4f4f4;
|
|
92
|
-
--color-surface-200: #f1f1f1;
|
|
93
|
-
--color-surface-300: #e9e9e9;
|
|
94
|
-
--color-surface-400: #d8d8d8;
|
|
95
|
-
--color-surface-500: #c7c7c7;
|
|
96
|
-
--color-surface-600: #b3b3b3;
|
|
97
|
-
--color-surface-700: #959595;
|
|
98
|
-
--color-surface-800: #777777;
|
|
99
|
-
--color-surface-900: #626262;
|
|
100
|
-
}
|
|
@@ -1,114 +0,0 @@
|
|
|
1
|
-
import type { CustomThemeConfig } from '@skeletonlabs/tw-plugin';
|
|
2
|
-
|
|
3
|
-
export const bexis2theme: CustomThemeConfig = {
|
|
4
|
-
name: 'bexis2theme',
|
|
5
|
-
properties: {
|
|
6
|
-
// =~= Theme Properties =~=
|
|
7
|
-
'--theme-font-family-base': `system-ui`,
|
|
8
|
-
'--theme-font-family-heading': `system-ui`,
|
|
9
|
-
'--theme-font-color-base': 'var(--color-surface-900)',
|
|
10
|
-
'--theme-font-color-dark': '#ffffff',
|
|
11
|
-
'--theme-rounded-base': '4px',
|
|
12
|
-
'--theme-rounded-container': '4px',
|
|
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': '255 255 255',
|
|
19
|
-
'--on-warning': '255 255 255',
|
|
20
|
-
'--on-error': '255 255 255',
|
|
21
|
-
'--on-surface': '255 255 255',
|
|
22
|
-
// =~= Theme Colors =~=
|
|
23
|
-
// primary | #45b2a1
|
|
24
|
-
'--color-primary-50': '#e3f3f1',
|
|
25
|
-
'--color-primary-100': '#daf0ec',
|
|
26
|
-
'--color-primary-200': '#d1ece8',
|
|
27
|
-
'--color-primary-300': '#b5e0d9',
|
|
28
|
-
'--color-primary-400': '#7dc9bd',
|
|
29
|
-
'--color-primary-500': '#45b2a1',
|
|
30
|
-
'--color-primary-600': '#3ea091',
|
|
31
|
-
'--color-primary-700': '#348679',
|
|
32
|
-
'--color-primary-800': '#296b61',
|
|
33
|
-
'--color-primary-900': '#22574f',
|
|
34
|
-
// secondary | #ff9700
|
|
35
|
-
'--color-secondary-50': '#ffefd9',
|
|
36
|
-
'--color-secondary-100': '#ffeacc',
|
|
37
|
-
'--color-secondary-200': '#ffe5bf',
|
|
38
|
-
'--color-secondary-300': '#ffd599',
|
|
39
|
-
'--color-secondary-400': '#ffb64d',
|
|
40
|
-
'--color-secondary-500': '#ff9700',
|
|
41
|
-
'--color-secondary-600': '#e68800',
|
|
42
|
-
'--color-secondary-700': '#bf7100',
|
|
43
|
-
'--color-secondary-800': '#995b00',
|
|
44
|
-
'--color-secondary-900': '#7d4a00',
|
|
45
|
-
// tertiary | #bee1da
|
|
46
|
-
'--color-tertiary-50': '#f5fbf9',
|
|
47
|
-
'--color-tertiary-100': '#f2f9f8',
|
|
48
|
-
'--color-tertiary-200': '#eff8f6',
|
|
49
|
-
'--color-tertiary-300': '#e5f3f0',
|
|
50
|
-
'--color-tertiary-400': '#d2eae5',
|
|
51
|
-
'--color-tertiary-500': '#bee1da',
|
|
52
|
-
'--color-tertiary-600': '#abcbc4',
|
|
53
|
-
'--color-tertiary-700': '#8fa9a4',
|
|
54
|
-
'--color-tertiary-800': '#728783',
|
|
55
|
-
'--color-tertiary-900': '#5d6e6b',
|
|
56
|
-
// success | #4BB543
|
|
57
|
-
'--color-success-50': '#e4f4e3',
|
|
58
|
-
'--color-success-100': '#dbf0d9',
|
|
59
|
-
'--color-success-200': '#d2edd0',
|
|
60
|
-
'--color-success-300': '#b7e1b4',
|
|
61
|
-
'--color-success-400': '#81cb7b',
|
|
62
|
-
'--color-success-500': '#4bb543',
|
|
63
|
-
'--color-success-600': '#44a33c',
|
|
64
|
-
'--color-success-700': '#388832',
|
|
65
|
-
'--color-success-800': '#2d6d28',
|
|
66
|
-
'--color-success-900': '#255921',
|
|
67
|
-
// warning | #EAB308
|
|
68
|
-
'--color-warning-50': '#fcf4da',
|
|
69
|
-
'--color-warning-100': '#fbf0ce',
|
|
70
|
-
'--color-warning-200': '#faecc1',
|
|
71
|
-
'--color-warning-300': '#f7e19c',
|
|
72
|
-
'--color-warning-400': '#f0ca52',
|
|
73
|
-
'--color-warning-500': '#eab308',
|
|
74
|
-
'--color-warning-600': '#d3a107',
|
|
75
|
-
'--color-warning-700': '#b08606',
|
|
76
|
-
'--color-warning-800': '#8c6b05',
|
|
77
|
-
'--color-warning-900': '#735804',
|
|
78
|
-
// error | #FF0000
|
|
79
|
-
'--color-error-50': '#ffd9d9',
|
|
80
|
-
'--color-error-100': '#ffcccc',
|
|
81
|
-
'--color-error-200': '#ffbfbf',
|
|
82
|
-
'--color-error-300': '#ff9999',
|
|
83
|
-
'--color-error-400': '#ff4d4d',
|
|
84
|
-
'--color-error-500': '#ff0000',
|
|
85
|
-
'--color-error-600': '#e60000',
|
|
86
|
-
'--color-error-700': '#bf0000',
|
|
87
|
-
'--color-error-800': '#990000',
|
|
88
|
-
'--color-error-900': '#7d0000',
|
|
89
|
-
// surface | #c7c7c7
|
|
90
|
-
'--color-surface-50': '#f7f7f7',
|
|
91
|
-
'--color-surface-100': '#f4f4f4',
|
|
92
|
-
'--color-surface-200': '#f1f1f1',
|
|
93
|
-
'--color-surface-300': '#e9e9e9',
|
|
94
|
-
'--color-surface-400': '#d8d8d8',
|
|
95
|
-
'--color-surface-500': '#c7c7c7',
|
|
96
|
-
'--color-surface-600': '#b3b3b3',
|
|
97
|
-
'--color-surface-700': '#959595',
|
|
98
|
-
'--color-surface-800': '#777777',
|
|
99
|
-
'--color-surface-900': '#626262'
|
|
100
|
-
},
|
|
101
|
-
properties_dark: {
|
|
102
|
-
// surface | #2e2e2e
|
|
103
|
-
'--color-surface-50': '#e0e0e0',
|
|
104
|
-
'--color-surface-100': '#d5d5d5',
|
|
105
|
-
'--color-surface-200': '#cbcbcb',
|
|
106
|
-
'--color-surface-300': '#ababab',
|
|
107
|
-
'--color-surface-400': '#6d6d6d',
|
|
108
|
-
'--color-surface-500': '#2e2e2e',
|
|
109
|
-
'--color-surface-600': '#292929',
|
|
110
|
-
'--color-surface-700': '#232323',
|
|
111
|
-
'--color-surface-800': '#1c1c1c',
|
|
112
|
-
'--color-surface-900': '#171717'
|
|
113
|
-
}
|
|
114
|
-
};
|