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

package/lib/asksuite-citrus.module.d.ts

@@ -30,36 +30,32 @@ import * as i27 from "./components/character-counter/character-counter.component
 import * as i28 from "./components/accordion/accordion.component";
 import * as i29 from "./components/accordion/extendable-panel/extendable-panel.component";
 import * as i30 from "./components/table/table.component";
-import * as i31 from "./components/tag/tag.component";
-import * as i32 from "./components/pagination/pagination.component";
-import * as i33 from "./pipes/paginate/paginate.pipe";
-import * as i34 from "./directives/richtext-toolbox/richtext-toolbox.directive";
-import * as i35 from "./components/richtext-url-prompt/richtext-url-prompt.component";
-import * as i36 from "./components/richtext-toolbox/richtext-toolbox.component";
-import * as i37 from "./directives/button/ask-text-button.directive";
-import * as i38 from "./pipes/force-break-line/force-break-line.pipe";
-import * as i39 from "./components/modal/confirmation-modal/confirmation-modal.component";
-import * as i40 from "./components/loading-bar/loading-bar.component";
-import * as i41 from "./directives/button/ask-stroked-button.directive";
-import * as i42 from "./directives/input/input.directive";
-import * as i43 from "./directives/list-item/list-item.directive";
-import * as i44 from "./components/arrow-tag/arrow-tag.component";
-import * as i45 from "./components/tab-group/tab-group.component";
-import * as i46 from "./components/tab-group/tab/tab.component";
-import * as i47 from "@angular/common";
-import * as i48 from "@angular/forms";
-import * as i49 from "@angular/cdk/overlay";
-import * as i50 from "@ngx-translate/core";
-import * as i51 from "ngx-skeleton-loader";
-import * as i52 from "@angular/material/tooltip";
-import * as i53 from "ngx-mask";
-import * as i54 from "@angular/material/progress-bar";
-import * as i55 from "./components/icon/icon.component";
+import * as i31 from "./components/pagination/pagination.component";
+import * as i32 from "./pipes/paginate/paginate.pipe";
+import * as i33 from "./directives/richtext-toolbox/richtext-toolbox.directive";
+import * as i34 from "./components/richtext-url-prompt/richtext-url-prompt.component";
+import * as i35 from "./components/richtext-toolbox/richtext-toolbox.component";
+import * as i36 from "./directives/button/ask-text-button.directive";
+import * as i37 from "./pipes/force-break-line/force-break-line.pipe";
+import * as i38 from "./components/modal/confirmation-modal/confirmation-modal.component";
+import * as i39 from "./components/loading-bar/loading-bar.component";
+import * as i40 from "./directives/button/ask-stroked-button.directive";
+import * as i41 from "./directives/input/input.directive";
+import * as i42 from "./directives/list-item/list-item.directive";
+import * as i43 from "@angular/common";
+import * as i44 from "@angular/forms";
+import * as i45 from "@angular/cdk/overlay";
+import * as i46 from "@ngx-translate/core";
+import * as i47 from "ngx-skeleton-loader";
+import * as i48 from "@angular/material/tooltip";
+import * as i49 from "ngx-mask";
+import * as i50 from "@angular/material/progress-bar";
+import * as i51 from "./components/icon/icon.component";
 export declare class AsksuiteCitrusModule {
     static forRoot(params?: {
         flagUrl?: string;
     }): ModuleWithProviders<AsksuiteCitrusModule>;
     static ɵfac: i0.ɵɵFactoryDeclaration<AsksuiteCitrusModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<AsksuiteCitrusModule, [typeof i1.ButtonComponent, typeof i2.InputComponent, typeof i3.SelectComponent, typeof i4.BoxComponent, typeof i5.AvatarComponent, typeof i6.DropdownContainerComponent, typeof i7.AskDropdownDirective, typeof i8.AutocompleteComponent, typeof i9.PhoneDdiComponent, typeof i10.ChipsComponent, typeof i11.CheckboxComponent, typeof i12.DatePickerComponent, typeof i13.DatePickerCalendarComponent, typeof i14.SkeletonComponent, typeof i15.SpinnerComponent, typeof i16.SpinnerDirective, typeof i17.BadgeDirective, typeof i18.AutofocusDirective, typeof i19.ScrollDirective, typeof i20.AskTooltipDirective, typeof i21.ToastComponent, typeof i22.AskButtonDirective, typeof i23.ModalComponent, typeof i24.ModalBodyDirective, typeof i25.ModalHeaderDirective, typeof i26.ModalFooterDirective, typeof i27.CharacterCounterComponent, typeof i28.AccordionComponent, typeof i29.ExtendablePanelComponent, typeof i30.TableComponent, typeof i31.TagComponent, typeof i32.PaginationComponent, typeof i33.PaginatePipe, typeof i34.RichtextToolboxDirective, typeof i35.RichtextUrlPromptComponent, typeof i36.RichtextToolboxComponent, typeof i37.AskTextButtonDirective, typeof i38.ForceBreakLinePipe, typeof i39.ConfirmationModalComponent, typeof i40.LoadingBarComponent, typeof i41.AskStrokedButtonDirective, typeof i42.InputDirective, typeof i43.ListItemDirective, typeof i44.ArrowTagComponent, typeof i45.TabGroupComponent, typeof i46.TabComponent], [typeof i47.CommonModule, typeof i48.FormsModule, typeof i48.ReactiveFormsModule, typeof i49.CdkOverlayOrigin, typeof i49.CdkConnectedOverlay, typeof i49.OverlayModule, typeof i50.TranslateModule, typeof i51.NgxSkeletonLoaderModule, typeof i52.MatTooltipModule, typeof i53.NgxMaskDirective, typeof i53.NgxMaskPipe, typeof i54.MatProgressBarModule, typeof i55.IconComponent], [typeof i1.ButtonComponent, typeof i2.InputComponent, typeof i3.SelectComponent, typeof i4.BoxComponent, typeof i5.AvatarComponent, typeof i6.DropdownContainerComponent, typeof i7.AskDropdownDirective, typeof i8.AutocompleteComponent, typeof i9.PhoneDdiComponent, typeof i10.ChipsComponent, typeof i11.CheckboxComponent, typeof i12.DatePickerComponent, typeof i13.DatePickerCalendarComponent, typeof i14.SkeletonComponent, typeof i16.SpinnerDirective, typeof i17.BadgeDirective, typeof i18.AutofocusDirective, typeof i19.ScrollDirective, typeof i20.AskTooltipDirective, typeof i22.AskButtonDirective, typeof i37.AskTextButtonDirective, typeof i24.ModalBodyDirective, typeof i25.ModalHeaderDirective, typeof i26.ModalFooterDirective, typeof i27.CharacterCounterComponent, typeof i28.AccordionComponent, typeof i29.ExtendablePanelComponent, typeof i30.TableComponent, typeof i32.PaginationComponent, typeof i33.PaginatePipe, typeof i34.RichtextToolboxDirective, typeof i38.ForceBreakLinePipe, typeof i40.LoadingBarComponent, typeof i41.AskStrokedButtonDirective, typeof i42.InputDirective, typeof i43.ListItemDirective, typeof i55.IconComponent, typeof i31.TagComponent, typeof i44.ArrowTagComponent, typeof i45.TabGroupComponent, typeof i46.TabComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<AsksuiteCitrusModule, [typeof i1.ButtonComponent, typeof i2.InputComponent, typeof i3.SelectComponent, typeof i4.BoxComponent, typeof i5.AvatarComponent, typeof i6.DropdownContainerComponent, typeof i7.AskDropdownDirective, typeof i8.AutocompleteComponent, typeof i9.PhoneDdiComponent, typeof i10.ChipsComponent, typeof i11.CheckboxComponent, typeof i12.DatePickerComponent, typeof i13.DatePickerCalendarComponent, typeof i14.SkeletonComponent, typeof i15.SpinnerComponent, typeof i16.SpinnerDirective, typeof i17.BadgeDirective, typeof i18.AutofocusDirective, typeof i19.ScrollDirective, typeof i20.AskTooltipDirective, typeof i21.ToastComponent, typeof i22.AskButtonDirective, typeof i23.ModalComponent, typeof i24.ModalBodyDirective, typeof i25.ModalHeaderDirective, typeof i26.ModalFooterDirective, typeof i27.CharacterCounterComponent, typeof i28.AccordionComponent, typeof i29.ExtendablePanelComponent, typeof i30.TableComponent, typeof i31.PaginationComponent, typeof i32.PaginatePipe, typeof i33.RichtextToolboxDirective, typeof i34.RichtextUrlPromptComponent, typeof i35.RichtextToolboxComponent, typeof i36.AskTextButtonDirective, typeof i37.ForceBreakLinePipe, typeof i38.ConfirmationModalComponent, typeof i39.LoadingBarComponent, typeof i40.AskStrokedButtonDirective, typeof i41.InputDirective, typeof i42.ListItemDirective], [typeof i43.CommonModule, typeof i44.FormsModule, typeof i44.ReactiveFormsModule, typeof i45.CdkOverlayOrigin, typeof i45.CdkConnectedOverlay, typeof i45.OverlayModule, typeof i46.TranslateModule, typeof i47.NgxSkeletonLoaderModule, typeof i48.MatTooltipModule, typeof i49.NgxMaskDirective, typeof i49.NgxMaskPipe, typeof i50.MatProgressBarModule, typeof i51.IconComponent], [typeof i1.ButtonComponent, typeof i2.InputComponent, typeof i3.SelectComponent, typeof i4.BoxComponent, typeof i5.AvatarComponent, typeof i6.DropdownContainerComponent, typeof i7.AskDropdownDirective, typeof i8.AutocompleteComponent, typeof i9.PhoneDdiComponent, typeof i10.ChipsComponent, typeof i11.CheckboxComponent, typeof i12.DatePickerComponent, typeof i13.DatePickerCalendarComponent, typeof i14.SkeletonComponent, typeof i16.SpinnerDirective, typeof i17.BadgeDirective, typeof i18.AutofocusDirective, typeof i19.ScrollDirective, typeof i20.AskTooltipDirective, typeof i22.AskButtonDirective, typeof i36.AskTextButtonDirective, typeof i24.ModalBodyDirective, typeof i25.ModalHeaderDirective, typeof i26.ModalFooterDirective, typeof i27.CharacterCounterComponent, typeof i28.AccordionComponent, typeof i29.ExtendablePanelComponent, typeof i30.TableComponent, typeof i31.PaginationComponent, typeof i32.PaginatePipe, typeof i33.RichtextToolboxDirective, typeof i37.ForceBreakLinePipe, typeof i39.LoadingBarComponent, typeof i40.AskStrokedButtonDirective, typeof i41.InputDirective, typeof i42.ListItemDirective, typeof i51.IconComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<AsksuiteCitrusModule>;
 }

package/lib/services/theme/theme.service.d.ts

@@ -0,0 +1,7 @@
+import * as i0 from "@angular/core";
+export declare class ThemeService {
+    constructor();
+    setTheme(theme: 'dark' | 'light'): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ThemeService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<ThemeService>;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "asksuite-citrus",
-  "version": "3.13.0-beta.2",
+  "version": "3.14.0-beta.1",
   "peerDependencies": {
     "@angular/common": "^17.3.7",
     "@angular/core": "^17.3.7",

package/public-api.d.ts

@@ -19,15 +19,12 @@ export * from './lib/components/table/table.component';
 export * from './lib/components/pagination/pagination.component';
 export * from './lib/components/loading-bar/loading-bar.component';
 export * from './lib/components/icon/icon.component';
-export * from './lib/components/tag/tag.component';
-export * from './lib/components/arrow-tag/arrow-tag.component';
-export * from './lib/components/tab-group/tab-group.component';
-export * from './lib/components/tab-group/tab/tab.component';
 export * from './lib/directives';
 export * from './lib/components/modal/directives';
 export * from './lib/services/toast/toast.service';
 export * from './lib/services/modal';
 export * from './lib/services/dynamic-dropdown/dynamic-dropdown.service';
+export * from './lib/services/theme/theme.service';
 export * from './lib/pipes/paginate/paginate.pipe';
 export * from './lib/pipes/force-break-line/force-break-line.pipe';
 export * from './lib/services/toast/toast.config';

package/styles/ask-mixins.scss

@@ -21,19 +21,19 @@
   display: flex;
   align-items: center;
   border-radius: $radii-xs;
-  border: 1px solid $grey-200;
+  border: 1px solid var(--grey-200);
   padding: 16px;
   outline: none;
   gap: 8px;
   line-height: 14px;
-  color: $grey-700;
+  color: var(--grey-700);
   height: 58px;
   font-size: $font-sm;
   font-weight: $font-weight-regular;
   transition: border 0.2s;
 
   &:focus {
-    border-color: $asksuite-orange;
+    border-color: var(--asksuite-orange);
   }
 
   .material-icons {

package/styles/badge.scss

@@ -12,7 +12,7 @@
       justify-content: center;
       align-items: center;
       background-color: var(--bg-color);
-      color: #fff;
+      color: var(--white);
       font-size: 12px;
       text-overflow: ellipsis;
       white-space: nowrap;

package/styles/button.scss

@@ -46,14 +46,14 @@
 
 .ask-button {
   @include baseButton;
-  background: white;
+  background: var(--white);
 
   &:not(.-primary, .-secondary, .-danger) {
     box-shadow: 0 1px 2px 0 rgba(42, 48, 66, 0.16);
   }
 
   &:not(.-primary):hover:not(:disabled) {
-    box-shadow: 0 0 6px $shadow;
+    box-shadow: 0 0 6px var(--shadow);
   }
   &:hover:not(:disabled) {
     box-shadow: 0 0 6px rgba(255, 87, 36, 0.4);
@@ -64,32 +64,32 @@
   }
 
   &.-secondary:active:not(:disabled) {
-    background-color: rgba(#fff,.8);
+    background-color: rgba(var(--white),.8);
   }
 
   &.-danger:active:not(:disabled) {
-    background-color: rgba($error-red,.8);
+    background-color: rgba(var(--error-red),.8);
   }
 
   &.-secondary {
     &:not(:disabled):hover{
-      background-color: $color-background-accent-grey-subtlest-hovered;
+      background-color: var(--color-background-accent-grey-subtlest-hovered);
     }
   }
 
   &.-danger {
-    background: $error-red;
-    color: white;
+    background: var(--error-red);
+    color: var(--white);
   }
 
   &.-primary {
-    background: $asksuite-orange;
-    color: white;
+    background: var(--asksuite-orange);
+    color: var(--white);
   }
 
   &:disabled {
     cursor: not-allowed;
-    background-color: $grey-300;
+    background-color: var(--grey-300);
   }
 }
 
@@ -100,7 +100,7 @@
 
   &:hover {
     text-decoration: none;
-    background: $grey-50;
+    background: var(--grey-50);
   }
 
   &.-primary {
@@ -108,20 +108,20 @@
   }
 
   &.-secondary {
-    color: $grey-500;
+    color: var(--grey-500);
   }
 
   &.-danger {
-    color: $error-red;
+    color: var(--error-red);
   }
 
   &.-danger:active:not(:disabled) {
-    background-color: rgba($error-red, .1);
+    background-color: rgba(var(--error-red), .1);
   }
 
   &:disabled {
     cursor: not-allowed;
-    color: $grey-300;
+    color: var(--grey-300);
   }
 }
 
@@ -136,30 +136,30 @@
   }
 
   &.-secondary {
-    border-color: $grey-500;
-    color: $grey-500;
+    border-color: var(--grey-500);
+    color: var(--grey-500);
   }
 
   &.-danger {
-    color: $error-red;
-    border-color: $error-red;
+    color: var(--error-red);
+    border-color: var(--error-red);
   }
 
   &.-primary:active:not(:disabled) {
-    background-color: rgba($asksuite-orange, .1);
+    background-color: rgba(var(--asksuite-orange), .1);
   }
 
   &.-danger:active:not(:disabled) {
-    background-color: rgba($error-red, .1);
+    background-color: rgba(var(--error-red), .1);
   }
 
   &.-secondary:active:not(:disabled) {
-    background-color: rgba($grey-300, .8);
+    background-color: rgba(var(--grey-300), .8);
   }
 
   &:disabled {
     cursor: not-allowed;
-    border-color: $grey-300;
-    color: $grey-300;
+    border-color: var(--grey-300);
+    color: var(--grey-300);
   }
 }

package/styles/colors-dark.scss

@@ -0,0 +1,351 @@
+@use 'theme-primitives' as *;
+@use 'old-theme' as *;
+  /*
+ * IMPORTANT: All colors defined here must be also defined in colors-list.component.ts for proper documentation
+ */
+
+  @mixin theme {
+    --asksuite-orange: #{$asksuite-orange};
+    --white: #{$color-nd-0};
+    --grey-50: #{$color-nd-100};
+    --grey-100: #{$color-nda-300};
+    --grey-150: #{$grey-150};//TODO: MISSING
+    --grey-200: #{$color-nda-400};
+    --grey-300: #{$color-nda-700};
+    --grey-400: #{$color-nda-1000};
+    --grey-500: #{$color-nda-1200};
+    --grey-600: #{$color-nda-1300};
+    --grey-700: #{$color-nda-1400};
+    --grey-800: #{$color-nda-1600};
+    --grey-900: #{$color-nda-1700};
+    --yellow-50: #{$yellow-50};
+    --yellow-200: #{$yellow-200};
+    --success-green: #{$success-green};
+    --warning-yellow: #{$warning-yellow};
+    --error-red: #{$error-red};
+    --shadow: #{$shadow};
+    --lightblue-tag: #{$lightblue-tag};
+    --lavender-tag: #{$lavender-tag};
+    --green-tag: #{$green-tag};
+    --pink-tag: #{$pink-tag};
+    --orange-tag: #{$orange-tag};
+    --purple-tag: #{$purple-tag};
+    --yellow-tag: #{$yellow-tag};
+    --blue-tag: #{$blue-tag};
+    --brown-tag: #{$brown-tag};
+    --whatsapp-green: #{$whatsapp-green};
+    --facebook-blue: #{$facebook-blue};
+    --instagram-pink: #{$instagram-pink};
+    --google-blue: #{$google-blue};
+    --telegram-blue: #{$telegram-blue};
+    --telephone-yellow: #{$telephone-yellow};
+    --primary-background: #{$primary-background};
+    --secondary-background: #{$color-nda-0};
+    --hover-background: #{$color-nd-100};
+    --divider-background: #{$divider-background};
+    --font-color-100: #{$font-color-100};
+    --font-color-200: #{$font-color-200};
+    --font-color-300: #{$font-color-300};
+    --color-elevation-surface-sunken-default: #{$color-elevation-surface-sunken-default};
+    --color-light-neutral-NLA200: #{$color-light-neutral-nla200};
+    --color-light-neutral-NLA300: #{$color-light-neutral-nla300};
+    --color-texticon-contrast: #{$color-nda-1500};
+    --color-texticon-subtle: #{$color-nda-1200};
+    --color-texticon-subtler: #{$color-nda-1000};
+    --color-texticon-subtlest: #{$color-nda-1000}; //TODO: is same as color-texticon-subtler
+    --color-texticon-inverse-default: #{$color-nd-0};
+    --color-texticon-inverse-disabled: #{$color-nla-700};
+    --color-texticon-disabled: #{$color-nda-700};
+    --color-texticon-danger: #{$color-r-500};
+    --color-texticon-warning: #{$color-y-500};
+    --color-texticon-success: #{$color-g-500};
+    --color-texticon-info: #{$color-b-500};
+    --color-texticon-link-default: #{$color-b-500};
+    --color-texticon-link-visited: #{$color-p-500};
+    --color-texticon-accent-red-contrast: #{$color-r-500};
+    --color-texticon-accent-red-bold: #{$color-r-300};
+    --color-texticon-accent-orange-contrast: #{$color-o-500};
+    --color-texticon-accent-orange-bold: #{$color-o-300};
+    --color-texticon-accent-yellow-contrast: #{$color-y-500};
+    --color-texticon-accent-yellow-bold: #{$color-y-300};
+    --color-texticon-accent-lime-contrast: #{$color-l-500};
+    --color-texticon-accent-lime-bold: #{$color-l-300};
+    --color-texticon-accent-green-contrast: #{$color-g-500};
+    --color-texticon-accent-green-bold: #{$color-g-300};
+    --color-texticon-accent-teal-contrast: #{$color-t-500};
+    --color-texticon-accent-teal-bold: #{$color-t-300};
+    --color-texticon-accent-blue-contrast: #{$color-b-500};
+    --color-texticon-accent-blue-bold: #{$color-b-300};
+    --color-texticon-accent-purple-contrast: #{$color-p-500};
+    --color-texticon-accent-purple-bold: #{$color-p-300};
+    --color-texticon-accent-magenta-contrast: #{$color-m-500};
+    --color-texticon-accent-magenta-bold: #{$color-m-300};
+    --color-texticon-accent-grey-contrast: #{$color-nd-1000};
+    --color-texticon-accent-grey-bold: #{$color-nd-1300};
+    --color-texticon-accent-violet-contrast: #{$color-v-500};
+    --color-texticon-accent-violet-bold: #{$color-v-300};
+    --color-texticon-brand-asksuite-contrast: #{$color-a-500};
+    --color-texticon-brand-asksuite-subtler: #{$color-a-1000};
+    --color-texticon-brand-asksuite-bold: #{$color-a-400};
+    --color-texticon-brand-asksuite-subtle: #{$color-a-800};
+    --color-texticon-brand-asksuite-bolder: #{$color-a-200};
+    --color-texticon-brand-flow-subtler: #{$color-f-900};
+    --color-texticon-brand-flow-subtle: #{$color-f-700};
+    --color-texticon-brand-flow-contrast: #{$color-f-500};
+    --color-texticon-brand-flow-bold: #{$color-f-300};
+    --color-texticon-brand-flow-bolder: #{$color-f-100};
+    --color-texticon-white-default: #{$color-nl-0};
+    --color-texticon-white-disabled: #{$color-nda-700};
+    --color-texticon-black-default: #{$color-nla-1500};
+    --color-texticon-black-disabled: #{$color-nla-700};
+    --color-border-default: #{$color-nda-400};
+    --color-border-danger: #{$color-r-500};
+    --color-border-warning: #{$color-y-500};
+    --color-border-success: #{$color-g-500};
+    --color-border-info: #{$color-b-500};
+    --color-border-link-default: #{$color-b-600};
+    --color-border-link-visited: #{$color-p-600};
+    --color-border-accent-red: #{$color-r-500};
+    --color-border-accent-orange: #{$color-o-500};
+    --color-border-accent-yellow: #{$color-y-500};
+    --color-border-accent-lime: #{$color-l-500};
+    --color-border-accent-green: #{$color-g-500};
+    --color-border-accent-teal: #{$color-t-500};
+    --color-border-accent-blue: #{$color-b-500};
+    --color-border-accent-purple: #{$color-p-500};
+    --color-border-accent-magenta: #{$color-m-500};
+    --color-border-accent-grey: #{$color-nd-1000};
+    --color-border-accent-violet: #{$color-v-500};
+    --color-border-brand-asksuite-subtler: #{$color-a-1000};
+    --color-border-brand-asksuite-subtle: #{$color-a-800};
+    --color-border-brand-asksuite-contrast: #{$color-a-500};
+    --color-border-brand-asksuite-bold: #{$color-a-400};
+    --color-border-brand-asksuite-bolder: #{$color-a-200};
+    --color-border-brand-flow-subtler: #{$color-f-100};
+    --color-border-brand-flow-subtle: #{$color-f-300};
+    --color-border-brand-flow-contrast: #{$color-f-500};
+    --color-border-brand-flow-bold: #{$color-f-700};
+    --color-border-brand-flow-bolder: #{$color-f-900};
+    --color-border-inverse-contrast: #{$color-nl-0};
+    --color-border-inverse-disabled: #{$color-nda-300};
+    --color-border-inverse-subtle: #{$color-nl-400};
+    --color-border-white-default: #{$color-nl-0};
+    --color-border-white-disabled: #{$color-nda-1000};
+    --color-border-black-default: #{$color-nd-200};
+    --color-border-black-disabled: #{$color-nla-1000};
+    --color-background-accent-red-contrast-default: #{$color-r-500};
+    --color-background-accent-red-contrast-hovered: #{$color-r-400};
+    --color-background-accent-red-contrast-pressed: #{$color-r-300};
+    --color-background-accent-red-subtlest-default: #{$color-r-900};
+    --color-background-accent-red-subtlest-hovered: #{$color-r-800};
+    --color-background-accent-red-subtlest-pressed: #{$color-r-700};
+    --color-background-accent-red-subtle-default: #{$color-r-700};
+    --color-background-accent-red-subtle-hovered: #{$color-r-600};
+    --color-background-accent-red-subtle-pressed: #{$color-r-500};
+    --color-background-accent-red-bold-default: #{$color-r-300};
+    --color-background-accent-red-bold-hovered: #{$color-r-200};
+    --color-background-accent-red-bold-pressed: #{$color-r-100};
+    --color-background-accent-grey-contrast-default: #{$color-nd-1000};
+    --color-background-accent-grey-contrast-hovered: #{$color-nd-1200};
+    --color-background-accent-grey-contrast-pressed: #{$color-nd-1300};
+    --color-background-accent-grey-bolder-default: #{$color-nd-1700};
+    --color-background-accent-grey-bolder-hovered: #{$color-nd-1500};
+    --color-background-accent-grey-bolder-pressed: #{$color-nd-1400};
+    --color-background-accent-grey-inverse-default: #{$color-nd-0};
+    --color-background-accent-grey-inverse-hovered: #{$color-nd-200};
+    --color-background-accent-grey-inverse-pressed: #{$color-nd-300};
+    --color-background-accent-grey-subtlest-default: #{$color-nd-100};
+    --color-background-accent-grey-subtlest-hovered: #{$color-nd-300};
+    --color-background-accent-grey-subtlest-pressed: #{$color-nd-400};
+    --color-background-accent-magenta-contrast-default: #{$color-m-500};
+    --color-background-accent-magenta-contrast-hovered: #{$color-m-400};
+    --color-background-accent-magenta-contrast-pressed: #{$color-m-300};
+    --color-background-accent-magenta-subtlest-default: #{$color-m-900};
+    --color-background-accent-magenta-subtlest-hovered: #{$color-m-800};
+    --color-background-accent-magenta-subtlest-pressed: #{$color-m-700};
+    --color-background-accent-magenta-subtle-default: #{$color-m-700};
+    --color-background-accent-magenta-subtle-hovered: #{$color-m-600};
+    --color-background-accent-magenta-subtle-pressed: #{$color-m-500};
+    --color-background-accent-magenta-bold-default: #{$color-m-300};
+    --color-background-accent-magenta-bold-hovered: #{$color-m-200};
+    --color-background-accent-magenta-bold-pressed: #{$color-m-100};
+    --color-background-accent-purple-contrast-default: #{$color-p-500};
+    --color-background-accent-purple-contrast-hovered: #{$color-p-400};
+    --color-background-accent-purple-contrast-pressed: #{$color-p-300};
+    --color-background-accent-purple-subtlest-default: #{$color-p-900};
+    --color-background-accent-purple-subtlest-hovered: #{$color-p-800};
+    --color-background-accent-purple-subtlest-pressed: #{$color-p-700};
+    --color-background-accent-purple-subtle-default: #{$color-p-700};
+    --color-background-accent-purple-subtle-hovered: #{$color-p-600};
+    --color-background-accent-purple-subtle-pressed: #{$color-p-500};
+    --color-background-accent-purple-bold-default: #{$color-p-300};
+    --color-background-accent-purple-bold-hovered: #{$color-p-200};
+    --color-background-accent-purple-bold-pressed: #{$color-p-100};
+    --color-background-accent-blue-contrast-default: #{$color-b-500};
+    --color-background-accent-blue-contrast-hovered: #{$color-b-400};
+    --color-background-accent-blue-contrast-pressed: #{$color-b-300};
+    --color-background-accent-blue-subtlest-default: #{$color-b-900};
+    --color-background-accent-blue-subtlest-hovered: #{$color-b-800};
+    --color-background-accent-blue-subtlest-pressed: #{$color-b-700};
+    --color-background-accent-blue-subtle-default: #{$color-b-700};
+    --color-background-accent-blue-subtle-hovered: #{$color-b-600};
+    --color-background-accent-blue-subtle-pressed: #{$color-b-500};
+    --color-background-accent-blue-bold-default: #{$color-b-300};
+    --color-background-accent-blue-bold-hovered: #{$color-b-200};
+    --color-background-accent-blue-bold-pressed: #{$color-b-100};
+    --color-background-accent-teal-contrast-default: #{$color-t-500};
+    --color-background-accent-teal-contrast-hovered: #{$color-t-400};
+    --color-background-accent-teal-contrast-pressed: #{$color-t-300};
+    --color-background-accent-teal-subtlest-default: #{$color-t-900};
+    --color-background-accent-teal-subtlest-hovered: #{$color-t-800};
+    --color-background-accent-teal-subtlest-pressed: #{$color-t-700};
+    --color-background-accent-teal-subtler-default: #{$color-t-700};
+    --color-background-accent-teal-subtler-hovered: #{$color-t-600};
+    --color-background-accent-teal-subtler-pressed: #{$color-t-500};
+    --color-background-accent-teal-bold-default: #{$color-t-300};
+    --color-background-accent-teal-bold-hovered: #{$color-t-200};
+    --color-background-accent-teal-bold-pressed: #{$color-t-100};
+    --color-background-accent-green-contrast-default: #{$color-g-500};
+    --color-background-accent-green-contrast-hovered: #{$color-g-400};
+    --color-background-accent-green-contrast-pressed: #{$color-g-300};
+    --color-background-accent-green-subtlest-default: #{$color-g-900};
+    --color-background-accent-green-subtlest-hovered: #{$color-g-800};
+    --color-background-accent-green-subtlest-pressed: #{$color-g-700};
+    --color-background-accent-green-subtle-default: #{$color-g-700};
+    --color-background-accent-green-subtle-hovered: #{$color-g-600};
+    --color-background-accent-green-subtle-pressed: #{$color-g-500};
+    --color-background-accent-green-bold-default: #{$color-g-300};
+    --color-background-accent-green-bold-hovered: #{$color-g-200};
+    --color-background-accent-green-bold-pressed: #{$color-g-100};
+    --color-background-accent-lime-contrast-default: #{$color-l-500};
+    --color-background-accent-lime-contrast-hovered: #{$color-l-400};
+    --color-background-accent-lime-contrast-pressed: #{$color-l-300};
+    --color-background-accent-lime-subtlest-default: #{$color-l-900};
+    --color-background-accent-lime-subtlest-hovered: #{$color-l-800};
+    --color-background-accent-lime-subtlest-pressed: #{$color-l-700};
+    --color-background-accent-lime-subtle-default: #{$color-l-700};
+    --color-background-accent-lime-subtle-hovered: #{$color-l-600};
+    --color-background-accent-lime-subtle-pressed: #{$color-l-500};
+    --color-background-accent-lime-bold-default: #{$color-l-300};
+    --color-background-accent-lime-bold-hovered: #{$color-l-200};
+    --color-background-accent-lime-bold-pressed: #{$color-l-100};
+    --color-background-accent-yellow-contrast-default: #{$color-y-500};
+    --color-background-accent-yellow-contrast-hovered: #{$color-y-400};
+    --color-background-accent-yellow-contrast-pressed: #{$color-y-300};
+    --color-background-accent-yellow-subtlest-default: #{$color-y-900};
+    --color-background-accent-yellow-subtlest-hovered: #{$color-y-800};
+    --color-background-accent-yellow-subtlest-pressed: #{$color-y-700};
+    --color-background-accent-yellow-subtle-default: #{$color-y-700};
+    --color-background-accent-yellow-subtle-hovered: #{$color-y-600};
+    --color-background-accent-yellow-subtle-pressed: #{$color-y-500};
+    --color-background-accent-yellow-bold-default: #{$color-y-300};
+    --color-background-accent-yellow-bold-hovered: #{$color-y-200};
+    --color-background-accent-yellow-bold-pressed: #{$color-y-100};
+    --color-background-accent-orange-contrast-default: #{$color-o-500};
+    --color-background-accent-orange-contrast-hovered: #{$color-o-400};
+    --color-background-accent-orange-contrast-pressed: #{$color-o-300};
+    --color-background-accent-orange-subtlest-default: #{$color-o-900};
+    --color-background-accent-orange-subtlest-hovered: #{$color-o-800};
+    --color-background-accent-orange-subtlest-pressed: #{$color-o-700};
+    --color-background-accent-orange-bold-default: #{$color-o-300};
+    --color-background-accent-orange-bold-hovered: #{$color-o-200};
+    --color-background-accent-orange-bold-pressed: #{$color-o-100};
+    --color-background-accent-orange-subtle-default: #{$color-o-700};
+    --color-background-accent-orange-subtle-hovered: #{$color-o-600};
+    --color-background-accent-orange-subtle-pressed: #{$color-o-500};
+    --color-background-accent-violet-contrast-default: #{$color-v-500};
+    --color-background-accent-violet-contrast-hovered: #{$color-v-400};
+    --color-background-accent-violet-contrast-pressed: #{$color-v-300};
+    --color-background-accent-violet-subtlest-default: #{$color-v-900};
+    --color-background-accent-violet-subtlest-hovered: #{$color-v-800};
+    --color-background-accent-violet-subtlest-pressed: #{$color-v-700};
+    --color-background-accent-violet-subtle-default: #{$color-v-700};
+    --color-background-accent-violet-subtle-hovered: #{$color-v-600};
+    --color-background-accent-violet-subtle-pressed: #{$color-v-500};
+    --color-background-accent-violet-bold-default: #{$color-v-300};
+    --color-background-accent-violet-bold-hovered: #{$color-v-200};
+    --color-background-accent-violet-bold-pressed: #{$color-v-100};
+    --color-background-accent-disabled: #{$color-nd-400};
+    --color-background-info-contrast-default: #{$color-b-500};
+    --color-background-info-contrast-hovered: #{$color-b-400};
+    --color-background-info-contrast-pressed: #{$color-b-300};
+    --color-background-success-contrast-default: #{$color-g-500};
+    --color-background-success-contrast-hovered: #{$color-g-400};
+    --color-background-success-contrast-pressed: #{$color-g-300};
+    --color-background-danger-contrast-default: #{$color-r-500};
+    --color-background-danger-contrast-hovered: #{$color-r-400};
+    --color-background-danger-contrast-pressed: #{$color-r-300};
+    --color-background-warning-contrast-default: #{$color-y-500};
+    --color-background-warning-contrast-hovered: #{$color-y-400};
+    --color-background-warning-contrast-pressed: #{$color-y-300};
+    --color-background-brand-asksuite-contrast-default: #{$color-a-500};
+    --color-background-brand-asksuite-contrast-hovered: #{$color-a-400};
+    --color-background-brand-asksuite-contrast-pressed: #{$color-a-300};
+    --color-background-brand-asksuite-subtler-default: #{$color-a-900};
+    --color-background-brand-asksuite-subtler-hovered: #{$color-a-800};
+    --color-background-brand-asksuite-subtler-pressed: #{$color-a-700};
+    --color-background-brand-asksuite-subtlest-default: #{$color-a-1000};
+    --color-background-brand-asksuite-subtlest-hovered: #{$color-a-900};
+    --color-background-brand-asksuite-subtlest-pressed: #{$color-a-800};
+    --color-background-brand-asksuite-bold-default: #{$color-a-400};
+    --color-background-brand-asksuite-bold-hovered: #{$color-a-300};
+    --color-background-brand-asksuite-bold-pressed: #{$color-a-200};
+    --color-background-brand-flow-subtlest-default: #{$color-f-1000};
+    --color-background-brand-flow-subtlest-hovered: #{$color-f-900};
+    --color-background-brand-flow-subtlest-pressed: #{$color-f-800};
+    --color-background-brand-flow-subtler-default: #{$color-f-900};
+    --color-background-brand-flow-subtler-hovered: #{$color-f-800};
+    --color-background-brand-flow-subtler-pressed: #{$color-f-700};
+    --color-background-brand-flow-contrast-default: #{$color-f-500};
+    --color-background-brand-flow-contrast-hovered: #{$color-f-400};
+    --color-background-brand-flow-contrast-pressed: #{$color-f-300};
+    --color-background-brand-flow-bold-default: #{$color-f-400};
+    --color-background-brand-flow-bold-hovered: #{$color-f-300};
+    --color-background-brand-flow-bold-pressed: #{$color-f-200};
+    --color-background-disabled: #{$color-nda-200};
+    --color-background-skeleton: #{$color-nda-200};
+    --color-background-bounding-box: #{$color-nda-0};
+    --color-background-selected-ask: #{$color-a-900};
+    --color-background-selected-flow: #{$color-f-900};
+    --color-background-alpha-subtlest-default: #{$color-nda-200};
+    --color-background-alpha-subtlest-hovered: #{$color-nda-400};
+    --color-background-alpha-subtlest-pressed: #{$color-nda-500};
+    --color-background-alpha-bolder-default: #{$color-nda-1600};
+    --color-background-alpha-bolder-hovered: #{$color-nda-1400};
+    --color-background-alpha-bolder-pressed: #{$color-nda-1200};
+    --color-background-alpha-contrast-default: #{$color-nda-1000};
+    --color-background-alpha-contrast-hovered: #{$color-nda-1200};
+    --color-background-alpha-contrast-pressed: #{$color-nda-1400};
+    --color-background-inverse-default: #{$color-nd-0};
+    --color-background-inverse-hovered: #{$color-nda-200};
+    --color-background-inverse-pressed: #{$color-nda-300};
+    --color-elevation-surface-sunken: #{$color-nd-0};
+    --color-elevation-surface-default: #{$color-nd-100};
+    --color-elevation-surface-hovered: #{$color-nd-200};
+    --color-elevation-surface-selected-ask: #{$color-a-1000};
+    --color-elevation-surface-selected-flow: #{$color-f-1000};
+    --color-elevation-surface-pressed: #{$color-nd-300};
+    --color-elevation-surface-raised: #{$color-nd-0};
+    --color-elevation-surface-overlay: #{$color-nd-0};
+    --color-divider-default: #{$color-nd-400};
+
+
+    --color-text-contrast: #{$color-nda-1500};
+    --color-text-subtlest: #{$color-nda-1000};
+    --color-text-disabled: #{$color-nda-0};
+    --color-text-inverse-contrast: #{$color-nd-0};
+    --color-skeleton: #{$color-nda-200};
+    --color-text-link-default: #{$color-b-500};
+    --color-background-accent-grey-subtle-default: #{$color-nd-500};
+    --color-border-matted-alpha-primary: #{$color-nd-0};
+    --color-elevation-surface-primary-default: #{$color-nd-100};
+    --color-icon-brand-asksuite-contrast: #{$color-a-600};
+
+    --color-elevation-surface-sunken-hovered: #{$color-nd-100};
+    --color-elevation-surface-selected: #{$color-a-100};
+    --color-elevation-shadow-raised: #{$color-nd-0};
+
+    --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};
+}