Merge branch 'main' into 1214-style-add-dark-theme-styles-in-checkbox

Brisanet · Dec 3, 2024 · 9f235ff · 9f235ff
2 parents aac620a + 3c6a066
commit 9f235ff
Show file tree

Hide file tree

Showing 11 changed files with 222 additions and 1 deletion.
diff --git a/projects/ion/src/lib/alert/_alert.theme.scss b/projects/ion/src/lib/alert/_alert.theme.scss
@@ -41,11 +41,61 @@ $default: (
     background-color: ion-theme(neutral-2),
     text-color: ion-theme(neutral-7),
   ),
+  without-background: (
+    text-color: ion-theme(neutral-7),
+  ),
+);
+
+$dark: (
+  border-radius: 8px,
+  close-icon-size: 18px,
+  text: (
+    font-size: 14px,
+    font-weight: 400,
+    line-height: 20px,
+    font-family: ion-theme(font-family-main),
+  ),
+  success: (
+    background-color: ion-theme(positive-1),
+    border-color: ion-theme(positive-5),
+    icon-color: ion-theme(positive-7),
+    close-icon-color: ion-theme(primary-6),
+    text-color: ion-theme(neutral-7),
+  ),
+  info: (
+    background-color: ion-theme(info-1),
+    border-color: ion-theme(info-6),
+    icon-color: ion-theme(info-6),
+    close-icon-color: ion-theme(primary-6),
+    text-color: ion-theme(neutral-7),
+  ),
+  warning: (
+    background-color: ion-theme(warning-1),
+    border-color: ion-theme(warning-6),
+    icon-color: ion-theme(warning-6),
+    close-icon-color: ion-theme(primary-6),
+    text-color: ion-theme(neutral-7),
+  ),
+  negative: (
+    background-color: ion-theme(negative-1),
+    border-color: ion-theme(negative-6),
+    icon-color: ion-theme(negative-6),
+    close-icon-color: ion-theme(primary-6),
+    text-color: ion-theme(neutral-7),
+  ),
+  with-description: (
+    background-color: ion-theme(neutral-2),
+    text-color: ion-theme(neutral-7),
+  ),
+  without-background: (
+    text-color: ion-theme(neutral-1),
+  ),
 );
 
 @include register-component(
   alert,
   (
     default: $default,
+    dark: $dark,
   )
 );
diff --git a/projects/ion/src/lib/alert/alert.component.scss b/projects/ion/src/lib/alert/alert.component.scss
@@ -80,6 +80,10 @@ $statuses: success, info, warning, negative;
   &.without-background {
     background-color: transparent;
     border: none !important;
+
+    span {
+      color: ion-theme(alert-without-background-text-color);
+    }
   }
 
   &.no-radius {

diff --git a/projects/ion/src/lib/input-area/_input-area.theme.scss b/projects/ion/src/lib/input-area/_input-area.theme.scss
@@ -30,9 +30,40 @@ $default: (
   ),
 );
 
+$dark: (
+  text-color: ion-theme(neutral-3),
+  border-color: ion-theme(neutral-3),
+  border-radius: 8px,
+  background-color: ion-theme(neutral-5),
+  placeholder-text: (
+    color: ion-theme(neutral-3),
+    font-weight: 400,
+    font-size: 14px,
+  ),
+  hover-border-color: ion-theme(primary-4),
+  disabled: (
+    background-color: ion-theme(neutral-7),
+    text-color: ion-theme(neutral-4),
+    border-color: ion-theme(neutral-4),
+  ),
+  active: (
+    border-color: ion-theme(primary-3),
+    outline-color: ion-theme(primary-4),
+  ),
+  scrollbar: (
+    thumb-color: ion-theme(neutral-6),
+    track-color: ion-theme(neutral-3),
+    button: (
+      border-color: ion-theme(neutral-4),
+      hover-border-color: ion-theme(neutral-7),
+    ),
+  ),
+);
+
 @include register-component(
   input-area,
   (
     default: $default,
+    dark: $dark,
   )
 );
diff --git a/projects/ion/src/lib/input-area/input-area.component.html b/projects/ion/src/lib/input-area/input-area.component.html
@@ -1,5 +1,6 @@
 <textarea
   data-testid="input-area"
