@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.
Files changed (42) hide show
  1. package/README.md +5 -0
  2. package/dist/components/Table/TableContent.svelte +10 -9
  3. package/dist/components/form/Checkbox.svelte +10 -0
  4. package/dist/components/form/Checkbox.svelte.d.ts +1 -0
  5. package/dist/components/form/CheckboxKvPList.svelte +10 -1
  6. package/dist/components/form/CheckboxKvPList.svelte.d.ts +1 -0
  7. package/dist/components/form/CheckboxList.svelte +9 -1
  8. package/dist/components/form/CheckboxList.svelte.d.ts +1 -0
  9. package/dist/components/form/DateInput.svelte +9 -0
  10. package/dist/components/form/DateInput.svelte.d.ts +1 -0
  11. package/dist/components/form/DatePickerInput.svelte +8 -0
  12. package/dist/components/form/DatePickerInput.svelte.d.ts +1 -0
  13. package/dist/components/form/Dropdown.svelte +13 -1
  14. package/dist/components/form/Dropdown.svelte.d.ts +2 -0
  15. package/dist/components/form/DropdownKvP.svelte +12 -1
  16. package/dist/components/form/DropdownKvP.svelte.d.ts +2 -0
  17. package/dist/components/form/MultiSelect.svelte +11 -1
  18. package/dist/components/form/MultiSelect.svelte.d.ts +2 -0
  19. package/dist/components/form/NumberInput.svelte +9 -0
  20. package/dist/components/form/NumberInput.svelte.d.ts +1 -0
  21. package/dist/components/form/TextArea.svelte +9 -0
  22. package/dist/components/form/TextArea.svelte.d.ts +1 -0
  23. package/dist/components/form/TextInput.svelte +9 -0
  24. package/dist/components/form/TextInput.svelte.d.ts +1 -0
  25. package/package.json +1 -1
  26. package/src/lib/components/Table/TableContent.svelte +12 -10
  27. package/src/lib/components/form/Checkbox.svelte +14 -0
  28. package/src/lib/components/form/CheckboxKvPList.svelte +11 -1
  29. package/src/lib/components/form/CheckboxList.svelte +11 -1
  30. package/src/lib/components/form/DateInput.svelte +12 -0
  31. package/src/lib/components/form/DatePickerInput.svelte +10 -0
  32. package/src/lib/components/form/Dropdown.svelte +13 -1
  33. package/src/lib/components/form/DropdownKvP.svelte +12 -1
  34. package/src/lib/components/form/MultiSelect.svelte +11 -1
  35. package/src/lib/components/form/NumberInput.svelte +10 -0
  36. package/src/lib/components/form/TextArea.svelte +10 -0
  37. package/src/lib/components/form/TextInput.svelte +11 -0
  38. package/dist/css/themes/theme-bexis2.css_old +0 -100
  39. package/dist/themes/theme-bexis2 copy.d.ts +0 -2
  40. package/dist/themes/theme-bexis2 copy.js +0 -112
  41. package/src/lib/css/themes/theme-bexis2.css_old +0 -100
  42. 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={title}
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={title}
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={title}
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,2 +0,0 @@
1
- import type { CustomThemeConfig } from '@skeletonlabs/tw-plugin';
2
- export declare const bexis2theme: CustomThemeConfig;
@@ -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
- };