@carbon/ibm-products 2.43.2-canary.102 → 2.43.2-canary.104

package/scss/components/ConditionBuilder/styles/_conditionBuilderItem.scss

@@ -1,4 +1,5 @@
 @use 'sass:list';
+@use 'sass:math';
 @use 'sass:string';
 @use '@carbon/react/scss/theme' as *;
 @use '../../../global/styles/project-settings' as c4p-settings;
@@ -167,21 +168,11 @@ $block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
 }
 //need to revamp to a simpler logic
 $colors: (
-  ($purple-70, $purple-60, $purple-50, $purple-40, $purple-30, $purple-20),
-  ($cyan-70, $cyan-60, $cyan-50, $cyan-40, $cyan-30, $cyan-20),
-  ($teal-70, $teal-60, $teal-50, $teal-40, $teal-30, $teal-20),
-  (
-    $magenta-70,
-    $magenta-60,
-    $magenta-50,
-    $magenta-40,
-    $magenta-30,
-    $magenta-20
-  ),
-  ($red-70, $red-60, $red-50, $red-40, $red-30, $red-20),
-  ($orange-70, $orange-60, $orange-50, $orange-40, $orange-30, $orange-20),
-  ($yellow-70, $yellow-60, $yellow-50, $yellow-40, $yellow-30, $yellow-20),
-  ($green-70, $green-60, $green-50, $green-40, $green-30, $green-20)
+  ($purple-70, $purple-60, $purple-50, $purple-40, $purple-30),
+  ($blue-70, $blue-60, $blue-50, $blue-40, $blue-30),
+  ($cyan-70, $cyan-60, $cyan-50, $cyan-40, $cyan-30),
+  ($teal-70, $teal-60, $teal-50, $teal-40, $teal-30),
+  ($green-70, $green-60, $green-50, $green-40, $green-30)
 );
 
 @for $i from 1 through list.length($colors) {
@@ -191,10 +182,30 @@ $colors: (
     )
   );
   $group-colors: list.nth($colors, $i);
-  @each $color in $group-colors {
+  $group-colors-length: list.length($group-colors);
+
+  //this is to select and add color to the new group preview
+  .#{$block-class}__group-preview[data-color-index='#{($i%list.length($colors))}']
+    button {
+    /* stylelint-disable-next-line carbon/theme-token-use */
+    $next-group-color: list.nth($colors, ($i%list.length($colors)) +1);
+    /* stylelint-disable-next-line carbon/theme-token-use */
+    box-shadow: inset 0 #{$spacing-01} 0 0 list.nth($next-group-color, 1);
+  }
+
+  //we need to select the group color from the $colors array and need to repeat the colors after $colors.length subgroups
+  @for $el-index from 1 through 50 {
+    $item-index: $el-index;
+    /* stylelint-disable-next-line carbon/theme-token-use */
+    $item-index: ((($item-index - 1) % $group-colors-length) +1);
     #{$selector} {
-      /* stylelint-disable-next-line carbon/theme-token-use */
-      --#{$block-class}__condition-wrapper-color: #{$color};
+      @if $item-index != 1 {
+        /* stylelint-disable-next-line carbon/theme-token-use */
+        --#{$block-class}__condition-wrapper-color: #{list.nth(
+            $group-colors,
+            $item-index
+          )}; // stylelint-disable-line carbon/theme-token-use
+      }
     }
 
     $selector: list.append(
@@ -211,13 +222,12 @@ $colors: (
   .#{$block-class}__groupConnector {
     background-color: $layer;
   }
-  .#{$block-class}__condition-wrapper > :nth-child(1) .#{$block-class}__button,
-  .#{$block-class}__condition-wrapper
+  .#{$block-class}__condition-wrapper:not(.#{$block-class}__group-preview)
+    > :nth-child(1)
+    .#{$block-class}__button,
+  .#{$block-class}__condition-wrapper:not(.#{$block-class}__group-preview)
     > :nth-child(2)
-    .#{$block-class}__button:not(
-      .#{$block-class}__add-button,
-      .#{$block-class}__add-condition-sub-group
-    ) {
+    .#{$block-class}__button {
     /* stylelint-disable-next-line carbon/theme-token-use */
     box-shadow: inset 0 #{$spacing-01} 0 0 var(--#{$block-class}__condition-wrapper-color);
   }
@@ -237,24 +247,24 @@ $colors: (
 .#{$block-class}__add-condition-sub-group-wrapper {
   z-index: -1;
   width: 0;
-  margin-left: -50%;
-  opacity: 0;
   pointer-events: none;
+  transform: translateX(-100%);
   // stylelint-disable-next-line carbon/motion-duration-use, carbon/motion-easing-use
-  transition: all linear $duration-fast-02;
+  transition: transform motion(exit, productive) $duration-fast-02;
 }
 .#{$block-class}__add-condition-sub-group-wrapper--show {
   z-index: 0;
   width: auto;
-  margin-left: 0;
-  opacity: 1;
   pointer-events: all;
-  // stylelint-disable-next-line carbon/motion-duration-use, carbon/motion-easing-use
-  transition: all linear $duration-fast-02;
+  transform: translateX(0);
 }
 .#{$block-class}__invalid-input {
   display: flex;
 }
 .#{$block-class}__invalid-input > svg {
   color: $support-warning;
+  /* stylelint-disable max-nesting-depth */
+  > path:first-child {
+    fill: $icon-primary;
+  }
 }