/*
 * Style setup for redsift-ui based sifts.
 *
 * - Provides:
 *   . ready-to-use UI components
 *   . responsive type system
 *   . breakpoint setup (via 'rupture')
 *   . common functionality like reset, patterns and fonts
 *
 * - Used by:
 *   . redsift-light
 *   . redsift-dark
 *
 * - Folder structure:
 *
 *   ./lib        -> mixin and function library
 *   ./common     -> CSS setup and common classes
 *   ./components -> UI components
 */

/*
 * Configuration via object '$ui-rs-core'
 */
@import './styles/config.import.styl';

/*
 * Mixin/functions library
 *
 * Common mixins and functions used by redsift-ui.
 */
@import './styles/lib/cards.import.styl'
@import './styles/lib/gradients.import.styl'
@import './styles/lib/images.import.styl'

/*
 * Base configuration and common classes:
 *
 * CSS base setup and common CSS classes.
 */
@import './styles/common/reset.import.styl'
@import './styles/common/fonts.import.styl'
@import './styles/common/patterns.import.styl'
@import './styles/common/breakpoints.import.styl'
@import './styles/common/animation.import.styl'
@import './styles/common/base.import.styl'
@import './styles/common/types.import.styl'
@import './styles/components/colour.import.styl'
@import './styles/common/icons.import.styl'

setup-font-faces()
create-cards('cards', false)
setup-types($ui-rs-core.types.fonts, $ui-rs-core.types.settings);
setup-color-system($ui-rs-core.themes.light)

/*
 * UI components:
 *
 * Each UI component is encapsulated within a setup function which takes an
 * opitional settings hash. If omitted the default settings available in the
 * respective component file are used. This allows a (theme) developer to
 * customize components for their own sifts and projects.
 */
@import './styles/components/inputs.import.styl'
@import './styles/components/buttons.import.styl'
@import './styles/components/icon-buttons.import.styl'
@import './styles/components/danger-buttons.import.styl'
@import './styles/components/sliders.import.styl'
@import './styles/components/widgets.import.styl'


@import './styles/components/style-switcher.import.styl'
/* FIXXME: refactor into components! */
@import './styles/components/d3.import.styl'

setup-inputs($ui-rs-core.inputs)
setup-buttons($ui-rs-core.buttons.light)
setup-default-icon-button($ui-rs-core.iconButtons.light.style, $ui-rs-core.buttons.light.black);
setup-default-danger-button()
setup-sliders($ui-rs-core.sliders.light)

setup-widget__down-arrow()
setup-style-switcher()