@dynamic-framework/ui-react 1.18.0 → 1.19.0

package/src/style/components/_d-datepicker.scss

@@ -13,12 +13,12 @@
   --#{$prefix}datepicker-header-padding: var(--#{$prefix}ref-spacer-4) var(--#{$prefix}ref-spacer-6);
   --#{$prefix}datepicker-header-background-color: var(--#{$prefix}secondary-soft);
   --#{$prefix}datepicker-header-border: 0;
-  --#{$prefix}datepicker-header-font-size: var(--#{$prefix}ref-fs-6);
+  --#{$prefix}datepicker-header-font-size: var(--#{$prefix}fs-6);
 
   --#{$prefix}datepicker-day-names-margin: 0;
   --#{$prefix}datepicker-day-names-font-size: var(--#{$prefix}ref-spacer-4);
 
-  --#{$prefix}datepicker-day-name-weight: var(--#{$prefix}ref-fw-bold);
+  --#{$prefix}datepicker-day-name-weight: var(--#{$prefix}fw-bold);
   --#{$prefix}datepicker-day-name-margin: 0;
   --#{$prefix}datepicker-day-name-size: var(--#{$prefix}ref-spacer-4);
   --#{$prefix}datepicker-day-name-color: var(--#{$prefix}gray-500);
@@ -33,7 +33,7 @@
 
   // Day variables
   --#{$prefix}datepicker-day-margin: 0;
-  --#{$prefix}datepicker-day-font-size: var(--#{$prefix}ref-fs-small);
+  --#{$prefix}datepicker-day-font-size: var(--#{$prefix}fs-small);
   --#{$prefix}datepicker-day-size: var(--#{$prefix}ref-spacer-4);
   --#{$prefix}datepicker-day-padding: var(--#{$prefix}ref-spacer-4);
   --#{$prefix}datepicker-day-radius: 100%;
@@ -49,7 +49,7 @@
 
   --#{$prefix}datepicker-day-outside-month-color: var(--#{$prefix}gray-400);
 
-  --#{$prefix}datepicker-day-today-font-weight: var(--#{$prefix}ref-fw-normal);
+  --#{$prefix}datepicker-day-today-font-weight: var(--#{$prefix}fw-normal);
   --#{$prefix}datepicker-day-today-box-shadow: 0 0 0 2px inset var(--#{$prefix}secondary);
 
   // Time variables
@@ -61,9 +61,9 @@
 
   --#{$prefix}datepicker-time-input-padding: var(--#{$prefix}ref-spacer-4);
   --#{$prefix}datepicker-time-input-gap: var(--#{$prefix}ref-spacer-2);
-  --#{$prefix}datepicker-time-input-label-weight: var(--#{$prefix}ref-fw-bold);
+  --#{$prefix}datepicker-time-input-label-weight: var(--#{$prefix}fw-bold);
   --#{$prefix}datepicker-time-input-label-color: var(--#{$prefix}gray-700);
