@dynamic-framework/ui-react 2.4.0 → 2.5.1

package/dist/types/components/DDropdown/DDropdown.d.ts

@@ -15,6 +15,7 @@ type Props = {
         toggle: () => void;
     }) => React.ReactNode);
     className?: string;
+    classNameMenu?: string;
 };
-export default function DDropdown({ actions, dropdownToggle, className, }: Props): import("react/jsx-runtime").JSX.Element;
+export default function DDropdown({ actions, dropdownToggle, className, classNameMenu, }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/components/DLayout/DLayout.d.ts

@@ -2,17 +2,16 @@ import type { PropsWithChildren } from 'react';
 import DLayoutPane from './components/DLayoutPane';
 import type { BaseProps } from '../interface';
 /**
- * Define the spacing (gap) on a scale from 0 to 30.
- * @type {number}
+ * Define the spacing (gap) on a scale from 0 to 30 (Bootstrap gap utilities).
  */
-type Gap = number;
+export type DLayoutGap = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30;
 type Props = PropsWithChildren<BaseProps & {
-    gap?: Gap;
-    gapSm?: Gap;
-    gapMd?: Gap;
-    gapLg?: Gap;
-    gapXl?: Gap;
-    gapXxl?: Gap;
+    gap?: DLayoutGap;
+    gapSm?: DLayoutGap;
+    gapMd?: DLayoutGap;
+    gapLg?: DLayoutGap;
+    gapXl?: DLayoutGap;
+    gapXxl?: DLayoutGap;
     columns?: number;
 }>;
 declare function DLayout({ className, style, children, gap, columns, gapSm, gapMd, gapLg, gapXl, gapXxl, dataAttributes, }: Props): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/DLayout/index.d.ts

@@ -1,3 +1,4 @@
 import DLayout from './DLayout';
+export type { DLayoutGap } from './DLayout';
 export { default as DLayoutPane } from './components/DLayoutPane';
 export default DLayout;

package/dist/types/components/DToastContainer/DToastContainer.d.ts

@@ -1,2 +1,39 @@
-import { ToasterProps } from 'react-hot-toast';
-export default function DToastContainer({ containerClassName, position, reverseOrder, containerStyle, toastOptions, gutter, }: ToasterProps): import("react/jsx-runtime").JSX.Element;
+import { CSSProperties } from 'react';
+import { DefaultToastOptions, ToastPosition } from 'react-hot-toast';
+/**
+ * Props for `DToastContainer`. This component must be placed once near the root
+ * of your application (typically inside `DContextProvider`) so that toasts
+ * dispatched via `useDToast` have a render target.
+ */
+export type DToastContainerProps = {
+    /**
+     * Additional CSS class applied to the portal container `<div>`.
+     * Useful for scoping z-index or stacking context in your layout.
+     */
+    containerClassName?: string;
+    /**
+     * Default position for toasts that do not specify their own `position`.
+     * @default 'bottom-center'
+     */
+    position?: ToastPosition;
+    /**
+     * When `true`, new toasts appear at the bottom of the stack instead of the top.
+     * @default false
+     */
+    reverseOrder?: boolean;
+    /**
+     * Inline styles applied to the portal container `<div>`.
+     */
+    containerStyle?: CSSProperties;
+    /**
+     * Default options merged into every toast rendered inside this container.
+     * Mirrors `DefaultToastOptions` from `react-hot-toast`.
+     */
+    toastOptions?: DefaultToastOptions;
+    /**
+     * Gap in pixels between stacked toasts.
+     * @default 8
+     */
+    gutter?: number;
+};
+export default function DToastContainer({ containerClassName, position, reverseOrder, containerStyle, toastOptions, gutter, }: DToastContainerProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/DToastContainer/index.d.ts

@@ -1,3 +1,5 @@
 import DToastContainer from './DToastContainer';
+export type { DToastContainerProps } from './DToastContainer';
+export type { DToastOptions, ToastData } from './useDToast';
 export { default as useDToast } from './useDToast';
 export default DToastContainer;

package/dist/types/components/DToastContainer/useDToast.d.ts

@@ -1,15 +1,48 @@
-import { Renderable, Toast, ValueFunction } from 'react-hot-toast';
+import { Renderable, Toast, ToastPosition, ValueFunction } from 'react-hot-toast';
 import { ComponentStateColor } from '../interface';
-type ToastData = {
+/**
+ * Data used to render the default DToast component via `useDToast`.
+ * When `description` is provided, the toast renders with a header and body layout.
+ * When omitted, a compact single-row body layout is used instead.
+ */
+export type ToastData = {
+    /** Main text displayed in the toast. */
     title: string;
+    /** Optional secondary text. When present, activates the header + body layout. */
     description?: string;
+    /** Timestamp string shown in the header (e.g. "just now").
+     * Only visible when `description` is set. */
     timestamp?: string;
+    /** Icon name from the active icon set in `DContextProvider`. Shown before the title. */
     icon?: string;
+    /** Overrides the default close icon from the context icon map. */
     closeIcon?: string;
+    /** Applies the `toast-{color}` CSS modifier class. */
     color?: ComponentStateColor;
 };
-type Props = Partial<Pick<Toast, 'id' | 'duration' | 'position'>>;
+/** Options forwarded to react-hot-toast for a single toast instance. */
+export interface DToastOptions {
+    /** Stable id; reusing it updates the existing toast in place. */
+    id?: string;
+    /** Auto-dismiss delay in milliseconds. */
+    duration?: number;
+    /** Overrides the container default position for this individual toast. */
+    position?: ToastPosition;
+}
+/**
+ * Hook that provides a `toast` function to dispatch DToast notifications.
+ *
+ * Prerequisites:
+ * - The calling component must be inside `DContextProvider` (provides icon context).
+ * - `DToastContainer` must be present somewhere in the component tree as a render target.
+ *
+ * @returns {{ toast }} Object containing a `toast` dispatcher function.
+ * @requires DContextProvider
+ * @requires DToastContainer
+ * @example
+ * const { toast } = useDToast();
+ * toast({ title: 'Saved', color: 'success' });
+ */
 export default function useDToast(): {
-    toast: (data: ToastData | ValueFunction<Renderable, Toast>, toastProps?: Props) => string;
+    toast: (data: ToastData | ValueFunction<Renderable, Toast>, toastProps?: DToastOptions) => string;
 };
-export {};

package/dist/types/components/index.d.ts

@@ -13,6 +13,7 @@ export { default as DCurrencyText } from './DCurrencyText';
 export { default as DDatePicker } from './DDatePicker';
 export { default as DIcon } from './DIcon';
 export { default as DLayout, DLayoutPane, } from './DLayout';
+export type { DLayoutGap } from './DLayout';
 export { default as DIconBase } from './DIconBase';
 export { default as DInput } from './DInput';
 export { default as DInputMask } from './DInputMask';
@@ -43,6 +44,7 @@ export { default as DTabs, useTabContext, DTabContent, } from './DTabs';
 export type { DTabOption } from './DTabs';
 export { default as DToast } from './DToast';
 export { default as DToastContainer, useDToast, } from './DToastContainer';
+export type { DToastContainerProps, DToastOptions, ToastData } from './DToastContainer';
 export { default as DInputPhone } from './DInputPhone';
 export { default as DCreditCard } from './DCreditCard';
 export { default as DDropdown } from './DDropdown';

package/dist/types/components/interface.d.ts

@@ -47,7 +47,7 @@ export type ComponentStateColor = 'success' | 'danger' | 'warning' | 'info';
 export type AlertThemeIconMap = {
     [state in ComponentStateColor]: string;
 };
-export type ButtonVariant = 'outline' | 'link';
+export type ButtonVariant = 'outline' | 'link' | 'soft';
 export type ButtonType = 'submit' | 'reset' | 'button';
 export type InputCheckType = 'checkbox' | 'radio';
 export type PinInputMode = 'numeric' | 'text' | 'tel';

package/dist/types/contexts/DContext.d.ts

@@ -1,55 +1,113 @@
 import type { PropsWithChildren } from 'react';
 import { PortalContextProps } from './DPortalContext';
 import type { AlertThemeIconMap } from '../components/interface';
+/**
+ * Currency formatting configuration used by `DContextProvider`.
+ */
 export type CurrencyProps = {
+    /** Currency symbol (e.g. `"$"`, `"€"`). */
     symbol: string;
+    /** Number of decimal places (e.g. `2`). */
     precision: number;
+    /** Thousands separator character (e.g. `","`). */
     separator: string;
+    /** Decimal separator character (e.g. `"."`). */
     decimal: string;
 };
-type IconProps = {
+/**
+ * Icon font configuration used by `DContextProvider` to resolve icon classes.
+ */
+export type IconProps = {
+    /** CSS class that identifies the icon font family (e.g. `"bi"`). */
     familyClass: string;
+    /** CSS prefix for icon names within the family (e.g. `"bi-"`). */
     familyPrefix: string;
+    /** When `true`, icons are rendered in Material Design outlined style. */
     materialStyle: boolean;
 };
-type IconMapProps = {
+/**
+ * Map of semantic icon names to their icon-font class suffixes.
+ * Used by Dynamic UI components to look up icons consistently.
+ */
+export type IconMapProps = {
+    /** Class suffix for the generic close/dismiss icon. */
     x: string;
+    /** Class suffix for the large close/dismiss icon. */
     xLg: string;
+    /** Class suffix for the chevron-down icon. */
     chevronDown: string;
+    /** Class suffix for the chevron-up icon. */
     chevronUp: string;
+    /** Class suffix for the chevron-left icon. */
     chevronLeft: string;
+    /** Class suffix for the chevron-right icon. */
     chevronRight: string;
+    /** Per-state alert icon map (one icon per `ComponentStateColor` value). */
     alert: AlertThemeIconMap;
+    /** Class suffix for the upload/attach icon. */
     upload: string;
+    /** Class suffix for the calendar/date-picker icon. */
     calendar: string;
+    /** Class suffix for the checkmark icon. */
     check: string;
+    /** Icon class suffixes for text input adornments. */
     input: {
+        /** Search/magnifier icon. */
         search: string;
+        /** Show password icon. */
         show: string;
+        /** Hide password icon. */
         hide: string;
+        /** Numeric decrease icon. */
         decrease: string;
+        /** Numeric increase icon. */
         increase: string;
     };
 };
+/**
+ * CSS breakpoint pixel values resolved from Bootstrap CSS variables at runtime.
+ * These are populated automatically by `DContextProvider` on mount.
+ */
 export type BreakpointProps = {
+    /** `--bs-breakpoint-xs` value (usually `"0px"`). */
     xs: string;
+    /** `--bs-breakpoint-sm` value (usually `"576px"`). */
     sm: string;
+    /** `--bs-breakpoint-md` value (usually `"768px"`). */
     md: string;
+    /** `--bs-breakpoint-lg` value (usually `"992px"`). */
     lg: string;
+    /** `--bs-breakpoint-xl` value (usually `"1200px"`). */
     xl: string;
+    /** `--bs-breakpoint-xxl` value (usually `"1400px"`). */
     xxl: string;
 };
-type Props<T extends Record<string, unknown>> = {
+type Props = {
     language: string;
     currency: CurrencyProps;
     icon: IconProps;
     iconMap: IconMapProps;
     breakpoints: BreakpointProps;
-} & PortalContextProps<T>;
-type Context<T extends Record<string, unknown>> = Props<T> & {
-    setContext: (value: Partial<Props<T>>) => void;
 };
-export declare const DContext: import("react").Context<Partial<Context<any>>>;
-export declare function DContextProvider<T extends Record<string, unknown>>({ language, currency, icon, iconMap, portalName, availablePortals, children, }: PropsWithChildren<Partial<Props<T>>>): import("react/jsx-runtime").JSX.Element;
-export declare function useDContext<T extends Record<string, unknown>>(): Context<T>;
+type DContextProviderProps<T extends Record<string, unknown>> = Props & PortalContextProps<T>;
+type Context = Props & {
+    setContext: (value: Partial<Props>) => void;
+};
+export declare const DContext: import("react").Context<Context>;
+/**
+ * Root context provider for Dynamic UI. Wrap your application with this
+ * component to configure icons, currency, language, and portal settings
+ * for all descendant Dynamic UI components.
+ *
+ * @template T - Map of portal name → payload shape (e.g. `{ modal: { title: string } }`).
+ *   Pass it once at the top level: `<DContextProvider<MyPortals> ...>`.
+ */
+export declare function DContextProvider<T extends Record<string, unknown>>({ language, currency, icon, iconMap, portalName, availablePortals, children, }: PropsWithChildren<Partial<DContextProviderProps<T>>>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Returns the Dynamic UI context value set by `DContextProvider`.
+ * Falls back to the library's built-in defaults when no `DContextProvider`
+ * is present in the tree — wrap your application with `DContextProvider`
+ * to customise icons, currency, language, and portal settings.
+ */
+export declare function useDContext(): Context;
 export {};

package/dist/types/contexts/DPortalContext.d.ts

@@ -3,27 +3,85 @@ type PortalComponent<P = any> = FC<PortalProps<P>>;
 type PortalAvailableList<T extends Record<string, unknown>> = {
     [K in keyof T]: PortalComponent<T[K]>;
 };
+/**
+ * Props for the `DPortalContextProvider` (mounted internally by `DContextProvider`).
+ * Consumers should configure these props on `DContextProvider` directly — never
+ * use `DPortalContextProvider` directly.
+ * @template T - Map of portal name → payload shape (e.g. `{ modal: { title: string } }`).
+ */
 export type PortalContextProps<T extends Record<string, unknown>> = PropsWithChildren<{
+    /** DOM element id used as the portal mount point. */
     portalName: string;
+    /** Map of portal name to the component that renders it. */
     availablePortals?: PortalAvailableList<T>;
 }>;
-type PortalStackItem<N extends string = string, P = any> = {
-    name: N;
-    Component: PortalComponent<P>;
-    payload: P;
-};
-type OpenPortalFunction<P = unknown> = (name: string, payload: P) => void;
+type OpenPortalFunction<T extends Record<string, unknown>> = <K extends keyof T & string>(name: K, payload: T[K]) => void;
 type ClosePortalFunction = () => void;
+/**
+ * Consumer-facing shape of a single entry in the portal stack.
+ * Only exposes `name` and `payload` — the internal `Component` field is not part of the public API.
+ * @template T - Map of portal name → payload shape.
+ */
+export type PortalStackEntry<T extends Record<string, unknown>> = {
+    [K in keyof T]: {
+        /** Portal identifier — matches the key passed to `openPortal`. */
+        name: K & string;
+        /** Payload forwarded from `openPortal`. */
+        payload: T[K];
+    };
+}[keyof T];
+/**
+ * Value returned by `useDPortalContext`. Provides methods to open/close portals
+ * and inspect the current portal stack.
+ * @template T - Map of portal name → payload shape.
+ */
 export type PortalContextType<T extends Record<string, unknown>> = {
-    stack: PortalStackItem<string, T[keyof T]>[];
-    openPortal: OpenPortalFunction<T[keyof T]>;
+    /** Currently open portals, ordered from oldest (bottom) to newest (top). */
+    stack: PortalStackEntry<T>[];
+    /**
+     * Pushes a named portal onto the stack, rendering its registered component
+     * with the given payload.
+     * @param name - Key of the portal to open (must be registered in `availablePortals`).
+     * @param payload - Data forwarded to the portal component via `PortalProps.payload`.
+     *   TypeScript will enforce that `payload` matches the shape declared for `name` in `T`.
+     */
+    openPortal: OpenPortalFunction<T>;
+    /** Pops the topmost portal off the stack, closing it. */
     closePortal: ClosePortalFunction;
 };
+/**
+ * Props interface received by every component registered in `availablePortals`.
+ * Use `PortalProps<Payloads['myPortal']>` to type a specific portal component.
+ * @template P - The payload shape for this portal.
+ */
 export type PortalProps<P = unknown> = {
+    /** Portal identifier, matches the key used in `openPortal`. */
     name: string;
+    /** Data passed via `openPortal`. */
     payload: P;
 };
 export declare const DPortalContext: import("react").Context<PortalContextType<any> | undefined>;
 export declare function DPortalContextProvider<T extends Record<string, unknown>>({ portalName, children, availablePortals, }: PortalContextProps<T>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Hook to open/close registered portals (modals, offcanvas, etc.).
+ *
+ * **Prerequisite**: must be called inside a `DContextProvider` configured with
+ * `portalName` and `availablePortals`. `DContextProvider` mounts
+ * `DPortalContextProvider` internally — consumers never use
+ * `DPortalContextProvider` directly.
+ *
+ * @template T - Map of portal name → payload shape (e.g. `ModalPayloads`).
+ *   Typing this generic gives you autocomplete on `openPortal` arguments.
+ * @returns `{ openPortal, closePortal, stack }` from the nearest portal context.
+ * @throws If called outside of `DContextProvider` / `DPortalContextProvider`.
+ *
+ * @requires DContextProvider
+ *
+ * @example
+ * ```tsx
+ * const { openPortal, closePortal } = useDPortalContext<ModalPayloads>();
+ * openPortal('confirm', { message: 'Are you sure?' });
+ * ```
+ */
 export declare function useDPortalContext<T extends Record<string, unknown>>(): PortalContextType<T>;
 export {};

package/dist/types/contexts/index.d.ts

@@ -1,3 +1,3 @@
 export * from './DContext';
 export { useDPortalContext } from './DPortalContext';
-export type { PortalProps } from './DPortalContext';
+export type { PortalProps, PortalContextType, PortalContextProps, PortalStackEntry, } from './DPortalContext';

package/dist/types/hooks/index.d.ts

@@ -4,7 +4,6 @@ export { default as useDisableInputWheel } from './useDisableInputWheel';
 export { default as useProvidedRefOrCreate } from './useProvidedRefOrCreate';
 export { default as useStackState } from './useStackState';
 export { default as useDisableBodyScrollEffect } from './useDisableBodyScrollEffect';
-export { default as usePortal } from './usePortal';
 export { default as useItemSelection } from './useItemSelection';
 export { default as useMediaQuery } from './useMediaQuery';
 export { useMediaBreakpointUpXs, useMediaBreakpointUpSm, useMediaBreakpointUpMd, useMediaBreakpointUpLg, useMediaBreakpointUpXl, useMediaBreakpointUpXxl, } from './useMediaBreakpointUp';

package/dist/types/hooks/usePortal.d.ts

@@ -1,3 +1,9 @@
+/**
+ * @internal
+ * Creates a DOM `<div>` portal mount point and appends it to `document.body`.
+ * This hook is used exclusively by `DPortalContextProvider` and is **not** part
+ * of the public API. Use `useDPortalContext` instead.
+ */
 export default function usePortal(portalName: string): {
     created: boolean;
 };

package/package.json

@@ -3,7 +3,7 @@
   "sideEffects": [
     "*.css"
   ],
-  "version": "2.4.0",
+  "version": "2.5.1",
   "description": "React Dynamic Framework",
   "license": "https://github.com/dynamic-framework/dynamic-ui/blob/master/LICENSE.md",
   "repository": {
@@ -60,7 +60,8 @@
     "clean": "rimraf dist-transpiled && rimraf dist",
     "compile": "tsc -p . && rollup -c rollup.config.mjs",
     "storybook": "storybook dev -p 6006",
-    "build:storybook": "storybook build --docs -o docs && node scripts/generate-props.mjs",
+    "build:storybook": "storybook build --docs -o docs",
+    "generate:registry": "node scripts/generate-api.mjs && node scripts/generate-schema.mjs",
     "eslint": "npm run eslint:src && npm run eslint:stories && npm run eslint:test",
     "eslint:src": "eslint 'src/**/*.ts' 'src/**/*.tsx' --ignore-pattern '**/*.spec.tsx'",
     "eslint:stories": "eslint stories/**/*.stories.tsx",
@@ -69,7 +70,7 @@
     "postversion": "npm run build:scss",
     "publish:cdn": "npm run publish:cdn-version && npm run publish:cdn-latest",
     "publish:cdn-version": "node scripts/publish-cdn.js",
-    "publish:cdn-latest": "aws s3 sync ./dist/ s3://dynamicframework-cdn/assets/latest/ui-react --delete --acl public-read",
+    "publish:cdn-latest": "aws s3 sync ./dist/ s3://dynamicframework-cdn/assets/latest/ui-react --delete --exclude 'api.json' --acl public-read",
     "publish:cdn-rc": "aws s3 sync ./dist/ s3://dynamicframework-cdn/assets/rc/ui-react --delete --acl public-read",
     "publish:cdn-dev": "aws s3 sync ./dist/ s3://dynamicframework-cdn/assets/dev/ui-react --delete --acl public-read",
     "lint-staged": "lint-staged",

package/src/style/abstracts/_mixins.scss

@@ -120,6 +120,52 @@
 }
 // scss-docs-end df-btn-link-variant-variables-mixin
 
+// scss-docs-start df-btn-soft-variant-variables-mixin
+@mixin df-button-soft-variant-variables(
+  $color-name,
+  $default-color: var(--#{$prefix}#{$color-name}-700),
+  $default-bg: var(--#{$prefix}#{$color-name}-50),
+  $default-border-color: transparent,
+  $hover-color: var(--#{$prefix}#{$color-name}-700),
+  $hover-bg: var(--#{$prefix}#{$color-name}-100),
+  $hover-border-color: transparent,
+  $focus-color: var(--#{$prefix}#{$color-name}-700),
+  $focus-bg: var(--#{$prefix}#{$color-name}-100),
+  $focus-border-color: transparent,
+  $active-color: var(--#{$prefix}#{$color-name}-700),
+  $active-bg: var(--#{$prefix}#{$color-name}-200),
+  $active-border-color: transparent,
+  $disabled-opacity: $btn-disabled-opacity,
+  $box-shadow: $btn-box-shadow,
+  $focus-shadow-rgb: var(--#{$prefix}#{$color-name}-500-rgb),
+  $active-box-shadow: $btn-active-box-shadow,
+) {
+  --#{$prefix}btn-soft-#{$color-name}-color: #{$default-color};
+  --#{$prefix}btn-soft-#{$color-name}-bg: #{$default-bg};
+  --#{$prefix}btn-soft-#{$color-name}-border-color: #{$default-border-color};
+  --#{$prefix}btn-soft-#{$color-name}-box-shadow: #{$box-shadow};
+
+  --#{$prefix}btn-soft-#{$color-name}-hover-color: #{$hover-color};
+  --#{$prefix}btn-soft-#{$color-name}-hover-bg: #{$hover-bg};
+  --#{$prefix}btn-soft-#{$color-name}-hover-border-color: #{$hover-border-color};
+
+  --#{$prefix}btn-soft-#{$color-name}-focus-color: #{$focus-color};
+  --#{$prefix}btn-soft-#{$color-name}-focus-bg: #{$focus-bg};
+  --#{$prefix}btn-soft-#{$color-name}-focus-border-color: #{$focus-border-color};
+  --#{$prefix}btn-soft-#{$color-name}-focus-shadow-rgb: #{$focus-shadow-rgb};
+
+  --#{$prefix}btn-soft-#{$color-name}-active-color: #{$active-color};
+  --#{$prefix}btn-soft-#{$color-name}-active-bg: #{$active-bg};
+  --#{$prefix}btn-soft-#{$color-name}-active-border-color: #{$active-border-color};
+  --#{$prefix}btn-soft-#{$color-name}-active-box-shadow: #{$active-box-shadow};
+
+  --#{$prefix}btn-soft-#{$color-name}-disabled-color: #{$default-color};
+  --#{$prefix}btn-soft-#{$color-name}-disabled-bg: #{$default-bg};
+  --#{$prefix}btn-soft-#{$color-name}-disabled-border-color: #{$default-border-color};
+  --#{$prefix}btn-soft-#{$color-name}-disabled-opacity: #{$disabled-opacity};
+}
+// scss-docs-end df-btn-soft-variant-variables-mixin
+
 @mixin df-button-variant-outline-mapper($color-name) {
   --#{$prefix}btn-color: var(--#{$prefix}btn-outline-#{$color-name}-color);
   --#{$prefix}btn-border-color: var(--#{$prefix}btn-outline-#{$color-name}-border-color);

package/src/style/abstracts/_utilities.scss

@@ -98,7 +98,7 @@ $utilities: map-merge(
         responsive: true,
         values: map-merge(
           map-get(map-get($utilities, "border-color"), "values"),
-          map-loop($palette-grays, rgba-css-var, "$key", "border"),
+          map-loop(map-merge-multiple($theme-colors-palettes, $palette-grays), rgba-css-var, "$key", "border"),
         )
       )
     ),

package/src/style/abstracts/variables/_dropdowns.scss

@@ -4,33 +4,43 @@
 
 // scss-docs-start dropdown-variables
 $dropdown-padding-x: var(--#{$prefix}ref-spacer-2) !default;
+$dropdown-color: var(--#{$prefix}body-color) !default;
 $dropdown-bg: var(--#{$prefix}white) !default;
+$dropdown-border-color: var(--#{$prefix}border-color-translucent) !default;
 $dropdown-border-radius: var(--#{$prefix}border-radius-sm) !default;
 $dropdown-border-width: 0 !default;
-
-$dropdown-divider-margin-y: var(--#{$prefix}ref-spacer-2) !default;
+$dropdown-divider-bg: $dropdown-border-color !default;
 $dropdown-box-shadow: var(--#{$prefix}box-shadow-sm) !default;
 
-$dropdown-link-color: rgb(var(--#{$prefix}gray-700-rgb)) !default;
-$dropdown-link-hover-color: rgb(var(--#{$prefix}gray-700-rgb)) !default;
+$dropdown-link-color: var(--#{$prefix}body-color) !default;
+$dropdown-link-hover-color: $dropdown-link-color !default;
 $dropdown-link-hover-bg: rgb(var(--#{$prefix}gray-25-rgb)) !default;
+
+$dropdown-link-active-color: var(--#{$prefix}body-color) !default;
 $dropdown-link-active-bg: rgb(var(--#{$prefix}gray-50-rgb)) !default;
 
+$dropdown-link-disabled-color: var(--#{$prefix}gray-100) !default;
+
 $dropdown-item-padding-y: var(--#{$prefix}ref-spacer-2) !default;
 $dropdown-item-padding-x: var(--#{$prefix}ref-spacer-4) !default;
 
+$dropdown-header-color: var(--#{$prefix}gray-600) !default;
+
 // custom
 $dropdown-item-border-radius: var(--#{$prefix}border-radius-sm) !default;
 // end custom
 
-$dropdown-header-color: var(--#{$prefix}gray-600) !default;
 // scss-docs-end dropdown-variables
-
-// scss-docs-start dropdown-dark-variables
 $dropdown-dark-color: var(--#{$prefix}gray-300) !default;
 $dropdown-dark-bg: var(--#{$prefix}gray-800) !default;
+$dropdown-dark-border-color: var(--#{$prefix}border-color-translucent) !default;
+$dropdown-dark-divider-bg: $dropdown-dark-border-color !default;
+$dropdown-dark-box-shadow: null !default;
+$dropdown-dark-link-color: $dropdown-dark-color !default;
 $dropdown-dark-link-hover-color: var(--#{$prefix}white) !default;
-$dropdown-dark-link-hover-bg: var(--#{$prefix}gray-50) !default;
+$dropdown-dark-link-hover-bg: rgba(var(--#{$prefix}white-rgb), .15) !default;
+$dropdown-dark-link-active-color: $dropdown-link-active-color !default;
+$dropdown-dark-link-active-bg: $dropdown-link-active-bg !default;
 $dropdown-dark-link-disabled-color: var(--#{$prefix}gray-500) !default;
 $dropdown-dark-header-color: var(--#{$prefix}gray-500) !default;
 // scss-docs-end dropdown-dark-variables

package/src/style/base/_buttons.scss

@@ -167,6 +167,10 @@
     .btn-outline-#{$color} {
       @include df-button-variant-outline-mapper($color);
     }
+
+    .btn-soft-#{$color} {
+      @include df-button-variant-mapper($color, "soft");
+    }
   }
 }
 

package/src/style/base/_dropdown.scss

@@ -1,21 +1,10 @@
-// .dropdown-item {
-//   --#{$prefix}dropdown-item-border-radius: #{$dropdown-item-border-radius};
-// }
-
 .dropdown-item {
   --#{$prefix}dropdown-item-border-radius: #{$dropdown-item-border-radius};
-  --#{$prefix}dropdown-item-active-bg: var(--#{$prefix}gray-25);
-  --#{$prefix}dropdown-item-active-color: inherit;
-  &:active {
-    color: var(--#{$prefix}dropdown-item-active-color);
-    background-color: var(--#{$prefix}dropdown-item-active-bg);
-  }
   &.dropdown-item-danger {
-    color: var(--#{$prefix}danger-500);
-    &:hover,
-    &:active,
-    &:focus {
-      background-color: var(--#{$prefix}danger-25);
-    }
+    --#{$prefix}dropdown-link-color: var(--#{$prefix}danger-500);
+    --#{$prefix}dropdown-link-hover-color: var(--#{$prefix}dropdown-link-color);
+    --#{$prefix}dropdown-link-hover-bg: var(--#{$prefix}danger-25);
+    --#{$prefix}dropdown-link-active-color: var(--#{$prefix}dropdown-link-color);
+    --#{$prefix}dropdown-link-active-bg: var(--#{$prefix}danger-50);
   }
 }

package/src/style/base/_toast.scss

@@ -25,29 +25,31 @@
     --#{$prefix}icon-color: var(--#{$prefix}toast-icon-color);
   }
 
-  @each $theme, $value in map-remove($theme-colors, "light", "dark") {
-    $color: color-contrast-var($value);
+  @each $theme, $value in map-remove($theme-colors-base, "warning", "light", "dark") {
     &.toast-#{$theme} {
-      --#{$prefix}toast-border-color: var(--#{$prefix}#{$theme});
-      --#{$prefix}toast-color: #{$color};
-      --#{$prefix}toast-close-color: #{$color};
-      --#{$prefix}toast-header-color: #{$color};
-      --#{$prefix}toast-bg: var(--#{$prefix}#{$theme});
-      --#{$prefix}toast-header-bg: var(--#{$prefix}#{$theme});
+      --#{$prefix}toast-border-color: var(--#{$prefix}#{$theme}-50);
+      --#{$prefix}toast-color: var(--#{$prefix}#{$theme}-700);
+      --#{$prefix}toast-close-color: var(--#{$prefix}#{$theme}-700);
+      --#{$prefix}toast-header-color: var(--#{$prefix}#{$theme}-700);
+      --#{$prefix}toast-bg: var(--#{$prefix}#{$theme}-50);
+      --#{$prefix}toast-header-bg: var(--#{$prefix}#{$theme}-50);
 
       .d-close {
         color: var(--#{$prefix}toast-close-color);
       }
     }
+  }
+
+  &.toast-warning {
+    --#{$prefix}toast-border-color: var(--#{$prefix}warning-50);
+    --#{$prefix}toast-color: var(--#{$prefix}warning-800);
+    --#{$prefix}toast-close-color: var(--#{$prefix}warning-800);
+    --#{$prefix}toast-header-color: var(--#{$prefix}warning-800);
+    --#{$prefix}toast-bg: var(--#{$prefix}warning-50);
+    --#{$prefix}toast-header-bg: var(--#{$prefix}warning-50);
 
-    &.toast-soft-#{$theme} {
-      --#{$prefix}toast-color: var(--#{$prefix}gray-900);
-      --#{$prefix}toast-close-color: var(--#{$prefix}gray-900);
-      --#{$prefix}toast-header-color: var(--#{$prefix}gray-900);
-      --#{$prefix}toast-icon-color: var(--#{$prefix}#{$theme}-500);
-      --#{$prefix}toast-border-color: var(--#{$prefix}#{$theme}-100);
-      --#{$prefix}toast-bg: var(--#{$prefix}#{$theme}-100);
-      --#{$prefix}toast-header-bg: var(--#{$prefix}#{$theme}-100);
+    .d-close {
+      color: var(--#{$prefix}toast-close-color);
     }
   }
 }