CSS

svogg-components emphazises encapsulation of logic management of commonly used components and is purposefully not meant to be used as a full on CSS framework. However, some lightweight token-based css variables and classes suitable for quick prototyping are provided.

Styles are completely opt-in and can be used by importing the provided stylesheet (preferably in your top level +layout.page):

import 'svogg-components/styles/index.css';

Component classes can be overriden or extended by adding rules in your own stylesheet. See which classes are being used in each component under "CSS" in respective component docs page.

.svogg-drawer {
  /* Overrides Drawer component background-color */
  background-color: red;
}

In order for the styles to be overriden properly, it is important to add the import of the provided stylesheet before the overriding styles.

svogg-components bases colors around one primary color represented by HSL values. These values provide a basis for the design tokens, being variations of the HSL values. The provided stylesheets contains rules for light/dark mode respectively - meaning all you have to do is define a primary color and let svogg-components manage dark/light mode internally. Of course, you could still always override these rules for full control.

Like all classes, the HSL values can be overriden in your own stylesheet. Changes in these values will reflect on all provided components and classes.

:root {
  /* Overrides svogg-components HSL values */
  --svogg-primary-hue: 200;
  --svogg-primary-saturation: 100%;
  --svogg-primary-lightness: 20%;
}

Try it out for yourself by adjusting the values below and see how it reflects on the colors of this page (check out HSL Color Picker for an even better color picker):

Additionally, svogg-components provides some extra classes which could be used in conjunction with the components for a coherent look: