style: [1209] add dark theme styles in popconfirm (#1211)

* style: adding dark theme styles in popconfirm * style: adding dark theme styles in popconfirm
Brisanet · Dec 3, 2024 · 3cf7aaf · 3cf7aaf
1 parent 2b0c286
commit 3cf7aaf
Show file tree

Hide file tree

Showing 6 changed files with 85 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/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 {