@infomaximum/ui-kit 0.9.1

package/dist/components/Button/Button.styles.d.ts

@@ -0,0 +1,958 @@
+import { ButtonDefaultStylesProps } from './Button.types';
+export declare const getButtonDefaultStyle: ({ variant, color, loading, disabled, block, hasIconOnly, }: ButtonDefaultStylesProps) => {
+    wrapper: (theme: {
+        opacityLoading: "65%";
+        iconXS: 8;
+        iconS: 12;
+        iconM: 16;
+        iconL: 24;
+        iconXL: 32;
+        borderRadiusM: 4;
+        borderRadiusL: 8;
+        spaceXS: 4;
+        spaceM: 8;
+        spaceL: 12;
+        spaceXL: 16;
+        marginXS: 4;
+        marginS: 6;
+        marginM: 8;
+        marginL: 12;
+        paddingXS: 4;
+        paddingS: 6;
+        paddingM: 8;
+        paddingL: 12;
+        paddingXL: 16;
+        controlInteractiveSize: 16;
+        controlHeightM: 28;
+        positiveBase: "#52C41A";
+        positiveHover: "#73D13D";
+        positiveActive: "#389E0D";
+        positiveBg: "#F6FFED";
+        positiveBorder: "#B7EB8F";
+        positiveHoverInverse: "#F6FFED";
+        positiveActiveInverse: "#D9F7BE";
+        fieldFocused: `rgba(${number}, ${number}, ${number}, 0.5)`;
+        fieldFocusedDanger: `rgba(${number}, ${number}, ${number}, 0.5)`;
+        tagNeutralText: "#262626";
+        tagNeutralBg: "#F5F5F5";
+        tagNeutralBorder: "#D9D9D9";
+        tagNeutralContrast: "#8C8C8C";
+        tagRedText: "#F5222D";
+        tagRedBg: "#FFF1F0";
+        tagRedBorder: "#FFA39E";
+        tagRedContrast: "#F5222D";
+        tagOrangeText: "#FA8C16";
+        tagOrangeBg: "#FFF7E6";
+        tagOrangeBorder: "#FFD591";
+        tagOrangeContrast: "#FA8C16";
+        tagYellowText: "#D4B106";
+        tagYellowBg: "#FEFFE6";
+        tagYellowBorder: "#FFEC3D";
+        tagYellowContrast: "#D4B106";
+        tagGreenText: "#52C41A";
+        tagGreenBg: "#F6FFED";
+        tagGreenBorder: "#B7EB8F";
+        tagGreenContrast: "#52C41A";
+        tagCyanText: "#13C2C2";
+        tagCyanBg: "#E6FFFB";
+        tagCyanBorder: "#87E8DE";
+        tagCyanContrast: "#13C2C2";
+        tagBlueText: "#1677FF";
+        tagBlueBg: "#E6F4FF";
+        tagBlueBorder: "#91CAFF";
+        tagBlueContrast: "#1677FF";
+        tagPurpleText: "#722ED1";
+        tagPurpleBg: "#F9F0FF";
+        tagPurpleBorder: "#D3ADF7";
+        tagPurpleContrast: "#722ED1";
+        tagMagentaText: "#EB2F96";
+        tagMagentaBg: "#FFF0F6";
+        tagMagentaBorder: "#FFADD2";
+        tagMagentaContrast: "#EB2F96";
+        infoBase: "#1677FF";
+        infoHover: "#4096FF";
+        infoActive: "#0958D9";
+        infoBg: "#E6F4FF";
+        infoBorder: "#91CAFF";
+        infoHoverInverse: "#E6F4FF";
+        infoActiveInverse: "#BAE0FF";
+        warningBase: "#FA8C16";
+        warningHover: "#FFA940";
+        warningActive: "#D46B08";
+        warningBg: "#FFF7E6";
+        warningBorder: "#FFD591";
+        warningHoverInverse: "#FFF7E6";
+        warningActiveInverse: "#FFE7BA";
+        dangerBase: "#FF4D4F";
+        dangerHover: "#FF7875";
+        dangerActive: "#CF1322";
+        dangerBg: "#FFF1F0";
+        dangerBorder: "#FFA39E";
+        dangerHoverInverse: "#FFF1F0";
+        dangerActiveInverse: "#FFCCC7";
+        lineDivider: "#E5E5E5";
+        lineBorder: "#D9D9D9";
+        lineBorderTransparent: `rgba(${number}, ${number}, ${number}, 0.1)`;
+        lineBorderTransparentContrast: `rgba(${number}, ${number}, ${number}, 0.3)`;
+        bgPrimary: "#FFFFFF";
+        bgComplimentary: "#FAFAFA";
+        bgSecondary: "#F0F0F0";
+        bgContainer: "#FFFFFF";
+        bgContainerHover: "#F5F5F5";
+        bgContainerActive: "#D9D9D9";
+        bgContainerDisabled: "#F0F0F0";
+        bgContainerDisabledContrast: "#D9D9D9";
+        bgContainerComplimentary: "#FAFAFA";
+        bgContainerInverse: "#262626";
+        bgContainerInverseHover: "#434343";
+        bgContainerInverseActive: "#1F1F1F";
+        bgControl: "#BFBFBF";
+        bgControlHover: "#8C8C8C";
+        bgIconHover: `rgba(${number}, ${number}, ${number}, 0.05)`;
+        bgIconActive: `rgba(${number}, ${number}, ${number}, 0.1)`;
+        bgRail: `rgba(${number}, ${number}, ${number}, 0.05)`;
+        bgRailHover: `rgba(${number}, ${number}, ${number}, 0.1)`;
+        bgFloat: "#FFFFFF";
+        bgFloatContrast: "#262626";
+        bgMask: `rgba(${number}, ${number}, ${number}, 0.3)`;
+        textPrimary: "#262626";
+        textComplimentary: "#595959";
+        textSecondary: "#8C8C8C";
+        textDisabled: "#8C8C8C";
+        textContrast: "#FFFFFF";
+        textIcon: `rgba(${number}, ${number}, ${number}, 0.3)`;
+        textIconHover: `rgba(${number}, ${number}, ${number}, 0.7)`;
+        textIconDisabled: `rgba(${number}, ${number}, ${number}, 0.1)`;
+        textIconContrast: `rgba(${number}, ${number}, ${number}, 0.8)`;
+        textIconContrastHover: "#FFFFFF";
+        textIconContrastDisabled: `rgba(${number}, ${number}, ${number}, 0.3)`;
+        textHint: "#BFBFBF";
+        textLink: "#0CB3B3";
+        textLinkHover: "#50CCC4";
+        textLinkActive: "#03888C";
+        primaryBase: "#0CB3B3";
+        primaryHover: "#50CCC4";
+        primaryActive: "#03888C";
+        primaryBg: "#E1FAF6";
+        primaryBorder: "#77D9CF";
+        primaryHoverInverse: "#E1FAF6";
+        primaryActiveInverse: "#A3E6DD";
+        typography: {
+            readonly header1: {
+                readonly fontFamily: "Roboto";
+                readonly fontSize: 24;
+                readonly lineHeight: "32px";
+            };
+            readonly header2: {
+                readonly fontFamily: "Roboto";
+                readonly fontSize: 16;
+                readonly lineHeight: "24px";
+            };
+            readonly subheader1: {
+                readonly fontFamily: "Roboto";
+                readonly fontSize: 14;
+                readonly lineHeight: "20px";
+            };
+            readonly subheader2: {
+                readonly fontFamily: "Roboto";
+                readonly fontSize: 12;
+                readonly lineHeight: "20px";
+            };
+            readonly body1: {
+                readonly fontFamily: "Roboto";
+                readonly fontSize: 16;
+                readonly lineHeight: "24px";
+            };
+            readonly body2: {
+                readonly fontFamily: "Roboto";
+                readonly fontSize: 14;
+                readonly lineHeight: "20px";
+            };
+            readonly body3: {
+                readonly fontFamily: "Roboto";
+                readonly fontSize: 12;
+                readonly lineHeight: "20px";
+            };
+            readonly code1: {
+                readonly fontFamily: "JetBrains-Mono";
+                readonly fontSize: 13;
+                readonly lineHeight: "18px";
+            };
+        };
+        shadow1: `0 1px 2px -2px rgba(${number}, ${number}, ${number}, 0.16), 0 3px 6px 0 rgba(${number}, ${number}, ${number}, 0.12), 0 5px 12px 4px rgba(${number}, ${number}, ${number}, 0.09)`;
+        shadow2: `0 3px 6px -4px rgba(${number}, ${number}, ${number}, 0.12), 0 6px 16px 0 rgba(${number}, ${number}, ${number}, 0.08), 0 9px 28px 8px rgba(${number}, ${number}, ${number}, 0.05)`;
+        shadow3: `0 6px 16px -8px rgba(${number}, ${number}, ${number}, 0.08), 0 9px 28px 0 rgba(${number}, ${number}, ${number}, 0.05), 0 12px 48px 16px rgba(${number}, ${number}, ${number}, 0.03)`;
+        x0: 0;
+        x05: 2;
+        x1: 4;
+        x1AndHalf: 6;
+        x2: 8;
+        x3: 12;
+        x3AndHalf: 14;
+        x4: 16;
+        x5: 20;
+        x6: 24;
+        x7: 28;
+        x8: 32;
+        x10: 40;
+        x12: 48;
+        x16: 64;
+        magenta100: "#520339";
+        magenta90: "#780650";
+        magenta80: "#9E1068";
+        magenta70: "#C41D7F";
+        magenta60: "#EB2F96";
+        magenta50: "#F759AB";
+        magenta40: "#FF85C0";
+        magenta30: "#FFADD2";
+        magenta20: "#FFD6E7";
+        magenta10: "#FFF0F6";
+        purple100: "#120338";
+        purple90: "#22075E";
+        purple80: "#391085";
+        purple70: "#531DAB";
+        purple60: "#722ED1";
+        purple50: "#9254DE";
+        purple40: "#B37FEB";
+        purple30: "#D3ADF7";
+        purple20: "#EFDBFF";
+        purple10: "#F9F0FF";
+        blue100: "#001D66";
+        blue90: "#002C8C";
+        blue80: "#003EB3";
+        blue70: "#0958D9";
+        blue60: "#1677FF";
+        blue50: "#4096FF";
+        blue40: "#69B1FF";
+        blue30: "#91CAFF";
+        blue20: "#BAE0FF";
+        blue10: "#E6F4FF";
+        cyan100: "#002329";
+        cyan90: "#00474F";
+        cyan80: "#006D75";
+        cyan70: "#08979C";
+        cyan60: "#13C2C2";
+        cyan50: "#36CFC9";
+        cyan40: "#5CDBD3";
+        cyan30: "#87E8DE";
+        cyan20: "#B5F5EC";
+        cyan10: "#E6FFFB";
+        green100: "#092B00";
+        green90: "#135200";
+        green80: "#237804";
+        green70: "#389E0D";
+        green60: "#52C41A";
+        green50: "#73D13D";
+        green40: "#95DE64";
+        green30: "#B7EB8F";
+        green20: "#D9F7BE";
+        green10: "#F6FFED";
+        lime100: "#254000";
+        lime90: "#254000";
+        lime80: "#254000";
+        lime70: "#254000";
+        lime60: "#254000";
+        lime50: "#254000";
+        lime40: "#254000";
+        lime30: "#254000";
+        lime20: "#254000";
+        lime10: "#254000";
+        yellow100: "#614700";
+        yellow90: "#876800";
+        yellow80: "#AD8B00";
+        yellow70: "#D4B106";
+        yellow60: "#FADB14";
+        yellow50: "#FFEC3D";
+        yellow40: "#FFF566";
+        yellow30: "#FFFB8F";
+        yellow20: "#FFFFB8";
+        yellow10: "#FEFFE6";
+        gold100: "#613400";
+        gold90: "#613400";
+        gold80: "#613400";
+        gold70: "#613400";
+        gold60: "#613400";
+        gold50: "#613400";
+        gold40: "#613400";
+        gold30: "#613400";
+        gold20: "#613400";
+        gold10: "#613400";
+        orange100: "#612500";
+        orange90: "#873800";
+        orange80: "#AD4E00";
+        orange70: "#D46B08";
+        orange60: "#FA8C16";
+        orange50: "#FFA940";
+        orange40: "#FFC069";
+        orange30: "#FFD591";
+        orange20: "#FFE7BA";
+        orange10: "#FFF7E6";
+        volcano100: "#610B00";
+        volcano90: "#871400";
+        volcano80: "#AD2102";
+        volcano70: "#D4380D";
+        volcano60: "#FA541C";
+        volcano50: "#FF7A45";
+        volcano40: "#FF9C6E";
+        volcano30: "#FFBB96";
+        volcano20: "#FFD8BF";
+        volcano10: "#FFF2E8";
+        red100: "#5C0011";
+        red90: "#820014";
+        red80: "#A8071A";
+        red70: "#CF1322";
+        red60: "#F5222D";
+        red50: "#FF4D4F";
+        red40: "#FF7875";
+        red30: "#FFA39E";
+        red20: "#FFCCC7";
+        red10: "#FFF1F0";
+        thrush100: "#00161A";
+        thrush90: "#003940";
+        thrush80: "#005F66";
+        thrush70: "#03888C";
+        thrush60: "#0CB3B3";
+        thrush50: "#2CBFBA";
+        thrush40: "#50CCC4";
+        thrush30: "#77D9CF";
+        thrush20: "#A3E6DD";
+        thrush10: "#E1FAF6";
+        transparentWhite90: `rgba(${number}, ${number}, ${number}, 0.9)`;
+        transparentWhite80: `rgba(${number}, ${number}, ${number}, 0.8)`;
+        transparentWhite70: `rgba(${number}, ${number}, ${number}, 0.7)`;
+        transparentWhite60: `rgba(${number}, ${number}, ${number}, 0.6)`;
+        transparentWhite50: `rgba(${number}, ${number}, ${number}, 0.5)`;
+        transparentWhite40: `rgba(${number}, ${number}, ${number}, 0.4)`;
+        transparentWhite30: `rgba(${number}, ${number}, ${number}, 0.3)`;
+        transparentWhite20: `rgba(${number}, ${number}, ${number}, 0.2)`;
+        transparentWhite10: `rgba(${number}, ${number}, ${number}, 0.1)`;
+        transparentWhite5: `rgba(${number}, ${number}, ${number}, 0.05)`;
+        transparentBlack90: `rgba(${number}, ${number}, ${number}, 0.9)`;
+        transparentBlack80: `rgba(${number}, ${number}, ${number}, 0.8)`;
+        transparentBlack70: `rgba(${number}, ${number}, ${number}, 0.7)`;
+        transparentBlack60: `rgba(${number}, ${number}, ${number}, 0.6)`;
+        transparentBlack50: `rgba(${number}, ${number}, ${number}, 0.5)`;
+        transparentBlack40: `rgba(${number}, ${number}, ${number}, 0.4)`;
+        transparentBlack30: `rgba(${number}, ${number}, ${number}, 0.3)`;
+        transparentBlack20: `rgba(${number}, ${number}, ${number}, 0.2)`;
+        transparentBlack10: `rgba(${number}, ${number}, ${number}, 0.1)`;
+        transparentBlack5: `rgba(${number}, ${number}, ${number}, 0.05)`;
+        neutral130: "#000000";
+        neutral120: "#141414";
+        neutral110: "#1F1F1F";
+        neutral100: "#262626";
+        neutral90: "#434343";
+        neutral80: "#595959";
+        neutral75: "#737373";
+        neutral70: "#8C8C8C";
+        neutral65: "#ABABAB";
+        neutral60: "#BFBFBF";
+        neutral50: "#D9D9D9";
+        neutral45: "#E5E5E5";
+        neutral40: "#F0F0F0";
+        neutral30: "#F5F5F5";
+        neutral20: "#FAFAFA";
+        neutral10: "#FFFFFF";
+    }) => {
+        width: string;
+        background: string;
+        ":hover": {
+            background: string;
+        };
+        ":active": {
+            background: string;
+        };
+        color: "#FFFFFF";
+        border: string;
+        fontFamily: "Roboto";
+        fontSize: 14;
+        lineHeight: "20px";
+        padding: string;
+        height: 28;
+        boxSizing: "border-box";
+        borderRadius: 4;
+        display: string;
+        justifyContent: string;
+        gap: 4;
+        alignItems: string;
+        opacity: number | "65%";
+        cursor: string;
+    } | {
+        width: string;
+        border: string;
+        color: string;
+        ":hover": {
+            border: string;
+            color: string;
+        };
+        ":active": {
+            border: string;
+            color: string;
+        };
+        background: "#FFFFFF";
+        fontFamily: "Roboto";
+        fontSize: 14;
+        lineHeight: "20px";
+        padding: string;
+        height: 28;
+        boxSizing: "border-box";
+        borderRadius: 4;
+        display: string;
+        justifyContent: string;
+        gap: 4;
+        alignItems: string;
+        opacity: number | "65%";
+        cursor: string;
+    } | {
+        width: string;
+        background: string;
+        color: string;
+        ":hover": {
+            background: string;
+            color: string;
+        };
+        ":active": {
+            background: string;
+            color: string;
+        };
+        border: string;
+        fontFamily: "Roboto";
+        fontSize: 14;
+        lineHeight: "20px";
+        padding: string;
+        height: 28;
+        boxSizing: "border-box";
+        borderRadius: 4;
+        display: string;
+        justifyContent: string;
+        gap: 4;
+        alignItems: string;
+        opacity: number | "65%";
+        cursor: string;
+    } | {
+        width: string;
+        border: string;
+        background: string;
+        color: "#8C8C8C";
+        fontFamily: "Roboto";
+        fontSize: 14;
+        lineHeight: "20px";
+        padding: string;
+        height: 28;
+        boxSizing: "border-box";
+        borderRadius: 4;
+        display: string;
+        justifyContent: string;
+        gap: 4;
+        alignItems: string;
+        opacity: number | "65%";
+        cursor: string;
+    } | {
+        width: string;
+        border: string;
+        background: string;
+        textDecoration: string;
+        ":hover": {
+            border: string;
+            color?: string | undefined;
+        };
+        ":active": {
+            border: string;
+            color?: string | undefined;
+        };
+        color: string;
+        fontFamily: "Roboto";
+        fontSize: 14;
+        lineHeight: "20px";
+        padding: string;
+        height: 28;
+        boxSizing: "border-box";
+        borderRadius: 4;
+        display: string;
+        justifyContent: string;
+        gap: 4;
+        alignItems: string;
+        opacity: number | "65%";
+        cursor: string;
+    } | {
+        width: string;
+        background: string;
+        ":hover": {
+            background: string;
+        };
+        ":active": {
+            background: string;
+        };
+        color: "#FFFFFF";
+        border: string;
+        fontFamily: "Roboto";
+        fontSize: 14;
+        lineHeight: "20px";
+        padding: string;
+        height: string;
+        boxSizing: "border-box";
+        borderRadius: 4;
+        display: string;
+        justifyContent: string;
+        gap: 4;
+        alignItems: string;
+        opacity: number | "65%";
+        cursor: string;
+    } | {
+        width: string;
+        border: string;
+        color: string;
+        ":hover": {
+            border: string;
+            color: string;
+        };
+        ":active": {
+            border: string;
+            color: string;
+        };
+        background: "#FFFFFF";
+        fontFamily: "Roboto";
+        fontSize: 14;
+        lineHeight: "20px";
+        padding: string;
+        height: string;
+        boxSizing: "border-box";
+        borderRadius: 4;
+        display: string;
+        justifyContent: string;
+        gap: 4;
+        alignItems: string;
+        opacity: number | "65%";
+        cursor: string;
+    } | {
+        width: string;
+        background: string;
+        color: string;
+        ":hover": {
+            background: string;
+            color: string;
+        };
+        ":active": {
+            background: string;
+            color: string;
+        };
+        border: string;
+        fontFamily: "Roboto";
+        fontSize: 14;
+        lineHeight: "20px";
+        padding: string;
+        height: string;
+        boxSizing: "border-box";
+        borderRadius: 4;
+        display: string;
+        justifyContent: string;
+        gap: 4;
+        alignItems: string;
+        opacity: number | "65%";
+        cursor: string;
+    } | {
+        width: string;
+        border: string;
+        background: string;
+        color: "#8C8C8C";
+        fontFamily: "Roboto";
+        fontSize: 14;
+        lineHeight: "20px";
+        padding: string;
+        height: string;
+        boxSizing: "border-box";
+        borderRadius: 4;
+        display: string;
+        justifyContent: string;
+        gap: 4;
+        alignItems: string;
+        opacity: number | "65%";
+        cursor: string;
+    } | {
+        width: string;
+        border: string;
+        background: string;
+        textDecoration: string;
+        ":hover": {
+            border: string;
+            color?: string | undefined;
+        };
+        ":active": {
+            border: string;
+            color?: string | undefined;
+        };
+        color: string;
+        fontFamily: "Roboto";
+        fontSize: 14;
+        lineHeight: "20px";
+        padding: string;
+        height: string;
+        boxSizing: "border-box";
+        borderRadius: 4;
+        display: string;
+        justifyContent: string;
+        gap: 4;
+        alignItems: string;
+        opacity: number | "65%";
+        cursor: string;
+    };
+    iconWrapper: (theme: {
+        opacityLoading: "65%";
+        iconXS: 8;
+        iconS: 12;
+        iconM: 16;
+        iconL: 24;
+        iconXL: 32;
+        borderRadiusM: 4;
+        borderRadiusL: 8;
+        spaceXS: 4;
+        spaceM: 8;
+        spaceL: 12;
+        spaceXL: 16;
+        marginXS: 4;
+        marginS: 6;
+        marginM: 8;
+        marginL: 12;
+        paddingXS: 4;
+        paddingS: 6;
+        paddingM: 8;
+        paddingL: 12;
+        paddingXL: 16;
+        controlInteractiveSize: 16;
+        controlHeightM: 28;
+        positiveBase: "#52C41A";
+        positiveHover: "#73D13D";
+        positiveActive: "#389E0D";
+        positiveBg: "#F6FFED";
+        positiveBorder: "#B7EB8F";
+        positiveHoverInverse: "#F6FFED";
+        positiveActiveInverse: "#D9F7BE";
+        fieldFocused: `rgba(${number}, ${number}, ${number}, 0.5)`;
+        fieldFocusedDanger: `rgba(${number}, ${number}, ${number}, 0.5)`;
+        tagNeutralText: "#262626";
+        tagNeutralBg: "#F5F5F5";
+        tagNeutralBorder: "#D9D9D9";
+        tagNeutralContrast: "#8C8C8C";
+        tagRedText: "#F5222D";
+        tagRedBg: "#FFF1F0";
+        tagRedBorder: "#FFA39E";
+        tagRedContrast: "#F5222D";
+        tagOrangeText: "#FA8C16";
+        tagOrangeBg: "#FFF7E6";
+        tagOrangeBorder: "#FFD591";
+        tagOrangeContrast: "#FA8C16";
+        tagYellowText: "#D4B106";
+        tagYellowBg: "#FEFFE6";
+        tagYellowBorder: "#FFEC3D";
+        tagYellowContrast: "#D4B106";
+        tagGreenText: "#52C41A";
+        tagGreenBg: "#F6FFED";
+        tagGreenBorder: "#B7EB8F";
+        tagGreenContrast: "#52C41A";
+        tagCyanText: "#13C2C2";
+        tagCyanBg: "#E6FFFB";
+        tagCyanBorder: "#87E8DE";
+        tagCyanContrast: "#13C2C2";
+        tagBlueText: "#1677FF";
+        tagBlueBg: "#E6F4FF";
+        tagBlueBorder: "#91CAFF";
+        tagBlueContrast: "#1677FF";
+        tagPurpleText: "#722ED1";
+        tagPurpleBg: "#F9F0FF";
+        tagPurpleBorder: "#D3ADF7";
+        tagPurpleContrast: "#722ED1";
+        tagMagentaText: "#EB2F96";
+        tagMagentaBg: "#FFF0F6";
+        tagMagentaBorder: "#FFADD2";
+        tagMagentaContrast: "#EB2F96";
+        infoBase: "#1677FF";
+        infoHover: "#4096FF";
+        infoActive: "#0958D9";
+        infoBg: "#E6F4FF";
+        infoBorder: "#91CAFF";
+        infoHoverInverse: "#E6F4FF";
+        infoActiveInverse: "#BAE0FF";
+        warningBase: "#FA8C16";
+        warningHover: "#FFA940";
+        warningActive: "#D46B08";
+        warningBg: "#FFF7E6";
+        warningBorder: "#FFD591";
+        warningHoverInverse: "#FFF7E6";
+        warningActiveInverse: "#FFE7BA";
+        dangerBase: "#FF4D4F";
+        dangerHover: "#FF7875";
+        dangerActive: "#CF1322";
+        dangerBg: "#FFF1F0";
+        dangerBorder: "#FFA39E";
+        dangerHoverInverse: "#FFF1F0";
+        dangerActiveInverse: "#FFCCC7";
+        lineDivider: "#E5E5E5";
+        lineBorder: "#D9D9D9";
+        lineBorderTransparent: `rgba(${number}, ${number}, ${number}, 0.1)`;
+        lineBorderTransparentContrast: `rgba(${number}, ${number}, ${number}, 0.3)`;
+        bgPrimary: "#FFFFFF";
+        bgComplimentary: "#FAFAFA";
+        bgSecondary: "#F0F0F0";
+        bgContainer: "#FFFFFF";
+        bgContainerHover: "#F5F5F5";
+        bgContainerActive: "#D9D9D9";
+        bgContainerDisabled: "#F0F0F0";
+        bgContainerDisabledContrast: "#D9D9D9";
+        bgContainerComplimentary: "#FAFAFA";
+        bgContainerInverse: "#262626";
+        bgContainerInverseHover: "#434343";
+        bgContainerInverseActive: "#1F1F1F";
+        bgControl: "#BFBFBF";
+        bgControlHover: "#8C8C8C";
+        bgIconHover: `rgba(${number}, ${number}, ${number}, 0.05)`;
+        bgIconActive: `rgba(${number}, ${number}, ${number}, 0.1)`;
+        bgRail: `rgba(${number}, ${number}, ${number}, 0.05)`;
+        bgRailHover: `rgba(${number}, ${number}, ${number}, 0.1)`;
+        bgFloat: "#FFFFFF";
+        bgFloatContrast: "#262626";
+        bgMask: `rgba(${number}, ${number}, ${number}, 0.3)`;
+        textPrimary: "#262626";
+        textComplimentary: "#595959";
+        textSecondary: "#8C8C8C";
+        textDisabled: "#8C8C8C";
+        textContrast: "#FFFFFF";
+        textIcon: `rgba(${number}, ${number}, ${number}, 0.3)`;
+        textIconHover: `rgba(${number}, ${number}, ${number}, 0.7)`;
+        textIconDisabled: `rgba(${number}, ${number}, ${number}, 0.1)`;
+        textIconContrast: `rgba(${number}, ${number}, ${number}, 0.8)`;
+        textIconContrastHover: "#FFFFFF";
+        textIconContrastDisabled: `rgba(${number}, ${number}, ${number}, 0.3)`;
+        textHint: "#BFBFBF";
+        textLink: "#0CB3B3";
+        textLinkHover: "#50CCC4";
+        textLinkActive: "#03888C";
+        primaryBase: "#0CB3B3";
+        primaryHover: "#50CCC4";
+        primaryActive: "#03888C";
+        primaryBg: "#E1FAF6";
+        primaryBorder: "#77D9CF";
+        primaryHoverInverse: "#E1FAF6";
+        primaryActiveInverse: "#A3E6DD";
+        typography: {
+            readonly header1: {
+                readonly fontFamily: "Roboto";
+                readonly fontSize: 24;
+                readonly lineHeight: "32px";
+            };
+            readonly header2: {
+                readonly fontFamily: "Roboto";
+                readonly fontSize: 16;
+                readonly lineHeight: "24px";
+            };
+            readonly subheader1: {
+                readonly fontFamily: "Roboto";
+                readonly fontSize: 14;
+                readonly lineHeight: "20px";
+            };
+            readonly subheader2: {
+                readonly fontFamily: "Roboto";
+                readonly fontSize: 12;
+                readonly lineHeight: "20px";
+            };
+            readonly body1: {
+                readonly fontFamily: "Roboto";
+                readonly fontSize: 16;
+                readonly lineHeight: "24px";
+            };
+            readonly body2: {
+                readonly fontFamily: "Roboto";
+                readonly fontSize: 14;
+                readonly lineHeight: "20px";
+            };
+            readonly body3: {
+                readonly fontFamily: "Roboto";
+                readonly fontSize: 12;
+                readonly lineHeight: "20px";
+            };
+            readonly code1: {
+                readonly fontFamily: "JetBrains-Mono";
+                readonly fontSize: 13;
+                readonly lineHeight: "18px";
+            };
+        };
+        shadow1: `0 1px 2px -2px rgba(${number}, ${number}, ${number}, 0.16), 0 3px 6px 0 rgba(${number}, ${number}, ${number}, 0.12), 0 5px 12px 4px rgba(${number}, ${number}, ${number}, 0.09)`;
+        shadow2: `0 3px 6px -4px rgba(${number}, ${number}, ${number}, 0.12), 0 6px 16px 0 rgba(${number}, ${number}, ${number}, 0.08), 0 9px 28px 8px rgba(${number}, ${number}, ${number}, 0.05)`;
+        shadow3: `0 6px 16px -8px rgba(${number}, ${number}, ${number}, 0.08), 0 9px 28px 0 rgba(${number}, ${number}, ${number}, 0.05), 0 12px 48px 16px rgba(${number}, ${number}, ${number}, 0.03)`;
+        x0: 0;
+        x05: 2;
+        x1: 4;
+        x1AndHalf: 6;
+        x2: 8;
+        x3: 12;
+        x3AndHalf: 14;
+        x4: 16;
+        x5: 20;
+        x6: 24;
+        x7: 28;
+        x8: 32;
+        x10: 40;
+        x12: 48;
+        x16: 64;
+        magenta100: "#520339";
+        magenta90: "#780650";
+        magenta80: "#9E1068";
+        magenta70: "#C41D7F";
+        magenta60: "#EB2F96";
+        magenta50: "#F759AB";
+        magenta40: "#FF85C0";
+        magenta30: "#FFADD2";
+        magenta20: "#FFD6E7";
+        magenta10: "#FFF0F6";
+        purple100: "#120338";
+        purple90: "#22075E";
+        purple80: "#391085";
+        purple70: "#531DAB";
+        purple60: "#722ED1";
+        purple50: "#9254DE";
+        purple40: "#B37FEB";
+        purple30: "#D3ADF7";
+        purple20: "#EFDBFF";
+        purple10: "#F9F0FF";
+        blue100: "#001D66";
+        blue90: "#002C8C";
+        blue80: "#003EB3";
+        blue70: "#0958D9";
+        blue60: "#1677FF";
+        blue50: "#4096FF";
+        blue40: "#69B1FF";
+        blue30: "#91CAFF";
+        blue20: "#BAE0FF";
+        blue10: "#E6F4FF";
+        cyan100: "#002329";
+        cyan90: "#00474F";
+        cyan80: "#006D75";
+        cyan70: "#08979C";
+        cyan60: "#13C2C2";
+        cyan50: "#36CFC9";
+        cyan40: "#5CDBD3";
+        cyan30: "#87E8DE";
+        cyan20: "#B5F5EC";
+        cyan10: "#E6FFFB";
+        green100: "#092B00";
+        green90: "#135200";
+        green80: "#237804";
+        green70: "#389E0D";
+        green60: "#52C41A";
+        green50: "#73D13D";
+        green40: "#95DE64";
+        green30: "#B7EB8F";
+        green20: "#D9F7BE";
+        green10: "#F6FFED";
+        lime100: "#254000";
+        lime90: "#254000";
+        lime80: "#254000";
+        lime70: "#254000";
+        lime60: "#254000";
+        lime50: "#254000";
+        lime40: "#254000";
+        lime30: "#254000";
+        lime20: "#254000";
+        lime10: "#254000";
+        yellow100: "#614700";
+        yellow90: "#876800";
+        yellow80: "#AD8B00";
+        yellow70: "#D4B106";
+        yellow60: "#FADB14";
+        yellow50: "#FFEC3D";
+        yellow40: "#FFF566";
+        yellow30: "#FFFB8F";
+        yellow20: "#FFFFB8";
+        yellow10: "#FEFFE6";
+        gold100: "#613400";
+        gold90: "#613400";
+        gold80: "#613400";
+        gold70: "#613400";
+        gold60: "#613400";
+        gold50: "#613400";
+        gold40: "#613400";
+        gold30: "#613400";
+        gold20: "#613400";
+        gold10: "#613400";
+        orange100: "#612500";
+        orange90: "#873800";
+        orange80: "#AD4E00";
+        orange70: "#D46B08";
+        orange60: "#FA8C16";
+        orange50: "#FFA940";
+        orange40: "#FFC069";
+        orange30: "#FFD591";
+        orange20: "#FFE7BA";
+        orange10: "#FFF7E6";
+        volcano100: "#610B00";
+        volcano90: "#871400";
+        volcano80: "#AD2102";
+        volcano70: "#D4380D";
+        volcano60: "#FA541C";
+        volcano50: "#FF7A45";
+        volcano40: "#FF9C6E";
+        volcano30: "#FFBB96";
+        volcano20: "#FFD8BF";
+        volcano10: "#FFF2E8";
+        red100: "#5C0011";
+        red90: "#820014";
+        red80: "#A8071A";
+        red70: "#CF1322";
+        red60: "#F5222D";
+        red50: "#FF4D4F";
+        red40: "#FF7875";
+        red30: "#FFA39E";
+        red20: "#FFCCC7";
+        red10: "#FFF1F0";
+        thrush100: "#00161A";
+        thrush90: "#003940";
+        thrush80: "#005F66";
+        thrush70: "#03888C";
+        thrush60: "#0CB3B3";
+        thrush50: "#2CBFBA";
+        thrush40: "#50CCC4";
+        thrush30: "#77D9CF";
+        thrush20: "#A3E6DD";
+        thrush10: "#E1FAF6";
+        transparentWhite90: `rgba(${number}, ${number}, ${number}, 0.9)`;
+        transparentWhite80: `rgba(${number}, ${number}, ${number}, 0.8)`;
+        transparentWhite70: `rgba(${number}, ${number}, ${number}, 0.7)`;
+        transparentWhite60: `rgba(${number}, ${number}, ${number}, 0.6)`;
+        transparentWhite50: `rgba(${number}, ${number}, ${number}, 0.5)`;
+        transparentWhite40: `rgba(${number}, ${number}, ${number}, 0.4)`;
+        transparentWhite30: `rgba(${number}, ${number}, ${number}, 0.3)`;
+        transparentWhite20: `rgba(${number}, ${number}, ${number}, 0.2)`;
+        transparentWhite10: `rgba(${number}, ${number}, ${number}, 0.1)`;
+        transparentWhite5: `rgba(${number}, ${number}, ${number}, 0.05)`;
+        transparentBlack90: `rgba(${number}, ${number}, ${number}, 0.9)`;
+        transparentBlack80: `rgba(${number}, ${number}, ${number}, 0.8)`;
+        transparentBlack70: `rgba(${number}, ${number}, ${number}, 0.7)`;
+        transparentBlack60: `rgba(${number}, ${number}, ${number}, 0.6)`;
+        transparentBlack50: `rgba(${number}, ${number}, ${number}, 0.5)`;
+        transparentBlack40: `rgba(${number}, ${number}, ${number}, 0.4)`;
+        transparentBlack30: `rgba(${number}, ${number}, ${number}, 0.3)`;
+        transparentBlack20: `rgba(${number}, ${number}, ${number}, 0.2)`;
+        transparentBlack10: `rgba(${number}, ${number}, ${number}, 0.1)`;
+        transparentBlack5: `rgba(${number}, ${number}, ${number}, 0.05)`;
+        neutral130: "#000000";
+        neutral120: "#141414";
+        neutral110: "#1F1F1F";
+        neutral100: "#262626";
+        neutral90: "#434343";
+        neutral80: "#595959";
+        neutral75: "#737373";
+        neutral70: "#8C8C8C";
+        neutral65: "#ABABAB";
+        neutral60: "#BFBFBF";
+        neutral50: "#D9D9D9";
+        neutral45: "#E5E5E5";
+        neutral40: "#F0F0F0";
+        neutral30: "#F5F5F5";
+        neutral20: "#FAFAFA";
+        neutral10: "#FFFFFF";
+    }) => {
+        display: "inline-flex";
+        justifyContent: "center";
+        alignItems: "center";
+        fontSize: 16;
+    };
+};