_card-theme.scss 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157
  1. @use 'sass:map';
  2. @use '../core/style/sass-utils';
  3. @use '../core/theming/theming';
  4. @use '../core/theming/inspection';
  5. @use '../core/theming/validation';
  6. @use '../core/typography/typography';
  7. @use '../core/tokens/token-utils';
  8. @use '../core/tokens/m2/mat/card' as tokens-mat-card;
  9. @use '../core/tokens/m2/mdc/elevated-card' as tokens-mdc-elevated-card;
  10. @use '../core/tokens/m2/mdc/outlined-card' as tokens-mdc-outlined-card;
  11. @mixin base($theme) {
  12. @if inspection.get-theme-version($theme) == 1 {
  13. @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
  14. } @else {
  15. @include sass-utils.current-selector-or-root() {
  16. @include token-utils.create-token-values(
  17. tokens-mdc-elevated-card.$prefix,
  18. tokens-mdc-elevated-card.get-unthemable-tokens()
  19. );
  20. @include token-utils.create-token-values(
  21. tokens-mdc-outlined-card.$prefix,
  22. tokens-mdc-outlined-card.get-unthemable-tokens()
  23. );
  24. @include token-utils.create-token-values(
  25. tokens-mat-card.$prefix,
  26. tokens-mat-card.get-unthemable-tokens()
  27. );
  28. }
  29. }
  30. }
  31. @mixin color($theme) {
  32. @if inspection.get-theme-version($theme) == 1 {
  33. @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
  34. } @else {
  35. @include sass-utils.current-selector-or-root() {
  36. @include token-utils.create-token-values(
  37. tokens-mdc-elevated-card.$prefix,
  38. tokens-mdc-elevated-card.get-color-tokens($theme)
  39. );
  40. @include token-utils.create-token-values(
  41. tokens-mdc-outlined-card.$prefix,
  42. tokens-mdc-outlined-card.get-color-tokens($theme)
  43. );
  44. @include token-utils.create-token-values(
  45. tokens-mat-card.$prefix,
  46. tokens-mat-card.get-color-tokens($theme)
  47. );
  48. }
  49. }
  50. }
  51. @mixin typography($theme) {
  52. @if inspection.get-theme-version($theme) == 1 {
  53. @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
  54. } @else {
  55. @include sass-utils.current-selector-or-root() {
  56. @include token-utils.create-token-values(
  57. tokens-mdc-elevated-card.$prefix,
  58. tokens-mdc-elevated-card.get-typography-tokens($theme)
  59. );
  60. @include token-utils.create-token-values(
  61. tokens-mdc-outlined-card.$prefix,
  62. tokens-mdc-outlined-card.get-typography-tokens($theme)
  63. );
  64. @include token-utils.create-token-values(
  65. tokens-mat-card.$prefix,
  66. tokens-mat-card.get-typography-tokens($theme)
  67. );
  68. }
  69. }
  70. }
  71. @mixin density($theme) {
  72. @if inspection.get-theme-version($theme) == 1 {
  73. @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
  74. } @else {
  75. @include sass-utils.current-selector-or-root() {
  76. @include token-utils.create-token-values(
  77. tokens-mdc-elevated-card.$prefix,
  78. tokens-mdc-elevated-card.get-density-tokens($theme)
  79. );
  80. @include token-utils.create-token-values(
  81. tokens-mdc-outlined-card.$prefix,
  82. tokens-mdc-outlined-card.get-density-tokens($theme)
  83. );
  84. @include token-utils.create-token-values(
  85. tokens-mat-card.$prefix,
  86. tokens-mat-card.get-density-tokens($theme)
  87. );
  88. }
  89. }
  90. }
  91. /// Defines the tokens that will be available in the `overrides` mixin and for docs extraction.
  92. @function _define-overrides() {
  93. @return (
  94. (
  95. namespace: tokens-mat-card.$prefix,
  96. tokens: tokens-mat-card.get-token-slots(),
  97. ),
  98. (
  99. namespace: tokens-mdc-elevated-card.$prefix,
  100. tokens: tokens-mdc-elevated-card.get-token-slots(),
  101. prefix: 'elevated-',
  102. ),
  103. (
  104. namespace: tokens-mdc-outlined-card.$prefix,
  105. tokens: tokens-mdc-outlined-card.get-token-slots(),
  106. prefix: 'outlined-',
  107. ),
  108. );
  109. }
  110. @mixin overrides($tokens: ()) {
  111. @include token-utils.batch-create-token-values($tokens, _define-overrides()...);
  112. }
  113. @mixin theme($theme) {
  114. @include theming.private-check-duplicate-theme-styles($theme, 'mat-card') {
  115. @if inspection.get-theme-version($theme) == 1 {
  116. @include _theme-from-tokens(inspection.get-theme-tokens($theme));
  117. } @else {
  118. @include base($theme);
  119. @if inspection.theme-has($theme, color) {
  120. @include color($theme);
  121. }
  122. @if inspection.theme-has($theme, density) {
  123. @include density($theme);
  124. }
  125. @if inspection.theme-has($theme, typography) {
  126. @include typography($theme);
  127. }
  128. }
  129. }
  130. }
  131. @mixin _theme-from-tokens($tokens) {
  132. @include validation.selector-defined(
  133. 'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'
  134. );
  135. @if ($tokens != ()) {
  136. @include token-utils.create-token-values(
  137. tokens-mdc-elevated-card.$prefix,
  138. map.get($tokens, tokens-mdc-elevated-card.$prefix)
  139. );
  140. @include token-utils.create-token-values(
  141. tokens-mdc-outlined-card.$prefix,
  142. map.get($tokens, tokens-mdc-outlined-card.$prefix)
  143. );
  144. @include token-utils.create-token-values(
  145. tokens-mat-card.$prefix,
  146. map.get($tokens, tokens-mat-card.$prefix)
  147. );
  148. }
  149. }