@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).
129 lines (125 loc) • 5.77 kB
CSS
/* https://fonts.google.com/specimen/Raleway */
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
/* https://fonts.google.com/specimen/Lato?query=lato¬o.query=Abril */
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
:root {
/* =~= Theme Styles =~= */
--theme-font-family-base: 'Lato', sans-serif;
--theme-font-family-heading: 'Raleway', sans-serif;
--theme-font-color-base: var(--color-secondary-900);
--theme-font-color-dark: var(--color-primary-100);
--theme-rounded-base: 9999px;
--theme-rounded-container: 24px;
--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: 255 255 255;
--on-surface: 255 255 255;
/* =~= Theme Colors =~= */
/* primary | #ecaa36 */
--color-primary-50: 252 242 225; /* ⬅ #fcf2e1 */
--color-primary-100: 251 238 215; /* ⬅ #fbeed7 */
--color-primary-200: 250 234 205; /* ⬅ #faeacd */
--color-primary-300: 247 221 175; /* ⬅ #f7ddaf */
--color-primary-400: 242 196 114; /* ⬅ #f2c472 */
--color-primary-500: 236 170 54; /* ⬅ #ecaa36 */
--color-primary-600: 212 153 49; /* ⬅ #d49931 */
--color-primary-700: 177 128 41; /* ⬅ #b18029 */
--color-primary-800: 142 102 32; /* ⬅ #8e6620 */
--color-primary-900: 116 83 26; /* ⬅ #74531a */
/* secondary | #3acbba */
--color-secondary-50: 225 247 245; /* ⬅ #e1f7f5 */
--color-secondary-100: 216 245 241; /* ⬅ #d8f5f1 */
--color-secondary-200: 206 242 238; /* ⬅ #cef2ee */
--color-secondary-300: 176 234 227; /* ⬅ #b0eae3 */
--color-secondary-400: 117 219 207; /* ⬅ #75dbcf */
--color-secondary-500: 58 203 186; /* ⬅ #3acbba */
--color-secondary-600: 52 183 167; /* ⬅ #34b7a7 */
--color-secondary-700: 44 152 140; /* ⬅ #2c988c */
--color-secondary-800: 35 122 112; /* ⬅ #237a70 */
--color-secondary-900: 28 99 91; /* ⬅ #1c635b */
/* tertiary | #bbdf86 */
--color-tertiary-50: 245 250 237; /* ⬅ #f5faed */
--color-tertiary-100: 241 249 231; /* ⬅ #f1f9e7 */
--color-tertiary-200: 238 247 225; /* ⬅ #eef7e1 */
--color-tertiary-300: 228 242 207; /* ⬅ #e4f2cf */
--color-tertiary-400: 207 233 170; /* ⬅ #cfe9aa */
--color-tertiary-500: 187 223 134; /* ⬅ #bbdf86 */
--color-tertiary-600: 168 201 121; /* ⬅ #a8c979 */
--color-tertiary-700: 140 167 101; /* ⬅ #8ca765 */
--color-tertiary-800: 112 134 80; /* ⬅ #708650 */
--color-tertiary-900: 92 109 66; /* ⬅ #5c6d42 */
/* 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 | #e5c157 */
--color-warning-50: 251 246 230; /* ⬅ #fbf6e6 */
--color-warning-100: 250 243 221; /* ⬅ #faf3dd */
--color-warning-200: 249 240 213; /* ⬅ #f9f0d5 */
--color-warning-300: 245 230 188; /* ⬅ #f5e6bc */
--color-warning-400: 237 212 137; /* ⬅ #edd489 */
--color-warning-500: 229 193 87; /* ⬅ #e5c157 */
--color-warning-600: 206 174 78; /* ⬅ #ceae4e */
--color-warning-700: 172 145 65; /* ⬅ #ac9141 */
--color-warning-800: 137 116 52; /* ⬅ #897434 */
--color-warning-900: 112 95 43; /* ⬅ #705f2b */
/* error | #db5c9c */
--color-error-50: 250 231 240; /* ⬅ #fae7f0 */
--color-error-100: 248 222 235; /* ⬅ #f8deeb */
--color-error-200: 246 214 230; /* ⬅ #f6d6e6 */
--color-error-300: 241 190 215; /* ⬅ #f1bed7 */
--color-error-400: 230 141 186; /* ⬅ #e68dba */
--color-error-500: 219 92 156; /* ⬅ #db5c9c */
--color-error-600: 197 83 140; /* ⬅ #c5538c */
--color-error-700: 164 69 117; /* ⬅ #a44575 */
--color-error-800: 131 55 94; /* ⬅ #83375e */
--color-error-900: 107 45 76; /* ⬅ #6b2d4c */
/* surface | #da4e65 */
--color-surface-50: 249 228 232; /* ⬅ #f9e4e8 */
--color-surface-100: 248 220 224; /* ⬅ #f8dce0 */
--color-surface-200: 246 211 217; /* ⬅ #f6d3d9 */
--color-surface-300: 240 184 193; /* ⬅ #f0b8c1 */
--color-surface-400: 229 131 147; /* ⬅ #e58393 */
--color-surface-500: 218 78 101; /* ⬅ #da4e65 */
--color-surface-600: 196 70 91; /* ⬅ #c4465b */
--color-surface-700: 164 59 76; /* ⬅ #a43b4c */
--color-surface-800: 131 47 61; /* ⬅ #832f3d */
--color-surface-900: 107 38 49; /* ⬅ #6b2631 */
}
[data-theme='sahara'] h1,
[data-theme='sahara'] h2,
[data-theme='sahara'] h3,
[data-theme='sahara'] h4,
[data-theme='sahara'] h5,
[data-theme='sahara'] h6 {
font-weight: 600;
}
[data-theme='sahara'] p {
font-weight: 400;
}
/* Applied to body with `<body data-theme="sahara">` */
/* Created with: https://csshero.org/mesher/ */
[data-theme='sahara'] {
/* prettier-ignore */
background-image:
radial-gradient(at 100% 36%, hsla(37,81%,56%,0.15) 0px, transparent 50%),
radial-gradient(at 7% 0%, hsla(37,81%,56%,0.20) 0px, transparent 50%);
}
.dark [data-theme='sahara'] {
/* prettier-ignore */
background-image:
radial-gradient(at 100% 36%, hsla(37,81%,56%,0.15) 0px, transparent 50%),
radial-gradient(at 7% 0%, hsla(37,81%,56%,0.20) 0px, transparent 50%);
}