@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).
97 lines (96 loc) • 4.46 kB
CSS
:root {
/* =~= Theme Properties =~= */
--theme-font-family-base: system-ui;
--theme-font-family-heading: system-ui;
--theme-font-color-base: var(--color-surface-900);
--theme-font-color-dark: 255 255 255;
--theme-rounded-base: 4px;
--theme-rounded-container: 4px;
--theme-border-base: 1px;
/* =~= Theme On-X Colors =~= */
--on-primary: 255 255 255;
--on-secondary: 255 255 255;
--on-tertiary: 0 0 0;
--on-success: 255 255 255;
--on-warning: 255 255 255;
--on-error: 255 255 255;
--on-surface: 0 0 0;
/* =~= Theme Colors =~= */
/* primary | #45b2a1 */
--color-primary-50: 227 243 241; /* ⬅ #e3f3f1 */
--color-primary-100: 218 240 236; /* ⬅ #daf0ec */
--color-primary-200: 209 236 232; /* ⬅ #d1ece8 */
--color-primary-300: 181 224 217; /* ⬅ #b5e0d9 */
--color-primary-400: 125 201 189; /* ⬅ #7dc9bd */
--color-primary-500: 69 178 161; /* ⬅ #45b2a1 */
--color-primary-600: 62 160 145; /* ⬅ #3ea091 */
--color-primary-700: 52 134 121; /* ⬅ #348679 */
--color-primary-800: 41 107 97; /* ⬅ #296b61 */
--color-primary-900: 34 87 79; /* ⬅ #22574f */
/* secondary | #ff9700 */
--color-secondary-50: 255 239 217; /* ⬅ #ffefd9 */
--color-secondary-100: 255 234 204; /* ⬅ #ffeacc */
--color-secondary-200: 255 229 191; /* ⬅ #ffe5bf */
--color-secondary-300: 255 213 153; /* ⬅ #ffd599 */
--color-secondary-400: 255 182 77; /* ⬅ #ffb64d */
--color-secondary-500: 255 151 0; /* ⬅ #ff9700 */
--color-secondary-600: 230 136 0; /* ⬅ #e68800 */
--color-secondary-700: 191 113 0; /* ⬅ #bf7100 */
--color-secondary-800: 153 91 0; /* ⬅ #995b00 */
--color-secondary-900: 125 74 0; /* ⬅ #7d4a00 */
/* tertiary | #bee1da */
--color-tertiary-50: 245 251 249; /* ⬅ #f5fbf9 */
--color-tertiary-100: 242 249 248; /* ⬅ #f2f9f8 */
--color-tertiary-200: 239 248 246; /* ⬅ #eff8f6 */
--color-tertiary-300: 229 243 240; /* ⬅ #e5f3f0 */
--color-tertiary-400: 210 234 229; /* ⬅ #d2eae5 */
--color-tertiary-500: 190 225 218; /* ⬅ #bee1da */
--color-tertiary-600: 171 203 196; /* ⬅ #abcbc4 */
--color-tertiary-700: 143 169 164; /* ⬅ #8fa9a4 */
--color-tertiary-800: 114 135 131; /* ⬅ #728783 */
--color-tertiary-900: 93 110 107; /* ⬅ #5d6e6b */
/* success | #4BB543 */
--color-success-50: 228 244 227; /* ⬅ #e4f4e3 */
--color-success-100: 219 240 217; /* ⬅ #dbf0d9 */
--color-success-200: 210 237 208; /* ⬅ #d2edd0 */
--color-success-300: 183 225 180; /* ⬅ #b7e1b4 */
--color-success-400: 129 203 123; /* ⬅ #81cb7b */
--color-success-500: 75 181 67; /* ⬅ #4BB543 */
--color-success-600: 68 163 60; /* ⬅ #44a33c */
--color-success-700: 56 136 50; /* ⬅ #388832 */
--color-success-800: 45 109 40; /* ⬅ #2d6d28 */
--color-success-900: 37 89 33; /* ⬅ #255921 */
/* warning | #EAB308 */
--color-warning-50: 252 244 218; /* ⬅ #fcf4da */
--color-warning-100: 251 240 206; /* ⬅ #fbf0ce */
--color-warning-200: 250 236 193; /* ⬅ #faecc1 */
--color-warning-300: 247 225 156; /* ⬅ #f7e19c */
--color-warning-400: 240 202 82; /* ⬅ #f0ca52 */
--color-warning-500: 234 179 8; /* ⬅ #EAB308 */
--color-warning-600: 211 161 7; /* ⬅ #d3a107 */
--color-warning-700: 176 134 6; /* ⬅ #b08606 */
--color-warning-800: 140 107 5; /* ⬅ #8c6b05 */
--color-warning-900: 115 88 4; /* ⬅ #735804 */
/* error | #FF0000 */
--color-error-50: 255 217 217; /* ⬅ #ffd9d9 */
--color-error-100: 255 204 204; /* ⬅ #ffcccc */
--color-error-200: 255 191 191; /* ⬅ #ffbfbf */
--color-error-300: 255 153 153; /* ⬅ #ff9999 */
--color-error-400: 255 77 77; /* ⬅ #ff4d4d */
--color-error-500: 255 0 0; /* ⬅ #FF0000 */
--color-error-600: 230 0 0; /* ⬅ #e60000 */
--color-error-700: 191 0 0; /* ⬅ #bf0000 */
--color-error-800: 153 0 0; /* ⬅ #990000 */
--color-error-900: 125 0 0; /* ⬅ #7d0000 */
/* surface | #c7c7c7 */
--color-surface-50: 247 247 247; /* ⬅ #f7f7f7 */
--color-surface-100: 244 244 244; /* ⬅ #f4f4f4 */
--color-surface-200: 241 241 241; /* ⬅ #f1f1f1 */
--color-surface-300: 233 233 233; /* ⬅ #e9e9e9 */
--color-surface-400: 216 216 216; /* ⬅ #d8d8d8 */
--color-surface-500: 199 199 199; /* ⬅ #c7c7c7 */
--color-surface-600: 179 179 179; /* ⬅ #b3b3b3 */
--color-surface-700: 149 149 149; /* ⬅ #959595 */
--color-surface-800: 119 119 119; /* ⬅ #777777 */
--color-surface-900: 98 98 98; /* ⬅ #626262 */
}