@daffodil/design 0.92.3 → 0.93.0

package/hero/README.md

@@ -14,14 +14,12 @@ Heroes are the first visual element users see on a page and are intended to make
 - Highlighting promotional content or key features
 - Creating an impactful landing page experience
 
-## When not to use
-Avoid heroes when:
-- Trying to make a visual highlight that's not at the top of a page (use [callout](/libs/design/callout/README.md) instead)
+**When not to use**
+- Making a visual highlight that's not at the top of a page (use [callout](/libs/design/callout/README.md) instead)
 
 ## Usage
 
-### Within a standalone component
-To use the hero components, import `DAFF_HERO_COMPONENTS` directly into your custom component:
+Import `DAFF_HERO_COMPONENTS` into your component:
 
 ```ts
 import { DAFF_HERO_COMPONENTS } from '@daffodil/design/hero';
@@ -36,52 +34,12 @@ import { DAFF_HERO_COMPONENTS } from '@daffodil/design/hero';
 export class CustomComponent {}
 ```
 
-### Within a module (deprecated)
-To use hero in a module, import `DaffHeroModule` into your custom module:
-
-```ts
-import { NgModule } from '@angular/core';
-import { DaffHeroModule } from '@daffodil/design/hero';
-import { CustomComponent } from './custom.component';
-
-@NgModule({
-	declarations: [
-    CustomComponent,
-  ],
-  exports: [
-    CustomComponent,
-  ],
-  imports: [
-    DaffHeroModule,
-  ],
-})
-export class CustomComponentModule { }
-```
-
-> This method is deprecated. It's recommended to update all custom components to standalone.
+> **Deprecation notice:**
+> 
+> `DaffHeroModule` is deprecated. Use the standalone component imports instead.
 
 ## Anatomy
-A hero consists of the following components, displayed in the order listed:
-
-### Container
-**`<daff-hero>`**: The main wrapper that holds all hero content.
-
-### Icon
-**`[daffHeroIcon]`**: Displays visual or branding element. Avoid using for interactive icons.
-
-### Tagline
-**`[daffHeroTagline]`**: Short, memorable phrase that provides quick context.
-
-### Title
-**`[daffHeroTitle]`**: The primary heading text. Applied to heading elements (`<h1>`).
-
-### Subtitle
-**`[daffHeroSubtitle]`**: Secondary descriptive text displayed beneath the title.
-
-### Body
-**`[daffHeroBody]`**: Flexible container for additional content or actions. It's unstyled except for spacing and should only be used once per hero.
-
-### Basic structure
+A hero is composed of a wrapper, icon, tagline, title, subtitle, and body, displayed in the order listed:
 
 ```html
 <daff-hero>
@@ -98,6 +56,13 @@ A hero consists of the following components, displayed in the order listed:
 </daff-hero>
 ```
 
+- **`<daff-hero>`**: The wrapper component that holds all hero content.
+- **`[daffHeroIcon]`**: Displays a visual or branding element. Avoid using for interactive or actionable icons.
+- **`[daffHeroTagline]`**: Short, memorable phrase that provides quick context.
+- **`[daffHeroTitle]`**: The primary heading text. Applied to heading elements (`<h1>`).
+- **`[daffHeroSubtitle]`**: Secondary descriptive text displayed beneath the title.
+- **`[daffHeroBody]`**: Flexible container for additional content or actions. It's unstyled except for spacing and **should only be used once per hero**.
+
 ## Features
 
 ### Colors

package/image/README.md

@@ -12,8 +12,7 @@ Image builds on Angular's [`NgOptimizedImage`](https://angular.dev/guide/image-o
 
 ## Usage
 
-### Within a standalone component
-To use image in a standalone component, import `DAFF_IMAGE_COMPONENTS` directly into your custom component:
+Import `DAFF_IMAGE_COMPONENTS` into your component:
 
 ```ts
 import { Component } from '@angular/core';
@@ -29,31 +28,9 @@ import { DAFF_IMAGE_COMPONENTS } from '@daffodil/design/image';
 export class CustomComponent {}
 ```
 
