_form-field-theme.scss 7.8 KB

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