@ironsource/shared-ui 2.2.0-rc.52 → 2.2.0-rc.55

package/index.d.ts

@@ -3385,6 +3385,7 @@ declare const _default: {
             default?(_: {}): any;
         };
     }))[];
+    setTheme: (mode: "light" | "dark", version?: "v3" | "v4") => 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 './Menu.vue_vue_type_style_index_0_scoped_eb057818_lang.css';
+import './AutocompleteDropdown.vue_vue_type_style_index_0_scoped_214ddaf4_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-rc.52",
+  "version": "2.2.0-rc.55",
   "engines": {
     "npm": ">=7.0.0",
     "node": ">=16.0.0"

package/style/v3/theme-bridge.css

@@ -0,0 +1 @@
+:root,.light-theme-v3{--v3-white: #ffffff;--v3-static-white: #ffffff;--v3-black-200: #696a6b;--v3-black-500: #53575b;--v3-black-900: #41454d;--v3-secondary-bg: #53575b;--v3-secondary-bg-hover: #41454d;--v3-light-50: #f7f8f9;--v3-light-100: #f1f3f4;--v3-light-200: #edeff0;--v3-light-300: #e5e7e9;--v3-light-400: #dddfe1;--v3-light-500: #d2d5d8;--v3-light-600: #b7bbc0;--v3-light-700: #a9afb4;--v3-light-800: #8e959d;--v3-light-900: #7b838c;--v3-light-1000: #626970;--v3-primary-100: #e2eeff;--v3-primary-200: #c9dfff;--v3-primary-300: #96c0ff;--v3-primary-400: #68a5ff;--v3-primary-500: #3083ff;--v3-primary-700: #005be2;--v3-positive-500: #22c891;--v3-neutral-500: #ffb424;--v3-negative-100: #ffefee;--v3-negative-500: #ff6a63;--v3-negative-700: #da564f;--v3-tooltip-bg: #41454d;--v3-tooltip-text: #ffffff;--v3-tab-disabled-text: rgba(142, 149, 157, 0.6);--v3-toggle-track: rgba(210, 213, 216, 0.7);--v3-search-bg: #ffffff;--v3-switch-selected: #ffffff;--v3-input-shadow-color: #3083ff4d;--v3-backdrop-color: rgba(0, 0, 0, 0.56)}.light-theme-v3{color:var(--v3-black-500)}.dark-theme-v3{color:var(--v3-black-500);--v3-white: #191919;--v3-static-white: #ffffff;--v3-black-200: #b4b4b4;--v3-black-500: #eeeeee;--v3-black-900: #eeeeee;--v3-secondary-bg: #3a3a3a;--v3-secondary-bg-hover: #484848;--v3-light-50: #222222;--v3-light-100: #2a2a2a;--v3-light-200: rgba(255, 255, 255, 0.08);--v3-light-300: rgba(255, 255, 255, 0.08);--v3-light-400: rgba(255, 255, 255, 0.08);--v3-light-500: rgba(255, 255, 255, 0.12);--v3-light-600: rgba(255, 255, 255, 0.3);--v3-light-700: rgba(255, 255, 255, 0.5);--v3-light-800: #b4b4b4;--v3-light-900: #b4b4b4;--v3-light-1000: #b4b4b4;--v3-primary-100: #012348;--v3-primary-200: #0d3868;--v3-primary-300: #0d3868;--v3-primary-400: #0a6ec8;--v3-primary-500: #0a6ec8;--v3-primary-700: #0860b0;--v3-positive-500: #30a46c;--v3-neutral-500: #ffc53d;--v3-negative-100: #3b0d11;--v3-negative-500: #e5484d;--v3-negative-700: #ec5d5e;--v3-tooltip-bg: #2a2a2a;--v3-tooltip-text: #eeeeee;--v3-tab-disabled-text: rgba(180, 180, 180, 0.6);--v3-toggle-track: rgba(255, 255, 255, 0.16);--v3-search-bg: #2a2a2a;--v3-switch-selected: #484848;--v3-input-shadow-color: rgba(10, 110, 200, 0.3);--v3-backdrop-color: rgba(0, 0, 0, 0.5)}/*# sourceMappingURL=theme-bridge.css.map */

package/style/v3/theme-bridge.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["theme-bridge.scss"],"names":[],"mappings":"AAKA,sBAEE,oBACA,2BACA,wBACA,wBACA,wBACA,2BACA,iCACA,uBACA,wBACA,wBACA,wBACA,wBACA,wBACA,wBACA,wBACA,wBACA,wBACA,yBACA,0BACA,0BACA,0BACA,0BACA,0BACA,0BACA,2BACA,0BACA,2BACA,2BACA,2BACA,yBACA,2BACA,iDACA,4CACA,wBACA,8BACA,mCACA,yCAMF,gBACE,0BAGF,eACE,0BACA,oBACA,2BACA,wBACA,wBACA,wBACA,2BACA,iCACA,uBACA,wBACA,0CACA,0CACA,0CACA,0CACA,yCACA,yCACA,wBACA,wBACA,yBACA,0BACA,0BACA,0BACA,0BACA,0BACA,0BACA,2BACA,0BACA,2BACA,2BACA,2BACA,yBACA,2BACA,iDACA,6CACA,wBACA,8BACA,iDACA","file":"theme-bridge.css"}

package/style/v3/theme-bridge.scss

@@ -0,0 +1,93 @@
+// Runtime theming bridge for v3 (IronSrc) components.
+// Light values MUST equal src/style/styleguide.scss (no light-mode change).
+// Dark values are drawn from the v4 dark palette (src/style/v4/colors.scss) by semantic role.
+// Light is the default at :root so ungated v3 usage stays light (backward compatible).
+
+:root,
+.light-theme-v3 {
+  --v3-white: #ffffff;
+  --v3-static-white: #ffffff;
+  --v3-black-200: #696a6b;
+  --v3-black-500: #53575b;
+  --v3-black-900: #41454d;
+  --v3-secondary-bg: #53575b;
+  --v3-secondary-bg-hover: #41454d;
+  --v3-light-50: #f7f8f9;
+  --v3-light-100: #f1f3f4;
+  --v3-light-200: #edeff0;
+  --v3-light-300: #e5e7e9;
+  --v3-light-400: #dddfe1;
+  --v3-light-500: #d2d5d8;
+  --v3-light-600: #b7bbc0;
+  --v3-light-700: #a9afb4;
+  --v3-light-800: #8e959d;
+  --v3-light-900: #7b838c;
+  --v3-light-1000: #626970;
+  --v3-primary-100: #e2eeff;
+  --v3-primary-200: #c9dfff;
+  --v3-primary-300: #96c0ff;
+  --v3-primary-400: #68a5ff;
+  --v3-primary-500: #3083ff;
+  --v3-primary-700: #005be2;
+  --v3-positive-500: #22c891;
+  --v3-neutral-500: #ffb424;
+  --v3-negative-100: #ffefee;
+  --v3-negative-500: #ff6a63;
+  --v3-negative-700: #da564f;
+  --v3-tooltip-bg: #41454d;
+  --v3-tooltip-text: #ffffff;
+  --v3-tab-disabled-text: rgba(142, 149, 157, 0.6);
+  --v3-toggle-track: rgba(210, 213, 216, 0.7);
+  --v3-search-bg: #ffffff;
+  --v3-switch-selected: #ffffff;
+  --v3-input-shadow-color: #3083ff4d;
+  --v3-backdrop-color: rgba(0, 0, 0, 0.56);
+}
+
+// Base text color so elements without an explicit `color` follow the theme
+// (dark text on light, light text on dark). Scoped to the class — not :root —
+// so it only applies inside a v3 theme wrapper.
+.light-theme-v3 {
+  color: var(--v3-black-500);
+}
+
+.dark-theme-v3 {
+  color: var(--v3-black-500);
+  --v3-white: #191919;
+  --v3-static-white: #ffffff;
+  --v3-black-200: #b4b4b4;
+  --v3-black-500: #eeeeee;
+  --v3-black-900: #eeeeee;
+  --v3-secondary-bg: #3a3a3a;
+  --v3-secondary-bg-hover: #484848;
+  --v3-light-50: #222222;
+  --v3-light-100: #2a2a2a;
+  --v3-light-200: rgba(255, 255, 255, 0.08);
+  --v3-light-300: rgba(255, 255, 255, 0.08);
+  --v3-light-400: rgba(255, 255, 255, 0.08);
+  --v3-light-500: rgba(255, 255, 255, 0.12);
+  --v3-light-600: rgba(255, 255, 255, 0.3);
+  --v3-light-700: rgba(255, 255, 255, 0.5);
+  --v3-light-800: #b4b4b4;
+  --v3-light-900: #b4b4b4;
+  --v3-light-1000: #b4b4b4;
+  --v3-primary-100: #012348;
+  --v3-primary-200: #0d3868;
+  --v3-primary-300: #0d3868; // same as --v3-primary-200 in dark
+  --v3-primary-400: #0a6ec8; // same as --v3-primary-500 in dark
+  --v3-primary-500: #0a6ec8;
+  --v3-primary-700: #0860b0;
+  --v3-positive-500: #30a46c;
+  --v3-neutral-500: #ffc53d;
+  --v3-negative-100: #3b0d11;
+  --v3-negative-500: #e5484d;
+  --v3-negative-700: #ec5d5e;
+  --v3-tooltip-bg: #2a2a2a;
+  --v3-tooltip-text: #eeeeee;
+  --v3-tab-disabled-text: rgba(180, 180, 180, 0.6);
+  --v3-toggle-track: rgba(255, 255, 255, 0.16);
+  --v3-search-bg: #2a2a2a;
+  --v3-switch-selected: #484848;
+  --v3-input-shadow-color: rgba(10, 110, 200, 0.3);
+  --v3-backdrop-color: rgba(0, 0, 0, 0.5);
+}

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;
+}

