@pepperi-addons/ngx-lib 0.4.2-beta.31 → 0.4.2-beta.310

package/src/assets/i18n/sr.ngx-lib.json

@@ -0,0 +1,180 @@
+{
+    "COLOR": {
+        "AA_COMPLIENT": "AA Compliant",
+        "ADD_VALUE_HERE": "Or add (hsl, reg, hex)",
+        "CHANGE_HUE": "Change hue",
+        "CHANGE_SATURATION": "Change saturation",
+        "CHANGE_LIGHTNESS": "Change lightness",
+        "DIALOG_TITLE": "Color picker"
+    },
+    "CHECKBOX": {
+        "TRUE": "True",
+        "FALSE": "False"
+    },
+    "CHIPS": {
+        "ADD_CHIP": "Add Chip"
+    },
+    "IMAGE": {
+        "NO_IMAGE": "No image",
+        "CLICK_TO_ENLARGE": "Click to enlarge"
+    },
+    "FILE": {
+        "HINT": "Drag and drop a file here or click",
+        "UPLOADING_FILE": "Uploading File",
+        "SEE_ORIGINAL": "See original"
+    },
+    "QS": {
+        "ORDER": "Order"
+    },
+    "INTERNAL_PAGE": {
+        "CLICK_TO_ORDER": "Click to order"
+    },
+    "PROFILE_DATA_VIEWS_LIST": {
+        "ADD_PROFILE": "Add profile",
+        "SELECT_PROFILE_DIALOG_TITLE": "Select profile",
+        "SELECT_PROFILE": "Select a profile",
+        "IMPORT_PROFILE_DIALOG_TITLE": "Import to {{ profileTitle }}",
+        "IMPORT_FROM_PROFILE": "Import from",
+        "IMPORT_FROM_PROFILE_DESC": "You can select a profile to copy its configuration to the added profile. Leave this option empty for a default profile hierarchy configuration",
+        "DEFAULT_PROFILE": "(Default profile)",
+        "NO_FIELDS_ASSIGNED": "No fields were assigned"
+    },
+    "RICH_TEXTAREA": {
+        "HINT": "Enter Text"
+    },
+    "SEARCH": {
+        "HINT": "Search",
+        "MORE_RESULTS": "More Results"
+    },
+    "SELECT": {
+        "HINT": "Please select an option"
+    },
+    "SIGNATURE": {
+        "HINT": "Signature",
+        "TAP_TO_SIGN": "Tap to Sign",
+        "DIALOG_TITLE": "Add signature here"
+    },
+    "SMART_FILTERS": {
+        "TITLE": "Smart filters",
+        "IS_ON": "Is on",
+        "CHOOSE_TIME": "Choose time",
+        "AMOUNT": "Amount",
+        "VALUE": "Value",
+        "TIME_UNIT": "Time unit",
+        "START_DATE": "Start date",
+        "END_DATE": "End date",
+        "CHOOSE_DATE": "Choose a date",
+        "TYPE": "Type",
+        "MIN": "Min",
+        "MAX": "Max",
+        "SEARCH": "Search",
+        "NO_SEARCH_RESULTS": "No results found",
+        "NO_OPTIONS": "No options",
+        "OPERATORS": {
+            "IN_THE_LAST": "In the last",
+            "IN_THE_LAST_CALENDAR": "In the last (calendar)",
+            "IN_THE_LAST_VARIABLE": "In the last (variable)",
+            "TODAY": "Today",
+            "THIS_WEEK": "This week",
+            "THIS_MONTH": "This month",
+            "DATE_RANGE": "Between",
+            "DATE_RANGE_VARIABLE": "Between (variable)",
+            "DUE_IN": "Due in",
+            "ON": "On",
+            "NOT_IN_THE_LAST": "Not in the last",
+            "NOT_IN_THE_LAST_CALENDAR": "Not in the last (calendar)",
+            "NOT_DUE_IN": "Not due in",
+            "IS_EMPTY": "Is empty",
+            "IS_NOT_EMPTY": "Is not empty",
+            "NOT_EQUAL": "Not equal",
+            "NOT_EQUAL_TO_VARIABLE": "Not equal to (variable)",
+            "LESS_THEN_OR_EQUAL": "Less than or equal to",
+            "LESS_THEN": "Less than",
+            "LESS_THAN_VARIABLE": "Less than (variable)",
+            "EQUAL": "Equal",
+            "EQUAL_TO_VARIABLE": "Equal to (variable)",
+            "IN_VARIABLE": "In (variable)",
+            "GREATER_THEN": "Greater than",
+            "GREATER_THEN_OR_EQUAL": "Greater than or equal to",
+            "GREATER_THAN_VARIABLE": "Greater than (variable)",
+            "NUMBER_RANGE": "Between",
+            "CONTAINS": "Contains",
+            "IN": "In",
+            "BEGINS_WITH": "Begins with",
+            "ENDS_WITH": "Ends with"
+        },
+        "OPERATOR_UNITS": {
+            "DAYS": "Days",
+            "WEEKS": "Weeks",
+            "MONTHS": "Months",
+            "YEARS": "Years"
+        }
+    },
+    "ACTIONS": {
+        "APPLY": "Apply",
+        "CANCEL": "Cancel",
+        "CLEAR": "Clear",
+        "CLEAR_ALL": "Clear All",
+        "CLOSE": "Close",
+        "CONTINUE": "Continue",
+        "CREATE_NEW": "Create new",
+        "DELETE": "Delete",
+        "DONE": "Done",
+        "OK": "Ok",
+        "REMOVE": "Remove",
+        "SAVE": "Save",
+        "IMPORT": "Import"
+    },
+    "LIST": {
+        "ALL": "All",
+        "NONE": "None",
+        "PAGER_PREVIOUS": "Previous",
+        "PAGER_NEXT": "Next",
+        "PAGER_OUT_OF": "Out of",
+        "PAGER_PAGE": "Page",
+        "SELECT": "Select",
+        "SELECTED": "selected",
+        "SORT_BY": "Sort by",
+        "SORT_ASC": "Ascending",
+        "SORT_DESC": "Descending",
+        "TOTAL_RESULTS": "<span class='bold number'>{{ totalRows }}{{ unknownCount }}</span> results",
+        "TOTAL_RESULT": "<span class='bold number'>{{ totalRows }}</span> result",
+        "TOTAL_RESULTS_OUT_OF": "<span class='bold number'>{{ xRows }}</span> of <span class='bold number'>{{ totalRows }}</span> results",
+        "TOTAL_RESULT_OUT_OF_RESULT": "<span class='bold number'>{{ xRows }}</span> of <span class='bold number'>{{ totalRows }}</span> result",
+        "TOTAL_OF": "At total of: ",
+        "NO_DATA_FOUND": "No results were found.",
+        "NO_DATA_FOUND_SUGGESTIONS_TITLE": "We have some suggestions:",
+        "NO_DATA_FOUND_SUGGESTIONS_LIST": "<li>Make sure that all words are spelled correctly.</li><li>Try different keywords.</li><li>Try more general keywords.</li>"
+    },
+    "MESSAGES": {
+        "TITLE_NOTICE": "Notice",
+        "ERROR_CASE_QUANTITY_LIMIT": "Case quantity",
+        "ERROR_FAILD_TO_LOAD_EXTENSION": "Failed to upload file, {{fileExtension}} format is not supported",
+        "ERROR_FAILD_TO_LOAD_SIZE": "Failed to upload file, file size limitation is - {{fileSize}} MB",
+        "ERROR_INVALID_FIELDS": "Please validate the following fields:",
+        "ERROR_INVENTORY_LIMIT": "Max quantity",
+        "ERROR_IS_NOT_VALID": "{{field}} is not valid",
+        "ERROR_IS_REQUIRED": "{{field}} is mandatory",
+        "ERROR_MANDATORY_FIELDS": "Required fields:",
+        "ERROR_MAX_QUANTITY_LIMIT": "Max quantity",
+        "ERROR_MIN_QUANTITY_LIMIT": "Min quantity",
+        "ERROR_RANGE_IS_NOT_VALID": "Value should be between {{min}} and {{max}}",
+        "ERROR_INVALID_PATTERN": "Invalid Character",
+        "INFO_LOADING_FILE": "Loading",
+        "INFO_MISSING_FILE": "Missing file",
+        "INFO_MISSING_IMAGE": "Missing image",
+        "INFO_MISSING_SIGNATURE": "Signature missing"
+    },
+    "DATE_AGO": {
+        "JUST_NOW": "Just now",
+        "SECOND": "second",
+        "MINUTE": "minute",
+        "HOUR": "hour",
+        "DAY": "day",
+        "WEEK": "week",
+        "MONTH": "month",
+        "YEAR": "year",
+        "SINGULAR": " ago",
+        "PLURAL": "'s ago"
+    }
+}

