From 83fbdc5afa27a0946de2865e1aa4f99cfe1b8825 Mon Sep 17 00:00:00 2001 From: M3DZIK Date: Fri, 26 Apr 2024 18:17:43 +0200 Subject: [PATCH] Update theme --- src/routes/+page.svelte | 10 +-- theme.ts | 190 ++++++++++++++++++++-------------------- 2 files changed, 99 insertions(+), 101 deletions(-) diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 889d3b5..badd4dd 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -91,14 +91,12 @@ .card-gradient { background-image: radial-gradient(at 0% 0%, rgba(var(--color-secondary-500) / 0.33) 0px, transparent 50%), radial-gradient(at 98% 1%, rgba(var(--color-success-500) / 0.33) 0px, transparent 50%), - radial-gradient(at 0% 100%, rgba(var(--color-success-500) / 0.5) 0px, transparent 50%), - radial-gradient(at 100% 100%, rgba(var(--color-warning-500) / 0.5) 0px, transparent 50%); + radial-gradient(at 0% 100%, rgba(var(--color-primary-500) / 0.33) 0px, transparent 50%), + radial-gradient(at 100% 100%, rgba(var(--color-tertiary-500) / 0.33) 0px, transparent 50%); } .project-gradient { - background-image: radial-gradient(at 0% 0%, rgba(var(--color-success-500) / 0.5) 0px, transparent 50%), - radial-gradient(at 100% 0%, rgba(var(--color-warning-500) / 0.5) 0px, transparent 50%), - radial-gradient(at 0% 100%, rgba(var(--color-error-500) / 0.5) 0px, transparent 50%), - radial-gradient(at 100% 100%, rgba(var(--color-primary-500) / 0.5) 0px, transparent 50%); + background-image: radial-gradient(at 0% 0%, rgba(var(--color-primary-500) / 0.33) 0px, transparent 50%), + radial-gradient(at 100% 0%, rgba(var(--color-tertiary-500) / 0.33) 0px, transparent 50%); } diff --git a/theme.ts b/theme.ts index 550ea38..9d7ba3a 100644 --- a/theme.ts +++ b/theme.ts @@ -3,99 +3,99 @@ import type { CustomThemeConfig } from '@skeletonlabs/tw-plugin'; export const medzikTheme: CustomThemeConfig = { name: 'medzik', properties: { - // =~= Theme Properties =~= - '--theme-font-family-base': `system-ui`, - '--theme-font-family-heading': `system-ui`, - '--theme-font-color-base': '0 0 0', - '--theme-font-color-dark': '255 255 255', - '--theme-rounded-base': '9999px', - '--theme-rounded-container': '8px', - '--theme-border-base': '1px', - // =~= Theme On-X Colors =~= - '--on-primary': '0 0 0', - '--on-secondary': '0 0 0', - '--on-tertiary': '0 0 0', - '--on-success': '0 0 0', - '--on-warning': '0 0 0', - '--on-error': '0 0 0', - '--on-surface': '0 0 0', - // =~= Theme Colors =~= - // primary | #8ff0a4 - '--color-primary-50': '238 253 241', // #eefdf1 - '--color-primary-100': '233 252 237', // #e9fced - '--color-primary-200': '227 251 232', // #e3fbe8 - '--color-primary-300': '210 249 219', // #d2f9db - '--color-primary-400': '177 245 191', // #b1f5bf - '--color-primary-500': '143 240 164', // #8ff0a4 - '--color-primary-600': '129 216 148', // #81d894 - '--color-primary-700': '107 180 123', // #6bb47b - '--color-primary-800': '86 144 98', // #569062 - '--color-primary-900': '70 118 80', // #467650 - // secondary | #57e389 - '--color-secondary-50': '230 251 237', // #e6fbed - '--color-secondary-100': '221 249 231', // #ddf9e7 - '--color-secondary-200': '213 248 226', // #d5f8e2 - '--color-secondary-300': '188 244 208', // #bcf4d0 - '--color-secondary-400': '137 235 172', // #89ebac - '--color-secondary-500': '87 227 137', // #57e389 - '--color-secondary-600': '78 204 123', // #4ecc7b - '--color-secondary-700': '65 170 103', // #41aa67 - '--color-secondary-800': '52 136 82', // #348852 - '--color-secondary-900': '43 111 67', // #2b6f43 - // tertiary | #99c1f1 - '--color-tertiary-50': '240 246 253', // #f0f6fd - '--color-tertiary-100': '235 243 252', // #ebf3fc - '--color-tertiary-200': '230 240 252', // #e6f0fc - '--color-tertiary-300': '214 230 249', // #d6e6f9 - '--color-tertiary-400': '184 212 245', // #b8d4f5 - '--color-tertiary-500': '153 193 241', // #99c1f1 - '--color-tertiary-600': '138 174 217', // #8aaed9 - '--color-tertiary-700': '115 145 181', // #7391b5 - '--color-tertiary-800': '92 116 145', // #5c7491 - '--color-tertiary-900': '75 95 118', // #4b5f76 - // success | #84cc16 - '--color-success-50': '237 247 220', // #edf7dc - '--color-success-100': '230 245 208', // #e6f5d0 - '--color-success-200': '224 242 197', // #e0f2c5 - '--color-success-300': '206 235 162', // #ceeba2 - '--color-success-400': '169 219 92', // #a9db5c - '--color-success-500': '132 204 22', // #84cc16 - '--color-success-600': '119 184 20', // #77b814 - '--color-success-700': '99 153 17', // #639911 - '--color-success-800': '79 122 13', // #4f7a0d - '--color-success-900': '65 100 11', // #41640b - // warning | #ffbe6f - '--color-warning-50': '255 245 233', // #fff5e9 - '--color-warning-100': '255 242 226', // #fff2e2 - '--color-warning-200': '255 239 219', // #ffefdb - '--color-warning-300': '255 229 197', // #ffe5c5 - '--color-warning-400': '255 210 154', // #ffd29a - '--color-warning-500': '255 190 111', // #ffbe6f - '--color-warning-600': '230 171 100', // #e6ab64 - '--color-warning-700': '191 143 83', // #bf8f53 - '--color-warning-800': '153 114 67', // #997243 - '--color-warning-900': '125 93 54', // #7d5d36 - // error | #f66151 - '--color-error-50': '254 231 229', // #fee7e5 - '--color-error-100': '253 223 220', // #fddfdc - '--color-error-200': '253 216 212', // #fdd8d4 - '--color-error-300': '251 192 185', // #fbc0b9 - '--color-error-400': '249 144 133', // #f99085 - '--color-error-500': '246 97 81', // #f66151 - '--color-error-600': '221 87 73', // #dd5749 - '--color-error-700': '185 73 61', // #b9493d - '--color-error-800': '148 58 49', // #943a31 - '--color-error-900': '121 48 40', // #793028 - // surface | #2ec27e - '--color-surface-50': '224 246 236', // #e0f6ec - '--color-surface-100': '213 243 229', // #d5f3e5 - '--color-surface-200': '203 240 223', // #cbf0df - '--color-surface-300': '171 231 203', // #abe7cb - '--color-surface-400': '109 212 165', // #6dd4a5 - '--color-surface-500': '46 194 126', // #2ec27e - '--color-surface-600': '41 175 113', // #29af71 - '--color-surface-700': '35 146 95', // #23925f - '--color-surface-800': '28 116 76', // #1c744c - '--color-surface-900': '23 95 62' // #175f3e - } + // =~= Theme Properties =~= + "--theme-font-family-base": `system-ui`, + "--theme-font-family-heading": `system-ui`, + "--theme-font-color-base": "0 0 0", + "--theme-font-color-dark": "255 255 255", + "--theme-rounded-base": "12px", + "--theme-rounded-container": "8px", + "--theme-border-base": "1px", + // =~= Theme On-X Colors =~= + "--on-primary": "0 0 0", + "--on-secondary": "0 0 0", + "--on-tertiary": "0 0 0", + "--on-success": "0 0 0", + "--on-warning": "0 0 0", + "--on-error": "0 0 0", + "--on-surface": "0 0 0", + // =~= Theme Colors =~= + // primary | #a8be4b + "--color-primary-50": "242 245 228", // #f2f5e4 + "--color-primary-100": "238 242 219", // #eef2db + "--color-primary-200": "233 239 210", // #e9efd2 + "--color-primary-300": "220 229 183", // #dce5b7 + "--color-primary-400": "194 210 129", // #c2d281 + "--color-primary-500": "168 190 75", // #a8be4b + "--color-primary-600": "151 171 68", // #97ab44 + "--color-primary-700": "126 143 56", // #7e8f38 + "--color-primary-800": "101 114 45", // #65722d + "--color-primary-900": "82 93 37", // #525d25 + // secondary | #0a89ad + "--color-secondary-50": "218 237 243", // #daedf3 + "--color-secondary-100": "206 231 239", // #cee7ef + "--color-secondary-200": "194 226 235", // #c2e2eb + "--color-secondary-300": "157 208 222", // #9dd0de + "--color-secondary-400": "84 172 198", // #54acc6 + "--color-secondary-500": "10 137 173", // #0a89ad + "--color-secondary-600": "9 123 156", // #097b9c + "--color-secondary-700": "8 103 130", // #086782 + "--color-secondary-800": "6 82 104", // #065268 + "--color-secondary-900": "5 67 85", // #054355 + // tertiary | #6aef59 + "--color-tertiary-50": "233 253 230", // #e9fde6 + "--color-tertiary-100": "225 252 222", // #e1fcde + "--color-tertiary-200": "218 251 214", // #dafbd6 + "--color-tertiary-300": "195 249 189", // #c3f9bd + "--color-tertiary-400": "151 244 139", // #97f48b + "--color-tertiary-500": "106 239 89", // #6aef59 + "--color-tertiary-600": "95 215 80", // #5fd750 + "--color-tertiary-700": "80 179 67", // #50b343 + "--color-tertiary-800": "64 143 53", // #408f35 + "--color-tertiary-900": "52 117 44", // #34752c + // success | #57e389 + "--color-success-50": "230 251 237", // #e6fbed + "--color-success-100": "221 249 231", // #ddf9e7 + "--color-success-200": "213 248 226", // #d5f8e2 + "--color-success-300": "188 244 208", // #bcf4d0 + "--color-success-400": "137 235 172", // #89ebac + "--color-success-500": "87 227 137", // #57e389 + "--color-success-600": "78 204 123", // #4ecc7b + "--color-success-700": "65 170 103", // #41aa67 + "--color-success-800": "52 136 82", // #348852 + "--color-success-900": "43 111 67", // #2b6f43 + // warning | #f59cc2 + "--color-warning-50": "254 240 246", // #fef0f6 + "--color-warning-100": "253 235 243", // #fdebf3 + "--color-warning-200": "253 230 240", // #fde6f0 + "--color-warning-300": "251 215 231", // #fbd7e7 + "--color-warning-400": "248 186 212", // #f8bad4 + "--color-warning-500": "245 156 194", // #f59cc2 + "--color-warning-600": "221 140 175", // #dd8caf + "--color-warning-700": "184 117 146", // #b87592 + "--color-warning-800": "147 94 116", // #935e74 + "--color-warning-900": "120 76 95", // #784c5f + // error | #f66151 + "--color-error-50": "254 231 229", // #fee7e5 + "--color-error-100": "253 223 220", // #fddfdc + "--color-error-200": "253 216 212", // #fdd8d4 + "--color-error-300": "251 192 185", // #fbc0b9 + "--color-error-400": "249 144 133", // #f99085 + "--color-error-500": "246 97 81", // #f66151 + "--color-error-600": "221 87 73", // #dd5749 + "--color-error-700": "185 73 61", // #b9493d + "--color-error-800": "148 58 49", // #943a31 + "--color-error-900": "121 48 40", // #793028 + // surface | #089211 + "--color-surface-50": "218 239 219", // #daefdb + "--color-surface-100": "206 233 207", // #cee9cf + "--color-surface-200": "193 228 196", // #c1e4c4 + "--color-surface-300": "156 211 160", // #9cd3a0 + "--color-surface-400": "82 179 88", // #52b358 + "--color-surface-500": "8 146 17", // #089211 + "--color-surface-600": "7 131 15", // #07830f + "--color-surface-700": "6 110 13", // #066e0d + "--color-surface-800": "5 88 10", // #05580a + "--color-surface-900": "4 72 8", // #044808 + } };