@ironsource/shared-ui 2.2.0-test.89 → 2.2.0-test.90

package/components/tooltip/v4/index.d.ts

@@ -4,9 +4,9 @@ declare const TooltipTypes: () => ({
         $: import("vue").ComponentInternalInstance;
         $data: {};
         $props: Partial<{
+            theme: string;
             header: string;
             text: string;
-            theme: string;
             testId: string;
             delay: number;
             triggers: import("../common/Tooltip.types").TooltipTriggers[];
@@ -20,6 +20,10 @@ declare const TooltipTypes: () => ({
             dontWrapDisabled: boolean;
             maxWidth: string;
         }> & Omit<Readonly<import("vue").ExtractPropTypes<{
+            theme: {
+                type: import("vue").PropType<string>;
+                default: string;
+            };
             header: {
                 type: import("vue").PropType<string>;
                 default: any;
@@ -28,10 +32,6 @@ declare const TooltipTypes: () => ({
                 type: import("vue").PropType<string>;
                 default: any;
             };
-            theme: {
-                type: import("vue").PropType<string>;
-                default: string;
-            };
             testId: {
                 type: import("vue").PropType<string>;
                 default: string;
@@ -82,7 +82,7 @@ declare const TooltipTypes: () => ({
             };
         }>> & {
             onShow?: () => any;
-        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "header" | "text" | "theme" | "testId" | "delay" | "triggers" | "forceShowWithTruncate" | "placement" | "disabled" | "distance" | "container" | "shown" | "autoHide" | "dontWrapDisabled" | "maxWidth">;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "theme" | "header" | "text" | "testId" | "delay" | "triggers" | "forceShowWithTruncate" | "placement" | "disabled" | "distance" | "container" | "shown" | "autoHide" | "dontWrapDisabled" | "maxWidth">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -97,6 +97,10 @@ declare const TooltipTypes: () => ({
         $emit: (event: "show") => void;
         $el: any;
         $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+            theme: {
+                type: import("vue").PropType<string>;
+                default: string;
+            };
             header: {
                 type: import("vue").PropType<string>;
                 default: any;
@@ -105,10 +109,6 @@ declare const TooltipTypes: () => ({
                 type: import("vue").PropType<string>;
                 default: any;
             };
-            theme: {
-                type: import("vue").PropType<string>;
-                default: string;
-            };
             testId: {
                 type: import("vue").PropType<string>;
                 default: string;
@@ -162,9 +162,9 @@ declare const TooltipTypes: () => ({
         }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
             show: () => void;
         }, string, {
+            theme: string;
             header: string;
             text: string;
-            theme: string;
             testId: string;
             delay: number;
             triggers: import("../common/Tooltip.types").TooltipTriggers[];
@@ -198,6 +198,10 @@ declare const TooltipTypes: () => ({
         $nextTick: typeof import("vue").nextTick;
         $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (args_0: R, args_1: R) => any : (...args: any) => any, options?: import("vue").WatchOptions<boolean>): import("vue").WatchStopHandle;
     } & Readonly<import("vue").ExtractPropTypes<{
+        theme: {
+            type: import("vue").PropType<string>;
+            default: string;
+        };
         header: {
             type: import("vue").PropType<string>;
             default: any;
@@ -206,10 +210,6 @@ declare const TooltipTypes: () => ({
             type: import("vue").PropType<string>;
             default: any;
         };
-        theme: {
-            type: import("vue").PropType<string>;
-            default: string;
-        };
         testId: {
             type: import("vue").PropType<string>;
             default: string;
@@ -265,6 +265,10 @@ declare const TooltipTypes: () => ({
     __isTeleport?: never;
     __isSuspense?: never;
 } & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+    theme: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
     header: {
         type: import("vue").PropType<string>;
         default: any;
@@ -273,10 +277,6 @@ declare const TooltipTypes: () => ({
         type: import("vue").PropType<string>;
         default: any;
     };
-    theme: {
-        type: import("vue").PropType<string>;
-        default: string;
-    };
     testId: {
         type: import("vue").PropType<string>;
         default: string;
@@ -330,9 +330,9 @@ declare const TooltipTypes: () => ({
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     show: () => void;
 }, string, {
+    theme: string;
     header: string;
     text: string;
-    theme: string;
     testId: string;
     delay: number;
     triggers: import("../common/Tooltip.types").TooltipTriggers[];

package/design-foundation.stories/colors/ColorsData.d.ts

@@ -116,3 +116,117 @@ export declare const colorPaletteLight: {
         b: string;
     };
 };
+export declare const colorPaletteDark: {
+    background: {
+        default: string;
+        paper: string;
+        'modal-elevation': string;
+        backdrop: string;
+        'paper-elevation-0': string;
+        inset: string;
+        'paper-elevation-1': string;
+        'paper-elevation-2': string;
+        'paper-elevation-3': string;
+        'paper-elevation-4': string;
+        'paper-elevation-5': string;
+        'paper-elevation-6': string;
+        'paper-elevation-7': string;
+        'paper-elevation-8': string;
+        'paper-elevation-9': string;
+    };
+    action: {
+        primary: string;
+        active: string;
+        hover: string;
+        selected: string;
+        disabled: string;
+        'disabled-background': string;
+        focus: string;
+        'outlined-border': string;
+    };
+    default: {
+        main: string;
+        light: string;
+        dark: string;
+        'outlined-border': string;
+        'contrast-text': string;
+        'button-contrast-text': string;
+    };
+    common: {
+        white: string;
+        black: string;
+        'inverse-white': string;
+        'inverse-black': string;
+        divider: string;
+        'divider-elevation-0': string;
+    };
+    text: {
+        primary: string;
+        secondary: string;
+        disabled: string;
+    };
+    primary: {
+        lighter: string;
+        light: string;
+        main: string;
+        'main-8-p': string;
+        'main-50-p': string;
+        dark: string;
+        darker: string;
+        'outlined-border': string;
+        'contrast-text': string;
+        'button-contrast-text': string;
+    };
+    info: {
+        lighter: string;
+        light: string;
+        main: string;
+        'main-8-p': string;
+        'main-50-p': string;
+        dark: string;
+        darker: string;
+        'outlined-border': string;
+        'contrast-text': string;
+        'button-contrast-text': string;
+    };
+    success: {
+        lighter: string;
+        light: string;
+        main: string;
+        'main-8-p': string;
+        'main-50-p': string;
+        dark: string;
+        darker: string;
+        'outlined-border': string;
+        'contrast-text': string;
+        'button-contrast-text': string;
+    };
+    warning: {
+        lighter: string;
+        light: string;
+        main: string;
+        'main-8-p': string;
+        'main-50-p': string;
+        dark: string;
+        darker: string;
+        'outlined-border': string;
+        'contrast-text': string;
+        'button-contrast-text': string;
+    };
+    error: {
+        lighter: string;
+        light: string;
+        main: string;
+        'main-8-p': string;
+        'main-50-p': string;
+        dark: string;
+        darker: string;
+        'outlined-border': string;
+        'contrast-text': string;
+        'button-contrast-text': string;
+    };
+    ab: {
+        a: string;
+        b: string;
+    };
+};

package/design-foundation.stories/colors/ColorsStoryWrapper.vue.d.ts

@@ -1,3 +1,30 @@
 import '../../style/v4/colors.scss';
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    theme?: 'light' | 'dark';
+}>, {
+    theme: string;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    theme?: 'light' | 'dark';
+}>, {
+    theme: string;
+}>>>, {
+    theme: 'light' | 'dark';
+}>;
 export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/index.d.ts

@@ -3385,6 +3385,7 @@ declare const _default: {
             default?(_: {}): any;
         };
     }))[];
+    setTheme: (mode: "light" | "dark") => void;
     RadioButton: {
         new (...args: any[]): {
             $: import("vue").ComponentInternalInstance;
@@ -10877,9 +10878,9 @@ declare const _default: {
             $: import("vue").ComponentInternalInstance;
             $data: {};
             $props: Partial<{
+                theme: string;
                 header: string;
                 text: string;
-                theme: string;
                 testId: string;
                 delay: number;
                 triggers: import("./components/tooltip/common/Tooltip.types").TooltipTriggers[];
@@ -10893,6 +10894,10 @@ declare const _default: {
                 dontWrapDisabled: boolean;
                 maxWidth: string;
             }> & Omit<Readonly<import("vue").ExtractPropTypes<{
+                theme: {
+                    type: import("vue").PropType<string>;
+                    default: string;
+                };
                 header: {
                     type: import("vue").PropType<string>;
                     default: any;
@@ -10901,10 +10906,6 @@ declare const _default: {
                     type: import("vue").PropType<string>;
                     default: any;
                 };
-                theme: {
-                    type: import("vue").PropType<string>;
-                    default: string;
-                };
                 testId: {
                     type: import("vue").PropType<string>;
                     default: string;
@@ -10955,7 +10956,7 @@ declare const _default: {
                 };
             }>> & {
                 onShow?: () => any;
-            } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "header" | "text" | "theme" | "testId" | "delay" | "triggers" | "forceShowWithTruncate" | "placement" | "disabled" | "distance" | "container" | "shown" | "autoHide" | "dontWrapDisabled" | "maxWidth">;
+            } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "theme" | "header" | "text" | "testId" | "delay" | "triggers" | "forceShowWithTruncate" | "placement" | "disabled" | "distance" | "container" | "shown" | "autoHide" | "dontWrapDisabled" | "maxWidth">;
             $attrs: {
                 [x: string]: unknown;
             };
@@ -10970,6 +10971,10 @@ declare const _default: {
             $emit: (event: "show") => void;
             $el: any;
             $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+                theme: {
+                    type: import("vue").PropType<string>;
+                    default: string;
+                };
                 header: {
                     type: import("vue").PropType<string>;
                     default: any;
@@ -10978,10 +10983,6 @@ declare const _default: {
                     type: import("vue").PropType<string>;
                     default: any;
                 };
-                theme: {
-                    type: import("vue").PropType<string>;
-                    default: string;
-                };
                 testId: {
                     type: import("vue").PropType<string>;
                     default: string;
@@ -11035,9 +11036,9 @@ declare const _default: {
             }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
                 show: () => void;
             }, string, {
+                theme: string;
                 header: string;
                 text: string;
-                theme: string;
                 testId: string;
                 delay: number;
                 triggers: import("./components/tooltip/common/Tooltip.types").TooltipTriggers[];
@@ -11071,6 +11072,10 @@ declare const _default: {
             $nextTick: typeof import("vue").nextTick;
             $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (args_0: R, args_1: R) => any : (...args: any) => any, options?: import("vue").WatchOptions<boolean>): import("vue").WatchStopHandle;
         } & Readonly<import("vue").ExtractPropTypes<{
+            theme: {
+                type: import("vue").PropType<string>;
+                default: string;
+            };
             header: {
                 type: import("vue").PropType<string>;
                 default: any;
@@ -11079,10 +11084,6 @@ declare const _default: {
                 type: import("vue").PropType<string>;
                 default: any;
             };
-            theme: {
-                type: import("vue").PropType<string>;
-                default: string;
-            };
             testId: {
                 type: import("vue").PropType<string>;
                 default: string;
@@ -11138,6 +11139,10 @@ declare const _default: {
         __isTeleport?: never;
         __isSuspense?: never;
     } & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+        theme: {
+            type: import("vue").PropType<string>;
+            default: string;
+        };
         header: {
             type: import("vue").PropType<string>;
             default: any;
@@ -11146,10 +11151,6 @@ declare const _default: {
             type: import("vue").PropType<string>;
             default: any;
         };
-        theme: {
-            type: import("vue").PropType<string>;
-            default: string;
-        };
         testId: {
             type: import("vue").PropType<string>;
             default: string;
@@ -11203,9 +11204,9 @@ declare const _default: {
     }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
         show: () => void;
     }, string, {
+        theme: string;
         header: string;
         text: string;
-        theme: string;
         testId: string;
         delay: number;
         triggers: import("./components/tooltip/common/Tooltip.types").TooltipTriggers[];
@@ -11231,9 +11232,9 @@ declare const _default: {
             $: import("vue").ComponentInternalInstance;
             $data: {};
             $props: Partial<{
+                theme: string;
                 header: string;
                 text: string;
-                theme: string;
                 testId: string;
                 delay: number;
                 triggers: import("./components/tooltip/common/Tooltip.types").TooltipTriggers[];
@@ -11247,6 +11248,10 @@ declare const _default: {
                 dontWrapDisabled: boolean;
                 maxWidth: string;
             }> & Omit<Readonly<import("vue").ExtractPropTypes<{
+                theme: {
+                    type: import("vue").PropType<string>;
+                    default: string;
+                };
                 header: {
                     type: import("vue").PropType<string>;
                     default: any;
@@ -11255,10 +11260,6 @@ declare const _default: {
                     type: import("vue").PropType<string>;
                     default: any;
                 };
-                theme: {
-                    type: import("vue").PropType<string>;
-                    default: string;
-                };
                 testId: {
                     type: import("vue").PropType<string>;
                     default: string;
@@ -11309,7 +11310,7 @@ declare const _default: {
                 };
             }>> & {
                 onShow?: () => any;
-            } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "header" | "text" | "theme" | "testId" | "delay" | "triggers" | "forceShowWithTruncate" | "placement" | "disabled" | "distance" | "container" | "shown" | "autoHide" | "dontWrapDisabled" | "maxWidth">;
+            } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "theme" | "header" | "text" | "testId" | "delay" | "triggers" | "forceShowWithTruncate" | "placement" | "disabled" | "distance" | "container" | "shown" | "autoHide" | "dontWrapDisabled" | "maxWidth">;
             $attrs: {
                 [x: string]: unknown;
             };
@@ -11324,6 +11325,10 @@ declare const _default: {
             $emit: (event: "show") => void;
             $el: any;
             $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+                theme: {
+                    type: import("vue").PropType<string>;
+                    default: string;
+                };
                 header: {
                     type: import("vue").PropType<string>;
                     default: any;
@@ -11332,10 +11337,6 @@ declare const _default: {
                     type: import("vue").PropType<string>;
                     default: any;
                 };
-                theme: {
-                    type: import("vue").PropType<string>;
-                    default: string;
-                };
                 testId: {
                     type: import("vue").PropType<string>;
                     default: string;
@@ -11389,9 +11390,9 @@ declare const _default: {
             }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
                 show: () => void;
             }, string, {
+                theme: string;
                 header: string;
                 text: string;
-                theme: string;
                 testId: string;
                 delay: number;
                 triggers: import("./components/tooltip/common/Tooltip.types").TooltipTriggers[];
@@ -11425,6 +11426,10 @@ declare const _default: {
             $nextTick: typeof import("vue").nextTick;
             $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (args_0: R, args_1: R) => any : (...args: any) => any, options?: import("vue").WatchOptions<boolean>): import("vue").WatchStopHandle;
         } & Readonly<import("vue").ExtractPropTypes<{
+            theme: {
+                type: import("vue").PropType<string>;
+                default: string;
+            };
             header: {
                 type: import("vue").PropType<string>;
                 default: any;
@@ -11433,10 +11438,6 @@ declare const _default: {
                 type: import("vue").PropType<string>;
                 default: any;
             };
-            theme: {
-                type: import("vue").PropType<string>;
-                default: string;
-            };
             testId: {
                 type: import("vue").PropType<string>;
                 default: string;
@@ -11492,6 +11493,10 @@ declare const _default: {
         __isTeleport?: never;
         __isSuspense?: never;
     } & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+        theme: {
+            type: import("vue").PropType<string>;
+            default: string;
+        };
         header: {
             type: import("vue").PropType<string>;
             default: any;
@@ -11500,10 +11505,6 @@ declare const _default: {
             type: import("vue").PropType<string>;
             default: any;
         };
-        theme: {
-            type: import("vue").PropType<string>;
-            default: string;
-        };
         testId: {
             type: import("vue").PropType<string>;
             default: string;
@@ -11557,9 +11558,9 @@ declare const _default: {
     }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
         show: () => void;
     }, string, {
+        theme: string;
         header: string;
         text: string;
-        theme: string;
         testId: string;
         delay: number;
         triggers: import("./components/tooltip/common/Tooltip.types").TooltipTriggers[];

package/index.js

@@ -1,4 +1,4 @@
-import './Text.vue_vue_type_style_index_0_scoped_94bd409b_lang.css';
+import './AppTrigger.vue_vue_type_style_index_0_scoped_121aac8b_lang.css';
 import { AppTriggerTypes as eo } from "./components/appTrigger/index.js";
 import { AutocompleteDropdownTypes as mo } from "./components/autocompleteDropdown/index.js";
 import { MenuItemTypes as ao } from "./components/menuItem/index.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ironsource/shared-ui",
-  "version": "2.2.0-test.89",
+  "version": "2.2.0-test.90",
   "engines": {
     "npm": ">=7.0.0",
     "node": ">=16.0.0"

package/style/v4/border-radius.scss

@@ -1,8 +1,8 @@
-.light-theme-v4 {
+:root {
     --border-radius-xs: 2px;
     --border-radius-sm: 4px;
     --border-radius-md: 6px;
     --border-radius-lg: 8px;
     --border-radius-xl: 16px;
     --border-radius-full: 100px;
-}
+}

package/style/v4/colors.scss

@@ -1,4 +1,5 @@
 .light-theme-v4 {
+  color: var(--text-primary);
   --background-default: #FFFFFF;
   --background-paper: #FCFCFC;
   --background-modal-elevation: #FFFFFF;
@@ -104,3 +105,107 @@
   --ab-a: #FFC134;
   --ab-b: #4F4FF5;
 }
+
+.dark-theme-v4 {
+  color: var(--text-primary);
+  --background-default: #131313;
+  --background-paper: #191919;
+  --background-modal-elevation: #1f1f1f;
+  --background-backdrop: rgba(0, 0, 0, 0.5);
+  --background-paper-elevation-0: #222222;
+  --background-inset: #222222;
+  --background-paper-elevation-1: #2a2a2a;
+  --background-paper-elevation-2: #313131;
+  --background-paper-elevation-3: #3a3a3a;
+  --background-paper-elevation-4: #484848;
+  --background-paper-elevation-5: #606060;
+  --background-paper-elevation-6: #707070;
+  --background-paper-elevation-7: #848484;
+  --background-paper-elevation-8: #909090;
+  --background-paper-elevation-9: #a0a0a0;
+
+  --action-primary: #0a6ec8;
+  --action-active: #7b7b7b;
+  --action-hover: rgba(255, 255, 255, 0.07);
+  --action-selected: rgba(255, 255, 255, 0.12);
+  --action-disabled: #3a3a3a;
+  --action-disabled-background: rgba(255, 255, 255, 0.04);
+  --action-focus: rgba(255, 255, 255, 0.16);
+  --action-outlined-border: rgba(255, 255, 255, 0.5);
+
+  --default-light: rgba(255, 255, 255, 0.10);
+  --default-main: transparent;
+  --default-dark: rgba(255, 255, 255, 0.05);
+  --default-outlined-border: rgba(255, 255, 255, 0.5);
+  --default-contrast-text: #eeeeee;
+  --default-button-contrast-text: #eeeeee;
+
+  --common-white: #FFFFFF;
+  --common-black: #000000;
+  --common-inverse-white: #000000;
+  --common-inverse-black: #FFFFFF;
+  --common-divider: rgba(255, 255, 255, 0.08);
+  --common-divider-elevation-0: rgba(255, 255, 255, 0.10);
+
+  --text-primary: #eeeeee;
+  --text-secondary: #b4b4b4;
+  --text-disabled: #4b4b4b;
+
+  --primary-lighter: #012348;
+  --primary-light: #0d3868;
+  --primary-main: #0a6ec8;
+  --primary-main-8-p: rgba(10, 110, 200, 0.08);
+  --primary-main-50-p: rgba(10, 110, 200, 0.50);
+  --primary-dark: #0860b0;
+  --primary-darker: #075099;
+  --primary-outlined-border: #0a6ec8;
+  --primary-contrast-text: #c2e2ff;
+  --primary-button-contrast-text: #FFFFFF;
+
+  --info-lighter: #1a1f5e;
+  --info-light: #2a3487;
+  --info-main: #5472e4;
+  --info-main-8-p: rgba(84, 114, 228, 0.08);
+  --info-main-50-p: rgba(84, 114, 228, 0.50);
+  --info-dark: #4861cc;
+  --info-darker: #3b51b8;
+  --info-outlined-border: #5472e4;
+  --info-contrast-text: #c5d4ff;
+  --info-button-contrast-text: #FFFFFF;
+
+  --success-lighter: #0b3e2b;
+  --success-light: #1a6a47;
+  --success-main: #30a46c;
+  --success-main-8-p: rgba(48, 164, 108, 0.08);
+  --success-main-50-p: rgba(48, 164, 108, 0.50);
+  --success-dark: #2a9060;
+  --success-darker: #237c51;
+  --success-outlined-border: #30a46c;
+  --success-contrast-text: #b3f0d2;
+  --success-button-contrast-text: #FFFFFF;
+
+  --warning-lighter: #4a2e00;
+  --warning-light: #7a4c00;
+  --warning-main: #e5a200;
+  --warning-main-8-p: rgba(255, 197, 61, 0.08);
+  --warning-main-50-p: rgba(255, 197, 61, 0.50);
+  --warning-dark: #ffc53d;
+  --warning-darker: #ffcc50;
+  --warning-outlined-border: #e5a200;
+  --warning-contrast-text: #fff3c6;
+  --warning-button-contrast-text: rgba(38, 27, 0, 1);
+
+  --error-lighter: #3b0d11;
+  --error-light: #611623;
+  --error-main: #e5484d;
+  --error-main-8-p: rgba(229, 72, 77, 0.08);
+  --error-main-50-p: rgba(229, 72, 77, 0.50);
+  --error-dark: #ec5d5e;
+  --error-darker: #d13d42;
+  --error-outlined-border: #e5484d;
+  --error-contrast-text: #ffc9cc;
+  --error-button-contrast-text: #FFFFFF;
+
+  --ab-a: #FFC134;
+  --ab-b: #4F4FF5;
+}