@daffodil/design 0.81.1 → 0.83.0

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

@@ -0,0 +1,30 @@
+@use 'sass:map';
+@use '../../../../scss/core';
+@use '../../../../scss/theming';
+
+@mixin daff-raised-card-theme($theme) {
+	$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');
+
+	.daff-raised-card {
+		box-shadow: 0 6px 12px -4px rgba($black, 0.12),
+			0 4px 8px -2px rgba($black, 0.06);
+	}
+
+	a {
+		&.daff-raised-card {
+			.daff-card__wrapper {
+				&::after {
+					box-shadow: 0 16px 32px -4px rgba($black, 0.12),
+						0 8px 12px -2px rgba($black, 0.06);
+				}
+			}
+		}
+	}
+}

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

@@ -0,0 +1,135 @@
+@use 'sass:map';
+@use '../../../../scss/core';
+@use '../../../../scss/theming';
+
+@mixin stroked-card-theme-variant($color) {
+	border: 1px solid $color;
+	color: $color;
+}
+
+@mixin linkable-stroked-card-theme-variant($hover-color, $opacity: 0.08) {
+	.daff-card__wrapper {
+		&::after {
+			background: rgba($hover-color, $opacity);
+		}
+	}
+
+	&:hover,
+	&:focus {
+		.daff-card__wrapper {
+			&::after {
+				opacity: 1;
+			}
+		}
+	}
+}
+
+@mixin daff-stroked-card-theme($theme) {
+	$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');
+	$type: core.daff-map-get($theme, 'core', 'type');
+
+	.daff-stroked-card {
+		&.daff-primary {
+			@include stroked-card-theme-variant(theming.daff-color($primary));
+		}
+
+		&.daff-secondary {
+			@include stroked-card-theme-variant(theming.daff-color($secondary));
+		}
+
+		&.daff-tertiary {
+			@include stroked-card-theme-variant(theming.daff-color($tertiary));
+		}
+
+		&.daff-dark {
+			@include stroked-card-theme-variant(theming.daff-color($neutral, 90));
+		}
+
+		&.daff-light {
+			@include stroked-card-theme-variant(theming.daff-color($neutral, 20));
+		}
+
+		@include theming.light($type) {
+			@include stroked-card-theme-variant(theming.daff-color($neutral, 20));
+			color: $base-contrast;
+
+			&.daff-theme {
+				@include stroked-card-theme-variant(theming.daff-color($neutral, 20));
+				color: $base-contrast;
+			}
+
+			&.daff-theme-contrast {
+				@include stroked-card-theme-variant(theming.daff-color($neutral, 90));
+			}
+		}
+
+		@include theming.dark($type) {
+			@include stroked-card-theme-variant(theming.daff-color($neutral, 90));
+			color: $base-contrast;
+
+			&.daff-theme {
+				@include stroked-card-theme-variant(theming.daff-color($neutral, 90));
+				color: $base-contrast;
+			}
+
+			&.daff-theme-contrast {
+				@include stroked-card-theme-variant(theming.daff-color($neutral, 20));
+			}
+		}
+	}
+
+	a {
+		&.daff-stroked-card {
+			@include theming.light($type) {
+				@include linkable-stroked-card-theme-variant(
+					theming.daff-color($neutral, 20),
+					0.2
+				);
+			}
+
+			@include theming.dark($type) {
+				@include linkable-stroked-card-theme-variant(
+					theming.daff-color($neutral, 90),
+					0.2
+				);
+			}
+
+			&.daff-primary {
+				@include linkable-stroked-card-theme-variant(
+					theming.daff-color($primary)
+				);
+			}
+
+			&.daff-secondary {
+				@include linkable-stroked-card-theme-variant(
+					theming.daff-color($secondary)
+				);
+			}
+
+			&.daff-tertiary {
+				@include linkable-stroked-card-theme-variant(
+					theming.daff-color($tertiary)
+				);
+			}
+
+			&.daff-dark {
+				@include linkable-stroked-card-theme-variant(
+					theming.daff-color($neutral, 90)
+				);
+			}
+
+			&.daff-light {
+				@include linkable-stroked-card-theme-variant(
+					theming.daff-color($neutral, 20)
+				);
+			}
+		}
+	}
+}

package/card/src/card-base-theme.scss

