@pacem/pacem-theme-less 1.0.0-amaldi

package/pacem/layout/dark/sizing.less

@@ -0,0 +1,108 @@
+@import "../shared";
+
+.@{PCSS}-size {
+    min-height: @grid_cell;
+
+    &.size-xl {
+        min-height: 2 * @grid_cell;
+    }
+
+    &.size-lg {
+        min-height: ceil( @grid_cell * 1.414);
+    }
+
+    &.size-sm {
+        min-height: 2 * @grid_spacing;
+    }
+
+    &.size-xs {
+        min-height: @grid_spacing;
+    }
+}
+
+.@{PCSS}-borderbox {
+    box-sizing: border-box;
+}
+
+.Width(@size) when (@size > 1) {
+    &.width-@{size} {
+        width: ~"var(--@{PCSS}-size-@{size})";
+    }
+
+    .Width(@size - 1);
+}
+
+.WidthMid(@mid, @size) when (@size > 1) {
+    &.width-@{mid}-@{size} {
+        width: ~"var(--@{PCSS}-size-@{size})";
+    }
+
+    .WidthMid(@mid, @size - 1);
+}
+
+.@{PCSS}-width {
+    .Width(12);
+}
+
+@media (max-width: @threshold_sm - 1) {
+
+    .@{PCSS}-width {
+        .WidthMid(xs, 12);
+    }
+}
+
+@media (min-width: @threshold_sm) {
+
+    .@{PCSS}-width {
+        .WidthMid(sm, 12);
+    }
+}
+
+@media (min-width: @threshold_md) {
+
+    .@{PCSS}-width {
+        .WidthMid(md, 12);
+    }
+}
+
+@media (min-width: @threshold_lg) {
+
+    .@{PCSS}-width {
+        .WidthMid(lg, 12);
+    }
+}
+
+@media (min-width: @threshold_xl) {
+
+    .@{PCSS}-width {
+        .WidthMid(xl, 12);
+    }
+}
+
+@media (min-width: @threshold_hd) {
+
+    .@{PCSS}-width {
+        .WidthMid(hd, 12);
+    }
+}
+
+@media (min-width: @threshold_2k) {
+
+    .@{PCSS}-width {
+        .WidthMid(2k, 12);
+    }
+}
+
+@media (min-width: @threshold_4k) {
+
+    .@{PCSS}-width {
+        .WidthMid(4k, 12);
+    }
+}
+
+@media (orientation: portrait) {
+
+    .@{PCSS}-width {
+        .WidthMid(v, 12);
+    }
+}

package/pacem/layout/dark/spacing.less

