@dynamic-framework/ui-react 1.36.2 → 2.0.0-dev.10

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

@@ -0,0 +1,108 @@
+.d-timeline {
+  --#{$prefix}timeline-conector-size: 2px;
+  --#{$prefix}timeline-conector-bg: var(--#{$prefix}gray-100);
+  --#{$prefix}timeline-icon-size: 1rem;
+  --#{$prefix}timeline-icon-padding: .25rem;
+  --#{$prefix}timeline-icon-color: var(--#{$prefix}gray-600);
+  --#{$prefix}timeline-description-color: var(--#{$prefix}gray-400);
+  --#{$prefix}timeline-icon-bg: var(--#{$prefix}white);
+  position: relative;
+
+  display: flex;
+  flex-direction: column;
+
+  .d-timeline-item {
+    position: relative;
+    display: flex;
+    padding-bottom: 2rem;
+
+    .d-timeline-item-connector {
+      position: absolute;
+      top: .5rem;
+      left: .5rem;
+      width: var(--#{$prefix}timeline-conector-size);
+      height: 100%;
+      background-color: var(--#{$prefix}timeline-conector-bg);
+    }
+
+    .d-timeline-item-icon {
+      position: absolute;
+      top: 0;
+      left: calc(var(--#{$prefix}timeline-icon-size) / 2);
+      z-index: 1;
+      box-sizing: content-box;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: var(--#{$prefix}timeline-icon-size);
+      height: var(--#{$prefix}timeline-icon-size);
+      padding: var(--#{$prefix}timeline-icon-padding);
+      line-height: 1;
+      color: var(--#{$prefix}timeline-icon-color);
+      background-color: var(--#{$prefix}timeline-icon-bg);
+      border: 1px solid rgba(0, 0, 0, .1);
+      border-radius: 50%;
+      transform: translateX(-50%);
+    }
+
+    &:last-child .d-timeline-item-connector {
+      display: none;
+    }
+
+    .d-timeline-item-content {
+      padding-left: 2rem;
+    }
+
+    .d-timeline-item-title {
+      margin-bottom: .25rem;
+      font-weight: 600;
+    }
+
+    .d-timeline-item-description {
+      margin-bottom: .5rem;
+      color: var(--#{$prefix}timeline-description-color);
+    }
+
+    .d-timeline-item-time {
+      font-size: .875rem;
+      color: #999;
+    }
+
+    &.d-timeline-item-success {
+      .d-timeline-item-icon {
+        color: var(--#{$prefix}white);
+        background-color: var(--#{$prefix}success-500);
+      }
+    }
+    &.d-timeline-item-danger {
+      .d-timeline-item-icon {
+        color: var(--#{$prefix}white);
+        background-color: var(--#{$prefix}danger-500);
+      }
+    }
+    &.d-timeline-item-warning {
+      .d-timeline-item-icon {
+        color: var(--#{$prefix}white);
+        background-color: var(--#{$prefix}warning-500);
+      }
+    }
+    &.d-timeline-item-primary {
+      .d-timeline-item-icon {
+        color: var(--#{$prefix}white);
+        background-color: var(--#{$prefix}primary-500);
+      }
+    }
+    &.d-timeline-item-info {
+      .d-timeline-item-icon {
+        color: var(--#{$prefix}white);
+        background-color: var(--#{$prefix}info-500);
+      }
+    }
+    &.d-timeline-item-secondary {
+      .d-timeline-item-icon {
+        color: var(--#{$prefix}white);
+        background-color: var(--#{$prefix}secondary-500);
+      }
+    }
+  }
+}

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

@@ -0,0 +1,29 @@
+.d-voucher {
+  --#{$prefix}voucher-header-gap: var(--#{$prefix}ref-spacer-4);
+  --#{$prefix}voucher-amount-padding: var(--#{$prefix}ref-spacer-4);
+  --#{$prefix}voucher-amount-background: var(--#{$prefix}secondary-50);
+  --#{$prefix}voucher-amount-rounded: var(--#{$prefix}ref-spacer-4);
+  --#{$prefix}voucher-footer-gap: var(--#{$prefix}ref-spacer-4);
+  --#{$prefix}voucher-margin: 0 0 var(--#{$prefix}ref-spacer-4) 0;
+}
+
+.d-voucher-header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--#{$prefix}voucher-header-gap);
+  align-items: center;
+  justify-content: center;
+  margin: var(--#{$prefix}voucher-margin);
+}
+
+.d-voucher-amount {
+  padding: var(--#{$prefix}voucher-amount-padding);
+  background: var(--#{$prefix}voucher-amount-background);
+  border-radius: var(--#{$prefix}voucher-amount-rounded);
+}
+
+.d-voucher-footer {
+  display: flex;
+  gap: var(--#{$prefix}voucher-footer-gap);
+  justify-content: flex-start;
+}

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

@@ -1,8 +1,18 @@
 // All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251
 @each $color, $value in map-merge-multiple($theme-colors-palettes, $theme-colors, $palette-grays, ("gray": map-get($colors, "gray"))) {
-  .text-bg-#{$color} {
-    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);
+  @if ($color == "secondary") {
+    .text-bg-secondary {
+      color: var(--#{$prefix}secondary-700);
+      background: var(--#{$prefix}secondary-50);
+    }
+  } @else {
+    .text-bg-#{$color} {
+      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);
+    }
+  }
+  .hover-bg-#{$color}:hover {
+    background-color: var(--#{$prefix}#{$color}) if($enable-important-utilities, !important, null);
   }
 }
 

package/src/style/root/_root.scss

@@ -18,14 +18,6 @@
     // end custom
   }
 
-  @each $color, $value in $bg-surface-colors {
-    --#{$prefix}#{$color}-rgb: #{$value};
-  }
-
-  @each $color, $value in $bg-soft-colors {
-    --#{$prefix}#{$color}-rgb: #{$value};
-  }
-
   @each $color, $value in $theme-colors-palettes {
     @if str-index($color, "-500") {
       $base-color-name: str-slice($color, 1, str-index($color, "-500") - 1);
@@ -46,13 +38,6 @@
     --#{$prefix}gray-#{$color}: rgb(var(--#{$prefix}gray-#{$color}-rgb));
   }
 
-  @each $color, $value in $bg-surface-colors {
-    --#{$prefix}#{$color}: rgb(var(--#{$prefix}#{$color}-rgb));
-  }
-
-  @each $color, $value in $bg-soft-colors {
-    --#{$prefix}#{$color}: rgb(var(--#{$prefix}#{$color}-rgb));
-  }
   // end custom
 
   @each $color, $value in $theme-colors {
@@ -78,6 +63,17 @@
     --#{$prefix}#{$color}-text-emphasis: #{$value};
   }
 
+  $theme-colors-bg-subtle: (
+    "primary": $primary-bg-subtle,
+    "secondary": $secondary-bg-subtle,
+    "success": $green-25,
+    "info": $blue-25,
+    "warning": $yellow-25,
+    "danger": $red-25,
+    "light": $light-bg-subtle,
+    "dark": $dark-bg-subtle,
+  );
+
   @each $color, $value in $theme-colors-bg-subtle {
     --#{$prefix}#{$color}-bg-subtle: #{$value};
   }
@@ -110,7 +106,9 @@
   --#{$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);
+
+  // WIP: se convierte el hex a rgb
+  --#{$prefix}body-bg-rgb: #{to-rgb($body-bg)};
 
   --#{$prefix}emphasis-color: rgb(var(--#{$prefix}emphasis-color-rgb));
   --#{$prefix}emphasis-color-rgb: #{$body-emphasis-color};
@@ -223,79 +221,104 @@
   --#{$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}gray-100),
-        $default-text-color: color-contrast-var(map-get($all-colors, gray-100)),
-        $hover-color: var(--#{$prefix}gray-200),
-        $hover-text-color: color-contrast-var(map-get($all-colors, gray-200)),
-        $focus-color: var(--#{$prefix}gray-200),
-        $focus-text-color: color-contrast-var(map-get($all-colors, gray-200)),
-        $active-color: var(--#{$prefix}gray-300),
-        $active-text-color: color-contrast-var(map-get($all-colors, gray-300)),
-        $focus-shadow-rgb: var(--#{$prefix}gray-100-rgb),
-      );
-      @include df-button-outline-variant-variables(
-        "light",
-        $default-color: var(--#{$prefix}gray-100),
-        $hover-bg-color: var(--#{$prefix}gray-200),
-        $hover-text-color: color-contrast-var(map-get($all-colors, gray-200)),
-        $focus-bg-color: var(--#{$prefix}gray-200),
-        $focus-text-color: color-contrast-var(map-get($all-colors, gray-200)),
-        $active-bg-color: var(--#{$prefix}gray-300),
-        $active-text-color: color-contrast-var(map-get($all-colors, gray-300)),
-        $focus-shadow-rgb: var(--#{$prefix}gray-100-rgb),
-      );
-      @include df-button-link-variant-variables(
-        "light",
-        $default-color: var(--#{$prefix}gray-100),
-        $hover-text-color: var(--#{$prefix}gray-200),
-        $focus-text-color: var(--#{$prefix}gray-200),
-        $active-text-color: color-contrast-var(map-get($all-colors, gray-300)),
-        $active-bg-color: var(--#{$prefix}gray-300),
-        $focus-shadow-rgb: var(--#{$prefix}gray-100-rgb),
-      );
-    } @else if $color == "dark" {
-      @include df-button-variant-variables(
-        "dark",
-        $default-color: var(--#{$prefix}gray-900),
-        $default-text-color: color-contrast-var(map-get($all-colors, gray-900)),
-        $hover-color: var(--#{$prefix}gray-800),
-        $hover-text-color: color-contrast-var(map-get($all-colors, gray-800)),
-        $focus-color: var(--#{$prefix}gray-800),
-        $focus-text-color: color-contrast-var(map-get($all-colors, gray-800)),
-        $active-color: var(--#{$prefix}gray-700),
-        $active-text-color: color-contrast-var(map-get($all-colors, gray-700)),
-        $focus-shadow-rgb: var(--#{$prefix}gray-900-rgb),
-      );
-      @include df-button-outline-variant-variables(
-        "dark",
-        $default-color: var(--#{$prefix}gray-900),
-        $hover-bg-color: var(--#{$prefix}gray-800),
-        $hover-text-color: color-contrast-var(map-get($all-colors, gray-800)),
-        $focus-bg-color: var(--#{$prefix}gray-800),
-        $focus-text-color: color-contrast-var(map-get($all-colors, gray-800)),
-        $active-bg-color: var(--#{$prefix}gray-700),
-        $active-text-color: color-contrast-var(map-get($all-colors, gray-700)),
-        $focus-shadow-rgb: var(--#{$prefix}gray-900-rgb),
-      );
-      @include df-button-link-variant-variables(
-        "dark",
-        $default-color: var(--#{$prefix}gray-900),
-        $hover-text-color: var(--#{$prefix}gray-800),
-        $focus-text-color: var(--#{$prefix}gray-800),
-        $active-text-color: color-contrast-var(map-get($all-colors, gray-700)),
-        $active-bg-color: var(--#{$prefix}gray-700),
-        $focus-shadow-rgb: var(--#{$prefix}gray-900-rgb),
-      );
-    } @else {
-      @include df-button-variant-variables($color);
-      @include df-button-outline-variant-variables($color);
-      @include df-button-link-variant-variables($color);
+    @if not map-has-key($theme-colors-extra, $color) {
+      @if $color == "light" {
+        @include df-button-variant-variables(
+          "light",
+          $default-color: var(--#{$prefix}gray-25),
+          $default-text-color: color-contrast-var(map-get($all-colors, gray-100)),
+          $hover-color: var(--#{$prefix}gray-50),
+          $hover-text-color: color-contrast-var(map-get($all-colors, gray-200)),
+          $focus-color: var(--#{$prefix}gray-200),
+          $focus-text-color: color-contrast-var(map-get($all-colors, gray-200)),
+          $active-color: var(--#{$prefix}gray-300),
+          $active-text-color: color-contrast-var(map-get($all-colors, gray-300)),
+          $focus-shadow-rgb: var(--#{$prefix}gray-100-rgb),
+        );
+        @include df-button-outline-variant-variables(
+          "light",
+          $default-color: var(--#{$prefix}gray-100),
+          $hover-color: var(--#{$prefix}gray-200),
+          $focus-color: var(--#{$prefix}gray-200),
+          $active-color: var(--#{$prefix}gray-300),
+          $focus-shadow-rgb: var(--#{$prefix}gray-100-rgb),
+        );
+        @include df-button-link-variant-variables(
+          "light",
+          $default-color: var(--#{$prefix}gray-100),
+          $hover-text-color: var(--#{$prefix}gray-200),
+          $focus-text-color: var(--#{$prefix}gray-200),
+          $active-text-color: color-contrast-var(map-get($all-colors, gray-300)),
+          $active-bg-color: var(--#{$prefix}gray-300),
+          $focus-shadow-rgb: var(--#{$prefix}gray-100-rgb),
+        );
+      } @else if $color == "dark" {
+        @include df-button-variant-variables(
+          "dark",
+          $default-color: var(--#{$prefix}gray-900),
+          $default-text-color: color-contrast-var(map-get($all-colors, gray-900)),
+          $hover-color: var(--#{$prefix}gray-800),
+          $hover-text-color: color-contrast-var(map-get($all-colors, gray-800)),
+          $focus-color: var(--#{$prefix}gray-800),
+          $focus-text-color: color-contrast-var(map-get($all-colors, gray-800)),
+          $active-color: var(--#{$prefix}gray-700),
+          $active-text-color: color-contrast-var(map-get($all-colors, gray-700)),
+          $focus-shadow-rgb: var(--#{$prefix}gray-900-rgb),
+        );
+        @include df-button-outline-variant-variables(
+          "dark",
+          $default-color: var(--#{$prefix}gray-900),
+          $hover-color: var(--#{$prefix}gray-800),
+          $focus-color: var(--#{$prefix}gray-800),
+          $active-color: var(--#{$prefix}gray-700),
+          $focus-shadow-rgb: var(--#{$prefix}gray-900-rgb),
+        );
+        @include df-button-link-variant-variables(
+          "dark",
+          $default-color: var(--#{$prefix}gray-900),
+          $hover-text-color: var(--#{$prefix}gray-800),
+          $focus-text-color: var(--#{$prefix}gray-800),
+          $active-text-color: color-contrast-var(map-get($all-colors, gray-700)),
+          $active-bg-color: var(--#{$prefix}gray-700),
+          $focus-shadow-rgb: var(--#{$prefix}gray-900-rgb),
+        );
+
+      } @else if $color == "secondary" {
+        @include df-button-variant-variables(
+          "secondary",
+          $default-color: var(--#{$prefix}secondary-50),
+          $default-text-color: var(--#{$prefix}secondary-700),
+          $hover-color: var(--#{$prefix}secondary-100),
+          $hover-text-color: var(--#{$prefix}secondary-700),
+          $focus-color: var(--#{$prefix}secondary-100),
+          $focus-text-color: var(--#{$prefix}secondary-700),
+          $active-color: var(--#{$prefix}secondary-100),
+          $active-text-color: var(--#{$prefix}secondary-700),
+          $focus-shadow-rgb: var(--#{$prefix}secondary-100-rgb),
+        );
+        @include df-button-outline-variant-variables(
+          "secondary",
+          $default-color: var(--#{$prefix}secondary-500),
+          $default-border-color: var(--#{$prefix}secondary-200),
+          $hover-color: var(--#{$prefix}secondary-700),
+          $hover-border-color: var(--#{$prefix}secondary-400),
+          $focus-color: var(--#{$prefix}secondary-700),
+          $active-color: var(--#{$prefix}secondary-700),
+          $active-border-color: var(--#{$prefix}secondary-600),
+        );
+        @include df-button-link-variant-variables(
+          "secondary",
+          $active-bg-color: var(--#{$prefix}secondary-100),
+        );
+      } @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};