@@ -0,0 +1,197 @@
+@use 'sass:map';
+@use '../../scss/core';
+@use '../../scss/theming';
+
+@mixin daff-basic-card-theme-variant($color) {
+	background: $color;
+	color: theming.daff-text-contrast($color);
+}
+
+@mixin daff-linkable-card-theme-variant($hover-color) {
+	.daff-card__wrapper {
+		&::after {
+			background: $hover-color;
+		}
+	}
+
+	&:hover,
+	&:focus {
+		color: theming.daff-text-contrast($hover-color);
+
+		.daff-card__wrapper {
+			&::after {
+				opacity: 1;
+			}
+		}
+	}
+}
+
+@mixin daff-card-base-theme($theme) {
+	$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');
+	$type: core.daff-map-get($theme, 'core', 'type');
+
+	.daff-card,
+	.daff-raised-card {
+		@include theming.light($type) {
+			@include daff-basic-card-theme-variant(theming.daff-color($neutral, 10));
+
+			&.daff-primary {
+				@include daff-basic-card-theme-variant(theming.daff-color($primary));
+			}
+
+			&.daff-secondary {
+				@include daff-basic-card-theme-variant(theming.daff-color($secondary));
+			}
+
+			&.daff-tertiary {
+				@include daff-basic-card-theme-variant(theming.daff-color($tertiary));
+			}
+		}
+
+		@include theming.dark($type) {
+			@include daff-basic-card-theme-variant(theming.daff-color($neutral, 90));
+
+			&.daff-primary {
+				@include daff-basic-card-theme-variant(
+					theming.daff-color($primary, 60)
+				);
+			}
+
+			&.daff-secondary {
+				@include daff-basic-card-theme-variant(
+					theming.daff-color($secondary, 60)
+				);
+			}
+
+			&.daff-tertiary {
+				@include daff-basic-card-theme-variant(
+					theming.daff-color($tertiary, 60)
+				);
+			}
+		}
+
+		&.daff-theme {
+			@include daff-basic-card-theme-variant($base);
+		}
+
+		&.daff-theme-contrast {
+			@include daff-basic-card-theme-variant($base-contrast);
+		}
+
+		&.daff-dark {
+			@include daff-basic-card-theme-variant(theming.daff-color($neutral, 90));
+		}
+
+		&.daff-light {
+			@include daff-basic-card-theme-variant(theming.daff-color($neutral, 10));
+		}
+	}
+
+	a {
+		&.daff-card,
+		&.daff-raised-card {
+			@include theming.light($type) {
+				@include daff-linkable-card-theme-variant(
+					theming.daff-color($neutral, 20)
+				);
+
+				&.daff-primary {
+					@include daff-linkable-card-theme-variant(
+						theming.daff-color($primary, 70)
+					);
+				}
+
+				&.daff-secondary {
+					@include daff-linkable-card-theme-variant(
+						theming.daff-color($secondary, 70)
+					);
+				}
+
+				&.daff-tertiary {
+					@include daff-linkable-card-theme-variant(
+						theming.daff-color($tertiary, 70)
+					);
+				}
+
+				&.daff-theme {
+					@include daff-linkable-card-theme-variant(
+						theming.daff-color($neutral, 10)
+					);
+				}
+
+				&.daff-theme-contrast {
+					@include daff-linkable-card-theme-variant(
+						theming.daff-color($neutral, 100)
+					);
+				}
+
+				&.daff-dark {
+					@include daff-linkable-card-theme-variant(
+						theming.daff-color($neutral, 90)
+					);
+				}
+
+				&.daff-light {
+					@include daff-linkable-card-theme-variant(
+						theming.daff-color($neutral, 10)
+					);
+				}
+			}
+
+			@include theming.dark($type) {
+				@include daff-linkable-card-theme-variant(
+					theming.daff-color($neutral, 80)
+				);
+
+				&.daff-primary {
+					@include daff-linkable-card-theme-variant(
+						theming.daff-color($primary, 70)
+					);
+				}
+
+				&.daff-secondary {
+					@include daff-linkable-card-theme-variant(
+						theming.daff-color($secondary, 70)
+					);
+				}
+
+				&.daff-tertiary {
+					@include daff-linkable-card-theme-variant(
+						theming.daff-color($tertiary, 70)
+					);
+				}
+
+				&.daff-theme {
+					@include daff-linkable-card-theme-variant(
+						theming.daff-color($neutral, 90)
+					);
+				}
+
+				&.daff-theme-contrast {
+					@include daff-linkable-card-theme-variant(
+						theming.daff-color($neutral, 10)
+					);
+				}
+
+				&.daff-dark {
+					@include daff-linkable-card-theme-variant(
+						theming.daff-color($neutral, 100)
+					);
+				}
+
+				&.daff-light {
+					@include daff-linkable-card-theme-variant(
+						theming.daff-color($neutral, 10)
+					);
+				}
+			}
+		}
+	}
+}