-### Within a module (deprecated)
-To use image in a module, import `DaffImageModule` into your custom module:
-
-```ts
-import { NgModule } from '@angular/core';
-import { DaffImageModule } from '@daffodil/design/image';
-import { CustomComponent } from './custom.component';
-
-@NgModule({
-  declarations: [
-    CustomComponent,
-  ],
-  exports: [
-    CustomComponent,
-  ],
-  imports: [
-    DaffImageModule,
-  ],
-})
-export class CustomComponentModule { }
-```
-
-> **Warning**
->
-> This method is deprecated. It's recommended to update all custom components to standalone.
+> **Deprecation notice:**
+> 
+> `DaffImageModule` is deprecated. Use the standalone component imports instead.
 
 ## Required attributes
 All four of the following attributes are required and will throw an error if missing:
@@ -67,12 +44,12 @@ All four of the following attributes are required and will throw an error if mis
 
 ## Features
 
-## Skeleton screen
+### Skeleton screen
 Use the `skeleton` property to display a placeholder skeleton screen that helps reduce load-time frustration.
 
 <daff-docs-example-viewer example="skeleton-image"></daff-docs-example-viewer>
 
-## Priority loading
+### Priority loading
 Use the `priority` property to mark an image as a priority for loading. Priority images are loaded eagerly and not lazy-loaded.
 
 ## Accessibility

package/input/README.md

@@ -7,9 +7,7 @@ Input has the same functionality as a native HTML input element, with additional
 <daff-docs-example-viewer example="input-with-form-field"></daff-docs-example-viewer>
 
 ## Usage
-
-### Within a standalone component
-To use input in a standalone component, import `DaffInputComponent` directly into your custom component:
+Import `DaffInputComponent` into your component:
 
 ```ts
 import { DaffInputComponent } from '@daffodil/design/input';
@@ -24,36 +22,9 @@ import { DaffInputComponent } from '@daffodil/design/input';
 export class CustomComponent {}
 ```
 
-### Within a module (deprecated)
-To use input in a module, import `DaffInputModule` into your custom module:
-
-```ts
-import { NgModule } from '@angular/core';
-import { DaffInputModule } from '@daffodil/design/input';
-import { CustomComponent } from './custom.component';
-
-@NgModule({
-  declarations: [
-    CustomComponent,
-  ],
-  exports: [
-    CustomComponent,
-  ],
-  imports: [
-    DaffInputModule,
-  ],
-})
-export class CustomComponentModule { }
-```
-
-> **Warning**
-> 
-> This method is deprecated. It's recommended to update all custom components to standalone.
-
 ## Anatomy
 Input must be used inside `<daff-form-field>` to enable proper state management and provide enhanced UI features such as hints, error messages, prefixes, and suffixes. The form field component also ensures accessibility compliance. For more details, see the [form field documentation](/libs/design/form-field/README.md).
 
-### Basic structure
 ```html
 <daff-form-field>
   <daff-form-label>First Name</daff-form-label>
@@ -61,7 +32,7 @@ Input must be used inside `<daff-form-field>` to enable proper state management
 </daff-form-field>
 ```
 
-## States
+## Features
 
 ### Disabled
 Input can be disabled in two ways: using Angular's reactive forms with `FormControl` or with the native HTML `disabled` attribute.
@@ -75,12 +46,15 @@ Input supports validation and error messages through Angular's form validation s
 
 Multiple error messages can be displayed conditionally based on the type of validation error. The form field component handles the styling and positioning of error messages.
 
-## Hints
+### Hints
 Hints provide additional context or instructions to help users complete the input field correctly. Use `<daff-hint>` within the form field to display helpful information below the input. Unlike error messages, hints are always visible and provide guidance rather than validation feedback.
 
 <daff-docs-example-viewer example="input-hint"></daff-docs-example-viewer>
 
 ## Accessibility
-When `<daff-form-label>` is used within `<daff-form-field>`, the label automatically associates with the input using the `for` and `id` attributes.
 
-If a `<daff-form-label>` is not specified, use the `<label>` element to associate text with form elements explicitly. The `for` attribute of the label must exactly match the `id` of the form control.
+### Built-in behavior
+- When `<daff-form-label>` is used within `<daff-form-field>`, the label automatically associates with the input using the `for` and `id` attributes.
+
+### Developer responsibilities
+- If a `<daff-form-label>` is not specified, use the `<label>` element to associate text with form elements explicitly. The `for` attribute of the label must exactly match the `id` of the form control.

package/list/README.md

