@rt-tools/ui-kit-v2 0.5.0 → 0.6.0

package/src/lib/components/toast/rt-toast.component.scss

@@ -1,201 +1,210 @@
-.rt-toast {
-    --y: translateY(100%);
-    --lift-amount: calc(var(--lift) * var(--gap));
-
-    position: absolute;
-    z-index: var(--z-index);
-    display: flex;
-    width: 100%;
-    box-sizing: border-box;
-    align-items: center;
-    padding: var(--rt-space-4);
-    border: var(--rt-border-width-thin) solid var(--rt-color-border-subtle);
-    border-radius: var(--rt-radius-md);
-    background: var(--rt-color-bg-surface);
-    box-shadow: var(--rt-shadow-card);
-    color: var(--rt-color-text-primary);
-    font-size: var(--rt-text-sm);
-    font-weight: var(--rt-font-weight-medium);
-    gap: var(--rt-space-2);
-    line-height: var(--rt-leading-normal);
-    opacity: 0;
-    outline: none;
-    overflow-wrap: anywhere;
-    touch-action: none;
-    transform: var(--y);
-    transition:
-        transform var(--rt-duration-slow),
-        opacity var(--rt-duration-slow),
-        height var(--rt-duration-slow),
-        box-shadow var(--rt-duration-base);
-
-    &:after {
+@layer rt-kit.components {
+    .rt-toast {
+        --rt-toast-radius: var(--rt-radius-md);
+        --rt-toast-border-width: var(--rt-border-width-thin);
+        --rt-toast-shadow: var(--rt-shadow-card);
+        --rt-toast-enter-duration: var(--rt-duration-slow);
+        --rt-toast-shadow-duration: var(--rt-duration-base);
+        --rt-toast-leave-duration: var(--rt-duration-slower);
+        --rt-toast-fade-duration: var(--rt-duration-fast);
+        --y: translateY(100%);
+        --lift-amount: calc(var(--lift) * var(--gap));
+
         position: absolute;
-        bottom: 100%;
-        left: 0;
+        z-index: var(--z-index);
+        display: flex;
         width: 100%;
-        height: calc(var(--gap) + 1px);
-        content: '';
-    }
-
-    > * {
-        transition: opacity var(--rt-duration-slow);
-    }
-
-    &--y--top {
-        --y: translateY(-100%);
-        --lift: 1;
-
-        top: 0;
-    }
+        box-sizing: border-box;
+        align-items: center;
+        padding: var(--rt-space-4);
+        border: var(--rt-toast-border-width) solid var(--rt-color-border-subtle);
+        border-radius: var(--rt-toast-radius);
+        background: var(--rt-color-bg-surface);
+        box-shadow: var(--rt-toast-shadow);
+        color: var(--rt-color-text-primary);
+        font-size: var(--rt-text-sm);
+        font-weight: var(--rt-font-weight-medium);
+        gap: var(--rt-space-2);
+        line-height: var(--rt-leading-normal);
+        opacity: 0;
+        outline: none;
+        overflow-wrap: anywhere;
+        touch-action: none;
+        transform: var(--y);
+        transition:
+            transform var(--rt-toast-enter-duration),
+            opacity var(--rt-toast-enter-duration),
+            height var(--rt-toast-enter-duration),
+            box-shadow var(--rt-toast-shadow-duration);
+
+        &:after {
+            position: absolute;
+            bottom: 100%;
+            left: 0;
+            width: 100%;
+            height: calc(var(--gap) + 1px);
+            content: '';
+        }
 
-    &--y--bottom {
-        --y: translateY(100%);
-        --lift: -1;
+        > * {
+            transition: opacity var(--rt-toast-enter-duration);
+        }
 
-        bottom: 0;
-    }
+        &--y--top {
+            --y: translateY(-100%);
+            --lift: 1;
 
-    &--filled {
-        .rt-toast__description {
-            color: inherit;
+            top: 0;
         }
 
-        &.rt-toast--severity--info {
-            border-color: var(--rt-color-state-info-bg);
-            background: var(--rt-color-state-info-bg);
-            color: var(--rt-color-state-info);
-        }
+        &--y--bottom {
+            --y: translateY(100%);
+            --lift: -1;
 
-        &.rt-toast--severity--success {
-            border-color: var(--rt-color-state-success-bg);
-            background: var(--rt-color-state-success-bg);
-            color: var(--rt-color-state-success);
+            bottom: 0;
         }
 
-        &.rt-toast--severity--warning {
-            border-color: var(--rt-color-state-warning-bg);
-            background: var(--rt-color-state-warning-bg);
-            color: var(--rt-color-state-warning);
+        &--filled {
+            .rt-toast__description {
+                color: inherit;
+            }
+
+            &.rt-toast--severity--info {
+                border-color: var(--rt-color-state-info-bg);
+                background: var(--rt-color-state-info-bg);
+                color: var(--rt-color-state-info);
+            }
+
+            &.rt-toast--severity--success {
+                border-color: var(--rt-color-state-success-bg);
+                background: var(--rt-color-state-success-bg);
+                color: var(--rt-color-state-success);
+            }
+
+            &.rt-toast--severity--warning {
+                border-color: var(--rt-color-state-warning-bg);
+                background: var(--rt-color-state-warning-bg);
+                color: var(--rt-color-state-warning);
+            }
+
+            &.rt-toast--severity--danger {
+                border-color: var(--rt-color-state-danger-bg);
+                background: var(--rt-color-state-danger-bg);
+                color: var(--rt-color-state-danger);
+            }
         }
 
-        &.rt-toast--severity--danger {
-            border-color: var(--rt-color-state-danger-bg);
-            background: var(--rt-color-state-danger-bg);
-            color: var(--rt-color-state-danger);
-        }
-    }
+        &--mounted {
+            --y: translateY(0);
 
-    &--mounted {
-        --y: translateY(0);
+            opacity: 1;
+        }
 
-        opacity: 1;
-    }
+        &:not(.rt-toast--expanded, .rt-toast--front) {
+            --scale: var(--toasts-before) * 0.05 + 1;
+            --y: translateY(calc(var(--lift-amount) * var(--toasts-before))) scale(calc(-1 * var(--scale)));
 
-    &:not(.rt-toast--expanded, .rt-toast--front) {
-        --scale: var(--toasts-before) * 0.05 + 1;
-        --y: translateY(calc(var(--lift-amount) * var(--toasts-before))) scale(calc(-1 * var(--scale)));
+            height: var(--front-toast-height);
 
-        height: var(--front-toast-height);
+            > * {
+                opacity: 0;
+            }
+        }
 
-        > * {
+        &--hidden {
             opacity: 0;
+            pointer-events: none;
         }
-    }
-
-    &--hidden {
-        opacity: 0;
-        pointer-events: none;
-    }
 
-    &--mounted.rt-toast--expanded {
-        --y: translateY(calc(var(--lift) * var(--offset)));
+        &--mounted.rt-toast--expanded {
+            --y: translateY(calc(var(--lift) * var(--offset)));
 
-        height: var(--initial-height);
-    }
+            height: var(--initial-height);
+        }
 
-    &--removed.rt-toast--front {
-        --y: translateY(calc(var(--lift) * -100%));
+        &--removed.rt-toast--front {
+            --y: translateY(calc(var(--lift) * -100%));
 
-        opacity: 0;
-    }
-
-    &--removed.rt-toast--expanded:not(.rt-toast--front) {
-        --y: translateY(calc(var(--lift) * var(--offset) + var(--lift) * -100%));
+            opacity: 0;
+        }
 
-        opacity: 0;
-    }
+        &--removed.rt-toast--expanded:not(.rt-toast--front) {
+            --y: translateY(calc(var(--lift) * var(--offset) + var(--lift) * -100%));
 
-    &--removed:not(.rt-toast--front, .rt-toast--expanded) {
-        --y: translateY(40%);
+            opacity: 0;
+        }
 
-        opacity: 0;
-        transition:
-            transform var(--rt-duration-slower),
-            opacity var(--rt-duration-base);
-    }
+        &--removed:not(.rt-toast--front, .rt-toast--expanded) {
+            --y: translateY(40%);
 
-    &--removed:not(.rt-toast--front):before {
-        position: absolute;
-        content: '';
-        inset: 0;
-        transform: scaleY(2);
-    }
+            opacity: 0;
+            transition:
+                transform var(--rt-toast-leave-duration),
+                opacity var(--rt-toast-shadow-duration);
+        }
 
-    &__icon {
-        flex-shrink: 0;
-    }
+        &--removed:not(.rt-toast--front):before {
+            position: absolute;
+            content: '';
+            inset: 0;
+            transform: scaleY(2);
+        }
 
-    &__content {
-        display: flex;
-        min-width: 0;
-        flex: 1 1 auto;
-        flex-direction: column;
-        gap: var(--rt-space-0-5);
-    }
+        &__icon {
+            flex-shrink: 0;
+        }
 
-    &__description {
-        color: var(--rt-color-text-muted);
-        font-size: var(--rt-text-xs);
-        font-weight: var(--rt-font-weight-regular);
-    }
+        &__content {
+            display: flex;
+            min-width: 0;
+            flex: 1 1 auto;
+            flex-direction: column;
+            gap: var(--rt-space-0-5);
+        }
 
-    &__meta {
-        color: var(--rt-color-text-muted);
-        font-size: var(--rt-text-xs);
-        font-weight: var(--rt-font-weight-regular);
-    }
+        &__description {
+            color: var(--rt-color-text-muted);
+            font-size: var(--rt-text-xs);
+            font-weight: var(--rt-font-weight-regular);
+        }
 
-    &__actions {
-        display: flex;
-        flex-wrap: wrap;
-        align-items: center;
-        gap: var(--rt-space-2);
-        margin-block-start: var(--rt-space-1);
-    }
+        &__meta {
+            color: var(--rt-color-text-muted);
+            font-size: var(--rt-text-xs);
+            font-weight: var(--rt-font-weight-regular);
+        }
 
-    & &__action {
-        align-self: flex-start;
-    }
+        &__actions {
+            display: flex;
+            flex-wrap: wrap;
+            align-items: center;
+            gap: var(--rt-space-2);
+            margin-block-start: var(--rt-space-1);
+        }
 
-    & &__close {
-        flex-shrink: 0;
-        align-self: flex-start;
-        margin-inline-start: auto;
-        opacity: 0;
-        transition: opacity var(--rt-duration-fast);
-    }
+        & &__action {
+            align-self: flex-start;
+        }
 
-    &:hover &__close,
-    & &__close:focus-visible {
-        opacity: 1;
-    }
+        & &__close {
+            flex-shrink: 0;
+            align-self: flex-start;
+            margin-inline-start: auto;
+            opacity: 0;
+            transition: opacity var(--rt-toast-fade-duration);
+        }
 
-    @media (prefers-reduced-motion) {
-        transition: none;
+        &:hover &__close,
+        & &__close:focus-visible {
+            opacity: 1;
+        }
 
-        > * {
+        @media (prefers-reduced-motion) {
             transition: none;
+
+            > * {
+                transition: none;
+            }
         }
     }
 }

package/src/lib/components/toast/rt-toaster.component.scss

@@ -1,45 +1,47 @@
-.rt-toaster {
-    --width: 356px;
-    --toaster-offset: 32px;
-
-    position: fixed;
-    z-index: 1100;
-    width: var(--width);
-    box-sizing: border-box;
-    padding: 0;
-    margin: 0;
-    outline: none;
-
-    &--x--right {
-        right: max(var(--toaster-offset), env(safe-area-inset-right));
-    }
+@layer rt-kit.components {
+    .rt-toaster {
+        --width: 356px;
+        --toaster-offset: 32px;
+
+        position: fixed;
+        z-index: 1100;
+        width: var(--width);
+        box-sizing: border-box;
+        padding: 0;
+        margin: 0;
+        outline: none;
+
+        &--x--right {
+            right: max(var(--toaster-offset), env(safe-area-inset-right));
+        }
 
-    &--x--left {
-        left: max(var(--toaster-offset), env(safe-area-inset-left));
-    }
+        &--x--left {
+            left: max(var(--toaster-offset), env(safe-area-inset-left));
+        }
 
-    &--x--center {
-        left: 50%;
-        transform: translateX(-50%);
-    }
+        &--x--center {
+            left: 50%;
+            transform: translateX(-50%);
+        }
 
-    &--y--top {
-        top: max(var(--toaster-offset), env(safe-area-inset-top));
-    }
+        &--y--top {
+            top: max(var(--toaster-offset), env(safe-area-inset-top));
+        }
 
-    &--y--bottom {
-        bottom: max(var(--toaster-offset), env(safe-area-inset-bottom));
-    }
+        &--y--bottom {
+            bottom: max(var(--toaster-offset), env(safe-area-inset-bottom));
+        }
 
-    @media (width <= 480px) {
-        --toaster-offset: 16px;
+        @media (width <= 480px) {
+            --toaster-offset: 16px;
 
-        right: var(--toaster-offset);
-        left: var(--toaster-offset);
-        width: auto;
+            right: var(--toaster-offset);
+            left: var(--toaster-offset);
+            width: auto;
 
-        &--x--center {
-            transform: none;
+            &--x--center {
+                transform: none;
+            }
         }
     }
 }