@bexis2/bexis2-core-ui 0.2.28 → 0.2.30

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 (98) hide show
  1. package/README.md +21 -2
  2. package/dist/TableView.svelte +1 -1
  3. package/dist/components/{file → File}/FileIcon.svelte +45 -45
  4. package/{src/lib/components/file → dist/components/File}/FileInfo.svelte +13 -13
  5. package/dist/components/ListView.svelte +5 -5
  6. package/dist/components/Table/Table.svelte +17 -2
  7. package/dist/components/Table/TableFilter.svelte +13 -6
  8. package/dist/components/form/Checkbox.svelte +13 -13
  9. package/dist/components/form/CheckboxKvPList.svelte +16 -16
  10. package/dist/components/form/CheckboxList.svelte +10 -10
  11. package/dist/components/form/DateInput.svelte +15 -13
  12. package/dist/components/form/DateInput.svelte.d.ts +1 -0
  13. package/dist/components/form/DropdownKvP.svelte +54 -54
  14. package/dist/components/form/MultiSelect.svelte +181 -181
  15. package/dist/components/form/NumberInput.svelte +16 -14
  16. package/dist/components/form/NumberInput.svelte.d.ts +1 -0
  17. package/dist/components/form/TextArea.svelte +15 -13
  18. package/dist/components/form/TextArea.svelte.d.ts +1 -0
  19. package/dist/components/form/TextInput.svelte +16 -14
  20. package/dist/components/form/TextInput.svelte.d.ts +1 -0
  21. package/dist/components/page/Alert.svelte +28 -28
  22. package/dist/components/page/BackToTop.svelte +30 -30
  23. package/dist/components/page/Docs.svelte +22 -22
  24. package/dist/components/page/ErrorMessage.svelte +8 -8
  25. package/dist/components/page/Footer.svelte +5 -5
  26. package/dist/components/page/Header.svelte +5 -5
  27. package/dist/components/page/HelpPopUp.svelte +30 -30
  28. package/dist/components/page/PageCaller.js +19 -19
  29. package/dist/components/page/Spinner.svelte +14 -14
  30. package/dist/components/page/breadcrumb/Breadcrumb.svelte +19 -19
  31. package/dist/components/page/menu/MenuDataCaller.js +10 -10
  32. package/dist/css/core.ui.postcss +17 -17
  33. package/dist/css/themes/theme-bexis2.css +96 -96
  34. package/dist/css/themes/theme-crimson.css +101 -101
  35. package/dist/css/themes/theme-gold-nouveau.css +140 -140
  36. package/dist/css/themes/theme-hamlindigo.css +112 -112
  37. package/dist/css/themes/theme-modern.css +127 -127
  38. package/dist/css/themes/theme-rocket.css +119 -119
  39. package/dist/css/themes/theme-sahara.css +128 -128
  40. package/dist/css/themes/theme-seafoam.css +122 -122
  41. package/dist/css/themes/theme-seasonal.css +115 -115
  42. package/dist/css/themes/theme-skeleton.css +118 -118
  43. package/dist/css/themes/theme-vintage.css +125 -125
  44. package/dist/index.d.ts +3 -3
  45. package/dist/index.js +3 -3
  46. package/dist/models/Models.d.ts +3 -3
  47. package/dist/services/BaseCaller.js +16 -16
  48. package/package.json +1 -1
  49. package/src/lib/TableView.svelte +1 -1
  50. package/src/lib/components/{file → File}/FileIcon.svelte +45 -45
  51. package/{dist/components/file → src/lib/components/File}/FileInfo.svelte +13 -13
  52. package/src/lib/components/ListView.svelte +11 -11
  53. package/src/lib/components/Table/Table.svelte +19 -3
  54. package/src/lib/components/Table/TableFilter.svelte +15 -6
  55. package/src/lib/components/Table/filter.ts +141 -141
  56. package/src/lib/components/form/Checkbox.svelte +24 -24
  57. package/src/lib/components/form/CheckboxKvPList.svelte +29 -29
  58. package/src/lib/components/form/CheckboxList.svelte +21 -21
  59. package/src/lib/components/form/DateInput.svelte +27 -25
  60. package/src/lib/components/form/DropdownKvP.svelte +54 -54
  61. package/src/lib/components/form/MultiSelect.svelte +181 -181
  62. package/src/lib/components/form/NumberInput.svelte +30 -28
  63. package/src/lib/components/form/TextArea.svelte +28 -26
  64. package/src/lib/components/form/TextInput.svelte +28 -26
  65. package/src/lib/components/page/Alert.svelte +41 -41
  66. package/src/lib/components/page/BackToTop.svelte +30 -30
  67. package/src/lib/components/page/Docs.svelte +46 -46
  68. package/src/lib/components/page/ErrorMessage.svelte +10 -10
  69. package/src/lib/components/page/Footer.svelte +18 -18
  70. package/src/lib/components/page/Header.svelte +18 -18
  71. package/src/lib/components/page/HelpPopUp.svelte +72 -72
  72. package/src/lib/components/page/PageCaller.js +19 -19
  73. package/src/lib/components/page/Spinner.svelte +20 -20
  74. package/src/lib/components/page/breadcrumb/Breadcrumb.svelte +39 -39
  75. package/src/lib/components/page/menu/MenuDataCaller.js +10 -10
  76. package/src/lib/css/core.ui.postcss +17 -17
  77. package/src/lib/css/themes/theme-bexis2.css +96 -96
  78. package/src/lib/css/themes/theme-crimson.css +101 -101
  79. package/src/lib/css/themes/theme-gold-nouveau.css +140 -140
  80. package/src/lib/css/themes/theme-hamlindigo.css +112 -112
  81. package/src/lib/css/themes/theme-modern.css +127 -127
  82. package/src/lib/css/themes/theme-rocket.css +119 -119
  83. package/src/lib/css/themes/theme-sahara.css +128 -128
  84. package/src/lib/css/themes/theme-seafoam.css +122 -122
  85. package/src/lib/css/themes/theme-seasonal.css +115 -115
  86. package/src/lib/css/themes/theme-skeleton.css +118 -118
  87. package/src/lib/css/themes/theme-vintage.css +125 -125
  88. package/src/lib/index.ts +3 -3
  89. package/src/lib/models/Models.ts +3 -3
  90. package/src/lib/models/Page.ts +40 -40
  91. package/src/lib/services/Api.ts +55 -55
  92. package/src/lib/services/BaseCaller.js +16 -16
  93. package/src/lib/stores/apiStores.ts +31 -31
  94. /package/dist/components/{file → File}/FileIcon.svelte.d.ts +0 -0
  95. /package/dist/components/{file → File}/FileInfo.svelte.d.ts +0 -0
  96. /package/dist/components/{file → File}/FileUploader.svelte +0 -0
  97. /package/dist/components/{file → File}/FileUploader.svelte.d.ts +0 -0
  98. /package/src/lib/components/{file → File}/FileUploader.svelte +0 -0
