asksuite-citrus 3.13.0-beta.3 → 3.14.0-beta.2

package/styles/{colors.scss → colors-light.scss}

@@ -3,58 +3,58 @@
  */
 
 // brand
-$asksuite-orange: #FF5724;
+$asksuite-orange: #ff5724;
 
 // neutral
-$white: #FFF;
+$white: #fff;
 
 // grey
-$grey-50: #F5F7FA;
-$grey-100: #E4E7EB;
-$grey-150: #DBDBDB;
-$grey-200: #CBD2D9;
-$grey-300: #9AA5B1;
-$grey-400: #7B8794;
-$grey-500: #616E7C;
-$grey-600: #52606D;
-$grey-700: #3E4C59;
-$grey-800: #2A3042;
-$grey-900: #1F2933;
+$grey-50: #f5f7fa;
+$grey-100: #e4e7eb;
+$grey-150: #dbdbdb;
+$grey-200: #cbd2d9;
+$grey-300: #9aa5b1;
+$grey-400: #7b8794;
+$grey-500: #616e7c;
+$grey-600: #52606d;
+$grey-700: #3e4c59;
+$grey-800: #2a3042;
+$grey-900: #1f2933;
 
 // yellow
-$yellow-50: #FFF8E2;
-$yellow-200: #FFECB3;
+$yellow-50: #fff8e2;
+$yellow-200: #ffecb3;
 
 // color
-$success-green: #4BAF50;
-$warning-yellow: #FFC107;
-$error-red: #E8453E;
+$success-green: #4baf50;
+$warning-yellow: #ffc107;
+$error-red: #e8453e;
 
 // shadow
-$shadow: #2A304229;
+$shadow: #2a304229;
 
 // livechat tags
-$lightblue-tag: #CDF9F3;
-$lavender-tag: #D4DAF3;
-$green-tag: #CEEEAA;
-$pink-tag: #FBC5FF;
-$orange-tag: #FED5C9;
-$purple-tag: #DDBFE5;
-$yellow-tag: #FFE0B2;
-$blue-tag: #B2E5FD;
-$brown-tag: #EFC89C;
+$lightblue-tag: #cdf9f3;
+$lavender-tag: #d4daf3;
+$green-tag: #ceeeaa;
+$pink-tag: #fbc5ff;
+$orange-tag: #fed5c9;
+$purple-tag: #ddbfe5;
+$yellow-tag: #ffe0b2;
+$blue-tag: #b2e5fd;
+$brown-tag: #efc89c;
 
 // communication channels
-$whatsapp-green: #68B35D;
-$facebook-blue: #0084FF;
-$instagram-pink: #D53E91;
-$google-blue: #345DC8;
-$telegram-blue: #34AADF;
-$telephone-yellow: #FECB00;
+$whatsapp-green: #68b35d;
+$facebook-blue: #0084ff;
+$instagram-pink: #d53e91;
+$google-blue: #345dc8;
+$telegram-blue: #34aadf;
+$telephone-yellow: #fecb00;
 
 // backgrounds
 $primary-background: $white;
-$secondary-background: #EFF3F8;
+$secondary-background: #eff3f8;
 $hover-background: $grey-50;
 $divider-background: $grey-100;
 
@@ -63,7 +63,6 @@ $font-color-100: $grey-800;
 $font-color-200: $grey-500;
 $font-color-300: $grey-300;
 
-
 // new tokens livechat
 
 //reference
@@ -239,13 +238,13 @@ $color-y-600: #d79428;
 $color-y-700: #be800e;
 $color-y-800: #a66e0c;
 $color-y-900: #775409;
-$color-a-100: #F9E7E2;
+$color-a-100: #f9e7e2;
 $color-a-1000: $color-o-1000;
 $color-a-200: $color-o-200;
-$color-a-300: #FBAF99;
+$color-a-300: #fbaf99;
 $color-a-400: $color-o-400;
 $color-a-500: $color-o-500;
-$color-a-600: #FF5724;
+$color-a-600: #ff5724;
 $color-a-700: $color-o-700;
 $color-a-800: $color-o-800;
 $color-a-900: $color-o-900;
