@pacem/pacem-theme-less 1.0.0-amaldi

package/pacem/pacem-animations.less

@@ -0,0 +1,202 @@
+@import "theme-dark";
+
+@keyframes core-anim {
+    0% {
+        transform: translateY(@grid_spacing * 2);
+    }
+
+    100% {
+        transform: none;
+    }
+}
+
+@keyframes default-anim {
+    0% {
+        transform: translateY(@grid_spacing/2);
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 1;
+        transform: none;
+    }
+}
+
+@keyframes full-offset-rtl-anim {
+    0% {
+        transform: translateX(100%);
+    }
+
+    100% {
+        transform: translateX(-100%);
+    }
+}
+
+@keyframes full-offset-ltr-anim {
+    0% {
+        transform: translateX(-100%);
+    }
+
+    100% {
+        transform: translateX(100%);
+    }
+}
+
+@keyframes pop-anim {
+    0% {
+        transform: scale(0,0);
+    }
+
+    100% {
+        transform: none;
+    }
+}
+
+// defined in loader.less (which is included in the shell css)
+/*@keyframes rotate-anim {
+
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}*/
+
+@keyframes fade-in {
+    0% {
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 1;
+    }
+}
+
+@keyframes list-item {
+    0% {
+        transform: translateY(-1 * @grid_spacing);
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 1;
+        transform: none;
+    }
+}
+
+@keyframes list-item-left {
+    0% {
+        transform: translateX(-@grid_spacing);
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 1;
+        transform: none;
+    }
+}
+
+@keyframes list-item-right {
+    0% {
+        transform: translateX(@grid_spacing);
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 1;
+        transform: none;
+    }
+}
+
+@keyframes list-item-bottom {
+    0% {
+        transform: translateY(@grid_spacing);
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 1;
+        transform: none;
+    }
+}
+
+@keyframes shooting-star {
+    0% {
+        transform: translateY(-@grid_spacing);
+        opacity: 0;
+    }
+
+    50% {
+        opacity: 1;
+        transform: translateY(0);
+    }
+
+    100% {
+        opacity: 0;
+        transform: translateY(@grid_spacing);
+    }
+}
+
+@keyframes enhanced-anim {
+    0% {
+        transform: translateY(@grid_spacing) scaleY(1.5);
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 1;
+        transform: none;
+    }
+}
+
+@keyframes alt-anim {
+    0% {
+        transform: translateY(@grid_spacing) scaleY(0.75);
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 1;
+        transform: none;
+    }
+}
+
+@keyframes appear-anim {
+    0% {
+        transform: scale(0.925);
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 1;
+        transform: none;
+    }
+}
+
+@keyframes header-anim {
+    0% {
+        transform: translateX(@grid_cell);
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 1;
+        transform: none;
+    }
+}
+
+@keyframes bright-out {
+    0% {
+        -o-filter: brightness(5);
+        -webkit-filter: brightness(5);
+        filter: brightness(5);
+    }
+
+    100% {
+        -o-filter: brightness(1);
+        -webkit-filter: brightness(1);
+        filter: brightness(1);
+    }
+}

package/pacem/pacem.less

