Files
frontend/src/theme.postcss

100 lines
4.6 KiB
Plaintext

:root {
/* =~= Theme Properties =~= */
--theme-font-family-base: 'Space Grotesk', 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: 'Nippo', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
'Liberation Mono', 'Courier New', monospace;
--theme-font-color-base: var(--color-surface-900);
--theme-font-color-dark: var(--color-surface-50);
--theme-rounded-base: 4px;
--theme-rounded-container: 6px;
--theme-border-base: 1px;
/* =~= Theme On-X Colors =~= */
--on-primary: 0 0 0;
--on-secondary: 255 255 255;
--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 | #fa5f5f */
--color-primary-50: 254 231 231; /* ⬅ #fee7e7 */
--color-primary-100: 254 223 223; /* ⬅ #fedfdf */
--color-primary-200: 254 215 215; /* ⬅ #fed7d7 */
--color-primary-299: 253 191 191; /* ⬅ #fdbfbf */
--color-primary-400: 252 143 143; /* ⬅ #fc8f8f */
--color-primary-500: 250 95 95; /* ⬅ #fa5f5f */
--color-primary-600: 225 86 86; /* ⬅ #e15656 */
--color-primary-700: 188 71 71; /* ⬅ #bc4747 */
--color-primary-800: 150 57 57; /* ⬅ #963939 */
--color-primary-900: 123 47 47; /* ⬅ #7b2f2f */
/* secondary | #99b5b8 */
--color-secondary-50: 240 244 244; /* ⬅ #f0f4f4 */
--color-secondary-100: 235 240 241; /* ⬅ #ebf0f1 */
--color-secondary-200: 230 237 237; /* ⬅ #e6eded */
--color-secondary-300: 214 225 227; /* ⬅ #d6e1e3 */
--color-secondary-400: 184 203 205; /* ⬅ #b8cbcd */
--color-secondary-500: 153 181 184; /* ⬅ #99b5b8 */
--color-secondary-600: 138 163 166; /* ⬅ #8aa3a6 */
--color-secondary-700: 115 136 138; /* ⬅ #73888a */
--color-secondary-800: 92 109 110; /* ⬅ #5c6d6e */
--color-secondary-900: 75 89 90; /* ⬅ #4b595a */
/* tertiary | #158993 */
--color-tertiary-50: 220 237 239; /* ⬅ #dcedef */
--color-tertiary-100: 208 231 233; /* ⬅ #d0e7e9 */
--color-tertiary-200: 197 226 228; /* ⬅ #c5e2e4 */
--color-tertiary-300: 161 208 212; /* ⬅ #a1d0d4 */
--color-tertiary-400: 91 172 179; /* ⬅ #5bacb3 */
--color-tertiary-500: 21 137 147; /* ⬅ #158993 */
--color-tertiary-600: 19 123 132; /* ⬅ #137b84 */
--color-tertiary-700: 16 103 110; /* ⬅ #10676e */
--color-tertiary-800: 13 82 88; /* ⬅ #0d5258 */
--color-tertiary-900: 10 67 72; /* ⬅ #0a4348 */
/* success | #45a164 */
--color-success-50: 227 241 232; /* ⬅ #e3f1e8 */
--color-success-100: 218 236 224; /* ⬅ #daece0 */
--color-success-200: 209 232 216; /* ⬅ #d1e8d8 */
--color-success-300: 181 217 193; /* ⬅ #b5d9c1 */
--color-success-400: 125 189 147; /* ⬅ #7dbd93 */
--color-success-500: 69 161 100; /* ⬅ #45a164 */
--color-success-600: 62 145 90; /* ⬅ #3e915a */
--color-success-700: 52 121 75; /* ⬅ #34794b */
--color-success-800: 41 97 60; /* ⬅ #29613c */
--color-success-900: 34 79 49; /* ⬅ #224f31 */
/* warning | #d2b45c */
--color-warning-50: 248 244 231; /* ⬅ #f8f4e7 */
--color-warning-100: 246 240 222; /* ⬅ #f6f0de */
--color-warning-200: 244 236 214; /* ⬅ #f4ecd6 */
--color-warning-300: 237 225 190; /* ⬅ #ede1be */
--color-warning-400: 224 203 141; /* ⬅ #e0cb8d */
--color-warning-500: 210 180 92; /* ⬅ #d2b45c */
--color-warning-600: 189 162 83; /* ⬅ #bda253 */
--color-warning-700: 158 135 69; /* ⬅ #9e8745 */
--color-warning-800: 126 108 55; /* ⬅ #7e6c37 */
--color-warning-900: 103 88 45; /* ⬅ #67582d */
/* error | #fa5f5f */
--color-error-50: 254 231 231; /* ⬅ #fee7e7 */
--color-error-100: 254 223 223; /* ⬅ #fedfdf */
--color-error-200: 254 215 215; /* ⬅ #fed7d7 */
--color-error-300: 253 191 191; /* ⬅ #fdbfbf */
--color-error-400: 252 143 143; /* ⬅ #fc8f8f */
--color-error-500: 250 95 95; /* ⬅ #fa5f5f */
--color-error-600: 225 86 86; /* ⬅ #e15656 */
--color-error-700: 188 71 71; /* ⬅ #bc4747 */
--color-error-800: 150 57 57; /* ⬅ #963939 */
--color-error-900: 123 47 47; /* ⬅ #7b2f2f */
/* surface | #2c3434 */
--color-surface-50: 223 225 225; /* ⬅ #dfe1e1 */
--color-surface-100: 213 214 214; /* ⬅ #d5d6d6 */
--color-surface-200: 202 204 204; /* ⬅ #cacccc */
--color-surface-300: 171 174 174; /* ⬅ #abaeae */
--color-surface-400: 107 113 113; /* ⬅ #6b7171 */
--color-surface-500: 44 52 52; /* ⬅ #2c3434 */
--color-surface-600: 40 47 47; /* ⬅ #282f2f */
--color-surface-700: 33 39 39; /* ⬅ #212727 */
--color-surface-800: 26 31 31; /* ⬅ #1a1f1f */
--color-surface-900: 22 25 25; /* ⬅ #161919 */
}