From 9368f280caa49558d222ea3e09656d089426981f Mon Sep 17 00:00:00 2001 From: MrVauxs Date: Fri, 1 Dec 2023 20:09:52 +0100 Subject: [PATCH] CoreRed --- src/themes/CoreRed.ts | 99 +++++++++++++++++++++++++++++++++++++++++++ tailwind.config.ts | 3 +- 2 files changed, 101 insertions(+), 1 deletion(-) create mode 100644 src/themes/CoreRed.ts diff --git a/src/themes/CoreRed.ts b/src/themes/CoreRed.ts new file mode 100644 index 0000000..071a36c --- /dev/null +++ b/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 + }, +}; diff --git a/tailwind.config.ts b/tailwind.config.ts index 7bedba1..6803bf1 100644 --- a/tailwind.config.ts +++ b/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], }, }), ],