MudTheme
Palette
Name | Type | Default Light | Default Dark | CSS Variable |
---|---|---|---|---|
Black | MudColor |
rgba(39,44,52,1) |
rgba(39,39,47,1) |
--mud-palette-black |
White | MudColor |
rgba(255,255,255,1) |
--mud-palette-white | |
Primary | MudColor |
rgba(89,74,226,1) |
rgba(119,107,231,1) |
--mud-palette-primary |
PrimaryContrastText | MudColor |
rgba(255,255,255,1) |
--mud-palette-primary-text | |
Secondary | MudColor |
rgba(255,64,129,1) |
--mud-palette-secondary | |
SecondaryContrastText | MudColor |
rgba(255,255,255,1) |
--mud-palette-secondary-text | |
Tertiary | MudColor |
rgba(30,200,165,1) |
--mud-palette-tertiary | |
TertiaryContrastText | MudColor |
rgba(255,255,255,1) |
--mud-palette-tertiary-text | |
Info | MudColor |
rgba(33,150,243,1) |
rgba(50,153,255,1) |
--mud-palette-info |
InfoContrastText | MudColor |
rgba(255,255,255,1) |
--mud-palette-info-text | |
Success | MudColor |
rgba(0,200,83,1) |
rgba(11,186,131,1) |
--mud-palette-success |
SuccessContrastText | MudColor |
rgba(255,255,255,1) |
--mud-palette-success-text | |
Warning | MudColor |
rgba(255,152,0,1) |
rgba(255,168,0,1) |
--mud-palette-warning |
WarningContrastText | MudColor |
rgba(255,255,255,1) |
--mud-palette-warning-text | |
Error | MudColor |
rgba(244,67,54,1) |
rgba(246,78,98,1) |
--mud-palette-error |
ErrorContrastText | MudColor |
rgba(255,255,255,1) |
--mud-palette-error-text | |
Dark | MudColor |
rgba(66,66,66,1) |
rgba(39,39,47,1) |
--mud-palette-dark |
DarkContrastText | MudColor |
rgba(255,255,255,1) |
--mud-palette-dark-text | |
TextPrimary | MudColor |
rgba(66,66,66,1) |
rgba(255,255,255,0.6980392156862745) |
--mud-palette-text-primary |
TextSecondary | MudColor |
rgba(0,0,0,0.5372549019607843) |
rgba(255,255,255,0.4980392156862745) |
--mud-palette-text-secondary |
TextDisabled | MudColor |
rgba(0,0,0,0.3764705882352941) |
rgba(255,255,255,0.2) |
--mud-palette-text-disabled |
ActionDefault | MudColor |
rgba(0,0,0,0.5372549019607843) |
rgba(173,173,177,1) |
--mud-palette-action-default |
ActionDisabled | MudColor |
rgba(0,0,0,0.25882352941176473) |
rgba(255,255,255,0.25882352941176473) |
--mud-palette-action-disabled |
ActionDisabledBackground | MudColor |
rgba(0,0,0,0.11764705882352941) |
rgba(255,255,255,0.11764705882352941) |
--mud-palette-action-disabled-background |
Background | MudColor |
rgba(255,255,255,1) |
rgba(50,51,61,1) |
--mud-palette-background |
BackgroundGray | MudColor |
rgba(245,245,245,1) |
rgba(39,39,47,1) |
--mud-palette-background-gray |
Surface | MudColor |
rgba(255,255,255,1) |
rgba(55,55,64,1) |
--mud-palette-surface |
DrawerBackground | MudColor |
rgba(255,255,255,1) |
rgba(39,39,47,1) |
--mud-palette-drawer-background |
DrawerText | MudColor |
rgba(66,66,66,1) |
rgba(255,255,255,0.4980392156862745) |
--mud-palette-drawer-text |
DrawerIcon | MudColor |
rgba(97,97,97,1) |
rgba(255,255,255,0.4980392156862745) |
--mud-palette-drawer-icon |
AppbarBackground | MudColor |
rgba(89,74,226,1) |
rgba(39,39,47,1) |
--mud-palette-appbar-background |
AppbarText | MudColor |
rgba(255,255,255,1) |
rgba(255,255,255,0.6980392156862745) |
--mud-palette-appbar-text |
LinesDefault | MudColor |
rgba(0,0,0,0.11764705882352941) |
rgba(255,255,255,0.11764705882352941) |
--mud-palette-lines-default |
LinesInputs | MudColor |
rgba(189,189,189,1) |
rgba(255,255,255,0.2980392156862745) |
--mud-palette-lines-inputs |
TableLines | MudColor |
rgba(224,224,224,1) |
rgba(255,255,255,0.11764705882352941) |
--mud-palette-table-lines |
TableStriped | MudColor |
rgba(0,0,0,0.0196078431372549) |
rgba(255,255,255,0.2) |
--mud-palette-table-striped |
TableHover | MudColor |
rgba(0,0,0,0.0392156862745098) |
--mud-palette-table-hover | |
Divider | MudColor |
rgba(224,224,224,1) |
rgba(255,255,255,0.11764705882352941) |
--mud-palette-divider |
DividerLight | MudColor |
rgba(0,0,0,0.8) |
rgba(255,255,255,0.058823529411764705) |
--mud-palette-divider-light |
PrimaryDarken | String |
rgb(62,44,221) |
rgb(90,75,226) |
--mud-palette-primary-darken |
PrimaryLighten | String |
rgb(118,106,231) |
rgb(151,141,236) |
--mud-palette-primary-lighten |
SecondaryDarken | String |
rgb(255,31,105) |
--mud-palette-secondary-darken | |
SecondaryLighten | String |
rgb(255,102,153) |
--mud-palette-secondary-lighten | |
TertiaryDarken | String |
rgb(25,169,140) |
--mud-palette-tertiary-darken | |
TertiaryLighten | String |
rgb(42,223,187) |
--mud-palette-tertiary-lighten | |
InfoDarken | String |
rgb(12,128,223) |
rgb(10,133,255) |
--mud-palette-info-darken |
InfoLighten | String |
rgb(71,167,245) |
rgb(92,173,255) |
--mud-palette-info-lighten |
SuccessDarken | String |
rgb(0,163,68) |
rgb(9,154,108) |
--mud-palette-success-darken |
SuccessLighten | String |
rgb(0,235,98) |
rgb(13,222,156) |
--mud-palette-success-lighten |
WarningDarken | String |
rgb(214,129,0) |
rgb(214,143,0) |
--mud-palette-warning-darken |
WarningLighten | String |
rgb(255,167,36) |
rgb(255,182,36) |
--mud-palette-warning-lighten |
ErrorDarken | String |
rgb(242,28,13) |
rgb(244,47,70) |
--mud-palette-error-darken |
ErrorLighten | String |
rgb(246,96,85) |
rgb(248,119,134) |
--mud-palette-error-lighten |
DarkDarken | String |
rgb(46,46,46) |
rgb(23,23,28) |
--mud-palette-dark-darken |
DarkLighten | String |
rgb(87,87,87) |
rgb(56,56,67) |
--mud-palette-dark-lighten |
HoverOpacity | Double |
0.06 |
--mud-palette-hover-opacity | |
RippleOpacity | Double |
0.1 |
--mud-palette-ripple-opacity | |
RippleOpacitySecondary | Double |
0.2 |
--mud-palette-ripple-opacity-secondary | |
GrayDefault | String |
#9E9E9E |
--mud-palette-gray-default | |
GrayLight | String |
#BDBDBD |
--mud-palette-gray-light | |
GrayLighter | String |
#E0E0E0 |
--mud-palette-gray-lighter | |
GrayDark | String |
#757575 |
--mud-palette-gray-dark | |
GrayDarker | String |
#616161 |
--mud-palette-gray-darker | |
OverlayDark | String |
rgba(33,33,33,0.4980392156862745) |
--mud-palette-overlay-dark | |
OverlayLight | String |
rgba(255,255,255,0.4980392156862745) |
--mud-palette-overlay-light |
Shadows
Name | Type | Default | CSS Variable | CSS Class |
---|---|---|---|---|
Elevation | String[] | System.String[] | ||
Elevation[0] | String | none | --mud-elevation-0 | mud-elevation-0 |
Elevation[1] | String | 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12) | --mud-elevation-1 | mud-elevation-1 |
Elevation[2] | String | 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12) | --mud-elevation-2 | mud-elevation-2 |
Elevation[3] | String | 0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12) | --mud-elevation-3 | mud-elevation-3 |
Elevation[4] | String | 0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12) | --mud-elevation-4 | mud-elevation-4 |
Elevation[5] | String | 0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12) | --mud-elevation-5 | mud-elevation-5 |
Elevation[6] | String | 0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12) | --mud-elevation-6 | mud-elevation-6 |
Elevation[7] | String | 0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12) | --mud-elevation-7 | mud-elevation-7 |
Elevation[8] | String | 0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12) | --mud-elevation-8 | mud-elevation-8 |
Elevation[9] | String | 0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12) | --mud-elevation-9 | mud-elevation-9 |
Elevation[10] | String | 0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12) | --mud-elevation-10 | mud-elevation-10 |
Elevation[11] | String | 0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12) | --mud-elevation-11 | mud-elevation-11 |
Elevation[12] | String | 0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12) | --mud-elevation-12 | mud-elevation-12 |
Elevation[13] | String | 0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12) | --mud-elevation-13 | mud-elevation-13 |
Elevation[14] | String | 0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12) | --mud-elevation-14 | mud-elevation-14 |
Elevation[15] | String | 0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12) | --mud-elevation-15 | mud-elevation-15 |
Elevation[16] | String | 0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12) | --mud-elevation-16 | mud-elevation-16 |
Elevation[17] | String | 0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12) | --mud-elevation-17 | mud-elevation-17 |
Elevation[18] | String | 0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12) | --mud-elevation-18 | mud-elevation-18 |
Elevation[19] | String | 0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12) | --mud-elevation-19 | mud-elevation-19 |
Elevation[20] | String | 0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12) | --mud-elevation-20 | mud-elevation-20 |
Elevation[21] | String | 0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12) | --mud-elevation-21 | mud-elevation-21 |
Elevation[22] | String | 0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12) | --mud-elevation-22 | mud-elevation-22 |
Elevation[23] | String | 0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12) | --mud-elevation-23 | mud-elevation-23 |
Elevation[24] | String | 0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12) | --mud-elevation-24 | mud-elevation-24 |
Elevation[25] | String | 0 5px 5px -3px rgba(0,0,0,.06), 0 8px 10px 1px rgba(0,0,0,.042), 0 3px 14px 2px rgba(0,0,0,.036) | --mud-elevation-25 | mud-elevation-25 |
LayoutProperties
Name | Type | Default | CSS Variable | CSS Class |
---|---|---|---|---|
DefaultBorderRadius | String | 4px | --mud-default-border-radius | |
DrawerMiniWidthLeft | String | 56px | --mud-drawer-mini-width-left | |
DrawerMiniWidthRight | String | 56px | --mud-drawer-mini-width-right | |
DrawerWidthLeft | String | 240px | --mud-drawer-width-left | |
DrawerWidthRight | String | 240px | --mud-drawer-width-right | |
AppbarHeight | String | 64px | --mud-appbar-height |
Typography
Name | Type | Default | CSS Variable | CSS Class |
---|---|---|---|---|
Default | Default | |||
FontFamily | String[] | Roboto, Helvetica, Arial, sans-serif | --mud-typography-default-family | |
FontWeight | Int32 | 400 | --mud-typography-default-weight | |
FontSize | String | .875rem | --mud-typography-default-size | |
LineHeight | Double | 1.43 | --mud-typography-default-lineheight | |
LetterSpacing | String | .01071em | --mud-typography-default-letterspacing | |
TextTransform | String | none | --mud-typography-default-text-transform | |
H1 | H1 | |||
FontFamily | String[] | --mud-typography-h1-family | ||
FontWeight | Int32 | 300 | --mud-typography-h1-weight | |
FontSize | String | 6rem | --mud-typography-h1-size | |
LineHeight | Double | 1.167 | --mud-typography-h1-lineheight | |
LetterSpacing | String | -.01562em | --mud-typography-h1-letterspacing | |
TextTransform | String | none | --mud-typography-h1-text-transform | |
H2 | H2 | |||
FontFamily | String[] | --mud-typography-h2-family | ||
FontWeight | Int32 | 300 | --mud-typography-h2-weight | |
FontSize | String | 3.75rem | --mud-typography-h2-size | |
LineHeight | Double | 1.2 | --mud-typography-h2-lineheight | |
LetterSpacing | String | -.00833em | --mud-typography-h2-letterspacing | |
TextTransform | String | none | --mud-typography-h2-text-transform | |
H3 | H3 | |||
FontFamily | String[] | --mud-typography-h3-family | ||
FontWeight | Int32 | 400 | --mud-typography-h3-weight | |
FontSize | String | 3rem | --mud-typography-h3-size | |
LineHeight | Double | 1.167 | --mud-typography-h3-lineheight | |
LetterSpacing | String | 0 | --mud-typography-h3-letterspacing | |
TextTransform | String | none | --mud-typography-h3-text-transform | |
H4 | H4 | |||
FontFamily | String[] | --mud-typography-h4-family | ||
FontWeight | Int32 | 400 | --mud-typography-h4-weight | |
FontSize | String | 2.125rem | --mud-typography-h4-size | |
LineHeight | Double | 1.235 | --mud-typography-h4-lineheight | |
LetterSpacing | String | .00735em | --mud-typography-h4-letterspacing | |
TextTransform | String | none | --mud-typography-h4-text-transform | |
H5 | H5 | |||
FontFamily | String[] | --mud-typography-h5-family | ||
FontWeight | Int32 | 400 | --mud-typography-h5-weight | |
FontSize | String | 1.5rem | --mud-typography-h5-size | |
LineHeight | Double | 1.334 | --mud-typography-h5-lineheight | |
LetterSpacing | String | 0 | --mud-typography-h5-letterspacing | |
TextTransform | String | none | --mud-typography-h5-text-transform | |
H6 | H6 | |||
FontFamily | String[] | --mud-typography-h6-family | ||
FontWeight | Int32 | 500 | --mud-typography-h6-weight | |
FontSize | String | 1.25rem | --mud-typography-h6-size | |
LineHeight | Double | 1.6 | --mud-typography-h6-lineheight | |
LetterSpacing | String | .0075em | --mud-typography-h6-letterspacing | |
TextTransform | String | none | --mud-typography-h6-text-transform | |
Subtitle1 | Subtitle1 | |||
FontFamily | String[] | --mud-typography-subtitle1-family | ||
FontWeight | Int32 | 400 | --mud-typography-subtitle1-weight | |
FontSize | String | 1rem | --mud-typography-subtitle1-size | |
LineHeight | Double | 1.75 | --mud-typography-subtitle1-lineheight | |
LetterSpacing | String | .00938em | --mud-typography-subtitle1-letterspacing | |
TextTransform | String | none | --mud-typography-subtitle1-text-transform | |
Subtitle2 | Subtitle2 | |||
FontFamily | String[] | --mud-typography-subtitle2-family | ||
FontWeight | Int32 | 500 | --mud-typography-subtitle2-weight | |
FontSize | String | .875rem | --mud-typography-subtitle2-size | |
LineHeight | Double | 1.57 | --mud-typography-subtitle2-lineheight | |
LetterSpacing | String | .00714em | --mud-typography-subtitle2-letterspacing | |
TextTransform | String | none | --mud-typography-subtitle2-text-transform | |
Body1 | Body1 | |||
FontFamily | String[] | --mud-typography-body1-family | ||
FontWeight | Int32 | 400 | --mud-typography-body1-weight | |
FontSize | String | 1rem | --mud-typography-body1-size | |
LineHeight | Double | 1.5 | --mud-typography-body1-lineheight | |
LetterSpacing | String | .00938em | --mud-typography-body1-letterspacing | |
TextTransform | String | none | --mud-typography-body1-text-transform | |
Body2 | Body2 | |||
FontFamily | String[] | --mud-typography-body2-family | ||
FontWeight | Int32 | 400 | --mud-typography-body2-weight | |
FontSize | String | .875rem | --mud-typography-body2-size | |
LineHeight | Double | 1.43 | --mud-typography-body2-lineheight | |
LetterSpacing | String | .01071em | --mud-typography-body2-letterspacing | |
TextTransform | String | none | --mud-typography-body2-text-transform | |
Input | Input | |||
FontFamily | String[] | --mud-typography-input-family | ||
FontWeight | Int32 | 400 | --mud-typography-input-weight | |
FontSize | String | 1rem | --mud-typography-input-size | |
LineHeight | Double | 1.1876 | --mud-typography-input-lineheight | |
LetterSpacing | String | .00938em | --mud-typography-input-letterspacing | |
TextTransform | String | none | --mud-typography-input-text-transform | |
Button | Button | |||
FontFamily | String[] | --mud-typography-button-family | ||
FontWeight | Int32 | 500 | --mud-typography-button-weight | |
FontSize | String | .875rem | --mud-typography-button-size | |
LineHeight | Double | 1.75 | --mud-typography-button-lineheight | |
LetterSpacing | String | .02857em | --mud-typography-button-letterspacing | |
TextTransform | String | uppercase | --mud-typography-button-text-transform | |
Caption | Caption | |||
FontFamily | String[] | --mud-typography-caption-family | ||
FontWeight | Int32 | 400 | --mud-typography-caption-weight | |
FontSize | String | .75rem | --mud-typography-caption-size | |
LineHeight | Double | 1.66 | --mud-typography-caption-lineheight | |
LetterSpacing | String | .03333em | --mud-typography-caption-letterspacing | |
TextTransform | String | none | --mud-typography-caption-text-transform | |
Overline | Overline | |||
FontFamily | String[] | --mud-typography-overline-family | ||
FontWeight | Int32 | 400 | --mud-typography-overline-weight | |
FontSize | String | .75rem | --mud-typography-overline-size | |
LineHeight | Double | 2.66 | --mud-typography-overline-lineheight | |
LetterSpacing | String | .08333em | --mud-typography-overline-letterspacing | |
TextTransform | String | none | --mud-typography-overline-text-transform |
ZIndex
Name | Type | Default | CSS Variable | CSS Class |
---|---|---|---|---|
Drawer | Int32 | 1100 | --mud-zindex-drawer | |
Popover | Int32 | 1200 | --mud-zindex-popover | |
AppBar | Int32 | 1300 | --mud-zindex-appbar | |
Dialog | Int32 | 1400 | --mud-zindex-dialog | |
Snackbar | Int32 | 1500 | --mud-zindex-snackbar | |
Tooltip | Int32 | 1600 | --mud-zindex-tooltip |