@pacem/pacem-theme-css 0.0.0-stage → 1.1.0-sierpinski

package/src/ui/window.css

@@ -0,0 +1,287 @@
+/* dock width: 1 grid spacing */
+pacem-window-area {
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    padding: 0;
+    margin: 0;
+    overflow: hidden;
+    pointer-events: none;
+    display: grid;
+    grid-template-columns: 1fr var(--pacem-grid-spacing);
+    grid-gap: 0;
+    grid-template-areas: 'float dock';
+    grid-auto-rows: min-content;
+    z-index: calc(var(--pacem-zindex-lightbox) - 2);
+}
+
+/* .WinTitle(background, color): --pacem--wt, --pacem--wt-ink */
+pacem-window > .window-title,
+pacem-window-area > pacem-adapter.windows-adapter ol.pacem-adapter-dashboard > li > pacem-button.pacem-adapter-page > pacem-span {
+    --pacem--wt: var(--pacem-color-button-back);
+    --pacem--wt-ink: var(--pacem-color-button-fore);
+}
+
+pacem-window {
+    --pacem--win-h: calc(var(--pacem-grid-spacing) * 1.3333);
+    display: grid;
+    grid-column-gap: calc(var(--pacem-grid-spacing) / 3);
+    grid-row-gap: calc(var(--pacem-grid-spacing) / 3);
+    grid-template-columns: 1fr auto;
+    grid-template-rows: auto 1fr;
+    grid-template-areas: 'title buttons' 'content content';
+    padding: calc(var(--pacem-grid-spacing) / 2);
+    border-radius: var(--pacem-border-radius);
+    box-sizing: border-box;
+    background-color: var(--pacem-color-background);
+    min-width: var(--pacem-layout-aside-width);
+    min-height: calc(var(--pacem--win-h) + var(--pacem-grid-spacing));
+
+    &.window-border {
+        border: 1px solid var(--pacem-color-window-border);
+    }
+
+    :--blur & {
+        background-color: rgb(from var(--pacem-color-background) r g b / 50%);
+        backdrop-filter: blur(6px);
+    }
+
+    /* corners (when the border radius is 0): drawn by layout/corners.css */
+    &.window-corners {
+        --pacem--corners-color: rgb(from var(--pacem-color-window-border) r g b / calc(1 - sign(var(--pacem-border-radius))));
+
+        &.corners-safe {
+            margin: calc(1px - 1px * sign(var(--pacem-border-radius)));
+        }
+    }
+
+    > .window-title {
+        grid-area: title;
+        font-family: var(--pacem-font-main);
+        font-size: calc(1.1rem * var(--pacem-font-main-rem-factor));
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        cursor: default;
+
+        > * {
+            pointer-events: none;
+        }
+    }
+
+    &.window-accent > .window-title { --pacem--wt: var(--pacem-color-accent); --pacem--wt-ink: var(--pacem-color-accent-inverse); }
+    &.window-primary > .window-title { --pacem--wt: var(--pacem-color-primary); --pacem--wt-ink: var(--pacem-color-primary-inverse); }
+    &.window-success > .window-title { --pacem--wt: var(--pacem-color-success); --pacem--wt-ink: var(--pacem-color-success-inverse); }
+    &.window-danger > .window-title { --pacem--wt: var(--pacem-color-danger); --pacem--wt-ink: var(--pacem-color-danger-inverse); }
+    &.window-warning > .window-title { --pacem--wt: var(--pacem-color-warning); --pacem--wt-ink: var(--pacem-color-warning-inverse); }
+
+    > .window-buttons {
+        grid-area: buttons;
+        padding: 0;
+        margin: 0;
+
+        pacem-button[data-icon-glyph]::before {
+            font-size: calc(1.125rem * var(--pacem-font-std-rem-factor));
+            padding: 0;
+            margin: 0;
+            vertical-align: middle;
+        }
+    }
+
+    > .window-content {
+        grid-area: content;
+        overflow: auto;
+
+        :--dark-scheme & {
+            background-color: rgb(from var(--pacem-theme-light) r g b / 1.25%);
+        }
+
+        :--light-scheme & {
+            background-color: rgb(from var(--pacem-theme-dark) r g b / 1.25%);
+        }
+    }
+
+    > .window-title,
+    > .window-buttons pacem-button {
+        height: var(--pacem--win-h);
+        line-height: var(--pacem--win-h);
+    }
+
+    > .window-content,
+    > .window-title,
+    > .window-buttons pacem-button {
+        padding: 0 calc(var(--pacem-grid-spacing) / 3);
+    }
+
+    &.window-min:not(.window-dock) {
+        padding-bottom: calc(var(--pacem-grid-spacing) / 2 - var(--pacem-grid-spacing) / 3);
+        height: calc(var(--pacem--win-h) + var(--pacem-grid-spacing)) !important;
+
+        .window-content {
+            opacity: 0;
+        }
+    }
+}
+
+pacem-window > .window-title,
+pacem-window-area > pacem-adapter.windows-adapter ol.pacem-adapter-dashboard > li > pacem-button.pacem-adapter-page > pacem-span {
+    background-color: rgb(from var(--pacem--wt) r g b / 80%);
+    color: var(--pacem--wt-ink);
+
+    &:hover {
+        background-color: var(--pacem--wt);
+    }
+}
+
+pacem-window-area > pacem-window {
+    grid-area: float;
+    position: absolute;
+    top: calc(var(--pacem-layout-header-height) + var(--pacem-grid-spacing));
+    left: calc(var(--pacem-layout-aside-width) + var(--pacem-grid-spacing));
+    width: 25vw;
+    height: 15.45vw;
+    pointer-events: auto;
+    box-shadow: 0 calc(var(--pacem-grid-spacing) / 12) calc(var(--pacem-grid-spacing) / 3) rgba(0,0,0,0.125);
+
+    :--shadows & {
+        box-shadow: 0 calc(var(--pacem-grid-spacing) / 3) var(--pacem-grid-spacing) rgba(0,0,0,0.25);
+    }
+
+    &.window-dock {
+        position: fixed;
+        transform: translateX(var(--pacem-layout-aside-width)) !important;
+        z-index: 1 !important;
+        width: var(--pacem-layout-aside-width) !important;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        left: auto;
+        height: auto !important;
+        padding-right: calc(var(--pacem-grid-spacing) * 1.5);
+        opacity: 0;
+
+        &.dock-open:not(.docking-in) {
+            transform: matrix(1,0,0,1,0,0) !important;
+            z-index: 2 !important;
+            opacity: 1;
+        }
+    }
+}
+
+/* adapter */
+pacem-window-area > pacem-adapter.windows-adapter {
+    grid-area: dock;
+    z-index: 2;
+
+    > pacem-button.pacem-adapter-previous,
+    > pacem-button.pacem-adapter-next {
+        pointer-events: none !important;
+        display: none !important;
+    }
+
+    ol.pacem-adapter-dashboard {
+        display: grid;
+        grid-row-gap: calc(var(--pacem-grid-spacing) / 10);
+        padding: 0;
+        margin: 0;
+
+        > li {
+            list-style-type: none;
+            padding: 0;
+            margin: 0;
+
+            > pacem-button.pacem-adapter-page {
+                pointer-events: auto;
+                padding: 0 0 0 calc(var(--pacem-grid-spacing) / 6);
+                height: var(--pacem-grid-cell);
+                box-sizing: border-box;
+
+                :--shadows & {
+                    box-shadow: 0 calc(var(--pacem-grid-spacing) / 8) calc(var(--pacem-grid-spacing) / 4) rgba(0,0,0,.3333);
+                }
+
+                > pacem-span {
+                    display: block;
+                    writing-mode: vertical-lr;
+                    text-align: start;
+                    padding: calc(var(--pacem-grid-spacing) / 6) 0;
+                    box-sizing: border-box;
+                    height: 100%;
+                    width: calc(var(--pacem-grid-spacing) * 5 / 6);
+                    line-height: calc(var(--pacem-grid-spacing) * 5 / 6);
+                    font-size: calc(var(--pacem-grid-spacing) * 2 / 3);
+                    overflow: hidden;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                }
+
+                &.pacem-adapter-active > pacem-span {
+                    --pacem--wt: var(--pacem-color-primary);
+                    --pacem--wt-ink: var(--pacem-color-primary-inverse);
+                }
+            }
+        }
+    }
+}
+
+.pacem-body {
+    &[footer] {
+        pacem-window-area > pacem-window.window-dock {
+            bottom: var(--pacem-layout-footer-height);
+        }
+
+        pacem-window-area > pacem-adapter.windows-adapter ol.pacem-adapter-dashboard {
+            padding-bottom: var(--pacem-layout-footer-height);
+        }
+    }
+
+    &[bigfooter] {
+        pacem-window-area > pacem-window.window-dock {
+            bottom: var(--pacem-layout-bigfooter-height);
+        }
+
+        pacem-window-area > pacem-adapter.windows-adapter ol.pacem-adapter-dashboard {
+            padding-bottom: var(--pacem-layout-bigfooter-height);
+        }
+    }
+
+    &[header] {
+        pacem-window-area > pacem-window.window-dock {
+            top: var(--pacem-layout-header-height);
+        }
+
+        pacem-window-area > pacem-adapter.windows-adapter ol.pacem-adapter-dashboard {
+            padding-top: var(--pacem-layout-header-height);
+        }
+    }
+}
+
+.pacem-animations pacem-window:not(.window-dock) {
+    animation: fade-in var(--pacem-easing-out-sine) .2s;
+
+    .window-content {
+        transition: opacity linear .2s;
+    }
+
+    &:not(.window-rescaling) {
+        transition: height var(--pacem-easing-in-out-sine) .15s;
+    }
+}
+
+.pacem-animations pacem-window.window-dock:not(.docking-in) {
+    transition: transform var(--pacem-easing-in-out-sine) .3s, opacity linear .2s .1s;
+
+    &.dock-open {
+        transition: transform var(--pacem-easing-in-out-sine) .3s, opacity linear .2s;
+    }
+}
+
+.pacem-animations pacem-window-area > pacem-adapter.windows-adapter ol.pacem-adapter-dashboard > li > pacem-button.pacem-adapter-page {
+    animation: list-item-right var(--pacem-easing-out-sine) .35s;
+
+    > pacem-span {
+        transition: background-color linear .3s;
+    }
+}

