@pacem/pacem-theme-less 1.0.0-amaldi

package/pacem/layout/dark/coloring.less

@@ -0,0 +1,184 @@
+@import "../shared";
+
+// halo effects
+.Halo(@clr, @size, @sizein) {
+    box-shadow: 0 0 @size @clr;
+
+    &.halo-in {
+        box-shadow: inset 0 0 @sizein @clr;
+    }
+
+    &.halo-in-out {
+        box-shadow: 0 0 @size @clr, inset 0 0 @sizein @clr;
+    }
+}
+
+.Halo(@clr) {
+    .Halo(@clr, @grid_spacing, @grid_spacing/2);
+}
+
+// glassmorphism
+.Glass(@clr, @radius) {
+    -webkit-backdrop-filter: blur(@radius);
+    backdrop-filter: blur(@radius);
+    background-color: rgba(@clr, .5);
+}
+
+.Glass(@clr) {
+    .Glass(@clr, 6px);
+}
+
+// gradient
+.FillGradient(@clr1, @clr2){
+    background-image: linear-gradient(in oklab, rgba(@clr1, 1) 50%, rgba(@clr2, 1) 100%);
+}
+
+.TextGradient(@clr1, @clr2) {
+    background-image: linear-gradient(in oklab, rgba(@clr1, 1), rgba(@clr2, 1));
+    background-clip: text;
+    -webkit-background-clip: text;
+    color: transparent;
+    -webkit-text-fill-color: transparent;
+}
+
+.fill-glass{
+    .Glass(~"var(--@{PCSS}-color-background-rgb)");
+}
+
+// invert
+.fill-invert {
+    background-color: ~"var(--@{PCSS}-color-default)";
+    color: ~"var(--@{PCSS}-color-default-inverse)";
+
+    &.fill-glass {
+        .Glass(~"var(--@{PCSS}-color-default-rgb)");
+    }
+}
+
+.halo-invert {
+    .Halo( ~"var(--@{PCSS}-color-default)");
+}
+
+@colors: @all_colors;
+
+// text
+each(@colors, {
+    .text-@{value}{
+        
+        // 'invert' behaves differently for backward-compatibility.
+
+        &:not(.text-interactive){
+            // force !important here
+            color: if(@value = invert, ~"var(--@{PCSS}-color-@{value}-inverse) !important", ~"var(--@{PCSS}-color-@{value}) !important");
+        }
+
+        &.text-gradient{
+            .TextGradient( ~"var(--@{PCSS}-color-@{value}-rgb)", ~"var(--@{PCSS}-color-@{value}-emphasis-hover-rgb)");
+        }
+
+        &.text-interactive{
+            // no need to force !important here
+            color: if(@value = invert, ~"var(--@{PCSS}-color-@{value}-inverse)", ~"var(--@{PCSS}-color-@{value})");
+
+            &:hover,
+            &:focus{
+                color: if(@value = invert, ~"var(--@{PCSS}-color-@{value}-inverse-emphasis-hover)", ~"var(--@{PCSS}-color-@{value}-emphasis-hover)");
+    
+                &.text-gradient{
+                    .TextGradient( ~"var(--@{PCSS}-color-@{value}-hover-rgb)", ~"var(--@{PCSS}-color-@{value}-emphasis-hover-rgb)");
+                }
+            }
+        }
+    }
+});
+// fill
+each(@colors, {
+    
+    .fill-@{value} {
+        background-color: ~"var(--@{PCSS}-color-@{value})";
+        color: ~"var(--@{PCSS}-color-@{value}-inverse)";
+
+        &.fill-interactive{
+            &:hover,
+            &:focus{
+                background-color: ~"var(--@{PCSS}-color-@{value}-hover)";
+                color: ~"var(--@{PCSS}-color-@{value}-inverse-hover)";
+            }
+        }
+
+        &.fill-glass{
+            .Glass(~"var(--@{PCSS}-color-@{value}-rgb)");
+        }
+
+        &.fill-gradient{
+            .FillGradient(~"var(--@{PCSS}-color-@{value}-rgb)", ~"var(--@{PCSS}-color-@{value}-hover-rgb)");
+        }
+
+        &.fill-interactive{
+            &:hover,
+            &:focus{
+                background-color: ~"var(--@{PCSS}-color-@{value}-hover)";
+                color: ~"var(--@{PCSS}-color-@{value}-inverse-hover)";
+
+                &.fill-glass{
+                    .Glass(~"var(--@{PCSS}-color-@{value}-hover-rgb)");
+                }
+
+                &.fill-gradient{
+                    .FillGradient(~"var(--@{PCSS}-color-@{value}-hover-rgb)", ~"var(--@{PCSS}-color-@{value}-emphasis-hover-rgb)");
+                }
+
+                & when (@glows = true) {
+                    text-shadow: 0 0 8px ~"var(--@{PCSS}-color-@{value}-inverse-hover)";
+                }
+            }
+        }
+    }
+
+    .fill-@{value}-container {
+        background-color: ~"var(--@{PCSS}-color-@{value}-container)";
+        color: ~"var(--@{PCSS}-color-@{value}-container-inverse)";
+
+        &.fill-glass{
+            .Glass(~"var(--@{PCSS}-color-@{value}-container-rgb)");
+        }
+
+        &.fill-gradient{
+            .FillGradient(~"var(--@{PCSS}-color-@{value}-container-rgb)", ~"var(--@{PCSS}-color-@{value}-container-hover-rgb)");
+        }
+
+        &.fill-interactive{
+            &:hover,
+            &:focus{
+                background-color: ~"var(--@{PCSS}-color-@{value}-container-hover)";
+                color: ~"var(--@{PCSS}-color-@{value}-container-inverse-hover)";
+
+                &.fill-glass{
+                    .Glass(~"var(--@{PCSS}-color-@{value}-container-hover-rgb)");
+                }
+
+                &.fill-gradient{
+                    .FillGradient(~"var(--@{PCSS}-color-@{value}-container-hover-rgb)", ~"var(--@{PCSS}-color-@{value}-container-emphasis-hover-rgb)");
+                }
+
+                & when (@glows = true) {
+                    text-shadow: 0 0 8px ~"var(--@{PCSS}-color-@{value}-container-inverse-hover)";
+                }
+            }
+        }
+    }
+
+    .halo-@{value} {
+        .Halo( ~"var(--@{PCSS}-color-@{value})");
+    }
+
+    .halo-@{value}-container {
+        .Halo( ~"var(--@{PCSS}-color-@{value}-container)");
+    }
+
+    .halo-@{value}-container-inverse {
+        .Halo( ~"var(--@{PCSS}-color-@{value}-container-inverse)");
+    }
+
+});
+

