Basic Usage link
Loading editor...
<script>
import { RadioStatic } from 'radio-color-system';
let colors = [{
color: '#0652da',
name: ['primary', 'secondary', 'tertiary']
},
{
color: '#919191',
name: 'neutral'
}
];
</script>
<RadioStatic {colors} async={true} />
<div class="primary-90 primary-90-text">
Primary Color
</div>
<div class="secondary-50 primary-50-text">
Secondary Color
</div>
<div class="tertiary-40 tertiary-40-text">
Tertiary Color
</div>Motivation
System design libraries offer a plethora of elements that can be overwhelming to navigate. However, incorporating a system change library into your project can enhance your productivity and simplify development processes. Yet, customization and optimization can be challenging to implement. Fortunately, Svelte's unique and intuitive structure eliminates the need for most component library dependencies.
With Radio Color System & Svelte, you can easily create your own color system and rapidly develop your desired components.
Advanced usage
Content-based color palettes
RadioActive allows the end user to edit the theme according to the content they are interacting with. You can use it for content that may be irrelevant to your color palette and provide a more personalized experience.
It converts the color values in the current image to hsl format and groups them. Uses the dominant one of these colors, and expects the colors to be between a certain light and saturation value.
If the image is not suitable for the algorithm, it will return the default color. More information about the exceptions; CanvasRenderingContext2D: getImageData()
Works independently of any design system and it has a single purpose.
Allows you to work asynchronously and gain from the colors that will come pre-loaded in your project.
Usage of content-based color palettes link
Loading editor...
<script>
import { RadioActive } from 'radio-color-system';
</script>
<RadioActive>
<img src="./image.jpg" alt="Rick Astley dancing" />
<div class="card dynamic-90 dynamic-90-text">
<h3>Dynamic Color</h3>
<p>Dynamic colors are great</p>
</div>
</RadioActive>
<style>
.card {
padding: 1rem;
border-radius: 0.5rem;
margin-bottom: 1rem;
}
</style>RadioActive link
async link
By default this value is false, when the image loaded after than generates the color. If you want to dont use default color set this value to true.
target link
It adds an id attribute to the element it is used in and creates the styles to be created under this id. In cases where it is used in more than one place on the page, it is necessary to give a unique value.
color
It adds an id attribute to the element it is used in and creates the styles to be created under this id. In cases where it is used in more than one place on the page, it is necessary to give a unique value.
RadioStatic link
async link
When true, the component will be rendered asynchronously. This is useful for optimizing performance when the component is rendered in a loop. Also be careful when using this, cause of async color load user can see a flash of unstyled content.
ColorVariant link
ColorVariant() link
A function that returns an array of objects representing the color variant. The returned objects should have the `count`, `background`, and `foreground` properties.
ColorOption link
color | rgb | hex link
The base color to use for generating the color variants. You can use Color type or a string in the format of rgb or hex.
selector link
An object specifying which selectors to generate.
Whether to generate attribute selectors.
Whether to generate class selectors.
theme link
An object specifying color variants to use when generating token styles.
darken
A function that returns an array of objects representing dark color variants.
lighten
A function that returns an array of objects representing light color variants.