@ironsource/shared-ui 2.0.0-rc.1 → 2.0.0-rc.3

package/commonCssVariables.scss

@@ -1,623 +1,4 @@
-.light-theme-v4 {
-  --common-white: #ffffff;
-  --common-black: #000000;
-  --common-inverseWhite: #000000;
-  --common-inverseBlack: #ffffff;
-  --primary-50: hsl(206, 100%, 99.2%);
-  --primary-100: hsl(210, 100%, 98%);
-  --primary-200: hsl(209, 100%, 96.5%);
-  --primary-300: hsl(210, 98.8%, 94%);
-  --primary-400: hsl(209, 95%, 90.1%);
-  --primary-500: hsl(209, 81.2%, 84.5%);
-  --primary-600: hsl(208, 77.5%, 76.9%);
-  --primary-700: hsl(206, 81.9%, 65.3%);
-  --primary-800: hsl(206, 100%, 50%);
-  --primary-900: hsl(208, 93.5%, 47.4%);
-  --primary-1000: hsl(211, 90%, 42%);
-  --primary-1100: hsl(216, 71%, 23%);
-  --primary-A100: hsl(210, 100%, 98%);
-  --primary-A200: hsl(209, 100%, 96.5%);
-  --primary-A400: hsl(209, 95%, 90.1%);
-  --primary-A700: hsl(206, 100%, 50%);
-  --primary-lighter: hsl(209, 100%, 96.5%);
-  --primary-light: hsl(209, 95%, 90.1%);
-  --primary-main: hsl(206, 100%, 50%);
-  --primary-main8p: hsla(206, 100%, 50%, 0.08);
-  --primary-main50p: hsla(206, 100%, 50%, 0.5);
-  --primary-dark: hsl(208, 93.5%, 47.4%);
-  --primary-darker: hsl(211, 90%, 42%);
-  --primary-hover: hsl(209, 100%, 96.5%);
-  --primary-selected: hsl(209, 95%, 90.1%);
-  --primary-outlinedBorder: hsl(206, 100%, 50%);
-  --primary-contrastText: hsl(216, 71%, 23%);
-  --info-50: hsl(225, 60%, 99.4%);
-  --info-100: hsl(223, 100%, 98.6%);
-  --info-200: hsl(223, 98.4%, 97.1%);
-  --info-300: hsl(223, 92.9%, 95%);
-  --info-400: hsl(224, 87.1%, 92%);
-  --info-500: hsl(224, 81.9%, 87.8%);
-  --info-600: hsl(225, 77.4%, 82.1%);
-  --info-700: hsl(226, 75.4%, 74.5%);
-  --info-800: hsl(226, 70%, 55.5%);
-  --info-900: hsl(226, 58.6%, 51.3%);
-  --info-1000: hsl(226, 55%, 45%);
-  --info-1100: hsl(226, 50%, 24%);
-  --info-A100: hsl(223, 100%, 98.6%);
-  --info-A200: hsl(223, 98.4%, 97.1%);
-  --info-A400: hsl(224, 87.1%, 92%);
-  --info-A700: hsl(226, 70%, 55.5%);
-  --info-lighter: hsl(223, 98.4%, 97.1%);
-  --info-light: hsl(224, 87.1%, 92%);
-  --info-main: hsl(226, 70%, 55.5%);
-  --info-main8p: hsla(226, 70%, 55.5%, 0.08);
-  --info-main50p: hsla(226, 70%, 55.5%, 0.5);
-  --info-dark: hsl(226, 58.6%, 51.3%);
-  --info-darker: hsl(226, 55%, 45%);
-  --info-hover: hsl(223, 98.4%, 97.1%);
-  --info-selected: hsl(224, 87.1%, 92%);
-  --info-outlinedBorder: hsl(226, 70%, 55.5%);
-  --info-contrastText: hsl(226, 50%, 24%);
-  --success-50: hsl(136, 50%, 98.9%);
-  --success-100: hsl(138, 62.5%, 96.9%);
-  --success-200: hsl(139, 55.2%, 94.5%);
-  --success-300: hsl(140, 48.7%, 91%);
-  --success-400: hsl(141, 43.7%, 86%);
-  --success-500: hsl(143, 40.3%, 79%);
-  --success-600: hsl(146, 38.5%, 69%);
-  --success-700: hsl(151, 40.2%, 54.1%);
-  --success-800: hsl(151, 55%, 41.5%);
-  --success-900: hsl(152, 57.5%, 37.6%);
-  --success-1000: hsl(153, 67%, 28.5%);
-  --success-1100: hsl(155, 40%, 16.5%);
-  --success-A100: hsl(138, 62.5%, 96.9%);
-  --success-A200: hsl(139, 55.2%, 94.5%);
-  --success-A400: hsl(141, 43.7%, 86%);
-  --success-A700: hsl(151, 55%, 41.5%);
-  --success-lighter: hsl(139, 55.2%, 94.5%);
-  --success-light: hsl(141, 43.7%, 86%);
-  --success-main: hsl(151, 55%, 41.5%);
-  --success-main8p: hsla(151, 55%, 41.5%, 0.08);
-  --success-main50p: hsla(151, 55%, 41.5%, 0.5);
-  --success-dark: hsl(152, 57.5%, 37.6%);
-  --success-darker: hsl(153, 67%, 28.5%);
-  --success-hover: hsl(139, 55.2%, 94.5%);
-  --success-selected: hsl(141, 43.7%, 86%);
-  --success-outlinedBorder: hsl(151, 55%, 41.5%);
-  --success-contrastText: hsl(155, 40%, 16.5%);
-  --warning-50: hsl(39, 70%, 99%);
-  --warning-100: hsl(40, 100%, 96.5%);
-  --warning-200: hsl(45, 100%, 90.8%);
-  --warning-300: hsl(44, 100%, 85.8%);
-  --warning-400: hsl(40, 100%, 81.5%);
-  --warning-500: hsl(39, 83.6%, 75.4%);
-  --warning-600: hsl(37, 66.9%, 68.2%);
-  --warning-700: hsl(35, 59.8%, 60%);
-  --warning-800: hsl(42, 100%, 62%);
-  --warning-900: hsl(42, 100%, 55%);
-  --warning-1000: hsl(25, 50%, 38%);
-  --warning-1100: hsl(25, 40%, 22%);
-  --warning-A100: hsl(40, 100%, 96.5%);
-  --warning-A200: hsl(45, 100%, 90.8%);
-  --warning-A400: hsl(40, 100%, 81.5%);
-  --warning-A700: hsl(42, 100%, 62%);
-  --warning-lighter: hsl(45, 100%, 90.8%);
-  --warning-light: hsl(40, 100%, 81.5%);
-  --warning-main: hsl(42, 100%, 62%);
-  --warning-main8p: hsla(42, 100%, 62%, 0.08);
-  --warning-main50p: hsla(42, 100%, 62%, 0.5);
-  --warning-dark: hsl(42, 100%, 55%);
-  --warning-darker: hsl(25, 50%, 38%);
-  --warning-hover: hsl(45, 100%, 90.8%);
-  --warning-selected: hsl(40, 100%, 81.5%);
-  --warning-outlinedBorder: hsl(42, 100%, 62%);
-  --warning-contrastText: hsl(25, 40%, 22%);
-  --error-50: hsl(359, 100%, 99.4%);
-  --error-100: hsl(0, 100%, 98.4%);
-  --error-200: hsl(360, 100%, 96.8%);
-  --error-300: hsl(360, 97.9%, 94.8%);
-  --error-400: hsl(360, 90.2%, 91.9%);
-  --error-500: hsl(360, 81.7%, 87.8%);
-  --error-600: hsl(359, 74.2%, 81.7%);
-  --error-700: hsl(359, 69.5%, 74.3%);
-  --error-800: hsl(358, 75%, 59%);
-  --error-900: hsl(358, 67.4%, 54.6%);
-  --error-1000: hsl(358, 65%, 47%);
-  --error-1100: hsl(350, 63%, 24%);
-  --error-A100: hsl(0, 100%, 98.4%);
-  --error-A200: hsl(360, 100%, 96.8%);
-  --error-A400: hsl(360, 90.2%, 91.9%);
-  --error-A700: hsl(358, 75%, 59%);
-  --error-lighter: hsl(360, 100%, 96.8%);
-  --error-light: hsl(360, 90.2%, 91.9%);
-  --error-main: hsl(358, 75%, 59%);
-  --error-main8p: hsla(358, 75%, 59%, 0.08);
-  --error-main50p: hsla(358, 75%, 59%, 0.5);
-  --error-dark: hsl(358, 67.4%, 54.6%);
-  --error-darker: hsl(358, 65%, 47%);
-  --error-hover: hsl(360, 100%, 96.8%);
-  --error-selected: hsl(360, 90.2%, 91.9%);
-  --error-outlinedBorder: hsl(358, 75%, 59%);
-  --error-contrastText: hsl(350, 63%, 24%);
-  --secondary-50: hsl(0, 0%, 99%);
-  --secondary-100: hsl(0, 0%, 97.5%);
-  --secondary-200: hsl(0, 0%, 94.6%);
-  --secondary-300: hsl(0, 0%, 92%);
-  --secondary-400: hsl(0, 0%, 89.5%);
-  --secondary-500: hsl(0, 0%, 86.8%);
-  --secondary-600: hsl(0, 0%, 83%);
-  --secondary-700: hsl(0, 0%, 73.2%);
-  --secondary-800: hsl(0, 0%, 55.2%);
-  --secondary-900: hsl(0, 0%, 50.3%);
-  --secondary-1000: hsl(0, 0%, 39.3%);
-  --secondary-1100: hsl(0, 0%, 12.5%);
-  --secondary-A100: hsl(0, 0%, 97.5%);
-  --secondary-A200: hsl(0, 0%, 94.6%);
-  --secondary-A400: hsl(0, 0%, 89.5%);
-  --secondary-A700: hsl(0, 0%, 55.2%);
-  --secondary-lighter: hsl(0, 0%, 94.6%);
-  --secondary-light: hsl(0, 0%, 89.5%);
-  --secondary-main: hsl(0, 0%, 86.8%);
-  --secondary-main8p: hsla(0, 0%, 55.2%, 0.08);
-  --secondary-main50p: hsla(0, 0%, 55.2%, 0.5);
-  --secondary-dark: hsl(0, 0%, 92%);
-  --secondary-darker: hsl(0, 0%, 39.3%);
-  --secondary-hover: hsl(0, 0%, 94.6%);
-  --secondary-selected: hsl(0, 0%, 89.5%);
-  --secondary-outlinedBorder: hsl(0, 0%, 73.2%);
-  --secondary-contrastText: hsl(0, 0%, 12.5%);
-  --default-50: hsl(0, 0%, 99%);
-  --default-100: hsl(0, 0%, 97.5%);
-  --default-200: hsl(0, 0%, 94.6%);
-  --default-300: hsl(0, 0%, 92%);
-  --default-400: hsl(0, 0%, 89.5%);
-  --default-500: hsl(0, 0%, 86.8%);
-  --default-600: hsl(0, 0%, 83%);
-  --default-700: hsl(0, 0%, 73.2%);
-  --default-800: hsl(0, 0%, 55.2%);
-  --default-900: hsl(0, 0%, 50.3%);
-  --default-1000: hsl(0, 0%, 39.3%);
-  --default-1100: hsl(0, 0%, 12.5%);
-  --default-A100: hsl(0, 0%, 97.5%);
-  --default-A200: hsl(0, 0%, 94.6%);
-  --default-A400: hsl(0, 0%, 89.5%);
-  --default-A700: hsl(0, 0%, 55.2%);
-  --default-lighter: hsl(0, 0%, 94.6%);
-  --default-light: hsl(0, 0%, 89.5%);
-  --default-main: hsl(0, 0%, 86.8%);
-  --default-main8p: hsla(0, 0%, 55.2%, 0.08);
-  --default-main50p: hsla(0, 0%, 55.2%, 0.5);
-  --default-dark: hsl(0, 0%, 92%);
-  --default-darker: hsl(0, 0%, 39.3%);
-  --default-hover: hsl(0, 0%, 94.6%);
-  --default-selected: hsl(0, 0%, 89.5%);
-  --default-outlinedBorder: hsl(0, 0%, 73.2%);
-  --default-contrastText: hsl(0, 0%, 12.5%);
-  --grey-50: hsl(0, 0%, 99%);
-  --grey-100: hsl(0, 0%, 97.5%);
-  --grey-200: hsl(0, 0%, 94.6%);
-  --grey-300: hsl(0, 0%, 92%);
-  --grey-400: hsl(0, 0%, 89.5%);
-  --grey-500: hsl(0, 0%, 86.8%);
-  --grey-600: hsl(0, 0%, 83%);
-  --grey-700: hsl(0, 0%, 73.2%);
-  --grey-800: hsl(0, 0%, 55.2%);
-  --grey-900: hsl(0, 0%, 50.3%);
-  --grey-A100: hsl(0, 0%, 97.5%);
-  --grey-A200: hsl(0, 0%, 94.6%);
-  --grey-A400: hsl(0, 0%, 89.5%);
-  --grey-A700: hsl(0, 0%, 55.2%);
-  --text-primary: hsl(0, 0%, 12.5%);
-  --text-secondary: hsl(0, 0%, 39.3%);
-  --text-disabled: hsl(0, 0%, 50.3%);
-  --action-primary: hsl(0, 0%, 12.5%);
-  --action-active: hsl(0, 0%, 50.3%);
-  --action-activeBackground: hsl(0, 0%, 94.6%);
-  --action-activatedOpacity: 0.5;
-  --action-hover: hsl(0, 0%, 92%);
-  --action-hoverOpacity: 0.5;
-  --action-selected: hsl(0, 0%, 89.5%);
-  --action-selectedOpacity: 0.5;
-  --action-disabled: hsl(0, 0%, 73.2%);
-  --action-disabledBackground: hsl(0, 0%, 92%);
-  --action-disabledOpacity: 0.5;
-  --action-focus: hsl(0, 0%, 92%);
-  --action-focusOpacity: 0.5;
-  --action-outlinedBorder: hsl(0, 0%, 83%);
-  --background-default: #ffffff;
-  --background-neutral: #ffffff;
-  --background-paper: hsl(0, 0%, 99%);
-  --background-modalElevation: #ffffff;
-  --background-paperElevation0: hsl(0, 0%, 97.5%);
-  --background-paperElevation1: hsl(0, 0%, 94.6%);
-  --background-paperElevation2: hsl(0, 0%, 92%);
-  --background-paperElevation3: hsl(0, 0%, 89.5%);
-  --background-paperElevation4: hsl(0, 0%, 86.8%);
-  --background-paperElevation5: hsl(0, 0%, 83%);
-  --background-paperElevation6: hsl(0, 0%, 73.2%);
-  --background-paperElevation7: hsl(0, 0%, 55.2%);
-  --background-paperElevation8: hsl(0, 0%, 50.3%);
-  --background-paperElevation9: hsl(0, 0%, 39.3%);
-  --chart-red-25: hsl(354, 65.7%, 33.2%);
-  --chart-red-50: hsl(358, 75%, 47.1%);
-  --chart-red-100: hsl(358, 75%, 59%);
-  --chart-red-text: hsl(350, 100%, 91%);
-  --chart-green-25: hsl(153, 50.3%, 24.4%);
-  --chart-green-50: hsl(151, 52.2%, 36.1%);
-  --chart-green-100: hsl(151, 55%, 41.5%);
-  --chart-green-text: hsl(144, 70%, 82%);
-  --chart-blue-25: hsl(211, 81.3%, 32.4%);
-  --chart-blue-50: hsl(211, 85.2%, 47.8%);
-  --chart-blue-100: hsl(206, 100%, 50%);
-  --chart-blue-text: hsl(205, 100%, 88%);
-  --chart-indigo-25: hsl(226, 53.3%, 36.6%);
-  --chart-indigo-50: hsl(226, 60%, 52%);
-  --chart-indigo-100: hsl(226, 70%, 55.5%);
-  --chart-indigo-text: hsl(235, 93%, 93%);
-  --chart-amber-25: hsl(35, 59%, 27.4%);
-  --chart-amber-50: hsl(36, 60.2%, 41.4%);
-  --chart-amber-100: hsl(42, 100%, 62%);
-  --chart-amber-text: hsl(41, 100%, 85%);
-  --chart-plum-25: hsl(295, 37.9%, 32.7%);
-  --chart-plum-50: hsl(292, 40.2%, 47.8%);
-  --chart-plum-100: hsl(292, 45%, 51%);
-  --chart-plum-text: hsl(300, 60%, 89.5%);
-  --chart-cyan-25: hsl(192, 56.6%, 26.5%);
-  --chart-cyan-50: hsl(192, 59.8%, 39%);
-  --chart-cyan-100: hsl(190, 95%, 39%);
-  --chart-cyan-text: hsl(190, 80%, 84%);
-  --chart-crimson-25: hsl(336, 62.7%, 32.8%);
-  --chart-crimson-50: hsl(336, 80%, 45.1%);
-  --chart-crimson-100: hsl(336, 80%, 57.8%);
-  --chart-crimson-text: hsl(330, 90%, 91%);
-  --chart-gray-25: hsl(0, 0%, 29.1%);
-  --chart-gray-50: hsl(0, 0%, 37.5%);
-  --chart-gray-100: hsl(0, 0%, 43%);
-  --chart-gray-text: hsl(0, 0%, 93.5%);
-  --chart-orange-25: hsl(25, 67.7%, 29.4%);
-  --chart-orange-50: hsl(25, 70.3%, 44.9%);
-  --chart-orange-100: hsl(24, 94%, 50%);
-  --chart-orange-text: hsl(30, 100%, 88%);
-  --chart-previous-25: hsl(0, 0%, 29.1%);
-  --chart-previous-50: hsl(0, 0%, 37.5%);
-  --chart-previous-100: hsl(0, 0%, 43%);
-  --chart-previous-text: hsl(0, 0%, 93.5%);
-  --chart-primary-25: hsl(211, 81.3%, 32.4%);
-  --chart-primary-50: hsl(211, 85.2%, 47.8%);
-  --chart-primary-100: hsl(206, 100%, 50%);
-  --chart-primary-text: hsl(205, 100%, 88%);
-  --chart-secondary-25: hsl(295, 37.9%, 32.7%);
-  --chart-secondary-50: hsl(292, 40.2%, 47.8%);
-  --chart-secondary-100: hsl(292, 45%, 51%);
-  --chart-secondary-text: hsl(300, 60%, 89.5%);
-  --chart-success-25: hsl(153, 50.3%, 24.4%);
-  --chart-success-50: hsl(151, 52.2%, 36.1%);
-  --chart-success-100: hsl(151, 55%, 41.5%);
-  --chart-success-text: hsl(144, 70%, 82%);
-  --chart-info-25: hsl(226, 53.3%, 36.6%);
-  --chart-info-50: hsl(226, 60%, 52%);
-  --chart-info-100: hsl(226, 70%, 55.5%);
-  --chart-info-text: hsl(235, 93%, 93%);
-  --chart-warning-25: hsl(35, 59%, 27.4%);
-  --chart-warning-50: hsl(36, 60.2%, 41.4%);
-  --chart-warning-100: hsl(42, 100%, 62%);
-  --chart-warning-text: hsl(41, 100%, 85%);
-  --chart-error-25: hsl(354, 65.7%, 33.2%);
-  --chart-error-50: hsl(358, 75%, 47.1%);
-  --chart-error-100: hsl(358, 75%, 59%);
-  --chart-error-text: hsl(350, 100%, 91%);
-  --divider: hsl(0, 0%, 86.8%);
-  /*our styles*/
-  --border-radius-button: 6px;
-}
-
-.light-theme-v3 {
-  --common-white: #ffffff;
-  --common-black: #000000;
-  --common-inverseWhite: #000000;
-  --common-inverseBlack: #ffffff;
-  --primary-50: hsl(206, 100%, 99.2%);
-  --primary-100: hsl(210, 100%, 98%);
-  --primary-200: hsl(209, 100%, 96.5%);
-  --primary-300: hsl(210, 98.8%, 94%);
-  --primary-400: hsl(209, 95%, 90.1%);
-  --primary-500: hsl(209, 81.2%, 84.5%);
-  --primary-600: hsl(208, 77.5%, 76.9%);
-  --primary-700: hsl(206, 81.9%, 65.3%);
-  --primary-800: hsl(206, 100%, 50%);
-  --primary-900: hsl(208, 93.5%, 47.4%);
-  --primary-1000: hsl(211, 90%, 42%);
-  --primary-1100: hsl(216, 71%, 23%);
-  --primary-A100: hsl(210, 100%, 98%);
-  --primary-A200: hsl(209, 100%, 96.5%);
-  --primary-A400: hsl(209, 95%, 90.1%);
-  --primary-A700: hsl(206, 100%, 50%);
-  --primary-lighter: hsl(209, 100%, 96.5%);
-  --primary-light: hsl(209, 95%, 90.1%);
-  --primary-main: hsl(206, 100%, 50%);
-  --primary-main8p: hsla(206, 100%, 50%, 0.08);
-  --primary-main50p: hsla(206, 100%, 50%, 0.5);
-  --primary-dark: hsl(208, 93.5%, 47.4%);
-  --primary-darker: hsl(211, 90%, 42%);
-  --primary-hover: hsl(209, 100%, 96.5%);
-  --primary-selected: hsl(209, 95%, 90.1%);
-  --primary-outlinedBorder: hsl(206, 100%, 50%);
-  --primary-contrastText: hsl(216, 71%, 23%);
-  --info-50: hsl(225, 60%, 99.4%);
-  --info-100: hsl(223, 100%, 98.6%);
-  --info-200: hsl(223, 98.4%, 97.1%);
-  --info-300: hsl(223, 92.9%, 95%);
-  --info-400: hsl(224, 87.1%, 92%);
-  --info-500: hsl(224, 81.9%, 87.8%);
-  --info-600: hsl(225, 77.4%, 82.1%);
-  --info-700: hsl(226, 75.4%, 74.5%);
-  --info-800: hsl(226, 70%, 55.5%);
-  --info-900: hsl(226, 58.6%, 51.3%);
-  --info-1000: hsl(226, 55%, 45%);
-  --info-1100: hsl(226, 50%, 24%);
-  --info-A100: hsl(223, 100%, 98.6%);
-  --info-A200: hsl(223, 98.4%, 97.1%);
-  --info-A400: hsl(224, 87.1%, 92%);
-  --info-A700: hsl(226, 70%, 55.5%);
-  --info-lighter: hsl(223, 98.4%, 97.1%);
-  --info-light: hsl(224, 87.1%, 92%);
-  --info-main: hsl(226, 70%, 55.5%);
-  --info-main8p: hsla(226, 70%, 55.5%, 0.08);
-  --info-main50p: hsla(226, 70%, 55.5%, 0.5);
-  --info-dark: hsl(226, 58.6%, 51.3%);
-  --info-darker: hsl(226, 55%, 45%);
-  --info-hover: hsl(223, 98.4%, 97.1%);
-  --info-selected: hsl(224, 87.1%, 92%);
-  --info-outlinedBorder: hsl(226, 70%, 55.5%);
-  --info-contrastText: hsl(226, 50%, 24%);
-  --success-50: hsl(136, 50%, 98.9%);
-  --success-100: hsl(138, 62.5%, 96.9%);
-  --success-200: hsl(139, 55.2%, 94.5%);
-  --success-300: hsl(140, 48.7%, 91%);
-  --success-400: hsl(141, 43.7%, 86%);
-  --success-500: hsl(143, 40.3%, 79%);
-  --success-600: hsl(146, 38.5%, 69%);
-  --success-700: hsl(151, 40.2%, 54.1%);
-  --success-800: hsl(151, 55%, 41.5%);
-  --success-900: hsl(152, 57.5%, 37.6%);
-  --success-1000: hsl(153, 67%, 28.5%);
-  --success-1100: hsl(155, 40%, 16.5%);
-  --success-A100: hsl(138, 62.5%, 96.9%);
-  --success-A200: hsl(139, 55.2%, 94.5%);
-  --success-A400: hsl(141, 43.7%, 86%);
-  --success-A700: hsl(151, 55%, 41.5%);
-  --success-lighter: hsl(139, 55.2%, 94.5%);
-  --success-light: hsl(141, 43.7%, 86%);
-  --success-main: hsl(151, 55%, 41.5%);
-  --success-main8p: hsla(151, 55%, 41.5%, 0.08);
-  --success-main50p: hsla(151, 55%, 41.5%, 0.5);
-  --success-dark: hsl(152, 57.5%, 37.6%);
-  --success-darker: hsl(153, 67%, 28.5%);
-  --success-hover: hsl(139, 55.2%, 94.5%);
-  --success-selected: hsl(141, 43.7%, 86%);
-  --success-outlinedBorder: hsl(151, 55%, 41.5%);
-  --success-contrastText: hsl(155, 40%, 16.5%);
-  --warning-50: hsl(39, 70%, 99%);
-  --warning-100: hsl(40, 100%, 96.5%);
-  --warning-200: hsl(45, 100%, 90.8%);
-  --warning-300: hsl(44, 100%, 85.8%);
-  --warning-400: hsl(40, 100%, 81.5%);
-  --warning-500: hsl(39, 83.6%, 75.4%);
-  --warning-600: hsl(37, 66.9%, 68.2%);
-  --warning-700: hsl(35, 59.8%, 60%);
-  --warning-800: hsl(42, 100%, 62%);
-  --warning-900: hsl(42, 100%, 55%);
-  --warning-1000: hsl(25, 50%, 38%);
-  --warning-1100: hsl(25, 40%, 22%);
-  --warning-A100: hsl(40, 100%, 96.5%);
-  --warning-A200: hsl(45, 100%, 90.8%);
-  --warning-A400: hsl(40, 100%, 81.5%);
-  --warning-A700: hsl(42, 100%, 62%);
-  --warning-lighter: hsl(45, 100%, 90.8%);
-  --warning-light: hsl(40, 100%, 81.5%);
-  --warning-main: hsl(42, 100%, 62%);
-  --warning-main8p: hsla(42, 100%, 62%, 0.08);
-  --warning-main50p: hsla(42, 100%, 62%, 0.5);
-  --warning-dark: hsl(42, 100%, 55%);
-  --warning-darker: hsl(25, 50%, 38%);
-  --warning-hover: hsl(45, 100%, 90.8%);
-  --warning-selected: hsl(40, 100%, 81.5%);
-  --warning-outlinedBorder: hsl(42, 100%, 62%);
-  --warning-contrastText: hsl(25, 40%, 22%);
-  --error-50: hsl(359, 100%, 99.4%);
-  --error-100: hsl(0, 100%, 98.4%);
-  --error-200: hsl(360, 100%, 96.8%);
-  --error-300: hsl(360, 97.9%, 94.8%);
-  --error-400: hsl(360, 90.2%, 91.9%);
-  --error-500: hsl(360, 81.7%, 87.8%);
-  --error-600: hsl(359, 74.2%, 81.7%);
-  --error-700: hsl(359, 69.5%, 74.3%);
-  --error-800: hsl(358, 75%, 59%);
-  --error-900: hsl(358, 67.4%, 54.6%);
-  --error-1000: hsl(358, 65%, 47%);
-  --error-1100: hsl(350, 63%, 24%);
-  --error-A100: hsl(0, 100%, 98.4%);
-  --error-A200: hsl(360, 100%, 96.8%);
-  --error-A400: hsl(360, 90.2%, 91.9%);
-  --error-A700: hsl(358, 75%, 59%);
-  --error-lighter: hsl(360, 100%, 96.8%);
-  --error-light: hsl(360, 90.2%, 91.9%);
-  --error-main: hsl(358, 75%, 59%);
-  --error-main8p: hsla(358, 75%, 59%, 0.08);
-  --error-main50p: hsla(358, 75%, 59%, 0.5);
-  --error-dark: hsl(358, 67.4%, 54.6%);
-  --error-darker: hsl(358, 65%, 47%);
-  --error-hover: hsl(360, 100%, 96.8%);
-  --error-selected: hsl(360, 90.2%, 91.9%);
-  --error-outlinedBorder: hsl(358, 75%, 59%);
-  --error-contrastText: hsl(350, 63%, 24%);
-  --secondary-50: hsl(0, 0%, 99%);
-  --secondary-100: hsl(0, 0%, 97.5%);
-  --secondary-200: hsl(0, 0%, 94.6%);
-  --secondary-300: hsl(0, 0%, 92%);
-  --secondary-400: hsl(0, 0%, 89.5%);
-  --secondary-500: hsl(0, 0%, 86.8%);
-  --secondary-600: hsl(0, 0%, 83%);
-  --secondary-700: hsl(0, 0%, 73.2%);
-  --secondary-800: hsl(0, 0%, 55.2%);
-  --secondary-900: hsl(0, 0%, 50.3%);
-  --secondary-1000: hsl(0, 0%, 39.3%);
-  --secondary-1100: hsl(0, 0%, 12.5%);
-  --secondary-A100: hsl(0, 0%, 97.5%);
-  --secondary-A200: hsl(0, 0%, 94.6%);
-  --secondary-A400: hsl(0, 0%, 89.5%);
-  --secondary-A700: hsl(0, 0%, 55.2%);
-  --secondary-lighter: hsl(0, 0%, 94.6%);
-  --secondary-light: hsl(0, 0%, 89.5%);
-  --secondary-main: hsl(0, 0%, 86.8%);
-  --secondary-main8p: hsla(0, 0%, 55.2%, 0.08);
-  --secondary-main50p: hsla(0, 0%, 55.2%, 0.5);
-  --secondary-dark: hsl(0, 0%, 92%);
-  --secondary-darker: hsl(0, 0%, 39.3%);
-  --secondary-hover: hsl(0, 0%, 94.6%);
-  --secondary-selected: hsl(0, 0%, 89.5%);
-  --secondary-outlinedBorder: hsl(0, 0%, 73.2%);
-  --secondary-contrastText: hsl(0, 0%, 12.5%);
-  --default-50: hsl(0, 0%, 99%);
-  --default-100: hsl(0, 0%, 97.5%);
-  --default-200: hsl(0, 0%, 94.6%);
-  --default-300: hsl(0, 0%, 92%);
-  --default-400: hsl(0, 0%, 89.5%);
-  --default-500: hsl(0, 0%, 86.8%);
-  --default-600: hsl(0, 0%, 83%);
-  --default-700: hsl(0, 0%, 73.2%);
-  --default-800: hsl(0, 0%, 55.2%);
-  --default-900: hsl(0, 0%, 50.3%);
-  --default-1000: hsl(0, 0%, 39.3%);
-  --default-1100: hsl(0, 0%, 12.5%);
-  --default-A100: hsl(0, 0%, 97.5%);
-  --default-A200: hsl(0, 0%, 94.6%);
-  --default-A400: hsl(0, 0%, 89.5%);
-  --default-A700: hsl(0, 0%, 55.2%);
-  --default-lighter: hsl(0, 0%, 94.6%);
-  --default-light: hsl(0, 0%, 89.5%);
-  --default-main: hsl(0, 0%, 86.8%);
-  --default-main8p: hsla(0, 0%, 55.2%, 0.08);
-  --default-main50p: hsla(0, 0%, 55.2%, 0.5);
-  --default-dark: hsl(0, 0%, 92%);
-  --default-darker: hsl(0, 0%, 39.3%);
-  --default-hover: hsl(0, 0%, 94.6%);
-  --default-selected: hsl(0, 0%, 89.5%);
-  --default-outlinedBorder: hsl(0, 0%, 73.2%);
-  --default-contrastText: hsl(0, 0%, 12.5%);
-  --grey-50: hsl(0, 0%, 99%);
-  --grey-100: hsl(0, 0%, 97.5%);
-  --grey-200: hsl(0, 0%, 94.6%);
-  --grey-300: hsl(0, 0%, 92%);
-  --grey-400: hsl(0, 0%, 89.5%);
-  --grey-500: hsl(0, 0%, 86.8%);
-  --grey-600: hsl(0, 0%, 83%);
-  --grey-700: hsl(0, 0%, 73.2%);
-  --grey-800: hsl(0, 0%, 55.2%);
-  --grey-900: hsl(0, 0%, 50.3%);
-  --grey-A100: hsl(0, 0%, 97.5%);
-  --grey-A200: hsl(0, 0%, 94.6%);
-  --grey-A400: hsl(0, 0%, 89.5%);
-  --grey-A700: hsl(0, 0%, 55.2%);
-  --text-primary: hsl(0, 0%, 12.5%);
-  --text-secondary: hsl(0, 0%, 39.3%);
-  --text-disabled: hsl(0, 0%, 50.3%);
-  --action-primary: hsl(0, 0%, 12.5%);
-  --action-active: hsl(0, 0%, 50.3%);
-  --action-activeBackground: hsl(0, 0%, 94.6%);
-  --action-activatedOpacity: 0.5;
-  --action-hover: hsl(0, 0%, 92%);
-  --action-hoverOpacity: 0.5;
-  --action-selected: hsl(0, 0%, 89.5%);
-  --action-selectedOpacity: 0.5;
-  --action-disabled: hsl(0, 0%, 73.2%);
-  --action-disabledBackground: hsl(0, 0%, 92%);
-  --action-disabledOpacity: 0.5;
-  --action-focus: hsl(0, 0%, 92%);
-  --action-focusOpacity: 0.5;
-  --action-outlinedBorder: hsl(0, 0%, 83%);
-  --background-default: #ffffff;
-  --background-neutral: #ffffff;
-  --background-paper: hsl(0, 0%, 99%);
-  --background-modalElevation: #ffffff;
-  --background-paperElevation0: hsl(0, 0%, 97.5%);
-  --background-paperElevation1: hsl(0, 0%, 94.6%);
-  --background-paperElevation2: hsl(0, 0%, 92%);
-  --background-paperElevation3: hsl(0, 0%, 89.5%);
-  --background-paperElevation4: hsl(0, 0%, 86.8%);
-  --background-paperElevation5: hsl(0, 0%, 83%);
-  --background-paperElevation6: hsl(0, 0%, 73.2%);
-  --background-paperElevation7: hsl(0, 0%, 55.2%);
-  --background-paperElevation8: hsl(0, 0%, 50.3%);
-  --background-paperElevation9: hsl(0, 0%, 39.3%);
-  --chart-red-25: hsl(354, 65.7%, 33.2%);
-  --chart-red-50: hsl(358, 75%, 47.1%);
-  --chart-red-100: hsl(358, 75%, 59%);
-  --chart-red-text: hsl(350, 100%, 91%);
-  --chart-green-25: hsl(153, 50.3%, 24.4%);
-  --chart-green-50: hsl(151, 52.2%, 36.1%);
-  --chart-green-100: hsl(151, 55%, 41.5%);
-  --chart-green-text: hsl(144, 70%, 82%);
-  --chart-blue-25: hsl(211, 81.3%, 32.4%);
-  --chart-blue-50: hsl(211, 85.2%, 47.8%);
-  --chart-blue-100: hsl(206, 100%, 50%);
-  --chart-blue-text: hsl(205, 100%, 88%);
-  --chart-indigo-25: hsl(226, 53.3%, 36.6%);
-  --chart-indigo-50: hsl(226, 60%, 52%);
-  --chart-indigo-100: hsl(226, 70%, 55.5%);
-  --chart-indigo-text: hsl(235, 93%, 93%);
-  --chart-amber-25: hsl(35, 59%, 27.4%);
-  --chart-amber-50: hsl(36, 60.2%, 41.4%);
-  --chart-amber-100: hsl(42, 100%, 62%);
-  --chart-amber-text: hsl(41, 100%, 85%);
-  --chart-plum-25: hsl(295, 37.9%, 32.7%);
-  --chart-plum-50: hsl(292, 40.2%, 47.8%);
-  --chart-plum-100: hsl(292, 45%, 51%);
-  --chart-plum-text: hsl(300, 60%, 89.5%);
-  --chart-cyan-25: hsl(192, 56.6%, 26.5%);
-  --chart-cyan-50: hsl(192, 59.8%, 39%);
-  --chart-cyan-100: hsl(190, 95%, 39%);
-  --chart-cyan-text: hsl(190, 80%, 84%);
-  --chart-crimson-25: hsl(336, 62.7%, 32.8%);
-  --chart-crimson-50: hsl(336, 80%, 45.1%);
-  --chart-crimson-100: hsl(336, 80%, 57.8%);
-  --chart-crimson-text: hsl(330, 90%, 91%);
-  --chart-gray-25: hsl(0, 0%, 29.1%);
-  --chart-gray-50: hsl(0, 0%, 37.5%);
-  --chart-gray-100: hsl(0, 0%, 43%);
-  --chart-gray-text: hsl(0, 0%, 93.5%);
-  --chart-orange-25: hsl(25, 67.7%, 29.4%);
-  --chart-orange-50: hsl(25, 70.3%, 44.9%);
-  --chart-orange-100: hsl(24, 94%, 50%);
-  --chart-orange-text: hsl(30, 100%, 88%);
-  --chart-previous-25: hsl(0, 0%, 29.1%);
-  --chart-previous-50: hsl(0, 0%, 37.5%);
-  --chart-previous-100: hsl(0, 0%, 43%);
-  --chart-previous-text: hsl(0, 0%, 93.5%);
-  --chart-primary-25: hsl(211, 81.3%, 32.4%);
-  --chart-primary-50: hsl(211, 85.2%, 47.8%);
-  --chart-primary-100: hsl(206, 100%, 50%);
-  --chart-primary-text: hsl(205, 100%, 88%);
-  --chart-secondary-25: hsl(295, 37.9%, 32.7%);
-  --chart-secondary-50: hsl(292, 40.2%, 47.8%);
-  --chart-secondary-100: hsl(292, 45%, 51%);
-  --chart-secondary-text: hsl(300, 60%, 89.5%);
-  --chart-success-25: hsl(153, 50.3%, 24.4%);
-  --chart-success-50: hsl(151, 52.2%, 36.1%);
-  --chart-success-100: hsl(151, 55%, 41.5%);
-  --chart-success-text: hsl(144, 70%, 82%);
-  --chart-info-25: hsl(226, 53.3%, 36.6%);
-  --chart-info-50: hsl(226, 60%, 52%);
-  --chart-info-100: hsl(226, 70%, 55.5%);
-  --chart-info-text: hsl(235, 93%, 93%);
-  --chart-warning-25: hsl(35, 59%, 27.4%);
-  --chart-warning-50: hsl(36, 60.2%, 41.4%);
-  --chart-warning-100: hsl(42, 100%, 62%);
-  --chart-warning-text: hsl(41, 100%, 85%);
-  --chart-error-25: hsl(354, 65.7%, 33.2%);
-  --chart-error-50: hsl(358, 75%, 47.1%);
-  --chart-error-100: hsl(358, 75%, 59%);
-  --chart-error-text: hsl(350, 100%, 91%);
-  --divider: hsl(0, 0%, 86.8%);
-  /*our styles*/
-  --border-radius-button: 25px;
-}
+@import "./v4/colors.css";
+@import "./v4/border-radius.css";
+@import "./v4/elevations.css";
+@import "./v4/spacings.css";