@@ -260,7 +259,6 @@ $color-f-700: $color-v-700;
 $color-f-800: $color-v-800;
 $color-f-900: $color-v-900;
 
-
 $color-light-neutral-NLA200: $color-nla-200;
 $color-light-neutral-NLA300: #13293921;
 // livechat - tokens
@@ -588,9 +586,9 @@ $color-texticon-warning: $color-texticon-accent-yellow-contrast;
 $color-skeleton: $color-nla-200;
 $color-text-link-default: $color-b-500;
 $color-texticon-inverse-default: $color-nl-0;
-$color-texticon-danger: $color-r-600; 
+$color-texticon-danger: $color-r-600;
 
-:root {
+@mixin theme {
   // brand
   --asksuite-orange: #{$asksuite-orange};
 
@@ -672,6 +670,7 @@ $color-texticon-danger: $color-r-600;
   --color-background-alpha-subtlest-default: #{$color-background-alpha-subtlest-default};
   --color-background-inverse-default: #{$color-background-inverse-default};
   --color-background-disabled: #{$color-background-disabled};
+  --color-background-skeleton: #{$color-background-disabled};
   --color-text-contrast: #{$color-text-contrast};
   --color-text-subtlest: #{$color-text-subtlest};
   --color-text-disabled: #{$color-text-disabled};
@@ -706,4 +705,11 @@ $color-texticon-danger: $color-r-600;
   --color-elevation-surface-primary-default: #{$color-elevation-surface-primary-default};
   --color-background-alpha-subtlest-hovered: #{$color-background-alpha-subtlest-hovered};
   --color-icon-brand-asksuite-contrast: #{$color-icon-brand-asksuite-contrast};
-}
+  --color-border-brand-asksuite-contrast: #{$color-border-brand-asksuite-contrast};
+  --color-background-bounding-box: #{color-background-bounding-box};
+
+  --color-background-accent-grey-bold-default: #{$color-background-accent-grey-bold-default};
+  --color-border-inverse-subtle: #{$color-border-inverse-subtle};
+  --color-background-accent-grey-subtler-hovered: #{$color-background-accent-grey-subtler-hovered};
+}
+  

package/styles/list-item.scss

@@ -3,6 +3,6 @@
 
   &:hover {
     cursor: pointer;
-    background-color: $grey-50;
+    background-color: var(--grey-50);
   }
 }

package/styles/material.scss

@@ -1,29 +1,29 @@
 @use '@angular/material' as mat;
 @include mat.core();
-@import './colors';
+@import './colors-light.scss';
 
 $ask-gray-palette: (
-  50: $grey-50,
-  100: $grey-100,
-  200: $grey-200,
-  300: $grey-300,
-  400: $grey-400,
-  500: $grey-500,
-  600: $grey-600,
-  700: $grey-700,
-  800: $grey-800,
-  900: $grey-900,
+  50: var(--grey-50),
+  100: var(--grey-100),
+  200: var(--grey-200),
+  300: var(--grey-300),
+  400: var(--grey-400),
+  500: var(--grey-500),
+  600: var(--grey-600),
+  700: var(--grey-700),
+  800: var(--grey-800),
+  900: var(--grey-900),
   contrast: (
-    50: rgba(black, .87),
-    100: rgba(black, .87),
-    200: rgba(black, .87),
-    300: rgba(black, .87),
-    400: rgba(black, .87),
-    500: white,
-    600: white,
-    700: white,
-    800: white,
-    900: white,
+    50:   rgba(var(--color-background-bounding-box), .87),
+    100:  rgba(var(--color-background-bounding-box), .87),
+    200:  rgba(var(--color-background-bounding-box), .87),
+    300:  rgba(var(--color-background-bounding-box), .87),
+    400:  rgba(var(--color-background-bounding-box), .87),
+    500: var(--white),
+    600: var(--white),
+    700: var(--white),
+    800: var(--white),
+    900: var(--white),
   )
 );
 

package/styles/old-theme.scss