package/src/assets/i18n/zh.ngx-lib.json

@@ -11,6 +11,9 @@
         "TRUE": "True",
         "FALSE": "False"
     },
+    "CHIPS": {
+        "ADD_CHIP": "添加芯片"
+    },
     "IMAGE": {
         "NO_IMAGE": "无图片",
         "CLICK_TO_ENLARGE": "点击放大"
@@ -26,9 +29,23 @@
     "INTERNAL_PAGE": {
         "CLICK_TO_ORDER": "点击订购"
     },
+    "PROFILE_DATA_VIEWS_LIST": {
+        "ADD_PROFILE": "添加配置文件",
+        "SELECT_PROFILE_DIALOG_TITLE": "选择配置文件",
+        "SELECT_PROFILE": "选择配置文件",
+        "IMPORT_PROFILE_DIALOG_TITLE": "导入到 {{ profileTitle }}",
+        "IMPORT_FROM_PROFILE": "从...导入",
+        "IMPORT_FROM_PROFILE_DESC": "您可以选择一个配置文件，将其配置复制到添加的配置文件中。如果要使用默认配置文件层次结构配置，请将此选项留空",
+        "DEFAULT_PROFILE": "(默认配置文件）",
+        "NO_FIELDS_ASSIGNED": "未分配字段"
+    },
     "RICH_TEXTAREA": {
         "HINT": "输入文本"
     },
+    "SEARCH": {
+        "HINT": "搜索",
+        "MORE_RESULTS": "更多结果"
+    },
     "SELECT": {
         "HINT": "请选择一个选项"
     },
@@ -37,24 +54,97 @@
         "TAP_TO_SIGN": "点击签名",
         "DIALOG_TITLE": "在此添加签名"
     },
