@pacem/pacem-theme-css 0.0.0-stage → 2.0.0-abel

package/src/ui/toast.css

@@ -0,0 +1,182 @@
+/*#region TOAST*/
+pacem-toast {
+    --pacem--ts-h: calc(var(--pacem-grid-cell) - 1px);
+    z-index: var(--pacem-zindex-toast);
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    overflow: visible;
+    cursor: pointer;
+    background-color: var(--pacem-color-toast-back);
+    border: 1px solid;
+    border-color: var(--pacem-color-border);
+    border-top-width: 0;
+    border-right-width: 0;
+    border-left-width: 0;
+    color: var(--pacem-color-default);
+    width: 100vw;
+    box-sizing: border-box;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    align-content: flex-start;
+    font-size: calc(1.25rem * var(--pacem-font-main-rem-factor));
+    height: var(--pacem--ts-h);
+    transform: translateY(calc(-1 * var(--pacem--ts-h)));
+    opacity: 0;
+
+    &.toast-vertical {
+        flex-direction: column;
+    }
+
+    &.toast-show {
+        transform: translateY(0);
+        opacity: 1;
+    }
+
+    /* .ToastColor(): --pacem--ts, --pacem--ts-ink */
+    &.toast-danger { --pacem--ts: var(--pacem-color-danger); --pacem--ts-ink: var(--pacem-color-danger-inverse); }
+    &.toast-error, &.fail { --pacem--ts: var(--pacem-color-error); --pacem--ts-ink: var(--pacem-color-error-inverse); }
+    &.toast-success, &.success { --pacem--ts: var(--pacem-color-success); --pacem--ts-ink: var(--pacem-color-success-inverse); }
+    &.toast-primary { --pacem--ts: var(--pacem-color-primary); --pacem--ts-ink: var(--pacem-color-primary-inverse); }
+    &.toast-accent { --pacem--ts: var(--pacem-color-accent); --pacem--ts-ink: var(--pacem-color-accent-inverse); }
+    &.toast-warning { --pacem--ts: var(--pacem-color-warning); --pacem--ts-ink: var(--pacem-color-warning-inverse); }
+    &.toast-info { --pacem--ts: var(--pacem-color-info); --pacem--ts-ink: var(--pacem-color-info-inverse); }
+
+    &:is(.toast-danger, .toast-error, .fail, .toast-success, .success, .toast-primary, .toast-accent, .toast-warning, .toast-info) {
+        background: rgb(from var(--pacem--ts) r g b / 75%);
+        border-color: var(--pacem--ts);
+        color: var(--pacem--ts-ink);
+
+        :--glows & {
+            box-shadow: 0 0 8px rgb(from var(--pacem--ts) r g b);
+        }
+    }
+
+    :--shadows & {
+        box-shadow: 0 2px 4px rgba(0,0,0,0.5);
+    }
+}
+/*#endregion*/
+
+/* container for toasts (top-right by default) */
+.pacem-toaster {
+    --pacem--ts-w: calc(var(--pacem-grid-spacing) * 10);
+    pointer-events: none;
+    position: fixed;
+    z-index: var(--pacem-zindex-toast);
+    display: flex;
+    flex-direction: column;
+    overflow: visible;
+    box-sizing: border-box;
+    padding: var(--pacem-grid-spacing);
+    top: 0;
+    right: 0;
+    bottom: auto;
+    left: auto;
+    align-content: flex-end;
+
+    pacem-toast {
+        position: static;
+        z-index: 0;
+        width: var(--pacem--ts-w);
+        overflow: hidden;
+        opacity: 0;
+        border-top-width: 1px;
+        border-right-width: 1px;
+        border-left-width: 1px;
+        box-sizing: border-box;
+        margin: 0 0 var(--pacem-grid-spacing) 0;
+        pointer-events: none;
+        border-radius: var(--pacem-border-radius);
+        /* tweak flexbox */
+        justify-content: flex-start;
+        padding: calc(var(--pacem-grid-spacing) * 2 / 3);
+        transform: translateX(calc(var(--pacem--ts-w) - var(--pacem-grid-cell))) translateY(0) translateZ(0) scale(0.25);
+        transform-origin: right center;
+
+        &.toast-show {
+            pointer-events: auto;
+            order: -1;
+            opacity: 1;
+            transform: translateX(0);
+        }
+    }
+
+    &.toaster-left {
+        align-content: flex-start;
+        right: auto;
+        left: 0;
+
+        pacem-toast {
+            transform: translateX(calc(var(--pacem-grid-cell) - var(--pacem--ts-w))) translateY(0) translateZ(0) scale(0.25);
+            transform-origin: left center;
+
+            &.toast-show {
+                transform: translateX(0);
+            }
+        }
+    }
+
+    &.toaster-bottom {
+        top: auto;
+        bottom: 0;
+        flex-direction: column-reverse;
+
+        pacem-toast {
+            margin: var(--pacem-grid-spacing) 0 0 0;
+        }
+    }
+
+    &.toaster-center {
+        align-content: center;
+        right: 0;
+        left: 0;
+
+        pacem-toast {
+            align-self: center;
+            transform-origin: 50% 0;
+            transform: translateY(-100%) translateX(0) translateZ(0) scale(0.25);
+
+            &.toast-hide {
+                transform: translateY(100%) translateX(0) translateZ(0);
+                opacity: 0;
+            }
+        }
+
+        &.toaster-bottom pacem-toast {
+            transform: translateY(100%) translateX(0) translateZ(0) scale(0.25);
+
+            &.toast-hide {
+                transform: translateY(-100%) translateX(0) translateZ(0);
+                opacity: 0;
+            }
+        }
+
+        pacem-toast.toast-show {
+            transform: translateY(0) translateX(0) translateZ(0);
+        }
+    }
+
+    &.toaster-autosize pacem-toast {
+        width: auto;
+    }
+}
+
+.pacem-animations {
+    pacem-toast {
+        transition: transform .3s var(--pacem-easing-out-sine), opacity .25s linear;
+
+        &.toast-hide {
+            transition-duration: .125s;
+            transition-timing-function: var(--pacem-easing-in-sine);
+        }
+    }
+
+    .pacem-toaster.toaster-anim.anim-bounce pacem-toast.toast-show {
+        transition: transform .3s var(--pacem-easing-out-back), opacity .25s linear;
+    }
+}

