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

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,8 +1,10 @@
-declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<{
-    version: string;
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<{
+    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";
+}>>>, {}>, {
+    default?(_: {}): any;
+}>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 type __VLS_TypePropsToRuntimeProps<T> = {
@@ -13,3 +15,8 @@ type __VLS_TypePropsToRuntimeProps<T> = {
         required: true;
     };
 };
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/components/appIcon/AppIcon.vue.d.ts

@@ -25,7 +25,10 @@ type __VLS_TypePropsToRuntimeProps<T> = {
     };
 };
 type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? P[K] & {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
         default: D[K];
-    } : P[K];
+    }> : P[K];
 };
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};