@finqu/cool 1.3.0 → 2.0.2

package/scss/_toast.scss

@@ -0,0 +1,277 @@
+@use "variables" as *;
+/* Toast ========================================================================== */
+
+@mixin cool-toast {
+    // ── Container: fixed overlay per placement zone ──────────────────────
+    .toast-container {
+        // Offset from edge — overridable per-instance via inline custom props
+        --_toast-offset-x: var(--cool-toast-offset-x);
+        --_toast-offset-y: var(--cool-toast-offset-y);
+        --_toast-gap: var(--cool-toast-gap);
+        --_toast-stack-offset: var(--cool-toast-stack-offset);
+        --_toast-max-visible: 3;
+        --_toast-animation-easing: ease-in-out;
+        --_toast-transform-origin-x: left;
+        --_toast-transform-origin-y: top;
+
+        position: fixed;
+        z-index: var(--cool-zindex-toast);
+        display: grid;
+        margin-block: 0;
+        margin-inline: 0;
+        transition: gap var(--cool-toast-transition-duration) var(--_toast-animation-easing);
+        padding: var(--_toast-offset-y) var(--_toast-offset-x);
+        transform-origin: var(--_toast-transform-origin-x) var(--_toast-transform-origin-y);
+        translate: 0 0 0;
+        gap: 0;
+
+        // ── Placement: vertical ─────────────────────────────────────────
+        &[data-placement^="top-"] {
+            top: 0;
+            flex-direction: column-reverse; // newest on top
+        }
+
+        &[data-placement^="bottom-"] {
+            bottom: 0;
+            flex-direction: column; // newest on bottom
+        }
+
+        // ── Placement: horizontal ───────────────────────────────────────
+        &[data-placement$="-left"] {
+            left: 0;
+            justify-items: start;
+        }
+
+        &[data-placement$="-center"] {
+            left: 0;
+            right: 0;
+            margin-inline: auto;
+            justify-items: center;
+        }
+
+        &[data-placement$="-right"] {
+            right: 0;
+            justify-items: end;
+            --_toast-transform-origin-x: right;
+        }
+
+        // ── Transform origin per placement direction ────────────────────
+        &[data-placement^="top-"] .toast {
+            --_toast-transform-origin-y: top;
+        }
+
+        &[data-placement^="bottom-"] .toast {
+            --_toast-transform-origin-y: bottom;
+        }
+
+        &[data-placement$="-center"] .toast {
+            --_toast-transform-origin-y: center;
+        }
+
+        .toast {
+            transition:
+                grid-area var(--cool-toast-transition-duration) var(--_toast-animation-easing),
+                scale var(--cool-toast-transition-duration) var(--_toast-animation-easing),
+                opacity var(--cool-toast-transition-duration) var(--_toast-animation-easing),
+                translate var(--cool-toast-transition-duration) var(--_toast-animation-easing);
+        }
+
+        // ── Stacking (collapsed state) ──────────────────────────────────
+        // Each toast has --_toast-index set by JS (0 = front, 1 = behind, …)
+        // Toasts behind the front-most get progressively smaller + more transparent
+
+        &:not(:hover) {
+            // top-* uses column-reverse: older items are below newest,
+            // negative margin-top pulls them UP behind the newest
+            &[data-placement^="top-"] .toast {
+                &:not(:last-child) {
+                    translate: 0 calc((var(--_toast-index)) * var(--_toast-stack-offset)) 0;
+                }
+
+                &[data-toast-hidden="true"] {
+                    translate: 0 0 0;
+                }
+            }
+
+            // bottom-* and center-* use normal column: older items are above newest,
+            // negative margin-bottom pulls the next item UP behind
+            &[data-placement^="bottom-"] .toast,
+            &[data-placement^="center-"] .toast {
+                &:not(:last-child) {
+                    translate: 0 calc(-1 * (var(--_toast-index)) * var(--_toast-stack-offset)) 0;
+                }
+
+                &[data-toast-hidden="true"] {
+                    translate: 0 0 0;
+                }
+            }
+
+            .toast {
+                // Scale + opacity based on index for depth effect
+                scale: calc(1 - var(--_toast-index, 0) * var(--cool-toast-stack-scale));
+                opacity: calc(1 - var(--_toast-index, 0) * var(--cool-toast-stack-opacity));
+
+                &[data-toast-hidden="true"] {
+                    opacity: 0;
+                }
+            }
+        }
+
+        // ── Expanded state (hover) ──────────────────────────────────────
+        &:hover {
+            .toast {
+                scale: 1;
+                opacity: 1;
+                translate: 0 0 0;
+                grid-area: auto;
+
+                &[data-toast-hidden="true"] {
+                    opacity: 1;
+                }
+            }
+
+            gap: var(--_toast-gap);
+        }
+    }
+
+    // ── Individual toast ─────────────────────────────────────────────────
+    .toast {
+        position: relative;
+        display: block;
+        pointer-events: auto;
+        max-width: var(--cool-toast-max-width, 420px);
+        width: max-content;
+        z-index: calc(var(--_toast-max-visible, 3) - var(--_toast-index, 0));
+        will-change: scale, opacity, translate, grid-area;
+        opacity: 0;
+        grid-area: 1/1;
+        min-width: 220px;
+
+        &.show {
+            opacity: 1;
+        }
+    }
+
+    // ── Inner wrapper ────────────────────────────────────────────────────
+    .toast-inner {
+        background-clip: padding-box;
+        background-color: var(--cool-toast-bg);
+        border-radius: var(--cool-toast-border-radius);
+        font-size: var(--cool-toast-font-size);
+        word-wrap: break-word;
+        font-family: var(--cool-font-family-base);
+        font-style: normal;
+        font-weight: var(--cool-font-weight-base);
+        line-height: var(--cool-line-height-base);
+        text-align: start;
+        text-decoration: none;
+        text-shadow: none;
+        text-transform: none;
+        letter-spacing: normal;
+        word-break: normal;
+        word-spacing: normal;
+        white-space: normal;
+        line-break: auto;
+    }
+
+    button[data-toast-close] {
+        background-color: transparent;
+        border: 0;
+        color: var(--cool-toast-header-color);
+        opacity: 0.75;
+        line-height: 0;
+        padding: 0;
+        cursor: pointer;
+
+        svg {
+            pointer-events: none;
+        }
+
+        &:hover,
+        &:focus {
+            opacity: 1;
+            outline: 0;
+        }
+    }
+
+    // ── Header ───────────────────────────────────────────────────────────
+    .toast-header {
+        display: flex;
+        align-items: center;
+        padding: var(--cool-toast-header-padding-y) var(--cool-toast-header-padding-x) 0;
+        gap: var(--cool-toast-header-gap, 8px);
+        margin-top: 0;
+        margin-bottom: 0;
+        color: var(--cool-toast-header-color);
+        background-color: var(--cool-toast-header-bg);
+        border-color: var(--cool-toast-header-bg);
+        font-size: var(--cool-font-size-base);
+        border-width: var(--cool-toast-border-width);
+        border-style: solid;
+        border-top-left-radius: calc(var(--cool-border-radius) - var(--cool-toast-border-width));
+        border-top-right-radius: calc(var(--cool-border-radius) - var(--cool-toast-border-width));
+
+        span {
+            font-weight: var(--cool-font-weight-bold);
+        }
+
+        &:empty {
+            display: none;
+        }
+    }
+
+    // ── Body ─────────────────────────────────────────────────────────────
+    .toast-body {
+        padding: var(--cool-toast-body-padding-y) var(--cool-toast-body-padding-x);
+        color: var(--cool-toast-body-color);
+        -webkit-font-smoothing: subpixel-antialiased;
+
+        &:has(> button[data-toast-close]) {
+            display: grid;
+            grid-template-columns: 1fr auto;
+        }
+    }
+
+    // ── Icon ─────────────────────────────────────────────────────────────
+    .toast-icon {
+        --icon-size: 16px;
+        flex-shrink: 0;
+        width: var(--icon-size);
+        height: var(--icon-size);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        &:has(> img) {
+            --icon-size: 24px;
+        }
+
+        img {
+            --icon-radius: var(
+                --cool-toast-icon-border-radius,
+                calc(
+                    var(--cool-border-radius) - var(--cool-toast-border-width) - var(--cool-toast-header-padding-y) / 2
+                )
+            );
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            border-radius: var(--icon-radius);
+        }
+
+        i,
+        svg {
+            font-size: calc(var(--icon-size) * 0.625);
+            color: var(--cool-toast-body-color);
+            opacity: 0.75;
+        }
+    }
+}
+
+@if $cool-use-component-layer {
+    @layer components {
+        @include cool-toast;
+    }
+} @else {
+    @include cool-toast;
+}

