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

package/src/layout/container.css

@@ -0,0 +1,40 @@
+.pacem-contain {
+    contain: size;
+
+    &.contain-none {
+        contain: none;
+    }
+
+    &.contain-strict {
+        contain: strict;
+    }
+
+    &.contain-inline-size {
+        contain: inline-size;
+    }
+
+    &.contain-layout {
+        contain: layout;
+    }
+
+    &.contain-style {
+        contain: style;
+    }
+
+    &.contain-paint {
+        contain: paint;
+    }
+}
+
+.pacem-container {
+    container-type: inline-size;
+    container-name: pacem;
+
+    &.container-size {
+        container-type: size;
+    }
+
+    &.container-normal {
+        container-type: normal;
+    }
+}

package/src/layout/corners.css

@@ -0,0 +1,52 @@
+/* Corner decorations (.Corners() of the Less theme), shared by every *-corners class.
+   Less baked the color into SVG data uris, once per color: here a single rule draws them with gradients,
+   driven by private custom properties that each context assigns:
+     --pacem--corners-color   decoration color
+     --pacem--corners-radius  > 0: arcs of that radius; 0: straight brackets
+     --pacem--corners-size    bracket length
+   Zero specificity: the decorations only ever competed with .fill-gradient, which keeps winning. */
+
+:where(
+    .pacem-panel.panel-corners,
+    .pacem-card.card-corners,
+    .breadcrumb.breadcrumb-corners,
+    table.pacem-datatable :is(th, td).datacell-corners,
+    .pacem-datatable :is(.pacem-headcell.headcell-corners, .pacem-datacell.datacell-corners, .pacem-footcell.footcell-corners),
+    .pacem-datatable:is(.datatable-accent, .datatable-primary, .datatable-success, .datatable-danger, .datatable-warning, .datatable-error, .datatable-disabled) .pacem-datatable.datatable-corners,
+    pacem-window.window-corners
+),
+/* (pseudo-elements cannot go in :where(); see ui/dialog.css and plus/misc.css) */
+pacem-lightbox.lightbox-corners::part(lightbox),
+pacem-dialog:is(.modal-corners, .dialog-corners)::part(lightbox),
+pacem-modal-form:is(.modal-corners, .dialog-corners)::part(lightbox) {
+    --pacem--r: var(--pacem--corners-radius, 0px);
+    --pacem--s: var(--pacem--corners-size, var(--pacem-corner-size));
+    --pacem--on: sign(var(--pacem--r));
+    /* straight brackets (radius = 0) */
+    --pacem--cs: rgb(from var(--pacem--corners-color) r g b / calc(alpha * (1 - var(--pacem--on))));
+    --pacem--l: linear-gradient(var(--pacem--cs), var(--pacem--cs));
+    /* arcs (radius > 0) */
+    --pacem--ca: rgb(from var(--pacem--corners-color) r g b / calc(alpha * var(--pacem--on)));
+    --pacem--ring: transparent calc(var(--pacem--r) - 1px), var(--pacem--ca) calc(var(--pacem--r) - 1px), var(--pacem--ca) calc(var(--pacem--r) + 1px), transparent calc(var(--pacem--r) + 1px);
+
+    background-image:
+        var(--pacem--l), var(--pacem--l), var(--pacem--l), var(--pacem--l), var(--pacem--l), var(--pacem--l), var(--pacem--l), var(--pacem--l),
+        radial-gradient(circle at 100% 100%, var(--pacem--ring)), radial-gradient(circle at 0 100%, var(--pacem--ring)),
+        radial-gradient(circle at 0 0, var(--pacem--ring)), radial-gradient(circle at 100% 0, var(--pacem--ring));
+    background-size:
+        var(--pacem--s) 1px, 1px var(--pacem--s), var(--pacem--s) 1px, 1px var(--pacem--s),
+        var(--pacem--s) 1px, 1px var(--pacem--s), var(--pacem--s) 1px, 1px var(--pacem--s),
+        var(--pacem--r) var(--pacem--r), var(--pacem--r) var(--pacem--r), var(--pacem--r) var(--pacem--r), var(--pacem--r) var(--pacem--r);
+    background-position: left top, left top, right top, right top, right bottom, right bottom, left bottom, left bottom, left top, right top, right bottom, left bottom;
+    background-repeat: no-repeat;
+    background-origin: border-box;
+}
+
+/* margin to avoid corners disappearing */
+.pacem-panel.panel-corners.corners-safe,
+.pacem-card.card-corners.corners-safe,
+.breadcrumb.breadcrumb-corners.corners-safe,
+table.pacem-datatable :is(th, td).datacell-corners.corners-safe,
+.pacem-datatable :is(.pacem-headcell.headcell-corners, .pacem-datacell.datacell-corners, .pacem-footcell.footcell-corners).corners-safe {
+    margin: 1px;
+}

