@datarailsshared/datarailsshared 1.6.355 → 1.6.357

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datarailsshared/datarailsshared",
-  "version": "1.6.355",
+  "version": "1.6.357",
   "description": "DataRails shared components",
   "keywords": [
     "angular",
@@ -20,7 +20,7 @@
   "homepage": "https://bitbucket.org/datarails/datarailsshared/src/master",
   "exports": {
     "./styles": {
-      "default": "./styles.css"
+      "default": "./styles.scss"
     },
     "./package.json": {
       "default": "./package.json"

package/{styles.css → styles.scss}

@@ -558,44 +558,407 @@ 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-watermarks-pink: #feecf6;
+$dr-color-watermarks-purple: #f7edfe;
+$dr-color-watermarks-medium-purple: #e9cdfc;
+$dr-color-watermarks-dark-purple: #ececfa;
+$dr-color-watermarks-green: #e9f6ee;
+$dr-color-watermarks-medium-green: #c7e4d8;
+$dr-color-watermarks-dark-green: #e5efeb;
+$dr-color-watermarks-blue: #eef3ff;
+$dr-color-watermarks-yellow: #fff6e7;
+$dr-color-watermarks-gray: #f3f4f6;
+$dr-color-watermarks-dark-gray: #e8e8ed;
+$dr-color-watermarks-orange: #ffede5;
+
+$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;
+    }
 
-.dr-button-link {
-    @include dr-typography-body-1();
-    display: inline-flex;
-    align-items: center;
-    cursor: pointer;
+    &.disabled button {
+        color: $dr-color-text-disabled;
+    }
+}
 
-    @include dr-button-highlight-theme-link;
+@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;
+    }
+
+    &.disabled {
+        color: $dr-color-text-disabled;
+    }
 }
 
-.dr-button-link.disabled {
-    pointer-events: none;
-} */
 
-/* TODO: Revert to SCSS after refactor scss bundling */
 .dr-button-link {
-    font-size: 14px;
-    line-height: 24px;
-    font-weight: 400;
+    @include dr-typography-body-1();
     display: inline-flex;
     align-items: center;
     cursor: pointer;
-    border: none;
-    background: none;
-    color: #4646ce;
-    padding: 0 4px;
-    text-decoration: none;
-}
 
-.dr-button-link:hover,
-.dr-button-link:active {
-    text-decoration: underline;
+    @include dr-button-highlight-theme-link;
 }
 
 .dr-button-link.disabled {
-    color: #aeabac;
     pointer-events: none;
 }