How to use @microsoft/fast-colors - 10 common examples

(swatch: Swatch): void => {
                        const designSystem: DesignSystem = Object.assign(
                            {},
                            designSystemDefaults,
                            {
                                backgroundColor: swatch,
                                accentPaletteConfig: Object.assign(
                                    {},
                                    accentPaletteConfig,
                                    { baseColor: parseColorHexRGB(swatch) }
                                ),
                            }
                        );

                        expect(
                            contrast(swatch, accentForegroundRest(designSystem))
                            // There are a few states that are impossible to meet contrast on
                        ).toBeGreaterThanOrEqual(4.47);
                        expect(
                            contrast(swatch, accentForegroundHover(designSystem))
                            // There are a few states that are impossible to meet contrast on
                        ).toBeGreaterThanOrEqual(3.7);
                        expect(
                            contrast(swatch, accentForegroundLargeRest(designSystem))
                        ).toBeGreaterThanOrEqual(3);
                        expect(

yOffsetMultiplier,
            opacity,
            blurMultiplier,
            blurBase = 0,
        }: ShadowConfig = shadowConfig;
        // TODO: (Breaking) Remove default https://github.com/microsoft/fast-dna/issues/2469

        const lum: number = rgbToRelativeLuminance(
            parseColorString(backgroundColor(config))
        );
        const opacityMultiple: number = 2 - lum; // white (1) = 1; black (0) = 2;
        return [xOffsetMultiplier, yOffsetMultiplier]
            .map((val: number) => parseFloat((val * elevationValue).toFixed(1)))
            .concat(blurBase + blurMultiplier * elevationValue)
            .map(toPx)
            .concat(new ColorRGBA64(r, g, b, opacity * opacityMultiple).toStringWebRGBA())
            .join(" ");
    };
}

return (config: DesignSystem): string => {
        const { r, g, b }: ColorRGBA64 = parseColorString(color);
        const {
            xOffsetMultiplier,
            yOffsetMultiplier,
            opacity,
            blurMultiplier,
            blurBase = 0,
        }: ShadowConfig = shadowConfig;
        // TODO: (Breaking) Remove default https://github.com/microsoft/fast-dna/issues/2469

        const lum: number = rgbToRelativeLuminance(
            parseColorString(backgroundColor(config))
        );
        const opacityMultiple: number = 2 - lum; // white (1) = 1; black (0) = 2;
        return [xOffsetMultiplier, yOffsetMultiplier]
            .map((val: number) => parseFloat((val * elevationValue).toFixed(1)))
            .concat(blurBase + blurMultiplier * elevationValue)
            .map(toPx)
            .concat(new ColorRGBA64(r, g, b, opacity * opacityMultiple).toStringWebRGBA())
            .join(" ");
    };
}

return (newColor: { hex: string }): void => {
            const color: ColorRGBA64 | null = parseColorHexRGB(newColor.hex);

            if (color instanceof ColorRGBA64 && typeof callback === "function") {
                callback(color);
            }

            this.setState({
                [palette]: newColor.hex,
            } as any);
        };
    }

const onClick: React.MouseEventHandler = (
                    e: React.MouseEvent
                ): void => {
                    const color: ColorRGBA64 | null = parseColorHexRGB(
                        colorValues[colorName]
                    );
                    if (color instanceof ColorRGBA64) {
                        callback(color);
                    }

                    this.setState({
                        [stateKey]: colorValues[colorName],
                    } as any);
                };

import {
    DesignSystem,
    DesignSystemDefaults,
    Palette,
} from "@microsoft/fast-components-styles-msft";
import { createColorPalette } from "@microsoft/fast-components-styles-msft";
import { ColorRGBA64, parseColorHexRGB } from "@microsoft/fast-colors";
import { defaultAccentColor, defaultNeutralColor } from "./colors";
import { StandardLuminance } from "@microsoft/fast-components-styles-msft/dist/utilities/color/neutral-layer";

const neutralPalette: Palette = createColorPalette(parseColorHexRGB(
    defaultNeutralColor
) as ColorRGBA64);

export type ColorsDesignSystem = DesignSystem;
export const colorsDesignSystem: ColorsDesignSystem = Object.assign(
    {},
    DesignSystemDefaults,
    {
        baseLayerLuminance: StandardLuminance.DarkMode,
        neutralPalette,
        accentPalette: createColorPalette(parseColorHexRGB(
            defaultAccentColor
        ) as ColorRGBA64),
        accentBaseColor: defaultAccentColor,
    }
);

public componentDidUpdate(
        prevProps: CSSBoxShadowProps,
        prevState: CSSBoxShadowState
    ): void {
        if (this.state !== prevState) {
            const rgb: ColorRGBA64 = parseColorHexRGB(this.state.boxShadowColor);
            const rgba: ColorRGBA64 = ColorRGBA64.fromObject({
                r: rgb.r,
                g: rgb.g,
                b: rgb.b,
                a: this.state.boxShadowOpacity,
            });

            const boxShadowArray: string[] = [
                this.state.boxShadowOffsetX,
                this.state.boxShadowOffsetY,
                this.state.boxShadowBlurRadius,
                rgba.toStringWebRGBA(),
            ];

            this.props.onChange({
                boxShadow: boxShadowArray.reduce(

(color: string): ColorRGBA64 => {
        let parsed: ColorRGBA64 | null = parseColorHexRGB(color);

        if (parsed !== null) {
            return parsed;
        }

        parsed = parseColorWebRGB(color);

        if (parsed !== null) {
            return parsed;
        }

        throw new Error(
            `${color} cannot be converted to a ColorRGBA64. Color strings must be one of the following formats: "#RGB", "#RRGGBB", or "rgb(r, g, b)"`
        );
    }
);

clipDark: 0,
};

/**
 * @deprecated
 */
export const neutralPaletteConfig: ColorPaletteConfig = {
    ...paletteConstants,
};

/**
 * @deprecated
 */
export const accentPaletteConfig: ColorPaletteConfig = {
    ...paletteConstants,
    baseColor: parseColorHexRGB("#0078D4"),
};

import { ColorRGBA64, parseColorHexRGB } from "@microsoft/fast-colors";
import { defaultAccentColor, defaultNeutralColor } from "./colors";
import { StandardLuminance } from "@microsoft/fast-components-styles-msft/dist/utilities/color/neutral-layer";

const neutralPalette: Palette = createColorPalette(parseColorHexRGB(
    defaultNeutralColor
) as ColorRGBA64);

export type ColorsDesignSystem = DesignSystem;
export const colorsDesignSystem: ColorsDesignSystem = Object.assign(
    {},
    DesignSystemDefaults,
    {
        baseLayerLuminance: StandardLuminance.DarkMode,
        neutralPalette,
        accentPalette: createColorPalette(parseColorHexRGB(
            defaultAccentColor
        ) as ColorRGBA64),
        accentBaseColor: defaultAccentColor,
    }
);