@datarailsshared/datarailsshared 1.6.349 → 1.6.353

package/assets/styles/_styles.scss

@@ -8,7 +8,7 @@
 @import 'codemirror/addon/hint/show-hint.css';
 
 @import '../../src/lib/directives/dr-shine-animation/dr-shine-animation.directive.css';
-@import '../../src/lib/dr-inputs/button/dr-button-link.directive.scss';
+@import '../../src/lib/dr-inputs/button/dr-button-link.directive.css';
 
 @import 'ag-grid-community/styles/ag-grid.css';
 @import 'ag-grid-community/styles/ag-theme-alpine.css';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datarailsshared/datarailsshared",
-  "version": "1.6.349",
+  "version": "1.6.353",
   "description": "DataRails shared components",
   "keywords": [
     "angular",

package/styles.css

@@ -558,394 +558,44 @@ li.CodeMirror-hint-active {
     }
 }
 
-$dr-chat-max-width: 956px;
-$dr-chat-horizontal-padding: 16px;
-$dr-chat-main-color: #25258c;
-$dr-chat-avatar-width: 28px;
-$dr-chat-avatar-left-indent: 0;
-$dr-chat-avatar-right-indent: 16px;
-$dr-chat-header-text-indent: 20px;
-$dr-chat-box-shadow: 0px 2px 36px 0px rgba(0, 0, 0, 0.15);
-
-// DR spacing variables (margin, paddings, etc.)
-$dr-spacing-xxx-small: 2px;
-$dr-spacing-xx-small: 4px;
-$dr-spacing-x-small: 8px;
-$dr-spacing-small: 16px;
-$dr-spacing-medium: 24px;
-$dr-spacing-large: 32px;
-$dr-spacing-x-large: 40px;
-$dr-spacing-xx-large: 48px;
-$dr-spacing-xxx-large: 56px;
-
-// DR font variables (family, weight, size, line-height)
-$dr-primary-font-family: 'Poppins', sans-serif;
-
-$dr-font-weight-thin: 250;
-$dr-font-weight-extra-light: 275;
-$dr-font-weight-light: 300;
-$dr-font-weight-regular: 400;
-$dr-font-weight-medium: 500;
-$dr-font-weight-semi-bold: 600;
-$dr-font-weight-bold: 700;
-$dr-font-weight-extra-bold: 800;
-$dr-font-weight-black: 900;
-
-$dr-font-size-xx-small: 12px;
-$dr-font-size-x-small: 14px;
-$dr-font-size-small: 16px;
-$dr-font-size-medium: 18px;
-$dr-font-size-large: 20px;
-$dr-font-size-x-large: 24px;
-$dr-font-size-xx-large: 32px;
-
-$dr-line-height-xx-small: 16px;
-$dr-line-height-x-small: 24px;
-$dr-line-height-small: 24px;
-$dr-line-height-medium: 32px;
-$dr-line-height-large: 32px;
-$dr-line-height-x-large: 40px;
-$dr-line-height-xx-large: 48px;
-
-$shared-assets-base: 'https://shared-assets.datarails.com' !default;
-
-
-@function assets-img-url($path) {
-    @return url('#{$shared-assets-base}/dr-assets/images/#{$path}');
-}
-
-@mixin dr-icon-svg($name) {
-    width: 24px;
-    height: 24px;
-    background: url('#{$shared-assets-base}/dr-icons/#{$name}.svg');
-}
-
-@mixin dr-primary-font(
-    $fontSize: $dr-font-size-x-small,
-    $fontWeight: $dr-font-weight-regular,
-    $line-height: $dr-line-height-x-small
-) {
-    font-family: $dr-primary-font-family;
-    font-style: normal;
-    font-size: $fontSize;
-    font-weight: $fontWeight;
-    line-height: $line-height;
-}
-
-@mixin dr-dialog-spacing(
-    $top: $dr-spacing-medium,
-    $right: $dr-spacing-large,
-    $bottom: $dr-spacing-medium,
-    $left: $dr-spacing-large
-) {
-    padding: $top $right $bottom $left;
-}
-
-@mixin dr-typography-caption-1() {
-    font-size: $dr-font-size-xx-small;
-    line-height: $dr-line-height-xx-small;
-    font-weight: $dr-font-weight-regular;
-}
-@mixin dr-typography-caption-2() {
-    font-size: $dr-font-size-xx-small;
-    line-height: $dr-line-height-xx-small;
-    font-weight: $dr-font-weight-medium;
-}
-@mixin dr-typography-caption-3() {
-    font-size: $dr-font-size-xx-small;
-    line-height: $dr-line-height-xx-small;
-    font-weight: $dr-font-weight-semi-bold;
-}
-@mixin dr-typography-body-1() {
-    font-size: $dr-font-size-x-small;
-    line-height: $dr-line-height-x-small;
-    font-weight: $dr-font-weight-regular;
-}
-@mixin dr-typography-body-2() {
-    font-size: $dr-font-size-small;
-    line-height: $dr-line-height-small;
-    font-weight: $dr-font-weight-regular;
-}
-@mixin dr-typography-body-3() {
-    font-size: $dr-font-size-medium;
-    line-height: $dr-line-height-medium;
-    font-weight: $dr-font-weight-regular;
-}
-
-@mixin dr-typography-subtitle-1() {
-    font-size: $dr-font-size-x-small;
-    line-height: $dr-line-height-x-small;
-    font-weight: $dr-font-weight-medium;
-}
-@mixin dr-typography-subtitle-2() {
-    font-size: $dr-font-size-x-small;
-    line-height: $dr-line-height-x-small;
-    font-weight: $dr-font-weight-semi-bold;
-}
-
-@mixin dr-typography-heading-1() {
-    font-size: $dr-font-size-small;
-    line-height: $dr-line-height-small;
-    font-weight: $dr-font-weight-medium;
-}
-@mixin dr-typography-heading-2() {
-    font-size: $dr-font-size-small;
-    line-height: $dr-line-height-small;
-    font-weight: $dr-font-weight-semi-bold;
-}
-@mixin dr-typography-heading-3() {
-    font-size: $dr-font-size-medium;
-    line-height: $dr-line-height-medium;
-    font-weight: $dr-font-weight-medium;
-}
-@mixin dr-typography-heading-4() {
-    font-size: $dr-font-size-medium;
-    line-height: $dr-line-height-medium;
-    font-weight: $dr-font-weight-semi-bold;
-}
-@mixin dr-typography-heading-5() {
-    font-size: $dr-font-size-large;
-    line-height: $dr-line-height-large;
-    font-weight: $dr-font-weight-semi-bold;
-}
-@mixin dr-typography-heading-6() {
-    font-size: $dr-font-size-x-large;
-    line-height: $dr-line-height-x-large;
-    font-weight: $dr-font-weight-semi-bold;
-}
-@mixin dr-typography-heading-7() {
-    font-size: $dr-font-size-xx-large;
-    line-height: $dr-line-height-xx-large;
-    font-weight: $dr-font-weight-semi-bold;
-}
-
-$dr-chat-max-width: 956px;
-$dr-chat-horizontal-padding: 16px;
-$dr-chat-main-color: #25258c;
-$dr-chat-avatar-width: 28px;
-$dr-chat-avatar-left-indent: 0;
-$dr-chat-avatar-right-indent: 16px;
-$dr-chat-header-text-indent: 20px;
-$dr-chat-box-shadow: 0px 2px 36px 0px rgba(0, 0, 0, 0.15);
-
-// DR spacing variables (margin, paddings, etc.)
-$dr-spacing-xxx-small: 2px;
-$dr-spacing-xx-small: 4px;
-$dr-spacing-x-small: 8px;
-$dr-spacing-small: 16px;
-$dr-spacing-medium: 24px;
-$dr-spacing-large: 32px;
-$dr-spacing-x-large: 40px;
-$dr-spacing-xx-large: 48px;
-$dr-spacing-xxx-large: 56px;
-
-// DR font variables (family, weight, size, line-height)
-$dr-primary-font-family: 'Poppins', sans-serif;
-
-$dr-font-weight-thin: 250;
-$dr-font-weight-extra-light: 275;
-$dr-font-weight-light: 300;
-$dr-font-weight-regular: 400;
-$dr-font-weight-medium: 500;
-$dr-font-weight-semi-bold: 600;
-$dr-font-weight-bold: 700;
-$dr-font-weight-extra-bold: 800;
-$dr-font-weight-black: 900;
-
-$dr-font-size-xx-small: 12px;
-$dr-font-size-x-small: 14px;
-$dr-font-size-small: 16px;
-$dr-font-size-medium: 18px;
-$dr-font-size-large: 20px;
-$dr-font-size-x-large: 24px;
-$dr-font-size-xx-large: 32px;
-
-$dr-line-height-xx-small: 16px;
-$dr-line-height-x-small: 24px;
-$dr-line-height-small: 24px;
-$dr-line-height-medium: 32px;
-$dr-line-height-large: 32px;
-$dr-line-height-x-large: 40px;
-$dr-line-height-xx-large: 48px;
-
-$shared-assets-base: 'https://shared-assets.datarails.com' !default;
-
-$dr-color-primary-darker: #1d1d6d;
-$dr-color-primary-dark: #25258c;
-$dr-color-primary: #4646ce;
-$dr-color-primary-light: #7f7fdd;
-$dr-color-primary-lighter: #b9b9ec;
-$dr-color-primary-ultra-light: #e2e2ff;
-$dr-color-primary-super-light: #f2f2fb;
-$dr-color-primary-gradient: linear-gradient(96.89deg, #25258c 0%, #4646ce 100%);
-
-$dr-color-pink-darker: #680325;
-$dr-color-pink-dark: #981440;
-$dr-color-pink: #c9245b;
-$dr-color-pink-light: #f93576;
-$dr-color-pink-lighter: #fc93b6;
-$dr-color-pink-ultra-lighter: #ffdbe5;
-$dr-color-pink-super-light: #fff1f5;
-
-$dr-color-yellow-darker: #9e5f00;
-$dr-color-yellow-dark: #c17700;
-$dr-color-yellow: #ffa310;
-$dr-color-yellow-light: #ffbf5a;
-$dr-color-yellow-lighter: #ffdca4;
-$dr-color-yellow-ultra-light: #ffefd9;
-$dr-color-yellow-super-light: #fff8ee;
-
-$dr-color-gray-dark: #4e566c;
-$dr-color-gray-medium-dark: #7e828e;
-$dr-color-gray-darker: #373c4c;
-$dr-color-gray: #9ea1aa;
-$dr-color-gray-medium-light: #dfe0e3;
-$dr-color-gray-light: #f0f1f4;
-
-$dr-color-background-main-header: #0c142b;
-$dr-color-background-main: #f6f7f8;
-$dr-color-background-secondary: #fbfbfe;
-$dr-color-background-white: #ffffff;
-$dr-color-background-header: #f2f2fb;
-$dr-color-background-hover: #f5f5f5;
-$dr-color-background-selected: #eaeaff;
-$dr-color-background-disabled: #f0f1f4;
-
-$dr-color-background-status-error: #f7d9dc;
-$dr-color-background-status-info: #e6efff;
-$dr-color-background-status-warning: #ffefc7;
-$dr-color-background-status-success: #dbf5e6;
-$dr-color-background-status-progress: #f2f2fb;
-$dr-color-background-status-regular: #f0f1f4;
-
-$dr-color-status-error: #bf1d30;
-$dr-color-status-info: #0b5af9;
-$dr-color-status-warning: #ffb800;
-$dr-color-status-success: #037c5a;
-$dr-color-status-progress: #4646ce;
-$dr-color-status-regular: #7e828e;
-
-$dr-color-border-divider: #dfe0e3;
-$dr-color-border-input: #9ea1aa;
-$dr-color-border-hover: #4e566c;
-$dr-color-border-disabled: #aeabac;
-$dr-color-border-active: #4646ce;
-$dr-color-border-error: #bf1d30;
-
-$dr-color-text-main: #333333;
-$dr-color-text-secondary: #6d6e6f;
-$dr-color-text-disabled: #aeabac;
-$dr-color-text-white: #ffffff;
-$dr-color-text-active: #4646ce;
-$dr-color-text-success: #037c5a;
-$dr-color-text-error: #bf1d30;
-$dr-color-text-warning: #9e5f00;
-$dr-color-text-info: #0b5af9;
-
-$dr-color-additional-blue: #0061ff;
-$dr-color-additional-bright-green: #20a452;
-$dr-color-additional-dark-blue: #19194c;
-$dr-color-additional-orange: #ff4e00;
-$dr-color-additional-bright-purple: #b14ef2;
-$dr-color-additional-light-blue: #578aff;
-$dr-color-additional-bright-pink: #f13fa4;
-$dr-color-additional-mouse: #8693a2;
-$dr-color-additional-medium-green: #00867e;
-$dr-color-additional-dark-green: #006334;
-$dr-color-additional-light-pink: #ff6bb7;
-$dr-color-additional-deep-mocha: #523f3e;
-$dr-color-additional-soft-coral: #f3b1af;
-$dr-color-additional-navy-blue: #2e4f8c;
-$dr-color-additional-cool-lagoon: #73c9c5;
-$dr-color-additional-lavender: #baa9f3;
-$dr-color-additional-grape: #753f86;
-$dr-color-additional-royal-purple: #724dca;
-$dr-color-additional-sky-breeze: #80cafa;
-$dr-color-additional-honey: #ffae00;
-$dr-color-additional-fresh-lime: #a8d14b;
-$dr-color-additional-space: #7b61ff;
-
-$dr-color-badge-light-purple: #dfd9ff;
-$dr-color-badge-water: #d9f2ff;
-$dr-color-badge-baby-blue: #d9e6ff;
-$dr-color-badge-baby-pink: #ffdbf1;
-$dr-color-badge-light-turquoise: #d6fcf9;
-$dr-color-badge-bright-green: #d9ffea;
-$dr-color-badge-stone: #f6f4f4;
-$dr-color-badge-peach: #ffe5b4;
-$dr-color-badge-soft-coral: #ffd2c2;
-$dr-color-badge-pale-yellow: #fffacd;
-$dr-color-badge-pastel-olive: #dce2b9;
-$dr-color-badge-powder-blue-grey: #d3dbe3;
-$dr-color-badge-muted-plum: #e7c7db;
-
-$dr-color-ai-gradient: linear-gradient(217.44deg, #3d36cd -13.46%, #32b4ff 44.38%);
-$dr-color-ai-background-main-gradient: linear-gradient(266deg, #6969ff 25.2%, #4eb7df 90.24%);
-$dr-color-ai-background-main-hover-gradient:
-    linear-gradient(0deg, rgba(77, 77, 205, 0.4) 0%, rgba(77, 77, 205, 0.4) 100%), $dr-color-ai-background-main-gradient;
-$dr-color-ai-background-secondary-hover-gradient:
-    linear-gradient(270deg, rgba(105, 105, 255, 0.2) -4.23%, rgba(78, 183, 223, 0.2) 103.6%), #fff;
-$dr-color-ai-border-secondary-gradient: linear-gradient(269.57deg, #6969ff -4.23%, #4eb7df 103.6%);
-$dr-color-ai-light-gradient: linear-gradient(94deg, #f4f4ff 1.6%, #f2fafd 96.19%);
-$dr-color-ai-purple-gradient: linear-gradient(
-    31deg,
-    #7676ff -0.84%,
-    #5959ff 21.77%,
-    #5757e0 46%,
-    #4646ce 83.81%,
-    #4b4be4 117.26%,
-    #4444eb 140.53%
-);
-
-
-@mixin dr-button-highlight-theme-inner-button {
-    button {
-        border: none;
-        background: none;
-        color: $dr-color-text-active;
-        padding: 0 $dr-spacing-xx-small;
-        text-decoration: none;
-    }
+/* 
 
-    button:hover,
-    &.active button,
-    button:active {
-        text-decoration: underline;
-    }
 
-    &.disabled button {
-        color: $dr-color-text-disabled;
-    }
-}
-
-@mixin dr-button-highlight-theme-link {
-    border: none;
-    background: none;
-    color: $dr-color-text-active;
-    padding: 0 $dr-spacing-xx-small;
-    text-decoration: none;
-
-    &:hover,
-    &:active {
-        text-decoration: underline;
-    }
+.dr-button-link {
+    @include dr-typography-body-1();
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
 
-    &.disabled {
-        color: $dr-color-text-disabled;
-    }
+    @include dr-button-highlight-theme-link;
 }
 
+.dr-button-link.disabled {
+    pointer-events: none;
+} */
 
+/* TODO: Revert to SCSS after refactor scss bundling */
 .dr-button-link {
-    @include dr-typography-body-1();
+    font-size: 14px;
+    line-height: 24px;
+    font-weight: 400;
     display: inline-flex;
     align-items: center;
     cursor: pointer;
+    border: none;
+    background: none;
+    color: #4646ce;
+    padding: 0 4px;
+    text-decoration: none;
+}
 
-    @include dr-button-highlight-theme-link;
+.dr-button-link:hover,
+.dr-button-link:active {
+    text-decoration: underline;
 }
 
 .dr-button-link.disabled {
+    color: #aeabac;
     pointer-events: none;
 }