@dynamic-framework/ui-react 1.15.1 → 1.16.1

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

@@ -1,5 +1,5 @@
 // scss-docs-start form-text-variables
-$form-text-margin-top: 0 !default;
+$form-text-margin-top: .5rem !default;
 $form-text-font-size: $small-font-size !default;
 $form-text-font-style: null !default;
 $form-text-font-weight: null !default;
@@ -24,18 +24,19 @@ $form-label-gap: var(--#{$prefix}ref-spacer-1) !default;
 // scss-docs-start form-input-variables
 $input-padding-y: .75rem !default;
 $input-padding-x: $spacer-3 !default;
+
 $input-font-family: $input-btn-font-family !default;
 $input-font-size: $input-btn-font-size !default;
 $input-font-weight: $font-weight-base !default;
 $input-line-height: 1.375 !default;
 
-$input-padding-y-sm: $input-padding-y !default;
-$input-padding-x-sm: $input-padding-x !default;
-$input-font-size-sm: $input-font-size !default;
+$input-padding-x-sm: .5rem !default;
+$input-padding-y-sm: .25rem !default;
+$input-font-size-sm: .875rem !default;
 
-$input-padding-y-lg: $input-padding-y !default;
-$input-padding-x-lg: $input-padding-x !default;
-$input-font-size-lg: $input-font-size !default;
+$input-padding-x-lg: 1rem !default;
+$input-padding-y-lg: 1rem !default;
+$input-font-size-lg: 1.25rem !default;
 
 $input-bg: var(--#{$prefix}white) !default;
 $input-disabled-color: var(--#{$prefix}gray) !default;
@@ -45,11 +46,11 @@ $input-disabled-border-color: var(--#{$prefix}gray-300) !default;
 $input-color: var(--#{$prefix}gray) !default;
 $input-border-color: var(--#{$prefix}gray-300) !default;      // unused
 $input-border-width: $input-btn-border-width !default;          // unused
-$input-box-shadow: $box-shadow-inset !default;                  // unused
+$input-box-shadow: none !default;
 
-$input-border-radius: $border-radius-sm !default;
-$input-border-radius-sm: $border-radius-sm !default;            // unused
-$input-border-radius-lg: $border-radius-lg !default;            // unused
+$input-border-radius: var(--#{$prefix}border-radius-sm) !default;
+$input-border-radius-sm: var(--#{$prefix}border-radius-sm) !default;
+$input-border-radius-lg: var(--#{$prefix}border-radius-sm) !default;
 
 // custom
 $input-hover-border-color: var(--#{$prefix}gray) !default;
@@ -58,8 +59,8 @@ $input-hover-border-color: var(--#{$prefix}gray) !default;
 $input-focus-bg: $input-bg !default;
 $input-focus-border-color: var(--#{$prefix}focus-ring-color) !default; // unused
 $input-focus-color: $input-color !default;                      // unused
-$input-focus-width: 1px !default;            // unused
-$input-focus-box-shadow: $input-btn-focus-box-shadow !default;
+$input-focus-width: 1px !default;
+$input-focus-box-shadow: 0 0 0 1px rgba(var(--#{$prefix}secondary-rgb)) !default;
 
 // custom
 $input-group-disabled-color: var(--#{$prefix}secondary-100) !default;
@@ -92,10 +93,13 @@ $form-color-width: 3rem !default;
 // scss-docs-end form-input-variables
 
 // scss-docs-start form-check-variables
-$form-check-input-width: 1.5em !default;
-$form-check-min-height: $font-size-base * $line-height-base !default;
-$form-check-padding-start: $form-check-input-width + .5em !default;
-$form-check-margin-bottom: .125rem !default;
+// custom
+$form-check-size-multiplier: 1.5 !default;
+// end custom
+$form-check-input-width: 1em * $form-check-size-multiplier !default;
+$form-check-min-height: $font-size-base * $line-height-base * $form-check-size-multiplier !default;
+$form-check-padding-start: $form-check-input-width + .5em * $form-check-size-multiplier !default;
+$form-check-margin-bottom: .125rem * $form-check-size-multiplier !default;
 $form-check-label-color: null !default;
 $form-check-label-cursor: null !default;
 $form-check-transition: null !default;
@@ -211,7 +215,7 @@ $form-select-feedback-icon-size: $input-height-inner-half $input-height-inner-ha
 $form-select-border-width: $input-border-width !default;
 $form-select-border-color: $input-border-color !default;
 $form-select-border-radius: $input-border-radius !default;
-$form-select-box-shadow: null !default;
+$form-select-box-shadow: none !default;
 
 $form-select-focus-border-color: $input-focus-border-color !default;
 $form-select-focus-width: $input-focus-width !default;
@@ -236,7 +240,7 @@ $form-range-track-height: .5rem !default;
 $form-range-track-cursor: pointer !default;
 $form-range-track-bg: var(--#{$prefix}gray-300) !default;
 $form-range-track-border-radius: 1rem !default;
-$form-range-track-box-shadow: $box-shadow-inset !default;
+$form-range-track-box-shadow: var(--#{$prefix}box-shadow-inset) !default;
 
 $form-range-thumb-width: 1rem !default;
 $form-range-thumb-height: $form-range-thumb-width !default;

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

@@ -1,7 +1,7 @@
 // Modals
 
 // scss-docs-start modal-variables
-$modal-inner-padding: 0 !default;
+$modal-inner-padding: $spacer-4 !default;
 
 // custom
 $modal-header-gap: $spacer-4 !default;
@@ -23,10 +23,6 @@ $modal-content-inner-border-radius: subtract($modal-content-border-radius, $moda
 $modal-content-box-shadow-xs: $box-shadow-sm !default;
 $modal-content-box-shadow-sm-up: $box-shadow-sm !default;
 
-// custom
-$modal-body-padding: 0 !default;
-// end custom
-
 $modal-backdrop-bg: var(--#{$prefix}black) !default;
 $modal-backdrop-opacity: .3 !default;
 

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

@@ -1,8 +1,8 @@
 // Navs
 
 // scss-docs-start nav-variables
-$nav-link-padding-y: 0 !default;
-$nav-link-padding-x: $spacer-1 !default;
+$nav-link-padding-y: .5rem !default;
+$nav-link-padding-x: 1rem !default;
 $nav-link-font-size: var(--#{$prefix}body-font-size) !default;
 $nav-link-font-weight: var(--#{$prefix}ref-fw-normal) !default;
 $nav-link-color: var(--#{$prefix}gray-500) !default;

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

@@ -5,8 +5,42 @@
 @import "bootstrap/scss/images";
 @import "bootstrap/scss/containers";
 @import "bootstrap/scss/grid";
-// @import "bootstrap/scss/tables";
+// @import "bootstrap/scss/tables"; we use our own bootstrap based implementation
 @import "tables";
 
 @import "bootstrap/scss/transitions";
 
+@import "bootstrap/scss/forms";
+// @import "bootstrap/scss/buttons"; we use our own bootstrap based implementation
+@import "bootstrap/scss/dropdown";
+@import "bootstrap/scss/button-group";
+@import "bootstrap/scss/nav";
+@import "bootstrap/scss/navbar";
+@import "bootstrap/scss/card";
+@import "bootstrap/scss/accordion";
+@import "bootstrap/scss/breadcrumb";
+@import "bootstrap/scss/pagination";
+@import "bootstrap/scss/alert";
+@import "bootstrap/scss/progress";
+@import "bootstrap/scss/list-group";
+@import "bootstrap/scss/close";
+@import "bootstrap/scss/toasts";
+@import "bootstrap/scss/modal";
+@import "bootstrap/scss/tooltip";
+@import "bootstrap/scss/popover";
+@import "bootstrap/scss/carousel";
+@import "bootstrap/scss/spinners";
+@import "bootstrap/scss/offcanvas";
+@import "bootstrap/scss/placeholders";
+@import "bootstrap/scss/badge";
+
+@import "accordion";
+@import "form-switch";
+@import "form-check";
+@import "button";
+@import "progress";
+@import "alert";
+@import "collapse";
+@import "pagination";
+@import "breadcrumb";
+@import "dropdown";

package/src/style/base/_accordion.scss

@@ -0,0 +1,19 @@
+.accordion {
+  --#{$prefix}accordion-btn-font-weight: #{$accordion-button-font-weight};
+  --#{$prefix}accordion-btn-font-size: #{$accordion-button-font-size};
+  --#{$prefix}accordion-body-padding-top: #{$accordion-body-padding-top};
+
+  .accordion-button {
+    font-weight: var(--#{$prefix}accordion-btn-font-weight);
+    @include font-size(var(--#{$prefix}accordion-btn-font-size));
+  }
+
+  .accordion-item .show,
+  .accordion-item .collapsing {
+    background-color: var(--#{$prefix}accordion-active-bg);
+  }
+
+  .accordion-body {
+    padding-top: var(--#{$prefix}accordion-body-padding-top);
+  }
+}

package/src/style/base/_breadcrumb.scss

@@ -0,0 +1,10 @@
+.breadcrumb .separator {
+  float: left;
+  padding: 0 var(--#{$prefix}breadcrumb-item-padding-x);
+  color: var(--#{$prefix}breadcrumb-divider-color);
+  content: var(--#{$prefix}breadcrumb-divider, "/");
+}
+
+.breadcrumb .last {
+  color: var(--#{$prefix}breadcrumb-item-active-color);
+}

package/src/style/{components/_d-button.scss → base/_button.scss}

@@ -160,7 +160,21 @@
       text-decoration: underline;
     }
 
-    @include df-button-link-variant($color);
+    @if $color == "light" {
+      @include df-button-link-variant(
+        "gray",
+        $default-color: $value,
+        $hover-bg-color: var(--#{$prefix}gray-300),
+        $active-bg-color: var(--#{$prefix}gray-500)
+      );
+    } @else if $color == "dark" {
+      @include df-button-link-variant(
+        "gray",
+        $default-color: $value
+      );
+    } @else {
+      @include df-button-link-variant($color);
+    }
   }
 }
 

package/src/style/base/_dropdown.scss

@@ -0,0 +1,3 @@
+.dropdown-item {
+  --#{$prefix}dropdown-item-border-radius: #{$dropdown-item-border-radius};
+}

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

@@ -1,48 +1,16 @@
-@import "bootstrap/scss/forms";
-// @import "bootstrap/scss/buttons"; we use our own bootstrap based implementation
-
-@import "bootstrap/scss/dropdown";
-@import "bootstrap/scss/button-group";
-@import "bootstrap/scss/nav";
-@import "bootstrap/scss/navbar";
-@import "bootstrap/scss/card";
-@import "bootstrap/scss/accordion";
-@import "bootstrap/scss/breadcrumb";
-@import "bootstrap/scss/pagination";
-@import "bootstrap/scss/badge";
-@import "bootstrap/scss/alert";
-@import "bootstrap/scss/progress";
-@import "bootstrap/scss/list-group";
-@import "bootstrap/scss/close";
-@import "bootstrap/scss/toasts";
-@import "bootstrap/scss/modal";
-@import "bootstrap/scss/tooltip";
-@import "bootstrap/scss/popover";
-@import "bootstrap/scss/carousel";
-@import "bootstrap/scss/spinners";
-@import "bootstrap/scss/offcanvas";
-@import "bootstrap/scss/placeholders";
-
 @import "react-toastify/scss/main";
 
 @import "d-icon";
 @import "d-input";
-@import "d-input-switch";
-@import "d-input-check";
 @import "d-input-select";
 @import "d-input-pin";
-@import "d-button";
 @import "d-quick-action-button";
 @import "d-quick-action-select";
 @import "d-quick-action-check";
 @import "d-quick-action-switch";
-@import "d-progress";
-@import "d-alert";
-@import "d-badge";
 @import "d-chip";
 @import "d-modal";
 @import "d-offcanvas";
-@import "d-collapse";
 @import "d-collapse-icon-text";
 @import "d-datepicker";
 @import "d-timepicker";
@@ -53,10 +21,6 @@
 @import "d-carousel";
 @import "d-stepper-desktop";
 @import "d-stepper-mobile";
-@import "d-paginator";
 @import "d-card-account";
 @import "d-tooltip";
 @import "d-select";
-
-// TODO: review.
-@import "d-permission-group";

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

@@ -1,6 +1,5 @@
 .modal {
   --#{$prefix}modal-header-gap: #{$offcanvas-header-gap};
-  --#{$prefix}modal-body-padding: #{$modal-body-padding};
   --#{$prefix}modal-footer-padding: #{$modal-footer-padding};
   --#{$prefix}modal-separator-margin-x: #{$modal-separator-margin-x};
   --#{$prefix}modal-separator-height: #{$modal-separator-height};
@@ -28,10 +27,6 @@
     }
   }
 
-  .modal-body {
-    padding: var(--#{$prefix}modal-body-padding);
-  }
-
   .d-modal-separator {
     height: var(--#{$prefix}modal-separator-height);
     margin: 0 var(--#{$prefix}modal-separator-margin-x);

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

@@ -1,4 +1,4 @@
-.d-tabs {
+.nav {
   --#{$prefix}tabs-nav-gap: #{$nav-nav-gap};
   --#{$prefix}tabs-nav-padding-x: #{$nav-nav-padding-x};
   --#{$prefix}tabs-nav-padding-y: #{$nav-nav-padding-y};
@@ -9,14 +9,11 @@
   --#{$prefix}tabs-link-border-active-font-weight: #{$nav-link-border-active-font-weight};
   --#{$prefix}tabs-link-border-active-bg: #{$nav-link-border-active-bg};
 
-  display: flex;
-  flex-direction: column;
-
-  .nav {
-    gap: var(--#{$prefix}tabs-nav-gap);
-    padding: var(--#{$prefix}tabs-nav-padding-y) var(--#{$prefix}tabs-nav-padding-x);
-  }
+  gap: var(--#{$prefix}tabs-nav-gap);
+  padding: var(--#{$prefix}tabs-nav-padding-y) var(--#{$prefix}tabs-nav-padding-x);
+}
 
+.nav-tabs {
   .nav-link {
     position: relative;
     line-height: var(--#{$prefix}tabs-link-line-height);
@@ -40,17 +37,11 @@
     content: " ";
     border-radius: var(--#{$prefix}tabs-link-border-border-radius);
   }
+}
 
-  &.d-tabs-vertical {
-    flex-direction: row;
-
-    .nav {
-      flex-direction: column;
-      align-items: center;
-    }
-
-    .tab-content {
-      flex: 1;
-    }
+.nav-pills {
+  .nav-link {
+    position: relative;
+    line-height: var(--#{$prefix}tabs-link-line-height);
   }
 }

package/src/style/helpers/_color-bg.scss

@@ -4,4 +4,16 @@
     color: color-contrast-var($value) if($enable-important-utilities, !important, null);
     background-color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null);
   }
+
+  .text-bg-soft-#{$color} {
+    color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null);
+
+    @if $color == "light" {
+      background-color: RGBA(var(--#{$prefix}gray-700-rgb), var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null);
+    } @else if $color == "dark" {
+      background-color: RGBA(var(--#{$prefix}gray-200-rgb), var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null);
+    } @else {
+      background-color: RGBA(var(--#{$prefix}#{$color}-100-rgb), var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null);
+    }
+  }
 }

package/dist/types/components/banking/DPermissionGroup.d.ts

@@ -1,11 +0,0 @@
-import { PermissionItemType } from './interface';
-type Props = {
-    title: string;
-    description: string;
-    permissionState: string;
-    permissionList: Array<PermissionItemType>;
-    onChangePermission: (permission: PermissionItemType, checked: boolean) => void;
-    onCustomAction?: (permission: PermissionItemType) => void;
-};
-export default function DPermissionGroup({ title, description, permissionState, permissionList, onChangePermission, onCustomAction, }: Props): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/types/components/banking/DPermissionItem.d.ts

@@ -1,9 +0,0 @@
-import { PermissionItemType } from './interface';
-type Props = {
-    permission: PermissionItemType;
-    permissionState: string;
-    onChange: (isChecked: boolean) => void;
-    onAction?: () => void;
-};
-export default function DPermissionItem({ permission, permissionState, onChange, onAction, }: Props): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/types/components/banking/DSummaryCard.d.ts

@@ -1,12 +0,0 @@
-import { Trans } from 'react-i18next';
-import { ReactElement } from 'react';
-type Props = {
-    title: string;
-    description: string;
-    icon: string;
-    iconSize: string;
-    iconTheme: string;
-    Summary: ReactElement<typeof Trans> | string;
-};
-export default function DSummaryCard({ title, description, icon, iconSize, iconTheme, Summary, }: Props): import("react/jsx-runtime").JSX.Element;
-export {};

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

@@ -1,3 +0,0 @@
-export { default as DPermissionGroup } from './DPermissionGroup';
-export { default as DPermissionItem } from './DPermissionItem';
-export { default as DSummaryCard } from './DSummaryCard';

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

@@ -1,7 +0,0 @@
-export type PermissionItemType = {
-    id: string;
-    enabled: boolean;
-    label: string;
-    type: string;
-    value: unknown;
-};

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

@@ -1,26 +0,0 @@
-.badge {
-  --#{$prefix}badge-bg: #{$badge-bg};
-  --#{$prefix}badge-dot-height: #{$badge-dot-height};
-
-  display: inline-block;
-  background-color: var(--#{$prefix}badge-bg);
-
-  @each $theme, $value in $theme-colors {
-    $color: color-contrast-var($value);
-    &.badge-#{$theme} {
-      --#{$prefix}badge-color: #{$color};
-      --#{$prefix}badge-bg: var(--#{$prefix}#{$theme});
-    }
-  }
-
-  &.badge-dot {
-    min-width: var(--#{$prefix}badge-dot-height);
-    height: var(--#{$prefix}badge-dot-height);
-    padding: 0;
-    border-radius: var(--#{$prefix}badge-border-radius);
-
-    > span {
-      vertical-align: middle;
-    }
-  }
-}

package/src/style/components/_d-permission-group.scss

@@ -1,39 +0,0 @@
-.operation-group {
-  &:not(:last-child) {
-    border-bottom: 1px solid var(--#{$prefix}gray-300);
-  }
-}
-
-.permission-item {
-  padding: 8px 0;
-  .form-switch-box {
-    width: auto;
-  }
-  .label {
-    font-size: .875rem;
-  }
-  &:hover {
-    background: #f7f7ff;
-  }
-  &:not(:last-child) {
-    border-bottom: 1px solid var(--#{$prefix}gray-300);
-  }
-}
-
-@media screen and (min-width: 768px) {
-  .permission-item {
-    padding: 8px 10px;
-  }
-  .permission-item .label {
-    font-size: 1rem;
-  }
-}
-
-@media screen and (min-width: 992px) {
-  .operation-group  {
-    border-top: 1px solid var(--#{$prefix}gray-300);
-    &:not(:last-child) {
-      border-bottom: none;
-    }
-  }
-}