@@ -0,0 +1,61 @@
+
+  // brand
+  $asksuite-orange: #ff5724;
+
+  // neutral
+  $white: black;
+
+  // grey
+  $grey-50: #f5f7fa;
+  $grey-100: #e4e7eb;
+  $grey-150: #dbdbdb;
+  $grey-200: #cbd2d9;
+  $grey-300: #9aa5b1;
+  $grey-400: #7b8794;
+  $grey-500: #616e7c;
+  $grey-600: #52606d;
+  $grey-700: #3e4c59;
+  $grey-800: #2a3042;
+  $grey-900: #1f2933;
+
+  // yellow
+  $yellow-50: #fff8e2;
+  $yellow-200: #ffecb3;
+
+  // color
+  $success-green: #4baf50;
+  $warning-yellow: #ffc107;
+  $error-red: #e8453e;
+
+  // shadow
+  $shadow: #2a304229;
+
+  // livechat tags
+  $lightblue-tag: #cdf9f3;
+  $lavender-tag: #d4daf3;
+  $green-tag: #ceeeaa;
+  $pink-tag: #fbc5ff;
+  $orange-tag: #fed5c9;
+  $purple-tag: #ddbfe5;
+  $yellow-tag: #ffe0b2;
+  $blue-tag: #b2e5fd;
+  $brown-tag: #efc89c;
+
+  // communication channels
+  $whatsapp-green: #68b35d;
+  $facebook-blue: #0084ff;
+  $instagram-pink: #d53e91;
+  $google-blue: #345dc8;
+  $telegram-blue: #34aadf;
+  $telephone-yellow: #fecb00;
+
+  // backgrounds
+  $primary-background: $white;
+  $secondary-background: #eff3f8;
+  $hover-background: $grey-50;
+  $divider-background: $grey-100;
+
+  // fonts
+  $font-color-100: $grey-800;
+  $font-color-200: $grey-500;
+  $font-color-300: $grey-300;

package/styles/styles.scss

@@ -7,7 +7,7 @@
  * Tokens
  */
 @import './tokens';
-
+@import './colors-light.scss';
 @import './button';
 @import './modal';
 @import './ask-mixins';

package/styles/theme-colors.scss

@@ -0,0 +1,13 @@
+@forward "colors-light";
+
+@use "colors-dark";
+@use "colors-light";
+
+
+body.light{
+    @include colors-light.theme();
+}
+
+body.dark{
+    @include colors-dark.theme();
+}

package/styles/theme-primitives.scss

