a css framework using the new dart-sass features
npm install style-copilot
yarn add style-copilot
Create a sass file in your project and and add the following code to it.
All
@use
files must be added to the top of the file.
@use "~style-copilot"
To add more colors or to override exiting variables.
@use "~style-copilot"
@use "theme"
Any of the following variables can be overwritten here.
\:root
// Fonts heading
--heading-fonts: 'Roboto', sans-serif
--heading-font-weight: 700
--heading-color: #444
--body-fonts: 'Roboto', sans-serif
--body-font-weight: 400
--body-color: #444
// Global body styles
--body-margin-top: 0
--body-bg-color: var(--gray-100)
--body-line-height: 1.48
// Panel
--panel-bg-color: #fff
--panel-color: #444
--panel-padding: 12px
You can create your own variables here or extend it by using package mixins, config, and functions
NOTE: This will not create color variations for utilities like button, background and borders.
@use "style-copilot/sass/mixins"
$colors: ('electric-violet': (DEFAULT: #6400E6, 100: #E2CCFF, 200: #B780FF, 300: #9A4DFF)) // and so on
\:root
+mixins.color-loop($colors)
...rest
If you don't like the format of the sass map you can always change your .sass
file to a .scss
file, or you can
create a _colors.scss
file and import it into _theme.sass
file.
IMPORTANT: When creating a color map you must have at lease a DEFAULT key, the rest of the key is upto you to choose.
$colors: (
'electric-violet': (
DEFAULT: #6400E6,
50: #E2CCFF,
100: #D4B3FF,
200: #B780FF,
300: #9A4DFF,
400: #7D1AFF,
500: #6400E6,
600: #4E00B3,
700: #370080,
800: #21004D,
900: #0B001A
)
)
@use "~style-copilot"
@use "~style-copilot/sass/mixins"
@use "theme"
.btn
+mixins.buttons(theme.$colors)
.border
+mixins.borders(theme.$colors)