@@ -2,21 +2,23 @@
 A list is a stylized container used to vertically group a series of related content.
 
 ## Overview
-List supports two main variants:
+Lists help organize content into a clear, scannable vertical structure. There are two variants: **default** (`daff-list`) for generic content and **navigation** (`daff-nav-list`) for groups of links.
 
-| Attribute | Description |
-| --------- | ----------- |
-| `daff-list` | A standard list used for grouping generic content. |
-| `daff-nav-list` | A navigation list intended for use with anchor elements (`<a>`). |
+<daff-docs-example-viewer example="basic-list"></daff-docs-example-viewer>
+
+## Best practices
+
+**When to use**
+- Grouping related items that share a common theme or category
+- Displaying a series of links for navigation menus
 
 ## Usage
 
-### Within a standalone component
-To use list in a standalone component, import each list type directly into your custom component.
+Import the list style(s) you need into your component:
 
 Available imports:
-- `DAFF_LIST_COMPONENTS`
-- `DAFF_NAV_LIST_COMPONENTS`
+- Default lists: `DAFF_LIST_COMPONENTS`
+- Navigation lists: `DAFF_NAV_LIST_COMPONENTS`
 
 ```ts
 import { DAFF_LIST_COMPONENTS } from '@daffodil/design/list';
@@ -31,42 +33,13 @@ import { DAFF_LIST_COMPONENTS } from '@daffodil/design/list';
 export class CustomComponent {}
 ```
 
-### Within a module (deprecated)
-To use list in a module, import `DaffListModule` into your custom module:
-
-```ts
-import { NgModule } from '@angular/core';
-import { DaffListModule } from '@daffodil/design/list';
-import { CustomComponent } from './custom.component';
-
-@NgModule({
-	declarations: [
-    CustomComponent,
-  ],
-  exports: [
-    CustomComponent,
-  ],
-  imports: [
-    DaffListModule,
-  ],
-})
-export class CustomComponentModule { }
-```
-
-> This method is deprecated. It's recommended to update all custom components to standalone.
+> **Deprecation notice:**
+> 
+> `DaffListModule` is deprecated. Use the standalone component imports instead.
 
 ## Anatomy
-A list consists of the following components:
-
-### Container
-**`<daff-list>`**: A standard list wrapper used for grouping generic content items.
+A list is composed of a container and one or more items:
 
-**`<daff-nav-list>`**: A navigation list container intended for use with anchor elements (`<a>`).
-
-### Item
-**`<daff-list-item>`**: Individual list items that contain the content for each row in the list.
-
-### Basic structure
 ```html
 <daff-list>
   <daff-list-item>Content item</daff-list-item>
@@ -75,31 +48,32 @@ A list consists of the following components:
 </daff-list>
 ```
 
-```html
-<daff-nav-list>
-  <a href="/" daff-list-item>Navigation link</a>
-  <a href="/" daff-list-item>Navigation link</a>
-  <a href="/" daff-list-item>Navigation link</a>
-</daff-nav-list>
-```
+- **`<daff-list>`** or **`<daff-nav-list>`**: The wrapper component that holds all list items.
+- **`<daff-list-item>`**: An individual item within the list. Use the `[daff-list-item]` attribute on `<a>` elements inside a `<daff-nav-list>`.
 
 ## Features
 
-### Icon support
-Use the `[daffPrefix]` element to display a leading visual icon for a list item.
+### Navigation lists
+Use `<daff-nav-list>` with anchor elements to create a list of links. This is useful for menus, sidebars, and footers.
 
-<daff-docs-example-viewer example="icon-list"></daff-docs-example-viewer>
+<daff-docs-example-viewer example="nav-list"></daff-docs-example-viewer>
 
 ### Multi-line lists
 For list items that contain multiple lines of text, use the `[daffListItemTitle]` element to identify the primary title. Additional supporting content can be added using `<div>` or `<p>` elements.
 
 <daff-docs-example-viewer example="multiline-list"></daff-docs-example-viewer>
 
+### Icon support
+Use the `[daffPrefix]` element to display a leading visual icon for a list item.
+
+<daff-docs-example-viewer example="icon-list"></daff-docs-example-viewer>
+
 ## Accessibility
-By default, list includes appropriate ARIA roles by default to support screen readers and provide an accessible experience.
 
