_menu-theme.scss 6.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187
  1. //
  2. // Copyright 2022 Google Inc.
  3. //
  4. // Permission is hereby granted, free of charge, to any person obtaining a copy
  5. // of this software and associated documentation files (the "Software"), to deal
  6. // in the Software without restriction, including without limitation the rights
  7. // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  8. // copies of the Software, and to permit persons to whom the Software is
  9. // furnished to do so, subject to the following conditions:
  10. //
  11. // The above copyright notice and this permission notice shall be included in
  12. // all copies or substantial portions of the Software.
  13. //
  14. // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  15. // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  16. // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  17. // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  18. // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  19. // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  20. // THE SOFTWARE.
  21. //
  22. // Selector '.mdc-*' should only be used in this project.
  23. // stylelint-disable selector-class-pattern --
  24. // Internal styling for Menu MDC component.
  25. @use 'sass:map';
  26. @use 'sass:meta';
  27. @use '@material/elevation/elevation-theme';
  28. @use '@material/list/list-theme';
  29. @use '@material/shape/shape';
  30. @use '@material/theme/keys';
  31. @use '@material/theme/map-ext';
  32. @use '@material/theme/theme';
  33. @use '@material/theme/validate';
  34. @use '@material/tokens/resolvers';
  35. $custom-property-prefix: 'menu';
  36. $light-theme: (
  37. cascading-menu-indicator-icon-color: null,
  38. cascading-menu-indicator-icon-size: null,
  39. container-color: null,
  40. container-elevation: null,
  41. container-shadow-color: null,
  42. container-shape: null,
  43. container-surface-tint-layer-color: null,
  44. divider-color: null,
  45. divider-height: null,
  46. list-item-container-height: null,
  47. list-item-disabled-label-text-color: null,
  48. list-item-disabled-label-text-opacity: null,
  49. list-item-focus-label-text-color: null,
  50. list-item-focus-state-layer-color: null,
  51. list-item-focus-state-layer-opacity: null,
  52. list-item-hover-label-text-color: null,
  53. list-item-hover-state-layer-color: null,
  54. list-item-hover-state-layer-opacity: null,
  55. list-item-label-text-color: null,
  56. list-item-label-text-font: null,
  57. list-item-label-text-line-height: null,
  58. list-item-label-text-size: null,
  59. list-item-label-text-tracking: null,
  60. list-item-label-text-type: null,
  61. list-item-label-text-weight: null,
  62. list-item-pressed-label-text-color: null,
  63. list-item-pressed-state-layer-color: null,
  64. list-item-pressed-state-layer-opacity: null,
  65. list-item-selected-container-color: null,
  66. list-item-with-leading-icon-disabled-leading-icon-color: null,
  67. list-item-with-leading-icon-disabled-leading-icon-opacity: null,
  68. list-item-with-leading-icon-focus-icon-color: null,
  69. list-item-with-leading-icon-hover-icon-color: null,
  70. list-item-with-leading-icon-leading-icon-color: null,
  71. list-item-with-leading-icon-leading-icon-size: null,
  72. );
  73. @mixin theme($theme, $resolvers: resolvers.$material) {
  74. $theme: validate.theme($light-theme, $theme);
  75. $theme: _resolve-theme-elevation($theme, $resolvers: $resolvers);
  76. @include keys.declare-custom-properties(
  77. $theme,
  78. $prefix: $custom-property-prefix
  79. );
  80. }
  81. @mixin theme-styles($theme, $resolvers: resolvers.$material) {
  82. $theme: validate.theme-styles($light-theme, $theme);
  83. $theme: _resolve-theme-elevation($theme, $resolvers: $resolvers);
  84. $theme: keys.create-theme-properties(
  85. $theme,
  86. $prefix: $custom-property-prefix
  87. );
  88. @include theme.property(background-color, map.get($theme, 'container-color'));
  89. @include shape.radius(map.get($theme, 'container-shape'));
  90. @include elevation-theme.overlay-container-color(
  91. map.get($theme, 'container-surface-tint-layer-color')
  92. );
  93. @include elevation-theme.theme-styles(map.get($theme, 'container-elevation'));
  94. .mdc-menu-item--selected {
  95. @include theme.property(
  96. background-color,
  97. map.get($theme, 'list-item-selected-container-color')
  98. );
  99. }
  100. .mdc-menu-item__submenu-indicator {
  101. @include theme.property(
  102. color,
  103. map.get($theme, 'cascading-menu-indicator-icon-color')
  104. );
  105. @include theme.property(
  106. font-size,
  107. map.get($theme, 'cascading-menu-indicator-icon-size')
  108. );
  109. @include theme.property(
  110. width,
  111. map.get($theme, 'cascading-menu-indicator-icon-size')
  112. );
  113. @include theme.property(
  114. height,
  115. map.get($theme, 'cascading-menu-indicator-icon-size')
  116. );
  117. }
  118. .mdc-list {
  119. $list-theme: _rename-list-theme($theme);
  120. $list-theme: map-ext.pick(
  121. $list-theme,
  122. map.keys(list-theme.$light-theme)...
  123. );
  124. // Make the list item container color transparent to allow the elevation
  125. // overlay and menu container color to be visible.
  126. $list-theme: map.merge(
  127. $list-theme,
  128. (
  129. 'list-item-container-color': transparent,
  130. )
  131. );
  132. @include list-theme.theme($list-theme);
  133. }
  134. }
  135. @function _rename-list-theme($theme) {
  136. $theme: map-ext.rename-keys(
  137. $theme,
  138. (
  139. 'list-item-with-leading-icon-disabled-leading-icon-color':
  140. 'list-item-disabled-leading-icon-color',
  141. 'list-item-with-leading-icon-disabled-leading-icon-opacity':
  142. 'list-item-disabled-leading-icon-opacity',
  143. 'list-item-with-leading-icon-hover-icon-color':
  144. 'list-item-hover-leading-icon-color',
  145. 'list-item-with-leading-icon-leading-icon-color':
  146. 'list-item-leading-icon-color',
  147. 'list-item-with-leading-icon-leading-icon-size':
  148. 'list-item-leading-icon-size',
  149. 'cascading-menu-indicator-icon-size': 'list-item-trailing-icon-size',
  150. )
  151. );
  152. @return $theme;
  153. }
  154. @function _resolve-theme-elevation($theme, $resolvers) {
  155. $elevation-resolver: map.get($resolvers, elevation);
  156. $shadow-color: map.get($theme, 'container-shadow-color');
  157. @if $elevation-resolver == null or $shadow-color == null {
  158. @return $theme;
  159. }
  160. $elevation-keys: ('container-elevation');
  161. @each $key in $elevation-keys {
  162. $elevation: map.get($theme, $key);
  163. @if $elevation != null {
  164. $resolved-value: meta.call(
  165. $elevation-resolver,
  166. $elevation: $elevation,
  167. $shadow-color: $shadow-color
  168. );
  169. $theme: map.set($theme, $key, $resolved-value);
  170. }
  171. }
  172. @return $theme;
  173. }