package/src/ui/toc.css

@@ -0,0 +1,58 @@
+pacem-toc {
+    display: block;
+}
+
+.pacem-toc > pacem-a {
+    display: block;
+    border-left: 2px solid transparent;
+    padding: 0 calc(var(--pacem-grid-spacing) / 2);
+    line-height: 1.5;
+
+    &.toc-focus {
+        border-color: var(--pacem-color-primary);
+        font-weight: 700;
+    }
+}
+
+.toc-item,
+.pacem-toc-item {
+    transition: padding var(--pacem-easing-out-sine) .15s;
+    cursor: pointer;
+
+    &::before {
+        pointer-events: none;
+        /* .Icon() */
+        content: 'link';
+        position: absolute;
+        display: inline-block;
+        text-align: center;
+        font-family: var(--pacem-font-icons);
+        text-transform: none;
+        letter-spacing: normal;
+        word-wrap: normal;
+        white-space: nowrap;
+        direction: ltr;
+        -webkit-font-smoothing: antialiased;
+        text-rendering: optimizeLegibility;
+        -moz-osx-font-smoothing: grayscale;
+        font-feature-settings: 'liga';
+        font-variation-settings: 'FILL' var(--pacem-font-icon-fill), 'wght' 400, 'GRAD' 0, 'opsz' 24;
+        font-size: 1em;
+        line-height: 1em;
+        top: 0;
+        left: 0;
+        transition: transform var(--pacem-easing-out-sine) .15s, opacity .1s;
+        opacity: 0;
+        transform-origin: left 50%;
+        transform: scale(0.5);
+    }
+
+    &:hover {
+        padding-left: calc(var(--pacem-grid-spacing) * 1.5);
+
+        &::before {
+            transform: scale(1);
+            opacity: 1;
+        }
+    }
+}