+### Built-in behavior
 - `<daff-list>` is assigned `role="list"` to identify a list of items.
+- `<daff-nav-list>` is assigned `role="navigation"` to indicate that the list is used for navigation.
 - `<daff-list-item>` within a `<daff-list>` is assigned `role="listitem"` to identify a list item contained inside the list.
-- `<daff-nav-list>`is assigned `role="navigation"` to indicate that the list is used for navigation.
 
-> Always provide an accessible label for `<daff-nav-list>` via `aria-label` or `aria-labelledby` to describe its purpose (e.g. `"Footer links"` or `"Sidebar links"`).
+### Developer responsibilities
+- Always provide an accessible label for `<daff-nav-list>` via `aria-label` or `aria-labelledby` to describe its purpose (e.g. `"Footer links"` or `"Sidebar links"`).

package/list/src/list-theme.scss

@@ -19,21 +19,35 @@
 			}
 
 			@include light($mode) {
-				&:hover,
 				&.active {
 					&::after {
 						background-color: rgba(daff-color($neutral, 20), 0.5);
 					}
 				}
+
+				@media (hover: hover) {
+					&:hover {
+						&::after {
+							background-color: rgba(daff-color($neutral, 20), 0.5);
+						}
+					}
+				}
 			}
 
 			@include dark($mode) {
-				&:hover,
 				&.active {
 					&::after {
 						background-color: rgba(daff-color($neutral, 20), 0.08);
 					}
 				}
+
+				@media (hover: hover) {
+					&:hover {
+						&::after {
+							background-color: rgba(daff-color($neutral, 20), 0.08);
+						}
+					}
+				}
 			}
 		}
 	}

package/media-gallery/README.md

@@ -13,13 +13,12 @@ Media galleries are ideal for showcasing multiple images or other media related
 - Providing an interactive way to browse through visual content
 
 **When not to use**
-- You only have one image (use an [Image](/libs/design/image/README.md) instead)
+- You only have one image (use the [image](/libs/design/image/README.md) component instead)
 - The images are unrelated to each other
 
 ## Usage
 
-### Within a standalone component
-To use media gallery in a standalone component, import `DAFF_MEDIA_GALLERY_COMPONENTS` into your custom component:
+Import `DAFF_MEDIA_GALLERY_COMPONENTS` into your component:
 
 ```ts
 import { DAFF_MEDIA_GALLERY_COMPONENTS } from '@daffodil/design/media-gallery';
@@ -34,40 +33,13 @@ import { DAFF_MEDIA_GALLERY_COMPONENTS } from '@daffodil/design/media-gallery';
 export class CustomComponent {}
 ```
 
-### Within a module (deprecated)
-To use media gallery in a module, import `DaffMediaGalleryModule` into your custom module:
-
-```ts
-import { NgModule } from '@angular/core';
-import { DaffMediaGalleryModule } from '@daffodil/design/media-gallery';
-import { CustomComponent } from './custom.component';
-
-@NgModule({
-	declarations: [
-    CustomComponent,
-  ],
-  exports: [
-    CustomComponent,
-  ],
-  imports: [
-    DaffMediaGalleryModule,
-  ],
-})
-export class CustomComponentModule { }
-```
-
-> This method is deprecated. It's recommended to update all custom components to standalone.
+> **Deprecation notice:**
+> 
+> `DaffMediaGalleryModule` is deprecated. Use the standalone component imports instead.
 
 ## Anatomy
-A media gallery consists of the following components:
-
-### Container
-**`<daff-media-gallery>`**: The wrapper component that contains all thumbnails and manages the display area.
-
-### Thumbnail
-**`[daffThumbnail]`**: A **structural directive** that defines both the preview image and the content to display when selected. Thumbnails can contain any content type, not just images.
+A media gallery is composed of a container and one or more thumbnails:
 
-### Basic structure
 ```html
 <daff-media-gallery>
   <ng-template daffThumbnail thumbnailSrc="/thumbnail-path.jpg" label="Your description">
@@ -76,19 +48,36 @@ A media gallery consists of the following components:
 </daff-media-gallery>
 ```
 
-## Thumbnail configuration
+- **`<daff-media-gallery>`**: The wrapper component that contains all thumbnails and manages the display area.
+- **`[daffThumbnail]`**: A **structural directive** that defines both the preview image and the content to display when selected. Thumbnails can contain any content type, not just images.
+
+### Thumbnail configuration
 - `thumbnailSrc` is used for the preview image rendered in the thumbnail strip.