+    "SMART_FILTERS": {
+        "TITLE": "智能筛选器",
+        "IS_ON": "开启",
+        "CHOOSE_TIME": "选择时间",
+        "AMOUNT": "数量",
+        "VALUE": "金额",
+        "TIME_UNIT": "时间单位",
+        "START_DATE": "开始日期",
+        "END_DATE": "结束日期",
+        "CHOOSE_DATE": "选择日期",
+        "TYPE": "类型",
+        "MIN": "最小",
+        "MAX": "最大值",
+        "SEARCH": "搜索",
+        "NO_SEARCH_RESULTS": "未找到结果",
+        "NO_OPTIONS": "无选项",
+        "OPERATORS": {
+            "IN_THE_LAST": "最后",
+            "IN_THE_LAST_CALENDAR": "最后（日历）",
+            "IN_THE_LAST_VARIABLE": "最后（变量）",
+            "TODAY": "今天",
+            "THIS_WEEK": "本周",
+            "THIS_MONTH": "本月",
+            "DATE_RANGE": "之间",
+            "DATE_RANGE_VARIABLE": "之间（可变）",
+            "DUE_IN": "到期",
+            "ON": "在",
+            "NOT_IN_THE_LAST": "不在最后",
+            "NOT_IN_THE_LAST_CALENDAR": "上次（日历）",
+            "NOT_DUE_IN": "未到期",
+            "IS_EMPTY": "为空",
+            "IS_NOT_EMPTY": "不为空",
+            "NOT_EQUAL": "不等于",
+            "NOT_EQUAL_TO_VARIABLE": "不等于（变量）",
+            "LESS_THEN_OR_EQUAL": "小于或等于",
+            "LESS_THEN": "小于",
+            "LESS_THAN_VARIABLE": "小于（变量）",
+            "EQUAL": "等于",
+            "EQUAL_TO_VARIABLE": "等于（变量）",
+            "IN_VARIABLE": "在（变量）",
+            "GREATER_THEN": "大于",
+            "GREATER_THEN_OR_EQUAL": "大于或等于",
+            "GREATER_THAN_VARIABLE": "大于（变量）",
+            "NUMBER_RANGE": "介于",
+            "CONTAINS": "包含",
+            "IN": "以",
+            "BEGINS_WITH": "开始于",
+            "ENDS_WITH": "结束于"
+        },
+        "OPERATOR_UNITS": {
+            "DAYS": "天数",
+            "WEEKS": "周数",
+            "MONTHS": "月",
+            "YEARS": "年"
+        }
+    },
     "ACTIONS": {
         "APPLY": "使用",
         "CANCEL": "取消",
         "CLEAR": "清除",
         "CLEAR_ALL": "全部清除",
         "CLOSE": "关闭",
+        "CONTINUE": "继续",
         "CREATE_NEW": "创建新的",
+        "DELETE": "删除",
         "DONE": "完成",
         "OK": "确定",
-        "SAVE": "保存"
+        "REMOVE": "移除",
+        "SAVE": "保存",
+        "IMPORT": "导入"
     },
     "LIST": {
         "ALL": "全部",
         "NONE": "无",
+        "PAGER_PREVIOUS": "Previous",
+        "PAGER_NEXT": "Next",
+        "PAGER_OUT_OF": "Out of",
+        "PAGER_PAGE": "Page",
         "SELECT": "选择",
         "SELECTED": "已选",
+        "SORT_BY": "Sort by",
         "SORT_ASC": "升序",
-        "SORT_DESC": "降序"
+        "SORT_DESC": "降序",
+        "TOTAL_RESULTS": "<span class='bold number'>{{ totalRows }}{{ unknownCount }}</span> 结果",
+        "TOTAL_RESULT": "<span class='bold number'>{{ totalRows }}</span> 结果",
+        "TOTAL_RESULTS_OUT_OF": "第 <span class='bold number'>{{ xRows }}</span> 条，共 <span class='bold number'>{{ totalRows }}</span> 条结果",
+        "TOTAL_RESULT_OUT_OF_RESULT": "第 <span class='bold number'>{{ xRows }}</span> 条，共 <span class='bold number'>{{ totalRows }}</span> 条结果",
+        "TOTAL_OF": "At total of: ",
+        "NO_DATA_FOUND": "No results were found.",
+        "NO_DATA_FOUND_SUGGESTIONS_TITLE": "We have some suggestions:",
+        "NO_DATA_FOUND_SUGGESTIONS_LIST": "<li> 确保所有单词拼写正确。</li> <li> 尝试不同的关键词。</li> <li>尝试更通用的关键词。 </li>"
     },
     "MESSAGES": {
         "TITLE_NOTICE": "通知",
@@ -69,9 +159,22 @@
         "ERROR_MAX_QUANTITY_LIMIT": "最高数量",
         "ERROR_MIN_QUANTITY_LIMIT": "最低数量",
         "ERROR_RANGE_IS_NOT_VALID": "值应介于 {{min}} 和 {{max}} 之间",
+        "ERROR_INVALID_PATTERN": "Invalid Character",
         "INFO_LOADING_FILE": "载入中",
         "INFO_MISSING_FILE": "缺少文件",
         "INFO_MISSING_IMAGE": "缺少图像",
         "INFO_MISSING_SIGNATURE": "签名缺失"
+    },
+    "DATE_AGO": {
+        "JUST_NOW": "Just now",
+        "SECOND": "second",
+        "MINUTE": "minute",
+        "HOUR": "hour",
+        "DAY": "day",
+        "WEEK": "week",
+        "MONTH": "month",
+        "YEAR": "year",
+        "SINGULAR": " ago",
+        "PLURAL": "'s ago"
     }
 }