package/src/layout/datatable.css

@@ -0,0 +1,324 @@
+/* Datatables: <table class="pacem-datatable"> and the grid-based .pacem-datatable.
+   Variants (.datatable-{color}, .datacell-{color}, .headcell-{color}, .footcell-{color}) only assign
+   --pacem--dt; the colorized rules are written once. --pacem--dt inherits from the table to its cells,
+   like the descendant selectors of the Less theme. */
+
+@custom-selector :--dt-variants :is(.datatable-accent, .datatable-primary, .datatable-success, .datatable-danger, .datatable-warning, .datatable-error, .datatable-disabled);
+@custom-selector :--cell-variants :is(.datacell-accent, .datacell-primary, .datacell-success, .datacell-danger, .datacell-warning, .datacell-error, .datacell-disabled);
+@custom-selector :--headcell-variants :is(.headcell-accent, .headcell-primary, .headcell-success, .headcell-danger, .headcell-warning, .headcell-error, .headcell-disabled);
+@custom-selector :--footcell-variants :is(.footcell-accent, .footcell-primary, .footcell-success, .footcell-danger, .footcell-warning, .footcell-error, .footcell-disabled);
+
+:is(.datatable-accent, .datacell-accent, .headcell-accent, .footcell-accent) { --pacem--dt: var(--pacem-color-accent); }
+:is(.datatable-primary, .datacell-primary, .headcell-primary, .footcell-primary) { --pacem--dt: var(--pacem-color-primary); }
+:is(.datatable-success, .datacell-success, .headcell-success, .footcell-success) { --pacem--dt: var(--pacem-color-success); }
+:is(.datatable-danger, .datacell-danger, .headcell-danger, .footcell-danger) { --pacem--dt: var(--pacem-color-danger); }
+:is(.datatable-warning, .datacell-warning, .headcell-warning, .footcell-warning) { --pacem--dt: var(--pacem-color-warning); }
+:is(.datatable-error, .datacell-error, .headcell-error, .footcell-error) { --pacem--dt: var(--pacem-color-error); }
+:is(.datatable-disabled, .datacell-disabled, .headcell-disabled, .footcell-disabled) { --pacem--dt: var(--pacem-color-disabled); }
+
+/* #region <table> */
+
+table.pacem-datatable {
+    border-collapse: collapse;
+    border-left: 1px solid var(--pacem-color-border);
+    border-right: 1px solid var(--pacem-color-border);
+    width: 100%;
+    table-layout: fixed;
+
+    thead td, thead th {
+        font-weight: 700;
+    }
+
+    /* (Less also emitted `color: invert(...)`, an invalid declaration: dropped) */
+    tbody tr:hover {
+        background-color: rgb(from var(--pacem-color-border) r g b / 5%);
+    }
+
+    th, td {
+        &.datacell-corners {
+            --pacem--corners-color: rgb(from var(--pacem-color-border) r g b / 100%);
+            --pacem--corners-size: var(--pacem-corner-datacell-size);
+        }
+
+        border-left: none;
+        border-right: none;
+        border-top: 1px solid var(--pacem-color-border);
+        border-bottom: 1px solid var(--pacem-color-border);
+        padding: round(calc(var(--pacem-grid-spacing) / 3), 1px);
+        margin: 0;
+        height: 100%;
+        box-sizing: border-box;
+
+        &.datacell-auto {
+            width: 1%;
+            white-space: nowrap;
+        }
+
+        &.datacell-right {
+            text-align: right;
+        }
+
+        &.datacell-center {
+            text-align: center;
+        }
+
+        &.datacell-middle {
+            vertical-align: middle;
+        }
+
+        &.datacell-reset {
+            padding: 0;
+        }
+
+        &.datacell-truncate {
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+        }
+    }
+
+    /* whole table */
+    &:--dt-variants {
+        border-left-color: rgb(from var(--pacem--dt) r g b / 20%);
+        border-right-color: rgb(from var(--pacem--dt) r g b / 20%);
+    }
+
+    /* (a list: the table and the cell variants keep the specificity they had in Less) */
+    &:--dt-variants :is(td, th),
+    & td:--cell-variants {
+        border-color: rgb(from var(--pacem--dt) r g b / 20%);
+
+        &.datacell-corners {
+            --pacem--corners-color: rgb(from var(--pacem--dt) r g b / 25%);
+        }
+
+        &.datacell-filled {
+            background-color: rgb(from var(--pacem--dt) r g b / 10%);
+        }
+    }
+}
+
+/* #endregion */
+
+/* #region grid */
+
+.pacem-datatable {
+    display: grid;
+    grid-gap: 0;
+    border-left: 1px solid var(--pacem-color-border);
+    border-right: 1px solid var(--pacem-color-border);
+    border-top: 1px solid var(--pacem-color-border);
+    border-bottom: 0 !important;
+    position: relative;
+
+    .pacem-datarow {
+        z-index: 0;
+        pointer-events: none;
+        background-color: var(--pacem-datarow-color);
+
+        &.datarow-alt {
+            background-color: var(--pacem-datarow-alt-color);
+        }
+    }
+
+    .pacem-datacell:hover ~ .pacem-datarow {
+        background-color: var(--pacem-datarow-hover-color);
+
+        + .pacem-datacell ~ .pacem-datarow {
+            background-color: var(--pacem-datarow-color);
+
+            &.datarow-alt {
+                background-color: var(--pacem-datarow-alt-color);
+            }
+        }
+    }
+
+    /* .DataCell() */
+    :is(.pacem-headcell, .pacem-datacell, .pacem-footcell) {
+        display: flex;
+        box-sizing: border-box;
+        padding: calc(var(--pacem-grid-spacing) / 3) calc(var(--pacem-grid-spacing) / 2);
+        border-top: 0 solid var(--pacem-color-border);
+        border-bottom: 1px solid var(--pacem-color-border);
+        min-width: 0;
+    }
+
+    :is(.pacem-headcell.headcell-corners, .pacem-datacell.datacell-corners, .pacem-footcell.footcell-corners) {
+        --pacem--corners-color: var(--pacem-color-border);
+        --pacem--corners-size: var(--pacem-corner-datacell-size);
+    }
+
+    :is(.pacem-headcell.headcell-right, .pacem-datacell.datacell-right, .pacem-footcell.footcell-right) {
+        justify-content: flex-end;
+    }
+
+    :is(.pacem-headcell.headcell-left, .pacem-datacell.datacell-left, .pacem-footcell.footcell-left) {
+        justify-content: flex-start;
+    }
+
+    :is(.pacem-headcell.headcell-center, .pacem-datacell.datacell-center, .pacem-footcell.footcell-center) {
+        justify-content: center;
+    }
+
+    :is(.pacem-headcell.headcell-fill, .pacem-datacell.datacell-fill, .pacem-footcell.footcell-fill) {
+        justify-content: stretch;
+    }
+
+    :is(.pacem-headcell.headcell-middle, .pacem-datacell.datacell-middle, .pacem-footcell.footcell-middle) {
+        align-items: center;
+    }
+
+    :is(.pacem-headcell.headcell-top, .pacem-datacell.datacell-top, .pacem-footcell.footcell-top) {
+        align-items: flex-start;
+    }
+
+    :is(.pacem-headcell.headcell-bottom, .pacem-datacell.datacell-bottom, .pacem-footcell.footcell-bottom) {
+        align-items: flex-end;
+    }
+
+    /* .DataCellColorize2() */
+    :is(.pacem-headcell:--headcell-variants.headcell-corners, .pacem-datacell:--cell-variants.datacell-corners, .pacem-footcell:--footcell-variants.footcell-corners) {
+        --pacem--corners-color: rgb(from var(--pacem--dt) r g b / 12.5%);
+    }
+
+    :is(.pacem-headcell:--headcell-variants.headcell-filled, .pacem-datacell:--cell-variants.datacell-filled, .pacem-footcell:--footcell-variants.footcell-filled) {
+        background-color: rgb(from var(--pacem--dt) r g b / 10%);
+        border-left-color: rgb(from var(--pacem--dt) r g b / 20%);
+        border-right-color: rgb(from var(--pacem--dt) r g b / 20%);
+    }
+
+    .pacem-headcell {
+        z-index: 2;
+        font-weight: bold;
+
+        &.headcell-sticky {
+            position: sticky;
+            top: 0;
+            background: var(--pacem-color-background);
+        }
+    }
+
+    /* .DataTableColorize2(): (sic) it targets nested .pacem-datatable elements */
+    &:--dt-variants {
+        border-color: rgb(from var(--pacem--dt) r g b / 20%);
+
+        .pacem-datatable {
+            border-bottom-color: rgb(from var(--pacem--dt) r g b / 20%);
+
+            &.datatable-corners {
+                --pacem--corners-color: rgb(from var(--pacem--dt) r g b / 12.5%);
+            }
+
+            &.datatable-filled {
+                background-color: rgb(from var(--pacem--dt) r g b / 10%);
+                border-left-color: rgb(from var(--pacem--dt) r g b / 20%);
+                border-right-color: rgb(from var(--pacem--dt) r g b / 20%);
+            }
+        }
+    }
+
+    .pacem-datacell,
+    .pacem-footcell {
+        z-index: 1;
+    }
+
+    .pacem-headcell.headcell-truncate,
+    .pacem-headcell.headcell-ellipsed,
+    .pacem-datacell.datacell-truncate,
+    .pacem-datacell.datacell-ellipsed,
+    .pacem-footcell.footcell-truncate,
+    .pacem-footcell.footcell-ellipsed {
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        display: block;
+    }
+
+    .pacem-datacell,
+    .pacem-datarow {
+        &.datarow-off,
+        &.datacell-off {
+            opacity: 0.4;
+        }
+    }
+
+    /* .ToolButtons() */
+    :is(.pacem-headcell.headcell-tools, .pacem-datacell.datacell-tools, .pacem-footcell.footcell-tools) {
+        .pacem-button,
+        pacem-button {
+            width: calc(var(--pacem-grid-spacing) * 1.3333);
+            height: var(--pacem-grid-spacing);
+            margin: 0;
+
+            &.button-square,
+            &.circular,
+            &.button-circle,
+            &.button-circular {
+                width: var(--pacem-grid-spacing);
+                margin: 0 calc(var(--pacem-grid-spacing) / 6);
+
+                &::before {
+                    font-size: calc(var(--pacem-grid-spacing) * 2 / 3);
+                    line-height: var(--pacem-grid-spacing);
+                    width: var(--pacem-grid-spacing);
+                }
+            }
+        }
+    }
+
+    &:is(.border-solid, .border-dotted, .border-dashed) {
+        border-left-style: var(--pacem--border-style);
+        border-top-style: var(--pacem--border-style);
+        border-right-style: var(--pacem--border-style);
+
+        :is(.pacem-headcell, .pacem-datacell, .pacem-footcell) {
+            border-bottom-style: var(--pacem--border-style);
+        }
+    }
+
+    :is(.pacem-headcell, .pacem-datacell, .pacem-footcell):is(.border-solid, .border-dotted, .border-dashed) {
+        border-bottom-style: var(--pacem--border-style);
+    }
+
+    &.datatable-no-sideborders {
+        border-left-width: 0;
+        border-right-width: 0;
+    }
+
+    &.datatable-noborders {
+        border-width: 0;
+
+        .pacem-datacell.datacell-lastrow {
+            border-bottom-width: 0;
+        }
+
+        .pacem-footcell {
+            border-top: 1px solid var(--pacem-color-border);
+            border-bottom-width: 0;
+        }
+
+        &:is(.border-dotted, .border-dashed) .pacem-footcell {
+            border-top-style: var(--pacem--border-style);
+        }
+    }
+
+    &.datatable-norows {
+        .pacem-datarow {
+            background-color: transparent;
+        }
+
+        .pacem-datacell:hover ~ .pacem-datarow {
+            background-color: var(--pacem-datarow-hover-color);
+
+            + .pacem-datacell ~ .pacem-datarow {
+                background-color: transparent;
+
+                &.datarow-alt {
+                    background-color: transparent;
+                }
+            }
+        }
+    }
+}
+
+/* #endregion */

