@ironsource/shared-ui 2.2.0-rc.5 → 2.2.0-rc.7

package/index.d.ts

@@ -12769,6 +12769,7 @@ declare const _default: {
                 height: string;
                 width: string;
                 platform: string;
+                circled: boolean;
             }> & Omit<Readonly<import("vue").ExtractPropTypes<{
                 name: {
                     type: import("vue").PropType<string>;
@@ -12798,7 +12799,11 @@ declare const _default: {
                     type: import("vue").PropType<string>;
                     default: any;
                 };
-            }>> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "name" | "type" | "color" | "size" | "height" | "width" | "platform">;
+                circled: {
+                    type: import("vue").PropType<boolean>;
+                    default: boolean;
+                };
+            }>> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "name" | "type" | "color" | "size" | "height" | "width" | "platform" | "circled">;
             $attrs: {
                 [x: string]: unknown;
             };
@@ -12841,6 +12846,10 @@ declare const _default: {
                     type: import("vue").PropType<string>;
                     default: any;
                 };
+                circled: {
+                    type: import("vue").PropType<boolean>;
+                    default: boolean;
+                };
             }>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
                 name: string;
                 type: "fill" | "bold" | "regular" | "branded" | "ad-unit" | "ab-test" | "ad-networks" | "ad-networks/flat" | "content-rate";
@@ -12849,6 +12858,7 @@ declare const _default: {
                 height: string;
                 width: string;
                 platform: string;
+                circled: boolean;
             }, {}, string> & {
                 beforeCreate?: (() => void) | (() => void)[];
                 created?: (() => void) | (() => void)[];
@@ -12898,6 +12908,10 @@ declare const _default: {
                 type: import("vue").PropType<string>;
                 default: any;
             };
+            circled: {
+                type: import("vue").PropType<boolean>;
+                default: boolean;
+            };
         }>> & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {};
         __isFragment?: never;
         __isTeleport?: never;
@@ -12931,6 +12945,10 @@ declare const _default: {
             type: import("vue").PropType<string>;
             default: any;
         };
+        circled: {
+            type: import("vue").PropType<boolean>;
+            default: boolean;
+        };
     }>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
         name: string;
         type: "fill" | "bold" | "regular" | "branded" | "ad-unit" | "ab-test" | "ad-networks" | "ad-networks/flat" | "content-rate";
@@ -12939,6 +12957,7 @@ declare const _default: {
         height: string;
         width: string;
         platform: string;
+        circled: boolean;
     }, {}, string> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
         $slots: {
             default?(_: {}): any;
@@ -12956,6 +12975,7 @@ declare const _default: {
                 height: string;
                 width: string;
                 platform: string;
+                circled: boolean;
             }> & Omit<Readonly<import("vue").ExtractPropTypes<{
                 name: {
                     type: import("vue").PropType<string>;
@@ -12985,7 +13005,11 @@ declare const _default: {
                     type: import("vue").PropType<string>;
                     default: any;
                 };
-            }>> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "name" | "type" | "color" | "size" | "height" | "width" | "platform">;
+                circled: {
+                    type: import("vue").PropType<boolean>;
+                    default: boolean;
+                };
+            }>> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "name" | "type" | "color" | "size" | "height" | "width" | "platform" | "circled">;
             $attrs: {
                 [x: string]: unknown;
             };
@@ -13028,6 +13052,10 @@ declare const _default: {
                     type: import("vue").PropType<string>;
                     default: any;
                 };
+                circled: {
+                    type: import("vue").PropType<boolean>;
+                    default: boolean;
+                };
             }>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
                 name: string;
                 type: "fill" | "bold" | "regular" | "branded" | "ad-unit" | "ab-test" | "ad-networks" | "ad-networks/flat" | "content-rate";
@@ -13036,6 +13064,7 @@ declare const _default: {
                 height: string;
                 width: string;
                 platform: string;
+                circled: boolean;
             }, {}, string> & {
                 beforeCreate?: (() => void) | (() => void)[];
                 created?: (() => void) | (() => void)[];
@@ -13085,6 +13114,10 @@ declare const _default: {
                 type: import("vue").PropType<string>;
                 default: any;
             };
+            circled: {
+                type: import("vue").PropType<boolean>;
+                default: boolean;
+            };
         }>> & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {};
         __isFragment?: never;
         __isTeleport?: never;