package/card/src/card-base.scss

@@ -0,0 +1,134 @@
+@use '../../scss/typography' as t;
+@use '../../scss/layout';
+
+$card-border-radius: 8px;
+$card-inner-border-radius: calc(#{$card-border-radius} - 1px);
+
+@mixin daff-card-base {
+	display: flex;
+	border-radius: $card-border-radius;
+	position: relative;
+
+	.daff-card__image {
+		display: inline-block;
+		width: 100%;
+	}
+
+	.daff-card__wrapper {
+		position: relative;
+		height: 100%;
+
+		&::after {
+			content: '';
+			position: absolute;
+			left: 0;
+			top: 0;
+			height: 100%;
+			border-radius: $card-border-radius;
+			opacity: 0;
+			width: 100%;
+			transition: opacity 300ms;
+			z-index: 1;
+		}
+	}
+
+	&.vertical {
+		flex-direction: column;
+
+		.daff-card__image {
+			border-radius: $card-inner-border-radius $card-inner-border-radius 0 0;
+
+			img {
+				border-radius: $card-inner-border-radius $card-inner-border-radius 0 0;
+			}
+		}
+	}
+
+	&.horizontal {
+		flex-wrap: wrap;
+
+		@include layout.breakpoint(mobile) {
+			flex-direction: row;
+			flex-wrap: nowrap;
+		}
+
+		.daff-card__image {
+			border-radius: $card-inner-border-radius 0 0 $card-inner-border-radius;
+
+			img {
+				border-radius: $card-inner-border-radius 0 0 $card-inner-border-radius;
+				object-fit: cover;
+				object-position: center center;
+				height: 100% !important; /* stylelint-disable-line declaration-no-important */
+				width: 100%;
+			}
+		}
+	}
+
+	.daff-card__body {
+		padding: 1.5rem;
+		position: relative;
+		z-index: 2;
+	}
+
+	.daff-card__icon {
+		display: block;
+		margin: 0 0 0.5rem;
+	}
+
+	.daff-card__tagline {
+		@include t.subheading;
+		padding: 0;
+		margin: 0 0 0.25rem;
+	}
+
+	.daff-card__title {
+		font-size: 1.25rem;
+		font-weight: 600;
+		line-height: 1.5rem;
+
+		+ .daff-card__content {
+			margin: 1rem 0 0;
+		}
+	}
+
+	.daff-card__content {
+		p {
+			&:first-of-type {
+				margin-top: 0;
+			}
+
+			&:last-of-type {
+				margin-bottom: 0;
+			}
+		}
+	}
+
+	.daff-card__actions {
+		padding: 0 1.5rem 1.5rem;
+		position: relative;
+		z-index: 2;
+	}
+}
+
+@mixin daff-linked-card-base {
+	text-decoration: none;
+
+	.daff-card__image {
+		+ .daff-card__wrapper {
+			&::after {
+				border-radius: 0 0 $card-border-radius $card-border-radius;
+			}
+		}
+	}
+
+	&.horizontal {
+		.daff-card__image {
+			+ .daff-card__wrapper {
+				&::after {
+					border-radius: 0 $card-border-radius $card-border-radius 0;
+				}
+			}
+		}
+	}
+}

package/container/README.md

@@ -23,13 +23,15 @@ Supported sizes: `xs | sm | md | lg | xl`
 ## Usage
 
 ### Within a standalone component
-To use container in a standalone component, import it directly into your custom component:
+To use container in a standalone component, import `DAFF_CONTAINER_COMPONENTS` directly into your custom component:
 
 ```ts
+
+import { DAFF_CONTAINER_COMPONENTS } from '@daffodil/design/container';
+
 @Component({
   selector: 'custom-component',
   templateUrl: './custom-component.component.html',
-  standalone: true,
   imports: [
     DAFF_CONTAINER_COMPONENTS,
   ],
@@ -42,8 +44,8 @@ To use container in a module, import `DaffCalloutModule` into your custom module
 
 ```ts
 import { NgModule } from '@angular/core';
-
 import { DaffCalloutModule } from '@daffodil/design/container';
+import { CustomComponent } from './custom.component';
 
 @NgModule({
 	declarations: [

package/container/container.d.ts

@@ -1,2 +1,5 @@
 import { DaffContainerComponent } from './container/container.component';
+/**
+ * @docs-private
+ */
 export declare const DAFF_CONTAINER_COMPONENTS: readonly [typeof DaffContainerComponent];

package/core/colorable/colorable.d.ts

@@ -1,17 +1,13 @@
-/**
- * In order to be colorable, our class must implement this property
- */
 export interface DaffColorable {
     color: DaffPalette;
 }
 /**
- * These are the valid options that can be passed to a DaffColorable component
+ * These are the valid options that can be passed to a DaffColorable component.
  */
-export type DaffPalette = 'primary' | 'secondary' | 'tertiary' | 'black' | 'white' | 'theme' | 'theme-contrast' | undefined;
+export type DaffPalette = 'primary' | 'secondary' | 'tertiary' | 'light' | 'dark' | 'theme' | 'theme-contrast' | 'black' | 'white' | undefined;
 /**
  * Enumerates the available color palette options for a component.
- * These values can be used to apply specific color styles to components within the
- * application.
+ * These values can be used to apply specific color styles to components within the application.
  */
 export declare enum DaffPaletteEnum {
     /**
@@ -27,19 +23,29 @@ export declare enum DaffPaletteEnum {
      */
     Tertiary = "tertiary",
     /**
-     * Black. It's dark.
+     * A light color that does not change based on the defined theme.
      */
-    Black = "black",
+    Light = "light",
     /**
-     * White. It's bright.
+     * A dark color that does not change based on the defined theme.
      */
-    White = "white",
+    Dark = "dark",
     /**
-     * The default color for your theme.
+     * A color that matches the defined theme.
      */
     Theme = "theme",
     /**
-     * A color that constrats against your defined theme.
+     * A color that contrasts against the defined theme.
+     */
+    ThemeContrast = "theme-contrast",
+    /**
+     * @deprecated Deprecated in version 0.82.0. Will be removed in version 0.85.0.
+     * Black. It's dark.
+     */
+    Black = "black",
+    /**
+     * @deprecated Deprecated in version 0.82.0. Will be removed in version 0.85.0.
+     * White. It's bright.
      */
-    ThemeContrast = "theme-contrast"
+    White = "white"
 }

package/core/colorable/colorable.directive.d.ts

@@ -6,18 +6,20 @@ import * as i0 from "@angular/core";
  * styles by setting CSS classes based on the specified color. This directive is useful
  * for applying different color palettes to a component in an Angular application.
  *
- * Supported colors: `primary | secondary | tertiary | black | white | theme | theme-contrast`
+ * Supported colors: `primary | secondary | tertiary | light | dark | theme | theme-contrast`
  *
  * | Color | Class |
  * | -------- | ----- |
  * | `primary` | `.daff-primary`|
  * | `secondary` | `.daff-secondary`|
  * | `tertiary` | `.daff-tertiary`|
- * | `black` | `.daff-black`|
- * | `white` | `.daff-white`|
+ * | `light` | `daff-light` |
+ * | `dark` | `daff-dark` |
  * | `theme` | `daff-theme`|
  * | `theme-contrast` | `.daff-theme-contrast`|
  *
+ *  `white` and `black` have been deprecated in favor of `light` and `dark`.
+ *
  * @example Implementing it as an attribute directive
  *
  * ```html
@@ -39,7 +41,6 @@ import * as i0 from "@angular/core";
  *
  * ```ts
  * @Component({
- *  standalone: true,
  *  selector: 'custom-component',
  *  template: 'custom-component.html',
  *  hostDirectives: [
@@ -72,10 +73,12 @@ export declare class DaffColorableDirective implements DaffColorable, OnChanges,
         'daff-primary': boolean;
         'daff-secondary': boolean;
         'daff-tertiary': boolean;
-        'daff-black': boolean;
-        'daff-white': boolean;
+        'daff-light': boolean;
+        'daff-dark': boolean;
         'daff-theme': boolean;
         'daff-theme-contrast': boolean;
+        'daff-black': boolean;
+        'daff-white': boolean;
     };
     /**
      * Sets the color on a component.