_fab-theme.scss 8.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249
  1. @use '../core/style/sass-utils';
  2. @use '../core/theming/theming';
  3. @use '../core/theming/inspection';
  4. @use '../core/theming/validation';
  5. @use '../core/tokens/m2/mdc/fab' as tokens-mdc-fab;
  6. @use '../core/tokens/m2/mdc/fab-small' as tokens-mdc-fab-small;
  7. @use '../core/tokens/m2/mdc/extended-fab' as tokens-mdc-extended-fab;
  8. @use '../core/tokens/m2/mat/fab' as tokens-mat-fab;
  9. @use '../core/tokens/m2/mat/fab-small' as tokens-mat-fab-small;
  10. @use '../core/tokens/token-utils';
  11. @use '../core/typography/typography';
  12. /// Outputs base theme styles (styles not dependent on the color, typography, or density settings)
  13. /// for the mat-fab.
  14. /// @param {Map} $theme The theme to generate base styles for.
  15. @mixin base($theme) {
  16. @if inspection.get-theme-version($theme) == 1 {
  17. @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
  18. } @else {
  19. @include sass-utils.current-selector-or-root() {
  20. @include token-utils.create-token-values(
  21. tokens-mdc-fab.$prefix,
  22. tokens-mdc-fab.get-unthemable-tokens()
  23. );
  24. @include token-utils.create-token-values(
  25. tokens-mdc-fab-small.$prefix,
  26. tokens-mdc-fab-small.get-unthemable-tokens()
  27. );
  28. @include token-utils.create-token-values(
  29. tokens-mdc-extended-fab.$prefix,
  30. tokens-mdc-extended-fab.get-unthemable-tokens()
  31. );
  32. }
  33. }
  34. }
  35. @mixin _fab-variant($theme, $palette) {
  36. $mdc-tokens: if(
  37. $palette,
  38. tokens-mdc-fab.private-get-color-palette-color-tokens($theme, $palette),
  39. tokens-mdc-fab.get-color-tokens($theme)
  40. );
  41. $mat-tokens: if(
  42. $palette,
  43. tokens-mat-fab.private-get-color-palette-color-tokens($theme, $palette),
  44. tokens-mat-fab.get-color-tokens($theme)
  45. );
  46. @include token-utils.create-token-values(tokens-mdc-fab.$prefix, $mdc-tokens);
  47. @include token-utils.create-token-values(tokens-mat-fab.$prefix, $mat-tokens);
  48. }
  49. @mixin _fab-small-variant($theme, $palette) {
  50. $mdc-tokens: if(
  51. $palette,
  52. tokens-mdc-fab-small.private-get-color-palette-color-tokens($theme, $palette),
  53. tokens-mdc-fab-small.get-color-tokens($theme)
  54. );
  55. $mat-tokens: if(
  56. $palette,
  57. tokens-mat-fab-small.private-get-color-palette-color-tokens($theme, $palette),
  58. tokens-mat-fab-small.get-color-tokens($theme)
  59. );
  60. @include token-utils.create-token-values(tokens-mdc-fab-small.$prefix, $mdc-tokens);
  61. @include token-utils.create-token-values(tokens-mat-fab-small.$prefix, $mat-tokens);
  62. }
  63. /// Outputs color theme styles for the mat-fab.
  64. /// @param {Map} $theme The theme to generate color styles for.
  65. /// @param {ArgList} Additional optional arguments (only supported for M3 themes):
  66. /// $color-variant: The color variant to use for the fab: primary, secondary, or tertiary
  67. /// (If not specified, default primary color will be used).
  68. @mixin color($theme, $options...) {
  69. @if inspection.get-theme-version($theme) == 1 {
  70. @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...);
  71. } @else {
  72. @include sass-utils.current-selector-or-root() {
  73. @include _fab-variant($theme, null);
  74. @include _fab-small-variant($theme, null);
  75. @include token-utils.create-token-values(
  76. tokens-mdc-extended-fab.$prefix,
  77. tokens-mdc-extended-fab.get-color-tokens($theme)
  78. );
  79. .mat-mdc-fab {
  80. &.mat-primary {
  81. @include _fab-variant($theme, primary);
  82. }
  83. &.mat-accent {
  84. @include _fab-variant($theme, accent);
  85. }
  86. &.mat-warn {
  87. @include _fab-variant($theme, warn);
  88. }
  89. }
  90. .mat-mdc-mini-fab {
  91. &.mat-primary {
  92. @include _fab-small-variant($theme, primary);
  93. }
  94. &.mat-accent {
  95. @include _fab-small-variant($theme, accent);
  96. }
  97. &.mat-warn {
  98. @include _fab-small-variant($theme, warn);
  99. }
  100. }
  101. }
  102. }
  103. }
  104. /// Outputs typography theme styles for the mat-fab.
  105. /// @param {Map} $theme The theme to generate typography styles for.
  106. @mixin typography($theme) {
  107. @if inspection.get-theme-version($theme) == 1 {
  108. @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
  109. } @else {
  110. @include sass-utils.current-selector-or-root() {
  111. @include token-utils.create-token-values(
  112. tokens-mdc-extended-fab.$prefix,
  113. tokens-mdc-extended-fab.get-typography-tokens($theme)
  114. );
  115. @include token-utils.create-token-values(
  116. tokens-mat-fab.$prefix,
  117. tokens-mat-fab.get-typography-tokens($theme)
  118. );
  119. @include token-utils.create-token-values(
  120. tokens-mat-fab-small.$prefix,
  121. tokens-mat-fab-small.get-typography-tokens($theme)
  122. );
  123. }
  124. }
  125. }
  126. /// Outputs density theme styles for the mat-fab.
  127. /// @param {Map} $theme The theme to generate density styles for.
  128. @mixin density($theme) {
  129. @if inspection.get-theme-version($theme) == 1 {
  130. @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
  131. } @else {
  132. @include sass-utils.current-selector-or-root() {
  133. @include token-utils.create-token-values(
  134. tokens-mat-fab.$prefix,
  135. tokens-mat-fab.get-density-tokens($theme)
  136. );
  137. @include token-utils.create-token-values(
  138. tokens-mat-fab-small.$prefix,
  139. tokens-mat-fab-small.get-density-tokens($theme)
  140. );
  141. }
  142. }
  143. }
  144. /// Defines the tokens that will be available in the `overrides` mixin and for docs extraction.
  145. @function _define-overrides() {
  146. @return (
  147. (
  148. namespace: tokens-mdc-fab.$prefix,
  149. tokens: tokens-mdc-fab.get-token-slots(),
  150. ),
  151. (
  152. namespace: tokens-mdc-fab-small.$prefix,
  153. tokens: tokens-mdc-fab-small.get-token-slots(),
  154. prefix: 'small-',
  155. ),
  156. (
  157. namespace: tokens-mdc-extended-fab.$prefix,
  158. tokens: tokens-mdc-extended-fab.get-token-slots(),
  159. prefix: 'extended-',
  160. ),
  161. (
  162. namespace: tokens-mat-fab.$prefix,
  163. tokens: tokens-mat-fab.get-token-slots(),
  164. ),
  165. (
  166. namespace: tokens-mat-fab-small.$prefix,
  167. tokens: tokens-mat-fab-small.get-token-slots(),
  168. prefix: 'small-',
  169. ),
  170. );
  171. }
  172. /// Outputs the CSS variable values for the given tokens.
  173. /// @param {Map} $tokens The token values to emit.
  174. @mixin overrides($tokens: ()) {
  175. @include token-utils.batch-create-token-values($tokens, _define-overrides()...);
  176. }
  177. /// Outputs all (base, color, typography, and density) theme styles for the mat-checkbox.
  178. /// @param {Map} $theme The theme to generate styles for.
  179. /// @param {ArgList} Additional optional arguments (only supported for M3 themes):
  180. /// $color-variant: The color variant to use for the fab: primary, secondary, or tertiary
  181. /// (If not specified, default primary color will be used).
  182. @mixin theme($theme, $options...) {
  183. @include theming.private-check-duplicate-theme-styles($theme, 'mat-fab') {
  184. @if inspection.get-theme-version($theme) == 1 {
  185. @include _theme-from-tokens(inspection.get-theme-tokens($theme), $options...);
  186. } @else {
  187. @include base($theme);
  188. @if inspection.theme-has($theme, color) {
  189. @include color($theme);
  190. }
  191. @if inspection.theme-has($theme, density) {
  192. @include density($theme);
  193. }
  194. @if inspection.theme-has($theme, typography) {
  195. @include typography($theme);
  196. }
  197. }
  198. }
  199. }
  200. @mixin _theme-from-tokens($tokens, $options...) {
  201. @include validation.selector-defined(
  202. 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'
  203. );
  204. $mdc-extended-fab-tokens: token-utils.get-tokens-for(
  205. $tokens,
  206. tokens-mdc-extended-fab.$prefix,
  207. $options...
  208. );
  209. $mdc-fab-tokens: token-utils.get-tokens-for($tokens, tokens-mdc-fab.$prefix, $options...);
  210. $mdc-fab-small-tokens: token-utils.get-tokens-for(
  211. $tokens,
  212. tokens-mdc-fab-small.$prefix,
  213. $options...
  214. );
  215. $mat-fab-tokens: token-utils.get-tokens-for($tokens, tokens-mat-fab.$prefix, $options...);
  216. $mat-fab-small-tokens: token-utils.get-tokens-for(
  217. $tokens,
  218. tokens-mat-fab-small.$prefix,
  219. $options...
  220. );
  221. @include token-utils.create-token-values(
  222. tokens-mdc-extended-fab.$prefix,
  223. $mdc-extended-fab-tokens
  224. );
  225. @include token-utils.create-token-values(tokens-mdc-fab.$prefix, $mdc-fab-tokens);
  226. @include token-utils.create-token-values(tokens-mdc-fab-small.$prefix, $mdc-fab-small-tokens);
  227. @include token-utils.create-token-values(tokens-mat-fab.$prefix, $mat-fab-tokens);
  228. @include token-utils.create-token-values(tokens-mat-fab-small.$prefix, $mat-fab-small-tokens);
  229. }