-- The content inside the template will be shown as the primary view when selected.
-- You must include the full content for each thumbnail inside the template, even if it appears to duplicate the thumbnail image since this is what renders in the main display area when selected.
-- Always provide an accessible label for a thumbnail using `label`.
-- The `isVideo` property can be used to display a video icon on the thumbnail.
+- The content inside the template is shown as the primary view when selected.
+- Include the full content for each thumbnail inside the template, even if it appears to duplicate the thumbnail image, since this is what renders in the main display area when selected.
+- Always provide an accessible `label` for a thumbnail.
 - The first thumbnail is selected by default.
 
-> Never use `[daffThumbnail]` as a standalone element. It must be placed within a `<daff-media-gallery>`. 
+> Never use `[daffThumbnail]` as a standalone element. It must be placed within a `<daff-media-gallery>`.
+
+## Features
+
+### Video thumbnails
+Set the `isVideo` property on a thumbnail to display a video icon on its preview, signaling that the content opens a video.
 
 <daff-docs-example-viewer example="media-gallery-with-video"></daff-docs-example-viewer>
 
-## Aspect ratio
+### Iterating thumbnails
+Use a control-flow block such as `@for` to generate thumbnails from a collection of media.
+
+<daff-docs-example-viewer example="iterated-media-gallery"></daff-docs-example-viewer>
+
+### Skeleton screen
+Set the `skeleton` property to `true` to display a placeholder skeleton screen that helps reduce load-time frustration.
+
+<daff-docs-example-viewer example="skeleton-media-gallery"></daff-docs-example-viewer>
+
+### Aspect ratio
 Use a consistent aspect ratio across all content to avoid layout shifts. Mismatched content sizes can cause the primary content area to shift as different thumbnails are selected.
 
 Thumbnails are rendered in a square by default, so a 1:1 ratio is recommended, but not required since thumbnails are automatically centered horizontally and vertically.
@@ -96,6 +85,10 @@ Thumbnails are rendered in a square by default, so a 1:1 ratio is recommended, b
 <daff-docs-example-viewer example="mismatched-sizes-media-gallery"></daff-docs-example-viewer>
 
 ## Accessibility
-- Always provide an accessible label for each thumbnail using the `label` attribute.
+
+### Built-in behavior
 - Each thumbnail is rendered as a button with an autogenerated `aria-controls` value that matches the `id` of the content container displayed when the thumbnail is selected.
-- These `id` values are autogenerated but can be overridden by providing a custom id to the `<daff-media-gallery>` element.
+- These `id` values are autogenerated but can be overridden by providing a custom id to the `<daff-media-gallery>` element.
+
+### Developer responsibilities
+- Always provide an accessible label for each thumbnail using the `label` attribute.

package/menu/README.md

@@ -19,8 +19,7 @@ Menus appear when users interact with a menu activator button. Use menus for sec
 
 ## Usage
 
-### Within a standalone component
-To use menu in a standalone component, import `DAFF_MENU_COMPONENTS` directly into your custom component:
+Import `DAFF_MENU_COMPONENTS` into your component:
 
 ```ts
 import { DAFF_MENU_COMPONENTS } from '@daffodil/design/menu';
@@ -35,52 +34,19 @@ import { DAFF_MENU_COMPONENTS } from '@daffodil/design/menu';
 export class CustomComponent {}
 ```
 
-### Within a module (deprecated)
-To use menu in a module, import `DaffMenuModule` into your custom module:
-
-```ts
-import { NgModule } from '@angular/core';
-import { DaffMenuModule } from '@daffodil/design/menu';
-import { CustomComponent } from './custom.component';
-
-@NgModule({
-	declarations: [
-    CustomComponent,
-  ],
-  exports: [
-    CustomComponent,
-  ],
-  imports: [
-    DaffMenuModule,
-  ],
-})
-export class CustomComponentModule { }
-```
-
-> This method is deprecated. It's recommended to update all custom components to standalone.
+> **Deprecation notice:**
+> 
+> `DaffMenuModule` is deprecated. Use the standalone component imports instead.
 
 ## Anatomy