@@ -0,0 +1,448 @@
+@import "../shared";
+@import "ui/shared";
+
+.reset() when (@shell_only = true), (@full_theme = true) {
+    // reset
+    @import "reset";
+}
+
+.reset();
+
+html .@{PCSS}-preloader {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+    pointer-events: none;
+    display: grid;
+    align-content: center;
+    justify-content: center;
+    align-items: center;
+    z-index: @toast-z-index + 1000;
+    background-color: #fff;
+}
+
+@shell_only: false;
+@full_theme: true;
+
+// variable values that get overridden
+@fonts: "fonts-none"; // <- wasn't able to come up with something that works by exploiting mixin guards
+@theme: "dark";
+
+// theme
+@import "theme-@{theme}";
+
+// bug in Less.js: https://github.com/less/less.js/issues/3388
+// cannot pass variables like 'html[theme=dark]' due to the '=' sign in it
+
+@{shell} when (@shell_only = true), (@full_theme = true) {
+    // basic stuff
+    @import "pacem-animations";
+    @import "attributes";
+    // reset lists
+    ol, ul {
+        margin-top: 0;
+        margin-bottom: 1em; //1rem * @font_rem_factor;
+        padding: 0 0 0 @grid_spacing * 1.25;
+
+        ol, ul {
+            margin-bottom: 0;
+        }
+    }
+    // layout system: -body, header, footer, toolbars...
+    @import "layout/@{theme}/layout";
+    // loader
+    @import "ui/@{theme}/loader";
+    // menu
+    @import "ui/@{theme}/menu";
+    @import "ui/@{theme}/sidebar";
+}
+
+@{shell} when (@shell_only = false), (@full_theme = true) {
+
+    @import "logging/index";
+    @import "body";
+    @import "icons";
+    @import "basic/index";
+    // missing pieces from the shell
+    @import "layout/index";
+    @import "ui/index";
+
+    @import "scaffolding/index";
+    @import "maps/index";
+    @import "3d/index";
+    @import "2d/index";
+    @import "media/index";
+    @import "plus/index";
+    @import "charts/index";
+    @import "cms/index";
+    @import "fx/index";
+    @import "transforms/index";
+    /* #region fancy extra */
+    .Gloss(@_clr) {
+        .GradientVertical(50%, 50%, 100%, fade(@_clr, 0), fade(@_clr, 40), fade(@_clr, 10));
+    }
+
+    .Gloss() {
+        .Gloss(#fff);
+    }
+
+    .@{PCSS}-gloss when (@gradients = true) {
+        .Gloss();
+    }
+    /* #region */
+    /* #region background overrides */
+    .Bg(@_clr, @_clr_inv) {
+
+        &.@{PCSS}-gloss when (@shadows = true) {
+            box-shadow: inset @grid_spacing/12 0 @grid_spacing/12 @_clr, inset -@grid_spacing/12 0 @grid_spacing/12 @_clr;
+            text-shadow: 0 1px 0 @_clr, 0 -1px 0 @_clr, -1px 0 0 @_clr, 1px 0 0 @_clr;
+        }
+
+        &.@{PCSS}-gloss when (@gradients = true) {
+            .Gloss(@_clr_inv);
+            background-color: @_clr;
+        }
+
+        background-color: @_clr;
+        color: @_clr_inv;
+    }
+
+    .bg-default {
+        .Bg(@color_background, @color_default);
+    }
+
+    .bg-error {
+        .Bg(@color_error, @color_error_inv);
+    }
+
+    .bg-accent {
+        .Bg(@color_accent, @color_accent_inv);
+    }
+
+    .bg-primary {
+        .Bg( @color_primary, @color_primary_inv);
+    }
+
+    .bg-success {
+        .Bg( @color_success, @color_success_inv);
+    }
+
+    .bg-warning {
+        .Bg( @color_warning, @color_warning_inv);
+    }
+
+    .bg-danger {
+        .Bg( @color_danger, @color_danger_inv);
+    }
+
+    .bg-invert {
+        .Bg( @color_default, @color_default_inv);
+    }
+
+    .bg-disabled {
+        .Bg( @color_disabled, @color_disabled_inv);
+    }
+    /*#endregion*/
+    @import "text-overrides";
+}
+
+@{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;
+    @_size_4: @_size_1 * 4;
+    @_size_5: @_size_1 * 5;
+    @_size_6: @_size_1 * 6;
+    @_size_7: @_size_1 * 7;
+    @_size_8: @_size_1 * 8;
+    @_size_9: @_size_1 * 9;
+    @_size_10: @_size_1 * 10;
+    @_size_11: @_size_1 * 11;
+    @_size_12: @_size_1 * 12;
+
+    @_size__1: 1px;
+    @_size__2: 2px;
+    @_size__3: 3px;
+    @_size__4: 4px;
+    @_size__5: 5px;
+    @_size__6: 6px;
+    @_size__7: 7px;
+    @_size__8: 8px;
+    @_size__9: 9px;
+    @_size__10: 10px;
+    @_size__11: 11px;
+    @_size__12: 12px;
+
+    @_colors: root, background, default, invert, primary, secondary, accent, info, success, warning, danger, error, disabled, green, yellow, brown, red, pink, blue, orange, purple, teal, gray;
+
+    & when (@palette_prebuilt = true) {
+
+        --@{PCSS}-prebuilt: true;
+
+        each(@_colors, {
+
+            @_color_var: ~"color_@{value}";
+            @_color_rgb_var: ~"color_@{value}_rgb";
+            @_color_inv_var: ~"color_@{value}_inv";
+            @_color_inv_rgb_var: ~"color_@{value}_inv_rgb";
+            @_color_container_var: ~"color_@{value}_container";
+            @_color_container_rgb_var: ~"color_@{value}_container_rgb";
+            @_color_container_inv_var: ~"color_@{value}_container_inv";
+            @_color_container_inv_rgb_var: ~"color_@{value}_container_inv_rgb";
+            @_color_active_var: ~"color_@{value}_active";
+            @_color_active_rgb_var: ~"color_@{value}_active_rgb";
+            @_color_active_inv_var: ~"color_@{value}_active_inv";
+            @_color_active_inv_rgb_var: ~"color_@{value}_active_inv_rgb";
+            @_color_container_active_var: ~"color_@{value}_container_active";
+            @_color_container_active_rgb_var: ~"color_@{value}_container_active_rgb";
+            @_color_container_active_inv_var: ~"color_@{value}_container_active_inv";
+            @_color_container_active_inv_rgb_var: ~"color_@{value}_container_active_inv_rgb";
+            @_color_emphasis_var: ~"color_@{value}_emphasis";
+            @_color_emphasis_rgb_var: ~"color_@{value}_emphasis_rgb";
+
+            
+        --@{PCSS}-color-@{value}: @@_color_var;
+        --@{PCSS}-color-@{value}-rgb: @@_color_rgb_var;
+        --@{PCSS}-color-@{value}-inverse: @@_color_inv_var;
+        --@{PCSS}-color-@{value}-inverse-rgb: @@_color_inv_rgb_var;
+            
+        --@{PCSS}-color-@{value}-hover: @@_color_active_var;
+        --@{PCSS}-color-@{value}-hover-rgb: @@_color_active_rgb_var;
+        --@{PCSS}-color-@{value}-inverse-hover: @@_color_active_inv_var;
+        --@{PCSS}-color-@{value}-inverse-hover-rgb: @@_color_active_inv_rgb_var;
+            
+        --@{PCSS}-color-@{value}-emphasis-hover: @@_color_emphasis_var;
+        --@{PCSS}-color-@{value}-emphasis-hover-rgb: @@_color_emphasis_rgb_var;
+
+        --@{PCSS}-color-@{value}-container: @@_color_container_var;
+        --@{PCSS}-color-@{value}-container-rgb: @@_color_container_rgb_var;
+        --@{PCSS}-color-@{value}-container-inverse: @@_color_container_inv_var;
+        --@{PCSS}-color-@{value}-container-inverse-rgb: @@_color_container_inv_rgb_var;
+            
+        --@{PCSS}-color-@{value}-container-hover: @@_color_container_active_var;
+        --@{PCSS}-color-@{value}-container-hover-rgb: @@_color_container_active_rgb_var;
+        --@{PCSS}-color-@{value}-container-inverse-hover: @@_color_container_active_inv_var;
+        --@{PCSS}-color-@{value}-container-inverse-hover-rgb: @@_color_container_active_inv_rgb_var;
+        });
+    }
+
+
+    @_dark_cont_amount: 70; // how much black to add (background)
+    @_dark_on_amount: 60; // how much white to add (foreground)
+    @_dark_cont_amount_hover: 15; // how much white to add (background) hover/focus/active state
+    @_dark_on_amount_hover: 5; // how much black to add (foreground) hover/focus/active state
+    @_dark_emphasis_amount_hover: 25; // how much white to add (foreground emphasized) hover/focus/active state
+
+    @_light_cont_amount: 75; // how much white to add (background)
+    @_light_on_amount: 25; // how much black to add (foreground)
+    @_light_cont_amount_hover: 10; // how much black to add (background) hover/focus/active state
+    @_light_on_amount_hover: 7; // how much white to add (foreground) hover/focus/active state
+    @_light_emphasis_amount_hover: 20; // how much black to add (foreground emphasized) hover/focus/active state
+
+    .ChannelizeColor(@key, @value) {
+        @_r: round(red(@value));
+        @_g: round(green(@value));
+        @_b: round(blue(@value));
+
+        --@{PCSS}-color-@{key}-rgb: @_r, @_g, @_b;
+    }
+
+    & when(@palette_prebuilt = false){
+        
+        --@{PCSS}-prebuilt: false;
+
+@__color_background: @color_background;
+@__color_background_inv: @color_default;
+@__color_root: @color_root_background;
+@__color_root_inv: @color_default;
+@__color_default: @color_default;
+@__color_default_inv: @color_default_inv;
+@__color_invert: @color_default;
+@__color_invert_inv: @color_background;
+@__color_primary: @color_primary;
+@__color_primary_inv: @color_primary_inv;
+@__color_secondary: @color_secondary;
+@__color_secondary_inv: @color_secondary_inv;
+@__color_accent: @color_accent;
+@__color_accent_inv: @color_accent_inv;
+@__color_info: @color_info;
+@__color_info_inv: @color_info_inv;
+@__color_success: @color_success;
+@__color_success_inv: @color_success_inv;
+@__color_warning: @color_warning;
+@__color_warning_inv: @color_warning_inv;
+@__color_danger: @color_danger;
+@__color_danger_inv: @color_danger_inv;
+@__color_error: @color_error;
+@__color_error_inv: @color_error_inv;
+@__color_disabled: @color_disabled;
+@__color_disabled_inv: @color_disabled_inv;
+
+@__color_green: @palette_green;
+@__color_green_inv: @palette_green_inv;
+@__color_yellow: @palette_yellow;
+@__color_yellow_inv: @palette_yellow_inv;
+@__color_brown: @palette_brown;
+@__color_brown_inv: @palette_brown_inv;
+@__color_red: @palette_red;
+@__color_red_inv: @palette_red_inv;
+@__color_pink: @palette_pink;
+@__color_pink_inv: @palette_pink_inv;
+@__color_blue: @palette_blue;
+@__color_blue_inv: @palette_blue_inv;
+@__color_orange: @palette_orange;
+@__color_orange_inv: @palette_orange_inv;
+@__color_purple: @palette_purple;
+@__color_purple_inv: @palette_purple_inv;
+@__color_teal: @palette_teal;
+@__color_teal_inv: @palette_teal_inv;
+@__color_gray: @palette_gray;
+@__color_gray_inv: @palette_gray_inv;
+
+// basic palette
+each(@_colors, {
+        
+        @_color_var: ~"__color_@{value}";
+        @_color_inv_var: ~"__color_@{value}_inv";
+        
+        @_color: @@_color_var;
+        @_color_inv: @@_color_inv_var;
+        @_color_hover: mix(if(@dark_theme = false, #000, #fff),  @_color, if(@dark_theme = true, @_dark_cont_amount_hover, @_light_cont_amount_hover));
+        @_color_emphasis_hover: mix(if(@dark_theme = false, #000, #fff),  @_color, if(@dark_theme = true, @_dark_emphasis_amount_hover, @_light_emphasis_amount_hover));
+        @_color_inv_hover: mix(if(@dark_theme = true, #000, #fff),  @_color_inv, if(@dark_theme = true, @_dark_on_amount_hover, @_light_on_amount_hover));
+        @_color_container:  mix(if(@dark_theme = true, #000, #fff), @_color, if(@dark_theme = true, @_dark_cont_amount, @_light_cont_amount));
+        @_color_container_hover: mix(if(@dark_theme = false, #000, #fff), @_color_container, if(@dark_theme = true, @_dark_cont_amount_hover, @_light_cont_amount_hover));
+        @_color_container_inv: mix(if(@dark_theme = true, #fff, #000), @_color, if(@dark_theme = true, @_dark_on_amount, @_light_on_amount));
+        @_color_container_inv_hover: mix(if(@dark_theme = false, #fff, #000), @_color_container_inv, if(@dark_theme = true, @_dark_on_amount_hover, @_light_on_amount_hover));
+
+        --@{PCSS}-color-@{value}: @_color;
+        .ChannelizeColor(~"@{value}", @_color);
+        --@{PCSS}-color-@{value}-hover: @_color_hover;
+        .ChannelizeColor(~"@{value}-hover", @_color_hover);
+        --@{PCSS}-color-@{value}-emphasis-hover: @_color_emphasis_hover;
+        .ChannelizeColor(~"@{value}-emphasis-hover", @_color_emphasis_hover);
+        --@{PCSS}-color-@{value}-inverse: @_color_inv;
+        .ChannelizeColor(~"@{value}-inverse", @_color_inv);
+        --@{PCSS}-color-@{value}-inverse-hover: @_color_inv_hover;
+        .ChannelizeColor(~"@{value}-inverse-hover", @_color_inv_hover);
+        --@{PCSS}-color-@{value}-container: @_color_container;
+        .ChannelizeColor(~"@{value}-container", @_color_container);
+        --@{PCSS}-color-@{value}-container-hover: @_color_container_hover;
+        .ChannelizeColor(~"@{value}-container-hover", @_color_container_hover);
+        --@{PCSS}-color-@{value}-container-inverse: @_color_container_inv;
+        .ChannelizeColor(~"@{value}-container-inverse", @_color_container_inv);
+        --@{PCSS}-color-@{value}-container-inverse-hover: @_color_container_inv_hover;
+        .ChannelizeColor(~"@{value}-container-inverse-hover", @_color_container_inv_hover);
+
+    });
+}
+--@{PCSS}-color-disabled-button: @color_button_back_disabled;
+.ChannelizeColor(disabled-button, @color_button_back_disabled);
+--@{PCSS}-color-disabled-button-inverse: @color_button_fore_disabled;
+.ChannelizeColor(disabled-button-inverse, @color_button_fore_disabled);
+--@{PCSS}-color-border: @color_border;
+// spacing + sizing
+--@{PCSS}-grid-cell: @grid_cell;
+--@{PCSS}-grid-spacing: @grid_spacing;
+@double_grid_spacing: 2 * @grid_spacing;
+--@{PCSS}-grid-double-spacing: @double_grid_spacing;
+--@{PCSS}-layout-header-height: @layout_header_height;
+--@{PCSS}-layout-footer-height: @layout_footer_height;
+--@{PCSS}-layout-bigfooter-height: @layout_bigfooter_height;
+--@{PCSS}-layout-toolbar-height: @layout_toolbar_height;
+
+each(range(12), {
+    @_s: ~"_size_@{value}";
+    @__s: ~"_size__@{value}";
+--@{PCSS}-size-@{value}: @@_s;
+--@{PCSS}-size--@{value}: @@__s;
+    });
+// 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;
+--@{PCSS}-zindex-menu: @hamburger_z_index;
+--@{PCSS}-zindex-lightbox: @lightbox_z_index;
+--@{PCSS}-zindex-header: @header_z_index;
+// ui
+--@{PCSS}-border-radius: @border_radius;
+--@{PCSS}-border-button-radius: @border_button_radius;
+--@{PCSS}-border-panel-radius: @border_panel_radius;
+--@{PCSS}-border-card-radius: @border_card_radius;
+--@{PCSS}-corner-size: @corner_size;
+--@{PCSS}-color-balloon: @balloon_color;
+.ChannelizeColor(balloon, @balloon_color);
+--@{PCSS}-color-balloon-hover: @color_contextmenu_hover_back;
+--@{PCSS}-color-balloon-emphasis: @color_contextmenu_hover_back;
+--@{PCSS}-balloon-tail-size: @balloon_pointer_size;
+--@{PCSS}-balloon-tail-inset: @balloon_pointer_inset;
+// animation
+--@{PCSS}-easing-in-sine: @easing_in_sine;
+--@{PCSS}-easing-out-sine: @easing_out_sine;
+--@{PCSS}-easing-in-out-sine: @easing_in_out_sine;
+--@{PCSS}-easing-in-out-extreme: @easing_in_out_extreme;
+--@{PCSS}-easing-in-back: @easing_in_back;
+--@{PCSS}-easing-out-back: @easing_out_back;
+--@{PCSS}-easing-out-back2: @easing_out_back_custom;
+--@{PCSS}-easing-out-bump: @easing_out_bump;
+/* #region deprecated */
+--color-background: @color_background;
+--color-root: @color_root_background;
+--color-default: @color_default;
+--color-default-inverse: @color_default_inv;
+--color-accent: @color_accent;
+--color-accent-inverse: @color_accent_inv;
+--color-primary: @color_primary;
+--color-primary-inverse: @color_primary_inv;
+--color-danger: @color_danger;
+--color-danger-inverse: @color_danger_inv;
+--color-error: @color_error;
+--color-error-inverse: @color_error_inv;
+--color-highlight: @color_highlight;
+--color-highlight-inverse: @color_highlight_fore;
+--color-warning: @color_warning;
+--color-warning-inverse: @color_warning_inv;
+--color-success: @color_success;
+--color-success-inverse: @color_success_inv;
+--color-disabled: @color_disabled;
+// palette
+--color-green: @palette_green;
+--color-yellow: @palette_yellow;
+--color-brown: @palette_brown;
+--color-red: @palette_red;
+--color-pink: @palette_pink;
+--color-blue: @palette_blue;
+--color-orange: @palette_orange;
+--color-purple: @palette_purple;
+--color-teal: @palette_teal;
+//
+--grid-cell: @grid_cell;
+--grid-spacing: @grid_spacing;
+--grid-double-spacing: @double_grid_spacing;
+/* #endregion deprecated */
+}
+
+
+// extra
+@extra: "your-extra.less";
+@import (optional) "@{extra}";