package/scss/_tooltip.scss

@@ -0,0 +1,130 @@
+@use "variables" as *;
+/* Tooltip ========================================================================== */
+
+@mixin cool-tooltip {
+    .tooltip {
+        position: fixed;
+        z-index: var(--cool-zindex-tooltip);
+        display: block;
+        margin: var(--cool-tooltip-margin);
+        font-size: var(--cool-tooltip-font-size);
+        word-wrap: break-word;
+        opacity: 0;
+        -webkit-font-smoothing: subpixel-antialiased;
+        font-family: var(--cool-font-family-base);
+        font-style: normal;
+        font-weight: var(--cool-font-weight-base);
+        line-height: var(--cool-line-height-base);
+        text-align: start;
+        text-decoration: none;
+        text-shadow: none;
+        text-transform: none;
+        letter-spacing: normal;
+        word-break: normal;
+        word-spacing: normal;
+        white-space: normal;
+        line-break: auto;
+
+        &.show {
+            opacity: var(--cool-tooltip-opacity);
+        }
+
+        .arrow {
+            position: absolute;
+            display: block;
+            width: var(--cool-tooltip-arrow-width);
+            height: var(--cool-tooltip-arrow-height);
+
+            &::before {
+                position: absolute;
+                content: "";
+                border-color: transparent;
+                border-style: solid;
+            }
+        }
+    }
+
+    .tooltip-top {
+        padding: var(--cool-tooltip-arrow-height) 0;
+
+        .arrow {
+            bottom: 0;
+
+            &::before {
+                top: 0;
+                border-width: var(--cool-tooltip-arrow-height) calc(var(--cool-tooltip-arrow-width) * 0.5) 0;
+                border-top-color: var(--cool-tooltip-arrow-color);
+            }
+        }
+    }
+
+    .tooltip-right {
+        padding: 0 var(--cool-tooltip-arrow-height);
+
+        .arrow {
+            left: 0;
+            width: var(--cool-tooltip-arrow-height);
+            height: var(--cool-tooltip-arrow-width);
+
+            &::before {
+                right: 0;
+                border-width: calc(var(--cool-tooltip-arrow-width) * 0.5) var(--cool-tooltip-arrow-height)
+                    calc(var(--cool-tooltip-arrow-width) * 0.5) 0;
+                border-right-color: var(--cool-tooltip-arrow-color);
+            }
+        }
+    }
+
+    .tooltip-bottom {
+        padding: var(--cool-tooltip-arrow-height) 0;
+
+        .arrow {
+            top: 0;
+
+            &::before {
+                bottom: 0;
+                border-width: 0 calc(var(--cool-tooltip-arrow-width) * 0.5) var(--cool-tooltip-arrow-height);
+                border-bottom-color: var(--cool-tooltip-arrow-color);
+            }
+        }
+    }
+
+    .tooltip-left {
+        padding: 0 var(--cool-tooltip-arrow-height);
+
+        .arrow {
+            right: 0;
+            width: var(--cool-tooltip-arrow-height);
+            height: var(--cool-tooltip-arrow-width);
+
+            &::before {
+                left: 0;
+                border-width: calc(var(--cool-tooltip-arrow-width) * 0.5) 0 calc(var(--cool-tooltip-arrow-width) * 0.5)
+                    var(--cool-tooltip-arrow-height);
+                border-left-color: var(--cool-tooltip-arrow-color);
+            }
+        }
+    }
+
+    .tooltip-inner {
+        max-width: var(--cool-tooltip-max-width);
+        padding: var(--cool-tooltip-padding-y) var(--cool-tooltip-padding-x);
+        color: var(--cool-tooltip-color);
+        text-align: center;
+        background-color: var(--cool-tooltip-bg);
+        border-radius: var(--cool-tooltip-border-radius);
+    }
+
+    [data-toggle="tooltip"]:disabled {
+        pointer-events: auto;
+        cursor: default;
+    }
+}
+
+@if $cool-use-component-layer {
+    @layer components {
+        @include cool-tooltip;
+    }
+} @else {
+    @include cool-tooltip;
+}

