feat(modal): Refactored modal dialog and improved styling

Author: spuxx-dev

.eslintrc.cjs

@@ -15,5 +15,16 @@ module.exports = {
     'max-len': ['error', { code: 120 }],
     'no-console': ['error'],
     'no-debugger': ['error'],
+    'no-unused-vars': 'off',
+    '@typescript-eslint/no-unused-vars': [
+      'error',
+      {
+        args: 'all',
+        argsIgnorePattern: '^_',
+        destructuredArrayIgnorePattern: '^_',
+        varsIgnorePattern: '^_',
+        ignoreRestSiblings: true,
+      },
+    ],
   },
 };

apps/solid/src/routes/dialog.route.tsx

@@ -3,16 +3,16 @@ import {
   Container,
   Divider,
   Heading,
-  Dialog,
-  ConfirmDialog,
-  DialogContainer,
+  ModalDialog,
+  ConfirmModal,
+  ModalPortal,
 } from '@spuxx/solid';
 import { Component } from 'solid-js';
 
 export const DialogRoute: Component = () => {
   return (
     <Container tag="article">
-      <DialogContainer />
+      <ModalPortal />
 
       <Heading level={1}>Dialog</Heading>
       <Divider color="gradient" />
@@ -21,7 +21,17 @@ export const DialogRoute: Component = () => {
         <Divider color="gradient" />
         <Button
           onClick={() => {
-            Dialog.show(ConfirmDialog, {});
+            ModalDialog.show(ConfirmModal, {
+              title: 'Hello World!',
+              color: 'gradient',
+              content: 'This is a confirm dialog.',
+              confirmLabel: 'Confirm',
+              confirmIcon: 'mdi:check',
+              // confirmColor: 'gradient',
+              cancelLabel: 'Cancel',
+              // cancelColor: 'gradient',
+              size: 'medium',
+            });
           }}
         >
           Open Confirm Dialog

packages/browser-utils/src/styles.css

@@ -1,5 +1,7 @@
 @import './styles/variables.css';
 @import './styles/application.css';
 @import './styles/components.css';
+@import './styles/modal.css';
 @import './styles/variants.css';
 @import './styles/colors.css';
+@import './styles/animations.css';

packages/browser-utils/src/styles/animations.css

@@ -0,0 +1,15 @@
+@keyframes enter {
+  0% {
+    opacity: 0;
+    scale: 0.95;
+    transform: translate(-50%, calc(-50% + 8px)) scale(0.95);
+  }
+}
+
+@keyframes exit {
+  to {
+    opacity: 0;
+    scale: 0.95;
+    transform: translate(-50%, calc(-50% + 8px)) scale(0.95);
+  }
+}

packages/browser-utils/src/styles/colors.css

@@ -25,7 +25,7 @@
 }
 
 .spx[spx-variant='colored'].spx[spx-color='warning'] {
-  color: var(--sp-color-warning);
+  color: var(--spx-color-warning);
 }
 
 .spx[spx-variant='colored'].spx[spx-color='error'] {
@@ -71,7 +71,7 @@
 }
 
 .spx[spx-variant='contained'].spx[spx-color='warning'] {
-  background: var(--sp-color-warning);
+  background: var(--spx-color-warning);
   color: var(--spx-color-on-warning);
 }
 
@@ -112,8 +112,8 @@
 }
 
 .spx[spx-variant='outlined'].spx[spx-color='warning'] {
-  border-color: var(--sp-color-warning);
-  color: var(--sp-color-warning);
+  border-color: var(--spx-color-warning);
+  color: var(--spx-color-warning);
 }
 
 .spx[spx-variant='outlined'].spx[spx-color='error'] {

packages/browser-utils/src/styles/components/input/button.css

@@ -18,7 +18,7 @@
   }
 
   iconify-icon {
-    font-size: large;
+    font-size: larger;
   }
 }
 

packages/browser-utils/src/styles/modal.css

@@ -0,0 +1,80 @@
+.spx-modal-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.spx-modal {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-color: var(--spx-color-dialog);
+  color: var(--spx-color-on-dialog);
+  border-radius: var(--spx-border-radius);
+  width: fit-content;
+  max-width: 80svw;
+}
+
+.spx-modal[data-open] {
+  animation: enter 150ms ease;
+}
+
+.spx-modal[data-closed] {
+  animation: exit 150ms ease;
+}
+
+.spx-modal[data-size='small'] {
+  width: 400px;
+}
+
+.spx-modal[data-size='medium'] {
+  width: 600px;
+}
+
+.spx-modal[data-size='large'] {
+  width: 1000px;
+}
+
+.spx-modal[data-size='auto'] {
+  width: fit-content;
+}
+
+.spx-modal[data-size='full'] {
+  width: 100%;
+}
+
+.spx-modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.5rem;
+  border-bottom-left-radius: 0px !important;
+  border-bottom-right-radius: 0px !important;
+
+  h2 {
+    margin: 0;
+    padding-left: 1rem;
+  }
+
+  .spx-button {
+    background: none;
+  }
+}
+
+.spx-modal-body {
+  margin: 1rem 0;
+  padding: 0rem 1.5rem;
+}
+
+.spx-modal-footer {
+  display: flex;
+  flex-direction: row;
+  justify-content: end;
+  align-items: center;
+  padding: 0.5rem;
+  gap: 0.5rem;
+}

packages/browser-utils/src/themes/default.theme.css

@@ -17,11 +17,11 @@ html *,
   --spx-color-surface: #3f3f46;
   --spx-color-on-surface: var(--spx-color-text-default);
   --spx-color-primary: #0d9488;
-  --spx-color-on-primary: var(--spx-color-text-default);
+  --spx-color-on-primary: var(--spx-color-text-highlighted);
   --spx-color-secondary: #3f3f46;
   --spx-color-on-secondary: var(--spx-color-text-default);
   --spx-color-gradient: linear-gradient(45deg, var(--spx-color-primary), #a21caf);
-  --spx-color-on-gradient: var(--spx-color-text-default);
+  --spx-color-on-gradient: var(--spx-color-text-highlighted);
 
   /* Status Colors */
   --spx-color-info: #166534;
@@ -33,6 +33,10 @@ html *,
   --spx-color-error: #b91c1c;
   --spx-color-on-error: var(--spx-color-text-default);
 
+  /* Dialog */
+  --spx-color-dialog: var(--spx-color-surface);
+  --spx-color-on-dialog: var(--spx-color-on-surface);
+
   /* Filters */
   --spx-filter-control-hover: brightness(1.25);
   --spx-filter-control-hover-contained: brightness(0.8);

packages/browser-utils/src/types/public/index.ts

@@ -31,3 +31,18 @@ export const ContentColor = {
  * The content color of an element.
  */
 export type ContentColor = (typeof ContentColor)[keyof typeof ContentColor];
+
+/**
+ * The size of a modal dialog.
+ */
+export const ModalSize = {
+  small: 'small',
+  medium: 'medium',
+  large: 'large',
+  auto: 'auto',
+  max: 'max',
+};
+/**
+ * The size of a modal dialog.
+ */
+export type ModalSize = (typeof ModalSize)[keyof typeof ModalSize];