graycoreio/daffodil

View on GitHub
libs/design/scss/theme.scss

Summary

Maintainability
Test Coverage
// @docs

// `theme` is a utility library for theming the daffodil
// design library. It contains many useful mixins, functions,
// and variables.

// @note You can use this as often as you like, as it only contains SCSS
// variables, mixins, and functions; thus it won't effect your final
// compiled stylesheet size.

// @usage
// ```scss
// @use '@daffodil/design/scss/theme';
// ```

@forward 'core';
@forward 'theming';

// @daffodil/design components
@use './theming/theme-css-variables' as variables;
@use '../breadcrumb/src/breadcrumb-theme' as breadcrumb;
@use '../button/src/button-theme' as button;
@use '../article/src/article-theme' as article;
@use '../src/atoms/form/error-message/error-message-theme' as error-message;
@use '../src/atoms/form/form-field/form-field/form-field-theme' as form-field;
@use '../src/atoms/form/input/input-theme' as input;
@use '../src/atoms/form/native-select/native-select-theme' as native-select;
@use '../loading-icon/src/loading-icon-theme' as loading-icon;
@use '../accordion/src/accordion-theme' as accordion;
@use '../callout/src/callout-theme' as callout;
@use '../card/src/card-theme' as card;
@use '../hero/src/hero-theme' as hero;
@use '../list/src/list-theme' as list;
@use '../media-gallery/src/media-gallery-theme' as media-gallery;
@use '../menu/src/menu-theme' as menu;
@use '../modal/src/modal-theme' as modal;
@use '../navbar/src/navbar-theme' as navbar;
@use '../notification/src/notification-theme' as notification;
@use '../paginator/src/paginator-theme' as paginator;
@use '../sidebar/src/sidebar-theme' as sidebar;
@use '../progress-bar/src/progress-bar-theme' as progress-bar;
@use '../scss/state/skeleton/mixins' as skeleton;
@use '../tabs/src/tabs-theme' as tabs;
@use '../tree/src/tree-theme' as tree;
@use '../toast/src/toast-theme' as toast;

//
// Generates the styles of a @daffodil/design theme.
//
// Usage:
// ```scss
// @use '@daffodil/design/scss/theme';
//
// @include daff-theme($theme);
// ```
@mixin daff-theme($theme) {
    // CSS variables
    @include variables.daff-theme-css-variables($theme);

    // Mixins
    @include skeleton.daff-skeleton-theme($theme);

    // Atoms
    @include button.daff-button-theme($theme);
    @include breadcrumb.daff-breadcrumb-theme($theme);
    @include error-message.daff-error-message-theme($theme);
    @include form-field.daff-form-field-theme($theme);
    @include input.daff-input-theme($theme);
    @include native-select.daff-native-select-theme($theme);
    @include loading-icon.daff-loading-icon-theme($theme);
    @include progress-bar.daff-progress-bar-theme($theme);

    // Molecules
    @include accordion.daff-accordion-theme($theme);
    @include article.daff-article-theme($theme);
    @include callout.daff-callout-theme($theme);
    @include card.daff-card-theme($theme);
    @include hero.daff-hero-theme($theme);
    @include list.daff-list-theme($theme);
    @include media-gallery.daff-media-gallery-theme($theme);
    @include menu.daff-menu-theme($theme);
    @include modal.daff-modal-theme($theme);
    @include navbar.daff-navbar-theme($theme);
    @include notification.daff-notification-theme($theme);
    @include paginator.daff-paginator-theme($theme);
    @include sidebar.daff-sidebar-theme($theme);
    @include tabs.daff-tabs-theme($theme);
    @include tree.daff-tree-theme($theme);
    @include toast.daff-toast-theme($theme);
}