@@ -1,9 +1,9 @@
1
1
  <script>export let error;
2
- </script>
3
-
4
- <div class="card bg-error-300 border-solid border-2 border-error-500 shadow-md max-w-md">
5
- <div class="p-5 space-y-4">
6
- <h3 class="h3">{error.name}</h3>
7
- <p>{error.message}</p>
8
- </div>
9
- </div>
2
+ </script>
3
+
4
+ <div class="card bg-error-300 border-solid border-2 border-error-500 shadow-md max-w-md">
5
+ <div class="p-5 space-y-4">
6
+ <h3 class="h3">{error.name}</h3>
7
+ <p>{error.message}</p>
8
+ </div>
9
+ </div>
@@ -8,8 +8,8 @@ onMount(async () => {
8
8
  content = await getFooter();
9
9
  console.log(content);
10
10
  });
11
- </script>
12
-
13
- {#if content != undefined}
14
- {@html content}
15
- {/if}
11
+ </script>
12
+
13
+ {#if content != undefined}
14
+ {@html content}
15
+ {/if}
@@ -8,8 +8,8 @@ onMount(async () => {
8
8
  content = await getHeader();
9
9
  console.log(content);
10
10
  });
11
- </script>
12
-
13
- {#if content != undefined}
14
- {@html content}
15
- {/if}
11
+ </script>
12
+
13
+ {#if content != undefined}
14
+ {@html content}
15
+ {/if}
@@ -26,33 +26,33 @@ async function resetItemId() {
26
26
  await delay(100);
27
27
  helpStore.resetItemId();
28
28
  }
29
- </script>
30
-
31
- {#if active}
32
- <button
33
- id="helpButton"
34
- class="chip variant-filled-warning fixed bottom-5 right-10 shadow-md"
35
- use:popup={helpClick}><Fa icon={faQuestion} /></button
36
- >
37
-
38
- <div
39
- class="card bg-primary-300 border-solid border-2 border-primary-500 shadow-md"
40
- data-popup="helpTarget"
41
- >
42
- {#if helpItem && helpItem.id}
43
- <div class="p-5 w-96 space-y-4" id={'helpPopup.' + helpItem.id}>
44
- <h3 class="h3">{helpItem.name}</h3>
45
- <p>{@html helpItem.description}</p>
46
- {#if helpItem.link}
47
- <p><a class="anchor" href={helpItem.link}>... read more</a></p>
48
- {/if}
49
- </div>
50
- {:else}
51
- <div class="p-5 w-96 space-y-4" id="helpPopup">
52
- <h3 class="h3">Help</h3>
53
- <p>Hover over the Element, you like to know more about.</p>
54
- </div>
55
- {/if}
56
- <div class="arrow variant-filled-primary" />
57
- </div>
58
- {/if}
29
+ </script>
30
+
31
+ {#if active}
32
+ <button
33
+ id="helpButton"
34
+ class="chip variant-filled-warning fixed bottom-5 right-10 shadow-md"
35
+ use:popup={helpClick}><Fa icon={faQuestion} /></button
36
+ >
37
+
38
+ <div
39
+ class="card bg-primary-300 border-solid border-2 border-primary-500 shadow-md"
40
+ data-popup="helpTarget"
41
+ >
42
+ {#if helpItem && helpItem.id}
43
+ <div class="p-5 w-96 space-y-4" id={'helpPopup.' + helpItem.id}>
44
+ <h3 class="h3">{helpItem.name}</h3>
45
+ <p>{@html helpItem.description}</p>
46
+ {#if helpItem.link}
47
+ <p><a class="anchor" href={helpItem.link}>... read more</a></p>
48
+ {/if}
49
+ </div>
50
+ {:else}
51
+ <div class="p-5 w-96 space-y-4" id="helpPopup">
52
+ <h3 class="h3">Help</h3>
53
+ <p>Hover over the Element, you like to know more about.</p>
54
+ </div>
55
+ {/if}
56
+ <div class="arrow variant-filled-primary" />
57
+ </div>
58
+ {/if}
@@ -1,19 +1,19 @@
1
- import { Api } from '../../services/Api';
2
-
3
- export const getFooter = async () => {
4
- try {
5
- const response = await Api.get('/footer');
6
- return response.data;
7
- } catch (error) {
8
- console.error(error);
9
- }
10
- };
11
-
12
- export const getHeader = async () => {
13
- try {
14
- const response = await Api.get('/header');
15
- return response.data;
16
- } catch (error) {
17
- console.error(error);
18
- }
19
- };
1
+ import { Api } from '../../services/Api';
2
+
3
+ export const getFooter = async () => {
4
+ try {
5
+ const response = await Api.get('/footer');
6
+ return response.data;
7
+ } catch (error) {
8
+ console.error(error);
9
+ }
10
+ };
11
+
12
+ export const getHeader = async () => {
13
+ try {
14
+ const response = await Api.get('/header');
15
+ return response.data;
16
+ } catch (error) {
17
+ console.error(error);
18
+ }
19
+ };
@@ -2,17 +2,17 @@
2
2
  export let textCss = "text-surface-600";
3
3
  export let label = "";
4
4
  export let position = positionType.center;
5
- </script>
6
-
7
- <div class="flex justify-{position} items-{position} h-full w-full gap-5 pt-2 {textCss}">
8
- <div
9
- 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]"
10
- role="status"
11
- >
12
- <span
13
- class="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]"
14
- >Loading...</span
15
- >
16
- </div>
17
- <span>{label}</span>
18
- </div>
5
+ </script>
6
+
7
+ <div class="flex justify-{position} items-{position} h-full w-full gap-5 pt-2 {textCss}">
8
+ <div
9
+ 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]"
10
+ role="status"
11
+ >
12
+ <span
13
+ class="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]"
14
+ >Loading...</span
15
+ >
16
+ </div>
17
+ <span>{label}</span>
18
+ </div>
@@ -12,22 +12,22 @@ $:
12
12
  breadcrumbStore.subscribe((value) => {
13
13
  list = value?.items;
14
14
  });
15
- </script>
16
-
17
- <div class="px-5 py-2">
18
- <ol class="breadcrumb -p50">
19
- <!--default home-->
20
- <li class="crumb"><a class="anchor" href={'/'}>Home</a></li>
21
- <li class="crumb-separator" aria-hidden>&rsaquo;</li>
22
-
23
- {#each list as crumb, i}
24
- <!-- If crumb index is less than the breadcrumb length minus 1 -->
25
- {#if i < list.length - 1}
26
- <li class="crumb"><a class="anchor" href={crumb.link}>{crumb.label}</a></li>
27
- <li class="crumb-separator" aria-hidden>&rsaquo;</li>
28
- {:else}
29
- <li class="crumb">{crumb.label}</li>
30
- {/if}
31
- {/each}
32
- </ol>
33
- </div>
15
+ </script>
16
+
17
+ <div class="px-5 py-2">
18
+ <ol class="breadcrumb -p50">
19
+ <!--default home-->
20
+ <li class="crumb"><a class="anchor" href={'/'}>Home</a></li>
21
+ <li class="crumb-separator" aria-hidden>&rsaquo;</li>
22
+
23
+ {#each list as crumb, i}
24
+ <!-- If crumb index is less than the breadcrumb length minus 1 -->
25
+ {#if i < list.length - 1}
26
+ <li class="crumb"><a class="anchor" href={crumb.link}>{crumb.label}</a></li>
27
+ <li class="crumb-separator" aria-hidden>&rsaquo;</li>
28
+ {:else}
29
+ <li class="crumb">{crumb.label}</li>
30
+ {/if}
31
+ {/each}
32
+ </ol>
33
+ </div>
@@ -1,10 +1,10 @@
1
- import { Api } from '../../../services/Api';
2
-
3
- export const getMenuItems = async () => {
4
- try {
5
- const response = await Api.get('/menu');
6
- return response.data;
7
- } catch (error) {
8
- console.error(error);
9
- }
10
- };
1
+ import { Api } from '../../../services/Api';
2
+
3
+ export const getMenuItems = async () => {
4
+ try {
5
+ const response = await Api.get('/menu');
6
+ return response.data;
7
+ } catch (error) {
8
+ console.error(error);
9
+ }
10
+ };
@@ -1,17 +1,17 @@
1
- /*place global styles here */
2
- html,
3
- body {
4
- @apply h-full;
5
- }
6
-
7
- h1 {
8
- @apply text-primary-500;
9
- }
10
-
11
- :root {
12
- --background: rgb(var(--color-surface-200));
13
- }
14
-
15
- [type='text']:focus {
16
- --tw-ring-color: #00000;
17
- }
1
+ /*place global styles here */
2
+ html,
3
+ body {
4
+ @apply h-full;
5
+ }
6
+
7
+ h1 {
8
+ @apply text-primary-500;
9
+ }
10
+
11
+ :root {
12
+ --background: rgb(var(--color-surface-200));
13
+ }
14
+
15
+ [type='text']:focus {
16
+ --tw-ring-color: #00000;
17
+ }
@@ -1,96 +1,96 @@
1
- :root {
2
- /* =~= Theme Properties =~= */
3
- --theme-font-family-base: system-ui;
4
- --theme-font-family-heading: system-ui;
5
- --theme-font-color-base: var(--color-surface-900);
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: 255 255 255;
12
- --on-secondary: 255 255 255;
13
- --on-tertiary: 0 0 0;
14
- --on-success: 255 255 255;
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 | #EAB308 */
64
- --color-warning-50: 252 244 218; /* ⬅ #fcf4da */
65
- --color-warning-100: 251 240 206; /* ⬅ #fbf0ce */
66
- --color-warning-200: 250 236 193; /* ⬅ #faecc1 */
67
- --color-warning-300: 247 225 156; /* ⬅ #f7e19c */
68
- --color-warning-400: 240 202 82; /* ⬅ #f0ca52 */
69
- --color-warning-500: 234 179 8; /* ⬅ #EAB308 */
70
- --color-warning-600: 211 161 7; /* ⬅ #d3a107 */
71
- --color-warning-700: 176 134 6; /* ⬅ #b08606 */
72
- --color-warning-800: 140 107 5; /* ⬅ #8c6b05 */
73
- --color-warning-900: 115 88 4; /* ⬅ #735804 */
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 | #c7c7c7 */
86
- --color-surface-50: 247 247 247; /* ⬅ #f7f7f7 */
87
- --color-surface-100: 244 244 244; /* ⬅ #f4f4f4 */
88
- --color-surface-200: 241 241 241; /* ⬅ #f1f1f1 */
89
- --color-surface-300: 233 233 233; /* ⬅ #e9e9e9 */
90
- --color-surface-400: 216 216 216; /* ⬅ #d8d8d8 */
91
- --color-surface-500: 199 199 199; /* ⬅ #c7c7c7 */
92
- --color-surface-600: 179 179 179; /* ⬅ #b3b3b3 */
93
- --color-surface-700: 149 149 149; /* ⬅ #959595 */
94
- --color-surface-800: 119 119 119; /* ⬅ #777777 */
95
- --color-surface-900: 98 98 98; /* ⬅ #626262 */
96
- }
1
+ :root {
2
+ /* =~= Theme Properties =~= */
3
+ --theme-font-family-base: system-ui;
4
+ --theme-font-family-heading: system-ui;
5
+ --theme-font-color-base: var(--color-surface-900);
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: 255 255 255;
12
+ --on-secondary: 255 255 255;
13
+ --on-tertiary: 0 0 0;
14
+ --on-success: 255 255 255;
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 | #EAB308 */
64
+ --color-warning-50: 252 244 218; /* ⬅ #fcf4da */
65
+ --color-warning-100: 251 240 206; /* ⬅ #fbf0ce */
66
+ --color-warning-200: 250 236 193; /* ⬅ #faecc1 */
67
+ --color-warning-300: 247 225 156; /* ⬅ #f7e19c */
68
+ --color-warning-400: 240 202 82; /* ⬅ #f0ca52 */
69
+ --color-warning-500: 234 179 8; /* ⬅ #EAB308 */
70
+ --color-warning-600: 211 161 7; /* ⬅ #d3a107 */
71
+ --color-warning-700: 176 134 6; /* ⬅ #b08606 */
72
+ --color-warning-800: 140 107 5; /* ⬅ #8c6b05 */
73
+ --color-warning-900: 115 88 4; /* ⬅ #735804 */
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 | #c7c7c7 */
86
+ --color-surface-50: 247 247 247; /* ⬅ #f7f7f7 */
87
+ --color-surface-100: 244 244 244; /* ⬅ #f4f4f4 */
88
+ --color-surface-200: 241 241 241; /* ⬅ #f1f1f1 */
89
+ --color-surface-300: 233 233 233; /* ⬅ #e9e9e9 */
90
+ --color-surface-400: 216 216 216; /* ⬅ #d8d8d8 */
91
+ --color-surface-500: 199 199 199; /* ⬅ #c7c7c7 */
92
+ --color-surface-600: 179 179 179; /* ⬅ #b3b3b3 */
93
+ --color-surface-700: 149 149 149; /* ⬅ #959595 */
94
+ --color-surface-800: 119 119 119; /* ⬅ #777777 */
95
+ --color-surface-900: 98 98 98; /* ⬅ #626262 */
96
+ }