Skip to content

Latest commit

 

History

History
75 lines (56 loc) · 1.97 KB

README.md

File metadata and controls

75 lines (56 loc) · 1.97 KB
Raw

Documentation

Components

  1. box
  2. button
  3. card
  4. checkbox
  5. frame
  6. input
  7. linked
  8. list
  9. message
  10. nav-sidebar
  11. selector
  12. separator
  13. slider
  14. suggestions
  15. switch
  16. typography

Themes

A theme must be provided to a container that houses all of the elements.

Three themes are available: dark-theme, light-theme and light-theme-2.

Example

<body class="dark-theme">
  <!-- Elements -->
</body>

Accent and Danger colors

Accent and danger colors can be changed via the css variables: --clr-accent, --clr-accent-text, --clr-danger, --clr-danger-text. These variables should be defined on the same element as theme or above them.

(Remember to have the -text variables with a sufficient contrast to the base color, to keep the text readable)

Example

.my-accents {
  --clr-accent: #16a085;
  --clr-accent-text: #e6e6e6;
  --clr-danger: #fc88b1;
  --clr-danger-text: #1b1b1b;
}
<div class="my-accents dark-theme">
  <!-- Elements -->
</div>

Patterns

Font size

Since most of all of the elements padding, margins etc. are using the em unit (size relative to the element font-size). It is recommended to have a default font size set on the container element, and have every other element inherit it, if a nested component needs to change the size of it's children, it can then simply define a new font size and all of it's children will automatically get resized.

Example

*:not(:is(body, h1, h2, h3, h4, h5, h6)) {
  font-size: inherit;
}

body {
  font-size: 14px;
}