_button-theme.scss 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447
  1. @use '../core/theming/theming';
  2. @use '../core/theming/inspection';
  3. @use '../core/theming/validation';
  4. @use '../core/tokens/token-utils';
  5. @use '../core/typography/typography';
  6. @use '../core/tokens/m2/mdc/filled-button' as tokens-mdc-filled-button;
  7. @use '../core/tokens/m2/mat/filled-button' as tokens-mat-filled-button;
  8. @use '../core/tokens/m2/mdc/outlined-button' as tokens-mdc-outlined-button;
  9. @use '../core/tokens/m2/mat/outlined-button' as tokens-mat-outlined-button;
  10. @use '../core/tokens/m2/mdc/protected-button' as tokens-mdc-protected-button;
  11. @use '../core/tokens/m2/mat/protected-button' as tokens-mat-protected-button;
  12. @use '../core/tokens/m2/mdc/text-button' as tokens-mdc-text-button;
  13. @use '../core/tokens/m2/mat/text-button' as tokens-mat-text-button;
  14. @use '../core/style/sass-utils';
  15. @mixin _text-button-variant($theme, $palette) {
  16. $mdc-tokens: if(
  17. $palette,
  18. tokens-mdc-text-button.private-get-color-palette-color-tokens($theme, $palette),
  19. tokens-mdc-text-button.get-color-tokens($theme)
  20. );
  21. $mat-tokens: if(
  22. $palette,
  23. tokens-mat-text-button.private-get-color-palette-color-tokens($theme, $palette),
  24. tokens-mat-text-button.get-color-tokens($theme)
  25. );
  26. @include token-utils.create-token-values(tokens-mdc-text-button.$prefix, $mdc-tokens);
  27. @include token-utils.create-token-values(tokens-mat-text-button.$prefix, $mat-tokens);
  28. }
  29. @mixin _filled-button-variant($theme, $palette) {
  30. $mdc-tokens: if(
  31. $palette,
  32. tokens-mdc-filled-button.private-get-color-palette-color-tokens($theme, $palette),
  33. tokens-mdc-filled-button.get-color-tokens($theme)
  34. );
  35. $mat-tokens: if(
  36. $palette,
  37. tokens-mat-filled-button.private-get-color-palette-color-tokens($theme, $palette),
  38. tokens-mat-filled-button.get-color-tokens($theme)
  39. );
  40. @include token-utils.create-token-values(tokens-mdc-filled-button.$prefix, $mdc-tokens);
  41. @include token-utils.create-token-values(tokens-mat-filled-button.$prefix, $mat-tokens);
  42. }
  43. @mixin _protected-button-variant($theme, $palette) {
  44. $mdc-tokens: if(
  45. $palette,
  46. tokens-mdc-protected-button.private-get-color-palette-color-tokens($theme, $palette),
  47. tokens-mdc-protected-button.get-color-tokens($theme)
  48. );
  49. $mat-tokens: if(
  50. $palette,
  51. tokens-mat-protected-button.private-get-color-palette-color-tokens($theme, $palette),
  52. tokens-mat-protected-button.get-color-tokens($theme)
  53. );
  54. @include token-utils.create-token-values(tokens-mdc-protected-button.$prefix, $mdc-tokens);
  55. @include token-utils.create-token-values(tokens-mat-protected-button.$prefix, $mat-tokens);
  56. }
  57. @mixin _outlined-button-variant($theme, $palette) {
  58. $mdc-tokens: if(
  59. $palette,
  60. tokens-mdc-outlined-button.private-get-color-palette-color-tokens($theme, $palette),
  61. tokens-mdc-outlined-button.get-color-tokens($theme)
  62. );
  63. $mat-tokens: if(
  64. $palette,
  65. tokens-mat-outlined-button.private-get-color-palette-color-tokens($theme, $palette),
  66. tokens-mat-outlined-button.get-color-tokens($theme)
  67. );
  68. @include token-utils.create-token-values(tokens-mdc-outlined-button.$prefix, $mdc-tokens);
  69. @include token-utils.create-token-values(tokens-mat-outlined-button.$prefix, $mat-tokens);
  70. }
  71. @mixin _theme-from-tokens($tokens, $options...) {
  72. @include validation.selector-defined(
  73. 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'
  74. );
  75. $mdc-text-button-tokens: token-utils.get-tokens-for(
  76. $tokens,
  77. tokens-mdc-text-button.$prefix,
  78. $options...
  79. );
  80. $mdc-protected-button-tokens: token-utils.get-tokens-for(
  81. $tokens,
  82. tokens-mdc-protected-button.$prefix,
  83. $options...
  84. );
  85. $mdc-filled-button-tokens: token-utils.get-tokens-for(
  86. $tokens,
  87. tokens-mdc-filled-button.$prefix,
  88. $options...
  89. );
  90. $mdc-outlined-button-tokens: token-utils.get-tokens-for(
  91. $tokens,
  92. tokens-mdc-outlined-button.$prefix,
  93. $options...
  94. );
  95. $mat-text-button-tokens: token-utils.get-tokens-for(
  96. $tokens,
  97. tokens-mat-text-button.$prefix,
  98. $options...
  99. );
  100. $mat-protected-button-tokens: token-utils.get-tokens-for(
  101. $tokens,
  102. tokens-mat-protected-button.$prefix,
  103. $options...
  104. );
  105. $mat-filled-button-tokens: token-utils.get-tokens-for(
  106. $tokens,
  107. tokens-mat-filled-button.$prefix,
  108. $options...
  109. );
  110. $mat-outlined-button-tokens: token-utils.get-tokens-for(
  111. $tokens,
  112. tokens-mat-outlined-button.$prefix,
  113. $options...
  114. );
  115. @include token-utils.create-token-values(tokens-mdc-text-button.$prefix, $mdc-text-button-tokens);
  116. @include token-utils.create-token-values(
  117. tokens-mdc-protected-button.$prefix,
  118. $mdc-protected-button-tokens
  119. );
  120. @include token-utils.create-token-values(
  121. tokens-mdc-filled-button.$prefix,
  122. $mdc-filled-button-tokens
  123. );
  124. @include token-utils.create-token-values(
  125. tokens-mdc-outlined-button.$prefix,
  126. $mdc-outlined-button-tokens
  127. );
  128. @include token-utils.create-token-values(tokens-mat-text-button.$prefix, $mat-text-button-tokens);
  129. @include token-utils.create-token-values(
  130. tokens-mat-protected-button.$prefix,
  131. $mat-protected-button-tokens
  132. );
  133. @include token-utils.create-token-values(
  134. tokens-mat-filled-button.$prefix,
  135. $mat-filled-button-tokens
  136. );
  137. @include token-utils.create-token-values(
  138. tokens-mat-outlined-button.$prefix,
  139. $mat-outlined-button-tokens
  140. );
  141. }
  142. /// Outputs base theme styles (styles not dependent on the color, typography, or density settings)
  143. /// for the mat-button.
  144. /// @param {Map} $theme The theme to generate base styles for.
  145. @mixin base($theme) {
  146. @if inspection.get-theme-version($theme) == 1 {
  147. @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
  148. } @else {
  149. @include sass-utils.current-selector-or-root() {
  150. @include token-utils.create-token-values(
  151. tokens-mdc-text-button.$prefix,
  152. tokens-mdc-text-button.get-unthemable-tokens()
  153. );
  154. @include token-utils.create-token-values(
  155. tokens-mdc-filled-button.$prefix,
  156. tokens-mdc-filled-button.get-unthemable-tokens()
  157. );
  158. @include token-utils.create-token-values(
  159. tokens-mdc-protected-button.$prefix,
  160. tokens-mdc-protected-button.get-unthemable-tokens()
  161. );
  162. @include token-utils.create-token-values(
  163. tokens-mdc-outlined-button.$prefix,
  164. tokens-mdc-outlined-button.get-unthemable-tokens()
  165. );
  166. @include token-utils.create-token-values(
  167. tokens-mat-text-button.$prefix,
  168. tokens-mat-text-button.get-unthemable-tokens()
  169. );
  170. @include token-utils.create-token-values(
  171. tokens-mat-filled-button.$prefix,
  172. tokens-mat-filled-button.get-unthemable-tokens()
  173. );
  174. @include token-utils.create-token-values(
  175. tokens-mat-protected-button.$prefix,
  176. tokens-mat-protected-button.get-unthemable-tokens()
  177. );
  178. @include token-utils.create-token-values(
  179. tokens-mat-outlined-button.$prefix,
  180. tokens-mat-outlined-button.get-unthemable-tokens()
  181. );
  182. }
  183. }
  184. }
  185. /// Outputs color theme styles for the mat-button.
  186. /// @param {Map} $theme The theme to generate color styles for.
  187. /// @param {ArgList} Additional optional arguments (only supported for M3 themes):
  188. /// $color-variant: The color variant to use for the button: primary, secondary, tertiary,
  189. /// or error (If not specified, default primary color will be used).
  190. @mixin color($theme, $options...) {
  191. @if inspection.get-theme-version($theme) == 1 {
  192. @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...);
  193. } @else {
  194. @include sass-utils.current-selector-or-root() {
  195. @include _text-button-variant($theme, null);
  196. @include _filled-button-variant($theme, null);
  197. @include _protected-button-variant($theme, null);
  198. @include _outlined-button-variant($theme, null);
  199. }
  200. .mat-mdc-button {
  201. &.mat-primary {
  202. @include _text-button-variant($theme, primary);
  203. }
  204. &.mat-accent {
  205. @include _text-button-variant($theme, accent);
  206. }
  207. &.mat-warn {
  208. @include _text-button-variant($theme, warn);
  209. }
  210. }
  211. .mat-mdc-unelevated-button {
  212. &.mat-primary {
  213. @include _filled-button-variant($theme, primary);
  214. }
  215. &.mat-accent {
  216. @include _filled-button-variant($theme, accent);
  217. }
  218. &.mat-warn {
  219. @include _filled-button-variant($theme, warn);
  220. }
  221. }
  222. .mat-mdc-raised-button {
  223. &.mat-primary {
  224. @include _protected-button-variant($theme, primary);
  225. }
  226. &.mat-accent {
  227. @include _protected-button-variant($theme, accent);
  228. }
  229. &.mat-warn {
  230. @include _protected-button-variant($theme, warn);
  231. }
  232. }
  233. .mat-mdc-outlined-button {
  234. &.mat-primary {
  235. @include _outlined-button-variant($theme, primary);
  236. }
  237. &.mat-accent {
  238. @include _outlined-button-variant($theme, accent);
  239. }
  240. &.mat-warn {
  241. @include _outlined-button-variant($theme, warn);
  242. }
  243. }
  244. }
  245. }
  246. /// Outputs typography theme styles for the mat-button.
  247. /// @param {Map} $theme The theme to generate typography styles for.
  248. @mixin typography($theme) {
  249. @if inspection.get-theme-version($theme) == 1 {
  250. @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
  251. } @else {
  252. @include sass-utils.current-selector-or-root() {
  253. @include token-utils.create-token-values(
  254. tokens-mdc-text-button.$prefix,
  255. tokens-mdc-text-button.get-typography-tokens($theme)
  256. );
  257. @include token-utils.create-token-values(
  258. tokens-mdc-filled-button.$prefix,
  259. tokens-mdc-filled-button.get-typography-tokens($theme)
  260. );
  261. @include token-utils.create-token-values(
  262. tokens-mdc-protected-button.$prefix,
  263. tokens-mdc-protected-button.get-typography-tokens($theme)
  264. );
  265. @include token-utils.create-token-values(
  266. tokens-mdc-outlined-button.$prefix,
  267. tokens-mdc-outlined-button.get-typography-tokens($theme)
  268. );
  269. @include token-utils.create-token-values(
  270. tokens-mat-text-button.$prefix,
  271. tokens-mat-text-button.get-typography-tokens($theme)
  272. );
  273. @include token-utils.create-token-values(
  274. tokens-mat-filled-button.$prefix,
  275. tokens-mat-filled-button.get-typography-tokens($theme)
  276. );
  277. @include token-utils.create-token-values(
  278. tokens-mat-protected-button.$prefix,
  279. tokens-mat-protected-button.get-typography-tokens($theme)
  280. );
  281. @include token-utils.create-token-values(
  282. tokens-mat-outlined-button.$prefix,
  283. tokens-mat-outlined-button.get-typography-tokens($theme)
  284. );
  285. }
  286. }
  287. }
  288. /// Outputs density theme styles for the mat-button.
  289. /// @param {Map} $theme The theme to generate density styles for.
  290. @mixin density($theme) {
  291. @if inspection.get-theme-version($theme) == 1 {
  292. @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
  293. } @else {
  294. @include sass-utils.current-selector-or-root() {
  295. @include token-utils.create-token-values(
  296. tokens-mdc-text-button.$prefix,
  297. tokens-mdc-text-button.get-density-tokens($theme)
  298. );
  299. @include token-utils.create-token-values(
  300. tokens-mdc-filled-button.$prefix,
  301. tokens-mdc-filled-button.get-density-tokens($theme)
  302. );
  303. @include token-utils.create-token-values(
  304. tokens-mdc-protected-button.$prefix,
  305. tokens-mdc-protected-button.get-density-tokens($theme)
  306. );
  307. @include token-utils.create-token-values(
  308. tokens-mdc-outlined-button.$prefix,
  309. tokens-mdc-outlined-button.get-density-tokens($theme)
  310. );
  311. @include token-utils.create-token-values(
  312. tokens-mat-text-button.$prefix,
  313. tokens-mat-text-button.get-density-tokens($theme)
  314. );
  315. @include token-utils.create-token-values(
  316. tokens-mat-filled-button.$prefix,
  317. tokens-mat-filled-button.get-density-tokens($theme)
  318. );
  319. @include token-utils.create-token-values(
  320. tokens-mat-protected-button.$prefix,
  321. tokens-mat-protected-button.get-density-tokens($theme)
  322. );
  323. @include token-utils.create-token-values(
  324. tokens-mat-outlined-button.$prefix,
  325. tokens-mat-outlined-button.get-density-tokens($theme)
  326. );
  327. }
  328. }
  329. }
  330. /// Defines the tokens that will be available in the `overrides` mixin and for docs extraction.
  331. @function _define-overrides() {
  332. $mdc-filled-button-tokens: tokens-mdc-filled-button.get-token-slots();
  333. $mat-filled-button-tokens: tokens-mat-filled-button.get-token-slots();
  334. $mdc-outlined-button-tokens: tokens-mdc-outlined-button.get-token-slots();
  335. $mat-outlined-button-tokens: tokens-mat-outlined-button.get-token-slots();
  336. $mdc-protected-button-tokens: tokens-mdc-protected-button.get-token-slots();
  337. $mat-protected-button-tokens: tokens-mat-protected-button.get-token-slots();
  338. $mdc-text-button-tokens: tokens-mdc-text-button.get-token-slots();
  339. $mat-text-button-tokens: tokens-mat-text-button.get-token-slots();
  340. @return (
  341. (
  342. namespace: tokens-mdc-filled-button.$prefix,
  343. tokens: $mdc-filled-button-tokens,
  344. prefix: 'filled-',
  345. ),
  346. (
  347. namespace: tokens-mat-filled-button.$prefix,
  348. tokens: $mat-filled-button-tokens,
  349. prefix: 'filled-',
  350. ),
  351. (
  352. namespace: tokens-mdc-outlined-button.$prefix,
  353. tokens: $mdc-outlined-button-tokens,
  354. prefix: 'outlined-',
  355. ),
  356. (
  357. namespace: tokens-mat-outlined-button.$prefix,
  358. tokens: $mat-outlined-button-tokens,
  359. prefix: 'outlined-',
  360. ),
  361. (
  362. namespace: tokens-mdc-protected-button.$prefix,
  363. tokens: $mdc-protected-button-tokens,
  364. prefix: 'protected-',
  365. ),
  366. (
  367. namespace: tokens-mat-protected-button.$prefix,
  368. tokens: $mat-protected-button-tokens,
  369. prefix: 'protected-',
  370. ),
  371. (
  372. namespace: tokens-mdc-text-button.$prefix,
  373. tokens: $mdc-text-button-tokens,
  374. prefix: 'text-',
  375. ),
  376. (
  377. namespace: tokens-mat-text-button.$prefix,
  378. tokens: $mat-text-button-tokens,
  379. prefix: 'text-',
  380. ),
  381. );
  382. }
  383. /// Outputs the CSS variable values for the given tokens.
  384. /// @param {Map} $tokens The token values to emit.
  385. @mixin overrides($tokens: ()) {
  386. @include token-utils.batch-create-token-values($tokens, _define-overrides()...);
  387. }
  388. /// Outputs all (base, color, typography, and density) theme styles for the mat-button.
  389. /// @param {Map} $theme The theme to generate styles for.
  390. /// @param {ArgList} Additional optional arguments (only supported for M3 themes):
  391. /// $color-variant: The color variant to use for the button: primary, secondary, tertiary,
  392. /// or error (If not specified, default primary color will be used).
  393. @mixin theme($theme, $options...) {
  394. @include theming.private-check-duplicate-theme-styles($theme, 'mat-button') {
  395. @if inspection.get-theme-version($theme) == 1 {
  396. @include _theme-from-tokens(inspection.get-theme-tokens($theme), $options...);
  397. } @else {
  398. @include base($theme);
  399. @if inspection.theme-has($theme, color) {
  400. @include color($theme);
  401. }
  402. @if inspection.theme-has($theme, density) {
  403. @include density($theme);
  404. }
  405. @if inspection.theme-has($theme, typography) {
  406. @include typography($theme);
  407. }
  408. }
  409. }
  410. }