package/pacem/layout/dark/container.less

@@ -0,0 +1,50 @@
+@import "../shared";
+
+.@{PCSS}-contain {
+    contain: size;
+
+    &.contain-size {
+        // default
+    }
+
+    &.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;
+    }
+}
+
+.@{PCSS}-container {
+    container-type: inline-size;
+    container-name: ~"@{PCSS}";
+
+    &.container-inline-size {
+        // default
+    }
+
+    &.container-size {
+        container-type: size;
+    }
+
+    &.container-normal {
+        container-type: normal;
+    }
+}

package/pacem/layout/dark/datatable.less

@@ -0,0 +1,454 @@
+@import "../mixins";
+
+.DataTableColorize(@_clr) {
+    border-left-color: fade(@_clr, 20);
+    border-right-color: fade(@_clr, 20);
+
+    td, th {
+        .DataCellColorize(@_clr)
+    }
+}
+
+@_cell_crnr_unit: unit(@corner_datacell_size);
+
+.DataCellColorize(@_clr) {
+    border-color: fade(@_clr, 20);
+
+    &.datacell-corners {
+        .Corners(fade(@_clr, 25), 0, @_cell_crnr_unit);
+    }
+
+    &.datacell-filled {
+        background-color: fade(@_clr, 10);
+    }
+}
+
+table.@{PCSS}-datatable {
+    border-collapse: collapse;
+    border-left: 1px solid @color_border;
+    border-right: 1px solid @color_border;
+    width: 100%;
+    table-layout: fixed;
+
+    thead td, thead th {
+        font-weight: 700;
+    }
+
+    tbody tr:hover {
+        background-color: fade(@color_border, 5);
+        color: invert(fade(@color_border, 100));
+    }
+
+    th, td {
+
+        &.datacell-corners {
+            .Corners(fade(@color_border, 100), 0, @_cell_crnr_unit);
+        }
+
+        border-left: none;
+        border-right: none;
+        border-top: 1px solid @color_border;
+        border-bottom: 1px solid @color_border;
+        padding: round(@grid_spacing/3);
+        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;
+            //border-color: transparent !important;
+        }
+
+        &.datacell-truncate {
+            .Ellipsed();
+        }
+    }
+    // whole table
+    &.datatable-accent {
+        .DataTableColorize(@color_accent);
+    }
+
+    &.datatable-primary {
+        .DataTableColorize(@color_primary);
+    }
+
+    &.datatable-success {
+        .DataTableColorize(@color_success);
+    }
+
+    &.datatable-danger {
+        .DataTableColorize(@color_danger);
+    }
+
+    &.datatable-warning {
+        .DataTableColorize(@color_warning);
+    }
+
+    &.datatable-error {
+        .DataTableColorize(@color_error);
+    }
+
+    &.datatable-disabled {
+        .DataTableColorize(@color_disabled);
+    }
+
+    td {
+        &.datacell-accent {
+            .DataCellColorize(@color_accent);
+        }
+
+        &.datacell-primary {
+            .DataCellColorize(@color_primary);
+        }
+
+        &.datacell-success {
+            .DataCellColorize(@color_success);
+        }
+
+        &.datacell-danger {
+            .DataCellColorize(@color_danger);
+        }
+
+        &.datacell-warning {
+            .DataCellColorize(@color_warning);
+        }
+
+        &.datacell-error {
+            .DataCellColorize(@color_error);
+        }
+
+        &.datacell-disabled {
+            .DataCellColorize(@color_disabled);
+        }
+    }
+}
+
+.DataTableColorize2(@prefix, @_clr) {
+    border-color: fade(@_clr, 20);
+
+    .@{PCSS}-@{prefix} {
+        border-bottom-color: fade(@_clr, 20);
+        .DataCellColorize2(@prefix, @_clr)
+    }
+}
+
+.DataCellColorize2(@prefix, @_clr) {
+
+    &.@{prefix}-corners {
+        .Corners(fade(@_clr, 12.5), 0, @_cell_crnr_unit);
+    }
+
+    &.@{prefix}-filled {
+        background-color: fade(@_clr, 10);
+        border-left-color: fade(@_clr, 20);
+        border-right-color: fade(@_clr, 20);
+    }
+}
+
+.DataCell(@prefix) {
+
+    &.@{prefix}-corners {
+        .Corners(@color_border, 0, @_cell_crnr_unit);
+    }
+
+    display: flex;
+    box-sizing: border-box;
+    padding: @grid_spacing/3 @grid_spacing/2;
+    border-top: 0 solid @color_border;
+    border-bottom: 1px solid @color_border;
+    min-width: 0;
+
+    &.@{prefix}-right {
+        justify-content: flex-end;
+    }
+
+    &.@{prefix}-left {
+        justify-content: flex-start;
+    }
+
+    &.@{prefix}-center {
+        justify-content: center;
+    }
+
+    &.@{prefix}-fill {
+        justify-content: stretch;
+    }
+
+    &.@{prefix}-middle {
+        align-items: center;
+    }
+
+    &.@{prefix}-top {
+        align-items: flex-start;
+    }
+
+    &.@{prefix}-bottom {
+        align-items: flex-end;
+    }
+
+    &.@{prefix}-accent {
+        .DataCellColorize2(@prefix,@color_accent);
+    }
+
+    &.@{prefix}-primary {
+        .DataCellColorize2(@prefix,@color_primary);
+    }
+
+    &.@{prefix}-success {
+        .DataCellColorize2(@prefix,@color_success);
+    }
+
+    &.@{prefix}-danger {
+        .DataCellColorize2(@prefix,@color_danger);
+    }
+
+    &.@{prefix}-warning {
+        .DataCellColorize2(@prefix,@color_warning);
+    }
+
+    &.@{prefix}-error {
+        .DataCellColorize2(@prefix,@color_error);
+    }
+
+    &.@{prefix}-disabled {
+        .DataCellColorize2(@prefix,@color_disabled);
+    }
+}
+
+.@{PCSS}-datatable {
+    display: grid;
+    grid-gap: 0;
+    border-left: 1px solid @color_border;
+    border-right: 1px solid @color_border;
+    border-top: 1px solid @color_border;
+    border-bottom: 0 !important;
+    position: relative;
+
+    @_clr_row_alt: fade(@color_background_alt, 20);
+
+    .@{PCSS}-datarow {
+        z-index: 0;
+        pointer-events: none;
+        background-color: @datarow_color;
+
+        &.datarow-alt {
+            background-color: @datarow_alt_color;
+        }
+    }
+
+    .@{PCSS}-datacell:hover ~ .@{PCSS}-datarow {
+        background-color: @datarow_hover_color;
+
+        + .@{PCSS}-datacell ~ .@{PCSS}-datarow {
+            background-color: @datarow_color;
+
+            &.datarow-alt {
+                background-color: @datarow_alt_color;
+            }
+        }
+    }
+
+    .@{PCSS}-headcell {
+        .DataCell(headcell);
+        z-index: 2;
+    }
+
+    .@{PCSS}-headcell {
+        font-weight: bold;
+
+        &.headcell-sticky {
+            position: sticky;
+            top: 0;
+            background: @color_background;
+        }
+    }
+
+    &.datatable-accent {
+        .DataTableColorize2(datatable, @color_accent);
+    }
+
+    &.datatable-primary {
+        .DataTableColorize2(datatable, @color_primary);
+    }
+
+    &.datatable-success {
+        .DataTableColorize2(datatable, @color_success);
+    }
+
+    &.datatable-danger {
+        .DataTableColorize2(datatable, @color_danger);
+    }
+
+    &.datatable-warning {
+        .DataTableColorize2(datatable, @color_warning);
+    }
+
+    &.datatable-error {
+        .DataTableColorize2(datatable, @color_error);
+    }
+
+    &.datatable-disabled {
+        .DataTableColorize2(datatable, @color_disabled);
+    }
+
+    .@{PCSS}-datacell {
+        .DataCell(datacell);
+        z-index: 1;
+    }
+
+    .@{PCSS}-footcell {
+        .DataCell(footcell);
+        z-index: 1;
+    }
+
+    .@{PCSS}-headcell.headcell-truncate,
+    .@{PCSS}-headcell.headcell-ellipsed,
+    .@{PCSS}-datacell.datacell-truncate,
+    .@{PCSS}-datacell.datacell-ellipsed,
+    .@{PCSS}-footcell.footcell-truncate,
+    .@{PCSS}-footcell.footcell-ellipsed {
+        .Ellipsed();
+        display: block;
+    }
+
+
+    .@{PCSS}-datacell,
+    .@{PCSS}-datarow {
+
+        &.datarow-off,
+        &.datacell-off {
+            opacity: 0.4;
+        }
+    }
+
+    .@{PCSS}-headcell.headcell-tools,
+    .@{PCSS}-datacell.datacell-tools,
+    .@{PCSS}-footcell.footcell-tools {
+        .ToolButtons(@grid_spacing);
+    }
+
+    &.border-solid {
+        border-left-style: solid;
+        border-top-style: solid;
+        border-right-style: solid;
+
+        .@{PCSS}-headcell,
+        .@{PCSS}-datacell,
+        .@{PCSS}-footcell {
+            border-bottom-style: solid;
+        }
+    }
+
+    &.border-dotted {
+        border-left-style: dotted;
+        border-top-style: dotted;
+        border-right-style: dotted;
+
+        .@{PCSS}-headcell,
+        .@{PCSS}-datacell,
+        .@{PCSS}-footcell {
+            border-bottom-style: dotted;
+        }
+    }
+
+    &.border-dashed {
+        border-left-style: dashed;
+        border-top-style: dashed;
+        border-right-style: dashed;
+
+        .@{PCSS}-headcell,
+        .@{PCSS}-datacell,
+        .@{PCSS}-footcell {
+            border-bottom-style: dashed;
+        }
+    }
+
+    .@{PCSS}-headcell,
+    .@{PCSS}-datacell,
+    .@{PCSS}-footcell {
+        &.border-solid {
+            border-bottom-style: solid;
+        }
+    }
+
+    .@{PCSS}-headcell,
+    .@{PCSS}-datacell,
+    .@{PCSS}-footcell {
+        &.border-dotted {
+            border-bottom-style: dotted;
+        }
+    }
+
+    .@{PCSS}-headcell,
+    .@{PCSS}-datacell,
+    .@{PCSS}-footcell {
+        &.border-dashed {
+            border-bottom-style: dashed;
+        }
+    }
+
+    &.datatable-no-sideborders {
+        border-left-width: 0;
+        border-right-width: 0;
+    }
+
+    &.datatable-noborders {
+        border-width: 0;
+
+        .@{PCSS}-datacell.datacell-lastrow {
+            border-bottom-width: 0;
+        }
+
+        .@{PCSS}-footcell {
+            border-top: 1px solid @color_border;
+            border-bottom-width: 0;
+        }
+
+        &.border-dotted {
+            .@{PCSS}-footcell {
+                border-top-style: dotted;
+            }
+        }
+
+        &.border-dashed {
+            .@{PCSS}-footcell {
+                border-top-style: dashed;
+            }
+        }
+    }
+
+    &.datatable-norows {
+        .@{PCSS}-datarow {
+            background-color: transparent;
+        }
+
+        .@{PCSS}-datacell:hover ~ .@{PCSS}-datarow {
+            background-color: @datarow_hover_color;
+
+            + .@{PCSS}-datacell ~ .@{PCSS}-datarow {
+                background-color: transparent;
+
+                &.datarow-alt {
+                    background-color: transparent;
+                }
+            }
+        }
+    }
+}