package/components/ThemeWrapper/ThemeWrapper.vue.d.ts

@@ -1,7 +1,7 @@
 declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<{
-    version: string;
+    version: 'v3' | 'v4';
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
-    version: string;
+    version: 'v3' | 'v4';
 }>>>, {}>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;

package/components/appTrigger/AppTrigger.vue.js

@@ -3,7 +3,7 @@ import AppIcon from '../appIcon/AppIcon.vue.js';
 import { AppTriggerTestIdModifiers } from '../../testids/index.vue.js';
 /* empty css                                                                     */import _export_sfc from '../../_virtual/plugin-vue_export-helper.vue.js';
 import Text from '../typography/Text.vue.js';
-import Icon from '../icon/Icon.vue.js';
+import Icon from '../icon/v3/Icon.vue.js';
 /* empty css                                                                   */import IconButton from '../button/v3/IconButton.vue.js';
 import _sfc_main$1 from '../tooltip/Tooltip.vue.js';
 /* empty css                                                                         *//* empty css                                                            */
@@ -193,6 +193,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-var AppTrigger = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-1313b5bc"]]);
+var AppTrigger = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-72f8c466"]]);
 
 export { AppTrigger as default };

package/components/autocompleteDropdown/AutocompleteDropdown.vue.js

@@ -1,7 +1,7 @@
 import { defineComponent, ref, computed, watch, nextTick, openBlock, createBlock, unref, mergeProps, withModifiers, withCtx, createVNode, renderSlot, createTextVNode, toDisplayString } from 'vue';
 import Dropdown from '../dropdown/v3/Dropdown.vue.js';
 /* empty css                                                                     */import _export_sfc from '../../_virtual/plugin-vue_export-helper.vue.js';
