0.0.4 • Published 4 years ago
caarya-react-playbook v0.0.4
This project was bootstrapped with Create React App.
Theme.scss file base.
/// Base ///
$base-font-size: 1rem;
$base-line-height: 1.25 * $base-font-size;
// Spacing Helpers
$spaceamounts: 0, 5, 10,15,20;
//Milligram Color Palette
$color-initial: #fff !default;
$color-primary: #9b4dca !default;
$color-secondary: #606c76 !default;
$color-tertiary: #f4f5f6 !default;
$color-quaternary: #d1d1d1 !default;
$color-quinary: #e1e1e1 !default;
/// Typography ///
$type-settings:(
xxl: (
font-size: $base-font-size + 2rem,
line-height: $base-line-height*4
),
xl: (
font-size: $base-font-size + 0.8rem,
line-height: $base-line-height*2
),
l: (
font-size: $base-font-size + 0.4rem,
line-height: $base-line-height*2
),
m: (
font-size: $base-font-size,
line-height: $base-line-height
),
s: (
font-size: $base-font-size - 0.2rem,
line-height: $base-line-height
),
xs: (
font-size: $base-font-size - 0.4rem,
line-height: $base-line-height
)
);
/// Fonts ///
$fonts:(
p-font:(
regular: '',
mediumbold: '',
bold: ''
),
s-font:(
regular: '',
mediumbold: '',
bold: ''
)
);
/// Base Color Pallet ////
$colors:(
text:(
p-color : '',
s-color: '',
t-color: '',
),
backgrounds:(
p-color : '',
s-color: '',
t-color: ''
),
input:(
default: '',
active: '',
disabled: '',
placeholder: ''
)
);
/// Buttons ///
//ToDo : Button types should contain color and bg-color
$btn-types: (
default: #7f8c8d,
success: #27ae60,
danger: #c0392b,
warning: #f1c40f,
info: #2980b9
) !default;
/// Responsive Break Points ///
$breakpoints: (
mobile: 320px,
android: 360px,
tablet: 768px,
laptop: 1024px,
largelaptop: 1440px,
desktop: 1600px,
tv: 1920px,
largescreen: 2560px,
);