@@ -0,0 +1,296 @@
+@import "../shared";
+
+hr.spacer {
+    margin-bottom: @grid_spacing;
+}
+
+.@{PCSS}-spacer {
+    margin-bottom: @grid_spacing;
+
+    &.spacer-2x {
+        margin-bottom: 2 * @grid_spacing;
+    }
+
+    &.spacer-3x {
+        margin-bottom: 3 * @grid_spacing;
+    }
+}
+
+// amended
+@_segmentation: 3;
+@_spacing_unit: @grid_spacing / @_segmentation;
+
+.Spaced(@what, @prefix, @count, @index) when (@index >= 0) {
+
+    @_spacing_indexed_unit: @index * @_spacing_unit;
+
+    &.@{prefix}-@{index} {
+        @{what}: @_spacing_indexed_unit;
+    }
+
+    &.@{prefix}-y-@{index} {
+        @{what}-top: @_spacing_indexed_unit;
+        @{what}-bottom: @_spacing_indexed_unit;
+    }
+
+    &.@{prefix}-x-@{index} {
+        @{what}-left: @_spacing_indexed_unit;
+        @{what}-right: @_spacing_indexed_unit;
+    }
+
+    &.@{prefix}-top-@{index} {
+        @{what}-top: @_spacing_indexed_unit;
+    }
+
+    &.@{prefix}-right-@{index} {
+        @{what}-right: @_spacing_indexed_unit;
+    }
+
+    &.@{prefix}-bottom-@{index} {
+        @{what}-bottom: @_spacing_indexed_unit;
+    }
+
+    &.@{prefix}-left-@{index} {
+        @{what}-left: @_spacing_indexed_unit;
+    }
+
+    .Spaced(@what,@prefix, @count, @index - 1);
+}
+
+
+.SpacedPx(@what, @prefix, @px) when (@px > 0) {
+
+    @_px: @px * 1px;
+
+    &.@{prefix}--@{px} {
+        @{what}: @_px;
+    }
+
+    &.@{prefix}-y--@{px} {
+        @{what}-top: @_px;
+        @{what}-bottom: @_px;
+    }
+
+    &.@{prefix}-x--@{px} {
+        @{what}-left: @_px;
+        @{what}-right: @_px;
+    }
+
+    &.@{prefix}-top--@{px} {
+        @{what}-top: @_px;
+    }
+
+    &.@{prefix}-right--@{px} {
+        @{what}-right: @_px;
+    }
+
+    &.@{prefix}-bottom--@{px} {
+        @{what}-bottom: @_px;
+    }
+
+    &.@{prefix}-left--@{px} {
+        @{what}-left: @_px;
+    }
+
+    .SpacedPx(@what,@prefix, @px - 1);
+}
+
+
+.Spaced(@what, @prefix) {
+    .Spaced(@what, @prefix, 2 * @_segmentation, 2 * @_segmentation);
+    .SpacedPx(@what, @prefix, 12);
+
+    &.@{prefix}-auto{
+        @{what}: auto;
+    }
+}
+
+.@{PCSS}-margin {
+    .Spaced(margin, margin);
+}
+
+.@{PCSS}-pad {
+    .Spaced(padding, pad);
+}
+
+.SpacedThresholded(@what, @prefix,@threshold, @count, @index) when (@index >= 0) {
+
+    @_spacing_indexed_unit: @index * @_spacing_unit;
+
+    &.@{prefix}-@{threshold}-@{index} {
+        @{what}: @_spacing_indexed_unit;
+    }
+
+    &.@{prefix}-y-@{threshold}-@{index} {
+        @{what}-top: @_spacing_indexed_unit;
+        @{what}-bottom: @_spacing_indexed_unit;
+    }
+
+    &.@{prefix}-x-@{threshold}-@{index} {
+        @{what}-left: @_spacing_indexed_unit;
+        @{what}-right: @_spacing_indexed_unit;
+    }
+
+    &.@{prefix}-top-@{threshold}-@{index} {
+        @{what}-top: @_spacing_indexed_unit;
+    }
+
+    &.@{prefix}-right-@{threshold}-@{index} {
+        @{what}-right: @_spacing_indexed_unit;
+    }
+
+    &.@{prefix}-bottom-@{threshold}-@{index} {
+        @{what}-bottom: @_spacing_indexed_unit;
+    }
+
+    &.@{prefix}-left-@{threshold}-@{index} {
+        @{what}-left: @_spacing_indexed_unit;
+    }
+
+    .SpacedThresholded(@what,@prefix,@threshold, @count, @index - 1);
+}
+
+.SpacedPxThresholded(@what, @prefix, @threshold, @px) when (@px > 0) {
+
+    @_px: @px * 1px;
+
+    &.@{prefix}-@{threshold}--@{px} {
+        @{what}: @_px;
+    }
+
+    &.@{prefix}-y-@{threshold}--@{px} {
+        @{what}-top: @_px;
+        @{what}-bottom: @_px;
+    }
+
+    &.@{prefix}-x-@{threshold}--@{px} {
+        @{what}-left: @_px;
+        @{what}-right: @_px;
+    }
+
+    &.@{prefix}-top-@{threshold}--@{px} {
+        @{what}-top: @_px;
+    }
+
+    &.@{prefix}-right-@{threshold}--@{px} {
+        @{what}-right: @_px;
+    }
+
+    &.@{prefix}-bottom-@{threshold}--@{px} {
+        @{what}-bottom: @_px;
+    }
+
+    &.@{prefix}-left-@{threshold}--@{px} {
+        @{what}-left: @_px;
+    }
+
+    .SpacedPxThresholded(@what,@prefix,@threshold, @px - 1);
+}
+
+.SpacedThresholded(@what, @prefix, @threshold) {
+    .SpacedThresholded(@what, @prefix, @threshold, 2 * @_segmentation, 2 * @_segmentation);
+    .SpacedPxThresholded(@what, @prefix, @threshold, 12);
+
+    &.@{prefix}-@{threshold}-auto {
+        @{what}: auto;
+    }
+}
+
+@media (max-width: @threshold_sm - 1) {
+
+    .@{PCSS}-margin {
+        .SpacedThresholded(margin, margin, xs);
+    }
+
+    .@{PCSS}-pad {
+        .SpacedThresholded(padding, pad, xs);
+    }
+}
+
+@media (min-width: @threshold_sm) {
+
+    .@{PCSS}-margin {
+        .SpacedThresholded(margin, margin, sm);
+    }
+
+    .@{PCSS}-pad {
+        .SpacedThresholded(padding, pad, sm);
+    }
+}
+
+@media (min-width: @threshold_md) {
+
+    .@{PCSS}-margin {
+        .SpacedThresholded(margin, margin, md);
+    }
+
+    .@{PCSS}-pad {
+        .SpacedThresholded(padding, pad, md);
+    }
+}
+
+@media (min-width: @threshold_lg) {
+
+    .@{PCSS}-margin {
+        .SpacedThresholded(margin, margin, lg);
+    }
+
+    .@{PCSS}-pad {
+        .SpacedThresholded(padding, pad, lg);
+    }
+}
+
+@media (min-width: @threshold_xl) {
+
+    .@{PCSS}-margin {
+        .SpacedThresholded(margin, margin, xl);
+    }
+
+    .@{PCSS}-pad {
+        .SpacedThresholded(padding, pad, xl);
+    }
+}
+
+@media (min-width: @threshold_hd) {
+
+    .@{PCSS}-margin {
+        .SpacedThresholded(margin, margin, hd);
+    }
+
+    .@{PCSS}-pad {
+        .SpacedThresholded(padding, pad, hd);
+    }
+}
+
+@media (min-width: @threshold_2k) {
+
+    .@{PCSS}-margin {
+        .SpacedThresholded(margin, margin, 2k);
+    }
+
+    .@{PCSS}-pad {
+        .SpacedThresholded(padding, pad, 2k);
+    }
+}
+
+@media (min-width: @threshold_4k) {
+
+    .@{PCSS}-margin {
+        .SpacedThresholded(margin, margin, 4k);
+    }
+
+    .@{PCSS}-pad {
+        .SpacedThresholded(padding, pad, 4k);
+    }
+}
+
+@media (orientation: portrait) {
+
+    .@{PCSS}-margin {
+        .SpacedThresholded(margin, margin, v);
+    }
+
+    .@{PCSS}-pad {
+        .SpacedThresholded(padding, pad, v);
+    }
+}