@@ -0,0 +1,208 @@
+$color-m-1000: #412746;
+$color-m-900: #62325a;
+$color-m-800: #813e6f;
+$color-m-700: #a14884;
+$color-m-600: #d75ba5;
+$color-m-500: #de77b5;
+$color-m-400: #e490c3;
+$color-m-300: #ebadd2;
+$color-m-200: #f3cee4;
+$color-m-100: #f7deed;
+$color-p-1000: #332c59;
+$color-p-900: #42396f;
+$color-p-800: #534790;
+$color-p-700: #5f4eb1;
+$color-p-600: #7969c9;
+$color-p-500: #9183d2;
+$color-p-400: #ab9fe5;
+$color-p-300: #c2b9f4;
+$color-p-200: #dcd5fb;
+$color-p-100: #ebe5ff;
+$color-b-1000: #0c2e59;
+$color-b-900: #123c76;
+$color-b-800: #174b94;
+$color-b-700: #1c59b2;
+$color-b-600: #276ace;
+$color-b-500: #4f8ce8;
+$color-b-400: #7aa7eb;
+$color-b-300: #a3c2f0;
+$color-b-200: #ceddf3;
+$color-b-100: #e3eaf7;
+$color-t-1000: #0c4153;
+$color-t-900: #125e72;
+$color-t-800: #17798e;
+$color-t-700: #1c92ab;
+$color-t-600: #37b2c8;
+$color-t-500: #4fc9e0;
+$color-t-400: #7ad5e5;
+$color-t-300: #a3e0ec;
+$color-t-200: #ceecf1;
+$color-t-100: #e3f2f6;
+$color-g-1000: #0c3c34;
+$color-g-900: #12513e;
+$color-g-800: #176849;
+$color-g-700: #1c7d54;
+$color-g-600: #279661;
+$color-g-500: #45ba82;
+$color-g-400: #73deaa;
+$color-g-300: #a7ecd0;
+$color-g-200: #c6f5df;
+$color-g-100: #e1f9ee;
+$color-l-1000: #2c4a31;
+$color-l-900: #41673a;
+$color-l-800: #568444;
+$color-l-700: #6ba04e;
+$color-l-600: #77be41;
+$color-l-500: #8ed558;
+$color-l-400: #a9e17f;
+$color-l-300: #c8ecac;
+$color-l-200: #ddf6ca;
+$color-l-100: #e9f9dc;
+$color-y-1000: #5b4007;
+$color-y-900: #775409;
+$color-y-800: #a66e0c;
+$color-y-700: #be800e;
+$color-y-600: #d79428;
+$color-y-500: #edb24a;
+$color-y-400: #fbc560;
+$color-y-300: #fed88c;
+$color-y-200: #ffe5b2;
+$color-y-100: #fff1d6;
+$color-o-1000: #3d231e;
+$color-o-900: #6d301f;
+$color-o-800: #9e3d22;
+$color-o-700: #ce4a23;
+$color-o-600: #ff5724;
+$color-o-500: #fe6f44;
+$color-o-400: #fd906e;
+$color-o-300: #fbaf99;
+$color-o-200: #fad0c4;
+$color-o-100: #f9e7e2;
+$color-r-1000: #331b2e;
+$color-r-900: #5c1f36;
+$color-r-800: #87233f;
+$color-r-700: #b02747;
+$color-r-600: #d92b50;
+$color-r-500: #df5372;
+$color-r-400: #e57d94;
+$color-r-300: #eaa5b6;
+$color-r-200: #f5c7d1;
+$color-r-100: #fbe9ed;
+$color-v-1000: #1c1829;
+$color-v-900: #2b1935;
+$color-v-800: #3b1a43;
+$color-v-700: #4a1b4f;
+$color-v-600: #5a1d5b;
+$color-v-500: #6a336b;
+$color-v-400: #916a92;
+$color-v-300: #a98aa9;
+$color-v-200: #d0c1d2;
+$color-v-100: #daceda;
+$color-a-100: $color-o-100;
+$color-a-200: $color-o-200;
+$color-a-300: $color-o-300;
+$color-a-400: $color-o-400;
+$color-a-500: $color-o-500;
+$color-a-600: $color-o-600;
+$color-a-700: $color-o-700;
+$color-a-800: $color-o-800;
+$color-a-900: $color-o-900;
+$color-a-1000: $color-o-1000;
+$color-f-100: $color-v-100;
+$color-f-200: $color-v-200;
+$color-f-300: $color-v-300;
+$color-f-400: $color-v-400;
+$color-f-500: $color-v-500;
+$color-f-600: $color-v-600;
+$color-f-700: $color-v-700;
+$color-f-800: $color-v-800;
+$color-f-900: $color-v-900;
+$color-f-1000: $color-v-1000;
+//grey light opaque
+$color-nl-0: #ffffff;
+$color-nl-100: #f8f8f9;
+$color-nl-200: #f0f2f3;
+$color-nl-300: #e1e4e6;
+$color-nl-400: #d3d7da;
+$color-nl-500: #c4c9cd;
+$color-nl-600: #b5bcc1;
+$color-nl-700: #a6afb4;
+$color-nl-800: #97a1a8;
+$color-nl-900: #8a959d;
+$color-nl-1000: #7b8790;
+$color-nl-1100: #6c7a84;
+$color-nl-1200: #5d6c77;
+$color-nl-1300: #4e5f6b;
+$color-nl-1400: #40525f;
+$color-nl-1500: #314452;
+$color-nl-1600: #223746;
+$color-nl-1700: #132939;
+//grey light alpha
+$color-nla-0: rgba(255, 255, 255, 0);
+$color-nla-100: rgba(19, 41, 57, 0.03);
+$color-nla-200: rgba(19, 41, 57, 0.06);
+$color-nla-300: rgba(19, 41, 57, 0.13);
+$color-nla-400: rgba(19, 41, 57, 0.19);
+$color-nla-500: rgba(19, 41, 57, 0.25);
+$color-nla-600: rgba(19, 41, 57, 0.31);
+$color-nla-700: rgba(19, 41, 57, 0.38);
+$color-nla-800: rgba(19, 41, 57, 0.44);
+$color-nla-900: rgba(19, 41, 57, 0.5);
+$color-nla-1000: rgba(19, 41, 57, 0.56);
+$color-nla-1100: rgba(19, 41, 57, 0.63);
+$color-nla-1200: rgba(19, 41, 57, 0.69);
+$color-nla-1300: rgba(19, 41, 57, 0.75);
+$color-nla-1400: rgba(19, 41, 57, 0.81);
+$color-nla-1500: rgba(19, 41, 57, 0.88);
+$color-nla-1600: rgba(19, 41, 57, 0.94);
+$color-nla-1700: #132939;
+//grey dark opaque
+$color-nd-1400: #b2beca;
+$color-nd-1300: #a6b2bc;
+$color-nd-1200: #99a4af;
+$color-nd-1100: #8d97a2;
+$color-nd-1000: #7f8b95;
+$color-nd-900: #727d88;
+$color-nd-800: #66707a;
+$color-nd-700: #58646d;
+$color-nd-600: #4c5760;
+$color-nd-500: #3f4952;
+$color-nd-400: #333d45;
+$color-nd-300: #253037;
+$color-nd-200: #19232a;
+$color-nd-100: #131c24;
+$color-nd-0: #0d161c;
+$color-nd-1500: #c0cbd8;
+$color-nd-1600: #ccd8e5;
+$color-nd-1700: #d9e5f2;
+//grey dark alpha
+$color-nda-0: rgba(12, 22, 29, 0);
+$color-nda-100: rgba(217, 229, 242, 0.03);
+$color-nda-200: rgba(217, 229, 242, 0.06);
+$color-nda-300: rgba(217, 229, 242, 0.13);
+$color-nda-400: rgba(217, 229, 242, 0.19);
+$color-nda-500: rgba(217, 229, 242, 0.25);
+$color-nda-600: rgba(217, 229, 242, 0.31);
+$color-nda-700: rgba(217, 229, 242, 0.38);
+$color-nda-800: rgba(217, 229, 242, 0.44);
+$color-nda-900: rgba(217, 229, 242, 0.5);
+$color-nda-1000: rgba(217, 229, 242, 0.56);
+$color-nda-1100: rgba(217, 229, 242, 0.63);
+$color-nda-1200: rgba(217, 229, 242, 0.69);
+$color-nda-1300: rgba(217, 229, 242, 0.75);
+$color-nda-1400: rgba(217, 229, 242, 0.81);
+$color-nda-1500: rgba(217, 229, 242, 0.88);
+$color-nda-1600: rgba(217, 229, 242, 0.94);
+$color-nda-1700: #d9e5f2;
+
+
+
+//outros
+
+$color-light-neutral-nla200: $color-nda-200;
+$color-light-neutral-nla300: $color-nda-0;
+$color-elevation-surface-sunken-default: $color-nd-0;
+$color-background-accent-grey-bold-default: $color-nl-1400;
+$color-border-inverse-subtle: $color-nl-400;
+$color-background-accent-grey-subtler-hovered: $color-nl-400;
+//

package/styles/tokens.scss

@@ -1,7 +1,8 @@
 /*
  * Tokens
  */
-@import './colors';
+@use 'theme-colors';
+// @forward './colors-light';
 @import './font-families';
 @import './font-sizes';
 @import './font-weights';

package/styles/tooltip.scss

@@ -1,6 +1,6 @@
 .ask-tooltip {
-  background-color: $grey-400;
-  color: $white;
+  background-color: var(--color-background-alpha-bolder-default);
+  color: var(--color-texticon-inverse-default);
   padding: 4px;
   border-radius: 8px;
   position: relative;
@@ -46,4 +46,5 @@
 
 ::ng-deep mat-tooltip-component .mat-mdc-tooltip .mdc-tooltip__surface {
   background-color: transparent !important;
+  color: var(--color-texticon-inverse-default) !important;
 }