@daffodil/design 0.79.0 → 0.81.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 in version 0.78.0. Will be removed in version 0.81.0.
+     * @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/button/basic/button.component.d.ts

@@ -3,7 +3,7 @@ import * as i0 from "@angular/core";
 /**
  * DaffButtonComponent is a rectangular contained button with background color.
  *
- * ## Usage
+ * @example Basic button
  * ```html
  * <button daff-button>
  *  <div daffPrefix></div>

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

@@ -3,7 +3,7 @@ import * as i0 from "@angular/core";
 /**
  * DaffFlatButtonComponent is a rectangular contained button no background.
  *
- * ## Usage
+ * @example Flat button
  * ```html
  * <button daff-flat-button>
  *  <div daffPrefix></div>

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

@@ -3,7 +3,7 @@ import * as i0 from "@angular/core";
 /**
  * DaffIconButtonComponent is an icon button used with icon fonts.
  *
- * ## Usage
+ * @example Icon button
  * ```html
  * <button daff-icon-button>
  *  <fa-icon [icon]="faPlus"></fa-icon>

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

@@ -3,7 +3,7 @@ import * as i0 from "@angular/core";
 /**
  * DaffRaisedButtonComponent is a rectangular contained button with background color and elevation.
  *
- * ## Usage
+ * @example Raised button
  * ```html
  * <button daff-raised-button>
  *  <div daffPrefix></div>

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

@@ -3,7 +3,7 @@ import * as i0 from "@angular/core";
 /**
  * DaffStrokedButtonComponent is a rectangular outlined button with no background color.
  *
- * ## Usage
+ * @example Stroked button
  * ```html
  * <button daff-stroked-button>
  *  <div daffPrefix></div>

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

@@ -3,7 +3,7 @@ import * as i0 from "@angular/core";
 /**
  * DaffUnderlineButtonComponent is a borderless button with a custom underline style.
  *
- * ## Usage
+ * @example Underline button
  * ```html
  * <button daff-underline-button>
  *  <div daffPrefix></div>

package/button/button.module.d.ts

@@ -7,7 +7,9 @@ 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 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 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]>;

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

@@ -10,7 +10,7 @@
 	background-color: $base-color;
 	color: theming.daff-text-contrast($base-color);
 
-	&:after {
+	&::after {
 		background: $hover-color;
 	}
 
@@ -21,25 +21,25 @@
 	&:active {
 		color: theming.daff-text-contrast($active-color);
 
-		&:after {
+		&::after {
 			background: $active-color;
 		}
 	}
 }
 
 @mixin daff-button-theme($theme) {
-	$primary: map.get($theme, primary);
-	$secondary: map.get($theme, secondary);
-	$tertiary: map.get($theme, tertiary);
-	$info: map.get($theme, info);
-	$warn: map.get($theme, warn);
-	$critical: map.get($theme, critical);
-	$success: map.get($theme, success);
-	$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);
+	$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(

package/button/src/button/button-base.scss

@@ -35,7 +35,7 @@
 }
 
 @mixin daff-button-background($border-radius) {
-	&:after {
+	&::after {
 		content: '';
 		border-radius: $border-radius;
 		position: absolute;
@@ -47,7 +47,7 @@
 
 	&:hover,
 	&:active {
-		&:after {
+		&::after {
 			opacity: 1;
 		}
 	}
@@ -76,4 +76,4 @@
 		height: 3.5rem;
 		padding: 0 1.5rem;
 	}
-}
+}

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

@@ -2,13 +2,10 @@
 @use '../../../../scss/theming';
 @use '../../../../scss/core';
 
-@mixin daff-flat-button-theme-variant(
-	$base-color,
-	$active-color
-) {
+@mixin daff-flat-button-theme-variant($base-color, $active-color) {
 	color: $base-color;
 
-	&:after {
+	&::after {
 		background-color: $base-color;
 	}
 
@@ -19,42 +16,44 @@
 	&:active {
 		color: theming.daff-text-contrast($active-color);
 
-		&:after {
+		&::after {
 			background-color: $active-color;
 		}
 	}
 }
 
 @mixin daff-flat-button-theme($theme) {
-	$primary: map.get($theme, primary);
-	$secondary: map.get($theme, secondary);
-	$tertiary: map.get($theme, tertiary);
-	$info: map.get($theme, info);
-	$warn: map.get($theme, warn);
-	$critical: map.get($theme, critical);
-	$success: map.get($theme, success);
-	$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);
+	$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-flat-button {
 		color: currentColor;
 
-		&:after {
+		&::after {
 			background-color: theming.daff-illuminate($base, $neutral, 2);
 		}
 
 		&:active {
-			&:after {
+			&::after {
 				background-color: theming.daff-illuminate($base, $neutral, 3);
 			}
 		}
 
 		&:hover,
 		&:active {
-			color: theming.daff-text-contrast(theming.daff-illuminate($base, $neutral, 2));
+			color: theming.daff-text-contrast(
+				theming.daff-illuminate($base, $neutral, 2)
+			);
 		}
 
 		&.daff-primary {
@@ -113,7 +112,7 @@
 			&:hover,
 			&:focus,
 			&:active {
-				&:after {
+				&::after {
 					background: transparent;
 				}
 			}

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

@@ -13,8 +13,7 @@
 		color: $hover-color;
 		@if $base-color == currentColor {
 			opacity: 0.8;
-		}
-		@else {
+		} @else {
 			opacity: 1;
 		}
 	}
@@ -25,18 +24,18 @@
 }
 
 @mixin daff-icon-button-theme($theme) {
-	$primary: map.get($theme, primary);
-	$secondary: map.get($theme, secondary);
-	$tertiary: map.get($theme, tertiary);
-	$info: map.get($theme, info);
-	$warn: map.get($theme, warn);
-	$critical: map.get($theme, critical);
-	$success: map.get($theme, success);
-	$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);
+	$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-icon-button {
 		@include daff-icon-button-theme-variant(

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

@@ -2,30 +2,29 @@
 @use '../../../../scss/theming';
 @use '../../../../scss/core';
 
-@mixin daff-raised-button-theme-variant(
-	$base-color,
-) {
-	@if theming.daff-contrast-ratio($base-color, theming.daff-text-contrast($base-color)) < 4.5 {
+@mixin daff-raised-button-theme-variant($base-color) {
+	@if theming.daff-contrast-ratio(
+			$base-color,
+			theming.daff-text-contrast($base-color)
+		) < 4.5 {
 		@error 'Button Initial State: ' + map.get(a11y.$wcag-aa-errors, 'text-contrast');
 	}
 
-	@if theming.daff-contrast-ratio($base-color, theming.daff-text-contrast($base-color)) < 4.5 {
-		@error 'Button Hover State: '+ map.get(a11y.$wcag-aa-errors, 'text-contrast');
+	@if theming.daff-contrast-ratio(
+			$base-color,
+			theming.daff-text-contrast($base-color)
+		) < 4.5 {
+		@error 'Button Hover State: ' + map.get(a11y.$wcag-aa-errors, 'text-contrast');
 	}
 
 	$black: theming.daff-color(theming.$daff-neutral, 110);
-
 	background-color: $base-color;
 	border: 1px solid $base-color;
-	box-shadow:
-		0 3px 5px rgba($black, 0.12),
-		0 1px 3px rgba($black, 0.08);
+	box-shadow: 0 3px 5px rgba($black, 0.12), 0 1px 3px rgba($black, 0.08);
 	color: theming.daff-text-contrast($base-color);
 
-	&:after {
-		box-shadow:
-			0 6px 12px rgba($black, 0.08),
-			0 4px 6px rgba($black, 0.04);
+	&::after {
+		box-shadow: 0 6px 12px rgba($black, 0.08), 0 4px 6px rgba($black, 0.04);
 	}
 
 	&:hover {
@@ -35,18 +34,18 @@
 }
 
 @mixin daff-raised-button-theme($theme) {
-	$primary: map.get($theme, primary);
-	$secondary: map.get($theme, secondary);
-	$tertiary: map.get($theme, tertiary);
-	$info: map.get($theme, info);
-	$warn: map.get($theme, warn);
-	$critical: map.get($theme, critical);
-	$success: map.get($theme, success);
-	$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);
+	$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-raised-button {
 		@include daff-raised-button-theme-variant(
@@ -54,21 +53,15 @@
 		);
 
 		&.daff-primary {
-			@include daff-raised-button-theme-variant(
-				theming.daff-color($primary)
-			);
+			@include daff-raised-button-theme-variant(theming.daff-color($primary));
 		}
 
 		&.daff-secondary {
-			@include daff-raised-button-theme-variant(
-				theming.daff-color($secondary)
-			);
+			@include daff-raised-button-theme-variant(theming.daff-color($secondary));
 		}
 
 		&.daff-tertiary {
-			@include daff-raised-button-theme-variant(
-				theming.daff-color($tertiary)
-			);
+			@include daff-raised-button-theme-variant(theming.daff-color($tertiary));
 		}
 
 		&.daff-black {
@@ -94,27 +87,21 @@
 			);
 			color: theming.daff-illuminate($base, $neutral, 5);
 
-			&:after {
+			&::after {
 				box-shadow: none;
 			}
 		}
 
 		&.daff-warn {
-			@include daff-raised-button-theme-variant(
-				theming.daff-color($warn)
-			);
+			@include daff-raised-button-theme-variant(theming.daff-color($warn));
 		}
 
 		&.daff-critical {
-			@include daff-raised-button-theme-variant(
-				theming.daff-color($critical)
-			);
+			@include daff-raised-button-theme-variant(theming.daff-color($critical));
 		}
 
 		&.daff-success {
-			@include daff-raised-button-theme-variant(
-				theming.daff-color($success)
-			);
+			@include daff-raised-button-theme-variant(theming.daff-color($success));
 		}
 	}
 }

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

@@ -2,15 +2,12 @@
 @use '../../../../scss/theming';
 @use '../../../../scss/core';
 
-@mixin daff-stroked-button-theme-variant(
-	$base-color,
-	$active-color
-) {
+@mixin daff-stroked-button-theme-variant($base-color, $active-color) {
 	border: 1px solid $base-color;
 	color: $base-color;
 	background-color: transparent;
 
-	&:after {
+	&::after {
 		background-color: $base-color;
 	}
 
@@ -22,32 +19,32 @@
 		border: 1px solid $active-color;
 		color: theming.daff-text-contrast($active-color);
 
-		&:after {
+		&::after {
 			background-color: $active-color;
 		}
 	}
 }
 
 @mixin daff-stroked-button-theme($theme) {
-	$primary: map.get($theme, primary);
-	$secondary: map.get($theme, secondary);
-	$tertiary: map.get($theme, tertiary);
-	$info: map.get($theme, info);
-	$warn: map.get($theme, warn);
-	$critical: map.get($theme, critical);
-	$success: map.get($theme, success);
-	$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);
+	$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-stroked-button {
 		background: transparent;
 		border: 1px solid theming.daff-illuminate($base, $neutral, 5);
 		color: currentColor;
 
-		&:after {
+		&::after {
 			background: theming.daff-illuminate($base, $neutral, 2);
 		}
 
@@ -64,7 +61,7 @@
 				theming.daff-illuminate($base, $neutral, 3)
 			);
 
-			&:after {
+			&::after {
 				background: theming.daff-illuminate($base, $neutral, 3);
 			}
 		}
@@ -127,7 +124,7 @@
 			&:hover {
 				color: theming.daff-illuminate($base, $neutral, 5);
 
-				&:after {
+				&::after {
 					background-color: transparent;
 					opacity: 0;
 				}