package/src/core/style/abstracts/mixins.scss

@@ -193,17 +193,17 @@
     }
 }
 
-@mixin font-title($fs: variables.$fs-md, $lh: variables.$lh-md) {
-    font-family: variables.$font-family-title !important;
-    font-weight: variables.$font-weight-bold !important;
+@mixin font-title($fs: variables.$fs-md, $lh: variables.$lh-md, $font-family: variables.$font-family-title, $font-weight: variables.$font-weight-bold) {
+    font-family: $font-family !important;
+    font-weight: $font-weight !important;
 
     @include font-size($fs);
     @include line-height($lh);
 }
 
-@mixin font-body($fs: variables.$fs-sm, $lh: variables.$lh-sm) {
-    font-family: variables.$font-family-body !important;
-    font-weight: variables.$font-weight-normal;
+@mixin font-body($fs: variables.$fs-sm, $lh: variables.$lh-sm, $font-family: variables.$font-family-body, $font-weight: variables.$font-weight-normal) {
+    font-family: $font-family !important;
+    font-weight: $font-weight;
 
     @include font-size($fs);
     @include line-height($lh);
@@ -306,6 +306,37 @@
     );
 }
 
+@mixin pep-full-width-loader($loader-color: variables.$color-loader-base) {
+    $loader-bg: color-mix(in hsl, $loader-color 0%, transparent);
+
+    height: 0.25rem;
+    z-index: variables.$z-index-high;
+    width: 100%;
+    background: linear-gradient(0.25turn, $loader-bg 0%, $loader-color 50%, $loader-bg 50%);
+    background-size: 200% 200%;
+    animation-timing-function: ease-out;
+    animation-name: slidein;
+    animation-iteration-count: infinite;
+    animation-duration: 1.5s;
+
+    &.rtl {
+        animation-name: slideinRtl;
+        background: linear-gradient(0.75turn, $loader-bg 0%, $loader-color 50%, $loader-bg 50%);
+        background-size: 200% 200%;
+    }
+
+    @keyframes slidein {
+        0% { background-position: 100%; }
+        75% { background-position: -100%; }
+        100% { background-position: -100%; }
+    }
+    @keyframes slideinRtl {
+        0% { background-position: -100%; }
+        75% { background-position: 100%; }
+        100% { background-position: 100%; }
+    }
+}
+
 // ******************************************************************************
 //                        General state declerations
 // ******************************************************************************
@@ -388,13 +419,15 @@
 }
 
 // ******************************************************************************