-A menu component consists of the following parts:
-
-### Menu Activator
-**`[daffMenuActivator]`**: A directive attached to a button that triggers the menu to open. The selector doubles as an input for the menu content to display.
-
-### Menu
-**`<daff-menu>`**: The container component that holds menu items.
-
-### Menu Item
-**`<daff-menu-item>`**: Represents a single action or navigation item within the menu. Should be used with an anchor or button HTML element.
-
-### Icon
-Use the `[daffPrefix]` directive to add a decorative icon before the menu item content.
+A menu is composed of an activator, a container, and one or more items:
 
-### Basic structure
 ```html
-<button [daffMenuActivator]="menu">
-  Open Menu
+<button [daffMenuActivator]="actionsMenu">
+  Actions
 </button>
 
-<ng-template #menu>
+<ng-template #actionsMenu>
   <daff-menu>
     <button daff-menu-item>
       <fa-icon [icon]="faEdit" daffPrefix></fa-icon>
@@ -98,29 +64,37 @@ Use the `[daffPrefix]` directive to add a decorative icon before the menu item c
 </ng-template>
 ```
 
+- **`[daffMenuActivator]`**: A directive attached to a button that triggers the menu to open. The selector doubles as an input for the menu content to display.
+- **`<daff-menu>`**: The container component that holds all menu items.
+- **`<daff-menu-item>`**: A single action or navigation item within the menu. Use with an anchor or button element.
+- **`[daffPrefix]`**: Adds a decorative icon before the menu item content.
+
 ## Features
 
-### Accessing menu state
-The menu activator provides an `isOpen` property that tracks whether the menu is currently open or closed. Use this to update your UI based on the menu state, such as changing icons or styling.
+### Menu state
+Use the actiavtor's `isOpen` property to track whether the menu is currently open or closed. Use this to update your UI based on the menu state, such as changing icons or styling.
 
 <daff-docs-example-viewer example="menu-with-icon-toggle"></daff-docs-example-viewer>
 
-
-### Setting an ID
-
-The menu activator accepts an optional `id` input. When set, the opened menu's `id` is derived as `{id}-menu`. When no `id` is provided, a unique ID is auto-generated.
+### Custom IDs
+Menus generate a unique id automatically. To set your own, add an `id` to the activator and the menu becomes `{id}-menu`.
 
 <daff-docs-example-viewer example="menu-with-id"></daff-docs-example-viewer>
 
 ## Accessibility
 Menu follows the [Menu and Menubar WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/menubar/).
 
-### Daffodil provides
+### Built-in behavior
 - `role="menu"` and `role="menuitem"` on appropriate elements
 - Focus management when menu opens and closes
 - `aria-expanded` on the activator indicating the menu state
 
-#### Keyboard interactions
+### Developer responsibilities
+- Provide a meaningful label on the menu activator
+- Ensure menu items have descriptive text or labels
+- Use appropriate HTML elements (`<button>` for actions, `<a>` for navigation)
+
+### Keyboard interactions
 Keyboard focus is placed on the first item when a menu is opened.
 
 | Key | Action |
@@ -131,8 +105,3 @@ Keyboard focus is placed on the first item when a menu is opened.
 | `Up Arrow` | Moves focus to the previous item. If focus is on the first item, focus moves to the last item |
 | `Home` | Moves focus to the first item |
 | `End` | Moves focus to the last item |
-
-### Developer responsibilities
-- Provide a meaningful label on the menu activator
-- Ensure menu items have descriptive text or labels
-- Use appropriate HTML elements (`<button>` for actions, `<a>` for navigation)

package/menu/src/menu-theme.scss

@@ -17,7 +17,12 @@
 			background: $base;
 			color: $base-contrast;
 
-			&:hover,
+			@media (hover: hover) {
+				&:hover {
+					background: rgba(daff-color($neutral, 20), 0.5);
+				}
+			}
+
 			&:focus {
 				background: rgba(daff-color($neutral, 20), 0.5);
 			}
@@ -34,7 +39,12 @@
 			background: $base;
 			color: $base-contrast;
 
-			&:hover,
+			@media (hover: hover) {
+				&:hover {
+					background: rgba(daff-color($neutral, 20), 0.08);
+				}
+			}
+
 			&:focus {
 				background: rgba(daff-color($neutral, 20), 0.08);
 			}