Package Exports

ase-loader

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (ase-loader) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

ASE Loader

A webpack loader to convert Adobe Swatch Exchange files into CSS variables. The imported .ase files should be passed to both CSS-loader and Style-loader for it to function as intended.

Example

webpack.conf.js

    module: {
        rules: [
            {
                test: /\.ase$/,
                use: [
                    'style-loader',
                    'css-loader',
                    {
                        loader: 'ase-loader',
                        options: {
                            variations: 5, // How many light and dark variations of a single swatch color
                                           // Any number between 1 and 20
                            step: 2        // How big the steps are for the lighter and darker variations
                                           // A number between 1 and 99
                        }
                    },
                ]
            }
        ]
    },

lit.html.component.js

    import 'somePath/someFile.ase

The name is extracted and normalized from the .ase file. The output can look something like this:

:root {
    --color-seawaves-0-l4: #025D8A;
    --color-seawaves-0-l2: #02547D;
    --color-seawaves-0-ori: #02547D;
    --color-seawaves-0-d2: #02547D;
    --color-seawaves-0-d4: #024B70;
}

The original colors taken from the swatch file will always be marked with -ori at the end.

Idea's for theming

To make sure you can utilize this for theming, instead of using the name for the css variables from the file itself, I can probably make a few modifications to get the name from some configuration. But thats for future developments :-)