Files
frontend/src/theme.postcss
2023-07-25 00:18:39 -04:00

98 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-800);
--theme-font-color-dark: var(--color-primary-200);
--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 | #99b5b8 */
--color-primary-50: 240 244 244; /* ⬅ #f0f4f4 */
--color-primary-100: 235 240 241; /* ⬅ #ebf0f1 */
--color-primary-200: 230 237 237; /* ⬅ #e6eded */
--color-primary-300: 214 225 227; /* ⬅ #d6e1e3 */
--color-primary-400: 184 203 205; /* ⬅ #b8cbcd */
--color-primary-500: 153 181 184; /* ⬅ #99b5b8 */
--color-primary-600: 138 163 166; /* ⬅ #8aa3a6 */
--color-primary-700: 115 136 138; /* ⬅ #73888a */
--color-primary-800: 92 109 110; /* ⬅ #5c6d6e */
--color-primary-900: 75 89 90; /* ⬅ #4b595a */
/* secondary | #fa5f5f */
--color-secondary-50: 254 231 231; /* ⬅ #fee7e7 */
--color-secondary-100: 254 223 223; /* ⬅ #fedfdf */
--color-secondary-200: 254 215 215; /* ⬅ #fed7d7 */
--color-secondary-300: 253 191 191; /* ⬅ #fdbfbf */
--color-secondary-400: 252 143 143; /* ⬅ #fc8f8f */
--color-secondary-500: 250 95 95; /* ⬅ #fa5f5f */
--color-secondary-600: 225 86 86; /* ⬅ #e15656 */
--color-secondary-700: 188 71 71; /* ⬅ #bc4747 */
--color-secondary-800: 150 57 57; /* ⬅ #963939 */
--color-secondary-900: 123 47 47; /* ⬅ #7b2f2f */
/* 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 | #ffb585 */
--color-warning-50: 255 244 237; /* ⬅ #fff4ed */
--color-warning-100: 255 240 231; /* ⬅ #fff0e7 */
--color-warning-200: 255 237 225; /* ⬅ #ffede1 */
--color-warning-300: 255 225 206; /* ⬅ #ffe1ce */
--color-warning-400: 255 203 170; /* ⬅ #ffcbaa */
--color-warning-500: 255 181 133; /* ⬅ #ffb585 */
--color-warning-600: 230 163 120; /* ⬅ #e6a378 */
--color-warning-700: 191 136 100; /* ⬅ #bf8864 */
--color-warning-800: 153 109 80; /* ⬅ #996d50 */
--color-warning-900: 125 89 65; /* ⬅ #7d5941 */
/* 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 | #363f3f */
--color-surface-50: 225 226 226; /* ⬅ #e1e2e2 */
--color-surface-100: 215 217 217; /* ⬅ #d7d9d9 */
--color-surface-200: 205 207 207; /* ⬅ #cdcfcf */
--color-surface-300: 175 178 178; /* ⬅ #afb2b2 */
--color-surface-400: 114 121 121; /* ⬅ #727979 */
--color-surface-500: 54 63 63; /* ⬅ #363f3f */
--color-surface-600: 49 57 57; /* ⬅ #313939 */
--color-surface-700: 41 47 47; /* ⬅ #292f2f */
--color-surface-800: 32 38 38; /* ⬅ #202626 */
--color-surface-900: 26 31 31; /* ⬅ #1a1f1f */
}