-//                       State weak declerations
+//                       State declerations
 // ******************************************************************************
 @mixin pep-state-default($style: weak, $color-map-key: null, $regularBorder: false) {
     @if ($style == 'none') {
         @include state-none-default();
     } @else if ($style == 'weak-invert') {
         @include state-weak-invert-default();
+    } @else if ($style == 'weak-special') {
+        @include state-weak-special-default();
     } @else if ($style == 'weak') {
         @include state-weak-default($color-map-key);
     } @else if ($style == 'strong') {
@@ -408,6 +441,8 @@
         @include state-none-disable();
     } @else if ($style == 'weak-invert') {
         @include state-weak-invert-disable();
+    } @else if ($style == 'weak-special') {
+        @include state-weak-special-disable();
     } @else if ($style == 'weak') {
         @include state-weak-disable($color-map-key);
     } @else if ($style == 'strong') {
@@ -421,6 +456,8 @@
         @include state-none-hover();
     } @else if ($style == 'weak-invert') {
         @include state-weak-invert-hover();
+    } @else if ($style == 'weak-special') {
+        @include state-weak-special-hover();
     } @else if ($style == 'weak') {
         @include state-weak-hover($color-map-key);
     } @else if ($style == 'strong') {
@@ -434,6 +471,8 @@
         @include state-none-active();
     } @else if ($style == 'weak-invert') {
         @include state-weak-invert-active();
+    } @else if ($style == 'weak-special') {
+        @include state-weak-special-active();
     } @else if ($style == 'weak') {
         @include state-weak-active($color-map-key);
     } @else if ($style == 'strong') {
@@ -447,6 +486,8 @@
         @include state-none-focus();
     } @else if ($style == 'weak-invert') {
         @include state-weak-invert-focus();
+    } @else if ($style == 'weak-special') {
+        @include state-weak-special-focus();
     } @else if ($style == 'weak') {
         @include state-weak-focus($color-map-key);
     } @else if ($style == 'strong') {
@@ -465,7 +506,7 @@
     @if ($color-map-key == null) {
         $color-map-key: color-weak;
     }
-    background: functions.get-pep-color($color-map-key, color-tran-30);
+    background: functions.get-pep-color($color-map-key, color-tran-20);
 }
 @mixin state-weak-disable($color-map-key: null) {
     @include state-disabled();
@@ -473,8 +514,12 @@
     @if ($color-map-key == null) {
         $color-map-key: color-weak;
     }
-    color:functions.get-pep-color(color-text, color-disabled) !important;
-    background: functions.get-pep-color($color-map-key, color-tran-10) !important;
+
+    &:not(.disabled-no-background-no-color) {
+        color:functions.get-pep-color(color-text, color-disabled) !important;
+        background: functions.get-pep-color($color-map-key, color-tran-10) !important;
+    }
+
 }
 @mixin state-weak-hover($color-map-key: null) {
     @if ($color-map-key == null) {
@@ -507,33 +552,90 @@
 //  Weak - invert
 // -----------------------------------------------------------------------------
 @mixin state-weak-invert-default() {
-    background: functions.get-pep-color(color-system-primary-invert, color-tran-70);
+    background: functions.get-pep-color(color-system-primary-invert, color-tran-30);
 
-    // $color: functions.get-pep-color(color-text, color-main);
-    // color: $color;
-
-    // .svg-icon {
-    //     fill: $color !important;
-    // }
+    $color: functions.get-pep-color(color-text, color-invert);
+    color: $color;
+    
+    .svg-icon {
+        fill: $color !important;
+    }
 }
 @mixin state-weak-invert-disable() {
     @include state-disabled();
     
-    color:functions.get-pep-color(color-text, color-disabled) !important;
-    background: functions.get-pep-color(color-system-primary-invert, color-tran-20) !important;
+    &:not(.disabled-no-background-no-color) {
+        color:functions.get-pep-color(color-system-primary-invert, color-tran-40) !important;
+        background: functions.get-pep-color(color-system-primary-invert, color-tran-10) !important;
+    }
+
+    .svg-icon {
+        fill: functions.get-pep-color(color-system-primary-invert, color-tran-40) !important;
+    }
 }
 @mixin state-weak-invert-hover() {
-    background: functions.get-pep-color(color-system-primary-invert, color-tran-70);
+    background: functions.get-pep-color(color-system-primary-invert, color-tran-50);
     box-shadow: functions.get-pep-shadow(shadow-xs, soft);
     cursor: pointer;
 }
 @mixin state-weak-invert-active() {
     background: functions.get-pep-color(color-system-primary-invert, color-base);
     box-shadow: functions.get-pep-shadow(shadow-xs, regular);
+    $color: functions.get-pep-color(color-text, color-main);
+    color: $color;
+    
+    .svg-icon {
+        fill: $color !important;
+    }
 }
 @mixin state-weak-invert-focus() {
     background: functions.get-pep-color(color-system-primary-invert, color-base);
     @include focus();
+    $color: functions.get-pep-color(color-text, color-main);
+    color: $color;
+    
+    .svg-icon {
+        fill: $color !important;
+    }
+}
+
+//  Weak - special
+// -----------------------------------------------------------------------------
+@mixin state-weak-special-default() {
+    background: functions.get-pep-color(color-system-primary-invert, color-tran-50);
+}
+@mixin state-weak-special-disable() {
+    @include state-disabled();
+    
+    &:not(.disabled-no-background-no-color) {
+        color:functions.get-pep-color(color-text, color-disabled) !important;
+        background: functions.get-pep-color(color-system-primary-invert, color-tran-20) !important;  
+    }
+}
+@mixin state-weak-special-hover() {
+    background: functions.get-pep-color(color-system-primary-invert, color-tran-70);
+    box-shadow: functions.get-pep-shadow(shadow-xs, soft);
+    cursor: pointer;
+}
+@mixin state-weak-special-active() {
+    // background: functions.get-pep-color(color-system-primary-invert, color-base);
+    // box-shadow: functions.get-pep-shadow(shadow-xs, regular);
+    // $color: functions.get-pep-color(color-text, color-main);
+    // color: $color;
+    
+    // .svg-icon {
+    //     fill: $color !important;
+    // }
+}
+@mixin state-weak-special-focus() {
+    // background: functions.get-pep-color(color-system-primary-invert, color-base);
+    // @include focus();
+    // $color: functions.get-pep-color(color-text, color-main);
+    // color: $color;
+    
+    // .svg-icon {
+    //     fill: $color !important;
+    // }
 }
 
 // ******************************************************************************
@@ -585,8 +687,12 @@
     @if ($color-map-key == null) {
         $color-map-key: color-regular;
     }
-    color:functions.get-pep-color(color-text, color-disabled) !important;
-    background: functions.get-pep-color($color-map-key, color-flat-r-30) !important;
+
+    &:not(.disabled-no-background-no-color) {
+        color:functions.get-pep-color(color-text, color-disabled) !important;
+        background: functions.get-pep-color($color-map-key, color-flat-r-30) !important;
+    }
+
     box-shadow: functions.get-pep-shadow(shadow-xs, xsoft) !important;
     @include inline(functions.get-pep-color($color-map-key, color-tran-20), 1px, solid, $regularBorder);
 }
@@ -618,12 +724,15 @@
     @if ($color-map-key == null) {
         $color-map-key: color-strong;
     }
-    background: functions.get-pep-color($color-map-key, color-base) !important;
-    opacity: 0.5 !important;
-    
+
     $color: functions.get-pep-color(color-text, color-invert);
 
-    color: $color;
+    &:not(.disabled-no-background-no-color) {
+        background: functions.get-pep-color($color-map-key, color-base) !important;
+        opacity: 0.5 !important;
+        color: $color;
+    }
+
     .svg-icon {
         @include svg-icon-color($color);
     }

package/src/core/style/abstracts/variables.scss

@@ -77,7 +77,7 @@ $lh-12xl: var(--pep-line-height-12xl, 10rem);
 //  Fonts weight - General
 $font-weight-normal: var(--pep-font-weight-normal, 400);
 $font-weight-bold: var(--pep-font-weight-bold, 600);
-$font-weight-bolder: var(--pep-font-weight-bolder, 800);
+$font-weight-bolder: var(--pep-font-weight-bold, 600); // var(--pep-font-weight-bolder, 800);
 
 // Round corners
 // -----------------------------------------------------------------------------
@@ -496,6 +496,15 @@ $color-top-header-flat-r-20: hsl(#{$color-top-header-h}, #{$color-top-header-s},
 $color-top-header-flat-r-30: hsl(#{$color-top-header-h}, #{$color-top-header-s}, $flat-r-30-lp);
 $color-top-header-flat-r-40: hsl(#{$color-top-header-h}, #{$color-top-header-s}, $flat-r-40-lp);
 
+//*********************************************************************************
+//                       Loader - color
+//*********************************************************************************
+// Base color - default caution color.
+$color-loader-h: var(--pep-color-loader-h, 360);
+$color-loader-s: var(--pep-color-loader-s, 100%);
+$color-loader-l: var(--pep-color-loader-l, 45%);
+$color-loader-base: hsl(#{$color-loader-h}, #{$color-loader-s}, #{$color-loader-l}); // base
+
 //*********************************************************************************
 //                       Quantity selector - color
 //*********************************************************************************