package/src/layout/elevation.css

@@ -0,0 +1,73 @@
+.pacem-rise {
+
+    /* border */
+    &:not(.rise-noborder) {
+        border: 1px solid;
+        border-top-color: var(--pacem-color-border-light);
+        border-bottom-color: var(--pacem-color-border-dark);
+        border-left-color: var(--pacem-color-border-dawn);
+        border-right-color: var(--pacem-color-border-dusk);
+    }
+
+    box-shadow: 0 calc(var(--pacem-grid-spacing) / 6) var(--pacem-grid-spacing) var(--pacem-color-shadow);
+
+    &.rise-none {
+        box-shadow: none;
+        border-color: rgb(from var(--pacem-color-shadow) r g b / 0%);
+    }
+
+    &.rise--1, &.rise-hover--1:hover, &.rise-hover--1:focus {
+        box-shadow: 0 1px 1px var(--pacem-color-shadow);
+    }
+
+    &.rise--2, &.rise-hover--2:hover, &.rise-hover--2:focus {
+        box-shadow: 0 2px 4px var(--pacem-color-shadow);
+    }
+
+    &.rise--3, &.rise-hover--3:hover, &.rise-hover--3:focus {
+        box-shadow: 0 3px 9px var(--pacem-color-shadow);
+    }
+
+    &.rise--4, &.rise-hover--4:hover, &.rise-hover--4:focus {
+        box-shadow: 0 4px 16px var(--pacem-color-shadow);
+    }
+
+    &.rise--5, &.rise-hover--5:hover, &.rise-hover--5:focus {
+        box-shadow: 0 5px 25px var(--pacem-color-shadow);
+    }
+
+    &.rise--1,
+    &.rise--2,
+    &.rise--3,
+    &.rise--4,
+    &.rise--5,
+    &.rise-hover--1:hover,
+    &.rise-hover--2:hover,
+    &.rise-hover--3:hover,
+    &.rise-hover--4:hover,
+    &.rise-hover--5:hover,
+    &.rise-hover--1:focus,
+    &.rise-hover--2:focus,
+    &.rise-hover--3:focus,
+    &.rise-hover--4:focus,
+    &.rise-hover--5:focus {
+        &:not(.rise-noborder) {
+            border: 1px solid;
+            border-top-color: var(--pacem-color-border-light);
+            border-bottom-color: var(--pacem-color-border-dark);
+            border-left-color: var(--pacem-color-border-dawn);
+            border-right-color: var(--pacem-color-border-dusk);
+        }
+    }
+
+    &.rise-hover-none:hover,
+    &.rise-hover-none:focus {
+        box-shadow: none;
+        border-color: rgb(from var(--pacem-color-shadow) r g b / 0%);
+    }
+}
+
+/* animations */
+.pacem-animations .pacem-rise {
+    transition: box-shadow var(--pacem-easing-in-out-sine) .2s, border-color var(--pacem-easing-in-out-sine) .2s .05s;
+}

