@bexis2/bexis2-core-ui 0.2.31 → 0.2.32

package/src/lib/css/core.ui.postcss

@@ -1,17 +1,17 @@
-/*place global styles here */
-html,
-body {
-	@apply h-full;
-}
-
-h1 {
-	@apply text-primary-500;
-}
-
-:root {
-	--background: rgb(var(--color-surface-200));
-}
-
-[type='text']:focus {
-	--tw-ring-color: #00000;
-}
+/*place global styles here */
+html,
+body {
+	@apply h-full;
+}
+
+h1 {
+	@apply text-primary-500;
+}
+
+:root {
+	--background: rgb(var(--color-surface-200));
+}
+
+[type='text']:focus {
+	--tw-ring-color: #00000;
+}

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

@@ -1,96 +1,96 @@
-:root {
-	/* =~= Theme Properties =~= */
-	--theme-font-family-base: system-ui;
-	--theme-font-family-heading: system-ui;
-	--theme-font-color-base: var(--color-surface-900);
-	--theme-font-color-dark: 255 255 255;
-	--theme-rounded-base: 4px;
-	--theme-rounded-container: 4px;
-	--theme-border-base: 1px;
-	/* =~= Theme On-X Colors =~= */
-	--on-primary: 255 255 255;
-	--on-secondary: 255 255 255;
-	--on-tertiary: 0 0 0;
-	--on-success: 255 255 255;
-	--on-warning: 255 255 255;
-	--on-error: 255 255 255;
-	--on-surface: 0 0 0;
-	/* =~= Theme Colors  =~= */
-	/* primary | #45b2a1 */
-	--color-primary-50: 227 243 241; /* ⬅ #e3f3f1 */
-	--color-primary-100: 218 240 236; /* ⬅ #daf0ec */
-	--color-primary-200: 209 236 232; /* ⬅ #d1ece8 */
-	--color-primary-300: 181 224 217; /* ⬅ #b5e0d9 */
-	--color-primary-400: 125 201 189; /* ⬅ #7dc9bd */
-	--color-primary-500: 69 178 161; /* ⬅ #45b2a1 */
-	--color-primary-600: 62 160 145; /* ⬅ #3ea091 */
-	--color-primary-700: 52 134 121; /* ⬅ #348679 */
-	--color-primary-800: 41 107 97; /* ⬅ #296b61 */
-	--color-primary-900: 34 87 79; /* ⬅ #22574f */
-	/* secondary | #ff9700 */
-	--color-secondary-50: 255 239 217; /* ⬅ #ffefd9 */
-	--color-secondary-100: 255 234 204; /* ⬅ #ffeacc */
-	--color-secondary-200: 255 229 191; /* ⬅ #ffe5bf */
-	--color-secondary-300: 255 213 153; /* ⬅ #ffd599 */
-	--color-secondary-400: 255 182 77; /* ⬅ #ffb64d */
-	--color-secondary-500: 255 151 0; /* ⬅ #ff9700 */
-	--color-secondary-600: 230 136 0; /* ⬅ #e68800 */
-	--color-secondary-700: 191 113 0; /* ⬅ #bf7100 */
-	--color-secondary-800: 153 91 0; /* ⬅ #995b00 */
-	--color-secondary-900: 125 74 0; /* ⬅ #7d4a00 */
-	/* tertiary | #bee1da */
-	--color-tertiary-50: 245 251 249; /* ⬅ #f5fbf9 */
-	--color-tertiary-100: 242 249 248; /* ⬅ #f2f9f8 */
-	--color-tertiary-200: 239 248 246; /* ⬅ #eff8f6 */
-	--color-tertiary-300: 229 243 240; /* ⬅ #e5f3f0 */
-	--color-tertiary-400: 210 234 229; /* ⬅ #d2eae5 */
-	--color-tertiary-500: 190 225 218; /* ⬅ #bee1da */
-	--color-tertiary-600: 171 203 196; /* ⬅ #abcbc4 */
-	--color-tertiary-700: 143 169 164; /* ⬅ #8fa9a4 */
-	--color-tertiary-800: 114 135 131; /* ⬅ #728783 */
-	--color-tertiary-900: 93 110 107; /* ⬅ #5d6e6b */
-	/* success | #4BB543 */
-	--color-success-50: 228 244 227; /* ⬅ #e4f4e3 */
-	--color-success-100: 219 240 217; /* ⬅ #dbf0d9 */
-	--color-success-200: 210 237 208; /* ⬅ #d2edd0 */
-	--color-success-300: 183 225 180; /* ⬅ #b7e1b4 */
-	--color-success-400: 129 203 123; /* ⬅ #81cb7b */
-	--color-success-500: 75 181 67; /* ⬅ #4BB543 */
-	--color-success-600: 68 163 60; /* ⬅ #44a33c */
-	--color-success-700: 56 136 50; /* ⬅ #388832 */
-	--color-success-800: 45 109 40; /* ⬅ #2d6d28 */
-	--color-success-900: 37 89 33; /* ⬅ #255921 */
-	/* warning | #EAB308 */
-	--color-warning-50: 252 244 218; /* ⬅ #fcf4da */
-	--color-warning-100: 251 240 206; /* ⬅ #fbf0ce */
-	--color-warning-200: 250 236 193; /* ⬅ #faecc1 */
-	--color-warning-300: 247 225 156; /* ⬅ #f7e19c */
-	--color-warning-400: 240 202 82; /* ⬅ #f0ca52 */
-	--color-warning-500: 234 179 8; /* ⬅ #EAB308 */
-	--color-warning-600: 211 161 7; /* ⬅ #d3a107 */
-	--color-warning-700: 176 134 6; /* ⬅ #b08606 */
-	--color-warning-800: 140 107 5; /* ⬅ #8c6b05 */
-	--color-warning-900: 115 88 4; /* ⬅ #735804 */
-	/* error | #FF0000 */
-	--color-error-50: 255 217 217; /* ⬅ #ffd9d9 */
-	--color-error-100: 255 204 204; /* ⬅ #ffcccc */
-	--color-error-200: 255 191 191; /* ⬅ #ffbfbf */
-	--color-error-300: 255 153 153; /* ⬅ #ff9999 */
-	--color-error-400: 255 77 77; /* ⬅ #ff4d4d */
-	--color-error-500: 255 0 0; /* ⬅ #FF0000 */
-	--color-error-600: 230 0 0; /* ⬅ #e60000 */
-	--color-error-700: 191 0 0; /* ⬅ #bf0000 */
-	--color-error-800: 153 0 0; /* ⬅ #990000 */
-	--color-error-900: 125 0 0; /* ⬅ #7d0000 */
-	/* surface | #c7c7c7 */
-	--color-surface-50: 247 247 247; /* ⬅ #f7f7f7 */
-	--color-surface-100: 244 244 244; /* ⬅ #f4f4f4 */
-	--color-surface-200: 241 241 241; /* ⬅ #f1f1f1 */
-	--color-surface-300: 233 233 233; /* ⬅ #e9e9e9 */
-	--color-surface-400: 216 216 216; /* ⬅ #d8d8d8 */
-	--color-surface-500: 199 199 199; /* ⬅ #c7c7c7 */
-	--color-surface-600: 179 179 179; /* ⬅ #b3b3b3 */
-	--color-surface-700: 149 149 149; /* ⬅ #959595 */
-	--color-surface-800: 119 119 119; /* ⬅ #777777 */
-	--color-surface-900: 98 98 98; /* ⬅ #626262 */
-}
+:root {
+	/* =~= Theme Properties =~= */
+	--theme-font-family-base: system-ui;
+	--theme-font-family-heading: system-ui;
+	--theme-font-color-base: var(--color-surface-900);
+	--theme-font-color-dark: 255 255 255;
+	--theme-rounded-base: 4px;
+	--theme-rounded-container: 4px;
+	--theme-border-base: 1px;
+	/* =~= Theme On-X Colors =~= */
+	--on-primary: 255 255 255;
+	--on-secondary: 255 255 255;
+	--on-tertiary: 0 0 0;
+	--on-success: 255 255 255;
+	--on-warning: 255 255 255;
+	--on-error: 255 255 255;
+	--on-surface: 0 0 0;
+	/* =~= Theme Colors  =~= */
+	/* primary | #45b2a1 */
+	--color-primary-50: 227 243 241; /* ⬅ #e3f3f1 */
+	--color-primary-100: 218 240 236; /* ⬅ #daf0ec */
+	--color-primary-200: 209 236 232; /* ⬅ #d1ece8 */
+	--color-primary-300: 181 224 217; /* ⬅ #b5e0d9 */
+	--color-primary-400: 125 201 189; /* ⬅ #7dc9bd */
+	--color-primary-500: 69 178 161; /* ⬅ #45b2a1 */
+	--color-primary-600: 62 160 145; /* ⬅ #3ea091 */
+	--color-primary-700: 52 134 121; /* ⬅ #348679 */
+	--color-primary-800: 41 107 97; /* ⬅ #296b61 */
+	--color-primary-900: 34 87 79; /* ⬅ #22574f */
+	/* secondary | #ff9700 */
+	--color-secondary-50: 255 239 217; /* ⬅ #ffefd9 */
+	--color-secondary-100: 255 234 204; /* ⬅ #ffeacc */
+	--color-secondary-200: 255 229 191; /* ⬅ #ffe5bf */
+	--color-secondary-300: 255 213 153; /* ⬅ #ffd599 */
+	--color-secondary-400: 255 182 77; /* ⬅ #ffb64d */
+	--color-secondary-500: 255 151 0; /* ⬅ #ff9700 */
+	--color-secondary-600: 230 136 0; /* ⬅ #e68800 */
+	--color-secondary-700: 191 113 0; /* ⬅ #bf7100 */
+	--color-secondary-800: 153 91 0; /* ⬅ #995b00 */
+	--color-secondary-900: 125 74 0; /* ⬅ #7d4a00 */
+	/* tertiary | #bee1da */
+	--color-tertiary-50: 245 251 249; /* ⬅ #f5fbf9 */
+	--color-tertiary-100: 242 249 248; /* ⬅ #f2f9f8 */
+	--color-tertiary-200: 239 248 246; /* ⬅ #eff8f6 */
+	--color-tertiary-300: 229 243 240; /* ⬅ #e5f3f0 */
+	--color-tertiary-400: 210 234 229; /* ⬅ #d2eae5 */
+	--color-tertiary-500: 190 225 218; /* ⬅ #bee1da */
+	--color-tertiary-600: 171 203 196; /* ⬅ #abcbc4 */
+	--color-tertiary-700: 143 169 164; /* ⬅ #8fa9a4 */
+	--color-tertiary-800: 114 135 131; /* ⬅ #728783 */
+	--color-tertiary-900: 93 110 107; /* ⬅ #5d6e6b */
+	/* success | #4BB543 */
+	--color-success-50: 228 244 227; /* ⬅ #e4f4e3 */
+	--color-success-100: 219 240 217; /* ⬅ #dbf0d9 */
+	--color-success-200: 210 237 208; /* ⬅ #d2edd0 */
+	--color-success-300: 183 225 180; /* ⬅ #b7e1b4 */
+	--color-success-400: 129 203 123; /* ⬅ #81cb7b */
+	--color-success-500: 75 181 67; /* ⬅ #4BB543 */
+	--color-success-600: 68 163 60; /* ⬅ #44a33c */
+	--color-success-700: 56 136 50; /* ⬅ #388832 */
+	--color-success-800: 45 109 40; /* ⬅ #2d6d28 */
+	--color-success-900: 37 89 33; /* ⬅ #255921 */
+	/* warning | #EAB308 */
+	--color-warning-50: 252 244 218; /* ⬅ #fcf4da */
+	--color-warning-100: 251 240 206; /* ⬅ #fbf0ce */
+	--color-warning-200: 250 236 193; /* ⬅ #faecc1 */
+	--color-warning-300: 247 225 156; /* ⬅ #f7e19c */
+	--color-warning-400: 240 202 82; /* ⬅ #f0ca52 */
+	--color-warning-500: 234 179 8; /* ⬅ #EAB308 */
+	--color-warning-600: 211 161 7; /* ⬅ #d3a107 */
+	--color-warning-700: 176 134 6; /* ⬅ #b08606 */
+	--color-warning-800: 140 107 5; /* ⬅ #8c6b05 */
+	--color-warning-900: 115 88 4; /* ⬅ #735804 */
+	/* error | #FF0000 */
+	--color-error-50: 255 217 217; /* ⬅ #ffd9d9 */
+	--color-error-100: 255 204 204; /* ⬅ #ffcccc */
+	--color-error-200: 255 191 191; /* ⬅ #ffbfbf */
+	--color-error-300: 255 153 153; /* ⬅ #ff9999 */
+	--color-error-400: 255 77 77; /* ⬅ #ff4d4d */
+	--color-error-500: 255 0 0; /* ⬅ #FF0000 */
+	--color-error-600: 230 0 0; /* ⬅ #e60000 */
+	--color-error-700: 191 0 0; /* ⬅ #bf0000 */
+	--color-error-800: 153 0 0; /* ⬅ #990000 */
+	--color-error-900: 125 0 0; /* ⬅ #7d0000 */
+	/* surface | #c7c7c7 */
+	--color-surface-50: 247 247 247; /* ⬅ #f7f7f7 */
+	--color-surface-100: 244 244 244; /* ⬅ #f4f4f4 */
+	--color-surface-200: 241 241 241; /* ⬅ #f1f1f1 */
+	--color-surface-300: 233 233 233; /* ⬅ #e9e9e9 */
+	--color-surface-400: 216 216 216; /* ⬅ #d8d8d8 */
+	--color-surface-500: 199 199 199; /* ⬅ #c7c7c7 */
+	--color-surface-600: 179 179 179; /* ⬅ #b3b3b3 */
+	--color-surface-700: 149 149 149; /* ⬅ #959595 */
+	--color-surface-800: 119 119 119; /* ⬅ #777777 */
+	--color-surface-900: 98 98 98; /* ⬅ #626262 */
+}

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

