@bexis2/bexis2-core-ui
Version:
Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
116 lines (112 loc) • 5.22 kB
CSS
/* A New Years inspired theme. */
/* https://fonts.google.com/specimen/Quicksand?query=Quicksand */
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap');
:root {
/* =~= Theme Properties =~= */
--theme-font-family-base: system-ui;
--theme-font-family-heading: 'Quicksand', sans-serif;
--theme-font-color-base: var(--color-surface-500);
--theme-font-color-dark: var(--color-surface-200);
--theme-rounded-base: 12px;
--theme-rounded-container: 12px;
--theme-border-base: 0px;
/* =~= Theme On-X Colors =~= */
--on-primary: 0 0 0;
--on-secondary: 255 255 255;
--on-tertiary: 255 255 255;
--on-success: 0 0 0;
--on-warning: 0 0 0;
--on-error: 255 255 255;
--on-surface: 255 255 255;
/* =~= Theme Colors =~= */
/* primary | #40b09d */
--color-primary-50: 226 243 240; /* ⬅ #e2f3f0 */
--color-primary-100: 217 239 235; /* ⬅ #d9efeb */
--color-primary-200: 207 235 231; /* ⬅ #cfebe7 */
--color-primary-300: 179 223 216; /* ⬅ #b3dfd8 */
--color-primary-400: 121 200 186; /* ⬅ #79c8ba */
--color-primary-500: 64 176 157; /* ⬅ #40b09d */
--color-primary-600: 58 158 141; /* ⬅ #3a9e8d */
--color-primary-700: 48 132 118; /* ⬅ #308476 */
--color-primary-800: 38 106 94; /* ⬅ #266a5e */
--color-primary-900: 31 86 77; /* ⬅ #1f564d */
/* secondary | #d7a12d */
--color-secondary-50: 249 241 224; /* ⬅ #f9f1e0 */
--color-secondary-100: 247 236 213; /* ⬅ #f7ecd5 */
--color-secondary-200: 245 232 203; /* ⬅ #f5e8cb */
--color-secondary-300: 239 217 171; /* ⬅ #efd9ab */
--color-secondary-400: 227 189 108; /* ⬅ #e3bd6c */
--color-secondary-500: 215 161 45; /* ⬅ #d7a12d */
--color-secondary-600: 194 145 41; /* ⬅ #c29129 */
--color-secondary-700: 161 121 34; /* ⬅ #a17922 */
--color-secondary-800: 129 97 27; /* ⬅ #81611b */
--color-secondary-900: 105 79 22; /* ⬅ #694f16 */
/* tertiary | #411d96 */
--color-tertiary-50: 227 221 239; /* ⬅ #e3ddef */
--color-tertiary-100: 217 210 234; /* ⬅ #d9d2ea */
--color-tertiary-200: 208 199 229; /* ⬅ #d0c7e5 */
--color-tertiary-300: 179 165 213; /* ⬅ #b3a5d5 */
--color-tertiary-400: 122 97 182; /* ⬅ #7a61b6 */
--color-tertiary-500: 65 29 150; /* ⬅ #411d96 */
--color-tertiary-600: 59 26 135; /* ⬅ #3b1a87 */
--color-tertiary-700: 49 22 113; /* ⬅ #311671 */
--color-tertiary-800: 39 17 90; /* ⬅ #27115a */
--color-tertiary-900: 32 14 74; /* ⬅ #200e4a */
/* success | #aad765 */
--color-success-50: 242 249 232; /* ⬅ #f2f9e8 */
--color-success-100: 238 247 224; /* ⬅ #eef7e0 */
--color-success-200: 234 245 217; /* ⬅ #eaf5d9 */
--color-success-300: 221 239 193; /* ⬅ #ddefc1 */
--color-success-400: 196 227 147; /* ⬅ #c4e393 */
--color-success-500: 170 215 101; /* ⬅ #aad765 */
--color-success-600: 153 194 91; /* ⬅ #99c25b */
--color-success-700: 128 161 76; /* ⬅ #80a14c */
--color-success-800: 102 129 61; /* ⬅ #66813d */
--color-success-900: 83 105 49; /* ⬅ #536931 */
/* warning | #e1ca84 */
--color-warning-50: 251 247 237; /* ⬅ #fbf7ed */
--color-warning-100: 249 244 230; /* ⬅ #f9f4e6 */
--color-warning-200: 248 242 224; /* ⬅ #f8f2e0 */
--color-warning-300: 243 234 206; /* ⬅ #f3eace */
--color-warning-400: 234 218 169; /* ⬅ #eadaa9 */
--color-warning-500: 225 202 132; /* ⬅ #e1ca84 */
--color-warning-600: 203 182 119; /* ⬅ #cbb677 */
--color-warning-700: 169 152 99; /* ⬅ #a99863 */
--color-warning-800: 135 121 79; /* ⬅ #87794f */
--color-warning-900: 110 99 65; /* ⬅ #6e6341 */
/* error | #e1565d */
--color-error-50: 251 230 231; /* ⬅ #fbe6e7 */
--color-error-100: 249 221 223; /* ⬅ #f9dddf */
--color-error-200: 248 213 215; /* ⬅ #f8d5d7 */
--color-error-300: 243 187 190; /* ⬅ #f3bbbe */
--color-error-400: 234 137 142; /* ⬅ #ea898e */
--color-error-500: 225 86 93; /* ⬅ #e1565d */
--color-error-600: 203 77 84; /* ⬅ #cb4d54 */
--color-error-700: 169 65 70; /* ⬅ #a94146 */
--color-error-800: 135 52 56; /* ⬅ #873438 */
--color-error-900: 110 42 46; /* ⬅ #6e2a2e */
/* surface | #0f233e */
--color-surface-50: 219 222 226; /* ⬅ #dbdee2 */
--color-surface-100: 207 211 216; /* ⬅ #cfd3d8 */
--color-surface-200: 195 200 207; /* ⬅ #c3c8cf */
--color-surface-300: 159 167 178; /* ⬅ #9fa7b2 */
--color-surface-400: 87 101 120; /* ⬅ #576578 */
--color-surface-500: 15 35 62; /* ⬅ #0f233e */
--color-surface-600: 14 32 56; /* ⬅ #0e2038 */
--color-surface-700: 11 26 47; /* ⬅ #0b1a2f */
--color-surface-800: 9 21 37; /* ⬅ #091525 */
--color-surface-900: 7 17 30; /* ⬅ #07111e */
}
/* Applied to body with `<body data-theme="seasonal">` */
[data-theme='seasonal'] {
/* prettier-ignore */
background-image:
radial-gradient(at 22% 100%, hsla(39,68%,50%,0.23) 0px, transparent 50%),
radial-gradient(at 80% 100%, hsla(189,100%,56%,0.33) 0px, transparent 50%);
}
.dark [data-theme='seasonal'] {
/* prettier-ignore */
background-image:
radial-gradient(at 22% 0%, hsla(39,68%,50%,0.15) 0px, transparent 50%),
radial-gradient(at 80% 0%, hsla(189,100%,56%,0.15) 0px, transparent 50%);
}