libs/design/scss/theme.scss
// @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);
}