@velmajs/colors

This package contains the color library of Velma.

What is the color library?

This package makes it easy to manage the colors in velma. You have some extra funcionality like mixing colors.

Installation

Run the following command to install the package:

npm install @velmajs/colors

Usage

Use the following css in the root css of your project to use the color-mix function.

[style*='--color-mix-percentage'] {
	--_color-percentage: calc(var(--color-mix-percentage, 1) * 100%);
	--_color-alpha: calc(var(--color-mix-alpha, 1) * 100%);
	--_color-mixin: calc(var(--_color-alpha) - var(--_color-percentage));
	--color-mix: color-mix(
		in oklab,
		var(--color, #fff) var(--_color-percentage),
		var(--color-contrast) var(--_color-mixin)
	);
}

To use the colorMix function in your component, import the function and use it in your style tag.

  <script>
    import {colorMix} from '@velmajs/colors'
  </script>

  <div class="element" style={colorMix('primary')}></div>
  OR
  <div class="element" style="{colorMix('primary')}"></div>


  <style>
    .element {
        background: var(--color-mix);
        color: var(--color-contrast);
    }
  </style>

Examples

Get the primary color

  colorMix('primary')

Get a alpha variant of the primary color

  colorMix('primary/.5')

Get a alpha variant of a random color

  colorMix('#fff/.5')

Mix percentage between color and contrast

  colorMix('#fff-.5')

Combine mix percentage and alpha between color and contrast

  colorMix('#fff-.5/.5')

Resources

• Velma Documentation
• Svelte Documentation