asksuite-citrus 3.6.7-beta.0 → 3.7.0

package/lib/directives/button/ask-base-button.directive.d.ts

@@ -11,7 +11,7 @@ export declare abstract class AskBaseButtonDirective implements OnChanges {
     static ɵfac: i0.ɵɵFactoryDeclaration<AskBaseButtonDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<AskBaseButtonDirective, never, never, { "color": { "alias": "color"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, {}, never, never, false, never>;
 }
-type ButtonSize = 'x-large' | 'large' | 'default' | 'medium' | 'small' | 'mini';
+type ButtonSize = 'x-large' | 'large' | 'default' | 'medium' | 'small' | 'mini' | 'x-mini';
 export type ButtonAppearance = 'outline' | 'text' | 'default';
 export type ButtonColor = 'primary' | 'secondary' | 'danger';
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "asksuite-citrus",
-  "version": "3.6.7-beta.0",
+  "version": "3.7.0",
   "peerDependencies": {
     "@angular/common": "^17.3.7",
     "@angular/core": "^17.3.7",

package/styles/button.scss

@@ -1,7 +1,7 @@
 @import "./tokens";
 
 @mixin baseButton {
-  display: flex;
+  display: inline-flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
@@ -14,7 +14,7 @@
   transition: background-color .1s, box-shadow .1s;
   cursor: pointer;
   font-weight: $font-weight-medium;
-  color: var(--grey-500);
+  color: var(--color-text-contrast);
 
   &.-x-large {
     padding: 24px 32px;
@@ -35,6 +35,13 @@
   &.-mini {
     padding: 4px 8px;
   }
+
+  &.-x-mini{
+    padding: 2px 4px;
+    font-size: 11px;
+    border-radius: $radii-xs;
+    font-size: $font-xxs;
+  }
 }
 
 .ask-button {
@@ -50,6 +57,7 @@
   }
   &:hover:not(:disabled) {
     box-shadow: 0 0 6px rgba(255, 87, 36, 0.4);
+    background-color: $color-background-accent-grey-subtlest-hovered;
   }
 
   &.-primary:active:not(:disabled) {

package/styles/colors.scss

@@ -265,13 +265,14 @@ $color-light-neutral-NLA200: $color-nla-200;
 $color-light-neutral-NLA300: #13293921;
 // livechat - tokens
 
+
+//TODO: REMOVE DUPLICATE SEMANTICS
 $color-texticon-brand-asksuite-contrast: $color-a-600;
 $color-texticon-inverse-default: $color-nl-0;
 $color-texticon-contrast: $color-nla-1500;
 $color-texticon-subtle: $color-nla-1200;
 $color-texticon-subtlest: $color-nla-1000;
 $color-texticon-disabled: $color-nla-700;
-$color-texticon-link-default: $color-b-500;
 
 $color-elevation-surface-selected-ask: $color-a-100;
 $color-elevation-surface-sunken-default: $color-nl-0;
@@ -292,8 +293,302 @@ $color-text-contrast: $color-nla-1500;
 $color-text-subtlest: $color-nla-1000;
 $color-text-disabled: #13293961;
 
+
+
+
+$color-background-accent-blue-bold-default: $color-b-800;
+$color-background-accent-blue-bold-hovered: $color-b-900;
+$color-background-accent-blue-bold-pressed: $color-b-1000;
+$color-background-accent-blue-contrast-default: $color-b-600;
+$color-background-accent-blue-contrast-hovered: $color-b-700;
+$color-background-accent-blue-contrast-pressed: $color-b-800;
+$color-background-accent-blue-subtle-default: $color-b-400;
+$color-background-accent-blue-subtle-hovered: $color-b-500;
+$color-background-accent-blue-subtle-pressed: $color-b-600;
+$color-background-accent-blue-subtlest-default: $color-b-200;
+$color-background-accent-blue-subtlest-hovered: $color-b-300;
+$color-background-accent-blue-subtlest-pressed: $color-b-400;
+$color-background-accent-green-bold-default: $color-g-800;
+$color-background-accent-green-bold-hovered: $color-g-900;
+$color-background-accent-green-bold-pressed: $color-g-1000;
+$color-background-accent-green-contrast-default: $color-g-600;
+$color-background-accent-green-contrast-hovered: $color-g-700;
+$color-background-accent-green-contrast-pressed: $color-g-800;
+$color-background-accent-green-subtle-default: $color-g-400;
+$color-background-accent-green-subtle-hovered: $color-g-500;
+$color-background-accent-green-subtle-pressed: $color-g-600;
+$color-background-accent-green-subtlest-default: $color-g-200;
+$color-background-accent-green-subtlest-hovered: $color-g-300;
+$color-background-accent-green-subtlest-pressed: $color-g-400;
+$color-background-accent-grey-bold-default: $color-nl-1400;
+$color-background-accent-grey-bold-hovered: $color-nl-1600;
+$color-background-accent-grey-bold-pressed: $color-nl-1700;
+$color-background-accent-grey-bolder-default: $color-nl-1700;
+$color-background-accent-grey-bolder-hovered: $color-nl-1500;
+$color-background-accent-grey-bolder-pressed: $color-nl-1400;
+$color-background-accent-grey-contrast-default: $color-nl-1000;
+$color-background-accent-grey-contrast-hovered: $color-nl-1200;
+$color-background-accent-grey-contrast-pressed: $color-nl-1300;
+$color-background-accent-grey-disabled: $color-nl-300;
+$color-background-accent-grey-inverse-default: $color-nl-0;
+$color-background-accent-grey-inverse-hovered: $color-nl-200;
+$color-background-accent-grey-inverse-pressed: $color-nl-300;
+$color-background-accent-grey-subtle-default: $color-nl-500;
+$color-background-accent-grey-subtle-hovered: $color-nl-700;
+$color-background-accent-grey-subtle-pressed: $color-nl-800;
+$color-background-accent-grey-subtler-default: $color-nl-200;
+$color-background-accent-grey-subtler-hovered: $color-nl-400;
+$color-background-accent-grey-subtler-pressed: $color-nl-500;
+$color-background-accent-grey-subtlest-default: $color-nl-100;
+$color-background-accent-grey-subtlest-hovered: $color-nl-300;
+$color-background-accent-grey-subtlest-pressed: $color-nl-400;
+$color-background-accent-lime-bold-default: $color-l-800;
+$color-background-accent-lime-bold-hovered: $color-l-900;
+$color-background-accent-lime-bold-pressed: $color-l-1000;
+$color-background-accent-lime-contrast-default: $color-l-600;
+$color-background-accent-lime-contrast-hovered: $color-l-700;
+$color-background-accent-lime-contrast-pressed: $color-l-800;
+$color-background-accent-lime-subtle-default: $color-l-400;
+$color-background-accent-lime-subtle-hovered: $color-l-500;
+$color-background-accent-lime-subtle-pressed: $color-l-600;
+$color-background-accent-lime-subtlest-default: $color-l-200;
+$color-background-accent-lime-subtlest-hovered: $color-l-300;
+$color-background-accent-lime-subtlest-pressed: $color-l-400;
+$color-background-accent-magenta-bold-default: $color-m-800;
+$color-background-accent-magenta-bold-hovered: $color-m-900;
+$color-background-accent-magenta-bold-pressed: $color-m-1000;
+$color-background-accent-magenta-contrast-default: $color-m-600;
+$color-background-accent-magenta-contrast-hovered: $color-m-700;
+$color-background-accent-magenta-contrast-pressed: $color-m-800;
+$color-background-accent-magenta-subtle-default: $color-m-400;
+$color-background-accent-magenta-subtle-hovered: $color-m-500;
+$color-background-accent-magenta-subtle-pressed: $color-m-600;
+$color-background-accent-magenta-subtlest-default: $color-m-200;
+$color-background-accent-magenta-subtlest-hovered: $color-m-300;
+$color-background-accent-magenta-subtlest-pressed: $color-m-400;
+$color-background-accent-orange-bold-default: $color-o-800;
+$color-background-accent-orange-bold-hovered: $color-o-900;
+$color-background-accent-orange-bold-pressed: $color-o-1000;
+$color-background-accent-orange-contrast-default: $color-o-600;
+$color-background-accent-orange-contrast-hovered: $color-o-700;
+$color-background-accent-orange-contrast-pressed: $color-o-800;
+$color-background-accent-orange-subtle-default: $color-o-400;
+$color-background-accent-orange-subtle-hovered: $color-o-500;
+$color-background-accent-orange-subtle-pressed: $color-o-600;
+$color-background-accent-orange-subtlest-default: $color-o-200;
+$color-background-accent-orange-subtlest-hovered: $color-o-300;
+$color-background-accent-orange-subtlest-pressed: $color-o-400;
+$color-background-accent-purple-bold-default: $color-p-800;
+$color-background-accent-purple-bold-hovered: $color-p-900;
+$color-background-accent-purple-bold-pressed: $color-p-1000;
+$color-background-accent-purple-contrast-default: $color-p-600;
+$color-background-accent-purple-contrast-hovered: $color-p-700;
+$color-background-accent-purple-contrast-pressed: $color-p-800;
+$color-background-accent-purple-subtle-default: $color-p-400;
+$color-background-accent-purple-subtle-hovered: $color-p-500;
+$color-background-accent-purple-subtle-pressed: $color-p-600;
+$color-background-accent-purple-subtlest-default: $color-p-200;
+$color-background-accent-purple-subtlest-hovered: $color-p-300;
+$color-background-accent-purple-subtlest-pressed: $color-p-400;
+$color-background-accent-red-bold-default: $color-r-800;
+$color-background-accent-red-bold-hovered: $color-r-900;
+$color-background-accent-red-bold-pressed: $color-r-1000;
+$color-background-accent-red-contrast-default: $color-r-600;
+$color-background-accent-red-contrast-hovered: $color-r-700;
+$color-background-accent-red-contrast-pressed: $color-r-800;
+$color-background-accent-red-subtle-default: $color-r-400;
+$color-background-accent-red-subtle-hovered: $color-r-500;
+$color-background-accent-red-subtle-pressed: $color-r-600;
+$color-background-accent-red-subtlest-default: $color-r-200;
+$color-background-accent-red-subtlest-hovered: $color-r-300;
+$color-background-accent-red-subtlest-pressed: $color-r-400;
+$color-background-accent-teal-bold-default: $color-t-800;
+$color-background-accent-teal-bold-hovered: $color-t-900;
+$color-background-accent-teal-bold-pressed: $color-t-1000;
+$color-background-accent-teal-contrast-default: $color-t-600;
+$color-background-accent-teal-contrast-hovered: $color-t-700;
+$color-background-accent-teal-contrast-pressed: $color-t-800;
+$color-background-accent-teal-subtler-default: $color-t-400;
+$color-background-accent-teal-subtler-hovered: $color-t-500;
+$color-background-accent-teal-subtler-pressed: $color-t-600;
+$color-background-accent-teal-subtlest-default: $color-t-200;
+$color-background-accent-teal-subtlest-hovered: $color-t-300;
+$color-background-accent-teal-subtlest-pressed: $color-t-400;
+$color-background-accent-violet-bold-default: $color-v-800;
+$color-background-accent-violet-bold-hovered: $color-v-900;
+$color-background-accent-violet-bold-pressed: $color-v-1000;
+$color-background-accent-violet-contrast-default: $color-v-600;
+$color-background-accent-violet-contrast-hovered: $color-v-700;
+$color-background-accent-violet-contrast-pressed: $color-v-800;
+$color-background-accent-violet-subtle-default: $color-v-400;
+$color-background-accent-violet-subtle-hovered: $color-v-500;
+$color-background-accent-violet-subtle-pressed: $color-v-600;
+$color-background-accent-violet-subtlest-default: $color-v-200;
+$color-background-accent-violet-subtlest-hovered: $color-v-300;
+$color-background-accent-violet-subtlest-pressed: $color-v-400;
+$color-background-accent-yellow-bold-default: $color-y-800;
+$color-background-accent-yellow-bold-hovered: $color-y-900;
+$color-background-accent-yellow-bold-pressed: $color-y-1000;
+$color-background-accent-yellow-contrast-default: $color-y-600;
+$color-background-accent-yellow-contrast-hovered: $color-y-700;
+$color-background-accent-yellow-contrast-pressed: $color-y-800;
+$color-background-accent-yellow-subtle-default: $color-y-400;
+$color-background-accent-yellow-subtle-hovered: $color-y-500;
+$color-background-accent-yellow-subtle-pressed: $color-y-600;
+$color-background-accent-yellow-subtlest-default: $color-y-200;
+$color-background-accent-yellow-subtlest-hovered: $color-y-300;
+$color-background-accent-yellow-subtlest-pressed: $color-y-400;
+$color-background-alpha-bolder-default: $color-nla-1600;
+$color-background-alpha-bolder-hovered: $color-nla-1400;
+$color-background-alpha-bolder-pressed: $color-nla-1200;
+$color-background-alpha-subtler-default: $color-nla-400;
+$color-background-alpha-subtler-hovered: $color-nla-600;
+$color-background-alpha-subtler-pressed: $color-nla-700;
+$color-background-alpha-subtlest-default: $color-nla-200;
+$color-background-alpha-subtlest-hovered: $color-nla-400;
+$color-background-alpha-subtlest-pressed: $color-nla-500;
+$color-background-bounding-box: $color-nla-0;
+$color-background-danger-contrast-default: $color-r-600;
+$color-background-danger-contrast-hovered: $color-r-700;
+$color-background-danger-contrast-pressed: $color-r-800;
+$color-background-disabled: $color-nla-200;
+$color-background-info-contrast-enabled: $color-b-600;
+$color-background-info-contrast-hovered: $color-b-700;
+$color-background-info-contrast-pressed: $color-b-800;
+$color-background-inverse-default: $color-nl-0;
+$color-background-inverse-hovered: $color-nla-200;
+$color-background-inverse-pressed: $color-nla-300;
+$color-background-success-contrast-default: $color-g-600;
+$color-background-success-contrast-hovered: $color-g-700;
+$color-background-success-contrast-pressed: $color-g-800;
+$color-background-warning-contrast-default: $color-y-500;
+$color-background-warning-contrast-hovered: $color-y-600;
+$color-background-warning-contrast-pressed: $color-y-700;
+
+$color-border-accent-blue: $color-b-600;
+$color-border-accent-green: $color-g-600;
+$color-border-accent-grey: $color-nl-1000;
+$color-border-accent-lime: $color-l-600;
+$color-border-accent-magenta: $color-m-600;
+$color-border-accent-orange: $color-o-600;
+$color-border-accent-purple: $color-p-600;
+$color-border-accent-red: $color-r-600;
+$color-border-accent-teal: $color-t-600;
+$color-border-accent-violet: $color-v-600;
+$color-border-accent-yellow: $color-y-600;
+$color-border-danger: $color-r-700;
+$color-border-default: $color-nla-200;
+$color-border-high-contrast-black-default: $color-nd-200;
+$color-border-high-contrast-black-disabled: $color-nla-1000;
+$color-border-high-contrast-white-default: $color-nl-0;
+$color-border-high-contrast-white-disabled: $color-nda-1000;
+$color-border-info: $color-b-700;
+$color-border-inverse-contrast: $color-nl-0;
+$color-border-inverse-disabled: $color-nda-300;
+$color-border-inverse-subtle: $color-nl-400;
+$color-border-link-default: $color-b-500;
+$color-border-link-visited: $color-p-500;
+$color-border-success: $color-g-700;
+$color-border-warning: $color-y-700;
+
 $color-divider-default: $color-nl-400;
-$color-skeleton: $color-nla-200;
+
+$color-elevation-surface-default-default: $color-nl-100;
+$color-elevation-surface-default-hovered: $color-nl-200;
+$color-elevation-surface-sunken-default: $color-nl-0;
+$color-elevation-surface-sunken-hovered: $color-nl-100;
+
+$color-texticon-accent-blue-bold: $color-b-800;
+$color-texticon-accent-blue-contrast: $color-b-600;
+$color-texticon-accent-green-bold: $color-g-800;
+$color-texticon-accent-green-contrast: $color-g-600;
+$color-texticon-accent-grey-bold: $color-nl-1300;
+$color-texticon-accent-grey-contrast: $color-nl-1000;
+$color-texticon-accent-lime-bold: $color-l-800;
+$color-texticon-accent-lime-contrast: $color-l-600;
+$color-texticon-accent-magenta-bold: $color-m-800;
+$color-texticon-accent-magenta-contrast: $color-m-600;
+$color-texticon-accent-orange-bold: $color-o-800;
+$color-texticon-accent-orange-contrast: $color-o-600;
+$color-texticon-accent-purple-bold: $color-p-800;
+$color-texticon-accent-purple-contrast: $color-p-600;
+$color-texticon-accent-red-bold: $color-r-800;
+$color-texticon-accent-red-contrast: $color-r-600;
+$color-texticon-accent-teal-bold: $color-t-800;
+$color-texticon-accent-teal-contrast: $color-t-600;
+$color-texticon-accent-violet-bold: $color-v-800;
+$color-texticon-accent-violet-contrast: $color-v-600;
+$color-texticon-accent-yellow-bold: $color-y-800;
+$color-texticon-accent-yellow-contrast: $color-y-600;
+$color-texticon-contrast: $color-nla-1500;
+$color-texticon-disabled: $color-nla-700;
+$color-texticon-high-contrast-black-default: $color-nla-1500;
+$color-texticon-high-contrast-black-disabled: $color-nla-1000;
+$color-texticon-high-contrast-white-default: $color-nl-0;
+$color-texticon-high-contrast-white-disabled: $color-nda-1000;
+$color-texticon-inverse-default: $color-nl-0;
+$color-texticon-inverse-disabled: $color-nda-1000;
+$color-texticon-link-default: $color-b-500;
+$color-texticon-link-visited: $color-p-500;
+$color-texticon-subtle: $color-nla-1200;
+$color-texticon-subtlest: $color-nla-1000;
+
+$color-background-brand-asksuite-bold-default: $color-a-700;
+$color-background-brand-asksuite-bold-hovered: $color-a-800;
+$color-background-brand-asksuite-bold-pressed: $color-a-900;
+$color-background-brand-asksuite-contrast-default: $color-a-600;
+$color-background-brand-asksuite-contrast-hovered: $color-a-700;
+$color-background-brand-asksuite-contrast-pressed: $color-a-800;
+$color-background-brand-asksuite-subtler-default: $color-a-200;
+$color-background-brand-asksuite-subtler-hovered: $color-a-300;
+$color-background-brand-asksuite-subtler-pressed: $color-a-400;
+$color-background-brand-asksuite-subtlest-default: $color-a-100;
+$color-background-brand-asksuite-subtlest-hovered: $color-a-200;
+$color-background-brand-asksuite-subtlest-pressed: $color-a-300;
+$color-background-brand-flow-bold-default: $color-f-700;
+$color-background-brand-flow-bold-hovered: $color-f-800;
+$color-background-brand-flow-bold-pressed: $color-f-900;
+$color-background-brand-flow-contrast-default: $color-f-500;
+$color-background-brand-flow-contrast-hovered: $color-f-600;
+$color-background-brand-flow-contrast-pressed: $color-f-700;
+$color-background-brand-flow-subtler-default: $color-f-200;
+$color-background-brand-flow-subtler-hovered: $color-f-300;
+$color-background-brand-flow-subtler-pressed: $color-f-400;
+$color-background-brand-flow-subtlest-default: $color-f-100;
+$color-background-brand-flow-subtlest-hovered: $color-f-200;
+$color-background-brand-flow-subtlest-pressed: $color-f-300;
+
+$color-background-selected-ask: $color-a-100;
+$color-background-selected-flow: $color-f-100;
+
+$color-border-brand-asksuite-bold: $color-a-700;
+$color-border-brand-asksuite-bolder: $color-a-900;
+$color-border-brand-asksuite-contrast: $color-a-500;
+$color-border-brand-asksuite-subtle: $color-a-300;
+$color-border-brand-asksuite-subtler: $color-a-100;
+$color-border-brand-flow-bold: $color-f-700;
+$color-border-brand-flow-bolder: $color-f-900;
+$color-border-brand-flow-contrast: $color-f-500;
+$color-border-brand-flow-subtle: $color-f-300;
+$color-border-brand-flow-subtler: $color-f-100;
+
+$color-skeleton: $color-background-alpha-subtlest-default;
+
+$color-texticon-brand-asksuite-bold: $color-a-700;
+$color-texticon-brand-asksuite-bolder: $color-a-900;
+$color-texticon-brand-asksuite-contrast: $color-a-600;
+$color-texticon-brand-asksuite-subtle: $color-a-300;
+$color-texticon-brand-asksuite-subtler: $color-a-100;
+$color-texticon-brand-flow-bold: $color-f-700;
+$color-texticon-brand-flow-bolder: $color-f-900;
+$color-texticon-brand-flow-contrast: $color-f-500;
+$color-texticon-brand-flow-subtle: $color-f-300;
+$color-texticon-brand-flow-subtler: $color-f-100;
+$color-texticon-danger: $color-texticon-accent-red-contrast;
+$color-texticon-info: $color-texticon-accent-blue-contrast;
+$color-texticon-success: $color-texticon-accent-green-contrast;
+$color-texticon-warning: $color-texticon-accent-yellow-contrast;
+
 
 :root {
   // brand
@@ -380,7 +675,4 @@ $color-skeleton: $color-nla-200;
   --color-text-contrast: #{$color-text-contrast};
   --color-text-subtlest: #{$color-text-subtlest};
   --color-text-disabled: #{$color-text-disabled};
-  --color-texticon-link-default: #{$color-texticon-link-default};
-  --color-divider-default: #{$color-divider-default};
-  --color-skeleton: #{$color-skeleton};
 }

package/styles/font-sizes.scss

@@ -1,11 +1,13 @@
-$font-xs: 0.75rem;   // 12px
-$font-sm: 0.875rem;  // 14px
-$font-md: 1rem;      // 16px
-$font-lg: 1.125rem;  // 18px
-$font-xl: 1.25rem;   // 20px
-$font-xxl: 1.5rem;   // 24px
+$font-xxs: 11px;
+$font-xs: 12px;
+$font-sm: 14px;
+$font-md: 16px;
+$font-lg: 18px;
+$font-xl: 20px; 
+$font-xxl: 24px; 
 
 :root {
+  --font-xxs: $font-xxs;
   --font-xs: $font-xs;
   --font-sm: $font-sm;
   --font-md: $font-md;