Skip to content

Latest commit

 

History

History
81 lines (62 loc) · 2.18 KB

README.md

File metadata and controls

81 lines (62 loc) · 2.18 KB
Raw

Documentation

Components

  1. alert
  2. box
  3. breadcrumbs
  4. button
  5. card
  6. checkbox
  7. dialog
  8. frame
  9. input
  10. linked
  11. list
  12. message
  13. nav-sidebar
  14. scrollview
  15. selector
  16. separator
  17. skeleton
  18. slider
  19. spinner
  20. suggestions
  21. switch
  22. typography

Themes

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

Themes available: dark-theme, light-theme.

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;
}