@dynamic-framework/ui-react 1.5.0 → 1.7.0

package/src/style/base/_root.scss

@@ -0,0 +1,248 @@
+:root,
+[data-bs-theme="dynamic"] {
+  // Note: Custom variable values only support SassScript inside `#{}`.
+
+  // Colors
+  //
+  // Generate palettes for full colors, grays, and theme colors.
+
+  // custom
+  @each $color, $value in $colors {
+    --#{$prefix}#{$color}-rgb: #{to-rgb($value)};
+  }
+  // end custom
+
+  @each $color, $value in $grays {
+    // custom
+    --#{$prefix}gray-#{$color}-rgb: #{to-rgb($value)};
+    // end custom
+  }
+
+  @each $color, $value in $bg-soft-colors {
+    --#{$prefix}#{$color}-rgb: #{to-rgb($value)};
+  }
+
+  @each $color, $value in $theme-colors-palletes {
+    @if str-index($color, "-500") {
+      $base-color-name: str-slice($color, 1, str-index($color, "-500") - 1);
+      --#{$prefix}#{$color}-rgb: var(--#{$prefix}#{$base-color-name}-rgb);
+    } @else {
+      --#{$prefix}#{$color}-rgb: #{to-rgb($value)};
+    }
+  }
+
+  @each $color, $value in $colors {
+    // custom
+    --#{$prefix}#{$color}: rgb(var(--#{$prefix}#{$color}-rgb));
+    // end custom
+  }
+
+  // custom
+  @each $color, $value in $grays {
+    --#{$prefix}gray-#{$color}: rgb(var(--#{$prefix}gray-#{$color}-rgb));
+  }
+
+  @each $color, $value in $bg-soft-colors {
+    --#{$prefix}#{$color}: rgb(var(--#{$prefix}#{$color}-rgb));
+  }
+  // end custom
+
+  @each $color, $value in $theme-colors {
+    // custom
+    --#{$prefix}#{$color}: rgb(var(--#{$prefix}#{$color}-rgb));
+    // end custom
+  }
+
+  // custom
+  // original $theme-colors-rgb
+  @each $color, $value in $theme-colors-mapping {
+    --#{$prefix}#{$color}-rgb: var(--#{$prefix}#{$value}-rgb);
+  }
+  // end custom
+
+  // custom
+  @each $color, $value in $theme-colors-palletes {
+    --#{$prefix}#{$color}: rgb(var(--#{$prefix}#{$color}-rgb));
+  }
+  // end custom
+
+  @each $color, $value in $theme-colors-text {
+    --#{$prefix}#{$color}-text-emphasis: #{$value};
+  }
+
+  @each $color, $value in $theme-colors-bg-subtle {
+    --#{$prefix}#{$color}-bg-subtle: #{$value};
+  }
+
+  @each $color, $value in $theme-colors-border-subtle {
+    --#{$prefix}#{$color}-border-subtle: #{$value};
+  }
+
+  // Fonts
+
+  // Note: Use `inspect` for lists so that quoted items keep the quotes.
+  // See https://github.com/sass/sass/issues/2383#issuecomment-336349172
+  --#{$prefix}font-sans-serif: #{inspect($font-family-sans-serif)};
+  --#{$prefix}font-monospace: #{inspect($font-family-monospace)};
+  --#{$prefix}gradient: #{$gradient};
+
+  // Root and body
+  // scss-docs-start root-body-variables
+  @if $font-size-root != null {
+    --#{$prefix}root-font-size: #{$font-size-root};
+  }
+  --#{$prefix}body-font-family: #{inspect($font-family-base)};
+  @include rfs($font-size-base, --#{$prefix}body-font-size);
+  --#{$prefix}body-font-weight: #{$font-weight-base};
+  --#{$prefix}body-line-height: #{$line-height-base};
+  @if $body-text-align != null {
+    --#{$prefix}body-text-align: #{$body-text-align};
+  }
+
+  --#{$prefix}body-color: rgb(var(--#{$prefix}body-color-rgb));
+  --#{$prefix}body-color-rgb: var(--#{$prefix}#{$body-color-mapping}-rgb);
+  --#{$prefix}body-bg: rgb(var(--#{$prefix}body-bg-rgb));
+  --#{$prefix}body-bg-rgb: var(--#{$prefix}#{$body-bg-mapping}-rgb);
+
+  --#{$prefix}emphasis-color: rgb(var(--#{$prefix}emphasis-color-rgb));
+  --#{$prefix}emphasis-color-rgb: #{$body-emphasis-color};
+
+  --#{$prefix}secondary-color: rgba(var(--#{$prefix}secondary-color-rgb), .75);
+  --#{$prefix}secondary-color-rgb: #{$body-secondary-color};
+  --#{$prefix}secondary-bg: rgb(var(--#{$prefix}secondary-bg-rgb));
+  --#{$prefix}secondary-bg-rgb: #{$body-secondary-bg};
+
+  --#{$prefix}tertiary-color: rgba(var(--#{$prefix}tertiary-color-rgb), .5);
+  --#{$prefix}tertiary-color-rgb: #{$body-tertiary-color};
+  --#{$prefix}tertiary-bg: rgb(var(--#{$prefix}tertiary-bg-rgb));
+  --#{$prefix}tertiary-bg-rgb: #{$body-tertiary-bg};
+  // scss-docs-end root-body-variables
+
+  --#{$prefix}heading-color: #{$headings-color};
+
+  --#{$prefix}link-color: rgb(var(--#{$prefix}link-color-rgb));
+  --#{$prefix}link-color-rgb: var(--#{$prefix}#{$link-color-mapping});
+  --#{$prefix}link-decoration: #{$link-decoration};
+
+  --#{$prefix}link-hover-color: rgb(var(--#{$prefix}link-hover-color-rgb));
+  --#{$prefix}link-hover-color-rgb: var(--#{$prefix}#{$link-hover-color-mapping});
+
+  @if $link-hover-decoration != null {
+    --#{$prefix}link-hover-decoration: #{$link-hover-decoration};
+  }
+
+  --#{$prefix}code-color: rgb(var(--#{$prefix}code-color-rgb));
+  --#{$prefix}code-color-rgb: var(--#{$prefix}#{$code-color-mapping}-rgb);
+  --#{$prefix}highlight-bg: #{$mark-bg};
+
+  // scss-docs-start root-border-var
+  --#{$prefix}border-width: #{$border-width};
+  --#{$prefix}border-style: #{$border-style};
+  --#{$prefix}border-color: #{$border-color};
+  --#{$prefix}border-color-translucent: #{$border-color-translucent};
+
+  --#{$prefix}border-radius: #{$border-radius};
+  --#{$prefix}border-radius-sm: #{$border-radius-sm};
+  --#{$prefix}border-radius-lg: #{$border-radius-lg};
+  --#{$prefix}border-radius-xl: #{$border-radius-xl};
+  --#{$prefix}border-radius-xxl: #{$border-radius-xxl};
+  --#{$prefix}border-radius-2xl: var(--#{$prefix}border-radius-xxl); // Deprecated in v5.3.0 for consistency
+  --#{$prefix}border-radius-pill: #{$border-radius-pill};
+  // scss-docs-end root-border-var
+
+  --#{$prefix}box-shadow: #{$box-shadow};
+  --#{$prefix}box-shadow-sm: #{$box-shadow-sm};
+  --#{$prefix}box-shadow-lg: #{$box-shadow-lg};
+  --#{$prefix}box-shadow-inset: #{$box-shadow-inset};
+
+  // Focus styles
+  // scss-docs-start root-focus-variables
+  --#{$prefix}focus-ring-width: #{$focus-ring-width};
+  --#{$prefix}focus-ring-opacity: #{$focus-ring-opacity};
+  --#{$prefix}focus-ring-color: rgba(var(--#{$prefix}#{$focus-ring-color-mapping}), var(--#{$prefix}focus-ring-opacity));
+  // scss-docs-end root-focus-variables
+
+  // scss-docs-start root-form-validation-variables
+  --#{$prefix}form-valid-color: #{$form-valid-color};
+  --#{$prefix}form-valid-border-color: #{$form-valid-border-color};
+  --#{$prefix}form-invalid-color: #{$form-invalid-color};
+  --#{$prefix}form-invalid-border-color: #{$form-invalid-border-color};
+  // scss-docs-end root-form-validation-variables
+
+  // only reference root variables
+
+  @each $level, $value in $spacers {
+    --#{$prefix}ref-spacer-#{$level}: #{$value};
+  }
+
+  @each $level, $value in $display-font-sizes {
+    --#{$prefix}ref-display-#{$level}: #{$value};
+  }
+  @each $level, $value in $font-sizes {
+    --#{$prefix}ref-fs-#{$level}: #{$value};
+  }
+  --#{$prefix}ref-fs-small: #{$small-font-size};
+
+  --#{$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};
+}
+
+@if $enable-dark-mode {
+  @include color-mode(dark, true) {
+    color-scheme: dark;
+
+    // scss-docs-start root-dark-mode-vars
+    --#{$prefix}body-color: #{$body-color-dark};
+    --#{$prefix}body-color-rgb: #{to-rgb($body-color-dark)};
+    --#{$prefix}body-bg: #{$body-bg-dark};
+    --#{$prefix}body-bg-rgb: #{to-rgb($body-bg-dark)};
+
+    --#{$prefix}emphasis-color: #{$body-emphasis-color-dark};
+    --#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color-dark)};
+
+    --#{$prefix}secondary-color: #{$body-secondary-color-dark};
+    --#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color-dark)};
+    --#{$prefix}secondary-bg: #{$body-secondary-bg-dark};
+    --#{$prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg-dark)};
+
+    --#{$prefix}tertiary-color: #{$body-tertiary-color-dark};
+    --#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color-dark)};
+    --#{$prefix}tertiary-bg: #{$body-tertiary-bg-dark};
+    --#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg-dark)};
+
+    @each $color, $value in $theme-colors-text-dark {
+      --#{$prefix}#{$color}-text-emphasis: #{$value};
+    }
+
+    @each $color, $value in $theme-colors-bg-subtle-dark {
+      --#{$prefix}#{$color}-bg-subtle: #{$value};
+    }
+
+    @each $color, $value in $theme-colors-border-subtle-dark {
+      --#{$prefix}#{$color}-border-subtle: #{$value};
+    }
+
+    --#{$prefix}heading-color: #{$headings-color-dark};
+
+    --#{$prefix}link-color: #{$link-color-dark};
+    --#{$prefix}link-hover-color: #{$link-hover-color-dark};
+    --#{$prefix}link-color-rgb: #{to-rgb($link-color-dark)};
+    --#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color-dark)};
+
+    --#{$prefix}code-color: #{$code-color-dark};
+
+    --#{$prefix}border-color: #{$border-color-dark};
+    --#{$prefix}border-color-translucent: #{$border-color-translucent-dark};
+
+    --#{$prefix}form-valid-color: #{$form-valid-color-dark};
+    --#{$prefix}form-valid-border-color: #{$form-valid-border-color-dark};
+    --#{$prefix}form-invalid-color: #{$form-invalid-color-dark};
+    --#{$prefix}form-invalid-border-color: #{$form-invalid-border-color-dark};
+    // scss-docs-end root-dark-mode-vars
+  }
+}
+

package/src/style/base/_tables.scss

@@ -0,0 +1,171 @@
+//
+// Basic Bootstrap table
+//
+
+.table {
+  // Reset needed for nesting tables
+  --#{$prefix}table-color-type: initial;
+  --#{$prefix}table-bg-type: initial;
+  --#{$prefix}table-color-state: initial;
+  --#{$prefix}table-bg-state: initial;
+  // End of reset
+  --#{$prefix}table-color: #{$table-color};
+  --#{$prefix}table-bg: #{$table-bg};
+  --#{$prefix}table-border-color: #{$table-border-color};
+  --#{$prefix}table-accent-bg: #{$table-accent-bg};
+  --#{$prefix}table-striped-color: #{$table-striped-color};
+  --#{$prefix}table-striped-bg: #{$table-striped-bg};
+  --#{$prefix}table-active-color: #{$table-active-color};
+  --#{$prefix}table-active-bg: #{$table-active-bg};
+  --#{$prefix}table-hover-color: #{$table-hover-color};
+  --#{$prefix}table-hover-bg: #{$table-hover-bg};
+
+  width: 100%;
+  margin-bottom: var(--#{$prefix}ref-spacer-3);
+  vertical-align: $table-cell-vertical-align;
+  border-color: var(--#{$prefix}table-border-color);
+
+  // Target th & td
+  // We need the child combinator to prevent styles leaking to nested tables which doesn't have a `.table` class.
+  // We use the universal selectors here to simplify the selector (else we would need 6 different selectors).
+  // Another advantage is that this generates less code and makes the selector less specific making it easier to override.
+  // stylelint-disable-next-line selector-max-universal
+  > :not(caption) > * > * {
+    padding: $table-cell-padding-y $table-cell-padding-x;
+    // Following the precept of cascades: https://codepen.io/miriamsuzanne/full/vYNgodb
+    color: var(--#{$prefix}table-color-state, var(--#{$prefix}table-color-type, var(--#{$prefix}table-color)));
+    background-color: var(--#{$prefix}table-bg);
+    border-bottom-width: $table-border-width;
+    box-shadow: inset 0 0 0 9999px var(--#{$prefix}table-bg-state, var(--#{$prefix}table-bg-type, var(--#{$prefix}table-accent-bg)));
+  }
+
+  > tbody {
+    vertical-align: inherit;
+  }
+
+  > thead {
+    vertical-align: bottom;
+  }
+}
+
+.table-group-divider {
+  border-top: calc(#{$table-border-width} * 2) solid $table-group-separator-color;
+}
+
+//
+// Change placement of captions with a class
+//
+
+.caption-top {
+  caption-side: top;
+}
+
+
+//
+// Condensed table w/ half padding
+//
+
+.table-sm {
+  // stylelint-disable-next-line selector-max-universal
+  > :not(caption) > * > * {
+    padding: $table-cell-padding-y-sm $table-cell-padding-x-sm;
+  }
+}
+
+
+// Border versions
+//
+// Add or remove borders all around the table and between all the columns.
+//
+// When borders are added on all sides of the cells, the corners can render odd when
+// these borders do not have the same color or if they are semi-transparent.
+// Therefor we add top and border bottoms to the `tr`s and left and right borders
+// to the `td`s or `th`s
+
+.table-bordered {
+  > :not(caption) > * {
+    border-width: $table-border-width 0;
+
+    // stylelint-disable-next-line selector-max-universal
+    > * {
+      border-width: 0 $table-border-width;
+    }
+  }
+}
+
+.table-borderless {
+  // stylelint-disable-next-line selector-max-universal
+  > :not(caption) > * > * {
+    border-bottom-width: 0;
+  }
+
+  > :not(:first-child) {
+    border-top-width: 0;
+  }
+}
+
+// Zebra-striping
+//
+// Default zebra-stripe styles (alternating gray and transparent backgrounds)
+
+// For rows
+.table-striped {
+  > tbody > tr:nth-of-type(#{$table-striped-order}) > * {
+    --#{$prefix}table-color-type: var(--#{$prefix}table-striped-color);
+    --#{$prefix}table-bg-type: var(--#{$prefix}table-striped-bg);
+  }
+}
+
+// For columns
+.table-striped-columns {
+  > :not(caption) > tr > :nth-child(#{$table-striped-columns-order}) {
+    --#{$prefix}table-color-type: var(--#{$prefix}table-striped-color);
+    --#{$prefix}table-bg-type: var(--#{$prefix}table-striped-bg);
+  }
+}
+
+// Active table
+//
+// The `.table-active` class can be added to highlight rows or cells
+
+.table-active {
+  --#{$prefix}table-color-state: var(--#{$prefix}table-active-color);
+  --#{$prefix}table-bg-state: var(--#{$prefix}table-active-bg);
+}
+
+// Hover effect
+//
+// Placed here since it has to come after the potential zebra striping
+
+.table-hover {
+  > tbody > tr:hover > * {
+    --#{$prefix}table-color-state: var(--#{$prefix}table-hover-color);
+    --#{$prefix}table-bg-state: var(--#{$prefix}table-hover-bg);
+  }
+}
+
+
+// Table variants
+//
+// Table variants set the table cell backgrounds, border colors
+// and the colors of the striped, hovered & active tables
+
+@each $color, $value in $table-variants {
+  @include df-table-variant($color, $value);
+}
+
+// Responsive tables
+//
+// Generate series of `.table-responsive-*` classes for configuring the screen
+// size of where your table will overflow.
+
+@each $breakpoint in map-keys($grid-breakpoints) {
+  $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+  @include media-breakpoint-down($breakpoint) {
+    .table-responsive#{$infix} {
+      overflow-x: auto;
+      -webkit-overflow-scrolling: touch;
+    }
+  }
+}

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

@@ -1,3 +1,47 @@
+@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";
@@ -7,7 +51,8 @@
 @import "d-popover";
 @import "d-box-file";
 @import "d-carousel";
-@import "d-stepper";
+@import "d-stepper-desktop";
+@import "d-stepper-mobile";
 @import "d-paginator";
 @import "d-card-account";
 

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

@@ -0,0 +1,45 @@
+.alert {
+  --#{$prefix}alert-gap: #{$alert-gap};
+  --#{$prefix}alert-box-shadow: #{$alert-box-shadow};
+  --#{$prefix}alert-icon-color: var(--#{$prefix}alert-component-icon-color, var(--#{$prefix}alert-color));
+  --#{$prefix}alert-separator-opacity: var(--#{$prefix}alert-component-separator-opacity);
+
+  display: flex;
+  flex-direction: row;
+  gap: var(--#{$prefix}alert-gap);
+  align-items: center;
+  box-shadow: var(--#{$prefix}alert-box-shadow);
+
+  .alert-text {
+    flex-grow: 1;
+  }
+
+  .alert-separator {
+    align-self: stretch;
+    width: 1px;
+    background-color: var(--#{$prefix}alert-icon-color);
+    opacity: var(--#{$prefix}alert-separator-opacity);
+  }
+
+  .btn-close {
+    --#{$prefix}btn-close-bg: transparent;
+  }
+
+  .alert-icon .d-icon {
+    --#{$prefix}icon-color: var(--#{$prefix}alert-icon-color);
+  }
+
+  .alert-close-icon {
+    --#{$prefix}icon-color: var(--#{$prefix}alert-icon-color);
+  }
+
+  @each $theme, $value in $theme-colors {
+    $color: color-contrast-var($value);
+    &.alert-#{$theme} {
+      --#{$prefix}alert-color: #{$color};
+      --#{$prefix}alert-bg: var(--#{$prefix}#{$theme});
+      --#{$prefix}alert-border-color: var(--#{$prefix}#{$theme});
+      --#{$prefix}alert-link-color: #{$color};
+    }
+  }
+}

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

@@ -0,0 +1,26 @@
+.badge {
+  --#{$prefix}badge-bg: #{$badge-bg};
+  --#{$prefix}badge-dot-height: #{$badge-dot-height};
+
+  display: 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;
+    }
+  }
+}