osyka

v0.0.1-2

Published

19 days ago

Simple and opinionated [SolidJS](https://solidjs.com/) UI library partially based on [Material Design 3](https://m3.material.io/) and a set of enhancements for Solid itself, built for [Osyah](https://osyah.com/).

Downloads

0High
0Medium
0Low

krulod

Osyka

Simple and opinionated SolidJS UI library partially based on Material Design 3 and a set of enhancements for Solid itself, built for Osyah.

Install

pnpm add osyka

Osyka is published as a set of .jsx and .styl files, so you will need a bundler configured to compile SolidJS JSX and Stylus.

Channels

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's SetStoreFunction)

Theming

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.

Scheme

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:
1. run pnpm osyka_scheme_gen <variant_id> <source_color_hex>
2. forward the output to a .css file and import it from your application's entry point

And a couple of advanced ones:

the string yielded by osyka_scheme_gen may 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)

Scheme: Variant

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

Published

Vulnerabilities

Links

Maintainers

Keywords