+  [class.disabled]="disabled"
   [cols]="cols"
   [rows]="rows"
   [disabled]="disabled"

diff --git a/projects/ion/src/lib/input-area/input-area.component.scss b/projects/ion/src/lib/input-area/input-area.component.scss
@@ -39,6 +39,12 @@ textarea {
   }
 }
 
+.disabled {
+  &::placeholder {
+    color: ion-theme(input-area-disabled-text-color);
+  }
+}
+
 textarea::-webkit-scrollbar {
   width: 8px;
   border-radius: 100px;

diff --git a/projects/ion/src/lib/popconfirm/_popconfirm.theme.scss b/projects/ion/src/lib/popconfirm/_popconfirm.theme.scss
@@ -14,11 +14,30 @@ $default: (
     line-height: 20px,
     color: ion-theme(neutral-7),
   ),
+  border-color: ion-theme(neutral-1),
+);
+
+$dark: (
+  background-color: ion-theme(neutral-5),
+  shadow: 0 0 6px rgba(4, 42, 98, 0.15),
+  arrow: (
+    color: ion-theme(neutral-5),
+    shadow: -2px -2px 4px -2px rgb(4 42 98 / 15%),
+  ),
+  text: (
+    font-family: ion-theme(font-family-main),
+    font-weight: 400,
+    font-size: 14px,
+    line-height: 20px,
+    color: ion-theme(neutral-1),
+  ),
+  border-color: ion-theme(neutral-3),
 );
 
 @include register-component(
   popconfirm,
   (
     default: $default,
+    dark: $dark,
   )
 );
diff --git a/projects/ion/src/lib/popconfirm/popconfirm.component.scss b/projects/ion/src/lib/popconfirm/popconfirm.component.scss
@@ -26,6 +26,8 @@
     right: $right;
     transform: rotate(45deg);
     box-shadow: ion-theme(popconfirm-arrow-shadow);
+    border-top: 1px solid ion-theme(popconfirm-border-color);
+    border-left: 1px solid ion-theme(popconfirm-border-color);
   }
 }
 
@@ -44,6 +46,8 @@
 
 .containter {
   z-index: $zIndexMid;
+  border-radius: spacing(1);
+  border: 1px solid ion-theme(popconfirm-border-color);
 }
 
 .description {

diff --git a/projects/ion/src/lib/popover/component/_popover.theme.scss b/projects/ion/src/lib/popover/component/_popover.theme.scss
@@ -3,6 +3,7 @@
 $default: (
   background-color: ion-theme(neutral-1),
   shadow: 0 0 6px rgba(4, 42, 98, 0.15),
+  border-color: ion-themes(neutral-2),
   header: (
     background-color: ion-theme(neutral-2),
     close-icon-color: ion-theme(primary-6),
@@ -35,6 +36,7 @@ $default: (
 $dark: (
   background-color: ion-theme(neutral-5),
   shadow: 0 0 6px rgba(4, 42, 98, 0.15),
+  border-color: ion-theme(neutral-3),
   header: (
     background-color: ion-theme(neutral-6),
     close-icon-color: ion-theme(primary-3),
@@ -58,7 +60,7 @@ $dark: (
   ),
   arrow: (
     shadow: -2px -2px 4px -2px rgb(4 42 98 / 15%),
-    header-color: ion-theme(neutral-6),
+    header-color: ion-theme(neutral-5),
     body-color: ion-theme(neutral-6),
   ),
   scrollbar-thumb-color: ion-theme(neutral-2),

diff --git a/projects/ion/src/lib/popover/component/popover.component.scss b/projects/ion/src/lib/popover/component/popover.component.scss
@@ -36,6 +36,8 @@ $arrow-distance-to-border: 16px;
       top: $arrowPosition;
       left: $left;
       transform: rotate($rotate);
+      border-top: 1px solid ion-theme(popover-border-color);
+      border-left: 1px solid ion-theme(popover-border-color);
     }
   }
 
@@ -51,6 +53,8 @@ $arrow-distance-to-border: 16px;
       bottom: $arrowPosition;
       left: $left;
       transform: rotate($rotate);
+      border-top: 1px solid ion-theme(popover-border-color);
+      border-left: 1px solid ion-theme(popover-border-color);
     }
   }
 }
@@ -213,6 +217,7 @@ $arrow-distance-to-border: 16px;
     border-radius: spacing(1);
     box-shadow: ion-theme(popover-shadow);
     background-color: ion-theme(popover-background-color);
+    border: 1px solid ion-theme(popover-border-color);
   }
 
   &__header {

diff --git a/projects/ion/src/lib/step/_step.theme.scss b/projects/ion/src/lib/step/_step.theme.scss
@@ -96,9 +96,106 @@ $default: (
   ),
 );
 
