95 lines
3.4 KiB
SCSS
95 lines
3.4 KiB
SCSS
@use 'sass:map';
|
|
|
|
$breakpoints: (
|
|
tiny: 320px,
|
|
small: 640px,
|
|
medium: 768px,
|
|
large: 1024px,
|
|
very-large: 1280px,
|
|
extra-large: 1536px,
|
|
ultra-large: 2560px,
|
|
);
|
|
|
|
// Color are chosen from TailwindCSS color scheme
|
|
// https://tailwindcss.com/docs/customizing-colors
|
|
|
|
// transitions
|
|
$transition-duration: 0.3s;
|
|
$transition-type: ease-out;
|
|
|
|
// borders and shadows
|
|
$box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
|
|
|
|
// themes
|
|
$themes: (
|
|
'light': (
|
|
'accent-color': #8BC34A, /* A bright, fresh green */
|
|
'hover-over-accent-color': #689F38, /* Slightly darker for hover feedback */
|
|
'text-over-accent-color': #FFFFFF, /* White for good contrast on the accent */
|
|
'bg-primary': #F1F8E9, /* Very light, almost off-white green */
|
|
'bg-primary-inverse': #33691E, /* Dark green for contrasting elements */
|
|
'bg-secondary': #DCEDC8, /* Slightly darker light green for subtle separation */
|
|
'bg-card': #FFFFFF, /* Clean white for content cards */
|
|
'heading-color': #33691E, /* Dark green for strong heading contrast */
|
|
'text-color': #212121, /* Dark gray for readable body text */
|
|
'inverse-text-color': #FFFFFF, /* White for text on dark backgrounds */
|
|
'muted-text-color': #757575, /* Medium gray for less important text */
|
|
'inline-code-color': #AED581, /* Light green to highlight inline code */
|
|
'highlight-color': #CCFF90, /* A very light, bright green for highlighting */
|
|
'footer-color': #E0E7DA, /* A slightly darker shade of the primary background */ ),
|
|
'dark': (
|
|
'accent-color': #AED581, /* A lighter green to stand out on dark */
|
|
'hover-over-accent-color': #8BC34A, /* Slightly lighter for hover feedback */
|
|
'text-over-accent-color': #212121, /* Dark gray for good contrast on the accent */
|
|
'bg-primary': #1B5E20, /* A deep, dark green */
|
|
'bg-primary-inverse': #F1F8E9, /* Very light green for contrasting elements */
|
|
'bg-secondary': #2E7D32, /* Slightly lighter dark green for subtle separation */
|
|
'bg-card': #388E3C, /* A medium dark green for content cards */
|
|
'heading-color': #F1F8E9, /* Very light green for strong heading contrast */
|
|
'text-color': #E0E7DA, /* Light gray/off-white for readable body text */
|
|
'inverse-text-color': #212121, /* Dark gray for text on light backgrounds */
|
|
'muted-text-color': #9E9E9E, /* Medium gray for less important text */
|
|
'inline-code-color': #CCFF90, /* Light, bright green to highlight inline code */
|
|
'highlight-color': #8BC34A, /* A brighter green for highlighting */
|
|
'footer-color': #2E7D32, /* A slightly lighter shade of the primary background */
|
|
),
|
|
);
|
|
|
|
$brand-colors: (
|
|
'facebook': #3b5998,
|
|
'twitter': #1da1f2,
|
|
'linkedin': #0077b5,
|
|
'reddit': #ff4500,
|
|
'tumblr': #35465c,
|
|
'pocket': #ef4056,
|
|
'diaspora': #1e1e1e,
|
|
'whatsapp': #25d366,
|
|
'instagram':#E1306C
|
|
);
|
|
|
|
$alerts: (
|
|
'success': (
|
|
// green 100
|
|
'bg-color': #dcfce7,
|
|
// green 800
|
|
'text-color': #166534,
|
|
),
|
|
'info': (
|
|
// sky 100
|
|
'bg-color': #e0f2fe,
|
|
// sky 800
|
|
'text-color': #075985,
|
|
),
|
|
'warning': (
|
|
// yellow 100
|
|
'bg-color': #fef9c3,
|
|
// yellow 800
|
|
'text-color': #854d0e,
|
|
),
|
|
'danger': (
|
|
// red 100
|
|
'bg-color': #fee2e2,
|
|
// red 800
|
|
'text-color': #991b1b,
|
|
),
|
|
);
|