diff --git a/lib/mui.less b/lib/mui.less new file mode 100644 index 0000000000..5ff328059b --- /dev/null +++ b/lib/mui.less @@ -0,0 +1,256 @@ +#__mui { + .base() { + .rgbify(@color) { + @rgb: red(@color) green(@color) blue(@color); + } + + .standard-palette(@name, @value) { + + --mui-palette-@{name}-main: @value; + --mui-palette-@{name}-dark: darken(@value, 5%); + --mui-palette-@{name}-light: lighten(@value, 5%); + --mui-palette-@{name}-contrastText: contrast(@value, @base, @text); + --mui-palette-@{name}-hover: darken(@value, 10%); + --mui-palette-@{name}-selected: lighten(@value, 7%); + --mui-palette-@{name}-focus: lighten(@value, 7%); + --mui-palette-@{name}-focusVisible: rgba(213, 37, 54, 0.32); + --mui-palette-@{name}-outlinedBorder: lighten(@value, 9%); + --mui-palette-@{name}-mainChannel: .rgbify(@value) []; + --mui-palette-@{name}-lightChannel: .rgbify(lighten(@value, 5%)) []; + --mui-palette-@{name}-darkChannel: .rgbify(darken(@value, 5%)) []; + --mui-palette-@{name}-contrastTextChannel: .rgbify(contrast(@value, @base, @text)) []; + } + + .standard-palette(primary, @accent); + .standard-palette(secondary, @overlay1); + .standard-palette(error, @red); + .standard-palette(success, @green); + .standard-palette(warning, @yellow); + .standard-palette(premium, @mauve); + .standard-palette(info, @sky); + + --mui-palette-white-main: @base; + --mui-palette-white-light: @base; + --mui-palette-white-dark: @base; + --mui-palette-white-contrastText: #000000; + --mui-palette-white-hover: rgba(255, 255, 255, 0.12); + --mui-palette-white-selected: rgba(255, 255, 255, 0.16); + --mui-palette-white-focus: rgba(255, 255, 255, 0.24); + --mui-palette-white-focusVisible: rgba(255, 255, 255, 0.32); + --mui-palette-white-outlinedBorder: rgba(255, 255, 255, 0.56); + --mui-palette-white-mainChannel: red(@base) green(@base) blue(@base); + --mui-palette-white-lightChannel: 255 255 255; + --mui-palette-white-darkChannel: 255 255 255; + --mui-palette-white-contrastTextChannel: 0 0 0; + + --mui-palette-black-main: #000000; + --mui-palette-black-light: #000000; + --mui-palette-black-dark: #000000; + --mui-palette-black-contrastText: #FFFFFF; + --mui-palette-black-hover: rgba(0, 0, 0, 0.12); + --mui-palette-black-selected: rgba(0, 0, 0, 0.16); + --mui-palette-black-focus: rgba(0, 0, 0, 0.24); + --mui-palette-black-focusVisible: rgba(0, 0, 0, 0.32); + --mui-palette-black-outlinedBorder: rgba(0, 0, 0, 0.56); + --mui-palette-black-mainChannel: 0 0 0; + --mui-palette-black-lightChannel: 0 0 0; + --mui-palette-black-darkChannel: 0 0 0; + --mui-palette-black-contrastTextChannel: 255 255 255; + + --mui-palette-background-default: @base; + --mui-palette-background-paper: @base; + --mui-palette-background-secondary: @mantle; + --mui-palette-background-tooltip: @overlay0; + + --mui-palette-text-primary: @text; + --mui-palette-text-secondary: @overlay1; + --mui-palette-text-success: @green; + --mui-palette-text-error: @red; + --mui-palette-text-warning: @peach; + --mui-palette-text-premium: @mauve; + --mui-palette-text-disabled: rgba(0, 0, 0, 0.38); + --mui-palette-text-primaryChannel: 0 0 0; + --mui-palette-text-secondaryChannel: 103 114 133; + + --mui-palette-divider: @surface0; + + --mui-palette-action-active: @text; + --mui-palette-action-activatedOpacity: 0.24; + --mui-palette-action-hover: @overlay0; + --mui-palette-action-hoverOpacity: 0.12; + --mui-palette-action-selected: rgba(0, 0, 0, 0.16); + --mui-palette-action-selectedOpacity: 0.16; + --mui-palette-action-focus: rgba(0, 0, 0, 0.24); + --mui-palette-action-focusOpacity: 0.24; + --mui-palette-action-disabled: rgba(0, 0, 0, 0.32); + --mui-palette-action-disabledBackground: rgba(0, 0, 0, 0.12); + --mui-palette-action-disabledOpacity: 0.38; + --mui-palette-action-activeChannel: 0 0 0; + --mui-palette-action-selectedChannel: 0 0 0; + + --mui-palette-productGradients-admin: linear-gradient(to right, #7D2EFF, #1D63ED); + --mui-palette-productGradients-build: linear-gradient(to right, #C918C0, #1D63ED); + --mui-palette-productGradients-desktop: linear-gradient(to right, #0C49C2, #1D63ED); + --mui-palette-productGradients-docs: linear-gradient(to right, #677285, #1D63ED); + --mui-palette-productGradients-hub: linear-gradient(to right, #1D63ED, #1D63ED); + --mui-palette-productGradients-scout: linear-gradient(to right, #2E7F74, #1D63ED); + --mui-palette-productGradients-pride: linear-gradient(90deg, #1D63ED 0%, #3BA08D 24.48%, #FBB552 51.04%, #FF5B60 75.52%, #6D00EB 100%); + + --mui-palette-TableCell-borderColor: rgba(224, 224, 224, 1); + --mui-palette-TableCell-border: rgba(224, 224, 224, 1); + + --mui-palette-common-black: @text; + --mui-palette-common-white: @base; + --mui-palette-common-background: @base; + --mui-palette-common-onBackground: @text; + --mui-palette-common-backgroundChannel: 255 255 255; + --mui-palette-common-onBackgroundChannel: 0 0 0; + + --mui-palette-grey-50: #fafafa; + --mui-palette-grey-100: #f5f5f5; + --mui-palette-grey-200: #eeeeee; + --mui-palette-grey-300: #e0e0e0; + --mui-palette-grey-400: #bdbdbd; + --mui-palette-grey-500: #9e9e9e; + --mui-palette-grey-600: #757575; + --mui-palette-grey-700: #616161; + --mui-palette-grey-800: @surface0; + --mui-palette-grey-900: #212121; + --mui-palette-grey-A100: #f5f5f5; + --mui-palette-grey-A200: #eeeeee; + --mui-palette-grey-A400: #bdbdbd; + --mui-palette-grey-A700: #616161; + + --mui-palette-Alert-errorColor: rgb(102, 36, 38); + --mui-palette-Alert-infoColor: rgb(11, 57, 94); + --mui-palette-Alert-successColor: rgb(23, 64, 56); + --mui-palette-Alert-warningColor: rgb(88, 48, 2); + --mui-palette-Alert-errorFilledBg: var(--mui-palette-error-main, #D52536); + --mui-palette-Alert-infoFilledBg: var(--mui-palette-info-main, #1D63ED); + --mui-palette-Alert-successFilledBg: var(--mui-palette-success-main, #2E7F74); + --mui-palette-Alert-warningFilledBg: var(--mui-palette-warning-main, #B85504); + --mui-palette-Alert-errorFilledColor: #fff; + --mui-palette-Alert-infoFilledColor: #fff; + --mui-palette-Alert-successFilledColor: #fff; + --mui-palette-Alert-warningFilledColor: #fff; + --mui-palette-Alert-errorStandardBg: rgb(255, 238, 239); + --mui-palette-Alert-infoStandardBg: rgb(232, 243, 253); + --mui-palette-Alert-successStandardBg: rgb(235, 245, 243); + --mui-palette-Alert-warningStandardBg: rgb(251, 241, 230); + --mui-palette-Alert-errorIconColor: var(--mui-palette-error-main, #D52536); + --mui-palette-Alert-infoIconColor: var(--mui-palette-info-main, #1D63ED); + --mui-palette-Alert-successIconColor: var(--mui-palette-success-main, #2E7F74); + --mui-palette-Alert-warningIconColor: var(--mui-palette-warning-main, #B85504); + + --mui-palette-AppBar-defaultBg: var(--mui-palette-grey-100, #f5f5f5); + --mui-palette-Avatar-defaultBg: var(--mui-palette-grey-400, #bdbdbd); + --mui-palette-Button-inheritContainedBg: var(--mui-palette-grey-300, #e0e0e0); + --mui-palette-Button-inheritContainedHoverBg: var(--mui-palette-grey-A100, #f5f5f5); + --mui-palette-Chip-defaultBorder: var(--mui-palette-grey-400, #bdbdbd); + --mui-palette-Chip-defaultAvatarColor: var(--mui-palette-grey-700, #616161); + --mui-palette-Chip-defaultIconColor: var(--mui-palette-grey-700, #616161); + --mui-palette-FilledInput-bg: rgba(0, 0, 0, 0.06); + --mui-palette-FilledInput-hoverBg: rgba(0, 0, 0, 0.09); + --mui-palette-FilledInput-disabledBg: rgba(0, 0, 0, 0.12); + --mui-palette-LinearProgress-primaryBg: rgb(169, 195, 248); + --mui-palette-LinearProgress-secondaryBg: rgb(197, 201, 208); + --mui-palette-LinearProgress-errorBg: rgb(239, 172, 178); + --mui-palette-LinearProgress-infoBg: rgb(169, 195, 248); + --mui-palette-LinearProgress-successBg: rgb(175, 206, 202); + --mui-palette-LinearProgress-warningBg: rgb(228, 190, 159); + --mui-palette-Skeleton-bg: rgba(var(--mui-palette-text-primaryChannel, undefined) / 0.11); + --mui-palette-Slider-primaryTrack: rgb(169, 195, 248); + --mui-palette-Slider-secondaryTrack: rgb(197, 201, 208); + --mui-palette-Slider-errorTrack: rgb(239, 172, 178); + --mui-palette-Slider-infoTrack: rgb(169, 195, 248); + --mui-palette-Slider-successTrack: rgb(175, 206, 202); + --mui-palette-Slider-warningTrack: rgb(228, 190, 159); + --mui-palette-SnackbarContent-bg: rgb(50, 50, 50); + --mui-palette-SnackbarContent-color: #fff; + --mui-palette-SpeedDialAction-fabHoverBg: rgb(216, 216, 216); + --mui-palette-StepConnector-border: var(--mui-palette-grey-400, #bdbdbd); + --mui-palette-StepContent-border: var(--mui-palette-grey-400, #bdbdbd); + --mui-palette-Switch-defaultColor: var(--mui-palette-common-white, #fff); + --mui-palette-Switch-defaultDisabledColor: var(--mui-palette-grey-100, #f5f5f5); + --mui-palette-Switch-primaryDisabledColor: rgb(169, 195, 248); + --mui-palette-Switch-secondaryDisabledColor: rgb(197, 201, 208); + --mui-palette-Switch-errorDisabledColor: rgb(239, 172, 178); + --mui-palette-Switch-infoDisabledColor: rgb(169, 195, 248); + --mui-palette-Switch-successDisabledColor: rgb(175, 206, 202); + --mui-palette-Switch-warningDisabledColor: rgb(228, 190, 159); + --mui-palette-Tooltip-bg: @surface2; + --mui-palette-AppBar-darkColor: @base; + --mui-palette-misc-a: lighten(@accent, 5%); + --mui-palette-code-bg: @crust; + --mui-palette-tip-main: @green; + --mui-palette-fenced-bg: if(@flavor =latte, + @mantle, + @surface0); + --mui-palette-header-default: if(@flavor =latte, + lighten(@accent, 10%), + @mantle); + + mark { + background-color: @accent; + color: var(--mui-palette-background-default); + } + + header, + .MuiAppBar-root { + background: linear-gradient(90deg, var(--mui-palette-primary-main) 0%, var(--mui-palette-primary-dark) 100%) !important; + } + } + + .with-name(@name) { + .shade-generate(@color, @ctp_color_name) { + --mui-palette-@{name}-@{color}-50: lighten(@ctp_color_name, 45%); + --mui-palette-@{name}-@{color}-100: lighten(@ctp_color_name, 35%); + --mui-palette-@{name}-@{color}-200: lighten(@ctp_color_name, 25%); + --mui-palette-@{name}-@{color}-300: lighten(@ctp_color_name, 15%); + --mui-palette-@{name}-@{color}-400: lighten(@ctp_color_name, 5%); + --mui-palette-@{name}-@{color}-500: @ctp_color_name; + --mui-palette-@{name}-@{color}-600: darken(@ctp_color_name, 5%); + --mui-palette-@{name}-@{color}-700: darken(@ctp_color_name, 15%); + --mui-palette-@{name}-@{color}-800: darken(@ctp_color_name, 25%); + --mui-palette-@{name}-@{color}-900: darken(@ctp_color_name, 35%); + --mui-palette-@{name}-@{color}-950: darken(@ctp_color_name, 45%); + } + + .shade-generate(amber, @maroon); + .shade-generate(blue, @blue); + .shade-generate(green, @green); + .shade-generate(magenta, @mauve); + .shade-generate(red, @red); + .shade-generate(violet, @pink); + .shade-generate(orange, @peach); + .shade-generate(pink, @pink); + .shade-generate(teal, @teal); + .shade-generate(yellow, @yellow); + + --mui-palette-@{name}-grey-50: @overlay1; + --mui-palette-@{name}-grey-100: @surface1; + --mui-palette-@{name}-grey-200: lighten(@surface2, 25%); + --mui-palette-@{name}-grey-300: lighten(@surface2, 15%); + --mui-palette-@{name}-grey-400: lighten(@surface2, 5%); + --mui-palette-@{name}-grey-500: @surface2; + --mui-palette-@{name}-grey-600: @text; + --mui-palette-@{name}-grey-700: @overlay1; + --mui-palette-@{name}-grey-800: darken(@surface2, 25%); + --mui-palette-@{name}-grey-900: @overlay1; + --mui-palette-@{name}-grey-950: darken(@surface2, 45%); + + + --mui-palette-@{name}-text: #000000; + --mui-palette-@{name}-background-primary: @base; + --mui-palette-@{name}-background-secondary: @mantle; + } + + .override(@name, @value) { + --mui-palette-@{name}: @value !important; + } + + .override-main(@name, @value) { + --mui-palette-@{name}-main: @value; + --mui-palette-@{name}-mainChannel: red(@value) green(@value) blue(@value); + } +} \ No newline at end of file