-  --#{$prefix}datepicker-time-input-label-size: var(--#{$prefix}ref-fs-small);
+  --#{$prefix}datepicker-time-input-label-size: var(--#{$prefix}fs-small);
 
   font-family: var(--#{$prefix}datepicker-font-family);
   font-size: var(--#{$prefix}datepicker-font-size);
@@ -239,7 +239,7 @@
     }
   }
   .d-datepicker-header {
-    font-size: var(--#{$prefix}ref-fs-6);
+    font-size: var(--#{$prefix}fs-6);
   }
 }
 

package/src/style/components/_d-monthpicker.scss

@@ -3,7 +3,7 @@
 .react-datepicker.d-month-picker {
   // Month variables
   --#{$prefix}monthpicker-header-padding: var(--#{$prefix}ref-spacer-4) var(--#{$prefix}ref-spacer-2) 0;
-  --#{$prefix}monthpicker-font-weight: var(--#{$prefix}ref-fw-normal);
+  --#{$prefix}monthpicker-font-weight: var(--#{$prefix}fw-normal);
   --#{$prefix}monthpicker-header-color: var(--#{$prefix}white);
   --#{$prefix}monthpicker-header-bg: var(--#{$prefix}dark);
 
@@ -19,14 +19,14 @@
   --#{$prefix}monthpicker-month-hover-bg: var(--#{$prefix}gray-700);
 
   --#{$prefix}monthpicker-month-wrapper-gap: var(--#{$prefix}ref-spacer-2);
-  --#{$prefix}monthpicker-month-wrapper-font-size: var(--#{$prefix}ref-fs-small);
+  --#{$prefix}monthpicker-month-wrapper-font-size: var(--#{$prefix}fs-small);
 
   --#{$prefix}monthpicker-single-month-width: 46px;
   --#{$prefix}monthpicker-single-month-padding: var(--#{$prefix}ref-spacer-2);
   --#{$prefix}monthpicker-single-month-margin: 0;
   --#{$prefix}monthpicker-single-month-text-transform: capitalize;
   --#{$prefix}monthpicker-single-month-radius: var(--#{$prefix}ref-spacer-6);
-  --#{$prefix}monthpicker-single-month-line-height: var(--#{$prefix}ref-fs-6);
+  --#{$prefix}monthpicker-single-month-line-height: var(--#{$prefix}fs-6);
 
   --#{$prefix}monthpicker-single-month-after-display: inline;
   --#{$prefix}monthpicker-single-month-after-content: ".";
@@ -46,7 +46,7 @@
     .btn-sm {
       --#{$prefix}btn-padding-x: 0;
       --#{$prefix}btn-padding-y: 0;
-      --#{$prefix}btn-font-size: var(--#{$prefix}ref-fs-5);
+      --#{$prefix}btn-font-size: var(--#{$prefix}fs-5);
     }
   }
 

package/src/style/components/_d-quick-action-button.scss

@@ -25,6 +25,8 @@
 
   --#{$prefix}quick-action-button-action-icon-color: #{$quick-action-button-action-icon-color};
   --#{$prefix}quick-action-button-action-icon-size: #{$quick-action-button-action-icon-size};
+  --#{$prefix}quick-action-button-action-link-padding-x: var(--#{$prefix}ref-spacer-3);
+  --#{$prefix}quick-action-button-action-link-padding-y: var(--#{$prefix}ref-spacer-2);
 
   --#{$prefix}quick-action-button-hover-bg: #{$quick-action-button-hover-bg};
   --#{$prefix}quick-action-button-hover-border-color: #{$quick-action-button-hover-border-color};
@@ -85,6 +87,12 @@
     flex-grow: 1;
   }
 