package/style/v4/elevations.scss

@@ -8,3 +8,14 @@
   --elevation-xxxl: 0px 19px 32px 2px rgba(44, 45, 45, 0.14);
   --elevation-sl: 0px 27px 27px 2px rgba(44, 45, 45, 0.14);
 }
+
+.dark-theme-v4 {
+  --elevation-xs: 0px 1px 2px rgba(0, 0, 0, 0.15);
+  --elevation-sm: 0px 1px 2px rgba(0, 0, 0, 0.20), 0px 1px 3px rgba(0, 0, 0, 0.30);
+  --elevation-md: 0px 4px 8px -2px rgba(0, 0, 0, 0.35);
+  --elevation-lg: 0px 12px 16px -4px rgba(0, 0, 0, 0.30);
+  --elevation-xl: 0px 8px 8px -4px rgba(0, 0, 0, 0.15), 0px 20px 24px -6px rgba(0, 0, 0, 0.30);
+  --elevation-xxl: 0px 24px 48px -12px rgba(0, 0, 0, 0.50);
+  --elevation-xxxl: 0px 19px 32px 2px rgba(0, 0, 0, 0.40);
+  --elevation-sl: 0px 27px 27px 2px rgba(0, 0, 0, 0.40);
+}

package/style/v4/grid.css

