@dynamic-framework/ui-react 1.18.0 → 1.19.1

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-normal);
   --#{$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/components/DMonthPicker/DMonthPicker.d.ts

@@ -1,12 +0,0 @@
-import type { ReactDatePickerProps } from 'react-datepicker';
-import type { BaseProps, FamilyIconProps } from '../interface';
-type Props<CustomModifierNames extends string = never, WithRange extends boolean | undefined = undefined> = BaseProps & FamilyIconProps & Omit<ReactDatePickerProps<CustomModifierNames, WithRange>, 'selectsRange' | 'locale'> & {
-    date: string;
-    locale?: Locale;
-    headerPrevYearAriaLabel?: string;
-    headerNextYearAriaLabel?: string;
-    iconPrevMonth?: string;
-    iconNextMonth?: string;
-};
-export default function DMonthPicker<CustomModifierNames extends string = never, WithRange extends boolean | undefined = undefined>({ onChange, date, locale, className, calendarClassName, headerPrevYearAriaLabel, headerNextYearAriaLabel, iconFamilyClass, iconFamilyPrefix, iconPrevMonth: iconPrevMonthProp, iconNextMonth: iconNextMonthProp, ...props }: Props<CustomModifierNames, WithRange>): import("react/jsx-runtime").JSX.Element;
-export {};

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

@@ -1,2 +0,0 @@
-import DMonthPicker from './DMonthPicker';
-export default DMonthPicker;

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-monthpicker.scss

@@ -1,98 +0,0 @@
-// stylelint-disable selector-class-pattern
-
-.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-header-color: var(--#{$prefix}white);
-  --#{$prefix}monthpicker-header-bg: var(--#{$prefix}dark);
-
-  --#{$prefix}monthpicker-month-gap: 0;
-  --#{$prefix}monthpicker-month-padding: var(--#{$prefix}ref-spacer-2) var(--#{$prefix}ref-spacer-6) var(--#{$prefix}ref-spacer-4);
-  --#{$prefix}monthpicker-month-color: var(--#{$prefix}white);
-  --#{$prefix}monthpicker-month-bg: var(--#{$prefix}dark);
-
-  --#{$prefix}monthpicker-month-today-color: var(--#{$prefix}white);
-  --#{$prefix}monthpicker-month-selected-bg: var(--#{$prefix}gray-500);
-  --#{$prefix}monthpicker-month-selected-box-shadow: 0 0 0 1px inset var(--#{$prefix}gray-100);
-
-  --#{$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-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-after-display: inline;
-  --#{$prefix}monthpicker-single-month-after-content: ".";
-
-  --#{$prefix}datepicker-triangle-color: var(--#{$prefix}dark);
-
-  font-family: var(--#{$prefix}datepicker-font-family);
-  border: var(--#{$prefix}datepicker-border);
-  box-shadow: var(--#{$prefix}datepicker-box-shadow);
-
-  .react-datepicker__header {
-    padding: var(--#{$prefix}monthpicker-header-padding);
-    font-weight: var(--#{$prefix}monthpicker-font-weight);
-    color: var(--#{$prefix}monthpicker-header-color);
-    background-color: var(--#{$prefix}monthpicker-header-bg);
-
-    .btn-sm {
-      --#{$prefix}btn-padding-x: 0;
-      --#{$prefix}btn-padding-y: 0;
-      --#{$prefix}btn-font-size: var(--#{$prefix}ref-fs-5);
-    }
-  }
-
-  .react-datepicker__month.react-datepicker__monthPicker,
-  .react-datepicker__header.react-datepicker-year-header {
-    gap: var(--#{$prefix}monthpicker-month-gap);
-    padding: var(--#{$prefix}monthpicker-month-padding);
-    color: var(--#{$prefix}monthpicker-month-color);
-    background-color: var(--#{$prefix}monthpicker-month-bg);
-
-  }
-  .react-datepicker__month--selected,
-  .react-datepicker__month-text--in-range,
-  .react-datepicker__month-text--in-selecting-range,
-  .react-datepicker__month-text--keyboard-selected {
-    color: var(--#{$prefix}monthpicker-month-today-color);
-    background-color: var(--#{$prefix}monthpicker-month-selected-bg);
-    box-shadow: var(--#{$prefix}monthpicker-month-selected-box-shadow);
-  }
-  .react-datepicker__month-text:hover {
-    background-color: var(--#{$prefix}monthpicker-month-hover-bg);
-  }
-  .react-datepicker__month-wrapper {
-    display: flex;
-    gap: var(--#{$prefix}monthpicker-month-wrapper-gap);
-    font-size: var(--#{$prefix}monthpicker-month-wrapper-font-size);
-    .react-datepicker__month-text {
-      width: var(--#{$prefix}monthpicker-single-month-width);
-      padding: var(--#{$prefix}monthpicker-single-month-padding);
-      margin: var(--#{$prefix}monthpicker-single-month-margin);
-      line-height: var(--#{$prefix}monthpicker-single-month-line-height);
-      text-transform: var(--#{$prefix}monthpicker-single-month-text-transform);
-      border-radius: var(--#{$prefix}monthpicker-single-month-radius);
-      &::after {
-        display: var(--#{$prefix}monthpicker-single-month-after-display);
-        content: var(--#{$prefix}monthpicker-single-month-after-content);
-      }
-    }
-  }
-  .react-datepicker__triangle {
-    &::after,
-    &::before {
-      top: 0;
-      border-bottom-color: var(--#{$prefix}datepicker-triangle-color);
-    }
-  }
-}
-
-// stylelint-enable selector-class-pattern

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}));
-    }
-  }
-}