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?}) => Promise
• getMaterialColorWithSync: (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.