package/pacem/layout/dark/superposition-system.less

@@ -0,0 +1,116 @@
+@import "../shared";
+
+.@{PCSS}-relative {
+    position: relative;
+
+    > .@{PCSS}-hover {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+
+        &.top {
+            height: auto;
+        }
+
+        &.bottom {
+            height: auto;
+            top: auto;
+            bottom: 0;
+        }
+
+        &.left {
+            width: auto;
+        }
+
+        &.right {
+            width: auto;
+            left: auto;
+            right: 0;
+        }
+    }
+}
+
+
+.@{PCSS}-overlap {
+    display: grid;
+    /* #region horiz (with relevant default vert) */
+    &.overlap-center {
+        align-items: center; // vertical
+        justify-content: center; // horizontal
+    }
+
+    &.overlap-fill {
+        align-items: stretch;
+        justify-content: stretch;
+    }
+
+    &.overlap-start {
+        align-items: start;
+        justify-content: start;
+    }
+
+    &.overlap-end {
+        align-items: end;
+        justify-content: end;
+    }
+    /* #endregion */
+    /* #region vert override */
+    &.overlap-middle {
+        align-items: center;
+    }
+
+    &.overlap-top {
+        align-items: start;
+    }
+
+    &.overlap-bottom {
+        align-items: end;
+    }
+
+    &.overlap-stretch {
+        align-items: stretch;
+    }
+    /* #endregion */
+    > * {
+        grid-row: 1;
+        grid-column: 1;
+
+        &.overlap-self-center {
+            align-self: center; // vertical
+            justify-self: center; // horizontal
+        }
+
+        &.overlap-self-fill {
+            align-self: stretch;
+            justify-self: stretch;
+        }
+
+        &.overlap-self-start {
+            align-self: start;
+            justify-self: start;
+        }
+
+        &.overlap-self-end {
+            align-self: end;
+            justify-self: end;
+        }
+
+        &.overlap-self-middle {
+            align-self: center;
+        }
+
+        &.overlap-self-top {
+            align-self: start;
+        }
+
+        &.overlap-self-bottom {
+            align-self: end;
+        }
+
+        &.overlap-self-stretch {
+            align-self: stretch;
+        }
+    }
+}