@@ -1,101 +1,101 @@
-/* =~= Crimson Theme - made by GitHub user @ak4zh for the Skeleton community theme contest.  =~= */
-/* https://github.com/skeletonlabs/skeleton/discussions/401 */
-
-:root {
-	/* =~= Theme Styles =~= */
-	--theme-font-family-base: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
-		'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
-		'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
-	--theme-font-family-heading: system-ui;
-	--theme-font-color-base: var(--color-surface-900);
-	--theme-font-color-dark: var(--color-surface-50);
-	--theme-rounded-base: 24px;
-	--theme-rounded-container: 24px;
-	--theme-border-base: 1px;
-	/* =~= Theme On-X Colors =~= */
-	--on-primary: 255 255 255;
-	--on-secondary: 255 255 255;
-	--on-tertiary: 0 0 0;
-	--on-success: 0 0 0;
-	--on-warning: 0 0 0;
-	--on-error: 0 0 0;
-	--on-surface: 255 255 255;
-	/* =~= Theme Colors  =~= */
-	/* primary | #d4163c */
-	--color-primary-50: 249 220 226; /* ⬅ #f9dce2 */
-	--color-primary-100: 246 208 216; /* ⬅ #f6d0d8 */
-	--color-primary-200: 244 197 206; /* ⬅ #f4c5ce */
-	--color-primary-300: 238 162 177; /* ⬅ #eea2b1 */
-	--color-primary-400: 225 92 119; /* ⬅ #e15c77 */
-	--color-primary-500: 212 22 60; /* ⬅ #d4163c */
-	--color-primary-600: 191 20 54; /* ⬅ #bf1436 */
-	--color-primary-700: 159 17 45; /* ⬅ #9f112d */
-	--color-primary-800: 127 13 36; /* ⬅ #7f0d24 */
-	--color-primary-900: 104 11 29; /* ⬅ #680b1d */
-	/* secondary | #4685af */
-	--color-secondary-50: 227 237 243; /* ⬅ #e3edf3 */
-	--color-secondary-100: 218 231 239; /* ⬅ #dae7ef */
-	--color-secondary-200: 209 225 235; /* ⬅ #d1e1eb */
-	--color-secondary-300: 181 206 223; /* ⬅ #b5cedf */
-	--color-secondary-400: 126 170 199; /* ⬅ #7eaac7 */
-	--color-secondary-500: 70 133 175; /* ⬅ #4685af */
-	--color-secondary-600: 63 120 158; /* ⬅ #3f789e */
-	--color-secondary-700: 53 100 131; /* ⬅ #356483 */
-	--color-secondary-800: 42 80 105; /* ⬅ #2a5069 */
-	--color-secondary-900: 34 65 86; /* ⬅ #224156 */
-	/* tertiary | #c0b6b4 */
-	--color-tertiary-50: 246 244 244; /* ⬅ #f6f4f4 */
-	--color-tertiary-100: 242 240 240; /* ⬅ #f2f0f0 */
-	--color-tertiary-200: 239 237 236; /* ⬅ #efedec */
-	--color-tertiary-300: 230 226 225; /* ⬅ #e6e2e1 */
-	--color-tertiary-400: 211 204 203; /* ⬅ #d3cccb */
-	--color-tertiary-500: 192 182 180; /* ⬅ #c0b6b4 */
-	--color-tertiary-600: 173 164 162; /* ⬅ #ada4a2 */
-	--color-tertiary-700: 144 137 135; /* ⬅ #908987 */
-	--color-tertiary-800: 115 109 108; /* ⬅ #736d6c */
-	--color-tertiary-900: 94 89 88; /* ⬅ #5e5958 */
-	/* success | #c1dd97 */
-	--color-success-50: 246 250 239; /* ⬅ #f6faef */
-	--color-success-100: 243 248 234; /* ⬅ #f3f8ea */
-	--color-success-200: 240 247 229; /* ⬅ #f0f7e5 */
-	--color-success-300: 230 241 213; /* ⬅ #e6f1d5 */
-	--color-success-400: 212 231 182; /* ⬅ #d4e7b6 */
-	--color-success-500: 193 221 151; /* ⬅ #c1dd97 */
-	--color-success-600: 174 199 136; /* ⬅ #aec788 */
-	--color-success-700: 145 166 113; /* ⬅ #91a671 */
-	--color-success-800: 116 133 91; /* ⬅ #74855b */
-	--color-success-900: 95 108 74; /* ⬅ #5f6c4a */
-	/* warning | #e4c25e */
-	--color-warning-50: 251 246 231; /* ⬅ #fbf6e7 */
-	--color-warning-100: 250 243 223; /* ⬅ #faf3df */
-	--color-warning-200: 248 240 215; /* ⬅ #f8f0d7 */
-	--color-warning-300: 244 231 191; /* ⬅ #f4e7bf */
-	--color-warning-400: 236 212 142; /* ⬅ #ecd48e */
-	--color-warning-500: 228 194 94; /* ⬅ #e4c25e */
-	--color-warning-600: 205 175 85; /* ⬅ #cdaf55 */
-	--color-warning-700: 171 146 71; /* ⬅ #ab9247 */
-	--color-warning-800: 137 116 56; /* ⬅ #897438 */
-	--color-warning-900: 112 95 46; /* ⬅ #705f2e */
-	/* error | #d27f81 */
-	--color-error-50: 248 236 236; /* ⬅ #f8ecec */
-	--color-error-100: 246 229 230; /* ⬅ #f6e5e6 */
-	--color-error-200: 244 223 224; /* ⬅ #f4dfe0 */
-	--color-error-300: 237 204 205; /* ⬅ #edcccd */
-	--color-error-400: 224 165 167; /* ⬅ #e0a5a7 */
-	--color-error-500: 210 127 129; /* ⬅ #d27f81 */
-	--color-error-600: 189 114 116; /* ⬅ #bd7274 */
-	--color-error-700: 158 95 97; /* ⬅ #9e5f61 */
-	--color-error-800: 126 76 77; /* ⬅ #7e4c4d */
-	--color-error-900: 103 62 63; /* ⬅ #673e3f */
-	/* surface | #2b2e40 */
-	--color-surface-50: 223 224 226; /* ⬅ #dfe0e2 */
-	--color-surface-100: 213 213 217; /* ⬅ #d5d5d9 */
-	--color-surface-200: 202 203 207; /* ⬅ #cacbcf */
-	--color-surface-300: 170 171 179; /* ⬅ #aaabb3 */
-	--color-surface-400: 107 109 121; /* ⬅ #6b6d79 */
-	--color-surface-500: 43 46 64; /* ⬅ #2b2e40 */
-	--color-surface-600: 39 41 58; /* ⬅ #27293a */
-	--color-surface-700: 32 35 48; /* ⬅ #202330 */
-	--color-surface-800: 26 28 38; /* ⬅ #1a1c26 */
-	--color-surface-900: 21 23 31; /* ⬅ #15171f */
-}
+/* =~= Crimson Theme - made by GitHub user @ak4zh for the Skeleton community theme contest.  =~= */
+/* https://github.com/skeletonlabs/skeleton/discussions/401 */
+
+:root {
+	/* =~= Theme Styles =~= */
+	--theme-font-family-base: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
+		'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
+		'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+	--theme-font-family-heading: system-ui;
+	--theme-font-color-base: var(--color-surface-900);
+	--theme-font-color-dark: var(--color-surface-50);
+	--theme-rounded-base: 24px;
+	--theme-rounded-container: 24px;
+	--theme-border-base: 1px;
+	/* =~= Theme On-X Colors =~= */
+	--on-primary: 255 255 255;
+	--on-secondary: 255 255 255;
+	--on-tertiary: 0 0 0;
+	--on-success: 0 0 0;
+	--on-warning: 0 0 0;
+	--on-error: 0 0 0;
+	--on-surface: 255 255 255;
+	/* =~= Theme Colors  =~= */
+	/* primary | #d4163c */
+	--color-primary-50: 249 220 226; /* ⬅ #f9dce2 */
+	--color-primary-100: 246 208 216; /* ⬅ #f6d0d8 */
+	--color-primary-200: 244 197 206; /* ⬅ #f4c5ce */
+	--color-primary-300: 238 162 177; /* ⬅ #eea2b1 */
+	--color-primary-400: 225 92 119; /* ⬅ #e15c77 */
+	--color-primary-500: 212 22 60; /* ⬅ #d4163c */
+	--color-primary-600: 191 20 54; /* ⬅ #bf1436 */
+	--color-primary-700: 159 17 45; /* ⬅ #9f112d */
+	--color-primary-800: 127 13 36; /* ⬅ #7f0d24 */
+	--color-primary-900: 104 11 29; /* ⬅ #680b1d */
+	/* secondary | #4685af */
+	--color-secondary-50: 227 237 243; /* ⬅ #e3edf3 */
+	--color-secondary-100: 218 231 239; /* ⬅ #dae7ef */
+	--color-secondary-200: 209 225 235; /* ⬅ #d1e1eb */
+	--color-secondary-300: 181 206 223; /* ⬅ #b5cedf */
+	--color-secondary-400: 126 170 199; /* ⬅ #7eaac7 */
+	--color-secondary-500: 70 133 175; /* ⬅ #4685af */
+	--color-secondary-600: 63 120 158; /* ⬅ #3f789e */
+	--color-secondary-700: 53 100 131; /* ⬅ #356483 */
+	--color-secondary-800: 42 80 105; /* ⬅ #2a5069 */
+	--color-secondary-900: 34 65 86; /* ⬅ #224156 */
+	/* tertiary | #c0b6b4 */
+	--color-tertiary-50: 246 244 244; /* ⬅ #f6f4f4 */
+	--color-tertiary-100: 242 240 240; /* ⬅ #f2f0f0 */
+	--color-tertiary-200: 239 237 236; /* ⬅ #efedec */
+	--color-tertiary-300: 230 226 225; /* ⬅ #e6e2e1 */
+	--color-tertiary-400: 211 204 203; /* ⬅ #d3cccb */
+	--color-tertiary-500: 192 182 180; /* ⬅ #c0b6b4 */
+	--color-tertiary-600: 173 164 162; /* ⬅ #ada4a2 */
+	--color-tertiary-700: 144 137 135; /* ⬅ #908987 */
+	--color-tertiary-800: 115 109 108; /* ⬅ #736d6c */
+	--color-tertiary-900: 94 89 88; /* ⬅ #5e5958 */
+	/* success | #c1dd97 */
+	--color-success-50: 246 250 239; /* ⬅ #f6faef */
+	--color-success-100: 243 248 234; /* ⬅ #f3f8ea */
+	--color-success-200: 240 247 229; /* ⬅ #f0f7e5 */
+	--color-success-300: 230 241 213; /* ⬅ #e6f1d5 */
+	--color-success-400: 212 231 182; /* ⬅ #d4e7b6 */
+	--color-success-500: 193 221 151; /* ⬅ #c1dd97 */
+	--color-success-600: 174 199 136; /* ⬅ #aec788 */
+	--color-success-700: 145 166 113; /* ⬅ #91a671 */
+	--color-success-800: 116 133 91; /* ⬅ #74855b */
+	--color-success-900: 95 108 74; /* ⬅ #5f6c4a */
+	/* warning | #e4c25e */
+	--color-warning-50: 251 246 231; /* ⬅ #fbf6e7 */
+	--color-warning-100: 250 243 223; /* ⬅ #faf3df */
+	--color-warning-200: 248 240 215; /* ⬅ #f8f0d7 */
+	--color-warning-300: 244 231 191; /* ⬅ #f4e7bf */
+	--color-warning-400: 236 212 142; /* ⬅ #ecd48e */
+	--color-warning-500: 228 194 94; /* ⬅ #e4c25e */
+	--color-warning-600: 205 175 85; /* ⬅ #cdaf55 */
+	--color-warning-700: 171 146 71; /* ⬅ #ab9247 */
+	--color-warning-800: 137 116 56; /* ⬅ #897438 */
+	--color-warning-900: 112 95 46; /* ⬅ #705f2e */
+	/* error | #d27f81 */
+	--color-error-50: 248 236 236; /* ⬅ #f8ecec */
+	--color-error-100: 246 229 230; /* ⬅ #f6e5e6 */
+	--color-error-200: 244 223 224; /* ⬅ #f4dfe0 */
+	--color-error-300: 237 204 205; /* ⬅ #edcccd */
+	--color-error-400: 224 165 167; /* ⬅ #e0a5a7 */
+	--color-error-500: 210 127 129; /* ⬅ #d27f81 */
+	--color-error-600: 189 114 116; /* ⬅ #bd7274 */
+	--color-error-700: 158 95 97; /* ⬅ #9e5f61 */
+	--color-error-800: 126 76 77; /* ⬅ #7e4c4d */
+	--color-error-900: 103 62 63; /* ⬅ #673e3f */
+	/* surface | #2b2e40 */
+	--color-surface-50: 223 224 226; /* ⬅ #dfe0e2 */
+	--color-surface-100: 213 213 217; /* ⬅ #d5d5d9 */
+	--color-surface-200: 202 203 207; /* ⬅ #cacbcf */
+	--color-surface-300: 170 171 179; /* ⬅ #aaabb3 */
+	--color-surface-400: 107 109 121; /* ⬅ #6b6d79 */
+	--color-surface-500: 43 46 64; /* ⬅ #2b2e40 */
+	--color-surface-600: 39 41 58; /* ⬅ #27293a */
+	--color-surface-700: 32 35 48; /* ⬅ #202330 */
+	--color-surface-800: 26 28 38; /* ⬅ #1a1c26 */
+	--color-surface-900: 21 23 31; /* ⬅ #15171f */
+}