@infomaximum/ui-kit 0.9.1

package/dist/themes/themes.utils.d.ts

@@ -0,0 +1,710 @@
+import { ThemeNames, SemanticBlock } from './themes.types';
+export declare const getTheme: (themeName: ThemeNames) => {
+    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";
+};
+export declare const getTokensByThemeName: (semanticBlock: SemanticBlock, themeName: ThemeNames) => Record<string, string | number>;
+export declare const lightTheme: {
+    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";
+};