@@ -1 +1 @@
-.light-theme-v4{--background-default: #FFFFFF;--background-paper: #FCFCFC;--background-modal-elevation: #FFFFFF;--background-backdrop: #00000045;--background-paper-elevation-0: #F9F9F9;--background-paper-elevation-1: #F0F0F0;--background-paper-elevation-2: #E8E8E8;--background-paper-elevation-3: #E0E0E0;--background-paper-elevation-4: #D9D9D9;--background-paper-elevation-5: #CECECE;--background-paper-elevation-6: #BBBBBB;--background-paper-elevation-7: #8D8D8D;--background-paper-elevation-8: #838383;--background-paper-elevation-9: #646464;--background-inset: #F0F0F0;--action-primary: #202020;--action-active: #838383;--action-hover: #0000000F;--action-selected: #E8E8E8;--action-disabled: #E0E0E0;--action-disabled-background: #F0F0F0;--action-focus: #E8E8E8;--action-outlined-border: #BBBBBB;--default-main: #E8E8E8;--default-lighter: #F9F9F9;--default-light: #F0F0F0;--default-dark: #E0E0E0;--default-darker: #D9D9D9;--default-contrast-text: #202020;--default-outlined-border: #CECECE;--default-main-8-p: #81818114;--default-main-50-p: #81818180;--default-button-contrast-text: #000000;--common-white: #FFFFFF;--common-black: #000000;--common-inverse-white: #FFFFFF;--common-inverse-black: #000000;--common-divider: #E8E8E8;--common-divider-elevation-0: #E8E8E8;--text-primary: #202020;--text-secondary: #646464;--text-disabled: #838383;--primary-lighter: #ECF5FF;--primary-light: #CBE2FE;--primary-main: #0A6EC8;--primary-main-8-p: #0A6EC814;--primary-main-50-p: #0A6EC880;--primary-dark: #0060B8;--primary-darker: #0F70CB;--primary-outlined-border: #9EC4F1;--primary-contrast-text: #0E345B;--primary-button-contrast-text: #FFFFFF;--info-lighter: #EDF2FE;--info-light: #D2DEFF;--info-main: #3E63DD;--info-main-8-p: #3E63DD14;--info-main-50-p: #3E63DD80;--info-dark: #3358D4;--info-darker: #3A5BC7;--info-outlined-border: #ABBDF9;--info-contrast-text: #1F2D5C;--info-button-contrast-text: #FFFFFF;--success-lighter: #E6F6EB;--success-light: #C4E8D1;--success-main: #30A46C;--success-main-8-p: #30A46C14;--success-main-50-p: #30A46C80;--success-dark: #2B9A66;--success-darker: #218358;--success-outlined-border: #8ECEAA;--success-contrast-text: #193B2D;--success-button-contrast-text: #FFFFFF;--warning-lighter: #FFF7C2;--warning-light: #FBE577;--warning-main: #FFC53D;--warning-main-8-p: #FFC53D14;--warning-main-50-p: #FFC53D80;--warning-dark: #FFBA18;--warning-darker: #AB6400;--warning-outlined-border: #E9C162;--warning-contrast-text: #4F3422;--warning-button-contrast-text: #000000;--error-lighter: #FEEBEC;--error-light: #FFCDCE;--error-main: #E5484D;--error-main-8-p: #E5484D14;--error-main-50-p: #E5484D80;--error-dark: #DC3E42;--error-darker: #CE2C31;--error-outlined-border: #F4A9AA;--error-contrast-text: #641723;--error-button-contrast-text: #FFFFFF;--ab-a: #FFC134;--ab-b: #4F4FF5}.light-theme-v4{--border-radius-xs: 2px;--border-radius-sm: 4px;--border-radius-md: 6px;--border-radius-lg: 8px;--border-radius-xl: 16px;--border-radius-full: 100px}.light-theme-v4{--elevation-xs: 0px 1px 2px rgba(16, 24, 40, 0.05);--elevation-sm: 0px 1px 2px rgba(16, 24, 40, 0.06), 0px 1px 3px rgba(16, 24, 40, 0.1);--elevation-md: 0px 4px 8px -2px rgba(16, 24, 40, 0.12);--elevation-lg: 0px 12px 16px -4px rgba(16, 24, 40, 0.08);--elevation-xl: 0px 8px 8px -4px rgba(16, 24, 40, 0.03), 0px 20px 24px -6px rgba(16, 24, 40, 0.08);--elevation-xxl: 0px 24px 48px -12px rgba(16, 24, 40, 0.18);--elevation-xxxl: 0px 19px 32px 2px rgba(44, 45, 45, 0.14);--elevation-sl: 0px 27px 27px 2px rgba(44, 45, 45, 0.14)}.light-theme-v4{--spacing-tokenset: 0px;--spacing-25: 2px;--spacing-50: 4px;--spacing-75: 6px;--spacing-100: 8px;--spacing-125: 10px;--spacing-150: 12px;--spacing-200: 16px;--spacing-250: 20px;--spacing-300: 24px;--spacing-350: 28px;--spacing-400: 32px;--spacing-500: 40px;--spacing-600: 48px;--spacing-700: 56px;--spacing-800: 64px;--spacing-900: 72px;--spacing-1000: 80px}/*# sourceMappingURL=grid.css.map */
+.light-theme-v4{color:var(--text-primary);--background-default: #FFFFFF;--background-paper: #FCFCFC;--background-modal-elevation: #FFFFFF;--background-backdrop: #00000045;--background-paper-elevation-0: #F9F9F9;--background-paper-elevation-1: #F0F0F0;--background-paper-elevation-2: #E8E8E8;--background-paper-elevation-3: #E0E0E0;--background-paper-elevation-4: #D9D9D9;--background-paper-elevation-5: #CECECE;--background-paper-elevation-6: #BBBBBB;--background-paper-elevation-7: #8D8D8D;--background-paper-elevation-8: #838383;--background-paper-elevation-9: #646464;--background-inset: #F0F0F0;--action-primary: #202020;--action-active: #838383;--action-hover: #0000000F;--action-selected: #E8E8E8;--action-disabled: #E0E0E0;--action-disabled-background: #F0F0F0;--action-focus: #E8E8E8;--action-outlined-border: #BBBBBB;--default-main: #E8E8E8;--default-lighter: #F9F9F9;--default-light: #F0F0F0;--default-dark: #E0E0E0;--default-darker: #D9D9D9;--default-contrast-text: #202020;--default-outlined-border: #CECECE;--default-main-8-p: #81818114;--default-main-50-p: #81818180;--default-button-contrast-text: #000000;--common-white: #FFFFFF;--common-black: #000000;--common-inverse-white: #FFFFFF;--common-inverse-black: #000000;--common-divider: #E8E8E8;--common-divider-elevation-0: #E8E8E8;--text-primary: #202020;--text-secondary: #646464;--text-disabled: #838383;--primary-lighter: #ECF5FF;--primary-light: #CBE2FE;--primary-main: #0A6EC8;--primary-main-8-p: #0A6EC814;--primary-main-50-p: #0A6EC880;--primary-dark: #0060B8;--primary-darker: #0F70CB;--primary-outlined-border: #9EC4F1;--primary-contrast-text: #0E345B;--primary-button-contrast-text: #FFFFFF;--info-lighter: #EDF2FE;--info-light: #D2DEFF;--info-main: #3E63DD;--info-main-8-p: #3E63DD14;--info-main-50-p: #3E63DD80;--info-dark: #3358D4;--info-darker: #3A5BC7;--info-outlined-border: #ABBDF9;--info-contrast-text: #1F2D5C;--info-button-contrast-text: #FFFFFF;--success-lighter: #E6F6EB;--success-light: #C4E8D1;--success-main: #30A46C;--success-main-8-p: #30A46C14;--success-main-50-p: #30A46C80;--success-dark: #2B9A66;--success-darker: #218358;--success-outlined-border: #8ECEAA;--success-contrast-text: #193B2D;--success-button-contrast-text: #FFFFFF;--warning-lighter: #FFF7C2;--warning-light: #FBE577;--warning-main: #FFC53D;--warning-main-8-p: #FFC53D14;--warning-main-50-p: #FFC53D80;--warning-dark: #FFBA18;--warning-darker: #AB6400;--warning-outlined-border: #E9C162;--warning-contrast-text: #4F3422;--warning-button-contrast-text: #000000;--error-lighter: #FEEBEC;--error-light: #FFCDCE;--error-main: #E5484D;--error-main-8-p: #E5484D14;--error-main-50-p: #E5484D80;--error-dark: #DC3E42;--error-darker: #CE2C31;--error-outlined-border: #F4A9AA;--error-contrast-text: #641723;--error-button-contrast-text: #FFFFFF;--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}: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}.light-theme-v4{--elevation-xs: 0px 1px 2px rgba(16, 24, 40, 0.05);--elevation-sm: 0px 1px 2px rgba(16, 24, 40, 0.06), 0px 1px 3px rgba(16, 24, 40, 0.1);--elevation-md: 0px 4px 8px -2px rgba(16, 24, 40, 0.12);--elevation-lg: 0px 12px 16px -4px rgba(16, 24, 40, 0.08);--elevation-xl: 0px 8px 8px -4px rgba(16, 24, 40, 0.03), 0px 20px 24px -6px rgba(16, 24, 40, 0.08);--elevation-xxl: 0px 24px 48px -12px rgba(16, 24, 40, 0.18);--elevation-xxxl: 0px 19px 32px 2px rgba(44, 45, 45, 0.14);--elevation-sl: 0px 27px 27px 2px rgba(44, 45, 45, 0.14)}.dark-theme-v4{--elevation-xs: 0px 1px 2px rgba(0, 0, 0, 0.15);--elevation-sm: 0px 1px 2px rgba(0, 0, 0, 0.20), 0px 1px 3px rgba(0, 0, 0, 0.30);--elevation-md: 0px 4px 8px -2px rgba(0, 0, 0, 0.35);--elevation-lg: 0px 12px 16px -4px rgba(0, 0, 0, 0.30);--elevation-xl: 0px 8px 8px -4px rgba(0, 0, 0, 0.15), 0px 20px 24px -6px rgba(0, 0, 0, 0.30);--elevation-xxl: 0px 24px 48px -12px rgba(0, 0, 0, 0.50);--elevation-xxxl: 0px 19px 32px 2px rgba(0, 0, 0, 0.40);--elevation-sl: 0px 27px 27px 2px rgba(0, 0, 0, 0.40)}:root{--spacing-tokenset: 0px;--spacing-25: 2px;--spacing-50: 4px;--spacing-75: 6px;--spacing-100: 8px;--spacing-125: 10px;--spacing-150: 12px;--spacing-200: 16px;--spacing-250: 20px;--spacing-300: 24px;--spacing-350: 28px;--spacing-400: 32px;--spacing-500: 40px;--spacing-600: 48px;--spacing-700: 56px;--spacing-800: 64px;--spacing-900: 72px;--spacing-1000: 80px}.light-theme-v4 ::-webkit-scrollbar,.dark-theme-v4 ::-webkit-scrollbar{width:.5rem;height:.5rem}.light-theme-v4 ::-webkit-scrollbar-track,.dark-theme-v4 ::-webkit-scrollbar-track{background:var(--background-paper-elevation-1);border-radius:.25rem}.light-theme-v4 ::-webkit-scrollbar-thumb,.dark-theme-v4 ::-webkit-scrollbar-thumb{background:var(--background-paper-elevation-6);border-radius:.25rem}.light-theme-v4 ::-webkit-scrollbar-thumb:hover,.dark-theme-v4 ::-webkit-scrollbar-thumb:hover{background:var(--background-paper-elevation-7)}/*# sourceMappingURL=grid.css.map */

package/style/v4/grid.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["colors.scss","border-radius.scss","elevations.scss","spacings.scss"],"names":[],"mappings":"AAAA,gBACE,8BACA,4BACA,sCACA,iCACA,wCACA,wCACA,wCACA,wCACA,wCACA,wCACA,wCACA,wCACA,wCACA,wCACA,4BAEA,0BACA,yBACA,0BACA,2BACA,2BACA,sCACA,wBACA,kCAEA,wBACA,2BACA,yBACA,wBACA,0BACA,iCACA,mCACA,8BACA,+BACA,wCAEA,wBACA,wBACA,gCACA,gCACA,0BACA,sCAEA,wBACA,0BACA,yBAEA,2BACA,yBACA,wBACA,8BACA,+BACA,wBACA,0BACA,mCACA,iCACA,wCAEA,wBACA,sBACA,qBACA,2BACA,4BACA,qBACA,uBACA,gCACA,8BACA,qCAEA,2BACA,yBACA,wBACA,8BACA,+BACA,wBACA,0BACA,mCACA,iCACA,wCAEA,2BACA,yBACA,wBACA,8BACA,+BACA,wBACA,0BACA,mCACA,iCACA,wCAEA,yBACA,uBACA,sBACA,4BACA,6BACA,sBACA,wBACA,iCACA,+BACA,sCAEA,gBACA,gBCxGF,gBACI,wBACA,wBACA,wBACA,wBACA,yBACA,4BCNJ,gBACE,mDACA,sFACA,wDACA,0DACA,mGACA,4DACA,2DACA,yDCRF,gBACE,wBACA,kBACA,kBACA,kBACA,mBACA,oBACA,oBACA,oBACA,oBACA,oBACA,oBACA,oBACA,oBACA,oBACA,oBACA,oBACA,oBACA","file":"grid.css"}
+{"version":3,"sourceRoot":"","sources":["colors.scss","border-radius.scss","elevations.scss","spacings.scss","scrollbar.scss"],"names":[],"mappings":"AAAA,gBACE,0BACA,8BACA,4BACA,sCACA,iCACA,wCACA,wCACA,wCACA,wCACA,wCACA,wCACA,wCACA,wCACA,wCACA,wCACA,4BAEA,0BACA,yBACA,0BACA,2BACA,2BACA,sCACA,wBACA,kCAEA,wBACA,2BACA,yBACA,wBACA,0BACA,iCACA,mCACA,8BACA,+BACA,wCAEA,wBACA,wBACA,gCACA,gCACA,0BACA,sCAEA,wBACA,0BACA,yBAEA,2BACA,yBACA,wBACA,8BACA,+BACA,wBACA,0BACA,mCACA,iCACA,wCAEA,wBACA,sBACA,qBACA,2BACA,4BACA,qBACA,uBACA,gCACA,8BACA,qCAEA,2BACA,yBACA,wBACA,8BACA,+BACA,wBACA,0BACA,mCACA,iCACA,wCAEA,2BACA,yBACA,wBACA,8BACA,+BACA,wBACA,0BACA,mCACA,iCACA,wCAEA,yBACA,uBACA,sBACA,4BACA,6BACA,sBACA,wBACA,iCACA,+BACA,sCAEA,gBACA,gBAGF,eACE,0BACA,8BACA,4BACA,sCACA,0CACA,wCACA,4BACA,wCACA,wCACA,wCACA,wCACA,wCACA,wCACA,wCACA,wCACA,wCAEA,0BACA,yBACA,0CACA,6CACA,2BACA,wDACA,0CACA,mDAEA,2CACA,4BACA,0CACA,oDACA,iCACA,wCAEA,wBACA,wBACA,gCACA,gCACA,4CACA,wDAEA,wBACA,0BACA,yBAEA,2BACA,yBACA,wBACA,6CACA,8CACA,wBACA,0BACA,mCACA,iCACA,wCAEA,wBACA,sBACA,qBACA,0CACA,2CACA,qBACA,uBACA,gCACA,8BACA,qCAEA,2BACA,yBACA,wBACA,6CACA,8CACA,wBACA,0BACA,mCACA,iCACA,wCAEA,2BACA,yBACA,wBACA,6CACA,8CACA,wBACA,0BACA,mCACA,iCACA,mDAEA,yBACA,uBACA,sBACA,0CACA,2CACA,sBACA,wBACA,iCACA,+BACA,sCAEA,gBACA,gBCjNF,MACI,wBACA,wBACA,wBACA,wBACA,yBACA,4BCNJ,gBACE,mDACA,sFACA,wDACA,0DACA,mGACA,4DACA,2DACA,yDAGF,eACE,gDACA,iFACA,qDACA,uDACA,6FACA,yDACA,wDACA,sDCnBF,MACE,wBACA,kBACA,kBACA,kBACA,mBACA,oBACA,oBACA,oBACA,oBACA,oBACA,oBACA,oBACA,oBACA,oBACA,oBACA,oBACA,oBACA,qBChBA,uEACE,YACA,aAGF,mFACE,+CACA,qBAGF,mFACE,+CACA,qBAEA,+FACE","file":"grid.css"}

package/style/v4/grid.scss

@@ -71,4 +71,4 @@ $columnHiddenPrefix: '.hidden' !default;
     }
 
     @include make-grid-columns();
-}
+}

package/style/v4/scrollbar.scss

@@ -0,0 +1,21 @@
+.light-theme-v4,
+.dark-theme-v4 {
+  ::-webkit-scrollbar {
+    width: 0.5rem;
+    height: 0.5rem;
+  }
+
+  ::-webkit-scrollbar-track {
+    background: var(--background-paper-elevation-1);
+    border-radius: 0.25rem;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: var(--background-paper-elevation-6);
+    border-radius: 0.25rem;
+
+    &:hover {
+      background: var(--background-paper-elevation-7);
+    }
+  }
+}

package/style/v4/spacings.scss

@@ -1,4 +1,4 @@
-.light-theme-v4 {
+:root {
   --spacing-tokenset: 0px;
   --spacing-25: 2px;
   --spacing-50: 4px;

package/style/v4/styleguideV4.scss

@@ -2,3 +2,4 @@
 @import './border-radius.scss';
 @import './elevations.scss';
 @import './spacings.scss';
+@import './scrollbar.scss';