pacem-less 0.40.5-byblos → 0.50.0-atlantis

package/fonts-empty.less

@@ -1,4 +1,11 @@
-@import url(https://fonts.googleapis.com/css?family=Material+Icons);
+@import 'shared';
+
+@font_icons_apiurl: @material_symbols_font;
+@font_std_apiurl: https://fonts.googleapis.com/css?family=Roboto+Condensed:300,700;
+@font_main_apiurl: https://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700;
+@font_tech_apiurl: https://fonts.googleapis.com/css?family=Share+Tech+Mono;
+
+/*@import url("@{material_symbols_font}");
 @import url(https://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700);
 @import url(https://fonts.googleapis.com/css?family=Share+Tech+Mono);
-@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:300,700);
+@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:300,700);*/

package/pacem/fonts-dark.less

@@ -1,4 +1,6 @@
-@import url(https://fonts.googleapis.com/css?family=Material+Icons);
-@import url(https://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700);
-@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:300,700);
-@import url(https://fonts.googleapis.com/css?family=Fira+Mono:400,700);
+@import "../shared";
+@font_icons_apiurl: @material_symbols_font;
+// wrap in quotes when ';' in the url
+@font_main_apiurl: ~"'https://fonts.googleapis.com/css2?family=PT+Sans+Narrow:wght@400;700&display=swap'";
+@font_std_apiurl: ~"'https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;700&display=swap'";
+@font_tech_apiurl: ~"'https://fonts.googleapis.com/css2?family=Fira+Mono:wght@400;700&display=swap'";

package/pacem/fonts-light.less

@@ -1,4 +1,7 @@
-@import url(https://fonts.googleapis.com/css?family=Material+Icons);
-@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700);
-@import url(https://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700);
-@import url(https://fonts.googleapis.com/css?family=Fira+Mono:400,700);
+@import "../shared";
+
+@font_icons_apiurl: @material_symbols_font;
+// wrap in quotes when ';' in the url
+@font_main_apiurl: ~"'https://fonts.googleapis.com/css2?family=PT+Sans+Narrow:wght@400;700&display=swap'";
+@font_std_apiurl: ~"'https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;700&display=swap'";
+@font_tech_apiurl: ~"'https://fonts.googleapis.com/css2?family=Fira+Mono:wght@400;700&display=swap'";

package/pacem/fonts-phousys.less

@@ -1,6 +1,8 @@
-@import url(https://fonts.googleapis.com/css?family=Material+Icons);
-@import url(https://fonts.googleapis.com/css?family=Teko:300);
-@import url(https://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700);
-@import url(https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap);
-//@import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:300,700);
-@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:300,700);
+@import "../shared";
+
+@font_icons_apiurl: @material_symbols_font;
+// wrap in quotes when ';' in the url
+@font_main_apiurl: ~"'https://fonts.googleapis.com/css2?family=PT+Sans+Narrow:wght@400;700&display=swap'";
+@font_std_apiurl: ~"'https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;700&display=swap'";
+@font_tech_apiurl: ~"https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap";
+@font_btn_apiurl: ~"https://fonts.googleapis.com/css2?family=Teko:wght@300&display=swap";

package/pacem/icons.less

@@ -4,7 +4,15 @@
 i.@{PCSS}-icon {
     .IconCore();
     .PacemIconCore();
-    
+
+    &.icon-fill {
+        .IconVariation(1);
+    }
+
+    &.icon-outline {
+        .IconVariation(0);
+    }
+
     &.space-left {
         margin-left: @grid_spacing/2;
 
@@ -22,7 +30,6 @@ i.@{PCSS}-icon {
     }
 
     transform-origin: center center;
-
     // rotate
     &.rotate-45 {
         transform: rotate(45deg);
@@ -52,3 +59,18 @@ i.@{PCSS}-icon {
         transform: rotate(315deg);
     }
 }
+
+i.material-icons {
+    font-family: ~"var(--@{PCSS}-font-icons)" !important;
+    font-size: @font_icon_size;
+    font-weight: normal;
+    font-style: normal;
+    line-height: 1;
+    letter-spacing: normal;
+    text-transform: none;
+    display: inline-block;
+    white-space: nowrap;
+    word-wrap: normal;
+    direction: ltr;
+    -webkit-font-smoothing: antialiased;
+}

package/pacem/layout/dark/typography.less

@@ -10,7 +10,7 @@ h1, h2, h3 {
 }
 
 h1, h2, h3, h4, h5, h6 {
-    font-weight: 400;
+    font-weight: @font_main_weight;
     font-family: ~"var(--@{PCSS}-font-main)";
     line-height: 1.1;
 

package/pacem/layout/mixins.less

@@ -273,7 +273,7 @@
         text-transform: uppercase;
 
         h1, h2, h3, h4, h5, h6 {
-            font-weight: normal;
+            font-weight: @font_main_weight;
         }
     }
 

package/pacem/maps/index.less

@@ -1,11 +1,18 @@
 @import "../theme-dark";
 
 @{P}-map,
-@{P}-map-marker {
-
+@{P}-map-marker,
+@{P}-map-circle,
+@{P}-map-polygon,
+@{P}-map-polyline,
+@{P}-map-rectangle,
+@{P}-map-geocoder,
+@{P}-map-adapter-leaflet,
+@{P}-map-adapter-google,
+@{P}-map-adapter-azure {
     font-size: 0;
     display: none !important;
-
+    user-select: none;
 }
 
 .@{PCSS}-map > div{

package/pacem/pacem.less

@@ -63,8 +63,6 @@ html .@{PCSS}-preloader {
 }
 
 @{shell} when (@shell_only = false), (@full_theme = true) {
-    // fonts
-    @import "@{fonts}";
 
     @import "logging/index";
     @import "body";
@@ -153,9 +151,12 @@ html .@{PCSS}-preloader {
     @import "text-overrides";
 }
 
-// do not render variables in shell-only mode in order to ease themeable scenarios
 @{shell}:root when (@shell_only = false), (@full_theme = true) {
 
+    // fonts
+    @import "@{fonts}";
+
+
     @_size_1: @grid_spacing/3;
     @_size_2: @_size_1 * 2;
     @_size_3: @_size_1 * 3;
@@ -198,7 +199,7 @@ html .@{PCSS}-preloader {
         @_r: round(red(@value));
         @_g: round(green(@value));
         @_b: round(blue(@value));
-        
+
         --@{PCSS}-color-@{key}-rgb: @_r, @_g, @_b;
     }
 
@@ -306,9 +307,16 @@ each(range(12), {
     });
 // font-faces
 --@{PCSS}-font-std: @font_std;
+--@{PCSS}-font-icons: @font_icons;
 --@{PCSS}-font-main: @font_main;
 --@{PCSS}-font-tech: @font_tech;
 --@{PCSS}-font-btn: @button_fontfamily;
+// font api urls, just in case
+--@{PCSS}-font-std-api-url: @font_std_apiurl;
+--@{PCSS}-font-main-api-url: @font_main_apiurl;
+--@{PCSS}-font-tech-api-url: @font_tech_apiurl;
+--@{PCSS}-font-btn-api-url: @font_btn_apiurl;
+--@{PCSS}-font-icons-api-url: @font_icons_apiurl;
 // z-indexing
 --@{PCSS}-zindex-toast: @toast_z_index;
 --@{PCSS}-zindex-balloon: @balloon_z_index;
@@ -358,6 +366,7 @@ each(range(12), {
 /* #endregion deprecated */
 }
 
+
 // extra
 @extra: "your-extra.less";
-@import (optional) "@{extra}";
+@import (optional) "@{extra}";

package/pacem/plus/carousel.less

@@ -36,8 +36,7 @@
         }
 
         h3 {
-            .FontMain(2);
-            font-weight: normal;
+            .FontMain(2, @font_main_weight);
             margin-bottom: @padding;
         }
         /*p,*/ div.paragraph {

package/pacem/scaffolding/dark/calendar-picker.less

@@ -78,7 +78,7 @@
 
             > @{P}-span {
                 display: block;
-                font-weight: bold;
+                font-weight: 700;
                 border: 1px solid transparent;
                 padding: 0 @grid_spacing 0 @grid_spacing/6;
 

package/pacem/scaffolding/dark/char-counter.less

@@ -26,7 +26,7 @@
         }
 
         &.@{PCSS}-char-curr {
-            font-weight: bold;
+            font-weight: 700;
         }
     }
 

package/pacem/scaffolding/dark/checkbox.less

@@ -12,6 +12,7 @@
     label.@{PCSS}-label.@{PCSS}-checkbox {
         &::before {
             .Icon('check_box_outline_blank', @_checkbox_size);
+            .IconVariation(0);
             left: @input_padding_horiz;
             line-height: @field_height;
             color: @color_input_toggle;
@@ -24,14 +25,17 @@
 
     &.@{PCSS}-selected label.@{PCSS}-label.@{PCSS}-checkbox:before {
         content: 'check_box';
+        .IconVariation(1);
     }
 
     .@{PCSS}-readonly.@{PCSS}-checkbox {
         .FormFieldLabelIcon('check_box_outline_blank');
+        .IconVariation(0);
     }
 
     &.@{PCSS}-selected .@{PCSS}-readonly.@{PCSS}-checkbox::before {
         content: 'check_box';
+        .IconVariation(1);
     }
 }
 

package/pacem/scaffolding/dark/geolocate.less

@@ -0,0 +1,12 @@
+@import "../../../shared";
+@import "../shared";
+
+@{P}-geolocate {
+    .FormFieldItemWrapper();
+
+    @media (min-width: @threshold_lg) {
+        @{P}-suggest:not(.field-stretch) {
+            display: block;
+        }
+    }
+}

package/pacem/scaffolding/dark/index.less

@@ -47,8 +47,9 @@ label.@{PCSS}-label{
 @import "tags";
 @import "snapshot";
 @import "image";
-@import "slider";
-@import "char-counter";
+@import "slider";
+@import "namevalue-list";
+@import "char-counter";
 @import "formfield";
 @import "form";
 @import "dialog-overrides";

package/pacem/scaffolding/dark/radio.less

@@ -10,6 +10,7 @@ label.@{PCSS}-label.@{PCSS}-radio,
 
     &::before {
         .Icon('radio_button_unchecked', 1.1rem * @font_rem_factor);
+        .IconVariation(0);
         left: @input_padding_horiz;
         line-height: @field_height;
         color: @color_input_toggle;
@@ -20,6 +21,7 @@ label.@{PCSS}-label.@{PCSS}-radio,
 
     &.@{PCSS}-selected label.@{PCSS}-label.@{PCSS}-radio:before {
         content: 'radio_button_checked';
+        .IconVariation(0);
     }
 }
 
@@ -28,6 +30,7 @@ label.@{PCSS}-label.@{PCSS}-radio,
 
     .@{PCSS}-readonly.@{PCSS}-radio {
         .FormFieldLabelIcon('check_circle');
+        .IconVariation(1);
     }
 
     &.@{PCSS}-disabled {

package/pacem/scaffolding/dark/suggest.less

@@ -65,7 +65,7 @@
             span.@{PCSS}-highlight {
                 background-color: transparent;
                 color: @color_suggest_highlight;
-                font-weight: bold;
+                font-weight: 700;
             }
 
             &[data-pacem-disabled=true] {

package/pacem/scaffolding/dark/validators.less

@@ -30,7 +30,7 @@
     color: @color_error;
     margin-left: 0;
 
-    & when (@dark_theme = true) {
+    /*& when (@dark_theme = true) {
         font-weight: 700;
-    }
+    }*/
 }

package/pacem/theme-dark.less

@@ -44,11 +44,13 @@
 @color_watermark: #c0c0c0;
 @color_light: #fff;
 @font_weight: 300;
+@font_std_weight: @font_weight;
+@font_main_weight: 400;
+@font_tech_weight: 400;
+
 @font_main: 'PT Sans Narrow', 'Segoe UI Light', Helvetica, sans-serif;
 // @font_tech: Inconsolata, Monospace;
 @font_tech: 'Fira Mono', Monospace;
-@font_icons: 'Material Icons';
-@font_icon_size: @grid_spacing;
 @font_size: 14px;
 @font_rem_factor: 1;
 @font_std: 'Roboto Condensed', 'Segoe UI', Helvetica, sans-serif;
@@ -56,6 +58,10 @@
 @font_main_rem_factor: 1;
 @font_tech_rem_factor: @font_rem_factor;
 
+@font_icons: 'Material Symbols Outlined';
+@font_icon_size: @grid_spacing;
+@font_icon_fill: 1;
+
 // tweak needed to align the icon to the std font baseline
 @font_icon_offset: -1px;
 
@@ -606,7 +612,7 @@
 }
 
 .IconCore() {
-    font-family: @font_icons;
+    font-family: ~"var(--@{PCSS}-font-icons)";
     text-transform: none;
     letter-spacing: normal;
     word-wrap: normal;
@@ -620,6 +626,13 @@
     -moz-osx-font-smoothing: grayscale;
     /* Support for IE. */
     font-feature-settings: 'liga';
+    // variable fonts
+    transition: font-variation-settings .25s @easing_in_out_sine;
+    font-variation-settings: 'FILL' @font_icon_fill, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+}
+
+.IconVariation(@fill) {
+    font-variation-settings: 'FILL' @fill, 'wght' 400, 'GRAD' 0, 'opsz' 24;
 }
 
 .PacemIcon(@icon) {

package/pacem/theme-light.less

@@ -7,6 +7,8 @@
 @font_weight: 400;
 @font_rem_factor: 1;
 
+@font_icon_fill: 0;
+
 @color_blue: #fff; // #1e2336;
 @color_red: #ff005a; // #af0843;
 @color_teal: #429bbb; // #8fbbcc; //#73c8e9;
@@ -75,7 +77,8 @@
 @balloon_color: #e4e7e9;
 @balloon_shadows: true;
 // contextmenu
-@color_contextmenu_hover_back: darken(@color_button_back, @button_hover_percentage);
+@color_contextmenu_hover_back: lighten(@color_button_back, 1);
+@color_contextmenu_hover_fore: darken(@color_default, @button_hover_percentage);
 // slider
 @color_slider_thumb: darken(@color_button_back, 5);
 // suggest
@@ -83,6 +86,7 @@
 @color_suggest_back: @color_lightblue;
 @color_suggest_border_light: rgba(255,255,255,0.8);
 @color_suggest_border_dark: rgba(0,0,0,0.075);
+
 // tab
 @color_tab_back: @color_background; // @color_button_back;
 @color_tab_highlight: @color_highlight;

package/pacem/theme-phousys.less

@@ -14,7 +14,7 @@
 @font_btn: 'Teko', sans-serif;
 @font_main: 'PT Sans Narrow', 'Segoe UI Light', Helvetica, sans-serif;
 @font_tech: 'Share Tech Mono', Monospace;
-@font_icons: 'Material Icons';
+@font_icons: 'Material Symbols Outlined';
 @font_size: 14px;
 @font_std_rem_factor: 1;
 @font_main_rem_factor: 1;

package/pacem/ui/dark/balloon.less

@@ -20,8 +20,8 @@
     }
 
     &::after {
-        color: fade(@_clr, @_opacity);
-        text-shadow: 0 0 1px fade(@_clr2, @_opacity);
+        @_clr0: fade(@_clr, min(99, @_opacity));
+        content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='@{grid_spacing}' viewBox='0 0 24 24' width='@{grid_spacing}' fill='@{_clr0}'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
     }
 
     &.balloon-corners {
@@ -66,22 +66,41 @@
     @_offset: -2 * @grid_spacing / 3;
 
     &::after {
-        .Icon('play_arrow', @grid_spacing);
+        position: absolute;
+        display: block;
+        width: @grid_spacing;
+        height: $width;
     }
 
     .BalloonColorize(@balloon_color, @color_default, @balloon_color, 100);
 
+    .BalloonTipShadow(@a, @b, @c, @f) {
+
+        &when (@balloon_shadows = true) and (@dark_theme = true) and (luminance(@color_background) >= 5) {
+            filter: drop-shadow(@a @b @c fade( @color_dark, 50 * @f));
+        }
+
+        &when (@balloon_shadows = true) and (@dark_theme = true) and (luminance(@color_background) < 5) {
+            filter: drop-shadow(@a @b @c fade( @color_dark, 75 * @f));
+        }
+
+        &when (@balloon_shadows = true) and (@dark_theme = false) {
+            filter: drop-shadow(@a @b @c fade( @color_dark, 25 * @f));
+        }
+    }
+
     &.balloon-right {
         &::after {
             transform: rotateZ(180deg);
             left: @_offset;
+            .BalloonTipShadow(2px, -2px, 1px, .5);
         }
     }
 
     &.balloon-left {
         &::after {
-            //transform: rotateZ(-90deg);
             right: @_offset;
+            .BalloonTipShadow(2px, 2px, 1px, .5);
         }
     }
 
@@ -89,6 +108,7 @@
         &::after {
             bottom: @_offset;
             transform: rotate(90deg);
+            .BalloonTipShadow(3px, 0, 2px, 1);
         }
     }
 
@@ -96,6 +116,8 @@
         &::after {
             transform: rotateZ(-90deg);
             top: @_offset;
+            // no shadow under the tip
+            .BalloonTipShadow(2px, 0, 1px, .5);
         }
     }
 
@@ -205,6 +227,10 @@
         .BalloonColorize(@color_primary, @color_primary_inv);
     }
 
+    &.balloon-secondary {
+        .BalloonColorize(@color_secondary, @color_secondary_inv);
+    }
+
     &.balloon-alternative {
         .BalloonColorize(@color_background, @color_default);
     }

package/pacem/ui/dark/icon.less

@@ -8,11 +8,26 @@
     > i,
     > i.@{PCSS}-icon,
     > i.material-icons,
+    > i.material-symbols-outlined,
+    > i.material-symbols-sharp,
+    > i.material-symbols-rounded,
     > img,
     > svg {
         display: block;
     }
 
+    &.icon-fill {
+        > i {
+            .IconVariation(1);
+        }
+    }
+
+    &.icon-outline {
+        > i {
+            .IconVariation(0);
+        }
+    }
+
     &.icon-text-bottom {
         vertical-align: text-bottom;
     }
@@ -71,3 +86,56 @@
         }
     }
 }
+
+// sizes
+@{P}-icon, i.@{PCSS}-icon {
+
+    &.icon-size-small {
+        font-size: .9 * @font_icon_size;
+    }
+
+    &.icon-size-smaller {
+        font-size: .8667 * @font_icon_size;
+    }
+
+    &.icon-size-tiny {
+        font-size: .75 * @font_icon_size;
+    }
+
+    &.icon-size-smallest {
+        font-size: .6667 * @font_icon_size;
+    }
+
+    &.icon-size-big {
+        font-size: 1.3333 * @font_icon_size;
+    }
+
+    &.icon-size-bigger {
+        font-size: 1.6667 * @font_icon_size;
+    }
+
+    &.icon-size-huge {
+        font-size: 2 * @font_icon_size;
+    }
+
+    &.icon-size-biggest {
+        font-size: 2.5 * @font_icon_size;
+    }
+
+    &.icon-size-regular {
+        font-size: @font_icon_size;
+    }
+
+    &.icon-size {
+
+        each(range(12), {
+
+            &.icon-size-@{value}{
+                font-size: ~"var(--@{PCSS}-size-@{value})";
+            }
+            &.icon-size--@{value}{
+                font-size: ~"var(--@{PCSS}-size--@{value})";
+            }
+        });
+    }
+}

package/pacem/ui/dark/markdown.less

@@ -179,7 +179,7 @@
             .code-keyword,
             .@{PCSS}-keyword {
                 color: #00f;
-                font-weight: bold;
+                font-weight: 700;
             }
 
             .code-number,

package/pacem/ui/dark/toc.less

@@ -14,7 +14,7 @@
 
         &.toc-focus {
             border-color: @color_primary;
-            font-weight: bold;
+            font-weight: 700;
         }
     }
 }

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.40.5-byblos",
+  "version": "0.50.0-atlantis",
   "name": "pacem-less",
   "homepage": "https://js.pacem.it",
   "repository": {

package/shared.less

@@ -1,4 +1,11 @@
 
+@font_icons_apiurl: e("");
+@font_std_apiurl: e("");
+@font_tech_apiurl: e("");
+@font_main_apiurl: e("");
+@font_btn_apiurl: e("");
+@material_symbols_font: ~"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200";
+
 .Ellipsed(@max-width) {
     white-space: nowrap;
     overflow: hidden;

package/theme-empty.less

@@ -12,7 +12,7 @@
 @font_weight: 300;
 @font_main: 'PT Sans Narrow', 'Segoe UI Light', Helvetica, sans-serif;
 @font_tech: 'Share Tech Mono', Monotype;
-@font_icons: 'Material Icons';
+@font_icons: 'Material Symbols Outlined';
 @font_size: 14px;
 @font_std: 'Roboto Condensed', 'Segoe UI', Helvetica, sans-serif;
 @font_rem_factor: 1; // <- adjustment factor for @font_std vs @font_size