From 8669a2c9ef9de293736f110290a0636554c74ef7 Mon Sep 17 00:00:00 2001 From: FatttSnake Date: Tue, 5 Nov 2024 11:45:56 +0800 Subject: [PATCH] Feat(Tool): Support theme --- .../assets/template/global-variables-dark.css | 365 ++++++++++++ .../assets/template/global-variables-dark.js | 517 +++++++++++++++++ .../template/global-variables-light.css | 365 ++++++++++++ .../assets/template/global-variables-light.js | 518 ++++++++++++++++++ app/src/main/assets/template/tool-view.html | 7 +- .../toolbox/data/tool/ToolDataSource.kt | 26 + .../toolbox/repository/tool/ToolRepository.kt | 4 + .../tool/impl/OfflineToolRepository.kt | 6 + .../oxygen/toolbox/ui/util/ResourcesUtils.kt | 2 +- .../oxygen/toolbox/ui/view/ToolViewScreen.kt | 3 +- .../ui/view/ToolViewScreenViewModel.kt | 126 ++++- 11 files changed, 1910 insertions(+), 29 deletions(-) create mode 100644 app/src/main/assets/template/global-variables-dark.css create mode 100644 app/src/main/assets/template/global-variables-dark.js create mode 100644 app/src/main/assets/template/global-variables-light.css create mode 100644 app/src/main/assets/template/global-variables-light.js diff --git a/app/src/main/assets/template/global-variables-dark.css b/app/src/main/assets/template/global-variables-dark.css new file mode 100644 index 0000000..a0294a2 --- /dev/null +++ b/app/src/main/assets/template/global-variables-dark.css @@ -0,0 +1,365 @@ +:root { + --blue: #1677FF; + --blue1: #111a2c; + --blue2: #112545; + --blue3: #15325b; + --blue4: #15417e; + --blue5: #1554ad; + --blue6: #1668dc; + --blue7: #3c89e8; + --blue8: #65a9f3; + --blue9: #8dc5f8; + --blue10: #b7dcfa; + --purple: #722ED1; + --purple1: #1a1325; + --purple2: #24163a; + --purple3: #301c4d; + --purple4: #3e2069; + --purple5: #51258f; + --purple6: #642ab5; + --purple7: #854eca; + --purple8: #ab7ae0; + --purple9: #cda8f0; + --purple10: #ebd7fa; + --cyan: #13C2C2; + --cyan1: #112123; + --cyan2: #113536; + --cyan3: #144848; + --cyan4: #146262; + --cyan5: #138585; + --cyan6: #13a8a8; + --cyan7: #33bcb7; + --cyan8: #58d1c9; + --cyan9: #84e2d8; + --cyan10: #b2f1e8; + --green: #52C41A; + --green1: #162312; + --green2: #1d3712; + --green3: #274916; + --green4: #306317; + --green5: #3c8618; + --green6: #49aa19; + --green7: #6abe39; + --green8: #8fd460; + --green9: #b2e58b; + --green10: #d5f2bb; + --magenta: #EB2F96; + --magenta1: #291321; + --magenta2: #40162f; + --magenta3: #551c3b; + --magenta4: #75204f; + --magenta5: #a02669; + --magenta6: #cb2b83; + --magenta7: #e0529c; + --magenta8: #f37fb7; + --magenta9: #f8a8cc; + --magenta10: #fad2e3; + --pink: #EB2F96; + --pink1: #291321; + --pink2: #40162f; + --pink3: #551c3b; + --pink4: #75204f; + --pink5: #a02669; + --pink6: #cb2b83; + --pink7: #e0529c; + --pink8: #f37fb7; + --pink9: #f8a8cc; + --pink10: #fad2e3; + --red: #F5222D; + --red1: #2a1215; + --red2: #431418; + --red3: #58181c; + --red4: #791a1f; + --red5: #a61d24; + --red6: #d32029; + --red7: #e84749; + --red8: #f37370; + --red9: #f89f9a; + --red10: #fac8c3; + --orange: #FA8C16; + --orange1: #2b1d11; + --orange2: #442a11; + --orange3: #593815; + --orange4: #7c4a15; + --orange5: #aa6215; + --orange6: #d87a16; + --orange7: #e89a3c; + --orange8: #f3b765; + --orange9: #f8cf8d; + --orange10: #fae3b7; + --yellow: #FADB14; + --yellow1: #2b2611; + --yellow2: #443b11; + --yellow3: #595014; + --yellow4: #7c6e14; + --yellow5: #aa9514; + --yellow6: #d8bd14; + --yellow7: #e8d639; + --yellow8: #f3ea62; + --yellow9: #f8f48b; + --yellow10: #fafab5; + --volcano: #FA541C; + --volcano1: #2b1611; + --volcano2: #441d12; + --volcano3: #592716; + --volcano4: #7c3118; + --volcano5: #aa3e19; + --volcano6: #d84a1b; + --volcano7: #e87040; + --volcano8: #f3956a; + --volcano9: #f8b692; + --volcano10: #fad4bc; + --geekblue: #2F54EB; + --geekblue1: #131629; + --geekblue2: #161d40; + --geekblue3: #1c2755; + --geekblue4: #203175; + --geekblue5: #263ea0; + --geekblue6: #2b4acb; + --geekblue7: #5273e0; + --geekblue8: #7f9ef3; + --geekblue9: #a8c1f8; + --geekblue10: #d2e0fa; + --gold: #FAAD14; + --gold1: #2b2111; + --gold2: #443111; + --gold3: #594214; + --gold4: #7c5914; + --gold5: #aa7714; + --gold6: #d89614; + --gold7: #e8b339; + --gold8: #f3cc62; + --gold9: #f8df8b; + --gold10: #faedb5; + --lime: #A0D911; + --lime1: #1f2611; + --lime2: #2e3c10; + --lime3: #3e4f13; + --lime4: #536d13; + --lime5: #6f9412; + --lime6: #8bbb11; + --lime7: #a9d134; + --lime8: #c9e75d; + --lime9: #e4f88b; + --lime10: #f0fab5; + --colorPrimary: #453fa2; + --colorSuccess: #49aa19; + --colorWarning: #d89614; + --colorError: #dc4446; + --colorInfo: #1668dc; + --colorLink: #1668dc; + --colorTextBase: #fff; + --colorBgBase: #000; + --fontFamily: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, + 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', + 'Noto Color Emoji'; + --fontFamilyCode: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; + --fontSize: 14; + --lineWidth: 1; + --lineType: solid; + --motionUnit: 0.1; + --motionBase: 0; + --motionEaseOutCirc: cubic-bezier(0.08, 0.82, 0.17, 1); + --motionEaseInOutCirc: cubic-bezier(0.78, 0.14, 0.15, 0.86); + --motionEaseOut: cubic-bezier(0.215, 0.61, 0.355, 1); + --motionEaseInOut: cubic-bezier(0.645, 0.045, 0.355, 1); + --motionEaseOutBack: cubic-bezier(0.12, 0.4, 0.29, 1.46); + --motionEaseInBack: cubic-bezier(0.71, -0.46, 0.88, 0.6); + --motionEaseInQuint: cubic-bezier(0.755, 0.05, 0.855, 0.06); + --motionEaseOutQuint: cubic-bezier(0.23, 1, 0.32, 1); + --borderRadius: 6; + --sizeUnit: 4; + --sizeStep: 4; + --sizePopupArrow: 16; + --controlHeight: 32; + --zIndexBase: 0; + --zIndexPopupBase: 1000; + --opacityImage: 1; + --colorLinkHover: #4E47BB; + --colorText: rgba(255, 255, 255, 0.85); + --colorTextSecondary: rgba(255, 255, 255, 0.65); + --colorTextTertiary: rgba(255, 255, 255, 0.45); + --colorTextQuaternary: rgba(255, 255, 255, 0.25); + --colorFill: rgba(255, 255, 255, 0.18); + --colorFillSecondary: rgba(255, 255, 255, 0.12); + --colorFillTertiary: rgba(255, 255, 255, 0.08); + --colorFillQuaternary: rgba(255, 255, 255, 0.04); + --colorBgSolid: rgba(255, 255, 255, 0.95); + --colorBgSolidHover: rgb(255, 255, 255); + --colorBgSolidActive: rgba(255, 255, 255, 0.9); + --colorBgLayout: #000000; + --colorBgContainer: #141414; + --colorBgElevated: #1f1f1f; + --colorBgSpotlight: #424242; + --colorBgBlur: rgba(255, 255, 255, 0.04); + --colorBorder: #424242; + --colorBorderSecondary: #303030; + --colorPrimaryBg: #161622; + --colorPrimaryBgHover: #1c1b34; + --colorPrimaryBorder: #252346; + --colorPrimaryBorderHover: #2e2b5f; + --colorPrimaryHover: #6b62b5; + --colorPrimaryActive: #3a3581; + --colorPrimaryTextHover: #6b62b5; + --colorPrimaryText: #453fa2; + --colorPrimaryTextActive: #3a3581; + --colorSuccessBg: #162312; + --colorSuccessBgHover: #1d3712; + --colorSuccessBorder: #274916; + --colorSuccessBorderHover: #306317; + --colorSuccessHover: #306317; + --colorSuccessActive: #3c8618; + --colorSuccessTextHover: #6abe39; + --colorSuccessText: #49aa19; + --colorSuccessTextActive: #3c8618; + --colorErrorBg: #2c1618; + --colorErrorBgHover: #451d1f; + --colorErrorBgFilledHover: #441e1f; + --colorErrorBgActive: #5b2526; + --colorErrorBorder: #5b2526; + --colorErrorBorderHover: #7e2e2f; + --colorErrorHover: #e86e6b; + --colorErrorActive: #ad393a; + --colorErrorTextHover: #e86e6b; + --colorErrorText: #dc4446; + --colorErrorTextActive: #ad393a; + --colorWarningBg: #2b2111; + --colorWarningBgHover: #443111; + --colorWarningBorder: #594214; + --colorWarningBorderHover: #7c5914; + --colorWarningHover: #7c5914; + --colorWarningActive: #aa7714; + --colorWarningTextHover: #e8b339; + --colorWarningText: #d89614; + --colorWarningTextActive: #aa7714; + --colorInfoBg: #111a2c; + --colorInfoBgHover: #112545; + --colorInfoBorder: #15325b; + --colorInfoBorderHover: #15417e; + --colorInfoHover: #15417e; + --colorInfoActive: #1554ad; + --colorInfoTextHover: #3c89e8; + --colorInfoText: #1668dc; + --colorInfoTextActive: #1554ad; + --colorLinkActive: #1554ad; + --colorBgMask: rgba(0, 0, 0, 0.45); + --colorWhite: #fff; + --fontSizeSM: 12; + --fontSizeLG: 16; + --fontSizeXL: 20; + --fontSizeHeading1: 38; + --fontSizeHeading2: 30; + --fontSizeHeading3: 24; + --fontSizeHeading4: 20; + --fontSizeHeading5: 16; + --lineHeight: 1.5714285714285714; + --lineHeightLG: 1.5; + --lineHeightSM: 1.6666666666666667; + --lineHeightHeading1: 1.2105263157894737; + --lineHeightHeading2: 1.2666666666666666; + --lineHeightHeading3: 1.3333333333333333; + --lineHeightHeading4: 1.4; + --lineHeightHeading5: 1.5; + --sizeXXL: 48; + --sizeXL: 32; + --sizeLG: 24; + --sizeMD: 20; + --sizeMS: 16; + --size: 16; + --sizeSM: 12; + --sizeXS: 8; + --sizeXXS: 4; + --controlHeightSM: 24; + --controlHeightXS: 16; + --controlHeightLG: 40; + --motionDurationFast: 0.1s; + --motionDurationMid: 0.2s; + --motionDurationSlow: 0.3s; + --lineWidthBold: 2; + --borderRadiusXS: 2; + --borderRadiusSM: 4; + --borderRadiusLG: 8; + --borderRadiusOuter: 4; + --colorFillContent: rgba(255, 255, 255, 0.12); + --colorFillContentHover: rgba(255, 255, 255, 0.18); + --colorFillAlter: rgba(255, 255, 255, 0.04); + --colorBgContainerDisabled: rgba(255, 255, 255, 0.08); + --colorBorderBg: #141414; + --colorSplit: rgba(253, 253, 253, 0.12); + --colorTextPlaceholder: rgba(255, 255, 255, 0.25); + --colorTextDisabled: rgba(255, 255, 255, 0.25); + --colorTextHeading: rgba(255, 255, 255, 0.85); + --colorTextLabel: rgba(255, 255, 255, 0.65); + --colorTextDescription: rgba(255, 255, 255, 0.45); + --colorTextLightSolid: #fff; + --colorHighlight: #dc4446; + --colorBgTextHover: rgba(255, 255, 255, 0.12); + --colorBgTextActive: rgba(255, 255, 255, 0.18); + --colorIcon: rgba(255, 255, 255, 0.45); + --colorIconHover: rgba(255, 255, 255, 0.85); + --colorErrorOutline: rgba(238, 38, 56, 0.11); + --colorWarningOutline: rgba(173, 107, 0, 0.15); + --fontSizeIcon: 12; + --lineWidthFocus: 3; + --controlOutlineWidth: 2; + --controlInteractiveSize: 16; + --controlItemBgHover: rgba(255, 255, 255, 0.08); + --controlItemBgActive: #161622; + --controlItemBgActiveHover: #1c1b34; + --controlItemBgActiveDisabled: rgba(255, 255, 255, 0.18); + --controlOutline: rgba(53, 53, 253, 0.06); + --fontWeightStrong: 600; + --opacityLoading: 0.65; + --linkDecoration: none; + --linkHoverDecoration: none; + --linkFocusDecoration: none; + --controlPaddingHorizontal: 12; + --controlPaddingHorizontalSM: 8; + --paddingXXS: 4; + --paddingXS: 8; + --paddingSM: 12; + --padding: 16; + --paddingMD: 20; + --paddingLG: 24; + --paddingXL: 32; + --paddingContentHorizontalLG: 24; + --paddingContentVerticalLG: 16; + --paddingContentHorizontal: 16; + --paddingContentVertical: 12; + --paddingContentHorizontalSM: 16; + --paddingContentVerticalSM: 8; + --marginXXS: 4; + --marginXS: 8; + --marginSM: 12; + --margin: 16; + --marginMD: 20; + --marginLG: 24; + --marginXL: 32; + --marginXXL: 48; + --boxShadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), + 0 3px 6px -4px rgba(0, 0, 0, 0.12), + 0 9px 28px 8px rgba(0, 0, 0, 0.05); + --boxShadowSecondary: 0 6px 16px 0 rgba(0, 0, 0, 0.08), + 0 3px 6px -4px rgba(0, 0, 0, 0.12), + 0 9px 28px 8px rgba(0, 0, 0, 0.05); + --boxShadowTertiary: 0 1px 2px 0 rgba(0, 0, 0, 0.03), + 0 1px 6px -1px rgba(0, 0, 0, 0.02), + 0 2px 4px 0 rgba(0, 0, 0, 0.02); + --screenXS: 480; + --screenXSMin: 480; + --screenXSMax: 575; + --screenSM: 576; + --screenSMMin: 576; + --screenSMMax: 767; + --screenMD: 768; + --screenMDMin: 768; + --screenMDMax: 991; + --screenLG: 992; + --screenLGMin: 992; + --screenLGMax: 1199; + --screenXL: 1200; + --screenXLMin: 1200; + --screenXLMax: 1599; + --screenXXL: 1600; + --screenXXLMin: 1600; +} diff --git a/app/src/main/assets/template/global-variables-dark.js b/app/src/main/assets/template/global-variables-dark.js new file mode 100644 index 0000000..2513a3a --- /dev/null +++ b/app/src/main/assets/template/global-variables-dark.js @@ -0,0 +1,517 @@ +const globalVariables = { + OxygenTheme: { + blue: '#1677FF', + purple: '#722ED1', + cyan: '#13C2C2', + green: '#52C41A', + magenta: '#EB2F96', + pink: '#EB2F96', + red: '#F5222D', + orange: '#FA8C16', + yellow: '#FADB14', + volcano: '#FA541C', + geekblue: '#2F54EB', + gold: '#FAAD14', + lime: '#A0D911', + colorPrimary: '#453fa2', + colorSuccess: '#49aa19', + colorWarning: '#d89614', + colorError: '#dc4446', + colorInfo: '#1668dc', + colorLink: '#1668dc', + colorTextBase: '#fff', + colorBgBase: '#000', + fontFamily: + "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,\n'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',\n'Noto Color Emoji'", + fontFamilyCode: "'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace", + fontSize: 14, + lineWidth: 1, + lineType: 'solid', + motionUnit: 0.1, + motionBase: 0, + motionEaseOutCirc: 'cubic-bezier(0.08, 0.82, 0.17, 1)', + motionEaseInOutCirc: 'cubic-bezier(0.78, 0.14, 0.15, 0.86)', + motionEaseOut: 'cubic-bezier(0.215, 0.61, 0.355, 1)', + motionEaseInOut: 'cubic-bezier(0.645, 0.045, 0.355, 1)', + motionEaseOutBack: 'cubic-bezier(0.12, 0.4, 0.29, 1.46)', + motionEaseInBack: 'cubic-bezier(0.71, -0.46, 0.88, 0.6)', + motionEaseInQuint: 'cubic-bezier(0.755, 0.05, 0.855, 0.06)', + motionEaseOutQuint: 'cubic-bezier(0.23, 1, 0.32, 1)', + borderRadius: 6, + sizeUnit: 4, + sizeStep: 4, + sizePopupArrow: 16, + controlHeight: 32, + zIndexBase: 0, + zIndexPopupBase: 1000, + opacityImage: 1, + motion: true, + colorLinkHover: '#4E47BB', + 'blue-1': '#111a2c', + blue1: '#111a2c', + 'blue-2': '#112545', + blue2: '#112545', + 'blue-3': '#15325b', + blue3: '#15325b', + 'blue-4': '#15417e', + blue4: '#15417e', + 'blue-5': '#1554ad', + blue5: '#1554ad', + 'blue-6': '#1668dc', + blue6: '#1668dc', + 'blue-7': '#3c89e8', + blue7: '#3c89e8', + 'blue-8': '#65a9f3', + blue8: '#65a9f3', + 'blue-9': '#8dc5f8', + blue9: '#8dc5f8', + 'blue-10': '#b7dcfa', + blue10: '#b7dcfa', + 'purple-1': '#1a1325', + purple1: '#1a1325', + 'purple-2': '#24163a', + purple2: '#24163a', + 'purple-3': '#301c4d', + purple3: '#301c4d', + 'purple-4': '#3e2069', + purple4: '#3e2069', + 'purple-5': '#51258f', + purple5: '#51258f', + 'purple-6': '#642ab5', + purple6: '#642ab5', + 'purple-7': '#854eca', + purple7: '#854eca', + 'purple-8': '#ab7ae0', + purple8: '#ab7ae0', + 'purple-9': '#cda8f0', + purple9: '#cda8f0', + 'purple-10': '#ebd7fa', + purple10: '#ebd7fa', + 'cyan-1': '#112123', + cyan1: '#112123', + 'cyan-2': '#113536', + cyan2: '#113536', + 'cyan-3': '#144848', + cyan3: '#144848', + 'cyan-4': '#146262', + cyan4: '#146262', + 'cyan-5': '#138585', + cyan5: '#138585', + 'cyan-6': '#13a8a8', + cyan6: '#13a8a8', + 'cyan-7': '#33bcb7', + cyan7: '#33bcb7', + 'cyan-8': '#58d1c9', + cyan8: '#58d1c9', + 'cyan-9': '#84e2d8', + cyan9: '#84e2d8', + 'cyan-10': '#b2f1e8', + cyan10: '#b2f1e8', + 'green-1': '#162312', + green1: '#162312', + 'green-2': '#1d3712', + green2: '#1d3712', + 'green-3': '#274916', + green3: '#274916', + 'green-4': '#306317', + green4: '#306317', + 'green-5': '#3c8618', + green5: '#3c8618', + 'green-6': '#49aa19', + green6: '#49aa19', + 'green-7': '#6abe39', + green7: '#6abe39', + 'green-8': '#8fd460', + green8: '#8fd460', + 'green-9': '#b2e58b', + green9: '#b2e58b', + 'green-10': '#d5f2bb', + green10: '#d5f2bb', + 'magenta-1': '#291321', + magenta1: '#291321', + 'magenta-2': '#40162f', + magenta2: '#40162f', + 'magenta-3': '#551c3b', + magenta3: '#551c3b', + 'magenta-4': '#75204f', + magenta4: '#75204f', + 'magenta-5': '#a02669', + magenta5: '#a02669', + 'magenta-6': '#cb2b83', + magenta6: '#cb2b83', + 'magenta-7': '#e0529c', + magenta7: '#e0529c', + 'magenta-8': '#f37fb7', + magenta8: '#f37fb7', + 'magenta-9': '#f8a8cc', + magenta9: '#f8a8cc', + 'magenta-10': '#fad2e3', + magenta10: '#fad2e3', + 'pink-1': '#291321', + pink1: '#291321', + 'pink-2': '#40162f', + pink2: '#40162f', + 'pink-3': '#551c3b', + pink3: '#551c3b', + 'pink-4': '#75204f', + pink4: '#75204f', + 'pink-5': '#a02669', + pink5: '#a02669', + 'pink-6': '#cb2b83', + pink6: '#cb2b83', + 'pink-7': '#e0529c', + pink7: '#e0529c', + 'pink-8': '#f37fb7', + pink8: '#f37fb7', + 'pink-9': '#f8a8cc', + pink9: '#f8a8cc', + 'pink-10': '#fad2e3', + pink10: '#fad2e3', + 'red-1': '#2a1215', + red1: '#2a1215', + 'red-2': '#431418', + red2: '#431418', + 'red-3': '#58181c', + red3: '#58181c', + 'red-4': '#791a1f', + red4: '#791a1f', + 'red-5': '#a61d24', + red5: '#a61d24', + 'red-6': '#d32029', + red6: '#d32029', + 'red-7': '#e84749', + red7: '#e84749', + 'red-8': '#f37370', + red8: '#f37370', + 'red-9': '#f89f9a', + red9: '#f89f9a', + 'red-10': '#fac8c3', + red10: '#fac8c3', + 'orange-1': '#2b1d11', + orange1: '#2b1d11', + 'orange-2': '#442a11', + orange2: '#442a11', + 'orange-3': '#593815', + orange3: '#593815', + 'orange-4': '#7c4a15', + orange4: '#7c4a15', + 'orange-5': '#aa6215', + orange5: '#aa6215', + 'orange-6': '#d87a16', + orange6: '#d87a16', + 'orange-7': '#e89a3c', + orange7: '#e89a3c', + 'orange-8': '#f3b765', + orange8: '#f3b765', + 'orange-9': '#f8cf8d', + orange9: '#f8cf8d', + 'orange-10': '#fae3b7', + orange10: '#fae3b7', + 'yellow-1': '#2b2611', + yellow1: '#2b2611', + 'yellow-2': '#443b11', + yellow2: '#443b11', + 'yellow-3': '#595014', + yellow3: '#595014', + 'yellow-4': '#7c6e14', + yellow4: '#7c6e14', + 'yellow-5': '#aa9514', + yellow5: '#aa9514', + 'yellow-6': '#d8bd14', + yellow6: '#d8bd14', + 'yellow-7': '#e8d639', + yellow7: '#e8d639', + 'yellow-8': '#f3ea62', + yellow8: '#f3ea62', + 'yellow-9': '#f8f48b', + yellow9: '#f8f48b', + 'yellow-10': '#fafab5', + yellow10: '#fafab5', + 'volcano-1': '#2b1611', + volcano1: '#2b1611', + 'volcano-2': '#441d12', + volcano2: '#441d12', + 'volcano-3': '#592716', + volcano3: '#592716', + 'volcano-4': '#7c3118', + volcano4: '#7c3118', + 'volcano-5': '#aa3e19', + volcano5: '#aa3e19', + 'volcano-6': '#d84a1b', + volcano6: '#d84a1b', + 'volcano-7': '#e87040', + volcano7: '#e87040', + 'volcano-8': '#f3956a', + volcano8: '#f3956a', + 'volcano-9': '#f8b692', + volcano9: '#f8b692', + 'volcano-10': '#fad4bc', + volcano10: '#fad4bc', + 'geekblue-1': '#131629', + geekblue1: '#131629', + 'geekblue-2': '#161d40', + geekblue2: '#161d40', + 'geekblue-3': '#1c2755', + geekblue3: '#1c2755', + 'geekblue-4': '#203175', + geekblue4: '#203175', + 'geekblue-5': '#263ea0', + geekblue5: '#263ea0', + 'geekblue-6': '#2b4acb', + geekblue6: '#2b4acb', + 'geekblue-7': '#5273e0', + geekblue7: '#5273e0', + 'geekblue-8': '#7f9ef3', + geekblue8: '#7f9ef3', + 'geekblue-9': '#a8c1f8', + geekblue9: '#a8c1f8', + 'geekblue-10': '#d2e0fa', + geekblue10: '#d2e0fa', + 'gold-1': '#2b2111', + gold1: '#2b2111', + 'gold-2': '#443111', + gold2: '#443111', + 'gold-3': '#594214', + gold3: '#594214', + 'gold-4': '#7c5914', + gold4: '#7c5914', + 'gold-5': '#aa7714', + gold5: '#aa7714', + 'gold-6': '#d89614', + gold6: '#d89614', + 'gold-7': '#e8b339', + gold7: '#e8b339', + 'gold-8': '#f3cc62', + gold8: '#f3cc62', + 'gold-9': '#f8df8b', + gold9: '#f8df8b', + 'gold-10': '#faedb5', + gold10: '#faedb5', + 'lime-1': '#1f2611', + lime1: '#1f2611', + 'lime-2': '#2e3c10', + lime2: '#2e3c10', + 'lime-3': '#3e4f13', + lime3: '#3e4f13', + 'lime-4': '#536d13', + lime4: '#536d13', + 'lime-5': '#6f9412', + lime5: '#6f9412', + 'lime-6': '#8bbb11', + lime6: '#8bbb11', + 'lime-7': '#a9d134', + lime7: '#a9d134', + 'lime-8': '#c9e75d', + lime8: '#c9e75d', + 'lime-9': '#e4f88b', + lime9: '#e4f88b', + 'lime-10': '#f0fab5', + lime10: '#f0fab5', + colorText: 'rgba(255, 255, 255, 0.85)', + colorTextSecondary: 'rgba(255, 255, 255, 0.65)', + colorTextTertiary: 'rgba(255, 255, 255, 0.45)', + colorTextQuaternary: 'rgba(255, 255, 255, 0.25)', + colorFill: 'rgba(255, 255, 255, 0.18)', + colorFillSecondary: 'rgba(255, 255, 255, 0.12)', + colorFillTertiary: 'rgba(255, 255, 255, 0.08)', + colorFillQuaternary: 'rgba(255, 255, 255, 0.04)', + colorBgSolid: 'rgba(255, 255, 255, 0.95)', + colorBgSolidHover: 'rgb(255, 255, 255)', + colorBgSolidActive: 'rgba(255, 255, 255, 0.9)', + colorBgLayout: '#000000', + colorBgContainer: '#141414', + colorBgElevated: '#1f1f1f', + colorBgSpotlight: '#424242', + colorBgBlur: 'rgba(255, 255, 255, 0.04)', + colorBorder: '#424242', + colorBorderSecondary: '#303030', + colorPrimaryBg: '#161622', + colorPrimaryBgHover: '#1c1b34', + colorPrimaryBorder: '#252346', + colorPrimaryBorderHover: '#2e2b5f', + colorPrimaryHover: '#6b62b5', + colorPrimaryActive: '#3a3581', + colorPrimaryTextHover: '#6b62b5', + colorPrimaryText: '#453fa2', + colorPrimaryTextActive: '#3a3581', + colorSuccessBg: '#162312', + colorSuccessBgHover: '#1d3712', + colorSuccessBorder: '#274916', + colorSuccessBorderHover: '#306317', + colorSuccessHover: '#306317', + colorSuccessActive: '#3c8618', + colorSuccessTextHover: '#6abe39', + colorSuccessText: '#49aa19', + colorSuccessTextActive: '#3c8618', + colorErrorBg: '#2c1618', + colorErrorBgHover: '#451d1f', + colorErrorBgFilledHover: '#441e1f', + colorErrorBgActive: '#5b2526', + colorErrorBorder: '#5b2526', + colorErrorBorderHover: '#7e2e2f', + colorErrorHover: '#e86e6b', + colorErrorActive: '#ad393a', + colorErrorTextHover: '#e86e6b', + colorErrorText: '#dc4446', + colorErrorTextActive: '#ad393a', + colorWarningBg: '#2b2111', + colorWarningBgHover: '#443111', + colorWarningBorder: '#594214', + colorWarningBorderHover: '#7c5914', + colorWarningHover: '#7c5914', + colorWarningActive: '#aa7714', + colorWarningTextHover: '#e8b339', + colorWarningText: '#d89614', + colorWarningTextActive: '#aa7714', + colorInfoBg: '#111a2c', + colorInfoBgHover: '#112545', + colorInfoBorder: '#15325b', + colorInfoBorderHover: '#15417e', + colorInfoHover: '#15417e', + colorInfoActive: '#1554ad', + colorInfoTextHover: '#3c89e8', + colorInfoText: '#1668dc', + colorInfoTextActive: '#1554ad', + colorLinkActive: '#1554ad', + colorBgMask: 'rgba(0, 0, 0, 0.45)', + colorWhite: '#fff', + fontSizeSM: 12, + fontSizeLG: 16, + fontSizeXL: 20, + fontSizeHeading1: 38, + fontSizeHeading2: 30, + fontSizeHeading3: 24, + fontSizeHeading4: 20, + fontSizeHeading5: 16, + lineHeight: 1.5714285714285714, + lineHeightLG: 1.5, + lineHeightSM: 1.6666666666666667, + fontHeight: 22, + fontHeightLG: 24, + fontHeightSM: 20, + lineHeightHeading1: 1.2105263157894737, + lineHeightHeading2: 1.2666666666666666, + lineHeightHeading3: 1.3333333333333333, + lineHeightHeading4: 1.4, + lineHeightHeading5: 1.5, + sizeXXL: 48, + sizeXL: 32, + sizeLG: 24, + sizeMD: 20, + sizeMS: 16, + size: 16, + sizeSM: 12, + sizeXS: 8, + sizeXXS: 4, + controlHeightSM: 24, + controlHeightXS: 16, + controlHeightLG: 40, + motionDurationFast: '0.1s', + motionDurationMid: '0.2s', + motionDurationSlow: '0.3s', + lineWidthBold: 2, + borderRadiusXS: 2, + borderRadiusSM: 4, + borderRadiusLG: 8, + borderRadiusOuter: 4, + colorFillContent: 'rgba(255, 255, 255, 0.12)', + colorFillContentHover: 'rgba(255, 255, 255, 0.18)', + colorFillAlter: 'rgba(255, 255, 255, 0.04)', + colorBgContainerDisabled: 'rgba(255, 255, 255, 0.08)', + colorBorderBg: '#141414', + colorSplit: 'rgba(253, 253, 253, 0.12)', + colorTextPlaceholder: 'rgba(255, 255, 255, 0.25)', + colorTextDisabled: 'rgba(255, 255, 255, 0.25)', + colorTextHeading: 'rgba(255, 255, 255, 0.85)', + colorTextLabel: 'rgba(255, 255, 255, 0.65)', + colorTextDescription: 'rgba(255, 255, 255, 0.45)', + colorTextLightSolid: '#fff', + colorHighlight: '#dc4446', + colorBgTextHover: 'rgba(255, 255, 255, 0.12)', + colorBgTextActive: 'rgba(255, 255, 255, 0.18)', + colorIcon: 'rgba(255, 255, 255, 0.45)', + colorIconHover: 'rgba(255, 255, 255, 0.85)', + colorErrorOutline: 'rgba(238, 38, 56, 0.11)', + colorWarningOutline: 'rgba(173, 107, 0, 0.15)', + fontSizeIcon: 12, + lineWidthFocus: 3, + controlOutlineWidth: 2, + controlInteractiveSize: 16, + controlItemBgHover: 'rgba(255, 255, 255, 0.08)', + controlItemBgActive: '#161622', + controlItemBgActiveHover: '#1c1b34', + controlItemBgActiveDisabled: 'rgba(255, 255, 255, 0.18)', + controlTmpOutline: 'rgba(255, 255, 255, 0.04)', + controlOutline: 'rgba(53, 53, 253, 0.06)', + fontWeightStrong: 600, + opacityLoading: 0.65, + linkDecoration: 'none', + linkHoverDecoration: 'none', + linkFocusDecoration: 'none', + controlPaddingHorizontal: 12, + controlPaddingHorizontalSM: 8, + paddingXXS: 4, + paddingXS: 8, + paddingSM: 12, + padding: 16, + paddingMD: 20, + paddingLG: 24, + paddingXL: 32, + paddingContentHorizontalLG: 24, + paddingContentVerticalLG: 16, + paddingContentHorizontal: 16, + paddingContentVertical: 12, + paddingContentHorizontalSM: 16, + paddingContentVerticalSM: 8, + marginXXS: 4, + marginXS: 8, + marginSM: 12, + margin: 16, + marginMD: 20, + marginLG: 24, + marginXL: 32, + marginXXL: 48, + boxShadow: + '\n 0 6px 16px 0 rgba(0, 0, 0, 0.08),\n 0 3px 6px -4px rgba(0, 0, 0, 0.12),\n 0 9px 28px 8px rgba(0, 0, 0, 0.05)\n ', + boxShadowSecondary: + '\n 0 6px 16px 0 rgba(0, 0, 0, 0.08),\n 0 3px 6px -4px rgba(0, 0, 0, 0.12),\n 0 9px 28px 8px rgba(0, 0, 0, 0.05)\n ', + boxShadowTertiary: + '\n 0 1px 2px 0 rgba(0, 0, 0, 0.03),\n 0 1px 6px -1px rgba(0, 0, 0, 0.02),\n 0 2px 4px 0 rgba(0, 0, 0, 0.02)\n ', + screenXS: 480, + screenXSMin: 480, + screenXSMax: 575, + screenSM: 576, + screenSMMin: 576, + screenSMMax: 767, + screenMD: 768, + screenMDMin: 768, + screenMDMax: 991, + screenLG: 992, + screenLGMin: 992, + screenLGMax: 1199, + screenXL: 1200, + screenXLMin: 1200, + screenXLMax: 1599, + screenXXL: 1600, + screenXXLMin: 1600, + boxShadowPopoverArrow: '2px 2px 5px rgba(0, 0, 0, 0.05)', + boxShadowCard: + '\n 0 1px 2px -2px rgba(0, 0, 0, 0.16),\n 0 3px 6px 0 rgba(0, 0, 0, 0.12),\n 0 5px 12px 4px rgba(0, 0, 0, 0.09)\n ', + boxShadowDrawerRight: + '\n -6px 0 16px 0 rgba(0, 0, 0, 0.08),\n -3px 0 6px -4px rgba(0, 0, 0, 0.12),\n -9px 0 28px 8px rgba(0, 0, 0, 0.05)\n ', + boxShadowDrawerLeft: + '\n 6px 0 16px 0 rgba(0, 0, 0, 0.08),\n 3px 0 6px -4px rgba(0, 0, 0, 0.12),\n 9px 0 28px 8px rgba(0, 0, 0, 0.05)\n ', + boxShadowDrawerUp: + '\n 0 6px 16px 0 rgba(0, 0, 0, 0.08),\n 0 3px 6px -4px rgba(0, 0, 0, 0.12),\n 0 9px 28px 8px rgba(0, 0, 0, 0.05)\n ', + boxShadowDrawerDown: + '\n 0 -6px 16px 0 rgba(0, 0, 0, 0.08),\n 0 -3px 6px -4px rgba(0, 0, 0, 0.12),\n 0 -9px 28px 8px rgba(0, 0, 0, 0.05)\n ', + boxShadowTabsOverflowLeft: 'inset 10px 0 8px -8px rgba(0, 0, 0, 0.08)', + boxShadowTabsOverflowRight: 'inset -10px 0 8px -8px rgba(0, 0, 0, 0.08)', + boxShadowTabsOverflowTop: 'inset 0 10px 8px -8px rgba(0, 0, 0, 0.08)', + boxShadowTabsOverflowBottom: 'inset 0 -10px 8px -8px rgba(0, 0, 0, 0.08)' + } +} + +for (const key in globalVariables) { + globalThis[key] = globalVariables[key] +} diff --git a/app/src/main/assets/template/global-variables-light.css b/app/src/main/assets/template/global-variables-light.css new file mode 100644 index 0000000..5d54443 --- /dev/null +++ b/app/src/main/assets/template/global-variables-light.css @@ -0,0 +1,365 @@ +:root { + --blue: #1677FF; + --blue1: #e6f4ff; + --blue2: #bae0ff; + --blue3: #91caff; + --blue4: #69b1ff; + --blue5: #4096ff; + --blue6: #1677ff; + --blue7: #0958d9; + --blue8: #003eb3; + --blue9: #002c8c; + --blue10: #001d66; + --purple: #722ED1; + --purple1: #f9f0ff; + --purple2: #efdbff; + --purple3: #d3adf7; + --purple4: #b37feb; + --purple5: #9254de; + --purple6: #722ed1; + --purple7: #531dab; + --purple8: #391085; + --purple9: #22075e; + --purple10: #120338; + --cyan: #13C2C2; + --cyan1: #e6fffb; + --cyan2: #b5f5ec; + --cyan3: #87e8de; + --cyan4: #5cdbd3; + --cyan5: #36cfc9; + --cyan6: #13c2c2; + --cyan7: #08979c; + --cyan8: #006d75; + --cyan9: #00474f; + --cyan10: #002329; + --green: #52C41A; + --green1: #f6ffed; + --green2: #d9f7be; + --green3: #b7eb8f; + --green4: #95de64; + --green5: #73d13d; + --green6: #52c41a; + --green7: #389e0d; + --green8: #237804; + --green9: #135200; + --green10: #092b00; + --magenta: #EB2F96; + --magenta1: #fff0f6; + --magenta2: #ffd6e7; + --magenta3: #ffadd2; + --magenta4: #ff85c0; + --magenta5: #f759ab; + --magenta6: #eb2f96; + --magenta7: #c41d7f; + --magenta8: #9e1068; + --magenta9: #780650; + --magenta10: #520339; + --pink: #EB2F96; + --pink1: #fff0f6; + --pink2: #ffd6e7; + --pink3: #ffadd2; + --pink4: #ff85c0; + --pink5: #f759ab; + --pink6: #eb2f96; + --pink7: #c41d7f; + --pink8: #9e1068; + --pink9: #780650; + --pink10: #520339; + --red: #F5222D; + --red1: #fff1f0; + --red2: #ffccc7; + --red3: #ffa39e; + --red4: #ff7875; + --red5: #ff4d4f; + --red6: #f5222d; + --red7: #cf1322; + --red8: #a8071a; + --red9: #820014; + --red10: #5c0011; + --orange: #FA8C16; + --orange1: #fff7e6; + --orange2: #ffe7ba; + --orange3: #ffd591; + --orange4: #ffc069; + --orange5: #ffa940; + --orange6: #fa8c16; + --orange7: #d46b08; + --orange8: #ad4e00; + --orange9: #873800; + --orange10: #612500; + --yellow: #FADB14; + --yellow1: #feffe6; + --yellow2: #ffffb8; + --yellow3: #fffb8f; + --yellow4: #fff566; + --yellow5: #ffec3d; + --yellow6: #fadb14; + --yellow7: #d4b106; + --yellow8: #ad8b00; + --yellow9: #876800; + --yellow10: #614700; + --volcano: #FA541C; + --volcano1: #fff2e8; + --volcano2: #ffd8bf; + --volcano3: #ffbb96; + --volcano4: #ff9c6e; + --volcano5: #ff7a45; + --volcano6: #fa541c; + --volcano7: #d4380d; + --volcano8: #ad2102; + --volcano9: #871400; + --volcano10: #610b00; + --geekblue: #2F54EB; + --geekblue1: #f0f5ff; + --geekblue2: #d6e4ff; + --geekblue3: #adc6ff; + --geekblue4: #85a5ff; + --geekblue5: #597ef7; + --geekblue6: #2f54eb; + --geekblue7: #1d39c4; + --geekblue8: #10239e; + --geekblue9: #061178; + --geekblue10: #030852; + --gold: #FAAD14; + --gold1: #fffbe6; + --gold2: #fff1b8; + --gold3: #ffe58f; + --gold4: #ffd666; + --gold5: #ffc53d; + --gold6: #faad14; + --gold7: #d48806; + --gold8: #ad6800; + --gold9: #874d00; + --gold10: #613400; + --lime: #A0D911; + --lime1: #fcffe6; + --lime2: #f4ffb8; + --lime3: #eaff8f; + --lime4: #d3f261; + --lime5: #bae637; + --lime6: #a0d911; + --lime7: #7cb305; + --lime8: #5b8c00; + --lime9: #3f6600; + --lime10: #254000; + --colorPrimary: #4e47bb; + --colorSuccess: #52c41a; + --colorWarning: #faad14; + --colorError: #ff4d4f; + --colorInfo: #1677ff; + --colorLink: #1677ff; + --colorTextBase: #000; + --colorBgBase: #fff; + --fontFamily: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, + 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', + 'Noto Color Emoji'; + --fontFamilyCode: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; + --fontSize: 14; + --lineWidth: 1; + --lineType: solid; + --motionUnit: 0.1; + --motionBase: 0; + --motionEaseOutCirc: cubic-bezier(0.08, 0.82, 0.17, 1); + --motionEaseInOutCirc: cubic-bezier(0.78, 0.14, 0.15, 0.86); + --motionEaseOut: cubic-bezier(0.215, 0.61, 0.355, 1); + --motionEaseInOut: cubic-bezier(0.645, 0.045, 0.355, 1); + --motionEaseOutBack: cubic-bezier(0.12, 0.4, 0.29, 1.46); + --motionEaseInBack: cubic-bezier(0.71, -0.46, 0.88, 0.6); + --motionEaseInQuint: cubic-bezier(0.755, 0.05, 0.855, 0.06); + --motionEaseOutQuint: cubic-bezier(0.23, 1, 0.32, 1); + --borderRadius: 6; + --sizeUnit: 4; + --sizeStep: 4; + --sizePopupArrow: 16; + --controlHeight: 32; + --zIndexBase: 0; + --zIndexPopupBase: 1000; + --opacityImage: 1; + --colorLinkHover: #4E47BB; + --colorText: rgba(0, 0, 0, 0.88); + --colorTextSecondary: rgba(0, 0, 0, 0.65); + --colorTextTertiary: rgba(0, 0, 0, 0.45); + --colorTextQuaternary: rgba(0, 0, 0, 0.25); + --colorFill: rgba(0, 0, 0, 0.15); + --colorFillSecondary: rgba(0, 0, 0, 0.06); + --colorFillTertiary: rgba(0, 0, 0, 0.04); + --colorFillQuaternary: rgba(0, 0, 0, 0.02); + --colorBgSolid: rgb(0, 0, 0); + --colorBgSolidHover: rgba(0, 0, 0, 0.75); + --colorBgSolidActive: rgba(0, 0, 0, 0.95); + --colorBgLayout: #f5f5f5; + --colorBgContainer: #ffffff; + --colorBgElevated: #ffffff; + --colorBgSpotlight: rgba(0, 0, 0, 0.85); + --colorBgBlur: transparent; + --colorBorder: #d9d9d9; + --colorBorderSecondary: #f0f0f0; + --colorPrimaryBg: #eeebfa; + --colorPrimaryBgHover: #e2dfed; + --colorPrimaryBorder: #c6c1e0; + --colorPrimaryBorderHover: #9d94d4; + --colorPrimaryHover: #756bc7; + --colorPrimaryActive: #343194; + --colorPrimaryTextHover: #756bc7; + --colorPrimaryText: #4e47bb; + --colorPrimaryTextActive: #343194; + --colorSuccessBg: #f6ffed; + --colorSuccessBgHover: #d9f7be; + --colorSuccessBorder: #b7eb8f; + --colorSuccessBorderHover: #95de64; + --colorSuccessHover: #95de64; + --colorSuccessActive: #389e0d; + --colorSuccessTextHover: #73d13d; + --colorSuccessText: #52c41a; + --colorSuccessTextActive: #389e0d; + --colorErrorBg: #fff2f0; + --colorErrorBgHover: #fff1f0; + --colorErrorBgFilledHover: #ffdfdc; + --colorErrorBgActive: #ffccc7; + --colorErrorBorder: #ffccc7; + --colorErrorBorderHover: #ffa39e; + --colorErrorHover: #ff7875; + --colorErrorActive: #d9363e; + --colorErrorTextHover: #ff7875; + --colorErrorText: #ff4d4f; + --colorErrorTextActive: #d9363e; + --colorWarningBg: #fffbe6; + --colorWarningBgHover: #fff1b8; + --colorWarningBorder: #ffe58f; + --colorWarningBorderHover: #ffd666; + --colorWarningHover: #ffd666; + --colorWarningActive: #d48806; + --colorWarningTextHover: #ffc53d; + --colorWarningText: #faad14; + --colorWarningTextActive: #d48806; + --colorInfoBg: #e6f4ff; + --colorInfoBgHover: #bae0ff; + --colorInfoBorder: #91caff; + --colorInfoBorderHover: #69b1ff; + --colorInfoHover: #69b1ff; + --colorInfoActive: #0958d9; + --colorInfoTextHover: #4096ff; + --colorInfoText: #1677ff; + --colorInfoTextActive: #0958d9; + --colorLinkActive: #0958d9; + --colorBgMask: rgba(0, 0, 0, 0.45); + --colorWhite: #fff; + --fontSizeSM: 12; + --fontSizeLG: 16; + --fontSizeXL: 20; + --fontSizeHeading1: 38; + --fontSizeHeading2: 30; + --fontSizeHeading3: 24; + --fontSizeHeading4: 20; + --fontSizeHeading5: 16; + --lineHeight: 1.5714285714285714; + --lineHeightLG: 1.5; + --lineHeightSM: 1.6666666666666667; + --lineHeightHeading1: 1.2105263157894737; + --lineHeightHeading2: 1.2666666666666666; + --lineHeightHeading3: 1.3333333333333333; + --lineHeightHeading4: 1.4; + --lineHeightHeading5: 1.5; + --sizeXXL: 48; + --sizeXL: 32; + --sizeLG: 24; + --sizeMD: 20; + --sizeMS: 16; + --size: 16; + --sizeSM: 12; + --sizeXS: 8; + --sizeXXS: 4; + --controlHeightSM: 24; + --controlHeightXS: 16; + --controlHeightLG: 40; + --motionDurationFast: 0.1s; + --motionDurationMid: 0.2s; + --motionDurationSlow: 0.3s; + --lineWidthBold: 2; + --borderRadiusXS: 2; + --borderRadiusSM: 4; + --borderRadiusLG: 8; + --borderRadiusOuter: 4; + --colorFillContent: rgba(0, 0, 0, 0.06); + --colorFillContentHover: rgba(0, 0, 0, 0.15); + --colorFillAlter: rgba(0, 0, 0, 0.02); + --colorBgContainerDisabled: rgba(0, 0, 0, 0.04); + --colorBorderBg: #ffffff; + --colorSplit: rgba(5, 5, 5, 0.06); + --colorTextPlaceholder: rgba(0, 0, 0, 0.25); + --colorTextDisabled: rgba(0, 0, 0, 0.25); + --colorTextHeading: rgba(0, 0, 0, 0.88); + --colorTextLabel: rgba(0, 0, 0, 0.65); + --colorTextDescription: rgba(0, 0, 0, 0.45); + --colorTextLightSolid: #fff; + --colorHighlight: #ff4d4f; + --colorBgTextHover: rgba(0, 0, 0, 0.06); + --colorBgTextActive: rgba(0, 0, 0, 0.15); + --colorIcon: rgba(0, 0, 0, 0.45); + --colorIconHover: rgba(0, 0, 0, 0.88); + --colorErrorOutline: rgba(255, 38, 5, 0.06); + --colorWarningOutline: rgba(255, 215, 5, 0.1); + --fontSizeIcon: 12; + --lineWidthFocus: 3; + --controlOutlineWidth: 2; + --controlInteractiveSize: 16; + --controlItemBgHover: rgba(0, 0, 0, 0.04); + --controlItemBgActive: #eeebfa; + --controlItemBgActiveHover: #e2dfed; + --controlItemBgActiveDisabled: rgba(0, 0, 0, 0.15); + --controlOutline: rgba(42, 5, 192, 0.08); + --fontWeightStrong: 600; + --opacityLoading: 0.65; + --linkDecoration: none; + --linkHoverDecoration: none; + --linkFocusDecoration: none; + --controlPaddingHorizontal: 12; + --controlPaddingHorizontalSM: 8; + --paddingXXS: 4; + --paddingXS: 8; + --paddingSM: 12; + --padding: 16; + --paddingMD: 20; + --paddingLG: 24; + --paddingXL: 32; + --paddingContentHorizontalLG: 24; + --paddingContentVerticalLG: 16; + --paddingContentHorizontal: 16; + --paddingContentVertical: 12; + --paddingContentHorizontalSM: 16; + --paddingContentVerticalSM: 8; + --marginXXS: 4; + --marginXS: 8; + --marginSM: 12; + --margin: 16; + --marginMD: 20; + --marginLG: 24; + --marginXL: 32; + --marginXXL: 48; + --boxShadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), + 0 3px 6px -4px rgba(0, 0, 0, 0.12), + 0 9px 28px 8px rgba(0, 0, 0, 0.05); + --boxShadowSecondary: 0 6px 16px 0 rgba(0, 0, 0, 0.08), + 0 3px 6px -4px rgba(0, 0, 0, 0.12), + 0 9px 28px 8px rgba(0, 0, 0, 0.05); + --boxShadowTertiary: 0 1px 2px 0 rgba(0, 0, 0, 0.03), + 0 1px 6px -1px rgba(0, 0, 0, 0.02), + 0 2px 4px 0 rgba(0, 0, 0, 0.02); + --screenXS: 480; + --screenXSMin: 480; + --screenXSMax: 575; + --screenSM: 576; + --screenSMMin: 576; + --screenSMMax: 767; + --screenMD: 768; + --screenMDMin: 768; + --screenMDMax: 991; + --screenLG: 992; + --screenLGMin: 992; + --screenLGMax: 1199; + --screenXL: 1200; + --screenXLMin: 1200; + --screenXLMax: 1599; + --screenXXL: 1600; + --screenXXLMin: 1600; +} diff --git a/app/src/main/assets/template/global-variables-light.js b/app/src/main/assets/template/global-variables-light.js new file mode 100644 index 0000000..2101df3 --- /dev/null +++ b/app/src/main/assets/template/global-variables-light.js @@ -0,0 +1,518 @@ +const globalVariables = { + OxygenTheme: { + blue: '#1677FF', + purple: '#722ED1', + cyan: '#13C2C2', + green: '#52C41A', + magenta: '#EB2F96', + pink: '#EB2F96', + red: '#F5222D', + orange: '#FA8C16', + yellow: '#FADB14', + volcano: '#FA541C', + geekblue: '#2F54EB', + gold: '#FAAD14', + lime: '#A0D911', + colorPrimary: '#4e47bb', + colorSuccess: '#52c41a', + colorWarning: '#faad14', + colorError: '#ff4d4f', + colorInfo: '#1677ff', + colorLink: '#1677ff', + colorTextBase: '#000', + colorBgBase: '#fff', + fontFamily: + "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,\n'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',\n'Noto Color Emoji'", + fontFamilyCode: "'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace", + fontSize: 14, + lineWidth: 1, + lineType: 'solid', + motionUnit: 0.1, + motionBase: 0, + motionEaseOutCirc: 'cubic-bezier(0.08, 0.82, 0.17, 1)', + motionEaseInOutCirc: 'cubic-bezier(0.78, 0.14, 0.15, 0.86)', + motionEaseOut: 'cubic-bezier(0.215, 0.61, 0.355, 1)', + motionEaseInOut: 'cubic-bezier(0.645, 0.045, 0.355, 1)', + motionEaseOutBack: 'cubic-bezier(0.12, 0.4, 0.29, 1.46)', + motionEaseInBack: 'cubic-bezier(0.71, -0.46, 0.88, 0.6)', + motionEaseInQuint: 'cubic-bezier(0.755, 0.05, 0.855, 0.06)', + motionEaseOutQuint: 'cubic-bezier(0.23, 1, 0.32, 1)', + borderRadius: 6, + sizeUnit: 4, + sizeStep: 4, + sizePopupArrow: 16, + controlHeight: 32, + zIndexBase: 0, + zIndexPopupBase: 1000, + opacityImage: 1, + motion: true, + colorLinkHover: '#4E47BB', + 'blue-1': '#e6f4ff', + blue1: '#e6f4ff', + 'blue-2': '#bae0ff', + blue2: '#bae0ff', + 'blue-3': '#91caff', + blue3: '#91caff', + 'blue-4': '#69b1ff', + blue4: '#69b1ff', + 'blue-5': '#4096ff', + blue5: '#4096ff', + 'blue-6': '#1677ff', + blue6: '#1677ff', + 'blue-7': '#0958d9', + blue7: '#0958d9', + 'blue-8': '#003eb3', + blue8: '#003eb3', + 'blue-9': '#002c8c', + blue9: '#002c8c', + 'blue-10': '#001d66', + blue10: '#001d66', + 'purple-1': '#f9f0ff', + purple1: '#f9f0ff', + 'purple-2': '#efdbff', + purple2: '#efdbff', + 'purple-3': '#d3adf7', + purple3: '#d3adf7', + 'purple-4': '#b37feb', + purple4: '#b37feb', + 'purple-5': '#9254de', + purple5: '#9254de', + 'purple-6': '#722ed1', + purple6: '#722ed1', + 'purple-7': '#531dab', + purple7: '#531dab', + 'purple-8': '#391085', + purple8: '#391085', + 'purple-9': '#22075e', + purple9: '#22075e', + 'purple-10': '#120338', + purple10: '#120338', + 'cyan-1': '#e6fffb', + cyan1: '#e6fffb', + 'cyan-2': '#b5f5ec', + cyan2: '#b5f5ec', + 'cyan-3': '#87e8de', + cyan3: '#87e8de', + 'cyan-4': '#5cdbd3', + cyan4: '#5cdbd3', + 'cyan-5': '#36cfc9', + cyan5: '#36cfc9', + 'cyan-6': '#13c2c2', + cyan6: '#13c2c2', + 'cyan-7': '#08979c', + cyan7: '#08979c', + 'cyan-8': '#006d75', + cyan8: '#006d75', + 'cyan-9': '#00474f', + cyan9: '#00474f', + 'cyan-10': '#002329', + cyan10: '#002329', + 'green-1': '#f6ffed', + green1: '#f6ffed', + 'green-2': '#d9f7be', + green2: '#d9f7be', + 'green-3': '#b7eb8f', + green3: '#b7eb8f', + 'green-4': '#95de64', + green4: '#95de64', + 'green-5': '#73d13d', + green5: '#73d13d', + 'green-6': '#52c41a', + green6: '#52c41a', + 'green-7': '#389e0d', + green7: '#389e0d', + 'green-8': '#237804', + green8: '#237804', + 'green-9': '#135200', + green9: '#135200', + 'green-10': '#092b00', + green10: '#092b00', + 'magenta-1': '#fff0f6', + magenta1: '#fff0f6', + 'magenta-2': '#ffd6e7', + magenta2: '#ffd6e7', + 'magenta-3': '#ffadd2', + magenta3: '#ffadd2', + 'magenta-4': '#ff85c0', + magenta4: '#ff85c0', + 'magenta-5': '#f759ab', + magenta5: '#f759ab', + 'magenta-6': '#eb2f96', + magenta6: '#eb2f96', + 'magenta-7': '#c41d7f', + magenta7: '#c41d7f', + 'magenta-8': '#9e1068', + magenta8: '#9e1068', + 'magenta-9': '#780650', + magenta9: '#780650', + 'magenta-10': '#520339', + magenta10: '#520339', + 'pink-1': '#fff0f6', + pink1: '#fff0f6', + 'pink-2': '#ffd6e7', + pink2: '#ffd6e7', + 'pink-3': '#ffadd2', + pink3: '#ffadd2', + 'pink-4': '#ff85c0', + pink4: '#ff85c0', + 'pink-5': '#f759ab', + pink5: '#f759ab', + 'pink-6': '#eb2f96', + pink6: '#eb2f96', + 'pink-7': '#c41d7f', + pink7: '#c41d7f', + 'pink-8': '#9e1068', + pink8: '#9e1068', + 'pink-9': '#780650', + pink9: '#780650', + 'pink-10': '#520339', + pink10: '#520339', + 'red-1': '#fff1f0', + red1: '#fff1f0', + 'red-2': '#ffccc7', + red2: '#ffccc7', + 'red-3': '#ffa39e', + red3: '#ffa39e', + 'red-4': '#ff7875', + red4: '#ff7875', + 'red-5': '#ff4d4f', + red5: '#ff4d4f', + 'red-6': '#f5222d', + red6: '#f5222d', + 'red-7': '#cf1322', + red7: '#cf1322', + 'red-8': '#a8071a', + red8: '#a8071a', + 'red-9': '#820014', + red9: '#820014', + 'red-10': '#5c0011', + red10: '#5c0011', + 'orange-1': '#fff7e6', + orange1: '#fff7e6', + 'orange-2': '#ffe7ba', + orange2: '#ffe7ba', + 'orange-3': '#ffd591', + orange3: '#ffd591', + 'orange-4': '#ffc069', + orange4: '#ffc069', + 'orange-5': '#ffa940', + orange5: '#ffa940', + 'orange-6': '#fa8c16', + orange6: '#fa8c16', + 'orange-7': '#d46b08', + orange7: '#d46b08', + 'orange-8': '#ad4e00', + orange8: '#ad4e00', + 'orange-9': '#873800', + orange9: '#873800', + 'orange-10': '#612500', + orange10: '#612500', + 'yellow-1': '#feffe6', + yellow1: '#feffe6', + 'yellow-2': '#ffffb8', + yellow2: '#ffffb8', + 'yellow-3': '#fffb8f', + yellow3: '#fffb8f', + 'yellow-4': '#fff566', + yellow4: '#fff566', + 'yellow-5': '#ffec3d', + yellow5: '#ffec3d', + 'yellow-6': '#fadb14', + yellow6: '#fadb14', + 'yellow-7': '#d4b106', + yellow7: '#d4b106', + 'yellow-8': '#ad8b00', + yellow8: '#ad8b00', + 'yellow-9': '#876800', + yellow9: '#876800', + 'yellow-10': '#614700', + yellow10: '#614700', + 'volcano-1': '#fff2e8', + volcano1: '#fff2e8', + 'volcano-2': '#ffd8bf', + volcano2: '#ffd8bf', + 'volcano-3': '#ffbb96', + volcano3: '#ffbb96', + 'volcano-4': '#ff9c6e', + volcano4: '#ff9c6e', + 'volcano-5': '#ff7a45', + volcano5: '#ff7a45', + 'volcano-6': '#fa541c', + volcano6: '#fa541c', + 'volcano-7': '#d4380d', + volcano7: '#d4380d', + 'volcano-8': '#ad2102', + volcano8: '#ad2102', + 'volcano-9': '#871400', + volcano9: '#871400', + 'volcano-10': '#610b00', + volcano10: '#610b00', + 'geekblue-1': '#f0f5ff', + geekblue1: '#f0f5ff', + 'geekblue-2': '#d6e4ff', + geekblue2: '#d6e4ff', + 'geekblue-3': '#adc6ff', + geekblue3: '#adc6ff', + 'geekblue-4': '#85a5ff', + geekblue4: '#85a5ff', + 'geekblue-5': '#597ef7', + geekblue5: '#597ef7', + 'geekblue-6': '#2f54eb', + geekblue6: '#2f54eb', + 'geekblue-7': '#1d39c4', + geekblue7: '#1d39c4', + 'geekblue-8': '#10239e', + geekblue8: '#10239e', + 'geekblue-9': '#061178', + geekblue9: '#061178', + 'geekblue-10': '#030852', + geekblue10: '#030852', + 'gold-1': '#fffbe6', + gold1: '#fffbe6', + 'gold-2': '#fff1b8', + gold2: '#fff1b8', + 'gold-3': '#ffe58f', + gold3: '#ffe58f', + 'gold-4': '#ffd666', + gold4: '#ffd666', + 'gold-5': '#ffc53d', + gold5: '#ffc53d', + 'gold-6': '#faad14', + gold6: '#faad14', + 'gold-7': '#d48806', + gold7: '#d48806', + 'gold-8': '#ad6800', + gold8: '#ad6800', + 'gold-9': '#874d00', + gold9: '#874d00', + 'gold-10': '#613400', + gold10: '#613400', + 'lime-1': '#fcffe6', + lime1: '#fcffe6', + 'lime-2': '#f4ffb8', + lime2: '#f4ffb8', + 'lime-3': '#eaff8f', + lime3: '#eaff8f', + 'lime-4': '#d3f261', + lime4: '#d3f261', + 'lime-5': '#bae637', + lime5: '#bae637', + 'lime-6': '#a0d911', + lime6: '#a0d911', + 'lime-7': '#7cb305', + lime7: '#7cb305', + 'lime-8': '#5b8c00', + lime8: '#5b8c00', + 'lime-9': '#3f6600', + lime9: '#3f6600', + 'lime-10': '#254000', + lime10: '#254000', + colorText: 'rgba(0, 0, 0, 0.88)', + colorTextSecondary: 'rgba(0, 0, 0, 0.65)', + colorTextTertiary: 'rgba(0, 0, 0, 0.45)', + colorTextQuaternary: 'rgba(0, 0, 0, 0.25)', + colorFill: 'rgba(0, 0, 0, 0.15)', + colorFillSecondary: 'rgba(0, 0, 0, 0.06)', + colorFillTertiary: 'rgba(0, 0, 0, 0.04)', + colorFillQuaternary: 'rgba(0, 0, 0, 0.02)', + colorBgSolid: 'rgb(0, 0, 0)', + colorBgSolidHover: 'rgba(0, 0, 0, 0.75)', + colorBgSolidActive: 'rgba(0, 0, 0, 0.95)', + colorBgLayout: '#f5f5f5', + colorBgContainer: '#ffffff', + colorBgElevated: '#ffffff', + colorBgSpotlight: 'rgba(0, 0, 0, 0.85)', + colorBgBlur: 'transparent', + colorBorder: '#d9d9d9', + colorBorderSecondary: '#f0f0f0', + colorPrimaryBg: '#eeebfa', + colorPrimaryBgHover: '#e2dfed', + colorPrimaryBorder: '#c6c1e0', + colorPrimaryBorderHover: '#9d94d4', + colorPrimaryHover: '#756bc7', + colorPrimaryActive: '#343194', + colorPrimaryTextHover: '#756bc7', + colorPrimaryText: '#4e47bb', + colorPrimaryTextActive: '#343194', + colorSuccessBg: '#f6ffed', + colorSuccessBgHover: '#d9f7be', + colorSuccessBorder: '#b7eb8f', + colorSuccessBorderHover: '#95de64', + colorSuccessHover: '#95de64', + colorSuccessActive: '#389e0d', + colorSuccessTextHover: '#73d13d', + colorSuccessText: '#52c41a', + colorSuccessTextActive: '#389e0d', + colorErrorBg: '#fff2f0', + colorErrorBgHover: '#fff1f0', + colorErrorBgFilledHover: '#ffdfdc', + colorErrorBgActive: '#ffccc7', + colorErrorBorder: '#ffccc7', + colorErrorBorderHover: '#ffa39e', + colorErrorHover: '#ff7875', + colorErrorActive: '#d9363e', + colorErrorTextHover: '#ff7875', + colorErrorText: '#ff4d4f', + colorErrorTextActive: '#d9363e', + colorWarningBg: '#fffbe6', + colorWarningBgHover: '#fff1b8', + colorWarningBorder: '#ffe58f', + colorWarningBorderHover: '#ffd666', + colorWarningHover: '#ffd666', + colorWarningActive: '#d48806', + colorWarningTextHover: '#ffc53d', + colorWarningText: '#faad14', + colorWarningTextActive: '#d48806', + colorInfoBg: '#e6f4ff', + colorInfoBgHover: '#bae0ff', + colorInfoBorder: '#91caff', + colorInfoBorderHover: '#69b1ff', + colorInfoHover: '#69b1ff', + colorInfoActive: '#0958d9', + colorInfoTextHover: '#4096ff', + colorInfoText: '#1677ff', + colorInfoTextActive: '#0958d9', + colorLinkActive: '#0958d9', + colorBgMask: 'rgba(0, 0, 0, 0.45)', + colorWhite: '#fff', + fontSizeSM: 12, + fontSizeLG: 16, + fontSizeXL: 20, + fontSizeHeading1: 38, + fontSizeHeading2: 30, + fontSizeHeading3: 24, + fontSizeHeading4: 20, + fontSizeHeading5: 16, + lineHeight: 1.5714285714285714, + lineHeightLG: 1.5, + lineHeightSM: 1.6666666666666667, + fontHeight: 22, + fontHeightLG: 24, + fontHeightSM: 20, + lineHeightHeading1: 1.2105263157894737, + lineHeightHeading2: 1.2666666666666666, + lineHeightHeading3: 1.3333333333333333, + lineHeightHeading4: 1.4, + lineHeightHeading5: 1.5, + sizeXXL: 48, + sizeXL: 32, + sizeLG: 24, + sizeMD: 20, + sizeMS: 16, + size: 16, + sizeSM: 12, + sizeXS: 8, + sizeXXS: 4, + controlHeightSM: 24, + controlHeightXS: 16, + controlHeightLG: 40, + motionDurationFast: '0.1s', + motionDurationMid: '0.2s', + motionDurationSlow: '0.3s', + lineWidthBold: 2, + borderRadiusXS: 2, + borderRadiusSM: 4, + borderRadiusLG: 8, + borderRadiusOuter: 4, + colorFillContent: 'rgba(0, 0, 0, 0.06)', + colorFillContentHover: 'rgba(0, 0, 0, 0.15)', + colorFillAlter: 'rgba(0, 0, 0, 0.02)', + colorBgContainerDisabled: 'rgba(0, 0, 0, 0.04)', + colorBorderBg: '#ffffff', + colorSplit: 'rgba(5, 5, 5, 0.06)', + colorTextPlaceholder: 'rgba(0, 0, 0, 0.25)', + colorTextDisabled: 'rgba(0, 0, 0, 0.25)', + colorTextHeading: 'rgba(0, 0, 0, 0.88)', + colorTextLabel: 'rgba(0, 0, 0, 0.65)', + colorTextDescription: 'rgba(0, 0, 0, 0.45)', + colorTextLightSolid: '#fff', + colorHighlight: '#ff4d4f', + colorBgTextHover: 'rgba(0, 0, 0, 0.06)', + colorBgTextActive: 'rgba(0, 0, 0, 0.15)', + colorIcon: 'rgba(0, 0, 0, 0.45)', + colorIconHover: 'rgba(0, 0, 0, 0.88)', + colorErrorOutline: 'rgba(255, 38, 5, 0.06)', + colorWarningOutline: 'rgba(255, 215, 5, 0.1)', + fontSizeIcon: 12, + lineWidthFocus: 3, + controlOutlineWidth: 2, + controlInteractiveSize: 16, + controlItemBgHover: 'rgba(0, 0, 0, 0.04)', + controlItemBgActive: '#eeebfa', + controlItemBgActiveHover: '#e2dfed', + controlItemBgActiveDisabled: 'rgba(0, 0, 0, 0.15)', + controlTmpOutline: 'rgba(0, 0, 0, 0.02)', + controlOutline: 'rgba(42, 5, 192, 0.08)', + fontWeightStrong: 600, + opacityLoading: 0.65, + linkDecoration: 'none', + linkHoverDecoration: 'none', + linkFocusDecoration: 'none', + controlPaddingHorizontal: 12, + controlPaddingHorizontalSM: 8, + paddingXXS: 4, + paddingXS: 8, + paddingSM: 12, + padding: 16, + paddingMD: 20, + paddingLG: 24, + paddingXL: 32, + paddingContentHorizontalLG: 24, + paddingContentVerticalLG: 16, + paddingContentHorizontal: 16, + paddingContentVertical: 12, + paddingContentHorizontalSM: 16, + paddingContentVerticalSM: 8, + marginXXS: 4, + marginXS: 8, + marginSM: 12, + margin: 16, + marginMD: 20, + marginLG: 24, + marginXL: 32, + marginXXL: 48, + boxShadow: + '\n 0 6px 16px 0 rgba(0, 0, 0, 0.08),\n 0 3px 6px -4px rgba(0, 0, 0, 0.12),\n 0 9px 28px 8px rgba(0, 0, 0, 0.05)\n ', + boxShadowSecondary: + '\n 0 6px 16px 0 rgba(0, 0, 0, 0.08),\n 0 3px 6px -4px rgba(0, 0, 0, 0.12),\n 0 9px 28px 8px rgba(0, 0, 0, 0.05)\n ', + boxShadowTertiary: + '\n 0 1px 2px 0 rgba(0, 0, 0, 0.03),\n 0 1px 6px -1px rgba(0, 0, 0, 0.02),\n 0 2px 4px 0 rgba(0, 0, 0, 0.02)\n ', + screenXS: 480, + screenXSMin: 480, + screenXSMax: 575, + screenSM: 576, + screenSMMin: 576, + screenSMMax: 767, + screenMD: 768, + screenMDMin: 768, + screenMDMax: 991, + screenLG: 992, + screenLGMin: 992, + screenLGMax: 1199, + screenXL: 1200, + screenXLMin: 1200, + screenXLMax: 1599, + screenXXL: 1600, + screenXXLMin: 1600, + boxShadowPopoverArrow: '2px 2px 5px rgba(0, 0, 0, 0.05)', + boxShadowCard: + '\n 0 1px 2px -2px rgba(0, 0, 0, 0.16),\n 0 3px 6px 0 rgba(0, 0, 0, 0.12),\n 0 5px 12px 4px rgba(0, 0, 0, 0.09)\n ', + boxShadowDrawerRight: + '\n -6px 0 16px 0 rgba(0, 0, 0, 0.08),\n -3px 0 6px -4px rgba(0, 0, 0, 0.12),\n -9px 0 28px 8px rgba(0, 0, 0, 0.05)\n ', + boxShadowDrawerLeft: + '\n 6px 0 16px 0 rgba(0, 0, 0, 0.08),\n 3px 0 6px -4px rgba(0, 0, 0, 0.12),\n 9px 0 28px 8px rgba(0, 0, 0, 0.05)\n ', + boxShadowDrawerUp: + '\n 0 6px 16px 0 rgba(0, 0, 0, 0.08),\n 0 3px 6px -4px rgba(0, 0, 0, 0.12),\n 0 9px 28px 8px rgba(0, 0, 0, 0.05)\n ', + boxShadowDrawerDown: + '\n 0 -6px 16px 0 rgba(0, 0, 0, 0.08),\n 0 -3px 6px -4px rgba(0, 0, 0, 0.12),\n 0 -9px 28px 8px rgba(0, 0, 0, 0.05)\n ', + boxShadowTabsOverflowLeft: 'inset 10px 0 8px -8px rgba(0, 0, 0, 0.08)', + boxShadowTabsOverflowRight: 'inset -10px 0 8px -8px rgba(0, 0, 0, 0.08)', + boxShadowTabsOverflowTop: 'inset 0 10px 8px -8px rgba(0, 0, 0, 0.08)', + boxShadowTabsOverflowBottom: 'inset 0 -10px 8px -8px rgba(0, 0, 0, 0.08)', + isDarkMode: false + } +} + +for (const key in globalVariables) { + globalThis[key] = globalVariables[key] +} diff --git a/app/src/main/assets/template/tool-view.html b/app/src/main/assets/template/tool-view.html index 7ff13b2..d685e93 100644 --- a/app/src/main/assets/template/tool-view.html +++ b/app/src/main/assets/template/tool-view.html @@ -4,7 +4,12 @@ Preview - + + diff --git a/app/src/main/kotlin/top/fatweb/oxygen/toolbox/data/tool/ToolDataSource.kt b/app/src/main/kotlin/top/fatweb/oxygen/toolbox/data/tool/ToolDataSource.kt index e28ad53..7fa9f9f 100644 --- a/app/src/main/kotlin/top/fatweb/oxygen/toolbox/data/tool/ToolDataSource.kt +++ b/app/src/main/kotlin/top/fatweb/oxygen/toolbox/data/tool/ToolDataSource.kt @@ -22,4 +22,30 @@ class ToolDataSource @Inject constructor( } ) }.flowOn(ioDispatcher) + + fun getGlobalJsVariables(isDarkMode: Boolean) = flow { + emit( + context.assets.open( + if (isDarkMode) "template/global-variables-dark.js" + else "template/global-variables-light.js" + ) + .bufferedReader() + .use { + it.readText() + } + ) + }.flowOn(ioDispatcher) + + fun getGlobalCssVariables(isDarkMode: Boolean) = flow { + emit( + context.assets.open( + if (isDarkMode) "template/global-variables-dark.css" + else "template/global-variables-light.css" + ) + .bufferedReader() + .use { + it.readText() + } + ) + }.flowOn(ioDispatcher) } diff --git a/app/src/main/kotlin/top/fatweb/oxygen/toolbox/repository/tool/ToolRepository.kt b/app/src/main/kotlin/top/fatweb/oxygen/toolbox/repository/tool/ToolRepository.kt index 3070a81..abdfa61 100644 --- a/app/src/main/kotlin/top/fatweb/oxygen/toolbox/repository/tool/ToolRepository.kt +++ b/app/src/main/kotlin/top/fatweb/oxygen/toolbox/repository/tool/ToolRepository.kt @@ -6,6 +6,10 @@ import top.fatweb.oxygen.toolbox.model.tool.ToolEntity interface ToolRepository { val toolViewTemplate: Flow + fun getGlobalJsVariables(isDarkMode: Boolean): Flow + + fun getGlobalCssVariables(isDarkMode: Boolean): Flow + fun getAllToolsStream(searchValue: String): Flow> fun getStarToolsStream(searchValue: String): Flow> diff --git a/app/src/main/kotlin/top/fatweb/oxygen/toolbox/repository/tool/impl/OfflineToolRepository.kt b/app/src/main/kotlin/top/fatweb/oxygen/toolbox/repository/tool/impl/OfflineToolRepository.kt index 5078400..93b322d 100644 --- a/app/src/main/kotlin/top/fatweb/oxygen/toolbox/repository/tool/impl/OfflineToolRepository.kt +++ b/app/src/main/kotlin/top/fatweb/oxygen/toolbox/repository/tool/impl/OfflineToolRepository.kt @@ -14,6 +14,12 @@ class OfflineToolRepository @Inject constructor( override val toolViewTemplate: Flow get() = toolDataSource.toolViewTemplate + override fun getGlobalJsVariables(isDarkMode: Boolean): Flow = + toolDataSource.getGlobalJsVariables(isDarkMode) + + override fun getGlobalCssVariables(isDarkMode: Boolean): Flow = + toolDataSource.getGlobalCssVariables(isDarkMode) + override fun getAllToolsStream(searchValue: String): Flow> = toolDao.selectAllTools(searchValue) diff --git a/app/src/main/kotlin/top/fatweb/oxygen/toolbox/ui/util/ResourcesUtils.kt b/app/src/main/kotlin/top/fatweb/oxygen/toolbox/ui/util/ResourcesUtils.kt index 689c3fb..e6df0ec 100644 --- a/app/src/main/kotlin/top/fatweb/oxygen/toolbox/ui/util/ResourcesUtils.kt +++ b/app/src/main/kotlin/top/fatweb/oxygen/toolbox/ui/util/ResourcesUtils.kt @@ -11,7 +11,7 @@ import androidx.core.os.LocaleListCompat import java.util.Locale object ResourcesUtils { - private fun getConfiguration(context: Context): Configuration = context.resources.configuration + fun getConfiguration(context: Context): Configuration = context.resources.configuration fun getAppLocale(context: Context): Locale = getConfiguration(context).locales.get(0) diff --git a/app/src/main/kotlin/top/fatweb/oxygen/toolbox/ui/view/ToolViewScreen.kt b/app/src/main/kotlin/top/fatweb/oxygen/toolbox/ui/view/ToolViewScreen.kt index f11362d..291496d 100644 --- a/app/src/main/kotlin/top/fatweb/oxygen/toolbox/ui/view/ToolViewScreen.kt +++ b/app/src/main/kotlin/top/fatweb/oxygen/toolbox/ui/view/ToolViewScreen.kt @@ -220,7 +220,8 @@ private fun Content( ), factory = { webViewInstanceState.webView - } + }, + captureBackPresses = false ) } } diff --git a/app/src/main/kotlin/top/fatweb/oxygen/toolbox/ui/view/ToolViewScreenViewModel.kt b/app/src/main/kotlin/top/fatweb/oxygen/toolbox/ui/view/ToolViewScreenViewModel.kt index 8260653..7239eaf 100644 --- a/app/src/main/kotlin/top/fatweb/oxygen/toolbox/ui/view/ToolViewScreenViewModel.kt +++ b/app/src/main/kotlin/top/fatweb/oxygen/toolbox/ui/view/ToolViewScreenViewModel.kt @@ -1,27 +1,38 @@ package top.fatweb.oxygen.toolbox.ui.view +import android.content.BroadcastReceiver import android.content.Context +import android.content.Intent +import android.content.IntentFilter +import android.content.res.Configuration import android.webkit.WebView import androidx.lifecycle.SavedStateHandle import androidx.lifecycle.ViewModel import androidx.lifecycle.viewModelScope import dagger.hilt.android.lifecycle.HiltViewModel import dagger.hilt.android.qualifiers.ApplicationContext +import kotlinx.coroutines.ExperimentalCoroutinesApi +import kotlinx.coroutines.channels.awaitClose import kotlinx.coroutines.flow.Flow import kotlinx.coroutines.flow.FlowCollector import kotlinx.coroutines.flow.MutableStateFlow import kotlinx.coroutines.flow.SharingStarted import kotlinx.coroutines.flow.StateFlow +import kotlinx.coroutines.flow.callbackFlow import kotlinx.coroutines.flow.combine +import kotlinx.coroutines.flow.flatMapLatest import kotlinx.coroutines.flow.flow import kotlinx.coroutines.flow.flowOf import kotlinx.coroutines.flow.stateIn import timber.log.Timber import top.fatweb.oxygen.toolbox.model.Result import top.fatweb.oxygen.toolbox.model.tool.ToolEntity +import top.fatweb.oxygen.toolbox.model.userdata.DarkThemeConfig import top.fatweb.oxygen.toolbox.navigation.ToolViewArgs import top.fatweb.oxygen.toolbox.repository.tool.StoreRepository import top.fatweb.oxygen.toolbox.repository.tool.ToolRepository +import top.fatweb.oxygen.toolbox.repository.userdata.UserDataRepository +import top.fatweb.oxygen.toolbox.ui.util.ResourcesUtils import top.fatweb.oxygen.toolbox.util.decodeToStringWithZip import javax.inject.Inject import kotlin.io.encoding.Base64 @@ -31,6 +42,7 @@ import kotlin.time.Duration.Companion.seconds @HiltViewModel class ToolViewScreenViewModel @Inject constructor( @ApplicationContext context: Context, + userDataRepository: UserDataRepository, storeRepository: StoreRepository, toolRepository: ToolRepository, savedStateHandle: SavedStateHandle @@ -46,10 +58,12 @@ class ToolViewScreenViewModel @Inject constructor( val toolViewUiState: StateFlow = toolViewUiState( + context = context, savedStateHandle = savedStateHandle, username = username, toolId = toolId, preview = preview, + userDataRepository = userDataRepository, storeRepository = storeRepository, toolRepository = toolRepository, storeDetailCache = storeDetailCache @@ -70,11 +84,14 @@ class ToolViewScreenViewModel @Inject constructor( ) } +@OptIn(ExperimentalCoroutinesApi::class) private fun toolViewUiState( + context: Context, savedStateHandle: SavedStateHandle, username: String, toolId: String, preview: Boolean, + userDataRepository: UserDataRepository, storeRepository: StoreRepository, toolRepository: ToolRepository, storeDetailCache: MutableStateFlow?> @@ -83,31 +100,74 @@ private fun toolViewUiState( val entityFlow = if (!preview) toolRepository.getToolByUsernameAndToolId(username, toolId) else flowOf(null) - return flow { - combine(entityFlow, toolViewTemplate, ::Pair).collect { (entityFlow, toolViewTemplate) -> - if (entityFlow == null) { - savedStateHandle[IS_PREVIEW] = true - val cachedDetail = storeDetailCache.value - if (cachedDetail != null) { - emitResult(result = cachedDetail, toolViewTemplate = toolViewTemplate) - } else { - storeRepository.detail(username, toolId).collect { result -> - storeDetailCache.value = result - emitResult(result = result, toolViewTemplate = toolViewTemplate) - } + val isSystemDarkModeFlow = callbackFlow { + val receiver = object : BroadcastReceiver() { + override fun onReceive(context: Context?, instent: Intent?) { + context?.let(ResourcesUtils::getConfiguration)?.run { + trySend((uiMode and Configuration.UI_MODE_NIGHT_MASK) == Configuration.UI_MODE_NIGHT_YES) } - } else { - savedStateHandle[IS_PREVIEW] = false - emit( - ToolViewUiState.Success( - entityFlow.name, - processHtml( - toolViewTemplate = toolViewTemplate, - distBase64 = entityFlow.dist!!, - baseBase64 = entityFlow.base!! - ) - ) - ) + } + } + val filter = IntentFilter(Intent.ACTION_CONFIGURATION_CHANGED) + context.registerReceiver(receiver, filter) + + trySend((ResourcesUtils.getConfiguration(context).uiMode and Configuration.UI_MODE_NIGHT_MASK) == Configuration.UI_MODE_NIGHT_YES) + + awaitClose { context.unregisterReceiver(receiver) } + } + + return isSystemDarkModeFlow.flatMapLatest { isSystemDarkMode -> + flow { + userDataRepository.userData.collect { userData -> + val isDarkMode: Boolean = when (userData.darkThemeConfig) { + DarkThemeConfig.FollowSystem -> isSystemDarkMode + DarkThemeConfig.Light -> false + DarkThemeConfig.Dark -> true + } + val globalJsVariables = toolRepository.getGlobalJsVariables(isDarkMode) + val globalCssVariables = toolRepository.getGlobalCssVariables(isDarkMode) + combine(entityFlow, toolViewTemplate, globalJsVariables, ::Triple) + .combine(globalCssVariables) { triple, globalCssVariables -> + Quadruple(triple.first, triple.second, triple.third, globalCssVariables) + } + .collect { (entityFlow, toolViewTemplate, globalJsVariables, globalCssVariables) -> + if (entityFlow == null) { + savedStateHandle[IS_PREVIEW] = true + val cachedDetail = storeDetailCache.value + if (cachedDetail != null) { + emitResult( + result = cachedDetail, + toolViewTemplate = toolViewTemplate, + globalJsVariables = globalJsVariables, + globalCssVariables = globalCssVariables + ) + } else { + storeRepository.detail(username, toolId).collect { result -> + storeDetailCache.value = result + emitResult( + result = result, + toolViewTemplate = toolViewTemplate, + globalJsVariables = globalJsVariables, + globalCssVariables = globalCssVariables + ) + } + } + } else { + savedStateHandle[IS_PREVIEW] = false + emit( + ToolViewUiState.Success( + entityFlow.name, + processHtml( + toolViewTemplate = toolViewTemplate, + globalJsVariables = globalJsVariables, + globalCssVariables = globalCssVariables, + distBase64 = entityFlow.dist!!, + baseBase64 = entityFlow.base!! + ) + ) + ) + } + } } } } @@ -115,7 +175,9 @@ private fun toolViewUiState( private suspend fun FlowCollector.emitResult( result: Result, - toolViewTemplate: String + toolViewTemplate: String, + globalJsVariables: String, + globalCssVariables: String ) { emit( when (result) { @@ -126,6 +188,8 @@ private suspend fun FlowCollector.emitResult( result.data.name, processHtml( toolViewTemplate = toolViewTemplate, + globalJsVariables = globalJsVariables, + globalCssVariables = globalCssVariables, distBase64 = dist, baseBase64 = base ) @@ -163,13 +227,23 @@ sealed interface WebViewInstanceState { } @OptIn(ExperimentalEncodingApi::class) -private fun processHtml(toolViewTemplate: String, distBase64: String, baseBase64: String): String { +private fun processHtml( + toolViewTemplate: String, + globalJsVariables: String, + globalCssVariables: String, + distBase64: String, + baseBase64: String +): String { val dist = Base64.decodeToStringWithZip(distBase64) val base = Base64.decodeToStringWithZip(baseBase64) return toolViewTemplate + .replace(oldValue = "{{replace_global_js_variables}}", newValue = globalJsVariables) + .replace(oldValue = "{{replace_global_css_variables}}", newValue = globalCssVariables) .replace(oldValue = "{{replace_dict_code}}", newValue = dist) .replace(oldValue = "{{replace_base_code}}", newValue = base) } +data class Quadruple(val first: A, val second: B, val third: C, val fourth: D) + private const val IS_PREVIEW = "IS_PREVIEW"