Security News
The Unpaid Backbone of Open Source: Solo Maintainers Face Increasing Security Demands
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
@labcodes/confetti-ds
Advanced tools
Labcodes' design system, focused on accessibility and ease to use
Install the latest version of @labcodes/confetti-ds
via npm:
npm install @labcodes/confetti-ds
Add this to your main scss
file:
@import '~@labcodes/confetti-ds/scss/main';
To be able to use our styles, your react project needs to support
scss
andsvg
files.
Add the following code to the head tag of your project:
<link href="https://use.typekit.net/boj8rad.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,500;0,600;1,500;1,600&display=swap" rel="stylesheet">
Keep in mind that the license for the fonts is only for Labcodes' projects, and that the fonts won't work for other codebases. If you wish to use our fonts, acquire your license to use them, or try changing the font to one with a broader license.
Our styles already reference the fonts, so after importing them, everything should be good to go.
Our design system accepts theming via scss variables. To change a theme for a component, you'll just need to override the corresponding theme variable.
To do that, take a look at which are the default themes in our _settings.scss file, and which themes are available for the components in the _colors.scss file.
To change the themes, you may need to import our variables files before overwriting. To properly overwrite the Button theme, for example, you may need to do something like this:
// first, import the variables file
@import "~@labcodes/confetti-ds/scss/variables/_all";
// then, overwrite the variable
$button-theme: $purple-palette;
// finally, import the rest of the styles
@import "~@labcodes/confetti-ds/scss/main";`
To use any of our components, you just need to import them directly from @labcodes/confetti-ds
.
Example for Alert
component:
import Alert from '@labcodes/confetti-ds'
function App() {
return <Component />
}
For example, if you render the Alert with <Alert text="Testing alerts!" icon="eye-opened" />
in the Welcome page from our Django boilerplate, you'll probably be looking at something like this:
To know where to import the components from, explore our folder structure for components. The compressed package's dist
folder uses the same structure as the src
folder from our source code, so if you, for example, want to import the Button
component, you'll import it with import { Button } from "@labcodes/confetti-ds";
or import Button from "@labcodes/confetti-ds/dist/Button/Button";
, because the source code for the Button
component is inside the src/Button
folder.
For information on props and their types, just check the prop tabels inside each component's docs.
FAQs
Labcodes' design system, focused on accessibility and ease to use
The npm package @labcodes/confetti-ds receives a total of 2 weekly downloads. As such, @labcodes/confetti-ds popularity was classified as not popular.
We found that @labcodes/confetti-ds demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 9 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
Security News
License exceptions modify the terms of open source licenses, impacting how software can be used, modified, and distributed. Developers should be aware of the legal implications of these exceptions.
Security News
A developer is accusing Tencent of violating the GPL by modifying a Python utility and changing its license to BSD, highlighting the importance of copyleft compliance.