+  .d-quick-action-button-action-link,
+  .d-quick-action-button-secondary-action-link {
+    --#{$prefix}btn-padding-x: var(--#{$prefix}quick-action-button-action-link-padding-x);
+    --#{$prefix}btn-padding-y: var(--#{$prefix}quick-action-button-action-link-padding-y);
+  }
+
   .d-quick-action-button-line1 {
     font-size: var(--#{$prefix}quick-action-button-line1-font-size);
     font-weight: var(--#{$prefix}quick-action-button-line1-font-weight);

package/src/style/components/_d-quick-action-select.scss

@@ -18,6 +18,8 @@
 
   display: flex;
   flex-direction: column;
+  gap: 0;
+  align-items: flex-start;
   width: 100%;
   padding: var(--#{$prefix}quick-action-select-padding);
   text-align: left;

package/src/style/components/_d-quick-action-switch.scss

@@ -53,10 +53,10 @@
     gap: var(--#{$prefix}quick-action-switch-content-gap);
   }
 
-  .d-quick-action-switch-label {
-    font-size: var(--#{$prefix}quick-action-switch-label-font-size);
-    font-weight: var(--#{$prefix}quick-action-switch-label-font-weight);
-    color: var(--#{$prefix}quick-action-switch-label-color);
+  label {
+    --#{$prefix}label-font-size: var(--#{$prefix}quick-action-switch-label-font-size);
+    --#{$prefix}label-font-weight: var(--#{$prefix}quick-action-switch-label-font-weight);
+    --#{$prefix}label-color: var(--#{$prefix}quick-action-switch-label-color);
   }
 
   .d-quick-action-switch-hint {

package/src/style/components/_d-select.scss

@@ -9,7 +9,7 @@
   --#{$prefix}select-option-selected-color: var(--#{$prefix}secondary);
   --#{$prefix}select-option-selected-bg: var(--#{$prefix}gray-100);
   --#{$prefix}select-option-is-checkbox-font-size: var(--#{$prefix}body-font-size);
-  --#{$prefix}select-option-is-checkbox-font-weight: var(--#{$prefix}ref-fw-normal);
+  --#{$prefix}select-option-is-checkbox-font-weight: var(--#{$prefix}fw-normal);
   --#{$prefix}select-option-is-checkbox-color: var(--#{$prefix}gray-900);
   --#{$prefix}select-option-has-icon-icon-size: var(--#{$prefix}ref-spacer-4);
   --#{$prefix}select-multi-value-padding-x: var(--#{$prefix}select-gap);

package/src/style/components/_d-stepper-mobile.scss

@@ -15,13 +15,13 @@
 
   /* Current step */
   --#{$prefix}step-current-step-z-index: 3;
-  --#{$prefix}step-current-step-font-weight: var(--#{$prefix}ref-fw-bold);
+  --#{$prefix}step-current-step-font-weight: var(--#{$prefix}fw-bold);
   --#{$prefix}step-current-step-color: var(--#{$prefix}gray-700);
 
   /* Info circle */
   --#{$prefix}step-info-max-width: 12rem;
-  --#{$prefix}step-info-label-font-size: var(--#{$prefix}ref-fs-6);
-  --#{$prefix}step-info-description-font-size: var(--#{$prefix}ref-fs-small);
+  --#{$prefix}step-info-label-font-size: var(--#{$prefix}fs-6);
+  --#{$prefix}step-info-description-font-size: var(--#{$prefix}fs-small);
   --#{$prefix}step-info-description-color: var(--#{$prefix}gray-500);
 
   display: flex;

package/src/style/helpers/_+import.scss

@@ -13,3 +13,4 @@
 @import "bootstrap/scss/helpers/vr";
 
 @import "overlay";
+@import "text-truncate";

package/src/style/helpers/_text-truncate.scss

@@ -0,0 +1,8 @@
+[class*="text-truncate-"] {
+  display: -webkit-box;
+  -webkit-line-clamp: var(--#{$prefix}text-truncate);
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: normal;
+}

package/src/style/root/_root.scss

@@ -31,10 +31,6 @@
     }
   }
 
-  --#{$prefix}btn-border-radius: #{$btn-border-radius};
-  --#{$prefix}btn-lg-border-radius: #{$btn-border-radius-lg};
-  --#{$prefix}btn-sm-border-radius: #{$btn-border-radius-sm};
-
   @each $color, $value in $colors {
     // custom
     --#{$prefix}#{$color}: rgb(var(--#{$prefix}#{$color}-rgb));
@@ -173,32 +169,113 @@
   --#{$prefix}form-invalid-border-color: #{$form-invalid-border-color};
   // scss-docs-end root-form-validation-variables
 
-  // only reference root variables
+  --#{$prefix}heading-line-height: #{$headings-line-height-value};
 
-  @each $level, $value in $spacers {
-    --#{$prefix}ref-spacer-#{$level}: #{$value};
+  @each $level, $value in $display-font-size-values {
+    @include rfs($value, --#{$prefix}rfs-display-#{$level});
+    --#{$prefix}fs-display-#{$level}: var(--#{$prefix}rfs-display-#{$level});
   }
 
-  @each $level, $value in $display-font-sizes {
-    --#{$prefix}ref-display-#{$level}: #{$value};
-  }
-  @each $level, $value in $font-sizes {
-    --#{$prefix}ref-fs-#{$level}: #{$value};
+  @each $level, $value in $font-size-values {
+    @include rfs($value, --#{$prefix}rfs-fs-#{$level});
+    --#{$prefix}fs-#{$level}: var(--#{$prefix}rfs-fs-#{$level});
   }
-  --#{$prefix}ref-fs-small: #{$small-font-size};
+  @include rfs($small-font-size-value, --#{$prefix}rfs-fs-small);
+  --#{$prefix}fs-small: var(--#{$prefix}rfs-fs-small);
 
-  --#{$prefix}ref-fw-lighter: #{$font-weight-lighter};
-  --#{$prefix}ref-fw-light: #{$font-weight-light};
-  --#{$prefix}ref-fw-normal: #{$font-weight-normal};
-  --#{$prefix}ref-fw-semibold: #{$font-weight-semibold};
-  --#{$prefix}ref-fw-bold: #{$font-weight-bold};
-  --#{$prefix}ref-fw-bolder: #{$font-weight-bolder};
+  --#{$prefix}fw-lighter: #{$font-weight-lighter-value};
+  --#{$prefix}fw-light: #{$font-weight-light-value};
+  --#{$prefix}fw-normal: #{$font-weight-normal-value};
+  --#{$prefix}fw-semibold: #{$font-weight-semibold-value};
+  --#{$prefix}fw-bold: #{$font-weight-bold-value};
+  --#{$prefix}fw-bolder: #{$font-weight-bolder-value};
 
   --#{$prefix}label-padding-y: var(--#{$prefix}ref-spacer-0);
   --#{$prefix}label-padding-x: var(--#{$prefix}ref-spacer-2);
-  --#{$prefix}label-font-size: var(--#{$prefix}ref-fs-small);
-  --#{$prefix}label-font-weight: var(--#{$prefix}ref-fw-bold);
+  --#{$prefix}label-font-size: var(--#{$prefix}fs-small);
+  --#{$prefix}label-font-weight: var(--#{$prefix}fw-bold);
   --#{$prefix}label-color: var(--#{$prefix}gray);
+
+  --#{$prefix}btn-border-radius: #{$btn-border-radius};
+  --#{$prefix}btn-lg-border-radius: #{$btn-border-radius-lg};
+  --#{$prefix}btn-sm-border-radius: #{$btn-border-radius-sm};
+
+  @each $color, $value in $theme-colors {
+    @if $color == "light" {
+      @include df-button-variant-variables(
+        "light",
+        $default-color: var(--#{$prefix}light),
+        $hover-color: var(--#{$prefix}gray-200),
+        $focus-color: var(--#{$prefix}light),
+        $active-color: var(--#{$prefix}gray-300),
+        $default-text-color: color-contrast-var(map-get($all-colors, light)),
+        $hover-text-color: color-contrast-var(map-get($all-colors, gray-200)),
+        $focus-text-color: color-contrast-var(map-get($all-colors, gray-200)),
+        $active-text-color: color-contrast-var(map-get($all-colors, gray-300)),
+        $disabled-opacity: .5
+      );
+      @include df-button-outline-variant-variables(
+        "light",
+        $default-color: var(--#{$prefix}light),
+        $hover-bg-color: var(--#{$prefix}light),
+        $hover-text-color: color-contrast-var(map-get($all-colors, light)),
+        $focus-text-color: var(--#{$prefix}light),
+        $active-text-color: color-contrast-var(map-get($all-colors, light)),
+        $active-bg-color: var(--#{$prefix}gray-300),
+        $active-border-color: var(--#{$prefix}gray-300)
+      );
+      @include df-button-link-variant-variables(
+        "light",
+        $default-color: var(--#{$prefix}light),
+        $hover-bg-color: var(--#{$prefix}light),
+        $hover-text-color: color-contrast-var(map-get($all-colors, light)),
+        $focus-text-color: var(--#{$prefix}light),
+        $active-text-color: color-contrast-var(map-get($all-colors, light)),
+        $active-bg-color: var(--#{$prefix}gray-300)
+      );
+    } @else if $color == "dark" {
+      @include df-button-variant-variables(
+        "dark",
+        $default-color: var(--#{$prefix}dark),
+        $hover-color: var(--#{$prefix}gray-800),
+        $focus-color: var(--#{$prefix}dark),
+        $active-color: var(--#{$prefix}gray-700),
+        $default-text-color: color-contrast-var(map-get($all-colors, dark)),
+        $hover-text-color: color-contrast-var(map-get($all-colors, gray-800)),
+        $focus-text-color: color-contrast-var(map-get($all-colors, gray-800)),
+        $active-text-color: color-contrast-var(map-get($all-colors, gray-700)),
+        $disabled-opacity: .5
+      );
+      @include df-button-outline-variant-variables(
+        "dark",
+        $default-color: var(--#{$prefix}dark),
+        $hover-bg-color: var(--#{$prefix}dark),
+        $hover-text-color: color-contrast-var(map-get($all-colors, dark)),
+        $focus-text-color: var(--#{$prefix}dark),
+        $active-text-color: color-contrast-var(map-get($all-colors, dark)),
+        $active-bg-color: var(--#{$prefix}gray-700),
+        $active-border-color: var(--#{$prefix}gray-700)
+      );
+      @include df-button-link-variant-variables(
+        "dark",
+        $default-color: var(--#{$prefix}dark),
+        $hover-bg-color: var(--#{$prefix}dark),
+        $hover-text-color: color-contrast-var(map-get($all-colors, dark)),
+        $focus-text-color: var(--#{$prefix}dark),
+        $active-text-color: color-contrast-var(map-get($all-colors, dark)),
+        $active-bg-color: var(--#{$prefix}gray-700)
+      );
+    } @else {
+      @include df-button-variant-variables($color);
+      @include df-button-outline-variant-variables($color);
+      @include df-button-link-variant-variables($color);
+    }
+  }
+
+  // only reference root variables
+  @each $level, $value in $spacers {
+    --#{$prefix}ref-spacer-#{$level}: #{$value};
+  }
 }
 
 @if $enable-dark-mode {

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

@@ -1,31 +0,0 @@
-import type { PropsWithChildren, FC } from 'react';
-type ModalComponent<P = any> = FC<ModalProps<P>>;
-type ModalAvailableList<T extends Record<string, unknown>> = {
-    [K in keyof T]: ModalComponent<T[K]>;
-};
-type Props<T extends Record<string, unknown>> = PropsWithChildren<{
-    portalName: string;
-    availableModals: ModalAvailableList<T>;
-}>;
-type ModalStackItem<N extends string = string, P = any> = {
-    modalName: N;
-    Component: ModalComponent<P>;
-    payload: P;
-};
-type OpenModalFunction<P = unknown> = (name: string, payload: P) => void;
-type CloseModalFunction = () => void;
-type ModalContextType<T extends Record<string, unknown>> = {
-    stack: ModalStackItem<string, T[keyof T]>[];
-    openModal: OpenModalFunction<T[keyof T]>;
-    closeModal: CloseModalFunction;
-};
-export type ModalProps<P = unknown> = {
-    name: string;
-    payload: P;
-    openModal: OpenModalFunction<P>;
-    closeModal: CloseModalFunction;
-};
-export declare const DModalContext: import("react").Context<ModalContextType<any> | undefined>;
-export declare function DModalContextProvider<T extends Record<string, unknown>>({ portalName, children, availableModals, }: Props<T>): import("react/jsx-runtime").JSX.Element;
-export declare function useDModalContext<T extends Record<string, unknown>>(): ModalContextType<T>;
-export {};

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

@@ -1,31 +0,0 @@
-import type { PropsWithChildren, FC } from 'react';
-type OffcanvasComponent<P = any> = FC<OffcanvasProps<P>>;
-type OffcanvasAvailableList<T extends Record<string, unknown>> = {
-    [K in keyof T]: OffcanvasComponent<T[K]>;
-};
-type Props<T extends Record<string, unknown>> = PropsWithChildren<{
-    portalName: string;
-    availableOffcanvas: OffcanvasAvailableList<T>;
-}>;
-type OffcanvasStackItem<N extends string = string, P = any> = {
-    offcanvasName: N;
-    Component: OffcanvasComponent<P>;
-    payload: P;
-};
-type OpenOffcanvasFunction<P = unknown> = (name: string, payload: P) => void;
-type CloseOffcanvasFunction = () => void;
-type OffcanvasContextType<T extends Record<string, unknown>> = {
-    stack: OffcanvasStackItem<string, T[keyof T]>[];
-    openOffcanvas: OpenOffcanvasFunction<T[keyof T]>;
-    closeOffcanvas: CloseOffcanvasFunction;
-};
-export type OffcanvasProps<P = any> = {
-    name: string;
-    payload: P;
-    openOffcanvas: OpenOffcanvasFunction<P>;
-    closeOffcanvas: CloseOffcanvasFunction;
-};
-export declare const DOffcanvasContext: import("react").Context<OffcanvasContextType<any> | undefined>;
-export declare function DOffcanvasContextProvider<T extends Record<string, unknown>>({ portalName, children, availableOffcanvas, }: Props<T>): import("react/jsx-runtime").JSX.Element;
-export declare function useDOffcanvasContext<T extends Record<string, unknown>>(): OffcanvasContextType<T>;
-export {};

package/src/style/components/_d-tooltip.scss

@@ -1,35 +0,0 @@
-.d-tooltip {
-  --#{$prefix}tooltip-font-size: var(--#{$prefix}tooltip-component-font-size, var(--#{$prefix}body-font-size));
-  --#{$prefix}tooltip-sm-font-size: var(--#{$prefix}ref-fs-small);
-  --#{$prefix}tooltip-lg-font-size: var(--#{$prefix}ref-fs-6);
-  --#{$prefix}tooltip-bg: var(--#{$prefix}tooltip-component-bg, transparent);
-  --#{$prefix}tooltip-border-radius: var(--#{$prefix}tooltip-component-border-radius, var(--#{$prefix}border-radius));
-  --#{$prefix}tooltip-color: var(--#{$prefix}tooltip-component-color, var(--#{$prefix}body-color));
-  --#{$prefix}tooltip-padding: var(--#{$prefix}tooltip-component-padding, var(--#{$prefix}ref-spacer-2));
-  --#{$prefix}tooltip-max-width: var(--#{$prefix}tooltip-component-max-width, 300px);
-  max-width: var(--#{$prefix}tooltip-max-width);
-  padding: var(--#{$prefix}tooltip-padding);
-
-  font-size: var(--#{$prefix}tooltip-font-size);
-  color: var(--#{$prefix}tooltip-color);
-  background: var(--#{$prefix}tooltip-bg);
-  border-radius: var(--#{$prefix}tooltip-border-radius);
-  fill: var(--#{$prefix}tooltip-bg);
-
-  &.d-tooltip-sm {
-    --#{$prefix}tooltip-font-size: var(--#{$prefix}tooltip-sm-font-size);
-  }
-
-  &.d-tooltip-lg {
-    --#{$prefix}tooltip-font-size: var(--#{$prefix}tooltip-lg-font-size);
-  }
-
-  @each $theme, $value in $theme-colors {
-    $color: color-contrast-var($value);
-
-    &.d-tooltip-#{$theme} {
-      --#{$prefix}tooltip-color: var(--#{$prefix}tooltip-component-color, #{$color});
-      --#{$prefix}tooltip-bg: var(--#{$prefix}tooltip-component-bg, var(--#{$prefix}#{$theme}));
-    }
-  }
-}