package/src/ui/tuner.css

@@ -0,0 +1,196 @@
+/* .Tuner(size, stroke): private properties
+     --pacem--tn-s  outer size
+     --pacem--tn-k  stroke thickness, in the 108-wide viewBox (stroke * 108 / size: precomputed)
+   The content font size is round(size / 3.2). */
+pacem-tuner {
+    --pacem--tn-s: round(up, calc(var(--pacem-grid-cell) * 1.414), 1px);
+    --pacem--tn-k: 10px;
+    width: var(--pacem--tn-s);
+    height: var(--pacem--tn-s);
+    display: block;
+    position: relative;
+
+    &::part(tuner),
+    &::part(content) {
+        top: calc(var(--pacem--tn-k) * .5);
+        left: calc(var(--pacem--tn-k) * .5);
+        width: calc(var(--pacem--tn-s) - var(--pacem--tn-k));
+        height: calc(var(--pacem--tn-s) - var(--pacem--tn-k));
+    }
+
+    &::part(tuner) {
+        position: absolute;
+        display: block;
+        fill: none;
+        stroke-width: var(--pacem--tn-k);
+        overflow: visible;
+    }
+
+    &.tuner-interactive::part(tuner) {
+        cursor: pointer;
+    }
+
+    &::part(rail) {
+        stroke: var(--pacem-color-default);
+    }
+
+    &::part(complementary-rail) {
+        display: none;
+    }
+
+    &::part(track) {
+        stroke: var(--pacem-color-border);
+    }
+
+    &.tuner-notrack::part(track) {
+        stroke: transparent;
+    }
+
+    &::part(content) {
+        position: absolute;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        pointer-events: none;
+        color: var(--pacem-color-default);
+        font-size: round(calc(var(--pacem--tn-s) / 3.2), 1px);
+    }
+
+    &.tuner-large { --pacem--tn-s: calc(2 * var(--pacem-grid-cell)); --pacem--tn-k: 8.52631579px; }
+    &.tuner-small { --pacem--tn-s: var(--pacem-grid-cell); --pacem--tn-k: 8.52631579px; }
+    &.tuner-smaller { --pacem--tn-s: calc(2 * var(--pacem-grid-spacing)); --pacem--tn-k: 9px; }
+
+    &.tuner-thin {
+        &::part(rail),
+        &::part(track) {
+            stroke-width: 3px;
+        }
+    }
+
+    &.tuner-tiny { --pacem--tn-s: var(--pacem-grid-spacing); --pacem--tn-k: 4.5px; }
+
+    /* rail */
+    &.tuner-root::part(rail) { stroke: var(--pacem-color-root); }
+    &.tuner-background::part(rail) { stroke: var(--pacem-color-background); }
+    &.tuner-default::part(rail) { stroke: var(--pacem-color-default); }
+    &.tuner-invert::part(rail) { stroke: var(--pacem-color-invert); }
+    &.tuner-primary::part(rail) { stroke: var(--pacem-color-primary); }
+    &.tuner-secondary::part(rail) { stroke: var(--pacem-color-secondary); }
+    &.tuner-accent::part(rail) { stroke: var(--pacem-color-accent); }
+    &.tuner-info::part(rail) { stroke: var(--pacem-color-info); }
+    &.tuner-success::part(rail) { stroke: var(--pacem-color-success); }
+    &.tuner-warning::part(rail) { stroke: var(--pacem-color-warning); }
+    &.tuner-danger::part(rail) { stroke: var(--pacem-color-danger); }
+    &.tuner-error::part(rail) { stroke: var(--pacem-color-error); }
+    &.tuner-disabled::part(rail) { stroke: var(--pacem-color-disabled); }
+    &.tuner-green::part(rail) { stroke: var(--pacem-color-green); }
+    &.tuner-yellow::part(rail) { stroke: var(--pacem-color-yellow); }
+    &.tuner-brown::part(rail) { stroke: var(--pacem-color-brown); }
+    &.tuner-red::part(rail) { stroke: var(--pacem-color-red); }
+    &.tuner-pink::part(rail) { stroke: var(--pacem-color-pink); }
+    &.tuner-blue::part(rail) { stroke: var(--pacem-color-blue); }
+    &.tuner-orange::part(rail) { stroke: var(--pacem-color-orange); }
+    &.tuner-purple::part(rail) { stroke: var(--pacem-color-purple); }
+    &.tuner-teal::part(rail) { stroke: var(--pacem-color-teal); }
+    &.tuner-gray::part(rail) { stroke: var(--pacem-color-gray); }
+
+    /* complementary rail */
+    &.tuner-complementary-root::part(complementary-rail) { display: inherit; stroke: var(--pacem-color-root); }
+    &.tuner-complementary-background::part(complementary-rail) { display: inherit; stroke: var(--pacem-color-background); }
+    &.tuner-complementary-default::part(complementary-rail) { display: inherit; stroke: var(--pacem-color-default); }
+    &.tuner-complementary-invert::part(complementary-rail) { display: inherit; stroke: var(--pacem-color-invert); }
+    &.tuner-complementary-primary::part(complementary-rail) { display: inherit; stroke: var(--pacem-color-primary); }
+    &.tuner-complementary-secondary::part(complementary-rail) { display: inherit; stroke: var(--pacem-color-secondary); }
+    &.tuner-complementary-accent::part(complementary-rail) { display: inherit; stroke: var(--pacem-color-accent); }
+    &.tuner-complementary-info::part(complementary-rail) { display: inherit; stroke: var(--pacem-color-info); }
+    &.tuner-complementary-success::part(complementary-rail) { display: inherit; stroke: var(--pacem-color-success); }
+    &.tuner-complementary-warning::part(complementary-rail) { display: inherit; stroke: var(--pacem-color-warning); }
+    &.tuner-complementary-danger::part(complementary-rail) { display: inherit; stroke: var(--pacem-color-danger); }
+    &.tuner-complementary-error::part(complementary-rail) { display: inherit; stroke: var(--pacem-color-error); }
+    &.tuner-complementary-disabled::part(complementary-rail) { display: inherit; stroke: var(--pacem-color-disabled); }
+    &.tuner-complementary-green::part(complementary-rail) { display: inherit; stroke: var(--pacem-color-green); }
+    &.tuner-complementary-yellow::part(complementary-rail) { display: inherit; stroke: var(--pacem-color-yellow); }
+    &.tuner-complementary-brown::part(complementary-rail) { display: inherit; stroke: var(--pacem-color-brown); }
+    &.tuner-complementary-red::part(complementary-rail) { display: inherit; stroke: var(--pacem-color-red); }
+    &.tuner-complementary-pink::part(complementary-rail) { display: inherit; stroke: var(--pacem-color-pink); }
+    &.tuner-complementary-blue::part(complementary-rail) { display: inherit; stroke: var(--pacem-color-blue); }
+    &.tuner-complementary-orange::part(complementary-rail) { display: inherit; stroke: var(--pacem-color-orange); }
+    &.tuner-complementary-purple::part(complementary-rail) { display: inherit; stroke: var(--pacem-color-purple); }
+    &.tuner-complementary-teal::part(complementary-rail) { display: inherit; stroke: var(--pacem-color-teal); }
+    &.tuner-complementary-gray::part(complementary-rail) { display: inherit; stroke: var(--pacem-color-gray); }
+}
+
+/* .TunerWrapper(color): --pacem--tw */
+.pacem-tuner-wrapper {
+    --pacem--tw: var(--pacem-color-default);
+    transition: var(--pacem-easing-out-sine) .25s;
+    padding: calc(var(--pacem-grid-spacing) / 3);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    /* (the shorthand resets position, repeat and size, as in Less) */
+    background: radial-gradient(circle closest-side,
+        rgb(from var(--pacem--tw) r g b / 0) 50%, rgb(from var(--pacem--tw) r g b / .2) 85%, rgb(from var(--pacem--tw) r g b / .5) 87%,
+        rgb(from var(--pacem--tw) r g b / 0) 88%, rgb(from var(--pacem--tw) r g b / 0) 88%, rgb(from var(--pacem--tw) r g b / .1) 90%,
+        rgb(from var(--pacem--tw) r g b / .1) 91%, rgb(from var(--pacem--tw) r g b / 0) 96%, rgb(from var(--pacem--tw) r g b / .25) 98%,
+        rgb(from var(--pacem--tw) r g b / 0) 100%);
+
+    pacem-tuner {
+        &::part(track) {
+            stroke: rgb(from var(--pacem--tw) r g b);
+        }
+
+        &::part(tuner),
+        &::part(content) {
+            top: 1.5px;
+            left: 1.5px;
+            width: calc(100% - 3px);
+            height: calc(100% - 3px);
+        }
+
+        &::part(rail),
+        &::part(complementary-rail),
+        &::part(track) {
+            stroke-width: 3px;
+        }
+
+        &::part(track) {
+            stroke-opacity: 0.1;
+        }
+    }
+
+    &.tuner-root { --pacem--tw: var(--pacem-color-root); }
+    &.tuner-background { --pacem--tw: var(--pacem-color-background); }
+    &.tuner-default { --pacem--tw: var(--pacem-color-default); }
+    &.tuner-invert { --pacem--tw: var(--pacem-color-invert); }
+    &.tuner-primary { --pacem--tw: var(--pacem-color-primary); }
+    &.tuner-secondary { --pacem--tw: var(--pacem-color-secondary); }
+    &.tuner-accent { --pacem--tw: var(--pacem-color-accent); }
+    &.tuner-info { --pacem--tw: var(--pacem-color-info); }
+    &.tuner-success { --pacem--tw: var(--pacem-color-success); }
+    &.tuner-warning { --pacem--tw: var(--pacem-color-warning); }
+    &.tuner-danger { --pacem--tw: var(--pacem-color-danger); }
+    &.tuner-error { --pacem--tw: var(--pacem-color-error); }
+    &.tuner-disabled { --pacem--tw: var(--pacem-color-disabled); }
+    &.tuner-green { --pacem--tw: var(--pacem-color-green); }
+    &.tuner-yellow { --pacem--tw: var(--pacem-color-yellow); }
+    &.tuner-brown { --pacem--tw: var(--pacem-color-brown); }
+    &.tuner-red { --pacem--tw: var(--pacem-color-red); }
+    &.tuner-pink { --pacem--tw: var(--pacem-color-pink); }
+    &.tuner-blue { --pacem--tw: var(--pacem-color-blue); }
+    &.tuner-orange { --pacem--tw: var(--pacem-color-orange); }
+    &.tuner-purple { --pacem--tw: var(--pacem-color-purple); }
+    &.tuner-teal { --pacem--tw: var(--pacem-color-teal); }
+    &.tuner-gray { --pacem--tw: var(--pacem-color-gray); }
+
+    &.tuner-disabled {
+        background-size: 0%;
+    }
+}
+
+.pacem-animations .pacem-tuner-wrapper:not(.pacem-viewport-aware),
+.pacem-animations .pacem-tuner-wrapper.pacem-viewport-aware.pacem-in-viewport,
+.pacem-animations pacem-tuner:not(.pacem-viewport-aware),
+.pacem-animations pacem-tuner.pacem-viewport-aware.pacem-in-viewport {
+    animation: pop-anim .3s var(--pacem-easing-out-back) .4s both;
+}

package/src/ui/view.css

@@ -0,0 +1,30 @@
+pacem-view {
+    display: block;
+}
+
+.pacem-animations pacem-view:is(.pacem-animatable, .pacem-anim) {
+    animation: none !important;
+    transition: transform var(--pacem-easing-in-out-sine) .175s, opacity .2s;
+
+    &.view-fetching {
+        transform: translateY(calc(-1 * var(--pacem-grid-spacing))) translateZ(0);
+        opacity: 0;
+    }
+}
+
+pacem-slideshow,
+pacem-slide {
+    display: block;
+}
+
+pacem-slideshow {
+    pointer-events: none;
+}
+
+pacem-slide {
+    pointer-events: auto;
+}
+
+pacem-tweet {
+    display: inline-block;
+}