@daffodil/design 0.78.0 → 0.80.0

package/accordion/accordion.module.d.ts

@@ -3,7 +3,9 @@ import * as i1 from "@angular/common";
 import * as i2 from "./accordion/accordion/accordion.component";
 import * as i3 from "./accordion/accordion-item/accordion-item.component";
 import * as i4 from "./accordion/accordion-item-title/accordion-item-title.directive";
-/** @deprecated in favor of {@link DAFF_ACCORDION_COMPONENTS} */
+/**
+ * @deprecated in favor of {@link DAFF_ACCORDION_COMPONENTS}. Deprecated in version 0.78.0. Will be removed in version 1.0.0.
+ */
 export declare class DaffAccordionModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffAccordionModule, never>;
     static ɵmod: i0.ɵɵNgModuleDeclaration<DaffAccordionModule, never, [typeof i1.CommonModule, typeof i2.DaffAccordionComponent, typeof i3.DaffAccordionItemComponent, typeof i4.DaffAccordionItemTitleDirective], [typeof i2.DaffAccordionComponent, typeof i3.DaffAccordionItemComponent, typeof i4.DaffAccordionItemTitleDirective]>;

package/accordion/src/accordion-theme.scss

@@ -3,8 +3,8 @@
 @use '../../scss/theming';
 
 @mixin daff-accordion-theme($theme) {
-	$neutral: core.daff-map-deep-get($theme, 'core.neutral');
-	$base: core.daff-map-deep-get($theme, 'core.base');
+	$neutral: core.daff-map-get($theme, 'core', 'neutral');
+	$base: core.daff-map-get($theme, 'core', 'base');
 
 	.daff-accordion-item {
 		border-top: 1px solid theming.daff-illuminate($base, $neutral, 2);
@@ -12,9 +12,9 @@
 		&:last-child {
 			border-bottom: 1px solid theming.daff-illuminate($base, $neutral, 2);
 		}
-		
+
 		&__header {
-			&:after {
+			&::after {
 				border-color: currentColor;
 			}
 		}

package/article/README.md

@@ -4,7 +4,7 @@ Article provides styles to common element selectors to create an article in a co
 ## Overview
 Article can be used on any content page that displays large blocks of text-driven information. It's meant to be used as a standalone element and should not be nested inside any other components that may change the background color from the anticipated one. In the event that you must nest an article inside another component, please ensure that you set the article's background color to the default body color.
 
-## Supported Elements
+## Supported elements
 
 ### Headings
 <design-land-example-viewer-container example="article-headings"></design-land-example-viewer-container>
@@ -24,10 +24,10 @@ The link style in an article uses the default browser link style.
 
 ### Lists
 
-#### Unordered List
+#### Unordered list
 <design-land-example-viewer-container example="article-ul"></design-land-example-viewer-container>
 
-#### Ordered List
+#### Ordered list
 <design-land-example-viewer-container example="article-ol"></design-land-example-viewer-container>
 
 ### Code
@@ -39,15 +39,14 @@ These are styles for inline and multiline blocks of code.
 #### Code blocks
 <design-land-example-viewer-container example="article-code-block"></design-land-example-viewer-container>
 
-### Horizontal Rules
+### Horizontal rules
 <design-land-example-viewer-container example="article-hr"></design-land-example-viewer-container>
 
 ### Blockquote
 <design-land-example-viewer-container example="article-blockquote"></design-land-example-viewer-container>
 
 ## Encapsulation
-
-Articles also support other custom "non-native" components like [accordions](../accordion/README.md), [media galleries](../media-gallery/README.md), and [lists](../list/README.md). Unlike typical HTML (<p>, <ol>, <ul>, etc) content, these components must be style encaspulated to prevent article styles bleeding down from the article into their content. Many Daffodil components support this out of the box. If you have a custom component that you would like to place inside an article, you can use the `DaffArticleEncapsulatedDirective` on your component to prevent article styles bleeding into your component.
+Articles also support other custom "non-native" components like [accordions](/libs/design/accordion/README.md), [media galleries](/libs/design/media-gallery/README.md), and [lists](/libs/design/list/README.md). Unlike typical HTML (`<p>`, `<ol>`, `<ul>`, etc) content, these components must be style encaspulated to prevent article styles bleeding down from the article into their content. Many Daffodil components support this out of the box. If you have a custom component that you would like to place inside an article, you can use the `DaffArticleEncapsulatedDirective` on your component to prevent article styles bleeding into your component.
 
 ## Usage
 

package/article/article.module.d.ts

@@ -2,7 +2,9 @@ import * as i0 from "@angular/core";
 import * as i1 from "@angular/common";
 import * as i2 from "./article/article.component";
 import * as i3 from "./article-meta/article-meta.directive";
-/** @deprecated in favor of {@link DAFF_ARTICLE_COMPONENTS} */
+/**
+ * @deprecated in favor of {@link DAFF_ARTICLE_COMPONENTS}. Deprecated in version 0.78.0. Will be removed in version 1.0.0.
+ */
 export declare class DaffArticleModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffArticleModule, never>;
     static ɵmod: i0.ɵɵNgModuleDeclaration<DaffArticleModule, never, [typeof i1.CommonModule, typeof i2.DaffArticleComponent, typeof i3.DaffArticleMetaDirective], [typeof i2.DaffArticleComponent, typeof i3.DaffArticleMetaDirective]>;

package/article/src/article-theme.scss

@@ -4,14 +4,14 @@
 @use '../../scss/theming';
 
 @mixin daff-article-theme($theme) {
-	$primary: map.get($theme, primary);
-	$secondary: map.get($theme, secondary);
-	$tertiary: map.get($theme, tertiary);
-	$base: core.daff-map-deep-get($theme, 'core.base');
-	$base-contrast: core.daff-map-deep-get($theme, 'core.base-contrast');
-	$white: core.daff-map-deep-get($theme, 'core.white');
-	$black: core.daff-map-deep-get($theme, 'core.black');
-	$neutral: core.daff-map-deep-get($theme, 'core.neutral');
+	$primary: core.daff-map-get($theme, primary);
+	$secondary: core.daff-map-get($theme, secondary);
+	$tertiary: core.daff-map-get($theme, tertiary);
+	$base: core.daff-map-get($theme, 'core', 'base');
+	$base-contrast: core.daff-map-get($theme, 'core', 'base-contrast');
+	$white: core.daff-map-get($theme, 'core', 'white');
+	$black: core.daff-map-get($theme, 'core', 'black');
+	$neutral: core.daff-map-get($theme, 'core', 'neutral');
 
 	$text-color: theming.daff-illuminate($base-contrast, $neutral, 2);
 	$table-border-color: theming.daff-illuminate($base, $neutral, 2);

package/atoms/form/form-field/form-field/form-field.component.d.ts

@@ -11,7 +11,7 @@ export declare class DaffFormFieldComponent implements DoCheck, AfterContentInit
      * The tracking property used to determine if the parent form has been submitted,
      * and thus show an error message (even if the field hasn't been touched).
      *
-     * @deprecated
+     * @deprecated Deprecated in version 0.78.0. Will be removed in version 1.0.0.
      */
     formSubmitted: boolean;
     /**

package/breadcrumb/breadcrumb.module.d.ts

@@ -1,7 +1,9 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./breadcrumb/breadcrumb.component";
 import * as i2 from "./breadcrumb-item/breadcrumb-item.directive";
-/** @deprecated in favor of {@link DAFF_BREADCRUMB_COMPONENTS} */
+/**
+ * @deprecated in favor of {@link DAFF_BREADCRUMB_COMPONENTS}. Deprecated in version 0.78.0. Will be removed in version 1.0.0.
+ */
 export declare class DaffBreadcrumbModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffBreadcrumbModule, never>;
     static ɵmod: i0.ɵɵNgModuleDeclaration<DaffBreadcrumbModule, never, [typeof i1.DaffBreadcrumbComponent, typeof i2.DaffBreadcrumbItemDirective], [typeof i1.DaffBreadcrumbComponent, typeof i2.DaffBreadcrumbItemDirective]>;

package/breadcrumb/src/breadcrumb-theme.scss

@@ -3,9 +3,9 @@
 @use '../../scss/theming';
 
 @mixin daff-breadcrumb-theme($theme) {
-	$base: core.daff-map-deep-get($theme, 'core.base');
-	$base-contrast: core.daff-map-deep-get($theme, 'core.base-contrast');
-	$neutral: core.daff-map-deep-get($theme, 'core.neutral');
+	$base: core.daff-map-get($theme, 'core', 'base');
+	$base-contrast: core.daff-map-get($theme, 'core', 'base-contrast');
+	$neutral: core.daff-map-get($theme, 'core', 'neutral');
 
 	.daff-breadcrumb__item {
 		color: theming.daff-illuminate($base-contrast, $neutral, 4);

package/button/README.md

@@ -34,7 +34,7 @@ Native `<button>` or `<a>` elements are always used in order to provide an easy,
 ## Usage
 
 ### Within a standalone component
-To use button in a standalone component, import it directly into your custom component:
+To use button in a standalone component, import it directly into your custom component. Buttons can be imported individually or all together by using `DAFF_BUTTON_COMPONENTS`:
 
 ```ts
 @Component({
@@ -42,7 +42,7 @@ To use button in a standalone component, import it directly into your custom com
   templateUrl: './custom-component.component.html',
   standalone: true,
   imports: [
-    DAFF_BUTTON_COMPONENTS,
+    DaffButtonComponent,
   ],
 })
 export class CustomComponent {}
@@ -89,7 +89,7 @@ Supported colors: `primary | secondary | tertiary | black | white | theme | them
 ## Status Indicators
 Buttons with status indicators can be used to distinguish what type of action it performs and its importance compared to other buttons in the same context.
 
-Supported statuses: `warn | danger | success`
+Supported statuses: `warn | critical | success`
 
 <design-land-example-viewer-container example="statusable-button"></design-land-example-viewer-container>
 

package/button/button/basic/button.component.d.ts

@@ -0,0 +1,28 @@
+import { DaffButtonBaseDirective } from '../button-base.directive';
+import * as i0 from "@angular/core";
+/**
+ * DaffButtonComponent is a rectangular contained button with background color.
+ *
+ * ## Usage
+ * ```html
+ * <button daff-button>
+ *  <div daffPrefix></div>
+ *  Button
+ *  <div daffSuffix></div>
+ * </button>
+ *
+ * <a href="/" daff-button>
+ *  <div daffPrefix></div>
+ *  Linked button
+ *  <div daffSuffix></div>
+ * </a>
+ * ```
+ */
+export declare class DaffButtonComponent extends DaffButtonBaseDirective {
+    /**
+     * @docs-private
+     */
+    class: boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DaffButtonComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffButtonComponent, "button[daff-button],a[daff-button]", never, {}, {}, never, ["[daffPrefix]", "*", "[daffSuffix]"], true, never>;
+}

package/button/button/button-base.directive.d.ts

@@ -0,0 +1,51 @@
+import { ElementRef, Renderer2 } from '@angular/core';
+import { DaffPrefixable, DaffSuffixable } from '@daffodil/design';
+import { DaffButtonSizableDirective } from './button-sizable.directive';
+import * as i0 from "@angular/core";
+import * as i1 from "@daffodil/design";
+import * as i2 from "./button-sizable.directive";
+/**
+ * An _elementRef and an instance of renderer2 are needed for the button mixins
+ */
+declare class DaffButtonBase {
+    _elementRef: ElementRef;
+    _renderer: Renderer2;
+    constructor(_elementRef: ElementRef, _renderer: Renderer2);
+}
+declare const _daffButtonBase: (new (...args: any[]) => {
+    [x: string]: any;
+    _prefix: import("@daffodil/design").DaffPrefixDirective;
+}) & (new (...args: any[]) => {
+    [x: string]: any;
+    _suffix: import("@daffodil/design").DaffSuffixDirective;
+}) & typeof DaffButtonBase;
+export declare class DaffButtonBaseDirective extends _daffButtonBase implements DaffPrefixable, DaffSuffixable {
+    private elementRef;
+    private renderer;
+    private size;
+    constructor(elementRef: ElementRef, renderer: Renderer2, size: DaffButtonSizableDirective);
+    /**
+     * @docs-private
+     */
+    get disabledClass(): any;
+    loading: boolean;
+    /**
+     * Set the `tabindex` to 0.
+     */
+    tabindex: number;
+    _disabled: boolean;
+    /**
+     * The disabled state of the button.
+     */
+    get disabled(): any;
+    set disabled(value: any);
+    get disabledAttribute(): boolean;
+    get ariaDisabled(): boolean;
+    /**
+     * Set the `tabindex` to -1 if the button is disabled.
+     */
+    get disabledTabIndex(): number;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DaffButtonBaseDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffButtonBaseDirective, "[daffButtonBase]", never, { "loading": { "alias": "loading"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, never, never, true, [{ directive: typeof i1.DaffArticleEncapsulatedDirective; inputs: {}; outputs: {}; }, { directive: typeof i2.DaffButtonSizableDirective; inputs: { "size": "size"; }; outputs: {}; }, { directive: typeof i1.DaffStatusableDirective; inputs: { "status": "status"; }; outputs: {}; }, { directive: typeof i1.DaffColorableDirective; inputs: { "color": "color"; }; outputs: {}; }]>;
+}
+export {};

package/button/button/flat/flat.component.d.ts

@@ -0,0 +1,28 @@
+import { DaffButtonBaseDirective } from '../button-base.directive';
+import * as i0 from "@angular/core";
+/**
+ * DaffFlatButtonComponent is a rectangular contained button no background.
+ *
+ * ## Usage
+ * ```html
+ * <button daff-flat-button>
+ *  <div daffPrefix></div>
+ *  Flat Button
+ *  <div daffSuffix></div>
+ * </button>
+ *
+ * <a href="/" daff-flat-button>
+ *  <div daffPrefix></div>
+ *  Linked flat button
+ *  <div daffSuffix></div>
+ * </a>
+ * ```
+ */
+export declare class DaffFlatButtonComponent extends DaffButtonBaseDirective {
+    /**
+     * @docs-private
+     */
+    class: boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DaffFlatButtonComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffFlatButtonComponent, "button[daff-flat-button],a[daff-flat-button]", never, {}, {}, never, ["[daffPrefix]", "*", "[daffSuffix]"], true, never>;
+}

package/button/button/icon/icon.component.d.ts

@@ -0,0 +1,24 @@
+import { DaffButtonBaseDirective } from '../button-base.directive';
+import * as i0 from "@angular/core";
+/**
+ * DaffIconButtonComponent is an icon button used with icon fonts.
+ *
+ * ## Usage
+ * ```html
+ * <button daff-icon-button>
+ *  <fa-icon [icon]="faPlus"></fa-icon>
+ * </button>
+ *
+ * <a href="/" daff-icon-button>
+ *  <fa-icon [icon]="faPlus"></fa-icon>
+ * </a>
+ * ```
+ */
+export declare class DaffIconButtonComponent extends DaffButtonBaseDirective {
+    /**
+     * @docs-private
+     */
+    class: boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DaffIconButtonComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffIconButtonComponent, "button[daff-icon-button],a[daff-icon-button]", never, {}, {}, never, ["[daffPrefix]", "*", "[daffSuffix]"], true, never>;
+}

package/button/button/raised/raised.component.d.ts

@@ -0,0 +1,28 @@
+import { DaffButtonBaseDirective } from '../button-base.directive';
+import * as i0 from "@angular/core";
+/**
+ * DaffRaisedButtonComponent is a rectangular contained button with background color and elevation.
+ *
+ * ## Usage
+ * ```html
+ * <button daff-raised-button>
+ *  <div daffPrefix></div>
+ *  Raised Button
+ *  <div daffSuffix></div>
+ * </button>
+ *
+ * <a href="/" daff-raised-button>
+ *  <div daffPrefix></div>
+ *  Linked raised button
+ *  <div daffSuffix></div>
+ * </a>
+ * ```
+ */
+export declare class DaffRaisedButtonComponent extends DaffButtonBaseDirective {
+    /**
+     * @docs-private
+     */
+    class: boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DaffRaisedButtonComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffRaisedButtonComponent, "button[daff-raised-button],a[daff-raised-button]", never, {}, {}, never, ["[daffPrefix]", "*", "[daffSuffix]"], true, never>;
+}

package/button/button/stroked/stroked.component.d.ts

@@ -0,0 +1,28 @@
+import { DaffButtonBaseDirective } from '../button-base.directive';
+import * as i0 from "@angular/core";
+/**
+ * DaffStrokedButtonComponent is a rectangular outlined button with no background color.
+ *
+ * ## Usage
+ * ```html
+ * <button daff-stroked-button>
+ *  <div daffPrefix></div>
+ *  Stroked Button
+ *  <div daffSuffix></div>
+ * </button>
+ *
+ * <a href="/" daff-stroked-button>
+ *  <div daffPrefix></div>
+ *  Linked stroked button
+ *  <div daffSuffix></div>
+ * </a>
+ * ```
+ */
+export declare class DaffStrokedButtonComponent extends DaffButtonBaseDirective {
+    /**
+     * @docs-private
+     */
+    class: boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DaffStrokedButtonComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffStrokedButtonComponent, "button[daff-stroked-button],a[daff-stroked-button]", never, {}, {}, never, ["[daffPrefix]", "*", "[daffSuffix]"], true, never>;
+}

package/button/button/underline/underline.component.d.ts

@@ -0,0 +1,28 @@
+import { DaffButtonBaseDirective } from '../button-base.directive';
+import * as i0 from "@angular/core";
+/**
+ * DaffUnderlineButtonComponent is a borderless button with a custom underline style.
+ *
+ * ## Usage
+ * ```html
+ * <button daff-underline-button>
+ *  <div daffPrefix></div>
+ *  Underline Button
+ *  <div daffSuffix></div>
+ * </button>
+ *
+ * <a href="/" daff-underline-button>
+ *  <div daffPrefix></div>
+ *  Linked underline button
+ *  <div daffSuffix></div>
+ * </a>
+ * ```
+ */
+export declare class DaffUnderlineButtonComponent extends DaffButtonBaseDirective {
+    /**
+     * @docs-private
+     */
+    class: boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DaffUnderlineButtonComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffUnderlineButtonComponent, "button[daff-underline-button],a[daff-underline-button]", never, {}, {}, never, ["[daffPrefix]", "*", "[daffSuffix]"], true, never>;
+}

package/button/button.d.ts

@@ -1,3 +1,8 @@
 import { DaffPrefixSuffixModule } from '@daffodil/design';
-import { DaffButtonComponent } from './button/button.component';
-export declare const DAFF_BUTTON_COMPONENTS: readonly [typeof DaffButtonComponent, typeof DaffPrefixSuffixModule];
+import { DaffButtonComponent } from './button/basic/button.component';
+import { DaffFlatButtonComponent } from './button/flat/flat.component';
+import { DaffIconButtonComponent } from './button/icon/icon.component';
+import { DaffRaisedButtonComponent } from './button/raised/raised.component';
+import { DaffStrokedButtonComponent } from './button/stroked/stroked.component';
+import { DaffUnderlineButtonComponent } from './button/underline/underline.component';
+export declare const DAFF_BUTTON_COMPONENTS: readonly [typeof DaffButtonComponent, typeof DaffPrefixSuffixModule, typeof DaffFlatButtonComponent, typeof DaffIconButtonComponent, typeof DaffRaisedButtonComponent, typeof DaffStrokedButtonComponent, typeof DaffUnderlineButtonComponent];

package/button/button.module.d.ts

@@ -1,10 +1,17 @@
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/common";
-import * as i2 from "./button/button.component";
-import * as i3 from "@daffodil/design";
-/** @deprecated in favor of {@link DAFF_BUTTON_COMPONENTS} */
+import * as i2 from "./button/basic/button.component";
+import * as i3 from "./button/flat/flat.component";
+import * as i4 from "./button/icon/icon.component";
+import * as i5 from "./button/raised/raised.component";
+import * as i6 from "./button/stroked/stroked.component";
+import * as i7 from "./button/underline/underline.component";
+import * as i8 from "@daffodil/design";
+/**
+ * @deprecated in favor of {@link DAFF_BUTTON_COMPONENTS}. Deprecated in version 0.78.0. Will be removed in version 1.0.0.
+ */
 export declare class DaffButtonModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffButtonModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DaffButtonModule, never, [typeof i1.CommonModule, typeof i2.DaffButtonComponent], [typeof i2.DaffButtonComponent, typeof i3.DaffPrefixSuffixModule]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DaffButtonModule, never, [typeof i1.CommonModule, typeof i2.DaffButtonComponent, typeof i3.DaffFlatButtonComponent, typeof i4.DaffIconButtonComponent, typeof i5.DaffRaisedButtonComponent, typeof i6.DaffStrokedButtonComponent, typeof i7.DaffUnderlineButtonComponent], [typeof i2.DaffButtonComponent, typeof i3.DaffFlatButtonComponent, typeof i4.DaffIconButtonComponent, typeof i5.DaffRaisedButtonComponent, typeof i6.DaffStrokedButtonComponent, typeof i7.DaffUnderlineButtonComponent, typeof i8.DaffPrefixSuffixModule]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<DaffButtonModule>;
 }

package/button/public_api.d.ts

@@ -1,4 +1,9 @@
 export { DaffButtonModule } from './button.module';
 export { DAFF_BUTTON_COMPONENTS } from './button';
-export { DaffButtonComponent } from './button/button.component';
+export { DaffButtonComponent } from './button/basic/button.component';
 export { DaffButtonSizableDirective } from './button/button-sizable.directive';
+export { DaffFlatButtonComponent } from './button/flat/flat.component';
+export { DaffRaisedButtonComponent } from './button/raised/raised.component';
+export { DaffStrokedButtonComponent } from './button/stroked/stroked.component';
+export { DaffUnderlineButtonComponent } from './button/underline/underline.component';
+export { DaffIconButtonComponent } from './button/icon/icon.component';

package/button/src/button/basic/button-theme.scss

@@ -0,0 +1,145 @@
+@use 'sass:map';
+@use '../../../../scss/theming';
+@use '../../../../scss/core';
+
+@mixin daff-button-theme-variant(
+	$base-color,
+	$hover-color,
+	$active-color: $hover-color
+) {
+	background-color: $base-color;
+	color: theming.daff-text-contrast($base-color);
+
+	&::after {
+		background: $hover-color;
+	}
+
+	&:hover {
+		color: theming.daff-text-contrast($hover-color);
+	}
+
+	&:active {
+		color: theming.daff-text-contrast($active-color);
+
+		&::after {
+			background: $active-color;
+		}
+	}
+}
+
+@mixin daff-button-theme($theme) {
+	$primary: core.daff-map-get($theme, primary);
+	$secondary: core.daff-map-get($theme, secondary);
+	$tertiary: core.daff-map-get($theme, tertiary);
+	$info: core.daff-map-get($theme, informational);
+	$warn: core.daff-map-get($theme, warn);
+	$critical: core.daff-map-get($theme, critical);
+	$success: core.daff-map-get($theme, success);
+	$base: core.daff-map-get($theme, 'core', 'base');
+	$base-contrast: core.daff-map-get($theme, 'core', 'base-contrast');
+	$white: core.daff-map-get($theme, 'core', 'white');
+	$black: core.daff-map-get($theme, 'core', 'black');
+	$neutral: core.daff-map-get($theme, 'core', 'neutral');
+
+	.daff-button {
+		@include daff-button-theme-variant(
+			theming.daff-illuminate($base, $neutral, 2),
+			theming.daff-illuminate($base, $neutral, 3),
+			theming.daff-illuminate($base, $neutral, 4)
+		);
+
+		&.daff-primary {
+			@include daff-button-theme-variant(
+				theming.daff-color($primary),
+				theming.daff-color($primary, 70),
+				theming.daff-color($primary, 80)
+			);
+		}
+
+		&.daff-secondary {
+			@include daff-button-theme-variant(
+				theming.daff-color($secondary),
+				theming.daff-color($secondary, 70),
+				theming.daff-color($secondary, 80)
+			);
+		}
+
+		&.daff-tertiary {
+			@include daff-button-theme-variant(
+				theming.daff-color($tertiary),
+				theming.daff-color($tertiary, 70),
+				theming.daff-color($tertiary, 80)
+			);
+		}
+
+		&.daff-black {
+			@include daff-button-theme-variant(
+				$black,
+				theming.daff-color($neutral, 90),
+				theming.daff-color($neutral, 80)
+			);
+		}
+
+		&.daff-white {
+			@include daff-button-theme-variant(
+				$white,
+				theming.daff-color($neutral, 20),
+				theming.daff-color($neutral, 30)
+			);
+		}
+
+		&.daff-theme {
+			@include daff-button-theme-variant(
+				$base,
+				theming.daff-illuminate($base, $neutral, 2),
+				theming.daff-illuminate($base, $neutral, 3)
+			);
+		}
+
+		&.daff-theme-contrast {
+			@include daff-button-theme-variant(
+				$base-contrast,
+				theming.daff-illuminate($base-contrast, $neutral, 2),
+				theming.daff-illuminate($base-contrast, $neutral, 3)
+			);
+		}
+
+		&[disabled],
+		&.disabled {
+			@include daff-button-theme-variant(
+				theming.daff-illuminate($base, $neutral, 3),
+				theming.daff-illuminate($base, $neutral, 3),
+				theming.daff-illuminate($base, $neutral, 3)
+			);
+			color: theming.daff-illuminate($base, $neutral, 5);
+
+			&:hover {
+				color: theming.daff-illuminate($base, $neutral, 5);
+			}
+		}
+
+		&.daff-warn {
+			@include daff-button-theme-variant(
+				theming.daff-color($warn),
+				theming.daff-color($warn, 70),
+				theming.daff-color($warn, 80)
+			);
+		}
+
+		&.daff-success {
+			@include daff-button-theme-variant(
+				theming.daff-color($success),
+				theming.daff-color($success, 70),
+				theming.daff-color($success, 80)
+			);
+		}
+
+		&.daff-critical {
+			@include daff-button-theme-variant(
+				theming.daff-color($critical),
+				theming.daff-color($critical, 70),
+				theming.daff-color($critical, 80)
+			);
+		}
+	}
+}