-/* empty css                                                                  *//* empty css                                                            *//* empty css                                                                    */import '@vue/shared';
+/* empty css                                                                  *//* empty css                                                               *//* empty css                                                                    */import '@vue/shared';
 /* empty css                                                                         *//* empty css                                                                        *//* empty css                                                                   *//* empty css                                                                           *//* empty css                                                                       *//* empty css                                                                               */import 'floating-vue';
 /* empty css                                                      *//* empty css                                                                         *//* empty css                                                                              */import GroupOption from './GroupOption.vue.js';
 import AutocompleteInput from './AutocompleteInput.vue.js';

package/components/autocompleteDropdown/AutocompleteInput.vue.js

@@ -1,5 +1,5 @@
 import { defineComponent, ref, computed, watch, openBlock, createElementBlock, normalizeClass, unref, withModifiers, Fragment, renderList, renderSlot, createVNode, withCtx, createTextVNode, toDisplayString, createElementVNode } from 'vue';
-import Icon from '../icon/Icon.vue.js';
+import Icon from '../icon/v3/Icon.vue.js';
 import Text from '../typography/Text.vue.js';
 import { useDropdownContext } from '../dropdown/common/DropdownContext.vue.js';
 import { DEFAULT_PLACEHOLDER } from './consts.vue.js';
@@ -94,6 +94,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-var AutocompleteInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-a73b488c"]]);
+var AutocompleteInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-169f694c"]]);
 
 export { AutocompleteInput as default };