package/src/layout/fetch-feedback.css

@@ -0,0 +1,125 @@
+@keyframes -fetching-anim {
+    0% {
+        background-position-x: 0;
+    }
+
+    100% {
+        background-position-x: 100px;
+    }
+}
+
+/* .fetch-feedback: --pacem--feedback is assigned by .feedback-{color} */
+.fetch-feedback {
+    --pacem--feedback-off: rgb(from var(--pacem--feedback, var(--pacem-color-default)) r g b / 0);
+    --pacem--feedback-on: var(--pacem--feedback, var(--pacem-color-default));
+    display: block;
+    transform: translateX(-100%);
+    transition: transform var(--pacem-easing-in-sine) .2s .2s;
+    height: 1px;
+
+    &.feedback-thick {
+        height: 2px;
+    }
+
+    &.feedback-thicker {
+        height: 4px;
+    }
+
+    &.feedback-auto {
+        height: auto;
+    }
+
+    :--gradients & {
+        background: linear-gradient(to right, var(--pacem--feedback-on) 0%, var(--pacem--feedback-off) 50%, var(--pacem--feedback-off) 50%, var(--pacem--feedback-on) 100%);
+    }
+
+    :--no-gradients & {
+        background: linear-gradient(to right, var(--pacem--feedback-on) 0%, var(--pacem--feedback-on) 50%, var(--pacem--feedback-off) 50%, var(--pacem--feedback-off) 100%);
+    }
+
+    background-repeat: repeat-x;
+    background-size: 100px;
+
+    &.feedback-gradient {
+        background: linear-gradient(to right, var(--pacem--feedback-on) 0%, var(--pacem--feedback-off) 50%, var(--pacem--feedback-off) 50%, var(--pacem--feedback-on) 100%);
+        background-repeat: repeat-x;
+        background-size: 100px;
+    }
+
+    &.feedback-root { --pacem--feedback: var(--pacem-color-root); }
+    &.feedback-background { --pacem--feedback: var(--pacem-color-background); }
+    &.feedback-default { --pacem--feedback: var(--pacem-color-default); }
+    &.feedback-invert { --pacem--feedback: var(--pacem-color-invert); }
+    &.feedback-primary { --pacem--feedback: var(--pacem-color-primary); }
+    &.feedback-secondary { --pacem--feedback: var(--pacem-color-secondary); }
+    &.feedback-accent { --pacem--feedback: var(--pacem-color-accent); }
+    &.feedback-info { --pacem--feedback: var(--pacem-color-info); }
+    &.feedback-success { --pacem--feedback: var(--pacem-color-success); }
+    &.feedback-warning { --pacem--feedback: var(--pacem-color-warning); }
+    &.feedback-danger { --pacem--feedback: var(--pacem-color-danger); }
+    &.feedback-error { --pacem--feedback: var(--pacem-color-error); }
+    &.feedback-disabled { --pacem--feedback: var(--pacem-color-disabled); }
+    &.feedback-green { --pacem--feedback: var(--pacem-color-green); }
+    &.feedback-yellow { --pacem--feedback: var(--pacem-color-yellow); }
+    &.feedback-brown { --pacem--feedback: var(--pacem-color-brown); }
+    &.feedback-red { --pacem--feedback: var(--pacem-color-red); }
+    &.feedback-pink { --pacem--feedback: var(--pacem-color-pink); }
+    &.feedback-blue { --pacem--feedback: var(--pacem-color-blue); }
+    &.feedback-orange { --pacem--feedback: var(--pacem-color-orange); }
+    &.feedback-purple { --pacem--feedback: var(--pacem-color-purple); }
+    &.feedback-teal { --pacem--feedback: var(--pacem-color-teal); }
+    &.feedback-gray { --pacem--feedback: var(--pacem-color-gray); }
+
+    &.feedback-small {
+        background-size: 50px;
+    }
+
+    &.fetching {
+        transform: translateX(0);
+        animation: -fetching-anim linear .0725s both infinite;
+
+        &.feedback-small {
+            animation-duration: .145s;
+        }
+
+        &.anim-slow {
+            animation-duration: .125s;
+
+            &.feedback-small {
+                /* double the duration since half is the size (and the offset of the background-position-x in the animation remains the same) */
+                animation-duration: .25s;
+            }
+        }
+    }
+}
+
+/* default positioning inside known elements
+   (explicit selectors: .pacem-header and header[pacem] have different specificity) */
+.pacem-header .fetch-feedback,
+header[pacem] .fetch-feedback,
+.pacem-footer .fetch-feedback,
+footer[pacem] .fetch-feedback {
+    position: absolute;
+    left: 0;
+    right: 0;
+}
+
+.pacem-header .fetch-feedback.feedback-top,
+header[pacem] .fetch-feedback.feedback-top {
+    top: 0;
+}
+
+.pacem-header .fetch-feedback:not(.feedback-top),
+header[pacem] .fetch-feedback:not(.feedback-top) {
+    bottom: 0;
+}
+
+.pacem-footer .fetch-feedback.feedback-bottom,
+footer[pacem] .fetch-feedback.feedback-bottom {
+    bottom: 0;
+}
+
+.pacem-footer .fetch-feedback:not(.feedback-bottom),
+footer[pacem] .fetch-feedback:not(.feedback-bottom) {
+    top: 0;
+}