From da87ce386489200da262d1e41a8d53e2c8bbf89a Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Tue, 13 Feb 2024 09:30:15 +0300
Subject: [PATCH] Migrated Dialog

---
 components/lib/theme/aura/dialog/index.js     | 175 ++++++++++++++++++
 components/lib/theme/aura/dialog/package.json |   6 +
 components/lib/theme/aura/index.js            |   5 +-
 3 files changed, 185 insertions(+), 1 deletion(-)
 create mode 100644 components/lib/theme/aura/dialog/index.js
 create mode 100644 components/lib/theme/aura/dialog/package.json

diff --git a/components/lib/theme/aura/dialog/index.js b/components/lib/theme/aura/dialog/index.js
new file mode 100644
index 000000000..630bf8da7
--- /dev/null
+++ b/components/lib/theme/aura/dialog/index.js
@@ -0,0 +1,175 @@
+export default {
+    variables: {
+        colorScheme: {
+            light: {
+                root: {
+                    background: '{surface.0}',
+                    borderColor: '{surface.200}',
+                    textColor: '{surface.700}'
+                },
+                headerIcon: {
+                    color: '{surface.500}',
+                    colorHover: '{surface.600}',
+                    backgroundHover: '{surface.100}'
+                }
+            },
+            dark: {}
+        }
+    },
+    css: `
+.p-dialog {
+    max-height: 90%;
+    transform: scale(1);
+    border-radius: var(--p-rounded-xl);
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
+    background: var(--p-dialog-background);
+    border: 1px solid var(--p-dialog-border-color);
+    color: var(--p-dialog-text-color);
+}
+
+.p-dialog-content {
+    overflow-y: auto;
+    padding: 0 1.5rem 1.5rem 1.5rem;
+}
+
+.p-dialog-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-shrink: 0;
+    padding: 1.5rem;
+}
+
+.p-dialog-title {
+    font-weight: 600;
+    font-size: 1.25rem;
+}
+
+.p-dialog-footer {
+    flex-shrink: 0;
+    padding: 0 1.5rem 1.5rem 1.5rem;
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.5rem;
+}
+
+.p-dialog-header-icons {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.p-dialog-header-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    width: 1.75rem;
+    height: 1.75rem;
+    color: var(--p-dialog-header-icon-color);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color var(--p-transition-duration), color var(--p-transition-duration), outline-color var(--p-transition-duration);
+    outline-color: transparent;
+}
+
+.p-dialog-header-icon:enabled:hover {
+    color: var(--p-dialog-header-icon-color-hover);
+    background: var(--p-dialog-header-icon-background-hover);
+}
+
+.p-dialog-header-icon:focus-visible {
+    outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
+    outline-offset: var(--p-focus-ring-offset);
+}
+
+.p-dialog-enter-active {
+    transition: all 150ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.p-dialog-leave-active {
+    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.p-dialog-enter-from,
+.p-dialog-leave-to {
+    opacity: 0;
+    transform: scale(0.7);
+}
+
+.p-dialog-top .p-dialog,
+.p-dialog-bottom .p-dialog,
+.p-dialog-left .p-dialog,
+.p-dialog-right .p-dialog,
+.p-dialog-topleft .p-dialog,
+.p-dialog-topright .p-dialog,
+.p-dialog-bottomleft .p-dialog,
+.p-dialog-bottomright .p-dialog {
+    margin: 0.75rem;
+    transform: translate3d(0px, 0px, 0px);
+}
+
+.p-dialog-top .p-dialog-enter-active,
+.p-dialog-top .p-dialog-leave-active,
+.p-dialog-bottom .p-dialog-enter-active,
+.p-dialog-bottom .p-dialog-leave-active,
+.p-dialog-left .p-dialog-enter-active,
+.p-dialog-left .p-dialog-leave-active,
+.p-dialog-right .p-dialog-enter-active,
+.p-dialog-right .p-dialog-leave-active,
+.p-dialog-topleft .p-dialog-enter-active,
+.p-dialog-topleft .p-dialog-leave-active,
+.p-dialog-topright .p-dialog-enter-active,
+.p-dialog-topright .p-dialog-leave-active,
+.p-dialog-bottomleft .p-dialog-enter-active,
+.p-dialog-bottomleft .p-dialog-leave-active,
+.p-dialog-bottomright .p-dialog-enter-active,
+.p-dialog-bottomright .p-dialog-leave-active {
+    transition: all 0.3s ease-out;
+}
+
+.p-dialog-top .p-dialog-enter-from,
+.p-dialog-top .p-dialog-leave-to {
+    transform: translate3d(0px, -100%, 0px);
+}
+
+.p-dialog-bottom .p-dialog-enter-from,
+.p-dialog-bottom .p-dialog-leave-to {
+    transform: translate3d(0px, 100%, 0px);
+}
+
+.p-dialog-left .p-dialog-enter-from,
+.p-dialog-left .p-dialog-leave-to,
+.p-dialog-topleft .p-dialog-enter-from,
+.p-dialog-topleft .p-dialog-leave-to,
+.p-dialog-bottomleft .p-dialog-enter-from,
+.p-dialog-bottomleft .p-dialog-leave-to {
+    transform: translate3d(-100%, 0px, 0px);
+}
+
+.p-dialog-right .p-dialog-enter-from,
+.p-dialog-right .p-dialog-leave-to,
+.p-dialog-topright .p-dialog-enter-from,
+.p-dialog-topright .p-dialog-leave-to,
+.p-dialog-bottomright .p-dialog-enter-from,
+.p-dialog-bottomright .p-dialog-leave-to {
+    transform: translate3d(100%, 0px, 0px);
+}
+
+.p-dialog-maximized {
+    width: 100vw !important;
+    height: 100vh !important;
+    top: 0px !important;
+    left: 0px !important;
+    max-height: 100%;
+    height: 100%;
+    border-radius: 0;
+}
+
+.p-dialog-maximized .p-dialog-content {
+    flex-grow: 1;
+}    
+`
+};
diff --git a/components/lib/theme/aura/dialog/package.json b/components/lib/theme/aura/dialog/package.json
new file mode 100644
index 000000000..f8e9d7ae0
--- /dev/null
+++ b/components/lib/theme/aura/dialog/package.json
@@ -0,0 +1,6 @@
+{
+    "main": "./index.cjs.js",
+    "module": "./index.esm.js",
+    "unpkg": "./index.min.js",
+    "types": "./index.d.ts"
+}
diff --git a/components/lib/theme/aura/index.js b/components/lib/theme/aura/index.js
index 589885846..6bce4004b 100644
--- a/components/lib/theme/aura/index.js
+++ b/components/lib/theme/aura/index.js
@@ -4,6 +4,7 @@ import badge from 'primevue/theme/aura/badge';
 import blockui from 'primevue/theme/aura/blockui';
 import card from 'primevue/theme/aura/card';
 import chip from 'primevue/theme/aura/chip';
+import dialog from 'primevue/theme/aura/dialog';
 import divider from 'primevue/theme/aura/divider';
 import fieldset from 'primevue/theme/aura/fieldset';
 import global from 'primevue/theme/aura/global';
@@ -26,7 +27,8 @@ export default {
         rounded: {
             sm: '4px',
             base: '6px',
-            lg: '12px'
+            lg: '8px',
+            xl: '12px'
         },
         emerald: { 50: '#ecfdf5', 100: '#d1fae5', 200: '#a7f3d0', 300: '#6ee7b7', 400: '#34d399', 500: '#10b981', 600: '#059669', 700: '#047857', 800: '#065f46', 900: '#064e3b', 950: '#022c22' },
         green: { 50: '#f0fdf4', 100: '#dcfce7', 200: '#bbf7d0', 300: '#86efac', 400: '#4ade80', 500: '#22c55e', 600: '#16a34a', 700: '#15803d', 800: '#166534', 900: '#14532d', 950: '#052e16' },
@@ -136,6 +138,7 @@ export default {
         blockui,
         card,
         chip,
+        dialog,
         divider,
         fieldset,
         metergroup,