asksuite-citrus 3.7.2 → 3.7.3

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' | 'x-mini';
+type ButtonSize = 'x-large' | 'large' | 'default' | 'medium' | 'small' | '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.7.2",
+  "version": "3.7.3",
   "peerDependencies": {
     "@angular/common": "^17.3.7",
     "@angular/core": "^17.3.7",

package/styles/button.scss

@@ -1,7 +1,7 @@
 @import "./tokens";
 
 @mixin baseButton {
-  display: inline-flex;
+  display: 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(--color-text-contrast);
+  color: var(--grey-500);
 
   &.-x-large {
     padding: 24px 32px;
@@ -35,13 +35,6 @@
   &.-mini {
     padding: 4px 8px;
   }
-
-  &.-x-mini{
-    padding: 2px 4px;
-    font-size: 11px;
-    border-radius: $radii-xs;
-    font-size: $font-xxs;
-  }
 }
 
 .ask-button {
@@ -71,12 +64,6 @@
     background-color: rgba($error-red,.8);
   }
 
-  &.-secondary {
-    &:not(:disabled):hover{
-      background-color: $color-background-accent-grey-subtlest-hovered;
-    }
-  }
-
   &.-danger {
     background: $error-red;
     color: white;

package/styles/colors.scss

@@ -265,14 +265,13 @@ $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,302 +291,11 @@ $color-background-disabled: $color-nla-200;
 $color-text-contrast: $color-nla-1500;
 $color-text-subtlest: $color-nla-1000;
 $color-text-disabled: #13293961;
-$color-text-inverse-contrast: $color-nl-0;
-
-
-$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;
-
+$color-text-link-default: $color-b-500;
 
 :root {
   // brand
@@ -674,5 +382,8 @@ $color-texticon-warning: $color-texticon-accent-yellow-contrast;
   --color-text-contrast: #{$color-text-contrast};
   --color-text-subtlest: #{$color-text-subtlest};
   --color-text-disabled: #{$color-text-disabled};
-  --color-text-inverse-contrast: #{$color-text-inverse-contrast};
+  --color-texticon-link-default: #{$color-texticon-link-default};
+  --color-divider-default: #{$color-divider-default};
+  --color-skeleton: #{$color-skeleton};
+  --color-text-link-default: #{$color-text-link-default};
 }

package/styles/font-sizes.scss

@@ -1,13 +1,11 @@
-$font-xxs: 11px;
-$font-xs: 12px;
-$font-sm: 14px;
-$font-md: 16px;
-$font-lg: 18px;
-$font-xl: 20px; 
-$font-xxl: 24px; 
+$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
 
 :root {
-  --font-xxs: $font-xxs;
   --font-xs: $font-xs;
   --font-sm: $font-sm;
   --font-md: $font-md;