package/pacem/layout/dark/tiles.less

@@ -0,0 +1,71 @@
+@import "../shared";
+
+.@{PCSS}-tile {
+    display: grid;
+    grid-template-columns: @grid_cell 1fr;
+    grid-template-rows: @grid_cell auto;
+    grid-template-areas: 'icon body' 'footer footer';
+    align-items: center;
+    background-color: @color_background_alt;
+    border-radius: @border_radius;
+    overflow: hidden;
+
+    > .tile-body {
+        grid-area: body;
+    }
+
+    > i.@{PCSS}-icon,
+    > .tile-icon {
+        grid-area: icon;
+        font-size: 2.25rem;
+        justify-self: center;
+    }
+
+    > .tile-body,
+    > i.@{PCSS}-icon {
+        padding: @grid_spacing/2;
+    }
+
+    > .tile-footer {
+        padding: @grid_spacing/6 @grid_spacing/2;
+        grid-area: footer;
+        line-height: @grid_spacing;
+        background-color: rgba(0,0,0,.25);
+        color: @color_light;
+
+        > i.@{PCSS}-icon {
+            height: @grid_spacing;
+            width: $height;
+            background-color: rgba(0,0,0,.125);
+            border-radius: 50%;
+            line-height: $height;
+            text-align: center;
+            font-size: @grid_spacing * .75;
+        }
+    }
+
+    &.tile-danger {
+        background-color: @color_danger;
+        color: @color_danger_inv;
+    }
+
+    &.tile-primary {
+        background-color: @color_primary;
+        color: @color_primary_inv;
+    }
+
+    &.tile-warning {
+        background-color: @color_warning;
+        color: @color_warning_inv;
+    }
+
+    &.tile-success {
+        background-color: @color_success;
+        color: @color_success_inv;
+    }
+
+    &.tile-accent {
+        background-color: @color_accent;
+        color: @color_accent_inv;
+    }
+}

package/pacem/layout/dark/tokens-chips.less

@@ -0,0 +1,16 @@
+@import "../shared";
+
+.@{PCSS}-chip {
+    padding: ~"0 var(--@{PCSS}-size--12)";
+    height: ~"var(--@{PCSS}-grid-spacing)";
+    line-height: $height;
+    border-radius: ~"calc(var(--@{PCSS}-grid-spacing) / 2)";
+    box-sizing: border-box;
+    display: inline-block;
+}
+.@{PCSS}-token {
+    padding: 0 2px;
+    border-radius: ~"min(3px, var(--@{PCSS}-border-radius))";
+    box-sizing: border-box;
+    display: inline-block;
+}

package/pacem/layout/dark/toolbar.less

@@ -0,0 +1,32 @@
+@import "../shared";
+
+.@{PCSS}-toolbar {
+    display: grid;
+    grid-gap: 0;
+    padding: @grid_spacing/2 0;
+    grid-template-columns: auto 1fr auto 1fr auto;
+    grid-template-areas: 'left . center . right';
+    white-space: nowrap;
+
+    .toolbar-left,
+    .toolbar-center,
+    .toolbar-right {
+        display: flex;
+        flex-direction: row;
+    }
+
+    .toolbar-left {
+        grid-area: left;
+        align-content: flex-start;
+    }
+
+    .toolbar-center {
+        grid-area: center;
+        align-content: center;
+    }
+
+    .toolbar-right {
+        grid-area: right;
+        align-content: flex-end;
+    }
+}