package/scss/_typography.scss

@@ -0,0 +1,166 @@
+@use "variables" as *;
+/* Typography ========================================================================== */
+
+@mixin cool-typography {
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    .h1,
+    .h2,
+    .h3,
+    .h4,
+    .h5,
+    .h6 {
+        margin-top: 0;
+        margin-bottom: var(--cool-headings-margin-bottom);
+        font-family: var(--cool-headings-font-family);
+        font-weight: var(--cool-headings-font-weight);
+        line-height: var(--cool-headings-line-height);
+        color: var(--cool-headings-color);
+    }
+
+    h1,
+    .h1 {
+        font-size: var(--cool-h1-font-size);
+        @include text-truncate-generate(
+            $font-size: var(--cool-h1-font-size),
+            $line-height: var(--cool-headings-line-height)
+        );
+    }
+
+    h2,
+    .h2 {
+        font-size: var(--cool-h2-font-size);
+        @include text-truncate-generate(
+            $font-size: var(--cool-h2-font-size),
+            $line-height: var(--cool-headings-line-height)
+        );
+    }
+
+    h3,
+    .h3 {
+        font-size: var(--cool-h3-font-size);
+        @include text-truncate-generate(
+            $font-size: var(--cool-h3-font-size),
+            $line-height: var(--cool-headings-line-height)
+        );
+    }
+
+    h4,
+    .h4 {
+        font-size: var(--cool-h4-font-size);
+        @include text-truncate-generate(
+            $font-size: var(--cool-h4-font-size),
+            $line-height: var(--cool-headings-line-height)
+        );
+    }
+
+    h5,
+    .h5 {
+        font-size: var(--cool-h5-font-size);
+        @include text-truncate-generate(
+            $font-size: var(--cool-h5-font-size),
+            $line-height: var(--cool-headings-line-height)
+        );
+    }
+
+    h6,
+    .h6 {
+        font-size: var(--cool-h6-font-size);
+        @include text-truncate-generate(
+            $font-size: var(--cool-h6-font-size),
+            $line-height: var(--cool-headings-line-height)
+        );
+    }
+
+    .lead {
+        font-size: var(--cool-lead-font-size);
+        font-weight: var(--cool-lead-font-weight);
+        @include text-truncate-generate($font-size: var(--cool-lead-font-size));
+    }
+
+    .display-1 {
+        font-size: var(--cool-display1-size);
+        font-weight: var(--cool-display1-weight);
+        line-height: var(--cool-display-line-height);
+        @include text-truncate-generate(
+            $font-size: var(--cool-display1-size),
+            $line-height: var(--cool-display-line-height)
+        );
+    }
+
+    .display-2 {
+        font-size: var(--cool-display2-size);
+        font-weight: var(--cool-display2-weight);
+        line-height: var(--cool-display-line-height);
+        @include text-truncate-generate(
+            $font-size: var(--cool-display2-size),
+            $line-height: var(--cool-display-line-height)
+        );
+    }
+
+    .display-3 {
+        font-size: var(--cool-display3-size);
+        font-weight: var(--cool-display3-weight);
+        line-height: var(--cool-display-line-height);
+        @include text-truncate-generate(
+            $font-size: var(--cool-display3-size),
+            $line-height: var(--cool-display-line-height)
+        );
+    }
+
+    .display-4 {
+        font-size: var(--cool-display4-size);
+        font-weight: var(--cool-display4-weight);
+        line-height: var(--cool-display-line-height);
+        @include text-truncate-generate(
+            $font-size: var(--cool-display4-size),
+            $line-height: var(--cool-display-line-height)
+        );
+    }
+
+    hr {
+        margin-top: var(--cool-hr-margin-y);
+        margin-bottom: var(--cool-hr-margin-y);
+        border: 0;
+        border-top: var(--cool-hr-border-width) solid var(--cool-hr-border-color);
+    }
+
+    small,
+    .small {
+        font-size: var(--cool-small-font-size);
+    }
+
+    kbd {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        min-width: 2em;
+        height: 2em;
+        padding: 0 0.5em;
+        background: var(--cool-color-grey-100);
+        border: 1px solid var(--cool-color-grey-400);
+        border-radius: 0.35em;
+        font-family: inherit;
+        color: var(--cool-color-grey-800);
+
+        @media (hover: none), (pointer: coarse) {
+            display: none;
+        }
+    }
+
+    p {
+        color: currentColor;
+    }
+}
+
+@if $cool-use-base-layer {
+    @layer base {
+        @include cool-typography;
+    }
+} @else {
+    @include cool-typography;
+}