solid-material-color
v1.1.0
Published
A tool library for generating color value order
Downloads
14
Maintainers
Readme
solid-material-color
solid-material-color
is a function used in the solid framework or directly called in ordinary functions.
This project can be born out of the https://github.com/maiconcarraro/use-material-you project, which gives the foundation and the right to directly fork and copy.
Meanwhile, please refer to https://m3.material.io/styles/color/roles for the schema generated by this project.
Quick start
Install it:
npm i solid-material-color
# or
yarn add solid-material-color
# or
pnpm add solid-material-color
Use it:
solid-js
import { createColor } from 'solid-material-color'
function MyChartComponent() {
const [color, setColor] = createSignal('#ff0000')
// const [color, setColor] = createSignal('http://imgxxxx')
const [schema, status] = createColor({source: color})
return (
<div>
<For each={Object.entries(schema)}>
{([key, value]) => <div>
<span>{key}:</span>
<span
style={{
display: "block",
border: `1px solid #000`,
width: '100px',
height: '20px',
background: value,
}}
/>
<span>{value}</span>
</div>}
</For>
</div>
);
}
Ordinary function use
import { getMaterialColor } from 'solid-material-color'
async function getColor() {
const color = '#ff0000'
const schema = await getMaterialColor({source: color})
console.log(schema)
}
Synchronous use
if you want to use it synchronously, you not allow use img url by source
import { getMaterialColorWithSync } from 'solid-material-color'
function getColor() {
const color = '#ff0000'
const schema = getMaterialColorWithSync({source: color})
console.log(schema)
}
Props
source
: A color random seed, which can be a picture string or a color value string or a number.variant
: A type string, which can be seen in the following type fields.contrastLevel
: The number used to adjust the contrast level can be from 0 to 10.isDark
: A Boolean value indicating whether it is in dark mode, and the default value is No.crossOrigin
: Only when source is a picture string, it needs to be used to judge whether cross-domain picture request is needed.
The following are the parameters and return values of each function call.
createColor
: ({source, variant?, contrastLevel?, isDark?, crossOrigin?}) => [schema, status]getMaterialColor
: (source, {variant?, contrastLevel?, isDark?, crossOrigin?}) => PromisegetMaterialColorWithSync
: (source, {variant?, contrastLevel?, isDark?, crossOrigin?}) => schema
Variants
| Name | Description |
| ---------------- | ----------- |
| "tonal_spot" | Default for Material theme colors. Builds pastel palettes with a low chroma. |
| "fidelity" | The resulting color palettes match seed color, even if the seed color is very bright (high chroma). |
| "monochrome" | All colors are grayscale, no chroma. |
| "neutral" | Close to grayscale, a hint of chroma. |
| "vibrant" | Pastel colors, high chroma palettes. The primary palette's chroma is at maximum. Use fidelity
instead if tokens should alter their tone to match the palette vibrancy. |
| "expressive" | Pastel colors, medium chroma palettes. The primary palette's hue is different from the seed color, for variety.
| "content" | Almost identical to fidelity
. Tokens and palettes match the seed color. primaryContainer
is the seed color, adjusted to ensure contrast with surfaces. The tertiary palette is analogue of the seed color. |
| "rainbow" | A playful theme - the seed color's hue does not appear in the theme. |
| "fruit_salad" | A playful theme - the seed color's hue does not appear in the theme. |
| "image_fidelity" | Not an official variant, custom made. It extracts top 3 dominant colors and set as primary, secondary and tertiary palettes. |
version record
1.0.0
- Initialize basic content
1.1.0
- Fix the problem that the associated presentation does not take effect.
- Adjust the generation mode to createResource mode.