Theme

Make your theme with CSS variables, SCSS helpers, and hard coded CSS with !important rule if necessary. Use default.scss as a base.

Colors

Color variables in CSS:

:root {
  --canvas-color: ...;
  --primary-color: ...;
  --secondary-color: ...;
}

In SCSS, there is a mixin to generate variables and color classes more easily:

@include colors.generate(
  $colors: (
    "canvas": ...,
    "primary": ...,
    "secondary": ...,
    "tertiary": ...,
    "success": ...,
    "danger": ...,
    "warning": ...,
    "info": ...,
  ),
  $text-contrast: ...,
  $border-contrast: ...,
  $hover-contrast: ...,
  $input-border-contrast: ...,
);

Text contrast colors

$colors would also generate CSS variables to let text color contrast background color. You can change these as you fancy to create cool results!

:root {
  --text-contrast-canvas-color: ...;
  --text-contrast-primary-color: ...;
  ...
}

Also, it generates versions of each color that contrast background color. In this way:

:root {
  --canvas-text-contrast-canvas-color: ...;
  --primary-text-contrast-canvas-color: ...;
  ...
}

Most importantly, you can access a version of a color that contrasts current background color through a CSS variable. You define current background color by adding a background class to your element, by extending that class using sass, or it would be set by parent element.

In the next example, .my-class would receive adapted text colors that contrast its parent background color.

.my-class {
  color: var(--secondary-text-color);
}

Border colors

You are able to customise them using CSS variables too.

:root {
  --canvas-border-color: ...;
  --primary-border-color: ...;
  ...
}

Hover

You may want to change color of clickable elements when hovered. You can set the contrast when a clickable element is hover by setting $hover-contrast.

:root {
  --canvas-hover-color: ...;
  --primary-hover-color: ...;
  ...
}

Input border

Input border colour behaves in similar way to text colour, with automatic contrast.

:root {
  --input-border-contrast-canvas-color: ...;
  --canvas-input-border-contrast-canvas-color: ...;
  ...
}
.my-class {
  border-color: var(--input-border-color);
}

Colour classes

Any colour classes are generated by colors.generate mixin in SCSS, for example: primary, primary-bg, and primary-text.

Default

If you include mixin colors.default(COLOR-NAME) in a component, it will have that COLOR by default.

.grid {
  @include colors.default('canvas');
}

Matching

You can set default to matching so element colours match parent colours.

.grid {
  @include colors.default('matching');
}

Default input

Include mixin colors.input-default(COLOR-NAME) to make inputs have that COLOR by default.

@include colors.input-default('canvas');