# Token based styles for our modern UI.
tokens:
  css:
    theme:
      assets/css/tokens.css: {}

# The SMACSS category "base" is loaded first.
base:
  css:
    base:
      assets/css/base.css: {}

brand:
  css:
    theme:
      assets/css/brand.css: { weight: 500}
      assets/css/brand--sky.css: { weight: 700}

## 2. The SMACSS category Component — discrete, reusable UI elements

### 2.1 Atoms
alert:
  css:
    theme:
      assets/css/alert.css: {}

badge:
  css:
    theme:
      assets/css/badge.css: {}

button:
  css:
    theme:
      assets/css/button.css: {}
      assets/css/waves.css: {}
  dependencies:
    - socialblue/waves

cards:
  css:
    theme:
      assets/css/cards.css: {}

form-controls:
  css:
    theme:
      assets/css/form-controls.css: {}

list:
  css:
    theme:
      assets/css/list.css: {}

spinner:
  css:
    theme:
      assets/css/spinner.css: {}

waves:
  css:
    theme:
      /libraries/node-waves/dist/waves.css: {}
  js:
    /libraries/node-waves/dist/waves.min.js: { minified: true }
    assets/js/waves.min.js: { minified: true }

### 2.2 Molecules
block--informblock:
  css:
    component:
      assets/css/block--informblock.css: {}

breadcrumb:
  css:
    theme:
      assets/css/breadcrumb.css: {}

dropdown:
  css:
    theme:
      assets/css/dropdown.css: {}

file:
  css:
    theme:
      assets/css/file.css: {}

form-elements:
  css:
    theme:
      assets/css/form-elements.css: {}

form--input-groups:
  css:
    theme:
      assets/css/input-groups.css: {}

form--password:
  css:
    theme:
      assets/css/password.css: {}

like:
  css:
    theme:
      assets/css/like.css: {}

nav-book:
  css:
    theme:
      assets/css/nav-book.css: {}

nav-tabs:
  css:
    theme:
      assets/css/nav-tabs.css: {}

navbar:
  css:
    theme:
      assets/css/navbar.css: {}
  js:
    assets/js/navbar-secondary.min.js: {}
  dependencies:
    - core/drupal.debounce

pagination:
  css:
    theme:
      assets/css/pagination.css: {}

popover:
  css:
    theme:
      assets/css/popover.css: {}

select2:
  css:
    theme:
      assets/css/select2.css: {}

teaser:
  css:
    theme:
      assets/css/teaser.css: {}

tour:
  css:
    theme:
      assets/css/tour.css: {}

### 2.3 Organisms
comment:
  css:
    theme:
      assets/css/comment.css: {}

hero:
  css:
    theme:
      assets/css/hero.css: {}

hero--sky:
  css:
    theme:
      assets/css/hero--sky.css: {}

message:
  css:
    theme:
      assets/css/message.css: {}

meta:
  css:
    theme:
      assets/css/meta.css: {}

modal:
  css:
    theme:
      assets/css/modal.css: {}

offcanvas:
  css:
    theme:
      assets/css/offcanvas.css: {}

stream:
  css:
    theme:
      assets/css/stream.css: {}
site-footer:
  css:
    theme:
      assets/css/site-footer.css: {}

### 2.4 Templates
layout:
  css:
    component:
      assets/css/layout.css: {}
      assets/css/layout--sky.css: {}

page-node:
  css:
    layout:
      assets/css/page-node--sky.css: {}

color.preview:
  css:
    theme:
      color/css/preview-base.css: {}
      assets/css/preview.css: {}
      color/css/preview.css: {}
  js:
    color/preview.js: {}
  dependencies:
    - color/drupal.color