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 '../beacon/src/beacon-theme' as beacon;
@use '../breadcrumb/src/breadcrumb-theme' as breadcrumb;
@use '../button/src/button/basic/button-theme' as button;
@use '../button/src/button/flat/flat-theme' as flat-button;
@use '../button/src/button/icon/icon-theme' as icon-button;
@use '../button/src/button/raised/raised-theme' as raised-button;
@use '../button/src/button/stroked/stroked-theme' as stroked-button;
@use '../button/src/button/underline/underline-theme' as underline-button;
@use '../article/src/article-theme' as article;
@use '../tag/src/tag-theme' as tag;
@use '../form/src/error-message/error-message-theme' as error-message;
@use '../form/src/hint/hint-theme' as hint;
@use '../form-field/src/form-field-theme' as form-field;
@use '../native-select/src/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-base-theme' as card-base;
@use '../card/src/card/stroked/stroked-theme' as stroked-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 '../select/src/select-theme' as select;
@use '../sidebar/src/sidebar-theme' as sidebar;
@use '../spinner/src/spinner-theme' as spinner;
@use '../switch/src/switch-theme' as switch;
@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 '../text-snippet//src/text-snippet-theme' as text-snippet;
@use '../tree/src/tree-theme' as tree;
@use '../toast/src/toast-theme' as toast;

//
// Generates the styles of `@daffodil/design`'s component themes.
//
// @usage
// ```scss
// @use '@daffodil/design/scss/theme' as daff-theme;
//
// @include daff-theme.daff-component-themes($theme);
// ```
@mixin daff-component-themes($theme) {
	// CSS variables
	@include variables.daff-theme-css-variables($theme);

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

	@include accordion.daff-accordion-theme($theme);
	@include article.daff-article-theme($theme);
	@include tag.daff-tag-theme($theme);
	@include breadcrumb.daff-breadcrumb-theme($theme);

	@include button.daff-button-theme($theme);
	@include flat-button.daff-flat-button-theme($theme);
	@include icon-button.daff-icon-button-theme($theme);
	@include raised-button.daff-raised-button-theme($theme);
	@include stroked-button.daff-stroked-button-theme($theme);
	@include underline-button.daff-underline-button-theme($theme);

	@include card-base.daff-card-base-theme($theme);
	@include stroked-card.daff-stroked-card-theme($theme);

	@include form-field.daff-form-field-theme($theme);
	@include error-message.daff-error-message-theme($theme);
	@include hint.daff-hint-theme($theme);
	@include select.daff-select-theme($theme);
	@include native-select.daff-native-select-theme($theme);

	@include beacon.daff-beacon-theme($theme);
	@include spinner.daff-spinner-theme($theme);
	@include progress-bar.daff-progress-bar-theme($theme);

	@include callout.daff-callout-theme($theme);
	@include hero.daff-hero-theme($theme);
	@include list.daff-list-theme($theme);

	// deprecated
	@include loading-icon.daff-loading-icon-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 switch.daff-switch-theme($theme);
	@include tabs.daff-tabs-theme($theme);
	@include text-snippet.daff-text-snippet-theme($theme);
	@include toast.daff-toast-theme($theme);
	@include tree.daff-tree-theme($theme);
}

//
// @deprecated
// Generates the styles of a @daffodil/design theme.
//
// Usage:
// ```scss
// @use '@daffodil/design/scss/theme';
//
// @include daff-theme($theme);
// ```
@mixin daff-theme($theme) {
	@include daff-component-themes($theme);
}