edit theme defaults, get rid of blur filter, improve emoji css

smastrom · Jul 6, 2023 · 942e497 · 942e497
1 parent 0ac1549
commit 942e497
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 22 deletions.
diff --git a/demo/assets/style.css b/demo/assets/style.css
@@ -85,8 +85,8 @@ html[data-theme='slate'] {
 body {
    margin: 0;
    padding: 0;
-   min-height: 100svh;
    min-height: 100vh;
+   min-height: 100svh;
 }
 
 #app {

diff --git a/packages/notivue/Notifications/Notifications.vue b/packages/notivue/Notifications/Notifications.vue
@@ -46,11 +46,7 @@ const closeIcon = computed(() => props.icons.close)
          @click="item.clear"
          :aria-label="props.closeAriaLabel"
       >
-         <Component
-            v-if="typeof closeIcon === 'object' && closeIcon != null"
-            :is="closeIcon"
-            :class="Cx.CLOSE_ICON"
-         />
+         <Component v-if="typeof closeIcon === 'object'" :is="closeIcon" :class="Cx.CLOSE_ICON" />
          <div v-else-if="typeof closeIcon === 'string'" aria-hidden="true" v-text="closeIcon" />
       </button>
    </div>

diff --git a/packages/notivue/Notifications/notifications.css b/packages/notivue/Notifications/notifications.css
@@ -63,12 +63,13 @@
 
 .Notivue__icon {
    display: flex;
+   justify-content: center;
+   align-items: center;
    min-width: var(--nv-icon-size);
    width: var(--nv-icon-size);
    height: var(--nv-icon-size);
    margin: var(--nv-spacing);
-   margin-inline-start: calc(var(--nv-tip-width, 0) + var(--nv-spacing));
-
+   margin-inline-start: calc(var(--nv-tip-width, 0px) + var(--nv-spacing));
    animation: Notivue__icon-pop-kf 200ms ease-in-out backwards;
    color: var(--nv-accent, var(--nv-global-accent));
 
@@ -90,9 +91,6 @@
 }
 
 .Notivue__content {
-   --nv-mt-optical: calc(0.375em / 2);
-   --nv-mt-optical-neg: calc(-1 * var(--nv-mt-optical));
-
    display: flex;
    flex-direction: column;
    flex-grow: 1;
@@ -105,24 +103,30 @@
    font-weight: 700;
    color: var(--nv-fg, var(--nv-global-fg));
    font-size: var(--nv-title-size);
-   margin: var(--nv-mt-optical-neg) 0 calc(0.33em + var(--nv-mt-optical)) 0;
+   margin: 0 0 0.25em 0;
    padding: 0;
 }
 
 .Notivue__content-message {
-   opacity: 0.9;
+   opacity: 0.85;
    max-height: 250px;
    overflow: auto;
    line-height: 1.375;
    color: var(--nv-fg, var(--nv-global-fg));
-   margin: var(--nv-mt-optical-neg) 0 0 0;
+   margin: 0;
    padding: 0;
    font-size: var(--nv-message-size);
    white-space: pre-line;
 }
 
-[dir='rtl'] .Notivue__content-message {
-   font-size: calc(var(--nv-message-size) + 0.25em);
+[dir='rtl'] {
+   & .Notivue__content-message {
+      font-size: calc(var(--nv-message-size) + 0.2em);
+   }
+
+   & .Notivue__content-title {
+      font-size: calc(var(--nv-title-size) + 0.2em);
+   }
 }
 
 .Notivue__close {
@@ -133,6 +137,8 @@
    border: none;
    background: none;
    opacity: 0.5;
+   line-height: 1;
+   font-size: var(--nv-message-size);
    color: var(--nv-fg, var(--nv-global-fg));
    transition: 100ms opacity ease-out;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
@@ -155,6 +161,7 @@
 
 .Notivue__close-icon {
    width: var(--nv-icon-size);
+   height: var(--nv-icon-size);
    display: flex;
    color: var(--nv-fg, var(--nv-global-fg));
    pointer-events: none;

diff --git a/packages/notivue/Notifications/themes.ts b/packages/notivue/Notifications/themes.ts
@@ -2,9 +2,9 @@ import type { NotivueTheme } from '@/types'
 
 const layout: NotivueTheme = {
    '--nv-width': '350px',
-   '--nv-spacing': '0.65rem',
+   '--nv-spacing': '0.5rem',
    '--nv-radius': '0.5rem',
-   '--nv-icon-size': '1.375rem',
+   '--nv-icon-size': '1.15rem',
    '--nv-title-size': '0.925rem',
    '--nv-message-size': '0.875rem',
    '--nv-tip-width': '0px',

diff --git a/packages/notivue/core/animations.css b/packages/notivue/core/animations.css
@@ -26,20 +26,17 @@
 }
 
 .Notivue__leave {
-   will-change: filter;
    animation: Notivue__leave-kf 300ms cubic-bezier(0.22, 1, 0.36, 1);
 }
 
 @keyframes Notivue__leave-kf {
    100% {
       transform: scale(1);
       opacity: 1;
-      filter: blur(0px);
    }
    100% {
       transform: scale(1.05);
       opacity: 0;
-      filter: blur(2px);
    }
 }
 

diff --git a/packages/notivue/core/config.ts b/packages/notivue/core/config.ts
@@ -13,7 +13,6 @@ export const defaultConfig: NotivueConfigRequired = {
    pauseOnTabChange: true,
    position: 'top-center',
    teleportTo: 'body',
-   class: '',
    notifications: defaultNotificationOptions,
    limit: Infinity,
    animations: {