CoreRed

src/themes/CoreRed.ts

@@ -0,0 +1,99 @@
+// You can also use the generator at https://skeleton.dev/docs/generator to create these values for you
+import type { CustomThemeConfig } from '@skeletonlabs/tw-plugin';
+export const CoreRed: CustomThemeConfig = {
+	name: 'CoreRed',
+	properties: {
+		'--theme-font-family-base': "'Quicksand', sans-serif",
+		'--theme-font-family-heading': "'Teko', sans-serif",
+		'--theme-font-color-base': 'var(--color-surface-800)',
+		'--theme-font-color-dark': 'var(--color-tertiary-500)',
+		'--theme-rounded-base': '8px',
+		'--theme-rounded-container': '8px',
+		'--theme-border-base': '1px',
+		'--on-primary': '255 255 255',
+		'--on-secondary': '0 0 0',
+		'--on-tertiary': '0 0 0',
+		'--on-success': '0 0 0',
+		'--on-warning': '0 0 0',
+		'--on-error': '255 255 255',
+		'--on-surface': '255 255 255',
+		// =~= Theme Colors  =~=
+		// primary | #5e0000
+		'--color-primary-50': '231 217 217', // #e7d9d9
+		'--color-primary-100': '223 204 204', // #dfcccc
+		'--color-primary-200': '215 191 191', // #d7bfbf
+		'--color-primary-300': '191 153 153', // #bf9999
+		'--color-primary-400': '142 77 77', // #8e4d4d
+		'--color-primary-500': '94 0 0', // #5e0000
+		'--color-primary-600': '85 0 0', // #550000
+		'--color-primary-700': '71 0 0', // #470000
+		'--color-primary-800': '56 0 0', // #380000
+		'--color-primary-900': '46 0 0', // #2e0000
+		// secondary | #c2a200
+		'--color-secondary-50': '246 241 217', // #f6f1d9
+		'--color-secondary-100': '243 236 204', // #f3eccc
+		'--color-secondary-200': '240 232 191', // #f0e8bf
+		'--color-secondary-300': '231 218 153', // #e7da99
+		'--color-secondary-400': '212 190 77', // #d4be4d
+		'--color-secondary-500': '194 162 0', // #c2a200
+		'--color-secondary-600': '175 146 0', // #af9200
+		'--color-secondary-700': '146 122 0', // #927a00
+		'--color-secondary-800': '116 97 0', // #746100
+		'--color-secondary-900': '95 79 0', // #5f4f00
+		// tertiary | #bbbbbb
+		'--color-tertiary-50': '245 245 245', // #f5f5f5
+		'--color-tertiary-100': '241 241 241', // #f1f1f1
+		'--color-tertiary-200': '238 238 238', // #eeeeee
+		'--color-tertiary-300': '228 228 228', // #e4e4e4
+		'--color-tertiary-400': '207 207 207', // #cfcfcf
+		'--color-tertiary-500': '187 187 187', // #bbbbbb
+		'--color-tertiary-600': '168 168 168', // #a8a8a8
+		'--color-tertiary-700': '140 140 140', // #8c8c8c
+		'--color-tertiary-800': '112 112 112', // #707070
+		'--color-tertiary-900': '92 92 92', // #5c5c5c
+		// success | #82cb15
+		'--color-success-50': '236 247 220', // #ecf7dc
+		'--color-success-100': '230 245 208', // #e6f5d0
+		'--color-success-200': '224 242 197', // #e0f2c5
+		'--color-success-300': '205 234 161', // #cdeaa1
+		'--color-success-400': '168 219 91', // #a8db5b
+		'--color-success-500': '130 203 21', // #82cb15
+		'--color-success-600': '117 183 19', // #75b713
+		'--color-success-700': '98 152 16', // #629810
+		'--color-success-800': '78 122 13', // #4e7a0d
+		'--color-success-900': '64 99 10', // #40630a
+		// warning | #b19c4e
+		'--color-warning-50': '243 240 228', // #f3f0e4
+		'--color-warning-100': '239 235 220', // #efebdc
+		'--color-warning-200': '236 230 211', // #ece6d3
+		'--color-warning-300': '224 215 184', // #e0d7b8
+		'--color-warning-400': '200 186 131', // #c8ba83
+		'--color-warning-500': '177 156 78', // #b19c4e
+		'--color-warning-600': '159 140 70', // #9f8c46
+		'--color-warning-700': '133 117 59', // #85753b
+		'--color-warning-800': '106 94 47', // #6a5e2f
+		'--color-warning-900': '87 76 38', // #574c26
+		// error | #a93d0f
+		'--color-error-50': '242 226 219', // #f2e2db
+		'--color-error-100': '238 216 207', // #eed8cf
+		'--color-error-200': '234 207 195', // #eacfc3
+		'--color-error-300': '221 177 159', // #ddb19f
+		'--color-error-400': '195 119 87', // #c37757
+		'--color-error-500': '169 61 15', // #a93d0f
+		'--color-error-600': '152 55 14', // #98370e
+		'--color-error-700': '127 46 11', // #7f2e0b
+		'--color-error-800': '101 37 9', // #652509
+		'--color-error-900': '83 30 7', // #531e07
+		// surface | #333333
+		'--color-surface-50': '224 224 224', // #e0e0e0
+		'--color-surface-100': '214 214 214', // #d6d6d6
+		'--color-surface-200': '204 204 204', // #cccccc
+		'--color-surface-300': '173 173 173', // #adadad
+		'--color-surface-400': '112 112 112', // #707070
+		'--color-surface-500': '51 51 51', // #333333
+		'--color-surface-600': '46 46 46', // #2e2e2e
+		'--color-surface-700': '38 38 38', // #262626
+		'--color-surface-800': '31 31 31', // #1f1f1f
+		'--color-surface-900': '25 25 25', // #191919
+	},
+};

tailwind.config.ts

@@ -3,6 +3,7 @@ import type { Config } from 'tailwindcss';
 import forms from '@tailwindcss/forms';
 import { skeleton } from '@skeletonlabs/tw-plugin';
 import { RemasterGreen } from './src/themes/RemasterGreen';
+import { CoreRed } from './src/themes/CoreRed';
 
 export default {
 	darkMode: 'class',
@@ -17,7 +18,7 @@ export default {
 		forms,
 		skeleton({
 			themes: {
-				custom: [RemasterGreen],
+				custom: [RemasterGreen, CoreRed],
 			},
 		}),
 	],