@@ -13118,6 +13151,10 @@ declare const _default: {
             type: import("vue").PropType<string>;
             default: any;
         };
+        circled: {
+            type: import("vue").PropType<boolean>;
+            default: boolean;
+        };
     }>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
         name: string;
         type: "fill" | "bold" | "regular" | "branded" | "ad-unit" | "ab-test" | "ad-networks" | "ad-networks/flat" | "content-rate";
@@ -13126,6 +13163,7 @@ declare const _default: {
         height: string;
         width: string;
         platform: string;
+        circled: boolean;
     }, {}, string> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
         $slots: {
             default?(_: {}): any;
@@ -28475,6 +28513,7 @@ export * from '@/composables/useDateService';
 export * from '@/components/banner';
 export * from '@/components/alert';
 export * from '@/components/link';
+export * from '@/components/helpText';
 export * from '@/components/autocomplete';
 export * from '@/components/chart';
 export * from '@/components/columnPicker';

package/index.js

@@ -1,4 +1,4 @@
-import './MenuItem.vue_vue_type_style_index_0_scoped_67e53b85_lang.css';
+import './FloatingToolbar.vue_vue_type_style_index_0_scoped_04d485be_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";
@@ -45,11 +45,11 @@ import * as M from "./components/table-cells/v3/index.js";
 import * as b from "./components/table-cells/v4/index.js";
 import * as w from "./components/skeleton/v3/index.js";
 import * as k from "./components/skeleton/v4/index.js";
-import * as O from "./components/loader/v4/index.js";
-import * as P from "./components/emptyState/v3/index.js";
-import * as S from "./components/emptyState/v4/index.js";
-import * as v from "./components/snackbar/v3/index.js";
-import * as H from "./components/snackbar/v4/index.js";
+import * as H from "./components/loader/v4/index.js";
+import * as O from "./components/emptyState/v3/index.js";
+import * as P from "./components/emptyState/v4/index.js";
+import * as S from "./components/snackbar/v3/index.js";
+import * as v from "./components/snackbar/v4/index.js";
 import * as L from "./components/radioButton/v3/index.js";
 import * as N from "./components/radioButton/v4/index.js";
 import * as V from "./components/textArea/v3/index.js";
@@ -66,51 +66,53 @@ import * as Y from "./components/dateRange/v4/index.js";
 import * as U from "./components/popover/v3/index.js";
 import * as W from "./components/popover/v4/index.js";
 import * as X from "./utils/index.js";
-import { useToggle as Po } from "./composables/useToggle.js";
-import { useSearch as vo } from "./composables/useSearch.js";
+import { useToggle as Oo } from "./composables/useToggle.js";
+import { useSearch as So } from "./composables/useSearch.js";
 import { scrollToElementByClass as Lo, scrollToFirstInvalidElement as No, useFormValidation as Vo, yupValidation as Jo } from "./composables/useFormValidation.js";
 import { useDateService as Ro } from "./composables/useDateService.js";
 import { BannerTypes as jo } from "./components/banner/index.js";
 import { AlertTypes as zo } from "./components/alert/index.js";
 import { LinkTypes as Qo } from "./components/link/index.js";
-import { AutocompleteTypes as Uo } from "./components/autocomplete/index.js";
-import { ChartTypes as Xo } from "./components/chart/index.js";
-import { ColumnPickerTypes as or } from "./components/columnPicker/index.js";
-import { ColumnConfiguratorTypes as er } from "./components/columnConfigurator/index.js";
-import { TagsFieldTypes as mr } from "./components/tagsField/index.js";
-import { default as ar } from "./components/appTrigger/AppTrigger.vue.js";
-import { default as ir } from "./components/autocompleteDropdown/AutocompleteDropdown.vue.js";
-import { default as xr } from "./components/menuItem/MenuItem.vue.js";
-import { default as nr } from "./components/menu/Menu.vue.js";
-import { default as ur } from "./components/appIcon/AppIcon.vue.js";
-import { default as Tr } from "./components/floatingToolbar/FloatingToolbar.vue.js";
-import { default as yr } from "./components/includeExclude/IncludeExclude.vue.js";
-import { default as Fr } from "./components/includeExclude/IncludeExcludeDragDrop.vue.js";
-import { default as Cr } from "./components/includeExclude/IncludeExcludeOption.vue.js";
-import { default as Er } from "./components/includeExclude/IncludeExcludeOptionDraggable.vue.js";
-import { default as hr } from "./components/includeExclude/IncludeExcludeAppTrigger.vue.js";
-import { default as Mr } from "./components/includeExclude/IncludeExcludeAppHeader.vue.js";
-import { default as wr } from "./components/includeExclude/IncludeExcludeChipFilter.vue.js";
-import { default as Or } from "./components/filterDropdown/FilterDropdown.vue.js";
-import { default as Sr } from "./components/filterDropdown/AddFilterButton.vue.js";
-import { default as Hr } from "./components/typography/Heading.vue.js";
-import { default as Nr } from "./components/typography/Text.vue.js";
-import { default as Jr } from "./components/typography/v4/Typography.vue.js";
-import { default as Rr } from "./components/multibar/MultiBar.vue.js";
-import { default as jr } from "./components/layout/FoldableSection.vue.js";
-import { default as zr } from "./components/forms/FormRow.vue.js";
-import { default as Qr } from "./components/forms/FormCard.vue.js";
-import { default as Ur } from "./components/forms/CardPanel.vue.js";
-import { default as Xr } from "./components/forms/FormField.vue.js";
-import { default as oe } from "./components/banner/Banner.vue.js";
-import { default as ee } from "./components/alert/Alert.vue.js";
-import { default as me } from "./components/link/Link.vue.js";
-import { default as ae } from "./components/autocomplete/Autocomplete.vue.js";
-import { default as ie } from "./components/chart/Chart.vue.js";
-import { ChartType as xe, TooltipOrder as se, TrendDirection as ne } from "./components/chart/types.js";
-import { default as ue } from "./components/columnPicker/ColumnPicker.vue.js";
-import { default as Te } from "./components/columnConfigurator/ColumnConfigurator.vue.js";
-import { default as ye } from "./components/tagsField/TagsField.vue.js";
+import { HelpTextTypes as Uo } from "./components/helpText/index.js";
+import { AutocompleteTypes as Xo } from "./components/autocomplete/index.js";
+import { ChartTypes as or } from "./components/chart/index.js";
+import { ColumnPickerTypes as er } from "./components/columnPicker/index.js";
+import { ColumnConfiguratorTypes as mr } from "./components/columnConfigurator/index.js";
+import { TagsFieldTypes as ar } from "./components/tagsField/index.js";
+import { default as ir } from "./components/appTrigger/AppTrigger.vue.js";
+import { default as xr } from "./components/autocompleteDropdown/AutocompleteDropdown.vue.js";
+import { default as nr } from "./components/menuItem/MenuItem.vue.js";
+import { default as ur } from "./components/menu/Menu.vue.js";
+import { default as Tr } from "./components/appIcon/AppIcon.vue.js";
+import { default as yr } from "./components/floatingToolbar/FloatingToolbar.vue.js";
+import { default as Fr } from "./components/includeExclude/IncludeExclude.vue.js";
+import { default as Cr } from "./components/includeExclude/IncludeExcludeDragDrop.vue.js";
+import { default as Er } from "./components/includeExclude/IncludeExcludeOption.vue.js";
+import { default as hr } from "./components/includeExclude/IncludeExcludeOptionDraggable.vue.js";
+import { default as Mr } from "./components/includeExclude/IncludeExcludeAppTrigger.vue.js";
+import { default as wr } from "./components/includeExclude/IncludeExcludeAppHeader.vue.js";
+import { default as Hr } from "./components/includeExclude/IncludeExcludeChipFilter.vue.js";
+import { default as Pr } from "./components/filterDropdown/FilterDropdown.vue.js";
+import { default as vr } from "./components/filterDropdown/AddFilterButton.vue.js";
+import { default as Nr } from "./components/typography/Heading.vue.js";
+import { default as Jr } from "./components/typography/Text.vue.js";
+import { default as Rr } from "./components/typography/v4/Typography.vue.js";
+import { default as jr } from "./components/multibar/MultiBar.vue.js";
+import { default as zr } from "./components/layout/FoldableSection.vue.js";
+import { default as Qr } from "./components/forms/FormRow.vue.js";
+import { default as Ur } from "./components/forms/FormCard.vue.js";
+import { default as Xr } from "./components/forms/CardPanel.vue.js";
+import { default as oe } from "./components/forms/FormField.vue.js";
+import { default as ee } from "./components/banner/Banner.vue.js";
+import { default as me } from "./components/alert/Alert.vue.js";
+import { default as ae } from "./components/link/Link.vue.js";
+import { default as ie } from "./components/helpText/HelpText.vue.js";
+import { default as xe } from "./components/autocomplete/Autocomplete.vue.js";
+import { default as ne } from "./components/chart/Chart.vue.js";
+import { ChartType as ue, TooltipOrder as $e, TrendDirection as Te } from "./components/chart/types.js";
+import { default as ye } from "./components/columnPicker/ColumnPicker.vue.js";
+import { default as Fe } from "./components/columnConfigurator/ColumnConfigurator.vue.js";
+import { default as Ce } from "./components/tagsField/TagsField.vue.js";
 const Z = {
   ...e,
   ...t,
@@ -140,13 +142,13 @@ const Z = {
   ...B,
   ...M,
   ...b,
+  ...O,
   ...P,
-  ...S,
   ...w,
   ...k,
-  ...O,
-  ...v,
   ...H,
+  ...S,
+  ...v,
   ...n,
   ...l,
   ...V,
@@ -167,62 +169,64 @@ const Z = {
   ...X
 };
 export {
-  Sr as AddFilterButton,
-  ee as Alert,
+  vr as AddFilterButton,
+  me as Alert,
   zo as AlertTypes,
-  ur as AppIcon,
+  Tr as AppIcon,
   so as AppIconTypes,
-  ar as AppTrigger,
+  ir as AppTrigger,
   eo as AppTriggerTypes,
-  ae as Autocomplete,
-  ir as AutocompleteDropdown,
+  xe as Autocomplete,
+  xr as AutocompleteDropdown,
   mo as AutocompleteDropdownTypes,
-  Uo as AutocompleteTypes,
-  oe as Banner,
+  Xo as AutocompleteTypes,
+  ee as Banner,
   jo as BannerTypes,
-  Ur as CardPanel,
-  ie as Chart,
-  xe as ChartType,
-  Xo as ChartTypes,
-  Te as ColumnConfigurator,
-  er as ColumnConfiguratorTypes,
-  ue as ColumnPicker,
-  or as ColumnPickerTypes,
-  Or as FilterDropdown,
+  Xr as CardPanel,
+  ne as Chart,
+  ue as ChartType,
+  or as ChartTypes,
+  Fe as ColumnConfigurator,
+  mr as ColumnConfiguratorTypes,
+  ye as ColumnPicker,
+  er as ColumnPickerTypes,
+  Pr as FilterDropdown,
   Fo as FilterDropdownTypes,
-  Tr as FloatingToolbar,
+  yr as FloatingToolbar,
   lo as FloatingToolbarTypes,
-  jr as FoldableSection,
+  zr as FoldableSection,
   Mo as FoldableSectionTypes,
-  Qr as FormCard,
+  Ur as FormCard,
   wo as FormCardTypes,
-  Xr as FormField,
+  oe as FormField,
   ko as FormFieldTypes,
-  zr as FormRow,
-  Hr as Heading,
+  Qr as FormRow,
+  Nr as Heading,
+  ie as HelpText,
+  Uo as HelpTextTypes,
   co as ID_INJECTION_KEY,
-  yr as IncludeExclude,
-  Mr as IncludeExcludeAppHeader,
-  hr as IncludeExcludeAppTrigger,
-  wr as IncludeExcludeChipFilter,
-  Fr as IncludeExcludeDragDrop,
-  Cr as IncludeExcludeOption,
-  Er as IncludeExcludeOptionDraggable,
+  Fr as IncludeExclude,
+  wr as IncludeExcludeAppHeader,
+  Mr as IncludeExcludeAppTrigger,
+  Hr as IncludeExcludeChipFilter,
+  Cr as IncludeExcludeDragDrop,
+  Er as IncludeExcludeOption,
+  hr as IncludeExcludeOptionDraggable,
   $o as IncludeExcludeTypes,
-  me as Link,
+  ae as Link,
   Qo as LinkTypes,
-  nr as Menu,
-  xr as MenuItem,
+  ur as Menu,
+  nr as MenuItem,
   ao as MenuItemTypes,
   io as MenuTypes,
-  Rr as MultiBar,
+  jr as MultiBar,
   ho as MultiBarTypes,
-  ye as TagsField,
-  mr as TagsFieldTypes,
-  Nr as Text,
-  se as TooltipOrder,
-  ne as TrendDirection,
-  Jr as Typography,
+  Ce as TagsField,
+  ar as TagsFieldTypes,
+  Jr as Text,
+  $e as TooltipOrder,
+  Te as TrendDirection,
+  Rr as Typography,
   Co as TypographyTypes,
   Eo as TypographyTypesV4,
   Z as default,
@@ -231,7 +235,7 @@ export {
   Ro as useDateService,
   Vo as useFormValidation,
   yo as useId,
-  vo as useSearch,
-  Po as useToggle,
+  So as useSearch,
+  Oo as useToggle,
   Jo as yupValidation
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ironsource/shared-ui",
-  "version": "2.2.0-rc.5",
+  "version": "2.2.0-rc.7",
   "engines": {
     "npm": ">=7.0.0",
     "node": ">=16.0.0"
@@ -47,7 +47,8 @@
     "upload:visual": "aws s3 cp ./visual-tests s3://mobile-shared-ui-platform/visual-tests/$FOLDER  --recursive  --exclude '.gitkeep' ",
     "release": "commit-and-tag-version",
     "pw:ci": "cd e2e/playwright && BASE_URL=http://localhost:6006/ npx playwright test --reporter=list --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }}",
-    "test-storybook-pw": "concurrently 'npm run storybook:dist:pw --silent' 'npx wait-on http://localhost:6006 && npm run pw:ci'  --kill-others --success first"
+    "test-storybook-pw": "concurrently 'npm run storybook:dist:pw --silent' 'npx wait-on http://localhost:6006 && npm run pw:ci'  --kill-others --success first",
+    "migrate-colors": "node scripts/migrate-colors.mjs"
   },
   "dependencies": {
     "@phosphor-icons/vue": "^2.1.6",
@@ -227,6 +228,7 @@
     "./banner": "./components/banner/Banner.vue.js",
     "./alert": "./components/alert/index.js",
     "./link": "./components/link/index.js",
+    "./helpText": "./components/helpText/index.js",
     "./multibar": "./components/multibar/index.js",
     "./typography": "./components/typography/v4/index.js",
     "./themeWrapper": "./components/ThemeWrapper/index.js",
@@ -454,6 +456,9 @@
       "link": [
         "./components/link/index.d.ts"
       ],
+      "helpText": [
+        "./components/helpText/index.d.ts"
+      ],
       "multibar": [
         "./components/multibar/index.d.ts"
       ],

package/style/v4/colors.scss

@@ -1,101 +1,106 @@
 .light-theme-v4 {
   --background-default: #FFFFFF;
-  --background-paper: hsl(0, 0%, 99.0%);
-  --background-model-elevation: #FFFFFF;
-  --background-backdrop: hsla(0, 0%, 0%, 0.11);
-  --background-paper-elevation-0: hsl(0, 0%, 97.5%);
-  --background-paper-elevation-1: hsl(0, 0%, 94.6%);
-  --background-paper-elevation-2: hsl(0, 0%, 92.0%);
-  --background-paper-elevation-3: hsl(0, 0%, 89.5%);
-  --background-paper-elevation-4: hsl(0, 0%, 86.8%);
-  --background-paper-elevation-5: hsl(0, 0%, 83.0%);
-  --background-paper-elevation-6: hsl(0, 0%, 73.2%);
-  --background-paper-elevation-7: hsl(0, 0%, 55.2%);
-  --background-paper-elevation-8: hsl(0, 0%, 50.3%);
-  --background-paper-elevation-9: hsl(0, 0%, 39.3%);
+  --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: hsl(0, 0%, 12.5%);
-  --action-active: hsl(0, 0%, 50.3%);
-  --action-hover: hsla(0, 0%, 0%, 0.05);
-  --action-selected: hsla(0, 0%, 92%, 1);
-  --action-disabled: hsla(0, 0%, 87%, 1);
-  --action-disabled-background: hsla(0, 0%, 95%, 1);
-  --action-focus: hsl(0, 0%, 92.0%);
-  --action-outlined-border  : hsla(0, 0%, 73%, 1);
+  --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-light: hsl(0, 0%, 89.5%);
-  --default-main: hsl(0 0% 94.51%);
-  --default-dark: hsl(0, 0%, 92.0%);
-  --default-outlined-border: hsl(0, 0%, 73.2%);
-  --default-contrast-text: hsl(0, 0%, 12.5%);
-  --default-button-contrast-text: hsla(0, 0%, 0%, 1);
+  --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: hsl(0, 0%, 86.8%);
-  --common-divider-elevation-0: hsla(0, 0%, 89%, 1);
+  --common-divider: #E8E8E8;
+  --common-divider-elevation-0: #E8E8E8;
 
-  --text-primary: hsl(0, 0%, 12.5%);
-  --text-secondary: hsl(0, 0%, 39.3%);
-  --text-disabled: hsl(0 0% 73.33%);
+  --text-primary: #202020;
+  --text-secondary: #646464;
+  --text-disabled: #838383;
 
-  --primary-lighter: hsl(209, 100%, 96.5%);
-  --primary-light: hsl(209, 95.0%, 90.1%);
-  --primary-main: hsl(206, 100%, 50.0%);
-  --primary-main-8-p: hsla(206, 100%, 50%, 0.08);
-  --primary-main-50-p: hsla(206, 100%, 50%, 0.5);
-  --primary-dark: hsl(208, 93.5%, 47.4%);
-  --primary-darker: hsl(211, 90.0%, 42.0%);
-  --primary-outlined-border: hsl(206, 100%, 50.0%);
-  --primary-contrast-text: hsl(216, 71.0%, 23.0%);
-  --primary-button-contrast-text: hsla(0, 0%, 100%, 1);
+  --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: hsl(223, 98.4%, 97.1%);
-  --info-light: hsl(224, 87.1%, 92.0%);
-  --info-main: hsl(226, 70.0%, 55.5%);
-  --info-main-8-p: hsla(226, 70%, 55.5%, 0.08);
-  --info-main-50-p: hsla(226, 70%, 55.5%, 0.5);
-  --info-dark: hsl(226, 58.6%, 51.3%);
-  --info-darker: hsl(226, 55.0%, 45.0%);
-  --info-outlined-border: hsl(226, 70.0%, 55.5%);
-  --info-contrast-text: hsl(226, 50.0%, 24.0%);
-  --info-button-contrast-text: hsla(0, 0%, 100%, 1);
+  --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: hsl(139, 55.2%, 94.5%);
-  --success-light: hsl(141, 43.7%, 86.0%);
-  --success-main: hsl(151, 55.0%, 41.5%);
-  --success-main-8-p: hsla(151, 55%, 41.5%, 0.08);
-  --success-main-50-p: hsla(151, 55%, 41.5%, 0.5);
-  --success-dark: hsl(152, 57.5%, 37.6%);
-  --success-darker: hsl(153, 67.0%, 28.5%);
-  --success-outlined-border: hsl(151, 55.0%, 41.5%);
-  --success-contrast-text: hsl(155, 40.0%, 16.5%);
-  --success-button-contrast-text: hsla(0, 0%, 100%, 1);
+  --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: hsl(45, 100%, 90.8%);
-  --warning-light: hsl(40, 100%, 81.5%);
-  --warning-main: hsl(42, 100%, 62.0%);
-  --warning-main-8-p: hsla(42, 100%, 62%, 0.08);
-  --warning-main-50-p: hsla(42, 100%, 62%, 0.5);
-  --warning-dark: hsl(42, 100%, 55.0%);
-  --warning-darker: hsl(25, 50.0%, 38.0%);
-  --warning-outlined-border: hsl(42, 100%, 62.0%);
-  --warning-contrast-text: hsl(25, 40.0%, 22.0%);
-  --warning-button-contrast-text: hsla(24, 40%, 22%, 1);
+  --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: hsl(360, 100%, 96.8%);
-  --error-light: hsl(360, 90.2%, 91.9%);
-  --error-main: hsl(358, 75.0%, 59.0%);
-  --error-main-8-p: hsla(358, 75%, 59%, 0.08);
-  --error-main-50-p: hsla(358, 75%, 59%, 0.5);
-  --error-dark: hsl(358, 67.4%, 54.6%);
-  --error-darker: hsl(358, 65.0%, 47.0%);
-  --error-outlined-border: hsl(358, 75.0%, 59.0%);
-  --error-contrast-text: hsl(350, 63.0%, 24.0%);
-  --error-button-contrast-text: hsla(0, 0%, 100%, 1);
+  --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;
 
-  --aba: #FFC134;
-  --abb: #4F4FF5;
+  --ab-a: #FFC134;
+  --ab-b: #4F4FF5;
 }