package/templates/theme.css

@@ -0,0 +1,28 @@
+/* Embedded in the bundles by `pacem-theme-css build` (layer pacem.app: it overrides Pacem's own rules,
+   while any unlayered stylesheet of the application still overrides it).
+
+   Available here:
+   - every token, e.g. var(--pacem-color-primary), var(--pacem-grid-spacing)
+       (list them: `npx pacem-theme-css tokens [--theme light]`);
+   - theme traits, to style some themes only: :--shadows, :--no-gradients, :--dark-scheme...
+       (list them: `npx pacem-theme-css traits`; custom traits come from the "traits" of the themes);
+   - @custom-selector :--alias <selector>;  file-local aliases;
+   - breakpoints: @media (--pacem-md), (--pacem-below-sm)...;
+   - native nesting.
+   Class and element names are written with the `pacem` prefix: the build applies the configured one. */
+
+/* token overrides valid in every theme (per-theme ones: the "tokens" file of the theme) */
+:root, [data-theme] {
+    /* --pacem-border-radius: 4px; */
+}
+
+/* example: rounded cards, with a soft shadow where the theme has no shadows */
+/*
+.pacem-card {
+    border-radius: calc(var(--pacem-border-radius) * 2);
+
+    :--no-shadows & {
+        box-shadow: 0 2px 8px rgb(0 0 0 / .08);
+    }
+}
+*/

