Extending shoelace.css components?

[shoelace-style]

Extending shoelace.css components?

[claviska]

Sure thing. This is best done when you're using the source files so you can take advantage of CSS variables, otherwise you're just writing raw CSS and hardcoding values which is tedious.

This section outlines the concept broadly, but here's a more targeted example:

:root {
  --button-flat-bg-color: blue;
  --button-flat-bg-color-hover: color(blue, shade(10%));
  --button-flat-color: white; 
}

.button-flat {
  background-color: var(--button-flat-bg-color);
  color: var(--button-flat-color);

  & :hover {
    background-color: var(--button-flat-bg-color-hover);
  }
}

In this case, we're defining a handful of variables that the button will use. You could hardcode them, but then you can't use them later on.

You could also tap into any of Shoelace's variables such as input font sizes, button colors, etc. if you like:

.button-flat {
  background-color: var(--button-bg-color);
  color: var(--button-color);
}

When browser support improves and we can scope variables and use @apply, extending the library will become even easier.

[nevf]

@claviska Thanks for that. Is the .button-flat css above being added to your buttons.css or to a new file?

[claviska]

Preferably a new file so you never have to modify a source file.

[nevf]

@claviska Ok, thanks. It would be helpful to include info about extending shoelace components in the docs in addition to the 'Creating Custom Components' section you already have.

[watchwithdao]

@claviska Could you quickly walk through steps how to build shoelace from source? I was looking at the instruction but it doesn't seem to be clear.

[claviska]

The current version needs to be built with cssnext, and the process depends on what build tool(s) you're using. Check out their setup page and click webpack, gulp, etc. for details.

[watchwithdao]

Gotcha. I am trying to use Shoelace in an Angular app which is set up by using Angular CLI. It seems the build process is handled by Angular CLI with the use of Webpack in the background. I thought having Shoelace installed via npm would be enough to have Angular CLI handled the build. What am I missing? Could you provide some guidance?

[claviska]

Never used Angular, so I won't be of much help. Sorry!

[watchwithdao]

No worries! Thanks anyway.

[claviska]

Closing in prep for the 2.0 release.