asksuite-citrus 3.14.0-beta.10 → 3.14.0-beta.12

package/lib/components/avatar/avatar.component.d.ts

@@ -17,6 +17,7 @@ export declare class AvatarComponent {
     statusTitle: string;
     large?: boolean;
     selected?: boolean;
+    notSelect: boolean;
     hover?: boolean;
     isRobot?: boolean;
     isDisable?: boolean;
@@ -26,5 +27,5 @@ export declare class AvatarComponent {
     protected _initials: string;
     get image(): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<AvatarComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AvatarComponent, "ask-avatar", never, { "src": { "alias": "src"; "required": false; }; "status": { "alias": "status"; "required": false; }; "background": { "alias": "background"; "required": false; }; "textColor": { "alias": "textColor"; "required": false; }; "avatarTitle": { "alias": "avatarTitle"; "required": false; }; "avatarTitlePosition": { "alias": "avatarTitlePosition"; "required": false; }; "statusTitle": { "alias": "statusTitle"; "required": false; }; "large": { "alias": "large"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "hover": { "alias": "hover"; "required": false; }; "isRobot": { "alias": "isRobot"; "required": false; }; "isDisable": { "alias": "isDisable"; "required": false; }; "name": { "alias": "name"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AvatarComponent, "ask-avatar", never, { "src": { "alias": "src"; "required": false; }; "status": { "alias": "status"; "required": false; }; "background": { "alias": "background"; "required": false; }; "textColor": { "alias": "textColor"; "required": false; }; "avatarTitle": { "alias": "avatarTitle"; "required": false; }; "avatarTitlePosition": { "alias": "avatarTitlePosition"; "required": false; }; "statusTitle": { "alias": "statusTitle"; "required": false; }; "large": { "alias": "large"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "notSelect": { "alias": "notSelect"; "required": false; }; "hover": { "alias": "hover"; "required": false; }; "isRobot": { "alias": "isRobot"; "required": false; }; "isDisable": { "alias": "isDisable"; "required": false; }; "name": { "alias": "name"; "required": false; }; }, {}, never, never, false, never>;
 }

package/lib/services/storage/storage-util.service.d.ts

@@ -0,0 +1,10 @@
+import * as i0 from "@angular/core";
+export declare class StorageUtilService<T> {
+    private localstorage;
+    constructor(localstorage: Storage);
+    getItem(key: string): T;
+    setItem(key: string, value: T): void;
+    removeItem(key: string): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<StorageUtilService<any>, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<StorageUtilService<any>>;
+}

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

@@ -0,0 +1,13 @@
+import { StorageUtilService } from "../storage/storage-util.service";
+import * as i0 from "@angular/core";
+export declare class ThemeService {
+    private readonly storageUtilService;
+    theme: 'dark' | 'light';
+    themeKey: string;
+    constructor(storageUtilService: StorageUtilService<'dark' | 'light'>);
+    getTheme(): "dark" | "light";
+    setTheme(theme: 'dark' | 'light'): void;
+    private saveTheme;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ThemeService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<ThemeService>;
+}

package/package.json

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

package/public-api.d.ts

@@ -28,6 +28,7 @@ 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,354 @@
+@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-100};
+    --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-700};
+    --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};
+    --color-background-selected-ask: #{$color-o-900};
+    --color-border-subtle: #{$color-nda-1000};
+    --color-Y200: #{$color-Y200};
+}