+$dark: (
+  circle-text: (
+    font-family: ion-theme(font-family-main),
+    font-style: normal,
+    font-weight: 600,
+    font-size: 14px,
+    line-height: 20px,
+  ),
+  label-text: (
+    font-family: 'Inter, sans-serif',
+    font-style: normal,
+    font-weight: 400,
+    color: ion-theme(neutral-3),
+    selected-color: ion-theme(neutral-1),
+    disabled-color: ion-theme(neutral-4),
+    hover-active-color: ion-theme(primary-3),
+    hover-active-error-color: ion-theme(negative-3),
+  ),
+  line: (
+    color: ion-theme(neutral-1),
+    bolded-color: ion-theme(primary-6),
+  ),
+  status: (
+    default: (
+      border-color: ion-theme(neutral-2),
+      background-color: ion-theme(neutral-5),
+      text-color: ion-theme(neutral-1),
+      hover: (
+        border-color: ion-theme(primary-2),
+        background-color: ion-theme(neutral-5),
+        text-color: ion-theme(primary-2),
+      ),
+      active: (
+        border-color: ion-theme(primary-6),
+        background-color: ion-theme(primary-1),
+        text-color: ion-theme(primary-7),
+      ),
+    ),
+    selected: (
+      border-color: ion-theme(primary-6),
+      background-color: ion-theme(primary-6),
+      text-color: ion-theme(neutral-1),
+      hover: (
+        border-color: ion-theme(primary-5),
+        background-color: ion-theme(primary-5),
+        text-color: ion-theme(neutral-1),
+      ),
+      active: (
+        border-color: ion-theme(primary-7),
+        background-color: ion-theme(primary-7),
+        text-color: ion-theme(neutral-1),
+      ),
+    ),
+    checked: (
+      border-color: ion-theme(primary-6),
+      background-color: ion-theme(primary-1),
+      text-color: ion-theme(primary-6),
+      check-icon-color: ion-theme(primary-6),
+      hover: (
+        border-color: ion-theme(primary-6),
+        background-color: ion-theme(primary-2),
+        text-color: ion-theme(primary-6),
+        check-icon-color: ion-theme(primary-6),
+      ),
+      active: (
+        border-color: ion-theme(primary-6),
+        background-color: ion-theme(primary-1),
+        text-color: ion-theme(primary-7),
+        check-icon-color: ion-theme(primary-7),
+      ),
+    ),
+    error: (
+      border-color: ion-theme(negative-6),
+      background-color: ion-theme(negative-6),
+      text-color: ion-theme(neutral-1),
+      hover: (
+        border-color: ion-theme(negative-5),
+        background-color: ion-theme(negative-5),
+        text-color: ion-theme(neutral-1),
+      ),
+      active: (
+        border-color: ion-theme(negative-7),
+        background-color: ion-theme(negative-7),
+        text-color: ion-theme(neutral-1),
+      ),
+    ),
+    disabled: (
+      border-color: ion-theme(neutral-4),
+      background-color: ion-theme(neutral-7),
+      text-color: ion-theme(neutral-4),
+      check-icon-color: ion-theme(neutral-4),
+      line-color: ion-theme(neutral-4),
+    ),
+  ),
+);
+
 @include register-component(
   step,
   (
     default: $default,
+    dark: $dark,
   )
 );
diff --git a/projects/ion/src/lib/step/step.component.scss b/projects/ion/src/lib/step/step.component.scss
@@ -107,6 +107,7 @@
       &.disabled,
       &.disabled.selected {
         color: ion-theme(step-label-text-disabled-color);
+        cursor: not-allowed;
       }
     }
 
@@ -171,6 +172,7 @@
         step-status-disabled-text-color
       );
       @include setIconColorStatus(step-status-disabled-check-icon-color);
+      cursor: not-allowed;
     }
     .step-draw {
       .line,