Simple and opinionated SolidJS UI library partially based on Material Design 3 and a set of enhancements for Solid itself, built for Osyah.
pnpm add osykaOsyka is published as a set of .jsx and .styl files, so you will need a bundler configured to compile SolidJS JSX and Stylus.
SolidJS loves read/write segregation, but we don't. Adopting the shared read/write function approach reduces the verbosity of all code, makes it possible to use reactive primitives as object properties and improves code composability. We call a function that can be used for both reading and writing a reactive state a channel. Osyka provides a few channel wrappers around SolidJS reactive primitives:
-
Signal,SignalPersist: signal value is read by calling the returned function without arguments, written by calling with one argument (setting the value through an update function is unsupported) -
Resource: resource actions (refetch/mutate) are simply made resource's properties -
Store,StorePersist: state is accessed by calling the store with zero arguments, updated by calling with one or more arguments (forwarded to store'sSetStoreFunction)
The look of your UI can be tuned through --Osyka* CSS variables that correspond to a subset of Material Design tokens.
- Font:
--OsykaFontPlain--OsykaFontBrand
- Shape:
--OsykaShape_none--OsykaShape_xs--OsykaShape_xsTop--OsykaShape_sm--OsykaShape_md--OsykaShape_lg--OsykaShape_lgTop--OsykaShape_lgStart--OsykaShape_lgEnd--OsykaShape_xl--OsykaShape_xlTop--OsykaShape_full
- Scheme
All variables are initialized except for Scheme ones to avoid bloating the bundle with unused default colors.
A scheme is a set of semantic color variables derived from:
- selected scheme variant
- selected source color
- user's light/dark theme preference
- user's contrast preference
Scheme generation in Osyka is handled by osyka_scheme module which uses @material/material-color-utilities under the hood. There are several simple ways to setup a scheme:
- use Osyka's adaptive baseline scheme by importing it from your application's entry point:
osyka/dist/osyka_scheme_baseline.css - generate an adaptive scheme from a variant and a source color:
- run
pnpm osyka_scheme_gen <variant_id> <source_color_hex> - forward the output to a
.cssfile and import it from your application's entry point
- run
And a couple of advanced ones:
- the string yielded by
osyka_scheme_genmay be generated programmatically:import {OsykaSchemeRoot} from 'osyka' const css = OsykaSchemeRoot( {variant, sourceColor} )
- to generate a scheme at runtime or apply a scheme to a specific element other than
<html>, use an API:import {OsykaSchemeColors} from 'osyka' const style = OsykaSchemeColors( {variant, sourceColor}, light, // boolean contrast, // -1 | 0 | 1 ) someElement.setAttribute('style', style)
A variant is responsible for turning a source color to a set of tonal palettes with its color magic. To use a variant when generating a scheme programmatically, import one of the classes listed below from @material/material-color-utilities.
Tip: the variant most developers will want is SchemeTonalSpot.
-
SchemeContent: uses the source color as background, has similiar appearance in light and dark mode, tertiary palette is analogous to the primary one -
SchemeExpressive: a scheme that is intentionally detached from the source color -
SchemeFidelity: uses the source color as background, similiar appearance in light and dark mode, tertiary palette is complementary to the primary one -
SchemeFruitSalad: a playful theme — the source color's hue does not appear in the theme -
SchemeMonochrome: a grayscale scheme -
SchemeNeutral: a nearly grayscale scheme -
SchemeRainbow: a playful theme — the source color's hue does not appear in the theme -
SchemeTonalSpot: has low to medium colorfullness, the tertiary palette is related to the source color -
SchemeVibrant: maxes out colorfullness of the primary tonal palette