package/themes/dark.css

@@ -0,0 +1,6 @@
+/* Generated from theme/less by theme/css/tools/tokens.ts, then curated by hand. */
+@layer pacem.tokens {
+    :root[dark], [data-theme="dark"] {
+        color-scheme: dark;
+    }
+}

package/themes/light.css

@@ -0,0 +1,97 @@
+/* Generated from theme/less by theme/css/tools/tokens.ts, then curated by hand. */
+@layer pacem.tokens {
+    :root[light], [data-theme="light"] {
+        color-scheme: light;
+        /* light scheme: derivations mix towards black */
+        --pacem-mix-tint: #000;
+        --pacem-mix-shade: #fff;
+        --pacem-mix-hover: 10%;
+        --pacem-mix-emphasis: 20%;
+        --pacem-mix-inverse-hover: 7%;
+        --pacem-mix-container: 75%;
+        --pacem-mix-container-inverse: 25%;
+        --pacem-font-std-api-url: 'https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;700&display=swap';
+        --pacem-font-std: 'Roboto Condensed', 'Segoe UI', Helvetica, sans-serif;
+        --pacem-font-main: 'PT Sans Narrow', 'Segoe UI Light', Helvetica, sans-serif;
+        --pacem-font-icons: 'Material Symbols Outlined';
+        --pacem-font-size: 14px;
+        --pacem-font-weight: 400;
+        --pacem-font-rem-factor: 1;
+        --pacem-font-icon-fill: 0;
+        --pacem-theme-blue: #fff;
+        --pacem-theme-red: #ff005a;
+        --pacem-theme-teal: #429bbb;
+        --pacem-theme-lightblue: rgb(242,242,242);
+        --pacem-color-background-alt: #efefef;
+        --pacem-color-danger: #c70808;
+        --pacem-color-tech: rgb(from var(--pacem-color-highlight) r g b / 60%);
+        --pacem-color-watermark: #c0c0c0;
+        --pacem-theme-light: #fff;
+        --pacem-color-default: #262b3e;
+        --pacem-color-default-inverse: #fff;
+        --pacem-color-highlight: #77c77d;
+        --pacem-color-highlight-fore: var(--pacem-color-default);
+        --pacem-color-success-inverse: #fff;
+        --pacem-color-codeblock-back: #f6f6f6;
+        --pacem-color-disabled: var(--pacem-color-watermark);
+        --pacem-color-warning: #c6b800;
+        --pacem-flag-shadows: 0;
+        --pacem-flag-gradients: 0;
+        --pacem-flag-glows: 0;
+        --pacem-flag-dark: 0;
+        --pacem-border-radius: 6px;
+        --pacem-color-scrollbar-thumb: #e4e7e9;
+        --pacem-color-yellow: #e4d102;
+        --pacem-color-yellow-inverse: #fff;
+        --pacem-color-orange: #e48d1c;
+        --pacem-color-orange-inverse: #fff;
+        --pacem-color-gray: #a8a8a8;
+        --pacem-color-gray-inverse: #fff;
+        --pacem-field-outline-width: 0;
+        --pacem-color-input-back: rgba(0,0,0,0.025);
+        --pacem-color-input-fore: rgb(from var(--pacem-color-default) r g b / 75%);
+        --pacem-color-button-border-light: #fff;
+        --pacem-color-button-border: #e0e3e8;
+        --pacem-color-button-border-dark: #d0d3d8;
+        --pacem-color-button-back: var(--pacem-theme-lightblue);
+        --pacem-color-button-fore: var(--pacem-color-default);
+        --pacem-color-button-back-hover: hsl(from var(--pacem-color-button-back) h s max(0, l - var(--pacem-button-hover-percentage)));
+        --pacem-contextmenu-hr-back: rgb(from var(--pacem-theme-dark) r g b / 7%);
+        --pacem-contextmenu-hr-border: 1px solid rgb(from var(--pacem-theme-light) r g b / 60%);
+        --pacem-button-fontsize: calc(1rem * var(--pacem-font-rem-factor));
+        --pacem-color-border-light: #fff;
+        --pacem-color-border-dawn: #f5f5f5;
+        --pacem-color-border-dusk: #f5f5f5;
+        --pacem-color-border-dark: #eee;
+        --pacem-color-shadow: rgba(0,0,0,0.05);
+        --pacem-datarow-alt-color: rgb(from hsl(from var(--pacem-color-background-alt) h s max(0, l - 5)) r g b / 20%);
+        --pacem-menu-link-fontfamily: var(--pacem-font-main);
+        --pacem-menu-link-fontsize: calc(1rem * var(--pacem-font-main-rem-factor));
+        --pacem-color-breadcrumb-home-fore: var(--pacem-color-accent);
+        --pacem-color-balloon: #e4e7e9;
+        --pacem-flag-balloon-shadows: 1;
+        --pacem-shadow-balloon: 0 calc(var(--pacem-grid-spacing) / 6) calc(var(--pacem-grid-spacing) / 3) rgb(from var(--pacem-theme-dark) r g b / 25%);
+        --pacem-color-contextmenu-hover-back: hsl(from var(--pacem-color-button-back) h s min(100, l + 1));
+        --pacem-color-contextmenu-hover-fore: hsl(from var(--pacem-color-default) h s max(0, l - var(--pacem-button-hover-percentage)));
+        --pacem-color-slider-thumb: hsl(from var(--pacem-color-button-back) h s max(0, l - 5));
+        --pacem-color-suggest-border: var(--pacem-color-button-border-dark);
+        --pacem-color-suggest-back: var(--pacem-theme-lightblue);
+        --pacem-color-suggest-border-light: rgba(255,255,255,0.8);
+        --pacem-color-suggest-border-dark: rgba(0,0,0,0.075);
+        --pacem-color-tab-back: var(--pacem-color-background);
+        --pacem-color-tab-highlight: var(--pacem-color-highlight);
+        --pacem-border-tab: 1px;
+        --pacem-color-lightbox-back: rgba(0,0,0,0.1);
+        --pacem-color-gallery-back: rgba(0,0,0,0.75);
+        --pacem-color-marquee-back: var(--pacem-theme-lightblue);
+        --pacem-color-marquee-fore: var(--pacem-color-default);
+        --pacem-color-event-back: hsl(from var(--pacem-theme-teal) h s min(100, l + 10));
+        --pacem-color-event-fore: #fff;
+        --pacem-color-field-back: #fff;
+        --pacem-border-field-size: 1px;
+        --pacem-color-field-label: var(--pacem-theme-teal);
+        --pacem-flag-field-underline: 0;
+        --pacem-color-field-fore-error: var(--pacem-color-error);
+    }
+}
+