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 |