@pacem/pacem-theme-less 1.0.0-amaldi

package/pacem/layout/dark/elevation.less

@@ -0,0 +1,74 @@
+@import "../shared";
+
+.@{PCSS}-rise {
+
+    .BorderRise() {
+        border: 1px solid;
+        border-top-color: @color_border_light;
+        border-bottom-color: @color_border_dark;
+        border-left-color: @color_border_dawn;
+        border-right-color: @color_border_dusk;
+    }
+
+    // border
+    &:not(.rise-noborder) {
+        .BorderRise();
+    }
+
+    box-shadow: 0 @grid_spacing/6 @grid_spacing @color_shadow;
+
+    &.rise-none {
+        box-shadow: none;
+        border-color: fade(@color_shadow, 0);
+    }
+
+    each(range(5), {
+
+            @_spread: unit(pow(@value, 2), px);
+            @_offset: unit(@value, px);
+        
+            &.rise--@{value}{
+                box-shadow: 0 @_offset @_spread @color_shadow;
+            }
+
+            &.rise-hover--@{value}:hover,
+            &.rise-hover--@{value}:focus{
+                box-shadow: 0 @_offset @_spread @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) {
+            .BorderRise();
+        }
+    }
+
+    &.rise-hover-none:hover,
+    &.rise-hover-none:focus {
+        box-shadow: none;
+        border-color: fade(@color_shadow, 0);
+    }
+}
+
+
+// animations
+.@{PCSS}-animations {
+
+    .@{PCSS}-rise {
+        transition: box-shadow @easing_in_out_sine .2s, border-color @easing_in_out_sine .2s .05s;
+    }
+}

package/pacem/layout/dark/fetch-feedback.less

@@ -0,0 +1,124 @@
+@import "../shared";
+
+@fetch_feedback_size: 100px;
+
+@keyframes -fetching-anim {
+    0% {
+        background-position-x: 0;
+    }
+
+    100% {
+        background-position-x: @fetch_feedback_size;
+    }
+}
+
+.fetch-feedback {
+
+    .FetchFeedback(@clr) {
+
+        @_rgb: rgba(@clr, 1);
+        @_trans: rgba(@clr, 0);
+
+        & when (@gradients = true) {
+            .GradientHorizontal(0%, 50%, 50%, 100%, @_rgb, @_trans, @_trans, @_rgb);
+        }
+
+        & when (@gradients = false) {
+            .GradientHorizontal(0%, 50%, 50%, 100%, @_rgb, @_rgb, @_trans, @_trans);
+        }
+
+        background-repeat: repeat-x;
+        background-size: @fetch_feedback_size;
+
+        &.feedback-gradient {
+            .GradientHorizontal(0%, 50%, 50%, 100%, @_rgb, @_trans, @_trans, @_rgb);
+            background-repeat: repeat-x;
+            background-size: @fetch_feedback_size;
+        }
+    }
+
+    display: block;
+    transform: translateX(-100%);
+    transition: transform @easing_in_sine .2s .2s;
+    height: 1px;
+
+    &.feedback-thick {
+        height: 2px;
+    }
+
+    &.feedback-thicker {
+        height: 4px;
+    }
+
+    &.feedback-auto {
+        height: auto;
+    }
+
+    .FetchFeedback(~"var(--@{PCSS}-color-default-rgb)");
+
+    each(@all_colors, {
+        &.feedback-@{value}{
+            .FetchFeedback(~"var(--@{PCSS}-color-@{value}-rgb)");
+        }
+    });
+
+
+    &.feedback-small {
+        background-size: @fetch_feedback_size * .5;
+    }
+
+    &.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
+.@{PCSS}-header,
+header[pacem] {
+
+    .fetch-feedback {
+        position: absolute;
+        left: 0;
+        right: 0;
+
+        &.feedback-top{
+            top: 0;
+        }
+
+        &:not(.feedback-top){
+            bottom:0;
+        }
+    }
+}
+
+.@{PCSS}-footer,
+footer[pacem] {
+
+    .fetch-feedback {
+        position: absolute;
+        left: 0;
+        right: 0;
+
+        &.feedback-bottom {
+            bottom: 0;
+        }
+
+        &:not(.feedback-bottom) {
+            top: 0;
+        }
+    }
+}

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

@@ -0,0 +1,181 @@
+@import "../shared";
+
+/* #region FLEXBOX */
+
+.Cells (@prefix, @count, @index) when (@index > 0 ) {
+
+    &.@{prefix}-@{index} {
+        flex-grow: 0;
+        flex-basis: 100% * @index / @count;
+    }
+    // next iteration
+    .Cells(@prefix, @count, @index - 1);
+}
+
+.CellsMid (@prefix, @mid, @count, @index) when (@index > 0 ) {
+
+    &.@{prefix}-@{mid}-@{index} {
+        flex-grow: 0;
+        flex-basis: 100% * @index / @count;
+    }
+    // next iteration
+    .CellsMid(@prefix, @mid, @count, @index - 1);
+}
+
+.Cells (@prefix, @count) {
+    .Cells(@prefix, @count, @count);
+}
+
+.CellsMid (@prefix, @mid, @count) {
+    .CellsMid(@prefix, @mid, @count, @count);
+}
+
+/* #endregion */
+
+.@{PCSS}-flex,
+.@{PCSS}-row {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    margin-left: -@panel_spacing;
+    margin-right: $margin-left;
+    align-items: stretch;
+}
+
+.@{PCSS}-flex.flex-vertical {
+    flex-direction: column;
+}
+
+.@{PCSS}-row .@{PCSS}-column,
+.@{PCSS}-flex .@{PCSS}-box {
+    margin: 0;
+    padding: 0 @panel_spacing @panel_spacing * 2 @panel_spacing;
+    box-sizing: border-box;
+}
+
+.@{PCSS}-row .@{PCSS}-column,
+.@{PCSS}-flex .@{PCSS}-box {
+    flex-basis: auto;
+    flex-shrink: 1;
+    flex-grow: 1;
+}
+
+.@{PCSS}-row .@{PCSS}-column {
+    .Cells(col, 12);
+}
+
+.@{PCSS}-flex .@{PCSS}-box {
+    .Cells(box, 12);
+}
+
+@media (max-width: @threshold_sm - 1)  {
+
+    .@{PCSS}-row .@{PCSS}-column {
+        .CellsMid(col, xs, 12);
+    }
+
+    .@{PCSS}-flex .@{PCSS}-box {
+        .CellsMid(box, xs, 12);
+    }
+}
+
+@media (min-width: @threshold_sm) {
+
+    .@{PCSS}-row .@{PCSS}-column {
+        .CellsMid(col, sm, 12);
+    }
+
+    .@{PCSS}-flex .@{PCSS}-box {
+        .CellsMid(box, sm, 12);
+    }
+}
+
+@media (min-width: @threshold_md) {
+
+    .@{PCSS}-row .@{PCSS}-column {
+        .CellsMid(col, md, 12);
+    }
+
+    .@{PCSS}-flex .@{PCSS}-box {
+        .CellsMid(box, md, 12);
+    }
+}
+
+@media (min-width: @threshold_lg) {
+
+    .@{PCSS}-row .@{PCSS}-column {
+        .CellsMid(col, lg, 12);
+    }
+
+    .@{PCSS}-flex .@{PCSS}-box {
+        .CellsMid(box, lg, 12);
+    }
+}
+
+@media (min-width: @threshold_xl) {
+
+    .@{PCSS}-row .@{PCSS}-column {
+        .CellsMid(col, xl, 12);
+    }
+
+    .@{PCSS}-flex .@{PCSS}-box {
+        .CellsMid(box, xl, 12);
+    }
+}
+
+@media (min-width: @threshold_hd) {
+
+    .@{PCSS}-row .@{PCSS}-column {
+        .CellsMid(col, hd, 12);
+    }
+
+    .@{PCSS}-flex .@{PCSS}-box {
+        .CellsMid(box, hd, 12);
+    }
+}
+
+@media (min-width: @threshold_2k) {
+
+    .@{PCSS}-row .@{PCSS}-column {
+        .CellsMid(col, 2k, 12);
+    }
+
+    .@{PCSS}-flex .@{PCSS}-box {
+        .CellsMid(box, 2k, 12);
+    }
+}
+
+@media (min-width: @threshold_4k) {
+
+    .@{PCSS}-row .@{PCSS}-column {
+        .CellsMid(col, 4k, 12);
+    }
+
+    .@{PCSS}-flex .@{PCSS}-box {
+        .CellsMid(box, 4k, 12);
+    }
+}
+
+@media (orientation: portrait) {
+
+    .@{PCSS}-row .@{PCSS}-column {
+        .CellsMid(col, v, 12); // v := vertical
+    }
+
+    .@{PCSS}-flex .@{PCSS}-box {
+        .CellsMid(box, v, 12); // v := vertical
+    }
+}
+
+.@{PCSS}-flex {
+    flex-wrap: wrap;
+}
+
+.@{PCSS}-body.@{PCSS}-animations {
+    .@{PCSS}-column.@{PCSS}-animatable,
+    .@{PCSS}-column.@{PCSS}-anim,
+    .@{PCSS}-box.@{PCSS}-animatable,
+    .@{PCSS}-box.@{PCSS}-anim {
+        transition: flex-basis .333s @easing_in_out_sine;
+    }
+}

package/pacem/layout/dark/grids.less

@@ -0,0 +1,268 @@
+@import "../shared";
+
+/*#region COLUMNS*/
+
+.ColsStart(@prefix, @start, @span) when (@span > 0) {
+
+    &.@{prefix}-@{span} {
+        grid-column: @start / span @span;
+    }
+
+    .ColsStart(@prefix, @start, @span - 1);
+}
+
+.Cols (@prefix, @count, @index) when (@index > 0 ) {
+
+    &.@{prefix}-@{index} {
+        grid-column: span @index;
+    }
+
+    &.@{prefix}-start-@{index} {
+        grid-column-start: @index;
+        .ColsStart(@prefix, @index, @count - @index + 1);
+    }
+    // next iteration
+    .Cols(@prefix, @count, @index - 1);
+}
+
+.ColsStartMid(@prefix, @mid, @start, @span) when (@span > 0) {
+
+    &.@{prefix}-@{mid}-@{span} {
+        grid-column: @start / span @span;
+    }
+
+    .ColsStartMid(@prefix, @mid, @start, @span - 1);
+}
+
+.ColsMid (@prefix, @mid, @count, @index) when (@index > 0 ) {
+
+    &.@{prefix}-@{mid}-@{index} {
+        grid-column: span @index;
+    }
+
+    &.@{prefix}-@{mid}-start-@{index} {
+        grid-column-start: @index;
+        .ColsStartMid(@prefix, @mid, @index, @count - @index + 1);
+    }
+    // next iteration
+    .ColsMid(@prefix, @mid, @count, @index - 1);
+}
+
+.Cols (@prefix, @count) {
+    .Cols(@prefix, @count, @count);
+}
+
+.ColsMid (@prefix, @mid, @count) {
+    .ColsMid(@prefix, @mid, @count, @count);
+}
+
+/*#endregion*/
+
+/*#region ROWS*/
+
+.RowsStart(@prefix, @start, @span) when (@span > 0) {
+
+    &.@{prefix}-@{span} {
+        grid-row: @start / span @span;
+    }
+
+    .RowsStart(@prefix, @start, @span - 1);
+}
+
+
+.Rows (@prefix, @count, @index) when (@index > 0 ) {
+
+    &.@{prefix}-@{index} {
+        grid-row: span @index;
+    }
+
+    &.@{prefix}-start-@{index} {
+        grid-row-start: @index;
+        .RowsStart(@prefix, @index, @count - @index + 1);
+    }
+    // next iteration
+    .Rows(@prefix, @count, @index - 1);
+}
+
+.RowsStartMid(@prefix, @mid, @start, @span) when (@span > 0) {
+
+    &.@{prefix}-@{mid}-@{span} {
+        grid-row: @start / span @span;
+    }
+
+    .RowsStartMid(@prefix, @mid, @start, @span - 1);
+}
+
+.RowsMid (@prefix, @mid, @count, @index) when (@index > 0 ) {
+
+    &.@{prefix}-@{mid}-@{index} {
+        grid-row: span @index;
+    }
+
+    &.@{prefix}-@{mid}-start-@{index} {
+        grid-row-start: @index;
+        .RowsStartMid(@prefix, @mid, @index, @count - @index + 1);
+    }
+    // next iteration
+    .RowsMid(@prefix, @mid, @count, @index - 1);
+}
+
+.Rows (@prefix, @count) {
+    .Rows(@prefix, @count, @count);
+}
+
+.RowsMid (@prefix, @mid, @count) {
+    .RowsMid(@prefix, @mid, @count, @count);
+}
+
+/*#endregion*/
+
+.@{PCSS}-grid {
+    display: grid;
+    grid-gap: @grid_spacing;
+    margin-bottom: @grid_spacing;
+
+    &.grid-nospace {
+        margin-bottom: 0;
+    }
+
+    &.grid-no-rowgap,
+    &.grid-novgap {
+        grid-row-gap: 0;
+    }
+
+    &.grid-no-colgap,
+    &.grid-nohgap {
+        grid-column-gap: 0;
+    }
+
+    &.grid-nogap {
+        grid-gap: 0;
+    }
+
+    &.grid-center {
+        justify-items: center;
+    }
+
+    &.grid-middle {
+        align-items: center;
+    }
+
+    &.grid-tiny-colgap {
+        grid-column-gap: @grid_spacing / 3;
+    }
+
+    &.grid-tiny-rowgap {
+        grid-row-gap: @grid_spacing / 3;
+    }
+
+    &.grid-small-colgap {
+        grid-column-gap: 2 * @grid_spacing / 3;
+    }
+
+    &.grid-small-rowgap {
+        grid-row-gap: 2 * @grid_spacing / 3;
+    }
+
+    &.grid-big-colgap {
+        grid-column-gap: 4 * @grid_spacing / 3;
+    }
+
+    &.grid-big-rowgap {
+        grid-row-gap: 4 * @grid_spacing / 3;
+    }
+
+    &.grid-bigger-colgap {
+        grid-column-gap: 5 * @grid_spacing / 3;
+    }
+
+    &.grid-bigger-rowgap {
+        grid-row-gap: 5 * @grid_spacing / 3;
+    }
+
+    &.grid-huge-colgap {
+        grid-column-gap: 2 * @grid_spacing;
+    }
+
+    &.grid-huge-rowgap {
+        grid-row-gap: 2 * @grid_spacing;
+    }
+
+    //margin: -@grid_spacing -@grid_spacing 0 -@grid_spacing;
+    //background-color: @color_primary;
+    //grid-auto-flow: row;
+    box-sizing: border-box;
+    grid-template-columns: repeat(12, 1fr);
+    //grid-template-rows: auto 150px;
+    > .@{PCSS}-cell {
+        grid-column: span 12;
+
+        &.cell-center {
+            align-self: center;
+            justify-self: center;
+        }
+        //background-color: @color_background;
+        transition: all .5s;
+        box-sizing: border-box;
+        .Cols(cols, 12);
+        .Rows(rows, 12);
+
+        &.@{PCSS}-wrapper {
+            margin: 0;
+        }
+    }
+
+    // TODO: exploit container queries
+}
+
+
+@sizes: sm, md, lg, xl, hd, 2k, 4k;
+
+@media (max-width: @threshold_sm - 1) {
+
+    .@{PCSS}-grid:not(.grid-contained) > .@{PCSS}-cell {
+        .ColsMid(cols, xs, 12);
+        .RowsMid(rows, xs, 12);
+    }
+}
+
+each(@sizes, {   
+    @_threshold: ~"threshold_@{value}";
+    @media (min-width: @@_threshold){
+    
+        .@{PCSS}-grid:not(.grid-contained) > .@{PCSS}-cell {
+            .ColsMid(cols, @value, 12);
+            .RowsMid(rows, @value, 12);
+        }
+    }
+})
+
+@media (orientation: portrait) {
+
+    .@{PCSS}-grid > .@{PCSS}-cell {
+        .ColsMid(cols, v, 12);
+        .RowsMid(rows, v, 12);
+    }
+}
+
+// container queries
+@PCSSs: ~"@{PCSS} ";
+@_threshold_xs: @threshold_sm - 1;
+@container @PCSSs (max-width: @_threshold_xs) {
+
+.@{PCSS}-grid.grid-contained > .@{PCSS}-cell {
+    .ColsMid(cols, xs, 12);
+    .RowsMid(rows, xs, 12);
+}
+}
+
+each(@sizes, {   
+    @_threshold: ~"threshold_@{value}";
+    @container @PCSSs (min-width: @@_threshold) {
+    
+        .@{PCSS}-grid.grid-contained > .@{PCSS}-cell {
+            .ColsMid(cols, @value, 12);
+            .RowsMid(rows, @value, 12);
+        }
+    }
+})

package/pacem/layout/dark/index.less

@@ -0,0 +1,27 @@
+@import "visibility";
+@import "elevation";
+@import "grid-system";
+@import "typography";
+@import "other";
+@import "tokens-chips";
+@import "panels";
+@import "cards";
+@import "interactive";
+@import "positioning";
+@import "sizing";
+@import "spacing";
+@import "superposition-system";
+@import "lists";
+@import "address";
+@import "grids";
+@import "datatable";
+// to be imported separately by the shell css
+//@import "layout";
+@import "toolbar";
+@import "breadcrumbs";
+@import "fetch-feedback";
+@import "container";
+@import "scroll";
+@import "coloring";
+@import "borders";
+@import "shapes";

package/pacem/layout/dark/interactive.less

@@ -0,0 +1,10 @@
+@import "../shared";
+
+.@{PCSS}-clickable{
+    cursor: pointer;
+}
+
+@_cursors: pointer, default, wait, none, not-allowed, grab, grabbing;
+each(@_cursors, {
+   .cursor-@{value}{ cursor : @value; }
+});